/* ==========================================================================
   callithero.de – Neubau „Ruf an“
   Eigene Gestaltung über dem Motor. Die Klassen des Motors (.cw-stage,
   [data-cw-*]) werden hier nicht umgestaltet, nur Tokens und eigenes Markup.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Heller Grund: kühles Papier, kein Creme. */
  --cw-canvas:     #ECEDF0;
  --cw-surface:    #F7F7F9;
  --cw-ink:        #0F1015;
  --cw-ink-soft:   #4B4D5A;
  --cw-accent:     #4F52E0;   /* das „call“-Blau, eine Stufe dunkler für Text */
  --cw-accent-ink: #FFFFFF;

  --cw-font-display: "Manrope", system-ui, sans-serif;
  --cw-font-text:    "Manrope", system-ui, sans-serif;
  --cw-font-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Dunkler Grund: das Plättchen. Gleicher Farbton, zweite Helligkeit. */
  --nacht:        #0D0E12;
  --nacht-2:      #15161C;
  --nacht-3:      #1E2029;
  --nacht-ink:    #F1F1F4;
  --nacht-soft:   #A3A5B3;
  --nacht-akzent: #8E90FF;
  --nacht-linie:  color-mix(in oklab, #F1F1F4 12%, transparent);
  --nacht-rand:   #6C6E7C;   /* Rahmen von Bedienelementen, 3,8:1 */

  --blau:    #6467F2;
  /* Plättchen als Klavierlack (Runde 23, Simon): reines Schwarz, oben eine Spiegelung
     mit harter Horizontkante, unten ein leiser Gegenschein, rundum die Lichtkante aus
     Runde 21. Dieselben Werte stehen als #plaettchen-glanz im Symbolvorrat (Menü,
     App-Symbol); nur weiße Stufen, deshalb mischen SVG und CSS hier gleich.
     Fassungen davor: Glas -21, Black Chrome -22. */
  --lack: linear-gradient(180deg,
    rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .03) 44%, rgba(255, 255, 255, 0) 44.5%,
    rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .012) 86%, rgba(255, 255, 255, .06) 100%);
  /* Lichtkante wie #plaettchen-kante: SVG mischt dort „weiß, unsichtbar“ → „schwarz,
     halbdeckend“ ohne Vormultiplikation (grauer Saum unten), deshalb Zwischenstufen. */
  --lack-rand: linear-gradient(180deg,
    rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 85%,
    rgba(170, 170, 170, .167) 90%, rgba(85, 85, 85, .333) 95%, rgba(0, 0, 0, .5) 100%);
  --violett: #A855F7;

  --feldrand: #7F8089;       /* Rahmen von Bedienelementen auf Hell, 3,2:1 */

  --maxb: 1320px;
  --rand: clamp(1.25rem, 4.5vw, 4.5rem);
  --leiste-h: 60px;
  --r: 14px;                 /* eine Rundung für Flächen */
  --r-klein: 10px;           /* und eine für Bedienelemente */

  --cw-shadow-color: 232 18% 18%;
  --cw-t-4xl: clamp(3rem, 1.2rem + 6.4vw, 7.4rem);
}

html { scroll-padding-top: 1rem; }
body {
  font-weight: 450;
  background: var(--cw-canvas);
}
:where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(ul, ol) { padding: 0; }
a { color: inherit; }

.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.nur-vorleser, .g-titel {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  background: var(--nacht); color: var(--nacht-ink); padding: .7rem 1rem; border-radius: var(--r-klein);
  transform: translateY(-160%); transition: transform 160ms var(--cw-ease-out);
}
.sprung:focus { transform: none; }

.rahmen {
  width: 100%;
  padding-inline: max(var(--rand), (100% - var(--maxb)) / 2);
}

/* ------------------------------------------------------------- Marke -- */
.marke {
  display: inline-flex; font-weight: 750; letter-spacing: -0.035em; font-size: 1.45rem;
  text-decoration: none; line-height: 1;
}
.marke__call { color: var(--blau); }
.marke__it   { color: var(--violett); }
.marke__hero { color: currentColor; }
/* Der i-Punkt trägt die Farbe von „hero“: weiß auf dunklem Grund, Tinte auf
   hellem. Gemessen am gerenderten Zeichen (Manrope 750, 30.09.2026): Punkt
   bei 26–35 %, Strich ab 40 % der Zeichenhöhe. Der Farbwechsel liegt in der
   Mitte der Lücke bei 37,5 %; bei 30 % war die untere Punkthälfte violett.
   Das „i“ bleibt echter Text. */
.marke { --marke-punkt: var(--cw-ink); }
.marke__i {
  background: linear-gradient(to bottom, var(--marke-punkt) 0 37.5%, var(--violett) 37.5% 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* In der Kopfzeile größer (Simon: ging neben der großen Überschrift unter):
   rund 32 px am Desktop, 27 px am Handy. */
.kopf .marke, .u-kopf .marke { font-size: clamp(1.7rem, 1.25rem + .8vw, 2.05rem); }

/* ----------------------------------------------------------- Typografie -- */
.titel {
  font-family: var(--cw-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.titel--gross  { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.4rem); }
.titel--mittel { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); letter-spacing: -0.035em; }
.lede {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.5; letter-spacing: -0.012em; color: var(--cw-ink-soft);
  max-width: 44ch; text-wrap: pretty;
}

/* ------------------------------------------------------------- Knöpfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.35rem; border-radius: var(--r-klein);
  font-weight: 650; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 120ms var(--cw-ease-out), background-color 160ms var(--cw-ease-out),
              border-color 160ms var(--cw-ease-out), color 160ms var(--cw-ease-out);
}
.knopf:active { transform: translateY(1px) scale(.985); }
.knopf--voll  { background: var(--nacht); color: #fff; box-shadow: var(--cw-e2); }
.knopf--voll:hover { background: #23252E; }
.knopf--rand  { border-color: var(--feldrand); color: var(--cw-ink); background: transparent; }
.knopf--rand:hover { border-color: var(--cw-ink); background: color-mix(in oklab, var(--cw-ink) 5%, transparent); }
.knopf--hell  { background: var(--nacht-ink); color: var(--nacht); }
.knopf--hell:hover { background: #fff; }
.knopf--akzent { background: #4F52E0; color: #fff; }  /* fest, auch auf Dunkel: Weiß auf Hellviolett hätte zu wenig Kontrast */
.knopf--akzent:hover { background: #4346CC; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf .i { width: 1.1em; height: 1.1em; }

.textknopf {
  display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: .5rem 0;
  color: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
  text-underline-offset: .25em; text-decoration-thickness: 1px; min-height: 44px;
}
.textknopf:hover { text-decoration-thickness: 2px; }
.textlink {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 650; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: .15em;
}
.textlink .i { transition: transform 160ms var(--cw-ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover .i { transform: translateX(3px); } }

/* ==========================================================================
   DAS TELEFONAT (#anruf)
   ========================================================================== */
.anruf { background: var(--nacht); }
.anruf__buehne { background: var(--cw-canvas); isolation: isolate; }

/* --- Startbild ------------------------------------------------------- */
.held {
  position: absolute; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center; column-gap: clamp(2rem, 5vw, 6rem);
  padding: 5.5rem max(var(--rand), (100% - var(--maxb)) / 2) calc(var(--leiste-h) + 3.5rem);
}
.kopf {
  position: absolute; top: 0; inset-inline: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem max(var(--rand), (100% - var(--maxb)) / 2);
}
.kopf__nav { display: flex; gap: .3rem 1.6rem; }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--cw-t-sm); font-weight: 600; color: var(--cw-ink-soft); text-decoration: none;
  border-bottom: 1.5px solid transparent; transition: color 150ms var(--cw-ease-out), border-color 150ms var(--cw-ease-out);
}
.kopf__nav a:hover { color: var(--cw-ink); border-bottom-color: currentColor; }

.held__text { position: relative; z-index: 2; will-change: transform; container-type: inline-size; }
.held__titel {
  /* Zwei Zeilen, je eine Zeile pro Span: „Kein Anruf / geht verloren.“ (Simon,
     01.10.2026). An der Höhe gemessen, damit Knöpfe und Notiz über der Leiste
     bleiben (Laptop mit 720 px Höhe). An der Spaltenbreite: „geht verloren.“ ist
     6,2-mal so breit wie die Schriftgröße; passt es nicht in eine Zeile, wird der
     Titel dreizeilig und schiebt den Rest unter die Leiste (Tablet quer). */
  font-size: min(var(--cw-t-4xl), 11.8svh, 15.5cqi);
  font-weight: 750; line-height: .98; letter-spacing: -0.052em;
}
.held__titel span { display: block; }
/* Die Breite (12,5ch) gilt für die Slogan-Zeilen, nicht für die ganze H1: Die
   Überzeile darüber ist breiter und soll am Handy nicht umbrechen. */
.held__titel > span:not(.held__vor) { max-width: 12.5ch; }
.held__titel span:not(.held__vor) + span { color: var(--cw-ink-soft); font-weight: 650; }
/* Suchbegriff als kleine Überzeile, aber Teil der H1 (SEO-Plan 01.10.2026): Google
   und Vorleser lesen „KI-Telefonassistent für Ihren Betrieb: Rufen Sie an. …“. */
.held__titel .held__vor { margin-bottom: clamp(.55rem, 1.5vh, .95rem); line-height: 1.3; }
.held__unter {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.48; letter-spacing: -0.014em;
  max-width: 34ch; color: var(--cw-ink); font-weight: 500; text-wrap: pretty;
}
.held__wege {
  position: relative; display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(1.5rem, 3.5vh, 2.4rem);
}
.held__notiz {
  margin-top: 1.1rem; font-size: var(--cw-t-sm); color: var(--cw-ink-soft); max-width: 44ch;
}
.held__notiz a { color: var(--cw-ink); font-weight: 650; }

.held__kachel {
  --k: min(26vw, 42vh, 380px);
  position: relative; z-index: 1; justify-self: center;
  display: grid; justify-items: center; gap: 1.1rem;
}
.kachel {
  position: relative; width: var(--k); aspect-ratio: 1;
  border-radius: calc(var(--k) * .225);
  background: var(--nacht);
}
/* Schatten als eigenes Element: Die dunkle Ebene wird beschnitten, ein
   Schatten auf ihr würde mit abgeschnitten. */
.kachel__schatten {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 6px 12px hsl(232 30% 20% / .16), 0 30px 60px -18px hsl(232 40% 14% / .45),
              0 70px 120px -40px hsl(232 40% 14% / .35);
}
.kachel__puls { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--k) * .02) calc(var(--k) * .026) rgba(0, 0, 0, .55)); }
:is(.no-js, .ruhig) .kachel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%, transparent 75%),
    var(--lack), #000;
}
:is(.no-js, .ruhig) .kachel__puls { z-index: 2; } /* Balken über dem Glas, wie im Menü-Symbol */
.js:not(.ruhig) .kachel__puls { visibility: hidden; } /* der reisende Puls übernimmt */

.klingeln {
  position: absolute; left: -16%; top: -7%; z-index: 4;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--cw-surface); color: var(--cw-ink);
  padding: .65rem .95rem .65rem .8rem; border-radius: 12px;
  font-size: var(--cw-t-sm); font-weight: 650; white-space: nowrap;
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(232 30% 20% / .10), 0 14px 30px -10px hsl(232 40% 14% / .35);
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity 420ms var(--cw-ease-out), transform 520ms var(--cw-ease-out);
}
.klingeln time { font-family: var(--cw-font-mono); font-weight: 500; color: var(--cw-ink-soft); font-size: .92em; }
.klingeln .i { color: var(--cw-accent); }
.ist-da .klingeln { opacity: 1; transform: none; }
/* Mit JavaScript liegt der Hinweis als eigene Ebene über dem Plättchen.
   In der Kachel bleibt nur ein unsichtbarer Anker, der die Lage vorgibt. */
.schwebt-anker { visibility: hidden !important; transform: none !important; transition: none !important; }
/* Mit zwei Klassen, sonst gewinnt die spätere Regel der Karte (relative, z 2)
   und das Plättchen deckt sie wieder zu. */
.anruf__buehne > .schwebt { position: absolute; left: 0; top: 0; right: auto; bottom: auto; z-index: 9; margin: 0; pointer-events: none; }
/* Nie schmaler als der eigene Inhalt: Auf dem iPhone kam die Webschrift nach dem
   Messen, die Breite blieb stehen und „23:14“ ragte aus dem Kasten (02.10.2026). */
.anruf__buehne > .schwebt { min-width: max-content; }

/* KI-Automatisierung: Die Kachel ist die Schaltzentrale. Links kommt etwas
   an (Postfach, Website, Chat), ein Lichtpunkt läuft hinein, rechts kommt es
   erledigt heraus (Kalender, Beleg, Kontakt). Einheiten im SVG: Kachel = 100,
   ein Pixel im CSS ist dort eine Einheit. */
.netz {
  position: absolute; left: -42%; top: 0; width: 184%; height: 100%; z-index: 0;
  max-width: none; overflow: visible; pointer-events: none;
}
.netz__kabel path {
  fill: none; stroke: #0F1015; stroke-opacity: .26; stroke-width: .6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.netz__spur { fill: none; stroke: #4F52E0; stroke-width: 1.05; stroke-linecap: round; opacity: 0; }
.netz__spur.ist-aus { stroke: #A855F7; }
.netz__punkt { opacity: 0; }
.netz__punkt circle { fill: #4F52E0; }
.netz__punkt .netz__hof { fill-opacity: .2; }
.netz__punkt.ist-aus circle { fill: #A855F7; }
.netz__knoten { transform-box: fill-box; transform-origin: center; }
.netz__form { fill: #fff; filter: url(#netz-schatten); }
.netz__knoten use { fill: none; stroke: #2B2D38; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.netz__ring { fill: none; stroke: #4F52E0; stroke-width: .6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.netz__haken > g { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform 380ms cubic-bezier(.3, 1.6, .5, 1), opacity 240ms var(--cw-ease-out); }
.netz__haken circle { fill: #1F9D57; }
.netz__haken path { fill: none; stroke: #fff; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.netz__knoten.ist-fertig .netz__haken > g { transform: none; opacity: 1; }
.netz__inhalt { transform-box: fill-box; transform-origin: center; }
.netz__knoten.ist-fertig .netz__inhalt { animation: knoten-fertig 460ms var(--cw-ease-out); }
.netz__knoten.pingt .netz__ring { animation: knoten-ping 900ms var(--cw-ease-out); }
@keyframes knoten-fertig { 40% { transform: scale(1.12); } }
@keyframes knoten-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }

/* Auftritt: erst die Symbole, dann legt sich der Schalter um und die Kabel
   verbinden sich. Ohne .ist-an (nur mit JavaScript) sind sie noch nicht gezogen. */
.js:not(.ruhig) .anruf:not(.ist-an) .netz__kabel path { stroke-dashoffset: 1; }
.js:not(.ruhig) .netz__kabel path { transition: stroke-dashoffset 700ms var(--cw-ease-out); }
.js:not(.ruhig) .anruf:not(.ist-da) .netz__knoten { opacity: 0; }
.js:not(.ruhig) .ist-da .netz__knoten { animation: knoten-kommt 620ms var(--cw-ease-out) calc(420ms + var(--n) * 90ms) backwards; }
@keyframes knoten-kommt { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* Der Schalter: das Gegenstück zum Anrufhinweis, unten rechts an der Kachel. */
.schalter {
  position: absolute; right: -14%; bottom: -6%; z-index: 4;
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--cw-surface); color: var(--cw-ink);
  padding: .55rem .6rem .55rem .95rem; border-radius: 12px;
  font-size: var(--cw-t-sm); font-weight: 650; white-space: nowrap;
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(232 30% 20% / .10), 0 14px 30px -10px hsl(232 40% 14% / .35);
}
.schalter__bahn {
  position: relative; flex: none; width: 2.35rem; height: 1.4rem; border-radius: 99px;
  background: #4F52E0; transition: background-color 360ms var(--cw-ease-out);
}
.schalter__bahn::after {
  content: ""; position: absolute; left: .17rem; top: .17rem;
  width: 1.06rem; height: 1.06rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px hsl(232 40% 10% / .3);
  transform: translateX(.95rem); transition: transform 460ms cubic-bezier(.3, 1.45, .5, 1);
}
.js:not(.ruhig) .anruf:not(.ist-an) .schalter__bahn { background: #B9BBC6; }
.js:not(.ruhig) .anruf:not(.ist-an) .schalter__bahn::after { transform: none; }
/* Einblenden als einmalige Animation, nicht als Übergang: Eine Übergangsverzögerung
   würde auch das Ausblenden beim Scrollen bremsen (seite.js setzt dann opacity). */
.js:not(.ruhig) .anruf:not(.ist-da) .schalter { opacity: 0; }
.js:not(.ruhig) .ist-da .schalter { animation: schalter-kommt 680ms var(--cw-ease-out) 380ms backwards; }
@keyframes schalter-kommt { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.ist-da .klingeln .i { animation: klingeln 3.6s var(--cw-ease-out) 1.2s infinite; }
@keyframes klingeln {
  0%, 18%, 100% { transform: rotate(0); }
  3% { transform: rotate(-14deg); } 6% { transform: rotate(12deg); }
  9% { transform: rotate(-10deg); } 12% { transform: rotate(8deg); } 15% { transform: rotate(-4deg); }
}

.kachel__anzeige {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--cw-t-sm); font-weight: 600; color: var(--cw-ink-soft);
}
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--cw-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cw-accent) 18%, transparent); }

/* Ringe: der Klang eines Telefons, als ferne Ebene hinter der Kachel. */
.held__ringe {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--rx, 70%); top: var(--ry, 50%);
  width: 0; height: 0;
}
.held__ringe span {
  position: absolute; left: 50%; top: 50%;
  width: var(--rk, 400px); height: var(--rk, 400px);
  margin: calc(var(--rk, 400px) / -2) 0 0 calc(var(--rk, 400px) / -2);
  border-radius: calc(var(--rk, 400px) * .225);
  border: 1px solid color-mix(in oklab, var(--cw-ink) 16%, transparent);
  opacity: 0;
}
.ist-da .held__ringe span { animation: ring 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
.ist-da .held__ringe span:nth-child(2) { animation-delay: 1.6s; }
.ist-da .held__ringe span:nth-child(3) { animation-delay: 3.2s; }
@keyframes ring {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.1); opacity: 0; }
}
.anruf.ist-offen .held__ringe span { animation-play-state: paused; }

/* Anruf-Karte am Knopf (nur mit feinem Zeiger) */
.pop {
  position: absolute; left: 0; top: calc(100% + .75rem); z-index: 30;
  display: flex; gap: 1.1rem; align-items: center;
  width: min(420px, 90vw); padding: 1rem 1.1rem 1rem 1rem;
  background: var(--nacht); color: var(--nacht-ink); border-radius: var(--r);
  box-shadow: var(--cw-e3);
}
.pop[hidden] { display: none; }
.pop .qr { width: 132px; height: 132px; border-radius: 8px; flex: none; }
.pop__titel { font-weight: 650; font-size: var(--cw-t-sm); color: var(--nacht-soft); }
.pop__nummer { display: block; margin-top: .2rem; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.03em; text-decoration: none; }
.pop__klein { font-size: var(--cw-t-sm); color: var(--nacht-soft); margin-top: .2rem; }
.pop .textknopf { color: var(--nacht-ink); }
.pop__zu {
  position: absolute; right: .35rem; top: .35rem; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; color: var(--nacht-soft); cursor: pointer; border-radius: 10px;
}
.pop__zu:hover { color: var(--nacht-ink); }

/* --- Die Kachel wird zur Bühne --------------------------------------- */
.dunkel {
  position: absolute; inset: 0; z-index: 5;
  background:
    radial-gradient(120% 90% at 18% 0%, #171922 0%, transparent 55%),
    var(--nacht);
  clip-path: inset(50% 50% 50% 50% round 0);
  will-change: clip-path;
  pointer-events: none;
}
/* Das Plättchen als App-Symbol mit Tiefe: Lichtkante oben, zur Unterkante
   dunkler gewölbt, dünne Materialkante unten, Glanzpunkt folgt der Maus.
   Alles in Prozent, damit es bei 88 px am Handy wie bei 380 px wirkt. */
.glanz {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  border-radius: 22.5%;
  background:
    radial-gradient(60% 40% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%, transparent 75%),
    var(--lack), #000;
  will-change: transform, opacity;
}
/* Lichtkante rundum, als Ring in derselben Stärke wie im Symbol (1,875 % der Kachel) */
.glanz::before, :is(.no-js, .ruhig) .kachel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: max(1px, calc(var(--kk, 300px) * .01875));
  background: var(--lack-rand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:is(.no-js, .ruhig) .kachel::before { --kk: var(--k); z-index: 1; }
.puls-reise {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none;
  transform-origin: 0 0; will-change: transform;
}
.puls-reise .puls {
  width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(var(--sx, 0px) calc(var(--kk, 300px) * .02) calc(var(--kk, 300px) * .026) rgba(0, 0, 0, .55));
}

/* --- Das Gespräch ------------------------------------------------------ */
.gespraech {
  position: absolute; inset: 0; z-index: 7;
  color: var(--nacht-ink);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
  padding: 1.4rem max(var(--rand), (100% - var(--maxb)) / 2) calc(var(--leiste-h) + 2.6rem);
  opacity: 0; visibility: hidden;
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.gespraech.ist-sichtbar { visibility: visible; }

.g-kopf {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--nacht-linie);
  font-size: var(--cw-t-sm); color: var(--nacht-soft); font-weight: 550;
}
.g-status { display: inline-flex; align-items: center; gap: .6rem; color: var(--nacht-ink); font-weight: 650; }
.g-punkt { width: 9px; height: 9px; border-radius: 50%; background: #7C7F8E; }
.gespraech[data-zustand="klingelt"] .g-punkt { background: var(--nacht-akzent); animation: blink 1s steps(2, jump-none) infinite; }
.gespraech[data-zustand="verbunden"] .g-punkt { background: #5BD08A; }
@keyframes blink { 50% { opacity: .25; } }
.g-zeit { font-family: var(--cw-font-mono); font-weight: 500; color: var(--nacht-soft); font-variant-numeric: tabular-nums; }
.g-wer span { color: #7C7F8E; }

.g-links { display: flex; flex-direction: column; min-height: 0; padding-top: clamp(1.2rem, 4vh, 2.6rem); }
.g-stimmen { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.g-stimme { display: flex; align-items: center; gap: .85rem; opacity: .42; transition: opacity 240ms var(--cw-ease-out); }
.g-stimme.spricht { opacity: 1; }
/* Landeplatz des Pulses im Gespräch; gut 10 % kleiner als die erste Fassung (Simon: passt besser neben „Alf“) */
.puls-ziel { display: block; width: clamp(50px, 6.2vh, 67px); aspect-ratio: 1; flex: none; }
.welle { width: clamp(44px, 5.5vh, 60px); height: auto; fill: #B9BBC8; overflow: visible; }
.g-name { display: grid; font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; }
.g-name small { font-weight: 500; font-size: .82rem; color: var(--nacht-soft); }

.g-fenster {
  position: relative; flex: 1; min-height: 0; overflow: hidden; margin-top: clamp(.8rem, 2.5vh, 1.8rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%);
}
.g-verlauf {
  list-style: none; margin: 0; padding: 0;
  transition: transform 560ms var(--cw-ease-out);
  will-change: transform;
}
.g-zeile, .g-ende {
  font-size: clamp(1.25rem, .85rem + 1.3vw, 2.1rem);
  line-height: 1.3; letter-spacing: -0.02em; font-weight: 560;
  max-width: 30ch; margin-bottom: .95em;
  transition: opacity 320ms var(--cw-ease-out);
}
.g-zeile[data-wer="anrufer"] { color: #D5D6DE; font-weight: 500; }
.g-sprecher {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--nacht-soft); margin-bottom: .35rem;
}
.g-zeile[data-wer="alf"] .g-sprecher { color: var(--nacht-akzent); }
.js:not(.ruhig) .g-zeile { opacity: 0; }
.js:not(.ruhig) .g-zeile.ist-jetzt { opacity: 1; }
.js:not(.ruhig) .g-zeile.war { opacity: .38; }
.js:not(.ruhig) .g-zeile .w { opacity: .2; transition: opacity 180ms linear; }
.js:not(.ruhig) .g-zeile .w.ges, .js:not(.ruhig) .g-zeile.war .w { opacity: 1; }
.g-zeile .w[data-ereignis].ges { color: #fff; text-decoration: underline; text-decoration-color: var(--nacht-akzent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.g-ende { color: var(--nacht-soft); font-weight: 500; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); }
.js:not(.ruhig) .g-ende { opacity: 0; }
.js:not(.ruhig) .g-ende.ist-jetzt { opacity: 1; }

.g-hinweis { margin-top: .8rem; font-size: .8rem; color: #7C7F8E; }

/* Rechts: was im Hintergrund passiert. Drei gleich gebaute Karten; der
   Kalender nimmt sich den Platz, der übrig bleibt, damit das Protokoll
   immer ganz lesbar ist. */
.g-rechts {
  display: flex; flex-direction: column; gap: .6rem; min-height: 0;
  padding-top: clamp(.9rem, 3.2vh, 2.4rem);
}
.g-label { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--nacht-soft); }

.kal, .karte, .protokoll-karte {
  background: var(--nacht-2); border: 1px solid var(--nacht-linie); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.kal {
  flex: 1 1 auto; max-height: 17.5rem;
  display: flex; flex-direction: column;
  padding: .75rem .9rem .85rem;
}
.kal__kopf { display: flex; justify-content: space-between; font-size: .8rem; color: var(--nacht-soft); font-weight: 600; margin-bottom: .5rem; }
.kal__kopf span:first-child { color: var(--nacht-ink); }
.kal__raster {
  flex: 1 1 auto; min-height: 6.2rem;
  display: grid; grid-template-columns: 1.5rem repeat(5, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0 4px;
}
.kal__zeiten { position: relative; margin-top: 1.3rem; font-family: var(--cw-font-mono); font-size: .64rem; color: #8B8D9A; }
.kal__zeiten span { position: absolute; left: 0; transform: translateY(-50%); }
.kal__zeiten span:nth-child(1) { top: 0; } .kal__zeiten span:nth-child(2) { top: 33.33%; }
.kal__zeiten span:nth-child(3) { top: 66.66%; } .kal__zeiten span:nth-child(4) { top: 100%; }
.kal__tag { display: grid; grid-template-rows: 1.3rem minmax(0, 1fr); min-height: 0; }
.kal__tag p { text-align: center; font-size: .72rem; font-weight: 700; color: var(--nacht-soft); }
.kal__spalte {
  position: relative; min-height: 0;
  border-top: 1px solid var(--nacht-linie);
  background: linear-gradient(to bottom,
    transparent calc(33.33% - 1px), color-mix(in oklab, #F1F1F4 6%, transparent) calc(33.33% - 1px) 33.33%,
    transparent 33.33% calc(66.66% - 1px), color-mix(in oklab, #F1F1F4 6%, transparent) calc(66.66% - 1px) 66.66%,
    transparent 66.66% calc(100% - 1px), var(--nacht-linie) calc(100% - 1px));
}
.kal__spalte i, .kal__neu {
  position: absolute; left: 1px; right: 1px;
  top: calc(var(--a) / 6 * 100% + 1px); height: calc(var(--d) / 6 * 100% - 3px);
  border-radius: 4px; font-style: normal; font-size: .62rem; font-weight: 600; line-height: 1.2;
  padding: 3px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Bestehende Termine: ruhig, nur ein Streifen und ein Hauch Fläche. */
.kal__spalte i {
  color: #9FA1AE; background: #1F2028;
  box-shadow: inset 2px 0 0 #4A4C5A;
}
@media (min-width: 860px) and (max-width: 1100px) {
  .kal { padding-inline: .7rem; }
  .kal__spalte i, .kal__neu { padding: 3px 3px; font-size: .58rem; letter-spacing: -.01em; }
}
.kal__tag--do p { transition: color 240ms var(--cw-ease-out); }
.kal.ist-geprueft .kal__tag--do p { color: var(--nacht-akzent); }
.kal__neu {
  background: transparent; border: 1.5px dashed var(--nacht-akzent); color: var(--nacht-akzent);
  opacity: 0; transform: scale(.92); white-space: normal;
  transition: opacity 260ms var(--cw-ease-out), transform 420ms var(--cw-ease-out), background-color 260ms var(--cw-ease-out), border-color 260ms var(--cw-ease-out), color 260ms var(--cw-ease-out);
}
.kal__belegt { display: none; }
.kal__belegt small { display: block; font-size: 1em; font-weight: 500; opacity: .85; }
.kal.ist-geprueft .kal__neu { opacity: 1; transform: none; }
.kal.ist-gebucht .kal__neu {
  background: var(--cw-accent); background: #4F52E0; border-color: #4F52E0; color: #fff;
  animation: sitzt 620ms var(--cw-ease-out);
  box-shadow: 0 6px 18px -6px rgba(79,82,224,.7);
}
.kal.ist-gebucht .kal__frei { display: none; }
.kal.ist-gebucht .kal__belegt { display: inline; }
@keyframes sitzt { 0% { transform: scale(1.18); } 55% { transform: scale(.97); } 100% { transform: scale(1); } }

.karte { flex: none; padding: .7rem .9rem .75rem; }
.karte__kopf { display: flex; justify-content: space-between; align-items: center; min-height: 1.3rem; font-size: .8rem; font-weight: 600; color: var(--nacht-ink); margin-bottom: .4rem; }
.karte__neu {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nacht); background: #5BD08A; padding: .15rem .45rem; border-radius: 5px;
  opacity: 0; transition: opacity 240ms var(--cw-ease-out);
}
.karte.ist-angelegt .karte__neu { opacity: 1; }
.karte dl { display: grid; gap: .22rem; }
.karte dl > div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .5rem; font-size: .82rem; line-height: 1.35; }
.karte dt { color: #8B8D9A; }
.karte dd { color: var(--nacht-ink); font-weight: 600; min-width: 0; }
.karte .wert { display: none; }
.karte .leer { color: #8B8D9A; font-weight: 500; font-style: italic; }
.karte .ist-bekannt .leer { display: none; }
.karte .ist-bekannt .wert { display: inline; animation: auftauchen 360ms var(--cw-ease-out); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Protokoll: alle Zeilen haben von Anfang an ihren Platz, damit oben nichts
   springt. Was noch nicht passiert ist, bleibt unsichtbar. */
.protokoll-karte { flex: none; padding: .7rem .9rem .8rem; }
.protokoll__zahl { font-size: .72rem; font-weight: 600; color: #8B8D9A; font-variant-numeric: tabular-nums; }
.protokoll {
  list-style: none; display: grid; gap: .2rem;
  font-size: .79rem; line-height: 1.32; color: #B5B7C4;
}
.protokoll li {
  display: grid; grid-template-columns: .95rem 4.2rem minmax(0, 1fr); align-items: baseline;
  visibility: hidden;
}
.protokoll li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #565866;
  align-self: center; transition: background-color 240ms var(--cw-ease-out), box-shadow 240ms var(--cw-ease-out);
}
.protokoll li.ist-passiert { visibility: visible; animation: auftauchen 320ms var(--cw-ease-out); }
.protokoll li.ist-neu { color: var(--nacht-ink); font-weight: 650; }
.protokoll li.ist-neu::before { background: var(--nacht-akzent); box-shadow: 0 0 0 3px color-mix(in oklab, #8E90FF 25%, transparent); }
.protokoll time { font-family: var(--cw-font-mono); color: #8B8D9A; font-size: .72rem; font-weight: 500; }

/* Niedrige Bildschirme (Laptop mit 125 % Skalierung, rund 730 px Höhe): Die
   Kartentitel erklären sich selbst, die Überschrift darüber fällt weg, das
   Protokoll rückt enger. Unter 680 px trägt der Kalender den Kontakt mit. */
@media (min-width: 860px) and (max-height: 820px) {
  /* Startbereich: Untertitel und Notiz nutzen die volle Spaltenbreite, je eine
     Zeile weniger, damit die Notiz über der Leiste bleibt (1280 × 720). */
  .held__unter { max-width: 44ch; }
  .held__notiz { max-width: none; }
  .g-label { display: none; }
  .g-rechts { padding-top: clamp(.8rem, 2.4vh, 1.4rem); gap: .55rem; }
  .protokoll { gap: .08rem; line-height: 1.28; }
  .kal__raster { min-height: 7.4rem; }
}
@media (min-width: 860px) and (max-height: 680px) {
  .held__notiz { display: none; }
  .karte { display: none; }
}

.mini-termin { display: none; }

/* Aufgelegt */
.gespraech[data-zustand="aufgelegt"] .g-stimme { opacity: .3; }

/* ==========================================================================
   AUFGELEGT (#morgen)
   ========================================================================== */
.morgen { padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 8rem); background: var(--cw-canvas); }
.morgen__raster {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: center;
}
.morgen__text { container-type: inline-size; }
.morgen__text .lede { margin-top: 1.6rem; }
/* Das längste Wort „durchgeschlafen.“ ist 8,1-mal so breit wie die Schrift-
   größe; 11,5 % der Spaltenbreite halten es auf jeder Breite in der Spalte. */
.morgen .titel { max-width: 13ch; font-size: min(clamp(2.5rem, 1.4rem + 4.2vw, 5.4rem), 11.5cqi); }

/* Das Handy: ein neutrales Gerät ohne Herstellermerkmale. Flacher Rahmen,
   Tasten links und rechts, Kameraloch in der Mitte, eigenes Hintergrundbild
   (Morgen über den Hügeln). Alle Maße hängen an der Gerätehöhe --hh. */
.handy {
  --hh: min(600px, calc(100svh - var(--leiste-h) - 9rem));
  justify-self: center; display: grid; gap: 1.1rem; justify-items: center;
}
.handy__kippen { height: var(--hh); aspect-ratio: 9 / 19; }
.handy__geraet {
  position: relative; height: 100%;
  border-radius: calc(var(--hh) * .082);
  padding: calc(var(--hh) * .018);
  background: linear-gradient(150deg, #6A6D79 0%, #2B2D35 22%, #17181D 50%, #2B2D35 78%, #5C5F6B 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 2px 4px hsl(232 30% 20% / .18),
    0 30px 60px -22px hsl(232 40% 14% / .5),
    0 70px 110px -50px hsl(232 40% 14% / .45);
}
.handy__taste {
  position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(to right, #2B2D35, #6A6D79);
}
.handy__taste--laut  { left: -2px; top: 19%; height: 7%; }
.handy__taste--leise { left: -2px; top: 28%; height: 7%; }
.handy__taste--an    { right: -2px; top: 24%; height: 11%; background: linear-gradient(to left, #2B2D35, #6A6D79); }
.handy__schirm {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--hh) * .066);
  background: #0B0C1C; color: #fff;
  box-shadow: 0 0 0 calc(var(--hh) * .011) #050507;
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(var(--hh) * .085) calc(var(--hh) * .022) calc(var(--hh) * .045);
}
.handy__bild { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* Das Einschalten: der Schirm ist erst dunkel. */
.handy__schirm::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #000;
  opacity: 0; transition: opacity 700ms var(--cw-ease-out);
}
.handy__status {
  position: absolute; top: calc(var(--hh) * .026); right: calc(var(--hh) * .048);
  display: flex; align-items: center; gap: calc(var(--hh) * .009); color: #fff;
}
.handy__status svg { height: calc(var(--hh) * .017); width: auto; fill: currentColor; }
.handy__kamera {
  position: absolute; left: 50%; top: calc(var(--hh) * .022); translate: -50% 0;
  width: calc(var(--hh) * .021); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2A3050 0 18%, #07070A 30%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.handy__tag  { text-align: center; font-size: calc(var(--hh) * .028); font-weight: 600; color: rgba(255,255,255,.82); letter-spacing: -0.005em; }
.handy__zeit { text-align: center; font-size: calc(var(--hh) * .128); font-weight: 650; letter-spacing: -0.045em; line-height: 1; margin-top: calc(var(--hh) * .006); color: rgba(255,255,255,.96); }
.handy__stapel { margin-top: auto; display: grid; gap: calc(var(--hh) * .012); }
.nachricht {
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-radius: calc(var(--hh) * .032);
  padding: calc(var(--hh) * .018) calc(var(--hh) * .02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.nachricht__von {
  display: flex; align-items: center; gap: .45rem;
  font-size: max(.68rem, calc(var(--hh) * .0195)); font-weight: 700; color: rgba(255,255,255,.72);
}
.nachricht__von > span:not(.nachricht__symbol) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nachricht__von time { font-weight: 500; color: rgba(255,255,255,.6); }
.nachricht__symbol { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #4F52E0; color: #fff; flex: none; }
.nachricht__symbol .i { width: 12px; height: 12px; stroke-width: 2.4; }
.puls-mini { width: 18px; height: 18px; flex: none; }
.nachricht__text { font-size: max(.76rem, calc(var(--hh) * .0215)); line-height: 1.36; margin-top: .25rem; color: #fff; font-weight: 500; }
.handy__strich {
  position: absolute; left: 50%; bottom: calc(var(--hh) * .014); translate: -50% 0;
  width: 34%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.8);
}
.handy figcaption { font-size: .8rem; color: var(--cw-ink-soft); }

/* Aufwachen, sobald das Handy im Bild ist (seite.js setzt .ist-wach). */
.js:not(.ruhig) .handy:not(.ist-wach) .handy__schirm::after { opacity: 1; }
.js:not(.ruhig) .handy .handy__tag,
.js:not(.ruhig) .handy .handy__zeit { opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--cw-ease-out) 250ms, transform 700ms var(--cw-ease-out) 250ms; }
.js:not(.ruhig) .handy .nachricht { opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity 420ms var(--cw-ease-out), transform 620ms cubic-bezier(.2, 1.35, .35, 1); }
.js:not(.ruhig) .handy .nachricht:nth-child(1) { transition-delay: 1150ms; }
.js:not(.ruhig) .handy .nachricht:nth-child(2) { transition-delay: 800ms; }
.js:not(.ruhig) .handy.ist-wach .handy__tag,
.js:not(.ruhig) .handy.ist-wach .handy__zeit,
.js:not(.ruhig) .handy.ist-wach .nachricht { opacity: 1; transform: none; }
.js:not(.ruhig) .handy.ist-wach .handy__geraet { animation: summen 380ms linear 800ms 1, summen 380ms linear 1150ms 1; }
@keyframes summen {
  0%, 100% { translate: 0 0; }
  12% { translate: -2px 0; } 25% { translate: 2px 0; } 37% { translate: -2px 0; }
  50% { translate: 2px 0; } 62% { translate: -1px 0; } 75% { translate: 1px 0; }
}

/* ==========================================================================
   JETZT SIE (#ausprobieren)
   ========================================================================== */
.probe { padding-block: clamp(2rem, 6vh, 4rem) clamp(4rem, 10vh, 7rem); }
.probe__kachel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  background: var(--nacht); color: var(--nacht-ink);
  border-radius: clamp(22px, 3vw, 44px);
  padding: clamp(2rem, 5vw, 4.5rem);
  box-shadow: var(--cw-e3);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.probe__text { position: relative; }
.probe__text .lede { margin-top: 1.2rem; color: var(--nacht-soft); }
.probe__nummer {
  display: inline-flex; align-items: center; gap: .9rem; margin-top: clamp(1.6rem, 4vh, 2.6rem);
  font-size: clamp(2.4rem, 1.2rem + 4.8vw, 5.6rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1;
  text-decoration: none; color: #fff; font-variant-numeric: tabular-nums;
}
.probe__nummer .i { width: .62em; height: .62em; color: var(--nacht-akzent); stroke-width: 2.2; }
.probe__nummer:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.probe__wege { margin-top: clamp(1.4rem, 3vh, 2rem); display: flex; flex-wrap: wrap; gap: .75rem; }
.probe__klein { margin-top: 1.2rem; font-size: var(--cw-t-sm); color: var(--nacht-soft); max-width: 52ch; }
.probe__qr { position: relative; display: grid; gap: .8rem; justify-items: center; }
.probe__qr .qr { width: clamp(150px, 15vw, 200px); height: auto; border-radius: 14px; box-shadow: 0 0 0 10px #fff; }
.probe__qr figcaption { margin-top: .6rem; font-size: var(--cw-t-sm); color: var(--nacht-soft); max-width: 22ch; text-align: center; }

/* ==========================================================================
   LEISTUNGEN
   ========================================================================== */
.leistungen { padding-block: clamp(4rem, 10vh, 8rem); }
.leistungen__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 5vw, 6rem); align-items: end; }
.leistungen__kopf .titel { max-width: 14ch; }
.leistungen__titel span { display: block; }
.leistungen__titel span + span { color: var(--cw-ink-soft); }
.zeilen { list-style: none; margin-top: clamp(3rem, 7vh, 5rem); border-top: 1px solid var(--cw-hairline-strong); }
/* Drei feste Spalten für alle Zeilen: Name, Text, Bild. Vorher bestimmte die
   Länge des Linktexts die Spaltenbreite, und jede Zeile stand anders. */
.zeile {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) 16.5rem; gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start; padding-block: clamp(1.8rem, 4vh, 2.6rem);
  border-bottom: 1px solid var(--cw-hairline-strong);
}
.zeile__name { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; hyphens: manual; }
.zeile__text p:first-child { font-size: 1.06rem; line-height: 1.6; color: var(--cw-ink); max-width: 52ch; }
.zeile__stich { margin-top: .8rem; font-size: .86rem; font-weight: 600; color: var(--cw-ink-soft); }
.zeile__link {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 650; text-decoration: none; border-bottom: 1.5px solid currentColor; margin-top: 1.1rem; padding-bottom: .1rem;
}

/* --- Bilder der Leistungen: kleine Szenen, die leise in Schleife laufen,
       solange sie zu sehen sind (seite.js setzt .laeuft). ---------------- */
.zeile__bild {
  position: relative; height: 10.75rem; overflow: hidden;
  border-radius: var(--r); background: var(--cw-surface);
  box-shadow: var(--cw-e1), inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in oklab, var(--cw-ink) 7%, transparent);
  --tinte: #0F1015; --grau: #C9CBD3; --grau-2: #E2E3E8; --blau-t: #4F52E0;
}
.zeile__bild:not(.laeuft) *, .zeile__bild:not(.laeuft)::before, .zeile__bild:not(.laeuft)::after { animation-play-state: paused !important; }
.bild-chip {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .32rem .6rem .32rem .5rem; border-radius: 9px;
  background: var(--nacht); color: var(--nacht-ink); font-size: .72rem; font-weight: 650;
  box-shadow: 0 8px 18px -8px rgba(13,14,18,.55);
}
.bild-chip .i { width: 14px; height: 14px; color: var(--nacht-akzent); }
.bild-chip time { font-family: var(--cw-font-mono); font-weight: 500; color: var(--nacht-soft); font-variant-numeric: tabular-nums; }

/* 1. Telefonassistent: das Plättchen spricht. */
.bild-anruf { display: grid; place-items: center; }
.bild-anruf__puls { position: relative; z-index: 1; width: 4.8rem; height: 4.8rem; margin-top: -1.5rem; filter: drop-shadow(0 10px 16px rgba(13,14,18,.35)); }
.bild-anruf__puls .b { transform-box: fill-box; transform-origin: 50% 50%; animation: sprechen 1.3s ease-in-out infinite; }
.bild-anruf__puls .b:nth-of-type(2) { animation-duration: .95s; animation-delay: -.3s; }
.bild-anruf__puls .b:nth-of-type(3) { animation-duration: 1.15s; animation-delay: -.6s; }
@keyframes sprechen { 0%, 100% { transform: scaleY(.55); } 30% { transform: scaleY(1.12); } 55% { transform: scaleY(.72); } 78% { transform: scaleY(1); } }
.bild-anruf__ring {
  position: absolute; left: 50%; top: calc(50% - .75rem); width: 4.8rem; height: 4.8rem; margin: -2.4rem 0 0 -2.4rem;
  border-radius: 1.08rem; border: 1px solid color-mix(in oklab, var(--tinte) 22%, transparent);
  animation: ring 3.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.bild-anruf__ring + .bild-anruf__ring { animation-delay: 1.6s; }
.bild-anruf__chip { position: absolute; left: 50%; bottom: .9rem; translate: -50% 0; }
.bild-anruf__punkt { width: 7px; height: 7px; border-radius: 50%; background: #5BD08A; animation: blink 1.6s ease-in-out infinite; }

/* 2. Abläufe: ein Punkt läuft vom Anruf bis zur SMS, jede Station hakt ab. */
/* Die Grafik passt sich in die feste Kartenhöhe ein (viewBox, meet). Vorher
   wuchs sie mit der Breite und wurde am Handy unten abgeschnitten. */
.bild-ablauf { display: block; padding: .4rem; }
.bild-ablauf__netz { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.ba-kanten path { fill: none; stroke: var(--grau); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ba-punkte circle { fill: var(--blau-t); opacity: 0; filter: drop-shadow(0 0 3px rgba(79, 82, 224, .6)); }
.ba-punkte circle.ki { fill: #A855F7; filter: drop-shadow(0 0 3px rgba(168, 85, 247, .6)); }
.ba-knoten circle { fill: #fff; stroke: var(--grau); stroke-width: 1.5; }
.bild-ablauf use { fill: none; stroke: #4B4D5A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-ki rect { fill: #A855F7; }
.ba-ki .ba-ki__hof { opacity: 0; }
.ba-ki use { stroke: #fff; stroke-width: 1.8; }
.ba-raute rect { fill: #fff; stroke: #A855F7; stroke-width: 1.5; }
.ba-haken circle { fill: #1F9D57; }
.ba-haken g { opacity: 0; }
.ba-haken path, .ba-ziel path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ba-ziel circle { fill: #fff; stroke: #1F9D57; stroke-width: 1.5; }
.ba-ziel path { stroke: #6B6D7A; stroke-width: 2.2; }

/* 3. Websites: ein Formular füllt sich, die Anfrage landet im Kalender. */
.bild-web { padding: .9rem .9rem 0; }
.bild-web__fenster {
  height: 100%; border-radius: 10px 10px 0 0; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinte) 8%, transparent), 0 10px 24px -14px rgba(13,14,18,.4);
}
.bild-web__leiste { display: flex; align-items: center; gap: 4px; padding: .45rem .55rem; border-bottom: 1px solid var(--grau-2); }
.bild-web__leiste i { width: 6px; height: 6px; border-radius: 50%; background: var(--grau); }
.bild-web__leiste span { margin-left: .5rem; flex: 1; font-size: .6rem; font-weight: 600; color: #6B6D7A; background: #F1F2F5; border-radius: 5px; padding: .12rem .45rem; }
.bild-web__inhalt { display: grid; gap: .38rem; padding: .6rem .7rem; justify-items: start; }
.bild-web__titel { width: 58%; height: 8px; border-radius: 4px; background: var(--tinte); }
.bild-web__zeile { width: 82%; height: 5px; border-radius: 3px; background: var(--grau-2); margin-bottom: .15rem; }
.bild-web__feld { width: 100%; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--grau); display: flex; align-items: center; padding-inline: 6px; }
.bild-web__tipp { height: 4px; border-radius: 2px; background: #6B6D7A; transform-origin: 0 50%; transform: scaleX(0); animation: 5.6s steps(9, end) infinite; }
.bild-web__tipp--1 { width: 58%; animation-name: tippen1; }
.bild-web__tipp--2 { width: 44%; animation-name: tippen2; }
@keyframes tippen1 { 0%, 8% { transform: scaleX(0); } 26%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes tippen2 { 0%, 30% { transform: scaleX(0); } 46%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
.bild-web__knopf {
  margin-top: .1rem; font-size: .6rem; font-weight: 700; color: #fff; background: var(--nacht);
  padding: .3rem .6rem; border-radius: 5px; animation: druecken 5.6s ease-out infinite;
}
@keyframes druecken { 0%, 52% { transform: none; background: var(--nacht); } 55% { transform: scale(.92); background: #33353F; } 59%, 100% { transform: none; background: var(--nacht); } }
.bild-web__meldung {
  position: absolute; right: .7rem; bottom: .75rem;
  animation: melden 5.6s cubic-bezier(.2, 1.3, .35, 1) infinite;
}
@keyframes melden {
  0%, 58% { opacity: 0; transform: translateY(10px) scale(.94); }
  63%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(4px); }
}
.zeile__link .i { transition: transform 160ms var(--cw-ease-out); }
@media (hover: hover) and (pointer: fine) { .zeile__link:hover .i { transform: translateX(3px); } }
.leistungen__rat { margin-top: clamp(1.8rem, 4vh, 2.6rem); font-size: 1.06rem; color: var(--cw-ink-soft); max-width: 60ch; }

/* Das Versprechen: ruhig wie die übrige Seite, aber mit Gewicht. Weiße Karte
   mit feinem blauem Rand, „Geld zurück.“ in Markenblau als Blickfang. */
.garantie {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.8rem, 3.8vw, 3.2rem) clamp(1.5rem, 3.8vw, 3.2rem);
  border-radius: var(--r); background: #fff;
  box-shadow: 0 0 0 1px rgba(79, 82, 224, .2), 0 2px 4px hsl(232 30% 20% / .06), 0 28px 60px -30px rgba(79, 82, 224, .45);
}
/* Feiner Blauschimmer links oben, damit die Karte nicht nur weiß ist */
.garantie::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 90% at 0% 0%, rgba(100, 103, 242, .09), transparent 70%);
}
.garantie > * { position: relative; }
.garantie__kicker { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: #3336B8; }
.garantie__abzeichen { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #4F52E0; color: #fff; box-shadow: 0 0 0 4px rgba(79, 82, 224, .14); }
.garantie__abzeichen .i { width: .95rem; height: .95rem; stroke-width: 3; }
.garantie__gross { margin-top: .9rem; font-size: clamp(1.9rem, 1rem + 2vw, 2.8rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1; }
.garantie__gross em { display: block; margin-top: .14em; font-style: normal; color: #4F52E0; }
.garantie__text > p:first-child { line-height: 1.6; }
.garantie__punkte { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem .6rem; margin-top: 1rem; }
.garantie__punkte li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .7rem .34rem .5rem; border-radius: 99px;
  background: #EEEFFD; color: #2B2E9E; font-size: .84rem; font-weight: 650;
}
.garantie__punkte .i { width: .95rem; height: .95rem; stroke-width: 3; color: #4F52E0; }
.garantie__klein { margin-top: .9rem; font-size: .84rem; line-height: 1.5; color: var(--cw-ink-soft); }


/* Kleine Überzeile über Abschnittstiteln */
.kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cw-accent); margin-bottom: 1rem;
}

/* ==========================================================================
   AUTOMATISIERUNG
   ========================================================================== */
.auto { padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3rem, 7vh, 5rem); }
.auto__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 6vw, 7rem); align-items: center;
}
.auto__text .titel, .web__text .titel { font-size: clamp(2.2rem, 1.1rem + 3.1vw, 4.3rem); max-width: 16ch; }
.auto__text .lede { margin-top: 1.4rem; }
.auto__pruef {
  margin-top: 1.5rem; max-width: 46ch; padding: .95rem 1.15rem;
  font-size: .98rem; line-height: 1.55; color: var(--cw-ink);
  background: var(--cw-surface); border-radius: 0 var(--r-klein) var(--r-klein) 0;
  box-shadow: inset 3px 0 0 var(--violett);
}
.auto__pruef b { font-weight: 700; }
.auto__wege { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }

/* Die Aufgabenliste, die sich selbst abhakt (seite.js setzt .ist-erledigt). */
.aufgaben {
  background: #fff; border-radius: 18px; padding: 1.3rem 1.35rem 1.05rem;
  box-shadow: var(--cw-e3), inset 0 0 0 1px color-mix(in oklab, var(--cw-ink) 6%, transparent);
}
.aufgaben__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.aufgaben__titel { font-weight: 750; font-size: 1.12rem; letter-spacing: -0.02em; }
.aufgaben__titel span { font-weight: 500; color: var(--cw-ink-soft); }
.aufgaben__stand { font-size: .84rem; font-weight: 650; color: var(--cw-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 240ms var(--cw-ease-out); }
.aufgaben.ist-fertig .aufgaben__stand { color: #1F7A45; }
.aufgaben__balken { height: 4px; border-radius: 4px; background: #E4E5EA; margin: .85rem 0 .35rem; overflow: hidden; }
.aufgaben__balken span {
  display: block; height: 100%; background: var(--cw-accent);
  transform-origin: 0 50%; transform: scaleX(var(--anteil, 0)); transition: transform 420ms var(--cw-ease-out);
}
.no-js .aufgaben__balken span { transform: none; }
.aufgaben__liste { list-style: none; display: grid; }
.aufgabe {
  display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); gap: .85rem;
  padding: .78rem .1rem; border-top: 1px solid #ECEDF1;
}
.aufgabe:first-child { border-top: 0; }
.aufgabe__haken {
  width: 1.45rem; height: 1.45rem; margin-top: .02rem; border-radius: 7px;
  display: grid; place-items: center; color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--feldrand);
  transition: background-color 240ms var(--cw-ease-out), box-shadow 240ms var(--cw-ease-out), color 200ms var(--cw-ease-out);
}
.aufgabe__haken .i { width: .9rem; height: .9rem; stroke-width: 3.2; transform: scale(.3); transition: transform 380ms cubic-bezier(.2, 1.6, .4, 1); }
.aufgabe__was {
  font-weight: 650; font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em;
  text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1.5px;
  transition: color 260ms var(--cw-ease-out), text-decoration-color 260ms var(--cw-ease-out);
}
.aufgabe__wie {
  display: flex; align-items: center; gap: .5rem; margin-top: .3rem;
  font-size: .86rem; line-height: 1.35; color: var(--cw-ink-soft);
  opacity: 0; transform: translateY(-3px); transition: opacity 300ms var(--cw-ease-out), transform 300ms var(--cw-ease-out);
}
.aufgabe__wie em {
  flex: none; font-style: normal; font-size: .64rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  padding: .14rem .4rem; border-radius: 5px;
}
.aufgabe[data-art="ki"] .aufgabe__wie em { background: #F1E6FE; color: #6B21A8; }
.aufgabe[data-art="ablauf"] .aufgabe__wie em { background: #E6E7FD; color: #3336B8; }
.aufgabe.ist-erledigt .aufgabe__haken, .no-js .aufgabe__haken { background: var(--nacht); color: #fff; box-shadow: none; }
.aufgabe.ist-erledigt .aufgabe__haken .i, .no-js .aufgabe__haken .i { transform: none; }
.aufgabe.ist-erledigt .aufgabe__was, .no-js .aufgabe__was { color: #5E606C; text-decoration-color: #A9ABB5; }
.aufgabe.ist-erledigt .aufgabe__wie, .no-js .aufgabe__wie { opacity: 1; transform: none; }
.aufgaben__fuss { margin-top: .55rem; font-size: .78rem; color: var(--cw-ink-soft); }

.werkzeuge {
  margin-top: clamp(3rem, 7vh, 5rem); padding-top: 1.6rem; border-top: 1px solid var(--cw-hairline-strong);
  display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: 1.1rem clamp(1.5rem, 4vw, 4rem);
}
.werkzeuge__titel { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }
.werkzeuge__titel span { display: block; margin-top: .3rem; font-weight: 500; font-size: .98rem; color: var(--cw-ink-soft); letter-spacing: -0.01em; }
.werkzeuge__liste { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; align-content: start; }
.werkzeuge__liste li {
  font-size: .86rem; font-weight: 650; padding: .38rem .75rem; border-radius: 9px;
  background: var(--cw-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cw-ink) 9%, transparent);
}
.werkzeuge__mehr { grid-column: 2; font-size: .92rem; line-height: 1.55; color: var(--cw-ink-soft); max-width: 64ch; }

/* Ein Ablauf von innen: dunkle Arbeitsfläche, Knoten im Raster, Kanten von
   seite.js. Zustände: .ist-aktiv (arbeitet), .ist-fertig (Haken). */
.lauf-rahmen { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.lauf-einleitung { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline; margin-bottom: 1.6rem; }
.lauf-einleitung__titel { font-size: var(--cw-t-2xl); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }
.lauf-einleitung p { max-width: 52ch; color: var(--cw-ink-soft); font-size: 1.05rem; line-height: 1.55; }
.lauf {
  --l-linie: rgba(241, 241, 244, .1); --l-akzent: #8E90FF; --l-ki: #C084FC; --l-gut: #3FBF7F; --l-warte: #F2B33D;
  border-radius: var(--r); overflow: hidden; color: var(--nacht-ink);
  background: radial-gradient(circle at 1px 1px, rgba(241, 241, 244, .07) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--nacht);
  box-shadow: var(--cw-e2);
}
.lauf__kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .95rem 1.3rem; border-bottom: 1px solid var(--l-linie); background: rgba(13, 14, 18, .8);
}
.lauf__titel { font-size: .95rem; font-weight: 650; }
.lauf__titel span { margin-right: .7rem; padding: .2rem .5rem; border-radius: 6px; background: #23252E; color: var(--nacht-soft); font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.lauf__stand { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; color: var(--nacht-soft); font-variant-numeric: tabular-nums; }
.lauf__stand i { width: 8px; height: 8px; border-radius: 50%; background: #5B5E6B; }
.lauf.laeuft .lauf__stand i { background: var(--l-akzent); animation: blink 1.2s ease-in-out infinite; }
.lauf.ist-durch .lauf__stand { color: var(--nacht-ink); }
.lauf.ist-durch .lauf__stand i { background: var(--l-gut); animation: none; }

.lauf__flaeche {
  position: relative; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  gap: 1.5rem clamp(1.4rem, 2.6vw, 2.8rem); align-items: center;
  padding: 2rem 1.3rem 2.2rem;
}
.lauf__kanten { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.lauf__kanten path { fill: none; stroke-linecap: round; }
.lauf__kanten .kante { stroke: rgba(241, 241, 244, .16); stroke-width: 1.5; transition: stroke 400ms var(--cw-ease-out); }
.lauf__kanten .kante.ist-an { stroke: color-mix(in oklab, var(--l-akzent) 70%, transparent); }
.lauf__kanten .kante--leise { stroke-dasharray: 3 5; stroke: rgba(241, 241, 244, .14); }
.lauf__kanten .spur { stroke: #fff; stroke-width: 2.4; opacity: 0; filter: drop-shadow(0 0 4px var(--l-akzent)); }
.lauf__kanten circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px var(--l-akzent)); }

.lk {
  position: relative; z-index: 1; grid-column: var(--sp); grid-row: var(--ze);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: 12px; background: #17181E;
  box-shadow: inset 0 0 0 1px var(--l-linie), 0 10px 24px -14px rgba(0, 0, 0, .8);
  transition: box-shadow 320ms var(--cw-ease-out), background-color 320ms var(--cw-ease-out);
}
.lk__symbol { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: #25272F; color: #D6D7DE; transition: background-color 320ms var(--cw-ease-out), color 320ms var(--cw-ease-out); }
.lk__symbol .i { width: 1rem; height: 1rem; }
.lk__text { display: grid; min-width: 0; line-height: 1.25; }
.lk__text b { font-size: .8rem; font-weight: 650; letter-spacing: -0.005em; }
.lk__text small { font-size: .68rem; color: var(--nacht-soft); }
/* Status als Plakette an der oberen rechten Ecke */
.lk__status { position: absolute; right: -.4rem; top: -.4rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #17181E; box-shadow: inset 0 0 0 1.5px #3A3C47; }
.lk__status::after {
  content: ""; position: absolute; left: .36rem; top: .22rem; width: .3rem; height: .52rem;
  border-right: 2px solid #0D0E12; border-bottom: 2px solid #0D0E12; transform: rotate(45deg) scale(0); transition: transform 300ms cubic-bezier(.3, 1.6, .5, 1);
}
.lk.ist-aktiv { box-shadow: inset 0 0 0 1.5px var(--l-akzent), 0 0 0 5px color-mix(in oklab, var(--l-akzent) 14%, transparent), 0 14px 30px -12px rgba(0, 0, 0, .9); }
.lk.ist-aktiv .lk__symbol { background: var(--l-akzent); color: #0D0E12; }
.lk.ist-aktiv .lk__status { box-shadow: none; border: 2px solid var(--l-akzent); border-right-color: transparent; animation: dreht 700ms linear infinite; }
.lk.ist-fertig .lk__symbol { background: #2C2E38; color: #fff; }
.lk.ist-fertig .lk__status { background: var(--l-gut); box-shadow: none; }
.lk.ist-fertig .lk__status::after { transform: rotate(45deg) scale(1); }
@keyframes dreht { to { transform: rotate(360deg); } }

/* KI: violett, mit den gefundenen Angaben darunter */
.lk--ki { grid-template-rows: auto auto; }
.lk--ki .lk__symbol { background: color-mix(in oklab, var(--l-ki) 22%, #1B1C22); color: var(--l-ki); }
.lk--ki.ist-aktiv { box-shadow: inset 0 0 0 1.5px var(--l-ki), 0 0 0 5px color-mix(in oklab, var(--l-ki) 16%, transparent), 0 14px 30px -12px rgba(0, 0, 0, .9); }
.lk--ki.ist-aktiv .lk__symbol { background: var(--l-ki); color: #0D0E12; }
.lk--ki.ist-aktiv .lk__status { border-color: var(--l-ki); border-right-color: transparent; }
.lk__funde { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.lk__funde li {
  padding: .16rem .42rem; border-radius: 5px; font-size: .66rem; font-weight: 650;
  background: color-mix(in oklab, var(--l-ki) 16%, #17181E); color: #E9D5FF; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--l-ki) 35%, transparent);
  transition: opacity 260ms var(--cw-ease-out), transform 360ms cubic-bezier(.3, 1.5, .5, 1);
}
.js:not(.ruhig) .lk__funde li:not(.ist-da) { opacity: 0; transform: translateY(4px) scale(.9); }

/* Verzweigung: eine Raute auf der Kante, der nicht genommene Zweig bleibt leise */
.lk-frage {
  position: absolute; z-index: 2; left: 0; top: 0; width: 2.9rem; height: 2.9rem; margin: -1.45rem 0 0 -1.45rem;
  display: grid; place-items: center; pointer-events: none;
}
.lk-frage::before { content: ""; position: absolute; inset: .45rem; border-radius: 5px; transform: rotate(45deg); background: #17181E; box-shadow: inset 0 0 0 1.5px #3A3C47; transition: background-color 300ms var(--cw-ease-out), box-shadow 300ms var(--cw-ease-out); }
.lk-frage span { position: relative; font-size: .62rem; font-weight: 750; color: var(--nacht-soft); }
.lk-frage.ist-aktiv::before, .lk-frage.ist-fertig::before { background: var(--l-akzent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--l-akzent) 18%, transparent); }
.lk-frage.ist-aktiv span, .lk-frage.ist-fertig span { color: #0D0E12; }
.lk--zweig { grid-template-columns: minmax(0, 1fr); padding: .45rem .6rem; background: transparent; box-shadow: none; border: 1px dashed rgba(241, 241, 244, .18); }
.lk--zweig b { color: var(--nacht-soft); font-weight: 600; }
.lk--zweig small { color: #8E91A0; }

/* Freigabe: wartet auf Sie (gelb), dann freigegeben */
.lk--frei.ist-aktiv { box-shadow: inset 0 0 0 1.5px var(--l-warte), 0 0 0 5px color-mix(in oklab, var(--l-warte) 14%, transparent), 0 14px 30px -12px rgba(0, 0, 0, .9); }
.lk--frei.ist-aktiv .lk__symbol { background: var(--l-warte); }
.lk--frei.ist-aktiv .lk__status { border-color: var(--l-warte); border-right-color: transparent; animation-duration: 1.6s; }
.lk--frei:is(.ist-aktiv, .ist-fertig) .lk__normal { display: none; }
.lk--frei.ist-aktiv .lk__jetzt::before { content: "wartet auf Sie"; color: var(--l-warte); font-weight: 650; }
.lk--frei.ist-fertig .lk__jetzt::before { content: "freigegeben in Teams"; color: var(--l-gut); font-weight: 650; }
.lk--ziel.ist-fertig { box-shadow: inset 0 0 0 1.5px var(--l-gut), 0 0 0 5px color-mix(in oklab, var(--l-gut) 14%, transparent), 0 14px 30px -12px rgba(0, 0, 0, .9); }
.lk--ziel.ist-fertig .lk__symbol { background: var(--l-gut); color: #0D0E12; }
.lauf__fuss { padding: .8rem 1.3rem 1rem; border-top: 1px solid var(--l-linie); font-size: .8rem; color: var(--nacht-soft); }

/* Ohne Bewegung und ohne JavaScript: der fertige Lauf */
:is(.no-js, .ruhig) .lk:not(.lk--zweig) .lk__status { background: var(--l-gut); box-shadow: none; }
:is(.no-js, .ruhig) .lk .lk__status::after { transform: rotate(45deg) scale(1); }
.no-js .lk-frage { display: none; }

/* ==========================================================================
   WEBSITES
   ========================================================================== */
.web {
  background: var(--nacht); color: var(--nacht-ink);
  padding-block: clamp(4.5rem, 11vh, 8rem);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
  --cw-hairline-strong: color-mix(in oklab, #F1F1F4 20%, transparent);
}
.web ::selection { background: var(--nacht-akzent); color: var(--nacht); }
.web__raster {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.web__text .lede { margin-top: 1.4rem; color: var(--nacht-soft); }
.web__punkte { list-style: none; margin-top: 1.6rem; border-top: 1px solid var(--nacht-linie); }
.web__punkte li {
  position: relative; padding: .72rem 0 .72rem 1.8rem; border-bottom: 1px solid var(--nacht-linie);
  font-size: .97rem; line-height: 1.5; color: var(--nacht-soft);
}
.web__punkte li::before {
  content: ""; position: absolute; left: .15rem; top: 1.02rem; width: .8rem; height: .42rem;
  border-left: 2px solid var(--nacht-akzent); border-bottom: 2px solid var(--nacht-akzent); transform: rotate(-45deg);
}
.web__punkte b { color: var(--nacht-ink); font-weight: 650; }
.web__wege { margin-top: 1.8rem; }
.web__notiz { margin-top: 1rem; font-size: .86rem; color: var(--nacht-soft); }

.web__bild { position: relative; display: grid; gap: .9rem; }
.web__bild figcaption { font-size: .8rem; color: var(--nacht-soft); }
/* Beispielseite: ein erfundenes Hotel (Kalmhöhe). Beim Scrollen wird es Abend
   (zweites Bild mit gleicher Kamera, Deckkraft aus --abend), daneben füllt
   sich die Buchungsanfrage. Bilder: kie.ai Nano Banana 2, Schrift Cormorant
   Garamond (SIL OFL, selbst gehostet). */
@font-face {
  font-family: "Hotel Serif"; src: url("fonts/cormorant-garamond-latin-wght.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
}
.browser {
  border-radius: 12px; overflow: hidden; background: #0F1116; color: #F6F1E8;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -30px rgba(0,0,0,.9);
}
.browser__leiste { display: flex; align-items: center; gap: 6px; padding: .55rem .8rem; background: #17191F; border-bottom: 1px solid rgba(255,255,255,.07); }
.browser__leiste i { width: 9px; height: 9px; border-radius: 50%; background: #3A3F48; }
.browser__leiste span {
  display: flex; align-items: center; gap: .5rem; flex: 1; max-width: 17rem; margin-left: .7rem;
  padding: .32rem .6rem; border-radius: 6px; background: #0F1116;
}
.browser__leiste .i { width: .72rem; height: .72rem; color: #7D8792; stroke-width: 2.3; }
.browser__leiste em { width: 7.5rem; height: 5px; border-radius: 3px; background: #2A2F37; }

.ht { --gold: #D9B77A; --elfenbein: #F6F1E8; --hs: "Hotel Serif", Georgia, serif; font-size: 16px; background: #0F1116; color: var(--elfenbein); container-type: inline-size; }
.ht__buehne { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; isolation: isolate; }
.ht__bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.ht__bild--abend { opacity: var(--abend, 1); }
.ht__buehne::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(8, 10, 16, .62) 0%, rgba(8, 10, 16, .22) 45%, transparent 70%),
              linear-gradient(to bottom, rgba(8, 10, 16, .5), transparent 26%);
}
.ht__kopf { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.2rem; padding: .95rem 1.2rem; }
.ht__marke { display: grid; gap: .28rem; font-family: var(--hs); font-weight: 500; font-size: 1.12rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; }
.ht__marke small { font-family: var(--cw-font-text, inherit); font-size: .46rem; font-weight: 600; letter-spacing: .34em; color: var(--gold); }
.ht__nav { display: flex; gap: 1.1rem; margin-left: auto; font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ht__buchen { padding: .42rem .85rem; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .6); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ht__text { position: absolute; z-index: 2; left: 1.2rem; top: 25%; max-width: 50%; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
/* Größen hängen an der Breite der Beispielseite (cqi), nicht am Fenster:
   Auf Tablets lag die Anfragekarte sonst über der Überschrift. */
.ht__titel { font-family: var(--hs); font-weight: 400; font-size: clamp(1.7rem, 7.8cqi, 3.5rem); line-height: .92; letter-spacing: -0.01em; }
.ht__titel em { display: block; font-style: italic; font-weight: 500; color: var(--gold); }
.ht__unter { margin-top: .75rem; max-width: 24ch; font-size: .78rem; line-height: 1.45; }

/* Die Anfrage als Glaskarte unten rechts */
.ht__anfrage {
  position: absolute; z-index: 3; right: 1rem; bottom: 1rem; width: min(15.8rem, 44cqi);
  padding: .75rem .8rem .8rem; border-radius: 14px;
  background: rgba(12, 14, 20, .66); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .18), 0 20px 40px -18px rgba(0, 0, 0, .8);
}
.ht__schritt { display: flex; justify-content: space-between; font-size: .54rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #D8D2C7; }
.ht__schritt b { color: var(--gold); }
.ht__balken { height: 2px; margin: .45rem 0 .6rem; border-radius: 2px; background: rgba(246, 241, 232, .14); overflow: hidden; }
.ht__balken span { display: block; height: 100%; width: 33.3%; background: var(--gold); transition: width 380ms var(--cw-ease-out); }
/* Alle Schritte liegen in derselben Rasterzelle: Die Karte ist immer so hoch
   wie ihr längster Schritt, sonst springt am Handy der Inhalt darunter. */
.ht__anfrage { display: grid; grid-template-columns: minmax(0, 1fr); }
.ht__teil, .ht__fertig { grid-row: 3; grid-column: 1; visibility: hidden; }
.ht__felder { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.ht__feld { padding: .38rem .5rem .42rem; border-radius: 8px; background: rgba(246, 241, 232, .07); box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .14); }
.ht__felder .ht__feld:last-child { grid-column: 1 / -1; }
.ht__feld small { display: block; font-size: .5rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #CFC8BB; }
.ht__wert { display: block; margin-top: .12rem; font-size: .74rem; font-weight: 600; }
.ht__wert i { display: none; font-style: normal; font-weight: 500; color: #B9B2A6; }
.ht__wert b { font-weight: 600; transition: color 300ms var(--cw-ease-out); }
.ht__feld--zeile { margin-top: .35rem; }
.ht__eingabe { display: block; margin-top: .12rem; font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ht__knopf {
  margin-top: .6rem; padding: .52rem .8rem; border-radius: 99px; text-align: center;
  background: var(--elfenbein); color: #14161C; font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  transition: background-color 260ms var(--cw-ease-out);
}
.ht__zimmer { display: flex; align-items: center; gap: .6rem; padding: .4rem; border-radius: 10px; background: rgba(246, 241, 232, .07); box-shadow: inset 0 0 0 1.5px var(--gold); }
.ht__zimmer img { width: 3.6rem; height: 2.7rem; border-radius: 7px; object-fit: cover; max-width: none; }
.ht__zimmer span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ht__zimmer b { font-family: var(--hs); font-size: 1rem; font-weight: 600; }
.ht__zimmer small { font-size: .58rem; color: #D8D2C7; }
.ht__zimmer em { font-style: normal; font-size: .52rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #14161C; background: var(--gold); padding: .2rem .4rem; border-radius: 99px; }
.ht__fertig { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding-top: .2rem; }
.ht__fertig p:first-child { display: flex; align-items: center; gap: .5rem; font-family: var(--hs); font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.ht__fertig .i { flex: none; width: 1.45rem; height: 1.45rem; padding: .27rem; border-radius: 50%; background: var(--gold); color: #14161C; stroke-width: 3; }
.ht__zusammen { font-size: .62rem; line-height: 1.45; color: #D8D2C7; padding: .45rem .55rem; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .18); }

/* Unter dem Bild: zwei Bildkacheln und eine Textkachel */
.ht__reihe { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: .7rem; padding: .8rem 1rem 1rem; }
.ht__karte { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.ht__karte img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ht__karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 10, 16, .7), transparent 55%); }
.ht__karte span { position: absolute; z-index: 1; left: .7rem; bottom: .55rem; font-family: var(--hs); font-size: 1.02rem; font-weight: 500; line-height: 1.05; }
.ht__zitat { display: grid; align-content: center; padding: .8rem .9rem; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(246, 241, 232, .14); font-family: var(--hs); font-size: 1.3rem; font-weight: 400; line-height: 1.02; }
.ht__zitat small { margin-top: .6rem; font-family: var(--cw-font-text, inherit); font-size: .52rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ht__schritt span { white-space: nowrap; }
@container (max-width: 560px) {
  .ht__nav { display: none; }
  .ht__schritt { letter-spacing: .1em; }
}
/* Unter 470 px wird die Karte so hoch wie die Bühne und stößt an die Kopfzeile
   (Tablet quer um 900 px): dann wie am Handy, Bild oben, Anfrage darunter. */
@container (max-width: 470px) {
  .ht__buehne { aspect-ratio: auto; padding-top: 14.5rem; }
  .ht__bild { bottom: auto; height: 16.5rem; }
  .ht__buehne::after {
    bottom: auto; height: 16.5rem;
    background: linear-gradient(100deg, rgba(8, 10, 16, .72) 0%, rgba(8, 10, 16, .45) 48%, transparent 80%),
                linear-gradient(to bottom, rgba(8, 10, 16, .5), transparent 26%);
  }
  .ht__text { top: 4.2rem; max-width: 78%; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
  .ht__titel { font-size: 2.2rem; }
  .ht__anfrage { position: relative; right: auto; bottom: auto; width: auto; margin: 0 .7rem .8rem; }
  .ht__schritt { letter-spacing: .16em; }
  .ht__reihe { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .ht__zitat { display: none; }
}

/* Stufen: 0 Daten offen · 1 Daten gewählt · 2 Suite · 3 Kontakt · 4 gesendet */
[data-stufe="0"] [data-teil="1"], [data-stufe="1"] [data-teil="1"],
[data-stufe="2"] [data-teil="2"], [data-stufe="3"] [data-teil="3"] { visibility: visible; }
[data-stufe="4"] .ht__fertig { visibility: visible; }
[data-stufe="0"] .ht__wert i { display: inline; }
[data-stufe="0"] .ht__wert b:not(.fest) { display: none; }
[data-stufe="1"] .ht__wert b:not(.fest) { color: var(--gold); }
[data-stufe="1"] [data-teil="1"] .ht__knopf, [data-stufe="3"] .ht__knopf { background: var(--gold); }
[data-stufe="2"] .ht__balken span { width: 66.6%; }
[data-stufe="3"] .ht__balken span, [data-stufe="4"] .ht__balken span { width: 100%; }
[data-stufe="3"] .ht__eingabe { animation: tippen 700ms steps(12, end) both; }
[data-stufe="3"] .ht__feld + .ht__feld .ht__eingabe { animation-delay: 350ms; }
@keyframes tippen { from { max-width: 0; } to { max-width: 12rem; } }

/* ==========================================================================
   ZUSAGE
   ========================================================================== */
.zusage { padding-block: clamp(3.5rem, 9vh, 6rem) clamp(3rem, 7vh, 5rem); }

/* Datenschutz und KI-Recht: die zweite Zusage nach dem Geld-zurück-Versprechen.
   Blau für die DSGVO, Violett für die KI-Verordnung, wie „call“ und „it“ in der
   Marke. Karten statt Siegel, denn ein Zertifikat haben wir nicht. */
.recht { padding-block: clamp(1rem, 3vh, 2rem) clamp(4rem, 10vh, 7rem); }
.recht__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.recht__kopf .titel { max-width: 14ch; }
.recht__kopf .lede { margin-top: 1.3rem; }
.recht__fuss { margin-top: 1.6rem; max-width: 46ch; font-size: .92rem; line-height: 1.55; color: var(--cw-ink-soft); }
.recht__fuss b { color: var(--cw-ink); font-weight: 700; }
.recht__fuss a { color: var(--cw-ink); font-weight: 650; text-underline-offset: .2em; }
.recht__punkte { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
.recht__punkt {
  display: grid; align-content: start; gap: .55rem;
  padding: 1.25rem 1.3rem 1.35rem; border-radius: var(--r); background: #fff;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cw-ink) 8%, transparent), 0 1px 2px hsl(232 30% 20% / .05), 0 18px 40px -28px hsl(232 40% 30% / .35);
}
.recht__marke {
  justify-self: start; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem .3rem .45rem; border-radius: 99px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em; background: #EEEFFD; color: #2B2E9E;
}
.recht__marke .i { width: .95rem; height: .95rem; }
.recht__punkt--ki .recht__marke { background: #F4ECFE; color: #6B21A8; }
.recht__punkt h3 { margin-top: .3rem; font-size: 1.12rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.recht__punkt p { font-size: .95rem; line-height: 1.55; color: var(--cw-ink-soft); }
.recht__punkt .textlink { justify-self: start; margin-top: .25rem; font-size: .95rem; color: #6B21A8; }
/* Tablet quer: Kopf über den Karten, sonst werden die Karten zu schmal */
@media (min-width: 860px) and (max-width: 1100px) {
  .recht__raster { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .recht__kopf .titel { max-width: 20ch; }
}
@media (max-width: 859px) {
  .recht__raster { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .recht__kopf .lede { font-size: 1rem; }
}
@media (max-width: 560px) { .recht__punkte { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   KI-MITARBEITER
   ========================================================================== */
.mitarbeiter { background: var(--nacht); }
.mitarbeiter__buehne {
  background:
    radial-gradient(70% 60% at 85% 20%, #1B1D2A 0%, transparent 60%),
    var(--nacht);
  color: var(--nacht-ink); display: grid; align-items: center;
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.mitarbeiter__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center;
  padding-bottom: calc(var(--leiste-h) + 1.5rem);
}
.marke-neu {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nacht-akzent); margin-bottom: 1.2rem;
}
.mitarbeiter__text .lede { margin-top: 1.4rem; color: var(--nacht-soft); }
.mitarbeiter__pilot { margin-top: 1.1rem; font-size: var(--cw-t-sm); color: var(--nacht-ink); font-weight: 600; }
.mitarbeiter__text .knopf { margin-top: 1.6rem; }

.ruft-an {
  background: var(--nacht-2); border: 1px solid var(--nacht-linie); border-radius: 28px;
  padding: clamp(1.2rem, 2.5vw, 2rem); box-shadow: var(--cw-e3), inset 0 1px 0 rgba(255,255,255,.06);
}
.ruft-an__kopf { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--nacht-linie); }
.ruft-an__kopf .puls-mini { width: 46px; height: 46px; }
.ruft-an__kopf span { display: grid; font-weight: 700; font-size: 1.1rem; line-height: 1.25; }
.ruft-an__kopf small { font-weight: 500; font-size: .85rem; color: var(--nacht-soft); }
.ruft-an__verlauf { list-style: none; display: grid; gap: .9rem; margin-top: 1.2rem; }
.ruft-an__verlauf li { font-size: clamp(1rem, .9rem + .35vw, 1.15rem); line-height: 1.5; padding: .85rem 1rem; border-radius: 16px; max-width: 92%; }
.ruft-an__verlauf b { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .2rem; }
.ruft-an__verlauf .ki { background: var(--nacht-3); }
.ruft-an__verlauf .ki b { color: var(--nacht-akzent); }
.ruft-an__verlauf .mensch { background: #F1F1F4; color: var(--nacht); justify-self: end; }
.ruft-an__verlauf .mensch b { color: #4B4D5A; }
.ruft-an__hinweis { margin-top: 1rem; font-size: .8rem; color: #7C7F8E; }

/* Begleitanruf für Ältere: zweiter Einsatz, in Entwicklung. Karte links,
   Text rechts, damit er sich vom KI-Mitarbeiter darüber absetzt. */
.begleiten {
  background: var(--nacht); color: var(--nacht-ink); padding-block: clamp(1.5rem, 5vh, 3.5rem) clamp(4.5rem, 11vh, 7.5rem);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.begleiten__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.begleiten__text { order: 2; }
.begleiten__titel { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.035em; max-width: 16ch; }
.begleiten .lede { margin-top: 1.2rem; color: var(--nacht-soft); }
.begleiten__punkte { list-style: none; display: grid; gap: .6rem; margin-top: 1.4rem; }
.begleiten__punkte li { display: flex; gap: .65rem; align-items: flex-start; font-size: .98rem; line-height: 1.45; }
.begleiten__punkte .i { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .22rem; color: var(--nacht-akzent); stroke-width: 2.8; }
.begleiten .textlink { margin-top: 1.7rem; }
.ruft-an__notiz {
  display: flex; gap: .65rem; align-items: flex-start; margin-top: 1rem; padding: .75rem .9rem; border-radius: 14px;
  border: 1.5px dashed color-mix(in oklab, var(--nacht-akzent) 55%, transparent);
  font-size: .92rem; line-height: 1.45; color: var(--nacht-soft);
}
.ruft-an__notiz b { color: var(--nacht-ink); font-weight: 650; }
.ruft-an__notiz .i { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--nacht-akzent); }
@media (max-width: 859px) {
  .begleiten__raster { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .begleiten__text { order: 0; }
  .begleiten .lede { font-size: 1rem; }
  .ruft-an__notiz { font-size: .86rem; }
}

/* ==========================================================================
   WER DRANGEHT
   ========================================================================== */
.wer { padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3rem, 7vh, 5rem); }
/* Das Bild ist so hoch wie der Text daneben (Überschrift bis Knopf), die
   Breite folgt aus 4:5. Die Bildunterschrift hängt darunter, außerhalb. */
.wer__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 7rem); align-items: stretch; padding-bottom: 1.8rem; }
.portrait { position: relative; margin: 0; }
.portrait__rahmen { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: #C9CCD3; box-shadow: var(--cw-e2); }
.portrait__bild { position: absolute; left: 0; top: -6%; width: 100%; height: 118%; max-width: none; object-fit: cover; object-position: 50% 30%; }
.portrait figcaption { position: absolute; left: 0; top: calc(100% + .7rem); font-size: .86rem; color: var(--cw-ink-soft); }
.wer__text .lede { margin-top: 1.4rem; color: var(--cw-ink); }
.fakten { margin-top: 2rem; border-top: 1px solid var(--cw-hairline-strong); }
.fakten > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--cw-hairline-strong); font-size: .98rem; }
.fakten dt { font-weight: 700; }
.fakten dd { color: var(--cw-ink-soft); }
@media (max-width: 380px) { .fakten > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.wer__text .knopf { margin-top: 1.8rem; }

.karte-ort {
  margin-top: clamp(3rem, 7vh, 5rem); position: relative; overflow: hidden; border-radius: var(--r);
  background: #E9EAEE; box-shadow: var(--cw-e2);
}
/* Vektorkarte aus OpenStreetMap-Daten (werkzeuge/standortkarte-vektor.py):
   scharf auf jedem Bildschirm, Schrift der Seite. seite.js hält den Maßstab
   so, dass die Straßennamen auch am Handy lesbar bleiben. */
.ortskarte { display: block; width: 100%; height: clamp(240px, 30vw, 380px); max-width: none; }
.k-grund { fill: #EDEEF1; }
.k-wohnen { fill: #F3F4F6; }
.k-wiese { fill: #E5EAE4; }
.k-wald { fill: #D9E2D7; }
.k-wasser { fill: none; stroke: #C4D3E6; stroke-width: 3; stroke-linecap: round; }
.k-haus { fill: #D6D9E1; stroke: #C9CCD5; stroke-width: .8; }
.k-pfad { fill: none; stroke: #B9BDC7; stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; }
.k-rand, .k-weg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-rand--strasse { stroke: #C3C7D0; stroke-width: 11; }
.k-weg--strasse { stroke: #fff; stroke-width: 8.6; }
.k-rand--klein { stroke: #C8CBD4; stroke-width: 7.5; }
.k-weg--klein { stroke: #fff; stroke-width: 5.5; }
.k-rand--feldweg { stroke: #D2D5DC; stroke-width: 5; }
.k-weg--feldweg { stroke: #F6F6F8; stroke-width: 3; }
.k-name { font-family: var(--cw-font-text); font-size: 12.5px; font-weight: 650; letter-spacing: .02em; fill: #7A7D8A; paint-order: stroke; stroke: #fff; stroke-width: 3.2px; stroke-linejoin: round; }
.k-schild rect { fill: #fff; filter: drop-shadow(0 3px 6px rgba(20, 22, 40, .18)); }
.k-schild text { font-family: var(--cw-font-text); font-size: 12.5px; font-weight: 750; fill: #1C1E27; }
.k-ort { font-family: var(--cw-font-text); font-size: 22px; font-weight: 700; letter-spacing: .08em; fill: #AEB1BC; paint-order: stroke; stroke: #EDEEF1; stroke-width: 5px; }
.k-nadel path { fill: #6467F2; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 4px 6px rgba(40, 42, 110, .35)); }
.k-nadel__auge { fill: #fff; }
.k-puls { fill: #6467F2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.js:not(.ruhig) .k-puls { animation: k-puls 2.8s ease-out infinite; }
.js:not(.ruhig) .k-puls--2 { animation-delay: 1.4s; }
@keyframes k-puls { 0% { opacity: .35; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }
.karte-ort figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  padding: 1.4rem 1.25rem 1rem; color: var(--cw-ink); font-weight: 650;
  background: linear-gradient(to top, rgba(247, 247, 249, .97), rgba(247, 247, 249, .88) 62%, transparent);
}
.karte-ort figcaption > a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.karte-ort small { flex-basis: 100%; font-weight: 500; font-size: .74rem; color: #555866; }

/* ==========================================================================
   ERFAHRUNG: dunkles Band nach „Über uns“, mittig und gleichmäßig
   ========================================================================== */
.erfahrung {
  background: radial-gradient(60% 70% at 50% 0%, #1B1D2A 0%, transparent 65%), var(--nacht);
  color: var(--nacht-ink); padding-block: clamp(4.5rem, 11vh, 7.5rem);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.erfahrung__kopf { max-width: 50rem; margin-inline: auto; text-align: center; }
.erfahrung__kopf .kicker { margin-bottom: .9rem; }
.erfahrung__titel em { display: block; margin-top: .1em; font-style: normal; color: var(--nacht-akzent); }
.erfahrung__kopf .lede { max-width: 58ch; margin: 1.4rem auto 0; }
/* Drei Gründe: Nummer, Titel und Text liegen über Subgrid in allen Karten auf
   derselben Höhe, auch wenn ein Titel zwei Zeilen braucht. */
.erfahrung__gruende {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  margin-top: clamp(2.6rem, 6vh, 3.8rem);
}
.erfahrung__grund {
  display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem 1.7rem; border-radius: var(--r);
  background: #15161D; box-shadow: inset 0 0 0 1px var(--nacht-linie);
}
@supports (grid-template-rows: subgrid) {
  .erfahrung__grund { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: .7rem; }
}
.erfahrung__nr { font-size: .8rem; font-weight: 750; letter-spacing: .1em; color: var(--nacht-akzent); font-variant-numeric: tabular-nums; }
.erfahrung__grund h3 { font-size: clamp(1.15rem, 1rem + .4vw, 1.3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.erfahrung__grund p { font-size: .97rem; line-height: 1.55; color: var(--nacht-soft); }
.erfahrung__zitat {
  max-width: 46rem; margin: clamp(2.8rem, 7vh, 4.2rem) auto 0; padding-left: clamp(1rem, 2.5vw, 1.6rem);
  border-left: 3px solid #6467F2;
}
.erfahrung__zitat p { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.3; text-wrap: pretty; }
@media (max-width: 859px) {
  .erfahrung__kopf { text-align: left; }
  .erfahrung__kopf .lede { margin-inline: 0; font-size: 1.05rem; }
  .erfahrung__gruende { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   FRAGEN
   ========================================================================== */
.fragen { padding-block: clamp(3rem, 8vh, 6rem) clamp(4rem, 10vh, 7rem); }
.fragen__raster { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.fragen__kopf { position: sticky; top: 2rem; display: grid; gap: 1.6rem; justify-items: start; }
.fragen__liste { border-top: 1px solid var(--cw-hairline-strong); }
.fragen__liste details { border-bottom: 1px solid var(--cw-hairline-strong); }
.fragen__liste summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding-block: 1.3rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.35;
}
.fragen__liste summary::-webkit-details-marker { display: none; }
.fragen__liste summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 200ms var(--cw-ease-out);
}
.fragen__liste details[open] summary::after { transform: rotate(45deg); }
.fragen__liste details p { padding-bottom: 1.4rem; color: var(--cw-ink-soft); max-width: 64ch; line-height: 1.65; }

/* ==========================================================================
   IHR ZUG (#kontakt)
   ========================================================================== */
.kontakt {
  background: var(--nacht); color: var(--nacht-ink);
  padding-top: clamp(4.5rem, 11vh, 8rem);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
  --cw-hairline: var(--nacht-linie); --cw-hairline-strong: color-mix(in oklab, #F1F1F4 20%, transparent);
}
.kontakt ::selection { background: var(--nacht-akzent); color: var(--nacht); }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.kontakt__wege { container-type: inline-size; }
.kontakt__wege .lede { margin-top: 1.2rem; color: var(--nacht-soft); }

.waehl {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l k" "n k" "s k";
  align-items: center; column-gap: 1.5rem;
  padding: 1.4rem 1.5rem; border-radius: var(--r);
  background: var(--nacht-2); border: 1px solid var(--nacht-linie);
}
.waehl__label { grid-area: l; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--nacht-soft); }
.waehl__nummer {
  /* Die Nummer ist 7,4-mal so breit wie ihre Schriftgröße; neben Knopf,
     Abstand und Innenrand (zusammen 150 px) bleibt so immer Platz. */
  grid-area: n; font-size: clamp(2rem, calc((100cqi - 150px) / 7.6), 3.4rem); font-weight: 750; letter-spacing: -0.04em; line-height: 1.1;
  text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.waehl__nummer:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.waehl__klein { grid-area: s; font-size: .88rem; color: var(--nacht-soft); margin-top: .2rem; }
.waehl__knopf {
  grid-area: k; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center;
  background: #F1F1F4; color: var(--nacht); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  transition: transform 140ms var(--cw-ease-out), background-color 160ms var(--cw-ease-out);
}
.waehl__knopf .i { width: 30px; height: 30px; stroke-width: 2.1; }
.waehl__knopf span { display: none; }
.waehl__knopf:hover { background: #fff; }
.waehl__knopf:active { transform: scale(.96); }
/* Schmale Spalte im Desktop-Aufbau (Tablet quer): Nummer groß, Knopf als
   breite Anruffläche darunter. */
@media (min-width: 860px) {
  @container (max-width: 30rem) {
    .waehl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "n" "s" "k"; }
    .waehl__nummer { font-size: min(3.4rem, calc((100cqi - 52px) / 7.6)); }
    .waehl__knopf { width: 100%; height: 56px; border-radius: 16px; margin-top: 1.1rem; display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 700; text-decoration: none; }
    .waehl__knopf .i { width: 24px; height: 24px; }
    .waehl__knopf span { display: inline; }
  }
}

.kontakt__weitere { display: grid; gap: .6rem; margin-top: .75rem; }
.weg {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--r);
  text-decoration: none; border: 1px solid var(--nacht-linie);
  transition: border-color 160ms var(--cw-ease-out), background-color 160ms var(--cw-ease-out);
}
.weg:hover { border-color: var(--nacht-rand); background: color-mix(in oklab, #fff 3%, transparent); }
.weg .i { width: 24px; height: 24px; color: var(--nacht-akzent); }
.weg span { display: grid; }
.weg b { font-weight: 700; }
.weg small { font-size: .88rem; color: var(--nacht-soft); }

.ablauf { list-style: none; counter-reset: s; margin-top: clamp(2rem, 5vh, 3rem); display: grid; gap: .1rem; }
.ablauf li {
  counter-increment: s; display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .3rem; align-items: baseline;
  font-size: .94rem; color: var(--nacht-soft); padding-block: .45rem; border-bottom: 1px solid var(--nacht-linie);
}
.ablauf li::before { content: counter(s); font-family: var(--cw-font-mono); font-size: .8rem; color: #7C7F8E; padding-top: .1em; }
.ablauf b { color: var(--nacht-ink); font-weight: 650; }

/* --- Anfragestrecke -------------------------------------------------- */
.strecke {
  background: var(--cw-canvas); color: #0F1015; border-radius: clamp(18px, 2vw, 28px);
  padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --cw-ink: #0F1015; --cw-ink-soft: #4B4D5A; --cw-accent: #4F52E0;
}
.strecke { container-type: inline-size; }
.strecke ::selection { background: #4F52E0; color: #fff; }
.strecke__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.strecke__titel { font-weight: 700; font-size: 1.05rem; }
.strecke__schritt { font-size: .88rem; color: #4B4D5A; font-variant-numeric: tabular-nums; }
.strecke__balken { height: 3px; background: #D4D6DC; border-radius: 3px; margin: .9rem 0 1.4rem; overflow: hidden; }
.strecke__balken span { display: block; height: 100%; background: #0F1015; transform-origin: 0 50%; transform: scaleX(.25); transition: transform 360ms var(--cw-ease-out); }
.strecke fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.strecke legend { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 1rem; padding: 0; }
.gruppe__frage { font-weight: 650; margin: 1.2rem 0 .6rem; }
.gruppe__frage:first-of-type { margin-top: 0; }
.wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.wahl > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Zwei Kacheln brauchen zusammen gut 30rem, sonst wird „KI-Telefonassistent“
   abgeschnitten (Tablet quer). */
@container (max-width: 31rem) {
  .wahl { grid-template-columns: minmax(0, 1fr); }
  .wahl > :last-child:nth-child(odd) { grid-column: auto; }
}
.wahl--klein { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.wahl--klein > :last-child:nth-child(odd) { grid-column: auto; }
.wahl__feld {
  position: relative; display: grid; grid-template-columns: 1.3rem minmax(0,1fr); column-gap: .7rem; align-items: start;
  padding: .9rem 1rem; border-radius: var(--r-klein); cursor: pointer;
  background: #fff; border: 1.5px solid #C4C6CE;
  transition: border-color 140ms var(--cw-ease-out), box-shadow 140ms var(--cw-ease-out), background-color 140ms var(--cw-ease-out);
}
.wahl__feld:hover { border-color: var(--feldrand); }
.wahl__feld input {
  appearance: none; -webkit-appearance: none; margin: .12rem 0 0; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  border: 1.5px solid var(--feldrand); background: #fff; grid-row: span 2; display: grid; place-items: center; cursor: pointer;
}
.wahl__feld input::after { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: #0F1015; transform: scale(0); transition: transform 140ms var(--cw-ease-out); }
.wahl__feld input:checked { border-color: #0F1015; }
.wahl__feld input:checked::after { transform: scale(1); }
.wahl__feld input:focus-visible { outline: 2px solid #4F52E0; outline-offset: 3px; }
.wahl__feld:has(input:checked) { border-color: #0F1015; box-shadow: 0 0 0 1px #0F1015; }
.wahl__titel { font-weight: 650; line-height: 1.3; }
.wahl__titel em { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4F52E0; margin-left: .35rem; }
.wahl__hinweis { grid-column: 2; font-size: .86rem; color: #4B4D5A; line-height: 1.4; margin-top: .2rem; }

.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.feld { display: grid; gap: .35rem; font-weight: 650; font-size: .95rem; }
.feld small { font-weight: 500; color: #4B4D5A; }
.feld input, .feld textarea {
  font: inherit; font-weight: 500; padding: .8rem .9rem; border-radius: var(--r-klein);
  border: 1.5px solid var(--feldrand); background: #fff; color: #0F1015; min-height: 48px;
}
.feld textarea { resize: vertical; min-height: 5.5rem; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid #4F52E0; outline-offset: 1px; border-color: #0F1015; }
.feld--breit { margin-top: 1rem; }
.feld[aria-invalid="true"] input, .feld input[aria-invalid="true"] { border-color: #B42318; }
.feld__hilfe { font-size: .86rem; color: #4B4D5A; margin-top: .5rem; }
.strecke__recht { font-size: .82rem; color: #4B4D5A; margin-top: 1rem; }
.strecke__fehler { min-height: 1.4em; margin-top: .9rem; color: #B42318; font-weight: 600; font-size: .92rem; }
.strecke__fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; }
.strecke__fuss [data-weiter], .strecke__fuss [data-senden] { margin-left: auto; }
.strecke__fertig { display: grid; gap: .9rem; justify-items: start; padding-top: .4rem; }
.strecke__fertig:focus { outline: none; }
.strecke__fertig-titel { display: flex; gap: .6rem; align-items: center; font-weight: 750; font-size: 1.3rem; letter-spacing: -0.02em; }
.strecke__fertig-titel .i { width: 26px; height: 26px; color: #1F7A45; stroke-width: 2.4; }
.strecke__fertig .knopf--hell { background: #0F1015; color: #fff; }
.strecke__ohne { margin-top: 1rem; font-weight: 600; }

/* Fuß */
.fuss {
  margin-top: clamp(4rem, 10vh, 7rem); padding-block: 2rem calc(var(--leiste-h) + 2.5rem);
  border-top: 1px solid var(--nacht-linie);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem 2rem; align-items: center;
  font-size: .88rem; color: var(--nacht-soft);
}
.fuss .marke, .menue .marke { color: #fff; --marke-punkt: #fff; }
.fuss .marke { font-size: 1.25rem; }
/* LinkedIn und YouTube als Originalzeichen in Weiß, frei stehend ohne Kreis
   (beide Marken erlauben die weiße Fassung auf dunklem Grund, andere Farben
   nicht). Größen über den Mindestmaßen der Markenrichtlinien; die Klickfläche
   bleibt 44 px hoch. */
.fuss__sozial { display: inline-flex; gap: .3rem; margin-left: .2rem; }
.sozial {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 6px;
  transition: transform 180ms var(--cw-ease-out);
}
.sozial svg { width: 22px; height: 22px; fill: #fff; }
.sozial[href*="youtube"] svg { width: 28px; height: 28px; }
.sozial:hover { transform: translateY(-2px); }
.sozial:focus-visible { outline: 2px solid var(--nacht-akzent); outline-offset: 2px; }
.fuss a { text-underline-offset: .2em; }
.fuss__links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fuss__links a { min-height: 44px; display: inline-flex; align-items: center; }
.fuss__klein { grid-column: 1 / -1; font-size: .78rem; color: #7C7F8E; }

/* ==========================================================================
   ANRUFLEISTE
   ========================================================================== */
.leiste {
  position: fixed; z-index: 70; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .35rem;
  height: var(--leiste-h); padding: 0 .45rem 0 .9rem;
  background: var(--nacht); color: var(--nacht-ink);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 12px 34px -10px rgba(10,12,30,.55), 0 2px 6px rgba(10,12,30,.25);
  white-space: nowrap;
}
.leiste__status { display: flex; align-items: center; gap: .6rem; padding-right: .75rem; margin-right: .2rem; border-right: 1px solid var(--nacht-linie); min-width: 12.5rem; }
.leiste__puls { width: 34px; height: 34px; flex: none; }
.leiste__phase { font-weight: 650; font-size: .92rem; }
.leiste__zeit { font-family: var(--cw-font-mono); font-size: .82rem; color: var(--nacht-soft); font-variant-numeric: tabular-nums; }
.leiste a, .leiste button {
  display: inline-flex; align-items: center; gap: .5rem; height: 44px; padding: 0 .85rem; border-radius: 11px;
  font: inherit; font-weight: 650; font-size: .92rem; color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer;
  transition: background-color 150ms var(--cw-ease-out);
}
.leiste a:hover, .leiste button:hover { background: rgba(255,255,255,.08); }
.leiste .leiste__termin { background: var(--nacht-ink); color: var(--nacht); }
.leiste .leiste__termin:hover { background: #fff; }
.leiste :focus-visible { outline-color: var(--nacht-akzent); }

/* Menü: gegliedert und nummeriert, rechts eine Kontaktspalte mit Alf.
   Lichtschein in den Markenfarben statt reinem Schwarz; die Einträge gleiten
   beim Öffnen gestaffelt herein (--i), der aktuelle Abschnitt ist markiert. */
.menue {
  position: fixed; inset: 0; z-index: 120; color: var(--nacht-ink);
  background:
    radial-gradient(55% 45% at 88% 6%, rgba(100, 103, 242, .17), transparent 62%),
    radial-gradient(45% 40% at 4% 100%, rgba(168, 85, 247, .10), transparent 60%),
    var(--nacht);
  overflow-y: auto; overscroll-behavior: contain;
  --cw-accent: var(--nacht-akzent);
}
.menue[hidden] { display: none; }
.js:not(.ruhig) .menue:not([hidden]) { animation: menue-ein 260ms var(--cw-ease-out); }
@keyframes menue-ein { from { opacity: 0; } }
.menue__innen { min-height: 100%; display: flex; flex-direction: column; padding-block: 1.2rem 2rem; }
.menue__kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.1rem; border-bottom: 1px solid var(--nacht-linie); }
.menue__zu {
  width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 0; border-radius: 12px;
  color: inherit; cursor: pointer; transition: background-color 160ms var(--cw-ease-out), transform 220ms var(--cw-ease-out);
}
.menue__zu:hover { background: rgba(255, 255, 255, .13); transform: rotate(90deg); }
.menue__zu .i { width: 24px; height: 24px; }
.menue__raster {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6.5rem);
  align-items: start; padding-top: clamp(1.2rem, 3.5vh, 2.4rem);
}
.menue__gruppe { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nacht-soft); margin-bottom: .3rem; }
.menue__liste + .menue__gruppe { margin-top: clamp(1rem, 2.6vh, 1.7rem); }
.menue__liste { list-style: none; }
.menue__liste a {
  position: relative; display: flex; align-items: center; gap: 1.1rem;
  min-height: clamp(54px, 6.6vh, 62px); padding-right: .4rem;
  border-bottom: 1px solid var(--nacht-linie); text-decoration: none;
}
.menue__nr { flex: none; width: 1.8rem; font-family: var(--cw-font-mono); font-size: .76rem; color: #6E7182; font-variant-numeric: tabular-nums; transition: color 160ms var(--cw-ease-out); }
.menue__name { font-size: clamp(1.35rem, 1rem + 1.3vw, 2.05rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; transition: transform 240ms var(--cw-ease-out); }
.menue__neu {
  flex: none; padding: .2rem .5rem; border-radius: 99px; font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nacht); background: var(--nacht-akzent);
}
.menue__pfeil { flex: none; margin-left: auto; width: 22px; height: 22px; color: var(--nacht-akzent); opacity: 0; transform: translateX(-8px); transition: opacity 180ms var(--cw-ease-out), transform 240ms var(--cw-ease-out); }
.menue__liste a:is(:hover, :focus-visible) .menue__name { transform: translateX(6px); }
.menue__liste a:is(:hover, :focus-visible, .ist-hier) .menue__nr { color: var(--nacht-akzent); }
.menue__liste a:is(:hover, :focus-visible) .menue__pfeil { opacity: 1; transform: none; }
.menue__liste a.ist-hier::before {
  content: ""; position: absolute; left: -.85rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--nacht-akzent); box-shadow: 0 0 10px var(--nacht-akzent);
}
/* Kontaktspalte */
.menue__seite { display: grid; gap: 1.1rem; }
.menue__alf {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: 20px; background: var(--nacht-2); border: 1px solid var(--nacht-linie);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 50px -30px rgba(0, 0, 0, .8);
}
.menue__symbol { width: 54px; height: 54px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.menue__alf p { display: grid; gap: .2rem; }
.menue__alf b { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.menue__alf p > span { font-size: .88rem; line-height: 1.45; color: var(--nacht-soft); }
.menue__live { width: 8px; height: 8px; border-radius: 50%; background: #5BD08A; box-shadow: 0 0 0 3px rgba(91, 208, 138, .18); }
.js:not(.ruhig) .menue__live { animation: blink 1.8s ease-in-out infinite; }
.menue__alf-link {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: .55rem .95rem;
  border-radius: 12px; background: rgba(255, 255, 255, .06); font-weight: 650; text-decoration: none; transition: background-color 160ms var(--cw-ease-out);
}
.menue__alf-link:hover { background: rgba(255, 255, 255, .11); }
.menue__alf-link .i { width: 18px; height: 18px; color: var(--nacht-akzent); }
.menue__kontakt div { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; padding-block: .7rem; border-bottom: 1px solid var(--nacht-linie); font-size: .95rem; }
.menue__kontakt div:first-child { border-top: 1px solid var(--nacht-linie); }
.menue__kontakt dt { color: var(--nacht-soft); }
.menue__kontakt dd a { font-weight: 650; text-decoration: none; }
.menue__kontakt dd a:hover { text-decoration: underline; text-underline-offset: .2em; }
.menue__kontakt small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--nacht-soft); }
.menue__fuss { display: flex; flex-wrap: wrap; gap: .6rem; }
.menue__mehr, .menue__recht { font-size: .86rem; color: var(--nacht-soft); }
.menue__mehr a, .menue__recht a { color: var(--nacht-ink); text-underline-offset: .2em; }
.menue__unten { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.menue__unten .fuss__sozial { margin-left: 0; }
/* Hereingleiten beim Öffnen */
.js:not(.ruhig) .menue__ein { opacity: 0; transform: translateY(12px); transition: opacity 380ms var(--cw-ease-out), transform 520ms var(--cw-ease-out); transition-delay: calc(var(--i, 0) * 28ms + 40ms); }
.js:not(.ruhig) .menue.ist-offen .menue__ein { opacity: 1; transform: none; }
html.menue-offen { overflow: hidden; }
@media (max-width: 859px) {
  .menue__raster { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .menue__liste a { gap: .8rem; }
  .menue__liste a.ist-hier::before { left: -.7rem; }
  .menue__pfeil { display: none; }
}

/* Einwilligungsfenster Chat */
.dialog {
  border: 0; padding: 0; border-radius: var(--r); max-width: min(460px, calc(100vw - 2rem));
  background: var(--cw-surface); color: var(--cw-ink); box-shadow: var(--cw-e3);
}
.dialog::backdrop { background: rgba(13,14,18,.55); }
.dialog__innen { padding: 1.5rem; display: grid; gap: .9rem; line-height: 1.55; }
.dialog__titel { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; }
.dialog__fehler { color: #B42318; font-weight: 600; }
.dialog__knoepfe { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: .4rem; }

.famulor-rahmen {
  position: fixed; right: 0; bottom: 0; border: 0; z-index: 150; background: transparent;
  max-width: 100vw; max-height: 100dvh; color-scheme: light;
}

/* ==========================================================================
   STATISCHE FASSUNG (ohne JavaScript oder bei reduzierter Bewegung)
   Das Telefonat steht dann als Text da, vollständig, ohne Haltestrecke.
   ========================================================================== */
.no-js [data-cw-in], .no-js [data-cw-stagger] > *, .no-js [data-cw-cue] { opacity: 1 !important; transform: none !important; }
.no-js [data-cw-reveal] { clip-path: none !important; }
:is(.no-js, .ruhig) .anruf { height: auto !important; }
:is(.no-js, .ruhig) .anruf__buehne { position: relative; height: auto; overflow: visible; }
:is(.no-js, .ruhig) .held { position: relative; min-height: min(100svh, 980px); }
:is(.no-js, .ruhig) .dunkel, :is(.no-js, .ruhig) .glanz, :is(.no-js, .ruhig) .puls-reise { display: none; }
:is(.no-js, .ruhig) .klingeln { opacity: 1; transform: none; }
:is(.no-js, .ruhig) .netz__haken > g { transform: none; opacity: 1; }
:is(.no-js, .ruhig) .gespraech {
  position: relative; opacity: 1; visibility: visible; background: var(--nacht);
  padding-top: 2.4rem; padding-bottom: 4rem;
}
:is(.no-js, .ruhig) .g-fenster { -webkit-mask-image: none; mask-image: none; overflow: visible; }
:is(.no-js, .ruhig) .g-stimmen { display: none; }
:is(.no-js, .ruhig) .g-titel { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; white-space: normal; font-size: var(--cw-t-2xl); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 1.5rem; }
:is(.no-js, .ruhig) .protokoll { -webkit-mask-image: none; mask-image: none; max-height: none; }
:is(.no-js, .ruhig) .protokoll li { display: grid; visibility: visible; }
/* Ohne Bühne ist die rechte Spalte so hoch wie das ganze Gespräch. Der
   Kalender bekommt deshalb eine feste Höhe, die Spalte bleibt oben stehen. */
:is(.no-js, .ruhig) .g-rechts { align-self: start; position: sticky; top: 1.5rem; }
:is(.no-js, .ruhig) .kal { flex: none; max-height: none; }
:is(.no-js, .ruhig) .kal__raster { flex: none; height: 11rem; min-height: 0; }
:is(.no-js, .ruhig) .g-titel { line-height: 1.08; }
/* Leistungsbilder ohne Bewegung: der Endzustand jeder Szene. */
:is(.no-js, .ruhig) .zeile__bild *, :is(.no-js, .ruhig) .zeile__bild::before { animation: none !important; }
:is(.no-js, .ruhig) .bild-anruf__ring { display: none; }
:is(.no-js, .ruhig) .bild-web__tipp { transform: none; }
:is(.no-js, .ruhig) .bild-web__meldung { opacity: 1; transform: none; }
.no-js [data-webdemo] [data-teil="1"] { visibility: hidden; }
.no-js [data-webdemo] .ht__fertig { visibility: visible; }
.no-js [data-webdemo] .ht__balken span { width: 100%; }
.ruhig .aufgabe__haken, .ruhig .aufgabe__was, .ruhig .aufgabe__wie, .ruhig .aufgaben__balken span { transition: none; }
:is(.no-js, .ruhig) .kal__neu { opacity: 1; transform: none; background: #4F52E0; border-color: #4F52E0; color: #fff; }
:is(.no-js, .ruhig) .kal__frei { display: none; }
:is(.no-js, .ruhig) .kal__belegt { display: inline; }
:is(.no-js, .ruhig) .karte .leer { display: none; }
:is(.no-js, .ruhig) .karte .wert { display: inline; }
:is(.no-js, .ruhig) .karte__neu { opacity: 1; }
.ruhig .puls-ziel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .klingeln .i, .held__ringe span, .g-punkt { animation: none !important; }
  .g-verlauf { transition: none; }
}

/* ==========================================================================
   SCHMALE BILDSCHIRME
   ========================================================================== */
@media (max-width: 1080px) {
  .garantie { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .garantie .knopf { grid-column: 1 / -1; justify-self: start; }
  .zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); row-gap: 1.2rem; }
  .zeile__text { grid-column: 2; grid-row: 1 / span 2; }
  .zeile__bild { grid-column: 1; grid-row: 2; width: min(100%, 17rem); }
  .leiste__status { min-width: 0; }
}

@media (max-width: 859px) {
  :root { --leiste-h: 60px; }

  .kopf { padding-block: 1.1rem; }
  .kopf__nav { display: none; }

  .held {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto;
    align-items: start; align-content: start;
    padding-top: 5rem; column-gap: 1rem;
  }
  .held__text { grid-column: 1 / -1; grid-row: 1; }
  /* Auch nach der Höhe, damit Kachel und Netz darunter im Bild bleiben. */
  .held__titel { font-size: min(clamp(2.35rem, 1.2rem + 7vw, 3.6rem), 6.4svh); }
  .held__titel > span:not(.held__vor) { max-width: 12ch; }
  .held__unter { font-size: 1.08rem; }
  .held__wege .knopf { flex: 1 1 100%; }
  /* Kachel mittig, das Netz der KI-Automatisierung drumherum (184 % der
     Kachelbreite), Hinweis und Schalter über Eck wie am Desktop. Vorher stand
     die Kachel links, beide Schilder daneben, und das Netz fehlte (Simon). */
  /* Größe nach dem Platz zwischen Knöpfen und Leiste: Text bis rund 490 px,
     Leiste 72 px, die Schilder stehen oben und unten je knapp 30 px über, dazu
     Abstand – macht 100svh - 650px. Die Schilder sitzen mit festem Überstand
     an Ober- und Unterkante, nicht in Prozent: Bei kleiner Kachel griffen sie
     sonst bis über die Symbole. Die Symbole im Netz anderthalbfach, sonst wären
     sie am Handy 16 px klein. Die Notiz unter den Knöpfen entfällt hier, die
     Leiste sagt schon „Alf ist bereit“. */
  .held__kachel { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: clamp(3rem, 100svh - 780px, 5rem); }
  .held__kachel { --k: max(5.5rem, min(38vw, 150px, 100svh - 650px)); }
  .held__notiz { display: none; }
  .netz__knoten { scale: 1.5; }
  /* Wie am Desktop über Eck: „Eingehender Anruf“ endet bei 55 % der Kachel und
     ragt nach links hinaus, der Schalter beginnt bei 45 % und ragt nach rechts.
     So greifen beide nur über die Ecken, die Balken bleiben frei (Simon). */
  .klingeln { left: auto; right: 45%; top: auto; bottom: calc(100% - .7rem); font-size: .74rem; padding: .45rem .6rem .45rem .55rem; gap: .4rem; }
  .schalter { right: auto; left: 45%; bottom: auto; top: calc(100% - .7rem); font-size: .74rem; padding: .4rem .45rem .4rem .6rem; gap: .5rem; }
  .kachel__anzeige { padding-bottom: .3rem; }
  .held__ringe { display: none; }
  .pop { display: none !important; }

  .gespraech {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 1rem var(--rand) calc(var(--leiste-h) + 1.6rem);
  }
  .g-wann, .g-wer span { display: none; }
  .g-links { padding-top: 1rem; }
  .puls-ziel { width: 46px; }
  .welle { width: 40px; }
  .g-name { font-size: .95rem; }
  .g-zeile, .g-ende { font-size: clamp(1.15rem, .9rem + 2vw, 1.45rem); }
  .g-hinweis { font-size: .74rem; }
  .g-rechts { padding-top: .6rem; gap: .5rem; }
  .g-label, .kal, .karte { display: none; }
  /* Am Handy: nur die jüngsten Zeilen, ohne Kartenrahmen. */
  .protokoll-karte { background: none; border: 0; box-shadow: none; padding: 0; }
  .protokoll-karte .karte__kopf { display: none; }
  .protokoll {
    max-height: 3.4rem; overflow: hidden; align-content: end; font-size: .76rem; gap: .18rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.3rem);
            mask-image: linear-gradient(to bottom, transparent 0, #000 1.3rem);
  }
  .protokoll li { display: none; visibility: visible; grid-template-columns: .8rem 4rem minmax(0, 1fr); }
  .protokoll li.ist-passiert { display: grid; }
  .mini-termin {
    display: flex; align-items: center; gap: .55rem; font-size: .84rem; font-weight: 650;
    padding: .55rem .8rem; border-radius: 10px; border: 1.5px dashed var(--nacht-akzent); color: var(--nacht-akzent);
    opacity: 0; transform: translateY(4px); transition: opacity 240ms var(--cw-ease-out), transform 240ms var(--cw-ease-out), background-color 240ms var(--cw-ease-out);
  }
  .mini-termin__belegt { display: none; }
  .mini-termin.ist-geprueft { opacity: 1; transform: none; }
  .mini-termin.ist-gebucht { background: #4F52E0; border-color: #4F52E0; color: #fff; animation: sitzt 620ms var(--cw-ease-out); }
  .mini-termin.ist-gebucht .mini-termin__frei { display: none; }
  .mini-termin.ist-gebucht .mini-termin__belegt { display: inline; }
  :is(.no-js, .ruhig) .kal, :is(.no-js, .ruhig) .karte { display: block; }
  :is(.no-js, .ruhig) .mini-termin { display: none; }

  .morgen__raster, .leistungen__kopf, .wer__raster, .fragen__raster, .kontakt__raster, .mitarbeiter__raster,
  .auto__raster, .web__raster, .werkzeuge { grid-template-columns: minmax(0, 1fr); }
  .lauf-einleitung { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .lauf__titel span { display: none; }
  .lauf__flaeche { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 1.5rem .45rem; padding: 1.5rem .85rem 1.7rem; }
  .lk { grid-column: 1 / -1; grid-row: auto; }
  .lk--zweig { display: none; }
  .lk[data-k="angebot"], .lk[data-k="termin"], .lk[data-k="wv"] {
    grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .4rem; padding: .55rem .5rem .6rem;
  }
  .lk[data-k="angebot"] { grid-column: 1; } .lk[data-k="termin"] { grid-column: 2; } .lk[data-k="wv"] { grid-column: 3; }
  :is(.lk[data-k="angebot"], .lk[data-k="termin"], .lk[data-k="wv"]) small, .lk__lang { display: none; }
  :is(.lk[data-k="angebot"], .lk[data-k="termin"], .lk[data-k="wv"]) b { font-size: .72rem; overflow-wrap: anywhere; }
  .werkzeuge__mehr { grid-column: auto; }
  .web__text { order: -1; }
  .aufgaben { padding: 1.1rem 1rem .9rem; }
  .aufgabe__was { font-size: .95rem; }
  /* Hotel am Handy: Bild oben, Anfrage darunter statt darüber */
  .ht__buehne { aspect-ratio: auto; padding-top: 14.5rem; }
  .ht__bild { bottom: auto; height: 16.5rem; }
  /* Überschrift reicht am Handy bis über das beleuchtete Haus: Schleier
     links kräftiger, damit das Gold lesbar bleibt */
  .ht__buehne::after {
    bottom: auto; height: 16.5rem;
    background: linear-gradient(100deg, rgba(8, 10, 16, .72) 0%, rgba(8, 10, 16, .45) 48%, transparent 80%),
                linear-gradient(to bottom, rgba(8, 10, 16, .5), transparent 26%);
  }
  .ht__nav { display: none; }
  .ht__text { top: 4.2rem; max-width: 78%; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
  .ht__titel { font-size: 2.2rem; }
  .ht__anfrage { position: relative; right: auto; bottom: auto; width: auto; margin: 0 .7rem .8rem; }
  .ht__reihe { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .ht__zitat { display: none; }
  .handy { --hh: min(560px, 130vw); }
  .probe__kachel { grid-template-columns: minmax(0, 1fr); }
  .probe__qr { display: none; }
  .zeile, .garantie { grid-template-columns: minmax(0, 1fr); }
  .garantie { justify-items: start; }
  .zeile__text { grid-column: auto; grid-row: 3; }
  .zeile__bild { grid-column: auto; grid-row: 2; width: 100%; max-width: 26rem; }
  .garantie .knopf { grid-column: auto; justify-self: stretch; }
  .fragen__kopf { position: static; }
  .portrait { max-width: 420px; display: grid; gap: .8rem; }
  .wer__raster { padding-bottom: 0; }
  .portrait__rahmen { position: relative; top: auto; bottom: auto; width: 100%; }
  .portrait figcaption { position: static; }
  .mitarbeiter__raster { gap: 1.6rem; padding-top: 1.5rem; }
  .mitarbeiter__text .lede { font-size: 1rem; margin-top: 1rem; }
  .mitarbeiter__pilot { display: none; }
  .mitarbeiter__text .knopf { margin-top: 1rem; }
  .ruft-an { padding: 1rem; border-radius: 22px; }
  .ruft-an__verlauf li { font-size: .92rem; padding: .7rem .8rem; }
  .ruft-an__kopf .puls-mini { width: 38px; height: 38px; }
  .felder { grid-template-columns: minmax(0, 1fr); }
  .wahl { grid-template-columns: minmax(0, 1fr); }
  .wahl > :last-child:nth-child(odd) { grid-column: auto; }
  .fuss { grid-template-columns: minmax(0, 1fr); }

  .leiste { left: 8px; right: 8px; transform: none; justify-content: space-between; padding: 0 .35rem 0 .7rem; }
  .leiste__status { border-right: 0; padding-right: 0; flex: 1; min-width: 0; }
  .leiste__phase { overflow: hidden; text-overflow: ellipsis; }
  .leiste__puls { width: 30px; height: 30px; }
  .leiste a span, .leiste button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .leiste a, .leiste button { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .leiste .i { width: 22px; height: 22px; }
}

@media (max-width: 859px) and (max-height: 720px) {
  .held { padding-top: 4.2rem; }
  .held__titel { font-size: 2.2rem; }
  /* Kleinere Schrift, der Text endet früher (rund 390 px bei 375 × 667). */
  .held__kachel { --k: max(5.5rem, min(38vw, 150px, 100svh - 550px)); margin-top: 3rem; }
  .held__unter { font-size: 1rem; margin-top: .9rem; }
  .held__wege { margin-top: 1.1rem; gap: .5rem; }
  .held__wege .knopf { min-height: 46px; }
  .kachel__anzeige { font-size: .8rem; }
  .mitarbeiter__text .lede { display: none; }
}
/* iPhone SE (1. Generation, 320 × 568): Unter den Knöpfen ist kaum Platz. Die Kachel
   liegt wie schon vorher unter der Leiste, darf aber nicht aus der Bühne ragen. */
@media (max-width: 859px) and (max-height: 600px) {
  .held__kachel { --k: 72px; margin-top: 2.2rem; }
  /* Bei 72 px Kachel ragten die Schilder sonst über den Bildschirmrand. Sie bleiben
     über der Oberkante bzw. unter der Unterkante, die Balken also frei. */
  .klingeln { right: 20%; }
  .schalter { left: 20%; }
}

/* Nachträge */
[hidden] { display: none !important; }
.js:not(.ruhig) .kachel { background: transparent; }

/* Höhepunkt: Der Termin trägt sich ein, alles andere tritt zurück. */
.g-rechts > * { transition: opacity 320ms var(--cw-ease-out), transform 520ms var(--cw-ease-out), border-color 320ms var(--cw-ease-out), box-shadow 320ms var(--cw-ease-out); }
.kal { transform-origin: 50% 0; }
.g-rechts.hoehepunkt .karte, .g-rechts.hoehepunkt .protokoll-karte, .g-rechts.hoehepunkt .g-label { opacity: .32; }
.g-rechts.hoehepunkt .kal {
  transform: scale(1.05);
  border-color: color-mix(in oklab, #8E90FF 55%, transparent);
  box-shadow: 0 28px 70px -24px rgba(79, 82, 224, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 859px) {
  .probe__nummer { font-size: clamp(1.8rem, 8.4vw, 2.8rem); white-space: nowrap; gap: .6rem; }
  .waehl { padding: 1.1rem 1.1rem; column-gap: 1rem; }
  .waehl__nummer { font-size: clamp(1.4rem, calc((100cqi - 111px) / 7.8), 2.4rem); }
  .waehl__knopf { width: 58px; height: 58px; border-radius: 17px; }
  .waehl__knopf .i { width: 24px; height: 24px; }
  .strecke__kopf { flex-wrap: wrap; }
  .strecke__titel { font-size: .98rem; }
  .strecke__schritt { white-space: nowrap; }
}
.mitarbeiter:not(.cw-act--pinned) .mitarbeiter__buehne { display: block; padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2rem, 5vh, 3rem); }

/* ==========================================================================
   UNTERSEITEN: voice-agents, intelligente-workflows, faq, impressum,
   datenschutz. Gebaut von neubau/werkzeuge/unterseiten-bauen.py.
   ========================================================================== */
.u-kopf { display: flex; align-items: center; gap: 1.6rem; padding-block: 1.4rem; }
.u-kopf .kopf__nav { margin-left: auto; }
.kopf__nav a[aria-current="page"] { color: var(--cw-ink); border-bottom-color: currentColor; }
.u-kopf__knopf { min-height: 44px; padding: .55rem 1rem; font-size: var(--cw-t-sm); }

.u-held {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2.5rem, 8vh, 5.5rem) clamp(3rem, 9vh, 6rem);
}
.u-held--schmal { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(1.8rem, 4vh, 2.8rem); }
.u-held .kicker { margin-bottom: 0; }
.u-held .titel--gross { margin-top: .9rem; max-width: 14ch; hyphens: manual; }
.u-held .lede { margin-top: 1.3rem; max-width: 42ch; }
.u-held__wege { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.u-held__notiz { margin-top: 1rem; font-size: var(--cw-t-sm); color: var(--cw-ink-soft); }
.u-held__notiz a { color: var(--cw-ink); font-weight: 650; }

/* Gesprächskarte auf der Telefonseite */
.u-gespraech {
  display: grid; gap: 1rem; padding: 1.2rem 1.2rem 1.15rem; border-radius: calc(var(--r) * 1.3);
  background: var(--nacht); color: var(--nacht-ink); box-shadow: 0 40px 80px -34px rgba(13, 14, 18, .75);
}
.u-gespraech__kopf { display: flex; align-items: center; gap: .8rem; padding-bottom: .9rem; border-bottom: 1px solid var(--nacht-linie); }
.u-puls { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: #050608; }
.u-puls rect { transform-box: fill-box; transform-origin: center; animation: u-sprechen 1.1s ease-in-out infinite; }
.u-puls rect:nth-child(2) { animation-delay: .18s; }
.u-puls rect:nth-child(3) { animation-delay: .36s; }
@keyframes u-sprechen { 50% { transform: scaleY(.5); } }
.u-gespraech__kopf > span { display: grid; flex: 1; line-height: 1.3; }
.u-gespraech__kopf b { font-size: .95rem; }
.u-gespraech__kopf small { font-size: .76rem; color: var(--nacht-soft); }
.u-gespraech__kopf em { display: inline-flex; align-items: center; gap: .4rem; font-style: normal; font-size: .74rem; font-weight: 700; color: #7EE2A8; }
.u-gespraech__kopf em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3FBF7F; animation: blink 1.4s ease-in-out infinite; }
.u-gespraech__verlauf { list-style: none; display: grid; gap: .55rem; }
.u-gespraech__verlauf li {
  max-width: 86%; padding: .6rem .8rem; border-radius: 14px; font-size: .93rem; line-height: 1.45; background: #1B1C23;
  animation: u-zeile 520ms var(--cw-ease-out) backwards;
}
.u-gespraech__verlauf li b { display: block; margin-bottom: .12rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--nacht-soft); }
.u-gespraech__verlauf li[data-wer="alf"] { justify-self: end; background: #292B63; }
.u-gespraech__verlauf li[data-wer="alf"] b { color: #C7C8FF; }
.u-gespraech__verlauf li:nth-child(1) { animation-delay: .3s; }
.u-gespraech__verlauf li:nth-child(2) { animation-delay: 1.1s; }
.u-gespraech__verlauf li:nth-child(3) { animation-delay: 1.9s; }
.u-gespraech__verlauf li:nth-child(4) { animation-delay: 2.7s; }
.u-gespraech__ergebnis {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border-radius: 12px; background: #4F52E0; color: #fff;
  animation: u-zeile 520ms var(--cw-ease-out) 3.5s backwards;
}
.u-gespraech__ergebnis .i { flex: none; width: 1.7rem; height: 1.7rem; }
.u-gespraech__ergebnis span { display: grid; font-size: .86rem; line-height: 1.35; }
.u-gespraech__ergebnis b { font-size: .98rem; }
@keyframes u-zeile { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Abschnitte */
.u-abschnitt { padding-block: clamp(3.5rem, 9vh, 6.5rem); }
.u-abschnitt--flach { padding-top: clamp(.5rem, 2vh, 1.5rem); }
.u-abschnitt--dunkel {
  background: var(--nacht); color: var(--nacht-ink);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
  --cw-hairline-strong: color-mix(in oklab, #F1F1F4 20%, transparent);
}
/* Oben ausgerichtet, der Fließtext beginnt auf Höhe der Überschrift (unter der
   Überzeile). Vorher „end“: Bei drei Absätzen rechts hing die Überschrift links
   bis zu 350 px tiefer als der Textanfang (01.10.2026). */
.u-zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.u-fliess p { max-width: 56ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.6; color: var(--cw-ink); }
.u-fliess p + p { margin-top: 1rem; }
.u-kopfzeile { max-width: 48rem; margin-bottom: clamp(2rem, 5vh, 3rem); }
.u-kopfzeile .kicker { margin-bottom: 0; }
.u-kopfzeile .titel { margin-top: .8rem; }
.u-kopfzeile .lede { margin-top: 1rem; }
.u-raster { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.u-raster--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u-raster--drei { margin-top: 0; }
.u-karte { padding: 1.4rem 1.3rem 1.35rem; border-radius: var(--r); background: var(--cw-surface); box-shadow: var(--cw-e1), inset 0 1px 0 #fff; }
.u-karte .i { width: 2.5rem; height: 2.5rem; padding: .58rem; border-radius: 11px; background: #EEEFFD; color: #4F52E0; stroke-width: 2; }
.u-karte h3 { margin-top: 1rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.u-karte p { margin-top: .45rem; font-size: .95rem; line-height: 1.55; color: var(--cw-ink-soft); }
.u-karte--dunkel { background: #17181E; box-shadow: inset 0 0 0 1px var(--nacht-linie); }
.u-karte--dunkel .i { background: #25273A; color: var(--nacht-akzent); }
/* Nie zusammen mit .rahmen an einem Element: dessen Seitenrand frisst die
   max-width auf, ab 1920 px blieb eine Wortspalte, bei 2560 px nichts. */
.u-ergebnis { margin-top: 2rem; max-width: 72ch; font-size: 1.05rem; line-height: 1.6; color: var(--cw-ink-soft); }
.u-ergebnis b { color: var(--cw-ink); }

/* Architektur: drei Arten */
.u-motoren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.u-motor { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem 1.4rem 1.4rem; border-radius: var(--r); background: #17181E; box-shadow: inset 0 0 0 1px var(--nacht-linie); }
.u-motor--empfohlen { background: #1A1B2E; box-shadow: inset 0 0 0 1.5px #6467F2, 0 30px 60px -30px rgba(100, 103, 242, .6); }
/* Gleiche Zeilen in allen drei Karten: Art, Titel, Text, Fuß liegen über
   Subgrid auf denselben Höhen, der Fuß beginnt überall an derselben Linie. */
@supports (grid-template-rows: subgrid) {
  .u-motor { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .7rem; }
  .u-motor .u-motor__fuss { margin-top: 0; }
}
.u-motor__fuss { display: flex; align-items: center; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--nacht-linie); }
/* volle Breite, sonst schrumpfen die Wellenbalken (flex: 1) auf 0 px */
.u-motor__fuss > * { flex: 1 1 auto; min-width: 0; }
.u-motor__art { min-height: 1.4rem; display: flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--nacht-akzent); }
.u-motor__art em { font-style: normal; font-size: .64rem; letter-spacing: .06em; padding: .16rem .45rem; border-radius: 99px; background: #4F52E0; color: #fff; }
.u-motor h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.u-motor p { font-size: .95rem; line-height: 1.55; color: var(--nacht-soft); }
.u-kette, .u-sprachen { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.u-kette li, .u-sprachen li { padding: .3rem .55rem; border-radius: 8px; background: #23242E; color: #D5D6DE; font-size: .75rem; font-weight: 650; }
.u-kette li + li::before { content: "→"; margin-right: .35rem; color: var(--nacht-soft); }
.u-welle { display: flex; align-items: center; gap: 5px; height: 2.6rem; }
.u-welle i { flex: 1; max-width: 6px; height: 30%; border-radius: 3px; background: linear-gradient(#6467F2, #A855F7); animation: u-welle 1.2s ease-in-out infinite; }
.u-welle i:nth-child(3n) { animation-delay: .2s; }
.u-welle i:nth-child(3n + 1) { animation-delay: .45s; }
.u-welle i:nth-child(4n) { animation-duration: .9s; }
@keyframes u-welle { 50% { height: 100%; } }

/* Funktionen als ruhige Liste */
.u-funktionen { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--cw-hairline-strong); }
.u-funktionen li { display: grid; gap: .3rem; padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--cw-hairline-strong); }
.u-funktionen b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.u-funktionen span { font-size: .93rem; line-height: 1.5; color: var(--cw-ink-soft); }

/* Automatisierung: Grafik, Filter, Schritte */
.u-graph { padding: 1.2rem 1.2rem 1rem; border-radius: calc(var(--r) * 1.3); background: var(--cw-surface); box-shadow: var(--cw-e2), inset 0 1px 0 #fff; --grau: #C9CBD3; --blau-t: #4F52E0; }
.u-graph .bild-ablauf__netz { display: block; width: 100%; height: auto; }
.u-graph use { fill: none; stroke: #4B4D5A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.u-graph .ba-ki use { stroke: #fff; stroke-width: 1.8; }
.u-graph figcaption { margin-top: .5rem; text-align: center; font-size: .86rem; color: var(--cw-ink-soft); }
.u-filter { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.no-js .u-filter { display: none; }
.u-filter button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .4rem .85rem; border-radius: 99px;
  border: 1px solid var(--feldrand); background: transparent; color: var(--cw-ink); font: inherit; font-size: .9rem; font-weight: 650; cursor: pointer;
  transition: background-color 150ms var(--cw-ease-out), color 150ms var(--cw-ease-out), border-color 150ms var(--cw-ease-out);
}
.u-filter button span { font-size: .78rem; color: var(--cw-ink-soft); font-variant-numeric: tabular-nums; }
.u-filter button:hover { border-color: var(--cw-ink); }
.u-filter button[aria-pressed="true"] { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.u-filter button[aria-pressed="true"] span { color: #B7B9C6; }
.u-werkzeuge { min-height: 5rem; }
.u-kontrolle { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 2.4rem; }
.u-kontrolle li { display: flex; gap: .65rem; font-size: .95rem; line-height: 1.5; color: var(--cw-ink-soft); }
.u-kontrolle .i { flex: none; width: 1.35rem; height: 1.35rem; padding: .26rem; border-radius: 50%; background: #4F52E0; color: #fff; stroke-width: 3; }
.u-kontrolle b { color: var(--cw-ink); }
/* SEO-Plan 01.10.2026: Überzeile als Teil der H1 (Generator h1()), Abschnitte
   „Für wen“, „Kosten“, Websites-Seite */
.u-held .titel--mit-vor { margin-top: 0; }
.titel__vor { display: block; margin-bottom: .9rem; line-height: 1.3; }
@media (min-width: 860px) {
  /* Überzeile (20,2 px) plus ihr Abstand (16 px): Fließtext startet auf der Titelzeile */
  .u-zwei > .u-fliess { padding-top: calc(.78rem * 1.62 + 1rem); }
}
/* kein Umbruch hinter „KI-“: „Was kostet ein KI- / Telefonassistent?“ */
.ohne-umbruch { white-space: nowrap; }
.u-zwei__lede { margin-top: 1rem; }
.u-liste { list-style: none; display: grid; gap: .55rem; margin-top: .9rem; }
.u-liste li { display: flex; gap: .65rem; align-items: flex-start; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.5; color: var(--cw-ink); }
.u-liste .i { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .12rem; padding: .26rem; border-radius: 50%; background: #4F52E0; color: #fff; stroke-width: 3; }
.u-fliess .u-liste + p { margin-top: 1.1rem; }
/* darf umbrechen: bei 320 px war der Knopf 20 px breiter als die Seite */
.u-abschnitt--dunkel .u-kopfzeile + .knopf { margin-top: -.4rem; max-width: 100%; white-space: normal; text-align: center; }
.u-beispiel figcaption { margin-top: .7rem; font-size: .8rem; color: var(--cw-ink-soft); text-align: center; }
/* Ruhende Beispielseite: immer im Bildformat, auch unter 470 px (dort stapelt die
   Startseite Bild und Anfragekarte, die es hier nicht gibt) */
.u-beispiel .ht__buehne { aspect-ratio: 16 / 10.4; padding-top: 0; }
.u-beispiel .ht__bild, .u-beispiel .ht__buehne::after { bottom: 0; height: 100%; }
.u-schritte { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; }
.u-schritte::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; height: 2px; background: repeating-linear-gradient(to right, #C9CBD3 0 6px, transparent 6px 11px); }
.u-schritte li { position: relative; }
.u-schritte__nr { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--nacht); color: #fff; font-weight: 750; box-shadow: 0 0 0 6px var(--cw-canvas); }
.u-schritte li:last-child .u-schritte__nr { background: #4F52E0; }
.u-schritte h3 { margin-top: 1rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.u-schritte p { margin-top: .35rem; font-size: .93rem; line-height: 1.55; color: var(--cw-ink-soft); }

/* FAQ */
.u-faq { display: grid; gap: clamp(2.8rem, 7vh, 4.5rem); }
.u-faq__gruppe { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.u-faq__kopf { position: sticky; top: 1.5rem; }
.u-faq__kopf h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.u-faq__kopf p { margin-top: .6rem; max-width: 34ch; line-height: 1.55; color: var(--cw-ink-soft); }
.u-faq__antwort p { padding-bottom: 1rem; }
.u-faq__antwort p:last-child { padding-bottom: 1.4rem; }
.u-faq__schritte { display: grid; gap: .45rem; margin: 0 0 1.2rem 1.2rem; line-height: 1.55; color: var(--cw-ink-soft); }
.u-faq__schritte b { color: var(--cw-ink); }
.u-faq__link { padding-top: .2rem; }

/* Rechtstexte */
.u-recht { max-width: 72ch; min-width: 0; overflow-wrap: anywhere; }
.u-recht h2 { margin-top: 2.6rem; font-size: 1.45rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.2; }
.u-recht h2:first-child { margin-top: 0; }
.u-recht h3 { margin-top: 1.6rem; font-size: 1.08rem; font-weight: 700; }
.u-recht p, .u-recht li { margin-top: .7rem; line-height: 1.65; color: #33353F; }
.u-recht ul { padding-left: 1.2rem; }
.u-recht li { margin-top: .35rem; }
.u-recht a { color: var(--cw-ink); text-decoration: underline; text-underline-offset: .18em; }
.u-recht table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .9rem; }
.u-recht th, .u-recht td { padding: .6rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cw-hairline-strong); }
.u-recht th { font-weight: 700; background: var(--cw-surface); }
.u-recht code { padding: .05rem .3rem; border-radius: 4px; background: #E4E5EA; font-family: var(--cw-font-mono); font-size: .88em; }
.u-recht__hervor { text-transform: uppercase; }
.u-recht__stand { margin-top: 1rem; font-size: .9rem; color: var(--cw-ink-soft); }

/* Schluss: Kontakt und Fuß, dunkel */
.u-schluss {
  padding-top: clamp(4rem, 10vh, 7rem); background: var(--nacht); color: var(--nacht-ink);
  --cw-ink: var(--nacht-ink); --cw-ink-soft: var(--nacht-soft); --cw-accent: var(--nacht-akzent);
}
.u-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem 4rem; align-items: end; }
.u-cta .lede { margin-top: 1rem; max-width: 44ch; color: var(--nacht-soft); }
.u-cta__wege { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.u-cta__alf { flex-basis: 100%; font-size: .9rem; color: var(--nacht-soft); }
.u-cta__alf a { color: #fff; font-weight: 650; }

.ruhig .u-gespraech__verlauf li, .ruhig .u-gespraech__ergebnis, .no-js .u-gespraech__verlauf li, .no-js .u-gespraech__ergebnis { animation: none; }
@media (prefers-reduced-motion: reduce) { .u-puls rect, .u-welle i, .u-gespraech__kopf em::before { animation: none; } }

@media (max-width: 1080px) {
  .u-raster--vier, .u-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .u-schritte::before { display: none; }
  .u-kontrolle { grid-template-columns: minmax(0, 1fr); }
}
/* bis 869 px ragte der Knopf 5 px über den Rand (01.10.2026) */
@media (max-width: 899px) { .u-kopf__knopf { display: none; } }
@media (max-width: 859px) {
  /* Karte: Adresse unter das Bild statt darüber, sonst deckt sie die Nadel */
  .karte-ort figcaption { position: static; background: var(--cw-surface); padding: .9rem 1.1rem 1rem; }
  .u-held, .u-zwei, .u-cta, .u-faq__gruppe { grid-template-columns: minmax(0, 1fr); }
  .u-raster, .u-raster--vier, .u-motoren, .u-funktionen { grid-template-columns: minmax(0, 1fr); }
  .u-held .knopf { flex: 1 1 100%; }
  .u-schritte { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .u-schritte li { padding-left: 3.4rem; }
  .u-schritte__nr { position: absolute; left: 0; top: 0; }
  .u-schritte h3 { margin-top: .35rem; }
  .u-faq__kopf { position: static; }
  .u-recht table { display: block; overflow-x: auto; }
  .u-cta__wege .knopf { flex: 1 1 100%; }
}

/* Schmale Handys (320–379 px): Hinweis und Schalter eine Spur kleiner, damit sie über
   Eck an der kleineren Kachel im Bild bleiben. */
@media (max-width: 379px) {
  .klingeln, .schalter { font-size: .7rem; }
}
/* Nach der Regel darüber, sonst überstimmt sie die kleinere Schrift (iPhone SE 1). */
@media (max-width: 859px) and (max-height: 600px) {
  .klingeln, .schalter { font-size: .64rem; }
}

/* Tippflächen: eigenständige Links bekommen eine unsichtbare Fläche von mindestens 44 px
   Höhe, ohne dass sich die Gestaltung verschiebt (vorher 20–34 px, gemessen 01.10.2026).
   Nicht für Links im Fließtext: die können umbrechen, die Fläche läge dann über Nachbartext. */
:is(.textlink, .zeile__link, .probe__nummer, .waehl__nummer, .kopf .marke, .u-kopf .marke, .fuss .marke) { position: relative; }
:is(.textlink, .zeile__link, .probe__nummer, .waehl__nummer, .kopf .marke, .u-kopf .marke, .fuss .marke)::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: max(100%, 44px); transform: translateY(-50%);
}
.held__titel .held__vor { text-wrap: balance; }
/* Telefon und Mail im Fuß, „Alf anrufen“: kurze Links, brechen nicht um, größere Tippfläche */
.fuss p a, .u-cta__alf a { display: inline-block; white-space: nowrap; padding-block: .7rem; margin-block: -.7rem; }
/* Werkzeugliste am Handy: zuerst 24 von 180, der Rest auf Wunsch (vorher rund vier
   Bildschirme Liste). Ohne JavaScript bleibt alles sichtbar, der Knopf versteckt. */
.u-mehr { margin-top: 1.1rem; }
@media (max-width: 859px) { .u-werkzeuge.ist-kurz > li:nth-child(n+25) { display: none; } }
@media (min-width: 860px) { .u-mehr { display: none; } }

/* Zweite Recherche (01.10.2026): Preis, Fragenblock, Handwerk- und Regionsseite */
.u-preis { color: var(--cw-ink); font-weight: 750; }
.u-karte:has(> .u-karte__link) { display: flex; flex-direction: column; }
.u-karte__link { align-self: flex-start; margin-top: auto; padding-top: .9rem; font-size: .95rem; }
.u-fragen__alle { margin-top: 1.1rem; }
.u-faq__kopf .kicker { margin-bottom: .6rem; }
.u-software, .u-orte { margin-top: .9rem; }
.u-orte { margin-bottom: 0; }
.u-abschnitt--dunkel .u-schritte::before { background: repeating-linear-gradient(to right, #3A3C4A 0 6px, transparent 6px 11px); }
.u-abschnitt--dunkel .u-schritte__nr { background: #2A2C3A; box-shadow: 0 0 0 6px var(--nacht); }
.u-abschnitt--dunkel .u-schritte li:last-child .u-schritte__nr { background: #4F52E0; }
.fakten dd a { color: var(--cw-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* Pfeil im Kartenlink ist kein Kartensymbol (.u-karte .i gibt sonst Kästchen und Polster) */
.u-karte .u-karte__link .i { width: .9em; height: .9em; padding: 0; border-radius: 0; background: none; color: currentColor; stroke-width: 2; }
/* Überzeile im Fragenkopf in der Akzentfarbe wie überall, nicht im grauen Fließtext-Stil */
.u-faq__kopf .kicker { margin-top: 0; max-width: none; color: var(--cw-accent); }
/* Fuß: Links in eigener Zeile. Im dreispaltigen Raster nahm die Linkspalte ihre volle Breite,
   mit „Fürs Handwerk“ und „Im Landkreis Lörrach“ blieb der Adresse bei 860 px nur 76 px. */
@media (min-width: 860px) { .fuss { grid-template-columns: auto minmax(0, 1fr); } }
.fuss__links { grid-column: 1 / -1; }
/* Ortslink im Über-uns-Kasten: Tippfläche über 24 px */
.fakten dd a { padding-block: .3rem; }

/* Wörter mit Bindestrich, die nicht am Zeilenende brechen sollen („KI-“ allein am
   Zeilenende, Startbereich 01.10.2026). */
.ungetrennt { white-space: nowrap; }

/* ==========================================================================
   MASKOTTCHEN (02.10.2026): Alf ruht rechts auf der Leiste, die Beine baumeln
   über die Kante. Ab und zu besucht er einen Platz mit data-alf: setzt sich auf
   eine Oberkante oder läuft über sie, dann kehrt er zurück. seite.js setzt die
   Lage Bild für Bild (fest positioniert, folgt dem Platz beim Scrollen) und
   die Zustände: auf-leiste, fliegt, laeuft, steht, auf-dunkel, blase-rechts.
   Einheiten im SVG: 64 × 64, Körper 36 × 36 ab (14, 8), Unterkante bei y 44.
   ========================================================================== */
.maskottchen {
  position: fixed; left: 0; top: 0; z-index: 64;
  width: 72px; height: 72px; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  display: block; cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* Nur Körper und Arme nehmen Klicks an; was unter den Beinen liegt, bleibt bedienbar. */
  pointer-events: none;
  transform-origin: 50% 68.75%; will-change: transform;
  visibility: hidden; transition: visibility 0s linear 560ms;
}
.maskottchen[hidden] { display: none; }
/* Auf der Leiste vor ihr (Beine vor der Kante), unterwegs dahinter. */
.maskottchen.auf-leiste { z-index: 71; }
.maskottchen.ist-da { visibility: visible; transition: visibility 0s; }
.maskottchen:focus-visible { outline: 2px solid var(--cw-accent); outline-offset: 2px; border-radius: 14px; }
.maskottchen__figur {
  width: 100%; height: 100%; display: block; overflow: visible;
  opacity: 0; transform: translateY(12px) scale(.55); transform-origin: 50% 70%;
  transition: opacity 200ms var(--cw-ease-out), transform 560ms cubic-bezier(.3, 1.55, .5, 1), filter 300ms var(--cw-ease-out);
}
.maskottchen.ist-da .maskottchen__figur { opacity: 1; transform: none; }
/* Auf dunklem Grund ein heller Saum, sonst verschwindet er. */
.maskottchen.auf-dunkel .maskottchen__figur { filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .6)) drop-shadow(0 0 12px rgba(130, 133, 255, .28)); }
.maskottchen .m-koerper, .maskottchen .m-arm { pointer-events: auto; }
.maskottchen path { fill: none; stroke: #23242C; stroke-width: 4.4; stroke-linecap: round; }
/* Helle Kante, damit Beine und Arme auch vor dunklem Grund zu sehen sind. */
.maskottchen .m-rand { stroke: #5B5E6E; stroke-width: 5.6; }
.maskottchen ellipse, .maskottchen circle { fill: url(#m-glied); stroke: #5B5E6E; stroke-width: .6; }
.m-koerper, .m-bein, .m-arm { transform-box: view-box; }
.m-koerper { transform-origin: 32px 44px; }
.m-bein--l { transform-origin: 25.5px 42px; }
.m-bein--r { transform-origin: 38.5px 42px; }
.m-arm--l { transform-origin: 14.4px 30px; }
.m-arm--r { transform-origin: 49.6px 30px; }
.m-arm { transition: transform 260ms var(--cw-ease-out); }

/* Leben: atmen, Beine baumeln, winken, landen. */
.js:not(.ruhig) .maskottchen.ist-da .m-koerper { animation: m-atmen 3.4s ease-in-out infinite; }
.js:not(.ruhig) .maskottchen.ist-da .m-bein--l { animation: m-baumeln 2.6s ease-in-out infinite; }
.js:not(.ruhig) .maskottchen.ist-da .m-bein--r { animation: m-baumeln 2.6s ease-in-out -1.3s infinite; }
.js:not(.ruhig) .maskottchen.winkt .m-arm--r { animation: m-winken 1.8s ease-in-out; }
.js:not(.ruhig) .maskottchen.huepft .maskottchen__figur { animation: m-huepfen 420ms cubic-bezier(.3, 1.5, .5, 1); }
/* Unterwegs: Arme hoch, Beine still. Im Stehen gerade Beine. Beim Laufen Schritte. */
.maskottchen.fliegt .m-arm--r { transform: rotate(-112deg); }
.maskottchen.fliegt .m-arm--l { transform: rotate(112deg); }
.js:not(.ruhig) .maskottchen.fliegt .m-bein, .js:not(.ruhig) .maskottchen.steht .m-bein { animation: none; }
.maskottchen.fliegt .m-bein--l { transform: rotate(14deg); }
.maskottchen.fliegt .m-bein--r { transform: rotate(-14deg); }
.js:not(.ruhig) .maskottchen.laeuft .m-bein--l { animation: m-gehen 480ms ease-in-out infinite; }
.js:not(.ruhig) .maskottchen.laeuft .m-bein--r { animation: m-gehen 480ms ease-in-out -240ms infinite; }
.js:not(.ruhig) .maskottchen.laeuft .m-arm--l { animation: m-schwingen 480ms ease-in-out infinite; }
.js:not(.ruhig) .maskottchen.laeuft .m-arm--r { animation: m-schwingen 480ms ease-in-out -240ms infinite; }
.js:not(.ruhig) .maskottchen.laeuft .m-koerper { animation: m-wippen 240ms ease-in-out infinite alternate; }
@keyframes m-atmen { 50% { transform: translateY(-.8px) scale(1.012); } }
@keyframes m-baumeln { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes m-gehen { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes m-schwingen { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes m-wippen { to { transform: translateY(-1.4px); } }
/* Drehpunkt an der Körperkante; der Arm zeigt dann schräg nach rechts oben
   (rund 35° über der Waagrechten) und bleibt vor dem Hintergrund sichtbar. */
@keyframes m-winken {
  0%, 100% { transform: none; }
  16% { transform: rotate(-98deg); } 30% { transform: rotate(-118deg); } 44% { transform: rotate(-82deg); }
  58% { transform: rotate(-118deg); } 72% { transform: rotate(-82deg); } 86% { transform: rotate(-98deg); }
}
@keyframes m-huepfen { 0% { transform: none; } 35% { transform: translateY(2px) scale(1.06, .9); } 70% { transform: translateY(-7px) scale(.97, 1.04); } 100% { transform: none; } }

/* Sprechblase: beim ersten Auftauchen, an manchen Plätzen ein Satz, sonst beim Zeigen. */
.maskottchen__blase {
  position: absolute; right: 78%; bottom: 80%;
  padding: .45rem .7rem; border-radius: 12px 12px 4px 12px;
  background: var(--cw-surface); color: var(--cw-ink); font-size: .78rem; font-weight: 650; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 0 #fff inset, 0 2px 4px hsl(232 30% 20% / .12), 0 14px 30px -10px hsl(232 40% 14% / .4);
  opacity: 0; transform: translateY(6px) scale(.9); transform-origin: 100% 100%;
  transition: opacity 200ms var(--cw-ease-out), transform 320ms var(--cw-ease-out);
}
.maskottchen.blase-rechts .maskottchen__blase { right: auto; left: 78%; border-radius: 12px 12px 12px 4px; transform-origin: 0 100%; }
/* Handy, Alf mittig auf der Leiste: Blase mittig über dem Kopf (links und rechts zu wenig Platz). */
.maskottchen.blase-oben .maskottchen__blase { right: auto; left: 50%; bottom: 100%; translate: -50% 0; transform-origin: 50% 100%; border-radius: 12px; }
.maskottchen.zeigt-blase .maskottchen__blase,
.maskottchen:hover .maskottchen__blase,
.maskottchen:focus-visible .maskottchen__blase { opacity: 1; transform: none; }
.maskottchen.fliegt .maskottchen__blase { opacity: 0; }
.ruhig .maskottchen__figur, .ruhig .maskottchen__blase { transition: none; }
@media (max-width: 859px) {
  .maskottchen { width: 64px; height: 64px; }
}

/* Anfragestrecke im Betrieb (02.10.2026): Bot-Falle außer Sicht, kleiner Hinweis
   unter dem Buchungsknopf, gesperrter Knopf während des Sendens. */
.strecke__falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.strecke__fertig-klein { margin-top: .8rem; font-size: var(--cw-t-sm); color: var(--cw-ink-soft); }
.strecke [data-senden][disabled] { opacity: .7; cursor: progress; }