/* ==========================================================================
   GEFLÜGELHOF NOBIS — THEME STYLESHEET
   Ziel-Datei in Shopify: assets/theme.css
   Token-Architektur nach ckm:design-system → Primitive → Semantic → Component
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYER 1 · PRIMITIVE TOKENS  (Rohwerte, nie direkt in Komponenten benutzen)
   Quelle: Logo Geflügelhof Nobis — Grün #157C40, Rot #DF2421
   -------------------------------------------------------------------------- */
:root{
  /* Kein Dunkelmodus: `only light` hält Chromes „Auto Dark Theme" auf Android
     davon ab, die Seite selbst einzufärben. Ohne das werden weiße Flächen
     dunkel und das Logo verfälscht. */
  color-scheme:only light;

  /* Marken-Grün, abgestuft */
  --green-950:#062617;
  --green-900:#0A3A21;
  --green-800:#0E5730;
  --green-700:#157C40;   /* Logo-Grün */
  --green-600:#1E9450;
  --green-500:#41AC70;
  --green-300:#95CEAC;
  --green-200:#C1E1CE;
  --green-100:#DEEEE5;
  --green-50 :#F0F7F3;

  /* Marken-Rot, abgestuft */
  --red-900:#6C0F0D;
  --red-800:#8F1512;
  --red-700:#B61C19;
  --red-600:#DF2421;     /* Logo-Rot */
  --red-500:#E85350;
  --red-200:#F6C5C4;
  --red-100:#FBDFDE;
  --red-50 :#FDF2F1;

  /* Neutrale Achse */
  --ink-950:#0B0B0B;
  --ink-900:#141414;
  --ink-800:#242424;
  --ink-700:#3D3D3D;
  --ink-600:#5A5A5A;
  --ink-500:#767676;
  --ink-400:#9A9A9A;
  --ink-300:#C4C4C4;
  --ink-200:#DEDEDE;
  --ink-100:#EDEDED;
  --ink-50 :#F7F7F7;
  --white  :#FFFFFF;

  /* Warme neutrale Achse (Beige) */
  --sand-50 :#FBF9F5;
  --sand-100:#F4F0E9;
  --sand-200:#E9E2D6;
  --sand-300:#D8CEBC;

  /* Abstands-Skala (8pt-Rhythmus) */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --space-32:128px;

  /* Radien — bewusst zurückhaltend */
  --radius-xs:3px;
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:18px;      /* nur für grosse Flächen wie die Zitat-Box */
  --radius-pill:999px;

  /* Schatten */
  --shadow-xs:0 1px 2px rgba(11,11,11,.05);
  --shadow-sm:0 2px 6px rgba(11,11,11,.06);
  --shadow-md:0 8px 24px rgba(11,11,11,.08);
  --shadow-lg:0 20px 56px rgba(11,11,11,.12);

  /* Typo-Primitive */
  /* SCHRIFT-TEST Kanit. Zum Zurueckschalten die beiden Zeilen tauschen. */
  --font-sans:'Kanit','Source Sans 3','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* --font-sans:'Source Sans 3','Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif; */
  --fs-11:.6875rem;--fs-12:.75rem;  --fs-13:.8125rem; --fs-14:.875rem; --fs-15:.9375rem;
  --fs-16:1rem;    --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem;
  --fs-30:1.875rem;--fs-36:2.25rem;  --fs-48:3rem;    --fs-60:3.75rem;

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:380ms;

  /* Layer */
  --z-base:0; --z-raised:10; --z-sticky:40; --z-overlay:80; --z-modal:100;
}

/* --------------------------------------------------------------------------
   LAYER 2 · SEMANTIC TOKENS  (Bedeutung statt Farbe — hier Theme umschalten)
   -------------------------------------------------------------------------- */
:root{
  --color-bg:              var(--white);
  --color-bg-subtle:       var(--sand-50);
  --color-bg-warm:         var(--sand-100);
  --color-bg-brand-soft:   var(--green-50);
  --color-bg-brand-tint:   var(--green-100);
  --color-bg-invert:       var(--green-900);
  --color-bg-invert-deep:  var(--green-950);
  --color-bg-accent-soft:  var(--red-50);

  --color-text:            var(--ink-900);
  --color-text-secondary:  var(--ink-700);
  --color-text-muted:      var(--ink-600);
  --color-text-faint:      var(--ink-500);
  --color-text-invert:     var(--white);
  --color-text-invert-muted:rgba(255,255,255,.72);

  --color-border:          var(--ink-200);
  --color-border-subtle:   var(--ink-100);
  --color-border-strong:   var(--ink-300);
  --color-border-invert:   rgba(255,255,255,.18);

  --color-brand:           var(--green-700);
  --color-brand-strong:    var(--green-800);
  --color-brand-deep:      var(--green-900);
  --color-accent:          var(--red-600);
  --color-accent-strong:   var(--red-700);
  --color-accent-deep:     var(--red-800);

  --color-focus:           var(--green-700);
  --color-success:         var(--green-700);
  --color-notice:          var(--red-600);

  --container:1240px;
  --container-narrow:820px;
  --gutter:20px;
}
@media (min-width:768px){ :root{ --gutter:32px; } }
@media (min-width:1200px){ :root{ --gutter:40px; } }

/* --------------------------------------------------------------------------
   LAYER 3 · COMPONENT TOKENS
   -------------------------------------------------------------------------- */
:root{
  --btn-radius:var(--radius-sm);
  --btn-height:48px;
  --btn-height-sm:38px;
  --btn-padding-x:var(--space-6);
  --btn-font-size:var(--fs-15);
  --btn-font-weight:600;

  --btn-primary-bg:var(--color-accent);
  --btn-primary-bg-hover:var(--color-accent-strong);
  --btn-primary-bg-active:var(--color-accent-deep);
  --btn-primary-fg:var(--white);

  --btn-brand-bg:var(--color-brand);
  --btn-brand-bg-hover:var(--color-brand-strong);
  --btn-brand-fg:var(--white);

  --btn-ghost-border:var(--color-border-strong);
  --btn-ghost-fg:var(--color-text);
  --btn-ghost-bg-hover:var(--ink-50);

  --card-radius:var(--radius-md);
  --card-bg:var(--white);
  --card-border:var(--color-border-subtle);
  --card-media-bg:var(--sand-100);

  --badge-radius:var(--radius-xs);
  --badge-font-size:var(--fs-12);

  --input-height:50px;
  --input-radius:var(--radius-sm);
  --input-border:var(--color-border-strong);
  --input-border-focus:var(--color-brand);
  --input-bg:var(--white);

  --header-height:76px;
  --header-height-compact:64px;
  --topbar-height:38px;
}

/* --------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  /* 17px statt 16: Source Sans 3 hat eine kleinere x-Höhe als Instrument Sans
     und liest sich bei gleicher Punktgröße spürbar kleiner. */
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;}
table{border-collapse:collapse;width:100%;}
svg{display:block;}
hr{border:0;border-top:1px solid var(--color-border);margin:0;}

:focus-visible{
  outline:2px solid var(--color-focus);
  outline-offset:3px;
  border-radius:2px;
}
::selection{background:var(--green-200);color:var(--ink-900);}

.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:var(--z-modal);
  background:var(--color-brand-deep);color:var(--white);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);
  font-size:var(--fs-14);font-weight:600;transition:top var(--dur-fast);
}
.skip-link:focus{top:var(--space-4);}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   TYPOGRAFIE — eine Familie, Hierarchie über Größe, Gewicht und Farbe
   -------------------------------------------------------------------------- */
/* Display-Skala rund 15 % kleiner als in der ersten Fassung und mit deutlich
   weniger negativer Laufweite: Source Sans 3 läuft offener als Instrument Sans
   und braucht das enge Tracking nicht. Der Abstand zwischen Headline und
   Fließtext wird dadurch kleiner — das ist der eigentliche Ruhe-Effekt. */
.display-xl{
  font-size:clamp(2rem,1.3rem + 3.05vw,3.4rem);
  line-height:1.08;letter-spacing:-.016em;font-weight:600;
}
.display-lg{
  font-size:clamp(1.7rem,1.18rem + 2.25vw,2.7rem);
  line-height:1.13;letter-spacing:-.014em;font-weight:600;
}
.display-md{
  font-size:clamp(1.4rem,1.12rem + 1.35vw,2rem);
  line-height:1.2;letter-spacing:-.012em;font-weight:600;
}
.display-sm{
  font-size:clamp(1.18rem,1.05rem + .58vw,1.45rem);
  line-height:1.3;letter-spacing:-.008em;font-weight:600;
}
.title{font-size:var(--fs-20);line-height:1.35;letter-spacing:-.006em;font-weight:600;}
.title-sm{font-size:var(--fs-18);line-height:1.4;letter-spacing:0;font-weight:600;}

.lead{
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  line-height:1.58;color:var(--color-text-secondary);
}
.body-lg{font-size:var(--fs-18);line-height:1.62;}
.body-sm{font-size:var(--fs-15);line-height:1.6;}
.caption{font-size:var(--fs-13);line-height:1.5;color:var(--color-text-faint);}
.muted{color:var(--color-text-muted);}
.measure{max-width:64ch;}
.measure-tight{max-width:52ch;}

/* Eyebrow: kleines Label, bewusst ohne roten Strich. Das Muster kam 29× vor und
   war damit die lauteste Wiederholung im Auftritt; Rot bleibt jetzt den CTAs und
   Badges vorbehalten. Sperrung von .14em auf .07em und Gewicht 600 → 500. */
.eyebrow{
  display:inline-flex;align-items:center;
  font-size:var(--fs-12);font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-text-muted);
}
.eyebrow--invert{color:var(--color-text-invert-muted);}
.eyebrow--center{justify-content:center;}

.num{font-variant-numeric:tabular-nums;}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow);}
.section{padding-block:var(--space-16);}
@media (min-width:768px){ .section{padding-block:var(--space-24);} }
.section--tight{padding-block:var(--space-12);}
@media (min-width:768px){ .section--tight{padding-block:var(--space-16);} }
.section--flush-top{padding-top:0;}

.section--subtle{background:var(--color-bg-subtle);}
.section--warm{background:var(--color-bg-warm);}
.section--brand-soft{background:var(--color-bg-brand-soft);}
.section--invert{background:var(--color-bg-invert);color:var(--color-text-invert);}
.section--invert .muted,
.section--invert .lead{color:var(--color-text-invert-muted);}

.section-head{
  display:flex;flex-direction:column;gap:var(--space-4);
  /* mehr Luft unter der Überschrift, fängt die kleinere Display-Skala auf */
  margin-bottom:var(--space-12);
}
@media (min-width:900px){
  .section-head--split{
    flex-direction:row;align-items:flex-end;justify-content:space-between;
    gap:var(--space-10);
  }
  .section-head--split .section-head__text{max-width:60ch;}
}
.section-head__text{display:flex;flex-direction:column;gap:var(--space-3);}

.grid{display:grid;gap:var(--space-6);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.stack{display:flex;flex-direction:column;}
/* Die Zahlen-Utilities setzen die Spaltenrichtung selbst mit. Vorher trugen sie
   nur den gap und wurden im Markup nie mit .stack kombiniert — auf einem
   display:block-Element wirkt gap nicht. Folge: die Kaufspalte der Produktseite
   und das Kontaktformular standen ganz ohne vertikalen Abstand, alle Blöcke
   stießen bündig aneinander. */
.stack-2,.stack-3,.stack-4,.stack-6,.stack-8{display:flex;flex-direction:column;}
.stack-2{gap:var(--space-2);} .stack-3{gap:var(--space-3);}
.stack-4{gap:var(--space-4);} .stack-6{gap:var(--space-6);}
.stack-8{gap:var(--space-8);}
.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;}
.row--center{justify-content:center;}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--btn-height);padding:0 var(--btn-padding-x);
  font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);
  letter-spacing:-.005em;line-height:1;
  border-radius:var(--btn-radius);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(1px);}
.btn svg{width:16px;height:16px;flex:none;}

.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);}
.btn--primary:hover{background:var(--btn-primary-bg-hover);}
.btn--primary:active{background:var(--btn-primary-bg-active);}

.btn--brand{background:var(--btn-brand-bg);color:var(--btn-brand-fg);}
.btn--brand:hover{background:var(--btn-brand-bg-hover);}

.btn--dark{background:var(--ink-900);color:var(--white);}
.btn--dark:hover{background:var(--ink-800);}

.btn--ghost{
  background:transparent;color:var(--btn-ghost-fg);
  border-color:var(--btn-ghost-border);
}
.btn--ghost:hover{background:var(--btn-ghost-bg-hover);border-color:var(--ink-400);}

.btn--ghost-invert{
  background:transparent;color:var(--white);
  border-color:rgba(255,255,255,.5);
}
.btn--ghost-invert:hover{background:rgba(255,255,255,.12);border-color:#fff;}

.btn--light{background:var(--white);color:var(--ink-900);}
.btn--light:hover{background:var(--sand-100);}

.btn--sm{min-height:var(--btn-height-sm);padding:0 var(--space-4);font-size:var(--fs-14);}
.btn--block{width:100%;}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;pointer-events:none;
}

/* Textlink mit Pfeil — für Teaser-Sections */
.link-arrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-15);font-weight:600;color:var(--color-text);
  padding-block:var(--space-2);
  border-bottom:1px solid var(--color-border-strong);
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.link-arrow svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out);}
.link-arrow:hover{color:var(--color-accent);border-color:var(--color-accent);}
.link-arrow:hover svg{transform:translateX(4px);}
.link-arrow--invert{color:var(--white);border-color:rgba(255,255,255,.4);}
.link-arrow--invert:hover{color:var(--white);border-color:#fff;}

/* --------------------------------------------------------------------------
   BADGES / PILLS / CHIPS
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--badge-radius);
  font-size:var(--badge-font-size);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.1;
  white-space:nowrap;
}
.badge svg{width:12px;height:12px;}
.badge--brand{background:var(--green-100);color:var(--green-800);}
.badge--accent{background:var(--red-100);color:var(--red-800);}
.badge--neutral{background:var(--ink-100);color:var(--ink-700);}
.badge--sand{background:var(--sand-200);color:var(--ink-800);}
/* Rezept-Beiträge. Kräftiger als die übrigen Badges, damit sie sich in der
   Kachelübersicht von den Kategorie-Badges abheben. */
.badge--recipe{background:var(--color-accent);color:var(--white);}
.badge--outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);}
.badge--solid{background:var(--color-accent);color:var(--white);}

.pill{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:7px 14px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--color-border);
  font-size:var(--fs-13);font-weight:500;color:var(--color-text-secondary);
}
.pill--invert{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;}

.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:40px;padding:0 var(--space-4);
  border-radius:var(--radius-pill);border:1px solid var(--color-border);
  background:var(--white);color:var(--color-text-secondary);
  font-size:var(--fs-14);font-weight:500;
  transition:all var(--dur-fast) var(--ease-out);
}
.chip:hover{border-color:var(--ink-400);color:var(--color-text);}
.chip[aria-pressed="true"]{
  background:var(--color-brand-deep);border-color:var(--color-brand-deep);color:var(--white);
}
.chip__count{font-size:var(--fs-12);opacity:.65;font-variant-numeric:tabular-nums;}

/* --------------------------------------------------------------------------
   MEDIA
   -------------------------------------------------------------------------- */
.media{
  position:relative;overflow:hidden;
  background:var(--card-media-bg);border-radius:var(--radius-md);
}
.media img{width:100%;height:100%;object-fit:cover;}
/* Fokuspunkt je Bild: `--focus` legt fest, um welchen Punkt herangezoomt wird,
   `--focus-zoom` wie weit. Wird auf dem .media-Rahmen gesetzt und gilt dann für
   alle Bilder darin — bei Produktkacheln also für roh und gebraten gleich, damit
   der Bildwechsel nicht springt. Ohne Angabe passiert nichts (Faktor 1).
   Nötig, weil mehrere Altbilder das Motiv klein, außermittig oder mit viel
   Beiwerk zeigen. Fester Wert, nichts wird animiert — die Regel „kein Zoom beim
   Hover“ bleibt gewahrt. In Shopify entspricht das dem Fokuspunkt aus dem
   Medien-Editor (`image.presentation.focal_point`). */
.media img{transform:scale(var(--focus-zoom, 1));transform-origin:var(--focus, 50% 50%);}
.media--4x3{aspect-ratio:4/3;}
.media--3x2{aspect-ratio:3/2;}
.media--1x1{aspect-ratio:1/1;}
.media--4x5{aspect-ratio:4/5;}
.media--16x9{aspect-ratio:16/9;}
.media--zoom img{transition:transform 700ms var(--ease-out);}
a:hover .media--zoom img,.card:hover .media--zoom img{transform:scale(1.045);}

/* Platzhalter, falls ein Bild (noch) fehlt oder nicht lädt */
.media.is-placeholder{
  background:
    repeating-linear-gradient(135deg,var(--sand-100) 0 12px,var(--sand-200) 12px 24px);
}
.media.is-placeholder img{opacity:0;}
.media.is-placeholder::after{
  content:attr(data-placeholder);
  position:absolute;inset:auto var(--space-4) var(--space-4) var(--space-4);
  background:var(--white);color:var(--ink-600);
  padding:6px 10px;border-radius:var(--radius-xs);
  font-size:var(--fs-12);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  text-align:center;
}

/* --------------------------------------------------------------------------
   ANKÜNDIGUNGSLEISTE  →  sections/announcement-bar.liquid
   -------------------------------------------------------------------------- */
/* Logo-Grün (green-700, #157C40) statt des fast schwarzen green-950.
   Der hellere Grund senkt den Kontrast: Deshalb ist die rechte Spalte
   nicht mehr auf 72 % Weiss gedimmt und das Icon nicht mehr green-300 —
   beides läge sonst unter den Lesbarkeitsschwellen. */
.topbar{
  background:var(--green-700);color:var(--color-text-invert);
  font-size:var(--fs-13);
}
.topbar__inner{
  min-height:var(--topbar-height);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:8px;
}
.topbar__msg{display:flex;align-items:center;gap:var(--space-2);}
.topbar__msg svg{width:14px;height:14px;flex:none;color:var(--green-100);}
.topbar__meta{display:none;gap:var(--space-5);color:rgba(255,255,255,.92);}
@media (min-width:900px){ .topbar__meta{display:flex;} }
.topbar__meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   HEADER  →  sections/header.liquid
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--color-border-subtle);
  transition:box-shadow var(--dur-base),border-color var(--dur-base);
}
.header.is-scrolled{box-shadow:var(--shadow-sm);border-color:transparent;}
.header__inner{
  min-height:var(--header-height);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
}
/* Logohöhe seit dem 14. September 2026 deutlich kleiner: Das neue Logo ist
   ein breites Querformat (7 : 1) und wirkte bei 42 px zu wuchtig. 23,5 px
   ist gemessen, nicht geschätzt: Das Logo ist damit genau so breit wie die
   Zeile „Familienunternehmen seit 1939" darunter (165,8 px Text, Logo
   3026 : 428). Ändert sich der Text oder seine Schriftgröße, gehört die
   Zahl neu gemessen. Auf dem Telefon gilt derselbe Wert, weil die Zeile
   dort gleich groß ist. */
.header__brand{display:flex;flex-direction:column;flex:none;--logo-h:23.5px;}
.header__logo{display:flex;align-items:center;flex:none;}
.header__logo img{height:var(--logo-h);width:auto;}
/* Der Zusatz unter dem Logo. nowrap, weil ein Umbruch die Kopfhöhe
   sprengen würde; auf schmalen Geräten fällt er deshalb ganz weg.

   Seit dem neuen Logo (14. September 2026) ein fester kleiner Abstand. Das
   alte PNG hatte 17 % leeren Rand unter dem Schriftzug, der hier mit
   negativem Abstand ausgeglichen wurde. Das SVG aus dem Druck-PDF ist bis
   auf 2 von 428 Einheiten beschnitten und braucht keinen Ausgleich mehr.
   line-height:1.15 nimmt die Zeilenluft aus dem Absatz. */
.header__claim{
  font-size:var(--fs-11);line-height:1.15;letter-spacing:.04em;
  color:var(--color-text-muted);white-space:nowrap;
  margin-top:var(--space-1);
  /* Mittig unter dem Logo statt an dessen linker Kante. Die Spalte ist
     so breit wie das Logo, weil das breiter ist als der Zusatz. */
  text-align:center;
}
/* Gemessen: der Zusatz ist schmaler als das Logo und kostet die Kopfzeile
   deshalb keine zusaetzliche Breite. Er faellt erst unter 360px weg,
   wo es fuer Logo, Warenkorb und Menue wirklich eng wird. */
@media (max-width:359px){ .header__claim{display:none;} }

.nav{display:none;}
@media (min-width:1060px){
  .nav{display:flex;align-items:center;gap:var(--space-1);}
}
.nav__link{
  position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--space-4);
  font-size:var(--fs-15);font-weight:500;color:var(--color-text-secondary);
  border-radius:var(--radius-sm);
  transition:color var(--dur-fast);
}
.nav__link::after{
  content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:12px;
  height:2px;background:var(--color-accent);border-radius:1px;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__link:hover{color:var(--color-text);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__link.is-active{color:var(--color-text);font-weight:600;}
.nav__link.is-active::after{transform:scaleX(1);}

.header__actions{display:flex;align-items:center;gap:var(--space-2);}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-sm);
  color:var(--color-text-secondary);
  transition:background var(--dur-fast),color var(--dur-fast);
}
.icon-btn:hover{background:var(--ink-50);color:var(--color-text);}
.icon-btn svg{width:21px;height:21px;}
/* Zähler am Warenkorb. Der Warenkorb ist am 6. September 2026 aus dem Kopf
   genommen worden, die Regel läuft seitdem nirgends — sie bleibt stehen,
   weil sie zum Warenkorb gehört, den Shopify später mitbringt. */
.icon-btn__count{
  position:absolute;top:5px;right:5px;
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--color-accent);color:#fff;
  border-radius:var(--radius-pill);
  font-size:10px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
}
.header__cta{display:none;}
@media (min-width:1060px){ .header__cta{display:inline-flex;} }
.nav-toggle{display:inline-flex;}
@media (min-width:1060px){ .nav-toggle{display:none;} }

/* Mobile-Navigation */
.mobile-nav{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:var(--white);
  display:flex;flex-direction:column;
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility var(--dur-base);
}
.mobile-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
.mobile-nav__top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-height);
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--color-border-subtle);
}
.mobile-nav__top img{height:38px;width:auto;}
.mobile-nav__body{
  flex:1;overflow-y:auto;
  padding:var(--space-6) var(--gutter) var(--space-10);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.mobile-nav__link{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;padding-block:var(--space-2);
  font-size:1.4rem;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--color-border-subtle);
}
.mobile-nav__link svg{width:18px;height:18px;color:var(--color-text-faint);}
.mobile-nav__link.is-active{color:var(--color-brand);}
.mobile-nav__foot{
  padding:var(--space-6) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom));
  background:var(--color-bg-subtle);border-top:1px solid var(--color-border-subtle);
  display:flex;flex-direction:column;gap:var(--space-4);
}

/* --------------------------------------------------------------------------
   HERO  →  sections/hero-banner.liquid
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  /* Volle Bildschirmhöhe abzüglich Header — das Video füllt damit genau den
     sichtbaren Bereich, ohne dass unten etwas angeschnitten wirkt. Die
     Ankündigungsleiste wurde am 5. September 2026 entfernt; ihre Höhe darf
     deshalb nicht mehr abgezogen werden, sonst bliebe unten ein Streifen.
     svh statt vh, weil auf iOS sonst die Höhe springt, sobald die Browserleiste
     ein- oder ausfährt; die vh-Zeile davor bleibt als Fallback stehen. */
  min-height:calc(100vh - var(--header-height));
  min-height:calc(100svh - var(--header-height));
  display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden;
  background:var(--green-950);
}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--green-950) center/cover no-repeat;}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ohne Bewegung: Video ausblenden, das Poster im Hintergrund bleibt stehen */
@media (prefers-reduced-motion:reduce){.hero__media video{display:none;}}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(130% 100% at 8% 100%,rgba(6,38,23,.58) 0%,rgba(6,38,23,.30) 42%,rgba(6,38,23,0) 76%),
    linear-gradient(to right,rgba(6,38,23,.34) 0%,rgba(6,38,23,.10) 38%,rgba(6,38,23,0) 62%),
    linear-gradient(to top,rgba(6,38,23,.72) 0%,rgba(6,38,23,.44) 22%,rgba(6,38,23,.14) 45%,rgba(6,38,23,0) 68%);
}
.hero__inner{
  width:100%;padding-block:var(--space-12) var(--space-16);
}
@media (min-width:768px){ .hero__inner{padding-block:var(--space-20) var(--space-20);} }
/* Die Breite richtet sich nach der Überschrift: „Südoldenburger Ente“ braucht
   rund 9,8em der eigenen Schriftgröße, bei der größten Stufe (3,4rem) also
   532px. Mit den vorherigen 34ch — das sind nur 287px — brach die Zeile
   mitten im Produktnamen um. 36rem lässt etwas Luft. */
.hero__content{max-width:36rem;display:flex;flex-direction:column;gap:var(--space-5);}
.hero h1{text-wrap:balance;text-shadow:0 1px 26px rgba(6,38,23,.42);}
.hero__sub{
  font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);
  line-height:1.55;color:rgba(255,255,255,.86);max-width:44ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2);}
.hero__marks{
  display:flex;flex-wrap:wrap;gap:var(--space-2);
  margin-top:var(--space-6);
}

/* Kleiner Seiten-Hero für Unterseiten → sections/page-header.liquid */
.page-hero{
  background:var(--color-bg-subtle);
  border-bottom:1px solid var(--color-border-subtle);
  padding-block:var(--space-12) var(--space-12);
}
@media (min-width:768px){ .page-hero{padding-block:var(--space-16) var(--space-16);} }
.page-hero__inner{
  display:grid;gap:var(--space-8);align-items:center;
}
@media (min-width:900px){
  .page-hero__inner{grid-template-columns:1.15fr .85fr;gap:var(--space-16);}
}
.page-hero__text{display:flex;flex-direction:column;gap:var(--space-4);max-width:56ch;}
.page-hero--invert{background:var(--color-bg-invert);color:var(--white);border-bottom:0;}
.page-hero--invert .lead{color:var(--color-text-invert-muted);}

/* --------------------------------------------------------------------------
   FOTO-HERO der Unterseiten  →  sections/page-hero-*.liquid
   Die klassische Fassung (.page-hero--invert, volle Inhaltshöhe, zweite
   Spalte rechts) bleibt vollständig erhalten — beide Fassungen stehen
   nebeneinander, umgeschaltet wird über die Klasse im Markup.
   -------------------------------------------------------------------------- */
.page-hero--photo{
  position:relative;overflow:hidden;
  /* 50vh wie gewünscht. min-height statt height: Reicht der Platz auf
     schmalen Geräten nicht, wächst der Hero mit, statt den Text zu
     beschneiden. svh berücksichtigt die ein- und ausfahrende Adressleiste
     auf dem Handy — mit reinem vh springt die Höhe beim Scrollen. */
  min-height:50vh;
  min-height:50svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:var(--space-16) var(--space-10);
  /* Grund für die Zeit, bis das Foto geladen ist. */
  background:var(--color-bg-invert);
  color:var(--white);border-bottom:0;
}
.page-hero__bg{position:absolute;inset:0;z-index:0;}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;display:block;}
/* Zwei Verläufe übereinander statt einer gleichmässigen Fläche. Ein einzelner
   Verlauf von unten deckte auch die Bildmitte ab — bei den Studiofotos, deren
   Motiv unten in der Mitte liegt, blieb vom Tier nichts übrig. Deshalb zusätzlich
   ein Verlauf von links: Die Schrift steht unten links und bekommt dort ihre
   Abdeckung, die rechte Bildhälfte bleibt weitgehend frei.
   Der Farbton ist green-950 — dieselbe Tiefe wie der Footer, damit die
   Abdunklung nicht grau, sondern nach Marke aussieht. */
.page-hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,
      rgba(6,38,23,.90) 0%,
      rgba(6,38,23,.66) 34%,
      rgba(6,38,23,.24) 70%,
      rgba(6,38,23,.12) 100%),
    linear-gradient(to right,
      rgba(6,38,23,.74) 0%,
      rgba(6,38,23,.34) 50%,
      rgba(6,38,23,0) 84%);
}
/* Auf schmalen Geräten liegt die Schrift über der ganzen Breite — der
   seitliche Verlauf reicht dort nicht, es braucht wieder die Fläche. */
@media (max-width:759px){
  .page-hero__bg::after{
    background:linear-gradient(to top,
      rgba(6,38,23,.94) 0%,
      rgba(6,38,23,.86) 38%,
      rgba(6,38,23,.55) 74%,
      rgba(6,38,23,.34) 100%);
  }
}
.page-hero__body{position:relative;z-index:1;}
/* Die aus dem Hero geholte Öffnungszeiten-Karte behält ihre Kartenbreite;
   über die vollen 1240px gezogen zerreisst die Zeile zwischen Tag und Zeit. */
.farmshop-hours{max-width:560px;}

/* STÖRER IM FOTO-HERO
   Roter Kreis mit der Angabe, nach der auf dieser Seite zuerst gesucht wird.
   Leicht gedreht — ein Störer, der exakt gerade sitzt, sieht aus wie ein
   Bedienelement.

   Rot ist var(--color-accent), dieselbe Marke wie der Kopfknopf und die
   Angebots-Badges — auf der Seite gibt es genau einen Rotton.

   Ohne Ring liegt der Kreis direkt auf dem roten Ziegeldach. Der Schatten
   trägt deshalb die Kante allein und ist etwas dichter als üblich; getönt
   ist er nicht, sonst käme ein zweites Rot ins Spiel.

   Weiß auf dem Logo-Rot #DF2421 ergibt 4,9:1 — über der Grenze von 4,5:1
   auch für die kleine Zeile.

   Standardposition ist die freie Ecke oben rechts. Erst wenn die Seite breit
   genug ist, dass Überschrift und Störer nebeneinander passen, rutscht er in
   die Mitte der rechten Kante. Nachgemessen bei 768px: mittig platziert lief
   die Überschrift mitten durch den Kreis. */
.hero-sticker{
  position:absolute;z-index:2;
  top:var(--space-4);right:var(--space-4);
  width:132px;aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:var(--space-3);
  background:var(--color-accent);color:var(--white);
  box-shadow:0 14px 34px rgba(6,38,23,.42);
  transform:rotate(6deg);text-align:center;
}
.hero-sticker__label{
  font-size:var(--fs-11);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.85);line-height:1.1;
}
.hero-sticker__day{
  font-size:var(--fs-16);font-weight:600;letter-spacing:-.02em;line-height:1.15;
}
.hero-sticker__time{
  font-size:var(--fs-12);font-weight:600;line-height:1.2;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
@media (min-width:640px){
  .hero-sticker{width:164px;}
  .hero-sticker__day{font-size:var(--fs-20);}
  .hero-sticker__time{font-size:var(--fs-14);}
}
@media (min-width:1024px){
  /* Weiter herein statt an der Kante: `right` in Prozent, damit der Abstand
     mit der Fensterbreite mitwächst. Bei 1024px sitzt der Kreis damit rund
     130px rechts vom Ende der Überschrift, bei 1680px entsprechend weiter. */
  .hero-sticker{
    top:50%;right:12%;
    transform:translateY(-50%) rotate(6deg);
  }
  /* Die Überschrift bekommt eine Grenze, damit sie dem Störer auch bei
     langen Zeilen nicht in die Quere kommt. Gilt nur für Heros, die einen
     tragen — die anderen dürfen die volle Breite behalten. */
  .page-hero--sticker .page-hero__text{max-width:640px;}
}
.page-hero--photo .page-hero__text{
  display:flex;flex-direction:column;gap:var(--space-4);
  align-items:flex-start;max-width:52ch;
}
/* Dieselben Umfärbungen wie im klassischen Hero. Sie hängen dort an
   .page-hero--invert; hier hängen sie an .page-hero--photo, damit keine der
   beiden Fassungen von der anderen abhängt. */
.page-hero--photo .lead{color:rgba(255,255,255,.86);}
.page-hero--photo .eyebrow{color:rgba(255,255,255,.78);}
.page-hero--photo .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55);}
.page-hero--photo .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}
/* Auf dem Handy ist 50vh knapp — dort etwas weniger Polsterung, damit die
   Überschrift nicht gegen die Kopfzeile stösst. */
@media (max-width:559px){
  .page-hero--photo{padding-block:var(--space-10) var(--space-8);}
}

/* Alle Unterseiten-Heroes stehen auf dunklem Grund. Damit müssen die Bausteine,
   die im Hero vorkommen, dort ebenfalls tragen — sie sind sonst für den hellen
   Grund gebaut. Die Regeln greifen über den Hero-Kontext statt über zusätzliche
   Modifier-Klassen im Markup, damit ein Hero nur eine Klasse braucht.
   In Shopify wird daraus das Schema-Feld `color_scheme: inverse` der Section. */
.page-hero--invert .breadcrumb{color:rgba(255,255,255,.6);}
.page-hero--invert .breadcrumb a{color:rgba(255,255,255,.78);}
.page-hero--invert .breadcrumb a:hover{color:var(--white);}
.page-hero--invert .eyebrow{color:var(--color-text-invert-muted);}
.page-hero--invert .body-sm{color:var(--color-text-invert-muted);}

/* Karten im dunklen Hero stehen hell auf dem Grund — beige statt reinweiß, das
   passt zur warmen Achse der Seite und ist auf dem Dunkelgrün weniger hart.
   Ohne Rahmen und ohne Akzentkante: Auf dem dunklen Grund trennt die Fläche
   selbst schon deutlich genug, jede zusätzliche Linie wirkt laut. */
.page-hero--invert .info-card,
.page-hero--invert .notice{
  background:var(--sand-50);border-color:transparent;border-left-width:1px;
  color:var(--color-text);
}
/* Innerhalb der hellen Karte gelten wieder die normalen Textfarben — die
   Invert-Regeln oben würden hier weiße Schrift auf Beige erzeugen. */
.page-hero--invert .info-card .eyebrow,
.page-hero--invert .notice .eyebrow{color:var(--color-text-muted);}
.page-hero--invert .info-card .body-sm,
.page-hero--invert .notice .body-sm{color:var(--color-text-secondary);}
.page-hero--invert .notice__text{color:var(--color-text-secondary);}
.page-hero--invert .notice__icon{color:var(--color-brand);}

/* Der Ghost-Button trägt dunkle Schrift und dunklen Rahmen — auf dem Grund
   bliebe er unsichtbar. Er bekommt die Invert-Fassung, die es schon gibt. */
.page-hero--invert .btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5);}
.page-hero--invert .btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}

.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  font-size:var(--fs-13);color:var(--color-text-faint);margin-bottom:var(--space-5);
}
.breadcrumb a:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:3px;}
.breadcrumb svg{width:12px;height:12px;opacity:.6;}

/* --------------------------------------------------------------------------
   KARTEN
   -------------------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--card-radius);overflow:hidden;
  transition:border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base);
}
.card:hover,.card:focus-within{border-color:var(--ink-400);box-shadow:0 0 0 1px var(--ink-400);}
.card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1;}
.card__foot{
  padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border-subtle);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
}

/* Produktkarte → snippets/product-card.liquid */
.product-card{position:relative;}
.product-card__media{position:relative;}
.product-card__media .product-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Kein Hover-Effekt auf Produktkacheln (Entscheidung vom 13. September 2026):
   kein Zweitbild, kein Rahmen beim Überfahren. Die allgemeine Regel
   `.card:hover` gilt für Beitragskacheln weiter und wird hier nur für
   Produkte zurückgenommen. */
.product-card:hover,.product-card:focus-within{border-color:var(--card-border);box-shadow:none;}

/* Die ganze Kachel ist Klickfläche. Der Tastaturfokus liegt auf dem Link im
   Namen, sichtbar gemacht wird er aber am `::after`, das die Kachel
   überspannt — ein Rahmen um die Überschrift allein sähe man auf dem
   dunklen Verlauf kaum. Nach innen versetzt, weil `.card` überstehende
   Ränder abschneidet. */
.product-card__name a{color:inherit;}
.product-card__name a:focus-visible{outline:none;}
.product-card__name a:focus-visible::after{outline:3px solid var(--color-accent);outline-offset:-3px;border-radius:var(--card-radius);}

/* Jedes Produkt liegt in zwei Zuschnitten aus derselben Aufnahme: `--flat`
   im Querformat 4:3 für die Entwürfe A und C bis F, `--photo` im Hochformat
   3:4 für die Bildkachel. Beide schneidet werkzeuge/fokus_server.py; im
   Hochformat sitzt das Motiv dabei höher, weil unten der Text liegt.
   `transform:none`, weil der Ausschnitt schon stimmt — ein Zoom würde das
   Bild nur unnötig hochskalieren.
   Die Regel greift über die Klasse, nicht über eine bestimmte Section: Wirkung
   hat sie ausschließlich dort, wo im Markup auch ein `--photo`-Bild liegt. */
.product-card__img--photo{display:none;}
.cards--photo .product-card__img--photo{display:block;transform:none;}
.cards--photo .product-card__img--flat{display:none;}
.product-card__flags{
  position:absolute;top:var(--space-3);left:var(--space-3);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2;
}
.product-card__cat{
  font-size:var(--fs-12);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-brand);
}
.product-card__name{
  font-size:var(--fs-18);font-weight:600;letter-spacing:-.012em;line-height:1.28;
}
.product-card__name a::after{content:"";position:absolute;inset:0;}
.product-card__specs{
  display:flex;flex-direction:column;gap:6px;
  margin-top:auto;padding-top:var(--space-3);
  border-top:1px dashed var(--color-border);
}
.spec-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);
  font-size:var(--fs-13);
}
.spec-row dt{color:var(--color-text-faint);}
.spec-row dd{color:var(--color-text-secondary);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;}
/* Klammer um Text und Fuß. In Entwurf A wirkungslos — die übrigen Entwürfe
   brauchen sie, um beides gemeinsam zu positionieren. */
.product-card__info{display:flex;flex-direction:column;flex:1;}

/* Im Sortiment hat die Kachel keinen Fuß: Preis und Schaltfläche sind weg.
   Zur Produktseite führt seit dem 13. September 2026 der Name, dessen
   `::after` die ganze Kachel überspannt. */

/* --------------------------------------------------------------------------
   PRODUKTSEITE → templates/produkt.php
   Am Rechner links die Bilder als Raster, rechts die Angaben, die beim
   Scrollen stehen bleiben. Am Telefon eine Wischleiste, in der das nächste
   Bild am Rand hervorschaut — das zeigt ohne Pfeile, dass es weitergeht.
   Der Name ist bewusst nicht `.produkt`: `head.php` schreibt den
   Template-Namen als Klasse an den <body>, und `.produkt{display:grid}` hätte
   die ganze Seite in zwei Spalten zerlegt.
   -------------------------------------------------------------------------- */
.produktseite{display:grid;gap:var(--space-8);}
/* Galerie: großes Bild 3:2, darunter Vorschaubilder → assets/js/produktgalerie.js */
.produktgalerie{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.produktgalerie__buehne{position:relative;}
.produktgalerie__gross{display:block;aspect-ratio:3/2;cursor:zoom-in;}
/* Hochformat: ganz zeigen statt beschneiden. Die Fläche daneben füllt eine
   unscharfe, abgedunkelte Fassung desselben Fotos, damit keine leeren Balken
   entstehen. Die Selektoren tragen .media mit, weil `.media img` sonst
   object-fit:cover und den Fokus-Zoom setzt. */
.media.produktgalerie__gross .produktgalerie__unscharf{display:none;}
.media.produktgalerie__gross.is-hochkant{background:var(--color-bg-invert-deep);}
.media.produktgalerie__gross.is-hochkant .produktgalerie__unscharf{
  display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Oberer Bildrand statt Mitte: Dort liegt meist nur der Holztisch, in der
     Mitte das helle Produkt, das unscharf als milchiger Fleck wirkte. */
  object-position:50% 0;
  /* Stark vergrößert: Unschärfe zieht am Rand Transparenz herein, die sonst
     als heller Schleier sichtbar wäre. */
  filter:blur(24px) brightness(.65) saturate(1.1);transform:scale(1.4);
}
.media.produktgalerie__gross.is-hochkant .produktgalerie__bild{
  position:relative;object-fit:contain;transform:none;
}
.produktgalerie__pfeil{
  position:absolute;top:50%;z-index:var(--z-raised);transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--white) 92%, transparent);color:var(--color-text);
  box-shadow:var(--shadow-md);
}
.produktgalerie__pfeil[hidden]{display:none;}
.produktgalerie__pfeil svg{width:20px;height:20px;}
.produktgalerie__pfeil--zurueck{left:var(--space-3);}
.produktgalerie__pfeil--weiter{right:var(--space-3);}
.produktgalerie__zaehler{
  position:absolute;left:var(--space-3);bottom:var(--space-3);z-index:var(--z-raised);
  padding:2px var(--space-2);border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-bg-invert-deep) 70%, transparent);
  color:var(--white);font-size:var(--fs-12);font-variant-numeric:tabular-nums;pointer-events:none;
}
.produktgalerie__vorschau{
  display:flex;gap:var(--space-2);overflow-x:auto;list-style:none;margin:0;
  padding:4px 4px var(--space-1);scrollbar-width:thin;
}
.produktgalerie__daumen{
  display:block;width:96px;aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius-sm);
  opacity:.55;outline:2px solid transparent;outline-offset:2px;
  transition:opacity var(--dur-base) var(--ease-out),outline-color var(--dur-base) var(--ease-out);
}
.produktgalerie__daumen.is-aktiv{opacity:1;outline-color:var(--color-brand);}
.produktgalerie__daumen img{display:block;width:100%;height:100%;object-fit:cover;}
@media (min-width:900px){ .produktgalerie__daumen{width:120px;} }

/* Lightbox. Der <dialog> füllt den Bildschirm, das Bild passt sich ein. */
.lightbox{
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:color-mix(in srgb, var(--color-bg-invert-deep) 95%, transparent);color:var(--white);
}
.lightbox[open]{display:grid;place-items:center;}
.lightbox::backdrop{background:transparent;}
html.hat-lightbox{overflow:hidden;}
.lightbox__bild{
  max-width:min(92vw, 2400px);max-height:84vh;max-height:84dvh;width:auto;height:auto;
  object-fit:contain;border-radius:var(--radius-sm);user-select:none;touch-action:pan-y;
}
.lightbox__knopf{
  position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--white) 14%, transparent);color:var(--white);
}
.lightbox__knopf svg{width:22px;height:22px;}
.lightbox__knopf:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.lightbox__schliessen{top:var(--space-4);right:var(--space-4);}
.lightbox__pfeil{top:50%;transform:translateY(-50%);}
.lightbox__pfeil--zurueck{left:var(--space-4);}
.lightbox__pfeil--weiter{right:var(--space-4);}
.lightbox__zaehler{
  position:absolute;left:50%;bottom:var(--space-4);transform:translateX(-50%);margin:0;
  font-size:var(--fs-14);color:color-mix(in srgb, var(--white) 75%, transparent);font-variant-numeric:tabular-nums;
}
@media (max-width:640px){
  .lightbox__pfeil{top:auto;bottom:var(--space-3);transform:none;}
  .lightbox__bild{max-width:100vw;border-radius:0;}
}
.produktseite__text{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;min-width:0;}
.produktseite__beschreibung{display:flex;flex-direction:column;gap:var(--space-3);color:var(--color-text-secondary);font-size:var(--fs-16);line-height:1.6;}
.produktseite__beschreibung ul{padding-left:var(--space-5);list-style:disc;}
.produktseite__beschreibung a{color:var(--color-brand);text-decoration:underline;text-underline-offset:3px;}
.produktseite__angaben{width:100%;max-width:460px;}
@media (min-width:900px){
  .produktseite{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16);align-items:start;}
  .produktseite__text{position:sticky;top:calc(var(--header-height) + var(--space-8));}
}

/* --------------------------------------------------------------------------
   KACHEL-ENTWÜRFE B BIS F — fünf andere Kachelarten, kein Rahmen-Umbau.
   Alle arbeiten auf demselben Markup wie Entwurf A; umgeschaltet wird nur
   eine Klasse am Raster. Was eine Fassung anders anordnet, ordnet sie mit
   CSS um — im HTML steht überall dasselbe. In keiner Fassung wird beim
   Hover gezoomt.

   Gemeinsame Regel seit der Katalog-Umstellung: Jede Fassung zeigt Bild,
   Name, Gewicht, Verfügbarkeit und Gebinde. Keine darf eine dieser Angaben
   verstecken — das ist die Anforderung an die Seite, nicht Geschmackssache.
   Sie unterscheiden sich nur darin, wie sie die fünf Angaben gewichten.
   -------------------------------------------------------------------------- */

/* B · BILDKACHEL — das Foto füllt die ganze Kachel, die Angaben liegen in
   einem dunklen Verlauf darüber. Hochformat, bildbetont, wie eine Magazinseite.
   Der Verlauf ist dicht genug, dass Text auch auf hellen Fotos trägt
   (Weiß auf der dichtesten Stufe: 13,7:1 selbst über reinem Weiß). */
.grid.cards--photo{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
/* Schichtung ohne eigenen Bezugsrahmen für den Textblock: Der Link im Namen
   spannt sein `::after` am nächsten positionierten Vorfahren auf. Stünde der
   Textblock auf `position:relative`, wäre nur er klickbar statt der ganzen
   Kachel. Deshalb liegt das Foto mit `z-index:-1` unten, und `isolation`
   hält es dabei innerhalb der Kachel statt hinter ihrem Hintergrund. */
.cards--photo .product-card{aspect-ratio:3/4;isolation:isolate;}
.cards--photo .product-card__media{position:absolute;inset:0;aspect-ratio:auto;z-index:-1;}
.cards--photo .product-card__info{
  /* flex:0 0 auto — sonst zieht das flex:1 der Grundregel den Block auf die
     volle Kachelhöhe und der Verlauf deckt das ganze Foto zu. */
  margin-top:auto;flex:0 0 auto;
  padding-top:var(--space-16);
  color:var(--color-text-invert);
  /* Feste Stopps in Pixeln, nicht in Prozent: Die Überblendung liegt damit
     exakt in der Polsterung oben, und der Text sitzt immer auf mindestens
     92 % Deckung — unabhängig davon, wie hoch der Block gerade wird.
     Mit Prozentstopps saß das Kategorie-Label im dünnen Teil und verschwand
     auf den hellen Fotos. */
  background:linear-gradient(to bottom,
    rgba(6,38,23,0) 0, rgba(6,38,23,.92) var(--space-16), rgba(6,38,23,.96) 100%);
}
.cards--photo .card__body{padding:0 var(--space-5) var(--space-5);gap:var(--space-1);flex:0 1 auto;}
.cards--photo .product-card__cat{color:var(--green-300);}
/* Angaben einzeilig statt als Tabelle — sonst deckt der Textblock das Foto zu. */
.cards--photo .product-card__specs{
  flex-direction:row;flex-wrap:wrap;gap:0 var(--space-3);
  border-top:0;padding-top:var(--space-1);margin-top:var(--space-1);
}
.cards--photo .spec-row{justify-content:flex-start;gap:var(--space-1);font-size:var(--fs-12);}
.cards--photo .spec-row dt{color:rgba(255,255,255,.62);}
.cards--photo .spec-row dd{color:#fff;text-align:left;}

/* C · REDUZIERT — Entwurf A, so weit zurückgenommen wie es geht, ohne eine
   Pflichtangabe zu verlieren.

   Ursprünglich blendete diese Fassung die Datenzeilen ganz aus. Das geht seit
   der Katalog-Umstellung nicht mehr: Gewicht, Verfügbarkeit und Gebinde
   müssen überall stehen. Statt sie zu verstecken, nimmt C ihnen das Gerüst —
   keine gestrichelte Linie, keine Beschriftungen, keine rechtsbündige Spalte.
   Übrig bleiben drei graue Zeilen unter dem Namen. Die Beschriftungen sind
   entbehrlich, weil jeder Wert seine Einheit mitbringt: „2.800–3.200 g“,
   „frisch & TK“, „4 Stück / Karton“ erklären sich selbst.

   Das kleinere Mindestmaß im Raster wirkt sich vor allem auf Tablets aus —
   ab etwa 1024px steht dort eine Spalte mehr als in Entwurf A. */
.grid.cards--slim{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.cards--slim .product-card__specs{
  gap:1px;margin-top:var(--space-1);padding-top:var(--space-1);border-top:0;
}
.cards--slim .spec-row{justify-content:flex-start;font-size:var(--fs-12);}
.cards--slim .spec-row dt{display:none;}
.cards--slim .spec-row dd{
  text-align:left;font-weight:400;color:var(--color-text-muted);
}
.cards--slim .card__body{gap:var(--space-2);}
/* Die Warengruppe stand in A in der Markenfarbe — dort trug sie gegen die
   Datenzeilen an. Hier wären die Datenzeilen so leise, dass die Farbe die
   Kachel überstimmen würde; deshalb zurückgenommen. */
.cards--slim .product-card__cat{color:var(--color-text-faint);}
.cards--slim .product-card__name{font-size:var(--fs-16);}

/* D · LISTE — eine Zeile je Produkt über die volle Breite, mit den drei
   Angaben in eigenen Spalten. Die Fassung, die der alten Website am nächsten
   kommt: Wer Gewichte oder Gebindegrößen vergleichen will, liest hier
   untereinander weg statt von Kachel zu Kachel zu springen. Für den
   gewerblichen Besucher die schnellste Fassung, für einen ersten Eindruck
   vom Produkt die kühlste — das Bild ist klein.

   Kein Kachelrahmen, nur Haarlinien zwischen den Zeilen: fünfzehn gerahmte
   Kästen untereinander ergäben ein Leitersprossen-Muster.

   Badges und die Bild-Umschaltfläche entfallen hier. Bei 104px Bildbreite
   bräche „Grillsortiment“ über drei Zeilen, und das zweite Bild wäre in
   Briefmarkengröße ohnehin nicht zu erkennen. */
.grid.cards--list{grid-template-columns:1fr;gap:0;}
.cards--list .product-card{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--space-4);
  align-items:center;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid var(--color-border-subtle);
  padding:var(--space-4) var(--space-2);
}
.cards--list .product-card:first-child{border-top:1px solid var(--color-border-subtle);}
.cards--list .product-card:hover{background:var(--color-bg-subtle);transform:none;box-shadow:none;}
.cards--list .product-card__media{border-radius:var(--radius-sm);}
.cards--list .product-card__flags{display:none;}
.cards--list .product-card__info{gap:var(--space-3);}
.cards--list .card__body{padding:0;gap:var(--space-1);flex:0 0 auto;}
/* Auf schmalen Geräten behalten die Angaben die Grundform der Kachel —
   Beschriftung links, Wert rechts, untereinander. Drei Spalten neben einem
   104px-Bild ergäben Spalten von rund 70px, in denen jede Gewichtsangabe
   umbricht. Die Tabellenform kommt erst mit der Breite dafür. */
.cards--list .product-card__specs{
  margin-top:var(--space-2);padding-top:0;border-top:0;gap:2px;
}
.cards--list .spec-row{font-size:var(--fs-12);}
/* Ab 860px reicht die Breite für die echte Tabellenform: Name links, die drei
   Angaben rechts daneben in eigenen Spalten. Darunter stapelt sich alles unter
   dem Namen — eine dreispaltige Tabelle neben einem 104px-Bild wäre auf dem
   Telefon nicht mehr lesbar.
   `grid-template-areas` statt einfacher Spalten, weil Warengruppe und Name
   im Markup zwei Geschwister sind: ohne benannte Felder landete der Name in
   der Datenspalte. */
@media (min-width:860px){
  .cards--list .product-card{grid-template-columns:120px minmax(0,1fr);gap:var(--space-6);}
  .cards--list .card__body{
    display:grid;align-items:center;
    grid-template-columns:minmax(190px,1fr) minmax(0,1.5fr);
    grid-template-areas:"cat specs" "name specs";
    gap:2px var(--space-6);
  }
  .cards--list .product-card__cat{grid-area:cat;align-self:end;}
  .cards--list .product-card__name{grid-area:name;align-self:start;}
  .cards--list .product-card__specs{
    grid-area:specs;margin-top:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);
  }
  /* justify-content aus der Grundregel muss hier ausdrücklich weg: in der
     gedrehten Flex-Richtung schiebt `space-between` Beschriftung und Wert
     an die Zellenränder — bei einer umbrechenden Gebinde-Angabe standen die
     Werte der Nachbarspalten dadurch tiefer als ihre Beschriftung. */
  .cards--list .spec-row{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;
  }
  .cards--list .spec-row dt{
    font-size:var(--fs-11);letter-spacing:.07em;text-transform:uppercase;
  }
  .cards--list .spec-row dd{text-align:left;font-size:var(--fs-13);}
}

/* E · ETIKETT — Bild oben, darunter die Angaben in der Rangfolge, in der man
   sie erfragt: erst das Gewicht groß, dann die Verfügbarkeit als Pille, dann
   das Gebinde klein und grau. Keine Tabelle, keine Beschriftungen — jeder
   Wert bringt seine Einheit mit („2.800–3.200 g“, „frisch & TK“,
   „4 Stück / Karton“).

   Der Unterschied zu Entwurf A ist die Gewichtung: A stellt die drei Angaben
   gleichrangig nebeneinander und erzeugt damit drei graue Zeilen; hier
   entsteht ein Gefälle, das man in einer halben Sekunde erfasst. Die Pille
   ist das einzige Farbfeld der Kachel und zieht das Auge genau auf die
   Angabe, nach der im Handel zuerst gefragt wird. */
.grid.cards--sheet{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.cards--sheet .card__body{gap:var(--space-1);}
.cards--sheet .product-card__cat{color:var(--color-text-faint);}
.cards--sheet .product-card__name{font-size:var(--fs-16);}
.cards--sheet .product-card__specs{
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--color-border-subtle);
  gap:var(--space-2);align-items:flex-start;
}
.cards--sheet .spec-row{justify-content:flex-start;}
.cards--sheet .spec-row dt{display:none;}
.cards--sheet .spec-row dd{text-align:left;}
.cards--sheet .spec-row[data-spec="gewicht"] dd{
  font-size:var(--fs-20);font-weight:600;letter-spacing:-.02em;color:var(--color-text);
}
.cards--sheet .spec-row[data-spec="zustand"] dd{
  display:inline-flex;padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--color-bg-brand-soft);color:var(--green-800);
  font-size:var(--fs-12);font-weight:600;
}
.cards--sheet .spec-row[data-spec="gebinde"] dd{
  font-size:var(--fs-12);font-weight:400;color:var(--color-text-faint);
}

/* F · STECKBRIEF — Bild links, Text rechts, zwei Karten je Reihe. Die
   großzügigste Fassung: Das Foto bekommt echte Fläche, ohne dass der Text
   darauf liegen muss wie in Entwurf B, und die drei Angaben stehen als
   ruhige Zeilen daneben statt gedrängt unter dem Bild.

   Gedacht für ein Sortiment dieser Größe — bei fünfzehn Produkten sind
   knapp acht Reihen noch überschaubar. Käme das Sortiment auf fünfzig
   Artikel, wäre diese Fassung zu lang und D die richtige.

   Unter 560px klappt die Karte auf die gestapelte Form zurück: 40 % von
   einer Telefonbreite sind rund 140px, dafür lohnt der Zuschnitt nicht. */
/* `min(420px,100%)` statt 420px: Auf einem 390px-Telefon wäre die
   Mindestbreite größer als das Fenster, und die Karte schöbe die ganze
   Seite seitwärts. */
.grid.cards--wide{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
.cards--wide .product-card{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);}
.cards--wide .product-card__media{aspect-ratio:auto;height:100%;border-radius:0;}
.cards--wide .product-card__info{padding:var(--space-6) var(--space-5);justify-content:center;}
.cards--wide .card__body{padding:0;gap:var(--space-2);flex:0 0 auto;}
.cards--wide .product-card__name{font-size:var(--fs-20);}
.cards--wide .product-card__specs{
  margin-top:var(--space-4);padding-top:var(--space-4);
  border-top:1px solid var(--color-border-subtle);border-bottom:0;
  gap:var(--space-2);
}
.cards--wide .spec-row{font-size:var(--fs-14);}
@media (max-width:559px){
  .cards--wide .product-card{grid-template-columns:1fr;}
  .cards--wide .product-card__media{aspect-ratio:4/3;height:auto;}
  .cards--wide .product-card__info{padding:var(--space-5);}
}

/* PROTOTYP-HILFE: Umschalter zwischen den Kachel-Entwürfen. Fällt in Shopify
   ersatzlos weg, dort bleibt genau eine Fassung übrig. */
.proto-switch{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-bottom:var(--space-6);padding:var(--space-2) var(--space-3);
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);
  background:var(--color-bg-subtle);
}
.proto-switch__label{
  font-size:var(--fs-12);font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-text-muted);margin-right:var(--space-1);
}
.proto-switch button{
  font-size:var(--fs-13);padding:5px 10px;border-radius:var(--radius-xs);
  color:var(--color-text-secondary);border:1px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.proto-switch button:hover{background:var(--white);border-color:var(--color-border);}
.proto-switch button[aria-pressed="true"]{
  background:var(--white);border-color:var(--color-brand);
  color:var(--color-brand);font-weight:600;
}

.price{display:flex;flex-direction:column;gap:1px;}
.price__main{font-size:var(--fs-18);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.015em;}
.price__unit{font-size:var(--fs-12);color:var(--color-text-faint);font-variant-numeric:tabular-nums;}
.price__was{font-size:var(--fs-13);color:var(--color-text-faint);text-decoration:line-through;}
.price--offer .price__main{color:var(--color-accent);}

/* Teaser-Karte für Unterseiten → snippets/page-teaser.liquid */
.teaser{
  position:relative;display:grid;gap:var(--space-8);align-items:center;
}
@media (min-width:900px){
  .teaser{grid-template-columns:1fr 1fr;gap:var(--space-16);}
  .teaser--reverse .teaser__media{order:2;}
}
/* Rasterfelder dürfen von Haus aus nicht schmaler werden als ihr Inhalt. Die
   Vergleichstabelle im Qualitäts-Abschnitt hat darüber die ganze Seite
   auseinandergeschoben — auf dem Telefon war sie 407px breit bei 388px Fenster
   und erzeugte seitliches Scrollen. `min-width:0` hebt diese Sperre auf. */
.teaser__media{min-width:0;}
.teaser__text{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;max-width:52ch;}
.teaser__list{display:flex;flex-direction:column;gap:var(--space-2);margin-block:var(--space-1);}
.teaser__list li{
  display:flex;gap:var(--space-3);align-items:flex-start;
  font-size:var(--fs-15);color:var(--color-text-secondary);
}
.teaser__list svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--color-brand);}

/* Der Schritte-Block innerhalb des Qualitäts-Teasers (Startseite).
   Der Abstand ersetzt die Polsterung, die der Block als eigene Section
   hätte — deshalb liegt er in derselben Größenordnung wie section-padding.
   Die Linie trennt Teaser und Schritte, ohne ein zweites Farbfeld zu
   öffnen. */
.teaser-quality__steps{
  margin-top:var(--space-12);
  padding-top:var(--space-12);
  border-top:1px solid var(--color-border);
  /* Ziel des Hero-Knopfs „Was uns unterscheidet“. Der Kopf klebt oben und
     würde die Überschrift sonst verdecken — scroll-margin hält ihn frei. */
  scroll-margin-top:calc(var(--header-height) + var(--space-8));
}
.teaser-quality__steps:focus{outline:none;}
@media (min-width:768px){
  .teaser-quality__steps{margin-top:var(--space-20);padding-top:var(--space-20);}
}
/* Die Überschrift braucht innerhalb des Teasers weniger Luft als eine
   eigenständige Section, sonst reisst der Abschnitt optisch auseinander. */
.teaser-quality__steps .section-head{margin-bottom:var(--space-10);}

/* --------------------------------------------------------------------------
   PROZESS / NUMMERIERUNG  →  snippets/process-steps.liquid
   -------------------------------------------------------------------------- */
.steps{display:grid;gap:var(--space-8);counter-reset:step;}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2,1fr);gap:var(--space-10);} }
@media (min-width:1100px){ .steps{grid-template-columns:repeat(4,1fr);gap:var(--space-8);} }
.step{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-5);border-top:2px solid var(--color-border);}
.step__num{
  font-size:clamp(2.2rem,1.6rem + 2vw,3rem);
  font-weight:600;line-height:.9;letter-spacing:-.04em;
  color:var(--green-200);font-variant-numeric:tabular-nums;
}
.section--invert .step{border-top-color:rgba(255,255,255,.22);}
.section--invert .step__num{color:var(--green-500);}

/* Vergleichstabelle. Läuft seit dem Entfernen der Qualitätsseite (05.09.2026)
   nirgends mehr; bleibt als Baustein stehen, weil sie zum Grundsatz gehört.
   Die zugehörige Section liegt in backup/qualitaet-seite/. */
.compare{
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  /* Reicht der Platz auch nach dem Zusammenrücken nicht, scrollt die Tabelle
     in sich selbst — besser als eine Seite, die sich seitlich schieben lässt.
     Senkrecht bleibt es beschnitten, sonst fransen die runden Ecken aus. */
  overflow-x:auto;overflow-y:hidden;
  background:var(--white);
}
.compare table{font-size:var(--fs-15);}
.compare th,.compare td{
  padding:var(--space-4) var(--space-5);text-align:left;
  border-bottom:1px solid var(--color-border-subtle);vertical-align:top;
}
/* Auf dem Telefon rücken Polster und Schrift zusammen, damit die drei Spalten
   ohne Scrollen nebeneinander passen. */
@media (max-width:559px){
  .compare table{font-size:var(--fs-13);}
  /* Seitlich knapper als oben/unten: die Breite ist hier der Engpass, und die
     drei Spalten stehen sonst zusammen 2px über dem Rahmen.
     Silbentrennung, weil „Branchenstandard“ sonst allein die Mindestbreite
     der Tabelle bestimmt — das Dokument ist auf lang="de" gesetzt. */
  .compare th,.compare td{padding:var(--space-3) var(--space-2);hyphens:auto;}
  /* In der Kopfzeile keine Trennung: „TROCKEN-RUPF“ über zwei Zeilen liest
     sich schlecht. Ab 360px passt sie auch so; darunter scrollt die Tabelle
     in sich — dafür ist der Scrollrahmen oben da. */
  .compare thead th{font-size:var(--fs-12);letter-spacing:.03em;hyphens:manual;}
  .compare tbody th{width:36%;}
}
.compare thead th{
  background:var(--color-bg-subtle);font-size:var(--fs-13);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);
}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0;}
.compare tbody th{font-weight:500;color:var(--color-text-muted);width:34%;}
.compare .is-highlight{background:var(--color-bg-brand-soft);font-weight:600;color:var(--green-800);}
.compare td.is-plain{color:var(--color-text-muted);}

/* Zitat */
.quote{
  display:flex;flex-direction:column;gap:var(--space-6);
  max-width:70ch;
}
.quote__text{
  font-size:clamp(1.25rem,1.05rem + .9vw,1.85rem);
  line-height:1.4;letter-spacing:-.02em;font-weight:500;text-wrap:balance;
}
/* Große, runde Anführungszeichen als Blickfang. Das alte eckige Symbol füllte
   seine 24er-Fläche nur zur Hälfte und wirkte neben dem Text verloren. */
.quote__mark{width:clamp(56px,2.6rem + 2vw,84px);height:auto;flex:none;color:var(--color-accent);}
.quote__author{display:flex;align-items:center;gap:var(--space-4);}
.quote__author img{width:52px;height:52px;border-radius:var(--radius-pill);object-fit:cover;flex:none;}

/* Zitat mit Porträt: Bild auf einem Drittel, Zitat auf zwei Dritteln.
   1fr/2fr statt 33%/66%, damit der Spaltenabstand nicht auf 100 % draufkommt —
   das Verhältnis der beiden Spalten bleibt exakt 1:2. */
.quote-split{
  display:grid;grid-template-columns:1fr;gap:var(--space-8);
  align-items:center;margin:0;
}
@media (min-width:840px){
  .quote-split{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-12);}
}
.quote-split__media{max-width:340px;}
@media (min-width:840px){ .quote-split__media{max-width:none;} }
.quote-split__body{display:flex;flex-direction:column;gap:var(--space-5);}
/* Etwas kleiner als das freistehende Zitat: dieser Text ist vier Sätze lang,
   auf der großen Pull-Quote-Stufe würde er die Section sprengen. */
.quote-split .quote__text{
  font-size:clamp(1.1rem,1rem + .55vw,1.45rem);
  line-height:1.5;letter-spacing:-.01em;text-wrap:pretty;
}

/* Zitat als Box statt als vollflächiges Farbfeld. Das Grün ist die
   hellste Stufe der Skala — es trägt die Fläche, ohne den Text zu
   überstimmen, deshalb bleibt die Schrift hier normal dunkel. */
.quote-card{
  background:var(--color-bg-brand-soft);
  border:1px solid var(--green-100);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
}
@media (min-width:840px){
  .quote-card{padding:var(--space-12);}
}
/* Innerhalb der Box eine Stufe kleiner runden als die Box selbst,
   sonst wirken die beiden Rundungen wie ein Fehler. */
.quote-card .media{border-radius:var(--radius-lg);}
.quote-card .quote__mark{color:var(--color-brand);}
.quote__by{display:flex;flex-direction:column;gap:2px;}
.quote__by-name{font-weight:600;}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8) var(--space-6);}
@media (min-width:900px){ .stats{grid-template-columns:repeat(4,1fr);} }
.stat__value{
  font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);
  font-weight:600;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:var(--fs-14);color:var(--color-text-muted);margin-top:var(--space-2);line-height:1.4;}
.section--invert .stat__label{color:var(--color-text-invert-muted);}

/* Zeitstrahl → sections/timeline.liquid (Blocks: year, title, text, image)
   Der Verlauf läuft waagerecht: beim Scrollen bleibt die Bühne stehen und der
   Streifen wandert nach links — die Jahre ziehen also von links nach rechts
   durch. Der senkrechte Weg der Bühne entspricht dabei 1:1 dem waagerechten
   Weg des Streifens; die dafür nötige Höhe rechnet JS aus und setzt sie auf
   `.htl` (siehe [data-htl] im Skript).
   Ohne JS, auf schmalen Bildschirmen und bei prefers-reduced-motion bleibt es
   ein von Hand wischbarer Streifen mit Scroll-Snap: nichts wird festgehalten,
   nichts bewegt sich von allein. Deshalb steht der Grundzustand hier außerhalb
   der Media-Query — festgehalten wird nur, was `.is-pinned` bekommt. */
.htl{position:relative;}
.htl__stage{display:flex;flex-direction:column;justify-content:center;gap:var(--space-8);}
/* Der Abstand kommt hier aus dem gap der Bühne, nicht aus der Überschrift. */
.htl__stage .section-head{margin-bottom:0;}
.htl__track{
  display:flex;gap:var(--space-8);align-items:stretch;
  padding-inline:max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)));
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.htl__track::-webkit-scrollbar{display:none;}

.htl-item{
  flex:none;scroll-snap-align:center;
  width:clamp(260px,78vw,320px);
  display:grid;grid-template-rows:1fr auto 1fr;
}
/* Versetzt: das Bild sitzt abwechselnd über und unter der Achse, der Text
   jeweils gegenüber. Beide Außenreihen sind gleich hoch (1fr) und die Kacheln
   werden auf gleiche Höhe gestreckt — dadurch liegt die Achse in jeder Kachel
   auf derselben Höhe, auch wenn ein Text länger ist als die anderen. Bild und
   Text rücken jeweils an die Achse heran (align-self), nicht an den Rand. */
.htl-item__media{grid-row:1;align-self:end;margin-bottom:var(--space-4);}
.htl-item__text{grid-row:3;align-self:start;margin-top:var(--space-4);}
.htl-item:nth-child(even) .htl-item__media{
  grid-row:3;align-self:start;margin:var(--space-4) 0 0;
}
.htl-item:nth-child(even) .htl-item__text{
  grid-row:1;align-self:end;margin:0 0 var(--space-4);
}
/* Die Achse: jedes Teilstück ragt um die halbe Lücke nach beiden Seiten
   heraus, dadurch stoßen die Stücke aneinander und ergeben eine durchgehende
   Linie — ohne ein zusätzliches Element quer über den ganzen Streifen. */
.htl-item__axis{
  grid-row:2;position:relative;height:2px;
  margin-inline:calc(var(--space-8) / -2);
}
/* Die Linie selbst liegt auf einem Pseudo-Element, damit sie sich an den
   Enden kürzen lässt, ohne den Punkt mitzuverschieben: Beim ersten Eintrag
   beginnt sie in der Mitte des Punkts, beim letzten endet sie dort
   (14. September 2026, vorher ragte sie an beiden Enden über die Punkte). */
.htl-item__axis::before{
  content:"";position:absolute;inset:0;
  background:var(--sand-300);
}
.htl-item:first-child .htl-item__axis::before{left:calc(var(--space-8) / 2 + 7px);}
.htl-item:last-child .htl-item__axis::before{right:auto;width:calc(var(--space-8) / 2 + 7px);}
.htl-item:only-child .htl-item__axis::before{display:none;}
.htl-item__dot{
  position:absolute;top:50%;left:calc(var(--space-8) / 2);
  width:14px;height:14px;margin-top:-7px;
  border-radius:var(--radius-pill);
  background:var(--white);border:3px solid var(--color-brand);
}
.htl-item__year{
  font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);font-weight:600;
  letter-spacing:-.03em;color:var(--color-brand);line-height:1.1;
  font-variant-numeric:tabular-nums;
}

@media (min-width:900px){
  .htl.is-pinned .htl__stage{
    position:sticky;top:var(--header-height);
    height:calc(100vh - var(--header-height));
    padding-block:var(--space-8);
  }
  .htl.is-pinned .htl__track{overflow:visible;scroll-snap-type:none;will-change:transform;}
  .htl.is-pinned .htl-item{width:clamp(300px,26vw,440px);}
}
/* Niedrige Fenster: sonst ragen Bild und Text aus der festgehaltenen Bühne. */
@media (min-width:900px) and (max-height:780px){
  .htl.is-pinned .htl-item{width:clamp(260px,21vw,340px);}
}

/* Team → snippets/team-card.liquid */
.team-card{display:flex;flex-direction:column;gap:var(--space-4);}
.team-card__media{border-radius:var(--radius-md);overflow:hidden;background:var(--sand-100);}
/* Auf dem Telefon füllte das 4:5-Hochformat sonst den halben Bildschirm.
   Das Raster wird hier zusätzlich fest auf eine Spalte gesetzt: `auto-fit`
   würde je nach Breite der Bildlaufleiste mal ein-, mal zweispaltig umbrechen,
   und bei zwei Spalten wären 66 % viel zu klein. So ist der Zustand unter
   560px eindeutig — eine Karte pro Reihe, Bild auf zwei Dritteln. */
@media (max-width:559px){
  .team-grid{grid-template-columns:1fr;}
  .team-card__media{width:66%;}
}
.team-card__name{font-size:var(--fs-20);font-weight:600;letter-spacing:-.015em;}
.team-card__role{
  font-size:var(--fs-13);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-brand);margin-top:2px;
}
.team-card__contact{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-14);color:var(--color-text-muted);}
.team-card__contact a:hover{color:var(--color-text);text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   HINWEIS-BOX  →  snippets/notice.liquid
   -------------------------------------------------------------------------- */
.notice{
  display:flex;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-md);
  background:var(--color-bg-accent-soft);
  border:1px solid var(--red-200);
  border-left:4px solid var(--color-accent);
}
.notice__icon{flex:none;color:var(--color-accent);}
.notice__icon svg{width:20px;height:20px;}
.notice__title{font-weight:600;font-size:var(--fs-16);}
.notice__text{font-size:var(--fs-15);color:var(--color-text-secondary);margin-top:2px;}
.notice--brand{background:var(--color-bg-brand-soft);border-color:var(--green-200);border-left-color:var(--color-brand);}
.notice--brand .notice__icon{color:var(--color-brand);}

/* Öffnungszeiten */
.hours{display:flex;flex-direction:column;}
.hours__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-block:var(--space-3);border-bottom:1px solid var(--color-border-subtle);
  font-size:var(--fs-15);
}
.hours__row:last-child{border-bottom:0;}
.hours__row.is-open dt{font-weight:600;color:var(--color-text);}
.hours__row.is-open dd{font-weight:600;color:var(--color-brand);}
.hours__row dt{color:var(--color-text-muted);}
.hours__row dd{font-variant-numeric:tabular-nums;color:var(--color-text-secondary);}

.info-card{
  background:var(--white);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);
}
/* Warme Fassung für Karten auf weißem Grund. Nicht --color-bg-warm (sand-100),
   weil die Karten sonst mit der Section darüber verschmelzen würden. */
.info-card--sand{background:var(--sand-50);border-color:var(--sand-200);}
/* Icon-Kachel. Die Symbole tragen keine Größenangabe im Markup — ohne feste
   Maße hier rendert ein SVG in voller Kastenbreite und sprengt das Raster. */
.info-card__icon{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--green-100);color:var(--green-800);
}
.info-card__icon svg{width:22px;height:22px;}

/* Betriebsferien in der Öffnungszeiten-Karte: abgesetzt durch eine Linie,
   Überschrift in der Akzentfarbe, Zeiträume als spec-row mit Tabellenziffern.
   Steht bewusst in derselben Karte wie die Öffnungszeiten — wer die Zeiten
   liest, muss die Ausnahme im selben Blick mitbekommen. */
.closure{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-top:var(--space-4);border-top:1px solid var(--color-border);
}
.closure__title{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-14);font-weight:600;color:var(--color-accent);
}
.closure__title svg{width:15px;height:15px;flex:none;}
.closure__dates{display:flex;flex-direction:column;gap:3px;}
.closure__dates .spec-row{font-size:var(--fs-14);}
.closure__back{font-size:var(--fs-13);line-height:1.5;color:var(--color-text-muted);}
/* B2B-Band. Links Text und Aufruf, rechts die Kundengruppen, darunter über die
   volle Breite die Ansprechpartnerin. Bewusst ohne Karte: eine weiße Fläche auf
   dem dunklen Grund zog den Blick stärker an als der Aufruf daneben. Die
   Signaturzeile trennt stattdessen eine Haarlinie — dasselbe Mittel wie bei
   .step, damit das Band nicht nach Fremdkörper aussieht.
   Die Polsterung ist knapper als bei .section, unten am knappsten: Das Band
   steht direkt über dem Footer, der seinen eigenen Abstand mitbringt. */
.section--b2b{padding-block:var(--space-12) var(--space-8);}
.b2b{display:grid;gap:var(--space-10);}
.b2b__text{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;max-width:58ch;}
/* Ansprechpartnerin in der rechten Spalte. Vorher lief sie als Signaturzeile
   über die ganze Breite unter beiden Spalten; jetzt ist sie der Inhalt der
   rechten Spalte und damit eine eigene Karte: leicht aufgehellte Fläche auf
   dem dunklen Grund, damit sie sich abhebt, ohne ein zweites Farbfeld zu
   öffnen. Foto rund, weil der Zuschnitt der Altbilder in Ecken unruhig wird. */
.b2b-sig{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4) var(--space-5);align-items:center;
  align-self:start;
  padding:var(--space-6);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
}
.b2b-sig__photo{
  width:80px;height:80px;border-radius:var(--radius-pill);
  overflow:hidden;flex:none;background:var(--green-800);
}
.b2b-sig__photo img{width:100%;height:100%;object-fit:cover;}
.b2b-sig__id{display:flex;flex-direction:column;gap:1px;}
.b2b-sig__role{
  font-size:var(--fs-13);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-300);
}
.b2b-sig__name{font-size:var(--fs-18);font-weight:600;letter-spacing:-.01em;color:var(--white);}
.b2b-sig__links{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-14);grid-column:1/-1;}
.b2b-sig__links a{color:var(--color-text-invert-muted);word-break:break-word;}
.b2b-sig__links a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
/* Der Knopf schliesst die Karte ab und nimmt die ganze Breite — als
   einzelnes Element rechts unten wirkte er verloren. */
.b2b-sig .btn{grid-column:1/-1;width:100%;}
/* Die rechte Spalte bekommt feste Breite, die linke den Rest. Vorher war links
   1fr bei 54ch Textbreite — die Spalte war also deutlich breiter als ihr Inhalt,
   und diese Leerfläche addierte sich zum Spaltenabstand zu einer sichtbaren
   Lücke. Jetzt liegen beide Spalten dicht an ihrem tatsächlichen Inhalt. */
@media (min-width:940px){
  .b2b{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--space-12);}
}

.info-card--brand{background:var(--color-brand-deep);color:var(--white);border-color:transparent;}
.info-card--brand .hours__row{border-color:rgba(255,255,255,.16);}
.info-card--brand .hours__row dt{color:rgba(255,255,255,.7);}
.info-card--brand .hours__row dd{color:#fff;}
.info-card--brand .hours__row.is-open dd{color:var(--green-300);}

/* --------------------------------------------------------------------------
   AKKORDEON  →  snippets/accordion.liquid
   -------------------------------------------------------------------------- */
.accordion{border-top:1px solid var(--color-border);}
.acc-item{border-bottom:1px solid var(--color-border);}
.acc-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:60px;padding-block:var(--space-4);text-align:left;
  font-size:var(--fs-16);font-weight:600;letter-spacing:-.008em;
  transition:color var(--dur-fast);
}
.acc-trigger:hover{color:var(--color-brand);}
.acc-trigger__icon{
  flex:none;width:22px;height:22px;position:relative;
  transition:transform var(--dur-base) var(--ease-out);
}
.acc-trigger__icon::before,.acc-trigger__icon::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;
  transform:translate(-50%,-50%);
}
.acc-trigger__icon::before{width:13px;height:1.5px;}
.acc-trigger__icon::after{width:1.5px;height:13px;transition:opacity var(--dur-base),transform var(--dur-base);}
.acc-trigger[aria-expanded="true"] .acc-trigger__icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg);}
.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease-out);
}
.acc-panel.is-open{grid-template-rows:1fr;}
.acc-panel__inner{overflow:hidden;}
.acc-panel__content{
  padding-bottom:var(--space-6);
  font-size:var(--fs-15);line-height:1.65;color:var(--color-text-secondary);
  display:flex;flex-direction:column;gap:var(--space-3);
}

/* --------------------------------------------------------------------------
   FORMULARE  →  sections/contact-form.liquid
   -------------------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--space-5);}
.form-grid{display:grid;gap:var(--space-5);}
@media (min-width:640px){ .form-grid--2{grid-template-columns:1fr 1fr;} }
.field{display:flex;flex-direction:column;gap:var(--space-2);}
/* Das hidden-Attribut bringt von sich aus nur display:none aus dem
   Browser-Standard mit — jede eigene display-Regel schlägt das. Ohne
   diese Zeile bliebe ein ausgeblendetes .field sichtbar. */
[hidden]{display:none !important;}
.field__label{font-size:var(--fs-14);font-weight:600;letter-spacing:-.005em;}
.field__req{color:var(--color-accent);}
.field__hint{font-size:var(--fs-13);color:var(--color-text-faint);}
.input,.textarea,.select{
  width:100%;min-height:var(--input-height);
  padding:var(--space-3) var(--space-4);
  background:var(--input-bg);color:var(--color-text);
  border:1px solid var(--input-border);border-radius:var(--input-radius);
  font-size:var(--fs-16);line-height:1.4;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-400);}
.input:hover,.textarea:hover,.select:hover{border-color:var(--ink-400);}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--input-border-focus);
  box-shadow:0 0 0 3px var(--green-100);
}
.textarea{min-height:150px;resize:vertical;padding-top:var(--space-4);}
/* Steht derzeit in keinem Formular — das Auswahlfeld „Worum geht es?“ wurde
   am 5. September 2026 entfernt. Die Regel bleibt: Ein Auswahlfeld ist ein
   Grundbaustein des Formularsatzes, und ohne sie sähe das nächste aus wie
   vom Betriebssystem gemalt. */
.select{
  appearance:none;padding-right:var(--space-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A5A5A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
}
.radio-group{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.radio-card{
  flex:1 1 180px;position:relative;display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4);min-height:60px;
  border:1px solid var(--color-border-strong);border-radius:var(--input-radius);
  cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);
}
.radio-card:hover{border-color:var(--ink-400);}
.radio-card input{position:absolute;opacity:0;width:0;height:0;}
.radio-card__dot{
  flex:none;width:20px;height:20px;margin-top:1px;border-radius:var(--radius-pill);
  border:1.5px solid var(--color-border-strong);background:var(--white);
  display:grid;place-items:center;transition:border-color var(--dur-fast);
}
.radio-card__dot::after{
  content:"";width:10px;height:10px;border-radius:var(--radius-pill);
  background:var(--color-brand);transform:scale(0);
  transition:transform var(--dur-fast) var(--ease-out);
}
.radio-card input:checked ~ .radio-card__dot{border-color:var(--color-brand);}
.radio-card input:checked ~ .radio-card__dot::after{transform:scale(1);}
.radio-card:has(input:checked){border-color:var(--color-brand);background:var(--color-bg-brand-soft);}
.radio-card input:focus-visible ~ .radio-card__dot{outline:2px solid var(--color-focus);outline-offset:2px;}
.radio-card__label{font-size:var(--fs-15);font-weight:600;line-height:1.3;}
.radio-card__desc{font-size:var(--fs-13);color:var(--color-text-muted);margin-top:2px;}

.checkbox{display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer;}
.checkbox input{position:absolute;opacity:0;width:0;height:0;}
.checkbox__box{
  flex:none;width:20px;height:20px;margin-top:2px;border-radius:var(--radius-xs);
  border:1.5px solid var(--color-border-strong);background:var(--white);
  display:grid;place-items:center;transition:all var(--dur-fast);
}
.checkbox__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:all var(--dur-fast);}
.checkbox input:checked ~ .checkbox__box{background:var(--color-brand);border-color:var(--color-brand);}
.checkbox input:checked ~ .checkbox__box svg{opacity:1;transform:scale(1);}
.checkbox input:focus-visible ~ .checkbox__box{outline:2px solid var(--color-focus);outline-offset:2px;}
.checkbox__text{font-size:var(--fs-14);color:var(--color-text-muted);line-height:1.5;}
.checkbox__text a{color:var(--green-700);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.checkbox__text a:hover,.checkbox__text a:focus-visible{color:var(--color-accent);}

.form-status{
  display:none;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-sm);
  background:var(--color-bg-brand-soft);border:1px solid var(--green-200);
  font-size:var(--fs-15);color:var(--green-800);
}
.form-status.is-visible{display:flex;}
.form-status svg{width:20px;height:20px;flex:none;color:var(--color-brand);}

/* Mengen-Auswahl */
.qty{
  display:inline-flex;align-items:center;
  border:1px solid var(--color-border-strong);border-radius:var(--input-radius);
  height:var(--input-height);overflow:hidden;
}
.qty button{
  width:46px;height:100%;display:grid;place-items:center;
  color:var(--color-text-muted);transition:background var(--dur-fast),color var(--dur-fast);
}
.qty button:hover{background:var(--ink-50);color:var(--color-text);}
.qty input{
  width:48px;height:100%;text-align:center;border:0;
  font-size:var(--fs-16);font-weight:600;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty input:focus{outline:none;}

/* Varianten (Gewichtsklassen) */
.variants{display:flex;flex-direction:column;gap:var(--space-3);}
.variant{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);min-height:64px;
  border:1px solid var(--color-border-strong);border-radius:var(--input-radius);
  cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast);
}
.variant:hover{border-color:var(--ink-400);}
.variant input{position:absolute;opacity:0;width:0;height:0;}
.variant:has(input:checked){border-color:var(--color-brand);background:var(--color-bg-brand-soft);}
.variant input:focus-visible ~ *{outline:none;}
.variant:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px;}
.variant__name{font-size:var(--fs-15);font-weight:600;}
.variant__meta{font-size:var(--fs-13);color:var(--color-text-muted);margin-top:1px;}
.variant__price{font-size:var(--fs-15);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}

/* --------------------------------------------------------------------------
   BLOG  →  sections/blog-grid.liquid
   -------------------------------------------------------------------------- */
/* Beitragskachel als echte Karte: eigener Grund, Kontur, Rundung. Vorher
   standen Bild und Text ohne Rahmen im Seitenhintergrund — bei drei
   Kacheln nebeneinander fehlte damit jede Kante, die die eine von der
   nächsten trennt. Das Bild sitzt bündig an der Oberkante, der Text liegt
   in der Polsterung darunter. */
.post-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.post-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--color-border);
}
/* Die Polsterung gilt für die ganze Karte; das Bild zieht sich mit einem
   negativen Rand wieder an die drei Kanten heran. Das ist stabiler, als
   jedem Textelement einzeln einen Rand zu geben — neue Elemente in der
   Kachel sitzen automatisch richtig. */
.post-card{padding:var(--space-5);gap:var(--space-4);}
.post-card > .media{
  margin:calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  border-radius:0;
}

.post-card__badges{display:flex;flex-wrap:wrap;gap:6px;}
/* Badges über dem Bild statt darunter: das macht aus der Kachel ein Bild
   mit Etikett und spart eine Textzeile. Gilt nur, wenn sie im Bildrahmen
   stehen — im hervorgehobenen Beitrag bleiben sie im Textfluss. */
.post-card .media > .post-card__badges{
  position:absolute;z-index:2;
  top:var(--space-3);left:var(--space-3);right:var(--space-3);
}
/* Der Umriss-Badge hat von Haus aus einen durchsichtigen Grund. Auf einem
   Foto verschwindet er damit — hier bekommt er eine deckende Fläche. */
.post-card .media > .post-card__badges .badge--outline{
  background:rgba(255,255,255,.93);border-color:transparent;color:var(--color-text);
}
.post-card__meta{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-13);color:var(--color-text-faint);
}
.post-card__meta span{display:inline-flex;align-items:center;gap:6px;}
.post-card__title{font-size:var(--fs-20);font-weight:600;letter-spacing:-.018em;line-height:1.3;}
.post-card__title a::after{content:"";position:absolute;inset:0;}
.post-card:hover .post-card__title{color:var(--color-brand);}
.post-card__excerpt{font-size:var(--fs-15);color:var(--color-text-muted);line-height:1.6;}

.post-feature{
  display:grid;gap:var(--space-8);align-items:center;
  padding:var(--space-6);background:var(--color-bg-subtle);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);
}
@media (min-width:900px){
  .post-feature{grid-template-columns:1.1fr .9fr;gap:var(--space-12);padding:var(--space-8);}
}
.post-feature__text{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;}

/* Sichtbarer Hinweis, dass hinter jeder Kachel eine eigene Seite steckt. Kein
   Link, sondern ein span: die Überschrift legt mit ihrem ::after bereits eine
   Fläche über die ganze Kachel. Ein zweiter Link darunter wäre nicht klickbar
   und für die Tastatur nur ein doppelter Weg zum selben Ziel. */
.post-card__more{
  display:inline-flex;align-items:center;gap:var(--space-2);margin-top:auto;
  padding-top:var(--space-1);
  font-size:var(--fs-14);font-weight:600;color:var(--color-brand);
}
.post-card__more svg{
  width:14px;height:14px;
  transition:transform var(--dur-base) var(--ease-out);
}
.post-card:hover .post-card__more svg{transform:translateX(4px);}
.page-hero--invert .post-card__meta{color:rgba(255,255,255,.62);}

/* Beitragsseite → templates/article.json
   Eine Spalte, mehr braucht ein Beitrag nicht: Bild, Titel, Textbereich,
   Galerie. 720px, weil Fließtext ab etwa 75 Zeichen je Zeile schwerer zu
   lesen ist — bei 18px Schriftgröße liegt die Spalte damit gut im Rahmen. */
.article-page{
  max-width:720px;margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--space-6);
}
.article-page h1{margin-top:calc(var(--space-2) * -1);}

/* Der Textbereich. Alles darin kann später aus einem Rich-Text-Feld kommen —
   deshalb bewusst nur Elemente, die ein Editor auch wirklich erzeugt:
   Überschriften, Absätze, Listen, fett, unterstrichen, Links. */
.article{display:flex;flex-direction:column;gap:var(--space-5);}
.article h2{
  font-size:var(--fs-24);font-weight:600;letter-spacing:-.015em;line-height:1.3;
  margin-top:var(--space-6);
}
.article h2:first-child{margin-top:0;}
.article p{font-size:var(--fs-18);line-height:1.7;color:var(--color-text-secondary);}
.article ul{display:flex;flex-direction:column;gap:var(--space-2);}
.article ol{display:flex;flex-direction:column;gap:var(--space-3);counter-reset:schritt;}
.article ol li{counter-increment:schritt;padding-left:var(--space-8);}
/* Ziffer statt Punkt. Zahlen tabellarisch, damit ein- und zweistellige
   Schritte auf derselben Achse stehen. */
.article ol li::before{
  content:counter(schritt);
  left:0;top:.15em;width:26px;height:26px;border-radius:var(--radius-pill);
  background:var(--color-bg-brand-soft);color:var(--green-800);
  display:grid;place-items:center;
  font-size:var(--fs-13);font-weight:600;font-variant-numeric:tabular-nums;
}
.article li{
  position:relative;padding-left:var(--space-6);
  font-size:var(--fs-18);line-height:1.7;color:var(--color-text-secondary);
}
.article li::before{
  content:"";position:absolute;left:6px;top:.75em;
  width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-brand);
}
.article h3{
  font-size:var(--fs-20);font-weight:600;letter-spacing:-.01em;line-height:1.35;
  margin-top:var(--space-3);
}
.article strong{color:var(--color-text);font-weight:600;}
.article u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.article a{color:var(--color-brand);text-decoration:underline;text-underline-offset:3px;}
.article a:hover{color:var(--color-accent);}

/* Galerie am Fuß des Beitrags. Vorerst fest im Markup; in Shopify wird daraus
   ein Galerie-Block, den die Redaktion je Beitrag selbst befüllt. */
.article-gallery{display:flex;flex-direction:column;gap:var(--space-4);}
.article-gallery__grid{
  display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
/* Rezeptbeitrag: der Zutatenkasten. Zwei Spalten, weil die Zeilen kurz
   sind — einspaltig über die ganze Textbreite stünde rechts nur Leerraum.
   Unter 560px stapeln sie sich. */
.recipe-facts{
  display:grid;gap:var(--space-6);
  padding:var(--space-6);
  background:var(--color-bg-subtle);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--radius-lg);
}
@media (min-width:560px){
  .recipe-facts{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-8);}
}
.recipe-facts__col{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;}
.recipe-facts__col .btn{width:100%;}
.recipe-list{display:flex;flex-direction:column;gap:var(--space-2);width:100%;}
.recipe-list li{
  padding-block:var(--space-2);
  border-bottom:1px solid var(--color-border-subtle);
  font-size:var(--fs-15);color:var(--color-text-secondary);
}
.recipe-list li:last-child{border-bottom:0;}
.recipe-list strong{color:var(--color-text);font-variant-numeric:tabular-nums;}

.article-foot{
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;
  margin-top:var(--space-10);padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   PARTNER-LEISTE
   -------------------------------------------------------------------------- */
.partners{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--color-border-subtle);
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;
}
.partner{
  display:grid;place-items:center;gap:var(--space-2);
  min-height:112px;padding:var(--space-5);background:var(--white);text-align:center;
}
.partner__name{font-size:var(--fs-15);font-weight:600;color:var(--color-text-secondary);}
.partner__type{font-size:var(--fs-12);color:var(--color-text-faint);letter-spacing:.05em;text-transform:uppercase;}

/* --------------------------------------------------------------------------
   GALERIE
   -------------------------------------------------------------------------- */
.gallery{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,1fr);}
@media (min-width:900px){
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;}
  .gallery__item--wide{grid-column:span 2;}
  .gallery__item--tall{grid-row:span 2;}
  .gallery__item{height:100%;}
  /* `width:100%` ist nötig, nicht kosmetisch: mit nur `height:100%` bleibt die
     Breite auto, dann gewinnt das aspect-ratio der .media-Klasse und die Kachel
     wird schmaler als ihre Rasterzelle (ein media--3x2 füllte in der 2/3-Zelle
     nur 270 von 379 px). Sind beide Maße gesetzt, greift aspect-ratio nicht. */
  .gallery__item .media{height:100%;width:100%;}
}

/* Versetzte Variante: links ein großes Bild über beide Reihen, rechts je Reihe
   ein 2/3- und ein 1/3-Feld — in der zweiten Reihe gespiegelt. Der Versatz
   bricht die durchgehende Kante in der Mitte auf, ohne dass die Bilder
   unterschiedlich hoch werden.
   Sechs Spalten statt vier, weil sich die rechte Hälfte sonst nicht dritteln
   lässt: das große Bild behält mit `span 3` exakt seine bisherige Breite.
   In Shopify wird daraus ein Block-Setting je Bild (Breite 1/3 oder 2/3).

   Schmale Bildschirme bekommen dasselbe Muster, nur gestapelt: das große Bild
   über die volle Breite, darunter die vier kleinen Felder in derselben
   2/3-1/3-Anordnung wie rechts auf dem Desktop. Deshalb stehen die Drittel-
   Spalten hier außerhalb der Media-Query — nur die Spaltenzahl ändert sich.
   Die Zeilenhöhe kann unten nicht aus `grid-auto-rows` kommen, feste Pixel
   würden mit der Breite nicht mitwachsen. Sie ergibt sich stattdessen aus dem
   quadratischen 1/3-Feld; das 2/3-Feld daneben zieht Grid auf dieselbe Höhe. */
/* `minmax(0,1fr)` statt `1fr`: die Mindestbreite eines Rasterfelds ist sonst die
   Eigenbreite seines Bildes. Weil in der mittleren Spalte kein einzelnes Feld
   sitzt — nur die beiden übergreifenden 2/3-Felder —, zogen die Außenspalten
   alles an sich und die Mitte fiel auf 18 px zusammen. */
.gallery--stagger{grid-template-columns:repeat(3,minmax(0,1fr));}
.gallery--stagger .gallery__item--wide{grid-column:span 3;}
.gallery--stagger .gallery__item--two-thirds{grid-column:span 2;position:relative;}
.gallery--stagger .gallery__item--third{grid-column:span 1;aspect-ratio:1;}
.gallery--stagger .gallery__item--third .media{height:100%;width:100%;}
/* Das quadratische 1/3-Feld gibt die Zeilenhöhe vor. Das 2/3-Feld daneben darf
   deshalb keine eigene Höhe mitbringen — sonst gewinnt dessen Bildformat (3:2
   ergäbe 145 statt 103 px) und die beiden stehen unterschiedlich hoch. Ein
   absolut liegender Medienrahmen trägt nichts zur Zeilenhöhe bei und füllt die
   Zelle trotzdem aus. Bedingung: in jeder Zeile steht ein 1/3-Feld. */
.gallery--stagger .gallery__item--two-thirds .media{
  position:absolute;inset:0;width:100%;height:100%;
}
@media (min-width:900px){
  .gallery--stagger{grid-template-columns:repeat(6,minmax(0,1fr));}
  /* Ab hier gibt wieder grid-auto-rows die Höhe vor. */
  .gallery--stagger .gallery__item--third{aspect-ratio:auto;}
}

/* --------------------------------------------------------------------------
   FOOTER  →  sections/footer.liquid
   -------------------------------------------------------------------------- */
.footer{background:var(--color-bg-invert-deep);color:var(--color-text-invert);padding-block:var(--space-16) var(--space-8);}
.footer__grid{display:grid;gap:var(--space-10);}
@media (min-width:760px){ .footer__grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1060px){ .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--space-12);} }
.footer__logo{background:var(--white);border-radius:var(--radius-sm);padding:10px 14px;display:inline-block;}
.footer__logo img{height:28px;width:auto;}
.footer__title{
  font-size:var(--fs-13);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:var(--space-4);
}
.footer__links{display:flex;flex-direction:column;gap:var(--space-1);}
.footer__links a{
  display:inline-flex;min-height:34px;align-items:center;
  font-size:var(--fs-15);color:rgba(255,255,255,.82);
  transition:color var(--dur-fast);
}
.footer__links a:hover{color:#fff;}
.footer__text{font-size:var(--fs-15);color:rgba(255,255,255,.72);line-height:1.65;}
.footer__bottom{
  margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);
  align-items:center;justify-content:space-between;
  font-size:var(--fs-13);color:rgba(255,255,255,.55);
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--space-5);}
.footer__legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* --------------------------------------------------------------------------
   SEITEN-ROUTING (nur Prototyp — in Shopify sind das echte Templates)
   -------------------------------------------------------------------------- */
.page{display:none;}
.page.is-active{display:block;}

/* Produktdetail- und Kontakt-Layout */
.pdp-grid{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:start;}
@media (min-width:920px){
  .pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-12);}
}

.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:start;}
@media (min-width:1000px){
  .contact-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);}
}

/* --------------------------------------------------------------------------
   SCROLL-REVEAL
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);}
.reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out);
}
.reveal:nth-child(2){transition-delay:60ms;}
.reveal:nth-child(3){transition-delay:120ms;}
.reveal:nth-child(4){transition-delay:180ms;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none;}
}