/* ============================================================================ BECRO Trading — becro-micro.css Die Mikro-Interaktions-Schicht der drei Inhaltsseiten: index.html, mentoring.html, psychologie-prinzipien.html. Eingebunden NACH becro-dark.css (auf index zusaetzlich nach becro-motion.css), damit sie bei gleicher Spezifitaet per Quellreihenfolge gewinnt. Sie ist eine SCHICHT, kein Ersatz. Layout, Farben und Abstaende bleiben unberuehrt; es aendert sich nur, wie die Seite auf eine Hand reagiert. Ohne diese Datei sieht die Seite aus wie vorher, nur stiller. Drei Regeln, die hier ueberall gelten ------------------------------------- 1. Bewegt werden `transform` und `opacity`. Beides laeuft im Compositor, kostet also weder Layout noch Neuzeichnen. Zwei begruendete Ausnahmen stehen unten an ihrer Stelle und sind dort als solche markiert. 2. Kurz und dezent: 150-300ms, Wege von wenigen Pixeln, Winkel von hoechstens 2,4 Grad. Wer eine Mikro-Interaktion bewusst bemerkt, hat eine zu grosse gebaut. 3. Hover-Effekte gibt es nur, wo ein Zeiger ist. Auf dem Handy entfallen sie ersatzlos — ein `:hover`, der am Finger klebt, ist schlimmer als keiner. Deshalb steht fast alles in EINEM Block `@media (hover: hover) and (pointer: fine)`. Ganz unten schaltet `prefers-reduced-motion: reduce` alles ab. Nicht nur die Dauern: auch Neigung, Glanz und der zeilenweise Auftritt. Der ?v=N-Parameter muss bei jeder Aenderung hochgezaehlt werden. ========================================================================== */ /* ══ 1 · Die Regler ═══════════════════════════════════════════════════════ An einer Stelle, damit „dezent" nicht in jeder Regel neu erfunden wird. */ :root { --mi-t: 220ms; /* Standarddauer einer Mikro-Reaktion */ --mi-t-slow: 280ms; /* Bilder und Glanz — eine Spur ruhiger */ --mi-line: 80ms; /* Versatz von Headline-Zeile zu Headline-Zeile */ /* Der Auftritt der Headline-Zeilen ist KEINE Mikro-Interaktion — er gehoert zur Scroll-Choreografie der Seite und laeuft deshalb auf deren Werten: laenger, weiter, mit Ueberschwung. Die drei Regler stehen trotzdem hier, weil die Zeilen hier gebaut werden. */ --mi-t-line: 660ms; /* Dauer einer Headline-Zeile */ --mi-ln-y: .62em; /* Weg von unten, in Zeilenhoehe gerechnet */ /* Ueberschwung: die Zeile faehrt ein Stueck ueber ihren Platz hinaus und faellt zurueck. Das ist der Unterschied zwischen „erscheint" und „kommt an". GSAPs back.out(1.6) als CSS-Kurve. */ --mi-ease-back: cubic-bezier(.34, 1.42, .64, 1); } /* ══ 2 · Sektions-Headlines zeilenweise ═══════════════════════════════════ becro-micro.js zerlegt jede `main h2` in ihre TATSAECHLICHEN Zeilen (es misst, wo der Browser umbrochen hat) und haengt jeder Zeile einen eigenen Versatz an. Erst dadurch laesst sich Zeile fuer Zeile staffeln. Bewegt wird hier ausschliesslich `transform` — die Deckkraft gehoert weiterhin dem bestehenden Reveal des umgebenden Blocks. Das ist der Grund, warum sich beides nicht ins Gehege kommt: der Block blendet als Ganzes ein (eine Ueberblendung, wie gehabt), und WAEHREND er das tut, schieben sich die Zeilen der Headline nacheinander an ihren Platz. Zwei ineinandergeschachtelte Deckkraft-Animationen — der klassische Fehler an dieser Stelle — gibt es damit nicht. `.ln` ist eine Zeile. Sie ist `display: block`, weil der Umbruch nach dem Messen festgeschrieben wird; `text-wrap: balance` aus becro-dark.css hat dann schon gewirkt und sein Ergebnis steckt in der Aufteilung. Bei einer neuen Fensterbreite misst das Skript neu. */ h2.h-split .ln { display: block; transform: translateY(var(--mi-ln-y)); transition: transform var(--mi-t-line) var(--mi-ease-back) var(--ln-d, 0ms); } h2.h-split.in .ln { transform: none; } /* Nach dem Neumessen (Fensterbreite, Schriften) duerfen die Zeilen nicht noch einmal hereinlaufen — das Skript setzt diese Klasse fuer einen Frame. */ h2.h-split.no-anim .ln { transition: none; } /* ══ 2b · Die Glanzwelle ══════════════════════════════════════════════════ Wenn die letzte Zeile steht, laeuft einmal eine weiche Lichtwelle durch die Headline: dort, wo sie gerade ist, werden die Buchstaben kurz heller und bekommen einen hauchfeinen Schein. Davor und danach stehen sie ganz normal da. Der Punkt, auf den es ankommt: DER TEXT WIRD NICHT ANGEFASST. Er behaelt seine Farbe, seine Deckkraft und seinen Hintergrund — die Welle ist eine zweite Ebene DARUEBER. Warum das wichtig ist: der naheliegende Weg waere ein Verlauf auf dem `h2` selbst, per `background-clip: text` auf die Glyphen zugeschnitten und mit `color: transparent`. Genau das war hier vorher gebaut, und es ist die falsche Konstruktion — `color: transparent` heisst, dass die Ueberschrift NUR noch ueber ihren Hintergrund sichtbar ist. Steht der Verlauf falsch, laeuft die Animation nicht, oder haengt sie sich an einer beliebigen Stelle auf, ist die Headline weg. Eine Ueberschrift darf niemals davon abhaengen, dass eine Animation korrekt laeuft. Jetzt haengt gar nichts davon ab. `.h-glow` ist ein Duplikat des Textes, das becro-micro.js fuer die Dauer der Welle einhaengt und danach wieder entfernt. Ohne Skript, ohne Animation, bei reduzierter Bewegung: es gibt die Ebene schlicht nicht, und darunter steht die unveraenderte Headline. Wie die Welle entsteht: die Ebene ist durchgehend hell (weiss plus zwei Scheine). Sichtbar ist von ihr nur, was die Maske durchlaesst — ein breites, an beiden Enden weich auslaufendes Band. Wandert die Maske, wandert die Aufhellung. Animiert werden `mask-position` und `opacity`. Die Maske ist die begruendete Ausnahme von der Regel oben: sie laeuft einmal, knapp zwei Sekunden, auf einer Textzeile, und einen Compositor-Weg zu einem wandernden Ausschnitt gibt es nicht. */ h2.h-split { position: relative; } .h-glow { position: absolute; inset: 0; pointer-events: none; user-select: none; /* Heller als der Text darunter, aber nicht viel: die Welle soll aufleuchten lassen, nicht blitzen. */ color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, .40), 0 0 20px rgba(var(--glow-rgb), .34); /* Das Band: breit und an beiden Enden weich. Die Zwischenstufen bei 40 und 60 Prozent sind der Unterschied zwischen einer Welle und einer Kante — ohne sie hat der Streif zwei sichtbare Raender. */ --wave: linear-gradient(100deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .85) 48%, rgba(0, 0, 0, .85) 52%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, 0) 72%); -webkit-mask-image: var(--wave); mask-image: var(--wave); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 130% 0; mask-position: 130% 0; opacity: 0; } /* Die Zeilen im Duplikat sind dieselben `.ln`-Bloecke wie im Original — sie muessen deshalb ausdruecklich in Ruhe stehen. Ohne das erbten sie den Einflug und liefen ein zweites Mal von unten herein, waehrend die Welle schon durchgeht. */ .h-glow .ln { transform: none !important; transition: none !important; } .h-glow.is-running { animation: becro-head-glow 1.8s ease-in-out 1 both; } @keyframes becro-head-glow { 0% { opacity: 0; -webkit-mask-position: 130% 0; mask-position: 130% 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; -webkit-mask-position: -45% 0; mask-position: -45% 0; } } /* ══ 3 · Alles Uebrige gilt nur, wo ein Zeiger ist ════════════════════════ `hover: hover` allein reicht nicht: manche Android-Browser melden das auch fuer den Finger. Erst zusammen mit `pointer: fine` bleibt der Touchscreen sicher draussen. */ @media (hover: hover) and (pointer: fine) { /* ── 3a · Bilder ──────────────────────────────────────────────────────── Portrait in der Ueber-Sektion, Portrait des Partners, die beiden Produktaufnahmen in Mitgliederbereich- und Journal-Karte. Alle drei Rahmen tragen bereits `overflow: hidden`, das Bild waechst also IN seinen Ausschnitt hinein statt darueber hinaus. Genau deshalb genuegen 1,03: der Ausschnitt bleibt stehen, nur der Inhalt kommt naeher. */ .about-portrait img, .partner-portrait img, .f-card .f-media img, .day-shot .f-media img, .tl-shot .f-media img { transition: transform var(--mi-t-slow) var(--ease); } .about-portrait:hover img, .partner-portrait:hover img { transform: scale(1.03); } /* Die Produktaufnahme reagiert auf die ganze Karte, nicht nur auf sich selbst: die Karte hebt beim Ueberfahren ohnehin an, und zwei getrennte Trefferflaechen in einer Karte fuehlen sich zerfallen an. */ .f-card:hover .f-media img { transform: scale(1.025); } /* Dieselbe Regung fuer die beiden Aufnahmen in der Handelstag-Timeline. Sie standen frueher in `.f-card`-Kacheln und haetten das Verhalten mit dem Umbau von Abschnitt 02 sonst stillschweigend verloren. Hier haengt es am Bildrahmen selbst, weil es um ihn herum keine Karte mehr gibt. */ .day-shot .f-media:hover img, .tl-shot .f-media:hover img { transform: scale(1.025); } /* AUSNAHME 1 von der transform/opacity-Regel: der Schatten. „Sanfter Schatten waechst mit" laesst sich mit Deckkraft nicht bauen — ein zweiter Schatten in einem ::after waere am Ausschnitt abgeschnitten, denn `overflow: hidden` liegt auf genau diesen Rahmen. Bleibt `box-shadow` am Rahmen selbst. Das ist derselbe Griff, den `.f-card:hover` in becro-dark.css seit jeher benutzt, und er kostet ein Neuzeichnen des Rahmens — einmal beim Ueberfahren, nicht pro Bild. Die beiden Produktaufnahmen bekommen ihn NICHT: ihre Karte waechst ihren Schatten schon, ein zweiter darin waere derselbe Effekt doppelt. */ .about-portrait, .partner-portrait { transition: box-shadow var(--mi-t-slow) var(--ease); } .about-portrait:hover, .partner-portrait:hover { box-shadow: var(--shadow-card-lift); } /* ── 3b · Buttons: Glanz-Sweep ───────────────────────────────────────── Ein schmaler heller Verlauf laeuft einmal von links nach rechts ueber die Flaeche. Bewusst eine ANIMATION und keine Transition: eine Transition liefe beim Verlassen rueckwaerts wieder zurueck, und ein Glanz, der zurueckwandert, sieht aus wie ein Fehler. Die Animation laeuft einmal und ist dann fertig. `.btn-quiet` bleibt aussen vor — das ist trotz der Klasse kein Knopf, sondern ein Textlink ohne Grund und ohne Polsterung. Er bekommt in Abschnitt 3d seine Unterstreichung. Der Verlauf liegt als ::before UEBER der Beschriftung. Das ist Absicht: ein Glanz zieht ueber die ganze Flaeche und nicht hinter der Schrift hindurch. `pointer-events: none` haelt ihn aus dem Weg. */ .btn:not(.btn-quiet) { position: relative; } .btn:not(.btn-quiet)::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .18) 50%, transparent 58%); transform: translateX(-100%); /* Im Ruhezustand unsichtbar. Der Verlauf steht dann links NEBEN dem Knopf, und weil dort nichts mehr beschneidet (siehe naechste Regel), waere er sonst als heller Schleier neben jedem Knopf zu sehen. */ opacity: 0; } /* Beschnitten wird nur, SOLANGE der Glanz laeuft. Vorher stand `overflow: hidden` dauerhaft am Knopf — das schnitt den ruhenden Schein ab, den `.btn-primary::after` in becro-dark.css (Abschnitt 22b) traegt, denn der liegt als Schatten eines Kindes ausserhalb der Knopfflaeche. Der eigene `box-shadow` des Knopfes ist davon nie betroffen, ein Pseudoelement schon. Am Hover braucht der Schnitt den Schein nicht mehr: dort uebernimmt `--shadow-accent-lift` am Knopf selbst. */ .btn:not(.btn-quiet):hover { overflow: hidden; } .btn:not(.btn-quiet):hover::before { opacity: 1; animation: becro-sweep var(--mi-t-slow) var(--ease) 1; } /* Der Pfeil schiebt sich mit. becro-dark.css bringt 3px mit; hier werden daraus 4px, damit die Bewegung neben dem Anheben des Knopfes noch als eigene Regung lesbar bleibt. */ .btn:hover .arrow, .plan-alt:hover .arrow { transform: translateX(4px); } /* ── 3c · Karten: 3D-Neigung zur Maus ────────────────────────────────── Die Karten heben beim Ueberfahren schon an (becro-dark.css, Abschnitt 21). Dazu kommt eine Neigung zur Zeigerposition — hoechstens 2,4 Grad. Der Wert ist bewusst so klein, dass man ihn nicht als Kippen sieht, sondern nur als „die Karte ist der Hand zugewandt". Die Neigung steht NICHT im Grundzustand der Karte. Waere sie das, truege jede Karte dauerhaft eine 3D-Umgebung und damit eine eigene Compositor-Ebene — auf dem Handy genau die Rechnerei, die dort gerade entfernt wurde. `.is-tilting` setzt becro-micro.js erst beim Betreten und nimmt sie beim Verlassen wieder weg. Die doppelten Klassen im Selektor sind kein Zufall: `.plan:hover` und `.plan.featured:hover` in becro-dark.css setzen ihr eigenes `transform`. Nur mit gleicher Spezifitaet plus spaeterer Quellreihenfolge gewinnt diese Regel — und nur so bleibt das Anheben um 4px erhalten, statt von der Neigung ueberschrieben zu werden. */ .f-card.is-tilting, .t-card.is-tilting, .principle.is-tilting, .trait.is-tilting, .pstep.is-tilting, .split-point.is-tilting, .plan.is-tilting, .plan.featured.is-tilting { transform: translateY(-4px) perspective(760px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); } /* ── 3d · Textlinks: Unterstreichung waechst von links ───────────────── `scaleX` von 0 auf 1 mit Ursprung links. Eine Breite zu animieren waere dasselbe Bild und ein Layout pro Bild. */ .plan-alt, .btn-quiet { position: relative; } .plan-alt::after, .btn-quiet::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 1px; background-color: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left center; transition: transform var(--mi-t) var(--ease); } .plan-alt:hover::after, .btn-quiet:hover::after { transform: scaleX(1); } /* ── 3e · Zahlen leuchten auf ────────────────────────────────────────── Die Kennzahlen unter dem Hero, die Preise der Stufen-Karten und die Werte der Kennzahl-Kacheln. AUSNAHME 2 von der transform/opacity-Regel: `filter: brightness`. Gefordert ist mehr Helligkeit ohne Farbwechsel. Ueber `opacity` ginge das nur, wenn die Zahl im Ruhezustand gedimmt DASTUENDE — das waere keine Mikro-Interaktion mehr, sondern eine Aenderung am Ruhebild aller drei Seiten. `filter` laeuft auf der GPU, liegt auf einem kurzen Textknoten und nur waehrend des Ueberfahrens. */ .hero-figures b, .plan-price, .stat .v, .principle .n, .pstep .n { transition: filter var(--mi-t) var(--ease); } .hero-figures div:hover b, .plan:hover .plan-price, .stat:hover .v { filter: brightness(1.22); } /* Die Ziffer der Prinzipien- und Schritt-Karten ist Teil der Karte und nicht fuer sich anfassbar — sie leuchtet mit der Karte auf. */ .principle:hover .n, .pstep:hover .n { filter: brightness(1.25); } /* ── 3f · Navigation ─────────────────────────────────────────────────── Dieselbe Unterstreichung wie bei den Textlinks, nur schmaler gesetzt. Der aktive Abschnitt traegt sie dauerhaft. Warum nicht die vorhandene Klasse `.active` aus becro-dark.css: die faerbt den Eintrag in den blauen Verlauf um. Als Zustandsanzeige beim Scrollen waere das ein Aufblitzen einer gefuellten Pille bei jedem Abschnittswechsel — laut, und ueber `background-image` auch nicht weich zu bewegen. `.is-current` ist deshalb eine eigene, leise Markierung; `.active` bleibt unangetastet fuer den Fall, dass eine Seite ihren Eintrag dauerhaft auszeichnen will. */ .nav-pill a { position: relative; } .nav-pill a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .34rem; height: 1px; background-color: currentColor; opacity: .5; transform: scaleX(0); transform-origin: left center; transition: transform var(--mi-t) var(--ease); } .nav-pill a:hover::after, .nav-pill a.is-current::after { transform: scaleX(1); } /* Der aktive Eintrag steht eine Spur heller als seine Nachbarn. */ .nav-pill a.is-current { color: var(--text); } /* Traegt ein Eintrag die gefuellte Pille, braucht er keinen Strich. */ .nav-pill a.active::after { content: none; } } /* ══ 4 · Der Glanz ════════════════════════════════════════════════════════ Steht ausserhalb des Hover-Blocks; benutzt wird er nur dort. */ @keyframes becro-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* ══ 5 · Reduzierte Bewegung: alles aus ═══════════════════════════════════ Nicht „schneller", sondern weg. Die Zeilen der Headlines stehen sofort an ihrem Platz, Karten neigen sich nicht, der Glanz laeuft nicht, und die Unterstreichungen springen ohne Weg auf ihre Breite. becro-micro.js steigt bei reduzierter Bewegung ohnehin vorher aus; das hier ist das Netz darunter, falls eine Klasse doch einmal am Element landet. */ @media (prefers-reduced-motion: reduce) { h2.h-split .ln { transform: none !important; transition: none !important; } /* Die Glanzwelle faellt ganz weg. becro-micro.js haengt die Ebene bei reduzierter Bewegung ohnehin nie ein — dies ist das Sicherheitsnetz. Es blendet die Ebene aus, statt nur die Animation anzuhalten: der globale Block in becro-dark.css zieht Animationen auf .001ms zusammen, und mit `both` bliebe die Welle sonst auf ihrem Endbild stehen. */ .h-glow { display: none !important; } .about-portrait img, .partner-portrait img, .f-card .f-media img, .about-portrait, .partner-portrait, .plan-alt::after, .btn-quiet::after, .nav-pill a::after, .hero-figures b, .plan-price, .stat .v, .principle .n, .pstep .n { transition: none !important; } .btn:not(.btn-quiet)::before { content: none; } .is-tilting { --tilt-x: 0deg; --tilt-y: 0deg; } /* Kein Weg und keine Groessenaenderung: Bild und Pfeil bleiben stehen. Die Uebergaenge allein abzuschalten genuegt nicht — dann spraenge das Bild beim Ueberfahren auf 1,03 statt dorthin zu wachsen, und ein Sprung ist keine reduzierte Bewegung, sondern eine haerte. Der Pfeil-Uebergang kommt aus becro-dark.css und wird hier gleich mit stillgelegt. */ .about-portrait:hover img, .partner-portrait:hover img, .f-card:hover .f-media img, .day-shot .f-media:hover img, .tl-shot .f-media:hover img { transform: none !important; } .btn .arrow, .plan-alt .arrow { transition: none !important; } .btn:hover .arrow, .plan-alt:hover .arrow { transform: none !important; } /* Die Unterstreichung BLEIBT — sie ist kein Weg, sondern eine Auskunft darueber, was gerade unter dem Zeiger liegt. Sie erscheint nur ohne Anlauf, in voller Breite. */ .plan-alt:hover::after, .btn-quiet:hover::after, .nav-pill a:hover::after, .nav-pill a.is-current::after { transform: scaleX(1); } }