/* PixelPatch – Neon-HUD-Theme · Copyright (c) 2026 by: Sascha Pick */
@font-face{font-family:"Chakra Petch";font-weight:500 600;font-display:swap;src:url(/static/fonts/ChakraPetch-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(/static/fonts/ChakraPetch-Bold.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(/static/fonts/Inter.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-display:swap;src:url(/static/fonts/JetBrainsMono.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:100 900;font-display:swap;src:url(/static/fonts/Roboto.woff2) format("woff2")}
@font-face{font-family:"Roboto Condensed";font-weight:100 900;font-display:swap;src:url(/static/fonts/RobotoCondensed.woff2) format("woff2")}
:root{
  --bg:#121419;--bg2:#171A20;--panel:#1A1D24;--panel2:#15181D;--field:#0E1014;--line:#262A33;--line2:#2E3340;--line3:#3A404D;
  --tx:#E8EAED;--tx-hi:#F4F5F7;--tx2:#C9CED7;--tx3:#B4BBC7;--mute:#9AA3B2;--mute2:#8A93A3;
  --acc:#3BE07F;--acc-hi:#9DFFC2;--acc-bg:#0F2A1A;--acc-line:#24583A;--acc-ink:#06110B;
  --cy:#67E8F9;--cy-bg:#0B3440;--ok:#7BD88F;--ok-bg:#18301F;--warn:#F2C14E;--warn-bg:#33291A;--warn-tx:#F1D9A8;--warn-line:#5A4520;
  --err:#F28B82;--err-bg:#3A1F1F;--err-line:#5A2A2A;--win:#7CC4FF;--win-bg:#0B2740;
  --r:12px;--font:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;--disp:"Chakra Petch","Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 var(--font);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--tx)}a:hover{color:#fff}
h1,h2,h3{font-family:var(--disp);color:var(--tx-hi);margin:0;line-height:1.2}
h1{font-size:30px;font-weight:700}h2{font-size:20px;font-weight:700}h3{font-size:17px;font-weight:600}
p{margin:0}
img{max-width:100%}
.mono{font-family:var(--mono);font-size:13px}
.mute{color:var(--mute)}.small{font-size:13px}.tiny{font-size:12px}
.acc{color:var(--acc)}.cy{color:var(--cy)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.grow{flex:1}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.between{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

/* Kopfleiste */
.hdr{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 24px;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:48px;height:48px;object-fit:contain}
.brand span{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--tx-hi);letter-spacing:.02em}
.search{flex:1 1 180px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--field);border:1px solid var(--line2);border-radius:var(--r)}
.search input{flex:1;min-width:0;width:0;background:transparent;border:0;outline:0;color:var(--tx);font:inherit}
.search:focus-within{border-color:var(--acc)}
.topnav{display:flex;gap:4px;flex-wrap:wrap}
.topnav a{padding:10px 10px;border-radius:10px;text-decoration:none;color:var(--tx3);font-weight:500}
.topnav a:hover{background:#1E222B;color:var(--tx)}
.topnav a.on{background:var(--acc-bg);color:var(--acc);font-weight:600}
.iconbtn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;color:var(--tx3);background:transparent;text-decoration:none;cursor:pointer}
.iconbtn:hover{border-color:var(--acc);color:var(--acc)}
.userchip{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--acc-line);background:var(--acc-bg);cursor:pointer;color:var(--tx);font:inherit;text-decoration:none}
.userchip .who{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.userchip .who b{font-size:14px;color:var(--tx-hi)}
.userchip .who span{font-size:10px;letter-spacing:.1em;color:var(--acc)}
.avatar{border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--acc);background:#22322A;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#E6FFF0;overflow:hidden}
.avatar.reader{border-color:var(--cy)}
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:52px;min-width:260px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.55);padding:8px;display:none;z-index:40}
.menu.open .menu-pop{display:block}
.menu-pop a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:9px;text-decoration:none;font-size:14px}
.menu-pop a:hover{background:#1E222B}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* Layout */
.wrap{max-width:1480px;width:100%;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:18px;flex:1}
.layout{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.side{flex:1 1 240px;max-width:280px;display:flex;flex-direction:column;gap:12px}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.aside{flex:1 1 280px;max-width:360px;display:flex;flex-direction:column;gap:14px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--mute);font-size:14px}.crumbs a{color:var(--mute)}
.foot{padding:16px 24px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

/* Navigation Systeme */
.sec-t{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 2px}
.navall{display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 12px;border-radius:10px;background:#1E222B;text-decoration:none;font-weight:500}
.navgrp{border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.navgrp>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 12px;cursor:pointer}
.navgrp>summary::-webkit-details-marker{display:none}
.navgrp>summary .chev{transition:transform .15s}
.navgrp[open]>summary .chev{transform:rotate(90deg)}
.navgrp .items{display:flex;flex-direction:column;gap:2px;padding:0 6px 8px 28px}
.navitem{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:0 10px;border-radius:8px;text-decoration:none}
.navitem:hover{background:#1E222B}
.navitem.on{background:var(--acc-bg);outline:1px solid var(--acc-line)}
.navitem.on .cnt{color:var(--acc)}
.cnt{font-family:var(--mono);font-size:13px;color:var(--mute)}
.mlogo{height:20px;max-width:130px;object-fit:contain}
.mname{font-family:var(--disp);font-weight:700;letter-spacing:.2em;color:var(--tx-hi);font-size:15px}
.slogo{height:18px;max-width:130px;object-fit:contain;display:block}
.sname{font-weight:600;font-size:14px}

/* Karten & Listen */
.card{padding:18px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line2)}
.card.flat{background:var(--panel2)}
.card h2{margin-bottom:10px}
.cardlink{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);text-decoration:none}
.cardlink:hover{border-color:var(--acc-line)}
.cardlink .t{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--tx-hi);flex:1 1 280px}
.list{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.tile{padding:14px;border-radius:12px;background:var(--field);text-align:center}
.tile b{display:block;font-family:var(--disp);font-size:26px;color:var(--acc)}
.tile span{font-size:12px;color:var(--mute)}
.thumbph{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#1C2028 0 12px,#191C23 12px 24px);display:flex;align-items:center;justify-content:center;color:var(--mute2);font-size:13px;position:relative;overflow:hidden}
.thumbph img{width:100%;height:100%;object-fit:cover}
.gcard{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line2);text-decoration:none}
.gcard:hover{border-color:var(--acc-line)}
.gcard .body{padding:14px 16px;display:flex;flex-direction:column;gap:7px}
.gcard .t{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--tx-hi)}
.ov{position:absolute;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kv>div{padding:12px 14px;background:var(--panel)}
.kv .k{font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.07em}
.kv .v{margin-top:3px;font-weight:600;word-break:break-word}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:22px 26px;border-radius:18px;background:var(--panel2);border:1px solid var(--acc-line)}

/* Badges & Chips */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-err{background:var(--err-bg);color:var(--err)}
.b-info{background:var(--cy-bg);color:var(--cy)}.b-acc{background:var(--acc-bg);color:var(--acc)}.b-mute{background:#232733;color:var(--tx2)}
.b-win{background:var(--win-bg);color:var(--win)}
.tag{display:inline-flex;padding:3px 9px;border-radius:6px;background:#232733;color:var(--tx2);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--tx2);font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.chip:hover{border-color:var(--acc-line);color:var(--tx)}
.chip.on{border-color:var(--acc);background:var(--acc-bg);color:var(--tx-hi)}
.chip img{height:16px;max-width:110px;object-fit:contain}
.meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--mute);font-size:13px}
.meta .r{margin-left:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line3);background:var(--panel);color:var(--tx);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--acc);color:#fff}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}
.btn.primary:hover{background:var(--acc-hi);border-color:var(--acc-hi)}
.btn.danger{border-color:var(--err-line);color:var(--err);background:transparent}
.btn.danger:hover{background:var(--err-bg)}
.btn.dashed{border-style:dashed;background:transparent;color:var(--tx2)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn.lg{min-height:60px;font-size:17px;border-radius:14px}
.linkbtn{background:none;border:0;color:var(--acc);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* Formulare */
.f{width:100%;min-height:44px;padding:0 12px;background:var(--field);color:var(--tx);border:1px solid var(--line2);border-radius:10px;font:inherit}
textarea.f{padding:10px 12px;min-height:96px;resize:vertical;line-height:1.5}
select.f{padding-right:8px}
.f:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.f::placeholder{color:var(--mute2)}
.f.mono{font-family:var(--mono)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tx2);font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
fieldset.sect{margin:0;padding:20px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:14px;min-width:0}
fieldset.sect>legend{padding:0 8px;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--tx-hi)}
.check{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:10px;background:var(--field);border:1px solid var(--line2);font-size:14px;cursor:pointer}
.check input,.cb{width:18px;height:18px;accent-color:var(--acc)}
.seg{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;background:var(--field);color:var(--tx2);border-left:1px solid var(--line2)}
.seg label:first-child span{border-left:0}
.seg input:checked+span{background:var(--acc-bg);color:var(--acc);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--acc)}
.dyn{display:flex;flex-direction:column;gap:8px}
.dynrow{display:flex;gap:8px;align-items:center}
.dynrow .num{width:28px;height:28px;flex:none;border-radius:50%;background:var(--acc-bg);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:26px 16px;border:2px dashed var(--line3);border-radius:14px;background:var(--field);text-align:center;cursor:pointer}
.drop.over{border-color:var(--acc);background:var(--acc-bg)}
.drop input{position:absolute;left:-9999px}
.hint{font-size:13px;color:var(--mute2)}
.formbar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:14px 0;background:linear-gradient(transparent,var(--bg) 30%)}

/* Tabellen */
.tblwrap{overflow-x:auto;border:1px solid var(--line2);border-radius:14px;background:var(--panel)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--mute);background:var(--panel2);font-weight:500;padding:11px 12px;white-space:nowrap}
.tbl td{padding:11px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr.hl td{background:#211B12}
.tbl tr.removed td{opacity:.55}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.tabs a{display:flex;align-items:center;min-height:44px;padding:0 16px;color:var(--tx3);text-decoration:none;border-bottom:2px solid transparent}
.tabs a.on{color:var(--tx-hi);font-weight:600;border-bottom-color:var(--acc)}

/* Hinweise */
.flash{padding:12px 16px;border-radius:12px;border:1px solid var(--acc-line);background:var(--acc-bg);color:var(--tx-hi)}
.flash.warn{border-color:var(--warn-line);background:#2B2216;color:var(--warn-tx)}
.alert{padding:14px 18px;border-radius:12px;background:#2B2216;border:1px solid var(--warn-line);color:var(--warn-tx);display:flex;gap:12px;align-items:flex-start}
.alert.info{background:#0E2128;border-color:#1E4E5A;color:#C6F3FA}
.empty{padding:40px 20px;text-align:center;color:var(--mute);border:1px dashed var(--line3);border-radius:14px}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:6px}
.gallery .ph{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--field);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center}
.gallery .ph img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:13px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:var(--field);border:1px solid var(--line2);text-decoration:none}
.play{width:46px;height:46px;border-radius:50%;background:var(--acc);display:flex;align-items:center;justify-content:center}
video{width:100%;border-radius:12px;background:#000}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

/* Schritte */
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:14px}
.steps .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--acc-bg);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:600}
.prose{color:var(--tx2);line-height:1.65}
.prose h1,.prose h2,.prose h3{margin:16px 0 8px}
.prose a{color:var(--acc)}
.prose code{font-family:var(--mono);background:var(--field);padding:1px 5px;border-radius:5px}
.prose pre{background:var(--field);padding:12px;border-radius:10px;overflow:auto}
.prose img{border-radius:10px}

/* Systemauswahl */
dialog{border:1px solid var(--line2);border-radius:20px;background:var(--panel2);color:var(--tx);padding:0;max-width:min(1180px,96vw);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,6,8,.8)}
.dlg-h{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.dlg-b{padding:20px 24px;display:flex;flex-direction:column;gap:22px;max-height:70vh;overflow:auto}
.dlg-f{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);background:#101216}
.systiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.systile{position:relative}
.systile input{position:absolute;opacity:0;inset:0}
.systile span{box-sizing:border-box;height:88px;border-radius:12px;border:1px solid var(--line2);background:var(--field);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--mute2);font-size:12px;cursor:pointer;padding:8px;text-align:center}
.systile img{height:26px;max-width:85%;object-fit:contain}
.systile input:checked+span{border:2px solid var(--acc);background:var(--acc-bg);color:var(--acc);box-shadow:0 0 18px rgba(59,224,127,.25)}
.systile input:focus-visible+span{outline:2px solid var(--acc)}
.systile.has span{border-color:var(--acc-line)}
.syspick{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;text-align:left}

/* Werkbank-Modus */
.wb{background:#0A0C0F}
.wb .hdr{background:#111419}
.wb-step{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:10px;text-decoration:none;font-size:14px;color:var(--tx3)}
.wb-step .n{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#232733;color:var(--mute)}
.wb-step.done .n{background:var(--ok-bg);color:var(--ok)}
.wb-step.on{background:var(--acc-bg);color:var(--tx-hi);outline:1px solid var(--acc-line)}
.wb-step.on .n{background:var(--acc);color:var(--acc-ink)}
.wb-photo{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:repeating-linear-gradient(135deg,#171A20 0 14px,#14171C 14px 28px);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--mute2)}
.wb-photo img{width:100%;height:100%;object-fit:contain;background:#000}
.progress{height:6px;border-radius:3px;background:#232733;flex:1}
.progress i{display:block;height:6px;border-radius:3px;background:var(--acc)}

/* Login */
.login-bg{min-height:100vh;min-height:100dvh;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:clamp(8px,3.5vh,32px) 16px;background:#05080a url(/static/img/wallpaper.jpg) center/cover no-repeat}
.login-frame{width:100%;max-width:440px;padding:1px;background:#3BE07F;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.login-card{padding:clamp(14px,3.6vh,30px) 34px clamp(12px,2.8vh,24px);background:rgba(6,12,10,.93);display:flex;flex-direction:column;gap:clamp(8px,1.9vh,16px);font-family:var(--disp);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px))}
.login-card label{display:flex;flex-direction:column;gap:clamp(4px,1vh,8px);font-size:13px;font-weight:600;letter-spacing:.18em;color:#8FE8B4}
.login-in{position:relative;display:block}
.login-in svg{position:absolute;left:15px;top:50%;transform:translateY(-50%)}
.login-in input{width:100%;height:clamp(42px,6vh,50px);padding:0 14px 0 46px;border:1px solid #2F7A4E;background:rgba(4,14,9,.85);color:#E6FFF0;font-family:var(--disp);font-size:16px;letter-spacing:.04em;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.login-in input:focus{outline:0;border-color:#4CFF8F;box-shadow:inset 0 0 0 1px #4CFF8F,0 0 18px rgba(76,255,143,.35)}
.login-btn{height:clamp(44px,6.2vh,52px);border:0;background:#3BE07F;color:#04110A;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.2em;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.login-btn:hover{background:#4CFF8F}
.login-err{padding:10px 12px;border:1px solid #7a2f2f;background:rgba(60,15,15,.85);color:#ffb4ac;font-family:var(--font);font-size:14px}

/* Zuschneiden */
.crop-stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(135deg,#1C2A22 0 14px,#18241D 14px 28px);touch-action:none;cursor:grab;user-select:none}
.crop-stage canvas{width:100%;height:100%;display:block}
.crop-ring{position:absolute;left:13%;top:13%;width:74%;height:74%;border-radius:50%;box-shadow:0 0 0 999px rgba(6,8,10,.68);outline:2px solid var(--acc);pointer-events:none}
input[type=range]{accent-color:var(--acc);width:100%}

@media (max-width:760px){
  .wrap{padding:16px}.hdr{padding:10px 14px;gap:10px}.side,.aside{max-width:none}
  .topnav{order:5;width:100%;overflow-x:auto;flex-wrap:nowrap}
  h1{font-size:25px}
}
@media print{
  body{background:#fff;color:#000}.hdr,.foot,.noprint{display:none!important}
}

/* Foto-Markierungen & Vorher/Nachher */
.anno-wrap{position:relative;display:block;line-height:0}
.anno-wrap img{display:block;width:100%}
.anno-wrap canvas.anno{position:absolute;pointer-events:none}
.markbadge{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:5px;background:rgba(6,17,11,.85);color:var(--acc);font-size:11px;font-weight:700;line-height:1.4}
.ph{position:relative}
#anno-editor{position:relative;display:inline-block;max-width:100%;line-height:0;touch-action:none;user-select:none}
#anno-editor img{max-width:100%;max-height:72vh;display:block}
#anno-editor canvas{position:absolute;left:0;top:0;cursor:crosshair}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.toolbar .btn.on{border-color:var(--acc);background:var(--acc-bg);color:var(--acc)}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--line3);cursor:pointer}
.swatch.on{outline:3px solid #fff;outline-offset:2px}
.ba{position:relative;overflow:hidden;border-radius:12px;background:#000;line-height:0}
.ba img{width:100%;display:block}
.ba .ba-after{position:absolute;inset:0}
.ba .ba-after img{width:100%;height:100%;object-fit:cover}
.ba .ba-line{position:absolute;top:0;bottom:0;width:3px;margin-left:-1px;background:var(--acc);box-shadow:0 0 12px rgba(59,224,127,.7);pointer-events:none}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .lbl{position:absolute;top:10px;padding:3px 9px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;line-height:1.4}
.scanwrap{display:flex;gap:6px;align-items:stretch;width:100%}
.scanwrap input{flex:1;min-width:0}
.scanwrap .scanbtn{min-height:44px;padding:0 10px}
#scan-reader video{border-radius:12px}
/* Typenschilder */
.tp-photo{width:280px;max-width:100%;aspect-ratio:2/1;border-radius:12px;border:1px solid var(--line2);background:var(--field);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tp-photo img{width:100%;height:100%;object-fit:contain}
.tp-photo.big{width:100%;aspect-ratio:16/10}
.tp-stage{border-radius:12px;background:repeating-conic-gradient(#14171c 0 25%,#191c22 0 50%) 0 0/20px 20px;border:1px solid var(--line2);padding:22px;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10}
.tp-stage img{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.colorin{width:52px;height:44px;padding:2px;border-radius:10px;border:1px solid var(--line2);background:var(--field);cursor:pointer}
.swatch.sm{width:28px;height:28px}
.sep{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.tpe{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:16px;align-items:start}
.tpe-tools,.tpe-props{display:flex;flex-direction:column;gap:10px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.tbtn{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:var(--field);color:var(--tx);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.tbtn b{width:34px;font-family:var(--mono);color:var(--acc);font-size:13px}
.tbtn:hover,.tbtn:focus-visible{border-color:var(--acc-line);background:var(--acc-bg)}
.tpe-stagewrap{min-width:0;display:flex;flex-direction:column;gap:8px}
.tpe-stage{overflow:auto;border-radius:14px;border:1px solid var(--line2);background:repeating-conic-gradient(#14171c 0 25%,#191c22 0 50%) 0 0/20px 20px;padding:12px;min-height:360px;display:flex;align-items:center;justify-content:center}
#ed-svg{display:block;flex:none;touch-action:none;user-select:none}
.tpe-el{cursor:move}
.tpe-handle{fill:#3BE07F;stroke:#06110B;stroke-width:.15;cursor:nwse-resize}
.tpe-handle[data-h=photo]{fill:#F2C14E}
.tpe-grid line{stroke:rgba(0,0,0,.08);stroke-width:.04}.tpe-grid line.mid{stroke:rgba(0,0,0,.16)}.tpe-grid line.maj{stroke:rgba(0,90,140,.35);stroke-width:.07}
.tpe-dim text{fill:#9AA3B2;font:1.8px var(--mono)}
.tpe-photo{pointer-events:none}.tpe-photo.on{pointer-events:auto;cursor:move}
.tpe-help{text-align:center;margin:0}
.tpe-g2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
.tpe-props .fld{gap:4px}.tpe-props .f{min-height:38px}
.tpe-keys{gap:4px}.chip.sm{min-height:28px;padding:0 8px;font-family:var(--mono);font-size:12px}
.tpe-layers{display:flex;flex-direction:column;gap:6px}.tpe-layers .filerow{background:var(--field);border:1px solid var(--line2);color:var(--tx);font:inherit;font-size:13px;cursor:pointer;text-align:left}
@media (max-width:1100px){.tpe{grid-template-columns:1fr}.tpe-stagewrap{order:-1}.tpe-tools,.tpe-props{position:static;max-height:none}.tpe-tools{flex-direction:row;flex-wrap:wrap}.tpe-tools .tbtn{flex:1 1 140px}}
.auto-drop{display:flex;flex-direction:column;gap:12px;padding:16px;border:2px dashed var(--line3);border-radius:14px}
.auto-drop.over{border-color:var(--acc);background:var(--acc-bg)}
.auto-drop .tp-photo img{max-height:420px}
.busy{position:fixed;inset:0;background:rgba(8,10,12,.82);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.busy[hidden]{display:none}
.spinner{width:46px;height:46px;border-radius:50%;border:4px solid var(--line2);border-top-color:var(--acc);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.tpe-stage.over{outline:3px dashed var(--acc);outline-offset:-6px}
[hidden]{display:none!important}
.tp-stage img{width:100%;height:100%;object-fit:contain}

.login-logo{width:auto;height:clamp(80px,24vh,220px);max-width:230px;object-fit:contain}
.login-tag{font-size:13px;letter-spacing:.3em;color:#67E8F9}
@media (max-height:620px){.login-tag{display:none}}
@media (max-width:420px){.login-card{padding-left:20px;padding-right:20px}.login-tag{font-size:11px;letter-spacing:.2em}}
@media (max-height:460px){.login-logo{height:56px}.login-div{display:none}}