/* Gemeinsames Design (Apple-inspiriert): ruhige Flächen, runde Ecken, große Typografie, Hell/Dunkel */
:root {
  --bg:#000; --panel:#1c1c1e; --panel2:#2c2c2e; --fill:rgba(120,120,128,.24); --line:rgba(84,84,88,.55);
  --text:#f5f5f7; --muted:#98989f; --accent:#0a84ff; --accent-ink:#fff;
  --ok:#30d158; --warn:#ff9f0a; --bad:#ff453a; --radius:20px; --shadow:none;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f5f5f7; --panel:#fff; --panel2:#f2f2f7; --fill:rgba(120,120,128,.14); --line:rgba(60,60,67,.14); --text:#1d1d1f; --muted:#6e6e73; --accent:#007aff;
    --ok:#248a3d; --warn:#c93400; --bad:#d70015; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06); }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { color-scheme:light dark; -webkit-text-size-adjust:100%; }
/* App-Gefühl: Oberfläche ist nicht markierbar; Eingaben, Code und Ergebnisse bleiben auswählbar/kopierbar */
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, pre, code, .ed, .result-table, .selectable, [contenteditable="true"] { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
a, img, svg, button { -webkit-user-drag:none; user-drag:none; }
::selection { background:color-mix(in srgb,var(--accent) 35%,transparent); }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.47 var(--font); letter-spacing:-.011em; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wrap { max-width:1040px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left)); }
header.top { display:flex; align-items:center; gap:12px; padding:max(18px, env(safe-area-inset-top)) 0 10px; }
header.top h1 { font-size:1.7rem; font-weight:700; letter-spacing:-.025em; margin:0; flex:1; display:flex; gap:10px; align-items:center; }
h1, h2, h3 { letter-spacing:-.02em; }
h2 { font-size:1.3rem; font-weight:700; margin:30px 0 12px; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
a { color:var(--accent); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }

button, .btn { font:inherit; font-weight:500; cursor:pointer; border:0; background:var(--fill); color:var(--text); min-height:38px; padding:7px 17px; border-radius:999px;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:transform .12s, background .15s, opacity .15s; touch-action:manipulation; }
button:hover, .btn:hover { background:color-mix(in srgb,var(--fill) 100%,var(--text) 8%); } button:active, .btn:active { transform:scale(.97); }
button.primary, .btn.primary { background:var(--accent); color:var(--accent-ink); font-weight:600; } button.primary:hover { background:color-mix(in srgb,var(--accent) 90%,#fff); }
button.danger { color:var(--bad); } button.ghost { background:transparent; } button.ghost:hover { background:var(--fill); }
button:disabled { opacity:.45; cursor:default; transform:none; }
input, select, textarea { font:inherit; width:100%; min-height:44px; padding:10px 14px; border-radius:12px; border:1px solid transparent; background:var(--fill); color:var(--text); }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; }
textarea { min-height:0; } input::placeholder, textarea::placeholder { color:var(--muted); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent); }
button:focus-visible, a:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:2px; }
label { display:block; font-size:.82rem; color:var(--muted); margin:14px 0 6px; font-weight:500; }
.msg { margin-top:12px; padding:11px 14px; border-radius:14px; font-size:.92rem; }
.msg.err { background:color-mix(in srgb,var(--bad) 15%,transparent); color:var(--bad); } .msg.info { background:color-mix(in srgb,var(--warn) 15%,transparent); color:var(--warn); }
.auth { max-width:420px; margin:9vh auto 0; padding:28px; } .auth h1 { margin:0 0 6px; font-size:1.7rem; }
/* Segmentierte Steuerung (Tabs) */
.tabs { display:flex; gap:2px; padding:3px; background:var(--fill); border-radius:13px; flex-wrap:wrap; }
.tabs button { flex:1; background:transparent; border-radius:10px; min-height:34px; padding:6px 12px; }
.tabs button.on { background:var(--panel); color:var(--text); font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.auth .tabs { margin:18px 0 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.badge { display:inline-block; font-size:.74rem; padding:2px 9px; border-radius:99px; background:var(--fill); font-weight:600; }
.badge.approved { color:var(--ok); } .badge.pending { color:var(--warn); } .badge.blocked { color:var(--bad); }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle; } th { color:var(--muted); font-weight:500; font-size:.8rem; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .stack > * + * { margin-top:12px; }
pre, code { font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Tablet */
@media (max-width: 1024px) { .wrap { max-width:860px; } }
/* Handy */
@media (max-width: 640px) {
  body { font-size:16px; } header.top h1 { font-size:1.45rem; } h2 { font-size:1.2rem; margin-top:24px; }
  .card { padding:16px; border-radius:18px; } .auth { margin-top:5vh; padding:22px; }
  button, .btn { min-height:44px; } .tabs button { min-height:40px; }
  input, select { font-size:16px; } /* verhindert Zoom beim Fokussieren in iOS */
  .grid { grid-template-columns:1fr 1fr; gap:12px; } th, td { padding:9px 6px; }
}

/* Toast & Glocke */
.toasts { position:fixed; right:max(16px, env(safe-area-inset-right)); top:max(16px, env(safe-area-inset-top)); z-index:200; display:grid; gap:8px; width:min(380px, calc(100vw - 32px)); }
.toast { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:color-mix(in srgb,var(--panel) 88%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line); box-shadow:0 10px 36px rgba(0,0,0,.35); animation:tin .28s cubic-bezier(.2,.9,.3,1); } .toast span { flex:1; font-size:.92rem; }
@keyframes tin { from { opacity:0; transform:translateY(-10px) scale(.98); } }
.bubble { display:inline-block; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--bad); color:#fff; font-size:.7rem; font-weight:700; line-height:18px; text-align:center; margin-left:4px; vertical-align:top; }
a.btn.news { position:relative; }
@media (max-width:520px) { .hide-s { display:none; } }