:root{
    --bg:#EDF1EE;
    --surface:#FFFFFF;
    --surface-2:#F5F8F6;
    --ink:#17201C;
    --muted:#5B6862;
    --line:#D9E0DC;
    --accent:#0E5E50;
    --accent-2:#1B8A6B;
    --accent-soft:#DCEBE7;
    --accent-ink:#FFFFFF;
    --brass:#A5762B;
    --brass-2:#C99A45;
    --brass-soft:#F3E8D3;
    --good:#1D7A3E;
    --good-bg:#E2F2E6;
    --bad:#B3442E;
    --bad-bg:#F9E6E0;
    --glass:rgba(255,255,255,.78);
    --shadow:0 1px 2px rgba(20,35,28,.05),0 10px 30px rgba(20,35,28,.08);
    --shadow-lift:0 2px 4px rgba(20,35,28,.06),0 18px 44px rgba(14,94,80,.16);
    --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
    --gradbrass:linear-gradient(135deg,var(--brass),var(--brass-2));
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#101613; --surface:#1A211E; --surface-2:#1F2823;
      --ink:#E9EEEB; --muted:#9DA9A2; --line:#2D3833;
      --accent:#48B097; --accent-2:#63C9AE; --accent-soft:#1E332E; --accent-ink:#0B1512;
      --brass:#D2A253; --brass-2:#E4BD75; --brass-soft:#33291A;
      --good:#5BC77E; --good-bg:#1C3324; --bad:#E5836C; --bad-bg:#3A241D;
      --glass:rgba(20,27,24,.72);
      --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.38);
      --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#101613; --surface:#1A211E; --surface-2:#1F2823;
    --ink:#E9EEEB; --muted:#9DA9A2; --line:#2D3833;
    --accent:#48B097; --accent-2:#63C9AE; --accent-soft:#1E332E; --accent-ink:#0B1512;
    --brass:#D2A253; --brass-2:#E4BD75; --brass-soft:#33291A;
    --good:#5BC77E; --good-bg:#1C3324; --bad:#E5836C; --bad-bg:#3A241D;
    --glass:rgba(20,27,24,.72);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.38);
    --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
    color-scheme:dark;
  }

  /* ---------- Stil: Maritim (per Knopf umschaltbar) ---------- */
  body[data-skin="maritim"]{
    --bg:#EAF1F4; --surface:#FFFFFF; --surface-2:#F2F7F9;
    --ink:#152430; --muted:#5A6B77; --line:#D3DFE5;
    --accent:#0F5E8C; --accent-2:#1789BD; --accent-soft:#DCEBF3; --accent-ink:#FFFFFF;
    --brass:#A8823B; --brass-2:#C9A254; --brass-soft:#F2EAD6;
    --glass:rgba(255,255,255,.78);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body[data-skin="maritim"]{
      --bg:#0C151C; --surface:#152029; --surface-2:#1A2732;
      --ink:#E6EDF1; --muted:#93A5B1; --line:#283944;
      --accent:#4BA3D3; --accent-2:#6FBFE4; --accent-soft:#173042; --accent-ink:#081018;
      --brass:#D2A253; --brass-2:#E4BD75; --brass-soft:#33291A;
      --glass:rgba(15,23,30,.72);
    }
  }
  :root[data-theme="dark"] body[data-skin="maritim"]{
    --bg:#0C151C; --surface:#152029; --surface-2:#1A2732;
    --ink:#E6EDF1; --muted:#93A5B1; --line:#283944;
    --accent:#4BA3D3; --accent-2:#6FBFE4; --accent-soft:#173042; --accent-ink:#081018;
    --brass:#D2A253; --brass-2:#E4BD75; --brass-soft:#33291A;
    --glass:rgba(15,23,30,.72);
  }

  /* ---------- Stil: Retro (Schwarz/Weiß/Grau, Windows-Klassik) ---------- */
  body[data-skin="retro"]{
    --bg:#C3C3C3; --surface:#FFFFFF; --surface-2:#E4E4E4;
    --ink:#000000; --muted:#3F3F3F; --line:#808080;
    --accent:#000000; --accent-2:#3C3C3C; --accent-soft:#D9D9D9; --accent-ink:#FFFFFF;
    --brass:#4A4A4A; --brass-2:#6E6E6E; --brass-soft:#DFDFDF;
    --good:#006E00; --good-bg:#DCEEDC; --bad:#A40000; --bad-bg:#F2DCDC;
    --glass:#C3C3C3;
    --shadow:2px 2px 0 rgba(0,0,0,.45);
    --shadow-lift:3px 3px 0 rgba(0,0,0,.6);
    font-family:Tahoma, "Segoe UI", Verdana, sans-serif;
    color-scheme:light;
  }
  body[data-skin="retro"] *{ border-radius:0 !important; }
  body[data-skin="retro"] h1, body[data-skin="retro"] h2, body[data-skin="retro"] h3,
  body[data-skin="retro"] .brand, body[data-skin="retro"] .scorebig,
  body[data-skin="retro"] .certtitle, body[data-skin="retro"] .certname,
  body[data-skin="retro"] .room .roomtitle, body[data-skin="retro"] .flip .front,
  body[data-skin="retro"] .ring .pct, body[data-skin="retro"] .bigfinish h2{
    font-family:Tahoma, "Segoe UI", Verdana, sans-serif; letter-spacing:0;
  }
  body[data-skin="retro"] .bgdecor i{ display:none; }
  body[data-skin="retro"] .topbar{ backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:2px solid; border-color:#FFFFFF #FFFFFF #6E6E6E #FFFFFF; }
  body[data-skin="retro"] .btn{
    background:#D8D8D8; color:#000;
    border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF;
    box-shadow:1px 1px 0 #000; transform:none;
  }
  body[data-skin="retro"] .btn:hover{ transform:none; filter:none; background:#E3E3E3; box-shadow:1px 1px 0 #000; }
  body[data-skin="retro"] .btn:active{ border-color:#5B5B5B #FFFFFF #FFFFFF #5B5B5B; box-shadow:none; transform:translate(1px,1px); }
  body[data-skin="retro"] .btn:disabled{ color:#7A7A7A; text-shadow:1px 1px 0 #fff; }
  body[data-skin="retro"] .btn.brass{ background:#D8D8D8; box-shadow:1px 1px 0 #000; }
  body[data-skin="retro"] .hero, body[data-skin="retro"] .namecard, body[data-skin="retro"] .stepcard,
  body[data-skin="retro"] .room, body[data-skin="retro"] .cert, body[data-skin="retro"] .pms,
  body[data-skin="retro"] .fakewin, body[data-skin="retro"] .browserframe, body[data-skin="retro"] .mocklogin{
    border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF; background:#EFEFEF;
  }
  body[data-skin="retro"] .hero::before, body[data-skin="retro"] .stepcard::before, body[data-skin="retro"] .namecard::before{
    height:26px; background:linear-gradient(90deg,#0A0A0A,#5E5E5E);
  }
  body[data-skin="retro"] .hero, body[data-skin="retro"] .stepcard, body[data-skin="retro"] .namecard{ padding-top:44px; }
  body[data-skin="retro"] .room:not(.locked):hover{ transform:none; border-color:#000 #5B5B5B #5B5B5B #000; }
  body[data-skin="retro"] .opts button, body[data-skin="retro"] .reslist button,
  body[data-skin="retro"] .pathpick button, body[data-skin="retro"] .flip,
  body[data-skin="retro"] .pmsnav button, body[data-skin="retro"] .ordergame .pool button,
  body[data-skin="retro"] .checklist label, body[data-skin="retro"] .profitem .pmain,
  body[data-skin="retro"] .clicktarget, body[data-skin="retro"] .cnav, body[data-skin="retro"] .profitem .pdel,
  body[data-skin="retro"] .taskbar button, body[data-skin="retro"] .fakewin .bar button{
    background:#D8D8D8; border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF; box-shadow:none;
  }
  body[data-skin="retro"] .opts button:hover:not(:disabled), body[data-skin="retro"] .reslist button:hover:not(:disabled){ transform:none; background:#E6E6E6; box-shadow:none; }
  body[data-skin="retro"] .opts button.right{ border-color:var(--good); }
  body[data-skin="retro"] .opts button.wrong{ border-color:var(--bad); }
  body[data-skin="retro"] input, body[data-skin="retro"] select, body[data-skin="retro"] .scrollbox,
  body[data-skin="retro"] .addressbar, body[data-skin="retro"] .rightzone{
    background:#FFFFFF; border:2px solid; border-color:#5B5B5B #FFFFFF #FFFFFF #5B5B5B; box-shadow:none;
  }
  body[data-skin="retro"] .plate{ background:#000; color:#fff; box-shadow:none; }
  body[data-skin="retro"] .keycount{ border:2px solid; border-color:#5B5B5B #FFFFFF #FFFFFF #5B5B5B; background:#D8D8D8; color:#000; }
  body[data-skin="retro"] .tbgroup{ background:#D8D8D8; border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF; }
  body[data-skin="retro"] .tbgroup .btn{ border:none; box-shadow:none; background:transparent; }
  body[data-skin="retro"] .tbgroup .btn:hover{ background:#E6E6E6; }
  body[data-skin="retro"] .tbgroup .btn:active{ transform:none; background:#BFBFBF; }
  body[data-skin="retro"] .tbstats .keycount{ border:none; background:transparent; }
  body[data-skin="retro"] .tbstats .keycount + .keycount{ border-left:1px solid #5B5B5B; }
  body[data-skin="retro"] .toast{ background:#000; color:#fff; border:2px solid #fff; outline:2px solid #000; }
  body[data-skin="retro"] .steptag{ border:1px solid #5B5B5B; background:#D8D8D8; color:#000; }
  body[data-skin="retro"] .recbadge{ background:#000; color:#fff; }
  body[data-skin="retro"] .brand .bell{ background:#000; box-shadow:none; }
  body[data-skin="retro"] .pbar, body[data-skin="retro"] .minibar{ background:#fff; border-color:#5B5B5B; }
  body[data-skin="retro"] .pbar>div, body[data-skin="retro"] .minibar b{
    background:repeating-linear-gradient(90deg,#000 0 8px,#3C3C3C 8px 10px);
  }
  body[data-skin="retro"] .hint{ background:#FFFFE1; border:1px solid #8C8C5A; color:#000; }
  body[data-skin="retro"] .explain{ background:#EFEFEF; border-left:4px solid var(--good); }
  body[data-skin="retro"] .sentence{ background:#fff; border:1px dashed #5B5B5B; }
  body[data-skin="retro"] .door{ background:#D8D8D8; border-color:#5B5B5B; }
  body[data-skin="retro"] .cert::before{ border-color:#5B5B5B; }

  /* Retro-Feinschliff: jede Karte ein kleines Fenster */
  body[data-skin="retro"] .hero::before, body[data-skin="retro"] .stepcard::before, body[data-skin="retro"] .namecard::before{
    content:"–  ▢  ✕"; display:flex; align-items:center; justify-content:flex-end;
    padding:0 10px; color:#fff; font-size:11px; letter-spacing:2px;
    font-family:Tahoma, "Segoe UI", Verdana, sans-serif;
  }
  body[data-skin="retro"] .room{ padding-top:34px; }
  body[data-skin="retro"] .room .plate{
    position:absolute; inset:0 0 auto 0; height:22px;
    display:flex; align-items:center; gap:6px; padding:0 8px;
    background:linear-gradient(90deg,#0A0A0A,#5E5E5E); color:#fff;
    font-size:11px; letter-spacing:.06em; box-shadow:none; border:none;
  }
  body[data-skin="retro"] .room .plate::after{
    content:"–  ▢  ✕"; margin-left:auto; font-size:10px; letter-spacing:1px;
  }
  body[data-skin="retro"] .room.locked .plate{
    background:linear-gradient(90deg,#6E6E6E,#9C9C9C); color:#EDEDED; border:none;
  }
  body[data-skin="retro"] .room .key{ top:28px; right:8px; font-size:18px; }
  body[data-skin="retro"] .room.recommended{ border-color:#000 #3A3A3A #3A3A3A #000; }
  body[data-skin="retro"] .pmsbar{
    background:linear-gradient(90deg,#0A0A0A,#5E5E5E); color:#fff; border-bottom:2px solid #5B5B5B;
  }
  body[data-skin="retro"] .pmsbar .mode{ color:#CFCFCF; }
  body[data-skin="retro"] .pathpick button.sel{ background:#000; color:#fff; }
  body[data-skin="retro"] .pathpick button.sel span{ color:#CCCCCC; }
  body[data-skin="retro"] .flip.flipped{ background:#000; color:#fff; border-color:#5B5B5B #FFFFFF #FFFFFF #5B5B5B; }
  body[data-skin="retro"] .checklist label.did{ background:#000; color:#fff; border-color:#5B5B5B #FFFFFF #FFFFFF #5B5B5B; }
  body[data-skin="retro"]::-webkit-scrollbar{ width:16px; height:16px; }
  body[data-skin="retro"]::-webkit-scrollbar-track{ background:#EFEFEF; }
  body[data-skin="retro"]::-webkit-scrollbar-thumb{
    background:#D8D8D8; border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF;
  }

  *{ box-sizing:border-box; }
  html{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); scroll-behavior:smooth; }
  body{
    background:var(--bg); color:var(--ink); margin:0;
    font-family:"Source Sans 3",system-ui,sans-serif;
    font-size:17px; line-height:1.55;
    min-height:100vh;
    -webkit-tap-highlight-color:transparent;
  }
  button:focus:not(:focus-visible){ outline:none; }
  [hidden]{ display:none !important; }
  h1,h2,h3{ font-family:"Bricolage Grotesque","Source Sans 3",sans-serif; line-height:1.15; text-wrap:balance; margin:0; }
  p{ margin:0; }
  a{ color:var(--accent); }
  img{ max-width:100%; }
  button{ font:inherit; cursor:pointer; }
  input,select{ font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:11px 15px; max-width:100%; transition:border-color .15s, box-shadow .15s; }
  input:focus,select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
  input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; }
  kbd{
    font-family:"IBM Plex Mono",monospace; font-size:.85em; font-weight:600;
    background:var(--surface); border:1px solid var(--line); border-bottom-width:3px;
    border-radius:7px; padding:1px 8px; white-space:nowrap;
  }
  .mono{ font-family:"IBM Plex Mono",monospace; }

  /* ---------- Hintergrund-Deko ---------- */
  .bgdecor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
  .bgdecor i{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
  .bgdecor i:nth-child(1){ width:520px; height:520px; background:var(--accent-soft); top:-180px; right:-140px; animation:drift 26s ease-in-out infinite alternate; }
  .bgdecor i:nth-child(2){ width:420px; height:420px; background:var(--brass-soft); bottom:-160px; left:-140px; animation:drift 32s ease-in-out infinite alternate-reverse; }
  @keyframes drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,40px) scale(1.12); } }

  /* ---------- Einblend-Animationen ---------- */
  @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
  @keyframes pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.28); } 100%{ transform:scale(1); } }
  @keyframes glowpulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 50%{ box-shadow:0 0 0 9px transparent; } }
  .anim{ animation:rise .45s cubic-bezier(.2,.8,.25,1) both; }

  /* ---------- Topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap;
    padding:11px 18px;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.01em; }
  .brand .bell{
    width:36px; height:36px; border-radius:12px; background:var(--grad); color:var(--accent-ink);
    display:grid; place-items:center; font-size:18px; flex:none;
    box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .topbar .spacer{ flex:1; }
  .keycount{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--brass-soft); color:var(--brass); border-radius:999px;
    padding:5px 16px; font-weight:700; font-size:15px; white-space:nowrap;
    border:1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  }
  .keycount.pop{ animation:pop .5s ease; }
  .keycount.xp{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
  .tbgroup{
    display:inline-flex; align-items:center; gap:2px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:3px;
  }
  .tbgroup .btn.ghost{ border:none; background:transparent; box-shadow:none; border-radius:11px; padding:7px 13px; }
  .tbgroup .btn.ghost:hover{ background:var(--surface); border:none; transform:none; }
  .tbstats{ gap:0; padding:3px 2px; }
  .tbstats .keycount{ border:none; background:transparent; border-radius:0; padding:4px 13px; }
  .tbstats .keycount.xp{ background:transparent; }
  .tbstats .keycount + .keycount{ border-left:1px solid var(--line); }
  .profitem{ display:flex; gap:8px; align-items:stretch; }
  .profitem .pmain{
    flex:1; text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:14px;
    padding:13px 16px; transition:transform .14s, border-color .14s, box-shadow .14s;
  }
  .profitem .pmain:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
  .profitem .pdel{
    border:1.5px solid var(--line); background:var(--surface); border-radius:12px;
    min-width:44px; font-size:15px; color:var(--muted); padding:0 10px;
  }
  .profitem .pdel:hover{ border-color:var(--bad); color:var(--bad); }
  .globalbar{ position:absolute; left:0; bottom:-1px; height:3px; background:var(--grad); border-radius:0 99px 99px 0; transition:width .7s cubic-bezier(.2,.8,.25,1); }

  .wrap{ max-width:760px; margin:0 auto; padding:28px 18px 70px; position:relative; z-index:1; }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    background:var(--grad); color:var(--accent-ink); border:none;
    border-radius:14px; padding:13px 28px; font-weight:700; font-size:17px;
    box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
    transition:transform .15s, box-shadow .15s, filter .15s;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent); filter:brightness(1.05); }
  .btn:active{ transform:scale(.97); }
  .btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; transform:none; filter:none; }
  .btn.ghost{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
  .btn.ghost:hover{ border-color:var(--accent); box-shadow:none; }
  .btn.small{ padding:8px 18px; font-size:15px; border-radius:11px; }
  .btn.brass{ background:var(--gradbrass); box-shadow:0 6px 18px color-mix(in srgb, var(--brass) 32%, transparent); }

  /* ---------- Lobby: Hero ---------- */
  .hero{
    display:flex; align-items:center; gap:26px; flex-wrap:wrap;
    background:var(--surface); border:1.5px solid var(--line); border-radius:24px;
    box-shadow:var(--shadow); padding:28px; margin-bottom:10px; position:relative; overflow:hidden;
  }
  .hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad); }
  .hero .heroinfo{ flex:1; min-width:240px; }
  .hero h1{ font-size:clamp(26px,5vw,34px); margin-bottom:8px; }
  .hero h1 .grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p{ color:var(--muted); max-width:52ch; }
  .hero .cta{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
  .ring{ position:relative; width:132px; height:132px; flex:none; margin:0 auto; }
  .ring svg{ transform:rotate(-90deg); }
  .ring .track{ stroke:var(--surface-2); }
  .ring .bar{ stroke:url(#ringgrad); stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.25,1); }
  .ring .pct{
    position:absolute; inset:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; border-radius:50%; overflow:hidden;
    font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:23px; line-height:1.1;
  }
  .ring .pct small{ font-family:"Source Sans 3",sans-serif; font-weight:600; font-size:10px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-top:1px; }

  /* ---------- Lobby: Etagen & Zimmer ---------- */
  .floor{ margin-top:30px; }
  .floorlabel{
    display:flex; align-items:center; gap:12px;
    font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
  }
  .floorlabel .fline{ flex:1; height:1px; background:var(--line); }
  .floorlabel .lift{
    width:26px; height:26px; border-radius:8px; background:var(--surface); border:1.5px solid var(--line);
    display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--brass); flex:none;
  }
  .floorwrap{ position:relative; }
  .roomgrid{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:6px 2px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .roomgrid::-webkit-scrollbar{ display:none; }
  .floorwrap::before, .floorwrap::after{
    content:""; position:absolute; top:0; bottom:14px; width:30px; z-index:4; pointer-events:none;
    opacity:0; transition:opacity .25s;
  }
  .floorwrap::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
  .floorwrap::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
  .floorwrap.can-left::before{ opacity:1; }
  .floorwrap.can-right::after{ opacity:1; }
  .cnav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line);
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lift);
    font-size:20px; line-height:1; display:grid; place-items:center; padding:0 0 3px;
    transition:opacity .25s, transform .15s, border-color .15s;
  }
  .cnav:hover{ border-color:var(--accent); transform:translateY(-50%) scale(1.1); }
  .cnav.prev{ left:-10px; }
  .cnav.next{ right:-10px; }
  .cnav[disabled]{ opacity:0; pointer-events:none; }
  .room{
    flex:0 0 236px; scroll-snap-align:start;
    text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:18px;
    padding:18px 16px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:7px; position:relative;
    transition:transform .18s, box-shadow .18s, border-color .18s;
    animation:rise .5s cubic-bezier(.2,.8,.25,1) both;
    overflow:hidden;
  }
  .room:not(.locked):hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--accent); }
  .room:not(.locked):active{ transform:translateY(-1px) scale(.99); }
  .room.locked{ opacity:.55; filter:saturate(.35); cursor:not-allowed; box-shadow:none; }
  .room.locked:focus, .room.locked:active{ outline:none; border-color:var(--line); transform:none; }
  .room.locked .plate{ background:var(--surface-2); color:var(--muted); box-shadow:none; border:1px solid var(--line); }
  .room .plate{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    background:var(--gradbrass); color:#fff; border-radius:7px; padding:2px 10px;
    font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; letter-spacing:.08em;
    box-shadow:0 2px 6px color-mix(in srgb, var(--brass) 40%, transparent);
  }
  .room .roomtitle{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18.5px; line-height:1.25; }
  .room .roomstate{ font-size:14px; color:var(--muted); }
  .room .key{ position:absolute; top:14px; right:14px; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); animation:pop .6s ease both; }
  .room .minibar{ height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; margin-top:5px; }
  .room .minibar b{ display:block; height:100%; background:var(--grad); border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.25,1); }
  .room.done{ border-color:color-mix(in srgb, var(--brass) 45%, var(--line)); }
  .room.done::after{ content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--gradbrass); }
  .room.recommended{ border-color:var(--accent); animation:rise .5s cubic-bezier(.2,.8,.25,1) both, glowpulse 2.6s ease 1s 3; }
  .room .recbadge{
    display:inline-block; background:var(--grad); color:var(--accent-ink); font-size:12px; font-weight:700;
    border-radius:99px; padding:2px 12px; align-self:flex-start;
  }
  .lobbyfoot{ margin-top:40px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .lobbyfoot .note{ font-size:14px; color:var(--muted); flex:1; min-width:220px; }

  /* ---------- Namensschild ---------- */
  .namecard{
    background:var(--surface); border:1.5px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
    padding:32px 28px; max-width:540px; margin:34px auto; position:relative; overflow:hidden;
  }
  .namecard::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad); }
  .namecard h1{ font-size:27px; margin-bottom:8px; }
  .namecard>p{ color:var(--muted); margin-bottom:16px; }
  .pathpick{ display:grid; gap:10px; margin:14px 0 20px; }
  .pathpick button{
    text-align:left; background:var(--surface-2); border:2px solid var(--line); border-radius:14px; padding:13px 17px;
    transition:transform .15s, border-color .15s, background .15s;
  }
  .pathpick button:hover{ border-color:var(--accent); transform:translateY(-1px); }
  .pathpick button.sel{ border-color:var(--accent); background:var(--accent-soft); }
  .pathpick b{ display:block; }
  .pathpick span{ font-size:14px; color:var(--muted); }

  /* ---------- Spieler ---------- */
  .player{ max-width:660px; margin:0 auto; }
  .playertop{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .playertop .backlobby{ background:none; border:none; color:var(--muted); font-size:15px; font-weight:600; padding:6px 2px; border-radius:8px; transition:color .15s; }
  .playertop .backlobby:hover{ color:var(--accent); }
  .playertop .ptitle{ font-size:15px; font-weight:700; flex:1; text-align:center; }
  .playertop .pcount{ font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted); white-space:nowrap; }
  .pbar{ height:9px; border-radius:99px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; margin-bottom:24px; }
  .pbar>div{ height:100%; background:var(--grad); border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.25,1); }

  .stepcard{
    background:var(--surface); border:1.5px solid var(--line); border-radius:24px;
    box-shadow:var(--shadow); padding:30px 28px; min-height:360px;
    display:flex; flex-direction:column; position:relative; overflow:hidden;
    animation:rise .4s cubic-bezier(.2,.8,.25,1) both;
  }
  .stepcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad); }
  .steptag{
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    border-radius:999px; padding:4px 14px; margin-bottom:14px;
  }
  .steptag.t-info{ background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }
  .steptag.t-do{ background:var(--brass-soft); color:var(--brass); border:1px solid color-mix(in srgb, var(--brass) 30%, transparent); }
  .steptag.t-q{ background:var(--accent-soft); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
  .stepcard h2{ font-size:23px; margin-bottom:12px; }
  .stepbody{ flex:1; }
  .stepbody p{ margin-bottom:10px; }
  .stepbody ul,.stepbody ol{ margin:4px 0 12px; padding-left:22px; }
  .stepbody li{ margin:6px 0; }
  .hint{
    display:flex; gap:10px; align-items:flex-start; background:var(--brass-soft);
    border-radius:12px; padding:11px 15px; font-size:15px; margin-top:12px;
    border:1px solid color-mix(in srgb, var(--brass) 22%, transparent);
  }
  .hint .ic{ flex:none; }
  .stepfoot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
  .stepfoot .fb{ flex:1; min-width:160px; }
  .fb{ font-weight:700; font-size:15.5px; }
  .fb.ok{ color:var(--good); }
  .fb.err{ color:var(--bad); }

  /* ---------- Quiz ---------- */
  .opts{ display:grid; gap:10px; margin-top:6px; }
  .opts button{
    text-align:left; background:var(--surface-2); border:2px solid var(--line); border-radius:14px;
    padding:14px 17px; font-size:16.5px; line-height:1.4;
    transition:transform .14s, border-color .14s, background .14s, box-shadow .14s;
  }
  .opts button:hover:not(:disabled){ border-color:var(--accent); transform:translateX(4px); box-shadow:var(--shadow); }
  .opts button.right{ border-color:var(--good); background:var(--good-bg); font-weight:600; animation:pop .4s ease; }
  .opts button.wrong{ border-color:var(--bad); background:var(--bad-bg); }
  .opts button:disabled{ cursor:default; }
  .explain{
    margin-top:14px; background:var(--surface-2); border-left:4px solid var(--good);
    border-radius:0 12px 12px 0; padding:11px 15px; font-size:15px;
    animation:rise .35s ease both;
  }

  /* ---------- Übungs-Widgets ---------- */
  .clicktarget{
    display:block; width:100%; max-width:340px; margin:16px auto;
    background:var(--accent-soft); border:2.5px solid var(--accent); color:var(--ink);
    border-radius:16px; padding:24px 16px; font-weight:700; font-size:18px; text-align:center;
    transition:transform .1s, box-shadow .15s;
  }
  .clicktarget:hover{ box-shadow:var(--shadow-lift); }
  .clicktarget:active{ transform:scale(.95); }
  .door{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    width:152px; height:204px; margin:16px auto; position:relative;
    background:linear-gradient(180deg,var(--brass-soft),var(--surface-2));
    border:2.5px solid var(--brass); border-radius:12px 12px 5px 5px; font-weight:700;
    transition:transform .15s;
  }
  .door:hover{ transform:scale(1.03); }
  .door .knob{ position:absolute; right:14px; top:50%; width:13px; height:13px; border-radius:50%; background:var(--gradbrass); box-shadow:0 1px 3px rgba(0,0,0,.3); }
  .door.open{ background:var(--good-bg); border-color:var(--good); animation:pop .45s ease; }
  .rightzone{
    border:2.5px dashed var(--line); border-radius:14px; padding:36px 16px; text-align:center;
    color:var(--muted); font-weight:600; margin:14px 0; user-select:none; position:relative;
    transition:border-color .2s;
  }
  .rightzone:hover{ border-color:var(--accent); }
  .ctxmenu{
    position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow-lift); padding:5px 0; font-size:14.5px; text-align:left; min-width:150px; z-index:5;
    animation:rise .18s ease both;
  }
  .ctxmenu div{ padding:6px 16px; }
  .ctxmenu div:hover{ background:var(--surface-2); }
  .scrollbox{
    height:150px; overflow-y:auto; border:1.5px solid var(--line); border-radius:14px;
    padding:14px 16px; background:var(--surface-2); font-size:15.5px; margin:12px 0;
  }
  .typebox{ width:100%; font-size:17px; margin-top:10px; }
  .sentence{
    background:var(--surface-2); border:1px dashed color-mix(in srgb, var(--brass) 45%, var(--line));
    border-radius:12px; padding:10px 15px; font-weight:600; margin:8px 0; display:inline-block;
  }
  .shake{ animation:shake .35s; }
  @keyframes shake{ 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

  /* Fake-Fenster */
  .fakedesk{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:20px 14px 12px; margin-top:10px; }
  .fakewin{
    background:var(--surface); border:1.5px solid var(--line); border-radius:12px; overflow:hidden;
    max-width:340px; margin:0 auto; box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.25,1);
  }
  .fakewin.big{ transform:scale(1.12); box-shadow:var(--shadow-lift); }
  .fakewin .bar{ display:flex; align-items:center; background:var(--grad); color:var(--accent-ink); padding:7px 11px; font-size:14px; font-weight:600; gap:8px; }
  .fakewin .bar .wbtns{ margin-left:auto; display:flex; gap:5px; }
  .fakewin .bar button{ width:27px; height:23px; border:none; border-radius:6px; background:rgba(255,255,255,.25); color:inherit; font-size:12px; font-weight:700; line-height:1; transition:background .15s; }
  .fakewin .bar button:hover{ background:rgba(255,255,255,.5); }
  .fakewin .wbody{ padding:20px 14px; font-size:14.5px; color:var(--muted); text-align:center; }
  .taskbar{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; margin-top:16px; padding:6px 11px; min-height:40px; }
  .taskbar .tlabel{ font-size:12.5px; color:var(--muted); }
  .taskbar button{ background:var(--accent-soft); border:1.5px solid var(--accent); border-radius:7px; padding:4px 13px; font-size:13.5px; font-weight:600; color:var(--ink); animation:rise .25s ease both; }

  /* Browser & Login */
  .browserframe{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:14px; padding:13px; margin-top:12px; }
  .browserdots{ display:flex; gap:5px; margin-bottom:9px; }
  .browserdots i{ width:10px; height:10px; border-radius:50%; background:var(--line); }
  .addressbar{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:7px 15px; transition:border-color .15s, box-shadow .15s; }
  .addressbar:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
  .addressbar input{ border:none !important; outline:none; flex:1; background:transparent; padding:4px 0; font-family:"IBM Plex Mono",monospace; font-size:15px; min-width:0; box-shadow:none !important; }
  .mocklogin{ background:var(--surface-2); border:1.5px solid var(--line); border-radius:16px; padding:22px 20px; max-width:370px; margin:12px auto 0; display:grid; gap:10px; }
  .mocklogin .mlabel{ font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:-6px; }

  /* Reihenfolge-Spiel */
  .ordergame .pool{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .ordergame .pool button{
    background:var(--surface-2); border:2px solid var(--line); border-radius:12px; padding:10px 15px; font-size:15.5px; text-align:left;
    transition:transform .13s, border-color .13s, opacity .2s;
  }
  .ordergame .pool button:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-2px); }
  .ordergame .pool button.used{ opacity:.3; cursor:default; }
  .ordergame .doneline{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
  .ordergame .doneline span{ background:var(--good-bg); border:1.5px solid var(--good); border-radius:10px; padding:7px 13px; font-size:15px; animation:rise .3s ease both; }

  /* Umdreh-Karten */
  .flipgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px; }
  .flip{
    border:2px solid var(--line); border-radius:14px; background:var(--surface-2); min-height:112px; padding:10px; position:relative;
    transition:transform .15s, border-color .15s, background .2s;
  }
  .flip:hover{ transform:translateY(-2px); border-color:var(--brass); }
  .flip .front{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; }
  .flip .back{ display:none; font-size:13.5px; line-height:1.4; }
  .flip.flipped{ background:var(--accent-soft); border-color:var(--accent); }
  .flip.flipped .front{ display:none; }
  .flip.flipped .back{ display:block; }

  /* PMS-Maske */
  .pms{ border:1.5px solid var(--line); border-radius:14px; overflow:hidden; margin-top:12px; background:var(--surface); box-shadow:var(--shadow); }
  .pmsbar{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border-bottom:1px solid var(--line); padding:8px 13px; font-size:13.5px; font-weight:600; }
  .pmsbar .mode{ margin-left:auto; color:var(--brass); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; }
  .pmsbody{ padding:15px; }
  .pmslayout{ display:flex; gap:10px; }
  .pmsnav{ display:flex; flex-direction:column; gap:6px; min-width:152px; }
  .pmsnav button{ text-align:left; background:var(--surface-2); border:1.5px solid var(--line); border-radius:10px; padding:9px 13px; font-size:14.5px; font-weight:600; transition:transform .13s, border-color .13s; }
  .pmsnav button:hover{ border-color:var(--accent); transform:translateX(3px); }
  .pmsmain{ flex:1; background:var(--surface-2); border:1px dashed var(--line); border-radius:10px; display:grid; place-items:center; color:var(--muted); font-size:13.5px; padding:12px; text-align:center; min-height:120px; }
  @media (max-width:520px){ .pmslayout{ flex-direction:column; } .pmsnav{ min-width:0; } }
  .reslist{ display:grid; gap:8px; margin-top:12px; }
  .reslist button{
    text-align:left; background:var(--surface-2); border:2px solid var(--line); border-radius:12px; padding:12px 15px;
    transition:transform .13s, border-color .13s, box-shadow .13s;
  }
  .reslist button:hover:not(:disabled){ border-color:var(--accent); transform:translateX(4px); box-shadow:var(--shadow); }
  .reslist .rname{ font-weight:700; }
  .reslist .rmeta{ display:block; font-size:14px; color:var(--muted); }
  .checkrow{ display:flex; align-items:flex-start; gap:9px; margin:9px 0; font-size:16px; cursor:pointer; }
  .checkrow input{ width:19px; height:19px; margin-top:3px; accent-color:var(--accent); }
  .billtable{ border-collapse:collapse; width:100%; font-size:15px; margin-top:10px; }
  .billtable th,.billtable td{ border-bottom:1px solid var(--line); text-align:left; padding:8px; }
  .billtable .num{ text-align:right; font-family:"IBM Plex Mono",monospace; font-size:14px; }
  .formrow{ display:flex; align-items:center; gap:10px; margin:9px 0; flex-wrap:wrap; }
  .formrow label{ width:95px; font-weight:600; font-size:15px; flex:none; }
  .formrow input,.formrow select{ flex:1; min-width:150px; }

  /* Abschluss & Urkunde */
  .bigfinish{ text-align:center; padding:22px 0; }
  .bigfinish .bigicon{ font-size:60px; display:block; margin-bottom:10px; animation:pop .6s cubic-bezier(.2,.8,.25,1) both; }
  .bigfinish h2{ font-size:28px; margin-bottom:8px; }
  .bigfinish p{ color:var(--muted); max-width:44ch; margin:0 auto 8px; }
  .scorebig{
    font-family:"Bricolage Grotesque",sans-serif; font-size:48px; font-weight:800;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .cert{
    border:2.5px solid var(--brass); border-radius:20px; background:var(--surface);
    padding:34px 26px; text-align:center; position:relative; overflow:hidden;
  }
  .cert::before{ content:""; position:absolute; inset:8px; border:1px solid color-mix(in srgb, var(--brass) 40%, transparent); border-radius:13px; pointer-events:none; }
  .cert .trophy{ display:inline-block; line-height:0; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
  body[data-skin="retro"] .cert .trophy svg{ filter:grayscale(1) contrast(1.05); }
  .cert .certtitle{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:27px; font-weight:800; letter-spacing:.05em; margin:6px 0 10px; }
  .cert .certname{
    display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:32px; font-weight:800; margin:10px 0;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .cert p{ margin:5px 0; }
  .checklist{ display:grid; gap:8px; margin-top:12px; }
  .checklist label{
    display:flex; gap:10px; align-items:flex-start; background:var(--surface); border:1.5px solid var(--line);
    border-radius:12px; padding:11px 15px; font-size:15.5px; cursor:pointer;
    transition:border-color .15s, background .2s, transform .13s;
  }
  .checklist label:hover{ border-color:var(--accent); transform:translateX(3px); }
  .checklist input{ width:19px; height:19px; margin-top:2px; accent-color:var(--accent); flex:none; }
  .checklist label.did{ border-color:var(--good); background:var(--good-bg); }

  /* Übungs-PC (simulierter Desktop) */
  #desksim{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; background:linear-gradient(160deg, var(--accent), var(--accent-2)); }
  .dz-desktop{ flex:1; position:relative; overflow:hidden; padding:16px; }
  .dz-icon{
    width:88px; text-align:center; background:none; border:1px solid transparent; border-radius:10px;
    display:block; padding:8px 2px; margin-bottom:10px; cursor:default; user-select:none; color:#fff;
  }
  .dz-icon .ic{ font-size:34px; display:block; line-height:1.2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
  .dz-icon span{ font-size:12.5px; text-shadow:0 1px 3px rgba(0,0,0,.65); }
  .dz-icon.sel{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); }
  .dz-win{
    position:absolute; min-width:300px; max-width:94vw; background:var(--surface); color:var(--ink);
    border:1px solid var(--line); border-radius:10px; overflow:hidden;
    box-shadow:0 14px 44px rgba(0,0,0,.38); display:flex; flex-direction:column;
  }
  .dz-tit{
    display:flex; align-items:center; gap:8px; background:var(--grad); color:var(--accent-ink);
    padding:7px 11px; font-size:13.5px; font-weight:600; cursor:move; user-select:none; touch-action:none;
  }
  .dz-tit .dz-btns{ margin-left:auto; display:flex; gap:4px; }
  .dz-tit .dz-btns button{
    width:26px; height:21px; border:none; border-radius:5px; background:rgba(255,255,255,.25);
    color:inherit; font-size:11px; font-weight:700; line-height:1; cursor:pointer;
  }
  .dz-tit .dz-btns button:hover{ background:rgba(255,255,255,.5); }
  .dz-body{ padding:12px 14px; overflow:auto; flex:1; font-size:14.5px; }
  .dz-body p{ margin-bottom:8px; }
  .dz-task{
    height:46px; flex:none; background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 10px; position:relative; z-index:6;
  }
  .dz-start{ padding:6px 16px; font-size:14px; border-radius:9px; }
  .dz-tab{
    background:var(--surface); border:1.5px solid var(--line); border-radius:8px;
    padding:5px 12px; font-size:13px; font-weight:600; color:var(--ink); max-width:150px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .dz-tab.min{ opacity:.6; }
  .dz-clock{ margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--ink); }
  .dz-quests{
    position:absolute; top:12px; right:12px; width:280px; max-width:80vw; z-index:5;
    background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow-lift); padding:12px 14px; font-size:13.5px;
  }
  .dz-quests h3{ font-size:14.5px; margin-bottom:8px; }
  .dz-quests ol{ margin:0; padding-left:20px; }
  .dz-quests li{ margin:5px 0; color:var(--muted); }
  .dz-quests li.now{ color:var(--ink); font-weight:700; }
  .dz-quests li.did{ color:var(--good); text-decoration:line-through; }
  .dz-menu{
    position:absolute; left:8px; bottom:52px; z-index:7; min-width:190px;
    background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow-lift); padding:6px; display:flex; flex-direction:column; gap:2px;
  }
  .dz-menu button{ text-align:left; background:none; border:none; border-radius:8px; padding:9px 12px; font-size:14.5px; color:var(--ink); }
  .dz-menu button:hover{ background:var(--surface-2); }
  .dz-lock{ position:absolute; inset:0; z-index:9; background:rgba(8,16,14,.93); color:#fff; display:grid; place-items:center; text-align:center; }
  .dz-mailitem{ text-align:left; width:100%; background:var(--surface-2); border:1.5px solid var(--line); border-radius:9px; padding:9px 12px; }
  .dz-mailitem:hover{ border-color:var(--accent); }
  .dz-win.dz-max{ left:0 !important; top:0 !important; width:100% !important; height:100% !important; border-radius:0 !important; max-width:none; }
  .dz-tab.act{ border-color:var(--accent); background:var(--accent-soft); }
  .dz-btabs{ display:flex; align-items:flex-end; gap:4px; background:var(--surface-2); padding:6px 8px 0; border-bottom:1px solid var(--line); margin:-12px -14px 0; }
  .dz-btab{
    display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-bottom:none;
    border-radius:8px 8px 0 0; padding:6px 12px; font-size:12.5px; max-width:220px; white-space:nowrap; overflow:hidden;
  }
  .dz-bplus{ padding:4px 9px; color:var(--muted); font-size:14px; }
  .dz-bnav{ display:flex; align-items:center; gap:6px; margin:10px 0; }
  .dz-bnav button{
    width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:var(--ink); font-size:15px;
  }
  .dz-bnav button:hover:not(:disabled){ background:var(--surface-2); }
  .dz-bnav button:disabled{ color:var(--line); cursor:default; }
  .dz-bnav .addressbar{ flex:1; margin:0; }
  .dz-menubar{ margin:-12px -14px 10px; padding:5px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted); }
  /* Hübsche Fake-Webseiten im Browser */
  .dz-site{ margin:-12px -14px; padding:18px 16px 24px; min-height:calc(100% + 26px); background:var(--surface-2); box-sizing:border-box; }
  .dz-sitecard{
    max-width:350px; margin:22px auto; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; box-shadow:var(--shadow-lift); padding:24px 22px; text-align:center;
  }
  .dz-logo{
    width:54px; height:54px; border-radius:15px; background:var(--grad); color:var(--accent-ink);
    display:inline-grid; place-items:center; font-size:27px; margin-bottom:8px;
    box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .dz-sitecard h2{ font-size:21px; margin:2px 0 2px; }
  .dz-sitecard .sub{ font-size:13px; color:var(--muted); margin-bottom:12px; }
  .dz-sitecard .mlabel{ display:block; text-align:left; margin:10px 0 3px; font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
  .dz-sitecard input{ width:100%; }
  .dz-sitecard .btn{ width:100%; margin-top:14px; }
  .dz-foot{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:14px; }
  .dz-pmshead{
    display:flex; align-items:center; gap:10px; background:var(--grad); color:var(--accent-ink);
    padding:11px 15px; border-radius:12px 12px 0 0; font-weight:700;
  }
  .dz-pmshead .u{ margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:400; font-size:12.5px; opacity:.9; }
  .dz-pmshead .u button{ background:rgba(255,255,255,.22); border:none; border-radius:7px; color:inherit; font-size:12px; padding:4px 10px; }
  .dz-pmshead .u button:hover{ background:rgba(255,255,255,.4); }
  .dz-pmsbody{ background:var(--surface); border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; padding:14px; }
  .dz-sechead{ font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin:12px 0 8px; }
  .dz-sechead:first-child{ margin-top:0; }
  .dz-guestrow{
    display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:8px;
    border:1px solid var(--line); border-radius:11px; background:var(--surface-2);
  }
  .dz-ava{ width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:800; flex:none; }
  .dz-guestrow .gi{ flex:1; min-width:0; }
  .dz-guestrow .gi b{ display:block; }
  .dz-guestrow .gi span{ font-size:12.5px; color:var(--muted); }
  .dz-pill{ font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:3px 10px; border-radius:99px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; }
  .dz-pill.hot{ background:var(--bad-bg); color:var(--bad); }
  .dz-404{ text-align:center; padding:34px 10px; color:var(--muted); }
  .dz-404 .big{ font-size:44px; }
  /* PMS: Tabs, Statuschips, Kalender */
  .dz-ptabs{ display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-top:none; padding:8px 10px 0; overflow-x:auto; }
  .dz-ptab{
    background:var(--surface-2); border:1px solid var(--line); border-bottom:none;
    border-radius:9px 9px 0 0; padding:7px 13px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap;
  }
  .dz-ptab.act{ background:var(--surface); color:var(--ink); border-color:var(--accent); }
  .dz-status{ font-size:10.5px; font-weight:800; letter-spacing:.05em; padding:3px 10px; border-radius:99px; white-space:nowrap; }
  .dz-status.s-frei{ background:var(--good-bg); color:var(--good); }
  .dz-status.s-belegt{ background:var(--accent-soft); color:var(--accent); }
  .dz-status.s-schmutzig{ background:var(--bad-bg); color:var(--bad); }
  .dz-cal{ border-collapse:collapse; width:100%; font-size:12.5px; }
  .dz-cal th, .dz-cal td{ border:1px solid var(--line); padding:5px 6px; text-align:center; min-width:52px; }
  .dz-cal th:first-child, .dz-cal td:first-child{ text-align:left; min-width:72px; }
  .dz-cal th.today{ background:var(--accent-soft); color:var(--accent); }
  .dz-cal td.occ{ background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:11px; overflow:hidden; }
  .dz-cal td.dirty{ background:var(--bad-bg); }
  /* Notizblock */
  .dz-notebar{ display:flex; gap:5px; align-items:center; margin-bottom:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px; }
  .dz-notebar .name{ margin-left:auto; font-size:12.5px; color:var(--muted); padding-right:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dz-paper{
    width:100%; min-height:200px; resize:vertical; box-sizing:border-box;
    border:1px solid var(--line); border-radius:10px; outline-offset:-2px;
    padding:6px 14px 12px 42px; font:inherit; font-size:15.5px; line-height:28px; color:var(--ink);
    background:
      linear-gradient(90deg, transparent 30px, color-mix(in srgb, var(--bad) 40%, transparent) 30px, color-mix(in srgb, var(--bad) 40%, transparent) 31px, transparent 31px),
      repeating-linear-gradient(var(--surface) 0 27px, color-mix(in srgb, var(--line) 55%, transparent) 27px 28px);
  }
  body[data-skin="retro"] #desksim{ background:#2F7A7A; }
  body[data-skin="retro"] .dz-task{ background:#C3C3C3; border-top:2px solid #FFFFFF; backdrop-filter:none; }
  body[data-skin="retro"] .dz-win{ box-shadow:3px 3px 0 rgba(0,0,0,.55); border:2px solid; border-color:#FFFFFF #5B5B5B #5B5B5B #FFFFFF; }
  @media (max-width:640px){ .dz-quests{ width:220px; font-size:12.5px; } }

  /* Lexikon */
  .lexsearch{ width:100%; margin:14px 0 4px; font-size:17px; }
  .lexsec{ margin-top:24px; }
  .lexsec h2{ font-size:19px; margin-bottom:10px; }
  .lexrow{
    display:flex; gap:6px 16px; padding:10px 14px; margin-bottom:8px; flex-wrap:wrap;
    border:1.5px solid var(--line); border-radius:12px; background:var(--surface);
  }
  .lexrow b{ flex:0 0 170px; min-width:150px; }
  .lexrow span{ flex:1; min-width:200px; }
  @media (max-width:520px){ .lexrow b{ flex-basis:100%; } }

  .toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(90px);
    background:var(--ink); color:var(--bg); border-radius:14px; padding:13px 24px;
    font-weight:700; box-shadow:var(--shadow-lift); opacity:0; transition:all .35s cubic-bezier(.2,.8,.25,1);
    z-index:50; max-width:90vw; text-align:center;
  }
  .toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
  #confetti{ position:fixed; inset:0; pointer-events:none; z-index:60; }

  @media print{
    @page{ size:A4 portrait; margin:8mm; }
    .topbar,.playertop,.pbar,.stepfoot,.toast,.bgdecor,#confetti{ display:none !important; }
    body{ background:#fff; }
    .stepcard{ border:none; box-shadow:none; }
    body.certprint .hero, body.certprint .lobbyhead, body.certprint .lobbyfoot, body.certprint .floor{ display:none !important; }
    body.certprint #certfloor{ display:block !important; margin:0; }
    body.certprint #certfloor .floorlabel, body.certprint #printcert{ display:none !important; }

    /* Urkunde: echte A4-Seite, immer mit Druckfarben (auch aus dem Dark Mode heraus) */
    body.certprint{
      --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF;
      --ink:#101010; --muted:#4A4A4A; --line:#8A8A8A;
      --brass:#7D6420; --brass-2:#A3853A; --accent:#0E5E50; --accent-2:#1B8A6B;
      overflow:hidden;
    }
    body.certprint .wrap{ max-width:none; padding:0; margin:0; }
    body.certprint .cert{
      box-sizing:border-box; width:194mm; height:281mm; margin:0 auto; padding:26mm 20mm;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7mm;
      border:4mm double var(--brass); border-radius:0; background:#FFFFFF;
      box-shadow:none; animation:none; page-break-inside:avoid;
    }
    body.certprint .cert::before{ inset:5mm; border:1px solid var(--brass); border-radius:0; }
    body.certprint .cert .trophy svg{ width:46mm; height:auto; }
    body.certprint .cert .trophy{ filter:none; }
    body.certprint .cert .certtitle{ font-size:40pt; letter-spacing:.14em; color:var(--ink); }
    body.certprint .cert .certname{
      font-size:30pt;
      background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important;
      color:var(--ink) !important;
      border-bottom:1pt solid var(--brass); padding:0 12mm 2mm;
    }
    body.certprint .cert p{ font-size:13pt; max-width:150mm; color:var(--ink); }
    body.certprint .cert p.small, body.certprint .cert p.mono{ font-size:11pt; color:var(--muted); }
    body.certprint .cert div{ margin-top:12mm !important; gap:26mm !important; }
    body.certprint .cert div span{ min-width:55mm !important; font-size:10.5pt !important; color:var(--muted) !important; border-top-color:var(--ink) !important; }
  }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } html{ scroll-behavior:auto; } }

/* ---------- KurCard: modernes Kurkarten-System ---------- */
.kk-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; margin-bottom:4px; }
.kk-head .kk-logo{ font-size:24px; }
.kk-head b{ display:block; font-size:16px; letter-spacing:.3px; }
.kk-head small{ display:block; opacity:.85; font-size:11.5px; }
.kk-head .kk-stats{ margin-left:auto; font-size:12px; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:99px; white-space:nowrap; }
.kk-price{ margin-top:6px; font-size:14px; color:var(--ink); min-height:20px; }
.kk-price small{ color:var(--muted); }
.kk-card{ border-radius:14px; padding:12px 14px; margin-bottom:10px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 4px 14px rgba(0,0,0,.18); }
.kk-card.kk-prem{ background:linear-gradient(135deg, #8a6d1f 0%, #c9a254 55%, #8a6d1f 100%); }
.kk-card.kk-old{ filter:grayscale(.85); opacity:.62; }
.kk-card::after{ content:"🌊"; position:absolute; right:-6px; bottom:-14px; font-size:64px; opacity:.14; }
.kk-top{ display:flex; justify-content:space-between; font-size:11px; text-transform:uppercase; letter-spacing:1.4px; opacity:.9; }
.kk-top b{ font-family:"IBM Plex Mono", monospace; letter-spacing:1px; }
.kk-name{ font-size:18px; font-weight:700; margin:6px 0 8px; }
.kk-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; opacity:.95; }
.kk-foot{ display:flex; align-items:center; gap:6px; margin-top:10px; }
.kk-foot .btn{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }
.kk-state{ font-size:12px; }
body[data-skin="retro"] .kk-head, body[data-skin="retro"] .kk-card{ background:#000; color:#fff; }
body[data-skin="retro"] .kk-card.kk-prem{ background:#333; }