/*
Theme Name: Nourish & Balance
Theme URI: https://example.com/nourish-and-balance
Description: Child-Theme für den Rezeptblog Nourish & Balance. Rezepte als Hauptbereich, Filter nach Mahlzeit und Prinzip, die Module „Warum das funktioniert" und „Tipp". Setzt ein klassisches Eltern-Theme voraus (GeneratePress, Kadence oder Astra) — die Templates nutzen nur Standard-WordPress-Funktionen.
Author: Julie
Version: 1.0.0
Template: generatepress
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: goldstoff
*/

/* ============================================================
   Hinweis zum Feld „Template:" oben
   Dort steht der Ordnername des Eltern-Themes. Nimmst du statt
   GeneratePress ein anderes, änderst du diese eine Zeile:
   kadence, astra, blocksy. Sonst nichts.
   ============================================================ */

/* ============================================================
   1 — DESIGNSYSTEM
   Alle Farben als Token. Jedes Token wird zuerst hier definiert,
   die Dunkelblöcke überschreiben nur noch.
   ============================================================ */

:root {
  --gs-paper:      #FFFFFF;
  --gs-card:       #FFFFFF;
  --gs-card-alt:   #F6F6F4;
  --gs-ink:        #171717;
  --gs-soft:       #52524E;
  --gs-faint:      #8C8C86;
  --gs-brand:      #171717;
  --gs-brand-hi:   #000000;
  --gs-brand-wash: #F6F6F4;
  --gs-on-brand:   #FFFFFF;
  --gs-gold:       #8A5308;
  --gs-gold-hi:    #A16207;
  --gs-gold-wash:  #FBF7F0;
  --gs-line:       #E4E4E0;
  --gs-line-soft:  #EFEFEB;

  /* Die Fußzeile ist die einzige große Fläche mit Farbe. */
  --gs-footer:     #1B3A30;

  /* Eine einzige Schriftfamilie. Der Unterschied zwischen
     Überschrift und Fließtext entsteht nur über Schnitt,
     Größe und Laufweite — nie über eine zweite Schrift.
     Jost liegt lokal unter assets/fonts/, siehe LIES-MICH.md.
     Nie von Googles Servern nachladen. */
  --gs-serif: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gs-sans:  "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gs-mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Abstandsstufen, 12 bis 96 px */
  --gs-s1: 0.75rem;
  --gs-s2: 1.5rem;
  --gs-s3: 2.25rem;
  --gs-s4: 3.5rem;
  --gs-s5: 6rem;

  --gs-measure: 34rem;
  --gs-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gs-paper:      #0D0D0D;
    --gs-card:       #141414;
    --gs-card-alt:   #191919;
    --gs-ink:        #F0F0EE;
    --gs-soft:       #A8A8A2;
    --gs-faint:      #807F7A;
    --gs-brand:      #F0F0EE;
    --gs-brand-hi:   #FFFFFF;
    --gs-brand-wash: #191919;
    --gs-on-brand:   #0D0D0D;
    --gs-gold:       #D6A24A;
    --gs-gold-hi:    #E3B463;
    --gs-gold-wash:  #1E1A12;
    --gs-line:       #2A2A28;
    --gs-line-soft:  #1F1F1D;
    --gs-footer:     #12241D;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --gs-paper:      #0D0D0D;
  --gs-card:       #141414;
  --gs-card-alt:   #191919;
  --gs-ink:        #F0F0EE;
  --gs-soft:       #A8A8A2;
  --gs-faint:      #807F7A;
  --gs-brand:      #F0F0EE;
  --gs-brand-hi:   #FFFFFF;
  --gs-brand-wash: #191919;
  --gs-on-brand:   #0D0D0D;
  --gs-gold:       #D6A24A;
  --gs-gold-hi:    #E3B463;
  --gs-gold-wash:  #1E1A12;
  --gs-line:       #2A2A28;
  --gs-line-soft:  #1F1F1D;
  --gs-footer:     #12241D;
  color-scheme: dark;
}

body {
  background: var(--gs-paper);
  color: var(--gs-ink);
  font-family: var(--gs-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.gs h1, .gs h2, .gs h3 { text-wrap: balance; }

:focus-visible {
  outline: 2px solid var(--gs-gold-hi);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gs *, .gs *::before, .gs *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   2 — BAUSTEINE
   Alles unter .gs, damit nichts aus dem Eltern-Theme
   versehentlich überschrieben wird.
   ============================================================ */

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

.gs-wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.gs-narrow {
  max-width: 44rem;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.gs-block { padding-block: 3rem; }
.gs-block + .gs-block { border-top: 1px solid var(--gs-line-soft); }

.gs-kicker {
  font-family: var(--gs-mono);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-gold);
}

.gs-h-section {
  font-family: var(--gs-serif);
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.gs-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.gs-textlink {
  background: none; border: 0; padding: 0; font: inherit;
  font-size: 0.85rem; color: var(--gs-brand); cursor: pointer;
  border-bottom: 1px solid currentColor; font-weight: 550;
  text-decoration: none;
}

.gs-btn {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 550;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--gs-brand);
  color: var(--gs-on-brand);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.gs-btn:hover { background: var(--gs-brand-hi); color: var(--gs-on-brand); }
.gs-btn:active { transform: translateY(1px); }
.gs-btn--ghost {
  background: none;
  border-color: var(--gs-line);
  color: var(--gs-ink);
}
.gs-btn--ghost:hover { background: var(--gs-card-alt); color: var(--gs-ink); }

/* ============================================================
   3 — RASTER UND KARTEN
   ============================================================ */

.gs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.gs-grid-recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.25rem; }

@media (max-width: 52rem) {
  .gs-grid4 { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .gs-grid-recipes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0.9rem; }
}

.gs-rcard {
  display: flex; flex-direction: column; gap: 0.6rem;
  text-align: left; color: var(--gs-ink); text-decoration: none;
  min-width: 0;
}
.gs-rcard__media { overflow: hidden; border-radius: var(--gs-radius); background: var(--gs-card-alt); }
.gs-rcard__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; max-width: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.25, 1);
}
.gs-rcard:hover .gs-rcard__media img { transform: scale(1.055); }
.gs-rcard h3 {
  font-family: var(--gs-serif); font-size: 1.08rem; font-weight: 500;
  line-height: 1.25; margin: 0;
  transition: color 0.2s ease;
}
.gs-rcard:hover h3 { color: var(--gs-brand); }

/* Die Prinzip-Marken: zeigen schon in der Übersicht, wie ein
   Gericht gebaut ist. Beschreibung, kein Versprechen. */
.gs-ptags { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.gs-ptag {
  font-family: var(--gs-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 2px;
  background: var(--gs-brand-wash);
  color: var(--gs-brand);
  border: 1px solid var(--gs-line);
}

.gs-meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; color: var(--gs-faint);
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.gs-meta .gs-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.gs-tile {
  position: relative;
  display: block;
  border-radius: var(--gs-radius);
  overflow: hidden;
  text-decoration: none;
}
.gs-tile img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; max-width: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.25, 1);
}
.gs-tile:hover img { transform: scale(1.05); }
.gs-tile__label {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(10,20,14,0.82), rgba(10,20,14,0));
  color: #fff; padding: 2.25rem 1rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.15rem;
  transition: padding-bottom 0.35s ease;
}
.gs-tile:hover .gs-tile__label { padding-bottom: 1.4rem; }
.gs-tile__label strong { font-family: var(--gs-serif); font-size: 1.05rem; font-weight: 500; }
.gs-tile__label span { font-size: 0.78rem; opacity: 0.85; }

/* Platzhalter, solange ein Rezept noch kein Beitragsbild hat */
.gs-noimg {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #C7CDA6 0%, #8B9464 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gs-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.9);
}
.gs-tile .gs-noimg { aspect-ratio: 1 / 1; }

/* ============================================================
   4 — FILTERLEISTE
   ============================================================ */

.gs-filterbar {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding-block: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--gs-line);
  margin-bottom: 1.75rem;
}
.gs-filterrow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.gs-flabel {
  font-family: var(--gs-mono); font-size: 0.63rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gs-faint);
  width: 6.5rem; flex-shrink: 0;
}
.gs-chip {
  font: inherit; font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--gs-line);
  background: var(--gs-card);
  color: var(--gs-soft);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}
.gs-chip:hover { border-color: var(--gs-brand); color: var(--gs-ink); }
.gs-chip:active { transform: translateY(1px); }
.gs-chip[aria-pressed="true"] {
  background: var(--gs-gold-wash);
  border-color: var(--gs-gold-hi);
  color: var(--gs-gold);
  font-weight: 600;
}
.gs-resultcount { font-size: 0.82rem; color: var(--gs-faint); font-variant-numeric: tabular-nums; }
.gs-filternote {
  font-size: 0.76rem; color: var(--gs-faint);
  max-width: 44rem; padding-left: 7.1rem; margin: 0;
}
@media (max-width: 40rem) {
  .gs-flabel { width: 100%; }
  .gs-filternote { padding-left: 0; }
}

/* ============================================================
   5 — MODUL „WARUM DAS FUNKTIONIERT"
   Wird als Block-Vorlage eingefügt. Die Klassennamen müssen mit
   inc/patterns.php übereinstimmen.
   ============================================================ */

.gs-why {
  background: var(--gs-card);
  border: 1px solid var(--gs-line);
  border-top: 3px solid var(--gs-brand);
  border-radius: var(--gs-radius);
  padding: 1.35rem 1.4rem 1.15rem;
  max-width: calc(var(--gs-measure) + 4rem);
  scroll-margin-top: 5rem;
}
.gs-why > * + * { margin-top: 0.9rem; }
.gs-why__title {
  font-family: var(--gs-serif); font-size: 1.35rem; font-weight: 500;
  line-height: 1.15; margin: 0;
}
.gs-why__sub { font-size: 0.82rem; color: var(--gs-faint); max-width: 30rem; margin: 0.3rem 0 0; }

/* Ein Punkt. Im Editor ist das eine Gruppe mit zwei Absätzen —
   deshalb ein Raster statt einer Liste. */
.gs-why__punkt {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: 0 0.75rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--gs-line-soft);
}
.gs-why__punkt::before {
  content: ""; width: 0.62rem; height: 0.62rem;
  margin-top: 0.42rem; border-radius: 50%;
  background: var(--gs-gold-hi);
  grid-row: 1 / span 2; justify-self: center;
}
.gs-why__punkt > * { grid-column: 2; margin: 0; }
.gs-why__punkt p { font-size: 0.91rem; line-height: 1.55; }
/* Der letzte Punkt vor der Fußzeile braucht keine Trennlinie */
.gs-why__punkt:has(+ .gs-why__foot) { border-bottom: 0; padding-bottom: 0; }

.gs-why__zutat {
  display: block;
  font-family: var(--gs-mono); font-size: 0.64rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gs-gold);
  margin-bottom: 0.15rem;
}
.gs-why__foot {
  font-size: 0.74rem; color: var(--gs-faint); line-height: 1.45;
  border-top: 1px solid var(--gs-line); padding-top: 0.75rem; margin: 0;
}
.gs-src {
  display: inline-block; margin-left: 0.3rem;
  font-family: var(--gs-mono); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gs-brand);
  text-decoration: none; border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.gs-src:hover { color: var(--gs-gold); }

/* ============================================================
   6 — MODUL „TIPP"
   ============================================================ */

.gs-tip {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.85rem;
  align-items: start;
  background: var(--gs-gold-wash);
  border: 1px solid var(--gs-gold-hi);
  border-radius: var(--gs-radius);
  padding: 1rem 1.2rem;
  max-width: calc(var(--gs-measure) + 4rem);
}
.gs-tip__icon {
  margin: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--gs-gold-hi); color: #2A2214;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gs-serif); font-size: 1.15rem; line-height: 1;
  flex-shrink: 0;
}
.gs-tip__body > * { margin: 0; }
.gs-tip__body > * + * { margin-top: 0.25rem; }
.gs-tip__body .gs-kicker { color: var(--gs-gold); }
.gs-tip__body p { font-size: 0.92rem; line-height: 1.55; }

/* ============================================================
   7 — REZEPTBEITRAG
   ============================================================ */

.gs-article { padding-block: 2.5rem 3rem; }
.gs-article__head { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.5rem; }
.gs-article__head h1 {
  font-family: var(--gs-serif);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 500; line-height: 1.1; letter-spacing: -0.015em;
  margin: 0;
}
.gs-crumbs { font-size: 0.76rem; color: var(--gs-faint); display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.gs-crumbs a { color: var(--gs-brand); text-decoration: none; }
.gs-crumbs a:hover { text-decoration: underline; }

.gs-content > * + * { margin-top: 1.15rem; }
.gs-content p, .gs-content ul, .gs-content ol { max-width: var(--gs-measure); }
.gs-content h2 {
  font-family: var(--gs-serif); font-size: 1.45rem; font-weight: 500;
  line-height: 1.2; margin-top: 2rem;
}
.gs-content li::marker { color: var(--gs-gold); }
.gs-content a { color: var(--gs-brand); text-decoration: underline; text-underline-offset: 2px; }

.gs-affiliate {
  font-size: 0.78rem; color: var(--gs-faint);
  background: var(--gs-card-alt);
  border-radius: var(--gs-radius);
  padding: 0.6rem 0.85rem;
  max-width: var(--gs-measure);
}

.gs-healthnote {
  border: 1px solid var(--gs-line);
  border-left: 3px solid var(--gs-gold-hi);
  background: var(--gs-gold-wash);
  border-radius: 0 var(--gs-radius) var(--gs-radius) 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.84rem; color: var(--gs-soft);
  max-width: calc(var(--gs-measure) + 3rem);
}

.gs-sources { max-width: var(--gs-measure); }
.gs-sources ol { padding-left: 1.2rem; }
.gs-sources li { font-size: 0.82rem; color: var(--gs-soft); margin-bottom: 0.5rem; }

/* ============================================================
   8 — STARTSEITE
   ============================================================ */

.gs-hero {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem; align-items: center;
  padding-block: 3.25rem 3rem;
}
.gs-hero__copy { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.gs-hero h1 {
  font-family: var(--gs-serif);
  font-size: clamp(2.3rem, 5.8vw, 4.3rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -0.018em;
  margin: 0;
}
.gs-hero p { font-size: 1.05rem; color: var(--gs-soft); max-width: 30rem; margin: 0; }
.gs-hero img { border-radius: var(--gs-radius); width: 100%; height: auto; max-width: 100%; }
@media (max-width: 52rem) {
  .gs-hero { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 2.25rem; }
}

.gs-princard {
  background: var(--gs-card);
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.gs-princard__num { font-family: var(--gs-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--gs-gold); }
.gs-princard h3 { font-family: var(--gs-serif); font-size: 1.12rem; font-weight: 500; margin: 0; }
.gs-princard p { font-size: 0.87rem; color: var(--gs-soft); margin: 0; }

.gs-newsletter {
  background: var(--gs-brand-wash);
  border: 1px solid var(--gs-line);
  border-radius: var(--gs-radius);
  padding: 2.25rem;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem;
  align-items: center;
}
.gs-newsletter h2 { font-family: var(--gs-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0; }
.gs-newsletter p { font-size: 0.93rem; color: var(--gs-soft); margin: 0.5rem 0 0; max-width: 26rem; }
@media (max-width: 52rem) {
  .gs-newsletter { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.25rem; }
}

.gs-artlist { display: flex; flex-direction: column; }
.gs-artrow {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.1rem;
  align-items: center; padding-block: 1rem;
  border-bottom: 1px solid var(--gs-line-soft);
  text-decoration: none; color: var(--gs-ink);
}
.gs-artrow img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--gs-radius); }
.gs-artrow h3 { font-family: var(--gs-serif); font-size: 1.05rem; font-weight: 500; line-height: 1.3; margin: 0; }
.gs-artrow:hover h3 { color: var(--gs-brand); }
.gs-artrow .gs-meta { margin-top: 0.25rem; }

/* ============================================================
   9 — EINBLENDEN BEIM SCROLLEN
   Startzustand ist sichtbar. Erst das Skript setzt die Elemente
   auf unsichtbar, und nur wenn es auch wieder einblenden kann.
   Ohne JavaScript bleibt alles lesbar.
   ============================================================ */

.gs-anim-ready [data-gs-anim] { opacity: 0; }
.gs-anim-ready [data-gs-anim].is-in {
  animation: gs-rise 0.6s cubic-bezier(0.22, 0.72, 0.28, 1) both;
}

@keyframes gs-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-anim-ready [data-gs-anim] { opacity: 1; }
}

/* ============================================================
   10 — FUSSZEILE
   Die einzige große Fläche mit Farbe. Das Eltern-Theme bringt
   eine eigene Fußzeile mit; diese Regeln färben sie um, ohne
   ihre Struktur anzufassen.
   ============================================================ */

.site-footer,
.gs-footer {
  background: var(--gs-footer);
  color: #E8EDE6;
  padding-block: var(--gs-s5) var(--gs-s3);
  margin-top: var(--gs-s5);
}

.site-footer a,
.gs-footer a {
  color: #E8EDE6;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 237, 230, 0.3);
}

.site-footer a:hover,
.gs-footer a:hover {
  border-bottom-color: #E8EDE6;
}

.site-footer :is(h1, h2, h3, h4),
.gs-footer :is(h1, h2, h3, h4) {
  color: #FFFFFF;
  font-weight: 500;
}

/* Leisere Zeile ganz unten: Impressum, Datenschutz, Jahreszahl */
.gs-footer__bottom {
  margin-top: var(--gs-s4);
  padding-top: var(--gs-s2);
  border-top: 1px solid rgba(232, 237, 230, 0.18);
  font-size: 0.8rem;
  color: rgba(232, 237, 230, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-s2);
  justify-content: space-between;
}

.gs-footer__wordmark {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}

.gs-footer__wordmark em {
  font-style: normal;
  color: var(--gs-gold-hi);
}

/* ============================================================
   11 — DIE REIHENFOLGE IN DER SCHALE
   Eine Schale von oben. Die Komponenten fallen nacheinander
   hinein und bleiben liegen, damit man sieht, in welcher
   Reihenfolge gegessen wird. Das Öl ist kein eigener Schritt,
   es liegt über allem.

   Das Bild zeigt eine übliche Aufteilung, keine Vorschrift.
   ============================================================ */

.gs-order {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: var(--gs-s4);
  align-items: center;
}

@media (max-width: 52rem) {
  .gs-order { grid-template-columns: 1fr; gap: var(--gs-s2); }
}

.gs-order__bowl {
  width: 100%;
  max-width: 23rem;
  margin: 0 auto;
  color: var(--gs-ink);
}

.gs-order__bowl svg { display: block; width: 100%; height: auto; }

/* Jede Komponente fällt von oben in die Schale und bleibt liegen. */
.gs-order__layer {
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.85, 0.3, 1.06);
}

.gs-order__layer.is-off { opacity: 0; transform: translateY(-26px); }

/* Das Öl kommt einen Tick später als der Schritt, zu dem es gehört. */
.gs-order__layer--late { transition-delay: 0.22s; }

.gs-order__steps { list-style: none; margin: 0; padding: 0; }
.gs-order__steps li { border-top: 1px solid var(--gs-line); margin: 0; }
.gs-order__steps li:last-child { border-bottom: 1px solid var(--gs-line); }

.gs-order__btn {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  align-items: baseline;
  background: none;
  border: 0;
  padding: 1.2rem 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--gs-faint);
  transition: color 0.45s ease;
}

.gs-order__btn[aria-pressed="true"] { color: var(--gs-ink); }

.gs-order__num {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gs-faint);
  transition: color 0.45s ease;
}

.gs-order__btn[aria-pressed="true"] .gs-order__num { color: var(--gs-gold); }

.gs-order__btn b {
  display: block;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
}

.gs-order__btn .gs-order__desc {
  display: block;
  font-size: 0.9rem;
  color: var(--gs-soft);
  margin-top: 0.2rem;
}

.gs-order__note {
  font-size: 0.9rem;
  color: var(--gs-soft);
  max-width: 38rem;
  margin-top: var(--gs-s2);
  padding-top: var(--gs-s1);
  border-top: 1px solid var(--gs-line-soft);
}

/* Ohne JavaScript und bei abgeschalteter Animation liegt alles
   von Anfang an in der Schale. Die Grafik bleibt lesbar. */
@media (prefers-reduced-motion: reduce) {
  .gs-order__layer,
  .gs-order__layer.is-off { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   12 — DIE REZEPTBAHN AUF DER STARTSEITE

   Eine waagerechte Bahn mit Einrastpunkten. Ohne JavaScript
   funktioniert sie bereits: wischen, scrollen, mit der Tastatur
   bedienen. Die beiden Pfeile blendet erst assets/slider.js ein,
   damit keine toten Knöpfe herumstehen.
   ============================================================ */

.gs-slider { position: relative; }

.gs-slider__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Damit die Karten am Rand der Inhaltsspalte einrasten und
     trotzdem bis zum Rand weiterlaufen dürfen. */
  padding-bottom: var(--gs-s1);
  scrollbar-width: thin;
  scrollbar-color: var(--gs-line) transparent;
}

.gs-slider__track::-webkit-scrollbar { height: 6px; }
.gs-slider__track::-webkit-scrollbar-track { background: transparent; }
.gs-slider__track::-webkit-scrollbar-thumb {
  background: var(--gs-line);
  border-radius: 999px;
}

.gs-slider__track:focus-visible {
  outline: 2px solid var(--gs-gold-hi);
  outline-offset: 4px;
}

.gs-slider__item {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

@media (max-width: 52rem) {
  .gs-slider__track { gap: 0.9rem; }
  .gs-slider__item { flex-basis: calc((100% - 0.9rem) / 2); }
}

@media (max-width: 34rem) {
  /* Die angeschnittene zweite Karte zeigt, dass es weitergeht. */
  .gs-slider__item { flex-basis: 78%; }
}

.gs-slider__nav {
  position: absolute;
  top: calc(50% - 2.5rem);
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--gs-line);
  border-radius: 999px;
  background: var(--gs-card);
  color: var(--gs-ink);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.gs-slider__nav:hover { border-color: var(--gs-ink); }
.gs-slider__nav--prev { left: -1.1rem; }
.gs-slider__nav--next { right: -1.1rem; }

/* Am Anfang und am Ende der Bahn verschwindet der jeweilige
   Pfeil, statt grau und unerklärlich dazustehen. */
.gs-slider__nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 60rem) {
  /* Auf schmalen Geräten wischt man ohnehin. */
  .gs-slider__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-slider__track { scroll-behavior: auto; }
}