/* 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; flex: 0 0 auto; }
.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); }

/* Das fliessende Band.
   Die Spur traegt zwei gleiche Listen; die Verschiebung um -50 % entspricht
   deshalb genau einer Listenbreite. Genau darum ist der Ruecksprung
   unsichtbar - und genau darum darf die Spur nicht umbrechen. */
.logoleiste-band { flex: 1 1 320px; min-width: 0; }
.logoleiste--laufend .logoleiste-band { overflow: hidden; }
/* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
   auftauchen, sondern hereinkommen. */
.logoleiste--laufend .logoleiste-band {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logoleiste--laufend .logoleiste-spur {
    display: flex;
    width: max-content;
    animation: logoband var(--logoband-dauer, 32s) linear infinite;
}
.logoleiste--laufend .logoleiste-liste { flex-wrap: nowrap; padding-right: 2.5rem; }
/* Angehalten heisst angehalten - nicht zurueckgesetzt. */
.logoleiste--laufend .logoleiste-spur[data-angehalten] { animation-play-state: paused; }
/* Beim Ueberfahren stehenbleiben: wer ein Logo ansehen will, soll es koennen. */
.logoleiste--laufend .logoleiste-band:hover .logoleiste-spur { animation-play-state: paused; }

@keyframes logoband {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.logoleiste-pause {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--farbe-linie);
    border-radius: 999px;
    padding: .3rem .8rem;
    color: var(--farbe-ruhig);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.logoleiste-pause:hover { color: var(--farbe-text); border-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); }

/* ---------- Bewegte Grafiken: gemeinsame Teile ----------
   Handy, Laufschrift, Schaubild und Radar bewegen sich per CSS. Jede traegt
   data-bewegung; website.js haelt sie an, wenn jemand den Knopf drueckt
   (data-angehalten) oder die Grafik ausser Sicht ist (data-ruht) - die
   Regeln dafuer stehen am Ende, damit sie jede Animation ueberstimmen. */
.bewegung-pause { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--farbe-linie); border-radius: 999px; padding: .25rem .75rem; color: var(--farbe-ruhig); background: var(--farbe-papier); font: inherit; font-size: .78rem; line-height: 1.4; cursor: pointer; }
.bewegung-pause:hover { border-color: var(--farbe-ruhig); color: var(--farbe-text); }
/* Der Knopf setzt display selbst - ohne diese Regel ueberstimmte das das
   hidden-Attribut, und ein toter Knopf stuende ohne Skript im Bild. */
.bewegung-pause[hidden] { display: none; }
.bewegung-pause .symbol { width: .9rem; height: .9rem; flex: 0 0 auto; }
.bewegung-pause .symbol-weiter, .bewegung-pause[aria-pressed="true"] .symbol-pause { display: none; }
.bewegung-pause[aria-pressed="true"] .symbol-weiter { display: block; }
.bewegung-pause--rund { justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; }
.bewegung-pause--rund .bewegung-pause-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.einstieg--dunkel .bewegung-pause, .abschnitt--dunkel .bewegung-pause, .laufschrift--dunkel .bewegung-pause, .laufschrift--primaer .bewegung-pause { border-color: rgb(255 255 255 / 35%); color: #fff; background: rgb(255 255 255 / 10%); }

/* ---------- Startbereich mit Handy ----------
   Ein Takt von zwoelf Sekunden fuer alles im Handy: 2-13 % tippt der
   Suchbegriff, ab 16 % erscheint die Liste, dann steigt der eigene Eintrag
   in drei Schritten (24-30, 42-48, 60-66 %) nach oben, bleibt bis 92 % auf
   Platz 1 und blendet mit der Liste aus. Listen mit drei Plaetzen (Karte,
   KI) sparen sich den ersten Schritt.

   Die Grundwerte ausserhalb der Keyframes sind das ENDE der Bewegung. Ohne
   Animation - "Bewegung reduzieren", angehalten vor dem Start, altes
   Browserprogramm - steht der eigene Eintrag also oben. */
.einstieg--handy { background: var(--farbe-flaeche); }
.einstieg--handy.einstieg--dunkel { background: var(--farbe-primaer-dunkel); }
.einstieg--handy .einstieg-raster { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
.einstieg--handy h1 { max-width: 15ch; margin-bottom: .35em; font-size: clamp(2.3rem, 5vw, 4.3rem); }
.einstieg-unterzeile { max-width: 24ch; margin: 0 0 1.25rem; color: var(--farbe-primaer); font-family: var(--schrift-titel); font-size: clamp(1.3rem, 2.3vw, 1.85rem); font-weight: 700; line-height: 1.2; }
.einstieg--dunkel .einstieg-unterzeile { color: var(--farbe-akzent-hell); }
.einstieg-mikrotext { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; }
.einstieg-mikrotext .symbol { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--farbe-erfolg); }
.einstieg--dunkel .einstieg-mikrotext { color: rgb(255 255 255 / 75%); }
.einstieg--dunkel .einstieg-mikrotext .symbol { color: var(--farbe-akzent-hell); }
.einstieg--dunkel .knopf-sekundaer { border-color: rgb(255 255 255 / 55%); color: #fff; background: transparent; }
.einstieg--dunkel .knopf-sekundaer:hover { border-color: #fff; background: rgb(255 255 255 / 10%); }
.kontaktzeile { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; color: var(--farbe-ruhig); font-size: .88rem; }
.kontaktzeile li, .kontaktzeile a { display: inline-flex; align-items: center; gap: .4rem; }
.kontaktzeile a { color: inherit; text-decoration: none; }
.kontaktzeile a:hover { color: var(--farbe-text); text-decoration: underline; }
.kontaktzeile .symbol { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--farbe-primaer); }
.einstieg--dunkel .kontaktzeile { color: rgb(255 255 255 / 78%); }
.einstieg--dunkel .kontaktzeile a:hover { color: #fff; }
.einstieg--dunkel .kontaktzeile .symbol { color: var(--farbe-akzent-hell); }

/* Die Buehne: ein weicher Lichtkreis und ein Punktraster hinter dem Handy. */
.handy-buehne { position: relative; z-index: 0; display: grid; justify-items: center; gap: 1.1rem; margin: 0; padding-top: 1rem; }
.handy-buehne::before { position: absolute; z-index: -1; top: 2%; left: 50%; width: min(480px, 118%); aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, rgb(22 93 80 / 16%), transparent 68%); background: radial-gradient(circle, color-mix(in srgb, var(--farbe-primaer) 22%, transparent), transparent 68%); transform: translateX(-50%); }
.handy-buehne::after { position: absolute; z-index: -1; right: 0; bottom: 16%; width: 34%; aspect-ratio: 1; content: ""; background-image: radial-gradient(var(--farbe-primaer) 1.3px, transparent 1.7px); background-size: 14px 14px; opacity: .28; }
.einstieg--dunkel .handy-buehne::before { background: radial-gradient(circle, rgb(255 255 255 / 14%), transparent 68%); }
.einstieg--dunkel .handy-buehne::after { background-image: radial-gradient(var(--farbe-akzent-hell) 1.3px, transparent 1.7px); }

/* Das Geraet. Innen rechnet alles in em, und die Schriftgroesse folgt der
   Breite des Handys (cqw) - so bleibt der Bildschirm in jeder Groesse gleich
   aufgeteilt, und die Schritte der Liste passen immer. */
.handy { position: relative; width: clamp(250px, 23vw, 300px); aspect-ratio: 9 / 18.5; border-radius: 42px; padding: 9px; background: #10161a; box-shadow: 0 34px 70px rgb(16 22 26 / 30%), inset 0 0 0 2px rgb(255 255 255 / 10%); container-type: inline-size; }
.handy::before { position: absolute; top: 22%; right: -3px; width: 3px; height: 11%; content: ""; border-radius: 0 3px 3px 0; background: #10161a; }
.handy::after { position: absolute; top: 17%; left: -3px; width: 3px; height: 6%; content: ""; border-radius: 3px 0 0 3px; background: #10161a; }
.handy-gehaeuse { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 34px; color: #1b2327; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-size: clamp(11px, 4.5cqw, 14px); line-height: 1.3; text-align: left; }
.handy-gehaeuse::before { position: absolute; z-index: 3; top: 8px; left: 50%; width: 31%; height: 22px; content: ""; border-radius: 999px; background: #10161a; transform: translateX(-50%); }
.handy-statusleiste { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 8px 20px 0 26px; font-size: .82em; font-weight: 700; }
.handy-symbole { display: inline-flex; align-items: flex-end; gap: 2px; }
.handy-symbole i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.handy-symbole i:nth-child(1) { height: 5px; }
.handy-symbole i:nth-child(2) { height: 7px; }
.handy-symbole i:nth-child(3) { height: 9px; }
.handy-symbole b { display: block; width: 18px; height: 9px; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 3px; background: currentColor; box-shadow: inset 0 0 0 1px #fff, inset -6px 0 0 #fff; }
.handy-inhalt { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: .8em; min-height: 0; padding: .6em .95em 1em; }

.handy-suchfeld { display: flex; align-items: center; gap: .55em; min-height: 2.7em; margin-top: .4em; border: 1px solid #e0e4e7; border-radius: 999px; padding: 0 1em; background: #fff; box-shadow: 0 2px 10px rgb(16 22 26 / 7%); font-size: .95em; }
.handy-suchfeld .symbol { width: 1.05em; height: 1.05em; flex: 0 0 auto; color: #6b757b; }
.handy-suchtext { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.handy-cursor { width: 1.5px; height: 1.15em; flex: 0 0 auto; margin-left: -.4em; background: var(--farbe-primaer); }
.handy-reiter { display: flex; gap: 1.15em; border-bottom: 1px solid #eceff1; padding: 0 .3em; color: #6b757b; font-size: .8em; }
.handy-reiter span { padding-bottom: .5em; }
.handy-reiter-aktiv { color: var(--farbe-primaer); font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; }

/* Die Liste: Plaetze fester Hoehe (--schritt), jeder Eintrag absolut auf
   seinem Platz. Bewegt wird nur transform - der Platz im Markup bleibt. */
.handy-liste { --schritt: 6.3em; position: relative; flex: 0 0 auto; height: calc(4 * var(--schritt)); margin: 0; padding: 0; list-style: none; }
.handy-liste--3 { --schritt: 5.9em; height: calc(3 * var(--schritt)); }
.handy-buehne--ki .handy-liste--3 { --schritt: 6.9em; }
.handy-treffer { position: absolute; top: calc(var(--platz, 0) * var(--schritt)); right: 0; left: 0; display: grid; grid-template-columns: 2em minmax(0, 1fr); align-content: start; column-gap: .65em; height: calc(var(--schritt) - .6em); border-radius: .85em; padding: .6em .75em; background: #fff; }
.handy-treffer--a { --platz: 1; }
.handy-treffer--b { --platz: 2; }
.handy-treffer--c { --platz: 3; }
.handy-treffer--eigen { z-index: 2; background: #f2f7f5; background: color-mix(in srgb, var(--farbe-primaer) 7%, #fff); box-shadow: 0 0 0 1.5px var(--farbe-primaer), 0 12px 24px rgb(16 22 26 / 14%); }
.handy-treffer--eigen::after { position: absolute; inset: -.3em; content: ""; border: 2px solid var(--farbe-akzent); border-radius: 1.1em; opacity: 0; pointer-events: none; }
.handy-favicon { display: grid; grid-row: span 3; place-items: center; width: 2em; height: 2em; border-radius: 50%; color: #fff; background: #e6e9eb; font-weight: 800; }
.handy-treffer--eigen .handy-favicon { background: var(--farbe-primaer); }
.handy-domain { overflow: hidden; color: #4f585d; font-size: .74em; white-space: nowrap; text-overflow: ellipsis; }
.handy-titel { overflow: hidden; color: var(--farbe-primaer-dunkel); font-size: .98em; white-space: nowrap; text-overflow: ellipsis; }
.handy-text { display: -webkit-box; overflow: hidden; color: #5b656a; font-size: .78em; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.handy-strich { display: block; height: .55em; margin: .32em 0; border-radius: 999px; background: #e6e9eb; }
.handy-strich--kurz { width: 42%; }
.handy-strich--mittel { width: 68%; }
.handy-strich--lang { width: 94%; }
.handy-mehr { padding: 0 .75em 0 3.4em; opacity: .6; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* Faehnchen "Platz n": die Ziffern stehen untereinander, das Fenster zeigt
   eine. --letzte ist die Nummer der Zeile mit der 1. */
.handy-rang { position: absolute; z-index: 1; top: -.75em; right: .75em; display: inline-flex; align-items: center; gap: .3em; border-radius: 999px; padding: .2em .65em; color: var(--farbe-text); background: var(--farbe-akzent); box-shadow: 0 4px 12px rgb(16 22 26 / 18%); font-size: .8em; font-weight: 800; line-height: 1.25; }
.handy-rang-fenster { display: inline-block; height: 1.25em; overflow: hidden; }
.handy-rang-ziffern { --letzte: 3; display: flex; flex-direction: column; transform: translateY(calc(var(--letzte) * -1.25em)); }
.handy-liste--3 .handy-rang-ziffern { --letzte: 2; }
.handy-rang-ziffern b { display: block; height: 1.25em; }

/* Kartenansicht: eine gezeichnete Stadt, Stecknadeln, Firmeneintraege. */
.handy-karte { position: relative; flex: 0 0 auto; height: 12em; overflow: hidden; border-radius: .9em; }
.handy-karte-bild { display: block; width: 100%; height: 100%; }
.handy-karte-grund { fill: #eef1ea; }
.handy-karte-park { fill: #d4e8cd; }
.handy-karte-wasser { fill: #cde2ee; }
.handy-karte-block { fill: #e2e5e0; }
.handy-karte-strasse { fill: none; stroke: #fff; stroke-width: 7; }
.handy-karte-gasse { fill: none; stroke: #fff; stroke-width: 3.5; }
.handy-pin { position: absolute; width: 1.35em; height: 1.35em; border-radius: 50% 50% 50% 0; background: #9aa4aa; transform: translate(-50%, -100%) rotate(-45deg); }
.handy-pin::after { position: absolute; inset: 30%; content: ""; border-radius: 50%; background: #fff; }
.handy-pin--eigen { z-index: 2; width: 1.9em; height: 1.9em; background: var(--farbe-primaer); box-shadow: 0 6px 14px rgb(16 22 26 / 25%); }
.handy-pin-puls { position: absolute; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--farbe-primaer); opacity: .2; transform: translate(-50%, -50%); }
.handy-treffer--ort, .handy-treffer--ki { grid-template-columns: minmax(0, 1fr); }
.handy-zeile { overflow: hidden; color: #5b656a; font-size: .78em; white-space: nowrap; text-overflow: ellipsis; }
.handy-knoepfe { display: flex; gap: .4em; margin-top: .45em; }
.handy-knoepfe span { border: 1px solid #dde2e5; border-radius: 999px; padding: .12em .6em; color: var(--farbe-primaer-dunkel); font-size: .7em; font-weight: 700; }
.handy-knoepfe--leer span { width: 3.6em; height: 1.45em; border-color: #eceff1; padding: 0; background: #f4f6f7; }

/* KI-Antwort: Frage, drei Punkte "denkt nach", Antwort mit Empfehlungen. */
.handy-ki-kopf { display: flex; align-items: center; gap: .45em; margin-top: .5em; border-bottom: 1px solid #eceff1; padding-bottom: .6em; font-weight: 800; }
.handy-ki-kopf .symbol { width: 1.25em; height: 1.25em; color: var(--farbe-primaer); }
.handy-blase { align-self: flex-end; max-width: 86%; margin: 0; border-radius: 1.1em 1.1em .3em; padding: .65em .9em; color: #fff; background: var(--farbe-primaer); font-size: .86em; line-height: 1.35; }
/* Nimmt keinen Platz: die Antwort legt sich spaeter genau dorthin. */
.handy-denkt { display: flex; align-items: center; gap: .3em; height: 1.9em; margin-bottom: -1.9em; padding-left: .3em; opacity: 0; }
.handy-denkt i { width: .45em; height: .45em; border-radius: 50%; background: #9aa4aa; }
.handy-antwort { display: flex; flex-direction: column; gap: .75em; }
.handy-antwort-kopf { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .5em; align-items: start; }
.handy-antwort-kopf .symbol { width: 1.3em; height: 1.3em; color: var(--farbe-primaer); }
.handy-quelle { display: inline-block; justify-self: start; margin-top: .45em; border-radius: 999px; padding: .12em .6em; color: var(--farbe-primaer-dunkel); background: #e7f0ed; background: color-mix(in srgb, var(--farbe-primaer) 12%, #fff); font-size: .68em; font-weight: 700; }
.handy-quellen { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; color: #6b757b; font-size: .75em; }
.handy-quellen .handy-quelle { margin: 0; font-size: .92em; }
.handy-quelle:empty { width: 4.6em; height: 1.45em; background: #f0f2f3; }

/* Abzeichen, Portrait und Hinweis rund um das Handy. Das Abzeichen liegt
   unten ueber den grauen Platzhaltern - oben saesse es auf dem eigenen
   Eintrag, um den es geht. */
.handy-abzeichen { position: absolute; z-index: 3; bottom: 24%; left: 0; display: grid; max-width: 13rem; margin: 0; border-radius: 1rem; padding: .75rem 1rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: 0 16px 36px rgb(16 22 26 / 18%); text-align: left; }
.handy-abzeichen strong { color: var(--farbe-primaer); font-family: var(--schrift-titel); font-size: 1.6rem; line-height: 1.1; }
.handy-abzeichen span { color: var(--farbe-ruhig); font-size: .82rem; line-height: 1.3; }
.handy-buehne--mit-bild { justify-items: start; }
.handy-buehne--mit-bild .handy { margin-top: 16%; margin-left: 3%; }
.handy-buehne--mit-bild .handy-abzeichen { right: 0; bottom: 14%; left: auto; max-width: 11rem; }
.handy-portrait { position: absolute; z-index: -1; top: 0; right: 0; width: 60%; max-width: 330px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: var(--farbe-papier); box-shadow: var(--schatten); }
.handy-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Rechtsbuendig: links liegt das Handy ueber dem Bild. */
.handy-portrait-name { position: absolute; right: 0; bottom: 0; left: 0; display: grid; justify-items: end; margin: 0; padding: 3.5rem 1.1rem 1rem 30%; color: #fff; background: linear-gradient(transparent, rgb(10 14 16 / 78%)); text-align: right; line-height: 1.3; }
.handy-portrait-name span { font-size: .85rem; opacity: .85; }
.handy-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; color: var(--farbe-ruhig); font-size: .78rem; }
.einstieg--dunkel .handy-fuss { color: rgb(255 255 255 / 70%); }
.handy-buehne--mit-bild .handy-fuss { margin-left: 3%; }

.handy-suchtext { animation: handy-tippt 12s steps(var(--zeichen, 20), end) infinite; }
.handy-cursor { animation: handy-cursor 12s linear infinite, handy-blinkt 1s steps(1) infinite; }
.handy-buehne--suche .handy-liste, .handy-buehne--karte .handy-liste, .handy-antwort { animation: handy-blende 12s ease infinite; }
.handy-liste--4 .handy-treffer--eigen { animation: handy-steigt-3 12s ease-in-out infinite; }
.handy-liste--3 .handy-treffer--eigen { animation: handy-steigt-2 12s ease-in-out infinite; }
.handy-treffer--c { animation: handy-weicht-1 12s ease-in-out infinite; }
.handy-treffer--b { animation: handy-weicht-2 12s ease-in-out infinite; }
.handy-treffer--a { animation: handy-weicht-3 12s ease-in-out infinite; }
.handy-liste--4 .handy-rang-ziffern { animation: handy-rang-4 12s ease-in-out infinite; }
.handy-liste--3 .handy-rang-ziffern { animation: handy-rang-3 12s ease-in-out infinite; }
.handy-treffer--eigen::after { animation: handy-glanz 12s ease-out infinite; }
.handy-pin-puls { animation: handy-puls 2.4s ease-out infinite; }
.handy-blase { animation: handy-frage 12s ease infinite; }
.handy-denkt { animation: handy-denkt 12s linear infinite; }
.handy-denkt i { animation: handy-hopst 1s ease-in-out infinite; }
.handy-denkt i:nth-child(2) { animation-delay: .15s; }
.handy-denkt i:nth-child(3) { animation-delay: .3s; }
.handy-abzeichen { animation: handy-schwebt 6s ease-in-out infinite; }

@keyframes handy-tippt {
    0%, 2% { clip-path: inset(0 100% 0 0); }
    13%, 94% { clip-path: inset(0 0 0 0); }
    98%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes handy-cursor {
    0%, 13% { opacity: 0; }
    14%, 93% { opacity: 1; }
    94%, 100% { opacity: 0; }
}
@keyframes handy-blinkt { 50% { visibility: hidden; } }
@keyframes handy-blende {
    0%, 14% { opacity: 0; }
    18%, 92% { opacity: 1; }
    97%, 100% { opacity: 0; }
}
@keyframes handy-steigt-3 {
    0%, 24% { transform: translateY(calc(var(--schritt) * 3)); }
    30%, 42% { transform: translateY(calc(var(--schritt) * 2)); }
    48%, 60% { transform: translateY(var(--schritt)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-steigt-2 {
    0%, 42% { transform: translateY(calc(var(--schritt) * 2)); }
    48%, 60% { transform: translateY(var(--schritt)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-1 {
    0%, 24% { transform: translateY(calc(var(--schritt) * -1)); }
    30%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-2 {
    0%, 42% { transform: translateY(calc(var(--schritt) * -1)); }
    48%, 100% { transform: translateY(0); }
}
@keyframes handy-weicht-3 {
    0%, 60% { transform: translateY(calc(var(--schritt) * -1)); }
    66%, 100% { transform: translateY(0); }
}
@keyframes handy-rang-4 {
    0%, 24% { transform: translateY(0); }
    30%, 42% { transform: translateY(-1.25em); }
    48%, 60% { transform: translateY(-2.5em); }
    66%, 100% { transform: translateY(-3.75em); }
}
@keyframes handy-rang-3 {
    0%, 42% { transform: translateY(0); }
    48%, 60% { transform: translateY(-1.25em); }
    66%, 100% { transform: translateY(-2.5em); }
}
@keyframes handy-glanz {
    0%, 64% { opacity: 0; transform: scale(.97); }
    69% { opacity: 1; transform: scale(1); }
    84%, 100% { opacity: 0; transform: scale(1.04); }
}
@keyframes handy-puls {
    from { opacity: .45; transform: translate(-50%, -50%) scale(.4); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
@keyframes handy-frage {
    0% { opacity: 0; transform: translateY(.6em); }
    3%, 94% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; }
}
@keyframes handy-denkt {
    0%, 4% { opacity: 0; }
    6%, 15% { opacity: 1; }
    17%, 100% { opacity: 0; }
}
@keyframes handy-hopst {
    0%, 100% { opacity: .45; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-.3em); }
}
@keyframes handy-schwebt { 50% { transform: translateY(-8px); } }

/* ---------- Laufschrift ----------
   Mechanik wie beim Logoband: zwei gleiche Listen, Verschiebung um -50 %.
   Jedes Stichwort traegt sein Trennzeichen hinter sich, auch das letzte -
   so sitzt auch an der Nahtstelle zwischen den beiden Listen eines. */
.laufschrift { position: relative; padding: 1.15rem 0; overflow: hidden; color: #fff; background: var(--farbe-primaer-dunkel); }
.laufschrift--primaer { background: var(--farbe-primaer); }
.laufschrift--hell { border-block: 1px solid var(--farbe-linie); color: var(--farbe-text); background: var(--farbe-flaeche); }
.laufschrift-band { overflow: hidden; }
.laufschrift--laufend .laufschrift-band { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.laufschrift-spur { display: flex; }
.laufschrift--laufend .laufschrift-spur { width: max-content; animation: laufschrift var(--laufschrift-dauer, 40s) linear infinite; }
.laufschrift--laufend .laufschrift-band:hover .laufschrift-spur { animation-play-state: paused; }
.laufschrift-liste { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 2.4rem; margin: 0; padding: 0 1rem; list-style: none; }
.laufschrift--laufend .laufschrift-liste { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 2.4rem; padding: 0 2.4rem 0 0; }
.laufschrift-liste li { display: inline-flex; align-items: center; gap: 2.4rem; font-family: var(--schrift-titel); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; white-space: nowrap; }
.laufschrift-liste li::after { content: "\2726"; content: "\2726" / ""; color: var(--farbe-akzent-hell); font-size: .75em; }
.laufschrift--punkt .laufschrift-liste li::after { content: "\2022"; content: "\2022" / ""; font-size: 1em; }
.laufschrift--strich .laufschrift-liste li::after { content: "\2014"; content: "\2014" / ""; font-size: 1em; }
.laufschrift--hell .laufschrift-liste li::after { color: var(--farbe-akzent); }
.laufschrift:not(.laufschrift--laufend) .laufschrift-liste li:last-child::after { display: none; }
.laufschrift .bewegung-pause { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); }

@keyframes laufschrift { to { transform: translateX(-50%); } }

/* ---------- Schaubild ----------
   Reihum leuchtet ein Punkt auf, mit ihm seine Zeile in der Liste und seine
   Linie. Getragen wird das von einer einzigen Zahl, --an (0 bis 1), die je
   Punkt versetzt animiert wird; Farben und Groessen rechnen sich daraus.
   Das Fenster je Punkt ist ein n-tel des Umlaufs, deshalb ein Satz
   Keyframes je Anzahl. Wo @property fehlt, springt --an statt zu gleiten. */
@property --an { syntax: "<number>"; inherits: true; initial-value: 0; }
.schaubild { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.schaubild--kreis { grid-template-columns: minmax(0, 1fr) minmax(300px, .95fr); }
.schaubild-liste { display: grid; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.schaubild:not(.schaubild--kreis) .schaubild-liste { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1rem 2rem; }
.schaubild-liste li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; align-items: start; border-left: 3px solid transparent; border-radius: var(--radius); padding: .8rem 1rem; }
.schaubild-nummer { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--farbe-primaer); background: var(--farbe-flaeche); font-weight: 800; }
.abschnitt--flaeche .schaubild-nummer { background: var(--farbe-papier); }
.abschnitt--dunkel .schaubild-nummer { color: #fff; background: rgb(255 255 255 / 10%); }
.schaubild-liste h3 { margin: .35rem 0 .2rem; font-size: 1.15rem; }
.schaubild-liste p { margin: 0; color: var(--farbe-ruhig); }
.abschnitt--dunkel .schaubild-liste p { color: rgb(255 255 255 / 78%); }
.schaubild-buehne { position: relative; }
.schaubild-grafik { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; }
.schaubild-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.schaubild-ring { fill: none; stroke: var(--farbe-linie); stroke-width: .35; stroke-dasharray: 1 1.4; }
.schaubild-linie { stroke: var(--farbe-primaer); stroke-width: .45; stroke-dasharray: 1.2 2.2; opacity: .45; }
.abschnitt--dunkel .schaubild-linie { stroke: var(--farbe-akzent-hell); }
.schaubild-mitte { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; padding: .8rem; color: #fff; background: var(--farbe-primaer); box-shadow: 0 0 0 .7rem rgb(22 93 80 / 12%), var(--schatten); box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--farbe-primaer) 14%, transparent), var(--schatten); transform: translate(-50%, -50%); font-family: var(--schrift-titel); font-size: clamp(.85rem, 1.5vw, 1.1rem); font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.schaubild-mitte::after { position: absolute; inset: 0; content: ""; border: 2px solid var(--farbe-primaer); border-radius: 50%; opacity: 0; }
.abschnitt--dunkel .schaubild-mitte { color: var(--farbe-text); background: var(--farbe-akzent); }
/* Der Kreis des Punktes sitzt auf dem Ende seiner Linie, die Beschriftung
   darunter. */
.schaubild-knoten { position: absolute; display: grid; justify-items: center; gap: .35rem; width: 8.5rem; transform: translate(-50%, -1.6rem); text-align: center; }
.schaubild-knoten > span { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 2px solid var(--farbe-primaer); border-radius: 50%; color: var(--farbe-primaer); background: var(--farbe-papier); box-shadow: 0 8px 18px rgb(24 32 30 / 10%); font-weight: 800; }
.schaubild-knoten small { color: var(--farbe-text); font-size: .85rem; font-weight: 700; line-height: 1.2; }
.abschnitt--dunkel .schaubild-knoten small { color: #fff; }
.schaubild .bewegung-pause { position: absolute; right: 0; bottom: 0; }
.schaubild--3 { --takt: schaubild-takt-3; }
.schaubild--4 { --takt: schaubild-takt-4; }
.schaubild--5 { --takt: schaubild-takt-5; }
.schaubild--6 { --takt: schaubild-takt-6; }
.schaubild--kreis :is(.schaubild-liste li, .schaubild-knoten) { animation: var(--takt) calc(var(--anzahl) * 2.2s) ease-in-out calc(var(--i) * 2.2s) infinite; }
.schaubild--kreis .schaubild-linie { animation: schaubild-fluss 1.4s linear infinite, var(--takt) calc(var(--anzahl) * 2.2s) ease-in-out calc(var(--i) * 2.2s) infinite; }
.schaubild--kreis .schaubild-mitte::after { animation: schaubild-puls 3.2s ease-out infinite; }
.schaubild--kreis .schaubild-liste li { border-left-color: color-mix(in srgb, var(--farbe-akzent) calc(var(--an) * 100%), transparent); background: color-mix(in srgb, var(--farbe-primaer) calc(var(--an) * 7%), transparent); }
.schaubild--kreis .schaubild-knoten > span { color: color-mix(in srgb, #fff calc(var(--an) * 100%), var(--farbe-primaer)); background: color-mix(in srgb, var(--farbe-primaer) calc(var(--an) * 100%), var(--farbe-papier)); transform: scale(calc(1 + var(--an) * .14)); }
.schaubild--kreis .schaubild-linie { opacity: calc(.4 + var(--an) * .6); stroke-width: calc(.45 + var(--an) * .35); }
/* Wer die Liste liest, soll sie nicht unter der Hand weiterleuchten sehen. */
.schaubild--kreis:hover *, .schaubild--kreis:hover *::after { animation-play-state: paused; }

@keyframes schaubild-takt-3 { 0%, 33%, 100% { --an: 0; } 5%, 28% { --an: 1; } }
@keyframes schaubild-takt-4 { 0%, 25%, 100% { --an: 0; } 4%, 21% { --an: 1; } }
@keyframes schaubild-takt-5 { 0%, 20%, 100% { --an: 0; } 3%, 17% { --an: 1; } }
@keyframes schaubild-takt-6 { 0%, 16.6%, 100% { --an: 0; } 3%, 14% { --an: 1; } }
@keyframes schaubild-fluss { to { stroke-dashoffset: -3.4; } }
@keyframes schaubild-puls {
    from { opacity: .6; transform: scale(1); }
    to { opacity: 0; transform: scale(1.45); }
}

/* ---------- Radar (Einzugsgebiet) ----------
   Ein Strahl dreht sich um den Sitz; jeder Ort leuchtet auf, wenn der
   Strahl ihn trifft. Der Strahl beginnt oben und dreht im Uhrzeigersinn;
   den passenden Verzug je Ort rechnet block-standortliste.php aus. */
.radar { position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 1rem auto; }
.radar-flaeche { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--farbe-linie); border-radius: 50%; background: var(--farbe-papier); }
.abschnitt--dunkel .radar-flaeche { border-color: rgb(255 255 255 / 18%); background: rgb(255 255 255 / 6%); }
.radar-ring { position: absolute; inset: 12%; border: 1px dashed var(--farbe-linie); border-radius: 50%; }
.radar-ring--mitte { inset: 26%; }
.radar-ring--innen { inset: 40%; }
.abschnitt--dunkel .radar-ring { border-color: rgb(255 255 255 / 16%); }
.radar-strahl { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 76%, rgb(22 93 80 / 24%) 100%); background: conic-gradient(from 0deg, transparent 0 76%, color-mix(in srgb, var(--farbe-primaer) 30%, transparent) 100%); animation: radar-dreht var(--umlauf, 8s) linear infinite; }
.radar-mitte { position: absolute; top: 50%; left: 50%; display: grid; justify-items: center; gap: .35rem; margin: 0; transform: translate(-50%, -.55rem); font-family: var(--schrift-titel); font-weight: 700; line-height: 1.2; text-align: center; }
.radar-punkt { position: relative; width: 1.1rem; height: 1.1rem; border: 3px solid var(--farbe-papier); border-radius: 50%; background: var(--farbe-primaer); box-shadow: 0 4px 10px rgb(24 32 30 / 25%); }
.radar-punkt::after { position: absolute; inset: -3px; content: ""; border-radius: 50%; background: var(--farbe-primaer); opacity: 0; animation: radar-puls 2.4s ease-out infinite; }
.radar-orte { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.radar-orte li { position: absolute; top: var(--y); left: var(--x); display: grid; justify-items: center; gap: .15rem; width: 8rem; transform: translate(-50%, -.35rem); font-size: .88rem; font-weight: 700; line-height: 1.2; text-align: center; }
.radar-orte li::before { width: .7rem; height: .7rem; margin-bottom: .2rem; content: ""; border-radius: 50%; background: var(--farbe-akzent); box-shadow: 0 0 0 3px var(--farbe-papier); animation: radar-blip var(--umlauf, 8s) ease-out var(--verzug, 0s) infinite; }
.radar-orte small { color: var(--farbe-ruhig); font-size: .76rem; font-weight: 400; }
.abschnitt--dunkel .radar-orte small { color: rgb(255 255 255 / 70%); }
.radar .bewegung-pause { position: absolute; right: 0; bottom: 0; }

@keyframes radar-dreht { to { transform: rotate(1turn); } }
@keyframes radar-puls {
    from { opacity: .5; transform: scale(1); }
    to { opacity: 0; transform: scale(3); }
}
@keyframes radar-blip {
    0% { transform: scale(1.9); }
    22%, 100% { transform: scale(1); }
}

/* ---------- Einblenden beim Hineinscrollen ----------
   Greift nur, wenn website.js "wartet" gesetzt hat - also mit Skript und
   ohne "Bewegung reduzieren". Ohne Skript steht alles von Anfang an da. */
[data-einblenden="wartet"] :is(.ablaufkarte, .ablaufliste > li) { opacity: 0; transform: translateY(1.5rem); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 130ms); }
[data-einblenden="wartet"][data-sichtbar] :is(.ablaufkarte, .ablaufliste > li) { opacity: 1; transform: none; }
[data-einblenden="wartet"] .verlauf-kurve { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.35, .7, .2, 1); }
[data-einblenden="wartet"][data-sichtbar] .verlauf-kurve { clip-path: inset(0 0 0 0); }
/* Gedruckt wird, was da ist - auch das, wohin noch niemand gescrollt hat. */
@media print {
    [data-einblenden="wartet"] :is(.ablaufkarte, .ablaufliste > li) { opacity: 1; transform: none; }
    [data-einblenden="wartet"] .verlauf-kurve { clip-path: none; }
}

/* ---------- Darstellungen ----------
   Dieselben Inhalte, anders angeordnet. Die Wahl steht als data-darstellung
   am Abschnitt, gesetzt vom Renderer. Die erste Darstellung eines Bausteins
   braucht keine Regel: sie ist das Aussehen von vor 2.1.0.

   Jede Regel haengt zusaetzlich an der inneren Klasse des Bausteins.
   "raster" gibt es beim Logoband, bei der Galerie und bei den Rezensionen -
   ohne die Klasse traefe eine Regel alle drei. */

/* Logoband als Kacheln: alle Logos auf einen Blick, nichts bewegt sich. */
.logoleiste[data-darstellung="raster"] .logoleiste-innen { display: block; }
.logoleiste[data-darstellung="raster"] .logoleiste-titel { margin-bottom: 1.25rem; text-align: center; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste li { display: grid; place-items: center; min-height: 88px; border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 1rem; background: var(--farbe-papier); }
.logoleiste[data-darstellung="raster"] .logoleiste-liste img { max-height: 44px; transition: filter .2s, opacity .2s; }
.logoleiste[data-darstellung="raster"] .logoleiste-liste li:hover img { filter: none; opacity: 1; }

/* Logoband als ruhige Reihe: mittig, ohne Kacheln, ohne Bewegung. */
.logoleiste[data-darstellung="reihe"] .logoleiste-innen { flex-direction: column; gap: 1rem; text-align: center; }
.logoleiste[data-darstellung="reihe"] .logoleiste-band { width: 100%; }
.logoleiste[data-darstellung="reihe"] .logoleiste-liste { justify-content: center; }

/* Kennzahlen als Kacheln: jede Zahl auf eigener Flaeche, der Wert zuerst. */
[data-darstellung="kacheln"] .kennzahlenleiste { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
[data-darstellung="kacheln"] .kennzahl { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .35rem; border-left: 0; border-radius: var(--radius); padding: 1.5rem; background: var(--farbe-flaeche); }
.abschnitt--flaeche[data-darstellung="kacheln"] .kennzahl { background: var(--farbe-papier); box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
.abschnitt--dunkel[data-darstellung="kacheln"] .kennzahl { background: rgb(255 255 255 / 8%); }

/* Kennzahlen gross: die Zahl ist die Botschaft - mittig, mit Trennstrichen. */
[data-darstellung="gross"] .kennzahlen-titel { max-width: none; text-align: center; }
[data-darstellung="gross"] .kennzahlenleiste { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; text-align: center; }
[data-darstellung="gross"] .kennzahl { display: flex; flex-direction: column-reverse; gap: .5rem; border-left: 0; padding: .5rem 1.5rem; }
[data-darstellung="gross"] .kennzahl + .kennzahl { border-left: 1px solid var(--farbe-linie); }
[data-darstellung="gross"] .kennzahl dd { color: var(--farbe-primaer); font-size: clamp(2.6rem, 6vw, 4.2rem); }
.abschnitt--dunkel[data-darstellung="gross"] .kennzahl dd { color: var(--farbe-akzent-hell); }

/* Leistungen als einzelne Karten: Abstand statt Trennlinien. */
[data-darstellung="karten"] .leistungsraster { gap: 1.5rem; background: none; }
[data-darstellung="karten"] .leistung { border-top: 4px solid var(--farbe-akzent); border-radius: var(--radius); box-shadow: var(--schatten); }

/* Leistungen als Liste: eine Zeile je Leistung - Nummer, Titel, Text. */
[data-darstellung="liste"] .leistungsraster { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--farbe-linie); background: none; }
[data-darstellung="liste"] .leistung { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.6fr); align-items: baseline; column-gap: 2rem; min-height: 0; border-bottom: 1px solid var(--farbe-linie); padding: 1.5rem 0; background: none; }
[data-darstellung="liste"] .leistung h3, [data-darstellung="liste"] .leistung p { margin: 0; }
[data-darstellung="liste"] .leistung .textlink { grid-column: 3; margin-top: .6rem; }
.abschnitt--dunkel[data-darstellung="liste"] .leistung p { color: rgb(255 255 255 / 78%); }

/* Galerie als Mosaik: das erste Bild gross, die anderen darum herum. Erst ab
   Tablet-Breite - in einer einspaltigen Galerie gaebe es keine zweite
   Spalte, ueber die der Aufmacher reichen koennte, und das Bildformat soll
   dort wieder gelten. */
@media (min-width: 761px) {
    [data-darstellung="mosaik"] .galerie { grid-auto-flow: dense; }
    [data-darstellung="mosaik"] .galerie figure:first-child { display: flex; flex-direction: column; grid-column: span 2; grid-row: span 2; }
    [data-darstellung="mosaik"] .galerie figure:first-child img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
}

/* Galerie als Band: seitlich blaettern, ein Bild rastet ein. */
[data-darstellung="band"] .galerie { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 32%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; }
[data-darstellung="band"] .galerie figure { scroll-snap-align: start; }

/* Fragen in zwei Spalten - fuer lange Listen, die sonst endlos werden. */
[data-darstellung="zweispaltig"] .lesebreite { max-width: none; }
[data-darstellung="zweispaltig"] .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 3rem; border-top: 0; }
[data-darstellung="zweispaltig"] .faq-eintrag:nth-child(-n + 2) { border-top: 1px solid var(--farbe-linie); }

/* Fragen als Karten. */
[data-darstellung="karten"] .faq { display: grid; gap: .75rem; border-top: 0; }
[data-darstellung="karten"] .faq-eintrag { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: 0 1.25rem; background: var(--farbe-papier); }
[data-darstellung="karten"] .faq-eintrag[open] { box-shadow: 0 6px 20px rgb(24 32 30 / 6%); }
[data-darstellung="karten"] .faq-eintrag summary::after { right: 0; }

/* Rezensionen im Raster: alle auf einmal, nichts zu blaettern. Die
   Blaetterknoepfe bleiben verborgen, weil nichts ueberlaeuft. */
[data-darstellung="raster"] .rezensionen-liste { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }

/* Team kompakt: runde Bilder, mittig, mehr Personen auf einen Blick. */
[data-darstellung="kompakt"] .team { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2rem 1.5rem; text-align: center; }
[data-darstellung="kompakt"] .person-bild img { width: 128px; border-radius: 50%; margin-inline: auto; }
[data-darstellung="kompakt"] .person h3 { font-size: 1.1rem; }
[data-darstellung="kompakt"] .person .pillen { justify-content: center; }

/* Zitat zentriert: ein grosses Anfuehrungszeichen statt der Kante. */
[data-darstellung="zentriert"] .zitat { border-left: 0; padding: 0; text-align: center; }
[data-darstellung="zentriert"] .zitat::before { display: block; height: 3.4rem; content: "\201C"; color: var(--farbe-akzent); font-family: var(--schrift-titel); font-size: 5.5rem; line-height: 1; }
[data-darstellung="zentriert"] .zitat p { font-size: clamp(1.5rem, 3vw, 2rem); }

/* Zitat als Karte - mit eigener Textfarbe, sonst waere es auf dunklem
   Grund weiss auf weiss. */
[data-darstellung="karte"] .zitat { border-left: 0; border-top: 5px solid var(--farbe-akzent); border-radius: var(--radius); padding: 2rem 2.25rem; color: var(--farbe-text); background: var(--farbe-papier); box-shadow: var(--schatten); }

/* Schnellkontakt ohne Telefonnummer: ein Knopf ueber die ganze Breite. */
.mobil-cta--einzeln { grid-template-columns: 1fr; }

/* ---------- 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, .schaubild--kreis { grid-template-columns: 1fr; }
    .gmb-vergleich--gedreht .gmb-widget { order: 0; }
    .einstieg--handy .einstieg-raster { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 2rem; }
}

@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; }

    /* Handy im Startbereich: unter den Text, etwas kleiner. Das Abzeichen
       rutscht nach unten, damit es nicht ueber der Liste liegt. */
    .einstieg--handy .einstieg-raster { grid-template-columns: 1fr; gap: 2.5rem; }
    .einstieg--handy h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
    .handy { width: min(270px, 76vw); }
    .handy-abzeichen { bottom: 16%; padding: .6rem .8rem; }
    .handy-abzeichen strong { font-size: 1.3rem; }
    .handy-portrait { width: 58%; }
    /* Hier ueberdeckt das Handy den unteren Teil des Bildes - der Name
       wandert an den oberen Rand. */
    .handy-portrait-name { top: 0; bottom: auto; padding: 1rem 1rem 3rem 20%; background: linear-gradient(rgb(10 14 16 / 72%), transparent); }
    .kontaktzeile { margin-bottom: 1.25rem; font-size: .82rem; }

    /* Schaubild und Radar: kleiner, die Beschriftung knapper - die Liste
       daneben traegt die Titel ohnehin. */
    .schaubild-knoten { width: 6rem; transform: translate(-50%, -1.3rem); }
    .schaubild-knoten > span { width: 2.6rem; height: 2.6rem; font-size: .85rem; }
    .schaubild-knoten small { font-size: .72rem; }
    .schaubild-mitte { font-size: .8rem; }
    .radar { width: min(100%, 360px); }
    .radar-orte li { width: 6.5rem; font-size: .78rem; }
    .radar-orte small { display: none; }

    /* Darstellungen auf dem Handy */
    [data-darstellung="gross"] .kennzahlenleiste { grid-template-columns: 1fr; }
    [data-darstellung="gross"] .kennzahl + .kennzahl { border-left: 0; border-top: 1px solid var(--farbe-linie); padding-top: 1.25rem; }
    [data-darstellung="liste"] .leistung { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: .5rem; }
    [data-darstellung="liste"] .leistung p, [data-darstellung="liste"] .leistung .textlink { grid-column: 2; }
    [data-darstellung="band"] .galerie { grid-auto-columns: 82%; }
    [data-darstellung="zweispaltig"] .faq { grid-template-columns: 1fr; }
    [data-darstellung="zweispaltig"] .faq-eintrag:nth-child(2) { border-top: 0; }
}

/* Angehalten (Knopf) oder ausser Sicht (website.js): alles in der Grafik
   steht - an der Stelle, an der es gerade war. Am Ende des Stilblatts, damit
   es jede Animation darueber ueberstimmt. */
[data-bewegung][data-angehalten], [data-bewegung][data-angehalten] *, [data-bewegung][data-angehalten] *::before, [data-bewegung][data-angehalten] *::after,
[data-bewegung][data-ruht], [data-bewegung][data-ruht] *, [data-bewegung][data-ruht] *::before, [data-bewegung][data-ruht] *::after { animation-play-state: paused !important; }

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

    /* Nichts bewegt sich - also braucht es keinen Knopf zum Anhalten. */
    .bewegung-pause { display: none !important; }

    /* Die Laufschrift steht als umbrechende Reihe, ohne die Wiederholungen,
       die nur fuer das Laufen da waren. */
    .laufschrift--laufend .laufschrift-band { -webkit-mask-image: none; mask-image: none; }
    .laufschrift--laufend .laufschrift-spur { width: auto; }
    .laufschrift--laufend .laufschrift-liste { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: .5rem; padding: 0 1rem; }
    .laufschrift--laufend .laufschrift-liste[aria-hidden], .laufschrift--laufend .laufschrift-liste li[aria-hidden] { display: none; }
    .laufschrift--laufend .laufschrift-liste li:is(:last-child, :has(+ li[aria-hidden]))::after { display: none; }
}