/* 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. */ --grund:#ffffff; --tafel:#f7f9fc; --linie:#e3e8ef; --tinte:#0f172a; --leise:#64748b; --akzent:#2563eb; position:relative; box-sizing:border-box; min-height:100%; background:var(--grund); color:var(--tinte); font:14px/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. */ padding:26px max(30px,calc((100% - 1120px) / 2)) 30px; overflow:hidden; } .wb *{ box-sizing:border-box; } /* Kopf jeder Box: Zwischentitel, Tagline, Chips — in dieser Reihenfolge und untereinander, weil die Marke ein Titel ist und keine Beschriftung neben der Überschrift. Diese drei Zeilen sind das wiederkehrende Muster jedes Panels. */ .wb-kopf{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:26px; } .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:16.5px; line-height:1.5; color:#334155; } .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(17px,2.5vw,24px); 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:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--akzent); } /* Der Zwischentitel IM KOPF einer Box ist der Abschnittstitel der Seite — dort ist die Platte oben die falsche Form: sie ist so breit wie ihr Wort, also trennt sie nichts, sondern schwimmt mittig im Strom, und zwei kurze Woerter („Stimmen") sahen aus wie ein Knopf. Ein Abschnitt braucht eine Kante ueber die ganze Breite. Also: grosse Type ohne Kasten, ein feiner Strich ueber die volle Spalte als Trennung und ein kurzer Akzentstrich mittig darauf als Marke. Die Platte bleibt fuer jedes `.wb-marke` ausserhalb eines Kopfes stehen (Karten, Termine haben ihre eigene Regel darueber). */ .wb-kopf > .wb-marke{ position:relative; width:100%; max-width:none; margin:0; padding:0 0 14px; border-radius:0; background:none; box-shadow:none; border-bottom:1px solid var(--linie); font-size:clamp(24px,3.4vw,34px); font-weight:680; letter-spacing:-.015em; color:var(--tinte); } .wb-kopf > .wb-marke::after{ content:""; position:absolute; left:50%; bottom:-2px; width:88px; height:3px; margin-left:-44px; background:var(--akzent); border-radius:2px; } /* Die Tagline haengt am Strich, nicht am Text darueber — deshalb hier ein eigener Abstand statt des `gap` des Kopfes. */ .wb-kopf > .wb-tag{ margin-top:4px; color:var(--leise); } .wb-quelle{ margin-left:auto; font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--leise); } .wb h2{ margin:0 0 10px; font-size:26px; line-height:1.2; font-weight:650; letter-spacing:-.01em; } .wb h3{ margin:0 0 6px; font-size:15px; font-weight:620; } .wb p{ margin:0 0 12px; color:#475569; 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; } .wb-karten > *{ flex:0 1 250px; } .wb-karte{ background:var(--tafel); border:1px solid var(--linie); border-radius:12px; padding:14px 16px; 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; } } .wb-karte::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--kf,var(--akzent)); } /* 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:16px; line-height:1.3; letter-spacing:-.01em; color:var(--tinte); } .wb-fuss{ margin-top:8px; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:#94a3b8; } /* 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, .wb-chat-folge button{ border:1px solid var(--linie); border-radius:999px; background:var(--tafel); color:#475569; padding:6px 13px; font:12.5px/1.25 inherit; cursor:pointer; } .wb-chip:hover, .wb-chat-folge button: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; } .wb-num > *{ flex:0 1 240px; position:relative; background:var(--tafel); border:1px solid var(--linie); border-radius:12px; padding:16px 16px 14px; } .wb-nr{ display:block; font:600 10px/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:10.5px/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{ border:1px solid var(--linie); border-radius:9px; background:#fff; padding:9px 12px; min-width:96px; } .wb-fliese b{ display:block; font:600 12px/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; die Hoehe kommt aus dem Seitenverhaeltnis. Es lief frueher randlos aus der Box heraus (`margin:-30px`) — das ging nur, solange die Polsterung 30px war. Jetzt haelt es die Spalte wie jedes andere Element. */ .wb-bild{ position:relative; margin:18px 0 0; border-radius:16px; overflow:hidden; } .wb-bild img{ display:block; width:100%; height:auto; } .wb-bild-schrift{ position:absolute; left:30px; right:30px; 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(19px,2.6vw,26px); 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; } /* 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:13.5px; } .wb-kette span{ font-size:12.5px; 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:14px; justify-content:center; align-items:start; } /* 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`). */ .wb-kachel{ position:relative; flex:0 1 262px; max-width:100%; aspect-ratio:1; 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:#f8fafc; } .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:12.5px; 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:10px/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. */ .wb-pager{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom: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 12px/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 rechts, abgesetzt von den Zahlen: `margin-left:auto` schiebt es dorthin und schlaegt auch das `justify-content:center` des schmalen Schirms. Rund wie die Zahlen — das Zeichen traegt den Sinn. */ .wb-p-zu{ margin-left:auto; font-size:15px; 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; } .wb-sicht h3{ margin:0 0 10px; font-size:20px; } /* 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:#334155; max-width:none; } /* Das Blatt fuehrt sein Foto als Band: volle Spaltenbreite, gedeckelte Hoehe. Ein Bild im Hochformat der Kachel wuerde den Text nach unten schieben — hier zaehlt der Text. */ .wb-sicht-bild{ display:block; width:100%; aspect-ratio:32/9; max-height:230px; object-fit:cover; border:1px solid var(--linie); border-radius:14px; margin-bottom:18px; background:#f8fafc; } .wb-detail .wb-kacheln{ 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; } .wb-sicht{ text-align:center; } .wb-sicht p{ text-align:left; margin-left:auto; margin-right:auto; } .wb-sicht-bild{ margin-left:auto; margin-right:auto; } .wb-pager{ justify-content:center; } /* 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. */ .wb-schlag{ color:var(--tinte); font-weight:600; } /* === 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. */ .wb-chat{ margin:18px 0 0; background:rgba(255,255,255,.86); border:1px solid var(--linie); border-radius:16px; padding:14px 16px 12px; display:grid; grid-template-columns:170px 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{ 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; } .wb-chat-rechts{ min-width:0; } /* Der Name steht im blauen Band am unteren Rand der Flaeche — wer wartet, soll sehen, mit wem er spricht. Und das Band IST der Griff zur Rueckseite: es traegt den Zeiger, damit man sieht, dass hier etwas passiert, und es ist ein echter Knopf fuer Tastatur und Vorleser. Das Zahnrad in der Ecke ist dafuer entfallen — EIN Griff, nicht zwei. */ .wb-av-band{ position:absolute; inset:auto 0 0 0; display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:8px 10px; border:0; color:#fff; background:linear-gradient(180deg,rgba(37,99,235,.90),rgba(23,70,175,.98)); font:inherit; cursor:pointer; } .wb-av-band:hover{ background:linear-gradient(180deg,rgba(29,78,216,.96),#15409f); } .wb-av-band svg{ flex:none; width:12px; height:12px; fill:currentColor; opacity:.9; } .wb-av-name{ font:600 12.5px/1.2 inherit; letter-spacing:.04em; } /* 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 10.5px/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 12px/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; } .wb-chat-log{ max-height:320px; overflow-y:auto; display:grid; gap:10px; font-size:14.5px; } .wb-chat-log .wb-satz{ border-radius:12px; padding:9px 12px; background:#f1f5f9; } .wb-chat-log .wb-satz.fehler{ background:#fef2f2; } /* Der Wartezustand zeigt die Frage und sagt, wer daran rechnet — er wird von der Antwort ersetzt, nicht ergaenzt (`gespraech.js:fragen`). */ .wb-chat-log .wb-satz.wartet{ background:#eef2ff; } .wb-chat-log .wb-frage{ font-weight:600; } .wb-chat-log .wb-denkt{ margin-top:4px; color:var(--leise); font-size:13.5px; } .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; } /* Ein fettes Wort in der Antwort ist ein Weg, kein Schmuck: die Akzentfarbe sagt das ohne Strich — unterstrichene Woerter im Fliesstext lasen sich wie Fussnoten. 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:var(--akzent); text-decoration:none; cursor:pointer; } .wb-chat-log .wb-frag:hover{ color:#15409f; } /* Unter der letzten Antwort: woran sie weitergeht. Dieselben Chips wie in den Boxen, nur kleiner — sie stehen im Gespraech und nicht in einer Kachel. Ohne Ueberschrift: Chips unter einer Antwort erklaeren sich, eine Zeile darueber beschriftete das Offensichtliche. */ .wb-chat-folge{ display:flex; flex-wrap:wrap; gap:6px; } .wb-chat-form{ display:flex; gap:8px; margin-top:12px; } .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:1px solid var(--linie); border-radius:999px; padding:9px 15px; font:14px/1.2 inherit; background:#fff; color:var(--tinte); } .wb-chat-form button{ display:grid; place-items:center; width:38px; height:38px; 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; } @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; } /* 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; } .wb-chat-rechts{ padding:0 10px 10px; } /* Das Gesicht nimmt die ganze Breite — auf dem Telefon ist es kein Beistand neben dem Text, sondern der Gespraechspartner ueber ihm. */ .wb-chat-av{ justify-items:stretch; } .wb-av-karte{ width:100%; } } /* === 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 `