/* Sauna Profis (sauna-profis.com). Warmer Ratgebersatz auf Birkenton,
   Serifen in den Ueberschriften, Sans im Lauftext. Gliederung sitzt als
   nummerierter Kasten hinter dem Einleitungsabsatz, nicht davor.
   Eigenstaendiges Stylesheet. Einzug 3 Leerzeichen. */

:root {
   --birke: #faf7f2;
   --rauch: #2b2320;
   --rauchmatt: #6b5f58;
   --saunagruen: #0f5a52;
   --saunagruentief: #0a3d37;
   --leiste: #e6ded2;
   --kopfsatz: Constantia, "Noto Serif", Georgia, serif;
   --lesesatz: "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
   margin: 0;
   background: var(--birke);
   color: var(--rauch);
   font-family: var(--lesesatz);
   font-size: 1.06rem;
   line-height: 1.68;
}

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

h1, h2, h3 {
   font-family: var(--kopfsatz);
   line-height: 1.24;
   margin: 0 0 0.55em;
   /* deutsche Komposita brechen sonst auf schmalen Geraeten aus dem Satz */
   overflow-wrap: break-word;
   hyphens: auto;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.44rem; margin-top: 1.9em; }
h3 { font-size: 1.14rem; margin-top: 1.5em; }

p { margin: 0 0 1.05em; overflow-wrap: break-word; hyphens: auto; }

li, td, th { overflow-wrap: break-word; }

a { color: var(--saunagruentief); }

.sauna-text a, .sauna-karte p a, .sauna-fuss a {
   text-decoration: underline;
   text-underline-offset: 0.15em;
}

.sauna-nav a, .sauna-pfad a, .sauna-karte h3 a, .sauna-inhalt a {
   text-decoration: none;
}

a:hover { color: var(--saunagruen); }

a:focus-visible { outline: 3px solid var(--saunagruen); outline-offset: 2px; }

.sauna-bahn { width: min(1150px, 100% - 2.5rem); margin-inline: auto; }

.sauna-spalte { width: min(740px, 100% - 2.5rem); margin-inline: auto; }

/* --------------------------------------------------------------------- Kopf */

.sauna-sprung {
   position: absolute;
   left: -999px;
   background: var(--saunagruentief);
   color: var(--birke);
   padding: 0.6em 1em;
   z-index: 40;
}

.sauna-sprung:focus { left: 1rem; top: 1rem; }

.sauna-kopf { background: var(--birke); border-bottom: 1px solid var(--leiste); }

.sauna-kopfzeile {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.4rem;
   flex-wrap: wrap;
   padding-block: 1.1rem;
}

.sauna-marke {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   text-decoration: none;
   color: var(--rauch);
}

.sauna-markenwort {
   font-family: var(--kopfsatz);
   font-size: 1.45rem;
   letter-spacing: 0.01em;
}

.sauna-markenwort small {
   display: block;
   font-family: var(--lesesatz);
   font-size: 0.72rem;
   color: var(--rauchmatt);
   letter-spacing: 0.04em;
}

.sauna-nav ul {
   display: flex;
   gap: 1.3rem;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
}

.sauna-nav a { font-size: 0.94rem; color: var(--rauchmatt); }

.sauna-nav a:hover,
.sauna-nav a[aria-current="page"] { color: var(--saunagruentief); font-weight: 600; }

/* --------------------------------------------------------------------- Pfad */

.sauna-pfad { padding-block: 1rem 0; font-size: 0.85rem; color: var(--rauchmatt); }

.sauna-pfad ol {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

.sauna-pfad li + li::before { content: "\203A"; margin-right: 0.35rem; }

/* --------------------------------------------------------------- Startseite */

.sauna-aufmacher { padding-block: 2rem; }

.sauna-aufmacher img { aspect-ratio: 2 / 1; object-fit: cover; border-radius: 3px; }

.sauna-aufmachertext { max-width: 740px; margin-top: 1.4rem; }

.sauna-aufmachertext h1 { font-size: 2.3rem; }

.sauna-marker {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--saunagruentief);
   margin: 0 0 0.45rem;
   font-weight: 600;
}

.sauna-themenblock { padding-block: 2rem; border-top: 1px solid var(--leiste); }

.sauna-themenblock h2 { margin-top: 0; }

.sauna-themensatz { max-width: 70ch; color: var(--rauchmatt); }

.sauna-raster {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.7rem;
   margin-top: 1.4rem;
}

.sauna-karte { display: flex; flex-direction: column; gap: 0.42rem; }

.sauna-karte img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }

.sauna-karte h3 { font-size: 1.04rem; margin: 0.2rem 0 0; }

.sauna-kartendatum { font-size: 0.8rem; color: var(--rauchmatt); margin: 0; }

.sauna-karte p { margin: 0; font-size: 0.93rem; color: var(--rauchmatt); }

.sauna-mehrlink { margin-top: 1.2rem; font-weight: 600; }

.sauna-redaktion {
   padding-block: 2rem;
   border-top: 1px solid var(--leiste);
   max-width: 70ch;
}

.sauna-redaktion h2 { margin-top: 0; }

/* ------------------------------------------------------------------ Beitrag */

.sauna-beitrag { padding-block: 1.2rem 2.8rem; }

.sauna-beitragsdatum {
   font-size: 0.86rem;
   color: var(--rauchmatt);
   margin: 0.35rem 0 0;
}

.sauna-bild { margin: 1.5rem 0; }

.sauna-bild img { border-radius: 3px; }

.sauna-bild figcaption {
   font-size: 0.82rem;
   color: var(--rauchmatt);
   margin-top: 0.4rem;
}

/* Gliederung: nummerierter Kasten hinter dem Einleitungsabsatz */

.sauna-inhalt {
   background: #ffffff;
   border-left: 4px solid var(--saunagruen);
   padding: 1.1rem 1.3rem;
   margin: 0 0 1.8rem;
}

.sauna-inhaltstitel {
   font-family: var(--kopfsatz);
   font-size: 0.95rem;
   margin: 0 0 0.55rem;
   color: var(--saunagruentief);
}

.sauna-inhalt ol { margin: 0; padding-left: 1.2em; }

.sauna-inhalt li { margin-bottom: 0.32em; font-size: 0.94rem; }

.sauna-text h2:first-child { margin-top: 0; }

.sauna-text ul, .sauna-text ol { padding-left: 1.25em; }

.sauna-text li { margin-bottom: 0.38em; }

.sauna-rollfeld { overflow-x: auto; margin: 1.3em 0; }

.sauna-text table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }

.sauna-text th, .sauna-text td {
   border: 1px solid var(--leiste);
   padding: 0.5em 0.7em;
   text-align: left;
}

.sauna-text th { background: #ffffff; font-family: var(--kopfsatz); }

.sauna-text blockquote {
   border-left: 4px solid var(--leiste);
   margin: 1.3em 0;
   padding-left: 1em;
   color: var(--rauchmatt);
}

.sauna-weiter {
   border-top: 1px solid var(--leiste);
   padding-top: 1.6rem;
   margin-top: 2.4rem;
}

/* --------------------------------------------------------------------- Fuss */

.sauna-fuss {
   background: var(--rauch);
   color: var(--leiste);
   margin-top: 2.6rem;
   padding-block: 2rem;
}

.sauna-fuss a { color: var(--leiste); }

.sauna-fuss a:hover { color: #ffffff; }

.sauna-fuss h2 { font-size: 1rem; color: var(--birke); margin: 0 0 0.6em; }

.sauna-fussraster { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }

.sauna-fuss ul { list-style: none; margin: 0; padding: 0; }

.sauna-fuss li { margin-bottom: 0.35em; }

.sauna-fussschluss {
   margin-top: 1.5rem;
   font-size: 0.82rem;
   color: var(--leiste);
   opacity: 0.85;
}

.sauna-leer { padding-block: 3rem; max-width: 55ch; }

/* -------------------------------------------------------------- Schmalbreite */

@media (max-width: 920px) {
   .sauna-raster { grid-template-columns: repeat(2, 1fr); }
   .sauna-fussraster { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
   body { font-size: 1rem; }
   .sauna-bahn, .sauna-spalte { width: min(1150px, 100% - 2rem); }
   .sauna-raster { grid-template-columns: 1fr; }
   .sauna-aufmacher img { aspect-ratio: 4 / 3; }
   h1 { font-size: 1.66rem; }
   .sauna-aufmachertext h1 { font-size: 1.78rem; }
   .sauna-nav ul { gap: 0.8rem 1.1rem; }
}