/* rtc.spoti.ch — Glüx Ready to Cook
   Swiss Prime Taste Design System: Schwarz #0E0D0B, Gold #D9B44A als einziger
   Akzent, Creme-Text, Radius 2 px, keine Schatten, keine Verläufe, Mono-Labels
   in Versalien, nichts unter 13 px.

   Eine dokumentierte Ausnahme von «Gold als einziger Akzent»: die vier
   Sortenfarben und die vier Linienfarben. Sie beschreiben die echten
   Packungen im Regal – die Überschrift lautet «Vier Sorten. Vier Farben.
   Ein Farbblock.» –, sind also Inhalt und nicht Dekoration. Sie erscheinen
   nur als kleiner Punkt bzw. als Kante an der Linienüberschrift, nie als
   Fläche. Der Kopf steht in assets/spt-header.css,
   der Fuss in assets/spt-footer.css — beide liegen in allen Repos gleich und
   werden hier nie verändert. */

:root{
  --bg: #0E0D0B;
  --panel: #16150F;
  --border: #262521;
  --text: #FDFBF7;
  --text-secondary: #9A948A;
  --gold: #D9B44A;
  --gold-hover: #C79E33;
  --hover-ghost: rgba(253, 251, 247, .06);

  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --max: 1280px;
  --gutter: 20px;
  --radius: 2px;
  --t: 160ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ transition: none !important; } }

body{
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; }
a{ color: var(--gold); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover{ color: var(--gold-hover); }
a:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
::selection{ background: var(--gold); color: var(--bg); }

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--gold); color: var(--bg); padding: 10px 16px;
  font-family: var(--font-mono); font-size: 13px;
}
.skip:focus{ left: 0; }

.wrap{ max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }

/* ── Abschnitte und Typografie ───────────────────────────────────────── */
.abschnitt{ padding-block: 72px; border-top: 1px solid var(--border); }
.abschnitt:first-of-type{ border-top: 0; }

.eyebrow{
  font-family: var(--font-mono); font-size: 13px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 16px;
}
h1{
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -.02em;
  font-weight: 700; margin: 0; text-wrap: balance;
}
h1 .au{ color: var(--gold); }
h2{
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.01em;
  font-weight: 700; margin: 0 0 18px; text-wrap: balance;
}
h3{ font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0; }
p{ margin: 0 0 14px; }
p:last-child{ margin-bottom: 0; }
.lead{ color: var(--text-secondary); max-width: 62ch; font-size: 17px; }
.hinweis{
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  letter-spacing: .04em; color: var(--text-secondary); margin-top: 24px;
}
.kernsatz{
  margin-top: 36px; padding-left: 20px; border-left: 2px solid var(--gold);
  font-size: 19px; line-height: 1.5; max-width: 54ch;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{ padding-block: 64px 72px; }
.hero__grid{ display: grid; grid-template-columns: 1.45fr 1fr; gap: 48px; align-items: center; }
.hero__sub{ color: var(--text-secondary); font-size: 17px; margin: 22px 0 30px; max-width: 52ch; }
.knopfreihe{ display: flex; flex-wrap: wrap; gap: 12px; }

/* Vier Sorten im Hero – die Packungen bringen die Farbe, der Grund der Fotos
   ist #0E0D0B und damit identisch mit dem Seitengrund (randloser Eindruck). */
.hero__sorten{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.hero__sorten figure{ margin: 0; min-width: 0; }
.hero__sorten img{
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.hero__sorten figcaption{
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.hero__sortenfuss{
  margin-top: 26px; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary);
}

.cta{
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; border-radius: var(--radius);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.cta--gold{ background: var(--gold); color: var(--bg); font-weight: 600; }
.cta--gold:hover{ background: var(--gold-hover); color: var(--bg); }
.cta--ghost{ border: 1px solid var(--border); color: var(--text); }
.cta--ghost:hover{ border-color: var(--gold); color: var(--gold); background: var(--hover-ghost); }

/* ── Datenkarte ──────────────────────────────────────────────────────── */
.datenkarte{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.datenkarte__kopf{
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.datenkarte dl{ margin: 0; }
.datenkarte .zeile{
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 2px 20px; padding-block: 11px;
  border-bottom: 1px solid var(--border);
}
.datenkarte .zeile:last-child{ border-bottom: 0; }
.datenkarte dt{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; margin: 0;
}
.datenkarte dd{
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  font-variant-numeric: tabular-nums; margin: 0 0 0 auto; text-align: right;
  overflow-wrap: anywhere; min-width: 0;
}
.datenkarte__fuss{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 0;
}

/* ── Schritte ────────────────────────────────────────────────────────── */
.schritte{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.schritt{ border-top: 1px solid var(--border); padding-top: 16px; min-width: 0; }
.schritt__n{
  font-family: var(--font-mono); font-size: 32px; line-height: 1; font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--gold);
}
.schritt h3{ margin: 14px 0 6px; }
.schritt p{ color: var(--text-secondary); font-size: 15px; }

/* ── Sortiment ───────────────────────────────────────────────────────── */
.regal{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.kat{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; min-width: 0;
}
.kat__nr{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.kat__punkt{ width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.kat h3{ margin: 14px 0 6px; }
.kat p{ color: var(--text-secondary); font-size: 15px; }
.kat__meta{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--border);
}

.marken{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.marke{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px;
}
.marke b{ color: var(--gold); font-weight: 600; }

/* ── Technik ─────────────────────────────────────────────────────────── */
.technik{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.technik__spalte{ display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.technik ul{ list-style: none; margin: 24px 0 0; padding: 0; }
.technik li{
  padding-block: 12px; border-bottom: 1px solid var(--border);
  color: var(--text-secondary); font-size: 15px;
}
.technik li b{ color: var(--text); font-weight: 600; }
.geraet{ text-align: center; }
.geraet img{ max-height: 470px; width: auto; }
.geraet__bu, .foto__bu{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 0;
}

/* ── Standorttypen ───────────────────────────────────────────────────── */
.orte{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 40px; }
.ort{ border-top: 1px solid var(--border); padding-top: 14px; min-width: 0; }
.ort__n{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
}
.ort h3{ font-size: 16px; margin: 8px 0 5px; }
.ort p{ color: var(--text-secondary); font-size: 14px; line-height: 1.5; }

/* ── Galerie ─────────────────────────────────────────────────────────── */
.galerie{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.foto{ min-width: 0; }
.foto img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); display: block; }

/* ── Markt und Ertrag ────────────────────────────────────────────────── */
.wege{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.weg{ border-top: 1px solid var(--border); padding-top: 16px; min-width: 0; }
.weg__titel{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.weg h3{ margin: 0 0 12px; }
.weg p{ color: var(--text-secondary); font-size: 15px; }
.jahre{ display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 16px; }
.jahr{ display: flex; justify-content: space-between; align-items: baseline; gap: 16px; background: var(--panel); padding: 12px 14px; }
.jahr__l{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.jahr__v{ font-family: var(--font-mono); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }

/* ── Modelle ─────────────────────────────────────────────────────────── */
.modelle{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.modell{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; min-width: 0;
}
.modell--hervor{ border-color: var(--gold); }
.modell__chip{
  align-self: flex-start; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); border-radius: var(--radius); padding: 5px 11px;
}
.modell__nr{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-secondary); margin: 18px 0 4px;
}
.modell h3{ font-size: 22px; margin: 0 0 16px; }
.modell ul{ list-style: none; margin: 0; padding: 0; }
.modell li{
  padding-block: 12px; border-top: 1px solid var(--border);
  color: var(--text-secondary); font-size: 15px;
}
.modell li b{ color: var(--text); font-weight: 600; }
.modell__vorteil{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin: auto 0 0; padding-top: 18px;
}

/* ── Medien ──────────────────────────────────────────────────────────── */
.medien{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.medium{
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; color: var(--text);
  transition: border-color var(--t) var(--ease);
}
.medium:hover{ border-color: var(--gold); color: var(--text); }
.medium__quelle{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.medium p{ margin: 0; font-size: 16px; line-height: 1.45; }
.medium__mehr{ font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin-top: auto; }

/* ── Abschluss ───────────────────────────────────────────────────────── */
.abschluss{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }

/* ── Weiterführende Verweise auf der Startseite ──────────────────────── */
.wegweiser{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.wegweiser a{
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
  color: var(--text); transition: border-color var(--t) var(--ease);
}
.wegweiser a:hover{ border-color: var(--gold); color: var(--text); }
.wegweiser b{ font-size: 17px; font-weight: 600; }
.wegweiser span{ color: var(--text-secondary); font-size: 15px; }
.wegweiser em{ font-style: normal; font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }

/* ── Schmale Bildschirme ─────────────────────────────────────────────── */
@media (max-width: 1000px){
  .hero__sorten{ grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  /* Gestapelt kommen die Packungen vor die Datenkarte – sie sind der Blickfang,
     die Kennzahlen folgen. display:contents hebt dafür das Hero-Raster auf. */
  .hero > .wrap{ display: flex; flex-direction: column; }
  .hero__grid{ display: contents; }
  .hero .eyebrow{ order: 0; }
  .hero__grid > div:first-child{ order: 1; }
  .hero__sorten{ order: 2; }
  .hero__sortenfuss{ order: 3; }
  .hero .datenkarte{ order: 4; margin-top: 36px; }
  .technik, .abschluss{ grid-template-columns: 1fr; gap: 36px; }
  .schritte, .regal, .wege, .modelle, .medien, .wegweiser{ grid-template-columns: repeat(2, 1fr); }
  .orte{ grid-template-columns: repeat(3, 1fr); }
  .galerie{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .abschnitt{ padding-block: 48px; }
  .hero{ padding-block: 40px 48px; }
  .schritte, .regal, .wege, .modelle, .medien, .wegweiser, .orte, .galerie{ grid-template-columns: 1fr; }
  .lead, .hero__sub{ font-size: 16px; }
  .kernsatz{ font-size: 17px; }
}


/* ── Heute im Regal: die vier Sorten ─────────────────────────────────── */
/* Sortenfarben wie auf den Packungen (bestätigt): Green Herbs grün,
   Lemon Pepper gelb, Curry à Ca Ri Ga pink, Smoking BBQ blau. */
.sorten{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.sorte{ min-width: 0; }
.sorte img{ width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.sorte__name{
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.sorte__punkt{ width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.sorte__prod{ font-size: 16px; font-weight: 600; margin: 6px 0 4px; }
.sorte__meta{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-secondary);
}

/* ── Konzeptlinien ───────────────────────────────────────────────────── */
.linie{ margin-top: 56px; }
.linie:first-of-type{ margin-top: 40px; }
.linie__kopf{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
  border-left: 2px solid var(--linienfarbe, var(--gold)); padding-left: 16px;
}
.linie__kopf h3{ font-size: 22px; }
.linie__tag{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.linie__tag b{ color: var(--text); font-weight: 600; }
.linie__inhalt{ display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; margin-top: 24px; align-items: start; }
.studie{ min-width: 0; }
.studie img{ width: 100%; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.studie__bu{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 0;
}
.packs{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; min-width: 0; }
.pack{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pack__chip{
  align-self: flex-start; font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 9px;
}
.pack__gx{ height: 22px; width: auto; align-self: flex-start; margin-top: 8px; }
.pack__prod{ font-size: 17px; font-weight: 600; margin-top: 6px; }
.pack__desc{ color: var(--text-secondary); font-size: 15px; }
.pack__meta{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-secondary);
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}

@media (max-width: 1000px){
  .sorten{ grid-template-columns: repeat(2, 1fr); }
  .linie__inhalt{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .sorten{ grid-template-columns: repeat(2, 1fr); }
  .packs{ grid-template-columns: 1fr; }
}

/* ── Zubereitung ─────────────────────────────────────────────────────── */
/* Grosse Mono-Uhr als Blickfang, ein Film, drei Bildschritte. Auf dem
   Handy werden die Schritte zum Wisch-Band (scroll-snap), damit die
   Bilder gross bleiben. */
.koch__kopf{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px; }
.koch__uhr{
  display: flex; flex-direction: column; align-items: flex-end; margin: 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--gold);
}
.koch__uhr span{ font-size: clamp(64px, 11vw, 148px); line-height: .85; font-weight: 500; letter-spacing: -.05em; }
.koch__uhr small{
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 12px;
}
.koch__film{ margin: 48px 0 0; }
.koch__film video{
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.koch{ list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.koch__schritt{ min-width: 0; }
.koch__schritt img{
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.koch__n{
  display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.koch__n span:last-child{ color: var(--text-secondary); }
.koch__schritt h3{ font-size: 22px; margin: 0 0 6px; }
.koch__schritt p:last-child{ color: var(--text-secondary); font-size: 15px; }

.ohne{ list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.ohne li{
  font-size: clamp(28px, 4.4vw, 52px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-secondary);
  text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: .08em;
}

@media (max-width: 760px){
  .koch__uhr{ align-items: flex-start; }
  .koch__film{ margin-top: 32px; }
  .koch{
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .koch::-webkit-scrollbar{ display: none; }
  .koch__schritt{ scroll-snap-align: start; }
}