/* ==========================================================================
   components/tabs.css
   Zugaengliche Tabs. Zweitgenutzt: Produktdaten auf der Produktseite und die
   Zielgruppen auf /kontakt/. Herausgeloest aus pages/produkt.css am
   28.08.2026, als die Kontaktseite dazukam - im Stand war das seit Runde 4
   so vorgesehen ("Der Baustein ist allgemein gehalten").

   Das Skript ist js/tabs.js. Es baut die Tableiste aus den .ptabs__label
   Ueberschriften und schreibt die Hoehe des aktiven Panels als
   --ptabs-hoehe an die Buehne.

   OHNE JAVASCRIPT stehen alle Panels untereinander, jedes mit seiner <h3>.
   Erst .ptabs--an, gesetzt vom Skript, macht daraus Tabs. Alles, was den
   Tabzustand betrifft, haengt deshalb an dieser Klasse - ohne sie greift
   keine der Regeln und der Inhalt steht vollstaendig da.

   Die Akzentfarbe des aktiven Tabs kommt aus --sorte mit Blau als Rueckfall.
   Auf einer Produktseite setzt die Sektion dort die Sortenfarbe, auf der
   Kontaktseite bleibt es Blau - der Baustein muss dafuer nicht wissen, wo er
   steht.
   ========================================================================== */

.ptabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  /* Die Leiste sitzt auf einer Linie, die unter dem aktiven Tab aufreisst -
     dieselbe Idee wie der 3px-Sortenstreifen an den Produktkarten. */
  border-bottom: 1px solid var(--line);
}
.ptabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  /* 44px Trefferflaeche laut Projektregel. Die Polsterung allein ergibt bei
     15px Schrift rund 39px, deshalb der Mindestwert. */
  min-height: 2.75rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ptabs__tab:hover { color: var(--toem-blau); }
.ptabs__tab[aria-selected="true"] {
  color: var(--toem-blau);
  border-bottom-color: var(--sorte, var(--toem-blau));
}
/* Fokusring innen, nicht aussen: aussen wuerde er von der Leiste
   angeschnitten. */
.ptabs__tab:focus-visible { outline-offset: -3px; }

/* Buehnenhoehe. Die Buehne folgt der Hoehe des AKTIVEN Panels, nicht dem
   Maximum aller Panels. Gemessen: erstes Panel 199 px, Zutaten 128 px,
   Naehrwerte 614 px - der alte Deckel von 26rem (416 px) liess damit beim
   Laden 217 px Leere unter der kurzen Tabelle stehen.
   Der alte Deckel hatte einen Grund, der weggefallen ist: damals stand der
   Packshot in derselben Zeile und 26rem entsprachen der Flaschenhoehe, der
   kurze Tab schloss also mit ihr ab. Seit dem Umbau vom 27.08.2026 steht der
   Packshot im Produktkopf und die Tabs laufen ueber die ganze Breite.
   Der Uebergang macht den Wechsel weich, statt ihn springen zu lassen. Bei
   prefers-reduced-motion faellt er weg. */
.ptabs__buehne {
  min-height: var(--ptabs-hoehe, 0px);
  /* --dur-hover/--ease-hover: reine Ausklingkurve, schneller Beginn, langes
     Ausrollen, kein Nachschwingen - passt zu einer Hoehenaenderung. */
  transition: min-height var(--dur-hover) var(--ease-hover);
}
@media (prefers-reduced-motion: reduce) {
  .ptabs__buehne { transition: none; }
}

/* Panel. tabindex 0 macht es fokussierbar, der Ring darf dann aber nicht
   um den ganzen Block laufen - er sitzt eng am Rand. */
.ptabs--an .ptabs__panel:focus-visible { outline-offset: 4px; }
.ptabs--an .ptabs__panel[hidden] { display: none; }
/* Ohne Skript: Abstand zwischen den untereinanderstehenden Panels. */
.ptabs__panel + .ptabs__panel { margin-top: var(--sp-6); }
.ptabs--an .ptabs__panel + .ptabs__panel { margin-top: 0; }
.ptabs__label {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Akkordeon am Telefon --------------------------------------------------
   ZURUF VOM 21.09.2026. Die drei Reiter brauchen gemessen 157 + 226 + 108 px;
   bei 390 px Bildschirmbreite stehen 350 zur Verfuegung, also brachen sie in
   zwei bis drei Zeilen um. Unter 40rem werden daraus Klappabschnitte: die
   Ueberschrift, die ohne Skript ohnehin dasteht, wird zum Knopf.
   DAS SKRIPT SETZT .ptabs--akkordeon und wechselt dabei die ARIA-Rollen,
   siehe js/tabs.js. Ohne Skript greift nichts davon - dann stehen alle
   Flaechen offen untereinander, wie bisher.
   -------------------------------------------------------------------------- */

.ptabs--akkordeon .ptabs__list { display: none; }

/* Die Buehne fuehrt im Akkordeon keine Hoehe: der Inhalt fliesst, und eine
   gemessene Reiterhoehe wuerde ihn abschneiden. */
.ptabs--akkordeon .ptabs__buehne {
  min-height: 0;
  transition: none;
}

/* Die Ueberschrift traegt den Knopf und wird selbst zur Trennlinie. */
.ptabs--akkordeon .ptabs__label {
  margin: 0;
  border-top: 1px solid var(--line);
}
/* DIE ABSCHLUSSLINIE GEHOERT UNTER DEN LETZTEN ABSCHNITT, nicht unter seine
   Ueberschrift. Am 21.09.2026 stand sie an der Ueberschrift und trennte damit
   beim offenen letzten Abschnitt die Zeile von ihrem eigenen Inhalt - es sah
   aus, als waere der Text abgeschnitten. */
.ptabs--akkordeon .ptabs__panel:last-of-type { border-bottom: 1px solid var(--line); }

.ptabs__klapp {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  /* Platz rechts fuer das Zeichen, das ::after zeichnet. */
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
  /* 44px Trefferflaeche laut Projektregel, wie bei den Reitern. */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  text-align: left;
  font: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.ptabs__klapp:hover { color: var(--toem-blau); }
.ptabs__klapp[aria-expanded="true"] { color: var(--toem-blau); }

/* DAS ZEICHEN IST EIN WINKEL, kein Plus: ein Plus verspricht Hinzufuegen,
   ein Winkel zeigt Richtung. Er dreht sich beim Oeffnen. */
.ptabs__klapp::after {
  content: "";
  position: absolute;
  right: var(--sp-2);
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.2rem;
  transition: rotate var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.ptabs__klapp[aria-expanded="true"]::after {
  rotate: -135deg;
  translate: 0 0.15rem;
}
@media (prefers-reduced-motion: reduce) {
  .ptabs__klapp::after { transition: none; }
}

/* Der offene Abschnitt braucht Luft zum naechsten Knopf. */
.ptabs--akkordeon .ptabs__panel > *:last-child { margin-bottom: var(--sp-6); }

/* ZU HEISST: alles ausser der Ueberschrift verschwindet. Die Flaeche selbst
   bleibt stehen, denn der Klappknopf steckt in ihrer Ueberschrift - mit
   [hidden] auf der Flaeche verschwaende er mit. */
.ptabs__panel--zu > *:not(.ptabs__label) { display: none; }
.ptabs--akkordeon .ptabs__panel--zu > *:last-child { margin-bottom: 0; }