/* ==========================================================================
   SCHRIFT
   Nunito, selbst gehostet. Eine Rundungs-Grotesk — weiche Enden, kräftige
   Fettschnitte — und damit nah am Logo-Schriftzug. Die bisherige Serifenschrift
   stand im Widerspruch dazu: Sie wirkte gesetzt, wo die Marke freundlich sein
   will, und passte neben dem runden Logo wie ein Anzug zur Kochschürze.

   SELBST GEHOSTET, NICHT ÜBER DAS GOOGLE-CDN. Das ist keine Kleinigkeit: Der
   Abruf über fonts.googleapis.com überträgt die IP-Adresse jedes Besuchers in
   die USA — das LG München I hat darin 2022 einen DSGVO-Verstoß gesehen. Die
   Dateien liegen deshalb unter assets/fonts/, Lizenz siehe LIZENZ.txt dort.

   Es sind variable Schnitte: EINE Datei deckt alle Stärken von 400 bis 900 ab.
   Vier Dateien (gerade/kursiv × latin/latin-ext) statt acht Einzelschnitten,
   zusammen rund 155 kB.

   font-display: swap sorgt dafür, dass der Text sofort in der Systemschrift
   erscheint und nicht unsichtbar bleibt, bis die Schrift geladen ist.
   ========================================================================== */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin-ext-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* ==========================================================================
   fetti.de – Design-System
   Mobile first. Keine externen Requests (DSGVO), keine Frameworks.
   Schriften: siehe README.md, Abschnitt "Schriften selbst hosten".
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Farbwelt, abgeleitet aus dem Logo (Magenta-Kreis, schwarzer Schriftzug,
     graue Unterzeile, rosa Schweinchen).
     --------------------------------------------------------------------- */
  --c-primary: #e6007e; /* Magenta aus dem Logo-Kreis und dem Punkt in Fetti.de */
  --c-primary-dark: #b00062; /* dunklere Variante für Hover und Text auf Hell */
  --c-primary-light: #fde3ef; /* zarter Magenta-Schleier für Flächen */
  --c-pig: #f6b8cd; /* Rosa des Schweinchens, für weiche Akzente */
  --c-save: #0f7a4e; /* Spar- und Cashback-Signal, gedecktes Grün */
  --c-save-light: #e2f4ec;
  --c-highlight: #ffb703; /* Rabatt-Badges */
  --c-bg: #fdfafb; /* Off-White mit einem Hauch Rosa */
  --c-text: #1a1a1a; /* Schwarz des Schriftzugs */
  --c-muted: #5c5c5c; /* aus dem Grau der Unterzeile abgeleitet */
  --c-card: #fdeef4; /* zartes Rosa statt Creme */
  --c-surface: #ffffff;
  --c-border: #f2dae5;

  /* Typografie */
  /* Überschriften in der schweren Nunito — sie trägt den Ton des Logos.
     Fließtext bleibt auf der Systemschrift: Sie ist bereits geladen, kostet
     keinen einzigen Byte und liest sich in langen Absätzen ruhiger. */
  --f-head: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --wrap: 1120px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 8px 24px rgba(150, 0, 82, 0.08);
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.08);
  --space: 1rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--c-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: #7d0046;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-head);
  line-height: 1.2;
  /* 800 statt 700: Die Wortmarke im Logo ist deutlich schwerer als ein
     normales Fett. Erst in dieser Stärke sprechen Überschrift und Logo
     dieselbe Sprache. */
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
}
h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}
h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

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

.wrap--narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.section--card {
  background: var(--c-card);
}

.section__head {
  margin-bottom: 2rem;
}

.section__head p {
  color: var(--c-muted);
  max-width: 62ch;
  margin: 0;
}

.lead {
  font-size: 1.15rem;
  color: var(--c-muted);
  max-width: 62ch;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--c-primary);
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 1rem;
  color: #fff;
}

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

/* --------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--c-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--c-primary-dark);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  color: var(--c-primary-dark);
  border-color: var(--c-primary);
}

.btn--secondary:hover {
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
}

.btn--save {
  background: var(--c-save);
  color: #fff;
}

.btn--save:hover {
  background: #0b5c3a;
  color: #fff;
}

.btn--block {
  width: 100%;
}

.btn--small {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(253, 250, 251, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

/* Logo-Slot: Das echte Logo wird als assets/img/logo.png|svg eingesetzt.
   Solange keine Datei vorhanden ist, greift der Text-Platzhalter. */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}

/* Das Logo ist zweizeilig (Schriftzug plus "Das Rezepte-Portal"). Unter etwa
   46 px Höhe wird die Unterzeile unleserlich, deshalb bekommt es mehr Raum als
   eine einzeilige Wortmarke brauchen würde. */
.logo img {
  height: 46px;
  width: auto;
}

@media (min-width: 900px) {
  .logo img {
    height: 58px;
  }
}

.logo__placeholder {
  font-family: var(--f-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--c-primary-dark);
  border: 2px dashed var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  white-space: nowrap;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
}

.site-nav {
  display: none;
}

.site-nav[data-open="true"] {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow);
  padding: 0.5rem 1.25rem 1.25rem;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.site-nav a {
  display: block;
  padding: 0.65rem 0.25rem;
  color: var(--c-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--c-border);
}

.site-nav a[aria-current="page"] {
  color: var(--c-primary-dark);
  font-weight: 700;
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav[data-open="true"] {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 0.35rem;
    align-items: center;
  }

  .site-nav a {
    border: 0;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
  }

  .site-nav a:hover {
    background: var(--c-primary-light);
  }

  .site-nav a[aria-current="page"] {
    background: var(--c-primary-light);
  }
}

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

.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem);
  background: linear-gradient(170deg, var(--c-card) 0%, var(--c-bg) 70%);
  border-bottom: 1px solid var(--c-border);
}

.hero__grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero h1 {
  margin-bottom: 0.4em;
}

.hero__claim {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  background: var(--c-primary-light);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.hero__sub {
  font-size: 1.15rem;
  color: var(--c-muted);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}

.hero__fact strong {
  display: block;
  font-family: var(--f-head);
  font-size: 1.6rem;
  color: var(--c-primary);
}

.hero__fact span {
  font-size: 0.9rem;
  color: var(--c-muted);
}

@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* ----------------------------------------------------------- Platzhalter */
/* Farbige Bildplatzhalter, bis echte Food-Fotos vorliegen.
   Austausch: <img> statt <div class="thumb"> einsetzen, Seitenverhältnis 4:3. */

.thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(135deg, var(--c-pig), var(--c-primary));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.35),
      transparent 45%
    ),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.2), transparent 40%);
}

.thumb__icon {
  width: 38%;
  max-width: 96px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* Alle Verläufe bleiben in der Magenta-Familie des Logos, damit die Karten als
   eine Marke lesbar sind. Variiert wird nur die Tiefe und ein Schritt Richtung
   Koralle beziehungsweise Violett. */
.thumb--1 { background: linear-gradient(135deg, #ff4d9d, #7a0043); }
.thumb--2 { background: linear-gradient(135deg, #f6b8cd, #e6007e); }
.thumb--3 { background: linear-gradient(135deg, #ff86b8, #b00062); }
.thumb--4 { background: linear-gradient(135deg, #ffb0cf, #d1006f); }
.thumb--5 { background: linear-gradient(135deg, #ff6f91, #96003f); }
.thumb--6 { background: linear-gradient(135deg, #ff9ec4, #a3005a); }
.thumb--7 { background: linear-gradient(135deg, #e6007e, #4a0029); }
.thumb--8 { background: linear-gradient(135deg, #ffc2d8, #c2006a); }
.thumb--9 { background: linear-gradient(135deg, #f472b6, #6b1350); }
.thumb--10 { background: linear-gradient(135deg, #ff7a86, #a10046); }
.thumb--11 { background: linear-gradient(135deg, #ffd0e2, #e6007e); }
.thumb--12 { background: linear-gradient(135deg, #d648b0, #5b0a4e); }

.thumb--hero {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.thumb--detail {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

/* ----------------------------------------------------------------- Cards */

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.card__body {
  padding: 1.1rem 1.15rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card__title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--c-primary-dark);
}

.card__teaser {
  color: var(--c-muted);
  font-size: 0.95rem;
  flex: 1;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------- Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--c-primary-light);
  color: var(--c-primary-dark);
  white-space: nowrap;
}

.badge--price {
  background: var(--c-primary);
  color: #fff;
}

.badge--save {
  background: var(--c-save-light);
  color: #0f5c2e;
}

.badge--discount {
  background: var(--c-highlight);
  color: #23180a;
}

.badge--time {
  background: transparent;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
}

/* Werbekennzeichnung – muss überall deutlich sichtbar bleiben */
.ad-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5330;
  background: #f6e7c8;
  border: 1px solid #e3cf9f;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
}

.ad-note {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-top: 1rem;
}

/* ------------------------------------------------------------ So geht es */

.steps {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.step__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

.step h3 {
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--c-muted);
  font-size: 0.95rem;
  margin: 0;
}

.step__no {
  counter-increment: step;
  font-family: var(--f-head);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  letter-spacing: 0.1em;
}

.step__no::before {
  content: "SCHRITT 0" counter(step);
}

/* ------------------------------------------------------------ Newsletter */

/* Verlauf statt Vollton: Das Kleingedruckte am unteren Rand steht dadurch auf
   dem dunkleren Magenta und erreicht sicher den AA-Kontrast von 4,5:1. */
.newsletter {
  background: linear-gradient(135deg, #e6007e 0%, #a30057 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.newsletter h2 {
  color: #fff;
  margin-bottom: 0.4em;
}

.newsletter p {
  color: rgba(255, 255, 255, 0.95);
  max-width: 52ch;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.newsletter__form input[type="email"] {
  flex: 1 1 260px;
  padding: 0.85rem 1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--c-text);
}

.newsletter__form .btn {
  background: #fff;
  color: var(--c-primary-dark);
}

.newsletter__form .btn:hover {
  background: var(--c-card);
  color: var(--c-primary-dark);
}

.newsletter__legal {
  font-size: 0.85rem;
  color: #fff;
  margin-top: 1rem;
  max-width: 62ch;
}

.newsletter__legal a {
  color: #fff;
}

.form-status {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------- Filters */

.filters {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.filters__row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  margin-bottom: 0.35rem;
}

.field select,
.field input[type="search"],
.field input[type="text"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-text);
}

.filters__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border);
}

.result-count {
  font-size: 0.95rem;
  color: var(--c-muted);
  margin: 0;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--c-muted);
}

/* ------------------------------------------------------- Rezept-Detail */

.recipe-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.recipe-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .recipe-layout {
    grid-template-columns: 340px 1fr;
  }
}

.ingredients {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: sticky;
  top: 90px;
}

.ingredients h2 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.portions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border);
}

.portions__label {
  font-size: 0.9rem;
  color: var(--c-muted);
  flex: 1;
}

.portions__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary-dark);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.portions__btn:hover {
  background: var(--c-primary);
  color: #fff;
}

.portions__value {
  font-family: var(--f-head);
  font-size: 1.35rem;
  font-weight: 700;
  min-width: 2ch;
  text-align: center;
}

.ingredients ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ingredients li {
  display: flex;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 0.97rem;
}

.ingredients li:last-child {
  border-bottom: 0;
}

.ingredients .amount {
  font-weight: 700;
  color: var(--c-primary-dark);
  flex: 0 0 auto;
  min-width: 5.5rem;
}

.cost-box {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.95rem;
}

.cost-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
}

.cost-box dt {
  color: var(--c-muted);
}

.cost-box dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.instructions {
  list-style: none;
  counter-reset: instr;
  margin: 0;
  padding: 0;
}

.instructions li {
  counter-increment: instr;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.5rem;
}

.instructions li::before {
  content: counter(instr);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
}

.save-box {
  background: var(--c-save-light);
  border: 1px solid #bfe0cb;
  border-left: 5px solid var(--c-save);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2.5rem 0;
}

.save-box h2 {
  font-size: 1.25rem;
  color: #0f5c2e;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.save-box p:last-child {
  margin-bottom: 0;
}

.save-box__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------- Vergleich */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

table.compare th,
table.compare td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
  font-size: 0.95rem;
}

table.compare thead th {
  background: var(--c-card);
  font-family: var(--f-head);
  font-size: 1rem;
}

table.compare tbody th {
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}

table.compare tr:last-child td,
table.compare tr:last-child th {
  border-bottom: 0;
}

/* ------------------------------------------------------------- Artikel */

.prose h2 {
  margin-top: 2.5rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.prose th,
.prose td {
  border: 1px solid var(--c-border);
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-size: 0.95rem;
}

.prose th {
  background: var(--c-card);
}

/* E-Mail-Adresse im Impressum: richtig fuer Menschen, unbrauchbar fuer
   Sammelprogramme. Dasselbe Verfahren wie auf karl-ott.com. In der Adresse
   stehen zwei Stuecke, die hier ausgeblendet werden. Wer die Auszeichnung
   entfernt und dann nach dem Muster name@domain sucht — so arbeiten
   Adresssammler — liest eine Anschrift, die auf .mail endet. Diese Endung ist
   von der ICANN dauerhaft gesperrt und wurde nie an die Wurzelzone delegiert:
   sie loest nirgends auf, Post dorthin verlaesst den Absender nicht. Bewusst
   NICHT .invalid und keine erfundene Subdomain: Ersteres ist als Falle bekannt
   und wird von manchen Sammlern uebersprungen, Letzteres koennte zustellbar
   sein. Fuer Menschen aendert sich nichts — angezeigt, vorgelesen, kopiert und
   von der Seitensuche gefunden wird die richtige Adresse, denn display:none
   bleibt in allen vier Faellen aussen vor. Einen mailto-Verweis gibt es
   bewusst nicht. */
.mail {
  white-space: nowrap;
}

.ms {
  display: none;
}

.breadcrumb {
  font-size: 0.9rem;
  color: var(--c-muted);
  padding-top: 1.5rem;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 0.4rem;
  color: var(--c-border);
}

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

.site-footer {
  background: #1a1a1a;
  color: #d6d6d6;
  padding-block: 3rem 2rem;
  margin-top: 4rem;
}

.site-footer a {
  color: #ff9ec4;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.site-footer h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.75rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
}

.site-footer p {
  font-size: 0.92rem;
  color: #a1a1a1;
}

.socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.socials a {
  width: 38px;
  height: 38px;
  border: 1px solid #3a3a3a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.socials a:hover {
  background: #3a3a3a;
  text-decoration: none;
}

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #3a3a3a;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
}

/* ------------------------------------------------------- Cookie-Banner */

.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background: var(--c-surface);
  border-top: 3px solid var(--c-primary);
  box-shadow: 0 -8px 30px rgba(31, 41, 55, 0.18);
  padding: 1.25rem 0 1.5rem;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner h2 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.cookie-banner p {
  font-size: 0.92rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
  max-width: 75ch;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-options {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.cookie-options label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.cookie-options input {
  margin-top: 0.25rem;
}

.cookie-options strong {
  display: block;
}

.cookie-options span {
  color: var(--c-muted);
}

@media (min-width: 700px) {
  .cookie-options {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* ==========================================================================
   BEWEGUNG UND FEINSCHLIFF
   Nachgelagerter Block, damit die Grundregeln oben unangetastet bleiben.

   Grundsatz: Bewegung erklärt etwas oder sie fliegt raus. Jede Animation hier
   hat eine Aufgabe — zeigen, dass etwas neu im Bild ist, dass etwas anklickbar
   ist oder dass sich ein Wert gerade geändert hat. Nichts bewegt sich dauerhaft
   im Sichtfeld, während man liest.

   Die Einblendungen beim Scrollen setzt JavaScript per Klasse. Läuft kein
   JavaScript, ist schlicht alles sofort sichtbar — nichts versteckt sich.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ------------------------------------------------ Einblenden beim Scrollen */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

@keyframes fetti-auf {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__claim,
.hero h1,
.hero__sub,
.hero__actions,
.hero__facts,
.hero__grid > div:last-child {
  animation: fetti-auf 0.7s var(--ease-out) backwards;
}

.hero__claim { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.14s; }
.hero__grid > div:last-child { animation-delay: 0.2s; }
.hero__sub { animation-delay: 0.24s; }
.hero__actions { animation-delay: 0.34s; }
.hero__facts { animation-delay: 0.44s; }

/* Zwei weiche Farbwolken im Hintergrund, sehr langsam und sehr diffus. Sie
   liegen hinter dem Text (z-index) und sind rein dekorativ. */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 440px;
  height: 440px;
  top: -160px;
  left: -140px;
  background: radial-gradient(circle, rgba(255, 140, 196, 0.55), transparent 70%);
  animation: fetti-schweben 19s ease-in-out infinite;
}

.hero::after {
  width: 380px;
  height: 380px;
  bottom: -180px;
  right: -90px;
  background: radial-gradient(circle, rgba(255, 190, 220, 0.6), transparent 70%);
  animation: fetti-schweben 25s ease-in-out infinite reverse;
}

@keyframes fetti-schweben {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(34px, -26px, 0) scale(1.08); }
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Der zweite Satz der Schlagzeile trägt die Markenfarbe. */
.hero h1 .akzent {
  background: linear-gradient(100deg, #e6007e 0%, #ff5ca8 55%, #e6007e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------- Kopfzeile beim Scrollen */

.site-header {
  transition: box-shadow 0.25s var(--ease-out), background-color 0.25s;
}

.site-header__inner {
  transition: min-height 0.25s var(--ease-out);
}

.logo img {
  transition: height 0.25s var(--ease-out);
}

.site-header[data-scrolled="true"] {
  background: rgba(253, 250, 251, 0.98);
  box-shadow: 0 6px 24px rgba(150, 0, 82, 0.1);
}

.site-header[data-scrolled="true"] .site-header__inner {
  min-height: 60px;
}

@media (min-width: 900px) {
  .site-header[data-scrolled="true"] .logo img {
    height: 46px;
  }
}

/* Dünner Fortschrittsbalken, nur auf den Ratgeberseiten (setzt JavaScript). */
.leseleiste {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #e6007e, #ffb703);
  z-index: 90;
  transition: width 0.1s linear;
}

/* --------------------------------------------------------------- Karten */

.card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(150, 0, 82, 0.16);
  border-color: var(--c-pig);
}

/* Der Bildausschnitt bleibt stehen, das Bild darin wächst. Deshalb muss der
   umschließende Link das Überstehende abschneiden. */
.card > a[aria-hidden="true"] {
  display: block;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card .thumb,
.card img {
  transition: transform 0.5s var(--ease-out);
}

.card:hover .thumb,
.card:hover img {
  transform: scale(1.06);
}

.card .thumb__icon {
  transition: transform 0.5s var(--ease-spring);
}

.card:hover .thumb__icon {
  transform: scale(1.14) rotate(-5deg);
}

.card__title a {
  background-image: linear-gradient(var(--c-primary), var(--c-primary));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.35s var(--ease-out), color 0.2s;
}

.card:hover .card__title a {
  background-size: 100% 2px;
}

/* --------------------------------------------------------------- Knöpfe */

.btn {
  transition: transform 0.18s var(--ease-out), background-color 0.18s,
    border-color 0.18s, box-shadow 0.25s var(--ease-out), color 0.18s;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(230, 0, 126, 0.32);
}

.btn--secondary:hover,
.btn--save:hover {
  transform: translateY(-2px);
}

.btn--save:hover {
  box-shadow: 0 10px 24px rgba(15, 122, 78, 0.28);
}

/* Der Klick darf die Anhebung wieder aufheben, sonst fühlt sich der Knopf
   schwammig an. Steht nach den Hover-Regeln, damit er gewinnt. */
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ------------------------------------------------------- Schritte, Kästen */

.step {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.step__icon {
  transition: transform 0.4s var(--ease-spring);
}

.step:hover .step__icon {
  transform: scale(1.12) rotate(-6deg);
}

/* ------------------------------------------------------ Portionsrechner */

@keyframes fetti-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.portions__value {
  display: inline-block;
}

.portions__value.is-changed {
  animation: fetti-pop 0.38s var(--ease-spring);
}

.portions__btn {
  transition: background-color 0.18s, color 0.18s, transform 0.18s var(--ease-out);
}

.portions__btn:hover:not(:disabled) {
  transform: scale(1.12);
}

.portions__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Kurzes Aufleuchten der Mengen, damit sichtbar wird, was sich geändert hat. */
.ingredients .amount {
  transition: color 0.45s var(--ease-out);
}

#ingredient-list.is-changed .amount {
  color: var(--c-primary);
}

/* ------------------------------------------------------- Filter und Liste */

/* Die Filterleiste bleibt beim Scrollen am oberen Rand stehen, damit man
   Ergebnisse und Regler gleichzeitig sieht. Erst ab Tablet-Breite: auf dem
   Handy fräße sie zu viel vom Bild. */
@media (min-width: 760px) {
  .filters {
    position: sticky;
    top: 84px;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
  }
}

.field select,
.field input[type="search"] {
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}

.field select:hover,
.field input[type="search"]:hover {
  border-color: var(--c-pig);
}

.field select:focus,
.field input[type="search"]:focus {
  background: var(--c-surface);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-light);
}

.result-count {
  transition: color 0.2s;
}

/* --------------------------------------------------------- Cookie-Banner */

@keyframes fetti-hoch {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.cookie-banner:not([hidden]) {
  animation: fetti-hoch 0.45s var(--ease-out);
}

.cookie-options label {
  transition: border-color 0.18s, background-color 0.18s;
}

.cookie-options label:hover {
  border-color: var(--c-pig);
  background: var(--c-primary-light);
}

/* -------------------------------------------------------- Mobile Navigation */

.site-nav[data-open="true"] {
  animation: fetti-auf 0.25s var(--ease-out);
}

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

.socials a {
  transition: background-color 0.2s, transform 0.2s var(--ease-out),
    border-color 0.2s;
}

.socials a:hover {
  transform: translateY(-3px);
  border-color: var(--c-primary);
}

/* --------------------------------------------------------- Bewegungsverzicht */

/* Die Regel ganz oben in dieser Datei stellt bereits alle Dauern auf nahezu
   null. Hier wird zusätzlich sichergestellt, dass nichts unsichtbar bleibt und
   die dekorativen Farbwolken vollständig stillstehen. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero::before,
  .hero::after {
    animation: none;
  }

  .card:hover,
  .step:hover,
  .btn--primary:hover,
  .btn--secondary:hover,
  .btn--save:hover,
  .socials a:hover {
    transform: none;
  }
}

/* Beim Drucken darf nichts eingeblendet werden müssen. */
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .leseleiste,
  .cookie-banner,
  .site-nav,
  .nav-toggle {
    display: none !important;
  }
}

/* ==========================================================================
   DESIGN-DURCHGANG 2
   Drei Ursachen dafür, dass die Seite vorher unruhig wirkte:

   1. Zu viel Rosa auf großen Flächen. Eine Marke wird kräftiger, wenn ihre
      Farbe punktuell sitzt statt flächig. Die großen Flächen werden neutral,
      Magenta bleibt für Preis, Knopf und Akzent.
   2. Kein gemeinsamer Abstandsrhythmus. Abschnitte hatten Einzelwerte per
      style-Attribut. Ab hier gilt eine Stufenleiter.
   3. Karten ohne Hierarchie: Preis, Zeit und Titel standen gleichwertig
      nebeneinander. Der Preis ist das Alleinstellungsmerkmal und gehört
      deshalb sichtbar aufs Bild.
   ========================================================================== */

:root {
  --raum-xs: 0.5rem;
  --raum-s: 1rem;
  --raum-m: 1.75rem;
  --raum-l: 3rem;
  --raum-xl: clamp(3.5rem, 7vw, 6rem);
}

/* ------------------------------------------------------------ Ruhigere Flächen */

body {
  background: #ffffff;
}

.site-header {
  background: rgba(255, 255, 255, 0.9);
}

.site-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.97);
}

/* Der Wechselabschnitt war kräftig rosa. Jetzt ein sehr heller, warmer Ton,
   der die Karten trägt statt mit ihnen zu konkurrieren. */
.section--card {
  background: #fdf7fa;
  border-block: 1px solid var(--c-border);
}

.card {
  background: #fff;
  border-color: #efe6ea;
}

/* Karten stehen auf Weiß — dann braucht das Raster mehr Luft als Trennung. */
.grid {
  gap: 1.75rem;
}

.section {
  padding-block: var(--raum-xl);
}

.section__head {
  margin-bottom: var(--raum-m);
}

/* ------------------------------------------------------------------ Karten */

.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Der Preis ist das Versprechen der Marke und sitzt deshalb im Bild, nicht
   in der Textspalte. Der Farbverlauf darunter hält ihn auch auf hellen Fotos
   lesbar, sobald echte Bilder eingesetzt sind. */
.card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent);
  pointer-events: none;
}

.card__preis {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.card__preis::after {
  content: "pro Portion";
  font-family: var(--f-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

.card__meta {
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.card__body {
  padding: 1.1rem 1.15rem 1.4rem;
}

.card__title {
  font-size: 1.18rem;
  line-height: 1.28;
  margin-bottom: 0.45rem;
}

/* Die Platzhalterflächen bekommen Tiefe statt eines flachen Verlaufs: zwei
   weiche Lichtpunkte und ein feines Raster. Sobald echte Fotos da sind,
   verschwindet das alles von selbst. */
.thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      circle at 22% 18%,
      rgba(255, 255, 255, 0.5),
      transparent 42%
    ),
    radial-gradient(circle at 80% 78%, rgba(0, 0, 0, 0.16), transparent 48%);
}

.thumb__icon {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

/* ------------------------------------------------------------- Hero-Bühne */

/* Vorher stand rechts ein großes, leeres Farbfeld. Jetzt zeigt der Hero das
   Produkt selbst: eine Rezeptkarte, wie sie überall auf der Seite vorkommt,
   plus zwei kleine Kennzahlen. Das erklärt in einem Blick, worum es geht. */
.hero__buehne {
  position: relative;
  padding: 1.5rem 1rem 2rem;
}

.hero__karte {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(150, 0, 82, 0.18);
  overflow: hidden;
  max-width: 340px;
  margin-inline: auto;
  transform: rotate(-1.6deg);
  transition: transform 0.4s var(--ease-out);
}

.hero__karte:hover {
  transform: rotate(0deg) translateY(-4px);
}

.hero__karte .thumb {
  border-radius: 0;
}

.hero__karte-text {
  padding: 1rem 1.1rem 1.2rem;
}

.hero__karte-text strong {
  display: block;
  font-family: var(--f-head);
  font-size: 1.1rem;
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.hero__karte-text span {
  font-size: 0.9rem;
  color: var(--c-muted);
}

.hero__chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(150, 0, 82, 0.14);
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.hero__chip strong {
  color: var(--c-primary-dark);
}

.hero__chip--1 {
  top: 0.5rem;
  right: 0;
  animation: fetti-wippen 6s ease-in-out infinite;
}

.hero__chip--2 {
  bottom: 1.5rem;
  left: 0;
  animation: fetti-wippen 7.5s ease-in-out infinite reverse;
}

@keyframes fetti-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 859px) {
  .hero__chip--1 { right: 0.5rem; }
  .hero__chip--2 { left: 0.5rem; }
}

/* --------------------------------------------------------- Abschnittslabel */

.section__head .eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-dark);
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------- Typografie */

h1 {
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  letter-spacing: -0.018em;
}

.lead {
  font-size: 1.18rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------- Fußzeile */

.site-footer {
  background: #17171a;
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__chip,
  .hero__karte {
    animation: none;
    transform: none;
  }
}

/* ---------------------------------------------------------- Echte Fotos */

/* Fotos müssen sich exakt wie die Platzhalter verhalten: festes 4:3, mittig
   beschnitten. Ohne object-fit würde ein abweichendes Seitenverhältnis das
   Kartenraster auseinanderziehen. */
.card__media img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}

img.thumb--detail {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Auf der Detailseite ist ein 4:3-Foto über die volle Breite zu dominant.
   Begrenzte Höhe, mittiger Ausschnitt. */
@media (min-width: 700px) {
  img.thumb--detail {
    aspect-ratio: 21 / 9;
  }
}

/* ------------------------------------------------------------ Werbeplätze */

/*
 * Reservierter Raum ist hier der ganze Trick. Ein Anzeigenblock, der ohne feste
 * Höhe nachgeladen wird, schiebt den Text darunter weg — Google misst das als
 * Layoutverschiebung (CLS) und rechnet es direkt gegen das Ranking. Deshalb
 * steht die Höhe vorher fest.
 *
 * Solange keine Anzeigen freigeschaltet sind, trägt der Platz das Attribut
 * hidden und belegt gar nichts. Erst beim Aktivieren wird er sichtbar UND
 * reserviert seinen Raum — nicht umgekehrt.
 */
.anzeigenplatz {
  display: block;
  margin-block: var(--raum-m);
  text-align: center;
  overflow: hidden;
}

.anzeigenplatz[hidden] {
  display: none;
}

/* Die Kennzeichnung ist Pflicht, nicht Kür: Werbung muss als solche erkennbar
   sein, auch wenn sie von einem Netzwerk kommt. */
.anzeigenplatz::before {
  content: "Anzeige";
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.35rem;
}

.anzeigenplatz--breit {
  min-height: 100px;
}

@media (min-width: 760px) {
  .anzeigenplatz--breit { min-height: 120px; }
}

.anzeigenplatz--block {
  min-height: 260px;
}

.anzeigenplatz ins {
  display: block;
}

/* Schnellauswahl über der Filterleiste: gibt Suchmaschinen einen Weg zu den
   Kategorieseiten und Besuchern eine Abkürzung an den Filtern vorbei. */
.kategorie-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* ------------------------------------------- Hervorgehobene Vergleichsspalte */

/*
 * Im Kochbox-Vergleich steht Fetti als eine Spalte neben den Anbietern. Ohne
 * Auszeichnung liest sich das wie ein gleichrangiger vierter Anbieter — die
 * Spalte ist aber der Maßstab, gegen den verglichen wird. Deshalb hebt sie
 * sich ab, ohne die anderen abzuwerten: dieselbe Schrift, dieselbe Struktur,
 * nur eine ruhige Markenfläche darum.
 */
table.compare .hervor {
  background: var(--c-primary-light);
  border-left: 2px solid var(--c-primary);
  border-right: 2px solid var(--c-primary);
}

table.compare thead th.hervor--kopf {
  background: var(--c-primary);
  color: #fff;
  border-top: 2px solid var(--c-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
}

.hervor__marke {
  display: block;
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 0.25rem;
}

table.compare tr:last-child .hervor {
  border-bottom: 2px solid var(--c-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

table.compare .hervor strong {
  color: var(--c-primary-dark);
}

table.compare thead th.hervor--kopf strong {
  color: #fff;
}

/* Logo in der Fußzeile: ersetzt die frühere Textüberschrift. Die Negativ-
   Fassung bringt den hellen Schriftzug mit, deshalb braucht es hier keinen
   Filter und keine zweite Datei für dunkle Darstellung. */
.footer-logo {
  /* block statt inline-block: Ein inline-Element sitzt auf der Grundlinie und
     schleppt darunter einen Rest Zeilenhöhe mit, der den Abstand unberechenbar
     macht. */
  display: block;
  margin-bottom: 1.4rem;
  line-height: 0;
}

/* Bewusst kleiner als im Kopf. Die Negativ-Fassung enthält das Schweinchen und
   wirkt dadurch schwerer als eine reine Wortmarke — bei gleicher Höhe drängt
   sie sich in der Fußzeile in den Vordergrund, wo sie nur signieren soll. */
.footer-logo img {
  height: 38px;
  width: auto;
}

@media (min-width: 900px) {
  .footer-logo img {
    height: 42px;
  }
}

/* Echte Symbole statt der Buchstabenkürzel. currentColor sorgt dafür, dass sie
   die Farbe des umgebenden Links übernehmen — auch beim Überfahren. */
.socials a svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ==========================================================================
   BARRIEREFREIHEIT: KLICKFLÄCHEN
   WCAG 2.2, Kriterium 2.5.8 verlangt mindestens 24 × 24 CSS-Pixel je
   Bedienelement. Ausgenommen sind nur Links, die INNERHALB eines Satzes
   stehen — dort würde eine vergrößerte Fläche den Zeilenfall zerreißen.

   Betroffen waren hier Listen- und Brotkrümel-Links: Sie standen bei 17 bis
   18 Pixel, weil ihre Höhe allein aus der Zeilenhöhe kam. Die Lösung ist
   Innenabstand, kein größerer Schriftgrad — die Schrift soll bleiben, wie sie
   ist, nur die Trefferfläche wächst.
   ========================================================================== */

.site-footer li a,
.breadcrumb a,
.breadcrumb li {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}

/* Der negative Ausgleich verhindert, dass der zusätzliche Innenabstand die
   Listen optisch auseinanderzieht — die Trefferfläche wächst, der Zeilenfall
   bleibt. */
.site-footer li {
  margin-bottom: 0.15rem;
}

/* Kontrollkästchen liefern die Browser mit 13 px aus. Vergrößern statt
   nachbauen: Ein selbst gezeichnetes Kästchen verliert die
   Tastaturbedienung und die Ansage durch Screenreader. */
.cookie-options input[type="checkbox"],
#consent-form input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: var(--c-primary);
  cursor: pointer;
}

/* Das zugehörige Label wird zur Trefferfläche, damit auch der Text schaltet. */
.cookie-options label {
  cursor: pointer;
  align-items: center;
}