/* Neutrale Grundflächen (Grundanforderung 10.07.2026: kein flächiges Braun, Material-Optik lebt nur in der Bibliotheks-Szene). Gold bleibt der Akzent. */ /* Renés Entwurf (09.08.2026): hell ist die Vorgabe, dunkel die zweite Welt. Der Akzent ist Indigo statt Gold — alle Bausteine hängen an den Variablen, deshalb trägt der Wechsel hier durch die ganze Anwendung. */ :root { --bg: #f6f6fb; --panel: #ffffff; --linie: #e7e7f0; --text: #0e0e1a; --dim: #5c5c74; --gold: #4f46e5; --goldhell: #7c4dee; --gruen: #16a34a; --blau: #2563eb; --warn: #ea580c; --papier: #ffffff; --leder: #fafaff; --bgHell: #ffffff; --kopf: #0e0e1a; --randStark: #d5d5e4; --zeile: #f2f2f8; --griffFarbe: #c8c8dc; --flaecheV: #ffffff; --gruenText: #166534; --warnText: #9a3412; --blauText: #1d4ed8; /* Akzent als SCHRIFT muss dunkler (hell) bzw. heller (dunkel) sein als die Akzent-FLAECHE, sonst reisst das Kontrast-Minimum. */ --goldText: #4338ca; --schrift: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --rund: 12px; --rundKlein: 9px; --griffAktiv: #a8a8c4; --schatten: 0 1px 2px rgba(16,16,40,.04), 0 10px 28px rgba(16,16,40,.06); } * { box-sizing: border-box; margin: 0; } /* --- Rollbalken (09.08.2026) --------------------------------------------- Die Balken des Betriebssystems sind hell und tragen Pfeil-Knöpfe — im dunklen Thema sitzt da ein Fremdkörper. Sie bekommen denselben Griff wie die Splitscreen-Grenze (`--griffFarbe`): wer etwas anfassen kann, sieht in dieser Anwendung überall gleich aus. Zwei Schreibweisen, aber NICHT nebeneinander: sobald `scrollbar-color` gesetzt ist, ignoriert Blink ab Version 121 die `::-webkit-`-Bausteine und zeichnet wieder in Systemform. Deshalb bekommt die Norm-Schreibweise nur, wer die Bausteine gar nicht kennt (Firefox). */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--griffFarbe) transparent; } } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--griffFarbe); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--griffAktiv); background-clip: padding-box; } /* Pfeil-Knöpfe weg: sie sind der auffälligste Teil der Systemform und in einer Anwendung, die überall sonst ohne sie auskommt, reine Altlast. */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-corner { background: transparent; } body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; /* dvh statt vh (30.07.2026): Auf Mobilbrowsern zaehlt vh die Hoehe OHNE ein- und ausfahrende Adressleiste — die unterste Zeile (die Eingabe) lag dadurch unter der Browserleiste, und weil der Rumpf nicht scrollt, kam man nicht heran. vh bleibt als Rueckfall fuer alte Browser davor. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } header { padding: 10px 18px; border-bottom: 1px solid var(--linie); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--flaecheV); } header h1 { font: 700 20px var(--schrift); color: var(--kopf); letter-spacing: .3px; text-shadow: 0 1px 0 rgba(0,0,0,.6); } /* Status als stiller Punkt: Gold = Vorschau, Grün = Live; Klartext im Popover. 32 Pixel, seit er im Fuss der Werkzeugleiste sitzt (16.08.2026): Das ist das Mindestmass fuer alles Antippbare. Der SICHTBARE Punkt darf kleiner sein — seine Flaeche nicht. Vorher waren es 26. */ .statuspunkt { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie); background: var(--panel); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .statuspunkt #statusKern { width: 12px; height: 12px; border-radius: 50%; background: var(--dim); } .statuspunkt.attrappe #statusKern { background: var(--gold); box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 55%, transparent); } .statuspunkt.echt #statusKern { background: var(--gruen); box-shadow: 0 0 8px rgba(88,214,141,.55); } .statuspunkt:hover, .statuspunkt:focus-visible { border-color: var(--gold); outline: none; } .infopunkt { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--linie); background: var(--panel); color: var(--dim); font: 700 13px var(--schrift); cursor: pointer; line-height: 1; } .infopunkt:hover, .infopunkt:focus-visible { border-color: var(--gold); color: var(--goldText); outline: none; } .popover { position: fixed; z-index: 80; background: var(--papier); border: 1px solid var(--gold); border-radius: 10px; padding: 12px 14px; max-width: 340px; font-size: 13.5px; color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.55); display: none; } .popover.offen { display: block; } /* Team-Roster: seit dem 16.08.2026 im Fuss der Werkzeugleiste statt in der Kopfzeile. Dort steht die Siegel-Reihe senkrecht und braucht ihre 32 Pixel Grifflaeche wie jedes andere Bedienelement. */ .rosterStack { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; background: transparent; border: 0; cursor: pointer; padding: 2px; transition: transform .15s ease, opacity .15s ease; } .rosterStack:hover, .rosterStack:focus-visible { transform: translateY(-1px); outline: none; } .rosterLabel { font-size: 11px; color: var(--dim); letter-spacing: .3px; margin-right: 7px; } .rosterKreis { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--av, #3f6c9d); border: 2px solid var(--panel); } /* Die Überlappung im Kopf-Stapel ist eine BEZIEHUNG zwischen zwei Kreisen, keine Eigenschaft eines einzelnen. Als `margin-left: -9px` am Kreis selbst wirkte sie überall, auch dort, wo er als ERSTES Kind einer Zeile steht — im Einstellungs-Panel zog es die Marke um 9 px aus dem Behälter heraus, und der Rand schnitt sie an (Flow, 21.08.2026). */ .rosterKreis + .rosterKreis { margin-left: -9px; } .rosterKreis.betreiber { box-shadow: 0 0 0 2px var(--gold); } /* Ein Maskottchen füllt den Kreis ganz — kein Farbfeld dahinter, sonst stünden zwei Farben übereinander, die nichts miteinander zu tun haben. */ .rosterKreis.mitBild { background: var(--zeile); overflow: hidden; padding: 2px; } .rosterKreis.mitBild img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; } .rosterMehr { background: var(--zeile); color: var(--dim); font-weight: 400; } #rosterPopover { min-width: 220px; } #rosterPopover .popKopf { font: 700 13px var(--schrift); color: var(--kopf); margin-bottom: 8px; } /* Teilnehmer-Zeilen gelten an beiden Orten gleich: im Roster-Popover und in den Chat-Einstellungen. Menschen und Agenten sollen dieselbe Zeile haben — deshalb hängen die Regeln nicht mehr nur am Popover (11.08.2026). */ #rosterPopover .rosterZeile, #chatEinstInhalt .rosterZeile { display: flex; align-items: center; gap: 8px; padding: 5px 2px; } #rosterPopover .rosterName, #chatEinstInhalt .rosterName { color: var(--text); font-size: 13px; } #chatEinstInhalt .rosterRolle { margin-left: auto; font-size: 10.5px; color: var(--dim); background: var(--zeile); border-radius: 99px; padding: 1px 7px; } #chatEinstInhalt .dsAktion { margin-left: 6px; } #chatEinstInhalt .rosterZeile .dsAktion:first-of-type { margin-left: auto; } #chatEinstInhalt .matrixTitel { margin: 14px 0 4px; } #chatEinstInhalt .matrixTitel h3 { font: 700 13px var(--schrift); color: var(--kopf); } #chatEinstInhalt .hinweis { color: var(--dim); font-size: 12.5px; margin-bottom: 6px; } /* Drei klar getrennte Abschnitte (Menschen/Agentinnen/Verfügbar) statt einer durchlaufenden Liste — Flows Befund, 13.08.2026: der Dialog wirkte wie eine einzige Liste, obwohl die Zeilen fachlich verschiedene Dinge waren. */ #chatEinstInhalt .chatEinstAbschnitt { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--linie); } #chatEinstInhalt .chatEinstEinladenZeile { gap: 8px; } #chatEinstInhalt .chatEinstEinladenZeile select { flex: 1 1 auto; min-width: 0; } #rosterPopover .rosterRolle { margin-left: auto; font-size: 10.5px; color: var(--dim); background: var(--zeile); border-radius: 99px; padding: 1px 7px; } #rosterPopover .rosterAktivPunkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 6px var(--gruen); } #rosterPopover .rosterLegende { font-size: 10.5px; color: var(--dim); margin-top: 8px; border-top: 1px solid var(--linie); padding-top: 6px; } /* Zweite Liste im Roster: Agenten stehen wie Menschen da, bleiben aber auf einen Blick unterscheidbar — eckigerer Kreis statt eigener Bauform. */ #rosterPopover .popKopf + .rosterZeile { margin-top: 2px; } #rosterPopover .rosterZeile + .popKopf { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 10px; } .rosterKreis.agent { border-radius: 9px; font-size: 10.5px; } #rosterPopover .rosterVerwalten { display: block; width: 100%; margin-top: 8px; background: transparent; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; text-align: left; } #rosterPopover .rosterVerwalten:hover, #rosterPopover .rosterVerwalten:focus-visible { border-color: var(--gold); color: var(--text); outline: none; } #menue { background: transparent; border: 1px solid transparent; padding: 6px 11px 6px 9px; cursor: pointer; border-radius: 8px; display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font: inherit; font-size: 13px; } #menue:hover, #menue:focus-visible { background: var(--panel); border-color: var(--linie); color: var(--text); outline: none; } #menue .ikon { width: 22px; height: 22px; } /* Erstbesuch-Hinweis: der Schein liegt auf ::after, animiert wird nur die Deckkraft. Zusaetzlich begrenzt (8 Durchlaeufe statt endlos) — wer nach 18 Sekunden nicht reagiert hat, braucht kein blinkendes Feld mehr, sondern eine Erklaerung. */ #menue { position: relative; } body.erstbesuch #menue::after { box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 35%, transparent); border: 1px solid var(--gold); animation: scheinPuls 2.2s ease-in-out 8; } /* Die drei Anzeigen am rechten Ende der Kopfzeile (16.08.2026): Besetzung, Kosten, Statuspunkt. Sie stehen hier, seit der Umschalter weg ist und der Platz frei wurde — in den 52 Pixeln der Werkzeugleiste hatten sie übereinander gequetscht gestanden. `margin-left: auto` schiebt die ganze Gruppe ans Ende, statt jedes Element einzeln. */ .kopfWerkzeuge { display: flex; align-items: center; gap: 12px; margin-left: auto; } header .summe { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; } header .summe:empty { display: none; } /* Seit dem 16.08.2026 hat `main` genau zwei Zustaende: Chat allein, oder Chat mit einem Begleiter rechts. Die Spalte springt in einem Frame — die FAHRT macht `#seite` per `transform` (siehe dort). Vorher stand hier eine Transition auf `grid-template-columns`; das ist eine Layout-Animation, bei der jeder einzelne Frame durch Layout und Paint laeuft und der Chat-Text in JEDEM Frame neu umbricht. `position: relative` ist Pflicht: ohne den Bezugsrahmen parkt `#seite` am Fenster statt am Raster und legt sich ueber die Eingabekarte. */ /* `overflow: hidden` ist Pflicht, seit der Begleiter geparkt statt ausgeblendet wird: Er steht per `translateX` rechts AUSSERHALB, und ohne diesen Schnitt zaehlt seine Breite zur Seite. Auf einem 375 Pixel breiten Telefon ergab das eine 482 Pixel breite Seite, die sich waagerecht schieben liess — gefunden vom Bild-Pruefer am 16.08.2026, nicht von der Testsuite. */ main { flex: 1; display: grid; min-height: 0; position: relative; overflow: hidden; grid-template-columns: minmax(0, 1fr); } body[data-bereich] main { grid-template-columns: var(--spaltLinks, minmax(380px, 44%)) 6px minmax(0, 1fr); } /* Vollbild-Bereiche (13.08.2026): Verwaltung ist keine Nebentaetigkeit zum Gespraech. Der Admin-Bereich fuellt das Fenster, statt sich neben den Chat zu quetschen — dort standen Rollen-Matrix und Rechte-Tabellen in einer halben Spalte und waren nicht bedienbar. Der Chat bleibt geladen und kommt beim Schliessen unveraendert zurueck. */ body[data-bereich="admin"] main { grid-template-columns: minmax(0, 1fr); } body[data-bereich="admin"] #chat, body[data-bereich="admin"] #trenner { display: none !important; } /* Im Admin-Bereich gibt es niemanden zu fragen — der Chat ist ausgeblendet, also gehoert auch seine Eingabekarte weg. Sie stand hier bis 13.08.2026 leer herum und lud dazu ein, ins Nichts zu tippen. */ body[data-bereich="admin"] #eingabe { display: none !important; } body[data-bereich="admin"] #seite { grid-column: 1 / -1; } /* Ziehbare Fensterteilung: Fuge mit sichtbarem Griff (Pille) + "Größe ändern"- Tooltip beim Anfassen — Vorbild ist der Claude-Code-Trenner. */ #trenner { display: none; cursor: col-resize; position: relative; z-index: 5; background: linear-gradient(var(--linie), var(--linie)) center / 1px 100% no-repeat; } body[data-bereich] #trenner { display: block; } #trenner::after { content: ""; position: absolute; inset: 0 -7px; } #trenner .griff { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5px; height: 56px; border-radius: 99px; background: var(--griffFarbe); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transition: background .15s ease, height .15s ease; } #trenner:hover .griff, #trenner:focus-visible .griff, body.zieht #trenner .griff { background: var(--gold); height: 76px; } #trenner:focus-visible { outline: none; } #trenner::before { content: attr(data-tip); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); background: var(--zeile); color: var(--text); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease .15s; z-index: 40; box-shadow: 0 10px 30px rgba(0,0,0,.5); } #trenner:hover::before, #trenner:focus-visible::before { opacity: 1; } body.zieht #trenner::before { opacity: 0; } body.zieht { cursor: col-resize; user-select: none; } body.zieht main { transition: none; } body.zieht #seite iframe { pointer-events: none; } #chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--linie); } /* Der Chat verschwindet nie mehr (16.08.2026, Renés R1) — er ist die Hauptansicht, alles andere tritt neben ihn. Einzige Ausnahme bleibt der Admin-Bereich weiter unten: Verwaltung ist keine Nebentaetigkeit zum Gespraech, sondern etwas anderes. */ body[data-bereich] #chat { display: flex; } #verlauf { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } /* Mini-Markdown in Antwort-Blasen (Flow 10.07.: Listen + Absätze statt Block-Text) */ .blase p { margin: 7px 0; } .blase p:first-child { margin-top: 0; } .blase p:last-of-type { margin-bottom: 0; } .blase ul, .blase ol { margin: 7px 0 7px 20px; } .blase li { margin: 3px 0; } .blase code { background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 4px; padding: 0 5px; font: 12.5px/1.5 Consolas, monospace; } /* Lange Dateipfade ohne Leerzeichen sprengten die Blase (gemessen 375px: Inhalt 614px in 272px Blase) und schoben den ganzen Verlauf seitwaerts. */ .blase { position: relative; max-width: 82%; padding: 12px 16px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 6px 16px rgba(0,0,0,.28); font-size: 14px; line-height: 1.6; animation: blaseRein .22s ease; } .blase.nutzer { align-self: flex-end; background: var(--leder); border: 1px solid var(--randStark); } .blase.assistent { align-self: flex-start; background: linear-gradient(180deg, var(--papier), var(--panel)); border: 1px solid var(--linie); border-top: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); max-width: min(82%, 46rem); padding-right: 44px; } .blase.hinweisblase { align-self: center; background: transparent; border: 1px dashed var(--linie); color: var(--dim); font-size: 12px; box-shadow: none; animation: none; } .blase .meta { display: block; margin-top: 10px; font-size: 12px; color: var(--dim); border-top: 1px solid var(--linie); padding-top: 8px; white-space: normal; } /* 32 Pixel Mindestfläche (Haus-Regel 17 §6) — gemessen 28 x 28 am 25.08.2026. Das Symbol bleibt 18 Pixel; nur die Fläche wächst, deshalb `place-items: center` statt eines größeren Innenabstands. */ .kopier { position: absolute; top: 8px; right: 8px; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 4px; cursor: pointer; line-height: 0; display: grid; place-items: center; min-width: 32px; min-height: 32px; } @media (max-width: 768px) { .kopier { min-width: 36px; min-height: 36px; } } .kopier { color: var(--dim); } .kopier .ikon { width: 18px; height: 18px; opacity: .75; } .kopier:hover .ikon, .kopier:focus-visible .ikon { color: var(--text); } .kopier:hover, .kopier:focus-visible { border-color: var(--gold); outline: none; } .kopier:hover .ikon { opacity: 1; } .kopier .bestaetigt { position: absolute; right: 28px; top: 4px; font-size: 12px; color: var(--gruen); white-space: nowrap; } /* Kosten-Chip: Ebene 1 = Klartext-Cent, Ebene 3 = aufklappbares Pro-Datei-Detail */ .kostenChip { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; min-height: 32px; border: 1px solid color-mix(in srgb, var(--gold) 5%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--gold) 8%, transparent); font-size: 14px; color: var(--text); cursor: pointer; } .kostenChip:hover, .kostenChip:focus-visible { border-color: var(--gold); outline: none; } .kostenChip .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; } .kostenDetail { display: none; margin-top: 8px; border: 1px solid var(--linie); border-radius: 10px; background: var(--bg); padding: 10px 12px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: normal; user-select: text; } .kostenDetail.offen { display: block; } .kostenDetail .kdz { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid var(--zeile); } .kostenDetail .kdz:last-child { border-bottom: 0; } .kostenDetail .kdz .kdatei { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .kostenDetail .kdz .kwert { flex: none; } /* Denkspur: die sichtbare Suche — Lampe, Notizen, Buch-Karten */ .denkspur { align-self: stretch; max-width: min(96%, 52rem); border: 1px solid var(--linie); border-radius: 12px; background: linear-gradient(180deg, var(--papier), var(--panel)); padding: 12px 16px 12px 58px; position: relative; font-size: 14px; } .denkspur .lampe { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #ffe9ad 0 28%, #c9a24b 62%, #3a2e1c 100%); box-shadow: 0 0 0 rgba(255,233,173,0); } /* Glut-Animation liegt auf .lampe::after (siehe scheinPuls weiter unten) */ .denkspur .dkopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .denkspur .dkopf .ikon { width: 18px; height: 18px; } .denkspur .dkopf b { font: 600 13.5px var(--schrift); color: var(--kopf); } .denkspur .herkunft { font-size: 11.5px; color: var(--goldText); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 99px; padding: 2px 9px; margin-left: auto; cursor: pointer; background: transparent; font-family: inherit; } .denkspur .dschritt { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--dim); animation: zettelRein .25s ease; } .denkspur .dschritt.simuliert::after { content: "(simuliert)"; font-size: 11px; color: var(--warn); } .denkspur .dtreffer { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; } .denkspur .dbuch { background: var(--papier); border: 1px solid var(--linie); border-left: 3px solid var(--gold); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; max-width: 240px; animation: karteRein .35s ease backwards; } .denkspur .dbuch .dname { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .denkspur .dbuch .dsnippet { color: var(--dim); font-size: 11.5px; max-height: 34px; overflow: hidden; } .denkspur .dfuss { display: flex; gap: 10px; margin-top: 6px; } .denkspurChip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; min-height: 32px; /* 100 % war ein Tippfehler (Bestand, gefunden 09.08.2026): Akzent-Schrift auf voller Akzent-Flaeche ergibt 1:1 — der Text war schlicht unsichtbar. 12 % ist der Toenungswert, den die uebrigen Chips auch tragen. */ background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 99px; padding: 5px 12px; font-size: 13px; color: var(--goldText); cursor: pointer; font-family: inherit; } .denkspurChip .ikon { width: 15px; height: 15px; } .dsAktion { background: transparent; border: 1px solid var(--linie); color: var(--dim); border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; } .dsAktion:hover { border-color: var(--gold); color: var(--text); } /* Der Begleiter-Slot (16.08.2026). Zwei Zustaende, EIN Element: geparkt — absolut am rechten Rand, per `transform` aus dem Bild geschoben, `body { overflow: hidden }` schneidet den Ueberhang ab; offen — normales Grid-Kind in der dritten Spalte. Er ist NIE `display: none`. Das ist keine Feinheit, sondern der Kern: Eine Szene vermisst sich beim Bauen, und in einem ausgeblendeten Rahmen misst sie 0×0 — genau daher kam das leere Regal, das bisher nur ein kompletter Neuaufbau heilte. `transform` aendert weder Geometrie noch DOM-Position, die Szene behaelt also ihre Masse und laeuft im Parkzustand einfach weiter. */ #seite { min-width: 0; background: var(--bg); position: absolute; top: 0; bottom: 0; right: 0; width: var(--begleiterBreite, 44%); transform: translateX(112%); pointer-events: none; z-index: 4; } /* `relative`, nicht `static`: Der Slot bleibt Grid-Kind (relativ steht im Fluss), ist aber weiterhin der Bezugsrahmen fuer seine absolut liegenden Kinder. Mit `static` bezog sich die Panel-Schicht auf `main` und legte sich ueber den Chat gleich mit — gemessen am 16.08.2026, eine Zeile Ursache. */ body[data-bereich] #seite { position: relative; width: auto; transform: none; pointer-events: auto; } /* Das Panel ist eine eigene Schicht UEBER der Bibliothek, kein Ersatz fuer sie. Vorher blendete ein offener Bereich den iframe aus; damit schlossen sich die beiden Begleiter gegenseitig aus. `:empty` erledigt das Ein- und Ausblenden ohne eine Zeile JavaScript — der Wrapper ist genau dann da, wenn ein Panel darin haengt. */ #seitePanel { position: absolute; inset: 0; z-index: 3; background: var(--bg); } #seitePanel:empty { display: none; } /* --- Die Fahrt (16.08.2026) ------------------------------------------------ Nur `transform` und `opacity` — beides laeuft auf dem Compositor, ohne Layout und ohne Paint. Wichtig ist dabei die FESTE Breite: Weil sich die Breite waehrend der Fahrt nie aendert, bricht der Inhalt des Begleiters kein einziges Mal um. Eine Breiten- oder Rasteranimation tut genau das, in jedem Frame, und das ist der Grund, warum sie hier nicht steht. Herein: schnell los, weich ankommen. Hinaus: kuerzer und beschleunigend — ein Weggehen darf sich nicht so wichtig nehmen wie ein Ankommen. */ @keyframes seiteRein { from { transform: translateX(102%); } to { transform: translateX(0); } } @keyframes seiteRaus { from { transform: translateX(0); } to { transform: translateX(102%); } } @keyframes inhaltRein { from { opacity: 0; } to { opacity: 1; } } /* Der Trenner schiebt mit herein: Er beginnt seine Fahrt am rechten Rand und kommt an seinem Platz zur Ruhe. Das ist es, was die Bewegung zu „jemand schiebt die Fensterteilung von aussen ins Bild" macht — ohne ihn faehrt nur eine Flaeche ein, mit ihm ist es eine Geste. */ @keyframes trennerRein { from { transform: translateX(46px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } body[data-bereich] #trenner { animation: trennerRein .34s cubic-bezier(.22, .9, .28, 1) both; } #seite.faehrtRein { animation: seiteRein .34s cubic-bezier(.22, .9, .28, 1) both; will-change: transform; } #seite.faehrtRaus { animation: seiteRaus .2s cubic-bezier(.55, 0, .85, .4) forwards; will-change: transform; } /* Der Inhalt blendet leicht verzoegert nach: Die Flaeche kommt zuerst, das Geschriebene darauf. Das ergibt Tiefe, ohne dass sich etwas bewegt. */ #seite.faehrtRein #seitePanel, #seite.faehrtRein iframe { animation: inhaltRein .16s ease .09s both; } /* Ein Wechsel zwischen zwei offenen Begleitern faehrt NICHT hinaus und wieder herein — der Slot bleibt stehen, nur seine Schicht tauscht. Alles andere waere ein Zappeln fuer eine Bewegung, die niemand angefordert hat. */ #seite.wechselt #seitePanel { animation: inhaltRein .12s ease both; } /* --- Werkzeugleiste am rechten Rand (20.08.2026, Renés N2) ----------------- Sie STEHT. Vorher schwebte sie als Glaskapsel ueber dem Gespraech und kam erst, wenn der Zeiger sich naeherte — das kostete an einem Tag sechs Commits, drei davon fuer eine einzige Schwellen-Zahl, und Flow traf sie trotzdem nicht, wenn er im gerade geoeffneten Werkzeug arbeitete. Der Grund fuer das Schweben war: 60 Pixel dauerhaft „fuer zwei Knoepfe" seien eine Behauptung. Das stimmte. Mit meeting-gebundenen Werkzeugen stehen dort jetzt mehr, und die Behauptung ist eingeloest. Sie liegt jetzt im LAYOUT-FLUSS, nicht darueber. Das ist kein Detail: Ein schwebendes Element kann Bedienelemente verdecken, ohne dass eine Pruefung anschlaegt — der Bild-Pruefer kennt Verdeckung durch Schwebendes nicht. Im Fluss greift seine Ueberlappungs-Klinge wieder. */ #arbeitsflaeche { flex: 1; min-height: 0; display: flex; } #gespraech { flex: 1; min-width: 0; display: flex; flex-direction: column; } #werkzeugleiste { flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--linie); } #werkzeugleiste .wlOben { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Die Knöpfe treten aus dem Glas hervor: eigene Fläche, eigener Rand, eigener Schatten — sonst schwimmen sie darin. Sie sind 44 Pixel groß, deutlich über dem Mindest-Tippziel; das Symbol darin ist der Blickfang, nicht der Kasten. */ .wlKnopf { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid color-mix(in srgb, var(--linie) 80%, transparent); border-radius: 14px; color: var(--dim); cursor: pointer; font-family: inherit; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: color .18s ease, background .18s ease, border-color .18s ease, transform .22s cubic-bezier(.22, .9, .28, 1), box-shadow .22s ease; } .wlKnopf .ikon { width: 22px; height: 22px; transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); } /* Beim Überfahren wächst der Knopf und atmet — ein ruhiger Puls, kein Blinken. Die Amplitude ist absichtlich klein (1.07 bis 1.13): Sie soll sagen „ich bin bereit", nicht um Aufmerksamkeit betteln. Alles über `transform`, also ohne Layout-Kosten. */ @keyframes wlAtem { 0%, 100% { transform: translateX(-3px) scale(1.07); } 50% { transform: translateX(-5px) scale(1.13); } } /* Der Klick-Impuls: ein kurzer Stoß nach vorn, deutlich stärker als der Puls, und ein Ring, der nach außen läuft. Er ist die Quittung — man sieht, DASS der Klick angekommen ist, bevor sich sonst irgendetwas bewegt. */ @keyframes wlImpuls { 0% { transform: translateX(-5px) scale(1.13); } 35% { transform: translateX(-9px) scale(1.28); } 100% { transform: translateX(0) scale(.96); } } @keyframes wlRing { from { transform: scale(.9); opacity: .55; } to { transform: scale(1.9); opacity: 0; } } .wlKnopf:hover, .wlKnopf:focus-visible { background: color-mix(in srgb, var(--gold) 14%, var(--panel)); border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--goldText); outline: none; animation: wlAtem 1.6s ease-in-out infinite; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); } .wlKnopf:hover .ikon, .wlKnopf:focus-visible .ikon { transform: scale(1.16); } .wlKnopf.impuls, .wlKnopf.impuls:hover { animation: wlImpuls .34s cubic-bezier(.34, 1.56, .64, 1) both; background: color-mix(in srgb, var(--gold) 26%, var(--panel)); border-color: var(--gold); } .wlKnopf.impuls::after { content: ""; position: absolute; inset: -2px; border-radius: 16px; border: 2px solid var(--gold); pointer-events: none; animation: wlRing .44s ease-out both; } .wlKnopf.aktiv { color: var(--goldText); background: color-mix(in srgb, var(--gold) 20%, var(--panel)); border-color: color-mix(in srgb, var(--gold) 62%, transparent); } /* Der offene Knopf sagt beim Ueberfahren, was ein Klick tut: Sein Symbol weicht einem Kreuz. Ohne das ist er ein Knopf, der aussieht wie „hier bin ich" und sich verhaelt wie „hier gehe ich" — der Nutzer muss raten, ob er das Werkzeug schliesst oder es nur nochmal oeffnet. Ein Wort waere die andere Loesung; das Symbol ist die des Hauses. */ /* Grundzustand: gar nicht da. Ohne diese Zeile ist das Kreuz an jedem NICHT offenen Knopf ein normales Inline-Element und steht neben dem Symbol — zwei Zeichen in einem Knopf, von denen eines nichts bedeutet (16.08.2026 im Bild gesehen). Erst der offene Knopf legt es als Schicht darüber. */ .wlKnopf .wlZu { display: none; } .wlKnopf.aktiv .wlZu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .16s ease; pointer-events: none; } .wlKnopf.aktiv .wlZu .ikon { width: 18px; height: 18px; } .wlKnopf.aktiv:hover .wlZu, .wlKnopf.aktiv:focus-visible .wlZu { opacity: 1; } .wlKnopf.aktiv:hover > .ikon, .wlKnopf.aktiv:focus-visible > .ikon { opacity: 0; } .wlKnopf > .ikon { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), opacity .16s ease; } /* Der Indikator waechst aus der Mitte, statt zu erscheinen: eine Bewegung, die sagt „dieser hier", ohne dass ein zweites Element auftaucht. */ .wlKnopf::before { content: ""; position: absolute; left: -7px; top: 50%; width: 3px; height: 22px; margin-top: -11px; border-radius: 99px; background: var(--gold); transform: scaleY(0); transform-origin: center; transition: transform .16s cubic-bezier(.22, .9, .28, 1); } .wlKnopf.aktiv::before { transform: scaleY(1); } /* Das Abzeichen sagt „hier liegt etwas Unerledigtes" — ein Punkt, keine Zahl. Die Zahl steht im Hover-Hinweis, wo sie niemanden beim Lesen stoert. */ .wlKnopf .wlPunkt { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--panel), 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent); } .wlTrenner { width: 22px; height: 1px; background: var(--linie); border: 0; margin: 2px 0; } /* Der Inhalt bekommt KEINEN Rand für die Leiste. Sie schwebt darüber und darf überdecken — das ist der Sinn der Sache: Sie ist da, wenn man sie ruft, und kostet sonst nichts. Ein reservierter Streifen wäre die schlechteste Mischung aus beidem, dauerhaft schmaler Chat für ein Werkzeug, das man selten sieht. Dass sie nichts Wichtiges verdeckt, regeln zwei Dinge: Sie ist mittig und nur so hoch wie ihr Inhalt, und ihr `max-height` endet über der Eingabekarte. */ /* Bereiche im Splitscreen fuellen die Flaeche — und muessen scrollen, wenn der Inhalt laenger ist (30.07.2026). Ohne overflow-y war alles unterhalb der Fensterkante unerreichbar: im Admin-Bereich hing die halbe Kontenliste ausserhalb, ohne jeden Hinweis darauf. `inset: 0` allein macht einen Kasten randvoll, nicht scrollbar. */ #seite .pmInhalt { position: absolute; inset: 0; width: 100%; max-height: none; border-radius: 0; border: 0; border-left: 1px solid var(--linie); box-shadow: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom, 0)); } /* Der Kopf mit dem Schliessen-Knopf bleibt beim Scrollen stehen. Seit der Bereich scrollt, wanderte er sonst nach oben aus dem Bild — und mit ihm der einzige sichtbare Ausweg (30.07.2026). */ /* Der Seitenkopf traegt den Namen des Bereichs, seit er mitwandert (13.08.2026). Die eigene Ueberschrift des Dialogs sagte danach dasselbe ein zweites Mal, 30 Pixel darunter — ein Fix, der im selben Zug seinen eigenen Fehler baute. Der Schliessen-Knopf bleibt, der Titel geht. */ body[data-bereich] #seite .pmInhalt .pmKopf h2 { display: none; } /* Ohne die Überschrift fällt das `flex: 1` weg, das den Knopf nach rechts geschoben hat — er klebte dann in der linken oberen Ecke des Begleiters (Flow, 21.08.2026). Der Ausweg aus einem Panel gehört oben rechts, in JEDER Ansicht. */ body[data-bereich] #seite .pmInhalt .pmKopf { justify-content: flex-end; } /* `top` muss den negativen Rand ausgleichen, sonst klebt der Kopf genau um diesen Betrag zu tief und legt sich ueber die erste Zeile darunter — im Notizzettel war das der halb verdeckte Einleitungssatz (16.08.2026 gemessen: Kopf 72–130, Hinweis 112–135). Die Grundregel weiter unten macht es richtig; hier stand `top: 0` gegen `margin-top: -18px`. */ #seite .pmInhalt .pmKopf { position: sticky; top: -18px; z-index: 2; background: var(--panel); margin: -18px -20px 0; padding: 18px 20px 14px; } /* Verdunkelung hinter der Regal-Schublade — MUSS ausserhalb jeder Media-Query stehen (30.07.2026). Vorher lag die Regel nur im 700er-Block; oberhalb davon war das Element ein normales Grid-Kind in
und belegte eine eigene Spalte: bei 1280px schrumpfte der Chat dadurch von 634 auf 262px. Ein unsichtbares Element darf niemals Platz beanspruchen. */ #schubladeSchliesser { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .26s ease; } #schubladeSchliesser.offen { opacity: 1; pointer-events: auto; } #seite iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); } /* Der Text-Schreibtisch ist seit 11.08.2026 kein eigener Modus mehr, sondern die Alternative zur Szene: `data-tisch="liste"` (Profil-Einstellung) tauscht überall dort, wo sonst das Regal steht, den nüchternen Halter ein. Ein offener Rail-Bereich hat Vorrang vor beidem. */ aside { padding: 18px; overflow-y: auto; display: none; } body[data-bereich] aside { display: none; } /* Der Text-Schreibtisch ist dieselbe Auskunft wie die Szene, nur nuechtern — deshalb traegt die Werkzeugleiste EINEN Knopf fuer beide. Wer die Liste gewaehlt hat, bekommt sie in derselben Spalte, in der sonst das Regal steht; der Szenen-Slot bleibt dann geparkt (16.08.2026). */ body[data-tisch="liste"][data-bereich="bibliothek"] aside { display: block; } /* Die Einfahr-Animation traegt `animation-fill-mode: both` und haelt damit ihren Endzustand `translateX(0)` fest — sie schlug diese Park-Regel, und in der schlichten Darstellung lag die Szene trotzdem ueber dem Schreibtisch. Der Befund ist aelter als dieser Umbau (auch in v0.66 so); er faellt erst auf, seit die schlichte Darstellung wirklich benutzt wird (20.08.2026). `animation: none` nimmt der Fahrt ihren Nachhall — geparkt heisst geparkt. */ body[data-tisch="liste"][data-bereich="bibliothek"] #seite, body[data-tisch="liste"][data-bereich="bibliothek"] #seite.faehrtRein, body[data-tisch="liste"][data-bereich="bibliothek"] #seite.wechselt { animation: none; position: absolute; width: var(--begleiterBreite, 44%); transform: translateX(112%); pointer-events: none; } aside h2 { font: 700 15px var(--schrift); color: var(--kopf); margin-bottom: 4px; } aside .hinweis { color: var(--dim); font-size: 13px; margin-bottom: 12px; } .karte { background: var(--panel); border: 1px solid var(--linie); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; } .karte .kzeile { display: flex; gap: 10px; align-items: center; padding: 8px 6px; font-size: 14px; border-bottom: 1px solid var(--zeile); min-height: 44px; border-radius: 7px; } .karte .kzeile:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); } .karte .kzeile:last-child { border-bottom: 0; } .karte .kzeile .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .karte .kzeile .klasse { font-size: 11.5px; color: var(--dim); flex: none; } .karte .kzeile.pflicht .klasse { color: var(--goldText); } .karte .kzeile .wegKnopf { flex: none; background: transparent; border: 1px solid var(--linie); color: var(--dim); border-radius: 7px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; min-height: 32px; } .karte .kzeile .wegKnopf:hover, .karte .kzeile .wegKnopf:focus-visible { border-color: var(--gold); color: var(--text); outline: none; } .karte .kzeile.wartend { opacity: .55; } .karte .kzeile .wartend-marke { font-size: 11px; color: var(--warn); flex: none; } .undoChip { display: none; align-items: center; gap: 8px; background: var(--leder); border: 1px solid var(--randStark); border-radius: 99px; padding: 6px 13px; font-size: 13px; cursor: pointer; margin-bottom: 12px; font-family: inherit; color: var(--text); } .undoChip.offen { display: inline-flex; } .undoChip:hover { border-color: var(--gold); } .ersparnis { font-size: 13.5px; color: var(--gruen); margin-bottom: 12px; cursor: help; } /* --- Admin-Bereich (29.07.2026) --------------------------------------- Aufbau nach Dringlichkeit: der Alarm-Kasten oben faellt auf, der Rest ist ruhig. Bewegung ausschliesslich ueber transform/opacity (ADR-077). */ .adminBlock { margin-top: 18px; } .adminBlock h3 { font: 600 13px var(--schrift); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; } .adminZeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 9px; margin-bottom: 6px; background: var(--panel); flex-wrap: wrap; } .adminZeile .kName { flex: 1 1 140px; } .adminZeile .kKosten { color: var(--dim); font-size: 12.5px; } /* 29 Pixel hoch waren sie bis zum Kontrollgang am 23.08.2026 — drei Pixel unter dem Haus-Mindestmass. Der Bild-Pruefer meldete sie an der laufenden Oberflaeche; von Hand faellt so etwas nie auf. */ .adminZeile select, .fristFeld { min-height: 32px; background: var(--bg); color: var(--text); border: 1px solid var(--linie); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px; } .fristFeld { width: 74px; } .adminZeile .dim { color: var(--dim); font-size: 12.5px; } .notausAn { color: var(--warn); font-weight: 600; } .kettenOk { border-color: color-mix(in srgb, var(--gruen) 40%, var(--linie)); } .kettenBruch { border-color: var(--warn); color: var(--warn); } /* Der Alarm-Kasten erscheint nur, wenn es etwas zu melden gibt — deshalb darf er auffallen. Ein Dauer-Kasten mit "keine Vorkommnisse" wuerde nach drei Tagen ueberlesen, und dann faellt der echte Fall auch nicht mehr auf. */ .alarmKasten { border: 1px solid var(--warn); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--warn) 8%, var(--panel)); } .alarmKasten h3 { font: 600 13.5px var(--schrift); color: var(--warn); margin-bottom: 8px; } .alarmZeile { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 13.5px; } .alarmZeile .alarmZahl { font-weight: 700; min-width: 34px; } .alarmZeile .alarmText { flex: 1; } .alarmZeile .alarmWer { color: var(--dim); font-size: 12.5px; } .alarmZeile.stufe-hoch .alarmZahl { color: var(--warn); } .alarmZeile.stufe-mittel .alarmZahl { color: var(--goldText); } .alarmZeile.stufe-niedrig { color: var(--dim); } /* Konto-Anlage + Zugangskarte: der Moment, in dem jemand aufgenommen wird. Die Karte darf auffallen — sie steht nur einmal da. */ #adminNeuZeile input { flex: 1 1 130px; background: var(--bg); color: var(--text); border: 1px solid var(--linie); border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13.5px; } #adminNeuZeile input:focus { outline: none; border-color: var(--gold); } .zugangsKarte { margin: 10px 0 4px; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--panel)); } .zugangsKarte .zkTitel { font-size: 13px; color: var(--dim); margin-bottom: 8px; } .zugangsKarte .zkZeile { font-size: 14.5px; margin-bottom: 2px; } .zugangsKarte .zkWort { font: 700 22px ui-monospace, "Consolas", monospace; color: var(--goldText); letter-spacing: .04em; margin: 6px 0 12px; user-select: all; word-break: break-all; } .zugangsKarte .zkHinweis { font-size: 12px; color: var(--dim); margin-top: 10px; line-height: 1.5; } /* Rechts-Einstellungen: eingeklappt, unauffaellig, bewusst am Ende. */ .adminTief { margin-top: 22px; border-top: 1px solid var(--linie); padding-top: 12px; } .adminTief summary { cursor: pointer; color: var(--dim); font-size: 13px; transition: color .15s ease; } .adminTief summary:hover { color: var(--text); } .adminTief .hinweis { margin: 10px 0; } /* Stopp-Knopf an der wartenden Antwort (29.07.2026). Zurueckhaltend, aber immer sichtbar: er ist der Ausweg aus einer langen Wartezeit, kein Zierrat. Bewegung nur ueber opacity/transform (ADR-077). */ /* 32 Pixel Mindestmaß (Haus-Regel 17 §6). Der Knopf stand auf 61 x 27 — gemessen am 25.08.2026, als die Warte-Uhr daneben kam und der Bild-Prüfer die Fläche zum ersten Mal überhaupt zu sehen bekam. Er ist ausgerechnet der Knopf, den man in einer langen Wartezeit trifft, oft auf dem Telefon. Nur die Fläche wächst, die Schrift bleibt. */ .stoppKnopf { display: inline-flex; align-items: center; min-height: 32px; margin-top: 10px; padding: 5px 14px; font-size: 12.5px; font-family: inherit; color: var(--dim); cursor: pointer; background: transparent; border: 1px solid var(--linie); border-radius: 8px; opacity: .75; transition: opacity .15s ease, transform .15s ease; } @media (max-width: 768px) { .stoppKnopf { min-height: 36px; } } .stoppKnopf:hover, .stoppKnopf:focus-visible { opacity: 1; transform: translateY(-1px); color: var(--text); border-color: var(--randStark); outline: none; } .warnungen { font-size: 12.5px; color: var(--warn); margin-bottom: 12px; } /* Dazulegen-Picker: Auswahl echter Unterlagen statt Pfad-Raten */ #dazuPicker { position: relative; } #dazuKnopf { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--linie); border-radius: 8px; color: var(--dim); padding: 10px 12px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; } #dazuKnopf .ikon { width: 17px; height: 17px; } #dazuKnopf:hover, #dazuKnopf:focus-visible { border-color: var(--gold); color: var(--text); outline: none; } /* Hoehe an die Fensterhoehe koppeln: bei niedrigen Fenstern ragte die Liste nach oben aus dem Bild (gemessen 1280x420: Oberkante bei -81). */ #dazuListe { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: min(300px, 40dvh); overflow-y: auto; background: var(--papier); border: 1px solid var(--gold); border-radius: 10px; z-index: 40; box-shadow: 0 -14px 40px rgba(0,0,0,.5); padding: 6px; } #dazuListe.offen { display: block; } #dazuSuche { width: calc(100% - 12px); margin: 4px 6px 8px; background: var(--bg); border: 1px solid var(--linie); border-radius: 7px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 13.5px; } #dazuListe .dlEintrag { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); padding: 9px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13.5px; min-height: 40px; } #dazuListe .dlEintrag:hover, #dazuListe .dlEintrag.fokus { background: color-mix(in srgb, var(--gold) 12%, transparent); } #dazuListe .dlEintrag .dlPfad { display: block; font-size: 11px; color: var(--dim); } /* Demo-Zugänge vergeben (Team-Einstellungen, 11.08.2026) */ .demoForm { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .demoForm input { flex: 1; min-width: 170px; background: var(--panel); border: 1px solid var(--randStark); border-radius: var(--rundKlein); color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; } .demoForm input:focus { outline: none; border-color: var(--gold); } .demoMeldung:empty { display: none; } .demoMeldung { margin: 6px 0 14px; font-size: 13.5px; word-break: break-all; } .demoMeldung.gut { color: var(--gruenText); font-weight: 600; } .demoMeldung.schlecht { color: var(--warnText); } .demoZeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--linie); font-size: 13.5px; } .demoZeile .dzName { font-weight: 600; } .demoZeile .dzMail, .demoZeile .dzBis { color: var(--dim); } .demoZeile .dzStatus { margin-left: auto; font-size: 11.5px; border-radius: 99px; padding: 2px 9px; background: var(--zeile); color: var(--dim); } .demoZeile .dzStatus.aktiv { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: var(--gruenText); } .demoZeile .dzStatus.werbung { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warnText); } /* Abgelaufener Demo-Zugang (11.08.2026): eine ruhige, ganzflächige Einladung. Sie liegt über allem, weil danach wirklich nichts mehr zu bedienen ist. */ /* `margin: auto` statt `align-items: center` — und das ist kein Geschmack, sondern eine Reparatur (Kontrollgang 25.08.2026). Ein zentriertes Flex-Kind, das höher ist als sein Behälter, ragt oben HINAUS, und dieser Überstand ist durch Scrollen nicht erreichbar: `scrollTop` steht schon auf 0. Gemessen bei 1280 x 720 — die Karte war 1243 Pixel hoch, ihr Kopf stand bei -261, und die Überschrift „Dein Testzugang ist abgelaufen" war damit unlesbar. Automatische Ränder verteilen nur POSITIVEN Freiraum; ist er negativ, rechnen sie als null, und die Karte beginnt sauber oben. */ .werbeSchicht { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 24px; background: var(--bg); overflow-y: auto; } .werbeKarte { max-width: 560px; margin: auto; background: var(--panel); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); padding: 34px 32px; } .werbeKarte h1 { margin: 0 0 14px; font-size: 25px; color: var(--kopf); } .werbeKarte p { margin: 0 0 16px; color: var(--dim); line-height: 1.55; font-size: 15px; } .werbeKarte .werbeFrage { color: var(--text); font-weight: 600; margin-bottom: 12px; } /* Der Datenblock (24.08.2026): abgesetzt, nicht laut. Er ist die Grundlage der Entscheidung darunter, deshalb steht er in einem eigenen Kasten — aber ohne Warnfarbe: es ist kein Fehler, sondern das vereinbarte Ende. */ /* Zwei Klassen, nicht eine: `.werbeKarte p` setzt Farbe und Größe und ist spezifischer als ein einzelner Klassen-Wähler. Ohne den Vorsatz sah die Überschrift aus wie Fließtext — gemessen am 25.08.2026, nachdem sie gebaut war und niemand hingeschaut hatte. */ .werbeKarte .werbeDatenTitel { color: var(--text); font-weight: 600; font-size: 15px; margin: 0 0 6px; padding-top: 16px; border-top: 1px solid var(--linie); } .werbeKarte .werbeDatenText { font-size: 14px; margin-bottom: 18px; } .werbeZeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .werbeZeile input { flex: 1; min-width: 200px; background: var(--panel); border: 1px solid var(--randStark); border-radius: var(--rundKlein); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; } .werbeZeile input:focus { outline: none; border-color: var(--gold); } .werbeKnopf { background: var(--gold); color: #fff; border: 0; border-radius: var(--rundKlein); padding: 12px 22px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; } .werbeKnopf:disabled { opacity: .55; cursor: default; } .werbeRueckmeldung:empty { display: none; } /* --- Lebenszeichen während der Wartezeit (25.08.2026) -------------------- */ /* Die Uhr steht ruhig neben „denkt nach …", nicht als Alarm: Sie soll sagen „es läuft", nicht „es dauert zu lange". Der Geduld-Satz darunter erscheint nur, wo ein Modell im eigenen Haus rechnet. */ .warteUhr { margin-left: 8px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .warteUhr:empty { display: none; } .warteGeduld { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--dim); border-top: 1px solid var(--linie); padding-top: 8px; } .werbeRueckmeldung { color: var(--gruenText); font-weight: 600; } .werbeHinweis { font-size: 12.5px; } .werbeAbmelden { background: transparent; border: 1px solid var(--linie); border-radius: var(--rundKlein); color: var(--dim); padding: 9px 16px; font: inherit; font-size: 13px; cursor: pointer; min-height: 40px; } /* --- Rückmeldung auf der Werbeseite (25.08.2026) ------------------------- */ /* Abgesetzt wie der Datenblock, aber mit Fläche statt nur einer Linie: Es ist das Einzige auf dieser Seite, das eine Handlung erbittet, die dem Betreiber etwas einbringt. Die drei Stufen tragen dieselben Farben wie der Rechte-Umschalter (--gut / --text-schwach / --warn) — wer die eine Fläche kennt, muss die andere nicht lernen. */ .werbeRueck { margin: 4px 0 20px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--linie); border-radius: var(--rundKlein); } .werbeKarte .werbeRueckTitel { margin: 0 0 4px; color: var(--text); font-weight: 600; font-size: 16px; } .werbeKarte .werbeRueckSatz { margin: 0 0 12px; font-size: 13.5px; } .werbeRueckWahl { display: flex; gap: 10px; margin-bottom: 12px; } /* 44 Pixel, nicht 32: Das ist der eine Klick, auf den es hier ankommt, und er wird meistens auf einem Telefon getroffen. Das Symbol darin bleibt klein. */ .werbeRueckStufe { display: grid; place-items: center; width: 52px; height: 44px; border: 1px solid var(--linie); border-radius: var(--rundKlein); background: transparent; cursor: pointer; opacity: .62; transition: opacity .12s ease, background-color .12s ease; } .werbeRueckStufe .ikon { width: 20px; height: 20px; } /* Bewusst `--gruenText` / `--dim` / `--warnText` und NICHT die Werte aus `.uKnopf`: Dort stehen `var(--gut, #5aa469)` und `var(--text-schwach)` — zwei Namen, die es in keiner der beiden Paletten gibt, sodass immer der Notwert greift und der dunkle Entwurf leer ausgeht. Diese drei sind echte Marken mit einer hellen UND einer dunklen Fassung. */ .werbeRueckStufe.gut { color: var(--gruenText); } .werbeRueckStufe.geht { color: var(--dim); } .werbeRueckStufe.schlecht { color: var(--warnText); } .werbeRueckStufe:hover { opacity: 1; } .werbeRueckStufe[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; } .werbeRueckStufe.gut[aria-pressed="true"] { background: color-mix(in srgb, var(--gruen) 26%, transparent); } .werbeRueckStufe.geht[aria-pressed="true"] { background: color-mix(in srgb, var(--linie) 70%, transparent); } .werbeRueckStufe.schlecht[aria-pressed="true"] { background: color-mix(in srgb, var(--warn) 26%, transparent); } .werbeRueckFeld { display: block; width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--randStark); border-radius: var(--rundKlein); color: var(--text); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; margin-bottom: 10px; } .werbeRueckFeld:focus { outline: none; border-color: var(--gold); } .werbeRueckSenden { background: var(--gold); color: #fff; border: 0; border-radius: var(--rundKlein); padding: 10px 20px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; } .werbeRueckSenden:disabled { opacity: .45; cursor: default; } .werbeKarte .werbeRueckBleibt { margin: 10px 0 0; font-size: 12px; } .werbeKarte .werbeRueckMeldung { margin: 8px 0 0; color: var(--gruenText); font-weight: 600; font-size: 14px; } .werbeRueckMeldung:empty { display: none; } @media (max-width: 768px) { .werbeRueckStufe { height: 48px; } .werbeRueckSenden { width: 100%; } } /* --- Der Hinweis-Kasten beim ersten Anmelden (25.08.2026) ---------------- */ /* Eine Zeile je Grenze, Symbol vorn. Kein Fließtext-Absatz: Wer vier Sätze hintereinander liest, liest den vierten nicht mehr — und der vierte ist hier der über das langsame Haus-Modell. */ .dhListe { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; } .dhZeile { display: flex; align-items: flex-start; gap: 12px; background: var(--bg); border: 1px solid var(--linie); border-radius: var(--rundKlein); padding: 11px 13px; } .dhZeile .ikon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--goldText); } .dhSatzZeile { font-size: 14px; line-height: 1.5; color: var(--text); } /* Erwähnungen mit @ (11.08.2026). Die Marke im Verlauf ist bewusst ruhig — sie soll den Namen auffindbar machen, nicht den Satz zerreissen. */ .blase .erwaehnung { color: var(--goldText); font-weight: 600; background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 5px; padding: 0 3px; } .erwaehnPicker { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--randStark); border-radius: var(--rundKlein); box-shadow: var(--schatten); padding: 5px; max-height: 260px; overflow-y: auto; } .erwaehnPicker .epEintrag { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); padding: 8px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 14px; min-height: 38px; } .erwaehnPicker .epEintrag:hover, .erwaehnPicker .epEintrag.aktiv { background: color-mix(in srgb, var(--gold) 12%, transparent); } .erwaehnPicker .epArt { margin-left: auto; font-size: 11px; color: var(--dim); } /* --- Eingabe-Karte (12.08.2026) ----------------------------------------- EIN Rahmen statt fünf: Nur die Karte trägt einen Rand, alles darin ist randlos. EIN Farbfleck: Gold liegt auf dem Senden-Knopf und auf dem Fokus-Rand, sonst nirgends. Zwei Schriftgrößen: 16px Eingabe, 13px Bedienung. Und feste Anker — wachsen darf nur das Feld nach oben, Nachbarn bewegen sich nie (ADR-077 als Gestaltungsprinzip). */ #eingabe { position: relative; padding: 10px 16px 16px; background: var(--bg); } #eingabeKarte { background: var(--panel); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); transition: border-color .15s ease, box-shadow .15s ease; } #eingabeKarte:focus-within { border-color: var(--gold); box-shadow: var(--schatten), 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); } #frage { display: block; width: 100%; background: transparent; border: 0; color: var(--text); padding: 14px 16px 4px; font: inherit; font-size: 14px; line-height: 1.45; resize: none; max-height: 190px; overflow-y: auto; } #frage:focus { outline: none; } #frage::placeholder { color: var(--dim); } /* Beilagen: alles, was die nächste Frage mitnimmt, in einer Zeile. Ohne Inhalt fällt sie ganz aus dem Layout — kein reservierter Leerraum. */ #beilagen { display: none; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px; } #beilagen.hat-inhalt { display: flex; } #eingabeFuss { display: flex; align-items: center; gap: 8px; padding: 4px 8px 8px 12px; min-height: 48px; } #eingabeFuss .fussLuecke { flex: 1; } /* Besetzung: wer würde antworten? Die vorderste Münze ist die Antwortende. Zwei Handlungen an einem Ort, deshalb zwei Klickziele: der Name schreibt die Erwähnung ins Feld (das, was man ständig tut), das Chevron zeigt den Tisch (das, was man selten braucht). Optisch bleibt es ein Element. */ #besetzungGruppe { display: inline-flex; align-items: center; border-radius: 99px; } #besetzungGruppe:hover, #besetzungGruppe:focus-within { background: var(--zeile); } #besetzung { display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 0; border-radius: 99px; padding: 5px 8px 5px 6px; font: inherit; color: var(--text); cursor: pointer; min-height: 40px; } #besetzung:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* 32 statt 28 Pixel Breite: Der Bild-Pruefer hat ihn am 20.08.2026 als einziges zu kleines Tippziel der Chat-Ansicht gemeldet. Das Symbol darin bleibt 14 Pixel — nur die Flaeche waechst. */ #besetzungMehr { display: grid; place-items: center; width: 32px; height: 40px; background: transparent; border: 0; border-radius: 99px; cursor: pointer; color: var(--dim); } #besetzungMehr .ikon { width: 14px; height: 14px; } #besetzungMehr:hover { color: var(--text); } #besetzungMehr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } #besetzung .muenzen { display: inline-flex; } #besetzung .muenzen > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--panel); } #besetzung .muenzen > *:first-child { margin-left: 0; } #besetzung .bText { font-size: 13px; white-space: nowrap; } #besetzung .bName { font-weight: 600; } #besetzung .bWort { color: var(--dim); } #besetzung .bMehr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 9px; background: var(--zeile); color: var(--dim); font-size: 11px; font-weight: 600; } #besetzung.antwortet .muenzen > *:first-child { animation: muenzePuls 1.6s ease-in-out infinite; } @keyframes muenzePuls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Modell + Kosten sind EIN Element. Die Kostenbreite steht fest, damit ein neuer Wert nichts verschiebt — er blendet über. */ #modellChip { display: inline-flex; align-items: baseline; gap: 7px; background: transparent; border: 0; border-radius: 99px; padding: 7px 12px; font: inherit; color: var(--text); font-size: 13px; cursor: pointer; min-height: 40px; } #modellChip:hover, #modellChip:focus-visible { background: var(--zeile); outline: none; } #modellSchaetzung { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; transition: opacity .15s ease; } #modellSchaetzung:not(:empty)::before { content: "·"; margin-right: 7px; opacity: .5; } #eingabeFuss #senden { width: 44px; height: 44px; padding: 0; justify-content: center; background: var(--gold); border-color: var(--gold); color: #fff; transition: opacity .15s ease; } #eingabeFuss #senden .ikon { width: 20px; height: 20px; } #eingabeFuss #senden:hover, #eingabeFuss #senden:focus-visible { background: var(--goldhell); border-color: var(--goldhell); } /* Leeres Feld oder laufende Antwort: der Knopf ist wirklich deaktiviert, nicht nur blass. Ein Knopf, der aussieht wie ein Knopf und nichts tut, ist für Tastatur und Vorlese-Programme eine Falle. */ #eingabeFuss #senden:disabled { opacity: .4; cursor: default; } #eingabeFuss #senden:disabled:hover { background: var(--gold); border-color: var(--gold); } #besetzungPopover, #modellPopover { bottom: calc(100% + 6px); max-width: 340px; } #besetzungPopover { left: 0; } #modellPopover { right: 56px; min-width: 240px; } .popoverKopf { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin-bottom: 8px; } .modellZeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; background: transparent; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left; } .modellZeile:hover, .modellZeile.aktiv { background: color-mix(in srgb, var(--gold) 12%, transparent); } .modellZeile .mzPreis { margin-left: auto; color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* Ein Schloss klebt an dem Abschnitt, den es zusperrt. Seit der Name des Meetings darüber steht (21.08.2026), braucht es sichtbaren Abstand nach oben — sonst las es sich als Sperre des Namensfeldes, das offen ist. */ .besetzungSperre { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-top: 14px; font-size: 12.5px; color: var(--dim); } .besetzungSperre .ikon { width: 14px; height: 14px; flex: none; } /* Die Zeilen im Tisch-Popover sind Knöpfe: ein Klick spricht die Agentin an. */ .rosterZeile.ansprechbar { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 7px; } .rosterZeile.ansprechbar:hover, .rosterZeile.ansprechbar:focus-visible { background: color-mix(in srgb, var(--gold) 12%, transparent); outline: none; } /* Erstbesuch: der Puls sitzt auf der KARTE, nicht mehr auf dem Textfeld — ein