/* ==========================================================================
   michaelwabisch.de — Stilgrundlage
   Farben gemessen am Logo: Tanne #223428, Schiefer #4A575B,
   Amber #FFB43C, Salbei #5F7879.
   Keine Fremdressourcen: kein CDN, keine Google Fonts. Das ist eine
   Datenschutz-Entscheidung, keine Sparmassnahme — jede eingebundene
   Fremddomain waere eine Uebermittlung, die in die Erklaerung muesste.
   ========================================================================== */

:root {
  --tanne:        #223428;
  --tanne-tief:   #16221A;
  --tanne-hell:   #34503E;
  --amber:        #FFB43C;
  --amber-tief:   #C97F12;   /* Flaeche und Schattenkante */
  --amber-schrift:#8E5505;   /* dieselbe Familie, aber lesbar als Text */
  --schiefer:     #4A575B;
  --salbei:       #5F7879;
  --papier:       #FBFAF7;
  --sand:         #F1EDE5;
  --linie:        #E0DACE;
  --text:         #1D2A22;
  --text-leise:   #5A6860;
  --weiss:        #FFFFFF;

  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --breite:   1180px;
  --schmal:   720px;
  --rand:     clamp(1.25rem, 5vw, 3rem);
  --radius:       14px;
  --radius-knopf: 4px;    /* Regel: Behaelter sind rund, Bedienelemente eckig */
  --radius-gross: 22px;

  --schatten:       0 1px 2px rgba(34,52,40,.06), 0 8px 24px rgba(34,52,40,.06);
  --schatten-hoch:  0 2px 6px rgba(34,52,40,.08), 0 18px 50px rgba(34,52,40,.12);
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* Kopfzeile klebt — sonst verdeckt sie das Sprungziel */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.14;
  letter-spacing: -.022em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--tanne);
}

h1 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.55rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }

p  { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--tanne-hell); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--amber-schrift); }

img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.sprungmarke {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--tanne); color: var(--weiss);
  padding: .7rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
  transition: translate .18s ease;
}
.sprungmarke:focus { translate: -50% 0; color: var(--weiss); }

/* --- Raster -------------------------------------------------------------- */

.huelle {
  width: min(100% - var(--rand) * 2, var(--breite));
  margin-inline: auto;
}
.huelle--schmal { width: min(100% - var(--rand) * 2, var(--schmal)); }

.block { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.block--eng { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.block--sand  { background: var(--sand); }
.block--dunkel {
  background: var(--tanne);
  color: #D7E0D9;
}
.block--dunkel h2, .block--dunkel h3 { color: var(--weiss); }
.block--dunkel a:not(.knopf) { color: var(--amber); }

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,250,247,.82);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--linie);
  box-shadow: 0 6px 20px rgba(34,52,40,.05);
}
.kopf__innen {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marke img { width: 40px; height: 40px; object-fit: contain; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__name { font-weight: 700; color: var(--tanne); letter-spacing: -.01em; font-size: 1.05rem; }
.marke__rolle { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--salbei); }

.navi { display: flex; align-items: center; gap: .35rem; }
.navi a:not(.knopf) {
  padding: .5rem .8rem; border-radius: var(--radius-knopf);
  color: var(--schiefer); text-decoration: none; font-weight: 500; font-size: .97rem;
  transition: background .15s ease, color .15s ease;
}
.navi a:not(.knopf):hover { background: var(--sand); color: var(--tanne); }

.navi-schalter {
  display: none; width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--weiss); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.navi-schalter span {
  display: block; width: 18px; height: 2px; background: var(--tanne);
  position: relative; border-radius: 2px;
}
.navi-schalter span::before, .navi-schalter span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--tanne); border-radius: 2px; transition: translate .2s ease, rotate .2s ease;
}
.navi-schalter span::before { translate: 0 -6px; }
.navi-schalter span::after  { translate: 0 6px; }
.navi-schalter[aria-expanded="true"] span { background: transparent; }
.navi-schalter[aria-expanded="true"] span::before { translate: 0 0; rotate: 45deg; }
.navi-schalter[aria-expanded="true"] span::after  { translate: 0 0; rotate: -45deg; }

@media (max-width: 860px) {
  .navi-schalter { display: inline-flex; }
  .navi {
    position: fixed; inset: 4.5rem 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: .75rem var(--rand) 1.5rem;
    box-shadow: var(--schatten-hoch);
    display: none;
  }
  .navi[data-offen="ja"] { display: flex; }
  .navi a { padding: .85rem .5rem; border-radius: var(--radius); font-size: 1.05rem; }
  .navi .knopf { margin-top: .6rem; text-align: center; }
}

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

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: var(--radius-knopf);
  font-weight: 600; font-size: 1rem; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: translate .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.knopf:hover { translate: 0 -2px; }
.knopf--voll {
  background: var(--amber); color: var(--tanne-tief);
  box-shadow: 0 3px 0 var(--amber-tief), var(--schatten);
}
.knopf--voll:hover { background: #FFC260; color: var(--tanne-tief); box-shadow: 0 5px 0 var(--amber-tief), var(--schatten-hoch); }
.knopf--linie { border-color: currentColor; color: var(--tanne); background: transparent; }
.knopf--linie:hover { background: var(--tanne); color: var(--weiss); }
.knopf--hell { border-color: rgba(255,255,255,.5); color: var(--weiss); background: transparent; }
.knopf--hell:hover { background: var(--weiss); color: var(--tanne); }
.knopf[disabled] { opacity: .5; cursor: not-allowed; translate: none; }

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

.aufmacher {
  position: relative;
  display: grid;
  min-height: min(88svh, 780px);
  isolation: isolate;
  background: var(--tanne-tief);
}
.aufmacher__bild {
  position: absolute; inset: 0; z-index: -2;
}
.aufmacher__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Der Hintergrund des Fotos ist bewusst einfarbig. Statt ihn zu ersetzen,
   wird er zur Flaeche: ein Markenverlauf von links, der genau dort dicht ist,
   wo niemand im Bild steht, und an der Person auslaeuft. */
.aufmacher__schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(22,34,26,.96)  0%,
      rgba(22,34,26,.93) 26%,
      rgba(28,44,34,.72) 44%,
      rgba(34,52,40,.28) 60%,
      rgba(34,52,40,.05) 74%),
    radial-gradient(120% 90% at 8% 92%, rgba(255,180,60,.20), transparent 55%);
}
.aufmacher__inhalt {
  position: relative;
  align-self: center;
  width: min(100% - var(--rand) * 2, var(--breite));
  margin-inline: auto;
  padding-block: clamp(4rem, 10vw, 7rem);
  color: #EAF0EB;
  max-width: none;
}
.aufmacher__spalte { max-width: 36rem; }
.aufmacher h1 { color: var(--weiss); margin-bottom: .35em; }
.aufmacher__vorzeile {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.4rem;
}
.aufmacher__vorzeile::before {
  content: ""; width: 2.2rem; height: 2px; background: var(--amber);
}
.aufmacher__unterzeile {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  color: #C9D4CB; max-width: 34rem;
}
.aufmacher__unterzeile strong { color: var(--weiss); font-weight: 600; }
.aufmacher__knoepfe { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.1rem; }

.aufmacher__belege {
  display: flex; flex-wrap: wrap; gap: .5rem .65rem;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 40rem;
}
.aufmacher__belege li {
  list-style: none;
  font-size: .83rem; font-weight: 500;
  padding: .35rem .8rem; border-radius: var(--radius-knopf);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color: #D7E0D9;
}
.aufmacher__belege { padding-left: 0; margin-bottom: 0; }

@media (max-width: 700px) {
  .aufmacher { min-height: 0; }
  .aufmacher__bild { position: relative; inset: auto; aspect-ratio: 20 / 19; }
  .aufmacher__bild img { object-position: 56% 12%; }
  .aufmacher__schleier {
    inset: auto 0 0 0; height: 70%;
    background: linear-gradient(to top,
      var(--tanne-tief) 30%, rgba(22,34,26,.88) 58%, rgba(22,34,26,.35) 82%, rgba(22,34,26,0) 100%);
  }
  .aufmacher__inhalt { padding-block: 0 3rem; margin-top: -13vw; }
  .aufmacher__vorzeile { margin-bottom: 1rem; }
  .aufmacher__knoepfe .knopf { flex: 1 1 100%; }
}

/* --- Abschnittsköpfe ----------------------------------------------------- */

.kopfzeile { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.augenmerk {
  display: block; font-size: .8rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--amber-schrift); margin-bottom: .9rem;
}
.block--dunkel .augenmerk { color: var(--amber); }
.kopfzeile p { color: var(--text-leise); font-size: 1.08em; }
.block--dunkel .kopfzeile p { color: #AFBDB2; }

/* --- Leistungen ---------------------------------------------------------- */

.leistungen {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.leistung {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.leistung::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--amber), var(--salbei));
  opacity: 0; transition: opacity .2s ease;
}
.leistung:hover { translate: 0 -4px; box-shadow: var(--schatten-hoch); border-color: transparent; }
.leistung:hover::before { opacity: 1; }
.leistung__zeichen {
  width: 3.1rem; height: 3.1rem; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: 1.4rem;
  background: var(--sand); color: var(--tanne);
}
.leistung__zeichen svg { width: 1.6rem; height: 1.6rem; }
.leistung h3 { margin-bottom: .55em; }
.leistung > p { color: var(--text-leise); }
.leistung__liste { list-style: none; padding: 0; margin: 1.3rem 0 1.7rem; display: grid; gap: .6rem; }
.leistung__liste li {
  position: relative; padding-left: 1.75rem; font-size: .97em;
}
.leistung__liste li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 3px rgba(255,180,60,.22);
}
.leistung__fuss { margin-top: auto; }
.leistung__fuer {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--salbei); font-weight: 600; margin-bottom: 1rem;
}

/* --- Belege / Jurys ------------------------------------------------------ */

.belege {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none; padding: 0; margin: 0;
}
.beleg {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.beleg__rolle {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; display: block; margin-bottom: .5rem;
}
.beleg__name { font-weight: 600; color: var(--weiss); font-size: 1.04rem; line-height: 1.35; }
.beleg__ort { font-size: .88rem; color: #9FB0A4; margin-top: .35rem; }

/* --- Ablauf -------------------------------------------------------------- */

.ablauf { counter-reset: schritt; display: grid; gap: 1.1rem; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ablauf li {
  counter-increment: schritt;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-gross); padding: 1.7rem 1.6rem 1.5rem;
  position: relative;
}
.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block; font-size: 1.5rem; font-weight: 800;
  color: var(--amber); letter-spacing: -.03em; margin-bottom: .7rem;
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { font-size: 1.12rem; margin-bottom: .4em; }
.ablauf p { font-size: .96em; color: var(--text-leise); }

/* --- Über mich ----------------------------------------------------------- */

.portraet {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 880px) {
  .portraet { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
}
.portraet__bild {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  background: var(--sand);
}
.portraet__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portraet__bild::after {
  content: ""; position: absolute; inset: auto -20% -35% -20%; height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,180,60,.28), transparent 70%);
  pointer-events: none;
}
.portraet__zitat {
  border-left: 3px solid var(--amber);
  padding: .2rem 0 .2rem 1.4rem;
  margin: 0 0 1.6rem;
  font-size: 1.16em; line-height: 1.5; color: var(--tanne);
  font-weight: 500;
}

.zahlen { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--linie); }
.zahlen dt { font-size: 1.9rem; font-weight: 800; color: var(--tanne); letter-spacing: -.03em; line-height: 1.1; }
.zahlen dd { margin: .3rem 0 0; font-size: .92rem; color: var(--text-leise); }

/* --- AVGS-Hinweis -------------------------------------------------------- */

.hinweis {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--schatten);
}
@media (min-width: 820px) { .hinweis { grid-template-columns: minmax(0, 1fr) auto; } }
.hinweis h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.hinweis p { color: var(--text-leise); margin-bottom: 0; }
.hinweis p + p { margin-top: .9em; }

/* --- Kontakt ------------------------------------------------------------- */

.kontakt { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .kontakt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.kontakt__wege { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.kontakt__wege li { display: flex; gap: 1rem; align-items: flex-start; }
.kontakt__wege svg { width: 1.35rem; height: 1.35rem; flex: none; margin-top: .25rem; color: var(--amber); }
.kontakt__wege strong { display: block; color: var(--weiss); font-weight: 600; }
.kontakt__wege a { text-decoration: none; }
.kontakt__wege a:hover { text-decoration: underline; }

.karte-buchung {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-gross);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.karte-buchung h3 { font-size: 1.3rem; }
.karte-buchung p { color: #AFBDB2; font-size: .97em; }
.karte-buchung .knopf { margin-top: 1.3rem; width: 100%; }
.karte-buchung__schluessel {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .86rem; color: #9FB0A4;
}
.karte-buchung__schluessel svg { width: 1rem; height: 1rem; flex: none; }

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

.fuss {
  background: var(--tanne-tief);
  color: #97A89C;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  font-size: .93rem;
}
.fuss__oben {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.fuss img { width: 46px; height: 46px; object-fit: contain; margin-bottom: .9rem; }
.fuss__titel { color: var(--weiss); font-size: .8rem; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 1rem; font-weight: 700; line-height: 1.3; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.fuss a { color: #97A89C; text-decoration: none; }
.fuss a:hover { color: var(--amber); text-decoration: underline; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.6rem; font-size: .87rem;
}
.fuss__unten p { margin: 0; }

/* --- Fließtextseiten (Impressum, Datenschutz) ---------------------------- */

.rechtstext { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.rechtstext h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: .6em; }
.rechtstext h2 {
  font-size: clamp(1.25rem, 1.1rem + .9vw, 1.6rem);
  margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.8em; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
.rechtstext li { margin-bottom: .45em; }
.rechtstext address { font-style: normal; }
.rechtstext__stand {
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  font-size: .88rem; color: var(--text-leise);
}
.datenblock {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-bottom: 1.5em;
}
.datenblock p:last-child { margin-bottom: 0; }

/* --- Formulare (Buchung) ------------------------------------------------- */

.feld { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.feld > label { font-weight: 600; font-size: .93rem; color: var(--tanne); }
.feld__hilfe { font-size: .85rem; color: var(--text-leise); }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 1rem; color: var(--text);
  padding: .8rem 1rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-knopf);
  background: var(--weiss); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--salbei);
  box-shadow: 0 0 0 3px rgba(95,120,121,.18);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld--fehler input, .feld--fehler textarea { border-color: #B3261E; }

.meldung {
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  border: 1px solid; font-size: .96rem;
}
.meldung--fehler { background: #FDECEA; border-color: #F0B5B0; color: #8C1D18; }
.meldung--gut    { background: #E9F4EC; border-color: #B4D8BF; color: #17502C; }
.meldung--hinweis{ background: #FFF6E6; border-color: #F3D8A2; color: #6B4A08; }
.meldung p:last-child { margin-bottom: 0; }

.schlitz {
  display: grid; gap: .7rem; padding: 0; margin: 0 0 1.5rem; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.schlitz input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.schlitz label {
  display: block; cursor: pointer;
  border: 1.5px solid var(--linie); border-radius: var(--radius-knopf);
  padding: .9rem 1.1rem; background: var(--weiss);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.schlitz label:hover { border-color: var(--salbei); }
.schlitz input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.schlitz input:checked + label {
  border-color: var(--tanne); background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--tanne);
}
.schlitz__tag { font-weight: 700; color: var(--tanne); display: block; }
.schlitz__zeit { font-size: .9rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }

.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabelle th, .tabelle td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--salbei); }
.tabelle tr:hover td { background: var(--sand); }
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.marke-zentriert { text-align: center; margin-bottom: 2rem; }
.marke-zentriert img { width: 64px; height: 64px; margin: 0 auto .8rem; object-fit: contain; }

/* --- Sanftes Einblenden -------------------------------------------------- */

/* Die Klasse 'hat-js' setzt site.js als Allererstes auf <html>. Ohne sie
   greift keine dieser Regeln — sonst waere die halbe Seite unsichtbar, wenn
   das Skript blockiert wird, fehlschlaegt oder der Besucher es abgestellt
   hat. Ein Effekt darf nie daruber entscheiden, ob Inhalt da ist. */
@media (prefers-reduced-motion: no-preference) {
  .hat-js .auftritt { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; }
  .hat-js .auftritt[data-sichtbar="ja"] { opacity: 1; translate: none; }
}

@media print {
  .kopf, .navi, .aufmacher__bild, .knopf, .fuss__oben { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* --- Bildband (volle Breite, Zitat darueber) ----------------------------- */

.band {
  position: relative; isolation: isolate;
  display: grid; align-items: end;
  min-height: clamp(18rem, 34vw, 30rem);
  background: var(--tanne-tief);
  overflow: hidden;
}
.band__bild { position: absolute; inset: 0; z-index: -2; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(22,34,26,.92) 0%, rgba(22,34,26,.62) 42%, rgba(22,34,26,.18) 78%, rgba(22,34,26,.28) 100%);
}
.band__inhalt {
  width: min(100% - var(--rand) * 2, var(--breite));
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  color: var(--weiss);
}
.band__zitat {
  margin: 0; font-size: clamp(1.3rem, 1rem + 2vw, 2.2rem);
  font-weight: 600; line-height: 1.28; letter-spacing: -.02em;
  max-width: 32ch; text-wrap: balance;
}
.band__quelle {
  margin-top: 1rem; font-size: .85rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber); font-weight: 600;
}

/* --- Umfrage -------------------------------------------------------------
   Auswahlfelder als anklickbare Kacheln. Der eigentliche Radio- bzw.
   Kontrollkasten bleibt im Markup und bedienbar — er wird nur unsichtbar
   gemacht, nicht durch ein Bild ersetzt. Tastatur und Screenreader
   arbeiten deshalb unveraendert weiter.
   ------------------------------------------------------------------------ */

.frage { margin-bottom: clamp(2rem, 4vw, 3rem); }
.frage > legend,
.frage__titel {
  font-weight: 700; font-size: 1.12rem; color: var(--tanne);
  margin-bottom: .35rem; padding: 0; line-height: 1.35;
}
/* Frage 1 und 5 sind Eingabefelder, ihre Ueberschrift ist deshalb ein
   <label> und faellt sonst unter '.feld > label' — kleiner als die <legend>
   der Fragen mit Auswahl. Gleiche Spezifitaet, spaeter im Stylesheet:
   diese Regel gewinnt. */
.feld > label.frage__titel {
  font-weight: 700; font-size: 1.12rem; color: var(--tanne);
  margin-bottom: .35rem; line-height: 1.35;
}
.frage__hilfe { color: var(--text-leise); font-size: .93rem; margin-bottom: 1rem; }
.frage fieldset { border: 0; padding: 0; margin: 0; }

.wahl { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
.wahl--breit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label {
  display: flex; align-items: flex-start; gap: .7rem;
  cursor: pointer; padding: .85rem 1.05rem;
  background: var(--weiss); border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  line-height: 1.4;
}
.wahl label::before {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem;
  border: 1.5px solid var(--salbei); background: var(--weiss);
  border-radius: 3px; transition: background .15s ease, border-color .15s ease;
}
.wahl--einfach label::before { border-radius: 50%; }
.wahl label:hover { border-color: var(--salbei); }
.wahl input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.wahl input:checked + label {
  border-color: var(--tanne); background: var(--sand);
  box-shadow: inset 0 0 0 1px var(--tanne);
}
.wahl input:checked + label::before {
  background: var(--tanne); border-color: var(--tanne);
  box-shadow: inset 0 0 0 3px var(--weiss);
}
.wahl__zusatz { display: block; font-size: .87rem; color: var(--text-leise); margin-top: .15rem; }

/* Das Feld, das nur bei „nicht sicher" gebraucht wird. */
.nachfrage { margin-top: .85rem; padding-left: 1.05rem; border-left: 3px solid var(--amber); }
.nachfrage[hidden] { display: none !important; }

.hinweiskasten {
  background: var(--sand); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
  font-size: .93rem; color: var(--text-leise);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.hinweiskasten strong { color: var(--tanne); }
.hinweiskasten p:last-child { margin-bottom: 0; }
.hinweiskasten details { margin-top: .6rem; }
.hinweiskasten summary { cursor: pointer; color: var(--tanne-hell); font-weight: 600; }
.hinweiskasten summary:hover { color: var(--amber-schrift); }
.hinweiskasten details ul { margin: .7rem 0 0; padding-left: 1.2rem; }
.hinweiskasten details li { margin-bottom: .35em; }

/* --- Auswertung ---------------------------------------------------------- */

.balken { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .55rem; }
.balken li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.balken__kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.balken__name { font-weight: 600; color: var(--tanne); }
.balken__zahl { color: var(--text-leise); font-variant-numeric: tabular-nums; flex: none; }
.balken__spur { height: .6rem; background: var(--sand); border-radius: 99px; overflow: hidden; }
.balken__wert { height: 100%; background: linear-gradient(90deg, var(--tanne-hell), var(--salbei)); border-radius: 99px; }
.balken li:nth-child(-n+3) .balken__wert { background: linear-gradient(90deg, var(--amber-tief), var(--amber)); }

.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 2rem; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.15rem; }
.kachel dt { font-size: 1.7rem; font-weight: 800; color: var(--tanne); letter-spacing: -.03em; line-height: 1.1; }
.kachel dd { margin: .2rem 0 0; font-size: .87rem; color: var(--text-leise); }