/* ============================================================ FIVE MOVES Design-Schicht 2026 EINE Wahrheit fuer Schrift, Ecken, Bewegung, Klickflaechen. Grundlage: docs/brand/BRANDING-2026-08-27.md (Andys Entscheide 27.08.) 🛑 WIRKT NUR AUF SEITEN MIT DER KLASSE .fm26 Ohne diese Klasse aendert sich NICHTS. Deshalb ist die Datei gefahrlos deploybar: eine Seite wechselt erst, wenn sie die Klasse bekommt. Anwenden: oder auf dem aeussersten Wrapper. Zusatz: .fm26-still = Kursseiten, dort ist JEDE Bewegung verboten. ============================================================ */ @font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolage/bricolage-grotesque-latin-var.woff2') format('woff2'); font-weight: 300 600; font-display: swap; } .fm26 { --fm-dsp: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif; --fm-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --fm-nacht: #151A31; --fm-papier: #FFFDF8; --fm-warm: #FAF6EC; --fm-ink: #161A2E; --fm-ink-soft: #4B5168; --fm-gold: #E4B56A; --fm-gold-text: #845A0B; --fm-glut: #B31F66; --fm-glut-hover: #9E1759; --fm-au-hell: #B98FAE; --fm-au-tief: #4B2A44; --fm-linie-hell: rgba(22, 26, 46, 0.14); --fm-linie-dunkel: rgba(255, 253, 248, 0.16); --fm-ease: cubic-bezier(0.23, 1, 0.32, 1); --fm-schnell: 0.18s; } /* ── 1. SCHRIFT ───────────────────────────────────────────── Bricolage ab 32px, Jakarta darunter. CSS kann nicht nach Groesse auswaehlen, deshalb nach Rolle: h1, h2 und die Display-Klassen tragen Bricolage, alles andere Jakarta. Wer eine h2 klein setzt, nimmt zusaetzlich .fm-sans. */ .fm26 { font-family: var(--fm-sans); } /* Die Schicht wird VOR den Seiten-Styles geladen und muss sie trotzdem schlagen, sonst greift die Marke nur dort, wo zufaellig nichts anderes steht. */ .fm26 h1, .fm26 h2, .fm26 .dsp, .fm26 .h-h1, .fm26 .fin-h, .fm26 .fm-dsp { font-family: var(--fm-dsp) !important; font-optical-sizing: auto; } .fm26 h3, .fm26 h4, .fm26 h5, .fm26 h6, .fm26 .fm-sans { font-family: var(--fm-sans) !important; } /* Weight-Leiter: Bricolage wird bei grossen Graden von selbst enger. Hero leicht, mittlere Titel mittel, nie ueber 600. */ .fm26 h1, .fm26 .h-h1 { font-weight: 300; letter-spacing: -0.035em; line-height: 1.02; } .fm26 h2, .fm26 .dsp { font-weight: 400; letter-spacing: -0.03em; line-height: 1.06; } .fm26 h3 { font-weight: 600; letter-spacing: -0.02em; } .fm26 [style*="font-weight:7"], .fm26 [style*="font-weight:8"], .fm26 [style*="font-weight:9"] { font-weight: 600; } /* ── 2. KANTIG ────────────────────────────────────────────── Alles 2px. Kreise bleiben Kreise: sie tragen .rund oder sind Punkte/Avatare mit eigener Regel im Seitentemplate. */ .fm26 a, .fm26 button, .fm26 img, .fm26 figure, .fm26 picture, .fm26 video, .fm26 details, .fm26 summary, .fm26 input, .fm26 textarea, .fm26 select, .fm26 [class*="card"], .fm26 [class*="karte"], .fm26 [class*="shell"], .fm26 [class*="box"], .fm26 [class*="cta"], .fm26 [class*="tile"], .fm26 [class*="kachel"], .fm26 [class*="panel"], .fm26 [class*="night"], .fm26 [class*="nc-"] { border-radius: 2px !important; } .fm26 .rund, .fm26 [class*="avatar"], .fm26 [class*="circle"] { border-radius: 50% !important; } /* Einseitige Kanten vertragen keine Rundung */ .fm26 [style*="border-left"], .fm26 [class*="kante"] { border-radius: 0; } /* ── 3. KLICKFLAECHEN ─────────────────────────────────────── Mindestens 44px hoch, ohne dass die Schrift waechst. Gilt fuer Knoepfe und ausgezeichnete Links, NICHT fuer Links mitten im Fliesstext. */ .fm26 button, .fm26 .cta, .fm26 .ghost, .fm26 [class*="cta"], .fm26 [role="button"] { min-height: 44px; display: inline-flex; align-items: center; } /* ── 4. BEWEGUNG ──────────────────────────────────────────── Grundsatz: kurz und nur als Antwort auf eine Handlung. Enter- und Exit-Bewegungen laufen ease-out, nie ease-in. */ .fm26 a, .fm26 button, .fm26 .cta, .fm26 [class*="card"] { transition: color var(--fm-schnell) var(--fm-ease), background-color var(--fm-schnell) var(--fm-ease), border-color var(--fm-schnell) var(--fm-ease), transform var(--fm-schnell) var(--fm-ease); } .fm26 button:active, .fm26 .cta:active, .fm26 [role="button"]:active { transform: scale(0.98); } /* Hover nur auf Geraeten mit echtem Zeiger, sonst klebt er auf dem Handy */ @media (hover: hover) and (pointer: fine) { .fm26 .cta:hover { background-color: var(--fm-glut-hover); } } /* 🛑 KURSSEITEN: gar keine Bewegung (Andys Regel). Reveal-Klassen sichtbar stellen, Endlos-Animationen aus. */ .fm26-still .r, .fm26-still .rv, .fm26-still .vis, .fm26-still [class*="reveal"] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .fm26-still *, .fm26-still *::before, .fm26-still *::after { animation: none !important; } .fm26-still :where(a, button, .cta, [class*="card"]) { transition-duration: var(--fm-schnell) !important; } /* ── 5. WER WENIGER BEWEGUNG WILL, BEKOMMT SIE ──────────────── */ @media (prefers-reduced-motion: reduce) { .fm26 *, .fm26 *::before, .fm26 *::after { animation: none !important; transition: none !important; } .fm26 .r, .fm26 .rv { opacity: 1 !important; transform: none !important; } } /* ── 6. FARBROLLEN ────────────────────────────────────────── Jede Farbe hat genau EINEN Job. Wer eine Farbe zweckentfremdet, bricht das Branding, nicht nur den Geschmack. */ .fm26 .fm-grund-nacht { background: var(--fm-nacht); color: var(--fm-papier); } .fm26 .fm-grund-papier { background: var(--fm-papier); color: var(--fm-ink); } .fm26 .fm-grund-warm { background: var(--fm-warm); color: var(--fm-ink); } /* Gold kroent und markiert. NIE auf Knoepfen. */ .fm26 .fm-gold { color: var(--fm-gold); } .fm26 .fm-grund-papier .fm-gold { color: var(--fm-gold-text); } /* Magenta ist Handlung. Sonst nichts. */ .fm26 .cta { background: var(--fm-glut); color: #fff; border-radius: 2px; padding: 14px 24px; font-weight: 600; text-decoration: none; } /* Aubergine ist die Welt von Lebendige Weiblichkeit. Auf Dunkel die HELLE, auf Papier die TIEFE. Nie umgekehrt. */ .fm26 .fm-welt-kante { border-left: 3px solid var(--fm-au-tief); border-radius: 0; padding-left: 14px; } .fm26 .fm-grund-nacht .fm-welt-kante { border-left-color: var(--fm-au-hell); } /* ── 7. TEXTPLATTE UEBER BILD ─────────────────────────────── Das Muster von Startseite und Guide-Uebersicht: Bild traegt die Flaeche, der Text steht auf einer Platte, nicht im Nebel. */ .fm26 .fm-platte { position: relative; background: rgba(21, 26, 49, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-left: 3px solid var(--fm-gold); border-radius: 0; padding: clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 36px); max-width: min(520px, 48vw); } @media (max-width: 760px) { .fm26 .fm-platte { max-width: none; } }