/**
 * GROTEC Mobile Akkordeon Styles
 * Strukturierte und optimierte Version
 */

/* Desktop Ausblendung */
#akkordeon-mobile-id
.akkordeon-mobile {
  display: none;              /* Standardmäßig ausgeblendet */
  height: 100%;              /* Höhe auf 100% setzen statt 100vh */
}

/* Mobile Anzeige aktivieren */
@media (max-width: 1023px) {
  .akkordeon-mobile {
    display: flex;            /* Anzeigen unter 1024px */
  }
}

/* ========================================
   1. Basis Container Styles
   ======================================== */
.grotec-akkordeon-container,
.akkordeon-mobile {
  display: flex;                /* Flexbox-Layout für Container-Ausrichtung */
  align-items: center;          /* Vertikale Zentrierung der Inhalte */
  justify-content: center;      /* Horizontale Zentrierung der Inhalte */
  padding: 5px;               /* Innenabstand rundum */
  width: 100%;                 /* Volle verfügbare Breite */
  height: 100%;               /* Höhe auf 100% setzen */
}

.grotec-accord-mobile {
  display: flex;               /* Flexbox für Akkordeon-Layout */
  flex-direction: column;      /* Elemente untereinander anordnen */
  max-width: 800px;           /* Maximale Breite begrenzen */
  width: 100%;                /* Volle verfügbare Breite bis max-width */
  height: auto;               /* Automatische Höhenanpassung */
  min-height: 100%;           /* Mindesthöhe auf 100% setzen */
}

/* ========================================
   2. Akkordeon Header Styles
   ======================================== */
.grotec-accordion-header {
  display: flex;               /* Flexbox für Header-Layout */
  justify-content: flex-start; /* Elemente linksbündig ausrichten */
  align-items: center;         /* Vertikale Zentrierung im Header */
  padding: 0;                  /* Kein Innenabstand */
  cursor: pointer;             /* Zeiger-Cursor für Klickbarkeit */
  position: relative;          /* Für absolute Positionierung des Symbols */
  gap: 0;                  /* Abstand zwischen Header-Elementen */
  width: 100%;                /* Volle Breite */
  border-bottom: 1px solid #000000;  /* Untere Trennlinie */
}

.grotec-number  {
  font-size: 48px;          /* Große Schrift für Nummern */
  color: #000000;             /* Schwarze Textfarbe */
  font-weight: 100;          /* Fette Schrift */
  padding: 15px 10px 0px 7px;          /* Vertikaler Innenabstand */
}

.grotec-symbol {
  font-size: 24px;             /* Mittlere Schriftgröße für Symbol */
  color: #FF003A;             /* Rote Symbolfarbe */
  position: absolute;         /* Absolute Positionierung */
  right: 0;                   /* Am rechten Rand ausrichten */
  transition: transform 0.3s ease; /* Sanfte Transformation */
  padding: 25px 10px 0px 7px          /* Vertikaler Innenabstand */
}

/* ========================================
   3. Akkordeon Content Styles
   ======================================== */
.grotec-accordion-content {
  max-height: 0;              /* Geschlossener Zustand */
  overflow: hidden;           /* Überflüssigen Inhalt verstecken */
  transition: all 0.4s ease-out; /* Sanfte Ein-/Ausblendung */
  opacity: 0;                 /* Unsichtbar im geschlossenen Zustand */
  width: 100%;               /* Volle Breite */
}

.grotec-accordion-content h3 {
  color: #000000;             /* Schwarze Überschriftfarbe */
  margin: 20px 0 15px;        /* Abstände oben und unten */
  font-size: 20px;            /* Normale Schriftgröße */
  text-transform: uppercase;   /* Großbuchstaben */
  font-weight: bold;          /* Fette Schrift */
}

.grotec-accordion-content p {
  color: #000000;             /* Schwarze Textfarbe */
  line-height: 1.6;           /* Zeilenhöhe für Lesbarkeit */
  margin-bottom: 20px;        /* Abstand nach unten */
  font-size: 16px;            /* Leicht kleinere Schrift */
}

.grotec-accordion-content img {
  width: 100%;               /* Volle Breite */
  height: auto;              /* Proportionale Höhe */
  margin: 10px 0 20px;       /* Abstände oben und unten */
  filter: grayscale(100%) sepia(20%) hue-rotate(300deg); /* Bildfilter für einheitliches Aussehen */
}

/* Trennlinie im Content */
.grotec-accordion-content .content-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000000;   /* Schwarze Linie im Light Mode */
  margin: 10px 0 30px;            /* Abstand nur nach unten */
  opacity: 0.5;                /* Dezente Transparenz */
}

/* Dark Mode für Trennlinie */
.site-dark .grotec-accordion-content .content-divider {
  background-color: #ffffff;   /* Weiße Linie im Dark Mode */
}

/* ========================================
   4. Dark Mode Styles
   ======================================== */
.site-dark .grotec-accordion-header {
  border-bottom: 1px solid #ffffff; /* Weiße Trennlinie im Dark Mode */
}

.site-dark .grotec-number {
  color: #ffffff;             /* Weiße Zahlen im Dark Mode */
}

.site-dark .grotec-symbol {
  color: #FF003A;             /* Rotes Symbol bleibt im Dark Mode */
}

.site-dark .grotec-accordion-content h3 {
  color: #ffffff;             /* Weiße Überschriften im Dark Mode */
}

.site-dark .grotec-accordion-content p {
  color: #ffffff;             /* Weißer Text im Dark Mode */
}

/* ========================================
   5. Interaktive Zustände
   ======================================== */
.grotec-accord-mobile input[type="radio"] {
  display: none;              /* Radio-Buttons ausblenden */
}

.grotec-accord-mobile input[type="radio"]:checked + .grotec-accordion-header + .grotec-accordion-content {
  max-height: 2000px;         /* Maximale Höhe im geöffneten Zustand */
  opacity: 1;                 /* Sichtbar machen */
  padding: 0;                 /* Kein Innenabstand */
}

/* ========================================
   6. THEC Box Spezifische Styles
   ======================================== */
.akkordeon-mobile {
  padding: 0;                 /* Kein Innenabstand */
  margin: 0 auto;             /* Zentriert ausrichten */
}

.akkordeon-mobile .grotec-accord-mobile {
  margin: 0 auto;             /* Zentrierte Ausrichtung */
}

.akkordeon-mobile .grotec-accordion-content p {
  margin-bottom: 20px;        /* Abstand nach unten */
  padding: 0;                 /* Kein Innenabstand */
  font-size: 16px;            /* Leicht kleinere Schrift */
}

.akkordeon-mobile .grotec-accordion-content h3 {
  margin-top: 20px;           /* Abstand nach oben */
  margin-bottom: 15px;        /* Abstand nach unten */
  padding: 0;                 /* Kein Innenabstand */
  font-size: 18px;            /* Leicht kleinere Schrift */
}

.akkordeon-mobile .grotec-accordion-header {
  margin: 0;                  /* Kein Außenabstand */
  padding: 0;                 /* Kein Innenabstand */
}

.akkordeon-mobile .grotec-number,
.akkordeon-mobile .grotec-symbol {
  line-height: 1;             /* Einzeilige Darstellung */
}

/* ========================================
   7. Responsive Styles
   ======================================== */
/* Desktop (1024px und größer) */
@media (min-width: 1024px) {
  .grotec-accord-mobile {
    max-width: 960px;          /* Optimale Breite für Desktop */
  }
  .akkordeon-mobile {
    display: none !important;   /* Ausblenden auf Desktop */
  }
}

/* Tablet Landscape (800px bis 1023px) */
@media (min-width: 800px) and (max-width: 1023px) {
  .grotec-accord-mobile {
    max-width: 760px;          /* Tablet-Landscape optimierte Breite */
  }
  
  .grotec-number {
    font-size: 48px;           /* Leicht reduzierte Nummerngröße */
  }
  
  .grotec-symbol {
    font-size: 21px;           /* Angepasste Symbolgröße */
  }
}

/* Tablet Portrait (640px bis 799px) */
@media (min-width: 640px) and (max-width: 799px) {
  .grotec-accord-mobile {
    max-width: 600px;          /* Tablet-Portrait optimierte Breite */
  }
  
  .grotec-number {
    font-size: 48px;           /* Reduzierte Nummerngröße */
  }
  
  .grotec-symbol {
    font-size: 19px;           /* Kleinere Symbolgröße */
  }
  
  .grotec-accordion-content h3 {
    font-size: 15px;           /* Angepasste Überschriftgröße */
  }
}

/* Smartphone Large (390px bis 639px) */
@media (min-width: 390px) and (max-width: 639px) {
  .grotec-accord-mobile {
    max-width: 100%;           /* Volle Breite */
    padding: 0 15px;           /* Seitliche Abstände */
  }
  
  .grotec-number {
    font-size: 48px;           /* Smartphone-optimierte Nummerngröße */
  }
  
  .grotec-symbol {
    font-size: 18px;           /* Angepasste Symbolgröße */
  }
  
  .grotec-accordion-content h3 {
    font-size: 14px;           /* Kleinere Überschriftgröße */
    margin: 15px 0 10px;       /* Reduzierte Abstände */
  }
  
  .grotec-accordion-content p {
    font-size: 14px;           /* Angepasste Textgröße */
    margin-bottom: 15px;       /* Reduzierter Abstand */
  }
}

/* Smartphone Small (320px bis 389px) */
@media (max-width: 389px) {
  .grotec-accord-mobile {
    max-width: 100%;           /* Volle Breite */
    padding: 0 10px;           /* Minimale seitliche Abstände */
  }
  
  .grotec-number {
    font-size: 48px;           /* Minimale Nummerngröße */
  }
  
  .grotec-symbol {
    font-size: 16px;           /* Minimale Symbolgröße */
  }
  
  .grotec-accordion-content h3 {
    font-size: 14px;           /* Minimale Überschriftgröße */
    margin: 12px 0 8px;        /* Minimale Abstände */
  }
  
  .grotec-accordion-content p {
    font-size: 14px;           /* Minimale Textgröße */
    margin-bottom: 12px;       /* Minimaler Abstand */
    line-height: 1.4;          /* Reduzierte Zeilenhöhe */
  }
  
  .grotec-accordion-header {
    gap: 12px;                 /* Reduzierter Abstand zwischen Elementen */
  }
}

/* Basis Mobile Styles für alle Geräte unter 800px */
@media (max-width: 799px) {
  .grotec-accord-mobile,
  .akkordeon-mobile .grotec-accord-mobile {
    flex-direction: column;    /* Spaltenanordnung auf Mobilgeräten */
  }

  .grotec-accordion-content {
    width: 100%;              /* Volle Breite */
  }

  .grotec-accord-mobile input[type="radio"]:checked + .grotec-accordion-header + .grotec-accordion-content {
    padding: 15px 0;          /* Vertikaler Innenabstand */
  }
}

/* ========================================
   8. Konflikt-Vermeidung
   ======================================== */
.grotec-akkordeon-container *,
.akkordeon-mobile * {
  box-sizing: border-box;     /* Einheitliche Box-Berechnung */
}

.grotec-accordion-header,
.grotec-accordion-content {
  font-family: inherit;       /* Schriftart vom übergeordneten Element erben */
}