/* Basis: Reset, fluide Typo-Skala, Abstände, Bausteine. Farben kommen aus tokens.css (generiert),
   Schriften und Rhythmus aus themen/<charakter>/charakter.css. Kein JavaScript, keine Verläufe. */

:root{
  --schrift-ueberschrift:system-ui,"Helvetica Neue",Arial,sans-serif;
  --schrift-text:system-ui,"Helvetica Neue",Arial,sans-serif;
  --gewicht-ueberschrift:700;
  --laufweite-ueberschrift:-.015em;
  --groesse-klein:.875rem;
  --groesse-0:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --groesse-1:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
  --groesse-2:clamp(1.5rem,1.2rem + 1.1vw,2.125rem);
  --groesse-3:clamp(2.125rem,1.3rem + 3.4vw,4rem);
  --zeile:1.55;
  --mass:38rem;
  --breite:72rem;
  --rand:clamp(1rem,4vw,2.5rem);
  --raum-1:.5rem;
  --raum-2:1rem;
  --raum-3:1.5rem;
  --raum-4:clamp(2rem,1.5rem + 2vw,3rem);
  --raum-5:clamp(3rem,2rem + 4vw,5.5rem);
  --raum-6:clamp(4rem,3rem + 6vw,8rem);
  --radius:2px;
  --linie-staerke:1px;
}

/* ---------- Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--schrift-text);font-size:var(--groesse-0);line-height:var(--zeile);font-feature-settings:"kern","liga";overflow-wrap:break-word}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);line-height:1.1;margin:0;letter-spacing:var(--laufweite-ueberschrift);text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
p,ul,ol,dl,dd,table,figure,address,blockquote{margin:0}
address{font-style:normal}
a{color:var(--akzent-lesbar);text-decoration-thickness:.07em;text-underline-offset:.16em}
a:hover{color:var(--tinte)}
:focus-visible{outline:3px solid var(--zweit);outline-offset:3px}
small{font-size:var(--groesse-klein)}
table{border-collapse:collapse}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-200vw;top:0;background:var(--tinte);color:var(--papier);padding:.5rem 1rem;z-index:10}
.sprung:focus{left:var(--rand)}

/* ---------- Raster */
.bahn{width:min(var(--breite),100% - 2*var(--rand));margin-inline:auto}
.zweispalt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--raum-4) var(--raum-5)}
.zweispalt-breit{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:52rem){.zweispalt-breit{grid-template-columns:1fr}}

/* ---------- Vorschau-Streifen */
.streifen{background:var(--tinte);color:var(--papier);font-size:.8125rem;text-align:center;padding:.45rem var(--rand);letter-spacing:.02em}

/* ---------- Kopf */
.kopf{border-bottom:var(--linie-staerke) solid var(--linie)}
.kopf-innen{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--raum-2) var(--raum-4);padding-block:var(--raum-3)}
.wortmarke{font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);font-size:1.5rem;letter-spacing:var(--laufweite-ueberschrift);color:var(--tinte);text-decoration:none;line-height:1}
.kopf nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--raum-1) var(--raum-3)}
.kopf nav a{color:var(--tinte);text-decoration:none;font-size:.9375rem;padding-block:.2rem;border-bottom:2px solid transparent}
.kopf nav a:hover{border-bottom-color:var(--linie-stark)}
.kopf nav a[aria-current]{border-bottom-color:var(--akzent)}

/* ---------- Auftakt: jede Seite beginnt mit H1 und Antwortabsatz */
.auftakt{padding-block:var(--raum-5) var(--raum-4)}
.auftakt-schmal{padding-bottom:var(--raum-2)}
.auftakt + .abschnitt{padding-top:var(--raum-4)}
.vorzeile{font-size:var(--groesse-klein);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-lesbar);font-weight:600;margin-bottom:var(--raum-2)}
.vorzeile a{color:inherit;text-decoration:none}
.vorzeile a:hover{text-decoration:underline}
h1{font-size:var(--groesse-3);max-width:18ch;hyphenate-limit-chars:12 5 5}
.antwort{font-size:var(--groesse-1);line-height:1.4;max-width:var(--mass);margin-top:var(--raum-3);text-wrap:pretty}
.handlung{margin-top:var(--raum-4);display:flex;flex-wrap:wrap;gap:var(--raum-2);align-items:center}
.handlung-klein{margin-top:var(--raum-3)}
.knopf{display:inline-block;padding:.75em 1.3em;background:var(--akzent-knopf);color:var(--akzent-text);text-decoration:none;font-family:var(--schrift-ueberschrift);font-weight:700;font-size:1rem;line-height:1.2;border:2px solid var(--akzent-knopf);border-radius:var(--radius)}
.knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:var(--akzent-text)}
.knopf-still{background:transparent;color:var(--tinte);border-color:var(--linie-stark)}
.knopf-still:hover{background:var(--papier-2);border-color:var(--tinte);color:var(--tinte)}

/* ---------- Zahlen-Zeile */
.zahlen{list-style:none;padding:var(--raum-3) 0;margin-block:var(--raum-2) 0;display:flex;flex-wrap:wrap;gap:var(--raum-3) var(--raum-5);border-block:var(--linie-staerke) solid var(--linie)}
.zahlen li{display:flex;flex-direction:column;gap:.3rem;min-width:7rem}
.zahlen b{font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);font-size:var(--groesse-2);line-height:1;color:var(--akzent-lesbar);letter-spacing:var(--laufweite-ueberschrift)}
.zahlen span{font-size:var(--groesse-klein);color:var(--grau);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Abschnitte */
.abschnitt{padding-block:var(--raum-5)}
.abschnitt + .abschnitt{border-top:var(--linie-staerke) solid var(--linie)}
.abschnitt > h2{font-size:var(--groesse-2);margin-bottom:var(--raum-3);max-width:var(--mass)}
.abschnitt > p{max-width:var(--mass)}
.abschnitt > p + p{margin-top:var(--raum-2)}
h2.klein{font-size:var(--groesse-klein);letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-family:var(--schrift-text);font-weight:600;margin:var(--raum-4) 0 var(--raum-2)}
.seitenleiste > h2.klein:first-child{margin-top:0}
.seitenleiste > .figur:first-child{margin-top:0}
.weiter{margin-top:var(--raum-3);font-weight:600}
.prosa{max-width:var(--mass)}
.prosa p + p{margin-top:var(--raum-2)}
.prosa h2{font-size:1.375rem;margin:var(--raum-4) 0 var(--raum-2)}
.prosa h2:first-child{margin-top:0}
.prosa ul,.prosa ol,.details{padding-left:1.2em;margin-top:var(--raum-2)}
.prosa li + li,.details li + li{margin-top:.35rem}
.liste-schlicht{list-style:none;padding:0}
.liste-schlicht li{padding-block:.35rem;border-bottom:var(--linie-staerke) solid var(--linie)}
.liste-schlicht a{color:var(--tinte);text-decoration:none}
.liste-schlicht a:hover{text-decoration:underline}

/* ---------- Leistungen: Liste, kein Kartenraster */
.leistungen{list-style:none;padding:0;margin:0;border-top:var(--linie-staerke) solid var(--linie)}
.leistungen li{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:var(--raum-1) var(--raum-5);padding-block:var(--raum-3);border-bottom:var(--linie-staerke) solid var(--linie)}
.leistungen h3{font-size:1.25rem}
.leistungen h3 a{color:var(--tinte);text-decoration:none}
.leistungen h3 a:hover{text-decoration:underline;text-decoration-color:var(--akzent)}
.leistungen p{max-width:var(--mass)}
.leistungen-ausfuehrlich li{padding-block:var(--raum-4)}
.leistungen-ausfuehrlich .definition{font-weight:600}
.leistungen-ausfuehrlich p + p{margin-top:var(--raum-2)}
.leistungen-ausfuehrlich .weiter{margin-top:var(--raum-2)}
@media (max-width:40rem){.leistungen li{grid-template-columns:1fr}}

/* ---------- Fragen und Antworten: h3 + p */
.fragen{max-width:calc(var(--mass) + 8rem)}
.frage{padding-block:var(--raum-3);border-top:var(--linie-staerke) solid var(--linie)}
.frage:first-child{border-top:0;padding-top:0}
.frage h3{font-size:1.1875rem;margin-bottom:var(--raum-1)}
.frage p{max-width:var(--mass)}

/* ---------- Kontakt, Zeiten */
.kontaktblock{line-height:1.6}
.kontaktblock strong{display:block;font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);margin-bottom:.35rem}
.kontaktblock a{color:var(--tinte)}
.zeiten{width:100%;max-width:24rem}
.zeiten caption{text-align:left;font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);padding-bottom:.6rem;font-size:1.0625rem}
.zeiten th,.zeiten td{text-align:left;padding:.45rem 0;border-top:var(--linie-staerke) solid var(--linie);font-weight:400;vertical-align:top}
.zeiten th{color:var(--grau);padding-right:var(--raum-3);white-space:nowrap;width:1%}
.zeiten small{display:block;color:var(--grau)}
.kontakt-gross h2{font-size:1.1875rem;margin-bottom:var(--raum-2)}
.kontakt-gross .zeiten caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Orte, Referenzen, Personen, Anreise */
.orte{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 0;max-width:calc(var(--mass) + 8rem);margin-top:var(--raum-2)}
.orte li::after{content:"·";margin-inline:.6rem;color:var(--grau)}
.orte li:last-child::after{content:""}
.referenzen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--raum-4) var(--raum-5)}
.referenzen h3{font-size:1.1875rem}
.referenzen .ort{color:var(--grau);font-size:var(--groesse-klein);margin:.25rem 0 var(--raum-1)}
.personen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--raum-4) var(--raum-5)}
.person h3{font-size:1.25rem}
.person .rolle{color:var(--grau);margin:.25rem 0 var(--raum-2)}
.person .figur{margin:0 0 var(--raum-2);max-width:16rem}
.nachweise{list-style:none;padding:0;margin-top:var(--raum-2);font-size:var(--groesse-klein);color:var(--grau)}
.anreise-liste{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--raum-2) var(--raum-4);max-width:calc(var(--mass) + 10rem)}
.anreise-liste dt{font-weight:600}
@media (max-width:40rem){.anreise-liste{grid-template-columns:1fr}.anreise-liste dd{margin-bottom:var(--raum-2)}}

/* ---------- Bilder */
.figur{margin-block:var(--raum-4) 0}
.figur img{width:100%;border-radius:var(--radius)}
.figur figcaption{font-size:var(--groesse-klein);color:var(--grau);margin-top:.5rem}
.figur-breit{margin-top:var(--raum-4)}
.figur-breit img{aspect-ratio:2/1;object-fit:cover}
.figur-person img{aspect-ratio:4/5;object-fit:cover}

/* ---------- Tabellen (Zimmer, Preise) */
.tabelle-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelle{width:100%;min-width:40rem}
.tabelle-kurz{min-width:0}
.tabelle th,.tabelle td{text-align:left;padding:.8rem .6rem;border-bottom:var(--linie-staerke) solid var(--linie);vertical-align:top}
.tabelle th:first-child,.tabelle td:first-child{padding-left:0}
.tabelle thead th{font-family:var(--schrift-text);font-size:var(--groesse-klein);letter-spacing:.06em;text-transform:uppercase;color:var(--grau);font-weight:600;border-bottom:2px solid var(--linie-stark)}
.tabelle tbody th{font-family:var(--schrift-ueberschrift);font-weight:var(--gewicht-ueberschrift);font-size:1.0625rem}
.tabelle tbody th small{display:block;font-family:var(--schrift-text);font-weight:400;color:var(--grau)}
.tabelle .preis{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.zimmer-text{margin-top:var(--raum-4);max-width:var(--mass)}
.zimmer-text h3{font-size:1.25rem;margin-bottom:var(--raum-1)}
.zimmer-text .figur{margin:var(--raum-2) 0}
@media (max-width:40rem){.tabelle{min-width:0}.tabelle .ausstattung{display:none}.tabelle th,.tabelle td{padding:.6rem .3rem}.tabelle tbody th{font-size:1rem}.tabelle thead th{font-size:.75rem;letter-spacing:.02em}.tabelle .preis{white-space:normal;padding-right:0}}

/* ---------- Kurse */
.kurse{display:grid;gap:0;border-top:var(--linie-staerke) solid var(--linie)}
.kurs{padding-block:var(--raum-4);border-bottom:var(--linie-staerke) solid var(--linie);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--raum-2) var(--raum-5)}
.kurs h3{grid-column:1/-1;font-size:1.375rem}
.kurs-daten{display:grid;grid-template-columns:auto 1fr;gap:.3rem var(--raum-3)}
.kurs-daten dt{color:var(--grau);font-size:var(--groesse-klein);text-transform:uppercase;letter-spacing:.06em;padding-top:.15rem}
.kurs-daten .preis{font-weight:700}
@media (max-width:48rem){.kurs{grid-template-columns:1fr}}

/* ---------- Fuß: NAP zeichengleich mit Kontakt */
.fuss{border-top:var(--linie-staerke) solid var(--linie);margin-top:var(--raum-6);padding-block:var(--raum-5) var(--raum-4);font-size:.9375rem}
.fuss-innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--raum-4) var(--raum-5)}
.fuss ul{list-style:none;padding:0}
.fuss li + li{margin-top:.3rem}
.fuss a{color:var(--tinte)}
.fuss .zeiten caption{font-size:1rem}
.aktualisiert{color:var(--grau);margin-top:var(--raum-3)}
.muster{margin-top:var(--raum-2);padding:.5rem .8rem;background:var(--zweit-flaeche);border-left:3px solid var(--zweit);color:var(--tinte);display:inline-block}

@media print{.streifen,.kopf nav,.handlung,.sprung{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}