/* 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); }

/* ---------- 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 { 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; }

    /* 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; }
}

/* ---------- Interaktionen: sanfte Bewegung beim Ueberfahren ---------- */
a, .knopf, .textlink, .karte, .leistung, .ablaufkarte, .rezension, .sitzkarte,
.leistungspaket, .kennzahl, .akzentliste li, .faq-eintrag summary {
    transition: transform .3s ease, box-shadow .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.knopf:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / 20%); }
.knopf:active { transform: translateY(-1px); }
.textlink:hover { color: var(--farbe-akzent); }

.karte:hover,
[data-darstellung="karten"] .leistung:hover,
.ablaufkarte:hover,
.rezension:hover,
.leistungspaket:hover,
[data-darstellung="karten"] .faq-eintrag:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgb(0 0 0 / 14%);
}
.sitzkarte:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgb(0 0 0 / 16%); }
.kennzahl:hover { transform: translateY(-4px); }
.akzentliste li:hover { border-color: var(--farbe-primaer); padding-left: 1.5rem; }
.faq-eintrag summary:hover { color: var(--farbe-primaer); }

.galerie figure, .person-bild { overflow: hidden; border-radius: var(--radius); }
.galerie img, .person-bild img, .textbild-bild img, .einstieg-bild img, .einstieg-bildbreit img {
    transition: transform .5s ease;
}
.galerie figure:hover img,
.person:hover .person-bild img { transform: scale(1.07); }
.textbild-bild:hover img,
.einstieg-bild:hover img,
.einstieg-bildbreit:hover img { transform: scale(1.03); }

.hauptnavigation > a:not(.knopf) { position: relative; }
.hauptnavigation > a:not(.knopf)::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
    background: var(--farbe-akzent); transition: right .25s ease;
}
.hauptnavigation > a:not(.knopf):hover::after,
.hauptnavigation > a:not(.knopf)[aria-current="page"]::after { right: 0; }

.seitenkopf { transition: box-shadow .3s ease; }
.seitenkopf[data-gescrollt] { box-shadow: 0 10px 30px rgb(0 0 0 / 8%); }

[data-einblenden] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-einblenden][data-sichtbar] { opacity: 1; transform: none; }

.globus-buehne { display: flex; justify-content: center; margin-top: 3.5rem; }
.globus-rahmen {
    position: relative;
    width: min(360px, 80vw);
    aspect-ratio: 1;
    filter: drop-shadow(0 24px 44px rgb(0 0 0 / 18%));
}
.globus-rahmen canvas { width: 100%; height: 100%; cursor: pointer; touch-action: none; }

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