/* ==========================================================================
   Skyview Coburg: Gestaltung der ganzen Website
   Aufbau: 1 Schriften · 2 Farben und Maße · 3 Grundlagen · 4 Kopfzeile · 5 Footer · 6 Knöpfe
           7 Hero · 8 Abschnitte und Linienraster · 9 Haus-Szene · 10 Landung · 11 Leinwand · 12 Bewegung
   Farben und Abstände nur über die Variablen in :root ändern.
   Ebenen: Hintergründe (0) < 3D-Leinwand (1) < Inhalte der Abschnitte (2) < Footer (3) < Kopfzeile (50).
   Die Drohne fliegt so über den Hintergründen und unter den Texten.
   ========================================================================== */

/* 1 Schriften (lokal, SIL Open Font License, Lizenzen in assets/fonts/) */
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-variabel-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-variabel-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* 2 Farben und Maße */
:root {
  /* Marke (gemessen an der Visitenkarte) */
  --navy: #021428;
  --navy-tief: #010914;
  --blau: #01B4FE;            /* Markenblau: Knöpfe, Akzente. Auf hellem Grund nie als Text (nur 2,3:1) */
  --blau-hover: #3CC6FF;
  --blau-text: #0069A8;       /* Links auf hellem Grund, 5,8:1 */
  /* Helle Welt */
  --grund: #F6F8FA;
  --weiss: #FCFDFE;
  --linie: #D3DBE3;           /* haarfeine Rasterlinien */
  --tinte: #0B1B2B;           /* Fließtext, 16,4:1 */
  --tinte-2: #3F5264;         /* Nebentext, 7,6:1 */
  --tinte-3: #5B6B7B;         /* leise Angaben, 5,2:1 */
  --grau-leitsatz: #7D8C9C;   /* noch nicht eingefärbte Wörter der Leitsätze (große Schrift), 3,2:1 */
  --gut: #1E7A46;               /* Häkchen und Bestätigung: 5,0:1 auf dem Seitengrund, 5,3:1 auf Weiß */
  --feldrand: #708193;         /* Rahmen der Formularfelder: 3,8:1 gegen Seite, 3,9:1 gegen Feld (WCAG 1.4.11) */
  --auf-navy: #F3F8FC;
  --auf-navy-2: #A9BED1;      /* 10,5:1 auf Navy */
  /* Maße */
  --rand: clamp(16px, 4vw, 40px);
  --inhalt: 1360px;
  --kopf-hoch: 72px;          /* Kopfzeile oben auf der Seite */
  --kopf-klein: 52px;         /* Kopfzeile nach dem Hero (seite.js setzt .kompakt) */
  --kopf-h: var(--kopf-hoch); /* aktuelle Höhe */
  --radius: 6px;
  --abstand: clamp(56px, 7.2vw, 108px);   /* Abstand ober- und unterhalb jedes Abschnitts (29.09.2026 um rund ein Drittel verringert) */
  /* Schriften */
  --schlagwort: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* 3 Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); scroll-padding-bottom: 16px; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.65 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--blau-text); text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 3px; }
/* Überschriften trennen nur an gesetzten Trennstellen (&shy;): Safari kennt keine Mindestwortlänge und trennte
   sonst „Da-ches“, Chrome wählte eigene Stellen („Verantwor-tungsbewusst“) */
h1, h2, h3 { margin: 0; font-weight: 400; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
p, ul, ol { margin: 0; }
address { font-style: normal; }
.nur-lesbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprunglink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--weiss); color: var(--tinte); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; text-decoration: none; }
.sprunglink:focus { top: 12px; }
.huelle { width: min(100% - 2 * var(--rand), var(--inhalt)); margin-inline: auto; }

/* Schrift-Mischung: kurze Schlagworte in Montserrat (wie das Logo), lange Sätze groß in Inter Light */
.schlagwort { font-family: var(--schlagwort); font-weight: 765; letter-spacing: -0.02em; line-height: 1.04; }
.satz-gross { font-family: var(--text); font-weight: 300; letter-spacing: -0.025em; line-height: 1.14; }

/* 4 Kopfzeile (Navy, klebt oben) */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--auf-navy); transition: margin-bottom .35s var(--ease-out); }
.kopf-innen { height: var(--kopf-h); display: flex; align-items: center; justify-content: space-between; gap: clamp(10px, 3vw, 24px); transition: height .35s var(--ease-out); }
.kopf-logo { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 2px; }
.kopf-logo img { height: 38px; width: auto; transition: height .35s var(--ease-out); }
/* Nach dem Hero flacher (Runde 3, N2). Der Rand darunter wächst um genau das, was die Kopfzeile schrumpft: So bleibt ihre
   Höhe im Fluss der Seite gleich, und nichts darunter springt. */
html.kompakt { --kopf-h: var(--kopf-klein); }
html.kompakt .kopf { margin-bottom: calc(var(--kopf-hoch) - var(--kopf-klein)); }
html.kompakt .kopf-logo img { height: 30px; }
.kopf-nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 30px); }
.kopf-nav ul { list-style: none; padding: 0; display: flex; gap: clamp(14px, 1.8vw, 28px); }
.kopf-nav ul a { display: block; color: var(--auf-navy-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; padding: 10px 2px; border-bottom: 1px solid transparent; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.kopf-nav ul a:hover, .kopf-nav ul a[aria-current="page"] { color: #fff; border-bottom-color: var(--blau); }
.kopf a:focus-visible, .kopf button:focus-visible, .menue a:focus-visible { outline-color: #fff; }
.kopf-logo:focus-visible { outline-offset: 6px; }
.kopf-nav .kopf-knopf-mobil, .menue-knopf, .menue-link { display: none; }
.kopf-knopf-mobil .lang { display: none; }
@media (min-width: 600px) { .kopf-knopf-mobil .kurz { display: none; } .kopf-knopf-mobil .lang { display: inline; } }
@media (max-width: 1060px) {
  .kopf-nav ul, .kopf-nav .knopf-kopf { display: none; }
  .kopf-nav .kopf-knopf-mobil { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
  .js .menue-knopf { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(169,190,209,.35); border-radius: var(--radius); background: transparent; color: #fff; cursor: pointer; }
  .menue-knopf svg { width: 22px; height: 22px; }
  .menue-knopf .auf, .menue-knopf[aria-expanded="true"] .zu { display: none; }
  .menue-knopf[aria-expanded="true"] .auf { display: block; }
  html:not(.js) .menue-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #fff; font-weight: 600; }
  .kopf-logo img { height: 32px; }
  html.kompakt .kopf-logo img { height: 27px; }
}
/* Mobilmenü als Tafel unter der Kopfzeile (ohne JavaScript führt „Menü“ zur Navigation im Footer) */
.menue { position: fixed; inset: var(--kopf-h) 0 auto 0; z-index: 49; max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto; background: var(--navy); color: var(--auf-navy); padding: 8px var(--rand) 28px; border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 40px -20px rgba(1,9,20,.6); overscroll-behavior: contain; }
.menue[hidden] { display: none; }
.menue ul { list-style: none; padding: 0; }
.menue li + li { border-top: 1px solid rgba(255,255,255,.08); }
.menue ul a { display: flex; align-items: center; min-height: 56px; color: #fff; text-decoration: none; font: 500 1.25rem/1.2 var(--text); }
.menue ul a[aria-current="page"] { color: var(--blau); }
.menue .knopf { width: 100%; margin-top: 18px; }
.menue.auf { animation: menue-auf .32s var(--ease-expo) both; }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-8px); } }

/* 5b Anfrage-Leiste am Handy (Runde 3, G1). Steht im Footer, liegt aber fest am unteren Rand; seite.js nimmt hidden weg
   und setzt .an, wenn sie zu sehen sein soll. Unsichtbar ist sie auch für die Tastatur nicht erreichbar. */
.anfrage-leiste { display: none; }
@media (max-width: 720px) {
  .anfrage-leiste:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; gap: 8px; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom)); background: rgba(246,248,250,.97); border-top: 1px solid var(--linie); translate: 0 110%; visibility: hidden; transition: translate .45s var(--ease-expo), visibility 0s .45s; }
  .anfrage-leiste.an { translate: 0 0; visibility: visible; transition: translate .45s var(--ease-expo), visibility 0s; }
  .anfrage-leiste .knopf-haupt { flex: 1; min-height: 48px; }
  /* Die Leiste steht im Footer: dessen helle Linkfarbe und Unterstreichung gelten hier nicht */
  .fuss .anfrage-leiste a, .fuss .anfrage-leiste a:hover { text-decoration: none; }
  .fuss .anfrage-leiste .knopf-haupt, .fuss .anfrage-leiste .knopf-haupt:hover { color: var(--navy); }
  .fuss .anfrage-leiste .knopf-leise, .fuss .anfrage-leiste .knopf-leise:hover { color: var(--tinte); }
  .fuss .anfrage-leiste a:focus-visible { outline-color: var(--blau-text); }
  .anfrage-leiste .anfrage-anruf { flex: none; width: 52px; min-height: 48px; padding: 0; }
  .anfrage-leiste .symbol { width: 22px; height: 22px; color: var(--tinte); }
}

/* 5 Footer (Navy) */
.fuss { position: relative; z-index: 3; overflow: hidden; background: var(--navy-tief); color: var(--auf-navy-2); padding: 64px 0 0; font-size: 0.9375rem; }
/* SKYVIEW groß am Ende (Runde 3, E1): kaum heller als der Grund, unten angeschnitten. Reiner Schmuck, deshalb aus dem
   Stylesheet und nicht als Text (sonst prüfen Kontrastmessungen es wie Lesetext; für Vorleseprogramme leer) */
.fuss-wort { display: block; margin-top: clamp(28px, 4vw, 48px); font: 765 calc(min(100vw - 2 * var(--rand), var(--inhalt)) / 4.85)/.78 var(--schlagwort);   /* SKYVIEW ist 4,79 Schriftgrößen breit: füllt die Inhaltsbreite */ letter-spacing: -0.02em; color: #0A1C31; text-align: center; white-space: nowrap; translate: 0 12%; user-select: none; pointer-events: none; }
.fuss-wort::before { content: "SKYVIEW"; content: "SKYVIEW" / ""; }   /* ältere Browser ohne Alternativtext nehmen die erste Angabe */
.fuss-raster { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.fuss img { height: 44px; width: auto; }
.fuss .fuss-satz { margin-top: 16px; max-width: 32ch; }
.fuss h2 { font: 600 0.8125rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.fuss li { min-height: 32px; display: flex; align-items: center; }
.fuss a { color: var(--auf-navy-2); text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss a:focus-visible { outline-color: #fff; }
.fuss-unten { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.875rem; }
/* Agentur-Hinweis (wie ServiceKompass 360): eigene Zeile unter Copyright und Einsatzgebiet, klein und leise. Der Link ist
   nur so breit wie sein Text, 44 px hoch zum Tippen; auf sehr schmalen Handys bricht er in zwei saubere Zeilen. */
.dumos-zeile { flex-basis: 100%; }
.fuss a.dumos { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; font-size: 0.8125rem; }
.dumos-teil { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dumos-zeichen { width: 1.15em; height: auto; opacity: .8; transition: opacity .2s var(--ease-out); }
.dumos:is(:hover, :focus-visible) .dumos-zeichen { opacity: 1; }
@media (max-width: 860px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-raster > :first-child, .fuss-raster > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px), (any-pointer: coarse) {
  .fuss li { min-height: 44px; }
  .fuss li > a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 6 Knöpfe (6 px Rundung; nur der Hauptknopf leuchtet) */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--radius); border: 1px solid transparent; font: 600 1rem/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .2s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .12s var(--ease-out); }
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease-out); }
.knopf-haupt { background: var(--blau); color: var(--navy); box-shadow: 0 0 0 1px rgba(1,180,254,.35), 0 8px 26px -10px rgba(1,150,220,.8), inset 0 1px 0 rgba(255,255,255,.4); }
.knopf-haupt:hover { background: var(--blau-hover); color: var(--navy); box-shadow: 0 0 0 1px rgba(1,180,254,.55), 0 12px 34px -10px rgba(1,150,220,.95), inset 0 1px 0 rgba(255,255,255,.45); }
.knopf-haupt:hover svg { transform: translateX(3px); }
.knopf:active { transform: translateY(1px); }
.knopf-haupt:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.kopf .knopf-haupt:focus-visible, .menue .knopf-haupt:focus-visible { outline-color: #fff; }
.knopf-leise { color: var(--tinte); border-color: #8FA0B1; background: transparent; }
.knopf-leise:hover { border-color: var(--tinte); color: var(--tinte); background: rgba(255,255,255,.5); }
.knopf-kopf { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* 7 Hero: helle Bühne, riesiges blasses SKYVIEW, davor die Drohne; Text und Knöpfe darunter */
.hero { position: relative; min-height: calc(100svh - var(--kopf-hoch)); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 16px var(--rand) 0; }
.hero-buehne { position: relative; min-height: 440px; background: linear-gradient(180deg, #D5DEE6 0%, #E4EAF0 40%, #EFF3F6 72%, #F4F6F8 100%); overflow: hidden; }
.hero-zeile { position: absolute; left: clamp(16px, 2.2vw, 28px); top: clamp(14px, 2vw, 24px); font-size: 0.875rem; font-weight: 500; color: var(--tinte-2); }
.hero-wort { position: absolute; left: 50%; top: 46%; translate: -50% -50%; font-family: var(--schlagwort); font-weight: 765; font-size: clamp(64px, 16.4vw, 290px); line-height: 1; letter-spacing: -0.01em; color: #F2F6F9; text-shadow: 0 -1.5px 0 #fff, 0 1.5px 1px rgba(30,60,90,.22), 0 4px 10px rgba(30,60,90,.07), 0 28px 64px rgba(30,60,90,.14); user-select: none; white-space: nowrap; pointer-events: none; }
/* Standbild der Drohne; das 3D legt sich genau darüber und ersetzt es */
.hero-drohne { position: absolute; left: 50%; top: 51%; width: min(62%, 860px); aspect-ratio: 16 / 9; translate: -50% -50%; pointer-events: none; }
.hero-drohne img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s var(--ease-out); }
.hero-drohne.ist-3d img { opacity: 0; }
/* Später optional: eigenes Drohnenfoto als Bühnenhintergrund (siehe Kommentar in index.html) */
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-fuss { position: relative; z-index: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 48px; padding: clamp(22px, 3vw, 36px) 0 clamp(24px, 3.5vw, 44px); }
.hero-fuss { padding-inline: max(0px, (100% - var(--inhalt)) / 2); }
.hero-text { max-width: 44rem; }
.hero-titel { font-size: clamp(2rem, 3.6vw, 3.25rem); color: var(--tinte); }
.hero-unter { margin-top: 12px; max-width: 46ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; font-weight: 300; color: var(--tinte-2); }
.hero-aktion { display: flex; flex-wrap: wrap; gap: 12px; }
/* Auftakt im Hero (Runde 3, H1b). Das Kopf-Skript setzt .auftakt einmal je Sitzung: SKYVIEW steigt Buchstabe für Buchstabe
   auf, die Überschrift Wort für Wort, beide werden scharf, die Drohne wird scharf. Nichts startet ganz unsichtbar, sonst
   zählte die Ladezeit-Messung (größtes Element) erst, wenn es da ist. */
.auftakt .hero-wort > span, .auftakt .hero-titel > span { display: inline-block; }
.auftakt .hero-wort > span { animation: auftakt-buchstabe 1s var(--ease-expo) both; }
.auftakt .hero-wort > span:nth-child(2) { animation-delay: 55ms; }
.auftakt .hero-wort > span:nth-child(3) { animation-delay: 110ms; }
.auftakt .hero-wort > span:nth-child(4) { animation-delay: 165ms; }
.auftakt .hero-wort > span:nth-child(5) { animation-delay: 220ms; }
.auftakt .hero-wort > span:nth-child(6) { animation-delay: 275ms; }
.auftakt .hero-wort > span:nth-child(7) { animation-delay: 330ms; }
.auftakt .hero-titel > span { animation: auftakt-wort .9s var(--ease-expo) .3s both; }
.auftakt .hero-titel > span:nth-child(2) { animation-delay: .38s; }
.auftakt .hero-titel > span:nth-child(3) { animation-delay: .46s; }
.auftakt .hero-drohne img { animation: auftakt-drohne 1.2s var(--ease-expo) .3s both; }
.auftakt .hero-unter, .auftakt .hero-aktion { animation: auftakt-rein .8s var(--ease-out) .65s both; }
@keyframes auftakt-buchstabe { from { opacity: .2; transform: translateY(38%); filter: blur(6px); } }
@keyframes auftakt-wort { from { opacity: .3; transform: translateY(30%); filter: blur(8px); } }
@keyframes auftakt-drohne { from { filter: blur(10px); scale: .93; translate: 0 18px; } }
@keyframes auftakt-rein { from { opacity: 0; translate: 0 10px; } }
/* Tablet hochkant: niedrigere Bühne, sonst stünde die Drohne klein in viel leerem Verlauf */
@media (min-width: 721px) and (max-aspect-ratio: 4/5) { .hero { min-height: 0; } .hero-buehne { min-height: 0; height: 56svh; } }
@media (max-width: 720px) {
  .hero { min-height: 0; padding-top: 12px; }
  .hero-buehne { min-height: 0; height: 50svh; max-height: 440px; }
  .hero-wort { font-size: 17.5vw; top: 42%; }
  .hero-drohne { width: 94%; top: 54%; }
  .hero-aktion { width: 100%; }
  .hero-aktion .knopf { flex: 1 1 100%; }
}

/* 8 Abschnitte und feines Linienraster */
.abschnitt { position: relative; z-index: 2; padding-block: var(--abstand); }
/* Leitsatz: großer Satz links, rechts eine freie Zone, in der die Drohne mitfliegt */
.leitsatz { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); border-top: 1px solid var(--linie); }
.leitsatz .satz-gross { font-size: clamp(2.5rem, 6.2vw, 6rem); line-height: 1.04; letter-spacing: -0.035em; padding: clamp(24px, 3vw, 44px) clamp(20px, 4vw, 64px) 0 0; border-right: 1px solid var(--linie); }   /* kurzer Satz als Aussage (29.09.2026) */
.drohnen-zone { min-height: clamp(240px, 30vw, 440px); display: grid; place-items: center; }
.zonen-drohne { width: min(100%, 440px); height: auto; }
.dynamisch .zonen-drohne { display: none; }
@media (max-width: 800px) {
  .leitsatz { grid-template-columns: minmax(0, 1fr); }
  .leitsatz .satz-gross { border-right: 0; padding-right: 0; }
  .drohnen-zone { min-height: 0; height: 0; }
  .zonen-drohne { display: none; }
  .dynamisch .drohnen-zone { height: 200px; margin-top: 24px; }   /* Abstand zum Satz darüber, sonst streift die schwebende Drohne die letzte Zeile */
}
/* Wort für Wort einfärben (nur mit JavaScript; bei reduzierter Bewegung sofort dunkel) */
/* Scharfstellen (Runde 3, S1): noch nicht erreichte Wörter unscharf in Grau (als große Schrift 3,2:1), dann scharf und dunkel */
.wortweise .wort { transition: color .45s var(--ease-out), filter .5s var(--ease-out); }
.wortweise.bereit .wort { color: var(--grau-leitsatz); filter: blur(4px); }
.wortweise.bereit .wort.an { color: var(--tinte); filter: none; }

/* Bausteine der Kapitel: Kopf, mittlere Sätze, Hinweise, Symbole */
.kapitel-kopf { display: grid; gap: 14px; margin-bottom: clamp(24px, 3.4vw, 44px); max-width: 60rem; }
.kapitel-kopf .schlagwort, .preise-kopf .schlagwort, .fragen-kopf .schlagwort, .ueber > .schlagwort { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.ueber > .schlagwort.kleiner { font-size: clamp(2rem, 4vw, 3.5rem); }
.satz-mittel { font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 300; line-height: 1.38; letter-spacing: -0.01em; color: var(--tinte-2); max-width: 40ch; }
.hinweis { font-size: 1rem; line-height: 1.55; color: var(--tinte-2); }
.kapitel-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.symbol { width: 28px; height: 28px; flex: none; color: var(--blau-text); }

/* Lichtkante: Auf Geräten mit Maus leuchten die Haarlinien der Kachel-Raster dort blau auf, wo der Zeiger ist.
   seite.js setzt die Zeigerposition im Raster (--mx, --my) und die Lage jeder Kachel darin (--ox, --oy).
   Ohne diese Werte liegt das Licht weit außerhalb, und die Linien bleiben grau. Die Kacheln bleiben durchsichtig. */
@property --licht { syntax: '<number>'; inherits: true; initial-value: 0; }
.lichtraster, .lichtraster > * { border-image: radial-gradient(280px circle at calc(var(--mx, -999px) - var(--ox, 0px)) calc(var(--my, -999px) - var(--oy, 0px)), color-mix(in srgb, var(--blau) calc(var(--licht) * 100%), var(--linie)), color-mix(in srgb, var(--blau) calc(var(--licht) * 100%), var(--linie)) 16%, var(--linie) 70%) 1; }
/* Die Kachel unter dem Zeiger bekommt einen leichten Schein vom selben Licht */
.lichtraster > :hover { background-image: radial-gradient(320px circle at calc(var(--mx, -999px) - var(--ox, 0px)) calc(var(--my, -999px) - var(--oy, 0px)), color-mix(in srgb, var(--blau) calc(var(--licht) * 8%), transparent), transparent 70%); }
.lichtraster { transition: --licht .45s var(--ease-out); }
.lichtraster:hover { --licht: 1; }

/* 8.1 Leistungen (Runde 3, L2 und L3). Schmal: Kacheln im Linienraster, die Dach-Sichtprüfung breit, ihre Dachteile und die
   Dauer unter „Einzelheiten“ (die Hinweise bleiben sichtbar). Ab 961 px eine große Liste: Symbol, Name, Kurzsatz, Preis,
   Pfeil; die ganze Zeile ist der Link, die Hinweise stehen darunter, beim Zeigen folgt ein Bild der Maus (seite.js). */
#leistungen .huelle { position: relative; }
.leistungen-raster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.leistung { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 36px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); min-width: 0; transition: background-color .3s var(--ease-out); }
.leistung:hover { background-color: rgba(255,255,255,.7); }
.leistung .symbol { width: 32px; height: 32px; margin-bottom: 6px; }
.leistung h3 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.15; }
.leistung > p:not([class]) { color: var(--tinte-2); }
.leistung-haupt { grid-column: span 2; background-color: var(--weiss); }
.leistung-haupt h3 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.leistung-satz { font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 300; line-height: 1.3; color: var(--tinte); }
.leistung .hinweis { padding-top: 12px; border-top: 1px solid var(--linie); }
.leistung-mehr { border-top: 1px solid var(--linie); padding-top: 4px; }
.leistung-mehr summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9375rem; color: var(--blau-text); }
.leistung-mehr summary::-webkit-details-marker { display: none; }
.leistung-mehr summary .symbol { width: 18px; height: 18px; margin: 0; transition: rotate .3s var(--ease-out); }
.leistung-mehr[open] summary .symbol { rotate: 45deg; }
.leistung-mehr > :not(summary) { margin-top: 10px; }
.leistung-mehr > p:not([class]) { color: var(--tinte-2); }
.leistung-punkte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.leistung-punkte li { display: flex; gap: 10px; align-items: center; }
.leistung-punkte .symbol, .leistung-dauer .symbol { width: 20px; height: 20px; margin: 0; }
.leistung-dauer { display: flex; gap: 10px; align-items: center; color: var(--tinte-2); }
@media (max-width: 480px) { .leistung-punkte { grid-template-columns: minmax(0, 1fr); } }
.leistung-fuss { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.leistung-preis { font-family: var(--schlagwort); font-weight: 765; font-size: 1.0625rem; }
.leistung-fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; }
.leistung-pfeil, .leistungen-hinweise, .leistung-folge { display: none; }
@media (min-width: 641px) and (max-width: 960px) { .leistungen-raster > :last-child { grid-column: span 2; } }
@media (max-width: 640px) { .leistungen-raster { grid-template-columns: minmax(0, 1fr); } .leistung-haupt { grid-column: auto; } }
@media (min-width: 961px) {
  .leistungen-raster { display: block; border-left: 0; }
  .leistungen-raster, .leistungen-raster > * { border-image: none; }   /* die Lichtkante gehört zu Kachel-Rastern */
  .leistungen-raster > :hover { background-image: none; }
  .leistung, .leistung-haupt { display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) auto 24px; align-items: center; gap: 0 clamp(16px, 2.2vw, 36px); padding: 24px 12px; border-right: 0; background-color: transparent; transition: background-color .25s var(--ease-out), padding .35s var(--ease-out); }
  .leistung:hover { background-color: var(--weiss); padding-left: 20px; padding-right: 4px; }
  .leistung .symbol { margin: 0; }
  .leistung h3, .leistung-haupt h3 { font-size: clamp(1.5rem, 2.3vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.1; }
  .leistung-satz, .leistung > p:not([class]) { font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--tinte-2); }
  .leistung-mehr, .leistung .hinweis { display: none; }
  .leistung-fuss { margin: 0; padding: 0; justify-content: flex-end; }
  .leistung-preis { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); white-space: nowrap; }
  /* Die ganze Zeile ist der Link; sein Text bleibt für Vorleseprogramme, sichtbar sind Name, Preis und Pfeil */
  .leistung-fuss a { position: absolute; inset: 0; z-index: 1; min-height: 0; font-size: 0; color: transparent; }
  .leistung-fuss a:focus-visible { outline: 2px solid var(--blau-text); outline-offset: -2px; }
  .leistung-pfeil { display: block; width: 22px; height: 22px; color: var(--blau-text); transition: translate .3s var(--ease-out); }
  .leistung:hover .leistung-pfeil { translate: 5px 0; }
  .leistungen-hinweise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px clamp(24px, 4vw, 64px); margin-top: 24px; }
  .leistungen-hinweise strong { color: var(--tinte); font-weight: 600; }
  .leistung-folge { display: block; position: absolute; z-index: 5; left: 0; top: 0; width: 280px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; pointer-events: none; opacity: 0; scale: .92; translate: var(--fx, 0) var(--fy, 0); transition: opacity .25s var(--ease-out), scale .35s var(--ease-expo); box-shadow: 0 24px 50px -24px rgba(2,20,40,.6); }
  .leistung-folge.an { opacity: 1; scale: 1; }
  .leistung-folge img { width: 100%; height: 100%; object-fit: cover; }
  /* KI-Hinweis (07.10.2026): die Bilder stammen aus dem Haus-Video */
  .folge-vermerk { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(252,253,254,.9); color: var(--tinte-2); font-size: 0.6875rem; line-height: 1.3; }
}

/* 8.2 Preise: große Zahlen in einer Liste mit Haarlinien, links Platz für die Drohne */
.preise { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.preise-kopf { display: flex; flex-direction: column; gap: 14px; }
.drohnen-zone-klein { min-height: clamp(180px, 20vw, 300px); margin-top: auto; }
.preisliste { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.preisliste li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.preis-name { min-width: 0; font-size: 1.0625rem; color: var(--tinte); }
.preis-name small { display: block; font-size: 0.875rem; color: var(--tinte-3); }
.preis-zahl { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-zahl small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; color: var(--tinte-2); margin-right: 2px; }
.anfahrt { display: flex; gap: 14px; align-items: flex-start; margin: 28px 0 18px; }
.anfahrt p { color: var(--tinte-2); }
.anfahrt-text { display: grid; gap: 12px; flex: 1; min-width: 0; }
.anfahrt-satz { font-size: 0.9375rem; }
/* Anfahrt selbst ausrechnen (Runde 3, P1); ohne JavaScript bleibt der Schieber verborgen */
.anfahrt-rechner { display: grid; gap: 8px; padding: 16px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.anfahrt-rechner[hidden] { display: none; }
.anfahrt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.anfahrt-kopf label { font-weight: 600; font-size: 0.9375rem; color: var(--tinte); }
.anfahrt-rechner output { font-family: var(--schlagwort); font-weight: 765; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.anfahrt-rechner input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--blau-text); cursor: pointer; }
.anfahrt-ergebnis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-top: 10px; border-top: 1px solid var(--linie); }
.anfahrt-ergebnis b { color: var(--tinte); }
.anfahrt-ergebnis strong { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.375rem, 2.4vw, 1.75rem); color: var(--tinte); font-variant-numeric: tabular-nums; }
[data-anfahrt] > .anfahrt-rechner { margin: 16px 0 12px; }
/* Runde 6 (A2): Gesamtpreis im Rechner der Preise-Seite (Leistung, Anfahrt, Gesamt, Anfrage mit der Auswahl) */
.anfahrt-rechner .feld { margin-bottom: 8px; }
.summe { margin: 4px 0 0; border-top: 1px solid var(--linie); }
.summe div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.summe dt { color: var(--tinte-2); }
.summe dd { margin: 0; font-family: var(--schlagwort); font-weight: 765; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summe .summe-gesamt dt { color: var(--tinte); font-weight: 600; }
.summe .summe-gesamt dd { font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; }
.anfahrt-rechner .knopf { width: 100%; white-space: normal; text-align: center; margin-top: 4px; }
.anfahrt strong { color: var(--tinte); }
.preise-liste .hinweis + .hinweis { margin-top: 10px; }
.preise-liste .kapitel-link { margin-top: 22px; }
@media (max-width: 860px) { .preise { grid-template-columns: minmax(0, 1fr); } .preise-kopf .drohnen-zone-klein { display: none; } }
/* Runde 4 (SS1): Am Rechner läuft die Drohne in der freien linken Spalte neben der Preisliste mit */
@media (min-width: 861px) { .dynamisch .preise-kopf .drohnen-zone-klein { position: sticky; top: calc(var(--kopf-klein) + 24vh); margin-top: 12px; } }

/* 8.3 Ablauf: vier Schritte nebeneinander, getrennt durch Haarlinien */
.schritte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.schritte li { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); min-width: 0; }
.schritt-nr { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; color: var(--blau-text); letter-spacing: -0.02em; }
.schritte h3 { font-family: var(--schlagwort); font-weight: 765; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.01em; }
.schritte p { color: var(--tinte-2); }
/* Ablauf gepinnt am Rechner (Runde 3, A4): Die Bühne klebt, bis alle vier Schritte durch sind (eine halbe Bildschirmhöhe
   je Schritt); seite.js setzt .gefuehrt am Raster und je Schritt .war oder .jetzt. Hintergründe nur mit background-color
   (Lichtkante). Am Handy und Tablet (A3) setzt seite.js .abhaken: Durchlaufene Schritte bekommen ein Häkchen auf Navy. */
.schritt-nr .haken { display: none; }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .js .ablauf-bahn { height: calc(300svh - var(--kopf-klein)); }
  .js .ablauf { padding-top: 0; }
  .js .ablauf-buehne { position: sticky; top: var(--kopf-klein); height: calc(100svh - var(--kopf-klein)); display: flex; flex-direction: column; justify-content: center; }
}
.schritte.gefuehrt li { transition: background-color .4s var(--ease-out); }
.schritte.gefuehrt .schritt-nr, .schritte.gefuehrt h3, .schritte.gefuehrt p { transition: color .4s var(--ease-out); }
.schritte.gefuehrt li .schritt-nr { color: #B4C1CD; }
.schritte.gefuehrt li h3, .schritte.gefuehrt li p { color: var(--tinte-3); }
.schritte.gefuehrt li.war .schritt-nr, .schritte.gefuehrt li.war h3, .schritte.gefuehrt li.jetzt h3 { color: var(--tinte); }
.schritte.gefuehrt li.jetzt { background-color: var(--weiss); }
.schritte.gefuehrt li.jetzt .schritt-nr { color: var(--blau-text); }
.schritte.gefuehrt li.jetzt p, .schritte.gefuehrt li.war p { color: var(--tinte-2); }
.schritte.abhaken .schritt-nr { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background-color: var(--weiss); border: 1px solid var(--linie); font-size: 1.375rem; transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out); }
.schritte.abhaken li.war .schritt-nr { background-color: var(--navy); border-color: var(--navy); }
.schritte.abhaken li.war .zahl { display: none; }
.schritte.abhaken li.war .haken { display: block; width: 28px; height: 28px; color: #fff; animation: haken-rein .45s var(--ease-expo) both; }
@keyframes haken-rein { from { scale: .4; opacity: 0; } }
.ablauf-fuss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; margin-top: 28px; }
.ablauf-fuss p { display: flex; gap: 14px; align-items: flex-start; color: var(--tinte-2); }
@media (max-width: 960px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .schritte, .ablauf-fuss { grid-template-columns: minmax(0, 1fr); } }

/* 8.4 Sicherheit: links Platz für die Drohne, rechts Aussage und Vertrauenspunkte */
.sicherheit { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.sicherheit .drohnen-zone { min-height: clamp(220px, 26vw, 400px); }
.sicherheit-text { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.sicherheit-text .schlagwort { font-size: clamp(2rem, 4.2vw, 3.75rem); }
.sicherheit-text .satz-gross { font-size: clamp(1.5rem, 2.8vw, 2.5rem); }
.vertrauen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.vertrauen li { display: flex; gap: 12px; align-items: center; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--linie); font-weight: 500; }
.vertrauen li:nth-child(odd) { border-right: 1px solid var(--linie); }
/* Prüfliste (Runde 3, V1): ohne JavaScript abgehakt; seite.js setzt .abhaken (leer) und beim Hereinscrollen .sichtbar,
   dann hakt sich ein Kästchen nach dem anderen ab */
.pruef-kasten { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius); background-color: var(--blau-text); border: 1.5px solid var(--blau-text); }
.pruef-kasten svg { width: 18px; height: 18px; color: #fff; }
.vertrauen.abhaken .pruef-kasten { background-color: var(--weiss); border-color: #8FA0B1; transition: background-color .35s var(--ease-out) calc(var(--i, 0) * 260ms + 200ms), border-color .35s var(--ease-out) calc(var(--i, 0) * 260ms + 200ms); }
.vertrauen.abhaken .pruef-kasten svg { opacity: 0; scale: .3; transition: opacity .3s var(--ease-out) calc(var(--i, 0) * 260ms + 260ms), scale .5s var(--ease-expo) calc(var(--i, 0) * 260ms + 260ms); }
.vertrauen.abhaken.sichtbar .pruef-kasten { background-color: var(--blau-text); border-color: var(--blau-text); }
.vertrauen.abhaken.sichtbar .pruef-kasten svg { opacity: 1; scale: 1; }
.vertrauen li:nth-child(even) { padding-left: 16px; }
.vertrauen li:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
@media (max-width: 860px) {
  .sicherheit { grid-template-columns: minmax(0, 1fr); }
  .sicherheit .drohnen-zone { min-height: 0; height: 0; order: 2; }
  .dynamisch .sicherheit .drohnen-zone { height: 200px; }
}
@media (max-width: 560px) { .vertrauen { grid-template-columns: minmax(0, 1fr); } .vertrauen li:nth-child(odd) { border-right: 0; } .vertrauen li:nth-child(even) { padding-left: 0; } }

/* 8.5 Über uns: rein typografisch, ohne Foto */
.ueber { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 6vw, 96px); border-top: 1px solid var(--linie); padding-top: clamp(24px, 3vw, 44px); }
.ueber-text { display: grid; gap: 18px; align-content: start; }
.ueber-text .satz-mittel { color: var(--tinte); max-width: 34ch; }
.ueber-text > p:not([class]) { color: var(--tinte-2); max-width: 60ch; }
/* Zitat mit Initialen (Runde 3, U2), bis es ein Foto gibt */
.person { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px clamp(20px, 3vw, 32px); align-items: start; margin: clamp(8px, 2vw, 24px) 0 0; padding: clamp(20px, 3vw, 36px); background-color: var(--weiss); border: 1px solid var(--linie); }
.person-zeichen { grid-row: span 2; width: clamp(64px, 7vw, 96px); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); background: var(--navy); color: var(--blau); font: 765 clamp(1.5rem, 2.6vw, 2.25rem)/1 var(--schlagwort); letter-spacing: -0.02em; }
.person blockquote { margin: 0; grid-column: 2; }
.person blockquote p { font-weight: 300; font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--tinte); text-wrap: balance; }
.person figcaption { grid-column: 2; margin-top: -4px; font-size: 0.9375rem; color: var(--tinte-2); }
.person figcaption strong { color: var(--tinte); font-weight: 600; }
@media (max-width: 560px) { .person { grid-template-columns: minmax(0, 1fr); } .person-zeichen { grid-row: auto; } .person blockquote, .person figcaption { grid-column: auto; } }
/* Über uns (Runde 7): Fakten als Prüfliste über die ganze Breite; das Zitat wird Wort für Wort scharf und ist dafür
   mindestens 24 px groß (große Schrift: 3:1 reicht für das Grau vor dem Scharfwerden) */
.ueber > .vertrauen { grid-column: 1 / -1; margin-top: clamp(8px, 2vw, 24px); }
.person .wortweise { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.ueber-fakten { grid-column: 1 / -1; list-style: none; padding: 0; margin-top: clamp(16px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.ueber-fakten li { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ueber-fakten strong { font-family: var(--schlagwort); font-weight: 765; font-size: 1.125rem; }
.ueber-fakten span { color: var(--tinte-2); font-size: 0.9375rem; }
@media (max-width: 860px) { .ueber { grid-template-columns: minmax(0, 1fr); } .ueber-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8.6 Häufige Fragen: Akkordeon mit <details>, funktioniert ohne JavaScript */
.fragen { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.fragen-kopf { display: flex; flex-direction: column; gap: 14px; }
.faq-liste { border-top: 1px solid var(--linie); }
.faq { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; transition: background-color .35s var(--ease-out); }
/* Offene Frage mit hellem Grund, die Antwort gleitet ein (Runde 3, F1) */
.faq[open] { background-color: var(--weiss); }
.faq[open] .faq-antwort { animation: faq-rein .5s var(--ease-expo) both; }
@keyframes faq-rein { from { opacity: 0; translate: 0 -6px; } }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 12px; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; color: var(--tinte); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: 4px; }
.faq summary .symbol { width: 22px; height: 22px; transition: transform .35s var(--ease-out); }
.faq[open] summary .symbol { transform: rotate(45deg); }
.faq summary:hover span { color: var(--blau-text); }
.faq-antwort { padding: 0 44px 22px 12px; color: var(--tinte-2); max-width: 70ch; }
.faq-antwort p + p { margin-top: 10px; }
.faq::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete; }
.faq[open]::details-content { block-size: auto; }
@media (max-width: 860px) { .fragen { grid-template-columns: minmax(0, 1fr); } .fragen-kopf .drohnen-zone-klein { display: none; } }

/* 9 Haus-Szene. Grundzustand (ohne JavaScript, reduzierte Bewegung): Überschrift, Standbild, vier Texte als Raster */
.haus-szene { position: relative; z-index: 2; padding-top: var(--abstand); }
.haus-szene-buehne { position: relative; display: flex; flex-direction: column; }
.haus-szene-bild { width: 100%; height: clamp(320px, 56vw, 760px); object-fit: cover; background: #C9D6E1; }
.haus-szene-kopf { order: -1; width: min(100% - 2 * var(--rand), var(--inhalt)); margin: 0 auto clamp(24px, 3vw, 40px); }
.haus-szene-titel { font-size: clamp(2.25rem, 5vw, 4.5rem); color: var(--tinte); }
.haus-szene-unter { margin-top: 12px; max-width: 44ch; font-size: 1.125rem; font-weight: 300; line-height: 1.5; color: var(--tinte-2); }
.ki-vermerk { margin-top: 8px; font-size: 0.8125rem; line-height: 1.4; color: var(--tinte-2); }   /* KI-Hinweis der Haus-Szene */
.blasen { list-style: none; padding: 0; width: min(100% - 2 * var(--rand), var(--inhalt)); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-left: 1px solid var(--linie); }
.blase { padding: clamp(22px, 2.6vw, 32px); border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--grund); }
.blase-ort { font-size: 0.875rem; font-weight: 600; color: var(--blau-text); }
.blase h3 { font-family: var(--schlagwort); font-weight: 765; font-size: 1.3125rem; letter-spacing: -0.015em; line-height: 1.15; margin: 8px 0; }
.blase > p:not([class]) { color: var(--tinte-2); font-size: 1rem; line-height: 1.55; }
.blase-preis { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.blase-preis strong { font-family: var(--schlagwort); font-weight: 765; font-size: 1.0625rem; color: var(--tinte); }
.blase-preis a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 600; }

/* Bewegte Fassung (JavaScript, WebGL, keine reduzierte Bewegung): Bühne bleibt stehen, Blasen zeigen auf die Drohne */
/* Zwei klebende Schichten übereinander im selben Rasterfeld der Bahn, so kleben sie gleich: unten der Grund mit den
   Standbildern (Ebene 0, unter der 3D-Leinwand), oben die Bühne mit Überschrift und Textblasen (Ebene 2, darüber).
   Solange die Bühne steht, zeichnet flug.js das Video auf die Leinwand dazwischen. Beim Ein- und Ausscrollen zeigt der
   Grund das erste oder letzte Bild (.am-ende setzt seite.js): Er scrollt genau mit der Seite, die Leinwand dagegen käme
   einige Bilder zu spät (am iPhone sprang das Haus dabei auf und ab, 27.09.2026). */
.dynamisch .haus-szene { padding-top: 0; z-index: auto; }
.dynamisch .haus-szene-bahn { height: 500svh; display: grid; }
.dynamisch .haus-szene-buehne, .dynamisch .haus-szene-grund { grid-area: 1 / 1; align-self: start; position: sticky; top: var(--kopf-klein); height: calc(100lvh - var(--kopf-klein)); overflow: hidden; }
.dynamisch .haus-szene-buehne { display: block; z-index: 2; }
.dynamisch .haus-szene-bild { display: none; }
.haus-szene-grund { display: none; }
.dynamisch .haus-szene-grund { display: block; z-index: 0; background: #C9D6E1; }
.haus-szene-grund img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.haus-szene-ende img { opacity: 0; }
.haus-szene-grund.am-ende .haus-szene-ende img { opacity: 1; }
.dynamisch .haus-szene-buehne::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(246,248,250,.72), rgba(246,248,250,.35) 55%, rgba(246,248,250,0)); pointer-events: none; transition: opacity .6s var(--ease-out); }
.dynamisch .haus-szene-buehne:has(.haus-szene-kopf.aus)::before { opacity: 0; }
.dynamisch .haus-szene-kopf .haus-szene-unter { font-weight: 400; color: var(--tinte); }
.dynamisch .haus-szene-kopf .haus-szene-titel, .dynamisch .haus-szene-kopf .haus-szene-unter, .dynamisch .haus-szene-kopf .ki-vermerk { text-shadow: 0 0 22px rgba(246,248,250,.9), 0 0 3px rgba(246,248,250,.8); }
.dynamisch .haus-szene-kopf { position: absolute; left: max(var(--rand), (100% - var(--inhalt)) / 2); top: clamp(18px, 3.6vw, 44px); width: min(34rem, calc(100% - 2 * var(--rand))); margin: 0; transition: opacity .5s var(--ease-out), translate .6s var(--ease-out); }
.dynamisch .haus-szene-kopf.aus { opacity: 0; translate: 0 -10px; }
.dynamisch .blasen { position: absolute; inset: 0; width: auto; margin: 0; display: block; border: 0; pointer-events: none; }
.dynamisch .blase { position: absolute; left: 0; top: 0; width: min(344px, calc(100vw - 2 * var(--rand))); translate: var(--bx, 24px) var(--by, 24px); border: 1px solid var(--linie); border-radius: 10px; background: rgba(252,253,254,.97); box-shadow: 0 18px 48px -22px rgba(2,20,40,.45); opacity: 0; transform: translateY(10px) scale(.98); transform-origin: var(--spitze-x, 36px) 100%; transition: opacity .3s var(--ease-out), transform .55s var(--ease-expo); pointer-events: none; }
.dynamisch .blase::after { content: ''; position: absolute; left: calc(var(--spitze-x, 36px) - 8px); bottom: -8px; width: 14px; height: 14px; background: inherit; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); transform: rotate(45deg); }
.dynamisch .blase[data-seite="unten"] { transform-origin: var(--spitze-x, 36px) 0; }
.dynamisch .blase[data-seite="unten"]::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.dynamisch .blase.an, .dynamisch .blase:has(:focus-visible) { opacity: 1; transform: none; pointer-events: auto; }
/* Blase neben der Drohne (niedrige Bühne): Spitze an der Seite */
.dynamisch .blase[data-seite="rechts"] { transform-origin: 0 var(--spitze-y, 50%); }
.dynamisch .blase[data-seite="rechts"]::after { left: -8px; bottom: auto; top: calc(var(--spitze-y, 50%) - 8px); transform: rotate(135deg); }
.dynamisch .blase[data-seite="links"] { transform-origin: 100% var(--spitze-y, 50%); }
.dynamisch .blase[data-seite="links"]::after { left: auto; right: -8px; bottom: auto; top: calc(var(--spitze-y, 50%) - 8px); transform: rotate(-45deg); }
/* Solange die Haus-Welt lädt, zeigt die Spitze auf nichts: ausblenden */
.dynamisch .haus-szene:not(.ist-3d) .blase::after { display: none; }
/* Halte-Anzeige (Runde 3, R4): vier Knöpfe, ein Klick fährt die Szene zum Halt (seite.js). Erscheint, sobald die
   Überschrift ausgeblendet ist; am Rechner unten in der Mitte, am Handy oben. Nur in der bewegten Fassung. */
.halte-anzeige { display: none; }
.dynamisch .halte-anzeige { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 2px 4px; position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: 16px; padding: 5px; background: rgba(252,253,254,.92); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 10px 30px -18px rgba(2,20,40,.5); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; }
.dynamisch .haus-szene-buehne:has(.haus-szene-kopf.aus) .halte-anzeige, .dynamisch .halte-anzeige:focus-within { opacity: 1; visibility: visible; transition: opacity .4s var(--ease-out), visibility 0s; }
.halte-anzeige button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--tinte-3); font: 500 0.875rem/1 var(--text); white-space: nowrap; cursor: pointer; transition: color .3s var(--ease-out), background-color .3s var(--ease-out); }
.halte-anzeige button::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--linie); transition: background-color .3s var(--ease-out); }
.halte-anzeige button:hover { color: var(--tinte); background-color: rgba(255,255,255,.8); }
.halte-anzeige button.war::before { background: var(--tinte-3); }
.halte-anzeige button[aria-current="step"] { color: var(--tinte); background-color: #fff; font-weight: 600; }
.halte-anzeige button[aria-current="step"]::before { background: var(--blau-text); }
.halte-anzeige button:focus-visible { outline-offset: 1px; }
.halte-anzeige .ki-vermerk { grid-column: 1 / -1; margin: 0 0 1px; font-size: 0.6875rem; line-height: 1.3; text-align: center; color: var(--tinte-3); }
/* Niedrige Bühne (Handy quer, kleine Laptops, kleine Handys): nur Ort, Titel und Preis, damit die Blase die Drohne nicht verdeckt */
@media (max-height: 560px), (max-width: 720px) and (max-height: 760px) { .dynamisch .blase > p:not([class]) { display: none; } }
/* Kurzfassung auch, wenn die lange Blase nirgends neben die Drohne passt (flug.js setzt data-kurz) */
.dynamisch .blase[data-kurz] > p:not([class]) { display: none; }
@media (max-width: 720px) {
  .dynamisch .blase { left: var(--rand); right: var(--rand); top: auto; bottom: calc(16px + 100lvh - 100dvh); width: auto; translate: none; transform-origin: 50% 100%; }
  .dynamisch .blase[data-dock="oben"] { top: 82px; bottom: auto; transform-origin: 50% 0; }   /* unter der Halte-Anzeige mit KI-Hinweis; gleicher Wert in flug.js */
  .dynamisch .blase::after { display: none; }
  .dynamisch .halte-anzeige { left: var(--rand); right: var(--rand); translate: none; top: 12px; bottom: auto; justify-content: space-between; }
  .halte-anzeige button { min-height: 32px; padding: 0 7px; gap: 6px; font-size: 0.8125rem; }
}
/* Sehr schmale Handys (320 px): Die vier Knöpfe ragten 43 px über den Rand (gemessen 07.10.2026); enger setzen */
@media (max-width: 360px) {
  .halte-anzeige button { padding: 0 3px; gap: 4px; font-size: 0.75rem; }
}

/* 10 Landung am Kontakt: die Drohne setzt am Ende auf dem Anfrage-Knopf auf */
.landung .huelle { border-top: 1px solid var(--linie); padding-top: clamp(24px, 3vw, 44px); }
.landung-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: end; }
.landung .schlagwort { font-size: clamp(2.4rem, 6vw, 5.25rem); max-width: 14ch; }
.landung-text > p { max-width: 50ch; margin-top: 20px; font-size: 1.125rem; font-weight: 300; line-height: 1.55; color: var(--tinte-2); }
.landung-knopf { display: inline-flex; flex-direction: column; margin-top: 32px; }
/* Runde 8, E1: Fragefeld am Ende der FAQ; die Frage wandert nur im eigenen Browser zum Anfrageformular */
.frage-feld { display: grid; gap: 8px; max-width: 560px; margin-top: 24px; }
.frage-feld label { font-weight: 600; font-size: 0.9375rem; color: var(--tinte); }
.frage-feld textarea { width: 100%; min-height: 112px; padding: 12px 14px; border: 1px solid var(--feldrand); border-radius: var(--radius); background: var(--weiss); color: var(--tinte); font: 400 1rem/1.5 var(--text); resize: vertical; transition: border-color .2s var(--ease-out); }
.frage-feld textarea:hover { border-color: var(--tinte-2); }
.frage-feld textarea:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 1px; border-color: var(--blau-text); }
.frage-feld[hidden] { display: none; }
.frage-feld + .landung-knopf { margin-top: 20px; }
.dynamisch .landung-platz { height: 112px; }
.landung-kontakt { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.landung-kontakt li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
.landung-kontakt li > span:first-child { font-size: 0.8125rem; font-weight: 600; color: var(--tinte-3); }
.landung-kontakt a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--tinte); text-decoration-color: var(--linie); }
.landung-kontakt a:hover { text-decoration-color: var(--tinte); }
@media (max-width: 800px) { .landung-raster { grid-template-columns: minmax(0, 1fr); } }

/* 10b Unterseiten: kurzer Kopf mit schwebender Drohne, Leistungs-Abschnitte, Preistabelle, Formular, Rechtstexte */
.seite-kopf { padding: 16px var(--rand) 0; }
.seite-kopf-buehne { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 24px; min-height: clamp(380px, 54svh, 580px); padding: clamp(28px, 4vw, 56px); background: linear-gradient(180deg, #D5DEE6 0%, #E4EAF0 45%, #EFF3F6 80%, #F4F6F8 100%); }
.seite-kopf-text { position: relative; z-index: 2; display: grid; gap: 16px; align-self: end; }
.seite-kopf-text .schlagwort { font-size: clamp(2.5rem, 6vw, 5.25rem); }
.seite-kopf-text .satz-mittel { max-width: 36ch; }
.seite-drohne { position: relative; aspect-ratio: 16 / 9; pointer-events: none; }
.seite-drohne img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s var(--ease-out); }
.seite-drohne.ist-3d img { opacity: 0; }
@media (max-width: 800px) {
  .seite-kopf { padding-top: 12px; }
  .seite-kopf-buehne { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 24px 20px 12px; }
  .seite-kopf-text { align-self: start; }
  .seite-drohne { width: min(100%, 420px); justify-self: center; }
}
/* Übersicht der Leistungen (Runde 5, U1): Name, Kurzsatz, Preis, Pfeil; ein Klick springt zur Leistung. Am Handy
   Name und Preis in einer Zeile, der Kurzsatz darunter. */
.uebersicht-leiste { position: relative; z-index: 2; margin-top: clamp(20px, 3vw, 32px); }
.uebersicht { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.uebersicht a { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1fr) auto 22px; align-items: center; gap: 18px; padding: 16px 6px; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: background-color .25s var(--ease-out), padding .3s var(--ease-out); }
.uebersicht a:hover { background-color: var(--weiss); padding-left: 14px; }
.uebersicht .symbol { width: 24px; height: 24px; }
.uebersicht-name { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.125rem, 1.8vw, 1.625rem); line-height: 1.15; letter-spacing: -0.015em; }
.uebersicht-kurz { color: var(--tinte-2); font-size: 0.9375rem; line-height: 1.45; }
.uebersicht-preis { font-family: var(--schlagwort); font-weight: 765; font-size: 1.0625rem; white-space: nowrap; }
.uebersicht-pfeil { width: 20px; height: 20px; color: var(--blau-text); transition: translate .3s var(--ease-out); }
.uebersicht a:hover .uebersicht-pfeil { translate: 4px 0; }
@media (max-width: 700px) {
  .uebersicht a { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 12px; }
  .uebersicht-kurz { grid-column: 2 / -1; grid-row: 2; font-size: 0.875rem; }
  .uebersicht-pfeil { display: none; }
}

/* Leistungs-Abschnitte auf /leistungen: links Text und Listen, rechts Fakten, Preis und Anfrage */
.dienst { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(28px, 5vw, 88px); padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--linie); }
.dienst:first-of-type { border-top: 0; }
.dienst-text { display: grid; gap: 18px; align-content: start; }
.dienst-text .symbol { width: 36px; height: 36px; }
.dienst-text h2 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; }
.dienst-text .satz-mittel { color: var(--tinte); }
.dienst-text > p:not([class]) { color: var(--tinte-2); max-width: 62ch; }
.dienst-text .hinweis { font-size: 1.0625rem; max-width: 62ch; padding-top: 14px; border-top: 1px solid var(--linie); }
.dienst-text .hinweis + .hinweis { padding-top: 0; border-top: 0; }
.dienst-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 40px; margin-top: 8px; }
.dienst-listen h3 { font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 10px; }
.dienst-listen ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.dienst-listen li { display: flex; gap: 10px; align-items: flex-start; }
.dienst-listen li .symbol { width: 20px; height: 20px; margin-top: 3px; }
/* Ebenen (Runde 5): Der Text liegt über der Drohne (Ebene 2), die Preis-Spalte darunter (Ebene 0). So fliegt die Drohne
   zwischen zwei Leistungen über Preise und Knopf hinweg, statt zu schrumpfen (wie im Fuß des Heros). */
.dienst-text { z-index: 2; }
.dienst-seite { position: relative; z-index: 0; display: grid; gap: 20px; align-content: start; min-width: 0; }
/* Runde 5 (D1): Am Rechner läuft die rechte Spalte (Drohne, Preise, Knopf) beim Lesen mit, bis die Leistung zu Ende ist.
   Nur wenn sie ganz ins Bild passt (Höhe ab 760 px), sonst wäre der Knopf erst am Ende erreichbar. */
@media (min-width: 861px) and (min-height: 760px) { .dienst-seite { position: sticky; top: calc(var(--kopf-klein) + 20px); align-self: start; } }
/* Runde 5 (P2): Am Handy steht der Preis neben dem Namen; am Rechner steht er in der rechten Spalte */
.dienst-titel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dienst-kurzpreis { font-family: var(--schlagwort); font-weight: 765; font-size: 1.375rem; letter-spacing: -0.015em; white-space: nowrap; }
@media (min-width: 861px) { .dienst-kurzpreis { display: none; } }
/* Runde 5 (E1): Am Handy stecken die Listen hinter „Einzelheiten“ und gleiten beim Aufklappen herein (wie die Fragen).
   Am Rechner sind sie immer offen: Der Inhalt der zugeklappten Einzelheiten wird dort sichtbar geschaltet, der Schalter
   ausgeblendet. Browser ohne ::details-content zeigen am Rechner den Schalter. */
.einzelheiten { border-top: 1px solid var(--linie); interpolate-size: allow-keywords; }
.einzelheiten summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 600; color: var(--blau-text); }
.einzelheiten summary::-webkit-details-marker { display: none; }
.einzelheiten summary .symbol { width: 20px; height: 20px; transition: rotate .35s var(--ease-out); }
.einzelheiten[open] summary .symbol { rotate: 45deg; }
.einzelheiten > .dienst-listen { margin-top: 4px; padding-bottom: 12px; }
.einzelheiten::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete; }
.einzelheiten[open]::details-content { block-size: auto; }
@media (min-width: 861px) {
  @supports selector(::details-content) {
    .einzelheiten { border-top: 0; }
    .einzelheiten summary { display: none; }
    .einzelheiten::details-content { content-visibility: visible; block-size: auto; transition: none; }
    .einzelheiten > .dienst-listen { margin-top: 8px; padding-bottom: 0; }
  }
}
/* Runde 5 (B3): Die Häkchen setzen sich nacheinander, sobald eine Liste ins Bild kommt (am Handy beim Aufklappen);
   ohne JavaScript und bei reduzierter Bewegung stehen sie gleich da. seite.js setzt .abhaken und .sichtbar. */
.dienst-listen.abhaken li .symbol { opacity: 0; scale: .3; }
.dienst-listen.abhaken.sichtbar li .symbol { opacity: 1; scale: 1; transition: opacity .3s var(--ease-out) calc(var(--i, 0) * 90ms + 120ms), scale .5s var(--ease-expo) calc(var(--i, 0) * 90ms + 120ms); }
.dienst-seite .drohnen-zone { min-height: clamp(160px, 16vw, 240px); }
/* Zonen mit der Klasse zone-nur-3d gibt es nur am Rechner mit 3D; ohne 3D und am Handy nehmen sie keinen Platz ein */
html:not(.dynamisch) .zone-nur-3d { display: none; }
@media (max-width: 860px) { .zone-nur-3d { display: none; } }
/* Anker (Runde 4, Flugroute): Stationen, die keinen Platz einnehmen. Sie liegen absolut in heute freier Fläche und gelten
   nur mit 3D: .anker-rechner ab 861 px, .anker-handy bis 860 px. Die Drohne steht in ihrer Mitte (flug.js). */
.drohnen-anker { position: absolute; display: none; pointer-events: none; }
@media (min-width: 861px) { .dynamisch .drohnen-anker.anker-rechner { display: block; } }
@media (max-width: 860px) { .dynamisch .drohnen-anker.anker-handy { display: block; } }
.mit-anker, .dienst-text, .formular-pflicht, .ablauf-buehne .huelle { position: relative; }
/* Zwischen zwei Abschnitten: in der Luft über dem Abschnitt, rechts an der Inhaltskante */
.anker-grenze { right: max(var(--rand), (100% - var(--inhalt)) / 2); }
.anker-grenze.anker-handy { top: -40px; width: 120px; height: 80px; }
.anker-grenze.anker-rechner { --h: min(170px, 2 * var(--abstand) - 16px); top: calc(var(--h) / -2); width: min(400px, 30%); height: var(--h); }
/* Rechts neben der letzten Zeile einer Überschrift, darüber in der Luft zwischen zwei Gruppen, neben einem Symbol */
.anker-zeile { right: 0; bottom: 0; width: 120px; height: 1.1em; }
.anker-zeile.anker-schmal { width: 100px; }
.anker-zeile.anker-tief { bottom: -0.45em; }
.anker-zeile.anker-hoch { bottom: 0.35em; }   /* dicht folgender Absatz: etwas höher, darüber ist Luft */   /* unter einer langen ersten Zeile: tiefer, sonst streift sie die Zeile darüber */
@media (min-width: 761px) { .zweispaltig .drohnen-anker { display: none !important; } }   /* dort zweispaltig und schmal */
.anker-darueber { right: 0; bottom: 100%; width: 124px; height: 44px; }
.anker-symbol { top: -12px; right: 0; width: min(174px, 48%); height: 52px; }
/* Startseite: rechts neben „Leistungen“ und der Ablauf-Überschrift, links unter „Über uns“ (auch auf /ueber-uns; die
   Überschrift füllt dort die Höhe ihrer Zeile im Raster, der Anker sitzt an ihrem unteren Rand) */
.anker-leistungen { top: -20px; right: 0; width: min(400px, 30%); height: clamp(150px, 15vw, 214px); }
.anker-ablauf { top: 0; right: 0; width: min(420px, 30%); height: clamp(130px, 13vw, 180px); }
.anker-ueber { left: 0; right: 0; bottom: 0; height: clamp(150px, 14vw, 200px); }
/* Kontakt am Handy: neben dem Pflichtfeld-Hinweis (die Drohne bleibt oben, sie fliegt nicht zum Knopf hinunter) */
.anker-pflicht, .anker-haken { right: 0; top: 50%; width: 138px; height: 58px; margin-top: -29px; }
.fakten { border-top: 1px solid var(--linie); }
.fakten div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.fakten dt { color: var(--tinte-2); }
.fakten dd { margin: 0; text-align: right; font-weight: 600; }
.fakten dd.preis { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
@media (max-width: 480px) { .fakten div { flex-wrap: wrap; row-gap: 2px; } .fakten dd { margin-left: auto; } }
/* Zwischen 861 und etwa 930 px ist die rechte Spalte schmal: lange Knopftexte umbrechen statt die Seite zu verbreitern */
.dienst-seite .knopf { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
.dienst-seite .hinweis { font-size: 0.875rem; }
@media (max-width: 860px) {
  .dienst { grid-template-columns: minmax(0, 1fr); }
  .dienst-seite .drohnen-zone { display: none; }
}

/* Preistabelle auf /preise: Gruppen je Leistung */
.preisgruppen { display: grid; gap: clamp(28px, 4vw, 48px); }
.preisgruppe { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px clamp(24px, 5vw, 80px); padding-top: 20px; border-top: 1px solid var(--linie); }
.preisgruppe h3 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.015em; line-height: 1.15; }
.preisgruppe h3 a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.preisgruppe h3 a:hover { color: var(--blau-text); }
.preisgruppe h3 .symbol { width: 20px; height: 20px; transition: translate .25s var(--ease-out); }
.preisgruppe h3 a:hover .symbol { translate: 4px 0; }
/* /preise: Neben der Preisliste fliegt die Drohne mit (klebende Zone; nur am Rechner mit 3D) */
.preis-begleiter { display: none; }
@media (min-width: 1101px) {
  .dynamisch .preisgruppen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr); gap: clamp(32px, 4vw, 64px); }
  .dynamisch .preis-begleiter { display: block; }
  .preis-begleiter .drohnen-zone { position: sticky; top: calc(var(--kopf-h) + 12vh); min-height: clamp(220px, 20vw, 300px); }
}
.preisgruppe .preisliste { border-top: 0; }
/* Runde 6 (L1): unter den Preisen jeder Leistung ein Link zur Anfrage mit dieser Leistung */
.preisgruppe-preise { display: grid; gap: 12px; align-content: start; min-width: 0; }
.preis-anfragen { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; font-weight: 600; font-size: 0.9375rem; color: var(--blau-text); text-decoration: none; }
.preis-anfragen .symbol { width: 18px; height: 18px; transition: translate .3s var(--ease-out); }
.preis-anfragen:hover { text-decoration: underline; text-underline-offset: 4px; }
.preis-anfragen:hover .symbol { translate: 4px 0; }
/* Runde 6 (H2): die Sätze zu Endpreisen und Orientierung direkt unter der Preisliste */
.preis-hinweise { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 0.9375rem; color: var(--tinte-2); max-width: 80ch; }
/* Runde 6 (B2): Die Beträge werden beim Hereinscrollen scharf (wie der Leitsatz); seite.js setzt .scharf und .sichtbar.
   Grau statt blass, damit die großen Zahlen auch vorher 3,2:1 Kontrast haben. */
.preisgruppe.scharf .preis-zahl { color: var(--grau-leitsatz); filter: blur(4px); }
.preisgruppe.scharf.sichtbar .preis-zahl { color: var(--tinte); filter: none; transition: color .9s var(--ease-out) calc(var(--i, 0) * 110ms), filter .9s var(--ease-out) calc(var(--i, 0) * 110ms); }
.preisgruppe .preisliste li:first-child { padding-top: 0; }
.preisgruppe .preisliste li:last-child { border-bottom: 0; }
@media (max-width: 760px) { .preisgruppe { grid-template-columns: minmax(0, 1fr); } }
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 5vw, 80px); }
.zweispaltig > div { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linie); }
.zweispaltig h2 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.015em; line-height: 1.15; }
.zweispaltig p { color: var(--tinte-2); }
@media (max-width: 760px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } }
.rechnung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); margin-top: 8px; }
.rechnung[hidden] { display: none; }   /* auf /preise ersetzt der Gesamtpreis die Beispiel-Rechnung (seite.js) */
.rechnung div { padding: 14px 16px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); display: grid; grid-template-rows: 1fr auto; gap: 2px; }
.rechnung span { font-size: 0.8125rem; color: var(--tinte-3); }
.rechnung strong { font-family: var(--schlagwort); font-weight: 765; font-size: 1.375rem; }
@media (max-width: 480px) { .rechnung { grid-template-columns: minmax(0, 1fr); } }

/* Werte auf /ueber-uns */
.kapitel-kopf-zone { display: grid; align-items: end; max-width: none; }
@media (min-width: 861px) { .dynamisch .kapitel-kopf-zone { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); } }
.kapitel-kopf-zone .drohnen-zone { min-height: clamp(180px, 18vw, 280px); }
/* „So arbeiten wir“ als Weg (Runde 7, W2): drei Werte, mit einer Linie verbunden; am Handy senkrecht */
.weg { --weg-luecke: clamp(20px, 3vw, 40px); list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--weg-luecke); }
.weg::before { content: ""; position: absolute; left: 28px; right: calc((100% - 2 * var(--weg-luecke)) / 3 - 28px); top: 27px; height: 2px; background: linear-gradient(90deg, var(--blau-text), var(--linie)); }
.weg li { position: relative; display: grid; gap: 10px; align-content: start; }
.weg-punkt { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius); background: var(--weiss); border: 1px solid var(--linie); }
.weg-punkt .symbol { width: 26px; height: 26px; }
.weg li:first-child .weg-punkt { background: var(--navy); border-color: var(--navy); }
.weg li:first-child .weg-punkt .symbol { color: var(--blau); }
.weg h3 { font-family: var(--schlagwort); font-weight: 765; font-size: 1.3125rem; letter-spacing: -0.015em; }
.weg p { color: var(--tinte-2); }
@media (max-width: 760px) {
  .weg { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .weg::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blau-text), var(--linie)); }
  .weg li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .weg-punkt { grid-row: span 2; }
}

/* FAQ-Seite: Gruppen */
.faq-gruppen { display: grid; gap: clamp(40px, 5vw, 64px); }
.faq-gruppe { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 16px clamp(24px, 5vw, 80px); }
.faq-gruppe-kopf { display: grid; gap: 24px; align-content: start; }
.faq-gruppe .drohnen-zone { min-height: clamp(180px, 18vw, 280px); }
.faq-gruppe h2 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.015em; line-height: 1.15; padding-top: 18px; }
@media (max-width: 760px) { .faq-gruppe { grid-template-columns: minmax(0, 1fr); } }
/* Runde 8, A1: am Rechner (ab 861 px, wo die Handy-Stationen aus sind) bleibt die Gruppen-Überschrift links stehen,
   solange ihre Fragen laufen */
@media (min-width: 861px) { .faq-gruppe-kopf, .faq-gruppe > h2 { position: sticky; top: calc(var(--kopf-klein) + 20px); align-self: start; } }
/* Runde 8, S1: Suchfeld über den Fragen (seite.js blendet es ein) */
.faq-suche { display: grid; gap: 8px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.faq-suche > * { max-width: 640px; }
.faq-suche label { font-weight: 600; font-size: 0.9375rem; color: var(--tinte); }
.faq-suche-feld { position: relative; }
.faq-suche-feld .symbol { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--tinte-3); pointer-events: none; }
.faq-suche input { width: 100%; min-height: 52px; padding: 12px 14px 12px 44px; border: 1px solid var(--feldrand); border-radius: var(--radius); background: var(--weiss); color: var(--tinte); font: 400 1.0625rem/1.3 var(--text); transition: border-color .2s var(--ease-out); }
.faq-suche input:hover { border-color: var(--tinte-2); }
.faq-suche input:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 1px; border-color: var(--blau-text); }
.faq-suche-zahl { font-size: 0.875rem; color: var(--tinte-3); min-height: 1.4em; }
.faq-suche-keine { padding-top: 14px; border-top: 1px solid var(--linie); color: var(--tinte-2); }
.faq-suche-keine a { color: var(--blau-text); font-weight: 600; }
.faq-suche-keine[hidden], .faq[hidden], .faq-gruppe[hidden] { display: none; }
.faq summary mark { background: #D6EEFA; color: inherit; border-radius: 2px; padding: 0 1px; }

/* Kontakt: Formular und Seitenleiste */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.formular { display: grid; gap: 22px; container-type: inline-size; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.feld { display: grid; gap: 8px; align-content: start; }
.feld label { font-weight: 600; font-size: 0.9375rem; color: var(--tinte); }
.feld .pflicht { color: var(--blau-text); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--feldrand); border-radius: var(--radius); background: var(--weiss); color: var(--tinte); font: 400 1rem/1.4 var(--text); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.feld textarea { min-height: 150px; resize: vertical; }
.feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%233F5264'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--tinte-2); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 1px; border-color: var(--blau-text); }
.feld-hilfe { font-size: 0.875rem; color: var(--tinte-3); }
.feld-fehler { font-size: 0.875rem; font-weight: 600; color: #A4262C; }
.feld-fehler:empty { display: none; }
.feld [aria-invalid="true"] { border-color: #A4262C; box-shadow: 0 0 0 1px #A4262C; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; }
.zustimmung input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--blau-text); }
.zustimmung label { font-weight: 400; color: var(--tinte-2); line-height: 1.5; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formular-pflicht { margin-bottom: -6px; }
.kein-umbruch { white-space: nowrap; }
.formular .knopf-haupt[disabled] { opacity: .6; cursor: progress; box-shadow: none; }
.formular-status { padding: 16px 18px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 500; }
.formular-status:empty { padding: 0; border: 0; }   /* bleibt als Live-Region im Baum der Vorleseprogramme */
.formular-status.gut { background: #E8F6EE; border-color: #9CD3B2; color: #14532D; }
.formular-status.schlecht { background: #FBEAEA; border-color: #E4A5A8; color: #7A1D22; }
.formular-status.laeuft { background: #EAF3FA; border-color: #A9C9E3; color: #0B3A5C; }
.kontakt-seite { display: grid; gap: 24px; }
.kontakt-seite .drohnen-zone { min-height: clamp(160px, 16vw, 240px); }
.kontakt-liste { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.kontakt-liste li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.kontakt-liste li > div { display: grid; gap: 2px; }
.kontakt-liste li > div > span:first-child { font-size: 0.8125rem; font-weight: 600; color: var(--tinte-3); }
.kontakt-liste a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--tinte); font-size: 1.0625rem; text-decoration-color: var(--linie); }
.kontakt-liste a:hover { text-decoration-color: var(--tinte); }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } .kontakt-seite .drohnen-zone { display: none; } }
@media (max-width: 560px) { .feld-paar { grid-template-columns: minmax(0, 1fr); } }
/* Feldpaare nur in einem breiten Formular: Unter 40rem schnitte das Auswahlfeld „Solaranlagen-Dokumentation“ ab */
@container (max-width: 40rem) { .feld-paar { grid-template-columns: minmax(0, 1fr); } }
/* Runde 9, A1: „Lieber direkt?“ über dem Formular, nur wo die Kontaktdaten unter das Formular rutschen */
.schnell { display: none; gap: 12px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--linie); }
.schnell p { font-weight: 600; color: var(--tinte); }
.schnell-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.schnell .knopf { padding: 0 12px; gap: 8px; }
.schnell .symbol { width: 20px; height: 20px; color: var(--blau-text); }
@media (max-width: 900px) { .schnell { display: grid; } }
@media (max-width: 340px) { .schnell-knoepfe { grid-template-columns: minmax(0, 1fr); } }
/* Runde 9, L1: Leistung als Kacheln (Auswahlknöpfe über der ganzen Kachel, unsichtbar, aber bedienbar) */
.kacheln { border: 0; padding: 0; margin: 0; min-width: 0; }
.kacheln legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 0.9375rem; color: var(--tinte); }
.kachel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }   /* 3 × 2 Leistungen, „Sonstiges“ breit darunter */
.kachel { position: relative; display: grid; gap: 8px; align-content: start; min-height: 96px; padding: 14px 14px 12px; border: 1px solid var(--feldrand); border-radius: var(--radius); background: var(--weiss); cursor: pointer; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--tinte); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.kachel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kachel .symbol { width: 28px; height: 28px; }
.kachel .haken { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; color: var(--blau-text); opacity: 0; scale: .6; transition: opacity .2s var(--ease-out), scale .3s var(--ease-expo); }
.kachel.breit { grid-column: 1 / -1; min-height: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.kachel:hover { border-color: var(--tinte-2); }
.kachel:has(input:checked) { border-color: var(--blau-text); box-shadow: 0 0 0 1px var(--blau-text); background: #EEF7FC; }
.kachel:has(input:checked) .haken { opacity: 1; scale: 1; }
.kachel:has(input:focus-visible) { outline: 2px solid var(--blau-text); outline-offset: 2px; }
.kacheln[data-ungueltig] .kachel { border-color: #A4262C; }
@container (max-width: 420px) { .kachel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kachel { min-height: 88px; padding: 12px; } }
/* Runde 9, R1: Häkchen an fertigen Pflichtfeldern (formular.js setzt .fertig an .feld, .kacheln und .zustimmung) */
.ok { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -0.2em; color: var(--gut); opacity: 0; scale: .5; transition: opacity .2s var(--ease-out), scale .35s var(--ease-expo); }
.zustimmung .ok { flex: none; margin: 3px 0 0; }
.fertig > label .ok, .fertig > legend .ok, .zustimmung.fertig .ok { opacity: 1; scale: 1; }
/* Runde 9, S2: Bestätigung statt Formular (formular.js) */
.formular[hidden], .bestaetigung[hidden] { display: none; }
.bestaetigung { display: grid; gap: 24px; padding: clamp(22px, 3vw, 36px); border: 1px solid #9CD3B2; border-radius: var(--radius); }   /* ohne Füllung: die Drohne fliegt unter dem Inhalt und steht am Handy neben dem Häkchen */
.bestaetigung-kopf { position: relative; min-height: 48px; }
.bestaetigung-symbol { width: 48px; height: 48px; color: var(--gut); }
.bestaetigung-meldung { font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1.4; color: #14532D; max-width: 40ch; }
.bestaetigung-meldung:focus-visible { outline-offset: 6px; }
.bestaetigung-titel { font-size: 0.9375rem; font-weight: 700; color: var(--tinte); margin-bottom: 8px; }
.weiter-liste { list-style: none; padding: 0; display: grid; gap: 14px; }
.weiter-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
.weiter-nr { grid-row: span 2; font-family: var(--schlagwort); font-weight: 700; color: var(--blau-text); }
.weiter-liste strong { font-weight: 600; }
.weiter-liste li > span:last-child { color: var(--tinte-2); }
.angaben { display: grid; gap: 6px; border-top: 1px solid var(--linie); padding-top: 14px; }
.angaben div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.angaben dt { color: var(--tinte-3); }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .angaben div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.bestaetigung-neu { justify-self: start; }
.bestaetigung.rein { animation: bestaetigung-rein .6s var(--ease-expo) both; }
@keyframes bestaetigung-rein { from { opacity: 0; translate: 0 10px; } }

/* Rechtstexte (Impressum, Datenschutz): ruhig, gut lesbar, ohne 3D */
.rechtstext { position: relative; z-index: 2; padding-block: clamp(48px, 7vw, 96px) var(--abstand); }
.rechtstext .huelle > * { max-width: 72ch; }
.rechtstext h1 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 28px; }
.rechtstext h2 { font-family: var(--schlagwort); font-weight: 765; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.01em; line-height: 1.2; margin: 44px 0 12px; }
.rechtstext h3 { font-size: 1.0625rem; font-weight: 600; margin: 26px 0 8px; }
.rechtstext p, .rechtstext ul, .rechtstext address { color: var(--tinte-2); margin-bottom: 12px; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext strong { color: var(--tinte); }
.rechtstext .stand { font-size: 0.9375rem; color: var(--tinte-3); }

/* Fehlerseite */
.fehlerseite { position: relative; z-index: 2; padding-block: clamp(64px, 10vw, 140px); }
.fehlerseite .schlagwort { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.fehlerseite .satz-mittel { margin-top: 16px; }
.fehlerseite .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* 11 Die 3D-Leinwand liegt fest über den Hintergründen und unter den Texten */
.leinwand { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity .2s var(--ease-out); }   /* gleich lang wie das Weichen des Standbilds */
.leinwand.an { opacity: 1; }

/* 12 Bewegung: Seitenwechsel sanft, bei reduzierter Bewegung gar nichts */
/* Gestaffeltes Einblenden: Kacheln unterhalb des Bildes zeigen ihren Inhalt erst, wenn sie ins Bild rücken.
   Die Linien stehen dabei fest. seite.js setzt .einblenden, die Reihenfolge --i und .sichtbar. */
.js .einblenden > * { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease-out), translate .8s var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
.js .einblenden.sichtbar > * { opacity: 1; translate: none; }
@media print { .js .einblenden > * { opacity: 1; translate: none; transition: none; } }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root) { animation: 200ms var(--ease-out) both seite-aus; }
::view-transition-new(root) { animation: 360ms var(--ease-out) both seite-ein; }
@keyframes seite-aus { to { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wortweise.bereit .wort { color: var(--tinte); filter: none; }
  .js .einblenden > * { opacity: 1; translate: none; }
  .faq::details-content { transition: none !important; }
  .einzelheiten::details-content { transition: none !important; }
  .dienst-listen.abhaken li .symbol { opacity: 1; scale: 1; }
  .preisgruppe.scharf .preis-zahl { color: var(--tinte); filter: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}