/* Self-hosted Fonts (DSGVO, font-display:swap) */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/space-grotesk-700.woff2') format('woff2'); }

/* ============================================================
   LAUSITZ DIGITAL — Redesign V1 · gemeinsames Stylesheet
   Tokens & Regeln: siehe DESIGN.md (autoritativ)
   Kombi: Farbe 2 (Kobaltblau) · Font B (Space Grotesk/Inter) · Weiß W3
   ============================================================ */

:root {
  /* Brand */
  --brand:        #2563EB;
  --brand-dark:   #1D4ED8;
  --brand-darker: #1E40AF;
  --brand-tint:   #DBEAFE;
  --brand-50:     #EFF5FF;
  --brand-on:     #FFFFFF;

  /* Neutrals */
  --ink:        #0F172A;
  --ink-soft:   #1E293B;
  --muted:      #475569;
  --muted-soft: #5A6A80;
  --line:       #E2E8F0;
  --line-soft:  #EDF1F6;
  --line-strong:#7E8B9E;

  /* Surfaces */
  --bg:        #F1F5F9;
  --surface:   #FFFFFF;
  --surface-2: #F8FAFC;

  /* States (nur für Formular-Feedback) */
  --ok:    #047857;
  --warn:  #D97706;
  --error: #DC2626;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Shape */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 10px 30px -16px rgba(15,23,42,.25);
  --shadow-lg: 0 30px 60px -28px rgba(37,99,235,.35);
  --container: 1760px;

  /* Motion */
  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-1: .22s; --dur-2: .45s; --dur-3: .7s;
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink-soft);
  font-family: var(--font-body); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(22px, 4vw, 56px); }
.narrow { max-width: 800px; }

.eyebrow { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); background:none; border-radius:0; padding:0; }
.eyebrow .pulse { display:none; }

.kicker { font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }

/* ---------------- Buttons ---------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:600; font-size:15px; border:none; border-radius:var(--r-sm); padding:14px 24px; cursor:pointer; transition:transform .12s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.btn-primary { background:var(--brand); color:var(--brand-on); box-shadow:0 8px 20px -10px rgba(37,99,235,.6); }
.btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); }
.btn-ghost { background:var(--surface); color:var(--ink); border:1.5px solid var(--line-strong); }
.btn-ghost:hover { border-color:#cbd5e1; transform:translateY(-1px); }
.btn-white { background:#fff; color:var(--brand-dark); }
.btn-white:hover { transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,.4); }
.btn-sm { padding:11px 18px; font-size:14px; }
.btn-block { width:100%; }

/* ---------------- Header / Nav ---------------- */
header.site { position:sticky; top:0; z-index:50; background:rgba(241,245,249,.8); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .2s, background .2s; }
header.site.scrolled { border-bottom-color:var(--line); background:rgba(241,245,249,.94); }
.nav { display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.02em; }
.logo .mark { width:30px; height:30px; border-radius:8px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; box-shadow:0 6px 14px -6px rgba(37,99,235,.7); }
.nav-links { display:none; gap:30px; font-size:14.5px; font-weight:500; color:var(--muted); list-style:none; padding:0; margin:0; }
.nav-links a { padding:4px 0; position:relative; }
.nav-links a:hover { color:var(--brand); }
.nav-links a.active { color:var(--ink); font-weight:600; }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--brand); border-radius:2px; }
.nav-right { display:flex; align-items:center; gap:14px; }
.nav-right .phone { display:none; font-size:14.5px; font-weight:600; color:var(--ink); }
.burger { display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
@media (min-width:880px){ .nav-links{display:flex;} .nav-right .phone{display:inline;} .burger{display:none;} }

/* Mobile menu */
.mobile-menu { display:none; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.mobile-menu.open { display:block; }
.mobile-menu ul { list-style:none; padding:8px 22px 20px; margin:0; }
/* nur die Navigations-Links stylen, nicht den Button */
.mobile-menu a:not(.btn) { display:block; padding:15px 2px; font-size:16px; font-weight:500; color:var(--ink-soft); border-bottom:1px solid var(--line-soft); }
.mobile-menu li:last-child a:not(.btn) { border-bottom:none; }
.mobile-menu a:not(.btn):hover { color:var(--brand); }
.mobile-menu a.active:not(.btn) { color:var(--brand); font-weight:600; }
.mobile-menu .btn { margin-top:14px; width:100%; }

/* ---------------- Page header (Unterseiten) ---------------- */
.page-head { position:relative; overflow:hidden; padding:64px 0 40px; text-align:center; }
.page-head::before { content:""; position:absolute; top:-260px; left:50%; transform:translateX(-50%); width:760px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.12), rgba(37,99,235,0) 70%); pointer-events:none; }
.page-head h1 { font-size:clamp(30px,5vw,50px); font-weight:700; margin-top:14px; position:relative; }
.page-head p { color:var(--muted); margin:16px auto 0; max-width:600px; font-size:clamp(16px,1.7vw,18px); position:relative; }
.page-head .eyebrow { position:relative; }

/* ---------------- Section shell ---------------- */
section.block { padding:76px 0; }
.block.tint { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------------- Guarantee band ---------------- */
.guarantee { background:linear-gradient(150deg, var(--brand-darker), var(--brand)); border-radius:var(--r-lg); padding:clamp(30px,5vw,52px); display:grid; grid-template-columns:1fr; gap:24px; align-items:center; position:relative; overflow:hidden; }
.guarantee::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 10%, rgba(255,255,255,.16), transparent 42%); pointer-events:none; }
.guarantee .g-badge { width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; flex:none; position:relative; }
.guarantee .g-badge b { font-family:var(--font-display); font-size:26px; line-height:1; }
.guarantee .g-badge small { font-size:11px; letter-spacing:.05em; }
.guarantee h3 { color:#fff; font-size:clamp(22px,3vw,30px); font-weight:700; position:relative; }
.guarantee p { color:rgba(255,255,255,.9); margin-top:10px; font-size:16px; position:relative; max-width:60ch; }
@media (min-width:760px){ .guarantee{ grid-template-columns:auto 1fr; gap:36px; } .g-inner{display:flex; gap:36px; align-items:center;} }

/* ---------------- Comparison table ---------------- */
.cmp-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); }
table.cmp { width:100%; border-collapse:collapse; min-width:560px; }
table.cmp th, table.cmp td { padding:15px 18px; text-align:center; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
table.cmp thead th { font-family:var(--font-display); font-size:15px; color:var(--ink); font-weight:600; background:var(--surface-2); position:sticky; top:0; }
table.cmp thead th.feat { color:var(--brand-dark); }
table.cmp tbody td:first-child, table.cmp thead th:first-child { text-align:left; color:var(--ink-soft); font-weight:500; }
table.cmp td .yes { color:var(--brand); font-weight:700; }
table.cmp td .no { color:#cbd5e1; }
table.cmp tbody tr:last-child td { border-bottom:none; }
table.cmp .col-feat { background:rgba(37,99,235,.04); }

/* ---------------- FAQ ---------------- */
.faq { display:grid; gap:12px; max-width:780px; margin:0 auto; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0; overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:20px 22px; font-weight:600; font-size:16px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ico { flex:none; width:24px; height:24px; border-radius:7px; background:var(--brand-tint); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:700; transition:transform .2s; }
.faq details[open] summary .ico { transform:rotate(45deg); }
.faq .ans { padding:0 22px 20px; color:var(--muted); font-size:15px; }

/* split (text + media) */
.split { display:grid; grid-template-columns:1fr; gap:36px; align-items:center; }
@media (min-width:860px){ .split{ grid-template-columns:1fr 1fr; gap:48px; } .split.rev .s-media{ order:-1; } }
.split h2 { font-size:clamp(26px,3.6vw,36px); font-weight:700; }
.split p { color:var(--muted); margin-top:16px; font-size:16px; }
.split .s-list { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.split .s-list li { padding-left:28px; position:relative; font-size:15.5px; color:var(--ink-soft); }
.split .s-list li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }
.s-media .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:30px; }

/* ---------------- CTA band ---------------- */
.ctaband { background:linear-gradient(150deg, var(--brand-darker) 0%, var(--brand) 60%, #3B82F6 100%); border-radius:var(--r-lg); padding:clamp(36px,6vw,68px); text-align:center; position:relative; overflow:hidden; }
.ctaband::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%, rgba(255,255,255,.18), transparent 40%); pointer-events:none; }
.ctaband h2 { color:#fff; font-size:clamp(26px,4vw,40px); font-weight:700; position:relative; }
.ctaband p { color:rgba(255,255,255,.88); margin:16px auto 0; max-width:540px; font-size:17px; position:relative; }
.ctaband .cta { display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:30px; position:relative; }

/* ---------------- Contact / forms ---------------- */
.contact-grid { display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:880px){ .contact-grid{ grid-template-columns:1fr 1.2fr; gap:48px; } }
.contact-info .ci-item { display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); }
.contact-info .ci-item:last-child { border-bottom:none; }
.contact-info .ci-ic { width:42px; height:42px; flex:none; border-radius:11px; background:var(--brand-tint); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-size:18px; }
.contact-info .ci-item h4 { font-size:14px; font-family:var(--font-body); font-weight:600; color:var(--muted-soft); }
.contact-info .ci-item a, .contact-info .ci-item span { font-size:16px; color:var(--ink); font-weight:500; }
.contact-info .ci-item a:hover { color:var(--brand); }

form.lead { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,4vw,36px); box-shadow:var(--shadow-sm); }
.field { margin-bottom:18px; }
.field.row { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
@media (min-width:560px){ .field.row{ grid-template-columns:1fr 1fr; } }
.field > * { margin-bottom:0; }
label.lbl { display:block; font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
label.lbl .opt { color:var(--muted-soft); font-weight:400; }
.input, select.input, textarea.input {
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:var(--r);
  padding:13px 15px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.input:focus, select.input:focus, textarea.input:focus { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.14); }
textarea.input { min-height:130px; resize:vertical; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.check { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted); }
.check input { margin-top:3px; width:17px; height:17px; accent-color:var(--brand); flex:none; }
.check a { color:var(--brand-dark); text-decoration:underline; }
.form-note { font-size:13px; color:var(--muted-soft); margin-top:14px; text-align:center; }

/* ---------------- Footer ---------------- */
footer.site-footer { background:var(--ink); color:#94a3b8; padding:64px 0 32px; }
.foot-grid { display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:720px){ .foot-grid{ grid-template-columns:2fr 1fr 1fr 1.2fr; } }
.foot-logo { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; }
.foot-logo .mark{ width:30px; height:30px; border-radius:8px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.foot-about { margin-top:16px; font-size:14px; color:#94a3b8; max-width:34ch; }
.foot-col h5 { color:#fff; font-size:14px; font-weight:600; font-family:var(--font-body); margin:0 0 14px; }
.foot-col a, .foot-col p { display:block; font-size:14px; color:#94a3b8; padding:5px 0; }
.foot-col a:hover { color:#fff; }
.foot-geo { border-top:1px solid #1e293b; margin-top:36px; padding-top:24px; display:flex; flex-wrap:wrap; gap:7px 16px; align-items:baseline; }
.foot-geo .lbl-geo { font-size:13px; color:#fff; font-weight:600; }
.foot-geo a { font-size:13px; color:#94a3b8; }
.foot-geo a:hover { color:#fff; }
.foot-bottom { border-top:1px solid #1e293b; margin-top:36px; padding-top:24px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:13px; color:#94a3b8; }
.foot-bottom a:hover{ color:#cbd5e1; }

/* ---------------- Utilities ---------------- */
.center { text-align:center; }
.mt-s { margin-top:14px; } .mt-m { margin-top:26px; } .mt-l { margin-top:44px; }
.tiny { font-size:13px; color:var(--muted-soft); }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* ============================================================
   EDITORIAL / CARDLESS PATTERNS (taste-pass)
   Gruppierung über Hairlines + Whitespace statt Boxen.
   ============================================================ */

/* --- Editorial hero (links-betont, kein Fake-Asset) --- */
.hero-ed { position:relative; overflow:hidden; padding:72px 0 8px; }
.hero-ed::before { content:""; position:absolute; top:-280px; right:-180px; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.13), rgba(37,99,235,0) 66%); pointer-events:none; }
@media (min-width:940px){ .hero-ed { padding:104px 0 8px; } }
.hero-ed .marker { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); margin-bottom:30px; }
.hero-ed .marker::before { content:none; }
.hero-ed h1 { font-size:clamp(38px,7vw,76px); font-weight:700; letter-spacing:-.03em; line-height:1.01; max-width:16ch; }
.hero-ed h1 .accent { color:var(--brand); }
.hero-ed .lead { margin-top:26px; font-size:clamp(16px,1.7vw,20px); color:var(--muted); max-width:50ch; }
.hero-ed .cta { margin-top:36px; display:flex; flex-wrap:wrap; gap:13px; }

/* --- Fact line (eine Linie oben, saubere Spalten, keine vertikalen Trenner) --- */
.factline { margin-top:60px; display:grid; grid-template-columns:repeat(2,1fr); gap:30px 40px; border-top:1px solid var(--line); padding-top:34px; }
@media (min-width:760px){ .factline { grid-template-columns:repeat(4,1fr); gap:0 40px; } }
.factline .f .n { font-family:var(--font-display); font-size:clamp(26px,3.4vw,34px); font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.factline .f .n span { color:var(--brand); }
.factline .f .c { font-size:13.5px; color:var(--muted-soft); margin-top:6px; }

/* --- Editorial section header (links, ohne Pflicht-Eyebrow) --- */
.ed-head { max-width:720px; margin-bottom:48px; }
.ed-head h2 { font-size:clamp(28px,4.6vw,46px); font-weight:700; letter-spacing:-.025em; line-height:1.05; }
.ed-head p { color:var(--muted); margin-top:18px; font-size:17px; max-width:56ch; }

/* --- Service list (cardless, Hairline-Zeilen) --- */
.svc { border-top:1px solid var(--line); }
.svc-row { display:grid; grid-template-columns:1fr; gap:12px 48px; padding:36px 0; border-bottom:1px solid var(--line); }
@media (min-width:820px){ .svc-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } }
.svc-row h3 { font-size:clamp(22px,2.8vw,32px); font-weight:600; letter-spacing:-.02em; transition:color .15s; }
.svc-row:hover h3 { color:var(--brand-dark); }
.svc-row .d { color:var(--muted); font-size:15.5px; }
.svc-row .d .tags { margin-top:16px; display:flex; flex-wrap:wrap; gap:9px 22px; }
.svc-row .d .tags span { font-size:13.5px; color:var(--ink-soft); position:relative; padding-left:19px; }
.svc-row .d .tags span::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }

/* --- Price rows (cardless; empfohlene Zeile dezent getintet) --- */
.prows { border-top:1px solid var(--line); }
.prow { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 24px; padding:28px 0; border-bottom:1px solid var(--line); }
.prow .pmain { flex:1 1 240px; }
.prow .pn { font-family:var(--font-display); font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-.02em; }
.prow .pf { color:var(--muted-soft); font-size:14.5px; margin-top:4px; }
.prow .pprice { font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,34px); color:var(--ink); letter-spacing:-.02em; white-space:nowrap; }
.prow .pprice small { font-size:14px; color:var(--muted-soft); font-weight:500; }
.prow .pgo { font-size:14.5px; font-weight:600; color:var(--brand-dark); white-space:nowrap; }
.prow .pgo:hover { color:var(--brand); }
.prow.feat { background:var(--brand-50); margin:0 -22px; padding:28px 22px; box-shadow:inset 3px 0 0 var(--brand); }
.prow .ptag { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-dark); margin-left:10px; vertical-align:middle; }

/* --- Two-column editorial ("Warum wir") --- */
.duo { display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:860px){ .duo { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; } }
.duo .duo-lead h2 { font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-.025em; line-height:1.05; }
.duo .duo-lead p { color:var(--muted); margin-top:18px; font-size:16px; }
.rowlist { border-top:1px solid var(--line); }
.rowlist .r { padding:24px 0; border-bottom:1px solid var(--line); }
.rowlist .r h4 { font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.rowlist .r p { color:var(--muted); font-size:14.5px; margin-top:7px; max-width:52ch; }

/* --- Benchmark big numbers (cardless, keine vertikalen Trenner) --- */
.benchline { display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; border-top:1px solid var(--line); padding-top:36px; }
@media (min-width:760px){ .benchline { grid-template-columns:repeat(4,1fr); gap:0 40px; } }
.benchline .b .s { font-family:var(--font-display); font-size:clamp(42px,6vw,66px); font-weight:700; color:var(--brand); line-height:1; letter-spacing:-.03em; }
.benchline .b .l { font-size:14.5px; font-weight:600; color:var(--ink); margin-top:12px; }
.benchline .b .vs { font-size:12.5px; color:var(--muted-soft); margin-top:4px; }

/* --- Inline target list (Branchen, ohne Chips/Boxen) --- */
.inline-targets { display:flex; flex-wrap:wrap; gap:10px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.inline-targets span { font-family:var(--font-display); font-size:clamp(16px,1.8vw,20px); font-weight:500; color:var(--ink-soft); }
.inline-targets span.mut { color:var(--muted-soft); }

/* ============================================================
   MOTION SYSTEM ("deutlich spürbar")
   Alle Start-Zustände nur unter .js → ohne JS bleibt alles sichtbar.
   Nur transform/opacity, reduced-motion-fest.
   ============================================================ */

/* Scroll-Reveal (einzelnes Element) */
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js .reveal.in { opacity:1; transform:none; }

/* Gestaffelte Reveals: Kinder eines [data-stagger] erscheinen nacheinander (delay per JS) */
.js [data-stagger] > * { opacity:0; transform:translateY(24px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js [data-stagger] > *.in { opacity:1; transform:none; }

/* Hero-Auftritt beim Laden */
.js .hero-ed .marker,
.js .hero-ed h1,
.js .hero-ed .lead,
.js .hero-ed .cta { opacity:0; transform:translateY(20px); animation:heroIn var(--dur-3) var(--ease) forwards; }
.js .hero-ed .marker { animation-delay:.05s; }
.js .hero-ed h1     { animation-delay:.16s; }
.js .hero-ed .lead  { animation-delay:.30s; }
.js .hero-ed .cta   { animation-delay:.42s; }
@keyframes heroIn { to { opacity:1; transform:none; } }

/* Parallax-Deko (Tiefe beim Scrollen) */
.parallax { position:absolute; pointer-events:none; z-index:0; will-change:transform; }
.hero-ed .wrap { position:relative; z-index:1; }

/* Mikrointeraktionen */
.btn:active { transform:translateY(1px) scale(.992); }
.pgo { transition:color .15s, transform .2s var(--ease-out); }
.prow:hover .pgo { transform:translateX(4px); }
.svc-row h3 { display:inline-flex; align-items:center; gap:11px; }
.svc-row h3::after { content:"→"; font-size:.62em; color:var(--brand); opacity:0; transform:translateX(-8px); transition:opacity .22s, transform .22s var(--ease-out); }
.svc-row:hover h3::after { opacity:1; transform:none; }
.prow { transition:background .2s ease, box-shadow .2s ease; border-radius:var(--r); }
.prow:not(.feat):hover { background:var(--surface-2); }
.rowlist .r { transition:transform .22s var(--ease-out); }
.rowlist .r:hover { transform:translateX(5px); }
.benchline .b .s { transition:transform .28s var(--ease-out); display:inline-block; }
.benchline .b:hover .s { transform:scale(1.05); }

@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js [data-stagger] > *,
  .js .hero-ed .marker, .js .hero-ed h1, .js .hero-ed .lead, .js .hero-ed .cta {
    opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;
  }
  .parallax { transform:none !important; }
}

/* --- Skeleton loading (für Bilder & nachgeladene Inhalte bei langsamer Verbindung) --- */
.skeleton { position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:shimmer 1.4s infinite; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
.skeleton-line { height:12px; border-radius:6px; margin:9px 0; }
.skeleton-line.s-60 { width:60%; } .skeleton-line.s-80 { width:80%; } .skeleton-line.s-40 { width:40%; }
/* Bild mit Ladezustand: Box hält das Seitenverhältnis (kein Layout-Shift), Bild faded ein */
.img-load { position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-lg); }
.img-load::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:shimmer 1.4s infinite; }
.img-load.loaded::after { display:none; }
.img-load img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease; }
.img-load img.in { opacity:1; }
@media (prefers-reduced-motion: reduce){ .skeleton::after, .img-load::after { animation:none; } }

/* --- Legal pages (Impressum / Datenschutz) --- */
.legal { max-width:760px; margin:0 auto; padding:8px 0 30px; }
.legal h2 { font-size:clamp(20px,2.6vw,26px); margin:42px 0 12px; letter-spacing:-.02em; }
.legal h2:first-of-type { margin-top:8px; }
.legal h3 { font-family:var(--font-display); font-size:17px; font-weight:600; margin:26px 0 8px; }
.legal p, .legal li { color:var(--muted); font-size:15.5px; line-height:1.7; }
.legal p { margin:11px 0; }
.legal ul { padding-left:20px; margin:11px 0; }
.legal li { margin:6px 0; }
.legal a { color:var(--brand-dark); text-decoration:underline; }
.legal strong { color:var(--ink-soft); font-weight:600; }
.legal .upd { font-size:13px; color:var(--muted-soft); }
.legal .note { background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--r); padding:16px 18px; margin:20px 0; font-size:14px; color:var(--muted); }

/* ============================================================
   ICONS (Lucide, inline SVG, self-hosted)
   ============================================================ */
.ico { display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:0; }
.ico svg { width:1em; height:1em; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.ic-badge { width:44px; height:44px; border-radius:12px; background:var(--brand-tint); color:var(--brand-dark); font-size:20px; }

/* ============================================================
   CUSTOM DROPDOWN (einheitlich über alle Browser)
   ============================================================ */
.select { position:relative; }
.select-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-body); font-size:16px; color:var(--ink); text-align:left;
  background:var(--surface-2); border:1.5px solid var(--line-strong); border-radius:var(--r); padding:13px 15px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.select-btn:hover { border-color:#cbd5e1; }
.select.open .select-btn, .select-btn:focus-visible { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.select-val { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-val.placeholder { color:var(--muted-soft); }
.select-btn .chev { font-size:18px; color:var(--muted-soft); transition:transform .2s var(--ease-out); }
.select.open .select-btn .chev { transform:rotate(180deg); }
.select-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; list-style:none; margin:0; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); max-height:264px; overflow:auto;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .16s, transform .16s var(--ease-out); }
.select.open .select-list { opacity:1; transform:none; pointer-events:auto; }
.select-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:8px;
  font-size:15px; color:var(--ink-soft); cursor:pointer; transition:background .12s, color .12s; }
.select-list li:hover, .select-list li.active { background:var(--brand-50); color:var(--brand-dark); }
.select-list li:focus-visible { outline:none; background:var(--brand-50); color:var(--brand-dark); }
.select-list li .ico { font-size:17px; color:var(--brand); opacity:0; transition:opacity .12s; }
.select-list li.selected .ico { opacity:1; }
.select-list li.selected { color:var(--brand-dark); font-weight:600; }

/* ============================================================
   PAGE PATTERNS (cardless) — Leistungen / Angebote / Über uns
   ============================================================ */

/* Service-Zeile mit Icon */
.svc-head { display:flex; align-items:center; gap:14px; }
.svc-ic { font-size:26px; color:var(--brand); }

/* Prozess (nummeriert, editorial) */
.flow { border-top:1px solid var(--line); counter-reset:flow; list-style:none; margin:0; padding:0; }
.faq-q { font:inherit; margin:0; display:inline; font-weight:600; }
.flow .fstep { display:grid; grid-template-columns:auto 1fr; column-gap:26px; padding:30px 0; border-bottom:1px solid var(--line); }
.flow .fstep::before { counter-increment:flow; content:"0" counter(flow); font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,34px); color:var(--brand); letter-spacing:-.02em; grid-row:1 / span 2; }
.flow .fstep h4 { font-family:var(--font-display); font-size:20px; font-weight:600; }
.flow .fstep p { color:var(--muted); margin-top:8px; font-size:15px; max-width:62ch; grid-column:2; }

/* Werte (Icon + Hairline) */
.values2 { border-top:1px solid var(--line); }
.value2 { display:grid; grid-template-columns:auto 1fr; column-gap:18px; padding:26px 0; border-bottom:1px solid var(--line); }
.value2 .ico { font-size:26px; color:var(--brand); grid-row:1 / span 2; margin-top:2px; }
.value2 h3 { font-family:var(--font-display); font-size:19px; font-weight:600; }
.value2 p { grid-column:2; color:var(--muted); font-size:15px; margin-top:6px; max-width:60ch; }

/* FAQ cardless (Hairline statt Box) */
.faq { gap:0; }
.faq details { background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; }
.faq summary { padding:22px 0; }
.faq .ans { padding:0 0 22px; }

/* Pricing editorial (Angebote) */
.plans { border-top:1px solid var(--line); }
.plan { display:grid; grid-template-columns:1fr; gap:20px 44px; padding:38px 0; border-bottom:1px solid var(--line); }
@media (min-width:820px){ .plan { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); } }
.plan.feat { background:var(--brand-50); margin:0 -22px; padding:38px 22px; box-shadow:inset 3px 0 0 var(--brand); }
.plan-head .pn { font-family:var(--font-display); font-size:clamp(22px,2.8vw,30px); font-weight:600; letter-spacing:-.02em; }
.plan-head .ptag { display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-dark); background:var(--brand-tint); padding:3px 10px; border-radius:var(--r-pill); margin-left:10px; vertical-align:middle; }
.plan-head .pf { color:var(--muted); margin-top:10px; font-size:15px; max-width:40ch; }
.plan-head .pprice { margin-top:20px; font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,42px); color:var(--ink); letter-spacing:-.02em; }
.plan-head .pprice small { font-size:15px; color:var(--muted-soft); font-weight:500; }
.plan-head .pday { color:var(--brand-dark); font-weight:600; font-size:13.5px; margin-top:5px; }
.plan-head .btn { margin-top:22px; }
.plan-feat .ph { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-soft); margin-bottom:14px; }
.plan-feat ul { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.plan-feat li { position:relative; padding-left:28px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.plan-feat li .ico { position:absolute; left:0; top:1px; font-size:17px; color:var(--brand); }

/* Immer-dabei Zeile (Icon + Text, Hairline-Spalten) */
.incl { display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); }
@media (min-width:640px){ .incl { grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .incl { grid-template-columns:repeat(4,1fr); } }
.incl .i { display:flex; gap:13px; align-items:flex-start; padding:24px 26px 24px 0; border-bottom:1px solid var(--line); }
.incl .i .ico { font-size:22px; color:var(--brand); margin-top:1px; }
.incl .i h4 { font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink); }
.incl .i p { font-size:13px; color:var(--muted-soft); margin-top:3px; }

/* ============================================================
   A11Y + UX POLISH
   ============================================================ */

/* Screenreader-only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip-Link */
.skip { position:absolute; left:8px; top:-60px; z-index:200; background:var(--brand); color:#fff; font-weight:600; font-size:14px; padding:10px 16px; border-radius:0 0 10px 10px; transition:top .15s; }
.skip:focus { top:0; outline:2px solid #fff; outline-offset:2px; }

/* Globaler Tastatur-Fokus */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .select-btn:focus-visible, .check input:focus-visible {
  outline:2px solid var(--brand); outline-offset:2px; border-radius:4px;
}
.select-list li:focus { background:var(--brand-50); color:var(--brand-dark); outline:none; }

/* nav-Landmark ohne Layout-Effekt */
.navwrap { display:contents; }

/* Touch-Targets >= 44px */
.burger { width:44px; height:44px; justify-content:center; }
.nav-links a { padding:11px 0; }
.foot-col a { padding:9px 0; }
.select-list li { padding:13px 12px; }
.check input { width:20px; height:20px; }
.pgo { display:inline-flex; align-items:center; min-height:40px; }

/* svc-row: ehrliche Affordance (sieht nicht mehr klickbar aus) */
.svc-row h3::after { content:none; }
.svc-row:hover h3 { color:var(--ink); }

/* Formular-Validierung */
.input.invalid, .input[aria-invalid="true"] { border-color:var(--error); }
.input.invalid:focus { box-shadow:0 0 0 4px rgba(220,38,38,.14); }
.field-error { color:var(--error); font-size:13px; margin-top:6px; font-weight:500; min-height:0; }
.form-status { font-size:14.5px; font-weight:600; margin-top:14px; text-align:center; }
.form-status.ok { color:var(--ok); }

/* Disabled-Button + Checkbox-Fehler */
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.check.invalid span { color:var(--error); }
.check.invalid input { outline:2px solid var(--error); outline-offset:3px; }

.mark svg { width:20px; height:auto; display:block; }

/* ============================================================
   404-Fehlerseite
   ============================================================ */
.err { padding:clamp(48px,7vh,80px) 0 clamp(64px,10vh,110px); display:flex; align-items:center; min-height:68vh; }
.err .wrap { width:100%; }
.err-wrap { max-width:600px; margin-inline:auto; text-align:center; }
.err-code { font-family:var(--font-display); font-weight:700; font-size:clamp(104px,22vw,220px); line-height:.84; letter-spacing:-.045em; color:var(--brand); margin:0 0 10px; }
.err h1 { font-size:clamp(28px,5vw,46px); font-weight:700; margin:0 0 14px; }
.err-lead { color:var(--muted); font-size:clamp(16px,2vw,18px); max-width:46ch; margin:0 auto 30px; }
.err-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:34px; }
.err-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; padding-top:24px; border-top:1px solid var(--line); }
.err-links a { color:var(--muted); font-weight:500; font-size:15px; padding:6px 0; }
.err-links a:hover { color:var(--brand); }

/* ============================================================
   Cookie-Consent — Banner + runder Keks-Button + Einstellungen (unten links)
   ============================================================ */
.cookie-dock { position:fixed; left:20px; bottom:20px; z-index:130; }

/* Runder Keks-Button */
.cookie-fab { position:relative; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:var(--ink); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(15,23,42,.6);
  opacity:0; transform:scale(.7); pointer-events:none;
  transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .28s ease, box-shadow .2s ease; }
.cookie-dock.ready .cookie-fab { opacity:1; transform:scale(1); pointer-events:auto; }
.cookie-fab:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 22px 40px -14px rgba(15,23,42,.72); }
.cookie-fab:active { transform:scale(.95); }
.cookie-fab svg { display:block; width:24px; height:24px; }
.cookie-fab.receive { animation:cookiePop .42s ease-out; }
@keyframes cookiePop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }

/* Gemeinsame Optik (Banner + Panel) */
.cookie-banner, .cookie-panel { position:absolute; background:var(--ink); color:#fff;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px -28px rgba(15,23,42,.85); transform-origin:left bottom; }

/* Langer, flacher Banner in der Ecke — Keks-Icon links */
.cookie-banner { left:0; bottom:0; width:min(620px,calc(100vw - 40px)); border-radius:16px;
  display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; padding:12px 14px;
  opacity:0; transform:translateY(12px) scale(.985);
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.cookie-banner.in { opacity:1; transform:translateY(0) scale(1); }
.cookie-banner.collapse { opacity:0; transform:scale(.1); border-radius:50%; pointer-events:none;
  transition:transform .4s cubic-bezier(.55,0,.9,.35), opacity .32s ease .05s, border-radius .4s ease; }
.cookie-ic { flex:none; display:grid; place-items:center; }
.cookie-ic svg { display:block; width:26px; height:26px; }
.cookie-text { flex:1 1 240px; font-size:12.5px; line-height:1.5; color:#CBD5E1; margin:0; }
.cookie-text a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie-actions { flex:none; display:flex; align-items:center; gap:10px; }
@media (max-width:560px){
  .cookie-actions { flex:1 1 100%; }
  .cookie-actions .cookie-reject, .cookie-actions .cookie-accept { flex:1; }
}

/* Buttons — Akzeptieren & Ablehnen gleich prominent (DSGVO-Symmetrie) */
.cookie-accept, .cookie-reject, .cookie-save { font-family:var(--font-body); font-weight:600; font-size:13px;
  border-radius:var(--r-sm); padding:9px 16px; cursor:pointer; border:none; text-align:center; white-space:nowrap;
  transition:transform .12s ease, background .15s ease; }
.cookie-accept, .cookie-save { background:var(--brand); color:var(--brand-on); box-shadow:0 8px 20px -10px rgba(37,99,235,.6); }
.cookie-accept:hover, .cookie-save:hover { background:var(--brand-dark); transform:translateY(-1px); }
.cookie-reject { background:rgba(255,255,255,.14); color:#fff; }
.cookie-reject:hover { background:rgba(255,255,255,.24); transform:translateY(-1px); }
.cookie-accept:active, .cookie-reject:active, .cookie-save:active { transform:translateY(1px) scale(.98); }

/* Panel */
.cookie-panel { left:0; bottom:66px; width:min(340px,calc(100vw - 40px)); border-radius:16px;
  padding:18px; opacity:0; transform:translateY(12px) scale(.985); visibility:hidden; pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility 0s linear .3s; }
.cookie-dock.open .cookie-panel { opacity:1; transform:translateY(0) scale(1); visibility:visible; pointer-events:auto;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .22s ease; }
.cookie-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cookie-panel-title { font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em; }
.cookie-panel-close { background:none; border:none; color:#94A3B8; font-size:22px; line-height:1; cursor:pointer;
  padding:2px 4px; border-radius:6px; transition:color .15s; }
.cookie-panel-close:hover { color:#fff; }
.cookie-panel-lead { font-size:12.5px; line-height:1.5; color:#94A3B8; margin:0 0 8px; }
.cookie-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08); }
.cookie-row-txt { display:flex; flex-direction:column; gap:3px; }
.cookie-row-t { font-size:13.5px; font-weight:600; }
.cookie-row-d { font-size:12px; color:#94A3B8; line-height:1.4; }
.cookie-panel-actions { display:flex; gap:9px; margin-top:16px; }
.cookie-panel-actions .cookie-accept, .cookie-panel-actions .cookie-save { flex:1; }
.switch { position:relative; flex:none; width:42px; height:24px; }
.switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.switch i { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.18);
  transition:background .25s var(--ease-out); pointer-events:none; }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.switch input:checked ~ i { background:var(--brand); }
.switch input:checked ~ i::after { transform:translateX(18px); }
.switch.is-locked i { background:var(--brand); opacity:.5; }
.switch.is-locked input { cursor:not-allowed; }
@media (prefers-reduced-motion: reduce){
  .cookie-fab, .cookie-dock.ready .cookie-fab, .cookie-dock.open .cookie-fab,
  .cookie-banner, .cookie-dock.open .cookie-panel { transition:opacity .2s linear; transform:none; }
  .cookie-fab.receive { animation:none; }
  .cookie-banner.collapse { transform:none; }
}

/* ============================================================
   Termin & Erreichbarkeit (termin.html)
   ============================================================ */
.termin-grid { display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:900px){ .termin-grid { grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; } }
.avail > h2, .book > h2 { font-size:22px; margin-bottom:6px; }
.avail-lead, .book-lead { color:var(--muted); font-size:15px; margin:0 0 18px; }

.avail-block { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.avail-block:first-of-type { border-top:1px solid var(--line); }
.avail-ic { width:44px; height:44px; flex:none; border-radius:12px; background:var(--brand-tint); color:var(--brand-dark); font-size:20px; }
.avail-body { flex:1; min-width:0; }
.avail-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 16px; }
.avail-top h3 { font-size:17px; font-weight:600; font-family:var(--font-display); }
.avail-time { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--brand); white-space:nowrap; }
.avail-body p { color:var(--muted); font-size:14.5px; margin-top:5px; }

.avail-note { display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px 18px; background:var(--surface-2); border-radius:var(--r); color:var(--muted); font-size:14.5px; line-height:1.55; }
.avail-note .ico { color:var(--brand); font-size:19px; margin-top:1px; }

.avail-direct { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:24px; }
.avail-direct a { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--ink); }
.avail-direct a:hover { color:var(--brand); }
.avail-direct .ico { color:var(--brand); font-size:18px; }

.book-embed { border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-2); min-height:308px; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 28px; margin-bottom:18px; }
.book-embed-inner { max-width:300px; }
.book-embed-inner .ico { font-size:42px; color:var(--brand); opacity:.9; }
.book-embed-inner strong { display:block; margin-top:14px; font-family:var(--font-display); font-size:17px; color:var(--ink); }
.book-embed-hint { color:var(--muted); font-size:13.5px; margin-top:8px; line-height:1.5; }
.book-foot { text-align:center; color:var(--muted); font-size:14px; margin-top:16px; }
.book-foot a { color:var(--brand); font-weight:600; }

/* Ablauf-Schritte (linke Spalte) */
.steps { margin-top:2px; }
.step { display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
.step:first-child { border-top:1px solid var(--line); }
.step-n { width:34px; height:34px; flex:none; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }
.step h3 { font-size:16px; font-weight:600; font-family:var(--font-display); }
.step p { color:var(--muted); font-size:14.5px; margin-top:3px; }
.book-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
.book-meta .tag-mini { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--brand-dark); background:var(--brand-tint); border-radius:var(--r-pill); padding:8px 15px; }
.book-meta .tag-mini .ico { font-size:16px; }
.book-tip { display:flex; gap:11px; align-items:flex-start; margin-top:20px; padding:15px 17px; background:var(--surface-2); border-radius:var(--r); color:var(--muted); font-size:14px; line-height:1.55; }
.book-tip .ico { color:var(--brand); font-size:18px; margin-top:1px; flex:none; }

/* Buchungs-Flow (single column, ohne Pills/Box) */
.bookflow { max-width:880px; margin:0 auto; }
.bookflow > h2 { text-align:center; font-size:clamp(22px,3vw,28px); }
.bookflow > .lead { text-align:center; color:var(--muted); max-width:54ch; margin:10px auto 0; font-size:clamp(15px,1.6vw,17px); }
.steps3 { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:1fr; }
.steps3 li { padding:24px 0; border-top:1px solid var(--line); }
.steps3 li:last-child { border-bottom:1px solid var(--line); }
@media (min-width:760px){
  .steps3 { grid-template-columns:repeat(3,1fr); column-gap:40px; }
  .steps3 li { border-top:none; border-bottom:none; padding:0; }
  .steps3 li + li { border-left:1px solid var(--line); padding-left:36px; }
}
.steps3 .step-n { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px; margin-bottom:16px; }
.steps3 h3 { font-size:17px; font-weight:600; margin-bottom:6px; }
.steps3 p { color:var(--muted); font-size:14.5px; line-height:1.6; }
.bookcta { text-align:center; margin-top:48px; }
.bookcta .btn { min-width:248px; }
.bookcta .meta { color:var(--muted); font-size:14px; margin-top:18px; }
.booknote { text-align:center; color:var(--muted); font-size:14.5px; line-height:1.65; max-width:62ch; margin:36px auto 0; padding-top:28px; border-top:1px solid var(--line); }
.booknote a { color:var(--brand); font-weight:600; white-space:nowrap; }

/* ============================================================
   Eigener Termin-Kalender (Modal)
   ============================================================ */
.cal-modal[hidden], .cal-step[hidden] { display:none; }
.cal-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.cal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.cal-dialog { position:relative; width:100%; max-width:760px; max-height:90vh; overflow-y:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(15,23,42,.5); padding:30px; animation:calIn .3s var(--ease); }
@keyframes calIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
.cal-x { position:absolute; top:16px; right:16px; width:40px; height:40px; border:none; background:var(--surface-2); border-radius:50%; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s, color .15s; }
.cal-x:hover { background:var(--line); color:var(--ink); }
.cal-x svg { width:18px; height:18px; stroke:currentColor; stroke-width:2; stroke-linecap:round; fill:none; }
.cal-head h2 { font-size:21px; }
.cal-head .cal-sub { color:var(--muted); font-size:14.5px; margin-top:6px; min-height:1.4em; }
.cal-body { margin-top:22px; }
.cal-back { background:none; border:none; color:var(--brand); font-weight:600; font-size:14px; cursor:pointer; padding:4px 0; margin-bottom:16px; font-family:var(--font-body); }
.cal-back:hover { text-decoration:underline; }

/* Zwei-Spalten-Scheduler: links Tage, rechts Stunden */
.cal-sched { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:600px){ .cal-sched { grid-template-columns:210px 1fr; gap:26px; } }

.cal-days { display:flex; flex-direction:column; gap:4px; }
@media (min-width:600px){ .cal-days { max-height:392px; overflow-y:auto; padding-right:4px; } }
.cal-wk { position:sticky; top:0; z-index:1; background:var(--surface); font-size:12px; font-weight:700; color:var(--ink); padding:6px 0; margin:8px 0 4px; }
.cal-wk.first { margin-top:0; }
.cal-wk span { font-weight:500; color:var(--muted-soft); }
.cal-dbtn { display:flex; flex-direction:column; gap:1px; align-items:flex-start; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; text-align:left; white-space:nowrap; transition:border-color .15s, background .15s; }
.cal-dbtn:hover { border-color:var(--brand); }
.cal-dbtn.active { background:var(--brand); border-color:var(--brand); }
.cal-dbtn .dw { font-size:11.5px; font-weight:600; color:var(--muted-soft); }
.cal-dbtn .dd { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); }
.cal-dbtn.active .dw, .cal-dbtn.active .dd { color:#fff; }
@media (max-width:599px){
  .cal-days { flex-direction:row; overflow-x:auto; gap:8px; padding:2px; }
  .cal-wk { display:none; }
  .cal-dbtn { flex:none; }
}

.cal-agenda-head { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.cal-agenda-sub { font-size:13px; color:var(--muted); margin:4px 0 14px; }
.cal-rows { display:flex; flex-direction:column; gap:7px; max-height:348px; overflow-y:auto; padding-right:4px; }
.cal-row { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); text-align:left; }
.cal-row.free { cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.cal-row.free:hover { border-color:var(--brand); background:var(--brand-50); color:var(--brand-dark); }
.cal-row .tag { font-family:var(--font-body); font-size:12.5px; font-weight:600; }
.cal-row.free .tag { color:var(--brand); }
.cal-row.booked { background:var(--surface-2); border-color:var(--line); color:var(--muted-soft); cursor:not-allowed; }
.cal-row.booked .tag { color:var(--muted-soft); }
.cal-row.past { background:var(--surface-2); border-color:var(--line); color:var(--muted-soft); cursor:not-allowed; opacity:.6; text-decoration:line-through; }
.cal-row.past .tag { color:var(--muted-soft); text-decoration:none; }

#stepConfirm { max-width:440px; margin-left:auto; margin-right:auto; }

.cal-summary { display:flex; align-items:center; gap:13px; padding:16px 18px; background:var(--brand-50); border-radius:var(--r); margin-bottom:22px; }
.cal-summary .ico { color:var(--brand); flex:none; }
.cal-summary b { font-family:var(--font-display); font-size:16px; color:var(--ink); display:block; }
.cal-summary span { font-size:13px; color:var(--muted); }
.cal-field { margin-bottom:14px; }
.cal-field label { display:block; font-size:13.5px; font-weight:600; color:var(--muted-soft); margin-bottom:6px; }
/* Submit-Button: lädt, wird grün, Haken zeichnet sich, Label → Erfolg (kein Morph) */
.cal-fields { transition:opacity .3s ease, max-height .5s var(--ease), margin .5s var(--ease); max-height:360px; overflow:hidden; }
.cal-confirm-top { transition:opacity .3s ease, max-height .45s var(--ease), margin .45s var(--ease); max-height:170px; overflow:hidden; }
.cal-submit { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:52px; margin-top:8px; border:none; border-radius:var(--r-sm); background:var(--brand); color:#fff; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; overflow:hidden; transition:background .3s ease; }
.cal-submit:hover { background:var(--brand-dark); }
.cal-submit-label { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:opacity .18s ease; }
.cal-submit-spin { position:absolute; top:50%; left:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; opacity:0; animation:calSpin .7s linear infinite; }
@keyframes calSpin { to { transform:rotate(360deg); } }
.cal-submit-ok { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; opacity:0; font-weight:600; white-space:nowrap; }
.cal-submit-ok svg { width:20px; height:20px; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; fill:none; stroke-dasharray:30; stroke-dashoffset:30; flex:none; }

.cal-step.is-loading .cal-submit { pointer-events:none; }
.cal-step.is-loading .cal-submit-label { opacity:0; }
.cal-step.is-loading .cal-submit-spin { opacity:1; }

.cal-step.is-done .cal-submit { background:var(--ok); pointer-events:none; }
.cal-step.is-done .cal-submit-label { opacity:0; }
.cal-step.is-done .cal-submit-ok { opacity:1; transition:opacity .2s .12s ease; }
.cal-step.is-done .cal-submit-ok svg { animation:okDraw .45s .28s ease-out forwards; }
.cal-step.is-done .cal-confirm-top { opacity:0; max-height:0; margin:0; pointer-events:none; }
.cal-step.is-done .cal-fields { opacity:0; max-height:0; margin:0; }

.cal-success { text-align:center; }
.cal-success[hidden] { display:none; }
.cal-success p { color:var(--muted); font-size:14.5px; max-width:40ch; margin:14px auto 0; line-height:1.55; }
.cal-success p:focus { outline:none; }
.cal-success:not([hidden]) { animation:stepIn .45s var(--ease) both; }
.cal-note { font-size:12px; color:var(--muted-soft); text-align:center; margin-top:18px; }
@media (max-width:480px){ .cal-dialog { padding:22px 18px; } }

/* --- Modal-Animationen (Stil: animations.dev — kurz, ease-out, kein Zappeln) --- */
.cal-backdrop { animation:calFade .25s ease both; }
@keyframes calFade { from { opacity:0; } to { opacity:1; } }

.cal-step.step-in { animation:stepIn .34s var(--ease) both; }
@keyframes stepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.cal-rows .cal-row { animation:rowIn .3s var(--ease) both; }
.cal-rows .cal-row:nth-child(2){ animation-delay:.04s; }
.cal-rows .cal-row:nth-child(3){ animation-delay:.08s; }
.cal-rows .cal-row:nth-child(4){ animation-delay:.12s; }
.cal-rows .cal-row:nth-child(5){ animation-delay:.16s; }
.cal-rows .cal-row:nth-child(n+6){ animation-delay:.2s; }
@keyframes rowIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

/* Haken-Zeichnung (genutzt vom Button-Morph) */
@keyframes okDraw { to { stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .cal-dialog, .cal-backdrop, .cal-step.step-in, .cal-rows .cal-row,
  .cal-success:not([hidden]) { animation:none; }
  .cal-fields, .cal-confirm-top, .cal-submit, .cal-submit-label, .cal-submit-ok { transition:none; }
  .cal-submit-ok svg { animation:none; stroke-dashoffset:0; }
  .cal-submit-spin { animation:none; }
}

/* E-Mail-Korrektur direkt im Erfolgs-Schritt */
.cal-success p b { color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.cal-edit-line { margin-top:12px; font-size:13px; color:var(--muted); }
.cal-edit-link { background:none; border:none; padding:0; color:var(--brand); font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; text-decoration:underline; text-underline-offset:2px; }
.cal-edit-link:hover { color:var(--brand-dark); }

/* ============================================================
   REDESIGN V2 — Startseite: Tiefe, Rhythmus & visuelle Anker
   Kaskadiert über die Basis. Marke unverändert (Kobaltblau,
   Space Grotesk/Inter, cardless-Geist). Keine Fotos nötig.
   ============================================================ */

:root {
  /* Getönte + Karten-Schatten (blau statt neutralschwarz) → Tiefe mit Markenbezug */
  --shadow-blue:    0 20px 45px -22px rgba(37,99,235,.40);
  --shadow-blue-sm: 0 12px 26px -16px rgba(37,99,235,.30);
  --shadow-card:    0 1px 2px rgba(15,23,42,.04), 0 14px 30px -18px rgba(15,23,42,.20);
  --shadow-card-hv: 0 1px 2px rgba(15,23,42,.05), 0 26px 50px -24px rgba(37,99,235,.32);
  --grid-line:      rgba(37,99,235,.07);
}

/* --- Section-Rhythmus: hell → getönt wechselt hörbar, aber ohne harte Brüche --- */
.block.tint { background:linear-gradient(180deg, var(--surface), var(--surface-2)); }

/* --- Blueprint-Raster (Signature): technisch "gebaut", dezent, gefadet --- */
.hero-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 8%, #000 0%, rgba(0,0,0,.35) 46%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 78% 8%, #000 0%, rgba(0,0,0,.35) 46%, transparent 72%);
}

/* --- Hero: zweiter Mesh-Blob für Tiefe. Marker = schlichter Kicker (keine Pill, kein Puls-Dot) --- */
.hero-ed::after {
  content:""; position:absolute; bottom:-140px; left:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.10), rgba(37,99,235,0) 68%); pointer-events:none; z-index:0;
}

/* Unterseiten-Hero (.page-head): gleiche Blueprint-Tiefe wie die Startseite */
.page-head { z-index:0; }
.page-head .wrap { position:relative; z-index:1; }
.page-head::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(110% 75% at 50% -5%, #000 0%, transparent 66%);
          mask-image:radial-gradient(110% 75% at 50% -5%, #000 0%, transparent 66%);
}

/* --- Kennzahlen als Stat-Karten --- */
.factline {
  border-top:none; padding-top:0; margin-top:54px;
  grid-template-columns:repeat(2,1fr); gap:16px;
}
@media (min-width:760px){ .factline { grid-template-columns:repeat(4,1fr); gap:18px; } }
.factline .f {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 22px 20px; box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.factline .f:hover { transform:translateY(-3px); box-shadow:var(--shadow-card-hv); }
.factline .f .n { font-size:clamp(27px,3.3vw,36px); }
.factline .f .c { font-size:13.5px; color:var(--muted); margin-top:8px; }

/* --- Leistungen als Karten (Icon-Feld + Ordnungszahl in der Ecke) --- */
.svc { border-top:none; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:760px){ .svc { grid-template-columns:repeat(3,1fr); gap:22px; } }
.svc-row {
  border-bottom:none; padding:30px 26px; align-items:flex-start;
  display:flex; flex-direction:column; gap:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.svc-row:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hv); }
.svc-head { position:relative; width:100%; flex-direction:column; align-items:flex-start; gap:16px; }
.svc-num {
  position:absolute; top:2px; right:0; font-family:var(--font-display); font-weight:700;
  font-size:22px; color:var(--brand); letter-spacing:-.02em; line-height:1; opacity:.28;
}
.svc-ic {
  width:56px; height:56px; border-radius:16px; font-size:26px;
  background:linear-gradient(155deg, var(--brand-tint), #fff);
  color:var(--brand-dark); box-shadow:var(--shadow-blue-sm), inset 0 0 0 1px rgba(37,99,235,.12);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
}
.svc-row:hover .svc-ic {
  background:linear-gradient(155deg, var(--brand), var(--brand-dark)); color:#fff;
  transform:translateY(-3px) rotate(-3deg); box-shadow:var(--shadow-blue);
}
.svc-row h3 { font-size:clamp(20px,2.1vw,24px); }
.svc-row .d { margin-top:14px; font-size:15px; }
.svc-row .d .tags { flex-direction:column; gap:9px; margin-top:14px; }
.svc-row .d .tags span::before { color:var(--brand); }

/* --- Preise als Karten (Startseite, mittlere hervorgehoben) --- */
.prows { border-top:none; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:820px){ .prows { grid-template-columns:repeat(3,1fr); gap:34px; align-items:stretch; padding-top:8px; } }
.prow {
  border-bottom:none; margin:0; padding:30px 26px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.prow:not(.feat):hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hv); background:var(--surface); }
.prow .pmain { flex:0 0 auto; }
.prow .pn { font-size:clamp(20px,2.2vw,24px); }
.prow .pf { margin-top:10px; font-size:14.5px; }
.prow .pprice { margin-top:22px; font-size:clamp(28px,3vw,34px); }
.prow .pfeat { list-style:none; padding:22px 0 0; margin:20px 0 24px; border-top:1px solid var(--line); display:grid; gap:11px; width:100%; }
.prow .pfeat li { position:relative; padding-left:26px; font-size:14px; color:var(--ink-soft); line-height:1.45; }
.prow .pfeat li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--brand); font-weight:700; }
.prow .pgo {
  margin-top:auto; width:100%; justify-content:center;
  padding:13px 20px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-weight:600;
  border:1.5px solid var(--line-strong);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.prow .pgo:hover { border-color:#cbd5e1; background:var(--surface-2); color:var(--ink); }
.prow.feat .pgo {
  background:var(--brand); color:var(--brand-on); border-color:var(--brand);
  box-shadow:var(--shadow-blue-sm);
}
.prow.feat .pgo:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:var(--brand-on); box-shadow:var(--shadow-blue); }
.prow:hover .pgo { transform:none; }
.prow.feat { border:2px solid var(--brand); box-shadow:var(--shadow-blue); }
@media (min-width:820px){
  .prow.feat { transform:translateY(-8px); }
  .prow.feat:hover { transform:translateY(-12px); box-shadow:var(--shadow-blue); }
}
.prow .ptag {
  background:var(--brand); color:#fff; padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; box-shadow:var(--shadow-blue-sm);
}
.prow.feat .pprice { color:var(--brand-dark); }

/* --- Benchmark: Balken statt nackter Zahl → wir vs. Schnitt sichtbar --- */
.benchline { gap:36px 44px; padding-top:40px; }
.benchline .b .s { font-size:clamp(40px,5.4vw,60px); }
.benchline .bar {
  position:relative; height:8px; border-radius:var(--r-pill);
  background:var(--line); margin:16px 0 12px; overflow:hidden;
}
.benchline .bar-fill {
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition:width 1.1s var(--ease); transition-delay:.15s;
}
.js .benchline .b.in .bar-fill { width:var(--w,100%); }
.benchline .bar-avg {
  position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:2px;
  background:var(--ink); left:var(--a,60%); opacity:.55;
}
/* ohne JS / reduced-motion: Balken direkt gefüllt */
.benchline .bar-fill { width:var(--w,100%); }
.js .benchline .b:not(.in) .bar-fill { width:0; }
@media (prefers-reduced-motion:reduce){ .js .benchline .b .bar-fill { width:var(--w,100%); transition:none; } }

/* --- "Warum wir": Zeilen mit blauem Anker + dezenter Tiefe beim Hover --- */
.rowlist .r { padding-left:20px; position:relative; }
.rowlist .r::before {
  content:""; position:absolute; left:0; top:26px; width:3px; height:20px; border-radius:3px;
  background:var(--brand); transform:scaleY(.55); transform-origin:top; opacity:.5;
  transition:transform .22s var(--ease-out), opacity .22s var(--ease-out);
}
.rowlist .r:hover::before { transform:scaleY(1); opacity:1; }
.rowlist .r h4 { font-size:20px; }

/* --- CTA-Band: Blueprint-Textur für Konsistenz mit dem Hero --- */
.ctaband::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(90% 90% at 15% 100%, #000, transparent 70%);
          mask-image:radial-gradient(90% 90% at 15% 100%, #000, transparent 70%);
}

/* --- Buttons: getönter Glow für mehr Präsenz --- */
.btn-primary { box-shadow:var(--shadow-blue-sm); }
.btn-primary:hover { box-shadow:var(--shadow-blue); }

/* --- Angebote: Pakete als Karten --- */
.plans { border-top:none; display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:820px){ .plans { grid-template-columns:repeat(3,1fr); gap:34px; align-items:stretch; padding-top:8px; } }
.plan {
  border-bottom:none; margin:0; padding:32px 28px; border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:0;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.plan:not(.feat):hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hv); }
.plan.feat { border:2px solid var(--brand); box-shadow:var(--shadow-blue); }
@media (min-width:820px){
  .plan.feat { transform:translateY(-8px); }
  .plan.feat:hover { transform:translateY(-12px); box-shadow:var(--shadow-blue); }
}
.plan-head { display:flex; flex-direction:column; align-items:flex-start; }
.plan-head .ptag { background:var(--brand); color:#fff; }
.plan-head .pprice { margin-top:18px; }
.plan-head .btn { width:100%; margin-top:22px; }
.plan-feat { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }

/* Empfohlen-Badge als zentrierter Banner auf der oberen Kante (Pricing-Standard) */
.prow, .plan { position:relative; }
.prow.feat .ptag, .plan.feat .ptag {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  margin:0; white-space:nowrap; box-shadow:var(--shadow-blue-sm);
}

/* --- Team-Karten (Über uns) --- */
.team { display:grid; grid-template-columns:1fr; gap:22px; margin-top:8px; }
@media (min-width:600px){ .team { grid-template-columns:1fr 1fr; gap:26px; max-width:820px; } }
.member {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:34px 28px; text-align:center;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.member:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hv); }
.member-av {
  width:92px; height:92px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(155deg, var(--brand-tint), #fff); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:32px; letter-spacing:.02em;
  box-shadow:var(--shadow-blue-sm), inset 0 0 0 1px rgba(37,99,235,.14);
}
.member h3 { font-size:20px; }
.member-role { color:var(--brand-dark); font-weight:600; font-size:14px; margin-top:6px; }
.member-bio { color:var(--muted); font-size:14.5px; margin-top:14px; line-height:1.6; }

/* --- Mobiler Sticky-CTA entfernt (CTA ist bereits oben verfügbar) --- */
.mcta { display:none; }

/* --- Buchungs-Schritte (kontakt.html) als Karten --- */
.steps3 { gap:18px; }
.steps3 li { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:28px 24px; }
@media (min-width:760px){
  .steps3 { column-gap:22px; }
  .steps3 li { padding:28px 24px; border:1px solid var(--line); }
  .steps3 li + li { border-left:1px solid var(--line); padding-left:24px; }
}

/* --- 404: dezenter Blueprint hinter dem Fehlercode --- */
.err { position:relative; z-index:0; }
.err .wrap { position:relative; z-index:1; }
.err::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(85% 65% at 50% 32%, #000, transparent 70%);
          mask-image:radial-gradient(85% 65% at 50% 32%, #000, transparent 70%);
}

@media (max-width:560px){
  .svc-ic { width:50px; height:50px; font-size:23px; }
  .plan, .prow, .svc-row { padding-left:20px; padding-right:20px; }
}

/* „Tarifdetails ansehen" — Link mittig in der Karte, Unterstrich fährt beim Hovern animiert ein */
.plan-details { grid-column:1 / -1; justify-self:center; margin-top:10px; position:relative; display:inline-block; font-weight:600; font-size:14.5px; color:var(--brand-dark); text-decoration:none; padding:6px 2px; transition:color var(--dur-1) var(--ease); }
.plan-details::after { content:""; position:absolute; left:2px; right:2px; bottom:3px; height:2px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease-out); }
.plan-details:hover { color:var(--brand); }
.plan-details:hover::after, .plan-details:focus-visible::after { transform:scaleX(1); }
@media (prefers-reduced-motion: reduce) { .plan-details::after { transition:none; } }

/* ---- Tarif-Detailseiten (angebot-*.html) ---- */
.tar-hero { position:relative; overflow:hidden; padding:44px 0 48px; }
.tar-hero::before { content:""; position:absolute; top:-240px; left:50%; transform:translateX(-50%); width:820px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.10), rgba(37,99,235,0) 70%); pointer-events:none; }
.tar-hero .wrap { position:relative; z-index:1; }
.tar-intro { max-width:760px; margin-bottom:34px; }
.tar-intro h1 { font-size:clamp(30px,5vw,46px); font-weight:700; letter-spacing:-.02em; margin:14px 0 0; }
.tar-lead { color:var(--muted); font-size:clamp(16px,1.7vw,18px); line-height:1.6; margin:16px 0 0; }

/* Zweispaltig: Karte oben rechts (Desktop), auf dem Handy direkt unter dem Titel */
.tar-grid { display:grid; grid-template-columns:1fr; grid-template-areas:"side" "main"; gap:32px; }
@media (min-width:900px){ .tar-grid { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); grid-template-areas:"main side"; gap:56px; align-items:start; } }
.tar-main { grid-area:main; }
.tar-side { grid-area:side; }
.tar-main h2 { font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.02em; margin:0 0 18px; }
.tar-main h2:not(:first-child) { margin-top:42px; }
.tar-main > p { color:var(--muted); font-size:16px; line-height:1.7; max-width:62ch; }
.tar-main > p + p { margin-top:14px; }
.tar-note { color:var(--muted-soft); font-size:14px; margin-top:14px; }

.speclist { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
@media (min-width:560px){ .speclist { grid-template-columns:1fr 1fr; gap:12px 30px; } }
.speclist li { position:relative; padding-left:28px; font-size:15px; color:var(--ink-soft); line-height:1.5; }
.speclist li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--brand); font-weight:700; font-size:16px; }

.tar-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:26px 24px; }
@media (min-width:900px){ .tar-card { position:sticky; top:92px; } }
.tar-card.feat { border:2px solid var(--brand); box-shadow:var(--shadow-blue); }
.tar-card .tc-price { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4vw,40px); color:var(--ink); letter-spacing:-.02em; }
.tar-card .tc-price small { font-size:15px; color:var(--muted-soft); font-weight:500; }
.tar-card .tc-note { color:var(--brand-dark); font-weight:600; font-size:13.5px; margin:5px 0 16px; }
.tar-card .tc-text { color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 18px; }
.tar-card .btn { width:100%; }
.tar-card .btn + .btn { margin-top:10px; }
.tar-card .tc-mini { list-style:none; padding:18px 0 0; margin:18px 0 0; display:grid; gap:10px; border-top:1px solid var(--line); }
.tar-card .tc-mini li { position:relative; padding-left:24px; font-size:14px; color:var(--ink-soft); }
.tar-card .tc-mini li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }