/* ===== TOOLBOX — TOOLS · Stil der Sammelseite =====
   Token und Kopf identisch mit tools/RAUMPROGRAMM/style.css (Akzent Stahlblau
   #7F9BB3 = Farbe der TOOLS-Kachel). Aenderungen an den Token dort und hier
   gemeinsam machen. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --bg:#050507;
  --surface:rgba(255,255,255,0.045);
  --surface-2:rgba(255,255,255,0.07);
  --field:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.10);
  --border-h:rgba(127,155,179,0.6);
  --hair:rgba(255,255,255,0.07);
  --accent-text:#7F9BB3;
  --accent-fill:#7F9BB3;
  --on-accent:#0A0A0A;
  --accent-tonal:rgba(127,155,179,0.16);
  --accent-edge:rgba(127,155,179,0.6);
  --ok:#30D158;--ok-t:rgba(48,209,88,0.14);
  --warn:#FBBF24;--warn-t:rgba(251,191,36,0.13);
  --high:#FF9F0A;
  --err:#FF6B6B;--err-t:rgba(255,107,107,0.14);
  --text:#F0F0F2;--text-2:rgba(240,240,242,0.72);--text-3:rgba(240,240,242,0.58);
  --stage:#FFFFFF;
  --shadow:0 8px 32px rgba(0,0,0,.45);
  --clash:'Clash Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --radius:14px;--radius-s:9px;--tap:40px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#E4E4E0;--surface:#EDEDE9;--surface-2:#F2F2EE;--field:#F2F2EE;
    --border:rgba(10,10,10,0.14);--border-h:#0A0A0A;--hair:rgba(10,10,10,0.09);
    --accent-text:#0A0A0A;--accent-tonal:#7F9BB3;--accent-edge:#0A0A0A;
    --ok:#0F6B3A;--ok-t:rgba(15,107,58,0.12);--warn:#7A5600;--warn-t:rgba(122,86,0,0.12);--high:#8A4B00;--err:#B42318;--err-t:rgba(180,35,24,0.10);
    --text:#0A0A0A;--text-2:rgba(10,10,10,0.74);--text-3:rgba(10,10,10,0.62);
    --shadow:0 10px 30px rgba(10,10,10,.10);
  }
}
:root[data-theme="light"]{
    color-scheme:light;
    --bg:#E4E4E0;--surface:#EDEDE9;--surface-2:#F2F2EE;--field:#F2F2EE;
    --border:rgba(10,10,10,0.14);--border-h:#0A0A0A;--hair:rgba(10,10,10,0.09);
    --accent-text:#0A0A0A;--accent-tonal:#7F9BB3;--accent-edge:#0A0A0A;
    --ok:#0F6B3A;--ok-t:rgba(15,107,58,0.12);--warn:#7A5600;--warn-t:rgba(122,86,0,0.12);--high:#8A4B00;--err:#B42318;--err-t:rgba(180,35,24,0.10);
    --text:#0A0A0A;--text-2:rgba(10,10,10,0.74);--text-3:rgba(10,10,10,0.62);
    --shadow:0 10px 30px rgba(10,10,10,.10);
}
html{font-size:16px;-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.5;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent-edge)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:999;background:var(--accent-fill);color:var(--on-accent);
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:none}
.skip-link:focus{left:16px}
.wrap{max-width:1180px;margin:0 auto;padding:16px 20px 40px}

/* ── Kopf ── */
.hdr{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.hdr-back{background:var(--surface);border:1px solid var(--border);border-radius:50%;color:var(--text-2);
  width:var(--tap);height:var(--tap);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;transition:border-color .2s,color .2s;flex-shrink:0;text-decoration:none}
.hdr-back:hover{border-color:var(--border-h);color:var(--text)}
.hdr-titles{flex:1;min-width:0}
.hdr-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.hdr-title{font-family:var(--clash);font-size:26px;font-weight:600;letter-spacing:.02em;line-height:1.15}
.hdr-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}

/* ── Segmente / Pillen ── */
.seg{display:flex;gap:4px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.seg-btn{background:none;border:1px solid transparent;border-radius:999px;color:var(--text-2);
  font-size:11px;font-weight:600;letter-spacing:.06em;min-height:calc(var(--tap) - 8px);padding:0 14px;cursor:pointer;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.seg-btn:hover{color:var(--text)}
.seg-btn.active,.seg-btn[aria-checked="true"]{background:var(--accent-tonal);color:var(--accent-text);border-color:var(--accent-edge)}
.lang-btn{min-width:36px;padding:0 10px}


.intro{font-size:14px;color:var(--text-2);max-width:72ch;margin-bottom:18px}
.tools{display:grid;gap:14px}
.tool{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:20px 22px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.tool:hover{border-color:var(--border-h);transform:translateY(-1px)}
.tool:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
.tool-code{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:.04em;
  background:var(--accent-tonal);color:var(--accent-text);border:1px solid var(--accent-edge)}
.tool-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tool-name{font-family:var(--clash);font-size:22px;font-weight:600;letter-spacing:.02em;line-height:1.15}
.tool-sub{font-size:13px;font-weight:700;color:var(--text)}
.tool-text{font-size:13px;color:var(--text-2);max-width:64ch}
.tool-meta{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
.tool-cta{align-self:center;white-space:nowrap;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:0 16px;min-height:var(--tap);display:inline-flex;align-items:center;
  border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.tool:hover .tool-cta{border-color:var(--border-h)}
.note{font-size:12px;color:var(--text-3);margin-top:18px}
.ftr{display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:14px;margin-top:28px;font-size:11px;color:var(--text-3)}
@media (max-width:520px){
  .wrap{padding:12px 16px 32px}
  .hdr-right{width:100%;justify-content:space-between}
  .tool{grid-template-columns:auto 1fr;padding:16px 14px}
  .tool-cta{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}