/* ========================================
   KFZTEILE24 - MODULAR LANDING PAGE CSS
   Version 3 - UX-Feedback + Bugfixes
   Stand: 12.03.2026
   ======================================== */

/* ==========================================================================
   FONTS
   ========================================================================== */
@font-face {
  font-family: 'GT America Extended Black';
  src: url('/cms/fonts/GT-America-Extended-Black.woff2') format('woff2'),
       url('/cms/fonts/GT-America-Extended-Black.otf') format('opentype');
}

@font-face {
  font-family: 'GT America Extended Bold';
  src: url('/cms/fonts/GT-America-Extended-Bold.woff2') format('woff2'),
       url('/cms/fonts/GT-America-Extended-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'GT America Extended Regular';
  src: url('/cms/fonts/GT-America-Extended-Regular.woff2') format('woff2'),
       url('/cms/fonts/GT-America-Extended-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'GT America Standard Bold';
  src: url('/cms/fonts/GT-America-Standard-Bold.woff2') format('woff2'),
       url('/cms/fonts/GT-America-Standard-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'GT America Standard Regular';
  src: url('/cms/fonts/GT-America-Standard-Regular.woff2') format('woff2'),
       url('/cms/fonts/GT-America-Standard-Regular.otf') format('opentype');
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.newLP h1 {
  font-family: 'GT America Extended Black', Arial, sans-serif;
  font-size: 30px;
  line-height: 34px;
  margin: 0 0 16px 0;
  text-align: left;
  color: #222222;
}

.newLP h1.page-title {
  margin-top: 16px;
  padding-top: 0;
}

@media (min-width: 768px) {
  .newLP h1.page-title {
    margin-top: 24px;
  }
}

.newLP h2 {
  font-family: 'GT America Extended Bold', Arial, sans-serif; 
  font-size: 18px;
  line-height: 24px;
  margin: 0 0 16px 0;
  text-align: left;
  color: #222222;
}

.newLP h3 {
  font-family: 'GT America Extended Bold', Arial, sans-serif; 
  font-size: 20px;
  line-height: 24px;
  margin: 0 0 12px 0;
  text-align: left;
  color: #222222;
}

.newLP h4 {
  font-family: 'GT America Standard Bold', Arial, sans-serif; 
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 8px 0;
  text-align: left;
  color: #222222;
}

.newLP p {
  font-family: 'GT America Standard Regular', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 16px 0;
  text-align: left;
}

.newLP .text-container {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 480px) {
  .newLP .text-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  .newLP .text-container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

.newLP p a, .newLP a.textlink {
  color: #614ffb;
  transition: all ease-out 0.25s;
  text-decoration: none;
}

.newLP p a:hover, .newLP a.textlink:hover {
  color: #130254;
  text-decoration: underline;
}

@media (min-width: 480px) {
  .newLP h1 { font-size: 34px; line-height: 38px; }
  .newLP h2 { font-size: 30px; line-height: 34px; }
  .newLP h3 { font-size: 24px; line-height: 28px; }
  .newLP h4 { font-size: 20px; line-height: 24px; }
  .newLP p { font-size: 14px; line-height: 20px; }
}

@media (min-width: 768px) {
  .newLP h1 { font-size: 48px; line-height: 50px; }
  .newLP h2 { font-size: 40px; line-height: 44px; }
  .newLP h3 { font-size: 24px; line-height: 28px; }
  .newLP h4 { font-size: 20px; line-height: 24px; }
  .newLP p { font-size: 16px; line-height: 22px; }
}

/* ==========================================================================
   COLORS
   ========================================================================== */
.darkbluebackground { background-color: #130254; }
.vibrantbluebackground { background-color: #614ffb; }
.freshgreenbackground { background-color: #66e8bd; }
.greybackground { background-color: #eeeeee; }
.whitebackground { background-color: #ffffff; }
.energeticorangebackground { background-color: #fb5200; }
.tablet-header-background { background-color: #222222; }

.darkbluetext { color: #130254 !important; }
.vibrantbluetext { color: #614ffb !important; }
.freshgreentext { color: #66e8bd !important; }
.whitetext { color: #ffffff !important; }
.energeticorangetext { color: #fb5200 !important; }

/* ==========================================================================
   LAYOUT & SPACING
   ========================================================================== */
.p_32 { padding: 20px; }
.p_64 { padding: 32px; }
.p_top_32 { padding-top: 20px; }
.p_bottom_32 { padding-bottom: 20px; }
.p_top_64 { padding-top: 32px; }
.p_bottom_64 { padding-bottom: 32px; }

.m_32 { margin: 20px; }
.m_top_32 { margin-top: 20px; }
.m_bottom_32 { margin-bottom: 20px; }
.m_top_64 { margin-top: 32px; }
.m_bottom_64 { margin-bottom: 32px; }

@media (min-width: 480px) {
  .p_32 { padding: 24px; }
  .p_64 { padding: 48px; }
  .p_top_32 { padding-top: 24px; }
  .p_bottom_32 { padding-bottom: 24px; }
  .p_top_64 { padding-top: 48px; }
  .p_bottom_64 { padding-bottom: 48px; }
  .m_32 { margin: 24px; }
  .m_top_32 { margin-top: 24px; }
  .m_bottom_32 { margin-bottom: 24px; }
  .m_top_64 { margin-top: 48px; }
  .m_bottom_64 { margin-bottom: 48px; }
}

@media (min-width: 768px) {
  .p_32 { padding: 32px; }
  .p_64 { padding: 64px; }
  .p_top_32 { padding-top: 32px; }
  .p_bottom_32 { padding-bottom: 32px; }
  .p_top_64 { padding-top: 64px; }
  .p_bottom_64 { padding-bottom: 64px; }
  .m_32 { margin: 32px; }
  .m_top_32 { margin-top: 32px; }
  .m_bottom_32 { margin-bottom: 32px; }
  .m_top_64 { margin-top: 64px; }
  .m_bottom_64 { margin-bottom: 64px; }
}

.withmargin {
  margin-left: 20px;
  margin-right: 20px;
}

@media (min-width: 480px) {
  .withmargin {
    margin-left: 32px;
    margin-right: 32px;
  }
}

@media (min-width: 1024px) {
  .withmargin {
    margin-left: 10%;
    margin-right: 10%;
  }
}

/* ==========================================================================
   BUTTONS (CTA)
   ========================================================================== */
.cta {
  font-family: 'GT America Standard Bold', Arial, sans-serif;
  background-color: #614ffb;
  color: #ffffff;
  border: none;
  border-radius: 1px;
  padding: 10px 30px;
  transition: all ease-out 0.25s;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cta { 
    font-size: 16px; 
    padding: 12px 36px;
  }
}

.cta.orange {
  background-color: #fb5200;
}

.cta.transparent {
  background-color: transparent;
  color: #130254;
  border: 1px solid #130254;
}

.cta:hover {
  background-color: #130254;
  color: #ffffff;
  text-decoration: none !important;
}

.cta.transparent:hover {
  background-color: #130254;
  color: #ffffff;
}

/* ==========================================================================
   GRID SYSTEM - FIX: Gleiche Kachelhöhe + Hover-Hintergrund
   ========================================================================== */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

@media (min-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

.grid-item {
  background-color: #ffffff;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 280px;
  padding: 24px 16px;
  transition: all ease-out 0.25s;
  text-decoration: none;
  color: #130254;
}

@media (min-width: 768px) {
  .grid-item {
    min-height: 300px;
    padding: 32px 24px;
  }
}

.grid-item:hover {
  background-color: #f8f8f8;
  border-color: #614ffb;
  cursor: pointer;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(19, 2, 84, 0.12);
  text-decoration: none;
}

.grid-item:focus {
  outline: 2px solid #614ffb;
  outline-offset: 2px;
}

/* Bild-Container mit einheitlicher Höhe */
.grid-item .img-wrapper {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background-color: transparent;
}

.grid-item img {
  max-width: 100%;
  max-height: 140px;
  height: auto;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Hover: Bild-Hintergrund bleibt transparent */
.grid-item:hover img {
  background-color: transparent;
}

.grid-item h3 {
  font-family: 'GT America Extended Bold', Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  margin: auto 0 4px 0;
  color: #222222;
  text-align: center;
}

@media (min-width: 768px) {
  .grid-item h3 {
    font-size: 16px;
    line-height: 20px;
  }
}

.product-meta {
  font-family: 'GT America Standard Regular', Arial, sans-serif;
  font-size: 12px;
  color: #614ffb;
  margin: 0;
}

/* ==========================================================================
   TABLE STYLES - FIX: Korrekte Darstellung
   ========================================================================== */
.table-container {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
}

.newLP table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'GT America Standard Regular', Arial, sans-serif;
  font-size: 14px;
  min-width: 700px;
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .newLP table {
    font-size: 16px;
  }
}

.newLP thead {
  background-color: #130254;
  color: #ffffff;
}

.newLP th {
  font-family: 'GT America Standard Bold', Arial, sans-serif;
  padding: 14px 16px;
  text-align: left;
  white-space: nowrap;
  border: none;
}

.newLP td {
  padding: 14px 16px;
  border-bottom: 1px solid #e3e3e3;
  vertical-align: middle;
}

.newLP tbody tr {
  background-color: #ffffff;
}

.newLP tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

.newLP tbody tr:hover {
  background-color: #eeeeee;
}

/* Sterne-Spalte */
.newLP td:last-child {
  text-align: center;
  white-space: nowrap;
  color: #fb5200;
  font-size: 18px;
  letter-spacing: 2px;
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion-item {
  border-bottom: 1px solid #e3e3e3;
}

.accordion {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  color: #130254;
  cursor: pointer;
  width: 100%;
  font-family: 'GT America Extended Bold', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  padding: 20px 0;
  text-align: left;
  transition: color 0.25s ease-out;
}

@media (min-width: 480px) {
  .accordion {
    font-size: 20px;
    line-height: 26px;
  }
}

@media (min-width: 768px) {
  .accordion {
    font-size: 24px;
    line-height: 28px;
  }
}

.accordion:hover,
.accordion:focus {
  color: #614ffb;
  outline: none;
}

.accordion.active {
  color: #130254;
}

.accordion::after {
  content: '+';
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 300;
  margin-left: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease-out;
}

@media (min-width: 768px) {
  .accordion::after {
    font-size: 32px;
    margin-left: 24px;
  }
}

.accordion.active::after {
  content: '\2212';
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0;
}

.panel.open {
  max-height: none;
}

.panel-content {
  padding: 0 0 20px 0;
}

.panel p:first-child {
  margin-top: 0;
}

.panel p:last-child {
  margin-bottom: 0;
}

.panel ul, .panel ol {
  font-family: 'GT America Standard Regular', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  padding-left: 20px;
  margin: 0 0 16px 0;
}

@media (min-width: 768px) {
  .panel ul, .panel ol {
    font-size: 16px;
    line-height: 22px;
  }
}

/* ==========================================================================
   VIDEO EMBED
   ========================================================================== */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background-color: #222222;
  border-radius: 8px;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-caption {
  font-size: 12px;
  color: #666666;
  font-style: italic;
  margin-top: 8px;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
*:focus-visible {
  outline: 2px solid #614ffb;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #130254;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-family: 'GT America Standard Bold', Arial, sans-serif;
}

.skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.centertext { text-align: center; }
.lefttext { text-align: left; }
.righttext { text-align: right; }
.flex { display: flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.justify-center { justify-content: center; }
.aligncenter { align-items: center; }
.direction-row { flex-direction: row; }
.direction-column { flex-direction: column; }
.space-between { justify-content: space-between; }

@media (min-width: 768px) {
  .handheld { display: none !important; }
}

@media (max-width: 767px) {
  .desktop { display: none !important; }
}

@media (min-width: 480px) {
  .mobile { display: none !important; }
}

img {
  max-width: 100%;
  height: auto;
}

.nomargin { margin: 0; }
.nopadding { padding: 0; }

a.notextdeco {
  text-decoration: none !important;
  transition: all ease-out 0.25s;
}

a.notextdeco:hover {
  text-decoration: none;
}