/* MDXF Design 2026-10 — gemeinsames Stylesheet für alle neuen Seiten (body.neu).
   Ruhig, hochwertig, B2B: Schwarz/Papier, DM Sans 500 + Akzentwort in DM Serif Display kursiv, Haarlinien statt Karten.
   Ein Raster für alles: 5 Schriftgrößen (--fs-*), 3 Abstände (--pad, --kopf, --luft).
   Nav, Mobil-Menü und Fuß kommen weiter aus mdxf.css. Startseiten-Extras (Hero-Demo-Bühne, Tagesuhr) in start.css.
   Bewegung nur mit Maus/Trackpad (html.ruhig = Touch → alles sofort da). */

@font-face{ font-family:"DM Serif Display"; font-style:italic; font-weight:400; font-display:swap;
  src:url(/fonts/dmserifdisplay-v17-italic-latin.woff2) format("woff2"); }

body.neu{
  --night:#0B0B0A; --on:#F2F0EA; --on-dim:rgba(242,240,234,.66); --on-faint:rgba(242,240,234,.44);
  --hair:rgba(18,18,16,.11); --hair-2:rgba(18,18,16,.2); --hair-d:rgba(255,255,255,.1); --hair-d2:rgba(255,255,255,.2);
  --gold:#F0B830; --gold-2:#F6C957; --gold-dark:#8A6400; --ok:#3DDC84;
  --serif:"DM Serif Display", Georgia, "Times New Roman", serif;
  --side:clamp(20px,4.4vw,56px);
  /* Schrift */
  --fs-h1:clamp(42px,6.2vw,92px);
  --fs-p1:clamp(36px,5vw,72px);
  --fs-h2:clamp(32px,4vw,54px);
  --fs-h3:clamp(22px,2vw,28px);
  --fs-h4:19px;
  --fs-lead:clamp(16px,1.2vw,18px);
  /* Abstände */
  --pad:clamp(76px,9vw,132px);
  --kopf:clamp(36px,4.4vw,60px);
  --luft:clamp(28px,3vw,40px);
  background:var(--paper); color:var(--ink);
}
.neu .wrap{ max-width:1200px; padding:0 var(--side); }
.neu .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.neu .dark{ background:var(--night); color:var(--on); }
.neu .hell2{ background:var(--paper-2); }
.neu em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--gold-dark); }
.neu .dark em{ color:var(--gold); }
.neu a.tl{ color:inherit; text-decoration:underline; text-decoration-color:var(--hair-2); text-underline-offset:3px; }
.neu a.tl:hover{ text-decoration-color:currentColor; }
.neu .dark a.tl{ text-decoration-color:var(--hair-d2); }

/* ── Nav über dunklen Flächen (Klasse setzt site.js) ── */
.neu .nav{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:background .45s, border-color .45s; }
.neu .nav.scrolled{ background:rgba(246,245,242,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); }
html:not(.nav-open) .neu .nav.on-dark .mark{ color:var(--on); }
html:not(.nav-open) .neu .nav.on-dark .mark b{ color:var(--gold); }
html:not(.nav-open) .neu .nav.on-dark .nav-links a{ color:var(--on-dim); }
html:not(.nav-open) .neu .nav.on-dark .nav-links a:hover, html:not(.nav-open) .neu .nav.on-dark .nav-links a[aria-current]{ color:var(--on); }
html:not(.nav-open) .neu .nav.on-dark .nav-links a.nav-alt{ background:transparent; border-color:rgba(240,184,48,.38); color:var(--on); }
html:not(.nav-open) .neu .nav.on-dark .nav-cta{ background:var(--on); color:var(--night) !important; }
html:not(.nav-open) .neu .nav.on-dark .burger{ color:var(--on); }
html:not(.nav-open) .neu .nav.on-dark.scrolled{ background:rgba(11,11,10,.74); border-bottom-color:var(--hair-d); }
@media (hover:hover){ html:not(.nav-open) .neu .nav.on-dark .burger:hover{ background:rgba(255,255,255,.08); } }

/* ── Grundbausteine ── */
.s-sec{ padding:var(--pad) 0; }
.s-head{ max-width:760px; margin-bottom:var(--kopf); }
.s-head.mit-knoepfen{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; }
.s-head.mit-knoepfen > div:first-child{ max-width:760px; }
.kicker{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); }
.dark .kicker{ color:var(--on-faint); }
.kicker .nr{ display:inline-flex; align-items:center; gap:14px; color:var(--gold-dark); }
.dark .kicker .nr{ color:var(--gold); }
.kicker .nr::after{ content:""; width:28px; height:1px; background:currentColor; opacity:.55; }
.s-h2{ margin-top:20px; font-size:var(--fs-h2); line-height:1.05; letter-spacing:-.035em; font-weight:500; max-width:24ch; }
.s-h2 em{ letter-spacing:-.015em; }
.s-h3{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.025em; font-weight:500; }
.s-lead{ margin-top:20px; font-size:var(--fs-lead); line-height:1.65; color:var(--dim); max-width:56ch; }
.dark .s-lead{ color:var(--on-dim); }
.mono{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.dark .mono{ color:var(--on-faint); }
.nur-breit{ display:inline; }

.s-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--luft); }
.s-btn{ display:inline-flex; align-items:center; gap:12px; height:52px; padding:0 24px; border-radius:10px; border:1px solid transparent;
  font:inherit; font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .35s, border-color .35s, color .35s; }
.s-btn .arr{ transition:transform .35s var(--ease); }
.s-btn:hover .arr{ transform:translateX(4px); }
.s-btn.amber{ background:var(--gold); color:var(--night); }
.s-btn.amber:hover{ background:var(--gold-2); }
.s-btn.line{ border-color:var(--hair-2); color:var(--ink); background:transparent; }
.s-btn.line:hover{ border-color:var(--ink); }
.dark .s-btn.line{ border-color:var(--hair-d2); color:var(--on); }
.dark .s-btn.line:hover{ border-color:rgba(255,255,255,.55); }
.s-btn[disabled]{ opacity:.55; cursor:default; }

.s-link{ display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; border-bottom:1px solid currentColor;
  font-size:15px; font-weight:500; text-decoration:none; color:var(--ink); }
.dark .s-link{ color:var(--on); }
.s-link .arr{ transition:transform .35s var(--ease); }
.s-link:hover .arr{ transform:translateX(4px); }
.s-links{ display:flex; flex-wrap:wrap; gap:16px 32px; margin-top:var(--luft); }
.s-link.quiet{ color:var(--dim); border-bottom-color:var(--hair-2); }
.s-link.quiet:hover{ color:var(--ink); }

dl.rows{ margin-top:var(--luft); border-top:1px solid var(--hair); }
dl.rows > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--hair); }
dl.rows dt{ padding-top:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
dl.rows dd{ font-size:15.5px; line-height:1.5; }
dl.rows dd a{ color:inherit; }
dl.rows.on-dark{ border-top-color:var(--hair-d); }
dl.rows.on-dark > div{ border-bottom-color:var(--hair-d); }
dl.rows.on-dark dt{ color:var(--on-faint); }
dl.rows.on-dark dd{ color:var(--on); }

/* Hintergrund: Punkteraster + Lichtschein (Hero, dunkle Abschnitte) */
.bg-punkte{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.3px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 72% 46%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%);
          mask-image:radial-gradient(ellipse 62% 70% at 72% 46%, #000 0%, rgba(0,0,0,.45) 45%, transparent 78%); }
.bg-glow{ position:absolute; z-index:-1; width:900px; height:900px; right:-280px; top:-220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(240,184,48,.12) 0%, rgba(240,184,48,.035) 40%, transparent 66%); }
.s-trust{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:44px; padding-top:22px; border-top:1px solid var(--hair-d); list-style:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-faint); }
.s-trust li{ display:flex; align-items:center; gap:10px; }
.s-trust li::before{ content:""; width:5px; height:5px; background:var(--gold); }

/* ── Seitenkopf der Unterseiten ── */
.p-hero{ position:relative; padding:clamp(128px,12vw,176px) 0 clamp(68px,7.5vw,104px); overflow:hidden; isolation:isolate; }
.p-hero-in{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:clamp(40px,6vw,88px); align-items:end; }
.p-hero-in.solo{ grid-template-columns:minmax(0,1fr); }
.s-crumbs{ display:flex; flex-wrap:wrap; gap:6px 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-faint); }
.s-crumbs a{ color:inherit; text-decoration:none; padding-block:10px; margin-block:-10px; }
.s-crumbs a:hover{ color:var(--on); }
.s-crumbs .sep{ opacity:.45; }
.s-crumbs [aria-current]{ color:var(--gold); }
.p-h1{ margin-top:26px; font-size:var(--fs-p1); line-height:1.02; letter-spacing:-.04em; font-weight:500; max-width:17ch; }
.p-h1 em{ letter-spacing:-.02em; }
.p-lead{ margin-top:26px; font-size:var(--fs-lead); line-height:1.65; color:var(--on-dim); max-width:56ch; }
.p-hero .s-btns{ margin-top:34px; }
.p-hero .s-trust{ margin-top:40px; }
.js .p-hero-in > *{ opacity:0; animation:s-fade 1.1s var(--ease) forwards; }
.js .p-hero-in > *:nth-child(2){ animation-delay:.18s; }
@keyframes s-fade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.p-blick{ padding:24px 26px 22px; border-radius:18px; border:1px solid var(--hair-d);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow:0 60px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.p-blick h2{ font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.p-blick dl.rows{ margin-top:14px; }
.p-blick dl.rows > div{ grid-template-columns:104px minmax(0,1fr); padding:12px 0; }
.p-blick dl.rows dd{ font-size:14.5px; }
.p-blick .notiz{ margin-top:16px; font-size:14px; line-height:1.6; color:var(--on-dim); }
.p-blick .notiz b{ color:var(--on); font-weight:500; }

/* ── Kacheln (Leistungen, Branchen, Beispiele) ── */
.kacheln{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(32px,4.5vw,72px); }
.kacheln.drei{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3.5vw,48px); }
.kachel{ position:relative; display:flex; flex-direction:column; padding:28px 0 34px; border-top:1px solid var(--hair-2); color:inherit; text-decoration:none; }
.kachel::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
a.kachel:hover::before{ transform:none; }
.k-nr{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dark); }
.k-ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--hair-2); }
.k-ico svg{ width:20px; height:20px; fill:none; stroke:var(--gold-dark); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.k-nr + h3, .k-ico + h3{ margin-top:18px; }
.kachel h3{ font-size:clamp(20px,1.7vw,24px); line-height:1.2; letter-spacing:-.022em; font-weight:500; }
.kachel p{ margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--dim); max-width:46ch; }
.k-liste{ list-style:none; margin-top:16px; }
.k-liste li{ position:relative; padding:7px 0 7px 20px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.k-liste li::before{ content:""; position:absolute; left:0; top:15px; width:9px; height:1px; background:var(--gold-dark); }
.dark .k-liste li{ color:var(--on-dim); }
.dark .k-liste li::before{ background:var(--gold); }
.k-go{ display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:22px; font-size:15px; font-weight:500; }
.k-go .arr{ transition:transform .35s var(--ease); }
a.kachel:hover .k-go .arr{ transform:translateX(4px); }

/* ── Punkte (Titel + Text, Haarlinien) ── */
.punkte{ list-style:none; border-top:1px solid var(--hair-2); }
.punkte li{ display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:12px 32px; padding:20px 0; border-bottom:1px solid var(--hair); }
.punkte b{ font-size:17px; font-weight:500; letter-spacing:-.01em; line-height:1.4; }
.punkte span{ font-size:15.5px; line-height:1.65; color:var(--dim); }
.punkte a{ color:inherit; }
.s-head + .punkte, .kacheln + .punkte{ margin-top:var(--luft); }
.hinweis{ margin-top:var(--luft); padding:20px 24px; border-radius:12px; background:rgba(18,18,16,.045); font-size:15px; line-height:1.65; color:var(--dim); max-width:880px; }
.hinweis b{ color:var(--ink); font-weight:500; }
.hinweis a{ color:var(--ink); }
.dark .hinweis{ background:rgba(255,255,255,.05); color:var(--on-dim); }
.dark .hinweis b, .dark .hinweis a{ color:var(--on); }

/* ── Zwei Spalten: Inhalt + Kasten ── */
.zwei{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,5.5vw,88px); align-items:start; }
.zwei.mitte{ align-items:center; }
.kasten h3{ max-width:none; font-size:var(--fs-h4); letter-spacing:-.015em; font-weight:500; }
.kasten dl.rows{ margin-top:18px; }
.kasten .notiz-box{ margin-top:22px; }
.notiz-box{ padding:22px 24px; border-radius:14px; background:rgba(18,18,16,.045); font-size:15px; line-height:1.65; color:var(--dim); }
.notiz-box b{ color:var(--ink); font-weight:500; }
.notiz-box a{ color:var(--ink); }
.dark .notiz-box{ background:rgba(255,255,255,.05); color:var(--on-dim); }
.dark .notiz-box b{ color:var(--on); }

/* ── Ablauf / Schritte ── */
.schritte{ --p:0; position:relative; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--hair-2); }
.schritte.drei{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.schritte::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:calc(var(--p) * 100%); background:var(--ink); }
.ruhig .schritte, .no-scroll-fx .schritte{ --p:1; }
.schritte > li{ position:relative; padding:34px 28px 0 0; }
.schritte > li::before{ content:""; position:absolute; left:0; top:-5px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:1px solid var(--ink); }
.hell2 .schritte > li::before{ background:var(--paper-2); }
.sn{ display:block; font-family:var(--serif); font-style:italic; font-size:44px; line-height:1; color:var(--gold-dark); }
.schritte .mono{ display:block; margin-top:16px; }
.schritte h3{ margin-top:20px; font-size:var(--fs-h4); line-height:1.3; letter-spacing:-.015em; font-weight:500; }
.schritte .mono + h3{ margin-top:8px; }
.schritte p{ margin-top:8px; font-size:15px; line-height:1.6; color:var(--dim); max-width:32ch; }
.schritte .k-liste{ margin-top:10px; }
.exit{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.exit::before{ content:"↳ "; }
.exit.ok{ color:var(--gold-dark); }
.schritte + .zwei, .schritte + .passt{ margin-top:clamp(56px,6vw,88px); }
.passt{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.passt h3{ font-size:var(--fs-h4); letter-spacing:-.015em; font-weight:500; }
.passt-ja dl.rows{ margin-top:18px; }
.passt-nein{ padding:26px 28px; border-radius:14px; background:rgba(18,18,16,.045); }
.passt-nein p{ margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--dim); }

/* ── Fragen ── */
.faq-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,96px); align-items:start; }
.faq-grid .s-head{ margin-bottom:0; }
@media (min-width:901px){ .faq-kopf{ position:sticky; top:110px; } }
.s-faq{ border-top:1px solid var(--hair-2); }
.s-faq details{ border-bottom:1px solid var(--hair); }
.s-faq summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 0; list-style:none; cursor:pointer;
  font-size:17px; font-weight:500; line-height:1.4; letter-spacing:-.01em; -webkit-tap-highlight-color:transparent; }
.s-faq summary::-webkit-details-marker{ display:none; }
.s-faq summary:hover{ color:var(--gold-dark); }
.plus{ position:relative; flex:none; width:14px; height:14px; margin-top:5px; }
.plus::before, .plus::after{ content:""; position:absolute; left:0; top:6.5px; width:14px; height:1.5px; background:currentColor; transition:transform .4s var(--ease); }
.plus::after{ transform:rotate(90deg); }
.s-faq details[open] .plus::after{ transform:rotate(0); }
.faq-a{ padding:0 44px 22px 0; font-size:15.5px; line-height:1.7; color:var(--dim); }
.faq-a a{ color:var(--ink); }
.s-faq details[open] .faq-a{ animation:s-fade .5s var(--ease); }

/* ── Rechner ── */
.calc-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,6vw,96px); align-items:center; }
.regler{ margin-top:var(--luft); max-width:520px; }
.reg{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:26px; }
.reg-k{ font-size:15px; color:var(--on-dim); }
.reg output{ font-family:var(--mono); font-size:15px; color:var(--on); }
.regler input[type=range]{ --fill:30%; -webkit-appearance:none; appearance:none; display:block; width:100%; height:28px; margin-top:6px; background:transparent; cursor:pointer; }
.regler input[type=range]::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:linear-gradient(var(--gold),var(--gold)) 0 / var(--fill) 100% no-repeat, rgba(255,255,255,.16); }
.regler input[type=range]::-moz-range-track{ height:2px; border-radius:2px; background:rgba(255,255,255,.16); }
.regler input[type=range]::-moz-range-progress{ height:2px; background:var(--gold); }
.regler input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-10px; border-radius:50%; background:var(--gold); border:4px solid var(--night); box-shadow:0 0 0 1px var(--gold); }
.regler input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--gold); border:4px solid var(--night); box-shadow:0 0 0 1px var(--gold); }
.regler input[type=range]:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.calc-out{ padding:clamp(24px,3vw,36px); border-radius:18px; border:1px solid var(--hair-d); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.calc-big{ margin-top:14px; font-size:clamp(52px,6.4vw,92px); line-height:1; font-weight:500; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.calc-big small{ margin-left:10px; font-size:.38em; color:var(--on-dim); letter-spacing:0; }
.calc-out p{ margin-top:18px; font-size:15.5px; line-height:1.65; color:var(--on-dim); }
.calc-out p b{ color:var(--on); font-weight:500; }
.calc-note{ font-family:var(--mono); font-size:10.5px !important; letter-spacing:.06em; color:var(--on-faint) !important; }
.calc-out .s-btn{ margin-top:24px; }

/* ── Ablauf-Demo (Dokument rein → Felder raus) ── */
.demo{ position:relative; padding:20px; border-radius:18px; border:1px solid var(--hair-d); color:var(--on);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.demo.auf-hell{ background:var(--night); }
.demo-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-faint); }
.s-live{ display:inline-flex; align-items:center; gap:10px; }
.s-live i{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--ok); }
.s-live i::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--ok); opacity:0; animation:s-ping 2.4s ease-out infinite; }
@keyframes s-ping{ 0%{ transform:scale(.4); opacity:.8; } 100%{ transform:scale(1.8); opacity:0; } }
.demo-tag{ padding:4px 8px; border:1px solid var(--hair-d); border-radius:6px; }
.demo-stage{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:14px; margin-top:18px; }
.d-doc{ position:relative; height:100%; min-height:214px; padding:14px 14px 0; border-radius:12px; background:#F2F0EA; color:var(--ink); overflow:hidden; }
.doc-head{ display:flex; align-items:center; gap:9px; min-width:0; }
.doc-ico{ flex:none; position:relative; width:17px; height:21px; border:1.5px solid rgba(18,18,16,.55); border-radius:3px; }
.doc-ico::after{ content:""; position:absolute; left:3px; right:3px; bottom:4px; height:1.5px; background:var(--gold-dark); box-shadow:0 -4px 0 rgba(18,18,16,.4); }
.doc-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; letter-spacing:-.01em; }
.doc-src{ margin-top:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--dim); }
.doc-lines{ margin-top:14px; }
.doc-lines i{ display:block; height:6px; margin-top:10px; border-radius:3px; background:rgba(18,18,16,.09); }
.doc-lines i:nth-child(2){ width:82%; } .doc-lines i:nth-child(3){ width:91%; } .doc-lines i:nth-child(4){ width:58%; }
.doc-lines i:nth-child(5){ width:86%; } .doc-lines i:nth-child(6){ width:70%; } .doc-lines i:nth-child(7){ width:38%; background:rgba(138,100,0,.28); }
.scan{ position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, rgba(240,184,48,0), rgba(240,184,48,.28)); border-bottom:1.5px solid var(--gold); }
.demo.scanning .scan{ animation:s-scan 1.25s cubic-bezier(.45,0,.25,1) forwards; }
@keyframes s-scan{ 0%{ top:-30%; opacity:1; } 92%{ opacity:1; } 100%{ top:100%; opacity:0; } }
.fields{ display:flex; flex-direction:column; gap:8px; }
.fld{ display:flex; flex-direction:column; gap:3px; padding:10px 13px; border:1px solid var(--hair-d); border-radius:10px; transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s; }
.fld .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-faint); }
.fld .v{ font-size:14px; font-weight:500; color:var(--on); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.state{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:10px; background:rgba(61,220,132,.09); color:#9BF0C0; font-size:13.5px; font-weight:500;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.state .ok{ flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--ok); }
.state .ok svg{ width:12px; height:12px; fill:none; stroke:var(--night); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.demo.anim .fld, .demo.anim .state{ opacity:0; transform:translateY(6px); }
.demo.anim .fld.show, .demo.anim .state.show{ opacity:1; transform:none; }
.demo.anim .fld.show{ border-color:rgba(240,184,48,.32); }
.log{ list-style:none; margin-top:16px; padding-top:12px; border-top:1px solid var(--hair-d); }
.log li{ display:flex; gap:14px; padding:4px 0; font-size:12.5px; color:var(--on-faint); white-space:nowrap; overflow:hidden; }
.log li span{ overflow:hidden; text-overflow:ellipsis; }
.log li:first-child{ color:var(--on-dim); }
.log time{ flex:none; font-family:var(--mono); font-size:11px; color:rgba(240,184,48,.75); padding-top:1px; }
.log li.neu{ animation:s-log .7s var(--ease); }
@keyframes s-log{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.demo-cap{ margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim); }

/* ── Geräte, Film ── */
.dev-browser{ border-radius:10px; overflow:hidden; background:#1B1B18; box-shadow:0 40px 80px -40px rgba(18,18,16,.55); }
.dev-bar{ display:flex; gap:5px; padding:8px 10px; background:#272724; }
.dev-bar i{ width:7px; height:7px; border-radius:50%; background:#4A4945; }
.dev-browser img{ width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
.dev-phone{ padding:5px; border-radius:26px; background:#121211; box-shadow:inset 0 0 0 1px #3A3936, 0 40px 70px -30px rgba(0,0,0,.6); }
.dev-screen{ position:relative; aspect-ratio:600 / 1300; border-radius:21px; overflow:hidden; background:#111; }
.dev-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.s-film{ position:relative; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.s-film video{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; background:#000; }
.s-film.hoch{ display:none; max-width:380px; }
.s-film.hoch video{ aspect-ratio:9 / 16; }
.film-play{ position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:12px; height:48px; padding:0 22px 0 18px;
  border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(11,11,10,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font:inherit; font-size:14.5px; font-weight:500; white-space:nowrap; cursor:pointer; transition:background .35s, border-color .35s; }
.film-play:hover{ background:rgba(11,11,10,.75); border-color:rgba(255,255,255,.5); }
.film-play .pl{ width:0; height:0; border-left:11px solid var(--gold); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.s-film.playing .film-play{ display:none; }
.film-cap{ margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim); }
.dark .film-cap{ color:var(--on-faint); }
.filme{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,4vw,56px); }
.film-karte .mono{ display:block; margin-top:22px; }
.film-karte h3{ margin-top:10px; font-size:var(--fs-h4); line-height:1.3; letter-spacing:-.015em; font-weight:500; }
.film-karte p{ margin-top:8px; font-size:15px; line-height:1.6; color:var(--dim); max-width:52ch; }
.dark .film-karte p{ color:var(--on-dim); }

/* ── Bühne mit Geräten (Referenzen) ── */
.slide-vis{ position:relative; height:clamp(300px,30vw,400px); border-radius:16px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; padding:40px 32px 0; }
.v-paper{ background:#EAE7DF; }
.v-dark{ background:radial-gradient(120% 100% at 50% 0%, #262623 0%, #0E0E0D 72%); }
/* Handys ganz sichtbar: Höhe aus der Bühne, bei zwei Geräten notfalls aus der Breite (nie angeschnitten). */
.pair, .solo-phone{ position:absolute; inset:0; container-type:size; display:flex; align-items:center; justify-content:center; gap:16px; }
.pair .dev-phone{ width:min(calc((100cqh - 64px) * .4615 + 10px), calc((100cqw - 56px) / 2)); }
.solo-phone .dev-phone{ width:calc((100cqh - 64px) * .4615 + 10px); }
.slide-vis > .dev-browser.wide{ width:100%; margin-bottom:-24px; border-radius:10px 10px 0 0; }
.ref-liste{ display:flex; flex-direction:column; gap:clamp(64px,8vw,112px); }
.ref-zeile{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5.5vw,88px); align-items:center; }
.ref-zeile:nth-child(even) .slide-vis{ order:2; }
.ref-zeile .slide-vis{ height:clamp(320px,34vw,460px); }
.ref-zeile h3{ margin-top:12px; font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.025em; font-weight:500; }
.ref-zeile p{ margin-top:14px; font-size:15.5px; line-height:1.65; color:var(--dim); }
.ref-notiz{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; line-height:1.55; color:var(--dim); }
.dark .ref-notiz{ color:var(--on-faint); }
.film-karte .ref-notiz{ margin-top:12px; }
.ref-zeile .s-links{ margin-top:22px; }

/* ── Person ── */
.person-grid{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(36px,6vw,96px); align-items:start; }
.person-bild{ position:relative; aspect-ratio:4 / 5; border-radius:16px; overflow:hidden; background:var(--paper-2); }
.person-bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; filter:saturate(.85) contrast(1.03); }
.bild-tag{ position:absolute; left:14px; bottom:14px; padding:7px 10px; border-radius:7px; background:rgba(11,11,10,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.zitat{ font-size:clamp(22px,2.1vw,28px); line-height:1.4; letter-spacing:-.02em; font-weight:400; color:var(--ink); max-width:32ch; }
.zitat .zw{ opacity:.16; transition:opacity .45s; }
.zitat .zw.lit{ opacity:1; }
.zitat-von{ margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.person-p{ margin-top:var(--luft); font-size:16px; line-height:1.65; color:var(--dim); max-width:52ch; }
.person-txt dl.rows{ margin-top:24px; }
.person-txt > .s-link{ margin-top:var(--luft); }

/* ── Visitenkarte ── */
.karte-wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; perspective:1400px; }
.karte{ --rx:0deg; --ry:0deg; --mx:50%; --my:0%;
  position:relative; width:min(460px,100%); aspect-ratio:85.6 / 54; padding:clamp(22px,2.4vw,30px); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; color:var(--on);
  background:linear-gradient(135deg, #1F1F1C 0%, #111110 52%, #1A1916 100%); border:1px solid rgba(255,255,255,.11);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.07);
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .6s var(--ease); }
.karte::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.08), transparent 45%); }
.karte.hover::after{ opacity:1; }
.karte-x{ position:absolute; right:-70px; bottom:-90px; width:300px; height:300px; pointer-events:none;
  background:linear-gradient(45deg, transparent calc(50% - .6px), rgba(240,184,48,.22) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
             linear-gradient(-45deg, transparent calc(50% - .6px), rgba(240,184,48,.22) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)); }
.karte-top{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.karte-marke{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:.14em; color:var(--on); }
.karte-marke b{ color:var(--gold); font-weight:800; }
.karte-logo{ width:24px; height:24px; border-radius:6px; background:url(/logo.svg) center/contain no-repeat; }
.karte-claim{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-faint); text-align:right; }
.karte-name{ position:relative; font-size:clamp(19px,1.7vw,22px); font-weight:500; letter-spacing:-.015em; color:var(--on); }
.karte-name small{ display:block; margin-top:6px; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-faint); }
.karte-daten{ position:relative; list-style:none; }
.karte-daten li{ display:flex; gap:14px; margin-top:5px; font-size:13px; color:var(--on-dim); }
.karte-daten li span{ width:10px; font-family:var(--mono); font-size:10px; color:var(--gold); padding-top:2px; }
.karte-daten a{ color:inherit; text-decoration:none; }
.karte-daten a:hover{ color:var(--on); }
.karte-btn{ display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; border-bottom:1px solid var(--hair-d2); text-decoration:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dim); transition:color .3s, border-color .3s; }
.karte-btn:hover{ color:var(--on); border-color:var(--on); }

/* ── Abschluss: Erstgespräch (dunkel) ── */
.s-cta{ position:relative; overflow:hidden; isolation:isolate; }
.cta-in{ display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:32px clamp(40px,6vw,96px); align-items:end; }
.s-cta .s-btns{ margin-top:0; justify-content:flex-end; }
.s-cta .s-head{ margin-bottom:0; }

/* ── Kontakt-Wege + Formular ── */
.wege{ list-style:none; border-top:1px solid var(--hair-2); }
.wege a{ display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--hair);
  color:inherit; text-decoration:none; transition:padding .45s var(--ease); }
.wege a:hover{ padding-left:8px; }
.wege .w-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.wege .w-v{ font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.wege .arr{ color:var(--dim); transition:transform .35s var(--ease); }
.wege a:hover .arr{ transform:translateX(4px); color:var(--ink); }
.fein{ margin-top:22px; font-size:13px; line-height:1.6; color:var(--dim); }
.fein a{ color:inherit; }
.neu form.anfrage{ padding:clamp(22px,3vw,36px); border-radius:18px; border:1px solid var(--hair); background:#fff; box-shadow:0 50px 100px -70px rgba(18,18,16,.45); }
.neu form.anfrage .f{ margin-top:18px; gap:8px; }
.neu form.anfrage .frow .f{ margin-top:18px; }
.neu form.anfrage #formBody > .frow:first-child .f{ margin-top:0; }
.neu form.anfrage label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.neu form.anfrage .consent, .neu form.anfrage .consent span{ font-family:var(--font); font-size:13.5px; letter-spacing:0; text-transform:none; line-height:1.55; color:var(--dim); }
.neu form.anfrage .consent{ margin-top:22px; }
.neu form.anfrage .consent a{ color:var(--ink); }
.neu .f input, .neu .f textarea, .neu .f select{ font:inherit; font-size:16px; padding:13px 14px; border:1px solid var(--hair-2); border-radius:10px; background:var(--paper); color:var(--ink);
  transition:border-color .3s, box-shadow .3s, background .3s; }
.neu .f select{ appearance:none; -webkit-appearance:none; padding-right:40px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B1B18' stroke-width='1.5'/%3E%3C/svg%3E") right 16px center no-repeat; }
.neu .f textarea{ min-height:136px; resize:vertical; }
.neu .f input:focus, .neu .f textarea:focus, .neu .f select:focus{ outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(240,184,48,.22); }
.neu form.anfrage .s-btn{ margin-top:24px; width:100%; justify-content:space-between; }
.neu .fmsg{ margin-top:14px; font-size:14px; min-height:20px; color:var(--dim); }
.neu .fmsg.err{ color:var(--red); }
.neu .done h3{ font-size:var(--fs-h3); font-weight:500; letter-spacing:-.02em; }
.neu .done p{ margin-top:12px; color:var(--dim); line-height:1.65; }
.neu .done a{ color:var(--ink); }

/* ── Für Privat ── */
.s-privat{ padding:clamp(64px,7vw,96px) 0; }
.privat-in{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:32px clamp(40px,6vw,96px); align-items:end; }
.privat-h{ margin-top:18px; font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.025em; font-weight:500; }
.privat-p{ margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--dim); max-width:58ch; }
.privat-links{ border-top:1px solid var(--hair-2); }
.privat-links a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--hair-2);
  font-size:15.5px; font-weight:500; text-decoration:none; transition:padding .45s var(--ease); }
.privat-links a .arr{ transition:transform .35s var(--ease); }
.privat-links a:hover{ padding-left:8px; }
.privat-links a:hover .arr{ transform:translateX(4px); }
.neu footer{ border-top-color:var(--hair); }

/* ── Privat: Handy-Karussell im dunklen Kopf ── */
.p-hero-in.mit-reel{ align-items:center; }
.p-hero .reel-label{ color:var(--on); }
.p-hero .reel-kat{ color:var(--gold); }
.p-hero .reel-seg i{ background:rgba(255,255,255,.18); }
.p-hero .reel-seg b{ background:var(--on); }
.p-hero .reel-pause{ border-color:var(--hair-d2); background:transparent; color:var(--on); }
@media (hover:hover){ .p-hero .reel-pause:hover{ border-color:var(--on); } }
.p-hero .reel .doc-cap{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--on-faint); }
.p-hero .phone{ box-shadow:inset 0 0 0 1.5px #3A3936, 0 60px 120px -50px rgba(0,0,0,.95); }

/* ── Seiten-Navigation unter dem Kopf (Textlinks statt Pillen) ── */
.seitennav{ border-bottom:1px solid var(--hair); background:var(--paper); }
.seitennav .wrap{ display:flex; align-items:center; gap:8px 26px; padding-top:16px; padding-bottom:16px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.seitennav .wrap::-webkit-scrollbar{ display:none; }
.seitennav .mono{ flex:none; }
.seitennav a{ flex:none; padding-block:10px; margin-block:-10px; font-size:14.5px; color:var(--ink-2); text-decoration:none; }
.seitennav a:hover{ color:var(--ink); }
.seitennav a.go{ color:var(--gold-dark); font-weight:500; }

/* ── Kasten „Oder etwas ganz anderes?“ ── */
.idee{ display:flex; align-items:center; justify-content:space-between; gap:20px 40px; margin-top:var(--luft); padding:26px 28px; border-radius:14px; background:rgba(240,184,48,.12); }
.idee h3{ font-size:var(--fs-h4); font-weight:500; letter-spacing:-.015em; }
.idee p{ margin-top:8px; font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:64ch; }
.idee .s-link{ flex:none; }

/* ── Kontaktwege auf Dunkel ── */
.dark .wege{ border-top-color:var(--hair-d2); }
.dark .wege a{ border-bottom-color:var(--hair-d); }
.dark .wege .w-k{ color:var(--on-faint); }
.dark .wege .arr{ color:var(--on-faint); }
.dark .wege a:hover .arr{ color:var(--on); }
.dark .fein{ color:var(--on-faint); }
.dark .kasten h3{ color:var(--on); }

/* ── Formular: Themen-Auswahl (eckig, keine Pillen) ── */
.neu .themen{ border:0; padding:0; margin:0 0 4px; min-width:0; }
.neu .themen legend{ padding:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.neu .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.neu .chip{ position:relative; display:inline-flex; }
.neu .chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.neu .chip span{ display:inline-flex; align-items:center; height:42px; padding:0 15px; border:1px solid var(--hair-2); border-radius:10px; background:var(--paper);
  font-size:14.5px; color:var(--ink-2); transition:background .25s, color .25s, border-color .25s; }
.neu .chip input:hover + span{ border-color:var(--ink); }
.neu .chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.neu .chip input:focus-visible + span{ outline:2px solid var(--gold-dark); outline-offset:2px; }

/* ── Rechtstexte ── */
.recht-grid{ display:grid; grid-template-columns:minmax(0,.3fr) minmax(0,.7fr); gap:clamp(32px,6vw,96px); align-items:start; }
.recht-grid.solo{ grid-template-columns:minmax(0,1fr); }
.inhalt{ position:sticky; top:104px; max-height:calc(100vh - 140px); overflow:auto; scrollbar-width:thin; }
.inhalt .mono{ display:block; margin-bottom:12px; }
.inhalt a{ display:block; padding:7px 0 7px 14px; border-left:1px solid var(--hair); font-size:13.5px; line-height:1.4; color:var(--dim); text-decoration:none; transition:color .25s, border-color .25s; }
.inhalt a:hover{ color:var(--ink); }
.inhalt a.aktiv{ color:var(--ink); border-left-color:var(--gold-dark); }
.recht{ max-width:780px; }
.recht article{ padding:32px 0; border-top:1px solid var(--hair); scroll-margin-top:96px; }
.recht article:first-child{ padding-top:0; border-top:0; }
.recht h2{ max-width:none; font-size:clamp(19px,1.6vw,22px); line-height:1.3; letter-spacing:-.015em; font-weight:500; }
.recht h3{ margin-top:22px; font-size:16px; font-weight:600; letter-spacing:-.005em; }
.recht p{ margin-top:12px; font-size:15.5px; line-height:1.72; color:var(--ink-2); }
.recht h2{ margin-top:0; }
.recht * + h2{ margin-top:30px; }
.recht h2 + p{ margin-top:14px; }
.recht ul{ margin:12px 0 0 20px; font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.recht li + li{ margin-top:5px; }
.recht strong{ color:var(--ink); font-weight:600; }
.recht a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--hair-2); text-underline-offset:3px; overflow-wrap:anywhere; }
.recht a:hover{ text-decoration-color:currentColor; }
.recht .fine{ font-size:13.5px; color:var(--dim); }
.recht article.teil{ margin:8px 0; padding:24px 26px; border:0; border-radius:14px; background:rgba(240,184,48,.12); }
.recht article.teil + article{ border-top:0; }
.recht .formular{ margin-top:16px; padding:22px 24px; border:1px solid var(--hair-2); border-radius:12px; background:#fff; }
.recht .formular p{ margin-top:10px; }
.recht .formular p:first-child{ margin-top:0; }

/* ── 404 ── */
.p-hero.voll{ min-height:100vh; min-height:100svh; display:flex; align-items:center; }
.p-hero.voll .wrap{ width:100%; }

@media (max-width:900px){
  .recht-grid{ grid-template-columns:minmax(0,1fr); }
  .inhalt{ display:none; }
  .idee{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .recht article{ padding:26px 0; }
  .recht p, .recht ul{ font-size:15px; }
  .recht article.teil{ padding:20px; }
  .neu .chip span{ height:44px; }
}

/* ── Breakpoints ── */
@media (max-width:1100px){
  .kacheln.drei{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .p-hero-in{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .bg-glow{ width:560px; height:560px; right:-260px; top:auto; bottom:-160px; }
  .zwei, .faq-grid, .calc-grid, .person-grid, .ref-zeile, .privat-in, .passt, .cta-in, .filme{ grid-template-columns:minmax(0,1fr); }
  .zwei, .faq-grid, .calc-grid, .passt{ gap:32px; }
  .ref-zeile{ gap:24px; }
  .ref-zeile:nth-child(even) .slide-vis{ order:0; }
  .person-grid{ gap:32px; }
  .person-bild{ aspect-ratio:4 / 3.4; max-width:520px; }
  .karte-wrap{ align-items:flex-start; }
  .s-cta .s-btns{ justify-content:flex-start; }
  .schritte, .schritte.drei{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
  .schritte > li:nth-child(n+3){ padding-top:34px; border-top:1px solid var(--hair-2); }
  .schritte::after{ display:none; }
  .punkte li{ grid-template-columns:minmax(0,1fr); gap:6px; }
}
@media (max-width:640px){
  body.neu{ --pad:72px; --kopf:32px; --luft:26px; --fs-p1:clamp(34px,9.6vw,44px); --fs-h2:clamp(30px,8.4vw,38px); --fs-h3:21px; --fs-h4:18px; --fs-lead:16px; }
  .nur-breit{ display:none; }
  .s-h2{ margin-top:16px; }
  .s-lead{ margin-top:16px; }
  .s-head.mit-knoepfen{ display:block; }
  .s-btn{ height:52px; padding:0 22px; }
  .p-hero{ padding:112px 0 60px; }
  .p-h1{ margin-top:20px; }
  .p-lead{ margin-top:20px; }
  .p-hero .s-btn{ flex:1 1 100%; justify-content:space-between; }
  .s-cta .s-btn{ flex:1 1 100%; justify-content:space-between; }
  .s-trust{ flex-direction:column; gap:10px; margin-top:32px; }
  .p-blick{ padding:20px; }
  .p-blick dl.rows > div{ grid-template-columns:92px minmax(0,1fr); }
  .kacheln, .kacheln.drei{ grid-template-columns:minmax(0,1fr); }
  .kachel{ padding:24px 0 28px; }
  dl.rows > div{ grid-template-columns:96px minmax(0,1fr); gap:12px; padding:12px 0; }
  dl.rows dd{ font-size:15px; }
  .punkte b{ font-size:16px; }
  .punkte span{ font-size:15px; }
  .schritte, .schritte.drei{ grid-template-columns:minmax(0,1fr); border-top:0; row-gap:0; }
  .schritte > li, .schritte > li:nth-child(n+3){ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:14px; padding:22px 0; border-top:1px solid var(--hair-2); }
  .schritte > li > *:not(.sn){ grid-column:2; }
  .schritte > li:last-child{ border-bottom:1px solid var(--hair-2); }
  .schritte > li::before{ display:none; }
  .sn{ grid-row:1 / 6; font-size:34px; }
  .schritte h3{ margin-top:2px; }
  .schritte .mono{ margin-top:2px; }
  .schritte p{ max-width:none; }
  .exit{ margin-top:10px; }
  .passt-nein, .notiz-box{ padding:22px; }
  .s-faq summary{ font-size:16px; padding:18px 0; }
  .faq-a{ padding-right:0; font-size:15px; }
  .demo{ padding:16px; border-radius:16px; }
  .demo-stage{ gap:10px; }
  .d-doc{ min-height:190px; padding:12px 12px 0; }
  .fld{ padding:8px 10px; } .fld .v{ font-size:13px; }
  .state{ padding:9px 10px; font-size:12.5px; }
  .log li{ font-size:12px; }
  .s-film.quer{ display:none; }
  .s-film.hoch{ display:block; margin:0 auto; }
  .film-play{ left:14px; bottom:14px; height:44px; padding:0 18px 0 15px; font-size:14px; }
  .slide-vis, .ref-zeile .slide-vis{ height:300px; padding:32px 20px 0; }
  .pair{ gap:12px; }
  .pair .dev-phone{ width:min(calc((100cqh - 48px) * .4615 + 10px), calc((100cqw - 40px) / 2)); }
  .solo-phone .dev-phone{ width:calc((100cqh - 48px) * .4615 + 10px); }
  .ref-zeile p{ font-size:15px; }
  .person-bild{ aspect-ratio:4 / 3.6; }
  .zitat{ font-size:22px; }
  .karte{ aspect-ratio:auto; min-height:210px; gap:22px; }
  .karte-claim{ display:none; }
  .wege a{ grid-template-columns:84px minmax(0,1fr) auto; gap:12px; }
  .wege .w-v{ font-size:15px; }
  .neu .frow{ grid-template-columns:minmax(0,1fr); gap:0; }
  .neu form.anfrage #formBody > .frow:first-child .f + .f{ margin-top:18px; }
  .s-privat{ padding:56px 0; }
}
@media (max-width:380px){
  .demo-stage{ grid-template-columns:minmax(0,1fr); }
  .d-doc{ min-height:150px; }
  .doc-lines i:nth-child(n+5){ display:none; }
}

/* Touch: Textlinks mit größerer Tippfläche (44 px), Linie bleibt unter dem Wort */
@media (pointer:coarse){
  .s-link{ padding-top:13px; padding-bottom:7px; }
  .s-links{ gap:4px 28px; }
  .karte-btn{ padding-top:16px; padding-bottom:8px; }
}
/* Touch-Geräte: keine Effekte beim Scrollen (Regel aus LANDAA 2026-10-10). */
.ruhig .karte{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .p-hero-in > *{ animation:none; opacity:1; }
  .s-live i::after{ animation:none; }
  .zitat .zw, .karte, .s-faq details[open] .faq-a{ transition:none; animation:none; }
  .zitat .zw{ opacity:1; }
}

/* ── Handy-Feinschliff 2026-10-17 ─────────────────────────────────────────────
   Am Handy nichts unter 12 px, nichts abgeschnitten, Tippflächen mind. 44 px.
   Rückweg: diesen Block löschen (Desktop bleibt davon unberührt, außer .doc-name). */
.doc-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
@media (max-width:640px){
  /* Mono-Beschriftungen von 9,5–11 px auf 12 px, Sperrung etwas enger, damit die Zeilen nicht breiter werden */
  .kicker, .mono, dl.rows dt, .s-trust, .s-crumbs, .p-blick h2, .k-nr, .zitat-von, .wege .w-k, .tab .n,
  .neu form.anfrage label, .neu .themen legend, .demo-cap, .film-cap, .karte-btn, .exit, .bild-tag,
  .s-scroll, .board-top, .b-ok, .board-foot, .p-hero .reel .doc-cap, .reel-kat, .mark-tag{ font-size:12px; letter-spacing:.12em; }
  .calc-note{ font-size:12px !important; }
  .karte-name small{ font-size:12px; letter-spacing:.1em; }
  .mnav-eyebrow{ font-size:12px; letter-spacing:.2em; }
  .karte-daten li span{ font-size:12px; }
  /* Kleine Teile in der Ablauf-Demo: lesbar, ohne die Karte zu sprengen */
  .demo-top{ font-size:11px; letter-spacing:.12em; }
  .doc-src{ font-size:11px; }
  .fld .k{ font-size:10.5px; letter-spacing:.12em; }
  .log time{ font-size:12px; }
}
/* Fragen & Antworten offen statt zum Aufklappen (2026-10-17): Frage als Überschrift, Antwort direkt darunter */
.s-faq .faq-item{ padding:22px 0 24px; border-bottom:1px solid var(--hair); }
.faq-q{ font-size:17px; font-weight:500; line-height:1.4; letter-spacing:-.01em; }
.s-faq .faq-item .faq-a{ padding:8px 0 0; }
@media (max-width:640px){ .faq-q{ font-size:16px; } .s-faq .faq-item{ padding:18px 0 20px; } }
/* Touch: größere Tippflächen, ohne dass sich das Layout verschiebt */
@media (pointer:coarse){
  .neu .mark{ min-height:44px; }
  .s-crumbs a{ display:inline-block; padding-block:14px; margin-block:-14px; }
  .neu a.tl{ padding-block:14px; margin-block:-14px; }
  /* nur Links im Fließtext; Block-Links (Listen mit Linien, Wege) haben eigene Abstände */
  .neu :is(main, .p-hero) :is(p, label, dd, .notiz-box, .karte-daten) a:not([class]){ padding-block:12px; margin-block:-12px; }
}

/* Sprungziele in Fragen & Antworten und Kacheln (z. B. /leistungen/websites#film) nicht unter der fixen Kopfzeile verstecken, 2026-10-18 */
.faq-item[id], .kachel[id]{ scroll-margin-top:96px; }

/* Kleinste Handys (iPhone SE, 320 px), 2026-10-18: Mit „Privat“-Marke und Anfrage-Knopf war der Menüknopf rechts angeschnitten.
   Unter 360 px entfällt deshalb die Marke in der Kopfzeile; im Menü und auf der Seite steht „Privat“ weiterhin. */
@media (max-width: 359px){
  .nav .mark-tag{ display:none; }
}

/* ── Geräte 2026-10-23: echtes iPhone (Rahmen, Dynamic Island, Statusleiste mit echter Uhrzeit) und MacBook.
   Alle Maße in cqw der Gerätebreite, damit es in jeder Größe gleich aussieht. Die Statusleiste ist ein eigener Streifen
   ÜBER der Seite (Island sitzt darin, verdeckt nie Seiteninhalt). [data-autoscroll]: Seite läuft langsam durch (site.js). ── */
.iphone{ container-type:inline-size; position:relative; width:100%; }
.ip-body{ position:relative; padding:1.05cqw; border-radius:16.4cqw;
  background:linear-gradient(140deg,#6b6d72 0%,#2c2d30 16%,#1a1b1d 48%,#303135 82%,#6a6c71 100%);
  box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.08), 0 6cqw 12cqw -5cqw rgba(0,0,0,.55), 0 2cqw 4cqw -2cqw rgba(0,0,0,.35); }
.ip-body::before, .ip-body::after{ content:""; position:absolute; width:.75cqw; border-radius:.5cqw; background:linear-gradient(90deg,#4a4b50,#2a2b2e); }
.ip-body::before{ left:-.6cqw; top:22%; height:12cqw; box-shadow:0 15cqw 0 #3a3b3f; }   /* Lauter / Leiser */
.ip-body::after{ right:-.6cqw; top:28%; height:19cqw; }                                   /* Seitentaste */
.ip-glas{ padding:2.55cqw; border-radius:15.4cqw; background:#000; }
.ip-screen{ position:relative; display:flex; flex-direction:column; aspect-ratio:393 / 852; border-radius:12.7cqw; overflow:hidden;
  background:var(--sb, #000); color:#fff; isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white, black); }
.ip-screen[data-ton="dunkel"]{ color:#000; }
.ip-status{ position:relative; flex:none; height:12.75cqw; display:grid; grid-template-columns:1fr 29.5cqw 1fr; align-items:center;
  padding-top:.4cqw; background:var(--sb, #000); z-index:2; }
.ip-zeit{ justify-self:center; padding-left:2.2cqw; font:600 4.05cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.ip-island{ position:absolute; left:50%; top:2.6cqw; width:29.5cqw; height:8.7cqw; transform:translateX(-50%); border-radius:5cqw; background:#000; }
.ip-icons{ grid-column:3; justify-self:center; display:flex; align-items:center; gap:1.25cqw; padding-right:1.6cqw; }
.ip-icons svg{ display:block; height:2.85cqw; width:auto; fill:currentColor; }
.ip-icons .ip-wlan{ height:2.8cqw; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; }
.ip-icons .ip-wlan circle{ fill:currentColor; stroke:none; }
.ip-icons .ip-akku{ height:3.05cqw; }
.ip-seite{ position:relative; flex:1; min-height:0; overflow:hidden; background:var(--sb, #000); }
.ip-seite img{ display:block; width:100%; height:auto; will-change:transform; }
.ip-home{ position:absolute; left:50%; bottom:1.9cqw; width:31.6cqw; height:1.2cqw; transform:translateX(-50%); border-radius:1cqw;
  background:rgba(255,255,255,.88); z-index:3; }
.ip-screen[data-ton="dunkel"] .ip-home{ background:rgba(0,0,0,.82); }
.ip-screen::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%); }

.macbook{ container-type:inline-size; position:relative; width:100%; }
.mb-deckel{ width:86cqw; margin:0 auto; padding:1.25cqw 1.25cqw 1.5cqw; border-radius:2.6cqw 2.6cqw .7cqw .7cqw; background:#0c0c0d;
  box-shadow:inset 0 0 0 .22cqw #46474b, inset 0 0 0 .45cqw #111; }
.mb-screen{ position:relative; display:flex; flex-direction:column; aspect-ratio:1.54; border-radius:1.1cqw 1.1cqw .2cqw .2cqw; overflow:hidden; background:#000; }
.mb-leiste{ position:relative; flex:none; height:2.3cqw; background:#000; }
.mb-notch{ position:absolute; left:50%; top:0; width:10.5cqw; height:2.3cqw; transform:translateX(-50%); border-radius:0 0 .8cqw .8cqw; background:#000; }
.mb-notch::after{ content:""; position:absolute; left:50%; top:.75cqw; width:.75cqw; height:.75cqw; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2b3a55, #07090d 70%); }
.mb-seite{ position:relative; flex:1; min-height:0; overflow:hidden; background:var(--sb, #fff); }
.mb-seite img{ display:block; width:100%; height:auto; will-change:transform; }
.mb-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%); }
.mb-basis{ position:relative; height:2.5cqw; border-radius:.3cqw .3cqw 3cqw 3cqw / .3cqw .3cqw 1.6cqw 1.6cqw;
  background:linear-gradient(180deg,#d9dade 0%,#c3c5ca 38%,#9fa1a6 100%); box-shadow:0 3cqw 4cqw -2.5cqw rgba(0,0,0,.45); }
.mb-basis::before{ content:""; position:absolute; left:50%; top:0; width:14cqw; height:1cqw; transform:translateX(-50%); border-radius:0 0 1cqw 1cqw;
  background:linear-gradient(180deg,#a7a9ae,#cfd0d4); }
.mb-basis::after{ content:""; position:absolute; left:7cqw; right:7cqw; top:0; height:.25cqw; background:rgba(0,0,0,.18); }

/* MacBook mit iPhone davor (Labor-Cockpit) */
.geraete-duo{ position:relative; width:100%; padding-right:9%; padding-bottom:4%; }
.geraete-duo .iphone{ position:absolute; right:0; bottom:0; width:22%; }

@media (prefers-reduced-motion:reduce){ .ip-seite img, .mb-seite img{ transform:none !important; } }

/* Referenz-Bühnen mit echten Geräten (2026-10-23): Gerät immer ganz sichtbar, nie angeschnitten */
.ref-buehne{ position:relative; width:100%; max-width:540px; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  padding:clamp(30px,4vw,48px) clamp(20px,3vw,36px); }
.ref-buehne > .iphone{ width:clamp(200px,56%,270px); }
.ref-buehne > .geraete-duo{ width:min(100%,780px); }
.refs-raster .ref-zelle.breit{ grid-column:1 / -1; border-right:0; }
.refs-raster .ref-zelle.breit .ref-buehne{ max-width:960px; }
.refs-raster .ref-zelle.breit .leist-txt{ max-width:60ch; }
.panel-vis .geraete-duo{ width:84%; }
@media (max-width:640px){
  .ref-buehne{ padding:28px 18px; }
  .ref-buehne > .iphone{ width:min(62%,230px); }
  .geraete-duo{ padding-right:12%; }
  .geraete-duo .iphone{ width:26%; }
}
/* Referenzen-Seite: Bühnen in der Zeile, zwei iPhones nebeneinander (2026-10-23) */
.ref-zeile .ref-buehne{ max-width:none; min-height:clamp(320px,34vw,460px); }
.ref-zeile:nth-child(even) .ref-buehne{ order:2; }
.ref-buehne.zwei{ gap:clamp(14px,2.4vw,28px); }
.ref-buehne.zwei > .iphone{ width:clamp(140px,40%,220px); }
@media (max-width:900px){ .ref-zeile:nth-child(even) .ref-buehne{ order:0; } }