/* Gemeinsame Gestaltung 2.0.0 — die Stilregeln des freigegebenen Entwurfs docs/entwurf-2.0.0.html (Stand der Freigabe 12.10.2026).
   Seiten nutzen dieselben Klassennamen wie der Entwurf; Ergänzungen einer Seite stehen in der Seite selbst. */
/* Tokens 1:1 aus kern/stage-builder.css (:root Zeile 1–19, heller Modus Zeile 20–28) */
:root{
  --bg:#0b0e13;--panel:#12151c;--panel2:#1a1f29;--line:#212734;--line2:#2c3342;
  --txt:#e7eaf0;--muted:#8b93a4;--accent:#38c6e0;--accent2:#3ecf8e;--on-accent:#04222a;
  --image:#5b8cff;--video:#f59e0b;--header:#a78bfa;--textbox:#34d399;--texthtml:#f472b6;--shape:#94a3b8;
  --imagefixed:#22d3ee;--datetime:#fbbf24;--ticker:#fb7185;--table:#2dd4bf;--document:#fb923c;--qrcode:#818cf8;
  --btnhover:#1c2230;--sel:#16222b;--card:rgba(255,255,255,.02);--track:rgba(255,255,255,.06);
  --thumb-bg:#0a0c10;--warn:#f59e0b;--warn-bg:rgba(245,158,11,.10);--err:#e0605c;--err-bg:rgba(217,83,79,.12);--ok:#3ecf8e;
  /* nur für diesen Entwurf: Akzent als Schriftfarbe (hell dunkler, wie textAccent in stage-gate.js) */
  --atxt:#38c6e0;--amber:#f6c177;
  --mono:"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --bg:#eef1f5;--panel:#ffffff;--panel2:#f3f5f9;--line:#d3d8e0;--line2:#c2cad6;
  --txt:#1b2430;--muted:#5b6675;--btnhover:#e7ebf2;--accent2:#12a769;
  --sel:#d6f2f8;--card:rgba(15,23,42,.03);--track:rgba(15,23,42,.10);--thumb-bg:#e9edf3;
  --warn:#a86a00;--warn-bg:rgba(245,158,11,.14);--err:#b8322e;--err-bg:rgba(217,83,79,.10);--ok:#0d7a4e;
  --atxt:#0a7186;--akzent-schrift:#0a7186;--amber:#8a5a00;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);font-size:13px;line-height:1.45}
body{overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:8px;padding:6px 11px;font-size:13px;transition:border-color .12s,background .12s}
button:hover{border-color:var(--accent);background:var(--btnhover)}
button.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 1px 8px rgba(56,198,224,.18)}
button.pri:hover{filter:brightness(1.08)}
button.chip{padding:5px 9px;font-size:12px}
button.leer{background:transparent;border-color:transparent;color:var(--atxt);padding:4px 6px}
button.leer:hover{background:var(--btnhover)}
button.gefahr:hover{background:#e5484d;border-color:#e5484d;color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root[data-theme="light"] :focus-visible{outline-color:#38c6e0}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],select{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:8px;padding:6px 9px;font-size:13px;min-width:0}
input:focus,select:focus{border-color:var(--accent)}
h2,h3,h4,p{margin:0}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.atxt{color:var(--atxt)}

/* ── Leiste des Entwurfs ─────────────────────────── */
.leiste{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 12px;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap}
.leiste h1{font-size:14px;margin:0;font-weight:600;white-space:nowrap}
.leiste h1 i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent2);margin-right:8px}
.leiste nav{display:flex;gap:4px;flex-wrap:wrap;flex:1 1 420px}
.leiste nav button{padding:5px 9px;font-size:12px}
.leiste nav button[aria-current=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:2px;gap:2px}
.seg button{border:0;background:transparent;padding:4px 10px;font-size:12px;border-radius:7px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:700}
.massinfo{font-size:11px;color:var(--muted);font-family:var(--mono)}

.buehne{padding:14px 0 60px;display:flex;justify-content:center}
.rahmen{width:1440px;flex:none;container-type:inline-size;container-name:r;background:var(--bg);outline:1px solid var(--line2);position:relative}
.ansicht{display:none;padding:18px}
.ansicht.an{display:block}
.vkopf{display:flex;gap:10px 22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.vkopf h2{font-size:20px;font-weight:650;letter-spacing:-.2px;flex:0 0 auto;max-width:100%}
.vkopf h2 small{display:block;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:2px}
.marken{display:grid;gap:5px;flex:1 1 380px;min-width:0}
.marke{display:flex;gap:8px;align-items:baseline;font-size:12px;color:var(--muted)}
.marke b{flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid;min-width:62px;text-align:center}
.marke.neu b{color:var(--atxt);border-color:var(--atxt);background:var(--sel)}
.marke.heute b{color:var(--muted);border-color:var(--line2);background:var(--panel2)}
.marke.weg b{color:var(--err);border-color:var(--err);background:var(--err-bg)}
.marke.spaeter b{color:var(--amber);border-color:var(--amber);background:var(--warn-bg)}

/* Varianten nebeneinander */
.varianten{display:grid;gap:14px;align-items:start}
.v3{grid-template-columns:repeat(3,1fr)} .v21{grid-template-columns:2.3fr 1fr}
.var{border:1px dashed var(--line2);border-radius:12px;padding:12px;min-width:0}
.var>header{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.var>header .bst{width:24px;height:24px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.var>header strong{font-size:13px}
.var>header em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--on-accent);background:var(--accent2);border-radius:999px;padding:1px 8px}
.var>p{font-size:12px;color:var(--muted);margin-top:10px}
.var.empf{border-style:solid;border-color:var(--accent2)}

.karte{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}
.karte h3{font-size:14px;font-weight:650;margin-bottom:4px}
.karte>p.muted{font-size:12px;margin-bottom:10px}
.dock-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.zeile{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feld{display:grid;gap:4px;font-size:11px;color:var(--muted);min-width:0}
.feld input,.feld select{width:100%}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pille{font-size:10.5px;border:1px solid var(--line2);border-radius:999px;padding:1px 8px;color:var(--muted);background:var(--panel2);white-space:nowrap}
.pille.ok{color:var(--ok);border-color:var(--ok)} .pille.warn{color:var(--amber);border-color:var(--amber)} .pille.err{color:var(--err);border-color:var(--err)}
.balken{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.balken i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* Schalter */
.sw{flex:none;width:38px;height:22px;border-radius:999px;padding:0;border:1px solid var(--line2);background:var(--panel2);position:relative}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .14s}
.sw[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.sw[aria-checked=true]::after{transform:translateX(16px);background:var(--on-accent)}

/* ── 1 Anmeldung (Werte aus auth-server/public/login.html Zeile 8–30) ── */
.login{--lbg:#0a0c10;--lcard:#10131a;border-radius:10px;padding:34px 16px;display:grid;place-items:center;
  background:radial-gradient(520px 300px at 50% -8%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%),var(--lbg)}
:root[data-theme="light"] .login{--lbg:#eef1f5;--lcard:#fff}
.lk{width:100%;max-width:380px;background:var(--lcard);border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.lk .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px}
.lk .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.lk .brand .logo{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:800}
.lk .sub{color:var(--muted);font-size:12.5px;margin:4px 0 8px}
.lk label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.lk input{width:100%;height:40px;padding:0 12px;border-radius:9px;font-size:14px}
.lk .gross{width:100%;height:42px;margin-top:18px;border-radius:10px;font-size:14px}
.lk .ms{width:100%;height:42px;margin-top:10px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px}
.lk .ms i{display:grid;grid-template-columns:8px 8px;gap:2px}
.lk .ms i b{width:8px;height:8px;display:block}
.lk .hint{margin-top:14px;color:var(--muted);font-size:11.5px;text-align:center}
.lk .oder{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin-top:16px}
.lk .oder::before,.lk .oder::after{content:"";flex:1;height:1px;background:var(--line)}
.lk .code{letter-spacing:.42em;font-family:var(--mono);font-size:20px;text-align:center}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;font-family:var(--mono);font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-top:6px}
.qr{width:132px;height:132px;background:#fff;border-radius:8px;padding:8px;flex:none}
.qr svg{display:block;width:100%;height:100%}

/* ── 2 Startseite ── */
.kopfzeile{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.kopfzeile .firma{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;margin-right:auto;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:800;border:2px solid var(--line);padding:0;flex:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pk{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;text-align:left;display:flex;flex-direction:column;min-width:0}
.pk:hover{border-color:var(--accent)}
.pk .bild{background:var(--thumb-bg);display:grid;place-items:center;aspect-ratio:16/10;padding:8px;position:relative}
.pk .bild .vs.h,.pk .bild .vs.e{position:absolute;top:8px;bottom:8px;height:auto;left:50%;transform:translateX(-50%)}
.pk .inf{padding:9px 11px;display:grid;gap:3px}
.pk .inf b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk .inf span{font-size:11.5px;color:var(--muted)}
.neu-tile{border:1px dashed var(--line2);background:transparent;border-radius:10px;display:grid;place-items:center;text-align:center;gap:6px;padding:18px;min-height:150px;font-size:13px}

/* Vorschaubilder (gezeichnet) */
.vs{container-type:inline-size;width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;display:block;font-family:Georgia,"Times New Roman",serif}
.vs.h{aspect-ratio:9/16;width:auto;height:100%;max-height:100%}
.vs.e{aspect-ratio:1;width:auto;height:100%}
.vs .i{position:absolute;inset:0;padding:6cqw;display:flex;flex-direction:column;gap:2.4cqw}
.vs .t{font-size:8cqw;font-weight:700;line-height:1.05}
.vs.h .t{font-size:13cqw}
.vs .u{font-size:3.6cqw;opacity:.8;font-family:-apple-system,"Segoe UI",sans-serif}
.vs.h .u{font-size:6cqw}
.vs .r{display:flex;justify-content:space-between;gap:3cqw;font-size:4cqw;border-bottom:1px solid;border-color:color-mix(in srgb,currentColor 25%,transparent);padding-bottom:1cqw;font-family:-apple-system,"Segoe UI",sans-serif}
.vs.h .r{font-size:6.4cqw}
.vs .r b{font-weight:700}
.vs .bd{align-self:flex-start;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:5cqw;padding:1.2cqw 3cqw;border-radius:1.4cqw}
.vs.h .bd{font-size:8cqw}
.vs .lauf{position:absolute;left:0;right:0;bottom:0;font-family:-apple-system,"Segoe UI",sans-serif;font-size:3cqw;padding:1.4cqw 4cqw;white-space:nowrap;overflow:hidden}
.vs.h .lauf{font-size:4.6cqw}

/* ── 3 Editor (Aufbau kern/stage-builder.html, Bild belege/2000-probe/02-header-angelegt.png) ── */
.ed{background:var(--bg);border:1px solid var(--line2);border-radius:10px;overflow:hidden;position:relative;height:880px;display:flex;flex-direction:column}
.ed-kopf{display:flex;align-items:center;gap:8px 12px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ed-kopf .marke-ed{font-size:15px;font-weight:600;white-space:nowrap;line-height:1.2}
.ed-kopf .marke-ed i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent2);margin-right:8px}
.ed-kopf .marke-ed small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-left:17px}
.gr{display:flex;align-items:center;gap:6px}
.trenn{width:1px;height:24px;background:var(--line);margin:0 2px}
.num{width:58px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:5px 7px;font-size:13px}
.ed-kopf .lbl{font-size:11px;color:var(--muted);display:grid;gap:3px}
.umbruch{flex-basis:100%;height:0}
.ed-rumpf{flex:1;display:grid;grid-template-columns:318px 1fr;min-height:0}
.ed-links{background:var(--panel);border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.lh{padding:11px 14px;border-bottom:1px solid var(--line)}
.lh .z{font-size:10px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;letter-spacing:0}
.lh .hin{margin-left:auto;font-size:10px;font-weight:400;letter-spacing:.06em}
.ebenen{padding:6px 8px;display:grid;gap:3px;border-bottom:1px solid var(--line)}
.ebene{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;font-size:12px;border-left:3px solid}
.ebene.sel{background:var(--sel)}
.ebene span{margin-left:auto;font-size:10px;color:var(--muted);font-family:var(--mono)}
.mp-mini{padding:8px 12px 10px;border-bottom:1px solid var(--line);display:grid;gap:7px}
.mp-mini .th{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mp-mini .th i{aspect-ratio:1;border-radius:6px;background:var(--thumb-bg);border:1px solid var(--line)}
.props{padding:10px 12px 62px;display:grid;gap:7px;overflow:auto;min-height:0}
.pg{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:8px}
.pg .fest{margin-left:auto;font-size:9.5px;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--line2);border-radius:5px;padding:1px 6px;font-weight:700}
.pg-offen{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;display:grid;gap:7px}
.ed-rechts{display:flex;flex-direction:column;min-width:0;min-height:0}
.wz{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg);white-space:nowrap;overflow:hidden}
.wz .tip{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;margin-left:6px}
.flaeche{flex:1;min-height:0;display:grid;place-items:center;padding:18px;background:var(--bg)}
.stage{container-type:inline-size;aspect-ratio:16/9;height:100%;max-width:100%;background:#17120c;position:relative;outline:1px solid #6b5a2a;color:#f6e7d0;overflow:hidden}
.el{position:absolute;border:1px dashed;font-size:1.05cqw}
.el>u{position:absolute;left:0;top:0;text-decoration:none;font-family:var(--mono);font-size:.78cqw;letter-spacing:.06em;background:rgba(0,0,0,.62);color:#fff;padding:.1cqw .5cqw}
.el>s{position:absolute;left:0;bottom:0;text-decoration:none;font-family:var(--mono);font-size:.78cqw;background:rgba(0,0,0,.62);color:#fff;padding:.1cqw .5cqw}
.el.sel{border:2px solid #fff;box-shadow:0 0 0 1px var(--accent)}
.docks{border-top:1px solid var(--line);background:var(--panel)}
.dock{display:flex;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid var(--line);min-height:30px}
.dock:last-child{border-bottom:0}
.dock .rechts{margin-left:auto;display:flex;gap:6px;align-items:center}
.dock .rechts button{padding:3px 9px;font-size:11.5px}
.popup{position:absolute;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.55);padding:10px}
.elmenu{top:54px;left:520px;width:560px}
.elmenu .typen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.elmenu .typen button{font-size:12px;padding:5px 10px}
.kmenu{left:12px;bottom:62px;width:270px;padding:8px}
.kmenu .kopf{display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.kmenu button.mi{display:flex;width:100%;text-align:left;background:transparent;border:0;font-weight:700;font-size:13.5px;padding:10px 12px;border-radius:10px;gap:10px;align-items:center}
.kmenu button.mi:hover{background:var(--btnhover)}
.schleier{position:absolute;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;z-index:30;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(700px,100%);padding:18px;display:grid;gap:11px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal h3{font-size:15px;font-weight:700}
.modal .akt{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.codebox{background:var(--thumb-bg);border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:11.5px;color:var(--muted);height:92px;overflow:hidden}
.ed-avatar{position:absolute;left:14px;bottom:14px;z-index:15;width:38px;height:38px}
.ed-mobil{display:none}
.ausschnitte{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.mini{zoom:.74;border:1px solid var(--line2);border-radius:10px;overflow:hidden;pointer-events:none}

/* ── 4 Galerie ── */
.gal-kopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gal-kopf h3{font-size:19px;font-weight:700}
.gal-kopf input{flex:1 1 220px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:8px 12px;color:var(--muted);font-size:13px}
.tabs button[aria-selected=true]{color:var(--txt);border-bottom-color:var(--accent);font-weight:700}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.tchip{font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);white-space:nowrap}
.tchip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tk{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:0;text-align:left;display:flex;flex-direction:column;min-width:0}
.tk:hover{border-color:var(--accent);transform:translateY(-2px)}
.tk .bild{background:var(--thumb-bg);height:190px;display:grid;place-items:center;overflow:hidden}
.tk .bild.hk{padding:8px}
.tk .inf{padding:10px 12px;display:grid;gap:4px}
.tk .inf b{font-size:14px}
.tk .inf .c{font-size:12px;color:var(--atxt)}
.detail{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:20px;align-items:start}
.detail .gross{background:var(--thumb-bg);border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;height:520px;overflow:hidden;padding:0}

/* ── 5 Medienpool ── */
.pool{display:grid;grid-template-columns:260px 1fr;gap:14px;align-items:start}
.baum{display:grid;gap:2px}
.baum button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:transparent;border:0;padding:6px 8px;border-radius:7px;font-size:12.5px}
.baum button:hover{background:var(--btnhover)}
.baum button.sel{background:var(--sel);font-weight:700}
.baum button span{margin-left:auto;font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.baum .e1{padding-left:22px} .baum .e2{padding-left:38px} .baum .e3{padding-left:54px}
.baum .stufe{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 8px 3px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.mk{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0}
.mk .bild{aspect-ratio:4/3;background:var(--thumb-bg);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;position:relative}
.mk .bild .art{position:absolute;left:6px;top:6px}
.mk .inf{padding:8px 10px;display:grid;gap:4px}
.mk .inf b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgrid.liste{grid-template-columns:1fr;gap:0}
.mgrid.liste .mk{display:flex;align-items:center;border-radius:0;border-width:0 0 1px;background:transparent}
.mgrid.liste .mk .bild{width:52px;aspect-ratio:1;flex:none;font-size:9px}
.mgrid.liste .mk .bild .art{display:none}
.mgrid.liste .mk .inf{flex:1;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.mgrid.liste .mk .inf b{flex:1 1 160px}

/* ── 6 Super-Admin ── */
.adm{display:grid;grid-template-columns:270px 1fr;gap:14px;align-items:start}
.firmen{display:grid;gap:6px}
.firmen button{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;text-align:left;padding:9px 10px;align-items:center}
.firmen button.sel{border-color:var(--accent);background:var(--sel)}
.firmen button i{grid-row:span 2;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:800;color:#04222a}
.firmen button small{color:var(--muted);font-size:11px}
.matrixwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.mgruppe{display:grid;gap:0;margin-top:8px}
.mrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--line)}
.mrow b{font-size:12.5px;font-weight:600}
.mrow small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.mrow .vg{font-size:10.5px;color:var(--muted);white-space:nowrap;text-align:right}
#fzahl{flex:1 1 100%}
.etypen{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.urow{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:9px 4px;border-bottom:1px solid var(--line)}
.urow .wer{flex:1 1 200px;min-width:0}
.urow .wer b{display:block;font-size:13px}
.urow .wer small{color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.prow{display:grid;grid-template-columns:118px 1fr 170px 110px 96px;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:12px;align-items:center}
.prow.k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.banner{background:var(--warn-bg);border:1px solid var(--amber);color:var(--amber);border-radius:9px;padding:8px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:12.5px}
.banner button{margin-left:auto}
.spaeterbox{border:1px dashed var(--amber);border-radius:10px;padding:12px}

/* ── 7 Konto / 8 Ablauf ── */
.konto{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.konto .karte{display:grid;gap:10px}
.srow{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.srow:last-of-type{border-bottom:0}
.srow>div:first-child{flex:1 1 180px;min-width:0}
.srow small{display:block;color:var(--muted);font-size:11.5px}
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.schritt{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.schritt .bild{background:var(--thumb-bg);height:230px;display:grid;place-items:center;padding:16px;border-bottom:1px solid var(--line)}
.schritt .txt{padding:12px 14px;display:grid;gap:4px}
.schritt h3{font-size:14.5px;font-weight:700}
.schritt h3::before{content:counter(s);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;margin-right:8px}
.schritt p{font-size:12.5px;color:var(--muted)}
.mb{background:var(--panel);border:1px solid var(--line2);border-radius:9px;width:100%;max-width:230px;padding:12px;display:grid;gap:7px;font-size:11.5px}
.mb .st{min-height:26px;padding-block:4px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;padding:0 8px;color:var(--muted)}
.mb .kn{height:28px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700}
.datei{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px}
.datei i{width:30px;height:36px;border-radius:5px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:800;flex:none}

/* ── Telefonbreite: gemessen am Rahmen, nicht am Fenster ── */
@container r (max-width:700px){
  .ansicht{padding:12px}
  .vkopf h2{font-size:17px}
  .v3,.v21,.raster2,.pool,.adm,.matrixwrap,.konto,.ablauf,.detail,.ausschnitte,.etypen{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .mgrid{grid-template-columns:1fr 1fr}
  .detail .gross{height:230px}
  .tk .bild{height:180px}
  .lk{padding:22px 18px}
  .login{padding:20px 10px}
  .ed-desk{display:none}
  .ed-mobil{display:block}
  .prow{grid-template-columns:1fr 1fr;gap:2px 10px}
  .prow.k{display:none}
  .prow>:nth-child(2){grid-column:1/-1;grid-row:1;font-weight:600}
  .mrow .vg{width:auto}
  .mrow{grid-template-columns:1fr auto}
  .mrow .vg{grid-column:1;grid-row:2;text-align:left}
  .mrow .sw{grid-row:1/3;grid-column:2}
  .schritt .bild{height:200px}
  button,.tchip{min-height:36px}
  .sw{min-height:0}
  .seg button{min-height:32px}
  .baum button{min-height:38px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Fußzeile „Impressum · Datenschutz“ auf jeder Seite (src/fusszeile.js); die Textspalte der zwei Rechtsseiten steht in recht.css ── */
.rechtfuss{display:flex;justify-content:center;gap:0 10px;flex-wrap:wrap;padding:4px 16px 12px;font-size:12px}
.rechtfuss a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;border-radius:8px}
.rechtfuss a:hover{color:var(--txt);text-decoration:underline}
.rechtfuss a[aria-current=page]{color:var(--txt);font-weight:600}
.lk .rechtfuss{margin:16px -8px -14px;padding:6px 0 0;border-top:1px solid var(--line)}

/* Sprachwahl DE | EN auf den Karten-Seiten (Anmeldung, Neues Passwort, Rechtliches) — oben rechts in der Karte wie im Hub.
   Entwurf docs/entwurf-209-englisch-sprachwahl.html, Szenen 1, 5 und 6. */
.lk{position:relative}
.sprachwahl{position:absolute;top:12px;right:12px;display:inline-flex;gap:2px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.sprachwahl button{border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;font-weight:600;min-width:30px;padding:3px 7px;border-radius:6px}
.sprachwahl button:hover{background:var(--btnhover);color:var(--txt)}
.sprachwahl button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.lk:has(>.sprachwahl) .brand{padding-right:76px;min-width:0}
.rt .rkopf .sprachwahl{position:static}
/* Telefon: jede Sprache trägt 44 × 44 px; 14 px trennen die Flächen (wie Hub U-3). */
@container r (max-width:700px){ .sprachwahl{gap:14px} .sprachwahl button{min-height:44px;min-width:44px} .lk:has(>.sprachwahl) .brand{padding-right:112px;min-height:44px} }