/* ============================================================
   Peak Advisors, Gestaltungssystem 2026-09
   Eine Datei für alle Hauptseiten. Navigation und Fußzeile behalten
   ihr Markup aus bausteine.ts, alles andere sind die Komponenten unten.
   Bewegung: design.js. Ohne JavaScript ist alles sichtbar.
   ============================================================ */
:root{--navy:#0F1E30;--navy-2:#17335A;--navy-3:#1F3A5F;--navy-card:#24446F;--navy-deep:#17335A;--gold:#C9A84C;--gold-light:#E8C96A;--gold-dim:#8A6B20;--white:#F0EAD8;--text:#D8D0BC;--muted:#B8CEDD;--faint:#9FBBD0;--line:rgba(201,168,76,.18);--border:rgba(46,80,112,.4);--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;--ink:#101E31;--ink2:#2B3A4E;--papier:#F5F3EE}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--navy);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.7;font-size:16px}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
picture{display:contents}
strong{color:var(--white);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--gold);color:var(--navy);padding:8px 14px;border-radius:6px;z-index:200}
.skip-link:focus{left:8px}
/* ---------- Navigation (Markup aus bausteine.ts) ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(180deg,rgba(15,30,48,.94),rgba(15,30,48,.78));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:transform .4s ease}
nav.nav-versteckt{transform:translateY(-100%)}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.logo-chip{width:40px;height:40px;border-radius:9px;background:#fff;display:grid;place-items:center}
.logo-chip svg{width:30px;height:26px;display:block}
.nav-wordmark{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:2.5px;color:var(--white);line-height:1}
.nav-claim{font-size:8px;color:var(--gold);letter-spacing:2px;margin-top:3px}
.nav-center{display:flex;align-items:center;gap:28px}
.nav-link,.nav-ddbtn{font-size:13px;color:var(--muted);text-decoration:none;letter-spacing:.4px;white-space:nowrap;position:relative;padding:6px 0;min-height:24px;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;font-family:var(--sans);gap:6px;transition:color .2s}
.nav-link:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--gold);transition:right .3s}
.nav-link:hover:after,.nav-link.active:after{right:0}
.nav-link:hover,.nav-link.active,.nav-ddbtn:hover,.nav-ddbtn.active,.nav-dd.dd-open .nav-ddbtn{color:var(--gold)}
/* Der Knopf traegt dieselbe Unterstreichung wie ein aktiver Hauptlink, wenn die
   aktive Seite im Ausklappmenue steht. */
.nav-ddbtn{position:relative}
.nav-ddbtn:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--gold);transition:right .3s}
.nav-ddbtn.active:after,.nav-ddbtn:hover:after{right:0}
.nav-dditem.active{color:var(--gold);background:rgba(201,168,76,.10)}
.nav-caret{font-size:9px;transition:transform .2s}
.nav-dd{position:relative}
.nav-dd:after{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:16px}
.nav-dd:hover .nav-caret,.nav-dd.dd-open .nav-caret{transform:rotate(180deg)}
.nav-ddmenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%) translateY(-6px);background:var(--navy-2);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:280px;opacity:0;pointer-events:none;transition:all .2s;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.nav-dd:hover .nav-ddmenu,.nav-dd.dd-open .nav-ddmenu{opacity:1;pointer-events:all;transform:translate(-50%) translateY(0)}
/* Tastatur: Untermenue oeffnen, sobald ein Eintrag den Fokus hat (Tiefenpruefung 12.09.2026) */
.nav-dd:focus-within .nav-ddmenu{opacity:1;pointer-events:all;transform:translate(-50%) translateY(0)}
.nav-dditem{display:block;padding:10px 14px;font-size:13px;color:var(--muted);text-decoration:none;border-radius:8px;transition:all .15s;white-space:nowrap;min-height:24px}
.nav-dditem:hover{background:rgba(201,168,76,.08);color:var(--gold)}
.nav-dditem-lead{color:var(--gold-light);font-weight:600;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:12px}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);padding:10px 20px;border-radius:9px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .25s,box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,168,76,.28)}
.nav-back{font-size:13px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:101}
.nav-burger span{width:22px;height:2px;background:var(--gold);border-radius:2px;transition:transform .25s,opacity .25s}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobilemenu{position:fixed;inset:0;background:var(--navy);display:none;flex-direction:column;padding:100px 26px 30px;gap:2px;z-index:99;overflow-y:auto}
body.nav-open .nav-mobilemenu{display:flex}
body.nav-open{overflow:hidden}
.nav-mobilemenu a{padding:15px 8px;color:var(--text);text-decoration:none;font-size:17px;border-bottom:1px solid var(--border)}
.nav-mobilemenu a.active{color:var(--gold)}
.mm-gruppe{padding:22px 8px 6px;color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.nav-mobilemenu .mm-cta{margin-top:20px;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);text-align:center;border-radius:9px;border-bottom:none;font-weight:600}
/* Sechs Punkte statt fuenf: die Leiste verdichtet sich stufenweise, bevor das
   Mobilmenue uebernimmt. Ohne diese Stufen ueberlappen Menue und Knopf
   zwischen 961 und 1240 px. Befund 13.09.2026. */
@media (max-width:1240px){nav{padding:0 32px}.nav-center{gap:20px}}
@media (max-width:1100px){nav{padding:0 24px}.nav-center{gap:14px}.nav-link,.nav-ddbtn{font-size:12.5px}}
@media (max-width:1000px){nav{padding:0 18px}.nav-center{gap:10px}.nav-link,.nav-ddbtn{font-size:12px;letter-spacing:0}.nav-cta{padding:9px 14px}}
@media (max-width:960px){nav{padding:0 20px}.nav-center{display:none}.nav-burger{display:flex}.nav-right .nav-cta{display:none}}
/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--white);font-weight:700;line-height:1.08;overflow-wrap:break-word}
/* Lange Komposita ("Wirtschaftlichkeitsberechnung") dehnen auf 320-px-Geraeten sonst
   das gesamte Layout, weil das Wort breiter ist als der Bildschirm. Befund 12.09.2026. */
@media (max-width:460px){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}.eyebrow{letter-spacing:1.5px;font-size:10.5px;gap:9px}.eyebrow:before{width:22px}.eyebrow,.n,.stat span,dt,th,td,.karte h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}}
h1{font-size:clamp(38px,4.35vw,56px);line-height:1.02;letter-spacing:-.5px;margin-bottom:26px}
h2{font-size:clamp(32px,3.8vw,52px);margin:14px 0 18px}
h3{font-size:24px}
h1 em,h2 em,h3 em,.quote em{font-style:italic;color:var(--gold);font-weight:600}
.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px;overflow-wrap:break-word;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.eyebrow:before{content:"";width:34px;height:1px;background:var(--gold);flex-shrink:0}
.eyebrow.mitte{justify-content:center}.eyebrow.mitte:after{content:"";width:34px;height:1px;background:var(--gold)}
.lead{font-size:17.5px;font-weight:300;color:var(--text);max-width:600px;line-height:1.8;margin-bottom:36px}
.sub{font-size:16.5px;font-weight:300;max-width:640px;color:var(--muted)}
/* Zeile 1 der Hero-Ueberschrift steht immer fuer sich: der Umbruch faellt damit
   auf das Komma bzw. den Satzpunkt, nicht mitten in den goldenen Teilsatz. */
/* Zweispaltiger Hero (index): schmalere Textspalte, kleinere Zeile,
   damit der Satz vor dem Komma in eine Zeile passt. */
.hero-in:not(.eins) h1{font-size:clamp(32px,3.35vw,44px)}
h1 .h1-top,h1 .line{display:block;text-wrap:balance}
h1 em{display:inline-block;text-wrap:balance}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity .6s}
.split.on .w>span{transform:translateY(0);opacity:1}
/* ---------- Knöpfe ---------- */
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:11px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer;border:0;font-family:var(--sans);line-height:1.2}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(201,168,76,.3)}
.btn-line{border:1px solid rgba(201,168,76,.45);color:var(--gold-light);background:transparent}
.btn-line:hover{background:rgba(201,168,76,.1);transform:translateY(-3px)}
.btn .arr{transition:transform .25s}.btn:hover .arr{transform:translateX(5px)}
.more{color:var(--gold-light);text-decoration:none;font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center;min-height:28px;padding:2px 0}
p a,li a,.msf-disclaimer a,.klein a{display:inline-block;padding:3px 0;margin:-3px 0}
.more .arr{transition:transform .25s}.more:hover .arr{transform:translateX(5px)}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;padding:120px 32px 60px;overflow:hidden;display:flex;align-items:center}
.hero-in{max-width:1180px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:48px}
.hero-in.eins{grid-template-columns:1fr;max-width:820px}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg img{width:100%;height:120%;object-fit:cover;opacity:1;transform:scale(1.08);animation:zoomIn 2.4s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,48,.92) 0%,rgba(15,30,48,.7) 38%,rgba(15,30,48,.3) 68%,rgba(15,30,48,.08) 100%),linear-gradient(180deg,rgba(15,30,48,.1),rgba(15,30,48,.15) 70%,rgba(15,30,48,1) 100%)}
.hero-bg.rechts:after{background:linear-gradient(270deg,rgba(15,30,48,.92) 0%,rgba(15,30,48,.7) 38%,rgba(15,30,48,.3) 68%,rgba(15,30,48,.08) 100%),linear-gradient(180deg,rgba(15,30,48,.1),rgba(15,30,48,.15) 70%,rgba(15,30,48,1) 100%)}
.hero-in.eins.rechts{margin-right:0;margin-left:auto;justify-items:end}
.hero-in.eins.rechts>div{max-width:560px}.hero-in.eins.rechts .lead{font-size:16.5px}
.hero-bg.mitte:after{background:linear-gradient(180deg,rgba(15,30,48,.45),rgba(15,30,48,.6) 55%,var(--navy) 100%)}
@keyframes zoomIn{to{transform:scale(1)}}
.hero .lead strong{color:var(--white)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(201,168,76,.3);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(23,51,90,.72),rgba(15,30,48,.82));backdrop-filter:blur(8px);max-width:660px;margin-top:44px;box-shadow:0 18px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(201,168,76,.18)}
.stat{padding:24px 14px;border-right:1px solid rgba(201,168,76,.22);text-align:center}
.stat:last-child{border-right:0}
.stat b{font-family:var(--serif);font-size:clamp(34px,3.2vw,44px);color:var(--gold);line-height:1.12;padding-bottom:.08em;display:block;margin-bottom:8px;font-weight:700;background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,#B8963F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.9px;display:block;line-height:1.35;text-wrap:balance}
/* Kennzahlenband: die drei Felder bauen sich nacheinander auf, ein Lichtstreifen
   laeuft einmal ueber das Band, die fertige Zahl rastet kurz ein. */
.stats{position:relative}
.stats:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75;pointer-events:none;z-index:2}
.stats.zaehlt:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(201,168,76,.22) 50%,transparent 65%);transform:translateX(-120%);animation:bandlicht 1.9s .35s cubic-bezier(.4,0,.2,1) both}
@keyframes bandlicht{to{transform:translateX(120%)}}
.stats.zaehlt .stat{animation:statauf .7s cubic-bezier(.2,.8,.2,1) both}
.stats.zaehlt .stat:nth-child(2){animation-delay:.12s}
.stats.zaehlt .stat:nth-child(3){animation-delay:.24s}
.stats.zaehlt .stat:nth-child(4){animation-delay:.36s}
@keyframes statauf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stat b{transition:transform .5s cubic-bezier(.2,.8,.2,1),text-shadow .5s}
.stat b.fertig{animation:zahlrastet .55s cubic-bezier(.2,.9,.2,1)}
@keyframes zahlrastet{40%{transform:scale(1.13);filter:drop-shadow(0 0 18px rgba(201,168,76,.6))}to{transform:none;filter:none}}
.stat span{transition:color .3s}
.stat{position:relative;transition:background .3s}
.stat:hover{background:rgba(201,168,76,.06)}
.stat:hover b{transform:translateY(-2px);filter:drop-shadow(0 0 14px rgba(201,168,76,.45))}
.stat:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.stat:hover:after{transform:scaleX(1)}
.stats.zaehlt .stat{border-right-color:transparent;animation:statauf .7s cubic-bezier(.2,.8,.2,1) both,statlinie .6s .5s ease both}
@keyframes statlinie{to{border-right-color:var(--line)}}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:line 1.8s ease-in-out infinite;display:block}
@keyframes line{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Hero ohne Foto */
.hero.klein{min-height:0;padding:150px 32px 90px}
.hero.klein:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 30%,rgba(201,168,76,.16),transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(36,68,111,.6),transparent 60%)}
.hero.klein .lead{max-width:760px}
a.weg{text-decoration:none;display:block;color:inherit}
a.weg:hover{transform:translateY(-4px)}
.weg .badge{position:absolute;top:22px;left:40px;font-size:10px;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);padding:5px 10px;border-radius:999px;font-weight:700}
.weg.hat-badge{padding-top:64px}
.karte .more{margin-top:auto}
/* Werkzeugkarten auf der Windkraftseite: die ganze Karte ist der Verweis. */
a.karte{color:inherit}
a.karte:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(23,51,90,.55)}
a.karte:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a.karte h3{color:var(--white)}
a.karte .min{color:var(--gold)}
.wz-mehr{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.wz-mehr a{border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:13.5px;color:var(--muted);text-decoration:none;transition:all .2s}
.wz-mehr a:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-faint)}
.wz-mehr a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bildtext{font-size:12.5px;color:var(--faint);text-align:center;margin-top:14px}
.note{border:1px solid var(--line);border-radius:14px;padding:18px 22px;font-size:13.5px;color:var(--muted);background:rgba(15,30,48,.4);margin-top:26px}
/* Tabelle */
.tabelle-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:rgba(23,51,90,.3)}
/* Schmaler Scrollbalken im Farbklang. Der graue Standardbalken des Browsers sah
   unter breiten Tabellen aus wie ein Bedienelement. Befund 13.09.2026. */
.tabelle-wrap{scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.tabelle-wrap::-webkit-scrollbar{height:6px}
.tabelle-wrap::-webkit-scrollbar-track{background:transparent}
.tabelle-wrap::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px}
.tabelle{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tabelle th,.tabelle td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tabelle th{font-family:var(--serif);font-size:20px;color:var(--gold);font-weight:700}
.tabelle td:first-child{color:var(--white);font-weight:600;width:22%}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td{color:var(--muted);font-weight:300}
.abzeichen{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,168,76,.4);border-radius:999px;padding:3px 10px;vertical-align:middle;margin-left:8px;font-weight:600}
/* Chips */
.field{position:relative;height:575px;border:1px solid var(--line);border-radius:26px;background:radial-gradient(ellipse at 30% 20%,rgba(201,168,76,.10),transparent 55%),rgba(23,51,90,.35);backdrop-filter:blur(4px);overflow:hidden;touch-action:none}
.field:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.field-h{position:absolute;top:22px;left:26px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);z-index:2}
.field-h small{display:block;letter-spacing:.3px;text-transform:none;color:var(--faint);font-size:12px;margin-top:6px}
/* Der Hinweis richtet sich nach der Darstellung: Ziehen gibt es nur dort, wo die
   Chips frei liegen. Unterhalb 600 px stehen sie in Reihen. Befund 14.09.2026. */
.nur-tippen{display:none}
.chip{position:absolute;padding:13px 22px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--navy);background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:0 14px 30px rgba(0,0,0,.35);cursor:grab;user-select:none;-webkit-user-select:none;white-space:nowrap;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:box-shadow .2s,transform .24s cubic-bezier(.2,.8,.2,1);text-decoration:none;will-change:transform}
.chip.alt{background:rgba(240,234,216,.09);color:var(--white);border:1px solid rgba(201,168,76,.35);backdrop-filter:blur(6px)}
/* Gold = Beratung, Navy = Fastlane, Gold-Rand = wahlweise (siehe fastlane.html). */
.chip.beides{border:1.5px dashed var(--gold);background:rgba(201,168,76,.14)}
.field-legende{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;letter-spacing:.3px;text-transform:none}
.field-legende .lg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}
.field-legende .lg:before{content:"";width:14px;height:14px;border-radius:999px;flex:0 0 auto}
.field-legende .lg-gold:before{background:linear-gradient(135deg,var(--gold-light),var(--gold))}
.field-legende .lg-navy:before{background:rgba(240,234,216,.09);border:1px solid rgba(201,168,76,.35)}
.field-legende .lg-beides:before{background:rgba(201,168,76,.14);border:1.5px dashed var(--gold)}
.chip.drag{cursor:grabbing;box-shadow:0 24px 50px rgba(0,0,0,.45);z-index:5;transition:box-shadow .2s}
.chip.weicht{z-index:4}
.chip.in{animation:drop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes drop{from{opacity:0;transform:translate(var(--x),calc(var(--y) - 140px)) rotate(calc(var(--r) - 20deg))}}
/* ---------- Laufband ---------- */
.trust{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(19,43,76,.6);overflow:hidden}
.trust .t{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--faint);text-align:center;margin-bottom:22px}
.track{display:flex;gap:26px;width:max-content;animation:scroll 140s linear infinite}
.track:hover{animation-play-state:paused}
.pill{background:var(--papier);border-radius:11px;padding:12px 22px;height:54px;display:flex;align-items:center;flex-shrink:0;transition:transform .3s}
.pill:hover{transform:scale(1.06)}
.pill img{max-height:26px;max-width:140px;width:auto;height:auto}
.pill span{display:none}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ---------- Abschnitte ---------- */
.sec{padding:120px 0}
.sec.eng{padding-top:0}
.sec.hell{background:var(--papier);color:var(--ink2)}
.sec.hell h2,.sec.hell h3,.sec.hell strong{color:var(--ink)}
.sec.hell .sub,.sec.hell p{color:var(--ink2)}
.sec-h{max-width:760px;margin-bottom:56px}
.sec-h.mitte{margin:0 auto 56px;text-align:center}
.sec-h.mitte .sub{margin:0 auto}
.rv-aktiv .rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv-aktiv .rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}
/* Bild und Text nebeneinander */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.paar>*,.kontakt>*,.person>*,.hero-in>*{min-width:0}
.paar.flip .bild{order:-1}
.bild{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.bild.hoch{aspect-ratio:3/4}
.bild.quer{aspect-ratio:16/10}
.bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.paar:hover .bild img{transform:scale(1.05)}
.bild .marke{position:absolute;left:22px;bottom:22px;background:rgba(15,30,48,.82);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.bild .marke b{font-family:var(--serif);font-size:30px;color:var(--gold);display:block;line-height:1}
.bild .marke span{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.merkmale{list-style:none;margin-top:30px;display:grid;gap:18px}
.merkmale li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.merkmale .ic{width:44px;height:44px;border-radius:12px;background:rgba(201,168,76,.12);border:1px solid var(--line);display:grid;place-items:center}
.merkmale .ic svg{width:20px;height:20px;stroke:var(--gold)}
.merkmale b{display:block;color:var(--white);font-size:15.5px;margin-bottom:4px;font-weight:600}
.merkmale p{font-size:14.5px;font-weight:300;color:var(--muted)}
/* Aussage */
.aussage{padding:110px 32px;text-align:center;position:relative;overflow:hidden}
.aussage:before{content:"“";position:absolute;left:50%;top:30px;transform:translateX(-50%);font-family:var(--serif);font-size:200px;line-height:1;color:rgba(201,168,76,.12)}
.aussage blockquote{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);line-height:1.2;color:var(--white);max-width:900px;margin:0 auto 20px;font-weight:600;position:relative}
.aussage .von{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
/* Zwei Wege / Karten mit Nummer */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.weg{position:relative;padding:44px 40px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(36,68,111,.55),rgba(23,51,90,.35));overflow:hidden;transition:transform .35s,border-color .35s}
.weg:hover{border-color:rgba(201,168,76,.5)}
.weg .n{font-family:var(--serif);font-size:70px;line-height:1;color:rgba(201,168,76,.18);position:absolute;top:22px;right:30px;font-weight:700}
.weg h3{font-size:30px;margin-bottom:6px}
.weg .tag{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.weg p{font-size:15.5px;font-weight:300;margin-bottom:22px}
.weg ul{list-style:none;margin-bottom:28px}
.weg li{padding:9px 0;border-bottom:1px solid rgba(201,168,76,.12);font-size:14.5px;display:flex;gap:12px}
.weg li:before{content:"◆";color:var(--gold);font-size:9px;margin-top:8px}
.weg.plus{border-color:rgba(201,168,76,.45);background:linear-gradient(160deg,rgba(201,168,76,.14),rgba(23,51,90,.35))}
.weg.plus li:before{content:"✓";font-size:13px;margin-top:4px}
.weg.minus li:before{content:"–";color:var(--faint);font-size:14px;margin-top:2px}
.preisblock ul{list-style:none;margin:18px 0}
.preisblock li{padding:9px 0 9px 26px;position:relative;font-size:15px;font-weight:300;border-bottom:1px solid rgba(201,168,76,.12)}
.preisblock li:before{content:"◆";position:absolute;left:0;top:14px;color:var(--gold);font-size:9px}
.preisblock .klein{font-size:13.5px;color:var(--faint)}
/* Bereiche: Karten im Raster */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.karte{position:relative;padding:34px 30px;border-radius:20px;border:1px solid var(--line);background:rgba(23,51,90,.35);transition:transform .35s,background .35s,border-color .35s;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.karte:hover{transform:translateY(-6px);background:rgba(36,68,111,.5);border-color:rgba(201,168,76,.4)}
.karte .n{font-family:var(--serif);font-size:44px;color:var(--gold);line-height:1;font-weight:700}
/* Cormorant Garamond setzt standardmaessig Mediaevalziffern: 3, 4, 5, 7 und 9
   haben Unterlaengen. Bei enger Zeilenhoehe ragten sie aus der Zeilenbox und der
   Verlauf von .stat b (background-clip:text) faerbte sie nicht mehr, sie wirkten
   unten abgeschnitten. Kennzahlen tragen deshalb Versalziffern, gleich hoch und
   gleich breit. Die Schrift bringt lnum und tnum mit. Befund 13.09.2026. */
.stat b,.karte .n,.rp-counters .z-fest,.kapitel .nr,.hstat-num,.chart-val,.z b,.z-fest{
 font-variant-numeric:lining-nums tabular-nums;
 font-feature-settings:"lnum" 1,"tnum" 1}
.karte .n,.kapitel .nr{line-height:1.1}
.karte h3{font-size:22px;line-height:1.15}
.karte p{font-size:14.5px;font-weight:300;color:var(--muted);flex:1}
.karte .min{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.karte p a{color:var(--gold-light)}
.karte.foto{padding:0;min-height:420px;overflow:hidden;justify-content:flex-end}
.karte.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);filter:saturate(.85)}
.karte.foto:hover img{transform:scale(1.08)}
.karte.foto .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,30,48,0) 40%,rgba(15,30,48,.94) 100%)}
.karte.foto .tx{position:relative;padding:28px}
.karte.foto .k{font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.karte.foto h3{font-size:27px}
.karte.foto p{margin-top:8px}
.karte.foto .min{border:0;padding:0;margin-top:10px}
.hinweis{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 16px 16px 0;padding:22px 26px;background:rgba(201,168,76,.06);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:26px}
.hinweis b{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:6px}
.hinweis p{font-size:14.5px;font-weight:300;max-width:720px}
/* Prozess */
.prozess{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.prozess>*{min-width:0}
.prozess .bild{position:sticky;top:100px}
.prozess .schritte{grid-template-columns:1fr 1fr}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.schritt{padding:34px 30px;border-radius:20px;border:1px solid var(--line);background:rgba(23,51,90,.35);position:relative;transition:transform .35s,background .35s}
.schritt:hover{transform:translateY(-6px);background:rgba(36,68,111,.5)}
.schritt b.n{font-family:var(--serif);font-size:44px;color:var(--gold);line-height:1;display:block;margin-bottom:14px;font-weight:700}
.schritt h3{font-size:19px;margin-bottom:4px;font-family:var(--sans);font-weight:600}
.schritt .zeit{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px;display:block}
.schritt p{font-size:14.5px;font-weight:300;color:var(--muted);margin-bottom:12px}
.schritt ul{list-style:none;font-size:13.5px;color:var(--text)}
.schritt li{padding:5px 0 5px 18px;position:relative}
.schritt li:before{content:"";position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
/* Fragen */
.fragen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fragen details{border:1px solid var(--line);border-radius:16px;background:rgba(23,51,90,.3);padding:0 24px;transition:background .3s}
.fragen details[open]{background:rgba(36,68,111,.45)}
.fragen summary{list-style:none;cursor:pointer;padding:20px 0;font-weight:600;color:var(--white);font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:after{content:"+";font-family:var(--serif);font-size:28px;color:var(--gold);line-height:1;transition:transform .3s}
.fragen details[open] summary:after{transform:rotate(45deg)}
.fragen p{padding:0 0 22px;font-size:15px;font-weight:300;color:var(--muted)}
.fragen p a{color:var(--gold-light)}
/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.z{padding:40px 24px;text-align:center;border-right:1px solid var(--line);background:rgba(15,30,48,.4)}
.z:last-child{border-right:0}
.z b{font-family:var(--serif);font-size:64px;color:var(--gold);line-height:1;display:block;font-weight:700}
.z span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:block;margin-top:10px}
/* Person */
.person{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.portrait{position:relative}
.portrait img{border-radius:22px;width:100%}
.portrait:after{content:"";position:absolute;inset:-14px auto auto -14px;width:110px;height:110px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);border-radius:22px 0 0 0}
.quote{font-family:var(--serif);font-size:clamp(28px,3vw,40px);line-height:1.2;color:var(--white);font-weight:600;margin-bottom:26px}
.person p{font-size:15.5px;font-weight:300;margin-bottom:16px}
.rolle{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
/* Kontakt und Formular */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.kontakt .wege-kurz{display:grid;gap:12px;margin:26px 0}
.kontakt .wege-kurz a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--white);font-size:15px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;transition:background .25s,transform .25s}
.kontakt .wege-kurz a:hover{background:rgba(201,168,76,.08);transform:translateX(4px)}
.kontakt .wege-kurz svg{width:18px;height:18px;flex-shrink:0}
.kontakt .klein{font-size:13.5px;color:var(--faint)}
.kontakt .klein a{color:var(--gold-light)}
.kontakt .kopf{display:flex;gap:18px;align-items:center;margin-bottom:22px}
.kontakt .kopf img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.formular{background:rgba(23,51,90,.35);border:1px solid var(--line);border-radius:24px;padding:36px}
.formular .reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formular input,.formular select,.formular textarea{width:100%;background:rgba(15,30,48,.6);border:1px solid var(--border);border-radius:10px;color:var(--white);font-family:var(--sans);font-size:15px;padding:14px 16px;margin-bottom:14px;transition:border-color .2s}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--gold)}
.formular input::placeholder,.formular textarea::placeholder{color:var(--faint)}
.formular textarea{min-height:130px;resize:vertical}
.formular select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.formular label{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 20px;line-height:1.55}
.formular label input{width:auto;margin:3px 0 0}
.formular label a{color:var(--gold-light);display:inline-block;padding:4px 0;margin:-4px 0}
.formular .btn{width:100%;justify-content:center}
.formular .note{font-size:12px;color:var(--faint);margin-top:12px;text-align:center}
.formular input[name=firma_web]{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.formular .feld>label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.formular .req{color:var(--gold)}
.formular .kopfzeile{margin-bottom:22px}
.formular .kopfzeile h3{font-size:28px}
.formular .kopfzeile p{font-size:13.5px;color:var(--faint);margin-top:4px}
.infozeilen{list-style:none;display:grid;gap:10px;margin:22px 0}
.infozeilen li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:var(--text)}
.infozeilen svg{width:16px;height:16px;stroke:var(--gold);flex-shrink:0}
.hero-karte{border:1px solid var(--line);border-radius:26px;background:rgba(23,51,90,.4);backdrop-filter:blur(6px);padding:36px}
.hero-karte .t{font-family:var(--serif);font-size:26px;margin-bottom:4px;color:var(--white);font-weight:700;line-height:1.1}
.hero-karte .sub{font-size:14px;margin-bottom:22px}
.hero-karte ol{list-style:none;display:grid;gap:16px}
.hero-karte li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;font-size:14.5px;font-weight:300;color:var(--muted)}
/* Cormorant sitzt in seiner Zeilenbox hoch; ohne die Korrektur steht die Ziffer
   sichtbar ueber der Kreismitte. Befund 13.09.2026. */
.hero-karte li b.n{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:18px;line-height:1;padding-bottom:2px;font-feature-settings:"lnum" 1;font-variant-numeric:lining-nums}
.hero-karte li strong{color:var(--white)}
/* PDF-Karte, Checkliste, Glossarliste (Praxisfinanzierung) */
.pdf{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.pdf-deckel{aspect-ratio:3/4;border-radius:14px;background:linear-gradient(160deg,#24446F,#0F1E30);border:1px solid rgba(201,168,76,.45);padding:34px 28px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-2deg)}
.pdf-deckel .e{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
.pdf-deckel .t{font-family:var(--serif);font-size:34px;line-height:1.05;color:var(--white);font-weight:700}
.pdf-deckel .m{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:20px}
.punkte{list-style:none;margin:22px 0 30px;display:grid;gap:12px}
.punkte li{padding-left:28px;position:relative;font-size:15.5px;font-weight:300}
.punkte li:before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.checkliste{border:1px solid var(--line);border-radius:24px;padding:36px;background:rgba(23,51,90,.3)}
.fortschritt{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.balken{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.balken>div{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .4s}
.fortschritt span{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.gruppen{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.gruppe b{display:block;font-family:var(--serif);font-size:21px;color:var(--white);margin-bottom:10px;font-weight:700}
.pruef{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(201,168,76,.1);font-size:14.5px;font-weight:300;cursor:pointer;color:var(--text)}
.pruef input{width:18px;height:18px;margin-top:3px;accent-color:var(--gold);flex-shrink:0}
.pruef input:checked+span{color:var(--faint);text-decoration:line-through}
.begriffe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.begriffe a{display:flex;gap:10px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;font-size:14.5px;transition:background .25s,transform .25s}
.begriffe a:hover{background:rgba(201,168,76,.08);transform:translateX(4px)}
.begriffe a:before{content:"→";color:var(--gold)}
/* Windkraft: Kennzahlen, Diagramm, Mehrschritt-Formular */
.stats.vier{grid-template-columns:repeat(4,1fr);max-width:900px}
/* .stats hat keine seitliche Aussenmarge: im linksbuendigen Hero richtig, in einem
   mittig gesetzten Abschnitt sitzt der Block sonst um 108 px daneben. Befund 13.09.2026. */
.stats.mitte{margin-left:auto;margin-right:auto}
.stats.vier .stat b{font-size:clamp(28px,2.4vw,34px)}
.stats.vier .stat{padding:20px 14px}
.stats.vier .stat span{font-size:10.5px;letter-spacing:1px}
.gruen{--gold:#3DBF8A;--gold-light:#6FD6A8}
.rp-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 0 56px}
.rp-counters>div{padding:32px 28px;border:1px solid var(--line);border-radius:20px;background:rgba(23,51,90,.35);text-align:center}
.rp-counters .l{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.rp-counters .z-fest{font-family:var(--serif);font-size:56px;line-height:1;color:var(--white);font-weight:700;margin-bottom:10px}
.rp-counters .u{font-size:13.5px;color:var(--muted);font-weight:300}
.diagramm{border:1px solid var(--line);border-radius:24px;padding:36px;background:rgba(15,30,48,.5)}
.diagramm .kopf{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.diagramm .kopf b{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.legende{display:flex;gap:22px;font-size:12.5px;color:var(--muted)}
.legende span{display:flex;align-items:center;gap:8px}
.legende i{width:14px;height:14px;border-radius:3px;display:inline-block;background:rgba(184,206,221,.35)}
.legende i.n{background:linear-gradient(180deg,var(--gold-light),var(--gold))}
#rp-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.saeulen{display:flex;gap:18px;align-items:flex-end;height:230px;justify-content:center;border-bottom:1px solid var(--line);padding-bottom:0}
.saeule{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:72px}
.chart-val{font-size:12.5px;color:var(--white);margin-bottom:8px;opacity:0;transition:opacity .6s;white-space:nowrap}
.chart-bar{width:100%;height:0;border-radius:8px 8px 0 0;background:rgba(184,206,221,.35)}
.saeule.n .chart-bar{background:linear-gradient(180deg,var(--gold-light),var(--gold))}
.diagramm .titel{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:16px}
.chart-badge{display:block;text-align:center;font-family:var(--serif);font-size:28px;color:var(--gold);font-weight:700;margin-top:6px;opacity:0;transition:opacity .6s}
.diagramm .quelle{font-size:11.5px;color:var(--faint);margin-top:26px;text-align:center}
.msf{background:rgba(23,51,90,.35);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.msf-header{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.msf-title{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:600}
.msf-step-indicator{display:flex;gap:6px}
.msf-dot{width:8px;height:8px;border-radius:50%;background:rgba(184,206,221,.25);transition:background .3s}
.msf-dot.active{background:var(--gold)}.msf-dot.done{background:#3DBF8A}
.msf-body{padding:28px}
.msf-step{display:none}.msf-step.active{display:block}
.msf-question{font-family:var(--serif);font-size:24px;color:var(--white);margin-bottom:6px;font-weight:700}
.msf-hint{font-size:13.5px;color:var(--faint);margin-bottom:22px}
.msf-options{display:flex;flex-direction:column;gap:10px}
.msf-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s;color:var(--text)}
.msf-option:hover,.msf-option.selected{border-color:var(--gold);background:rgba(201,168,76,.08)}
.msf-option input[type=radio]{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}
.msf-option-label{font-size:14.5px}
.msf-input,.msf-select{width:100%;background:rgba(15,30,48,.6);border:1px solid var(--border);border-radius:10px;color:var(--white);font-family:var(--sans);font-size:15px;padding:13px 16px;margin-bottom:12px;transition:border-color .2s}
.msf-input:focus,.msf-select:focus{outline:none;border-color:var(--gold)}
.msf-input::placeholder{color:var(--faint)}
.msf-select option{background:var(--navy-2);color:var(--white)}
.msf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msf .frage{font-size:13px;color:var(--muted);margin:10px 0 10px}
.msf .haekchen{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.msf .haekchen label{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--text);cursor:pointer}
.msf .haekchen input{accent-color:var(--gold);width:16px;height:16px}
.msf-footer{padding:20px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.msf-btn-back{background:none;border:1px solid var(--border);color:var(--muted);padding:11px 20px;border-radius:9px;font-family:var(--sans);font-size:13.5px;cursor:pointer;transition:all .2s;min-height:24px}
.msf-btn-back:hover{border-color:var(--gold);color:var(--gold)}
.msf-btn-next{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);padding:13px 24px;border:none;border-radius:9px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.msf-btn-next:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,168,76,.3)}
.msf-btn-next:disabled{opacity:.6;cursor:wait;transform:none}
.msf-disclaimer{font-size:11.5px;color:var(--faint);line-height:1.6;padding:16px 28px;border-top:1px solid var(--line);text-align:center}
.msf-disclaimer a{color:var(--gold-light)}
#msf-error{display:none;margin:0 28px 18px;padding:12px 16px;border:1px solid rgba(220,80,80,.5);border-radius:10px;color:#F0B0B0;font-size:13.5px;background:rgba(220,80,80,.1)}
#msf-error a{color:var(--gold-light)}
.msf-erfolg{text-align:center;padding:20px 0}
.msf-erfolg .h{width:56px;height:56px;border-radius:50%;background:rgba(61,191,138,.15);color:#3DBF8A;display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
.msf-erfolg .t{font-family:var(--serif);font-size:26px;color:var(--white);font-weight:700;margin-bottom:8px}
.msf-erfolg p{font-size:14.5px;color:var(--muted);margin-bottom:10px}
.msf-erfolg a{color:var(--gold-light)}
.merkmale.gruen .ic svg{stroke:#3DBF8A}
/* Glossar (wissen.html) auf hellem Grund */
.suche{display:flex;align-items:center;gap:12px;background:rgba(23,51,90,.55);border:1px solid var(--line);border-radius:14px;padding:14px 20px;max-width:560px;transition:border-color .2s}
.such-status{margin-top:12px;font-size:14px;color:var(--gold-light);font-weight:500;max-width:640px}
.such-status.leer{color:var(--faint);font-weight:400}
.suche:focus-within{border-color:var(--gold)}
.suche input{flex:1;background:none;border:none;outline:none;color:var(--white);font-family:var(--sans);font-size:16px;min-width:0}
.suche input::placeholder{color:var(--faint)}
.suche svg{color:var(--gold);flex-shrink:0}
.glossar{padding:56px 0 100px;--ink3:#406290;--card:#fff;--l:#E1E4E6;--ls:#CBD1D4}
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 0 26px}
.filter-label{font-size:11px;letter-spacing:1.5px;color:var(--ink3);text-transform:uppercase;margin-right:4px}
.fchip{padding:8px 16px;border-radius:20px;border:1px solid var(--ls);background:var(--card);color:var(--ink2);font-family:var(--sans);font-size:13px;cursor:pointer;transition:all .2s;min-height:32px}
.fchip:hover{border-color:var(--gold-dim);color:var(--ink)}
.fchip.on{background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.5);color:#7a5e1c;font-weight:600}
.count-label{font-size:12px;color:var(--ink3);margin-bottom:20px;letter-spacing:.5px}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kachel{background:var(--card);border:1px solid var(--l);border-radius:16px;padding:26px 24px 36px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(22,35,47,.04),0 8px 24px rgba(22,35,47,.05)}
.kachel:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);transform:scaleX(0);transition:transform .3s}
.kachel:hover{border-color:rgba(201,168,76,.45);transform:translateY(-3px);box-shadow:0 10px 32px rgba(22,35,47,.1)}
.kachel:hover:after{transform:scaleX(1)}
.k-kat{font-size:10px;letter-spacing:2px;color:var(--gold-dim);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.k-kat:before{content:"";width:12px;height:1px;background:var(--gold-dim)}
.k-title{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);margin:0 0 9px;line-height:1.2}
.k-a{color:inherit;text-decoration:none;display:inline-block;min-height:24px;padding:2px 0}
.k-a:hover{color:var(--gold-dim)}
.k-desc{font-size:13.5px;color:var(--ink2);line-height:1.65;font-weight:400}
.k-arrow{position:absolute;bottom:18px;right:20px;color:var(--gold-dim);font-size:18px;transition:transform .25s}
.kachel:hover .k-arrow{transform:translateX(4px)}
.empty-state{grid-column:1/-1;text-align:center;padding:36px 20px;color:var(--ink2)}
.overlay{position:fixed;inset:0;background:rgba(15,30,48,.55);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.overlay.on{opacity:1;pointer-events:all}
.panel{position:fixed;top:0;right:0;width:640px;max-width:100%;height:100vh;background:#F2F4F5;border-left:1px solid #E1E4E6;z-index:201;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.2,1);overflow-y:auto;display:flex;flex-direction:column;color:var(--ink2)}
.panel.on{transform:translateX(0)}
.panel-nav{padding:18px 28px;border-bottom:1px solid #E1E4E6;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#F2F4F5;z-index:2}
.p-back{font-size:13px;color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:7px;transition:color .2s;background:none;border:none;font-family:inherit;min-height:28px;padding:4px 0}
.p-back:hover{color:var(--gold-dim)}
.p-close{width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #CBD1D4;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);transition:all .2s}
.p-close:hover{border-color:var(--gold-dim);color:var(--ink)}
.panel-body{padding:40px 36px 44px;flex:1}
.p-eyebrow{font-size:10.5px;letter-spacing:2px;color:var(--gold-dim);text-transform:uppercase;margin-bottom:12px}
.panel .p-title{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--ink);line-height:1.1;margin-bottom:16px}
.p-lead{font-size:15.5px;color:var(--ink2);line-height:1.82;margin-bottom:28px;border-bottom:1px solid #E1E4E6;padding-bottom:28px}
.p-h2{font-family:var(--serif);font-size:22px;color:var(--ink);margin:24px 0 10px;font-weight:700}
.p-p{font-size:14.5px;color:var(--ink2);line-height:1.85;margin-bottom:14px}
.p-ul{padding-left:0;list-style:none;margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.p-ul li{font-size:14.5px;color:var(--ink2);line-height:1.7;display:flex;gap:10px;align-items:flex-start}
.p-ul li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-dim);flex-shrink:0;margin-top:8px}
.p-box{background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.25);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;padding:16px 20px;margin:22px 0}
.p-box p{font-size:13.5px;color:var(--ink2);line-height:1.72;margin:0}
.p-cta{margin-top:36px;padding-top:28px;border-top:1px solid #E1E4E6;text-align:center}
.p-cta-text{font-size:14px;color:var(--ink2);margin-bottom:18px;line-height:1.65}
.p-cta-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy);padding:13px 28px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none;transition:all .2s}
.p-cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,168,76,.3)}
/* Rechtstexte (Impressum, Datenschutz) auf hellem Grund */
.rechtstext{max-width:820px;margin:0 auto;font-size:15.5px;line-height:1.8}
.rechtstext h2{font-size:clamp(24px,2.6vw,32px);margin:44px 0 12px;color:var(--ink)}
.rechtstext h3{font-size:19px;font-family:var(--sans);font-weight:600;color:var(--ink);margin:26px 0 8px}
.rechtstext p{margin-bottom:12px;color:var(--ink2)}
.rechtstext a{color:#7a5e1c;display:inline-block;padding:3px 0;margin:-3px 0}
.rechtstext ul{padding-left:22px;margin-bottom:14px}
.rechtstext li{margin-bottom:6px}
.rechtstext .datablock{background:#fff;border:1px solid #E1E4E6;border-radius:12px;padding:16px 20px;margin:8px 0 16px}
.rechtstext .datablock p{margin:0 0 4px}
.rechtstext .muted-note{font-size:13.5px;color:var(--ink3)}
.rechtstext table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:14px;background:#fff;border:1px solid #E1E4E6;border-radius:12px;overflow:hidden}
.rechtstext td{padding:12px 16px;border-bottom:1px solid #E1E4E6;vertical-align:top}
.rechtstext td:first-child{width:34%;font-weight:600;color:var(--ink)}
.rechtstext tr:last-child td{border-bottom:0}
.rechtstext .intro{display:none}
/* Kapitel (Über uns) */
.kapitel{display:grid;grid-template-columns:200px 1fr;gap:50px;padding:70px 0;border-top:1px solid var(--line)}
.kapitel:first-child{border-top:0}
.kapitel .bild{margin-top:26px;max-width:720px}
/* Die Kapitelziffer ist reine Dekoration und liegt bewusst weit unter dem Textkontrast.
   Als CSS-Inhalt statt Textknoten ist sie fuer Vorlesesoftware und Pruefwerkzeuge kein Text. */
.kapitel .nr{font-family:var(--serif);font-size:96px;line-height:.9;color:rgba(201,168,76,.22);font-weight:700}
.kapitel .nr:before{content:attr(data-nr)}
.kapitel .tag{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-top:14px}
.kapitel h2{font-size:clamp(28px,3.2vw,44px);margin-top:0}
.kapitel p{font-size:16.5px;font-weight:300;line-height:1.85;margin-bottom:18px;max-width:720px}
.zug{border-left:3px solid var(--gold);padding:8px 0 8px 28px;margin:30px 0 30px;font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--white);font-weight:600;max-width:720px}
.zug em{color:var(--gold);font-style:italic}
/* Aussagen-Raster (Über uns) */
.aussagen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aussagen .a{padding:36px 32px;border-radius:20px;border:1px solid var(--line);background:rgba(23,51,90,.35);transition:transform .35s,background .35s}
.aussagen .a:hover{transform:translateY(-6px);background:rgba(36,68,111,.5)}
.aussagen .a.gross{grid-column:span 2;background:linear-gradient(160deg,rgba(201,168,76,.14),rgba(23,51,90,.35))}
.aussagen .q{font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--white);margin-bottom:14px;font-weight:700}
.aussagen .q em{color:var(--gold);font-style:italic}
.aussagen p{font-size:14.5px;font-weight:300;color:var(--muted)}
/* Preisblock */
.preisblock{border:1px solid var(--line);border-radius:26px;padding:60px;background:linear-gradient(160deg,rgba(36,68,111,.5),rgba(15,30,48,.6));display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.preisblock p{font-size:16px;font-weight:300;margin-bottom:16px}
.preisblock .satz{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.2;color:var(--white);font-weight:600;padding-left:28px;border-left:3px solid var(--gold)}
/* Abschluss */
.final{position:relative;padding:140px 32px;overflow:hidden}
.final .bg{position:absolute;inset:0;z-index:-1}
.final .bg img{width:100%;height:100%;object-fit:cover;opacity:.7}
.final:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--navy) 0%,rgba(15,30,48,.35) 45%,rgba(15,30,48,.55) 70%,var(--navy) 100%)}
.final-in{max-width:1180px;margin:0 auto;display:flex;justify-content:flex-end}
.final-box{max-width:560px}
.final h2{margin:14px 0 22px}
.final .haken{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--muted)}
.final .haken span:before{content:"✓ ";color:var(--gold)}
.final.ohne{padding:120px 32px;background:radial-gradient(ellipse at 50% 0%,rgba(201,168,76,.14),transparent 60%),linear-gradient(180deg,var(--navy),#132B4C)}
.final.ohne:after{display:none}
.final-in.mitte{justify-content:center;text-align:center}
.final-in.mitte .final-box{max-width:720px}
.preisblock .eyebrow{margin-bottom:10px}
.preisblock h2{margin-top:0}
/* Vertiefung (Linkliste nach main) */
.vertiefung{border-top:1px solid var(--line);padding:56px 0;background:rgba(19,43,76,.6)}
.vertiefung ul{list-style:none;columns:2;column-gap:32px;margin:0}
.vertiefung li{margin:0;break-inside:avoid}
.vertiefung a{color:var(--muted);text-decoration:none;font-size:14.5px;line-height:1.5;display:inline-block;padding:5px 0;transition:color .2s}
.vertiefung a:hover{color:var(--gold)}
.vertiefung h2{font-size:26px}
.vertiefung .zahl{color:var(--faint);font-size:12.5px}
/* Fußzeile (Markup aus bausteine.ts, Inline-Stil bleibt) */
footer a{transition:color .2s;display:inline-block;padding:4px 2px}footer a:hover{color:var(--gold)!important}
/* ---------- Seitenwechsel (native View Transitions, ohne JavaScript) ---------- */
@view-transition{navigation:auto}
nav{view-transition-name:pa-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(pa-nav),::view-transition-new(pa-nav){animation:none}
/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion:reduce){.split .w>span,.rv,.hero-bg img,.chip.in,.track,.stats.zaehlt .stat,.stats.zaehlt:before,.stat b.fertig{transition:none;animation:none;opacity:1;transform:none}@view-transition{navigation:none}}
/* ---------- Schmale Bildschirme ---------- */
@media (max-width:960px){.hero-bg.rechts:after,.hero-bg:after{background:linear-gradient(180deg,rgba(15,30,48,.55),rgba(15,30,48,.75) 60%,var(--navy) 100%)}.hero-in.eins.rechts{margin:0 auto}.wrap{padding:0 20px}.hero{padding:104px 20px 56px;min-height:0}.hero.klein{padding:120px 20px 60px}.hero-in{grid-template-columns:1fr;gap:36px}.field{height:455px}.wege,.paar,.person,.kontakt,.preisblock,.prozess,.pdf,.gruppen{grid-template-columns:1fr}.rp-counters,#rp-chart{grid-template-columns:1fr}.kacheln{grid-template-columns:1fr 1fr}.panel{width:100%}.stats.vier{grid-template-columns:1fr 1fr}.msf-row,.msf .haekchen{grid-template-columns:1fr}.pdf-deckel{max-width:260px}.begriffe{grid-template-columns:1fr}.prozess .bild{position:static;max-width:420px}.paar.flip .bild{order:0}.raster,.schritte,.aussagen{grid-template-columns:1fr 1fr!important}.aussagen .a.gross{grid-column:span 2}.fragen{grid-template-columns:1fr}.zahlen{grid-template-columns:1fr 1fr}.z:nth-child(2){border-right:0}.z:nth-child(-n+2){border-bottom:1px solid var(--line)}.sec{padding:80px 0}.kapitel{grid-template-columns:1fr;gap:16px;padding:50px 0}.kapitel .nr{font-size:64px}.preisblock{padding:36px}.final{padding:100px 20px}.final-in{justify-content:flex-start}.final .bg img{object-position:30% 45%!important}.stats{grid-template-columns:1fr 1fr 1fr}.stat{padding:16px 8px}.stat b{font-size:26px}.aussage{padding:80px 20px}}
@media (max-height:1000px){.scroll-hint{display:none}}
@media (max-width:600px){.vertiefung ul{columns:1}.kacheln{grid-template-columns:1fr}.rechtstext td{display:block;width:auto!important}.rechtstext td:first-child{border-bottom:0;padding-bottom:2px}.field{height:auto;min-height:0;padding:128px 16px 22px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:9px;touch-action:auto}.chip{position:static;transform:none;margin:0!important;cursor:pointer;padding:11px 17px;font-size:13.5px;box-shadow:0 6px 16px rgba(0,0,0,.28)}.chip.in{animation:none}.nur-zeiger{display:none}.nur-tippen{display:inline}.raster,.schritte,.prozess .schritte,.aussagen{grid-template-columns:1fr!important}.aussagen .a.gross{grid-column:auto}.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid var(--line)}.stat:last-child{border-bottom:0}.formular{padding:24px}.formular .reihe{grid-template-columns:1fr}.formular .reihe input{margin-bottom:14px}.bild{aspect-ratio:4/3}}

/* Nur für Screenreader sichtbar (Tabellenköpfe, Tiefenprüfung 11.09.2026) */
.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}

/* Druckausgabe, Ergänzung für design.css (ans Ende anhängen) und wissen/glossar.css.
   Befund Tiefenprüfung 11.09.2026: ohne diesen Block druckt Chromium helle Schrift
   auf weißem Papier (Hintergründe werden nicht gedruckt), dazu Cookie-Banner und Navigation. */
/* Tabellen unterhalb 840 px als gestapelte Bloecke statt seitlich scrollbar.
   Befund 13.09.2026: 80 der 100 Seiten zeigten darunter einen Scrollbalken, der
   aussah wie ein Bedienelement. Ab 841 px passt jede Tabelle nachweislich in ihre
   Spalte, gemessen ueber alle Seiten. Die Rollen im Markup (role="table" bis
   role="cell", gesetzt in src/lib/tabellen.ts) halten die Tabellensemantik, die
   display:block sonst entfernt. */
@media (max-width:840px){
 .tabelle-wrap{overflow-x:visible;border:0;background:none;border-radius:0}
 .tabelle-wrap table{display:block;width:100%;min-width:0;border-collapse:collapse}
 .tabelle-wrap thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .tabelle-wrap tbody{display:block}
 .tabelle-wrap tbody tr{display:block;border:1px solid var(--line);border-radius:12px;background:rgba(23,51,90,.45);padding:14px 16px;margin-bottom:10px}
 .tabelle-wrap tbody tr:last-child{margin-bottom:0}
 .tabelle-wrap tbody th,.tabelle-wrap tbody td{display:block;width:auto;padding:0;border:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
 .tabelle-wrap tbody th{color:var(--white);font-weight:600;font-size:15px;line-height:1.4;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
 .tabelle-wrap tbody td{color:var(--text);font-size:14px;line-height:1.55;padding-top:7px}
 .tabelle-wrap tbody td:first-child{padding-top:0;color:var(--white);font-weight:600;font-size:15px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
 /* Beschriftung und Wert nebeneinander: ein Block bleibt so halb so hoch. */
 .tabelle-wrap tbody td[data-spalte]{display:grid;grid-template-columns:14ch minmax(0,1fr);gap:4px 14px;align-items:start}
 .tabelle-wrap tbody td[data-spalte]:before{content:attr(data-spalte);color:var(--gold);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;font-weight:500;line-height:1.75;overflow-wrap:anywhere;min-width:0}
 @media (max-width:430px){.tabelle-wrap tbody td[data-spalte]{grid-template-columns:1fr;gap:1px}}
 .tabelle-wrap caption,.tabelle-wrap>caption{display:block;caption-side:bottom;text-align:left;padding:10px 2px 0;font-size:12px;color:var(--faint);line-height:1.6}
}

@media print {
  :root { --navy:#fff; --gold:#8a6d1f; }
  html, body, .sec, .sec.hell, .hero, .final, .kontakt, .karte, .wa-kurz, .paar, .weg, .schritt,
  .preisblock, .aussage, .vertiefung, article, .tabelle, .rechtstext, .glossar, .kachel {
    background:#fff !important; color:#111 !important; box-shadow:none !important; border-color:#bbb !important;
  }
  h1, h2, h3, h4, .lead, .sub, p, li, td, th, dt, dd, blockquote, .eyebrow, .quote, .rolle, .wa-kurz-h, .n, .stat, .stat * {
    color:#111 !important; text-shadow:none !important;
  }
  /* Die Kennzahl traegt am Bildschirm einen Farbverlauf im Text; im Druck bliebe sie sonst leer. */
  .stat b { background:none !important; -webkit-text-fill-color:#6b5416 !important; color:#6b5416 !important; filter:none !important; }
  .stats:after, .stats:before, .stat:after { display:none !important; }
  h1 em, .gold, .eyebrow, .wa-kurz-h { color:#6b5416 !important; }
  a { color:#111 !important; text-decoration:underline; }
  a[href^="http"]:not([href*="peak-advisors.de"])::after { content:" (" attr(href) ")"; font-size:.85em; color:#444; }
  nav, .mobilmenue, .nav-burger, #cookie-banner, .skip-link, .scroll-hint, .hero-bg, .trust, .btn, .btns, .more,
  .formular, .msf, .overlay, .suche, .fchip, .field, .chips, video, iframe, .final .haken, footer .cb-btns { display:none !important; }
  .rv, .split .w > span, .chip { opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .hero, .hero.klein { min-height:0 !important; padding:0 0 12mm !important; }
  .hero-in, .paar, .raster, .wege, .schritte, .zahlen { display:block !important; }
  .bild img, picture img { max-width:60mm !important; height:auto !important; }
  details { open:true; } details > * { display:block !important; }
  .tabelle-wrap { overflow:visible !important; }
  h2, h3 { page-break-after:avoid; break-after:avoid; }
  .karte, .weg, .schritt, .wa-kurz, tr, li, blockquote { page-break-inside:avoid; break-inside:avoid; }
  @page { margin:18mm 16mm; }
  footer { border-top:1px solid #bbb !important; background:#fff !important; color:#444 !important; font-size:10pt; }
  footer a { text-decoration:none; }
  body::after { content:"peak-advisors.de · Christian Sperling · Grote Gert 16, 47495 Rheinberg · 02843 7120771"; display:block; margin-top:8mm; font-size:9pt; color:#444; }
}

/* Sehr schmale Geraete (ab iPhone SE, 320 px): Wortmarke schrumpfen, damit der
   Burger-Knopf im Bild bleibt. Befund Tiefenpruefung 12.09.2026. */
@media (max-width:380px){.eyebrow{letter-spacing:1px;font-size:10px;gap:7px}.eyebrow:before{display:none}nav{padding:0 14px}.nav-logo{gap:9px}.logo-chip{width:34px;height:34px}.nav-wordmark{font-size:12px;letter-spacing:1.2px}.nav-claim{font-size:7px;letter-spacing:1px}}

/* Werkzeugblock auf der Wissensseite. Steht ausserhalb der Artikelzaehlung und des
   Kategorienfilters, weil der IHK-Finder kein Glossarbegriff ist. Ergaenzt 13.09.2026,
   weil das Werkzeug vorher nur aus zwei Fliesstexten heraus erreichbar war. */
.werkzeuge{margin:0 0 30px}
.werkzeuge .wz-karte+.wz-karte{margin-top:10px}
.wz-h{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-dim);margin-bottom:10px}
.wz-karte{display:flex;align-items:center;gap:16px;padding:18px 22px;border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:0 14px 14px 0;background:var(--card);text-decoration:none;transition:box-shadow .25s,transform .25s,border-color .25s}
.wz-karte:hover{box-shadow:var(--sh-card);transform:translateY(-2px);border-color:var(--gold)}
.wz-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(201,168,76,.14);color:var(--gold-dim)}
.wz-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.wz-text b{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:700}
.wz-text span{font-size:14px;color:var(--ink3);line-height:1.5}
.wz-arr{margin-left:auto;color:var(--gold-dim);font-size:19px;flex:0 0 auto;transition:transform .25s}
.wz-karte:hover .wz-arr{transform:translateX(4px)}
@media(max-width:600px){.wz-karte{align-items:flex-start;padding:16px 18px;gap:13px}.wz-arr{display:none}}

/* Leitsatz oben auf Startseite und jeder Leistungsseite (Fassung 6, Ziffer 3.4).
   Trennt Beratung und Finanzierung sichtbar, bevor der Besucher weiterliest. */
.leitsatz{max-width:620px;margin:0 0 30px;padding:16px 20px;border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(201,168,76,.10),rgba(201,168,76,0));border-radius:0 10px 10px 0}
.leitsatz b{display:block;font-family:var(--serif);font-size:17px;line-height:1.45;color:#F3E7C8;font-weight:600;margin-bottom:6px}
.leitsatz span{display:block;font-size:14.5px;line-height:1.65;color:var(--text)}
.leitsatz a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.leitsatz a:hover{color:#E0C880}
@media(max-width:600px){.leitsatz{padding:14px 16px;margin-bottom:24px}.leitsatz b{font-size:16px}.leitsatz span{font-size:14px}}

/* Widerrufsseite (Ziffer 16.2). Die Seite steht im hellen Abschnitt
   (.sec.hell), deshalb dunkle Schrift auf Papier, wie Impressum und
   Datenschutz. Kontraste gemessen gegen --papier #F5F3EE. */
.wr-feld{margin:0 0 22px}
.wr-feld > label,fieldset.wr-feld > legend,fieldset.wr-feld label{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 7px}
fieldset.wr-feld{border:1px solid #E1E4E6;border-radius:12px;padding:18px 20px;margin:0 0 22px;background:#fff}
fieldset.wr-feld > legend{padding:0 8px;margin:0}
fieldset.wr-feld label{margin-top:14px}
fieldset.wr-feld label:first-of-type{margin-top:0}
.wr-feld input[type=text],.wr-feld input[type=email],.wr-feld textarea{
  width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #C8CDD1;border-radius:10px;
  background:#fff;color:var(--ink);font:inherit;font-size:15.5px;line-height:1.5}
.wr-feld input:focus-visible,.wr-feld textarea:focus-visible{outline:2px solid #7a5e1c;outline-offset:1px;border-color:#7a5e1c}
.wr-feld input::placeholder,.wr-feld textarea::placeholder{color:#5F6B75}
.wr-hinweis{font-size:13.5px;color:var(--ink3);margin:8px 0 14px}
.wr-fehler{margin:0 0 20px;padding:14px 16px;border:1px solid #B23C22;border-left:3px solid #B23C22;border-radius:0 10px 10px 0;background:#FBEDE9;color:#5A1D0F;font-size:14.5px;line-height:1.6}
.wr-fehler[hidden]{display:none}
.wr-pruef{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;padding:20px 22px;border:1px solid #E1E4E6;border-radius:12px;background:#fff}
.wr-pruef dt{font-size:13.5px;color:var(--ink3);margin:0}
.wr-pruef dd{margin:0;font-size:15.5px;color:var(--ink);white-space:pre-line}
.rechtstext .btn-gold{color:#0B1622;text-decoration:none}
.rechtstext .btn-line{color:var(--ink);border-color:#C8CDD1;text-decoration:none}
@media(max-width:600px){.wr-pruef{grid-template-columns:1fr;gap:3px 0}.wr-pruef dd{margin-bottom:12px}}

/* Stand r: Quellenblock der Vertiefungsseiten (Baustein 8) */
.quellen{list-style:decimal;margin:0 0 0 22px;display:grid;gap:12px;max-width:900px}
.quellen li{font-size:14px;font-weight:300;color:var(--muted);line-height:1.6;padding-left:6px}
.quellen a{color:var(--gold-light)}
/* Stand r: Die Regel ".klein a" (Klickziel fuer Textlinks) griff auch auf die Knoepfe im
   kleinen Kopfbereich der Vertiefungsseiten. Knoepfe behalten ihr eigenes Mass. */
.hero.klein .btns .btn{display:inline-flex;padding:15px 26px;margin:0}
/* Stand s: kurzer Leitsatz unter den Knoepfen statt Kasten ueber ihnen */
.leitsatz-kurz{margin:22px 0 0;max-width:640px;font-size:14px;line-height:1.6;font-weight:300;color:var(--muted)}
.leitsatz-kurz b{color:var(--gold-light);font-weight:600}
.leitsatz-kurz a{color:var(--gold-light)}
/* Stand u, Entwurf Verkauf: Pakete, Fälle, zwei Kontaktwege */
.btn-tel svg{width:18px;height:18px;flex-shrink:0}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.paket{padding:34px 30px;border-radius:20px;border:1px solid var(--line);background:rgba(23,51,90,.35);display:flex;flex-direction:column;gap:12px}
.paket .k,.weg-karte .k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.paket h3{font-size:23px;line-height:1.18}
.paket .preis{font-family:var(--serif);font-size:46px;font-weight:700;color:var(--gold-light);line-height:1.1;padding:6px 0 10px;border-bottom:1px solid var(--line)}
.paket .preis small{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--faint);margin-top:4px}
.paket ul{list-style:none;margin:4px 0 0}
.paket li{padding:7px 0 7px 22px;position:relative;font-size:14.5px;font-weight:300;color:var(--text)}
.paket li:before{content:"◆";position:absolute;left:0;top:10px;color:var(--gold);font-size:8px}
.paket .fuer{font-size:14.5px;color:var(--white);flex:1}
.paket .dauer{font-size:13px;color:var(--faint)}
.paket .dauer a{color:var(--gold-light)}
.paket .more{margin-top:4px}
.pakete-fuss{text-align:center;margin:28px auto 0;max-width:80ch;color:var(--muted);font-size:14.5px}
.pakete-fuss a{color:var(--gold-light)}
.offen{margin-top:26px;border-left:3px solid var(--gold);padding:18px 22px;background:rgba(201,168,76,.06);border-radius:0 14px 14px 0}
.offen p{font-size:14.5px;font-weight:300;color:var(--text)}
.offen b,.offen strong{color:var(--white)}
.offen a{color:var(--gold-light)}
.faelle{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fall{position:relative;padding:32px 30px;border-radius:20px;border:1px solid var(--line);background:rgba(23,51,90,.35)}
.fall h3{font-size:22px;line-height:1.2;margin:10px 0 4px}
.fall .betrag{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--gold-light);margin-bottom:12px}
.fall dt{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:12px}
.fall dd{font-size:14.5px;font-weight:300;color:var(--text);margin-top:4px}
.entwurf{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy);background:var(--gold-light);border-radius:6px;padding:4px 9px;font-weight:600}
.kontakt-kopf .kopf{display:flex;gap:18px;align-items:center;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.kontakt-kopf .kopf img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.zwei-wege{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px}
.weg-karte{padding:36px 32px;border-radius:20px;border:1px solid rgba(201,168,76,.35);background:rgba(23,51,90,.45);display:flex;flex-direction:column;gap:12px}
.weg-karte h3{font-size:26px}
.weg-karte p{font-size:15px;font-weight:300;color:var(--text)}
.weg-karte .nummer{font-family:var(--serif);font-size:clamp(32px,3.4vw,44px);font-weight:700;color:var(--gold-light);text-decoration:none;line-height:1.1}
.weg-karte .btns{margin-top:auto;padding-top:8px}
.kontakt-mail{text-align:center;margin-top:24px;color:var(--muted)}
.kontakt-mail a{color:var(--gold-light)}
@media (max-width:960px){.pakete,.faelle,.zwei-wege{grid-template-columns:1fr}.paket .preis{font-size:40px}}
.offen-mitte{max-width:860px;margin:0 auto}