/* 480inc – console system look (boot fog, glass panels, thin glowing sans, 480i scanlines)
   + sci-fi HUD layer (chamfered corners, teal hairlines, tick marks, segmented bars). Self-hosted only. */
@import url("fonts/fonts.css");
:root{
  --bg:#02040a; --bg-2:#060b1a; --panel:rgba(20,40,90,.22); --line:rgba(120,170,255,.28);
  --blue:#3f74ff; --cyan:#8fd3ff; --text:#e7eeff; --dim:#8b97b6; --ok:#7dffb2; --lock:#58627d;
  --hud:#5ff0dc; --hud-2:rgba(95,240,220,.55); --hud-3:rgba(95,240,220,.22); --amber:#ffc65c;
  --sans:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"VT323",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --cut:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(1200px 700px at 70% -10%,rgba(63,116,255,.18),transparent 60%),
                   radial-gradient(900px 600px at 0% 100%,rgba(95,240,220,.07),transparent 60%)}
/* 480i interlace over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
a{color:var(--cyan)}
img,video{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--hud);outline-offset:2px}
.caps{text-transform:uppercase;letter-spacing:.22em;font-size:13px;color:var(--dim)}
.mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.glow{text-shadow:0 0 18px rgba(143,211,255,.55),0 0 2px rgba(255,255,255,.6)}
.panel{background:linear-gradient(180deg,rgba(40,70,150,.20),rgba(10,20,50,.35));border:1px solid var(--line);
  border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(6px)}

/* HUD: chamfered panel (cut top-left + bottom-right) with teal corner strokes and a holo tint */
.chamf{position:relative;border-radius:0;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(160deg,rgba(95,240,220,.07),transparent 38%),linear-gradient(180deg,rgba(40,70,150,.20),rgba(10,20,50,.38))}
.chamf::before,.chamf::after{content:"";position:absolute;width:var(--cut);height:var(--cut);pointer-events:none;z-index:3}
.chamf::before{left:0;top:0;background:linear-gradient(to bottom right,transparent 50%,var(--hud) 50%,var(--hud) calc(50% + 1.5px),transparent calc(50% + 1.5px))}
.chamf::after{right:0;bottom:0;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),var(--hud) calc(50% - 1.5px),var(--hud) 50%,transparent 50%)}
/* HUD hairline with tick marks */
.ticks{height:9px;border-top:1px solid var(--hud-3);
  background:repeating-linear-gradient(90deg,var(--hud-2) 0 1px,transparent 1px 12px) top left/100% 4px no-repeat,
             repeating-linear-gradient(90deg,var(--hud) 0 1px,transparent 1px 96px) top left/100% 9px no-repeat}
/* segmented bar */
.seg{display:block;height:8px;border:1px solid var(--hud-2);padding:1px;position:relative;overflow:hidden}
.seg i{display:block;height:100%;width:var(--p,100%);
  background:repeating-linear-gradient(90deg,var(--hud) 0 7px,transparent 7px 10px)}

/* "Vertrag widerrufen" – always visible, highlighted */
.revoke{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:#04121a;background:var(--amber);padding:5px 10px;border:1px solid #ffe2a6;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.revoke:hover,.revoke:focus-visible{color:#04121a;background:#ffe2a6}
.revoke:focus-visible{outline:2px solid #04121a;outline-offset:-4px}

/* legal pages */
.lhd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
main.legal{max-width:780px;margin:0 auto;padding:40px 20px 96px}
main.legal .top{font-size:13px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--dim)}
main.legal .top:hover{color:var(--text)}
main.legal .lhd + .ticks{margin-top:14px}
main.legal h1{font-weight:200;font-size:clamp(30px,5vw,44px);letter-spacing:.06em;margin:28px 0 18px;color:var(--text);overflow-wrap:break-word;hyphens:auto;
  text-shadow:0 0 18px rgba(143,211,255,.45)}
main.legal h2{font-weight:400;font-size:18px;letter-spacing:.04em;margin:28px 0 6px;color:var(--cyan)}
main.legal p{margin-bottom:10px}
main.legal small,main.legal .dim{color:var(--dim)}
main.legal .box{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:16px 18px;margin:16px 0}
main.legal .todo{background:#5a1f1a;padding:2px 6px}
main.legal .courtesy{border-left:2px solid var(--hud-2);padding:4px 0 4px 14px;margin:18px 0;font-size:15px;color:var(--dim)}
main.legal .courtesy p{margin-bottom:6px}
main.legal .stand{margin-top:40px;font-size:14px;color:var(--dim)}
main.legal .btn{display:inline-block;font:inherit;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;cursor:pointer;
  padding:10px 16px;border:1px solid rgba(143,211,255,.8);background:linear-gradient(180deg,#3f74ff,#1d3fb0)}

/* online withdrawal form (widerrufen.html + no-JS answer pages from /api/widerruf) */
.wf{margin:22px 0 28px}
.wf label{display:block;font-weight:400;margin:0 0 16px}
.wf .hint{display:block;font-size:14px;color:var(--dim)}
.wf input[type=text],.wf input[type=email]{display:block;width:100%;margin-top:6px;min-height:48px;padding:10px 12px;font:inherit;font-size:17px;
  color:var(--text);background:rgba(2,8,18,.7);border:1px solid var(--line);border-radius:0}
.wf input:focus{border-color:var(--hud);outline:none;box-shadow:0 0 0 1px var(--hud)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.revoke-btn{min-height:52px;padding:0 24px;font:inherit;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  color:#04121a;background:var(--amber);border:1px solid #ffe2a6;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.revoke-btn:hover{background:#ffe2a6}
.revoke-btn:focus-visible{outline:2px solid #04121a;outline-offset:-5px}
.revoke-btn:disabled{opacity:.6;cursor:wait}
.wf-err{color:#ff9d8a;min-height:1.5em;margin-top:10px}
.wf-ok{border:1px solid var(--hud-2);background:var(--panel);padding:16px 18px;margin:16px 0}
.wf-ok dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.wf-ok dt{color:var(--dim)}
.wf-ok dd{overflow-wrap:anywhere}
@media print{.lhd,.ticks,.courtesy,.revoke-btn,.wf{display:none!important}body{background:#fff;color:#000}body::after{display:none}a{color:#000}}