/* Gemeinsamer Stil der Tutorial-Seiten (Einstieg, PAN, PIN).
   Ausgelagert, damit die drei Seiten garantiert gleich aussehen. */
  :root{--bg:#0b0e13;--panel:#141a24;--line:#22304a;--acc:#7ab7ff;--txt:#e8ecf2;--gold:#f5c400}
  html,body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,sans-serif;line-height:1.65}
  .wrap{max-width:980px;margin:0 auto;padding:34px 20px 80px}
  h1{font-size:clamp(22px,4vw,28px);margin:0 0 6px}
  h1 .thin{color:#8fa4c0;font-weight:300}
  h2{color:var(--acc);font-size:19px;margin:54px 0 6px;border-bottom:1px solid var(--line);padding-bottom:8px}
  h3{color:#cfe0f5;font-size:15px;margin:30px 0 6px}
  p,li{color:#b6c3d6;font-size:14px}
  b{color:#e2ebf6}
  kbd{background:#1c2634;border:1px solid #3a4a60;border-bottom-width:2px;border-radius:4px;
      padding:1px 6px;font-family:monospace;font-size:12px;color:#dfe8f2}
  figure{margin:14px 0 26px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
         overflow:hidden}
  figure img{width:100%;display:block}
  figcaption{padding:9px 14px;font-size:12.5px;color:#8fa4c0;border-top:1px solid var(--line)}
  .step{display:flex;gap:12px;align-items:baseline;margin-top:26px}
  .step .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#2e6b46;color:#fff;
           display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
  .step h3{margin:0}
  .howto details{background:var(--panel);border:1px solid var(--line);border-radius:10px;
                 margin:8px 0;padding:0}
  .howto summary{cursor:pointer;padding:11px 16px;font-size:14px;color:#dfe8f2;user-select:none}
  .howto summary:hover{color:var(--acc)}
  .howto .body{padding:2px 18px 14px;border-top:1px solid var(--line)}
  .howto ol{margin:8px 0;padding-left:22px}
  table{border-collapse:collapse;width:100%;font-size:13px;margin:10px 0}
  th,td{border:1px solid var(--line);padding:7px 11px;text-align:left;color:#b6c3d6}
  th{background:#141b28;color:#cfe0f5}
  .hint{background:#15202e;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
        padding:10px 14px;font-size:13px;color:#c6d3e4;margin:14px 0}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:760px){ .grid2{grid-template-columns:1fr} }
  a{color:var(--acc)}

  /* ── Tag-Modus (Umschalter im Menü der Kopfleiste, ui.js) ── */
  :root.light{--bg:#eef1f5;--panel:#fff;--line:#c9d4e2;--acc:#1d63b8;--txt:#1c2733;--gold:#a37f00}
  :root.light body{background:var(--bg);color:var(--txt)}
  :root.light h1 .thin{color:#5b6b80}
  :root.light p,:root.light li{color:#33475e}
  :root.light b{color:#111}
  :root.light h3{color:#243447}
  :root.light kbd{background:#fff;border-color:#b6c2d2;color:#243447}
  :root.light figcaption{color:#5b6b80;border-color:#dbe3ee}
  :root.light .howto summary{color:#243447}
  :root.light th{background:#e7ecf3;color:#33475e}
  :root.light td,:root.light th{border-color:#c9d4e2;color:#33475e}
  :root.light .hint{background:#fdf6dd;color:#5c4d10;border-left-color:#a37f00}
  /* QS-Interna (Verifikation/Abweichungen): nur für admin sichtbar —
     Default versteckt, Skript unten blendet sie nach whoami wieder ein */
  .adminonly{display:none}
  body.isadmin .adminonly{display:revert}

  /* Einstiegskacheln und Rücklinks der geteilten Tutorials */
  .karten{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin:22px 0 8px}
  @media (max-width:760px){ .karten{grid-template-columns:1fr} }
  .karte{display:flex;flex-direction:column;gap:6px;background:var(--panel);
         border:1px solid var(--line);border-radius:12px;padding:18px 20px;
         text-decoration:none;color:var(--txt);transition:border-color .15s,transform .12s}
  .karte:hover{border-color:var(--acc);transform:translateY(-2px)}
  .karte .ic{font-size:26px;line-height:1}
  .karte b{font-size:15.5px}
  .karte span:last-child{color:#8fa4c0;font-size:13px}
  .zurueck{font-size:13px;margin:0 0 18px}
  .zurueck a{text-decoration:none}
  ul{margin:8px 0;padding-left:20px}
  code{background:#141b28;border:1px solid var(--line);border-radius:4px;
       padding:1px 5px;font-size:12.5px}
  :root.light .karte span:last-child{color:#5b6b80}
  :root.light code{background:#eef2f7;border-color:#c9d4e2}