/* ==========================================================================
   GastroBoard — Website

   Gestaltungsidee: Ein Küchentag läuft nach Uhrzeit. Die Seite ist selbst
   ein Ablaufplan. Als Material dient Edelstahl — die Oberfläche, auf der
   in jeder Profiküche gearbeitet wird.

   Farbe    Edelstahl als Fläche, Tinte als Schrift, Terrakotta als Marke.
   Schrift  Archivo (breit laufend, wie Beschriftungen an Geräten),
            IBM Plex Sans für Fließtext, IBM Plex Mono für Zeiten und Codes.
   ========================================================================== */

/* --- Schriften, selbst gehostet ----------------------------------------- */
/* Bewusst nicht über Google Fonts eingebunden: Dabei würde bei jedem Aufruf
   die IP-Adresse des Besuchers an Google übertragen — in Deutschland ein
   bekanntes Datenschutzproblem. Selbst ausgeliefert entfällt das, und die
   Seite lädt schneller. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

:root {
  /* --- Edelstahl ------------------------------------------------------- */
  --steel-050: #EDEFEC;
  --steel-100: #DDE1DC;
  --steel-200: #C6CCC6;   /* Grundfläche */
  --steel-300: #AAB2AC;
  --steel-500: #6E7671;
  --steel-700: #3A403C;
  --ink:       #1C1F1D;

  /* --- Papier & Marke -------------------------------------------------- */
  --paper:      #F7F7F4;   /* Bons, Karten, Etiketten */
  --terracotta: #A0542E;   /* Markenfarbe der App */
  --terracotta-lo: rgba(160, 84, 46, .10);

  /* --- Schrift --------------------------------------------------------- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Raster ---------------------------------------------------------- */
  --rail: 150px;            /* Spalte für Uhrzeit + Schiene */
  --st-pad: clamp(4.5rem, 12vh, 9rem);   /* oberer Abstand je Posten */
  --rail-x: 104px;          /* Abstand der Schiene vom Seitenrand */
  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1240px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- Basis --- */

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

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

body {
  margin: 0;
  background: var(--steel-200);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Gebürsteter Stahl: sehr feine, unregelmäßige Linien */
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.16) 0px,
      rgba(255,255,255,.16) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(28,31,29,.035) 0px,
      rgba(28,31,29,.035) 1px,
      transparent 1px,
      transparent 7px
    );
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--steel-050);
  padding: .8rem 1.2rem; z-index: 200;
}
.skip:focus { left: 0; }

/* Grosse Displayschrift: breit laufend wie Geräte-Beschriftung */
.display {
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  /* Deutsche Versalien brauchen Luft: Unterlängen wie das Komma treffen
     sonst auf die Umlautpunkte der Zeile darunter. */
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.mono {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- Header --- */

.top {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--pad);
  height: 64px;
  background: rgba(198, 204, 198, 0);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.top.stuck {
  background: rgba(198, 204, 198, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(28,31,29,.12);
}

.mark { display: flex; align-items: center; gap: .55rem; }
.mark svg { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.mark span {
  font-family: var(--display);
  font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: .95rem;
  letter-spacing: .01em; text-transform: uppercase;
}

.top nav {
  margin-left: auto;
  display: flex; gap: 1.6rem;
}
.top nav a {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-700);
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.top nav a:hover { color: var(--ink); border-bottom-color: var(--terracotta); }

.status {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: .5rem .85rem;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .top nav { display: none; }
  .status { margin-left: auto; font-size: .6rem; padding: .45rem .6rem; }
  .mark span { font-size: .82rem; }
}
@media (max-width: 400px) {
  /* Auf sehr schmalen Geräten nur das Nötigste */
  .status { font-size: .56rem; letter-spacing: .08em; }
}

/* ---------------------------------------------------------------- Hero --- */

.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 96px var(--pad) clamp(28px, 5vh, 56px);
  position: relative;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .6rem 1.8rem;
  color: var(--steel-700);
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}

.hero h1 {
  font-size: clamp(3rem, 10.5vw, 9.2rem);
  margin-bottom: clamp(1.4rem, 4vh, 2.5rem);
}
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln > span { display: block; }
.hero h1 em { font-style: normal; color: var(--terracotta); }

.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  border-top: 1px solid rgba(28,31,29,.22);
  padding-top: 1.4rem;
}
.hero-foot p {
  max-width: 34rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--steel-700);
}
.hero-foot .platforms {
  display: flex; gap: 1.2rem;
  color: var(--steel-500);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot .platforms { display: none; }
}

/* ------------------------------------------------------- Zeitleiste ------ */

.day { position: relative; }

/* Die Schiene läuft durch den gesamten Tagesablauf */
.rail {
  position: absolute;
  left: calc(var(--pad) + var(--rail-x));
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(28,31,29,.18);
}
.rail::after {                     /* gefüllter Teil, wächst beim Scrollen */
  content: "";
  position: absolute; inset: 0 auto auto 0;
  width: 1px; height: 0;
  background: var(--terracotta);
}

.station {
  position: relative;
  padding: var(--st-pad) var(--pad);
  padding-left: calc(var(--pad) + var(--rail));
}
.stamp {
  position: absolute;
  left: var(--pad);
  top: var(--st-pad);
  width: calc(var(--rail-x) - 22px);
  text-align: right;
}
.stamp .time {
  font-family: var(--mono);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.stamp .dot {
  position: absolute; left: var(--rail-x); top: .58rem;
  width: 9px; height: 9px; margin-left: -4px;
  background: var(--steel-200);
  border: 1px solid var(--steel-500);
  border-radius: 50%;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.station.live .stamp .dot {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: scale(1.35);
}
/* Schmale Geräte: Uhrzeit über den Text, Punkt bleibt auf der Schiene.
   Diese Regeln stehen bewusst nach den Grundregeln — sonst gewinnen bei
   gleicher Spezifität die weiter unten stehenden Zeilen. */
@media (max-width: 860px) {
  :root { --rail-x: 6px; }
  .station { padding-left: calc(var(--pad) + 28px); }
  .stamp {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: .6rem;
  }
  .stamp .time { font-size: .82rem; }
  .stamp .dot {
    left: calc(var(--pad) + var(--rail-x) - 4px);
    top: calc(var(--st-pad) + .45rem);
  }
}

.station h2 {
  font-size: clamp(2rem, 5.4vw, 4.2rem);
  max-width: 16ch;
  margin-bottom: 1.2rem;
}
.station h2 .ln { display: block; overflow: hidden; }
.station h2 .ln > span { display: block; }

.station .lede {
  max-width: 40rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--steel-700);
}

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .9rem;
  display: block;
}

/* ------------------------------------------------------------- Bons ------ */
/* Karten sehen aus wie Bons / Etiketten aus der Küche.
   Kein Rundungsradius — Papier ist eckig. */

.slips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 2.6rem;
  background: rgba(28,31,29,.16);
  border: 1px solid rgba(28,31,29,.16);
}
.slip {
  background: var(--paper);
  padding: 1.5rem 1.4rem 1.7rem;
  position: relative;
  transition: background .3s var(--ease);
}
.slip:hover { background: #fff; }
.slip .idx {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em;
  color: var(--steel-500);
  display: block; margin-bottom: 1.6rem;
}
.slip h3 {
  font-family: var(--body);
  font-weight: 600; font-size: 1.06rem;
  letter-spacing: -0.01em;
  margin-bottom: .45rem;
}
.slip p { font-size: .93rem; color: var(--steel-700); }

/* --------------------------------------------------- Einkaufs-Rechnung --- */
/* Das Herzstück: aus drei Rezepten wird eine Bestellung. */

.merge {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
}
@media (max-width: 900px) {
  .merge { grid-template-columns: 1fr; gap: 1.6rem; }
  .merge .arrow { transform: rotate(90deg); justify-self: start; }
}

.sources { display: grid; gap: .5rem; }

.rcp {
  background: var(--paper);
  border-left: 3px solid var(--steel-300);
  padding: .85rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .5rem;
}
.rcp .name { font-weight: 500; font-size: .95rem; }
.rcp .qty {
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--steel-700);
}
.rcp.on { border-left-color: var(--terracotta); }

.arrow { color: var(--steel-500); }
.arrow svg { width: 34px; height: 34px; }

.result {
  background: var(--ink);
  color: var(--paper);
  padding: 1.5rem 1.5rem 1.6rem;
}
.result .hd {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-300);
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(247,247,244,.18);
  margin-bottom: 1rem;
  display: flex; justify-content: space-between;
}
.result .row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 1rem;
  padding: .42rem 0;
}
.result .row .name { font-size: .98rem; }
.result .row .qty {
  font-family: var(--mono);
  font-size: 1.02rem; font-weight: 500;
  color: #fff;
}
.result .row.hi .qty { color: var(--terracotta); }
.result .note {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(247,247,244,.18);
  font-size: .82rem; color: var(--steel-300);
}

/* ------------------------------------------------------- Deklaration ----- */

.decl { background: var(--ink); color: var(--steel-100); }

/* Die Schiene läuft hinter dem dunklen Abschnitt weiter — hier wird sie
   in Hell fortgesetzt, damit der Tag nicht optisch abreisst. */
.decl::before {
  content: "";
  position: absolute;
  left: calc(var(--pad) + var(--rail-x));
  top: 0; bottom: 0; width: 1px;
  background: rgba(247,247,244,.2);
}
.decl .stamp .time { color: var(--steel-050); }
.decl .stamp .dot { background: var(--ink); border-color: var(--steel-500); }
.decl .lede { color: var(--steel-300); }
.decl h2 { color: var(--steel-050); }

.keygrid {
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1px;
  background: rgba(247,247,244,.14);
  border: 1px solid rgba(247,247,244,.14);
}
.key {
  background: var(--ink);
  padding: .85rem .9rem 1rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.key .c {
  font-family: var(--mono);
  font-size: 1.15rem; font-weight: 500;
  color: var(--terracotta);
  line-height: 1;
}
.key .l { font-size: .8rem; color: var(--steel-300); line-height: 1.35; }
.key.sub { padding-left: 1.7rem; }
.key.sub .c { font-size: .95rem; color: var(--steel-100); }

.decl-foot {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .08em;
  color: var(--steel-500);
}

/* ----------------------------------------------------------- Abschluss --- */

.close-cta {
  padding: clamp(5rem, 14vh, 10rem) var(--pad);
  border-top: 1px solid rgba(28,31,29,.2);
}
.close-cta h2 {
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  margin-bottom: 1.6rem;
}
.close-cta .row {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center;
  border-top: 1px solid rgba(28,31,29,.2);
  padding-top: 1.6rem;
}
.mailto {
  font-family: var(--mono);
  font-size: .95rem; letter-spacing: .02em;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 2px;
  transition: color .25s;
}
.mailto:hover { color: var(--terracotta); }

/* -------------------------------------------------------------- Footer --- */

.foot {
  padding: 2.4rem var(--pad) 3rem;
  border-top: 1px solid rgba(28,31,29,.2);
  display: flex; flex-wrap: wrap; gap: 1.2rem 2rem;
  align-items: center;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .06em;
  color: var(--steel-500);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-left: auto; }
.foot a { text-transform: uppercase; transition: color .25s; }
.foot a:hover { color: var(--ink); }
.foot .legal-note { flex-basis: 100%; color: var(--steel-500); }

/* -------------------------------------------------------- Rechtsseiten --- */

.doc { padding: 120px var(--pad) 6rem; }
.doc .inner { max-width: 44rem; }
.doc .back {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-500);
  display: inline-block; margin-bottom: 2.4rem;
  transition: color .25s;
}
.doc .back:hover { color: var(--terracotta); }
.doc h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin-bottom: .9rem;
}
.doc .meta {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--steel-500); margin-bottom: 2.6rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid rgba(28,31,29,.2);
}
.doc h2 {
  font-family: var(--body); font-weight: 600;
  font-size: 1.12rem; letter-spacing: -0.01em;
  margin: 2.6rem 0 .8rem;
}
.doc h3 { font-family: var(--body); font-weight: 600; font-size: 1rem; margin: 1.6rem 0 .5rem; }
.doc p, .doc ul { margin-bottom: 1rem; color: var(--steel-700); }
.doc ul { padding-left: 1.1rem; }
.doc li { margin-bottom: .4rem; }
.doc a { color: var(--terracotta); border-bottom: 1px solid rgba(160,84,46,.35); }
.doc address { font-style: normal; color: var(--steel-700); line-height: 1.8; margin-bottom: 1rem; }
.doc strong { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- Motion --- */

[data-anim] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}