/* boo.css — Boo, unser Maskottchen, in Bewegung. * * >>> WARUM ANIMATION HIER KEINE ZIERDE IST <<< * Boo ist ein Geist. Ein Geist, der bewegungslos auf der Seite klebt, * wirkt wie ein Aufkleber; einer, der schwebt, wirkt lebendig. Die * Bewegung erzaehlt also etwas ueber die Figur, statt nur Aufmerksamkeit * zu fordern - das ist der Unterschied zwischen Charakter und Effekt. * * >>> WARUM CSS UND KEIN 3D <<< * Ein .glb-Versuch (29.09.) sah schlecht aus: Bild-zu-3D-Werkzeuge raten * die Rueckseite, die Geometrie wird teigig und die Schatten der Vorlage * brennen sich in die Textur ein. Bei einer Figur, die von klaren Formen * und einem weichen Verlauf lebt, faellt genau das auf. Hier bleibt es * exakt die gezeichnete Vorlage - bewegt werden nur ihre Lage, ihr * Schatten und ihr Schein. Kosten: ~20 kB Bild statt ~2 MB Modell, kein * WebGL, laeuft auf jedem Telefon. * * Benutzt KEINE i18n-Schluessel (rein visuell; der Alternativtext kommt * vom Aufrufer in _includes/boo.php). * Zieht: public/assets/img/boo/boo--{160,320,512}.webp * Farben ausschliesslich aus tokens.css. */ .boo { display: inline-block; position: relative; line-height: 0; /* Die Figur schwebt UEBER ihrem Schatten - der braucht Platz. */ padding-bottom: 14px; } /* --- Der Schein darunter ------------------------------------------- Boo traegt im Bild selbst einen warmen Schimmer am unteren Rand. Dieser Schein nimmt ihn auf und laesst ihn atmen. Bewusst hinter der Figur und bewusst schwach: er soll die Zeichnung stuetzen, nicht mit ihr konkurrieren. */ .boo-schein { position: absolute; left: 50%; bottom: 6%; width: 78%; aspect-ratio: 1.6 / 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 42%, transparent) 0%, color-mix(in srgb, var(--accent) 14%, transparent) 45%, transparent 72%); filter: blur(9px); animation: boo-schein 4.4s ease-in-out infinite; pointer-events: none; z-index: 0; } /* --- Der Schatten --------------------------------------------------- Er macht das Schweben erst lesbar: ohne ihn wackelt die Figur nur, mit ihm hebt sie ab. Deshalb laeuft er GEGENLAEUFIG - Boo oben, Schatten klein und blass. */ .boo-schatten { position: absolute; left: 50%; bottom: 0; width: 46%; height: 10px; translate: -50% 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 26%, transparent); filter: blur(5px); animation: boo-schatten 4.4s ease-in-out infinite; pointer-events: none; z-index: 0; } /* --- Die Figur ------------------------------------------------------ */ .boo-figur { position: relative; display: block; z-index: 1; animation: boo-schweben 4.4s ease-in-out infinite; transform-origin: 50% 80%; } .boo-figur img { display: block; width: 100%; height: auto; /* Beide Posen liegen uebereinander; nur die Deckkraft wechselt. So gibt es keinen Sprung in der Groesse beim Wechsel. */ grid-area: 1 / 1; } .boo-figur { display: grid; } .boo-zweitpose { opacity: 0; transition: opacity .22s ease; } .boo-erstpose { opacity: 1; transition: opacity .22s ease; } /* Zeigt der Aufrufer eine zweite Pose, wechselt sie bei Hover, Fokus oder Beruehrung (.boo--wach setzt das JS). NUR mit .boo--wechsel, das boo.php genau dann setzt, wenn eine zweite Pose da ist: vorher galt die Regel fuer jede Figur, und ohne zweite Pose blendete sie die EINZIGE Pose aus - Boo verschwand bei Mauskontakt, nur Schein und Schatten blieben (Eigentuemer-Fund 30.09.2026 am Chat-Helfer, live). */ .boo--wechsel:hover .boo-zweitpose, .boo--wechsel:focus-within .boo-zweitpose, .boo--wechsel.boo--wach .boo-zweitpose { opacity: 1; } .boo--wechsel:hover .boo-erstpose, .boo--wechsel:focus-within .boo-erstpose, .boo--wechsel.boo--wach .boo-erstpose { opacity: 0; } /* Beim Posenwechsel hebt Boo kurz an - eine Reaktion, keine Schleife. */ .boo:hover .boo-figur, .boo:focus-within .boo-figur, .boo--wach .boo-figur { animation: boo-huepfen .5s ease-out; } /* --- Bewegungen ----------------------------------------------------- Die Zahlen sind klein gehalten. Eine Figur, die vier Sekunden fuer zwoelf Pixel braucht, wirkt leicht; eine, die huepft, wirkt zappelig. Das leichte Kippen (1 Grad) macht aus dem Auf und Ab ein Treiben. */ @keyframes boo-schweben { 0%, 100% { translate: 0 0; rotate: -1deg; scale: 1 1; } 30% { translate: 0 -9px; rotate: .6deg; scale: .99 1.01; } 60% { translate: 0 -12px; rotate: 1deg; scale: 1.01 .99; } } @keyframes boo-schatten { 0%, 100% { scale: 1 1; opacity: .5; } 60% { scale: .74 1; opacity: .26; } } @keyframes boo-schein { 0%, 100% { opacity: .55; scale: 1 1; } 60% { opacity: .85; scale: 1.08 1.05; } } @keyframes boo-huepfen { 0% { translate: 0 0; scale: 1 1; } 35% { translate: 0 -16px; scale: .96 1.05; } 70% { translate: 0 2px; scale: 1.05 .95; } 100% { translate: 0 0; scale: 1 1; } } /* --- Groessen ------------------------------------------------------- Als Variablen, damit eine Seite die Figur setzen kann, ohne die Animation anzufassen. */ .boo--klein { width: 96px; } .boo--mittel { width: 160px; } .boo--gross { width: 220px; } /* --- Bewegte Figur (assets/js/boo-anim.js) -------------------------- Der Canvas liegt in derselben Grid-Zelle wie die Standbilder und ist unsichtbar, bis das JS das erste bewegte Bild gezeichnet hat. Dann setzt es `boo--lebt`: Canvas ein, Standbilder aus. Vorher UND bei jedem Fehler sieht der Besucher exakt die statische Figur. */ .boo-canvas { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; opacity: 0; transition: opacity .3s ease; } .boo--lebt .boo-canvas { opacity: 1; } .boo--lebt .boo-erstpose, .boo--lebt .boo-zweitpose { opacity: 0; } /* Der Leerlauf-Clip atmet selbst; das CSS-Schweben obendrauf waere doppelte Bewegung und wirkt zappelig. Schatten und Schein bleiben. */ .boo--lebt .boo-figur, .boo--lebt:hover .boo-figur, .boo--lebt:focus-within .boo-figur { animation: none; translate: 0 -6px; rotate: 0deg; } /* --- Sprechblase (boo-speech.js) ------------------------------------- Eine Aussage, kein Schmuck - deshalb echte Textgroesse, nicht line- height 0 wie der Rest des Bausteins. Ueber dem Kopf zentriert; die Variante 'rechts' weicht auf schmalen Bildschirmen ebenfalls nach oben aus, weil rechts kein Platz ist. */ .boo-sprech { position: absolute; z-index: 2; width: max(220px, 170%); max-width: min(72vw, 360px); line-height: 1.35; } .boo-sprech--oben { left: 50%; bottom: calc(100% - 6px); translate: -50% 0; } /* Der Zipfel sitzt im SVG der Komponente 68 px vom aeusseren Rand und 20 px ueber der Unterkante (boo-speech.js, Zipfel-Pfad). Damit er die Figur BERUEHRT, muss die Blase 60 px in die Figur hineinreichen - mit 10 px stand die Spitze 58 px neben Boo in der Luft (Eigentuemer-Fund 30.09.2026, zweimal). bottom 45 %: Spitze auf Augenhoehe, Koerper der Blase knapp ueber dem Kopf. */ .boo-sprech--rechts { left: calc(100% - 60px); bottom: 45%; } .boo-sprech--links { right: calc(100% - 60px); bottom: 45%; } /* Neben der kleinen Figur (96 px) waere 170 % nur 163 px - der Satz bricht dann in fuenf Zeilen. Feste, breitere Blase statt Verhaeltnis. */ .boo--klein .boo-sprech { width: 250px; } @media (max-width: 560px) { .boo-sprech--rechts, .boo-sprech--links { left: 50%; right: auto; bottom: calc(100% - 6px); translate: -50% 0; } } /* --- Boo als Gesicht des Chats (boo-helfer.js) ----------------------- Boo ERSETZT den runden Knopf des Support-Widgets (data-launcher="none") und steht an dessen Platz: 16 px vom Rand. Das Widget lebt in einem Shadow Root; normales CSS erreicht es nicht, CSS-Variablen erben aber hinein - darueber stimmen wir Fenster und Knopf ab: --bd-panel-bottom Abstand des Chat-Fensters von unten = ueber Boo --bd-own-launcher unter 700 px ist die Mobil-Leiste da und Boo weg; dort holt die Seite den eigenen Knopf zurueck --bd-lift setzt mobil-cta.js, wenn die Leiste sichtbar ist z-index: EINS unter dem des Widgets (2147483000). So hoch, weil Boo den Knopf ersetzt, den der Cookie-Hinweis sonst verdeckt (gemessen 30.09.2026: mit z-index 60 lag Boo komplett hinter dem Hinweis, der Chat war bis zur Cookie-Entscheidung unerreichbar). Das Fenster des Widgets liegt weiter ueber Boo, nie umgekehrt. */ :root { --bd-own-launcher: none; } @media (min-width: 701px) { :root { --bd-panel-bottom: 126px; } } @media (max-width: 700px) { :root { --bd-own-launcher: flex; } } .boo-helfer { position: fixed; right: 16px; bottom: calc(14px + var(--bd-lift, 0px)); z-index: 2147482999; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .boo-helfer[hidden] { display: none; } .boo-helfer .boo { display: block; } .boo-helfer:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 50%; } .boo-helfer:hover .boo-figur { animation: boo-huepfen .5s ease-out; } /* Das Chat-Abzeichen: ein Geist ist kein Chat-Symbol, ein kleines Sprechblasen-Zeichen an seiner Schulter sagt, wofuer er da ist. */ .boo-helfer-zeichen { position: absolute; right: -2px; bottom: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(16, 24, 40, .22); z-index: 3; pointer-events: none; } .boo-helfer-zeichen svg { width: 14px; height: 14px; } .boo-helfer[aria-expanded="true"] .boo-helfer-zeichen { display: none; } @media (max-width: 700px) { .boo-helfer { display: none; } } @media print { .boo-helfer { display: none; } } /* --- Wer keine Bewegung will, bekommt keine ------------------------ Nicht abgeschwaecht, sondern aus: fuer Menschen mit vestibulaerer Empfindlichkeit ist eine langsame Bewegung nicht besser als eine schnelle. Die Figur bleibt vollstaendig sichtbar, Schatten und Schein bleiben stehen - das Bild verliert nichts ausser der Zeitachse. */ @media (prefers-reduced-motion: reduce) { .boo-figur, .boo-schatten, .boo-schein { animation: none !important; } .boo-figur { translate: 0 -6px; rotate: 0deg; } .boo:hover .boo-figur, .boo:focus-within .boo-figur, .boo--wach .boo-figur { animation: none !important; } }