/* =========================================================================
   Benker Packaging — Global Base Styles
   Reihenfolge: tokens.css muss VOR dieser Datei geladen werden.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Self-hosted Fonts (keine Google-Fonts-CDN — Rechtssicherheit)
   Originale Figma-Schriften, beide SIL Open Font License (OFL). Lizenztexte
   liegen als OFL.txt neben den Dateien in public/fonts/.
   Elms Sans:        https://fonts.google.com/specimen/Elms+Sans        (OFL)
   Google Sans Flex: https://fonts.google.com/specimen/Google+Sans+Flex (OFL)
   Google Sans Flex wurde auf Latin + Latin-Ext subsettet und auf die
   wght-Achse reduziert (nicht genutzte Achsen gepinnt) -> ~56 KB statt ~2 MB.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Elms Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/ElmsSans-VariableFont.woff2") format("woff2");
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/GoogleSansFlex-VariableFont.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   Reset (schlank)
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   [hidden] muss verstecken — auch gegen ein display aus einer Klasse.

   Die UA-Regel der Browser lautet schlicht `[hidden] { display: none }`, ohne
   !important. Jede Klasse mit display:flex, :grid oder :block schlägt sie also.
   Setzt ein Skript dann el.hidden = true, passiert sichtbar nichts.

   Genau das ist im Teile-Index passiert (10.09.2026): search.js blendete die
   Buchstabenkarten korrekt aus, aber `.ticard {display:flex}` gewann — die
   Karten blieben mit „0 TEILE" stehen. Vorher war derselbe Fehler schon ein
   Dutzend Mal einzeln geflickt worden (`.upload__file[hidden]`,
   `.finder__popup[hidden]`, `.faq__a[hidden]` …), einmal pro Fundstelle.

   Diese eine Regel erledigt das für alle — auch für Bausteine, die es noch
   nicht gibt. Die bestehenden Einzelregeln sind damit überflüssig, stören aber
   nicht; sie können beim nächsten Aufräumen raus.

   WICHTIG für Überblendungen: Wer ein Element weich ausblenden will, darf
   [hidden] erst NACH der Blende setzen — siehe .utl__panels[data-tab-animate]
   in components.css. Das war dort schon richtig gelöst.
   --------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Sichtbarer Fokus (Barrierefreiheit, WCAG 2.1 AA) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip-Link fuer Tastaturnutzer */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-800);
  color: var(--color-neutral-100);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------------
   Layout-Helfer

   EINE INHALTSBREITE FUER DIE GANZE WEBSITE (vereinheitlicht 23.07.2026)

   Massgeblich ist die weisse Hero-Karte: --content-max = 1392px Inhalt, dazu
   ein Seiten-Inset von 12px mobil / 24px ab 1024px. Daran flucht alles.

   .container war frueher auf --container-max = 1280px begrenzt, und das Inset
   lag INNERHALB dieser 1280px. Der Inhalt war dadurch nicht nur 112px schmaler
   als die Hero-Karte, sondern noch einmal um das Padding. An Kanten sah man das
   sofort, sobald zwei Abschnitte untereinander standen.

   .container rechnet jetzt genau wie .content-band. Beide Klassen bleiben
   bestehen, damit bestehendes Markup unveraendert funktioniert; sie sind aber
   deckungsgleich. Neuer Code sollte .content-band verwenden.
   ------------------------------------------------------------------------- */
.container,
.content-band {
  --content-inline: var(--space-3); /* 12px mobil */
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--content-inline));
  margin-inline: auto;
  padding-inline: var(--content-inline);
}

@media (min-width: 1024px) {
  .container,
  .content-band {
    --content-inline: var(--space-5); /* 24px ab 1024px (Figma px-24) */
  }
}

/* Nur visuell versteckt, fuer Screenreader lesbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Typografie-Klassen (bilden die Figma-Textstile ab)
   ------------------------------------------------------------------------- */
.heading-xl {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-xl);
  line-height: var(--lh-heading-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.heading-l {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-l);
  line-height: var(--lh-heading-l);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}
.heading-m {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-m);
  line-height: var(--lh-heading-m);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}
.heading-s {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-s);
  line-height: var(--lh-heading-s);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.heading-xs {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}
.body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}
.body-s {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-medium);
}
.body-s--caps {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Home-Hero-Bande
   Vollbreiter blauer Verlauf (Rand zu Rand, beginnt ganz oben) als Hintergrund
   hinter Navigation UND Hero-Bild. Die weisse Karte ist in ZWEI Haelften
   geteilt: obere Haelfte im <header> (.homehero-top), untere im Hero
   (.homehero-bottom). Beide sind vollbreit, gleich eingerueckt und stossen
   nahtlos zu EINER Karte zusammen. So bleibt <header> Banner-Landmark und der
   Hero-Inhalt (H1) liegt in <main> — bei visuell unveraendertem Ergebnis.
   Masse aus Figma (benker07102026, Node 231:6668).
   ------------------------------------------------------------------------- */
.homehero-top,
.homehero-bottom {
  background-image: var(--gradient-blue); /* #002756 -> #005ba8, vollbreit */
  --homehero-inline: var(--space-3); /* mobil 12px */
  --homehero-card-max: var(--content-max); /* = 1392px, zentrale Quelle (tokens.css) */
}
.homehero-top {
  padding: var(--space-3) var(--homehero-inline) 0; /* oben 12, unten 0 (Naht) */
}
.homehero-bottom {
  padding: 0 var(--homehero-inline) var(--space-4); /* oben 0 (Naht), unten 16 */
  border-radius: 0 0 var(--radius-md) var(--radius-md); /* blaue Ecken unten 12px */
}
.homehero-top__card,
.homehero-bottom__card {
  background-color: var(--color-neutral-100);
  max-width: var(--homehero-card-max);
  margin-inline: auto;
}
.homehero-top__card {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Karte oben 20px */
  padding-top: var(--space-3); /* mobil 12px */
}
.homehero-bottom__card {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Karte unten 20px */
  padding-bottom: 0; /* mobil: Bild buendig bis zur Kartenunterkante (kein weisser Spalt) */
}
@media (min-width: 1024px) {
  .homehero-top {
    padding-top: var(--space-5); /* 24px (Figma pt-24) */
    padding-inline: var(--space-5); /* 24px (Figma px-24) */
  }
  .homehero-bottom {
    padding-inline: var(--space-5); /* 24px */
    padding-bottom: 40px; /* Figma pb-40 */
  }
  .homehero-top__card {
    /* Bewusste Abweichung von Figma (56px): weisser Rand RUNDUM 20px. Oben 20
       (heroContent pt-20), unten 20 (Luft Nav->Bild), links/rechts 20. Nav ohne
       eigenes Padding (siehe Header .header__inner). */
    padding-top: 20px;
    padding-bottom: 20px;
    padding-inline: 20px;
  }
  .homehero-bottom__card {
    /* Bild-Rand rundum 20px: unten 20 (statt 36) + links/rechts 20. */
    padding-bottom: 20px;
    padding-inline: 20px;
  }
  /* Nav + Hero-Bild fuellen die Karte (nicht auf --container-max=1280 begrenzt),
     damit der weisse Rand exakt = Karten-Padding (20px) ist und Nav/Bild buendig
     zueinander stehen. Bild wird dadurch groesser (1392 - 40 = 1352). */
  .homehero-top__card .header__inner,
  .homehero-bottom__card .hero__inner,
  .homehero-bottom__card .uhero__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Oeffnungszeiten
   -------------------------------------------------------------------------
   Zweispaltig, damit die Uhrzeiten von "Mo. – Do." und "Fr." untereinander
   fluchten (Benker-Korrektur KW 32). Die Spaltenbreite richtet sich nach der
   laengsten Tagesangabe, deshalb max-content statt fester Breite.
   Markup: inc/oeffnungszeiten.php */
.zeiten {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 0.6em;
  row-gap: 0.15em;
}
.zeiten__zeit {
  /* Ziffern gleich breit, damit auch 08:00 und 14:00 exakt uebereinanderstehen. */
  font-variant-numeric: tabular-nums;
}
.zeiten__voll {
  grid-column: 1 / -1;
}

/* Hero-Band auf breiten Bildschirmen
   -------------------------------------------------------------------------
   Benker (Korrekturen KW 32): "Oberste Seite, wieso rechts und links so viel
   blau?"

   Ursache ist keine Fehlfunktion: Das Layout ist auf 1392px Inhalt begrenzt,
   alles darueber ist Hintergrund. Unter dem Hero faellt derselbe Rand nicht
   auf, weil er weiss ist — im Hero-Band ist er dunkelblau und dadurch sehr
   praesent. Pro Seite waren das bei 1920px Fenster 264px, bei 2560px 584px.

   Entscheidung (Atilla, 10.08.2026): nur die Hero-Karte mitwachsen lassen, die
   Inhalte darunter bleiben bei 1392px.

   Bewusst als clamp und nicht als Sprung ab einer Breite: Beim Verkleinern des
   Fensters waechst die Karte stufenlos mit, statt an einer Stelle zu springen.
   Bei 1440px bleibt alles wie bisher, ab etwa 2016px ist bei 1680px Schluss.

   Die Obergrenze 1680 ist an das Bildmaterial gekoppelt: Benkers Standortfoto
   hat 1920px Breite. Bei 1680px Karte wird das Bild 1640px breit dargestellt —
   also noch ohne Hochskalieren. Wer hier weiter aufmacht, kauft die schmalere
   blaue Flaeche mit einem unscharfen Bild auf dem ersten Bildschirm.

   ENTSCHIEDEN (Atilla, 10.08.2026): NUR die Hero-Karte waechst mit. Die
   Inhaltsbreite darunter bleibt bei 1392px.

   Zwischenschritt, wieder zurueckgenommen: kurzzeitig wuchs die gesamte
   Inhaltsbreite mit (--content-max als clamp). Das haette Hero und Abschnitte
   auf einer Kante gehalten, wurde aber verworfen — die Inhaltsbreite soll fest
   bleiben. Falls die Frage wiederkommt: Das war die Variante, die beide
   Wuensche gleichzeitig erfuellt.

   Bewusst als clamp und nicht als Sprung ab einer Breite: Beim Verkleinern des
   Fensters waechst die Karte stufenlos mit, statt an einer Stelle zu springen.
   Bis 1440px bleibt alles wie bisher, ab etwa 2016px ist bei 1680px Schluss.

   Die Obergrenze 1680 ist an das Bildmaterial gekoppelt: Benkers Standortfoto
   hat 1920px Breite. Bei 1680px Karte wird das Bild 1640px breit dargestellt —
   also noch ohne Hochskalieren. Wer hier weiter aufmacht, kauft die schmalere
   blaue Flaeche mit einem unscharfen Bild auf dem ersten Bildschirm.

   BEKANNTE NEBENWIRKUNG: Der Hero beginnt dadurch weiter aussen als die
   Abschnitte darunter (bei 2122px Fenster 221px gegenueber 365px). Das ist
   bekannt und akzeptiert.

   NUR DIE STARTSEITE (10.08.2026, nach Sichtung der Unterseiten):
   Benkers Anmerkung galt der "obersten Seite". Die Unterseiten-Heros sind in
   Figma zweispaltig austariert — links Text, rechts Bild in fester Relation.
   Beim Mitverbreitern wuchs dort NUR die Textspalte (Produktseiten von 657 auf
   866px), das Bild kaum. Folge: eine sehr lange Headline-Zeile und unter dem
   Text ein Loch von 213px gegenueber der Bildkante.

   Deshalb greift die Verbreiterung ausschliesslich auf der Startseite. Die
   Unterseiten behalten ihr abgestimmtes Mass. Der Preis: Die weisse Karte ist
   auf der Startseite breiter als auf den Unterseiten. Das ist die guenstigere
   Abweichung — ein eigener Auftritt der Startseite ist ueblich, ein
   auseinandergezogener Produkt-Hero waere ein Fehler.

   ENDSTAND (Vorgabe Atilla, 10.08.2026): Die Verbreiterung gilt NUR auf der
   Startseite.

   Der Versuch, sie auf alle Seiten auszudehnen, ist an den zweispaltigen
   Unterseiten-Heros gescheitert. Dort ist die Bildspalte gedeckelt, die
   zusaetzliche Breite ging also in die Textspalte (Produktseiten 657 -> 866px):
   eine Headline-Zeile von rund 90 Zeichen und darunter ein Loch von 213px.

   Beide Gegenmassnahmen wurden geprueft und verworfen:
     - Bild fuellt die Spalte, Hoehe gedeckelt -> Seitenverhaeltnis kippt von
       1,14 auf 1,92, das Motiv wird sichtbar breitgezogen.
     - Bild behaelt sein Verhaeltnis und wird kleiner -> zwischen Text und Bild
       entsteht eine Leerflaeche von 392px.

   Die zusaetzliche Breite hat in diesem Layout schlicht keinen guten Platz.
   Deshalb behalten die Unterseiten ihr abgestimmtes Mass; die weisse Karte ist
   auf der Startseite breiter als auf den Unterseiten. Ein eigener Auftritt der
   Startseite ist ueblich, ein auseinandergezogener Produkt-Hero waere ein
   Fehler. */
.home .homehero-top,
.home .homehero-bottom {
  --homehero-card-max: clamp(1392px, calc(1392px + (100vw - 1440px) * 0.5), 1680px);
}

/* Scroll-Animation (minimal)
   -------------------------------------------------------------------------
   Bewusst begrenzt: 44px Weg, 700ms. Die Zielgruppe sind B2B-Entscheider,
   die schnell an Information und Kontakt wollen — eine Animation, auf die man
   wartet, laesst die Seite langsamer wirken. Greift nur, wenn JavaScript die
   Klasse .hat-reveal gesetzt hat.

   Drei Zustaende, gesteuert von assets/js/reveal.js:
     .ist-versteckt                 scharf gestellt, wartet auf den Eintritt
     .ist-versteckt.ist-sichtbar    blendet gerade ein
     (keine Klasse)                 Ruhezustand — wichtig, weil ein dauerhaftes
                                    transform die sticky-Spalten in FAQ und
                                    Kontakt stoeren wuerde
   Bloecke werden wieder scharf gestellt, sobald sie das Fenster verlassen —
   die Animation laeuft dadurch in beide Scrollrichtungen. */
.hat-reveal .ist-versteckt {
  opacity: 0;
  /* --reveal-weg setzt reveal.js je nach Scrollrichtung: 44px, wenn der Block
     von unten hereinkommt, -28px beim Hochscrollen von oben. Ohne Angabe der
     Normalfall. */
  transform: translateY(var(--reveal-weg, 44px));
}
.hat-reveal .ist-versteckt.ist-sichtbar {
  opacity: 1;
  transform: none;
  /* Weg und Dauer wurden am 10.08.2026 mehrfach angehoben: 6px/320ms, dann
     18px/480ms, dann 28px/560ms — alles zu unauffaellig. Jetzt 44px/700ms.
     Entscheidend war aber nicht die Groesse, sondern der Ausloesepunkt: Die
     Animation lief vorher ganz unten am Bildrand ab (siehe reveal.js).
     Die Deckkraft liegt bewusst vor der Bewegung: Der Text ist nach 450ms voll
     lesbar, waehrend der Abschnitt noch 250ms weiter ausschwingt. So bleibt die
     Bewegung deutlich sichtbar, ohne dass man auf die Information wartet. */
  transition:
    opacity 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hat-reveal .ist-versteckt,
  .hat-reveal .ist-versteckt.ist-sichtbar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}