/* Team Zuversicht – tecis Corporate Design (Blau 00325b · Himmelblau 009ee3 · Limette d3d800 · Sand cbcdb9 · DM Sans) */
/* Schriftart-Update vom 27.09.2026 (Auftrag "verspielteres Redesign umsetzen"): DM Sans statt Arial, siehe die
   Design-Explorationen im Artifact "Teamzuversicht Redesign-Richtungen". Arial/Helvetica bleiben als Fallback,
   falls Google Fonts einmal nicht laedt. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&display=swap');
:root{--blau:#00325b;--blau-fill:#00325b;--himmelblau:#009ee3;--himmelblau-hell:#E5F5FC;--limette:#d3d800;--sand:#cbcdb9;--sand-hell:#F4F4EE;--text:#3C3C3B;--rot:#C0392B;--gruen:#2E7D32;--weiss:#fff;
--border:rgba(0,50,90,.10);--shadow-sm:0 1px 3px rgba(0,50,90,.06);--shadow-md:0 10px 28px rgba(0,50,90,.12);
--bg:#fff;--surface:#fff;--nav-bg:rgba(255,255,255,.78);--text-muted:#6d6d6c;--text-faint:#8a8a89;--nav-icon:var(--blau)}
/* Dark Mode (Auftrag vom 27.09.2026, nachgebessert nach Nutzer-Feedback "Karten stechen zu stark"):
   --blau/--text werden hier selbst hell, Card-/Sand-Flaechen (--surface/--sand-hell/--himmelblau-hell) werden
   dunkel. --blau-fill bleibt IMMER die dunkle Marken-Farbe #00325b, unabhaengig vom Theme. Fuer Buttons/Badges/
   Kreis-Icons mit fest weisser Schrift, die sonst zu wenig Kontrast haetten. Ausnahmen weiter unten: Text auf
   Limette oder der (nicht-hellen) Sand-Flaeche bleibt ebenfalls dunkel, weil diese Flaechen knallig bleiben. */
:root[data-theme="dark"]{
  --blau:#3d84b8;--himmelblau-hell:#15374d;--sand-hell:#2a3947;
  --text:#dfe3e6;--text-muted:#9aa7b1;--text-faint:#6b7680;
  --bg:#0c1a26;--surface:#202e3c;--nav-bg:rgba(9,20,30,.85);
  --border:rgba(255,255,255,.10);--shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 10px 28px rgba(0,0,0,.55)
}
:root[data-theme="dark"] .kst.wartet{color:#00325b}
:root[data-theme="dark"] .pfehlt{background:#3a1f1c;color:#f0a99e}
:root[data-theme="dark"] .sv-z.fehlt{background:#3a1f1c}
:root[data-theme="dark"] .platz{background:#4a3f14}
.theme-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;color:var(--blau);transition:background .15s}
.theme-btn:hover{background:var(--sand-hell)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* overflow-x:hidden bewusst nur auf html, nicht auf body – sonst verliert die sticky Navigation (.apple-nav) in Safari ihr "Kleben".
   Verhindert seitliches Wegrutschen der ganzen Seite bei zu breiten Inhalten (z. B. Tabellen in den Tools-Rechnern); wer wirklich
   seitlich scrollen soll (Organigramm, Tabellen mit .tw), bekommt das weiterhin über einen eigenen overflow-x:auto-Container. */
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"DM Sans",Arial,Helvetica,sans-serif}
body{min-height:100vh;display:flex;flex-direction:column;line-height:1.5}
h1,h2,h3,p{margin:0}
a{color:var(--himmelblau)}
button{font-family:inherit;cursor:pointer;border:none}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:3px solid var(--himmelblau);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
/* Mikro-Animationen (Phase 7): leichtes Einblenden pro Ansicht, respektiert die reduced-motion-Regel oben */
@keyframes einblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hero,main .sektion{animation:einblenden .35s ease both}

/* ---------- Navigation ---------- */
/* env(safe-area-inset-*) ist in normalen Browsern 0 (keine Auswirkung) – wichtig nur in der App (iPhone-Notch/Dynamic Island, Android-Statusleiste) */
.apple-nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.nav-in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.brand{font-weight:800;color:var(--blau);text-decoration:none;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand i{font-style:italic;color:var(--himmelblau)}
.reiter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
.reiter::-webkit-scrollbar{display:none}
.reiter a{color:var(--text);text-decoration:none;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;white-space:nowrap;opacity:.75;transition:background .15s,opacity .15s;display:inline-flex;align-items:center;gap:6px}
.reiter a svg{flex:none}
.reiter a:hover{opacity:1;background:var(--sand-hell)}
.reiter a.on{background:var(--blau-fill);color:#fff;opacity:1}
.btn-login{background:var(--limette);color:var(--blau-fill);font-weight:800;font-size:14px;padding:9px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 4px 10px rgba(211,216,0,.35);transition:transform .15s,box-shadow .15s}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(211,216,0,.45)}
@media(max-width:700px){.nav-in{flex-wrap:wrap;gap:8px 12px}.reiter{order:3;flex:1 0 100%}.brand{flex:1}}
.reiter a.uebersicht-btn{display:inline-flex;align-items:center;gap:6px;background:var(--blau-fill);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;opacity:1}
.reiter a.uebersicht-btn:hover{opacity:.88;background:var(--blau-fill);color:#fff}

/* ---------- Kachel-Startseite (Partnerbereich) ---------- */
.kachelgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:560px;margin:0 auto;padding:8px 20px 40px}
.kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:108px;padding:16px 8px;border-radius:18px;text-decoration:none;border:1px solid transparent;transition:transform .15s}
.kachel:hover{transform:translateY(-2px)}
.kachel-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.kachel-ico svg{width:22px;height:22px}
.kachel span{font-size:13px;font-weight:700;text-align:center;line-height:1.25}
.kachel.lime{background:var(--limette)}
.kachel.lime .kachel-ico{background:var(--blau-fill)}
.kachel.lime span{color:var(--blau-fill)}
.kachel.dunkel{background:var(--blau-fill)}
.kachel.dunkel .kachel-ico{background:var(--himmelblau)}
.kachel.dunkel span{color:#fff}
.kachel.hell{background:var(--himmelblau-hell);border-color:rgba(0,158,227,.3)}
.kachel.hell .kachel-ico{background:var(--himmelblau)}
.kachel.hell span{color:var(--blau)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--blau-fill) 0%,#002544 55%,#001629 100%);color:#fff;padding:88px 20px 72px}
.hero.klein{padding:56px 20px 44px}
.wrap{max-width:1100px;margin:0 auto;padding-inline:20px;width:100%}
.hero .wrap{padding:0}
.pill-label{display:inline-block;background:rgba(0,158,227,.16);color:#7FD4F5;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px;border:1px solid rgba(127,212,245,.3)}
.hero h1{margin:20px 0 0;font-size:clamp(38px,7.4vw,78px);line-height:1;letter-spacing:-.03em;font-weight:800;text-wrap:balance;max-width:16ch}
.hero.klein h1{font-size:clamp(32px,5.5vw,54px);max-width:24ch}
.hero .lead{margin-top:22px;max-width:60ch;font-size:clamp(16px,2vw,20px);color:#BFE3F5;line-height:1.55}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--limette);color:var(--blau-fill);font-weight:800;font-size:15px;padding:13px 26px;border-radius:999px;text-decoration:none;box-shadow:0 4px 10px rgba(211,216,0,.35);transition:transform .15s,box-shadow .15s}
.btn-cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(211,216,0,.45)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#fff;font-weight:700;font-size:15px;padding:12px 24px;border-radius:999px;text-decoration:none;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- Inhalte ---------- */
main{flex:1 0 auto}
.sektion{padding-block:56px 8px}
.sec-h{margin:0 0 26px}
.sec-h .label{display:block;color:var(--himmelblau);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sec-h h2{margin-top:8px;color:var(--blau);font-weight:800;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.sec-h p{margin-top:12px;max-width:65ch;color:var(--text);font-size:17px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:20px;padding:24px;transition:transform .2s cubic-bezier(.16,.8,.3,1),box-shadow .2s;position:relative}
a.card{text-decoration:none;color:inherit;display:block}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.fav-btn{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:#c9c9c2;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1}
.fav-btn:hover{border-color:var(--himmelblau);color:var(--himmelblau)}
.fav-btn.on{color:var(--himmelblau);border-color:var(--himmelblau);background:var(--himmelblau-hell)}
.icon-circle{width:38px;height:38px;border-radius:50%;background:var(--blau-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;margin-bottom:14px}
.card h3{font-size:19px;color:var(--blau);font-weight:800;letter-spacing:-.01em}
.card p{margin-top:8px;font-size:15px;color:var(--text)}
.card ul{margin:12px 0 0;padding-left:18px;font-size:14.5px}
.card li{margin-bottom:5px}
.k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--blau);opacity:.7}
.band{background:var(--himmelblau-hell);border-radius:24px;padding:36px;margin-block:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.band h3{font-size:clamp(22px,3vw,30px);color:var(--blau);font-weight:800;letter-spacing:-.02em;max-width:24ch}
.band p{margin-top:8px;max-width:50ch}
.hinweisbox{background:var(--sand-hell);border-radius:16px;padding:18px 22px;font-size:13px;color:var(--text-muted);line-height:1.6;margin-block:32px}
.zahl{font-size:clamp(56px,11vw,120px);font-weight:800;color:var(--limette);line-height:.9;letter-spacing:-.04em}
.stat-row{display:flex;flex-wrap:wrap;gap:36px;margin-top:34px}
.stat b{display:block;font-size:clamp(28px,4vw,44px);color:var(--limette);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:6px;font-size:13px;color:#BFE3F5}
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.schritte{grid-template-columns:1fr 1fr}}
.schritt{background:var(--sand-hell);border-radius:18px;padding:20px}
.schritt::before{counter-increment:s;content:counter(s);display:flex;width:32px;height:32px;border-radius:50%;background:var(--himmelblau);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.schritt b{color:var(--blau)}
.schritt p{font-size:14px;margin-top:4px}
.phase{border-left:4px solid var(--himmelblau);padding:4px 0 4px 18px;margin-bottom:18px}
.phase b{color:var(--blau);font-size:18px}
.phase p{margin-top:4px}

/* ---------- Organigramm ---------- */
.org-scroll{overflow-x:auto;padding:8px 4px 24px}
.org{min-width:max-content;margin:0 auto;text-align:center}
.org ul{display:flex;justify-content:center;gap:0;padding:24px 0 0;margin:0;position:relative}
.org>ul{padding-top:0}
.org li{list-style:none;position:relative;padding:24px 4px 0;display:flex;flex-direction:column;align-items:center}
.org>ul>li{padding-top:0}
.org li::before,.org li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:24px;border-top:2px solid var(--sand)}
.org li::after{right:auto;left:50%;border-left:2px solid var(--sand)}
.org>ul>li::before,.org>ul>li::after{display:none}
.org li:only-child::before,.org li:only-child::after{display:none}
.org li:first-child::before,.org li:last-child::after{border:0}
.org li:last-child::before{border-right:2px solid var(--sand);border-radius:0 10px 0 0}
.org li:first-child::after{border-radius:10px 0 0 0}
.org ul ul::before{content:'';position:absolute;top:0;left:50%;height:24px;border-left:2px solid var(--sand)}
.person{width:114px;height:196px;display:flex!important;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:20px;padding:16px 10px;text-align:center;cursor:pointer;transition:transform .2s cubic-bezier(.16,.8,.3,1),box-shadow .2s;display:block;font:inherit;color:inherit}
.person:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.person.top{width:230px;height:auto;border-color:var(--himmelblau);box-shadow:var(--shadow-md)}
.person.top .vita{display:-webkit-box!important}
.person.top .mehr{margin-top:8px!important}
.avatar{width:68px;height:68px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(160deg,var(--blau-fill),#0a4a80);color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 2px var(--himmelblau)}
.avatar img{width:100%;height:100%;object-fit:cover}
.top .avatar{width:104px;height:104px;font-size:34px}
.person b{display:block;color:var(--blau);font-size:14.5px;line-height:1.25}
.person .rolle{display:inline-block;margin-top:6px;background:var(--himmelblau-hell);color:var(--blau);font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.person .vita{display:none!important;margin-top:8px;font-size:12px;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.person .mehr{margin-top:auto!important;display:block;margin-top:8px;font-size:12px;font-weight:700;color:var(--himmelblau)}
@media(max-width:900px){
  .org{min-width:0}.org-scroll{overflow:visible}
  .org ul{flex-direction:column;align-items:stretch;padding:12px 0 0 14px;margin-left:10px;border-left:2px solid var(--sand)}
  .org>ul{padding:0;margin:0;border:0}
  .org li,.org>ul>li{padding:10px 0 0;align-items:stretch}
  .org li::before,.org li::after,.org ul ul::before{display:none}
  .person,.person.top{width:100%;height:auto;display:grid!important;grid-template-columns:64px 1fr;gap:0 14px;text-align:left;align-items:center;padding:14px}
  .person .mehr,.person.top .mehr{margin-top:6px!important}
  .avatar,.top .avatar{width:64px;height:64px;font-size:22px;margin:0;grid-row:span 3}
  .person .vita,.person .mehr{grid-column:2}
}
/* Dialog */
.dlg{position:fixed;inset:0;z-index:100;background:rgba(0,22,41,.6);display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
.dlg-box{background:var(--surface);border-radius:24px;max-width:520px;width:100%;padding:28px;max-height:90vh;overflow:auto;position:relative;text-align:center}
.dlg-box .avatar{width:120px;height:120px;font-size:38px}
.dlg-box h3{font-size:24px;color:var(--blau);margin-top:6px}
.dlg-box .rolle{display:inline-block;margin-top:8px;background:var(--himmelblau-hell);color:var(--blau);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.dlg-box p{margin-top:16px;text-align:left;font-size:15.5px;line-height:1.65;white-space:pre-line}
.dlg-x{position:absolute;top:14px;right:16px;background:var(--sand-hell);color:var(--blau);width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1}

/* ---------- Footer ---------- */
.closing{margin-top:56px;background:var(--blau-fill);color:#BFE3F5;text-align:center;padding:30px 20px calc(30px + env(safe-area-inset-bottom));font-size:13px;line-height:1.8}
.closing b{color:#fff}
.closing a{color:#BFE3F5;margin:0 8px}

/* ---------- Formulare, Portal, Verwaltung ---------- */
.nfield{margin-bottom:16px}
.nfield label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blau);margin-bottom:6px}
.feld,.nfield input,.nfield select,.nfield textarea{width:100%;border:1px solid var(--sand);border-radius:12px;padding:12px 14px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--text)}
/* 16px in der App/auf Mobilgeräten, sonst zoomt iOS beim Antippen eines Feldes automatisch hinein und bleibt danach hängen */
@media(max-width:820px){.feld,.nfield input,.nfield select,.nfield textarea{font-size:16px}}
textarea.feld,.nfield textarea{resize:vertical;min-height:90px;line-height:1.5}
.nsubmit{width:100%;background:var(--limette);color:var(--blau-fill);border-radius:999px;padding:15px;font-size:16px;font-weight:800;margin-top:8px;box-shadow:0 4px 10px rgba(211,216,0,.35)}
.btn-zweit{background:var(--himmelblau-hell);color:var(--blau);border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700}
.btn-zweit.danger{background:#fbeae8;color:var(--rot)}
.btn-zweit.on{background:var(--blau-fill);color:#fff}
.narrow{max-width:460px;margin:0 auto}
.hinweis{font-size:12.5px;color:var(--text-muted);line-height:1.55;margin-top:12px}
.meldung{padding:13px 16px;border-radius:12px;font-size:14px;margin-bottom:16px;background:var(--sand-hell);color:var(--blau);font-weight:700;box-shadow:inset 4px 0 0 var(--rot)}
.meldung.ok{background:var(--himmelblau-hell);box-shadow:inset 4px 0 0 var(--gruen)}
.meldung ul{margin:6px 0 0 18px;padding:0;font-weight:400}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.tab{background:var(--himmelblau-hell);color:var(--blau);font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px}
.tab.on{background:var(--blau-fill);color:#fff}
.tab .n{display:inline-block;margin-left:6px;background:var(--limette);color:var(--blau-fill);border-radius:999px;font-size:11px;padding:1px 7px}
.suche{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.suche .feld{flex:1;min-width:200px;border-radius:999px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:var(--surface);border:1px solid var(--border);color:var(--blau);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px}
.chip.on{background:var(--blau-fill);color:#fff}
.datei{display:flex;gap:16px;align-items:flex-start;padding:18px 20px}
.typ{flex:0 0 auto;width:48px;height:48px;border-radius:12px;background:var(--blau-fill);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;letter-spacing:.04em}
.typ.pdf{background:var(--rot)}.typ.xlsx,.typ.xls,.typ.csv{background:var(--gruen)}.typ.pptx,.typ.ppt{background:#c55a11}.typ.zip{background:#6d6d6c}
.datei .t{flex:1;min-width:0}
.datei .t b{color:var(--blau);font-size:16px}
.datei .t small{display:block;color:var(--text-muted);font-size:12px;margin-top:4px}
.tag{display:inline-block;background:var(--himmelblau-hell);color:var(--blau);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin-right:6px}
.pcard{display:flex;gap:14px;align-items:center;padding:16px 18px}
.pcard .avatar{width:54px;height:54px;font-size:18px;margin:0;flex:0 0 auto}
.pcard b{color:var(--blau);display:block}
.pcard span,.pcard a{font-size:13px;color:var(--text-muted);display:block;word-break:break-word}
.tbl{display:grid;gap:8px}
.tr{display:grid;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.tr .feld{padding:8px 10px;font-size:14px;border-radius:10px}
.tr small{color:var(--text-muted);font-size:12px}
.tr.inaktiv{background:var(--sand-hell)}
.m-row{grid-template-columns:1.1fr 1.1fr 1fr 1fr 1.1fr 1fr auto}
.f-row{grid-template-columns:1.4fr 1fr 1.4fr auto auto}
.l-row{grid-template-columns:1fr 1.4fr 1.4fr .8fr auto}
.t-row{grid-template-columns:70px 1fr 1fr 1.6fr 1fr 70px auto}
@media(max-width:980px){.m-row,.f-row,.l-row,.t-row{grid-template-columns:1fr 1fr}}
.upload{background:var(--sand-hell);border-radius:18px;padding:20px;margin-bottom:22px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:700px){.upload{grid-template-columns:1fr}}
.thumb{width:56px;height:56px;border-radius:50%;background:var(--blau-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-btn{padding:0;border:2px solid transparent;cursor:pointer;transition:border-color .15s}
.thumb-btn:hover,.thumb-btn:focus-visible{border-color:var(--himmelblau)}
.fotodlg{position:fixed;inset:0;background:rgba(20,26,32,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))}
.fotodlg-box{background:var(--surface);border-radius:20px;padding:22px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-md)}
.fotodlg-box h3{margin:0 0 4px;color:var(--blau);font-size:17px}
.fotodlg-box p{margin:0 0 16px;font-size:13px;color:var(--text-muted)}
.thumb-drag{width:280px;height:280px;max-width:100%;border-radius:50%;overflow:hidden;cursor:grab;touch-action:none;border:2px solid var(--border);position:relative;margin:0 auto}
.thumb-drag:active{cursor:grabbing;border-color:var(--himmelblau)}
.thumb-drag img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.fotodlg-akt{display:flex;justify-content:center;gap:10px;margin-top:18px}
.sticky-save{position:sticky;bottom:12px;display:flex;justify-content:flex-end;margin-top:18px;z-index:5}
.sticky-save .btn-cta{box-shadow:0 8px 24px rgba(0,50,91,.25)}
.legal h2{margin:30px 0 8px;color:var(--blau);font-size:20px}
.legal p,.legal li{font-size:15px;margin-top:8px}
.platz{background:#fff3cd;padding:0 4px;border-radius:4px}

.reihe{margin-top:8px;display:flex;gap:10px;align-items:stretch}.reihe .nsubmit{flex:1;width:auto;margin:0}.reihe .btn-zweit{margin:0;white-space:nowrap;align-self:stretch}

.person b{overflow-wrap:anywhere}.person:not(.top) .rolle{font-size:10px;padding:3px 6px;max-width:100%;overflow-wrap:normal;line-height:1.3}
.person:not(.top) b{min-height:2.5em;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.person:not(.top) b{min-height:0;display:block}}

/* Gesprächsleitfaden */
.lf-bar{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.lf-modus{display:inline-flex;background:var(--sand-hell);border-radius:999px;padding:4px;gap:2px}
.lf-modus button{border:0;background:transparent;padding:9px 20px;border-radius:999px;font-weight:800;font-size:14px;color:var(--blau);cursor:pointer;font-family:inherit}
.lf-modus button.on{background:var(--blau-fill);color:#fff}
.lf-fort{min-width:220px;flex:1;max-width:340px}.lf-bal{display:block;height:8px;border-radius:99px;background:var(--sand-hell);margin-top:5px;overflow:hidden}.lf-bal span{display:block;height:100%;background:var(--himmelblau);border-radius:99px;transition:width .3s}
.lf-teil{margin:34px 0 14px}.lf-tl{display:inline-block;background:var(--himmelblau);color:#fff;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.lf-teil h2{margin-top:10px;font-size:clamp(24px,4vw,34px);color:var(--blau);letter-spacing:-.02em;line-height:1.1}
.lf-s{margin-bottom:16px;scroll-margin-top:84px}
.lf-k{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}.lf-k h3{flex:1;min-width:180px;color:var(--blau);font-size:20px;line-height:1.2}
.lf-nr{width:42px;height:42px;border-radius:50%;background:var(--blau-fill);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.lf-check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700;color:var(--blau);cursor:pointer;background:var(--sand-hell);padding:7px 14px;border-radius:999px}.lf-check input{width:18px;height:18px}
.lf-b{border-radius:16px;padding:14px 18px;margin-top:10px}.lf-b p{margin:4px 0 0;line-height:1.55}
.lf-l{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.lf-f{background:var(--himmelblau-hell);box-shadow:inset 4px 0 0 var(--himmelblau)}.lf-f .lf-l{color:var(--himmelblau)}.lf-f p{color:var(--blau);font-weight:600;font-size:17px}
.lf-f.zu{cursor:pointer;background:var(--surface);border:2px dashed var(--himmelblau);box-shadow:none}.lf-f.zu p{color:var(--text-muted);font-weight:500;font-size:15px}.lf-f.zu:hover{background:var(--himmelblau-hell)}
.lf-g{background:var(--sand-hell)}.lf-g .lf-l{color:var(--text-muted)}.lf-g p{font-size:15px;font-style:italic}
.lf-u{background:var(--limette);color:var(--blau-fill)}.lf-u .lf-l{color:var(--blau-fill)}.lf-u p{font-weight:700}
.lf-h{margin:18px 0 0;color:var(--blau);font-size:15px}.lf-p{margin-top:8px}
.lf-ul{margin:8px 0 0 20px;padding:0;display:grid;gap:4px}
.lf-kern{margin-top:26px;background:var(--limette);color:var(--blau-fill);border-radius:20px;padding:22px 26px}.lf-kern p{font-size:clamp(18px,2.6vw,24px);font-weight:800;line-height:1.3;margin-top:6px}
@media print{.apple-nav,.lf-bar,.chips,.closing,.btn-zweit,.lf-check{display:none!important}.lf-f.zu{border-style:solid}}

.lf-c{background:var(--sand-hell);border:1px solid var(--border)}.lf-c .lf-l{color:var(--text-muted)}.lf-c p{font-weight:600;color:var(--text)}
.lf-x{background:var(--surface);border:1px dashed var(--sand)}.lf-x .lf-l{color:var(--text-faint)}.lf-x p{color:var(--text-faint);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.lf-n{margin-top:12px;font-size:13px;color:var(--text-muted);line-height:1.5;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}

/* Vision: Markt, Standorte */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi{background:var(--sand-hell);border-radius:20px;padding:24px}
.kpi b{display:block;font-size:clamp(30px,4.2vw,46px);color:var(--blau);letter-spacing:-.03em;line-height:1}
.kpi span{display:block;margin-top:10px;font-size:15px;color:var(--text);line-height:1.45}
.band-info{margin-top:16px;background:var(--limette);color:var(--blau-fill);border-radius:20px;padding:18px 24px;font-size:16px;line-height:1.5}.band-info b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.quelle{margin-top:12px;font-size:12px;color:var(--text-muted);line-height:1.5}
.zeitstrahl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:8px}
.zeitstrahl::before{content:'';position:absolute;left:8%;right:8%;top:19px;height:3px;background:var(--sand)}
.zeitstrahl>div{position:relative;text-align:center}
.zeitstrahl b{display:block;width:40px;height:40px;line-height:40px;margin:0 auto;border-radius:50%;background:var(--blau-fill);color:#fff;font-size:12px;position:relative;z-index:1;letter-spacing:0}
.zeitstrahl span{display:block;margin-top:10px;font-weight:700;color:var(--blau);font-size:15px}
.zeitstrahl .ziel b{background:var(--limette);color:var(--blau-fill);width:48px;height:48px;line-height:48px;margin-top:-4px;font-size:13px}
.bar-list{display:grid;gap:8px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:minmax(120px,210px) 1fr minmax(150px,230px);gap:12px;align-items:center;font-size:14px}
.bar-row .bn{color:var(--blau);font-weight:700}.bt{display:block;height:12px;background:var(--sand-hell);border-radius:99px;overflow:hidden}.bt span{display:block;height:100%;background:var(--himmelblau);border-radius:99px}
.bar-row .bv{font-weight:700;color:var(--blau)}.bar-row small{font-weight:400;color:var(--text-muted);font-size:12px}
@media(max-width:860px){.kpi-grid{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr;gap:4px}.zeitstrahl b{width:34px;height:34px;line-height:34px;font-size:11px}.zeitstrahl::before{top:16px}.zeitstrahl span{font-size:12px}}

/* Vorschau (Wissen) */
.vs{position:fixed;inset:0;z-index:200;background:rgba(0,22,41,.82);display:flex;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom))}
.vs-in{position:relative;background:#E9E9E1;border-radius:20px;margin:0 auto;width:100%;max-width:1180px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.vs-in.vs-zoom{overflow:auto;-webkit-overflow-scrolling:touch}
/* In der nativen App ohne Funktion (kein Drucken/Speichern-Dialog im WebView) - dort per html.in-app ausgeblendet */
html.in-app .web-only{display:none!important}
.vs-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#E9E9E1}
.vs-bild{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:14px}.vs-bild img{max-width:100%;max-height:100%}
.vs-titel{position:absolute;left:14px;top:12px;max-width:calc(100% - 110px);background:rgba(0,50,91,.9);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.vs-leiste{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:2}
.vs-k{position:relative;width:44px;height:44px;border-radius:50%;border:0;background:var(--blau-fill);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s,background .15s;font-family:inherit}
.vs-k:hover{transform:scale(1.08);background:var(--himmelblau)}
.vs-k.prim{background:var(--limette);color:var(--blau-fill)}.vs-k.prim:hover{background:#e6ea33}
.vs-k.an{background:var(--limette);color:var(--blau-fill)}
.vs-k span{position:absolute;right:54px;top:50%;transform:translateY(-50%);background:var(--blau-fill);color:#fff;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.vs-k:hover span,.vs-k:focus-visible span{opacity:1}
.vs-in:fullscreen{max-width:none;border-radius:0}
@media(max-width:640px){.vs{padding:0}.vs-in{border-radius:0}.vs-leiste{top:auto;bottom:14px;right:50%;transform:translateX(50%);flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px)}.vs-k span{display:none}}

/* Struktur als Organigramm */
.org-s .person{cursor:default;height:auto;min-height:196px;width:132px}.org-s .person.top{width:170px}.org-s .person:hover{transform:none;box-shadow:var(--shadow-sm)}
.kst{display:inline-block;margin-top:auto;padding-top:0;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;line-height:1.2}
.org-s .person .rolle+.rolle,.org-s .person>.rolle{margin-bottom:0}
.org-s .person .kst{margin-top:8px}
.kst.aktiv{background:var(--limette);color:var(--blau-fill)}.kst.wartet{background:var(--sand);color:var(--text)}.kst.leer{background:var(--surface);color:var(--text-faint);border:1px dashed #b9b9ab}

/* Meine Struktur: volle Bildschirmbreite und Vollbild */
.wrap.sektion.struktur{max-width:none;padding-inline:clamp(16px,2.5vw,48px)}
.struktur .tbl,.struktur .card,.struktur form.card{max-width:1100px}
.org-box{position:relative;background:var(--surface);border-radius:24px}
.org-box .orgzu{display:none}
.org-box:fullscreen,.org-box.vollbild{background:var(--surface);overflow:auto;padding:56px 24px 24px;border-radius:0}
.org-box.vollbild{position:fixed;inset:0;z-index:300}
.org-box:fullscreen .orgzu,.org-box.vollbild .orgzu{display:inline-block;position:fixed;top:calc(14px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));z-index:5;border:0;background:var(--blau-fill);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer;font-family:inherit}
.org-box:fullscreen .org-scroll,.org-box.vollbild .org-scroll{overflow:auto}
body.org-offen{overflow:hidden}
@media(max-width:900px){#orgvoll{display:none}}

/* Vita-Karte: nach vorne heben, um 180 Grad drehen, Rückseite zeigt die Kurzvita */
.dlg{background:rgba(0,22,41,0);transition:background .5s ease}.dlg.an{background:rgba(0,22,41,.62)}
.flip{position:fixed;z-index:101;perspective:1500px;transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1)}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:box-shadow .55s ease;overflow:hidden}
.flip.hoch .face{box-shadow:0 30px 70px rgba(0,22,41,.45)}
.face.front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 10px;text-align:center}
.face.front .avatar{transition:width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),font-size .55s;margin:0 auto}
.flip.hoch .face.front .avatar{width:120px;height:120px;font-size:38px}
.face.front b{color:var(--blau);font-size:15px;line-height:1.25}
.face.front .rolle,.face.back .rolle{display:inline-block;background:var(--himmelblau-hell);color:var(--blau);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.face.back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 26px 22px;text-align:center;background:linear-gradient(180deg,var(--surface) 0,var(--sand-hell) 100%)}
.face.back h3{font-size:22px;color:var(--blau);margin:0}
.face.back .vita-txt{margin-top:10px;text-align:left;font-size:15px;line-height:1.65;color:var(--text);white-space:pre-line;overflow:auto;width:100%;flex:1;padding-right:4px}
.face.back .dlg-x{position:absolute;top:12px;right:14px}
@media(prefers-reduced-motion:reduce){.flip,.face,.dlg{transition:none}}

/* Struktur: Umsatz und Vergütung, drehbare Karten */
.sv-monat{display:flex;align-items:center;gap:10px;margin:0 0 12px}.sv-monat b{color:var(--blau);min-width:130px;text-align:center}
.sv-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.sv-sum>div{background:var(--sand-hell);border-radius:12px;padding:10px 14px}.sv-sum>.l{background:var(--limette)}
.sv-sum small{display:block;font-size:12px;color:var(--text);white-space:nowrap}.sv-sum b{font-size:18px;color:var(--blau);white-space:nowrap}.sv-sum>.l small,.sv-sum>.l b{color:var(--blau-fill)}
.org-s .person.pf{perspective:900px;padding:0;background:transparent;border:0;box-shadow:none;display:block!important;height:244px;outline-offset:3px}
.pf-i{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.person.pf.on .pf-i{transform:rotateY(180deg)}
.pf-f,.pf-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;box-sizing:border-box}
.pf-f{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);padding:16px 10px;display:flex;flex-direction:column;align-items:center}
.person.top .pf-f{border-color:var(--himmelblau)}
.person.pf.fehlt .pf-f{border:2px solid #C0392B}
.pfehlt{margin-top:8px;font-size:11px;font-weight:700;background:#fdecea;color:#C0392B;border-radius:999px;padding:4px 8px;white-space:nowrap}
.pf-b{background:var(--blau-fill);color:#fff;transform:rotateY(180deg);padding:14px 10px;text-align:left;font-size:12px;overflow:hidden}
.pf-b .pt{font-weight:800;font-size:13px;margin-bottom:6px;white-space:nowrap}
.pf-b .pk{font-size:11px;font-weight:700;color:#9fd8f4;margin-top:8px;white-space:nowrap}
.pz{display:flex;justify-content:space-between;gap:6px;white-space:nowrap;padding:3px 0;border-top:1px solid rgba(255,255,255,.2)}.pz b{font-weight:800}
.pz.li{background:var(--limette);color:var(--blau-fill);border-radius:6px;padding:3px 6px;border:0;margin-top:2px}
.person.pf:focus-visible{outline:2px solid var(--himmelblau)}
@media(max-width:640px){.org-s .person.pf,.org-s .person.pf.top{width:100%;display:block!important}.org-s .person.pf .pf-f{display:flex;align-items:center;justify-content:center;text-align:center}.sv-sum{grid-template-columns:repeat(2,1fr)}
/* Liste in "Meine Struktur": auf dem Handy als gestapelte Karte statt als breite, seitlich scrollende Tabelle */
.sv-tbl{overflow-x:visible}.sv-kopf{display:none}
.sv-z{grid-template-columns:1fr!important;gap:8px}
.sv-z>span{display:flex;justify-content:space-between;align-items:center;background:var(--sand-hell);border-radius:10px;padding:8px 12px;text-align:left;white-space:normal}
.sv-z>span::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--blau);margin-right:8px}
.sv-z>span.v{background:var(--himmelblau-hell)}}
.sv-tbl{overflow-x:auto}.sv-z>span,.sv-z b{white-space:nowrap}.sv-z>span{text-align:right;font-size:14px}.sv-z .v{background:var(--himmelblau-hell);color:var(--blau);font-weight:700;border-radius:8px;padding:4px 8px}
.sv-kopf{background:var(--blau-fill);color:#fff;font-weight:700;font-size:12px}.sv-kopf>span:first-child{text-align:left}
.sv-z.fehlt{border:2px solid #C0392B;background:#fdecea}.sv-z.sv-ich{border-color:var(--himmelblau)}
@media(prefers-reduced-motion:reduce){.pf-i{transition:none}}
.person .pz b{white-space:nowrap;flex-shrink:0;display:inline;font-size:12px;line-height:1.3;color:inherit}.person .pz span{font-size:12px;line-height:1.3}
.pf-b .pt,.pf-b .pk{line-height:1.3}
.person:not(.top) .pz b,.person .pz b{min-height:0;justify-content:flex-end;align-items:baseline}

/* Organigramm: alle Karten gleich groß, gleiche Rundung, gleicher Aufbau */
.org-s .person,.org-s .person.top,.org-s .person.tief{width:148px;min-height:244px;border-radius:20px;box-sizing:border-box}
.org-s .person.pf,.org-s .person.pf.top,.org-s .person.pf.tief{height:244px;min-height:0}
.org-s .person .avatar,.org-s .person.top .avatar{width:68px;height:68px;font-size:24px;margin:0 auto 10px;flex:0 0 auto}
.org-s .person .pf-f b,.org-s .person>div>b{min-height:2.5em;display:flex;align-items:center;justify-content:center;font-size:14.5px;line-height:1.25;text-align:center}
.org-s .person .pf-f,.org-s .person:not(.pf){padding:16px 10px}
.org-s .person .pf-f .rolle,.org-s .person>div .rolle,.org-s .person>.rolle{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.pf-f,.pf-b{border-radius:20px}
.org-s .person .pf-b .pz b{min-height:0;display:inline;font-size:12px}
.pz.li{padding:2px 6px}.pz{padding:2px 0}.pf-b .pk{margin-top:6px}
@media(max-width:640px){.org-s .person,.org-s .person.top,.org-s .person.tief{width:100%}.org-s .person.pf,.org-s .person.pf.top,.org-s .person.pf.tief{width:100%;height:244px}}

/* Struktur: Zähler der Termine im Team (gleiches Design wie in der Monatsplanung) */
.sv-zeile{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:10px}
.sv-zt{font-size:13px;font-weight:800;color:var(--blau)}
.zaehler{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.zaehler .z{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--blau);white-space:nowrap}
.zaehler b{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-sizing:border-box;font-variant-numeric:tabular-nums}
.zaehler .z0{background:var(--himmelblau);color:#fff}.zaehler .z1{background:var(--blau-fill);color:#fff}.zaehler .z2{background:var(--limette);color:var(--blau-fill)}.zaehler .z3{background:var(--sand);color:var(--blau-fill)}.zaehler .z4{background:var(--himmelblau-hell);border:2px solid var(--himmelblau);color:var(--blau)}

/* Verwaltung: Reiter in Gruppen, damit man auf einen Blick sieht, wo was liegt */
.tabgruppen{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 24px;align-items:flex-start}
.tabgruppe{display:flex;flex-direction:column;gap:7px}
.tabgruppe-titel{font-size:11px;letter-spacing:1.2px;font-weight:700;color:var(--himmelblau);text-transform:uppercase}
.tabgruppe .tabs{margin:0}
@media(max-width:700px){.tabgruppen{gap:14px}.tabgruppe{width:100%}}

/* Power-Day-Karte im Events-Bereich: Anmeldestand auf einen Blick */
/* Doppelte Klasse, weil a.card{display:block} weiter oben sonst gewinnt */
.card.pdcard{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px;text-decoration:none}
.pdcard>div{flex:1 1 240px;min-width:0}
.pdcard>.btn-zweit{flex:0 0 auto}
.pdstand{margin:0;font-size:14px;font-weight:700}
.pdstand.ok{color:#1d7a3e}
.pdstand.warn{color:#8a5a00}
/* Im Dunkelmodus waeren die beiden Farben oben auf der dunklen Karte kaum zu lesen */
:root[data-theme="dark"] .pdstand.ok{color:#7ddba0}
:root[data-theme="dark"] .pdstand.warn{color:#e3b55c}