/* =========================================================================
   Blog – Stylesheet

   Farbwelt aus der bisherigen Seite: Bordeaux, Beere, Braungrau.
   Motiv: das Maßband – Nähen und Kochen sind beides Messen.

   Farben liegen in sechs semantischen Variablen, die der Administrator im
   Bereich „Erscheinungsbild" pflegt. Sie werden im Seitenkopf gesetzt – einmal
   für hell, einmal für dunkel. Alles Weitere leitet sich per color-mix davon
   ab, damit ein geänderter Grundton das ganze Schema mitzieht.
   ========================================================================= */

:root {
  /* Grundwerte – werden vom Erscheinungsbild überschrieben */
  --akzent:      #4d0f30;   /* Bordeaux: Überschriften, Kopfbereich */
  --akzent-zwei: #751847;   /* Beere: Verlinkungen, aktive Zustände */
  --signal:      #a21a20;   /* Rot: sparsamer Akzent */
  --text:        #544645;   /* Braungrau: Fließtext */
  --papier:      #faf7f6;   /* Seitenhintergrund */
  --flaeche:     #ffffff;   /* Karten, Eingabefelder */

  /* Abgeleitet – nie direkt pflegen */
  --linie:       color-mix(in srgb, var(--text) 24%, var(--papier));
  --sandton:     color-mix(in srgb, var(--akzent) 8%, var(--papier));
  --text-leise:  color-mix(in srgb, var(--text) 65%, var(--papier));
  --tinte:       var(--text);
  --tinte-60:    var(--text-leise);
  --papier-hoch: var(--flaeche);

  /* Rückwärtskompatible Bezeichner */
  --bordeaux: var(--akzent);
  --beere:    var(--akzent-zwei);
  --rot:      var(--signal);
  --braungrau:var(--text);
  --kobalt:   var(--akzent-zwei);
  --senf:     var(--signal);
  --salbei:   var(--text);

  /* Selbst gehostet – siehe schriften.css. Die Rückfallschriften sind so
     gewählt, dass die Seite auch ohne die Dateien ordentlich aussieht. */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Open Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --breite: 1140px;
  --rand: clamp(1.25rem, 5vw, 4rem);

  color-scheme: light;
}

/* Dunkles Schema: Linien und Flächen brauchen andere Mischungsverhältnisse,
   sonst wirken Ränder im Dunkeln entweder unsichtbar oder grell. */
[data-schema="dunkel"] {
  --linie:      color-mix(in srgb, var(--text) 30%, var(--papier));
  --sandton:    color-mix(in srgb, var(--akzent) 14%, var(--papier));
  --text-leise: color-mix(in srgb, var(--text) 62%, var(--papier));
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-schema="system"] {
    --linie:      color-mix(in srgb, var(--text) 30%, var(--papier));
    --sandton:    color-mix(in srgb, var(--akzent) 14%, var(--papier));
    --text-leise: color-mix(in srgb, var(--text) 62%, var(--papier));
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--braungrau);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;   /* kompakt-lesbar; galt vielen als zu luftig */
}

a { color: inherit; }

/*
 * height: auto ist hier der entscheidende Teil. Ohne diese Angabe behält ein
 * Bild, das im Quelltext ein height-Attribut mitbringt (der Editor setzt eines),
 * diese Höhe bei — die Breite schrumpft, die Höhe nicht, und das Bild wird
 * riesig und verzerrt.
 */
img { max-width: 100%; height: auto; display: block; }

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

.huelle {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- Maßband */

.massband {
  --tick: var(--linie);
  height: 14px;
  border-top: 1px solid var(--bordeaux);
  background-image: repeating-linear-gradient(
    to right,
    var(--tick) 0 1px,
    transparent 1px 12px
  );
  background-repeat: repeat-x;
  background-size: 120px 6px;
  background-position: top left;
}

.massband--kraeftig { --tick: var(--tinte-60); }

.masszahl {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-60);
}

/* ------------------------------------------------------------------ Kopf */

.kopf { padding-block: 2.5rem 0; }

.kopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kopf__titel {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bordeaux);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}

.kopf__titel a { text-decoration: none; }

.kopf__unterzeile {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-60);
  margin: 0.4rem 0 0;
}

.kopf .massband { margin-top: 1.75rem; }

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

.rubriken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.rubrik {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: var(--tinte-60);
}

.rubrik:hover { color: var(--tinte); }

.rubrik[aria-current="true"] {
  color: var(--kobalt);
  border-bottom-color: var(--kobalt);
}

/* ------------------------------------------------------------------ Suche */

.suche {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 1rem;
}

.suche .knopf { display: flex; align-items: center; }

.suche input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--linie);
  background: var(--papier-hoch);
  color: inherit;
}

/* ----------------------------------------------------------------- Aufmacher */

.aufmacher {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  margin-block: 3rem;
}

@media (min-width: 820px) {
  .aufmacher { grid-template-columns: 1.15fr 1fr; align-items: center; }
}

.aufmacher__bild {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  background: var(--linie);
}

.aufmacher__titel {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bordeaux);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  margin: 0.6rem 0 0.8rem;
}

.aufmacher__titel a { text-decoration: none; }
.aufmacher__titel a:hover { color: var(--kobalt); }

.aufmacher__teaser { margin: 0 0 1.25rem; color: var(--tinte-60); }

/* ------------------------------------------------------------------ Kicker */

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.kicker__punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--kobalt);
}

.kicker--rezept .kicker__punkt { background: var(--rot); }
.kicker--naehen .kicker__punkt { background: var(--bordeaux); }
.kicker--probenaehen .kicker__punkt { background: var(--beere); }
.kicker--reise  .kicker__punkt { background: #7c8f6f; }
.kicker--alltag .kicker__punkt { background: var(--tinte-60); }

/* ----------------------------------------------------------------- Beiträge */

.beitragsliste {
  display: grid;
  gap: 2.75rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-block: 2.5rem 4rem;
  padding: 0;
  list-style: none;
}

.karte { display: flex; flex-direction: column; }

.karte__bild {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  background: var(--linie);
  margin-bottom: 0.9rem;
}

.karte__titel {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bordeaux);
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0.5rem 0 0.4rem;
}

.karte__titel a { text-decoration: none; }
.karte__titel a:hover { color: var(--kobalt); }

.karte__teaser {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--tinte-60);
}

.karte__mass {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}

/* ------------------------------------------------------------------ Beitrag */

.beitrag { margin-block: 2.5rem 4rem; }

.beitrag__titel {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--bordeaux);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.02;
  margin: 0.7rem 0 0.6rem;
  max-width: 22ch;
}

.beitrag__teaser {
  font-size: 1.2rem;
  color: var(--tinte-60);
  max-width: 60ch;
  margin: 0 0 2rem;
}

/*
 * Titelbild: nicht mehr über die volle Seitenbreite, sondern auf Textbreite
 * begrenzt und mittig. object-fit: contain statt cover — sonst schneidet ein
 * Hochformat oben und unten ab, und genau das sind Nähfotos meistens.
 */
.beitrag__bildrahmen {
  max-width: min(100% - 2.5rem, 1040px);
  margin: 0 auto;
}

.beitrag__bild {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
  background: var(--sandton);
  border-radius: 2px;
}

/* Kennzahlenleiste auf dem Maßband */
.kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--bordeaux);
  background-image: repeating-linear-gradient(to right, var(--linie) 0 1px, transparent 1px 12px);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: top left;
}

.kennzahl { padding-top: 0.5rem; }

.kennzahl dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-60);
}

.kennzahl dd {
  margin: 0.15rem 0 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
}

/* Zweispaltiger Kern */
.werkbank {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}

@media (min-width: 900px) {
  .werkbank { grid-template-columns: minmax(230px, 300px) 1fr; align-items: start; }
  .werkbank__seite { position: sticky; top: 2rem; }
}

.baustein__titel {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bordeaux);
}

/* Checkliste: Zutaten / Material / Packliste */
.checkliste { margin: 0 0 1.5rem; padding: 0; list-style: none; }

.checkliste__gruppe {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kobalt);
  margin: 1.25rem 0 0.5rem;
}

.checkliste__gruppe:first-child { margin-top: 0; }

.zeile {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--linie);
  align-items: baseline;
}

.zeile__menge {
  font-family: var(--mono);
  font-size: 0.9rem;
  text-align: right;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.zeile__name { font-size: 0.98rem; }

/* Portionsrechner */
.rechner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.rechner__knopf {
  width: 2rem; height: 2rem;
  border: 1px solid var(--tinte);
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.rechner__knopf:hover { background: var(--tinte); color: var(--papier); }

.rechner__wert {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* Schritte */
.schritte { counter-reset: schritt; list-style: none; margin: 0; padding: 0; }

.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linie);
}

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--kobalt);
  padding-top: 0.15rem;
}

.schritt p { margin: 0; }

/* Fließtext */
.fliesstext { max-width: 68ch; }
.fliesstext h2, .fliesstext h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 2.2rem 0 0.6rem;
}
.fliesstext h2 { font-size: 1.9rem; }
.fliesstext h3 { font-size: 1.45rem; }
.fliesstext p { margin: 0 0 0.7rem; }
/* Bilder im Fließtext: mittig und nie größer als der Bildschirm */
.fliesstext img {
  margin: 1.75rem auto;
  max-height: 80vh;
  object-fit: contain;
}

.fliesstext figure { margin: 1.75rem 0; }
.fliesstext figcaption {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-leise);
  text-align: center;
  margin-top: 0.5rem;
}
.fliesstext blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--senf);
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.35;
}
.fliesstext table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.fliesstext th, .fliesstext td {
  text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linie);
}

/* Downloads – Schnittmuster & Co. */
.downloads { list-style: none; margin: 2.5rem 0 0; padding: 0; }

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 0.9rem 1rem;
  background: var(--papier-hoch);
  border-left: 3px solid var(--senf);
  margin-bottom: 0.6rem;
}

.download__label { font-weight: 700; }
.download a { color: var(--kobalt); }

/* Galerie */
/* Galerie als Polaroids – knüpft an Lichtkasten und Album an:
   Papierrahmen, breiter Steg unten für die Beschriftung, leicht schief
   wie ins Album geklebte Fotos. */
.galerie {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.galerie figure {
  margin: 0;
  padding: 0.65rem 0.65rem 0;
  background: var(--polaroid-papier, #fbf8f4);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  transform: rotate(-0.5deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.galerie li:nth-child(even) figure { transform: rotate(0.5deg); }

.galerie li:hover figure {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.galerie img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--linie);
  border-radius: 1px;
  display: block;
}

/* Der Steg: bei Bildunterschrift mit Text, ohne bleibt er als leeres
   Papier stehen – erst das macht den Polaroid-Eindruck aus. */
.galerie figcaption {
  min-height: 2.1rem;
  padding: 0.5rem 0.15rem 0.65rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.25;
  color: #3b3033;
  text-align: center;
}

.galerie figure:not(:has(figcaption)) { padding-bottom: 2.1rem; }

@media (prefers-reduced-motion: reduce) {
  .galerie figure { transform: none !important; transition: none; }
}

/* Schlagworte */
.schlagworte { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }

.schlagwort {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--linie);
}

.schlagwort:hover { border-color: var(--kobalt); color: var(--kobalt); }

/* Fuß */
.fuss {
  margin-top: 5rem;
  padding-block: 2rem 3rem;
  border-top: 1px solid var(--bordeaux);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--tinte-60);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}

/* Blättern */
.blaettern { margin-block: 2rem 3rem; font-family: var(--mono); font-size: 0.8rem; }
.blaettern a, .blaettern span { padding: 0.3rem 0.55rem; text-decoration: none; }
.blaettern a:hover { color: var(--kobalt); }

/* Hinweise */
.hinweis {
  padding: 0.75rem 1rem;
  background: var(--papier-hoch);
  border-left: 3px solid var(--kobalt);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.hinweis--warnung { border-left-color: #a5342a; }

.entwurf-fahne {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--senf);
  color: var(--tinte);
  padding: 0.15rem 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Ergänzungen: Thermomix-Schritte, Schnittmusteralbum, Anmeldung
   ========================================================================= */

/* Thermomix-Einstellungen am Zubereitungsschritt */
.tm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  margin-top: 0.6rem;
  padding: 0.35rem 0.7rem;
  background: var(--sandton);
  border-left: 3px solid var(--rot);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--bordeaux);
}

.tm__wert + .tm__wert::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--tinte-60);
}

.tm__linkslauf {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Schnittmusteralbum – dichtes Register statt lockerer Karten */
.album {
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  list-style: none;
  margin: 2rem 0 3rem;
  padding: 0;
}

.album__eintrag { position: relative; }

.album__bild {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  background: var(--sandton);
}

.album__schnitt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--bordeaux);
  margin: 0.5rem 0 0.15rem;
}

.album__schnitt a { text-decoration: none; }
.album__schnitt a:hover { color: var(--beere); }

.album__designer {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--tinte-60);
  display: block;
}

.album__groesse {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: color-mix(in srgb, var(--akzent) 88%, transparent);
  color: var(--flaeche);
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
}

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

.album__filter a {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linie);
}

.album__filter a[aria-current="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--papier);
}

/* Anmeldung – Stufenanzeige */
.anmeldung__titel {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 2rem;
  color: var(--bordeaux);
  margin: 0 0 0.4rem;
}

.anmeldung__text { color: var(--tinte-60); margin: 0 0 1.5rem; }

.anmeldung--breit { max-width: 100%; }

.stufen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 2rem;
  padding: 0;
}

.stufe {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--linie);
  color: var(--tinte-60);
}

.stufe--aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.stufe--fertig { border-color: var(--braungrau); color: var(--braungrau); }

.code-eingabe {
  font-family: var(--mono) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.4em;
  text-align: center;
}

.qr {
  display: inline-block;
  padding: 0.75rem;
  /* Bewusst immer weiß: QR-Codes brauchen hellen Grund, sonst scheitert das Scannen. */
  background: #ffffff;
  border: 1px solid var(--linie);
  margin: 0.75rem 0;
}

.qr svg { display: block; }

.geheimnis {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  background: var(--sandton);
  padding: 0.6rem 0.8rem;
  word-break: break-all;
  margin: 0.5rem 0;
}

.einrichtung {
  padding-left: 1.2rem;
  margin: 0;
}

.einrichtung > li { margin-bottom: 2rem; }
.einrichtung > li > strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 0.4rem;
}

.codeliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.4rem;
  list-style: none;
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--sandton);
  font-family: var(--mono);
  font-size: 0.95rem;
}

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

@media print {
  .stufen, .knopfzeile, .hinweis, .feld__hilfe { display: none; }
  .codeliste { background: none; border: 1px solid #000; }
}


/* =========================================================================
   Dunkles Schema: Feinschliff
   ========================================================================= */

/* Fotos wirken auf dunklem Grund oft zu grell – ein Hauch weniger Leuchtkraft,
   aber nicht so viel, dass Stoffarben verfälscht werden. */
[data-schema="dunkel"] .karte__bild,
[data-schema="dunkel"] .aufmacher__bild,
[data-schema="dunkel"] .beitrag__bild,
[data-schema="dunkel"] .album__bild,
[data-schema="dunkel"] .galerie img {
  filter: brightness(0.92);
}

@media (prefers-color-scheme: dark) {
  [data-schema="system"] .karte__bild,
  [data-schema="system"] .aufmacher__bild,
  [data-schema="system"] .beitrag__bild,
  [data-schema="system"] .album__bild,
  [data-schema="system"] .galerie img {
    filter: brightness(0.92);
  }
}

/* Logo umschaltbar: helle Fassung im Dunkeln, falls hinterlegt */
[data-schema="dunkel"] .kopf__logo--hell,
[data-schema="system"] .kopf__logo--hell { display: none; }

/* Umschalter für das Farbschema */
.schema-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text-leise);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  line-height: 1;
}

.schema-schalter:hover {
  color: var(--akzent-zwei);
  border-color: var(--akzent-zwei);
}

.schema-schalter svg { width: 14px; height: 14px; fill: currentColor; }

/* Nur das zum Zustand passende Symbol zeigen */
.schema-schalter__hell,
.schema-schalter__dunkel,
.schema-schalter__system { display: none; }

[data-schema="hell"]   .schema-schalter__hell   { display: inline-block; }
[data-schema="dunkel"] .schema-schalter__dunkel { display: inline-block; }
[data-schema="system"] .schema-schalter__system { display: inline-block; }

/* Logo im Kopfbereich */
.kopf__logo {
  display: block;
  max-width: min(100%, 420px);
  height: auto;
  margin-bottom: 0.35rem;
}

@media print {
  .schema-schalter { display: none; }
}

/* =========================================================================
   Fußbereich: soziale Netzwerke und Rechtstexte
   ========================================================================= */

.sozial {
  display: flex;
  width: 100%;              /* volle Fußzeilen-Breite: die Liste ist ein
                               Flex-Kind der Fußzeile und klebte sonst links */
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--linie);
}

.sozial__verweis {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: color .15s, border-color .15s, transform .15s;
}

.sozial__verweis svg { width: 22px; height: 22px; }

.sozial__verweis:hover,
.sozial__verweis:focus-visible {
  color: var(--akzent-zwei);
  border-color: currentColor;
  transform: translateY(-2px);
}

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

.fuss__zeile nav a { margin-left: 1.25rem; }
.fuss__zeile nav a:first-child { margin-left: 0; }

@media (max-width: 640px) {
  .fuss__zeile { justify-content: center; text-align: center; }
  .fuss__zeile nav a { margin: 0 .6rem; }
}

/* Rechtstexte: schmaler Satzspiegel, deutliche Zwischenüberschriften */
.rechtstext h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--akzent);
  margin: 2rem 0 .5rem;
}

.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 1rem; }

/* Blättern zwischen Seiten */
.blaettern__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.blaettern__zu {
  color: var(--akzent-zwei);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.blaettern__zu:hover { color: var(--akzent); }
.blaettern__aus { color: var(--text-leise); opacity: .55; }
.blaettern__stand { color: var(--text-leise); letter-spacing: .06em; }

/* Zweite Filterebene auf der Startseite: die Art des Beitrags */
.artfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 1.25rem 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
}

.artfilter a {
  color: var(--text-leise);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.artfilter a:hover { color: var(--akzent-zwei); }

.artfilter a[aria-current="true"] {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}

/* ---------------------------------------------- Schritte mit Bild (Kochbuch) */

.schritt--mit-bild {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 34%);
  gap: 1.25rem 1.75rem;
  align-items: start;
}

.schritt__bild {
  margin: 0;
  grid-column: 2;
}

.schritt__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  background: var(--sandton);
}

.schritt__bild figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-leise);
  margin-top: 0.4rem;
  line-height: 1.35;
}

/* Auf schmalen Bildschirmen untereinander statt nebeneinander */
@media (max-width: 640px) {
  .schritt--mit-bild {
    grid-template-columns: 1fr;
  }
  .schritt__bild { grid-column: 1; }
  .schritt__bild img { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------------- Produkte */
/*
 * Angelehnt an eine Produktverpackung: klare Kante, das Bild links auf
 * heller Fläche, rechts die Angaben – wie die Vorderseite einer Schachtel.
 * Gestapelt, damit mehrere Produkte als Reihe wirken.
 */

.produkte { margin: 3rem 0 0; }

.produkte__hinweis {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-leise);
  margin: 0 0 1rem;
}

.produkte__stapel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.produkt {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 0.85rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 2px;
}

.produkt__bild {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  background: var(--sandton);
  border-radius: 2px;
  overflow: hidden;
}

.produkt__bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Platzhalter, damit die Reihe auch ohne Bild ausgerichtet bleibt */
.produkt__platzhalter {
  width: 42%;
  height: 42%;
  border: 2px dashed var(--linie);
  border-radius: 2px;
}

.produkt__angaben { min-width: 0; }

.produkt__name {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0;
}

.produkt__notiz {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.produkt__zeile {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.produkt__preis {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--akzent);
}

.produkt__werbung {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
  color: var(--text-leise);
}

.produkt__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-decoration: none;
  border-bottom: 1px solid var(--akzent);
  padding-bottom: 1px;
}

.produkt__link:hover { border-bottom-width: 2px; }

.produkt__anbieter {
  font-size: 0.68rem;
  color: var(--text-leise);
}

@media (max-width: 560px) {
  .produkt {
    grid-template-columns: 76px 1fr;
    gap: 0.9rem;
  }
  .produkt__bild { width: 76px; height: 76px; }
}

/* Im dunklen Schema würde multiply die Bilder verschlucken */
[data-schema="dunkel"] .produkt__bild img { mix-blend-mode: normal; }

@media (prefers-color-scheme: dark) {
  [data-schema="system"] .produkt__bild img { mix-blend-mode: normal; }
}

/* ------------------------------------------------------- Lichtkasten */
/*
 * Ein angeklicktes Bild groß, in einem Polaroid-Rahmen: weißes Papier, unten
 * der breite Steg für die Beschriftung, leicht schief wie ein hingelegtes Foto.
 */

.lichtkasten {
  /* Vorgaben des dialog-Elements zurücknehmen */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  overflow: hidden;
}

.lichtkasten:not([open]) { display: none; }

.lichtkasten::backdrop {
  background: rgba(28, 18, 24, 0.86);
  backdrop-filter: blur(3px);
}

/* --------------------------------------------------------- Das Polaroid */

.polaroid {
  position: relative;
  margin: 0;
  padding: 0.9rem 0.9rem 0;
  background: var(--polaroid-papier, #fbf8f4);
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 18px 44px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.7deg);
  max-width: 94vw;
}

.polaroid__bild {
  /* Dunkle Fläche: Bei abweichendem Seitenverhältnis wirken die Ränder
     gewollt statt wie ein Fehler. */
  background: #17121a;
  border-radius: 1px;
  overflow: hidden;
  display: flex;
}

/*
 * Die eigentliche Skalierung. width/height auf auto und beide Höchstmaße
 * gesetzt: Das Bild verkleinert sich unter Beibehaltung seiner Proportionen,
 * und der Rahmen legt sich um die entstandene Größe. Weder abgeschnitten
 * noch verzerrt, und nie größer als das Fenster.
 */
.polaroid__bild img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(84vw, 900px);
  max-height: 68vh;
  object-fit: contain;
  margin: 0 auto;
}

.polaroid__text {
  min-height: 3.6rem;
  padding: 0.85rem 0.4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;

  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.3;
  color: #3b3033;
  max-width: min(84vw, 900px);
}

.polaroid__zaehler {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #8b7f83;
}

/* ------------------------------------------------------------ Bedienung */

.polaroid__schliessen {
  position: absolute;
  top: -0.85rem;
  right: -0.85rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease;
}

.polaroid__schliessen:hover { transform: scale(1.08); }
.polaroid__schliessen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lichtkasten__blaettern {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}

.lichtkasten__blaettern:hover { background: rgba(255, 255, 255, 0.2); }
.lichtkasten__blaettern[hidden] { display: none; }

/* Anklickbare Bilder als solche kenntlich machen */
.galerie a[data-lichtkasten],
.schritt__bild a[data-lichtkasten] { cursor: zoom-in; }

/* ------------------------------------------------------- Kleine Fenster */

@media (max-width: 640px) {
  .lichtkasten { gap: 0.2rem; }

  .polaroid {
    padding: 0.6rem 0.6rem 0;
    transform: none;          /* auf dem Handy zählt jeder Millimeter */
  }

  .polaroid__bild img {
    max-width: 82vw;
    max-height: 62vh;
  }

  .polaroid__text {
    min-height: 3rem;
    font-size: 0.9rem;
    max-width: 82vw;
  }

  .lichtkasten__blaettern {
    width: 2.3rem;
    height: 2.3rem;
    font-size: 1.4rem;
  }
}

/* Im dunklen Schema wäre reines Weiß zu grell */
[data-schema="dunkel"] {
  --polaroid-papier: #e8e2dc;
}

@media (prefers-color-scheme: dark) {
  [data-schema="system"] {
    --polaroid-papier: #e8e2dc;
  }
}

/* ------------------------------------------------- Retro-Akzente */
/*
 * Anleihen an die alte Jimdo-Seite und ihre fünf Welten – Nähen, Kochen,
 * Mama sein, Reisen, Leben & Natur: Nahtlinien statt harter Striche,
 * Briefmarken-Zacken an den Marken, warmes Papier statt kaltem Weiß.
 */

/* Trennlinien als Steppnaht */
.beitrag hr,
.fliesstext hr {
  border: 0;
  border-top: 2px dashed var(--akzent-zwei);
  opacity: 0.45;
  margin: 2.25rem auto;
  width: 60%;
}

/* Überschriften im Beitrag bekommen eine kurze Naht darunter */
.fliesstext h2::after {
  content: "";
  display: block;
  width: 4.5rem;
  margin-top: 0.45rem;
  border-top: 2px dashed var(--akzent);
  opacity: 0.5;
}

/* Kategorien- und Schlagwortmarken mit Briefmarken-Zackenrand */
.beitrag__kategorie,
.schlagwort {
  position: relative;
  background: var(--sandton);
  padding: 0.3rem 0.65rem;
  border-radius: 1px;
  --zacke: 4px;
  mask-image: radial-gradient(circle at var(--zacke) var(--zacke), transparent var(--zacke), #000 0);
  mask-size: calc(var(--zacke) * 2) calc(var(--zacke) * 2);
  mask-position: calc(var(--zacke) * -1) calc(var(--zacke) * -1);
}

/* Die Karten der Übersicht leicht angeschrägt aufliegend, wie Fotos im Album */
.karte:nth-child(3n+1) { transform: rotate(-0.35deg); }
.karte:nth-child(3n)   { transform: rotate(0.3deg); }
.karte { transition: transform 0.15s ease; }
.karte:hover { transform: rotate(0) translateY(-2px); }

/* Album-Einträge im Polaroid-Stil – knüpft an den Lichtkasten an */
.album__eintrag a {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.7rem 0.9rem;
  background: var(--polaroid-papier, #fbf8f4);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  text-decoration: none;
  transform: rotate(-0.4deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.album__eintrag:nth-child(even) a { transform: rotate(0.4deg); }

.album__eintrag a:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.album__eintrag img,
.album__platzhalter {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1px;
  background: var(--sandton);
  display: block;
}

.album__titel {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--text);
}

.album__angaben {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-leise);
}

.album {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .karte, .album__eintrag a { transform: none !important; transition: none; }
}

/* ------------------------------------------------ Leser-Werkzeuge */
.beitrag__werkzeuge { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; }
/* Knöpfe: Grundregel gehört auch dem Blog – die Leser-Werkzeuge (Suche,
   Drucken, Kochmodus) nutzten sie bisher, ohne dass sie hier definiert war,
   und fielen auf nackte Browser-Buttons zurück. */
.knopf {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: var(--papier);
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
}

.knopf:hover { background: color-mix(in srgb, var(--akzent) 82%, var(--tinte)); }

.knopf--leise { background: transparent; color: var(--tinte); border: 1px solid var(--linie); }
.knopf--leise:hover { border-color: var(--akzent); color: var(--akzent); }


.suche__formular { display: flex; align-items: stretch; gap: 0.6rem; margin: 1.5rem 0 2rem; }
.suche__formular input[type="search"] {
  flex: 1;
  min-width: 0;                     /* darf auf schmalen Schirmen schrumpfen */
  font: inherit;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
}
.suche__formular .knopf { display: flex; align-items: center; }
.suchtreffer { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.suchtreffer a { font-weight: 700; }
.suchtreffer__zeile { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--tinte-60); margin-top: 0.15rem; }
.suchtreffer__teaser { margin: 0.35rem 0 0; font-size: 0.9rem; }

.masshelfer__eingaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.masshelfer__ergebnis { font-weight: 700; min-height: 1.4rem; }
.masshelfer__tabelle { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.masshelfer__tabelle th, .masshelfer__tabelle td { border: 1px solid var(--linie); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.88rem; }
.masshelfer__treffer { background: color-mix(in srgb, var(--akzent) 14%, transparent); }

.kochmodus { border: none; border-radius: 4px; padding: 2rem; width: min(680px, 92vw); }
.kochmodus::backdrop { background: rgba(20, 15, 17, 0.82); }
.kochmodus__stand { font-family: var(--mono); font-size: 0.8rem; color: var(--tinte-60); margin: 0 0 1rem; }
.kochmodus__schritt { font-size: 1.25rem; line-height: 1.6; min-height: 8rem; }
.kochmodus__schritt img { max-width: 100%; height: auto; margin-top: 1rem; }
.kochmodus__leiste { display: flex; align-items: center; gap: 0.6rem; margin: 1.5rem 0 0; flex-wrap: wrap; }

/* ------------------------------------------------ Druckansicht:
   aufs Papier kommen Titel, Kennzahlen, Zutaten, Schritte und Text –
   Menü, Galerie-Polaroids, Produkte, Verwandtes und Knöpfe bleiben weg. */
@media print {
  .kopf, .fuss, .beitrag__werkzeuge, .galerie,
  .produkte, .verwandte, .teilen, .lichtkasten, .knopf { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .beitrag { max-width: none; }
  .beitrag__bild { max-height: 7cm; width: auto; }
  a { color: #000; text-decoration: none; }
  .schritt { break-inside: avoid; }
}

/* Schritt-Videos: Platzhalter ohne Drittkontakt, nach Klick 16:9-Rahmen */
.schritt__video { margin-top: 0.9rem; }
.videostart {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3rem; width: 100%; aspect-ratio: 16 / 9;
  background: var(--sandton); border: 1px dashed var(--linie);
  cursor: pointer; font: inherit; color: var(--tinte); border-radius: 3px;
}
.videostart:hover { border-color: var(--akzent); color: var(--akzent); }
.videostart__dreieck { font-size: 2rem; line-height: 1; }
.videostart__hinweis { font-family: var(--mono); font-size: 0.68rem; color: var(--tinte-60); }
.schritt__video--laeuft { aspect-ratio: 16 / 9; }
.schritt__video--laeuft iframe { width: 100%; height: 100%; border: 0; border-radius: 3px; }
@media print { .schritt__video { display: none !important; } }

/* Umflossene Bilder im Fließtext: Der Abstand zum Text kommt bewusst von
   hier statt aus Inline-Stilen (die filtert der Speicherfilter). Deckt die
   beiden Schreibweisen ab, die der Editor erzeugt. */
.fliesstext img[style*="float: left"], .fliesstext img[style*="float:left"],
.fliesstext figure[style*="float: left"], .fliesstext figure[style*="float:left"] {
  margin: 0.35rem 1.5rem 0.9rem 0;
}
.fliesstext img[style*="float: right"], .fliesstext img[style*="float:right"],
.fliesstext figure[style*="float: right"], .fliesstext figure[style*="float:right"] {
  margin: 0.35rem 0 0.9rem 1.5rem;
}

/* Auf schmalen Bildschirmen ist Umfluss eng und zappelig – dann stehen
   die Bilder in voller Breite zwischen den Absätzen. */
@media (max-width: 640px) {
  .fliesstext img[style*="float"], .fliesstext figure[style*="float"] {
    float: none !important;
    display: block;
    margin: 1rem auto;
  }
}