/* ============================================================================ tc-kerze — Standbilder, die leben (23.08.2026) ---------------------------------------------------------------------------- Aus css/untergrund.css herausgeloest, wo es am 15.08.2026 fuer die drei Wirte ohne Video entstanden ist. Es funktioniert dort so gut, dass es ueberall hingehoert, wo ein Standbild neben einem Video steht oder ohne eines auskommen muss. ⚠️ WARUM ES UEBERTRAGBAR IST — und der erste Anlauf im Untergrund es nicht war: Dort lag zunaechst ein warmer Lichtkegel oben in der Mitte. Bei Skarn stehen die Kerzen aber UNTEN am Bildrand, bei Pater Nagel auf dem Hut, bei Klamm haengt die Laterne am Guertel — ein fest verdrahteter Lichteinfall stimmt hoechstens fuer ein Bild von dreien. Die Loesung erfindet KEIN Licht, sie laesst das vorhandene flackern: Die Helligkeit des ganzen Bildes schwankt minimal mit, samt der Kerzen, die schon darin gemalt sind. Das stimmt fuer jedes kerzenbeleuchtete Motiv, egal wo die Flamme steht. Genau deshalb setzt die Komponente nichts ueber ihr Motiv voraus. Drei Ebenen, ein Takt: 1. Atem — kaum wahrnehmbare Skalierung, 11 s hin und her 2. Flamme — brightness/saturate des BILDES, unregelmaessig 3. Waerme — ein schwacher warmer Schleier im selben Takt (::before) 4. Rauch — sehr langsam aufsteigend, fast unsichtbar (::after) ⚠️ Der Trick steckt im TAKT: Eine gleichmaessige Pulsation liest sich als atmender Bildschirm, nicht als Flamme. Die Keyframes stehen deshalb auf ungleichen Prozentwerten mit ungleichen Spruengen — echtes Kerzenlicht zuckt, es schwingt nicht. Wer die Werte "aufraeumt", nimmt ihnen genau das. KOSTEN: rund 2 KB CSS gegen 2,5 MB Video. VERWENDUNG
...
Der Container braucht `position: relative` und `overflow: hidden` — beides setzt die Komponente selbst. Groesse und Form (Kreis, Rechteck) bestimmt die aufrufende Seite; hier steht bewusst keine. VARIANTEN --ruhig nur Atem und Flamme, ohne Waerme und Rauch. Fuer kleine Flaechen und fuer Motive, die kein Kerzenlicht zeigen. --stark fuer grosse Flaechen (ab etwa 400px), wo die Standardwerte verschwinden. ========================================================================== */ .tc-kerze { position: relative; overflow: hidden; } .tc-kerze > img, .tc-kerze > video, .tc-kerze > .tc-kerze__medium { /* Zwei Animationen auf demselben Element, aber auf verschiedenen Eigenschaften (transform / filter) — das ist erlaubt und noetig: Der Atem ist langsam und gleichmaessig, das Flackern schnell und unregelmaessig. In eine gemeinsame Keyframe-Liste gepresst waeren beide falsch. */ animation: tc-kerze-atem 11s ease-in-out infinite alternate, tc-kerze-flamme 4.3s linear infinite; transform-origin: 50% 30%; } @keyframes tc-kerze-atem { from { transform: scale(1); } to { transform: scale(1.022); } } /* Die Werte sind absichtlich klein. Auf einem 108px-Portrait wirkt alles darueber wie ein Defekt der Anzeige, nicht wie eine Kerze. */ @keyframes tc-kerze-flamme { 0% { filter: brightness(1) saturate(1); } 7% { filter: brightness(1.055) saturate(1.05); } 11% { filter: brightness(0.965) saturate(0.98); } 19% { filter: brightness(1.04) saturate(1.04); } 23% { filter: brightness(1.01) saturate(1); } 37% { filter: brightness(1.06) saturate(1.06); } 41% { filter: brightness(0.94) saturate(0.96); } /* der Luftzug */ 46% { filter: brightness(1.02) saturate(1.02); } 58% { filter: brightness(0.985) saturate(0.99); } 67% { filter: brightness(1.05) saturate(1.05); } 73% { filter: brightness(1.005) saturate(1); } 88% { filter: brightness(1.03) saturate(1.03); } 100% { filter: brightness(1) saturate(1); } } .tc-kerze::before, .tc-kerze::after { content: ''; position: absolute; inset: 0; pointer-events: none; } /* (3) Die Waerme: ganzflaechig und richtungslos, damit sie zu jedem Motiv passt. `screen` addiert Licht, statt Farbe zu ersetzen — die Malerei darunter bleibt erhalten. */ .tc-kerze::before { background: radial-gradient(120% 120% at 50% 50%, rgba(255, 178, 92, 0.16), rgba(255, 150, 60, 0.07) 60%, transparent 100%); mix-blend-mode: screen; animation: tc-kerze-waerme 4.3s linear infinite; } @keyframes tc-kerze-waerme { 0% { opacity: 0.7; } 7% { opacity: 1; } 11% { opacity: 0.5; } 19% { opacity: 0.9; } 23% { opacity: 0.75; } 37% { opacity: 1; } 41% { opacity: 0.35; } 46% { opacity: 0.8; } 58% { opacity: 0.6; } 67% { opacity: 0.95; } 73% { opacity: 0.7; } 88% { opacity: 0.85; } 100% { opacity: 0.7; } } /* Rauch: bewusst fast unsichtbar und ohne feste Quelle. Sichtbarer Rauch auf einem kleinen Portrait sieht aus wie ein Darstellungsfehler. */ .tc-kerze::after { background: radial-gradient(45% 38% at 38% 78%, rgba(220, 220, 210, 0.09), transparent 70%), radial-gradient(35% 30% at 66% 88%, rgba(220, 220, 210, 0.07), transparent 70%); animation: tc-kerze-rauch 17s ease-in-out infinite; } @keyframes tc-kerze-rauch { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(3px, -14px, 0) scale(1.18); opacity: 0.9; } 100% { transform: translate3d(-2px, -26px, 0) scale(1.32); opacity: 0; } } /* --- Variante: ruhig ------------------------------------------------------ Nur Atem und Flamme. Fuer kleine Flaechen (unter etwa 80px), wo Schleier und Rauch nur noch Grieseln sind, und fuer Motive ohne Kerzenlicht. */ .tc-kerze--ruhig::before, .tc-kerze--ruhig::after { display: none; } /* --- Variante: stark ------------------------------------------------------ Ab etwa 400px verschwinden die Standardwerte. Nur die Amplitude waechst, NICHT der Takt — sonst verliert das Flackern seinen Charakter. */ .tc-kerze--stark > img, .tc-kerze--stark > video, .tc-kerze--stark > .tc-kerze__medium { animation: tc-kerze-atem-stark 11s ease-in-out infinite alternate, tc-kerze-flamme 4.3s linear infinite; } @keyframes tc-kerze-atem-stark { from { transform: scale(1); } to { transform: scale(1.035); } } .tc-kerze--stark::before { background: radial-gradient(120% 120% at 50% 50%, rgba(255, 178, 92, 0.24), rgba(255, 150, 60, 0.10) 60%, transparent 100%); } /* ⚠️ AUF GROSSER FLAECHE BRAUCHT DER RAUCH EINE QUELLE (30.08.2026). Die Standardebene streut zwei winzige Schwaden bei 38 % und 66 % — auf einem 108px-Portrait ist das genau richtig, weil man dort ohnehin nur eine Unruhe wahrnimmt. Auf 520px zerfaellt derselbe Wert in zwei erkennbare Flecken, die von nirgendwo kommen. Diese Fassung ist nicht erfunden: Sie stand bis heute in css/untergrund.css an der grossen Wirt-Ansicht und ist genau fuer diese Flaeche geschrieben worden — eine breite Schwade, die mittig vom unteren Rand aufsteigt, und mit 9s doppelt so schnell, weil eine grosse Flaeche eine langsame Bewegung verschluckt. Beim Zusammenlegen ist sie hierher gewandert, statt verloren zu gehen (§3: Vorher/Nachher nie aermer). */ .tc-kerze--stark::after { background: radial-gradient(60% 40% at 50% 100%, rgba(210, 200, 190, 0.10), transparent 70%); animation: tc-kerze-rauch 9s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { /* ⚠️ Nicht `animation: none` (CLAUDE.md §9) — dabei fiele auch der Endzustand weg. Bei der Rauchebene waere das besonders daneben: Ihr Endzustand ist `opacity: 0`; ohne Animation staende der Schleier fest im Bild. */ .tc-kerze > img, .tc-kerze > video, .tc-kerze > .tc-kerze__medium, .tc-kerze::before, .tc-kerze::after { animation-duration: 0.01ms; animation-iteration-count: 1; animation-delay: -1ms; } }