*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden}

/* Kein Hell/Dunkel-Schalter, sondern drei Materialien:
   Chrome (Kopf + Schiene) führt, Papier (Mitte) trägt die Arbeit,
   Terminal (Feed) zeigt, was das Haus verlässt. Der Bereich sagt seine Rolle
   über den Werkstoff — nicht über eine Einstellung.
   Umgesetzt als Token-Scopes: jede Komponente rechnet weiter mit
   --panel/--sunk/--line/--ink und sitzt dadurch auf jedem Grund richtig. */
:root{
  /* ---- Papier: der Arbeitsgrund ----
     Die Grautöne tragen denselben grünen Unterton wie das Chrome: heller
     Werkstoff aus derselben Familie, nicht das neutrale Grau von vorher. */
  --bg:#F7F9F6; --panel:#FFFFFF; --sunk:#EFF2EE; --sunk2:#E5E9E4;
  --line:#E0E5DF; --line2:#C7CEC6;
  --ink:#131714; --ink2:#5C635C; --ink3:#939A93;
  --accent:#0D8B84; --tint:#E0F0EC;
  --ok:#5A8A32; --warn:#B0741A; --violet:#6E4FE0; --rose:#BC5077; --red:#C4483F;

  /* ---- die beiden dunklen Werkstoffe, auch außerhalb ihrer Zone zitierbar ---- */
  --chrome:#161D19; --chrome-deep:#121815;
  --term:#0D1117;

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --sh:0 1px 2px rgba(20,20,15,.04);
  /* one radius scale instead of eleven near-misses */
  --r1:6px; --r2:8px; --r3:10px; --r4:14px;
  --hair:color-mix(in srgb,var(--line) 62%,transparent);
  --wash:color-mix(in srgb,var(--sunk) 55%,transparent);
}

/* ---- Chrome: Kopf und Schiene sind ein L, nicht zwei Leisten ---- */
/* color wird gesetzt, nicht nur das Token: geerbt käme sonst die Tinte des Papiers */
.top,.side{
  color:var(--ink);
  --panel:var(--chrome); --bg:var(--chrome); --sunk:#1E2621; --sunk2:#27322B;
  --line:#27302B; --line2:#3B4841;
  --ink:#EAEFE9; --ink2:#9BA79F; --ink3:#6C7970;
  --accent:#3FD1B8; --tint:color-mix(in srgb,#3FD1B8 15%,transparent);
  --ok:#93C263; --warn:#D9A45C; --violet:#A78BFA; --rose:#E894B0; --red:#E88A80;
  --sh:none;
  --hair:color-mix(in srgb,var(--line) 80%,transparent);
}
.side{--panel:var(--chrome-deep)}

/* ---- Terminal: derselbe Bestand, aber für Parser gesetzt ---- */
.feed{
  color:var(--ink);
  --panel:var(--term); --bg:var(--term); --sunk:#151B23; --sunk2:#1C242E;
  --line:#1F2731; --line2:#2F3A48;
  --ink:#DCE3EC; --ink2:#8B97A6; --ink3:#5C6874;
  --accent:#4FD6C4; --tint:color-mix(in srgb,#4FD6C4 13%,transparent);
  --ok:#93C263; --warn:#E0A458; --violet:#A78BFA; --rose:#E894B0; --red:#E88A80;
  --sh:none;
}

body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
input,textarea{background:none;border:0;outline:none}
::selection{background:color-mix(in srgb,var(--accent) 20%,transparent)}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid transparent;background-clip:padding-box}

.app{height:100dvh;display:grid;grid-template-rows:58px 1fr}

/* ===== top ===== */
.top{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);
  background:var(--panel);position:relative;z-index:50}
.logomark{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--panel);display:grid;place-items:center;flex:none}
.logomark svg{width:16px;height:16px}
/* Wortmarke und Zeichen sind ein Ziel: beides führt zurück auf die Übersicht */
.brand{display:flex;align-items:center;gap:12px}
.brand:hover .logomark{background:var(--accent)}
.top b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.top .sp{flex:1}
.tbtn{padding:6px 12px;border-radius:8px;color:var(--ink2);font-size:12.5px;border:1px solid transparent}
.tbtn:hover{background:var(--sunk);color:var(--ink);border-color:var(--line)}

.proj{display:flex;align-items:center;gap:8px;margin-left:8px;padding:6px 10px 6px 12px;border:1px solid var(--line);
  border-radius:8px;color:var(--ink2);font-size:12px;background:var(--sunk);flex:none;transition:.13s}
.proj:hover{border-color:var(--line2);color:var(--ink)}
.proj .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.proj .chev{font-size:11px;color:var(--ink3);margin-left:1px}
.user{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:20px;border:1px solid transparent;flex:none}
.user:hover{border-color:var(--line);background:var(--sunk)}
.user .avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--panel);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
.user .uname{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}

.main{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:0}

/* ===== collections ===== */
/* only the list scrolls — export/backup stay pinned to the bottom of the rail */
/* die Schiene trägt ihren Grund selbst — sie ist Chrome, nicht Fläche */
.side{background:var(--panel);border-right:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column}
#collections{flex:1;min-height:0;overflow-y:auto;padding:14px 10px}
.stools{display:flex;gap:6px;flex:none;padding:10px;border-top:1px solid var(--line)}
.stools button{flex:1;padding:7px 0;border:1px solid var(--line);border-radius:9px;
  background:var(--sunk);color:var(--ink3);font-size:11.5px;transition:.13s}
.stools button:hover{color:var(--ink);border-color:var(--line2);background:var(--sunk2)}
/* a flat list, not a stack of cards — the sidebar is navigation, not content */
.ccard{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:6px 9px;margin-bottom:1px;
  border:1px solid transparent;border-radius:8px;background:none;transition:.13s}
.ccard:hover{background:var(--sunk)}
.ccard.norows{opacity:.55}
.ccard.norows:hover,.ccard.norows.on{opacity:1}
.ccard.on{background:var(--tint);color:var(--accent)}
.tile{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--sunk);border:1px solid var(--line);font-size:14px;color:var(--ink2)}
.ccard .tile{width:20px;height:20px;border:0;background:none;font-size:13px;color:var(--ink3)}
.ccard.on .tile{color:var(--accent)}
.ccard .nm{flex:1;font-weight:500;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard.on .nm{font-weight:600;color:var(--ink)}
.ccard .n{font-family:var(--mono);font-size:11px;color:var(--ink3)}
/* ===== records ===== */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.pad{padding:26px 30px 46px;max-width:1180px;width:100%}
.chead{display:flex;align-items:center;gap:13px;margin-bottom:22px}
/* der Schalter gehört zum Namen: öffentlich ist eine Eigenschaft der Sammlung */
.chead h1{margin:0;font-size:23px;font-weight:600;letter-spacing:-.025em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chead h1 .pubtog{font-size:11.5px;font-weight:400;letter-spacing:0}
.chead .sub{color:var(--ink3);font-size:12px;font-family:var(--mono);margin-top:2px}

.card{border:1px solid var(--line);border-radius:var(--r4);background:var(--panel);box-shadow:var(--sh);overflow:hidden}

/* ===== Übersicht ===== */
.home{display:flex;flex-direction:column;gap:16px}
.hsec h2{margin:0;font-size:12.5px;font-weight:600;padding:12px 16px;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.hsec h2 span{font-weight:400;font-size:11.5px;color:var(--ink3);font-family:var(--mono)}
.qlist{display:flex;flex-wrap:wrap}
.qitem{display:flex;align-items:center;gap:9px;text-align:left;padding:11px 16px;
  min-width:270px;flex:1;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.qitem:hover{background:var(--wash)}
.qitem b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.qitem .ql{flex:1;color:var(--ink2);font-size:12.5px}
.qitem .qc{font-size:11px;color:var(--ink3);font-family:var(--mono);white-space:nowrap}
.hrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 16px;
  border-bottom:1px solid var(--hair)}
.hrow:last-child{border-bottom:0}
.hrow:hover{background:var(--wash)}
.hrow .hn{flex:1;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .hcol,.hrow .hd{font-size:11px;color:var(--ink3);white-space:nowrap}
.grow{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:12px;color:var(--ink2);
  border-top:1px solid var(--hair)}
.grow .mono{margin-left:auto;color:var(--ink3);white-space:nowrap}
.hstats{display:flex;flex-wrap:wrap;background:var(--sunk)}
.hstat{flex:1;min-width:96px;padding:13px 16px;border-right:1px solid var(--hair)}
.hstat:last-child{border-right:0}
.hstat b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em}
.hstat span{font-size:11.5px;color:var(--ink3)}
/* die Zeile führt in die Sammlung — kein Zellenraster, also auch kein Zellen-Hover */
tbody tr[data-col]{cursor:pointer}
tbody tr.norows{opacity:.5}
tbody tr.norows:hover{opacity:1}
.hc{display:flex;align-items:center;gap:9px;padding:9px 14px;white-space:nowrap}
td.num .hc{justify-content:flex-end;font-family:var(--mono);font-size:12.5px}
/* Die Tabelle ist die Tabellenkalkulation: dichte Zeilen, klebender Kopf, Zeilennummern */
.tblwrap{overflow-x:auto}
.tblwrap td[data-f]{border-right:1px solid var(--hair)}
.tblwrap thead th{position:sticky;top:0;z-index:2}
.rn{position:absolute;font-size:10px;font-family:var(--mono);color:var(--ink3)}
td.sel{position:relative}
td.sel .selrow{opacity:0}
tr:hover .rn,tr.active .rn{opacity:0}
table{border-collapse:separate;border-spacing:0;min-width:100%}
thead th{background:var(--sunk);text-align:left;font-weight:500;color:var(--ink2);padding:0;
  border-bottom:1px solid var(--line);white-space:nowrap}
thead th .h{display:flex;align-items:center;gap:8px;padding:9px 14px;width:100%;color:inherit}
thead th .h:hover{color:var(--ink);background:var(--sunk2)}
thead th.off .h{color:var(--ink3)}
thead th.addcol{width:46px}
thead th.addcol .h{justify-content:center;font-size:15px;color:var(--ink3);padding:11px 0}
thead th.addcol .h:hover{color:var(--accent)}
.ft{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;font-family:var(--mono);
  font-size:11px;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent)}
th.off .ft{background:transparent;border-style:dashed}

/* hairline dividers keep a long table calm; the row tint carries the hover */
tbody td{padding:0;border-bottom:1px solid var(--hair);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--wash)}
tbody tr.active td{background:color-mix(in srgb,var(--tint) 70%,transparent)}
tbody tr.active td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
td .c{padding:5px 12px;min-height:31px;display:flex;align-items:center;cursor:text;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;
  transition:box-shadow .1s}
td .c:hover{box-shadow:inset 0 0 0 1px var(--line2)}
td.num .c{justify-content:flex-end;font-family:var(--mono);font-size:12.5px}
td.act{width:46px;text-align:center}
td.sel{width:30px;text-align:center}
thead th.selcol{width:30px}
.selrow{width:22px;height:22px;border-radius:50%;color:var(--ink3);font-size:12px;opacity:.45;transition:.12s;
  display:inline-flex;align-items:center;justify-content:center}
tr:hover .selrow{opacity:1}
.selrow.on{opacity:1;color:var(--accent)}
.rowdel{opacity:0;color:var(--ink3);width:26px;height:26px;border-radius:7px;transition:.12s}
tr:hover .rowdel{opacity:1}
.rowdel:hover{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.cellinput{width:100%;padding:9px 14px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r2)}
.addrow{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;color:var(--ink3);
  width:100%;font-size:12.5px;border-top:1px solid var(--line);background:var(--sunk)}
.addrow:hover{color:var(--accent);background:var(--sunk2)}

/* a filled chip alone carries the state — border plus dot plus colour was three signals for one fact */
.pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--r1);font-size:11.5px;
  border:0;color:var(--ink2);background:var(--sunk2)}
.pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.sw{width:30px;height:17px;border-radius:20px;background:var(--line2);position:relative;transition:.15s;flex:none}
.sw i{position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:#fff;transition:.15s;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.sw.on{background:var(--ok)}.sw.on i{left:15.5px}
.thumb{width:30px;height:24px;border-radius:var(--r1);background:var(--sunk);border:1px solid var(--line);
  display:grid;place-items:center;font-size:10px;color:var(--ink3);flex:none}
.mono{font-family:var(--mono);font-size:12px}
.dash{color:var(--ink3)}
.empty{padding:52px 16px;text-align:center;color:var(--ink3)}

/* ===== feed ===== */
.feed{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0;
  position:fixed;right:0;top:58px;bottom:0;width:min(520px,100%);z-index:40;
  transform:translateX(101%);visibility:hidden;pointer-events:none;
  transition:transform .22s,visibility 0s linear .22s;
  box-shadow:-18px 0 40px -28px rgba(0,0,0,.4)}
.app.feed-open .feed{transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.app.feed-open #feedBtn{background:var(--tint);border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--accent)}
.fpad{padding:20px 18px 14px;display:flex;flex-direction:column;gap:10px}
/* Adresse, Methode und Format sind eine Sache — deshalb ein Kasten, nicht drei */
.epbox{border:1px solid var(--line);border-radius:11px;background:var(--sunk);overflow:hidden}
.ep{display:flex;align-items:center;gap:9px;padding:9px 11px;font-family:var(--mono);font-size:11.5px}
.ep .u{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep button{color:var(--ink3);font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--line)}
.ep button:hover{color:var(--ink);background:var(--panel)}
.meth{display:flex;gap:2px;flex:none;padding:2px;border-radius:7px;background:var(--panel);
  border:1px solid var(--line)}
.meth button{font-size:10px;font-weight:600;font-family:var(--mono);padding:2px 6px;border-radius:5px;
  color:var(--ink3);transition:.13s}
.meth button:hover{color:var(--ink)}
.meth button.on.get{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.meth button.on.post{color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,transparent)}
.fmt{display:flex;gap:3px;padding:5px;border-top:1px solid var(--line)}
.fmt:empty{display:none}
.fmt button{flex:1;padding:4px 0;border-radius:6px;font-size:10.5px;color:var(--ink3);font-family:var(--mono);white-space:nowrap}
.fmt button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
/* jeder Hinweis verschwindet für sich; der Abstand kommt allein aus .fpad */
.selnote{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  border-radius:9px;color:var(--ink2);font-size:11.5px}
.selnote:empty{display:none}
.selnote button{color:var(--accent);font-size:11px;padding:2px 6px;border-radius:6px}
.selnote button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.code{flex:1;overflow:auto;margin:0;padding:4px 18px 24px;font-family:var(--mono);font-size:11.5px;line-height:1.7;
  white-space:pre;color:var(--ink2)}
.k{color:var(--ink3)}.s{color:var(--accent)}.n{color:var(--warn)}.b{color:var(--violet)}

/* ===== popover ===== */
.pop{position:fixed;z-index:60;min-width:262px;background:var(--panel);border:1px solid var(--line2);
  border-radius:14px;box-shadow:0 18px 46px -16px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.06);padding:14px;display:none}
.pop.open{display:block;animation:p .13s ease}
@keyframes p{from{opacity:0;transform:translateY(-5px)}}
.pop .avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--panel);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;flex:none}
.pop .pl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 9px}
.pop input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--sunk)}
.pop input[type=text]:focus{border-color:var(--accent);background:var(--panel)}
.fmeta{display:flex;align-items:center;gap:11px;margin-top:11px;padding:9px 11px;border-radius:10px;
  background:var(--sunk);border:1px solid var(--line);font-size:12.5px}
.fmeta .ft{width:22px;height:22px;border-radius:7px;font-size:10px;flex:none}
.fmeta b{color:var(--ink);font-weight:500}
.fmeta .d{display:block;font-size:11px;color:var(--ink3);font-family:var(--mono)}
.sugs{margin-top:9px;max-height:268px;overflow-y:auto}
.sugs button{display:flex;align-items:center;gap:9px;font-size:12.5px}
.sugs .ft{width:20px;height:20px;border-radius:6px;font-size:10px;flex:none}
.sugs .sgl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop hr{border:0;border-top:1px solid var(--line);margin:13px -14px}
.togrow{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;color:var(--ink2);font-size:12.5px;text-align:left;background:var(--sunk)}
.togrow .d{font-size:11px;color:var(--ink3);display:block}
.togrow b{color:var(--ink);font-weight:500}
.togrow:hover{border-color:var(--line2)}
.del{width:100%;text-align:left;padding:8px 11px;color:var(--red);font-size:12.5px;border-radius:9px}
.del:hover{background:color-mix(in srgb,var(--red) 9%,transparent)}
.opts{display:flex;flex-direction:column;gap:3px}
.opts button{text-align:left;padding:8px 11px;border-radius:9px;color:var(--ink2);border:1px solid transparent}
.opts button:hover{background:var(--sunk);color:var(--ink);border-color:var(--line)}
.pop textarea{width:100%;min-height:130px;padding:10px 11px;border:1px solid var(--line2);border-radius:10px;
  background:var(--sunk);resize:vertical;line-height:1.6}
.pop textarea:focus{border-color:var(--accent);background:var(--panel)}

/* ===== fake login ===== */
/* der Einstieg zeigt das Chrome, bevor das Papier kommt */
.login{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#1E2A24 0%,var(--chrome-deep) 62%,#0C110E 100%);
  transition:opacity .28s}
.login.out{opacity:0;pointer-events:none}
.lcard{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(340px,calc(100% - 48px));
  padding:38px 30px 30px;background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.25);text-align:center}
.logomark.big{width:46px;height:46px;border-radius:14px}
.logomark.big svg{width:24px;height:24px}
.lname{font-size:19px;letter-spacing:-.02em}
.ldemo{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.ldemo b{color:var(--ink);font-weight:500}
.laccount{display:flex;align-items:center;gap:10px;width:100%;padding:10px 13px;margin-top:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--sunk);font-size:13px;font-weight:500}
.laccount .avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--panel);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
/* die einzige eindeutig primäre Handlung im ganzen Prototyp — sie trägt den Akzent */
.lbtn{width:100%;padding:11px 0;border-radius:12px;color:#fff;
  background:color-mix(in srgb,var(--accent) 88%,#000);
  font-size:13.5px;font-weight:500}
.lbtn:hover{opacity:.88}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;padding:11px 17px;border-radius:12px;
  background:var(--ink);color:var(--bg);font-size:12.5px;box-shadow:0 14px 36px -12px rgba(0,0,0,.45);animation:p .16s ease}

@media (max-width:820px){
  .main{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:58px;bottom:0;width:min(250px,82vw);background:var(--panel);z-index:40;
    transform:translateX(-101%);transition:transform .22s}
  .app.side-open .side{transform:none}
  /* tap-outside scrim — no extra markup needed */
  .app.side-open .center::before{content:"";position:fixed;inset:58px 0 0;z-index:39;
    background:rgba(20,20,15,.34);animation:p .16s ease}
  .pad{padding:20px 16px 40px}
}
@media (min-width:821px){.mob{display:none!important}}
@media (max-width:640px){
  .top{gap:8px;padding:0 12px}
  .top b{display:none}
  .proj{margin-left:0;padding:6px 8px}
  .proj .label{display:none}
  .user{padding:4px}
  .user .uname{display:none}
  .tbtn{padding:6px 9px}
  .pad{padding:16px 13px 40px}
  /* tools drop to their own row, so the title and its meta line get the full width */
  .chead{gap:10px 12px;margin-bottom:18px;flex-wrap:wrap}
  .chead .ctitle{flex:1 1 auto}
  .chead .sub{white-space:normal;line-height:1.6;margin-top:3px}
  .chead .ctools{flex:1 0 100%;flex-wrap:wrap;order:3}
  .chead .viewsw{margin-left:auto}
  .refs{grid-template-columns:1fr}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
  .mgrid.pick{grid-template-columns:repeat(2,1fr)}
  .rc-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
  .fpad{padding:16px 14px 12px}
  .code{padding:4px 14px 24px}
  .pop{max-width:calc(100vw - 16px);min-width:0}
  /* full-width bar instead of a centred one wider than the screen */
  .savebar{left:12px;right:12px;bottom:14px;padding:9px 10px 9px 13px;white-space:normal;
    transform:translate(0,calc(100% + 34px))}
  .savebar.on{transform:translate(0,0)}
  .sb-t{flex:1;min-width:0}
}
/* ===== relations ===== */
.reftag{margin-left:6px;font-size:10px;color:var(--violet);opacity:.85;
  border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);border-radius:5px;
  padding:0 4px;line-height:15px;display:inline-block;vertical-align:1px}
th.off .reftag{opacity:.45}

.refchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 9px;
  border-radius:var(--r1);font-size:11.5px;border:0;
  background:color-mix(in srgb,var(--violet) 11%,transparent);color:var(--ink)}
.refchip.gone{border:1px dashed var(--line2);background:none;color:var(--ink3);
  font-family:var(--mono);font-size:11px;padding:1px 8px}
/* Verweis aus dem Haus heraus: fremder Bestand, deshalb andere Farbe als eine lokale Relation */
.refchip.ext{background:color-mix(in srgb,var(--accent) 10%,transparent);
  font-family:var(--mono);font-size:11px}
.refchip.ext .rg{color:var(--accent)}
.rg{display:grid;place-items:center;flex:none;font-size:10px;color:var(--violet)}

.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-top:9px}
.refs button{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:9px;font-size:11.5px;
  color:var(--ink2);border:1px solid var(--line);text-align:left;overflow:hidden;white-space:nowrap}
.refs button:hover{background:var(--sunk);color:var(--ink)}
.refs button.on{background:color-mix(in srgb,var(--violet) 10%,transparent);color:var(--ink);
  border-color:color-mix(in srgb,var(--violet) 34%,transparent)}
.pop .pl.sub2{margin:14px 0 0}

#rfq{width:100%;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--sunk);margin-bottom:9px}
#rfl{max-height:216px;overflow-y:auto}
#rfl button{display:flex;align-items:center;gap:8px}
#rfl button.on{background:color-mix(in srgb,var(--violet) 10%,transparent);color:var(--ink)}
.rid{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink3)}
.empty.sm{padding:18px 8px;font-size:11.5px}

.relnote{display:flex;flex-direction:column;gap:8px}
.relnote:empty{display:none}
.togrow.sm{padding:7px 9px;gap:9px;font-size:11.5px}
.togrow.sm .d{font-size:10.5px}
.relflat{font-size:11px;color:var(--ink3);padding:2px 2px 0;line-height:1.45}

/* ===== center toolbar ===== */
.chead .ctitle{flex:1;min-width:0}
.ctools{display:flex;align-items:center;gap:8px;flex:none}
.viewsw{display:flex;gap:3px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px}
.viewsw button{padding:5px 9px;border-radius:7px;font-size:11.5px;color:var(--ink3);white-space:nowrap}
/* vier Ansichten passen nicht überall nebeneinander — dann bleibt das Zeichen */
@media (max-width:1180px){.viewsw button{font-size:0;padding:5px 8px}
  .viewsw button::first-letter{font-size:12.5px}}
.viewsw button:hover{color:var(--ink)}
.viewsw button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
.tbtn.addf{border-color:var(--line);background:var(--sunk)}

/* ===== record cards ===== */
.cards{display:flex;flex-direction:column;gap:8px}
.rcard{border:1px solid var(--line);border-radius:var(--r4);background:var(--panel);
  overflow:hidden;transition:border-color .13s,box-shadow .13s}
.rcard:hover{border-color:var(--line2);box-shadow:var(--sh)}
.rcard.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
/* header strip reads as a caption, not a second window chrome */
.rc-bar{display:flex;align-items:center;gap:8px;padding:7px 10px 0 8px;background:none;border:0;min-height:26px}
.rc-id{flex:1;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.02em;
  opacity:.7;transition:.13s}
.rcard:hover .rc-id,.rcard.active .rc-id{opacity:1}
.rcard .selrow,.rcard .rowdel{opacity:0}
.rcard:hover .selrow,.rcard:hover .rowdel,.rcard.active .selrow{opacity:1}
.rc-body{display:flex;gap:18px;padding:4px 18px 18px}
.rc-main{min-width:0;flex:1}

.rf{position:relative;border-radius:var(--r2);min-width:0}
/* label is a caption, not a badge: no case change, no box around the type glyph */
/* inline-flex statt flex: der Beleg steht neben der Beschriftung, nicht darunter */
.rf .rfl{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  color:var(--ink3);padding:0 0 1px;max-width:100%;text-align:left;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf .rfl:hover{color:var(--ink2)}
.rf .rfl .ft{width:auto;height:auto;border:0;background:none;border-radius:0;font-size:10px;
  color:var(--ink3);transition:color .13s}
.rf:hover .rfl .ft,.rf .rfl:hover .ft{color:var(--c)}
.rf .c{display:flex;align-items:center;gap:8px;min-height:24px;padding:2px 6px;margin:0 -6px;cursor:text;
  border-radius:var(--r1);overflow:hidden;text-overflow:ellipsis;transition:background .1s}
.rf .c:hover{background:var(--wash);box-shadow:none}
.rf .cellinput{padding:2px 6px;border-radius:var(--r1);box-shadow:inset 0 0 0 2px var(--accent);background:var(--panel)}
.rf.off .rfl{color:var(--ink3);opacity:.6}
.rf.off .c{color:var(--ink2)}

.rf.h{margin-bottom:2px}
.rf.h .rfl{display:none}
.rf.h .c{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);min-height:28px}
.rf.p{margin-bottom:14px}
.rf.p .rfl{display:none}
.rf.p .c{display:block;color:var(--ink2);font-size:12px;line-height:1.6;white-space:normal;
  max-height:60px;overflow:hidden}
/* fixed column count, so every card in the stack aligns to the same grid */
.rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px;
  padding-top:14px;border-top:1px solid var(--hair)}
@media (max-width:1080px){.rc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rc-grid{grid-template-columns:minmax(0,1fr);gap:14px}}
.rc-grid:empty{display:none}

.rc-img{flex:none;width:132px}
.rc-img .c{display:block;padding:0;margin:0}
.rc-img .c:hover{box-shadow:none}
.rc-img .c:hover .thumb{border-color:var(--line2)}
.thumb.big{width:132px;height:96px;border-radius:var(--r3);font-size:19px}
.rc-img .imgname,.rc-img .dash{display:block;font-size:10.5px;color:var(--ink3);margin-top:5px;
  font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb.empty2{border-style:dashed;color:var(--line2);font-size:16px}

.newcard{display:flex;align-items:center;justify-content:center;gap:9px;min-height:0;
  border:1px dashed var(--line2);border-radius:var(--r4);color:var(--ink3);font-size:12.5px;background:none;
  transition:.13s;padding:15px}
.newcard span{font-size:17px;line-height:1}
.newcard:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* ===== public or private ===== */
.ldot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--ok) 18%,transparent)}
.ldot.off{background:var(--line2);box-shadow:none}
.ccard .ldot{margin-left:-3px}

.pubtog{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 8px;border:1px solid var(--line);
  border-radius:10px;background:var(--sunk);color:var(--ink3);font-size:11.5px;white-space:nowrap;transition:.13s}
.pubtog:hover{border-color:var(--line2)}
.pubtog.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
.phint{margin:9px 2px 0;font-size:11px;line-height:1.5;color:var(--ink3)}
.wtxt{color:var(--ink3)}

/* ===== spine: Adresse, Lebenszyklus, Sprache — unsere Spalten, nicht die des Profils ===== */
.spine{display:inline-flex;align-items:center;gap:6px;max-width:190px;padding:2px 8px;border-radius:20px;
  border:1px dashed var(--line2);background:var(--sunk);color:var(--ink3);
  font-family:var(--mono);font-size:10.5px;flex:none;transition:.13s}
.spine:hover{border-style:solid;border-color:var(--line2);color:var(--ink)}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.ssl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
th.spinecol{font-family:var(--mono);font-size:10.5px;color:var(--ink3);padding:9px 14px;
  border-right:1px solid var(--hair)}
td.spinecell{padding:0 10px;border-right:1px solid var(--hair)}
.opts.row{display:flex;flex-wrap:wrap;gap:4px}
.opts.row button{width:auto;padding:4px 9px;border:1px solid var(--line);border-radius:20px;font-size:11px}
.opts.row button.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}

/* ===== body + geordnete Relationen ===== */
.mdcell{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--ink2)}
.mdg{color:var(--ink3);font-family:var(--mono)}
.mdn{font-family:var(--mono);font-size:10px;color:var(--ink3);flex:none}
textarea.md{min-height:190px;font-family:var(--mono);font-size:11.5px;line-height:1.6}
.chips{display:inline-flex;align-items:center;gap:5px;min-width:0}
.chips .more{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.rslist{display:flex;flex-direction:column;gap:3px;margin-top:8px;max-height:200px;overflow-y:auto}
.rsi{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;background:var(--sunk);font-size:12px}
.rsi .rsn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsi button{width:20px;height:20px;border-radius:6px;color:var(--ink3);font-size:11px;flex:none}
.rsi button:hover{background:var(--panel);color:var(--ink)}

/* ===== grants: wo ein fremdes System schreiben darf ===== */
.gbadge{margin-left:7px;padding:1px 5px;border-radius:7px;font-size:10px;line-height:1.5;
  color:var(--violet);border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);
  background:color-mix(in srgb,var(--violet) 9%,transparent);vertical-align:middle;transition:.13s}
.gbadge:hover{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 18%,transparent)}
.gdot{width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none;margin-left:-3px;
  box-shadow:0 0 0 2.5px color-mix(in srgb,var(--violet) 18%,transparent)}

/* ===== query: der Feed-Panel verhält sich wie der Endpoint ===== */
.query:empty{display:none}
.qrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.qrow button,.qrow select,.qrow input{padding:3px 10px;border-radius:20px;border:1px solid var(--line);
  background:var(--sunk);color:var(--ink3);font-size:11px;font-family:var(--sans);
  white-space:nowrap;transition:.13s}
.qrow button:hover,.qrow select:hover{border-color:var(--line2);color:var(--ink)}
.qrow button.on,.qrow select.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
/* eigener Pfeil statt System-Chrome, damit der Filter neben den Chips ruhig bleibt */
.qrow select{appearance:none;padding-right:22px;max-width:47%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 51%,calc(100% - 8px) 51%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.qrow select:focus,.qrow input:focus{outline:none;
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.qrow input{flex:1;min-width:96px;color:var(--ink)}
.qn{font-size:11px;color:var(--ink3);font-family:var(--mono);flex:none}
.privnote,.grantnote{padding:7px 10px;border-radius:9px;font-size:11px;line-height:1.5}
.privnote{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.grantnote{color:var(--ink2);border:1px solid color-mix(in srgb,var(--violet) 26%,transparent);
  background:color-mix(in srgb,var(--violet) 8%,transparent)}
.grantnote b{color:var(--violet);font-weight:600}


/* ===== media ===== */
/* placeholder that respects the asset's real aspect ratio */
.thumb.ph{aspect-ratio:var(--r,1.4);height:auto;width:100%;position:relative;
  background:repeating-linear-gradient(135deg,var(--sunk) 0 7px,var(--sunk2) 7px 14px)}
td .thumb.ph,.rf .thumb.ph{width:34px;flex:none}
/* asset-kind badge — Bild / Video / Datei live in one library */
.thumb.ph .mk{position:absolute;left:5px;bottom:4px;display:grid;place-items:center;
  min-width:16px;height:16px;padding:0 3px;border-radius:5px;font-size:9px;line-height:1;
  background:rgba(20,20,15,.66);color:#fff;backdrop-filter:blur(4px)}
.mtile .thumb.ph .mk,.apreview .thumb.ph .mk{left:7px;bottom:7px;min-width:20px;height:20px;font-size:11px;border-radius:6px}
td .thumb.ph .mk,.rf .thumb.ph .mk{left:2px;bottom:2px;min-width:13px;height:13px;font-size:7.5px;border-radius:4px}
.imgcell{display:flex;align-items:center;gap:9px;min-width:0}
.ic-t{display:flex;align-items:center;gap:7px;min-width:0}
.ic-n{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noalt{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:20px;
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,transparent);flex:none;white-space:nowrap}

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px;align-items:start}
.mtile{margin:0;border:1px solid var(--line);border-radius:var(--r4);background:var(--panel);box-shadow:var(--sh);
  overflow:hidden;cursor:pointer;transition:.13s}
.mtile:hover{border-color:var(--line2);transform:translateY(-1px)}
.mtile.active{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mtile .thumb.ph{border:0;border-bottom:1px solid var(--line);border-radius:0}
.mtile figcaption{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.mt-n{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-m{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--ink3)}
.mt-u{color:var(--ok)}
.mt-u.un{color:var(--ink3)}
.mt-a{font-size:11px;color:var(--ink2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.newtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:150px;
  border:1px dashed var(--line2);border-radius:13px;color:var(--ink3);font-size:12.5px;transition:.13s}
.newtile span{font-size:18px;line-height:1}
.newtile:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,transparent)}

.mgrid.pick{grid-template-columns:repeat(3,1fr);gap:7px;max-height:230px;overflow-y:auto;margin-top:9px}
/* Kachel eines gewöhnlichen Datensatzes: Titel und zwei Felder, direkt editierbar */
.mt-h{display:flex;align-items:center;gap:6px;min-width:0}
.mt-h .mt-n{flex:1;min-width:0}
.mtile .selrow,.mtile .rowdel{opacity:0;flex:none}
.mtile:hover .selrow,.mtile:hover .rowdel,.mtile.active .selrow{opacity:1}
.mtile .mt-m [data-f]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text}
.mtile .mt-n [data-f]{cursor:text}

/* ===== timeline ===== */
.tl{padding:4px 0}
.tl-m{padding:14px 14px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink3);border-bottom:1px solid var(--hair)}
.tl-e{display:flex;align-items:center;gap:12px;padding:7px 10px 7px 14px;border-bottom:1px solid var(--hair)}
.tl-e:last-child{border-bottom:0}
.tl-e:hover{background:var(--sunk2)}
.tl-e.active{background:var(--tint)}
.tl-e .rowdel{opacity:0}
.tl-e:hover .rowdel,.tl-e:hover .selrow,.tl-e.active .selrow{opacity:1}
.tl-d{flex:none;width:34px;text-align:center;line-height:1.15;cursor:text}
.tl-d b{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em}
.tl-d span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}

/* ===== list ===== */
.lrow{display:flex;align-items:center;gap:12px;padding:7px 10px 7px 6px;border-bottom:1px solid var(--hair)}
.lrow:last-of-type{border-bottom:0}
.lrow:hover{background:var(--sunk2)}
.lrow.active{background:var(--tint)}
.lrow .rowdel{opacity:0}
.lrow:hover .rowdel,.lrow:hover .selrow,.lrow.active .selrow{opacity:1}
.lt{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text}
.lm{flex:none;max-width:26%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink3);font-size:12px;cursor:text}
@media (max-width:720px){.lm:nth-of-type(n+3){display:none}}
.mgrid.pick button{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column}
.mgrid.pick button:hover{border-color:var(--line2)}
.mgrid.pick button.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}
.mgrid.pick .thumb.ph{border:0;border-radius:0}
.mg-n{padding:4px 6px;font-size:9.5px;font-family:var(--mono);color:var(--ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mfq{width:100%;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--sunk)}
.apreview{display:flex;align-items:center;gap:11px;margin-bottom:11px;font-size:10.5px}
.apreview .thumb.ph{width:64px;flex:none;border-radius:8px}
.apl{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  margin-bottom:9px}
.apl input{display:block;width:100%;margin-top:4px;padding:7px 10px;border:1px solid var(--line2);
  border-radius:9px;background:var(--sunk);font-size:12.5px;letter-spacing:normal;text-transform:none;color:var(--ink)}


/* ===== unsaved changes ===== */
.savebar{position:fixed;left:50%;bottom:26px;z-index:45;display:flex;align-items:center;gap:12px;
  padding:9px 10px 9px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 40px -14px rgba(20,20,15,.3),0 1px 2px rgba(0,0,0,.06);
  font-size:12.5px;white-space:nowrap;
  transform:translate(-50%,calc(100% + 34px));opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .16s,visibility 0s linear .2s}
.savebar.on{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.sb-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 16%,transparent)}
.sb-t{color:var(--ink2)}
.sb-t b{color:var(--ink);font-weight:600}
.sb-revert{color:var(--ink3);padding:5px 9px;border-radius:8px}
.sb-revert:hover{color:var(--ink);background:var(--sunk)}
.sb-save{padding:7px 15px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:500}
.sb-save:hover{opacity:.88}
.savebar.ok .sb-dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 16%,transparent)}
.savebar.ok .sb-revert,.savebar.ok .sb-save{display:none}
body.dirty .toast{bottom:96px}

/* Sprachen am Datensatz: was es gibt, was fehlt */
.tdots{display:inline-flex;gap:3px;flex:none}
.tdot{font-family:var(--mono);font-size:9px;line-height:1;padding:2px 3px;border-radius:3px;
  text-transform:uppercase;letter-spacing:.03em}
.tdot.self{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.tdot.has{color:var(--ink3);background:var(--hair)}
.tdot.none{color:var(--ink3);opacity:.32;border:1px dashed var(--line);padding:1px 2px}

/* Verweis-Picker im Rumpf */
.mdbar{display:flex;gap:6px;margin-top:7px}
.mdbar button{padding:4px 9px;border:1px solid var(--line);border-radius:20px;
  font-size:11px;color:var(--ink2);background:none;cursor:pointer}
.mdbar button:hover{color:var(--ink);border-color:var(--line2)}
#mdp{margin-top:7px}
.mdn.lk{color:var(--accent)}

/* Beleg: das Zeichen neben Typ und Feld führt auf den schema.org-Eintrag.
   Es liegt im Inhalt, nicht in einem Menü — und bleibt still, bis man es sucht. */
.proof{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;flex:none;vertical-align:baseline;
  font-size:10.5px;line-height:1;border-radius:50%;
  color:var(--ink3);opacity:.5;text-decoration:none;transition:opacity .12s,color .12s}
.proof:hover,.proof:focus-visible{opacity:1;color:var(--accent)}
/* Die Eigenschaft gibt es, aber nicht an diesem Typ — der Beleg bleibt, gedämpft. */
.proof.nofit{color:var(--warn);opacity:.65;border:1px dashed currentColor}
.proof.nofit:hover,.proof.nofit:focus-visible{opacity:1;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,transparent)}
h1 .proof{font-size:12px;width:17px;height:17px}
thead th{position:relative}
thead th .h{padding-right:26px}
thead th .proof{position:absolute;right:7px;top:50%;transform:translateY(-50%);margin:0;z-index:1}
thead th .gbadge+.proof,thead th:has(.gbadge) .proof{right:auto;left:auto;position:static;transform:none;margin-left:4px}
thead th.addcol .proof,thead th.selcol .proof,thead th.spinecol .proof{display:none}
.rf .proof{margin-left:3px;vertical-align:middle}
.rf.h .proof,.rf.p .proof{display:none}
.sugrow{display:flex;align-items:center}
.sugrow>button{flex:1;min-width:0}