/* CG Technik – Webseite. Schriften liegen auf dem eigenen Server (keine Google-Dienste). */
@font-face{font-family:"Archivo"; src:url("../fonts/archivo-variabel.woff2") format("woff2"); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap}
@font-face{font-family:"Inter"; src:url("../fonts/inter-variabel.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}

/* Layout: dunkler Markenkopf und Titelbild mit Termin-Auswahl, darunter helle Inhaltsbänder (Vertrauen, Leistungen, Leitungsweg, Ablauf, Dokumentation dunkel, Fragen, Anfrage), dunkler Fuß. Handy: eine Spalte, Aktionsleiste unten. */
:root{
  /* Inhalt (folgt dem Hell-/Dunkelmodus) */
  --bg:#f5f3f9; --surface:#ffffff; --surface-2:#ece6f6; --ink:#1b1330; --muted:#574d6d;
  --line:#e0d8ee; --accent:#7a1fff; --accent-hover:#6514e0; --on-accent:#ffffff; --accent-soft:#efe6ff; --ok:#1d7a4c;
  /* Markenflächen (immer dunkel, wie die Fahrzeugbeschriftung) */
  --night:#100a1c; --night-2:#1a1230; --night-line:#2f2550; --night-ink:#f4effd; --night-muted:#b9add2; --glow:#a35bff;
  --f-display:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:16px; --maxw:1160px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#130d20; --surface:#1b1430; --surface-2:#251c3f; --ink:#f3eefc; --muted:#b8accf;
  --line:#322750; --accent:#8f45ff; --accent-hover:#a066ff; --on-accent:#ffffff; --accent-soft:#2a1d4d; --ok:#5fd39a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#130d20; --surface:#1b1430; --surface-2:#251c3f; --ink:#f3eefc; --muted:#b8accf;
  --line:#322750; --accent:#8f45ff; --accent-hover:#a066ff; --on-accent:#ffffff; --accent-soft:#2a1d4d; --ok:#5fd39a; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:104px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{background:var(--bg); color:var(--ink); font:400 17px/1.65 var(--f-body); -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--night)}
a{color:inherit}
img{display:block}
h1,h2,h3{font-family:var(--f-display); font-stretch:110%; line-height:1.1; text-wrap:balance; margin:0; letter-spacing:-.005em}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem); font-weight:800}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:800}
h3{font-size:1.22rem; font-weight:700}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px))}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 .78rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.eyebrow::before{content:""; width:22px; height:2px; background:currentColor; border-radius:2px}
.lead{color:var(--muted); font-size:1.1rem; max-width:60ch}
.band{padding-block:clamp(64px,9vw,112px)}
.sec-head{display:grid; gap:14px; margin-bottom:clamp(32px,4vw,48px); max-width:66ch}

/* Knöpfe */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 24px; border-radius:12px;
  font:600 1rem/1.1 var(--f-body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:background .15s,border-color .15s,color .15s}
.btn svg{width:18px; height:18px; flex:none; transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 8px 24px -10px var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-light{border-color:rgba(244,239,253,.35); color:var(--night-ink); background:rgba(244,239,253,.06)}
.btn-light:hover{border-color:var(--night-ink); background:rgba(244,239,253,.12)}
.btn-line{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--glow); outline-offset:3px}

/* Kopf */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(16,10,28,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--night-line); color:var(--night-ink)}
.top .wrap{display:flex; align-items:center; gap:28px; min-height:96px}
.logo{margin-right:auto; display:block}
.logo img{height:78px; width:auto; filter:drop-shadow(0 0 14px rgba(163,91,255,.45))}
.logo:hover img{filter:drop-shadow(0 0 20px rgba(163,91,255,.7))}
nav.main{display:flex; gap:30px}
nav.main a{color:var(--night-muted); text-decoration:none; font-weight:500; font-size:.98rem; padding:6px 0; border-bottom:2px solid transparent}
nav.main a:hover{color:var(--night-ink); border-color:var(--glow)}
.top .btn{min-height:46px; padding:0 18px; font-size:.95rem}
.menu-btn{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--night-line); background:transparent; color:var(--night-ink); cursor:pointer; place-items:center}
.mobile-nav{background:var(--night); border-top:1px solid var(--night-line)}
.mobile-nav .wrap{display:grid; padding-block:6px 14px}
.mobile-nav a{padding:15px 0; color:var(--night-ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--night-line)}
@media (max-width:900px){nav.main{display:none} .menu-btn{display:grid} .top .call-text{display:none} .top .btn{padding:0 14px} .logo img{height:58px} .top .wrap{min-height:76px}}
@media (min-width:901px){.mobile-nav{display:none!important}}

/* Titelbild */
.hero{position:relative; background:var(--night); color:var(--night-ink); isolation:isolate; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% 50%}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(16,10,28,.96) 0%,rgba(16,10,28,.86) 38%,rgba(16,10,28,.35) 72%,rgba(16,10,28,.15) 100%),
             linear-gradient(0deg,rgba(16,10,28,.95) 0%,rgba(16,10,28,0) 38%)}
.hero .wrap{display:grid; gap:clamp(32px,4vw,48px); padding-block:clamp(44px,6vw,80px) clamp(28px,4vw,44px)}
.hero-copy{display:grid; gap:24px; max-width:640px}
.hero .eyebrow{color:#c9a6ff}
.hero .lead{color:var(--night-muted); font-size:1.15rem}
.hero h1 em{font-style:normal; color:#c9a6ff}
.ctas{display:flex; flex-wrap:wrap; gap:12px}

.termin-panel{display:grid; grid-template-columns:auto 1fr 1fr; gap:14px; align-items:stretch; background:rgba(26,18,48,.82); border:1px solid var(--night-line); border-radius:20px; padding:14px; backdrop-filter:blur(8px)}
.tp-intro{display:grid; align-content:center; gap:4px; padding:10px 16px 10px 12px; min-width:0}
.tp-intro strong{font:700 1.15rem/1.2 var(--f-display); font-stretch:110%}
.tp-intro span{color:var(--night-muted); font-size:.92rem}
.tp-card{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:14px; background:rgba(244,239,253,.05); border:1px solid var(--night-line);
  color:var(--night-ink); text-decoration:none; transition:background .15s,border-color .15s; min-width:0}
.tp-card:hover{background:rgba(163,91,255,.16); border-color:var(--glow)}
.tp-card .ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(163,91,255,.18); color:#d2b4ff; flex:none}
.tp-card .ico svg{width:24px; height:24px}
.tp-card .txt{display:grid; gap:2px; min-width:0}
.tp-card .txt strong{font-weight:700}
.tp-card .txt span{font-size:.9rem; color:var(--night-muted)}
.tp-card .go{margin-left:auto; color:#d2b4ff; flex:none}
@media (max-width:980px){.termin-panel{grid-template-columns:1fr 1fr} .tp-intro{grid-column:1/-1; padding:6px 8px 2px}}
@media (max-width:640px){.termin-panel{grid-template-columns:1fr}}

/* Vertrauen */
.trust{background:var(--surface); border-bottom:1px solid var(--line)}
.trust ul{list-style:none; margin:0; padding:26px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.trust li{display:flex; gap:14px; align-items:flex-start; min-width:0}
.trust .ico{width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none}
.trust .ico svg{width:22px; height:22px}
.trust strong{display:block; font-size:.98rem; line-height:1.3}
.trust span{color:var(--muted); font-size:.88rem; line-height:1.4}
@media (max-width:980px){.trust ul{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.trust ul{grid-template-columns:1fr}}

/* Leistungen */
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.svc{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-width:0; transition:border-color .15s, box-shadow .15s}
.svc:hover{border-color:var(--accent); box-shadow:0 18px 40px -24px rgba(90,30,200,.45)}
.svc img{width:100%; aspect-ratio:10/7; object-fit:cover; max-width:100%}
.svc-body{display:flex; flex-direction:column; gap:10px; padding:22px; flex:1}
.svc p{color:var(--muted); font-size:.96rem}
.svc ul{margin:0; padding:0; list-style:none; display:grid; gap:6px; font-size:.92rem; color:var(--muted)}
.svc li{display:flex; gap:8px} .svc li::before{content:""; width:6px; height:6px; margin-top:.6em; border-radius:50%; background:var(--accent); flex:none}
.svc .more{margin-top:auto; padding-top:8px; font-weight:600; color:var(--accent); text-decoration:none; display:inline-flex; gap:8px; align-items:center}
.svc .more svg{width:16px; height:16px}
@media (max-width:1080px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.services{grid-template-columns:1fr}}
.audience{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:32px; color:var(--muted); font-size:.95rem}
.chip{padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:500}

/* Leitungsweg */
.route{background:var(--surface); border-block:1px solid var(--line)}
.route .wrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.parts{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px}
.parts li{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:16px 18px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
.parts .tag{grid-row:span 2; align-self:center; min-width:62px; text-align:center; padding:6px 8px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font:700 .78rem/1 var(--f-body); letter-spacing:.04em}
.parts strong{font-size:1rem}
.parts span{color:var(--muted); font-size:.93rem}
.schema{margin:0; background:var(--night); border-radius:22px; padding:clamp(16px,2.4vw,26px); border:1px solid var(--night-line); min-width:0}
.schema svg{width:100%; height:auto; display:block}
.s-wall{fill:#1d1536; stroke:#3a2e60; stroke-width:1.5}
.s-floor{stroke:#3a2e60; stroke-width:1.5}
.s-ground{stroke:#5a4a8a; stroke-width:2}
.s-fiber{stroke:#8f45ff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.s-pulse{stroke:#d9c2ff; stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24 900; animation:pulse 5s linear infinite; filter:drop-shadow(0 0 5px #a35bff)}
@keyframes pulse{from{stroke-dashoffset:924} to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.s-pulse{display:none}}
.s-box{fill:#251c44; stroke:#a35bff; stroke-width:2}
.s-dot{fill:#d9c2ff}
.s-label{fill:#f4effd; font:600 13px var(--f-body)}
.s-sub{fill:#b9add2; font:500 11.5px var(--f-body)}
.s-tag{fill:#c9a6ff; font:700 10.5px var(--f-body); letter-spacing:.06em}
@media (max-width:900px){.route .wrap{grid-template-columns:1fr}}

/* Ablauf */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; counter-reset:st}
.steps::before{content:""; position:absolute; left:28px; right:28px; top:28px; height:2px; background:linear-gradient(90deg,var(--accent),var(--line)); z-index:0}
.steps li{position:relative; z-index:1; display:grid; gap:12px; align-content:start; counter-increment:st}
.steps .num{width:56px; height:56px; border-radius:50%; background:var(--surface); border:2px solid var(--accent); color:var(--accent); display:grid; place-items:center; font:800 1.2rem/1 var(--f-display)}
.steps .num::before{content:counter(st)}
.steps p{color:var(--muted)}
.steps .who{font-size:.85rem; color:var(--accent); font-weight:600}
@media (max-width:860px){.steps{grid-template-columns:1fr; gap:28px} .steps::before{left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; background:linear-gradient(180deg,var(--accent),var(--line))}
  .steps li{grid-template-columns:56px 1fr; column-gap:18px} .steps li > :not(.num){grid-column:2} .steps .num{grid-row:span 3}}

/* Dokumentation */
.doc{background:var(--night); color:var(--night-ink)}
.doc .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center}
.doc .eyebrow{color:#c9a6ff}
.doc .lead{color:var(--night-muted)}
.doc-list{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px}
.doc-list li{display:flex; gap:14px; align-items:flex-start}
.doc-list svg{width:22px; height:22px; color:#c9a6ff; flex:none; margin-top:2px}
.doc-list strong{display:block}
.doc-list span{color:var(--night-muted); font-size:.95rem}
.sheet{background:#f8f6fc; color:#1b1330; border-radius:14px; padding:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transform:rotate(-1.5deg); font-size:.86rem; max-width:440px; justify-self:center; width:100%}
.sheet header{display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid #1b1330; padding-bottom:10px; margin-bottom:12px; font-weight:700}
.sheet header span{color:#7a1fff; font-weight:600}
.sheet table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.sheet th,.sheet td{text-align:left; padding:7px 6px; border-bottom:1px solid #e3dcef}
.sheet th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#6b6185}
.sheet td.ok{color:#1d7a4c; font-weight:700}
.sheet .note{margin-top:10px; color:#6b6185; font-size:.76rem}
@media (max-width:900px){.doc .wrap{grid-template-columns:1fr} .sheet{transform:none}}

/* Fragen */
.faq-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); align-items:start}
.faq{display:grid; gap:12px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px}
.faq details[open]{border-color:var(--accent)}
.faq summary{cursor:pointer; list-style:none; padding:19px 22px; font-weight:600; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:12px; height:12px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translateY(-3px); flex:none; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 22px 20px; color:var(--muted)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}}

/* Anfrage */
.contact{background:var(--surface); border-top:1px solid var(--line)}
.contact .wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px); align-items:start}
form.req{display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,34px); min-width:0}
.field{display:grid; gap:7px; min-width:0}
.field.full{grid-column:1/-1}
label{font-weight:600; font-size:.92rem}
label .opt{font-weight:400; color:var(--muted)}
input,select,textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:11px; padding:13px 14px; width:100%; transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:130px; resize:vertical}
.topics{display:flex; flex-wrap:wrap; gap:8px}
.topics input{position:absolute; opacity:0; width:1px; height:1px}
.topics label{cursor:pointer; padding:10px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); font-weight:500; font-size:.94rem}
.topics input:checked + label{border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600}
.topics input:focus-visible + label{outline:3px solid var(--glow); outline-offset:2px}
.form-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.form-foot small{color:var(--muted); max-width:46ch}
.sent{grid-column:1/-1; padding:14px 16px; border-radius:12px; background:var(--accent-soft); color:var(--ink); font-weight:500}
.direct{display:grid; gap:14px}
.direct-card{background:var(--night); color:var(--night-ink); border-radius:20px; padding:26px; display:grid; gap:18px}
.direct-card h3{font-size:1.15rem}
.dc-row{display:grid; gap:2px}
.dc-row span{color:var(--night-muted); font-size:.85rem}
.dc-row strong{font-size:1.12rem; user-select:all}
.dc-row a{text-decoration:none}
.hours{color:var(--muted); font-size:.92rem; padding:0 6px}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
@media (max-width:560px){form.req{grid-template-columns:1fr}}

/* Fuß */
footer{background:var(--night); color:var(--night-muted); padding-block:44px 32px; font-size:.93rem}
footer .wrap{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px}
footer img{height:72px; width:auto; margin-bottom:14px; filter:drop-shadow(0 0 12px rgba(163,91,255,.35))}
footer h4{margin:0 0 10px; color:var(--night-ink); font:600 .82rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase}
footer a{text-decoration:none} footer a:hover{color:var(--night-ink)}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-bottom{grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--night-line); padding-top:20px; margin-top:8px; font-size:.85rem}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* Aktionsleiste Handy */
.dock{display:none}
@media (max-width:700px){
  .dock{display:grid; grid-template-columns:1fr 1.4fr; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(16,10,28,.96); border-top:1px solid var(--night-line);
    padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
  .dock .btn{min-height:50px; padding:0 12px}
  footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

/* Entwurf-Hinweis */
.draft{background:#2a1d4d; color:#e6dbff; font-size:.82rem; text-align:center}
.draft .wrap{padding-block:7px}

/* ---------- Unterseiten ---------- */
.page-hero{position:relative; background:var(--night); color:var(--night-ink); isolation:isolate; overflow:hidden}
.page-hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(44px,6vw,80px)}
.page-hero .eyebrow{color:#c9a6ff}
.page-hero .lead{color:var(--night-muted); margin-top:16px}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem)}
.page-hero img{width:100%; border-radius:18px; border:1px solid var(--night-line); max-width:100%; aspect-ratio:10/7; object-fit:cover}
.page-hero .ctas{margin-top:26px}
.crumbs{font-size:.88rem; color:var(--night-muted); margin-bottom:14px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--night-ink)}
@media (max-width:860px){.page-hero .wrap{grid-template-columns:1fr} .page-hero img{max-height:260px}}

.cols{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.prose{display:grid; gap:18px; max-width:68ch; min-width:0}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem); margin-top:12px}
.prose h3{margin-top:6px}
.prose p,.prose li{color:var(--muted)}
.prose ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.prose ul li{display:flex; gap:12px}
.prose ul li::before{content:""; width:8px; height:8px; margin-top:.65em; border-radius:50%; background:var(--accent); flex:none}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent)}
.side{display:grid; gap:16px; position:sticky; top:100px}
@media (max-width:900px){.side{position:static}}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:grid; gap:12px}
.side-card h3{font-size:1.08rem}
.side-card p{color:var(--muted); font-size:.95rem}
.side-card .btn{width:100%}
.side-dark{background:var(--night); color:var(--night-ink); border-color:var(--night-line)}
.side-dark p{color:var(--night-muted)}
.notice{border-left:4px solid var(--accent); background:var(--accent-soft); padding:16px 18px; border-radius:0 12px 12px 0; color:var(--ink)}
.facts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.facts-grid div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px}
.facts-grid strong{display:block; margin-bottom:4px}
.facts-grid span{color:var(--muted); font-size:.95rem}
@media (max-width:560px){.facts-grid{grid-template-columns:1fr}}
.more-svc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.more-svc a{display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; background:var(--surface); border:1px solid var(--line); text-decoration:none; font-weight:600}
.more-svc a:hover{border-color:var(--accent)}
.more-svc img{width:64px; height:46px; object-fit:cover; border-radius:8px; flex:none}
@media (max-width:760px){.more-svc{grid-template-columns:1fr}}

/* Rechtstexte */
.legal{max-width:76ch}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-bottom:8px}
.legal h2{font-size:1.3rem; margin-top:30px; margin-bottom:8px}
.legal p,.legal li{color:var(--muted)}
.legal p + p{margin-top:10px}
.legal address{font-style:normal; color:var(--ink)}

/* Formular-Ergänzungen */
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.check{display:flex; gap:12px; align-items:flex-start; font-weight:400; font-size:.94rem; color:var(--muted)}
.check input{width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--accent)}
.check a{color:var(--accent)}
.sent.fehler{background:#fde8e8; color:#8a1c1c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sent.fehler{background:#3a1520; color:#ffc9c9}}
:root[data-theme="dark"] .sent.fehler{background:#3a1520; color:#ffc9c9}
button[disabled]{opacity:.6; cursor:wait}
.nf{text-align:center; display:grid; gap:18px; justify-items:center}
nav.main a[aria-current="page"]{color:var(--night-ink); border-color:var(--glow)}