/* Base layout — E0.6. Mobile-first, breakpoints 360 / 768 / 1200. */

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

/*
  Das hidden-Attribut muss jede Komponentenregel schlagen. Die Browser-Vorgabe ist nur
  [hidden] { display: none }, und die verliert gegen jede Klassenregel mit eigenem display — .btn setzt
  display: inline-flex, also blieb ein per JavaScript auf hidden gesetzter Knopf sichtbar. Genau so ist
  der "Aktualisieren"-Knopf im Warenkorb (Paritaet 25) im Browser aufgetaucht, obwohl das Element
  korrekt hidden war und beide Testsuiten gruen meldeten - Markup-Tests sehen kein CSS.
  Betrifft ebenso den "Kopieren"-Knopf der Vorueberweisung, der dasselbe hidden-Idiom nutzt.
*/
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Reserves the scrollbar's width from the first paint. The HTML arrives in chunks, so the page is short
     at first and the scrollbar appeared only later: everything got 15px narrower, the hero list rewrapped
     and the home page measured CLS 0.13 (go-live check 03.11.2026). Overlay scrollbars (phones) are
     unaffected. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  background-color: var(--color-surface);
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  line-height: var(--line-height-tight);
  font-weight: var(--heading-weight);
}

/* Design-Review 13.10.2026: Überschriften je 5px über ihrem Token, damit sie sich klar vom Lauftext abheben. */
h1 {
  font-size: calc(var(--font-size-3xl) + 5px);
}

h2 {
  font-size: var(--heading-size-section);
}

/* Design review 14.10.2026 (third round): a bare h3 is a tile/sub-heading — the tile size, not a fourth
   heading size of its own. */
h3 {
  font-size: var(--heading-size-tile);
}

h4 {
  font-size: calc(var(--font-size-base) + 5px);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

/*
  --- Schreibweise: durchgehende Kleinschreibung (CI) -----------------------
  Das Corporate Design von bartl-bringts.at schreibt Kleinschreibung vor: Navigation, Überschriften,
  Buttons, Fußzeile und sogar Produkt- und Kundennamen stehen im Altsystem klein
  (docs/nachweise/altsystem/startseite-anonym-desktop-1440.png und …-eingeloggt-desktop-1440.png, dort
  „hallo thomas ederer"). Umgesetzt wird das wie dort als reine Darstellungsregel und nicht durch
  kleingeschriebene Quelltexte: nur so erfasst die Regel auch die Texte, die gar nicht in den Views
  stehen — UmbNav-Beschriftungen, Rich-Text aus dem Backoffice und die Produktnamen aus dem ERP —, und
  nur so bleiben Seitentitel, alt-Texte, E-Mail-Vorlagen und die Vorlesefassung der Screenreader in
  korrektem Deutsch.

  Träger ist .page (der Layout-Wrapper in Views/Shared/_Layout.cshtml), nicht body: damit endet die
  Regel garantiert an unserem eigenen Seitengerüst und kann das Umbraco-Backoffice unter /umbraco —
  das diese Stylesheets ohnehin nicht lädt — auch dann nicht erreichen, wenn es sie je einbinden
  sollte. Fremde Dokumente erben CSS grundsätzlich nicht (Stripe läuft als Weiterleitung auf Stripe
  Checkout, die Karte im mapBlock als <iframe>), die sind davon also unberührt.

  Die Schutzliste darunter ist der andere Teil der Regel: text-transform ändert nie den übertragenen
  Wert, aber ein falsch dargestellter IBAN, Gutscheincode oder Bezeichner wird abgetippt und kopiert.
  Alles, was Daten statt Sprache ist, wird deshalb ausdrücklich ausgenommen. Dokumentiert in
  wwwroot/assets/brand/brand-notes.md, Abschnitt „Schreibweise".

  Zweite Ausnahme — Auftraggeber-Entscheidung vom 14.09.2026: „Nicht aus dem Content stammende Akronyme
  mit Großbuchstaben, wenn nötig." Der Satz hat zwei Hälften, und beide grenzen ein. Die Herkunft
  entscheidet, ob ein Akronym überhaupt in Frage kommt: erreichbar sind nur fest kodierte Texte (Views,
  Partials, C#-Konstanten). Redaktionelle Inhalte — UmbNav, Rich-Text, Blocks, Produktnamen aus dem ERP —
  laufen weiter durch die Kleinschreibung; an sie kommt ein Stylesheet gar nicht gezielt heran, und die
  Redaktion kann dort selbst groß schreiben. Und „wenn nötig" ist keine Floskel: geschützt wird nur, wo
  die Kleinschreibung falsch oder schwer lesbar wäre (USt., MwSt., IBAN, BIC), nicht bei gut lesbaren
  Initialwörtern wie sms, plz oder agb — die schreibt das Altsystem selbst klein („erinnerung per sms",
  docs/nachweise/altsystem/startseite-eingeloggt-desktop-1440.png).

  Träger ist .text-acronym, bewusst eine eigene Klasse neben .text-verbatim: die Deklaration ist
  dieselbe, der Grund nicht — Rechtschreibung hier, Datentreue dort. Fällt die CI-Regel je, sieht man an
  der Klasse, was warum ausgenommen war.
*/
.page {
  text-transform: lowercase;
}

/*
  Eingabefelder: text-transform ändert dort NUR die Anzeige, nicht den Wert — bei Passwort, E-Mail und
  Gutscheincode sähe der Kunde also etwas anderes, als er abschickt. Auch das Altsystem nimmt seine
  Felder aus; dort ist der Platzhalter „Gutscheincode" der einzige groß geschriebene Text der
  Startseite. Codebeispiele und technische Bezeichner (der Styleguide besteht halb daraus) verlieren
  durch Kleinschreibung ihre Bedeutung. .text-verbatim ist der Haken für alles Übrige — Kontodaten,
  Verwendungszweck, Bestell- und Kundennummern, E-Mail-Adressen; [data-copy-value] schützt zusätzlich
  jeden Wert, den der „Kopieren"-Knopf anfasst, auch wenn die Klasse einmal vergessen wird.
  .text-acronym ist der zweite Haken, für Sprache statt Daten: fest kodierte Abkürzungen, die
  kleingeschrieben falsch wären (USt., MwSt., IBAN, BIC). Gleiche Deklaration, anderer Grund — siehe
  den Regelkommentar oben.
*/
input,
textarea,
select,
optgroup,
option,
code,
kbd,
samp,
pre,
.text-verbatim,
.text-acronym,
[data-copy-value] {
  text-transform: none;
}

/*
  Buttons brauchen die Regel ausdruecklich. text-transform wird zwar vererbt, aber das
  UA-Stylesheet jedes Browsers setzt auf Formularelementen — Buttons eingeschlossen —
  `text-transform: none`, und eine Deklaration schlaegt Vererbung. Die .page-Regel oben erreicht
  sie deshalb nie: <a class="btn"> stand klein da, ein <button> direkt daneben behielt seine
  Grossbuchstaben („Einloesen", „Speichern", „Abmelden" gegen „adresse aendern"). Im Browser
  gefunden am 14.09.2026; die Testsuite kann das nicht sehen, sie kennt kein CSS.

  Beschriftungen von Buttons sind unser eigener Text, kein Wert, den der Kunde eintippt — sie
  folgen dem CI wie jede andere Beschriftung. Deshalb sind hier auch die Button-artigen <input>
  wieder eingeschlossen, die der Ausnahmeblock darueber pauschal ueber `input` mitgenommen hat;
  fuer Text-, Passwort- und E-Mail-Felder bleibt die Ausnahme richtig.
*/
.page button,
.page input[type="submit"],
.page input[type="button"],
.page input[type="reset"] {
  text-transform: lowercase;
}

/*
  Auswahllisten ebenso (Design-Review 14.10.2026, dritte Runde): ihre Optionen sind ausschließlich
  unser eigener Text — die Liefertage im Warenkorb —, nie ein vom Kunden getippter Wert. Ohne diese Regel
  stand „Do., 15.10.2026" im Feld direkt unter der Gruppenüberschrift „do., 15.10.2026".
*/
.page select,
.page option {
  text-transform: lowercase;
}

/*
  Dotted <hr> — design-altsystem-parität (11.08.2026): the old live system's
  `hr { border-style: dotted; border-color: #000; border-width: 1px; }`, reproduced via the border
  tokens in tokens.css. Used on the account page and the Vorüberweisung page to separate stacked
  blocks instead of wrapping them in cards (docs/tickets/design-altsystem-paritaet.md).
*/
hr {
  margin: var(--space-5) 0;
  border: 0;
  border-top: var(--border-width) var(--border-style-motif) var(--color-ink);
}

/* Wide content scrolls inside its own box — the page itself never scrolls sideways (A2/AK4). */
pre,
table {
  max-width: 100%;
  overflow-x: auto;
}

code {
  font-size: 0.9em;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-brand);
  color: var(--color-ink);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Page frame ---------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1 0 auto;
}

/* tabindex="-1" lets the skip link move focus into <main>; the region itself needs no focus ring. */
.page__main:focus {
  outline: none;
}

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.section {
  padding-block: var(--space-7);
}

.section--muted {
  background-color: var(--color-surface-muted);
}

/*
  Der senkrechte Grundrhythmus der Seite. 1,5rem statt der urspruenglichen 1rem: bei gerahmten
  Bausteinen (Karten, Liefertag-Gruppen, Hinweise) misst das Auge den Abstand von Rahmen zu Rahmen,
  nicht von Text zu Text — 1rem las sich dort als "klebt aneinander" (Befund 13.08.2026 an den
  Kassenseiten).
*/
.stack > * + * {
  margin-top: var(--space-5);
}

/*
  Groesserer Rhythmus fuer Seiten, die mehrere eigenstaendige Bloecke untereinander stellen statt
  eines zusammenhaengenden Textflusses — z. B. die Kassenschritte mit Uebersicht, Adresse und Guthaben.
*/
.stack--lg > * + * {
  margin-top: var(--space-6);
}

/*
  data-cart-content ist ein Anker fuer site.js (es tauscht seinen Inhalt nach jeder Warenkorb-Mutation
  aus), kein Layout-Baustein. Vergisst eine View die Layoutklasse darauf, kleben saemtliche Bloecke
  darin aneinander — genau so passiert (13.08.2026, alle drei Kassenschritte). Diese Regel ist deshalb
  ein reines Sicherheitsnetz und greift per :not([class]) ausdruecklich NUR dann, wenn die View gar
  keine Klasse gesetzt hat; sonst wuerde sie mit .stack--lg um dieselbe Spezifitaet streiten und je
  nach Reihenfolge im Stylesheet gewinnen.
*/
[data-cart-content]:not([class]) > * + * {
  margin-top: var(--space-5);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

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

  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Header -------------------------------------------------------------- */
/*
  Design-Review 13.10.2026: der Header klebt nicht dauerhaft. Er bleibt sticky, site.js blendet ihn beim
  Runterscrollen aus (is-hidden) und beim Hochscrollen wieder ein. Das Verschieben rechnet das überstehende
  Logo (--header-overhang) mit ein, sonst bliebe dessen unterer Teil am oberen Rand stehen.
*/
.site-header {
  --header-overhang: 0px;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-surface);
  transition: transform 200ms ease;
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - var(--header-overhang)));
}

/* Offenes Burger-Menü nie wegschieben. */
.site-header:has(.site-nav.is-open) {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding-block: var(--space-2);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo img {
  display: block;
  height: 72px;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/*
  Burger (Design-Review 30.10.2026, E0.6/A9): nur noch das Symbol, ohne Rahmen und ohne sichtbares Wort
  „menü" — es bleibt als zugänglicher Name (.visually-hidden im Markup). Symbole „menu" und „x" aus Lucide,
  gleiche Strichmachart wie Warenkorb und Abmelden; geöffnet zeigt der Knopf das „x" (aria-expanded, das
  site.js pflegt). Ab 768px gibt es den Burger nicht (siehe unten).
*/
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-toggle__icon--close,
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
  display: block;
}

/*
  Mobile Kopfzeile (Design-Review 30.10.2026, E0.6/A9, Mockup „Mein Konto mobil") — nur unter dem
  Desktop-Bruchpunkt 768px; darüber gilt unverändert das Raster weiter unten.
  - Eine Zeile, die nie umbricht: ein Raster aus Logo (darf schrumpfen) und Aktionsgruppe (rechtsbündig,
    bricht nie um). Das aufgeklappte Menü liegt als eigene, volle Zeile darunter.
  - Rechts als eine Gruppe: Guthaben nur als Betrag (components.css, „Mobile Kopfzeile"), Warenkorb,
    Burger; anonym Anmelden und Burger.
  - Abmelden und Registrieren stehen hier nicht — beide sind Einträge im Burger-Menü
    (.site-nav__item--compact, nur mobil).
  Platzrechnung bei 360px: 328px Inhalt = Logo 89 + Abstand 12 + Guthaben bis „1.234,56 €" ≈ 110 +
  Warenkorb 44 + Burger 44 + 2 × 4 Abstand = 307 — passt; das Logo schrumpft notfalls weiter.
*/
@media (max-width: 767.98px) {
  .site-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo actions"
      "nav nav";
    align-items: center;
    column-gap: var(--space-3);
    row-gap: 0;
  }

  .site-header__logo {
    grid-area: logo;
    justify-self: start;
    min-width: 0;
  }

  .site-header__logo img {
    width: 89px;
    max-width: 100%;
    height: auto;
  }

  .site-header__actions {
    grid-area: actions;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--space-1);
  }

  .site-nav {
    grid-area: nav;
  }

  /* Wandern ins Burger-Menü (siehe _Header.cshtml). Zwei Klassen, weil die Grundregeln später im Text
     stehen (.site-header__logout unten in dieser Datei, .site-header__account in components.css). */
  .site-header__actions .site-header__logout,
  .site-header__actions .site-header__account--register {
    display: none;
  }
}

/* Die nur-mobilen Menüeinträge (Abmelden, Registrieren) gibt es in der Desktop-Navigation nicht — dort
   stehen beide unverändert in der Aktionszeile. Zwei Klassen gegen .site-nav__item { display: flex } in
   components.css. */
@media (min-width: 768px) {
  .site-nav .site-nav__item--compact {
    display: none;
  }
}

/*
  Design-Review 13.10.2026: die Navigation steht in der Leiste zwischen Logo und Aktionen. Schmal bricht
  sie als eigene, volle Zeile unter die Leiste (order + flex-basis) und bleibt hinter dem Burger.
*/
.site-nav {
  display: none;
  order: 3;
  flex-basis: 100%;
  padding-bottom: var(--space-3);
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/*
  Hover und aktive Seite nur fett (Design-Review 13.10.2026) — kein Hintergrund, keine Unterstreichung.
  Design-Review 21.10.2026: die Abstände zwischen den Punkten müssen einheitlich sein. Die frühere
  unsichtbare, fette ::after-Breitenreserve hängte jedem Link rechts so viel Leerraum an, wie sein Wort
  fett breiter ist (gemessen 37/26/16/24px statt eines festen Abstands; die aktive Seite hatte gar keine
  Reserve). Jetzt wird jeder Link mit der Breite angeordnet, in der er gerade dasteht — normal bzw. die
  aktive Seite echt fett —, der Abstand ist also überall genau das Innenpolster. Den Hover zeichnet ab
  768px ein fettes Duplikat (::after), mittig über dem Wort und absolut positioniert: es ragt beidseitig
  ein paar Pixel ins Polster, verschiebt aber keinen Nachbarn. (Ein text-shadow-„Fett" hielt die Breite
  auch, sah aber sichtbar anders aus als echtes Fett — verworfen 21.10.2026.)
*/
.site-nav__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  font-weight: var(--font-weight-bold);
}

/*
  „Abmelden" muss ein POST sein (Anti-Forgery), sieht in der Navigation aber wie die übrigen
  Einträge aus. Das Formular selbst darf dabei keinen eigenen Platz beanspruchen.
*/
.site-nav__form {
  margin: 0;
  display: contents;
}

.site-nav__link--button {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--font-weight-regular);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  /* Rechtsbündig: die Navigation nimmt den Raum zwischen Logo und Aktionen und schiebt nach rechts. */
  .site-nav {
    display: block;
    order: 0;
    flex: 1 1 auto;
    padding-bottom: 0;
  }

  /* Der negative Rand gleicht das Innenpolster des letzten Links aus, damit seine Textkante bündig steht. */
  .site-nav__list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0;
    margin-right: calc(-1 * var(--space-3));
  }

  /*
    Design-Review 13.10.2026, Maße aus dem Altsystem (bartl.ols.Web/Content/scss/_header.scss):
    weiße Leiste 110px hoch, ohne Linie darunter. Rechts neben dem Logo zwei rechtsbündige Zeilen — oben
    die Konto-Zeile (Anmelden/Registrieren bzw. Guthaben, Warenkorb, Abmelden), unten die Navigation.
  */
  .site-header__bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo actions"
      "logo nav";
    align-content: space-between;
    column-gap: var(--space-5);
    min-height: 110px;
    padding-block: var(--space-4) var(--space-2);
  }

  .site-header__actions {
    grid-area: actions;
    justify-content: flex-end;
  }

  /*
    The logo's slot is 135px wide, but the large logo before scrolling is 289px (182px high, 289 × 182 file).
    Without this padding the right-aligned navigation ran underneath it once it was wider than the space
    beside the logo — below about 870px "so funktioniert's" was hidden (go-live check 03.11.2026). Now the
    navigation wraps onto a second row instead. The entries are editorial (UmbNav) and differ when signed
    in, so a fixed breakpoint would not hold.
  */
  .site-nav {
    grid-area: nav;
    min-width: 0;
    padding-left: calc(289px - 135px - var(--space-5));
  }

  /*
    Altsystem: 16px (lg), 20px (xl), Light 300; Hover fett. Die aktive Seite war im Altsystem 600 — der
    Auftraggeber will sie gleich fett wie den Hover (Design-Review 15.10.2026), also gilt die gemeinsame
    Regel .site-nav__link:hover, [aria-current="page"] oben (bold) auch hier.
    Abstand zwischen zwei Punkten = 2 × Innenpolster = 24px, für jeden Punkt gleich (21.10.2026).
  */
  .site-nav__link {
    position: relative;
    padding-inline: var(--space-3);
    font-size: 1rem;
    font-weight: 300;
  }

  /* Hover ohne Breitenänderung (siehe oben): das Wort selbst wird transparent und behält seine normale
     Breite, das fette Duplikat liegt mittig darüber. Für Screenreader leer ("/ ''"), es ist nur Optik. */
  .site-nav__link[data-label]:not([aria-current="page"]):hover {
    font-weight: 300;
    color: transparent;
  }

  .site-nav__link[data-label]:not([aria-current="page"])::after {
    content: attr(data-label);
    content: attr(data-label) / "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    visibility: hidden;
    pointer-events: none;
  }

  .site-nav__link[data-label]:not([aria-current="page"]):hover::after {
    visibility: visible;
  }

  /*
    Logo wie im Altsystem: oben in voller Größe (182px), überlappend ins Headerbild; nach dem ersten Scrollen (is-scrolled, site.js) 85px hoch in der Leiste.
    Der Logo-Platz in der Leiste ist fix 135 × 85px (das kleine Logo); das Bild liegt absolut darin und
    wechselt nur per transform — die Leiste behält ihre Höhe, nichts springt.
    Große Lage (nach Review nachjustiert): das Logo beginnt in der Leiste und ragt zur Hälfte ins Bild.

    Design-Review 15.10.2026: Maßstab ist, wie weit das große Logo ins Headerbild ragt — nicht sein Abstand
    zum Seitenrand, denn unsere Leiste ist mit zwei Zeilen (Konto + Navigation) 127px hoch statt 110px.
    Altsystem bei 1440 × 900: Leiste endet bei 110px, Logo 24–206px → 96px im Bild. Hier: Logo-Platz
    mittig in der Leiste (Oberkante 25px), große Lage 16px tiefer → 41–223px, ebenfalls 96px im Bild.
    Die kleine Lage nach dem Scrollen (25px, mittig) passte bereits und bleibt unverändert.
  */
  .site-header__logo {
    grid-area: logo;
    position: relative;
    z-index: 2;
    align-self: center;
    width: 135px;
    height: 85px;
  }

  .site-header__logo img {
    position: absolute;
    top: 0;
    left: 0;
    height: 182px;
    max-width: none;
    transform-origin: left top;
    transform: translateY(16px);
    transition: transform 300ms ease;
  }

  .site-header.is-scrolled .site-header__logo img {
    transform: scale(0.467);
  }
}

@media (min-width: 1200px) {
  .site-nav__link {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .site-header__logo img {
    transition: none;
  }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background-color: var(--color-brand);
  border-bottom: var(--border-width-strong) solid var(--color-ink);
  padding-block: var(--space-6) var(--space-7);
}

.hero__inner {
  max-width: 46rem;
}

.hero__title {
  margin-bottom: var(--space-3);
}

.hero__lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-5);
}

/*
  Die Aktionszeile einer Seite ("Weiter", "Bestellung abschliessen", "Zurueck"). gap trennt die Knoepfe
  untereinander; der Abstand nach OBEN ist eine eigene Regel, weil die Zeile fast immer direkt auf einen
  gerahmten Block folgt und sonst an dessen Rahmen klebt — im Hero traegt der Abstand sonst niemand,
  in den Kassenschritten war er schlicht nicht da.
*/
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

* + .hero__actions {
  margin-top: var(--space-6);
}

/*
  Design-Review 15.10.2026 (vierte Runde, Gestaltungsregel „Weiter rechts"): die Navigationszeile eines
  Ablaufs — Warenkorb, Zusammenfassung, Bestätigung. Gelerntes Verhalten: Vorwärts steht rechts, Zurück
  bzw. Nebenaktion links. Im DOM steht die Vorwärts-Aktion zuletzt, damit Lese- und Tab-Reihenfolge
  der sichtbaren Reihenfolge folgen.

  - Die Zeile ist rechtsbündig: eine allein stehende Vorwärts-Aktion sitzt rechts (wie die klebende
    Aktion der Schnellbestellung, Regel 28).
  - .action-row__start schiebt Zurück/Nebenaktion an die linke Kante (margin-inline-end: auto) — auch
    wenn sie allein steht. Als Ghost-Knopf dort bündig mit der Inhaltskante (.btn--flush).
  - Mobil gibt es keinen eigenen Bruchpunkt: passen nicht beide Knöpfe in eine Zeile, bricht die Zeile
    um, und wrap-reverse legt die Vorwärts-Zeile nach OBEN — Vorwärts oben rechts, Zurück darunter links.
    So bleibt „Vorwärts rechts" auch gestapelt wahr, und die Hauptaktion steht zuerst im Blick.
*/
.action-row {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

* + .action-row {
  margin-top: var(--space-6);
}

.action-row__start {
  margin-inline-end: auto;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-7);
  background-color: var(--color-ink);
  color: var(--color-surface);
  padding-block: var(--space-6);
}

.site-footer a {
  color: var(--color-brand);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/*
  Frühere Fassung: text-transform: uppercase. Das widersprach dem CI direkt — im Altsystem steht auch
  die Fußzeilen-Überschrift klein („zentrale hadersdorf", „liefergebiete"). Der Sperrsatz bleibt, er
  unterscheidet die Spaltentitel weiterhin vom Rest der Fußzeile.
*/
.site-footer__title {
  font-size: var(--font-size-base);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}

.site-footer__meta {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.25);
  font-size: var(--font-size-sm);
  color: #e5e2d8;
}

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

/* --- Abmelden als Icon in den Header-Aktionen (Design-Review 13.10.2026) -- */
/* Gleiche Machart wie der Warenkorb-Eintrag (.cart-entry): Touch-Fläche, Lucide-Strich. */
.site-header__logout {
  margin: 0;
  display: contents;
}

.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}

.logout-button__icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Formularspalte (Anmeldung, Registrierung, Passwort vergessen — Design-Review 13.10.2026): eine gemeinsame
   Breite (--form-max-width) für alle drei Seiten, mittig; der Absende-Button sitzt zentriert, nicht vollbreit.
   Zweite Runde: breiter als zuvor (28rem war auf einem 13-Zoll-Laptop zu schmal), und die Einleitung steht
   zentriert in derselben Spalte, damit Überschrift, Einleitung und Formular eine Achse bilden. */
.form-narrow,
.form-narrow__intro {
  width: 100%;
  max-width: var(--form-max-width);
  margin-inline: auto;
}

.form-narrow__intro {
  text-align: center;
}

.form-narrow__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.form-narrow__links {
  text-align: center;
}