/* ==========================================================
   Wald & Mühle – Gestaltungssystem (Version 6)
   Farben und Schriften stehen ganz oben und können hier
   zentral geändert werden.
   ========================================================== */

:root {
  /* Farben */
  --papier: #f6f4ee;
  --papier-2: #ece8dd;
  --salbei: #e2e5d5;
  --tinte: #111c15;
  --wald: #1f3a26;
  --wald-tief: #16301f;
  --moos: #6f7f4d;
  --moos-hell: #c9d3b0;
  --akzent: #b8743a;
  --text: #19211b;
  --leise: #596056;
  --linie: rgba(17, 28, 21, .14);
  --linie-hell: rgba(246, 244, 238, .2);
  --hell: #f6f4ee;

  /* Schriften: Serifenschrift für Überschriften, serifenlose für Text */
  --serif: "Sitka Heading", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breite: 86rem;
  --rand: clamp(1.1rem, 4vw, 3.5rem);
  --luft: clamp(4.5rem, 9vw, 8rem);
  --kopfhoehe: 5.25rem;
  --rund: 10px;

  /* kleiner Zweig – das wiederkehrende Wald-&-Mühle-Zeichen */
  --zweig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 23V5' stroke='black' stroke-width='1.4' fill='none'/%3E%3Cpath d='M12 9.5C8.8 9.5 7 7.4 7 4.5c3 0 5 2 5 5zm0 0c3.2 0 5-2.1 5-5-3 0-5 2-5 5zm0 6.5c-3.2 0-5-2.1-5-5 3 0 5 2 5 5zm0 0c3.2 0 5-2.1 5-5-3 0-5 2-5 5z' fill='black'/%3E%3C/svg%3E");
}
@media (min-width: 64rem) { :root { --kopfhoehe: 6rem; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* ausgeblendete Elemente (z. B. Formular bei nicht buchbaren Terminen) wirklich verstecken */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menue-offen { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0;
  color: inherit;
}
h1 em, h2 em, .serif em { font-style: italic; color: var(--moos); }

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

.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--hell); padding: .5rem 1rem; z-index: 99; }

/* ---------- Kleine Bausteine ---------- */
.label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--moos);
}
.label.zweig::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--zweig) center / contain no-repeat; mask: var(--zweig) center / contain no-repeat;
}

.titel { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.38; letter-spacing: -0.01em; }
.leise { color: var(--leise); }
.klein { font-size: .9rem; color: var(--leise); }

.pfeil {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  padding-bottom: .3rem; border-bottom: 1.5px solid currentColor;
}
.pfeil::after { content: "→"; transition: transform .25s ease; }
.pfeil:hover::after { transform: translateX(4px); }

.knopf {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em;
  padding: 1.05rem 1.6rem; border-radius: 999px;
  background: var(--wald); color: var(--hell); border: 1.5px solid var(--wald);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knopf::after { content: "→"; }
.knopf:hover { background: var(--tinte); border-color: var(--tinte); }
.knopf.hell { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.knopf.hell:hover { background: transparent; color: var(--hell); }
.knopf.linie { background: transparent; color: inherit; border-color: currentColor; }
.knopf.linie:hover { background: var(--wald); color: var(--hell); border-color: var(--wald); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  height: var(--kopfhoehe);
  background: rgba(246, 244, 238, .96);
  border-bottom: 1px solid var(--linie);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.kopf .huelle { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.marke { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.marke img { width: 48px; height: 48px; border-radius: 50%; }
.marke span { font-family: var(--serif); font-size: 1.4rem; letter-spacing: -0.012em; white-space: nowrap; line-height: 1; }
@media (min-width: 64rem) {
  .marke img { width: 58px; height: 58px; }
  .marke span { font-size: 1.65rem; }
}

.hauptmenue ul { display: none; }
@media (min-width: 64rem) {
  .hauptmenue ul { display: flex; gap: clamp(1.2rem, 2vw, 2.1rem); }
  .hauptmenue a { font-size: .93rem; font-weight: 500; text-decoration: none; padding: .35rem 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
  .hauptmenue a:hover, .hauptmenue a[aria-current="page"] { border-bottom-color: currentColor; }
}

.menue-knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: inherit;
}
.menue-knopf .striche { position: relative; width: 22px; height: 8px; }
.menue-knopf .striche::before, .menue-knopf .striche::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s ease, top .3s ease;
}
.menue-knopf .striche::before { top: 0; }
.menue-knopf .striche::after { top: 6.5px; }
.menue-offen .menue-knopf .striche::before { top: 3.25px; transform: rotate(45deg); }
.menue-offen .menue-knopf .striche::after { top: 3.25px; transform: rotate(-45deg); }
@media (min-width: 64rem) { .menue-knopf { display: none; } }

/* Kopfzeile über einem Foto (Startseite, Wanderungen) */
.kopf-auf-bild .kopf { background: transparent; border-bottom-color: transparent; color: var(--hell); }
.kopf-auf-bild .kopf.gescrollt { background: rgba(246, 244, 238, .97); border-bottom-color: var(--linie); color: var(--text); }
.kopf-auf-bild .buehne { margin-top: calc(var(--kopfhoehe) * -1); }

/* Handy-Menü */
.handymenue {
  position: fixed; inset: 0; z-index: 40;
  background: var(--wald-tief); color: var(--hell);
  padding: calc(var(--kopfhoehe) + 1.5rem) var(--rand) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.menue-offen .handymenue { opacity: 1; visibility: visible; }
.menue-offen .kopf, .menue-offen.kopf-auf-bild .kopf { background: transparent; border-bottom-color: transparent; color: var(--hell); }
.handymenue ul li { border-bottom: 1px solid var(--linie-hell); }
.handymenue ul a { display: block; padding: .75rem 0; font-family: var(--serif); font-size: clamp(1.7rem, 7.5vw, 2.4rem); text-decoration: none; letter-spacing: -0.015em; }
.handymenue ul a[aria-current="page"] { font-style: italic; color: var(--moos-hell); }
.handymenue .klein { color: rgba(246, 244, 238, .7); }
@media (min-width: 64rem) { .handymenue { display: none; } }

/* ---------- Bühne (großes Foto oben) ---------- */
.buehne {
  position: relative; color: var(--hell);
  min-height: max(38rem, min(100svh, 58rem));
  display: flex; align-items: flex-end; overflow: hidden; background: var(--tinte);
}
.buehne picture { position: absolute; inset: 0; }
.buehne img { width: 100%; height: 100%; object-fit: cover; }
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 18, 13, .62) 0%, rgba(10, 18, 13, .2) 16%, rgba(10, 18, 13, 0) 28%),
    linear-gradient(90deg, rgba(10, 18, 13, .72) 0%, rgba(10, 18, 13, .5) 38%, rgba(10, 18, 13, .08) 68%, rgba(10, 18, 13, 0) 100%),
    linear-gradient(0deg, rgba(10, 18, 13, .55) 0%, rgba(10, 18, 13, 0) 45%);
}
@media (max-width: 47.99rem) {
  .buehne::after {
    background:
      linear-gradient(180deg, rgba(10, 18, 13, .55) 0%, rgba(10, 18, 13, 0) 22%),
      linear-gradient(0deg, rgba(10, 18, 13, .85) 0%, rgba(10, 18, 13, .55) 45%, rgba(10, 18, 13, .1) 75%);
  }
}
.buehne-inhalt { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--kopfhoehe) + 2.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.buehne-text { max-width: 40rem; }
.buehne .label { color: var(--moos-hell); margin-bottom: 1.4rem; }
.buehne h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: 1; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.buehne h1 em { color: var(--moos-hell); }
.buehne-text p { max-width: 32rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: rgba(246, 244, 238, .92); margin: 1.5rem 0 2rem; }
.buehne-fuss { display: grid; gap: 2.5rem; align-items: end; }

.naechster {
  display: flex; gap: 1rem; align-items: center; text-decoration: none;
  background: rgba(17, 28, 21, .55); border: 1px solid var(--linie-hell); border-radius: var(--rund);
  padding: .9rem 1.1rem .9rem .9rem; max-width: 24rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.naechster .kal { flex-shrink: 0; width: 3.6rem; height: 3.6rem; border-radius: 8px; background: var(--hell); color: var(--tinte); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.naechster .kal b { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; }
.naechster .kal small { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: .2rem; color: var(--moos); }
.naechster .label { color: var(--moos-hell); font-size: .66rem; margin-bottom: .2rem; }
.naechster strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; line-height: 1.2; }
.naechster .klein { color: rgba(246, 244, 238, .75); font-size: .82rem; }
.naechster:hover { background: rgba(17, 28, 21, .72); }
@media (min-width: 56rem) {
  .buehne-fuss { grid-template-columns: 1fr auto; gap: 4rem; }
}
.buehne.kurz { min-height: max(34rem, min(82svh, 48rem)); }

/* ---------- Seitenkopf ohne Foto ---------- */
.seitenkopf { padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.seitenkopf .label { margin-bottom: 1.4rem; }
.seitenkopf h1 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 1.02; max-width: 16ch; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.seitenkopf .lead { margin-top: 1.5rem; max-width: 34rem; color: var(--leise); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--luft) 0; }
.abschnitt.eng { padding: calc(var(--luft) * .6) 0; }
.abschnitt.ohne-oben { padding-top: 0; }
.abschnitt.papier-2 { background: var(--papier-2); }
.abschnitt.salbei { background: var(--salbei); }
.abschnitt.dunkel { background: var(--tinte); color: var(--hell); }
.abschnitt.wald { background: var(--wald); color: var(--hell); }
.abschnitt.dunkel .label, .abschnitt.wald .label { color: var(--moos-hell); }
.abschnitt.dunkel .leise, .abschnitt.dunkel .klein, .abschnitt.wald .leise, .abschnitt.wald .klein { color: rgba(246, 244, 238, .72); }
.abschnitt.dunkel em, .abschnitt.wald em { color: var(--moos-hell); }
.linie-oben { border-top: 1px solid var(--linie); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kopfzeile .label { margin-bottom: 1rem; }
.kopfzeile p { margin: 0; max-width: 24rem; }

/* 12-Spalten-Raster für asymmetrische Aufteilungen */
.raster { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) {
  .raster { grid-template-columns: repeat(12, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: 0; }
  .sp-1-4 { grid-column: 1 / 4; }  .sp-1-5 { grid-column: 1 / 5; }  .sp-1-6 { grid-column: 1 / 6; }
  .sp-1-7 { grid-column: 1 / 7; }  .sp-1-8 { grid-column: 1 / 8; }  .sp-1-9 { grid-column: 1 / 9; }
  .sp-4-11 { grid-column: 4 / 11; } .sp-4-12 { grid-column: 4 / 12; } .sp-4-13 { grid-column: 4 / 13; }
  .sp-5-13 { grid-column: 5 / 13; } .sp-6-13 { grid-column: 6 / 13; } .sp-7-13 { grid-column: 7 / 13; }
  .sp-8-13 { grid-column: 8 / 13; } .sp-9-13 { grid-column: 9 / 13; } .sp-2-7 { grid-column: 2 / 7; }
  .sp-8-12 { grid-column: 8 / 12; } .sp-7-12 { grid-column: 7 / 12; } .sp-2-6 { grid-column: 2 / 6; }
  .unten { align-self: end; } .mitte { align-self: center; } .oben { align-self: start; }
}

/* ---------- Fotos ---------- */
.foto { margin: 0; position: relative; overflow: hidden; background: var(--papier-2); border-radius: var(--rund); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.hoch { aspect-ratio: 4 / 5; }
.foto.quer { aspect-ratio: 3 / 2; }

/* zwei sich überlagernde Fotos */
.collage { position: relative; padding-bottom: 16%; }
.collage .foto:first-child { width: 76%; }
.collage .foto:last-child { position: absolute; right: 0; bottom: 0; width: 46%; box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--papier); }
.salbei .collage .foto:last-child { box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--salbei); }
.papier-2 .collage .foto:last-child { box-shadow: 0 0 0 clamp(6px, 1vw, 10px) var(--papier-2); }

/* ---------- Startseite ---------- */
.einleitung .aussage { font-family: var(--serif); font-size: clamp(1.6rem, 2.9vw, 2.45rem); line-height: 1.22; letter-spacing: -0.015em; margin: 1.4rem 0 2rem; }
.einleitung .aussage em { color: var(--moos); }

/* Überschrift, die über den Bildrand läuft */
.ueberlappung h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .98; color: var(--tinte); }
.ueberlappung h2 em { color: var(--wald); }
@media (min-width: 60rem) {
  .ueberlappung .gross-titel { margin-left: calc(-1 * clamp(2.5rem, 6vw, 6rem)); position: relative; z-index: 2; }
}
.textspalte { display: flex; flex-direction: column; justify-content: center; }
.textspalte > .label { margin-bottom: 1.25rem; }
.textspalte h2 { margin-bottom: 1.75rem; }
.textspalte p { max-width: 30rem; }

/* Foto über die ganze Breite mit Schrift darauf */
.bildband { position: relative; color: var(--hell); overflow: hidden; background: var(--tinte); }
.bildband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bildband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,13,.8) 0%, rgba(10,18,13,.45) 45%, rgba(10,18,13,.05) 80%); }
@media (max-width: 47.99rem) { .bildband::after { background: linear-gradient(0deg, rgba(10,18,13,.88) 0%, rgba(10,18,13,.4) 60%, rgba(10,18,13,.1) 100%); } }
.bildband .huelle { position: relative; z-index: 1; min-height: clamp(32rem, 75vh, 42rem); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 5rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.bildband .label { color: var(--moos-hell); margin-bottom: 1.25rem; }
.bildband h2 { font-size: clamp(2.7rem, 6.8vw, 5.8rem); line-height: .98; margin-bottom: 1.5rem; }
.bildband h2 em { color: var(--moos-hell); }
.bildband p { max-width: 28rem; color: rgba(246, 244, 238, .9); }

/* ---------- Termine ---------- */
.termin-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.termin-filter button {
  font: 600 .82rem/1 var(--sans); padding: .7rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid var(--linie);
}
.dunkel .termin-filter button { border-color: var(--linie-hell); }
.termin-filter button[aria-pressed="true"] { background: var(--wald); color: var(--hell); border-color: var(--wald); }
.dunkel .termin-filter button[aria-pressed="true"] { background: var(--hell); color: var(--tinte); border-color: var(--hell); }

.termine { border-top: 1px solid var(--linie); }
.dunkel .termine { border-top-color: var(--linie-hell); }
.monat-kopf { padding: 1.75rem 0 .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--moos); }
.dunkel .monat-kopf { color: var(--moos-hell); }
.termin {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem 1.25rem; align-items: start;
  padding: 1.4rem 0; border-bottom: 1px solid var(--linie);
}
.dunkel .termin { border-bottom-color: var(--linie-hell); }
.termin-datum {
  width: 4.25rem; aspect-ratio: 1; border-radius: var(--rund);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: var(--papier-2); color: var(--tinte);
}
.dunkel .termin-datum { background: var(--hell); }
.termin-datum .tag { font-family: var(--serif); font-size: 1.85rem; letter-spacing: -0.02em; }
.termin-datum .monat { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--moos); margin-top: .3rem; }
.termin-haupt .label { font-size: .7rem; margin-bottom: .35rem; }
.termin-haupt { min-width: 0; }
.termin-haupt h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.termin-fakten { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: .6rem 0 0; font-size: .92rem; }
.termin-fakten div { display: flex; gap: .4rem; }
.termin-fakten dt { font-weight: 600; color: var(--moos); }
.dunkel .termin-fakten dt { color: var(--moos-hell); }
.termin-fakten dd { margin: 0; }
.termin-aktion { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hinweis-status { font-family: var(--serif); font-style: italic; color: var(--akzent); }
@media (min-width: 48rem) {
  .termin { grid-template-columns: 5.5rem 1fr auto; gap: 1.75rem; padding: 1.6rem 0; align-items: center; }
  .termin-datum { width: 5.5rem; }
  .termin-datum .tag { font-size: 2.4rem; }
  .termin-aktion { grid-column: auto; justify-content: flex-end; }
}
.leer { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--leise); padding: 1.75rem 0; border-bottom: 1px solid var(--linie); }
.dunkel .leer { color: rgba(246, 244, 238, .7); border-bottom-color: var(--linie-hell); }

/* ---------- Listen mit feinen Linien ---------- */
.zeilen { border-top: 1px solid var(--linie); }
.zeilen li { display: flex; align-items: baseline; gap: 1.25rem; padding: 1.05rem 0; border-bottom: 1px solid var(--linie); }
.zeilen .nr { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--moos); min-width: 1.8rem; }
.zeilen .wert { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.12; }
.zeilen .zusatz { margin-left: auto; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }

.fakten { margin: 0; border-top: 1px solid var(--linie); }
.fakten > div { display: grid; grid-template-columns: minmax(6rem, 1fr) 3fr; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); }
.fakten dt { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--moos); padding-top: .3rem; }
.fakten dd { margin: 0; }
.dunkel .fakten, .dunkel .fakten > div { border-color: var(--linie-hell); }
.dunkel .fakten dt { color: var(--moos-hell); }

/* Gruppen als ruhige Wortliste */
.wortliste { display: flex; flex-wrap: wrap; gap: .2rem 0; font-family: var(--serif); font-size: clamp(1.45rem, 2.8vw, 2.2rem); line-height: 1.35; }
.wortliste li:not(:last-child)::after { content: "·"; margin: 0 .8rem; color: var(--moos); }

/* große Links (Kontakt) */
.grosslinks { border-top: 1px solid var(--linie); }
.grosslinks a { display: flex; align-items: baseline; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.grosslinks .wert { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.1; overflow-wrap: anywhere; }
.grosslinks .label { margin-left: auto; flex-shrink: 0; }
.grosslinks a::after { content: "↗"; color: var(--moos); transition: transform .25s ease; }
.grosslinks a:hover::after { transform: translate(3px, -3px); }

/* ---------- Instagram & YouTube ---------- */
.social { overflow: hidden; }
.social-kanaele { display: grid; gap: .9rem; margin-top: 2rem; }
.kanal > div { min-width: 0; }
.kanal { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--rund); border: 1px solid var(--linie-hell); text-decoration: none; transition: background-color .25s ease; }
.kanal:hover { background: rgba(246, 244, 238, .07); }
.kanal svg { width: 26px; height: 26px; flex-shrink: 0; }
.kanal strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.kanal span { font-size: .85rem; color: rgba(246, 244, 238, .7); }
.kanal::after { content: "↗"; margin-left: auto; color: var(--moos-hell); }

.social-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); padding-bottom: 2.5rem; }
.social-bilder a { position: relative; display: block; border-radius: var(--rund); overflow: hidden; aspect-ratio: 3 / 4; background: var(--wald-tief); }
.social-bilder a:nth-child(even) { transform: translateY(2.5rem); }
.social-bilder img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.social-bilder a:hover img { transform: scale(1.04); }
.social-bilder .marker {
  position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(17, 28, 21, .75); color: var(--hell); padding: .45rem .65rem; border-radius: 999px;
}
.social-bilder .marker svg { width: 13px; height: 13px; }
.social-bilder .play {
  position: absolute; inset: 0; margin: auto; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgba(246, 244, 238, .92); display: flex; align-items: center; justify-content: center;
}
.social-bilder .play::before { content: ""; margin-left: 4px; border-left: 14px solid var(--tinte); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
@media (max-width: 59.99rem) {
  .social-bilder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 3rem; scrollbar-width: none; }
  .social-bilder::-webkit-scrollbar { display: none; }
  .social-bilder a { scroll-snap-align: start; }
}

/* ---------- Produkt ---------- */
.produktbuehne { background: var(--wald-tief); border-radius: var(--rund); display: flex; align-items: center; justify-content: center; padding: clamp(2.5rem, 6vw, 5rem); }
.produktbuehne img { width: min(100%, 24rem); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.preis { font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1; }
.kaufzeile { display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 2rem 0 1.1rem; }

.teile { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.teile > div { padding: 1.6rem 0; border-bottom: 1px solid var(--linie); }
.teile h3 { font-size: 1.5rem; margin: .5rem 0 .7rem; }
.teile p { margin: 0; color: var(--leise); font-size: .96rem; }
@media (min-width: 60rem) {
  .teile { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 2rem; }
  .teile > div { border-bottom: 0; border-top: 1.5px solid var(--text); padding: 1.4rem 0 0; }
}

/* ---------- große Aussage ---------- */
.aussage-gross { font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height: 1.12; letter-spacing: -0.02em; }
.aussage-gross em { color: var(--moos); }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1.6rem; }
.formular .zwei { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { .formular .zwei { grid-template-columns: 1fr 1fr; } }
.formular label { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--moos); margin-bottom: .35rem; }
.formular input, .formular textarea {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--text);
  padding: .7rem 0; border: 0; border-bottom: 1px solid rgba(17, 28, 21, .35); border-radius: 0; background: transparent;
}
.formular textarea { resize: vertical; }
.formular input:focus, .formular textarea:focus { outline: none; border-bottom: 2px solid var(--wald); }
.formular .haekchen { display: flex; gap: .8rem; align-items: flex-start; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
.formular .haekchen input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--wald); flex-shrink: 0; }
.formular button { justify-self: start; }
.honig { position: absolute; left: -5000px; }

/* ---------- Platzhalter / Entwurf ---------- */
.platzhalter { background: #fff1c9; border: 1px dashed #c49a3a; color: #6b5516; padding: .05em .4em; font-size: .88em; }
.platzhalter-box { background: #fff1c9; border: 1px dashed #c49a3a; color: #6b5516; padding: .9rem 1.1rem; font-size: .92rem; border-radius: 6px; }
.entwurf { border-left: 3px solid var(--akzent); background: #f6e7da; color: #6e3b17; padding: 1rem 1.25rem; margin-bottom: 2rem; }

/* ---------- Textseiten ---------- */
.fliesstext { max-width: 44rem; }
.fliesstext h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin: 2.4em 0 .7em; }
.fliesstext ul { list-style: disc; padding-left: 1.2rem; margin: 0 0 1.15em; }
.fliesstext li { margin-bottom: .5em; }
.fliesstext li::marker { color: var(--moos); }
.fliesstext a { text-underline-offset: 3px; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--tinte); color: rgba(246, 244, 238, .78); padding: clamp(4rem, 8vw, 6rem) 0 2rem; font-size: .95rem; }
.fuss a { text-decoration: none; color: var(--hell); }
.fuss a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss-oben { display: grid; gap: 1.75rem; padding-bottom: 3rem; border-bottom: 1px solid var(--linie-hell); }
.fuss-marke { display: flex; align-items: center; gap: 1.1rem; }
.fuss-marke:hover { text-decoration: none !important; }
.fuss-marke img { width: 76px; height: 76px; border-radius: 50%; }
.fuss-marke span { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--hell); letter-spacing: -0.02em; line-height: 1; }
.fuss-oben p { max-width: 26rem; margin: 0; }
.fuss-spalten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; padding: 3rem 0; }
.fuss-spalten h2 { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--moos-hell); margin-bottom: 1.1rem; }
.fuss-spalten li { margin-bottom: .55rem; }
.fuss .platzhalter-box { background: transparent; border-color: var(--linie-hell); color: rgba(246, 244, 238, .7); font-size: .85rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-hell); font-size: .8rem; color: rgba(246, 244, 238, .55); }
@media (min-width: 60rem) {
  .fuss-oben { grid-template-columns: 1fr auto; align-items: center; }
  .fuss-spalten { grid-template-columns: repeat(4, 1fr); }
}