/* ===================================================================
   DITKO - Stylesheet, Neubau 25.08.2026
   Haus-Stil der Gruendung 2026: dieselben Farben und Schriften wie in
   den Decks und den A4-Vorlagen. Neu sind Tiefe, Bewegung und das
   Handy als Rahmen um die Anrufliste.
   Regel 1: Alle Farben zuerst komplett auf blankes :root.
   Regel 2: Bewegung nur, wenn html.js gesetzt ist und der Besucher
            sie nicht abgeschaltet hat.
   =================================================================== */

/* ---------- 1. Farben: heller Grundzustand ----------
   Nachtblau traegt (Marke, Knoepfe, Zahlen), Gold markiert das Wichtige
   (Preise, Empfehlung, Merksatz), Ziegelrot heisst nur eins: verpasst. */
:root {
  --ground:      #f5f3ee;
  --surface:     #fdfcfa;
  --ink:         #111827;
  --ink-2:       #5a6270;
  --steel:       #1e3a5f;
  --steel-ink:   #1e3a5f;
  --signal:      #a67b2c;
  --signal-ink:  #7a5a1c;

  --line:        #dcd7cc;
  --line-soft:   #e8e4db;
  --steel-soft:  #e4ebf3;
  --signal-soft: #f4ead6;
  --signal-line: rgba(166, 123, 44, .5);

  /* Verpasst, verloren: nur Anrufliste, Hero-Satz und Warnungen */
  --miss:        #b8432c;
  --miss-ink:    #953321;
  --miss-soft:   #f7e4de;
  --miss-line:   rgba(184, 67, 44, .45);

  --card:        #fdfcfa;

  --btn-bg:      #1e3a5f;
  --btn-ink:     #ffffff;

  /* Laufband ganz oben: immer dunkel */
  --bar-bg:      #0f1622;
  --bar-ink:     #f1efe9;

  /* Kopfzeile als Milchglas */
  --glass:       rgba(245, 243, 238, .84);

  /* Das Handy im Hero */
  --phone-bezel: #111827;
  --phone-screen:#fdfcfa;

  --shadow:       0 1px 2px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.06);
  --shadow-lift:  0 2px 4px rgba(17,24,39,.06), 0 22px 48px -12px rgba(17,24,39,.16);
  --shadow-phone: 0 40px 90px -28px rgba(17,24,39,.45), 0 4px 10px rgba(17,24,39,.08);

  --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 1480px;
  --radius: 12px;
  --radius-lg: 20px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 2. Dunkel per Systemeinstellung ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0b1017;
    --surface:     #121923;
    --ink:         #f1efe9;
    --ink-2:       #a7aeb8;
    --steel:       #7fa8d3;
    --steel-ink:   #93b8de;
    --signal:      #d8b46a;
    --signal-ink:  #e0bf78;

    --line:        #232c37;
    --line-soft:   #1a222c;
    --steel-soft:  #182636;
    --signal-soft: #2a2314;
    --signal-line: rgba(216, 180, 106, .5);

    /* Verpasst, verloren: nur Anrufliste, Hero-Satz und Warnungen */
    --miss:        #e0765c;
    --miss-ink:    #ee9a84;
    --miss-soft:   #2e1a15;
    --miss-line:   rgba(224, 118, 92, .45);

    --card:        #121923;

    --btn-bg:      #3a6ea5;
    --btn-ink:     #ffffff;

    --bar-bg:      #05080c;
    --bar-ink:     #f1efe9;
    --glass:       rgba(11, 16, 23, .8);

    --phone-bezel: #2a323d;
    --phone-screen:#121923;

    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:  0 2px 4px rgba(0,0,0,.45), 0 22px 48px -12px rgba(0,0,0,.6);
    --shadow-phone: 0 40px 90px -28px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.4);
  }
}

/* ---------- 3. Dunkel per Schalter ---------- */
:root[data-theme="dark"] {
  --ground:      #0b1017;
  --surface:     #121923;
  --ink:         #f1efe9;
  --ink-2:       #a7aeb8;
  --steel:       #7fa8d3;
  --steel-ink:   #93b8de;
  --signal:      #d8b46a;
  --signal-ink:  #e0bf78;

  --line:        #232c37;
  --line-soft:   #1a222c;
  --steel-soft:  #182636;
  --signal-soft: #2a2314;
  --signal-line: rgba(216, 180, 106, .5);

  /* Verpasst, verloren: nur Anrufliste, Hero-Satz und Warnungen */
  --miss:        #e0765c;
  --miss-ink:    #ee9a84;
  --miss-soft:   #2e1a15;
  --miss-line:   rgba(224, 118, 92, .45);

  --card:        #121923;

  --btn-bg:      #3a6ea5;
  --btn-ink:     #ffffff;

  --bar-bg:      #05080c;
  --bar-ink:     #f1efe9;
  --glass:       rgba(11, 16, 23, .8);

  --phone-bezel: #2a323d;
  --phone-screen:#121923;

  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:  0 2px 4px rgba(0,0,0,.45), 0 22px 48px -12px rgba(0,0,0,.6);
  --shadow-phone: 0 40px 90px -28px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.4);
}

/* Getoente Baender: Karten wechseln auf den Grundton, damit sie sich abheben */
.band--tint { --card: #f5f3ee; }
:root[data-theme="dark"] .band--tint { --card: #0b1017; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band--tint { --card: #0b1017; }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -.025em; margin: 0; }
p { margin: 0; }
a { color: var(--steel-ink); }
svg { display: block; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
@media (min-width: 1100px) { .wrap { padding-inline: 36px; } }

/* Grosse Monitore: alles waechst mit, statt in der Mitte zu kleben */
@media (min-width: 1900px) { html { font-size: 112.5%; } :root { --wrap: 1720px; } }
@media (min-width: 2400px) { html { font-size: 118%; } :root { --wrap: 1900px; } }

/* Zwei Spalten auf breiten Schirmen: Ueberschrift links (klebt beim Scrollen), Inhalt rechts */
@media (min-width: 1100px) {
  .split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .split > .sec-head { position: sticky; top: 100px; }
  .split > .tape, .split > .privacy, .split > .privacy-wrap, .split > .faq { margin-top: 0; }
}

.band { padding-block: clamp(80px, 11vw, 152px); position: relative; }
.band--tint { background: var(--surface); border-block: 1px solid var(--line-soft); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ground);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.ic { width: 1em; height: 1em; flex: none; }

/* ---------- Bewegung: Grundregeln ---------- */
/* Einblenden beim Scrollen. Nur mit JavaScript, sonst steht alles sofort da. */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Entwurfs-Hinweis ---------- */
.draft-note {
  background: var(--miss-soft);
  border-bottom: 1px solid var(--miss);
  color: var(--miss-ink);
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 22px;
  text-align: center;
}

/* ---------- Laufband ---------- */
.ticker {
  background: var(--bar-bg); color: var(--bar-ink);
  overflow: hidden; position: relative;
  font-size: .71875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ticker__track { display: flex; width: max-content; }
html.js .ticker__track { animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; flex: none; }
.ticker__item {
  display: flex; align-items: center; gap: 28px;
  padding: 11px 0 11px 28px; white-space: nowrap;
}
.ticker__item::after { content: ""; width: 5px; height: 5px; background: var(--signal); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html.js .ticker__track { animation: none; }
}

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.top.is-scrolled { box-shadow: 0 10px 30px -22px rgba(17,24,39,.35); }
.top__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 72px;
}
/* Im Kopf ist alles eckig */
.top .btn, .top .theme-toggle { border-radius: 3px; }

.top__nav { display: none; gap: 30px; }
@media (min-width: 1000px) { .top__nav { display: flex; } }
.top__nav a {
  font-size: .9375rem; font-weight: 600; color: var(--ink); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.top__nav a:hover { border-bottom-color: var(--signal); }


.top__actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 640px) {
  .top__actions .btn { display: none; }
  .top__inner { min-height: 60px; }
  .ticker__item { padding: 9px 0 9px 20px; gap: 20px; }
}

.theme-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer;
  transition: color .18s, border-color .18s, transform .2s var(--ease-out);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); transform: rotate(-12deg); }
.theme-toggle svg { width: 17px; height: 17px; }

/* ---------- Schaltflaechen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700;
  padding: 14px 24px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .2s var(--ease-out), box-shadow .25s, background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
  background: var(--btn-bg); color: var(--btn-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-lift); }

.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--quiet:hover { border-color: var(--ink-2); background: var(--card); }

.btn--small { font-size: .9375rem; padding: 10px 16px; }

/* ---------- Ueberschriften-Bausteine ---------- */
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  font-stretch: 108%;
  text-transform: uppercase; color: var(--signal-ink);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--signal); flex: none; }

.sec-head { max-width: 760px; }
.sec-title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -.035em; margin-top: 18px; text-wrap: balance;
}
.sec-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.9vw, 1.25rem); line-height: 1.55;
  color: var(--ink-2); margin-top: 16px; max-width: 34em;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: clip;
  padding-block: clamp(52px, 7vw, 100px) clamp(60px, 8vw, 110px);
}
/* Ein weiches Licht hinter dem Handy, sonst nichts */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(620px 460px at 74% 40%, var(--steel-soft), transparent 70%),
    radial-gradient(460px 360px at 80% 80%, var(--signal-soft), transparent 70%);
  opacity: .85;
}
/* Eine Spalte, auf jeder Breite. Die zweite Spalte trug bis zum
   29.08.2026 den Werbesatz; seit der weg ist, steht die Buehne allein
   in der Mitte und braucht kein Raster mehr. */
.hero__grid {
  position: relative;
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }


/* Einzug beim Laden. Frueher kam hier der Werbesatz Zeile fuer Zeile;
   jetzt sind es nur noch die Einordnung darueber und die Knoepfe
   darunter - das Handy dazwischen hat seine eigene Bewegung. */
html.js .hero__kopf {
  opacity: 0; transform: translateY(16px);
  animation: rise .9s var(--ease-out) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

html.js .hero__stage { opacity: 0; animation: stageIn 1.1s var(--ease-out) .4s forwards; }
@keyframes stageIn {
  from { opacity: 0; transform: translateY(28px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Die Buehne: Ringe und Handy ---------- */
.hero__stage {
  position: relative; display: grid; place-items: center;
  padding: 10px 0 4px;
}


.stage__hint {
  margin-top: 18px; font-size: .8125rem; color: var(--ink-2);
  text-align: center; display: flex; align-items: center; gap: 8px;
}
.stage__hint .ic { width: 15px; height: 15px; color: var(--steel); }

/* ---------- Die Buehne: der Zettel ----------
   Querformat, Papier, Serifenschrift bei den Werten. Alle drei
   Eigenschaften trennen ihn vom Handy der Vorfuehrung „So sieht das
   bei Ihnen aus": dort ein hochkantes schwarzes Geraet mit Chat und
   Kalender, hier ein liegendes helles Blatt mit vier Zeilen. Wer beide
   sieht, verwechselt sie nicht. */
.zettel {
  position: relative; width: 100%; max-width: 620px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  overflow: hidden;
  transition: border-color .7s ease, box-shadow .7s ease;
}
.zettel[data-phase="fertig"] { border-color: var(--steel); }

/* ---- Kopf: Uhrzeit, wer dran ist, Zustand ---- */
.zettel__kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.zettel__zeit {
  font-size: .9375rem; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--ink); flex: none;
}
.zettel__wer {
  flex: 1; min-width: 0; font-size: .8125rem; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .5s ease;
}
.zettel__marke {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--miss-soft); color: var(--miss-ink);
  transition: background-color .5s ease, color .5s ease;
}
.zettel__punkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .85;
}
.zettel[data-phase="hoert"] .zettel__marke { background: var(--steel-soft); color: var(--steel-ink); }
/* Nachgerechnet, nicht geschaetzt: Weiss auf --steel ergibt im
   Dunkelmodus nur 2,49:1, verlangt sind 4,5:1 fuer Text dieser
   Groesse. Fuer genau diesen Fall gibt es das Paar --btn-bg /
   --btn-ink: 5,31:1 im Dunkeln, 11,50:1 im Hellen. */
.zettel[data-phase="fertig"] .zettel__marke { background: var(--btn-bg); color: var(--btn-ink); }
html.js .zettel[data-phase="hoert"] .zettel__punkt { animation: pochen 1.1s ease-in-out infinite; }
@keyframes pochen { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---- Die Stimme ----
   Die Balken bewegen sich nur, solange zugehoert wird. Steht die Welle
   still, ist der Anruf vorbei - das erklaert sich ohne Beschriftung. */
.zettel__stimme {
  display: grid; gap: 12px; justify-items: center;
  padding: 20px 18px 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--steel-soft), transparent 72%);
}
.zettel__welle {
  display: flex; align-items: center; gap: 4px; height: 30px;
}
.zettel__welle i {
  width: 3px; height: 5px; border-radius: 999px; flex: none;
  background: var(--steel); opacity: .28;
  transition: opacity .5s ease, height .5s ease;
}
html.js .zettel[data-phase="hoert"] .zettel__welle i {
  opacity: .9; animation: wippen 1s ease-in-out infinite;
}
.zettel__welle i:nth-child(1)  { animation-delay: -.94s; }
.zettel__welle i:nth-child(2)  { animation-delay: -.19s; }
.zettel__welle i:nth-child(3)  { animation-delay: -.58s; }
.zettel__welle i:nth-child(4)  { animation-delay: -.33s; }
.zettel__welle i:nth-child(5)  { animation-delay: -.77s; }
.zettel__welle i:nth-child(6)  { animation-delay: -.05s; }
.zettel__welle i:nth-child(7)  { animation-delay: -.61s; }
.zettel__welle i:nth-child(8)  { animation-delay: -.28s; }
.zettel__welle i:nth-child(9)  { animation-delay: -.85s; }
.zettel__welle i:nth-child(10) { animation-delay: -.44s; }
.zettel__welle i:nth-child(11) { animation-delay: -.12s; }
.zettel__welle i:nth-child(12) { animation-delay: -.69s; }
.zettel__welle i:nth-child(13) { animation-delay: -.37s; }
.zettel__welle i:nth-child(14) { animation-delay: -.91s; }
@keyframes wippen {
  0%, 100% { height: 6px; }
  50%      { height: 26px; }
}

/* Der Satz, der gerade gesagt wird. Die Hoehe steht fest, sonst
   springt der ganze Zettel bei jedem Wechsel. */
.zettel__satz {
  margin: 0; text-align: center;
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.5;
  color: var(--ink); max-width: 30em;
  min-height: 3em; display: flex; align-items: center; justify-content: center;
  transition: opacity .28s ease;
}
.zettel__satz.is-weg { opacity: 0; }
.zettel[data-phase="leer"] .zettel__satz { color: var(--ink-2); }
.zettel__satz b { font-weight: 700; }

/* ---- Die vier Zeilen ---- */
.zettel__zeilen { margin: 0; padding: 0 18px 4px; }
.zettel__zeile {
  display: grid; grid-template-columns: 84px 1fr 22px;
  align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.zettel__zeile dt {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}
.zettel__zeile dd {
  margin: 0; position: relative; min-width: 0;
  display: flex; align-items: center; min-height: 22px;
}
/* Solange nichts aufgenommen wurde, steht hier ein Strich - das ist
   genau so viel, wie ein verpasster Anruf hinterlaesst. */
.zettel__strich {
  position: absolute; left: 0; top: 50%; width: 62%; height: 2px;
  border-radius: 2px; background: var(--line);
  transition: opacity .3s ease;
}
.zettel__zeile dd b {
  font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600;
  line-height: 1.35; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(5px);
}
.zettel__haken {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--steel-soft); color: var(--steel);
  opacity: 0; transform: scale(.5);
}
.zettel__haken .ic { width: 13px; height: 13px; }

.zettel__zeile.is-da .zettel__strich { opacity: 0; }
.zettel__zeile.is-da dd b {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .5s var(--ease-out);
}
.zettel__zeile.is-da .zettel__haken {
  opacity: 1; transform: none;
  transition: opacity .3s ease .18s, transform .45s var(--ease-out) .18s;
}

/* ---- Fusszeile: was daraus geworden ist ---- */
.zettel__fuss {
  margin: 0; padding: 13px 18px; text-align: center;
  font-size: .8125rem; font-weight: 600; line-height: 1.4;
  background: var(--miss-soft); color: var(--miss-ink);
  transition: background-color .5s ease, color .5s ease;
}
.zettel[data-phase="hoert"] .zettel__fuss { background: var(--surface); color: var(--ink-2); }
.zettel[data-phase="fertig"] .zettel__fuss { background: var(--steel-soft); color: var(--steel-ink); }

/* Masse vom iPhone 17 (6,3 Zoll): Gehaeuse 149,6 x 71,5 mm, Display 393 x 874 pt
   (1206 x 2622 px bei 460 ppi = 66,6 x 144,8 mm), Rand rundum ~2,4 mm,
   Eckenradius des Displays ~55 pt, Insel ~125 x 37 pt, 11 pt von oben.
   Alles haengt an --pw (Breite in px): 1 mm = --pw / 71,5. Bei 300 px:
   Rahmen 10 px, Display 280 x 608 px, Radius aussen 49 / innen 39 px,
   Insel 89 x 26 px. Tasten: Action, Lauter, Leiser links, Ein/Aus rechts. */
.phone {
  --pw: 300px;
  position: relative; width: var(--pw); max-width: 100%;
  aspect-ratio: 71.5 / 149.6;
  background: var(--phone-bezel);
  border-radius: calc(var(--pw) * .1636);
  padding: calc(var(--pw) * .0336);
  box-shadow: var(--shadow-phone);
}
.phone::before, .phone::after {
  content: ""; position: absolute; width: calc(var(--pw) * .011);
  background: var(--phone-bezel); border-radius: 2px;
}
/* links: ein Balken mit Luecken - Action-Taste, Lauter, Leiser */
.phone::before {
  left: calc(var(--pw) * -.011); top: calc(var(--pw) * .42); height: calc(var(--pw) * .531);
  background: linear-gradient(to bottom,
    var(--phone-bezel) 0 18.5%, transparent 18.5% 34.1%,
    var(--phone-bezel) 34.1% 63.1%, transparent 63.1% 71%,
    var(--phone-bezel) 71% 100%);
}
/* rechts: Ein/Aus */
.phone::after {
  right: calc(var(--pw) * -.011); top: calc(var(--pw) * .573); height: calc(var(--pw) * .238);
}
.phone__screen {
  position: relative; height: 100%; background: var(--phone-screen);
  border-radius: calc(var(--pw) * .13); overflow: hidden;
  display: flex; flex-direction: column;
}
.phone__island {
  position: absolute; top: calc(var(--pw) * .027); left: 50%; transform: translateX(-50%);
  width: calc(var(--pw) * .297); height: calc(var(--pw) * .087); border-radius: 999px; background: var(--phone-bezel);
}
.phone__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px 0; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
  min-height: 38px; flex: none;
}
.phone__status { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.phone__status .ic { width: 15px; height: 15px; }
.phone__batt {
  width: 22px; height: 11px; border: 1.5px solid var(--ink); border-radius: 3.5px;
  position: relative; opacity: .85;
}
.phone__batt::before { content: ""; position: absolute; inset: 1.5px; right: 5px; background: var(--ink); border-radius: 1.5px; }
.phone__batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: var(--ink); border-radius: 1px; }

.phone__home { flex: none; width: 108px; height: 5px; border-radius: 999px; background: var(--line); margin: 4px auto 8px; }

/* ---------- Vertrauensleiste ---------- */
.trust { background: var(--surface); border-block: 1px solid var(--line-soft); }
.trust__list {
  list-style: none; margin: 0; padding: 20px 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
}
@media (min-width: 860px) { .trust__list { grid-template-columns: repeat(4, 1fr); padding: 22px 0; } }
.trust__item {
  display: flex; align-items: center; gap: 11px;
  font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.trust__item .ic { width: 20px; height: 20px; color: var(--steel); }

/* ---------- Die Rechnung: drei Zahlen ---------- */
.stats { display: grid; gap: 22px; margin-top: 64px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px 24px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.stat::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px;
  background: var(--signal); border-radius: 0 0 3px 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-out) .25s;
}
.stat.is-seen::before { transform: scaleX(1); }
.stat__num {
  font-size: clamp(2.6rem, 4.5vw, 3.4rem); font-weight: 800; line-height: 1;
  letter-spacing: -.045em; color: var(--steel); font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: .5em; font-weight: 700; letter-spacing: -.02em; margin-left: 3px; }
.stat__claim { font-weight: 700; margin-top: 16px; font-size: 1.0625rem; line-height: 1.35; }
.stat__text { font-size: .9375rem; color: var(--ink-2); margin-top: 4px; padding-bottom: 6px; line-height: 1.6; }
.stats__hinweis { margin: 18px 0 0; font-size: .9375rem; color: var(--ink-2); max-width: 62ch; }
.stat__src {
  display: block; font-size: .78rem; color: var(--ink-2);
  margin-top: auto; padding-top: 14px;
}
.stat__src::before { content: ""; display: block; width: 100%; height: 1px; border-top: 1px dashed var(--line); margin-bottom: 10px; }

.verdict {
  margin-top: 28px; padding: 24px 28px; max-width: 900px;
  background: var(--signal-soft); border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.verdict p {
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  line-height: 1.45; color: var(--signal-ink); font-weight: 600;
}

/* ---------- Zeitstrahl eines Anrufs ---------- */
.tape {
  list-style: none; margin: 48px 0 0; padding: 0;
  position: relative; max-width: 900px;
  --node: 44px;
}
.tape::before, .tape::after {
  content: ""; position: absolute;
  left: calc(var(--node) / 2 - 1px); top: 30px; bottom: 30px; width: 2px;
  border-radius: 2px;
}
.tape::before { background: var(--line); }
.tape::after {
  background: var(--steel); transform: scaleY(0); transform-origin: top;
  transition: transform 1.8s var(--ease-io) .15s;
}
.tape.is-seen::after { transform: scaleY(1); }

.tape__row {
  display: grid; grid-template-columns: var(--node) minmax(78px, max-content) 1fr;
  gap: 18px; align-items: start; padding: 14px 0; position: relative;
}
.tape__node {
  width: var(--node); height: var(--node); border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--card); border: 2px solid var(--line); color: var(--ink-2);
  transition: border-color .45s, color .45s, background-color .45s, transform .5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .3s);
}
.tape__node .ic { width: 19px; height: 19px; }
.tape.is-seen .tape__node { border-color: var(--steel); color: var(--steel); background: var(--steel-soft); }
.tape__at {
  font-size: .9375rem; font-weight: 800; color: var(--steel-ink);
  font-variant-numeric: tabular-nums; padding-top: 11px;
}
.tape__what {
  min-width: 0; padding-top: 9px; opacity: .5;
  transition: opacity .55s; transition-delay: calc(var(--i, 0) * .3s + .1s);
}
.tape.is-seen .tape__what { opacity: 1; }
.tape__what b { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.tape__what span { display: block; font-size: .9375rem; color: var(--ink-2); margin-top: 5px; max-width: 44em; line-height: 1.6; }
.tape__what q {
  display: block; font-family: var(--font-serif); font-style: italic;
  font-size: 1.0625rem; color: var(--ink); margin-top: 8px;
  quotes: none;
}
.tape__what q::before, .tape__what q::after { content: none; }

/* Die Notfall-Zeile haengt unten dran und faellt farblich raus */
.tape__row--urgent {
  margin-top: 10px; padding: 16px 18px 16px 0;
  background: var(--signal-soft); border-radius: var(--radius-lg);
}
.tape__row--urgent .tape__node { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.tape.is-seen .tape__row--urgent .tape__node { border-color: var(--signal); color: var(--signal); background: var(--card); }
.tape__row--urgent .tape__at { color: var(--signal-ink); }
.tape__row--urgent .tape__what b { color: var(--signal-ink); }

@media (max-width: 600px) {
  .tape { --node: 40px; }
  .tape__row { grid-template-columns: var(--node) 1fr; gap: 6px 14px; }
  .tape__node { grid-row: 1 / span 2; }
  .tape__at { grid-column: 2; padding-top: 10px; }
  .tape__what { grid-column: 2; padding-top: 0; }
  .tape__row--urgent { padding-right: 14px; }
}

/* ---------- Ablauf in drei Schritten ---------- */
.steps { display: grid; gap: 22px; margin-top: 64px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px 24px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .3s;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
@media (min-width: 820px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; right: -22px; top: 50px; width: 22px; height: 2px;
    background: var(--line);
  }
}
.step__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-ink);
}
.step__tag i {
  width: 28px; height: 28px; border-radius: 50%; font-style: normal;
  background: var(--steel-soft); display: grid; place-items: center;
  font-size: .8125rem; letter-spacing: 0;
}
.step__title { font-size: 1.25rem; font-weight: 800; margin-top: 16px; letter-spacing: -.02em; }
.step__text { font-size: .9375rem; color: var(--ink-2); margin-top: 10px; line-height: 1.6; }
.step__when {
  margin-top: auto; padding-top: 22px;
  font-size: .8125rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 9px;
}
.step__when::before { content: ""; width: 16px; height: 2px; background: var(--steel); flex: none; }

/* ---------- Ihre Daten: vier Zusagen ---------- */
.privacy { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 44px; }
@media (min-width: 720px) { .privacy { grid-template-columns: 1fr 1fr; } }

.privacy__row {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.privacy__row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.privacy__ico {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--steel-soft); color: var(--steel);
  display: grid; place-items: center;
}
.privacy__ico .ic { width: 21px; height: 21px; }
.privacy__row b { font-weight: 700; font-size: 1rem; display: block; line-height: 1.3; margin-top: 2px; }
.privacy__row small { display: block; font-size: .875rem; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }

.privacy__more { margin-top: 28px; font-size: .9375rem; color: var(--ink-2); max-width: 52em; line-height: 1.65; }
.privacy__more a { font-weight: 700; }

/* ---------- Pakete ---------- */
.plans { display: grid; gap: 24px; margin-top: 64px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px;
  display: flex; flex-direction: column; position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.plan--featured {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), var(--shadow-lift);
  background: linear-gradient(180deg, var(--signal-soft), var(--card) 150px);
}
.plan--featured:hover { box-shadow: 0 0 0 1px var(--signal), var(--shadow-lift); }
@media (min-width: 960px) {
  .plan--featured { margin-block: -14px; padding-block: 42px; }
}

.plan__flag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 7px;
  background: var(--card); color: var(--signal-ink);
  border: 1px solid var(--signal);
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.plan__flag .ic { width: 12px; height: 12px; }

.plan__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.plan__for { font-size: .9rem; color: var(--ink-2); margin-top: 6px; min-height: 2.8em; line-height: 1.5; }

.plan__price {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.plan__amount {
  font-size: 2.5rem; font-weight: 800; color: var(--signal); line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.plan__per { font-size: .9375rem; color: var(--ink-2); font-weight: 600; }
.plan__cap { margin: -4px 0 14px; font-size: .875rem; color: var(--ink-2); }

.plan__from {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel-ink); margin-top: 18px; padding-bottom: 4px;
}

.plan__list { list-style: none; margin: 12px 0 0; padding: 0; }
.plan__item {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px;
  font-size: .9375rem; padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}
.plan__item .ic { width: 16px; height: 16px; margin-top: 4px; color: var(--steel); }
.plan__item span b { font-weight: 700; }
.plan__item small { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

/* Der eine Satz, der die Angst vor der Kuendigung nimmt */
.plan__note {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--steel-soft); font-size: .875rem; line-height: 1.5; color: var(--ink);
}
.plan__note .ic { width: 17px; height: 17px; margin-top: 2px; color: var(--steel-ink); }
.plan__note b { font-weight: 700; }

.plan__foot { margin-top: auto; padding-top: 26px; }
.plan__foot .btn { width: 100%; }

.plans__all {
  margin-top: 30px; padding: 28px 30px;
  background: var(--steel-soft); border-radius: var(--radius-lg);
}
.plans__all h3 { font-size: 1.0625rem; color: var(--ink); }
.plans__all-lead { margin-top: 6px; font-size: .9375rem; color: var(--ink-2); }
/* Zwei unabhaengige Spalten: ein aufgeklappter Eintrag links zieht rechts
   keine Zeile mit auseinander. */
.plans__klapp { margin-top: 18px; display: grid; gap: 0 36px; align-items: start; }
@media (min-width: 860px) { .plans__klapp { grid-template-columns: 1fr 1fr; } }
.plans__klapp ul { margin: 0; padding: 0; list-style: none; }
.plans__klapp li { border-top: 1px solid var(--signal-line); }
.plans__klapp ul:first-child li:first-child { border-top: 0; }
@media (min-width: 860px) { .plans__klapp ul li:first-child { border-top: 0; } }
.plans__klapp .klapp__inhalt p { font-size: .9375rem; line-height: 1.6; color: var(--ink); padding: 0 0 16px 29px; margin: 0; }

/* ---------- Wer dahintersteht ---------- */
.me__grid { display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .me__grid { grid-template-columns: 320px 1fr; } }

.me__photo {
  aspect-ratio: 4 / 5; border-radius: 26px; max-width: 320px;
  background: linear-gradient(160deg, var(--steel-soft), var(--card) 80%);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; place-items: center; text-align: center;
  color: var(--steel-ink); padding: 22px; position: relative; overflow: hidden;
}
.me__mono {
  font-size: 6rem; font-weight: 800; letter-spacing: -.07em; line-height: 1;
  color: var(--steel); opacity: .26; font-stretch: 112%;
}
.me__photo span { font-size: .8125rem; font-weight: 700; line-height: 1.4; display: block; margin-top: 12px; }

.me__quote {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.35; letter-spacing: -.01em;
  margin-bottom: 24px; text-wrap: balance;
}
.me__body > p + p { margin-top: 16px; color: var(--ink-2); max-width: 44em; }
.me__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.me__fact {
  font-size: .8125rem; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.me__fact .ic { width: 14px; height: 14px; color: var(--steel); }

/* ---------- Kontakt ---------- */
.contact__grid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; margin-top: 64px; }
@media (min-width: 860px) { .contact__grid { grid-template-columns: 1.2fr .8fr; gap: 36px; } }

.form {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow);
}
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: .875rem; font-weight: 700; margin-bottom: 7px; }
.field__label span { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-sans); font-size: 1rem;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--ground); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-2); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none; border-color: var(--steel);
  box-shadow: 0 0 0 4px var(--steel-soft);
}
.field textarea { min-height: 112px; resize: vertical; }

.form__hint { font-size: .8125rem; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.form__status { font-size: .9375rem; font-weight: 600; margin-top: 14px; min-height: 1.4em; }
.form__status[data-tone="error"] { color: var(--signal-ink); }
.form__status[data-tone="ok"] { color: var(--steel-ink); }

.direct { display: grid; gap: 12px; }
.direct__row {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.direct__ico {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--steel-soft); color: var(--steel);
  display: grid; place-items: center;
}
.direct__ico .ic { width: 19px; height: 19px; }
.direct__row strong { font-size: 1rem; font-weight: 700; color: var(--ink); display: block; line-height: 1.3; }
.direct__row small { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 3px; }

/* ---------- Fusszeile ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 56px 32px; font-size: .875rem; color: var(--ink-2); background: var(--surface); }
.foot__inner { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Feste Anrufleiste am Handy ---------- */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--btn-bg); color: var(--btn-ink);
    align-items: center; justify-content: center; gap: 10px;
    padding: 15px; padding-bottom: calc(15px + env(safe-area-inset-bottom));
    font-weight: 700; font-size: 1.0625rem; text-decoration: none;
    box-shadow: 0 -8px 26px rgba(0,0,0,.18);
  }
  .callbar .ic { width: 19px; height: 19px; }
  body { padding-bottom: 64px; }
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 720px; }
.legal h2 { font-size: 1.375rem; margin-top: 38px; }
.legal h3 { font-size: 1.0625rem; margin-top: 26px; }
.legal p, .legal li { font-size: .9375rem; margin-top: 12px; }
.legal ul { padding-left: 22px; }
.legal .todo {
  background: var(--miss-soft); color: var(--miss-ink);
  font-weight: 700; padding: 1px 6px; border-radius: 4px;
}

/* ---------- Assistent unten rechts ---------- */
.assist { position: fixed; right: 22px; bottom: 22px; z-index: 60; }
.assist__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--btn-bg); color: var(--btn-ink); border: 0; border-radius: 14px;
  padding: 14px 18px; font-family: var(--font-sans); font-size: .9375rem; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-lift);
  transition: transform .2s var(--ease-out), box-shadow .25s;
}
.assist__btn:hover { transform: translateY(-2px); }
.assist__btn .ic { width: 20px; height: 20px; }
.assist.is-open .assist__btn { box-shadow: var(--shadow); }

.assist__panel {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: min(400px, calc(100vw - 44px));
  max-height: min(660px, calc(100vh - 130px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lift); overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.assist.is-open .assist__panel { opacity: 1; transform: none; pointer-events: auto; }

.assist__head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft); background: var(--ground);
}
.assist__avatar {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  color: var(--steel); display: grid; place-items: center;
}
.assist__avatar .ic { width: 38px; height: 38px; }
.assist__title { min-width: 0; }
.assist__title b { display: block; font-size: .9375rem; line-height: 1.25; }
.assist__title small { display: block; font-size: .71875rem; color: var(--ink-2); margin-top: 2px; }
.assist__close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.assist__close:hover { color: var(--ink); border-color: var(--ink-2); }

.assist__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; min-height: 180px;
}
.msg {
  max-width: 88%; padding: 10px 13px; border-radius: 14px;
  font-size: .9rem; line-height: 1.5;
  animation: msgIn .3s var(--ease-out) both;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg--bot { background: var(--ground); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg--me  { background: var(--steel); color: var(--ground); border-bottom-right-radius: 4px; align-self: flex-end; }
.msg a { color: inherit; font-weight: 700; }
.msg b { font-weight: 700; }
.msg--typing { display: flex; gap: 5px; padding: 13px 15px; }
.msg--typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); opacity: .5;
  animation: dot 1s ease-in-out infinite;
}
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

.assist__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; flex: none; }
.chip {
  font-family: var(--font-sans); font-size: .8125rem; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.chip:hover { border-color: var(--steel); background: var(--steel-soft); }

.assist__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); flex: none; }
.assist__form input {
  flex: 1; min-width: 0; font-family: var(--font-sans); font-size: .9375rem;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--ground); color: var(--ink);
}
.assist__form input:focus-visible { outline: none; border-color: var(--steel); box-shadow: 0 0 0 4px var(--steel-soft); }
.assist__send {
  width: 44px; height: 44px; border-radius: 12px; border: 0; flex: none;
  background: var(--btn-bg); color: var(--btn-ink); cursor: pointer;
  display: grid; place-items: center;
}
.assist__send .ic { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .assist { right: 14px; bottom: 78px; }
  .assist__btn { padding: 14px; border-radius: 50%; }
  .assist__btn span { display: none; }
  .assist__panel { width: calc(100vw - 28px); max-height: calc(100vh - 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .msg, .msg--typing i { animation: none; }
}

/* ---------- Referenz: Kinderarztpraxis Allouch ---------- */
.ref { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1100px) { .ref { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.ref__text { margin-top: 22px; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 46em; }
.ref__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ref__list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.ref__list .ic { width: 17px; height: 17px; margin-top: 4px; color: var(--steel); }
.ref__list b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.ref__list small { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 2px; }

.ref__meta {
  margin: 28px 0 0; padding: 18px 20px; display: grid; gap: 10px;
  background: var(--steel-soft); border-radius: var(--radius-lg);
}
.ref__meta div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: .875rem; }
.ref__meta dt { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .6875rem; color: var(--steel-ink); padding-top: 3px; }
.ref__meta dd { margin: 0; color: var(--ink); }
.ref__cta { margin-top: 24px; }

/* Browser-Rahmen um den echten Screenshot, im selben Geist wie das Handy */
.browser {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lift); overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.browser:hover { transform: translateY(-4px); }
.browser__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: var(--ground); border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser__url {
  flex: 1; text-align: center; font-size: .75rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 7px; padding: 5px 12px;
}
.browser__live {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-ink); display: inline-flex; align-items: center; gap: 6px;
}
.browser__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 3px var(--steel-soft); }

/* ============ Vorher / Nachher in der Referenz ============
   Zwei Bilder gleicher Groesse uebereinander. Das alte liegt oben und wird
   per clip-path bis zur Reglerstelle beschnitten - dadurch verschiebt sich
   nichts im Layout, es wird nur mehr oder weniger sichtbar.
   Bedient wird es ueber ein unsichtbares <input type=range>: das kann die
   Tastatur, der Screenreader und der Finger, ohne dass wir Zieh-Ereignisse
   selbst nachbauen muessen. */

.vgl {
  position: relative; background: #fff; line-height: 0; overflow: hidden;
  cursor: ew-resize;
  /* Hoch und runter bleibt Scrollen, seitwaerts zieht den Regler.
     Ohne das wischt der Finger am Bild vorbei, statt es zu teilen. */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vgl__bild { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-drag: none; }

.vgl__alt {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 45%)) 0 0);
}
.vgl__alt .vgl__bild { width: 100%; height: 100%; object-fit: cover; }

.vgl__marke {
  position: absolute; top: 12px; z-index: 3;
  font: 800 10px/1 var(--font-sans);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.vgl__marke--alt { left: 12px; background: rgba(17, 24, 39, .74); color: #fff; }
.vgl__marke--neu { right: 12px; background: var(--btn-bg); color: var(--btn-ink); }

.vgl__griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 45%);
  width: 2px; margin-left: -1px; z-index: 4; pointer-events: none;
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, .18);
  display: flex; align-items: center; justify-content: center;
}
.vgl__griff::before {
  content: ""; position: absolute;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow);
}
.vgl__griff .ic { position: relative; width: 20px; height: 20px; color: var(--steel); }

.vgl__regler {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; background: transparent;
  -webkit-appearance: none; appearance: none;
  touch-action: pan-y;
}
/* Sobald das Ziehen selbst gebaut ist (main.js setzt die Klasse), haelt
   sich das Range-Feld aus Finger und Maus heraus und bleibt nur noch fuer
   Tabulator und Pfeiltasten da. Sonst zieht beides gleichzeitig. */
.vgl--selbst .vgl__regler { pointer-events: none; }
.vgl__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.vgl__regler::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; }
.vgl__regler:focus { outline: none; }
.vgl.is-fokus .vgl__griff::before { box-shadow: 0 0 0 3px var(--signal), var(--shadow); }

@media (max-width: 640px) {
  .vgl__marke { top: 8px; font-size: 9px; padding: 5px 8px; }
  .vgl__marke--alt { left: 8px; }
  .vgl__marke--neu { right: 8px; }
  /* Am Handy nicht kleiner als 44 Pixel - das ist die Groesse, die ein
     Daumen sicher trifft. */
  .vgl__griff::before { width: 44px; height: 44px; }
  .vgl__griff .ic { width: 19px; height: 19px; }
}

/* ===================================================================
   Hoerproben (#hoeren)

   Alle Farben kommen aus den Variablen ganz oben, damit hell und dunkel
   ohne eigenen Block stimmen. Der Abspielknopf ist 44 px gross - Regel
   aus dem Haus-Stil, damit man ihn auf dem Handy trifft.
   =================================================================== */

.hoer { margin-top: 40px; }

.hoer__stimmen {
  display: inline-flex; gap: 4px;
  padding: 4px; margin-bottom: 20px;
  background: var(--line-soft);
  border-radius: 999px;
}
.hoer__stimme {
  min-height: 40px; padding: 9px 18px;
  font: inherit; font-size: .92rem; font-weight: 700;
  color: var(--ink-2);
  background: none; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.hoer__stimme:hover { color: var(--ink); }
.hoer__stimme.is-on {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow);
}
.hoer__stimme:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

.hoer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.hoer__satz {
  display: grid;
  grid-template-columns: 44px 1fr max-content;
  align-items: start; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.hoer__satz.is-playing { border-color: var(--signal-line); }

.hoer__play {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--btn-ink); background: var(--btn-bg);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: transform .18s var(--ease-out), opacity .18s var(--ease-out);
}
.hoer__play:hover { opacity: .88; }
.hoer__play:active { transform: scale(.94); }
.hoer__play:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }
.hoer__play .ic { width: 18px; height: 18px; }
/* Ohne flex/grid-Sperre quetscht die Zeile den Knopf auf 26 Pixel
   zusammen (am Handy am 27.08. gemessen). */
.hoer__play { position: relative; flex: none; }
.hoer__play--klein { width: 34px; height: 34px; }
.hoer__play--klein .ic { width: 14px; height: 14px; }
/* Auch hier eine unsichtbare Trefffläche von 44 Pixeln, damit der Daumen
   den kleinen Knopf sicher erwischt. */
.hoer__play--klein::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%;
}

.hoer__was { min-width: 0; }
.hoer__gewerk { display: block; font-size: 1.02rem; }
.hoer__lage {
  display: block; margin-top: 1px;
  font-size: .82rem; color: var(--ink-2);
}
.hoer__text {
  margin: 8px 0 0;
  font-family: var(--font-serif, Georgia, serif);
  font-size: .95rem; line-height: 1.5;
  color: var(--ink-2);
}
.hoer__dauer {
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-top: 12px;
}

/* ---- Ausblick: das nachgestellte Gespraech ---- */
.hoer__spaeter {
  margin-top: 40px; padding: 24px;
  background: var(--signal-soft);
  border: 1px solid var(--signal-line);
  border-radius: 16px;
}
.hoer__marke {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--signal-ink);
}
.hoer__marke .ic { width: 15px; height: 15px; }
.hoer__h3 { margin: 0 0 8px; font-size: 1.3rem; }
.hoer__lead { margin: 0 0 22px; max-width: 62ch; color: var(--ink-2); }

.hoer__dialog { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hoer__zug { display: flex; align-items: flex-start; gap: 10px; max-width: 90%; }
.hoer__zug--anrufer { flex-direction: row-reverse; margin-left: auto; }
.hoer__blase {
  margin: 0; padding: 11px 15px;
  font-size: .95rem; line-height: 1.5;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 16px 5px;
}
/* Der Assistent spricht links, in der Farbe des Hauses - so sieht man
   auf einen Blick, wer von beiden gerade dran ist. */
.hoer__zug--assistent .hoer__blase { border-left: 3px solid var(--steel); }
.hoer__zug--anrufer .hoer__blase {
  background: var(--steel-soft);
  border-color: transparent;
  border-radius: 16px 16px 5px 16px;
}
.hoer__wer {
  display: block; margin-bottom: 3px;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2);
}
.hoer__zug.is-playing .hoer__blase { border-color: var(--signal); }

@media (max-width: 640px) {
  .hoer__satz { grid-template-columns: 44px 1fr; }
  .hoer__dauer { grid-column: 2; padding-top: 4px; }
  .hoer__zug { max-width: 100%; }
  .hoer__spaeter { padding: 18px; }
}


/* ===================================================================
   28.08.2026 - Vertrauensleiste mit sechs Punkten
   =================================================================== */
.trust__list { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .trust__list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .trust__list { grid-template-columns: repeat(6, 1fr); } }

/* ===================================================================
   28.08.2026 - Zusagen (#zusagen): sechs Siegel
   Ein Siegel ist ein Ring mit gestricheltem Innenring, das Symbol in
   Nachtblau, die Erfolgsgarantie in Gold. Beim Einblenden federt der
   Ring einmal kurz an.
   =================================================================== */
.seals { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .seals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .seals { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.seal {
  position: relative; background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 28px 26px 26px;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.seal:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.seal::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px;
  background: var(--steel); border-radius: 0 0 3px 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out) .2s;
}
.seal.is-seen::before, html:not(.js) .seal::before { transform: scaleX(1); }
.seal--gold { border-color: var(--signal-line); }
.seal--gold::before { background: var(--signal); }

.seal__ring {
  position: relative; display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--steel-soft); color: var(--steel);
  border: 2px solid var(--steel);
}
html.js .seal__ring {
  transform: scale(.7); opacity: 0;
  transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .15s, opacity .4s .15s;
}
html.js .seal.is-seen .seal__ring { transform: none; opacity: 1; }
.seal__ring::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px dashed currentColor; opacity: .55;
}
.seal__ring .ic { width: 28px; height: 28px; }
.seal--gold .seal__ring { background: var(--signal-soft); color: var(--signal-ink); border-color: var(--signal); }
.seal__tag {
  position: absolute; right: -16px; bottom: -6px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  border: 2px solid var(--card);
}
.seal__title { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; margin-top: 20px; line-height: 1.3; }
.seal__text { font-size: .9375rem; color: var(--ink-2); line-height: 1.6; margin-top: 8px; }

.seals__foot {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; max-width: 760px;
  font-size: .9375rem; color: var(--ink-2); line-height: 1.55;
}
.seals__foot .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--steel); }

/* ---------- Garantie-Kasten unter den Preisen ---------- */
.garantie {
  margin-top: 22px; display: grid; gap: 22px; align-items: center;
  grid-template-columns: 1fr; padding: 26px 28px;
  background: var(--card); border: 1px solid var(--signal-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
@media (min-width: 760px)  { .garantie { grid-template-columns: 96px 1fr; } }
@media (min-width: 1100px) { .garantie { grid-template-columns: 96px 1fr auto; } }
.garantie__seal {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--signal-soft); color: var(--signal-ink); border: 2px solid var(--signal);
}
.garantie__seal::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px dashed currentColor; opacity: .55;
}
.garantie__seal .ic { width: 42px; height: 42px; }
.garantie h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.garantie p { font-size: .9375rem; color: var(--ink-2); line-height: 1.6; margin-top: 6px; max-width: 58em; }
.garantie__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.garantie__list span {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: .8125rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  background: var(--steel-soft); color: var(--steel-ink);
}
.garantie__list .ic { width: 14px; height: 14px; }
.garantie .btn { justify-self: start; }

/* ===================================================================
   28.08.2026 - Live-Vorfuehrung (#live): ein Anruf wird zum Termin
   Apple-Art: viel Ruhe, weiche Federung, ein Bild nach dem anderen.
   Der Ablauf haengt an data-phase (0..5) und vier Zustandsklassen
   (is-free, is-booked, is-ended, is-noted), die main.js setzt.
   Ohne JavaScript steht das fertige Bild da.
   =================================================================== */
.live {
  margin-top: 44px; position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--ground) 100%);
  border: 1px solid var(--line-soft); border-radius: 28px;
  padding: clamp(22px, 4vw, 48px);
  box-shadow: var(--shadow);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
.live__stage { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .live__stage { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
}
.live__phone { display: flex; justify-content: center; }
.live__right { display: grid; gap: 18px; min-width: 0; }
.live__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Das Handy ---- */
.call .phone__screen { position: relative; }
.live[data-phase="1"] .live__phone .phone { animation: ringShake 1s var(--ease-io) infinite; }
@keyframes ringShake {
  0%, 50%, 100% { transform: rotate(0); }
  10% { transform: rotate(-1.2deg); } 20% { transform: rotate(1.2deg); }
  30% { transform: rotate(-.8deg); }  40% { transform: rotate(.8deg); }
}

/* Eingehender Anruf: liegt am Anfang ueber dem ganzen Bildschirm */
.call__in {
  position: absolute; inset: 0; z-index: 3; border-radius: calc(var(--pw) * .13);
  background: linear-gradient(180deg, #1b2434 0%, #0d121a 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 64px 22px 34px;
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.call__in-label { font-size: 12px; opacity: .72; }
.call__in-num { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.call__in-place { font-size: 13px; opacity: .72; margin-top: 4px; }
.call__in-avatar { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; margin-top: 30px; }
.call__in-avatar .ic { width: 36px; height: 36px; opacity: .9; }
.call__rings { display: flex; gap: 8px; margin-top: 28px; }
.call__rings i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.live[data-phase="1"] .call__rings i { animation: ringDot .5s var(--ease-out) forwards; }
.live[data-phase="1"] .call__rings i:nth-child(2) { animation-delay: .9s; }
.live[data-phase="1"] .call__rings i:nth-child(3) { animation-delay: 1.8s; }
@keyframes ringDot { to { background: #fff; transform: scale(1.15); } }
.call__in-hint { font-size: 12px; opacity: .72; margin-top: 12px; max-width: 200px; line-height: 1.4; }
.call__in-btns { margin-top: auto; display: flex; gap: 60px; }
.call__in-btn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.call__in-btn .ic { width: 28px; height: 28px; }
.call__in-btn--no { background: #e5484d; }
.call__in-btn--yes { background: #30b15a; }
.live:not([data-phase="0"]):not([data-phase="1"]) .call__in {
  opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none;
}
html:not(.js) .call__in { display: none; }

/* Mitteilung von oben, wie auf dem iPhone */
.call__banner {
  position: absolute; z-index: 4; top: 10px; left: 10px; right: 10px;
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-lift);
  transform: translateY(-150%); opacity: 0;
  transition: transform .8s var(--spring), opacity .3s;
}
.live.is-noted .call__banner, html:not(.js) .call__banner { transform: none; opacity: 1; }
.call__banner-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; }
.call__banner-ico .ic { width: 20px; height: 20px; }
.call__banner-body { min-width: 0; }
.call__banner-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-2); }
.call__banner-head b { font-weight: 700; color: var(--ink); }
.call__banner-head i { font-style: normal; }
.call__banner-title { display: block; font-size: 12.5px; font-weight: 700; margin-top: 2px; line-height: 1.3; color: var(--ink); }
.call__banner-text { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; line-height: 1.35; }

/* Kopf des laufenden Gespraechs */
.call__head { padding: 6px 18px 0; text-align: center; flex: none; }
.call__avatar { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto; background: var(--steel-soft); color: var(--steel); display: grid; place-items: center; }
.call__avatar .ic { width: 26px; height: 26px; }
.call__name { display: block; font-size: 17px; font-weight: 700; margin-top: 8px; letter-spacing: -.01em; color: var(--ink); }
.call__status { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; min-height: 16px; }
.call__live, .call__done { display: inline-flex; align-items: center; gap: 5px; }
.call__done { display: none; }
.live.is-ended .call__done { display: inline-flex; }
.live.is-ended .call__live { display: none; }
.call__dot { width: 7px; height: 7px; border-radius: 50%; background: #30b15a; }
.call__timer { font-variant-numeric: tabular-nums; }
.call__wave { display: flex; gap: 3px; justify-content: center; align-items: center; height: 16px; margin-top: 5px; }
.call__wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--steel); opacity: .35; }
.call__wave i:nth-child(2) { --d: .12s; }
.call__wave i:nth-child(3) { --d: .24s; }
.call__wave i:nth-child(4) { --d: .36s; }
.call__wave i:nth-child(5) { --d: .48s; }
.live[data-phase="2"]:not(.is-ended) .call__wave i,
.live[data-phase="3"]:not(.is-ended) .call__wave i,
.live[data-phase="4"]:not(.is-ended) .call__wave i {
  animation: wave .9s ease-in-out infinite; animation-delay: var(--d, 0s); opacity: 1;
}
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 16px; } }

/* Die Mitschrift */
.call__log {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 8px 12px 6px;
}
.call__msg {
  max-width: 88%; padding: 7px 10px; border-radius: 15px;
  font-size: 12px; line-height: 1.36; color: var(--ink);
  background: var(--line-soft); align-self: flex-start; border-bottom-left-radius: 5px;
}
.call__msg small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }
.call__msg--tw { background: var(--steel-soft); }
.call__msg--k { align-self: flex-end; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
html.js .call__msg { display: none; }
html.js .call__msg.is-in { display: block; animation: msgIn .6s var(--spring) both; }
@keyframes msgIn { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

.call__foot { flex: none; display: flex; justify-content: center; gap: 14px; padding: 6px 0 10px; }
.call__foot i { width: 44px; height: 44px; border-radius: 50%; background: var(--line-soft); color: var(--ink); display: grid; place-items: center; transition: opacity .4s; }
.call__foot i .ic { width: 20px; height: 20px; }
.call__foot-end { background: #e5484d !important; color: #fff !important; }
.live.is-ended .call__foot i { opacity: .35; }

/* ---- Zwei Fenster rechts: Aufnahme und Kalender ---- */
.mac { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.mac__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.mac__dots { display: inline-flex; gap: 6px; flex: none; }
.mac__dots i { width: 10px; height: 10px; border-radius: 50%; }
.mac__dots i:nth-child(1) { background: #ff5f57; }
.mac__dots i:nth-child(2) { background: #febc2e; }
.mac__dots i:nth-child(3) { background: #28c840; }
.mac__title { font-size: .8125rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

.take__state {
  margin-left: auto; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--signal-soft); color: var(--signal-ink); white-space: nowrap;
  transition: background-color .4s, color .4s;
}
.live.is-ended .take__state { background: var(--steel-soft); color: var(--steel-ink); }
.take__rows { margin: 0; padding: 4px 16px; display: grid; }
.take__row {
  display: grid; grid-template-columns: 82px 1fr 22px; align-items: center; gap: 10px;
  padding: 9px 0; min-height: 44px; border-bottom: 1px solid var(--line-soft);
}
.take__row:last-child { border-bottom: 0; }
.take__row dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-2); }
.take__val { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); min-height: 1.4em; min-width: 0; overflow-wrap: anywhere; }
.take__val:empty::before { content: ""; display: block; width: 46%; height: 8px; border-radius: 4px; background: var(--line-soft); }
.take__row.is-typing .take__val::after {
  content: ""; display: inline-block; width: 2px; height: 1em; background: var(--steel);
  margin-left: 2px; vertical-align: -2px; animation: caret .8s steps(2) infinite;
}
@keyframes caret { to { opacity: 0; } }
.take__ok { width: 22px; height: 22px; border-radius: 50%; background: #30b15a; color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .5s var(--spring); }
.take__ok .ic { width: 13px; height: 13px; }
.take__row.is-done .take__ok, html:not(.js) .take__ok { transform: scale(1); }

.cal { position: relative; }
.cal__week { margin-left: auto; font-size: .75rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.cal__days {
  display: grid; grid-template-columns: 36px repeat(5, 1fr); padding: 8px 12px 4px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); font-weight: 700; text-align: center;
}
.cal__days b { display: block; font-size: 1rem; letter-spacing: 0; color: var(--ink); font-weight: 700; margin-top: 1px; }
.cal__day--ziel b { color: var(--steel); }
.cal__grid { position: relative; display: grid; grid-template-columns: 36px repeat(5, 1fr); grid-auto-rows: 40px; padding: 0 12px 12px; }
.cal__time { grid-column: 1; font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; align-self: start; margin-top: -6px; }
.cal__cell { border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.cal__cell--ziel { position: relative; }
.cal__cell--ziel::after {
  content: "frei"; position: absolute; inset: 3px; border-radius: 8px;
  border: 1.5px dashed var(--signal); color: var(--signal-ink);
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
  opacity: 0; transition: opacity .3s;
}
.live.is-free .cal__cell--ziel::after { opacity: 1; animation: freiPulse 1.2s ease-in-out infinite; }
@keyframes freiPulse { 50% { background: var(--signal-soft); } }
.cal__chip {
  margin: 3px; padding: 4px 7px; border-radius: 7px; min-width: 0;
  background: var(--steel-soft); border-left: 3px solid var(--steel);
  font-size: .72rem; font-weight: 700; color: var(--steel-ink); line-height: 1.25;
  overflow: hidden; align-self: stretch; display: flex; flex-direction: column; justify-content: center;
}
.cal__chip b { display: block; font-weight: 800; }
.cal__chip--neu {
  background: var(--signal-soft); border-left-color: var(--signal); color: var(--signal-ink); z-index: 1;
  transform: scale(.5); opacity: 0;
  transition: transform .7s var(--spring), opacity .25s;
}
.live.is-booked .cal__chip--neu, html:not(.js) .cal__chip--neu { transform: none; opacity: 1; }
.cal__toast {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px;
  background: var(--ink); color: var(--ground); font-size: .75rem; font-weight: 700;
  transform: translateY(8px); opacity: 0;
  transition: transform .5s var(--spring), opacity .3s;
}
.cal__toast .ic { width: 13px; height: 13px; }
.live.is-booked .cal__toast, html:not(.js) .cal__toast { transform: none; opacity: 1; }
.cal__c2 { grid-column: 2; } .cal__c3 { grid-column: 3; } .cal__c4 { grid-column: 4; }
.cal__c5 { grid-column: 5; } .cal__c6 { grid-column: 6; }
/* Schmale Schirme: nur Mittwoch bis Freitag, sonst wird jeder Eintrag abgeschnitten */
@media (max-width: 600px) {
  .live { padding: 18px 14px 22px; border-radius: 20px; }
  .cal__week { display: none; }
  .cal__days, .cal__grid { grid-template-columns: 30px repeat(3, 1fr); }
  .cal__days span:nth-child(2), .cal__days span:nth-child(3), .cal__c2, .cal__c3 { display: none; }
  .cal__c4 { grid-column: 2; } .cal__c5 { grid-column: 3; } .cal__c6 { grid-column: 4; }
  .take__state { white-space: normal; text-align: right; max-width: 46%; line-height: 1.3; }
  .take__row { grid-template-columns: 72px 1fr 22px; }
}

/* ---- Die fuenf Schritte unter der Buehne ---- */
.live__steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 760px) {
  .live__steps { grid-template-columns: repeat(2, 1fr); }
  .live__steps li:last-child { grid-column: 1 / -1; }
}
.live__step {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-soft);
  font-size: .8125rem; font-weight: 600; color: var(--ink-2); line-height: 1.25;
  transition: background-color .35s, color .35s, border-color .35s;
}
.live__step i {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; flex: none;
  transition: background-color .35s, border-color .35s, color .35s;
}
.live__step.is-on { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.live__step.is-on i { border-color: rgba(255,255,255,.6); color: #fff; }
.live__step.is-done { color: var(--ink); }
.live__step.is-done i { background: #30b15a; border-color: #30b15a; color: #fff; }
html:not(.js) .live__step { color: var(--ink); }

.live__foot { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 22px; }
.live__replay .ic { width: 16px; height: 16px; }
.live__note { display: flex; gap: 9px; align-items: flex-start; font-size: .8125rem; color: var(--ink-2); line-height: 1.5; max-width: 640px; }
.live__note .ic { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--signal-ink); }
html:not(.js) .live__replay { display: none; }

@media (prefers-reduced-motion: reduce) {
  .live[data-phase="1"] .live__phone .phone,
  .live .call__wave i, .live.is-free .cal__cell--ziel::after { animation: none; }
}

/* ===================================================================
   HERO, Fassung vom 29.08.2026: die Buehne erklaert, nicht ein Satz

   Vorher stand hier links ein Werbesatz ("Wer nicht rangeht, verliert
   den Kunden") und rechts das Handy. Devin: der Satz ist zu generisch,
   man merkt in zehn Sekunden, dass er von einer Maschine stammt.

   Der Satz ist ersatzlos weg. An seine Stelle tritt kein zweiter Satz,
   sondern ein Ablauf: Es klingelt, keiner geht ran, fuenf verpasste
   Anrufe stapeln sich - und dann fuellen sich dieselben fuenf Zeilen
   mit Namen und Anliegen. Wer das einmal sieht, braucht die Erklaerung
   nicht mehr.

   Die Ueberschrift gibt es weiterhin, sie steht nur nicht mehr im Bild:
   Vorleser und Suchmaschinen bekommen sie ueber .nur-vorlesen.
   =================================================================== */

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}



/* Ein leiser Hinweis unter der Buehne, dass man es noch einmal sehen
   kann. Er erscheint erst nach dem Durchlauf. */
.stage__again {
  margin: 0; padding: 9px 15px;
  background: none; border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  cursor: pointer;
}
.stage__again .ic { width: 14px; height: 14px; }
.stage__again.is-da { opacity: 1; visibility: visible; }
.stage__again:hover { color: var(--ink); border-color: var(--ink-2); }

/* Wer Bewegung abgeschaltet hat, sieht sofort das Ergebnis: den fertig
   ausgefuellten Zettel, ohne Welle und ohne Aufbau. Das ist keine
   Notloesung, sondern dieselbe Aussage ohne Zeitachse. */
@media (prefers-reduced-motion: reduce) {
  .zettel__strich { opacity: 0; }
  .zettel__zeile dd b { opacity: 1; transform: none; }
  .zettel__haken { opacity: 1; transform: none; }
  .stage__again { opacity: 1; visibility: visible; }
}

/* Schmale Schirme. Das Handy gibt es nur noch in der Vorfuehrung
   weiter unten; es wird kleiner, damit es ganz ins Bild passt.
   Der Zettel rueckt enger zusammen: schmalere Beschriftungsspalte,
   weniger Rand, kleinere Schrift. Der Satz braucht dort bis zu drei
   Zeilen - deshalb mehr Mindesthoehe, sonst springt der Zettel bei
   jedem Wechsel um eine Zeilenhoehe. */
@media (max-width: 560px) {
  .phone { --pw: 268px; }
  /* Bei 268 px Breite ist der Bildschirm 541 px hoch; der Inhalt stiess mit 2 px an. */
  .phone__home { margin: 2px auto 6px; }

  .zettel__kopf   { padding: 12px 14px; gap: 9px; }
  .zettel__zeilen { padding-inline: 14px; }
  .zettel__fuss   { padding-inline: 14px; }
  .zettel__stimme { padding: 18px 14px 16px; }
  .zettel__satz   { font-size: 1rem; min-height: 4.5em; }
  /* Schmalere Beschriftungsspalte und engere Abstaende, damit der
     laengste Wert („Tropft unter der Spuele") nicht als „Tropft unter
     der S..." abgeschnitten wird. Gemessen auf 320, 360, 375 und 430. */
  .zettel__zeile  { grid-template-columns: 66px 1fr 20px; gap: 8px; padding: 10px 0; }
  .zettel__zeile dt   { font-size: .6875rem; letter-spacing: .04em; }
  .zettel__zeile dd b { font-size: .9375rem; }
  .zettel__welle  { gap: 3px; }
}

/* Auf dem Handy bricht der Kopf um: Uhrzeit und Marke oben, wer gerade
   spricht in einer eigenen Zeile darunter. Sonst blieben neben der
   breiten Marke keine 130 Pixel, und die Texte wurden gekuerzt -
   gemessen auf 320, 360 und 375: „Anr...", „DITKO ist rangega...".
   Die Schrift zu verkleinern kam nicht in Frage, die Zielgruppe liest
   das auf der Baustelle.

   Warum 460 und nicht 340: gekuerzt wurde nicht nur „Anruf beendet",
   sondern vor allem der laengste Kopftext „DITKO ist rangegangen", und
   der passt bis hinauf zum 430er Bildschirm nicht neben die Marke.
   Die zweite Zeile ist immer da, auch wenn nur „DITKO" darin steht -
   deshalb springt der Zettel bei keinem Wechsel. */
@media (max-width: 460px) {
  .zettel__kopf  { flex-wrap: wrap; row-gap: 5px; }
  .zettel__zeit  { order: 1; }
  .zettel__marke { order: 2; margin-left: auto; }
  .zettel__wer   { order: 3; flex: 1 0 100%; }
}

/* Die schmalste Klasse (320 Pixel, iPhone SE der ersten Generation).
   Dort blieben fuer den Wert nur 144 Pixel, „Tropft unter der Spuele"
   braucht 159 - gemessen, nicht geschaetzt. Statt zu kuerzen rueckt die
   Beschriftung ueber den Wert, der bekommt damit die volle Zeile.
   Der Aufbau ist fuer jede der vier Zeilen gleich, also springt nichts. */
@media (max-width: 340px) {
  .zettel__zeile    { grid-template-columns: 1fr 20px; row-gap: 1px; }
  .zettel__zeile dt { grid-column: 1 / -1; }
}

/* ===================================================================
   SEITEN UND MENUE, 29.08.2026

   Vorher lag alles auf einer einzigen langen Seite und die Navigation
   sprang nur zu Ankern. Devin wollte es sortiert, mit Klappmenue.

   Warum das trotzdem EINE Datei bleibt: Devin sieht die Seite ueber
   einen Artifact-Link, und ein Artifact ist genau eine Datei. Echte
   Unterseiten wuerden dort ins Leere zeigen. Die Abschnitte tragen
   deshalb data-seite und werden ein- und ausgeblendet; nach aussen
   verhaelt es sich wie fuenf Seiten, mit eigener Adresse (#/preise)
   und funktionierendem Zurueck-Knopf.

   Alte Anker (#preis, #kontakt) funktionieren weiter: Das Skript sucht,
   auf welcher Seite der Abschnitt liegt, schaltet dorthin und scrollt.
   =================================================================== */

/* Ohne JavaScript bleibt alles sichtbar - eine lange Seite, wie vorher.
   Erst wenn geschaltet werden kann, wird auch versteckt. */
html.js [data-seite] { display: none; }
html.js [data-seite].is-an { display: block; }

/* ---- Klappmenue ---- */
.menu { position: relative; }
.menu__knopf {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--ink); background: none; border: 0; cursor: pointer;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.menu__knopf:hover { border-bottom-color: var(--signal); }
.menu__pfeil {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease-out);
}
.menu__knopf[aria-expanded="true"] .menu__pfeil { transform: rotate(180deg); }

.menu__klappe {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 50;
  min-width: 250px; padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 18px 40px -18px rgba(17, 24, 39, .4);
}
.menu__klappe a {
  display: block; padding: 10px 12px;
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 0; border-radius: 2px;
}
.menu__klappe a:hover { background: var(--steel-soft); color: var(--steel-ink); }

/* Die Seite, auf der man gerade steht, traegt den goldenen Strich. */
.top__nav a.is-hier,
.menu__knopf.is-hier { border-bottom-color: var(--signal); color: var(--signal-ink); }

/* ---- Der Menueknopf fuer schmale Schirme ----
   Drei Striche, die sich beim Oeffnen zum Kreuz legen. Ab 1000 Pixel
   steht die Navigation ohnehin ausgeschrieben da, dann faellt er weg. */
.nav-knopf {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer;
}
.nav-knopf span {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease-out), opacity .2s;
}
.nav-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-knopf { display: none; } }

/* Auf dem Handy klappt die Navigation unter der Kopfzeile auf: eine
   Liste, keine schwebenden Kaesten. Ein Klappmenue im Klappmenue waere
   auf einer Daumenbreite nicht zu treffen, deshalb stehen die
   Unterpunkte hier eingerueckt gleich mit da. */
@media (max-width: 999px) {
  .top__nav[data-offen="ja"] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 8px 16px 20px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -20px rgba(17, 24, 39, .4);
  }
  .top__nav[data-offen="ja"] > a,
  .top__nav[data-offen="ja"] .menu__knopf {
    padding: 14px 4px; min-height: 48px; width: 100%;
    border-bottom: 1px solid var(--line-soft);
    justify-content: space-between;
  }
  .top__nav[data-offen="ja"] .menu { width: 100%; }
  .top__nav[data-offen="ja"] .menu__klappe {
    position: static; min-width: 0; padding: 2px 0 8px 14px;
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .top__nav[data-offen="ja"] .menu__klappe a {
    padding: 11px 8px; min-height: 44px; color: var(--ink-2);
    display: flex; align-items: center;
  }
  /* Aufgeklappt wird auf dem Handy nicht per Klick, sondern es steht
     alles offen - sonst braucht man zwei Griffe fuer ein Ziel. */
  .top__nav[data-offen="ja"] .menu__klappe[hidden] { display: block; }
  .top__nav[data-offen="ja"] .menu__pfeil { display: none; }
}

/* Beim Seitenwechsel blenden die Abschnitte kurz ein. Kein Sprung,
   aber auch keine Show - der Wechsel soll sich anfuehlen wie eine
   umgeblaetterte Seite. */
html.js [data-seite].is-an { animation: seiteRein .32s var(--ease-out) both; }
@keyframes seiteRein { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  html.js [data-seite].is-an { animation: none; }
}

/* ---------- Siegel: Flaggenfarben, dezent, in allen drei Theme-Zustaenden ---------- */
:root { --flag-schwarz: #1f1f1d; --flag-rot: #c2372a; --flag-gold: #d7a12b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --flag-schwarz: #a3a39c; --flag-rot: #e0705a; --flag-gold: #e2b45a; } }
:root[data-theme="dark"] { --flag-schwarz: #a3a39c; --flag-rot: #e0705a; --flag-gold: #e2b45a; }
.siegel {
  display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center;
  margin-top: 30px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink);
}
.siegel__bild { display: block; padding-right: 30px; border-right: 1px solid var(--line); }
.siegel b { display: block; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 6px; }
.siegel p { margin: 0; color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 560px) { .siegel { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ===================================================================
   MARKE UND FUNNEL, 04.09.2026

   Neues Logo nach dem Muster deutscher Verbaende (Vorbild DKFV):
   fette Wortmarke, daneben ein schraeges Band in Schwarz-Rot-Gold,
   rechts die Langform in drei Zeilen Versalien. Alles CSS, keine
   Bilddatei. Die Groesse haengt an font-size des Wurzelelements .logo,
   alles Innere ist in em gesetzt - eine Zahl skaliert das Ganze.
   =================================================================== */
.logo {
  display: inline-flex; align-items: center; gap: .5em;
  text-decoration: none; color: var(--ink); font-size: 36px; line-height: 1;
  white-space: nowrap;
}
.logo__wort {
  display: inline-flex; align-items: center;
  font-weight: 800; font-stretch: 100%; letter-spacing: -.045em; line-height: 1;
}
.logo__flagge {
  display: inline-block; width: .36em; height: .72em; margin-left: .1em;
  transform: skewX(-18deg); border-radius: .02em;
  background: linear-gradient(90deg,
    var(--flag-schwarz) 0 33.4%, var(--flag-rot) 33.4% 66.7%, var(--flag-gold) 66.7% 100%);
}
.logo__lang {
  display: flex; flex-direction: column; justify-content: center;
  font-size: .235em; line-height: 1.2; font-weight: 700; letter-spacing: .075em;
  text-transform: uppercase; color: var(--ink-2); font-stretch: 100%;
}
.logo--fuss { font-size: 40px; }
.logo--gross { font-size: 52px; }
@media (max-width: 640px) {
  .logo { font-size: 30px; }
  .logo--gross { font-size: 40px; }
}
@media (max-width: 380px) { .logo__lang { display: none; } }
.top .logo:hover .logo__wort { color: var(--steel-ink); }

/* ---------- Hero: Satz links, Zettel rechts ---------- */
.hero__title {
  font-size: clamp(2.5rem, 4.8vw, 4.2rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.02; margin-top: 22px; text-wrap: balance;
}
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w i { display: inline-block; font-style: normal; }
html.js .hero__title .w i {
  transform: translateY(108%);
  animation: wortHoch 1s var(--ease-out) forwards;
  animation-delay: calc(.35s + var(--w, 0) * .18s);
}
@keyframes wortHoch { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .hero__title .w i { transform: none; animation: none; } }
.hero__title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  letter-spacing: -.01em; color: var(--steel-ink);
}
.hero__lead {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55;
  color: var(--ink-2); margin-top: 22px; max-width: 32em;
}
.hero__cta { margin-top: 32px; }
.btn--big { padding: 16px 26px; font-size: 1.0625rem; }
.hero__trust {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust .ic { width: 16px; height: 16px; color: var(--steel); }

.hero__buehne { display: grid; justify-items: center; gap: 14px; }
html.js .hero__buehne .stage__again { margin-top: 0; }
.hero__stage { width: 100%; }
@media (max-width: 999px) {
  .hero { padding-top: clamp(40px, 6vw, 72px); }
}

/* ---------- Teaser: zusehen und anhoeren (Startseite) ---------- */
.band--slim { padding-block: 0 clamp(48px, 6vw, 80px); }
.teaser { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .teaser { grid-template-columns: 1fr 1fr; gap: 22px; } }
.teaser__card {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center;
  padding: 22px 24px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s;
}
.teaser__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--steel); }
.teaser__ico {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-ink);
}
.teaser__ico .ic { width: 22px; height: 22px; }
.teaser__body b { display: block; font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; }
.teaser__body small { display: block; font-size: .875rem; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.teaser__go {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9375rem; font-weight: 700; color: var(--steel-ink); white-space: nowrap;
}
.teaser__go .ic { width: 17px; height: 17px; transition: transform .25s var(--ease-out); }
.teaser__card:hover .teaser__go .ic { transform: translateX(3px); }
@media (max-width: 560px) {
  .teaser__card { grid-template-columns: 44px 1fr; }
  .teaser__ico { width: 44px; height: 44px; }
  .teaser__go { grid-column: 2; }
}

/* ---------- Der naechste Schritt: dunkles Band vor dem Fuss ---------- */
.cta {
  background: var(--bar-bg); color: var(--bar-ink);
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.cta__inner { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cta__inner { grid-template-columns: 1.3fr .7fr; gap: 48px; } }
.eyebrow--hell { color: #d8b46a; }
.eyebrow--hell::before { background: #d8b46a; }
.cta__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.03em;
  margin-top: 16px; text-wrap: balance; color: #fff;
}
.cta__text { margin-top: 14px; font-size: 1.0625rem; line-height: 1.6; color: #b9c0cb; max-width: 40em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .cta__actions { justify-content: flex-end; } }
.btn--hell { background: #fff; color: #0f1622; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.btn--hell:hover { transform: translateY(-1px); background: #f1efe9; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }

/* ---------- Fusszeile mit Marke und Spalten ---------- */
.foot__grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } }
.foot__marke p { margin-top: 18px; max-width: 34em; line-height: 1.6; }
.foot__nav { display: flex; flex-direction: column; gap: 9px; }
.foot__nav b { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.foot__nav a { text-decoration: none; color: var(--ink-2); }
.foot__nav a:hover { color: var(--steel-ink); text-decoration: underline; }
.foot__unten {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: .8125rem;
}

/* Kontaktkarte: die Kachel bringt ihre Farbe selbst mit */
.direct__ico--logo { background: none; }
.direct__ico--logo .ic { width: 42px; height: 42px; }

/* ===================================================================
   UMBAU 2, 04.09.2026: Reiter im Hero, Leistungen, Aufklapper, FAQ
   =================================================================== */

/* ---------- Aufklapper: Hoehe animiert ueber grid-template-rows ---------- */
.klapp {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.klapp.is-offen { grid-template-rows: 1fr; }
.klapp__inhalt { min-height: 0; overflow: hidden; }
.klapp__inhalt > p { margin: 0; }
.klapp__pfeil { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
[data-klapp][aria-expanded="true"] .klapp__pfeil { transform: rotate(180deg); }

.klapp__knopf {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding: 0; background: none; border: 0;
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--steel-ink);
  cursor: pointer; border-bottom: 2px solid transparent; transition: border-color .2s;
}
.klapp__knopf:hover { border-bottom-color: var(--steel); }
.klapp__knopf--klein { font-size: .8125rem; margin-top: 12px; }
.klapp__knopf + .klapp .klapp__inhalt > * { padding-top: 12px; }

/* Eine Zeile, die sich aufklappt (Paket-Bedingungen) */
.klapp__zeile {
  display: grid; grid-template-columns: 18px 1fr 16px; gap: 11px; align-items: center;
  width: 100%; padding: 14px 0; background: none; border: 0; text-align: left;
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: color .2s;
}
.klapp__zeile:hover { color: var(--steel-ink); }
.klapp__zeile > .ic:first-child { width: 16px; height: 16px; color: var(--steel-ink); }

/* ---------- Hero: drei Reiter, drei Tafeln in einer Zelle ---------- */
.hero__tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
}
.hero__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 0; background: none;
  font: inherit; font-size: .875rem; font-weight: 700; color: var(--ink-2);
  cursor: pointer; transition: background-color .25s, color .25s;
}
.hero__tab .ic { width: 15px; height: 15px; }
.hero__tab:hover { color: var(--ink); }
.hero__tab.is-on { background: var(--btn-bg); color: var(--btn-ink); }
.hero__panels { position: relative; width: 100%; }
/* Nur die sichtbare Tafel steht im Fluss und gibt die Hoehe vor. Die
   anderen liegen absolut darueber - sonst bestimmt die hoechste Tafel
   die Hoehe, und unter dem Zettel bleibt am Handy ein leerer Streifen. */
.hero__panel {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; justify-items: center; align-content: start; align-items: start; gap: 14px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s .35s;
}
.hero__panel.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1000px) { .hero__panels { min-height: 540px; } }
html:not(.js) .hero__panel { position: static; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .hero__tabs { display: none; }
.hero__buehne { gap: 22px; }
@media (max-width: 420px) {
  .hero__tab { padding: 9px 12px; font-size: .8125rem; }
  .hero__tab .ic { display: none; }
}

/* Website-Tafel: Browser-Rahmen mit echtem Bild */
.browser--hero { width: 100%; max-width: 620px; }
.browser--hero:hover { transform: none; }
.browser__bild { display: block; width: 100%; height: auto; }

/* Automatisierungs-Tafel: ein Ablauf, der Schritt fuer Schritt abhakt */
.flow {
  width: 100%; max-width: 620px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.flow__kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--surface);
  font-size: .9375rem; font-weight: 800;
}
.flow__marke {
  font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-ink); background: var(--steel-soft); padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.flow__liste { list-style: none; margin: 0; padding: 6px 18px; }
.flow__liste li {
  display: grid; grid-template-columns: 36px 1fr 24px; gap: 14px; align-items: center;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
  opacity: .3; transform: translateX(-8px);
  transition: opacity .5s, transform .55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .32s + .15s);
}
.flow__liste li:first-child { border-top: 0; }
.hero__panel.is-on .flow__liste li { opacity: 1; transform: none; }
.flow__ico {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--steel-soft); color: var(--steel);
}
.flow__ico .ic { width: 17px; height: 17px; }
.flow__liste b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.flow__liste small { display: block; font-size: .8125rem; color: var(--ink-2); margin-top: 2px; }
.flow__ok {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-ink);
  transform: scale(0); transition: transform .45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * .32s + .45s);
}
.flow__ok .ic { width: 13px; height: 13px; }
.hero__panel.is-on .flow__ok { transform: scale(1); }
.flow__fuss {
  padding: 12px 18px; background: var(--steel-soft); text-align: center;
  font-size: .8125rem; font-weight: 700; color: var(--steel-ink);
}
@media (prefers-reduced-motion: reduce) {
  .flow__liste li, .flow__ok { transition: none; opacity: 1; transform: none; }
}

/* ---------- Leistungen: drei Karten mit Aufklapper ---------- */
.dienste { display: grid; gap: 24px; margin-top: 64px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dienste { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.dienst {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 30px 30px; display: flex; flex-direction: column; position: relative;
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s;
}
.dienst:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--steel); }
.dienst__kopf { display: flex; justify-content: space-between; align-items: flex-start; }
.dienst__ico {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-ink);
  transition: transform .4s var(--ease-out);
}
.dienst:hover .dienst__ico { transform: rotate(-6deg) scale(1.05); }
.dienst__ico .ic { width: 24px; height: 24px; }
.dienst__num {
  font-size: .8125rem; font-weight: 800; letter-spacing: .12em; color: var(--signal-ink);
  font-variant-numeric: tabular-nums;
}
.dienst__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; margin-top: 24px; }
.dienst__text { font-size: 1rem; color: var(--ink-2); margin-top: 10px; line-height: 1.6; }
.dienst__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.dienst__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.dienst__list .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--steel); }
.dienst .klapp__inhalt p { font-size: .9375rem; color: var(--ink-2); line-height: 1.6; }
.dienst__links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px !important; }
.dienst__links a { font-size: .9375rem; font-weight: 700; color: var(--steel-ink); }

/* ---------- Haeufige Fragen ---------- */
.faq { margin-top: 48px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__frage {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  width: 100%; padding: 22px 0; background: none; border: 0; text-align: left;
  font: inherit; font-size: 1.125rem; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: color .2s;
}
.faq__frage:hover { color: var(--steel-ink); }
.faq__frage .klapp__pfeil { width: 18px; height: 18px; color: var(--steel); }
.faq .klapp__inhalt p { padding: 0 0 22px; max-width: 60ch; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }

/* Ortsangabe in der Hero-Eyebrow erst, wenn sie in eine Zeile passt */
.nur-breit { display: none; }
@media (min-width: 600px) { .nur-breit { display: inline; } }

/* ===================================================================
   UMBAU 3, 04.09.2026: Leistungen als eigene Abschnitte
   =================================================================== */
.sec-head .dienst__list { margin-top: 26px; }
.sec-head .dienst__list li { font-size: 1rem; }
.sec-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sec-head--breit { max-width: 900px; }
.dienst__list--zeile { display: flex; flex-wrap: wrap; gap: 10px 28px; }

/* Die drei Zahlen unter dem Zeitstrahl */
.zahlen { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.zahlen__titel { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.zahlen__lead { margin-top: 8px; font-size: 1rem; color: var(--ink-2); max-width: 60ch; }
.zahlen .stats { margin-top: 32px; }

/* Referenz als Fall im Website-Abschnitt */
.ref__fall {
  margin-top: 34px; padding: 26px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.ref__label {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal-ink);
}
.ref__titel { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.ref__fall .ref__text { margin-top: 12px; }
.ref__fall .ref__cta { margin-top: 20px; }
@media (max-width: 560px) { .ref__fall { padding: 20px 18px; } }

/* E-Mail-Zeile in der Kontaktkarte */
.direct__link { color: var(--ink); text-decoration: none; word-break: break-all; }
.direct__link:hover { color: var(--steel-ink); text-decoration: underline; }

/* Foto statt Monogramm im Abschnitt Erfahrung */
.me__photo--foto { padding: 0; display: block; background: var(--card); }
.me__photo--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }