@font-face{font-family:"Outfit";src:url(../fonts/outfit.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#f4f7fb;--flaeche:#ffffff;--flaeche2:#e9eff7;--text:#0b1424;--leise:#496079;--linie:#d6dfec;
  --akzent:#0a9f78;--akzent2:#2563eb;--akzent3:#8b5cf6;--verlauf:linear-gradient(120deg,#0fb88a,#2563eb 60%,#8b5cf6);
  --glas:rgba(255,255,255,.7);--schatten:0 18px 50px -18px rgba(20,40,90,.25);--r:22px;
}
:root[data-theme="dark"]{
  --bg:#060b16;--flaeche:#0e1627;--flaeche2:#121d33;--text:#eaf0fb;--leise:#97aac8;--linie:#1f2d4a;
  --akzent:#34f0b8;--akzent2:#6aa5ff;--akzent3:#a98bff;--verlauf:linear-gradient(120deg,#34f0b8,#6aa5ff 60%,#a98bff);
  --glas:rgba(16,26,46,.65);--schatten:0 18px 50px -18px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.7 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--akzent2)}
img,svg{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--akzent);color:#000;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.025em;margin:0 0 .55em}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em}
.verlauf{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){.verlauf{background:none;color:var(--akzent);-webkit-text-fill-color:currentColor}}
.klein{font-size:.9rem;color:var(--leise)}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);margin-bottom:.8rem}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--glas);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;gap:1rem;min-height:70px}
.marke{font-weight:800;font-size:1.4rem;text-decoration:none;color:var(--text);letter-spacing:-.03em;display:flex;align-items:center;gap:.55rem}
.marke i{display:inline-block;width:28px;height:28px;background:var(--verlauf);clip-path:polygon(0 100%,36% 20%,55% 55%,72% 32%,100% 100%)}
.nav{margin-left:auto;display:flex;gap:.15rem;align-items:center}
.nav a{color:var(--text);text-decoration:none;padding:.5rem .8rem;border-radius:999px;font-weight:550;font-size:.96rem}
.nav a:hover,.nav a[aria-current="page"]{background:var(--flaeche2)}
.nav .cta{background:var(--verlauf);color:#04130e;font-weight:750;margin-left:.3rem}
.tbtn,.menue{border:1px solid var(--linie);background:var(--flaeche);color:var(--text);border-radius:999px;width:42px;height:42px;cursor:pointer;font-size:1.1rem;margin-left:.3rem}
.menue{display:none}
@media(max-width:1120px){
  .menue{display:block;margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:70px;flex-direction:column;align-items:stretch;background:var(--bg);padding:1rem 1.2rem 1.4rem;border-bottom:1px solid var(--linie)}
  .nav.offen{display:flex}
  .nav a{padding:.85rem 1rem}
  .nav .cta{margin:.4rem 0 0;text-align:center}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(3rem,8vw,6.5rem) 0 clamp(5rem,10vw,8rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--linie) 1px,transparent 1px),linear-gradient(90deg,var(--linie) 1px,transparent 1px);background-size:56px 56px;opacity:.35;mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%)}
.heroraster{display:grid;gap:3rem;grid-template-columns:1.1fr .9fr;align-items:center}
@media(max-width:900px){.heroraster{grid-template-columns:1fr}.mock{display:none}}
.hero p.lead{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--leise);max-width:620px}
.berge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:100px;color:var(--bg);display:block}
.chip{display:inline-flex;align-items:center;gap:.55rem;background:var(--glas);border:1px solid var(--linie);padding:.4rem 1rem;border-radius:999px;font-size:.9rem;margin-bottom:1.3rem;backdrop-filter:blur(8px)}
.punkt{width:9px;height:9px;border-radius:50%;background:var(--akzent);box-shadow:0 0 0 0 var(--akzent);animation:puls 2s infinite}
@keyframes puls{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.knopf{display:inline-block;padding:.9rem 1.6rem;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid var(--linie);color:var(--text);background:var(--flaeche);transition:transform .15s,box-shadow .15s;cursor:pointer;font:inherit;font-weight:700}
.knopf:hover{transform:translateY(-2px);box-shadow:var(--schatten)}
.knopf.voll{background:var(--verlauf);color:#04130e;border:0}
.reihe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.vertrauen{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem;color:var(--leise);font-size:.92rem}
.vertrauen span::before{content:"✓ ";color:var(--akzent);font-weight:800}

/* Mock-Browser im Hero */
.mock{position:relative;perspective:1200px}
.fenster{background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;box-shadow:var(--schatten);overflow:hidden;transform:rotateY(-8deg) rotateX(4deg);animation:fliegen 7s ease-in-out infinite alternate}
@keyframes fliegen{to{transform:rotateY(-4deg) rotateX(2deg) translateY(-10px)}}
.fkopf{display:flex;gap:6px;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--linie);background:var(--flaeche2)}
.fkopf i{width:10px;height:10px;border-radius:50%;background:#ff6b6b}.fkopf i:nth-child(2){background:#ffd166}.fkopf i:nth-child(3){background:#34d399}
.fkopf span{margin-left:.6rem;font-size:.75rem;color:var(--leise);background:var(--bg);padding:.15rem .8rem;border-radius:999px}
.fk{padding:1.3rem}
.fk .z{height:12px;border-radius:6px;background:var(--flaeche2);margin-bottom:.6rem}
.fk .z.l{width:70%;background:var(--verlauf);height:18px}
.fk .z.k{width:45%}
.fk .kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
.fk .kacheln b{height:70px;border-radius:12px;background:var(--flaeche2);display:block}
.fk .kacheln b:first-child{background:var(--verlauf);opacity:.85}
.schwebe{position:absolute;background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;box-shadow:var(--schatten);padding:.8rem 1rem;font-size:.85rem;animation:hoch 5s ease-in-out infinite alternate}
.schwebe strong{display:block;font-size:1.3rem;letter-spacing:-.02em}
.schwebe.s1{left:-30px;bottom:30px}
.schwebe.s2{right:-10px;top:-24px;animation-delay:-2.5s}
@keyframes hoch{to{transform:translateY(-12px)}}

/* Laufband */
.band{border-block:1px solid var(--linie);background:var(--flaeche);overflow:hidden;padding:1rem 0}
.band div{display:flex;gap:3rem;width:max-content;animation:lauf 38s linear infinite;font-weight:650;color:var(--leise);white-space:nowrap}
.band span::after{content:"◆";margin-left:3rem;color:var(--akzent)}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Abschnitte */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
section.alt{background:var(--flaeche2)}
.kopfzeile{max-width:720px;margin-bottom:2.6rem}
.kopfzeile.mitte{margin-inline:auto;text-align:center}
.kopfzeile p{color:var(--leise);font-size:1.08rem}
.raster{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.bento{display:grid;gap:1.3rem;grid-template-columns:repeat(6,1fr)}
.bento>*{grid-column:span 2}
.bento .breit{grid-column:span 3}
.bento .gross{grid-column:span 4}
@media(max-width:900px){.bento>*,.bento .breit,.bento .gross{grid-column:span 6}}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.7rem;box-shadow:var(--schatten);transition:transform .25s,border-color .25s;position:relative;overflow:hidden}
a.karte{display:block;text-decoration:none;color:inherit}
.karte:hover{transform:translateY(-5px);border-color:var(--akzent)}
.karte::after{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;background:var(--verlauf);opacity:0;filter:blur(60px);transition:opacity .3s}
.karte:hover::after{opacity:.22}
.karte.dunkel{background:linear-gradient(150deg,#0b1a33,#0d2a4a);color:#eaf0fb;border:0}
.karte.dunkel p,.karte.dunkel li{color:#b6c7e4}
.ico{width:52px;height:52px;border-radius:16px;background:var(--verlauf);display:grid;place-items:center;font-size:1.5rem;margin-bottom:1.1rem;color:#04130e}
.karte ul{padding-left:1.1rem;margin:.7rem 0 0;color:var(--leise)}
.karte li{margin:.15rem 0}
.mehr{font-weight:700;color:var(--akzent2)}

/* Zahlen */
.zahlen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.zahl{text-align:center;padding:1.6rem 1rem;border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie)}
.zahl b{display:block;font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.03em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.zahl span{color:var(--leise);font-size:.95rem}

/* Preise */
.preise{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:stretch}
.preis{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.9rem;display:flex;flex-direction:column;position:relative}
.preis.top{border:2px solid var(--akzent);box-shadow:var(--schatten);transform:translateY(-8px)}
.preis .tag{position:absolute;top:-14px;left:1.5rem;background:var(--verlauf);color:#04130e;font-weight:750;font-size:.8rem;padding:.25rem .9rem;border-radius:999px}
.preis .betrag{font-size:2.5rem;font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:.3rem 0 .2rem}
.preis .betrag small{font-size:.95rem;font-weight:500;color:var(--leise);letter-spacing:0}
.preis .fuer{font-size:.92rem;color:var(--leise);margin-bottom:.4rem}
.preis ul{list-style:none;padding:0;margin:1rem 0 1.5rem;flex:1}
.preis li{padding:.35rem 0 .35rem 1.8rem;position:relative}
.preis li::before{content:"✓";position:absolute;left:0;color:var(--akzent);font-weight:800}
.tabelle{width:100%;border-collapse:collapse;background:var(--flaeche);border-radius:var(--r);overflow:hidden;border:1px solid var(--linie)}
.tabelle th,.tabelle td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle th{background:var(--flaeche2);font-size:.9rem;color:var(--leise)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:last-child{white-space:nowrap}
.tabelle.preisliste td:last-child{text-align:right;font-weight:750}
.tabelle .ja{color:var(--akzent);font-weight:800}
.tabelle .nein{color:var(--leise)}
.scroll{overflow-x:auto;border-radius:var(--r)}
.scroll .tabelle{min-width:560px}

/* Schritte / Zeitleiste */
.schritte{counter-reset:s;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.schritt{counter-increment:s;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.5rem;position:relative}
.schritt::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--verlauf);color:#04130e;font-weight:800;margin-bottom:.9rem}
.schritt .dauer{display:inline-block;font-size:.8rem;font-weight:700;color:var(--akzent);margin-top:.3rem}

/* Widgets */
.widget{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:1.7rem;box-shadow:var(--schatten)}
.tarifzeile{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.tarifzeile strong{font-size:2.8rem;letter-spacing:-.03em}
label{display:block;font-weight:600;margin:.9rem 0 .3rem}
input,textarea,select{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--linie);border-radius:12px;padding:.8rem .95rem}
input:focus,textarea:focus,select:focus,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--akzent2);outline-offset:2px}
.ergebnis{margin-top:1rem;padding:1rem 1.2rem;border-radius:12px;background:var(--flaeche2);font-weight:600;min-height:3.2rem}
.gut{color:var(--akzent)}
.zwei{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.opt{display:flex;gap:.7rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--linie)}
.opt input{width:auto}
.opt span:last-child{margin-left:auto;font-weight:700}
.honig{position:absolute;left:-9999px}
details{background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:1.05rem 1.3rem;margin-bottom:.8rem}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--akzent)}
details[open] summary::after{content:"–"}
details p{margin:.8rem 0 0;color:var(--leise)}

/* Problem-Helfer */
.helfer{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.helfer button{border:1px solid var(--linie);background:var(--flaeche);color:var(--text);padding:.65rem 1.1rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:600}
.helfer button[aria-pressed="true"]{background:var(--verlauf);color:#04130e;border-color:transparent}
.antwort{min-height:140px}

/* Über mich / Zitat */
.profil{display:grid;gap:2.5rem;grid-template-columns:auto 1fr;align-items:center}
@media(max-width:700px){.profil{grid-template-columns:1fr}}
.avatar{width:170px;height:170px;border-radius:50%;background:var(--verlauf);display:grid;place-items:center;font-size:3.4rem;font-weight:800;color:#04130e;box-shadow:var(--schatten)}
.zitat{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:650;letter-spacing:-.02em;line-height:1.35}

/* Ratgeber */
.artikel{display:block;text-decoration:none;color:inherit}
.artikel .meta{font-size:.82rem;color:var(--akzent);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.text{max-width:760px}
.text h2{margin-top:2.2rem;font-size:1.6rem}
.text h3{margin-top:1.6rem}
.text ul,.text ol{padding-left:1.2rem}
.text li{margin:.3rem 0}
.hinweis{border-left:4px solid var(--akzent);background:var(--flaeche2);padding:1rem 1.2rem;border-radius:0 14px 14px 0;margin:1.5rem 0}

/* Abschluss-Banner */
.banner{background:linear-gradient(135deg,#0b1a33,#0f3a66 55%,#0a5a5a);color:#eaf0fb;border-radius:32px;padding:clamp(2rem,6vw,4rem);text-align:center;position:relative;overflow:hidden}
.banner p{color:#bcd0ee}
.banner::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--akzent);opacity:.2;filter:blur(70px);right:-100px;top:-140px}

/* Fuss */
.fuss{border-top:1px solid var(--linie);padding:3rem 0 2rem;color:var(--leise);font-size:.95rem;background:var(--flaeche)}
.fuss .wrap{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr 1fr}
@media(max-width:800px){.fuss .wrap{grid-template-columns:1fr 1fr}}
.fuss a{color:var(--leise);text-decoration:none;display:block;padding:.15rem 0}
.fuss a:hover{color:var(--text)}
.fuss strong{color:var(--text);display:block;margin-bottom:.4rem}
.unten{border-top:1px solid var(--linie);margin-top:2rem;padding-top:1.2rem;font-size:.85rem}
.notruf{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--verlauf);color:#04130e;font-weight:800;text-decoration:none;padding:.85rem 1.25rem;border-radius:999px;box-shadow:var(--schatten)}
.nachoben{position:fixed;left:16px;bottom:16px;z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);background:var(--flaeche);color:var(--text);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s}
.nachoben.da{opacity:1;pointer-events:auto}

/* Einblenden */
.ein{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.ein.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.ein{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ===== v3 ===== */
.hero{background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--akzent) 28%,transparent),transparent 60%),radial-gradient(800px 500px at -10% 110%,color-mix(in srgb,var(--akzent2) 26%,transparent),transparent 60%),radial-gradient(500px 400px at 50% 40%,color-mix(in srgb,var(--akzent3) 14%,transparent),transparent 70%)}
.gebirge{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:-1;pointer-events:none}
.gebirge svg{position:absolute;bottom:0;left:-2%;width:104%;height:100%}
.gebirge .e1{color:color-mix(in srgb,var(--akzent2) 18%,var(--bg))}
.gebirge .e2{color:color-mix(in srgb,var(--akzent2) 32%,var(--bg))}
.gebirge .e3{color:color-mix(in srgb,var(--akzent) 22%,var(--bg))}
.hero{isolation:isolate}
.sonne{position:absolute;right:12%;bottom:150px;width:120px;height:120px;border-radius:50%;background:var(--verlauf);opacity:.55;z-index:-2;box-shadow:0 0 120px 40px color-mix(in srgb,var(--akzent) 35%,transparent)}
.kopf{backdrop-filter:blur(10px)}
/* Licht auf Karten */
.karte,.preis,.widget{--mx:50%;--my:0%}
.karte::before,.preis::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--akzent) 18%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.karte:hover::before,.preis:hover::before{opacity:1}
/* Demo-Galerie */
.demos{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.demos button{border:1px solid var(--linie);background:var(--flaeche);color:var(--text);padding:.65rem 1.2rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:650}
.demos button[aria-selected="true"]{background:var(--verlauf);color:#04130e;border-color:transparent}
.demobuehne{display:grid;gap:2rem;grid-template-columns:1.25fr .75fr;align-items:center}
@media(max-width:900px){.demobuehne{grid-template-columns:1fr}}
.site-demo{border-radius:20px;overflow:hidden;border:1px solid var(--linie);box-shadow:var(--schatten);background:#fff;color:#1a1a1a;font-size:15px;line-height:1.5}
.site-demo .dk{display:flex;gap:6px;padding:.6rem .8rem;background:#eceff4}
.site-demo .dk i{width:9px;height:9px;border-radius:50%;background:#c7ccd6}
.site-demo .nav2{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.3rem;background:var(--d1);color:var(--dt)}
.site-demo .nav2 b{font-size:1.05rem;letter-spacing:-.02em}
.site-demo .nav2 span{font-size:.8rem;opacity:.85}
.site-demo .h{padding:2rem 1.3rem;background:linear-gradient(135deg,var(--d1),var(--d2));color:var(--dt)}
.site-demo .h h4{font-size:1.7rem;margin:0 0 .4rem;line-height:1.1}
.site-demo .h p{margin:0 0 1rem;opacity:.9}
.site-demo .h a{display:inline-block;background:var(--da);color:var(--dk2,#111);padding:.5rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none;font-size:.9rem}
.site-demo .k3{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;padding:1.1rem 1.3rem 1.4rem;background:#fff}
.site-demo .k3 div{background:var(--dbg);border-radius:12px;padding:.8rem;font-size:.82rem}
.site-demo .k3 strong{display:block;color:var(--d1);margin-bottom:.15rem}
.demo-text h3{font-size:1.5rem}
.demo-text ul{padding-left:1.1rem;color:var(--leise)}
[data-demo]{display:none}
[data-demo].aktiv{display:block}
/* Selbsttest */
.test{max-width:760px;margin-inline:auto}
.frage{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.frage span{flex:1}
.frage .jn{display:flex;gap:.4rem}
.frage .jn button{border:1px solid var(--linie);background:var(--bg);color:var(--text);padding:.45rem 1rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:600}
.frage .jn button[aria-pressed="true"].j{background:var(--akzent);color:#04130e;border-color:transparent}
.frage .jn button[aria-pressed="true"].n{background:#ef4444;color:#fff;border-color:transparent}
.ring{--p:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--akzent) calc(var(--p)*1%),var(--flaeche2) 0);display:grid;place-items:center;transition:background .4s;flex:none}
.ring b{width:118px;height:118px;border-radius:50%;background:var(--flaeche);display:grid;place-items:center;font-size:2.2rem;letter-spacing:-.03em}
.ergebnisbox{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem;padding:1.4rem;border-radius:var(--r);background:var(--flaeche2)}
/* Handy-Leiste */
.leiste{display:none}
@media(max-width:700px){
  .leiste{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--flaeche);border-top:1px solid var(--linie)}
  .leiste a{padding:.9rem;text-align:center;font-weight:750;text-decoration:none;color:var(--text)}
  .leiste a:first-child{background:var(--verlauf);color:#04130e}
  .notruf,.nachoben{display:none}
  body{padding-bottom:54px}
}
@media(max-width:700px){.sonne{width:64px;height:64px;right:8%;bottom:70px;opacity:.4}.gebirge{height:190px}.vertrauen{margin-bottom:3.5rem}}

/* ===== v4 ===== */
@view-transition{navigation:auto}
.fortschritt{position:fixed;top:0;left:0;height:3px;width:0;background:var(--verlauf);z-index:200;transition:width .1s}
.filter{display:flex;gap:1rem;flex-direction:column;margin-bottom:2rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chips button{border:1px solid var(--linie);background:var(--flaeche);color:var(--text);padding:.5rem 1rem;border-radius:999px;cursor:pointer;font:inherit;font-weight:600}
.chips button[aria-pressed="true"]{background:var(--verlauf);color:#04130e;border-color:transparent}
.todo{list-style:none;counter-reset:t;padding:0;margin:.8rem 0 0}
.todo li{counter-increment:t;padding:.6rem 0 .6rem 2.4rem;position:relative;border-bottom:1px solid var(--linie)}
.todo li:last-child{border:0}
.todo li::before{content:counter(t);position:absolute;left:0;top:.6rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--verlauf);color:#04130e;font-weight:800;display:grid;place-items:center;font-size:.85rem}
.tipp .zitat{min-height:5.4em}
.cursor{display:inline-block;width:3px;height:.9em;background:var(--akzent);margin-left:3px;vertical-align:-.08em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* Suche */
.such{position:fixed;inset:0;z-index:300;background:rgba(5,10,20,.6);display:none;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem}
.such.offen{display:flex}
.such .box{width:min(620px,100%);background:var(--flaeche);border:1px solid var(--linie);border-radius:20px;box-shadow:var(--schatten);overflow:hidden}
.such input{border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:1.1rem 1.3rem;font-size:1.1rem;background:transparent}
.such input:focus{outline:0}
.such ul{list-style:none;margin:0;padding:.4rem;max-height:50vh;overflow:auto}
.such li a{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-radius:12px;color:var(--text);text-decoration:none}
.such li a:hover,.such li a.sel{background:var(--flaeche2)}
.such li small{color:var(--leise)}
.such .tipp2{padding:.6rem 1.3rem;font-size:.8rem;color:var(--leise);border-top:1px solid var(--linie)}
summary{font-size:1.02rem}
.hero .gebirge{height:260px}

/* ===== v5: Schrift + Logo ===== */
h1,h2,h3,h4,.marke,.betrag,.zahl b,.zitat,.tarifzeile strong,.eyebrow,.knopf,.ring b{font-family:"Outfit","Inter",system-ui,sans-serif}
h1{letter-spacing:-.035em}
.marke{font-size:1.5rem;font-weight:700;gap:.5rem}
.marke i{display:none}
.logomark{width:38px;height:36px;flex:none}
.fuss .marke{font-size:1.3rem;margin-bottom:.6rem}
/* ===== v5: Handy-Feinschliff ===== */
@media(max-width:600px){
  .frage{flex-wrap:wrap}.frage span{flex-basis:100%}
  .tabelle td:last-child{white-space:normal}
  .tabelle th,.tabelle td{padding:.75rem .8rem}
  .tabelle.preisliste td:last-child{min-width:7.5rem}
  .zahlen{grid-template-columns:1fr 1fr}
  .ergebnisbox{justify-content:center;text-align:center}
}
.site-demo .k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.site-demo .k3 div{overflow-wrap:anywhere}
@media(max-width:600px){.site-demo .nav2 span{display:none}.site-demo .k3 div{font-size:.72rem;padding:.6rem}.site-demo .h h4{font-size:1.35rem}}
@media(max-width:1120px){.nav{flex-direction:row;flex-wrap:wrap;align-items:center}.nav a{flex:1 1 100%}.nav .tbtn{flex:0 0 auto;margin:.8rem .5rem 0 0}}
/* ===== v6: Live-Check, Formulare ===== */
.lpunkte{list-style:none;margin:1.2rem 0 0;padding:0}
.lpunkte li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;padding:.85rem 0;border-bottom:1px solid var(--linie)}
.lpunkte li:last-child{border:0}
.lpunkte .b{grid-row:span 2;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.95rem;color:#04130e;margin-top:.15rem}
.lpunkte .ok .b{background:var(--akzent)}
.lpunkte .warn .b{background:#fbbf24}
.lpunkte .bad .b{background:#ef4444;color:#fff}
.lpunkte strong{font-family:"Outfit","Inter",sans-serif}
.lpunkte span.t{color:var(--leise);font-size:.95rem}
.lkopf{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem;padding:1.2rem;border-radius:var(--r);background:var(--flaeche2)}
.lkopf .ring{width:120px;height:120px}.lkopf .ring b{width:92px;height:92px;font-size:1.8rem}
.laden{display:inline-block;width:1em;height:1em;border:3px solid var(--linie);border-top-color:var(--akzent);border-radius:50%;animation:dreh .8s linear infinite;vertical-align:-.15em;margin-right:.5rem}
@keyframes dreh{to{transform:rotate(360deg)}}

.todo-liste{list-style:none;padding:0;margin:.6rem 0 1rem}.todo-liste li{padding:.45rem 0 .45rem 1.7rem;position:relative}.todo-liste li::before{content:'✓';position:absolute;left:0;color:var(--akzent);font-weight:800}

/* v11: wechselndes Wort – Cursor als ::after, ruhiges Layout */
.cursor{display:none}
.wort::after{content:"";display:inline-block;width:3px;height:.85em;margin-left:3px;vertical-align:-.06em;background:var(--akzent);-webkit-text-fill-color:initial;animation:blink 1s steps(2) infinite}
.heroraster h1{min-height:2.3em}
@media(prefers-reduced-motion:reduce){.wort::after{display:none}}

/* v12: Franz' eigenes Logo (hell/dunkel) */
.marke{display:flex;align-items:center}
.logo-bild{height:34px;width:auto;display:block}
.logo-bild.dunkel{display:none}
:root[data-theme="dark"] .logo-bild.hell{display:none}
:root[data-theme="dark"] .logo-bild.dunkel{display:block}
.fuss .marke .logo-bild{height:30px}
@media(max-width:600px){.logo-bild{height:28px}}
.marke span,.logomark{display:none}

.nav a{white-space:nowrap}

/* v13: Projekte */
.projekt-bild{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--linie);box-shadow:var(--schatten);background:var(--flaeche2)}
.projektkarte{padding:0;overflow:hidden}
.projektkarte .projekt-bild{border:0;border-radius:0;box-shadow:none;aspect-ratio:16/10;object-fit:cover;object-position:top}
.projektkarte h3,.projektkarte p{padding:0 1.5rem}
.projektkarte h3{margin-top:1.2rem}
.projektkarte p.mehr{padding-bottom:1.4rem;margin-bottom:0}
.p-kopf{margin-bottom:1.6rem}
.p-kopf h2{margin-bottom:.5rem}
.p-grid{display:grid;gap:2.2rem;grid-template-columns:1fr 1.15fr;align-items:center}
.p-grid.umgekehrt{grid-template-columns:1.15fr 1fr}
@media(max-width:900px){.p-grid,.p-grid.umgekehrt{grid-template-columns:1fr}}
.lead-klein{font-size:1.12rem;color:var(--text)}
.haken{list-style:none;padding:0;margin:1rem 0}
.haken li{padding:.3rem 0 .3rem 1.7rem;position:relative}
.haken li::before{content:"✓";position:absolute;left:0;color:var(--akzent);font-weight:800}
.tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:0}
.tags span{font-size:.82rem;font-weight:650;padding:.2rem .8rem;border-radius:999px;background:var(--flaeche);border:1px solid var(--linie);color:var(--leise)}
.p-galerie{display:grid;gap:1.4rem;grid-template-columns:2fr 1fr;align-items:start;margin-top:2.4rem}
.p-galerie.drei{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:700px){.p-galerie{grid-template-columns:1fr}}
.p-galerie figure{margin:0}
.p-galerie figcaption{font-size:.88rem;color:var(--leise);margin-top:.6rem;text-align:center}
.p-galerie figure.handy{max-width:300px;margin-inline:auto}
.projekt-bild.telefon{border-radius:32px;border:7px solid #10131c;max-width:300px;margin-inline:auto}