/* Eingangsseite (Anmelden, Testphase, Code) im App-Look */
:root{--bg:#EAF6FD;--surface:#FFFFFF;--ink:#1F3346;--muted:#5E6A75;--line:#D3E9F6;--accent:#0A7FB8;--soft:#E1F4FD;--sky:#0FABF3;
  --bad:#B4323A;--bad-bg:#FDE3E5;--good:#17845A;--good-bg:#DDF6EA;
  --display:"Fredoka",ui-rounded,"SF Pro Rounded","Nunito","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mark:"SQ Mark",-apple-system,system-ui,"SF Pro Rounded","SF Pro Text","Segoe UI",Roboto,"Nunito",sans-serif;
  color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gate{max-width:440px;margin:0 auto;padding-block:32px 40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:6px}
.wm{display:flex;font-family:var(--mark);font-weight:800;font-size:34px;letter-spacing:-.01em;line-height:1}
.wm span{display:inline-block}
.wm span:nth-child(2n+1){transform:translateY(-1px) rotate(-4deg)}
.wm span:nth-child(2n){transform:translateY(2px) rotate(4deg)}
.wm span:nth-child(1){color:#D33A2C}.wm span:nth-child(2){color:#D74431}.wm span:nth-child(3){color:#DA4D36}.wm span:nth-child(4){color:#DE573B}.wm span:nth-child(5){color:#E16040}.wm span:nth-child(6){color:#E56A45}.wm span:nth-child(7){color:#E9744A}.wm span:nth-child(8){color:#EC7D4F}.wm span:nth-child(9){color:#F08754}.wm span:nth-child(10){color:#F39059}.wm span:nth-child(11){color:#F79A5E}
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka.woff") format("woff");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito.woff") format("woff");font-weight:200 1000;font-display:swap}
@font-face{font-family:"SQ Mark";src:url("../fonts/sq-mark.woff") format("woff");font-weight:800;font-display:block}
.claim{margin:0;color:var(--muted);font-weight:700;text-align:center}
.card{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;background:var(--soft);border-radius:14px;padding:4px}
.tab{text-align:center;padding:10px 6px;border-radius:10px;font-weight:800;font-size:14px;color:var(--muted);text-decoration:none}
.tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #1A2B4522}
.lead{margin:0}
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-weight:800;font-size:14px;margin-top:6px}
.form input{min-height:50px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;padding:0 14px;width:100%}
.form input:focus-visible,.btn:focus-visible,.tab:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.04em}
.btn{margin-top:12px;min-height:54px;border:0;border-radius:18px;background:var(--accent);color:#fff;font:inherit;font-weight:800;font-size:19px;cursor:pointer;box-shadow:0 4px 0 #076A9A}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #076A9A}
.msg{margin:0;border-radius:14px;padding:12px 14px;font-weight:700}
.msg.err{background:var(--bad-bg);color:var(--bad)}
.msg.ok{background:var(--good-bg);color:var(--good)}
.small{margin:0;font-size:14px;text-align:center}
.small a,.foot a{color:var(--accent);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot{display:flex;gap:16px;font-size:14px}

@media (min-width:560px){.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Rechtliches */
.agree{color:var(--muted);margin-top:8px}
.foot{flex-wrap:wrap;justify-content:center}
.gate.legal{max-width:760px}
a.brand{text-decoration:none}
.legalnav{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;background:var(--soft);border-radius:14px;padding:4px}
.legalnav a,.legalnav strong{padding:8px 14px;border-radius:10px;font-weight:800;font-size:14px;color:var(--muted);text-decoration:none}
.legalnav strong{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #1A2B4522}
.doc{gap:0;padding:24px 22px 28px;overflow-wrap:anywhere}
.doc h1{font-family:var(--display);font-size:28px;line-height:1.15;margin:0 0 14px}
.doc h2{font-family:var(--display);font-size:20px;margin:26px 0 8px;color:var(--accent)}
.doc h3{font-size:16px;margin:16px 0 6px}
.doc p{margin:0 0 10px}
.doc ul{margin:0 0 10px;padding-left:22px}
.doc li{margin:0 0 6px}
.doc a{color:var(--accent);font-weight:700}
.doc .lead{background:var(--soft);border-radius:14px;padding:12px 14px;font-weight:700;margin-bottom:6px}
.doc .stand{margin-top:22px;color:var(--muted);font-size:14px}
@media (min-width:560px){.doc{padding:32px 36px 36px}}
.doc .parties,.doc .sign{display:grid;grid-template-columns:1fr;gap:18px;margin:6px 0 10px}
.doc .fill{border-bottom:1.5px solid var(--line);padding-top:18px;margin:0 0 4px;color:var(--muted);font-size:13px}
.doc .fill.tall{padding-top:44px}
.doc .sign{margin-top:28px}
.doc .tbl{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:15px}
.doc .tbl th,.doc .tbl td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:8px 8px 8px 0}
.doc .btn.print{margin-top:0;padding:0 22px;min-height:46px;font-size:16px}
@media (min-width:560px){.doc .parties,.doc .sign{grid-template-columns:1fr 1fr;gap:32px}}
@media print{
  body{background:#fff;padding:0;font-size:11pt}
  .gate.legal{max-width:none;padding:0}
  .legalnav,.gate.legal>.small,.noprint,.doc .lead{display:none}
  .card.doc{border:0;padding:0;border-radius:0}
  .doc h2{color:#000;break-after:avoid}
  .doc .pb{break-before:page}
  .doc .parties,.doc .sign{grid-template-columns:1fr 1fr;gap:32px;break-inside:avoid}
  .doc a{color:#000;font-weight:400}
  .doc .fill{border-color:#888;color:#555}
}
/* Rechtliches wie typequest: Kopf mit Wortmarke und Claim, Zurück-Link, Fusszeile */
.legalhead{display:grid;justify-items:center;gap:4px;text-align:center}
.legalhead .tagline{margin:0;color:var(--muted);font-weight:700;font-size:15px}
.backlink{margin:0;align-self:flex-start}
.backlink a{font-weight:800;color:var(--accent);text-decoration:none}
.backlink a:hover{text-decoration:underline}
.doc .sub{color:var(--muted);font-size:14px;margin:-6px 0 18px}
.doc table{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:15px}
.doc table th,.doc table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:8px 10px 8px 0}
.doc table th{font-weight:800}
.doc .signs{margin-top:28px;border-top:1px solid var(--line);padding-top:14px}
.legalfoot{text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
.legalfoot p{margin:0 0 8px}
.legalfoot a{color:var(--muted);font-weight:700}
.legalfoot .up{margin-left:6px;text-decoration:none}
@media (max-width:560px){.doc table{font-size:14px}.doc table th,.doc table td{padding-right:6px}}
@media print{.legalhead .tagline,.backlink,.legalfoot{display:none}}
.doc table td,.doc table th{overflow-wrap:normal;word-break:normal;hyphens:auto}
@media (max-width:560px){
  .doc table thead{display:none}
  .doc table,.doc table tbody,.doc table tr,.doc table td{display:block;width:auto}
  .doc table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .doc table td{border:0;padding:2px 0}
  .doc table td:first-child{font-weight:800}
  .doc table td:last-child{color:var(--muted)}
}
.tab{padding:10px 4px;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;line-height:1.3}