:root{
  --bg:#f6f1e8;--bg-2:#efe6d6;--paper:#fffdf8;
  --ink:#221d17;--ink-soft:#5b5246;
  --green:#22402f;--green-2:#356048;--green-deep:#0b1711;
  --clay:#bd6f3a;--gold:#d8b25e;--gold-soft:#ecd49a;
  --line:rgba(34,29,23,.10);--line-soft:rgba(34,29,23,.06);
  --shadow:0 26px 60px -28px rgba(11,23,17,.5);
  --shadow-soft:0 14px 40px -22px rgba(11,23,17,.35);
  --radius:20px;--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* UX-Fix 17.7.: overflow-x:clip auf html machte die Seite fuer Anker-Spruenge/scrollTo unscrollbar (CSS: clip+visible => beide clip). Horizontales Clipping uebernimmt body allein. */
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.015em;color:var(--green)}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.3rem;font-weight:600}
p{color:var(--ink-soft)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--clay);opacity:.6}
.section{padding:clamp(64px,8vw,112px) 0}
.section-head{max-width:680px;margin-bottom:52px}
.section-head h2{margin:14px 0 16px}
.section-head p{font-size:1.1rem}
.center{text-align:center;margin-left:auto;margin-right:auto}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:10000;background:linear-gradient(90deg,var(--clay),var(--gold));box-shadow:0 0 12px rgba(216,178,94,.4)}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.96rem;padding:15px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.3s cubic-bezier(.2,.7,.3,1);font-family:'Inter';text-decoration:none}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .3s;flex:none}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--clay);color:#fff;box-shadow:0 14px 34px -12px rgba(189,111,58,.7)}
.btn-primary:hover{background:#a85d2c;transform:translateY(-2px)}
.btn-gold{background:linear-gradient(100deg,var(--gold),var(--gold-soft));color:#3a2a12;box-shadow:0 14px 40px -12px rgba(216,178,94,.55)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-outline-light{border-color:rgba(255,255,255,.3);color:#f3ede1;background:rgba(255,255,255,.06)}
.btn-outline-light:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-outline-dark{border-color:var(--line);color:var(--green);background:transparent;padding:11px 22px;font-size:.88rem}
.btn-outline-dark:hover{background:var(--bg-2);transform:translateY(-2px)}
.btn-green{background:linear-gradient(120deg,var(--green-2),var(--green));color:#fff;padding:12px 24px;font-size:.9rem;box-shadow:0 14px 30px -12px rgba(34,64,47,.65)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(34,64,47,.75)}
/* PFADE */
.path-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:34px 30px;display:flex;flex-direction:column;transition:.3s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.path-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--gold));transform:scaleX(0);transform-origin:left;transition:.4s}
.path-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.path-card:hover::before{transform:scaleX(1)}
.path-card .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(160deg,var(--bg-2),var(--paper));border:1px solid var(--line-soft);display:grid;place-items:center;margin-bottom:18px;font-size:1.5rem}
.path-card h3{color:var(--green);margin-bottom:8px;font-size:1.15rem}
.path-card p{font-size:.92rem;margin-bottom:16px}
.path-benefits{list-style:none;margin-bottom:22px;display:grid;gap:9px;flex:1}
.path-benefits li{font-size:.85rem;color:var(--ink-soft);padding-left:20px;position:relative;line-height:1.4}
.path-benefits li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;border-radius:50%;background:linear-gradient(140deg,var(--clay),var(--gold))}
/* THEMENFELDER */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.topic-grid{grid-template-columns:1fr}}
.topic-box{background:linear-gradient(120deg,var(--green-2),var(--green));border-radius:16px;padding:20px 22px;position:relative;overflow:hidden}
.topic-box::before{content:"";position:absolute;top:-40px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(216,178,94,.2),transparent 70%)}
.topic-box h3{color:#fff;font-size:1rem;margin-bottom:6px;position:relative;z-index:1}
.topic-box p{color:rgba(234,241,236,.75);font-size:.86rem;position:relative;z-index:1;margin:0}
/* NAV */
header.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:.35s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:150px;max-width:1340px;transition:.35s}
.brand{display:flex;align-items:center;gap:12px;font-family:'Fraunces';font-weight:600;font-size:1.2rem;color:#fff;letter-spacing:-.01em;transition:.35s;white-space:nowrap;flex:none}
.logo-mark{width:64px;height:64px;flex:none;transition:.35s}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{font-size:.9rem;font-weight:500;color:rgba(243,237,225,.8);transition:.2s;white-space:nowrap}
.nav-links a:hover{color:#fff}
header.nav.scrolled{background:rgba(246,241,232,.92);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line-soft)}
header.nav.scrolled .nav-inner{height:96px}
header.nav.scrolled .logo-mark{width:55px;height:55px}
header.nav.scrolled .brand{color:var(--green)}
header.nav.scrolled .nav-links a{color:var(--ink-soft)}
header.nav.scrolled .nav-links a:hover{color:var(--green)}
@media(max-width:1280px){.nav-links{gap:16px}.nav-links a{font-size:.84rem}}
@media(max-width:1300px){.nav-inner{height:88px}.logo-mark{width:44px;height:44px}header.nav.scrolled .logo-mark{width:44px;height:44px}.brand{font-size:1.02rem}.nav-links{display:none}}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 0 80px;background:var(--green-deep);overflow:hidden;isolation:isolate}
.hero-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(65% 75% at 88% 28%,rgba(216,178,94,.13),transparent 60%),radial-gradient(55% 55% at 4% 88%,rgba(53,96,72,.6),transparent 60%)}
.hero-vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(11,23,17,.88) 0%,rgba(11,23,17,.55) 46%,rgba(11,23,17,.15) 78%,transparent 92%),linear-gradient(0deg,rgba(11,23,17,.72),transparent 40%)}
.hero-inner{position:relative;z-index:3;width:100%}
.hero-copy{max-width:620px}
.hero h1{color:#fcf8f0;margin-bottom:22px}
.hero .lead{font-size:1.15rem;color:rgba(243,237,225,.8);max-width:34ch;margin-bottom:32px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hero-note{font-size:.83rem;color:rgba(243,237,225,.45)}
.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(243,237,225,.45);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.hero-scroll .mouse{width:22px;height:36px;border:2px solid rgba(243,237,225,.35);border-radius:13px;position:relative}
.hero-scroll .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--gold);border-radius:2px;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,11px)}}
/* STRIP */
.strip{background:var(--green);color:#e9f0ea}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-around;gap:20px;padding:30px 26px;text-align:center}
.strip .stat .n{font-family:'Fraunces';font-size:2rem;color:#fff;font-weight:600;line-height:1}
.strip .stat .t{font-size:.8rem;opacity:.76;letter-spacing:.02em;margin-top:5px}
/* STEPS */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:28px 22px;position:relative;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.step .num{width:50px;height:50px;border-radius:50%;background:linear-gradient(150deg,var(--green-2),var(--green));color:#fff;font-family:'Fraunces';font-size:1.35rem;font-weight:600;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 10px 24px -12px rgba(34,64,47,.7)}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.9rem}
.step:not(:last-child)::after{content:"→";position:absolute;top:50%;right:-26px;transform:translateY(-50%);font-size:1.3rem;color:var(--clay);z-index:2}
@media(max-width:820px){.step:not(:last-child)::after{display:none}}
/* CARDS */
.cards{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px;transition:.3s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--gold));transform:scaleX(0);transform-origin:left;transition:.4s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card:hover::before{transform:scaleX(1)}
.card h3{color:var(--green);margin-bottom:8px;font-size:1.05rem}
.card p{font-size:.92rem}
.card .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(160deg,var(--bg-2),var(--paper));border:1px solid var(--line-soft);display:grid;place-items:center;margin-bottom:16px;font-size:1.3rem}
/* DARK */
.dark{background:var(--green-deep);position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 88% 18%,rgba(216,178,94,.13),transparent 60%),radial-gradient(55% 55% at 8% 88%,rgba(53,96,72,.5),transparent 60%)}
.dark .wrap{position:relative;z-index:2}
.dark .eyebrow{color:var(--gold)}.dark .eyebrow::before{background:var(--gold)}
.dark h2{color:#fff}.dark .section-head p{color:rgba(234,241,236,.72)}
.dark h3{color:#fff}
/* DASHBOARD */
.dash-grid{display:grid;grid-template-columns:1fr;gap:22px}
.dash-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px}
.dash-label{font-family:'Fraunces';font-size:.95rem;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:18px;text-transform:uppercase}
.cat-row{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.cat-name{width:210px;flex:0 0 210px;font-size:1rem;color:var(--ink-soft);font-weight:500;line-height:1.25}
.cat-hint{display:block;font-size:.68rem;font-weight:400;color:var(--ink-soft);opacity:.7;margin-top:2px}
.cat-bar-bg{flex:1;background:rgba(34,29,23,.09);border-radius:4px;height:8px;overflow:hidden}
.cat-bar{height:100%;background:linear-gradient(90deg,var(--clay),var(--gold));border-radius:4px}
@media(max-width:560px){.cat-name{width:120px;flex:0 0 120px;font-size:.85rem}}
.cat-n{font-size:.78rem;color:var(--ink);min-width:24px;text-align:right;font-weight:600}
.cat-row-va{align-items:flex-start}
.cat-bars{flex:1;display:flex;flex-direction:column;gap:5px}
.cat-bar-line{display:flex;align-items:center;gap:10px}
.cat-bar-tag{flex:0 0 52px;font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.cat-bar-before{background:rgba(34,29,23,.28)}
/* MAP */
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow-soft);height:440px}
#worldmap{height:440px;background:var(--bg-2)!important}
.leaflet-tile-pane{filter:sepia(.4) saturate(.6) brightness(1.05)}
/* PARTNER FORM */
.partner-form{background:rgba(255,253,248,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:38px;max-width:500px}
/* FORM */
.form-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:44px;max-width:580px;margin:0 auto;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;top:-70px;left:50%;transform:translateX(-50%);width:280px;height:170px;background:radial-gradient(ellipse,rgba(216,178,94,.18),transparent 70%);pointer-events:none}
label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
input[type=email],input[type=date],input[type=text],select{width:100%;padding:12px 14px;border:1.5px solid rgba(34,29,23,.14);border-radius:11px;font-family:'Inter';font-size:.94rem;color:var(--ink);background:var(--bg);outline:none;-webkit-appearance:none;appearance:none;transition:.25s;margin-bottom:18px}
input:focus,select:focus{border-color:var(--green-2);background:#fff;box-shadow:0 0 0 3px rgba(34,64,47,.09)}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b5246' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.range-val{font-family:'Fraunces';font-size:2rem;font-weight:600;color:var(--clay);text-align:center;display:block;margin-bottom:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;outline:none;cursor:pointer;border:none;padding:0;background:linear-gradient(90deg,var(--clay) 60%,rgba(34,29,23,.12) 60%);margin-bottom:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--clay);box-shadow:0 4px 12px -4px rgba(189,111,58,.7);cursor:pointer;border:2px solid #fff}
.slider-ticks{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-soft);margin-bottom:20px}
/* KATEGORIEN */
.cards{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px;transition:.3s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clay),var(--gold));transform:scaleX(0);transform-origin:left;transition:.4s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card:hover::before{transform:scaleX(1)}
.card h3{color:var(--green);margin-bottom:8px;font-size:1.05rem}
.card p{font-size:.92rem;color:var(--ink-soft)}
.card .ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(160deg,var(--bg-2),var(--paper));border:1px solid var(--line-soft);display:grid;place-items:center;margin-bottom:16px;font-size:1.3rem}
@media(max-width:820px){.steps-grid,.g3{grid-template-columns:1fr}}
/* PROFIL-DEMO */
.profile-section{background:var(--green-deep);padding:clamp(64px,8vw,100px) 0}
.profile-head{max-width:720px;margin:0 auto 44px;text-align:center}
.profile-head .eyebrow{color:var(--gold)}
.profile-head h2{color:#fff;font-size:clamp(2.2rem,4.4vw,3.6rem);margin-bottom:26px}
.profile-head p{color:rgba(234,241,236,.72);font-size:1.05rem}
.profile-layout{display:block;max-width:820px;margin:0 auto}
.profile-radar-card{background:rgba(255,253,248,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:36px 26px 30px;backdrop-filter:blur(6px);margin-bottom:28px;position:relative;overflow:hidden}
.profile-radar-card::before{content:"";position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:340px;height:220px;background:radial-gradient(ellipse,rgba(216,178,94,.2),transparent 70%);pointer-events:none}
.profile-radar-card canvas{max-width:768px;height:672px!important;margin:0 auto;display:block;position:relative;z-index:1}
.profile-radar-card h3{color:#fff;font-size:1.2rem;margin-bottom:6px;text-align:center;position:relative;z-index:1}
.profile-radar-card p{color:rgba(234,241,236,.65);font-size:.88rem;margin-bottom:18px;text-align:center;position:relative;z-index:1}
.profile-form{background:var(--paper);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.profile-slider-grid{display:grid;grid-template-columns:1fr;gap:0 28px}
@media(min-width:640px){.profile-slider-grid{grid-template-columns:1fr 1fr}}
.profile-slider-row{margin-bottom:22px}
.profile-slider-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.profile-slider-label span:first-child{font-size:1.02rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.profile-slider-val{font-family:'Fraunces';font-size:1.3rem;font-weight:600;color:var(--clay)}
.profile-slider-hint{font-size:.78rem;color:var(--ink-soft);opacity:.85;margin-bottom:10px;line-height:1.4}
.profile-cta{text-align:center;margin-top:8px}
.profile-cta p{color:var(--ink-soft);font-size:.85rem;margin-bottom:16px}
.btn-submit{width:100%;padding:14px;background:var(--clay);color:#fff;border:none;border-radius:999px;font-family:'Inter';font-weight:600;font-size:.97rem;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;gap:9px}
.btn-submit:hover{background:#a85d2c;transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(189,111,58,.7)}
.btn-submit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .3s}
.btn-submit:hover svg{transform:translateX(4px)}
.form-note{font-size:.78rem;color:var(--ink-soft);text-align:center;margin-top:14px;line-height:1.55}
.gift-box{background:linear-gradient(150deg,var(--green-2),var(--green));border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;margin-top:18px}
.gift-box b{color:#fff;display:block;font-size:.9rem}
.gift-box span{color:rgba(234,241,236,.75);font-size:.8rem}
/* CTA BAND */
.cta-band{background:linear-gradient(110deg,var(--green),var(--green-deep));border-radius:var(--radius);padding:48px 42px;display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-56px;right:-56px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(216,178,94,.22),transparent 70%)}
.cta-band .rel{position:relative;z-index:2}
.cta-band h3{color:#fff;font-family:'Fraunces';font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:400;max-width:400px;margin-bottom:8px}
.cta-band p{color:rgba(234,241,236,.72);font-size:.93rem}
/* FOOTER */
footer{background:var(--green-deep);color:rgba(234,241,236,.6);padding:48px 0 30px}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:'Fraunces';font-weight:600;font-size:1.15rem;color:#fff;margin-bottom:12px}
footer p{font-size:.86rem;max-width:400px;line-height:1.6}
footer a{color:rgba(234,241,236,.55)}.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:28px;font-size:.81rem}
.foot-row a{color:rgba(234,241,236,.5)}.foot-row a:hover{color:#fff}
@media(max-width:820px){.steps-grid,.g3,.dash-grid{grid-template-columns:1fr}}
@media(max-width:600px){.cta-band{flex-direction:column;align-items:flex-start}}
/* Mobile-Fixes 10.7.: Sprachauswahl lesbar, kein Header-Ueberlauf, Footer-Umbruch, Charts responsiv */
@media(max-width:700px){
  .nav-inner{height:64px}
  .brand{font-size:1rem;gap:8px}
  .logo-mark{width:34px;height:34px}
  .nav-links{display:none}
  .lang-switch{flex:0 0 auto;width:auto;min-width:110px;font-size:13px;padding:7px 8px}
  header.nav .btn-primary{display:none}
  .foot-row{justify-content:center;text-align:center}
  .foot-row>div{flex-wrap:wrap;justify-content:center;gap:10px 18px}
  .dash-card,.profile-radar-card,.partner-form{min-width:0}
  .dash-card canvas,.profile-radar-card canvas{max-width:100%;height:auto}
}

/* v20260710: Dumbbell-Zeilen (Vorher/Nachher als Punkte-Paar) + Karten-Pins */
.dim-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dim-track{flex:1;position:relative;height:24px}
.dim-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:rgba(34,29,23,.08);border-radius:2px}
.dim-line{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(34,29,23,.30),var(--gold));border-radius:2px}
.dim-line.down{background:linear-gradient(90deg,var(--gold),rgba(34,29,23,.30))}
.dim-dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.dim-dot-b{background:rgba(34,29,23,.45)}
.dim-dot-a{background:var(--gold);width:15px;height:15px}
.dim-delta{flex:0 0 46px;text-align:right;font-size:.8rem;font-weight:700;color:var(--green-2)}
.dim-delta.neg{color:var(--clay)}
.dim-delta.na{color:var(--ink-soft);font-weight:500}
.dim-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-soft);margin:0 0 16px}
.dim-legend span{display:flex;align-items:center;gap:6px}
.dim-legend i{width:11px;height:11px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.kr-pin{background:none;border:none}
.kr-pin svg{display:block}

/* v20260710b: Startseiten-Demo kompakt + Mini-Rad (Michaels Feedback 10.7.) */
.profile-head{margin-bottom:28px}
.profile-radar-card{padding:24px 20px 18px}
.profile-radar-card canvas{max-width:380px;width:380px!important;height:380px!important;margin:0 auto}
@media(max-width:700px){.profile-radar-card canvas{width:100%!important;height:auto!important;aspect-ratio:1/1;max-width:340px}}

/* v20260715c: sichtbarer Sprachumschalter (Wrapper mit Globus + Kuerzel, Select unsichtbar darueber) */
.lang-switch-wrap{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 12px;margin-right:4px;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:#fff;cursor:pointer;white-space:nowrap;transition:.25s}
.lang-switch-wrap svg{flex:none;display:block}
.lang-switch-wrap select.lang-switch{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;border:0;background:transparent;font-size:16px}
header.nav.scrolled .lang-switch-wrap{color:var(--ink-soft);border-color:rgba(34,29,23,.28)}
@media(max-width:640px){.lang-switch-wrap{padding:7px 9px}}
.profile-slider-row{margin-bottom:10px}
.profile-slider-label{margin-bottom:2px}
.profile-slider-hint{margin-bottom:6px;font-size:.72rem}
.profile-slider-val{font-size:1.1rem}
@media(min-width:560px){.profile-slider-grid{grid-template-columns:1fr 1fr}}
.mini-sticky{position:sticky;position:-webkit-sticky;top:136px;z-index:60;height:0;overflow:visible;display:flex;justify-content:flex-end;align-items:flex-start;pointer-events:none}
.mini-wheel{width:150px;background:#fffdf8;border:1px solid rgba(34,29,23,.12);border-radius:16px;box-shadow:0 14px 40px -14px rgba(11,23,17,.6);padding:8px 8px 5px;text-align:center;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s,transform .3s}
.mini-wheel.on{opacity:1;transform:none}
.mini-wheel .mw-cv{position:relative;width:100%;height:116px}
.mini-wheel .mw-score{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:600;color:#bd6f3a;line-height:1.2;margin-top:1px}
@media(max-width:680px){.mini-wheel{width:112px}.mini-wheel .mw-cv{height:84px}}
@media(min-width:1280px){.mini-wheel{margin-right:-172px}}

/* KR-BURGER v20260716: Mobiles Menue. Vorher war .nav-links unter 1190px komplett ausgeblendet
   (kein Ersatz, Menuepunkte mobil unerreichbar), jetzt Burger-Button + Ausklapp-Panel.
   Button wird von /static/js/kr-nav.js in .nav-inner eingefuegt. */
.kr-burger{--kr-bc:#fff;display:none;flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0;transition:.25s}
header.nav.scrolled .kr-burger,header.nav.nav-open .kr-burger{--kr-bc:var(--ink);border-color:rgba(34,29,23,.28)}
.kr-burger i{position:relative;display:block;width:18px;height:2px;background:var(--kr-bc);border-radius:2px;transition:.25s}
.kr-burger i::before,.kr-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--kr-bc);border-radius:2px;transition:.25s}
.kr-burger i::before{top:-6px}
.kr-burger i::after{top:6px}
header.nav.nav-open .kr-burger i{background:transparent}
header.nav.nav-open .kr-burger i::before{top:0;transform:rotate(45deg)}
header.nav.nav-open .kr-burger i::after{top:0;transform:rotate(-45deg)}
.nav-links .kr-nav-cta{display:none}
@media(max-width:1300px){
  .kr-burger{display:flex}
  header.nav.nav-open{background:var(--bg);border-bottom:1px solid var(--line-soft)}
  header.nav.nav-open .brand{color:var(--green)}
  header.nav.nav-open select{color:var(--ink)!important;background:rgba(34,29,23,.06)!important;border-color:rgba(34,29,23,.28)!important}
  header.nav.nav-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 48px -18px rgba(11,23,17,.35);padding:6px 0 16px;max-height:calc(100vh - 130px);overflow-y:auto}
  header.nav.nav-open .nav-links a{color:var(--ink);font-size:.98rem;font-weight:500;padding:13px 26px;border-top:1px solid var(--line-soft)}
  header.nav.nav-open .nav-links a:first-child{border-top:none}
  header.nav.nav-open .nav-links a:hover{color:var(--green)}
  header.nav.nav-open .nav-links a.kr-nav-cta{display:inline-flex!important;align-items:center;gap:8px;margin:14px 26px 4px;width:fit-content;color:#fff;border-top:none;padding:11px 24px;font-size:.9rem;border-radius:999px}
}
/* KR-BURGER Teil 2: Header war mit Burger auf schmalen Handys (375px) ca. 50px zu breit; Elemente verdichten */
@media(max-width:700px){
  header.nav .wrap{padding-left:16px;padding-right:16px}
  .nav-inner{gap:10px}
  .kr-burger{width:40px;height:40px}
  header.nav select.lang-switch{min-width:0!important;max-width:104px;font-size:12px!important;padding:7px 6px!important;margin-right:0!important}
}
@media(max-width:390px){.brand>span>span{display:none}}

/* KR-MOBILFIX v20260716: 1) Mini-Rad (.mini-sticky) lag mit top:12px HINTER SDG-Band (28px) + fixem Header (z-index 80 > 60) und war mobil unsichtbar bzw. blitzte beim Scrollen nur kurz auf -> jetzt top:136px (steht im Hauptblock oben), sitzt unter dem Header. 2) iOS-Scroll-Stabilisierung: SDG-Band + Header auf eigene Compositor-Layer, damit sie beim Scrollen nicht nachhinken/durchscheinen; dazu -webkit-backdrop-filter im .scrolled-Header ergaenzt. 3) Behandler-Verzeichnis (.kr-dirgrid, Klasse in lang/index_*.php) mobil 2-spaltig kompakt. */
header.nav{will-change:transform}
body>div[style*="z-index:5000"]{will-change:transform;transform:translateZ(0)}
@media(max-width:680px){
  .kr-dirgrid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .kr-dirgrid>div{padding:12px!important}
  .kr-dirgrid img{width:38px!important;height:38px!important}
  .kr-dirgrid span[style*="width:56px"]{width:38px!important;height:38px!important;font-size:.95rem!important}
  .kr-dirgrid>div>div:first-child{flex-wrap:wrap}
}

/* KR-PROOF-BUILD v20260717: "Am Fundament gebaut"-Block in der Beweis-Box unten links.
   Statische Vertrauens-Signale (Artikel gesichtet, Ethikrat, Datenschutz) unter den Wochenzahlen. */
.kr-proof-build{margin-top:14px;padding-top:13px;border-top:1px solid rgba(216,178,94,.22);position:relative}
.kr-proof-build .kr-pb-h{font-size:.6rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(216,178,94,.85);margin:0 0 9px}
.kr-proof-build ul{list-style:none;margin:0;padding:0}
.kr-proof-build li{display:flex;align-items:flex-start;gap:9px;padding:3px 0;font-size:.82rem;line-height:1.35;color:rgba(243,237,225,.9)}
.kr-proof-build li svg{flex:none;width:14px;height:14px;margin-top:2px;color:var(--gold-soft)}
@media(max-width:640px){
  .kr-proof-build{margin-top:9px;padding-top:9px}
  .kr-proof-build .kr-pb-h{font-size:.5rem;margin-bottom:6px}
  .kr-proof-build li{font-size:.66rem;gap:6px;padding:2px 0}
  .kr-proof-build li svg{width:11px;height:11px}
}

/* KR-CLEANHEAD v20260717: Aufgeraeumter Kopf im Apple-Look.
   Schlankere Nav (84px statt 150px), mehr Luft vor der Hero-Headline,
   Dropdown "Wissenschaft" (Daten/Geschichten/Forschung) — Markup KR-NAVSCI in lang/index_XX.php.
   Im Burger-Panel (<=1300px) loest sich das Dropdown in drei normale Punkte auf. */
header.nav .nav-inner{height:84px}
@media(min-width:1301px){.nav-links{gap:30px}}
.logo-mark{width:46px;height:46px}
header.nav.scrolled .nav-inner{height:68px}
header.nav.scrolled .logo-mark{width:40px;height:40px}
.hero{padding-top:170px}
.hero h1{margin-bottom:26px}
.kr-navsci{position:relative;display:flex;align-items:center}
.kr-navsci-btn{background:none;border:0;cursor:pointer;padding:10px 0;display:inline-flex;align-items:center;font-family:inherit;font-size:.9rem;font-weight:500;color:rgba(243,237,225,.8);transition:.2s;white-space:nowrap}
.kr-navsci:hover .kr-navsci-btn,.kr-navsci-btn:focus{color:#fff}
header.nav.scrolled .kr-navsci-btn{color:var(--ink-soft)}
header.nav.scrolled .kr-navsci:hover .kr-navsci-btn{color:var(--green)}
.kr-navsci-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);min-width:190px;padding:8px;border-radius:14px;background:rgba(16,35,26,.97);border:1px solid rgba(216,178,94,.22);box-shadow:0 24px 50px -18px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:90}
.kr-navsci:hover .kr-navsci-menu,.kr-navsci:focus-within .kr-navsci-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.kr-navsci-menu a{display:block;padding:10px 16px;border-radius:9px;font-size:.88rem;color:rgba(243,237,225,.85)}
.kr-navsci-menu a:hover{background:rgba(216,178,94,.12);color:#fff}
.kr-navsci::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
@media(max-width:1280px){.kr-navsci-btn{font-size:.84rem}}
@media(max-width:1300px){.kr-navsci{display:contents}.kr-navsci-btn{display:none}.kr-navsci-menu{display:contents;position:static;opacity:1;pointer-events:auto;transform:none;background:none;border:0;box-shadow:none;padding:0}.kr-navsci-menu a{padding:0;font-size:inherit;border-radius:0}.kr-navsci-menu a:hover{background:none}}

/* KR-TOPSEAL v20260720: Mobil huschte beim Scrollen Inhalt oben durch den Kopfbereich (mehrfach gemeldet).
   Ursachen: 1) .progress lief mit top:0 und z-index:10000 quer UEBER das SDG-Band (z 5000).
   2) header.nav hatte nur z-index:80, Karten-Ebenen (Leaflet bis z 600) malten sich beim Scrollen UEBER die Nav.
   3) Gescrollte Nav war halbtransparent (.92 plus backdrop-filter), iOS zieht den Blur beim Scrollen nach, Text schien durch.
   Fix: Balken unters Band, Nav ueber alle Inhalte (aber unter SDG-Band 5000), Kopf mobil DECKEND (Lektion SDG v4).
   Dazu html-Hintergrund dunkelgruen: beim iOS-Gummiband-Overscroll blitzt oben nicht mehr beige auf. */
.progress{top:28px;z-index:4900}
header.nav{z-index:4000}
@media(max-width:1300px){
  header.nav.scrolled{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
html{background:#10231a}

/* KR-TOPSEAL2 v20260720b: Durchhusch-Rest (dritte Meldung). Die .35s-Einblendung der Nav
   liess beim schnellen Wischen Inhalt durch den noch transparenten Kopf scheinen, bis der
   Hintergrund fertig eingeblendet war. Mobil schaltet die Nav jetzt OHNE Uebergang sofort
   deckend. Dazu Initial-Aufruf des Scroll-Handlers in index/dashboard aller 10 Sprachen,
   damit die Nav auch bei gescrollt geladener Seite (Reload/Anker) sofort deckend steht. */
@media(max-width:1300px){
  header.nav{transition:none}
}

/* KR-TOPFIX3 v20260722: 4. Meldung Durchhuschen (Michael). ANDERER WEG statt weiterem z-Index-Feintuning.
   Restursache: iOS versetzt position:fixed-Elemente beim Ein-/Ausfahren der Safari-Leiste einen Frame
   verspaetet; in dem Frame lief Inhalt OBERHALB des SDG-Bands durch. Per z-Index prinzipiell unfixbar.
   Weg: 1) SDG-Band blutet 100px nach OBEN aus (top:-100px, Hoehe 128px, Inhalt unten via padding-top,
   box-sizing:border-box global): der Verzoegerungs-Frame zeigt Band statt Inhalt. !important noetig,
   weil die Band-Styles inline im HTML stehen. Gradient so gestaucht, dass die sichtbaren 28px exakt
   wie vorher aussehen. 2) Mobile Nav IMMER deckend (ungescrollt dunkel wie Hero #0b1711, gescrollt
   hell per TOPSEAL-Regel): der JS-Klassenwechsel entscheidet nur noch die FARBE, nie mehr Durchsicht.
   Das im TOPSEAL2-Kommentar benannte Restrisiko (Main-Thread blockiert Klassenwechsel) ist damit weg. */
@media(max-width:1300px){
  body>div[style*="z-index:5000"]{top:-100px!important;height:128px!important;padding-top:100px!important;
    background:linear-gradient(180deg,#10231a 0%,#10231a calc(100% - 28px),#0b1711 calc(100% - 6px),#0a140f 100%)!important}
  header.nav{background:#0b1711}
}

/* KR-TOPFIX4 v20260722b: Michaels Praezisierung: Inhalt rollte in den iOS-STATUSBALKEN (Uhr/WLAN/Akku),
   also OBERHALB des Browser-Viewports. Dieser Bereich gehoert dem System; iOS malt dort beim Scrollen
   den Seiteninhalt durch, solange die Seite ihn nicht selbst beansprucht. Kein Element INNERHALB der
   Seite kann das verhindern, darum griffen TOPSEAL/TOPSEAL2/TOPFIX3 dort nicht.
   Fix: viewport-fit=cover im Viewport-Meta aller 40 Templates (Seite reicht bis zur echten
   Bildschirmoberkante) + hier alle festen Kopf-Masse um env(safe-area-inset-top) erweitert.
   Das SDG-Band deckt den Statusbereich dunkelgruen ab, Uhrzeit steht hell darauf
   (theme-color #10231a ebenfalls neu in den Templates). Ohne Notch / ausserhalb iOS ist env()=0px,
   alles bleibt exakt wie bisher. html-Praefix noetig, weil body-padding und nav-top inline im HTML
   mit !important gesetzt sind (hoehere Spezifitaet gewinnt bei !important-Konflikt). */
@media(max-width:1300px){
  body>div[style*="z-index:5000"]{height:calc(128px + env(safe-area-inset-top,0px))!important;padding-top:calc(100px + env(safe-area-inset-top,0px))!important}
  html body{padding-top:calc(28px + env(safe-area-inset-top,0px))!important}
  html header.nav{top:calc(28px + env(safe-area-inset-top,0px))!important}
  .progress{top:calc(28px + env(safe-area-inset-top,0px))}
  header.nav.nav-open .nav-links{max-height:calc(100vh - 130px - env(safe-area-inset-top,0px))}
}

/* KR-TOPFIX5 v20260722c: Recherche-Ergebnis (Michael bat: schau, wie andere es geloest haben).
   Sein iPhone laeuft iOS 26 (Safari "Liquid Glass"). Dokumentierte Safari-26-Eigenheiten
   (1ar.io/updates/safari-26-liquid-glass-web, developer.apple.com Threads 800798/256138682):
   a) theme-color wird fuer die Leisten-Toenung IGNORIERT.
   b) Fixe Elemente, deren Box ueber den Viewport hinausragt, werden ABGESCHNITTEN statt gemalt.
      Unser 100px-Ausbluten aus TOPFIX3 wird auf iOS 26 also geclippt und wirkt nicht.
   c) Farbe/Blur gehoeren NICHT auf das fixe Element selbst, sondern auf ein absolutes Kind,
      sonst entstehen weisse/falsch getoente Balken (Apple nutzt dieses Muster selbst auf apple.com).
   Umbau nach diesem Muster: Box des SDG-Bands bleibt IM Viewport (top:0, Hoehe 28px+Inset),
   die Farbflaeche liegt auf ::before und ragt nach oben hinaus (hilft aelteren iOS beim Frame-Lag,
   wird auf iOS 26 nicht gebraucht, schadet dort nicht). Nav traegt ihre Farbe ebenfalls auf ::before,
   das Element selbst ist transparent. Sichtbares Ergebnis identisch zu vorher. */
@media(max-width:1300px){
  body>div[style*="z-index:5000"]{top:0!important;height:calc(28px + env(safe-area-inset-top,0px))!important;padding-top:env(safe-area-inset-top,0px)!important;background:transparent!important}
  body>div[style*="z-index:5000"]::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(328px + env(safe-area-inset-top,0px));z-index:-1;
    background:linear-gradient(180deg,#10231a 0%,#10231a calc(100% - 28px),#0b1711 calc(100% - 6px),#0a140f 100%)}
  header.nav{background:transparent}
  header.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:#0b1711}
  header.nav.scrolled{background:transparent}
  header.nav.scrolled::before{background:var(--bg)}
  header.nav.nav-open{background:transparent}
  header.nav.nav-open::before{background:var(--bg)}
}