@charset "UTF-8";
/* ==========================================================================
   GoTiger GmbH, Berlin - Foodservice Asien
   Stylesheet. Handgeschrieben, kein Framework, kein Build noetig.

   Farbsystem: ausschliesslich die im Katalog gemessenen Marken-Werte.
   Einzige dokumentierte Ausnahme: --vegan (Punkt im VEGAN-Badge). Begruendung
   steht direkt am Token.
   Shape-Lock: border-radius ist ueberall 0. Die Marke ist kantig.
   Theme: feste Markenkomposition. Die Seite wechselt bewusst zwischen dunklen
   Foto-Sektionen (Aubergine) und hellen Arbeits-Sektionen (Weiss). Das ist der
   Rhythmus der Seite, kein Theme-Bruch, und deshalb gibt es keinen
   prefers-color-scheme-Gegenentwurf.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Marke */
  --gt-red:        #FF291A;   /* Logo-Rot. Einziger Akzent. */
  --gt-red-deep:   #D6252B;   /* Druck-Rot, Hover- und Press-States */

  /* Nacht, der dunkle Markenraum: Schwarzgrau wie im Auftritt auf
     gotigerapp.com, statt des frueheren Aubergine aus dem Katalog. */
  --nacht-900:     #141413;
  --nacht-800:     #1D1D1B;
  --nacht-700:     #262624;
  --nacht-600:     #3A3A37;

  /* Neutral */
  --ink:           #1D1D1B;
  --gray-600:      #6E6E6E;
  --gray-500:      #8C8C8C;   /* nur dekorativ oder >= 24px */
  --gray-200:      #D8D8D8;
  --gray-100:      #EFEFEF;
  --paper:         #FFFFFF;

  /* Einzige Farbe ausserhalb der Katalogpalette. Aus der eigenen
     Edamame-Fotografie abgenommen und auf 4.9:1 gegen Weiss abgedunkelt.
     Ausschliesslich als 6px-Punkt im VEGAN-Badge, weil ein Vegan-Marker im
     Lebensmittelgrosshandel gruen sein muss. */
  --vegan:         #5F7A15;

  /* RGB-Tripel fuer Alpha-Verwendungen. Keine neuen Farben, nur Transparenz. */
  --nacht-900-rgb: 20 20 19;
  --nacht-800-rgb: 29 29 27;
  --nacht-700-rgb: 38 38 36;
  --nacht-600-rgb: 58 58 55;
  --gt-red-rgb:    255 41 26;
  --gt-red-deep-rgb: 214 37 43;
  --ink-rgb:       29 29 27;
  --paper-rgb:     255 255 255;

  /* Schrift */
  --font-display: "Oswald", "Archivo Narrow", "Helvetica Neue Condensed",
                  "Arial Narrow", Impact, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial,
                  system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
                  monospace;

  /* Typo-Skala */
  --fs-micro: 0.6875rem;  /* 11px */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  0.9375rem;  /* 15px */
  --fs-md:    1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */

  /* 8px-Raster */
  --s1:  8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5:  40px;  --s6: 48px;  --s7: 56px;  --s8: 64px;
  --s10: 80px;  --s12: 96px; --s14: 112px; --s16: 128px;

  --wrap:      1360px;
  --wrap-text: 68ch;
  --radius:    0;             /* Shape-Lock */
  --hairline:  1px;
  --header-h:  84px;
  --header-h-min: 64px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  /* Bewusst KEIN overflow auf der Wurzel: das legt die View-Timeline des
     Kamerafluges still, weil der Scroll-Container dann nicht mehr aufgeloest
     wird. Geklippt wird stattdessen in der Buehne selbst. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s3));
}

body {
  margin: 0;
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* die Seite selbst scrollt nie horizontal */
}

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

img { height: auto; border: 0; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--radius);
}

table { border-collapse: collapse; width: 100%; }

/* Fokus: rot, auf Aubergine wie auf Weiss gut sichtbar. */
:focus-visible {
  outline: 2px solid var(--gt-red);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(var(--gt-red-rgb) / 0.28);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 200;
  background: var(--gt-red); color: var(--ink);
  padding: var(--s2) var(--s3);
  font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-decoration: none;
}
.skip-link:focus { top: var(--s2); }

/* ---------- 3. Typo-Primitive -------------------------------------------- */

/* Das Marken-Signature-Element: gesperrte Versalien.
   Maximal eine gesperrte Zeile pro Sektion. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  margin-right: -0.42em;     /* letzten Buchstabenabstand optisch ausgleichen */
  display: block;
}
.eyebrow--dark  { color: var(--gray-200); }
.eyebrow--light { color: var(--gray-600); }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;          /* Ü, Ä, Ö auf Versalien brauchen den Platz */
  letter-spacing: 0.005em;
  text-wrap: balance;
  hyphens: manual;
  color: var(--gt-red);
}
.display--hero    { font-size: clamp(2.4rem, 6.2vw, 6rem); line-height: 1.12; }
.display--section { font-size: clamp(2rem, 4.2vw, 3.5rem); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  max-width: 46ch;
}

.prose { max-width: var(--wrap-text); }
.prose p + p { margin-top: var(--s2); }

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* ---------- 4. Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.section { padding-block: clamp(var(--s10), 9vw, var(--s16)); }

/* Dunkle Sektionen sind Rot: Druck-Rot als Flaeche, weisser Text.
   Innerhalb roter Flaechen werden die Nacht-Toene per Scope zu weissen
   Hairlines beziehungsweise roten Flaechen, damit jede Regel mitzieht. */
.section--dark,
.section--deep {
  background: var(--gt-red-deep);
  color: var(--paper);
  --nacht-600: rgb(var(--paper-rgb) / 0.36);
  --nacht-700: var(--gt-red);
  --nacht-800: var(--gt-red-deep);
  --nacht-900: var(--gt-red-deep);
  --gray-200: rgb(var(--paper-rgb) / 0.88);
  --gray-600: rgb(var(--paper-rgb) / 0.88);
  --gt-red: var(--paper);
}
.section--dark .display,
.section--deep .display { color: var(--paper); }

/* Schraege Oberkante als Uebergang aus der hellen Flaeche davor. */
.section--dark,
.section--deep {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(var(--s10), 9vw, var(--s16)) + 2.2vw);
}
.section--light { background: var(--paper); color: var(--ink); }

.section--dark .lead,
.section--deep .lead,
.section--dark .prose p,
.section--deep .prose p { color: var(--gray-200); }

.section__head { margin-bottom: var(--s7); }
.section__head .eyebrow { margin-bottom: var(--s3); }
.display + .lead,
.display + .prose { margin-top: var(--s3); }

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s1);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  text-decoration: none;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primaer: 19px/600 versal. Damit gilt Weiss auf Rot als Grossschrift
   (3.8:1, WCAG AA fuer >= 18.66px bold). Hover geht auf #D6252B: 5.1:1. */
.btn--primary {
  font-size: 1.1875rem;              /* 19px */
  line-height: 1;
  padding: var(--s2) var(--s4);
  background: var(--gt-red);
  color: var(--paper);
}
.btn--primary:hover { background: var(--gt-red-deep); }

/* Sekundaer auf Dunkel: Weiss auf Aubergine, Hover fuellt nacht-600 (11:1). */
.btn--ghost {
  font-size: 1.1875rem;
  line-height: 1;
  padding: var(--s2) var(--s4);
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--nacht-600); border-color: var(--nacht-600); }

/* Kompakt fuer Header und Inline-Aktionen. Rot bleibt hier Linie, nicht
   Flaeche, damit kleine Labels nie auf Rot stehen muessen. */
/* Primaerknopf auf roten Flaechen: weiss gefuellt, rote Schrift. */
.section--dark .btn--primary,
.section--deep .btn--primary,
.marken .btn--primary {
  background: var(--paper);
  color: var(--gt-red-deep);
  border-color: var(--paper);
}
.section--dark .btn--primary:hover,
.section--deep .btn--primary:hover {
  background: rgb(var(--paper-rgb) / 0.9);
  color: var(--gt-red-deep);
}

/* Auf dunklem Grund kehrt der Geisterknopf um. */
.section--dark .btn--ghost,
.section--deep .btn--ghost,
.ctaband .btn--ghost {
  color: var(--paper);
  border-color: var(--nacht-600);
}

.btn--compact {
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 13px var(--s3);
  background: transparent;
  color: var(--gt-red);
  border-color: var(--gt-red);
}
.btn--compact:hover { background: var(--gt-red); color: var(--paper); border-color: var(--gt-red); }

.btn--onlight {
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 13px var(--s3);
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--onlight:hover { background: var(--ink); color: var(--paper); }

/* ---------- 6. Header ---------------------------------------------------- */

/* Der Header startet ueber dem Hero transparent und wird beim Scrollen zur
   soliden Leiste; gleichzeitig zieht er sich zusammen und die Wortmarke legt
   ihre Unterzeile ab. Alles scroll-getrieben in CSS, nicht per Skript. Ohne
   Unterstuetzung fuer animation-timeline bleibt er dauerhaft solide - nie
   unsichtbar weiss auf weiss. */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--paper);
  box-shadow: 0 1px 0 var(--gray-200);
  opacity: 1;
}
/* Rote Regel am unteren Rand als Lesefortschritt. Rot bleibt Linie. */
.header::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gt-red);
  transform: scaleX(0);
  transform-origin: left center;
}
@keyframes gt-header      { from { opacity: 0; } to { opacity: 1; } }
@keyframes gt-progress    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gt-header-h    { to { height: var(--header-h-min); } }
@keyframes gt-header-sub  { to { opacity: 0; transform: translateY(-8px); } }
@keyframes gt-header-mark { to { transform: scale(0.86); } }

@supports (animation-timeline: scroll()) {
  .header::after {
    animation: gt-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .header {
      animation: gt-header-h linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 200px;
    }
    .header__sub {
      animation: gt-header-sub linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 120px;
    }
    .header__logo img {
      animation: gt-header-mark linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 200px;
    }
  }
}
/* Offene Mobil-Navigation braucht die Flaeche in jedem Fall. */
.header.is-open::before { animation: none; opacity: 1; }

.header__inner, .burger, .nav, .header__logo, .header__cta { position: relative; }

.header__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--s3);
  display: flex; align-items: center; gap: var(--s4);
}

/* Wortmarke plus gesperrte Unterzeile - der Logoblock aus dem Katalog. */
.header__logo {
  flex: none; line-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
}
.header__logo img { width: 132px; height: 42px; object-fit: contain; transform-origin: left center; }
.header__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.44em;
  margin-right: -0.44em;
  color: var(--gray-600);
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s4); }
.nav__link {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s1);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gt-red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta {
  flex: none; margin-left: var(--s2);
  padding-left: var(--s4);
  border-left: var(--hairline) solid var(--gray-200);
}
.nav__cta { display: none; }        /* nur in der Mobil-Overlay-Navigation */

.burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  background: transparent;
  border: var(--hairline) solid var(--gray-200);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute; left: 13px;
  width: 20px; height: 2px;
  background: var(--ink);
  content: "";
  transition: transform 0.25s var(--ease), opacity 0.15s linear;
}
.burger span { top: 23px; }
.burger span::before { left: 0; top: -6px; }
.burger span::after  { left: 0; top: 6px; }
.header.is-open .burger span { background: transparent; }
.header.is-open .burger span::before { transform: translateY(6px) rotate(45deg); }
.header.is-open .burger span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 7. Hero ------------------------------------------------------ */

/* Das Hero-Bild ist ein Komposit aus dem Katalogfoto: die Aubergine des Fotos
   wurde zeilenweise nach links fortgesetzt (siehe README). Deshalb kein
   CSS-Verlauf und keine Maske - die Flaeche IST das Foto, der Uebergang ist
   rechnerisch nahtlos. Aufbau wie der Katalogtitel: Zeile oben links, Essen
   unten rechts, dazwischen Aubergine. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100dvh, 940px);
  display: flex;
  background: var(--paper);
  color: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 55%; }

/* Flaches Sicherheitsnetz fuer die Typo, falls ein extremer Beschnitt die
   Schieferplatte nach links schiebt. Die Aubergine bleibt Aubergine. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
              rgb(var(--paper-rgb) / 0.96) 0%,
              rgb(var(--paper-rgb) / 0.82) 36%,
              rgb(var(--paper-rgb) / 0) 62%);
}

.hero__inner {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s8);
  width: 100%;
  padding-block: calc(var(--header-h) + var(--s7)) clamp(var(--s8), 7vh, var(--s12));
}
.hero .display--hero { margin-top: var(--s3); }
.hero .ln {
  display: block;
  overflow: hidden;
  padding-top: 0.16em;      /* Kopfraum, sonst schneidet der Clip die Umlaute */
  margin-top: -0.16em;
}
.hero .ln > i { display: block; font-style: normal; }
.hero .lead { max-width: 42ch; color: var(--gray-600); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* Bewegung im Hero: die drei Zeilen fahren beim Laden nacheinander hoch.

   Bewusst als Transition mit sichtbarem Ruhezustand und nur, wenn der Tab
   beim Laden sichtbar ist: liegt er im Hintergrund, steht die
   Dokument-Zeitleiste still und zeitbasierte Animationen bleiben auf dem
   Anfangsbild stehen. Wer die Seite per Mittelklick oeffnet, saehe sonst
   einen Hero ganz ohne Text. */
.hero .eyebrow--dark { color: var(--gray-600); }
.hero .ln > i,
.hero .eyebrow,
.hero .lead,
.hero__actions { opacity: 1; transform: none; }

.gt-anim .hero .ln > i { transform: translateY(108%); }
.gt-anim .hero .eyebrow,
.gt-anim .hero .lead,
.gt-anim .hero__actions { opacity: 0; transform: translateY(14px); }

.gt-ready .hero .ln > i { transform: none; transition: transform 0.85s var(--ease); }
.gt-ready .hero .eyebrow,
.gt-ready .hero .lead,
.gt-ready .hero__actions {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.gt-ready .hero .eyebrow             { transition-delay: 0.02s; }
.gt-ready .hero .ln:nth-child(1) > i { transition-delay: 0.10s; }
.gt-ready .hero .ln:nth-child(2) > i { transition-delay: 0.19s; }
.gt-ready .hero .ln:nth-child(3) > i { transition-delay: 0.28s; }
.gt-ready .hero .lead                { transition-delay: 0.42s; }
.gt-ready .hero__actions             { transition-delay: 0.52s; }

@keyframes gt-hero-bg { to { transform: scale(1.07); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero__bg {
      animation: gt-hero-bg linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 100vh;
    }
  }
}

/* ---------- 8b. Eigene Marken -------------------------------------------- */

/* Der Beleg unter den Kennzahlen. Kein Logo-Streifen: die Markennamen stehen
   in der Displayschrift, getrennt durch rote Regel-Linien. Rot bleibt damit
   Linie und wird nicht Flaeche. */
.marken {
  background: var(--gt-red-deep);
  padding-block: var(--s6);
  color: var(--paper);
  --nacht-600: rgb(var(--paper-rgb) / 0.36);
  --gray-200: rgb(var(--paper-rgb) / 0.88);
  --gt-red: var(--paper);
}
.marken__inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--s3) clamp(var(--s5), 5vw, var(--s10));
  align-items: center;
}
.marken__label {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--gray-200);
}
.marken__label span { display: inline-block; margin-right: -0.42em; }

.marken__liste { display: flex; flex-wrap: wrap; align-items: center; }
.marken__liste li + li {
  margin-left: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid var(--gt-red);
}
.marken__liste a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 2rem);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.marken__liste a:hover { color: var(--gt-red); }

.marken__text { font-size: var(--fs-base); color: var(--gray-200); max-width: 52ch; }
.marken__text a { color: var(--paper); text-decoration-color: var(--gt-red); }
.marken__text a:hover { color: var(--gt-red); }

@media (max-width: 900px) {
  .marken__inner { grid-template-columns: minmax(0, 1fr); }
  .marken__liste li + li { margin-left: var(--s2); padding-left: var(--s2); }
  .marken__liste a { font-size: var(--fs-lg); }
}
/* Auf schmalen Viewports untereinander: beim Umbruch haenge die Trennlinie
   sonst verwaist vor dem letzten Namen. Gestapelt wird sie zum Anschlag. */
@media (max-width: 640px) {
  .marken__liste { flex-direction: column; align-items: flex-start; gap: 8px; }
  .marken__liste li,
  .marken__liste li + li {
    margin-left: 0;
    padding-left: var(--s2);
    border-left: 2px solid var(--gt-red);
  }
}

/* ---------- 9. Kategorien (hell) ----------------------------------------- */

.cats {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1.12fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 660px;
}
.cat {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--gray-100);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
  isolation: isolate;
}
.cat--lead { grid-row: span 2; }

.cat__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.cat--object .cat__img {
  object-fit: contain;
  width: 62%; height: 62%;
  inset: auto auto 16%  50%;
  transform: translateX(-50%);
}

.cat__veil {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
              rgb(var(--paper-rgb) / 0.94) 0%,
              rgb(var(--paper-rgb) / 0.55) 26%,
              rgb(var(--paper-rgb) / 0) 52%);
  transition: opacity 0.4s var(--ease);
}
.cat--object .cat__veil {
  background: linear-gradient(0deg,
              rgb(var(--paper-rgb) / 0.9) 0%,
              rgb(var(--paper-rgb) / 0.4) 30%,
              rgb(var(--paper-rgb) / 0) 55%);
}
.cat:hover .cat__veil { opacity: 0.74; }

.cat__body { position: relative; padding: var(--s4); width: 100%; }
.cat__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  color: var(--ink);
  display: block;
}
.cat--lead .cat__label { font-size: var(--fs-md); }
.cat__meta {
  display: flex; align-items: baseline; gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--gray-600);
}
.cat__count { font-size: var(--fs-xs); letter-spacing: 0.08em; white-space: nowrap; }
.cat__sub { border-left: var(--hairline) solid var(--gray-200); padding-left: var(--s2); }

/* ---------- 10. Eigenproduktion (dunkel) --------------------------------- */

.produktion {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 5vw, var(--s12));
  align-items: stretch;
}
.produktion > div:first-child { display: flex; flex-direction: column; }

.figure70 {
  display: flex; align-items: baseline; gap: var(--s3);
  margin: var(--s6) 0 var(--s5);
}
.figure70__sign { margin-left: 0.06em; }
.figure70__clip {
  display: block;
  overflow: hidden;
  padding-top: 0.1em;
  margin-top: -0.1em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.figure70__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 11rem);
  line-height: 0.78;
  color: var(--gt-red);       /* einzige grossflaechige Rot-Setzung der Seite */
  letter-spacing: -0.02em;
}
.figure70__cap {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--paper);
  border-left: var(--hairline) solid var(--nacht-600);
  padding-left: var(--s2);
  max-width: 9ch;
  line-height: 1.2;
}
.herkunft {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--nacht-600);
  font-size: var(--fs-sm);
  color: var(--gray-200);
}
.herkunft strong { color: var(--paper); font-weight: 600; }

/* Weisse Produkt-Karten auf Aubergine. Packshots stehen nie auf Dunkel,
   deshalb tragen die Karten die weisse Flaeche mit. Entspricht dem
   Katalog-Aufbau: dunkle Bildspalte links, weisse Artikelspalte rechts. */
.speccards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.speccard {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s3);
  display: flex; flex-direction: column;
}
.speccard__shot {
  align-self: center;
  width: 84px; height: 112px;
  object-fit: contain;
  margin-bottom: var(--s2);
}
.speccard__nr {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.speccard__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 6px 0 var(--s2);
}
.speccard__fill {
  font-size: var(--fs-sm);
  color: var(--gray-600);
  margin-bottom: var(--s2);
}
.speccard__data {
  margin-top: auto;
  padding-top: var(--s2);
  border-top: var(--hairline) solid var(--gray-200);
  font-size: var(--fs-sm);
}
.speccard__data dt { color: var(--gray-600); }
.speccard__data dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink);
  margin-bottom: 6px;
}
.speccard__data dd:last-child { margin-bottom: 0; }

/* ---------- 11. Badges --------------------------------------------------- */

/* Schwarze Strichzeichnung auf dunklem Grund umkehren, sonst bleibt vom
   Siegel nur ein Fleck. */
.section--dark .badge__seal,
.showcase .badge__seal,
.produktion .badge__seal { filter: invert(1); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border: var(--hairline) solid var(--gray-200);
  border-radius: var(--radius);
  padding: 4px 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
  white-space: nowrap;
}
.badge__dot {
  width: 6px; height: 6px;
  background: var(--vegan);
  flex: none;
}
.badge__seal { width: 14px; height: 14px; flex: none; }

/* ---------- 12. Zubereitung (hell) --------------------------------------- */

/* Drei gleich breite Textspalten sahen aus wie ein Platzhalter. Jetzt eine
   Liste im Format des Katalogregisters: der Weg gross links, die Anweisung
   daneben, rechts die Artikel, fuer die er gilt. Beim Ueberfahren kippt die
   ganze Zeile in die Aubergine. */
.wege { border-top: 2px solid var(--ink); counter-reset: weg; }
.weg {
  counter-increment: weg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr) minmax(0, 0.34fr);
  gap: clamp(var(--s3), 3vw, var(--s7));
  align-items: start;
  padding: var(--s5) var(--s3) var(--s5) var(--s3);
  border-bottom: var(--hairline) solid var(--gray-200);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
/* Roter Anschlag, faehrt beim Ueberfahren von oben ein. */
.weg::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--gt-red);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.35s var(--ease);
}
@media (hover: hover) {
  .weg:hover { background: var(--gt-red-deep); color: var(--paper); }
  .weg:hover::before { transform: scaleY(1); background: var(--paper); }
}

.weg__name h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
}
/* Der Platz fuer die Zubereitungszeit. Traegt bis zu deren Bestaetigung
   das Garergebnis. */
.timebadge {
  display: inline-block;
  margin: var(--s2) 0 0;
  border: var(--hairline) solid var(--gray-200);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.weg:hover .timebadge { border-color: rgb(var(--paper-rgb) / 0.5); color: var(--paper); }

.weg__text {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--gray-600);
  max-width: 44ch;
  transition: color 0.35s var(--ease);
}
.weg:hover .weg__text { color: var(--paper); }

.weg__caption {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  color: var(--gray-600);
  margin-bottom: var(--s2);
  transition: color 0.35s var(--ease);
}
.weg:hover .weg__caption { color: var(--paper); }
.weg__nrn { display: flex; flex-wrap: wrap; gap: 6px; }
.weg__nr {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border: var(--hairline) solid var(--gray-200);
  transition: border-color 0.35s var(--ease);
}
.weg:hover .weg__nr { border-color: rgb(var(--paper-rgb) / 0.5); }

/* ---------- 13. Yakitori (dunkel) ---------------------------------------- */

.showcase__media {
  position: relative;
  margin-top: var(--s7);
  max-height: 62vh;
  overflow: hidden;
}
.showcase__media img {
  width: 100%; height: 100%;
  max-height: 62vh;
  object-fit: cover;
  object-position: 50% 46%;
}
/* Das Bild setzt sich beim Vorbeiscrollen. Scroll-getrieben, damit es an
   jeder Position richtig steht. */
@keyframes gt-showcase { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .showcase__media img {
      animation: gt-showcase linear both;
      animation-range: entry 0% cover 48%;
      animation-timeline: view();
    }
  }
}
.showcase__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(0deg, rgb(var(--gt-red-deep-rgb) / 1) 0%, rgb(var(--gt-red-deep-rgb) / 0) 100%);
}

.artrows { margin-top: var(--s6); border-top: var(--hairline) solid var(--nacht-600); }
.artrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 0.85fr) auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: var(--hairline) solid var(--nacht-600);
}
.artrow__plate {
  background: var(--paper);
  width: 96px; height: 96px;
  display: grid; place-items: center;
  padding: 10px;
}
.artrow__plate img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.artrow__nr {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--gray-200);
  letter-spacing: 0.06em;
}
.artrow__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 1.05;
  margin-top: 4px;
}
.artrow__desc { font-size: var(--fs-sm); color: var(--gray-200); }
.artrow__data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--gray-200);
  text-align: right;
  white-space: nowrap;
}
.artrow .badge { border-color: var(--nacht-600); color: var(--paper); }
.artrow .badges { margin-top: var(--s1); }

/* ---------- 13b. Uebergangsband -------------------------------------------- */

/* Der Uebergang von der hellen Arbeitsflaeche in das dunkle Markenfeld.
   Die beiden freigestellten Motive sitzen auf der Kante, halb im Weiss, halb
   in der Aubergine, und fahren beim Eintreten einmal hoch. Beide Freisteller
   sind entfranzt, sonst zoege der weisse Studiosaum einen Halo auf Dunkel. */
.band {
  position: relative;
  background: var(--gt-red-deep);
  color: var(--paper);
  --nacht-600: rgb(var(--paper-rgb) / 0.36);
  --gray-200: rgb(var(--paper-rgb) / 0.88);
  --gt-red: var(--paper);
  text-align: center;
  padding-block: clamp(120px, 12vw, 190px) clamp(var(--s10), 8vw, var(--s14));
}
.band__zeile {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
}

/* Die Sektion darueber braucht Luft, damit die Motive nicht in den Inhalt
   ragen. */
.section--handoff { padding-bottom: clamp(160px, 15vw, 248px); }

.prop { position: absolute; top: 0; left: 50%; pointer-events: none; }
.prop--spiesse {
  width: clamp(190px, 24vw, 350px);
  margin-left: clamp(-560px, -40vw, -230px);
  transform: translateY(-54%);
}
.prop--edamame {
  width: clamp(112px, 14vw, 200px);
  margin-left: clamp(120px, 25vw, 360px);
  transform: translateY(-48%);
}
.prop__in { --rot: 0deg; transform: rotate(var(--rot)); }
.prop--spiesse .prop__in { --rot: -7deg; }
.prop--edamame .prop__in { --rot: 5deg; }

/* ---------- 14. Sortimentstabelle (hell) --------------------------------- */

.filterbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s4);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: var(--hairline) solid var(--gray-200);
}
.filtergroup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.filtergroup__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-600);
  margin-right: var(--s1);
}
.chip {
  border: var(--hairline) solid var(--gray-200);
  background: var(--paper);
  color: var(--ink);
  padding: 7px 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* overscroll-behavior verhindert, dass eine Wischbewegung in der Tabelle am
   Ende auf die Seite ueberspringt. Genau das fuehlt sich sonst an, als liesse
   sich die ganze Seite seitlich schieben. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.drow__badges { display: none; }
.tablehint {
  margin-bottom: var(--s2);
  font-size: var(--fs-sm);
  color: var(--gray-600);
}
.tablehint__scroll { display: none; }


/* Kein Zebra, keine gefuellte Kopfzeile. Die Tabelle sieht aus wie die
   Sortimentsseite im Katalog: schwere Regel unter dem Kopf, feine Linien
   zwischen den Zeilen, Artikelnummer als fetter Monospace-Anker. */
.sorttable { min-width: 860px; font-size: var(--fs-base); }
.sorttable caption { text-align: left; }

.sorttable thead th {
  color: var(--gray-600);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: left;
  padding: 0 var(--s2) var(--s2);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

.srow { transition: background-color 0.18s var(--ease); }
.srow > th,
.srow > td {
  padding: 0;
  border-bottom: var(--hairline) solid var(--gray-200);
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}
.srow > th > *,
.srow > td { padding: 13px var(--s2); }
.srow[hidden], .drow[hidden] { display: none; }

.srow:hover,
.srow.is-open { background: var(--gray-100); }
/* Roter Anschlag an der Zeilenkante. Als inset-Schatten, damit nichts
   springt. */
.srow:hover > th:first-child,
.srow.is-open > th:first-child { box-shadow: inset 3px 0 0 var(--gt-red); }

.srow__toggle {
  display: block; width: 100%;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}
.c-name { min-width: 24ch; font-size: var(--fs-md); }
.c-ve, .c-kt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--gray-600);
  white-space: nowrap;
}
.c-sign { width: 48px; }

/* Plus, das beim Aufklappen zum Minus wird. Zwei Balken, kein Icon-Set. */
.sign { position: relative; display: block; width: 13px; height: 13px; margin-left: auto; }
.sign::before, .sign::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 13px; height: 1px; background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.sign::after { transform: rotate(90deg); }
.srow.is-open .sign::after { transform: rotate(0deg); }

.drow__wrap { overflow: hidden; }
.drow > td { padding: 0; border-bottom: var(--hairline) solid var(--gray-200); background: var(--gray-100); }
.drow__inner {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) minmax(0, 0.5fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s3) var(--s2) var(--s4);
}
.drow__shot {
  background: var(--paper);
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  padding: var(--s1);
}
.drow__shot img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.drow__desc { font-size: var(--fs-base); color: var(--gray-600); max-width: 60ch; }
.drow__meta div {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s2);
  padding-bottom: 6px;
}
.drow__meta dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-600);
}
.drow__meta dd { font-size: var(--fs-sm); color: var(--ink); }

.tablefoot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s3);
  margin-top: var(--s4);
}
.footnote { font-size: var(--fs-sm); color: var(--gray-600); max-width: 62ch; }
.resultcount { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--gray-600); }

/* ---------- 15. Ueber ---------------------------------------------------- */

.ueber {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(var(--s6), 6vw, var(--s12));
  align-items: start;
}
.ueber h2 { margin-top: var(--s3); }
.ueber__text {
  margin-top: var(--s4);
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--gray-600);
  max-width: 54ch;
}

/* Das Betriebsdatenblatt: Papier auf Aubergine, wie die Packshot-Teller.
   Fakten als Zeilen, nicht als Absatz. */
.datenblatt {
  background: var(--gray-100);
  color: var(--ink);
  padding: clamp(var(--s4), 3vw, var(--s6));
}
.datenblatt__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
}
.datenblatt__kopf i { width: 34px; height: 2px; background: var(--gt-red); }
.datenblatt__zeile {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: var(--s3);
  padding: 14px 0;
  border-bottom: var(--hairline) solid var(--gray-200);
}
.datenblatt__zeile:last-child { border-bottom: 0; padding-bottom: 2px; }
.datenblatt dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-600);
  padding-top: 3px;
}
.datenblatt dd { font-size: var(--fs-base); line-height: 1.55; }

/* ---------- 16. Kontakt -------------------------------------------------- */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(var(--s6), 5vw, var(--s10));
  align-items: stretch;
}
.kontakt > div:first-child { display: flex; flex-direction: column; }
.kontaktdata {
  margin-top: var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1;
}
.kontaktdata div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: var(--hairline) solid var(--nacht-600);
  align-items: baseline;
}
.kontaktdata dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-600);
}
.kontaktdata dd {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--paper);
  word-break: break-word;
}
.kontaktdata a { text-decoration-color: var(--gt-red); }
.kontaktdata a:hover { color: var(--gt-red); }

.form { display: grid; gap: var(--s3); }
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.field { display: grid; gap: var(--s1); }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
}
.field .req { color: var(--gt-red); }
.field input,
.field select,
.field textarea {
  background: var(--nacht-900);
  color: var(--paper);
  border: var(--hairline) solid var(--nacht-600);
  padding: 13px var(--s2);
  font-size: var(--fs-base);
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--gray-200); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gray-200); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper) 50%),
                    linear-gradient(135deg, var(--paper) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s5);
}
.field__hint { font-size: var(--fs-xs); color: var(--gray-200); }

.check {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s2);
  align-items: start;
  font-size: var(--fs-sm); color: var(--gray-200);
}
.check input {
  appearance: none;
  width: 20px; height: 20px;
  border: var(--hairline) solid var(--nacht-600);
  background: var(--nacht-900);
  cursor: pointer;
  display: grid; place-content: center;
  padding: 0;
}
.check input::after {
  content: ""; width: 10px; height: 10px;
  background: var(--gt-red);
  transform: scale(0);
  transition: transform 0.15s var(--ease);
}
.check input:checked::after { transform: scale(1); }
.check a { color: var(--paper); }

.form__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s1);
}
.datenschutz { font-size: var(--fs-xs); color: var(--gray-200); max-width: 46ch; }
.datenschutz a { color: var(--paper); }

/* ---------- 17. Footer --------------------------------------------------- */

.footer {
  background: var(--gt-red-deep);
  color: rgb(var(--paper-rgb) / 0.92);
  --nacht-600: rgb(var(--paper-rgb) / 0.36);
  --gray-200: rgb(var(--paper-rgb) / 0.88);
  --gray-500: rgb(var(--paper-rgb) / 0.7);
  --gt-red: var(--paper);
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
  border-top: 0;
  padding-top: calc(var(--s8) + 2.2vw);
  padding-block: var(--s8) var(--s5);
  font-size: var(--fs-sm);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--s5);
  align-items: start;
}
.footer__top a { overflow-wrap: anywhere; }

.footer__logo img { width: 152px; height: 48px; object-fit: contain; margin-bottom: var(--s3); }
.footer__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: var(--gray-200);
}
.footer h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
  margin-bottom: var(--s2);
}
.footer li { margin-bottom: 6px; }
.footer a { color: var(--gray-200); text-decoration-color: var(--nacht-600); }
.footer a:hover { color: var(--paper); text-decoration-color: var(--gt-red); }
.footer__bottom {
  margin-top: var(--s7);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--nacht-600);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--gray-200);
}

/* ---------- 17b. Portal (Startseite) -------------------------------------
   Drei Tore, ein Bildschirm: Grosshandel, Software, Ghost Kitchen. Die Seite
   ist selbst die Navigation, deshalb traegt der Kopf nur Marke und Katalog-
   Knopf. Rot erscheint als Nummer, Pfeil und wachsender Strich. */

.portalseite { background: var(--paper); }

.portal {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
}

.portal__kopf {
  border-bottom: var(--hairline) solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--header-h);
  padding: var(--s2) var(--s4);
  border-bottom: var(--hairline) solid var(--nacht-600);
}
.portal__cta { line-height: 0; }

.portal__main { flex: 1; display: flex; }
.portal__nav { flex: 1; display: flex; }

.tore {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tor { position: relative; background: var(--paper); }
.tor + .tor { border-left: var(--hairline) solid var(--gray-200); }

.tor__link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  height: 100%;
  padding: clamp(var(--s4), 3.4vw, var(--s7));
  color: var(--ink);
  text-decoration: none;
}
.tor__link:focus-visible { outline-offset: -4px; }

.tor__bild { position: absolute; inset: 0; z-index: -2; }
.tor__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
/* Beide Fotos stammen aus derselben Serie. Unterschiedliche Ausschnitte
   machen die Tore unterscheidbar: links die Gyoza, rechts das Karaage. */
/* In den hohen Tueren beschneidet cover nur seitlich, auf dem Handy nur
   in der Hoehe, deshalb sind beide Achsen gesetzt. */
.tor--markt .tor__bild img   { object-position: 16% 80%; }
.tor--kitchen .tor__bild img { object-position: 88% 20%; }
/* Ueberzug fuer Lesbarkeit auf den Fototoren: oben leicht, unten dicht. */
.tor--foto .tor__link::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgb(var(--paper-rgb) / 0.92) 0%,
              rgb(var(--paper-rgb) / 0.3) 30%,
              rgb(var(--paper-rgb) / 0.55) 52%,
              rgb(var(--paper-rgb) / 0.9) 68%,
              rgb(var(--paper-rgb) / 0.98) 100%);
}

/* Der rote Strich waechst am Fuss des Tors, wie die Marke der Merkmale. */
.tor__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gt-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}

/* Screenshot-Paar im Plattform-Tor: zwei Fenster, leicht versetzt, wo die
   Nachbartore ihre Fotos tragen. Das vordere rueckt beim Zeigen minimal auf. */
.tor__shots {
  position: absolute;
  top: clamp(var(--s6), 8vh, var(--s10));
  right: clamp(var(--s4), 3.4vw, var(--s7));
  left: clamp(var(--s4), 3.4vw, var(--s7));
  pointer-events: none;
}
.tor__shot {
  display: block;
  border: var(--hairline) solid var(--gray-200);
  background: var(--paper);
}
.tor__shot--hinten { width: 76%; }
.tor__shot--vorn {
  position: absolute;
  top: 34%;
  right: 0;
  width: 66%;
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .tor__link:hover .tor__shot--vorn { transform: translate(6px, -6px); }
}
/* Markenkacheln im Franchise-Tor: drei weisse Quadrate, versetzt wie eine
   hingeworfene Kette, ueber dem Foto. */
.tor__marken {
  position: absolute;
  top: clamp(var(--s6), 8vh, var(--s10));
  right: clamp(var(--s4), 3.4vw, var(--s7));
  left: clamp(var(--s4), 3.4vw, var(--s7));
  aspect-ratio: 1 / 0.98;
  pointer-events: none;
}
.tor__marke { position: absolute; }
.tor__marke img { display: block; width: 100%; height: auto; }
.tor__marke--1 { left: 0; top: 2%; width: 56%; }
.tor__marke--2 { right: 2%; top: 20%; width: 38%; }
.tor__marke--3 { left: 14%; top: 60%; width: 44%; }
@media (hover: hover) {
  .tor__marke--2 { transition: transform 0.5s var(--ease); }
  .tor__link:hover .tor__marke--2 { transform: translate(6px, -6px); }
}

.tor__shotleiste {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: var(--hairline) solid var(--gray-200);
}
.tor__shotleiste i {
  width: 6px; height: 6px;
  border: var(--hairline) solid var(--gray-200);
  border-radius: 50%;
}
.tor__shot img { display: block; width: 100%; height: auto; }

.tor__inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s7);
  min-width: 0;
}

.tor__nr {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--gt-red);
}

.tor__unten { display: block; }
.tor__unten .eyebrow { margin-bottom: var(--s2); color: var(--gray-600); }
.tor--foto .tor__unten .eyebrow,
.tor--foto .tor__text { color: var(--ink); }

.tor__titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--gt-red);
}

.tor__text {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 42ch;
}

.tor__pfeil {
  display: block;
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1;
  transition: transform 0.5s var(--ease), color 0.35s var(--ease);
}

@media (hover: hover) {
  .tor__link:hover .tor__bild img,
  .tor__link:focus-visible .tor__bild img { transform: scale(1.05); }
  .tor:not(.tor--foto) .tor__link:hover { background: var(--gray-100); }
  .tor__link:hover::after,
  .tor__link:focus-visible::after { transform: scaleX(1); }
  .tor__link:hover .tor__pfeil { transform: translateX(10px); color: var(--gt-red); }
  .tor__link { transition: background-color 0.35s var(--ease); }
}

.portal__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: var(--hairline) solid var(--gray-200);
  font-size: var(--fs-sm);
  color: var(--gray-600);
}
.portal__recht { display: flex; gap: var(--s3); }
.portal__fuss a { color: var(--gray-600); text-decoration-color: var(--gt-red); }
.portal__fuss a:hover { color: var(--ink); }

/* Einstieg: die Tore steigen einmal gestaffelt auf. Ohne Skript oder bei
   reduzierter Bewegung steht alles sofort. */
.gt-anim .tor { opacity: 0; transform: translateY(26px); }
.gt-ready .tor {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.gt-ready .tor:nth-child(2) { transition-delay: 0.09s; }
.gt-ready .tor:nth-child(3) { transition-delay: 0.18s; }

@media (max-width: 900px) {
  /* Untereinander statt nebeneinander. Jedes Tor behaelt sein Bild und
     bleibt als ganze Flaeche antippbar. */
  .tore { grid-template-columns: minmax(0, 1fr); }
  .tor + .tor { border-left: 0; border-top: var(--hairline) solid var(--nacht-600); }
  .tor__link { padding: var(--s4) var(--s3); min-height: max(236px, 27dvh); }
  .tor__inhalt { gap: var(--s4); }
  .tor__titel { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .tor__text { margin-top: var(--s2); }
  .tor__pfeil { margin-top: var(--s3); }
  /* Im niedrigen Tor gibt es keine freie obere Haelfte: das Fensterpaar
     rueckt in den Fluss unter den Text, rechtsbuendig. */
  /* Auf dem Handy stehen Text oben und Beleg unten - bei allen Toren:
     Foto, Fensterpaar oder Marken werden zum Streifen unter dem Text. */
  .tor__link { flex-direction: column; }
  .tor__inhalt { order: -1; }
  .tor--foto .tor__bild {
    position: static;
    order: 2;
    margin-top: var(--s4);
    height: 190px;
  }
  /* Im Franchise-Tor sind die drei Marken der Beleg - das Foto dazu
     waere doppelt und zeigte nur ein verwaschenes Fragment. */
  .tor--kitchen .tor__bild { display: none; }
  /* Platz fuer das ueberhaengende vordere Fenster des Paars. */
  .tor__shots { padding-bottom: 17%; }
  .tor--foto .tor__bild img { height: 100%; }
  .tor--foto .tor__link::before { display: none; }
  .tor__marken {
    position: relative;
    inset: auto;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: min(88%, 400px);
    align-self: flex-end;
    margin-top: var(--s4);
  }
  .tor__marke { position: static; }
  .tor__marke--1 { width: 40%; }
  .tor__marke--2 { width: 22%; }
  .tor__marke--3 { width: 30%; }
  .tor__shots {
    position: relative;
    inset: auto;
    width: min(84%, 380px);
    align-self: flex-end;
    margin-top: var(--s4);
  }
  .portal__kopf { padding: var(--s2) var(--s3); }
  .portal__fuss { padding: var(--s3); flex-wrap: wrap; }
}

/* ---------- 18b. Screens (echte Anwendungsbilder) -------------------------
   Anonymisierte Abbildungen aus dem Hub im selben Browserrahmen, den die
   gezeichneten Schaubilder nutzen. */

.screens { margin: 0; }
.screen {
  max-width: 1000px;
  margin-inline: auto;
  border: var(--hairline) solid var(--nacht-600);
  background: var(--nacht-900);
}
.screen__leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: var(--hairline) solid var(--nacht-600);
}
.screen__leiste i {
  width: 8px; height: 8px;
  border: var(--hairline) solid var(--nacht-600);
  border-radius: 50%;
}
.screen__leiste b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--gray-200);
}
.screen img { display: block; width: 100%; height: auto; }

/* Slider: ein Fenster, die Ansichten gleiten darin. Die Spur ist eine
   scrollbare Rasterreihe mit Schnappstellen; die Wischgeste am Handy ist
   damit nativ, die Knoepfe sind nur eine zweite Bedienung. */
.screen--breit { max-width: 1100px; }
.slider__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.slider__spur::-webkit-scrollbar { display: none; }
.slider__bild { scroll-snap-align: start; scroll-snap-stop: always; }
.slider__bild img { display: block; width: 100%; height: auto; }

.slider__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  max-width: 1100px;
  margin: var(--s3) auto 0;
}
.slider__name {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--gray-200);
}
.section--light .slider__name { color: var(--gray-600); }
.slider__steuer { display: flex; align-items: center; gap: var(--s2); flex: none; }
.slider__stand {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--gray-200);
  margin-right: var(--s1);
}
.section--light .slider__stand { color: var(--gray-600); }
.slider__stand b { font-weight: 500; color: var(--gt-red); }
.slider__knopf {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: var(--hairline) solid var(--nacht-600);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.section--light .slider__knopf { border-color: var(--gray-200); color: var(--ink); }
.slider__knopf:hover { border-color: var(--gt-red); color: var(--gt-red); }
.slider__knopf[disabled] { opacity: 0.35; cursor: default; }
.slider__knopf[disabled]:hover { border-color: var(--nacht-600); color: var(--paper); }

@media (max-width: 700px) {
  .slider__zeile { flex-wrap: wrap; }
  .slider__name { flex: 1 1 100%; order: 2; }
}

.screens__paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 900px) {
  .screens__paar { grid-template-columns: minmax(0, 1fr); }
}

.screens__name {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--gray-200);
}
.section--light .screens__name { color: var(--gray-600); }

/* Seitenkopf mit Screenshot: Text links, Geraet rechts, unten buendig. */
.pagehero__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s7);
  align-items: end;
}
.pagehero__screen { margin: 0; max-width: none; }
.pagehero .screen {
  border-color: var(--gray-200);
  background: var(--paper);
}
.pagehero .screen__leiste { border-bottom-color: var(--gray-200); }
.pagehero .screen__leiste i { border-color: var(--gray-200); }
@media (max-width: 1024px) {
  .pagehero__paar { grid-template-columns: minmax(0, 1fr); }
  .pagehero__screen { max-width: 640px; margin-top: var(--s2); }
}

.schaubild__cap {
  margin-top: var(--s3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--gray-600);
}
.section--dark .schaubild__cap { color: var(--gray-200); }

/* Markenstapel: die drei Liefermarken als weisse Zeichen im Seitenkopf. */
.markenstapel {
  position: relative;
  aspect-ratio: 1 / 0.78;
  max-width: 460px;
  justify-self: end;
  width: 100%;
}
.markenstapel__m { position: absolute; }
.markenstapel__m img { display: block; width: 100%; height: auto; }
.markenstapel__m--1 { left: 0; top: 0; width: 58%; }
.markenstapel__m--2 { right: 0; top: 22%; width: 40%; }
.markenstapel__m--3 { left: 14%; bottom: 4%; width: 46%; }

@media (max-width: 1024px) {
  .markenstapel {
    aspect-ratio: auto;
    max-width: 420px;
    justify-self: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-top: var(--s3);
  }
  .markenstapel__m { position: static; }
  .markenstapel__m--1 { width: 40%; }
  .markenstapel__m--2 { width: 22%; }
  .markenstapel__m--3 { width: 30%; }
}

/* ---------- 18. Unterseite Sortiment ------------------------------------- */

.pagehero {
  background: var(--paper);
  color: var(--ink);
  padding-block: calc(var(--header-h) + var(--s10)) var(--s10);
}
.pagehero .display--section { margin: var(--s3) 0 var(--s3); }

.catgroup + .catgroup { margin-top: var(--s10); }
/* Direkt nach dem Seitenkopf darf die Liste frueher beginnen. */
.section--dicht { padding-top: var(--s6); }

/* Kategoriekoepfe als rote Katalog-Trennbalken. */
.catgroup__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: 12px var(--s3) 14px;
  background: var(--gt-red-deep);
  color: var(--paper);
  margin-bottom: var(--s5);
}
.catgroup__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1;
}
.catgroup__count { font-family: var(--font-mono); font-size: var(--fs-sm); color: rgb(var(--paper-rgb) / 0.85); }

.detaillist { display: grid; gap: var(--s2); }
.detail {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 0.6fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s4);
  border: var(--hairline) solid var(--gray-200);
}
.detail__shot {
  background: var(--gray-100);
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  padding: var(--s2);
}
.detail__shot img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.detail__nr {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}
.detail__hersteller {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  color: var(--gray-600);
  margin-top: 4px;
}
.detail__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin: var(--s1) 0 var(--s2);
}
.detail__desc { font-size: var(--fs-base); color: var(--gray-600); max-width: 62ch; }
.detail__data { font-size: var(--fs-sm); }
.detail__data div {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--s2);
  padding: 10px 0;
  border-top: var(--hairline) solid var(--gray-200);
}
.detail__data div:first-child { border-top: 0; padding-top: 0; }
.detail__data dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-600);
}
.detail__data dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.detail .badges { margin-top: var(--s3); }

/* ---------- 18b. Bausteine der Unterseiten ------------------------------- */

/* Fliesstext-Abschnitte: Ueberschrift links, Absaetze rechts. Fuellt die
   Breite, statt die rechte Haelfte leer zu lassen. */
.textblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.textblock .section__head { margin-bottom: 0; }
@media (min-width: 900px) {
  .textblock {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(var(--s5), 5vw, var(--s10));
    align-items: start;
  }
}
.textblock .prose p { font-size: var(--fs-lg); line-height: 1.6; }

.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1);
  margin-bottom: var(--s4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-200);
}
.krumen a { color: var(--gray-200); text-decoration-color: var(--nacht-600); }
.krumen a:hover { color: var(--paper); text-decoration-color: var(--gt-red); }
.krumen span[aria-hidden] { color: var(--nacht-600); }

.pagehero .ln { display: block; }
.pagehero .ln > i { display: block; font-style: normal; }
.pagehero .lead { margin-top: var(--s3); color: var(--gray-600); }
.pagehero .eyebrow--dark { color: var(--gray-600); }

/* Karten: zwei bis drei Bloecke nebeneinander, kantig, ohne Schatten. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--s2);
}
.karte {
  display: flex; flex-direction: column;
  padding: var(--s4);
  border: var(--hairline) solid var(--gray-200);
  transition: border-color 0.25s var(--ease);
}
.section--dark .karte,
.section--deep .karte { border-color: var(--nacht-600); }
.karte:hover { border-color: var(--ink); }
.section--dark .karte:hover { border-color: var(--gt-red); }
.karte__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--s2);
}
.karte__text { font-size: var(--fs-base); color: var(--gray-600); }
.section--dark .karte__text { color: var(--gray-200); }
.karte__link { margin-top: auto; padding-top: var(--s4); }

/* Merkmale: hairline-getrennte Zeilen, kein Kartenraster.
   Zwei Spalten statt auto-fit, damit vier oder sechs Punkte immer volle
   Reihen ergeben und keine Luecke am Ende steht. */
.merkmale {
  counter-reset: merkmal;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--s6);
}
@media (min-width: 720px)  { .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .merkmale { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.merkmal {
  counter-increment: merkmal;
  position: relative;
  padding-top: var(--s3);
  border-top: 2px solid var(--gray-200);
}
.section--dark .merkmal { border-top-color: var(--nacht-600); }

/* Die rote Marke liegt auf der Trennlinie und laeuft beim Zeigen nach rechts
   aus. Ein Strich ist die einzige Form, in der Rot laut Vorgabe grossflaechig
   auftreten darf. */
.merkmal::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--gt-red);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.merkmal:hover::before { transform: scaleX(3.4); }

.merkmal__titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  text-transform: uppercase;
  line-height: 1.12;
  margin-bottom: var(--s2);
}
.merkmal__titel::before {
  content: counter(merkmal, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  color: var(--gt-red);
  margin-bottom: var(--s2);
}
.merkmal__text { font-size: var(--fs-base); color: var(--gray-600); max-width: 46ch; }
.section--dark .merkmal__text { color: var(--gray-200); }

/* Ablauf: was das System uebernimmt. Bewusst keine Vergleichstabelle mit
   zwei gleich starken Spalten - der erreichte Zustand traegt die Zeile, der
   bisherige Ablauf steht klein darunter. Wer ihn kennt, erkennt sich wieder;
   wer nicht, liest ihn gar nicht erst. */
.ablauf { border-top: 2px solid var(--ink); }
.section--dark .ablauf { border-top-color: var(--paper); }

.ablauf__punkt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: var(--s3) clamp(var(--s4), 4vw, var(--s8));
  align-items: start;
  padding: var(--s5) 0 var(--s5) var(--s3);
  border-bottom: var(--hairline) solid var(--gray-200);
  transition: background-color 0.3s var(--ease);
}
.section--dark .ablauf__punkt { border-bottom-color: var(--nacht-600); }
/* Roter Anschlag, faehrt beim Ueberfahren von oben ein. Dieselbe Geste wie
   bei den Zubereitungswegen auf der Startseite. */
.ablauf__punkt::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--gt-red);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 0.3s var(--ease);
}
.ablauf__punkt:hover { background: var(--gray-100); }
.section--dark .ablauf__punkt:hover { background: var(--nacht-700); }
.ablauf__punkt:hover::before { transform: scaleY(1); }

.ablauf__thema {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  text-transform: uppercase;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.ablauf__jetzt {
  font-size: var(--fs-lg);
  line-height: 1.55;
  max-width: 58ch;
  color: var(--ink);
}
.section--dark .ablauf__jetzt { color: var(--paper); }

/* Der bisherige Ablauf: eingerueckt, klein, grau. Eine Fussnote, kein
   zweiter Hauptdarsteller. */
.ablauf__bisher {
  margin-top: var(--s3);
  padding-left: var(--s2);
  border-left: var(--hairline) solid var(--gray-200);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 56ch;
}
.section--dark .ablauf__bisher { border-left-color: var(--nacht-600); color: var(--gray-200); }
.ablauf__marke {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-500);
}
.section--dark .ablauf__marke { color: var(--gray-200); }

@media (max-width: 820px) {
  .ablauf__punkt {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s4) 0 var(--s4) var(--s2);
  }
  .ablauf__jetzt { font-size: var(--fs-base); }
}

/* Fragen und Antworten: Ausklapp-Zeilen. Der Ruhezustand ist die Frage,
   die Antwort kommt per Klick; das Plus kippt zum Minus. */
.faq { border-top: 2px solid var(--ink); }
.section--dark .faq { border-top-color: var(--paper); }
.faq__paar { border-bottom: var(--hairline) solid var(--gray-200); }
.section--dark .faq__paar { border-bottom-color: var(--nacht-600); }

.faq__frage {
  position: relative;
  display: block;
  padding: var(--s4) var(--s8) var(--s4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.25s var(--ease);
}
.faq__frage::-webkit-details-marker { display: none; }

/* Plus aus zwei Balken, kippt beim Oeffnen zum Minus. */
.faq__frage::before,
.faq__frage::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}
.faq__frage::after { transform: rotate(90deg); }
.faq__paar[open] .faq__frage { color: var(--gt-red); }
.faq__paar[open] .faq__frage::after { transform: rotate(0deg); }
@media (hover: hover) { .faq__frage:hover { color: var(--gt-red); } }

.faq__antwort {
  padding: 0 var(--s8) var(--s4) 0;
  font-size: var(--fs-base);
  color: var(--gray-600);
  max-width: 62ch;
}
.section--dark .faq__antwort { color: var(--gray-200); }

.ctaband { text-align: center; }
.ctaband .lead { margin: var(--s3) auto 0; }
.ctaband .hero__actions { justify-content: center; margin-top: var(--s5); }

/* Platzhalter. Bewusst auffaellig: dieser Text darf nicht versehentlich
   online gehen. Verschwindet, sobald der Eintrag in data/seiten.json
   gefuellt und "platzhalter" entfernt ist. */
.ph {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--gt-red);
  color: var(--gt-red);
  font-style: italic;
}
.section--dark .ph, .section--deep .ph, .pagehero .ph { border-color: var(--gt-red); }
.ph-marke {
  display: inline-block;
  margin-left: var(--s2);
  padding: 3px 8px;
  border: 1px solid var(--gt-red);
  color: var(--gt-red);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 700px) {
  /* Lange Versal-Labels wie ZERTIFIZIERUNG passen nicht neben den Wert:
     auf dem Handy steht das Label ueber dem Wert. */
  .datenblatt__zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .datenblatt dt { padding-top: 0; }

  /* Bezeichnung und Wert nebeneinander statt untereinander. Das spart pro
     Karte zwei Zeilen und macht aus vier gleich aussehenden Bloecken eine
     Liste, die man im Daumenlauf ueberfliegen kann. */
  /* Die beiden Angaben stehen nebeneinander statt untereinander: zwei Zeilen
     statt vier, und der Blick vergleicht Beutel und Karton direkt. */
  .speccard__data {
    display: grid;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px var(--s2);
  }
  .speccard__data dd { margin: 0; }

  /* Das Yakitori-Bild lief auf dem Handy sehr lang aus, darunter stand eine
     halbe Bildschirmhoehe leeres Pflaumenfeld. */
  .showcase__media { max-height: 42vh; margin-top: var(--s5); }
  .showcase__media img { max-height: 42vh; }
  .showcase__media::after { height: 32%; }
  .artrows { margin-top: var(--s4); }
}

/* Rechtstexte: schmale Spalte, viele Zwischenueberschriften, keine
   Auszeichnungen. Wird gelesen, nicht ueberflogen. */
.rechtstext { max-width: 72ch; }
.rechtstext > section + section { margin-top: var(--s6); }
.rechtstext h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding-bottom: var(--s1);
  margin-bottom: var(--s2);
  border-bottom: var(--hairline) solid var(--gray-200);
}
.rechtstext p { font-size: var(--fs-base); line-height: 1.7; color: var(--gray-600); }
.rechtstext p + p { margin-top: var(--s2); }
.rechtstext section > p:first-of-type { color: var(--ink); }

/* ---------- 19. Bewegung ------------------------------------------------- */

/* Der Zustand des Headers bleibt bewusst hier, scroll-getrieben und ohne
   Skript: er darf nie ausfallen. Alle Einblendungen und das Auf- und
   Zuklappen der Tabelle laufen ueber Motion in assets/js/gotiger.js. Diese
   Datei versteckt deshalb nichts - der sichtbare Zustand ist der Normalfall.
   Die Keyframes des Headers stehen in Abschnitt 6. */

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

/* ---------- 20. Responsive ----------------------------------------------- */

@media (max-width: 1180px) {
  :root { --wrap: 100%; }
  .nav__list { gap: var(--s3); }
  .nav__link { font-size: var(--fs-base); }
  .header__inner { gap: var(--s3); }
}

@media (max-width: 1024px) {
  .header__cta { display: none; }
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0;
    background: var(--paper);
    margin: 0;
    padding: var(--s5) var(--s3) var(--s8);
    overflow-y: auto;
    display: none;
  }
  .header.is-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: var(--hairline) solid var(--gray-200); }
  .nav__list li:first-child { border-top: var(--hairline) solid var(--gray-200); }
  .nav__link {
    display: block;
    font-size: 1.5rem;
    padding: var(--s3) 0;
    border-bottom: 0;
  }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--gt-red); }
  .nav__cta { display: block; margin-top: var(--s5); }
  .nav__cta .btn { width: 100%; }

  .produktion,
  .ueber,
  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: 120px minmax(0, 1fr); }
  .detail__data { grid-column: 2; }
}

@media (max-width: 900px) {
  /* Auf Mobil fuellt das Essen den Screen, die Typo schwimmt darueber.
     Dafuer traegt hier das Hochformat-Original, nicht das breite Komposit. */
  .hero { min-height: min(100dvh, 780px); }
  .hero__bg img { object-position: 64% 62%; }
  .hero::before {
    background: linear-gradient(180deg,
                rgb(var(--paper-rgb) / 0.42) 0%,
                rgb(var(--paper-rgb) / 0.30) 32%,
                rgb(var(--paper-rgb) / 0.90) 70%,
                rgb(var(--paper-rgb) / 0.97) 100%);
  }
  .hero__inner {
    justify-content: flex-end; gap: var(--s4);
    padding-block: calc(var(--header-h) + var(--s5)) var(--s7);
  }
  .hero .display--hero { font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .hero__actions .btn { width: 100%; }

  .ueber { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .cats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; }
  .cat { min-height: 300px; }
  .cat--lead { grid-row: auto; min-height: 380px; }

  /* Auf dem Handy gibt es kein Zeigen. Die rote Marke steht deshalb fest und
     jeder Weg wird ein eigener Block statt einer Tabellenzeile: Titel und
     Ergebnis teilen sich eine Zeile, die Artikelnummern stehen als Fuss
     darunter, die laufende Nummer sitzt oben rechts. */
  .wege { border-top: 0; display: grid; gap: var(--s3); }
  .weg {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s4) var(--s3) var(--s4) calc(var(--s3) + 4px);
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    background: var(--gray-100);
  }
  .weg::before { transform: scaleY(1); width: 3px; }
  .weg::after {
    content: counter(weg, decimal-leading-zero);
    position: absolute;
    top: var(--s4);
    right: var(--s3);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-sm);
    letter-spacing: 0.12em;
    color: var(--gt-red);
  }
  .weg__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
    padding-right: var(--s5);
  }
  .weg__name h3 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .weg__text { max-width: none; }
  .weg__artikel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) var(--s3);
    border-top: var(--hairline) solid var(--gray-200);
    padding-top: var(--s3);
    margin-top: var(--s1);
  }
  .weg__caption { margin-bottom: 0; }

  .artrow {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--s3);
    align-items: start;
  }
  .artrow__plate { width: 80px; height: 80px; }
  .artrow__body { grid-column: 2; }
  .artrow__desc, .artrow__data { grid-column: 2; text-align: left; }
  .artrow__data { margin-top: var(--s1); }

  /* Label ueber dem Wert statt daneben: die E-Mail-Adresse braucht die
     ganze Breite, sonst bricht sie mitten im Wort. */
  .kontaktdata div { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  /* Zwei Spalten halbieren die Laenge des Fusses auf dem Handy. */
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s3); }
  .footer__logo { grid-column: 1 / -1; }
}


/* Rechtstexte: schmale Spalte, viele Zwischenueberschriften, keine
   Auszeichnungen. Wird gelesen, nicht ueberflogen. */
.rechtstext { max-width: 72ch; }
.rechtstext > section + section { margin-top: var(--s6); }
.rechtstext h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding-bottom: var(--s1);
  margin-bottom: var(--s2);
  border-bottom: var(--hairline) solid var(--gray-200);
}
.rechtstext p { font-size: var(--fs-base); line-height: 1.7; color: var(--gray-600); }
.rechtstext p + p { margin-top: var(--s2); }
.rechtstext section > p:first-of-type { color: var(--ink); }

/* ---------- 19. Bewegung ------------------------------------------------- */

/* Der Zustand des Headers bleibt bewusst hier, scroll-getrieben und ohne
   Skript: er darf nie ausfallen. Alle Einblendungen und das Auf- und
   Zuklappen der Tabelle laufen ueber Motion in assets/js/gotiger.js. Diese
   Datei versteckt deshalb nichts - der sichtbare Zustand ist der Normalfall.
   Die Keyframes des Headers stehen in Abschnitt 6. */

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

/* ---------- 20. Responsive ----------------------------------------------- */

@media (max-width: 820px) {
  .sorttable { min-width: 0; }
  .sorttable thead th:nth-child(3),
  .sorttable thead th:nth-child(4),
  .sorttable thead th:nth-child(5),
  .srow > .c-ve,
  .srow > .c-kt,
  .srow > .c-merk { display: none; }
  .drow__badges { display: block; margin-top: var(--s3); }
  .c-sign { width: 36px; }
}

@media (max-width: 700px) {
  /* Auf dem Handy traegt die Detailzeile die Arbeit: Nummer und Bezeichnung
     stehen in der Zeile, alles Weitere eine Antippbewegung entfernt. */
  .sorttable { font-size: var(--fs-sm); }
  .srow > th > *, .srow > td { padding: 11px 12px; }
  .c-name { min-width: 17ch; font-size: var(--fs-base); }
  /* Der Detailinhalt bleibt beim seitlichen Scrollen der Tabelle stehen und
     ist genau so breit wie das Sichtfeld. Sonst muesste man zum Lesen der
     Beschreibung erst nach rechts schieben. */
  .drow__inner {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s3) 12px;
  }
  .drow__meta { grid-column: 1 / -1; }
  .drow__meta div { grid-template-columns: 104px minmax(0, 1fr); }
  .prop--spiesse { width: 150px; margin-left: -160px; transform: translateY(-52%); }
  .prop--edamame { width: 84px; margin-left: 62px; transform: translateY(-46%); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .speccards { grid-template-columns: minmax(0, 1fr); }
  .speccard { flex-direction: row; gap: var(--s3); align-items: flex-start; }
  .speccard__shot { width: 72px; height: 96px; margin-bottom: 0; align-self: flex-start; }
  .speccard__body { flex: 1; min-width: 0; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail__shot { max-width: 160px; }
  .detail__data { grid-column: auto; }
  .figure70 { flex-wrap: wrap; gap: var(--s2); }
  .figure70__cap { border-left: 0; padding-left: 0; max-width: none; }
}

@media (max-width: 460px) {
  :root { --s3: 20px; }
  .wrap { padding-inline: var(--s2); }
  .btn--primary, .btn--ghost { width: 100%; }
  .hero__actions { gap: var(--s1); }
}

/* ---------- 21. Druck ---------------------------------------------------- */
/* Ein Einkaeufer druckt die Sortimentsuebersicht aus. */

@media print {
  .header, .hero, .marken, .cats, .wege, .showcase__media, .filterbar,
  .footer, .btn, .form, .kontaktdata, .skip-link { display: none !important; }
  body { background: var(--paper); color: var(--ink); font-size: 10pt; }
  .section { padding-block: 0; }
  .section--dark, .section--deep { background: var(--paper); color: var(--ink); clip-path: none; }
  .sorttable { min-width: 0; }
  .srow, .srow.is-open { background: transparent; }
  .srow > th:first-child { box-shadow: none; }
  .c-sign, .drow { display: none; }
  .srow > th, .srow > td { border-bottom: 0.5pt solid var(--gray-600); }
}