/* PlainGood
   Konzept: kühles Papier, tiefes Tintenblau, frischer Verlauf aus Minze, Himmel und Sonne.
   Bricolage Grotesque für Überschriften, Figtree für Text. Die Wortmarke spielt mit dem Namen:
   „Plain“ leicht, „Good“ kräftig. */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-italic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

:root{
  --papier:#F4F6F5;
  --weiss:#FFFFFF;
  --tinte:#13243B;
  --tinte-2:#22395A;
  --minze:#A6E3D0;
  --himmel:#C6DBFF;
  --sonne:#FFD45E;
  --sonne-2:#F5B921;
  --text:#1A2433;
  --grau:#5A6575;
  --linie:#DCE2E4;
  --verlauf:linear-gradient(115deg,var(--minze) 0%,var(--himmel) 48%,var(--sonne) 100%);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --r-s:8px;--r-m:14px;--r-l:22px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--body);font-size:1.0625rem;line-height:1.62}
img{max-width:100%;height:auto;display:block}
a{color:var(--tinte-2);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--sonne-2);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);margin:0;color:var(--tinte);text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1.04;font-weight:740;letter-spacing:-0.025em}
h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;font-weight:700;letter-spacing:-0.018em}
h3{font-size:1.25rem;line-height:1.2;font-weight:680;letter-spacing:-0.01em}
p{margin:0}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:10px 14px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
.platzhalter{background:#FFF1BF;color:#6B4E00!important;border-radius:4px;padding:0 4px;font-weight:600;font-size:.92em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:.75em 1.35em;border-radius:40px;font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--tinte);color:#fff}
.btn-primary:hover{background:var(--tinte-2)}
.btn-ghost{background:rgba(255,255,255,.7);border-color:var(--tinte);color:var(--tinte)}
.btn-ghost:hover{background:var(--weiss)}
.btn-sonne{background:var(--sonne);color:var(--tinte)}
.btn-sonne:hover{background:var(--sonne-2)}

/* Wortmarke */
.marke{font-family:var(--display);font-size:1.55rem;line-height:1;letter-spacing:-0.03em;color:var(--tinte);text-decoration:none;display:inline-flex;align-items:baseline;gap:0}
.marke .plain{font-weight:300;transition:font-weight .35s ease}
.marke .good{font-weight:800}
.marke .punkt{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--sonne-2);margin-left:.08em;transform:translateY(-.02em)}
.marke:hover .plain{font-weight:800}

/* Kopf */
.kopf{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(244,246,245,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.98rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--sonne-2);text-decoration-thickness:3px;text-underline-offset:7px}
.kopf .btn{min-height:44px;padding:.55em 1.1em;font-size:.95rem}
.menue-knopf{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--tinte)}
.menue-knopf svg{width:28px;height:28px}
@media (max-width:960px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--weiss);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;border-bottom:1px solid var(--linie);box-shadow:0 20px 30px -24px rgba(19,36,59,.4)}
  .nav.offen{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--linie);font-size:1.05rem}
  .nav .btn{margin-top:14px}
  .menue-knopf{display:block}
  .kopf-cta{display:none}
}
@media (min-width:961px){.nav .nur-mobil{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:64px 80px;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.75}
.hero::before{width:620px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle at 40% 40%,var(--minze),transparent 68%);animation:drift 22s ease-in-out infinite alternate}
.hero::after{width:680px;height:560px;right:-200px;top:40px;background:radial-gradient(circle at 50% 50%,var(--sonne),transparent 62%),radial-gradient(circle at 20% 80%,var(--himmel),transparent 60%);animation:drift 26s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.08)}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.hero-text{min-width:0}
.hero-sub{font-size:1.2rem;color:#2F3A4A;margin-top:24px;max-width:33em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.preis-zeile{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.preis-zeile li{background:rgba(255,255,255,.75);border:1px solid rgba(19,36,59,.1);border-radius:40px;padding:8px 14px;font-size:.95rem;color:var(--grau)}
.preis-zeile b{color:var(--tinte);font-weight:800}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:44px}.hero{padding-block:40px 60px}}
@media (max-width:560px){.hero-sub{font-size:1.08rem}}

/* Vorher / Nachher */
.ba-rahmen{background:var(--weiss);border-radius:var(--r-m);box-shadow:0 2px 0 rgba(19,36,59,.04),0 30px 60px -30px rgba(19,36,59,.45);overflow:hidden;border:1px solid rgba(19,36,59,.08)}
.ba-leiste{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#EEF1F2;border-bottom:1px solid var(--linie)}
.ba-leiste i{width:10px;height:10px;border-radius:50%;background:#D3D9DC}
.ba-url{margin-left:10px;flex:1;max-width:280px;background:var(--weiss);border-radius:20px;font-size:.75rem;color:var(--grau);padding:3px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba{--pos:62%;position:relative;aspect-ratio:16/10;container-type:inline-size;overflow:hidden;user-select:none;touch-action:pan-y;max-width:100%}
.ba-seite{position:absolute;inset:0}
.ba-neu{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--tinte);pointer-events:none;z-index:3}
.ba-griff::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--sonne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313243B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(19,36,59,.35);border:3px solid var(--tinte)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba input:focus-visible ~ .ba-griff::after{outline:3px solid var(--sonne-2);outline-offset:3px}
.ba-label{position:absolute;bottom:12px;z-index:2;font-size:.78rem;font-weight:800;padding:5px 10px;border-radius:20px;pointer-events:none;font-family:var(--body)}
.ba-label.alt{right:12px;background:rgba(0,0,0,.65);color:#fff}
.ba-label.neu{left:12px;background:var(--sonne);color:var(--tinte)}
.ba-unter{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;font-size:.88rem;color:var(--grau);background:var(--weiss);border-top:1px solid var(--linie)}
.ba-unter a{font-weight:700}

/* Alte Seite (bewusst veraltet) */
.alt-seite{font-family:"Times New Roman",Times,serif;font-size:1.7cqw;background:#D9D9D9 repeating-linear-gradient(45deg,#D2D2D2 0 6px,#DDDDDD 6px 12px);color:#000;padding:2.4cqw 3cqw;text-align:center;overflow:hidden}
.alt-kasten{background:#FFFFF0;border:3px ridge #9A9A9A;padding:1.8cqw 2.4cqw;height:100%;overflow:hidden}
.alt-titel{font-size:3.6cqw;color:#B00000;font-weight:bold;font-style:italic;text-shadow:2px 2px 0 #FFD700;line-height:1.1}
.alt-lauf{margin:1.4cqw 0;background:#000080;color:#FFFF00;font-family:"Courier New",monospace;font-size:1.6cqw;padding:.5cqw;white-space:nowrap;overflow:hidden}
.alt-lauf span{display:inline-block;padding-left:100%;animation:lauf 14s linear infinite}
@keyframes lauf{to{transform:translateX(-100%)}}
.alt-nav{display:flex;justify-content:center;gap:1.4cqw;flex-wrap:wrap;margin-bottom:1.4cqw}
.alt-nav span{color:#0000EE;text-decoration:underline;font-size:1.5cqw}
.alt-tabelle{display:grid;grid-template-columns:1fr 1.6fr;gap:1.4cqw;text-align:left;font-size:1.45cqw;line-height:1.35}
.alt-bild{background:linear-gradient(135deg,#7FA7C8,#C9D9E6);border:2px outset #ccc;aspect-ratio:4/3;display:grid;place-items:center;color:#fff;font-size:1.3cqw;font-family:Arial,sans-serif}
.alt-unten{margin-top:1.4cqw;font-size:1.15cqw;color:#555}
.alt-zaehler{display:inline-block;background:#000;color:#0F0;font-family:"Courier New",monospace;padding:.1cqw .6cqw;letter-spacing:.2cqw}

/* Neue Seite (Ausschnitt der Maler-Demo) */
.neu-seite{background:#F6F6F3;font-family:var(--body);color:#1D2427;font-size:1.6cqw;display:flex;flex-direction:column}
.neu-kopf{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 3.2cqw;background:#fff;border-bottom:1px solid #E3E3DE}
.neu-logo{display:flex;align-items:center;gap:1cqw;font-weight:800;color:#163C45;font-size:1.7cqw;letter-spacing:.02em}
.neu-logo i{width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:#163C45;position:relative}
.neu-logo i::after{content:"";position:absolute;left:22%;right:22%;top:24%;height:30%;border-radius:.3cqw;background:#C98A1E}
.neu-tel{font-weight:800;color:#163C45;font-size:1.6cqw}
.neu-hero{flex:1;display:grid;grid-template-columns:1.25fr .75fr;gap:2.5cqw;align-items:center;padding:3.6cqw 3.2cqw}
.neu-ort{font-size:1.25cqw;color:#5B6468;font-weight:600;display:flex;align-items:center;gap:.7cqw}
.neu-ort::before{content:"";width:.9cqw;height:.9cqw;border-radius:50%;background:#C98A1E}
.neu-h{font-family:var(--display);font-weight:800;font-size:4.6cqw;line-height:1.02;color:#163C45;letter-spacing:-.03em;margin:1.2cqw 0}
.neu-p{font-size:1.5cqw;color:#3A4447;line-height:1.5;max-width:34em}
.neu-knoepfe{display:flex;gap:1cqw;margin-top:2cqw}
.neu-knoepfe span{background:#163C45;color:#fff;border-radius:.6cqw;padding:1.1cqw 1.8cqw;font-weight:700;font-size:1.35cqw}
.neu-knoepfe span+span{background:transparent;color:#163C45;box-shadow:inset 0 0 0 .2cqw #163C45}
.neu-faecher{position:relative;height:100%;min-height:18cqw}
.neu-faecher b{position:absolute;left:50%;bottom:0;width:7cqw;height:20cqw;margin-left:-3.5cqw;border-radius:.8cqw;transform-origin:50% 92%;box-shadow:0 1cqw 2cqw -1cqw rgba(22,60,69,.5);border-bottom:2.6cqw solid #fff}
.neu-faecher b:nth-child(1){background:#F1EEE6;transform:rotate(-26deg)}
.neu-faecher b:nth-child(2){background:#C9C3B4;transform:rotate(-13deg)}
.neu-faecher b:nth-child(3){background:#7F9C93}
.neu-faecher b:nth-child(4){background:#2F5866;transform:rotate(13deg)}
.neu-faecher b:nth-child(5){background:#D19B3E;transform:rotate(26deg)}
.neu-band{display:flex;justify-content:space-around;gap:1cqw;background:#163C45;color:#E3ECEE;padding:1.5cqw 3cqw;font-size:1.25cqw;font-weight:600}
.neu-band span::before{content:"✓ ";color:#C98A1E}

@container (max-width:520px){
  .alt-seite{font-size:2.6cqw}.alt-titel{font-size:5.2cqw}.alt-lauf{font-size:2.6cqw}.alt-nav span{font-size:2.4cqw}.alt-tabelle{grid-template-columns:1fr;font-size:2.4cqw}.alt-bild{display:none}.alt-unten{font-size:2cqw}
  .neu-seite{font-size:2.6cqw}.neu-hero{grid-template-columns:1fr;padding:4cqw}.neu-faecher{display:none}.neu-h{font-size:7.4cqw}.neu-p{font-size:2.6cqw}.neu-ort{font-size:2.2cqw}.neu-knoepfe span{font-size:2.4cqw;padding:1.8cqw 2.6cqw}.neu-tel,.neu-logo{font-size:2.8cqw}.neu-logo i{width:4cqw;height:4cqw}.neu-band{font-size:2.1cqw;flex-wrap:wrap}.neu-band span:nth-child(3){display:none}
}
@media (max-width:520px){.ba{aspect-ratio:4/5}}

/* Abschnitte */
.sec{padding-block:96px}
.sec-weiss{background:var(--weiss)}
.sec-tinte{background:var(--tinte);color:#D7E0EC}
.sec-tinte h2,.sec-tinte h3{color:#fff}
.kopfzeile{max-width:760px;margin-bottom:48px}
.kopfzeile p{margin-top:16px;font-size:1.15rem;color:var(--grau)}
.sec-tinte .kopfzeile p{color:#B8C6D9}
@media (max-width:640px){.sec{padding-block:64px}.kopfzeile{margin-bottom:32px}}

/* Kundenfragen */
.fragen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:2px solid var(--tinte)}
.frage{padding:26px 26px 6px 0}
.frage + .frage{padding-left:26px;border-left:1px solid var(--linie)}
.frage q{display:block;font-family:var(--display);font-size:1.45rem;line-height:1.15;font-weight:650;color:var(--tinte);letter-spacing:-0.015em;quotes:"„" "“"}
.frage p{margin-top:14px;color:#3E4858;font-size:.98rem}
@media (max-width:980px){.fragen{grid-template-columns:1fr 1fr}.frage:nth-child(3){padding-left:0;border-left:0}.frage{padding-bottom:28px}.frage:nth-child(n+3){border-top:1px solid var(--linie)}}
@media (max-width:600px){.fragen{grid-template-columns:1fr}.frage + .frage{padding-left:0;border-left:0;border-top:1px solid var(--linie)}}

/* Beispiele */
.beispiele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.beispiel{display:flex;flex-direction:column;background:var(--weiss);border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:inherit;border:1px solid var(--linie);transition:transform .2s ease,box-shadow .2s ease}
.beispiel:hover{transform:translateY(-4px);box-shadow:0 26px 40px -28px rgba(19,36,59,.5)}
.beispiel-bild{position:relative;background:#E9EDEE;aspect-ratio:760/475;overflow:hidden;max-width:100%}
.beispiel-bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.beispiel-bild .mobil{position:absolute;right:14px;bottom:-30px;width:27%;border-radius:12px;border:4px solid var(--tinte);box-shadow:0 14px 26px -10px rgba(19,36,59,.5);height:auto;aspect-ratio:390/780;object-fit:cover;background:#fff}
.beispiel-text{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.beispiel-text .branche{font-size:.86rem;font-weight:700;color:var(--grau)}
.beispiel-text p{color:#3E4858;font-size:.98rem}
.beispiel-text .extra{margin-top:auto;padding-top:12px;font-size:.9rem;font-weight:700;color:var(--tinte);display:flex;align-items:center;gap:8px}
.beispiel-text .extra::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sonne-2)}
.beispiel-link{font-weight:700;color:var(--tinte);text-decoration:underline;text-decoration-color:var(--sonne-2);text-decoration-thickness:2px}
@media (max-width:980px){.beispiele{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.beispiele{grid-template-columns:1fr}}

/* Leistungsumfang als Beleg */
.belege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.beleg{background:var(--weiss);color:var(--text);border-radius:var(--r-m) var(--r-m) 0 0;padding:34px 34px 44px;position:relative;filter:drop-shadow(0 26px 30px rgba(0,0,0,.25))}
.beleg::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(-45deg,transparent 10px,var(--weiss) 0) 0 0/20px 14px repeat-x,linear-gradient(45deg,transparent 10px,var(--weiss) 0) 0 0/20px 14px repeat-x}
.beleg-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:18px;border-bottom:2px dashed var(--linie)}
.beleg-kopf h3{color:var(--tinte);font-size:1.4rem}
.beleg-kopf span{color:var(--grau);font-size:.92rem}
.beleg ul{list-style:none;margin:0;padding:12px 0 0}
.beleg li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dotted #E1E6E8}
.beleg li span:last-child{color:#1F8A62;font-weight:700;white-space:nowrap;font-size:.92rem}
.beleg-summe{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:20px;padding-top:16px;border-top:2px solid var(--tinte)}
.beleg-summe b{font-family:var(--display);font-size:2.3rem;font-weight:780;color:var(--tinte);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.beleg-summe span{color:var(--grau);font-size:.92rem}
.beleg-note{margin-top:14px;font-size:.88rem;color:var(--grau)}
.preis-fuss{margin-top:56px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.preis-fuss p{max-width:52em;color:#B8C6D9}
@media (max-width:860px){.belege{grid-template-columns:1fr;gap:48px}.beleg{padding:26px 22px 38px}}

/* Ablauf */
.ablauf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:s}
.ablauf li{counter-increment:s;background:var(--weiss);border-radius:var(--r-m);padding:24px 22px;border:1px solid var(--linie);position:relative}
.ablauf li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--verlauf);font-family:var(--display);font-weight:800;color:var(--tinte);margin-bottom:16px}
.ablauf h3{font-size:1.1rem;margin-bottom:6px}
.ablauf p{font-size:.95rem;color:#3E4858}
.ablauf .dauer{display:block;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--tinte-2)}
.ablauf .sie{display:block;margin-top:4px;font-size:.85rem;color:var(--grau)}
@media (max-width:1020px){.ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}.ablauf li:last-child{grid-column:1/-1}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}

/* Vergleich */
.tabelle-huelle{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--linie);background:var(--weiss)}
.vergleich{width:100%;border-collapse:collapse;min-width:720px;font-size:.98rem}
.vergleich th,.vergleich td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.vergleich thead th{font-family:var(--display);font-size:1.05rem;color:var(--tinte);background:#F8FAFA}
.vergleich tbody th{font-weight:700;color:var(--tinte);width:22%}
.vergleich td{color:#3E4858}
.vergleich .pg{background:linear-gradient(180deg,rgba(255,212,94,.22),rgba(166,227,208,.22))}
.vergleich thead .pg{background:var(--sonne)}
.vergleich tr:last-child th,.vergleich tr:last-child td{border-bottom:0}
.tabelle-hinweis{margin-top:14px;font-size:.88rem;color:var(--grau)}

/* Branchen */
.branchen{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.branchen li{background:var(--weiss);border:1px solid var(--linie);border-radius:40px;padding:10px 18px;font-weight:600}
.branchen li.demo{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.branchen a{color:inherit;text-decoration:none}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:900px){.zwei-spalten{grid-template-columns:1fr;gap:36px}}

/* Ratgeber-Teaser */
.ratgeber-karte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:var(--r-l);overflow:hidden;background:var(--weiss);border:1px solid var(--linie);text-decoration:none;color:inherit}
.ratgeber-karte .bildflaeche{background:var(--verlauf);min-height:280px;position:relative;overflow:hidden}
.ratgeber-karte .bildflaeche span{position:absolute;left:28px;bottom:22px;right:28px;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.95;color:var(--tinte);letter-spacing:-0.04em}
.ratgeber-karte .inhalt{padding:36px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.ratgeber-karte .meta{font-size:.88rem;color:var(--grau)}
.ratgeber-karte h3{font-size:1.6rem}
.ratgeber-karte p{color:#3E4858}
@media (max-width:820px){.ratgeber-karte{grid-template-columns:1fr}.ratgeber-karte .bildflaeche{min-height:200px}.ratgeber-karte .inhalt{padding:26px}}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;padding:22px 52px 22px 0;font-family:var(--display);font-weight:650;font-size:1.2rem;color:var(--tinte);position:relative;letter-spacing:-0.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313243B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;border:1px solid var(--linie);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--sonne)}
.faq details > div{padding:0 0 24px;color:#3E4858;max-width:70ch}
.faq details > div p + p{margin-top:10px}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.kontakt-info p{margin-top:16px;font-size:1.12rem;color:#B8C6D9}
.kontakt-person{display:flex;gap:18px;align-items:center;margin-top:30px}
.kontakt-person .foto{width:72px;height:72px;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--tinte);flex:none}
.kontakt-person strong{display:block;color:#fff;font-size:1.1rem}
.kontakt-person span{color:#B8C6D9;font-size:.95rem}
.kontakt-wege{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.kontakt-wege li{display:flex;gap:12px;align-items:center}
.kontakt-wege svg{width:22px;height:22px;color:var(--sonne);flex:none}
.kontakt-wege a{color:#fff;font-weight:700}
.formular{background:var(--weiss);color:var(--text);border-radius:var(--r-l);padding:34px}
.formular h3{margin-bottom:6px;color:var(--tinte)}
.formular > p{color:var(--grau);margin-bottom:22px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.feld.ganz{grid-column:1/-1}
.feld label{font-weight:700;font-size:.95rem}
.feld input,.feld textarea{font:inherit;font-size:1rem;padding:13px 15px;border:1.5px solid #C9D1D6;border-radius:10px;background:#fff;color:var(--text);width:100%}
.feld input:focus,.feld textarea:focus{border-color:var(--tinte);outline:3px solid rgba(255,212,94,.6)}
.feld textarea{min-height:120px;resize:vertical}
.optional{font-weight:400;color:var(--grau)}
.formular .klein{font-size:.85rem;color:var(--grau);margin-top:14px}
.hp{position:absolute;left:-5000px}
.meldung{display:none;border-radius:10px;padding:14px 16px;margin-top:14px}
.meldung.zeigen{display:block}
.meldung.ok{background:#E3F5EC;border:1px solid #9ED3B8;color:#14553A}
.meldung.fehler{background:#FDECEA;border:1px solid #F1B0A8;color:#7A1F14}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr;gap:40px}}
@media (max-width:560px){.felder{grid-template-columns:1fr}.formular{padding:24px}}

/* Fuß */
.fuss{background:#0D1A2C;color:#9AA9BD;padding-block:56px 40px;font-size:.95rem}
.fuss .marke{color:#fff}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fuss h4{margin:0 0 12px;color:#fff;font-family:var(--display);font-size:1rem;font-weight:700}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fuss a{color:#D5DFEB;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-unten{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem}
@media (max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fuss-raster{grid-template-columns:1fr}}

/* Artikel und Textseiten */
.artikel-kopf{padding-block:56px 40px;position:relative;overflow:hidden;isolation:isolate}
.artikel-kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 10% 0%,rgba(166,227,208,.7),transparent 70%),radial-gradient(50% 70% at 100% 20%,rgba(255,212,94,.45),transparent 70%)}
.brotkrumen{font-size:.9rem;color:var(--grau);margin-bottom:22px}
.brotkrumen a{color:var(--grau)}
.artikel-kopf h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:18em}
.artikel-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;color:var(--grau);font-size:.95rem}
.artikel-lead{font-size:1.25rem;line-height:1.55;color:#2F3A4A;max-width:36em;margin-top:22px}
.artikel{background:var(--weiss);padding-block:56px 80px}
.artikel-raster{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start}
.prosa{max-width:68ch;font-size:1.12rem;line-height:1.72}
.prosa h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:52px 0 14px}
.prosa h3{font-size:1.3rem;margin:32px 0 8px}
.prosa p{margin:0 0 18px}
.prosa ul,.prosa ol{margin:0 0 20px;padding-left:1.3em}
.prosa li{margin-bottom:8px}
.prosa strong{color:var(--tinte)}
.prosa blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:4px solid var(--sonne-2);font-family:var(--display);font-size:1.35rem;line-height:1.35;color:var(--tinte);letter-spacing:-0.01em}
.zahlenkasten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 30px}
.zahlenkasten div{background:var(--papier);border-radius:var(--r-m);padding:18px}
.zahlenkasten b{display:block;font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--tinte);letter-spacing:-0.03em;margin-bottom:8px}
.zahlenkasten span{font-size:.92rem;color:#3E4858;line-height:1.45;display:block}
.zahlenkasten small{display:block;margin-top:6px;font-size:.78rem;color:var(--grau)}
@media (max-width:640px){.zahlenkasten{grid-template-columns:1fr}}
.infobox{background:linear-gradient(135deg,rgba(166,227,208,.35),rgba(198,219,255,.35));border-radius:var(--r-m);padding:22px 24px;margin:28px 0}
.infobox p:last-child{margin-bottom:0}
.quellen{font-size:.92rem;color:var(--grau);border-top:1px solid var(--linie);margin-top:44px;padding-top:20px}
.quellen ol{padding-left:1.2em}
.seitenleiste{position:sticky;top:96px;display:grid;gap:18px}
.seitenleiste .karte{background:var(--papier);border-radius:var(--r-m);padding:22px}
.seitenleiste h4{margin:0 0 10px;font-family:var(--display);font-size:1.05rem;color:var(--tinte)}
.seitenleiste ol{margin:0;padding-left:1.2em;font-size:.95rem;display:grid;gap:6px}
.seitenleiste a{color:var(--text)}
.cta-karte{background:var(--tinte)!important;color:#D7E0EC}
.cta-karte h4{color:#fff!important}
.cta-karte p{font-size:.95rem;margin-bottom:14px}
.artikel-cta{margin-top:48px;border-radius:var(--r-l);background:var(--tinte);color:#D7E0EC;padding:36px;display:grid;gap:14px}
.artikel-cta h2{color:#fff;margin:0;font-size:1.8rem}
.artikel-cta .btn{justify-self:start}
@media (max-width:980px){.artikel-raster{grid-template-columns:1fr}.seitenleiste{position:static}}
.textseite{background:var(--weiss);padding-block:56px 80px}
.textseite .prosa h2{font-size:1.35rem;margin:36px 0 10px}
.liste-artikel{display:grid;gap:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Ergänzungen Version 2: Icons, Fotos, Rechtliches ===== */
.ico{width:22px;height:22px;flex:none}
.frage .frage-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--verlauf);margin-bottom:18px}
.frage .frage-ico svg{width:26px;height:26px;color:var(--tinte)}
.preis-zeile li{display:inline-flex;align-items:center;gap:8px}
.preis-zeile svg{width:18px;height:18px;color:var(--tinte-2)}
.beleg li{align-items:flex-start}
.beleg li > span:first-child{display:flex;gap:12px;align-items:flex-start}
.beleg li > span:first-child svg{width:20px;height:20px;flex:none;color:var(--tinte-2);margin-top:3px}
.beleg li span:last-child{display:inline-flex;align-items:center;gap:4px}
.beleg li span:last-child svg{width:16px;height:16px}
.beleg-summe small{display:block;font-size:.8rem;color:var(--grau);font-weight:500;text-align:right;letter-spacing:0;font-family:var(--body)}
.beleg-kopf h3{display:flex;align-items:center;gap:10px}
.beleg-kopf h3 svg{width:26px;height:26px;color:var(--tinte-2)}
.hosting{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hosting > div{border:1px solid rgba(255,255,255,.16);border-radius:var(--r-m);padding:22px 24px;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start}
.hosting svg{grid-row:span 2;width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--sonne)}
.hosting b{color:#fff;font-family:var(--display);font-size:1.1rem}
.hosting p{color:#B8C6D9;font-size:.95rem}
@media (max-width:760px){.hosting{grid-template-columns:1fr}}
.ablauf li .schritt-ico{position:absolute;right:20px;top:24px;width:26px;height:26px;color:var(--tinte-2);opacity:.75}
.zeitleiste{display:flex;align-items:center;gap:12px;margin:-20px 0 34px;padding:14px 18px;border-radius:var(--r-m);background:var(--weiss);border:1px solid var(--linie);font-size:.95rem;color:var(--grau);flex-wrap:wrap}
.zeitleiste b{color:var(--tinte)}
.zeitleiste svg{width:22px;height:22px;color:var(--tinte-2)}
.vergleich td svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.vergleich td.pg svg{color:#1F8A62}
.vergleich td .nein{color:#B3402A}
.branchen li{display:inline-flex;align-items:center;gap:8px}
.branchen li svg{width:18px;height:18px}
.vor-ort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.mosaik{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:200px 200px;gap:14px}
.mosaik img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-m)}
.mosaik img:first-child{grid-row:span 2}
.vor-ort .branchen{margin-top:26px}
@media (max-width:900px){.vor-ort{grid-template-columns:1fr;gap:36px}.mosaik{grid-template-rows:160px 160px}}
.ueber{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border-radius:var(--r-l);overflow:hidden;background:var(--tinte);color:#D7E0EC}
.ueber img{width:100%;height:100%;object-fit:cover;min-height:380px}
.ueber > div{padding:44px}
.ueber h2{color:#fff}
.ueber p{margin-top:16px;color:#B8C6D9}
.ueber ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.ueber li{display:flex;gap:12px;align-items:flex-start}
.ueber li svg{width:22px;height:22px;color:var(--sonne);flex:none;margin-top:2px}
@media (max-width:900px){.ueber{grid-template-columns:1fr}.ueber img{min-height:220px;max-height:280px}.ueber > div{padding:28px}}
.ratgeber-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.artikel-karte{display:flex;flex-direction:column;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.artikel-karte:hover{transform:translateY(-4px);box-shadow:0 26px 40px -28px rgba(19,36,59,.5)}
.artikel-karte img{width:100%;aspect-ratio:16/10;object-fit:cover}
.artikel-karte > div{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.artikel-karte .meta{font-size:.85rem;color:var(--grau);display:flex;align-items:center;gap:6px}
.artikel-karte .meta svg{width:16px;height:16px}
.artikel-karte h3{font-size:1.25rem}
.artikel-karte p{color:#3E4858;font-size:.97rem}
.artikel-karte .beispiel-link{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px}
.artikel-karte .beispiel-link svg{width:18px;height:18px}
@media (max-width:980px){.ratgeber-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ratgeber-raster{grid-template-columns:1fr}}
.artikel-bild{margin:0 0 8px;border-radius:var(--r-l);overflow:hidden}
.artikel-bild img{width:100%;aspect-ratio:21/9;object-fit:cover}
.artikel-bild figcaption{font-size:.82rem;color:var(--grau);padding-top:8px}
.schritte{list-style:none;margin:24px 0 28px;padding:0;counter-reset:s;display:grid;gap:16px}
.schritte li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;background:var(--papier);border-radius:var(--r-m);padding:18px 20px}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--verlauf);font-family:var(--display);font-weight:800;color:var(--tinte)}
.schritte li strong{display:block;margin-bottom:4px}
.preistabelle{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:1rem}
.preistabelle th,.preistabelle td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
.preistabelle thead th{background:var(--papier);font-family:var(--display);color:var(--tinte)}
.preistabelle td:nth-child(2),.preistabelle td:nth-child(3){white-space:nowrap;font-variant-numeric:tabular-nums}
.preistabelle tr.pg td{background:rgba(255,212,94,.18);font-weight:600}
.recht{max-width:78ch}
.recht h2{font-size:1.3rem;margin:38px 0 10px}
.recht h3{font-size:1.08rem;margin:22px 0 6px}
.recht ol{padding-left:1.4em}
.recht ol li{margin-bottom:8px}
.recht .para{font-family:var(--display);font-weight:700;color:var(--tinte)}
.recht-inhalt{background:var(--papier);border-radius:var(--r-m);padding:20px 24px;margin:24px 0 8px;columns:2;column-gap:32px;font-size:.95rem}
.recht-inhalt a{display:block;padding:3px 0;color:var(--text);break-inside:avoid}
@media (max-width:640px){.recht-inhalt{columns:1}}
.hinweisbox{display:flex;gap:14px;align-items:flex-start;background:#FFF6D6;border:1px solid #F0D98A;color:#5B4708;border-radius:var(--r-m);padding:16px 18px;margin:20px 0}
.hinweisbox svg{width:24px;height:24px;flex:none;margin-top:2px}
.fuss .bildzeile{font-size:.8rem;color:#7F8EA3;margin-top:14px}
.fuss .bildzeile a{color:#B8C6D9;text-decoration:underline}
.branchen a{display:inline-flex;align-items:center;gap:8px}
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (max-width:640px){.preistabelle{font-size:.82rem;hyphens:auto}.preistabelle th,.preistabelle td{padding:9px 6px}.preistabelle td:nth-child(2),.preistabelle td:nth-child(3){white-space:normal}}
/* Version 3: Mosaik mit breitem Bild oben */
.mosaik{grid-template-columns:1fr 1fr;grid-template-rows:240px 190px}
.mosaik img:first-child{grid-row:auto;grid-column:span 2;object-position:50% 22%}
@media (max-width:900px){.mosaik{grid-template-rows:200px 150px}}
.branchen li{background:var(--weiss);color:inherit}
/* Über-Kasten ohne Bild */
.ueber.ohne-bild{grid-template-columns:1fr}
.ueber.ohne-bild > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 56px;align-items:center;padding:44px 48px}
.ueber.ohne-bild p{margin-top:0;font-size:1.15rem;color:#D7E0EC}
.ueber.ohne-bild ul{margin:0}
@media (max-width:900px){.ueber.ohne-bild > div{grid-template-columns:1fr;padding:28px}}
/* Zusatz unter dem Logo */
.marke{flex-wrap:wrap;row-gap:0}
.marke .zusatz{flex-basis:100%;display:block;font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-top:3px;line-height:1}
.fuss .marke .zusatz{color:inherit;opacity:.75}
.beispiel-text .vorteile{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid var(--linie);display:grid;gap:8px}
.beispiel-text .vorteile li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;font-weight:650;color:var(--tinte);line-height:1.35}
.beispiel-text .vorteile svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;background:var(--sonne);color:var(--tinte);margin-top:-1px}

/* Mobil-Menü: Button-Schrift lesbar halten */
.nav a.btn{color:#fff;border-bottom:0;padding:.75em 1.3em;text-decoration:none;justify-content:center}
.nav a.btn:hover{color:#fff;text-decoration:none}
/* Anker: Überschrift nicht unter dem festen Kopf verstecken */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}