/* Bewertungs-Agent · Oberfläche
   Hell, ruhig, informationsdicht. Navy als Tinte, Gold für Sterne und Hervorhebung. */
:root{
  /* Cookie-POS-Design: helles Blaugrau, Navy als Tinte, Blau für Aktionen, Gold für Marke und Sterne */
  --bg:#F2F6FB; --bg2:#E8EEF6; --flaeche:#FFFFFF; --flaeche2:#F7FAFD;
  --text:#10233F; --text2:#3A4B63; --grau:#667085; --grau2:#8B95A5; --linie:#DDE5EE; --linie2:#EBF0F6;
  --navy:#10233F; --navy2:#17385F; --navy-h:#EAF3FF; --navy-hh:#F3F8FE;
  --blau:#1267DC; --blau-d:#0A52BD; --blau-h:#EAF3FF;
  --aktion:#E8F2FB; --aktion-rand:#C4DBEE; --aktion-text:#1D527B; --aktion-hover:#DCEBF8; --aktion-druck:#D1E5F5;
  --gold:#B8924A; --gold-d:#80642C; --gold-h:#F5EEDF; --gold-hell:#D8BD82; --creme:#F7E8C8; --stern:#D2A23B;
  --akzent:var(--blau); --akzent-h:var(--blau-h); --akzent-d:var(--blau-d);
  --gruen:#25815D; --gruen-h:#E8F4ED; --gelb:#A56512; --gelb-h:#FBF1E3; --rot:#B8454F; --rot-h:#FBECEE;
  --r:20px; --r2:10px; --r3:7px;
  --schatten:0 1px 2px rgba(16,35,63,.035),0 18px 48px -26px rgba(25,33,43,.20);
  --schatten-h:0 2px 6px rgba(26,42,63,.06),0 22px 54px -24px rgba(16,35,63,.26);
  --schatten2:0 20px 60px rgba(16,35,63,.16);
  --glas:rgba(255,255,255,.74); --glas-rand:rgba(255,255,255,.94); --glas-innen:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(10,31,61,.045);
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Display","Segoe UI Variable","Segoe UI","Inter",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI","Inter",system-ui,sans-serif;
  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --z-leiste:20; --z-nav:40; --z-palette:80; --z-toast:90;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--schrift);background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--navy);text-underline-offset:2px}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
.zahl,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grau{color:var(--grau)} .klein{font-size:12.5px} .fett{font-weight:600}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@keyframes auf{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Formulare */
input,select,textarea{width:100%;border:1px solid var(--linie);border-radius:var(--r2);padding:9px 11px;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s}
input:hover,select:hover,textarea:hover{border-color:#CDD3DF}
input:focus,select:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(16,35,63,.10)}
textarea{min-height:110px;resize:vertical;line-height:1.55}
label{display:block;font-size:12.5px;font-weight:500;color:var(--grau);margin:0 0 12px}
label>input,label>select,label>textarea{margin-top:5px;color:var(--text);font-weight:400;font-size:14.5px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:var(--r2);padding:8px 14px;background:var(--navy);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .18s,box-shadow .18s,transform .08s;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 10px -6px rgba(16,35,63,.6)}
.knopf:hover{background:var(--navy2)} .knopf:active{transform:translateY(1px) scale(.99)} .knopf:disabled{opacity:.5;cursor:default;transform:none}
.knopf.zweit{background:#fff;color:var(--text);border-color:var(--linie);box-shadow:0 1px 2px rgba(16,35,63,.05)} .knopf.zweit:hover{border-color:#CBD2DF;background:var(--flaeche2)}
.knopf.gruen{background:var(--gruen);box-shadow:0 4px 10px -6px rgba(23,122,76,.7)} .knopf.gruen:hover{background:#12673F}
.knopf.rot{background:#fff;color:var(--rot);border-color:#F0C7BE;box-shadow:none}
.knopf.leise{background:none;color:var(--text2);padding:7px 9px;box-shadow:none} .knopf.leise:hover{background:var(--navy-hh);color:var(--text)}
.knopf.klein{padding:6px 11px;font-size:12.5px}
.knopf svg{width:16px;height:16px}
.karte{background:var(--flaeche);border:0;border-radius:var(--r);box-shadow:var(--schatten)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:var(--r3);background:var(--linie2);color:var(--text2);white-space:nowrap;text-decoration:none;line-height:1.6}
.chip.gruen{background:var(--gruen-h);color:var(--gruen)} .chip.gelb{background:var(--gelb-h);color:var(--gelb)} .chip.rot{background:var(--rot-h);color:var(--rot)} .chip.blau{background:var(--navy-h);color:var(--navy)}
.chip.rand{background:#fff;box-shadow:inset 0 0 0 1px var(--linie);font-weight:500}
a.chip:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.sterne{color:var(--stern);letter-spacing:.5px;white-space:nowrap} .sterne i{font-style:normal;color:#D9DDE6}
.meldung{background:var(--rot-h);color:var(--rot);border-radius:var(--r2);padding:10px 12px;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:11px 16px 11px 14px;border-radius:12px;font-size:13.5px;box-shadow:var(--schatten2);z-index:var(--z-toast);max-width:calc(100% - 32px);animation:auf .22s ease-out;border-left:3px solid var(--gold)}

/* Gerüst: schwebende Leiste links */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100dvh}
.rail{margin:12px 0 12px 12px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-radius:20px;box-shadow:var(--schatten);padding:14px 10px;position:sticky;top:12px;height:calc(100dvh - 24px);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:650;font-size:16.5px;padding:4px 8px 16px;white-space:nowrap;letter-spacing:-.02em}
.logo{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--navy);color:var(--gold);box-shadow:0 6px 14px -8px rgba(16,35,63,.8)}
.logo svg{width:17px;height:17px}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;color:var(--text2);text-decoration:none;font-weight:500;font-size:14px;transition:background .15s,color .15s}
.nav a:hover{background:var(--navy-hh);color:var(--text)}
.nav a.aktiv{background:var(--navy-h);color:var(--navy);font-weight:600}
.nav a.aktiv::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.nav a svg{width:18px;height:18px;flex:none}
.nav .n{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;background:var(--rot);color:#fff;border-radius:6px;padding:0 6px;line-height:18px}
.nav .n.leise{background:var(--navy-h);color:var(--navy)}
.nav-trenner{height:1px;background:var(--linie2);margin:10px 8px}
.rail .unten{margin-top:auto;padding:12px 8px 2px;border-top:1px solid var(--linie2);font-size:12.5px}
.haupt{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-leiste);display:flex;align-items:center;gap:10px;padding:14px clamp(16px,2.5vw,34px) 10px;background:linear-gradient(var(--bg) 65%,rgba(242,246,251,0))}
.marken{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;background:#fff;border-radius:13px;padding:4px;box-shadow:var(--schatten);width:max-content;max-width:100%;flex:0 1 auto;margin-right:auto}
.marken button{border:0;background:none;border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;color:var(--text2);transition:background .15s,color .15s}
.marken button:hover{background:var(--navy-hh)}
.marken button .punkt{width:8px;height:8px;border-radius:3px}
.marken button.aktiv{background:var(--navy);color:#fff}
.suche-knopf{display:inline-flex;align-items:center;gap:8px;border:0;background:#fff;border-radius:12px;padding:8px 11px;color:var(--grau);font-size:13px;cursor:pointer;white-space:nowrap;box-shadow:var(--schatten);transition:box-shadow .18s}
.suche-knopf:hover{box-shadow:var(--schatten-h)}
.suche-knopf kbd,.kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--linie);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--grau);background:#fff}
.inhalt{padding:10px clamp(16px,2.5vw,34px) 72px;min-width:0;max-width:1480px;width:100%}
.inhalt>*{animation:auf .28s ease-out both}
.inhalt>*:nth-child(2){animation-delay:.03s}.inhalt>*:nth-child(3){animation-delay:.06s}.inhalt>*:nth-child(4){animation-delay:.09s}.inhalt>*:nth-child(5){animation-delay:.12s}
.kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:8px 0 20px}
.kopf h1{font-family:var(--display);font-size:30px;letter-spacing:-.035em;font-weight:650}
.kopf p{margin:6px 0 0;color:var(--grau)}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hinweis{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border-radius:14px;padding:12px 16px 12px 18px;margin-bottom:14px;font-size:13.5px;box-shadow:var(--schatten);position:relative;overflow:hidden}
.hinweis::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--navy)}
.hinweis.gelb::before{background:var(--gold)} .hinweis.rot::before{background:var(--rot)} .hinweis.gruen::before{background:var(--gruen)}
.hinweis.rot{background:linear-gradient(90deg,#FFF6F4,#fff 60%)} .hinweis.gelb{background:linear-gradient(90deg,#FFFBEF,#fff 60%)} .hinweis.gruen{background:linear-gradient(90deg,#F2FAF6,#fff 60%)}
.hinweis b{display:block;margin-bottom:1px}

/* Kennzahlen als eine Leiste */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-bottom:18px;background:#fff;border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden}
.kacheln .karte{box-shadow:none;border-radius:0;background:none}
.kachel{padding:16px 18px 15px;cursor:pointer;transition:background .15s;position:relative}
.kachel+.kachel::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:1px;background:var(--linie2)}
.kachel:hover{background:var(--navy-hh)}
.kachel .w{font-family:var(--display);font-size:32px;font-weight:650;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.kachel .t{color:var(--grau);font-size:12.5px;margin-top:7px;display:flex;align-items:center;gap:6px}
.kachel .t::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--linie)}
.kachel.gruen .t::before{background:var(--gruen)} .kachel.gelb .t::before{background:var(--gold)} .kachel.rot .t::before{background:var(--rot)} .kachel.blau .t::before{background:var(--navy)}
.kachel.rot .w{color:var(--rot)}
.raster{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.block{padding:18px 20px}
.block h2{font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.02em;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.block h2 .grau{font-family:var(--schrift);font-weight:500;font-size:12.5px;letter-spacing:0}

/* Sterne-Gewinn */
.gewinn{display:grid;grid-template-columns:minmax(260px,auto) 1fr;gap:28px;align-items:center;padding:22px 24px;margin-bottom:16px;background:radial-gradient(420px 200px at 0% 0%,rgba(184,146,74,.13),transparent 70%),#fff}
.gewinn .gross{font-family:var(--display);font-size:52px;font-weight:650;letter-spacing:-.05em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.gewinn .gross small{font-size:22px;color:var(--stern);letter-spacing:0}
.gewinn .pfeil{color:var(--gruen)}
.sternmeter{position:relative;display:inline-block;font-size:22px;letter-spacing:3px;line-height:1;margin-top:10px}
.sternmeter .leer{color:#DEE2EA}.sternmeter .voll{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:var(--stern)}
.gewinn-zeilen{display:grid;gap:10px}
.gewinn-zeile{display:grid;grid-template-columns:minmax(170px,1.3fr) 1.7fr 92px;gap:12px;align-items:center;font-size:13px}
.balken{height:8px;border-radius:99px;background:var(--linie2);position:relative;overflow:hidden}
.balken>i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#E4C466,var(--stern))}
.balken>b{position:absolute;top:0;bottom:0;background:var(--gruen);border-radius:0 99px 99px 0}

/* Tabellen & Listen */
.tabelle-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}
.tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.tabelle th{text-align:left;color:var(--grau);font-weight:500;font-size:12px;padding:8px 10px;border-bottom:1px solid var(--linie)}
.tabelle td{padding:11px 10px;border-bottom:1px solid var(--linie2);vertical-align:middle}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tr.klickbar{cursor:pointer} .tabelle tr.klickbar:hover td{background:var(--navy-hh)}
.tabelle tr.klickbar td:first-child{border-radius:10px 0 0 10px}.tabelle tr.klickbar td:last-child{border-radius:0 10px 10px 0}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:10px 0;border-top:1px solid var(--linie2);font-size:13.5px}
.liste li:first-child{border-top:0;padding-top:2px}
.liste .z{color:var(--grau);font-size:12px;margin-top:2px}

/* Löschchance */
.ring{--p:0;--f:var(--grau);width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--f) calc(var(--p)*1%),var(--linie2) 0);display:grid;place-items:center;flex:none}
.ring::after{content:attr(data-w);width:35px;height:35px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600}
.ring.gross{width:68px;height:68px}.ring.gross::after{width:54px;height:54px;font-family:var(--display);font-size:17px;letter-spacing:-.03em}
.lc{font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 6px;border-radius:6px}
.lc.hoch{background:var(--gruen-h);color:var(--gruen)} .lc.mittel{background:var(--gold-h);color:var(--gold-d)} .lc.tief{background:var(--linie2);color:var(--grau)}

/* Posteingang */
.split{display:grid;grid-template-columns:minmax(330px,430px) 1fr;gap:16px;align-items:start}
.filterleiste{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.seg{display:inline-flex;background:#fff;border-radius:13px;padding:4px;gap:2px;flex-wrap:wrap;box-shadow:var(--schatten)}
.seg button{border:0;background:none;border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover{background:var(--navy-hh)}
.seg button.aktiv{background:var(--navy);color:#fff}
.filterleiste select,.filterleiste input{width:auto;padding:7px 10px;font-size:13px;border-color:transparent;box-shadow:var(--schatten)}
.postliste{max-height:calc(100dvh - 232px);overflow-y:auto;padding:6px}
.zeile{position:relative;display:grid;grid-template-columns:18px 1fr auto;gap:10px;padding:12px 12px 12px 14px;border-radius:13px;cursor:pointer;align-items:start;transition:background .15s}
.zeile+.zeile{margin-top:2px}
.zeile::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:3px;border-radius:3px;background:transparent}
.zeile[data-u="kandidat"]::before{background:var(--gruen)} .zeile[data-u="pruefen"]::before{background:var(--gold)}
.zeile:hover{background:var(--navy-hh)}
.zeile.aktiv{background:var(--navy-h)}
.zeile input{width:15px;height:15px;margin-top:3px;accent-color:var(--navy)}
.zeile .o{display:flex;gap:7px;align-items:center;font-size:13.5px;min-width:0}
.zeile .o b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zeile .s{color:var(--text2);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px}
.zeile .u{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.zeile .r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.massen{position:sticky;bottom:6px;display:flex;gap:8px;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;border-radius:13px;padding:8px 10px 8px 14px;margin:6px;font-size:13px;box-shadow:var(--schatten2);animation:auf .2s ease-out}
.detail{position:sticky;top:70px;max-height:calc(100dvh - 86px);overflow-y:auto}
.detail-kopf{padding:20px 22px 18px;display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.detail-text{white-space:pre-line;font-size:15px;line-height:1.6;margin:12px 0 0;color:var(--text);max-width:68ch}
.detail-text.leer{color:var(--grau);font-style:italic}
.einschaetzung{display:flex;gap:16px;align-items:center;padding:16px 22px;background:linear-gradient(180deg,var(--navy-hh),#fff);border-top:1px solid var(--linie2);border-bottom:1px solid var(--linie2)}
.reiter{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--linie2);overflow-x:auto}
.reiter button{border:0;background:none;padding:13px 10px 11px;font-size:13.5px;font-weight:600;color:var(--grau);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s}
.reiter button:hover{color:var(--text)}
.reiter button.aktiv{color:var(--navy);border-bottom-color:var(--gold)}
.reiter button .n{font-family:var(--mono);font-size:11px;margin-left:5px;color:var(--grau);background:var(--linie2);border-radius:5px;padding:0 5px}
.feld{padding:18px 22px}
.signale{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.signal{display:inline-flex;gap:7px;align-items:center;font-size:12px;background:#fff;border-radius:8px;padding:4px 9px;box-shadow:inset 0 0 0 1px var(--linie)}
.signal i{width:7px;height:7px;border-radius:2px;background:var(--gold)}
.signal.plus i{background:var(--rot)} .signal.minus i{background:var(--gruen)}
.frage{background:var(--gold-h);border-radius:12px;padding:12px 14px;margin:12px 0;font-size:13.5px}
.frage form{display:flex;gap:8px;margin-top:9px}
.leer-zustand{text-align:center;padding:52px 16px;color:var(--grau)}

/* Eskalationsleiter */
.leiter{display:grid;margin-top:4px}
.stufe{display:grid;grid-template-columns:32px 1fr;gap:14px;position:relative;padding-bottom:18px}
.stufe:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--linie)}
.stufe .kreis{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:12.5px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linie);color:var(--grau);z-index:1}
.stufe.fertig .kreis{background:var(--gruen);box-shadow:none;color:#fff}
.stufe.fertig:not(:last-child)::before{background:var(--gruen)}
.stufe.jetzt .kreis{background:var(--navy);box-shadow:0 0 0 4px var(--gold-h);color:var(--gold)}
.stufe .titel{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:32px}
.stufe .inhalt-s{font-size:13px;color:var(--text2);max-width:70ch}
.stufe.gesperrt .titel{color:var(--grau);font-weight:500}
.stufe textarea{margin:10px 0;font-size:13px;min-height:130px;background:var(--flaeche2)}

/* Board */
.board{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px}
.spalte{background:var(--bg2);border-radius:16px;padding:8px;min-height:220px}
.spalte h3{font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--text);padding:6px 8px 10px;display:flex;justify-content:space-between;align-items:center}
.spalte h3 .mono{font-size:11px;background:#fff;border-radius:6px;padding:1px 6px;color:var(--text2)}
.bkarte{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:8px;cursor:pointer;font-size:13px;box-shadow:var(--schatten);transition:box-shadow .18s,transform .18s}
.bkarte:hover{box-shadow:var(--schatten-h);transform:translateY(-1px)}
.bkarte .k{display:flex;justify-content:space-between;gap:6px;align-items:center}
.bkarte p{margin:6px 0 8px;color:var(--text2);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Diagramme */
.diagramm{width:100%;height:auto;display:block}
.diagramm text{font-family:var(--mono);font-size:10px;fill:var(--grau)}
.thema{display:grid;grid-template-columns:minmax(130px,180px) 1fr auto;gap:12px;align-items:center;padding:7px 8px;margin:0 -8px;border-radius:10px;font-size:13px;cursor:pointer;transition:background .15s}
.thema:hover{background:var(--navy-hh)}
.thema .balken{height:10px}
.thema .balken>i{background:linear-gradient(90deg,#E6B8AF,var(--rot))}
.trend{font-family:var(--mono);font-size:11px;font-weight:600}
.trend.auf{color:var(--rot)} .trend.ab{color:var(--gruen)}

/* Befehlspalette */
.palette-hg{position:fixed;inset:0;background:rgba(21,32,54,.32);backdrop-filter:blur(3px);z-index:var(--z-palette);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.palette{width:min(640px,100%);background:#fff;border-radius:18px;box-shadow:var(--schatten2);overflow:hidden;animation:auf .18s ease-out}
.palette input{border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:17px 20px;font-size:16px;box-shadow:none}
.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow-y:auto}
.palette li{padding:10px 12px;border-radius:10px;cursor:pointer;display:flex;gap:10px;align-items:center;font-size:13.5px}
.palette li.aktiv{background:var(--navy-h)}
.palette li .grau{margin-left:auto;font-size:12px}

/* Druck (Fall-Akte, Bericht) */
.papier{background:#fff;max-width:880px;margin:0 auto;padding:34px 38px;border-radius:var(--r);box-shadow:var(--schatten)}
.papier h1{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin:4px 0}.papier h2{font-family:var(--display);font-size:15px;margin:22px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--navy)}
.papier table{width:100%;border-collapse:collapse;font-size:12.5px}.papier th{text-align:left;background:var(--flaeche2);padding:6px}.papier td{padding:6px;border-bottom:1px solid var(--linie2);vertical-align:top}
.papier .zitat{border-left:3px solid var(--gold);padding:8px 14px;white-space:pre-line;font-size:13px;background:var(--flaeche2);border-radius:0 8px 8px 0}
@media print{
  body{background:#fff}.rail,.topbar,.mobil-nav,.nicht-drucken{display:none!important}
  .app{display:block}.inhalt{padding:0}.papier{box-shadow:none;padding:0;max-width:none}
  .papier tr{break-inside:avoid} @page{size:A4;margin:14mm}
}

/* Startseite */
.lp{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 48px}
.lp-kopf{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.lp-held{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:30px 0 52px}
.lp-held h1{font-family:var(--display);font-size:clamp(34px,4.8vw,56px);letter-spacing:-.045em;font-weight:650;margin:14px 0 16px;line-height:1.02}
.lp-held h1 em{font-style:normal;color:var(--gold-d);background:linear-gradient(transparent 62%,var(--gold-h) 62%)}
.lead{font-size:17px;color:var(--text2);max-width:540px;line-height:1.6}
.ueber{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:600;font-size:12.5px;background:#fff;border-radius:99px;padding:5px 12px 5px 8px;box-shadow:var(--schatten)}
.ueber i{font-style:normal;color:var(--stern)}
.haken{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px}
.haken li{padding-left:28px;position:relative;color:var(--text2)}
.haken li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23C9A93B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.formular{padding:24px}
.tabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;border:0;background:none;padding:8px;border-radius:9px;font-weight:600;color:var(--grau);cursor:pointer}
.tabs button.aktiv{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,35,63,.1)}
.vorschau{position:relative;margin-top:-4px}
.vorschau .muster{padding:18px 20px;border-radius:16px;background:#fff;box-shadow:var(--schatten-h);font-size:13px}
.vorschau .muster+.muster{margin:26px 0 0;position:relative}
.lp-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border-radius:var(--r);box-shadow:var(--schatten);overflow:hidden}
.lp-schritte .karte{padding:20px;box-shadow:none;border-radius:0;position:relative}
.lp-schritte .karte+.karte::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:1px;background:var(--linie2)}
.lp-schritte b{font-family:var(--mono);color:var(--gold-d);font-size:12px}
.lp-schritte h3{font-family:var(--display);font-size:18px;letter-spacing:-.02em;margin-top:6px}
.lp-schritte p{margin:6px 0 0;color:var(--grau);font-size:13.5px}
.lp-fuss{display:flex;gap:18px;justify-content:center;margin-top:26px;font-size:12.5px}.lp-fuss a{color:var(--grau)}

/* Handy */
.mobil-nav{display:none}
.nur-schmal{display:none}
.raster>*,.raster3>*,.split>*{min-width:0}
@media(max-width:1100px){.split{grid-template-columns:1fr}.detail{position:static;max-height:none}.postliste{max-height:none}
  .split.zeige-detail>.karte:first-child{display:none}.split:not(.zeige-detail)>.detail{display:none}.nur-schmal{display:inline-flex}}
@media(max-width:900px){
  .vorschau{grid-template-columns:1fr!important}
  .app{grid-template-columns:1fr}.rail{display:none}
  .raster,.raster3,.lp-held{grid-template-columns:1fr}.lp-schritte{grid-template-columns:1fr 1fr}
  .inhalt{padding:6px 16px 100px}.topbar{padding:12px 16px 8px}
  .mobil-nav{display:flex;position:fixed;left:10px;right:10px;bottom:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-radius:18px;box-shadow:var(--schatten2);padding:7px 4px calc(7px + env(safe-area-inset-bottom,0px));z-index:var(--z-nav)}
  .mobil-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--grau);text-decoration:none;position:relative;font-weight:500}
  .mobil-nav a.aktiv{color:var(--navy);font-weight:600} .mobil-nav svg{width:21px;height:21px}
  .mobil-nav .n{position:absolute;top:-3px;right:calc(50% - 21px);background:var(--rot);color:#fff;border-radius:6px;font-size:9.5px;font-weight:700;padding:0 5px}
  .gewinn{grid-template-columns:1fr;gap:18px}.gewinn .gross{font-size:42px}.suche-knopf span{display:none}
  .kopf h1{font-size:25px}
  .kachel+.kachel::before{display:none}.kacheln{grid-template-columns:1fr 1fr}.kachel{border-top:1px solid var(--linie2)}.kachel:nth-child(-n+2){border-top:0}
}
@media(max-width:520px){.lp-schritte{grid-template-columns:1fr}.lp-schritte .karte+.karte::before{display:none}.gewinn-zeile{grid-template-columns:1fr auto}.gewinn-zeile .balken{grid-column:1/-1;order:3}.vorschau .muster+.muster{margin:0}}

[hidden]{display:none!important}
.bkarte .chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.tabelle th{white-space:nowrap}
@media(max-width:700px){.tabelle-wrap .tabelle{min-width:540px}}
.vorschau{align-items:start}
input[type=file]{font:inherit;font-size:13px;color:var(--text2);padding:6px;border-radius:var(--r2);background:#fff;box-shadow:inset 0 0 0 1px var(--linie);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:12.5px;border:0;border-radius:8px;padding:6px 12px;margin-right:10px;background:var(--navy-h);color:var(--navy);cursor:pointer;transition:background .18s}
input[type=file]::file-selector-button:hover{background:var(--gold-h,#F6EFD6)}

/* ---------- Ausbau 2: Einrichtung, Sterne-Booster, Aufsteller, Benachrichtigungen ---------- */
.punkt{display:inline-block;width:8px;height:8px;border-radius:3px;vertical-align:middle;flex:none}
.hinweis.blau{background:linear-gradient(90deg,#F2F5FB,#fff 60%)}
.block h2 svg{width:18px;height:18px;color:var(--gold-d);flex:none}
#f-marke{align-self:start}
.block h2:has(svg){justify-content:flex-start;gap:8px}

.einrichtung{padding:14px 18px 16px;margin-bottom:16px;background:radial-gradient(380px 140px at 100% 0%,rgba(184,146,74,.12),transparent 70%),#fff}
.einr-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.einr-kopf>div:first-child{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.einr-kopf b{font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.einr-fort{width:160px;height:6px;border-radius:99px;background:var(--linie2);overflow:hidden}
.einr-fort i{display:block;height:100%;background:linear-gradient(90deg,var(--blau),#4A92F2);border-radius:99px}
.einr-schritte{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.einr{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:10px;font-size:13px;font-weight:500;text-decoration:none;color:var(--text);background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie);transition:box-shadow .15s,background .15s}
a.einr:hover{box-shadow:inset 0 0 0 1px var(--navy);background:#fff}
.einr .nr{width:20px;height:20px;border-radius:6px;background:var(--navy);color:#fff;font-family:var(--mono);font-size:11px;display:grid;place-items:center}
.einr.ok{color:var(--gruen);background:var(--gruen-h);box-shadow:none}
.einr.ok svg{width:16px;height:16px}

.booster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px}
.bst{padding:18px 20px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.bst::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--mf)}
.bst-kopf{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.bst-kopf h2{font-family:var(--display);font-size:18px;letter-spacing:-.025em;margin:0 0 6px;font-weight:650}
.bst-schnitt{font-family:var(--display);font-size:38px;font-weight:650;letter-spacing:-.05em;line-height:1;text-align:right;white-space:nowrap}
.bst-schnitt small{font-size:18px;color:var(--stern);margin-left:2px;letter-spacing:0}
.bst-schnitt span{display:block;font-family:var(--sans,inherit);font-size:12px;font-weight:500;letter-spacing:0;color:var(--grau);margin-top:5px}
.bst-ziel{background:var(--flaeche2);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.bst-ziel.ok{background:var(--gruen-h);color:var(--gruen);font-size:13.5px;display:block}
.bst-zahl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bst-zahl .w{font-family:var(--display);font-size:30px;font-weight:650;letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.bst-zahl select{width:auto;display:inline-block;padding:3px 26px 3px 8px;font-size:13px;font-weight:600;margin-left:4px}
.bst-fort{height:8px;border-radius:99px;background:#E6E9F0;overflow:hidden}
.bst-fort i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-hell))}
.bst-link{display:flex;gap:16px;align-items:flex-start}
.bst-link label{margin-bottom:8px}
.bst-qr{width:112px;flex:none;border-radius:12px;padding:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.bst-qr svg{display:block;width:100%;height:auto}
.bst-qr.leer{aspect-ratio:1;display:grid;place-items:center;color:#C5CBD6;background:var(--flaeche2);box-shadow:none}
.bst-qr.leer svg{width:44px;height:44px}
.bst .aktionen{gap:6px}
.ideen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ideen>div{padding:12px 14px;border-radius:12px;background:var(--flaeche2);font-size:13px;display:flex;flex-direction:column;gap:4px}
.ideen span{color:var(--grau);line-height:1.45}

.schalter{display:flex!important;align-items:center;gap:10px;font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer;margin-bottom:12px}
.schalter input[type=checkbox]{appearance:none;-webkit-appearance:none;width:36px;height:21px;flex:none;border-radius:99px;background:#D7DCE5;border:0;padding:0;position:relative;cursor:pointer;transition:background .18s}
.schalter input[type=checkbox]::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,35,63,.3);transition:transform .18s}
.schalter input[type=checkbox]:checked{background:var(--navy)}
.schalter input[type=checkbox]:checked::after{transform:translateX(15px)}
.schalter select{width:auto;display:inline-block;padding:2px 22px 2px 7px;margin:0 3px;font-size:13px}

.vergleich td{white-space:nowrap}
.quote{display:flex;align-items:center;gap:8px;min-width:130px}
.quote .balken{flex:1;height:6px}
.quote .balken i{display:block;height:100%;border-radius:99px}

/* Tischaufsteller A5 */
.aufsteller{--mf:#1A2B4A;width:148mm;min-height:210mm;margin:0 auto;background:#fff;border-radius:18px;box-shadow:var(--schatten);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16mm 14mm 12mm}
.af-band{position:absolute;left:0;right:0;top:0;height:9mm;background:var(--mf)}
.af-band::after{content:"";position:absolute;left:0;right:0;bottom:-2mm;height:2mm;background:var(--gold)}
.af-marke{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-top:4mm}
.aufsteller h1{font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:5mm 0 3mm;color:var(--navy)}
.aufsteller p{font-size:16px;color:var(--text2);margin:0 0 7mm;max-width:100mm;line-height:1.4}
.af-qr{width:78mm;padding:4mm;border-radius:6mm;box-shadow:0 0 0 1.2mm var(--navy-h)}
.af-qr svg{display:block;width:100%;height:auto}
.af-sterne{font-size:30px;letter-spacing:6px;color:var(--stern);margin:6mm 0 1mm}
.af-hilfe{font-size:13px;color:var(--grau)}
.af-fuss{margin-top:auto;padding-top:6mm;font-size:12px;font-weight:600;color:var(--text2);border-top:1px solid var(--linie2);width:100%}
@media print{
  .aufsteller{box-shadow:none;border-radius:0;margin:0}
  body:has(.aufsteller) .inhalt{padding:0}
}
@media(max-width:900px){.ideen{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .ideen{grid-template-columns:1fr}
  .bst-link{flex-direction:column}.bst-qr{width:140px}
  .bst-schnitt{font-size:30px}
  .einr-fort{width:100%;order:3}
  .aufsteller{width:100%;min-height:0;padding:40px 20px 24px}.aufsteller h1{font-size:32px}.af-qr{width:min(78mm,80%)}
}
.gewinn-zeile>.mono{text-align:right;white-space:nowrap}

/* ---------- Ausbau 3: Heute, Fokus-Modus, Antwort-Check, Firmen ---------- */
.heute{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-bottom:16px}
.heute-k{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none;color:var(--text);transition:box-shadow .18s,transform .18s}
.heute-k:hover{box-shadow:var(--schatten-h);transform:translateY(-1px)}
.heute-k>span:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.heute-k b{font-family:var(--display);font-size:16px;letter-spacing:-.02em}
.heute-k>span:nth-child(2) span{font-size:12.5px;color:var(--grau)}
.hk-sym{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--navy-h);color:var(--navy);flex:none}
.hk-sym.gruen{background:var(--gruen-h);color:var(--gruen)}
.hk-sym svg{width:20px;height:20px}
.hk-pfeil{font-size:18px;color:var(--gold-d);transition:transform .18s}
.heute-k:hover .hk-pfeil{transform:translateX(3px)}

.fokus{max-width:820px;margin:0 auto;display:grid;gap:14px}
.fokus-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fk-titel{display:flex;flex-direction:column}
.fk-titel b{font-family:var(--display);font-size:20px;letter-spacing:-.03em}
.fk-fort{flex:1;min-width:140px;height:8px;border-radius:99px;background:var(--linie2);overflow:hidden}
.fk-fort i{display:block;height:100%;background:linear-gradient(90deg,var(--blau),#4A92F2);border-radius:99px;transition:width .35s ease}
.fokus-karte{overflow:hidden;animation:auf .25s ease-out;position:relative}
.fokus-karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--linie)}
.fokus-karte[data-u="kandidat"]::before{background:var(--gruen)}
.fk-bew{padding:20px 24px 16px}
.fk-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fk-text{font-size:17px;line-height:1.55;margin:12px 0 4px;color:var(--text)}
.fk-grund{font-size:13.5px;color:var(--text2);margin-top:10px}
.fk-arbeit{padding:16px 24px 20px;background:var(--flaeche2);border-top:1px solid var(--linie2)}
.fk-arbeit textarea{min-height:120px;background:#fff}
.fk-schritt{display:flex;gap:10px;align-items:center;font-size:13.5px;margin-bottom:10px}
.fk-schritt .nr{width:24px;height:24px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;flex:none}
.fk-knoepfe{margin-top:12px}
.fk-knoepfe kbd{font-family:var(--mono);font-size:10px;opacity:.75;border:1px solid currentColor;border-radius:4px;padding:0 4px;margin-left:2px}
.fokus-fertig{text-align:center;padding:44px 24px;display:grid;gap:10px;justify-items:center}
.fokus-fertig h1{font-family:var(--display);font-size:32px;letter-spacing:-.04em}
.fokus-fertig p{color:var(--text2);max-width:460px;margin:0 0 8px}
.fk-symbol{width:64px;height:64px;border-radius:20px;background:var(--gruen-h);color:var(--gruen);display:grid;place-items:center}
.fk-symbol svg{width:32px;height:32px}

.check{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.check span{font-size:12px;padding:3px 8px;border-radius:7px;background:var(--gelb-h);color:var(--gelb)}
.check span.c-fehler{background:var(--rot-h);color:var(--rot);font-weight:600}
.check.ok{align-items:center;gap:6px;font-size:12px;color:var(--gruen)}
.check.ok svg{width:14px;height:14px}
.stile{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;align-items:center}
.stile::before{content:"Umformulieren:";font-size:12px;color:var(--grau);margin-right:4px}
.stile .knopf{padding:4px 8px;font-size:12.5px}

.org-wahl{font-weight:600;font-size:13px;padding:6px 26px 6px 8px;margin-bottom:2px}
@media(max-width:600px){.fk-bew,.fk-arbeit{padding-left:16px;padding-right:16px}.fk-text{font-size:15.5px}.fk-knoepfe kbd{display:none}.fk-knoepfe .knopf{flex:1 1 auto}}
@media(max-width:900px){.fokus{padding-bottom:84px}}

/* =====================================================================
   Cookie-POS-Design (angeglichen an poscookie.projecttb.net)
   Systemschrift (SF Pro), helles Blaugrau, Navy-Tinte, blaue Aktionsflächen,
   Gold nur für Marke, Sterne und kleine Überzeilen, Glasflächen mit Innenkante.
   ===================================================================== */
h1,h2,h3{letter-spacing:-.025em}
.kopf h1{font-size:30px;font-weight:760;letter-spacing:-.03em;line-height:1.08}
.kopf h1::before{content:var(--ueberzeile,"Bewertungs-Agent");display:block;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.block h2,.bst-kopf h2,.einr-kopf b,.heute-k b,.fk-titel b,.fokus-fertig h1,.gewinn .gross,.kachel .w,.bst-schnitt,.bst-zahl .w{font-weight:760}
.kachel .w{letter-spacing:-.035em}

/* Knöpfe wie im POS: Navy primär, hellblaue Aktionsfläche sekundär */
.knopf{border-radius:10px;font-weight:700;letter-spacing:-.01em;background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 6px 16px -10px rgba(16,35,63,.7);transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
.knopf:hover{background:var(--navy2)}
.knopf:active{transform:scale(.97)}
.knopf.zweit{background:var(--aktion);color:var(--aktion-text);border:1px solid var(--aktion-rand);box-shadow:0 2px 8px rgba(22,70,108,.06)}
.knopf.zweit:hover{background:var(--aktion-hover);border-color:#B3D0E8}
.knopf.zweit:active{background:var(--aktion-druck)}
.knopf.leise{color:var(--aktion-text)} .knopf.leise:hover{background:var(--aktion);color:var(--aktion-text)}
.knopf.gruen{background:var(--gruen);box-shadow:0 6px 16px -10px rgba(37,129,93,.8)} .knopf.gruen:hover{background:#1E6E4F}
.knopf.rot{background:#fff;color:var(--rot);border-color:#EDC9CD}

/* Eingaben */
input,select,textarea{border-color:var(--linie);border-radius:10px;background:#fff}
input:hover,select:hover,textarea:hover{border-color:#C8D5E3}
input:focus,select:focus,textarea:focus{border-color:var(--blau);box-shadow:0 0 0 3px rgba(18,103,220,.14)}
label{color:var(--grau);font-weight:600;font-size:12px}

/* Karten mit feiner Kante */
.karte{border-radius:var(--r);box-shadow:var(--schatten),inset 0 0 0 1px rgba(15,45,82,.05)}
.kacheln{box-shadow:var(--schatten),inset 0 0 0 1px rgba(15,45,82,.05)}
.kacheln .karte{box-shadow:none}
.kachel .t{font-weight:500}
.kachel.blau .t::before{background:var(--blau)}
.kachel:hover{background:var(--navy-hh)}

/* Chips und Hinweise */
.chip{border-radius:7px;font-weight:650}
.chip.blau{background:var(--blau-h);color:var(--blau-d)}
.chip.rand{box-shadow:inset 0 0 0 1px var(--linie)}
.hinweis{box-shadow:var(--schatten),inset 0 0 0 1px rgba(15,45,82,.05)}
.hinweis::before{background:var(--blau)}
.hinweis.blau{background:linear-gradient(90deg,#EFF6FF,#fff 60%)}
.lc.mittel{background:var(--gold-h);color:var(--gold-d)}
.signal i{background:var(--gold)}

/* Leiste links: Glasfläche wie das POS */
.rail{background:var(--glas);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--glas-innen),0 12px 30px rgba(26,42,63,.08),0 2px 6px rgba(26,42,63,.05);border:1px solid var(--glas-rand)}
.marke{font-weight:760;letter-spacing:-.03em;font-size:16px}
.marke .logo{background:var(--navy);color:var(--gold-hell);border-radius:10px;box-shadow:0 6px 14px -8px rgba(16,35,63,.8)}
.nav a{border-radius:10px;font-weight:550}
.nav a:hover{background:rgba(234,243,255,.7);color:var(--navy)}
.nav a.aktiv{background:var(--blau-h);color:var(--blau-d);font-weight:700;box-shadow:inset 0 0 0 1px rgba(18,103,220,.12)}
.nav a.aktiv::before{background:var(--blau)}
.nav .n{background:var(--rot);border-radius:7px}
.nav .n.leise{background:var(--aktion);color:var(--aktion-text)}

/* Kopfleiste: Marken als Glas-Segment */
.marken{background:var(--glas);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--glas-innen),0 8px 22px rgba(26,42,63,.07);border:1px solid var(--glas-rand)}
.marken button{border-radius:9px;font-weight:650}
.marken button:hover{background:var(--aktion);color:var(--aktion-text)}
.marken button.aktiv{background:var(--navy);color:#fff;box-shadow:0 4px 10px -6px rgba(16,35,63,.8)}
.suche-knopf{background:var(--glas);backdrop-filter:blur(18px);border:1px solid var(--glas-rand);box-shadow:var(--glas-innen),0 8px 22px rgba(26,42,63,.07)}

/* Posteingang, Fall-Akte, Leiter */
.zeile.aktiv{background:var(--blau-h);box-shadow:inset 0 0 0 1px rgba(18,103,220,.12)}
.zeile:hover:not(.aktiv){background:var(--navy-hh)}
.reiter button.aktiv{color:var(--blau-d);border-bottom-color:var(--blau)}
.einschaetzung{background:linear-gradient(180deg,#F4F8FE,#fff)}
.stufe.jetzt .kreis{background:var(--navy);color:var(--gold-hell);box-shadow:0 0 0 4px var(--blau-h)}
.massen{background:var(--navy)}
.spalte{background:#E9EFF6;box-shadow:inset 0 0 0 1px rgba(15,45,82,.05)}
.bkarte{box-shadow:0 1px 2px rgba(16,35,63,.05),0 8px 20px -14px rgba(16,35,63,.35),inset 0 0 0 1px rgba(15,45,82,.05)}
.toast{background:var(--navy);border-left:3px solid var(--gold-hell);border-radius:12px}
.gewinn{background:radial-gradient(460px 220px at 0% 0%,rgba(18,103,220,.07),transparent 70%),#fff}
.gewinn .pfeil{color:var(--gruen)}
.balken>i{background:linear-gradient(90deg,var(--gold-hell),var(--gold))}
.heute-k .hk-sym{background:var(--aktion);color:var(--aktion-text);box-shadow:inset 0 0 0 1px var(--aktion-rand)}
.heute-k .hk-sym.gruen{background:var(--gruen-h);color:var(--gruen);box-shadow:none}
.hk-pfeil{color:var(--blau)}
.fk-schritt .nr,.einr .nr{background:var(--navy)}
.stile .knopf{color:var(--aktion-text)}
.org-wahl{font-weight:700}
.mobil-nav{background:var(--glas);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--glas-rand);box-shadow:var(--glas-innen),0 12px 30px rgba(26,42,63,.14)}
.mobil-nav a.aktiv{color:var(--blau-d)}
.papier h2{border-bottom-color:var(--navy)}
.papier .zitat{border-left-color:var(--gold)}

/* ---------- Anmeldung im POS-Stil: dunkle Bühne links, helles Panel rechts ---------- */
.pos-login{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100dvh;background:#fff}
.pos-buehne{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;padding:clamp(24px,4vw,56px);
  background:linear-gradient(90deg,rgba(4,18,34,.96) 0%,rgba(4,18,34,.78) 52%,rgba(4,18,34,.34) 100%),linear-gradient(rgba(0,0,0,0) 58%,rgba(4,18,34,.72)),var(--buehne-bild,none) center/cover no-repeat,radial-gradient(900px 600px at 80% 20%,#27466F,#0B1A2E 70%)}
.pos-buehne .b-marke{display:flex;align-items:center;gap:10px;font-weight:760;letter-spacing:-.02em;font-size:15px}
.pos-buehne .b-marke .logo{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:var(--gold-hell)}
.pos-buehne .b-marke .logo svg{width:17px;height:17px}
.b-inhalt{margin-top:auto;max-width:560px}
.b-kicker{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hell)}
.pos-buehne h1{font-size:clamp(38px,4.6vw,64px);font-weight:720;letter-spacing:-.04em;line-height:.96;color:var(--creme);margin:14px 0 16px}
.pos-buehne p{color:rgba(255,255,255,.78);font-size:16px;line-height:1.55;margin:0;max-width:470px}
.b-liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.b-liste li{display:flex;gap:10px;align-items:center;font-size:14px;color:rgba(255,255,255,.86)}
.b-liste li::before{content:"";width:18px;height:18px;flex:none;border-radius:6px;background:rgba(216,189,130,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8BD82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border:1px solid rgba(216,189,130,.3)}
.b-fuss{display:flex;align-items:center;gap:18px;margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.b-peek{display:flex;gap:12px;align-items:center;padding-left:14px;border-left:2px solid rgba(216,189,130,.5)}
.b-peek small{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
.b-peek b{font-weight:650;font-size:14.5px}
.b-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:650;color:rgba(255,255,255,.72)}
.b-status i{width:7px;height:7px;border-radius:50%;background:#35C27C;box-shadow:0 0 0 4px rgba(53,194,124,.16)}
.pos-panel{display:flex;flex-direction:column;padding:clamp(20px,3vw,40px) clamp(20px,4vw,56px);background:linear-gradient(180deg,#fff,#F7FAFD)}
.p-kopf{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--linie2)}
.p-kopf .logo{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--gold-hell);display:grid;place-items:center}
.p-kopf .logo svg{width:17px;height:17px}
.p-kopf b{display:block;font-size:13px;font-weight:760;letter-spacing:-.02em}
.p-kopf span{font-size:11.5px;color:var(--grau)}
.p-band{margin-left:auto;font-size:10.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#315A78;background:#EDF5FB;border:1px solid #C8D9E7;border-radius:9px;padding:6px 10px}
.p-mitte{width:min(420px,100%);margin:auto;padding:36px 0;text-align:center}
.p-symbol{width:48px;height:48px;border-radius:15px;margin:0 auto 16px;display:grid;place-items:center;background:var(--blau-h);color:var(--blau);box-shadow:inset 0 0 0 1px rgba(18,103,220,.12)}
.p-symbol svg{width:22px;height:22px}
.p-mitte h2{font-size:32px;font-weight:760;letter-spacing:-.03em;margin:0 0 8px}
.p-mitte>p{color:var(--grau);margin:0 0 20px;font-size:14px}
.p-mitte form{text-align:left}
.p-mitte .tabs{display:inline-flex;width:auto;background:#EEF3F9;border-radius:9px;padding:3px;margin:0 auto 20px}
.p-mitte .tabs button{padding:6px 14px;font-size:12.5px;border-radius:7px;font-weight:650}
.p-mitte .tabs button.aktiv{background:var(--navy);color:#fff;box-shadow:none}
.p-mitte input{padding:12px 13px;font-size:15px}
.p-mitte .knopf{padding:12px 16px;font-size:14.5px}
.p-fuss{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--grau);padding-top:14px;border-top:1px solid var(--linie2)}
.p-fuss a{color:var(--grau)}
.p-sicher{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--grau);margin-top:16px}
.p-sicher svg{width:13px;height:13px}
@media(max-width:900px){
  .pos-login{grid-template-columns:1fr}
  .pos-buehne{min-height:auto;padding:22px 20px 26px}
  .pos-buehne h1{font-size:36px}
  .b-inhalt{margin-top:28px}.b-liste,.b-fuss{display:none}
  .p-mitte{padding:24px 0}
}
.einrichtung{background:radial-gradient(420px 160px at 100% 0%,rgba(18,103,220,.07),transparent 70%),#fff}
.pos-buehne h1{font-size:clamp(38px,4.1vw,60px)}
.b-inhalt{max-width:640px}
@media(max-width:600px){.p-band{display:none}}

/* ---------- Ausbau 4: Zuständigkeit, Diffamierungs-Hinweis, Konkurrenz, Feedback ---------- */
.fall-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.zust{display:flex!important;align-items:center;gap:6px;margin:0;color:var(--grau)}
.zust svg{width:15px;height:15px;flex:none}
.zust select{width:auto;max-width:170px;padding:4px 24px 4px 8px;font-size:12.5px;margin:0}
.zust-bis{width:auto;padding:3px 8px;font-size:12.5px}
.diff-hinweis{font-size:12.5px;line-height:1.45;background:var(--gelb-h);color:#6B4309;border-radius:10px;padding:9px 12px;margin:6px 0 8px;box-shadow:inset 0 0 0 1px rgba(165,101,18,.18)}
.diff-hinweis.leise{background:var(--flaeche2);color:var(--grau);box-shadow:inset 0 0 0 1px var(--linie2)}
.konk{padding:12px 0 14px;border-top:1px solid var(--linie2)}
.konk:first-of-type{border-top:0;padding-top:4px}
.konk-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.konk-zeile{display:grid;grid-template-columns:minmax(140px,1.2fr) 2fr 62px 70px minmax(90px,auto);gap:12px;align-items:center;font-size:13px;padding:5px 8px;border-radius:9px}
.konk-zeile.wir{background:var(--blau-h)}
.konk-zeile .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.konk-zeile .balken{height:7px}
.konk-zeile .balken i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#C9D4E2,#8FA3BC)}
.konk-zeile.wir .balken i{background:linear-gradient(90deg,var(--gold-hell),var(--gold))}
.konk-akt{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.rot-t{color:var(--rot)} .gruen-t{color:var(--gruen)}
.konk-neu{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.konk-neu input{flex:1;min-width:160px;padding:7px 10px;font-size:13px}
.konk-treffer{display:grid;gap:4px;margin-top:6px}
.konk-t{border:0;background:var(--flaeche2);border-radius:9px;padding:8px 10px;text-align:left;cursor:pointer;font-size:13px;box-shadow:inset 0 0 0 1px var(--linie2)}
.konk-t:hover{background:var(--aktion);box-shadow:inset 0 0 0 1px var(--aktion-rand)}
.liste li.erledigt{opacity:.55}
@media(max-width:700px){.konk-zeile{grid-template-columns:1fr auto auto}.konk-zeile .balken{grid-column:1/-1;order:5}.konk-zeile .mono.grau{display:none}.fall-rechts{align-items:flex-start}}

/* ---------- Öffentliche Feedback-Seite ---------- */
.fb-seite{background:var(--bg)}
.fb{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.fb-karte{--mf:var(--navy);width:min(440px,100%);overflow:hidden;position:relative}
.fb-band{height:6px;background:var(--mf)}
.fb-inhalt{padding:28px 26px 26px;text-align:center}
.fb-kicker{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fb-inhalt h1{font-size:30px;font-weight:760;letter-spacing:-.03em;margin:10px 0 4px}
.fb-inhalt>.grau{margin:0}
.fb-sterne{display:flex;justify-content:center;gap:6px;margin:22px 0 6px}
.fb-sterne button{border:0;background:none;font-size:42px;line-height:1;color:#D7DEE8;cursor:pointer;padding:2px;transition:transform .15s var(--ease),color .15s}
.fb-sterne button.an{color:var(--stern)}
.fb-sterne button:hover{transform:scale(1.12)}
.fb-sterne button:active{transform:scale(.94)}
.fb-wahl{text-align:left;margin-top:18px;animation:auf .25s var(--ease)}
.fb-google{width:100%;flex-direction:column;gap:2px;padding:13px 16px;font-size:15px}
.fb-google span{font-size:11.5px;font-weight:500;opacity:.75}
.fb-oder{display:flex;align-items:center;gap:10px;color:var(--grau);font-size:12px;margin:16px 0 12px}
.fb-oder::before,.fb-oder::after{content:"";flex:1;height:1px;background:var(--linie)}
.fb-falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-info{text-align:center;margin:12px 0 0}
.fb-danke{display:grid;gap:10px;justify-items:center;padding:10px 0}
.fb-danke h1{margin:4px 0 0}
.fb-danke .p-symbol{width:56px;height:56px;border-radius:18px;background:var(--gruen-h);color:var(--gruen);display:grid;place-items:center}
.fb-danke .p-symbol svg{width:26px;height:26px}
.fb-fuss{font-size:12px;color:var(--grau);margin-top:16px}.fb-fuss a{color:var(--grau)}

/* ---------- Ausbau 5: Analyse-Zentrale ---------- */
.an-raster{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}
.an-h{font-size:17px;font-weight:760;letter-spacing:-.02em;margin:22px 0 10px}
.score{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:center}
.score-ring{position:relative;width:132px;height:132px;--f:var(--grau2)}
.score-ring.gut{--f:var(--gruen)} .score-ring.mittel{--f:var(--gold)} .score-ring.schwach{--f:var(--rot)}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.score-ring .bahn{fill:none;stroke:var(--linie2);stroke-width:12}
.score-ring .wert{fill:none;stroke:var(--f);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.score-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.score-ring b{font-size:40px;font-weight:760;letter-spacing:-.04em;line-height:1}
.score-ring span{font-size:11.5px;color:var(--grau);margin-top:4px}
.score-teile{display:grid;gap:8px}
.st{display:grid;grid-template-columns:1fr;gap:3px;font-size:12.5px}
.st>span{display:flex;justify-content:space-between;font-weight:650}
.st>span i{font-style:normal;color:var(--grau2);font-weight:500}
.st .balken{height:6px}
.st .balken i{display:block;height:100%;border-radius:99px;background:var(--navy)}
.st small{color:var(--grau);font-size:11.5px}
.st.leer{opacity:.55}
.score-chip{display:inline-block;min-width:34px;text-align:center;font-weight:760;font-size:12.5px;padding:2px 8px;border-radius:8px;background:var(--linie2)}
.score-chip.gut{background:var(--gruen-h);color:var(--gruen)} .score-chip.mittel{background:var(--gold-h);color:var(--gold-d)} .score-chip.schwach{background:var(--rot-h);color:var(--rot)}
.vt{display:grid;gap:9px;margin-top:4px}
.vt-zeile{display:grid;grid-template-columns:34px 1fr 40px 40px;gap:10px;align-items:center;font-size:13px}
.vt-zeile>span:first-child{font-weight:650;color:var(--text2)}
.vt-bahn{height:12px;border-radius:99px;background:var(--linie2);overflow:hidden}
.vt-bahn i{display:block;height:100%;border-radius:99px;background:var(--navy)}
.vt-zeile:hover .vt-bahn i{background:var(--blau)}
.mini-vt{display:inline-flex;align-items:flex-end;gap:2px;height:24px}
.mini-vt i{width:7px;border-radius:2px 2px 0 0;background:var(--navy);opacity:.8}
.an-prognose{display:flex;align-items:baseline;gap:10px;font-size:40px;font-weight:760;letter-spacing:-.04em;line-height:1.1}
.an-prognose .pfeil{font-size:26px;color:var(--grau2)}
.an-prognose .gut{color:var(--gruen)} .an-prognose .schlecht{color:var(--rot)}
.an-prognose small{font-size:18px;color:var(--stern)}
.an-kennz{display:flex;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linie2)}
.an-kennz div{display:flex;flex-direction:column}
.an-kennz b{font-size:18px;font-weight:760;letter-spacing:-.02em}
.an-kennz span{font-size:12px;color:var(--grau)}
.diagramm.linie text{font-size:11px;fill:var(--grau)}
.diagramm.linie .pt circle{fill:#fff;stroke:var(--navy);stroke-width:2;transition:r .15s}
.diagramm.linie .pt:hover circle{r:6.5;fill:var(--navy)}
.an-zus{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.zus-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.zus-kopf>div{display:flex;flex-direction:column}
.zus-kopf b{font-size:15.5px;font-weight:760;letter-spacing:-.02em}
.zus-fazit{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--text)}
.zus-spalten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zus-spalten>div:last-child{grid-column:1/-1}
.zus-spalten h4{margin:0 0 4px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.zus-spalten h4.lob{color:var(--blau-d)} .zus-spalten h4.kritik{color:#A8412E}
.zus-spalten ul,.zus-spalten ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.zus-spalten li{margin:2px 0}
.div{display:grid;gap:7px;margin-top:4px}
.div-zeile{display:grid;grid-template-columns:34px 1fr 180px 1fr 34px;gap:8px;align-items:center;font-size:13px;cursor:pointer;padding:3px 0;border-radius:8px}
.div-zeile:hover{background:var(--navy-hh)}
.div-name{text-align:center;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.div-l,.div-r{height:12px;display:flex}
.div-l{justify-content:flex-end}
.div-l i{display:block;height:100%;background:#C2553F;border-radius:99px 0 0 99px;min-width:0}
.div-r i{display:block;height:100%;background:#1267DC;border-radius:0 99px 99px 0;min-width:0}
.div-zeile .k{text-align:right;color:#A8412E}.div-zeile .l{color:var(--blau-d)}
.an-legende{display:flex;gap:16px;align-items:center;font-size:12px;margin-top:12px;flex-wrap:wrap}
.an-legende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lk{font-weight:700;font-variant-numeric:tabular-nums}.lk .lob{color:var(--blau-d)}.lk .kritik{color:#A8412E}.lk .grau{margin:0 4px}
.an-zitat{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.an-chips{display:flex;flex-wrap:wrap;gap:6px}
.an-chips .chip{cursor:pointer;border:0}
.an-form{display:flex;gap:8px;margin-top:12px}
.an-form input{flex:1;padding:8px 10px;font-size:13px}
.an-stichwort{padding:10px 0;border-top:1px solid var(--linie2)}
.an-stichwort:first-of-type{border-top:0;padding-top:0}
.an-sw-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.an-treffer{display:block;font-size:12.5px;color:var(--text2);text-decoration:none;padding:4px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-treffer:hover{background:var(--navy-hh)}
.an-diff{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--linie2);font-size:13.5px}
.an-diff:first-of-type{border-top:0}
.an-fort{display:flex;align-items:center;gap:16px;padding:12px 16px;margin-bottom:14px}
.an-fort>div:first-child{display:flex;flex-direction:column;min-width:220px}
.an-fort .fk-fort{flex:1}
.block h2 svg{margin-right:0}
@media(max-width:1100px){.an-raster{grid-template-columns:1fr 1fr}.an-raster>.karte:first-child{grid-column:1/-1}}
@media(max-width:700px){.an-raster{grid-template-columns:1fr}.score{grid-template-columns:1fr;justify-items:center}.score-teile{width:100%}
  .div-zeile{grid-template-columns:26px 1fr 96px 1fr 26px;font-size:12px}.zus-spalten{grid-template-columns:1fr}.an-form{flex-wrap:wrap}.an-fort{flex-wrap:wrap}}
@media(max-width:700px){.karte:has(.diagramm.linie){overflow-x:auto}.diagramm.linie{min-width:620px}}

/* =====================================================================
   Ausbau 6 · Profi-Designschicht
   Gleiche POS-Welt (hell, Navy-Tinte, Blau für Aktionen, Gold für Marke),
   aber mit Tiefe: Display-Schrift, Doppelrand-Karten, Monogramme, weiche
   Einblendung, Schubladen statt Popups, Status mit Symbol + Text.
   ===================================================================== */
:root{
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --federn:cubic-bezier(.32,.72,0,1);
  --rand-fein:0 0 0 1px rgba(15,45,82,.06);
  --tiefe:0 1px 1px rgba(16,35,63,.03),0 2px 4px -2px rgba(16,35,63,.05),0 24px 48px -30px rgba(16,35,63,.28);
  --z-schublade:70;
}
/* Hintergrund: ruhige Lichtflecken + feines Korn (fest, klickdurchlässig) */
body{background:
  radial-gradient(900px 520px at 88% -8%,rgba(18,103,220,.075),transparent 62%),
  radial-gradient(700px 480px at 12% 108%,rgba(184,146,74,.07),transparent 60%),
  var(--bg);background-attachment:fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}

/* Typografie: Display-Schrift für Titel und große Zahlen */
.kopf h1,.block h2,.bst-kopf h2,.gewinn .gross,.kachel .w,.p-mitte h2,.pos-buehne h1,.schublade h2,.fk-name h2,.mg-kopf h2,.sc-score h2,.leer-karte b,.g-start h2,.ort-schnitt b,.fk-zahlen b,.sr-zahl{font-family:var(--display)}
.kopf h1{font-size:clamp(28px,2.6vw,34px);font-weight:750;letter-spacing:-.035em;display:flex;flex-direction:column;align-items:flex-start}
.kopf p{font-size:14px;max-width:70ch}
/* Überzeile als kleine Kapsel mit Goldpunkt */
.kopf h1::before{display:inline-flex;align-items:center;gap:7px;width:max-content;font-family:var(--schrift);font-size:10.5px;font-weight:750;letter-spacing:.16em;color:var(--gold-d);
  background:rgba(255,255,255,.72);border:1px solid rgba(184,146,74,.28);border-radius:99px;padding:5px 11px 5px 10px;margin-bottom:12px;box-shadow:0 1px 0 #fff inset}
.augenbraue{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)}
.augenbraue::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* Karten: feine Kante, weiche Tiefe, Innenlicht */
.karte{box-shadow:var(--rand-fein),var(--tiefe),inset 0 1px 0 #fff}
/* Doppelrand: Schale + Kern mit konzentrischen Radien */
.bezel{display:flex;flex-direction:column;padding:6px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(232,238,246,.55));box-shadow:var(--rand-fein),0 30px 60px -36px rgba(16,35,63,.35)}
.bezel-i{background:#fff;border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,45,82,.05),0 1px 2px rgba(16,35,63,.04);padding:20px 22px;flex:1}
.block-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.block-kopf h2{margin:0!important}

/* Einblendung beim Seitenwechsel: gestaffelt, schwer, nur transform/opacity */
@keyframes aufGross{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.inhalt.neu>*{animation:aufGross .62s var(--federn) both}
.inhalt.neu>*:nth-child(2){animation-delay:.05s}.inhalt.neu>*:nth-child(3){animation-delay:.1s}.inhalt.neu>*:nth-child(4){animation-delay:.15s}
.inhalt.neu>*:nth-child(5){animation-delay:.2s}.inhalt.neu>*:nth-child(6){animation-delay:.24s}.inhalt.neu>*:nth-child(n+7){animation-delay:.28s}

/* Hauptknopf: Kapsel mit eingesetztem Pfeil-Kreis */
.knopf.cta{border-radius:99px;padding:6px 6px 6px 18px;gap:12px;background:linear-gradient(180deg,#17385F,var(--navy));box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 24px -12px rgba(16,35,63,.8)}
.knopf.cta .cta-i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .45s var(--federn),background .3s}
.knopf.cta .cta-i svg{width:15px;height:15px;color:var(--gold-hell)}
.knopf.cta:hover .cta-i{transform:translateX(3px) scale(1.06);background:rgba(216,189,130,.2)}
.knopf.cta:active{transform:scale(.98)}
.knopf.cta:disabled .cta-i{transform:none}
.knopf{transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--federn),border-color .2s}

/* Leiste: Marke, Firmenwahl, Gruppen */
.marke-t{display:flex;flex-direction:column;line-height:1.1;font-family:var(--display);font-weight:750;letter-spacing:-.025em}
.marke-t small{font-family:var(--schrift);font-size:10.5px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin-top:3px}
.firma-wahl{display:flex;align-items:center;gap:10px;margin:0 2px 10px;padding:8px 9px;border-radius:14px;background:#fff;text-decoration:none;color:var(--text);
  box-shadow:0 0 0 1px rgba(15,45,82,.07),0 6px 16px -10px rgba(16,35,63,.3);transition:box-shadow .25s var(--ease),transform .25s var(--federn)}
.firma-wahl:hover{box-shadow:0 0 0 1px rgba(18,103,220,.25),0 10px 22px -12px rgba(16,35,63,.35);transform:translateY(-1px)}
.firma-wahl.aktiv{box-shadow:0 0 0 2px rgba(18,103,220,.35),0 10px 22px -12px rgba(16,35,63,.35)}
.fw-t{display:flex;flex-direction:column;min-width:0;flex:1}
.fw-t b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-t small{font-size:11.5px;color:var(--grau)}
.fw-pfeil{width:15px;height:15px;color:var(--grau2);flex:none}
.nav-titel{font-size:10.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--grau2);padding:14px 10px 5px}
.nav-titel:first-child{padding-top:4px}
.nav a svg{stroke-width:1.6}
.status-punkt{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--gelb);box-shadow:0 0 0 3px var(--gelb-h)}
.status-punkt.an{background:var(--gruen);box-shadow:0 0 0 3px var(--gruen-h)}
.rail .unten{display:flex;flex-direction:column;gap:6px}
.nutzer{display:flex;align-items:center;gap:9px;min-width:0}
.nutzer .grau{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:11.5px;font-weight:750;color:var(--navy);background:linear-gradient(135deg,var(--creme),#fff);box-shadow:inset 0 0 0 1px rgba(184,146,74,.3)}
#abmelden{align-self:flex-start;padding-left:0}

/* Monogramm: Kachel in Markenfarbe */
.mono-k{--mk:#10233F;width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--mk) 78%,#fff),var(--mk) 60%,color-mix(in srgb,var(--mk) 80%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -8px var(--mk)}
.mono-k.gross{width:52px;height:52px;border-radius:16px;font-size:17px}

/* Schublade (statt Popup) */
.schublade-hg{position:fixed;inset:0;z-index:var(--z-schublade);background:rgba(10,24,44,.28);opacity:0;transition:opacity .3s var(--ease)}
.schublade-hg.offen{opacity:1}
.schublade{position:absolute;top:10px;right:10px;bottom:10px;width:min(480px,calc(100% - 20px));background:rgba(255,255,255,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 40px 80px -30px rgba(10,24,44,.45);display:flex;flex-direction:column;transform:translateX(24px);opacity:0;transition:transform .5s var(--federn),opacity .3s var(--ease)}
.schublade-hg.offen .schublade{transform:none;opacity:1}
.schublade header{display:flex;justify-content:space-between;gap:10px;padding:22px 22px 14px;border-bottom:1px solid var(--linie2)}
.schublade h2{font-size:20px;font-weight:750;letter-spacing:-.03em}
.schublade header p{margin:4px 0 0;color:var(--grau);font-size:13px}
.schublade .zu svg{width:18px;height:18px}
.sch-inhalt{padding:18px 22px 22px;overflow-y:auto;flex:1}
.sch-form .zwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sch-fuss{position:sticky;bottom:-22px;margin:8px -22px -22px;padding:14px 22px 18px;background:linear-gradient(rgba(255,255,255,0),#fff 30%);display:flex;justify-content:flex-end}
.lbl{font-size:12px;font-weight:600;color:var(--grau);margin-bottom:6px}
.fn-vorschau{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2);margin-bottom:16px}
.fn-vorschau b{display:block;font-size:15px}
.farbwahl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.farbwahl button{width:30px;height:30px;border-radius:10px;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .25s var(--federn),box-shadow .2s}
.farbwahl button:hover{transform:scale(1.08)}
.farbwahl button.an{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c)}
.schalter-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2);margin-bottom:6px}
.schalter-zeile b{display:block;font-size:13.5px}
.schalter-zeile .schalter{margin:0}
.schalter i{display:none}

/* Firmen-Portfolio */
.portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:18px;margin-bottom:18px}
.firma-k .bezel-i{display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}
.firma-k .bezel-i::before{content:"";position:absolute;inset:0 0 auto;height:90px;background:radial-gradient(420px 90px at 0 0,color-mix(in srgb,var(--mk) 10%,transparent),transparent 70%);pointer-events:none}
.firma-k.akt{background:linear-gradient(180deg,rgba(18,103,220,.16),rgba(18,103,220,.05))}
.fk-kopf{display:flex;align-items:center;gap:13px;position:relative}
.fk-name{flex:1;min-width:0}
.fk-name h2{font-size:19px;font-weight:750;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fk-name span{font-size:12.5px;color:var(--grau)}
.fk-name span b{color:var(--blau-d);font-weight:650}
.fk-kopf .chip svg{width:12px;height:12px}
.fk-marken{display:flex;flex-wrap:wrap;gap:6px}
.fk-marken span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text2);background:var(--flaeche2);border-radius:8px;padding:3px 8px;box-shadow:inset 0 0 0 1px var(--linie2)}
.fk-marken i{width:8px;height:8px;border-radius:3px}
.fk-zahlen{display:grid;grid-template-columns:repeat(4,1fr);border-radius:14px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2)}
.fk-zahlen div{padding:11px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.fk-zahlen div+div{border-left:1px solid var(--linie2)}
.fk-zahlen b{font-size:21px;font-weight:750;letter-spacing:-.03em;line-height:1.1}
.fk-zahlen b.rot{color:var(--rot)} .fk-zahlen b.gruen{color:var(--gruen)}
.fk-zahlen span{font-size:11.5px;color:var(--grau);line-height:1.25;white-space:nowrap}
.fk-g-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--grau);margin-bottom:6px}
.fk-g-t b{color:var(--text);font-size:12.5px}
.fortschritt{height:6px;border-radius:99px;background:var(--linie2);overflow:hidden}
.fortschritt i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blau),#4A8FEA);transform-origin:left;animation:wachsen .9s var(--federn) both}
@keyframes wachsen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fk-fuss{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--linie2)}
.fk-fuss .knopf svg{width:14px;height:14px}
.firma-neu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:28px;border-radius:26px;border:1.5px dashed #C3D2E3;background:rgba(255,255,255,.45);cursor:pointer;color:var(--text2);min-height:260px;
  transition:background .3s var(--ease),border-color .3s,transform .4s var(--federn)}
.firma-neu:hover{background:rgba(255,255,255,.85);border-color:var(--blau);transform:translateY(-2px)}
.firma-neu b{font-family:var(--display);font-size:17px;color:var(--text)}
.firma-neu span:last-child{font-size:13px;color:var(--grau);max-width:240px}
.fn-plus{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--blau-h);color:var(--blau);box-shadow:inset 0 0 0 1px rgba(18,103,220,.15);margin-bottom:6px;transition:transform .4s var(--federn)}
.firma-neu:hover .fn-plus{transform:rotate(90deg)}
.fn-plus svg{width:20px;height:20px}
.erklaer-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.erklaer-raster b{display:block;font-size:14.5px;margin:10px 0 4px}
.erklaer-raster p{margin:0;color:var(--grau);font-size:13.5px;max-width:42ch}
.erklaer .nr,.anleitung li::marker{font-family:var(--display)}
.erklaer .nr{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--navy);color:var(--gold-hell);font-size:12.5px;font-weight:800}

/* Google verbinden */
.verb-held{margin-bottom:16px}
.verb-held .bezel-i{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:24px}
.stepper{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;position:relative}
.stepper li{display:flex;gap:12px;position:relative;padding-bottom:22px}
.stepper li:last-child{padding-bottom:0}
.stepper li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:4px;width:2px;border-radius:2px;background:var(--linie2)}
.stepper li.fertig:not(:last-child)::after{background:var(--gruen)}
.sp-nr{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:750;background:var(--flaeche2);color:var(--grau);box-shadow:inset 0 0 0 1px var(--linie)}
.sp-nr svg{width:15px;height:15px}
.stepper li.jetzt .sp-nr{background:var(--navy);color:var(--gold-hell);box-shadow:0 0 0 4px var(--blau-h)}
.stepper li.fertig .sp-nr{background:var(--gruen);color:#fff;box-shadow:none}
.stepper b{display:block;font-size:14px;margin-top:4px}
.stepper span{font-size:12.5px;color:var(--grau)}
.verb-inhalt{border-left:1px solid var(--linie2);padding-left:28px;display:flex;align-items:center}
.g-start{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;width:100%}
.g-start h2{font-size:22px;font-weight:750;letter-spacing:-.03em;margin-bottom:6px}
.g-start p{margin:0 0 12px;color:var(--text2);max-width:58ch}
.g-rechte{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-rechte li{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--text2)}
.g-rechte svg{width:16px;height:16px;color:var(--gruen);flex:none}
.g-knopf-box{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:240px}
.g-knopf{display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 16px;border-radius:99px;border:0;background:#fff;cursor:pointer;font-weight:650;font-size:14.5px;color:#1F1F1F;
  box-shadow:0 0 0 1px #DADCE0,0 10px 24px -12px rgba(16,35,63,.35);transition:box-shadow .25s var(--ease),transform .3s var(--federn)}
.g-knopf:hover{box-shadow:0 0 0 1px #C5C8CD,0 16px 30px -14px rgba(16,35,63,.4);transform:translateY(-1px)}
.g-knopf:disabled{opacity:.55;cursor:not-allowed;transform:none}
.g-logo{width:20px;height:20px;flex:none}
.gelb-t{color:var(--gelb)}
.g-konto{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%}
.g-konto>.g-logo{width:40px;height:40px;padding:9px;border-radius:13px;background:#fff;box-shadow:0 0 0 1px #E3E6EA}
.g-konto b{display:block;font-size:15px}
.g-konto span{font-size:12.5px;color:var(--grau)}
.g-konto .aktionen{margin-left:auto}
.g-zeilen{display:flex;flex-direction:column;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linie2);overflow:hidden}
.g-zeile{display:grid;grid-template-columns:28px minmax(0,1fr) 22px minmax(0,1.15fr);gap:12px;align-items:center;padding:12px 14px;transition:background .2s}
.g-zeile+.g-zeile{border-top:1px solid var(--linie2)}
.g-zeile:hover{background:var(--navy-hh)}
.g-zeile.fertig{opacity:.62}
.g-wahl{margin:0}
.g-wahl input{width:17px;height:17px;accent-color:var(--navy)}
.g-ort b{display:block;font-size:13.5px}
.g-ort span{font-size:12.5px;color:var(--grau)}
.g-pfeil svg{width:16px;height:16px;color:var(--grau2)}
.g-ziel{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.g-ziel select{width:auto;max-width:100%;padding:6px 28px 6px 10px;font-size:13px}
.g-ziel select.aus{display:none}
.g-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.anleitung{margin:0;padding-left:22px;display:grid;gap:9px;color:var(--text2);font-size:13.5px}
.anleitung code,.uri-zeile code{font-size:12px;background:var(--flaeche2);border-radius:6px;padding:2px 6px;box-shadow:inset 0 0 0 1px var(--linie2);word-break:break-all}
.uri-zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.verkn-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.verkn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2)}
.verkn>div{flex:1;min-width:0}
.verkn b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verkn div span{font-size:12px;color:var(--grau)}
.vk-punkt{width:8px;height:8px;border-radius:50%;background:var(--grau2);flex:none}
.verkn.ja .vk-punkt{background:var(--gruen);box-shadow:0 0 0 3px var(--gruen-h)}
.skelett{height:14px;border-radius:7px;margin:10px 0;background:linear-gradient(90deg,var(--linie2),#F6F9FC,var(--linie2));background-size:200% 100%;animation:schimmer 1.2s linear infinite}
.skelett.kurz{width:40%}
@keyframes schimmer{to{background-position:-200% 0}}

/* Standorte */
.segment{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:rgba(255,255,255,.7);box-shadow:var(--rand-fein),0 6px 16px -12px rgba(16,35,63,.3);margin-bottom:20px;flex-wrap:wrap}
.segment a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:7px 13px;border-radius:10px;font-size:13px;font-weight:650;color:var(--text2);text-decoration:none;transition:background .2s,color .2s}
.segment a span{font-size:11px;font-weight:700;color:var(--grau);background:var(--linie2);border-radius:6px;padding:0 6px;line-height:18px}
.segment a:hover{background:var(--aktion);color:var(--aktion-text)}
.segment a.an{background:var(--navy);color:#fff;box-shadow:0 4px 10px -6px rgba(16,35,63,.8)}
.segment a.an span{background:rgba(255,255,255,.16);color:#fff}
.marken-gruppe{margin-bottom:26px}
.mg-kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mg-kopf>div{flex:1;min-width:0}
.mg-kopf h2{font-size:18px;font-weight:750;letter-spacing:-.025em}
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px}
.ort{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;border-radius:20px;padding:16px;box-shadow:var(--rand-fein),var(--tiefe),inset 0 1px 0 #fff;overflow:hidden;transition:transform .45s var(--federn),box-shadow .3s var(--ease)}
.ort::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--mk),color-mix(in srgb,var(--mk) 40%,#fff))}
.ort:hover{transform:translateY(-2px);box-shadow:var(--rand-fein),0 30px 50px -30px rgba(16,35,63,.4)}
.ort.aus{background:rgba(255,255,255,.62)}
.ort.aus .ort-kopf,.ort.aus .ort-mitte{opacity:.62}
.ort-kopf{display:flex;align-items:center;gap:11px}
.ort-sym{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px;color:var(--mk);background:color-mix(in srgb,var(--mk) 11%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk) 22%,transparent)}
.ort-t{flex:1;min-width:0}
.ort-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;letter-spacing:-.01em;line-height:1.25}
.ort-t span{font-size:12px;color:var(--grau)}
.ort-bearb{opacity:.55}
.ort:hover .ort-bearb,.ort-bearb:focus-visible{opacity:1}
.ort-bearb svg{width:15px;height:15px}
.ort-schnitt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ort-schnitt b{font-size:28px;font-weight:750;letter-spacing:-.04em;line-height:1}
.ort-schnitt span:last-child{font-size:12px;color:var(--grau);width:100%}
.ort-schnitt.leer span{font-size:12.5px;color:var(--grau2)}
.ort-status{display:flex;gap:6px;flex-wrap:wrap;min-height:22px}
.ort-status .chip svg{width:12px;height:12px}
.ort-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:11px;border-top:1px solid var(--linie2);margin-top:auto}
.ort-fuss>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ort-links{display:flex;gap:4px}
.ort-links a{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--text2);transition:background .2s,color .2s}
.ort-links a:hover{background:var(--aktion);color:var(--aktion-text)}
.ort-links svg{width:15px;height:15px}
.marken-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.marke-k{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:14px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2);color:var(--text);text-decoration:none;transition:background .2s,box-shadow .2s}
.marke-k:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--aktion-rand),0 8px 18px -12px rgba(16,35,63,.35)}
.marke-k>div{flex:1;min-width:0}
.marke-k b{display:block;font-size:13.5px}
.marke-k>div span{font-size:12px;color:var(--grau)}
.marke-k>svg{width:15px;height:15px;color:var(--grau2)}
.marke-neu{display:flex;gap:8px;align-items:center;padding:8px;border-radius:14px;border:1.5px dashed var(--linie)}
.marke-neu input[type=color]{width:40px;height:36px;padding:3px;flex:none}
.leer-karte{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:48px 20px;border-radius:24px;border:1.5px dashed var(--linie);margin-bottom:20px}
.leer-karte b{font-size:18px}
.leer-karte span{color:var(--grau);margin-bottom:10px}
.suche-feld{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.suche-feld:focus-within{box-shadow:inset 0 0 0 1px var(--blau),0 0 0 3px rgba(18,103,220,.14)}
.suche-feld svg{width:17px;height:17px;color:var(--grau);flex:none}
.suche-feld input{border:0;box-shadow:none!important;padding:12px 0;background:none}
.treffer{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.treffer-z{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:10px 12px;border-radius:12px;border:0;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2);cursor:pointer;transition:background .2s,box-shadow .2s}
.treffer-z:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--aktion-rand)}
.treffer-z.an{background:var(--blau-h);box-shadow:inset 0 0 0 1.5px var(--blau)}
.treffer-z:disabled{opacity:.55;cursor:default}
.treffer-z b{display:block;font-size:13.5px}
.treffer-z span{font-size:12px;color:var(--grau)}
.trenn{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--grau2);font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.12em}
.trenn::before,.trenn::after{content:"";flex:1;height:1px;background:var(--linie2)}

/* Systemcheck */
.score-ring{display:block;flex:none}
.sr-bogen{animation:ringZiehen 1.1s var(--federn) both}
@keyframes ringZiehen{from{stroke-dashoffset:var(--u)}}
.sr-zahl{font-size:38px;font-weight:800;letter-spacing:-.04em;fill:var(--navy)}
.sc-held{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:18px}
.sc-score{display:flex;gap:26px;align-items:center}
.sc-score>div{flex:1;min-width:0}
.sc-score h2{font-size:23px;font-weight:750;letter-spacing:-.03em;margin:6px 0 2px}
.sc-score p{margin:0 0 14px;color:var(--grau)}
.sc-bereiche{display:grid;gap:8px}
.sc-bereiche>div{display:grid;grid-template-columns:110px 1fr 38px;align-items:center;gap:10px;font-size:12.5px;color:var(--text2)}
.sc-bereiche b{font-size:12px;text-align:right}
.sc-top ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:n;display:grid;gap:12px}
.sc-top li{counter-increment:n;display:grid;grid-template-columns:26px 1fr;column-gap:10px;font-size:13px}
.sc-top li::before{content:counter(n);grid-row:span 3;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--navy);color:var(--gold-hell);font-weight:800;font-size:11.5px}
.sc-top li b{font-size:13.5px}
.sc-top li span{color:var(--grau)}
.sc-top li a{font-weight:650;color:var(--blau-d);text-decoration:none;font-size:12.5px}
.sc-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sc-liste{list-style:none;margin:0;padding:0}
.sc-zeile{display:flex;gap:12px;align-items:flex-start;padding:11px 0}
.sc-zeile+.sc-zeile{border-top:1px solid var(--linie2)}
.sc-zeile>div{flex:1;min-width:0}
.sc-zeile b{display:block;font-size:13.5px}
.sc-zeile>div span{font-size:12.5px;color:var(--grau)}
.sc-sym{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center}
.sc-sym svg{width:16px;height:16px}
.sc-zeile.ok .sc-sym{background:var(--gruen-h);color:var(--gruen)}
.sc-zeile.warnung .sc-sym{background:var(--gelb-h);color:var(--gelb)}
.sc-zeile.fehler .sc-sym{background:var(--rot-h);color:var(--rot)}
.sc-zeile.info .sc-sym{background:var(--blau-h);color:var(--blau)}
.sc-zeile .knopf{flex:none;align-self:center}
.sc-zeile .knopf svg{width:13px;height:13px}

/* Mobil */
@media(max-width:1100px){.verb-held .bezel-i{grid-template-columns:1fr}.verb-inhalt{border-left:0;padding-left:0;border-top:1px solid var(--linie2);padding-top:20px}.sc-held{grid-template-columns:1fr}}
@media(max-width:900px){.portfolio{grid-template-columns:1fr}.erklaer-raster{grid-template-columns:1fr;gap:14px}.sc-raster{grid-template-columns:1fr}.g-start{grid-template-columns:1fr}.g-knopf-box{align-items:flex-start;text-align:left;max-width:none}}
@media(max-width:600px){
  .fk-zahlen{grid-template-columns:repeat(2,1fr)}.fk-zahlen div:nth-child(3){border-left:0}.fk-zahlen div:nth-child(n+3){border-top:1px solid var(--linie2)}
  .g-zeile{grid-template-columns:24px minmax(0,1fr)}.g-pfeil{display:none}.g-ziel{grid-column:2}
  .sc-score{flex-direction:column;align-items:flex-start}.sc-zeile{flex-wrap:wrap}.sc-zeile .knopf{margin-left:40px}
  .sch-form .zwei{grid-template-columns:1fr}.schublade{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:88dvh;transform:translateY(30px)}
  .segment{display:flex;width:100%}.segment a{flex:1;justify-content:center;padding:7px 8px}
  .bezel{border-radius:22px;padding:5px}.bezel-i{border-radius:17px;padding:16px}
}

/* Cockpit: Standorte ohne Daten gebündelt */
.ohne-daten{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:12px 0 0;min-width:0;border-radius:14px;background:var(--flaeche2);box-shadow:inset 0 0 0 1px var(--linie2);color:var(--text);text-decoration:none;transition:background .2s,box-shadow .2s}
.ohne-daten:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--aktion-rand),0 10px 22px -16px rgba(16,35,63,.4)}
.ohne-daten>svg{width:16px;height:16px;color:var(--blau);flex:none;transition:transform .4s var(--federn)}
.ohne-daten:hover>svg{transform:translateX(3px)}
.od-stapel{display:flex;flex:none}
.od-stapel .ort-sym{width:28px;height:28px;border-radius:9px;font-size:12px;box-shadow:0 0 0 2px #fff,inset 0 0 0 1px color-mix(in srgb,var(--mk) 22%,transparent)}
.od-stapel .ort-sym+.ort-sym{margin-left:-8px}
.od-t{flex:1;min-width:0;display:flex;flex-direction:column}
.od-t b{font-size:13.5px}
.od-t span{font-size:12px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Verlauf & Jahre */
.verlauf-leiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.diagramm .d-wert{font-weight:700;fill:var(--text2)}
.diagramm .d-name{font-weight:700;fill:var(--text2);font-size:11px}
.waerme{border-collapse:separate;border-spacing:3px;font-size:12px;width:100%}
.waerme th{font-weight:600;color:var(--grau);font-size:11px;padding:2px 4px;white-space:nowrap}
.waerme th.wt{text-align:left;color:var(--text);font-size:12.5px}
.waerme td{--a:0;background:rgba(191,90,66,var(--a));border-radius:6px;text-align:center;height:28px;min-width:30px;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.waerme td.dunkel{color:#fff}
.waerme td.leer{background:var(--flaeche2)}
.tabelle td.mono{white-space:nowrap}
