/* ── Fonts: SELBST GEHOSTET (kein Google-CDN).
   Die Website wirbt mit DSGVO-Konformität – Google Fonts würde die IP jedes
   Besuchers an Google übertragen (LG München I, 3 O 17493/20). Beide Familien
   sind Open-Font-License, Selbsthosting ist ausdrücklich erlaubt.
   Variable Fonts: je EINE Datei für alle Schnitte (92 KB gesamt). ───────────── */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Design-Tokens: identisch zur App (Direction C „Boutique") ─────────────── */
:root{
  --cream:#f8f0e7; --card:#fffaf4; --ink:#2c2230; --muted:#7a6a76;
  --plum:#5a2f4d; --plum-deep:#46223c; --plum-soft:#8a4f76;
  --apricot:#d07a4a; --apricot-soft:#e8a06a;
  --border:#ecdccb; --secondary:#f3e7da;
  --radius:1.25rem; --radius-sm:.75rem;
  --shadow:0 4px 24px rgba(44,34,48,.07);
  --shadow-lg:0 18px 50px rgba(44,34,48,.13);
  --maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces','Georgia',serif; font-weight:600; line-height:1.15; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.2rem}
p{text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--plum); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{padding:clamp(56px,8vw,104px) 0}
.eyebrow{font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--apricot)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--muted)}
.center{text-align:center}
.mx{max-width:660px; margin-inline:auto}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:1rem; font-weight:600; text-decoration:none; cursor:pointer;
  padding:.85rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--plum); color:#fbeee6; box-shadow:0 6px 18px rgba(90,47,77,.28)}
.btn-primary:hover{background:var(--plum-deep); box-shadow:0 10px 26px rgba(90,47,77,.34)}
.btn-ghost{background:transparent; color:var(--plum); border-color:rgba(90,47,77,.28)}
.btn-ghost:hover{background:rgba(90,47,77,.06); border-color:var(--plum)}
.btn-accent{background:var(--apricot); color:#2c2230; box-shadow:0 6px 18px rgba(208,122,74,.3)}
.btn-accent:hover{background:var(--apricot-soft)}
.btn-lg{padding:1rem 1.9rem; font-size:1.05rem}

/* ── Header ────────────────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:50; background:rgba(248,240,231,.88);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:1.5rem; height:72px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:'Fraunces',serif; font-size:1.35rem; font-weight:600; color:var(--plum)}
.brand svg{width:30px; height:30px}
.nav-links{display:flex; gap:1.4rem; margin-left:auto; font-size:.95rem; font-weight:500}
.nav-links a{text-decoration:none; color:var(--ink); opacity:.8; padding:.25rem 0; border-bottom:2px solid transparent}
.nav-links a:hover{opacity:1; color:var(--plum); border-bottom-color:var(--apricot)}
.nav-cta{display:flex; align-items:center; gap:.75rem}
.tel{display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:600; color:var(--plum); white-space:nowrap}
.tel:hover{color:var(--apricot)}

/* ── Mobil-Menü ────────────────────────────────────────────────────────────
   Unterhalb von 960px passt die Navigation nicht mehr in die Leiste. Sie wird
   NICHT einfach ausgeblendet (dann wäre die Seite auf dem Handy unnavigierbar),
   sondern hinter einen Umschalter gelegt. Telefon und „Demo buchen" bleiben
   immer sichtbar – das sind die beiden Wege, auf denen konvertiert wird. */
.nav-toggle{
  display:none; align-items:center; justify-content:center; width:42px; height:42px;
  border:1.5px solid rgba(90,47,77,.28); border-radius:12px; background:transparent;
  color:var(--plum); cursor:pointer; padding:0; flex:none;
}
.nav-toggle:hover{border-color:var(--plum); background:rgba(90,47,77,.06)}
.nav-toggle svg{width:20px; height:20px}
.nav-toggle .i-close{display:none}
header.open .nav-toggle .i-open{display:none}
header.open .nav-toggle .i-close{display:block}

@media(max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:6px 24px 18px;
    background:var(--cream); border-bottom:1px solid var(--border);
    box-shadow:0 14px 28px rgba(44,34,48,.09);
  }
  header.open .nav-links{display:flex}
  .nav-links a{
    padding:.95rem 0; border-bottom:1px solid var(--border); border-radius:0;
    font-size:1.02rem; opacity:1;
  }
  .nav-links a:last-child{border-bottom:none}
  .nav-links a[aria-current="page"]{color:var(--plum); font-weight:600}
}
/* Auf schmalen Handys ist die Leiste zu voll: Marke + Telefon + CTA + Burger
   passen bei 375px nicht nebeneinander, der CTA bricht sonst zweizeilig um.
   Der CTA bleibt (er ist das Conversion-Ziel), stattdessen schrumpfen Marke,
   Abstände und Button-Polsterung. Die Telefonnummer wird zum reinen Icon –
   der Link bleibt, nur die Ziffern weichen. */
@media(max-width:620px){
  .tel span{display:none}
  .nav{gap:.6rem}
  .brand{font-size:1.15rem; gap:.45rem}
  .brand svg{width:26px; height:26px}
  .nav-cta{gap:.5rem}
  .nav-cta .btn{padding:.68rem 1rem; font-size:.9rem; white-space:nowrap}
  .nav-toggle{width:40px; height:40px}
}
/* „Anmelden": auf dem Desktop als Ghost-Button in der CTA-Leiste (.btn-login),
   auf schmalen Handys stattdessen als Eintrag im aufklappbaren Menü
   (.nav-login-mobile) – sonst wird die Kopfleiste bei 375px zu voll und der
   CTA/Burger bricht um. */
.nav-login-mobile{display:none}
@media(max-width:620px){
  .nav-cta .btn-login{display:none}
  .nav-login-mobile{display:block}
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(40px,6vw,72px); padding-bottom:clamp(48px,7vw,88px)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.hero h1{margin:.6rem 0 1rem}
.hero .lead{max-width:34rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.75rem 0 1.1rem}
.trust{display:flex; flex-wrap:wrap; gap:1rem 1.25rem; font-size:.88rem; color:var(--muted)}
.trust span{display:inline-flex; align-items:center; gap:.4rem}
.trust svg{width:15px; height:15px; color:var(--apricot); flex:none}

/* ── Hero-Mockup: das Produkt selbst, statt Stockfoto ──────────────────────── */
/* Die Handy-Attrappe überlappt bewusst nur die RECHTE KANTE des Browsers –
   sie darf niemals das Buchungs-Widget verdecken, das ist der Beweis des Produkts.
   Deshalb bekommt der Browser rechts Platz reserviert. */
.mock{position:relative; padding:0 0 28px 0}
.browser{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; margin-right:118px;
}
.browser-bar{display:flex; align-items:center; gap:.4rem; padding:.65rem .85rem; background:#f5ece2; border-bottom:1px solid var(--border)}
.dot{width:9px; height:9px; border-radius:50%; background:#dcc9b6}
.url{
  flex:1; margin-left:.5rem; background:#fffaf4; border:1px solid var(--border); border-radius:999px;
  font-size:.68rem; color:var(--muted); padding:.24rem .7rem; text-align:center;
}
.site{padding:18px}
.site-hd{display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--border)}
.site-logo{font-family:'Fraunces',serif; font-weight:600; font-size:.95rem; color:var(--plum)}
.site-nav{display:flex; gap:9px}
.site-nav i{display:block; width:26px; height:5px; border-radius:3px; background:var(--secondary)}
.widget{margin-top:14px; border:1.5px solid rgba(90,47,77,.16); border-radius:var(--radius-sm); padding:13px; background:linear-gradient(180deg,#fffaf4,#fdf5ec)}
.widget-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.widget-h strong{font-family:'Fraunces',serif; font-size:.9rem}
.pill{font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fbeee6; background:var(--plum); padding:.2rem .5rem; border-radius:999px}
.svc{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid var(--border); border-radius:9px; background:#fff; margin-bottom:6px; font-size:.76rem}
.svc.sel{border-color:var(--plum); box-shadow:0 0 0 2.5px rgba(90,47,77,.11)}
.svc em{font-style:normal; color:var(--muted); font-size:.7rem}
.svc b{color:var(--apricot); font-weight:700}
.slots{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:9px}
.slot{font-size:.66rem; text-align:center; padding:5px 0; border:1px solid var(--border); border-radius:7px; background:#fff; color:var(--muted)}
.slot.on{background:var(--plum); color:#fbeee6; border-color:var(--plum); font-weight:600}
.phone{
  position:absolute; right:0; bottom:6px; width:138px; background:var(--ink);
  border-radius:22px; padding:7px; box-shadow:var(--shadow-lg);
}
@media(max-width:420px){ .phone{display:none} .browser{margin-right:0} }
.phone-scr{background:var(--card); border-radius:16px; padding:9px}
.wa{background:#fff; border:1px solid var(--border); border-left:3px solid #25d366; border-radius:9px; padding:8px; font-size:.6rem; line-height:1.5}
.wa b{display:block; font-size:.62rem; margin-bottom:3px; color:var(--plum)}
.wa-t{font-size:.52rem; color:var(--muted); text-align:right; margin-top:4px}

/* ── Karten & Raster ───────────────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:880px){ .grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} }
.ico{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:rgba(208,122,74,.13); color:var(--apricot); margin-bottom:14px}
.ico svg{width:22px; height:22px}
.euro{font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--plum); margin-top:12px; display:block}
.euro small{display:block; font-family:'Manrope',sans-serif; font-size:.74rem; font-weight:500; color:var(--muted); margin-top:3px; letter-spacing:0}

/* ── Sektion: Problem (dunkel) ─────────────────────────────────────────────── */
.dark{background:var(--plum); color:#fbeee6}
.dark h2{color:#fff}
.dark .lead{color:rgba(251,238,230,.78)}
.dark .card{background:rgba(255,255,255,.055); border-color:rgba(251,238,230,.16); box-shadow:none; color:#fbeee6}
.dark .euro{color:var(--apricot-soft)}
.dark .euro small{color:rgba(251,238,230,.6)}
.dark .ico{background:rgba(232,160,106,.16); color:var(--apricot-soft)}

/* ── Schritte ──────────────────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:s}
@media(max-width:880px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:8px}
.step::before{
  counter-increment:s; content:counter(s);
  font-family:'Fraunces',serif; font-size:2.6rem; font-weight:700; color:rgba(90,47,77,.16); line-height:1;
}
.step h3{margin:.35rem 0 .5rem}
.step p{color:var(--muted); font-size:.96rem}

/* ── Funktionen ────────────────────────────────────────────────────────────── */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:880px){ .feat{grid-template-columns:1fr} }
.feat a{
  text-decoration:none; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; display:block; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.feat a:hover{border-color:var(--plum); transform:translateY(-2px); box-shadow:var(--shadow)}
.feat h3{margin-bottom:.4rem}
.feat p{font-size:.92rem; color:var(--muted)}
.feat span{display:inline-flex; align-items:center; gap:.3rem; margin-top:.85rem; font-size:.85rem; font-weight:600; color:var(--plum)}

/* ── Founding-Member ───────────────────────────────────────────────────────── */
.founding{
  background:linear-gradient(135deg,#fffaf4,#f7e8db); border:1.5px solid var(--apricot);
  border-radius:var(--radius); padding:clamp(28px,4vw,44px); box-shadow:var(--shadow);
}
.badge{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--apricot); color:#2c2230;
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.32rem .75rem; border-radius:999px;
}
.perks{list-style:none; display:grid; gap:.6rem; margin:1.25rem 0 1.5rem}
.perks li{display:flex; gap:.6rem; align-items:flex-start; font-size:.98rem}
.perks svg{width:18px; height:18px; color:var(--plum); flex:none; margin-top:3px}

/* ── Rechner ───────────────────────────────────────────────────────────────── */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
@media(max-width:880px){ .calc{grid-template-columns:1fr} }
.field{margin-bottom:1.1rem}
.field label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.4rem}
.field input[type=range]{width:100%; accent-color:var(--plum)}
.field output{font-family:'Fraunces',serif; font-weight:700; color:var(--plum); font-size:1.05rem}
.result{background:var(--plum); color:#fbeee6; border-radius:var(--radius); padding:28px; text-align:center}
.result .big{font-family:'Fraunces',serif; font-size:clamp(2.2rem,5vw,3.1rem); font-weight:700; color:var(--apricot-soft); line-height:1.1; display:block}
.result .calcline{font-size:.8rem; color:rgba(251,238,230,.7); margin-top:.6rem}

/* ── Preise ────────────────────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
@media(max-width:880px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; position:relative}
.plan.hot{border:2px solid var(--plum); box-shadow:var(--shadow-lg)}
.plan .tag{position:absolute; top:-12px; left:24px; background:var(--apricot); color:#2c2230; font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px}
.price{font-family:'Fraunces',serif; font-size:2.4rem; font-weight:700; color:var(--plum); margin:.5rem 0 .1rem}
.price small{font-family:'Manrope',sans-serif; font-size:.85rem; font-weight:500; color:var(--muted)}
.plan ul{list-style:none; margin:1.1rem 0 1.5rem; display:grid; gap:.5rem}
.plan li{display:flex; gap:.5rem; font-size:.92rem; color:var(--muted)}
.plan li svg{width:16px; height:16px; color:var(--plum); flex:none; margin-top:4px}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq{max-width:780px; margin-inline:auto; display:grid; gap:10px}
details{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 20px}
details[open]{border-color:var(--plum)}
summary{
  cursor:pointer; list-style:none; padding:17px 0; font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-family:'Fraunces',serif; font-size:1.4rem; color:var(--plum); line-height:1; flex:none}
details[open] summary::after{content:'–'}
details p{padding:0 0 17px; color:var(--muted); font-size:.96rem}

/* ── Schluss-CTA + Footer ──────────────────────────────────────────────────── */
.final{background:linear-gradient(135deg,var(--plum),var(--plum-deep)); color:#fbeee6; border-radius:var(--radius); padding:clamp(36px,6vw,64px); text-align:center}
.final h2{color:#fff}
.final p{color:rgba(251,238,230,.8); max-width:44rem; margin:.8rem auto 0}
.final-cta{display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:1.8rem}
.final .tel{color:var(--apricot-soft); font-size:1.05rem}
.final .tel:hover{color:#fff}
footer{border-top:1px solid var(--border); padding:48px 0 32px; font-size:.9rem}
.fgrid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
@media(max-width:880px){ .fgrid{grid-template-columns:1fr 1fr; gap:28px} }
footer h4{font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem}
footer ul{list-style:none; display:grid; gap:.5rem}
footer a{text-decoration:none; color:var(--ink); opacity:.75}
footer a:hover{opacity:1; color:var(--plum)}
.fbot{margin-top:36px; padding-top:22px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; color:var(--muted); font-size:.84rem}

/* ── Rechtstexte (Impressum, Datenschutz, AGB) ───────────────────────────────
   Lange Fließtexte, die tatsächlich gelesen werden müssen: schmalere Spalte als
   im Marketing, mehr Zeilenabstand, sichtbare Gliederung. */
/* Silbentrennung: Deutsche Rechtstexte bestehen aus Wortungetümen
   ("Umsatzsteuer-Identifikationsnummer", "Auftragsverarbeitungsvertrag"), die auf
   schmalen Bildschirmen aus ihrem Absatz herausragen – die eigene H1 tat es auch.
   lang="de" steht im <html>, also trennt der Browser nach deutschen Regeln. */
.legal-head, .legal-body{hyphens:auto; overflow-wrap:break-word}
.legal-head{padding:clamp(48px,7vw,80px) 0 0}
.legal-head h1{max-width:20ch}
.legal-head .lead{margin-top:.9rem; max-width:52ch}
.legal{padding:clamp(28px,4vw,44px) 0 clamp(56px,8vw,88px)}
/* Kopf und Fließtext teilen sich EINE Spalte – sonst beginnt die Überschrift am
   Seitenrand und der Text weiter innen, was wie ein Versehen aussieht. */
.legal-head .wrap, .legal-body{max-width:68ch}
.legal-body h2{
  font-size:clamp(1.15rem,2vw,1.32rem); margin:2.4rem 0 .7rem;
  padding-top:1.4rem; border-top:1px solid var(--border);
}
.legal-body h2:first-of-type{border-top:none; padding-top:0; margin-top:1.4rem}
.legal-body h3{font-size:1.02rem; margin:1.4rem 0 .5rem}
.legal-body p{margin-bottom:.9rem; color:var(--muted); line-height:1.75}
.legal-body p strong{color:var(--ink)}
.legal-body ul{margin:0 0 1.1rem 1.15rem; color:var(--muted); line-height:1.75}
.legal-body li{margin-bottom:.3rem}
.legal-body a{color:var(--plum); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.legal-body a:hover{color:var(--apricot)}

/* Zusammenfassung vorweg: Rechtstexte werden sonst nicht gelesen. Ausdrücklich
   als unverbindlich gekennzeichnet – die Ziffern darunter gelten. */
.legal-tldr{
  background:var(--secondary); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(18px,3vw,26px); margin-bottom:2rem;
}
.legal-tldr h2{border-top:none; padding-top:0; margin:0 0 .6rem}
.legal-tldr p{margin-bottom:0; color:var(--ink)}

.legal-callout{
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--apricot);
  border-radius:var(--radius-sm); padding:clamp(16px,2.4vw,22px); margin:1.6rem 0;
}
.legal-callout h3{margin-top:0}
.legal-callout p:last-child{margin-bottom:0}

.legal-meta{margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--border); font-size:.85rem}

/* ── Kartenraster für "drei Punkte"-Abschnitte ───────────────────────────────
   Lag vorher lokal im No-Show-Rechner. Seit die Branchenseiten dasselbe Raster
   nutzen, gehört es hierher – sonst steht dieselbe Regel achtmal leicht anders. */
.mech{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:880px){ .mech{grid-template-columns:1fr} }
.mech .card h3{margin:.6rem 0 .4rem}
.mech .card p{font-size:.93rem; color:var(--muted)}
.mech .card h3 a:hover{color:var(--apricot) !important}

/* ── Leistungstabellen (Branchenseiten) ──────────────────────────────────────
   Auf schmalen Bildschirmen scrollt die Tabelle in ihrem eigenen Kasten; der
   Seitenkörper darf nie seitwärts wandern. */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:60rem; margin:0 auto}
.vgl-tbl{width:100%; border-collapse:collapse; font-size:.95rem; min-width:26rem}
.vgl-tbl th, .vgl-tbl td{padding:.85rem 1.2rem; text-align:left; border-bottom:1px solid var(--border)}
.vgl-tbl thead th{font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--plum);
  background:var(--secondary); font-size:.88rem}
.vgl-tbl tbody tr:last-child td{border-bottom:none}
.vgl-tbl td{color:var(--muted)}
.vgl-tbl td:first-child{color:var(--ink); font-weight:500}
/* Zahlen rechtsbündig mit gleicher Ziffernbreite: sonst tanzen die Preise. */
.vgl-tbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── Entwurfs-Banner ─────────────────────────────────────────────────────────
   Für Seiten mit unbestätigten Inhalten. Bewusst laut und hässlich: Er soll beim
   Drüberschauen auffallen, nicht sich einfügen. Verschwindet mit dem Entwurf. */
.entwurf{background:#4a2418; color:#f8e6d8; border-bottom:3px solid var(--apricot); padding:18px 0; font-size:.9rem}
.entwurf p{margin-bottom:.6rem}
.entwurf p:last-child{margin-bottom:0}
.entwurf strong{color:var(--apricot-soft)}
.entwurf ul{margin:.6rem 0 .8rem 1.15rem; line-height:1.7}
.entwurf li{margin-bottom:.35rem}
.entwurf code{background:rgba(255,255,255,.14); padding:.1rem .4rem; border-radius:4px; font-size:.85em}

/* ── Porträt + Text nebeneinander (Über uns) ─────────────────────────────── */
.person{display:grid; grid-template-columns:320px 1fr; gap:clamp(28px,4vw,52px); align-items:center}
@media(max-width:820px){ .person{grid-template-columns:1fr; gap:28px} .person-bild{max-width:280px; margin-inline:auto} }
.person-text p{color:var(--muted); margin-bottom:.9rem}
.person-text p:last-child{margin-bottom:0}

/* ── Nummerierte Schrittfolge (So starten Sie) ───────────────────────────────
   Die Nummern stehen hier, weil die Reihenfolge tatsächlich zählt: Ohne Vorlage
   keine Leistungen, ohne Leistungen keine Öffnungszeiten. Kein Zierrat. */
.schritte{list-style:none; display:grid; gap:14px; counter-reset:s}
.schritt{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(18px,2.6vw,26px); box-shadow:var(--shadow)}
.schritt-num{display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; background:var(--plum); color:#fbeee6; font-family:'Fraunces',Georgia,serif;
  font-weight:700; font-size:1.05rem; flex:none}
.schritt h3{margin-bottom:.35rem}
.schritt p{color:var(--muted); font-size:.95rem}
@media(max-width:620px){
  .schritt{grid-template-columns:1fr; gap:10px}
  .schritt-num{width:34px; height:34px; font-size:.95rem}
}

/* ── Szenarien: ein Ablauf als Zeitleiste ────────────────────────────────────
   Bewusst in HTML und CSS gebaut statt als Bild: Es bleibt bei jeder Auflösung
   scharf, lässt sich vorlesen und durchsuchen, wiegt nichts und veraltet nicht,
   wenn sich die Oberfläche ändert. Die Uhrzeiten sind ein Beispielablauf und
   als solcher ausgewiesen – keine gemessene Statistik. */
.szenario{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(24px,3.5vw,40px); max-width:52rem; margin:0 auto;
}
.szenario-kopf{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.4rem}
.szenario-kopf h3{font-size:1.35rem}
.szenario-tag{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--plum); background:var(--secondary); border-radius:999px; padding:.25rem .7rem;
}
.szenario > p.vor{color:var(--muted); font-size:.95rem; margin-bottom:1.6rem}

/* Die Leiste selbst: Zeitspalte, Linie, Inhalt. */
.ablauf{list-style:none; display:grid; gap:0}
.ablauf li{display:grid; grid-template-columns:4.5rem 1.75rem 1fr; align-items:start}
.ablauf .zeit{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:.92rem;
  color:var(--plum); padding-top:.05rem; white-space:nowrap;
}
/* Punkt plus durchgehende Linie; beim letzten Schritt endet die Linie. */
.ablauf .marke{position:relative; justify-self:center; width:100%; height:100%; min-height:2.9rem}
.ablauf .marke::before{
  content:""; position:absolute; left:50%; top:.42rem; transform:translateX(-50%);
  width:.62rem; height:.62rem; border-radius:50%; background:var(--plum); z-index:1;
}
.ablauf .marke::after{
  content:""; position:absolute; left:50%; top:.9rem; bottom:-.35rem; transform:translateX(-50%);
  width:2px; background:var(--border);
}
.ablauf li:last-child .marke::after{display:none}
/* Der Schritt, an dem sich alles entscheidet, wird abgesetzt. */
.ablauf li.schluessel .marke::before{background:var(--apricot); width:.8rem; height:.8rem; top:.33rem}
.ablauf li.schluessel .was{font-weight:600}
.ablauf .inhalt{padding-bottom:1.25rem}
.ablauf li:last-child .inhalt{padding-bottom:0}
.ablauf .wer{
  font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:.12rem;
}
.ablauf .was{font-size:.97rem; line-height:1.55}
.ablauf .was em{color:var(--plum); font-style:normal; font-weight:600}

/* Das Fazit unter der Leiste – was der Ablauf für das Studio bedeutet. */
.szenario-fazit{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border);
  font-size:.95rem; color:var(--muted);
}
.szenario-fazit strong{color:var(--ink)}

@media(max-width:560px){
  .ablauf li{grid-template-columns:3.6rem 1.4rem 1fr}
  .ablauf .zeit{font-size:.85rem}
  .szenario-kopf h3{font-size:1.2rem}
}

/* ── Produktbilder ───────────────────────────────────────────────────────────
   Echte Aufnahmen aus der Anwendung. Der Rahmen setzt sie vom Seitenhintergrund
   ab, ohne sie in eine Attrappe zu stecken – ein gezeichneter Browserrahmen um
   einen echten Screenshot sieht aus, als hätte man etwas zu verbergen.
   loading="lazy" steht im HTML: Die Bilder liegen unterhalb des Falzes, und die
   Seite soll weiter in unter einer Sekunde stehen. */
.bildschirm{margin:0; max-width:60rem; margin-inline:auto}
.bildschirm img{
  display:block; width:100%; height:auto;
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); background:var(--card);
}
.bildschirm figcaption{
  margin-top:.85rem; font-size:.86rem; color:var(--muted); text-align:center;
  max-width:44rem; margin-inline:auto; line-height:1.55;
}