/* Gemeinsames Design für Unterseiten: gleiche Farbwelt wie die Startseite (Nachtblau, Honiggold, Sand). */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dm-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{color-scheme:light;--bg:#f4ecdd;--fg:#162036;--muted:#4f586b;--line:#ddd2bd;--card:#fffaf1;--row:#f4ecdd;--brand:#162036;--signal:#e9b44c;--signal-fg:#1b1405;--signal-text:#8a5a00;--band:#101a2e;--band-fg:#f1f2f6;--band-muted:#b3bccd;--f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--f-body:"DM Sans",system-ui,-apple-system,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f141c;--fg:#eef1f6;--muted:#9aa5b8;--line:#2a3445;--card:#171e2a;--row:#1d2634;--signal-text:#e9b44c;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,p,ul{margin:0}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.02em;text-wrap:balance;line-height:1.1}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-text)}
.top{background:var(--band);color:#fff}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:60px}
.logo{font-family:var(--f-display);font-weight:800;font-size:18px;text-decoration:none}
.logo span{color:var(--signal)}
.btn{display:inline-block;padding:14px 24px;background:var(--signal);color:var(--signal-fg);font-family:var(--f-display);font-weight:700;font-size:17px;border:0;border-radius:4px;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--signal-fg)}
.btn.small-btn{padding:8px 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--fg);border:2px solid var(--fg)}
.btn.ghost:hover{box-shadow:4px 4px 0 var(--fg)}
.site-foot{background:var(--band);color:var(--band-muted);padding-block:28px;font-size:15px}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.site-foot a{color:var(--band-fg)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
/* Rechtsseiten */
.legal{padding-block:clamp(40px,7vw,80px)}
.legal h1{font-size:clamp(36px,6vw,60px);margin-top:12px}
.legal .sub{color:var(--muted);margin-top:12px}
.legal-list{display:grid;gap:16px;margin-top:40px;max-width:820px}
.legal-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--signal);border-radius:4px;padding:24px 26px}
.legal-card h2{font-size:22px;margin:6px 0 12px}
.legal-card p,.legal-card li{overflow-wrap:anywhere}
.legal-card p+p{margin-top:10px}
.legal-card p,.legal-card li{color:var(--muted)}
.legal-card a{color:var(--fg);overflow-wrap:anywhere}
/* Übersicht */
.hero{background:var(--band);color:var(--band-fg);padding-block:clamp(56px,10vw,120px)}
.hero .label{color:var(--signal)}
.hero h1{font-size:clamp(38px,7vw,78px);margin-top:16px;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero .lead{margin-top:24px;max-width:56ch;font-size:19px;color:var(--band-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero .btn.ghost{color:var(--band-fg);border-color:rgba(255,255,255,.4)}
.hero .btn.ghost:hover{box-shadow:4px 4px 0 var(--signal)}
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.areas span{padding:6px 14px;border:1px solid rgba(255,255,255,.25);border-radius:99px;font-size:14px;color:var(--band-muted)}
.section{padding-block:clamp(48px,8vw,96px)}
.section h2{font-size:clamp(30px,4.6vw,48px)}
.intro p{margin-top:12px;color:var(--muted);max-width:56ch}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare>div{padding:28px;border:1px solid var(--line);border-radius:4px;background:var(--card)}
.compare>div:last-child{background:var(--brand);color:#fff;border-color:var(--brand)}
.compare>div:last-child p{color:var(--band-muted)}
.compare h3{font-size:24px;margin-bottom:10px}
.compare p{color:var(--muted)}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.offer{display:flex;flex-direction:column;gap:12px;padding:30px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--signal);border-radius:4px}
.offer h3{font-size:28px}
.offer p{color:var(--muted)}
.price{font-family:var(--f-display);font-size:34px;letter-spacing:-.02em;margin-top:6px}
.offer small{color:var(--muted)}
.offer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:auto;padding-top:12px}
.examples{background:var(--band);color:var(--band-fg);padding-block:clamp(48px,8vw,96px)}
.examples .intro p{color:var(--band-muted)}
.examples .label{color:var(--signal)}
.cards{display:grid;gap:14px;margin-top:36px}
.case{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:4px}
.case summary{list-style:none;cursor:pointer;display:grid;gap:6px;padding:22px 26px;position:relative}
.case summary::-webkit-details-marker{display:none}
.case summary h3{font-size:24px}
.case summary p{color:var(--band-muted)}
.toggle{font-family:var(--f-mono);font-size:13px;color:var(--signal)}
.case[open] .toggle{display:none}
.case-body{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;padding:0 26px 26px}
.original-preview iframe{width:100%;height:440px;border:0;border-radius:4px;background:#fff}
.preview-full{display:inline-block;margin-top:10px;font-size:15px;color:var(--signal)}
.case-copy ul{padding-left:20px;margin:14px 0 20px;color:var(--band-muted)}
.case-copy p{color:var(--band-fg)}
.case-copy .small{color:var(--band-muted);font-size:14px;margin-top:14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.step{padding:26px;background:var(--card);border:1px solid var(--line);border-radius:4px}
.step b{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--signal-text)}
.step h3{font-size:22px;margin:10px 0}
.step p{color:var(--muted)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 0;font-family:var(--f-display);font-weight:700;font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--signal-text);font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:20px;color:var(--muted);max-width:64ch}
.faq .list{margin-top:28px;max-width:820px}
.contact{background:var(--brand);color:#fff;padding-block:clamp(48px,8vw,96px)}
.contact h2{font-size:clamp(30px,4.6vw,48px)}
.contact-head p{margin-top:14px;color:var(--band-muted);max-width:56ch}
.request-toggle{margin-top:32px;max-width:640px}
.request-toggle>summary{display:inline-block;cursor:pointer;list-style:none;padding:14px 24px;background:var(--signal);color:var(--signal-fg);font-family:var(--f-display);font-weight:700;border-radius:4px}
.request-toggle>summary::-webkit-details-marker{display:none}
.form{display:grid;gap:16px;margin-top:24px}
.field{display:grid;gap:6px;font-size:15px}
.field input,.field textarea{font:inherit;padding:12px 14px;border-radius:4px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff}
.field textarea{min-height:140px}
.form .btn{justify-self:start}
.contact .small{font-size:14px;color:var(--band-muted)}
.contact .small a{color:var(--signal)}
@media(max-width:820px){.compare,.offers,.steps,.case-body{grid-template-columns:1fr}.original-preview iframe{height:380px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}