/* mulish-regular - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: normal; font-weight: 400; src: url('/assets/fed/webfonts/mulish-v18-latin-regular.woff2') format('woff2'); } /* mulish-italic - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: italic; font-weight: 400; src: url('/assets/fed/webfonts/mulish-v18-latin-italic.woff2') format('woff2'); } /* mulish-500 - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: normal; font-weight: 500; src: url('/assets/fed/webfonts/mulish-v18-latin-500.woff2') format('woff2'); } /* mulish-500italic - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: italic; font-weight: 500; src: url('/assets/fed/webfonts/mulish-v18-latin-500italic.woff2') format('woff2'); } /* mulish-700 - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: normal; font-weight: 700; src: url('/assets/fed/webfonts/mulish-v18-latin-700.woff2') format('woff2'); } /* mulish-700italic - latin */ @font-face { font-display: swap; font-family: 'Mulish'; font-style: italic; font-weight: 700; src: url('/assets/fed/webfonts/mulish-v18-latin-700italic.woff2') format('woff2'); } /* newsreader-500 - latin */ @font-face { font-display: swap; font-family: 'Newsreader'; font-style: normal; font-weight: 500; src: url('/assets/fed/webfonts/newsreader-v26-latin-500.woff2') format('woff2'); } /* ============================================================ Für Euch da e.V. — theme.css Brand-Layer über Bulma + vq.css. Folgt dem Brand Sheet "Frisch & Bunt": farbenfroh, Newsreader-Display + Mulish-UI, CSS-Blob-Hero, A11y-bewusste Kontraste. Konventionen: - Farben als OKLCH (Custom Properties) - Schriften als Custom Properties (--fed-font-*) - Mulish stets als var(--fed-font-body) = 'Mulish', sans-serif - Mulish-Schnitte: nur 400 / 500 / 700 (kein 600) - Logische Box-Eigenschaften (margin-block-*, padding-inline …) - Längen in rem; Hairlines/Schatten/Offsets bleiben px - Deklarationen je Regel alphabetisch sortiert (:root-Tokens bleiben thematisch gruppiert) DARK MODE: Token-gesteuert. Greift automatisch via prefers-color-scheme ODER manuell per . Erzwungenes Light: . Block am Dateiende. ============================================================ */ :root { color-scheme: light; /* Kernfarben (Rollen — werden im Dark Mode umdefiniert) */ --fed-ink: oklch(21.6% 0.029 292.9); /* Primärtext / starke Tinte */ --fed-paper: oklch(97.5% 0.007 295.5); /* dezente, leicht erhöhte Fläche */ --fed-body: oklch(47.2% 0.039 290.6); /* Fließtext (6,5:1 auf Weiß) */ --fed-muted: oklch(68.6% 0.032 291.8); /* dezent / nur große Elemente */ --fed-border: oklch(94.1% 0.012 296.3); /* Trennlinien */ /* Flächenrollen */ --fed-page: #ffffff; /* Seitenhintergrund (body) */ --fed-surface: #ffffff; /* Karten, Felder, Navbar, Accordion */ /* Feste Rollen (ändern sich NICHT im Dark Mode) */ --fed-on-accent: oklch(21.6% 0.029 292.9); /* Text auf Orange (Buttons/CTAs) */ --fed-always-dark: oklch(21.6% 0.029 292.9); /* Hintergrund fed-section--dark */ /* Akzente (Flächen, Punkte – voll gesättigt) */ --fed-orange: oklch(74.7% 0.18 57.4); --fed-pink: oklch(69.9% 0.195 14.2); --fed-purple: oklch(60% 0.206 296.4); --fed-cyan: oklch(73.5% 0.126 206.1); --fed-yellow: oklch(85.9% 0.176 89); --fed-green: oklch(76.4% 0.212 131.9); --fed-blue: oklch(64% 0.177 254.4); /* Akzente für TEXT (kontraststark auf jeweiligem Grund) */ --fed-orange-text: oklch(56.6% 0.142 53.9); --fed-pink-text: oklch(54.7% 0.184 13.5); --fed-purple-text: oklch(48.2% 0.184 295.5); --fed-cyan-text: oklch(54.8% 0.094 206.3); --fed-green-text: oklch(55.7% 0.155 132.1); --fed-blue-text: oklch(54.9% 0.168 256); /* Button-Orange Hover */ --fed-orange-deep: oklch(66.3% 0.169 52.7); /* Hero-Hintergrund (Light: heller Blob-Mesh) */ --fed-hero-bg: radial-gradient(ellipse 60% 80% at 0% 110%, oklch(74.7% 0.18 57.4 / 0.42) 0%, transparent 60%), radial-gradient(ellipse 65% 65% at 105% -5%, oklch(60% 0.206 296.4 / 0.38) 0%, transparent 58%), radial-gradient(ellipse 50% 55% at 88% 108%, oklch(73.5% 0.126 206.1 / 0.35) 0%, transparent 52%), radial-gradient(ellipse 45% 50% at 52% -12%, oklch(69.9% 0.195 14.2 / 0.28) 0%, transparent 52%), radial-gradient(ellipse 38% 42% at 32% 112%, oklch(85.9% 0.176 89 / 0.25) 0%, transparent 48%), var(--fed-paper); /* Schriften */ --fed-font-body: 'Mulish', sans-serif; --fed-font-display: 'Newsreader', Georgia, serif; /* Maße */ --fed-nav-h: 4rem; } /* ---------- Grundlagen ---------------------------------------- */ html { scroll-padding-block-start: calc(var(--fed-nav-h) + 1rem); } body.vq-site { background: var(--fed-page); color: var(--fed-ink); font-family: var(--fed-font-body); overflow-x: hidden; /* schützt vor Full-Bleed-Überlauf */ padding-block-start: var(--fed-nav-h); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Typo-Grundlinien (Bulma überschreiben) */ .title { color: var(--fed-ink); font-family: var(--fed-font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; } .title.is-2 { font-size: clamp(2rem, 4vw, 2.85rem); } .title.is-3 { font-size: clamp(1.6rem, 3vw, 2.2rem); } .subtitle { color: var(--fed-body); font-family: var(--fed-font-body); font-weight: 400; } .content h3, .vq-text-media-body h3 { color: var(--fed-ink); font-family: var(--fed-font-display); font-weight: 500; /* Newsreader lädt nur 500 — kein Faux-Bold */ letter-spacing: -0.01em; } /* ---------- Navbar ------------------------------------------- */ .navbar.is-fixed-top { xxxbackdrop-filter: blur(1px); background: var(--fed-surface); xxxbackground-color: transparent; border-block-end: 1px solid var(--fed-border); box-shadow: none; height: var(--fed-nav-h); min-height: var(--fed-nav-h); } .navbar.is-fixed-top > .container { align-items: center; } .navbar-brand { align-items: center; } .navbar-brand-logo .navbar-brand-logo-image { border-radius: 0.3125rem; height: auto; max-height: none; width: 2.5rem; } .navbar-brand-logo-text { color: var(--fed-ink); font-family: var(--fed-font-display); font-size: 1.2rem; font-weight: 500; letter-spacing: 0; margin-block-start: .1875rem; margin-inline-start: 0.55rem; white-space: nowrap; } .navbar-brand .navbar-brand-logo { white-space: nowrap; } .navbar-item, .navbar-link { color: var(--fed-body); font-family: var(--fed-font-body); } .navbar-link { font-size: 0.95rem; font-weight: 700; } /* Bulma-Dropdownpfeil an einfachen Links entfernen */ .navbar-link:not(.is-arrowless)::after { display: none !important; } .navbar a.navbar-link:hover, .navbar a.navbar-link:focus, .navbar .navbar-item > a.navbar-link:hover { background: transparent; color: var(--fed-orange-text); } .navbar-burger { color: var(--fed-ink); height: var(--fed-nav-h); } /* Desktop: Popover-Menü als normale Leiste zeigen + Links zentrieren */ @media (min-width: 1024px) { #main-nav[popover] { background: transparent; border: 0; box-shadow: none; display: flex; inset: auto; max-width: none; overflow: visible; position: static; width: auto; } /* navbar-start füllt den Raum und zentriert die Links; navbar-end (CTA) bleibt rechts, Logo links */ .navbar-menu .navbar-start { flex: 1 1 auto; justify-content: center; margin-inline-end: 0; } .navbar-menu .navbar-end { margin-inline-start: 0; } } /* Mobil: Popover-Panel lesbar machen */ @media (max-width: 1023px) { #main-nav[popover] { background: var(--fed-surface); border: 1px solid var(--fed-border); border-radius: 0.875rem; box-shadow: 0 12px 40px oklch(21.6% 0.029 292.9 / 0.14); padding: 0.5rem; } } /* ---------- Buttons ----------------------------------------- */ .button.is-primary { background-color: var(--fed-orange); border-color: transparent; color: var(--fed-on-accent); /* A11y: dunkle Tinte auf Orange (in beiden Modi) */ font-family: var(--fed-font-body); font-weight: 700; letter-spacing: 0.01em; transition: background-color 0.15s ease, transform 0.1s ease; } .button.is-primary:hover, .button.is-primary:focus { background-color: var(--fed-orange-deep); border-color: transparent; color: var(--fed-on-accent); } .button.is-primary:active { transform: translateY(1px); } .button.is-large { font-size: 1.05rem; } .button .icon i { color: inherit; } /* ---------- Hero (CSS-Blob-Mesh / Dark Diagonal-Sweep) ------ */ /* Hero bricht selbst voll aus (kein Nullen geteilter Wrapper, damit Geschwister-Blöcke wie block-1 ihren Gutter behalten). margin-inline:calc(50% - 50vw) funktioniert, weil der zentrierte Bulma-Container den Hero mittig ausrichtet. body hat overflow-x:hidden. */ .section:has(.fed-hero) { padding-block: 0; } .fed-hero { background: var(--fed-hero-bg); margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .fed-hero .hero-body { padding-block: 5rem; padding-inline: 1.5rem; } .fed-hero.is-fullheight { xxmin-height: calc(100svh - var(--fed-nav-h)); xxxmin-height: 1px; } .fed-hero.is-fullheight .hero-body { padding-block: 3rem; } .fed-hero .hero-body > .container:not(.is-max-tablet):not(.is-max-desktop):not(.is-max-widescreen) { max-width: 1152px; } .fed-hero .title { font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: 0; line-height: 1; margin-block-end: 1.4rem; } .fed-hero .subtitle { color: var(--fed-body); font-size: 1.15rem; line-height: 1.65; max-width: 34rem; } .vq-hero-logo { margin-block-end: 1.75rem; } .vq-hero-logo img { border-radius: 1.1875rem; box-shadow: 0 4px 18px oklch(21.6% 0.029 292.9 / 0.12); height: auto; margin-block-start: 0.5em; width: 8.75rem; } /* Eyebrow / Kicker */ .vq-hero-eyebrow, .vq-text-media-eyebrow { color: var(--fed-purple-text); font-family: var(--fed-font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; margin-block-end: 1rem; text-transform: uppercase; } /* ---------- Inhalts-Sections (Bulma-Section-Rhythmus) ------- */ .section { padding-block: 2.25rem; padding-inline: 1.5rem; } /* Verschachtelte vq-block-text-media liegen bereits in einer äußeren .section + .container + .columns. Deren eigenes horizontales Padding und das Negativ-Margin der inneren .columns würden den Gutter ein zweites Mal aufaddieren (48px statt 24px). Daher hier neutralisieren – nur der vertikale Rhythmus bleibt. */ .section.vq-block-text-media { padding-block: 1.5rem; padding-inline: 0; } .columns > .column .vq-block-text-media > .container > .columns { margin-inline: 0; } .columns > .column .vq-block-text-media > .container > .columns > .column { padding-inline: 0; } .vq-text-media-body, .content.is-medium { color: var(--fed-body); font-size: 1.0625rem; line-height: 1.75; } .vq-text-media-body p { margin-block-end: 1rem; } .vq-text-media-body strong:not(a > strong) { color: var(--fed-ink); } /* Body-Links: Standard = Textlink */ .vq-text-media-body a, .content a { color: var(--fed-orange-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } .vq-text-media-body a:hover, .content a:hover { color: var(--fed-ink); } /* CTA-Links (Ziel = Bewerbung/Bestellung) → Button-Optik */ .vq-text-media-body a[href*="bewerben"], .vq-text-media-body a[href*="bestellen"], .content a[href*="bewerben"], .content a[href*="bestellen"] { align-items: center; background: var(--fed-orange); border-radius: 999px; color: var(--fed-on-accent); display: inline-flex; font-family: var(--fed-font-body); font-weight: 700; gap: 0.5em; padding-block: 0.7em; padding-inline: 1.4em; text-decoration: none; transition: background-color 0.15s ease; white-space: nowrap; } .vq-text-media-body a[href*="bewerben"]:hover, .vq-text-media-body a[href*="bestellen"]:hover, .content a[href*="bewerben"]:hover, .content a[href*="bestellen"]:hover { background: var(--fed-orange-deep); color: var(--fed-on-accent); } /* ---------- Listen ------------------------------------------ */ .vq-text-media-body ul { list-style: none; margin-inline-start: 0; } .vq-text-media-body ul li { color: var(--fed-body); margin-block-end: 0.55em; padding-inline-start: 1.7em; position: relative; } .vq-text-media-body ul li strong { color: var(--fed-ink); } /* Bunte Punkt-Bullets (Standardliste), rotierende Farben */ .vq-text-media-body ul li::before { background: var(--fed-purple); border-radius: 50%; content: ""; height: 0.5em; inset-block-start: 0.62em; inset-inline-start: 0; position: absolute; width: 0.5em; } .vq-text-media-body ul li:nth-child(6n+2)::before { background: var(--fed-cyan); } .vq-text-media-body ul li:nth-child(6n+3)::before { background: var(--fed-green); } .vq-text-media-body ul li:nth-child(6n+4)::before { background: var(--fed-yellow); } .vq-text-media-body ul li:nth-child(6n+5)::before { background: var(--fed-blue); } .vq-text-media-body ul li:nth-child(6n+6)::before { background: var(--fed-pink); } /* Checkmark-Liste:
  • enthält ausschließlich ein */ .vq-text-media-body ul li:has(> strong:only-child) { padding-inline-start: 1.95em; } .vq-text-media-body ul li:has(> strong:only-child)::before { background: none; border-radius: 0; color: var(--fed-green-text); content: "\2713"; font-size: 1.05em; font-weight: 900; height: auto; inset-block-start: 0; inset-inline-start: 0; width: auto; } /* ---------- fed-infoblocks (Kita: "Was die App leistet") ---- */ .section.fed-infoblocks { background: var(--fed-surface); padding-block: 1.5rem; padding-inline: 0; } .fed-infoblocks .title.is-3 { margin-block-end: 2rem; } .fed-infoblocks__bodytext { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); } .fed-infoblocks__bodytext p { background: var(--fed-paper); border-block-start: 3px solid var(--fed-purple); border-radius: 0.875rem; color: var(--fed-body); line-height: 1.6; margin: 0; padding-block: 1.6rem; padding-inline: 1.4rem; } .fed-infoblocks__bodytext p strong { color: var(--fed-ink); display: block; font-size: 1.05rem; margin-block-end: 0.4rem; } .fed-infoblocks__bodytext p:nth-child(6n+2) { border-block-start-color: var(--fed-cyan); } .fed-infoblocks__bodytext p:nth-child(6n+3) { border-block-start-color: var(--fed-green); } .fed-infoblocks__bodytext p:nth-child(6n+4) { border-block-start-color: var(--fed-yellow); } .fed-infoblocks__bodytext p:nth-child(6n+5) { border-block-start-color: var(--fed-blue); } .fed-infoblocks__bodytext p:nth-child(6n+6) { border-block-start-color: var(--fed-pink); } @media (max-width: 1023px) { .fed-infoblocks__bodytext { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .fed-infoblocks__bodytext { grid-template-columns: 1fr; } } /* ---------- Formulare (Bewerbung / Kontakt) ----------------- */ /* Greift auf Bulma-Formularelemente innerhalb .vq-form. Optional die ganze Form in eine Karte setzen, indem das
    bzw. ein Wrapper die Klasse .vq-form--card erhält. */ .vq-form--card { background: var(--fed-surface); border: 1px solid var(--fed-border); border-radius: 1.125rem; box-shadow: 0 10px 40px oklch(21.6% 0.029 292.9 / 0.06); padding: 2.25rem; } .vq-form .field:not(:last-child) { margin-block-end: 1.35rem; } .vq-form .label { color: var(--fed-ink); font-family: var(--fed-font-body); font-size: 0.92rem; font-weight: 700; margin-block-end: 0.45rem; } /* Text-, E-Mail-Felder, Textarea und Select-Box einheitlich */ .vq-form .input, .vq-form .textarea, .vq-form .select select { background-color: var(--fed-surface); border: 1.5px solid var(--fed-border); border-radius: 0.75rem; box-shadow: none; color: var(--fed-ink); font-family: var(--fed-font-body); font-size: 1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .vq-form .input { height: 3rem; padding-inline: 1rem; } .vq-form .textarea { line-height: 1.6; min-height: 7.5rem; padding-block: 0.85rem; padding-inline: 1rem; resize: vertical; } .vq-form .input::placeholder, .vq-form .textarea::placeholder { color: var(--fed-muted); opacity: 1; } .vq-form .input:hover, .vq-form .textarea:hover, .vq-form .select select:hover { border-color: var(--fed-muted); } .vq-form .input:focus, .vq-form .textarea:focus, .vq-form .select select:focus, .vq-form .input:focus-within, .vq-form .textarea:active { border-color: var(--fed-purple); box-shadow: 0 0 0 3px oklch(60% 0.206 296.4 / 0.18); outline: none; } /* Select-Box: volle Breite + Markenfarbe für den Pfeil */ .vq-form .select { height: auto; width: 100%; } .vq-form .select:not(.is-multiple) { height: auto; } .vq-form .select select { height: 3rem; padding-inline-end: 2.75rem; width: 100%; } .vq-form .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--fed-purple); height: 0.6em; right: 1.15em; width: 0.6em; } /* Disabled-Optik (falls genutzt) */ .vq-form .input[disabled], .vq-form .textarea[disabled], .vq-form .select select[disabled] { background-color: var(--fed-paper); border-color: var(--fed-border); color: var(--fed-muted); } /* Submit-Button: nutzt .button.is-primary; nur Abstand feinjustieren */ .vq-form .vq-form-submit { gap: 0.2em; margin-block-start: 0.5rem; } /* ---------- FAQ-Akkordeon (details/summary) ----------------- */ .vq-accordion__item { background: var(--fed-surface); border: 1px solid var(--fed-border); border-radius: 0.75rem; box-shadow: none; margin-block-end: 0.75rem; margin-inline: auto; max-width: 50rem; overflow: hidden; transition: border-color 0.15s ease; } .vq-accordion__item:hover { border-color: var(--fed-muted); } .vq-accordion__item .card-header { background: transparent; box-shadow: none; } .vq-accordion__item summary { align-items: center; cursor: pointer; display: flex; gap: 1rem; justify-content: space-between; list-style: none; padding-block: 1.15rem; padding-inline: 1.35rem; } .vq-accordion__item summary::-webkit-details-marker { display: none; } .vq-accordion__item .card-header-title { color: var(--fed-ink); flex: 1; font-family: var(--fed-font-body); font-size: 1.02rem; font-weight: 700; padding: 0; } .vq-accordion__item .vq-accordion__icon { color: var(--fed-muted); transition: transform 0.2s ease, color 0.2s ease; } .vq-accordion__item[open] .vq-accordion__icon { color: var(--fed-orange-text); transform: rotate(180deg); } .vq-accordion__item .card-content { padding-block: 0 1.4rem; padding-inline: 1.35rem; } .vq-accordion__item .card-content .content { color: var(--fed-body); line-height: 1.75; } .vq-accordion__item .card-content .content a { color: var(--fed-orange-text); } /* ---------- Optionaler dunkler Abschnitt -------------------- */ /* Klasse fed-section--dark auf eine .section setzen, um den "Versprechen"-Look (dunkler Block) zu erhalten. Bleibt in beiden Modi dunkel (--fed-always-dark). */ .fed-section--dark { background: var(--fed-always-dark); } .fed-section--dark .title, .fed-section--dark .subtitle, .fed-section--dark .vq-text-media-body, .fed-section--dark .content, .fed-section--dark .vq-text-media-body strong { color: #ffffff; } .fed-section--dark .vq-text-media-body { color: oklch(100% 0 0 / 0.72); } .fed-section--dark .vq-text-media-eyebrow { color: var(--fed-pink); } /* Formular im dunklen Abschnitt lesbar halten */ .fed-section--dark .vq-form .label { color: #ffffff; } .fed-section--dark .vq-form .input, .fed-section--dark .vq-form .textarea, .fed-section--dark .vq-form .select select { background-color: oklch(100% 0 0 / 0.06); border-color: oklch(100% 0 0 / 0.18); color: #ffffff; } .fed-section--dark .vq-form .input::placeholder, .fed-section--dark .vq-form .textarea::placeholder { color: oklch(100% 0 0 / 0.5); } /* ---------- Footer ------------------------------------------ */ .veloquill-footer { background: var(--fed-paper); border-block-start: 1px solid var(--fed-border); padding-block: 2.75rem; padding-inline: 1.5rem; } .footer-brand-logo { color: var(--fed-ink); font-family: var(--fed-font-display); font-size: 1.05rem; font-weight: 500; gap: 0.6rem; letter-spacing: -0.01em; text-decoration: none; } .footer-brand-logo img { border-radius: 0.3125rem; height: auto; max-height: none; width: 2.5rem; } .veloquill-footer .title.is-6 { color: var(--fed-ink); font-family: var(--fed-font-body); font-size: 0.8rem; letter-spacing: 0.08em; margin-block-end: 1rem; text-transform: uppercase; } .veloquill-footer .menu-list a { background: none; color: var(--fed-body); padding-block: 0.3rem; padding-inline: 0; } .veloquill-footer .menu-list a:hover { background: none; color: var(--fed-orange-text); } .veloquill-footer .button.social { background: var(--fed-ink); border: none; color: var(--fed-page); } .veloquill-footer .button.social:hover { background: var(--fed-orange); color: var(--fed-on-accent); } .copyright-line { color: var(--fed-body); font-size: 0.85rem; margin-block-start: 2rem; } /* ---------- A11y: Fokus & Reduced Motion -------------------- */ a:focus-visible, .button:focus-visible, summary:focus-visible, .navbar-burger:focus-visible { border-radius: 0.25rem; outline: 3px solid var(--fed-purple-text); outline-offset: 2px; } .button.is-primary:focus-visible { outline-color: var(--fed-purple-text); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; transition: none !important; } } /* ---------- Sonstiges --------------------------------------- */ .vq-form-submit .icon:first-child:last-child { margin-inline-start: calc(var(--bulma-button-padding-horizontal) * -0.25); } .fed-wortmarke i, .fed-hero .title i { color: var(--fed-orange-deep); font-style: normal; } h1, h2, h3 { hyphens: none; } @media (max-width: 1023px) { #main-nav.navbar-menu { bottom: auto; left: auto; margin: 0; max-width: calc(100vw - 1.5rem); min-width: 14rem; position: fixed; right: -100vw; top: calc(var(--fed-nav-h) + 0.4rem); transition: display 0.2s allow-discrete, right 0.2s ease; width: auto; } #main-nav.navbar-menu:popover-open { display: block; right: 0.75rem; } @starting-style { #main-nav.navbar-menu:popover-open { right: -100vw; } } } .button.power-cta { background-color: var(--fed-purple); color: var(--fed-surface); } .button.power-cta:hover { background-color: var(--fed-purple-text); color: var(--fed-surface); } /* ============================================================ Besondere Seiten ============================================================ */ .home { & > #vqMain { & > .section:last-child { background-color: var(--fed-paper); text-align: center; & .vq-text-media-body { margin-inline: auto; } } } } .sub-about { & > #vqMain { & > .section:nth-child(2) { background-color: var(--fed-paper); } } } /* ============================================================ Welcome Animation ============================================================ */ .fed-anim-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; pointer-events: none; z-index: 25; /* über dem Hero, unter der fixierten Navbar (z 30) */ } /* Das animierte Logo, per JS exakt über das echte Hero-Logo gelegt. */ .fed-logo-anim { position: absolute; overflow: visible; /* Quadrate fliegen über den Logo-Rand hinaus */ } .fed-logo-anim .tile { fill: #fff; filter: drop-shadow(0 4px 18px rgba(26,23,38,0.12)); } .fed-logo-anim .sq { transform-box: fill-box; transform-origin: center; mix-blend-mode: multiply; } /* ============================================================ DARK MODE Nur Token-Werte werden umdefiniert — alle Regeln oben nutzen var(--fed-*) und passen sich automatisch an. Aktiv via OS (prefers-color-scheme: dark, sofern nicht data-theme="light") ODER manuell . ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --fed-ink: oklch(95% 0.012 293); --fed-paper: oklch(26% 0.026 293); --fed-body: oklch(78% 0.018 290); --fed-muted: oklch(60% 0.02 292); --fed-border: oklch(34% 0.018 294); --fed-page: oklch(15% 0.018 293); --fed-surface: oklch(20% 0.022 293); --fed-orange-text: oklch(80% 0.15 62); --fed-pink-text: oklch(77% 0.16 16); --fed-purple-text: oklch(75% 0.15 297); --fed-cyan-text: oklch(80% 0.11 202); --fed-green-text: oklch(82% 0.18 133); --fed-blue-text: oklch(76% 0.14 252); --fed-hero-bg: linear-gradient(120deg, oklch(19% 0.035 293) 0%, oklch(23% 0.06 295) 17%, oklch(40% 0.16 300) 40%, oklch(56% 0.21 322) 60%, oklch(66% 0.20 8) 79%, oklch(73% 0.18 47) 100%); } } :root[data-theme="dark"] { color-scheme: dark; --fed-ink: oklch(95% 0.012 293); --fed-paper: oklch(26% 0.026 293); --fed-body: oklch(78% 0.018 290); --fed-muted: oklch(60% 0.02 292); --fed-border: oklch(34% 0.018 294); --fed-page: oklch(15% 0.018 293); --fed-surface: oklch(20% 0.022 293); --fed-orange-text: oklch(80% 0.15 62); --fed-pink-text: oklch(77% 0.16 16); --fed-purple-text: oklch(75% 0.15 297); --fed-cyan-text: oklch(80% 0.11 202); --fed-green-text: oklch(82% 0.18 133); --fed-blue-text: oklch(76% 0.14 252); --fed-hero-bg: linear-gradient(120deg, oklch(19% 0.035 293) 0%, oklch(23% 0.06 295) 17%, oklch(40% 0.16 300) 40%, oklch(56% 0.21 322) 60%, oklch(66% 0.20 8) 79%, oklch(73% 0.18 47) 100%); }