/* Charakter haus: Cormorant Garamond / Source Sans 3. Großzügig, Bilder groß und randlos,
   Anreise-Abschnitt, Zimmer als Tabelle mit Preisen, Umgebung als Antworten auf Reisefragen. */
:root{
  --schrift-ueberschrift:'Cormorant Garamond',Georgia,"Times New Roman",serif;
  --schrift-text:'Source Sans 3',system-ui,"Helvetica Neue",Arial,sans-serif;
  --gewicht-ueberschrift:500;
  --laufweite-ueberschrift:0;
  --radius:0;
  --linie-staerke:1px;
  --zeile:1.6;
  --mass:38rem;
  --breite:76rem;
  --groesse-3:clamp(2.75rem,1.9rem + 4vw,5.25rem);
  --groesse-2:clamp(1.875rem,1.4rem + 1.6vw,2.75rem);
  --raum-5:clamp(3.5rem,2.5rem + 5vw,7rem);
  --raum-6:clamp(5rem,4rem + 7vw,10rem);
}
h1{font-style:italic;font-weight:500;line-height:1;max-width:20ch}
h2{font-weight:500}
h3{font-weight:600}
.wortmarke{font-size:1.875rem;font-weight:600;font-style:italic}
.vorzeile{color:var(--zweit-lesbar);letter-spacing:.2em;font-weight:600}
.antwort{font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.5}

.kopf{border-bottom:1px solid var(--linie-stark)}
.kopf-innen{padding-block:var(--raum-3)}
.kopf nav a{letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:600}
.kopf nav a[aria-current]{border-bottom-color:var(--zweit)}

.knopf{font-family:var(--schrift-text);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:1em 1.6em}
.knopf-still{border-color:var(--zweit)}
.knopf-still:hover{background:var(--zweit-flaeche);border-color:var(--zweit);color:var(--tinte)}

.zahlen{border-block:1px solid var(--zweit);padding-block:var(--raum-4);justify-content:space-between}
.zahlen b{font-style:italic;font-weight:500;font-size:clamp(2rem,1.5rem + 2vw,3.25rem);color:var(--akzent-lesbar)}
.zahlen span{color:var(--zweit-lesbar);letter-spacing:.14em}

/* Bilder groß, randlos */
.voll{margin-top:var(--raum-4)}
.voll .figur{margin:0}
.voll .figur img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:0}
.voll .figur figcaption{width:min(var(--breite),100% - 2*var(--rand));margin-inline:auto;margin-top:.6rem}
@media (max-width:40rem){.voll .figur img{aspect-ratio:4/3}}
.figur-breit img{aspect-ratio:21/9}

.abschnitt + .abschnitt{border-top:1px solid var(--linie)}
.abschnitt > h2{font-size:var(--groesse-2)}

.leistungen{border-top:1px solid var(--zweit)}
.leistungen li{padding-block:var(--raum-4);grid-template-columns:minmax(0,16rem) minmax(0,1fr)}
.leistungen h3{font-size:1.625rem;font-weight:600}
.leistungen h3 a:hover{text-decoration-color:var(--zweit)}

.frage h3{font-size:1.5rem;font-weight:600}

/* Zimmer als Tabelle mit Preisen */
.tabelle thead th{color:var(--zweit-lesbar);border-bottom:1px solid var(--zweit)}
.tabelle tbody th{font-size:1.375rem;font-weight:600}
.tabelle tbody .preis{font-family:var(--schrift-ueberschrift);font-size:1.5rem;font-weight:600;font-style:italic}
.tabelle td{color:var(--tinte)}
.zimmer-vorschau{margin-top:var(--raum-2)}
@media (max-width:40rem){.tabelle tbody th{font-size:1.125rem}.tabelle tbody .preis{font-size:1.25rem}}

/* Anreise */
.anreise-liste dt{font-family:var(--schrift-ueberschrift);font-size:1.375rem;font-weight:600}

.person h3{font-size:1.625rem}
.person .rolle{color:var(--zweit-lesbar)}
.zeiten caption{font-size:1.25rem;font-weight:600}
.zeiten th{color:var(--zweit-lesbar)}
.figur figcaption{font-style:italic}
.orte li::after{color:var(--zweit)}
.fuss{border-top:1px solid var(--zweit)}
.muster{border-left-color:var(--zweit)}