/* ══════════════════════════════════════════════════════════════════════════
   postd · Der Kopf auf allen Website-Seiten (Rundgang 1 R4, 29.09.2026)

   Stefan 28.09.2026: „header bitte nehme den aktuellen header den du neu
   gebaut hast seiten übergreifend für alle!“ und „ja für den header alle
   seiten sollte global same sein“. 96, Aufbau der App, Zeile Header: „Nur
   globale Angelegenheiten, auf jeder Seite gleich … Burger-Menü, Wortmarke,
   DE/EN, Hell/Dunkel-Umschalter mit der gebauten Animation, Konto“.

   VORBILD IST app.html, NICHT UMGEKEHRT
   Der Kopf des Editors (#so-toolbox samt Kontomenue aus R1) ist die Referenz.
   Das Markup kommt aus scripts/kopf-vorlage.html (eingesetzt von
   scripts/kopf-einsetzen.py), mit denselben Ids und Klassen wie im Editor.
   Diese Datei traegt dieselben Regeln wie app.html, und zwar mit dem
   Vorsatz #so-toolbox: eine Id schlaegt jede Klassenregel aus components.css
   und site.css (.mark, button.mark, .thema-btn, .lang-kopf, a{border-bottom}),
   ohne dass hier ein einziges !important noetig ist.
   Gleich ist, was gemessen gleich ist: Masse und getComputedStyle bei 1440 und
   390 px, hell und dunkel, stehen als Tabelle im Staffelstab (stand/E.json,
   rundgang_1_r4_messung). Wer hier oder am Kopf in app.html etwas aendert,
   misst beide Seiten neu.

   DIE FARBEN DES EDITORS, NUR IM KOPF
   Die Website hat einen eigenen Tokensatz (assets/tokens.css), der Editor
   einen zweiten (:root in app.html). Beide Saetze benennen dieselben Flaechen,
   aber einige Namen gibt es auf der Website gar nicht (--tx, --tx-mut, --ui,
   --mono, --hover, --sel ...) und --line weicht ab. Damit der Kopf gleich
   aussieht, traegt #so-toolbox die Werte des Editors als eigene Tokens; sie
   gelten nur im Kopf und im Kontomenue darin, die Seite darunter bleibt
   unberuehrt. Die Werte sind im Editor gemessen (getComputedStyle an
   #so-toolbox), nicht abgeschrieben: dort ueberschreiben spaetere Bloecke den
   :root-Satz (Glasdeckung 86 und 64 Prozent statt 50 und 34).

   ABWEICHUNGEN VOM EDITOR, bewusst:
   1. position:sticky statt relative: die Website scrollt, der Editor nicht.
   2. Unter 900 px kein overflow-x:auto. Im Editor schneidet es das Kontomenue
      ab, dort ist es unsichtbar, weil die Mobil-Sperre (#so-mobile-note) den
      Editor unter 900 px ganz abdeckt. Auf der Website waere das Menue am
      Handy abgeschnitten.
   3. z-index 60 statt 210: wie der alte Website-Kopf, ueber dem Vollbild-Menue
      (.menu, 40), unter den Dialogen der Seiten.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens des Editors, gemessen (dunkel ist der Grundzustand wie dort) ── */
#so-toolbox{
  --tx:#F2F2F0; --tx-dim:#A8A8A4; --tx-mut:#8B8B8B;
  --line:#2B2B2B; --line-2:#383838; --hover:#242424; --box-2:#242424;
  --bg:#131313; --loud-700:#A8F517;
  --ui-on:#F2F2F0; --ui-on-tx:#131313; --ui-on-2:#A8A8A4;
  --sel:color-mix(in srgb, #F2F2F0 15%, #1A1A1A);
  --sel-line:color-mix(in srgb, #F2F2F0 30%, #383838);
  --ui:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --glas-verlauf:linear-gradient(180deg,
      color-mix(in srgb, #2E2E2E 64%, transparent) 0px,
      color-mix(in srgb, #1A1A1A 64%, transparent) 72px);
  --glas-kontakt:rgba(0,0,0,.34);
  --schatten-2:0 18px 44px rgba(0,0,0,.50);
}
html[data-theme="light"] #so-toolbox{
  --tx:#131313; --tx-dim:#4A4A4A; --tx-mut:#626262;
  --line:#E4E4E4; --line-2:#CFCFCF; --hover:#E9E9E9; --box-2:#E9E9E9;
  --bg:#FFFFFF; --loud-700:#486C05;
  --ui-on:#131313; --ui-on-tx:#F2F2F0; --ui-on-2:#4A4A4A;
  --sel:color-mix(in srgb, #131313 14%, #ffffff);
  --sel-line:color-mix(in srgb, #131313 30%, #CFCFCF);
  --glas-verlauf:linear-gradient(180deg,
      color-mix(in srgb, #FFFFFF 86%, transparent) 0px,
      color-mix(in srgb, #F2F2F2 86%, transparent) 72px);
  --glas-glanz:rgba(255,255,255,.92);
  --glas-kontakt:rgba(19,19,19,.06);
  --schatten-2:0 4px 12px -4px rgba(19,19,19,.10), 0 14px 32px -12px rgba(19,19,19,.10);
}

/* ── Die Leiste ─────────────────────────────────────────────────────────── */
#so-toolbox{
  /* Das Lockup rechnet wie im Editor aus der Versalhoehe der Wortmarke. */
  --wm-size:20px; --wm-cap:calc(var(--wm-size) * var(--cap)); --wm-m:calc(var(--wm-cap) / 4.28);
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:8px;
  box-sizing:border-box; width:auto; height:56px; margin:0; padding:0 12px 0 14px;
  background:var(--panel); color:var(--tx);
  border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; transform:none;
  font-family:'Archivo',system-ui,sans-serif; font-size:15px; font-weight:400; line-height:1.55;
  letter-spacing:normal; text-transform:none;
}
@media (max-width:900px){
  #so-toolbox{ height:52px; }
}
#so-toolbox *, #so-toolbox *::before, #so-toolbox *::after{ box-sizing:border-box; }

/* ── Zeichen als Menuetaste (drei Balken, Morph bei offenem Menue) ──────── */
#so-toolbox .mark{
  order:-4; display:inline-flex; flex-direction:column; flex:0 1 auto;
  gap:calc(var(--wm-m) * .64); align-items:flex-start; justify-content:center;
  min-width:44px; min-height:44px; padding:0; margin:0;
  background:none; border:0; border-radius:0; cursor:pointer;
  transition:background 200ms var(--e-state), color 200ms var(--e-state),
             border-color 200ms var(--e-state), transform 260ms var(--e-squish);
}
#so-toolbox .mark i{ display:block; height:var(--wm-m); background:var(--tx);
  transition:width .22s cubic-bezier(.2,.9,.1,1), border-radius .22s cubic-bezier(.2,.9,.1,1); }
#so-toolbox .mark i:nth-child(1){ width:calc(var(--wm-m) * 3.6); border-radius:0 calc(var(--wm-m) * .5) calc(var(--wm-m) * .5) 0; }
#so-toolbox .mark i:nth-child(2){ width:calc(var(--wm-m) * 5.8); border-radius:0; }
#so-toolbox .mark i:nth-child(3){ width:calc(var(--wm-m) * 4.6); border-radius:calc(var(--wm-m) * .5) 0 0 calc(var(--wm-m) * .5); }
#so-toolbox .mark[aria-expanded="true"] i{ width:calc(var(--wm-m) * 5.8); border-radius:0; }
#so-toolbox .mark:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }

/* ── Wortmarke ──────────────────────────────────────────────────────────── */
/* Die Haarlinie unten traegt im Editor die allgemeine a-Regel von app.html
   (--b-hair in --acc-300). Sie steht hier mit, weil der Kopf gleich sein soll;
   ob sie bleibt, entscheidet der Editor, nicht diese Datei. */
#so-toolbox .ed-word{
  order:-3; display:inline-flex; align-items:center; margin:0; padding:0;
  font-family:'Archivo',sans-serif; font-size:var(--wm-size); font-weight:900;
  line-height:1; letter-spacing:-.042em; color:var(--tx); text-decoration:none;
  border:0; border-bottom:var(--b-hair) solid var(--acc-300); border-radius:0;
  transition:color var(--t-state), border-color var(--t-state);
}
#so-toolbox .ed-word:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
#so-toolbox .hd-spacer{ order:0; flex:1 1 auto; min-width:8px; }

/* ── DE/EN ──────────────────────────────────────────────────────────────── */
#so-toolbox .lang-kopf{
  order:4; display:flex; flex:none; align-items:center; gap:2px;
  margin:0; padding:3px; background:var(--box); border:1px solid var(--line);
  border-radius:var(--r-round); box-shadow:none;
}
#so-toolbox .lang-kopf button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; min-height:24px; margin:0; padding:5px 9px;
  border:0; border-radius:var(--r-round); background:none; color:var(--tx-mut);
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.08em;
  line-height:normal; text-transform:none; cursor:pointer; box-shadow:none;
  transition:all 200ms var(--e-state);
}
#so-toolbox .lang-kopf button:hover{ background:var(--hover); color:var(--tx); }
#so-toolbox .lang-kopf button.lang-an{ background:var(--tx); color:var(--bg); cursor:default; }
#so-toolbox .lang-kopf button:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
/* 25.10.2026 · SEG (components.css, motion.js 10): ein Marker in Tinte gleitet unter DE oder EN. Die eigene Flaeche des aktiven Knopfs
   entfaellt erst, wenn der Marker gemessen hat (.gleiter-mit); davor bleibt es wie vorher. */
#so-toolbox .lang-kopf{ --gleit-marker:var(--tx); --gleit-pad:3px; }
#so-toolbox .lang-kopf.gleiter-mit button.lang-an{ background:none; }

/* ── Hell/Dunkel mit dem Tageslauf (assets/theme.js) ────────────────────── */
#so-toolbox .thema-btn{
  order:5; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; margin:0; padding:0;
  border:1px solid transparent; border-radius:var(--r-control);
  background:none; color:var(--tx-mut); cursor:pointer; box-shadow:none;
  /* Der Knopfrand ist der Horizont: ohne diesen Schnitt geht nichts unter. */
  position:relative; overflow:hidden;
  /* Schrift wie im Editor: die des Browsers fuer Knoepfe (revert), nicht die
     der Seite, die components.css an jeden Knopf vererbt. */
  font-family:revert; font-size:revert; font-weight:revert;
  transition:color .15s, background .15s, border-color .15s;
}
#so-toolbox .thema-btn:hover{ color:var(--tx); background:var(--hover); }
#so-toolbox .thema-btn:focus-visible{ outline:2px solid var(--tx); outline-offset:2px; }
#so-toolbox .thema-himmel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
@keyframes kopf-untergang{ from{ transform:translateY(0) }    to{ transform:translateY(100%) } }
@keyframes kopf-aufgang{   from{ transform:translateY(100%) } to{ transform:translateY(0) } }
#so-toolbox .thema-btn.thema-unten .thema-himmel{ transform:translateY(100%); }
#so-toolbox .thema-btn.thema-ab  .thema-himmel{ animation:kopf-untergang var(--t-himmel-ab)  var(--e-himmel) forwards; }
#so-toolbox .thema-btn.thema-auf .thema-himmel{ animation:kopf-aufgang   var(--t-himmel-auf) var(--e-himmel); }
@media (prefers-reduced-motion:reduce){
  #so-toolbox .thema-btn.thema-ab .thema-himmel,
  #so-toolbox .thema-btn.thema-auf .thema-himmel{ animation:none; }
}

/* ── Konto: Avatar (angemeldet) oder Anmelden ───────────────────────────── */
#so-toolbox .tb-profile{ order:6; position:relative; margin:0; padding:0; }
#so-toolbox .tb-avatar{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; margin:0; padding:0; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-round);
  background:var(--box); color:var(--tx);
  font-family:revert; font-size:14px; font-weight:700; line-height:normal;
  cursor:pointer; transition:border-color .15s;
}
#so-toolbox .tb-avatar:hover{ transform:scale(1.08); border-color:var(--ui-on); }
@media (prefers-reduced-motion:reduce){ #so-toolbox .tb-avatar:hover{ transform:none; } }
#so-toolbox .tb-avatar:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
#so-toolbox #tb-profile-btn[aria-expanded="true"]{ background:var(--sel); border-color:var(--sel-line); }
#so-toolbox .tb-pill{
  order:6; display:inline-flex; align-items:center; height:34px; margin:0; padding:0 18px;
  border:0; border-radius:var(--r-control); background:var(--ui-on); color:var(--ui-on-tx);
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em; line-height:normal;
  white-space:normal; text-decoration:none; cursor:pointer; box-shadow:none;
  transition:background .15s, opacity .15s;
}
#so-toolbox .tb-pill:hover{ background:var(--ui-on-2); color:var(--ui-on-tx); }
#so-toolbox .tb-pill:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
/* Der Anmeldestand steht am Kopf (assets/kopf.js): angemeldet der Avatar,
   sonst Anmelden. Wie body.anon im Editor, nur ohne Klasse am body. */
#so-toolbox[data-konto="anon"] .tb-profile{ display:none; }
#so-toolbox[data-konto="an"] .tb-pill{ display:none; }

/* ── Kontomenue (R1, Glas) ──────────────────────────────────────────────── */
/* Im Editor traegt das Menue die Klasse .glas. Hier nicht: components.css
   nimmt .glas am Telefon die Truebung mit !important weg (Rechenlast), der
   Editor behaelt sie. Das Material steht darum direkt an #tb-menu. */
#so-toolbox .tb-menu{ position:absolute; top:46px; right:0; display:none; margin:0; }
#so-toolbox .tb-menu.open{ display:block; }
#so-toolbox #tb-menu{
  min-width:248px; max-width:320px; padding:4px;
  max-height:calc(100vh - 72px); overflow:auto;
  background:var(--glas-verlauf);
  -webkit-backdrop-filter:var(--glas-trueb); backdrop-filter:var(--glas-trueb);
  border:1px solid var(--glas-kante); border-radius:var(--r-panel);
  box-shadow:inset 0 1px 0 var(--glas-glanz), 0 1px 2px var(--glas-kontakt), var(--schatten-2);
  color:var(--tx); text-align:left;
}
@keyframes kopf-tbm-auf{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kopf-tbm-feder{ from{ transform:translateY(-4px) scaleY(.97); } to{ transform:none; } }
#so-toolbox #tb-menu.open{ animation:kopf-tbm-auf var(--t-state) both, kopf-tbm-feder var(--t-sheet) both; transform-origin:top; }
@media (prefers-reduced-motion:reduce){ #so-toolbox #tb-menu.open{ animation:none; } }
#so-toolbox #tb-menu .tb-div{ height:1px; background:var(--hair); margin:4px 2px; padding:0; border:0; }
#so-toolbox #tb-menu .tb-row{
  display:flex; align-items:center; gap:10px; width:100%; min-height:32px;
  padding:6px 10px; margin:0; border:0; border-radius:var(--r-control);
  background:none; color:var(--tx); box-shadow:none;
  font-family:var(--ui); font-size:13px; font-weight:400; line-height:1.3; letter-spacing:0;
  text-align:left; text-decoration:none; text-transform:none; cursor:pointer;
  transition:background .12s ease;
}
#so-toolbox #tb-menu .tb-row[hidden]{ display:none; }
#so-toolbox #tb-menu .tb-row:hover, #so-toolbox #tb-menu .tb-row:focus-visible{ background:var(--hover); }
#so-toolbox #tb-menu .tb-row:active{ background:var(--box-2); }
#so-toolbox #tb-menu .tb-row:focus-visible{ outline:none; box-shadow:inset 0 0 0 1.5px var(--focus-col); }
#so-toolbox #tb-menu .tb-row > svg{ flex:none; width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--tx-mut); }
#so-toolbox #tb-menu .tb-lbl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#so-toolbox #tb-menu .tb-grund{ font-size:11px; line-height:1.35; font-weight:400; color:var(--tx-mut); white-space:normal; }
#so-toolbox #tb-menu .tb-grund:empty{ display:none; }
#so-toolbox #tb-menu .tb-haken{ flex:none; width:16px; height:16px; display:grid; place-items:center; }
#so-toolbox #tb-menu .tb-haken svg{ display:none; flex:0 0 auto; width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--tx); }
#so-toolbox #tb-menu .tb-row[aria-checked="true"] .tb-haken svg{ display:block; }
#so-toolbox #tb-menu .tb-row.tb-lang{ display:inline-flex; justify-content:flex-start; min-width:0;
  transition:background var(--t-state), color var(--t-state); }
#so-toolbox #tb-menu .tb-row.tb-lang[aria-checked="true"]{ cursor:default; }
/* K3 (24.10.2026) · Konto-Karte im Menue, dieselben Regeln wie in app.html (K1), nur mit dem Vorsatz #so-toolbox. Schrift: Archivo 800 fuer Plakette und Bild-Buchstabe (--font-display), die Mail
   in Plex Mono auf EINER Zeile (Ellipse, nie umbrechen). Farben der Plakette: Pro gruen (Limette), Studio dunkelgruen,
   Enterprise Titan-Grau, Free leise. Der Upgrade-Knopf traegt Limette mit einem Lichtstreifen beim Hover; mit
   prefers-reduced-motion bleibt nur die Farbe. */
#so-toolbox #tb-menu .km-konto{ margin:2px 2px 6px; padding:12px; border-radius:var(--r-card); background:color-mix(in srgb,var(--tx) 5%,transparent); box-shadow:inset 0 0 0 1px var(--hair); }
#so-toolbox #tb-menu .km-kopf{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--tx); border:0; border-radius:var(--r-control); }
#so-toolbox #tb-menu .km-kopf:focus-visible{ outline:2px solid var(--tx); outline-offset:3px; }
#so-toolbox #tb-menu .km-av{ flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--ui-on); color:var(--ui-on-tx); display:grid; place-items:center; font:800 17px var(--font-display); }
#so-toolbox #tb-menu .km-av img{ width:100%; height:100%; object-fit:cover; display:block; }
#so-toolbox #tb-menu .km-av [hidden]{ display:none !important; }
#so-toolbox #tb-menu .km-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
#so-toolbox #tb-menu .km-mail{ font:500 11px/1.2 var(--mono); letter-spacing:0; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#so-toolbox #tb-menu .km-sub{ font:400 11px/1.2 var(--ui); color:var(--tx-mut); }
#so-toolbox #tb-menu .km-pfeil{ flex:none; width:16px; height:16px; fill:none; stroke:var(--tx-mut); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease, stroke .18s; }
#so-toolbox #tb-menu .km-kopf:hover .km-pfeil{ stroke:var(--tx); transform:translateX(2px); }
#so-toolbox #tb-menu .km-abo{ margin-top:12px; padding-top:12px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:10px; }
#so-toolbox #tb-menu .km-plan{ --pl-bg:transparent; --pl-tx:var(--tx-dim); --pl-ring:var(--hair); --pl-dot:var(--tx-mut); --pl-glow:transparent;
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:7px; font:800 12px/1 var(--font-display); letter-spacing:.1em; text-transform:uppercase;
  padding:7px 12px 7px 10px; border-radius:999px; color:var(--pl-tx); background:var(--pl-bg); box-shadow:inset 0 0 0 1px var(--pl-ring), 0 0 14px -4px var(--pl-glow); }
#so-toolbox #tb-menu .km-punkt{ width:7px; height:7px; border-radius:50%; background:var(--pl-dot); }
#so-toolbox #tb-menu .km-plan[data-p="pro"]{ --pl-bg:color-mix(in srgb,var(--loud) 34%,transparent); --pl-tx:var(--tx); --pl-ring:color-mix(in srgb,var(--loud) 80%,transparent); --pl-dot:color-mix(in srgb,var(--loud) 70%,#2c6a00); --pl-glow:color-mix(in srgb,var(--loud) 70%,transparent); }
#so-toolbox #tb-menu .km-plan[data-p="studio"]{ --pl-bg:linear-gradient(135deg,#113424 0%,#0c2a1e 55%,#09221a 100%); --pl-tx:#c9dec7; --pl-ring:rgba(130,190,155,.24); --pl-dot:#6dae84; --pl-glow:rgba(18,92,58,.38); }
/* Enterprise edel: gebuerstetes Platin (feine Striche, mehrstufiger Verlauf mit Spiegelband) und ein Schimmer, der in Abstaenden darueberlaeuft */
#so-toolbox #tb-menu .km-plan[data-p="enterprise"], #so-toolbox #tb-menu .km-plan[data-p="member"]{ --pl-bg:linear-gradient(115deg,#eef0f3 0%,#c3c7cd 18%,#8c9199 38%,#dfe2e6 52%,#a9aeb5 70%,#f1f3f5 86%,#b6bac0 100%); --pl-tx:#101216; --pl-ring:rgba(255,255,255,.55); --pl-dot:#2a2d31; --pl-glow:rgba(190,196,205,.5);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),var(--pl-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 18px -4px var(--pl-glow); }
#so-toolbox #tb-menu .km-plan[data-p="enterprise"]::after, #so-toolbox #tb-menu .km-plan[data-p="member"]::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%); transform:translateX(-140%); animation:km-schimmer 5s ease-in-out infinite; }
@keyframes km-schimmer{ 0%,55%{ transform:translateX(-140%); } 100%{ transform:translateX(140%); } }
#so-toolbox #tb-menu .km-up{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--ui); letter-spacing:.01em;
  padding:8px 13px 8px 14px; border-radius:var(--r-control); border:0; cursor:pointer; white-space:nowrap; color:#131313;
  background:linear-gradient(180deg,color-mix(in srgb,var(--loud) 82%,#fff) 0%,var(--loud) 55%,color-mix(in srgb,var(--loud) 88%,#3a8a00) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px color-mix(in srgb,#131313 16%,transparent), 0 1px 2px rgba(19,19,19,.18);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease; }
#so-toolbox #tb-menu .km-up::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.7) 50%,transparent 72%); transform:translateX(-130%); }
#so-toolbox #tb-menu .km-up svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .26s cubic-bezier(.2,.8,.2,1); }
#so-toolbox #tb-menu .km-up:hover{ transform:translateY(-1px); filter:saturate(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px color-mix(in srgb,#131313 20%,transparent), 0 8px 20px -6px color-mix(in srgb,var(--loud) 85%,transparent), 0 0 0 4px color-mix(in srgb,var(--loud) 24%,transparent); }
#so-toolbox #tb-menu .km-up:hover::before{ transform:translateX(130%); transition:transform .7s cubic-bezier(.3,.6,.2,1); }
#so-toolbox #tb-menu .km-up:hover svg{ transform:translateY(-2px) scale(1.12); }
#so-toolbox #tb-menu .km-up:active{ transform:translateY(0) scale(.97); filter:none; transition-duration:.08s; box-shadow:inset 0 1px 2px rgba(19,19,19,.25), 0 0 0 3px color-mix(in srgb,var(--loud) 30%,transparent); }
#so-toolbox #tb-menu .km-up:focus-visible{ outline:2px solid var(--tx); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  #so-toolbox #tb-menu .km-up, #so-toolbox #tb-menu .km-up svg, #so-toolbox #tb-menu .km-pfeil{ transition:none; }
  #so-toolbox #tb-menu .km-up:hover::before{ transition:none; transform:translateX(-130%); }
  #so-toolbox #tb-menu .km-up:hover{ transform:none; }
  #so-toolbox #tb-menu .km-plan[data-p="enterprise"]::after, #so-toolbox #tb-menu .km-plan[data-p="member"]::after{ animation:none; opacity:0; }
}
/* Auf der Website sind Upgrade und die Karte Links (<a>), im Editor Knopf und Link; das hidden-Attribut verliert sonst gegen display. */
#so-toolbox #tb-menu .km-up{ text-decoration:none; }
#so-toolbox #tb-menu .km-up[hidden], #so-toolbox #tb-menu .km-abo[hidden]{ display:none; }

/* ── Vollbild-Menue hinter dem Zeichen (site.css .menu) ─────────────────── */
/* site.css staffelt sechs Zeilen; das Menue hat seit R4 acht. */
.menu-rows a:nth-child(7){ transition-delay:0s }
.menu-rows a:nth-child(8){ transition-delay:0s }
.menu.open .menu-rows a:nth-child(7){ transition-delay:.46s }
.menu.open .menu-rows a:nth-child(8){ transition-delay:.52s }
.menu-foot .menu-rl{ font-family:var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink); opacity:.7; align-self:center; }

/* ═══════════════════════════════════════════════════════════════════════
   Seitenstruktur 05.10.2026 (Stefan, Prototypen-Runden): der Kopf der Website
   ist ab jetzt GROESSER als der des Editors. Das ist eine bewusste vierte
   Abweichung vom Editor (siehe oben, 1 bis 3):
   4. Hoehe 88 statt 56 Pixel, Seitenrand 32 statt 14, Wortmarke 29 statt 20,
      und im Kopf stehen Features, Pricing, Explore sowie der Kauf-Knopf.
      Die Hoehe bleibt in JEDEM Zustand gleich (kein Schrumpfen beim Scrollen).
      Auf der Startseite (body.seite-start) liegt der Kopf transparent ueber dem
      Bild und wird erst deckend, wenn der Hero oben hinausgescrollt ist
      (assets/startseite.js setzt .solid). Wer den Kopf in app.html aendert,
      misst die Website NICHT neu: die Masse sind hier absichtlich eigene.
   ═══════════════════════════════════════════════════════════════════════ */
#so-toolbox{ --wm-size:29px; height:88px; padding:0 32px; gap:12px;
  transition:background-color .55s ease-in-out, border-color .55s ease-in-out; }
#so-toolbox .mark{ flex:none; min-width:0; min-height:0; height:30px; position:relative; align-self:center; }
#so-toolbox .mark::before{ content:""; position:absolute; inset:-9px -10px; }
/* Wortmarke 5 px an das Zeichen: 12 px Abstand der Leiste minus 7. */
#so-toolbox .ed-word{ margin-left:-7px; border-bottom:0; }
#so-toolbox .hd-nav{ order:-2; display:flex; align-items:center; gap:6px; margin-left:clamp(16px,2.4vw,40px); }
#so-toolbox .hd-nav a{ font:600 15px/1 'Archivo',sans-serif; color:var(--tx); text-decoration:none; border:0;
  padding:10px 14px; border-radius:var(--r-round); transition:background var(--t-state); }
#so-toolbox .hd-nav a:hover, #so-toolbox .hd-nav a[aria-current="page"]{ background:color-mix(in srgb, var(--tx) 12%, transparent); }
#so-toolbox .hd-nav a:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
/* Symbol-Verweis (Discord): nur das Zeichen, gleiche Hoehe wie die Textlinks */
#so-toolbox .hd-nav a.hd-ico{ display:inline-flex; align-items:center; padding:9px 11px; }
#so-toolbox .hd-nav a.hd-ico svg{ width:20px; height:20px; fill:currentColor; display:block; }
/* Kauf-Knopf: nur fuer Besucher ohne Konto, wie der Anmelden-Knopf. */
/* 25.10.2026 (Stefan): derselbe Knopf wie im Hero, mit derselben Animation (Glaszustand, Zeigerlicht, Prismenkante, Neigung). Farbe, Zeigezustand und Bewegung
   kommen aus components.css und site.css (.hd-cta steht dort in den Listen von .pill-loud); hier nur die Masse. Kein color/background/transition/transform auf
   dieser Regel (auch kein border-color): sie hat mit der Kennung die hoehere Spezifitaet und wuerde den Zeigezustand der gemeinsamen Regeln ueberstimmen.
   Die Kante ist ein 1-px-Rahmen (Farbe aus components.css: in Ruhe durchsichtig, beim Zeigen Limette), darum 17 statt 18 px Innenabstand: der Knopf bleibt 176 px breit. Der Pfeil steht in der
   Beschriftung statt in ::after, denn ::after traegt jetzt die Prismenkante. */
#so-toolbox .hd-cta{ order:3; display:inline-flex; align-items:center; height:40px; white-space:nowrap; flex:none; padding:0 17px; border-radius:var(--r-control);
  font:700 14px/1 'Archivo',sans-serif; text-decoration:none; border-width:1px; border-style:solid; }
#so-toolbox .hd-cta-an::after, #so-toolbox .hd-cta-in::after{ content:"\2192"; margin-left:8px; font-weight:600; }
#so-toolbox .hd-cta:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
/* 24.10.2026 (Stefan): der Knopf steht IMMER oben rechts. Ohne Konto "Postd now", mit Konto "Go to editor". (26.10.2026: vorher "Start for free", das widerspricht der Regel, Free nicht zu bewerben.) */
#so-toolbox .hd-cta-in{ display:none; }
#so-toolbox[data-konto="an"] .hd-cta-an{ display:none; }
#so-toolbox[data-konto="an"] .hd-cta-in{ display:inline; }
/* Im Kopf stehen nur noch Learning und Produktivitaet (Features und Pricing liegen auf der Startseite und im Menue). */
@media (max-width:900px){ #so-toolbox .hd-nav{ display:none; } }
@media (max-width:900px){ #so-toolbox{ height:64px; padding:0 18px; } }
@media (max-width:640px){ #so-toolbox{ --wm-size:23px; } }
/* Handy: der Knopf bleibt, dafuer weicht, was woanders erreichbar ist: Anmelden (der Knopf fuehrt in den Editor, dort meldet man sich an)
   und, mit Konto, der Sprachschalter (steht im Kontomenue). */
@media (max-width:640px){
  #so-toolbox{ gap:8px; }
  #so-toolbox .hd-cta{ height:36px; padding:0 11px; font-size:12.5px; }
  #so-toolbox .hd-cta-an::after, #so-toolbox .hd-cta-in::after{ display:none; }
  #so-toolbox[data-konto="anon"] .tb-pill{ display:none; }
  #so-toolbox[data-konto="an"] .lang-kopf{ display:none; }
}
:root{ --h-kopf:88px; }
@media (max-width:900px){ :root{ --h-kopf:64px; } }

/* Startseite: transparent ueber dem Bild, deckend nach dem Hero. */
body.seite-start #so-toolbox{ position:fixed; left:0; right:0; top:0; }
body.seite-start #so-toolbox:not(.solid){
  background:transparent; border-bottom-color:transparent;
  --tx:#F2F2F0; --tx-dim:#D2D2CE; --tx-mut:rgba(242,242,240,.62);
  --box:rgba(255,255,255,.12); --box-2:rgba(255,255,255,.16); --hover:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.2); --line-2:rgba(255,255,255,.3); --bg:#131313;
  --ui-on:#F2F2F0; --ui-on-tx:#131313; --ui-on-2:#D2D2CE;
  /* Offener Avatar (aria-expanded) nimmt --sel. Ohne diese zwei Zeilen kam im Hellmodus --sel der hellen Palette
     (hellgrau) unter die helle Schrift der Insel: weisses S auf hellem Grau. */
  --sel:color-mix(in srgb, #F2F2F0 15%, #1A1A1A); --sel-line:color-mix(in srgb, #F2F2F0 30%, #383838);
}
body.seite-start #so-toolbox, body.seite-start #so-toolbox :not(.pill):not(.hd-cta):not(.mark):not(.mark i){
  transition-property:background-color,color,border-color,fill,stroke; transition-duration:.55s; transition-timing-function:ease-in-out; }

/* Hell/Dunkel blendet weich (assets/kopf.js setzt html.sx-fade fuer 0,7 s). */
html.sx-fade, html.sx-fade *{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, fill .5s ease, stroke .5s ease !important; }

/* Vollbild-Menue: dunkelt ab und zeichnet den Hintergrund weich, auch am Handy. */
.menu{ background:rgba(10,10,10,.42) !important; -webkit-backdrop-filter:blur(26px) saturate(140%); backdrop-filter:blur(26px) saturate(140%);
  --ink:#F2F2F0; --ink-2:#D2D2CE; --ink-3:#A8A8A4; --paper:#131313; --hair:rgba(255,255,255,.18); --edge:rgba(255,255,255,.3); }
.menu .tilefield{ opacity:.22; }
/* Auf heller Seite braucht das Blatt mehr Deckung, sonst steht weisse Schrift auf mittlerem Grau. */
html[data-theme="light"] .menu{ background:rgba(10,10,10,.62) !important; }
.menu-rows a{ color:#F2F2F0 !important; }
@media (max-width:760px){ .menu{ background:rgba(8,8,8,.66) !important; -webkit-backdrop-filter:blur(26px) saturate(140%) !important; backdrop-filter:blur(26px) saturate(140%) !important; } }

/* Konto-Menue im Hellmodus (Stefan 05.10.2026: "unlesbar", wieder am 24.10.2026). Der Kopf sitzt auf der Startseite auf der
   dunklen Insel (body.seite-start #so-toolbox:not(.solid)), dort gelten die hellen Dunkel-Tokens (--tx hell). Die Glasflaeche
   des Menues ist im Hellmodus aber hell, also stand weisse Schrift auf hellem Glas. Das Menue ist keine Insel: es nimmt im
   Hellmodus die helle Palette des Kopfes zurueck (dieselben Werte wie html[data-theme="light"] #so-toolbox oben, dazu --box und
   --hair der Website). Die Regel stand frueher an .konto-menu, einer Klasse, die es seit dem Umbau auf #tb-menu nicht mehr gibt;
   darum kam der Fehler zurueck. Eine Deklaration am Menue selbst schlaegt die vererbten Werte des Kopfes. */
html[data-theme="light"] #so-toolbox #tb-menu{
  --tx:#131313; --tx-dim:#4A4A4A; --tx-mut:#626262;
  --line:#E4E4E4; --line-2:#CFCFCF; --hover:#E9E9E9; --box:#F7F7F7; --box-2:#E9E9E9; --hair:#E0E0E0;
  --bg:#FFFFFF; --loud-700:#486C05;
  --ui-on:#131313; --ui-on-tx:#F2F2F0; --ui-on-2:#4A4A4A;
  --sel:color-mix(in srgb, #131313 14%, #ffffff);
  --sel-line:color-mix(in srgb, #131313 30%, #CFCFCF);
  color:var(--tx);
}

/* ── Social: Discord und Instagram (25.10.2026) ──────────────────────────
   Im Seitenfuss (.foot-social) auf allen Breiten, im Vollbild-Menue (.menu-social) nur am Handy
   (assets/mobil.css zeigt es dort). Die Symbole kommen aus assets/icons.svg. */
.menu-social{ display:none; }
.foot-social{ display:flex; gap:10px; margin-top:16px; }
.foot-social a{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border:1px solid var(--hair); border-radius:50%; color:var(--ink-2);
  transition:color var(--t-state), border-color var(--t-state), background var(--t-state);
}
.foot-social a:hover{ color:var(--ink); border-color:var(--edge); background:var(--box); }
.foot-social a:focus-visible{ outline:2px solid var(--ui-on); outline-offset:2px; }
.foot-social svg{ width:18px; height:18px; display:block; }

/* Nur am Handy sichtbar (assets/mobil.css zeigt sie dort), z. B. "Konto erstellen" an Stellen, wo am Schreibtisch der Editor-Knopf steht. */
.m-only{ display:none; }

/* ── Warteliste: Formular "Bescheid geben" (assets/warteliste.js), alle Breiten ─────────────────────────
   Steht auf der Startseite (im Block .m-app, nur am Handy sichtbar) und auf der Download-Seite. Nur Tokens,
   damit es im Hero (dunkle Insel) und auf der Seite (Hell/Dunkel) gleich funktioniert. */
.m-app, .m-appsek{ display:none; }
.wl{ display:grid; gap:10px; max-width:460px; }
.wl-l{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wl-in{
  box-sizing:border-box; width:100%; min-height:52px; padding:0 16px; margin:0;
  border:1.5px solid var(--edge); border-radius:14px; background:var(--panel); color:var(--ink);
  font:500 16px/1.2 var(--font-display); letter-spacing:-.005em; -webkit-appearance:none; appearance:none;
}
.wl-in::placeholder{ color:var(--ink-3); opacity:1; }
.wl-in:focus{ outline:0; border-color:var(--signal-tx); box-shadow:0 0 0 3px rgba(var(--signal-rgb),.22); }
.wl-go{ width:100%; min-height:52px; }
.wl-fine{ margin:2px 0 0; font-size:12.5px; line-height:1.45; color:var(--ink-3); }
.wl-fine a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.wl-ok{ margin:0; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.4;
  background:rgba(var(--signal-rgb),.12); color:var(--signal-tx); }
.wl-ok[hidden]{ display:none; }
.wl-ok.wl-fehler{ background:rgba(255,92,92,.12); color:#ff9b9b; }
html[data-theme="light"] .wl-ok.wl-fehler{ color:#b3261e; }
.wl-fertig .wl-in, .wl-fertig .wl-go, .wl-fertig .wl-fine{ display:none; }

/* ── Download-Seite (25.10.2026): zwei Teile, Schreibtisch und Handy ─────────────────────────────────
   Am Schreibtisch steht der Teil "Schreibtisch" zuerst, am Handy der Teil "Handy" (assets/mobil.css, order). */
.dl{ display:flex; flex-direction:column; max-width:60ch; }
.dl-h1{ order:-2; }
.dl-desk{ order:0; }
.dl-mobil{ order:1; margin-top:var(--sp-7); padding-top:var(--sp-6); border-top:1px solid var(--hair); }
.dl-knoepfe, .dl-chips{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--sp-4); }
.dl-chips{ margin-top:var(--sp-5); }
.dl-frage{ margin:var(--sp-5) 0 var(--sp-2); font:700 17px/1.3 var(--font-display); letter-spacing:-.01em; }
.dl-teil .dl-h{ margin-top:var(--sp-3); }

/* ── Store-Badges: App Store und Google Play, noch ohne Ziel (25.10.2026) ────────────────────────────
   "Bald im App Store" und "Bald bei Google Play". Das sind noch keine Links: ein Tipp fuehrt zum Eintragsfeld
   darunter (assets/warteliste.js, data-wl-fokus). Schwarze Flaeche und helle Kante wie die echten Badges; sobald
   die Apps live sind, kommen hier die offiziellen Badge-Dateien der Stores mit Link hin. */
.stores{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.store{
  all:unset; box-sizing:border-box; cursor:pointer; flex:1 1 150px; display:flex; align-items:center; gap:9px;
  min-height:54px; padding:0 14px 0 12px; border-radius:11px; background:#000; border:1px solid #A6A6A6; color:#fff;
  font-family:var(--font-display); transition:transform var(--t-tap), border-color var(--t-state);
}
.store:hover{ border-color:#fff; }
.store:active{ transform:scale(.97); }
.store:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.store svg{ width:25px; height:25px; flex:none; display:block; }
.store span{ display:block; min-width:0; }
.store small{ display:block; font:500 10px/1.1 var(--font-display); letter-spacing:.01em; opacity:.88; white-space:nowrap; }
.store b{ display:block; margin-top:2px; font:600 17px/1.1 var(--font-display); letter-spacing:-.02em; white-space:nowrap; }
.wl-feld{ display:contents; }

/* Fuss: der Satz unter dem Zeichen ist der Hauptclaim (assets/../scripts/fuss-anpassen.py) */
.foot .foot-claim{ margin:0; font:800 19px/1.15 var(--font-display); letter-spacing:-.03em; color:var(--ink); max-width:none; }