/* ═══════════════════════════════════════════════════════════════════════
   FEINSCHLIFF · 31.10.2026
   Ziel: weicher, ruhiger, hochwertiger – Farben & Schriften unverändert.
   Konzept „Passepartout“: Die Kalk-Flächen liegen als weich gerundete Tafeln
   auf weißem Grund, Papier (Exposé-Seiten) bleibt Papier, Bedienelemente
   bekommen weiche Kanten und getönte, mehrstufige Schatten.
   Alles in diesem Block – zum Zurückdrehen einfach den Block entfernen.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --r-ctl: 10px;
  --r-card: 18px;
  --r-media: 16px;
  --r-paper: 3px;
  --r-panel: clamp(20px, 2.4vw, 32px);
  --inset: clamp(8px, 1.05vw, 16px);
  --hair: rgba(24, 32, 43, .085);
  --sh-paper: 0 1px 1px rgba(24, 32, 43, .04), 0 3px 6px -2px rgba(24, 32, 43, .06), 0 26px 44px -26px rgba(24, 32, 43, .34);
  --sh-float: 0 1px 2px rgba(24, 32, 43, .04), 0 10px 24px -14px rgba(24, 32, 43, .16), 0 34px 64px -34px rgba(24, 32, 43, .26);
  --sh-lift: 0 1px 2px rgba(24, 32, 43, .04), 0 16px 32px -16px rgba(24, 32, 43, .2), 0 48px 84px -40px rgba(24, 32, 43, .32);
  --sh-btn: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(26, 40, 148, .28), 0 10px 22px -12px rgba(38, 57, 201, .62);
  --sh-btn-h: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(26, 40, 148, .22), 0 16px 32px -14px rgba(38, 57, 201, .7);
}

/* ---------- Grund: Weiß als Passepartout ---------- */
body { background: var(--papier); }
::selection { background: color-mix(in srgb, var(--kobalt) 16%, #fff); color: var(--tusche); }

/* Tafeln: alle Kalk-Abschnitte schweben mit weichem Rand auf Weiß */
#pdf, #vergleich, .tm, #zitat {
  margin-inline: var(--inset);
  border-radius: var(--r-panel);
  background: var(--kalk);
}
#zitat { margin-bottom: var(--inset); }
#faq + .tm { border-top: 0; }

/* Preis + Fußzeile: eine dunkle Tafel */
#preis {
  margin-inline: var(--inset);
  border-radius: var(--r-panel);
  background:
    radial-gradient(55% 60% at 8% 0%, rgba(38, 57, 201, .26), rgba(38, 57, 201, 0) 72%),
    var(--nacht);
}
main > #preis:last-child, #preis:has(+ .ef-ft) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tm + #preis { margin-top: var(--inset); }
.ef-ft {
  margin: 0 var(--inset) var(--inset);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
}
.ef-ft-bottom { border-top-color: rgba(255, 255, 255, .08); }

/* ---------- Kopfzeile: schwebende Glas-Box statt Vollbreite ---------- */
.ef-hd {
  --isl-px: 16px;                                   /* Innenabstand links → Logo bündig mit dem Inhalt */
  --isl-m: max(8px, calc(var(--ef-gutter) - var(--isl-px)));
  --hd-drop: calc(var(--inset) + clamp(0px, .5vw, 8px));
  padding-top: 8px;                                 /* 8 + 64 = 72 px wie bisher */
  pointer-events: none;                             /* die freien Seiten blockieren keine Klicks */
}
.ef-hd.is-scrolled, .ef-hd.is-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.ef-hd-in {
  pointer-events: auto;
  box-sizing: border-box;
  width: min(calc(100% - 2 * var(--isl-m)), calc(var(--ef-wrap) - 2 * var(--ef-gutter) + 2 * var(--isl-px)));
  max-width: none;
  height: 64px;
  margin-inline: auto;
  padding: 0 8px 0 var(--isl-px);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 0 0 1px rgba(24, 32, 43, 0), 0 12px 32px -16px rgba(24, 32, 43, 0);
}
/* Übergang erst nach der ersten Berührung/Scroll-Geste – beim Laden (auch mit wiederhergestellter
   Scroll-Position) springt die Box sofort an ihren Platz statt sichtbar nachzurutschen */
html.hd-on .ef-hd-in {
  transition:
    transform .55s var(--ease-soft),
    background-color .45s var(--ease-soft),
    box-shadow .45s var(--ease-soft);
}
.ef-hd:not(.is-scrolled):not(.is-open) .ef-hd-in { transform: translateY(var(--hd-drop)); }
.ef-hd.is-scrolled .ef-hd-in,
.ef-hd.is-open .ef-hd-in {
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px rgba(24, 32, 43, .07), 0 2px 6px -2px rgba(24, 32, 43, .06), 0 16px 36px -18px rgba(24, 32, 43, .34);
}
.ef-hd-links a { transition: color .3s var(--ease-soft); }
@media (max-width: 1020px) {
  .ef-hd-menu {
    pointer-events: auto;
    top: 78px;
    left: var(--isl-m);
    right: var(--isl-m);
    padding: 6px 18px 18px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 32, 43, .07), 0 30px 60px -30px rgba(24, 32, 43, .4);
  }
  .ef-hd-menu a { border-bottom-color: var(--hair); }
  .ef-hd-menu .ef-btn { border-radius: var(--r-ctl); }
}

/* ---------- Schrift: gleiche Familien, feiner gesetzt ---------- */
.h1, .h2, .h3 { letter-spacing: -.026em; }
.h2 { font-weight: 590; }
.h3 { font-weight: 580; }
.tm-h2 { font-weight: 590; letter-spacing: -.026em; }
.copy, .lead { text-wrap: pretty; }

/* Menschliche Stimmen in der Exposé-Schrift (Cormorant – wie in den Exposés selbst) */
.tm-quote {
  font-family: var(--serif);
  font-weight: 500;
  font-stretch: normal;
  font-size: clamp(1.42rem, 2vw, 1.78rem);
  line-height: 1.26;
  letter-spacing: -.005em;
}
.tm-quote mark { color: var(--kobalt); }
.fi-big, #zitat .fi-big {
  font-family: var(--serif);
  font-weight: 500;
  font-stretch: normal;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}

/* ---------- Knöpfe & Felder ---------- */
.btn, .ef-btn, .hero-btn, .reg-btn {
  border-radius: var(--r-ctl);
  transition:
    background-color .35s var(--ease-soft),
    box-shadow .45s var(--ease-soft),
    transform .45s var(--ease-soft);
}
.btn--primary, .ef-btn, .hero-btn {
  box-shadow: var(--sh-btn);
}
.btn--primary:hover, .ef-btn:hover, .hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-btn-h);
}
.btn--primary:active, .ef-btn:active, .hero-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(26, 40, 148, .3);
  transition-duration: .12s;
}
.hero-btn { padding: 1.12em 2.3em; }
.ef-hd .ef-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(26, 40, 148, .25), 0 6px 14px -8px rgba(38, 57, 201, .55); }
.ef-ft .ef-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px -12px rgba(38, 57, 201, .8); }

.reg-input {
  border-color: rgba(24, 32, 43, .16);
  border-radius: var(--r-ctl);
  transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}
.reg-input:hover { border-color: rgba(24, 32, 43, .28); }
.reg-input:focus {
  outline: 0;
  border-color: var(--kobalt);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kobalt) 16%, transparent);
}
:focus-visible { border-radius: 6px; }

/* Reiter (Tonalität, Vorher/Nachher, Hell/Dunkel) */
.tabs { border-radius: 12px; padding: 4px; }
.tab {
  border-radius: 9px;
  transition: background-color .35s var(--ease-soft), color .3s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.tab:hover { color: var(--tusche); }
.tab[aria-selected="true"], .tab[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgba(24, 32, 43, .08), 0 4px 12px -6px rgba(24, 32, 43, .25);
}

/* Schnittmarken weg – sie machen die Flächen hart */
.crop::before { content: none; }

/* ═══════════ HERO ═══════════ */
.hero2 {
  position: relative;
  isolation: isolate;
  margin-top: -72px;
  padding-top: calc(72px + clamp(44px, 5.6vw, 84px));
  background: none;
}
.hero2::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--inset);
  left: var(--inset);
  right: var(--inset);
  bottom: var(--hs-cut);
  border-radius: var(--r-panel);
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 60% at 50% 100%, rgba(38, 57, 201, .07), rgba(38, 57, 201, 0) 70%),
    var(--kalk);
}
.hero-pill {
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(24, 32, 43, .05), 0 8px 20px -14px rgba(24, 32, 43, .3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.hero2 .h1 { font-weight: 650; letter-spacing: -.03em; }

/* Programmfenster: weiche Kanten, Licht von oben, kobaltiger Schein darunter */
.hero-shot {
  border-radius: var(--r-media);
  box-shadow:
    0 0 0 1px rgba(20, 27, 38, .08),
    0 2px 4px rgba(20, 27, 38, .05),
    0 30px 60px -28px rgba(20, 27, 38, .45),
    0 70px 120px -60px rgba(38, 57, 201, .42);
}
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  pointer-events: none;
}

/* Schwebende Häkchen-Karten: mattes Glas */
.hs-done li {
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .7),
    0 0 0 1px rgba(24, 32, 43, .05),
    0 12px 28px -14px rgba(24, 32, 43, .4);
}
.hs-done .hd-final {
  background: var(--kobalt);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(26, 40, 148, .25), 0 20px 40px -18px rgba(38, 57, 201, .75);
}
.hd-ic { border-radius: 10px; background: color-mix(in srgb, var(--kobalt) 8%, #fff); }
.hd-final .hd-ic { background: rgba(255, 255, 255, .16); }

/* Trennlinien zwischen weißen Abschnitten: Haarlinie, die an den Enden ausläuft */
#details > .wrap,
#fuer-wen + #funktionen > .wrap {
  border-top: 0;
  background: linear-gradient(90deg, rgba(24, 32, 43, 0), rgba(24, 32, 43, .12) 20%, rgba(24, 32, 43, .12) 80%, rgba(24, 32, 43, 0)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

/* ═══════════ FÜR WEN ═══════════ */
.fw-tabs {
  border-radius: 16px;
  background: color-mix(in srgb, var(--kalk) 70%, #fff);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.fw-ind, .fw-tab { border-radius: 12px; }
.fw-ind { box-shadow: 0 1px 2px rgba(24, 32, 43, .06), 0 8px 20px -10px rgba(24, 32, 43, .3); }
.fw-tabs.is-ready .fw-ind {
  transition: transform .55s var(--ease-soft), width .55s var(--ease-soft), height .55s var(--ease-soft);
}
.fw-tab:hover { background: rgba(255, 255, 255, .5); }
.fw-box { border-radius: var(--r-card); }
.fw-box--pro {
  background: color-mix(in srgb, var(--kalk) 38%, #fff);
  border-color: transparent;
}
.fw-box--ef {
  background: #fff;
  border-color: color-mix(in srgb, var(--kobalt) 42%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--kobalt) 42%, #fff), 0 30px 60px -34px rgba(38, 57, 201, .45);
}
.fw-box--pro .fw-mk { background: #fff; }

/* ═══════════ FUNKTIONEN ═══════════ */
.fx-card {
  border-color: var(--hair);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(24, 32, 43, .03), 0 18px 40px -30px rgba(24, 32, 43, .3);
  transition:
    transform .5s var(--ease-soft),
    box-shadow .5s var(--ease-soft),
    border-color .5s var(--ease-soft);
}
.fx-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kobalt) 22%, #fff);
  box-shadow: 0 1px 2px rgba(24, 32, 43, .03), 0 34px 60px -34px rgba(38, 57, 201, .45);
}
.fx-ic {
  border-radius: 14px;
  background: color-mix(in srgb, var(--kobalt) 8%, #fff);
  color: var(--kobalt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kobalt) 12%, #fff);
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.fx-card:hover .fx-ic {
  background: var(--kobalt);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 20px -10px rgba(38, 57, 201, .7);
}
.fx-tag { background: color-mix(in srgb, var(--kalk) 60%, #fff); }
.fx-play { transition: transform .45s var(--ease-soft); }

/* ═══════════ BEISPIEL-EXPOSÉ ═══════════ */
.pages2 img {
  border-radius: var(--r-paper);
  box-shadow: var(--sh-paper);
}
.pages2 figure[role="button"] img {
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft), opacity .35s var(--ease-soft);
}
.pages2 figure[role="button"]:hover img {
  transform: translateY(-5px);
  box-shadow: 0 1px 1px rgba(24, 32, 43, .04), 0 8px 14px -6px rgba(24, 32, 43, .1), 0 42px 64px -34px rgba(24, 32, 43, .42);
}
#pdf .brand-row {
  border-color: rgba(255, 255, 255, .8);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: 0 0 0 1px var(--hair), var(--sh-float);
}
#pdf .world.world--card { transition: background-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft); }

/* ═══════════ ABLAUF: Bemaßungslinie ═══════════ */
@media (min-width: 781px) {
  .step-dim::before { height: 1px; }
  .step-dim .ext, .step:last-child .step-dim .ext-end { width: 1px; }
}

/* ═══════════ DETAILS: Fotos / Grundriss / Texte ═══════════ */
.frame {
  border-radius: var(--r-media);
  box-shadow: var(--sh-float);
}
.frame:not(.demo-frame) { overflow: hidden; }
.ba-tag, .plan-tag { border-radius: 8px; }
.ba-tag--l { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ba-knob {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .28), 0 8px 24px -6px rgba(0, 0, 0, .4);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.ba:hover .ba-knob { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255, 255, 255, .32), 0 10px 28px -6px rgba(0, 0, 0, .45); }
.ba-handle { box-shadow: 0 0 12px rgba(0, 0, 0, .18); }
.plan-sketch { border-radius: 4px; }
.plan-tag--sketch { box-shadow: 0 6px 16px -6px rgba(24, 32, 43, .3); }
.chips li { border-radius: 999px; }

/* ═══════════ VERGLEICH ═══════════ */
.compare th, .compare td { border-top-color: rgba(24, 32, 43, .1); }
@media (min-width: 721px) {
  .compare { border-collapse: separate; border-spacing: 0; }
  #vergleich .compare thead .new {
    border-top: 0;
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding-top: 22px;
    color: var(--kobalt);
    box-shadow: inset 0 3px 0 var(--kobalt);
  }
  #vergleich .compare tbody tr:last-child .new { border-radius: 0 0 var(--r-card) var(--r-card); }
  #vergleich .compare td.new { border-top-color: rgba(24, 32, 43, .07); }
}

/* ═══════════ SOFTWARE-VIDEO ═══════════ */
.demo-frame {
  border-radius: calc(var(--r-media) + 4px);
  box-shadow: 0 0 0 1px rgba(20, 27, 38, .1), 0 34px 70px -34px rgba(20, 27, 38, .55), 0 70px 120px -70px rgba(38, 57, 201, .35);
}
.demo-video { border-radius: 10px; }
.demo-claim { border-left-width: 2px; }

/* ═══════════ KUNDENSTIMMEN ═══════════ */
.tm-card {
  border-radius: 22px;
  box-shadow: var(--sh-float);
}
.tm-who { border-top-color: var(--hair); }
.tm-av { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--hair); }

/* ═══════════ FAQ ═══════════ */
.faq-list details { border-top-color: rgba(24, 32, 43, .1); }
.faq-list details:last-child { border-bottom-color: rgba(24, 32, 43, .1); }
.faq-list summary { transition: color .35s var(--ease-soft); }
.faq-list summary:hover { color: var(--kobalt); }
.faq-list summary::after { transition: transform .5s var(--ease-soft); }

/* ═══════════ ZITAT ═══════════ */
.founder-intro { border-bottom: 0; }
.founder-intro figcaption { border-left-width: 2px; }
.fi-person img { box-shadow: 0 0 0 4px #fff, 0 18px 34px -18px rgba(24, 32, 43, .5); }

/* ═══════════ PREIS ═══════════ */
.form-sheet.price-sheet {
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .7), 0 80px 140px -80px rgba(38, 57, 201, .55);
}
.price-compare { border-radius: 14px; background: color-mix(in srgb, var(--kalk) 70%, #fff); }
.lead-pages2 img {
  border-radius: var(--r-paper);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 34px 60px -26px rgba(0, 0, 0, .75);
}

/* ═══════════ BEWEGUNG (nur mit JS & ohne „Bewegung reduzieren“) ═══════════ */
/* 1 · Einstieg: ruhig und kurz – zwei Takte, keine Unschärfe, kein Kippen, nichts hüpft */
@keyframes efRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes efStage {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
html.ef-motion .hero2 .hero-pill,
html.ef-motion .hero2 .h1 .ln           { animation: efRise .8s var(--ease-soft) .05s backwards; }
html.ef-motion .hero2 .lead,
html.ef-motion .hero2 .hero-btn,
html.ef-motion .hero2 .hero-trustrow    { animation: efRise .8s var(--ease-soft) .16s backwards; }
html.ef-motion .hero-shot               { animation: efStage 1s var(--ease-soft) .24s backwards; }

/* Handy: kein Einstiegs-Effekt – oben steht alles sofort still (Telefone sind beim Laden ausgelastet,
   jede Bewegung wirkt dort wie Ruckeln) */
@media (max-width: 760px) {
  html.ef-motion .hero2 .hero-pill,
  html.ef-motion .hero2 .h1 .ln,
  html.ef-motion .hero2 .lead,
  html.ef-motion .hero2 .hero-btn,
  html.ef-motion .hero2 .hero-trustrow,
  html.ef-motion .hero-shot { animation: none; }
}

/* Programmfenster steht still: kein Verkleinern beim Scrollen, kein Glanz-Wischer */
.hero-stage { transform: none !important; transition: none; will-change: auto; }
html .hs-glass.is-armed::before,
html .hs-glass.is-armed.is-on::before { transform: translate(0, 0); transition: none; }

/* Karten am Screenshot: blenden nur weich ein – ohne Hereinschieben, ohne Häkchen-Hüpfer */
html.js .hs-done li:nth-child(n) { transform: none; transition: opacity .7s var(--ease-soft); }
html.ef-motion.js .hs-done.is-in li:nth-child(n) { transition-delay: .5s; }

/* 2 · Sanftes Erscheinen beim Scrollen (nur Inhalte unterhalb des ersten Bildschirms) */
html.ef-motion [data-rv] { opacity: 0; translate: 0 14px; }
html.ef-motion.rv-on [data-rv] {
  transition: opacity .55s var(--ease-soft) var(--rv-d, 0s), translate .75s var(--ease-soft) var(--rv-d, 0s);
}
html.ef-motion [data-rv].is-in { opacity: 1; translate: 0 0; }

/* 3 · Bemaßungslinie zieht sich auf, wenn die Schritte erscheinen */
html.ef-motion .steps[data-rv] .step-dim::before { scale: 0 1; transform-origin: 0 50%; }
html.ef-motion.rv-on .steps[data-rv] .step-dim::before { transition: scale 1s var(--ease-soft); }
@media (max-width: 780px) {
  html.ef-motion .steps[data-rv] .step-dim::before { scale: 1 0; transform-origin: 50% 0; }
}
html.ef-motion .steps[data-rv] .step:nth-child(2) .step-dim::before { transition-delay: .15s; }
html.ef-motion .steps[data-rv] .step:nth-child(3) .step-dim::before { transition-delay: .3s; }
html.ef-motion .steps[data-rv].is-in .step-dim::before { scale: 1; }

/* 4 · Reiter-Inhalt blendet weich über */
@keyframes efFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.ef-motion .fw-panel:not([hidden]) { animation: efFade .6s var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  html.ef-motion [data-rv] { opacity: 1; translate: none; transition: none; }
}

/* ═══════════ MOBIL ═══════════ */
@media (max-width: 760px) {
  .tm-card { border-radius: 18px; }
  .form-sheet.price-sheet { border-radius: 20px; }
}
@media (max-width: 560px) {
  /* Name nicht mehr zwischen Foto und Logo quetschen: Logo rutscht in eine eigene Zeile */
  .tm-who { flex-wrap: wrap; row-gap: 12px; }
  .tm-name { flex: 1 1 calc(100% - 70px); }
  .tm-logo { margin-left: 70px; }
}
@media (max-width: 480px) {
  .compare .nb { white-space: normal; }
  .price-kicker { letter-spacing: .09em; font-size: .76rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   UNTERSEITEN (Lösungen, Wissen, Rechtliches, Service)
   ═══════════════════════════════════════════════════════════════════════ */

/* Fußzeile ohne Preis-Tafel davor: rundum gerundet, mit Luft */
.ef-ft { margin-top: var(--inset); border-radius: var(--r-panel); }
#preis + .ef-ft,
main:has(> #preis:last-child) + .ef-ft { margin-top: 0; border-radius: 0 0 var(--r-panel) var(--r-panel); }

/* Danke-Seite (Concierge): Inhalt auf einer Kalk-Tafel */
.thx {
  margin: calc(-72px + var(--inset)) var(--inset) 0;
  padding-top: calc(72px - var(--inset) + clamp(64px, 9vw, 128px));
  border-radius: var(--r-panel);
  background:
    radial-gradient(60% 75% at 30% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    var(--kalk);
}
html.ef-motion .thx-box > * { animation: efRise .8s var(--ease-soft) .04s backwards; }
html.ef-motion .thx-box > :nth-child(n+3) { animation-delay: .14s; }

/* Hero-Band als Tafel, Kopfzeile liegt darin */
.wn-band.sub-hero3 {
  margin: calc(-72px + var(--inset)) var(--inset) 0;
  padding-top: calc(72px - var(--inset) + clamp(34px, 4vw, 56px));
  border-radius: var(--r-panel);
  background:
    radial-gradient(60% 75% at 30% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    var(--kalk);
}
.sub-hero3 .sub-h1 { font-weight: 640; letter-spacing: -.028em; }
.sub-pg img, .sub-pg { border-radius: var(--r-paper); }
.sub-pg { box-shadow: var(--sh-paper), 0 50px 90px -50px rgba(24, 32, 43, .3); }

/* Graue Inhalts-Abschnitte als Tafeln */
.ls-sec:not(.ls-sec-alt) {
  margin-inline: var(--inset);
  border-radius: var(--r-panel);
}
.ls-sec:not(.ls-sec-alt) + .ls-sec:not(.ls-sec-alt) { margin-top: var(--inset); }

/* ---------- Karten ---------- */
.ls-card, .ef-kifeat, .ls-cluster, .wn-tile, .wn-card, .ef-hub a {
  border: 1px solid var(--hair) !important;
  border-radius: var(--r-card) !important;
  box-shadow: 0 1px 2px rgba(24, 32, 43, .03), 0 18px 40px -30px rgba(24, 32, 43, .3) !important;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .5s var(--ease-soft);
}
a.ls-cluster:hover, a.wn-tile:hover, a.wn-card:hover, .ef-hub a:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kobalt) 22%, #fff) !important;
  box-shadow: 0 1px 2px rgba(24, 32, 43, .03), 0 34px 60px -34px rgba(38, 57, 201, .45) !important;
}
.wn-tiles .wn-tile, .wn-tiles .wn-tile:hover { transform: none; }
.ls-card-ico, .ef-kifeat-ico, .ls-cluster-ic {
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--kobalt) 8%, #fff) !important;
  color: var(--kobalt) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kobalt) 12%, #fff);
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.ls-card-ico svg, .ef-kifeat-ico svg, .ls-cluster-ic svg { color: inherit !important; }
a.ls-cluster:hover .ls-cluster-ic, a.wn-card:hover .ls-card-ico {
  background: var(--kobalt) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 20px -10px rgba(38, 57, 201, .7);
}
.wn-tile-soon-badge, .wn-tag { border-radius: 999px; }

/* Hinweis-Boxen: weich gerundet, Akzent als feine Kante */
.wn-callout, .hv-help, .ls-info, .ls-note, .ef-tipp, .wn-roi {
  border-left: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 3px 0 0 var(--kobalt) !important;
}
.wn-roi { border-top: 0 !important; box-shadow: inset 0 3px 0 var(--kobalt) !important; }
.wn-roi-calc { border-radius: 12px; }
.ls-banner, .ef-download { border-color: var(--hair) !important; border-radius: var(--r-card) !important; }
.ef { border-color: var(--hair) !important; border-radius: var(--r-card) !important; box-shadow: var(--sh-float) !important; }
.ls-quote, .ls-glance { border-left-width: 2px !important; }
.wn-band .wn-tldr { border-left-width: 2px; }

/* Formular-Karten */
.sub-reg { border-radius: var(--r-card); box-shadow: var(--sh-float); }
.sub-reg--mid { border-top: 0; border-radius: var(--r-card); box-shadow: inset 0 3px 0 var(--kobalt), var(--sh-float); }
.sub-reg--side { box-shadow: none; }

/* Dunkle Handlungs-Karten mit Licht */
.ef-inline-cta, .wn-cta, .wn-side-cta {
  border-radius: 20px !important;
  background:
    radial-gradient(80% 90% at 0% 0%, rgba(38, 57, 201, .3), rgba(38, 57, 201, 0) 70%),
    var(--nacht) !important;
}
.ls-sec-alt .ef-inline-cta.sub-inline { box-shadow: 0 30px 60px -34px rgba(20, 27, 38, .55) !important; }
.wn-side-cta .wn-side-cta-btn,
.btn, .ls-cta-btn, .wn-hero-cta-btn, .ef-inline-cta-btn, .wn-cta-btn { border-radius: var(--r-ctl) !important; }
.ls-cta-btn, .wn-hero-cta-btn, .wn-side-cta-btn, .ef-inline-cta-btn, .wn-cta-btn {
  box-shadow: var(--sh-btn);
  transition: background-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.ls-cta-btn:hover, .wn-hero-cta-btn:hover, .wn-side-cta-btn:hover, .ef-inline-cta-btn:hover, .wn-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-btn-h);
}

/* Umriss-Knöpfe */
.hv-btn {
  border-color: rgba(24, 32, 43, .22) !important;
  border-radius: var(--r-ctl) !important;
  transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft), border-color .35s var(--ease-soft);
}
.hv-btn:hover { border-color: var(--tusche) !important; }

/* Querverweise */
.wn-xlink-tiles a, .wn-xlinks .wn-xlink-tiles a {
  border-color: var(--hair) !important;
  border-radius: 12px !important;
  transition: border-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.wn-xlink-tiles a:hover, .wn-xlinks .wn-xlink-tiles a:hover {
  border-color: color-mix(in srgb, var(--kobalt) 30%, #fff) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(38, 57, 201, .45);
}

/* Bilder im Artikel */
.wn-figure img { border-radius: 14px !important; box-shadow: var(--sh-float) !important; }
.wn-es-item img { border-radius: var(--r-paper) !important; box-shadow: var(--sh-paper) !important; }

/* Linien & Tabellen ruhiger */
.wn-faq details { border-top-color: rgba(24, 32, 43, .1) !important; }
.wn-faq details:last-child { border-bottom-color: rgba(24, 32, 43, .1) !important; }
.wn-faq summary { transition: color .35s var(--ease-soft); }
.wn-faq summary:hover { color: var(--kobalt); }
.wn-faq summary::after { transition: transform .5s var(--ease-soft); }
.wn-table th, .wn-table td { border-color: rgba(24, 32, 43, .1); }
.ls-clist li, .ls-list li, .wn-check li, .ls-info-list li,
.wn-steps > li, .wn-sources, .wn-relnav, .wn-relnav a, .wn-byline { border-color: rgba(24, 32, 43, .1) !important; }
.wn-toc nav a { transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft); }

/* Farbwelten-Leiste im Beispiel-Block */
.sub-pages .brand-row { border-top-color: var(--hair); }
.sub-pages .world.world--card { transition: background-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft); }

/* Einstieg auf Unterseiten: zwei ruhige Takte */
html.ef-motion .sub-hero3 .wn-breadcrumb,
html.ef-motion .sub-hero3 .wn-eyebrow,
html.ef-motion .sub-hero3 .sub-h1          { animation: efRise .8s var(--ease-soft) .04s backwards; }
html.ef-motion .sub-hero3 .wn-hero-sub,
html.ef-motion .sub-hero3 .hero-go,
html.ef-motion .sub-hero3 .hero-reg        { animation: efRise .8s var(--ease-soft) .14s backwards; }
html.ef-motion .sub-hero3 .sub-visual      { animation: efStage 1s var(--ease-soft) .2s backwards; }

@media (max-width: 760px) {
  .wn-band.sub-hero3 { padding-top: calc(72px - var(--inset) + 22px); }
  /* Handy: kein Einstiegs-Effekt – oben steht alles sofort still */
  html.ef-motion .sub-hero3 .wn-breadcrumb,
  html.ef-motion .sub-hero3 .wn-eyebrow,
  html.ef-motion .sub-hero3 .sub-h1,
  html.ef-motion .sub-hero3 .wn-hero-sub,
  html.ef-motion .sub-hero3 .hero-go,
  html.ef-motion .sub-hero3 .hero-reg,
  html.ef-motion .sub-hero3 .sub-visual,
  html.ef-motion .thx-box > * { animation: none; }
}

/* ═══════════ REGISTRIEREN (registrieren.html) ═══════════ */
@keyframes efCard {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 761px) {
  .gl-card {
    border-radius: 24px;
    box-shadow:
      0 0 0 1px rgba(24, 32, 43, .06),
      0 2px 6px rgba(24, 32, 43, .05),
      0 40px 90px -34px rgba(24, 32, 43, .5),
      0 90px 140px -80px rgba(38, 57, 201, .45);
  }
  html.ef-motion .gl-card { animation: efCard .9s var(--ease-soft) .05s backwards; }
}
.gl-card .reg-btn { border-radius: 10px; box-shadow: var(--sh-btn); }
.gl-card .reg-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-btn-h); }
.gl-card .reg-btn::after { transition: transform .45s var(--ease-soft); }
@media (min-width: 561px) {
  .gl-card .reg {
    border: 1px solid color-mix(in srgb, var(--kobalt) 38%, #fff);
    border-radius: 14px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kobalt) 14%, transparent), 0 18px 40px -22px rgba(38, 57, 201, .5);
    transition: border-color .35s var(--ease-soft), box-shadow .45s var(--ease-soft);
  }
  .gl-card .reg:focus-within {
    border-color: var(--kobalt);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--kobalt) 14%, transparent), 0 18px 40px -22px rgba(38, 57, 201, .55);
  }
  .gl-card .reg-input,
  .gl-card .reg-input:hover,
  .gl-card .reg-input:focus { border-color: transparent; box-shadow: none; border-radius: 9px; }
}
@media (max-width: 560px) {
  .gl-card .reg-input { border-radius: 12px; }
  .gl-card .reg-btn { border-radius: 12px; }
}
.wn-legal h2 { border-top-color: rgba(24, 32, 43, .1); }