/* Schriften liegen auf dem eigenen Webspace. Dadurch baut der Browser des
   Besuchers keine Verbindung zu fremden Servern auf - es wird keine
   IP-Adresse an Dritte uebertragen. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/archivo-latin-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/archivo-latin-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-latin-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-latin-400.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/source-sans-3-latin-500.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-latin-600.woff2") format("woff2")}

:root{
  --navy-900:#08182D;
  --navy-800:#0E2542;
  --navy-700:#163458;
  --blue:#2E6FE5;
  --blue-soft:#7FA9F0;
  --blue-wash:#E4EDFC;
  --paper:#F4F7FC;
  --surface:#FFFFFF;
  --ink:#0E2542;
  --slate:#4A5A72;
  --slate-soft:#7A8AA0;
  --line:#DCE4F0;
  --ok:#1E8E5A;

  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--slate);
  --muted-2:var(--slate-soft);
  --card:var(--surface);
  --border:var(--line);
  --accent:var(--blue);
  --accent-wash:var(--blue-wash);
  --accent-solid:#2E6FE5;
  --accent-label:#1F59C7;   /* dunkler, damit 12-px-Label 4,5:1 erreichen */
  --on-accent:#FFFFFF;
  --band:var(--navy-800);
  --band-fg:#EAF1FB;
  --band-muted:#A9BFDD;
  --band-line:rgba(255,255,255,.14);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1140px;
  --r-s:8px; --r-m:14px; --r-l:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#071426; --fg:#E8EFF9; --muted:#B0C2DA; --muted-2:#8298B5;
    --card:#0E2140; --border:rgba(255,255,255,.12);
    --accent:#6E9DF2; --accent-wash:rgba(110,157,242,.14);
    --accent-solid:#6E9DF2; --on-accent:#07182E; --accent-label:#8FB4F5; --accent-label:#8FB4F5;
    --band:#050F1D; --band-fg:#E8EFF9; --band-muted:#9DB4D3; --band-line:rgba(255,255,255,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#071426; --fg:#E8EFF9; --muted:#B0C2DA; --muted-2:#8298B5;
  --card:#0E2140; --border:rgba(255,255,255,.12);
  --accent:#6E9DF2; --accent-wash:rgba(110,157,242,.14);
  --accent-solid:#6E9DF2; --on-accent:#07182E; --accent-label:#8FB4F5;
  --band:#050F1D; --band-fg:#E8EFF9; --band-muted:#9DB4D3; --band-line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.022em; text-wrap:balance; margin:0; line-height:1.12}
p{margin:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-label);
}
.band .eyebrow{color:var(--blue-soft)}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hdr-in{
  max-width:var(--wrap); margin-inline:auto; padding:12px 22px;
  display:flex; align-items:center; gap:24px; justify-content:space-between;
}
.hdr-logo{display:inline-flex; align-items:center; padding:6px 2px}
.hdr-logo img{height:34px; width:auto}
.hdr-nav{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.hdr-nav a{
  font-size:15.5px; font-weight:600; color:#C8D8EE; text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent;
}
.hdr-nav a:hover{color:#fff; border-bottom-color:var(--blue-soft)}
.hdr-call{
  font-family:var(--mono); font-size:14.5px; font-weight:600;
  background:var(--blue); color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:var(--r-s); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
}
.hdr-call:hover{background:#2360D2}
@media (max-width:820px){ .hdr-nav{display:none} }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  /* Solide Farbe zuerst: faellt der Verlauf aus, bleibt der Text lesbar. */
  background-color:var(--navy-800);
  background-image:
    radial-gradient(1000px 520px at 88% -10%, rgba(46,111,229,.34), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 72%);
  color:#EAF1FB;
}
.hero-mark{
  position:absolute; right:-90px; top:-40px; width:520px; height:auto; opacity:.055;
  pointer-events:none; user-select:none;
}
.hero-grid{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
}
.hero-in{
  position:relative; max-width:var(--wrap); margin-inline:auto; padding:64px 22px 72px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
.hero h1{font-size:clamp(38px,5.4vw,62px); color:#fff; letter-spacing:-.028em}
.hero .lede{font-size:20px; color:#C3D5EE; margin-top:20px; max-width:32em}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px}
.chip{
  font-size:14.5px; font-weight:600; color:#CFE0F7;
  border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:6px 14px;
  display:inline-flex; align-items:center; gap:7px;
}
.chip svg{width:15px; height:15px; stroke:var(--blue-soft); flex:none}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--display); font-weight:600; font-size:17px;
  padding:15px 24px; border-radius:var(--r-s); border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:19px; height:19px; flex:none}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:#2360D2}
.btn-ghost{border-color:rgba(255,255,255,.28); color:#DCE8F8}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* ---------- Problem-Tafel im Hero ---------- */
.hero-panel{
  justify-self:end; width:100%; max-width:420px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l);
  padding:28px 28px 26px;
  backdrop-filter:blur(2px);
}
.panel-title{
  display:block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-soft);
  margin-bottom:20px;
}
.probs{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.probs li{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-top:1px solid rgba(255,255,255,.1);
  font-size:17px; color:#DCE8F8; line-height:1.35;
}
.probs li:first-child{border-top:0; padding-top:0}
.prob-ic{
  width:40px; height:40px; flex:none; border-radius:10px;
  background:rgba(127,169,240,.15); color:var(--blue-soft);
  display:grid; place-items:center;
}
.prob-ic svg{width:21px; height:21px}
.panel-foot{
  margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  font-size:15.5px; color:#9FBADC;
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:36px; padding-top:44px}
  .hero-panel{max-width:none; justify-self:stretch}
}
@media (max-width:420px){
  .hero-panel{padding:22px 20px 20px}
  .probs li{font-size:16px; gap:12px}
  .prob-ic{width:36px; height:36px}
}

/* ---------- Namenskarte am Foto ---------- */
.status{
  position:absolute; left:-22px; bottom:-24px;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--r-m);
  padding:14px 18px;
  box-shadow:0 18px 40px rgba(4,16,32,.18);
  display:flex; align-items:center; gap:12px; max-width:86%;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok); flex:none;
  box-shadow:0 0 0 4px rgba(30,142,90,.16)}
.status b{font-family:var(--display); font-size:16px; display:block; line-height:1.3}
.status span{font-size:14px; color:var(--muted); line-height:1.3; display:block; margin-top:1px}

/* ---------- sections ---------- */
section{padding-block:78px}
.sec-head{max-width:38em; margin-bottom:44px}
.sec-head h2{font-size:clamp(27px,3.3vw,38px); margin-top:12px}
.sec-head p{color:var(--muted); margin-top:14px; font-size:18.5px}

/* services: divider grid, not 6 identical cards */
.svc{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border); border-radius:var(--r-l);
  overflow:hidden; background:var(--card);
}
.svc-item{padding:32px 30px 34px; border-right:1px solid var(--border); border-bottom:1px solid var(--border)}
.svc-item:nth-child(3n){border-right:0}
.svc-item:nth-child(n+4){border-bottom:0}
.svc-ic{
  width:44px; height:44px; border-radius:11px; background:var(--accent-wash);
  display:grid; place-items:center; margin-bottom:18px;
}
.svc-ic svg{width:23px; height:23px; stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.svc-item h3{font-size:19.5px; margin-bottom:8px}
.svc-item p{color:var(--muted); font-size:16.5px; line-height:1.55}
@media (max-width:900px){
  .svc{grid-template-columns:1fr 1fr}
  .svc-item{border-right:1px solid var(--border) !important; border-bottom:1px solid var(--border) !important}
  .svc-item:nth-child(2n){border-right:0 !important}
  .svc-item:nth-child(n+5){border-bottom:0 !important}
}
@media (max-width:600px){
  .svc{grid-template-columns:1fr}
  .svc-item{border-right:0 !important}
  .svc-item:last-child{border-bottom:0 !important}
}

/* ---------- band (dark) ---------- */
.band{background:var(--band); color:var(--band-fg)}
.band .sec-head p{color:var(--band-muted)}

/* steps \002014  a real sequence, so numbers earn their place */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.step{padding:30px 30px 32px; border-left:1px solid var(--band-line)}
.step:first-child{border-left:0; padding-left:0}
.step-n{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--blue-soft);
  letter-spacing:.14em; display:block; margin-bottom:14px;
}
.step h3{font-size:20px; color:#fff; margin-bottom:9px}
.step p{color:var(--band-muted); font-size:16.5px; line-height:1.55}
@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .step{border-left:0; padding:24px 0; border-top:1px solid var(--band-line)}
  .step:first-child{border-top:0; padding-top:0}
}

/* ---------- carousel ---------- */
.car-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap}
.car-nav{display:flex; gap:9px}
.car-btn{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--band-line); color:var(--band-fg);
  display:grid; place-items:center;
}
.car-btn:hover:not(:disabled){background:rgba(255,255,255,.09)}
.car-btn:disabled{opacity:.3; cursor:default}
.car-btn svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 calc((100% - 40px)/3); min-width:0;
  scroll-snap-align:start;
  background:rgba(255,255,255,.05); border:1px solid var(--band-line);
  border-radius:var(--r-m); padding:28px 26px 30px;
  display:flex; flex-direction:column; gap:12px;
}
.slide .tag{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-soft);
}
.slide h3{font-size:19px; color:#fff}
.slide p{color:var(--band-muted); font-size:16.5px; line-height:1.55}
.slide .fix{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--band-line);
  font-size:15.5px; color:#D5E4F7; display:flex; gap:9px; align-items:flex-start;
}
.slide .fix svg{width:17px;height:17px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
/* Die Punkte bleiben klein, die Tippflaeche ist aber 44 x 44 px gross -
   darunter trifft man sie am Handy nicht zuverlaessig. */
.dots{display:flex; gap:0; margin-top:14px; justify-content:center}
.dots button{
  width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
}
.dots button::before{
  content:""; display:block; width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.26); transition:width .2s, background .2s;
}
.dots button[aria-current="true"]::before{width:26px; border-radius:100px; background:var(--blue-soft)}
.dots button:focus-visible{outline:2px solid var(--blue-soft); outline-offset:-6px; border-radius:50%}
@media (max-width:900px){ .slide{flex-basis:calc((100% - 20px)/2)} }
@media (max-width:620px){ .slide{flex-basis:86%} }

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center}
.about-photo{position:relative}
.about-photo img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-l); border:1px solid var(--border);
}
.about h2{font-size:clamp(27px,3.3vw,38px); margin-top:12px}
.about .body{margin-top:18px; display:grid; gap:14px}
.about .body p{color:var(--muted); font-size:17.5px}
.quote{
  margin-top:22px; padding-left:20px; border-left:3px solid var(--accent);
  font-family:var(--display); font-size:19px; font-weight:600; color:var(--fg); line-height:1.4;
}
.li-link{
  margin-top:26px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:16.5px;
  color:var(--fg); text-decoration:none;
  border:1px solid var(--border); border-radius:var(--r-s); padding:12px 18px; background:var(--card);
}
.li-link:hover{border-color:var(--accent); color:var(--accent)}
.li-link svg{width:20px;height:20px;fill:currentColor}
@media (max-width:900px){
  .about{grid-template-columns:1fr; gap:44px}
  .about-photo{max-width:360px}
  .status{left:12px; right:12px; bottom:-20px; max-width:none}
}

/* ---------- area ---------- */
.area{display:grid; grid-template-columns:1fr 1.25fr; gap:48px; align-items:center}
.area-list{display:grid; gap:22px}
.area-group{
  background:var(--card); border:1px solid var(--border);
  border-left:3px solid var(--accent-solid); border-radius:var(--r-m); padding:18px 22px;
}
.area-group b{
  display:block; font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-solid); margin-bottom:6px;
}
.area-group p{margin:0; font-size:17px; line-height:1.6; color:var(--fg)}
@media (max-width:820px){ .area{grid-template-columns:1fr; gap:28px} }

picture{display:contents}

/* ---------- bewertung ---------- */
.rate{
  display:grid; gap:40px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-l);
  padding:34px 38px;
}
.rate-txt h2{font-size:clamp(24px,2.6vw,30px); margin:10px 0 12px}
.rate-txt p{margin:0 0 22px; max-width:56ch}
.rate-qr{display:grid; justify-items:center; gap:10px; text-align:center}
.rate-qr img{
  width:150px; height:150px; display:block;
  border:1px solid var(--border); border-radius:var(--r-m); background:#fff; padding:8px;
}
.rate-qr span{font-size:13.5px; color:var(--muted); line-height:1.4; max-width:150px}
.rate-hinweis{font-size:15.5px; color:var(--muted); margin:0 0 20px}
.rate-btns{display:flex; flex-wrap:wrap; gap:12px}
/* btn-ghost ist fuer dunkle Flaechen gedacht - auf der hellen Karte
   braucht der zweite Knopf eigene Farben, sonst ist er unlesbar. */
.rate-btns .btn-ghost{border-color:var(--border); color:var(--fg); background:var(--card)}
.rate-btns .btn-ghost:hover{background:var(--accent-wash); border-color:var(--accent-solid)}
@media (max-width:760px){
  .rate{grid-template-columns:1fr; gap:26px; padding:28px 22px}
  .rate-txt p{max-width:none}
  .rate-btns .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:52px}
.ct-list{display:grid; gap:14px; margin-top:8px}
.ct-row{
  display:flex; gap:16px; align-items:flex-start; text-decoration:none;
  border:1px solid var(--band-line); border-radius:var(--r-m); padding:18px 20px;
  background:rgba(255,255,255,.04);
}
a.ct-row:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28)}
.ct-ic{width:22px;height:22px;stroke:var(--blue-soft);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px}
.ct-row b{display:block; font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted); font-weight:600}
.ct-row span{display:block; font-size:18px; color:#fff; margin-top:3px; line-height:1.4}
.note{font-size:14.5px; color:var(--band-muted); margin-top:14px}

.form{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field label{font-size:14.5px; font-weight:600; color:#CFE0F7}
.field input,.field textarea{
  font:inherit; font-size:17px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid var(--band-line);
  border-radius:var(--r-s); padding:13px 15px; width:100%;
}
.field textarea{min-height:132px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#7E97B8}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue-soft); outline-offset:1px; border-color:transparent}
.form-note{font-size:14px; color:var(--band-muted)}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--band-muted); line-height:1.45; cursor:pointer; padding:9px 0}
/* Das Kaestchen selbst ist 22 px gross. Antippbar ist aber die gesamte
   Zeile, weil der Text im <label> steht - damit liegt die echte Trefferflaeche
   weit ueber 40 px. */
.consent input{width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--blue)}
.field .opt{font-weight:400; color:var(--band-muted)}
/* Spamschutz-Feld: unsichtbar, aber nicht per display:none - manche Bots
   erkennen das. Es liegt ausserhalb des Sichtbereichs. */
.honigtopf{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:860px){ .contact{grid-template-columns:1fr; gap:44px} }

/* ---------- footer ---------- */
.ft{background:var(--navy-900); color:#A9BFDD; padding-block:44px; border-top:1px solid rgba(255,255,255,.09)}
.ft-in{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start}
.ft-logo img{height:52px; width:auto}
.ft-dom{font-family:var(--mono); font-size:14.5px; color:var(--blue-soft); margin-top:12px; letter-spacing:.02em}
.ft-col{display:grid; gap:0; font-size:15.5px}
.ft-col b{font-family:var(--display); color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px}
/* Mindestens 40 px hoch, damit man die Verweise am Handy sicher trifft. */
.ft-col a,.ft-col span{display:flex; align-items:center; min-height:40px; text-decoration:none}
.ft-col a:hover{color:#fff}
.ft-bot{
  margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.09);
  font-size:14px; color:#7E97B8; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
}

/* ---------- legal ---------- */
.legal{max-width:760px}
.legal h2{font-size:clamp(24px,2.9vw,32px); margin-top:12px}
.legal h3{font-family:var(--display); font-size:17px; margin-top:30px; margin-bottom:7px; color:var(--fg)}
.legal p, .legal li{color:var(--muted); font-size:16.5px; line-height:1.62}
.legal p + p{margin-top:10px}
.legal ul{margin:8px 0 0; padding-left:20px; display:grid; gap:5px}
.legal address{font-style:normal; color:var(--muted); font-size:16.5px; line-height:1.9}
.legal address a{display:inline-block; padding-block:5px}
/* ---------- Fragen und Antworten ---------- */
.faq{max-width:780px}
.faq details{
  border-top:1px solid var(--border); background:transparent;
}
.faq details:last-of-type{border-bottom:1px solid var(--border)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:18.5px; color:var(--fg);
  line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 44px 22px 0; color:var(--muted); font-size:17px; line-height:1.6}
.faq .answer p + p{margin-top:10px}

.legal-sep{height:1px; background:var(--border); margin-block:56px}

/* ---------- scroll progress + reveal ---------- */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:80;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));
  transition:width .1s linear; pointer-events:none;
}
.hdr{transition:padding .25s ease, background .25s ease}
.hdr.is-scrolled{box-shadow:0 6px 24px rgba(4,14,28,.28)}
.hdr.is-scrolled .hdr-in{padding-block:7px}
.hdr.is-scrolled .hdr-logo img{height:28px}
.hdr-logo img{transition:height .25s ease}

.js-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js-reveal.is-in{opacity:1; transform:none}

:where(a,button,input,textarea):focus-visible{outline:2px solid var(--blue-soft); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .js-reveal{opacity:1 !important; transform:none !important}
}
html{scroll-behavior:smooth; scroll-padding-top:84px}

/* ---------- eigenstaendige Rechtsseiten ---------- */
.legal-page{padding-top:118px}
.legal-page h1{font-family:var(--display); font-size:clamp(28px,4vw,40px); margin:6px 0 26px}
.legal-back{margin:0 0 26px}
.legal-back a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
  color:var(--accent-solid); text-decoration:none; font-weight:600; font-size:16.5px;
}
.legal-back a:hover{text-decoration:underline}