/* feierabend-rezepte.de: mobil zuerst, warm und hell. Projektfarbe Paprika in zwei Stufen:
   --haupt (akzentfarbe) für Flächen, Linien, Akzente, --akzent (akzentfarbe_text) für Buttons, Links und Text.
   Beide Werte setzt der Build aus site.config.json und prüft den Kontrast.
   Schriften lokal: Fraunces (Überschriften), Atkinson Hyperlegible (Text). Keine externen Anfragen. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700.woff2") format("woff2");
}

:root {
  --haupt: #D9603B;
  --akzent: #A63D1F;
  --akzent-dunkel: #85301a;
  --text: #2b1d16;
  --text-leise: #66503f;
  --grund: #fffaf4;
  --flaeche: #fbeadb;
  --flaeche-hell: #fff3e7;
  --weiss: #ffffff;
  --linie: #ecd5c2;
  --petrol: #2c626b;
  --rand: 1rem;
  --radius: 1rem;
  --schatten: 0 1px 2px rgba(43, 29, 22, 0.06), 0 8px 24px rgba(43, 29, 22, 0.08);
  --titel: "Fraunces", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
picture { display: block; }
a { color: var(--akzent); text-underline-offset: 0.16em; }
a:hover { color: var(--akzent-dunkel); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

.innen { max-width: 72rem; margin: 0 auto; padding: 0 var(--rand); }
.innen.text { max-width: 44rem; padding-top: 1.5rem; }

h1, h2, h3 { font-family: var(--titel); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: 2rem; line-height: 1.12; margin: 0.4rem 0 1rem; }
h2 { font-size: 1.45rem; line-height: 1.25; margin: 2.25rem 0 0.9rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.5rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

.kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent);
}
.gross { font-size: 1.15rem; line-height: 1.55; color: var(--text-leise); }

/* Kopf */
.kopf { background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; min-height: 3.75rem; }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--petrol); font-family: var(--titel); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.marke:hover { color: var(--petrol); }
.marke-symbol { flex: none; transition: transform 0.25s ease; }
.marke:hover .marke-symbol { transform: rotate(-8deg); }
.marke-akzent { color: var(--akzent); }
.kopf-link { font-weight: 700; text-decoration: none; padding: 0.5rem 0; }

main { padding-bottom: 2.5rem; }

/* Buttons und Werbekennzeichnung */
.button {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;
  min-height: 3.1rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.button:hover { background: var(--akzent-dunkel); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(166, 61, 31, 0.25); }
.werbelink { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--text-leise); text-align: center; }

/* Produktkasten (Anzeige) */
.produkt {
  margin: 2rem 0;
  padding: 1.25rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 5px solid var(--haupt);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.produkt h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.produkt p:not(.kicker):not(.werbelink) { color: var(--text-leise); }
.produkt.kompakt { margin: 0 0 1.75rem; padding: 0.9rem 1rem 1rem; }
.produkt.mit-bild { padding: 0; overflow: hidden; border-top: 0; }
.produkt.mit-bild .produkt-text { padding: 1.1rem 1.25rem 1.25rem; border-top: 5px solid var(--haupt); }
.produkt-bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); }

/* Startseite */
.buehne { background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund) 100%); padding: 2rem 0 1rem; }
.buehne h1 { font-size: 2.35rem; }
.buehne-links { font-weight: 700; }
.buehne .produkt { margin: 1.5rem 0 0; }
.buehne .produkt-bild img { aspect-ratio: 16 / 9; }

.abschnitt { margin-top: 2.5rem; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf a { font-weight: 700; }

/* Rezeptkarten */
.karten { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.karte { margin: 0; }
.karte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); transition: transform 0.2s, box-shadow 0.2s; }
.karte a:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43, 29, 22, 0.08), 0 14px 30px rgba(43, 29, 22, 0.12); }
.karte-bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--flaeche); }
.karte-bild.leer { display: block; aspect-ratio: 4 / 3; background: var(--flaeche); }
.karte-text { display: block; padding: 0.85rem 1rem 1rem; }
.karte-text strong { display: block; font-family: var(--titel); font-size: 1.12rem; line-height: 1.3; margin-bottom: 0.3rem; }
.karte a:hover strong { color: var(--akzent); }
.karte-meta { display: block; font-size: 0.9rem; color: var(--text-leise); }

/* Kategorie-Kacheln */
.kacheln { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
.kachel { margin: 0; }
.kachel a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--text); }
.kachel-bild img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0.92; transition: transform 0.4s ease; }
.kachel a:hover .kachel-bild img { transform: scale(1.04); }
.kachel-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 0.75rem 0.7rem; background: linear-gradient(180deg, rgba(20, 12, 8, 0) 0%, rgba(20, 12, 8, 0.82) 55%); color: #fff; }
.kachel-text strong { display: block; font-family: var(--titel); font-size: 1.02rem; line-height: 1.2; }
.kachel-text span { font-size: 0.82rem; }

/* Kategorie- und Rezeptseite */
.krumen { font-size: 0.9rem; color: var(--text-leise); padding-top: 1rem; }
.krumen a { color: var(--text-leise); }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { margin: 0; }
.chips a { display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--flaeche); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.chips a:hover { background: var(--haupt); color: #fff; }

.rezept { max-width: 50rem; }
.eckdaten { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eckdaten li { margin: 0; padding: 0.4rem 0.8rem; background: var(--flaeche); border-radius: 0.6rem; font-size: 0.9rem; line-height: 1.3; }
.eckdaten span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-leise); }
.titelbild { margin: 0 calc(-1 * var(--rand)) 1.25rem; }
.titelbild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--flaeche); }
.titelbild figcaption { padding: 0.35rem var(--rand) 0; font-size: 0.78rem; color: var(--text-leise); }
.einstieg p { font-size: 1.12rem; }

.rezept-raster { display: grid; gap: 1.5rem; margin: 1rem 0; }
.zutaten { background: var(--flaeche-hell); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.25rem 0.5rem; }
.zutaten h2, .schritte h2 { margin-top: 0; }
.zutaten small { display: block; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; font-size: 0.85rem; font-weight: 400; color: var(--text-leise); }
.zutaten ul { list-style: none; padding: 0; }
.zutaten li { position: relative; padding: 0.45rem 0 0.45rem 1.4rem; margin: 0; border-bottom: 1px dashed var(--linie); }
.zutaten li:last-child { border-bottom: 0; }
.zutaten li::before { content: ""; position: absolute; left: 0.1rem; top: 0.95rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--haupt); }
.schritte ol { list-style: none; padding: 0; counter-reset: schritt; }
.schritte li { position: relative; counter-increment: schritt; padding: 0 0 1.1rem 3rem; margin: 0; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -0.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--akzent); color: #fff; font-family: var(--titel); font-weight: 700; display: grid; place-items: center; font-size: 1rem; }
.zusatz ul { padding-left: 1.25rem; }
.zusatz li::marker { color: var(--haupt); }
.weitere { margin-top: 3rem; }
.mit-leiste ~ .weitere { padding-bottom: 4.5rem; }

/* Längerer Text unter der Rezeptliste der Kategorieseiten (SEO-Ausbau) */
.kategorie-text { max-width: 46rem; margin-top: 2.5rem; }
.kategorie-text h3 { font-size: 1.12rem; }
.zusatz h3 { font-size: 1.12rem; }

/* Link-in-Bio-Seite /start/ */
.start-kopf { display: flex; gap: 1.25rem; align-items: center; padding-top: 1.5rem; }
.start-kopf img { flex: none; width: 110px; height: auto; }
.start-kopf h1 { margin: 0 0 0.5rem; font-size: 1.7rem; }
.start-kopf p { margin: 0; font-size: 1.05rem; }

/* Feste Produktleiste (nur Handy, erscheint per leiste.js nach dem ersten Produktkasten) */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--grund);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px rgba(43, 29, 22, 0.12);
  padding: 0.55rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.leiste.sichtbar { transform: none; visibility: visible; transition: transform 0.25s ease; }
.leiste .innen { display: flex; align-items: center; gap: 0.75rem; }
.leiste .button { flex: 1; min-height: 2.8rem; padding: 0.6rem 1rem; font-size: 1rem; }
.leiste .werbung { flex: none; font-size: 0.85rem; color: var(--text-leise); }

/* Fuß */
.fuss-logo { display: block; width: 110px; height: auto; margin: 0 0 1.25rem; }
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche-hell); padding: 1.75rem 0 2.5rem; font-size: 0.95rem; color: var(--text-leise); }
.fuss-kategorien { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-bottom: 1rem; }
.fuss-kategorien a, .fuss-recht a { display: inline-block; padding: 0.3rem 0; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--linie); }
.fuss p { margin: 0.75rem 0 0; }
.fuss-hinweis { font-size: 0.9rem; }

@media (min-width: 40rem) {
  :root { --rand: 1.5rem; }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .titelbild { margin-left: 0; margin-right: 0; }
  .titelbild img { border-radius: var(--radius); }
  .titelbild figcaption { padding-left: 0; }
}

@media (min-width: 56rem) {
  body { font-size: 1.125rem; }
  h1 { font-size: 2.75rem; }
  .button { display: inline-block; width: auto; min-width: 18rem; }
  .werbelink { text-align: left; }
  .buehne { padding: 3.5rem 0 2.5rem; }
  .buehne-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
  .buehne h1 { font-size: 3.6rem; max-width: 12ch; }
  .buehne .produkt { margin: 0; }
  .buehne .produkt-bild img { aspect-ratio: 4 / 3; }
  .produkt.mit-bild .button { display: block; width: 100%; min-width: 0; }
  .produkt.mit-bild .werbelink { text-align: center; }
  .kacheln { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  .karten { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .rezept-raster { grid-template-columns: 1fr 1.6fr; gap: 2.5rem; align-items: start; }
  .zutaten { position: sticky; top: 1rem; }
  .leiste { display: none; }
  .mit-leiste ~ .weitere { padding-bottom: 0; }
}

/* Bewegung nur bei Hover, abschaltbar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Browser-Nachweis für die Statistik: Nur ein Browser, der dieses CSS lädt und anwendet, ruft /v ab
   (winzige Datei vom eigenen Server, nie zwischengespeichert, kein Cookie). Siehe src/lib/statistik.mjs. */
body::after { content: ""; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); background: url("/v") no-repeat; }