/* Stil dark-luxury (kit-web, INT-2026-1869): Nacht-Navy, warmes Goldlicht, blaues Akzentlicht, große Bilder mit Text darüber.
   Übernommen aus dem Prototyp des Designers (projekte/website-marhauer-workflow/prototyp-dark-luxury/stil.css); Abweichungen:
   .hero-foto statt .hero-bild (Kit-Prüfung), .karussell-punkte statt .punkte (Kit-Klasse der Leistungslisten), Tokens für die
   Kontrastprüfung, Unterseiten (Leistungen, Kontakt, Termin, Recht) und 48-px-Ziele. Kein Skript. Bewegung nur unter
   prefers-reduced-motion: no-preference. Rezepte erklärt im Designer-Gehirn (gehirn/umsetzung/designer/methoden/dark-luxury-rezepte.md). */
@font-face {
  font-family: "Figtree";
  src: url("figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --nacht: #05070D;        /* Grund, fast Schwarz mit Blaustich */
  --nacht-2: #0A0F1C;      /* Flächen eine Stufe heller */
  --navy: #0F1A3A;         /* Navy für Verläufe */
  --glas: rgba(255, 255, 255, .045);
  --glas-rand: rgba(255, 255, 255, .10);
  --linie: rgba(255, 255, 255, .12);
  --text: #F4F6FB;
  --text-weich: #B4BACB;   /* 9,9:1 auf --nacht */
  --text-leise: #8C93A8;   /* 6,2:1 auf --nacht */
  --blau: #6F8BFF;         /* Akzentwort, 6,4:1 auf --nacht */
  --blau-tief: #3B5BDB;    /* Markenblau */
  --blau-licht: rgba(76, 110, 245, .45);
  --gold: #E8B877;         /* warmes Licht, Nummern, Hairlines */
  --gold-licht: rgba(232, 168, 92, .32);
  --radius: 22px;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --breite: 74rem;
  --leicht: cubic-bezier(.2, .7, .2, 1);
  /* Tokens für die Kontrastprüfung des Kits (kit.py pruefen, Zweig dark-luxury); Werte = die Farben oben */
  --papier: #05070D;
  --tinte: #F4F6FB;
  --tinte-weich: #B4BACB;
  --tinte-leise: #8C93A8;
  --akzent-dunkel: #6F8BFF;
  --akzent-hell: #0A0F1C;
  --gold-text: #E8B877;
  --knopf: #FFFFFF;
  --knopf-text: #0A0F1C;
  --fokus: #E8B877;
  --flaeche: #0A0F1C;
  --feldrand: #7A8199;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--nacht); }
body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(60rem 40rem at 110% 60rem, rgba(59, 91, 219, .16), transparent 60%),
    radial-gradient(50rem 40rem at -20% 140rem, rgba(232, 168, 92, .07), transparent 60%),
    var(--nacht);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
/* Kein Überstand bei langen Wörtern; Silbentrennung nur in Unterseiten-Titeln (z. B. "Berufshaftpflichtversicherung"), Fließtext wie im Prototyp */
h1, h2, h3, p, li, summary { overflow-wrap: break-word; }
.abschnitt h1, .abschnitt h2 { hyphens: auto; }
p { margin: 0; }
em { font-style: normal; color: var(--blau); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.sprung { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--text); color: var(--nacht); padding: .6rem 1rem; border-radius: 999px; }
.sprung:focus { left: .75rem; }

/* ---------- Kopf: liegt über dem Hero-Bild ---------- */
.kopf {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem var(--rand);
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto;
}
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marke-zeichen { width: 2.6rem; height: auto; filter: drop-shadow(0 0 14px rgba(76, 110, 245, .35)); }
.marke-wort { display: flex; flex-direction: column; line-height: 1; }
.marke-name { font-size: .95rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
.marke-zusatz { margin-top: .32rem; font-size: .5rem; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: var(--text-weich); }
.knopf-rand {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.15rem;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font-size: .9rem; font-weight: 500; text-decoration: none;
  background: rgba(5, 7, 13, .25); backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s;
}
.knopf-rand:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* Menü ohne Skript: Knopf springt auf #menue (:target öffnet), Tab-Nutzer öffnen es per :focus-within; Links bleiben immer fokussierbar */
.menue-knopf { display: grid; place-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; border-radius: 999px; }
.menue-knopf span { display: block; width: 1.5rem; height: 1.5px; background: var(--text); border-radius: 2px; }
.menue {
  position: absolute; right: var(--rand); top: 4.4rem; min-width: 13rem;
  display: grid; padding: .5rem; border-radius: 18px;
  background: rgba(10, 15, 28, .94); border: 1px solid var(--glas-rand);
  backdrop-filter: blur(16px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity .3s var(--leicht), transform .3s var(--leicht);
}
.menue:target, .menue:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.menue a { display: flex; align-items: center; min-height: 48px; padding: .8rem 1rem; border-radius: 12px; text-decoration: none; font-weight: 500; }
.menue a:hover, .menue a[aria-current] { background: rgba(255, 255, 255, .06); color: #fff; }
.menue a[aria-current] { color: var(--blau); }
.menue-zu { position: absolute; top: .3rem; right: .3rem; padding: .4rem .8rem !important; font-size: 1.3rem; line-height: 1; color: var(--text-weich); }

/* ---------- Hero: Foto, Lichtschichten, Text darüber, Geräte unten rechts ---------- */
.hero { position: relative; isolation: isolate; padding: 7.25rem var(--rand) 0; overflow: hidden; }
/* Bild und Lichtschicht laufen per Maske ins Transparente aus (nicht in eine Farbe): so bleibt keine Kante zum Seitenhintergrund */
.hero-foto, .hero-licht { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hero-foto { position: absolute; inset: 0 0 auto; height: 46rem; z-index: -2; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.hero-licht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 13, .78) 0%, rgba(5, 7, 13, .15) 22%, rgba(5, 7, 13, .35) 48%, var(--nacht) 46rem),
    linear-gradient(90deg, rgba(5, 7, 13, .82) 0%, rgba(5, 7, 13, .35) 55%, rgba(5, 7, 13, 0) 100%),
    radial-gradient(22rem 16rem at 85% 40rem, var(--gold-licht), transparent 70%);
}
.hero-inhalt { position: relative; max-width: var(--breite); margin: 0 auto; }
.ueberzeile { font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--text-weich); }
.hero .ueberzeile { color: rgba(244, 246, 251, .78); }
.hero h1 {
  margin-top: 1.1rem;
  font-size: clamp(2.85rem, 12.4vw, 5.4rem);
  font-weight: 650; line-height: 1.0; letter-spacing: -.035em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.hero h1 em {
  background: linear-gradient(100deg, #8EA4FF 0%, #5B7BFF 55%, #4C6EF5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(76, 110, 245, .45));
}
.lead { margin-top: 1.25rem; max-width: 30rem; font-size: 1.04rem; line-height: 1.6; color: rgba(244, 246, 251, .84); }
.aktionen { margin-top: 1.75rem; display: grid; justify-items: start; gap: 1.1rem; }
.knopf {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 3.35rem; padding: 0 1.6rem;
  border-radius: 999px; background: #fff; color: #0A0F1C; text-decoration: none; font-weight: 600; font-size: 1rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 40px -12px rgba(111, 139, 255, .65), inset 0 -2px 0 rgba(10, 15, 28, .08);
  transition: transform .35s var(--leicht), box-shadow .35s var(--leicht);
}
.knopf svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--leicht); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #fff, 0 22px 50px -14px rgba(111, 139, 255, .85); }
.knopf:hover svg { transform: translateX(3px); }
.kreis-link { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; text-shadow: 0 1px 12px rgba(5, 7, 13, .9); }
.kreis {
  display: grid; place-items: center; width: 3.35rem; height: 3.35rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(5, 7, 13, .3); backdrop-filter: blur(6px);
}
.kreis svg { width: 1.15rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kreis-link strong { display: block; font-weight: 600; font-size: .98rem; }
.kreis-link small { display: block; font-size: .82rem; color: var(--text-weich); }

/* Geräte: ragen von rechts unter die Knöpfe; zwei Masken (oben/unten und links/rechts) schneiden sich, damit keine Bildkante bleibt */
.geraete { position: relative; z-index: -1; margin: -3.5rem -8% 0 4%; } /* etwas über den rechten Rand: größer, Handy bleibt ganz sichtbar (e6 mit -28 % schnitt es ab) */
.geraete::before { /* warmes Schreibtischlicht rechts hinter den Geräten */
  content: ""; position: absolute; inset: 10% -10% 0 30%; z-index: -1;
  background: radial-gradient(50% 50% at 60% 55%, rgba(232, 168, 92, .28), transparent 70%); filter: blur(24px);
}
.geraete img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 26%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 26%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
.geraete::after { /* blaues Reflexlicht unter den Geräten */
  content: ""; position: absolute; left: 10%; right: 0; bottom: 6%; height: 30%; z-index: -1;
  background: radial-gradient(50% 60% at 55% 60%, var(--blau-licht), transparent 70%); filter: blur(20px);
}

/* ---------- Werte: drei Linien-Icons in einer Reihe ---------- */
.werte { padding: 1.25rem var(--rand) 0; }
.werte ul { list-style: none; margin: 0 auto; padding: 0; max-width: var(--breite); display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.werte li { display: grid; align-content: start; gap: .3rem; }
.werte svg { width: 1.9rem; height: 1.9rem; margin-bottom: .45rem; fill: none; stroke: var(--blau); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(111, 139, 255, .55)); }
.werte h2 { font-size: .88rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.werte p { font-size: .78rem; line-height: 1.4; color: var(--text-leise); }

/* ---------- Zusagen statt Logowand ---------- */
.zusagen { padding: 3rem var(--rand) 0; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.trenn-titel { display: flex; align-items: center; gap: 1rem; font-size: .66rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--text-weich); line-height: 1.3; }
.trenn-titel::before, .trenn-titel::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--linie)); }
.trenn-titel::after { background: linear-gradient(90deg, var(--linie), transparent); }
.trenn-titel span { white-space: nowrap; }
.zusagen ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.zusagen li { display: grid; gap: .2rem; justify-items: center; text-align: center; padding: 1.1rem .5rem; }
.zusagen li:nth-child(odd) { border-right: 1px solid var(--linie); }
.zusagen li:nth-child(-n+2) { border-bottom: 1px solid var(--linie); }
.zusagen strong { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.zusagen span { font-size: .76rem; letter-spacing: .04em; color: var(--gold); }

/* ---------- Leistungen: Kacheln mit großen Bildern, Karussell ---------- */
.leistungen { padding: 4rem 0 0; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.kopfzeile { padding: 0 var(--rand); }
.kopfzeile-zeile { margin-top: .7rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.versal-titel { font-size: clamp(1.3rem, 5.6vw, 2.2rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; }
.kopfzeile p { color: var(--text-weich); font-size: .92rem; max-width: 34rem; }
.mehr { flex: none; display: inline-flex; align-items: center; gap: .2rem; color: var(--blau); font-size: .82rem; font-weight: 500; text-decoration: none; padding: .5rem 0; }
.mehr svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.karussell {
  margin-top: 1.5rem; padding: .5rem var(--rand) 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .9rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--rand); scrollbar-width: none;
}
.karussell::-webkit-scrollbar { display: none; }
.kachel {
  scroll-snap-align: start; position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--glas-rand);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .5s var(--leicht), border-color .5s;
}
.kachel img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; transition: transform 1.2s var(--leicht); }
.kachel::before { /* Bild läuft nach unten in die Karte aus */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 15, 28, .55) 52%, rgba(10, 15, 28, .96) 68%);
}
.kachel-text { position: relative; z-index: 2; margin-top: -4.5rem; padding: 0 1.25rem 1.35rem; }
.kachel-art { font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--blau); }
.kachel h3 { margin-top: .35rem; font-size: 1.22rem; padding-right: 3rem; }
.kachel-text > p:not(.kachel-art) { margin-top: .45rem; font-size: .84rem; line-height: 1.5; color: var(--text-weich); padding-right: 3rem; }
.pfeil {
  position: absolute; right: 1.1rem; bottom: 1.25rem; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45);
  transition: background .35s, border-color .35s, transform .35s var(--leicht);
}
.pfeil::after { content: ""; position: absolute; inset: -1.25rem -1.1rem; } /* größere Trefferfläche */
.pfeil svg { width: 1.05rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kachel:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.kachel:hover img { transform: scale(1.05); }
.kachel:hover .pfeil { background: #fff; border-color: #fff; }
.kachel:hover .pfeil svg { stroke: var(--nacht); }

.karussell-punkte { display: flex; justify-content: center; gap: .55rem; margin-top: .4rem; }
.karussell-punkte a { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s, width .3s; }
.karussell-punkte a::after { content: ""; position: absolute; inset: -.6rem; }
/* Aktiver Punkt ohne Skript: der erste, bis eine Kachel per Sprungziel gewählt ist (das Kit vergibt k1 bis k6) */
.karussell-punkte a:first-child,
.leistungen:has(#k2:target) .karussell-punkte a[href="#k2"],
.leistungen:has(#k3:target) .karussell-punkte a[href="#k3"],
.leistungen:has(#k4:target) .karussell-punkte a[href="#k4"],
.leistungen:has(#k5:target) .karussell-punkte a[href="#k5"],
.leistungen:has(#k6:target) .karussell-punkte a[href="#k6"] { background: var(--blau); box-shadow: 0 0 10px var(--blau-licht); }
.leistungen:has(.kachel:target:not(#k1)) .karussell-punkte a:first-child { background: rgba(255, 255, 255, .22); box-shadow: none; }
.branchen { margin: 2.25rem var(--rand) 0; text-align: center; }
.branchen ul { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.branchen li { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--glas); font-size: .82rem; color: var(--text-weich); }

/* ---------- Ablauf ---------- */
.ablauf { padding: 5rem var(--rand) 0; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; }
.ablauf ol { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .9rem; }
.ablauf li {
  position: relative; padding: 1.4rem 1.35rem 1.4rem 4.6rem; border-radius: var(--radius);
  background: var(--glas); border: 1px solid var(--glas-rand);
}
.nr {
  position: absolute; left: 1.35rem; top: 1.3rem; font-size: 1.6rem; font-weight: 300; letter-spacing: -.02em; color: var(--gold);
  text-shadow: 0 0 18px var(--gold-licht);
}
.ablauf h3 { font-size: 1.1rem; }
.ablauf li p { margin-top: .35rem; font-size: .9rem; color: var(--text-weich); }

/* ---------- Über ---------- */
.ueber { padding: 5rem var(--rand) 0; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; display: grid; gap: 1.75rem; }
.portraet { margin: 0; position: relative; width: min(15rem, 70%); }
.portraet::before { /* Goldlicht hinter dem Porträt */
  content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--gold-licht), transparent);
}
.portraet img { width: 100%; height: auto; border-radius: 50%; border: 1px solid rgba(232, 184, 119, .55); box-shadow: 0 0 0 6px rgba(232, 184, 119, .08), 0 30px 60px -20px rgba(0, 0, 0, .9); }
.ueber h2 { margin-top: .6rem; font-size: 1.9rem; }
.ueber div > p:not(.ueberzeile) { margin-top: .9rem; color: var(--text-weich); }
.ueber .ueberzeile { color: var(--gold); }
.stand { padding: 1rem 1.1rem; border-left: 2px solid var(--gold); background: rgba(232, 184, 119, .06); border-radius: 0 14px 14px 0; font-size: .92rem; }
.stand strong { color: var(--text); }

/* ---------- Fragen ---------- */
.fragen { padding: 5rem var(--rand) 0; max-width: calc(52rem + 2 * var(--rand)); margin: 0 auto; }
.fragen h2 { margin-bottom: 1.4rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.15rem 0; min-height: 3rem; font-weight: 600; font-size: 1rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; flex: none; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--gold); transition: transform .3s var(--leicht); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding: 0 0 1.2rem; color: var(--text-weich); font-size: .94rem; }

/* ---------- Schluss: Welle als Bild, Text darüber ---------- */
.schluss {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 5rem var(--rand) 0; border-radius: 28px; border: 1px solid var(--glas-rand);
  max-width: var(--breite); padding: 3.25rem 1.5rem;
}
@media (min-width: 80rem) { .schluss { margin-inline: auto; } }
.schluss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.schluss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(5, 7, 13, .92) 10%, rgba(5, 7, 13, .45) 70%, rgba(5, 7, 13, .2)); }
.schluss h2 { margin: .8rem 0 1.6rem; font-size: clamp(1.9rem, 8vw, 3.2rem); line-height: 1.05; max-width: 16ch; }
.schluss .ueberzeile { color: var(--gold); }

/* ---------- Fuß ---------- */
.fuss { margin-top: 4rem; padding: 2.5rem var(--rand) 2rem; border-top: 1px solid var(--linie); max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; display: grid; gap: 1.25rem; font-size: .84rem; color: var(--text-leise); }
.fuss-marke { display: flex; gap: 1rem; align-items: flex-start; }
.fuss-marke .marke-zeichen { width: 2.2rem; flex: none; margin-top: .2rem; }
.fuss-links { display: flex; gap: 1.5rem; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-weich); text-underline-offset: .25em; }
.entwurf { font-size: .74rem; color: var(--text-leise); border-top: 1px solid var(--linie); padding-top: 1rem; }

/* ---------- Unterseiten (Leistungen, Kontakt, Termin, Impressum, Datenschutz): Kit-Markup im dunklen Stil ---------- */
.abschnitt { padding: 3rem 0 0; }
main > .abschnitt:first-child { padding-top: 8rem; }
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 1rem; }
.abschnitt h1 + p, .abschnitt .lead { color: var(--text-weich); max-width: 40rem; }
.abschnitt > .huelle > h2 { margin: 2.25rem 0 .6rem; font-size: 1.25rem; }
.abschnitt > .huelle > p { margin-top: .6rem; color: var(--text-weich); max-width: 46rem; }
.abschnitt a:not(.knopf) { color: var(--blau); text-underline-offset: .2em; }
.raster { margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.karte {
  position: relative; overflow: hidden; padding: 1.5rem 1.35rem; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--glas-rand);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.karte h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.karte p { color: var(--text-weich); margin-top: .5rem; }
.karte-bild {
  display: block; width: calc(100% + 2.7rem); max-width: none; margin: -1.5rem -1.35rem -1.75rem; aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); /* läuft in die Karte aus */
}
.karte-bild + h2 { position: relative; }
.punkte { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; color: var(--text-weich); font-size: .94rem; }
.punkte li { position: relative; padding-left: 1.6rem; }
.punkte li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: .7rem; height: .38rem; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.band {
  position: relative; overflow: hidden; margin-top: 1rem; padding: 2.5rem 1.5rem; border-radius: 28px; border: 1px solid var(--glas-rand);
  background: radial-gradient(30rem 16rem at 90% 100%, var(--blau-licht), transparent 70%), radial-gradient(20rem 12rem at 0% 0%, var(--gold-licht), transparent 70%), var(--nacht-2);
  display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.band h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); flex: 1 1 14rem; }
form { display: grid; gap: 1rem; margin-top: .75rem; }
label { display: grid; gap: .4rem; font-weight: 600; font-size: .94rem; }
input, textarea {
  font: inherit; color: var(--text); min-height: 48px; padding: .7rem .9rem; border-radius: 12px;
  background: var(--flaeche); border: 1px solid var(--feldrand);
}
textarea { min-height: 7rem; resize: vertical; }
/* Auswahlgruppe: Legende ist eine normale Überschrift über der Gruppe (nicht im Rahmen), jede Zeile eine dünne Linienfläche mit Haken in Gold */
fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: .55rem; min-width: 0; }
legend { padding: 0; margin-bottom: .65rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: var(--text); }
label.wahl {
  display: flex; align-items: center; gap: .85rem; min-height: 48px; padding: .35rem .9rem; font-weight: 400; color: var(--text-weich);
  border: 1px solid var(--linie); border-radius: 14px; background: var(--glas); cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
label.wahl:hover { border-color: rgba(255, 255, 255, .28); }
label.wahl:has(input:checked) { border-color: var(--gold); background: rgba(232, 184, 119, .08); color: var(--text); }
label.wahl:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; min-height: 0; width: 1.35rem; height: 1.35rem; flex: none;
  border: 1px solid var(--feldrand); border-radius: 7px; background: transparent; display: grid; place-content: center;
  transition: border-color .25s, background .25s;
}
input[type="checkbox"]::after {
  content: ""; width: .7rem; height: .38rem; border-left: 2px solid var(--nacht); border-bottom: 2px solid var(--nacht);
  transform: rotate(-45deg) scale(0); margin-top: -.1rem; transition: transform .2s var(--leicht);
}
input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button.knopf { font: inherit; font-weight: 600; border: 0; cursor: pointer; justify-self: start; min-height: 48px; }
.hinweis { font-size: .86rem; color: var(--text-weich); }
.kurz { margin: .75rem 0 0; padding-left: 1.2rem; color: var(--text-weich); display: grid; gap: .5rem; }
.notfall { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 2px solid var(--gold); background: rgba(232, 184, 119, .06); border-radius: 0 14px 14px 0; }
.notfall h2 { font-size: 1.05rem; }
.platzhalter { margin: 1rem 0 0; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid rgba(232, 184, 119, .45); background: rgba(232, 184, 119, .08); color: var(--text); font-size: .92rem; }
.platzhalter strong { color: var(--gold); }

/* Kopf der Unterseiten (Leistungen, Kontakt, Termin): Überzeile, h1 mit blauem Schlusswort, Lichtfleck, Bild läuft aus */
.abschnitt:has(.seitenkopf) { position: relative; isolation: isolate; overflow: clip; }
.seitenkopf { position: relative; padding-bottom: .5rem; }
.seitenkopf::before { /* Lichtfleck: Gold links oben, Blau rechts */
  content: ""; position: absolute; inset: -9rem -40vw -2rem -40vw; z-index: -1; pointer-events: none;
  background: radial-gradient(26rem 14rem at 28% 30%, var(--gold-licht), transparent 70%), radial-gradient(28rem 16rem at 78% 40%, var(--blau-licht), transparent 70%);
}
.seitenkopf-bild {
  position: absolute; z-index: -2; top: -9rem; left: 50%; width: 100vw; max-width: none; height: 26rem; transform: translateX(-50%);
  object-fit: cover; object-position: 70% 50%; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 55%, transparent 100%);
}
.seitenkopf .ueberzeile { color: var(--gold); margin-bottom: .9rem; }
.seitenkopf h1 { margin-bottom: 1rem; }
.seitenkopf h1 em { background: linear-gradient(100deg, #8EA4FF 0%, #5B7BFF 55%, #4C6EF5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portraet img { aspect-ratio: 1; object-fit: cover; background: var(--nacht-2); } /* nie ein leerer Ring: Grund hinter dem Foto, feste Maße */
.bildhinweis { font-size: .74rem; color: var(--text-leise); }

/* ---------- Desktop ---------- */
@media (min-width: 60rem) {
  .kopf { padding-top: 1.6rem; }
  .marke-zeichen { width: 3rem; }
  .marke-name { font-size: 1.05rem; }
  .marke-zusatz { font-size: .56rem; }
  .hero { padding-top: 10rem; min-height: 50rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: none; }
  .hero-foto { height: 100%; }
  .hero-foto img { object-position: 50% 40%; }
  .hero-licht { background:
    linear-gradient(180deg, rgba(5, 7, 13, .7) 0%, rgba(5, 7, 13, 0) 25%, rgba(5, 7, 13, 0) 70%, var(--nacht) 100%),
    linear-gradient(90deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .55) 45%, rgba(5, 7, 13, 0) 75%); }
  .hero-inhalt { margin: 0 0 0 max(0px, calc((100vw - var(--breite)) / 2 - var(--rand))); padding-bottom: 6rem; }
  .aktionen { grid-auto-flow: column; align-items: center; gap: 2rem; }
  .geraete { margin: 6rem calc(-1 * var(--rand)) 0 0; align-self: end; }
  .werte { padding-top: 2rem; }
  .werte ul { gap: 2.5rem; }
  .werte li { grid-template-columns: auto 1fr; column-gap: 1rem; }
  .werte svg { grid-row: span 2; margin: 0; width: 2.3rem; height: 2.3rem; }
  .werte h2 { font-size: 1.05rem; }
  .werte p { font-size: .88rem; }
  .zusagen { padding-top: 4.5rem; }
  .zusagen ul { grid-template-columns: repeat(4, 1fr); }
  .zusagen li { border: 0 !important; }
  .zusagen li + li { border-left: 1px solid var(--linie) !important; }
  .zusagen strong { font-size: 1.9rem; }
  .leistungen { padding-top: 6rem; }
  .karussell { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  /* Desktop zeigt alle Kacheln: Punkte nur optisch ausblenden, beim Tabben erscheinen sie (wie ein Sprunglink) */
  .karussell-punkte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .karussell-punkte:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .abschnitt { padding-top: 4rem; }
  main > .abschnitt:first-child { padding-top: 11rem; }
  .karte { padding: 2rem 1.75rem; }
  .karte-bild { width: calc(100% + 3.5rem); margin: -2rem -1.75rem -2rem; }
  .band { padding: 3.5rem 3.5rem; }
  .kopf { gap: 1.5rem; }
  .menue-knopf, .menue .menue-zu { display: none; } /* .menue .menue-zu: stärker als .menue a (display: flex) */
  .menue { position: static; display: flex; gap: .25rem; padding: 0; min-width: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; opacity: 1; transform: none; pointer-events: auto; order: 1; }
  .menue a { padding: .6rem .9rem; font-size: .95rem; color: var(--text-weich); }
  .knopf-rand { order: 2; }
  .ablauf ol { grid-template-columns: repeat(3, 1fr); }
  .ueber { grid-template-columns: 18rem 1fr; align-items: center; gap: 4rem; }
  .portraet { width: 100%; }
  .schluss { padding: 5rem 4rem; }
  .fuss { grid-template-columns: 1fr auto; align-items: start; }
  .entwurf { grid-column: 1 / -1; }
}

/* ---------- Bewegung (nur wer sie nicht abgeschaltet hat) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ein { animation: ein 1s var(--leicht) both; animation-delay: calc(var(--v) * 110ms + 120ms); }
  .hero-foto img { animation: kamerafahrt 24s ease-in-out infinite alternate; }
  .geraete img { animation: schweben 7s ease-in-out infinite; }
  .hero-licht { animation: atmen 9s ease-in-out infinite alternate; }
  @supports (animation-timeline: view()) {
    .zeige, .kachel, .werte li, .zusagen li {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
  }
}
@keyframes ein { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes kamerafahrt { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1%, 0); } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes atmen { from { opacity: .92; } to { opacity: 1; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }

/* Buchung Stufe 2: Formular (Schritt 2), Bestätigung (Schritt 3), Schrittanzeige. Wird von bauen.py (termin_ergaenzen) an stil.css gehängt, nicht in ergaenzung/. */
.buchung-karte [hidden] { display: none !important; }
.buchung-schritte li { opacity: .55; transition: opacity .3s var(--leicht); }
.buchung-schritte li[aria-current="step"], .buchung-schritte li.fertig { opacity: 1; }
.buchung-schritte li[aria-current="step"] span { background: var(--gold); color: #0b0d14; }
.buchung-schritte li.fertig span { border-color: var(--blau); color: var(--blau); }
.buchung-karte button.termin-wahl { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.buchung-karte button.termin-wahl:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.buchung-karte .termin-fast { color: var(--text); }
.buchung-form, .buchung-fertig { margin-top: 1.4rem; padding: 1.3rem 1.2rem; border: 1px solid var(--glas-rand); border-radius: 20px; background: rgba(255, 255, 255, .04); display: grid; gap: 1rem; }
.buchung-karte .mail-form { padding-left: 1.2rem; border-left: 0; margin-top: 1.4rem; }
.buchung-karte .mail-paar { grid-template-columns: 1fr; }
.buchung-gewaehlt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--gold); background: rgba(232, 184, 119, .08); }
.buchung-gewaehlt strong { font-size: 1.05rem; letter-spacing: -.01em; }
.link-knopf { min-height: 44px; padding: 0 .2rem; background: none; border: 0; color: var(--blau); font: inherit; font-size: .92rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.link-knopf:focus-visible, .buchung-form .knopf:focus-visible, .buchung-fertig button:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.buchung-form .knopf[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.buchung-form .hinweis, .buchung-fertig .hinweis { font-size: .84rem; line-height: 1.55; color: var(--text-weich); }
.buchung-form .hinweis a, .buchung-fertig a { color: var(--blau); }
.buchung-form .fehler { color: #ffb4a8; font-size: .95rem; font-weight: 600; }
.buchung-fertig { justify-items: start; }
.buchung-fertig:focus { outline: none; }
.buchung-fertig h3 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.buchung-fertig h3::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .6rem; border-radius: 50%; background: var(--gold); vertical-align: .1em; }
.buchung-fertig p { margin: 0; }
.buchung-fertig [data-zusammenfassung] { font-size: 1.1rem; font-weight: 600; }
.buchung-fertig [data-meet] { overflow-wrap: anywhere; }
/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld */
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .buchung-schritte li { transition: none; } }

/* Ergänzungen zum Kit-Stil dark-luxury (INT-2026-1875): Eigene Produkte, Online-Buchung, Journal, Leistungen und Termin neu. Nur Tokens des Kits, keine Fremdquellen. */

/* ---------- Eigene Produkte: ruhige Logoleiste (Julian-Feedback Punkt 3, Referenz "Bekannt aus und vertraut von") ---------- */
/* Überschrift zwischen zwei feinen Linien (.trenn-titel des Kits), Signet plus Wortmarke einfarbig hell bei 60 % Deckkraft, beim Überfahren 100 %,
   keine Kästen. Beide Zeichen sind eigene Zeichnungen (Haus-Signet, Wortmarke des Zeitungsentwurfs), keine Fremdlogos. */
@font-face { font-family: "Barlow Condensed"; src: url("barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
.produkte { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 4.5rem auto 0; padding: 0 var(--rand); }
.produkte-hinweis { margin-top: 1.75rem; text-align: center; font-size: .78rem; color: var(--text-leise); }
.logoleiste { list-style: none; margin: 2.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2.4rem 5rem; }
.logo { display: grid; justify-items: center; gap: .7rem; }
.logo-zeichen { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.6rem; color: #fff; opacity: .6; transition: opacity .4s var(--leicht); }
.logo:hover .logo-zeichen, .logo:focus-within .logo-zeichen { opacity: 1; }
.logo-zeichen svg { height: 2.2rem; width: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wort-haus { font-size: 1.6rem; font-weight: 650; letter-spacing: -.025em; line-height: 1; }
.wort-ki { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 2.1rem; font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.wort-ki b { font-weight: 800; border: 2px solid currentColor; padding: .06em .16em 0; margin-right: .3em; }
.logo small { font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--text-leise); }
@media (max-width: 40rem) { .logoleiste { gap: 2rem 3rem; } }

/* ---------- Online-Buchung (eigene Karte mit Terminvorschlägen, Bestätigung bei Google in neuem Tab) ---------- */
.buchung-karte { margin-top: 2rem; }
.buchung-karte .ueberzeile { color: var(--gold); margin-bottom: .6rem; }
.buchung-karte h2 { font-size: 1.5rem; }
.buchung-feld { margin-top: 1.1rem; padding: 1.1rem 1.15rem; border-radius: 16px; border: 1px dashed var(--feldrand); background: var(--glas); display: grid; gap: .9rem; justify-items: start; }
.buchung-alternativ { margin-top: 1rem; }
.zweiter-weg { margin: 3rem 0 0; font-size: 1.25rem; }
.zweiter-weg + .raster { margin-top: 1rem; }
.buchung-schritte { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; font-size: .92rem; color: var(--text-weich); }
.buchung-schritte li { display: flex; align-items: center; gap: .7rem; }
.buchung-schritte span { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-size: .78rem; font-weight: 600; }
.termin-liste { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.termin-liste[hidden], .hinweis[hidden] { display: none; }
.termin-wahl { display: grid; gap: .1rem; min-height: 48px; padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--glas-rand); background: rgba(255, 255, 255, .05); color: var(--text); text-decoration: none; transition: border-color .3s var(--leicht), background .3s var(--leicht), transform .3s var(--leicht); }
.termin-wahl:hover, .termin-wahl:focus-visible { border-color: var(--blau); background: rgba(111, 139, 255, .14); transform: translateY(-1px); }
.termin-wahl:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.termin-tag { font-size: .8rem; color: var(--text-weich); }
.termin-uhr { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .termin-wahl { transition: none; transform: none; } }

/* ---------- Journal ---------- */
/* Julian-Feedback Punkt 7 (Referenz referenz-journal.webp): Titelbild je Beitrag, Kategorie in Gold, großer Titel, Link in Blau, keine Kastenrahmen, ruhiges Dunkelblau mit Lichtschein oben rechts */
.journal-seite { position: relative; isolation: isolate; overflow-x: clip; }
.journal-seite .seitenkopf::before { background: radial-gradient(34rem 20rem at 80% 40%, var(--blau-licht), transparent 70%); } /* nur Blau rechts oben, kein Gold */
.journal-seite .seitenkopf { padding-bottom: 1.5rem; }
.journal-liste { display: grid; gap: 3.2rem 2.4rem; margin-top: 1.5rem; padding-top: 2.2rem; border-top: 1px solid var(--linie); }
.journal-karte { display: grid; gap: .8rem; align-content: start; }
.journal-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; border: 1px solid var(--glas-rand); background: var(--nacht-2, #0A0F1C); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9); }
.journal-bild img, .beitrag-titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-bild img { transition: transform 1.1s var(--leicht); }
.journal-karte:hover .journal-bild img { transform: scale(1.035); }
.journal-meta { margin-top: .5rem; font-size: .8rem; letter-spacing: .05em; color: var(--text-weich); }
.journal-meta .kategorie { color: var(--gold); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.journal-karte h2 { font-size: clamp(1.55rem, 5.6vw, 1.95rem); font-weight: 650; line-height: 1.14; letter-spacing: -.025em; }
.abschnitt .journal-karte h2 a { color: var(--text); text-decoration: none; }
.abschnitt .journal-karte h2 a:hover { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.journal-karte > p:not(.journal-meta) { max-width: 36rem; color: var(--text-weich); font-size: 1.04rem; line-height: 1.55; }
.abschnitt .journal-karte .mehr-link { justify-self: start; border-bottom: 0; padding-bottom: 0; color: var(--blau); text-decoration: none; }
.abschnitt .journal-karte .mehr-link:hover { color: #fff; }
.journal-hinweis { margin-top: 3.5rem; padding-top: 1.3rem; border-top: 1px solid var(--linie); color: var(--text-leise); }
/* Abschluss-Sichtprüfung 1875 P15: Fuß sitzt auch auf kurzen Seiten (404) unten */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > header, body > main, body > footer { width: 100%; }
@media (min-width: 60rem) { .journal-liste { grid-template-columns: 1fr 1fr; gap: 3.5rem 3.2rem; } }
.beitrag-titelbild { margin: 1.5rem 0 0; max-width: 56rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; border: 1px solid var(--glas-rand); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
@media (min-width: 60rem) { .beitrag-titelbild { aspect-ratio: 2 / 1; } }
.beitrag .journal-meta { margin: 0; }
.beitrag { max-width: 42rem; margin-top: 2.5rem; }
.beitrag h2 { margin: 2.4rem 0 .5rem; font-size: 1.4rem; line-height: 1.25; }
.beitrag p { margin-top: .9rem; color: var(--text-weich); line-height: 1.7; }
.beitrag p strong { color: var(--text); font-weight: 600; }
.beitrag-fuss { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); display: grid; gap: .6rem; }
.beitrag-fuss a { display: inline-flex; align-items: center; min-height: 48px; }

/* ---------- Hero-Lesbarkeit (Designer-Wunsch 2): Absatz über den Stadtlichtern rechts ---------- */
.hero-inhalt p:not(.ueberzeile) { text-shadow: 0 1px 14px rgba(5, 7, 13, .85); }
/* Oben und unten weich ausgeblendet (Julian: harte Kante über der Überzeile): Box reicht 4,5rem über und 3rem unter den Text, die volle Stärke steht schon 1rem vor der Überzeile und hält bis unter die letzte Zeile, so bleibt der Kontrast im Text unverändert */
.hero-inhalt::before { content: ""; position: absolute; inset: -4.5rem -2rem -3rem -50vw; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(5, 7, 13, .6) 0%, rgba(5, 7, 13, .55) 70%, rgba(5, 7, 13, 0) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3.5rem, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 3.5rem, #000 calc(100% - 2.5rem), transparent 100%); }
/* Handy: Lichtschicht stärker, damit Einleitung und Zweitlink in jedem Pixel mindestens 4,5:1 erreichen (Vorgang 1875) */
.hero .kreis-link small { color: #D5DAE8; }
@media (max-width: 700px) { .hero-inhalt::before { background: linear-gradient(90deg, rgba(5, 7, 13, .78) 0%, rgba(5, 7, 13, .74) 70%, rgba(5, 7, 13, .7) 100%); } }
/* Verlaufswort heller: die dunkle Endfarbe #4C6EF5 erreichte gegen den Hero-Hintergrund nur 3,6 bis 3,9:1 (Messung Vorgang 1875, pruefung/hero-kontrast.mjs); Ziel mindestens 4,5:1 */
.hero h1 em { background: linear-gradient(100deg, #B4C2FF 0%, #94AAFF 55%, #8197FF 100%); -webkit-background-clip: text; background-clip: text; }


/* =====================================================================================================================
   Leistungen und Termin neu (Julian-Feedback Punkte 4 und 5, Designerin): gleiche Sprache wie die Startseite, also Hero mit Foto,
   Kamerafahrt, Lichtschichten, Flugzeugen und Fensterlichtern, Text mit blauem Verlaufswort, feine Linien statt Kästen.
   ===================================================================================================================== */
.hero-unter { padding-bottom: 3rem; }
.hero-unter .aktionen { margin-top: 2rem; }
.hero-unter .lead { max-width: 28rem; }

/* ---------- Gemeinsame Hero-Bühne (Julian-Feedback Punkte 8 und 9) ----------
   Alle Seiten zeigen dieselbe Platte (medien/platte-*.webp: leerer Schreibtisch vor der Skyline) im selben Ausschnitt, mit derselben Kamerafahrt, denselben
   Fensterlicht-Masken und demselben Himmel. Die Seite wechselt nur den Vordergrund (freigestelltes Objekt oder Glaskarte), die Stadt bleibt stehen.
   Die Ebene .platte hat feste Platten-Maße (cover-Rechnung in Containereinheiten, gleiche Position wie ein Foto mit object-position), darin liegen
   Bild, Fensterlicht-Ebenen und Himmel. Alles hängt am selben Kasten und fährt gemeinsam, daher sind Masken und Bild immer deckungsgleich. */
.hero .hero-foto { --px: .58; --py: 0; height: 46rem; overflow: hidden; container-type: size; }
.platte { position: absolute; width: max(100cqw, calc(100cqh * 1.7768)); height: max(100cqh, calc(100cqw / 1.7768));
  left: calc((100cqw - max(100cqw, calc(100cqh * 1.7768))) * var(--px)); top: calc((100cqh - max(100cqh, calc(100cqw / 1.7768))) * var(--py)); }
.platte .hinten, .platte .tiefe { position: absolute; inset: 0; }
.hero .hero-foto .platte img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; animation: none; }
.sk, .himmel { display: none; }
@media (min-width: 60rem) {
  .hero, .hero-unter { min-height: 50rem; }
  .hero .hero-foto { --px: .5; --py: .4; height: 50rem; }
  .hero-unter { padding-bottom: 0; }
  .hero-unter .hero-inhalt { padding-bottom: 5rem; }
}
/* Fensterlichter (Gruppen aus der Platte freigestellt, himmel-masken.mjs) schalten ganze Hochhausgruppen sanft dunkel und wieder hell.
   Ebenen (Julian 17.10., Codex): hinten Skyline mit Lichtern an, darüber per Überblendung teils und aus (120 s, ohne Bewegung nur das Standbild "an"),
   dazwischen die Flugzeuge, vorn der Raum mit Alpha in den Scheiben (buehne-bauen.mjs ebenen). Die Skyline bewegt sich leicht anders als der Raum (Tiefe, Scroll).
   Flugzeuge: nur im Himmel hinter den Scheiben, der Raum-Vordergrund deckt Rahmen und Wand ab, winzig und langsam,
   höchstens zwei gleichzeitig (lange Pausen), alles nur ohne reduzierte Bewegung und ohne Skript. */
@media (prefers-reduced-motion: no-preference) {
  .platte { animation: kamerafahrt 24s ease-in-out infinite alternate; }
  .tiefe { transform: scale(1.05); animation: tiefe 24s ease-in-out infinite alternate; }
  .sk, .himmel { display: block; position: absolute; inset: 0; pointer-events: none; }
  .sk { background: center / 100% 100% no-repeat; opacity: 0; }
  .sk-teils { background-image: url(medien/buehne-sky-teils.webp); animation: licht-teils 26s ease-in-out infinite; }
  .sk-aus { background-image: url(medien/buehne-sky-aus.webp); animation: licht-aus 41s ease-in-out -9s infinite; }
  @keyframes licht-teils { 0%, 18% { opacity: 0; } 30%, 55% { opacity: 1; } 68%, 100% { opacity: 0; } } /* Julian 17.10. abends: Lichter sichtbar wechseln, nicht nur alle zwei Minuten */
  @keyframes licht-aus { 0%, 40% { opacity: 0; } 50%, 64% { opacity: .85; } 76%, 100% { opacity: 0; } }
  @keyframes tiefe { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.05) translate3d(1.3%, .6%, 0); } }
  @supports (animation-timeline: scroll()) {
    .hinten { animation: sk-scroll linear both; animation-timeline: scroll(root); animation-range: 0 50rem; }
    @keyframes sk-scroll { to { transform: translate3d(0, 1.4%, 0); } }
  }
  .flug { position: absolute; left: 0; width: 100%; height: 2px; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; }
  .flug::before { content: ""; position: absolute; left: 0; top: 0; width: 2.5px; height: 2.5px; border-radius: 50%; background: #fff; animation: blinken 1.9s linear infinite; }
  .flug-1 { top: 10%; animation-name: flug-rechts; animation-duration: 48s; animation-delay: -6s; } /* Julian 17.10. abends: Flugzeuge waren zu langsam und zu klein, man sah keine */
  .flug-2 { top: 15%; animation-name: flug-links; animation-duration: 66s; animation-delay: -40s; }
  .flug-2::before { animation-delay: -.8s; animation-duration: 2.3s; }
  /* Spur nur über den Fensterscheiben (rechts der ersten Säule bei 60 %); die Rahmen im Raum-Vordergrund decken das Flugzeug ab */
  @keyframes flug-rechts { 0% { transform: translateX(58%); opacity: 0; } 2% { opacity: 1; } 68% { opacity: 1; } 70%, 100% { transform: translateX(99%); opacity: 0; } }
  @keyframes flug-links { 0% { transform: translateX(99%); opacity: 0; } 2% { opacity: .85; } 68% { opacity: .85; } 70%, 100% { transform: translateX(58%); opacity: 0; } }
  @keyframes blinken {
    0%, 100% { box-shadow: 0 0 6px 2px rgba(255, 255, 255, .6), 6px 1px 3px 1px rgba(255, 64, 64, 1); }
    14%, 86% { box-shadow: 0 0 6px 2px rgba(255, 255, 255, .6), 6px 1px 3px 1px rgba(255, 64, 64, 0); }
  }
}

/* Feuerwerk (Julian 18.10.): echtes Canvas-Feuerwerk (feuerwerk.js, Koordinaten in % der Plattenbreite, daher gleiche Größe auf Handy und Desktop).
   Wie die Flugzeuge liegt es zwischen Skyline und Raum, die Rahmen schneiden es ab. Bei reduzierter Bewegung bleibt das Canvas aus. */
.feuer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .feuer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
}

/* Handy (Julian 17.10.): Himmel, Skyline, Flugzeuge, Lichter und Feuerwerk sollen sichtbar sein. Die Bühne wird niedriger und zeigt den rechten Teil der Platte
   (Skyline und die ersten Scheiben), der Text beginnt tiefer und liegt nur noch auf dem unteren Teil der Stadt. Alle Seiten teilen dieselbe Bühne. */
@media (max-width: 59.99rem) {
  .hero .hero-foto { --px: .75; height: 34rem; }
  .hero-inhalt { padding-top: 10rem; }
  .hero:not(.hero-unter):not(.hero-termin):not(.hero-kontakt) .hero-inhalt { padding-bottom: 1.8rem; } /* Startseite, 1871 Runde 2: 28,8 px mehr Luft zwischen "So läuft es ab" und Laptop-Oberkante (Text höher ziehen half nicht, das Bild zog mit) */
  .hero:not(.hero-unter):not(.hero-termin):not(.hero-kontakt) h1 em { background: linear-gradient(100deg, #C4D0FF 0%, #AFBFFF 55%, #A4B5FF 100%); -webkit-background-clip: text; background-clip: text; } /* Handy: "für Sie" lag mit p1 4,47 knapp unter 4,5 (Hintergrund verschob sich mit der Bühne) */
  .hero-inhalt::before { top: -2.5rem; }
  /* Lichtschicht ohne seitlichen Verlauf: sonst liegt über Himmel und Skyline ein dunkler Schleier (Text bleibt über ::before der Inhaltsbox lesbar) */
  .hero-licht { background: linear-gradient(180deg, rgba(5, 7, 13, .55) 0%, rgba(5, 7, 13, 0) 9rem, rgba(5, 7, 13, .1) 22rem, var(--nacht) 38rem), radial-gradient(22rem 16rem at 85% 34rem, var(--gold-licht), transparent 70%); }
}
@media (max-width: 59.99rem) and (prefers-reduced-motion: no-preference) {
  .flug-1 { top: 19%; }
  .flug-2 { top: 25%; }
}

/* Kopf-Objekte auf Datenschutz und Journal: dezent rechts oben, auf dem Handy klein */
.kopf-objekt { position: absolute; top: .4rem; right: 0; z-index: 0; width: 5rem; height: auto; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.kopf-objekt-journal { width: 7rem; top: -1.2rem; }
.huelle:has(> .kopf-objekt) { position: relative; }
.kopf-objekt:not(.kopf-objekt-journal) { display: none; } /* Datenschutz am Handy: der Text füllt die Breite, das Glas würde den Hinweis überdecken */
@media (min-width: 48rem) { .kopf-objekt:not(.kopf-objekt-journal) { display: block; } }
@media (min-width: 48rem) { .kopf-objekt { width: 8rem; top: 0; opacity: .92; } .kopf-objekt:not(.kopf-objekt-journal) { width: 6rem; top: -.6rem; } .kopf-objekt-journal { width: 14rem; top: 1.5rem; } }
@media (prefers-reduced-motion: no-preference) { .kopf-objekt { animation: objekt-schweben 9s ease-in-out infinite; } }
.details-kontakt { margin-top: 1rem; padding-bottom: 2rem; }
.details-kontakt .kontakt-klein { margin-top: 1rem; }
.details-kontakt .knopf-umriss { margin-top: 1.4rem; }

/* ---------- Vordergrund-Objekte: freigestellt, schweben vor warmem und blauem Licht, ohne Kasten ---------- */
.geraete img { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)); }
@media (max-width: 59.99rem) { .geraete { margin-top: 1.5rem; } } /* Freisteller haben keine weiche Kante mehr: nicht über den Zweitlink ragen */
.geraete-leist { margin-right: 0; }
.geraete-leist .gl-laptop { width: 88%; }
.geraete-leist .gl-handy { position: absolute; right: 2%; bottom: 0; width: 24%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .geraete-leist .gl-handy { animation-duration: 5.5s; animation-delay: -2s; } }
@media (min-width: 60rem) { .geraete-leist { margin: 5rem calc(-1 * var(--rand)) 0 0; } }
.schluss-objekt { display: none; }
@media (min-width: 48rem) {
  .schluss-objekt { display: block; position: absolute; right: 7%; bottom: -1.5rem; width: clamp(8rem, 15vw, 12rem); height: auto; z-index: 0; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .65)); }
}
@media (prefers-reduced-motion: no-preference) { .schluss-objekt { animation: schweben 7s ease-in-out infinite; } }
/* Leistungsabschnitte (Punkt 10): ein freigestelltes Objekt je Leistung, Lichtschein dahinter, sanftes Schweben mit leichtem Wiegen */
.detail-objekt { position: relative; z-index: 0; margin: 0; display: grid; place-items: center; min-height: 16rem; }
.detail-objekt::before { content: ""; position: absolute; inset: 4% -6% 0; z-index: -1; background: radial-gradient(44% 48% at 60% 60%, rgba(232, 168, 92, .30), transparent 70%), radial-gradient(40% 42% at 28% 34%, var(--blau-licht), transparent 70%); filter: blur(26px); }
.detail-objekt img { width: min(100%, var(--ow, 28rem)); height: auto; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)); }
@media (min-width: 60rem) { .detail:nth-child(even) .detail-objekt { order: 2; } .detail-objekt { min-height: 24rem; } }
@media (prefers-reduced-motion: no-preference) {
  .detail-objekt img { animation: objekt-schweben 8s ease-in-out infinite; }
  .detail:nth-child(2) .detail-objekt img { animation-duration: 9.5s; animation-delay: -3s; }
  .detail:nth-child(3) .detail-objekt img { animation-duration: 7s; animation-delay: -5s; }
  @keyframes objekt-schweben { 0%, 100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-11px) rotate(.7deg); } }
}

/* ---------- Leistungen im Überblick: drei Spalten, feine Trennlinien statt Karten ---------- */
.ueberblick { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 1rem var(--rand) 0; }
.ueb-liste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; }
.ueb { display: grid; gap: .9rem; align-content: start; padding: 2.1rem 0; border-top: 1px solid var(--linie); }
.ueb-nr { font-size: 1.15rem; font-weight: 500; color: var(--blau); letter-spacing: .02em; }
.ueb h3 { font-size: clamp(2rem, 7vw, 2.7rem); font-weight: 650; line-height: 1.04; letter-spacing: -.03em; }
.ueb > p { max-width: 27rem; font-size: 1.06rem; line-height: 1.55; color: var(--text-weich); }
.haken { list-style: none; margin: .5rem 0 .6rem; padding: 0; display: grid; gap: .8rem; }
.haken li { position: relative; padding-left: 2.2rem; color: var(--text); line-height: 1.4; }
.haken li::before { content: ""; position: absolute; left: .3rem; top: .2em; width: .6rem; height: 1.05rem; border: solid var(--gold); border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(40deg); filter: drop-shadow(0 0 7px var(--gold-licht)); }
.mehr-link { justify-self: start; display: inline-flex; align-items: center; gap: .7rem; min-height: 48px; padding-bottom: .25rem; border-bottom: 1px solid var(--blau); color: var(--text); text-decoration: none; font-weight: 500; transition: gap .35s var(--leicht), border-color .35s; }
.mehr-link svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mehr-link:hover { gap: 1rem; border-color: #fff; }
@media (min-width: 60rem) {
  .ueberblick { padding-top: 0; }
  .ueb-liste { grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; border-top: 1px solid var(--linie); }
  .ueb { border-top: 0; padding: 2.4rem 2.6rem 2.4rem 2.6rem; }
  .ueb:first-child { padding-left: 0; }
  .ueb + .ueb { border-left: 1px solid var(--linie); }
  .ueb h3 { font-size: 2.3rem; }
}

/* ---------- Bühne: Laptop und Handy freigestellt, schweben vor warmem und blauem Licht ---------- */
.buehne { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 5rem auto 0; padding: 0 var(--rand); display: grid; gap: 2.5rem; align-items: center; }
.buehne .ueberzeile { color: var(--gold); }
.buehne h2 { margin-top: .9rem; font-size: clamp(2.1rem, 8vw, 3.2rem); font-weight: 650; line-height: 1.04; letter-spacing: -.03em; }
.buehne p:not(.ueberzeile) { margin-top: 1rem; max-width: 27rem; color: var(--text-weich); font-size: 1.05rem; }
.buehne-bild { position: relative; z-index: 0; padding: 0 0 2.5rem; }
.buehne-bild::before { content: ""; position: absolute; inset: 0 -10% -8% -10%; z-index: -1; background: radial-gradient(46% 50% at 62% 58%, rgba(232, 168, 92, .30), transparent 70%), radial-gradient(40% 40% at 30% 70%, var(--blau-licht), transparent 70%); filter: blur(26px); }
.buehne-laptop { width: 88%; height: auto; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)); }
.buehne-handy { position: absolute; right: 1%; bottom: 0; width: 25%; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .65)); }
@media (min-width: 60rem) { .buehne { grid-template-columns: 5fr 7fr; gap: 4rem; margin-top: 7rem; } }
@media (prefers-reduced-motion: no-preference) {
  .buehne-laptop { animation: schweben 8s ease-in-out infinite; }
  .buehne-handy { animation: schweben 6.5s ease-in-out -2s infinite; }
}

/* ---------- Details: je Leistung ein großes Bild und die ausführlichen Punkte, abwechselnd links und rechts ---------- */
.details { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.detail { display: grid; gap: 1.75rem; align-items: center; margin-top: 4.5rem; scroll-margin-top: 2rem; }
.detail-bild { position: relative; margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--glas-rand); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02); background: var(--nacht-2); }
.detail-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 13, 0) 55%, rgba(5, 7, 13, .5) 100%), radial-gradient(18rem 10rem at 100% 0%, rgba(232, 168, 92, .12), transparent 70%); }
.detail-bild img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.detail-text .ueberzeile { color: var(--gold); }
.detail-text h2 { margin-top: .8rem; font-size: clamp(1.9rem, 6.5vw, 2.7rem); font-weight: 650; line-height: 1.06; letter-spacing: -.03em; }
.detail-text > p:not(.ueberzeile) { margin-top: 1rem; max-width: 30rem; color: var(--text-weich); font-size: 1.05rem; }
.detail-text .haken { margin-top: 1.4rem; }
@media (min-width: 60rem) {
  .detail { grid-template-columns: 1fr 1fr; gap: 5rem; margin-top: 7rem; }
  .detail:nth-child(even) .detail-bild { order: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .detail-bild img { animation: kamerafahrt 30s ease-in-out infinite alternate; }
}

/* ---------- Termin: Eckdaten, Glaskarte, Wunschzeiten per E-Mail ---------- */
.eckdaten { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.8rem; }
.eckdaten li { display: inline-flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--text); text-shadow: 0 1px 12px rgba(5, 7, 13, .9); }
.eckdaten svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--blau); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(111, 139, 255, .55)); }
.hero-termin .zweitlink { margin-top: 1.9rem; }
.hero-termin .buchung-karte, .hero-kontakt .kontakt-karte { margin-top: 2.25rem; padding: 1.6rem 1.25rem; border-radius: 28px; background: linear-gradient(180deg, rgba(14, 20, 38, .72), rgba(8, 12, 24, .62)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1); }
.hero-termin .buchung-karte .ueberzeile, .hero-kontakt .kontakt-karte .ueberzeile { color: var(--gold); margin-bottom: 1rem; }
.hero-termin .buchung-karte h2, .hero-kontakt .kontakt-karte h2 { font-size: clamp(2rem, 7.5vw, 2.6rem); font-weight: 650; line-height: 1.04; letter-spacing: -.03em; }
.hero-termin .buchung-karte .lage, .hero-kontakt .kontakt-karte .lage { margin-top: .6rem; color: var(--text-weich); font-size: 1.02rem; }
.hero-termin .buchung-karte .lage + p { margin-top: 1.1rem; color: var(--text); font-size: 1.02rem; }
.hero-termin .buchung-feld { margin-top: 1.4rem; padding: 1.3rem 1.2rem; border: 1px solid var(--glas-rand); border-radius: 20px; background: rgba(255, 255, 255, .04); gap: 1rem; }
.feld-titel { display: flex; align-items: center; gap: .85rem; font-size: 1.12rem; font-weight: 600; color: var(--text); }
.feld-titel svg { flex: none; width: 1.9rem; height: 1.9rem; fill: none; stroke: var(--blau); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-termin .buchung-feld .hinweis { font-size: .84rem; line-height: 1.55; }
.hero-termin .buchung-feld .hinweis a { color: var(--blau); }
.hero-termin .buchung-alternativ { margin-top: 1.1rem; display: grid; gap: .15rem; font-size: .9rem; color: var(--text-leise); }
.hero-termin .buchung-alternativ a { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; color: var(--blau); text-underline-offset: .2em; font-size: 1rem; }
.hero-termin .buchung-alternativ svg { width: .85rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 60rem) {
  .hero-termin, .hero-kontakt { padding-top: 9rem; }
  .hero-termin .hero-inhalt, .hero-kontakt .hero-inhalt { padding-bottom: 5rem; }
  .hero-termin .buchung-karte, .hero-kontakt .kontakt-karte { margin: 0 max(var(--rand), calc((100vw - var(--breite)) / 2)) 0 2rem; padding: 2.2rem 2.4rem; align-self: center; }
}

.mailweg { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 3.5rem var(--rand) 0; display: grid; gap: 2.5rem; scroll-margin-top: 2rem; }
.mailweg .ueberzeile { color: var(--gold); }
.mail-links h2 { margin-top: 1rem; font-size: clamp(2.1rem, 7.5vw, 3.1rem); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
.mail-links > p:not(.ueberzeile) { margin-top: 1.1rem; max-width: 27rem; color: var(--text-weich); font-size: 1.05rem; }
.schritte { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.schritte li { display: flex; align-items: baseline; gap: 1.4rem; color: var(--text); }
.schritte span { flex: none; min-width: 1.8rem; font-size: 1.2rem; font-weight: 500; color: var(--blau); }
.mail-form { display: grid; gap: 1.1rem; margin: 0; }
.mail-paar { display: grid; gap: 1.1rem; }
.mail-form .kopf-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; }
.mail-form legend small, .mail-form label small { font-weight: 400; font-size: .82rem; color: var(--text-leise); margin-left: .6rem; }
.zeitfenster { display: flex; flex-wrap: wrap; gap: .6rem; }
.zeitfenster label.wahl { min-height: 48px; border-radius: 999px; padding: .35rem 1.1rem .35rem .85rem; }
.mail-form textarea { min-height: 5.5rem; }
.mail-form input, .mail-form textarea { background: rgba(255, 255, 255, .04); border-color: var(--feldrand); }
.mail-form .knopf { margin-top: .4rem; }
@media (min-width: 60rem) {
  .mailweg { grid-template-columns: 5fr 6fr; gap: 0; padding-top: 5.5rem; }
  .mail-links { padding-right: 4.5rem; }
  .mail-form { padding-left: 4.5rem; border-left: 1px solid var(--linie); }
  .mail-paar { grid-template-columns: 1fr 1fr; }
}

/* Was im Check passiert: Bild-Collage mit freigestelltem Handy und Uhr, daneben die drei Schritte (alter Inhalt der Seite) */
.checkband { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 5rem auto 0; padding: 0 var(--rand); display: grid; gap: 2.5rem; align-items: center; }
.check-bild { position: relative; z-index: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; padding-bottom: 3rem; }
.check-bild::before { content: ""; position: absolute; inset: -6% -8% 0; z-index: -1; background: radial-gradient(46% 46% at 30% 60%, rgba(232, 168, 92, .26), transparent 70%), radial-gradient(40% 40% at 80% 30%, var(--blau-licht), transparent 70%); filter: blur(26px); }
.check-bild figure { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--glas-rand); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9); }
.check-bild img.kachel-foto { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.check-bild figure:nth-child(2) { margin-top: 2.2rem; }
.check-handy { position: absolute; left: 35%; bottom: -1.2rem; width: 30%; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .7)); }
.check-uhr { position: absolute; left: -3%; top: -2.2rem; width: 30%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .65)); }
.check-text .ueberzeile { color: var(--gold); }
.check-text h2 { margin-top: .9rem; font-size: clamp(2.1rem, 7vw, 3rem); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; }
.check-text .schritte { margin-top: 1.8rem; gap: 1.2rem; }
.check-text .schritte li { color: var(--text-weich); font-size: 1.05rem; line-height: 1.5; }
.check-text .schritte li strong { color: var(--text); font-weight: 600; }
@media (min-width: 60rem) { .checkband { grid-template-columns: 6fr 5fr; gap: 5rem; margin-top: 7.5rem; } }
@media (prefers-reduced-motion: no-preference) {
  .check-handy { animation: schweben 6.5s ease-in-out infinite; }
  .check-uhr { animation: schweben 8s ease-in-out -3s infinite; }
}
/* Lichtschein und Schweben dürfen die Seite nicht verbreitern */
.buehne, .checkband, .ueberblick, .details, .mailweg { overflow-x: clip; }

/* =====================================================================================================================
   Kontakt neu (Julian-Feedback Punkt 6, Referenz referenz-kontakt-b.webp): Hero wie Termin, links Kontaktzeilen mit Icon-Kreisen,
   rechts Glaskarte mit dem mailto-Formular (Kartenstil von .hero-termin .buchung-karte mitbenutzt).
   ===================================================================================================================== */
.kontakt-zeilen { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.kontakt-zeilen li { display: flex; align-items: center; gap: 1.2rem; }
.kontakt-kreis { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px solid rgba(244, 246, 251, .85); background: rgba(5, 7, 13, .35); }
.kontakt-kreis svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-zeilen .kontakt-label { margin: 0 0 .3rem; font-size: .66rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.kontakt-mail, .kontakt-wert { font-size: clamp(1.12rem, 4.8vw, 1.4rem); font-style: normal; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.kontakt-wert { margin: 0; text-shadow: 0 1px 14px rgba(5, 7, 13, .85); }
.kontakt-wert a { color: inherit; text-decoration: none; }
.kontakt-mail { display: inline-block; text-decoration: none; border-bottom: 2px solid var(--blau); text-shadow: 0 1px 14px rgba(5, 7, 13, .85); }
.kontakt-mail:hover { border-color: #fff; }
.kontakt-persoenlich { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); display: grid; gap: 1rem; justify-items: start; max-width: 30rem; }
.kontakt-persoenlich > p:first-child { font-size: 1.08rem; color: var(--text); }
.kontakt-klein { font-size: .92rem; color: var(--text-weich); }
.knopf-umriss { display: inline-flex; align-items: center; gap: .65rem; min-height: 3.35rem; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid rgba(244, 246, 251, .85); background: rgba(5, 7, 13, .35); color: var(--text); font-weight: 600; text-decoration: none; transition: background .35s, border-color .35s; }
.knopf-umriss svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--leicht); }
.knopf-umriss:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.knopf-umriss:hover svg { transform: translateX(3px); }
.kontakt-karte .mail-form { margin-top: 1.5rem; padding: 0; border: 0; }
.kontakt-karte .hinweis { font-size: .84rem; line-height: 1.55; }
.kontakt-karte .hinweis a { color: var(--blau); }
.kontakt-karte .knopf { justify-self: start; }
.kontakt-karte textarea { min-height: 8.5rem; }
@media (min-width: 60rem) {
  .kontakt-karte .mail-form { padding: 0; border: 0; }
}