/* Formsprache der Webseite — eine Datei für alle Boxen des Streams. Jede Box (`panels/web_*.html`) verlinkt sie; der Browser holt sie einmal. Die Box füllt `.panel-body` randlos (board.css:251 setzt dort keine Polsterung). */ .wb{ /* Hell, nicht dunkel, und EINE Farbe: Weiss traegt, `--akzent` betont. Wo mehrere Dinge auseinandergehalten werden muessen, tun das Beschriftung, Platz und Zahl — nicht der Farbton (fruehere Toene je Thema und je Modul waren neun Farben auf einer Seite). `var(--kf,var(--akzent))` bleibt die Form; `--kf` setzt niemand mehr. */ /* EINE ruhige Tafel fuer alle Abschnitte und ZWEI Grautoene. Gemessen am 2026-09-08 malte die Seite sieben Untergruende (fuenf getoente Tafeln, dazu zweimal #f8fafc) und vier Grauwerte fuer Text — ein Pastell-Flickenteppich, in dem der Akzent nicht mehr auffiel. Die FARBE des Abschnitts bleibt (`--akzent` unten), aber sie liegt jetzt in Beschriftung, Ziffer, Rahmen und Strich, nicht in der Flaeche. `--leise` ist von #64748b auf #475569 gewandert: es traegt jetzt AUCH, was vorher #334155 und #94a3b8 hiess — und #94a3b8 lag mit 2,9:1 auf Weiss ohnehin unter AA. */ --grund:#ffffff; --tafel:#f6f7f9; --linie:#e3e8ef; --tinte:#0f172a; --leise:#475569; --akzent:#1d4ed8; position:relative; box-sizing:border-box; min-height:100%; background:var(--grund); color:var(--tinte); font:14.5px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; /* Die Spalte steckt in der Polsterung, nicht in den Kindern: so beginnt JEDES Element auf derselben Linie, auch wenn sein Panel eigene Raender setzt. */ /* 14/16 statt 26/30 (Auftrag 2026-09-08: „zwischen den sektions titeln und dem letzten element ist etwas zu viel weisser bereich. der titel erscheint nicht in der mitte zwischen dem letzten element und dem naechsten kacheln"). Der Platz UEBER einer Ueberschrift ist eine Summe aus zwei Boxen — Fuss der vorigen plus Kopf dieser: 30+26 = 56, waehrend darunter nur die 26 von `.wb-kopf` standen. Der Titel hing also am unteren Drittel seiner Luecke. Jetzt sind es 16+14 = 30 oben und 30 unten (`.wb-kopf`): mittig, und 22px weniger Weiss je Abschnittsfuge. */ padding:14px max(30px,calc((100% - 1120px) / 2)) 16px; overflow:hidden; /* Dieselbe Strecke noch einmal, nur ohne Prozent: EIN Kind darf aus der Spalte ausbrechen (`.wb-bild`), und ein Prozentwert am Kind rechnet gegen die INHALTS- breite, der in der Polsterung gegen die Boxbreite — zwei verschiedene Grundlagen. `100vw` ist beides nicht, trifft aber die Boxbreite, weil die Box im Strom die ganze Fensterbreite hat (gemessen 900/1280/1600: Box = Fenster). Steht sie einmal enger, faellt der Ausbruch zu weit aus und die Box schneidet ihn beidseits gleich ab (`overflow:hidden`) — randlos bleibt er, mittig auch. */ --rand:max(30px,calc((100vw - 1120px) / 2)); } .wb *{ box-sizing:border-box; } /* Der Ton je ABSCHNITT — EIN Block fuer die ganze Seite. Vorher trug jede Box dasselbe Blau: 55 Stellen in dieser Datei und in den Panels schreiben `var(--akzent)`, und `--kf` war als Ausweg gedacht, wurde aber nirgends gesetzt. Die 55 Stellen anzufassen waere Fleissarbeit ohne Gewinn — stattdessen bekommt jede Box hier ihren EIGENEN Wert fuer `--akzent`, und alles darin erbt ihn: Beschriftungen, Ziffern, Rahmen, Knoepfe, Striche. Die FLAECHE gehoert nicht dazu — `--tafel` ist seit dem 2026-09-08 fuer alle Abschnitte derselbe ruhige Grauton (oben). `--kf` bleibt unberuehrt gueltig, sein Rueckfall ist ja `--akzent`. `.wb[data-wb="x"]` (0,2,1) schlaegt `.wb` (0,1,0), also gilt der Ton auch dann, wenn ein spaeteres Panel `web.css` erneut verlinkt. Sechs Abschnitte, vier Toene — Start, Nutzen und das Koennen teilen das Blau (s. den Block darunter). Jeder Ton ist gegen Weiss mindestens 4.5:1. Die Boxen, die nur auf Frage kommen (`skills/web_frage.py: BOXEN`), stehen bei dem Abschnitt, zu dem sie gehoeren — eine Antwort soll aussehen wie die Sektion, aus der sie kommt. */ /* Kopf UND Koennen tragen dasselbe Blau — es ist das Blau des Sende-/Mikrofonknopfes in der Buehne (`.wb-chat-form button`, erbt `--akzent` der Box „start"). Auftrag 2026-09-09: „anstelle des gruenen touch bei den tiles und buttons soll es blau sein. so wie beim senden mikrofon im ersten element". Die Kacheln der Kompetenzen und der KI-Faehigkeiten standen bis dahin in Petrol (#0f766e) — Ziffer, Rahmen, Aufzaehlungs- punkt und „mehr" also gruen, waehrend der Knopf, mit dem man dieselbe Seite fragt, blau war. Die Toene je Abschnitt bleiben als Form (Ocker, Rot, Schiefer unten); nur der gruene ist weg. */ .wb[data-wb="start"], .wb[data-wb="usp"], /* Kopf — Blau */ .wb[data-wb="faehigkeiten"], .wb[data-wb="plattform"], /* Koennen — dasselbe Blau */ .wb[data-wb="leistungen"], .wb[data-wb="maschine"], .wb[data-wb="prozessketten"], .wb[data-wb="signal"], .wb[data-wb="gate"], .wb[data-wb="hardware"], .wb[data-wb="addons"], .wb[data-wb="stufen"], .wb[data-wb="begriffe"]{ --akzent:#1d4ed8; } .wb[data-wb="faelle"], .wb[data-wb="zahlen"], /* Use Cases — Ocker */ .wb[data-wb="stimmen"]{ --akzent:#9a5b06; } .wb[data-wb="blog"], .wb[data-wb="vortraege"], /* INTECIO Live — Rot */ .wb[data-wb="film"], .wb[data-wb="kontakt"], .wb[data-wb="buch"]{ --akzent:#b91c1c; } .wb[data-wb="gruender"], .wb[data-wb="unternehmen"], /* Haus — Schiefer */ .wb[data-wb="paradox"], .wb[data-wb="wandel"], .wb[data-wb="welt"], .wb[data-wb="vision"], .wb[data-wb="mission"], .wb[data-wb="paas"], .wb[data-wb="gruende"]{ --akzent:#334155; } /* Kopf jeder Box: seit dem 2026-09-08 traegt er NUR die Ueberschrift. Auftrag: „mach die sektionen ähnlich wie beim bereich wo die maschine schon … mit großer überschrift und entferne die kleinen subtitel danach". Tagline (`.wb-tag`) und Themen-Chips (`.wb-chips`) sind aus den Koepfen entfernt; beide Regeln bleiben gueltig, weil dieselben Klassen ausserhalb eines Kopfes weiterlaufen — die Tagline in der Buehne und unter einem Bild, die Chips in der Buehne. */ .wb-kopf{ display:flex; flex-direction:column; align-items:center; gap:8px; /* 30px — dieselbe Strecke, die jetzt ueber dem Titel steht (s. `.wb` oben). */ margin-bottom:30px; } .wb-kopf h2{ margin:0; } /* Die Tagline sagt in EINEM Satz, worum es in diesem Abschnitt geht — sie steht zwischen Überschrift und Chips und ist kein Fließtext (der folgt darunter). */ .wb-tag{ margin:0 auto; max-width:68ch; text-align:center; font-size:14.5px; line-height:1.5; color:var(--leise); } .wb-tag b, .wb-tag strong{ color:var(--tinte); font-weight:650; } /* Der Zwischentitel einer Box („Der blinde Fleck", „Die Kette", …): groß und prägnant, aber ohne harten Kasten. Versalien plus 2px-Ring lasen sich bei dieser Größe wie eine Warnmeldung; jetzt trägt eine getönte Platte mit Akzentstrich darunter die Farbe und die Type den Titel. `width:max-content` hält die Platte am Text, `margin:0 auto` stellt sie in die Mitte wie den übrigen Satzspiegel, `clamp` hält sie auf schmalen Schirmen im Rahmen. */ .wb-marke{ display:block; width:max-content; max-width:100%; margin:0 auto; padding:10px 26px 12px; border-radius:14px; background:linear-gradient(180deg,#f6f9ff 0%,#e9f0fe 100%); box-shadow:inset 0 -3px 0 0 rgba(37,99,235,.85); font-weight:700; font-size:clamp(14.5px,2.5vw,34px); line-height:1.22; letter-spacing:-.005em; color:#12306e; text-align:center; } /* In einer Karte ist die Platte ein Kasten im Kasten („Change Management") — dort beschriftet die Marke nur, also tragen Farbe und Sperrung, nicht der Hintergrund. */ .wb-karte > .wb-marke, .wb-termin > .wb-marke{ width:auto; margin:0 0 8px; padding:0; background:none; box-shadow:none; text-align:left; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--akzent); } /* Im KOPF steht keine Marke mehr (2026-09-08). Sie war dort ein zweiter Titel: 34px/680 ueber dem h2 mit 34px/650 — gemessen trugen fuenf der zwoelf ruhenden Boxen zwei fast gleich grosse Titelzeilen, sieben eine. Jetzt traegt jeder Kopf EIN Schild, sein h2; das kurze Wort steht dort, wo es hingehoert: als Abschnittsmarke aus der Leiste (`skills/web_nav.py: ZIELE`). Ausserhalb eines Kopfes bleibt `.wb-marke` als Beschriftung gueltig (Karte, Termin — eigene Regel darueber). */ .wb-quelle{ margin-left:auto; font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--leise); } /* Das Groessenverhaeltnis Titel:Fliesstext (2026-09-07): 26/14 war 1.9:1, die Abschnittstitel lasen sich wie fetter Fliesstext. Gemessen an der Vorlage (faktor3.de: h2 42px auf p 16px = 2.6:1) — hier `clamp`, weil die Boxen von 360 bis 1440 Pixel Breite dieselbe Regel tragen. Der Boden ist seit der Typoleiter (2026-09-08) 20px — die Stufe unter 34px, denn 26px steht auf keiner Stufe; auf 1440 kommen 34px heraus, also 2.4:1 zum Fliesstext. */ .wb h2{ margin:0 0 10px; font-size:clamp(20px,2.4vw,34px); line-height:1.16; font-weight:650; letter-spacing:-.015em; } /* EIN Zwischentitel, eine Form (2026-09-08): 14.5px/620 in Tinte, linksbuendig. Zentriert ist nur die UEBERSCHRIFT der Box (`.wb h2`) — eine Ebene tiefer laeuft der Text links, in der Karte wie im Blatt (`.wb-sicht` zentriert sonst alles darin). Gemessen standen hier fuenf Formen: 11px Versalien in Akzentfarbe, 13px grau gesperrt, 20px, 14.5px/640 und diese. Panels sagen nur noch ihre ABSTAENDE. */ .wb h3{ margin:0 0 6px; font-size:14.5px; font-weight:620; text-align:left; } .wb p{ margin:0 0 12px; color:var(--leise); max-width:70ch; } .wb .leise{ color:var(--leise); } /* Karten — der wiederkehrende Baustein im Strom. */ /* Die Karten stehen mittig — wie die Kacheln (`.wb-kacheln`) und aus demselben Grund: ein `auto-fill`-Gitter beginnt immer links, eine halb gefuellte Reihe laesst die Luecke rechts stehen. Flex mit fester Kartenbreite zentriert JEDE Reihe; eine Box mit anderer Breite sagt das an ihren Karten (`> *`). */ .wb-karten{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } /* HOECHSTENS DREI je Reihe (2026-09-08, Auftrag: „auch in anderen sektionen sollen maximal 3 kacheln nebeneinander sein bei mehreren reihen"). Eine feste Breite kann das nicht sagen: 250px liessen auf der 1120er Spalte VIER Karten stehen, ein groesserer Festwert haette auf schmalen Schirmen zu frueh umgebrochen. Ein Drittel der Spalte minus der zwei Luecken trifft beides — und `min-width` bricht auf schmalen Schirmen von selbst auf zwei und eine Karte um. */ .wb-karten > *{ flex:0 1 calc((100% - 28px) / 3); min-width:230px; } /* EINE Karte fuer die ganze Seite (2026-09-08): ein Grund (Tafel), ein Rahmen, ein Radius (12px), ein Polster (14/16). Gemessen standen hier DREIZEHN Formen fuer dasselbe Ding — 67 der 146 Flaechen trugen diese, die uebrigen zwoelf Varianten wichen nur im Radius (9/10/12/14/16), im Grund (Tafel/weiss) und im Polster ab (p9 12 · p12 14 · p14 14 12 · p15 18 · p16 · p16 16 14 · p18 18 20 · p18 20 · p22 24 20). Die Panels sagen seither nur noch LAGE (flex, gap, Breite) und ZUSTAND (Hover, aria-expanded); wer die Flaeche aendern will, aendert sie hier — einmal fuer alle. */ .wb-karte, .wb-num > *, .wb-fliese, .wb-b, .wb-buch-verz, .wb-h-geraet, .wb-stat, .wb-phase, .wb-usp-karte, .wb-usp-rechnung, .wb-usp-zeile, .wb-bruecke, .wb-termin{ background:var(--tafel); border:1px solid var(--linie); border-radius:12px; padding:14px 16px; } /* Nur die Karte selbst blendet ein — die Startwerte gehoeren NICHT in die Flaechenregel oben, sonst bliebe jedes Ding unsichtbar, das kein Beobachter anfasst. */ .wb-karte{ position:relative; overflow:hidden; opacity:0; transform:translateY(14px); } .wb-an .wb-karte{ animation:wb-auf .5s cubic-bezier(.2,.7,.3,1) forwards; } @keyframes wb-auf{ to{ opacity:1; transform:none; } } /* Hier stand `.wb-karte::after` — ein 2px-Streifen in Akzentfarbe an der linken Kante JEDER Karte. Bei drei bis sechs Karten je Abschnitt war das die haeufigste farbige Flaeche der Seite und trug nichts: die Karte ist schon durch Grund und Rahmen abgesetzt. Weg, ueberall — nicht nur an den Beitraegen, wo es aufgefallen ist. Die Karte behaelt `position:relative`/`overflow:hidden`: Panele setzen darin eigene absolute Kinder (z.B. `.wb-post-bild`). */ /* Die Zwischenaussage — der Satz, der einen Abschnitt auf den Punkt bringt („Betriebskosten = Strompreis", „Rampenauslastung +25 %"). Sie ist ein ZWISCHENTITEL, keine Fussnote: Tinte statt Akzent, groesser als der Fliesstext, eigene Zeile mit Luft darueber. Wo sie nur ein Kleinlabel unter einer grossen Zahl ist, sagt die Box das selbst (`web_paradox.html`). */ .wb-kennzahl{ display:block; margin:12px 0 0; font-weight:700; font-size:14.5px; line-height:1.3; letter-spacing:-.01em; color:var(--tinte); } /* `.wb-fuss` war die Quellenzeile unter einer Karte („Quelle: Vortrag „Logistics AI" · Folie 13 · 17"). Seit dem 2026-09-08 setzt kein Panel sie mehr — toter Bestand, absichtlich stehen gelassen, weil die Felder (`quelle`) in den Daten bleiben. */ .wb-fuss{ margin-top:8px; font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--leise); } /* Vorschlagsknöpfe — sie schreiben in die Eingabezeile des Boards, statt zu verlinken. EINE Form fuer jeden Chip der Seite: die Modulworte der Buehne („SAP EWM"), die Themen-Chips jeder Box und die Folge-Chips unter einer Antwort trugen drei Toene (blasses Blau, Tafel, Weiss) — derselbe Weg soll ueberall gleich aussehen. Der Ton der Buehne gewinnt, weil er der leiseste ist. */ .wb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .wb-chip, .wb-wort{ border:1px solid var(--linie); border-radius:999px; background:var(--tafel); color:var(--leise); padding:6px 13px; font:13px/1.25 inherit; cursor:pointer; } .wb-chip:hover{ border-color:var(--akzent); color:var(--akzent); } /* === Bausteine der Firmenseite ============================================== Die Boxen der Seite sind aus wenigen Teilen gebaut, damit jede Box ihr eigenes Thema zeigen kann, ohne ihre eigene Formsprache zu erfinden. Alles hier ist fuer den Strom gedacht: volle Breite, kein Rahmen, Bewegung nur beim Einlaufen. Eingelaufen wird ueber `.wb-an` (setzt `web.js:staffel`, sobald die Box im Bild ist) — ein Element mit `.wb-el` bekommt dort seine Verzoegerung. */ .wb-el{ opacity:0; transform:translateY(14px); } .wb-an .wb-el{ animation:wb-auf .5s cubic-bezier(.2,.7,.3,1) forwards; } /* Nummerierte Karten — der haeufigste Baustein (Leistungen, Gruende, Mission). */ .wb-num{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } /* Auch hier hoechstens drei je Reihe — dieselbe Rechnung wie bei `.wb-karten`. */ .wb-num > *{ flex:0 1 calc((100% - 28px) / 3); min-width:230px; position:relative; } .wb-nr{ display:block; font:600 11px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em; color:var(--kf,var(--akzent)); margin-bottom:8px; } .wb-num h3{ margin:0 0 5px; } .wb-num p{ margin:0; font-size:13px; color:var(--leise); max-width:none; } .wb-mod{ margin-top:9px; font:11px/1.4 ui-monospace,Menlo,monospace; color:var(--kf,var(--akzent)); letter-spacing:.03em; } /* Modul-Fliesen — kleine, dichte Kacheln (SAP-Module, Geraete). */ .wb-fliesen{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .wb-fliese{ min-width:96px; } .wb-fliese b{ display:block; font:600 13px/1 ui-monospace,Menlo,monospace; color:var(--akzent); letter-spacing:.06em; } .wb-fliese span{ display:block; margin-top:4px; font-size:11px; color:var(--leise); } /* Bildbox — das Bild traegt die Box, der Text liegt darauf. Sie ist das EINE Element, das die Spalte verlaesst: von Kante zu Kante der Seite (`--rand` oben), und dafuer OHNE Radius — ein runder Eckenschnitt an der Fensterkante zeigt nur das Weiss dahinter. Es lief frueher schon einmal randlos (`margin:-30px`), das ging aber nur, solange die Polsterung 30px war; jetzt nennt die Box ihre Strecke. Die Breite waechst, die HOEHE nicht: das Seitenverhaeltnis gibt sie vor, `max-height` deckelt sie und `cover` schneidet den Rest weg — sonst waere das Band mit der Seite mitgewachsen (gemessen 630px bei 1120 Spaltenbreite, also 720 bei voller Breite). EINE Hoehe fuer alle sechs Baender: 32/11, hoechstens 320px. Drei Panels sagten das bis 2026-09-08 selbst und jedes ein wenig anders (280 · 300 · 320), drei sagten nichts und wurden 630 hoch. */ .wb-bild{ position:relative; margin:18px calc(-1 * var(--rand)) 0; overflow:hidden; } .wb-bild img{ display:block; width:100%; aspect-ratio:32/11; max-height:320px; object-fit:cover; } /* Die Schrift bleibt in der Spalte, auch wenn das Bild sie verlaesst — sie soll auf derselben Linie beginnen wie die Ueberschrift der Box. */ .wb-bild-schrift{ position:absolute; left:var(--rand); right:var(--rand); bottom:26px; color:#fff; text-shadow:0 2px 20px rgba(2,6,23,.85); } /* Traegt das Band einen Titel, steht die Beschreibung darunter — zwei Zeilen, nicht zwei Kaesten; der Schatten allein trug den langen Satz nicht mehr. */ .wb-bild-schrift b{ display:block; font-size:clamp(20px,2.6vw,34px); font-weight:700; line-height:1.22; } .wb-bild-tag{ display:block; margin-top:7px; max-width:56ch; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.93); } .wb-bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,6,23,0) 42%,rgba(2,6,23,.72) 100%); } /* Zwei Zeilen brauchen mehr Grund als eine — der Verlauf setzt fuer diese Baender frueher an, statt einen zweiten Kasten unter die Schrift zu legen. */ .wb-bild:has(.wb-bild-tag)::after{ background:linear-gradient(180deg,rgba(2,6,23,0) 26%,rgba(2,6,23,.80) 100%); } .wb-bild-schrift{ z-index:1; } /* Die Knotenflaeche liegt AUF dem Bild und unter der Schrift: dasselbe Netz, das die Buehne traegt, laeuft seit 2026-09-08 auch auf jedem Band (Auftrag: "do this also for the other images"). Gezeichnet wird in `web.js:knotenFlaeche`, gemessen am Band — nicht an der Box, die es traegt. */ .wb-bild .wb-knoten{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } /* Ein Band MIT Avatar-Karte ist halb so hoch wie der Schirm (Auftrag 2026-09-08: „gib dbei intecio_web den anderen sektionen mit dem grossen bild und der animation darauf, auch haelfte der bildschirm hoehe") — die Buehne ist ein ganzer Schirm, ein Band die Haelfte. `:has()` statt einer zweiten Klasse im Markup: die Hoehe folgt der Karte, und die Karte steht in genau EINER Zeile im Panel (`_web_av_slot.html`). Baender ohne Karte behalten ihre 32/11. Das Bild verlaesst dafuer den Fluss: es kann die Hoehe nicht mehr geben (sein Verhaeltnis verlangte bei 1920 Breite 660px, also mehr als die halbe Seite), es liegt als Grund unter der Box und `cover` schneidet. Die Box haengt ihre Kinder nach unten — erst die Schrift, dann die Karte, beides auf der Linie der Spalte (`--rand`). */ .wb-bild:has([data-av-slot]){ min-height:50svh; display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:26px var(--rand); } .wb-bild:has([data-av-slot]) > img{ position:absolute; inset:0; height:100%; max-height:none; aspect-ratio:auto; } /* Im Fluss statt am unteren Rand — darunter steht jetzt die Karte. `relative` bleibt noetig, damit `z-index` greift; der waagerechte Versatz kommt aus der Polsterung der Box. `2` und nicht die `1` von oben: die Knotenflaeche liegt auf derselben Stufe, und je nach Panel steht ihr Canvas VOR oder HINTER der Bildschrift im Dokument (`web_gruender.html` vor, `web_leistungen.html` nach) — dann legte eine Meldungsblase sich mitten auf die Ueberschrift. Auf Stufe 2 steht die Schrift ueber dem Netz, wie die Karte (`.wb-bandav`). */ .wb-bild:has([data-av-slot]) .wb-bild-schrift{ position:relative; left:auto; right:auto; bottom:auto; z-index:2; } /* Die Karte liegt ueber Schleier und Netz und nimmt Klicks — das Netz nimmt keine (`pointer-events:none` darueber). Wie sie AUSSIEHT, steht bei `.wb-chat`: hier steht nur, wo sie liegt. */ .wb-bandav{ position:relative; z-index:2; } .wb-bandav .wb-chat{ margin:0; } /* Nur EINE Karte ist zu sehen (`assets/gespraech.js:eineKarte`, Auftrag 2026-09-09: „zusaetzlich soll immer nur ein avatar chat box aktiv angezeigt werden"). Unsichtbar, nicht entfernt und nicht `display:none` — in der ruhenden Karte kann die laufende Sitzung stehen (Video, Leinwand, Protokoll), und `display:none` haelt ein Video an. Die Karte behaelt damit ihren Platz auf dem Band; das Band sieht ohne sie so aus wie die Baender, die nie eine hatten. */ .wb-bandav-ruht{ visibility:hidden; opacity:0; pointer-events:none; } .wb-bandav{ transition:opacity .25s ease; } @media (prefers-reduced-motion:reduce){ .wb-bandav{ transition:none; } } /* Das Gesicht ist auf dem Band kleiner als auf der Buehne: 230px sind dort richtig, wo ein ganzer Schirm zur Verfuegung steht — auf der Haelfte nahmen sie die halbe Bandhoehe und drueckten Titel und Satz nach oben aus dem Schleier heraus. 160px lassen der Schrift ihren Grund und dem Bild seine Flaeche. Nur auf dem breiten Schirm: unter 640px stellt `.wb-chat` auf EINE Spalte um (`@media (max-width:640px)`), und diese Zeile waere die spezifischere — das Gesicht stuende dort wieder neben der Ausgabe, 160px breit. */ @media (min-width:641px){ .wb-bandav .wb-chat{ grid-template-columns:160px 1fr; } } /* Der Schleier reicht hoeher als bei den flachen Baendern. Er ist dort auf die untere Kante gerechnet (0 % bis 26 %/42 % durchsichtig), weil die Schrift dort am Boden klebt; hier stehen Schrift UND Karte in der unteren Haelfte eines halben Schirms — auf `warehouse.webp` und `serverraum.webp` lag der Satz damit auf hellem Blech und war nicht mehr zu lesen. Deshalb ein Verlauf ueber die ganze Hoehe: oben ein Hauch, ab der Mitte Grund. Muss NACH `:has(.wb-bild-tag)` stehen — gleiche Spezifitaet, es gewinnt die spaetere Zeile. */ .wb-bild:has([data-av-slot])::after{ background:linear-gradient(180deg,rgba(2,6,23,.10) 0%,rgba(2,6,23,.42) 34%, rgba(2,6,23,.72) 60%,rgba(2,6,23,.88) 100%); } /* Kette — eine Spur mit Punkten, an der die Stufen haengen. */ .wb-kette{ position:relative; padding-left:22px; margin:14px 0 0; list-style:none; } .wb-kette::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--kf,var(--akzent)),transparent); } .wb-kette li{ position:relative; padding:0 0 13px; } .wb-kette li::before{ content:""; position:absolute; left:-21px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--kf,var(--akzent)); box-shadow:0 0 0 3px #fff; } .wb-kette b{ display:block; font-size:13px; } .wb-kette span{ font-size:13px; color:var(--leise); } /* Portraet und Cover — die beiden Bilder, die Personen bzw. das Buch zeigen. */ .wb-portraet{ width:132px; height:132px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 10px 30px -14px rgba(15,23,42,.5); } .wb-cover{ width:200px; height:auto; border-radius:4px; box-shadow:0 18px 40px -18px rgba(15,23,42,.6), 0 2px 6px rgba(15,23,42,.15); } /* Der Vorschlag unter einer nachgelieferten Box — kein Kasten, nur eine Zeile Chips. */ .wb-weiter { padding: 0 20px 18px; } .wb-weiter .wb-chips { align-items: center; } .wb-weiter-wort { color: var(--leise); font-size: .8rem; margin-right: 2px; } /* Kacheln mit eigenem Motiv und Unteransicht --------------------------------- Eine Box zeigt ihre Punkte zuerst als Kacheln: jede traegt ihren eigenen Fotoausschnitt (`assets/kachel--.webp`, geschnitten von `bilder_bauen.py`) und ihre Nummer. Ein Klick oeffnet die Unteransicht mit dem vollen Text; oben stehen dann die runden Zahlen, mit denen man weiterblaettert (`web.js:sichten`). Keine Mausgesten — die Kachel zeigt schon im Ruhezustand, dass sie ein Ziel ist. */ /* Die Kacheln stehen mittig in der Spalte — auch eine halb gefuellte letzte Reihe. Das kann ein Gitter nicht: `auto-fill`-Spuren beginnen immer links, die Luecke bleibt rechts liegen. Also Flex mit fester Kachelbreite, `justify-content:center` zentriert JEDE Reihe; schmale Schirme lassen die Kachel schrumpfen (`0 1`). */ .wb-kacheln{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:stretch; } /* Jede Kachel ist ein QUADRAT — gleiche Hoehe in jeder Reihe und in jeder Box, egal wie lang der Titel ist. Vorher wuchs sie mit ihrem Text (gemessen: 310px neben 287px in derselben Box, 242px in der naechsten). Das Quadrat ist ein festes Mass, also muss der Text sich fuegen: Titel und Satz sind beide auf zwei Zeilen geklammert, der ganze Text steht ohnehin im Blatt der Kachel (`.wb-sicht`). */ /* DREI je Reihe, also bei sechs Leistungen zwei Reihen zu drei (2026-09-08, Auftrag: „mach die kachel elemente so groß dass 2 reihen zu 3 elementen angezeigt werden"). 262px waren ein Drittel zu schmal — auf der 1120er Spalte standen VIER Kacheln. Gesagt wird jetzt der ANTEIL: ein Drittel der Spalte abzueglich der zwei Luecken. */ /* Die Hoehe sagt der INHALT, gleich hoch wird die Reihe (`.wb-kacheln{align-items: stretch}`). Bis zum 2026-09-16 stand hier `aspect-ratio:1` — ein festes Quadrat, das mit der Spalte auch in der HOEHE schrumpfte, waehrend der Text seine festen Masse behielt (14.5/13/11px). Flex stauchte dann die Kinder und `overflow:hidden` schnitt mitten in der Zeile ab: gemessen bei 960px Fensterbreite bekam „Hof & Transport" einen 20px-Kasten fuer eine 22px hohe Zeile, 10 von 18 Textstellen der Box waren geschnitten; betroffen war das Band zwischen dem Umbruch (773px) und rund 1000px Fensterbreite — bei 1050px und darueber blieb schon vorher alles ganz. `min-height:max-content` heilt es NICHT — Chromium misst die max-content-Hoehe an der max-content-BREITE, wo nichts umbricht, und kommt auf einen zu kleinen Wert. */ .wb-kachel{ position:relative; flex:0 1 calc((100% - 40px) / 3); min-width:250px; max-width:100%; display:flex; flex-direction:column; text-align:left; cursor:pointer; background:var(--tafel); border:1px solid var(--linie); border-radius:14px; padding:0 0 15px; overflow:hidden; font:inherit; color:inherit; } .wb-kachel-bild{ display:block; flex:0 0 auto; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--linie); background:var(--tafel); } .wb-kachel-nr{ position:absolute; top:10px; left:10px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--akzent); color:#fff; font:600 11px/1 ui-monospace,Menlo,monospace; } .wb-kachel b{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:13px 15px 5px; font-size:14.5px; } .wb-kachel-text{ margin:0 15px; font-size:13px; color:var(--leise); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .wb-kachel::after{ content:"mehr"; position:absolute; right:14px; bottom:13px; font:11px/1 ui-monospace,Menlo,monospace; letter-spacing:.1em; color:var(--akzent); } /* Die runden Zahlen — sie stehen nur in der Unteransicht. Das sagt `web.js:sichten` mit dem `hidden`-Attribut; damit es gegen `display:flex` gewinnt, muss es HIER stehen (wie bei `.wb-chat`, `.av-video`, `.wb-av-opt`). Ohne diese Zeile stand die Leiste ueber dem Kachelbrett, obwohl noch keine Kachel offen war. */ /* Seit dem 2026-09-08 steht die Leiste UNTER dem Blatt (`web.js:sichten`), darum liegt der Abstand jetzt oben statt unten. */ .wb-pager{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; } .wb-pager[hidden]{ display:none; } .wb-p{ width:32px; height:32px; border-radius:50%; border:1px solid var(--linie); background:#fff; color:var(--leise); font:600 13px/1 ui-monospace,Menlo,monospace; cursor:pointer; padding:0; } .wb-p[aria-current="true"]{ background:var(--akzent); border-color:var(--akzent); color:#fff; } /* Das ✕ schliesst die Unteransicht. Es steht DIREKT nach den Zahlen und laeuft mit ihnen in der Mitte (Auftrag 2026-09-08: „ueberall das X zum schliessen direkt nach den zahlen"). Bis dahin schob es ein `margin-left:auto` an den rechten Rand der Box — auf der 1120er Spalte lagen zwischen der letzten Zahl und dem Kreuz rund 800 px, und das Kreuz sah nach nichts aus, was zu den Zahlen gehoert. Rund wie die Zahlen, aber leiser — das Zeichen traegt den Sinn. Gilt fuer alle Boxen mit Kacheln, die Leiste baut `web.js:sichten` ueberall gleich. */ .wb-p-zu{ font-size:14.5px; letter-spacing:0; color:var(--leise); } .wb-p-zu:hover{ background:var(--akzent); border-color:var(--akzent); color:#fff; } .wb-sicht{ animation:wb-auf .42s cubic-bezier(.2,.7,.3,1) both; } /* Der Titel des Blattes ist ein Zwischentitel wie jeder andere — Groesse und Gewicht sagt `.wb h3` (2026-09-08). Hier stand er mit 20px als eigene Stufe. */ .wb-sicht h3{ margin:0 0 10px; } /* Das Blatt einer Kachel ist der Inhalt der Box, kein Beiwerk: sein Text nimmt deshalb die ganze Spalte (`max-width:none` schlaegt `.wb p` bei gleicher Spezifizitaet nur, weil es spaeter steht). */ .wb-sicht p{ font-size:14.5px; color:var(--leise); max-width:none; } /* Das Blatt fuehrt sein Foto als Kopfbild: volle Spaltenbreite, gedeckelte Hoehe. Seit dem 2026-09-08 traegt es den Titel (Auftrag: „zeig beim anklicken von kacheln das kopfbild groesser an und platzier den weissen titel text im bild") — dafuer ist das Band von 32:9/230px auf 21:9/420px gewachsen, sonst haette der Titel keine Flaeche. */ .wb-sicht-bild{ display:block; width:100%; aspect-ratio:21/9; max-height:420px; object-fit:cover; background:var(--tafel); } /* Der Titel steht IM Bild: weiss, mittig, ueber einem Verlauf von unten. Der Verlauf ist Pflicht, nicht Zierde — auf einem hellen Foto waere weisse Schrift sonst nicht lesbar. `.wb-sicht-kopf h3` hat dieselbe Spezifizitaet wie `.wb-sicht h3` oben und gewinnt nur, weil es spaeter steht. */ .wb-sicht-kopf{ position:relative; } .wb-sicht-kopf::after{ content:""; position:absolute; inset:auto 0 0 0; height:62%; background:linear-gradient(to top,rgba(2,6,23,.78),rgba(2,6,23,0)); pointer-events:none; } .wb-sicht-kopf h3{ position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:0 22px 20px; color:#fff; text-shadow:0 1px 12px rgba(2,6,23,.5); font-size:clamp(18px,2vw,26px); line-height:1.2; } /* Rand, Radius und Abstand liegen seit 2026-09-07 auf der Lupe, nicht mehr am Bild: das Bild zoomt darin (s. `wb-lupe` unten), und ein mitwachsender Rahmen haette gepulst statt eingetaucht. */ .wb-sicht .wb-lupe{ border:1px solid var(--linie); border-radius:14px; margin-bottom:18px; } .wb-detail .wb-kacheln, .wb-detail .wb-karten{ display:none; } /* Mittiger Satzspiegel ------------------------------------------------------- Die Box bleibt volle Fensterbreite, ihr INHALT steht aber in einer mittigen Spalte — auf breiten Schirmen klebte er sonst am linken Rand. Ueberschrift, Kopfzeile und Einleitung stehen mittig; Fliesstext und Listen bleiben linksbuendig, weil zentrierte Absaetze schlechter zu lesen sind. Die Vollflaechen-Kinder (Film, Schleier, Knoten) liegen `inset:0` ueber der Box — sie haengen an der Box, nicht an der Spalte, und bleiben randlos. `.wb h2` (0,1,1) setzt oben `margin:0 0 10px` und schlaegt damit `.wb > *` (0,1,0); die Mitte muss deshalb fuer die schmalen Textelemente eigens gesagt werden. */ .wb > h2, .wb > h3, .wb > p, .wb > ul, .wb > ol{ margin-left:auto; margin-right:auto; } .wb-kopf{ justify-content:center; } .wb-quelle{ margin-left:0; } .wb h2, .wb-titel{ text-align:center; } .wb > p, .wb-lead{ text-align:center; max-width:74ch; } .wb-fliesen, .wb-chips{ justify-content:center; } .wb-buehne-module{ text-align:center; } /* Ein einzeln stehender Chip ist keine Reihe — er zentriert sich selbst. */ .wb-mod{ display:block; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; } /* Ein Blatt ist ein Artikel, und ein Artikel beginnt an EINER Kante (Auftrag 2026-09-08: „der artikel sieht nicht sauber aus, er ist an unterschiedlichen stellen eingerueckt. es soll alles linksbuendig sein"). Bis dahin stand das Blatt mittig, die Absaetze aber linksbuendig in einer eigenen mittigen Spalte (`margin:auto` + `max-width:70ch`): der Titel begann in der Mitte, der Absatz eingerueckt, die Zahlen und die Liste woanders — bei jedem Element eine andere Kante. Die Zeilenlaenge bleibt gedeckelt (`.wb p`), nur die Spalte steht jetzt links. */ .wb-sicht{ text-align:left; } .wb-sicht p, .wb-sicht ul, .wb-sicht ol{ text-align:left; margin-left:0; margin-right:0; } .wb-sicht .wb-lupe{ margin-left:0; margin-right:0; } /* Die Zahlenleiste bleibt MITTIG (Auftrag 2026-09-08: „mach die kreis zahlen zentriert"). Sie ist kein Satz im Artikel, sondern seine Bedienung — die linke Kante gilt fuer den TEXT, die Kreise stehen unter dem Blatt wie die Kacheln darueber. Sie lief einen Auftrag lang links, weil „alles linksbuendig" auch fuer sie gelesen wurde. */ .wb-pager{ justify-content:center; } /* Nummerierte Karten IM Blatt folgen der linken Kante des Textes. `.wb-num` zentriert sonst (`justify-content:center`): bei vier Teilen standen drei in der ersten Reihe und das vierte allein in der Mitte der zweiten — dieselbe Aufzaehlung an zwei Kanten (Auftrag 2026-09-08: „der ausgabe text bei den kompetenzen hat immer noch eine unterschiedliche einrueckung"). */ .wb-sicht .wb-num{ justify-content:flex-start; } /* Chips sind Wege ------------------------------------------------------------ Jeder Chip ist anklickbar: er zeigt, wo sein Wort auf der Seite noch vorkommt (`web.js:woerter`). Die Lupe steht schon im Ruhezustand da — es gibt keinen Mausgesten-Effekt, der es sonst verraten muesste. */ .wb-wort, .wb-mod{ cursor:pointer; } .wb-wort:not(a)::after, .wb-mod::after{ content:"\2315"; margin-left:7px; font-size:.92em; color:var(--akzent); } .wb-wort[aria-pressed="true"], .wb-mod[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:#fff; } .wb-wort[aria-pressed="true"]::after, .wb-mod[aria-pressed="true"]::after{ color:#fff; } /* Das Schlagwort im Absatz (`web.js:schlagworte`) — dunkler und schwerer als der graue Fliesstext, aber kein Farbfleck: die Betonung traegt der Ton der Tinte, der Akzent bleibt den Wegen (Chips, Verweise) vorbehalten. */ /* Schwarz, nicht blauschwarz: das Schlagwort soll sich vom Satz abheben, und der Satz steht in `--tinte` (#0f172a). Der Unterschied war zu klein, um als Hervorhebung zu gelten — und die Akzentfarbe kam nicht in Frage, die traegt jetzt den Abschnitt. */ .wb-schlag{ color:#000; font-weight:700; } /* === Das eine Gespraech ==================================================== Ein Chip fragt den Assistenten (`web.js:chat`), und `.wb-chat` wandert unter die geklickte Reihe (`gespraech.js:zeigen`) — es gibt genau EINEN Knoten, er wird verschoben, nicht geklont. Weil er in jeder Box stehen kann, stehen seine Regeln HIER und nicht in `web_buehne.html`. Links das Gesicht, rechts die Ausgabe — die Frage steht nicht daneben: sie stand gerade noch im Eingabefeld und waehrend des Rechnens im Wartezustand, das genuegt. */ /* Ohne Grund und ohne Rahmen (Auftrag 2026-09-08: „gib der avatar chat box keine hintegrund farbe. so dass nur die elemente gezeigt werden"). Bis dahin lag hier eine milchweisse Karte mit Rahmen und 16 px Radius. Was sichtbar bleibt, traegt seinen Grund selbst: das Gesicht, die Saetze im Protokoll (`.wb-satz`), die Chips und die Zeile. Auf dem Bild der Buehne gibt der Verlauf des Schleiers den Grund. */ .wb-chat{ margin:18px 0 0; padding:0; /* Die linke Spalte traegt das Gesicht und gibt ihm seine Groesse: die Karte ist quadratisch (`.wb-av-karte`), also ist die Spaltenbreite auch ihre Hoehe. 230px statt 170px (Auftrag 2026-09-08: „mach den avatar groesser im desktop modus") — auf der Buehne stehen dafuer 1120px Breite zur Verfuegung, und das Gesicht ist das Stueck, auf das der Besucher zuerst sieht. Auf dem Telefon gilt das nicht: dort steht die Karte ueber der Ausgabe und nimmt die halbe Schirmbreite (s. `@media (max-width:600px)`). */ display:grid; grid-template-columns:230px 1fr; gap:16px; align-items:start; text-align:left; } .wb-chat[hidden]{ display:none; } /* Der Puls liegt UNTER dem Video und laeuft von Anfang an: das Gesicht braucht Sekunden, die Flaeche darf nicht leer warten. Bleibt der Avatar aus, bleibt der Puls — er ist die Anzeige „hier hoert jemand zu". */ .wb-chat-av{ position:relative; display:grid; gap:8px; justify-items:center; } /* Die Flaeche hat zwei Seiten: vorn das Gesicht, hinten die Einstellungen. Ein Tipp darauf dreht sie (`gespraech.js`, `.gedreht`). Gedreht wird die INNERE Huelle, damit die Karte ihren Platz im Raster behaelt; die Perspektive sitzt aussen. `backface-visibility` haelt die abgewandte Seite verdeckt — das Video laeuft dabei weiter, es ist nur nicht zu sehen. */ .wb-av-karte{ position:relative; width:100%; aspect-ratio:1/1; perspective:900px; cursor:pointer; } .wb-av-dreh{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.7,.3,1); } .wb-av-karte.gedreht .wb-av-dreh{ transform:rotateY(180deg); } .wb-av-buehne, .wb-av-rueck{ position:absolute; inset:0; border-radius:14px; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .wb-av-buehne{ background:#0f172a; } .wb-av-puls{ position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, rgba(37,99,235,.55) 0%, rgba(37,99,235,.16) 46%, transparent 70%); animation:wb-av-puls 2.6s ease-in-out infinite; } @keyframes wb-av-puls{ 0%,100%{ transform:scale(.94); opacity:.7; } 50%{ transform:scale(1.06); opacity:1; } } /* Der Grundzustand der Flaeche ist die Marke: die drei schraegen Striche aus `assets/logo.png`, hier als drei Kaesten, die nacheinander atmen. Sie weichen, sobald ein Bild kommt — `:has` fragt das am Video ab, statt dass die Avatar-Logik eine zweite Klasse zu pflegen haette; `.av-video` verliert sein `hidden` genau dann, wenn ein Strom laeuft (`gespraech.js:avatarAn`). */ .wb-av-marke{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9%; } .wb-av-marke i{ display:block; width:9%; height:38%; border-radius:999px; background:#e2e8f0; transform:skewX(-18deg); animation:wb-av-marke 1.9s ease-in-out infinite; } .wb-av-marke i:nth-child(1){ height:30%; animation-delay:0s; } .wb-av-marke i:nth-child(2){ height:44%; animation-delay:.22s; } .wb-av-marke i:nth-child(3){ height:34%; animation-delay:.44s; } @keyframes wb-av-marke{ 0%,100%{ transform:skewX(-18deg) scaleY(.72); opacity:.55; } 50%{ transform:skewX(-18deg) scaleY(1); opacity:1; } } .wb-av-buehne:has(.av-video:not([hidden])) .wb-av-marke{ display:none; } .wb-av-buehne .av-video, .wb-av-buehne .av-leinwand{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .wb-av-buehne .av-video[hidden], .wb-av-buehne .av-leinwand[hidden]{ display:none; } /* LiveAvatar liefert das Gesicht auf gruener Flaeche. Laeuft der Schnitt (`gespraech.js:malen`), zeigt die Leinwand das freigestellte Bild und das Video bleibt nur noch Tontraeger — sichtbar bleibt der dunkle Grund der Buehne. `opacity` statt `display`, denn ein ausgeblendetes Video liefert keine Frames. */ .wb-av-buehne.av-schnitt .av-video{ opacity:0; } /* Ausgabe und Zeile sind EIN Bereich (Auftrag 2026-09-08: „mach aus der antwort box und der input box einen einzigen bereich"). Bis dahin standen sie als zwei Flaechen uebereinander: die Ausgabe ohne Grund, die Zeile als eigene Pille mit eigenem Rahmen — zwei Umrisse, zwei Radien, 6 px Luft dazwischen. Jetzt traegt die SPALTE den Rahmen, und darin liegt oben die Ausgabe, unten die Zeile, getrennt nur von einem Haarstrich. Der durchsichtige Grund des Gespraechs (`.wb-chat`) bleibt, wie am 2026-09-08 bestellt: die Flaeche bekommt hier NUR die rechte Spalte, nicht das Gespraech als Ganzes — die Karte mit dem Gesicht steht weiter frei auf dem Bild. */ /* Seit dem Abend des 2026-09-08 traegt die Spalte NICHTS mehr (Auftrag: „der input box bereich mit dem laufband soll nicht mehr eingerahmt sein zusammen mit der antwort. mach daraus zwei getrennte bloecke mit kleinem abstand dazwischen"). Sie ist nur noch die Reihenfolge und der Abstand: oben die Ausgabe, unten der Eingang — jeder mit eigenem Rahmen, 8 px Luft dazwischen. Klein, wie bestellt: 18 px waeren die Sprosse zwischen zwei BOXEN der Seite, hier stehen zwei Teile EINES Gespraechs untereinander. */ .wb-chat-rechts{ min-width:0; display:flex; flex-direction:column; gap:8px; } /* Die Rueckseite: eine Zeile je Schalter, mit Wort statt bloss Symbol — hier ist Platz dafuer. Der Zustand steht wie zuvor in `aria-pressed`, die Bindung sucht `[data-schalter]` und nicht die Klasse (`gespraech.js`). */ .wb-av-rueck{ transform:rotateY(180deg); display:flex; flex-direction:column; gap:5px; padding:10px; background:#0f172a; } .wb-av-rueck-titel{ font:600 11px/1 ui-monospace,Menlo,monospace; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.55); } .wb-av-opt{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.07); color:#fff; font:500 13px/1.2 inherit; text-align:left; cursor:pointer; } .wb-av-opt svg{ width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .wb-av-opt[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); } .wb-av-opt[hidden]{ display:none; } .wb-av-weg{ margin-top:auto; color:rgba(255,255,255,.72); font-size:11px; } /* Weder Hoehe noch Deckel noch Rollbalken (Auftrag 2026-09-08: „die hoehe der avatar antwort box soll sich immer an die laenge der antwort anpassen, so dass keine scrollbar entsteht"). Die Ausgabe ist damit nur noch die Halterung der Blase — Rahmen, Weiss und Polsterung sind an `.wb-satz` gewandert, wo die Antwort steht. Der Reihe nach standen hier: zwei Mindesthoehen (198 px, dann 182 px), gar keine („lass die input box direkt nach der ausgabe erscheinen"), ein Deckel `max-height:420px` und heute Mittag eine feste `height:200px` gegen das Verschieben. Das Verschieben ist nicht zurueck: die Buehne stellt ihren Block seither nicht mehr mittig, sondern nagelt ihn oben fest (`.wb-buehne-innen` im Panel). Deshalb waechst eine lange Antwort NACH UNTEN, statt Titel und Avatar nach oben zu druecken — was unter der Antwort steht (Zeile, Laufband), rueckt mit ihr, was darueber und daneben steht, bleibt. */ .wb-chat-log{ display:grid; gap:10px; align-content:start; font-size:14.5px; } /* Vor der ersten Frage ist das Protokoll leer — dann steht hier kein leerer weisser Kasten, sondern nichts. Die Halterung selbst ist unsichtbar (kein Rahmen mehr, s. oben) — ohne diese Zeile brachte sie den Spaltenabstand von 8px mit, also einen Sprung der Zeile beim ersten Satz. Das Markup hat im Element keinen Leerraum (`panels/web_buehne.html`), `:empty` greift also. */ .wb-chat-log:empty{ display:none; } /* Waehrend gerechnet wird, bleibt die vorige Antwort stehen — blass, damit sie als das Alte zu lesen ist. Vorher raeumte `fragen()` das Protokoll sofort leer und setzte einen Wartesatz hinein; das ist der Wechsel, der jetzt in der Eingabezeile steht (`.wb-chat-form.denkt`). Leerraeumen tut nur noch die eintreffende Antwort. */ .wb-chat-log.wb-alt{ opacity:.45; } /* Leicht farbig statt grau (Auftrag 2026-09-08: „gib der antwort … eine leicht frabliche hintergrundfarbe"). Bis heute `#f1f5f9` — dasselbe Grau wie jede andere Flaeche der Seite; die Antwort war damit nicht als Antwort zu erkennen. Jetzt ein heller Zug der Akzentfarbe (`--akzent: #1d4ed8`), so schwach, dass die Schrift ihren Kontrast behaelt. Der Wartezustand hat dafuer das Grau uebernommen: er stand vorher auf `#eef2ff` und waere von dieser Antwortfarbe nicht mehr zu unterscheiden — der Wechsel „ich rechne" → „hier ist die Antwort" ist aber der einzige Farbwechsel, den die Box zeigt. */ /* Weiss (Auftrag 2026-09-08: „mach die antwort mit weissem hintergrund"). Bis dahin lag die Antwort als hellblaue Flaeche IN einem weissen Kasten — zwei Flaechen, wo eine gemeint war. Jetzt traegt die Blase, was der Kasten trug: Weiss, Rahmen, Polsterung. Der Kasten ist dafuer leer geworden (s. `.wb-chat-log` oben). */ .wb-chat-log .wb-satz{ position:relative; border-radius:12px; padding:10px 13px; background:#fff; border:1px solid var(--linie); } .wb-chat-log .wb-satz.fehler{ background:#fef2f2; } /* Der Zipfel zum Avatar (Auftrag 2026-09-08: „gib der antwort bubble ein kleines verbindungspfeil wie beim comic buch als sprachblase zum avatar"). Zwei Dreiecke uebereinander: das hintere in der Rahmenfarbe, das vordere um 1px versetzt in der Fuellfarbe — so bekommt der Zipfel dieselbe Kante wie die Blase, ohne dass ein Strich quer durch ihn laeuft. Er sitzt oben links, auf Hoehe des Gesichts, und steht IM Rasterabstand der zwei Spalten und REICHT bis an die Karte (Auftrag 2026-09-08: „mach den sprachbubble pfeil etwas groesser bis er zum avatar fenster reicht") — der Abstand misst 16px, der Zipfel 17, also legt er sich mit seiner Spitze auf das Gesicht. Als er 8px lang war, endete er mitten in der Luft und zeigte auf nichts. Laenge und Hoehe getrennt (`border-right` gegen `border-top/bottom`): mit EINER Kurzform waere ein 17px langer Zipfel auch 34px hoch geworden — ein Keil, kein Zipfel. Kein `clip-path` und kein SVG: der Rand einer Blase mit Zipfel ist der klassische Fall fuer die Dreiecke, und sie erben die Farbe des Zustands (s. `fehler`). */ .wb-chat-log .wb-satz::before, .wb-chat-log .wb-satz::after{ content:''; position:absolute; top:14px; right:100%; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:17px solid var(--linie); } .wb-chat-log .wb-satz::after{ margin-right:-1.5px; border-right-color:#fff; } .wb-chat-log .wb-satz.fehler::after{ border-right-color:#fef2f2; } /* TOTER BESTAND seit 2026-09-08: der Wartezustand stand als eigener Block im Protokoll, jetzt steht er in der Eingabezeile (`.wb-chat-form.denkt`, unten). `gespraech.js` setzt weder `wartet` noch `wb-denkt` noch. Bleibt liegen, weil `@keyframes wb-denkt` selbst in Gebrauch ist (Mikrofon- und Wartepuls am Knopf) und der Name daran haengt. */ .wb-chat-log .wb-satz.wartet{ background:#f1f5f9; } .wb-chat-log .wb-denkt{ margin-top:4px; color:var(--leise); font-size:13px; } .wb-chat-log .wb-denkt::after{ content:''; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:999px; background:currentColor; vertical-align:middle; animation:wb-denkt 1.1s ease-in-out infinite; } @keyframes wb-denkt{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } } .wb-chat-log p{ margin:0; max-width:none; font-size:14.5px; } /* Die Antwort ist der einzige laengere Fliesstext dieser Seite — sie liest sich anders als eine Beschriftung, und sie bekommt seit dem 2026-09-08 auch eine andere Schrift. Eine klare Groteske („gib der antwort eine klare schriftart aehnlich arial"), etwas groesser und luftiger als die Oberflaeche ringsum. Bis zum Nachmittag desselben Tages stand hier eine Leseschrift mit Serifen (Iowan Old Style / Palatino / Georgia) — auf dem Schirm las sie sich als Zitat, nicht als Auskunft. `Arial` zuerst und `Helvetica`/`Arimo` als Rueckfall: alle Namen sind auf den Rechnern schon da, es wird KEINE Schrift von einem fremden Server geholt. Der Rest der Box bleibt `system-ui` — nur der Satz des Avatars wechselt, nicht das Werkzeug drumherum. Und die Leerzeile traegt: `_absaetze` in `core/agent/chat.py` schneidet den Text an „\n\n", `spaces/workbench/panels/antwort_text.html` macht daraus je ein `

`, und `gespraech.js:sauber` uebernimmt keine Attribute — der Abstand steht deshalb HIER und nirgends sonst. Bis heute stand er auf 0, damit lagen zwei Absaetze aufeinander. */ .wb-chat-log .wb-satz p{ font-size:15.5px; line-height:1.62; font-family:Arial,"Helvetica Neue",Helvetica,Arimo,"Liberation Sans",sans-serif; } .wb-chat-log .wb-satz p + p{ margin-top:.72em; } /* Der Wartehinweis ist Oberflaeche, kein Satz des Avatars — er behaelt die Systemschrift. TOTER BESTAND seit 2026-09-08, wie `.wb-satz.wartet` oben. */ .wb-chat-log .wb-satz p.wb-denkt{ font-size:13px; line-height:1.55; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; } /* Ein fettes Wort in der Antwort ist ein Weg, kein Schmuck. Getragen wird das seit 2026-09-08 vom Fettgrad allein, in Schwarz wie die Schlagworte in den Boxen (`.wb-schlag`) — die blaue Signalfarbe stand in kurzen Antworten drei-, viermal und war dann kein Signal mehr. Der Strich kommt erst beim Zeigen: im Fliesstext lasen sich unterstrichene Woerter wie Fussnoten, unter dem Zeiger sagt er „hier geht es weiter". Ein Klick fragt danach — er versetzt das Panel NICHT (`gespraech.js`, `data-frag`), sonst zoege es sich in sich selbst. */ .wb-chat-log .wb-frag{ padding:0; border:0; background:none; font:inherit; font-weight:700; color:#000; text-decoration:none; cursor:pointer; } .wb-chat-log .wb-frag:hover{ text-decoration:underline; text-underline-offset:2px; } /* Der Pfeil sitzt IN der Zeile (Auftrag 2026-09-08: „der senden pfeil soll innerhalb der input box sein"). Bis dahin standen Zeile und Pfeil als zwei Flaechen nebeneinander. Also `position:relative` an der Form, der Knopf absolut an ihrem rechten Rand und ein Polster rechts im Feld, das ihn freihaelt: 38 px Knopf + 2x4 px Luft = 46, aufgerundet auf 48, damit die letzte Ziffer einer langen Frage nicht darunter laeuft. Zwischen Ausgabe und Zeile steht nichts mehr: die Vorschlagsreihe `.wb-chat-vor` (drei Chips als Sprungziele) ist am 2026-09-08 gegangen — „entferne die vorschlagsliste ueber der input box"; ihre Regeln sind mit ihr weg. Dafuer trennt ein Abstand (Auftrag 2026-09-08: „mach wieder einen abstand zwischen der antwort bereich und dem input box und laufband bereich"). Es sind ZWEI Bloecke: was der Avatar sagt, und womit man ihn fragt — Zeile und Laufband gehoeren zum zweiten und stehen mit 8px dicht beieinander (`.wb-buehne-band`). 18px ist die Sprosse, mit der diese Seite Bloecke trennt (`.wb-chat{ margin:18px 0 0 }`, Zeilenabstand des Bretts); die 10px davor lasen sich mit der Ausgabe als eine Flaeche. Die Polsterung ueber der Trennlinie bleibt, wo sie ist — sie gehoert zur Linie, nicht zum Abstand. */ /* Klassisches Weiss (Auftrag 2026-09-08: „nutze fuer den input bereich klassisches weisse farbe"). Die Spalte lag bis dahin auf `rgba(255,255,255,.94)` — milchig, damit das Bild der Buehne durchscheint; der Eingang ist dagegen die Flaeche, auf der getippt wird, und die ist weiss. Das Laufband liegt mit im Kasten: Zeile und Worte sind EINE Bedienung (`.wb-buehne-band{ margin-top:8px }` im Panel haelt deren Abstand). */ .wb-chat-eingang{ background:#fff; border:1px solid var(--linie); border-radius:16px; padding:10px; } /* Kein schwarzer Rahmen, wenn die Zeile den Fokus bekommt (Auftrag 2026-09-08: „wenn die input box gerade den fokus bekommt dann erscheint ein schwarzer rahmen der soll nicht da sin"). Das war der Standard-Umriss des Browsers am Feld — es hat selbst keinen Rahmen (`border:0`), also legte er sich mitten in den Kasten. Ersatzlos ist er nicht: der KASTEN zeigt den Fokus, indem seine Kante die Akzentfarbe annimmt. Wer mit der Tastatur kommt, sieht also weiter, wo er steht — nur am Umriss des Blocks statt an einem schwarzen Strich darin. */ .wb-chat-eingang:focus-within{ border-color:var(--akzent); } .wb-chat-form input:focus{ outline:none; } /* Kein Abstand und keine Trennlinie mehr: die Zeile ist das erste Kind ihres eigenen Kastens, nicht die untere Haelfte eines gemeinsamen. Die 18 px Luft zur Ausgabe stehen jetzt als `gap` an der Spalte (8 px, s. `.wb-chat-rechts`), der Haarstrich ist mit dem gemeinsamen Rahmen gegangen. */ .wb-chat-form{ display:flex; align-items:center; gap:8px; } .wb-chat-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .wb-chat-form input{ flex:1; min-width:0; border:0; border-radius:0; background:none; padding:4px 2px; font:14.5px/1.3 inherit; color:var(--tinte); } /* Der Knopf steht wieder IM Fluss der Zeile statt absolut an ihrem rechten Rand: die Zeile hat keinen eigenen Umriss mehr, an dessen Innenkante er sich haengen koennte, und ein `top:50%` haette ihn um die halbe Trennlinien-Polsterung nach unten gezogen. „Innerhalb der input box" (2026-09-08) gilt weiter — er sitzt auf DERSELBEN Zeile, nur ohne Pille darum. Das Polster rechts im Feld ist damit unnoetig. */ .wb-chat-form button{ display:grid; place-items:center; width:30px; height:30px; padding:0; flex:0 0 auto; border:0; border-radius:999px; background:var(--akzent); color:#fff; cursor:pointer; } .wb-chat-form button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Zwei Zeichen im selben Knopf: eines liegt, eines steht. `sendet` an der Form heisst „in der Zeile steht etwas" (`gespraech.js`), dann zeigt der Knopf den Pfeil. */ .wb-chat-form .wb-chat-pfeil{ display:none; } .wb-chat-form.sendet .wb-chat-mikro{ display:none; } .wb-chat-form.sendet .wb-chat-pfeil{ display:block; } /* Hoert das Mikrofon zu, atmet der Knopf — dieselbe Anzeige wie beim Schalter auf der Rueckseite der Karte, nur sichtbar an der Stelle, an der man ihn gedrueckt hat. */ .wb-chat-form button[aria-pressed="true"]{ background:#dc2626; } .wb-chat-form button[aria-pressed="true"] .wb-chat-mikro{ animation:wb-denkt 1.1s ease-in-out infinite; } /* „ denkt nach …" steht als Anstoss IM Feld (Auftrag 2026-09-08: „die kurze meldung das der agent nachdenkt in der eingabebox erscheinen und nicht in der antwort box") — `denkt` an der Form sagt, dass er gerade dieser Satz ist. Der Platz ist ohnehin da, die Zeile aendert dafuer ihre Hoehe nicht; ein eigenes Element haette den Kasten hoeher gemacht und damit genau das getan, was der Auftrag verbietet. Erkennbar ist der Zustand an der Farbe des Satzes und am Atmen des Knopfes (dieselbe Anzeige wie beim zuhoerenden Mikrofon, nur blau). */ .wb-chat-form.denkt input::placeholder{ color:var(--akzent); opacity:1; } .wb-chat-form.denkt button{ animation:wb-denkt 1.1s ease-in-out infinite; } @media (max-width:640px){ /* Auf dem Telefon steht ohnehin nur eine Kachel je Reihe — dann soll sie die Spalte nehmen, statt zentriert mit Rand daneben zu stehen. */ .wb-kachel{ flex-basis:100%; } /* Dasselbe fuer die Karten. Zwei Klassen, damit die eigene Kartenbreite einer Box (`.wb-gate-stufen > *`) hier nicht dagegen steht. */ .wb .wb-num > *, .wb .wb-karten > *{ flex-basis:100%; } /* Auf dem Telefon zaehlt jede Spalte: die Boxen nehmen die Schirmbreite und halten nur noch den Fingerabstand zur Kante. Die Polsterung traegt die Spalte (s. `.wb` oben), darum genuegt hier ihr linker und rechter Wert. */ .wb{ padding-left:12px; padding-right:12px; --rand:12px; } /* Ohne eigene Polsterung: das Gesicht soll die Breite der Box haben, und die traegt schon den Fingerabstand der Seite. Die Polsterung nimmt dafuer die rechte Spalte. */ .wb-chat{ grid-template-columns:1fr; padding:0; gap:10px; overflow:hidden; } /* Nichts mehr an der Spalte: die Polsterung sitzt seit dem 2026-09-08 an der Blase (`.wb-satz`) und am Eingang (`.wb-chat-eingang`), und den Fingerabstand zur Schirmkante bringt die Box (`.wb{ padding-left/right:12px }`). */ /* Am Telefon steht der Avatar UEBER der Antwort, nicht neben ihr — also zeigt der Zipfel nach oben statt nach links (`.wb-chat-log .wb-satz::before/::after`). */ .wb-chat-log .wb-satz::before, .wb-chat-log .wb-satz::after{ top:auto; right:auto; left:18px; bottom:100%; border-left:8px solid transparent; border-right:8px solid transparent; border-top:0; border-bottom:11px solid var(--linie); } .wb-chat-log .wb-satz::after{ margin-right:0; margin-bottom:-1.5px; border-bottom-color:#fff; } .wb-chat-log .wb-satz.fehler::after{ border-bottom-color:#fef2f2; } /* Das Gesicht nimmt die HALBE Schirmbreite, das Schild steht rechts daneben (Auftrag 2026-09-08: „im mobilen modus soll die avatar anzeige nur die haelfte der breite des screens einnehmen … das namen label soll dann rechts vom avatar stehen"). QUADRATISCH wie am Schreibtisch (Auftrag 2026-09-08: „der avatar soll auch im mobilen modus ein quadratisches bild haben aber nur mit der haelfte der screenbreite"): bis dahin behielt die Karte die alte HOEHE und wurde dabei zum Hochformat (`aspect-ratio:1/2`) — ein halb so breites Gesicht in doppelter Hoehe. Die Breite sagt jetzt die Spalte (`50vw`, die halbe Schirmbreite, nicht die halbe Boxbreite), die Form bleibt die des Grundsatzes darueber: `1/1`. */ .wb-chat-av{ grid-template-columns:50vw 1fr; align-items:center; justify-items:stretch; gap:10px; } } /* === Die Seite IST das Brett =============================================== Eine Webseite hat keine Kacheln: die Boxen laufen von Kante zu Kante, ohne Rahmen, ohne Fuge, auf weissem Grund, und sie folgen dem Fenster. Die Regeln stehen HIER und nicht in `board.css` — diese Datei laedt nur diese Seite, jedes andere Brett der Plattform sieht sie nie. Darum auch ohne Auswahl auf `.wb`: HIER ist jede Panele eine Box des Stroms. */ /* Weiss statt Grau — `board.html` traegt die Farbe als INLINE-Stil am `#board`, dagegen hilft nur `!important`. Dazu kein Punktraster. */ #board{ background-color:#ffffff !important; background-image:none; } /* EINE Spur ueber die volle Breite, Zeilenhoehe aus dem Inhalt. `fitTiles` (board.js) schreibt feste 112px-Spuren als INLINE-Stil; Autoren-`!important` schlaegt ihn. */ #panel-grid{ /* Eine kleine Fuge zwischen den Boxen: ohne sie stiess der Chat der Buehne unmittelbar an die naechste Box. */ padding:0; gap:18px; grid-template-columns:1fr !important; grid-auto-rows:auto !important; width:100% !important; min-width:0 !important; /* Der leere Streifen unter jeder Box: `board.js` schreibt dem Raster eine INLINE-Mindesthoehe (gemessen 5312px bei acht Boxen). Ist das Raster hoeher als seine Zeilen, verteilt `align-content:stretch` (Vorgabe) den Rest GLEICHMAESSIG auf alle Auto-Zeilen — gemessen +119px hinter jedem Inhalt. Beides muss weg: die Mindesthoehe (sonst bleibt der Rest am Seitenende stehen) und das Strecken. */ min-height:0 !important; align-content:start !important; } /* Zurueck ins Raster: board.js legt Panelen in PIXELN (`placeAt`/`setCustomSize`, Modus `spalte`) und rechnet die Breite einmal beim Legen aus — ein groesseres Fenster erreicht sie danach nie. `position:static` gibt die Box dem Raster zurueck, und dann rechnet der Browser bei jeder Fenstergroesse selbst. */ #board .panel, #board.noframe .panel{ position:static !important; left:auto !important; top:auto !important; grid-column:1 !important; grid-row:auto !important; width:auto !important; height:auto !important; border:0; border-radius:0; box-shadow:none; background:#ffffff; padding-bottom:0; /* kein Zugangsstreifen: es gibt keine Eingabe */ } /* Die Hoehe kommt aus dem Inhalt — Text laeuft also ganz durch, die SEITE rollt. Eine Box mit einer LISTE ist der andere Fall: sie bekommt einen Bildschirm als Deckel, und dann rollt die Liste IN der Box (`.panel-body` bringt sein `overflow-y:auto` aus `board.css:251` mit). Erkannt wird die Liste an dem, was wirklich eine ist — Tabelle oder Listenkasten des Bretts; ein `