/* Seitenwunsch – Verkaufsseite. Farben aus dem Logo. */
:root{
  --blau:#1F3A5F;--blau-tief:#16304F;--blau-hell:#E7EDF5;
  --orange:#F08A24;--orange-dunkel:#D9761A;--orange-hell:#FDEBD8;
  --creme:#FAF7F2;--papier:#FFFFFF;--tinte:#1B2431;--grau:#5F6B7A;--linie:#E4E0D9;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breit:1120px;--r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--creme);color:var(--tinte);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;line-height:1.12;margin:0 0 .5em;color:var(--blau)}
h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0 0 1.1em;max-width:62ch}
a{color:var(--blau);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%;height:auto}
.huelle{width:100%;max-width:var(--breit);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.schmal{max-width:660px}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
section.hell{background:var(--papier)}
section.dunkel{background:var(--blau);color:#DCE4EE}
section.dunkel h2,section.dunkel h3{color:#fff}
section.dunkel p{color:#DCE4EE}
.kicker{font-weight:600;color:var(--orange-dunkel);margin:0 0 .8rem;font-size:.95rem}
section.dunkel .kicker{color:var(--orange)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.5rem;background:var(--orange);color:#fff;border:2px solid var(--orange);padding:.8rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:650;font-size:1rem;transition:background .15s,border-color .15s,transform .15s}
.knopf:hover{background:var(--orange-dunkel);border-color:var(--orange-dunkel);color:#fff;transform:translateY(-1px)}
.knopf.leise{background:transparent;color:var(--blau);border-color:var(--blau)}
.knopf.leise:hover{background:var(--blau);color:#fff}
.knopf.klein{padding:.5rem 1.1rem;font-size:.95rem}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:1.5rem;height:70px}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--blau);font-family:var(--serif);font-weight:700;font-size:1.4rem;letter-spacing:-.02em}
.marke img{height:40px;width:auto;display:block}
.fuss .marke img{height:34px}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.kopf nav a:not(.knopf){color:var(--tinte);text-decoration:none;font-weight:500}
.kopf nav a:not(.knopf):hover{color:var(--blau)}

/* Hero */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
.hero-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero .vorspann{font-size:1.2rem;color:var(--grau);max-width:46ch}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-fuss{margin-top:1.2rem;font-size:.92rem;color:var(--grau)}

/* Editor-Mockup */
.mock{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);box-shadow:0 30px 60px -30px rgba(31,58,95,.35),0 2px 6px rgba(0,0,0,.06);overflow:hidden;font-size:.72rem}
.mock-leiste{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:#F2EFEA;border-bottom:1px solid var(--linie)}
.mock-leiste span{width:9px;height:9px;border-radius:50%;background:#D8D2CA}
.mock-leiste .url{margin-left:.6rem;background:#fff;border-radius:999px;padding:.15rem .7rem;color:var(--grau);flex:1;font-size:.7rem}
.mock-werk{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-bottom:1px solid var(--linie);color:var(--grau)}
.mock-werk b{color:var(--tinte);font-weight:600}
.mock-werk .knoepfchen{margin-left:auto;display:flex;gap:.3rem}
.mock-werk .knoepfchen i{display:block;width:34px;height:14px;border-radius:999px;background:var(--linie)}
.mock-werk .knoepfchen i.o{background:var(--orange);width:60px}
.mock-body{display:grid;grid-template-columns:1fr 130px}
.mock-seite{padding:1rem 1.1rem;background:#fff}
.mock-hero{background:#B3261E;color:#fff;border-radius:8px;padding:2.3rem 1rem 1.1rem;position:relative}
.mock-hero .t1{font-size:.62rem;opacity:.85;margin:0 0 .25rem}
.mock-hero .t2{font-family:var(--serif);font-size:1.4rem;line-height:1.1;margin:0 0 .4rem;min-height:1.5rem}
.mock-hero .t2::after{content:"";display:inline-block;width:2px;height:1.1em;background:#fff;margin-left:2px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.mock-hero .t3{font-size:.68rem;opacity:.9;margin:0 0 .6rem;max-width:26ch}
.mock-hero .bt{display:inline-block;background:#fff;color:#B3261E;border-radius:999px;padding:.2rem .6rem;font-weight:700;font-size:.62rem}
.mock-tools{position:absolute;top:8px;right:8px;background:#1B2431;color:#fff;border-radius:6px;padding:3px 6px;display:flex;gap:4px;align-items:center;font-size:.58rem}
.mock-tools i{width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.35);display:block}
.mock-zeilen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-top:.9rem}
.mock-zeilen div{border-top:2px solid #B3261E;padding-top:.4rem}
.mock-zeilen b{display:block;font-size:.66rem;margin-bottom:.2rem}
.mock-zeilen span{display:block;height:5px;background:var(--linie);border-radius:3px;margin-top:4px}
.mock-zeilen span:last-child{width:70%}
.mock-rechts{border-left:1px solid var(--linie);padding:.7rem .7rem;background:#FAF8F5}
.mock-rechts b{display:block;font-size:.66rem;margin-bottom:.5rem;color:var(--blau)}
.mock-rechts label{display:block;font-size:.58rem;color:var(--grau);margin:.45rem 0 .15rem}
.mock-rechts i{display:block;height:16px;border:1px solid var(--linie);border-radius:4px;background:#fff}
.mock-rechts i.o{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-hell)}
@keyframes blink{50%{opacity:0}}

/* Vorteile */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.5rem;margin-top:2.5rem}
.drei h3{margin-bottom:.3em}
.drei p{color:var(--grau);margin:0}
.drei .ico{width:44px;height:44px;border-radius:12px;background:var(--orange-hell);color:var(--orange-dunkel);display:grid;place-items:center;margin-bottom:1rem}
.drei .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Schritte */
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.schritt{counter-increment:s;background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:1.6rem}
.schritt::before{content:counter(s);display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--blau);color:#fff;font-family:var(--serif);font-weight:700;margin-bottom:1rem}
.schritt h3{margin-bottom:.3em}
.schritt p{color:var(--grau);margin:0}
.schritte-fuss{margin-top:1.8rem;font-size:1.05rem;padding:1rem 1.2rem;background:var(--orange-hell);border-radius:var(--r);max-width:none}

/* Bausteine */
.bausteine{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-top:2.2rem}
.baustein{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:.7rem .8rem;font-size:.95rem;color:#fff}
.baustein svg{width:20px;height:20px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bausteine-fuss{margin-top:1.6rem}

/* Vergleich */
.vergleich{width:100%;border-collapse:collapse;margin-top:2rem;background:var(--papier);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.vergleich th,.vergleich td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--linie);font-size:1rem}
.vergleich th{font-weight:600;color:var(--grau);font-size:.95rem}
.vergleich thead th:last-child{color:var(--blau);background:var(--blau-hell)}
.vergleich tbody td:last-child{background:var(--blau-hell);font-weight:600}
.vergleich tr:last-child td{border-bottom:0}
.ja{color:#1F6B3F}.nein{color:#B04141}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem;align-items:start}
.paket{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:1.8rem}
.paket.betont{border:2px solid var(--orange);position:relative}
.paket.betont::before{content:"Beliebt";position:absolute;top:-.8rem;left:1.5rem;background:var(--orange);color:#fff;font-size:.78rem;font-weight:700;padding:.15rem .7rem;border-radius:999px}
.paket h3{font-family:var(--sans);font-size:1.05rem;font-weight:650;color:var(--tinte)}
.zahl{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:.5rem 0 .1rem;color:var(--blau)}
.zahl small{font-family:var(--sans);font-size:.95rem;color:var(--grau);font-weight:400}
.paket p.fuer{color:var(--grau);font-size:.95rem;margin:.3rem 0 1rem}
.paket ul{list-style:none;margin:0 0 1.4rem;padding:0}
.paket li{padding:.35rem 0 .35rem 1.5rem;position:relative;font-size:.98rem}
.paket li::before{content:"";position:absolute;left:0;top:.95em;width:.7rem;height:.35rem;border-left:2px solid var(--orange-dunkel);border-bottom:2px solid var(--orange-dunkel);transform:rotate(-45deg)}
.preis-fuss{margin-top:1.6rem;color:var(--grau);font-size:.95rem;max-width:none}

/* Person */
.person{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}
.initialen{width:96px;height:96px;border-radius:50%;background:var(--blau);color:#fff;font-family:var(--serif);font-size:2.2rem;font-weight:700;display:grid;place-items:center}

/* FAQ */
.faq{margin-top:2rem;max-width:760px}
.faq details{border-bottom:1px solid var(--linie);padding:.5rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.6rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange-dunkel);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--grau);padding-bottom:.6rem}

/* Kontakt */
.kontakt-box{background:var(--papier);border:1px solid var(--linie);border-radius:var(--r);padding:2rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.kontakt-box p{margin:0}

/* Fuß */
.fuss{background:var(--blau-tief);color:#AEBBCC;padding:3rem 0 2.5rem;font-size:.95rem}
.fuss-innen{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{color:var(--orange);text-decoration:underline}
.fuss .marke{color:#fff}
.fuss nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-left:auto}

/* Rechtstexte */
.rechtstext{padding:clamp(2.5rem,6vw,4.5rem) 0}
.rechtstext h1{font-size:clamp(2rem,4.5vw,2.8rem);margin-bottom:.6em}
.rechtstext h2{font-size:1.35rem;margin-top:2.2rem}
.rechtstext p,.rechtstext li{max-width:70ch;font-size:1rem}
.rechtstext ul{padding-left:1.2rem}
.zurueck{display:inline-block;margin-bottom:2rem;font-size:.98rem}

/* Einblenden beim Scrollen (sanft, einmalig) */
.rein{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rein.da{opacity:1;transform:none}

@media(max-width:900px){
  .hero-raster{grid-template-columns:1fr}
  .drei,.schritte,.preise{grid-template-columns:1fr}
  .kopf nav a:not(.knopf){display:none}
  .mock-body{grid-template-columns:1fr}
  .mock-rechts{display:none}
  .vergleich th,.vergleich td{padding:.7rem .6rem;font-size:.9rem}
}
@media(max-width:520px){.person{grid-template-columns:1fr}.fuss nav{margin-left:0}}

/* Kontaktformular */
.formular{margin-top:1.6rem;max-width:40rem}
.formular .zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.feld{margin-bottom:1rem}
.feld label{display:block;font-size:.92rem;color:var(--grau);margin-bottom:.3rem}
.feld input,.feld textarea{width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;background:var(--papier);color:var(--tinte);border:1.5px solid var(--linie);border-radius:10px}
.feld input:focus,.feld textarea:focus{border-color:var(--blau);outline:none;box-shadow:0 0 0 3px rgba(31,58,95,.12)}
.feld textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{font-size:.9rem;color:var(--grau);margin:.6rem 0 0}
.hinweis.ok{color:#1F6B3F}.hinweis.fehler{color:#A32828}
@media(max-width:600px){.formular .zwei{grid-template-columns:1fr}}