@charset "UTF-8";
@font-face {
  font-family: OrangeLet-Plain;
  src: url(../fonts/orange-let-plain.woff) format("woff");
  font-weight: 200;
}
@font-face {
  font-family: QuickSand-Regular;
  /* 31.08.2026 (2. Anlauf, Nutzer-Entscheidung): Die alte Quicksand v1
     (2011, Andrew Paglinawan) war in den WOFFs defekt -- leere Glyphen fuer
     Odieresis (Ö) u.a., im Bold zusaetzlich alle Akuts um ~115 Einheiten
     verschoben; ein manueller Glyphen-Nachbau rendert im Browser fehlerhaft
     ("Ö l"). Ersatz durch die AKTUELLE Google-Fonts-Quicksand (Variable Font,
     wght 400 hier als statische Instanz eingefroren), gleiches Design, volle
     korrekte Umlaut-/Akzentabdeckung. ?v=<sha256> zwingt Browser, die neue
     Datei statt gecachter defekter Kopien zu laden. */
  src: url(../fonts/Quicksand-Regular.woff?v=fe5082e342) format("woff");
  font-weight: 200;
}
@font-face {
  font-family: QuickSand-Bold;
  src: url(../fonts/Quicksand-Bold.woff?v=1d9dcb9388) format("woff");
  font-weight: 200;
}
@font-face {
  font-family: NothingYouCouldDo-Bold;
  src: url(../fonts/NothingYouCouldDoBold.ttf) format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: Josefin Sans Regular;
  src: url(../fonts/JosefinSans-Regular.ttf) format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: Gloria Hallelujah;
  src: url(../fonts/GloriaHallelujah.ttf) format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Variable.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Italic.woff2) format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "FontAwesome";
  src: url(../fonts/fontawesome-webfont.woff2) format("woff2"), url(../fonts/fontawesome-webfont.woff) format("woff"), url(../fonts/fontawesome-webfont.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
#container {
  background-color: rgba(240, 240, 240, 0.5) !important;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#rezept {
  margin-top: 0px;
}

h1,
h2,
h2.alphabet-list {
  margin-top: 25px !important;
  margin-bottom: 10px !important;
  text-shadow: 1px 2px 1px rgba(80, 80, 80, 0.8) !important;
  line-height: 150% !important;
  font: 2.1em "OrangeLet-Plain" !important;
  color: #65880c !important;
}

h1 a,
h2 a,
h2.alphabet-list a {
  color: #65880c !important;
}

/* H1 zentriert ausgeben (Nutzer-Entscheid 04.09.2026: beibehalten). */
h1 {
  text-align: center !important;
}

h3 {
  margin-bottom: 30px !important;
  margin-bottom: 5px !important;
  line-height: 100% !important;
  font: 1.5em "OrangeLet-Plain" !important;
  color: #65880c !important;
  margin-bottom: 5px !important;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  page-break-after: avoid;
}

h4 {
  margin-bottom: 30px !important;
  margin-bottom: 5px !important;
  line-height: 100% !important;
  font: 1.2em "OrangeLet-Plain" !important;
  color: #65880c !important;
  margin-bottom: 5px !important;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  page-break-after: avoid;
}

h5 {
  margin-bottom: 30px !important;
  margin-bottom: 5px !important;
  line-height: 100% !important;
  font: 1em "OrangeLet-Plain" !important;
  color: #65880c !important;
  margin-bottom: 5px !important;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  page-break-after: avoid;
}

h5.title {
  font-size: 1.5em !important;
}

h3:after {
  content: "";
  display: block;
  height: 100px;
  margin-bottom: -100px;
}

p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
}

.alphabet-list {
  line-height: 1.5em;
}

.alphabet-list a {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  /* War 1.2em -- beim Fliesstext-Grössen-Fix vom Vormittag (07.08.2026,
     Commit 87f80bc) bewusst als "Navigation/Ueberschrift" eingestuft und
     ausgenommen. Nutzerfeedback korrigiert das: die A-Z-Liste ist eine reine
     Rezepttitel-Textliste (kein Button/Nav-Element), soll also wie
     Fliesstext ("Rezept"-Tab, p { font-size: 1em }) aussehen. */
  font-size: 1em;
}

/* Abstand zwischen den einzelnen Eintraegen verringert (Nutzerfeedback
   07.08.2026): jeder Eintrag ist ein eigenes <p class="alphabet-list">
   innerhalb von .az-list-view.editorial-teaser -- die generische Regel
   ".editorial-teaser p" (margin-bottom: 13px !important, fuer normale
   Fliesstext-Absaetze auf anderen Seiten wie Impressum/Ueber-mich gedacht)
   griff hier ebenfalls und liess die dichte Liste unnoetig ausladend wirken.
   Eigene, spezifischere !important-Regel nur fuer die A-Z-Liste, um diese
   generische Absatz-Regel gezielt zu ueberschreiben, ohne die anderen
   .editorial-teaser-Seiten zu beeinflussen. Buchstaben-Zwischenueberschriften
   (h2.alphabet-list) bewusst unveraendert (eigene Regel, hoehere Selektor-
   Spezifitaet, nicht betroffen).
   Update 07.08.2026, spaeter: von 4px auf 1px weiter verkleinert
   (Nutzerfeedback: Abstand durfte noch enger sein).
   Update 07.08.2026, noch spaeter (Bugfix -- per Chrome-DevTools-Check
   verifiziert, dass der 1px-Wert NIE ankam): der Seiteninhalt haengt unter
   <main id="main"> (main.js/router.js), und an anderer Stelle in
   styles.css existiert die Regel "#main p { margin-bottom: 0.8rem
   !important; ... }" (Fix 07.08.2026, Fliesstext-Absatzabstand). Ein
   ID-Selektor schlaegt einen Zwei-Klassen-Selektor IMMER bei der
   CSS-Spezifitaet, unabhaengig von Regel-Reihenfolge oder !important auf
   beiden Seiten -- ".az-list-view p.alphabet-list" (0,0,2,1) verlor daher
   gegen "#main p" (1,0,0,1), der berechnete margin-bottom blieb bei den
   0.8rem/12.8px aus dieser Regel haengen, NICHT beim hier gesetzten Wert.
   Fix: eigenes "#main" vor den Selektor gesetzt, um auf ID-Ebene
   gleichzuziehen -- (1,0,2,1) gewinnt dann eindeutig gegen (1,0,0,1). */
#main .az-list-view p.alphabet-list {
  margin: 0 5px 1px 0 !important;
}

.alphabet-list a:before {
  content: url("https://www.foodlady.de/files/foodlady/images/symbols/postbullets.png");
  padding-right: 10px;
  vertical-align: top;
  display: inline;
}

.mod_newslist h2 {
  margin-bottom: 0px;
}

.newslist {
  margin-bottom: 0px !important;
}

.newslist .news-content .news-content-inside h4 {
  font-size: 1.2em !important;
  color: #65880c !important;
}

.newslist .news-content .news-content-inside h4 a {
  color: #65880c;
}

.header-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 5px;
}

.stickyheader .header-container {
  float: left;
  width: 300px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  margin-bottom: 5px;
  height: 50px;
}

.headline {
  font-family: "Gloria Hallelujah", Arial, "Arial Unicode MS", Helvetica, Sans-Serif;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  padding-top: 12px;
  white-space: nowrap;
}

.headline a {
  color: #65880c !important;
}

@media all and (max-width: 1920px) {
  .headline {
    font-size: 2.125rem;
  }
}
@media all and (max-width: 768px) {
  .headline {
    font-size: 1.5rem;
  }
}
@media all and (max-width: 420px) {
  .headline {
    font-size: 0.75rem;
  }
}
.slogan {
  align-self: flex-end;
  display: table-cell;
  margin: 5px;
  font-family: "OrangeLet-Plain";
}

@media all and (max-width: 1920px) {
  .slogan {
    font-size: 1.4em;
  }
}
@media all and (max-width: 768px) {
  .slogan {
    font-size: 1.2em;
  }
}
@media all and (max-width: 420px) {
  .slogan {
    font-size: 1em;
  }
}
.slogan a {
  color: #b1875d !important;
}

.audio-controls progress span {
  background-color: red;
}

.mejs-container,
.mejs__container {
  background: rgba(0, 0, 0, 0);
  margin-bottom: 20px;
}

.mejs-container .mejs-controls,
.mejs-container .mejs__controls,
.mejs-container .mejs-controls,
.mejs__container .mejs__controls {
  background: #b1875d !important;
  background: -webkit-linear-gradient(rgba(240, 240, 240, 0.5), #65880c) !important;
  background: -o-linear-gradient(rgba(240, 240, 240, 0.5), #65880c) !important;
  background: -moz-linear-gradient(rgba(240, 240, 240, 0.5), #65880c) !important;
  background: linear-gradient(rgba(240, 240, 240, 0.5), #65880c) !important;
  padding-bottom: 20px;
}

.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-container .mejs-controls .mejs__time-rail,
.mejs-container .mejs-controls span .mejs__time-slider,
.mejs-container .mejs__controls .mejs-time-rail .mejs-time-loaded,
.mejs-container .mejs__controls .mejs__time-rail,
.mejs-container .mejs__controls span .mejs__time-slider,
.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs__container .mejs__controls .mejs-time-rail,
.mejs__container .mejs__controls span .mejs__time-slider,
.mejs__container .mejs__controls .mejs-time-rail .mejs-time-loaded,
.mejs__container .mejs__controls .mejs__time-rail,
.mejs__container .mejs__controls span .mejs__time-slider {
  background: rgba(0, 0, 0, 0);
  width: 0;
}

.video_container audio {
  height: 100px !important;
  background-color: red !important;
}

audio:hover,
audio:focus,
audio:active {
  -webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}

audio {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-box-shadow: 2px 2px 4px 0px green;
  -moz-box-shadow: 2px 2px 4px 0px green;
  box-shadow: 2px 2px 4px 0px green;
  -webkit-border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  background-color: rgba(101, 136, 12, 0.5) !important;
  height: 30px !important;
}

.controlBar {
  background-color: rgba(101, 136, 12, 0.5);
}

audio::-webkit-media-controls-enclosure {
  background-color: rgba(101, 136, 12, 0.1) !important;
}

.player-test progress span,
.ce_player progress span {
  background-color: red;
}

.ce_player #shadow-root span#durationSpan.duration {
  color: red !important;
  background-color: blue !important;
}

progress {
  -moz-appearance: progress-bar;
  display: inline-block;
  vertical-align: -0.2em;
  border: 1px solid ThreeDShadow;
  border-right-color: green;
  border-bottom-color: red !important;
  background-color: blue !important;
}

.newsteaser_v7 .item-overlay {
  font: 1.2em/1.4em "Source Serif 4", Georgia, "Times New Roman", Times, Serif !important;
  z-index: 10;
  background: rgba(101, 136, 12, 0.85) !important;
  transition: top 0.8s ease !important;
  -webkit-transition: top 0.8s ease !important;
}

.newsteaser_v7 .item-overlay-inside {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  color: #fff;
  padding: 30px;
}

/* Echter mehrspaltiger Textfluss (column-count:2) auf 05.08.2026 bewusst
   deaktiviert (Nutzer-Feedback: "muss man immer hin- und her scrollen").
   Root Cause per DB-Abfrage (tl_content.cssID) gefunden: redaktionell in
   Contao/TinyMCE gesetzte Klasse, betraf 410 von 435 Rezepten (1971
   Content-Elemente) -- kein Frontend-Template-Code, daher beim ersten
   Codebase-Scan uebersehen. Live nachgemessen: einzelne .two-cols-Bloecke
   werden bis zu 1422px hoch bei nur 599px Viewport-Hoehe -- Spalte 1 zu
   Ende lesen erfordert Scrollen um mehr als zwei Bildschirmhoehen, dann
   zurueck an den Blockanfang fuer Spalte 2, dann wieder runter. Klassischer
   Anti-Pattern von CSS-Mehrspaltentext auf durchgehend scrollenden
   Webseiten (im Gegensatz zu Print/PDF mit fester Seitenhoehe). Seit der
   heutigen Einfuehrung von max-width:50rem auf .recipe-detail-view (siehe
   dortiger Kommentar) ist die urspruengliche Absicht hinter der
   Zweispaltigkeit -- kuerzere Zeilen -- ohnehin bereits durch die neue
   Spaltenbreite abgedeckt, die Mehrspaltigkeit war redundant geworden.
   Bewusst NUR column-count neutralisiert (auf 1 gesetzt), nicht die Klassen
   selbst entfernt -- die uebrige Typografie der Klassen (Erstbuchstabe,
   Link-/Listenfarben, teaser-box) bleibt unveraendert und wirkt weiterhin,
   nur eben einspaltig. .personal-memo-one-col (eigene, bereits einspaltige
   Variante) war ohnehin nicht betroffen. */
.personal-memo,
.two-cols {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.personal-memo h2:first-child,
.two-cols h2:first-child {
  margin-top: 0px !important;
}

.personal-memo,
.two-cols {
  -webkit-column-rule: 1px solid gray;
  -moz-column-rule: 1px solid gray;
  column-rule: 1px solid gray;
  padding: 0 10px 10px 10px;
  margin-bottom: 20px;
}

.personal-memo p,
.two-cols p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #000;
  margin: 0 5px 13px 0 !important;
  font-size: 1rem;
  line-height: 25px;
  text-align: left;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.personal-memo p a:hover,
.two-cols p a:hover {
  color: #35480a;
}

.personal-memo p a,
.two-cols p a {
  font-weight: bold !important;
}

.personal-memo img,
.two-cols img {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 5px;
  margin-right: 15px;
  margin-bottom: 20px !important;
}

.personal-memo .excerpt,
.two-cols .excerpt {
  font-size: 1em !important;
  border-top-style: solid;
  border-left-style: solid;
  border-top-width: 8px;
  border-left-width: 2px;
  border-top-color: rgba(101, 136, 12, 0.3);
  background: rgba(226, 232, 238, 0.5);
  border-left-color: #65880c;
  padding: 10px 10px 10px 20px;
  margin: 5px 5px 20px 10px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.personal-memo ol li,
.two-cols ol li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
}

.personal-memo ol li a:hover,
.two-cols ol li a:hover {
  color: #35480a !important;
}

.personal-memo ol li a,
.two-cols ol li a {
  color: #65880c !important;
}

.personal-memo li ol li,
.two-cols li ol li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 0.9em;
}

.personal-memo li ol li a:hover,
.two-cols li ol li a:hover {
  color: #35480a !important;
}

.personal-memo li ol li a,
.two-cols li ol li a {
  color: #65880c !important;
}

.personal-memo ul li,
.two-cols ul li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
  list-style-type: square !important;
  list-style-position: outside;
}

.personal-memo ul li a:hover,
.two-cols ul li a:hover {
  color: #35480a !important;
}

.personal-memo ul li a,
.two-cols ul li a {
  color: #65880c !important;
}

.personal-memo-one-col {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #000;
  margin-bottom: 20px;
  text-align: left;
}

.personal-memo-one-col a:hover {
  color: #35480a !important;
}

.personal-memo-one-col a {
  color: #65880c !important;
}

.personal-memo-one-col p {
  margin: 0 5px 13px 0 !important;
  font-size: 1rem;
  line-height: 25px;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.personal-memo-one-col img {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.personal-memo-one-col .excerpt {
  font-size: 1em !important;
  border-top-style: solid;
  border-left-style: solid;
  border-top-width: 4px;
  border-left-width: 2px;
  border-top-color: #65880c;
  border-left-color: #65880c;
  padding-top: 10px;
  padding-left: 20px;
  margin-bottom: 15px;
}

.one-col {
  margin-left: 10px;
}

.one-col p {
  margin: 0 5px 13px 0 !important;
  font-size: 1rem;
  line-height: 25px;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.one-col img {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.one-col .excerpt {
  font-size: 1em !important;
  border-top-style: solid;
  border-left-style: solid;
  border-top-width: 4px;
  border-left-width: 2px;
  border-top-color: #65880c;
  border-left-color: #65880c;
  padding-top: 10px;
  padding-left: 20px;
  margin-bottom: 15px;
}

.one-col .teaser-box::before {
  content: "i";
  position: relative;
  top: -8px;
  left: -10px;
  width: 16px;
  height: 16px;
  padding: 8px;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #fff;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  background: rgba(101, 136, 12, 0.95);
  text-align: center;
  line-height: 16px;
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #fff;
}

.one-col .teaser-box {
  background: rgba(101, 136, 12, 0.3) !important;
  width: 90%;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  margin: 0px 5px 25px 0 !important;
  font-size: 1rem;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: inline-block;
  color: #000 !important;
  padding: 20px;
  line-height: 26px;
  font-family: QuickSand-Regular;
}

.one-col .teaser-box a {
  color: #65880c;
  font-weight: bold;
}

.one-col .teaser-box p::before {
  content: "" !important;
}

.one-col .teaser-box p {
  font-size: 1em !important;
  font-family: QuickSand-Regular !important;
}

.one-col .teaser-box blockquote {
  font-size: 1em;
  font-family: QuickSand-Bold;
  font-size: 0.9em;
}

.one-col .teaser-box strong {
  font-family: QuickSand-Bold;
}

.one-col-initial {
  margin-left: 10px;
}

.one-col-initial p:first-of-type:first-letter {
  margin-right: 6px;
  margin-top: 10px;
  float: left;
  color: #fff;
  color: #65880c;
  background: none;
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;
}

.one-col-initial p {
  margin: 0 5px 13px !important;
  font-size: 1rem;
  line-height: 25px;
}

.one-col-initial img {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.one-col-initial .excerpt {
  font-size: 1em !important;
  border-top-style: solid;
  border-left-style: solid;
  border-top-width: 4px;
  border-left-width: 2px;
  border-top-color: #65880c;
  border-left-color: #65880c;
  padding-top: 10px;
  padding-left: 20px;
  margin-bottom: 15px;
}

.one-col-initial .teaser-box::before {
  content: "i";
  position: relative;
  top: -8px;
  left: -10px;
  width: 16px;
  height: 16px;
  padding: 8px;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #fff;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  background: rgba(101, 136, 12, 0.95);
  text-align: center;
  line-height: 16px;
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #fff;
}

.one-col-initial .teaser-box {
  background: rgba(101, 136, 12, 0.3) !important;
  width: 90%;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  margin: 0px 5px 25px 0 !important;
  font-size: 1rem;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: inline-block;
  color: #000 !important;
  padding: 20px;
  line-height: 26px;
  font-family: QuickSand-Regular;
}

.one-col-initial .teaser-box a {
  color: #65880c;
  font-weight: bold;
}

.one-col-initial .teaser-box p::before {
  content: "" !important;
}

.one-col-initial .teaser-box p {
  font-size: 1em !important;
  font-family: QuickSand-Regular !important;
}

.one-col-initial .teaser-box blockquote {
  font-size: 1em;
  font-family: QuickSand-Bold;
  font-size: 0.9em;
}

.one-col-initial .teaser-box strong {
  font-family: QuickSand-Bold;
}

/* Siehe ausfuehrlichen Kommentar bei .personal-memo/.two-cols weiter oben
   (05.08.2026) -- dieselbe Deaktivierung fuer die -initial-Variante
   (zusaetzlich mit Drop-Cap-Erstbuchstabe, siehe .two-cols-initial
   p:first-of-type::first-letter weiter unten, bleibt unveraendert). */
.two-cols-initial {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.two-cols-initial {
  -webkit-column-rule: 1px solid gray;
  -moz-column-rule: 1px solid gray;
  column-rule: 1px solid gray;
  padding: 0 0 0 10px;
  color: #000;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  margin-bottom: 20px;
  text-align: left;
}

.two-cols-initial hr {
  border-top: 1px solid none;
  break-after: column;
}

.two-cols-initial p:first-of-type::first-letter {
  float: left;
  font-size: 250%;
  line-height: 1;
  vertical-align: top;
  margin-top: 0.1em;
  padding-right: 0.125em;
  padding-bottom: 0.1em;
  color: #65880c;
  background: none;
}

@supports (-webkit-hyphens: auto) {
  .two-cols-initial p:first-of-type::first-letter {
    transform: translateY(-0.15em);
  }
}
@-moz-document url-prefix() {
  .two-cols-initial p:first-of-type::first-letter {
    margin-top: 0.15em;
    padding-bottom: 0;
    transform: none;
  }
}
.two-cols-initial p {
  margin: 0 5px 13px 0 !important;
  font-size: 1rem;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.two-cols-initial p a:hover {
  color: #35480a;
}

.two-cols-initial ol li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
}

.two-cols-initial ol li a:hover {
  color: #35480a !important;
}

.two-cols-initial ol li a {
  color: #65880c !important;
}

.two-cols-initial ul li {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
  list-style-type: square !important;
  list-style-position: outside;
}

.two-cols-initial ul li a:hover {
  color: #35480a !important;
}

.two-cols-initial ul li a {
  color: #65880c !important;
}

.two-cols-initial img {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 10px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
}

.two-cols-initial .excerpt {
  font-size: 1em !important;
  border-top-style: solid;
  border-left-style: solid;
  border-top-width: 8px;
  border-left-width: 2px;
  border-top-color: rgba(101, 136, 12, 0.3);
  background: rgba(226, 232, 238, 0.5);
  border-left-color: #65880c;
  padding: 10px 0 10px 20px;
  margin: 5px 5px 20px 10px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.two-cols-initial .teaser-box::before {
  content: "i";
  position: relative;
  top: -8px;
  left: -10px;
  width: 16px;
  height: 16px;
  padding: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #fff;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: inline-block;
  background: rgba(101, 136, 12, 0.95);
  text-align: center;
  line-height: 16px;
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #fff;
}

.two-cols-initial .teaser-box {
  background: rgba(101, 136, 12, 0.3) !important;
  width: 90%;
  -webkit-border-radius: 2px 2px 2px 2px;
  -moz-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  margin: 0px 5px 25px 0 !important;
  font-size: 1rem;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: inline-block;
  color: #000 !important;
  padding: 20px;
  line-height: 26px;
  font-family: QuickSand-Regular;
}

.two-cols-initial .teaser-box a:hover {
  color: #35480a;
  font-weight: bold;
}

.two-cols-initial .teaser-box a {
  color: #65880c;
  font-weight: bold;
}

.two-cols-initial .teaser-box p::before {
  content: "" !important;
}

.two-cols-initial .teaser-box p {
  font-size: 1em !important;
  font-family: QuickSand-Regular !important;
}

.two-cols-initial .teaser-box blockquote {
  font-size: 1em;
  font-family: QuickSand-Bold;
  font-size: 0.9em;
}

.two-cols-initial .teaser-box strong {
  font-family: QuickSand-Bold;
}

/* Korrigierter Teaser-Box-Recipe Stil mit korrekter, einmaliger Hintergrund-Platzierung */
div.teaser-box-recipe {
  background-repeat: no-repeat !important;
  background-position: 98% 0px !important;
  background-color: rgba(101, 136, 12, 0.1);
  background-image: url("https://www.foodlady.de/files/foodlady/images/symbols/bueroklammer-01-64.png");
  border: 3px solid rgba(101, 136, 12, 0.3);
  -webkit-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  padding: 6px 70px 6px 20px;
  margin: 0 10px 25px 10px;
  color: #000;
  clear: both;
  font-family: QuickSand-Regular;
  font-size: 1.1em;
  font-weight: bold;
  text-align: justify;
  text-justify: auto;
  line-height: 1.4em;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

div.teaser-box-recipe a:hover {
  color: #35480a !important;
}

div.teaser-box-recipe a {
  color: #65880c !important;
}

/* Modifier fuer den nach "Zutaten" verschobenen Rezept-Summary-Baustein
   (05.08.2026, Folge-Session, siehe render-detail.js): dieselbe Box-Optik
   wie div.teaser-box-recipe, aber ohne die Buerklammer-Hintergrundgrafik --
   am Zutaten-Anfang ist der Baustein bewusst plazierte Einleitung statt
   "angehefteter Zettel" im Fliesstext, das Icon passt dort nicht mehr.
   Rechtes Padding an das linke angeglichen, da der bisherige Freiraum
   (70px) nur fuer das Icon reserviert war. */
.teaser-box-recipe.teaser-box-recipe--zutaten {
  background-image: none !important;
  padding: 6px 20px 6px 20px;
}

.paperclip {
  box-sizing: border-box;
  display: block;
  top: 30%;
  left: 50%;
  margin-top: -40px;
  margin-left: -19px;
  height: 80px;
  width: 38px;
  border: 3px groove #ddd;
  border-radius: 0 0 9px 9px;
  border-top: none;
  position: absolute;
  transform: rotate(187deg);
  -webkit-transform: rotate(187deg);
  -webkit-backface-visibility: hidden;
}

.paperclip::before,
.paperclip::after {
  content: "";
  position: absolute;
  border: 3px groove #ddd;
}

.paperclip::before {
  left: 3px;
  height: 50px;
  width: 20px;
  border-radius: 0 0 90px 90px;
  border-top: none;
}

.paperclip::after {
  top: -30px;
  left: -3px;
  height: 30px;
  width: 26px;
  border-radius: 90px 90px 0 0;
  border-bottom: none;
}

.carrot ul li {
  list-style-type: square !important;
  list-style-image: url("https://www.foodlady.de/files/foodlady/images/symbols/karotte-16x16.png");
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
  list-style-position: outside;
}

.carrot ul li a:hover {
  color: #35480a !important;
}

.carrot ul li a {
  color: #65880c !important;
}

.editorial-teaser .one-col-initial p:first-of-type:first-letter {
  margin-right: 6px;
  margin-top: 10px;
  float: left;
  color: #fff;
  color: #65880c;
  background: none;
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;
}

.editorial-teaser p {
  margin: 0 5px 13px 0 !important;
  font-size: 1rem;
  line-height: 25px;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.personal_tipp,
.personal-tipp {
  -webkit-border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  border-radius: 20px 20px 20px 20px;
  -webkit-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.5);
  width: 90%;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 40px !important;
  padding: 20px;
  background: -webkit-linear-gradient(#e8f4e8, white) !important;
  background: -o-linear-gradient(#e8f4e8, white) !important;
  background: -moz-linear-gradient(#e8f4e8, white) !important;
  background: linear-gradient(to bottom right, lightgrey, white) !important;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1rem;
}

.personal_tipp a,
.personal-tipp a {
  color: #65880c;
  font-weight: bold;
}

.personal_tipp li a,
.personal-tipp li a {
  font-weight: bold;
}

.personal_tipp a:hover,
.personal-tipp a:hover {
  color: #35480a;
}

@media only screen and (min-width: 768px) {
  .stickyheader .header.cloned {
    line-height: 50px !important;
  }
}
.stickyheader .slogan {
  display: none;
}

.stickyheader .headline {
  display: none;
}

.zitat {
  background: -webkit-linear-gradient(#e8f4e8, white) !important;
  background: -o-linear-gradient(#e8f4e8, white) !important;
  background: -moz-linear-gradient(#e8f4e8, white) !important;
  background: url("https://www.foodlady.de/files/foodlady/images/symbols/postquote.png") no-repeat scroll, linear-gradient(to bottom right, #e8f4e8, white) !important;
  border: 1px solid #ccb094 !important;
  padding: 6px 6px 6px 34px;
  margin: 0 0 10px 10px;
  color: #000;
  font-size: 1rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-weight: normal;
  font-style: italic;
  clear: both;
}

.zitat p:first-of-type:first-letter {
  margin-right: 6px;
  margin-top: 10px;
  float: left;
  color: #65880c !important;
  background: none;
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;
}

.zitat p {
  margin-bottom: 15px !important;
  font-size: 1rem !important;
  text-align: left;
}

.zitat.song {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-bottom: 15px !important;
  font-size: 1rem !important;
  text-align: center;
}

.zitat-mail {
  background: rgba(226, 232, 238, 0.5) url("https://www.foodlady.de/files/foodlady/images/symbols/mail-icon-small-01.png") no-repeat scroll !important;
  border: 1px solid #ccb094 !important;
  padding: 6px 6px 6px 70px;
  margin: 0 10px 10px 10px;
  color: #000;
  font-family: monospace;
  font-weight: normal;
  overflow: auto;
  clear: both;
}

.zitat-mail p:first-of-type:first-letter {
  margin-right: 6px;
  margin-top: 10px;
  float: left;
  color: #65880c !important;
  background: none;
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;
}

.zitat-mail p {
  margin-bottom: 15px !important;
  font-size: 1em !important;
  text-align: left;
}

.zitat-quelle {
  margin-left: 10px;
  margin-bottom: 20px;
  font-size: 1.3em;
  font-variant: small-caps;
  text-align: center;
}

blockquote {
  background: #e2e8ee url("https://www.foodlady.de/files/foodlady/images/symbols/postquote.png") no-repeat scroll !important;
  background: rgba(226, 232, 238, 0.5) url("https://www.foodlady.de/files/foodlady/images/symbols/postquote.png") no-repeat scroll !important;
  border: 1px solid #ccb094 !important;
  padding: 6px 6px 6px 34px;
  margin: 0 0 0 10px;
  color: #000;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-weight: normal;
  font-style: italic;
  overflow: auto;
  clear: both;
}

h1 .ce_image {
  margin-top: -14px !important;
}

/* Bugfix 05.08.2026 (Nutzer-Screenshot Handy: Schriftgroessen-Regler
   A/A+/A++ teilweise ausserhalb des Displays, Logo beim Scrollen
   teilweise verschwunden): verhindert, dass IRGENDEIN zu breites
   Element (aktuell identifiziert: .recipe-grid minmax(340px,...), s.
   dort) den mobilen Layout-Viewport ueber die sichtbare Bildschirm-
   breite hinaus aufblaeht -- genau das drueckt position:fixed-Elemente
   mit right:-Angabe (.fontsize-toggle) aus dem sichtbaren Bereich.
   Korrektur 05.08.2026 (Nutzer-Feedback): NUR auf <html>, nicht
   zusaetzlich auf <body> -- header ist ein DIREKTES Kind von body, und
   overflow-x:hidden ausgerechnet auf dem direkten Elternelement eines
   position:sticky-Elements ist ein bekannter Cross-Browser-Bug-Ausloeser
   (macht body zum Scroll-Container, wodurch sticky seinen Bezugsrahmen
   verliert -- Symptom hier: Sticky-Banner blieb beim Scrollen nicht
   mehr oben haengen, verschwand stattdessen normal mit der Seite).
   overflow-x:hidden auf <html> allein reicht fuer denselben Zweck (der
   Ueberbreiten-Schutz greift schon am Wurzelelement/Viewport) und hat
   dieses Problem nicht, weil html nicht im Elternpfad von header liegt. */
html {
  overflow-x: hidden;
}

img {
  display: block;
  margin-bottom: 35px;
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
}

.image_container .image-captioncaption {
  background: #65880c !important;
  margin-bottom: 20px !important;
}

.image-caption figure,
.image-caption figcaption {
  margin: 0;
  padding: 0;
}

.image-caption figure.einzel {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 32.8%;
}

/* Fix 05.08.2026: rsce_tao_image_fl-Illustrationsbilder (Bild mit
   Hover-Caption) verwenden NICHT die Klasse "einzel" (die wuerde die
   Breite ungewollt auf 32.8% zwingen -- Tab-Illustrationen sollen laut
   Regel oben (.recipe-detail-view .tab-pane .image_container img) volle
   Breite haben). Ohne "einzel" fehlte dem <figure> aber position:relative,
   wodurch figcaption (position:absolute) und das ::before-"?"-Icon sich
   am falschen, weiter aussen liegenden Vorfahren statt am Bild selbst
   ausrichteten -- Symptom: Hover-Caption wirkte "eingefroren"/falsch
   platziert, Infobutton sass an falscher Stelle auf der Seite. */
.image-caption figure.image_container {
  position: relative;
  overflow: hidden;
}

.image-caption figure img {
  width: 100%;
  display: block;
}

.image-caption figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 3em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  font-family: OrangeLet-Plain;
  font-size: 1.3em;
}

.image-caption figcaption {
  position: absolute;
  bottom: -5em;
  text-align: center;
  line-height: 3em;
  white-space: nowrap;
  color: #fff;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.image-caption figure.expand-bottom figcaption {
  width: 0;
  left: 50%;
}

.image-caption figure.middle figcaption {
  width: 0;
  bottom: 50%;
  left: 50%;
  overflow: hidden;
}

.image-caption figure:focus figcaption,
.image-caption figure:hover figcaption {
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.image-caption figure:before {
  content: "?";
  position: absolute;
  bottom: 1em;
  left: 1em;
  background: hsla(0, 0%, 100%, 0.5);
  color: #000;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.image-caption figure:focus:before,
.image-caption figure:hover:before {
  background: hsla(0, 0%, 100%, 0);
  color: rgba(0, 0, 0, 0);
}

@media only screen and (max-width: 800px) {
  .image-caption body {
    width: 100%;
    margin: 2% 0;
    padding: 1%;
  }
  .image-caption figure.einzel {
    width: 48%;
  }
}
@media only screen and (max-width: 600px) {
  .image-caption figure.einzel {
    width: 100%;
  }
}
.rsts-view img {
  margin-bottom: 0px !important;
}

.publish_date {
  font: 1.4em "NothingYouCouldDo-Bold" !important;
  color: #000 !important;
  text-align: right !important;
  margin: 10px 0px 20px 0px !important;
}

.publish_date_hp {
  color: #9b9b9b !important;
  text-align: right !important;
}

tbody tr p {
  font-size: 1rem !important;
}

table {
  font-size: 1rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  color: #000;
  background-color: #efefed;
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin-bottom: 20px !important;
}

table tbody td:first-child {
  text-align: right;
  width: 20%;
  padding-right: 10px;
  border-right: solid #aa8;
}

table tr td:nth-of-type(2) {
  text-align: left;
  padding-left: 10px;
}

table tr:nth-child(odd) {
  background-color: #efefed;
}

table tr:nth-child(even) {
  background-color: #cfcfcd;
}

img.smiley,
img.emoji {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
}

.recipe_table h2:first-child {
  margin-top: 0px !important;
}

/* Fix 09.08.2026 (Nutzer-Feedback: unruhiger Serif/Sans-Wechsel im
   Zutaten-Tab): Die Portionsangabe "(Zutaten fuer X Portionen)" ist ein
   ganz normales <p> ohne eigene Klasse und erbte bisher die globale
   Fliesstext-Schrift "Source Serif 4" (Zeile ~130) -- direkt zwischen dem
   serifenlosen Teaserkasten (QuickSand) und der Tabelle. Direktes-Kind-
   Selektor (statt ".recipe_table p"), damit NICHT versehentlich die
   Absaetze innerhalb der Tabellenzellen (.recipe_table table tbody td p,
   bereits auf Josefin Sans gesetzt) mitgetroffen werden. */
.recipe_table > p {
  font-family: "Josefin Sans Regular";
}

.recipe_table p img.smiley {
  margin-bottom: 0px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.recipe_table table {
  margin-top: 10px !important;
  width: 100% !important;
  color: #000;
  background-color: #ffffff;
  border: 0.5px solid #d8d8d0;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 100%;
  margin-bottom: 20px !important;
}

/* Alternative 3 (farblich akzentuiert), Nutzerentscheidung 05.08.2026:
   Grau-Zebra durch helle Gruen/Weiss-Abwechslung ersetzt, dazu ein
   3px gruener Akzentstreifen an tbody td:first-child (siehe unten)
   fuer bessere Zeilen-Unterscheidbarkeit. */
.recipe_table table tr:nth-child(odd) td {
  background-color: #f5f9ef !important;
}

.recipe_table table tr:nth-child(even) td {
  background-color: #ffffff !important;
}

/* Fix 09.08.2026 (Nutzer-Feedback: unruhiger Serif/Sans-Wechsel im
   Zutaten-Tab): Kopfzeile hatte bisher KEINE eigene font-family und fiel
   auf den generischen "table { font-family: Source Serif 4 }"-Fallback
   zurueck -- vermutlich ein Uebersehen aus dem 07./08.08.-Fix, der
   font-family: Josefin Sans Regular nur fuer tbody gesetzt hat, nicht fuer
   thead. Jetzt an tbody angeglichen, damit Kopf- und Datenzeilen der
   Tabelle dieselbe Schriftfamilie teilen. */
.recipe_table table thead th,
.recipe_table table thead td p {
  background-color: #eaf3de !important;
  border-bottom: 2px solid #639922 !important;
  color: #27500a !important;
  font-family: "Josefin Sans Regular";
  font-weight: bold;
  font-size: 1rem !important;
  vertical-align: middle !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding-left: 5px;
}

.recipe_table table tbody td:first-child {
  text-align: right !important;
  width: 20% !important;
  height: 10% !important;
  padding-right: 10px !important;
  padding-left: 9px !important;
  border-right: none !important;
  font-weight: 500 !important;
  color: #3b6d11 !important;
}

.recipe_table table tbody td:first-child p {
  text-align: right !important;
  height: 10% !important;
}

.recipe_table table tbody td,
.recipe_table table tbody td p {
  font-family: "Josefin Sans Regular";
}

/* Fix 02.08.2026: die drei Breakpoints skalierten die Schrift der
   Zutaten-Tabelle bisher GEGENLAEUFIG hoch, je kleiner der Viewport wurde
   (1.05em -> 1.1em -> 1.3em) -- auf echten Handys (<=420px) also am
   groessten von allen. Ergebnis: ~25px Zeilenhoehe fuer simple
   Zutaten-Zeilen, deutlich zu gross (Nutzer-Feedback, Font selbst war
   nicht das Problem). Fix: Schriftgroesse bleibt ueber alle Breakpoints
   im normalen Lesebereich (~1em der Tabellenbasis, seit 07.08.2026 1rem
   statt vormals 1.2rem -- siehe Folge-Fix unten), keine Vergroesserung
   mehr auf schmalen Viewports. Line-height entsprechend grosszuegiger,
   da nicht mehr gegen eine ueberdimensionierte Schriftgroesse
   ausbalanciert werden muss. */
/* Fix 07.08.2026 (Nutzer-Feedback: Schrift in der Desktopversion generell
   zu gross): die globale Basis "table { font-size: 1.2rem; }" weiter oben
   sowie 17 weitere Content-Element-Selektoren (.one-col p, .two-cols p,
   .personal-memo p, .editorial-teaser p, .zitat p, Datenschutz-/404-Listen,
   Kontakt-Button u.a. -- alle 1:1 aus dem alten Contao-Theme uebernommen)
   setzten den eigentlichen Rezept-/Seiten-Fliesstext durchgehend auf 1.2rem
   (19.2px), waehrend Navigation/Header/Teaser bereits bei 1rem (16px)
   lagen -- der Lesetext war dadurch site-weit 20% groesser als der Rest
   der UI. Alle betroffenen font-size:1.2rem-Regeln auf 1rem reduziert
   (siehe Git-Diff dieses Commits fuer die vollstaendige Liste), damit
   Fliesstext und UI wieder dieselbe Basisgroesse teilen. Der
   Schriftgroessen-Regler (A/A+/A++, 03.08.2026) bleibt davon unberuehrt
   -- er skaliert relativ zur (jetzt kleineren) Basis weiterhin um
   115%/130%. */
@media all and (max-width: 1920px) {
  .recipe_table table tbody td,
  .recipe_table table tbody td p {
    font-size: 1.05em !important;
    line-height: 1.5em;
  }
}
@media all and (max-width: 768px) {
  .recipe_table table tbody td,
  .recipe_table table tbody td p {
    font-size: 1em !important;
    line-height: 1.4em;
  }
}
@media all and (max-width: 420px) {
  .recipe_table table tbody td,
  .recipe_table table tbody td p {
    font-size: 1em !important;
    line-height: 1.4em;
  }
}
.recipe_table table tbody td,
.recipe_table table tbody td p {
  font-style: normal !important;
  font-weight: normal !important;
  text-align: left !important;
  font-weight: normal !important;
  vertical-align: middle;
}

/* Fix 18.08.2026 (Nutzer-Feedback: Zeilenabstaende in der Zutaten-Tabelle
   zu gross): Ursache identisch zum #main-Fix bei .alphabet-list (siehe
   Kommentar oben bei #main .az-list-view p.alphabet-list) -- die globale
   Regel "#main p { margin-bottom: 0.8rem !important; }" hat als
   ID-Selektor IMMER Vorrang vor der reinen Klassen-/Typ-Selektor-Regel
   hier, unabhaengig von !important oder Regel-Reihenfolge. Der
   tatsaechlich berechnete margin-bottom blieb also bei 0.8rem/12.8px
   (bzw. mehr bei aktivem Schriftgroessen-Regler A+/A++, da rem-basiert)
   haengen statt bei den hier eigentlich gewuenschten 0px. Fix: "#main"
   vor den Selektor gesetzt, um auf ID-Ebene gleichzuziehen. */
#main .recipe_table table tbody td p,
#main .recipe_table table tbody td p p {
  margin: 0px 5px 0px 5px !important;
}

.recipe_table table tbody td p a:hover {
  color: #35480a;
}

.recipe_table table tbody td strong::before {
  font-size: 1em;
  line-height: 1.5em;
  font-family: "FontAwesome";
  color: #65880c;
  background-image: -webkit-linear-gradient(#65880c, red) !important;
  background-image: -o-linear-gradient(#65880c, red) !important;
  background-image: -moz-linear-gradient(#65880c, red) !important;
  background-image: linear-gradient(#65880c, red) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  content: "\f02b  ";
}

.recipe_table table tbody td strong {
  font-size: 1.3rem;
}

.no-audio {
  display: none;
}

.widget label {
  color: #fff;
}

.ce_tabs .tabs.horizontal-clean {
  padding-bottom: 10px !important;
}

#datenschutzerklaerung .ce_text ul {
  font-size: 1rem !important;
}

#seite-nicht-gefunden .ce_text ul {
  font-size: 1rem !important;
}

.foodlady-kontakt {
  background-color: gray !important;
  font-size: 1rem !important;
}

.foodlady-kontakt:hover {
  background-color: red !important;
  font-size: 1rem !important;
}

.subnav {
  font-size: 1.1em;
}

.subnav a {
  padding: 0px !important;
}

.subnav a.active {
  color: red;
}

.ce_divider_extended {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.mod_article {
  padding-top: 10px !important;
  padding-bottom: 0px !important;
}

#right .inside {
  padding-top: 0px !important;
}

.pagination {
  margin-top: 21em;
}

.newsletter-form form {
  margin: 0 auto;
}

#nl code,
#nl-01 code,
#nl-02 code,
#nl-03 code,
#nl-04 code,
#nl-05 code {
  background-color: rgba(0, 0, 0, 0) !important;
}

#nl .hide-nl,
#nl-01 .hide-nl,
#nl-02 .hide-nl,
#nl-03 .hide-nl,
#nl-04 .hide-nl,
#nl-05 .hide-nl {
  display: none;
}

#nl p,
#nl-01 p,
#nl-02 p,
#nl-03 p,
#nl-04 p,
#nl-05 p {
  width: 70%;
  line-height: 1.5em;
  font-size: 1em !important;
  color: #000 !important;
}

#nl table,
#nl img,
#nl-01 table,
#nl-01 img,
#nl-02 table,
#nl-02 img,
#nl-03 table,
#nl-03 img,
#nl-04 table,
#nl-04 img,
#nl-05 table,
#nl-05 img {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

#nl table tbody td:first-child,
#nl-01 table tbody td:first-child,
#nl-02 table tbody td:first-child,
#nl-03 table tbody td:first-child,
#nl-04 table tbody td:first-child,
#nl-05 table tbody td:first-child {
  text-align: right;
  text-align: left;
  padding-right: 0px;
  border-right: none;
}

#nl table tr td:nth-of-type(2),
#nl-01 table tr td:nth-of-type(2),
#nl-02 table tr td:nth-of-type(2),
#nl-03 table tr td:nth-of-type(2),
#nl-04 table tr td:nth-of-type(2),
#nl-05 table tr td:nth-of-type(2) {
  text-align: left;
  padding-left: 10px;
}

#nl table tr:nth-child(odd),
#nl-01 table tr:nth-child(odd),
#nl-02 table tr:nth-child(odd),
#nl-03 table tr:nth-child(odd),
#nl-04 table tr:nth-child(odd),
#nl-05 table tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0);
}

#nl table tr:nth-child(even),
#nl-01 table tr:nth-child(even),
#nl-02 table tr:nth-child(even),
#nl-03 table tr:nth-child(even),
#nl-04 table tr:nth-child(even),
#nl-05 table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0);
}

.nl-flex-container {
  display: flex;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.nl-flex-row {
  flex-direction: row;
}

.nl-flex-item-img {
  flex-basis: 35%;
  margin: 42px 0.3em 0.3em 0.3em;
}

.nl-flex-item-img .image_container img {
  margin-bottom: 0px !important;
}

.nl-flex-item-text {
  flex-basis: 60%;
  margin: 0.3em;
  background: rgba(101, 136, 12, 0.1);
  font-size: 1em;
}

.nl-flex-item-text h3 {
  padding: 5px;
  background: #f3f3f3;
  border-bottom-width: 2px;
  border-bottom-color: #65880c;
  border-bottom-style: solid;
}

.nl-flex-item-text p,
.nl-flex-item-text h4 {
  padding-left: 5px;
  padding-right: 5px;
}

.nl-flex-item-text h4 {
  font-size: 1.3rem !important;
}

p.nl-flex-item {
  font-weight: bold;
  text-align: center;
}

.mod_subscribe .confirm {
  display: none !important;
}

.timestamp {
  color: gray;
  font-weight: bold;
  font-size: 0.9em;
}

.cookiebar_popup .headline {
  font-family: "OrangeLet-Plain" !important;
  color: #65880c !important;
  font-size: 2em !important;
}

.cookiebar_popup .cookie_info {
  font-size: 1.1rem !important;
}

.cookiebar_popup .cookie_help {
  font-size: 1.1rem !important;
}

.mod_cookiebar_optin .palette .cookie_option_info {
  font-size: 1.1rem !important;
}

.mod_cookiebar_optin .cookie_help p {
  font-size: 1.1rem !important;
}

.widget-label label {
  color: #65880c;
}

.recipe-special {
  position: relative;
  z-index: 1001;
  padding-left: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
  margin-top: -90px;
  margin-bottom: -30px;
}

#wrapper {
  margin-top: -60px !important;
}

.share {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1.3em;
  position: relative;
}

.share:before {
  content: ".";
  font-size: 2.2em;
  position: absolute;
  bottom: 23px;
  left: -8px;
}

.share:after {
  content: ":";
  font-size: 1.6em;
  position: absolute;
  bottom: 4px;
  right: -10px;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.background-paper {
  background: rgba(226, 232, 238, 0.5) url("https://www.foodlady.de/files/foodlady/images/Backgrounds/papier-background.png") no-repeat scroll;
  background-size: cover;
}

.background-paper-50 {
  background: rgba(226, 232, 238, 0.5) url("https://www.foodlady.de/files/foodlady/images/Backgrounds/papier-background-50.png") no-repeat scroll;
  background-size: cover;
}

.rs-slider-teaser-text {
  margin: 0px 75px 10px 75px;
  background: rgba(226, 232, 238, 0.5) url("https://www.foodlady.de/files/foodlady/images/Backgrounds/papier-background-30.png") no-repeat scroll;
  background-size: cover;
}

.rsts-nav-tabs a {
  font-size: 1em !important;
  padding: 10px 10px !important;
}

.foodlady {
  font-family: "Gloria Hallelujah", Arial, "Arial Unicode MS", Helvetica, Sans-Serif;
  font-style: normal;
  text-decoration: none;
}

.result-list {
  list-style-image: url("https://www.foodlady.de/files/foodlady/images/symbols/check-16x16.png");
  margin-left: 40px;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1em;
}

.result-header {
  width: 100%;
  top: 0px;
  z-index: 1030;
  position: relative;
  background: #fff;
  line-height: 30px;
}

mark.highlight {
  background-color: rgba(101, 136, 12, 0.3) !important;
}

@media only screen and (max-width: 767px) {
  #top-wrapper {
    display: none !important;
  }
  #slider .inside {
    display: none !important;
  }
  .mod_search {
    display: inline-block !important;
  }
  .mod_newlist {
    margin-top: -100px !important;
  }
}
.hyphenate {
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

p#mailinvite::after {
  content: "o2@foodlady.de";
}

span#displayMail::before {
  content: "inf";
}

span#noShow {
  display: none;
}

span#displayMail::after {
  content: "o2@foodlady.de";
}

#container {
  display: flex;
  flex-direction: row;
}

@media (max-width: 768px) {
  #container {
    flex-direction: column;
  }
  body.is-home #right {
    order: 1;
  }
  body.is-home #main {
    order: 2;
  }
  body.is-home #left {
    order: 3;
  }
  body:not(.is-home) #main {
    order: 1;
  }
  body:not(.is-home) #left {
    order: 2;
  }
  body:not(.is-home) #right {
    order: 3;
  }
}
.ce_text p,
.ce_accordion p,
#main p,
.rezept-text p {
  line-height: 1.45 !important;
  margin-bottom: 0.8rem !important;
}

#main .image_container img,
#main .ce_image img {
  box-shadow: 0 15px 40px -20px rgba(0, 0, 0, 0.28) !important;
  margin-bottom: 40px !important;
  border-radius: 2px !important;
  transition: all 0.4s ease-in-out !important;
}

#main .image_container img:hover,
#main .ce_image img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 25px 50px -20px rgba(0, 0, 0, 0.35) !important;
}

#right .image_container img,
.sidebar img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  margin-bottom: 15px !important;
  transform: none !important;
}

#main .ce_tabs ul.tabs-fixed,
#rezept ul.tabs-fixed,
ul.tabs-fixed {
  position: fixed !important;
  top: 55px !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  width: 95% !important;
  max-width: 910px !important;
  z-index: 8000 !important;
  background: hsla(0, 0%, 100%, 0.98) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 8px 0 !important;
  border-bottom: 2px solid #65880c !important;
  border-radius: 0 0 5px 5px;
}

.sticky-spacer {
  display: block;
  height: var(--sticky-offset, 200px);
}

/* --- Header & Banner Scroll Transition --- */
header,
.header,
#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #ffffff !important;
  transition: padding 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  /* Bugfix 06.08.2026: ohne border-box addierte sich das scrolled-Padding
     (5px 20px !important, siehe body.scrolled header weiter unten) auf die
     volle width:100% drauf -- der Header lief dadurch im eingeklappten
     Zustand ca. 40px ueber den rechten Viewport-Rand hinaus, was den
     zentrierten .header-container-Inhalt sichtbar nach rechts verschob
     (Diskrepanz zwischen auf- und eingeklapptem Banner). border-box zaehlt
     Padding zur width:100% dazu statt es aufzuaddieren -> kein Overflow
     mehr, gleiche horizontale Position in beiden Zustaenden. */
  box-sizing: border-box;
}

body.scrolled header,
body.scrolled .header,
body.scrolled #header,
header.scrolled,
.header.scrolled {
  padding: 5px 20px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

body.scrolled header img:not(.logo),
body.scrolled .header img:not(.logo),
body.scrolled header p,
body.scrolled .header p,
body.scrolled header .ce_text,
body.scrolled .header .ce_text,
header.scrolled img:not(.logo),
header.scrolled p,
header.scrolled .ce_text {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Suchfeld-Rahmen und Treffer-Anzahl bewusst in derselben Gruenfamilie wie
   die Akzentfarbe gehalten (#65880c/#4a6309) -- vorher neutral-beiger
   Rahmen (#eae7df) ohne erkennbare Verbindung zur darunterliegenden
   Treffer-Anzahl. Nutzerfeedback 03.08.2026: Suchfeld und Trefferzahl
   gehoeren farblich zusammen dargestellt. */
.search-input {
  font-family: "QuickSand-Regular", sans-serif;
  width: 100%;
  max-width: 600px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(101, 136, 12, 0.3);
  border-radius: 50px;
  font-size: 0.95rem;
  outline: none;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
  border-color: #65880c;
  box-shadow: 0 0 0 3px rgba(101, 136, 12, 0.15);
}

.search-input::placeholder {
  font-family: inherit;
  color: #5a5a5a;
}

/* Visuell verstecktes, aber fuer Screenreader vorhandenes Label (bisher im
   Markup mehrfach verwendet -- u.a. Suchfeld, Kontaktformular -- aber nie
   definiert; dadurch liefen diese Labels ungewollt sichtbar und ohne
   Font-Zuweisung im Browser-Serifen-Fallback statt tatsaechlich verborgen
   zu sein. Fix 02.08.2026.) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Treffer-Anzahl direkt unter dem Suchfeld (Nutzerwunsch 02.08.2026, nach
   Korrektur: urspruenglich oberhalb des Rezept-Grids platziert, lag damit
   im Bereich, den der sticky Header beim Scrollen komplett ueberdeckt --
   jetzt Teil des ohnehin sichtbaren Nav-Search-Blocks, kraeftiger statt
   dezent eingefaerbt, damit sie nicht uebersehen wird). :empty blendet die
   Zeile komplett aus (kein leerer Freiraum), solange kein Suchbegriff/Filter
   aktiv ist -- wichtig, damit der sticky Block nicht dauerhaft hoeher wird
   als die feste Bildhoehe der Karten (siehe Suchleisten-Sticky-Fix vom
   Vormittag). */
.result-count {
  font-family: "QuickSand-Bold", sans-serif;
  font-size: 0.8rem;
  color: #4a6309;
  margin: 6px 0 0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(101, 136, 12, 0.08);
}

.result-count:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* --- Startseiten-Begruessungs-Teaser (03.08.2026) ---
   Kurzes Intro zwischen "Aktueller Favorit"-Widget und Rezeptliste,
   sichtbar nur auf der echten Startseite (showFavorite === true in
   api.js/router.js, siehe js/intro-teaser.js). Bewusst KEIN 1:1-Portierung
   des vollen redaktionellen Blocks von foodlady.de/home-start (vier
   Absaetze + Portraitgalerie) -- Chat-Ruecksprache 03.08.2026: nur kurzer
   Teaser + Link zu "Ueber mich", damit die Rezepte schnell erreichbar
   bleiben. Nutzt dieselbe vorgefertigte Dreifach-Portraitfoto-Datei, die
   bereits auf der Ueber-mich-Seite eingebunden ist -- daher hier bewusst
   schmal (max. 160px) gehalten, statt sie in voller Groesse zu zeigen.
   rem-Einheiten bewusst gewaehlt (siehe offener Punkt Schriftgroessen-
   Regler). <h2> uebernimmt automatisch die globale Headline-Optik (Zeile
   ~50, OrangeLet-Plain/#65880c) -- entspricht der Original-Ueberschrift
   "Herzlich willkommen auf meiner Seite!" auf der alten Seite. */
.intro-teaser {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto 2.5rem;
  padding: 1.5rem;
  background: #fafafa;
  border: 1px solid #eae7df;
  border-radius: 16px;
  box-sizing: border-box;
}

.intro-teaser-photo {
  /* Datei zeigt drei gestapelte Portraitfotos (Seitenverhaeltnis ~9:26) --
     bewusst schmal gehalten (110px statt z. B. 160px), sonst dominiert das
     hochkantige Bild die Box optisch und erzeugt neben dem kurzen Text
     unschoenen Leerraum (beim Testen 03.08.2026 mit 160px so beobachtet:
     Bildhoehe ~460px vs. Textblock ~150px). */
  flex: 0 0 110px;
}

.intro-teaser-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.intro-teaser-text {
  flex: 1;
  min-width: 200px;
}

.intro-teaser-text h2 {
  margin-top: 0 !important;
}

.intro-teaser-text p {
  margin-bottom: 0.75rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1rem;
  line-height: 1.5;
}

.intro-teaser-link {
  display: inline-block;
  font-family: "QuickSand-Bold", sans-serif;
  font-size: 0.95rem;
  color: #65880c;
  text-decoration: none;
}

.intro-teaser-link:hover,
.intro-teaser-link:focus-visible {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .intro-teaser {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .intro-teaser-photo {
    flex: 0 0 auto;
    max-width: 140px;
  }
}
.favorite-widget {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto 2.5rem;
  padding: 1.8rem;
  background: #fff;
  border: 1px solid #eae7df;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.favorite-widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.favorite-widget-badge {
  display: inline-flex;
  align-items: center;
  font-family: "QuickSand-Bold", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: #65880c;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.favorite-widget-image {
  flex: 0 0 300px;
}

/* P3 Bildzuschnitt (07.09.2026): cover + explizit zentrierter Fokuspunkt --
   siehe ux-mobile-analyse.md P3. Keine CMS-Fokuspunkte in Contao 4.13,
   daher einheitlich center statt hartem Default (der ohnehin center ist,
   aber hier bewusst deklariert wird). */
.favorite-widget-image img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}

.favorite-widget-content {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.favorite-widget-content h3 {
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
  color: #2b2b2b;
}

.favorite-widget-content p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 1.2rem;
  flex-grow: 1;
}

.favorite-widget-content .btn {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .favorite-widget {
    flex-direction: column;
    padding: 1.2rem;
    gap: 1rem;
  }
  .favorite-widget-image {
    flex: 0 0 auto;
  }
  .favorite-widget-image img {
    min-height: 200px;
  }
}
/* Ueberschrift "Neueste Rezepte" vor der Rezeptliste auf der Startseite
   (nur bei showFavorite === true, siehe api.js loadRecipeList()) --
   optisch an das "Aktueller Favorit"-Badge (.favorite-widget-badge)
   angelehnt, damit die Startseite eine einheitliche Eyebrow-Optik fuer
   beide Abschnitte (Favorit-Karte, Rezeptliste) hat. Eigene Klasse statt
   Wiederverwendung von .favorite-widget-badge, damit spaeteres Anpassen
   des einen Badges nicht versehentlich das andere mitaendert. */
.recipe-list-title {
  max-width: 1280px;
  margin: 0 auto 1.2rem;
  box-sizing: border-box;
}

.recipe-list-badge {
  display: inline-flex;
  align-items: center;
  font-family: "QuickSand-Bold", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: #65880c;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 2.5rem;
}

.recipe-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eae7df;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.recipe-image-wrap {
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: #f0ede6;
}

/* P3 Bildzuschnitt (07.09.2026): cover schneidet gezielt zu (Karten-Format
   230px hoch, Breite variabel); object-position:center haelt den
   Bildmittelpunkt als Fokus, damit bei hartem Zuschnitt nicht systematisch
   nur der obere/untere Rand sichtbar wird (ux-mobile-analyse.md P3). */
.recipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.recipe-card:hover img {
  transform: scale(1.03);
}

.recipe-content {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.recipe-content h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
  color: #2b2b2b;
}

.recipe-content p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1.8rem;
  flex-grow: 1;
}

.recipe-content .result-list {
  margin-left: 20px;
  flex-grow: 1;
}

/* Zutaten-Suchmodus (10.09.2026): die passenden "Menge Zutat"-Zeilen in der
   Trefferkarte -- kurze Zeilen, etwas enger gesetzt, mit Abstand zur
   Ueberschrift wie beim normalen Teaser-Absatz. */
.recipe-content .result-list--zutaten {
  margin-top: 0.5rem;
  line-height: 1.45;
}

.btn {
  font-family: "QuickSand-Bold", sans-serif;
  display: inline-block;
  background-color: #65880c;
  color: white;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.2s;
  cursor: pointer;
  border: none;
}

.btn:hover {
  background-color: #526f09;
}

.back-link {
  margin-bottom: 2rem;
  display: inline-block;
}

/* Lesebreite Fliesstext (05.08.2026, Nutzerfeedback nach Vergleich mit
   "Auf ein Wort"): vorher kein max-width -- Absatztext lief auf breiten
   Desktop-Monitoren bis knapp an den Viewport-Rand (live gemessen:
   ~1167px bei 1280px Viewport, ~1293px bei 1422px Viewport, weit ueber
   der empfohlenen Zeilenlaenge von ca. 60-75 Zeichen). Gilt fuer Rezept-
   Detail-Tabs UND (ueber dieselbe Klasse) Ueber-mich/Impressum/
   Datenschutz via .editorial-teaser. 50rem (=800px bei 16px-Basis) statt
   fixer px-Wert, damit die Spalte mit dem Schriftgroessen-Regler
   (html.fontsize-large/-xlarge, siehe dort) synchron mitwaechst --
   sonst wuerde eine px-Grenze bei "Sehr gross" die Zeichen-pro-Zeile-Zahl
   zusaetzlich verkleinern und den Regler damit konterkarieren. Bilder,
   Bildergalerie und Zutatentabelle bleiben bewusst UNVERAENDERT (kein
   eigenes max-width dort) -- sie skalieren einfach auf die neue,
   schmalere Spaltenbreite mit (width:100% ihres Elternelements), wirken
   dadurch hochwertiger als eine zusaetzlich verengte Bildspalte. */
.recipe-detail-view {
  background: #fff;
  border: 1px solid #eae7df;
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 50rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.recipe-detail-view h1 {
  color: #65880c;
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
}

.preview-banner {
  background: #fdf0d5;
  border: 1px solid #e0a53c;
  color: #7a5210;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.recipe-detail-view img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.recipe-detail-view .ce_image,
.recipe-detail-view .image_container,
.recipe-detail-view figure {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Portrait-Schmuckbild "Ueber mich" (Contao-Element 76232,
   20180221-illustration-foodlady-9x26.png, real 210x600px) -- Relikt der
   alten zweispaltigen Struktur. Ohne diese Regel wuerde die generische
   .recipe-detail-view img { max-width:100%; height:auto } (siehe oben)
   das Hochformat-Bild auf ~720px Breite strecken -> ca. 2050px Hoehe,
   direkt unter der Ueberschrift, noch vor jedem Text. Stattdessen schmal
   halten und rechts neben den ersten Absatz (.one-col-initial) fliessen
   lassen. Markierung erfolgt gezielt nur fuer dieses eine Bild in
   render-page.js (PORTRAIT_DECO_PAGES), nicht global auf .ce_image.
   Selektoren bewusst mit .recipe-detail-view-Praefix (gleiche bzw.
   hoehere Spezifitaet wie die generischen .ce_image/img-Regeln oben,
   damit die Ueberschreibung sicher greift statt sich auf die
   Regelreihenfolge zu verlassen). */
.recipe-detail-view .ce_image--portrait-deco {
  float: right;
  max-width: 220px;
  margin: 0 0 20px 24px;
}

.recipe-detail-view .ce_image--portrait-deco img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0;
}

/* Schriftgroessen-Regler (A+/A++): Textspalte neben dem Bild wird bei
   groesserer Schrift zu schmal fuer sinnvolle Zeilenlaenge -- Float
   aufheben, Bild zentriert ueber den Text stellen. */
html.fontsize-large .recipe-detail-view .ce_image--portrait-deco,
html.fontsize-xlarge .recipe-detail-view .ce_image--portrait-deco {
  float: none;
  max-width: 260px;
  margin: 0 auto 20px;
}

/* Mobile: kein Platz fuer Bild + umfliessenden Text nebeneinander
   (Breakpoint konsistent mit den uebrigen Media Queries der Seite). */
@media (max-width: 768px) {
  .recipe-detail-view .ce_image--portrait-deco {
    float: none;
    max-width: 200px;
    margin: 0 auto 20px;
  }
}
/* Zwischenbilder innerhalb der Tab-Texte (Auf ein Wort, Auf einen Blick,
   Rezept, Zutaten) -- Contao liefert diese in einer festen Breite (z. B.
   910x305px), die kleiner als die verfuegbare Spaltenbreite ist. Ohne
   explizite Breite rendert der Browser sie in ihrer Originalgroesse und
   links­buendig statt ueber die volle Breite (Nutzerwunsch 02.08.2026:
   "sollten 100% Breite haben, wenn das nicht geht, dann zentriert").
   width:100% skaliert sie auf die Containerbreite; da es sich um
   Illustrationsgrafiken (kein Fotomaterial) handelt, faellt der leichte
   Upscale auf ueblichen Bildschirmbreiten kaum auf. */
.recipe-detail-view .tab-pane .image_container img {
  width: 100%;
  height: auto;
}

/* Teaserbild ganz oben in der Detailansicht -- gleiches Problem wie bei
   den Zwischenbildern: Contao liefert eine feste Bildbreite, die kleiner
   als die Containerbreite sein kann, wodurch das Bild sonst schmaler und
   linksbuendig statt ueber die volle Breite erscheint (Nutzerwunsch
   02.08.2026). */
.recipe-detail-view .recipe-hero-image img {
  width: 100%;
  height: auto;
}

.recipe-detail-content {
  font-size: 1.05rem;
  color: #333;
}

.recipe-after-slider {
  margin-top: 2rem;
}

/* Links innerhalb der redaktionellen Rezept-Inhalte (Auf ein Wort, Auf einen
   Blick, Rezept, Zutaten) -- vorher unbehandelt, dadurch Browser-Standard
   (blau, unterstrichen), z. B. bei internen Querverweisen wie "Ribollita".
   Dezente, markenfarbene Unterstreichung statt Standardblau, aber bewusst
   nicht komplett ohne Unterstreichung (Links muessen auch ohne Farbe als
   solche erkennbar bleiben, WCAG 1.4.1). */
.recipe-detail-view .tab-pane a,
.editorial-teaser a {
  color: #4a6309;
  text-decoration: underline;
  text-decoration-color: rgba(74, 99, 9, 0.35);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.recipe-detail-view .tab-pane a:hover,
.recipe-detail-view .tab-pane a:focus-visible,
.editorial-teaser a:hover,
.editorial-teaser a:focus-visible {
  color: #35480a;
  text-decoration-color: currentColor;
}

.recipe-detail-view .tab-pane a:focus-visible,
.editorial-teaser a:focus-visible {
  outline: 2px solid #4a6309;
  outline-offset: 2px;
}

.loading-state,
.empty-state {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem;
  color: #5a5a5a;
  font-size: 1.1rem;
}

/* P2 Skeleton-Ladezustand der Detailansicht (07.09.2026): statt des reinen
   Text-Ladehinweises wird beim Oeffnen eines Rezepts eine Skeleton-Struktur
   angezeigt, die das spaetere Layout andeutet (Titel, Hero-Bild, Datum,
   Tab-Leiste, Textzeilen). Das haelt die Seitenhoehe waehrend des Ladens
   grob stabil und wirkt weniger abrupt als ein leerer Zustand. Die
   Shimmer-Animation wird bei prefers-reduced-motion deaktiviert (dann
   statische, dezente Grauflaechen). Markup: api.js/loadRecipeDetail(). */
/* Bewusst dieselbe Box-Optik wie .recipe-detail-view (weisser Fond, Rahmen,
   abgerundete Ecken, Innenabstand), damit der Skeleton-Zustand die spaetere
   Karte eins zu eins andeutet und der Wechsel zum geladenen Inhalt ohne
   Layout-Sprung erfolgt. */
.recipe-skeleton {
  grid-column: 1/-1;
  max-width: 50rem;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eae7df;
  border-radius: 16px;
  padding: 2.5rem;
}

.recipe-skeleton-title,
.recipe-skeleton-hero,
.recipe-skeleton-date,
.recipe-skeleton-tab,
.recipe-skeleton-line {
  display: block;
  background: #ece9e1;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Laufender Shimmer (diagonaler Lichtreflex) -- nur ohne reduced-motion. */
.recipe-skeleton-title::after,
.recipe-skeleton-hero::after,
.recipe-skeleton-date::after,
.recipe-skeleton-tab::after,
.recipe-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  animation: recipe-skeleton-shimmer 1.4s infinite;
}

@keyframes recipe-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .recipe-skeleton-title::after,
  .recipe-skeleton-hero::after,
  .recipe-skeleton-date::after,
  .recipe-skeleton-tab::after,
  .recipe-skeleton-line::after {
    animation: none;
  }
}
/* Layout orientiert sich an .recipe-detail-view (siehe oben): Titel zuerst,
   darunter das Hero-Bild (unbegrenzt breit, ~1.6:1 gerundet). */
.recipe-skeleton-title {
  width: 62%;
  height: 2.4rem;
  margin: 0 0 1.5rem 0;
}

.recipe-skeleton-hero {
  width: 100%;
  aspect-ratio: 8/5;
  margin-bottom: 0.75rem;
}

.recipe-skeleton-date {
  width: 26%;
  height: 1rem;
  margin: 0 0 1rem auto;
  border-radius: 4px;
}

.recipe-skeleton-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem 0;
  padding: 0 0 0.75rem 0;
  border-bottom: 2px solid #eae7df;
}

.recipe-skeleton-tab {
  width: 96px;
  height: 2rem;
  border-radius: 20px;
}

.recipe-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.recipe-skeleton-line {
  height: 1rem;
}

#homeLink {
  cursor: pointer;
  padding-top: 0;
}

/* Horizontale Tab-Navigation unter dem Teaser-Bild */
.recipe-date {
  text-align: right;
  margin-top: 0.5rem;
  font-family: "NothingYouCouldDo-Bold", cursive;
  font-size: 1.15rem;
  color: #6b5e4f;
}

/* Sticky beim Scrollen (Nutzer-Vorgabe 04.08.2026): die vier Tabs bleiben
   angeheftet, sobald sie beim Scrollen an den Header stossen, statt mit dem
   Inhalt wegzuscrollen. top nutzt die bereits vorhandene CSS-Variable
   --sticky-offset (main.js/updateStickyOffset(), bisher ungenutzt), die
   laufend auf die tatsaechliche (gescrollt kleinere / ungescrollt groessere)
   Header-Hoehe aktualisiert wird -- die Tabs kleben so exakt unter dem
   Header, in beiden Zustaenden und bei jeder Viewport-Breite. Eigener
   Hintergrund noetig, damit beim Scrollen kein Text der Tab-Inhalte durch
   die Leiste hindurchscheint. z-index unter dem Header (1000), aber ueber
   dem normalen Seiteninhalt. */
.recipe-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Fix 04.08.2026: margin-top erzeugte eine sichtbare Luecke zwischen
     Header und den angehefteten Tabs -- bei position:sticky wird der
     eigene margin-top des Elements NICHT "aufgezehrt", sondern bleibt als
     Abstand VOR der eigentlich gestickten Position bestehen (bekannte
     CSS-Eigenheit von sticky + margin). Der bisherige margin-top (1.5rem)
     ist deshalb zu padding-top verschoben -- padding liegt INNERHALB der
     Box und wird vom weissen background mitgefuellt, dadurch sitzen die
     Tabs beim Scrollen buendig am Banner, ohne Luecke. Sichtbarer Abstand
     im normalen (nicht gestickten) Zustand bleibt dabei unveraendert. */
  margin: 0 0 2rem 0;
  border-bottom: 2px solid #eae7df;
  padding: 1.5rem 0 0.75rem 0;
  position: sticky;
  top: var(--sticky-offset, 0px);
  z-index: 500;
  background: #fff;
}

/* Wiedervorlage 04.08.2026 (siehe manifest.json): der Fix oben (margin->
   padding) hat nie das eigentliche Problem geloest -- er hat nur EINE von
   zwei Ursachen behoben. padding-top liegt zwar innerhalb der Box und
   verschiebt keine Box-Kante, ABER es schiebt den sichtbaren Inhalt (die
   Tab-Buttons) 1.5rem tiefer in die eigene Box hinein -- dieser weisse
   Innenraum WIRKT optisch wie eine Luecke zum Banner, obwohl die Box-Kante
   technisch exakt an --sticky-offset sitzt (deshalb massen alle drei
   Playwright-Vorversuche vom 04.08. die Luecke faelschlich als "~0px,
   korrekt"). Zweite, unabhaengige Ursache war ein inline
   style="margin-top: 1rem" direkt am <nav> in render-detail.js -- Ueberrest
   aus der Zeit VOR der Sticky-Funktion (Ur-Commit 31.07.), bei der
   Umstellung oben schlicht uebersehen, weil die nur die CSS-Klasse betraf.
   Als inline Style hatte es Vorrang vor margin: 0 0 2rem 0 und reaktivierte
   exakt die sticky+margin-Eigenheit, vor der der Kommentar oben warnt --
   inzwischen entfernt. Echter Fix jetzt: padding-top nur im tatsaechlich
   angedockten Zustand auf 0, erkannt per Sentinel-Element + Scroll-Listener
   in render-detail.js/initStickyTabsDetection() (bewusst NICHT per
   body.scrolled -- das schaltet schon bei 60px Scroll-Y um, waehrend die
   Tabs je nach Banner-Bildhoehe erst deutlich spaeter tatsaechlich
   andocken). Im normalen, nicht angedockten Zustand bleibt padding-top:
   1.5rem unveraendert -- der Abstand zum Banner bleibt dort erhalten. */
.recipe-tabs-nav.is-stuck {
  padding-top: 0;
}

.recipe-tabs-sentinel {
  height: 0;
  margin: 0;
  padding: 0;
}

/* Desktop-Verdichtung (05.08.2026): auf breiten Viewports (>=1024px) ist
   horizontal reichlich Platz, das rechtfertigt aber kein zusaetzliches
   vertikales Padding -- Banner, Hauptnav und Tab-Leiste nahmen bislang
   dieselben (fuer schmale/mobile Screens bemessenen) Innenabstaende, was
   dem Content unnoetig Flaeche wegnahm (Nutzer-Feedback 05.08.2026:
   "Banner + Navi zu viel Raum, Content zu wenig Flaeche"). Padding/Margin
   hier NUR verkleinert (keine Hoehen-Fixwerte), daher bleibt die
   230px-Bildhoehen-Bedingung der Rezeptkarten unangetastet -- die sticky
   Gesamthoehe wird ausschliesslich kleiner, nie groesser. */
@media (min-width: 1024px) {
  .recipe-tabs-nav {
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
  }
}
.recipe-tab-btn {
  background-color: #f5f2eb;
  color: #2b2b2b;
  border: 1px solid #eae7df;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: "QuickSand-Regular", sans-serif;
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.recipe-tab-btn:hover {
  background-color: rgba(101, 136, 12, 0.1);
  color: #65880c;
  border-color: #65880c;
}

.recipe-tab-btn.active {
  background-color: #65880c;
  color: #ffffff;
  border-color: #65880c;
  box-shadow: 0 4px 10px rgba(101, 136, 12, 0.2);
}

/* "Auf ein Wort" (05.08.2026, Nutzer-Vorgabe, 05.08.2026 nachjustiert):
   vierter Tab von den drei Sach-Tabs (Auf einen Blick/Rezept/Zutaten)
   abgesetzt, weil er methodisch eigenstaendig ist (persoenliche/
   feuilletonistische Gedanken von Jutta statt Rezeptdaten). Korrektur
   nach Nutzer-Feedback: margin-left: auto (voller Ausschlag ans Zeilenende)
   ersetzt durch einen duennen Trenner (.recipe-tabs-divider, eigenes
   Flex-Kind zwischen drittem und viertem Button) -- kleinerer, gezielter
   Abstand statt grosser Luecke, analog Mockup-Variante 2. Farbwerte
   ebenfalls gedaempft (weniger gesaettigtes Terrakotta, kleinere Schrift),
   da die erste Umsetzung im Livesystem dichter/kraeftiger wirkte als im
   Mockup. Weiterhin die im Projekt bereits fuer persoenliche Elemente
   genutzte Schrift NothingYouCouldDo-Bold (siehe .recipe-date) statt
   QuickSand. Sprechblasen-Icon als inline SVG (stroke="currentColor",
   folgt damit automatisch Text-/Hoverfarbe), da im Projekt kein Icon-Font
   eingebunden ist. Ueberschreibt .recipe-tab-btn / :hover / .active gezielt
   -- gleiche Selektor-Spezifitaet, gewinnt durch spaetere Reihenfolge im
   Stylesheet. */
.recipe-tabs-divider {
  width: 1px;
  background-color: #eae7df;
  margin: 0 0.25rem;
}

@media (max-width: 480px) {
  .recipe-tabs-divider {
    display: none;
  }
  /* 2x2-Ausrichtung der vier Rezept-Tabs (12.09.2026, Nutzer-Feedback: bei
     content-breiten Buttons wirkte Zeile 1 (Zutaten/Rezept) schmaler als
     Zeile 2, Kanten fluchteten nicht). Feste Breite nur auf die vier
     Tab-Buttons, ueber :not() ausdruecklich vom PDF-Button (eigene Zeile,
     margin-left: auto) ausgenommen -- der bleibt unveraendert. */
  .recipe-tab-btn:not(.recipe-pdf-btn) {
    flex: 0 0 calc(50% - 0.25rem);
    text-align: center;
  }
  /* "Auf ein Wort" umbricht auf sehr schmalen Screens (Cursive-Font
     NothingYouCouldDo-Bold braucht pro Zeichen mehr Platz als die
     QuickSand-Buttons daneben) -- laut Nutzer akzeptabel, Schrift auf Mobile
     trotzdem etwas verkleinert (Nutzerwunsch 12.09.2026), um den Umbruch zu
     entschaerfen. Nur hier, Desktop-Groesse (1.05rem) bleibt unangetastet. */
  .recipe-tab-btn--auf-ein-wort {
    font-size: 0.9rem;
  }
}
.recipe-tab-btn--auf-ein-wort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: #faf1e2;
  color: #8a5a1e;
  border-color: #e6bd85;
  font-family: "NothingYouCouldDo-Bold", cursive;
  font-size: 1.05rem;
}

.recipe-tab-btn--auf-ein-wort:hover {
  background-color: #f6e6d3;
  color: #8a5a1e;
  border-color: #d9a463;
}

.recipe-tab-btn--auf-ein-wort.active {
  background-color: #f0d7b6;
  color: #8a5a1e;
  border-color: #c9822e;
  box-shadow: 0 4px 10px rgba(201, 130, 46, 0.15);
}

.recipe-tab-btn-icon {
  flex-shrink: 0;
}

/* PDF-Download-Button in der Tab-Navi (05.08.2026, Nutzervorgabe): rechts-
   buendig als letztes Flex-Kind von .recipe-tabs-nav -- anders als bei
   "Auf ein Wort" oben (dort bewusst nur ein duenner Trenner statt vollem
   Ausschlag, siehe Kommentar bei .recipe-tabs-divider) hier ausdruecklich
   margin-left: auto, weil es eine dauerhaft erreichbare Aktions- statt
   einer weiteren Rubrik-Schaltflaeche ist und unabhaengig vom aktiven Tab
   an derselben Stelle sitzen soll. Faellt dank flex-wrap: wrap an
   .recipe-tabs-nav auf schmalen Viewports automatisch in eine eigene,
   ebenfalls rechtsbuendige Zeile. */
.recipe-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  text-decoration: none;
}

/* Tab-Inhaltsbereiche steuern */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- Header-Erweiterung: Foto, Text-Spalte, Social-Share-Icons --- */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}

.header-photo a {
  display: block;
  line-height: 0;
}

.header-photo img {
  /* Vergroessert auf Nutzerwunsch (06.08.2026): 60px -> 85px. Betrifft nur
     den Ausgangs-/ungescrollten Zustand -- body.scrolled .header-photo img
     (26px Desktop / 50px Mobile) bleibt als separate Regel unveraendert
     und ueberschreibt diesen Wert weiterhin beim Scrollen. */
  max-height: 85px;
  width: auto;
  display: block;
  margin: 0;
  transition: max-height 0.3s ease;
}

body.scrolled .header-photo img,
header.scrolled .header-photo img {
  max-height: 50px;
}

/* Bugfix 06.08.2026 (Nutzer-Feedback: Layout auf schmalen Viewports
   gesprengt): die urspruengliche Fassung dieser Regel (max-height:26px)
   galt global fuer ALLE Breiten -- das "Einzeilig-Kollabieren" von
   Nav/Suche/Actions (siehe body.scrolled .header-container weiter unten)
   ist aber nur ab 1024px aktiv. Auf Mobile blieb dadurch ein winziges
   26px-Icon uebrig, ohne dass der dafuer gedachte Platzgewinn ueberhaupt
   gebraucht wurde. Ab hier: die aggressive Verkleinerung nur noch
   zusammen mit dem Rest der Ein-Zeilen-Logik innerhalb des
   min-width:1024px-Blocks weiter unten (siehe dort). */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 600px) {
  body.scrolled .header-photo img,
  header.scrolled .header-photo img {
    max-height: 26px;
  }
}
.header-text {
  flex: 1;
  min-width: 200px;
}

/* Bugfix 11.09.2026: eine zweite, ungescopte Kopie dieser Schrumpf-Regel
   stand hier frueher ohne body.scrolled/header.scrolled-Bedingung -- sie
   griff dadurch auch im ausgeklappten (nicht gescrollten) Header ab
   1024px, liess .header-text nie ueber seinen Inhalt hinaus wachsen und
   sabotierte damit die Zentrierung von Logo-Schriftzug + Claim (die per
   text-align:center auf .headline/.slogan nur innerhalb der tatsaechlich
   verfuegbaren Breite wirkt). Die korrekt auf body.scrolled/header.scrolled
   beschraenkte Fassung derselben Regel existiert bereits weiter unten
   (Ein-Zeilen-Kollaps beim Scrollen) -- die ungescopte Kopie war reines
   Duplikat und wurde ersatzlos entfernt. */
/* Social-Icons und der Impressum/Datenschutz-Schnellzugriff sitzen
   uebereinander in einer gemeinsamen rechten Spalte (.header-actions)
   statt nebeneinander -- so bleibt die Gesamthoehe der Kopfzeile unter der
   Hoehe von .header-photo (60px / 50px im gescrollten Zustand). Wichtig:
   die sticky Header-Hoehe im gescrollten Zustand muss unter der
   230px-Bildhoehe der Rezeptkarten bleiben, sonst reaktiviert das den
   Karten-Slicing-Bug von Session 02.08.2026. Seit 06.08.2026 sind Nav und
   Suche direkte Flex-Kinder von .header-container (siehe Kommentar bei
   .main-nav weiter unten) -- ungescrollt erzwingen sie weiterhin per
   flex-basis:100% eine eigene zweite Zeile (unveraendertes Erscheinungsbild
   zur bisherigen .nav-search-row), erst im gescrollten Zustand ruecken sie
   in dieselbe Zeile wie Logo/Actions, analog zur alten Contao-Seite.
   Hintergrund fuer die Legal-Links hier: bei 364 unpaginierten Rezepten auf
   der Startseite war der Footer (und damit Impressum/Datenschutz) nur nach
   sehr langem Scrollen erreichbar -- Nutzer-Feedback 03.08.2026. */
.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  /* Fix 09.09.2026 (Nutzer-Feedback im Hochformat/Portrait): die
     Social-Icons rutschten beim Scrollen nach links, weil .header-container
     per flex-wrap + justify-content:space-between die .header-actions auf
     schmalen Viewports in eine eigene Zeile brechen liess und dort (als
     einziges Element) durch space-between links gepackt wurde. flex-shrink:0
     verhindert Quetschen, margin-left:auto haelt die Spalte (Social +
     Impressum/Datenschutz) immer am rechten Rand -- auch als alleiniges
     Element einer umgebrochenen Zeile. Damit entspricht der Portrait-Zustand
     dem Querformat (Landscape), wo diese Regeln bereits greifen. */
  flex-shrink: 0;
  margin-left: auto;
}

.social-icons {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.header-legal-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

.header-legal-link {
  font-family: "QuickSand-Bold", sans-serif;
  color: #6b5e4f;
  text-decoration: none;
}

.header-legal-link:hover,
.header-legal-link:focus-visible {
  color: #65880c;
  text-decoration: underline;
}

.header-legal-sep {
  color: #b1875d;
}

/* Korrektur 09.09.2026 (Nutzer-Feedback: im Hochformat/Portrait rutschten
   die Social-Icons nach links und Impressum/Datenschutz fehlten ganz -- im
   Querformat stehen beide rechts oben und sind sichtbar; das Hochformat
   soll dem Querformat entsprechen). Die fruehere Regel (04.08.2026) klappte
   die Legal-Links im gescrollten Zustand bei <=480px komplett ein
   (max-height:0) -- deshalb fehlten sie im Portrait. Stattdessen bleiben sie
   jetzt sichtbar. Damit die kritische sticky-Hoehe (muss unter der
   230px-Bildhoehe der Rezeptkarten bleiben, siehe Kommentar bei
   .recipe-tabs-nav) nicht waebst, wandern Social + Legal im gescrollten
   Zustand in Zeile 1 neben Logo/Text (.header-text schrumpft, .header-actions
   bleibt per margin-left:auto rechts) -- die fruehere eigene, eingeklappte
   Legal-Links-Zeile entfaellt dadurch komplett. */
@media (max-width: 600px) {
  body.scrolled .header-text,
  header.scrolled .header-text {
    flex: 0 1 auto;
    min-width: 0;
  }
  body.scrolled .header-actions,
  header.scrolled .header-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
}
.social-icon-btn {
  color: #65880c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.social-icon-btn:hover {
  color: #2b2b2b;
}

/* Headline/Slogan beim Scrollen ebenfalls einklappen — sonst bestimmt
   dieser Text-Block (padding-top: 40px in der Grundregel) weiterhin die
   Gesamthöhe des Headers, selbst wenn das Foto schon geschrumpft ist. */
.headline {
  transition: padding-top 0.3s ease;
}

body.scrolled .headline,
header.scrolled .headline {
  padding-top: 0;
}

/* Bugfix 06.08.2026: wie beim Logo-Icon oben -- die font-size-Verkleinerung
   ist Teil der Ein-Zeilen-Logik und gehoert daher in den
   min-width:1024px-Block weiter unten, nicht global. */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 600px) {
  body.scrolled .headline,
  header.scrolled .headline {
    font-size: 1.1rem;
  }
}
.slogan {
  display: block;
  text-align: center;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
  max-height: 60px;
  overflow: hidden;
}

body.scrolled .slogan,
header.scrolled .slogan {
  max-height: 0;
  opacity: 0;
  margin: 0;
  /* width:0 zusaetzlich zu max-height (06.08.2026): .slogan ist zwar per
     max-height/opacity unsichtbar, traegt als Block-Element aber weiterhin
     seine volle Textbreite (~300px+) zur max-content-Berechnung von
     .header-text bei (flex-basis:auto) -- dadurch blieb .header-text trotz
     kleinerer .headline-Schrift bei ueber 300px haengen. width:0 (zusammen
     mit dem bereits vorhandenen overflow:hidden in der Basisregel) nimmt
     ihm diesen Platzbedarf, ohne den Opacity-Fade zu stoeren (Breite
     spielt erst eine Rolle, wenn das Element ohnehin schon unsichtbar
     ist). */
  width: 0;
}

/* Ein-Zeilen-Kollaps beim Scrollen (06.08.2026, Nutzerwunsch, an alter
   Contao-Seite orientiert): .main-nav erzwingt ungescrollt per
   flex-basis:100% eine eigene Zeile (siehe dort) -- im gescrollten Zustand
   faellt dieser Umbruch weg, Nav+Suche ruecken neben das bereits auf 50px
   geschrumpfte Logo. .header-text verliert dabei sein 200px-Minimum, da in
   diesem Zustand (Tagline ausgeblendet, s.o.) nur noch der kurze
   "FoodLady"-Schriftzug sichtbar ist und kein reservierter Platz mehr
   noetig ist -- macht Raum fuer Nav/Suche/Actions in derselben Zeile. */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 600px) {
  body.scrolled .main-nav,
  header.scrolled .main-nav {
    flex-basis: auto;
  }
  body.scrolled .header-text,
  header.scrolled .header-text {
    flex: 0 1 auto;
    min-width: 0;
  }
}
.slogan a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.slogan-icon {
  flex-shrink: 0;
}

/* Nav+Suche sind seit 06.08.2026 direkte Flex-Kinder von .header-container
   (vorher eigene .nav-search-row als IMMER separate zweite Zeile). Neues
   Verhalten (Nutzerwunsch, an alter Contao-Seite orientiert): ungescrollt
   sieht es weiterhin wie zwei Zeilen aus (.main-nav erzwingt per
   flex-basis:100% einen Umbruch, siehe dort) -- optisch praktisch
   unveraendert zu vorher. Erst im gescrollten Zustand (siehe body.scrolled
   .main-nav weiter unten bei .headline/.slogan) faellt der Umbruch weg und
   Nav+Suche ruecken neben das geschrumpfte Logo in eine Zeile, wie beim
   Scroll-Verhalten der alten Seite. Suchfeld bleibt dabei bewusst in voller
   Form (kein Icon-Only-Collapse, Nutzervorgabe). Die kritische
   230px-Bildhoehen-Bedingung der Rezeptkarten bleibt unangetastet: die
   gescrollte Gesamthoehe wird durch den Wegfall der erzwungenen zweiten
   Zeile kleiner, nie groesser -- live verifiziert. */
/* Gemeinsamer Wrapper fuer Nav+Suche (06.08.2026, s. Kommentar in
   index.html): erzwingt sich selbst per flex:1 1 100% eine eigene Zeile
   innerhalb von .header-container (ungescrollter Zustand, entspricht
   optisch der alten .nav-search-row) und wird im gescrollten Zustand per
   display:contents transparent, siehe body.scrolled .nav-search-group
   weiter unten bei .headline/.slogan. */
.nav-search-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  flex: 1 1 100%;
}

.nav-search-slot {
  flex: 1 1 auto;
  padding: 0.5rem 0;
  min-width: 140px;
}

.nav-search-slot .filter-section {
  background: transparent;
}

.nav-search-slot .filter-bar .search-input-wrapper {
  max-width: 220px;
  /* min-width 0 -> 6.5rem (10.09.2026): mit dem Umschalter in derselben Zeile
     darf das Suchfeld schrumpfen, aber nicht auf 0 -- unterschreitet die
     Zeile den Platz, bricht stattdessen die Button-Gruppe (i / Filter) per
     flex-wrap um. */
  min-width: 6.5rem;
}

/* Bugfix 05.08.2026 (s. Kommentar oben bei .nav-search-slot): auf
   schmalen Handys darf der Such-/Filter-Block nicht mehr starr
   (220px-Suchfeld) neben der Nav stehen bleiben -- erzwingt eigene volle
   Zeile (flex-basis: 100%, dank flex-wrap auf .header-container) und gibt
   das feste max-width am Suchfeld frei, damit es auf die tatsaechlich
   verfuegbare Breite schrumpfen kann statt sie zu ueberschreiten. */
@media (max-width: 560px) {
  .nav-search-slot {
    flex: 1 1 100%;
    padding: 0.5rem 0 0.25rem;
  }
  .nav-search-slot .filter-bar .search-input-wrapper {
    max-width: none;
  }
  /* Umschalter jetzt in der Suchleisten-Zeile -- auf Mobile Filter-Button und
     Zeilen-Gap etwas kompakter, damit alles moeglichst einzeilig bleibt
     (10.09.2026). */
  .nav-search-slot .filter-bar {
    gap: 5px;
  }
  .nav-search-slot .filter-toggle-btn {
    padding: 0.5rem 0.65rem;
  }
}
/* Desktop-Verdichtung, Fortsetzung: siehe Begruendung bei .recipe-tabs-nav
   weiter oben. */
@media (min-width: 1024px) {
  .header-container {
    /* Zeilenabstand verkleinert (Nutzer-Vorgabe, analog zur bereits
       umgesetzten Verkleinerung im gescrollten Zustand): row-gap 1.5rem
       -> 0.3rem. column-gap (Abstand Foto/Text/Actions INNERHALB Zeile 1)
       bewusst bei 1.5rem belassen. */
    gap: 0.3rem 1.5rem;
    padding: 0.3rem 1.5rem 0.15rem;
  }
  .nav-search-slot {
    padding: 0.2rem 0;
  }
}
/* Feinschliff fuer den einzeiligen gescrollten Zustand (06.08.2026):
   .header-container nutzt als Basisregel justify-content:space-between +
   1.5rem-Gap, urspruenglich fuer die 3 Elemente Foto/Text/Actions gedacht.
   Mit Nav+Suche als zusaetzliche Flex-Kinder verteilt space-between jeden
   uebrigen Platz als riesige Luecken zwischen den Elementen, statt sie
   kompakt zu packen -- dadurch hatte die Suche selbst nach dem
   Logo-Verkleinern (s.o.) keinen Platz mehr. Nur im gescrollten
   Ein-Zeilen-Zustand auf kompaktes Packen umgestellt (flex-start + kleinere
   Gaps/Paddings), .header-actions haelt sich per margin-left:auto weiterhin
   rechtsbuendig. Das Suchfeld wird in diesem engen Zustand zusaetzlich
   leicht schmaler (220px -> 190px) -- bleibt ein echtes Eingabefeld, kein
   reines Icon (Nutzervorgabe), nur kompakter als im ungescrollten
   Normalzustand. */
/* Bugfix 06.08.2026 (Nutzer-Feedback: auf schmalen Viewports sprang der
   Impressum/Datenschutz-Text ueber den rechten Rand hinaus und die Suche
   rutschte ganz nach links statt rechts zu bleiben): der komplette
   Ein-Zeilen-Kollaps-Mechanismus unten war urspruenglich global (ohne
   Media-Query) formuliert und kollidierte dadurch mit den bestehenden
   Mobile-Breakpoints (480px Legal-Links-Collapse, 560px volle-Breite-
   Suche). Das "Einzeilig"-Verhalten ist ohnehin nur ab 1024px sinnvoll --
   ab hier explizit auf diese Breite begrenzt, Mobile bleibt unangetastet
   beim bisherigen (bereits getesteten) Scroll-Verhalten. */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 600px) {
  body.scrolled .header-container,
  header.scrolled .header-container {
    justify-content: flex-start;
    /* Zeilenabstand verkleinert (Nutzer-Vorgabe: Bannerhoehe eingeklappt
       weiter reduzieren): 0.6rem -> 0.25rem zwischen Zeile 1
       (Logo/Nav/Actions) und Zeile 2 (Suche). */
    gap: 0.25rem;
    /* Rechtes/linkes Padding bewusst weiterhin 1.5rem (s. Kommentar-
       Historie: muss mit dem ungescrollten Zustand uebereinstimmen, sonst
       springt Social/Impressum-Datenschutz seitlich). Oben/unten dagegen
       verkleinert (0.5rem -> 0.3rem/0.15rem) -- das ist unabhaengig von der
       Links/Rechts-Konsistenz und spart zusaetzliche Hoehe. */
    padding: 0.3rem 1.5rem 0.15rem;
    /* align-items:flex-start statt der geerbten center (06.08.2026,
       Nutzer-Feedback): .nav-search-slot ist mit Suchfeld + "N Treffer"
       zusammen ca. 84px hoch, .header-actions (Social + Impressum/
       Datenschutz) nur ca. 40px. Bei align-items:center ragt die hoehere
       Suchbox durch die Zentrierung oben ueber die Social-Icons hinaus --
       wirkt wie vertauschte Reihenfolge. flex-start richtet beide Boxen an
       der Oberkante aus. */
    align-items: flex-start;
  }
  body.scrolled .header-actions,
  header.scrolled .header-actions {
    /* order:1 (06.08.2026, Nutzer-Vorgabe): Social-Icons + Impressum/
       Datenschutz sollen im eingeklappten Zustand in Zeile 1 (mit Logo+
       Nav) rechts aussen sitzen. margin-left:auto haelt es zusaetzlich
       rechtsbuendig. */
    margin-left: auto;
    order: 1;
  }
  body.scrolled .nav-search-slot,
  header.scrolled .nav-search-slot {
    /* flex-basis:100% erzwingt einen eigenen Zeilenumbruch (Nutzer-Vorgabe:
       Suche muss -- wie im ausgeklappten Banner -- immer UNTER Social/
       Datenschutz bleiben, nicht daneben). order:20 sortiert sie nach
       Logo/Text/Nav/Actions ein, sodass sie als einziges Element auf der
       neuen Zeile landet. Bugfix (Nutzer-Feedback: Suche haengt links
       unterm Logo statt rechtsbuendig zu bleiben, wie im ausgeklappten
       Zustand): Basisregel hat flex-grow:1, dadurch fuellte die Box die
       komplette Zeile und der Suchinhalt klebte links. flex-grow auf 0
       gesetzt (Box schrumpft auf ihre tatsaechliche Inhaltsbreite) +
       margin-left:auto schiebt diese kompakte Box an den rechten Rand --
       exakt wie beim urspruenglichen .nav-search-slot (flex:0 0 auto,
       durch justify-content:space-between rechtsbuendig). */
    /* Korrektur: flex-grow:0 + margin-left:auto (erster Versuch) griff
       nicht, weil .nav-search-slot als EINZIGES Element auf seiner Zeile
       nie ins Ueberlaufen kam -- ohne Ueberlauf greift flex-shrink nicht,
       die Box blieb bei 100% Breite trotz flex-grow:0. Robusterer Ansatz:
       Box bleibt bewusst 100% breit (unsichtbar, kein eigener Rahmen/
       Hintergrund), aber ihr Inhalt (.filter-section) wird per
       display:flex + align-items:flex-end INNERHALB dieser Box an den
       rechten Rand geschoben. */
    flex-basis: 100%;
    order: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Eigenes Padding verkleinert (Nutzer-Vorgabe: Bannerhoehe eingeklappt
       weiter reduzieren) -- ueberschreibt die 0.35rem aus dem allgemeinen
       1024px-Block weiter oben, nur im gescrollten Zustand. */
    padding: 0.15rem 0 0;
  }
  body.scrolled .main-nav,
  header.scrolled .main-nav {
    gap: 0.35rem;
  }
  /* .nav-search-group transparent schalten: macht Nav+Suche zu direkten
     Flex-Kindern von .header-container, wodurch sie sich in die gescrollte
     Ein-Zeilen-Anordnung einreihen koennen. */
  body.scrolled .nav-search-group,
  header.scrolled .nav-search-group {
    display: contents;
  }
  body.scrolled .nav-search-slot .filter-bar .search-input-wrapper,
  header.scrolled .nav-search-slot .filter-bar .search-input-wrapper {
    max-width: 190px;
  }
}
/* Suchfeld/Filterleiste sichtbar, aber ausser Betrieb (04.08.2026): auf
   Seiten ohne Rezeptliste (Ueber mich, Kontakt) bleiben Eingabefeld,
   Filter-Button und Trefferanzahl im Markup stehen (Vorgabe: nicht
   entfernen), werden aber gedimmt und optisch klar als nicht bedienbar
   markiert -- statt wie zuvor einfach nur wirkungslos im Hintergrund zu
   haengen. Die disabled-Attribute selbst blockieren bereits die Bedienung
   der Formularelemente (siehe setSearchBarDisabled() in api.js);
   pointer-events:none haengt zusaetzlich die reine Anzeigezeile
   (Trefferzahl) mit ins Grau, obwohl die kein natives disabled kennt. */
.filter-section-disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(1);
}

/* Nur der Filter-Button (A-Z/Kategorien) ausgegraut, ohne Suchfeld/
   Trefferanzahl anzutasten -- genutzt auf der Route "Auf ein Wort"
   (Vorgabe 04.08.2026: Suche soll dort aktiv sein, der Rezeptgrid-
   Kategorien-/Buchstabenfilter aber nicht, siehe setFilterOnlyDisabled()
   in api.js). Dieselbe Optik wie .filter-section-disabled, nur ueber
   die native :disabled-Pseudoklasse auf genau diesem Button statt der
   ganzen Leiste. */
#filterToggleBtn:disabled {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(1);
}

.filter-bar {
  display: flex;
  /* gap 10 -> 6px: schafft zusammen mit den kompakteren Umschalter-Segmenten
     (s.u.) Platz, damit der Titel/Zutaten-Toggle mit in diese Zeile passt. */
  gap: 6px;
  align-items: center;
  /* flex-wrap (10.09.2026): auf sehr schmalen Viewports (< ~355px) darf die
     Button-Gruppe (i / Filter) in eine zweite Zeile umbrechen, statt die
     Zeile horizontal zu sprengen. Auf gaengigen Handybreiten bleibt alles
     einzeilig. */
  flex-wrap: wrap;
  min-width: 0;
}

/* Titel/Zutaten-Umschalter (seit 10.09.2026): segmentierter Zweifach-Toggle.
   Optik an .filter-chip angelehnt (heller Gruenfond, gruener Rand), das
   aktive Segment vollflaechig in der Markenfarbe -- konsistent mit
   .filter-toggle-btn.active. Seit 10.09.2026 direkt in .filter-bar VOR dem
   Suchfeld (statt eigener Zeile darunter), um die Sticky-Header-Hoehe auf
   Mobile zu senken -- der Modus-Wechsel bleibt so dauerhaft sichtbar. */
.search-scope {
  display: inline-flex;
  /* in der .filter-bar weder schrumpfen noch wachsen -- das Suchfeld
     (flex: 1) nimmt den restlichen Platz. */
  flex: 0 0 auto;
  padding: 2px;
  gap: 2px;
  border: 1px solid rgba(101, 136, 12, 0.35);
  border-radius: 50px;
  background: rgba(101, 136, 12, 0.06);
}

/* "Auf ein Wort" blendet den Umschalter aus (scopeEl.hidden = true in
   render-auf-ein-wort-feed.js) -- explizit gegen die display-Regel oben
   durchsetzen. */
.search-scope[hidden] {
  display: none;
}

.search-scope-opt {
  font-family: "QuickSand-Regular", sans-serif;
  border: none;
  background: transparent;
  color: #4a6309;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 3px 11px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.search-scope-opt:hover:not(.is-active) {
  background: rgba(101, 136, 12, 0.12);
}

.search-scope-opt.is-active {
  background: #65880c;
  color: #fff;
}

.search-scope-opt:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

/* Suchfeld-Wrapper (statt frueher .search-input direkt) traegt jetzt
   flex/max-width, damit der neue Clear-Button ("x") innerhalb desselben
   Elements absolut positioniert werden kann. Betrifft NUR das
   Rezept-Suchfeld -- die .search-input-Klasse wird ansonsten unveraendert
   auch fuers Kontaktformular verwendet (render-contact.js), das keinen
   Wrapper/Clear-Button hat. Nutzerfeedback 03.08.2026: Sucheingabe liess
   sich nicht ueber einen Button leeren. */
.filter-bar .search-input-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper .search-input {
  width: 100%;
  padding-right: 2.2rem;
}

.search-clear-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  padding: 0;
  color: #5a5a5a;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

/* P1 Touch-Targets (WCAG 2.5.5/2.5.8): vergroesserter, unsichtbarer
   ::after-Hit-Bereich auf >=44x44px, damit das kleine Icon-Button auf
   Touch-Geraeten zuverlaessig treffbar ist, ohne die Optik zu vergroessern. */
.search-clear-btn::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}

.search-clear-btn:hover,
.search-clear-btn:focus-visible {
  background: rgba(101, 136, 12, 0.12);
  color: #4a6309;
}

/* Info-Icon "Such-Optionen" -- oeffnet ein Popup mit allen unterstuetzten
   Suchoperatoren + Kurzbeispielen, siehe buildSearchInfoModalMarkup()/
   openSearchInfoModal() in api.js. Groesser als die uebrigen (rein
   funktionalen) Icon-Buttons der Filterleiste, damit es auffaellt
   (Nutzerfeedback 09.08.2026: der urspruengliche dezente graue Rahmen in
   .filter-clear-btn-Groesse fiel kaum auf) -- die Farbe aber bewusst
   zurueckgenommen: ein voll gefuellter Kreis in der Markenfarbe wirkte zu
   plakativ (Folge-Feedback selber Tag). Stattdessen derselbe sanfte
   Gruenton wie bei .filter-chip (heller Fond + gruener Rand/Text statt
   Vollflaeche) -- auffaellig durch die Groesse, nicht durch grelle Farbe. */
.search-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1.5px solid rgba(101, 136, 12, 0.45);
  background: rgba(101, 136, 12, 0.1);
  color: #65880c;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}

.search-info-btn:hover,
.search-info-btn:focus-visible {
  background: rgba(101, 136, 12, 0.2);
  border-color: #65880c;
}

.search-info-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

.search-info-btn:active {
  transform: scale(0.94);
}

.search-info-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Such-Optionen-Popup: eigenstaendiges Overlay, an document.body angehaengt
   (siehe openSearchInfoModal() in api.js) -- NICHT wie .filter-panel inline
   im fixed-position <header>, deshalb ohne dessen JS-Hoehenberechnung
   auskommend (immer relativ zum Viewport positioniert, nie vom Header
   eingeschraenkt). z-index bewusst ueber ul.tabs-fixed (8000, Rezept-
   Detail-Tabs) UND dem fixed-Header (1000), damit das Popup auf JEDER
   Route wirklich alles ueberlagert. Mobil per Default als Bottom-Sheet
   (konsistent mit dem bereits etablierten .filter-panel-Muster), ab 769px
   auf ein zentriertes Dialogfenster umgestellt (siehe Media Query unten). */
.search-info-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.search-info-modal {
  background: #fff;
  width: 100%;
  /* dvh-Fallback wie bei .filter-panel (P2 Viewport-Unit) */
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  padding: 18px 20px 24px;
}

.search-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.search-info-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2b2b2b;
}

.search-info-close {
  background: none;
  border: none;
  font-size: 1.375rem;
  line-height: 1;
  color: #5a5a5a;
  cursor: pointer;
  padding: 4px 8px;
}

.search-info-close:hover {
  color: #2b2b2b;
}

.search-info-intro {
  font-size: 0.8125rem;
  color: #666;
  margin: 0 0 14px;
}

.search-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-info-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.search-info-pattern {
  flex-shrink: 0;
  min-width: 88px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a6309;
  background: rgba(101, 136, 12, 0.08);
  border: 1px solid rgba(101, 136, 12, 0.3);
  border-radius: 6px;
  padding: 4px 6px;
}

.search-info-item-body {
  min-width: 0;
}

.search-info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2b2b2b;
  margin-bottom: 2px;
}

.search-info-desc {
  font-size: 0.8125rem;
  color: #555;
  margin: 0 0 4px;
}

.search-info-example {
  font-size: 0.8125rem;
  color: #666;
  margin: 0;
}

.search-info-example code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #f4f4ee;
  border-radius: 4px;
  padding: 1px 5px;
  color: #4a6309;
}

/* Sehr schmale Screens: Muster-Chip UND Beschreibung nebeneinander wird bei
   laengeren Mustern (z. B. "mehrere woerter", +"..." -wort) zu eng --
   deshalb hier untereinander statt nebeneinander. Gleicher 420px-Breakpoint
   wie an anderen Stellen im Projekt bereits verwendet. */
@media (max-width: 420px) {
  .search-info-item {
    flex-direction: column;
    gap: 6px;
  }
  .search-info-pattern {
    align-self: flex-start;
    min-width: 0;
  }
}
/* Desktop: zentriertes Dialogfenster statt Bottom-Sheet -- kein Andocken an
   den Info-Button noetig (anders als beim .filter-panel-Pendant), da hier
   ohnehin ein Backdrop die ganze Seite abdunkelt. */
@media (min-width: 769px) {
  .search-info-backdrop {
    align-items: center;
  }
  .search-info-modal {
    width: 90%;
    max-width: 520px;
    /* dvh-Fallback (P2 Viewport-Unit) */
    max-height: 80vh;
    max-height: 80dvh;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }
  .search-info-pattern {
    min-width: 140px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .search-info-modal {
    animation: search-info-in 0.18s ease;
  }
}
@keyframes search-info-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.filter-toggle-btn {
  font-family: "QuickSand-Regular", sans-serif;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #65880c;
  background: #fff;
  color: #4a6309;
  border-radius: 50px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.filter-toggle-btn:hover {
  background: rgba(101, 136, 12, 0.08);
}

.filter-toggle-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

.filter-toggle-btn.active {
  background: #65880c;
  color: #fff;
}

.filter-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #65880c;
  font-size: 0.6875rem;
  font-weight: 700;
  position: absolute;
  top: -6px;
  right: -6px;
  border: 1px solid #65880c;
}

.filter-toggle-btn.active .filter-badge {
  display: flex;
}

.filter-badge:not([hidden]) {
  display: flex;
}

/* Aktive-Filter-Chips: bleiben sichtbar, auch wenn das Panel geschlossen
   ist, damit auf den ersten Blick klar ist, was gerade gefiltert wird —
   ohne das Panel dafür öffnen zu müssen. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(101, 136, 12, 0.08);
  color: #65880c;
  border: 1px solid rgba(101, 136, 12, 0.3);
  border-radius: 20px;
  padding: 5px 6px 5px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.filter-chip-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(101, 136, 12, 0.15);
  color: #65880c;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* P1 Touch-Targets: unsichtbarer ::after-Hit-Bereich auf >=44x44px, damit
   das kleine "x" im Filter-Chip auf Touch-Geraeten gut treffbar ist. */
.filter-chip-remove::after {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
}

.filter-chip-remove:hover {
  background: #65880c;
  color: #fff;
}

.filter-chip-clear-all {
  background: none;
  border: none;
  color: #5a5a5a;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 5px 4px;
}

.filter-chip-clear-all:hover {
  color: #65880c;
}

/* Panel: mobil als Bottom-Sheet mit Backdrop, animiert über max-height
   statt abruptem hidden-Toggle (JS in api.js steuert die "open"-Klasse). */
.filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 950;
}

.filter-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 960;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.filter-panel.open {
  /* Fallback fuer Browser ohne dvh-Support */
  max-height: 75vh;
  /* dvh (05.09.2026, P2 Viewport-Unit): misst die DYNAMISCHE Viewport-
     Hoehe (Adressleiste eingefahren). Bei offener URL-Leiste war 75vh
     (Grosse-Viewport-Hoehe) zu hoch und das Bottom-Sheet ragte unter die
     Leiste/den sichtbaren Bereich -- dvh waechst/schrumpft live mit.
     Env()-Hinweis (fuer spaeteres viewport-fit=cover): dann zusaetzlich
     padding-bottom: env(safe-area-inset-bottom) am .filter-panel. */
  max-height: 75dvh;
  opacity: 1;
}

.filter-panel-inner {
  padding: 16px 20px 24px;
  max-width: 900px;
  margin: 0 auto;
  /* dvh-Fallback wie bei .filter-panel.open oben (P2 Viewport-Unit) */
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
}

.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-panel-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2b2b2b;
}

.filter-panel-close {
  background: none;
  border: none;
  font-size: 1.375rem;
  line-height: 1;
  color: #5a5a5a;
  cursor: pointer;
  padding: 4px 8px;
}

.filter-panel-close:hover {
  color: #2b2b2b;
}

.filter-group-label {
  font-size: 0.75rem;
  color: #5a5a5a;
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-apply-btn {
  width: 100%;
  margin-top: 16px;
}

.filter-apply-btn:disabled {
  /* P2 Kontrast (07.09.2026): #ccc war mit weissem Text nur ~1.6:1.
     #6b6b6b haelt den Grau-/Disabled-Look, erreicht aber AA (~5.3:1). */
  background-color: #6b6b6b;
  cursor: default;
}

/* Desktop: Panel klappt INLINE unterhalb der Filterleiste auf und schiebt
   das Grid nach unten, statt es als Overlay zu verdecken. Kein Backdrop
   (wird in api.js für Viewports ab 769px gar nicht erst erzeugt). */
@media (min-width: 769px) {
  .filter-panel {
    position: static;
    width: 100%;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid transparent;
    margin-top: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease, border-color 0.2s ease;
  }
  .filter-panel.open {
    max-height: 600px;
    margin-top: 10px;
    border-color: #eae7df;
  }
  .filter-panel-inner {
    max-height: 560px;
  }
  .filter-backdrop {
    display: none;
  }
}
.az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.az-nav-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  border-radius: 8px;
  min-width: 32px;
  min-height: 44px;
  text-align: center;
  /* P1 Touch-Targets: vertikales Padding erhoeht, damit die Klickflaeche
     (Hoehe) >=44px erreicht. Die Breite bleibt bewusst schmal -- die A-Z-
     Buttons liegen als dichte, gleichartige Reihe (WCAG-2.5.8-Ausnahme). */
  padding: 10px 8px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.az-nav-reset {
  font-weight: 600;
}

.az-nav-btn:hover:not(.disabled) {
  border-color: #65880c;
  color: #65880c;
  background: rgba(101, 136, 12, 0.06);
}

.az-nav-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 1px;
}

.az-nav-btn.active {
  background: #65880c;
  border-color: #65880c;
  color: #fff;
}

.az-nav-btn.disabled {
  background: #f7f7f5;
  border-color: #eee;
  /* P2 Kontrast (07.09.2026): #a9a9a3 (~2.4:1) -> #6b6b6b (~5:1 auf
     #f7f7f5), bleibt als Disabled-Zustand heller als aktive Chips. */
  color: #6b6b6b;
  cursor: default;
}

/* Kategorien: auf Desktop als Chip-Wrap, auf Mobile als horizontal
   scrollbare Reihe statt mehrzeiliger Button-Wolke im Sheet. */
.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
}

.category-nav-btn {
  border: 1px solid #ddd;
  background: #fff;
  color: #444;
  border-radius: 20px;
  min-height: 44px;
  /* P1 Touch-Targets: vertikales Padding erhoeht, damit die Klickflaeche
     (Hoehe) >=44px erreicht. Breite bleibt bewusst variabel (Chip-Text). */
  padding: 10px 14px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.category-nav-reset {
  font-weight: 600;
}

.category-nav-btn:hover:not(.disabled) {
  border-color: #65880c;
  color: #65880c;
  background: rgba(101, 136, 12, 0.06);
}

.category-nav-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 1px;
}

.category-nav-btn.active {
  background: #65880c;
  border-color: #65880c;
  color: #fff;
}

.category-nav-btn.disabled {
  background: #f7f7f5;
  border-color: #eee;
  color: #6b6b6b;
  cursor: default;
}

@media (max-width: 768px) {
  .category-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .category-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
.filter-clear-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ddd;
  background: #fff;
  color: #5a5a5a;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

/* P1 Touch-Targets: unsichtbarer ::after-Hit-Bereich auf >=44x44px. */
.filter-clear-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.filter-clear-btn[hidden] {
  display: none;
}

.filter-clear-btn:hover {
  border-color: #65880c;
  color: #65880c;
}

.filter-clear-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

.contact-view form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
}

.contact-field {
  display: flex;
  flex-direction: column;
}

.contact-textarea {
  min-height: 160px;
  resize: vertical;
  /* KEIN eigenes font-family mehr (Fix 07.08.2026, Nutzerfeedback): "inherit"
     erbte hier vom umgebenden .contact-field-Div, das selbst keine
     Font-Zuweisung hat -- Textareas bekommen ohne explizite Vorgabe den
     Browser-Serif-Fallback (kein automatisches Erben der Body-Schrift bei
     Formularelementen). .search-input (zweite Klasse auf demselben Element)
     setzt bereits QuickSand-Regular; das "inherit" hier ueberschrieb das
     nur unnoetig, weil es in der Kaskade nach .search-input steht. Gleiche
     Fehlerklasse wie beim Paginierung-Serif-Fix vom selben Tag. */
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.contact-status {
  font-size: 0.95rem;
  min-height: 1.2em;
}

.contact-status.success {
  color: #65880c;
}

.contact-status.error {
  color: #c0392b;
}

.contact-submit-btn {
  align-self: flex-start;
}

/* ===================================================================
 * "AUF EIN WORT"-KOLUMNE (Feed) -- FINALER STAND 01.08.2026, umbenannt 04.08.2026
 * Ersetzt alle vorherigen Patch-Versionen (v1 + v2) vollstaendig.
 * =================================================================== */
.auf-ein-wort-feed {
  max-width: 760px;
  margin: 0 auto;
}

.auf-ein-wort-feed-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.auf-ein-wort-feed-header h1 {
  font: italic 1.5em "Source Serif 4", Georgia, "Times New Roman", Times, Serif !important;
  color: #65880c !important;
  margin-top: 0 !important;
  margin-bottom: 0.4rem !important;
}

.auf-ein-wort-feed-intro {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-size: 1.1rem;
  color: #555;
  max-width: 540px;
  margin: 0 auto;
}

.auf-ein-wort-entry {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e8e0d4;
  cursor: pointer;
}

.auf-ein-wort-entry-image {
  flex: 0 0 280px;
  border-radius: 4px;
  overflow: hidden;
}

/* P3 Bildzuschnitt (07.09.2026): cover + zentrierter Fokuspunkt, konsistent
   zu Karten/Favorit (ux-mobile-analyse.md P3). */
.auf-ein-wort-entry-image img {
  width: 280px;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.auf-ein-wort-entry:hover .auf-ein-wort-entry-image img {
  transform: scale(1.04);
}

.auf-ein-wort-entry-body {
  flex: 1 1 auto;
  min-width: 0;
}

.auf-ein-wort-entry-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 0.5rem !important;
}

.auf-ein-wort-entry-body h2 {
  margin: 0 !important;
  font-size: 1.25rem;
}

.auf-ein-wort-entry-date {
  font-family: "NothingYouCouldDo-Bold", cursive;
  font-size: 1.1rem;
  color: #6b5e4f;
  white-space: nowrap;
}

.auf-ein-wort-entry-excerpt {
  font-family: "Source Serif 4", Georgia, "Times New Roman", Times, Serif;
  font-style: italic;
  font-size: 1.05rem;
  color: #333;
  line-height: 1.6;
}

.auf-ein-wort-entry-excerpt::first-letter {
  color: #65880c;
  font-size: 2.2em;
  font-weight: bold;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
}

.auf-ein-wort-entry-link {
  margin-top: 0.75rem;
}

/* Trefferwoerter-Chips bei der Auf-ein-Wort-Suche (18.08.2026): der Anriss
   (senfExcerpt) bleibt unveraendert -- die Suche laeuft ueber den kompletten
   Rezepttext (searchRecipesElastic()), das gesuchte Wort steckt also oft gar
   nicht im hier angezeigten Ausschnitt. Statt inkonsistentem Highlighting nur
   bei zufaelligem Treffer im Anriss (verworfener erster Ansatz) zeigt eine
   feste Chip-Zeile transparent, WELCHE Woerter den Treffer ausgeloest haben --
   unabhaengig davon, ob sie im Anriss auftauchen. Optik an .filter-chip
   angelehnt (gleiche Grundfarbe/Form), aber eigene Klassen, da funktional
   ein anderer Anwendungsfall (keine entfernbaren Filter, rein informativ). */
.auf-ein-wort-entry-matches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 0.6rem;
}

.auf-ein-wort-entry-matches-label {
  font-size: 0.8125rem;
  color: #5a5a5a;
}

.auf-ein-wort-entry-match-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(101, 136, 12, 0.08);
  color: #65880c;
  border: 1px solid rgba(101, 136, 12, 0.3);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.auf-ein-wort-load-more {
  text-align: center;
  margin-top: 1rem;
}

/* Bildergalerie im Rezept-Detail (slider.js) -- vorher komplett inline
   gestylt mit schwarzem Hintergrund und eckigen, opaken Pfeil-Kaesten;
   dann helle, runde Steuerelemente im Sinne des Redesigns (02.08.2026,
   Nutzerfeedback: "wirkt massig und schwarz, wenig modern"); jetzt (gleicher
   Tag, zweite Runde) zusaetzlich Autoplay + weiche Kreuz-Ueberblendung statt
   seitlichem Schieben (Nutzerwunsch: Anlehnung an den fruehren Rocksolid-
   Slider aus Contao). Dafuer liegen die Slides jetzt uebereinander gestapelt
   (position: absolute) statt nebeneinander in einer Flex-Reihe -- braucht
   eine feste Buehnenhoehe, sonst hat der Wrapper keine eigene Groesse. */
.simple-slider-wrapper {
  margin: 30px 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #f0ede6;
  height: 420px;
}

.simple-slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.3s ease-in-out;
}

.simple-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* P3 Bildzuschnitt (07.09.2026): Slider-Buehne von contain auf cover
   umgestellt -- vorher zeigten die Slider-Bilder (864x540 ~ 1.6:1) in der
   ~800x420-Buehne sichtbare graue Balken (Hintergrund #f0ede6), weil contain
   das Bild ganz zeigt und oben/unten Platz laesst. cover fuellt die Buehne
   jetzt grossflaechig wie die Karten (einheitliche Bildwahrnehmung, Befund
   P3 ux-mobile-analyse.md); das unbeschnittene Original bleibt ueber die
   Lightbox (Klick auf .simple-slide-btn) erreichbar. Fokuspunkt center. */
.simple-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.simple-slide-btn {
  all: unset;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}

.simple-slide-btn:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: -2px;
}

@media (max-width: 600px) {
  .simple-slider-wrapper {
    height: 260px;
  }
}
/* Wer in seinem System Bewegungsreduzierung eingestellt hat, bekommt einen
   harten Schnitt statt Ueberblendung -- Autoplay startet in dem Fall in
   slider.js erst gar nicht. */
@media (prefers-reduced-motion: reduce) {
  .simple-slide {
    transition: none;
  }
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a6309;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}

.slider-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.slider-arrow:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

.slider-prev {
  left: 12px;
}

.slider-next {
  right: 12px;
}

.slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border-radius: 20px;
}

/* P1 Touch-Targets: Dots visuell von 8px auf 12px vergroessert und der
   ::after-Hit-Bereich erweitert. Volle 44px sind hier nicht moeglich, ohne
   dass sich die Trefferflaechen der dicht liegenden Dots ueberlappen
   (WCAG-2.5.8-Ausnahme fuer dichte, gleichartige Reihe) -- der erweiterte
   Bereich (~22px) verbessert die Treffbarkeit aber deutlich. */
.slider-dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  background: #d8d3c4;
  transition: background-color 0.2s;
}

.slider-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.slider-dot.active {
  background: #65880c;
}

/* Lightbox (Vollbildansicht) fuer Slider-Bilder im Rezept-Detail. Wird von
   lightbox.js dynamisch als Overlay ans Ende von <body> gehaengt und beim
   Schliessen wieder komplett entfernt -- kein eigenes Markup dafuer im
   initialen Seiten-HTML. z-index 9999 bewusst ueber allem anderen im
   Projekt (hoechster bisheriger Wert im Projekt: 9000). */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
}

.lightbox-stage {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  /* Fallback fuer Browser ohne dvh-Support */
  max-height: calc(100vh - 40px);
  /* dvh (05.09.2026, P2 Viewport-Unit): Vollbild-Overlay misst jetzt die
     dynamische Viewport-Hoehe statt der grossen -- bei offener mobile URL-
     Leiste ragte calc(100vh - 40px) sonst unter die Leiste/sichtbaren
     Bereich (Bild abgeschnitten). Der Fallback oben bleibt fuer aeltere
     Browser. */
  max-height: calc(100dvh - 40px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.lightbox-close,
.lightbox-arrow {
  position: fixed;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #4a6309;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.15s;
}

.lightbox-close[hidden],
.lightbox-arrow[hidden] {
  display: none;
}

.lightbox-close:hover,
.lightbox-arrow:hover {
  background: #fff;
}

.lightbox-arrow:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 2px solid #65880c;
  outline-offset: 2px;
}

.lightbox-close {
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
}

.lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-counter {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .lightbox-arrow {
    width: 38px;
    height: 38px;
  }
  .lightbox-close {
    width: 36px;
    height: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-close,
  .lightbox-arrow {
    transition: none;
  }
}
.auf-ein-wort-load-more-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 720px) {
  .auf-ein-wort-entry {
    flex-direction: column;
  }
  .auf-ein-wort-entry-image,
  .auf-ein-wort-entry-image img {
    width: 100%;
    flex-basis: auto;
    height: 200px;
  }
}
/* Hauptnavigation (site-weit). Bis 05.08.2026 eigene volle Breite mit
   Rahmenlinien oben/unten (eigene .nav-search-row-Zeile) -- seit 06.08.2026
   direktes Flex-Kind von .header-container (siehe Kommentar bei
   .nav-search-slot): flex-basis:100% erzwingt ungescrollt weiterhin eine
   eigene Zeile (Umbruch faellt erst im gescrollten Zustand weg, siehe
   body.scrolled .main-nav bei .headline/.slogan), daher keine
   Rahmenlinien mehr noetig. */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  flex: 1 1 auto;
}

/* Ueberschreibt die Basisregel oben bewusst per eigenem @media-Block statt
   inline -- die Desktop-Verdichtung (siehe .recipe-tabs-nav/.header-container
   weiter oben, 05.08.2026) muss hier NACH der Basisregel stehen: bei
   gleicher Spezifitaet (eine Klasse) gewinnt sonst die spaeter im Dokument
   stehende, medienquery-lose Basisregel unabhaengig vom @media-Kontext. */
@media (min-width: 1024px) {
  .main-nav {
    padding: 0.4rem 0;
  }
}
.main-nav-link {
  font-family: "QuickSand-Bold", sans-serif;
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 1rem;
  color: #4a4a4a;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-nav-link:hover {
  background-color: rgba(101, 136, 12, 0.1);
  color: #65880c;
}

.main-nav-link.active {
  background-color: #65880c;
  color: #fff;
}

/* Mobile-Fix 07.08.2026 (Nutzer-Feedback: Content-Area auf Handys zu klein,
   Header+Hauptnav nehmen im UNGESCROLLTEN Ausgangszustand zu viel Platz weg,
   Screenshot Samsung Galaxy S26 Ultra): die 5 Nav-Punkte (Home,
   Nachschlagen, Auf ein Wort, Ueber mich, Kontakt) brachen auf schmalen
   Viewports per flex-wrap bisher in 3 Zeilen um. Ab hier auf Mobile: eine
   Zeile, horizontal scrollbar (flex-wrap:nowrap + overflow-x:auto),
   justify-content wechselt auf flex-start (center ergibt bei
   ueberlaufendem/scrollbarem Inhalt sonst einen abgeschnittenen Anfang,
   je nach Content-Breite auch mittig verstecktes erstes Element). Dazu
   kompaktere Pills (weniger Padding/kleinere Schrift) und weniger
   vertikales Padding an .main-nav/.nav-search-slot sowie ein kleineres
   Header-Foto -- gewinnt zusammen mehr Content-Hoehe over-the-fold.
   WICHTIG: betrifft ausschliesslich den UNGESCROLLTEN Ausgangszustand.
   Der kritische GESCROLLTE Sticky-Header (230px-Bildhoehen-Bedingung der
   Rezeptkarten, siehe Kommentare bei .recipe-tabs-nav/.nav-search-slot
   weiter oben) ist davon nicht beruehrt -- body.scrolled/header.scrolled
   ueberschreibt diese Regeln beim Scrollen ohnehin weiterhin wie bisher. */
/* Nachtrag 07.08.2026 (Nutzer-Feedback zum obigen Fix): das letzte
   Nav-Item ("Ueber mich"/"Kontakt", je nach Scroll-Position) wurde am
   rechten Viewport-Rand hart abgeschnitten -- ohne visuellen Hinweis sah
   das wie ein Layout-Fehler aus, nicht wie eine bewusst scrollbare Leiste.
   Fix: rechter (und via Scroll-Zustand auch linker) Rand bekommt einen
   weichen Fade-Out per mask-image, macht die Scrollbarkeit auf den ersten
   Blick erkennbar statt einen Textrest hart abzuschneiden. Zusaetzlich
   Browser-Scrollbar per scrollbar-width/::-webkit-scrollbar versteckt --
   auf Touch-Geraeten ohnehin nicht sichtbar/relevant, auf Desktop mit Maus
   (falls Viewport <600px, z.B. verkleinertes Fenster) sonst ein
   optischer Fremdkoerper unter den Pills gewesen. */
@media (max-width: 600px) {
  /* Root-Cause-Fix 07.08.2026 (Nutzer-Feedback: Nav rechts weiterhin
     abgeschnitten, "Kontakt" gar nicht sichtbar -- der Fade-Mask-Nachtrag
     allein hat das Problem nicht geloest): klassische Flexbox-Falle. Ein
     Flex-Item hat per Spezifikation ein implizites min-width:auto und
     schrumpft NIE unter seine intrinsische Inhaltsbreite -- bei
     white-space:nowrap-Kindern (die .main-nav-link-Pills) ist das die
     Summe aller Pill-Breiten. .main-nav wollte also trotz overflow-x:auto
     gar nicht schrumpfen, sondern hat stattdessen seinen FLEX-CONTAINER
     (.nav-search-group, seinerseits ein Flex-Item von .header-container)
     ueberragt -- overflow-x:auto lief dadurch ins Leere (kein Overflow
     RELATIV ZUR EIGENEN Box, da die eigene Box ja einfach mitgewachsen
     ist). Der Ueberschuss wurde am Ende nur durch overflow-x:hidden auf
     <html> (siehe Kommentar weiter oben im File) hart abgeschnitten,
     statt intern scrollbar zu werden. Fix: min-width:0 auf .main-nav UND
     seinem Elternelement .nav-search-group -- hebelt das
     min-width:auto-Verhalten explizit aus, wodurch beide auf die
     tatsaechlich verfuegbare Breite schrumpfen und .main-nav seinen
     Inhalt jetzt korrekt INTERN per overflow-x:auto scrollt. */
  .nav-search-group {
    min-width: 0;
  }
  .main-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0;
    gap: 0.4rem;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 28px), transparent 100%);
  }
  .main-nav::-webkit-scrollbar {
    display: none;
  }
  .main-nav-link {
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    flex-shrink: 0;
  }
  .nav-search-slot {
    padding: 0.35rem 0 0.2rem;
  }
  .header-photo img {
    max-height: 60px;
  }
}
/* Footer (site-weit) -- Session 03.08.2026: Link-Zeile fuer Impressum/
   Datenschutzerklaerung ergaenzt, dabei auf echte (statt versehentlich
   Tailwind-benannte, aber wirkungslose) CSS-Klassen umgestellt. */
.site-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  margin-top: 3rem;
  border-top: 1px solid #e8e0d4;
}

/* Instagram-Follow-Link (17.08.2026): eigene Zeile ueber .footer-links, da
   funktional etwas anderes ("uns folgen" statt Rechtliches/Navigation) --
   siehe Kommentar in index.html. */
.footer-social {
  margin-bottom: 0.8rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "QuickSand-Bold", sans-serif;
  color: #4a4a4a;
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: #65880c;
  text-decoration: underline;
}

.footer-links {
  margin-bottom: 0.5rem;
}

.footer-link {
  font-family: "QuickSand-Bold", sans-serif;
  color: #4a4a4a;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.2rem 0.3rem;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: #65880c;
  text-decoration: underline;
}

.footer-sep {
  margin: 0 0.6rem;
  color: #b1875d;
}

.footer-copyright {
  font-size: 0.85rem;
  color: #6b5e4f;
}

.footer-copyright .footer-link {
  padding: 0;
}

/* Portrait-Phones (10.09.2026): "Alle Rezepte A-Z" brach mitten im Wort um.
   Jetzt ruecken Trenner + Link gemeinsam in eine eigene, zentrierte Zeile --
   der zweite Trenner wird dabei zum unsichtbaren Flex-Zeilenumbruch. */
@media (max-width: 480px) {
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .footer-links .footer-sep:nth-of-type(2) {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0.35rem 0 0;
    overflow: hidden;
  }
}
/* --- Schriftgroessen-Regler (03.08.2026) ---
   Voraussetzung war die Vereinheitlichung aller vormals fest in px
   angegebenen font-size-Werte auf rem (18 Stellen, siehe Commit-Historie
   03.08.2026) -- sonst haette die Skalierung hier nur einen Teil der
   Schrift erfasst. Drei Stufen (Normal/Groß/Sehr groß), Prozentwerte statt
   fester px-Basis, damit eine ggf. vom Nutzer im Browser eingestellte
   Basis-Schriftgroesse respektiert wird statt ueberschrieben zu werden.
   Zustand wird in main.js per localStorage gemerkt. Bewusst NICHT im
   Header platziert -- siehe Kommentar bei .fontsize-toggle in index.html
   zum sticky-Hoehenbudget-Risiko. WICHTIG, noch nicht erledigt: Sticky-
   Header und Slider wurden bei der groessten Stufe noch NICHT gegen den
   Karten-Slicing-Bug nachgetestet (bewusst vertagt, siehe Chat-Absprache
   03.08.2026) -- vor Verlassen des Staging-Status nachholen. */
html.fontsize-large {
  font-size: 115%;
}

html.fontsize-xlarge {
  font-size: 130%;
}

/* Bugfix 05.08.2026 (Nutzer-Beobachtung: Regler 'schwimmt' beim
   langsamen Scrollen auf dem Handy erst nach unten aus dem Bild,
   kommt dann zu weit rechts zurueck) -- siehe ausfuehrliche Erklaerung
   direkt bei .floating-actions unten: erzwingt eine eigene GPU-Ebene,
   Standard-Workaround gegen dieses Android-Chrome-Verhalten.

   Erweiterung 07.08.2026: Scroll-to-Top-Button ergaenzt (Vorbild: #top_link
   auf der alten Contao-Seite, an body.fixed-header gekoppelt -- hier an die
   analoge body.scrolled-Klasse, siehe main.js). Beide Widgets teilen sich
   AB JETZT einen gemeinsamen fixed-Container .floating-actions statt
   jeweils eigenem position:fixed -- .fontsize-toggle und .back-to-top sind
   nur noch normal fliessende Flex-Kinder darin. Grund: ein einziger
   visualViewport-Pin (initViewportPin() in main.js) reicht dann fuer
   beide, statt zwei unabhaengige Instanzen, die beim Scrollen sonst
   auseinanderdriften koennten. */
/* .floating-actions: positioniert via CSS (bottom: 1rem) UND per JS-Pinning
   (`initViewportPin()` in main.js setzt right/bottom inline auf Basis der
   visualViewport-Grenzen). Beachte: auf Geraeten MIT visualViewport-
   Unterstuetzung ueberschreibt das JS jede CSS-Angabe.
   Hinweis (05.09.2026, P2 Safe-Area): sobald spaeter doch
   viewport-fit=cover + env(safe-area-inset-bottom) noetig wird, muss ZUSAETZ-
   LICH zu dieser CSS-Regel auch das JS-Pinning in main.js (bottomGap-Berech-
   nung) den Inset beruecksichtigen -- hier dokumentiert fuer dann. */
.floating-actions {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  transform: translateZ(0);
  will-change: transform;
}

.back-to-top {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(101, 136, 12, 0.25);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  color: #65880c;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: rgba(101, 136, 12, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.01s linear;
    transform: none;
  }
}
.fontsize-toggle {
  display: inline-flex;
  gap: 0.25rem;
  background: #fff;
  padding: 0.35rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.fontsize-btn {
  font-family: "QuickSand-Bold", sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* P1 Touch-Targets: Hoehe auf >=44px gebracht (min-height + vertikales
     Padding). Die drei A/A+/A++-Buttons liegen eng in .fontsize-toggle --
     die Breite bleibt daher bewusst schmal (dichte Reihe, WCAG-2.5.8-
     Ausnahme). */
  min-height: 44px;
  padding: 0.6rem 0.55rem;
  border: 1px solid rgba(101, 136, 12, 0.4);
  border-radius: 6px;
  background: #fff;
  color: #65880c;
  cursor: pointer;
}

.fontsize-btn:hover,
.fontsize-btn:focus-visible {
  background: rgba(101, 136, 12, 0.1);
}

.fontsize-btn[aria-pressed=true] {
  background: #65880c;
  color: #fff;
}

@media (max-width: 600px) {
  .floating-actions {
    right: 0.5rem;
    bottom: 0.5rem;
    gap: 0.5rem;
  }
  .back-to-top {
    width: 40px;
    height: 40px;
  }
}
/* ==========================================================================
   Paginierung (Home, Nachschlagen, Kategorie-Seiten, A-Z-Liste)
   Neu 07.08.2026. Struktur an das Original-Contao-Pagination-Modul
   angelehnt (Live-Check per curl gegen
   https://www.foodlady.de/kategorien-alle-rezepte-a-z/), das dort selbst
   kaum eigenes Styling hatte -- nur .pagination { margin-top:20px } und
   .pagination li strong.active { ...Markenfarbe... }. Hier bewusst etwas
   deutlicher gefasst (Karten-Radius/-Optik passend zum restlichen Grid),
   gleiche Grundidee: aktive Seite hervorgehoben, Rest dezent. Erscheint
   jeweils oben UND unten um Grid/Liste (Nutzerentscheidung 07.08.2026,
   siehe #recipePaginationTop/-Bottom in api.js und #azPaginationTop/
   -Bottom in az-list.js).
   ========================================================================== */
.pagination {
  margin: 2rem 0;
  text-align: center;
}

.pagination p {
  font-family: "QuickSand-Regular", sans-serif;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #6b6b6b;
}

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination li {
  display: flex;
}

.pagination li a,
.pagination li span.current {
  font-family: "QuickSand-Regular", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Kompaktere Pagination (Nutzerfeedback 07.09.2026): die Buttons wirkten
     zu gross. Hoehe/Breite/Padding/Schrift moderat reduziert -- weiterhin
     gut tappbar (>36px als WCAG-2.5.8-Ausnahme dichter Reihe), aber nicht
     mehr als klobige Kacheln. */
  min-width: 2rem;
  min-height: 36px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.pagination li a {
  color: #65880c;
  background: #fff;
  border: 1px solid #eae7df;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pagination li a:hover {
  background: #f0ede6;
  border-color: #65880c;
}

.pagination li span.current {
  background: #65880c;
  color: #fff;
  font-weight: bold;
  border: 1px solid #65880c;
}

.pagination li.first a,
.pagination li.previous a,
.pagination li.next a,
.pagination li.last a {
  font-weight: 600;
}

@media (max-width: 480px) {
  .pagination ul {
    gap: 0.3rem;
  }
  .pagination li a,
  .pagination li span.current {
    padding: 0.35rem 0.4rem;
    font-size: 0.8rem;
    min-width: 1.8rem;
    min-height: 32px;
  }
}
/* Fokus-Ziel nach SPA-Routenwechsel (04.09.2026, router.js/focusMainHeading):
   die Hauptueberschrift (h1/h2) der neuen View wird programmatisch
   fokussiert -- tabindex="-1" wird zur Laufzeit gesetzt, damit das Element
   fokussierbar ist, ohne in die natuerliche Tab-Reihenfolge zu kommen.
   Korrektur 07.09.2026: der Ring wurde bisher bei programmatischem .focus()
   auch nach Maus-/Touch-Klick angezeigt (WebKit/Android wenden :focus-visible
   auf programmatische Fokussierung an) und wirkte beim Oeffnen einer
   Detailansicht als stoe render "Rahmen" um das h1. Da das Element durch
   tabindex="-1" nie per Tab erreichbar ist, ist der Ring kein echtes
   Tastatur-Feedback in der Tab-Reihenfolge -- er wird deshalb grundsaetzlich
   entfernt; der programmatische Fokus (Screenreader-Ankündigung) bleibt
   erhalten. */
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus-visible {
  outline: none;
}