/* Original Portal UI V3: origin/TIM c0ec3456e155eaffdb5542d560fcd5a85e99b92c. No mockup runtime. */

/* ── Stufen ──────────────────────────────────────────────────────────
   Eine Skala, darüber Bedeutungsnamen. Der dunkle Modus hängt nur die
   Zuordnung um; keine Regel weiter unten setzt eine Farbe zurück. */
:root{
  --rot:#e30613; --rot-dunkel:#b8050f; --rot-hauch:rgba(227,6,19,.10);
  --rot-text:#b8050f; --rot-flaeche:#e30613;
  --nav:#575656;
  --s0:#ffffff; --s1:#fafaf8; --s2:#f2f1ee; --s3:#e6e4df; --s4:#d3d0c9;
  --s7:#5f5d58; --s9:#232220; --s10:#161513;
  --gruen-text:#1a6a3b; --gruen-hauch:rgba(31,122,69,.12);
  --gelb:#9a6b00; --gelb-text:#755100; --gelb-hauch:rgba(154,107,0,.14);

  --schiene-eng:60px;
  --grund:var(--s2); --flaeche:var(--s0); --flaeche-sanft:var(--s1);
  --schrift:var(--s9); --leise:var(--s7); --sehr-leise:#6e6b65;
  --linie:var(--s3); --linie-stark:var(--s4);
  /* Ein Feld weist sich allein durch seinen Rand als Feld aus. Die
     Linienfarbe misst gegen die Flaeche 1,5:1 — ein Umriss braucht 3. */
  --umriss:#8a8781;
  --zeigen:var(--s2); --druecken:var(--s3); --fokus:var(--rot);
  --wm-ton:#595959; --wm-gegen:#ffffff; --wm-rot:#e30613;
  /* Die rote Markenfläche als Eigenschaft: auf rotem Grund muss sie
     weiß werden, sonst verschwindet die Wortmarke im Kopfband. */
  --wm-marke:#d5000a;
  /* Zweiter Ton der Wortmarke: „PORTAL" im Logo. Auf hellem Grund
     das Markenrot, auf dem Schienengrau weiß — dort steht es sonst
     mit 1,34:1 und ist nicht zu lesen. */
  --wm-wort:#d5000a;
  --ampel-gruen:#1a6a3b; --ampel-gelb:#8a6000; --ampel-rot:#c00812;
  --schatten:0 1px 2px rgba(35,34,32,.06), 0 8px 24px -12px rgba(35,34,32,.18);

  --kopf-hoehe:60px; --fuss-hoehe:64px; --logo-hoehe:24px; --schiene:204px;
  /* Ein Maß für jeden Trenner — Gruppentitel wie blanker Strich. Nur so
     sitzt jedes Zeichen mittig zwischen den Linien über und unter ihm. */
  --gruppe-hoehe:28px;
  --feld:34px; --feld-zeichen:19px; --knopf-spalte:132px;
  /* Ein Knopf im Kopf misst 36px; mit 8px Polster oben und unten sind
     das 52. Darunter dürfen die Köpfe nicht, sonst stehen Kacheln mit
     und ohne Knopf verschieden hoch. */
  --block-kopf:52px;
  --rand:var(--a5); --karte:var(--a4); --agent-breite:300px;
  --r-1:6px; --r-2:10px; --r-3:14px; --r-pille:999px;
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:20px; --a7:40px;
  --t12:12px; --t13:13px; --t15:15px; --t17:17px; --t21:21px;
  --t28:28px; --t40:40px;
  /* Drei Namen stehen im Kopfband nebeneinander: die Wortmarke des
     Produkts in der Schiene, der Menüpunkt in der Mitte, SUMA ASSISTANT
     rechts. Sie tragen dieselbe Versalhöhe von 12,24px — gerechnet aus
     der Überschrift (17px Manrope, Versalhöhe 0,72). Helvetica misst
     0,714, also 17,15px; die Wortmarke füllt 0,5727 ihrer Kastenhöhe,
     also 21,4px. Wer eine Zahl ändert, rechnet die anderen beiden nach. */
  --wm-grad:17.15px;
  --ui:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --anzeige:"Manrope",var(--ui);
}
[data-modus="dunkel"]{
  --grund:var(--s10); --flaeche:#1c1b19; --flaeche-sanft:#232220;
  --schrift:#f4f2ee; --leise:#a8a49c; --sehr-leise:#a09b93;
  --linie:#332f2c; --linie-stark:#4a4642; --umriss:#78736c;
  --zeigen:#2a2825; --druecken:#332f2c;
  --wm-ton:#ffffff; --wm-gegen:#17181c; --wm-rot:#ff6b73;
  --ampel-gruen:#6ed497; --ampel-gelb:#e0a831; --ampel-rot:#ff6b73;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --rot:#ff4d57; --rot-text:#ff8a91; --rot-flaeche:#d10512;
  --rot-hauch:rgba(255,77,87,.14);
  --gruen-text:#6ed497; --gruen-hauch:rgba(79,192,126,.16);
  --gelb:#e0a831; --gelb-text:#eec063; --gelb-hauch:rgba(224,168,49,.16);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--schrift);
  font:400 var(--t15)/1.5 var(--ui);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:var(--r-1)}
h1,h2,h3,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
table{border-collapse:collapse;width:100%}

/* Rollbalken gehoeren zur Oberflaeche, nicht zum Browser: schlank, in den
   Linienfarben, Spur unsichtbar. Beide Modi ueber dieselben Tokens. */
/* Die Farbe vererbt sich, die Breite nicht — deshalb steht sie an jedem
   Scrollfeld einzeln. */
.portal{scrollbar-color:var(--linie-stark) transparent}
.mitte-rumpf,.agent-lauf,.schiene-liste,.werkzeuge{scrollbar-width:thin}
/* Die Schiene traegt ihr eigenes Grau, dort passen die Linienfarben nicht. */
.schiene{scrollbar-color:rgba(255,255,255,.30) transparent}

/* ── Steuerleiste über der Bühne (gehört zum Musterbogen, nicht zum Portal) */
.regie{max-width:1300px;margin:0 auto;padding:var(--a5) var(--a5) var(--a3);
  display:flex;flex-wrap:wrap;gap:var(--a4);align-items:center}
.regie h2{font:800 var(--t17)/1.2 var(--anzeige);letter-spacing:-.01em}
.regie p{color:var(--leise);font-size:var(--t13);flex:1 1 240px;min-width:0}
.schalter{display:flex;gap:2px;background:var(--flaeche-sanft);
  border:1px solid var(--linie);border-radius:var(--r-2);padding:3px}
.schalter button{padding:5px var(--a3);border-radius:var(--r-1);
  font-size:var(--t12);font-weight:500;color:var(--leise);white-space:nowrap}
.schalter button:hover{background:var(--zeigen);color:var(--schrift)}
.schalter button[aria-pressed="true"]{background:var(--schrift);color:var(--grund)}

/* ── Die Bühne. Ihre Breite bestimmt das Layout, nicht das Fenster —
   deshalb Behälterabfragen statt @media. So lässt sich der Umbruch hier
   vorführen, und im echten Portal greift dieselbe Regel am Fenster. */
.rahmen{max-width:1300px;margin:0 auto var(--a7);padding:0 var(--a5)}
.buehne{container-type:inline-size;container-name:portal;
  margin:0 auto;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-3);box-shadow:var(--schatten);overflow:hidden;
  height:760px}
.buehne[data-breite="gross"]{max-width:1240px}
.buehne[data-breite="mittel"]{max-width:880px}
.buehne[data-breite="klein"]{max-width:390px}

.portal{display:grid;position:relative;height:100%;min-height:0;
  grid-template-columns:var(--schiene) minmax(0,1fr) var(--agent-breite);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"schiene mitte agent"}


/* ── Anmeldung ──────────────────────────────────────────────────── */
/* Eine Karte in der Mitte, sonst nichts. Dieselben Stufen wie das Portal,
   deshalb trägt sie beide Modi ohne eigene Farbe. */
.anmeldung{display:none;height:100%;box-sizing:border-box;
  grid-template-columns:min(340px,100%);align-content:center;
  justify-content:center;justify-items:center;gap:var(--a5);
  padding:var(--a5);background:var(--flaeche-sanft)}
.buehne[data-seite="anmeldung"] .anmeldung{display:grid}
.buehne[data-seite="anmeldung"] .portal{display:none}
/* Polster und Fuge sind dasselbe Maß: nur so sitzt die Wortmarke mittig
   zwischen Kartenrand und Überschrift. */
.anmeldekarte{display:grid;gap:var(--a5);width:100%;
  padding:var(--a5);background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--r-3);
  box-shadow:var(--schatten)}
.anmeldemarke{height:var(--logo-hoehe);width:auto;justify-self:start}
.anmeldekarte h1{font:700 var(--t17)/1.2 var(--ui)}
.anmeldekarte .knopf{justify-content:center}
.anmelde-link{font-size:var(--t13);color:var(--leise);justify-self:start}
.anmelde-link:hover{color:var(--rot-text)}
.anmelde-produkte{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--a4) var(--a2);width:100%;max-width:340px}
.anmelde-produkte b{grid-column:1 / -1;text-align:center;font-size:var(--t12);
  font-weight:500;color:var(--leise)}
.anmelde-produkt{display:grid;justify-items:center;gap:var(--a1);
  font-size:var(--t12);color:var(--leise);letter-spacing:.04em}
.anmelde-produkte svg{width:22px;height:22px;opacity:.75}
.anmelde-fuss{font-size:var(--t12);color:var(--leise)}
.anmelde-fuss a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── Produktschiene ─────────────────────────────────────────────── */
/* Die Schiene trägt ihr eigenes Grau — dort gelten die hellen Werte,
   in beiden Modi gleich. */
.schiene{container-type:inline-size;container-name:navi;
  --fokus:#ffffff;--wm-ton:#ffffff;--wm-gegen:#ffffff;--wm-wort:#ffffff;
  /* Das Produktwort steht in --wm-marke. Das dunkle Rot der Marke liegt
     auf dem Schienengrau bei 1,3:1 und wäre nicht zu lesen — hier gilt
     derselbe helle Ton, den die gewählte Zeile schon trägt. */
  --wm-marke:#ff5a63;
  /* Kastenhöhe, aus der Versalhöhe des Kopfbands gerechnet: 12,24 / 0,5727.
     Die breiteste Wortmarke ist SUMA BOOKING; sie misst damit 123px und
     passt mit dem Griff in die 204er Schiene. */
  --logo-hoehe:21.4px;
  /* Eine Richtung, vier Stufen: jede Zeile wird dunkler, je näher sie
     am Zustand „hier bin ich" ist. Vorher wurde sie beim Zeigen heller
     und beim Wählen dunkler — zwei Richtungen, kein System. */
  --zeile-zeigen:rgba(0,0,0,.14);
  --zeile-druecken:rgba(0,0,0,.22);
  --zeile-hier:rgba(0,0,0,.30);
  --zeile-hier-zeigen:rgba(0,0,0,.38);
  --ampel-gruen:#5fd18d;--ampel-gelb:#f0bc4e;--ampel-rot:#ff8a91;
  grid-area:schiene;background:var(--nav);color:#fff;
  /* Die Zeichenspalte der Schiene liegt in jedem Zustand auf derselben
     Mitte — der, die die eingeklappte Schiene vorgibt (60/2). Aus diesem
     einen Maß rechnen Liste und Nutzerblock ihren Einzug; sonst wandert
     das Zeichen beim Klappen, hier zuletzt der Nutzer um 3px. */
  --liste-rand:calc(var(--schiene-eng) / 2 - 11px - var(--a3));
  --fuss-einzug:calc(var(--liste-rand) + var(--a3) + 11px - var(--feld) / 2);
  display:flex;flex-direction:column;min-height:0}
/* Die drei Spalten teilen sich ein Kopfband: gleiche Höhe, gleiche
   Unterkante, gleiche Logogröße. Sonst wirkt der obere Rand gestuft. */
.schiene-kopf{height:var(--kopf-hoehe);flex:none;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.16);
  /* Links steht der Griff auf derselben Zeichenmitte wie Produkte und
     Nutzer. Rechts schlägt das Logo an und hält denselben Abstand zur
     Fuge wie die Wortmarke der Mitte auf der anderen Seite: beide Logos
     liegen dann spiegelbildlich am Spalt. */
  /* Keine Fuge: der Anfasser des Logos trägt links seine eigenen 8px,
     die zugleich der Abstand zum Griff sind. Nur so bleibt die Schiene
     bei 204px — breiter machte sie allein das Logo. */
  padding:0 var(--rand) 0 var(--fuss-einzug);gap:0}
.portalmarke{height:var(--logo-hoehe);width:auto;flex:none}
/* Oben so viel Luft, wie der Strichkasten unter der Zeile hergibt: dann
   sitzt die Rückzeile mittig zwischen Kopfband und erstem Strich. */
.schiene-liste{flex:1;overflow-y:auto;
  padding:calc(var(--gruppe-hoehe) / 2 + 1px) var(--liste-rand) var(--a3);
  display:flex;flex-direction:column;gap:1px}
/* Feste Kastenhöhe, damit der Titel breit und der Strich eng genau
   gleich viel Platz nimmt — sonst wandern die Punkte beim Klappen. */
/* Ein Strich ohne Wort trennt, was die Rollen unterscheidet, von dem, was
   jeder hat. Er braucht weniger Kasten als ein Gruppentitel — der trägt
   ja noch eine Zeile Text. */
/* width:100%, sonst schrumpft die eng zentrierte Spalte den leeren Kasten
   auf sein Polster — 24px, und der Strich darin wäre 0 breit. Genau so war
   er eingeklappt unsichtbar, während die Höhe stimmte. */
.schiene-gruppe[data-strich]{position:relative;width:100%}
.schiene-gruppe[data-strich]::after{content:"";position:absolute;top:50%;
  left:var(--a3);right:var(--a3);height:1px;background:rgba(255,255,255,.22)}
/* flex:none, sonst schrumpft die Spalte den Kasten, sobald die Liste
   länger wird als die Schiene — und zwar in jedem Zustand anders. */
.schiene-gruppe{height:var(--gruppe-hoehe);flex:none;box-sizing:border-box;
  max-width:100%;display:flex;align-items:center;padding:0 var(--a3);
  white-space:nowrap;overflow:hidden;
  font-size:var(--t12);font-weight:700;letter-spacing:.09em;line-height:15px;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.p-knopf{display:grid;grid-template-columns:22px minmax(0,1fr) auto;
  position:relative;
  align-items:center;gap:var(--a2);width:100%;padding:0 var(--a3);
  /* Eine Zeile ist genau ein Zeichenfeld hoch — breit wie eng. Ohne das
     misst sie breit 38px und eng 34px, und die Punkte wandern beim
     Klappen. flex:none, damit die Spalte sie nicht zusätzlich staucht. */
  height:var(--feld);flex:none;overflow:hidden;
  border-radius:var(--r-2);text-align:left;color:rgba(255,255,255,.94);
  font-size:var(--t13);font-weight:500;transition:background .12s}
.p-knopf:hover{background:var(--zeile-zeigen);color:#fff}
.p-knopf:active{background:var(--zeile-druecken)}
.p-knopf[aria-current="page"]:hover{background:var(--zeile-hier-zeigen)}
.p-knopf[aria-current="page"]{background:var(--zeile-hier);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 #ff5a63}
.p-knopf svg{width:22px;height:22px;display:block}
.p-knopf use[href^="#zg-"]{color:rgba(255,255,255,.94)}
.agent-kopf use[href^="#zg-"]{color:var(--leise)}
.p-knopf .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Menüpunkte tragen kein Zeichen. Sie rücken auf die Textkante der
   Rückzeile ein, damit die zweite Ebene als eine Spalte gelesen wird. */
/* Die Menüzeile ist gebaut wie die Produktzeile, nur ohne Ampel — damit
   sitzt auf 60px jedes Zeichen genau da, wo vorher die Marke stand. */
.p-knopf[data-menue]{grid-template-columns:22px minmax(0,1fr)}
/* „NFC-Karten & Aufsteller" ist länger als die Schiene breit ist. Ein
   Menüpunkt bricht deshalb um, statt sich abschneiden zu lassen — der
   halbe Name nennt die Sache nicht. */
.p-knopf[data-menue] .name{white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.3}
/* Ein Strich wie zwischen den Gruppen, gleich eingerückt — nicht als
   Rahmen über die ganze Breite. Er liegt im Kasten, damit er die Höhe
   nicht ändert: die muss breit und eng dieselbe bleiben. */
/* Die Rückzeile bleibt stehen, wenn die Liste rollt — sonst ist der
   einzige Weg zurück aus dem Produktmenü oben aus dem Bild geschoben. */
.p-zurueck{height:var(--feld);font-weight:700;
  letter-spacing:.04em;border-radius:var(--r-2)}
/* Zwei Klassen, weil .p-knopf weiter unten position:relative setzt und
   sonst gewinnt — dann rollt die Rückzeile doch wieder weg. */
.schiene-liste .p-zurueck{position:sticky;top:0;z-index:1;background:var(--nav)}
.p-knopf .nur-eng{display:none}
.p-zurueck .name{text-transform:uppercase;font-size:var(--t12)}
/* Ampel: grün läuft, gelb eingeschränkt, rot gestört — jeweils als Ring.
   Wo ein Produkt für diese Rolle gar nicht offen ist, steht ein graues
   Schloss. Farbe allein trägt nie die Aussage: das Wort steht im Namen
   des Knopfes, und Ring und Schloss sind auch ohne Farbe zu trennen. */
.punkt{width:10px;height:10px;border-radius:var(--r-pille);flex:none;
  border:2px solid transparent}
.punkt[data-zustand="gruen"]{border-color:var(--ampel-gruen)}
.punkt[data-zustand="gelb"]{border-color:var(--ampel-gelb)}
.punkt[data-zustand="rot"]{border-color:var(--ampel-rot)}
.punkt[data-zustand="schloss"]{border:0;color:var(--wm-ton);opacity:.7}
.punkt svg{width:10px;height:12px;display:block}
/* Nur für die Vorlesehilfe: sichtbar für sie, unsichtbar im Bild.
   Absolut gesetzt, damit der Text kein Rasterfeld belegt — und jedes
   Elternteil unten setzt dafür seinen eigenen Bezugsrahmen. */
.nur-lesen,.zeichenknopf .nur-lesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.p-knopf,.agent-kopf,.marke,.agent-schalter{position:relative}
/* Konto, Hilfe und Kontakt hängen am Benutzer, nicht bei den Produkten —
   deshalb ist der Block unten ein Knopf und kein Schild. */
.schiene-fuss{height:var(--fuss-hoehe);flex:none;
  border-top:1px solid rgba(255,255,255,.16);
  padding:0 var(--a4) 0 var(--fuss-einzug);
  width:100%;text-align:left;color:inherit;position:relative;
  display:grid;grid-template-columns:var(--feld) minmax(0,1fr);gap:var(--a3);
  align-items:center;transition:background .12s}
.schiene-fuss:hover{background:var(--zeile-zeigen)}
.schiene-fuss:active{background:var(--zeile-druecken)}
.schiene-fuss[aria-current="page"]:hover{background:var(--zeile-hier-zeigen)}
.schiene-fuss[aria-current="page"]{background:var(--zeile-hier);
  box-shadow:inset 3px 0 0 #ff5a63}
.avatar{background:rgba(255,255,255,.18);color:#fff;
  border:2px solid var(--ampel-gruen)}
.fuss-text{min-width:0}
.fuss-text b{display:block;font-size:var(--t13);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fuss-rolle{display:flex;align-items:center;gap:var(--a2);font-size:var(--t12);
  color:rgba(255,255,255,.8)}
.fuss-rolle #fussRolle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Mitte ──────────────────────────────────────────────────────── */
.mitte{grid-area:mitte;container-type:inline-size;container-name:mitte;
  display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--flaeche-sanft)}
.mitte-kopf{position:relative;height:var(--kopf-hoehe);flex:none;
  display:flex;align-items:center;
  gap:var(--a3);padding:0 var(--rand);border-bottom:1px solid var(--linie);
  background:var(--flaeche)}
.mitte-kopf h1{font:800 var(--t17)/1.35 var(--anzeige);letter-spacing:-.015em;margin:0}
#kopfWort{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Beim Produkt ist das Logo die Überschrift — der Text daneben wäre
   dieselbe Aussage zweimal. Ein Portalbereich trägt das Portallogo und
   den Bereichsnamen daneben, ruhig gesetzt, nicht als Anzeige. */
/* Die Wortmarke steht in der Schiene. Oben in der Mitte steht der Name des
   Menüpunkts — beides nebeneinander wäre eine Zeile für zwei Namen, von
   denen einer schon links steht. Deshalb trägt der Kopf kein Zeichen. */
.marke{display:flex;align-items:center;gap:var(--a2);min-width:0;flex:1 1 auto}
.kopf-werkzeuge{display:flex;gap:var(--a2);flex:none}
.mitte-rumpf{flex:1;overflow-y:auto;padding:var(--rand);min-height:0}
/* Die Werkzeugleiste läuft auf einer Linie mit dem Nutzerblock der
   Schiene — dieselbe Höhe, dieselbe Oberkante. Sie zeigt, was im
   gerade offenen Bereich getan werden kann; hat ein Bereich nichts
   zu tun, steht sie nicht da. */
.werkzeuge{display:none;height:var(--fuss-hoehe);flex:none;align-items:center;
  gap:var(--a2);padding:0 var(--rand);border-top:1px solid var(--linie);
  background:var(--flaeche);overflow-x:auto;scrollbar-width:none}
.werkzeuge::-webkit-scrollbar{display:none}
.werkzeuge[data-hat="ja"]{display:flex}
.werkzeuge .knopf{flex:none}
.werkzeug-luecke{flex:1;min-width:var(--a2)}
.werkzeug-stand{flex:none;font-size:var(--t12);color:var(--leise);white-space:nowrap}


/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:var(--a2);padding:7px var(--a4);
  border-radius:var(--r-2);font-size:var(--t13);font-weight:500;
  border:1px solid var(--linie-stark);background:var(--flaeche);
  transition:background .12s,border-color .12s}
.knopf:hover{background:var(--zeigen)}
.knopf:active{background:var(--druecken)}
.knopf[data-art="stark"]{background:var(--rot-flaeche);border-color:var(--rot-flaeche);
  color:#fff;font-weight:700}
.knopf[data-art="stark"]:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.knopf[disabled]{opacity:.5;cursor:not-allowed}

/* ── Kacheln ────────────────────────────────────────────────────── */
.block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-2);
  overflow:hidden;margin-bottom:var(--a5)}
.block-kopf{display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;
  padding:var(--a2) var(--karte);border-bottom:1px solid var(--linie)}
.block-kopf h2{font:700 var(--t15)/1.3 var(--ui);flex:1 1 auto;min-width:0}
.block-kopf .hinweis{font-size:var(--t12);color:var(--leise)}
/* Der Blocktitel wird zum Öffner: derselbe Text, dieselbe Stelle, nur mit
   einem Pfeil davor. Zugeklappt misst jeder Block dasselbe — sonst steht
   „Intern" ohne Knopf zwei Pixel niedriger als „Extern" mit. */
.block-kopf{min-height:var(--block-kopf);box-sizing:border-box}
/* Der Pfeil steht rechts vom Wort, nicht davor: gelesen wird der Titel,
   der Pfeil sagt danach, dass es weitergeht. Als Zeichen, nicht als
   Schriftzeichen — ▸ ist in jeder Schrift anders groß. */
.block-falten{display:flex;align-items:center;gap:var(--a2);flex:0 1 auto;
  min-width:0;text-align:left;color:inherit;margin-right:auto}
.block-falten h2{flex:0 1 auto}
.falt-pfeil{width:16px;height:16px;flex:none;color:var(--leise);
  transition:transform .12s}
.block-falten:hover .falt-pfeil,.kunde-oeffner:hover .falt-pfeil{color:var(--rot-text)}
[aria-expanded="true"] > .falt-pfeil{transform:rotate(90deg)}
.block-falten:hover h2{color:var(--rot-text)}
.feldliste li.konto-neu{display:block}
.konto-neu > .knopf{display:inline-flex;align-items:center;gap:var(--a2);width:auto}
.konto-neu svg{width:16px;height:16px;flex:none}
.konto-formular .formular{padding:0;gap:var(--a3)}
/* Wer die Kundenansicht anhat, muss es sehen, bevor er etwas tut. Das Band
   sitzt deshalb im Kopfband, neben dem Logo — es nimmt dem Inhalt keine
   Höhe weg, denn die Ansicht muss dieselbe sein, die der Kunde sieht. */
.kundenband[hidden]{display:none}
/* Das ganze Kopfband wird rot, nicht nur ein Schild darin: wer in der
   Kundenansicht ist, soll es nicht übersehen können. Das Wort steht
   mittig über der Spalte, Firma und Ausstieg bleiben rechts. */
.kundenband{display:flex;align-items:center;gap:var(--a3);min-width:0;
  margin-left:auto}
.kundenband b{position:absolute;left:50%;transform:translateX(-50%);
  font-size:var(--t13);font-weight:700;letter-spacing:.09em;
  white-space:nowrap;pointer-events:none}
.kundenband span{font-size:var(--t12);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal[data-kundenansicht] .mitte-kopf{background:var(--rot-flaeche);
  border-bottom-color:var(--rot-flaeche);
  --wm-ton:#ffffff;--wm-wort:#ffffff;--wm-marke:#ffffff;
  --wm-gegen:var(--rot-flaeche);--fokus:#ffffff;color:#fff;
  /* Sonst legt sich beim Zeigen die helle Flaeche unter das weisse
     Zeichen: 1,13:1, der Knopf verschwindet unter dem Zeiger. */
  --zeigen:rgba(255,255,255,.18)}
.portal[data-kundenansicht] .mitte-kopf .kundenband b,
.portal[data-kundenansicht] .mitte-kopf .kundenband span,
.portal[data-kundenansicht] .mitte-kopf h1{color:#fff}
.portal[data-kundenansicht] .mitte-kopf .zeichenknopf{color:#fff}
.portal[data-kundenansicht] .mitte-kopf .knopf{background:#fff;
  border-color:#fff;color:#b8050f}
/* Formular: Beschriftung über dem Feld. Die Spalte in der Mitte wird
   schmal, sobald der Assistent aufklappt — nebeneinander bräche das um. */
.formular{display:flex;flex-direction:column;gap:var(--a4);padding:var(--karte)}
.formular-zeile{display:flex;flex-direction:column;gap:var(--a2)}
.formular .hinweis{font-size:var(--t12);color:var(--leise)}
.betreff{display:block;width:100%;padding:var(--a3);border-radius:var(--r-2);
  border:1px solid var(--umriss);background:var(--flaeche);
  font:400 var(--t13)/1.5 var(--ui);color:var(--schrift);
  font-variant-numeric:tabular-nums}
.betreff::placeholder{color:var(--leise)}
.formular textarea{width:100%;padding:var(--a3);border-radius:var(--r-2);
  border:1px solid var(--umriss);background:var(--flaeche);
  font:400 var(--t13)/1.5 var(--ui);color:var(--schrift);resize:vertical}
.formular textarea::placeholder{color:var(--leise)}
.formular-fuss{display:flex;align-items:center;gap:var(--a2)}
/* Beschriftung, Wert, Aktion — dieselbe Zeile in allen Portalbereichen. */
/* Eine Knopfspalte statt vieler Breiten: „Kundenansicht", „Ändern" und
   „Einladen" standen sonst je nach Wortlänge versetzt. */
.feldliste li{display:grid;
  grid-template-columns:minmax(0,1fr) auto var(--knopf-spalte);
  gap:var(--a3);align-items:center;padding:var(--a3) var(--karte);
  border-bottom:1px solid var(--linie)}
.feldliste li:last-child{border-bottom:0}
/* Aufgeklappte Zeile: eigener Grund, damit sie als Inhalt der Zeile
   darüber gelesen wird und nicht als nächster Punkt. */
.feld-aufklapp{display:block;background:var(--flaeche-sanft)}
.feld-aufklapp .anleitung{padding:var(--a3) var(--karte) var(--karte)}
.feld-name{font-size:var(--t13);font-weight:500;min-width:0;
  overflow-wrap:anywhere}
.feld-wert{font-size:var(--t13);color:var(--leise);white-space:nowrap}
.feldliste li > .knopf{width:100%;justify-content:center}
.feldliste-schmal li{grid-template-columns:minmax(0,1fr) auto}
.feld-wert a{color:var(--rot-text);text-decoration:underline;
  text-underline-offset:2px}
.feld-wert a:hover{color:var(--schrift)}
/* Aufklappbare Firma: der Name ist der Öffner, die Konten rücken ein. */
.kunde-oeffner{display:flex;align-items:center;gap:var(--a2);text-align:left;
  font-size:var(--t13);font-weight:500;min-width:0}
.kunde-oeffner:hover{color:var(--rot-text)}
.kunde-zeile[data-auf="ja"]{background:var(--flaeche-sanft)}
/* Die aufgeklappten Konten sind ein Rasterfeld der Zeile darüber und
   standen sonst in deren erster Spalte — 172px zu schmal, die Knöpfe
   damit versetzt. */
.feldliste li.kunde-leute{display:block;grid-column:1 / -1;padding:0 0 0 var(--a5);background:var(--flaeche-sanft);
  border-bottom:1px solid var(--linie)}
.kunde-leute .feld-name{font-weight:400;color:var(--leise)}
.kunde-leute li{padding-top:var(--a2);padding-bottom:var(--a2)}

.pille{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:var(--r-1);font-size:var(--t12);font-weight:700;white-space:nowrap}
.pille[data-ton="gut"]{background:var(--gruen-hauch);color:var(--gruen-text)}
.pille[data-ton="warn"]{background:var(--gelb-hauch);color:var(--gelb-text)}
.pille[data-ton="stopp"]{background:var(--rot-hauch);color:var(--rot-text)}
.pille[data-ton="grau"]{background:var(--zeigen);color:var(--leise)}
.wahl{display:flex;gap:var(--a1);flex-wrap:wrap}
.wahl button{padding:4px var(--a3);border-radius:var(--r-1);font-size:var(--t12);
  border:1px solid var(--linie-stark);background:var(--flaeche);color:var(--leise)}
.wahl button:hover{background:var(--zeigen);color:var(--schrift)}
.wahl button[aria-checked="true"]{background:var(--rot-flaeche);border-color:var(--rot-flaeche);
  color:#fff;font-weight:700}

/* ── Deckblatt eines Produkts ───────────────────────────────────── */
.deckblatt{max-width:640px}
/* Alle Deckblätter tragen dieselbe Form: zwei Zeilen Schlagzeile,
   zwei Zeilen Erklärung, drei Nutzenpunkte. So springt beim
   Durchklicken keine Zeile. */
.deckblatt .schlagzeile{font:800 var(--t40)/1.12 var(--anzeige);letter-spacing:-.025em;
  margin-bottom:var(--a4);min-height:calc(2 * 1.12em)}
.deckblatt .schlagzeile em{font-style:normal;color:var(--rot)}
.deckblatt > p{color:var(--leise);margin-bottom:var(--a5);max-width:52ch;
  min-height:calc(2 * 1.5em)}
.nutzen{display:grid;gap:var(--a2);margin-bottom:var(--a5)}
.nutzen li{display:grid;grid-template-columns:var(--a5) minmax(0,1fr);gap:var(--a3);
  align-items:start;font-size:var(--t13)}
.haken{width:var(--a5);height:var(--a5);border-radius:var(--r-pille);background:var(--rot-hauch);
  color:var(--rot-text);display:grid;place-items:center;font-size:var(--t12);
  font-weight:700;margin-top:1px}
.deckblatt-werkzeuge{display:flex;gap:var(--a2);flex-wrap:wrap}
.gesperrt-hinweis,.lage-hinweis{margin-top:var(--a5);padding:var(--a3) var(--a4);
  border-radius:var(--r-2);font-size:var(--t13);font-weight:500;
  min-height:calc(2 * 1.5em + 2 * var(--a3));display:flex;align-items:center}
.gesperrt-hinweis{background:var(--zeigen);color:var(--leise)}
.lage-hinweis[data-lage="gruen"]{background:var(--gruen-hauch);color:var(--gruen-text)}
.lage-hinweis[data-lage="gelb"]{background:var(--gelb-hauch);color:var(--gelb-text)}
.lage-hinweis[data-lage="rot"]{background:var(--rot-hauch);color:var(--rot-text)}

/* Anleitung: zwei Wege nebeneinander, nummeriert, ohne Bilder — wer sie
   liest, hat das Gerät in der Hand und braucht Worte, keine Screenshots. */
.anleitung{padding:var(--karte)}
.anleitung-warum{font-size:var(--t13);color:var(--leise);max-width:62ch;
  margin-bottom:var(--a5)}
.anleitung-weg{margin-bottom:var(--a5)}
.anleitung-weg:last-child{margin-bottom:0}
.anleitung-weg h3{font:700 var(--t15)/1.3 var(--ui)}
.anleitung-weg > p{font-size:var(--t12);color:var(--leise);margin:2px 0 var(--a3)}
.anleitung ol{counter-reset:schritt;display:grid;gap:var(--a2)}
.anleitung li{counter-increment:schritt;display:grid;
  grid-template-columns:22px minmax(0,1fr);gap:var(--a3);
  align-items:baseline;font-size:var(--t13)}
.anleitung li::before{content:counter(schritt);justify-self:start;
  width:22px;height:22px;border-radius:var(--r-pille);
  background:var(--rot-hauch);color:var(--rot-text);
  display:grid;place-items:center;font-size:var(--t12);font-weight:700}

/* Startseite. Drei Ebenen, klar getrennt: der Tag, die Ansprache, das
   Wartende. Der Abstand zwischen ihnen wächst nach unten — so liest sich
   von oben nach unten, ohne dass etwas gleich wichtig wirkt. */
.start{max-width:720px;padding-top:var(--a5)}
.start-tag{font-size:var(--t13);color:var(--sehr-leise);letter-spacing:.02em}
.start-gruss{font:800 var(--t40)/1.1 var(--anzeige);letter-spacing:-.025em;
  margin-top:var(--a2)}
.start-gruss em{font-style:normal;color:var(--rot)}
.start-satz{color:var(--leise);margin-top:var(--a4);max-width:52ch;
  font-size:var(--t15)}
.start-titel{font:700 var(--t13)/1.2 var(--ui);letter-spacing:.09em;
  text-transform:uppercase;color:var(--sehr-leise);margin-top:var(--a7)}
.start-kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--a3);margin-top:var(--a3)}
.start-kachel{display:grid;align-content:start;text-align:left;
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-3);padding:var(--a4) var(--a4) var(--a3);
  transition:border-color .12s,background .12s}
.start-kachel:hover{border-color:var(--linie-stark);background:var(--flaeche-sanft)}
.start-kachel b{font:800 var(--t40)/1 var(--anzeige);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.start-kachel b[data-ton="warn"]{color:var(--gelb-text)}
.start-kachel b[data-ton="stopp"]{color:var(--rot-text)}
.start-kachel b[data-ton="gut"]{color:var(--gruen-text)}
.start-kachel span{font-size:var(--t13);margin-top:var(--a2);
  min-height:calc(2 * 1.4em);line-height:1.4}
.start-kachel em{display:flex;align-items:center;gap:var(--a1);
  font-style:normal;font-size:var(--t12);color:var(--leise);
  margin-top:var(--a3);padding-top:var(--a3);border-top:1px solid var(--linie)}
.start-kachel em svg{width:13px;height:13px;margin-left:auto}
.start-kachel:hover em{color:var(--rot-text)}

.leer{display:grid;place-items:center;text-align:center;gap:var(--a3);
  padding:var(--a7) var(--a5);color:var(--leise)}
.leer b{font:800 var(--t17)/1.3 var(--anzeige);color:var(--schrift)}
.leer p{font-size:var(--t13);max-width:38ch}

/* ── Agentenspalte. Die Breite ist Absicht: hier steht Text, sobald
   SUMA AI verbunden ist. Deshalb volle Höhe und ein echtes Gespräch. */
.agent{grid-area:agent;display:flex;flex-direction:column;min-height:0;
  background:var(--flaeche);border-left:1px solid var(--linie);position:relative}
/* Ein Griff von 8px, der auf 2px sichtbar wird: breit genug zum Treffen,
   schmal genug, um nicht als Trennung zu wirken. */
.agent-griff{position:absolute;top:0;bottom:0;left:-7px;width:14px;z-index:5;
  cursor:col-resize;touch-action:none}
.agent-griff::before{content:"";position:absolute;top:50%;left:4px;
  width:6px;height:34px;margin-top:-17px;border-radius:var(--r-pille);
  background:var(--leise);transition:background .12s,height .12s}
.agent-griff:hover::before,.agent-griff:focus-visible::before,
.portal[data-zieht="ja"] .agent-griff::before{background:var(--fokus)}
.agent-griff::after{content:"";position:absolute;top:0;bottom:0;left:6px;width:2px;
  background:var(--fokus);opacity:0;transition:opacity .12s}
.agent-griff:hover::after,.agent-griff:focus-visible::after,
.portal[data-zieht="ja"] .agent-griff::after{opacity:1}
.agent-griff:focus-visible{outline:0}
.portal[data-zieht="ja"]{cursor:col-resize;user-select:none}
.portal[data-agent="zu"] .agent-griff{display:none}
.agent-kopf{height:var(--kopf-hoehe);flex:none;display:flex;align-items:center;
  gap:var(--a2);padding:0 var(--a2) 0 var(--rand);border-bottom:1px solid var(--linie)}
.agent-kopf svg{width:24px;height:24px;flex:none}
/* Die Wortmarke des Portals gibt es nur als Pfade für Produktnamen.
   SUMA AGENT ist kein Produkt — deshalb hier dieselbe Schrift als Text:
   Helvetica Neue Light, SUMA im Ton der Wortmarke, der Zusatz in Rot. */
.wm-schrift{font:300 var(--wm-grad)/1.2 "Helvetica Neue","Helvetica Neue Light",
    Helvetica,Arial,sans-serif;
  -webkit-text-stroke:0.43px currentColor;
  letter-spacing:.01em;color:var(--wm-ton);flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-schrift em{font-style:normal;color:var(--wm-rot)}
.agent-lauf{flex:1;overflow-y:auto;padding:var(--a4) var(--rand);display:flex;
  flex-direction:column;gap:var(--a3);min-height:0}
.sprech{max-width:88%;padding:var(--a2) var(--a3);border-radius:var(--r-2);
  font-size:var(--t13);line-height:1.45}
.sprech[data-von="ai"]{background:var(--flaeche-sanft);border:1px solid var(--linie);
  align-self:flex-start;border-bottom-left-radius:var(--r-1)}
.sprech[data-von="ich"]{background:var(--rot-flaeche);color:#fff;align-self:flex-end;
  border-bottom-right-radius:var(--r-1)}
.sprech ul{margin-top:var(--a2);display:grid;gap:3px}
.sprech li{padding-left:var(--a3);position:relative}
.sprech li::before{content:"·";position:absolute;left:4px;color:var(--rot);font-weight:700}
/* Der Assistent ist keine Suchzeile. Von unten nach oben: Bedienreihe,
   Textfeld, Kontextfeld (markiertes Element oder Vorschläge), Verlauf.
   Später steht im Kontextfeld das Element, das der Kunde im Builder
   angeklickt hat — darunter schreibt er, was daran geändert werden soll. */
.agent-kontext{display:flex;gap:var(--a1);align-items:center;
  padding:var(--a3) var(--rand) var(--a2);min-height:46px;
  overflow-x:auto;scrollbar-width:none}
.agent-kontext::-webkit-scrollbar{display:none}
.agent-kontext button{flex:none;white-space:nowrap}
.agent-kontext button{padding:4px var(--a3);border-radius:var(--r-1);
  font-size:var(--t12);border:1px solid var(--linie-stark);color:var(--leise);
  background:var(--flaeche)}
.agent-kontext button:hover{background:var(--zeigen);color:var(--schrift)}
.agent-kontext:has(.markiert){flex-wrap:wrap;overflow:visible}
.markiert{display:flex;align-items:center;gap:var(--a2);width:100%;min-width:0;
  padding:var(--a2) var(--a3);border-radius:var(--r-2);background:var(--flaeche);
  border:1px solid var(--rot-flaeche);font-size:var(--t13)}
.markiert svg{width:16px;height:16px;flex:none;color:var(--rot-text)}
.markiert b{font-weight:700;white-space:nowrap}
.markiert span{color:var(--leise);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.markiert button{flex:none;border:0;background:none;padding:2px 6px;color:var(--leise)}
.markiert-text{width:100%;font-size:var(--t12);color:var(--leise);line-height:1.45}
/* Markiermodus: alles Erklärbare zeigt sich, der Rest bleibt ruhig. */
.portal[data-markieren="ja"] [data-erklaer]{cursor:crosshair;
  outline:1px dashed var(--linie-stark);outline-offset:1px}
.portal[data-markieren="ja"] [data-erklaer]:hover{outline:2px solid var(--rot-flaeche);
  outline-offset:1px}
#markieren[aria-pressed="true"]{background:var(--rot-hauch);color:var(--rot-text)}

.agent-fuss{padding:var(--a3) var(--rand) var(--a4);display:grid}
/* Textfeld und Bedienreihe sind eine Fläche, kein Stapel aus Kästen.
   Der Rahmen gehört dem Feld, nicht jedem Teil darin. */
.eingabefeld{border:1px solid var(--umriss);border-radius:var(--r-3);
  background:var(--flaeche-sanft);display:grid;overflow:hidden}
.eingabefeld:focus-within{border-color:var(--fokus);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--fokus) 22%, transparent)}
.agent-fuss textarea{width:100%;min-width:0;padding:var(--a3) var(--a3) var(--a2);
  border:0;background:none;color:var(--schrift);font:inherit;font-size:var(--t13);
  resize:none;min-height:66px;outline:0}
.agent-fuss textarea::placeholder{color:var(--sehr-leise)}
.agent-reihe{display:flex;align-items:center;gap:var(--a2);padding:0 var(--a2) var(--a2)}
.agent-reihe .knopf{margin-left:auto}
.reihe-luecke{display:none}

/* Ein Knopf, der nur ein Zeichen trägt — überall gleich groß und benannt. */
/* ── Zeichenknöpfe ───────────────────────────────────────────────────
   Ein Knopf ohne Wort ist überall dasselbe Ding: ein Quadrat von
   --feld mit --r-2 und einem Zeichen von --feld-zeichen. Zwei
   Ausprägungen, je nach Aufgabe: „ruhig" für Handlungen innerhalb einer
   Fläche, „gefasst" für die Klappgriffe, die man finden können muss. */
.zeichenknopf,.schiene-falten,.schiene-zu,.avatar,.streifen-zeichen{
  box-sizing:border-box;width:var(--feld);height:var(--feld);
  border-radius:var(--r-2);display:grid;place-items:center;flex:none}
.zeichenknopf>svg,.schiene-falten>svg,.schiene-zu>svg,.avatar>svg{
  width:var(--feld-zeichen);height:var(--feld-zeichen)}
.streifen-zeichen{padding:calc((var(--feld) - var(--feld-zeichen)) / 2)}

.zeichenknopf{color:var(--leise);position:relative}
.zeichenknopf:hover{background:var(--zeigen);color:var(--schrift)}
/* Kein Sonderfall: der Griff des Assistenten sah gefasst aus — Fläche und
   Rand —, jeder andere Zeichenknopf nicht. Beim Zeigen sprang deshalb bei
   dem einen ein Rahmen auf und beim anderen nur eine Fläche. Jetzt tragen
   alle dieselbe Fläche und keinen Rand. */
.agent-kopf .zeichenknopf,.streifen-zeichen{color:var(--schrift)}
.agent-kopf .zeichenknopf{margin-left:auto}

/* Zugeklappt bleibt der Assistent als Streifen stehen — er verschwindet
   nie ganz, sonst weiß niemand, dass es ihn gibt. Nur das Zeichen; die
   Ampel steht im Kopf, sobald er offen ist. */
.agent-streifen{display:none;width:100%;height:100%;padding:0;
  flex-direction:column;align-items:center;justify-content:flex-start;
  color:var(--leise)}
.streifen-zeichen{margin-top:calc((var(--kopf-hoehe) - var(--feld)) / 2)}
/* Der Streifen ist hoch und schmal — die Wortmarke liest sich darin von
   oben nach unten. writing-mode dreht die Schrift, nicht den Kasten. */
.streifen-wort{writing-mode:vertical-rl;text-orientation:mixed;
  margin-top:var(--a3);letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-height:0}
.agent-streifen:hover{background:var(--zeigen);color:var(--schrift)}

.portal[data-agent="zu"] .agent-streifen{display:flex}
.portal[data-agent="zu"] .agent > :not(.agent-streifen){display:none}
/* Schmal gibt es keinen Streifen: ein Balken über die volle Höhe kostet
   dort zu viel. Der Öffner sitzt in der Kopfzeile, rechts vom Logo. */
/* Der Schleier liegt über dem Rest, solange die Schublade offen ist:
   er dämpft, was dahinter liegt, und schließt bei einem Tipp. */
.schleier{display:none;position:absolute;inset:0;z-index:5;
  background:rgba(20,19,17,.5)}
/* ── Die installierte Fassung ────────────────────────────────────────
   Auf dem Homescreen fällt die Adressleiste weg; die unteren Pixel
   gehören der Anwendung. Erst dann lohnt eine Leiste im Daumenbogen.
   Unten stehen Orte, nie Zustände — der Assistent ist eine Handlung und
   deshalb ein schwebender Knopf, kein vierter Reiter. Die Reiter eines
   Bereichs bleiben oben am Inhalt: zwei Zeilen am unteren Rand kann
   niemand auseinanderhalten. */
.leiste{display:none;grid-area:leiste;grid-template-columns:repeat(3,1fr);
  background:var(--flaeche);border-top:1px solid var(--linie);
  padding:var(--a2) var(--a2) calc(var(--a2) + env(safe-area-inset-bottom,0px))}
.leiste-knopf{display:grid;place-items:center;padding:var(--a2) 0;color:var(--leise)}
.leiste-knopf>svg{box-sizing:border-box;width:var(--feld);height:var(--feld);
  padding:calc((var(--feld) - var(--feld-zeichen)) / 2);border-radius:var(--r-2)}
.leiste-knopf:hover>svg{background:var(--zeigen)}
.leiste-knopf:hover{color:var(--schrift)}
.leiste-knopf[aria-current="page"]{color:var(--rot-text)}
.leiste-knopf[aria-current="page"]>svg{background:var(--rot-hauch)}

/* Zwei Knöpfe, die es nur schmal gibt: Menü links, Assistent rechts.
   Breit sind beide Spalten sichtbar und brauchen keinen Öffner. */
.nur-schmal{display:none}
/* Zuklappen der Schiene — gespiegelt zum Assistenten: derselbe Griff,
   derselbe Platz am eigenen Rand der Spalte. */
/* Auf dem Schienengrau gilt dasselbe: eine Fläche beim Zeigen, kein Rand.
   Der Faltpfeil trug als einziger einen. */
.schiene-falten{color:#fff}
.schiene-falten:hover{background:rgba(255,255,255,.12)}
/* Zugeklappt bleibt die Schiene als Zeichenspalte stehen — wie der
   Assistent auch. Ganz weg wäre sie unauffindbar. */
.portal[data-navi="zu"]{--schiene-eng:60px}

/* Das Portallogo in der Schiene ist der Weg nach Hause. */
.portalheim{display:flex;align-items:center;min-width:0;flex:0 1 auto;
  border-radius:var(--r-2);padding:var(--a1) var(--a2);
  /* Die eigene Polsterung des Anfassers zieht das Logo von der Kante weg
     — außen wieder abziehen, damit der Abstand gilt, den man sieht. */
  margin-left:auto;margin-right:calc(var(--a2) * -1)}
.portalheim:hover{background:rgba(255,255,255,.12)}

/* Schmal wird die Schiene zur Liste über der ganzen Fläche; geöffnet wird
   sie am Logo, weil dort steht, wo man gerade ist. */
.schiene-zu{display:none;color:rgba(255,255,255,.78)}
.schiene-zu:hover{background:rgba(255,255,255,.12);color:#fff}

.agent-schalter{display:inline-flex}

/* ══ Umbruch 1: unter 1080px verliert die Schiene ihre Beschriftung ══
   Acht Zeichen sind wiedererkennbar, acht Namen kosten 150 Pixel. */
@container portal (min-width:560px){
  .portal[data-navi="auf"]{grid-template-columns:var(--schiene) minmax(0,1fr) var(--agent-breite)}
  .portal[data-navi="zu"]{grid-template-columns:var(--schiene-eng) minmax(0,1fr) var(--agent-breite)}
}
@container portal (min-width:560px) and (max-width:1079px){
  .portal[data-navi="auf"]{grid-template-columns:var(--schiene) minmax(0,1fr) var(--agent-breite)}
  .portal[data-navi="auf"][data-agent="zu"]{
    grid-template-columns:var(--schiene) minmax(0,1fr) 44px}
}
.portal[data-agent="zu"]{grid-template-columns:var(--schiene) minmax(0,1fr) 44px}
@container portal (min-width:560px){
  .portal[data-navi="zu"][data-agent="zu"]{
    grid-template-columns:var(--schiene-eng) minmax(0,1fr) 44px}
  .portal[data-navi="auf"][data-agent="zu"]{
    grid-template-columns:var(--schiene) minmax(0,1fr) 44px}
}
@container portal (max-width:1079px){
  .portal[data-agent="zu"]{grid-template-columns:var(--schiene-eng) minmax(0,1fr) 44px}
}
/* Auf Schienenbreite: nur Zeichen, kein Wort. Gilt für beide Wege, die
   dorthin führen — enges Fenster oder zugeklappte Schiene. */
@container navi (max-width:96px){
  /* Auf Schienenbreite trägt der Kopf nur den Pfeil zurück. Das Logo
     hätte dort kein Wort mehr und nur den Platz genommen. */
  .schiene-kopf{justify-content:center;padding:0}
  .portalheim{display:none}
  .schiene-falten,.p-knopf,.avatar{width:var(--feld);
    height:var(--feld);border-radius:var(--r-2)}
  .schiene-falten{margin-left:0}
  /* Das Wort passt nicht mehr, sein Platz muss aber bleiben — sonst
     rutschen die Produkte beim Klappen hoch. Also ein Strich in
     derselben Kastenhöhe. */
  .schiene-gruppe{color:transparent;overflow:hidden;position:relative}
  .schiene-gruppe::after{content:"";position:absolute;top:50%;
    left:var(--a3);right:var(--a3);height:1px;background:rgba(255,255,255,.22)}
  /* Der Rollbalken nahm 11 der 60px und schob die Zeichenspalte 5,5px
     aus der Mitte. Eng wird er ausgeblendet — gerollt wird trotzdem. */
  .schiene-liste{padding-left:0;padding-right:0;align-items:center;
    scrollbar-width:none}
  .schiene-liste::-webkit-scrollbar{display:none}
  .p-knopf{grid-template-columns:22px;justify-content:center;justify-self:center;
    place-content:center;padding:0;position:relative}
  .p-knopf .name{display:none}
  /* Menüpunkte tragen kein Zeichen, sondern ihr Kürzel — sonst stünde
     dort ein leerer Kasten. Kasten und Abstand bleiben dieselben wie bei
     den Produkten, damit beim Klappen nichts springt. */
  /* .p-knopf[data-menue] ist spezifischer als .p-knopf — ohne diese
     Zeile behielte die Menüzeile ihre zweite Spalte und das Zeichen
     stünde am linken Rand statt in der Mitte. */
  .p-knopf[data-menue]{grid-template-columns:22px}
  /* Eng zeigt die Rückzeile die Marke des Produkts: ein zweiter Pfeil
     direkt unter dem Faltpfeil wäre nicht zu unterscheiden. Der Strich
     darunter entfällt, sonst steht dort ein halber Kasten. */
  .p-knopf .nur-eng{display:block}
  .p-knopf .nur-breit{display:none}
  .p-knopf .punkt{position:absolute;top:5px;right:5px}
  .schiene-fuss{grid-template-columns:var(--feld);justify-content:center;
    padding:0}
  .fuss-text{display:none}
}

/* Die zweite Ebene lebt von ihren Wörtern: auf 60px stünden zwölf Punkte
   namenlos untereinander. Für das Menü macht die Schiene deshalb wieder
   auf, und der Inhalt rückt zusammen. */
@container portal (min-width:560px) and (max-width:1079px){
  .portal[data-ebene="menue"]:not([data-navi="zu"]){
    grid-template-columns:var(--schiene) minmax(0,1fr) var(--agent-breite)}
  .portal[data-ebene="menue"][data-agent="zu"]:not([data-navi="zu"]){
    grid-template-columns:var(--schiene) minmax(0,1fr) 44px}
}
@container portal (max-width:1079px){
  .portal{--agent-breite:272px}
  .portal{grid-template-columns:var(--schiene-eng) minmax(0,1fr) var(--agent-breite)}

  /* Der Rand gilt für beide Seiten der Fuge: die Mitte hält ihn links,
     das Logo der Schiene rechts. */
  .mitte,.schiene,.agent{--rand:var(--a4)}
}

/* ══ Umbruch 2: unter 820px zieht der Agent aus der Spalte in eine
   Schublade. Er verschwindet nicht — er wartet hinter einem Knopf. ══ */
@container portal (max-width:819px){
  /* Keine Schublade mehr: dieselbe Form wie oben, nur enger. */
  .portal{grid-template-columns:var(--schiene-eng) minmax(0,1fr) minmax(0,264px)}
  .portal[data-agent="zu"]{grid-template-columns:var(--schiene-eng) minmax(0,1fr) 44px}
}

/* ══ Umbruch 3: unter 560px eine Spalte. Die Schiene wird zur
   waagerechten Leiste am unteren Rand — Daumenweite, nicht Mausweite. ══ */
@container portal (max-width:559px){
  /* Schmal ist genau eine Fläche sichtbar: die Mitte, oder der Assistent.
     Menü und Assistent werden in der Kopfzeile gerufen. */
  .portal,.portal[data-agent="auf"],.portal[data-agent="zu"]{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"mitte"}
  /* Installiert: Leiste unten, Knöpfe oben weg, Produktliste als Seite
     statt als Schublade — sie ist dort ein Ort, kein Überlagern. */
  .buehne[data-liefer="pwa"] .portal,
  .buehne[data-liefer="pwa"] .portal[data-agent="auf"],
  .buehne[data-liefer="pwa"] .portal[data-agent="zu"]{
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"mitte" "leiste"}
  .buehne[data-liefer="pwa"] .leiste{display:grid}

  /* Absolut gesetzte Kinder eines Rasters nehmen ihre Rasterfläche als
     Bezug: so endet die Schublade über der Leiste, statt sie zu decken.
     Vorher lag sie über allen drei Reitern. */
  .buehne[data-liefer="pwa"] .schiene,
  .buehne[data-liefer="pwa"] .schleier{grid-area:mitte}
  .buehne[data-liefer="pwa"] .nur-schmal{display:none}
  .buehne[data-liefer="pwa"] .schiene-fuss{display:none}
  .buehne[data-liefer="pwa"] #agentZu{display:none}

  /* Am Daumen misst man anders als an der Maus: das Zeichenfeld wächst
     auf 44px — die kleinste Fläche, die Apple und Google nennen — und
     der Abstand dazwischen wächst mit, sonst trifft man den Nachbarn.
     Eine Behälterabfrage darf ihren eigenen Behälter nicht setzen,
     deshalb steht der Wert an den Spalten. */
  .schiene,.mitte,.agent,.leiste{--feld:44px;--feld-zeichen:21px}
  /* Der Benutzerblock hat 64px geerbt, das Zeichenfeld darin ist am
     Daumen aber 44px hoch: 12 + 44 + 12 sind 68 und ragten heraus. */
  .schiene{--fuss-hoehe:72px;--liste-rand:var(--a3)}
  .agent-reihe{gap:var(--a3)}
  .portal[data-agent="auf"] .mitte{display:none}
  .portal[data-agent="auf"] .agent{grid-area:mitte}
  /* Auf einer Spalte gibt es nichts zu ziehen — der Zipfel stünde nur
     5px über den Rand hinaus. */
  .agent-griff{display:none}
  .portal[data-agent="zu"] .agent{display:none}
  .schiene-falten{display:none}
  .schiene{position:absolute;inset:0 auto 0 0;grid-area:auto;
    width:min(50%,280px);z-index:6;display:none;
    box-shadow:14px 0 40px -18px rgba(0,0,0,.55)}
  /* Produktnamen sind kurz, Menüpunkte nicht: „NFC-Karten & Aufsteller"
     braucht Breite. Die Schublade wächst deshalb mit der Ebene. */
  .portal[data-ebene="menue"] .schiene{width:min(80%,320px)}
  .portal[data-schiene="auf"] .schleier{display:block}
  .portal[data-schiene="auf"] .schiene{display:flex}
  /* In der Schublade gibt es keinen Griff links; das Logo steht wieder
     am linken Rand, das Kreuz am rechten. */
  .portal[data-schiene="auf"] .schiene-kopf{justify-content:space-between;
    padding:0 var(--a2) 0 var(--a4)}
  .portal[data-schiene="auf"] .portalheim{margin-left:calc(var(--a2) * -1);
    margin-right:0}
  .portal[data-schiene="auf"] .schiene-zu{display:grid}
  .schiene-liste{padding:var(--a2) var(--liste-rand) var(--a4);flex-direction:column}
  .p-knopf{height:var(--feld);grid-template-columns:22px minmax(0,1fr) auto;
    justify-content:stretch;padding:var(--a2) var(--a3)}
  .p-knopf .punkt{position:static}
  .schiene-liste .name{display:block;font-size:var(--t15)}
  /* Kein display:block hier: die Grundregel setzt flex + align-items
     center. Als Block stand der Titel oben im 28px-Kasten — 0 über,
     13 unter dem Wort — und klebte an der Zeile darüber. */
  .schiene-fuss{grid-template-columns:var(--feld) minmax(0,1fr);
    justify-content:stretch;padding-block:var(--a3)}
  .fuss-text{display:block}
  /* Installiert ist die Produktliste ein Ort, kein Überlagern: sie füllt
     die Fläche des Inhalts — ohne Vorhang, ohne Schließkreuz. Zurück
     führt der Reiter unten oder die Wahl eines Eintrags. Im Browser
     bleibt sie eine Schublade, dort ist Überlagern das Gewohnte. */
  .buehne[data-liefer="pwa"] .schiene,
  .buehne[data-liefer="pwa"] .portal[data-ebene="menue"] .schiene{
    width:100%;box-shadow:none}
  .buehne[data-liefer="pwa"] .portal[data-schiene="auf"] .schleier{display:none}
  .buehne[data-liefer="pwa"] .portal[data-schiene="auf"] .schiene-zu{display:none}
  .portalmarke{display:block}
  /* Kopfzeile auf eine Zeile: Logo links, Assistent als Zeichen rechts.
     Die zweite Aktion wandert ins Deckblatt, wo sie ohnehin steht. */
  .mitte,.schiene,.agent{--rand:var(--a3)}
  .mitte-kopf{gap:var(--a2);flex-wrap:nowrap}
  /* Schmal ist kein Platz für ein zentriertes Wort: es lag über dem
     Firmennamen, zwei weiße Texte auf Rot übereinander. Das Wort rückt in
     die Zeile, der Name steht unten im Nutzerblock. */
  .kundenband b{position:static;transform:none;min-width:0;
    overflow:hidden;text-overflow:ellipsis}
  .kundenband span{display:none}
  /* In der Kundenansicht nimmt das Band die schmale Kopfzeile ganz: Wort
     und Ausstieg brauchen 219 der 364 Pixel. Der Menüpunkt tritt zurück —
     er steht in der Schiene, das Band steht nirgends sonst. */
  .portal[data-kundenansicht] .mitte-kopf .marke{display:none}
  .nur-schmal{display:grid}
  #kopfAktion{display:none}
  .agent-kontext{padding:var(--a2) var(--a3);min-height:44px}
  .agent-fuss{padding:var(--a2) var(--a3) var(--a3)}
  /* 44px gilt für jede Fläche, nicht nur für die Zeichenknöpfe: Knöpfe
     mit Wort maßen 36, die Vorschläge 28, das Portallogo 29. */
  .knopf,.agent-kontext button,.portalheim,.wahl button,
  .block-falten,.kunde-oeffner,.markiert button{min-height:44px}
  .agent-kontext{min-height:60px}
  .start-kacheln{grid-template-columns:minmax(0,1fr)}
  .start-gruss{font-size:var(--t28)}
  .start-kachel{grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--a4);align-items:baseline}
  .start-kachel em{grid-column:1 / -1}
  .deckblatt .schlagzeile{font-size:var(--t28)}
  .deckblatt .schlagzeile br{display:none}
}
/* Kantenverlauf nur, wenn tatsaechlich etwas ausserhalb liegt. Das Attribut
   setzt ein ResizeObserver; ohne Ueberlauf bleibt die Kante hart. */
[data-quer="rechts"]{mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
[data-quer="links"]{mask-image:linear-gradient(90deg,transparent,#000 28px)}
[data-quer="beide"]{mask-image:linear-gradient(90deg,transparent,#000 28px,
  #000 calc(100% - 28px),transparent)}
/* ══ Eine Zeile der Feldliste trägt breit Name, Wert und Knopf nebeneinander.
   Auf einer schmalen Spalte reicht das nicht: „Startseite überarbeiten"
   stand als Buchstabenturm über 195px, weil Wert und Knopf ihre Breite
   behielten. Schmal steht jedes Stück auf einer eigenen Zeile. ══ */
@container mitte (max-width:559px){
  .feldliste li{grid-template-columns:minmax(0,1fr);gap:var(--a2)}
  .feldliste li > .knopf{width:auto;justify-self:start}
  .feld-wert{white-space:normal}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}