/* Schriften lokal gehostet (SIL Open Font License): Geist und Unbounded, Variable Fonts, lateinischer Zeichensatz */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/unbounded-latin.woff2) format("woff2")}
/* TC Solutions - Look "Nachtschicht" für PI-Planer, System-Wache, Incursions.
   Farbe = Information: jedes Werkzeug trägt seine eigene Farbe (--h). */
:root{
  --abyss:#0A1014; --flaeche:#101A20; --flaeche2:#15232B; --linie:#22313A; --hell:#E8EFF3; --still:#93A6B1; --leise:#6B7F8B;
  --markt:#F2B84B; --flotte:#6B9BFF; --pi:#55D6A1; --wache:#FF7A66; --inc:#B08CFF; --prod:#4FD1E3; --lager:#F28CB8;
  --gut:#55D6A1; --warn:#F2B84B; --kritisch:#FF7A66;
  --h:var(--still);
  --display:"Unbounded","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --text:"Geist","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --rand:clamp(20px,4.5vw,64px);
}
[data-tool="pi"]{--h:var(--pi)}
[data-tool="wache"]{--h:var(--wache)}
[data-tool="inc"]{--h:var(--inc)}
[data-tool="prod"]{--h:var(--prod)}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--abyss);color:var(--hell);font:17px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--h);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--h) 35%,transparent);color:#fff}
:focus-visible{outline:3px solid var(--flotte);outline-offset:3px;border-radius:6px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--rand);width:100%}
.wrap.eng{max-width:820px}

/* Kopf */
.top{position:sticky;top:0;z-index:30;background:rgba(10,16,20,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;font:600 17px var(--display);letter-spacing:-.02em;color:var(--hell);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand i{width:12px;height:12px;border-radius:50%;background:conic-gradient(var(--markt),var(--flotte),var(--pi),var(--wache),var(--inc),var(--markt))}
.nav{display:flex;gap:4px;margin-left:auto;font-size:15px;font-weight:500;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:999px;color:var(--still)}
.nav a:hover{background:var(--flaeche2);color:var(--hell);text-decoration:none}
.nav a.on{background:var(--flaeche2);color:var(--h)}
.lang{display:flex;gap:2px;font-size:13px;font-weight:600}
.lang button{background:none;border:0;color:var(--still);padding:6px 9px;border-radius:8px;cursor:pointer;font:inherit}
.lang button.on{background:var(--flaeche2);color:var(--hell)}

/* Seite */
main.seite{flex:1;padding:clamp(28px,4vw,56px) 0 clamp(40px,6vw,88px)}
.kopf{margin-bottom:clamp(22px,3vw,40px)}
.punkt{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--h);box-shadow:0 0 18px var(--h);margin-bottom:16px}
h1{font:700 clamp(28px,4.2vw,60px)/1.05 var(--display);letter-spacing:-.045em;margin:0;color:var(--hell)}
h1.klein{font-size:clamp(26px,3.2vw,44px)}
h2{font:600 clamp(20px,2vw,28px)/1.15 var(--display);letter-spacing:-.04em;margin:0 0 12px;color:var(--hell)}
h3{font:600 18px/1.2 var(--display);letter-spacing:-.03em;margin:0;color:var(--hell)}
.lead{max-width:62ch;color:var(--still);margin:14px 0 0;font-size:clamp(16px,1.3vw,19px)}
.zentriert{text-align:center}.zentriert .lead{margin-left:auto;margin-right:auto}
.abschnitt{margin:clamp(26px,3.5vw,48px) 0 14px;font:600 15px var(--text);color:var(--still)}
.hinweis{max-width:900px;margin:28px 0 0;font-size:14.5px;color:var(--still);line-height:1.55}
.zurueck{margin-top:34px;font-size:15px}

/* Flächen und Knöpfe */
.flaeche{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:22px;padding:24px 26px;overflow:hidden}
.flaeche.glimmer::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;height:90%;background:radial-gradient(closest-side,color-mix(in srgb,var(--h) 22%,transparent),transparent);pointer-events:none}
.flaeche>*{position:relative}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;background:var(--hell);color:var(--abyss);font:600 15px var(--text);border:0;cursor:pointer;text-decoration:none}
.knopf:hover{background:var(--h);color:var(--abyss);text-decoration:none}
.knopf.leise{background:transparent;color:var(--hell);border:1px solid var(--linie)}
.knopf.leise:hover{background:var(--flaeche2);border-color:var(--still);color:var(--hell)}
.knopf.klein{padding:8px 14px;font-size:14px}
.knopf.an{background:var(--h);color:var(--abyss)}
.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fehler{background:color-mix(in srgb,var(--kritisch) 12%,var(--flaeche));border:1px solid color-mix(in srgb,var(--kritisch) 45%,transparent);color:#FFC9C0;padding:14px 18px;border-radius:14px;margin:0 0 20px;font-size:15.5px}
.leer{color:var(--still);font-style:italic}

/* Formularfelder */
select,input[type=text],input[type=password]{font:inherit;font-size:16px;color:var(--hell);background:var(--abyss);border:1px solid var(--linie);border-radius:12px;padding:10px 14px}
select:focus,input[type=text]:focus{outline:none;border-color:var(--h)}
select option{background:var(--flaeche);color:var(--hell)}
label.feld{display:block;font:600 15px var(--text);color:var(--still);margin-bottom:8px}
.feldblock{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--linie)}
.feldblock:last-of-type{border-bottom:0}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--hell)}
.check input{accent-color:var(--h);width:16px;height:16px}
.kleinzeile{font-size:14px;color:var(--still);margin:8px 0 0;line-height:1.5}
.zeile-felder{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.zeile-felder select{min-width:96px}
.zeile-felder select.breit{flex:1;min-width:220px}
.x{background:none;border:1px solid var(--linie);color:var(--still);cursor:pointer;padding:0 14px;border-radius:12px;font:inherit}
.x:hover{border-color:var(--kritisch);color:var(--kritisch)}

/* Pillen und Status */
.pille{display:inline-block;padding:3px 11px;border-radius:999px;font:600 13px var(--text);white-space:nowrap}
.pille.ruhig,.pille.etabliert{color:var(--gut);background:color-mix(in srgb,var(--gut) 15%,transparent)}
.pille.beobachten,.pille.mobilisierend{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.pille.kritisch,.pille.rueckzug{color:var(--kritisch);background:color-mix(in srgb,var(--kritisch) 16%,transparent)}
.status-punkt{width:8px;height:8px;border-radius:50%;background:var(--gut);box-shadow:0 0 10px var(--gut);display:inline-block}

/* Zahlenanzeigen */
.zahl{font:700 clamp(26px,3vw,40px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--hell)}
.zahl.gross{font-size:clamp(34px,4.6vw,64px);color:var(--h)}
.zahl-label{font-size:14px;color:var(--still);margin-top:6px}

/* Karten-Raster */
.raster3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.raster2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.raster-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.zusammen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}

/* Planeten (PI) */
.char-block{margin-bottom:44px}
.char-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.char-head img{width:60px;height:60px;border-radius:16px;border:1px solid var(--linie)}
.char-name{font:600 clamp(20px,2vw,26px) var(--display);letter-spacing:-.04em;color:var(--hell)}
.char-role{font-size:15px;color:var(--h)}
.planet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.planet-tile{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--flaeche);border:1px solid var(--linie)}
.planet-tile.aendern{border-color:var(--wache);box-shadow:0 0 0 1px var(--wache)}
.planet-tile img{width:60px;height:60px;border-radius:50%;flex-shrink:0;box-shadow:0 0 14px rgba(0,0,0,.5)}
.ptype{font:600 15px var(--display);letter-spacing:-.03em;color:var(--hell)}
.pline{font-size:15px;margin-top:5px;line-height:1.5;color:var(--still)}
.pline.abbau{color:var(--markt)}.pline.veredelung{color:var(--gut)}.pline.dezent{color:var(--leise)}
.mini{font:600 12.5px var(--text);margin-top:10px;color:var(--still)}
.mini.abbau{color:var(--markt)}.mini.veredelung{color:var(--gut)}
.tipp{font-size:13px;color:var(--still);margin-top:10px;border-top:1px dashed var(--linie);padding-top:8px}
.tipp.neu{color:var(--h)}

/* Zeilenlisten */
.liste>*{padding:13px 0;border-top:1px solid var(--linie)}
.liste>*:first-child{border-top:0}
.zeilenkopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}

/* Fuß */
.foot{padding:26px 0 40px;color:var(--leise);font-size:14px}
.foot .wrap{border-top:1px solid var(--linie);padding-top:22px}

@media (max-width:1100px){.planet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.raster2{grid-template-columns:1fr}.zusammen{grid-template-columns:1fr}.raster3{grid-template-columns:1fr}}
@media (max-width:640px){.planet-grid{grid-template-columns:1fr}.nav{display:none}.lang{margin-left:auto}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Das TC-Wappen (Kreuz-Logo) bleibt die Marke */
.brand img{width:40px;height:40px;object-fit:contain;display:block}
.brand i{display:none}

/* Ergänzungen: Datenzeilen, Balken, Statuskarten, Wache, PI-Formulare */
.abschnitt-titel{margin:clamp(26px,3.5vw,44px) 0 16px}
.abschnitt-titel:first-of-type{margin-top:0}
.dezent{color:var(--leise)}
.schmal{width:100%;max-width:440px}
.formular{max-width:900px;margin-bottom:34px}
.hinweisbox{max-width:900px}

.datenzeile{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--linie);font-size:15.5px}
.datenzeile .k{color:var(--still)}
.datenzeile .v{color:var(--hell);text-align:right;font-variant-numeric:tabular-nums}

.balken{height:8px;border-radius:999px;background:var(--flaeche2);overflow:hidden;margin-top:10px}
.balken i{display:block;height:100%;border-radius:999px;background:var(--h)}
.balken i.niedrig{background:var(--warn)}
.balken i.warnung{background:var(--kritisch)}

.bosskennung{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;font-size:15px;color:#FFC9C0}

.statuskarte{padding:18px 20px;border-radius:18px}
.statuskarte.critical{border-color:color-mix(in srgb,var(--kritisch) 55%,transparent)}
.statuskarte.watch{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.statuskarte.calm{border-color:var(--linie)}
.sysname{font:600 19px var(--display);letter-spacing:-.03em;color:var(--hell)}

.wache-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:44px}
.wache-zwei .flaeche>h2{font-size:20px;margin-bottom:14px}
.logos-paar{display:inline-flex;gap:4px;flex-shrink:0}
.logos-paar img{width:32px;height:32px;border-radius:8px;display:block}
.schiff{font-weight:600;color:var(--hell)}
.schiff.verlust{color:var(--kritisch)}
.schiff.abschuss{color:var(--gut)}

/* PI-Plan: Vorher/Nachher */
.vergleich{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin:22px 0 14px}
.vergleich .pfeil{font:600 14px var(--text);color:var(--leise);padding-bottom:10px}
.char-block .liste{margin-bottom:10px}

@media (max-width:900px){.wache-zwei{grid-template-columns:1fr}}