/* Schriften lokal eingebunden: keine Verbindung zu Google-Servern */
@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2")}

:root{
  --papier:#F5F7FA;
  --blatt:#FFFFFF;
  --tinte:#1C2A3D;
  --deckel:#3E5C83;
  --deckel-dunkel:#324B6C;
  --linie:#D5DCE6;
  --stempel:#A8322D;
  --leise:#5B6B80;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--deckel)}
:focus-visible{outline:3px solid var(--deckel);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.schmal{max-width:760px}

header.top{padding:1.5rem 0}
.marke{font-weight:800;font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;color:var(--tinte)}
.marke span{color:var(--deckel)}

/* Startbereich */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;padding:3rem 0 5rem}
h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:0 0 1.25rem;max-width:17ch}
.lead{font-size:1.2rem;color:var(--leise);max-width:48ch;margin:0 0 2rem}
.knopf{display:inline-block;background:var(--deckel);color:#fff;text-decoration:none;
  padding:.95rem 1.5rem;border-radius:var(--r);border:0;font:inherit;font-weight:700;cursor:pointer}
.knopf:hover{background:var(--deckel-dunkel)}
.klein{font-size:.9rem;color:var(--leise);margin-top:.9rem}

/* Der Beleg */
.beleg{position:relative;background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);
  padding:1.75rem 1.75rem 1.5rem;box-shadow:0 18px 40px -24px rgba(28,42,61,.45);transform:rotate(-1.2deg);margin:0}
.beleg h2{font-size:1rem;margin:0;font-weight:700;padding-right:6.5rem}
.beleg .meta{font-size:.85rem;color:var(--leise);margin:.2rem 0 1.2rem;padding-right:6.5rem}
.beleg table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.95rem}
.beleg td{padding:.55rem 0;border-top:1px solid var(--linie);vertical-align:top}
.beleg td.b{text-align:right;white-space:nowrap;padding-left:1rem}
.beleg .quelle{display:block;font-size:.78rem;color:var(--leise)}
.beleg tr.summe td{border-top:2px solid var(--tinte);font-weight:800;padding-top:.8rem}
.stempel{position:absolute;right:1.4rem;top:1.4rem;border:3px solid var(--stempel);color:var(--stempel);
  font-weight:800;font-size:1.05rem;letter-spacing:.08em;padding:.2rem .65rem;border-radius:4px;
  transform:rotate(-9deg);opacity:.88}
.beleg .hinweis{font-size:.78rem;color:var(--leise);margin:.9rem 0 0}

section{padding:4.5rem 0;border-top:1px solid var(--linie)}
h2.t{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 1rem;max-width:24ch}
.intro{color:var(--leise);max-width:62ch;margin:0 0 2.5rem}

/* Ablauf */
ol.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;counter-reset:s}
ol.ablauf li{counter-increment:s;position:relative;padding-top:3.2rem}
ol.ablauf li::before{content:counter(s);position:absolute;top:0;left:0;width:2.2rem;height:2.2rem;border-radius:50%;
  border:2px solid var(--deckel);color:var(--deckel);font-weight:800;display:grid;place-items:center}
ol.ablauf h3{margin:0 0 .5rem;font-size:1.15rem}
ol.ablauf p{margin:0;color:var(--leise)}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.zwei h3{margin:0 0 .4rem;font-size:1.15rem}
.zwei p{margin:0 0 1.5rem;color:var(--leise)}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}
.stufe{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);padding:1.5rem}
.stufe h3{margin:0;font-size:1rem;font-weight:700}
.stufe .betrag{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:.6rem 0 .2rem;font-variant-numeric:tabular-nums}
.stufe .betrag small{font-size:1rem;font-weight:500;color:var(--leise);letter-spacing:0}
.stufe p{margin:0;color:var(--leise);font-size:.95rem}
.zusatz{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;color:var(--leise);font-size:.95rem}
.zusatz strong{color:var(--tinte);display:block}

/* Angebot und Formular */
.angebot{background:var(--tinte);color:#fff;border-radius:var(--r);padding:2.5rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem}
.angebot h2.t{color:#fff}
.angebot p{color:#DCE3EC}
.angebot ul{padding-left:1.1rem;color:#DCE3EC;margin:1.25rem 0 0}
.angebot li{margin:.35rem 0}
form{display:grid;gap:1rem}
label{font-weight:500;font-size:.95rem;display:grid;gap:.35rem}
input,select,textarea{font:inherit;font-size:1rem;padding:.75rem .85rem;border-radius:var(--r);border:1px solid #6F83A0;background:#fff;color:var(--tinte);width:100%}
textarea{min-height:5rem;resize:vertical}
fieldset{border:0;padding:0;margin:0;display:grid;gap:.5rem}
legend{font-weight:500;font-size:.95rem;margin-bottom:.35rem;padding:0}
.wahl{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.wahl input{width:auto;margin-top:.3rem}
.angebot .knopf{background:#fff;color:var(--tinte)}
.angebot .knopf:hover{background:#E6ECF4}
.angebot .klein{color:#C9D3E0}
.angebot a{color:#fff}
.versteckt{position:absolute;left:-9999px}

details{border-top:1px solid var(--linie);padding:1.1rem 0}
details:last-of-type{border-bottom:1px solid var(--linie)}
summary{cursor:pointer;font-weight:700;font-size:1.05rem}
details p{color:var(--leise);max-width:68ch;margin:.7rem 0 0}

/* Rechtstexte */
.recht{padding:2rem 0 4rem}
.recht h1{font-size:2.2rem;max-width:none}
.recht h2{font-size:1.25rem;margin:2.2rem 0 .5rem}
.recht p,.recht li{color:var(--tinte)}
.platzhalter{background:#FFF3C4;padding:0 .2rem;border-radius:2px}

footer{padding:2.5rem 0 3rem;color:var(--leise);font-size:.9rem;border-top:1px solid var(--linie)}
footer a{margin-right:1.2rem}

@media (max-width:860px){
  .hero,.zwei,.angebot{grid-template-columns:1fr}
  .hero{gap:2.5rem;padding-top:1.5rem}
  ol.ablauf,.preise,.zusatz{grid-template-columns:1fr;gap:1.25rem}
  ol.ablauf{gap:2rem}
  .beleg{transform:none}
  .angebot{padding:1.75rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Kontaktformular im Impressum */
.kontaktformular{max-width:520px;margin-top:1rem}
.kontaktformular input,.kontaktformular textarea{border-color:var(--linie)}