/* Gestaltung der Satellitenseite. Drei Stile ueber Design-Tokens, ein Regelwerk. */

:root {
    --farbe-text: #18201e;
    --farbe-ruhig: #5b6662;
    --farbe-flaeche: #f3f5f1;
    --farbe-papier: #ffffff;
    --farbe-primaer: #165d50;
    --farbe-primaer-dunkel: #0d4037;
    --farbe-akzent: #d7a527;
    --farbe-akzent-hell: #f2c95e;
    --farbe-linie: #ccd3cf;
    --farbe-fehler: #b53636;
    --farbe-erfolg: #278351;
    --schrift-titel: Georgia, "Times New Roman", serif;
    --schrift-text: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
    --radius: 4px;
    --schatten: 0 18px 50px rgb(24 32 30 / 10%);
    --rahmen: 1180px;
}

html[data-stil="modern"] {
    --farbe-text: #151a24;
    --farbe-ruhig: #606978;
    --farbe-flaeche: #eef2f3;
    --farbe-primaer: #006d77;
    --farbe-primaer-dunkel: #004f57;
    --farbe-akzent: #dc6b3f;
    --farbe-akzent-hell: #f3a07c;
    --radius: 8px;
    --schrift-titel: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

html[data-stil="frisch"] {
    --farbe-text: #14212b;
    --farbe-ruhig: #546470;
    --farbe-flaeche: #eef6f4;
    --farbe-primaer: #0b7a75;
    --farbe-primaer-dunkel: #075552;
    --farbe-akzent: #ff8a5b;
    --farbe-akzent-hell: #ffb493;
    --farbe-linie: #cfdedb;
    --radius: 14px;
    --schrift-titel: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
}

html[data-stil="elegant"] {
    --farbe-text: #1c1a1a;
    --farbe-ruhig: #6a6260;
    --farbe-flaeche: #f5f1ec;
    --farbe-primaer: #5a3a2e;
    --farbe-primaer-dunkel: #3a241c;
    --farbe-akzent: #b9975b;
    --farbe-akzent-hell: #e2c98f;
    --farbe-linie: #d9d0c7;
    --radius: 0px;
    --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

html[data-stil="technisch"] {
    --farbe-text: #12151b;
    --farbe-ruhig: #5b6270;
    --farbe-flaeche: #eef0f4;
    --farbe-primaer: #1f3a5f;
    --farbe-primaer-dunkel: #14273f;
    --farbe-akzent: #e08a2e;
    --farbe-akzent-hell: #f4b86a;
    --farbe-linie: #cfd5de;
    --radius: 2px;
    --schrift-titel: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[data-stil="handwerklich"] {
    --farbe-text: #201e19;
    --farbe-ruhig: #665f53;
    --farbe-flaeche: #f1efe8;
    --farbe-primaer: #315c44;
    --farbe-primaer-dunkel: #213f30;
    --farbe-akzent: #c9812a;
    --farbe-akzent-hell: #e6b06a;
    --farbe-linie: #cec7b8;
    --radius: 2px;
    --schrift-titel: Rockwell, "Roboto Slab", Georgia, serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--farbe-text); background: var(--farbe-papier); font-family: var(--schrift-text); font-size: 1rem; line-height: 1.65; }
body::before { position: fixed; z-index: -1; inset: 0; content: ""; background-image: linear-gradient(rgb(24 32 30 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(24 32 30 / 3%) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
a { color: var(--farbe-primaer-dunkel); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .65em; font-family: var(--schrift-titel); line-height: 1.12; letter-spacing: 0; }
h1 { max-width: 18ch; font-size: clamp(2.5rem, 6vw, 5.2rem); }
h2 { max-width: 24ch; font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.25rem; }
.rahmen { width: min(calc(100% - 2rem), var(--rahmen)); margin-inline: auto; }
.lesebreite { max-width: 780px; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprunglink { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem 1rem; background: var(--farbe-papier); transform: translateY(-150%); }
.sprunglink:focus { transform: none; }
small { color: var(--farbe-ruhig); }
address { font-style: normal; }

/* ---------- Kopf und Navigation ---------- */
.seitenkopf { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--farbe-linie); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.kopfzeile { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wortmarke { display: inline-flex; align-items: center; gap: .65rem; color: var(--farbe-text); font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.wortmarke img { width: 32px; height: 32px; flex: 0 0 32px; }
.hauptnavigation { display: flex; align-items: center; gap: 1.25rem; }
.hauptnavigation > a:not(.knopf) { color: var(--farbe-text); text-decoration: none; }
.hauptnavigation a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--farbe-akzent); text-decoration-thickness: 3px; }
.menueknopf { display: none; border: 1px solid var(--farbe-linie); padding: .55rem .75rem; color: var(--farbe-text); background: var(--farbe-papier); }

/* ---------- Schaltflaechen und Textelemente ---------- */
.knopf { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); padding: .75rem 1.25rem; color: #fff; background: var(--farbe-primaer); font-weight: 700; text-decoration: none; cursor: pointer; }
.knopf:hover { color: #fff; background: var(--farbe-primaer-dunkel); }
.knopf-klein { min-height: 40px; padding: .5rem 1rem; }
.knopf-breit { width: 100%; }
.knopf-sekundaer { border: 1px solid var(--farbe-primaer); color: var(--farbe-primaer); background: transparent; }
.knopf-sekundaer:hover { color: #fff; }
.textlink { font-weight: 700; }
.aktionsgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.aktionsgruppe--mittig { justify-content: center; }
.aktionsgruppe--unten { margin-top: 2.5rem; }
.kicker { margin-bottom: .8rem; color: var(--farbe-primaer); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vorspann { max-width: 62ch; color: var(--farbe-ruhig); font-size: 1.25rem; }
.mikrotext, .fussnote, .quelle { color: var(--farbe-ruhig); font-size: .9rem; }
.fussnote, .quelle { margin-top: 1.5rem; }
.pillen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pillen li { border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; }
.punkte { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.punkte li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; }
.punkte li::before { position: absolute; left: 0; content: "\2713"; color: var(--farbe-primaer); font-weight: 800; }
.faehnchen { display: inline-block; border-radius: 999px; padding: .2rem .7rem; color: #fff; background: var(--farbe-akzent); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.abschnittskopf { max-width: 760px; margin-bottom: 2.5rem; }
.abschnittskopf--mit-knopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.abschnittskopf-text { max-width: 760px; }
.abschnittskopf-text .vorspann, .abschnittskopf .vorspann { margin-bottom: 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4rem, 9vw, 7rem) 0; }
.abschnitt--flaeche { background: var(--farbe-flaeche); }
.abschnitt--dunkel { color: #fff; background: var(--farbe-primaer-dunkel); }
.abschnitt--dunkel .kicker { color: var(--farbe-akzent-hell); }
.abschnitt--dunkel .vorspann, .abschnitt--dunkel small, .abschnitt--dunkel .fussnote { color: rgb(255 255 255 / 78%); }
.abschnitt--dunkel a { color: #fff; }
.abschnitt--dunkel .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.abschnitt--dunkel .knopf-sekundaer { border-color: #fff; color: #fff; background: transparent; }
.seitentitel { padding-bottom: 0; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 8rem); }

/* ---------- Einstieg ---------- */
.einstieg { min-height: min(680px, calc(100vh - 74px)); display: grid; align-items: center; padding: 5rem 0 6rem; overflow: hidden; background: linear-gradient(120deg, var(--farbe-flaeche) 0 68%, transparent 68%); }
.einstieg--dunkel { color: #fff; background: linear-gradient(120deg, var(--farbe-primaer-dunkel) 0 68%, var(--farbe-primaer) 68%); }
.einstieg--dunkel .kicker { color: var(--farbe-akzent-hell); }
.einstieg--dunkel .vorspann { color: rgb(255 255 255 / 82%); }
.einstieg--dunkel .textlink, .einstieg--dunkel .pillen li { color: #fff; border-color: rgb(255 255 255 / 35%); }
.einstieg--dunkel .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.einstieg-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); }
.einstieg-text { position: relative; }
.einstieg-text::after { position: absolute; width: 86px; height: 7px; margin-top: 2.6rem; content: ""; background: var(--farbe-akzent); }
.einstieg-text--mittig { max-width: 820px; margin-inline: auto; text-align: center; }
.einstieg-text--mittig h1, .einstieg-text--mittig .vorspann { max-width: none; margin-inline: auto; }
.einstieg-text--mittig::after { left: 50%; transform: translateX(-50%); }
.einstieg-text--mittig .pillen { justify-content: center; }
.einstieg--mittig { background: var(--farbe-flaeche); }
.einstieg-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.einstieg-bildbreit { margin-top: 4rem; }
.einstieg-bildbreit img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.regionshinweis { border-top: 5px solid var(--farbe-akzent); border-radius: var(--radius); padding: 1.6rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: var(--schatten); }
.regionshinweis span { display: block; color: var(--farbe-ruhig); font-size: .82rem; text-transform: uppercase; }
.regionshinweis strong { display: block; margin: .4rem 0 .8rem; font-family: var(--schrift-titel); font-size: 1.45rem; line-height: 1.25; }
.regionshinweis p { margin: 0; color: var(--farbe-ruhig); font-size: .92rem; }

/* ---------- Logoleiste ---------- */
.logoleiste { border-bottom: 1px solid var(--farbe-linie); padding: 1.5rem 0; }
.logoleiste-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.logoleiste-titel { margin: 0; color: var(--farbe-ruhig); font-size: .9rem; }
.logoleiste-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.logoleiste-liste img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; }
.logoleiste-wort { font-family: var(--schrift-titel); font-weight: 700; color: var(--farbe-ruhig); }

/* ---------- Leistungen ---------- */
.leistungsraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--farbe-linie); }
.leistung { min-height: 240px; display: flex; flex-direction: column; padding: 2rem; background: var(--farbe-papier); }
.leistung > span { color: var(--farbe-akzent); font-weight: 800; }
.leistung h3 { margin-top: 2.5rem; }
.leistung p { color: var(--farbe-ruhig); flex: 1; }
.leistungstabelle-rahmen { overflow-x: auto; }
.leistungstabelle { width: 100%; min-width: 760px; border-collapse: collapse; }
.leistungstabelle th, .leistungstabelle td { border-bottom: 1px solid var(--farbe-linie); padding: 1rem; text-align: left; vertical-align: top; }
.leistungstabelle thead th { vertical-align: bottom; }
.leistungstabelle tbody th { font-weight: 600; }
.leistungstabelle td { text-align: center; }
.leistungstabelle-ecke span { display: block; font-family: var(--schrift-titel); font-size: 1.15rem; }
.leistungstabelle-paket { text-align: center; }
.leistungstabelle-paket .paket-titel { display: block; margin-top: .5rem; font-family: var(--schrift-titel); font-size: 1.3rem; }
.paket-preis { display: block; font-weight: 800; color: var(--farbe-primaer); }
.leistungstabelle-paket--empfohlen, .leistungstabelle-zelle--empfohlen { background: var(--farbe-flaeche); }
.tabelle-ja { color: var(--farbe-erfolg); font-weight: 800; }
.tabelle-nein { color: var(--farbe-ruhig); }
.leistungspakete { display: none; gap: 1.5rem; }
.leistungspaket { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-papier); }
.leistungspaket--empfohlen { border-color: var(--farbe-akzent); box-shadow: var(--schatten); }
.paket-merkmale { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.paket-merkmale li { padding: .35rem 0; border-bottom: 1px solid var(--farbe-linie); }
.paket-merkmal--fehlt { color: var(--farbe-ruhig); }

/* ---------- Argumente, Text-Bild, Karten ---------- */
.argumente-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.argumente-raster--ohne-bild { grid-template-columns: 1fr; }
.argumente-bild img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); }
.argumente-liste { margin: 0; padding: 0; list-style: none; counter-reset: argument; display: grid; gap: 1.5rem; }
.argumente-liste li { position: relative; padding-left: 3.2rem; counter-increment: argument; }
.argumente-liste li::before { position: absolute; left: 0; top: .1rem; content: "0" counter(argument); color: var(--farbe-akzent-hell); font-weight: 800; }
.argumente-liste h3 { margin-bottom: .3rem; }
.argumente-liste p { margin: 0; color: rgb(255 255 255 / 80%); }
.textbild-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: 2.5rem 0; }
.textbild-zeile + .textbild-zeile { border-top: 1px solid var(--farbe-linie); }
.textbild-zeile--gedreht .textbild-bild { order: -1; }
.textbild-zeile--ohne-bild { grid-template-columns: minmax(0, 780px); }
.textbild-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.kartenraster { display: grid; gap: 1.5rem; }
.kartenraster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartenraster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kartenraster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karte { border-radius: var(--radius); padding: 1.75rem; }
.karte--rahmen { border: 1px solid var(--farbe-linie); background: var(--farbe-papier); }
.karte--flaeche { background: var(--farbe-flaeche); }
.abschnitt--flaeche .karte--flaeche { background: var(--farbe-papier); }
.karte p { color: var(--farbe-ruhig); }

/* ---------- Ablauf, Kennzahlen, Akzentliste ---------- */
.ablauf-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ablaufliste { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablaufliste li { position: relative; border-bottom: 1px solid var(--farbe-linie); padding: 1.25rem 0 1.25rem 3.4rem; counter-increment: schritt; }
.ablaufliste li::before { position: absolute; left: 0; top: 1.3rem; content: "0" counter(schritt); color: var(--farbe-akzent); font-weight: 800; }
.ablaufliste h3 { margin-bottom: .3rem; }
.ablaufliste p { margin-bottom: .5rem; }
.ablaufkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablaufkarte { border-top: 4px solid var(--farbe-akzent); border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-papier); counter-increment: schritt; box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
.ablaufkarte::before { display: block; margin-bottom: 1rem; content: "0" counter(schritt); color: var(--farbe-akzent); font-weight: 800; }
.ablauf-ergebnis { color: var(--farbe-ruhig); font-size: .92rem; margin: 0; }
.abschlusskasten { border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-primaer-dunkel); color: #fff; }
.abschlusskasten .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.kennzahlen-titel { margin-bottom: 2rem; }
.kennzahlenleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin: 0; }
.kennzahlenleiste--einstieg { margin-top: 3.5rem; max-width: 820px; }
.kennzahl { border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }
.kennzahl dt { color: var(--farbe-ruhig); font-size: .9rem; }
.kennzahl dd { margin: 0; font-family: var(--schrift-titel); font-size: 2.2rem; line-height: 1.1; }
.akzent-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.akzent-raster--einspaltig { grid-template-columns: minmax(0, 780px); }
.akzentliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.5rem; }
.akzentliste li { border-left: 4px solid var(--farbe-akzent); padding-left: 1.25rem; }
.akzentliste h3 { margin-bottom: .3rem; }
.akzentliste p { margin: 0; color: var(--farbe-ruhig); }
.merkmalkasten { border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche .merkmalkasten { background: var(--farbe-papier); }
.merkmalkasten ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.merkmalkasten span { display: block; color: var(--farbe-ruhig); font-size: .92rem; }

/* ---------- FAQ, Galerie, Zitat, Rezensionen, Team ---------- */
.faq-telefon { margin-top: -1.5rem; margin-bottom: 2rem; }
.faq { border-top: 1px solid var(--farbe-linie); }
.faq-eintrag { border-bottom: 1px solid var(--farbe-linie); }
.faq-eintrag summary { padding: 1.1rem 2.5rem 1.1rem 0; position: relative; cursor: pointer; font-weight: 700; list-style: none; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after { position: absolute; right: .25rem; top: 1.1rem; content: "+"; color: var(--farbe-primaer); font-size: 1.4rem; line-height: 1; }
.faq-eintrag[open] summary::after { content: "\2212"; }
.faq-antwort { padding: 0 0 1.25rem; color: var(--farbe-ruhig); }
.galerie { display: grid; gap: 1rem; }
.galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie figure { margin: 0; }
.galerie img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.galerie--4-3 img { aspect-ratio: 4 / 3; }
.galerie--1-1 img { aspect-ratio: 1; }
.galerie--16-9 img { aspect-ratio: 16 / 9; }
.galerie figcaption { padding-top: .5rem; color: var(--farbe-ruhig); font-size: .9rem; }
.zitat { margin: 0; border-left: 5px solid var(--farbe-akzent); padding: .5rem 0 .5rem 1.75rem; }
.zitat p { font-family: var(--schrift-titel); font-size: 1.5rem; line-height: 1.35; }
.zitat footer { color: var(--farbe-ruhig); }
.zitat cite { font-style: normal; font-weight: 700; }
.zitat footer span::before { content: " \00b7 "; }
.rezensionen-liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1.5rem; margin: 0; padding: 0 0 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.rezension { scroll-snap-align: start; border-radius: var(--radius); padding: 1.75rem; background: var(--farbe-papier); border: 1px solid var(--farbe-linie); }
.rezension blockquote { margin: 0 0 1rem; }
.rezension blockquote p { margin: 0; }
.sterne { margin: 0 0 .75rem; color: var(--farbe-akzent); letter-spacing: .1em; }
.rezension-name { margin: 0; }
.rezension-name span { display: block; color: var(--farbe-ruhig); font-size: .9rem; }
.rezension-quelle { margin: .75rem 0 0; font-size: .85rem; }
.rezensionen-steuerung { display: flex; gap: .5rem; justify-content: flex-end; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.person-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.person h3 { margin-bottom: .2rem; }
.person-rolle { color: var(--farbe-primaer); font-weight: 700; }
.person .pillen { margin-top: .75rem; }

/* ---------- Standorte, Links, Verlauf, GEO, GMB ---------- */
.standorte { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.sitzkarte { position: relative; border-radius: var(--radius); padding: 2rem; background: var(--farbe-papier); box-shadow: var(--schatten); }
.sitzkarte .faehnchen { margin-bottom: 1rem; }
.sitz-hinweise { margin: 1rem 0; padding: 1rem; border-radius: var(--radius); background: var(--farbe-flaeche); list-style: none; }
.sitz-hinweise li { padding: .2rem 0; }
.ortsliste { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.ortsliste li { break-inside: avoid; display: flex; flex-direction: column; border-bottom: 1px solid var(--farbe-linie); padding: .7rem 0; }
.ortsliste a, .ortsliste span { font-weight: 700; }
.linkliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; }
.linkliste li { border-bottom: 1px solid var(--farbe-linie); padding-bottom: 1.25rem; }
.linkliste a { font-weight: 700; }
.linkliste-art { margin-left: .75rem; color: var(--farbe-ruhig); font-size: .85rem; }
.linkliste p { margin: .35rem 0 0; color: var(--farbe-ruhig); }
.verlauf-eckwerte { margin-bottom: 2rem; }
.verlauf { margin: 0; }
.verlauf-bild { display: block; width: 100%; height: 280px; border-radius: var(--radius); background: var(--farbe-flaeche); }
.abschnitt--flaeche .verlauf-bild { background: var(--farbe-papier); }
.verlauf-raster { stroke: var(--farbe-linie); stroke-width: 1; }
.verlauf-flaeche { fill: var(--farbe-primaer); opacity: .12; }
.verlauf-linie { fill: none; stroke: var(--farbe-primaer); stroke-width: 3; }
.verlauf-zeitachse { display: flex; justify-content: space-between; padding-top: .5rem; color: var(--farbe-ruhig); font-size: .85rem; }
.verlauf-tabelle { margin-top: 1.5rem; }
.verlauf-tabelle summary { cursor: pointer; font-weight: 700; }
.verlauf-tabelle table { width: 100%; max-width: 420px; margin-top: 1rem; border-collapse: collapse; }
.verlauf-tabelle th, .verlauf-tabelle td { border-bottom: 1px solid var(--farbe-linie); padding: .4rem .6rem; text-align: left; }
.geo-balken { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.geo-zeile { display: grid; grid-template-columns: 2rem minmax(120px, .8fr) minmax(0, 1.4fr) auto; align-items: center; gap: 1rem; }
.geo-zeile--hervor .geo-name { font-weight: 800; color: var(--farbe-primaer); }
.geo-rang { color: var(--farbe-ruhig); font-weight: 800; }
.geo-name small { display: block; }
.geo-spur { display: block; height: 14px; border-radius: 999px; background: var(--farbe-linie); overflow: hidden; }
.geo-wert { display: block; height: 100%; background: var(--farbe-primaer); }
.geo-zeile--hervor .geo-wert { background: var(--farbe-akzent); }
.geo-zahl { font-weight: 800; white-space: nowrap; }
.geo-abschluss { margin-top: 2.5rem; }
.gmb-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.gmb-vergleich--gedreht .gmb-widget { order: -1; }
.gmb-widget { min-height: 200px; }

/* ---------- Fliesstext, Rechtstexte, Fakten ---------- */
.fliesstext h2, .fliesstext h3 { margin-top: 2rem; }
.fliesstext img { border-radius: var(--radius); }
.fliesstext table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.fliesstext th, .fliesstext td { border-bottom: 1px solid var(--farbe-linie); padding: .6rem; text-align: left; }
.fliesstext blockquote { margin: 1.5rem 0; border-left: 4px solid var(--farbe-akzent); padding-left: 1.25rem; color: var(--farbe-ruhig); }
.faktenseite h2, .rechtstext h2 { margin-top: 3rem; font-size: 2.1rem; }
.faktenliste { border-top: 1px solid var(--farbe-linie); }
.faktenliste div { display: grid; grid-template-columns: minmax(130px, .45fr) 1fr; border-bottom: 1px solid var(--farbe-linie); padding: 1rem 0; gap: 1rem; }
.faktenliste dt { font-weight: 800; }
.faktenliste dd { margin: 0; }
.faktenabschnitt { margin: 2rem 0; }
.quellenliste { padding-left: 1.2rem; }
.pruefstand { border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }

/* ---------- Kontakt und Formular ---------- */
.kontaktband { color: #fff; background: var(--farbe-primaer); }
.kontaktband .kicker { color: var(--farbe-akzent-hell); }
.kontaktband .knopf { background: var(--farbe-akzent); color: var(--farbe-text); }
.kontaktband .knopf-sekundaer { border-color: #fff; color: #fff; background: transparent; }
.kontaktband .mikrotext { color: rgb(255 255 255 / 75%); }
.kontaktband--dunkel { background: var(--farbe-primaer-dunkel); }
.kontaktband--hell { color: var(--farbe-text); background: var(--farbe-flaeche); }
.kontaktband--hell .kicker { color: var(--farbe-primaer); }
.kontaktband--hell .knopf { background: var(--farbe-primaer); color: #fff; }
.kontaktband--hell .knopf-sekundaer { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.kontaktband--hell .mikrotext { color: var(--farbe-ruhig); }
.kontakt-titel { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.kanaele { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.kanal { display: grid; border-left: 4px solid var(--farbe-akzent); padding-left: 1rem; }
.kanal-art { color: var(--farbe-ruhig); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.kanal-wert { font-size: 1.15rem; font-weight: 700; }
.kontaktformular { display: grid; gap: 1.1rem; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.feld { display: grid; gap: .35rem; font-weight: 700; }
.feld-zusatz { font-weight: 400; color: var(--farbe-ruhig); }
.kontaktformular input:not([type="checkbox"]), .kontaktformular textarea, .kontaktformular select { width: 100%; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: .75rem; color: var(--farbe-text); background: var(--farbe-papier); }
.kontaktformular textarea { resize: vertical; }
.feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--farbe-fehler); }
.feld-fehler { color: var(--farbe-fehler); font-size: .9rem; font-weight: 400; }
.kontrollfeld { grid-template-columns: auto 1fr; align-items: start; font-size: .9rem; font-weight: 400; }
.kontrollfeld input { margin-top: .3rem; }
.feld--captcha { display: block; }
.captchame { margin: .25rem 0; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formular-fuss .mikrotext { margin: 0; }
.honigtopf { position: absolute; left: -9999px; }
.meldung { border-left: 4px solid; padding: .8rem 1rem; }
.meldung.erfolg { border-color: var(--farbe-erfolg); background: #e7f5ec; }
.meldung.fehler { border-color: var(--farbe-fehler); background: #fbeaea; }

/* ---------- Fuss, Dialog, mobile Leiste ---------- */
.seitenfuss { padding: 3.5rem 0 7rem; color: #fff; background: var(--farbe-text); }
.fussraster { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.seitenfuss nav { display: grid; justify-items: start; gap: .45rem; }
.seitenfuss a { color: #fff; }
.cookie-dialog { width: min(calc(100% - 2rem), 680px); border: 0; border-radius: var(--radius); padding: 0; color: var(--farbe-text); box-shadow: var(--schatten); }
.cookie-dialog::backdrop { background: rgb(14 22 20 / 68%); }
.cookie-dialog form { padding: 1.5rem; }
.cookie-dialog fieldset { display: grid; border: 0; padding: 0; gap: .6rem; }
.dialog-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.mobil-cta { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: none; grid-template-columns: .8fr 1.2fr; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 28px rgb(0 0 0 / 18%); }
.mobil-cta a { min-height: 54px; display: grid; place-items: center; color: #fff; background: var(--farbe-primaer-dunkel); font-weight: 800; text-decoration: none; }
.mobil-cta a + a { background: var(--farbe-primaer); }

/* ---------- Umbrueche ---------- */
@media (max-width: 960px) {
    .leistungsraster, .kartenraster--3, .kartenraster--4, .galerie--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .argumente-raster, .ablauf-raster, .akzent-raster, .standorte, .gmb-vergleich { grid-template-columns: 1fr; }
    .gmb-vergleich--gedreht .gmb-widget { order: 0; }
}

@media (max-width: 760px) {
    body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
    .vorspann { font-size: 1.1rem; }
    .faktenseite h2, .rechtstext h2 { font-size: 1.7rem; }
    .menueknopf { display: inline-flex; }
    .hauptnavigation { position: absolute; top: 74px; right: 0; left: 0; display: none; align-items: stretch; border-bottom: 1px solid var(--farbe-linie); padding: 1rem; background: var(--farbe-papier); flex-direction: column; }
    .hauptnavigation[data-offen="true"] { display: flex; }
    .einstieg { min-height: auto; padding: 4rem 0; background: var(--farbe-flaeche); }
    .einstieg--dunkel { background: var(--farbe-primaer-dunkel); }
    .einstieg-raster, .zweispaltig, .textbild-zeile, .feldpaar, .kartenraster, .galerie, .fussraster { grid-template-columns: 1fr; }
    .textbild-zeile--gedreht .textbild-bild { order: 0; }
    .leistungsraster { grid-template-columns: 1fr; }
    .leistungstabelle-rahmen { display: none; }
    .leistungspakete { display: grid; }
    .ortsliste { columns: 1; }
    .rezensionen-liste { grid-auto-columns: 85%; }
    .mobil-cta { display: grid; }
    .dialog-aktionen { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}