/* ==========================================================================
   easy peasy vegan - Stylesheet
   Farben, Groessen und Abstaende 1:1 aus dem alten Theme uebernommen,
   die Drupal-Klassennamen sind durch sprechende ersetzt.

   Reihenfolge: Reset > Schrift > Raster > Hilfsklassen > Navigation >
                Hero > Abschnitte > Zutaten > Schritte > Kommentare > Fuss
   ========================================================================== */

/* --- 1. Reset / Grundlagen ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

body {
  margin: 0;
  text-align: left;
  color: #212529;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1.2rem;      /* = 19,2 px */
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

p { margin-top: 0; margin-bottom: 1rem; }
ol, ul, dl { margin-top: 0; margin-bottom: 1rem; }
ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; }
b, strong { font-weight: bolder; }
img { vertical-align: middle; border-style: none; }
a { text-decoration: none; color: #007bff; background-color: transparent; }
a:hover { text-decoration: underline; color: #0056b3; }
hr { overflow: visible; box-sizing: content-box; height: 0;
     margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0,0,0,.1); }
label { display: inline-block; margin-bottom: .5rem; }
input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
textarea { overflow: auto; resize: vertical; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
                clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- 2. Hausschrift fuer alle Ueberschriften ----------------------------- */
@font-face {
  font-family: "lasse-font";
  src: url("lasse-font.otf");
  font-display: swap;
}
/* Nur fuer den Schriftzug im Logo: Fraunces Light (SIL Open Font License),
   selbst gehostet - von Google Fonts geladen wuerde jeder Besuch Daten an
   Google schicken. Nur lateinische Zeichen, 34 KB. */
@font-face {
  font-family: "Fraunces";
  src: url("fraunces-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  hyphens: auto;
  font-family: lasse-font, Georgia, serif;
}
h1 { padding-right: 15px; padding-left: 15px; font-size: calc(1.425rem + 2.1vw); }
h2 { font-size: calc(1.405rem + 1.86vw); }
h3 { font-size: calc(1.335rem + 1.02vw); }
h4 { font-size: calc(1.305rem + 0.66vw); }
h5 { font-size: 1.6rem; }   /* 25,6 px - Begruessung auf der Startseite */
h1, h2 { text-align: center; }
@media (min-width: 1200px) {
  h1 { font-size: 3rem; }     /* 48 px */
  h2 { font-size: 2.8rem; }   /* 44,8 px */
  h3 { font-size: 2.1rem; }   /* 33,6 px */
  h4 { font-size: 1.8rem; }
}

/* --- 3. Raster ----------------------------------------------------------- */
.container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row--eng { margin-right: 0; margin-left: 0; }
.row--eng > [class*="col-"] { padding-right: 0; padding-left: 0; }
[class*="col-"] { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }

.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-6  { flex: 0 0 50%;        max-width: 50%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-12 { flex: 0 0 100%;       max-width: 100%; }

@media (min-width: 768px) {
  .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
}
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
}
@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
}

/* --- 4. Hilfsklassen ----------------------------------------------------- */
.mittig       { justify-content: center; }
.oben         { align-items: flex-start; }
.zentriert    { align-items: center; }
.rechts       { text-align: right; }
.text-mittig  { text-align: center; }
.bild { max-width: 100%; height: auto; margin-bottom: 1rem; border-radius: 14px; }

/* Farbbaender des Themes */
.band--gelb    { background-color: #ffd899; }
.band--grau    { background-color: #f2f2f2; }
.band--gruen   { background-color: #b1daa9; }
.band--blau    { background-color: #9dd1fb; }
.band--tuerkis { background-color: #89ccc5; }

/* --- 5. Kopfzeile / Navigation ------------------------------------------- */
.kopfzeile {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.kopfzeile .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-evenly; }
.marke { display: inline-block; margin-right: .275rem; margin-left: .275rem;
         padding-top: .275rem; padding-bottom: .275rem; font-size: 1.25rem;
         line-height: inherit; white-space: nowrap; color: rgba(0,0,0,.9); }
.marke img { margin-bottom: 0; border-radius: 0; max-height: 70px; width: auto; }

/* Logo: Kasten in Tuerkis mit duennem dunklem Rand wie das alte Logo,
   die Schote ragt schraeg links heraus. Innenabstaende nach Augenmass
   abgestimmt (links Platz fuer die Schote, rechts etwas Luft nach "vegan"). */
.logo { position: relative; display: inline-flex; align-items: center;
        padding: 10px 22px 10px 72px; margin-left: 10px;
        background-color: #89ccc5; border: 1px solid rgba(0,0,0,.77); border-radius: 8px;
        color: #212529; text-decoration: none; white-space: nowrap; }
.logo:hover { color: #212529; text-decoration: none; }
.logo .logo__schote { position: absolute; left: -10px; top: 50%; height: 48px; width: auto;
                      max-height: none; transform: translateY(-50%) rotate(-8deg); }
.logo__text { font-family: Fraunces, lasse-font, Georgia, serif; font-weight: 300;
              font-size: 26px; line-height: 1; }
.logo__vegan { color: #2f5f2a; }
@media (max-width: 767.98px) {
  .logo { padding: 8px 18px 8px 60px; margin-left: 8px; }
  .logo .logo__schote { left: -8px; height: 40px; }
  .logo__text { font-size: 21px; }
}
.menue { display: flex; flex-direction: column; padding-top: .5rem; padding-left: 1rem;
         margin: 0; list-style: none; }
.menue__punkt { font-size: 1.5rem; position: relative; }
.menue__link { display: block; padding: .5rem; color: rgba(0,0,0,.5); cursor: pointer; }
.menue__link:hover { color: rgba(0,0,0,.7); text-decoration: none; }
.menue-schalter { margin-left: 1rem; padding: .25rem; background: transparent;
                  border: 1px solid rgba(0,0,0,.1); border-radius: .25rem; cursor: pointer; }
.menue-schalter__strich { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle;
  background: no-repeat center center / 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.menue-huelle { flex-basis: 100%; flex-grow: 1; align-items: center; }
.menue-huelle:not(.offen) { display: none; }

/* Klappmenue "Rezepte" */
.klapp::after { display: inline-block; margin-left: .255em; vertical-align: .255em;
  content: ""; border-top: .3em solid; border-right: .3em solid transparent;
  border-bottom: 0; border-left: .3em solid transparent; }
.klappmenue { position: absolute; z-index: 1000; display: none; min-width: 12rem; margin: 0;
  padding: .5rem 0; list-style: none; font-size: 1.2rem; text-align: left;
  background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; }
.klappmenue.offen { display: block; }
.klappmenue li { display: block; }
.klappmenue a { display: block; width: 100%; padding: .25rem 1.5rem; color: #000; white-space: nowrap; }
.klappmenue a:hover { background-color: #89ccc5; text-decoration: none; }

.instagram { display: block; width: 29px; height: 29px; margin: 10px 20px 10px 40px; }

@media (min-width: 768px) {
  .menue-schalter { display: none; }
  .menue-huelle { display: flex !important; flex-basis: auto; }
  .kopfzeile .menue { flex-direction: row; align-items: center; }
  .marke--links { margin-right: auto; }
  .nach-rechts { margin-left: auto; }
}
@media (max-width: 767.98px) {
  .instagram { margin: 20px; }
}

/* --- 6. Hero-Bild + Seitentitel ------------------------------------------ */
.hero { position: relative; overflow: hidden; }
.hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
}
@media (max-width: 767.98px) {
  /* Mobil: feste Hoehe, mittiger Bildausschnitt */
  .hero img { height: 400px; object-fit: cover; }
}
.seitentitel { margin: 1rem 0; }

/* --- 6b. Bilderslider der Startseite -------------------------------------- */
/* Wie im alten Theme: fuellt den ersten Bildschirm unter der Kopfzeile,
   Titel unten rechts in der Hausschrift, weiss mit weichem Schatten.
   --kopf setzt das Slider-Skript auf die gemessene Hoehe der Kopfzeile
   (83 px mobil, 105 px Desktop, mehr wenn das Menue umbricht).
   svh = Fensterhoehe ohne die ausfahrende Adressleiste mobiler Browser. */
.slider { position: relative; height: calc(100vh - var(--kopf, 105px)); min-height: 320px;
          overflow: hidden; background-color: #212529; }
@supports (height: 100svh) { .slider { height: calc(100svh - var(--kopf, 105px)); } }
.slider__folie { position: absolute; inset: 0; opacity: 0; visibility: hidden;
                 transition: opacity .5s ease, visibility 0s linear .5s; }
.slider__folie.aktiv { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.slider__folie img { display: block; width: 100%; height: 100%; margin: 0;
                     object-fit: cover; border-radius: 0; }
.slider__text { position: absolute; right: 0; bottom: 0; left: 0; }
.slider__titel { margin: 0; padding: 60px 45px 3rem; text-align: right;
                 font-size: calc(1.525rem + 3.3vw); text-shadow: 0 0 .9rem #000; }
@media (min-width: 992px) { .slider__titel { font-size: 3.5rem; } }
.slider__titel a, .slider__titel a:hover { color: #fff; text-decoration: none; }
/* Pfeile: gemeinsame Gestalt in .pfeil (Abschnitt 6d) */
.slider__pfeil { top: 50%; }
.slider__pfeil--zurueck { left: 16px; }
.slider__pfeil--weiter { right: 16px; }
@media (prefers-reduced-motion: reduce) { .slider__folie { transition: none; } }

/* --- 6c. Kategorie-Karussells der Startseite ------------------------------ */
/* Wie im alten Theme: randloses Farbband, Titel mittig, fuenf Karten
   nebeneinander (bis 766 px: zwei), 10 px Abstand, 5 px Rand. */
.karussell { padding: 2rem 0 .5rem; }
.karussell__titel { margin: 0 0 2rem; }
.karussell__titel a, .karussell__titel a:hover { color: #000; text-decoration: none; }
.karussell__rahmen { position: relative; }
.karussell__spur { display: flex; gap: 10px; margin: 0; padding: 0 5px; list-style: none;
                   overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 5px;
                   scrollbar-width: none; }
.karussell__spur::-webkit-scrollbar { display: none; }
.karussell__eintrag { flex: 0 0 calc((100% - 10px) / 2); scroll-snap-align: start; }
@media (min-width: 767px) { .karussell__eintrag { flex-basis: calc((100% - 40px) / 5); } }
/* Weniger Karten als Platz (Suppen): mittig. Auto-Raender statt
   justify-content, damit bei Ueberlauf der Anfang erreichbar bleibt. */
.karussell__eintrag:first-child { margin-left: auto; }
.karussell__eintrag:last-child { margin-right: auto; }
.karussell .karte { margin-bottom: 1.5rem; }
.karussell .karte__titel { font-size: 1.2rem; font-weight: 500; }
/* Mitte des Kartenbilds: Bild ist (Kartenbreite x 1,25) hoch, die
   Kartenbreite ergibt sich aus der Spurbreite (2 bzw. 5 Karten). */
.karussell__pfeil { top: calc((100vw - 20px) / 2 * 1.25 / 2); }
@media (min-width: 767px) { .karussell__pfeil { top: calc((100vw - 50px) / 5 * 1.25 / 2); } }
.karussell__pfeil[hidden] { display: none; }
.karussell__pfeil--zurueck { left: 12px; }
.karussell__pfeil--weiter { right: 12px; }
@media (prefers-reduced-motion: reduce) { .karussell__spur { scroll-behavior: auto; } }

/* --- 6d. Pfeil-Buttons (Slider und Karussells) ----------------------------- */
/* Deutlicher als im alten Theme: weisser Kreis mit dunklem Winkel, gut
   sichtbar auf hellen wie dunklen Fotos, gross genug fuer den Daumen. */
.pfeil { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center;
         width: 48px; height: 48px; padding: 0; transform: translateY(-50%);
         color: #212529; background-color: rgba(255,255,255,.9); border: 0; border-radius: 50%;
         box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer;
         transition: background-color .15s ease, transform .15s ease; }
.pfeil svg { width: 26px; height: 26px; fill: none; stroke: currentColor;
             stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.pfeil:hover { background-color: #fff; transform: translateY(-50%) scale(1.08); }
.pfeil:focus-visible { outline: 3px solid #3d8f87; outline-offset: 2px; }
@media (max-width: 767.98px) { .pfeil { width: 40px; height: 40px; } .pfeil svg { width: 22px; height: 22px; } }

/* --- 7. Abschnitte ------------------------------------------------------- */
.inhalt { margin-bottom: 3rem; }
.seite { background-color: #f2f2f2; overflow-x: hidden; }
.abschnitt { padding-top: 2rem; padding-right: 0; padding-left: 0; }

/* randlose Farbbaender ueber die volle Fensterbreite */
.randlos { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.randlos > .container { margin-right: auto; margin-left: auto; }

/* Abschnitt mit schwarzem Rahmen (Zutaten, Tipps, Kommentare) */
/* Im alten Theme hatte der Rahmen zwar seitlichen Abstand, wurde davon
   aber durch eine staerkere Regel auf 0 gesetzt. Damit die Kaesten gleich
   breit bleiben, steht hier gar keiner. */
.rahmen { padding-right: 0; padding-left: 0; }
.rahmen__inhalt { padding: 1rem; border: 1px solid #000; border-radius: 14px; }
@media (max-width: 991.98px) { .rahmen__inhalt { padding: 10px; } }

/* Layout-Builder-Abschnitte: der Abstand steht am Abschnitt (aus Drupal
   uebernommen), das Bild selbst hat keinen Rand nach unten. */
.abschnitt--lb { display: flow-root; padding-top: 0; }
.abschnitt--lb .medien { margin-bottom: 0; }
.abschnitt--lb .text > :first-child { margin-top: 0; }
.zwischentitel { margin-bottom: 2rem; }
.text-align-right { text-align: right; }
.text-align-center { text-align: center; }

.text { margin-top: 1rem; margin-bottom: 2rem; }
.medien { margin-bottom: 1.5rem; }
/* der Abstand kommt vom Container, nicht vom Bild selbst */
.medien img, .medien video { display: block; margin-bottom: 0; }
.medien video { width: 100%; border-radius: 14px; }
.medien__unterschrift { margin-top: .5rem; font-size: .9em; color: #555; }
.rezeptseite ul { margin-left: -1rem; }

/* Trennlinien in den Schritt-Spalten */
.trenner { max-width: 82%; margin-bottom: -1rem; margin-left: 0;
           border-top: 1px solid #000; border-radius: 5px; }

/* --- 8. Zutatenliste ----------------------------------------------------- */
.zutaten__titel { margin-top: 0; margin-bottom: 0; text-align: left; }
.zutaten__info { margin-top: 0; color: #a9a9a9; font-size: .9em; }
@media (min-width: 768px) { .zutaten__info { margin-top: 5px; } }
.zutaten__kopf { margin-bottom: 30px; }
.zutaten__zeiten { margin: 0; padding: 0; list-style: none; }

.portionen { width: auto; margin: 0; padding: 0; color: inherit; border: none; background: inherit; }

.zutat { display: flex; }
.zutat__menge-einheit {
  display: flex;
  justify-content: right;
  width: 3rem;
  padding-right: .5rem;
  padding-left: 4rem;
}
.zutat__menge { padding-right: 2px; }
.zutat__notiz { margin-top: 0; margin-left: .2rem; color: #a9a9a9; font-size: inherit; }

/* --- 9. Schritte --------------------------------------------------------- */
.schritt__nummer {
  width: 100px;
  margin: 1rem;
  padding: .5rem;
  text-align: center;
  border-radius: 3px;
  background: #fff;
}

/* Schrittbilder werden quadratisch beschnitten.
   height:auto ist noetig, weil sonst das height-Attribut aus dem HTML
   gewinnt und das Bild in Originalhoehe stehen bleibt. */
.schritt__bild img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; height: auto; }

/* --- 9b. Rezeptkarten auf den Uebersichtsseiten --------------------------- */
.karte { margin-bottom: 2rem; }
.karte__bild { display: block; }
.karte__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;      /* wie die Teaserbilder im alten Theme */
  object-fit: cover;
  border-radius: 14px;
}
/* Groesse und Schrift wie auf der alten Seite gemessen: 19,2 px in der
   Grundschrift, nicht in der Hausschrift. */
.karte__titel { margin-top: .75rem; margin-bottom: 0; text-align: center;
                font-size: 1.2rem; line-height: 1.3; font-family: inherit; font-weight: 400; }
.karte__titel a { color: #000; }
.karte__titel a:hover { color: #3d8f87; text-decoration: none; }

/* --- 9c. Kategorie-Chips, Filterleiste, "Mehr aus ..." ------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.chips--mittig { justify-content: center; }
.chip { display: inline-block; padding: .35rem .95rem; font-size: 1rem; line-height: 1.4;
        color: #212529; background-color: #fff; border: 1px solid #89ccc5; border-radius: 999px;
        white-space: nowrap; transition: background-color .15s ease; }
.chip:hover { color: #212529; background-color: #d7eeeb; text-decoration: none; }
.chip--aktiv, .chip--aktiv:hover { background-color: #89ccc5; border-color: #6fb8b0; font-weight: 600; }
.chip__zahl { margin-left: .2rem; font-size: .85em; color: #6c757d; }
.chip--aktiv .chip__zahl { color: #212529; }
.filterleiste .chips { justify-content: center; margin-bottom: 2rem; }
/* Handy: eine wischbare Zeile statt vier umgebrochener */
@media (max-width: 767.98px) {
  .filterleiste { margin-right: -15px; margin-left: -15px; }
  .filterleiste .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
                         padding: 0 15px .25rem; scrollbar-width: none; }
  .filterleiste .chips::-webkit-scrollbar { display: none; }
}
.mehr { margin-top: 3rem; margin-bottom: 1rem; }
.mehr h2 a, .mehr h2 a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
                                text-underline-offset: .15em; }

/* --- 9d. Saison: Monatsleiste und Saisonkalender --------------------------- */
.monatsleiste { display: flex; align-items: center; justify-content: center; gap: .6rem;
                margin: -.5rem auto 1.5rem; color: #212529; text-decoration: none; }
.monatsleiste:hover { color: #212529; text-decoration: none; }
.monatsleiste__titel { font-size: .95rem; color: #6c757d; }
.monatsleiste__monate { display: inline-flex; gap: 3px; }
.monatsleiste__monat { display: inline-block; width: 1.45rem; padding: .15rem 0; font-size: .8rem;
                       line-height: 1.3; text-align: center; color: #9aa3a9; background-color: #fff;
                       border: 1px solid #dee2e6; border-radius: 4px; }
.monatsleiste__monat--an { font-weight: 600; color: #212529; background-color: #b1daa9; border-color: #8fc585; }

.monatsreiter .chips { justify-content: center; margin: 1rem 0 2rem; }
.monat { margin-bottom: 3rem; }
.monat[hidden] { display: none; }
.monat__ernte { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem;
                margin-bottom: 2rem; padding: 1.25rem 1.5rem; background-color: #fff; border-radius: 14px; }
.monat__gruppe h3 { margin: 0 0 .5rem; font-size: 1.4rem; text-align: left; }
.monat__sorten { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0; padding: 0; list-style: none; }
.monat__sorten li { padding: .15rem .6rem; font-size: 1rem; background-color: #eef7ec; border-radius: 999px; }
.monat__rezepte-titel { text-align: center; }
.monat__leer { text-align: center; color: #6c757d; }
@media (max-width: 767.98px) {
  .monatsreiter { margin-right: -15px; margin-left: -15px; }
  .monatsreiter .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
                         padding: 0 15px .25rem; scrollbar-width: none; }
  .monatsreiter .chips::-webkit-scrollbar { display: none; }
}

/* --- 10. Bewertung ------------------------------------------------------- */
.bewertung { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.bewertung__sterne { font-size: 1.6rem; line-height: 1; color: #e8b008; letter-spacing: .1em; }
.bewertung__zahl { color: #555; font-size: .9rem; }
.bewertung__knopf {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: #ccc;
}
.bewertung__knopf:hover, .bewertung__knopf.aktiv { color: #e8b008; }
.bewertung--eingabe { flex-wrap: wrap; margin-bottom: 1.5rem; }
.bewertung__frage { font-size: 1rem; color: #555; margin-right: .25rem; }
.bewertung__meldung { font-size: .9rem; color: #3d8f87; margin-left: .5rem; }
.formular__meldung { margin-top: .75rem; min-height: 1.5rem; color: #3d8f87; }

/* --- 11. Kommentare ------------------------------------------------------ */
.kommentar { margin-bottom: 1.5rem; }
.kommentar__kopf { display: flex; gap: .75rem; align-items: baseline; }
.kommentar__name { font-weight: 600; }
.kommentar__zeit { color: #777; font-size: .85rem; }
.kommentar__text { margin: .25rem 0 0; }
.kommentar--antwort { margin-left: 2.5rem; padding-left: 1rem; border-left: 3px solid #89ccc5; }

.formular__titel { padding-top: 2rem; }
.feld { margin-bottom: .5rem; }
.eingabe {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}
.eingabe:focus { outline: 0; border-color: #89ccc5; box-shadow: 0 0 0 .2rem rgba(137,204,197,.35); }
.pflicht::after { content: " *"; color: #c00; }
.knopf { display: inline-block; padding: .375rem .75rem; text-align: center; vertical-align: middle;
         border: 1px solid transparent; border-radius: .25rem; cursor: pointer;
         color: #000; border-color: #89ccc5; background-color: #89ccc5;
         box-shadow: 0 2px 2px 0 rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.19); }
.knopf:hover { color: #fff; border-color: #3d8f87; background-color: #3d8f87; }
/* Honigtopf gegen Spam - fuer Menschen unsichtbar, Bots fuellen ihn aus */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 12. Fusszeile ------------------------------------------------------- */
/* Wie im alten Theme: Links nebeneinander, mittig, in Linkfarbe. */
.fusszeile { padding-top: 2rem; padding-bottom: 1rem; }
.fusszeile nav { width: 100%; }
.fusszeile .menue { flex-direction: row; justify-content: center; gap: 1rem; padding: 0; }
.fusszeile .menue__punkt { font-size: 1rem; }
.fusszeile .menue__link { color: #007bff; }
.fusszeile .menue__link:hover { color: #0056b3; }