/* ============================================================
   Scheibel Klar — Fassung „Modern“
   ------------------------------------------------------------
   Nachbau des Google-AI-Studio-Entwurfs (Okt. 2026) ohne React
   und Tailwind. Aufbau und Bausteine wie bei AI Studio; die
   Farben folgen jetzt dem Logo: Türkis #68F2F4 (exakt aus
   sk-logo-large.png gemessen) auf tiefem Petrol-Navy. AI Studio
   hatte ein bläuliches Cyan (#22d3ee / #00c2ff) gewählt, das
   nicht zum Logo passt. WhatsApp bleibt grün — Signalfarbe.
   ============================================================ */

:root {
  --grund: #05161d;
  --grund-tief: #031016;
  --karte: #0a2631;
  --karte-hell: #0d3340;
  --karte-tief: #071d26;
  --tk: #68f2f4;            /* Logo-Türkis */
  --tk-hell: #a6f8f9;
  --tk-tief: #2fc4c9;
  --text: #f2fafb;
  --text-2: #cfe0e4;
  --text-3: #9fb7bd;
  --linie: rgba(255, 255, 255, .1);
  --linie-tk: rgba(104, 242, 244, .25);
  --gruen: #10b981;
  --gruen-hell: #34d399;
  --auf-hell: #04141a;      /* Schrift auf Türkis und Grün */
  --breite: 1240px;
  --rand: 20px;
  --kopf: 116px;            /* Mikroleiste + Navigation */
  --leiste: 0px;            /* früher Entwurfsleiste (bis 19.10.2026), jetzt immer 0 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + var(--leiste) - 20px); }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: rgba(104, 242, 244, .3); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--tk); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.innen { position: relative; z-index: 1; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
/* Akzentwort: Vollton im Logo-Türkis. AI Studio hatte hier Verlaufsschrift — das Logo ist flach
   gefärbt, und Verlaufsschrift kann der Prüfer nicht messen (VEST: Fehlalarme 1:1). */
.verlauf { color: var(--tk); }

/* Rasterkinder dürfen schmaler werden als ihr breitester Inhalt */
.raster > *, .hero-innen > *, .dienste > *, .rechner-raster > *, .preise > *, .foto-raster > *, .ueber-raster > *, .gebiet-raster > *, .kontakt-raster > *, .fuss-raster > *, .felder > * { min-width: 0; }

/* ── Knöpfe ─────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--tk); color: var(--auf-hell);
  font-size: .95rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(104, 242, 244, .55);
  transition: background-color .2s ease, transform .15s ease;
}
.knopf:hover { background: var(--tk-hell); transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf.gruen { background: var(--gruen); box-shadow: 0 12px 28px -12px rgba(16, 185, 129, .6); }
.knopf.gruen:hover { background: var(--gruen-hell); }
.knopf.dunkel { background: rgba(7, 29, 38, .9); color: var(--text); border: 1px solid rgba(255, 255, 255, .14); box-shadow: none; font-weight: 700; }
.knopf.dunkel:hover { background: var(--karte-hell); }
.knopf.klein { padding: 10px 16px; font-size: .85rem; border-radius: 11px; }
.knopf svg { width: 18px; height: 18px; }
.knopf.breit { width: 100%; white-space: normal; text-align: center; }

/* ── Kopf ───────────────────────────────────────────────────── */
.kopf { position: sticky; top: var(--leiste); z-index: 40; background: rgba(5, 22, 29, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--linie); }
.mikro { background: var(--karte); border-bottom: 1px solid var(--linie-tk); font-size: .8rem; }
.mikro .innen { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 36px; }
.mikro-links { display: flex; align-items: center; gap: 10px; color: var(--text-2); min-width: 0; }
.mikro-links b { font-weight: 600; color: var(--text); white-space: nowrap; }
.mikro-links i { font-style: normal; color: var(--text-3); }
.mikro-links .spruch { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tk); flex-shrink: 0; }
.mikro a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mikro a svg { color: var(--tk); width: 14px; height: 14px; }
@media (min-width: 900px) { .mikro-links .spruch, .mikro-links i { display: inline; } }
.nav-zeile .innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 80px; }
.marke { display: block; flex-shrink: 0; }
.marke img { height: 46px; width: auto; }
.nav { display: none; gap: 26px; font-size: .9rem; font-weight: 600; color: var(--text-2); }
.nav a { text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.nav a:hover { color: var(--tk); }
.kopf-knoepfe { display: none; gap: 10px; }
.menue-knopf { display: inline-flex; padding: 8px; border: 0; background: none; color: var(--text-2); cursor: pointer; }
.menue-knopf svg { width: 26px; height: 26px; }
.menue { display: none; padding: 8px var(--rand) 22px; background: rgba(3, 16, 22, .98); border-top: 1px solid var(--linie); }
.menue.offen { display: block; }
.menue > a { display: block; padding: 11px 0; color: var(--text-2); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.menue-knoepfe { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 640px) { .kopf-knoepfe { display: flex; } .menue-knoepfe { display: none; } }
@media (min-width: 1280px) { .nav { display: flex; } .menue-knopf, .menue, .menue.offen { display: none; } }   /* 19.10.2026: 1140 → 1280, seit „Aktuelles“ im Menü steht */

/* ── Abschnitte ─────────────────────────────────────────────── */
.abschnitt { position: relative; padding: 88px 0; }
.kopfblock { max-width: 50rem; margin: 0 auto 52px; text-align: center; }
.kopfblock.links { margin-left: 0; text-align: left; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--tk); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kicker svg { width: 16px; height: 16px; }
.titel { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem); font-weight: 800; color: #fff; }
.vorspann { margin-top: 16px; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); color: var(--text-2); }
.glanz { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); background: rgba(104, 242, 244, .09); }
.platzhalter { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(251, 191, 36, .6); background: rgba(120, 53, 15, .25); color: #fde68a; font-size: .88rem; }
.platzhalter b { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: #fcd34d; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { position: relative; padding: 40px 0 72px; overflow: hidden; }
/* Hero-Film hinter der Überschrift; zum Regler hin läuft er in den Seitengrund aus */
.hero-film { position: absolute; inset: 0 0 auto 0; height: min(100%, 980px); overflow: hidden; z-index: 0; }
.hero-film video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; background: var(--grund) url("film/eugen-standbild.jpg") center 30% / cover; }
.hero-film::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(5, 22, 29, .55), transparent 75%),
              linear-gradient(180deg, rgba(5, 22, 29, .78) 0%, rgba(5, 22, 29, .72) 45%, var(--grund) 92%); }
.film-hinweis { position: absolute; top: 12px; right: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(3, 16, 22, .75); color: var(--text-3); font-size: .7rem; }
.hero .glanz { top: 30px; left: 50%; width: min(1100px, 100%); height: 380px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(104, 242, 244, .14), transparent); border-radius: 0; }
.hero-innen { display: grid; gap: 44px; }
.hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 54rem; margin: 0 auto; }
.abzeichen { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: rgba(104, 242, 244, .1); border: 1px solid var(--linie-tk); color: var(--tk-hell); font-size: .85rem; font-weight: 700; margin-bottom: 22px; }
.abzeichen svg { color: var(--tk); width: 16px; height: 16px; }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 4.8rem); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1.04; }
.hero-p { margin-top: 22px; max-width: 44rem; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--text-2); }
.hero-p strong { color: #fff; }
.hero-knoepfe { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 32px; }
@media (min-width: 640px) { .hero-knoepfe { flex-direction: row; justify-content: center; width: auto; } }
.vertrauen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 30px; font-size: .9rem; color: var(--text-2); }
.vertrauen span { display: inline-flex; align-items: center; gap: 7px; }
.vertrauen svg { color: var(--tk); width: 17px; height: 17px; }

/* ── Vorher/Nachher-Regler ──────────────────────────────────── */
.vergleich { width: 100%; max-width: 980px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--linie-tk); background: var(--grund); box-shadow: 0 24px 60px -24px rgba(104, 242, 244, .25); }
.vergleich-kopf, .vergleich-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: var(--karte); font-size: .85rem; }
.vergleich-kopf { border-bottom: 1px solid var(--linie); }
.vergleich-fuss { border-top: 1px solid var(--linie); }
.vergleich-titel { display: inline-flex; align-items: center; gap: 8px; color: var(--tk-hell); font-weight: 700; }
.vergleich-titel svg { color: var(--tk); width: 16px; height: 16px; }
.wahl { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.wahl button { padding: 6px 12px; border: 1px solid transparent; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--text-2); font-size: .82rem; font-weight: 700; cursor: pointer; }
.wahl button:hover { background: rgba(255, 255, 255, .1); }
.wahl button[aria-pressed="true"] { background: var(--tk); color: var(--auf-hell); }
.buehne { position: relative; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y; user-select: none; cursor: ew-resize; background: #000; }
@media (min-width: 640px) { .buehne { aspect-ratio: 4 / 3; } }
@media (min-width: 1000px) { .buehne { aspect-ratio: 16 / 9; } }
.buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vorher-maske { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.marke-bild { position: absolute; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.marke-bild.nachher { right: 14px; background: rgba(104, 242, 244, .95); color: var(--auf-hell); }
.marke-bild.vorher { left: 14px; background: rgba(3, 16, 22, .85); color: #fff; }
.griff { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 3; width: 0; pointer-events: none; }
.griff::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--tk); box-shadow: 0 0 18px rgba(104, 242, 244, .9); }
.griff span { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: var(--karte); border: 2px solid var(--tk); color: var(--tk); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.griff svg { width: 22px; height: 22px; }
/* Unsichtbares Schiebeelement nur für die Tastatur; Maus und Finger steuert seite.js über die Bühne,
   damit am Handy das senkrechte Scrollen frei bleibt */
.regler-eingabe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.regler-eingabe:focus-visible + .griff span { outline: 3px solid #fff; outline-offset: 3px; }
.positionen { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.vergleich-quelle { display: inline-flex; align-items: center; gap: 8px; color: var(--tk-hell); }
.vergleich-quelle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tk); }

/* ── Leistungen ─────────────────────────────────────────────── */
.dienste { display: grid; gap: 24px; }
@media (min-width: 720px) { .dienste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dienste { grid-template-columns: repeat(3, 1fr); } }
.dienst { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: rgba(10, 38, 49, .72); border: 1px solid var(--linie-tk); transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.dienst:hover { border-color: rgba(104, 242, 244, .6); transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(104, 242, 244, .3); }
.dienst-bild { position: relative; height: 190px; overflow: hidden; }
.dienst-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dienst:hover .dienst-bild img { transform: scale(1.05); }
.dienst-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10, 38, 49), transparent 60%); }
/* Vorher | Nachher nebeneinander (zwei echte Fotos derselben Scheibe, kein Schieber: Standpunkte nicht deckungsgleich) */
.dienst-bild.geteilt { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--tk); }
.dienst-bild.geteilt img { min-width: 0; object-position: 50% 40%; }
.dienst-bild.geteilt::after { background: linear-gradient(to top, rgb(10, 38, 49), transparent 22%); }
.bild-marke { position: absolute; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(3, 16, 22, .82); color: #fff; }
.bild-marke.links { left: 12px; }
.bild-marke.rechts { right: 12px; background: var(--tk); color: var(--auf-hell); }
/* Noch kein Foto: ruhige Fläche mit Symbol */
.dienst-bild.leer { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(104, 242, 244, .22), transparent 60%), repeating-linear-gradient(135deg, rgba(104, 242, 244, .05) 0 2px, transparent 2px 16px), rgb(8, 33, 43); }
.dienst-bild.leer svg { width: 64px; height: 64px; color: var(--tk); opacity: .55; stroke-width: 1.4; }
.dienst-bild.leer::after { background: linear-gradient(to top, rgb(10, 38, 49), transparent 45%); }
.dienst-text { flex: 1; display: flex; flex-direction: column; padding: 26px; }
.dienst-kopf { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.symbol { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: rgba(104, 242, 244, .12); border: 1px solid var(--linie-tk); color: var(--tk); transition: background-color .25s ease, color .25s ease; }
.symbol svg { width: 22px; height: 22px; }
.dienst:hover .symbol { background: var(--tk); color: var(--auf-hell); }
.dienst h3 { font-size: 1.22rem; color: #fff; }
.dienst-kopf p { margin-top: 4px; font-size: .88rem; color: var(--tk-hell); font-weight: 600; }
.dienst-text > p { font-size: .95rem; color: var(--text-2); margin-bottom: 18px; }
.haken { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 9px; }
.haken li { position: relative; padding-left: 26px; font-size: .9rem; color: var(--text-2); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .22em; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(104, 242, 244, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368f2f4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.haken strong { color: #fff; }
.dienst-link { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; color: var(--tk); font-size: .9rem; font-weight: 700; text-decoration: none; }
.dienst-link:hover { color: #fff; }
.dienst-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.dienst-link:hover svg { transform: translateX(3px); }
.dienste-fuss { margin-top: 36px; text-align: center; color: var(--text-2); }

/* ── Preisrechner ───────────────────────────────────────────── */
.rechner { position: relative; overflow: hidden; padding: 26px; border-radius: 26px; background: rgba(10, 38, 49, .85); border: 1px solid var(--linie-tk); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
@media (min-width: 720px) { .rechner { padding: 40px; } }
.rechner .glanz { top: -120px; right: -120px; width: 380px; height: 380px; }
.rechner-kopf { position: relative; display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--linie); }
@media (min-width: 900px) { .rechner-kopf { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.rechner-kopf h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); color: #fff; font-weight: 800; }
.rechner-kopf p { margin-top: 10px; max-width: 42rem; color: var(--text-2); }
.zuruecksetzen { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(3, 16, 22, .6); color: var(--text-2); font-size: .85rem; font-weight: 700; cursor: pointer; }
.zuruecksetzen:hover { color: #fff; }
.zuruecksetzen svg { width: 15px; height: 15px; }
.modus { display: grid; gap: 6px; margin-bottom: 28px; padding: 6px; border-radius: 14px; background: rgba(3, 16, 22, .7); border: 1px solid var(--linie); }
@media (min-width: 720px) { .modus { grid-template-columns: 1fr 1fr; } }
.modus button { padding: 12px 14px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-size: .9rem; font-weight: 700; cursor: pointer; text-align: center; }
.modus button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.modus button[aria-pressed="true"] { background: var(--tk); color: var(--auf-hell); }
.modus small { display: block; font-weight: 500; font-size: .78rem; opacity: .85; }
.rechner-raster { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .rechner-raster { grid-template-columns: 7fr 5fr; gap: 36px; } }
.gruppe-titel { margin: 0 0 12px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tk); }
.gruppe + .gruppe { margin-top: 26px; }
.posten-liste { display: grid; gap: 10px; }
@media (min-width: 640px) { .posten-liste.zwei { grid-template-columns: 1fr 1fr; } }
.posten { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(3, 16, 22, .5); border: 1px solid rgba(255, 255, 255, .1); transition: border-color .2s ease; }
.posten:hover { border-color: var(--linie-tk); }
.posten.aktiv { border-color: rgba(104, 242, 244, .55); background: rgba(13, 51, 64, .7); }
.posten-name { font-size: .93rem; font-weight: 600; color: #fff; }
.posten-preis { display: block; margin-top: 2px; font-size: .8rem; color: var(--text-3); font-weight: 500; }
.zaehler { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.zaehler button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: var(--karte-tief); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.zaehler button:hover { border-color: var(--tk); color: var(--tk); }
.zaehler output { min-width: 2.2ch; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; }
.schalter { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; background: rgba(3, 16, 22, .45); border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; margin-top: 10px; }
.schalter input { width: 20px; height: 20px; accent-color: var(--tk); flex-shrink: 0; }
.schalter span { font-size: .92rem; font-weight: 600; }
.schalter small { display: block; font-size: .8rem; color: var(--text-3); font-weight: 500; }
.schalter.aus { opacity: .6; cursor: default; }
.aufklapper { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(3, 16, 22, .45); color: #fff; font-weight: 700; font-size: .93rem; cursor: pointer; text-align: left; }
.aufklapper:hover { border-color: var(--linie-tk); }
.aufklapper small { font-weight: 500; color: var(--text-3); }
.aufklapper svg { width: 18px; height: 18px; color: var(--tk); transition: transform .2s ease; }
.aufklapper[aria-expanded="true"] svg { transform: rotate(180deg); }
.aufklapp-inhalt { padding-top: 10px; }
.aufklapp-inhalt[hidden] { display: none; }
.flaeche { padding: 14px; border-radius: 13px; background: rgba(3, 16, 22, .45); border: 1px solid rgba(255, 255, 255, .1); }
.flaeche-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; font-weight: 600; margin-bottom: 8px; }
.flaeche-kopf output { color: var(--tk); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flaeche input[type="range"] { width: 100%; accent-color: var(--tk); }
.flaeche small { display: block; margin-top: 4px; color: var(--text-3); font-size: .8rem; }
.zusammen { position: sticky; top: calc(var(--kopf) + var(--leiste) + 12px); padding: 24px; border-radius: 20px; background: linear-gradient(180deg, var(--karte-hell), var(--karte-tief)); border: 2px solid rgba(104, 242, 244, .4); }
.zusammen-titel { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tk); }
.zusammen-unter { margin-top: 2px; font-size: .85rem; color: var(--text-3); }
.zeilen { list-style: none; margin: 16px 0 0; padding: 14px 0; border-block: 1px solid var(--linie); display: grid; gap: 8px; font-size: .9rem; }
.zeilen li { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.zeilen li b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeilen .leer { color: var(--text-3); }
.summe-titel { margin-top: 16px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tk); }
.summe { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.summe b { font-size: clamp(2.3rem, 1.8rem + 2vw, 3rem); font-weight: 800; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.summe span { color: var(--text-3); font-size: .9rem; }
.mindest { margin-top: 6px; font-size: .82rem; color: var(--tk-hell); }
.mindest[hidden] { display: none; }
.zusammen-hinweis { margin: 12px 0 18px; font-size: .82rem; color: var(--text-3); }
.zusammen .knopf + .knopf { margin-top: 10px; }

/* ── Preisliste ─────────────────────────────────────────────── */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.filter button { padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 38, 49, .6); color: var(--text-2); font-size: .88rem; font-weight: 700; cursor: pointer; }
.filter button:hover { color: #fff; border-color: var(--linie-tk); }
.filter button[aria-pressed="true"] { background: var(--tk); color: var(--auf-hell); border-color: var(--tk); }
/* Preise als Liste je Bereich, ein „Jetzt anfragen“ pro Bereich (Charly, 10.10.: Karten je Fenster
   „irritiert, macht keinen Sinn“). Bei „Alle Preise“ zweispaltig, sonst ein Block in der Mitte. */
.preisgruppen { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 600px)); justify-content: center; align-items: start; }
.js .preisgruppe.weg { display: none; }
.preisgruppe { display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: rgba(10, 38, 49, .6); border: 1px solid var(--linie-tk); }
@media (min-width: 720px) { .preisgruppe { padding: 30px; } }
.gruppen-kopf { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.gruppen-kopf h3 { font-size: 1.3rem; color: #fff; }
.gruppen-kopf p { font-size: .88rem; color: var(--text-3); }
.preisliste { list-style: none; margin: 4px 0 22px; padding: 0; }
.preis-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.preis-zeile:last-child { border-bottom: 0; }
.preis-name { flex: 1 1 12rem; color: var(--text); font-size: .95rem; }
.preis-wert { margin-left: auto; display: flex; align-items: baseline; gap: 8px; text-align: right; }
.preis-wert b { font-size: 1.15rem; font-weight: 800; color: var(--tk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.preis-wert small { font-size: .8rem; color: var(--text-3); }
.preis-anfrage { margin-top: auto; align-self: flex-start; }
.preis-band { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 20px; background: rgba(3, 16, 22, .55); border: 1px solid var(--linie); }
@media (min-width: 900px) { .preis-band { flex-direction: row; align-items: center; justify-content: space-between; } }
.preis-band-text { display: flex; gap: 14px; align-items: flex-start; }
.preis-band h4 { font-size: 1.05rem; color: #fff; margin-bottom: 4px; }
.preis-band p { font-size: .9rem; color: var(--text-2); }
.sicherheit { margin-top: 18px; padding: 20px 22px; border-radius: 18px; background: rgba(10, 38, 49, .45); border: 1px solid var(--linie); font-size: .88rem; color: var(--text-2); }
.sicherheit h4 { display: flex; align-items: center; gap: 8px; font-size: .98rem; color: #fff; margin-bottom: 8px; }
.sicherheit h4 svg { color: var(--tk); width: 18px; height: 18px; }
.sicherheit p + p { margin-top: 8px; }

/* ── Foto per WhatsApp ──────────────────────────────────────── */
.foto-karte { position: relative; overflow: hidden; padding: 30px; border-radius: 28px; background: linear-gradient(90deg, var(--karte), var(--karte-hell), var(--karte)); border: 2px solid var(--linie-tk); }
@media (min-width: 720px) { .foto-karte { padding: 48px; } }
.foto-raster { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .foto-raster { grid-template-columns: 7fr 5fr; } }
.foto-karte h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; color: #fff; }
.foto-karte .vorspann { color: var(--text); }
.schritte { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 640px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritte li { padding: 16px; border-radius: 14px; background: rgba(3, 16, 22, .55); border: 1px solid rgba(255, 255, 255, .1); counter-increment: s; }
.schritte li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; border-radius: 9px; background: var(--tk); color: var(--auf-hell); font-weight: 800; }
.schritte b { display: block; color: #fff; margin-bottom: 4px; }
.schritte span { font-size: .88rem; color: var(--text-2); }
.wa-box { padding: 28px; border-radius: 20px; background: rgba(3, 16, 22, .85); border: 1px solid rgba(104, 242, 244, .35); text-align: center; }
.wa-symbol { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: rgba(16, 185, 129, .16); border: 1px solid rgba(52, 211, 153, .45); color: var(--gruen-hell); }
.wa-symbol svg { width: 30px; height: 30px; }
.wa-box h3 { font-size: 1.2rem; color: #fff; }
.wa-box p { color: var(--text-3); font-size: .9rem; margin-top: 4px; }
.wa-nummer { margin: 10px 0 18px; font-size: 1.25rem; font-weight: 800; color: var(--tk); font-variant-numeric: tabular-nums; }
.wa-klein { margin-top: 12px; font-size: .8rem; color: var(--text-3); }

/* ── Über Eugen ─────────────────────────────────────────────── */
.ueber-raster { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .ueber-raster { grid-template-columns: 5fr 7fr; gap: 64px; } }
.portrait-spalte { position: relative; max-width: 460px; width: 100%; margin: 0 auto; }
.portrait-spalte .glanz { inset: -20px; border-radius: 30px; }
.portrait { position: relative; border-radius: 28px; overflow: hidden; border: 2px solid rgba(104, 242, 244, .4); background: var(--karte); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.erfahrung { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(10, 38, 49, .92); border: 1px solid var(--linie-tk); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.erfahrung b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tk); }
.erfahrung span { display: block; color: #fff; font-weight: 700; font-size: .95rem; }
.erfahrung i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tk); color: var(--auf-hell); font-style: normal; flex-shrink: 0; }
.erfahrung i svg { width: 22px; height: 22px; }
.adresse-chip { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 14px; background: rgba(3, 16, 22, .7); border: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; color: var(--text-2); }
.adresse-chip svg { color: var(--tk); width: 18px; height: 18px; }
.ueber-text h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 800; color: #fff; }
.zitat { position: relative; margin: 24px 0; padding: 22px 24px; border-radius: 18px; background: rgba(13, 51, 64, .55); border: 1px solid var(--linie-tk); }
.zitat svg { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; color: rgba(104, 242, 244, .3); }
.zitat p { color: var(--tk-hell); font-size: 1.15rem; font-weight: 700; font-style: italic; }
.zitat footer { margin-top: 8px; font-size: .85rem; color: var(--text-3); }
.ueber-text > p { color: var(--text-2); font-size: 1.02rem; }
.ueber-text > p + p { margin-top: 14px; }
.werte { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .werte { grid-template-columns: 1fr 1fr; } }
.werte li { position: relative; padding-left: 28px; font-size: .93rem; color: var(--text-2); }
.werte li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--tk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304141a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.werte strong { color: #fff; }
.ueber-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Einsatzgebiet ──────────────────────────────────────────── */
.gebiet-karte { position: relative; overflow: hidden; padding: 30px; border-radius: 28px; background: rgba(10, 38, 49, .8); border: 1px solid var(--linie-tk); }
@media (min-width: 720px) { .gebiet-karte { padding: 48px; } }
.gebiet-karte .glanz { left: -80px; bottom: -80px; width: 320px; height: 320px; }
.gebiet-raster { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .gebiet-raster { grid-template-columns: 5fr 7fr; } }
.gebiet-karte h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; color: #fff; }
.gebiet-punkte { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 14px; }
.gebiet-punkte li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--text-2); }
.gebiet-punkte li i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: rgba(104, 242, 244, .15); color: var(--tk); font-style: normal; }
.gebiet-punkte li i svg { width: 18px; height: 18px; }
.gebiet-punkte strong { color: #fff; }
.gebiet-tafel { padding: 26px; border-radius: 20px; background: rgba(3, 16, 22, .6); border: 1px solid var(--linie); }
.gebiet-tafel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.gebiet-tafel-kopf b { display: inline-flex; align-items: center; gap: 7px; color: #fff; }
.gebiet-tafel-kopf b svg { color: var(--tk); width: 17px; height: 17px; }
.gebiet-tafel-kopf span { color: var(--tk); font-weight: 700; }
.heimat { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(13, 51, 64, .6); border: 1px solid rgba(104, 242, 244, .4); }
.heimat svg { width: 22px; height: 22px; color: var(--tk); }
.heimat b { display: block; color: #fff; }
.heimat span { font-size: .85rem; color: var(--text-2); }
.gebiet-tafel .platzhalter { margin-top: 14px; }
.gebiet-tafel-fuss { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--text-3); }
.gebiet-tafel-fuss a { color: var(--tk); font-weight: 700; text-decoration: none; }

/* ── Kundenstimmen ──────────────────────────────────────────── */
.stimmen-leer { max-width: 760px; margin: 0 auto; padding: 32px; border-radius: 22px; border: 2px dashed rgba(104, 242, 244, .35); background: rgba(10, 38, 49, .45); text-align: center; }
.stimmen-leer svg { width: 34px; height: 34px; color: var(--tk); margin: 0 auto 12px; display: block; }
.stimmen-leer h3 { font-size: 1.2rem; color: #fff; margin-bottom: 8px; }
.stimmen-leer p { color: var(--text-2); font-size: .95rem; }
.stimmen-leer .platzhalter { margin-top: 18px; }

/* ── Kontakt ────────────────────────────────────────────────── */
.kontakt-raster { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .kontakt-raster { grid-template-columns: 5fr 7fr; gap: 36px; } }
.kontakt-karte, .formular { padding: 28px; border-radius: 26px; background: rgba(10, 38, 49, .8); border: 1px solid var(--linie-tk); }
@media (min-width: 720px) { .formular { padding: 36px; } }
.kontakt-karte h3 { font-size: 1.25rem; color: #fff; }
.kontakt-karte > p { color: var(--text-3); font-size: .9rem; margin: 2px 0 18px; }
.wege { display: grid; gap: 12px; }
.weg { display: flex; gap: 14px; align-items: flex-start; padding: 15px; border-radius: 16px; background: rgba(3, 16, 22, .55); border: 1px solid rgba(255, 255, 255, .12); text-decoration: none; transition: border-color .2s ease; }
a.weg:hover { border-color: var(--tk); }
.weg.gruen { background: rgba(6, 78, 59, .3); border-color: rgba(16, 185, 129, .35); }
a.weg.gruen:hover { border-color: var(--gruen-hell); }
.weg i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: rgba(104, 242, 244, .15); color: var(--tk); font-style: normal; }
.weg.gruen i { background: rgba(16, 185, 129, .2); color: var(--gruen-hell); }
.weg i svg { width: 20px; height: 20px; }
.weg small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tk); }
.weg.gruen small { color: var(--gruen-hell); }
.weg b { display: block; color: #fff; font-size: 1.02rem; }
.weg span { display: block; font-size: .85rem; color: var(--text-2); }
.formular h3 { font-size: 1.3rem; color: #fff; margin-bottom: 18px; }
.felder { display: grid; gap: 14px; }
@media (min-width: 640px) { .felder.zwei { grid-template-columns: 1fr 1fr; } }
.felder.plz-ort { grid-template-columns: 6.5rem 1fr; }
.feld-hinweis { margin: -4px 0 0; font-size: .8rem; color: var(--text-2); }
.feld label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 700; color: var(--text-2); }
.feld input, .feld select, .feld textarea { width: 100%; max-width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 16, 22, .7); color: #fff; font-size: .95rem; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #6f8a91; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--tk); outline-offset: 0; border-color: transparent; }
.formular-knoepfe { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .formular-knoepfe { grid-template-columns: 1fr 1fr; } }
.formular-hinweis { margin-top: 14px; font-size: .82rem; color: var(--text-3); }

/* ── Fuß ────────────────────────────────────────────────────── */
.fuss { background: var(--grund-tief); border-top: 1px solid var(--linie-tk); padding: 64px 0 calc(110px + env(safe-area-inset-bottom)); color: var(--text-3); font-size: .9rem; }
@media (min-width: 640px) { .fuss { padding-bottom: 44px; } }
.fuss-raster { display: grid; gap: 36px; }
@media (min-width: 720px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.fuss .marke img { height: 52px; }
.fuss-text { margin-top: 16px; }
.fuss-spruch { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(10, 38, 49, .6); border: 1px solid var(--linie); color: var(--tk-hell); font-weight: 600; font-style: italic; }
.fuss h4 { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fuss ul a { color: var(--text-3); text-decoration: none; }
.fuss ul a:hover { color: var(--tk); }
.fuss address { font-style: normal; display: grid; gap: 9px; }
.fuss address a { color: var(--text-2); text-decoration: none; }
.fuss address a:hover { color: var(--tk); }
.fuss-unten { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .82rem; }
.fuss-unten a { color: var(--text-2); }

/* ── WhatsApp schwebend (Rechner) + Leiste unten (Handy) ────── */
.wa-schwebend { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: none; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (min-width: 640px) { .wa-schwebend { display: flex; } }
.wa-knopf { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--gruen); color: var(--auf-hell); font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(16, 185, 129, .4); transition: transform .2s ease, background-color .2s ease; }
.wa-knopf:hover { background: var(--gruen-hell); transform: scale(1.04); }
.wa-knopf svg { width: 20px; height: 20px; }
.wa-feld { width: min(360px, calc(100vw - 48px)); padding: 18px; border-radius: 20px; background: var(--karte); border: 2px solid rgba(52, 211, 153, .5); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .8); }
.wa-feld[hidden] { display: none; }
.wa-feld-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linie); }
.wa-person { display: flex; align-items: center; gap: 12px; }
.wa-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gruen-hell); }
.wa-person b { display: block; color: #fff; }
.wa-person span { display: block; font-size: .8rem; color: var(--text-3); }
.wa-zu { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 4px; }
.wa-zu:hover { color: #fff; }
.wa-zu svg { width: 18px; height: 18px; }
.wa-feld p { font-size: .88rem; color: var(--text-2); margin-bottom: 10px; }
.wa-feld label { display: block; font-size: .8rem; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.wa-feld textarea { width: 100%; min-height: 80px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 16, 22, .75); color: #fff; font-size: .9rem; resize: none; margin-bottom: 12px; }
.wa-feld-knoepfe { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.handy-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(5, 22, 29, .96); border-top: 1px solid var(--linie-tk); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.handy-leiste .knopf { padding: 12px 10px; font-size: .9rem; }
@media (min-width: 640px) { .handy-leiste { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── Überschrift wird Wort für Wort klar (MotionSites „Vision Reveal“) ── */
.wortweise .wort { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px);
  animation: wortKlar .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.15s + var(--i) * .13s); }
@keyframes wortKlar { to { opacity: 1; filter: blur(0); transform: none; } }

/* ── SK-Monogramm als Fenster (MotionSites „Arceage Stats“, Teil Logo-Maske) ── */
.sk-rahmen { display: flex; flex-direction: column; align-items: center; margin: 0 auto 30px; filter: drop-shadow(0 0 28px rgba(104, 242, 244, .35)); }
.sk-fenster { width: clamp(120px, 13vw, 180px); aspect-ratio: 332 / 520; background: var(--karte-hell);
  -webkit-mask: url("bilder/sk-maske.webp") center / contain no-repeat; mask: url("bilder/sk-maske.webp") center / contain no-repeat;
  transform: scale(.86) translateY(18px); opacity: 0; transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease; }
.sk-rahmen.sichtbar .sk-fenster { transform: none; opacity: 1; }
.sk-fenster { position: relative; }
.sk-fenster video { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.2) saturate(1.1); }
/* Schleier im Logo-Türkis, damit das Monogramm als Logo lesbar bleibt */
.sk-fenster::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(160deg, rgba(104, 242, 244, .5), rgba(104, 242, 244, .14) 70%); }
.sk-hinweis { margin-top: 8px; font-size: .68rem; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .wortweise .wort { animation: none; opacity: 1; filter: none; transform: none; }
  .sk-fenster { transform: none; opacity: 1; transition: none; }
}

/* ── Einsatzgebiet: selbst gezeichnete Karte (50 km Fahrstrecke) + PLZ-Prüfung, 19.10.2026 ── */
.gebiet-radius { margin: 14px 0 12px; font-size: .92rem; color: var(--text-2); }
.gebiet-radius b { color: #fff; }
.gebiet-kartenlink { position: relative; display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--linie-tk); background: radial-gradient(circle at 50% 50%, rgba(104, 242, 244, .06), transparent 70%), rgb(4, 19, 25); text-decoration: none; }
.gebiet-kartenlink:hover { border-color: rgba(104, 242, 244, .6); }
.gebiet-kartenlink:focus-visible { outline: 2px solid var(--tk); outline-offset: 3px; }
.gebiet-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; font-family: inherit; }
.gebiet-svg .flaeche { fill: rgba(104, 242, 244, .16); stroke: var(--tk); stroke-width: .5; stroke-linejoin: round; }
.gebiet-svg .ring { fill: none; stroke: rgba(104, 242, 244, .25); stroke-width: .3; stroke-dasharray: 1.2 1.2; }
.gebiet-svg text.radius { fill: var(--tk); font-size: 2.8px; }
.gebiet-svg text { font-size: 3.3px; font-weight: 700; paint-order: stroke; stroke: rgb(4, 19, 25); stroke-width: .9px; stroke-linejoin: round; }
.gebiet-svg text tspan { font-weight: 500; }
.gebiet-svg .ort.drin circle { fill: var(--tk); }
.gebiet-svg .ort.drin text { fill: #fff; }
.gebiet-svg .ort.weit circle { fill: #8aa3aa; }
.gebiet-svg .ort.weit text { fill: #b9cdd2; }
.gebiet-svg .sitz circle { fill: rgba(104, 242, 244, .3); }
.gebiet-svg .sitz .kern { fill: var(--tk); stroke: #fff; stroke-width: .4; }
.gebiet-svg .sitz text { fill: var(--tk); font-size: 3.6px; font-weight: 800; }
.gebiet-svg .massstab path { stroke: #b9cdd2; stroke-width: .4; fill: none; }
.gebiet-svg .massstab text, .gebiet-svg text.nord { fill: #b9cdd2; font-size: 2.8px; }
.gebiet-svg path.nord { fill: #b9cdd2; }
@media (max-width: 480px) {
  .gebiet-karte { padding: 18px; }
  .gebiet-tafel { padding: 16px; }
  .gebiet-svg text { font-size: 4.4px; }
  .gebiet-svg text tspan { display: none; }        /* am Handy nur Ortsnamen, km zeigt die PLZ-Prüfung */
  .gebiet-svg .sitz text { font-size: 4.6px; }
}
.gebiet-maps { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--linie-tk); background: rgba(3, 16, 22, .9); color: var(--tk); font-size: .85rem; font-weight: 700; }
.gebiet-kartenlink:hover .gebiet-maps { color: #fff; }
.gebiet-maps svg { width: 15px; height: 15px; }
.gebiet-quelle { margin-top: 8px; font-size: .72rem; line-height: 1.5; color: var(--text-3); }
.gebiet-quelle a { color: var(--text-3); }
.plz-pruefung { margin-top: 18px; }
.plz-pruefung label { display: block; margin-bottom: 8px; font-size: .9rem; font-weight: 700; color: #fff; }
.plz-zeile { display: flex; gap: 10px; }
.plz-zeile input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 16, 22, .7); color: #fff; font-size: 1rem; }
.plz-zeile input::placeholder { color: #6f8a91; }
.plz-zeile input:focus { outline: 2px solid var(--tk); outline-offset: 0; border-color: transparent; }
.plz-ergebnis:not(:empty) { margin-top: 12px; padding: 12px 14px; border-radius: 12px; display: grid; gap: 10px; justify-items: start; font-size: .9rem; color: var(--text); background: rgba(255, 255, 255, .05); border: 1px solid var(--linie); }
.plz-ergebnis.drin { border-color: rgba(104, 242, 244, .5); background: rgba(104, 242, 244, .08); }
.plz-ergebnis.drin b { color: var(--tk); }
.plz-ergebnis.weit b { color: #fff; }
.plz-hinweis { margin-top: 8px; font-size: .78rem; color: var(--text-3); }

/* ── Aktuelles: Kombi-Gutschein (19.10.2026) ── */
.aktuell-karte { position: relative; overflow: hidden; padding: 28px; border-radius: 28px; background: rgba(10, 38, 49, .8); border: 1px solid var(--linie-tk); }
@media (min-width: 720px) { .aktuell-karte { padding: 48px; } }
.aktuell-karte .glanz { right: -90px; top: -90px; width: 340px; height: 340px; }
.aktuell-raster { position: relative; display: grid; gap: 32px; align-items: center; }
.aktuell-raster > * { min-width: 0; }
@media (min-width: 960px) { .aktuell-raster { grid-template-columns: 7fr 5fr; gap: 56px; } }
.aktuell-karte h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; color: #fff; }
.aktuell-text .vorspann { color: var(--text); }
.aktuell-text .vorspann a { color: var(--tk); font-weight: 700; }
.gutschein { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(104, 242, 244, .16), rgba(104, 242, 244, .05)); border: 1px solid rgba(104, 242, 244, .45); }
.gutschein-teil { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; }
.gutschein-teil + .gutschein-plus + .gutschein-teil { border-left: 2px dashed rgba(104, 242, 244, .45); }
.gutschein-teil b { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1; font-weight: 800; color: var(--tk); font-variant-numeric: tabular-nums; }
.gutschein-partner { margin-top: 6px; font-weight: 800; color: #fff; }
.gutschein-teil span:last-child { font-size: .88rem; color: var(--text-2); }
.gutschein-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--grund); border: 1px solid rgba(104, 242, 244, .45); color: var(--tk); font-weight: 800; }
/* Kerben wie bei einem Abreiß-Gutschein */
.gutschein::before, .gutschein::after { content: ""; position: absolute; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: rgb(10, 38, 49); border: 1px solid rgba(104, 242, 244, .45); }
.gutschein::before { top: -10px; clip-path: inset(50% 0 0 0); }
.gutschein::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.gutschein-satz { font-size: 1.05rem; font-weight: 700; color: #fff; }
.aktuell-fuss { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.aktuell-fuss p { font-size: .9rem; color: var(--text-2); }
.aktuell-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.flyer-platz { margin: 0; width: 100%; max-width: 380px; justify-self: center; }
.flyer-leer { aspect-ratio: 0.7; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; border-radius: 20px; border: 2px dashed rgba(104, 242, 244, .35); background: repeating-linear-gradient(135deg, rgba(104, 242, 244, .04) 0 2px, transparent 2px 16px), rgba(3, 16, 22, .55); text-align: center; }
.flyer-leer > svg { width: 56px; height: 56px; color: var(--tk); opacity: .55; }
@media (max-width: 420px) { .gutschein-teil { padding: 16px 14px; } }
.gutschein-teil + .gutschein-plus + .gutschein-teil { padding-left: 28px; }
@media (max-width: 959px) { .flyer-platz { max-width: 300px; } }
@media (min-width: 1280px) and (max-width: 1439px) { .nav { gap: 18px; } }
.flyer-knopf { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--linie-tk); border-radius: 18px; overflow: hidden; background: none; cursor: zoom-in; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
.flyer-knopf img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.flyer-knopf:hover img { transform: scale(1.02); }
.flyer-knopf:focus-visible { outline: 2px solid var(--tk); outline-offset: 3px; }
.flyer-lupe { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(3, 16, 22, .88); color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.flyer-dialog { max-width: min(92vw, 720px); max-height: 92vh; padding: 0; border: 0; border-radius: 16px; background: #031016; overflow: auto; }
.flyer-dialog::backdrop { background: rgba(2, 10, 14, .85); }
.flyer-dialog img { display: block; width: 100%; height: auto; }
.flyer-zu { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(3, 16, 22, .9); color: #fff; cursor: pointer; }
.flyer-zu svg { width: 22px; height: 22px; }

/* ── Über Eugen: freigestelltes Foto (20.10.2026), Figur unten bündig vor eigenem Grund ── */
.portrait.frei { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(70% 55% at 50% 42%, rgba(104, 242, 244, .28), transparent 70%), linear-gradient(180deg, var(--karte-hell), var(--karte)); }
.portrait.frei img { width: auto; height: 100%; max-width: 100%; aspect-ratio: auto; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.eugen-text { margin-top: 6px; }
.eugen-text p { margin-top: 14px; color: var(--text-2); }
.eugen-text .hallo { margin-top: 0; font-size: 1.5rem; font-weight: 800; color: var(--tk); }
.eugen-text .gruss { color: #fff; font-weight: 700; }
.ueber-text h2 { margin-bottom: 18px; }
#ueber-uns .werte { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }

/* ── Kundenstimmen von Google (21.10.2026) ── */
.sterne { color: #fbbf24; letter-spacing: .08em; }
.stimmen-gesamt { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 10px; margin: -24px 0 28px; color: var(--text-2); }
.stimmen-gesamt b { font-size: 1.4rem; color: #fff; }
.stimmen-gesamt small { color: var(--text-3); }
.stimmen { display: grid; gap: 20px; max-width: 920px; margin: 0 auto; }
@media (min-width: 760px) { .stimmen { grid-template-columns: 3fr 2fr; align-items: start; } }
.stimme { margin: 0; padding: 26px; border-radius: 22px; background: rgba(10, 38, 49, .72); border: 1px solid var(--linie-tk); display: flex; flex-direction: column; gap: 14px; }
.stimme blockquote { margin: 0; }
.stimme blockquote p { color: var(--text); font-size: 1.05rem; line-height: 1.6; }
.stimme figcaption b { display: block; color: #fff; }
.stimme figcaption span { font-size: .82rem; color: var(--text-3); }
.stimmen-link { margin-top: 22px; text-align: center; }
.stimmen-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--tk); font-weight: 700; text-decoration: none; }
.stimmen-link a:hover { color: #fff; }
.stimmen-link svg { width: 17px; height: 17px; }