/* tokens.css */ /* Foerderverein FHE Design-Tokens. Quelle: Brandmanual v1.0 (Jelena, 06.10.2026), 2ndhuman_jelena/in-arbeit/20261006-0939-brand-handoff.md (+ -tokens.json, -tokens.css). Besitz: w1-fundament. Aufbau: 1. --fv-* Manual-Tokens (einzige Quelle fuer Werte) | 2. Rollen | 3. Typo-/Layout-Kurznamen. Die ALIAS-Schicht (--lila*, --mint*, --flieder-*, --ink*, --paper, --line*, --radius-*, --r-*, --color-*) ist geloescht (f2-rest, 06.10.2026); nur fuer die Archiv-Boards (.bsx-archiv, .abx) auf /speedbuild/ bleibt unten ein eng begrenzter Block. Farben stehen fuer Taetigkeiten (Verben, Feld verb_key, data-verb), Events tragen nur Verb-Tags. Schrift: nur Familjen Grotesk (variabel 400 bis 700). Newsreader entfaellt (Polish-Runde 1, R8, Alexander 06.10.2026): --fv-font-serif zeigt auf Familjen. Die Newsreader-Dateien (assets/fonts/newsreader/) bleiben liegen, die @font-face-Regeln sind entfernt (QA Runde 7, Fix 20). Selbst gehostet in assets/fonts/. Kein Dunkelmodus (Abweichung A15). Breakpoints: 1024 (Tablet) / 767 (Mobil). */ @font-face { font-family: "Familjen Grotesk"; src: url("../assets/fonts/familjen-grotesk/familjen-grotesk-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Familjen Grotesk"; src: url("../assets/fonts/familjen-grotesk/familjen-grotesk-latin-ext-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Markierung (.fv-mark, R9): dieselbe Familjen-Datei mit angepassten Metriken. Die Markierungsbox (Inline-Hintergrund = Ascent + Descent) sitzt so symmetrisch um die Versalhoehe (Cap 0,65 em; Box 0,83 em ueber, 0,20 em unter der Grundlinie) und klebt nicht an der Zeile darueber. */ @font-face { font-family: "Familjen Mark"; src: url("../assets/fonts/familjen-grotesk/familjen-grotesk-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; ascent-override: 83%; descent-override: 20%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Familjen Mark"; src: url("../assets/fonts/familjen-grotesk/familjen-grotesk-latin-ext-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; ascent-override: 83%; descent-override: 20%; line-gap-override: 0%; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ===================================================================== 1. BRANDMANUAL v1.0 (--fv-*), Werte exakt aus dem Handoff ===================================================================== */ /* Markenfarben (aus dem Original-EPS gemessen) */ --fv-nachtblau: #171d3a; /* foerdern. Weiss darauf 16,49:1 */ --fv-violett: #57389c; /* entwickeln. Weiss darauf 8,57:1 */ --fv-purpur: #85349e; /* verbinden. Weiss darauf 7,04:1 */ --fv-rosa: #d38acb; /* unterstuetzen. Nachtblau darauf 6,49:1. Nie Text auf Weiss (2,54:1) */ --fv-pflaume: #a451af; /* werben. Nachtblau darauf 3,44:1: nur Schrift ab 24 px */ /* Neutrale */ --fv-papier: #f8f5f1; /* warme helle Sektion. Nachtblau 15,18:1 */ --fv-nebel: #ece7ef; /* Flaechen, Linien, Formularfelder. Nachtblau 13,54:1 */ --fv-schiefer: #4e5069; /* Sekundaertext: 7,85:1 Weiss, 7,22 Papier, 6,45 Nebel */ --fv-weiss: #ffffff; --fv-flieder-hell: #efe8f6; /* helle Tint-Flaeche. Nachtblau 13,78:1 */ --fv-rosa-hell: #f9ecf6; /* helle Tint-Flaeche. Nachtblau 14,42:1 */ /* Zustaende */ --fv-nachtblau-hover: #252b46; /* 6 % heller, Weiss darauf 13,9:1 */ --fv-weiss-hover: #f1f1f3; /* Button auf dunkel, Hover [zu bestaetigen] */ /* Verben (Feld verb_key, HTML data-verb) */ --fv-verb-foerdern: var(--fv-nachtblau); --fv-verb-verbinden: var(--fv-purpur); --fv-verb-unterstuetzen: var(--fv-rosa); --fv-verb-entwickeln: var(--fv-violett); --fv-verb-werben: var(--fv-pflaume); /* Rollen (je Flaeche umgeschaltet, siehe layout.css .fv-section--*, .is-dark, .is-tint) */ --fv-bg: var(--fv-weiss); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); /* hell/Rosa: Nachtblau | Nachtblau/Violett: Rosa | Purpur/Pflaume: Weiss (A5) */ --fv-focus-width: 3px; --fv-focus-offset: 2px; --fv-glow: var(--fv-gradient-glow-hell); --fv-link-underline: var(--fv-rosa); /* Schrift */ --fv-font-sans: "Familjen Grotesk", "Familjen Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fv-font-serif: var(--fv-font-sans); /* R8: Newsreader gestrichen. Zurueckschalten: "Newsreader", Georgia, serif */ --fv-font-mark: "Familjen Mark", var(--fv-font-sans); /* nur .fv-mark/.c-mark--verb (Metrik fuer symmetrische Box) */ --fv-fw-regular: 400; --fv-fw-medium: 500; --fv-fw-semibold: 600; --fv-fw-bold: 700; /* Skala fluid zwischen 390 px (mobil) und 1440 px (Desktop) */ --fv-fs-display: clamp(2.75rem, 2.1rem + 2.6667vw, 4.5rem); /* 44 / 72, nur Startseiten-Hero */ --fv-fs-h1: clamp(2.25rem, 1.7857rem + 1.9048vw, 3.5rem); /* 36 / 56 */ --fv-fs-h2: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem); /* 28 / 40 */ --fv-fs-h3: clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem); /* 22 / 28 */ --fv-fs-lead: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem); /* 19 [zu bestaetigen] / 22 */ --fv-fs-body: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 / 18 */ --fv-fs-small: 0.875rem; /* 14 */ --fv-fs-zwischenruf: clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem); /* 24 / 32: Familjen Medium, groesser als Lead (R8) */ --fv-fs-preisname: var(--fv-fs-h3); /* wie H3 [zu bestaetigen] */ --fv-fs-button: 1rem; /* 16 */ --fv-fs-tag: 0.8125rem; /* 13 */ /* Zusatzstufen ui-senior (qa/runde-6-abstand-typo.md Fix 4, 15). Nicht im Manual 5.2 [zu bestaetigen Jelena]: Kartentitel in Rastern ab drei Spalten (zwischen H3 und Lead, damit H2 > Kartentitel > Text klar springt), Zahl in Karten (Datum, Preis, Jahr) = H2-Groesse, Kennzahl (Zahlenband) = H1-Groesse. */ --fv-fs-card: clamp(1.25rem, 1.2036rem + 0.1905vw, 1.375rem); /* 20 / 22 [zu bestaetigen Jelena] */ --fv-lh-card: 1.2; --fv-fs-zahl: var(--fv-fs-h2); /* 28 / 40 [zu bestaetigen Jelena] */ --fv-fs-kennzahl: var(--fv-fs-h1); /* 36 / 56 [zu bestaetigen Jelena] */ --fv-head-gap: var(--fv-space-32); /* Headline zu Inhalt (Manual 6: 32 bis 48) */ --fv-lh-display: 1; --fv-lh-h1: 1.04; --fv-lh-h2: 1.08; --fv-lh-h3: 1.15; --fv-lh-lead: 1.5; --fv-lh-body: 1.55; --fv-lh-small: 1.5; --fv-lh-zwischenruf: 1.25; --fv-lh-button: 1.25; --fv-lh-tag: 1.2; --fv-ls-display: -0.03em; --fv-ls-h1: -0.025em; --fv-ls-h2: -0.02em; --fv-ls-h3: -0.01em; --fv-ls-text: 0; --fv-ls-zwischenruf: -0.01em; --fv-measure: 30em; /* ca. 60 bis 70 Zeichen Familjen (66ch ergab 79 bis 96 Zeichen, qa/runde-6 Fix 10); skaliert mit der Schriftgroesse */ /* Abstaende (4er-Raster, keine anderen Werte) */ --fv-space-4: 4px; --fv-space-8: 8px; --fv-space-12: 12px; --fv-space-16: 16px; --fv-space-24: 24px; --fv-space-32: 32px; --fv-space-48: 48px; --fv-space-64: 64px; --fv-space-96: 96px; --fv-space-128: 128px; --fv-fuge: 16px; /* mobil 12 px */ --fv-content-max: 1200px; --fv-page-margin: clamp(20px, 0.686px + 4.9524vw, 72px); /* 20 / 72 */ --fv-section-y: var(--fv-space-96); /* mobil 64 [zu bestaetigen] */ /* Radien */ --fv-radius-2: 2px; /* kleine Bausteine/Balken bis 16 px Hoehe (10 bis 20 % der kurzen Seite, Manual 6) [zu bestaetigen] */ --fv-radius-3: 3px; /* Verb-Tag-Kachel 10 px, Balken 16 bis 20 px */ --fv-radius-4: 4px; /* Bausteine 20 bis 30 px Hoehe */ --fv-radius-8: 8px; /* Pfeil-Kachel, Check-Kachel */ --fv-radius-10: 10px; /* Tag */ --fv-radius-12: 12px; /* Button */ --fv-radius-16: 16px; /* kleine Karten, Logo-Kachel */ --fv-radius-24: 24px; /* Karten */ --fv-radius-28: 28px; /* grosse Karten */ --fv-radius-40: 40px; /* Bildflaechen */ --fv-radius-64: 64px; /* grosse Bausteine, Hero */ --fv-radius-icon-tile: 22%; --fv-radius-mark: 0.16em; /* Unterstreichung und Markierung (R9): ueberall gleich stark und gleich hoch */ --fv-underline-thickness: 2px; --fv-underline-offset: 0.18em; --fv-mark-pad-x: 0.16em; --fv-mark-pad-y: 0.04em; /* oben und unten gleich */ --fv-lh-marked: 1.12; /* Zeilenhoehe fuer Headlines mit Markierung, damit Boxen nicht an der Nachbarzeile kleben */ /* Gewichte nach R8: Zahlen Bold, Preisname wie H3, Zwischenruf Medium */ --fv-fw-zahl: var(--fv-fw-bold); --fv-fw-preisname: var(--fv-fw-semibold); --fv-fw-zwischenruf: var(--fv-fw-medium); /* Schatten (einziger erlaubter) */ --fv-shadow-card: 0 8px 24px rgba(23, 29, 58, 0.08); /* Verlaeufe */ --fv-gradient-glow: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%); --fv-gradient-glow-hell: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%); --fv-gradient-image-fade: linear-gradient(180deg, rgba(23, 29, 58, 0) 40%, rgba(23, 29, 58, 0.95) 100%); /* Bewegung */ --fv-duration: 160ms; --fv-easing: ease-out; /* Komponenten-Masse */ --fv-btn-arrow-size: 32px; /* [zu bestaetigen in Figma] */ --fv-btn-gap: 12px; /* [zu bestaetigen in Figma] */ --fv-card-padding: clamp(28px, 25.029px + 0.7619vw, 36px); /* 28 / 36 */ /* ===================================================================== 2. VERB-TOKENS (--c-*), zeigen auf --fv-*. Flaeche | Hover | Schrift auf Flaeche | Tint | Text auf Weiss ===================================================================== */ --c-foerdern: var(--fv-verb-foerdern); --c-foerdern-strong: var(--fv-nachtblau-hover); --c-foerdern-on: var(--fv-weiss); --c-foerdern-tint: var(--fv-nebel); --c-foerdern-ink: var(--fv-nachtblau); --c-entwickeln: var(--fv-verb-entwickeln); --c-entwickeln-strong: var(--fv-violett); --c-entwickeln-on: var(--fv-weiss); --c-entwickeln-tint: var(--fv-flieder-hell); --c-entwickeln-ink: var(--fv-violett); --c-verbinden: var(--fv-verb-verbinden); --c-verbinden-strong: var(--fv-purpur); --c-verbinden-on: var(--fv-weiss); --c-verbinden-tint: var(--fv-flieder-hell); --c-verbinden-ink: var(--fv-purpur); --c-unterstuetzen: var(--fv-verb-unterstuetzen); --c-unterstuetzen-strong: var(--fv-rosa); --c-unterstuetzen-on: var(--fv-nachtblau); --c-unterstuetzen-tint: var(--fv-rosa-hell); --c-unterstuetzen-ink: var(--fv-nachtblau); /* Rosa nie als Text: Verb-Text Nachtblau, Kachel traegt Farbe */ --c-werben: var(--fv-verb-werben); --c-werben-strong: var(--fv-pflaume); --c-werben-on: var(--fv-nachtblau); /* nur Schrift ab 24 px auf Pflaume */ --c-werben-tint: var(--fv-rosa-hell); --c-werben-ink: var(--fv-nachtblau); /* Aktiver Verb-Marker (per .verb-* / data-verb umgeschaltet) */ --accent: var(--c-foerdern); --accent-strong: var(--c-foerdern-strong); --accent-on: var(--c-foerdern-on); --accent-tint: var(--c-foerdern-tint); --accent-ink: var(--c-foerdern-ink); /* Markierung (.fv-mark): Standard Rosa / Nachtblau */ --mark-bg: var(--fv-rosa); --mark-on: var(--fv-nachtblau); /* Rollen (neutrale Namen, von allen Komponenten genutzt; bleiben auch nach Welle 3) */ --bg: var(--fv-weiss); --bg-subtle: var(--fv-nebel); --surface: var(--fv-weiss); --surface-warm: var(--fv-papier); --text: var(--fv-nachtblau); --text-muted: var(--fv-schiefer); --border: var(--fv-nebel); --border-strong: color-mix(in srgb, var(--fv-schiefer) 65%, var(--fv-weiss)); /* Formularrahmen ca. 3,3:1 auf Weiss [zu bestaetigen] */ --focus: var(--fv-focus); --focus-on-dark: var(--fv-rosa); --link: var(--fv-nachtblau); --link-hover: var(--fv-nachtblau); /* Nachtblau-Flaeche (.is-dark, .fv-section--nacht, Footer). Manual: Sekundaertext auf Nachtblau = Weiss */ --dark-bg: var(--fv-nachtblau); --dark-text: var(--fv-weiss); --dark-text-muted: rgba(255, 255, 255, .86); --dark-text-subtle: rgba(255, 255, 255, .72); --dark-line: rgba(255, 255, 255, .16); /* Schrift-Aliase (Namen bleiben, Werte aus dem Manual) */ --font-fallback: "Familjen Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: var(--fv-font-sans); --font-heading: var(--font-body); --font-serif: var(--fv-font-serif); /* = Familjen (R8) */ --font-ui: var(--font-body); /* Typo-Aliase: Skala, Gewichte, Zeilenhoehen, Laufweiten = Manual 5.2. Doku konzept/typo.md */ --fw-medium: var(--fv-fw-medium); --fw-semibold: var(--fv-fw-semibold); --fw-bold: var(--fv-fw-bold); --fw-display: var(--fv-fw-bold); --fw-h1: var(--fv-fw-bold); --fw-h2: var(--fv-fw-bold); --fs-xs: var(--fv-fs-tag); /* 13: Tags, Kleingedrucktes */ --fs-sm: var(--fv-fs-small); /* 14: Meta, Bildunterschrift */ --fs-ui: var(--fv-fs-button); /* 16: Navigation, Buttons */ --fs-input: 1rem; /* 16: Formularfelder (iOS zoomt unter 16 px) */ --fs-base: var(--fv-fs-body); /* 17 / 18 */ --fs-md: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); /* 18 / 20: Kartentext betont, nicht im Manual [zu bestaetigen] */ --fs-lg: var(--fv-fs-lead); /* 19 / 22 */ --fs-h4: clamp(1.1875rem, 1.1411rem + 0.1905vw, 1.3125rem); /* 19 / 21: Kartentitel, nicht im Manual [zu bestaetigen] */ --fs-h3: var(--fv-fs-h3); --fs-h2: var(--fv-fs-h2); --fs-display: var(--fv-fs-display); --fs-numeral: clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem); /* 48 / 72: Kennzahlen [zu bestaetigen] */ --lh-display: var(--fv-lh-display); --lh-h1: var(--fv-lh-h1); --lh-h2: var(--fv-lh-h2); --lh-h3: var(--fv-lh-h3); --lh-h4: 1.25; --lh-tight: 1.1; --lh-snug: 1.2; --lh-ui: 1.35; --lh-prose: var(--fv-lh-body); --ls-display: var(--fv-ls-display); --ls-h1: var(--fv-ls-h1); --ls-h2: var(--fv-ls-h2); --ls-h3: var(--fv-ls-h3); --ls-h4: -0.005em; --ff-text: "kern" 1, "liga" 1, "calt" 1; /* Abstaende (Altnamen, Werte im 4er-Raster) */ --space-2: var(--fv-space-16); --space-3: var(--fv-space-24); --space-4: var(--fv-space-32); --space-5: var(--fv-space-48); --space-6: var(--fv-space-64); --section-pad: var(--fv-section-y); /* Layout */ --container-max: var(--fv-content-max); --container-narrow: 760px; --gutter: var(--fv-page-margin); --header-h: 80px; --ease: cubic-bezier(.2, .7, .2, 1); } @media (max-width: 1200px) { :root { --header-h: 72px; } /* Logo mit Schutzraum, gilt auch fuer Tablet und Mobil */ } @media (max-width: 767px) { :root { --fv-fuge: 12px; --fv-section-y: var(--fv-space-64); } } /* Verb-Kontext: Farbe = Taetigkeit, nie Veranstaltung. Umschalten per .verb- oder data-verb="". */ .verb-foerdern, [data-verb="foerdern"] { --accent: var(--c-foerdern); --accent-strong: var(--c-foerdern-strong); --accent-on: var(--c-foerdern-on); --accent-tint: var(--c-foerdern-tint); --accent-ink: var(--c-foerdern-ink); } .verb-verbinden, [data-verb="verbinden"] { --accent: var(--c-verbinden); --accent-strong: var(--c-verbinden-strong); --accent-on: var(--c-verbinden-on); --accent-tint: var(--c-verbinden-tint); --accent-ink: var(--c-verbinden-ink); } .verb-unterstuetzen, [data-verb="unterstuetzen"] { --accent: var(--c-unterstuetzen); --accent-strong: var(--c-unterstuetzen-strong); --accent-on: var(--c-unterstuetzen-on); --accent-tint: var(--c-unterstuetzen-tint); --accent-ink: var(--c-unterstuetzen-ink); } .verb-entwickeln, [data-verb="entwickeln"] { --accent: var(--c-entwickeln); --accent-strong: var(--c-entwickeln-strong); --accent-on: var(--c-entwickeln-on); --accent-tint: var(--c-entwickeln-tint); --accent-ink: var(--c-entwickeln-ink); } .verb-werben, [data-verb="werben"] { --accent: var(--c-werben); --accent-strong: var(--c-werben-strong); --accent-on: var(--c-werben-on); --accent-tint: var(--c-werben-tint); --accent-ink: var(--c-werben-ink); } /* ===== SCHRIFT-ANWENDUNG (R8, Polish-Runde 1: Newsreader gestrichen, alles Familjen Grotesk) ===== Zahlen: Bold 700, tabellarische Ziffern. Preisnamen: wie H3 (SemiBold 600). Zwischenruf und Zitat: Medium 500, gross, nicht kursiv, Purpur auf hell, Rosa auf dunkel. ":root" + doppelte Klassen erhoehen die Spezifitaet, damit Sektions-CSS, die noch font-weight: var(--fv-fw-regular) zu --fv-font-serif setzt, nicht einzeln angefasst werden muss. Versalien abgeschafft: Rubriken normal geschrieben (Bruecke, bis Sektions-CSS bereinigt ist). */ html body *, html body *::before, html body *::after { text-transform: none !important; } :root :is(.c-stats__value.c-stats__value, .c-is__value.c-is__value, .org-fakt__zahl.org-fakt__zahl, .c-mnav__amount.c-mnav__amount, .c-tier__amount.c-tier__amount, .c-award-detail__amount-value.c-award-detail__amount-value, .c-event__day.c-event__day, .c-nextev__day.c-nextev__day, .c-evf__day.c-evf__day, .c-ktarc__year.c-ktarc__year, .c-ktjg__year.c-ktjg__year, .c-winners__yearnum.c-winners__yearnum, .c-atl__yearnum.c-atl__yearnum, .c-timeline__year.c-timeline__year, .c-prize-hero__fact dd) { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-zahl); letter-spacing: -0.01em; font-style: normal; font-variant-numeric: tabular-nums lining-nums; } :root :is(.c-award__title.c-award__title, .c-tier__name.c-tier__name, .fv-prize__name.fv-prize__name) { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-preisname); letter-spacing: var(--fv-ls-h3); font-style: normal; } blockquote, .org-karte__zitat blockquote p, :root .fv-scale__sample--zwischenruf { font-family: var(--fv-font-sans); font-style: normal; font-weight: var(--fv-fw-zwischenruf); font-size: var(--fv-fs-zwischenruf); line-height: var(--fv-lh-zwischenruf); letter-spacing: var(--fv-ls-zwischenruf); } .c-prose blockquote { color: var(--fv-purpur); margin: 1.4em 0; padding: 0; border: 0; } .is-dark .c-prose blockquote, .fv-section--nacht .c-prose blockquote { color: var(--fv-rosa); } /* ===== Ende SCHRIFT-ANWENDUNG ===== */ /* Archiv-Boards auf /speedbuild/ (assets/abstrakt/showcase.css, content/speedbuild/abstrakt): zeigen den Stand vor dem Manual und nutzen noch Altnamen. Nur innerhalb dieser Boards definiert, nicht neu verwenden. */ .bsx-archiv, .abx { --fv-nacht-tief: var(--fv-nachtblau); --paper: var(--fv-papier); --white: var(--fv-weiss); --ink: var(--fv-nachtblau); --line: var(--fv-nebel); --line-strong: var(--border-strong); --lila: var(--fv-nachtblau); --flieder-50: var(--fv-flieder-hell); --flieder-100: var(--fv-nebel); --flieder-300: color-mix(in srgb, var(--fv-nebel) 72%, var(--fv-schiefer)); --mint: var(--fv-rosa); --mint-200: var(--fv-rosa-hell); --radius-lg: var(--fv-radius-24); --radius-xl: var(--fv-radius-40); } /* base.css */ /* Grundlagen (Besitz w1-fundament). Brandmanual v1.0: Skala 5.2, Fokus 8.2 (A5), Links 8.2 Sekundaer. Nur Tokens. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--fv-space-16)); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--fv-font-sans); font-size: var(--fv-fs-body); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-body); letter-spacing: var(--fv-ls-text); font-kerning: normal; font-feature-settings: var(--ff-text); font-variant-ligatures: common-ligatures contextual; color: var(--fv-fg); background: var(--fv-weiss); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } /* Headlines: Familjen, H1/H2 Bold 700, H3 SemiBold 600; ausgeglichener Umbruch, keine Silbentrennung */ h1, h2, h3, h4 { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); margin: 0 0 var(--fv-space-24); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; color: var(--text); } h1 { font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); } h2 { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } h3 { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } h4 { font-size: var(--fs-h4); font-weight: var(--fv-fw-semibold); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } /* Fliesstext: pretty, deutsche Silbentrennung */ p { margin: 0 0 1em; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; orphans: 2; widows: 2; } p:last-child { margin-bottom: 0; } strong, b { font-weight: var(--fv-fw-bold); } small { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } img, video, svg { max-width: 100%; display: block; } img { height: auto; } /* Bugfix 19.10.2026 (dritter Fund desselben Musters heute, nach KI-Badge und Pause-Knopf): die Regel direkt oberhalb setzt "display:block" fuer JEDES img/video/svg der Website per Element-Selektor - das ueberschreibt im Autoren-Stylesheet IMMER die Browser-eigene [hidden]{display:none}-Regel (Autoren-Styles gewinnen gegen das UA-Stylesheet unabhaengig von der Spezifitaet). Jedes per JS .hidden geschaltete img/video/svg blieb dadurch sichtbar (konkret aufgefallen beim Passwort- Augen-Icon: offenes und durchgestrichenes Auge gleichzeitig sichtbar). Globaler Fix statt Einzelfall-Patch je Element, deckt auch kuenftige Faelle ab. */ img[hidden], video[hidden], svg[hidden] { display: none; } figure { margin: 0; } address { font-style: normal; } /* Textlinks: Nachtblau, 2 px Unterstrich Rosa; auf dunklen Flaechen Weiss mit Rosa (Manual 8.2 Sekundaer) */ /* R9: ueberall 2 px, Abstand 0,18 em, ohne Aussparung an Unterlaengen; Hover wechselt nur die Farbe (Rosa -> Textfarbe), nie die Staerke */ a { color: var(--link); text-decoration-line: underline; text-decoration-color: var(--fv-link-underline); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); text-decoration-skip-ink: none; transition: color var(--fv-duration) var(--fv-easing), text-decoration-color var(--fv-duration) var(--fv-easing); } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } /* Fokus: 3 px Ring, 2 px Abstand, Farbe je Flaeche ueber --fv-focus (A5) */ :focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); border-radius: 2px; } /* Altflaechen ohne .is-dark/.fv-section--*: dunkle Buehnen bekommen den Rosa-Ring (ALIAS bis Welle 3) */ :is(.is-stage, .c-footer, .c-hero, .c-evh, .c-awards--stage) { --fv-focus: var(--fv-rosa); } /* Mobil-QA 19.10.2026 (Jelena): kein blaues Antipp-Rechteck auf Touch-Geraeten (Chrome/Safari Standard- Tap-Highlight) - betraf sichtbar die Pfeile im mobilen Menue (.c-nav__toggle), gilt aber projektweit fuer alle Links/Buttons. Fokus bleibt sichtbar ueber :focus-visible oben, das ist unabhaengig davon. */ html { -webkit-tap-highlight-color: transparent; } /* Checkboxen/Radios: Vereinsfarbe als Browser-Akzent statt Systemblau, projektweit (Frontend-Formulare: Kontakt, Mitglied werden, Portal, Newsletter, Login/Redaktion-Login ...). Admin2 (Grav-Backend) hat eigenes CSS und ist davon nicht betroffen. Spezifischere Regeln weiter unten (z. B. .c-pkg__check, .c-pd__task) haben gleiche Spezifitaet und stehen spaeter in der Datei, gewinnen also ueber die Reihenfolge weiterhin. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--fv-nachtblau); } ::selection { background: var(--fv-rosa); color: var(--fv-nachtblau); } /* Hilfsklassen */ .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-tnum, .fv-tnum { font-variant-numeric: tabular-nums lining-nums; } .c-skip { position: absolute; left: var(--fv-space-16); top: -100px; z-index: 100; background: var(--fv-nachtblau); color: var(--fv-weiss); padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-12); font-weight: var(--fv-fw-bold); --fv-focus: var(--fv-rosa); } .c-skip:focus-visible { top: var(--fv-space-12); color: var(--fv-weiss); } /* Farbsatz B entfaellt: Logo-Varianten -leuchtend bleiben verborgen */ .u-pal-b { display: none !important; } /* layout.css */ /* Layout und Sektionsflaechen (Besitz w1-fundament). Brandmanual v1.0 Abschnitt 6 und 12.2: Inhaltsbreite 1200, Seitenrand 72/20 fluid, Sektionsabstand 96/64 [zu bestaetigen]. Flaechen: .fv-section--nacht / --papier / --rosa / --purpur (Purpur nur Hero und einzelne Akzentbaender), Weiss = Grund. Kompatibel: Feld ground "tint" (.is-tint) = Papier, "dark" (.is-dark) = Nachtblau mit Glow. Nie zwei gleiche Flaechen hintereinander. */ .l-container { width: 100%; max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); margin-inline: auto; padding-inline: var(--fv-page-margin); } .l-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--fv-page-margin)); } .l-section { padding-block: var(--fv-section-y); } /* ---------- Sektionsflaechen: Flaeche, Text, Fokus, Glow (Rollen-Tokens + Altrollen fuer bestehende Komponenten) ---------- */ .fv-section--nacht, .fv-section--papier, .fv-section--rosa, .fv-section--purpur, .fv-section--flieder, .is-dark, .is-tint, .is-nacht, .is-papier, .is-rosa, .is-purpur, .is-weiss, .is-hell, .is-flieder { background-color: var(--fv-bg); color: var(--fv-fg); --text: var(--fv-fg); --text-muted: var(--fv-fg-muted); --focus: var(--fv-focus); } .fv-section--nacht, .fv-section--papier, .fv-section--rosa, .fv-section--purpur { padding-block: var(--fv-section-y); } /* ohne Container (eigenstaendig, wie im Handoff): Seitenrand als Innenabstand */ :is(.fv-section--nacht, .fv-section--papier, .fv-section--rosa, .fv-section--purpur):not(.l-section):not(:has(> .l-container)) { padding-inline: var(--fv-page-margin); } .is-weiss, .is-hell { --fv-bg: var(--fv-weiss); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); --fv-glow: var(--fv-gradient-glow-hell); } .fv-section--papier, .is-tint, .is-papier { --fv-bg: var(--fv-papier); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); --fv-glow: var(--fv-gradient-glow-hell); } /* Flieder hell (R11): ruhige helle Tint-Flaeche, Nachtblau 13,78:1 */ .fv-section--flieder, .is-flieder { --fv-bg: var(--fv-flieder-hell); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); --fv-glow: var(--fv-gradient-glow-hell); } .fv-section--flieder { padding-block: var(--fv-section-y); } .fv-section--rosa, .is-rosa { --fv-bg: var(--fv-rosa); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-nachtblau); /* Schiefer auf Rosa nur 3,09:1 */ --fv-focus: var(--fv-nachtblau); --fv-glow: var(--fv-gradient-glow); --link: var(--fv-nachtblau); --link-hover: var(--fv-nachtblau); --fv-link-underline: var(--fv-nachtblau); /* Rosa-Unterstrich verschwindet auf Rosa */ } /* Dunkle Flaechen: Weiss, Rosa-Fokus (Nachtblau) bzw. Weiss-Fokus (Purpur), Glow 0,14 */ .fv-section--nacht, .is-dark, .is-nacht, .fv-section--purpur, .is-purpur { --fv-fg: var(--fv-weiss); --fv-fg-muted: var(--fv-weiss); --fv-glow: var(--fv-gradient-glow); --link: var(--fv-weiss); --link-hover: var(--fv-weiss); /* Altrollen (ALIAS bis Welle 3) */ --text-muted: var(--dark-text-muted); --border: var(--dark-line); --color-on-dark: var(--dark-text); --color-on-dark-muted: var(--dark-text-muted); --color-on-dark-subtle: var(--dark-text-subtle); --color-border-on-dark: var(--dark-line); } .fv-section--nacht, .is-dark, .is-nacht { --fv-bg: var(--fv-nachtblau); --fv-focus: var(--fv-rosa); } .fv-section--purpur, .is-purpur { --fv-bg: var(--fv-purpur); --fv-focus: var(--fv-weiss); } :is(.fv-section--nacht, .is-dark, .is-nacht, .fv-section--purpur, .is-purpur) :is(h1, h2, h3, h4) { color: var(--fv-weiss); } /* Nachtblau/Purpur mit Glow (Verlauf 1): ground dark|nacht|purpur bekommen den Glow automatisch, sonst Klasse .fv-glow */ .is-dark, .is-nacht, .is-purpur, .fv-section--nacht.fv-glow, .fv-section--purpur.fv-glow { position: relative; background-image: var(--fv-glow); } .fv-glow { position: relative; isolation: isolate; } .fv-glow:not(.is-dark, .is-nacht, .is-purpur, [class*="fv-section--"])::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--fv-glow); pointer-events: none; } /* Bild-Fade fuer Text auf Fotos (Verlauf 2) */ .fv-fade { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--fv-radius-40); } .fv-fade::after { content: ""; position: absolute; inset: 0; background-image: var(--fv-gradient-image-fade); pointer-events: none; } /* Der bewusst dunkle Buehnen-Moment (Altklasse .is-stage, ALIAS bis Welle 3) */ .is-stage { background: var(--fv-nachtblau); color: var(--fv-weiss); --fv-fg: var(--fv-weiss); --fv-focus: var(--fv-rosa); --focus: var(--fv-rosa); --text: var(--fv-weiss); --text-muted: var(--dark-text-muted); --color-on-dark: var(--dark-text); --color-on-dark-muted: var(--dark-text-muted); --color-on-dark-subtle: var(--dark-text-subtle); --color-border-on-dark: var(--dark-line); } .is-stage :is(h1, h2, h3, h4) { color: var(--fv-weiss); } /* Helle Karten in dunklen Flaechen behalten dunkle Schrift und Nachtblau-Fokus */ :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) :is(.c-card, .fv-card, [class$="__card"], [class*="__card "], [class$="__item"][class*="c-pkg"], .c-faq__item, .u-light) { --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); --text: var(--fv-nachtblau); --text-muted: var(--fv-schiefer); --border: var(--fv-nebel); --link: var(--fv-nachtblau); --link-hover: var(--fv-nachtblau); --focus: var(--fv-nachtblau); color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) :is(.c-card, .fv-card, [class$="__card"], [class*="__card "]) :is(h2, h3, h4) { color: var(--fv-nachtblau); } /* ---------- Abstaende zwischen Sektionen ---------- Flaechen (Feld ground, Klasse is-{{ ground }}): hell|weiss (Grund) | papier|tint | flieder (Flieder hell) | nacht|dark | rosa | purpur. Zwei Folgesektionen mit gleicher Flaeche teilen sich einen Abstand; bei Wechsel behaelt jede ihren vollen Innenabstand. Musterseiten-Sektionen (.fv-muster, Flaeche ueber data-ground) sind ausgenommen und behalten immer ihren Abstand. Dunkle Sektionstypen ohne ground-Feld (facts, Wuerdigung) tragen .is-dark im Markup bzw. stehen hier in der Liste. */ .l-section:not(.is-tint, .is-papier, .is-dark, .is-nacht, .is-rosa, .is-purpur, .is-flieder, .c-award-detail--wuerdigung, [class*="fv-section--"], .fv-muster) + .l-section:not(.is-tint, .is-papier, .is-dark, .is-nacht, .is-rosa, .is-purpur, .is-flieder, .c-award-detail--wuerdigung, [class*="fv-section--"], .fv-muster), .l-section:is(.is-tint, .is-papier, .fv-section--papier) + .l-section:is(.is-tint, .is-papier, .fv-section--papier), .l-section:is(.is-dark, .is-nacht, .fv-section--nacht, .c-award-detail--wuerdigung) + .l-section:is(.is-dark, .is-nacht, .fv-section--nacht, .c-award-detail--wuerdigung), .l-section:is(.is-rosa, .fv-section--rosa) + .l-section:is(.is-rosa, .fv-section--rosa), .l-section:is(.is-flieder, .fv-section--flieder) + .l-section:is(.is-flieder, .fv-section--flieder), .l-section:is(.is-purpur, .fv-section--purpur) + .l-section:is(.is-purpur, .fv-section--purpur) { padding-top: 0; } /* direkt unter einem Seitenkopf etwas naeher heran (nur auf hellem Grund) */ .c-page-hero + .l-section:is(:not(.is-tint, .is-papier, .is-dark, .is-nacht, .is-rosa, .is-purpur, .is-flieder, [class*="fv-section--"]), .is-weiss, .is-hell) { padding-top: var(--fv-space-64); } /* Seitenkopf ist Papier: folgt eine Papier-Sektion, läuft die Fläche weiter, ohne doppelten Abstand (abschluss-todo: Sektionsfolge) */ .c-page-hero + .l-section.is-papier { padding-top: 0; } .c-evh + .l-section:is(:not(.is-tint, .is-papier, .is-dark, .is-nacht, .is-rosa, .is-purpur, .is-flieder, [class*="fv-section--"]), .is-weiss, .is-hell) { padding-top: var(--fv-section-y); } @media (max-width: 767px) { .c-page-hero + .l-section:is(:not(.is-tint, .is-papier, .is-dark, .is-nacht, .is-rosa, .is-purpur, .is-flieder, [class*="fv-section--"]), .is-weiss, .is-hell) { padding-top: var(--fv-space-48); } } /* Responsive-QA Runde 8: Raster mit genau drei Eintraegen im Zweierraster (Tablet hoch): dritter Eintrag quer statt verwaist */ @media (min-width: 560px) and (max-width: 899px) { .c-cards__grid > li:nth-child(3):last-child, .c-process__list > li:nth-child(3):last-child, .c-contact__grid > li:nth-child(3):last-child { grid-column: 1 / -1; } } @media (min-width: 900px) and (max-width: 1024px) { .c-contact__grid > li:nth-child(3):last-child { grid-column: 1 / -1; } } /* Fortschrittsleisten der Flow-Widgets: Trefferflaeche auf Touch mindestens 32px */ @media (pointer: coarse) { .c-widget .c-widget__pbtn { padding-block: 11px; } } /* Auswahlkarten im Widget: ungerade letzte Karte laeuft ueber beide Spalten (final-qa: nach Typ zaehlen, die im fieldset verschob nth-child, gerade Anzahl bekam eine Luecke) */ @media (min-width: 561px) { .c-widget .c-widget__choices > .c-widget__choice:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } } /* Responsive-QA Runde 8: Hinweistexte auf sehr breiten Screens begrenzen (Linienlaenge) */ .c-exh__note, .c-awards__note, .c-winners__note, .c-jbk__note, .c-ics-sub__text { max-width: 72ch; } /* Responsive-QA Runde 8: sehr breite Screens (ab 2000px) etwas groessere Typo, Container bleibt unveraendert */ @media (min-width: 2000px) { html { font-size: 112.5%; } } /* components.css */ /* Komponenten (Brandmanual v1.0, Jelena 06.10.2026; Quelle 2ndhuman_jelena/in-arbeit/20261006-0939-brand-handoff*.md/.css) Projektstandard: .fv-btn, .fv-link, .fv-mark, .fv-tag, .fv-verbtag, .fv-card, .fv-faq, .fv-checklist, .fv-zwischenruf, .fv-icon, .fv-icon-tile, .fv-glow, .fv-fade. Bestehende .c-*-Klassen (c-btn, c-tag, c-verbpill, c-card, c-mark--verb) sind optisch auf diese Spezifikation umgestellt. Header, Navigation, Footer am Dateiende. Regeln: Farben nur ueber --fv-*-Tokens, keine Pillen, keine Kreise, keine Konturen, einziger Schatten = Kartenschatten. */ /* ===================================================================================================================== 1. Neue Basisklassen (1:1 aus der Handoff-CSS, Werte ueber Tokens aus css/tokens.css) ===================================================================================================================== */ /* ---- Markierung (Highlight): 1 bis 3 Woerter einer Headline, hoechstens eine pro Headline. R9: Box symmetrisch um die Versalhoehe (Schrift "Familjen Mark" = gleiche Datei mit angepassten Metriken, siehe tokens.css), gleiches Padding oben/unten, bei Umbruch je Zeile geklont; Headlines mit Markierung bekommen --fv-lh-marked. ---- */ .fv-mark { background-color: var(--fv-rosa); color: var(--fv-nachtblau); font-family: var(--fv-font-mark); padding: var(--fv-mark-pad-y) var(--fv-mark-pad-x); margin-inline: 0.02em; border-radius: var(--fv-radius-mark); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .fv-mark--purpur { background-color: var(--fv-purpur); color: var(--fv-weiss); } .fv-mark--nachtblau { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .fv-mark--violett { background-color: var(--fv-violett); color: var(--fv-weiss); } :is(h1, h2, h3, .fv-display, .fv-h1, .fv-h2, [class*="__headline"], [class*="__title"]):has(> .fv-mark, > .c-mark--verb) { line-height: max(var(--fv-lh-marked), 1.2); } /* Anmerkung #17 (Jelena): Markierung darf die Zeile darueber nicht beruehren. Box = 1,03 em + Padding; Zeilenhoehe 1,2 laesst ca. 0,1 em Luft. Markierung bricht nicht in zwei Boxen um (1 bis 3 Woerter), erst unter 360 px darf sie umbrechen. */ @media (min-width: 360px) { .fv-mark, .c-mark--verb { white-space: nowrap; } } /* Ausnahme 26.10.2026 (Jelena): nowrap gilt nur fuer KURZE Markierungen. Eine lange darf umbrechen, sonst schiebt sie sich aus ihrer Spalte und laeuft hinter Nachbarelemente - genau so lief die H1 auf /mitglied-werden/ hinter das Hero-Bild. box-decoration-break: clone steht oben schon in beiden Klassen, jede Zeile bekommt also ihren eigenen Kasten; die Gestaltung bleibt damit unveraendert, nur der Umbruch kommt dazu. Zwei Wege, absichtlich beide: 1. .fv-mark--umbruch setzen die Abschnitts-Vorlagen automatisch ab vier Woertern. 2. Die :has()-Regel faengt den Fall ab, dass die Markierung das EINZIGE Kind der Ueberschrift ist - dann ist sie zwangslaeufig die ganze Zeile und darf nie nowrap sein, unabhaengig von der Wortzahl. Dieselbe :has()-Technik wie vier Zeilen darueber. */ @media (min-width: 360px) { .fv-mark--umbruch, .c-mark--verb--umbruch, :is(h1, h2, h3, .fv-display, .fv-h1, .fv-h2, [class*="__headline"], [class*="__title"]):has(> .fv-mark:only-child) > .fv-mark, :is(h1, h2, h3, .fv-display, .fv-h1, .fv-h2, [class*="__headline"], [class*="__title"]):has(> .c-mark--verb:only-child) > .c-mark--verb { white-space: normal; } } /* ---- Button primaer: Nachtblau, Text Weiss Bold 16, Radius 12, Purpur-Pfeil-Kachel ---- Markup: Text */ .fv-btn { display: inline-flex; align-items: center; gap: var(--fv-btn-gap); padding: var(--fv-space-8) var(--fv-space-8) var(--fv-space-8) 20px; border: 0; border-radius: var(--fv-radius-12); background-color: var(--fv-nachtblau); color: var(--fv-weiss); font-family: var(--fv-font-sans); font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: 1.25; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } /* Mobil-QA 19.10.2026: sehr lange Button-Texte (z. B. "Geschaeftsstelle und Fachbereichsvereine" auf /verein) liefen bei 320-360px aus der Box, weil white-space:nowrap oben eine Zeile erzwingt. Unter 767px darf der Text umbrechen, der Pfeil bleibt dank align-items:center neben dem Text zentriert. */ @media (max-width: 767px) { .fv-btn { white-space: normal; text-align: left; } } .fv-btn__arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--fv-btn-arrow-size); block-size: var(--fv-btn-arrow-size); border-radius: var(--fv-radius-8); background-color: var(--fv-purpur); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); line-height: 1; transition: transform var(--fv-duration) var(--fv-easing); } .fv-btn__arrow .fv-icon { inline-size: 20px; block-size: 20px; } .fv-btn:hover, .fv-btn:active { background-color: var(--fv-nachtblau-hover); color: var(--fv-weiss); text-decoration: none; } .fv-btn:hover .fv-btn__arrow { transform: translateX(4px); } .fv-btn:active .fv-btn__arrow { transform: none; } .fv-btn:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } /* Auf dunklen Flaechen */ .fv-btn--on-dark { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .fv-btn--on-dark:hover, .fv-btn--on-dark:active { background-color: var(--fv-weiss-hover); color: var(--fv-nachtblau); } /* automatisch auf dunklen Flaechen (ausser in hellen Karten, die layout.css dort setzt) */ :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) .fv-btn { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) .fv-btn:is(:hover, :active) { background-color: var(--fv-weiss-hover); color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) :is(.c-card, .fv-card, [class$="__card"], [class*="__card "]) .fv-btn { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } :is(.is-dark, .is-nacht, .is-purpur, .fv-section--nacht, .fv-section--purpur) :is(.c-card, .fv-card, [class$="__card"], [class*="__card "]) .fv-btn:is(:hover, :active) { background-color: var(--fv-nachtblau-hover); color: var(--fv-weiss); } /* ---- Sekundaer: Textlink Bold mit Rosa-Unterstrich ---- */ .fv-link { color: var(--fv-fg); font-weight: var(--fv-fw-bold); text-decoration-line: underline; text-decoration-color: var(--fv-link-underline); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); text-decoration-skip-ink: none; } .fv-link:hover { color: var(--fv-fg); text-decoration-color: currentColor; text-decoration-thickness: var(--fv-underline-thickness); } /* R9: Hover nur Farbe, Staerke bleibt */ .fv-link:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; border-radius: 2px; } /* ---- Tag: Nachtblau, Weiss Bold 13, Radius 10 ---- */ .fv-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--fv-radius-10); background-color: var(--fv-nachtblau); color: var(--fv-weiss); font-family: var(--fv-font-sans); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; text-transform: none; letter-spacing: 0; white-space: nowrap; } /* ---- Verb-Tag: Verb als Text, 10-px-Farbkachel (Radius 3) davor. verbinden ---- */ .fv-verbtag { --fv-verb: var(--fv-verb-foerdern); --fv-verb-text: var(--fv-nachtblau); display: inline-flex; align-items: center; gap: var(--fv-space-8); color: var(--fv-verb-text); font-family: var(--fv-font-sans); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; } .fv-verbtag::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; background-color: var(--fv-verb); } /* ---- Karte: Weiss, Radius 24 (gross 28), Padding 28 bis 36, Kartenschatten, keine Rahmenlinie ---- */ .fv-card { background-color: var(--fv-weiss); color: var(--fv-nachtblau); border: 0; border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); box-shadow: var(--fv-shadow-card); --fv-focus: var(--fv-nachtblau); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); } .fv-card--gross { border-radius: var(--fv-radius-28); } /* klickbare Karte: Titel bekommt Rosa-Unterstrich, kein zusaetzlicher Schatten */ a.fv-card { display: block; text-decoration: none; } a.fv-card :is(h2, h3, h4) { text-decoration: underline var(--fv-underline-thickness) transparent; text-underline-offset: var(--fv-underline-offset); text-decoration-skip-ink: none; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } a.fv-card:hover :is(h2, h3, h4) { text-decoration-color: var(--fv-rosa); } /* ---- FAQ-Karte:
Frage
Antwort
---- */ .fv-faq { background-color: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); box-shadow: var(--fv-shadow-card); --fv-focus: var(--fv-nachtblau); } .fv-faq > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fv-space-16); padding: var(--fv-card-padding); color: var(--fv-purpur); font-size: 1.5rem; /* 24 px */ font-weight: var(--fv-fw-bold); line-height: 1.2; cursor: pointer; list-style: none; border-radius: var(--fv-radius-24); } .fv-faq > summary::-webkit-details-marker { display: none; } .fv-faq > summary::after { content: "+"; flex: none; inline-size: 1em; text-align: center; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .fv-faq[open] > summary::after { content: "\2212"; } .fv-faq > summary:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .fv-faq__answer { padding: 0 var(--fv-card-padding) var(--fv-card-padding); font-size: 1.125rem; line-height: var(--fv-lh-body); color: var(--fv-nachtblau); } .fv-faq__answer > :first-child { margin-top: 0; } .fv-faq__answer > :last-child { margin-bottom: 0; } .fv-faq + .fv-faq { margin-top: var(--fv-fuge); } /* ---- Checkliste: Purpur-Kachel 32 (Radius 8) mit weissem Lucide-check 20, Text Medium 20 ---- */ .fv-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-16); } .fv-checklist > li { position: relative; min-block-size: 32px; padding-inline-start: 48px; /* 32 Kachel + 16 Abstand */ padding-block-start: 2px; color: var(--fv-nachtblau); font-size: 1.25rem; /* 20 px */ font-weight: var(--fv-fw-medium); line-height: 1.4; } .fv-checklist > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 32px; block-size: 32px; border-radius: var(--fv-radius-8); background-color: var(--fv-purpur); } .fv-checklist > li::after { content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 6px; inline-size: 20px; block-size: 20px; background-color: var(--fv-weiss); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; } .fv-section--nacht .fv-checklist > li, .fv-section--purpur .fv-checklist > li { color: var(--fv-weiss); } /* ---- Zwischenruf (R8): Familjen Medium 500, gross (24/32), nicht kursiv, Purpur auf hell, Rosa auf Nachtblau/Purpur ---- */ .fv-zwischenruf { font-family: var(--fv-font-sans); font-style: normal; font-weight: var(--fv-fw-zwischenruf); font-size: var(--fv-fs-zwischenruf); line-height: var(--fv-lh-zwischenruf); letter-spacing: var(--fv-ls-zwischenruf); text-wrap: balance; color: var(--fv-purpur); } .fv-section--nacht .fv-zwischenruf, .is-dark .fv-zwischenruf, .is-nacht .fv-zwischenruf, .fv-section--purpur .fv-zwischenruf, .is-purpur .fv-zwischenruf { color: var(--fv-rosa); } /* Purpur auf Rosa reicht nicht (ca. 2,8:1): dort Nachtblau */ .fv-section--rosa .fv-zwischenruf, .is-rosa .fv-zwischenruf { color: var(--fv-nachtblau); } /* ---- Icons (Lucide 1.52.0, ISC, assets/icons/lucide/). Inline per {{ icon | icon('mail') }}, Farbe nur ueber color ---- */ .fv-icon { display: inline-block; flex: none; inline-size: 1.25em; block-size: 1.25em; vertical-align: -0.2em; stroke: currentColor; } /* ---- Freistehendes Icon (R6): ohne Kachel, Linien-Icon Nachtblau (auf dunkel Weiss), 32 / 40 / 48, Strich 1,75. {{ icon | icon }} oder Klasse direkt am SVG. Oeffentliche Seiten statt .fv-icon-tile. ---- */ .fv-icon--free { --icon: 40px; display: inline-flex; flex: none; inline-size: var(--icon); block-size: var(--icon); color: var(--fv-nachtblau); } .fv-icon--free .fv-icon, svg.fv-icon--free { inline-size: 100%; block-size: 100%; vertical-align: 0; stroke-width: 1.75; } .fv-icon--free-32 { --icon: 32px; } .fv-icon--free-40 { --icon: 40px; } .fv-icon--free-48 { --icon: 48px; } :is(.fv-section--nacht, .fv-section--purpur, .is-dark, .is-nacht, .is-purpur, .is-stage, .c-footer) .fv-icon--free { color: var(--fv-weiss); } :is(.fv-section--nacht, .fv-section--purpur, .is-dark, .is-nacht, .is-purpur) :is(.c-card, .fv-card, [class$="__card"]) .fv-icon--free { color: var(--fv-nachtblau); } /* ---- Icon-Kachel: 48 / 64 / 96, Radius 22 %, Flaeche in Verbfarbe, Icon 50 %. {{ icon | icon('award') }} ---- */ .fv-icon-tile { --tile: 64px; --fv-tile-bg: var(--fv-nachtblau); --fv-tile-fg: var(--fv-weiss); display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--tile); block-size: var(--tile); border-radius: var(--fv-radius-icon-tile); background-color: var(--fv-tile-bg); color: var(--fv-tile-fg); } .fv-icon-tile .fv-icon { inline-size: 50%; block-size: 50%; vertical-align: 0; } .fv-icon-tile--48 { --tile: 48px; } .fv-icon-tile--64 { --tile: 64px; } .fv-icon-tile--96 { --tile: 96px; } .fv-icon-tile--papier { --fv-tile-bg: var(--fv-papier); --fv-tile-fg: var(--fv-nachtblau); } /* Verbfarben fuer Verb-Tag und Icon-Kachel (Abschnitt 8.4 bzw. Brand-Assets 3) */ :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="foerdern"] { --fv-verb: var(--fv-verb-foerdern); --fv-verb-text: var(--fv-nachtblau); } :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="verbinden"] { --fv-verb: var(--fv-verb-verbinden); --fv-verb-text: var(--fv-purpur); } :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="entwickeln"] { --fv-verb: var(--fv-verb-entwickeln); --fv-verb-text: var(--fv-violett); } :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="unterstuetzen"] { --fv-verb: var(--fv-verb-unterstuetzen); --fv-verb-text: var(--fv-nachtblau); } :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="werben"] { --fv-verb: var(--fv-verb-werben); --fv-verb-text: var(--fv-nachtblau); } .fv-icon-tile[data-verb="foerdern"] { --fv-tile-bg: var(--fv-nachtblau); --fv-tile-fg: var(--fv-weiss); } .fv-icon-tile[data-verb="entwickeln"] { --fv-tile-bg: var(--fv-violett); --fv-tile-fg: var(--fv-weiss); } .fv-icon-tile[data-verb="verbinden"] { --fv-tile-bg: var(--fv-purpur); --fv-tile-fg: var(--fv-weiss); } .fv-icon-tile[data-verb="unterstuetzen"] { --fv-tile-bg: var(--fv-rosa); --fv-tile-fg: var(--fv-nachtblau); } .fv-icon-tile[data-verb="werben"] { --fv-tile-bg: var(--fv-pflaume); --fv-tile-fg: var(--fv-nachtblau); } /* Auf dunklen Flaechen: Text Weiss, Nachtblau-Kachel wird Weiss */ :is(.fv-section--nacht, .fv-section--purpur, .is-dark, .is-nacht, .is-purpur, .c-footer) :is(.fv-verbtag, .c-tag[data-verb], .c-verbpill) { --fv-verb-text: var(--fv-weiss); } :is(.fv-section--nacht, .is-dark, .is-nacht, .c-footer) :is(.fv-verbtag, .c-tag, .c-verbpill)[data-verb="foerdern"] { --fv-verb: var(--fv-weiss); } :is(.fv-section--nacht, .is-dark, .is-nacht) .fv-icon-tile[data-verb="foerdern"] { --fv-tile-bg: var(--fv-weiss); --fv-tile-fg: var(--fv-nachtblau); } .fv-section--rosa :is(.fv-verbtag, .c-tag[data-verb], .c-verbpill) { --fv-verb-text: var(--fv-nachtblau); } :is(.fv-section--nacht, .is-dark, .is-nacht, .fv-section--purpur, .is-purpur) .fv-tag { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } /* ---- Glow (Verlauf 1) und Bild-Fade (Verlauf 2) ---- */ .fv-glow { position: relative; isolation: isolate; } .fv-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: var(--fv-glow); pointer-events: none; } .fv-glow > * { position: relative; } .fv-fade { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--fv-radius-40); } .fv-fade::after { content: ""; position: absolute; inset: 0; background-image: var(--fv-gradient-image-fade); pointer-events: none; } /* ===================================================================================================================== 2. Bestehende Projektklassen, optisch auf das Manual umgestellt ===================================================================================================================== */ /* ---- .c-btn: primaer = .fv-btn (Pfeil-Kachel per ::after), --ghost/--outline = Sekundaer als Textlink (keine Kontur). --primary/--accent/--light sind auf hellen Flaechen gleich; auf dunklen Flaechen wird --light zu "auf dunkel". ---- */ .c-btn { display: inline-flex; align-items: center; gap: var(--fv-btn-gap); padding: var(--fv-space-8) var(--fv-space-8) var(--fv-space-8) 20px; border: 0; border-radius: var(--fv-radius-12); background-color: var(--fv-nachtblau); color: var(--fv-weiss); font-family: var(--fv-font-sans); font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: 1.25; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-btn::after { content: "\2192"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; inline-size: var(--fv-btn-arrow-size); block-size: var(--fv-btn-arrow-size); border-radius: var(--fv-radius-8); background-color: var(--fv-purpur); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); line-height: 1; transition: transform var(--fv-duration) var(--fv-easing); } .c-btn:has(.fv-btn__arrow)::after { content: none; } /* R2: genau ein Pfeil je Button. Die Pfeil-Kachel (.fv-btn__arrow bzw. .c-btn::after) ist der einzige Pfeil; zusaetzliche Icons (extern, arrow-up-right, arrow-right) im Label werden ausgeblendet. Externe Links: Hinweis nur per .u-visually-hidden. */ :is(.fv-btn, .c-btn) > :is(.fv-icon--external-link, .fv-icon--arrow-up-right, .fv-icon--arrow-right, .fv-icon--move-up-right, .fv-icon--square-arrow-out-up-right) { display: none; } .fv-btn::after, .fv-btn::before { content: none; } .fv-btn.c-btn:not(:has(.fv-btn__arrow))::after { content: "\2192"; } .c-btn:hover { text-decoration: none; } .c-btn:hover::after { transform: translateX(4px); } .c-btn:active { transform: none; } .c-btn:active::after { transform: none; } /* alter Fuell-Wisch aus motion.css: im Manual nicht vorgesehen */ .c-btn::before { content: none; display: none; } .c-btn--primary, .c-btn--accent, .c-btn--light { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .c-btn--primary:hover, .c-btn--accent:hover, .c-btn--light:hover, .c-btn--primary:active, .c-btn--accent:active, .c-btn--light:active { background-color: var(--fv-nachtblau-hover); color: var(--fv-weiss); } /* Sekundaer: Textlink Nachtblau Bold, Rosa-Unterstrich, ohne Pfeil-Kachel */ .c-btn--ghost, .c-btn--outline { padding: var(--fv-space-12) 0; background: none; color: var(--fv-nachtblau); text-decoration-line: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); text-decoration-skip-ink: none; } .c-btn--ghost::after, .c-btn--outline::after { content: none; } .c-btn--ghost:hover, .c-btn--outline:hover { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: var(--fv-underline-thickness); } /* Dunkle Flaechen. Bauteil-Regel (Karte 49, wie .fv-mark): jede eigene Panel-Klasse mit festem Nachtblau-/Purpur-/Violett-Hintergrund traegt sich hier ein, statt einen Einzel-Override zu bekommen. .c-pw__hero (Portal-Welcome-Hero, Purpur) ergaenzt am 13.10.2026, Kontrast-Fix Anmelden-Button. */ :is(.is-stage, .is-dark, .c-hero, .c-evh, .c-awards--stage, .fv-section--nacht, .fv-section--purpur, .c-footer, .c-pw__hero) .c-btn--light { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } :is(.is-stage, .is-dark, .c-hero, .c-evh, .c-awards--stage, .fv-section--nacht, .fv-section--purpur, .c-footer, .c-pw__hero) .c-btn--light:is(:hover, :active) { background-color: var(--fv-weiss-hover); color: var(--fv-nachtblau); } :is(.is-stage, .is-dark, .c-hero, .c-evh, .c-awards--stage, .fv-section--nacht, .fv-section--purpur, .c-footer, .c-pw__hero) :is(.c-btn--ghost, .c-btn--outline) { color: var(--fv-weiss); } :is(.is-stage, .is-dark, .is-nacht, .is-purpur, .c-hero, .c-evh, .c-awards--stage, .fv-section--nacht, .fv-section--purpur, .c-footer, .c-pw__hero) .fv-link { --fv-fg: var(--fv-weiss); } .c-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-12) var(--fv-space-24); margin: var(--fv-space-32) 0 0; } @media (prefers-reduced-motion: reduce) { .fv-btn, .fv-btn__arrow, .c-btn, .c-btn::after { transition: none; } .fv-btn:hover .fv-btn__arrow, .c-btn:hover::after { transform: none; } } /* Rubrik: normal geschrieben, ohne Versalien (Eyebrows sind laut Manual entfallen; Klasse bleibt fuer Altinhalte) */ .c-eyebrow, .c-rubrik { display: block; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; text-transform: none; color: var(--fv-schiefer); margin: 0 0 var(--fv-space-8); } .c-eyebrow::before, .c-rubrik::before { content: none; } /* ---- Tags: .c-tag[data-verb] und .c-verbpill = Verb-Tag; .c-tag ohne Verb = Tag (Nachtblau, Radius 10) ---- */ .c-tags { display: flex; flex-wrap: wrap; row-gap: var(--fv-space-8); column-gap: var(--fv-space-16); list-style: none; margin: 0 0 var(--fv-space-24); padding: 0; } .c-tag, .c-verbpill { --fv-verb: var(--accent, var(--fv-nachtblau)); --fv-verb-text: var(--fv-nachtblau); display: inline-flex; align-items: center; gap: var(--fv-space-8); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--fv-verb-text); font-family: var(--fv-font-sans); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; letter-spacing: 0; text-transform: none; } .c-tag::before, .c-verbpill::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; background-color: var(--fv-verb); } .c-tag:is(:not([data-verb]), [data-verb=""]) { padding: 6px 14px; border-radius: var(--fv-radius-10); background-color: var(--fv-nachtblau); color: var(--fv-weiss); white-space: nowrap; } .c-tag:is(:not([data-verb]), [data-verb=""])::before { content: none; } :is(.is-dark, .is-nacht, .c-footer, .fv-section--nacht) .c-tag:is(:not([data-verb]), [data-verb=""]) { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht, .is-purpur, .c-footer, .fv-section--nacht, .fv-section--purpur) :is(.c-tag[data-verb]:not([data-verb=""]), .c-verbpill) { color: var(--fv-weiss); } /* Hoechstens zwei Akzentfarben pro Flaeche: ab dem dritten Verb-Tag Kachel neutral */ .c-tags > .c-tag[data-verb]:nth-of-type(n+3)::before { background-color: var(--fv-nebel); } /* ---- Markierung im Inhalt ([[Wort]] -> ): Standard Rosa / Nachtblau wie .fv-mark ---- */ .c-mark--verb { background-color: var(--mark-bg, var(--fv-rosa)); color: var(--mark-on, var(--fv-nachtblau)); font-family: var(--fv-font-mark); padding: var(--fv-mark-pad-y) var(--fv-mark-pad-x); margin: 0 0.02em; border-radius: var(--fv-radius-mark); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .c-mark--unterstuetzen, .c-mark--rosa { --mark-bg: var(--fv-rosa); --mark-on: var(--fv-nachtblau); } .c-mark--verbinden, .c-mark--purpur { --mark-bg: var(--fv-purpur); --mark-on: var(--fv-weiss); } .c-mark--entwickeln, .c-mark--violett { --mark-bg: var(--fv-violett); --mark-on: var(--fv-weiss); } .c-mark--nachtblau { --mark-bg: var(--fv-nachtblau); --mark-on: var(--fv-weiss); } [data-verb="unterstuetzen"] .c-mark--verb:not(.c-mark--purpur, .c-mark--violett, .c-mark--nachtblau) { --mark-bg: var(--fv-rosa); --mark-on: var(--fv-nachtblau); } [data-verb="entwickeln"] .c-mark--verb:not(.c-mark--purpur, .c-mark--rosa, .c-mark--nachtblau) { --mark-bg: var(--fv-violett); --mark-on: var(--fv-weiss); } /* ---- Karte: Kartenschatten, keine Kontur (Radius und Flaeche setzt sections.css) ---- */ .c-card { border: 0; box-shadow: var(--fv-shadow-card); } /* Bildflaeche: frueher Farbverlauf in der Themenfarbe; Manual: Fotos ohne Farbfilter, keine bunten Verlaeufe */ .c-tone { position: relative; isolation: isolate; } .c-tone::after { content: none; } .c-tone img { filter: none; } .c-prose { font-size: var(--fv-fs-body); } .c-prose p, .c-prose ul { margin: 0 0 1em; } .c-prose ul { padding-left: 1.2em; } .c-prose li::marker { color: var(--fv-nachtblau); } /* [Platzhalter] aus dem Textentwurf sichtbar markieren (QA-Markierung, keine Gestaltung) */ .c-prose em, .c-ph { font-style: normal; font-size: .88em; color: var(--fv-schiefer); background: var(--fv-nebel); border-radius: var(--fv-radius-8); padding: 1px 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ===================================================================================================================== 3. Header (Hauptlogo auf Weiss, mind. 140 px, Schutzraum; keine Glasflaeche) ===================================================================================================================== */ .c-header { position: sticky; top: 0; z-index: 50; background: var(--fv-weiss); border-bottom: 1px solid var(--fv-nebel); } .c-header__inner { display: flex; align-items: center; gap: var(--fv-space-12); min-height: var(--header-h); } /* Schutzraum = Hoehe des Purpur-Quadrats (ca. 8,3 % der Logobreite); die SVG bringt selbst ca. 6 % Rand mit */ .c-header__logo { display: flex; align-items: center; margin-right: auto; flex: none; padding: var(--fv-space-8) var(--fv-space-12) var(--fv-space-8) 0; border-radius: var(--fv-radius-8); } .c-header__logo:focus-visible { outline-offset: 2px; } .c-header__mark { display: block; height: 64px; width: auto; min-width: 160px; } /* 64 px hoch = 189 px breit */ .c-nav { display: flex; align-items: center; flex: 1; gap: var(--fv-space-8); } .c-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 var(--fv-space-8) 0 auto; padding: 0; position: relative; } .c-nav__indicator { position: absolute; left: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); opacity: 0; z-index: 0; pointer-events: none; } .c-nav__item { position: relative; z-index: 1; display: flex; align-items: center; } .c-nav__link { position: relative; display: inline-block; padding: 10px 12px; white-space: nowrap; color: var(--fv-nachtblau); font-size: 1rem; font-weight: var(--fv-fw-semibold); text-decoration: none; letter-spacing: 0; } .c-nav__item--has-sub .c-nav__link { padding-right: 4px; } /* Aktiv-Balken in der Verbfarbe des Bereichs (site.nav verb_key), Radius 2 */ .c-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 3px; border-radius: 2px; background: var(--accent, var(--fv-nachtblau)); transform: scaleX(0); transform-origin: left; transition: transform var(--fv-duration) var(--fv-easing); } .c-nav__item--has-sub .c-nav__link::after { right: 4px; } .c-nav__link.is-active::after, .c-nav__item:hover .c-nav__link::after { transform: none; } .c-nav__link:hover { color: var(--fv-nachtblau); } .c-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; padding: 0; margin-right: 4px; border: 0; background: none; color: var(--fv-schiefer); cursor: pointer; border-radius: var(--fv-radius-8); transition: transform var(--fv-duration) var(--fv-easing), color var(--fv-duration); } .c-nav__item.is-open .c-nav__toggle { transform: rotate(180deg); color: var(--fv-nachtblau); } .c-nav__panel { position: absolute; top: calc(100% + 10px); left: -8px; min-width: 260px; padding: var(--fv-space-12); background: var(--fv-weiss); border-radius: var(--fv-radius-16); box-shadow: var(--fv-shadow-card); opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s linear .18s; } .c-nav__panel::before { content: ""; position: absolute; left: 20px; top: 12px; width: 28px; height: 6px; border-radius: 3px; background: var(--accent, var(--fv-nachtblau)); } /* tech-qa: Hover-Bruecke ueber dem Abstand zwischen Menuepunkt und Panel (sonst schliesst das Panel, wenn die Maus langsam nach unten faehrt) */ .c-nav__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; } .c-nav__item.is-open > .c-nav__panel, .c-nav__item--has-sub:hover > .c-nav__panel { opacity: 1; visibility: visible; transition: opacity .18s; } .c-nav__sub { list-style: none; margin: 0; padding: var(--fv-space-16) 0 0; } .c-nav__sublink { display: block; padding: 10px 12px; border-radius: var(--fv-radius-8); color: var(--fv-nachtblau); text-decoration: none; font-size: 0.9375rem; font-weight: var(--fv-fw-semibold); } .c-nav__sublink:hover, .c-nav__sublink[aria-current] { background: var(--fv-nebel); color: var(--fv-nachtblau); } .c-nav__sublink[aria-current] { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); } /* Service-Leiste oben (Unterstuetzen, Kontakt, Speedbuild) */ .c-topbar { background: var(--fv-papier); color: var(--fv-schiefer); font-size: var(--fv-fs-small); } .c-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fv-space-24); min-height: 38px; } .c-topbar__note { margin: 0; } .c-util { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .c-util__item { position: relative; display: flex; align-items: center; } .c-util__link { display: inline-block; padding: 8px 10px; color: inherit; font-weight: var(--fv-fw-semibold); text-decoration: none; border-radius: var(--fv-radius-8); } .c-topbar .c-util__link:hover, .c-topbar .c-util__link.is-active { color: var(--fv-nachtblau); } .c-topbar .c-util__link:hover, .c-topbar .c-util__link.is-active { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); } .c-topbar .c-nav__toggle { color: var(--fv-schiefer); height: 32px; width: 28px; margin-left: -8px; } /* Zielflaeche mind. 24x24 (WCAG 2.2) */ .c-topbar .c-nav__panel { top: calc(100% + 4px); left: auto; right: -8px; z-index: 60; } .c-util__item--lab > .c-util__link::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--fv-rosa); vertical-align: 0; } .c-topbar .c-util__item--lab > .c-util__link { color: var(--fv-nachtblau); } .c-nav .c-nav__utility { display: none; } @media (max-width: 1200px) { .c-topbar { display: none; } .c-nav .c-nav__utility { display: flex; flex-wrap: wrap; } } /* Header-CTA = .fv-btn (Markup in partials/header.html) */ .c-header__cta { flex: none; } .c-header__toggle { display: none; background: none; border: 0; padding: 12px; margin-right: -12px; cursor: pointer; border-radius: var(--fv-radius-8); color: var(--fv-nachtblau); } .c-header__burger, .c-header__burger::before, .c-header__burger::after { display: block; width: 24px; height: 2px; border-radius: 1px; background: var(--fv-nachtblau); position: relative; content: ""; transition: transform var(--fv-duration) var(--fv-easing), background-color var(--fv-duration); } .c-header__burger::before { position: absolute; top: -7px; left: 0; } .c-header__burger::after { position: absolute; top: 7px; left: 0; width: 16px; } .is-menu-open .c-header__burger { background: transparent; } .is-menu-open .c-header__burger::before { transform: translateY(7px) rotate(45deg); } .is-menu-open .c-header__burger::after { width: 24px; transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1320px) and (min-width: 1201px) { .c-nav__link { padding-inline: 9px; font-size: 0.9375rem; } .c-header__mark { height: 56px; } } /* tech-qa: 1201 bis 1279 px reicht der Platz nicht fuer alle Punkte in einer Zeile (Labels brachen mit Trennstrich um): enger setzen */ @media (max-width: 1279px) and (min-width: 1201px) { .c-nav__link { padding-inline: 7px; } .c-nav__item--has-sub .c-nav__link { padding-right: 2px; } .c-nav__toggle { width: 24px; margin-right: 2px; } .c-header__mark { min-width: 0; height: 50px; } .c-header__inner { gap: var(--fv-space-8); } } /* tech-qa: Anker-Spruenge auf dem Desktop: Header ist Servicezeile (38 px + 1 px Linie) plus Hauptzeile hoch */ @media (min-width: 1201px) { html { scroll-padding-top: calc(var(--header-h) + 39px + var(--fv-space-16)); } } /* tech-qa: --hdr-vis-Regel der Karrieretag-Unternavigation steht jetzt in css/sections/kt-subnav.css */ @media (max-width: 1200px) { /* mobil: Logo 54 px hoch (160 px Datei, ca. 145 px sichtbar) plus Schutzraum braucht 72 px Kopfhoehe */ .c-header { --header-h: 72px; } .c-header__toggle { display: block; } .c-header__mark { height: 54px; min-width: 160px; } .c-header__logo { padding-block: var(--fv-space-8); } .c-nav { display: none; position: fixed; inset: var(--header-h) 0 0; background: var(--fv-weiss); padding: var(--fv-space-8) var(--fv-page-margin) var(--fv-space-48); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; } /* tech-qa: Scroll-Sperre, solange das Vollbildmenue offen ist (Seite dahinter scrollte mit); Gutter verhindert Breitensprung */ html.is-menu-open { overflow: hidden; scrollbar-gutter: stable; } .c-nav__panel::after { display: none; } .is-menu-open .c-nav { display: flex; } .c-nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; } .c-nav__indicator { display: none; } .c-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--fv-nebel); } .c-nav__link { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 0 !important; font-size: 1.375rem; font-weight: var(--fv-fw-bold); letter-spacing: -0.01em; } .c-nav__link::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent, var(--fv-nachtblau)); flex: none; } .c-nav__link::after { display: none; } .c-nav__toggle { width: 48px; height: 48px; margin: 0; } .c-nav__panel { position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; box-shadow: none; padding: 0 0 12px 24px; background: none; } .c-nav__panel::before { display: none; } .c-nav__item.is-open > .c-nav__panel { display: block; } .c-nav__sub { padding: 0; } .c-nav__utility { border: 0; padding: var(--fv-space-24) 0 0; gap: var(--fv-space-8); } .c-nav__utility .c-util__item { flex-wrap: wrap; } .c-nav__utility .c-util__link { padding: 10px 14px; background: var(--fv-nebel); color: var(--fv-nachtblau); font-size: 1rem; border-radius: var(--fv-radius-12); } .c-nav__utility .c-nav__panel { padding-left: 8px; } .c-nav__utility .c-util__link.is-active { background: var(--fv-nachtblau); color: var(--fv-weiss); } } /* CTA-Kopie im Menue (partials/nav.html): nur mobil sichtbar */ .c-nav__cta { display: none; } @media (max-width: 1200px) { .c-nav .c-nav__cta { display: inline-flex; align-self: flex-start; margin-top: var(--fv-space-32); } } @media (max-width: 640px) { /* Logo (mind. 140 px) + Suche + Menue: der Header-CTA wandert ins Menue */ .c-header__inner { gap: var(--fv-space-4); } .c-header__cta { display: none; } } /* Mobile Navigation ohne JavaScript (Audit-Punkt 25, 21.10.2026): Der Hamburger-Knopf setzt nur die Klasse "is-menu-open" per JavaScript (main.js) - ohne Skript blieb ".c-nav { display: none }" von oben dauerhaft stehen und der sichtbare Knopf tat nichts. Loesung im bestehenden Stil dieses Projekts (vgl. die "@media (scripting: none)"-Rueckfallschichten bei c-sawir/sb-logo-3d weiter oben), bewusst OHNE
/- oder Checkbox-Hack: das bestehende Markup (partials/nav.html.twig, partials/header.html.twig) wird nicht umgebaut, nur die eine Bedingung "scripting: none" macht aus dem eingeklappten Vollbildmenue ein immer offenes, in den normalen Lesefluss eingereihtes Menue direkt unter der Kopfzeile. Tastaturbedienung und Fokusreihenfolge bleiben erhalten, weil dadurch nichts mehr versteckt oder per JS umsortiert wird: jeder Link steht normal im Dokumentfluss und ist per Tab in Lesereihenfolge erreichbar, Enter aktiviert ihn wie jeden Link. Gleichwertiger Zustand fuer Screenreader statt aria-expanded: Haupt- und Untermenue-Knoepfe (.c-header__toggle, .c-nav__toggle) wirken ohne JavaScript nicht und werden deshalb ausgeblendet, statt einen Knopf mit nie wechselndem aria-expanded="false" anzubieten - es gibt nichts mehr Ein-/Auszuklappen, weil die Untermenues hier direkt sichtbar sind. */ @media (scripting: none) and (max-width: 1200px) { .c-header__inner { flex-wrap: wrap; } .c-header__toggle { display: none; } .c-nav { display: flex; position: static; inset: auto; flex: 1 1 100%; order: 10; padding: var(--fv-space-16) 0 var(--fv-space-24); overflow: visible; } .c-nav__toggle { display: none; } .c-nav__panel { display: block; position: static; width: 100%; min-width: 0; opacity: 1; visibility: visible; box-shadow: none; padding: 0 0 12px 24px; background: none; } .c-nav__panel::before { display: none; } } /* ===================================================================================================================== 4. Footer (Nachtblau, Negativ-Logo mind. 240 px, Text Weiss, Links Weiss mit Rosa-Unterstrich; keine Logo-Kachel) ===================================================================================================================== */ .c-footer { position: relative; overflow: hidden; background: var(--fv-nachtblau); color: var(--fv-weiss); padding-block: var(--fv-space-96) var(--fv-space-32); font-size: 0.9375rem; --text: var(--fv-weiss); --text-muted: var(--fv-weiss); --border: color-mix(in srgb, var(--fv-weiss) 18%, transparent); --focus: var(--fv-rosa); --fv-focus: var(--fv-rosa); --fv-fg: var(--fv-weiss); --fv-fg-muted: var(--fv-weiss); --fv-glow: var(--fv-gradient-glow); } .c-footer > .l-container { position: relative; z-index: 1; } .c-footer a:not(.fv-btn, .c-btn) { color: var(--fv-weiss); text-decoration-line: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); } .c-footer a:not(.fv-btn, .c-btn):hover { color: var(--fv-weiss); text-decoration-color: var(--fv-weiss); } .c-footer .c-footer__logo { text-decoration: none; } /* Newsletter-Karte im Footer ist hell: Links dort Nachtblau mit Rosa-Unterstrich */ .c-footer .c-nl a:not(.fv-btn, .c-btn), .c-footer .c-nl a:not(.fv-btn, .c-btn):hover { color: var(--fv-nachtblau); } /* Deko: zwei Bausteine (Purpur, Rosa) mit Fuge; bildet die Bildmarke nicht nach, hoechstens zwei Akzentfarben */ .c-footer__blocks { position: absolute; z-index: 1; right: max(var(--gutter), calc((100vw - var(--container-max)) / 2)); top: var(--fv-space-96); width: 168px; height: 96px; pointer-events: none; } .c-footer__blocks span { position: absolute; display: none; } .c-footer__blocks span:nth-child(2) { display: block; right: 0; top: 0; width: 64px; height: 64px; border-radius: var(--fv-radius-16); background: var(--fv-purpur); } .c-footer__blocks span:nth-child(3) { display: block; right: 80px; top: 32px; width: 88px; height: 48px; border-radius: var(--fv-radius-12); background: var(--fv-rosa); } .c-footer__lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-24) var(--fv-space-48); padding-bottom: var(--fv-space-64); margin-bottom: var(--fv-space-64); border-bottom: 1px solid var(--border); padding-right: 200px; } .c-footer__claim { margin: 0; max-width: 18ch; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); font-weight: var(--fv-fw-bold); color: var(--fv-weiss); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } .c-footer__grid { position: relative; display: grid; gap: var(--fv-space-48) var(--fv-space-32); grid-template-columns: 1fr; } @media (min-width: 640px) { .c-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1025px) { .c-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } } /* Negativ-Logo: mind. 240 px breit, Schutzraum ca. 21 px rundum */ .c-footer__logo { display: inline-block; margin: calc(-1 * var(--fv-space-24)) 0 0 calc(-1 * var(--fv-space-12)); padding: var(--fv-space-24) var(--fv-space-12); border-radius: var(--fv-radius-8); } .c-footer__mark { display: block; width: 264px; min-width: 240px; height: auto; } .c-footer__blurb { max-width: 42ch; margin: 0; } .c-footer__contact { display: grid; gap: var(--fv-space-8); margin-top: var(--fv-space-24); font-style: normal; font-size: 0.9375rem; } .c-footer__contact > span:first-child { color: var(--fv-weiss); font-weight: var(--fv-fw-semibold); } .c-footer__ci { display: flex; align-items: flex-start; gap: var(--fv-space-12); } .c-footer__ci .fv-icon { inline-size: 20px; block-size: 20px; margin-top: 1px; color: var(--fv-rosa); } .c-footer__title { display: block; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); letter-spacing: 0; text-transform: none; color: var(--fv-weiss); margin: 0 0 var(--fv-space-24); } /* 26.10.2026 (Karte 125): Die Profil-Links stehen im Markenblock UNTER der Anschrift, nicht am Anfang einer eigenen Spalte. Dort fehlt dem Titel der Abstand nach oben, den die Spaltentitel durch die Grid-Luecke bekommen - ohne ihn klebt "Folgen" an der Mailzeile. Reine Abstandsangabe mit dem vorhandenen Abstands-Token, keine neue Gestaltung. */ .c-footer__social-title { margin-block-start: var(--fv-space-32); } /* Die Profil-Links zeigen nur das Markenzeichen, nebeneinander in einer Zeile. min-inline-size/min-block-size 44px: Mindestgroesse einer Klickflaeche, damit der Link auch mit dem Finger sicher zu treffen ist - das Symbol selbst ist nur gut 20px gross. Der sichtbare Fokus kommt aus der globalen :focus-visible-Regel weiter oben, Farbe und Hover-Verhalten aus ".c-footer a:not(.fv-btn, .c-btn)" - beides also wie bei jedem anderen Footer-Link, ohne Sonderregel. */ .c-footer__social { /* Beide Masse als Variablen, weil der Ausgleich unten mit ihnen rechnet: aendert sich eines, stimmt die Ausrichtung weiter. */ --social-klick: 44px; /* Mindestgroesse der Klickflaeche */ --social-icon: 20px; /* Groesse des Zeichens, wie .c-footer__ci .fv-icon */ display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8); list-style: none; padding: 0; /* Das Zeichen sitzt in der Mitte der 44px-Flaeche, also 12px vom linken Rand. Ohne Ausgleich staende es genau diese 12px weiter rechts als die Ueberschrift und die Kontaktzeichen darueber (Befund Jelena, 26.10.2026). Dieselbe Rechnung nach oben: sonst waere der Abstand zur Ueberschrift um 12px groesser als bei den Spaltentiteln und ihren Links. Die Klickflaeche bleibt dabei unveraendert 44x44 - verschoben wird die Liste, nicht die Flaeche. */ margin: calc((var(--social-klick) - var(--social-icon)) / -2) 0 0 calc((var(--social-klick) - var(--social-icon)) / -2); } .c-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--social-klick); min-block-size: var(--social-klick); } /* Simple-Icons sind flaechig gezeichnet, die uebrigen Symbole des Themes mit Konturlinie. .fv-icon setzt "stroke: currentColor" - ohne das Abschalten bekaemen die Markenzeichen eine zusaetzliche Kontur und wuerden zulaufen. */ .fv-icon--brand { stroke: none; fill: currentColor; } /* Gleiche Groesse wie die Kontaktzeichen darueber (Vorgabe Jelena). Die stehen eine Zeile zuvor fest auf 20px (.c-footer__ci .fv-icon) - ohne diese Angabe waeren die Markenzeichen 18,75px, weil .fv-icon sonst 1.25em rechnet und die Schriftgroesse hier eine andere ist. Die FARBE wird bewusst NICHT mitgenommen: die Kontaktzeichen sind rosa, die Profil-Links sollen aussehen wie die uebrigen Footer-Links, also weiss (geerbt ueber currentColor). */ .c-footer__social .fv-icon { inline-size: var(--social-icon); block-size: var(--social-icon); } /* Hover: nachgemessen, dass die geerbte Regel hier WIRKUNGSLOS ist. Die uebrigen Footer-Links zeigen beim Ueberfahren einen Wechsel der Unterstrich-Farbe von Rosa auf Weiss - unter einem Link, der nur ein SVG enthaelt, zeichnet der Browser aber gar keinen Unterstrich. Vorher/Nachher-Aufnahme war pixelgleich, es gab also ueberhaupt keine Rueckmeldung. Stattdessen wechselt das Zeichen selbst auf Rosa: dieselbe Akzentfarbe, die der Footer fuer die Unterstriche und fuer die Kontaktzeichen schon benutzt, also keine neue Gestaltung. Der sichtbare Fokus bleibt die globale :focus-visible-Regel. */ .c-footer__social a:hover .fv-icon { color: var(--fv-rosa); } .c-footer__links, .c-footer__legal { list-style: none; margin: 0; padding: 0; } .c-footer__links li { margin-bottom: var(--fv-space-12); } /* Von Hand ergaenzt 21.10.2026 (Audit-Fund, "Footer-Links haben teils nur 17 bis 18 px Höhe"): als reine Inline-Links (font-size 0.9375rem) war die tatsaechliche Klickflaeche nur die Zeichenhoehe, nicht die Zeilenhoehe. Gleiches Muster wie .c-crumbs a (Zeile 1110): auf inline-flex mit Mindesthoehe 24 px (WCAG 2.2, 2.5.8 Target Size) umgestellt, ohne das optische Erscheinungsbild zu aendern. Bewusst nicht am breiten ".c-footer a:not(...)" (Zeile 991) gemacht, das auch .c-footer__logo trifft (eigene Groesse/Schutzraum). */ .c-footer__links a, .c-footer__legal a, .c-footer__ci a { display: inline-flex; align-items: center; min-height: 24px; margin-block: -1px; } .c-footer__note { margin: var(--fv-space-48) 0 0; font-size: var(--fv-fs-small); color: var(--fv-weiss); } .c-footer__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fv-space-8) var(--fv-space-32); margin-top: var(--fv-space-32); padding-top: var(--fv-space-24); border-top: 1px solid var(--border); font-size: var(--fv-fs-small); } .c-footer__copy { margin: 0; } .c-footer__legal { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-24); margin-right: auto; } .c-footer__fh { color: var(--fv-weiss); } @media (max-width: 767px) { .c-footer { padding-block: var(--fv-space-64) var(--fv-space-24); } .c-footer__lead { padding-right: 0; padding-top: 112px; } .c-footer__blocks { left: var(--gutter); right: auto; top: var(--fv-space-64); } .c-footer__blocks span:nth-child(2) { right: auto; left: 104px; } .c-footer__blocks span:nth-child(3) { right: auto; left: 0; } } /* sections.css */ /* Globale Sektions-Bausteine (von allen Bereichen genutzt): Sektionskopf, Seitenkopf (page-intro), Karten, Blockmasken. Sektionsspezifisches CSS liegt in css/sections/.css. */ /* ---- Sektionskopf ---- */ .c-section-head { max-width: 760px; margin-bottom: var(--fv-space-48); } .c-section-head__title { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); margin-bottom: 0; text-wrap: balance; } .c-section-head__intro { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--text-muted); max-width: 60ch; } .c-section-head--center { margin-inline: auto; text-align: center; } .c-section-head--center .c-eyebrow { justify-content: center; } .c-section-head--center .c-section-head__intro { margin-inline: auto; } .c-section-head--split { max-width: none; display: grid; gap: var(--fv-space-16) var(--fv-space-48); align-items: end; } @media (min-width: 900px) { .c-section-head--split { grid-template-columns: 1.1fr 1fr; } .c-section-head--split .c-section-head__intro { margin: 0; } } /* ---- Seitenkopf Unterseiten (page-intro), Brandmanual v1.0: Papierflaeche, H1 (keine Display-Groesse), Lead (kein Verb-Tag, R1), rechts drei ruhige Bausteine mit Fuge 16 (Nachtblau, Verbfarbe der Seite, Nebel), keine Verlaeufe, keine Konturen ---- */ .c-page-hero { --ph-accent: var(--fv-verb-verbinden); position: relative; overflow: hidden; background-color: var(--fv-papier); color: var(--fv-nachtblau); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); --fv-focus: var(--fv-nachtblau); --text: var(--fv-nachtblau); --text-muted: var(--fv-schiefer); padding-block: var(--fv-space-32) var(--fv-space-96); } [data-verb="foerdern"] .c-page-hero { --ph-accent: var(--fv-rosa); } [data-verb="verbinden"] .c-page-hero { --ph-accent: var(--fv-verb-verbinden); } [data-verb="unterstuetzen"] .c-page-hero { --ph-accent: var(--fv-verb-unterstuetzen); } [data-verb="entwickeln"] .c-page-hero { --ph-accent: var(--fv-verb-entwickeln); } [data-verb="werben"] .c-page-hero { --ph-accent: var(--fv-verb-werben); } .c-page-hero__inner { position: relative; z-index: 1; } .c-page-hero__inner > :not(.c-crumbs) { max-width: min(760px, 60%); } .c-page-hero__headline { margin: 0 0 var(--fv-space-24); color: var(--fv-nachtblau); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); text-wrap: balance; } .c-page-hero__meta { margin: 0 0 var(--fv-space-16); color: var(--fv-schiefer); font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; } .c-page-hero__text { margin: 0; max-width: 58ch; color: var(--fv-nachtblau); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); text-wrap: pretty; } .c-page-hero__tags, .c-page-hero .c-tags { display: flex; flex-wrap: wrap; gap: var(--fv-space-8) var(--fv-space-16); margin: var(--fv-space-24) 0 0; padding: 0; list-style: none; } /* R1: kein automatischer Verb-Tag mehr im Seitenkopf (Verb nur ueber Bausteinfarbe). Altmarkup bleibt unsichtbar. */ .c-page-hero__verb { display: none; } /* R1 global: Verb-Tag-Zeilen (ul.c-vtags, Verb-Tag-Listen) in Heros und Seitenkoepfen erscheinen nicht als Ueberzeile. Sektionsbesitzer raeumen ihr Markup selbst auf; diese Regel ist das Sicherheitsnetz. */ :is(.c-page-hero, .c-evh, .c-prize-hero, .c-hero, .c-awards--stage) :is(.c-vtags, .c-page-hero__verb) { display: none !important; } .c-page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-32); margin: var(--fv-space-32) 0 0; } /* Bausteine rechts: 360 x 264, Fuge 16, Radius 24/20 */ .c-page-hero__shapes { position: absolute; z-index: 0; right: max(var(--fv-page-margin), calc((100vw - var(--fv-content-max)) / 2)); top: 50%; width: clamp(240px, 26vw, 360px); aspect-ratio: 360 / 264; transform: translateY(-38%); } .c-page-hero__shapes span { position: absolute; border-radius: var(--fv-radius-24); } .c-page-hero__shapes span:nth-child(1) { left: 0; top: 0; width: 60%; height: 57.6%; background-color: var(--fv-nachtblau); } .c-page-hero__shapes span:nth-child(2) { left: 64.4%; top: 15.2%; width: 35.6%; height: 42.4%; border-radius: var(--fv-radius-16); background-color: var(--ph-accent); } .c-page-hero__shapes span:nth-child(3) { left: 22.2%; top: 63.6%; width: 55.6%; height: 36.4%; border-radius: var(--fv-radius-16); background-color: var(--fv-nebel); } /* Bereich Verein: einheitliche Hoehe, feste Bausteinfarben (Nachtblau, Violett, Nebel) */ .c-page-hero--verein .c-page-hero__inner { min-height: clamp(280px, 24vw, 340px); } .c-page-hero--verein { --ph-accent: var(--fv-violett); } /* schlicht: kein Kopf, nur Brotkrumen und H1 im Inhaltsfluss */ .c-page-hero--schlicht { background-color: var(--fv-weiss); padding-block: var(--fv-space-24) 0; } .c-page-hero--schlicht .c-page-hero__shapes { display: none; } .c-page-hero--schlicht .c-crumbs { margin-bottom: var(--fv-space-16); } .c-page-hero--schlicht .c-page-hero__inner > :not(.c-crumbs) { max-width: 760px; } .c-page-hero.c-page-hero--schlicht + .l-section:not(.is-dark) { padding-top: var(--fv-space-48); } /* mit Bild (Feld image, Abschluss-QA Runde 9): Foto oder 3D-Standbild rechts im Baustein (Radius 40) statt der drei Bausteine. Desktop: Text links, Bild rechts ueber die Hoehe des Kopfs; mobil: Bild unter den Buttons (H1 und CTA bleiben im ersten Bildschirm). */ .c-page-hero--bild { padding-block: var(--fv-space-32) var(--fv-space-96); } .c-page-hero--bild .c-page-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; } .c-page-hero--bild .c-page-hero__inner > * { grid-column: 1; } .c-page-hero--bild .c-page-hero__inner > :not(.c-crumbs) { max-width: 640px; } .c-page-hero--bild .c-page-hero__inner > .c-crumbs { grid-column: 1 / -1; } .c-page-hero--bild .c-page-hero__inner > .c-page-hero__media { grid-column: 2; grid-row: 2 / span 6; align-self: center; max-width: none; margin: 0; } .c-page-hero__frame { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--fv-radius-40); background-color: var(--fv-nebel); } .c-page-hero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .c-page-hero__media--contain .c-page-hero__frame { aspect-ratio: 16 / 10; border-radius: 0; background-color: transparent; } .c-page-hero__media--contain .c-page-hero__frame img { object-fit: contain; mix-blend-mode: darken; } /* hellerer Bildgrund des 3D-Standbilds geht in der Papierflaeche auf */ .c-page-hero__media .c-credit { margin-top: var(--fv-space-8); font-size: 12px; line-height: 1.4; color: var(--fv-schiefer); } @media (max-width: 900px) { .c-page-hero--bild { padding-block: var(--fv-space-24) var(--fv-space-48); } .c-page-hero--bild .c-page-hero__inner { grid-template-columns: minmax(0, 1fr); } .c-page-hero--bild .c-page-hero__inner > .c-page-hero__media { grid-column: 1; grid-row: auto; margin-top: var(--fv-space-32); } .c-page-hero--bild .c-crumbs { padding-right: 0; } .c-page-hero__frame { aspect-ratio: 16 / 10; border-radius: var(--fv-radius-24); } } .c-crumbs { margin-bottom: var(--fv-space-48); font-size: var(--fv-fs-small); } .c-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); list-style: none; margin: 0; padding: 0; } .c-crumbs li { display: inline-flex; align-items: center; gap: var(--fv-space-8); color: var(--fv-schiefer); } .c-crumbs li + li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background-color: var(--fv-schiefer); opacity: .5; } .c-crumbs a { color: var(--fv-schiefer); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; margin-block: -1px; } /* Zielhöhe mind. 24 px (WCAG 2.5.8), Zeilenhöhe bleibt */ .c-crumbs a:hover { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .c-crumbs [aria-current] { color: var(--fv-nachtblau); font-weight: var(--fv-fw-semibold); } /* Ein Brotkrumen-Stil fuer alle Seitenkoepfe (Abschluss-QA Runde 9): Punkt-Trenner, Links ohne Unterstreichung, aktuelle Seite halbfett. Auf dunklen Koepfen (event-hero, prize-hero Buehne, nomination-3d, hero-szene auf Nachtblau/Purpur) in Weiss. */ :is(.is-nacht, .is-dark, .is-purpur, .c-nom3d) .c-crumbs :is(li, a, [aria-current]) { color: var(--fv-weiss); } :is(.is-nacht, .is-dark, .is-purpur, .c-nom3d) .c-crumbs li + li::before { background-color: var(--fv-weiss); } :is(.is-nacht, .is-dark, .is-purpur, .c-nom3d) .c-crumbs a:hover { color: var(--fv-weiss); } @media (max-width: 900px) { .c-page-hero { padding-block: var(--fv-space-24) var(--fv-space-64); } .c-page-hero__inner > :not(.c-crumbs) { max-width: none; } /* mobil: kleine Bausteingruppe rechts oben neben den Brotkrumen */ .c-page-hero__shapes { position: absolute; right: var(--fv-page-margin); top: var(--fv-space-16); transform: none; width: 84px; } .c-page-hero__shapes span, .c-page-hero__shapes span:nth-child(n) { border-radius: 6px; } .c-page-hero .c-crumbs { padding-right: 100px; } .c-page-hero--verein .c-page-hero__inner { min-height: 0; } .c-page-hero--schlicht { padding-top: var(--fv-space-16); } } /* ---- Karte (Basis) ---- */ .c-card { position: relative; background: var(--fv-weiss); border-radius: var(--fv-radius-24); } /* ---- Blockmasken fuer Fotos (clipPath aus partials/masks.html), einzige Definition; picture.css/Sektionen nutzen diese Klassen ---- */ .u-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .c-mask { position: relative; overflow: hidden; } .c-mask img { width: 100%; height: 100%; object-fit: cover; } /* Brandmanual v1.0: Bildflaechen Radius 40, keine Kerben; Klassen bleiben als stabile Feldwerte (mask). Mosaik = drei Bausteine mit Fuge. */ .c-mask--nische, .c-mask--winkel, .c-mask--hoch { border-radius: var(--fv-radius-40); clip-path: none; } .c-mask--nische { aspect-ratio: 4 / 3; } .c-mask--winkel { aspect-ratio: 1 / 1; } .c-mask--mosaik { aspect-ratio: 3 / 2; clip-path: url(#fv-mask-mosaik); } .c-mask--hoch { aspect-ratio: 4 / 5; } /* Portraet im Hochformat */ .c-mask--block { border-radius: var(--fv-radius-40); } /* ---- Bildmarke als Inline-SVG (partials/mark.html) ---- */ .c-mark { --mark-base: var(--fv-nachtblau); width: 100%; height: auto; overflow: visible; } .c-mark__b path { fill: var(--mark-base); } .c-mark__b--violett path { fill: var(--fv-violett); } .c-mark__b--purpur path { fill: var(--fv-purpur); } .c-mark__b--rosa path { fill: var(--fv-rosa); } .c-mark__b--pflaume path { fill: var(--fv-pflaume); } .c-mark__b { transform-box: fill-box; transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .c-mark.is-assemble .c-mark__b { animation: mark-in 1.1s var(--m-ease, ease) both; } .c-mark.is-assemble .c-mark__b--violett { --from: translate(0, -260px); animation-delay: .35s; } .c-mark.is-assemble .c-mark__b--purpur { --from: scale(1.8); animation-delay: .5s; } .c-mark.is-assemble .c-mark__b--rosa { --from: translate(-300px, 0); animation-delay: .62s; } .c-mark.is-assemble .c-mark__b--pflaume { --from: translate(300px, 0); animation-delay: .74s; } .c-mark.is-assemble [class*="--base"] { --from: translate(0, 60px); } .c-mark.is-assemble .c-mark__b--base2 { animation-delay: .06s; } .c-mark.is-assemble .c-mark__b--base3 { animation-delay: .12s; } .c-mark.is-assemble .c-mark__b--base4 { animation-delay: .18s; } .c-mark.is-assemble .c-mark__b--base5 { animation-delay: .22s; } .c-mark.is-assemble .c-mark__b--base6 { animation-delay: .26s; } .c-mark.is-assemble .c-mark__b--base7 { animation-delay: .3s; } @keyframes mark-in { from { opacity: 0; transform: var(--from, none); } to { opacity: 1; transform: none; } } .c-mark.is-float .c-mark__b--violett { animation: mark-float 7s ease-in-out infinite; } .c-mark.is-float .c-mark__b--purpur { animation: mark-float 7s ease-in-out -2s infinite; } .c-mark.is-float .c-mark__b--rosa { animation: mark-float-x 8s ease-in-out -1s infinite; } .c-mark.is-float .c-mark__b--pflaume { animation: mark-float-x 6s ease-in-out -3s infinite reverse; } @keyframes mark-float { 50% { transform: translateY(-14px); } } @keyframes mark-float-x { 50% { transform: translateX(-14px); } } } /* sections/_gradients.css */ /* ===== Verlaeufe nach Brandmanual v1.0 Abschnitt 9 (Jelena 06.10.2026) ===== Es gibt nur zwei Verlaeufe: 1. Glow (135 Grad Weiss 0,14 auf dunklen und farbigen Flaechen, 0,6 auf hellen) und 2. Bild-Fade (180 Grad Nachtblau 0 bis 0,95 fuer Text auf Fotos). Keine bunten Verlaeufe zwischen Markenfarben, keine radialen, keine Mesh-Verlaeufe, kein Glas, keine Koernung, einziger Schatten ist der Kartenschatten. Die alten Tokennamen bleiben erhalten (Kompatibilitaet fuer bestehende Sektionen und den Grav-Vorbau) und zeigen jetzt auf Manual-Werte: Flaeche plus Glow statt Verlauf. Quelle der Werte: css/tokens.css (--fv-gradient-*, --fv-shadow-card). */ :root { /* Papier: Papierflaeche mit hellem Glow */ --grad-paper: var(--fv-gradient-glow-hell), linear-gradient(var(--fv-papier), var(--fv-papier)); /* Flieder: helle Tint-Flaeche (Flieder hell) mit hellem Glow */ --grad-flieder: var(--fv-gradient-glow-hell), linear-gradient(var(--fv-flieder-hell), var(--fv-flieder-hell)); /* Akzent: Purpur mit Glow (verbinden; Hero und Akzentbaender) */ --grad-akzent: var(--fv-gradient-glow), linear-gradient(var(--fv-purpur), var(--fv-purpur)); /* Akzent weich: Rosa hell mit hellem Glow */ --grad-akzent-soft: var(--fv-gradient-glow-hell), linear-gradient(var(--fv-rosa-hell), var(--fv-rosa-hell)); /* ehemals Mint (entfaellt laut Manual): Nebel */ --grad-mint: var(--fv-gradient-glow-hell), linear-gradient(var(--fv-nebel), var(--fv-nebel)); /* ehemals Glas: deckendes Weiss, kein Blur */ --grad-glas: linear-gradient(var(--fv-weiss), var(--fv-weiss)); --glas-rand: transparent; --glas-blur: none; /* Nacht: Nachtblau mit Glow */ --grad-nacht: var(--fv-gradient-glow), linear-gradient(var(--fv-nachtblau), var(--fv-nachtblau)); /* ehemals Licht (radial): entspricht dem Glow der jeweiligen Flaeche */ --grad-licht: var(--fv-gradient-glow-hell); --grad-licht-mint: linear-gradient(transparent, transparent); /* Bild-Fade (Verlauf 2) unter neuem Namen, gleicher Wert wie --fv-gradient-image-fade */ --grad-fade: var(--fv-gradient-image-fade); /* Koernung entfaellt: leeres Bild, damit bestehende background-Listen gueltig bleiben */ --grain: linear-gradient(transparent, transparent); --grain-size: auto; /* Tiefe: nur noch der Kartenschatten */ --tiefe-1: var(--fv-shadow-card); --tiefe-2: var(--fv-shadow-card); --tiefe-3: var(--fv-shadow-card); --kante-licht: 0 0 0 0 transparent; } /* Hilfsklassen: Flaeche plus Glow */ .grad-paper { background: var(--grad-paper); } .grad-flieder { background: var(--grad-flieder); } .grad-akzent { background: var(--grad-akzent); color: var(--fv-weiss); } .grad-akzent-soft { background: var(--grad-akzent-soft); } .grad-mint { background: var(--grad-mint); } .grad-nacht { background: var(--grad-nacht); color: var(--fv-weiss); } /* ehemals Glas: weisse Karte mit Kartenschatten (Klasse bleibt) */ .glas { background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } /* sections/ambient.css */ /* Ambient-Ebene (partials/ambient.html, js/ambient.js). Ruhiger Hintergrund hinter hellen Sektionen nach Brandmanual: Fragmente der Bildmarke und abgerundete Bausteine in Nebel, Rosa hell und Flieder hell. Keine Kreise, Ringe, Linien, Koernung. Sehr niedrige Deckkraft, Bewegung nur ueber transform (eigene Ebenen), 60 bis 120 s je Zyklus. Global: position fixed hinter dem Inhalt (dunkle oder getoente Sektionen decken sie ab). Lokal: .amb--local. */ .amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; color: var(--fv-nachtblau); contain: strict; } .amb--local { position: absolute; z-index: 0; } .amb__f { position: absolute; display: block; will-change: transform; backface-visibility: hidden; } .amb__f svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Bildmarke als Kontur, gross und angeschnitten */ .amb__f--mark { right: -9vmax; top: 8vh; width: 46vmax; aspect-ratio: 985 / 925; opacity: .06; } .amb__f--mark path { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; } /* Bausteine aus dem Logo: abgerundete Flaechen in Manual-Tints */ .amb__f--slab { left: -10vmax; bottom: -8vmax; width: 40vmax; aspect-ratio: 2.1; border-radius: var(--fv-radius-64); background: var(--fv-nebel); opacity: .5; } .amb__f--block { left: 6vw; top: 24vh; width: clamp(160px, 18vw, 300px); aspect-ratio: 2.1; border-radius: var(--fv-radius-28); background: var(--fv-flieder-hell); opacity: .7; } .amb__f--square { left: calc(6vw + clamp(160px, 18vw, 300px) * .62); top: calc(24vh - clamp(30px, 3.4vw, 56px)); width: clamp(36px, 3.4vw, 56px); aspect-ratio: 1; border-radius: var(--fv-radius-12); background: var(--fv-purpur); opacity: .14; } .amb__f--bar { right: 14vw; bottom: 18vh; width: clamp(140px, 16vw, 260px); height: clamp(14px, 1.4vw, 22px); border-radius: var(--fv-radius-8); background: var(--fv-nebel); opacity: .8; } .amb__f--mint { right: 30vw; top: 16vh; width: clamp(22px, 2vw, 34px); aspect-ratio: 1; border-radius: var(--fv-radius-8); background: var(--fv-rosa-hell); opacity: .9; } .amb__f--chip { right: 8vw; top: 58vh; width: clamp(48px, 5vw, 80px); aspect-ratio: 1; border-radius: var(--fv-radius-16); background: var(--fv-rosa-hell); opacity: .8; } .amb__f--zwickel { left: 44vw; bottom: 8vh; width: clamp(40px, 4vw, 70px); aspect-ratio: 190 / 200; opacity: .06; } .amb__f--zwickel path { fill: currentColor; } @media (max-width: 767px) { .amb__f--mark { width: 80vmax; right: -30vmax; top: 4vh; } .amb__f--zwickel { display: none; } } /* Bewegung: nur ohne reduzierte Bewegung, laeuft erst mit .is-live (js/ambient.js) */ @media (prefers-reduced-motion: no-preference) { .amb__f--mark { animation: amb-drift-a 110s ease-in-out infinite alternate; } .amb__f--slab { animation: amb-drift-b 120s ease-in-out infinite alternate; } .amb__f--block { animation: amb-drift-b 70s ease-in-out infinite alternate; } .amb__f--square { animation: amb-drift-c 54s ease-in-out infinite alternate; } .amb__f--bar { animation: amb-drift-b 88s ease-in-out infinite alternate-reverse; } .amb__f--mint { animation: amb-drift-c 66s ease-in-out infinite alternate-reverse; } .amb__f--chip { animation: amb-drift-c 90s ease-in-out infinite alternate; } .amb__f--zwickel{ animation: amb-drift-a 80s ease-in-out infinite alternate-reverse; } .amb__f { animation-play-state: paused; } .amb.is-live .amb__f { animation-play-state: running; } } @keyframes amb-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3vw, 4vh, 0); } } @keyframes amb-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(4vw, -3vh, 0); } } @keyframes amb-drift-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2.5vw, 5vh, 0); } } /* sections/award-cards.css */ /* award-cards: Preise-Trio nach Brandmanual 8.9 (Welle 2, Agent w2-c-preise). Drei Kacheln Violett, Purpur, Nachtblau (Radius 24, Fuge 16), je ein Freisteller vor dem Baustein (Handoff 10.2), Preisname darunter in Familjen Bold, Verb-Tag "entwickeln". Sektion selbst neutral (Papier/Weiss/Nachtblau). Mobil: horizontal scrollbar mit Fuge 12. Nur --fv-*-Tokens, keine Pillen, keine Kreise, keine Konturen. */ .c-awards { position: relative; isolation: isolate; overflow: hidden; } /* Baustein-Akzent an der Sektionskante (ein Balken, kein Bildmarken-Nachbau) */ .c-awards__blocks { position: absolute; z-index: -1; top: var(--fv-space-64); right: var(--fv-page-margin); pointer-events: none; } .c-awards__blocks span { display: none; } .c-awards__blocks span:first-child { display: block; width: 136px; height: 16px; border-radius: var(--fv-radius-3); background: var(--fv-violett); } .c-awards__head { max-width: 760px; margin-bottom: var(--fv-space-48); } /* Brotkrumen: gemeinsamer Stil .c-crumbs (css/sections.css); hier nur der Abstand */ .c-awards .c-awards__crumbs { margin-bottom: var(--fv-space-24); } .c-awards__title { margin: 0; font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); font-weight: var(--fv-fw-bold); text-wrap: balance; hyphens: manual; } h2.c-awards__title { font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-awards__intro { margin: var(--fv-space-24) 0 0; max-width: var(--fv-measure); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } /* optionales Buehnenbild ueber dem Trio */ .c-awards__stage { margin: 0 0 var(--fv-space-48); border-radius: var(--fv-radius-40); overflow: hidden; aspect-ratio: 21 / 8; } .c-awards__img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---- Trio */ .c-awards__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-award { display: flex; min-width: 0; } /* Farben nach Figma NL-A "Drei Preise, eine Frist": Studienpreis Violett, Lehrpreis Purpur, Wolf-Wagner-Preis Nachtblau */ [data-award] { --award-tile: var(--fv-purpur); } [data-award="studienpreis"] { --award-tile: var(--fv-violett); } [data-award="wolf-wagner-preis"] { --award-tile: var(--fv-nachtblau); } [data-tile="violett"] { --award-tile: var(--fv-violett); } [data-tile="purpur"] { --award-tile: var(--fv-purpur); } [data-tile="nachtblau"] { --award-tile: var(--fv-nachtblau); } .c-award__link { display: flex; flex-direction: column; gap: var(--fv-space-24); width: 100%; color: var(--fv-nachtblau); text-decoration: none; } .c-award__link:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); border-radius: var(--fv-radius-24); } /* Kachel: Baustein in Kachelfarbe mit Glow, Freisteller innerhalb, unten angeschnitten */ .c-award__tile { position: relative; display: grid; place-items: end center; aspect-ratio: 6 / 7; overflow: hidden; border-radius: var(--fv-radius-24); background-color: var(--award-tile); background-image: var(--fv-gradient-glow); box-shadow: var(--fv-shadow-card); } /* Bugfix 19.10.2026 (Jelena, zweimal gemeldet): vorher top:12% + feste, je Preis unterschiedliche Breite (--cut-w: 50/80/82%) - je nach Bildseitenverhaeltnis blieb unten eine helle Luecke (Lehrpreis) oder die Person wirkte klein/zentriert (Studienpreis, Wolf-Wagner-Preis). Die drei Freisteller-Dateien selbst haben praktisch keinen transparenten Rand (per Alphakanal gemessen, Inhalt fuellt 99,6-99,9% der jeweiligen Bilddatei) - der Fehler lag rein in der Positionierung, nicht in den Bildern. Jetzt einheitlich: unten buendig (bottom:0, kein top mehr), Hoehe schlaegt die Groesse vor (94% der Kachel, oben bleibt etwas Luft zum abgerundeten Rand), max-width haelt auch ein fast quadratisches Bild (Wolf-Wagner-Preis) innerhalb der Kachel, statt seitlich ueberzulaufen - der Browser skaliert dann automatisch gleichmaessig nach der Standard-Ersetzte- Elemente-Regel. Dadurch wirken alle drei Karten gleich gross und gleich aufgebaut, ohne mehr pro Preis eine eigene Breite pflegen zu muessen. */ .c-award__cutout { position: absolute; z-index: 1; left: 50%; bottom: 0; width: auto; height: auto; max-width: 88%; max-height: 94%; transform: translateX(-50%); } /* Platzhalter-Baustein, solange kein Freisteller vorliegt */ .c-award__ph { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; gap: var(--fv-space-12); width: 100%; height: 100%; padding: var(--fv-space-32); } .c-award__ph-block { width: 56%; aspect-ratio: 3 / 4; border-radius: var(--fv-radius-24); background: var(--fv-weiss); opacity: .16; } .c-award__ph-note { font-size: var(--fv-fs-small); color: var(--fv-weiss); } .c-award__since { position: absolute; z-index: 2; top: var(--fv-space-24); left: var(--fv-space-24); display: inline-flex; align-items: baseline; gap: var(--fv-space-8); padding: var(--fv-space-4) var(--fv-space-12); border-radius: var(--fv-radius-10); background: var(--fv-weiss); color: var(--fv-nachtblau); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); font-variant-numeric: tabular-nums; } .c-award__since-label { font-weight: var(--fv-fw-regular); } .c-award__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fv-space-8); flex: 1; } .c-award__aka { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-award__title { margin: 0; font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-preisname, var(--fv-fs-h3)); line-height: var(--fv-lh-h3); letter-spacing: 0; color: var(--fv-nachtblau); } .c-award__title-text { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-award__link:hover .c-award__title-text { text-decoration-color: var(--fv-link-underline); } .c-award__audience { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-award__text { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); max-width: 36ch; text-wrap: pretty; } .c-award__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fv-space-16); } .c-award__amount { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); font-variant-numeric: tabular-nums; } .c-award__more { display: inline-flex; align-items: center; } .c-award__more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .c-award__arrow { display: inline-grid; place-items: center; width: var(--fv-btn-arrow-size, 32px); height: var(--fv-btn-arrow-size, 32px); border-radius: var(--fv-radius-8); background: var(--fv-purpur); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); transition: transform var(--fv-duration) var(--fv-easing); } .c-award__link:hover .c-award__arrow { transform: translateX(4px); } .c-awards__note { margin: var(--fv-space-32) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-awards__actions { margin-top: var(--fv-space-32); } /* auf Nachtblau: Text weiss, Nachtblau-Kachel wird Weiss-Kontrast durch Glow; Preisname weiss */ .c-awards.is-nacht :is(.c-award__link, .c-award__title, .c-award__audience, .c-award__amount), .c-awards.is-dark :is(.c-award__link, .c-award__title, .c-award__audience, .c-award__amount) { color: var(--fv-weiss); } .c-awards:is(.is-nacht, .is-dark) :is(.c-award__text, .c-award__aka, .c-awards__intro, .c-awards__note) { color: var(--fv-weiss); } @media (prefers-reduced-motion: reduce) { .c-award__arrow, .c-award__title-text { transition: none; } .c-award__link:hover .c-award__arrow { transform: none; } } @media (max-width: 900px) { .c-awards__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--fv-page-margin)); padding-inline: var(--fv-page-margin); scroll-padding-inline: var(--fv-page-margin); padding-bottom: var(--fv-space-8); } .c-award { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; } .c-awards__blocks { display: none; } .c-awards__stage { aspect-ratio: 4 / 3; } } @media (prefers-reduced-motion: reduce) { .c-awards__grid { scroll-behavior: auto; } } /* sections/award-detail.css */ /* award-detail: Steckbrief (Text + Faktenkarte) und Wuerdigung (Namensgeber, Stationen). Welle 2, Agent w2-c-preise. Neutral: Flaeche ueber Feld ground (Standard Papier; Wuerdigung im Content "dark" = Nachtblau mit Glow), Verb-Tag oben, Faktenkarte = .fv-card (Weiss, Radius 24, Kartenschatten). Betrag in Familjen [zu bestaetigen, A8]. Nur --fv-*-Tokens. */ .c-award-detail__inner { display: grid; gap: var(--fv-space-64); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } /* R1 (Polish-Runde 1): kein Verb-Tag als Überzeile über der Headline; Verb wirkt nur über data-verb/Farbe */ .c-award-detail__verb { display: none; } .c-award-detail__title.c-award-detail__title { max-width: 20ch; margin: 0 0 var(--fv-space-32); font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); color: var(--fv-fg); text-wrap: balance; } .c-award-detail__meta { margin: calc(-1 * var(--fv-space-16)) 0 var(--fv-space-24); font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); color: var(--fv-fg-muted); } .c-award-detail__text { max-width: var(--fv-measure); color: var(--fv-fg); } .c-award-detail__text p:first-child { font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); font-weight: var(--fv-fw-medium); } /* Faktenkarte */ .c-award-detail__aside { position: relative; container-type: inline-size; } @media (min-width: 1025px) { .c-award-detail--steckbrief .c-award-detail__aside { position: sticky; top: calc(var(--header-h) + var(--fv-space-24)); } } /* kleiner Baustein in Verbfarbe an der Kartenkante (entwickeln = Violett), mit Fuge zur Kante */ .c-award-detail__block { display: block; width: 48px; height: 12px; margin-bottom: var(--fv-space-24); border-radius: var(--fv-radius-2); background: var(--fv-violett); } .c-award-detail__amount { display: flex; flex-direction: column; gap: var(--fv-space-4); margin: 0 0 var(--fv-space-24); } .c-award-detail__amount-value.c-award-detail__amount-value { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: min(var(--fv-fs-h1), 15cqi); line-height: 1; letter-spacing: 0; color: var(--fv-nachtblau); overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; } .c-award-detail__amount-label { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-award-detail__aside-title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-award-detail__facts { display: grid; gap: var(--fv-space-16); margin: 0; } .c-award-detail__fact { display: grid; gap: var(--fv-space-4); } .c-award-detail__fact dt { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-award-detail__fact dd { margin: 0; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); overflow-wrap: anywhere; hyphens: none; } .c-award-detail__fact a { color: var(--fv-nachtblau); text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-award-detail__source { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } /* Tags (z. B. Veroeffentlichungen): Nebel-Bausteine Radius 10, keine Pillen, keine Kontur */ .c-award-detail__tags { margin-top: var(--fv-space-32); } .c-award-detail__tags-title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-fg-muted); } .c-award-detail__works { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); list-style: none; margin: 0; padding: 0; } .c-award-detail__works li { padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); color: var(--fv-nachtblau); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); } :is(.is-dark, .is-nacht) .c-award-detail__works li { background: var(--fv-weiss); } /* Wuerdigung: Stationen als Zeitleiste mit kleinen Bausteinen statt Kreisen */ .c-award-detail--wuerdigung .c-award-detail__title.c-award-detail__title { font-size: var(--fv-fs-h2); max-width: 16ch; } .c-award-detail--wuerdigung .c-prose a { color: inherit; text-decoration-color: var(--fv-rosa); } .c-award-detail--wuerdigung .c-award-detail__fact { position: relative; padding-left: var(--fv-space-32); } .c-award-detail--wuerdigung .c-award-detail__fact::before { content: ""; position: absolute; left: 0; top: .3em; width: 12px; height: 12px; border-radius: 3px; background: var(--fv-nebel); } .c-award-detail--wuerdigung .c-award-detail__fact:nth-child(4)::before { background: var(--fv-violett); } .c-award-detail--wuerdigung .c-award-detail__fact dt { font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; } .c-award-detail--wuerdigung .c-award-detail__fact dd { font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } @media (max-width: 1024px) { .c-award-detail__inner { grid-template-columns: 1fr; gap: var(--fv-space-48); } .c-award-detail__aside { max-width: 620px; } } /* Zwischenruf und echtes Foto (Welle 3 Bildmix): Zwischenruf mit Abstand unter dem Text (LAYOUT-MUSTER 7), Foto Radius 40 */ .c-award-detail__ruf { margin: var(--fv-space-48) 0 0; max-width: 32ch; } .c-award-detail__figure { margin: var(--fv-space-48) 0 0; max-width: 520px; } .c-award-detail__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fv-radius-40); } .c-award-detail__caption { margin-top: var(--fv-space-12); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); } /* sections/award-timeline.css */ /* award-timeline: Preistraeger-Archiv mit Zeitleiste (Welle 2, Agent w2-c-preise, Brandmanual v1.0). Flaeche ueber Feld ground (Standard Papier), Karten Weiss Radius 24 mit Kartenschatten, Knoten als kleine Bausteine (keine Kreise, keine Ringe, keine Konturen). Akzent Violett nur als Verb "entwickeln" (Glyphen), Bedienung Nachtblau. Ohne JS: vollstaendige Liste, Zeitleiste als Sprungliste. Glyphen je Preis aus css/pages/preise.css ([data-award]). */ .c-atl { position: relative; overflow: clip; isolation: isolate; color: var(--fv-nachtblau); } .c-atl__deco { position: absolute; z-index: -1; top: var(--fv-space-24); right: calc(-1 * var(--fv-space-96)); width: min(480px, 50vw); height: auto; pointer-events: none; } .c-atl__deco rect { fill: var(--fv-flieder-hell); } .c-atl__deco rect:first-child { fill: var(--fv-violett); } .c-atl__head { max-width: 780px; } /* Filterformular */ .c-atl__filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: var(--fv-space-16); margin: 0 0 var(--fv-space-32); padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-atl__filter[hidden] { display: none; } .c-atl__field { display: grid; gap: var(--fv-space-8); min-width: 0; } .c-atl__label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-atl__select { appearance: none; width: 100%; min-height: 48px; padding: 10px 40px 10px 14px; font: inherit; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-medium); color: var(--fv-nachtblau); background-color: var(--fv-nebel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(23 29 58)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Lucide chevron-down inline, bis assets/icons/lucide/chevron-down.svg vorliegt */ background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; border: 0; border-radius: var(--fv-radius-12); cursor: pointer; } .c-atl__select:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-atl__reset { min-height: 48px; padding: 10px 0; font: inherit; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; cursor: pointer; } .c-atl__reset:hover { text-decoration-thickness: 4px; } .c-atl__count { grid-column: 1 / -1; margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .c-atl__filter { grid-template-columns: 1fr; } .c-atl__reset { grid-column: 1 / -1; justify-self: start; } } /* Zeitleiste */ .c-atl__axis { position: relative; margin: 0 0 var(--fv-space-48); overflow-x: auto; scrollbar-width: thin; padding: var(--fv-space-4) 2px var(--fv-space-8); } .c-atl__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fv-space-8); } .c-atl__ticks.is-enhanced { position: relative; flex-wrap: nowrap; gap: 0; min-width: 1080px; } @media (min-width: 1200px) { .c-atl__ticks.is-enhanced { min-width: 0; } .is-enhanced .c-atl__tick { min-width: 0; } } /* Achse als flacher Baustein (Nebel), keine Linie mit Verlauf */ .c-atl__ticks.is-enhanced::before { content: ""; position: absolute; left: 0; right: 0; top: 70px; height: 8px; border-radius: 4px; background: var(--fv-nebel); } .c-atl__ticks:not(.is-enhanced) .c-atl__ticklink { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: var(--fv-space-8) 14px; border-radius: var(--fv-radius-10); background: var(--fv-weiss); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: none; } .c-atl__ticks:not(.is-enhanced) .c-atl__tickdots { display: inline-flex; gap: 3px; align-items: center; } .c-atl__tickdots i { display: block; width: var(--award-w); height: var(--award-h); border-radius: var(--award-r); background: var(--award-c); transform: scale(.6); } .is-enhanced .c-atl__tick { position: relative; flex: 1 1 0; min-width: 46px; display: grid; grid-template-rows: 64px 20px auto; justify-items: center; } .is-enhanced .c-atl__tick.is-empty::after { content: ""; grid-row: 2; align-self: center; width: 2px; height: 8px; border-radius: 1px; background: var(--fv-schiefer); opacity: .35; } .is-enhanced .c-atl__tick.is-empty.is-major::after { height: 14px; opacity: .6; } .is-enhanced .c-atl__tick.is-empty .c-atl__tickyear { grid-row: 3; padding-top: var(--fv-space-8); font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; color: var(--fv-schiefer); visibility: hidden; } .is-enhanced .c-atl__tick.is-empty.is-major .c-atl__tickyear { visibility: visible; } .is-enhanced .c-atl__ticklink { grid-row: 1 / span 3; display: grid; grid-template-rows: 64px 20px auto; justify-items: center; padding: 0 var(--fv-space-4); font: inherit; background: none; border: 0; border-radius: var(--fv-radius-10); color: var(--fv-nachtblau); cursor: pointer; } .is-enhanced .c-atl__ticklink:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: 2px; } /* Knoten: kleiner Baustein Radius 4 statt Kreis */ .is-enhanced .c-atl__ticklink::before { content: ""; grid-row: 2; align-self: center; width: 16px; height: 16px; border-radius: 4px; background: var(--fv-nachtblau); transition: transform var(--fv-duration) var(--fv-easing); } .is-enhanced .c-atl__tickdots { grid-row: 1; align-self: end; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--fv-space-4); padding-bottom: 6px; } .is-enhanced .c-atl__tickdots i { transform: none; transition: opacity var(--fv-duration); } .is-enhanced .c-atl__tickdots i.is-ph { opacity: .35; } .is-enhanced .c-atl__tickdots i.is-off { opacity: .15; } .is-enhanced .c-atl__ticklink .c-atl__tickyear { grid-row: 3; margin-top: var(--fv-space-4); padding: 5px 7px; border-radius: 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; transition: background-color var(--fv-duration), color var(--fv-duration); } .is-enhanced .c-atl__ticklink:hover::before { transform: scale(1.2); } .is-enhanced .c-atl__ticklink:hover .c-atl__tickyear { background: var(--fv-nebel); } .is-enhanced .c-atl__ticklink[aria-pressed="true"]::before { background: var(--fv-violett); transform: scale(1.25); } .is-enhanced .c-atl__ticklink[aria-pressed="true"] .c-atl__tickyear { background: var(--fv-nachtblau); color: var(--fv-weiss); } .is-enhanced .c-atl__ticklink.is-dim { opacity: .4; } /* Jahrgaenge als vertikale Zeitleiste */ .c-atl__years { position: relative; list-style: none; margin: 0; padding: 0; } .c-atl__year { position: relative; display: grid; grid-template-columns: clamp(110px, 15vw, 200px) minmax(0, 1fr); gap: var(--fv-space-16) var(--fv-space-48); padding: 0 0 var(--fv-space-48); } .c-atl__year[hidden] { display: none; } .c-atl__year::before { content: ""; position: absolute; top: 32px; bottom: 8px; left: calc(clamp(110px, 15vw, 200px) + var(--fv-space-24) - 2px); width: 4px; border-radius: 2px; background: var(--fv-nebel); } .c-atl__year:last-child::before { display: none; } .c-atl__yearhead { position: relative; } @media (min-width: 768px) { .c-atl__yearhead { position: sticky; top: calc(var(--header-h) + var(--fv-space-24)); align-self: start; } } /* Jahreszahl in Familjen [zu bestaetigen, A8] */ .c-atl__yearnum.c-atl__yearnum { margin: 0; font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h1); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; color: var(--fv-nachtblau); } .c-atl__node { position: absolute; top: 10px; right: calc(-1 * var(--fv-space-24) - 8px); width: 16px; height: 16px; border-radius: 4px; background: var(--fv-violett); } .c-atl__yearbody { min-width: 0; padding-left: var(--fv-space-24); } .c-atl__yearnote { margin: var(--fv-space-4) 0 var(--fv-space-16); font-size: var(--fv-fs-small); color: var(--fv-schiefer); max-width: 70ch; } /* Karten */ .c-atl__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .c-atl__card[hidden] { display: none; } .c-atl__card:has(details[open]) { grid-column: 1 / -1; } .c-atl__details { height: 100%; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-atl__summary { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-8); height: 100%; padding: var(--fv-space-24) 28px; list-style: none; cursor: pointer; border-radius: var(--fv-radius-24); } .c-atl__summary::-webkit-details-marker { display: none; } .c-atl__summary:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-atl__summary:hover .c-atl__name { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-atl__award, .c-atl__dlaward { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fv-space-8); margin: 0; font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-atl__glyph { width: var(--award-w); height: var(--award-h); border-radius: var(--award-r); background: var(--award-c); flex: none; } .c-atl__cat { padding: var(--fv-space-4) var(--fv-space-8); border-radius: 6px; background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); } .c-atl__name { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: 1.25; color: var(--fv-nachtblau); } .c-atl__work { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-nachtblau); } .c-atl__work::before { content: "„"; } .c-atl__work::after { content: "“"; } .c-atl__more { display: inline-flex; align-items: center; gap: var(--fv-space-8); margin-top: auto; padding-top: var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-atl__more-close { display: none; } .c-atl__details[open] .c-atl__more-open { display: none; } .c-atl__details[open] .c-atl__more-close { display: inline; } /* Plus-Kachel: Purpur, Radius 8 (wie Pfeil-Kachel) */ .c-atl__plus { position: relative; width: 24px; height: 24px; border-radius: var(--fv-radius-8); background: var(--fv-purpur); } .c-atl__plus::before, .c-atl__plus::after { content: ""; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; border-radius: 1px; background: var(--fv-weiss); transition: transform var(--fv-duration) var(--fv-easing); } .c-atl__plus::after { transform: rotate(90deg); } .c-atl__details[open] .c-atl__plus::after { transform: rotate(0deg); } .c-atl__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--fv-space-16) var(--fv-space-24); margin: 0 28px; padding: var(--fv-space-16) 0 var(--fv-space-24); } .c-atl__facts div { min-width: 0; } .c-atl__facts dt { margin: 0 0 2px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-atl__facts dd { margin: 0; font-size: var(--fv-fs-body); line-height: 1.4; overflow-wrap: anywhere; } .c-atl__factnote { grid-column: 1 / -1; } .c-atl__card.is-placeholder .c-atl__details { background: var(--fv-nebel); box-shadow: none; } .c-atl__card.is-placeholder .c-atl__name { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-atl__empty { margin: 0 0 var(--fv-space-32); padding: var(--fv-space-24); border-radius: var(--fv-radius-16); background: var(--fv-nebel); color: var(--fv-schiefer); } .c-atl__empty[hidden] { display: none; } .c-atl__linkbtn { font: inherit; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; cursor: pointer; } .c-atl__foot { margin: var(--fv-space-16) 0 0; max-width: 80ch; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* CTA mit Fristen: Nachtblau mit Glow, Radius 64 (wie CTA-Band 8.10) */ .c-atl__cta { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--fv-space-64); align-items: start; margin-top: var(--fv-space-96); padding: var(--fv-space-64); border-radius: var(--fv-radius-64); background-color: var(--fv-nachtblau); background-image: var(--fv-gradient-glow); color: var(--fv-weiss); overflow: hidden; --fv-focus: var(--fv-rosa); } .c-atl__cta::before { content: ""; position: absolute; left: var(--fv-space-64); top: var(--fv-space-32); width: 64px; height: 16px; border-radius: var(--fv-radius-8); background: var(--fv-rosa); pointer-events: none; } .c-atl__ctatext { position: relative; padding-top: var(--fv-space-24); } .c-atl__ctatitle { margin: 0; font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); color: var(--fv-weiss); } .c-atl__ctalead { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-body); color: var(--fv-weiss); max-width: 46ch; } .c-atl__cta .c-btn { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .c-atl__cta .c-btn:hover { background-color: var(--fv-weiss-hover) !important; color: var(--fv-nachtblau) !important; } .c-atl__deadlines { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .c-atl__deadline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px var(--fv-space-16); padding: var(--fv-space-16) var(--fv-space-24); border-radius: var(--fv-radius-16); background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-atl__deadline > * { margin: 0; grid-column: 1; } .c-atl__dldate { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); } .c-atl__dldate.is-open { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-atl__dlnote { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-atl__dllink { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-atl__dllink:focus-visible { outline-color: var(--fv-nachtblau); } .c-atl__countdown { grid-column: 2 !important; grid-row: 1 / span 4; display: flex; align-items: center; gap: 6px; } .c-atl__countdown[hidden] { display: none; } .c-atl__cdlabel { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); margin-right: var(--fv-space-4); } .c-atl__cdunit { display: grid; justify-items: center; min-width: 54px; padding: var(--fv-space-8) 6px 6px; border-radius: var(--fv-radius-12); background: var(--fv-papier); } .c-atl__cdunit b { font-size: var(--fv-fs-h3); line-height: 1; font-weight: var(--fv-fw-semibold); font-variant-numeric: tabular-nums; color: var(--fv-nachtblau); } .c-atl__cdunit small { margin-top: 3px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-atl__countdown.is-over { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } @media (max-width: 900px) { .c-atl__cta { grid-template-columns: 1fr; gap: var(--fv-space-32); padding: var(--fv-space-48) var(--fv-space-24) var(--fv-space-24); border-radius: var(--fv-radius-40); } .c-atl__cta::before { left: var(--fv-space-24); } } @media (max-width: 560px) { .c-atl__deadline { grid-template-columns: 1fr; } .c-atl__countdown { grid-column: 1 !important; grid-row: auto; margin-top: 6px !important; } } /* Mobil: Jahr ueber den Karten, Leiste links */ @media (max-width: 767px) { .c-atl__year { grid-template-columns: 1fr; gap: 14px; padding-left: 28px; } .c-atl__year::before { left: 6px; top: 26px; } .c-atl__node { right: auto; left: -28px; top: 8px; } .c-atl__yearbody { padding-left: 0; } .c-atl__deco { display: none; } } @media (prefers-reduced-motion: reduce) { .c-atl__plus::after, .is-enhanced .c-atl__ticklink::before { transition: none; } } .c-atl__year:not(:has(~ .c-atl__year:not([hidden])))::before { display: none; } .c-atl__details[open] .c-atl__summary { height: auto; } @media (min-width: 900px) { .c-atl__details[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } .c-atl__details[open] .c-atl__facts { margin: var(--fv-space-24) 28px var(--fv-space-24) 0; padding: 0; } } /* sections/brand-swatches.css */ /* Musterseite Brandmanual: gemeinsame Basis fuer .fv-muster-Sektionen (Grund, Farbschluessel) plus Farbfelder, Textregeln, Verb-System, Typo-Skala. Nur Tokens. */ .fv-muster { background: var(--fv-bg-sec, var(--fv-weiss)); color: var(--fv-fg-sec, var(--fv-nachtblau)); } .fv-muster[data-ground="weiss"] { --fv-bg-sec: var(--fv-weiss); } .fv-muster[data-ground="papier"] { --fv-bg-sec: var(--fv-papier); } .fv-muster[data-ground="nebel"] { --fv-bg-sec: var(--fv-nebel); } .fv-muster[data-ground="flieder-hell"] { --fv-bg-sec: var(--fv-flieder-hell); } .fv-muster[data-ground="rosa-hell"] { --fv-bg-sec: var(--fv-rosa-hell); } .fv-muster[data-ground="nachtblau"] { --fv-bg-sec: var(--fv-nachtblau); --fv-fg-sec: var(--fv-weiss); } .fv-muster[data-ground="nachtblau"] .c-section-head__title, .fv-muster[data-ground="nachtblau"] .c-section-head__intro { color: var(--fv-weiss); } .fv-muster__caption { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); opacity: .8; } .fv-muster__action { margin: var(--fv-space-32) 0 0; } /* Farbschluessel: Flaeche und Text */ .fv-bg--nachtblau { background: var(--fv-nachtblau); } .fv-bg--violett { background: var(--fv-violett); } .fv-bg--purpur { background: var(--fv-purpur); } .fv-bg--rosa { background: var(--fv-rosa); } .fv-bg--pflaume { background: var(--fv-pflaume); } .fv-bg--papier { background: var(--fv-papier); } .fv-bg--nebel { background: var(--fv-nebel); } .fv-bg--schiefer { background: var(--fv-schiefer); } .fv-bg--weiss { background: var(--fv-weiss); } .fv-bg--flieder-hell { background: var(--fv-flieder-hell); } .fv-bg--rosa-hell { background: var(--fv-rosa-hell); } .fv-fg--nachtblau { color: var(--fv-nachtblau); } .fv-fg--violett { color: var(--fv-violett); } .fv-fg--purpur { color: var(--fv-purpur); } .fv-fg--rosa { color: var(--fv-rosa); } .fv-fg--pflaume { color: var(--fv-pflaume); } .fv-fg--schiefer { color: var(--fv-schiefer); } .fv-fg--weiss { color: var(--fv-weiss); } /* Farbfelder */ .fv-swatches { list-style: none; margin: 0 0 var(--fv-space-64); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--fv-fuge); } .fv-swatch { display: flex; flex-direction: column; gap: var(--fv-space-4); min-height: 176px; padding: var(--fv-space-24); border-radius: var(--fv-radius-24); box-shadow: var(--fv-shadow-card); } .fv-swatch__name { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h3); } .fv-swatch__role { font-weight: var(--fv-fw-medium); } .fv-swatch__meta { font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; } .fv-swatch__meta:first-of-type { margin-top: auto; } /* Textregeln */ .fv-rules { list-style: none; margin: 0 0 var(--fv-space-64); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--fv-fuge); } .fv-rule { display: grid; grid-template-columns: 104px 1fr; gap: var(--fv-space-16); align-items: center; padding: var(--fv-space-16); border-radius: var(--fv-radius-16); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .fv-rule__sample { display: grid; place-items: center; min-height: 72px; border-radius: var(--fv-radius-12); font-weight: var(--fv-fw-bold); text-align: center; } .fv-rule__body { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-8); color: var(--fv-nachtblau); } .fv-rule__ratio { font-variant-numeric: tabular-nums; color: var(--fv-schiefer); } .fv-rule__text { flex-basis: 100%; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .fv-rule__state { grid-column: 2; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .fv-rule.is-verbot .fv-rule__sample { opacity: .55; } /* Verb-System */ .fv-verbs { list-style: none; margin: 0 0 var(--fv-space-64); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fv-fuge); } .fv-verbs__item { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-8); padding: var(--fv-space-24); padding-top: var(--fv-space-96); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .fv-verbs__block { position: absolute; inset: var(--fv-space-16) var(--fv-space-16) auto; height: var(--fv-space-64); border-radius: var(--fv-radius-16); background: var(--fv-verb, var(--fv-nachtblau)); } .fv-verbs__item[data-verb="foerdern"] { --fv-verb: var(--fv-verb-foerdern); } .fv-verbs__item[data-verb="verbinden"] { --fv-verb: var(--fv-verb-verbinden); } .fv-verbs__item[data-verb="unterstuetzen"] { --fv-verb: var(--fv-verb-unterstuetzen); } .fv-verbs__item[data-verb="entwickeln"] { --fv-verb: var(--fv-verb-entwickeln); } .fv-verbs__item[data-verb="werben"] { --fv-verb: var(--fv-verb-werben); } .fv-verbs__color, .fv-verbs__content { margin: 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } /* Typo-Skala: Groessen aus den Typo-Tokens */ .fv-scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .fv-scale__row { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: var(--fv-space-32); align-items: baseline; padding-block: var(--fv-space-24); border-top: 1px solid var(--fv-nebel); } .fv-scale__meta { display: flex; flex-direction: column; gap: var(--fv-space-4); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .fv-scale__meta strong { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .fv-scale__sample { margin: 0; color: var(--fv-nachtblau); text-wrap: balance; overflow-wrap: anywhere; } .fv-scale__sample--display { font-size: var(--fv-fs-display); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-display); letter-spacing: var(--fv-ls-display); } .fv-scale__sample--h1 { font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); } .fv-scale__sample--h2 { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .fv-scale__sample--h3 { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } .fv-scale__sample--lead { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); } .fv-scale__sample--body { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-body); } .fv-scale__sample--small { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .fv-scale__sample--zwischenruf { font-family: var(--fv-font-serif); font-style: italic; font-size: var(--fv-fs-zwischenruf); line-height: var(--fv-lh-zwischenruf); color: var(--fv-purpur); } .fv-scale__sample--button { font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: 1.25; } .fv-scale__sample--tag { font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; } @media (max-width: 720px) { .fv-scale__row { grid-template-columns: 1fr; gap: var(--fv-space-8); } .fv-rule { grid-template-columns: 88px 1fr; } } /* Bildmix (Musterseite): Bildflaechen Radius 40, Platzhalter fuer Personen, abstrakte Motive ohne Menschen */ .fv-bildmix { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .fv-bildmix__item { margin: 0; display: flex; flex-direction: column; gap: var(--fv-space-12); } .fv-bildmix__img { display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--fv-radius-40); background: var(--fv-nebel); color: var(--fv-schiefer); font-size: var(--fv-fs-small); text-align: center; } .fv-bildmix__cap { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } /* Hilfsraster der Musterseite (Komponentenzeilen) */ .fv-muster-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-fuge); margin-block: var(--fv-space-16); } .fv-muster-dark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--fv-fuge); padding: var(--fv-space-16); border-radius: var(--fv-radius-16); background: var(--fv-nachtblau); color: var(--fv-weiss); } .fv-muster-h { flex-basis: 100%; margin: 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); } .fv-faq-card summary { cursor: pointer; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h3); color: var(--fv-purpur); } /* Die Layoutregel "Folgesektion ohne Oberabstand" gilt fuer Musterflaechen nicht: jede hat ihren eigenen Grund */ .fv-muster.fv-muster.fv-muster.fv-muster.fv-muster { padding-top: var(--fv-section-y); } .fv-muster .fv-link { color: inherit; } .fv-muster-dark .fv-link { color: var(--fv-weiss); } /* sections/card-glow.css */ /* Manual-konform (Welle 2): kein farbiger Glow. Der Effekt ist nur noch eine dezente neutrale Kante (Nachtblau bzw. Weiss, niedrige Deckkraft) plus minimaler Tilt (max. 1 Grad). Auf dunklem Grund Weiss. Funktion, Sektion und Hooks bleiben unveraendert. card-glow: generische Karten-Interaktion fuer [data-glow-card] (JS: js/card-glow.js). 1-px-Kante mit Verlauf, die der Maus folgt (--mx/--my, pro Karte relativ), leichter Tilt (--glow-rx/--glow-ry, max. ca. 2.5 Grad), gleiche Kante bei :focus-visible. Touch (hover: none / pointer: coarse): keine Maus-Effekte. prefers-reduced-motion: kein Tilt, statische Kante. Stellschrauben pro Kartentyp: --glow-color (Kantenfarbe, Standard Verb-Akzent), --glow-color-2 (zweiter Ton, Lila), --glow-size, --glow-lift (Anheben bei Hover). Die Karte selbst ist der Link/Button (ein fokussierbares Element), Pseudo-Elemente ::before (Schimmer) und ::after (Kante) gehoeren diesem Baustein. */ [data-glow-card] { --glow-color: var(--fv-nachtblau); --glow-color-2: transparent; --glow-size: 240px; --glow-lift: 0px; --mx: 50%; --my: 0%; --glow-rx: 0deg; --glow-ry: 0deg; position: relative; isolation: isolate; } /* Kante: Verlauf nur im 1-px-Padding-Ring sichtbar (Mask-Exclude-Trick, haelt border-radius) */ [data-glow-card]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(var(--glow-size) circle at var(--mx) var(--my), var(--glow-color), color-mix(in srgb, var(--glow-color-2) 55%, transparent) 38%, transparent 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity var(--fv-duration) var(--fv-easing); } /* Schimmer: sehr leichter Lichtfleck innen, folgt derselben Position */ [data-glow-card]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(calc(var(--glow-size) * 1.4) circle at var(--mx) var(--my), color-mix(in srgb, var(--glow-color) 4%, transparent), transparent 70%); opacity: 0; transition: opacity .3s var(--ease, ease); } /* Fokus (Tastatur): gleiche Kante, rundum, ruhig. Der globale Fokusrahmen bleibt zusaetzlich (WCAG). */ [data-glow-card]:focus-visible::after { opacity: 1; background: var(--glow-color); } [data-glow-card]:focus-visible::before { opacity: 1; --mx: 50%; --my: 0%; } /* Hover nur auf echten Zeigegeraeten */ @media (hover: hover) and (pointer: fine) { [data-glow-card]:hover::after, [data-glow-card]:hover::before { opacity: 1; } } /* Tilt: nur transform, weich nachgefuehrt. JS setzt --glow-rx/--glow-ry gedrosselt per rAF. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { [data-glow-card] { transform: perspective(900px) translateY(var(--glow-lift)) rotateX(var(--glow-rx)) rotateY(var(--glow-ry)); transition: transform .32s cubic-bezier(.22, .61, .36, 1), background-color .25s; will-change: auto; } [data-glow-card].is-glow-active { will-change: transform; } } /* Reduzierte Bewegung: Kante statisch (oben mittig), kein Tilt */ @media (prefers-reduced-motion: reduce) { [data-glow-card] { --mx: 50% !important; --my: 0% !important; } [data-glow-card]::after, [data-glow-card]::before { transition: none; } } /* ---- Integration: Verb-Leiste im Hero (sections/hero.html). Dunkle Buehne: Kacheln sind Verbflaechen, die Kante ist ein feines Weiss, kein Farbverlauf. ---- */ .c-hero__verbs a[data-glow-card] { --glow-color: rgba(255, 255, 255, .55); --glow-color-2: transparent; --glow-size: 200px; transform-origin: 50% 100%; } .c-hero__verbs a[data-glow-card]::before { background: radial-gradient(calc(var(--glow-size) * 1.4) circle at var(--mx) var(--my), rgba(255, 255, 255, .08), transparent 70%); } .c-hero__verbs [data-verb="foerdern"] a[data-glow-card] { --glow-color: rgba(23, 29, 58, .35); } .c-hero__verbs [data-verb="foerdern"] a[data-glow-card]::before { background: radial-gradient(calc(var(--glow-size) * 1.4) circle at var(--mx) var(--my), rgba(23, 29, 58, .04), transparent 70%); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .c-hero__verbs a[data-glow-card], .c-hero__verbs a[data-glow-card]:hover { transform: perspective(900px) translateY(var(--glow-lift)) rotateX(var(--glow-rx)) rotateY(var(--glow-ry)); transition: transform .32s cubic-bezier(.22, .61, .36, 1), background-color .25s; } .c-hero__verbs a[data-glow-card]:hover, .c-hero__verbs a[data-glow-card]:focus-visible { --glow-lift: -4px; } } @media (prefers-reduced-motion: reduce) { .c-hero__verbs a[data-glow-card], .c-hero__verbs a[data-glow-card]:hover { transform: none; transition: background-color .25s; } } @media (hover: none), (pointer: coarse) { .c-hero__verbs a[data-glow-card]:hover { transform: none; } } /* sections/cards.css */ /* cards: Info-Karten (Preise, Mitgliedsgruppen) nach Handoff 8.5 und Polish-Runde 1 (R6, R7): .fv-card; je Karte Bild ODER freistehendes Icon (ohne Kachel), Metazeile, Titel, ein Satz, ein Link. Keine Tags, keine Verbkacheln. */ .c-cards__grid { display: grid; gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .c-info { display: flex; flex-direction: column; align-items: flex-start; } .c-info__icon { margin-bottom: var(--fv-space-24); } .c-info__image { display: block; inline-size: calc(100% + 2 * var(--fv-card-padding)); max-inline-size: none; margin: calc(-1 * var(--fv-card-padding)) calc(-1 * var(--fv-card-padding)) var(--fv-space-24); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--fv-radius-24) var(--fv-radius-24) 0 0; } .c-info__meta { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-info__title { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); margin: 0 0 var(--fv-space-12); } .c-info__text { font-size: var(--fv-fs-body); color: var(--fv-schiefer); } .c-info__more { margin: auto 0 0; padding-top: var(--fv-space-24); } /* Altmarkup in Inhalten: Meta als Tag und Icon-Kachel ruhig darstellen */ .c-info > .c-tag { margin-bottom: var(--fv-space-8); padding: 0; background: none; color: var(--fv-schiefer); font-weight: var(--fv-fw-regular); font-size: var(--fv-fs-small); } .c-info > .c-tag::before { content: none; } /* sections/chat-widget.css */ /* Chat-Widget "Vereins-Assistent" (partials/chat-widget.html, js/chat-widget.js), nach Brandmanual v1.0. Launcher = .fv-btn (Nachtblau, Radius 12, Purpur-Pfeil-Kachel), Panel = Weiss mit Kartenschatten und Radius 28, Eingabefeld und Chips in Nebel, Icons Lucide (message-circle-question, arrow-right, x). Keine Glas-/Blur-Flaechen, keine Pillen. */ .cw { --cw-gap: 16px; --cw-lift: 0px; --cw-launch-h: 48px; font-family: var(--fv-font-sans); color: var(--fv-nachtblau); } /* Anmerkungs-Leiste (Vorschau-Tool) belegt rechts unten ca. 16 bis 56 px: Launcher darueber */ .cw.cw--lift { --cw-lift: 52px; } .cw-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cw-ico { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Launcher (wie .fv-btn) ---------- */ .cw-launcher { position: fixed; right: var(--cw-gap); bottom: calc(var(--cw-gap) + var(--cw-lift)); z-index: 90; display: inline-flex; align-items: center; gap: var(--fv-btn-gap); min-height: var(--cw-launch-h); padding: var(--fv-space-8) var(--fv-space-8) var(--fv-space-8) 20px; border: 0; border-radius: var(--fv-radius-12); cursor: pointer; background: var(--fv-nachtblau); color: var(--fv-weiss); font: var(--fv-fw-bold) var(--fv-fs-button)/var(--fv-lh-button) var(--fv-font-sans); box-shadow: var(--fv-shadow-card); transition: background-color var(--fv-duration) var(--fv-easing); } .cw-launcher[hidden] { display: none; } /* Ruhezustand: solange ein Flow-Widget im Bild ist (belegt unten rechts) bzw. mobil im ersten Bildschirm, tritt der Launcher zurueck */ .cw-launcher { transition: background-color var(--fv-duration) var(--fv-easing), opacity var(--fv-duration) var(--fv-easing), transform var(--fv-duration) var(--fv-easing), visibility 0s; } .cw.cw--rest:not(.is-open) .cw-launcher { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--fv-duration) var(--fv-easing), transform var(--fv-duration) var(--fv-easing), visibility 0s linear var(--fv-duration); } .cw-launcher:hover { background: var(--fv-nachtblau-hover); } /* tech-qa: solange Mobilmenue oder Mega-Navigation offen sind, liegt der Launcher nicht darueber */ html.is-menu-open .cw:not(.is-open) .cw-launcher, html.is-sbmega-open .cw:not(.is-open) .cw-launcher { opacity: 0; visibility: hidden; pointer-events: none; } .cw-launcher:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .cw-launcher__tile { display: grid; place-items: center; flex: none; width: var(--fv-btn-arrow-size); height: var(--fv-btn-arrow-size); border-radius: var(--fv-radius-8); background: var(--fv-purpur); color: var(--fv-weiss); } .cw-launcher__close { display: none; } .cw-mark { display: block; overflow: visible; } .cw-mark__base { fill: var(--fv-nachtblau); } .cw-mark__violett { fill: var(--fv-violett); } .cw-mark__purpur { fill: var(--fv-purpur); } .cw-mark__rosa { fill: var(--fv-rosa); } .cw-mark__pflaume { fill: var(--fv-pflaume); } /* geoeffnet: Launcher wird zum Schliessen-Knopf */ .cw.is-open .cw-launcher { padding: 0; width: var(--cw-launch-h); justify-content: center; } .cw.is-open .cw-launcher__tile, .cw.is-open .cw-launcher__label { display: none; } .cw.is-open .cw-launcher__close { display: block; } /* ---------- Panel ---------- */ .cw-backdrop { display: none; } .cw-panel { position: fixed; z-index: 91; right: var(--cw-gap); bottom: calc(var(--cw-gap) + var(--cw-lift) + var(--cw-launch-h) + 12px); width: min(408px, calc(100vw - 2 * var(--cw-gap))); height: min(660px, calc(100vh - var(--cw-gap) * 2 - var(--cw-lift) - var(--cw-launch-h) - 12px - 16px)); display: flex; flex-direction: column; overflow: hidden; background: var(--fv-weiss); border-radius: var(--fv-radius-28); box-shadow: var(--fv-shadow-card); opacity: 0; transform: translateY(8px); transition: opacity var(--fv-duration) var(--fv-easing), transform var(--fv-duration) var(--fv-easing); } .cw-panel[hidden] { display: none; } .cw.is-visible .cw-panel { opacity: 1; transform: none; } .cw-head { display: flex; align-items: center; gap: 14px; padding: 20px 18px 20px 20px; background: var(--fv-nachtblau); color: var(--fv-weiss); --fv-focus: var(--fv-rosa); } .cw-head__tile { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--fv-radius-12); background: var(--fv-weiss); } .cw-head__tile .cw-mark { width: 36px; height: auto; } .cw-head__text { flex: 1; min-width: 0; } .cw-head__title { margin: 0; font: var(--fv-fw-bold) 19px/1.15 var(--fv-font-sans); letter-spacing: var(--fv-ls-h3); color: var(--fv-weiss); } .cw-head__sub { margin: 4px 0 0; font: var(--fv-fw-regular) 13.5px/1.35 var(--fv-font-sans); color: var(--fv-weiss); } .cw-head__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--fv-radius-12); background: var(--fv-nachtblau-hover); color: var(--fv-weiss); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } .cw-head__close:hover { background: var(--fv-violett); } .cw-head__close:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .cw-status { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 20px; background: var(--fv-papier); font-size: 13px; line-height: 1.4; color: var(--fv-schiefer); } .cw-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 8px; scroll-behavior: smooth; } .cw-log { display: flex; flex-direction: column; gap: 14px; } .cw-rubrik { margin: 0 0 8px; font-size: 14px; font-weight: var(--fv-fw-bold); line-height: 1.3; color: var(--fv-schiefer); } .cw-msg { display: flex; flex-direction: column; max-width: 88%; } .cw-msg__who { margin: 0 0 6px; font-size: 13px; font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .cw-msg__bubble { padding: 12px 16px; border-radius: var(--fv-radius-16); font-size: 15.5px; line-height: 1.5; } .cw-msg__bubble p { margin: 0; } .cw-msg__bubble p + p { margin-top: .6em; } .cw-msg--bot { align-self: flex-start; } .cw-msg--bot .cw-msg__bubble { background: var(--fv-nebel); color: var(--fv-nachtblau); border-top-left-radius: var(--fv-radius-8); } .cw-msg--user { align-self: flex-end; } .cw-msg--user .cw-msg__bubble { background: var(--fv-nachtblau); color: var(--fv-weiss); border-top-right-radius: var(--fv-radius-8); } .cw-sources { margin-top: 10px; padding-left: 2px; } .cw-sources .cw-rubrik { margin-bottom: 6px; font-size: 13px; } .cw-sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .cw-source { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: var(--fv-radius-10); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); font-size: 13.5px; font-weight: var(--fv-fw-bold); line-height: 1.25; text-decoration: none; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .cw-source::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("../assets/icons/lucide/arrow-right.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/arrow-right.svg") center / contain no-repeat; } .cw-source:hover { background: var(--fv-purpur); color: var(--fv-weiss); text-decoration: none; } .cw-source:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .cw-typing .cw-msg__bubble { padding: 14px 16px; } .cw-typing__dots { display: inline-flex; gap: 5px; align-items: center; } .cw-typing__dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--fv-violett); animation: cw-dot 1.2s ease-out infinite; } .cw-typing__dots i:nth-child(2) { background: var(--fv-purpur); animation-delay: .15s; } .cw-typing__dots i:nth-child(3) { background: var(--fv-rosa); animation-delay: .3s; } @keyframes cw-dot { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } .cw-suggest { margin-top: 20px; } .cw-suggest[hidden] { display: none; } .cw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cw-chip { min-height: 40px; padding: 8px 16px; border-radius: var(--fv-radius-12); cursor: pointer; border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); font: var(--fv-fw-bold) 14.5px/1.25 var(--fv-font-sans); text-align: left; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .cw-chip:hover { background: var(--fv-nachtblau); color: var(--fv-weiss); } .cw-chip:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } /* ---------- Fuss: Datenschutz, Eingabe ---------- */ .cw-foot { padding: 10px 16px 14px; background: var(--fv-weiss); } .cw-privacy { margin: 4px 0 10px; padding: 12px 14px; border-radius: var(--fv-radius-12); background: var(--fv-papier); font-size: 13px; line-height: 1.45; color: var(--fv-schiefer); } .cw-privacy[hidden] { display: none; } .cw-privacy p { margin: 0; } .cw-privacy__title { font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); margin-bottom: 3px !important; font-size: 13.5px; } .cw-privacy a, .cw-privacy-short a { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .cw-privacy a:hover, .cw-privacy-short a:hover { text-decoration-thickness: 4px; } .cw-privacy-short { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 2px 8px; font-size: 12.5px; color: var(--fv-schiefer); } .cw-privacy-short[hidden] { display: none; } .cw-reset { flex: none; border: 0; background: none; padding: 4px 2px; cursor: pointer; font: var(--fv-fw-bold) 12.5px/1.2 var(--fv-font-sans); color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .cw-reset:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); border-radius: var(--fv-radius-8); } /* Eingabefeld: Nebel-Feld ohne Kontur, Fokus = 3-px-Ring */ .cw-form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; background: var(--fv-nebel); border-radius: var(--fv-radius-12); } .cw-form:focus-within { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .cw-input { flex: 1; min-height: 40px; max-height: 132px; resize: none; border: 0; outline: 0; background: transparent; padding: 9px 0; font: var(--fv-fw-regular) 16px/1.4 var(--fv-font-sans); color: var(--fv-nachtblau); } .cw-input::placeholder { color: var(--fv-schiefer); } .cw-send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--fv-radius-8); cursor: pointer; background: var(--fv-purpur); color: var(--fv-weiss); transition: background-color var(--fv-duration) var(--fv-easing); } .cw-send:hover { background: var(--fv-violett); } .cw-send:disabled { opacity: .5; cursor: progress; } .cw-send:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .cw-hint { margin: 6px 4px 0; font-size: 12px; color: var(--fv-schiefer); } /* ---------- Mobil: Vollbild-Sheet ---------- */ @media (max-width: 599px) { .cw { --cw-gap: 12px; } /* mobil kompakt: nur die Purpur-Kachel als 44-px-Knopf, Beschriftung bleibt fuer Screenreader */ .cw { --cw-launch-h: 44px; } .cw-launcher { padding: 6px; min-height: var(--cw-launch-h); width: var(--cw-launch-h); justify-content: center; gap: 0; } .cw-launcher__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cw-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 91; background: color-mix(in srgb, var(--fv-nachtblau) 40%, transparent); } .cw-panel { inset: 0; right: 0; bottom: 0; z-index: 92; width: 100%; height: 100%; height: 100dvh; border-radius: 0; transform: translateY(16px); } .cw-head { padding: max(14px, env(safe-area-inset-top)) 14px 14px 16px; } .cw-head__tile { width: 42px; height: 42px; } .cw-head__tile .cw-mark { width: 31px; } .cw-head__title { font-size: 18px; } .cw-head__close { width: 44px; height: 44px; } .cw-status { padding: 9px 16px; } .cw-body { padding: 16px 16px 8px; } .cw-foot { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); } .cw-hint { display: none; } .cw.is-open .cw-launcher { display: none; } html.cw-locked, html.cw-locked body { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .cw-launcher, .cw-panel, .cw-chip, .cw-source, .cw-send, .cw-head__close { transition: none; } .cw-panel { transform: none; } .cw-body { scroll-behavior: auto; } .cw-typing__dots i { animation: none; opacity: .8; } } @media print { .cw { display: none !important; } } /* sections/checklist.css */ /* Sektion checklist: Breite der Liste; Kachel, Haekchen und Text liefert .fv-checklist (components.css) */ .fv-checklist-sec .fv-checklist { max-width: 720px; } /* sections/contact-card.css */ /* contact-card (Handoff 8.5, 8.4): Kontaktkarten weiss, Radius 24, Kartenschatten; Icon-Kacheln mail, phone, map-pin (Lucide) */ .c-contact__head { max-inline-size: 760px; margin-bottom: var(--fv-space-48); } .c-contact__title { font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); margin: 0 0 var(--fv-space-16); } .c-contact__intro { font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); margin: 0; max-inline-size: var(--fv-measure); } /* Anmerkung 88 (13.10.2026): Abstaende beruhigt (Fuge 16->24, Karten nicht mehr auf gleiche Hoehe gestreckt) und Lesbarkeit der Themen-/Mail-Liste verbessert (Abstand zwischen den Zeilen, vorher 0). */ .c-contact__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--fv-space-24); } .c-contact__card { background: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); box-shadow: var(--fv-shadow-card); display: flex; flex-direction: column; gap: var(--fv-space-12); --fv-focus: var(--fv-nachtblau); } .c-contact__card .c-prose li + li { margin-top: var(--fv-space-8); } .c-contact__label { margin: 0; display: flex; align-items: center; gap: var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-contact__block { flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--fv-verb, var(--fv-nachtblau)); } .c-contact__name { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-nachtblau); } .c-contact__text { font-size: var(--fv-fs-body); color: var(--fv-nachtblau); } .c-contact__text p:last-child { margin-bottom: 0; } .c-contact__line { margin: 0; font-size: var(--fv-fs-body); display: flex; align-items: center; gap: var(--fv-space-12); } .c-contact__ico { flex: none; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--fv-radius-8); background: var(--fv-purpur); color: var(--fv-weiss); } .c-contact__ico .fv-icon { inline-size: 18px; block-size: 18px; vertical-align: 0; } .c-contact__line a:not(.c-contact__link) { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; overflow-wrap: anywhere; } @media (max-width: 1024px) { .c-contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .c-contact__grid { grid-template-columns: 1fr; } } /* Verbfarbe aus data-verb */ .c-contact__card[data-verb="foerdern"] { --fv-verb: var(--fv-verb-foerdern); } .c-contact__card[data-verb="verbinden"] { --fv-verb: var(--fv-verb-verbinden); } .c-contact__card[data-verb="unterstuetzen"] { --fv-verb: var(--fv-verb-unterstuetzen); } .c-contact__card[data-verb="entwickeln"] { --fv-verb: var(--fv-verb-entwickeln); } .c-contact__card[data-verb="werben"] { --fv-verb: var(--fv-verb-werben); } /* sections/cta-band.css */ /* cta-band (Brandmanual 8.10, Polish-Runde 1 R5): Nachtblau mit Glow, Radius 64, Headline mit Markierung, Button auf dunkel. Rechts Freisteller vor Purpur-Baustein, Kopf ragt ueber die Oberkante, unten an der Panelkante angeschnitten (Layout-Muster 1/9). Ohne Freisteller: Baustein mit abstraktem Motiv statt Icon. Panel traegt .is-nacht. */ .c-cta-band__panel { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--fv-space-32); align-items: center; padding: clamp(32px, 6vw, 80px); border-radius: var(--fv-radius-64); } .c-cta-band__copy { position: relative; z-index: 1; } .c-cta-band__headline { margin: 0 0 var(--fv-space-16); max-width: 16ch; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); font-weight: var(--fv-fw-bold); color: var(--fv-weiss); text-wrap: balance; } .c-cta-band__text { margin: 0; max-width: 46ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-weiss); } .c-cta-band__link { color: var(--fv-weiss); font-weight: var(--fv-fw-bold); } .c-cta-band__stage { position: relative; justify-self: center; inline-size: min(100%, 300px); aspect-ratio: 5 / 6; margin-bottom: calc(-1 * clamp(32px, 6vw, 80px)); } .c-cta-band__block { position: absolute; inset: 22% 4% 0 4%; overflow: hidden; border-radius: var(--fv-radius-40) var(--fv-radius-40) 0 0; background-color: var(--fv-purpur); background-image: var(--fv-gradient-glow); } .c-cta-band__cut { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); inline-size: auto; block-size: 100%; max-inline-size: 120%; object-fit: contain; object-position: bottom; } /* Anmerkung 89 (Lea, 12.10.2026, /verein/): Der Cut-Slot ist fuer freigestellte Fotos gedacht (Kopf ragt oben raus, unten an der Kachel angeschnitten). Ein flaches Logo in diesem Slot hat keine passende Silhouette und wirkte dadurch wie ein fehlendes Bild (leere Purpur-Flaeche oben, Logo unten ueberstehend). Fuer Logos aus assets/brand/: eigene, mittig zentrierte Box mit Rand auf allen Seiten, ohne Beschnitt, ohne Ueberstand. 61% = vertikale Mitte des Purpur-Blocks (der bei 22% der Kachelhoehe beginnt, siehe .c-cta-band__block). */ .c-cta-band__cut[src*="/assets/brand/logo"] { top: 61%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); inline-size: 60%; block-size: auto; max-inline-size: 60%; object-fit: contain; object-position: center; } .c-cta-band__motiv { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; } .c-cta-band__stage--motiv { aspect-ratio: 1; } .c-cta-band__stage--motiv .c-cta-band__block { inset: 0; border-radius: var(--fv-radius-40); } .c-cta-band__panel:has(.c-cta-band__stage--motiv) .c-cta-band__stage { margin-bottom: 0; } @media (min-width: 900px) { .c-cta-band__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-block: clamp(48px, 6vw, 96px); } .c-cta-band__stage { justify-self: end; align-self: end; inline-size: min(100%, 380px); margin-bottom: calc(-1 * clamp(48px, 6vw, 96px)); } .c-cta-band__stage--motiv { align-self: center; } } @media (max-width: 899px) { .c-cta-band__stage { inline-size: min(82%, 300px); } .c-cta-band__stage--motiv { aspect-ratio: 16 / 10; inline-size: 100%; } } /* Variante echtes Foto (Feld photo): ruhige Bildflaeche ohne Glow, etwas hochformatiger auf Desktop */ .c-cta-band__stage--photo { margin: 0; } .c-cta-band__stage--photo .c-cta-band__block { background: var(--fv-nebel); } @media (min-width: 900px) { .c-cta-band__stage--photo { aspect-ratio: 4 / 5; inline-size: min(100%, 400px); } } /* Modifier start (Feld modifier, Startseite Welle A2): Headline breiter (qa runde-6: 16ch zu schmal), Text etwas ruhiger. Basis bleibt. */ .c-cta-band--start .c-cta-band__headline { max-width: 20ch; } .c-cta-band--start .c-cta-band__text { max-width: 44ch; } .c-cta-band--start .c-actions { margin-top: var(--fv-space-32); } /* sections/deco.css */ /* Abstrakte Komposition aus Bausteinen (partials/deco.html), Brandmanual v1.0 Abschnitt 7 und 9. Nur abgerundete Rechtecke (Radius 10 bis 20 % der kurzen Seite), Fuge 16 zwischen den Bausteinen, keine Kreise, Ringe, Boegen, Diagonalen, kein Glas, keine Koernung, keine radialen Verlaeufe. Hoechstens zwei Akzentfarben je Flaeche: Verbfarbe plus Nachtblau (auf dunklem Grund Weiss), dazu Nebel als ruhige Flaeche. Varianten (data-deco): ringe (Geruest) | pfade (Verbund) | raster | glas (hoher Baustein) | auto (nach Verb: foerdern/werben = ringe, verbinden = pfade, unterstuetzen = glas, entwickeln = raster). */ .deco { --deco-accent: var(--fv-verb-foerdern); --deco-base: var(--fv-nachtblau); --deco-soft: var(--fv-nebel); --deco-ground: var(--fv-papier); --deco-line: var(--fv-schiefer); /* Variante (Standard = ringe) */ --g-o: 0; --r-o: 1; --p-o: 0; --gl-o: 0; position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; pointer-events: none; color: var(--fv-nachtblau); } /* Verbfarbe als Akzent; bei foerdern ist Nachtblau schon Grundfarbe, daher Rosa als zweite Farbe (Logo: Flaeche links) */ .deco[data-verb="foerdern"] { --deco-accent: var(--fv-rosa); } .deco[data-verb="verbinden"] { --deco-accent: var(--fv-verb-verbinden); } .deco[data-verb="unterstuetzen"] { --deco-accent: var(--fv-verb-unterstuetzen); } .deco[data-verb="entwickeln"] { --deco-accent: var(--fv-verb-entwickeln); } .deco[data-verb="werben"] { --deco-accent: var(--fv-verb-werben); } .deco-grid, .deco-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .deco-grid, .deco-ring, .deco-paths, .deco-glass { transition: opacity .6s var(--fv-easing); } /* ---- Raster aus Bausteinzellen ---- */ .deco-grid { opacity: var(--g-o); } .deco-cells__soft { fill: var(--deco-soft); } .deco-cells__key, .deco-cells__bar { fill: var(--deco-accent); } .deco-cells__base { fill: var(--deco-base); } /* ---- Geruest (Variante ringe) ---- */ .deco-ring { opacity: var(--r-o); } .deco-ring__base { fill: var(--deco-base); } .deco-ring__accent, .deco-ring__bar { fill: var(--deco-accent); } .deco-ring__soft { fill: var(--deco-soft); } /* ---- Verbund (Variante pfade): orthogonale Verbindungen, Knoten als Bausteine ---- */ .deco-paths { opacity: var(--p-o); } .deco-paths__flow { fill: none; stroke: var(--deco-line); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 6 10; stroke-linecap: round; vector-effect: non-scaling-stroke; } .deco-paths__hub { fill: var(--deco-accent); } .deco-paths__node { fill: var(--deco-base); } .deco-paths__node--soft { fill: var(--deco-accent); } .deco-paths__labels { fill: currentColor; font-family: var(--fv-font-sans); font-size: 16px; font-weight: var(--fv-fw-bold); } @container (max-width: 380px) { .deco-paths__labels { display: none; } } /* ---- Hoher Baustein (Variante glas; Name historisch, kein Glaseffekt mehr) ---- */ .deco-glass { position: absolute; left: 50%; top: 14%; width: 26%; height: 72%; opacity: var(--gl-o); border-radius: clamp(16px, 4cqi, 40px); background-color: var(--deco-accent); } .deco-glass i { position: absolute; right: calc(100% + 16px); bottom: 0; width: 110%; height: 46%; border-radius: clamp(12px, 3cqi, 28px); background-color: var(--deco-base); } .deco-glass i::after { content: ""; position: absolute; left: 0; bottom: calc(100% + 16px); width: 64%; height: 34%; border-radius: clamp(8px, 2cqi, 16px); background-color: var(--deco-soft); } /* ---- Koernung: entfaellt laut Manual (Element bleibt fuer Grav-Kompatibilitaet) ---- */ .deco-grain { display: none; } /* ================= Varianten ================= */ .deco[data-deco="pfade"], .deco[data-deco="auto"][data-verb="verbinden"] { --g-o: 0; --r-o: 0; --p-o: 1; --gl-o: 0; } .deco[data-deco="raster"], .deco[data-deco="auto"][data-verb="entwickeln"] { --g-o: 1; --r-o: 0; --p-o: 0; --gl-o: 0; } .deco[data-deco="glas"], .deco[data-deco="auto"][data-verb="unterstuetzen"] { --g-o: 0; --r-o: 0; --p-o: 0; --gl-o: 1; } /* Listen (Galerie): Varianten reihum, damit Kacheln nicht gleich aussehen */ .c-gal__item:nth-child(4n+2) .deco[data-deco="auto"] { --g-o: 0; --r-o: 0; --p-o: 1; --gl-o: 0; } .c-gal__item:nth-child(4n+3) .deco[data-deco="auto"] { --g-o: 1; --r-o: 0; --p-o: 0; --gl-o: 0; } .c-gal__item:nth-child(4n+4) .deco[data-deco="auto"] { --g-o: 0; --r-o: 0; --p-o: 0; --gl-o: 1; } /* ================= Bewegung (sehr langsam; laeuft nur mit .is-live aus js/ambient.js) ================= */ @media (prefers-reduced-motion: no-preference) { .deco-paths__flow { animation: deco-flow 6s linear infinite; animation-play-state: paused; } .deco.is-live .deco-paths__flow { animation-play-state: running; } } @keyframes deco-flow { to { stroke-dashoffset: -32; } } /* ================= Einbau in Sektionen (Bildmodus abstrakt) ================= */ /* Bildflaeche auf hellem Grund: Papier, Radius 40 wie ein Foto */ .c-text-media__figure > .deco { aspect-ratio: 4 / 3; background-color: var(--deco-ground); border-radius: var(--fv-radius-40); } /* R4 (Polish-Runde 1): in Bildflaechen keine Zierstriche/Balken, die nicht als Gegenstueck einrasten; ruhige Bausteine bleiben */ .c-text-media__figure > .deco :is(.deco-ring__bar, .deco-ring__bar + .deco-ring__soft, .deco-cells__bar) { display: none; } .c-verb__media .deco, .c-gal__media .deco { position: absolute; inset: 0; background-color: var(--deco-ground); } .c-gal__media:has(.deco) { min-height: 220px; } /* Dunkler Grund (Event-Kopf, Buehnen, Hero-Bildflaeche): Grundbausteine Weiss, ruhige Flaechen als leichter Weiss-Anteil */ .c-evh .deco, .is-stage .deco, .is-dark .deco, .c-hero__frame .deco, .c-awards--stage .deco { --deco-base: var(--fv-weiss); --deco-soft: color-mix(in srgb, var(--fv-weiss) 14%, transparent); --deco-ground: transparent; --deco-line: var(--fv-weiss); color: var(--fv-weiss); } .c-hero__frame .deco[data-verb="foerdern"], .c-evh .deco[data-verb="foerdern"] { --deco-accent: var(--fv-rosa); } .c-evh__deco { position: absolute; z-index: -2; top: 0; bottom: 0; left: 46%; right: 0; } .c-evh--right .c-evh__deco { left: 0; right: 46%; } /* Buehnen: keine Beschriftung der Knoten (konkurriert mit der Headline) */ .c-hero .deco-paths__labels, .c-evh .deco-paths__labels, .c-awards .deco-paths__labels { display: none; } .c-evh__deco > .deco { position: absolute; inset: 0; } .c-awards__stage--deco > .deco { position: absolute; inset: 0 40% 0 0; } @media (max-width: 767px) { .c-evh__deco { position: relative; inset: auto; aspect-ratio: 4 / 3; z-index: 0; } .c-awards__stage--deco > .deco { inset: 0; } } /* sections/donation-band.css */ /* donation-band: Spendenkonto als Text, Hauptverb unterstuetzen = Rosa-Flaeche mit Nachtblau-Text (nie Weiss auf Rosa). Variante data-verb="foerdern": Nachtblau mit Weiss. Karte weiss, Kartenschatten, kein Rand. Kein Formular. */ .c-donate__panel { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(32px, 5vw, 72px); border-radius: var(--fv-radius-64); background-color: var(--fv-rosa); color: var(--fv-nachtblau); --link: var(--fv-nachtblau); --fv-link-underline: var(--fv-nachtblau); --fv-focus: var(--fv-nachtblau); } .c-donate__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--fv-gradient-glow); pointer-events: none; } @media (min-width: 960px) { .c-donate__panel { grid-template-columns: 1.05fr .95fr; } } .c-donate__copy, .c-donate__card { position: relative; } .c-donate__title { margin: 0 0 var(--fv-space-16); max-width: 18ch; color: var(--fv-nachtblau); text-wrap: balance; } .c-donate__text { max-width: 52ch; font-size: var(--fv-fs-body); color: var(--fv-nachtblau); } .c-donate__text a, .c-donate__link { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-donate__card { padding: clamp(24px, 3vw, 36px); border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); color: var(--fv-nachtblau); box-shadow: var(--fv-shadow-card); } .c-donate__card-title { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); } .c-donate__account { margin: 0; display: grid; } .c-donate__row { display: grid; gap: var(--fv-space-4); padding: var(--fv-space-16) 0; background-image: linear-gradient(var(--fv-nebel), var(--fv-nebel)); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; } .c-donate__row:first-child { background-image: none; padding-top: 0; } @media (min-width: 560px) { .c-donate__row { grid-template-columns: 150px 1fr; gap: var(--fv-space-16); align-items: baseline; } } .c-donate__row dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-donate__row dd { margin: 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .c-donate__row dd .c-ph { font-weight: var(--fv-fw-semibold); font-size: var(--fv-fs-small); } .c-donate__account-note { margin: var(--fv-space-16) 0 0; padding-top: var(--fv-space-16); background-image: linear-gradient(var(--fv-nebel), var(--fv-nebel)); background-size: 100% 2px; background-repeat: no-repeat; background-position: top; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-donate__note { margin: var(--fv-space-24) auto 0; max-width: 820px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); text-align: center; } /* Variante foerdern: Nachtblau */ .c-donate[data-verb="foerdern"] .c-donate__panel { background-color: var(--fv-nachtblau); color: var(--fv-weiss); --link: var(--fv-weiss); --fv-link-underline: var(--fv-rosa); --fv-focus: var(--fv-rosa); } .c-donate[data-verb="foerdern"] :is(.c-donate__title, .c-donate__text, .c-donate__text a, .c-donate__link) { color: var(--fv-weiss); } .c-donate[data-verb="foerdern"] .fv-btn { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .c-donate[data-verb="foerdern"] .fv-mark--nachtblau { background-color: var(--fv-rosa); color: var(--fv-nachtblau); } /* sections/downloads.css */ /* downloads (Handoff 8.5): Dokumentliste als weisse Karten (Radius 24, Kartenschatten). Icon-Kachel in Verbfarbe mit Lucide file-text; ohne Datei sichtbarer Platzhalter. */ .c-downloads__list { display: grid; gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-download { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 32px); align-items: center; padding: var(--fv-card-padding); background: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); box-shadow: var(--fv-shadow-card); --fv-focus: var(--fv-nachtblau); } .c-download__doc { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: var(--fv-radius-icon-tile); background: var(--fv-verb, var(--fv-nachtblau)); color: var(--fv-verb-on, var(--fv-weiss)); } .c-download__doc .fv-icon { inline-size: 32px; block-size: 32px; vertical-align: 0; } .c-download[data-verb="unterstuetzen"] .c-download__doc, .c-download[data-verb="werben"] .c-download__doc { color: var(--fv-nachtblau); } .c-download.is-pending .c-download__doc { background: var(--fv-nebel); color: var(--fv-schiefer); } .c-download__cat { margin: 0 0 var(--fv-space-4); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-download__title { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); color: var(--fv-nachtblau); } .c-download__text { margin: var(--fv-space-8) 0 0; color: var(--fv-schiefer); max-width: var(--fv-measure); } .c-download__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-download__meta span + span::before { content: ""; display: inline-block; inline-size: 5px; block-size: 5px; margin-right: 14px; border-radius: 1.5px; background: var(--fv-schiefer); vertical-align: middle; } .c-download__btn { white-space: nowrap; } .c-download__btn--pending { display: inline-flex; align-items: center; padding: var(--fv-space-8) var(--fv-space-12); border-radius: var(--fv-radius-12); background: var(--fv-nebel); font-size: var(--fv-fs-small); } .c-download__btn--pending .c-ph { background: none; padding: 0; } .c-downloads__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } @media (max-width: 767px) { .c-download { grid-template-columns: auto 1fr; } .c-download__doc { inline-size: 48px; block-size: 48px; align-self: start; } .c-download__doc .fv-icon { inline-size: 24px; block-size: 24px; } .c-download__btn { grid-column: 1 / -1; justify-self: start; } } /* Verbfarbe aus data-verb */ .c-download[data-verb="foerdern"] { --fv-verb: var(--fv-verb-foerdern); } .c-download[data-verb="verbinden"] { --fv-verb: var(--fv-verb-verbinden); } .c-download[data-verb="unterstuetzen"] { --fv-verb: var(--fv-verb-unterstuetzen); } .c-download[data-verb="entwickeln"] { --fv-verb: var(--fv-verb-entwickeln); } .c-download[data-verb="werben"] { --fv-verb: var(--fv-verb-werben); } /* sections/engagement-3d.css */ /* Sektion engagement-3d (Kopf /engagement/): Bildmarke als Gerüst, Bausteine docken an. Agent engagement3d, 06.10.2026. Brandmanual v1.0 (w2-f-erzaehl): Bildmarke in 3D erlaubt (A14, Alexander), Bühne Papier Radius 40, Etiketten als weiße Bausteine (Radius 12, Kartenschatten), CTA .fv-btn, keine Pillen, keine Kreise, kein Glow. Ohne JS, ohne WebGL2 und bei reduzierter Bewegung: SVG-Komposition, Labels per Prozent darüber gelegt. Mit 3D (.is-3d): Canvas füllt die Bühne, js/engagement-3d.js setzt --x/--y je Label (Pixel in der Bühne). */ .c-e3d { position: relative; overflow: hidden; background: var(--fv-weiss); padding-block: clamp(28px, 3.4vw, 48px) clamp(40px, 5vw, 72px); } .c-e3d__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .c-e3d__copy { position: relative; z-index: 2; align-self: start; padding-top: clamp(0px, 2vw, 24px); } .c-e3d__copy .c-crumbs { margin-bottom: clamp(32px, 6vw, 88px); } .c-e3d__headline { font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h1); line-height: var(--fv-lh-h1); color: var(--fv-nachtblau); margin: 0; hyphens: manual; text-wrap: balance; } .c-e3d__intro { hyphens: manual; margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); max-width: 30ch; text-wrap: pretty; } /* Bühne: helle, ruhige Wand für Licht und Kontaktschatten */ .c-e3d__stage { position: relative; height: clamp(500px, 68vh, 680px); border-radius: var(--fv-radius-40); background: var(--fv-papier); isolation: isolate; } .c-e3d__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; border-radius: inherit; opacity: 0; transition: opacity .6s var(--fv-easing); } .c-e3d.is-3d .c-e3d__stage canvas { opacity: 1; } /* Standbild-Figur (Fallback) */ .c-e3d__fig { position: absolute; left: 50%; top: 54%; height: 70%; aspect-ratio: 1025 / 1097; transform: translate(-50%, -50%); z-index: 1; } .c-e3d__still { display: block; width: 100%; height: 100%; transition: opacity .5s var(--fv-easing); } /* CLS: Die Figur behält im 3D-Modus ihre Geometrie (kein Layoutsprung beim Umschalten); die Etiketten werden per transform an die projizierten Punkte gesetzt (--bx/--by = Ausgangslage in Bühnenpixeln, gesetzt von engagement-3d.js). */ .c-e3d.is-3d .c-e3d__still { opacity: 0; visibility: hidden; } /* Labels */ .c-e3d__pins { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; } .c-e3d__pin { --pin: var(--fv-nachtblau); --pin-ink: var(--fv-nachtblau); position: absolute; left: var(--fx); top: var(--fy); width: 0; height: 0; } .c-e3d__pin[data-verb="werben"] { --pin: var(--fv-pflaume); --pin-ink: var(--fv-nachtblau); --fx: 89.7%; --fy: 79.8%; } .c-e3d__pin[data-verb="unterstuetzen"] { --pin: var(--fv-rosa); --pin-ink: var(--fv-nachtblau); --fx: 12.8%; --fy: 79.4%; } .c-e3d__pin[data-verb="verbinden"] { --pin: var(--fv-purpur); --pin-ink: var(--fv-purpur); --fx: 59.5%; --fy: 39.3%; } .c-e3d__pin[data-verb="entwickeln"] { --pin: var(--fv-violett); --pin-ink: var(--fv-violett); --fx: 53.7%; --fy: 2.7%; } /* Andockpunkt: kleine Baustein-Kachel in Verbfarbe auf weißem Sockel; Verbindungsstrich zum Etikett */ .c-e3d__pin::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--pin); outline: 3px solid var(--fv-weiss); transform: translate(-50%, -50%); } .c-e3d__pin::after { content: ""; position: absolute; left: -0.5px; top: 8px; width: 1px; height: 14px; background: var(--fv-schiefer); } .c-e3d__pin--open::after { top: auto; bottom: 8px; } .c-e3d__pin[data-verb="verbinden"]::after { display: none; } .c-e3d__tag { position: absolute; left: 0; top: 24px; transform: translateX(calc(-50% + var(--dx, 0px))); display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px 9px 13px; border-radius: var(--fv-radius-12); background: var(--fv-weiss); color: var(--fv-nachtblau); font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-button); white-space: nowrap; text-decoration: none; box-shadow: var(--fv-shadow-card); pointer-events: auto; transition: background-color var(--fv-duration) var(--fv-easing), translate .3s var(--fv-easing); } a.c-e3d__tag:hover, a.c-e3d__tag:focus-visible, .c-e3d__pin.is-hot a.c-e3d__tag { background: var(--fv-nachtblau); color: var(--fv-weiss); translate: 0 -2px; text-decoration: none; } a.c-e3d__tag:hover .c-e3d__sub, a.c-e3d__tag:focus-visible .c-e3d__sub, .c-e3d__pin.is-hot a.c-e3d__tag .c-e3d__sub { color: var(--fv-weiss); } a.c-e3d__tag:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-e3d__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--pin); flex: none; align-self: center; } .c-e3d__sub { font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } /* Mitte: Etikett sitzt direkt auf dem Baustein */ .c-e3d__pin[data-verb="verbinden"] .c-e3d__tag { top: 0; transform: translate(calc(-50% + var(--dx, 0px)), -50%); } .c-e3d__pin[data-verb="verbinden"]::before { display: none; } /* Freier Platz: Etikett mit gestricheltem Rand, darunter der CTA, alles oberhalb des Bausteins */ .c-e3d__card { position: absolute; left: 0; bottom: 24px; transform: translateX(calc(-50% + var(--dx, 0px))); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: auto; } .c-e3d__pin--open[data-side="r"]::after { top: -0.5px; bottom: auto; left: 8px; width: 16px; height: 1px; } .c-e3d__pin--open[data-side="r"] .c-e3d__card { left: 24px; bottom: auto; top: 0; transform: translate(var(--dx, 0px), -50%); align-items: flex-start; } .c-e3d__card .c-e3d__tag { position: static; transform: none; background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-e3d__cta { white-space: nowrap; } .c-e3d__pin.is-hot .c-e3d__cta { background: var(--fv-nachtblau-hover); } /* Zielkarte kurz hervorheben, wenn ein Label angeklickt wurde (Karte gehört zur Sektion cards) */ .c-card.is-e3d-flash { animation: e3d-flash 1.6s var(--fv-easing) 1; } @keyframes e3d-flash { 0%, 100% { outline: 3px solid transparent; outline-offset: 4px; } 25% { outline: 3px solid var(--fv-rosa); outline-offset: 4px; } } /* 3D-Modus: Labels erscheinen erst, wenn ihr Baustein angedockt ist. Kontrast: Etiketten werden nie halbtransparent (Text bleibt 100 % deckend). Sie erscheinen per Aufdecken (clip-path), Andockpunkt und Strich per Skalierung. */ .c-e3d.is-3d .c-e3d__pin { transform: translate3d(calc(var(--x, -999px) - var(--bx, 0px)), calc(var(--y, -999px) - var(--by, 0px)), 0); visibility: hidden; transition: visibility 0s .45s; } .c-e3d.is-3d .c-e3d__pin.is-on, .c-e3d.is-3d .c-e3d__pin:focus-within { visibility: visible; transition: visibility 0s; } .c-e3d.is-3d .c-e3d__pin > .c-e3d__tag, .c-e3d.is-3d .c-e3d__pin > .c-e3d__card { clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--fv-easing); } .c-e3d.is-3d .c-e3d__pin::before, .c-e3d.is-3d .c-e3d__pin::after { scale: 0; transition: scale .35s var(--fv-easing); } .c-e3d.is-3d .c-e3d__pin.is-on > .c-e3d__tag, .c-e3d.is-3d .c-e3d__pin.is-on > .c-e3d__card, .c-e3d.is-3d .c-e3d__pin:focus-within > .c-e3d__tag, .c-e3d.is-3d .c-e3d__pin:focus-within > .c-e3d__card { clip-path: inset(-24px); transition: clip-path .55s var(--fv-easing); } .c-e3d.is-3d .c-e3d__pin.is-on::before, .c-e3d.is-3d .c-e3d__pin.is-on::after, .c-e3d.is-3d .c-e3d__pin:focus-within::before, .c-e3d.is-3d .c-e3d__pin:focus-within::after { scale: 1; } /* Wiederholen */ .c-e3d__replay { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 40px; height: 40px; border-radius: var(--fv-radius-12); display: grid; place-items: center; border: 0; background: var(--fv-nachtblau); color: var(--fv-weiss); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .4s var(--fv-easing), background-color var(--fv-duration); } .c-e3d__replay:hover { background: var(--fv-nachtblau-hover); } .c-e3d__replay:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-e3d.is-done .c-e3d__replay { opacity: 1; visibility: visible; } .c-e3d:not(.is-3d) .c-e3d__replay { display: none; } .c-e3d.is-grab, .c-e3d.is-grab canvas { cursor: pointer; } /* Tablet */ @media (max-width: 1023px) { .c-e3d__inner { grid-template-columns: 1fr; gap: var(--fv-space-32); } .c-e3d__copy { padding-top: 0; } .c-e3d__copy .c-crumbs { margin-bottom: var(--fv-space-32); } .c-e3d__intro { max-width: 40ch; } .c-e3d__stage { height: clamp(440px, 70vw, 600px); } } /* Mobil */ @media (max-width: 599px) { .c-e3d { padding-top: 20px; } .c-e3d__inner { gap: var(--fv-space-24); } .c-e3d__stage { height: 460px; margin-inline: calc(var(--fv-page-margin) * -0.5); border-radius: var(--fv-radius-28); } .c-e3d__fig { height: 58%; top: 56%; } .c-e3d__tag { font-size: var(--fv-fs-small); padding: 8px 13px 8px 11px; gap: 7px; } .c-e3d__sub { display: none; } .c-e3d:not(.is-3d) .c-e3d__pin[data-verb="werben"] .c-e3d__tag { --dx: -28px; } .c-e3d:not(.is-3d) .c-e3d__pin[data-verb="unterstuetzen"] .c-e3d__tag { --dx: 14px; } .c-e3d__cta { padding: var(--fv-space-8) var(--fv-space-8) var(--fv-space-8) var(--fv-space-16); } } @media (prefers-reduced-motion: reduce) { .c-e3d__tag, .c-e3d__still, .c-e3d__stage canvas { transition: none; } .c-card.is-e3d-flash { animation: none; } } /* sections/event-facts.css */ /* event-facts (Brandmanual v1.0, Welle 2): Termine als Termin-Karten (Weiss, Radius 24, Kartenschatten, keine Kontur), darunter Eckdaten mit Lucide-Icon-Kacheln (Nachtblau, neutral). Unbestaetigt: "Datum folgt". Keine Kreise, keine Eigenfarbe. */ .c-evf__head { display: grid; gap: var(--fv-space-16) var(--fv-space-48); margin-bottom: var(--fv-space-48); } @media (min-width: 900px) { .c-evf__head { grid-template-columns: 1.15fr 1fr; align-items: end; } } .c-evf__intro { margin: 0; max-width: 52ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); text-wrap: pretty; } .c-evf__dates { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; } .c-evf__date { position: relative; display: flex; flex-direction: column; padding: var(--fv-card-padding); border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .c-evf__status { align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: var(--fv-radius-10); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); background-color: var(--fv-nebel); color: var(--fv-nachtblau); } .c-evf__when { display: grid; grid-template-columns: auto 1fr; column-gap: var(--fv-space-12); align-items: end; margin: var(--fv-space-32) 0 var(--fv-space-16); } .c-evf__when time { display: contents; } .c-evf__day { font-family: var(--fv-font-sans); grid-row: span 2; font-size: var(--fv-fs-kennzahl); font-weight: var(--fv-fw-bold); line-height: .86; letter-spacing: var(--fv-ls-display); font-variant-numeric: tabular-nums; } .c-evf__month { align-self: end; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-semibold); line-height: 1.2; } .c-evf__year { align-self: start; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); font-variant-numeric: tabular-nums; } .c-evf__when--tbd { grid-template-columns: 1fr; row-gap: var(--fv-space-4); } .c-evf__tbd { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-evf__dtitle { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-nachtblau); } .c-evf__dtext { margin: 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); } /* naechster bzw. offener Termin: Tag Nachtblau, kleine Kachel in Verbfarbe (Termin-Karte 8.8) */ .c-evf__date--offen .c-evf__status, .c-evf__date--naechster .c-evf__status { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .c-evf__date--offen::after, .c-evf__date--naechster::after { content: ""; position: absolute; top: var(--fv-card-padding); right: var(--fv-card-padding); inline-size: 24px; block-size: 24px; border-radius: 6px; background-color: var(--accent, var(--fv-purpur)); } .c-evf__date--vergangen .c-evf__day, .c-evf__date--vergangen .c-evf__month { color: var(--fv-nachtblau); } /* Eckdaten mit Icon-Kachel */ /* Anmerkung 67 (13.10.2026): Abstaende beruhigt, zu wenig Luft zwischen den Spalten bei 5 Eckdaten in einer Reihe */ .c-evf__facts { display: grid; gap: var(--fv-space-32) var(--fv-space-48); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: var(--fv-space-64) 0 0; } .c-evf__fact { position: relative; min-width: 0; } .c-evf__fact.has-icon { padding-left: 56px; } .c-evf__icon { position: absolute; left: 0; top: 0; } .c-evf__fact dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); } .c-evf__fact dd { margin: var(--fv-space-4) 0 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-semibold); line-height: 1.35; color: var(--fv-fg); } .c-evf__note { display: block; margin-top: var(--fv-space-4); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); } .c-evf__actions { margin: var(--fv-space-48) 0 0; } /* auf Nachtblau (Altwert ground dark): Icon-Kachel Weiss */ :is(.is-dark, .is-nacht) .c-evf__icon { --fv-tile-bg: var(--fv-weiss); --fv-tile-fg: var(--fv-nachtblau); } @media (max-width: 767px) { .c-evf__dates { gap: var(--fv-space-12); } .c-evf__date { min-height: 0; } .c-evf__when { margin-top: var(--fv-space-24); } .c-evf__facts { margin-top: var(--fv-space-48); gap: var(--fv-space-24); } } /* freistehendes Icon (R6), auch fuer kt-vorteile */ .fv-icon--free { display: inline-flex; color: var(--fv-nachtblau); } .fv-icon--free svg { inline-size: 40px; block-size: 40px; } :is(.is-dark, .is-nacht) .fv-icon--free { color: var(--fv-weiss); } /* Responsive-QA Runde 8: Eckdaten ohne verwaiste letzte Zeile (Tablet hoch: ungerader letzter Eintrag ueber beide Spalten) */ @media (min-width: 560px) and (max-width: 899px) { .c-evf__facts > .c-evf__fact:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* sections/event-hero.css */ /* event-hero (Brandmanual v1.0, Welle 2): Nachtblau mit Glow (Flaeche und Glow ueber .is-nacht aus layout.css). Mit Foto: Foto oben ueber die volle Breite, laeuft mit dem Bild-Fade (Verlauf 2) in Nachtblau aus; Text steht darunter, Verb-Tags und Brotkrumen ragen in den dichten Teil des Fades (Vorbild: Social-Post Hochschulball, bm-15). Ohne Foto: Nachtblau mit zwei Bausteinen (Purpur, Rosa). Keine Eigenfarbe, keine Konturen, keine Kreise. */ .c-evh { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; background-color: var(--fv-nachtblau); color: var(--fv-weiss); } /* Foto mit Bild-Fade */ .c-evh__media, .c-evh__deco { position: relative; z-index: -1; flex: none; margin: 0; block-size: clamp(340px, 60vh, 620px); } .c-evh--compact .c-evh__media, .c-evh--compact .c-evh__deco { block-size: clamp(260px, 44vh, 440px); } .c-evh__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; } .c-evh__media::after, .c-evh__deco::after { content: ""; position: absolute; inset: 0; background-image: var(--fv-gradient-image-fade); pointer-events: none; } .c-evh__deco { overflow: hidden; } .c-evh__inner { position: relative; inline-size: 100%; padding-block: var(--fv-space-24) var(--fv-space-96); } .c-evh:not(.c-evh--noimg) .c-evh__inner { margin-top: calc(-1 * var(--fv-space-96)); } .c-evh--noimg .c-evh__inner { padding-top: var(--fv-space-128); } .c-evh--compact.c-evh--noimg .c-evh__inner { padding-top: var(--fv-space-96); } .c-evh__copy { max-width: 760px; } .c-evh--right .c-evh__copy { margin-left: auto; } .c-evh--noimg .c-evh__copy { max-width: 640px; margin-left: 0; } /* Brotkrumen */ /* Brotkrumen: gemeinsamer Stil .c-crumbs (css/sections.css, Punkt-Trenner, auf dunkel Weiss); hier nur der Abstand */ .c-evh .c-evh__crumbs { margin-bottom: var(--fv-space-16); } /* Verb-Tags oben (Klasse .fv-verbtag, Farben aus components.css, auf Nachtblau Text Weiss) */ .c-evh__verbs { margin-bottom: var(--fv-space-24); } .c-evh__headline { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); color: var(--fv-weiss); text-wrap: balance; } .c-evh__mark--purpur { background-color: var(--fv-purpur); color: var(--fv-weiss); } .c-evh__mark--rosa { background-color: var(--fv-rosa); color: var(--fv-nachtblau); } .c-evh__text { max-width: 34em; margin: 0 0 var(--fv-space-32); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); color: var(--fv-weiss); text-wrap: pretty; } /* Eckdaten als ruhige Zeile */ /* Anmerkung 66 (13.10.2026): Label (dt) und Wert (dd) standen beide in vollem Weiss, dadurch wirkte die Zeile als unruhiger Textblock ohne Hierarchie. Label jetzt gedaempft (--dark-text-subtle, wie andere Altrollen auf Nachtblau), etwas mehr Luft zwischen Label und Wert sowie zwischen den Eintraegen. */ .c-evh__meta { display: flex; flex-wrap: wrap; gap: var(--fv-space-20, 20px) var(--fv-space-48); margin: 0 0 var(--fv-space-32); padding: 0; } .c-evh__meta-item { min-width: 0; } .c-evh__meta dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); color: var(--dark-text-subtle); } .c-evh__meta dd { margin: var(--fv-space-8) 0 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-medium); line-height: 1.3; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--fv-weiss); } /* Button auf dunkel + Textlink */ .c-evh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-32); margin: 0; } .c-evh__btn { white-space: normal; } .c-evh__ext { inline-size: 16px; block-size: 16px; flex: none; } .c-evh__link { color: var(--fv-weiss); --fv-fg: var(--fv-weiss); } .c-evh__note { max-width: 60ch; margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-weiss); } .c-evh :focus-visible { outline: var(--fv-focus-width) solid var(--fv-rosa); outline-offset: var(--fv-focus-offset); } /* Bausteine (nur ohne Foto): zwei Akzentfarben, abgerundete Rechtecke mit Fuge, an der Sektionskante */ .c-evh__blocks { display: none; } .c-evh--noimg .c-evh__blocks { display: block; position: absolute; z-index: -1; right: max(var(--fv-page-margin), calc(50% - 600px)); bottom: 0; inline-size: 360px; block-size: 300px; pointer-events: none; } .c-evh--noimg .c-evh__blocks span { position: absolute; } .c-evh--noimg .c-evh__blocks span:nth-child(1) { right: 0; bottom: 0; inline-size: 220px; block-size: 220px; border-radius: var(--fv-radius-40) var(--fv-radius-40) 0 0; background-color: var(--fv-purpur); } .c-evh--noimg .c-evh__blocks span:nth-child(2) { right: 236px; bottom: 0; inline-size: 124px; block-size: 124px; border-radius: var(--fv-radius-24) var(--fv-radius-24) 0 0; background-color: var(--fv-rosa); } .c-evh--noimg .c-evh__blocks span:nth-child(3) { right: 236px; bottom: 140px; inline-size: 64px; block-size: 64px; border-radius: var(--fv-radius-12); background-color: var(--fv-purpur); } .c-evh--compact.c-evh--noimg .c-evh__blocks { transform: scale(.8); transform-origin: right bottom; } @media (max-width: 1024px) { .c-evh--noimg .c-evh__blocks { transform: scale(.6); transform-origin: right bottom; } } @media (max-width: 767px) { .c-evh__media, .c-evh__deco, .c-evh--compact .c-evh__media, .c-evh--compact .c-evh__deco { block-size: auto; aspect-ratio: 4 / 3; } .c-evh__inner { padding-bottom: var(--fv-space-64); } .c-evh:not(.c-evh--noimg) .c-evh__inner { margin-top: calc(-1 * var(--fv-space-48)); } .c-evh--noimg .c-evh__inner, .c-evh--compact.c-evh--noimg .c-evh__inner { padding-top: var(--fv-space-48); padding-bottom: 160px; } .c-evh--noimg .c-evh__blocks, .c-evh--compact.c-evh--noimg .c-evh__blocks { transform: scale(.42); right: var(--fv-page-margin); } .c-evh__meta { gap: var(--fv-space-12) var(--fv-space-24); } .c-evh__actions { flex-direction: column; align-items: flex-start; } } /* Glow als Ebene ueber Foto und Flaeche, damit der Bild-Fade nahtlos in Nachtblau uebergeht */ .c-evh.is-nacht { background-image: none; } .c-evh::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--fv-gradient-glow); pointer-events: none; } .c-evh__inner { z-index: 1; min-width: 0; } .c-evh .c-evh__btn { white-space: normal; max-inline-size: 100%; } /* Verb-Tags auf Nachtblau: Text Weiss, foerdern-Kachel Weiss (Manual 8.4) */ .c-evh .fv-verbtag { --fv-verb-text: var(--fv-weiss); } .c-evh .fv-verbtag[data-verb="foerdern"] { --fv-verb: var(--fv-weiss); } .c-evh__media img { -webkit-mask-image: linear-gradient(180deg, black 55%, transparent 100%); mask-image: linear-gradient(180deg, black 55%, transparent 100%); } /* Freisteller (Muster P03): steht ueber Foto und Nachtblau hinweg, auf der Gegenseite des Textes, unten an der Sektionskante */ .c-evh__cut { position: absolute; z-index: 0; bottom: 0; left: max(var(--fv-page-margin), calc(50% - 600px + 40px)); block-size: min(88%, 820px); inline-size: auto; max-inline-size: 42%; object-fit: contain; object-position: bottom; pointer-events: none; } .c-evh--left .c-evh__cut { left: auto; right: max(var(--fv-page-margin), calc(50% - 600px + 40px)); } .c-evh.has-cut .c-evh__copy { max-width: 620px; } @media (max-width: 1024px) { .c-evh__cut { block-size: min(70%, 620px); opacity: 1; } .c-evh.has-cut .c-evh__copy { max-width: 56%; } } @media (max-width: 767px) { .c-evh__cut { display: none; } .c-evh.has-cut .c-evh__copy { max-width: none; } } /* Responsive-QA Runde 8: Foto-Hero (full) passt mit Ueberschrift, Intro, Eckdaten und Button in den ersten Bildschirm. Foto-Hoehe richtet sich nach der Viewporthoehe, der Text ragt weiter in den dichten Teil des Fades. */ @media (min-width: 768px) { .c-evh--full:not(.c-evh--noimg) .c-evh__media, .c-evh--full:not(.c-evh--noimg) .c-evh__deco { block-size: clamp(260px, calc(100svh - 470px), 620px); } .c-evh--full:not(.c-evh--noimg) .c-evh__inner { margin-top: -170px; padding-top: 0; } .c-evh--full .c-evh__headline { margin-bottom: var(--fv-space-16); } .c-evh--full .c-evh__text { margin-bottom: var(--fv-space-24); } .c-evh--full .c-evh__meta { margin-bottom: var(--fv-space-24); } } @media (max-width: 767px) { .c-evh--full:not(.c-evh--noimg) .c-evh__media, .c-evh--full:not(.c-evh--noimg) .c-evh__deco { aspect-ratio: 2 / 1; } .c-evh--full:not(.c-evh--noimg) .c-evh__inner { margin-top: -104px; } } @media (max-width: 767px) { .c-evh--full .c-evh__text { font-size: var(--fv-fs-body); line-height: 1.5; margin-bottom: var(--fv-space-20, 20px); } .c-evh--full .c-evh__headline { margin-bottom: var(--fv-space-12); } .c-evh--full .c-evh__meta { margin-bottom: var(--fv-space-20, 20px); } .c-evh--full .c-evh__actions { flex-direction: row; align-items: center; gap: var(--fv-space-12) var(--fv-space-24); } } /* sections/event-list.css */ /* event-list: Termin-Karte aufgeraeumt (Polish-Runde 1, R4/R5/R7). Weiss, Radius 24, Kartenschatten. Pro Karte: Bild, Datum (unbestaetigt dezent), Titel, ein Satz, ein Link. Keine Verbkachel auf dem Foto, keine Tag-Reihen; Verb nur einmal klein in der Liste. Ohne Bild ein abstraktes Motiv statt Icon. */ .c-feed__all { margin: 0; font-weight: var(--fv-fw-bold); } .c-section-head--split .c-feed__all { justify-self: start; } @media (min-width: 900px) { .c-section-head--split .c-feed__all { grid-column: 2; justify-self: end; } } .c-events { display: grid; gap: var(--fv-fuge); } .c-event { display: grid; grid-template-columns: 160px 1fr; gap: var(--fv-space-24); align-items: start; } .c-event__media { position: relative; overflow: hidden; inline-size: 160px; aspect-ratio: 1; border-radius: 18px; background: var(--fv-flieder-hell); } .c-event__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .c-event__body { display: flex; flex-direction: column; gap: var(--fv-space-8); min-inline-size: 0; } .c-event__verb { margin: 0; } .c-event__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fv-space-4) var(--fv-space-12); margin: 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-tag); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; } .c-event__flag { font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-event__flag::before { content: "·"; margin-right: var(--fv-space-12); } .c-event__title { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; text-wrap: balance; } .c-event__facts { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-16); margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-event__facts:empty { display: none; } .c-event__text { margin: 0; max-width: 62ch; color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .c-event__link, .c-event__ics { margin: var(--fv-space-4) 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-events--past .c-event__title { color: var(--fv-schiefer); } /* Teaser (Startseite, 3 Spalten): grosses Bild oben, darunter Datum, Titel, ein Satz, Link */ .c-feed--teaser .c-events { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-feed--teaser .c-event { grid-template-columns: minmax(0, 1fr); gap: var(--fv-space-24); align-content: start; padding: var(--fv-space-12) var(--fv-space-12) var(--fv-space-24); height: 100%; } .c-feed--teaser .c-event__media { inline-size: 100%; aspect-ratio: 4 / 3; border-radius: var(--fv-radius-16); } .c-feed--teaser .c-event__body { padding-inline: var(--fv-space-12); block-size: 100%; } .c-feed--teaser .c-event__verb, .c-feed--teaser .c-event__facts, .c-feed--teaser .c-event__ics { display: none; } .c-feed--teaser .c-event__link { margin-top: auto; padding-top: var(--fv-space-8); } @media (max-width: 1023px) { .c-feed--teaser .c-events { grid-template-columns: 1fr; } .c-feed--teaser .c-event { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: var(--fv-space-12); } .c-feed--teaser .c-event__body { padding-block: var(--fv-space-8); } } @media (max-width: 767px) { .c-event { grid-template-columns: 96px 1fr; gap: var(--fv-space-16); } .c-event__media { inline-size: 96px; } } @media (max-width: 599px) { .c-feed--teaser .c-event { grid-template-columns: minmax(0, 1fr); } .c-feed--teaser .c-event__media { aspect-ratio: 16 / 9; } } @media (max-width: 479px) { .c-event:not(.c-feed--teaser .c-event) { grid-template-columns: 1fr; } } /* Flaeche Papier (Feld ground, Startseite Welle A2): Karten bleiben weiss */ .c-feed.is-papier .c-event, .c-feed.is-papier .c-news { background-color: var(--fv-weiss); } /* ---- zeilen (Startseite, Welle A2): ruhige Terminzeilen ohne Bild. Datum links, Titel und Satz in der Mitte, Link rechts ---- */ .c-feed--zeilen .c-event { display: block; padding: var(--fv-space-24) var(--fv-space-32); } .c-feed--zeilen .c-event__media, .c-feed--zeilen .c-event__verb, .c-feed--zeilen .c-event__ics { display: none; } .c-feed--zeilen .c-event__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fv-space-8); } .c-feed--zeilen .c-event__date { font-size: var(--fv-fs-body); } .c-feed--zeilen .c-event__title { font-size: var(--fv-fs-h3); } .c-feed--zeilen .c-event__link { margin: 0; font-size: var(--fv-fs-body); } @media (min-width: 900px) { .c-feed--zeilen .c-event__body { grid-template-columns: 13rem minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 64px); align-items: baseline; } .c-feed--zeilen .c-event__date { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; gap: var(--fv-space-4); } .c-feed--zeilen .c-event__flag::before { display: none; } .c-feed--zeilen .c-event__title, .c-feed--zeilen .c-event__facts, .c-feed--zeilen .c-event__text { grid-column: 2; } .c-feed--zeilen .c-event__link { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; } } /* sections/exhibitor-directory.css */ /* exhibitor-directory: Karrieretag-Ausstellerverzeichnis. Papiergrund, Lila nur als Akzent (aktiver Stand, Merk-Stern, Auswahl). Ohne JS: alle Jahrgänge untereinander, Stände sind Sprunglinks. Mit JS: ein Jahrgang, Filter, Merkliste. */ .c-exd { --exd-paper: var(--fv-papier); --exd-ink: var(--fv-nachtblau); --exd-line: color-mix(in srgb, var(--exd-ink) 12%, transparent); position: relative; overflow: clip; isolation: isolate; background: var(--exd-paper); color: var(--exd-ink); } .c-exd__deco { position: absolute; z-index: -1; top: 24px; right: -60px; width: min(620px, 70vw); height: auto; fill: none; stroke: color-mix(in srgb, var(--fv-verb, var(--fv-violett)) 24%, transparent); stroke-width: 1; pointer-events: none; } .c-exd__deco path { stroke-dasharray: 2 6; stroke-linecap: round; } .c-exd__head { max-width: 780px; } .c-exd__demo { display: inline-flex; align-items: center; gap: 10px; margin: var(--space-3) 0 0; padding: 8px 14px 8px 10px; border-radius: 10px; background: var(--fv-weiss); font-size: 14px; font-weight: var(--fw-medium); color: var(--text-muted); } .c-exd__demo span { width: 10px; height: 10px; border-radius: 3px; background: var(--fv-verb, var(--fv-violett)); flex: none; } /* Formular */ .c-exd__filter { display: grid; gap: 18px; margin: 0 0 clamp(28px, 3vw, 44px); padding: clamp(18px, 2.2vw, 28px); border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: 0 22px 44px -36px rgba(23, 29, 58, .5); } .c-exd__filter[hidden] { display: none; } .c-exd__filter fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } .c-exd__label { display: block; margin: 0 0 8px; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--text-muted); } .c-exd__seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--exd-paper); } .c-exd__radio, .c-exd__check { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .c-exd__segbtn { display: grid; justify-items: center; min-width: 96px; padding: 8px 16px 7px; border-radius: 10px; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s, color .2s; } .c-exd__segbtn small { font-size: 11.5px; font-weight: var(--fw-medium); color: var(--text-muted); } .c-exd__segbtn:hover { background: var(--fv-weiss); } .c-exd__radio:checked + .c-exd__segbtn { background: var(--exd-ink); color: var(--fv-weiss); } .c-exd__radio:checked + .c-exd__segbtn small { color: rgba(255, 255, 255, .78); } .c-exd__radio:focus-visible + .c-exd__segbtn, .c-exd__check:focus-visible + .c-exd__chip { outline: 3px solid var(--focus); outline-offset: 2px; } .c-exd__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; } .c-exd__input { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--exd-ink); background: var(--exd-paper); border-radius: 12px; transition: border-color .2s; } .c-exd__input:hover { } .c-exd__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .c-exd__select { appearance: none; padding-right: 40px; cursor: pointer; background: var(--exd-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231a1530' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; } .c-exd__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .c-exd__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 14px; border-radius: 11px; background: var(--fv-weiss); font-size: 15px; font-weight: var(--fw-bold); line-height: 1; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } .c-exd__chip::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--fv-weiss); flex: none; transition: background-color .2s, border-color .2s; } .c-exd__chip:hover { } .c-exd__check:checked + .c-exd__chip { background: var(--fv-flieder-hell); color: var(--fv-verb-text, var(--fv-nachtblau)); } .c-exd__check:checked + .c-exd__chip::before { background: var(--fv-verb, var(--fv-violett)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center; } .c-exd__sep { width: 1px; height: 26px; margin: 0 4px; background: var(--fv-nebel); } .c-exd__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 2px solid var(--fv-nebel); } .c-exd__count { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .c-exd__reset, .c-exd__linkbtn { font: inherit; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--fv-verb-text, var(--fv-nachtblau)); background: none; border: 0; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .c-exd__mylistbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; font: inherit; font-size: 15px; font-weight: var(--fw-bold); color: var(--fv-weiss); background: var(--exd-ink); border: 0; border-radius: 12px; cursor: pointer; transition: background-color .2s; } .c-exd__mylistbtn:hover { background: var(--fv-nachtblau-hover); } .c-exd__mylistbtn .c-exd__star { background: var(--fv-weiss); } .c-exd__badge { min-width: 26px; padding: 4px 7px; border-radius: 8px; background: var(--fv-weiss); color: var(--exd-ink); font-size: 13.5px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } .c-exd__star { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 61%, 80% 100%, 50% 78%, 20% 100%, 30% 61%, 0 38%, 38% 35%); } /* Jahrgang */ .c-exd__year + .c-exd__year { margin-top: clamp(48px, 6vw, 88px); } .c-exd__year[hidden] { display: none; } .c-exd__yearhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: var(--space-3); } .c-exd__yeartitle { margin: 0; font-size: var(--fs-h3); letter-spacing: -0.01em; } .c-exd__state { display: inline-block; margin-left: 8px; padding: 5px 9px; border-radius: 7px; background: var(--fv-flieder-hell); color: var(--fv-verb-text, var(--fv-nachtblau)); font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .02em; vertical-align: middle; } .c-exd__yearintro { margin: 0; color: var(--text-muted); font-size: 15.5px; } .c-exd__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; } @media (max-width: 1023px) { .c-exd__layout { grid-template-columns: minmax(0, 1fr); } } /* Standplan */ .c-exd__plan { min-width: 0; margin: 0; padding: clamp(14px, 1.8vw, 22px); border-radius: var(--fv-radius-28); background: var(--fv-weiss); } @media (min-width: 1024px) { .c-exd__plan { position: sticky; top: calc(var(--header-h) + 20px); } } .c-exd__planscroll { overflow-x: auto; border-radius: 14px; background-color: var(--exd-paper); background-image: linear-gradient(var(--fv-nebel) 1px, transparent 1px), linear-gradient(90deg, var(--fv-nebel) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; } .c-exd__planscroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .c-exd__svg { display: block; width: 100%; min-width: 560px; height: auto; font-family: var(--font-ui); } .c-exd__hall rect { fill: rgba(255, 255, 255, .82); stroke: var(--fv-nachtblau); stroke-width: .14; } .c-exd__hall text { font-size: 1.05px; font-weight: 700; letter-spacing: .02em; fill: var(--exd-ink); } .c-exd__entry path { stroke: var(--exd-paper); stroke-width: .5; } .c-exd__entry text { font-size: .8px; font-weight: 600; fill: var(--text-muted); text-anchor: middle; } .c-exd__stand { cursor: pointer; outline: none; text-decoration: none; } .c-exd__stand rect { fill: var(--fv-flieder-hell); stroke: color-mix(in srgb, var(--fv-verb, var(--fv-violett)) 55%, transparent); stroke-width: .1; transition: fill .2s, stroke .2s; } .c-exd__stand text { text-decoration: none; font-size: .82px; font-weight: 700; fill: var(--exd-ink); text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; } .c-exd__stand .c-exd__dot { fill: var(--fv-verb, var(--fv-violett)); opacity: 0; transition: opacity .2s; } .c-exd__stand.is-saved .c-exd__dot { opacity: 1; } .c-exd__stand:hover rect { fill: color-mix(in srgb, var(--fv-verb, var(--fv-violett)) 30%, var(--fv-weiss)); } .c-exd__stand:focus-visible rect { stroke: var(--focus); stroke-width: .3; } .c-exd__stand.is-active rect { fill: var(--fv-verb, var(--fv-violett)); stroke: var(--fv-nachtblau-hover); } .c-exd__stand.is-active text { fill: var(--fv-weiss); } .c-exd__stand.is-active .c-exd__dot { fill: var(--fv-weiss); } .c-exd__stand.is-dim rect { fill: var(--fv-weiss); stroke: var(--fv-nebel); stroke-dasharray: .3 .2; } .c-exd__stand.is-dim text { fill: var(--fv-schiefer); } .c-exd__plancap { margin: 12px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); } .c-exd.is-enhanced .c-exd__plancap::after { content: " Stände sind anklickbar, Pfeiltasten wechseln den Stand."; } /* Liste */ .c-exd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .c-exd__item[hidden] { display: none; } .c-exd__item { border-radius: 20px; scroll-margin-top: calc(var(--header-h) + 24px); } .c-exd__item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .c-exd__card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 18px 18px 18px; border-radius: 20px; background: var(--fv-weiss); transition: border-color .2s, box-shadow .25s var(--ease); } .c-exd__item.is-active .c-exd__card { } .c-exd__item:target .c-exd__card { } .c-exd__mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--fv-radius-10); background: var(--exd-paper); font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--exd-ink); } .c-exd__item:nth-child(4n+2) .c-exd__mono { border-radius: var(--fv-radius-10) var(--fv-radius-10) var(--fv-radius-10) var(--fv-radius-4); } .c-exd__item:nth-child(4n+3) .c-exd__mono { border-radius: var(--fv-radius-4) var(--fv-radius-10) var(--fv-radius-4) var(--fv-radius-10); } /* Baustein statt Kreis */ .c-exd__item:nth-child(4n) .c-exd__mono { border-radius: var(--fv-radius-4) var(--fv-radius-10) var(--fv-radius-10) var(--fv-radius-10); } .c-exd__main { min-width: 0; } .c-exd__main > * { margin: 0; } .c-exd__name { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; } .c-exd__where { margin-top: 2px !important; font-size: 13.5px; color: var(--text-muted); } .c-exd__where strong { color: var(--exd-ink); font-variant-numeric: tabular-nums; } .c-exd__kurz { margin-top: 8px !important; font-size: 15px; line-height: 1.5; } .c-exd__fach, .c-exd__offers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; } .c-exd__fach li { padding: 4px 9px; border-radius: 7px; background: var(--exd-paper); font-size: 12.5px; font-weight: var(--fw-medium); } .c-exd__offers li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 7px; background: var(--fv-flieder-hell); color: var(--fv-verb-text, var(--fv-nachtblau)); font-size: 12.5px; font-weight: var(--fw-bold); } .c-exd__offers li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--fv-verb, var(--fv-violett)); } .c-exd__offers [data-offer="abschlussarbeit"]::before { width: 5px; height: 10px; border-radius: 1px; } /* Baustein hochkant statt Kreis */ .c-exd__offers [data-offer="werkstudium"]::before { width: 10px; height: 5px; } .c-exd__offers [data-offer="einstieg"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0; } .c-exd__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } .c-exd__actions[hidden] { display: none; } .c-exd__save, .c-exd__locate { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; } .c-exd__save { color: var(--exd-ink); background: var(--fv-weiss); } .c-exd__save .c-exd__star { width: 14px; height: 14px; background: transparent; box-shadow: inset 0 0 0 20px var(--fv-schiefer); } .c-exd__save:hover { } .c-exd__save[aria-pressed="true"] { background: var(--fv-flieder-hell); color: var(--fv-verb-text, var(--fv-nachtblau)); } .c-exd__save[aria-pressed="true"] .c-exd__star { box-shadow: inset 0 0 0 20px var(--fv-verb, var(--fv-violett)); } .c-exd__locate { color: var(--fv-verb-text, var(--fv-nachtblau)); background: transparent; } .c-exd__locate:hover { background: var(--fv-flieder-hell); } @media (max-width: 560px) { .c-exd__card { grid-template-columns: 44px minmax(0, 1fr); } .c-exd__mono { width: 44px; height: 44px; font-size: 14px; } .c-exd__actions { grid-column: 1 / -1; flex-direction: row; margin-top: 10px; } .c-exd__actions > * { flex: 1; } .c-exd__row { grid-template-columns: 1fr; } .c-exd__segbtn { min-width: 0; padding-inline: 12px; } .c-exd__sep { display: none; } .c-exd__mylistbtn { width: 100%; justify-content: center; } } .c-exd__empty { margin: 16px 0 0; padding: 20px 24px; border-radius: 18px; color: var(--text-muted); } .c-exd__empty[hidden] { display: none; } .c-exd__foot { margin: var(--space-5) 0 0; max-width: 80ch; font-size: var(--fs-sm); color: var(--text-muted); } /* Merkliste */ .c-exd__dialog { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; border: 0; border-radius: 24px; background: var(--fv-weiss); color: var(--exd-ink); box-shadow: 0 40px 80px -30px rgba(23, 29, 58, .5); } .c-exd__dialog::backdrop { background: rgba(23, 29, 58, .5); backdrop-filter: blur(3px); } .c-exd__dlghead { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 8px; background: var(--fv-weiss); } .c-exd__dlgtitle { margin: 0; font-size: 24px; } .c-exd__close { display: grid; place-items: center; width: 44px; height: 44px; font: inherit; font-size: 26px; line-height: 1; color: var(--exd-ink); background: var(--exd-paper); border: 0; border-radius: 12px; cursor: pointer; } .c-exd__close:hover { background: var(--fv-flieder-hell); } .c-exd__dlgnote { margin: 0 24px 12px; font-size: 14px; color: var(--text-muted); } .c-exd__mylist { list-style: none; margin: 0; padding: 0 24px; counter-reset: my; } .c-exd__myitem { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 2px solid var(--fv-nebel); counter-increment: my; } .c-exd__myitem p { margin: 0; } .c-exd__myname { font-weight: var(--fw-bold); } .c-exd__myname::before { content: counter(my) ". "; color: var(--fv-verb-text, var(--fv-nachtblau)); } .c-exd__mymeta { font-size: 13.5px; color: var(--text-muted); } .c-exd__mylist-empty { margin: 0 24px; padding: 18px; border-radius: 14px; color: var(--text-muted); } .c-exd__mylist-empty[hidden] { display: none; } .c-exd__dlgactions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 24px 22px; background: var(--fv-weiss); border-top: 2px solid var(--fv-nebel); margin-top: 12px; } .c-exd__dlgactions .c-btn[disabled] { opacity: .45; cursor: not-allowed; } /* Druck der Merkliste: nur das Druckblatt */ .c-exd-print { display: none; } @media print { html.exd-printing body > *:not(.c-exd-print) { display: none !important; } html.exd-printing .c-exd-print { display: block; font-family: var(--font-body); color: #000; } .c-exd-print h1 { font-size: 22pt; margin: 0 0 4pt; } .c-exd-print > p { margin: 0 0 14pt; font-size: 10pt; } .c-exd-print ol { margin: 0; padding-left: 18pt; } .c-exd-print li { margin: 0 0 10pt; break-inside: avoid; font-size: 11pt; } .c-exd-print li span { display: block; font-size: 10pt; } } @media (prefers-reduced-motion: reduce) { .c-exd__card, .c-exd__stand rect, .c-exd__chip, .c-exd__segbtn { transition: none; } } .c-exd__entry .c-exd__arrow { stroke: var(--text-muted); stroke-width: .14; fill: none; stroke-linecap: round; stroke-linejoin: round; } .c-exd__entry text { text-anchor: start; } /* Jelena Welle 2: Pillen, Kreise, Konturen, Glas raus. Flaechen statt Rahmen, Zustaende ueber Fuellung. */ .c-exd { --exd-paper: var(--fv-papier); --exd-ink: var(--fv-nachtblau); --exd-line: var(--fv-nebel); } .c-exd__deco { display: none; } .c-exd__filter, .c-exd__plan, .c-exd__card { box-shadow: var(--fv-shadow-card); } .c-exd__seg { background: var(--fv-nebel); border-radius: var(--fv-radius-12); } .c-exd__segbtn { border-radius: var(--fv-radius-10); } .c-exd__segbtn:hover { background: var(--fv-flieder-hell); } .c-exd__input, .c-exd__select { background-color: var(--fv-nebel); border: 0; border-radius: var(--fv-radius-12); } .c-exd__input:hover { background-color: var(--fv-flieder-hell); } .c-exd__input:focus-visible { outline: 3px solid var(--fv-nachtblau); } .c-exd__chip { background: var(--fv-nebel); border-radius: var(--fv-radius-10); } .c-exd__chip::before { background: var(--fv-weiss); border: 0; border-radius: 4px; } .c-exd__chip:hover { background: var(--fv-flieder-hell); } .c-exd__check:checked + .c-exd__chip { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-exd__check:checked + .c-exd__chip::before { background-color: var(--fv-rosa); } .c-exd__mylistbtn { border-radius: var(--fv-radius-12); background: var(--fv-nachtblau); } .c-exd__mylistbtn:hover { background: var(--fv-nachtblau-hover); } .c-exd__badge { background: var(--fv-rosa); color: var(--fv-nachtblau); } .c-exd__state { border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); letter-spacing: 0; } .c-exd__demo { border-radius: var(--fv-radius-10); background: var(--fv-weiss); } .c-exd__demo span { background: var(--fv-rosa); } .c-exd__plan { border-radius: var(--fv-radius-28); } .c-exd__hall rect { fill: var(--fv-weiss); stroke: none; } .c-exd__stand rect { fill: var(--fv-flieder-hell); stroke: none; } .c-exd__stand:hover rect { fill: var(--fv-rosa); } .c-exd__stand:focus-visible rect { stroke: var(--fv-nachtblau); stroke-width: .3; } .c-exd__stand.is-active rect { fill: var(--fv-nachtblau); stroke: none; } .c-exd__stand.is-active text { fill: var(--fv-weiss); } .c-exd__stand.is-dim rect { fill: var(--fv-weiss); stroke: none; } .c-exd__stand.is-dim text { fill: var(--fv-schiefer); opacity: .5; } .c-exd__item.is-active .c-exd__card, .c-exd__item:target .c-exd__card { background: var(--fv-flieder-hell); } .c-exd__card { border-radius: var(--fv-radius-24); } .c-exd__item { border-radius: var(--fv-radius-24); } .c-exd__mono, .c-exd__item:nth-child(n) .c-exd__mono { border-radius: var(--fv-radius-icon-tile); background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-exd__fach li { background: var(--fv-nebel); border-radius: var(--fv-radius-10); } .c-exd__offers li { background: var(--fv-flieder-hell); color: var(--fv-nachtblau); border-radius: var(--fv-radius-10); } .c-exd__offers li::before, .c-exd__offers [data-offer]::before { width: 8px; height: 8px; border-radius: 2px; clip-path: none; background: var(--fv-purpur); } .c-exd__save { background: var(--fv-nebel); border-radius: var(--fv-radius-10); } .c-exd__save:hover { background: var(--fv-flieder-hell); } .c-exd__save[aria-pressed="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-exd__save[aria-pressed="true"] .c-exd__star { box-shadow: inset 0 0 0 20px var(--fv-rosa); } .c-exd__locate:hover { background: var(--fv-flieder-hell); } .c-exd__empty, .c-exd__mylist-empty { border: 0; background: var(--fv-nebel); border-radius: var(--fv-radius-16); } .c-exd__dialog { border-radius: var(--fv-radius-28); box-shadow: var(--fv-shadow-card); } .c-exd__dialog::backdrop { background: rgba(23, 29, 58, .6); backdrop-filter: none; } .c-exd__close { background: var(--fv-nebel); border-radius: var(--fv-radius-12); } .c-exd__close:hover { background: var(--fv-flieder-hell); } /* sections/exhibitor-grid.css */ /* exhibitor-grid: Logo-Wand mit Branchenfilter (Attrappe). Platzhalter-Logos aus Bausteinen, je Kachel anders gesetzt. */ .c-exh__head { display: grid; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); } @media (min-width: 900px) { .c-exh__head { grid-template-columns: 1.15fr 1fr; align-items: end; } } .c-exh__intro { margin: 0; max-width: 52ch; font-size: var(--fs-md); color: var(--text-muted); } .c-exh__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: var(--fv-space-32); } .c-exh__year { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); font-size: var(--fs-sm); } .c-exh__year span { width: 10px; height: 10px; border-radius: 3px; background: var(--fv-rosa); } .c-exh__filters { display: flex; flex-wrap: wrap; gap: 8px; } .c-exh__chip { font: inherit; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1; padding: 11px 16px; border-radius: var(--fv-radius-10); border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } .c-exh__chip:hover { background: var(--fv-flieder-hell); } .c-exh__chip:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-exh__chip[aria-pressed="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-exh__fnote { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .c-exh__grid { display: grid; gap: var(--fv-fuge, 16px); grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .c-exh__card { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); text-decoration: none; } a.c-exh__card:hover .c-exh__name { text-decoration: underline 2px var(--fv-rosa); text-underline-offset: 0.2em; } a.c-exh__card:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-exh__logo { display: grid; place-items: center; height: 96px; margin-bottom: var(--fv-space-16); border-radius: var(--fv-radius-16); background: var(--fv-papier); } .c-exh__logo img { max-height: 56px; max-width: 70%; min-width: 0; min-height: 0; object-fit: contain; } /* Mobil-QA 19.10.2026: ein langes, bindestrichloses Wort (Firmenname) lief auf schmalen Karten (2-spaltig ab 767px, Grid-Spalte minmax(0,1fr) kann beliebig schmal werden) aus der Karte und zog die Seite auf /karrieretag um 2px breiter als 320px. Gleiches Muster wie .c-event__title/.fv-termin__title. */ .c-exh__name { font-weight: var(--fv-fw-semibold); font-size: var(--fs-ui); line-height: var(--lh-ui); overflow-wrap: break-word; hyphens: auto; max-width: 100%; } .c-exh__branche { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-ui); } /* Namenskachel ohne Logo (Auftrag Jelena, 20.10.2026, Notion-Karte "Logos Karrieretag"): ersetzt den vorherigen grauen 3-Punkte-Platzhalter-Glyph. Reine Textkachel statt leerer Bildbox, Karte zentriert und ohne das Logo-Feld (.c-exh__logo) aufgebaut, Firmenname groesser als bei den Logo-Kacheln. Gemeinsames Partial fuer /karrieretag/ und /karrieretag/aussteller/. */ .c-exh__card--text { justify-content: center; align-items: center; text-align: center; min-height: 148px; gap: var(--fv-space-4); } .c-exh__name--solo { font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); } .c-exh__card--text .c-exh__branche { margin-top: 0; } .c-exh__note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .c-exh__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-5) 0 0; } /* Variante A, lokaler Entwurf (Auftrag Jelena, 27.10.2026): Fakultaet sichtbar auf der Kachel, gleiche Optik wie .c-exh__branche. "Leer, bis gefiltert"-Meldung und Reset-Link wie .c-exd__empty/.c-exd__linkbtn bzw. .c-atl__linkbtn. */ .c-exh__fakultaet { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-ui); } .c-exh__empty { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .c-exh__linkbtn { font: inherit; font-size: inherit; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; cursor: pointer; } /* getoent */ .c-exh:is(.is-papier, .is-tint, .is-hell) .c-exh__chip:not([aria-pressed="true"]) { background: var(--fv-weiss); } @media (max-width: 1024px) { .c-exh__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { .c-exh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fv-fuge); } .c-exh__card { padding: var(--fv-space-16); } .c-exh__logo { height: 76px; margin-bottom: 12px; } .c-exh__card--text { min-height: 120px; } /* Mobil-QA 22.10.2026 (roter Punkt Gesamttest 21.10.2026, qa/gesamttest-1021/03-darstellung.md): /karrieretag/aussteller/ war bei 320px 328px breit, also 8px waagerechtes Scrollen. Ursache ist NICHT die Grid-Spalte, sondern die Textkachel: .c-exh__card--text ist ein Flex-Container mit align-items:center, der Firmenname ist damit ein Flex-Item mit min-width:auto und wird mindestens so breit wie sein min-content. "overflow-wrap: break-word" (Zeile 2926) bricht ein zu langes Wort zwar um, verkleinert aber laut Spezifikation den min-content NICHT - die Kachel blieb also breiter als die Spalte und der zentrierte Text lief nach beiden Seiten heraus (gemessen x=-57 bis x=231 bei "KPMG AG Wirtschaftspruefungsgesellschaft", x=138 bis 328 bei "Schuessler-Plan Ingenieurgesellschaft mbH"). "anywhere" verhaelt sich beim Umbruch wie break-word, verkleinert aber zusaetzlich den min-content - genau das fehlende Stueck. Bewusst nur hier unter 767px: breiter ist nie ein Ueberlauf gemessen worden, und anywhere greift ohnehin erst, wenn es sonst ueberlaufen wuerde. Dazu max-width:100% an .c-exh__name als zweite Schranke. */ .c-exh__name { overflow-wrap: anywhere; } .c-exh__filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; } .c-exh__chip { flex: none; } .c-exh__actions .c-btn { width: 100%; justify-content: center; } } /* sections/facts.css */ /* facts: belegte Jahreszahlen und Fakten (Polish-Runde 1, R8). Standard Nachtblau (Feld ground). Zahlen in Familjen Grotesk Bold, tabular-nums; "Grosse Spruenge statt Treppchen": sehr grosse Zahl gegen ruhige Zeile. Keine Karten, keine Zierkacheln. Feine Trennung nur ueber Abstand. Umschalten der Zahlenschrift ueber --facts-num-font. */ .c-facts { position: relative; overflow: hidden; --facts-num-font: var(--fv-font-sans); } .c-facts > .l-container { position: relative; z-index: 1; } .c-facts .c-section-head { max-width: 760px; margin-bottom: 0; } .c-facts .c-section-head .fv-mark { white-space: nowrap; } .c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); margin: var(--fv-space-48) 0 0; } .c-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--fv-space-12); min-inline-size: 0; container-type: inline-size; } /* Zahlwerte bleiben einzeilig ("rund 1.000", "über 50"): Groesse zusaetzlich an die Spaltenbreite gekoppelt */ .c-stats__value { white-space: nowrap; } /* Mobil-QA 19.10.2026: bei 320 px lief die Zahl aus der Box (Spalte oft nur ~260-280 px, der feste vw-Clamp kannte die wirkliche Spaltenbreite nicht). min(..., 16cqi) deckelt zusaetzlich an der echten Breite des Elements (container-type: inline-size steht schon auf .c-stats__item) - greift nur, wenn die Spalte schmaler ist als der vw-Wert vorsieht, sonst unveraendert wie vorher. */ .c-stats__value { margin: 0; font-family: var(--facts-num-font); font-size: min(clamp(3.25rem, 2.6rem + 2.6vw, 4.75rem), 16cqi); font-weight: var(--fv-fw-bold); line-height: .95; letter-spacing: -0.035em; color: var(--fv-fg); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: normal; word-break: keep-all; hyphens: none; } .c-stats__label { max-width: 30ch; font-size: var(--fv-fs-body); line-height: var(--fv-lh-small, 1.45); color: var(--fv-fg-muted); } .c-facts:is(.is-dark, .is-nacht) .c-stats__label { opacity: .82; } /* Verbfarbe nur als feine Farbe der Zahl auf hellen Flaechen */ .c-facts:is(.is-papier, .is-tint, .is-weiss, .is-hell, .is-rosa) .c-stats__value { color: var(--fv-nachtblau); } .c-facts:is(.is-papier, .is-tint, .is-weiss, .is-hell) .c-stats__item[data-verb="entwickeln"] .c-stats__value { color: var(--fv-violett); } .c-facts:is(.is-papier, .is-tint, .is-weiss, .is-hell) .c-stats__item[data-verb="verbinden"] .c-stats__value { color: var(--fv-purpur); } .c-facts:is(.is-papier, .is-tint, .is-weiss, .is-hell, .is-rosa) .c-stats__label { color: var(--fv-schiefer); } .c-facts.is-rosa .c-stats__label { color: var(--fv-nachtblau); } @media (min-width: 900px) { .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--fv-space-64); } .c-stats__value { font-size: min(clamp(4rem, 2.2rem + 3.6vw, 6.25rem), 22cqi); } } /* ---- leiste (Startseite, Welle A2): ruhige Zahlenreihe, bis zu vier Werte, eine Zahlengroesse, alle Zahlen Nachtblau ---- */ .c-facts--leiste .c-stats { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; gap: var(--fv-space-32) var(--fv-space-24); } .c-facts--leiste .c-section-head + .c-stats { margin-top: var(--fv-space-48); } /* Mobil-QA 19.10.2026: gleiche Deckelung wie oben - die Leiste bleibt immer zweispaltig (grid-template-columns: repeat(2,...)), die Spalte wird bei 320 px entsprechend schmaler. */ .c-facts--leiste .c-stats__value { font-size: min(clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem), 16cqi); color: var(--fv-fg); } .c-facts--leiste:is(.is-papier, .is-tint, .is-weiss, .is-hell) .c-stats__item .c-stats__value { color: var(--fv-nachtblau); } .c-facts--leiste .c-stats__label { max-width: 24ch; font-size: var(--fv-fs-body); } @media (min-width: 1200px) { .c-facts--leiste .c-stats { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fv-space-32) clamp(24px, 3vw, 48px); } .c-facts--leiste .c-stats__value { font-size: min(3.5rem, 22cqi); } } /* sections/fallen-blocks.css */ /* fallen-blocks: Fehlerseite. Sechs Bausteine in den Markenfarben liegen am Boden: achsparallel, mit Fuge, ohne Drehung (Brandmanual v1.0: keine Diagonalen, Bausteine berühren sich nicht, Bildmarke nicht nachbauen). Besitzer: w2-f-erzaehl. */ .c-fallen__blocks { position: relative; height: clamp(180px, 26vw, 280px); margin: 0 0 var(--fv-space-48); } .c-fallen__b { position: absolute; display: block; bottom: 0; border-radius: var(--fv-radius-16); box-shadow: var(--fv-shadow-card); } /* Bodenreihe von links nach rechts, Fuge dazwischen; zwei Bausteine liegen obenauf */ .c-fallen__b--base1 { background: var(--fv-nachtblau); left: 0; width: 30%; height: 46%; border-radius: var(--fv-radius-24); } .c-fallen__b--purpur { background: var(--fv-purpur); left: calc(30% + var(--fv-fuge)); width: 18%; height: 30%; } .c-fallen__b--base2 { background: var(--fv-nachtblau); left: calc(48% + 2 * var(--fv-fuge)); width: 20%; height: 20%; } .c-fallen__b--rosa { background: var(--fv-rosa); right: 0; width: calc(32% - 3 * var(--fv-fuge)); height: 38%; border-radius: var(--fv-radius-24); } .c-fallen__b--violett { background: var(--fv-violett); left: 2%; width: 34%; height: 9%; bottom: calc(46% + var(--fv-fuge)); border-radius: min(var(--fv-radius-8), 1.6vw); } .c-fallen__b--pflaume { background: var(--fv-pflaume); left: calc(48% + 2 * var(--fv-fuge) + 3%); width: 12%; height: 14%; bottom: calc(20% + var(--fv-fuge)); border-radius: var(--fv-radius-8); } @media (prefers-reduced-motion: no-preference) { .c-fallen__b { animation: c-fallen-drop .7s var(--fv-easing) both; } .c-fallen__b--purpur { animation-delay: .08s; } .c-fallen__b--base2 { animation-delay: .16s; } .c-fallen__b--rosa { animation-delay: .24s; } .c-fallen__b--violett { animation-delay: .36s; } .c-fallen__b--pflaume { animation-delay: .44s; } } @keyframes c-fallen-drop { from { opacity: 0; translate: 0 -60px; } to { opacity: 1; translate: 0 0; } } .c-fallen__title { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-fallen__links { list-style: none; padding: 0; margin: var(--fv-space-24) 0 0; display: flex; flex-wrap: wrap; gap: var(--fv-space-12) var(--fv-space-32); } /* sections/faq.css */ /* Sektion faq (Handoff 8.6): Kopf links (sticky), Fragen rechts als FAQ-Karten (.fv-faq aus components.css). Frage Bold 24 Purpur, Antwort 18 Nachtblau, Plus/Minus als Text (kein Kreis). Karte bleibt auch auf dunklen Flaechen weiss. */ .c-faq__inner { display: grid; gap: clamp(28px, 4vw, 72px); } @media (min-width: 960px) { .c-faq__inner { grid-template-columns: minmax(260px, .8fr) 1.4fr; align-items: start; } .c-faq__head { position: sticky; top: calc(var(--header-h) + 32px); } } .c-faq__title { margin: 0 0 var(--fv-space-16); } .c-faq__intro { color: var(--fv-fg-muted); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); margin: 0; max-width: var(--fv-measure); } .c-faq__action { margin: var(--fv-space-24) 0 0; } .c-faq__list { display: grid; gap: var(--fv-fuge); } .c-faq__item.fv-faq + .c-faq__item.fv-faq { margin-top: 0; } .c-faq__q { align-items: center; } .c-faq__q:hover .c-faq__qtext { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-faq__a { color: var(--fv-nachtblau); max-width: calc(var(--fv-measure) + 4ch); } .c-faq__a a { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-faq__a .c-prose, .c-faq__a p { color: inherit; } @media (max-width: 767px) { .c-faq__q.c-faq__q, .fv-faq > summary { font-size: 1.25rem; } } /* sections/flow-widget.css */ /* flow-widget: Nutzerweg als App-Widget auf einem Bildschirm (Brandmanual v1.0: .fv-card, .fv-btn, Nebel-Felder, Radien-Tokens). Ohne JS (.c-widget ohne .is-js): alle Schritte untereinander, keine Bühne, keine Navigation. */ .c-widget { --w-gap: clamp(16px, 2vw, 28px); } .c-widget__card { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--fv-space-12); gap: 0; scroll-margin-top: calc(var(--w-top, var(--header-h)) + var(--fv-space-12)); } .c-widget__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: clamp(16px, 2.4vw, 32px); padding-bottom: clamp(12px, 1.6vw, 20px); } /* Kopf */ .c-widget__head { flex: none; } .c-widget__title { margin: 0; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-widget__intro { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); max-width: var(--fv-measure); } /* Fortschritt aus Bausteinen */ .c-widget__progress { list-style: none; margin: var(--fv-space-32) 0 0; padding: 0; display: flex; gap: 6px; } .c-widget__progress[hidden] { display: none; } .c-widget__pstep { flex: 1 1 0; min-width: 0; } .c-widget__pbtn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; inline-size: 100%; padding-block: 4px; cursor: pointer; color: var(--fv-schiefer); } .c-widget__pbtn:disabled { cursor: default; } .c-widget__pbtn:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); border-radius: var(--fv-radius-8); } .c-widget__pbar { display: block; block-size: 10px; border-radius: 3px; background: var(--fv-nebel); transition: background-color var(--fv-duration) var(--fv-easing); } .c-widget__plabel { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-widget__pstep.is-done .c-widget__pbar { background: var(--fv-nachtblau); } .c-widget__pstep.is-current .c-widget__pbar { background: var(--fv-purpur); } .c-widget__pstep.is-current .c-widget__plabel { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-widget__pbtn:not(:disabled):hover .c-widget__plabel { color: var(--fv-nachtblau); } /* Formular und Schritte */ .c-widget__form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; margin-top: var(--fv-space-24); } .c-widget__body { display: grid; gap: var(--fv-space-48); } .c-widget__step { display: flex; flex-direction: column; gap: var(--fv-space-16); } .c-widget__step[hidden] { display: none; } .c-widget__q { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); outline: none; } /* Mobil-QA 19.10.2026: outline:none oben nur fuer :focus (programmatischer Fokus beim Schrittwechsel, kein Tab-Ziel) - echter Ring bleibt ueber :focus-visible erhalten (WCAG 2.4.7). */ .c-widget__q:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-widget__qnum { display: block; margin-bottom: 4px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); } .c-widget.is-js .c-widget__qnum { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .c-widget__text { font-size: var(--fv-fs-body); color: var(--fv-fg-muted); } .c-widget__text p { margin: 0; } .c-widget fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } /* Verbfarben je Kachel/Detail/Bühne */ .c-widget [data-verb="foerdern"], .c-widget__stage[data-verb="foerdern"] { --w-verb: var(--fv-nachtblau); --w-verb-on: var(--fv-weiss); } .c-widget [data-verb="verbinden"], .c-widget__stage[data-verb="verbinden"] { --w-verb: var(--fv-purpur); --w-verb-on: var(--fv-weiss); } .c-widget [data-verb="unterstuetzen"], .c-widget__stage[data-verb="unterstuetzen"] { --w-verb: var(--fv-rosa); --w-verb-on: var(--fv-nachtblau); } .c-widget [data-verb="entwickeln"], .c-widget__stage[data-verb="entwickeln"] { --w-verb: var(--fv-violett); --w-verb-on: var(--fv-weiss); } .c-widget [data-verb="werben"], .c-widget__stage[data-verb="werben"] { --w-verb: var(--fv-pflaume); --w-verb-on: var(--fv-nachtblau); } /* Auswahlkacheln */ .c-widget__choices { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-widget__choice { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label meta" "teaser teaser"; align-items: center; gap: 6px 12px; min-block-size: 76px; padding: 16px 18px; align-content: center; border-radius: var(--fv-radius-16); background: var(--fv-nebel); color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-widget__choice:hover { background: var(--fv-flieder-hell); } .c-widget__radio { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; margin: 0; pointer-events: none; } .c-widget__chip { display: none; } /* Anmerkung #14 (Jelena): Farbbalken in Auswahlkacheln ganz raus */ .c-widget__clabel { grid-area: label; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); line-height: 1.25; } .c-widget__cmeta { grid-area: meta; font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .c-widget__cteaser { grid-area: teaser; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-widget__choice:has(:checked) { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-widget__choice:has(:checked) .c-widget__cteaser { color: var(--fv-weiss); } .c-widget__choice:has(:focus-visible), .c-widget__option:has(:focus-visible), .c-widget__consent:has(:focus-visible) { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } /* Einfachauswahl (Optionen) */ .c-widget__olabel { padding: 0; margin: 0 0 10px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-widget__ogrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); } .c-widget__option { position: relative; display: flex; align-items: center; min-block-size: 52px; padding: 10px 16px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); font-weight: var(--fv-fw-medium); line-height: 1.25; cursor: pointer; } .c-widget__option:hover { background: var(--fv-flieder-hell); } .c-widget__option:has(:checked) { background: var(--fv-nachtblau); color: var(--fv-weiss); } /* Detail je Auswahl */ .c-widget__details { display: grid; gap: var(--fv-space-16); } .c-widget__detail { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 24px); border-radius: var(--fv-radius-24); background: var(--fv-papier); } .c-widget__detail[hidden], .c-widget__cta[hidden] { display: none; } .c-widget__dtitle { margin: 0; font-size: var(--fv-fs-lead); line-height: 1.25; } .c-widget__dtext { margin: 0; color: var(--fv-schiefer); } .c-widget__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .c-widget__plabel2 { flex-basis: 100%; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-widget__amount { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.75rem); font-weight: var(--fv-fw-zahl); line-height: 1; font-variant-numeric: tabular-nums; } .c-widget__unit { color: var(--fv-schiefer); } .c-widget__pnote { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-widget__btitle { margin: 4px 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-widget__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } /* Haken frei stehend, ohne Hinterlegung (Anmerkung #13, R6) */ .c-widget__benefits li { position: relative; padding-inline-start: 32px; min-block-size: 24px; line-height: 1.4; } .c-widget__benefits li::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1px; inline-size: 20px; block-size: 20px; background: var(--fv-purpur); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; } .c-widget__benefits li.is-pending { color: var(--fv-schiefer); } .c-widget__benefits li.is-pending::after { background: var(--fv-schiefer); } .c-widget__dhtml { font-size: var(--fv-fs-body); } .c-widget__dhtml p { margin: 0 0 8px; } .c-widget__dhtml a, .c-widget__itext a { overflow-wrap: anywhere; } /* Ablauf */ .c-widget__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .c-widget__item { display: block; padding-block-end: 12px; border-block-end: 1px solid var(--fv-nebel); } .c-widget__item:last-child { border-block-end: 0; padding-block-end: 0; } .c-widget__inum { display: none; } /* keine sichtbaren Schrittnummern (Anmerkung #22) */ .c-widget__ititle { margin: 0 0 2px; font-weight: var(--fv-fw-bold); } .c-widget__itext { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-widget__itext p { margin: 0; } /* Felder */ .c-widget__fields { display: grid; gap: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-widget__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .c-widget__field.is-wide { grid-column: 1 / -1; } .c-widget__field label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-widget__req { color: var(--fv-purpur); } .c-widget__hint { order: 3; margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-widget__field :is(input, select, textarea) { inline-size: 100%; font: inherit; font-size: 1rem; color: var(--fv-nachtblau); border: 0; border-radius: var(--fv-radius-12); background: var(--fv-nebel); padding: 12px 16px; min-block-size: 50px; } .c-widget__field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--fv-nachtblau) 50%), linear-gradient(135deg, var(--fv-nachtblau) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat; } .c-widget__field textarea { resize: vertical; min-block-size: 120px; line-height: var(--fv-lh-body); } .c-widget__field :is(input, select, textarea):focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-widget__field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--fv-purpur); } .c-widget__consent { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); cursor: pointer; } .c-widget__consent input { flex: none; inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--fv-nachtblau); } .c-widget__privacy { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-widget__privacy p { margin: 0; } /* Zusammenfassung */ .c-widget__summary { padding: 16px 18px; border-radius: var(--fv-radius-16); background: var(--fv-papier); } .c-widget__summary[hidden] { display: none; } .c-widget__stitle { margin: 0 0 8px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-widget__sdl { margin: 0; display: grid; gap: 6px; } .c-widget__sdl > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-widget__sdl dt { color: var(--fv-schiefer); } .c-widget__sdl dd { margin: 0; font-weight: var(--fv-fw-medium); display: flex; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; } .c-widget__edit { all: unset; flex: none; cursor: pointer; font-weight: var(--fv-fw-bold); text-decoration: underline var(--fv-underline-thickness) var(--fv-rosa); text-underline-offset: var(--fv-underline-offset); } .c-widget__edit:hover { text-decoration-color: currentColor; } .c-widget__edit:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: 2px; border-radius: 4px; } /* Aktionen (mit JS in der Navigationsleiste) */ .c-widget__stepactions { display: flex; flex-wrap: wrap; gap: 12px; } .c-widget__stepactions[hidden], .c-widget__cnote[hidden] { display: none; } .c-widget__stepactions.is-in-nav { flex-wrap: nowrap; } .c-widget__cnote { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-widget__link2 { margin: 0; } .c-widget__dummy { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-widget [data-widget-submit][aria-disabled="true"] { cursor: not-allowed; } .c-widget__error { flex: none; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--fv-radius-12); background: var(--fv-rosa-hell); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-widget__error[hidden] { display: none; } /* Navigation */ .c-widget__nav { flex: none; display: flex; align-items: center; gap: 16px; margin-top: 12px; padding-top: 14px; box-shadow: 0 -1px 0 var(--fv-nebel); } .c-widget__nav[hidden] { display: none; } .c-widget__back { all: unset; cursor: pointer; padding: 12px 4px; font-weight: var(--fv-fw-bold); text-decoration: underline var(--fv-underline-thickness) var(--fv-rosa); text-underline-offset: var(--fv-underline-offset); } .c-widget__back:hover { text-decoration-color: currentColor; } .c-widget__back:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: 2px; border-radius: 4px; } .c-widget__back[hidden], .c-widget__next[hidden] { display: none; } .c-widget__count { white-space: nowrap; margin-inline: auto 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); font-variant-numeric: tabular-nums; } .c-widget.is-last .c-widget__count { margin-inline-end: 0; } /* Bühne (Bild, Baustein, später 3D) */ .c-widget__stage { display: none; position: relative; min-width: 0; --w-verb: var(--fv-nachtblau); } .c-widget__stage-media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--fv-radius-40); background: var(--fv-papier); } .c-widget__block { position: absolute; border-radius: var(--fv-radius-40); transition: background-color 400ms var(--fv-easing); } .c-widget__block--a { inset: 18% 14% 30% 22%; background: var(--w-verb); } .c-widget__block--b { inset: auto 46% 12% 14%; block-size: 22%; background: var(--fv-nebel); } .c-widget__stage-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms var(--fv-easing); } .c-widget__stage-img.is-active { opacity: 1; } .c-widget__stage-cap { position: absolute; inset: auto auto 16px 16px; margin: 0; max-inline-size: calc(100% - 32px); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 16px; border-radius: var(--fv-radius-16); background: var(--fv-weiss); color: var(--fv-nachtblau); box-shadow: var(--fv-shadow-card); font-size: var(--fv-fs-small); } .c-widget__stage-cap[hidden] { display: none; } .c-widget__stage-cap strong { font-size: var(--fv-fs-body); } .c-widget__note { margin-top: var(--fv-space-16); font-size: var(--fv-fs-small); color: var(--fv-fg-muted); max-width: 70ch; } .c-widget__note p { margin: 0; } /* ---------- Mit JS: ein Bildschirm ---------- */ .c-widget.is-js .c-widget__card { block-size: min(calc(100svh - var(--w-top, var(--header-h)) - 24px), 820px); min-block-size: 540px; overflow: hidden; } .c-widget.is-js .c-widget__body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; scrollbar-width: thin; } .c-widget.is-js .c-widget__step { padding-bottom: 4px; } .c-widget.is-js .c-widget__stage { display: block; } .c-widget:not(.has-choice) .c-widget__cta:not(:first-child), .c-widget:not(.has-choice) .c-widget__cnote:not(:first-of-type) { display: none; } .c-widget.is-js.is-started .c-widget__intro { display: none; } /* schwebender Assistent unten rechts: auf schmalen Schirmen Platz unter der Leiste lassen */ :root { --w-float: 0px; } @media (max-width: 959px) { :root:has([data-chat-launcher]:not([hidden])) { --w-float: 64px; } } @media (min-width: 960px) { .c-widget.is-js .c-widget__card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .c-widget.is-js .c-widget__stage { order: 2; } } @media (max-width: 959px) { .c-widget.is-js .c-widget__card { block-size: calc(100dvh - var(--w-top, var(--header-h)) - 16px - var(--w-float)); min-block-size: 0; max-block-size: 860px; grid-template-rows: auto minmax(0, 1fr); } .c-widget.is-js .c-widget__stage { block-size: clamp(64px, 11dvh, 150px); } .c-widget__stage-media { border-radius: var(--fv-radius-28); } .c-widget__stage-cap { inset: auto auto 10px 10px; padding: 6px 12px; } .c-widget__stage-cap strong { font-size: var(--fv-fs-small); } .c-widget.is-js .c-widget__main { padding: 16px 8px 4px; } .c-widget.is-js .c-widget__title { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); } .c-widget.is-js .c-widget__intro { margin-top: 8px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); } .c-widget__progress { margin-top: 16px; } .c-widget.is-js .c-widget__form { margin-top: 16px; } /* QA Runde 7, Fix 1: Beschriftung nur visuell verstecken (Name bleibt), Tippflaeche 44 px ohne Layoutaenderung */ .c-widget__plabel { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .c-widget__pbtn { position: relative; min-block-size: 24px; justify-content: center; } .c-widget__pbtn::after { content: ""; position: absolute; inset: -10px 0; } .c-widget.is-js .c-widget__q { font-size: var(--fv-fs-lead); } .c-widget.is-js .c-widget__text { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-widget.is-last .c-widget__count { display: none; } .c-widget__nav { gap: 12px; } .c-widget__stepactions.is-in-nav { margin-inline-start: auto; } .c-widget.is-js .c-widget__step { gap: 12px; } } @media (max-width: 599px) { .c-widget__choices { grid-template-columns: 1fr; gap: 8px; } .c-widget__choice { min-block-size: 0; padding: 10px 14px; column-gap: 10px; row-gap: 2px; } .c-widget__fields { grid-template-columns: 1fr; } .c-widget__card { padding: 8px; } .c-widget__sdl > div { grid-template-columns: 1fr; gap: 0; } .c-widget__sdl dt { font-size: var(--fv-fs-tag); } .c-widget__summary { padding: 12px 14px; } .c-widget__ogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-widget__option { min-block-size: 48px; padding: 8px 12px; font-size: var(--fv-fs-small); } } @media (prefers-reduced-motion: reduce) { .c-widget__stage-img, .c-widget__block, .c-widget__choice, .c-widget__pbar { transition: none; } } /* 3D-Bühne (Feld szene_3d, js/widget-szene-3d.js): Canvas über den Bildern, Bilder bleiben Fallback */ .c-widget__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; } .c-widget__stage.is-3d .c-widget__stage-img, .c-widget__stage.is-3d .c-widget__block { visibility: hidden; } /* sections/form.css */ /* form (Handoff 8.2, 8.5): Kontaktformular (Attrappe). Panel = weisse Karte (Radius 24, Kartenschatten); Felder Nebel-Hintergrund, Radius 12, keine Kontur, keine Pillen; Fokus Ring 3 px mit 2 px Abstand (Farbe --fv-focus je Flaeche, in der Karte Nachtblau). Keine IBAN-/Bankfelder. */ .c-form__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fv-space-64); align-items: start; } .c-form__title { font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); margin: 0 0 var(--fv-space-24); } .c-form__text { max-inline-size: var(--fv-measure); line-height: var(--fv-lh-body); } .c-form__panel { background: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); box-shadow: var(--fv-shadow-card); display: grid; gap: var(--fv-space-24); --fv-focus: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); } .c-form__dummy { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); background: var(--fv-rosa-hell); border-radius: var(--fv-radius-12); padding: var(--fv-space-12) var(--fv-space-16); } .c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fv-space-24); } .c-form__field { display: grid; gap: var(--fv-space-8); min-width: 0; } .c-form__field label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-form__field input, .c-form__field select, .c-form__field textarea { inline-size: 100%; font: inherit; font-size: var(--fv-fs-body); color: var(--fv-nachtblau); background: var(--fv-nebel); border: 0; border-radius: var(--fv-radius-12); padding: 14px var(--fv-space-16); transition: background-color var(--fv-duration) var(--fv-easing); } .c-form__field select { appearance: none; -webkit-appearance: none; padding-inline-end: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171d3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; } .c-form__field textarea { resize: vertical; min-block-size: 160px; } .c-form__field input:hover, .c-form__field select:hover, .c-form__field textarea:hover { background-color: var(--fv-flieder-hell); } .c-form__field :is(input, select, textarea):focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-form__privacy { font-size: var(--fv-fs-small); color: var(--fv-schiefer); max-inline-size: var(--fv-measure); } .c-form__privacy p { margin: 0; } .c-form__privacy a { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-form__actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-12) var(--fv-space-16); } /* QA Runde 7, Fix 13: Vorschau-Kennzeichnung, Pflichtfelder, Fehlerbereich (fuer das spaetere echte Formular) */ .c-form__dummy strong { display: inline-block; margin-inline-end: var(--fv-space-8); color: var(--fv-nachtblau); } .c-form__reqnote { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-form__req { color: var(--fv-purpur); } .c-form__error { margin: 0; padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-12); background: var(--fv-rosa-hell); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-form__error[hidden] { display: none; } .c-form__field :is(input, select, textarea)[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--fv-purpur); } .c-form__preview { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-form__actions .c-btn[aria-disabled="true"] { cursor: not-allowed; } @media (max-width: 1024px) { .c-form__layout { grid-template-columns: 1fr; gap: var(--fv-space-32); } } @media (max-width: 767px) { .c-form__row { grid-template-columns: 1fr; gap: var(--fv-space-24); } } /* eigene Flaeche: Abstand oben behalten (sonst klebt die Headline an der Sektionskante) */ .l-section + .l-section.c-form { padding-top: var(--fv-section-y); } /* sections/gallery.css */ /* gallery (Brandmanual v1.0, Welle 2): Bausteinmosaik. Bildflaechen Radius 40, Fuge 16 (mobil 12), Bildunterschrift auf Bild-Fade. Ohne Bild: ruhige Nebel-Flaeche mit zwei Bausteinen, Text in Nachtblau. Keine Kreise, keine Diagonalen, keine Konturen. */ .c-gal__head { display: grid; gap: var(--fv-space-16) var(--fv-space-48); margin-bottom: var(--fv-space-48); } @media (min-width: 900px) { .c-gal__head { grid-template-columns: 1.15fr 1fr; align-items: end; } } .c-gal__intro { margin: 0; max-width: 52ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); text-wrap: pretty; } .c-gal__grid { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 19vw, 280px); list-style: none; margin: 0; padding: 0; } .c-gal__item { grid-column: span 4; min-width: 0; } .c-gal__item:nth-child(1) { grid-column: 1 / 8; grid-row: span 2; } .c-gal__item:nth-child(2) { grid-column: 8 / 13; } .c-gal__item:nth-child(3) { grid-column: 8 / 11; } .c-gal__item:nth-child(4) { grid-column: 11 / 13; } .c-gal__item:nth-child(n+5) { grid-column: span 4; } /* letzte Reihe ohne Luecke: 1 Rest = volle Breite, 2 Reste = halbe/halbe (Reihen zu je 3 ab Bild 5) */ @media (min-width: 768px) { .c-gal__item:nth-child(3n+5):last-child { grid-column: 1 / -1; } .c-gal__item:nth-child(3n+6):last-child, .c-gal__item:nth-child(3n+5):nth-last-child(2) { grid-column: span 6; } } .c-gal__fig { position: relative; height: 100%; margin: 0; overflow: hidden; border-radius: var(--fv-radius-40); } .c-gal__media { position: relative; height: 100%; overflow: hidden; border-radius: var(--fv-radius-40); background-color: var(--fv-nebel); } .c-gal__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--fv-easing); } .c-gal__item:hover .c-gal__media img { transform: scale(1.03); } .c-gal__cap { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; gap: var(--fv-space-12); padding: var(--fv-space-48) var(--fv-space-24) var(--fv-space-24); color: var(--fv-weiss); background-image: var(--fv-gradient-image-fade); } .c-gal__num { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-small); font-variant-numeric: tabular-nums; } .c-gal__ctext { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8) var(--fv-space-12); } .c-gal__ctitle { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); line-height: 1.3; } .c-gal__meta { padding: 4px 10px; border-radius: var(--fv-radius-10); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .c-gal__text { flex-basis: 100%; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } /* Platzhalter ohne Foto */ .c-gal__item.is-placeholder .c-gal__media { display: grid; place-items: center; background-color: var(--fv-nebel); } :is(.is-tint, .is-papier) .c-gal__item.is-placeholder .c-gal__media { background-color: var(--fv-weiss); } .c-gal__ph { position: relative; inline-size: 76px; block-size: 52px; margin-bottom: var(--fv-space-48); } .c-gal__ph i { position: absolute; border-radius: var(--fv-radius-8); } .c-gal__ph i:nth-child(1) { left: 0; top: 0; inline-size: 44px; block-size: 52px; background-color: var(--fv-nachtblau); } .c-gal__ph i:nth-child(2) { left: 56px; bottom: 0; inline-size: 20px; block-size: 20px; border-radius: 5px; background-color: var(--fv-purpur); } .c-gal__item.is-placeholder .c-gal__cap { background-image: none; color: var(--fv-nachtblau); } .c-gal__item.is-placeholder .c-gal__text { color: var(--fv-schiefer); } .c-gal__note { margin: var(--fv-space-24) 0 0; font-size: 12px; line-height: 1.4; color: var(--fv-schiefer); } @media (max-width: 767px) { .c-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: var(--fv-space-12); } .c-gal__item, .c-gal__item:nth-child(n) { grid-column: span 1; grid-row: auto; } .c-gal__item:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; } .c-gal__item:nth-child(4) { grid-column: 1 / -1; } .c-gal__fig, .c-gal__media { border-radius: var(--fv-radius-24); } .c-gal__cap { padding: var(--fv-space-32) var(--fv-space-16) var(--fv-space-16); } .c-gal__item.is-placeholder .c-gal__ctitle { font-size: var(--fv-fs-small); } .c-gal__ph { margin-bottom: var(--fv-space-48); transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .c-gal__media img { transition: none; } .c-gal__item:hover .c-gal__media img { transform: none; } } /* Bildvermerk (Rechte): dezent, kein Tag */ .c-gal__ctext .c-gal__meta { flex-basis: 100%; padding: 0; border-radius: 0; background: none; color: rgba(255,255,255,.78); font-size: 12px; font-weight: var(--fv-fw-medium); line-height: 1.3; } .c-gal__ctext { flex-direction: column; align-items: flex-start; gap: 2px; } /* Lightbox und "Alle Bilder zeigen" (Felder lightbox, limit_visible; js/gallery-lightbox.js) */ .c-gal__item[hidden] { display: none; } .c-gal__open { position: absolute; inset: 0; z-index: 2; inline-size: 100%; block-size: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; } .c-gal__open:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: -3px; border-radius: var(--fv-radius-40); } .c-gal__more { margin: var(--fv-space-32) 0 0; text-align: center; } .c-gal-lb { position: fixed; inset: 0; inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; color: var(--fv-weiss); background-color: var(--fv-nachtblau); } .c-gal-lb::backdrop { background-color: var(--fv-nachtblau); } .c-gal-lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; } .c-gal-lb__stage { display: grid; place-items: center; min-block-size: 0; padding: var(--fv-space-64) var(--fv-space-96) var(--fv-space-16); } .c-gal-lb__img { max-inline-size: 100%; max-block-size: calc(100dvh - 150px); object-fit: contain; border-radius: var(--fv-radius-16); } .c-gal-lb__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fv-space-24); padding: var(--fv-space-16) var(--fv-space-96) var(--fv-space-32); } .c-gal-lb__cap { margin: 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-gal-lb__count { flex: none; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; } .c-gal-lb__btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; padding: 0; border: 0; border-radius: var(--fv-radius-12); color: var(--fv-weiss); background-color: rgba(255, 255, 255, .12); cursor: pointer; } .c-gal-lb__btn:hover { background-color: rgba(255, 255, 255, .24); } .c-gal-lb__btn:focus-visible { outline: 3px solid var(--fv-rosa); outline-offset: 2px; } .c-gal-lb__prev { left: var(--fv-space-24); top: 50%; transform: translateY(-50%); } .c-gal-lb__next { right: var(--fv-space-24); top: 50%; transform: translateY(-50%); } .c-gal-lb__close { right: var(--fv-space-24); top: var(--fv-space-16); } html.has-gal-lb { overflow: hidden; } @media (max-width: 767px) { .c-gal__open:focus-visible { border-radius: var(--fv-radius-24); } .c-gal-lb__stage { padding: var(--fv-space-64) var(--fv-space-12) var(--fv-space-12); } .c-gal-lb__foot { padding: var(--fv-space-12) var(--fv-space-16) var(--fv-space-24); } .c-gal-lb__prev, .c-gal-lb__next { top: auto; bottom: var(--fv-space-64); transform: none; } } /* Bildvermerk einheitlich: klein (12 px), Schiefer, direkt unter dem Bild bzw. unter der Galerie (Felder image_credit, note) */ .c-credit { margin: var(--fv-space-8) 0 0; font-size: 12px; line-height: 1.4; color: var(--fv-schiefer); } :is(.is-nacht, .is-dark, .is-purpur) :is(.c-credit, .c-gal__note) { color: rgba(255, 255, 255, .72); } /* sections/hero-3d.css */ /* Förderverein FH Erfurt: 3D-Hero "Bausteine" (nur /speedbuild/). Brandmanual v1.0: Nachtblau mit Glow, Labels und Karten als weisse Karten (Radius 16/24, Kartenschatten), Farbkachel plus Verb als Text, Button wie .fv-btn--on-dark. Keine radialen Verlaeufe, kein Glas. */ .fvh { --fvh-bg: var(--fv-nachtblau); --fvh-glow: var(--fv-gradient-glow); --fvh-text: var(--fv-weiss); --fvh-muted: var(--fv-weiss); --fvh-label-bg: var(--fv-weiss); --fvh-label-text: var(--fv-nachtblau); --fvh-label-muted: var(--fv-schiefer); --fvh-focus: var(--fv-rosa); --fvh-p: 0; position: relative; height: 320vh; height: 320svh; background: var(--fvh-bg); color: var(--fvh-text); } .fvh[data-fvh-theme="light"] { --fvh-bg: var(--fv-papier); --fvh-glow: var(--fv-gradient-glow-hell); --fvh-text: var(--fv-nachtblau); --fvh-muted: var(--fv-schiefer); --fvh-label-bg: var(--fv-weiss); --fvh-focus: var(--fv-nachtblau); } /* ohne Scrollstrecke (z. B. Fallback) reicht eine Bildschirmhöhe */ .fvh.is-fallback { height: auto; } .fvh__stage { position: sticky; top: var(--fvh-top, 0px); height: calc(100vh - var(--fvh-top, 0px)); height: calc(100svh - var(--fvh-top, 0px)); overflow: hidden; background-color: var(--fvh-bg); background-image: var(--fvh-glow); transition: background-color 0.9s ease; } .fvh.is-fallback .fvh__stage { position: relative; top: 0; height: auto; min-height: 100svh; } .fvh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.8s ease; } .fvh.is-3d .fvh-canvas { opacity: 1; } /* Text links (Desktop) bzw. unten (mobil); blendet beim Auffächern aus */ .fvh__copy { position: absolute; z-index: 2; left: clamp(20px, 6vw, 96px); top: 50%; width: min(36rem, 42vw); transform: translateY(calc(-50% - 40px * var(--fvh-p))); opacity: calc(1 - var(--fvh-p) * 2.4); pointer-events: none; } .fvh__copy > * { pointer-events: auto; } .fvh__title { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-display); line-height: var(--fv-lh-display); letter-spacing: var(--fv-ls-display); font-weight: var(--fv-fw-bold); text-wrap: balance; } .fvh__lead { margin: 0 0 var(--fv-space-32); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); color: var(--fvh-muted); max-width: 30rem; } .fvh__cta { display: inline-flex; align-items: center; gap: var(--fv-btn-gap); padding: var(--fv-space-8) var(--fv-space-8) var(--fv-space-8) 20px; border-radius: var(--fv-radius-12); min-height: 48px; box-sizing: border-box; background: var(--fv-weiss); color: var(--fv-nachtblau); text-decoration: none; font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); } .fvh__cta::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; width: var(--fv-btn-arrow-size); height: var(--fv-btn-arrow-size); border-radius: var(--fv-radius-8); background: var(--fv-purpur); color: var(--fv-weiss); transition: transform var(--fv-duration) var(--fv-easing); } .fvh__cta:hover { background: var(--fv-weiss-hover); } .fvh__cta:hover::after { transform: translateX(4px); } .fvh__caption { position: absolute; z-index: 2; left: 0; right: 0; padding: 0 clamp(16px, 4vw, 48px); top: clamp(64px, 8.5vh, 96px); margin: 0; text-align: center; font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h2); hyphens: manual; text-wrap: balance; opacity: clamp(0, calc((var(--fvh-p) - 0.7) * 4), 1); transform: translateY(calc(20px - 20px * clamp(0, calc((var(--fvh-p) - 0.7) * 4), 1))); pointer-events: none; } .fvh__caption small { display: block; margin-top: 0.4em; font-size: 0.5em; font-weight: var(--fv-fw-regular); color: var(--fvh-muted); letter-spacing: 0; } .fvh__hint { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: var(--fv-fs-small); color: var(--fvh-muted); opacity: calc(0.9 - var(--fvh-p) * 4); } .fvh__hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: currentColor; opacity: 0.6; } /* ---- Labels über den Säulen (echte Links/Buttons) */ .fvh-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .fvh-label { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 0.55em; align-items: center; margin: 0; padding: 0.55em 0.85em 0.6em; translate: -50% -100%; border: 0; border-radius: var(--fv-radius-16); background: var(--fvh-label-bg); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; max-width: 10em; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s, border-color 0.2s ease, background-color 0.2s ease; cursor: pointer; will-change: transform; } .fvh-label--foundation { translate: -50% 0; max-width: none; } .fvh-labels.is-on .fvh-label { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s, border-color 0.2s ease, background-color 0.2s ease; } .fvh-label__dot { grid-row: span 2; width: 0.8em; height: 0.8em; border-radius: 0.2em; background: var(--fvh-c); } .fvh-label__title { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); line-height: 1.2; } .fvh-label__text { font-size: var(--fv-fs-small); color: var(--fv-schiefer); line-height: var(--lh-ui); white-space: normal; } .fvh-label:hover .fvh-label__title { text-decoration: underline 2px var(--fv-rosa); text-underline-offset: 0.2em; } .fvh-label:focus-visible, .fvh-card:focus-visible, .fvh__cta:focus-visible { outline: 3px solid var(--fvh-focus); outline-offset: 3px; } /* ---- Fallback: SVG-Logo + HTML-Karten */ .fvh-fallback { display: none; } .fvh.is-fallback .fvh-fallback, .fvh:not(.fvh-js) .fvh-fallback { display: grid; gap: 2.5rem; justify-items: center; padding: clamp(26rem, 54vh, 34rem) clamp(16px, 5vw, 64px) 4rem; } .fvh.is-fallback .fvh__copy { top: clamp(80px, 14vh, 140px); transform: none; opacity: 1; width: min(36rem, 90vw); } .fvh.is-fallback .fvh__caption, .fvh.is-fallback .fvh__hint { display: none; } .fvh-fallback__mark { width: min(260px, 60vw); height: auto; } .fvh-fallback__mark { padding: var(--fv-space-32); border-radius: var(--fv-radius-40); background: var(--fv-weiss); box-sizing: content-box; } .fvh-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1100px, 100%); } .fvh-cards .is-foundation { grid-column: 1 / -1; } .fvh-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6em; align-items: center; height: 100%; box-sizing: border-box; padding: var(--fv-space-24); border-radius: var(--fv-radius-24); border: 0; box-shadow: var(--fv-shadow-card); background: var(--fvh-label-bg); color: var(--fv-nachtblau); text-decoration: none; } .fvh-card__dot { grid-row: span 2; width: 10px; height: 10px; border-radius: 3px; background: var(--fvh-c); } .fvh-card__title { font-weight: var(--fv-fw-bold); } .fvh-card__text { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } @media (max-width: 899px), (max-aspect-ratio: 9/10) { .fvh__copy { left: 20px; right: 20px; width: auto; top: auto; bottom: 64px; transform: translateY(calc(-30px * var(--fvh-p))); } .fvh__title { font-size: var(--fv-fs-display); } .fvh__caption { font-size: var(--fv-fs-h3); } .fvh__lead { margin-bottom: 1.4rem; } .fvh__hint { display: none; } .fvh-label { padding: 0.4em 0.6em; font-size: var(--fv-fs-small); } .fvh-label__text { display: none; } .fvh-label__dot { grid-row: auto; } /* schmale Bühne: jedes zweite Label höher, mit feiner Linie zur Säule */ .fvh-label--alt { margin-top: -2.6em; } .fvh-label--alt::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 2.6em; background: var(--fv-weiss); opacity: .4; } .fvh-cards { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .fvh-label { padding: 0.4em 0.55em; column-gap: 0.4em; } .fvh-label__title { font-size: var(--fv-fs-small); } } @media (prefers-reduced-motion: reduce) { .fvh-canvas, .fvh-label { transition: none; } } /* ---- Prototyp-Anpassung (Sektion "hero-3d"): Kopfzeile liegt über der Bühne (sie blendet beim Scrollen aus), Farben aus tokens.css */ .fvh { --fvh-top: 0px; font-family: inherit; } .fvh__copy .fvh__cta { background: var(--fv-weiss); } .fvh-cards [data-fvh-item] .fvh-card { --fvh-c: var(--fv-verb-foerdern); } .fvh-cards .verb-verbinden .fvh-card { --fvh-c: var(--fv-verb-verbinden); } .fvh-cards .verb-unterstuetzen .fvh-card { --fvh-c: var(--fv-verb-unterstuetzen); } .fvh-cards .verb-entwickeln .fvh-card { --fvh-c: var(--fv-verb-entwickeln); } .fvh-cards .verb-werben .fvh-card { --fvh-c: var(--fv-verb-werben); } .fvh-cards .verb-foerdern { grid-column: 1 / -1; order: 5; } /* Bühne um die Kopfzeile kürzer, damit Text und Hinweis beim Laden ganz sichtbar sind */ .fvh:not(.is-fallback) .fvh__stage { height: calc(100vh - var(--header-h, 0px)); height: calc(100svh - var(--header-h, 0px)); } /* sections/hero-echtbild.css */ /* hero-echtbild: Variante zum Startseiten-Hero (Wunsch Jelena 06.10.2026: "lieber ein echtes Bild oder echte Videos, nicht überall ein freigestellter Mensch"). Vollflächige echte Fotos (Ball, Karrieretag, Preise, Hochschule) als ruhige Sequenz: Überblendung 1,4 s, langsamer Ken-Burns (js/hero-echtbild.js, Web Animations). Lesbarkeit über Nachtblau-Ton und den Bild-Fade des Manuals (Verlauf 2: 180°, Nachtblau 0 bis 0,95); Text unten links auf dem Fade. Darunter die Tab-Leiste wie im Story-Hero (Baustein + Wort, Fortschritt im aktiven Baustein). Mobil: Foto oben, Text läuft auf Nachtblau aus dem Fade heraus. Bildvermerk klein unten rechts im Bild. */ .c-he { padding: 0; background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-he__block { --fv-fg: var(--fv-weiss); --fv-fg-muted: var(--fv-weiss); --fv-focus: var(--fv-weiss); --focus: var(--fv-weiss); --fv-link-underline: var(--fv-rosa); position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: clamp(600px, calc(100svh - var(--header-h, 80px) - 38px - 72px), 1040px); background-color: var(--fv-nachtblau); color: var(--fv-weiss); } /* ---- Bildfläche ---- */ .c-he__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: var(--fv-nachtblau); } .c-he__slide { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1400ms ease-in-out 0ms; } .c-he__slide.is-prev { z-index: 1; opacity: 1; transition: none; } .c-he__slide.is-active { z-index: 2; opacity: 1; } .c-he__img, .c-he__video { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; } .c-he:not(.is-js) .c-he__slide:first-child { opacity: 1; } /* Lesbarkeit: flacher Nachtblau-Ton plus Bild-Fade (Manual-Verlauf 2), etwas höher angesetzt, weil der Text unten steht */ .c-he__fade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(23, 29, 58, 0) 28%, rgba(23, 29, 58, 0.95) 100%), rgba(23, 29, 58, 0.28); } /* ---- Text ---- */ .c-he__inner { position: relative; z-index: 4; width: 100%; padding-block: var(--fv-space-128) var(--fv-space-64); } .c-he__copy { max-width: 760px; } .c-he__headline { margin: 0 0 var(--fv-space-24); max-width: 12em; color: var(--fv-weiss); font-size: var(--fv-fs-display); font-weight: var(--fv-fw-bold); line-height: 1.1; letter-spacing: var(--fv-ls-display); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; text-shadow: 0 1px 24px rgba(23, 29, 58, 0.35); } /* Markierung wie im Story-Hero (R9: gleichmäßige Box) */ .c-he__headline .c-he__mark { display: inline-block; line-height: 0.74; padding: 0 0.16em 0.35em; margin: 0 -0.02em -0.2em; vertical-align: baseline; border-radius: var(--fv-radius-mark); white-space: nowrap; text-shadow: none; } .c-he__text { margin: 0; max-width: 34em; color: var(--fv-weiss); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); text-wrap: pretty; } .c-he__panels { display: grid; max-width: 36em; } .c-he__panel { grid-area: 1 / 1; } .c-he__panel[hidden] { display: block; visibility: hidden; opacity: 0; } .c-he__panel.is-active { animation: c-he-panel 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms backwards; } .c-he__ptitle { margin: 0 0 var(--fv-space-8); color: var(--fv-weiss); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: 1.3; text-wrap: balance; } .c-he__ptext { margin: 0; color: var(--fv-weiss); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); text-wrap: pretty; } .c-he__plink { white-space: nowrap; } @keyframes c-he-panel { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } } .c-he__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-32); margin: var(--fv-space-32) 0 0; } .c-he .fv-link { --fv-fg: var(--fv-weiss); color: var(--fv-weiss); } /* ---- Bildvermerk ---- */ .c-he__credits { position: absolute; z-index: 4; right: var(--fv-page-margin); bottom: var(--fv-space-16); display: grid; justify-items: end; max-width: 50%; } .c-he__credit { grid-area: 1 / 1; margin: 0; color: var(--fv-weiss); opacity: 0.78; font-size: 0.75rem; line-height: 1.4; text-align: right; } .c-he__credit[hidden] { display: block; visibility: hidden; } /* ---- Tab-Leiste (wie Story-Hero) ---- */ .c-he__tabbar { background: var(--fv-weiss); } .c-he__tabwrap { display: flex; align-items: center; gap: var(--fv-space-24); min-height: 72px; } .c-he__tabs { display: flex; flex: 1 1 auto; align-items: center; gap: var(--fv-space-8) var(--fv-space-32); min-width: 0; } .c-he__tab { --hv: var(--fv-verb-foerdern); display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--fv-space-12); margin: 0; padding: var(--fv-space-16) 0; border: 0; background: none; color: var(--fv-nachtblau); font: inherit; font-weight: var(--fv-fw-bold); cursor: pointer; } .c-he__tab[data-verb="verbinden"] { --hv: var(--fv-verb-verbinden); } .c-he__tab[data-verb="unterstuetzen"] { --hv: var(--fv-verb-unterstuetzen); } .c-he__tab[data-verb="entwickeln"] { --hv: var(--fv-verb-entwickeln); } .c-he__tab[data-verb="werben"] { --hv: var(--fv-verb-werben); } .c-he__vtile { position: relative; overflow: hidden; flex: 0 0 auto; width: 12px; height: 12px; border-radius: var(--fv-radius-3); background-color: var(--hv); transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 420ms var(--fv-easing); } .c-he__vfill { position: absolute; inset: 0; border-radius: inherit; background-color: var(--hv); transform: scaleX(0); transform-origin: 0 50%; } .c-he__tab.is-active .c-he__vtile { width: 44px; background-color: color-mix(in srgb, var(--hv) 24%, var(--fv-weiss)); } .c-he.is-paused .c-he__tab.is-active .c-he__vfill, .c-he:not(.is-js) .c-he__tab.is-active .c-he__vfill { transform: none !important; } .c-he__vname { text-decoration: underline 2px transparent; text-underline-offset: var(--fv-underline-offset); } .c-he__tab:not(.is-active) .c-he__vname { color: var(--fv-schiefer); font-weight: var(--fv-fw-medium); } .c-he__tab.is-active .c-he__vname { text-decoration-color: var(--hv); } .c-he__tab:hover .c-he__vname { color: var(--fv-nachtblau); text-decoration-color: var(--hv); } .c-he__tab:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; border-radius: var(--fv-radius-8); } .c-he__play { order: -1; flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--fv-radius-12); background-color: var(--fv-nebel); color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } .c-he__play:hover { background-color: var(--fv-flieder-hell); } .c-he__play:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-he__play-icon { display: flex; gap: 4px; } .c-he__play-icon i { display: block; width: 4px; height: 14px; border-radius: 1px; background-color: currentColor; } .c-he.is-paused .c-he__play-icon i:last-child { display: none; } .c-he.is-paused .c-he__play-icon i:first-child { width: 12px; height: 14px; margin-left: 3px; clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Große Bildschirme: Text nicht zu weit vom Rand, Höhe begrenzt (min-height-Clamp) */ @media (min-width: 1800px) { .c-he__inner { padding-bottom: var(--fv-space-96); } } /* Tablet */ @media (max-width: 1024px) { .c-he__inner { padding-block: var(--fv-space-96) var(--fv-space-48); } .c-he__copy { max-width: 640px; } .c-he__credits { max-width: 60%; } } /* Mobil: Foto oben in eigener Höhe, Text darunter auf Nachtblau, Fade verbindet beides */ @media (max-width: 767px) { .c-he__block { display: block; min-height: 0; } .c-he__media { position: relative; inset: auto; height: clamp(280px, 78vw, 440px); } .c-he__fade { background: linear-gradient(180deg, rgba(23, 29, 58, 0) 45%, rgba(23, 29, 58, 1) 100%), rgba(23, 29, 58, 0.12); } .c-he__inner { margin-top: calc(-1 * var(--fv-space-64)); padding-block: 0 var(--fv-space-32); } .c-he__headline { margin-bottom: var(--fv-space-16); } .c-he__ptitle { font-size: var(--fv-fs-body); margin: 0 0 var(--fv-space-4); } .c-he__ptext { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-he__psent { display: none; } .c-he__actions { margin-top: var(--fv-space-24); gap: var(--fv-space-12) var(--fv-space-24); } .c-he__credits { top: var(--fv-space-12); bottom: auto; max-width: 80%; } .c-he__credit { text-shadow: 0 1px 6px rgba(23, 29, 58, 0.6); } .c-he__credit { font-size: 0.6875rem; opacity: 0.85; } .c-he__tabwrap { gap: var(--fv-space-8); min-height: 56px; padding-inline: var(--fv-page-margin); } .c-he__tabs { gap: var(--fv-space-24); padding-inline: var(--fv-space-8); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .c-he__tabs::-webkit-scrollbar { display: none; } .c-he__tab { scroll-snap-align: start; } .c-he__tab.is-active .c-he__vtile { width: 32px; } } @media (max-width: 420px) { .c-he__actions .fv-link { display: none; } } @media (prefers-reduced-motion: reduce) { .c-he__slide, .c-he__vtile { transition: none; } .c-he__panel.is-active { animation: none; } .c-he__img { transform: scale(1.02); } } /* sections/hero-szene.css */ /* Sektion hero-szene: Seitenkopf mit 3D-Bühne (Verein, Karrieretag, Engagement). Agent 3d-heros, 06.10.2026. Brandmanual v1.0: Fläche (Standard Papier), H1 nach Typo-Skala, Lead, Primärbutton mit einem Pfeil, Textlink. Die Szene (js/hero-szene.js -> js/szenen/.js) zeichnet in ein Canvas über den ganzen Kopf HINTER dem Text; die Marke sitzt in der Bühne rechts (mobil oben, kleiner). Standbild bzw. CSS-Bausteine sind Fallback und erstes Bild. */ .c-hsz { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--fv-space-32) var(--fv-section-y); } .c-hsz:not(.is-nacht, .is-purpur, .is-weiss) { background-color: var(--fv-papier); color: var(--fv-nachtblau); } /* Canvas der Szene (wird von js/szenen/kern.js eingefügt) */ .c-hsz__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .7s var(--fv-easing); } .c-hsz.is-3d .c-hsz__canvas { opacity: 1; } .c-hsz__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "crumbs stage" "copy stage"; column-gap: clamp(24px, 4vw, 64px); min-height: clamp(440px, 38vw, 560px); } .c-hsz__crumbs { grid-area: crumbs; margin-bottom: 0; } .c-hsz__copy { grid-area: copy; align-self: center; padding-block: var(--fv-space-48) var(--fv-space-24); max-width: 640px; } .c-hsz__stage { grid-area: stage; position: relative; align-self: stretch; min-height: clamp(360px, 36vw, 540px); } .c-hsz__headline { margin: 0 0 var(--fv-space-24); color: var(--fv-fg, var(--fv-nachtblau)); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); text-wrap: balance; hyphens: manual; } /* Typo-Hierarchie (Anmerkung #21, Jelena: "matscht"): H1 kräftig, Lead regulär und gedämpft, Fakten als eigene Ebene unter einer feinen Linie (klein/gedämpft über Wert), Buttons mit deutlichem Abstand. */ .c-hsz__text { margin: 0; max-width: 50ch; color: var(--fv-fg-muted, var(--fv-schiefer)); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-regular, 400); line-height: var(--fv-lh-lead); text-wrap: pretty; } .c-hsz:is(.is-nacht, .is-purpur) .c-hsz__text { color: var(--fv-weiss); } /* Fakten (z. B. Datum, Ort) */ .c-hsz__meta { display: flex; flex-wrap: wrap; gap: var(--fv-space-16) var(--fv-space-48); margin: var(--fv-space-32) 0 0; padding: var(--fv-space-24) 0 0; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); } .c-hsz__meta-item { display: grid; gap: var(--fv-space-4); min-width: 0; } .c-hsz__meta dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); color: var(--fv-fg-muted, var(--fv-schiefer)); } .c-hsz__meta dd { margin: 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-medium); line-height: 1.3; color: var(--fv-fg, var(--fv-nachtblau)); font-variant-numeric: tabular-nums; } /* ui-senior: Fakten in einer Zeile (keine zweite Faktenzeile), Werte Medium statt Bold: eine fette Ebene weniger im Kopf */ @media (min-width: 900px) { .c-hsz__meta { flex-wrap: nowrap; column-gap: var(--fv-space-32); } .c-hsz__meta-item { flex: 0 1 auto; } } .c-hsz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-32); margin: var(--fv-space-48) 0 0; } /* Echtes Foto in voller Breite direkt unter dem Kopf (Feld photo) */ .c-hsz-photo { position: relative; margin: 0; background: var(--fv-nachtblau); } .c-hsz-photo img { display: block; inline-size: 100%; block-size: clamp(300px, 42vw, 760px); object-fit: cover; object-position: 50% 45%; } .c-hsz-photo__cap { position: absolute; inset: auto auto var(--fv-space-24) var(--fv-page-margin); max-inline-size: calc(100% - 2 * var(--fv-page-margin)); padding: 6px 12px; border-radius: var(--fv-radius-8); background: rgba(255,255,255,.94); box-shadow: 0 1px 4px rgba(0,0,0,.18); color: var(--fv-nachtblau); font-size: 13px; font-weight: var(--fv-fw-medium); line-height: 1.3; } /* Standbild: gleiche Geometrie und gleiches Material wie die Szene (assets/img/3d), Papiergrund geht in die Fläche über */ .c-hsz__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.25); mix-blend-mode: darken; /* Papiergrund des Bildes und der Fläche verschmelzen */ /* Ränder des Standbilds weich in die Fläche auslaufen lassen (keine sichtbare Bildkante) */ -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); transition: opacity .6s var(--fv-easing), visibility 0s .6s; } .c-hsz.is-3d .c-hsz__still, .c-hsz.is-3d .c-hsz__blocks { opacity: 0; visibility: hidden; } /* CSS-Bausteine (ohne Standbild): ruhige Komposition aus der Bildmarke */ .c-hsz__blocks { position: absolute; left: 50%; top: 50%; width: min(78%, 360px); aspect-ratio: 1; transform: translate(-50%, -50%); transition: opacity .6s var(--fv-easing); } .c-hsz__blocks span { position: absolute; border-radius: var(--fv-radius-16); } .c-hsz__blocks span:nth-child(1) { left: 14%; top: 22%; width: 46%; height: 30%; background: var(--fv-nachtblau); border-radius: var(--fv-radius-24); } .c-hsz__blocks span:nth-child(2) { left: 46%; top: 40%; width: 30%; height: 44%; background: var(--fv-nachtblau); border-radius: var(--fv-radius-24); } .c-hsz__blocks span:nth-child(3) { left: 40%; top: 14%; width: 22%; height: 24%; background: var(--fv-purpur); } .c-hsz__blocks span:nth-child(4) { left: 4%; top: 56%; width: 30%; height: 18%; background: var(--fv-rosa); } .c-hsz__blocks span:nth-child(5) { left: 34%; top: 2%; width: 40%; height: 7%; background: var(--fv-violett); border-radius: var(--fv-radius-8); } /* Dunkle Flächen: Brotkrumen und Textlink hell */ .c-hsz:is(.is-nacht, .is-purpur) .c-crumbs :is(li, a, span) { color: var(--fv-weiss); } .c-hsz:is(.is-nacht, .is-purpur) .c-crumbs li + li::before { background-color: var(--fv-weiss); } /* Szene engagement: die vorhandene Bühne (css/sections/engagement-3d.css) sitzt im Kopf, Fläche Weiß */ .c-hsz--pins .c-hsz__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .c-hsz--pins .c-hsz__stage { align-self: center; min-height: 0; } .c-hsz .c-e3d { padding: 0; background: none; overflow: visible; } .c-hsz--pins .c-e3d__stage { height: clamp(500px, 64vh, 640px); } /* Tablet und Mobil: Bühne kleiner über dem Text, Brotkrumen zuerst */ @media (max-width: 899px) { .c-hsz { padding-top: var(--fv-space-24); } .c-hsz__inner, .c-hsz--pins .c-hsz__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "crumbs" "stage" "copy"; min-height: 0; } .c-hsz__stage { min-height: 0; height: clamp(240px, 62vw, 420px); margin-block: var(--fv-space-8) 0; } .c-hsz--pins .c-hsz__inner { grid-template-areas: "crumbs" "copy" "stage"; } .c-hsz--pins .c-hsz__copy { padding-block: var(--fv-space-24) 0; } .c-hsz--pins .c-hsz__stage { height: auto; margin-top: var(--fv-space-32); } .c-hsz__copy { padding-block: var(--fv-space-16) 0; } .c-hsz__still { transform: scale(1.5); } } @media (max-width: 599px) { .c-hsz--pins .c-e3d__stage { height: 460px; } .c-hsz__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--fv-space-8) var(--fv-space-16); margin-top: var(--fv-space-24); padding-top: var(--fv-space-16); } .c-hsz-photo img { block-size: auto; aspect-ratio: 4 / 3; } .c-hsz__meta-item { display: contents; } .c-hsz__actions { gap: var(--fv-space-16) var(--fv-space-24); } } @media (prefers-reduced-motion: reduce) { .c-hsz__canvas, .c-hsz__still, .c-hsz__blocks { transition: none; } } /* Responsive-QA Runde 8: Mobil Szene niedriger, Titel und Button bleiben im ersten Bildschirm */ @media (max-width: 600px) { .c-hsz:not(.c-hsz--pins) .c-hsz__stage { height: clamp(170px, 46vw, 260px); } } /* sections/hero.css */ /* hero: Startseiten-Hero nach Brandmanual v1.0 Abschnitt 12.1, Polish-Runde 1 (06.10.2026): volle Breite. Purpur-Flaeche mit Glow von Kante zu Kante, Inhalt im Seitenraster (.l-container), Display-Headline Weiss mit genau einer Markierung (Rosa/Nachtblau, R9: gleichmaessige Box), Button auf dunkel plus Textlink. Buehne [data-hero-stage]: rechte Haelfte in voller Hoehe, spaeter Platz fuer eine 3D-Szene; bis dahin Fallback-Inhalt: --cutout Freisteller-Duo vor Rosa-Baustein, Kopf ueber Kante, unten aus der Flaeche laufend; dazu vier Bausteine (Logo-DNA, Fuge 16) am rechten Rand angeschnitten --image Foto als Bildflaeche Radius 40 --deco Bildmodus abstrakt (partials/deco.html) in derselben Bildflaeche --mark Bildmarke unveraendert auf weissem Baustein Darunter die reduzierte Verbleiste (R10): Farbkachel plus Wort, eine Zeile. Hover/Fokus setzt per js/hero.js [data-verb-active] und meldet CustomEvent "fv:verb". */ .c-hero { --hero-cr: min(600px, 50vw - var(--fv-page-margin)); padding: 0; background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-hero__block { --fv-glow: var(--fv-gradient-glow); --fv-fg: var(--fv-weiss); --fv-fg-muted: var(--fv-weiss); --fv-focus: var(--fv-weiss); --focus: var(--fv-weiss); --fv-link-underline: var(--fv-rosa); position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; /* Viewport minus Kopf (Servicezeile + Header) minus Verbleiste: Hero plus Leiste fuellen den ersten Bildschirm */ min-height: clamp(600px, calc(100svh - var(--header-h, 80px) - 38px - 72px), 1040px); background-color: var(--fv-purpur); color: var(--fv-weiss); } .c-hero__inner { position: relative; z-index: 2; padding-block: var(--fv-space-96); pointer-events: none; } .c-hero__copy { max-width: min(600px, 50%); pointer-events: auto; } .c-hero__headline { margin: 0 0 var(--fv-space-32); max-width: 11.5em; color: var(--fv-weiss); font-size: var(--fv-fs-display); font-weight: var(--fv-fw-bold); line-height: 1.1; letter-spacing: var(--fv-ls-display); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } /* Markierung (R9): Box als inline-block mit fester Geometrie (Familjen: Versalhoehe 0,65 em, Unterlaenge ca. 0,2 em). Oben 0,12 em ueber der Versalhoehe, unten 0,12 em unter der Unterlaenge: gleichmaessig um die Schrift, unabhaengig von der Zeilenhoehe. Negative Raender halten die Zeilenabstaende der Headline gleich (keine Kollision mit der Zeile darueber). */ .c-hero__headline .c-hero__mark { display: inline-block; line-height: 0.74; padding: 0 0.16em 0.35em; margin: 0 -0.02em -0.2em; vertical-align: baseline; border-radius: var(--fv-radius-mark); white-space: nowrap; } .c-hero__text { margin: 0; max-width: 34em; color: var(--fv-weiss); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); text-wrap: pretty; } .c-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-32); margin: var(--fv-space-48) 0 0; } .c-hero .fv-link { --fv-fg: var(--fv-weiss); color: var(--fv-weiss); } /* ---- Buehne: rechte Haelfte, volle Hoehe (3D-Canvas spaeter hier hinein) ---- */ .c-hero__stage { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; right: 0; display: flex; align-items: center; justify-content: flex-start; } /* Freisteller-Duo (Handoff 10.2, LAYOUT-MUSTER 1): Rosa-Baustein als Buehne, Person breiter als der Baustein, Kopf ragt ca. 25 % der Kompositionshoehe ueber die Bausteinkante, unten laufen Baustein und Person aus der Flaeche. Alle Masse in % der Kompositionsbox, damit Bausteine und Duo zusammen skalieren. */ .c-hero--cutout .c-hero__stage { align-items: flex-end; } .c-hero__cut { --cut-r: var(--fv-radius-40); position: absolute; bottom: 0; left: min(var(--hero-cr) + 96px, 50vw - 32px); transform: translateX(-100%); height: min(80%, 820px); aspect-ratio: 896 / 1080; } .c-hero__cut-block { position: absolute; z-index: 1; left: 6%; right: -8%; top: 30%; bottom: -12%; border-radius: var(--cut-r); background-color: var(--fv-rosa); transition: background-color 360ms var(--fv-easing); } .c-hero__cut-pic { position: absolute; z-index: 2; inset: 0; display: block; } .c-hero__cut-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; } /* Bausteine: Logo-DNA (abgerundete Rechtecke, Fuge 16), nicht zur Bildmarke angeordnet, rechts angeschnitten */ .c-hero__bricks { position: absolute; inset: 0; z-index: 0; } .c-hero__cut .c-hero__bricks { z-index: 0; } .c-hero__brick { position: absolute; display: block; border-radius: var(--fv-radius-40); transition: opacity 360ms var(--fv-easing), scale 360ms var(--fv-easing); transform-origin: 0 0; } .c-hero__brick--foerdern { left: calc(108% + var(--fv-fuge)); top: 54%; width: 160%; bottom: -12%; background-color: var(--fv-nachtblau); } .c-hero__brick--verbinden { left: calc(108% + var(--fv-fuge) + 48px); top: calc(54% + 48px); width: 30%; aspect-ratio: 1; border-radius: var(--fv-radius-28); background-color: var(--fv-purpur); } .c-hero__brick--werben { left: calc(108% + var(--fv-fuge)); top: calc(54% - var(--fv-fuge) - 8%); width: 22%; height: 8%; border-radius: var(--fv-radius-24); background-color: var(--fv-pflaume); } .c-hero__brick--entwickeln { left: 78%; top: 12%; width: 160%; height: 8%; border-radius: var(--fv-radius-24); background-color: var(--fv-violett); } /* Verb-Hover: Baustein hervorheben, Rosa-Baustein hinter dem Duo nimmt die Verbfarbe an (verbinden: bleibt Rosa, Purpur verschwaende auf Purpur) */ .c-hero[data-verb-active] .c-hero__brick { opacity: 0.35; } .c-hero[data-verb-active="foerdern"] .c-hero__brick--foerdern, .c-hero[data-verb-active="verbinden"] .c-hero__brick--verbinden, .c-hero[data-verb-active="werben"] .c-hero__brick--werben, .c-hero[data-verb-active="entwickeln"] .c-hero__brick--entwickeln { opacity: 1; scale: 1.04; } .c-hero[data-verb-active="verbinden"] .c-hero__brick--foerdern { opacity: 1; } .c-hero[data-verb-active="foerdern"] .c-hero__cut-block { background-color: var(--fv-nachtblau); } .c-hero[data-verb-active="entwickeln"] .c-hero__cut-block { background-color: var(--fv-violett); } .c-hero[data-verb-active="werben"] .c-hero__cut-block { background-color: var(--fv-pflaume); } /* Einstieg: Bausteine gleiten gestaffelt ein, Duo hebt sich (nur ohne reduzierte Bewegung) */ @media (prefers-reduced-motion: no-preference) { .c-hero__brick, .c-hero__cut-block { animation: c-hero-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; } .c-hero__cut-block { animation-delay: 80ms; } .c-hero__brick--foerdern { animation-delay: 160ms; } .c-hero__brick--werben { animation-delay: 260ms; } .c-hero__brick--verbinden { animation-delay: 340ms; } .c-hero__brick--entwickeln { animation-delay: 420ms; } .c-hero__cut-pic { animation: c-hero-rise 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 220ms backwards; } } @keyframes c-hero-in { from { opacity: 0; translate: 64px 48px; } to { opacity: 1; translate: 0 0; } } @keyframes c-hero-rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } } /* Foto / abstrakter Bildmodus: Bildflaeche Radius 40 */ .c-hero__frame { position: relative; overflow: hidden; width: min(100%, 520px); margin-left: calc(var(--hero-cr) - min(100%, 520px)); aspect-ratio: 4 / 5; border-radius: var(--fv-radius-40); background-color: var(--fv-nachtblau); } .c-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; } .c-hero__frame .deco { position: absolute; inset: 0; } /* Bildmarke unveraendert auf weissem Baustein */ .c-hero__marktile { width: min(100%, 440px); margin-left: calc(var(--hero-cr) - min(100%, 440px)); padding: var(--fv-space-48); border-radius: var(--fv-radius-40); background-color: var(--fv-weiss); } .c-hero__marktile .c-mark { display: block; width: 100%; } /* ---- Verbleiste (R10): eine Zeile, Farbkachel plus Wort ---- */ .c-hero__verbs { background: var(--fv-weiss); } .c-hero__verbs ul { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--fv-space-8) var(--fv-space-48); list-style: none; margin: 0; padding: 0; min-height: 72px; } .c-hero__verbs li { --hv: var(--fv-verb-foerdern); flex: 0 0 auto; } .c-hero__verbs [data-verb="verbinden"] { --hv: var(--fv-verb-verbinden); } .c-hero__verbs [data-verb="unterstuetzen"] { --hv: var(--fv-verb-unterstuetzen); } .c-hero__verbs [data-verb="entwickeln"] { --hv: var(--fv-verb-entwickeln); } .c-hero__verbs [data-verb="werben"] { --hv: var(--fv-verb-werben); } .c-hero__verbs a { display: inline-flex; align-items: center; gap: var(--fv-space-12); padding-block: var(--fv-space-16); color: var(--fv-nachtblau); text-decoration: none; } .c-hero__vtile { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; background-color: var(--hv); transition: scale var(--fv-duration) var(--fv-easing); } .c-hero__vname { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); line-height: 1.2; text-decoration: underline 2px transparent; text-underline-offset: 0.18em; text-decoration-skip-ink: none; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-hero__verbs a:is(:hover, :focus-visible) .c-hero__vname { text-decoration-color: var(--hv); } .c-hero__verbs a:is(:hover, :focus-visible) .c-hero__vtile { scale: 1.33; } .c-hero__verbs a:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; border-radius: var(--fv-radius-8); } /* ---- Tablet ---- */ @media (max-width: 1100px) { .c-hero__copy { max-width: 58%; } .c-hero__cut { height: min(72%, 640px); } } /* ---- Mobil: gestapelt, Buehne unter dem Text in eigener Hoehe ---- */ @media (max-width: 900px) { .c-hero { --hero-cr: 100%; } .c-hero__block { display: flex; flex-direction: column; align-items: stretch; min-height: 0; } .c-hero__inner { order: 1; padding-block: var(--fv-space-48) var(--fv-space-32); } .c-hero__copy { max-width: none; } .c-hero__headline { max-width: 11em; line-height: 1.16; } .c-hero__actions { margin-top: var(--fv-space-32); } .c-hero__stage { order: 2; position: relative; left: auto; right: auto; top: auto; bottom: auto; height: clamp(340px, 92vw, 520px); justify-content: center; } .c-hero__cut { --cut-r: var(--fv-radius-24); left: 50%; transform: translateX(-56%); height: 100%; } .c-hero__brick { border-radius: var(--fv-radius-24); } .c-hero__brick--verbinden { left: calc(108% + var(--fv-fuge) + 24px); top: calc(54% + 24px); border-radius: var(--fv-radius-16); } .c-hero__brick--werben, .c-hero__brick--entwickeln { border-radius: var(--fv-radius-16); } .c-hero__frame, .c-hero__marktile { margin: 0 var(--fv-page-margin) var(--fv-space-32); } .c-hero__frame { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--fv-radius-24); } .c-hero__marktile { width: min(100%, 280px); padding: var(--fv-space-32); border-radius: var(--fv-radius-24); } .c-hero:not(.c-hero--cutout) .c-hero__stage { height: auto; } .c-hero__verbs .l-container { padding-inline: 0; } .c-hero__verbs ul { gap: var(--fv-space-24); min-height: 56px; padding-inline: var(--fv-page-margin); overflow-x: auto; scrollbar-width: none; } .c-hero__verbs ul::-webkit-scrollbar { display: none; } } @media (prefers-reduced-motion: reduce) { .c-hero__vname, .c-hero__vtile, .c-hero__brick, .c-hero__cut-block { transition: none; } } /* ===================================================================================================================== Story-Modus (Feld chapters, 06.10.2026, Agent hero-story-3d): fünf Bereiche als Tabs mit Autoplay. Headline bleibt fest (links oben), darunter Text und Buttons; das aktive Kapitel steht unten links als Bildunterschrift (Figma P07: kleine Zeile unten links neben der Person). Bühne rechts: Freisteller mittig, Bausteine als Three.js-Szene (Canvas über dem ganzen Block, hinter dem Text). Ohne 3D: Freisteller vor Baustein in Verbfarbe plus CSS-Bausteine. ===================================================================================================================== */ .c-hero--story .c-hero__inner { padding-block: var(--fv-space-64); } .c-hero--story .c-hero__copy { max-width: min(620px, 46%); } .c-hero--story .c-hero__headline { margin-bottom: var(--fv-space-32); } .c-hero--story .c-hero__actions { margin-top: var(--fv-space-32); } .c-hero--story .c-hero__stage { left: 44%; } /* Freisteller-Box: mittig in der Bühne, unten aus der Fläche laufend. Alle Kapitel teilen eine Box; schmale Personen stehen mittig darin (object-fit: contain, unten bündig). --zoom vergrößert nach unten (Kopfhöhe bleibt). */ .c-hero__cut--story { left: 50%; transform: translateX(-50%); height: min(84%, 900px); aspect-ratio: 4 / 5; } .c-hero__cut--story .c-hero__cut-block { left: 4%; right: 4%; top: 28%; bottom: -12%; } .c-hero__cut--story .c-hero__cut-pic { opacity: 0; visibility: hidden; transform-origin: 50% 0; scale: var(--zoom, 1); transition: opacity 520ms var(--fv-easing), translate 620ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 520ms; translate: 0 16px; } .c-hero__cut--story .c-hero__cut-pic.is-active { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 120ms, 120ms, 0s; } /* Bausteine des Fallbacks in Story-Box neu gesetzt (rechts der Person, angeschnitten) */ .c-hero__cut--story .c-hero__brick--foerdern { left: calc(96% + var(--fv-fuge)); top: 58%; } .c-hero__cut--story .c-hero__brick--verbinden { left: calc(96% + var(--fv-fuge) + 48px); top: calc(58% + 48px); } .c-hero__cut--story .c-hero__brick--werben { left: calc(96% + var(--fv-fuge)); top: calc(58% - var(--fv-fuge) - 8%); } .c-hero__cut--story .c-hero__brick--entwickeln { left: 70%; top: 10%; } /* Rosa-Baustein hinter der Person: auf Purpur nie Purpur, sonst Verbfarbe des Kapitels */ .c-hero--story[data-verb-active="unterstuetzen"] .c-hero__cut-block, .c-hero--story[data-verb-active="verbinden"] .c-hero__cut-block { background-color: var(--fv-rosa); } .c-hero--story[data-verb-active] .c-hero__brick { opacity: 1; scale: 1; } /* 3D aktiv: Canvas übernimmt Bausteine und Person; die Bilder bleiben im DOM (Alt-Text, Lage für die Szene) */ .c-hero__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 700ms var(--fv-easing); } .c-hero.is-3d .c-hero__canvas { opacity: 1; } .c-hero.is-3d .c-hero__bricks, .c-hero.is-3d .c-hero__cut-block { opacity: 0; transition: opacity 500ms var(--fv-easing); animation: none; } .c-hero.is-3d .c-hero__cut--story .c-hero__cut-pic { opacity: 0; transition: opacity 0s linear 760ms; } /* erst ausblenden, wenn der Canvas ganz da ist */ .c-hero.is-3d .c-hero__cut--story .c-hero__cut-pic:not(.is-active) { transition: none; } /* Kapitel-Text: alle Panels in einer Rasterzelle gestapelt (keine Höhensprünge), inaktive unsichtbar */ .c-hero__panels { display: grid; max-width: 30em; } .c-hero__panel { grid-area: 1 / 1; align-self: start; } .c-hero__panel[hidden] { display: block; visibility: hidden; opacity: 0; } .c-hero__panel.is-active { animation: c-hero-panel 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms backwards; } .c-hero__ptitle { margin: 0 0 var(--fv-space-8); color: var(--fv-weiss); font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: 1.3; text-wrap: balance; } .c-hero__ptext { margin: 0; color: var(--fv-weiss); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); text-wrap: pretty; } .c-hero__plink { white-space: nowrap; } @keyframes c-hero-panel { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } } /* ---- Tab-Leiste: Baustein + Wort; aktiver Baustein wird breiter und füllt sich (Autoplay-Fortschritt) ---- */ .c-hero__tabwrap { display: flex; align-items: center; gap: var(--fv-space-24); min-height: 72px; } .c-hero__tabs { display: flex; flex: 1 1 auto; align-items: center; gap: var(--fv-space-8) var(--fv-space-32); min-width: 0; } .c-hero__tab { --hv: var(--fv-verb-foerdern); display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--fv-space-12); margin: 0; padding: var(--fv-space-16) 0; border: 0; background: none; color: var(--fv-nachtblau); font: inherit; cursor: pointer; } .c-hero__tab[data-verb="verbinden"] { --hv: var(--fv-verb-verbinden); } .c-hero__tab[data-verb="unterstuetzen"] { --hv: var(--fv-verb-unterstuetzen); } .c-hero__tab[data-verb="entwickeln"] { --hv: var(--fv-verb-entwickeln); } .c-hero__tab[data-verb="werben"] { --hv: var(--fv-verb-werben); } .c-hero__tab .c-hero__vtile { position: relative; overflow: hidden; width: 12px; height: 12px; border-radius: 3px; background-color: var(--hv); transition: width 420ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 420ms var(--fv-easing); } .c-hero__vfill { position: absolute; inset: 0; border-radius: inherit; background-color: var(--hv); transform: scaleX(0); transform-origin: 0 50%; } .c-hero__tab.is-active .c-hero__vtile { width: 44px; background-color: color-mix(in srgb, var(--hv) 24%, var(--fv-weiss)); } .c-hero.is-paused .c-hero__tab.is-active .c-hero__vfill, .c-hero:not(.is-js) .c-hero__tab.is-active .c-hero__vfill { transform: none !important; } .c-hero__tab .c-hero__vname { text-decoration: underline 2px transparent; } .c-hero__tab:not(.is-active) .c-hero__vname { color: var(--fv-schiefer); font-weight: var(--fv-fw-medium); } .c-hero__tab.is-active .c-hero__vname { text-decoration-color: var(--hv); } .c-hero__tab:hover .c-hero__vname { color: var(--fv-nachtblau); text-decoration-color: var(--hv); } .c-hero__tab:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; border-radius: var(--fv-radius-8); } .c-hero__play { order: -1; flex: 0 0 auto; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: var(--fv-radius-12); background-color: var(--fv-nebel); color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } .c-hero__play:hover { background-color: var(--fv-flieder-hell); } .c-hero__play:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-hero__play-icon { display: flex; gap: 4px; } .c-hero__play-icon i { display: block; width: 4px; height: 14px; border-radius: 1px; background-color: currentColor; } .c-hero.is-paused .c-hero__play-icon i:last-child { display: none; } .c-hero.is-paused .c-hero__play-icon i:first-child { width: 12px; height: 14px; margin-left: 3px; border-radius: 1px; clip-path: polygon(0 0, 100% 50%, 0 100%); } @media (max-width: 1100px) { .c-hero--story .c-hero__copy { max-width: 52%; } .c-hero--story .c-hero__stage { left: 46%; } } /* Mobil: Text oben, Bühne darunter in eigener Höhe; Kapitel-Text kompakt unter den Buttons; Tabs horizontal scrollbar */ @media (max-width: 900px) { .c-hero--story .c-hero__inner { order: 1; padding-block: var(--fv-space-32) var(--fv-space-8); } .c-hero--story .c-hero__copy { max-width: none; } .c-hero--story .c-hero__headline { margin-bottom: var(--fv-space-16); } .c-hero--story .c-hero__actions { margin-top: var(--fv-space-24); } .c-hero__panels { max-width: none; } .c-hero__ptitle { font-size: var(--fv-fs-body); margin: 0 0 var(--fv-space-4); } .c-hero__ptext { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-hero__psent { display: none; } /* mobil: Satz entfällt, Titel plus Link bleiben (erster Bildschirm) */ .c-hero--story .c-hero__actions { margin-top: var(--fv-space-16); gap: var(--fv-space-12) var(--fv-space-24); } .c-hero.c-hero--story .c-hero__stage { order: 2; left: auto; height: clamp(270px, 70vw, 440px); } .c-hero__cut--story { height: 100%; } .c-hero__tabwrap { gap: var(--fv-space-8); min-height: 56px; padding-inline: 0 var(--fv-page-margin); } .c-hero__tabs { gap: var(--fv-space-24); padding-inline: var(--fv-page-margin) var(--fv-space-8); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .c-hero__tabs::-webkit-scrollbar { display: none; } .c-hero__tab { scroll-snap-align: start; } .c-hero__tab.is-active .c-hero__vtile { width: 32px; } } @media (max-width: 420px) { .c-hero--story .c-hero__actions .fv-link { display: none; } /* Textlink "Lernen Sie uns kennen" erst ab 421 px */ } @media (prefers-reduced-motion: reduce) { .c-hero__cut--story .c-hero__cut-pic, .c-hero__tab .c-hero__vtile, .c-hero__canvas { transition: none; } .c-hero__panel.is-active { animation: none; } } .c-hero.is-3d .c-hero__cut--story .c-hero__cut-pic { translate: 0 0; } /* sections/icon-tiles.css */ /* Sektion icon-tiles: Raster; Kachel selbst (48/64/96, Verbfarbe, Icon 50 %, stroke currentColor) kommt aus components.css (.fv-icon-tile) */ .fv-icon-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-32) var(--fv-fuge); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .fv-icon-tiles--96 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .fv-icon-tiles__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fv-space-12); } .fv-icon-tiles__label { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .fv-icon-tiles .fv-icon-tile:not([data-verb]) { --fv-tile-bg: var(--fv-nebel); --fv-tile-fg: var(--fv-nachtblau); } /* sections/impact-stats.css */ /* impact-stats: Wirkungsbilanz (Brandmanual v1.0). Karten statt Linien, grosse tabellarische Ziffern, keine Kreise/Ringe/Pillen. Zahlenschrift Familjen Bold, wie bisher belassen [zu bestaetigen]; Umschalten ueber --is-num-font. */ .c-is { --is-num-font: var(--fv-font-sans); } .c-is__head { max-width: 760px; margin-bottom: var(--fv-space-48); } .c-is__intro { margin: var(--fv-space-16) 0 0; max-width: 58ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); } .c-is__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-is__item { position: relative; padding: var(--fv-space-48) var(--fv-space-24) var(--fv-space-24); border-radius: var(--fv-radius-24); background-color: var(--fv-papier); } .c-is.is-papier .c-is__item, .c-is.is-tint .c-is__item { background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-is__item::before { content: ""; position: absolute; left: var(--fv-space-24); top: 0; width: 48px; height: 10px; border-radius: 0 0 4px 4px; background-color: var(--accent); } .c-is__item:not([data-verb])::before { background-color: var(--fv-nachtblau); } .c-is__value { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 1.7em; margin: var(--fv-space-12) 0 var(--fv-space-8); font-family: var(--is-num-font); font-size: var(--fs-numeral); font-weight: var(--fv-fw-bold); line-height: 1; letter-spacing: var(--fv-ls-display); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .c-is__pre, .c-is__suf { font-family: var(--fv-font-sans); font-size: .3em; font-weight: var(--fv-fw-semibold); letter-spacing: 0; color: var(--fv-schiefer); margin: 0 0 .15em; white-space: pre; } .c-is__suf { margin: .1em 0 0; } .c-is__num.is-open { font-family: var(--fv-font-sans); font-size: .42em; letter-spacing: var(--fv-ls-h3); line-height: var(--fv-lh-h3); color: var(--fv-schiefer); background-color: var(--fv-nebel); border-radius: var(--fv-radius-8); padding: var(--fv-space-8) var(--fv-space-12); } .c-is__label { margin: 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-small); color: var(--fv-nachtblau); } .c-is__src { margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); max-width: 30ch; } .c-is__src-k { font-weight: var(--fv-fw-bold); } .c-is__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .c-is__facts { display: flex; flex-wrap: wrap; gap: var(--fv-space-12); margin: var(--fv-space-48) 0 0; } .c-is__fact { display: flex; align-items: baseline; gap: var(--fv-space-12); padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-12); background-color: var(--fv-flieder-hell); } .c-is__fact dt { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-is__fact dd { margin: 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; color: var(--fv-nachtblau); } .c-is__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-is__projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-is__proj { display: flex; } .c-is__card { position: relative; width: 100%; padding: var(--fv-space-48) var(--fv-space-24) var(--fv-space-24); border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-is__bar { position: absolute; left: var(--fv-space-24); top: 0; width: 56px; height: 10px; border-radius: 0 0 4px 4px; background-color: var(--fv-violett); } .c-is__title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-nachtblau); } .c-is__text { margin: 0; font-size: var(--fv-fs-body); color: var(--fv-schiefer); } .c-is__status { display: inline-block; margin: var(--fv-space-16) 0 0; padding: var(--fv-space-4) var(--fv-space-12); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); border-radius: var(--fv-radius-10); background-color: var(--fv-nebel); color: var(--fv-nachtblau); } /* Spendenhinweis: Rosa-Flaeche (Hauptverb unterstuetzen) mit Nachtblau-Text */ .c-is__donate { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--fv-space-48); align-items: start; margin-top: var(--fv-space-48); padding: clamp(28px, 4vw, 48px); border-radius: var(--fv-radius-40); background-color: var(--fv-rosa); color: var(--fv-nachtblau); } .c-is__donate .c-is__title, .c-is__donate .c-is__text, .c-is__dnote { color: var(--fv-nachtblau); } .c-is__dnote { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-small); } .c-is__bank { display: grid; gap: var(--fv-space-12); margin: 0; } .c-is__bank div { padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-12); background-color: var(--fv-weiss); } .c-is__bank dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-is__bank dd { margin: var(--fv-space-4) 0 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); overflow-wrap: anywhere; } @media (max-width: 767px) { .c-is__donate { grid-template-columns: 1fr; gap: var(--fv-space-16); } } /* sections/job-board.css */ /* job-board + job-detail: oeffentliche Jobboerse. Hell, Akzent nur ueber Tokens. Filter ohne JS per Radio + :has(). */ .c-jb { background: var(--fv-papier); } .c-jb__head { display: grid; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); } @media (min-width: 900px) { .c-jb__head { grid-template-columns: 1.1fr 1fr; align-items: end; } } .c-jb__intro { margin: 0; max-width: 56ch; font-size: var(--fs-md); color: var(--text-muted); } /* Leiste */ .c-jb__bar { display: grid; gap: var(--space-2); padding: var(--space-2) 0 var(--space-3); border-bottom: 2px solid var(--fv-nebel); } .c-jb__group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .c-jb__group input { position: absolute; opacity: 0; width: 1px; height: 1px; } .c-jb__group label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--fv-radius-10); background: var(--fv-weiss); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .c-jb__group label:hover { } .c-jb__group input:checked + label { background: var(--fv-verb-text, var(--fv-nachtblau)); color: var(--fv-weiss); } .c-jb__group input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; } .c-jb__group--view label { border-radius: 10px; } .c-jb__group--view input:checked + label { background: var(--text); } .c-jb__tools { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .c-jb__tools[hidden] { display: none; } @media (min-width: 900px) { .c-jb__tools { grid-template-columns: 1.6fr 1fr 1fr 1fr auto; } } .c-jb__tool { display: grid; gap: 4px; min-width: 0; } .c-jb__tool--search { grid-column: 1 / -1; } @media (min-width: 900px) { .c-jb__tool--search { grid-column: auto; } } .c-jb__tool label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-muted); } .c-jb__tool input, .c-jb__tool select { width: 100%; font: inherit; font-size: var(--fs-input); padding: 11px 12px; border-radius: var(--fv-radius-12); background: var(--fv-weiss); color: var(--text); } .c-jb__tool input:focus-visible, .c-jb__tool select:focus-visible, .c-jb__reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .c-jb__reset { font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 11px 14px; border-radius: var(--fv-radius-12); border: 0; background: transparent; color: var(--fv-verb-text, var(--fv-nachtblau)); text-decoration: underline; cursor: pointer; justify-self: start; } .c-jb__live { margin: var(--space-2) 0 0; min-height: 1.4em; font-size: var(--fs-sm); color: var(--text-muted); } /* Liste und Sichtbarkeit */ .c-jb__list, .c-jb__provlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .c-jb__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-2); } @media (max-width: 767px) { .c-jb__list, .c-jb__provlist { grid-template-columns: minmax(0, 1fr) !important; } } .c-jb__item { display: none; } .c-jb__item[data-status="veroeffentlicht"] { display: block; } .c-jb:has(#jb-v-archiv:checked) .c-jb__item[data-status="veroeffentlicht"] { display: none; } .c-jb:has(#jb-v-archiv:checked) .c-jb__item[data-status="archiviert"] { display: block; } .c-jb:has(#jb-t-praktikum:checked) .c-jb__item:not([data-type="praktikum"]), .c-jb:has(#jb-t-abschlussarbeit:checked) .c-jb__item:not([data-type="abschlussarbeit"]), .c-jb:has(#jb-t-werkstudium:checked) .c-jb__item:not([data-type="werkstudium"]), .c-jb:has(#jb-t-einstieg:checked) .c-jb__item:not([data-type="einstieg"]) { display: none !important; } .c-jb__item[hidden], .c-jb__prov[hidden] { display: none !important; } .c-jb__prov { display: none; } .c-jb__prov[data-status="freigegeben"] { display: grid; } /* Karte */ .c-jb__card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; } .c-jb__card:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-card); } .c-jb__card:focus-within { } .c-jb__type { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--fv-verb-text, var(--fv-nachtblau)); } .c-jb__type::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--fv-verb, var(--fv-violett)); } .c-jb__type[data-type="praktikum"]::before { background: var(--fv-purpur); } .c-jb__type[data-type="abschlussarbeit"]::before { background: var(--fv-violett); } .c-jb__type[data-type="werkstudium"]::before { background: var(--fv-rosa); } .c-jb__type[data-type="einstieg"]::before { background: var(--fv-pflaume); } .c-jb__kind { padding: 2px 8px; border-radius: var(--fv-radius-10); background: var(--fv-papier); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; color: var(--text-muted); } .c-jb__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } .c-jb__title a { color: var(--text); text-decoration: none; } .c-jb__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--fv-radius-24); } .c-jb__title a:focus-visible { outline: none; } .c-jb__card:has(.c-jb__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .c-jb__company { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-sm); } .c-jb__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--fs-sm); color: var(--text-muted); } .c-jb__meta span + span::before { content: "·"; margin-right: 14px; } .c-jb__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; } .c-jb__tags li { padding: 4px 10px; border-radius: 8px; background: var(--fv-flieder-hell); font-size: var(--fs-sm); color: var(--text); } .c-jb__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: auto 0 0; padding-top: 14px; border-top: 2px solid var(--fv-nebel); } .c-jb__left { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); } .c-jb__left[data-tone="soon"] { color: var(--fv-purpur); } .c-jb__left[data-tone="ended"] { color: var(--text-muted); } .c-jb__left--big { font-size: var(--fs-ui); } .c-jb__check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); } .c-jb__check::before { content: ""; width: 14px; height: 14px; border-radius: var(--fv-radius-3); background: var(--fv-verb-text, var(--fv-nachtblau)); box-shadow: inset 0 0 0 3px var(--fv-weiss), 0 0 0 2px var(--fv-verb-text, var(--fv-nachtblau)); } .c-jb__empty { margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--fv-radius-24); background: var(--fv-weiss); } .c-jb__trust { display: flex; align-items: center; gap: 10px; margin: var(--space-3) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); } .c-jb__trust span { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--fv-purpur); } .c-jb__note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } /* Anbieter */ .c-jb__provwrap { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 2px solid var(--fv-nebel); scroll-margin-top: calc(var(--header-h) + 16px); } .c-jb__provhead { margin: 0 0 var(--space-3); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); } .c-jb__provlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-jb__prov { gap: 16px; grid-template-columns: auto 1fr; align-items: start; padding: 22px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); scroll-margin-top: calc(var(--header-h) + 16px); } .c-jb__prov:target { } .c-jb__glyph, .c-jd__prof::before { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px 16px 16px 6px; background: var(--fv-flieder-hell); color: var(--fv-purpur); font-weight: var(--fw-bold); font-size: var(--fs-base); } .c-jb__provkind { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--text-muted); } .c-jb__provname { margin: 2px 0 0; font-size: var(--fs-base); line-height: var(--lh-snug); } .c-jb__provmeta { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); } .c-jb__provtext { margin: 8px 0 0; font-size: var(--fs-sm); } .c-jb__provlinks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: var(--fs-sm); } .c-jb a { color: var(--fv-verb-text, var(--fv-nachtblau)); text-decoration-thickness: 1px; text-underline-offset: 3px; } .c-jb a:focus-visible, .c-jd a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .c-jb__title a { color: var(--text); text-decoration: none; } [data-jb-count]:not(:empty)::before { content: "· "; } /* Detail: Seitenblatt ueber :target */ .c-jd__panel { display: none; position: fixed; inset: 0; z-index: 90; } .c-jd__panel:target, .c-jd__panel.is-open { display: block; } html:has(.c-jd__panel:target) { overflow: hidden; } .c-jd__scrim { position: absolute; inset: 0; background: rgba(23, 29, 58, .5); backdrop-filter: blur(3px); } .c-jd__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(680px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 4vw, 48px); background: var(--fv-weiss); box-shadow: -24px 0 60px -30px rgba(23, 29, 58, .5); display: grid; gap: 14px; align-content: start; animation: jd-in .3s var(--ease); } @keyframes jd-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .c-jd__sheet { animation: none; } } .c-jd__panel:focus { outline: none; } /* Mobil-QA 19.10.2026: Panel kann per URL-Anker (:target) echten Tastatur-Fokus bekommen - sichtbarer Ersatzring statt nur outline:none (WCAG 2.4.7). */ .c-jd__panel:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-jd__close { justify-self: end; padding: 10px 16px; border-radius: 10px; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text); text-decoration: none; background: var(--fv-weiss); } .c-jd__close:hover { color: var(--fv-verb-text, var(--fv-nachtblau)); } .c-jd__sheet .c-jb__type { margin-top: -8px; } .c-jd__title { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } .c-jd__company { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); } .c-jd__runtime { margin: 0; } .c-jd__runtime .c-jb__left { display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--fv-flieder-hell); } .c-jd__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0; padding: 16px 0; border-block: 2px solid var(--fv-nebel); } .c-jd__facts dt { font-size: var(--fs-sm); color: var(--text-muted); } .c-jd__facts dd { margin: 2px 0 0; font-weight: var(--fw-bold); } .c-jd__h { margin: 8px 0 0; font-size: var(--fs-h4); } .c-jd__text > :first-child { margin-top: 0; } .c-jd__text > :last-child { margin-bottom: 0; } .c-jd__apply { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0 0; } .c-jd__contact { font-size: var(--fs-sm); color: var(--text-muted); } .c-jd__prof { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; padding: 18px; border-radius: var(--fv-radius-24); background: var(--fv-papier); } .c-jd__prof::before { content: ""; grid-row: 1 / span 3; background: var(--fv-flieder-hell) radial-gradient(circle at 35% 35%, var(--fv-purpur) 0 9px, transparent 10px); } .c-jd__prof > * { grid-column: 2; margin: 0; } .c-jd__profname { font-weight: var(--fw-bold); font-size: var(--fs-base); } .c-jd__prof .c-jb__provmeta, .c-jd__prof .c-jb__provtext { margin: 0; } .c-jd__trust { margin-top: 4px; } @media (max-width: 767px) { .c-jd__sheet { padding: 20px 16px 32px; } .c-jb__card { padding: 20px; } } /* Jelena Welle 2: Pillen, Kreise, Konturen, Glas raus. Filter als Tag-Stil Radius 10, Karten mit Kartenschatten. */ .c-jb { background: var(--fv-papier); } .c-jb__bar { border-bottom: 0; } .c-jb__group label { border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); border-radius: var(--fv-radius-10); } .c-jb__group label:hover { background: var(--fv-flieder-hell); } .c-jb__group input:checked + label, .c-jb__group--view input:checked + label { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-jb__tool input, .c-jb__tool select { border: 0; background: var(--fv-nebel); border-radius: var(--fv-radius-12); } .c-jb__card { border: 0; box-shadow: var(--fv-shadow-card); border-radius: var(--fv-radius-24); } .c-jb__card:hover { transform: none; } .c-jb__card:hover .c-jb__title a { text-decoration: underline 2px var(--fv-rosa); text-underline-offset: 0.2em; } .c-jb__title { font-weight: var(--fv-fw-bold); } .c-jb__type::before { border-radius: 3px; } .c-jb__kind { border: 0; border-radius: var(--fv-radius-10); background: var(--fv-nebel); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-jb__tags li { background: var(--fv-flieder-hell); border-radius: var(--fv-radius-10); } .c-jb__check::before { border-radius: 3px; box-shadow: none; width: 10px; height: 10px; } .c-jb__empty { border: 0; background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-jb__trust span { border-radius: 3px; background: var(--fv-purpur); } .c-jb__prov { border: 0; box-shadow: var(--fv-shadow-card); border-radius: var(--fv-radius-24); } .c-jb__prov:target { background: var(--fv-flieder-hell); } .c-jb__glyph, .c-jd__prof::before { border-radius: var(--fv-radius-icon-tile); background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-jd__prof::before { background: var(--fv-nachtblau); } .c-jd__scrim { background: rgba(23, 29, 58, .6); backdrop-filter: none; } .c-jd__sheet { box-shadow: var(--fv-shadow-card); } .c-jd__close { border: 0; background: var(--fv-nebel); border-radius: var(--fv-radius-12); } .c-jd__close:hover { background: var(--fv-flieder-hell); } .c-jd__runtime .c-jb__left { background: var(--fv-flieder-hell); border-radius: var(--fv-radius-10); } .c-jd__prof { border: 0; background: var(--fv-papier); border-radius: var(--fv-radius-24); } .c-jd__title { font-weight: var(--fv-fw-bold); } /* ================================================================ Stellenbörse nach Aussteller-Regel (job-board, regel_teilnahme) konzept/stellenanzeigen.md. Papierfläche, weiße Karten, Tags Radius 10 (keine Pillen), Verb verbinden. */ .c-jbk { background: var(--fv-papier); color: var(--fv-nachtblau); } .c-jbk__head { display: grid; gap: var(--fv-space-16) var(--fv-space-48); margin-bottom: var(--fv-space-24); } @media (min-width: 900px) { .c-jbk__head { grid-template-columns: 1fr 1fr; align-items: end; } } .c-jbk__title { margin: 0; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); font-weight: var(--fv-fw-bold); } .c-jbk__intro { margin: 0; max-width: var(--fv-measure); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); } .c-jbk__runtime { display: flex; gap: var(--fv-space-16); align-items: flex-start; padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); margin-bottom: var(--fv-space-32); } .c-jbk__runtime-copy { display: grid; gap: var(--fv-space-8); } .c-jbk__runtime-text { margin: 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); font-weight: var(--fv-fw-medium); max-width: 70ch; } .c-jbk__filters { display: grid; gap: var(--fv-space-16); margin-bottom: var(--fv-space-16); } .c-jbk__filters[hidden] { display: none; } @media (min-width: 900px) { .c-jbk__filters { grid-template-columns: auto 1fr; column-gap: var(--fv-space-48); } } .c-jbk__group { margin: 0; padding: 0; border: 0; min-width: 0; } .c-jbk__legend { padding: 0; margin-bottom: var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-jbk__tags { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); } .c-jbk__tags input { position: absolute; opacity: 0; width: 1px; height: 1px; } .c-jbk__tag { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-weiss); color: var(--fv-nachtblau); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-jbk__tag:hover { background: var(--fv-nebel); } .c-jbk__tags input:checked + .c-jbk__tag { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-jbk__tags input:focus-visible + .c-jbk__tag { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-jbk__live { margin: 0 0 var(--fv-space-16); min-height: 1.4em; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-jbk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-24); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } .c-jbk__item[hidden] { display: none; } /* ohne JS: nur aktive Anzeigen (Entwurf/deaktiviert/abgelaufen nie öffentlich) */ .c-jbk__item:not([data-status="aktiv"]) { display: none; } .c-jbk__card { display: flex; flex-direction: column; gap: var(--fv-space-16); height: 100%; } .c-jbk__org { display: flex; align-items: center; gap: var(--fv-space-12); min-height: 56px; } .c-jbk__logo { flex: none; display: grid; place-items: center; inline-size: 120px; block-size: 64px; padding: 6px 10px; border-radius: var(--fv-radius-12); background: var(--fv-weiss); box-shadow: inset 0 0 0 1px var(--fv-nebel); } /* min-inline-size/min-block-size: 0, KORREKTUR 26.10.2026 (Generalprobe Karte 113, Gelb-Befund "extreme Logos", Auftrag Jelena "feste Box, contain"): Die max-*-size-Grenzen allein haben NICHT gereicht. Logo-Kaesten sind Grid-Container, und bei einem Grid-Element gilt min-block-size/min-inline-size: auto - die automatische Mindestgroesse schlaegt die Maximalgroesse. Ein Logo von 200 x 4000 Pixeln stand deshalb mit 100 x 2000 Pixeln in einem 120 x 64 grossen Kasten und hat die Karte aufgerissen (gemessen auf /karrieretag/stellen/). Mit min-*: 0 greift contain wie gedacht; aus dem 200x4000-Logo wird dann ein 3 x 52 Pixel schmaler Streifen - richtig dargestellt, und beim Hochladen weist Uploads::MAX_KANTE_PX solche Bilder inzwischen ohnehin ab. */ .c-jbk__logo img { max-inline-size: 100%; max-block-size: 100%; min-inline-size: 0; min-block-size: 0; object-fit: contain; } .c-jbk__logo--leer { inline-size: 56px; background: var(--fv-papier); box-shadow: none; color: var(--fv-schiefer); } .c-jbk__logo--leer .fv-icon { inline-size: 24px; block-size: 24px; } .c-jbk__orgname { margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-small); } .c-jbk__titel { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); font-weight: var(--fv-fw-bold); } .c-jbk__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-8); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-jbk__facts li { display: flex; gap: var(--fv-space-8); align-items: flex-start; } .c-jbk__facts li[hidden] { display: none; } .c-jbk__facts .fv-icon { color: var(--fv-purpur); margin-top: 1px; } .c-jbk__until { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-jbk__more { margin-top: auto; border-top: 1px solid var(--fv-nebel); padding-top: var(--fv-space-12); } .c-jbk__more summary { cursor: pointer; font-weight: var(--fv-fw-bold); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.2em; list-style-position: inside; } .c-jbk__more summary:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; border-radius: 2px; } .c-jbk__text, .c-jbk__kontakt { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-jbk__text p { margin: var(--fv-space-12) 0 0; } .c-jbk__empty { display: grid; justify-items: start; gap: var(--fv-space-12); padding: var(--fv-space-32); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-jbk__empty[hidden] { display: none; } .c-jbk__empty-title { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); } .c-jbk__empty-text { margin: 0; max-width: 60ch; color: var(--fv-schiefer); } .c-jbk__empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-24); margin: var(--fv-space-8) 0 0; } .c-jbk__reset { font: inherit; font-weight: var(--fv-fw-bold); padding: 0; border: 0; background: none; color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); cursor: pointer; } .c-jbk__reset[hidden] { display: none; } .c-jbk__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); max-width: 80ch; } .c-jbk__demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8) var(--fv-space-16); margin-top: var(--fv-space-16); padding: var(--fv-space-16); border-radius: var(--fv-radius-16); background: var(--fv-nebel); font-size: var(--fv-fs-small); } .c-jbk__demo[hidden] { display: none; } .c-jbk__demo label { font-weight: var(--fv-fw-bold); } .c-jbk__demo input { font: inherit; padding: 6px 10px; border: 0; border-radius: var(--fv-radius-10); background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-jbk__demo span { color: var(--fv-schiefer); flex-basis: 100%; } /* ================================================================ Portal: Laufzeit-Banner (data-jrt) und Slots (data-jslots) */ .c-jrt { display: flex; flex-wrap: wrap; gap: var(--fv-space-16) var(--fv-space-24); align-items: center; padding: var(--fv-space-24); margin: var(--fv-space-16) 0 var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .c-jrt__copy { flex: 1 1 320px; display: grid; gap: var(--fv-space-4); } .c-jrt__title { margin: 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); font-weight: var(--fv-fw-bold); } .c-jrt__text { margin: 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); max-width: 70ch; } .c-jrt[data-tone="soon"] { background: var(--fv-rosa-hell); } .c-jrt[data-tone="ended"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-jrt[data-tone="ended"] .c-jrt__text { color: var(--fv-weiss); } .c-jrt[data-tone="ended"] .fv-btn { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-jrt__demo { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--fv-space-8); align-items: center; font-size: var(--fv-fs-small); } .c-jrt__demo input { font: inherit; padding: 4px 8px; border: 0; border-radius: var(--fv-radius-10); background: var(--fv-nebel); color: var(--fv-nachtblau); } .c-jslots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-12) var(--fv-space-24); margin: 0 0 var(--fv-space-16); } .c-jslots__blocks { display: flex; gap: 6px; } .c-jslots__blocks i { inline-size: 28px; block-size: 18px; border-radius: 6px; background: var(--fv-weiss); box-shadow: inset 0 0 0 2px var(--fv-flieder-hell); } .c-jslots__blocks i.is-on { background: var(--fv-purpur); box-shadow: none; } .c-jslots__text { margin: 0; font-weight: var(--fv-fw-bold); } .c-jslots__full { flex-basis: 100%; margin: 0; padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-12); background: var(--fv-rosa-hell); font-size: var(--fv-fs-small); } .c-jslots__full[hidden] { display: none; } .c-pj__btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } [data-status="aktiv"] { --st: var(--fv-purpur); --st-bg: var(--fv-flieder-hell); --st-ink: var(--fv-nachtblau); } [data-status="deaktiviert"] { --st: var(--fv-schiefer); --st-bg: var(--fv-nebel); --st-ink: var(--fv-nachtblau); } .c-portal-status[data-status="abgelaufen"] { --st: var(--fv-schiefer); --st-bg: var(--fv-nebel); --st-ink: var(--fv-schiefer); } .c-portal-status[data-status="abgelaufen"]::before { opacity: .55; } .c-pj__row[data-status="entwurf"] [data-when~="entwurf"], .c-pj__row[data-status="pruefung"] [data-when~="pruefung"], .c-pj__row[data-status="aktiv"] [data-when~="aktiv"], .c-pj__row[data-status="deaktiviert"] [data-when~="deaktiviert"] { display: inline-flex; } .c-pj__hint { align-self: center; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pj__hint[hidden] { display: none; } .c-pj__row[data-status="abgelaufen"] .c-pj__title a { color: var(--fv-schiefer); } .c-pd__card--jobs .c-jrt { margin: var(--fv-space-8) 0 var(--fv-space-12); box-shadow: none; background: var(--fv-papier); } .c-pd__card--jobs .c-jrt[data-tone="soon"] { background: var(--fv-rosa-hell); } .c-pd__card--jobs .c-jrt[data-tone="ended"] { background: var(--fv-nachtblau); } .c-pd__slots { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-small); } @media (max-width: 599px) { .c-jbk__runtime { padding: var(--fv-space-16); } .c-jbk__runtime .fv-icon-tile { --tile: 40px; } .c-jbk__runtime-text { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .c-jbk__tags { gap: 6px; } } /* sections/kt-archiv.css */ /* kt-archiv: Jahrgaenge als Karten. Jahreszahl gross, Verb-Kachel statt Kante, Platzhalter ruhig auf Papier. */ .c-ktarc__head { display: grid; gap: var(--fv-space-24) var(--fv-space-64); margin-bottom: var(--fv-space-48); } @media (min-width: 900px) { .c-ktarc__head { grid-template-columns: 1.15fr 1fr; align-items: end; } } .c-ktarc__intro { margin: 0; max-width: 52ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); } .c-ktarc__list { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .c-ktarc__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--fv-space-8) var(--fv-space-32); height: 100%; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); text-decoration: none; overflow: hidden; } .c-ktarc__card::after { content: ""; position: absolute; right: clamp(24px, 2.6vw, 36px); top: clamp(24px, 2.6vw, 36px); width: 14px; height: 14px; border-radius: 4px; background: var(--fv-verb, var(--fv-violett)); transition: transform var(--fv-duration) var(--fv-easing); } .c-ktarc__card:hover::after { transform: scale(1.3); } .c-ktarc__card:hover .c-ktarc__name { text-decoration: underline 2px var(--fv-rosa); text-underline-offset: 0.2em; } .c-ktarc__card:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 4px; } .c-ktarc__year { grid-row: span 2; align-self: start; font-size: var(--fv-fs-zahl); font-weight: var(--fv-fw-bold); line-height: .9; letter-spacing: var(--fv-ls-h1); font-variant-numeric: tabular-nums; writing-mode: vertical-rl; transform: rotate(180deg); } .c-ktarc__body { display: grid; align-content: start; gap: 8px; padding-right: 40px; } .c-ktarc__meta { order: -1; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-ktarc__name { font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-card); letter-spacing: var(--fv-ls-h3); } .c-ktarc__teaser { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); } /* ui-senior: Eckdaten als ruhige Meta-Zeile statt Chips (weniger Badges) */ .c-ktarc__chips { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-16); margin-top: var(--fv-space-8); } .c-ktarc__chip { padding: 0; border-radius: 0; background: none; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-ktarc__chip b { font-weight: var(--fv-fw-regular); margin-right: 4px; } .c-ktarc__chip b::after { content: ":"; } .c-ktarc__go { display: inline-flex; align-items: center; gap: 8px; align-self: end; margin-top: var(--fv-space-16); font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); text-decoration: underline 2px var(--fv-rosa); text-underline-offset: 0.2em; } .c-ktarc__go svg { transition: transform var(--fv-duration) var(--fv-easing); } .c-ktarc__card:hover .c-ktarc__go svg { transform: translateX(4px); } .c-ktarc__item.is-placeholder .c-ktarc__card { background: var(--fv-papier); box-shadow: none; } .c-ktarc__item.is-placeholder .c-ktarc__card::after { background: var(--fv-nebel); } .c-ktarc__item.is-placeholder .c-ktarc__year { color: var(--fv-nebel); } .c-ktarc__item.is-placeholder .c-ktarc__chip { background: none; } .c-ktarc.is-papier .c-ktarc__item.is-placeholder .c-ktarc__card, .c-ktarc.is-tint .c-ktarc__item.is-placeholder .c-ktarc__card { background: var(--fv-weiss); } .c-ktarc__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-ktarc__actions { margin: var(--fv-space-32) 0 0; } @media (max-width: 860px) { .c-ktarc__list { grid-template-columns: 1fr; } } @media (max-width: 520px) { .c-ktarc__card { grid-template-columns: 1fr; } .c-ktarc__year { writing-mode: horizontal-tb; transform: none; grid-row: auto; } } /* sections/kt-jahrgang.css */ /* kt-jahrgang: Eckdaten eines Jahrgangs. Jahreszahl als Nachtblau-Baustein links, Fakten rechts, Highlights als nummerierte Karten. */ .c-ktjg__inner { display: grid; gap: var(--fv-space-48) var(--fv-space-64); } @media (min-width: 960px) { .c-ktjg__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .c-ktjg__hl, .c-ktjg__source, .c-ktjg__handoff { grid-column: 1 / -1; } } .c-ktjg__badge { position: relative; align-self: start; display: grid; align-content: end; aspect-ratio: 5 / 4; padding: clamp(24px, 3vw, 40px); border-radius: var(--fv-radius-40); background: var(--fv-nachtblau); background-image: var(--fv-gradient-glow); color: var(--fv-weiss); overflow: hidden; } .c-ktjg__year { position: relative; z-index: 1; font-size: var(--fv-fs-display); font-weight: var(--fv-fw-bold); line-height: .9; letter-spacing: var(--fv-ls-display); font-variant-numeric: tabular-nums; } .c-ktjg__blocks i { position: absolute; border-radius: var(--fv-radius-8); } /* Radius 10 bis 20 % der kurzen Seite */ .c-ktjg__blocks i:nth-child(1) { top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); width: 56px; height: 56px; border-radius: var(--fv-radius-10); background: var(--fv-purpur); } .c-ktjg__blocks i:nth-child(2) { top: clamp(24px, 3vw, 40px); right: calc(clamp(24px, 3vw, 40px) + 76px); width: 56px; height: 24px; border-radius: var(--fv-radius-4); background: var(--fv-violett); } .c-ktjg__blocks i:nth-child(3) { top: calc(clamp(24px, 3vw, 40px) + 68px); right: clamp(24px, 3vw, 40px); width: 56px; height: 40px; background: var(--fv-rosa); } .is-placeholder .c-ktjg__badge { background: var(--fv-nebel); background-image: none; color: var(--fv-schiefer); } .is-placeholder .c-ktjg__blocks i { background: var(--fv-weiss) !important; } .c-ktjg__title { margin: 0 0 var(--fv-space-24); } .c-ktjg__flag { display: inline-block; margin: 0 0 var(--fv-space-24); padding: 6px 12px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-ktjg__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fv-fuge); margin: 0; } .c-ktjg__fact { padding: 20px 22px; border-radius: var(--fv-radius-16); background: var(--fv-papier); } .c-ktjg__fact dt { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-ktjg__fact dd { margin: 6px 0 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } .c-ktjg__note { display: block; margin-top: 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); letter-spacing: 0; color: var(--fv-schiefer); } .c-ktjg__hl { margin-top: var(--fv-space-24); } .c-ktjg__hltitle { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); } .c-ktjg__hllist { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-ktjg__hlitem { position: relative; padding: 28px 28px 30px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-ktjg__hlnum { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: var(--fv-radius-icon-tile); background: var(--fv-flieder-hell); color: var(--fv-violett); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); } .c-ktjg__hlname { margin: 0 0 6px; font-size: var(--fv-fs-lead); line-height: 1.25; font-weight: var(--fv-fw-bold); } .c-ktjg__hltext { margin: 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); } .c-ktjg__small { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-ktjg__source { font-size: var(--fv-fs-small); color: var(--fv-schiefer); padding-top: var(--fv-space-16); } .c-ktjg__source summary { cursor: pointer; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-ktjg__source p { margin: 8px 0 0; } .c-ktjg__handoff { margin: 0; padding: 14px 18px; border-radius: var(--fv-radius-16); background: var(--fv-papier); } /* Noch nicht belegter Jahrgang (Abschluss-QA Runde 9): freundlicher Hinweis statt leerer Platzhalter, Link zum belegten Jahrgang */ .c-ktjg__notice { display: grid; gap: var(--fv-space-24); align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: var(--fv-radius-24); background: var(--fv-papier); } @media (min-width: 640px) { .c-ktjg__notice:has(.c-ktjg__nfig) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } } .c-ktjg__ntitle { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-nachtblau); } .c-ktjg__ntext { margin: 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); max-width: 52ch; } .c-ktjg__nactions { margin: var(--fv-space-16) 0 0; } .c-ktjg__nfig { margin: 0; } .c-ktjg__nfig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fv-radius-16); } .c-ktjg__nfig .c-credit { margin-top: var(--fv-space-8); font-size: 12px; color: var(--fv-schiefer); } /* sections/kt-programm.css */ /* kt-programm: Zeitplan als Timeline aus Karten. Links ruhiger Kopf (klebt), rechts Karten mit Uhrzeit-Baustein in Verbfarbe (Fallback Flieder). */ .c-ktprog__inner { display: grid; gap: var(--fv-space-48) var(--fv-space-64); } @media (min-width: 1000px) { .c-ktprog__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .c-ktprog__head { position: sticky; top: calc(var(--header-h) + 100px); } } .c-ktprog__title { margin: 0 0 var(--fv-space-16); } .c-ktprog__intro { margin: 0; max-width: 46ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); } .c-ktprog__date { display: block; margin: var(--fv-space-24) 0 0; padding: 0; color: var(--fv-schiefer); font-weight: var(--fv-fw-regular); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-ktprog__date span { display: none; width: 10px; height: 10px; border-radius: 3px; background: var(--fv-rosa); flex: none; } .c-ktprog__actions { margin: var(--fv-space-32) 0 0; } .c-ktprog__list { position: relative; display: grid; gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-ktprog__item { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); overflow: hidden; } .c-ktprog__time { margin: 0; padding: 24px 16px 24px 24px; hyphens: manual; -webkit-hyphens: manual; background: var(--fv-flieder-hell); color: var(--fv-nachtblau); font-weight: var(--fv-fw-semibold); font-size: var(--fv-fs-body); line-height: 1.25; font-variant-numeric: tabular-nums; position: relative; } .c-ktprog__time::after { display: none; content: ""; position: absolute; left: 16px; bottom: 20px; width: 10px; height: 10px; border-radius: 3px; background: var(--fv-verb, var(--fv-violett)); } .c-ktprog__body { padding: 24px 32px; } /* ui-senior: Programm-Art als ruhige Meta-Zeile statt Badge (weniger Tags, eine fette Ebene weniger) */ .c-ktprog__kind { display: block; margin: 0 0 var(--fv-space-4); padding: 0; background: none; color: var(--fv-schiefer); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); } .c-ktprog__ititle { margin: 0; font-size: var(--fv-fs-card); line-height: var(--fv-lh-card); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-semibold); } .c-ktprog__text { margin: 8px 0 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); } .c-ktprog__place { margin: var(--fv-space-8) 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-ktprog__place::before { content: ""; display: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--fv-violett); vertical-align: 0; } .c-ktprog__item.is-placeholder { background: var(--fv-papier); box-shadow: none; } .c-ktprog__item.is-placeholder .c-ktprog__time { background: var(--fv-nebel); color: var(--fv-schiefer); } .c-ktprog__item.is-placeholder .c-ktprog__time::after { background: var(--fv-schiefer); } .c-ktprog__note { grid-column: 1 / -1; margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } @media (max-width: 599px) { .c-ktprog__item { grid-template-columns: 1fr; } .c-ktprog__time { padding: 16px 20px 0; background: none; } .c-ktprog__time::after { left: auto; right: 20px; bottom: 50%; transform: translateY(50%); } .c-ktprog__body { padding: var(--fv-space-4) 20px 20px; } .c-ktprog__item.is-placeholder .c-ktprog__time { background: none; } } /* sections/kt-subnav.css */ /* kt-subnav: Reiterleiste Karrieretag. Tabs ohne Pillen: Text Bold, aktiver Reiter mit Rosa-Unterstrich. Klebt unter dem Header. */ .c-ktnav { position: sticky; top: var(--hdr-vis, var(--header-h)); z-index: 30; background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } /* --hdr-vis setzt js/main.js (sichtbare Headerhöhe oder 0, wenn der Header ausgeblendet ist); vorher in components.css */ @media (prefers-reduced-motion: no-preference) { .c-ktnav { transition: top var(--fv-duration) var(--fv-easing); } } .c-ktnav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--fv-space-24); min-height: 64px; } .c-ktnav__list { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--fv-space-32); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .c-ktnav__list::-webkit-scrollbar { display: none; } .c-ktnav__item { flex: none; } .c-ktnav__link { display: inline-flex; align-items: center; padding: 22px 0 18px; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); line-height: 1.2; color: var(--fv-nachtblau); text-decoration: underline 4px transparent; text-underline-offset: 14px; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-ktnav__mark { display: none; } .c-ktnav__link:hover { text-decoration-color: var(--fv-nebel); } .c-ktnav__link.is-current { text-decoration-color: var(--fv-rosa); } .c-ktnav__link:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; border-radius: 2px; } .c-ktnav__aside { flex: none; display: inline-flex; align-items: center; gap: var(--fv-space-8); padding: 8px 14px; border-radius: var(--fv-radius-10); background: var(--fv-papier); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); text-decoration: none; } .c-ktnav__aside:hover { background: var(--fv-nebel); } @media (max-width: 767px) { .c-ktnav__inner { min-height: 56px; } .c-ktnav__list { gap: var(--fv-space-24); } .c-ktnav__link { padding: 18px 0 14px; font-size: var(--fv-fs-small); } .c-ktnav__aside { display: none; } } /* sections/kt-vorteile.css */ .c-ktv__head { display: grid; gap: var(--fv-space-16); max-width: 760px; margin-bottom: var(--fv-space-48); } .c-ktv__title { margin: 0; } .c-ktv__intro { margin: 0; color: var(--fv-schiefer); } .c-ktv__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fv-space-32); } .c-ktv__item { display: grid; gap: var(--fv-space-12); align-content: start; } .c-ktv__itemtitle { margin: var(--fv-space-8) 0 0; font-size: 1.25rem; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-ktv__text { margin: 0; color: var(--fv-schiefer); } @media (max-width: 760px) { .c-ktv__list { grid-template-columns: 1fr; } } /* sections/legal-text.css */ /* legal-text: Impressum, Datenschutz. Inhaltsverzeichnis links, Abschnitte rechts, Fliesstext max. 66 Zeichen. */ .c-legal__layout { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: var(--fv-space-64); align-items: start; } .c-legal__toc { position: sticky; top: calc(var(--header-h) + var(--fv-space-24)); padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-papier); } .is-papier .c-legal__toc, .is-tint .c-legal__toc { background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-legal__toc-title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-legal__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--fv-space-8); } .c-legal__toc a { color: var(--fv-nachtblau); text-decoration: underline 2px transparent; text-underline-offset: .2em; font-size: var(--fv-fs-small); line-height: 1.4; display: block; padding: 2px 0; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-legal__toc a:hover { text-decoration-color: var(--fv-rosa); } .c-legal__toc a:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; border-radius: 2px; } .c-legal__notice { display: flex; gap: var(--fv-space-16); align-items: flex-start; background: var(--fv-rosa-hell); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); padding: var(--fv-space-24); margin-bottom: var(--fv-space-48); } .c-legal__notice-mark { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--fv-radius-icon-tile); background: var(--fv-rosa); color: var(--fv-nachtblau); } .c-legal__notice-mark .fv-icon { inline-size: 22px; block-size: 22px; vertical-align: 0; } .c-legal__notice .c-prose { font-size: var(--fv-fs-body); } .c-legal__notice .c-prose p:last-child { margin-bottom: 0; } .c-legal__item { padding-block: var(--fv-space-32); scroll-margin-top: calc(var(--header-h) + var(--fv-space-24)); } .c-legal__item:first-of-type { padding-top: 0; } .c-legal__h { display: flex; align-items: baseline; gap: var(--fv-space-16); margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-nachtblau); } .c-legal__num { flex: none; padding: 2px 8px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-legal__item .c-prose { font-size: var(--fv-fs-body); max-inline-size: var(--fv-measure); line-height: var(--fv-lh-body); } .c-legal__item .c-prose a { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-legal__stand { margin: var(--fv-space-48) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } @media (max-width: 1024px) { .c-legal__layout { grid-template-columns: 1fr; gap: var(--fv-space-32); } .c-legal__toc { position: static; } } /* sections/login-panel.css */ /* Zentraler Login (Topbar-Knopf + Panel, Mobil Block im Menue). Nach Brandmanual: kleiner Knopf, Radius 12, keine Pillen, keine Konturen. Prototyp: nur Vorschau-Links, kein Passwortfeld. Verhalten js/login-panel.js, Markup partials/header.html und partials/nav.html. */ .c-login { position: relative; } .c-login__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 0; border-radius: var(--fv-radius-10); background: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; line-height: 1; font-weight: var(--fv-fw-semibold); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } /* Karte 53: sichtbare Hoehe bewusst klein (Luft zur Leistenkante), Klickflaeche unsichtbar auf min. 40px erweitert statt sichtbar grosser Button */ .c-login__btn::before { content: ""; position: absolute; inset: -11px 0; } .c-login__btn:hover, .c-login__btn[aria-expanded="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-login__btn:focus-visible, .c-login__way:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-login__icon { flex: none; width: 14px; height: 14px; } .c-login__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: var(--fv-radius-20, 20px); background: var(--fv-weiss); color: var(--fv-nachtblau); box-shadow: 0 18px 48px color-mix(in srgb, var(--fv-nachtblau) 22%, transparent); animation: c-login-in var(--fv-duration) var(--fv-easing); } .c-login__panel[hidden] { display: none; } @keyframes c-login-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .c-login__panel { animation: none; } } .c-login__title, .c-nav__login-title { margin: 0 0 8px; padding: 0 4px; font-size: 14px; font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-login__list, .c-nav__login-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .c-login__way { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); color: var(--fv-nachtblau); text-decoration: none; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-login__way:hover { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-login__way-label { font-weight: var(--fv-fw-bold); font-size: 1rem; } .c-login__way-text { font-size: 14px; opacity: .85; } .c-login__note { margin: 12px 4px 0; font-size: 13px; line-height: 1.45; color: var(--fv-schiefer); } /* Mobilmenue: Block unter den Servicelinks; Desktop ausgeblendet (Topbar uebernimmt) */ .c-nav__login { display: none; } @media (max-width: 1200px) { .c-nav__login { display: block; padding: var(--fv-space-24) 0 0; } } /* sections/logo-bereich.css */ /* logo-bereich: Header-Logo je Bereich (Agent logo-bereich, 06.10.2026). Overlay mit CSS-3D auf geschichteten SVG-Scheiben. Ruhezustand: Overlay unsichtbar, das echte Logo (img) steht unverändert. Nur während der Bewegung (< 1,5 s) wird getauscht. Keine Layoutwirkung: Overlay ist absolut, ohne Pointer-Events, Animation nur mit transform. Steuerung per js/logo-bereich.js. */ .c-header__logo { position: relative; } .c-lb3 { position: absolute; z-index: 3; pointer-events: none; visibility: hidden; container-type: size; } .c-lb3.is-on { visibility: visible; } .c-lb3 > svg.c-lb3__word { position: absolute; inset: 0; width: 100%; height: 100%; } .c-lb3__mark { position: absolute; left: calc(24 / 416.02 * 100%); top: calc(24 / 140.8 * 100%); width: calc(99 / 416.02 * 100%); height: calc(93 / 140.8 * 100%); perspective: 120cqw; perspective-origin: 50% 40%; } .c-lb3__rig { --e: 0; position: absolute; inset: 0; transform-style: preserve-3d; } .c-lb3__part { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .c-lb3__slice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--k) * -0.45cqw * var(--e))); } .c-lb3__slice:not([data-k="0"]) { visibility: hidden; } .c-lb3.is-ext .c-lb3__slice:not([data-k="0"]) { visibility: visible; } @media (prefers-reduced-motion: reduce) { .c-lb3 { display: none; } } /* sections/logos.css */ /* logos (Brandmanual v1.0, Welle 2): Logo-Kacheln Radius 16, ohne Kontur, Fuge 16 (mobil 12). Auf Weiss Papier-Kacheln, auf Papier weisse Kacheln. Platzhalter-Glyphe aus zwei Bausteinen (Nebel, Nachtblau), keine Verbfarben-Reihe. */ .c-logos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-logos__item { display: grid; place-items: center; min-height: 112px; padding: var(--fv-space-24); border-radius: var(--fv-radius-16); background-color: var(--fv-papier); } :is(.is-tint, .is-papier, .fv-section--papier) .c-logos__item { background-color: var(--fv-weiss); } /* Mobil-QA 22.10.2026 (eigener Fund beim Nachmessen aller Seiten zu Punkt 2b des Auftrags, die Seite stand nicht in der 20er-Liste des Gesamttests vom 21.10.2026): /verein/mitglieder/ war bei 320px 332px breit, also 12px waagerechtes Scrollen. Das feste "max-width: 150px" war bei 320px breiter als die Kachel selbst - zwei Spalten mit 12px Fuge und je 16px Innenabstand lassen dort nur rund 106px Platz. Weil .c-logos__item ein Grid mit place-items:center ist, wird aus den 150px die min-content-Breite der Kachel, und das Logo lief rechts heraus. min(150px, 100%) deckelt die Logobreite auf den Inhaltsbereich der Kachel. GEMESSEN auf /verein/mitglieder/ (vorher/nachher, groesstes Logo): 320px Kachel 134px 150px -> 102px vorher ragten 4 von 4 Logos aus ihrer Kachel 390px Kachel 169px 150px -> 137px vorher 0 ausserhalb der Kachel, aber im Innenabstand 768px Kachel 161px 150px -> 113px vorher ragten 4 von 4 Logos aus ihrer Kachel 1024px Kachel 218px 150px -> 150px unveraendert 1440px Kachel 227px 150px -> 150px unveraendert Die Aenderung wirkt also NICHT nur unter 767px, sondern auch bei 390 und 768px - dort werden die Logos sichtbar kleiner. ENTSCHEIDUNG JELENA, 22.10.2026: Die Regel gilt bewusst fuer ALLE Breiten und wandert NICHT in den Block "@media (max-width: 767px)" - "Logos gehoeren in ihre Kachel, auch bei 768 px". Belege: 02_Second-Brain/qa/gesamttest-1022/screens/logokacheln_{320,768}px_{vorher,nachher}.png */ .c-logos__item img { max-height: 56px; max-width: min(150px, 100%); width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; } .c-logos__ph { display: inline-flex; align-items: center; gap: var(--fv-space-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1.3; color: var(--fv-nachtblau); text-align: left; } .c-logos__glyph { position: relative; flex: none; inline-size: 32px; block-size: 24px; } .c-logos__glyph::before, .c-logos__glyph::after { content: ""; position: absolute; } .c-logos__glyph::before { left: 0; top: 0; inline-size: 20px; block-size: 24px; border-radius: 4px; background-color: var(--fv-nebel); } .c-logos__glyph::after { right: 0; bottom: 0; inline-size: 8px; block-size: 8px; border-radius: 2px; background-color: var(--fv-nachtblau); } .c-logos__note { margin-top: var(--fv-space-24); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); text-align: center; } .c-logos__actions { justify-content: center; } @media (max-width: 767px) { .c-logos__grid { gap: var(--fv-space-12); grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-logos__item { min-height: 96px; padding: var(--fv-space-16); } } /* Logos (oft JPG mit weissem Grund): Kacheln immer weiss, auf Weiss mit Kartenschatten */ .c-logos .c-logos__item { background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } /* Responsive-QA Runde 8: Logo-Raster ohne verwaiste Reste. Letzte Reihe wird zentriert (Flex), Spaltenzahl je Breite fest. */ @media (min-width: 768px) { .c-logos__grid { display: flex; flex-wrap: wrap; justify-content: center; } .c-logos__grid > .c-logos__item { flex: 0 0 calc((100% - 3 * var(--fv-fuge)) / 4); min-width: 0; } } @media (min-width: 1100px) { .c-logos__grid > .c-logos__item { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } /* Responsive-QA Runde 8: Spaltenzahl passend zur Anzahl, keine verwaiste Reihe */ @media (min-width: 768px) and (max-width: 899px) { .c-logos__grid:has(> :nth-child(5):last-child) > .c-logos__item { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 900px) and (max-width: 1099px) { .c-logos__grid:has(> :nth-child(5):last-child) > .c-logos__item { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } @media (min-width: 1100px) { .c-logos__grid:has(> :nth-child(5):last-child) > .c-logos__item { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } @media (min-width: 1100px) { .c-logos__grid:has(> :nth-child(12):last-child) > .c-logos__item { flex-basis: calc((100% - 5 * var(--fv-fuge)) / 6); } } @media (min-width: 1100px) { .c-logos__grid:has(> :nth-child(16):last-child) > .c-logos__item { flex-basis: calc((100% - 3 * var(--fv-fuge)) / 4); } } @media (min-width: 768px) and (max-width: 899px) { .c-logos__grid:has(> :nth-child(6):last-child) > .c-logos__item { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 1100px) { .c-logos__grid:has(> :nth-child(6):last-child) > .c-logos__item { flex-basis: calc((100% - 5 * var(--fv-fuge)) / 6); } } @media (min-width: 768px) and (max-width: 899px) { .c-logos__grid:has(> :nth-child(9):last-child) > .c-logos__item { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 1100px) { .c-logos__grid:has(> :nth-child(9):last-child) > .c-logos__item { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } /* sections/member-navigator.css */ /* Sektion member-navigator: Zielgruppe waehlen, Beitrag, Vorteile, naechster Schritt. Farbe je Gruppe ueber data-verb (--accent*). */ .c-mnav__head { max-width: 760px; margin: 0 0 var(--fv-space-48); } .c-mnav__title { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-h2); line-height: 1.15; } .c-mnav__intro { margin: 0; font-size: var(--fv-fs-lead); color: var(--fv-fg-muted); max-width: 60ch; } /* Auswahl (nur mit JS sichtbar) */ .c-mnav__picker { display: none; gap: var(--fv-fuge); margin: 0 0 var(--fv-space-24); grid-template-columns: repeat(4, 1fr); } .c-mnav.is-js .c-mnav__picker { display: grid; } .c-mnav__choice { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--fv-weiss); color: var(--fv-nachtblau); border: 0; border-radius: var(--fv-radius-24); box-shadow: var(--fv-shadow-card); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing); } .c-mnav__choice:hover { background: var(--fv-nebel); } .c-mnav__choice:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-mnav__choice[aria-pressed="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-mnav__choice[aria-pressed="true"]::before { content: ""; align-self: flex-start; inline-size: 24px; block-size: 8px; border-radius: 4px; background: var(--accent); margin-bottom: var(--fv-space-4); } .c-mnav__choice[aria-pressed="true"][data-verb="foerdern"]::before { background: var(--fv-weiss); } .c-mnav__choice-label { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); line-height: 1.25; } .c-mnav__choice-price { font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; } .c-mnav__choice[data-verb="foerdern"] { --accent: var(--c-foerdern); --accent-on: var(--c-foerdern-on); --accent-ink: var(--c-foerdern-ink); } .c-mnav__choice[data-verb="verbinden"] { --accent: var(--c-verbinden); --accent-on: var(--c-verbinden-on); --accent-ink: var(--c-verbinden-ink); } .c-mnav__choice[data-verb="unterstuetzen"] { --accent: var(--c-unterstuetzen); --accent-on: var(--c-unterstuetzen-on); --accent-ink: var(--c-unterstuetzen-ink); } .c-mnav__choice[data-verb="entwickeln"] { --accent: var(--c-entwickeln); --accent-on: var(--c-entwickeln-on); --accent-ink: var(--c-entwickeln-ink); } .c-mnav__choice[data-verb="werben"] { --accent: var(--c-werben); --accent-on: var(--c-werben-on); --accent-ink: var(--c-werben-ink); } /* Panels */ .c-mnav__panels { display: grid; gap: var(--fv-space-24); } .c-mnav__panel { background: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-40); overflow: hidden; box-shadow: var(--fv-shadow-card); } .c-mnav__panel[hidden] { display: none; } .c-mnav__panel[data-verb="foerdern"] { --accent: var(--c-foerdern); --accent-on: var(--c-foerdern-on); --accent-tint: var(--c-foerdern-tint); --accent-ink: var(--c-foerdern-ink); } .c-mnav__panel[data-verb="verbinden"] { --accent: var(--c-verbinden); --accent-on: var(--c-verbinden-on); --accent-tint: var(--c-verbinden-tint); --accent-ink: var(--c-verbinden-ink); } .c-mnav__panel[data-verb="unterstuetzen"] { --accent: var(--c-unterstuetzen); --accent-on: var(--c-unterstuetzen-on); --accent-tint: var(--c-unterstuetzen-tint); --accent-ink: var(--c-unterstuetzen-ink); } .c-mnav__panel[data-verb="entwickeln"] { --accent: var(--c-entwickeln); --accent-on: var(--c-entwickeln-on); --accent-tint: var(--c-entwickeln-tint); --accent-ink: var(--c-entwickeln-ink); } .c-mnav__panel[data-verb="werben"] { --accent: var(--c-werben); --accent-on: var(--c-werben-on); --accent-tint: var(--c-werben-tint); --accent-ink: var(--c-werben-ink); } .c-mnav__panel-head { padding: clamp(22px, 3vw, 36px); background: var(--accent); color: var(--accent-on); border-radius: var(--fv-radius-28); margin: var(--fv-space-12) var(--fv-space-12) 0; } .c-mnav__panel-label { margin: 0 0 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); letter-spacing: 0; } .c-mnav__panel-title { margin: 0; color: inherit; font-size: var(--fv-fs-h3); line-height: 1.2; } .c-mnav__who { margin: 10px 0 0; max-width: 56ch; } .c-mnav__cols { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 900px) { .c-mnav__cols { grid-template-columns: .9fr 1.1fr 1.1fr; } } .c-mnav__col { padding: clamp(22px, 3vw, 36px); } @media (max-width: 899px) { } .c-mnav__h { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); letter-spacing: 0; color: var(--fv-schiefer); } .c-mnav__price { margin: 0; display: flex; flex-direction: column; gap: 4px; } .c-mnav__amount { font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem); font-weight: var(--fv-fw-bold); line-height: 1; font-variant-numeric: tabular-nums; } .c-mnav__unit { color: var(--fv-fg-muted); } .c-mnav__after { margin: var(--fv-space-8) 0 0; padding: 10px 14px; background: var(--fv-nebel); color: var(--fv-nachtblau); border-radius: var(--fv-radius-12); font-weight: var(--fv-fw-bold); } .c-mnav__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-16); } .c-mnav__benefits li { position: relative; min-block-size: 32px; padding-inline-start: 48px; padding-block-start: 2px; font-size: 1.125rem; font-weight: var(--fv-fw-medium); line-height: 1.4; } .c-mnav__benefits li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 32px; block-size: 32px; border-radius: var(--fv-radius-8); background: var(--fv-purpur); } .c-mnav__benefits li::after { content: ""; position: absolute; inset-inline-start: 6px; inset-block-start: 6px; inline-size: 20px; block-size: 20px; background: var(--fv-weiss); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; } .c-mnav__benefits li.is-pending { color: var(--fv-fg-muted); font-style: normal; } .c-mnav__benefits li.is-pending::before { background: var(--fv-nebel); } .c-mnav__benefits li.is-pending::after { background: var(--fv-schiefer); } .c-mnav__step-title { margin: 0 0 8px; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); } .c-mnav__step-text p { margin: 0 0 var(--fv-space-8); } .c-mnav__step-note { margin: 10px 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-mnav__note { margin-top: var(--fv-space-24); font-size: var(--fv-fs-small); color: var(--fv-fg-muted); max-width: 70ch; } .c-mnav__note p { margin: 0; } @media (max-width: 899px) { .c-mnav__picker { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .c-mnav__picker { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .c-mnav__choice { transition: none; } } /* sections/mosaik.css */ /* ===== MOSAIK (Besitz: brand2, Doku konzept/brand-system.md Abschnitt 12) ===== Logo-Bausteine als Flaeche. Technik: kleine SVG-Kacheln als CSS-Maske (assets/brand-system/mosaik/*.svg), die Farbe kommt aus Tokens bzw. Gradients. Basis-Maske traegt drei Tonstufen als Deckkraft, Akzent-Maske liegt als zweite Ebene (::after) darueber. Ein Element, zwei Pseudo-Ebenen, kein JS. Nutzung:
Inhalt
Klassen: .mosaik Grundklasse (Standard: dicht, Nebel-Ton, Rosa-Akzent) .mosaik--dicht/--locker/--grob Dichte bzw. Massstab .mosaik--akzent Purpur in den Akzentbausteinen, kraeftigere Basis .mosaik--nacht Toene fuer dunkle Flaechen (.grad-nacht) .mosaik--fade-unten/-oben/-rechts/-links/-radial Mosaik laeuft weich aus (Inhalt bleibt lesbar) .mosaik--hero grob, oben rechts verankert, laeuft nach links unten aus .mosaik--uebergang Sektionsuebergang: Bausteine loesen sich nach unten auf (Hoehe ueber --mosaik-h) .mosaik--rand Kartenrand aus Bausteinen; Inhalt in .mosaik__flaeche .mosaik--zahl kleines Feld hinter Kennzahlen, radial ausgeblendet .mosaik-bild Bild in Mosaik-Maske (3:2, Motiv zerfaellt nach rechts) Stellschrauben (Custom Properties): --mosaik-skala (Faktor, mobil .75), --mosaik-size, --mosaik-ton, --mosaik-akzent, --mosaik-fade, --mosaik-deckkraft. Regeln: pro Viewport hoechstens eine Mosaikflaeche, nie hinter Fliesstext ohne Fade. */ .mosaik { --mosaik-url: url("../assets/brand-system/mosaik/mosaik-dicht.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-dicht-akzent.svg"); --mosaik-size: calc(384px * var(--mosaik-skala, 1)); --mosaik-pos: 0 0; --mosaik-ton: var(--fv-nebel); --mosaik-akzent: var(--fv-rosa); --mosaik-fade: linear-gradient(#000, #000); --mosaik-deckkraft: 1; position: relative; isolation: isolate; } .mosaik::before, .mosaik::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: var(--mosaik-deckkraft); background: var(--mosaik-ton); -webkit-mask-image: var(--mosaik-url), var(--mosaik-fade); mask-image: var(--mosaik-url), var(--mosaik-fade); -webkit-mask-size: var(--mosaik-size), 100% 100%; mask-size: var(--mosaik-size), 100% 100%; -webkit-mask-position: var(--mosaik-pos), 0 0; mask-position: var(--mosaik-pos), 0 0; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } .mosaik::after { background: var(--mosaik-akzent); -webkit-mask-image: var(--mosaik-url-akzent), var(--mosaik-fade); mask-image: var(--mosaik-url-akzent), var(--mosaik-fade); } /* Dichte und Massstab */ .mosaik--dicht { --mosaik-url: url("../assets/brand-system/mosaik/mosaik-dicht.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-dicht-akzent.svg"); --mosaik-size: calc(384px * var(--mosaik-skala, 1)); } .mosaik--locker { --mosaik-url: url("../assets/brand-system/mosaik/mosaik-locker.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-locker-akzent.svg"); --mosaik-size: calc(384px * var(--mosaik-skala, 1)); } .mosaik--grob { --mosaik-url: url("../assets/brand-system/mosaik/mosaik-grob.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-grob-akzent.svg"); --mosaik-size: calc(480px * var(--mosaik-skala, 1)); } @media (max-width: 767px) { .mosaik { --mosaik-skala: .75; } } /* Farbwelten */ .mosaik--akzent { --mosaik-ton: var(--fv-flieder-hell); --mosaik-akzent: var(--fv-purpur); } .mosaik--mint { --mosaik-ton: var(--fv-nebel); --mosaik-akzent: var(--fv-rosa); } .mosaik--nacht { --mosaik-ton: var(--fv-nachtblau-hover); --mosaik-akzent: var(--fv-violett); } /* Ausblendungen (Maske Nr. 2) */ .mosaik--fade-unten { --mosaik-fade: linear-gradient(to bottom, #000 0%, #000 25%, transparent 92%); } .mosaik--fade-oben { --mosaik-fade: linear-gradient(to top, #000 0%, #000 25%, transparent 92%); } .mosaik--fade-rechts { --mosaik-fade: linear-gradient(to left, #000 0%, #000 22%, transparent 78%); } .mosaik--fade-links { --mosaik-fade: linear-gradient(to right, #000 0%, #000 22%, transparent 78%); } .mosaik--fade-radial { --mosaik-fade: radial-gradient(closest-side, #000 30%, transparent 100%); } /* Anwendungen */ .mosaik--hero { --mosaik-url: url("../assets/brand-system/mosaik/mosaik-grob.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-grob-akzent.svg"); --mosaik-size: calc(480px * var(--mosaik-skala, 1)); --mosaik-pos: 100% 0; --mosaik-fade: radial-gradient(90% 110% at 100% 0%, #000 0%, #000 28%, transparent 72%); } .mosaik--uebergang { --mosaik-fade: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / .85) 30%, transparent 100%); --mosaik-pos: 0 0; min-height: var(--mosaik-h, 144px); } .mosaik--rand { --mosaik-rand: 12px; --mosaik-ton: var(--fv-nebel); --mosaik-akzent: var(--fv-nachtblau); --mosaik-url: url("../assets/brand-system/mosaik/mosaik-dicht.svg"); --mosaik-url-akzent: url("../assets/brand-system/mosaik/mosaik-dicht-akzent.svg"); --mosaik-size: calc(192px * var(--mosaik-skala, 1)); padding: var(--mosaik-rand); border-radius: var(--fv-radius-28); } .mosaik--rand > .mosaik__flaeche { position: relative; border-radius: calc(var(--fv-radius-28) - var(--mosaik-rand)); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .mosaik--zahl { --mosaik-fade: radial-gradient(closest-side, #000 20%, transparent 100%); --mosaik-size: calc(288px * var(--mosaik-skala, 1)); } .mosaik--zahl::before, .mosaik--zahl::after { inset: -24% -12%; } /* Bild in Mosaik-Maske */ .mosaik-bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; -webkit-mask: url("../assets/brand-system/mosaik/mosaik-bildmaske.svg") center / 100% 100% no-repeat; mask: url("../assets/brand-system/mosaik/mosaik-bildmaske.svg") center / 100% 100% no-repeat; } /* Druck und erzwungene Farben ohne Muster */ @media print { .mosaik::before, .mosaik::after { display: none; } } @media (forced-colors: active) { .mosaik::before, .mosaik::after { display: none; } } /* sections/newsletter-signup.css */ /* newsletter-signup (Handoff 8.2, 8.5, 8.7): Varianten kompakt (Footer), band (Startseite/Seiten), ausfuehrlich (eigene Seite); Vorschau-Karte der Bestaetigungsmail. Felder Nebel, Radius 12, keine Kontur; Checkboxen als Check-Kachel Purpur (Radius 8, Lucide check); Fokus 3 px Ring. Keine Pillen, Kreise, Glas. */ .c-nl__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .c-nl__title { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-nl__text { color: var(--fv-fg-muted); max-inline-size: var(--fv-measure); line-height: var(--fv-lh-body); } .c-nl__text p:last-child { margin-bottom: 0; } .c-nl__shell { position: relative; display: grid; gap: var(--fv-space-48); align-items: start; } .c-nl__panel { position: relative; min-width: 0; color: var(--fv-nachtblau); --fv-focus: var(--fv-nachtblau); } .c-nl__form { display: grid; gap: var(--fv-space-24); } .c-nl__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fv-space-24); } .c-nl__field { display: grid; gap: var(--fv-space-8); min-width: 0; } .c-nl__field label, .c-nl__interests legend { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-nl__req, .c-nl__opt { font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-nl__field input { inline-size: 100%; font: inherit; font-size: var(--fv-fs-body); color: var(--fv-nachtblau); background: var(--fv-nebel); border: 0; border-radius: var(--fv-radius-12); padding: 14px var(--fv-space-16); transition: background-color var(--fv-duration) var(--fv-easing); } .c-nl__field input:hover { background-color: var(--fv-flieder-hell); } .c-nl__field input:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-nl__field input[aria-invalid="true"] { outline: 2px solid var(--fv-purpur); outline-offset: 0; } .c-nl__field input[aria-invalid="true"]:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-nl__consent input[aria-invalid="true"] + .c-nl__box { background: var(--fv-rosa-hell); box-shadow: 0 0 0 2px var(--fv-purpur); } .c-nl__err { margin: 0; padding: var(--fv-space-8) var(--fv-space-12); border-radius: var(--fv-radius-8); background: var(--fv-rosa-hell); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-nl__err:empty { display: none; } .c-nl__interests { border: 0; margin: 0; padding: 0; min-width: 0; } .c-nl__interests legend { padding: 0; margin-bottom: var(--fv-space-12); } .c-nl__checks { display: flex; flex-wrap: wrap; gap: var(--fv-space-12); } .c-nl__check { position: relative; display: inline-flex; align-items: flex-start; gap: var(--fv-space-12); cursor: pointer; color: var(--fv-nachtblau); line-height: 1.4; } .c-nl__check input { position: absolute; opacity: 0; inline-size: 24px; block-size: 24px; margin: 0; cursor: pointer; } .c-nl__box { flex: none; position: relative; inline-size: 24px; block-size: 24px; margin-top: 1px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); transition: background-color var(--fv-duration) var(--fv-easing); } .c-nl__box::after { content: ""; position: absolute; inset: 3px; background: var(--fv-weiss); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; transform: scale(0); transition: transform var(--fv-duration) var(--fv-easing); } .c-nl__check input:checked + .c-nl__box { background: var(--fv-purpur); } .c-nl__check input:checked + .c-nl__box::after { transform: scale(1); } .c-nl__check:hover .c-nl__box { background-color: var(--fv-flieder-hell); } .c-nl__check:hover input:checked + .c-nl__box { background-color: var(--fv-purpur); } .c-nl__check input:focus-visible + .c-nl__box { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-nl__checks .c-nl__check { padding: var(--fv-space-12) var(--fv-space-16) var(--fv-space-12) var(--fv-space-12); border-radius: var(--fv-radius-12); background: var(--fv-nebel); font-weight: var(--fv-fw-medium); align-items: center; transition: background-color var(--fv-duration) var(--fv-easing); } .c-nl__checks .c-nl__check:hover { background: var(--fv-flieder-hell); } .c-nl__checks .c-nl__box { margin-top: 0; background: var(--fv-weiss); } .c-nl__checks .c-nl__check:hover .c-nl__box { background-color: var(--fv-weiss); } .c-nl__checks .c-nl__check input:checked + .c-nl__box { background: var(--fv-purpur); } .c-nl__consent { display: grid; gap: var(--fv-space-8); } .c-nl__check--consent .c-nl__check-text { font-size: var(--fv-fs-small); color: var(--fv-schiefer); font-weight: var(--fv-fw-regular); } .c-nl__check--consent .c-nl__check-text p { margin: 0; } .c-nl__check--consent .c-nl__check-text a { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-nl__actions { margin: 0; } .c-nl__dummy { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-small); color: var(--fv-schiefer); background: var(--fv-rosa-hell); border-radius: var(--fv-radius-12); padding: var(--fv-space-12) var(--fv-space-16); } .c-nl__badge { display: inline-block; margin: 0 0 var(--fv-space-16); padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); } .c-nl__done:focus { outline: none; } /* Mobil-QA 19.10.2026: sichtbarer Ersatzring statt nur outline:none (WCAG 2.4.7) */ .c-nl__done:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-nl__done-title { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); } /* Band: Startseite und Unterseiten. Baustein Flieder-hell (Radius 40), Formular als weisse Karte */ .c-nl--band .c-nl__shell { padding: clamp(28px, 5vw, 72px); border-radius: var(--fv-radius-40); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); } .c-nl--band .c-nl__title { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); max-inline-size: 22ch; } .c-nl--band .c-nl__panel { background: var(--fv-weiss); border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); box-shadow: var(--fv-shadow-card); } @media (min-width: 900px) { .c-nl--band .c-nl__shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--fv-space-64); } } /* Ausfuehrlich: eigene Seite, Text links, Formular als weisse Karte */ .c-nl--ausfuehrlich:not([class*="is-"]) { background: var(--fv-papier); } .c-nl--ausfuehrlich .c-nl__panel { background: var(--fv-weiss); border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); box-shadow: var(--fv-shadow-card); } .c-nl__benefits { list-style: none; margin: var(--fv-space-32) 0 0; padding: 0; display: grid; gap: var(--fv-space-16); } .c-nl__benefits li { display: grid; gap: 2px; padding-left: 36px; position: relative; } .c-nl__benefits li::before { content: ""; position: absolute; left: 0; top: 2px; inline-size: 24px; block-size: 24px; border-radius: var(--fv-radius-8); background: var(--fv-purpur); } .c-nl__benefits li::after { content: ""; position: absolute; left: 4px; top: 6px; inline-size: 16px; block-size: 16px; background: var(--fv-weiss); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; } .c-nl__benefits strong { color: var(--fv-nachtblau); } .c-nl__benefits span { color: var(--fv-schiefer); } .c-nl__freq { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-purpur); } @media (min-width: 1025px) { .c-nl--ausfuehrlich .c-nl__shell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fv-space-64); } .c-nl--ausfuehrlich .c-nl__row:has(.c-nl__field + .c-nl__field) { grid-template-columns: 1fr 1fr; } } /* Kompakt: Footer oder helle Spalte */ .c-nl--kompakt { padding-block: 0; } .c-nl--kompakt .c-nl__shell { gap: var(--fv-space-24); } .c-nl--kompakt .c-nl__title { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); margin-bottom: var(--fv-space-8); } .c-nl--kompakt .c-nl__form { gap: var(--fv-space-16); } .c-nl--kompakt .c-nl__field label { position: absolute; left: -10000px; } @media (min-width: 900px) { .c-nl--kompakt .c-nl__shell { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fv-space-48); } } /* Footer-Block (partials/footer.html): Klasse heisst historisch --on-dark, ist heller Kontext (Papier) */ .c-nl--on-dark { color: var(--fv-nachtblau); } .c-nl--on-dark .c-nl__title { color: var(--fv-nachtblau); font-size: var(--fv-fs-h3); } .c-nl--on-dark .c-nl__text { color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .c-nl--on-dark .c-nl__text p { margin: 0; } .c-nl--on-dark .c-nl__form { gap: var(--fv-space-16); } .c-nl--on-dark .c-nl__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--fv-space-12); align-items: start; } .c-nl--on-dark .c-nl__check--consent .c-nl__check-text { color: var(--fv-schiefer); font-size: var(--fv-fs-small); } .c-nl--on-dark .c-nl__check--consent .c-nl__check-text a { color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); } .c-nl--on-dark .c-nl__line .c-btn { white-space: nowrap; } .c-footer .c-nl { margin-bottom: clamp(48px, 6vw, 72px); padding: clamp(24px, 3vw, 40px); border-radius: var(--fv-radius-24); background: var(--fv-papier); } @media (max-width: 480px) { .c-nl--on-dark .c-nl__line { grid-template-columns: 1fr; } } /* Mail-Vorschau */ .c-nl__mail-wrap { max-inline-size: 640px; } .c-nl__mail { background: var(--fv-weiss); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); overflow: hidden; box-shadow: var(--fv-shadow-card); } .c-nl__mail-head { margin: 0; padding: var(--fv-space-24); background: var(--fv-nebel); display: grid; gap: 6px; font-size: var(--fv-fs-small); } .c-nl__mail-head div { display: grid; grid-template-columns: 64px 1fr; gap: var(--fv-space-8); } .c-nl__mail-head dt { color: var(--fv-schiefer); } .c-nl__mail-head dd { margin: 0; color: var(--fv-nachtblau); overflow-wrap: anywhere; } .c-nl__mail-body { padding: var(--fv-space-32) var(--fv-space-24) var(--fv-space-16); } .c-nl__mail-body p { margin-top: 0; } .c-nl__mail-btn { margin: 0; padding: 0 var(--fv-space-24) var(--fv-space-32); } .c-nl__mail-btn .c-btn { cursor: default; } .c-nl__mail-note { margin: var(--fv-space-16) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-nl--ausfuehrlich .c-nl__mail-wrap { background: transparent; box-shadow: none; padding: 0; } @media (max-width: 767px) { .c-nl--ausfuehrlich .c-nl__panel, .c-nl--band .c-nl__panel { padding: var(--fv-space-24); } } /* sections/next-event-band.css */ /* next-event-band (Brandmanual v1.0, 8.10 CTA-Band): Nachtblau mit Glow (.is-nacht), Radius 64 als grosser Baustein im Container. Datumskachel in der Verbfarbe des Termins (data-verb), Schrift nach Kontrastregeln; Button auf dunkel, Textlinks Weiss mit Rosa-Unterstrich. Ohne Datum: "Datum folgt". Keine Konturen, keine gestrichelten Rahmen. */ .c-nextev { padding-block: var(--fv-space-48); --nx-bg: var(--fv-weiss); --nx-fg: var(--fv-nachtblau); } .c-nextev[data-verb="verbinden"] { --nx-bg: var(--fv-purpur); --nx-fg: var(--fv-weiss); } .c-nextev[data-verb="entwickeln"] { --nx-bg: var(--fv-violett); --nx-fg: var(--fv-weiss); } .c-nextev[data-verb="unterstuetzen"] { --nx-bg: var(--fv-rosa); --nx-fg: var(--fv-nachtblau); } .c-nextev[data-verb="werben"] { --nx-bg: var(--fv-pflaume); --nx-fg: var(--fv-nachtblau); } .c-nextev__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--fv-space-24) var(--fv-space-32); align-items: center; padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px); border-radius: var(--fv-radius-64); background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .c-nextev__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-inline-size: 112px; min-block-size: 112px; padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-24); background-color: var(--nx-bg); color: var(--nx-fg); text-align: center; line-height: 1.1; } .c-nextev__day { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); font-weight: var(--fv-fw-bold); line-height: .9; letter-spacing: var(--fv-ls-display); font-variant-numeric: tabular-nums; } .c-nextev__mon { margin-top: var(--fv-space-4); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-nextev__open { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: 1.15; } .c-nextev__title { margin: 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); color: var(--fv-weiss); text-wrap: balance; } .c-nextev__flag { margin: var(--fv-space-8) 0 0; } .c-nextev__facts { margin: var(--fv-space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-24); color: var(--fv-weiss); font-size: var(--fv-fs-body); line-height: var(--fv-lh-small); } .c-nextev__actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--fv-space-16) var(--fv-space-24); align-items: center; justify-content: flex-end; } .c-nextev__link { --fv-fg: var(--fv-weiss); color: var(--fv-weiss); } .c-nextev__inner :focus-visible { outline: var(--fv-focus-width) solid var(--fv-rosa); outline-offset: var(--fv-focus-offset); } @media (max-width: 899px) { .c-nextev__inner { grid-template-columns: auto 1fr; border-radius: var(--fv-radius-40); } .c-nextev__actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 480px) { .c-nextev__inner { grid-template-columns: 1fr; } .c-nextev__date { align-self: start; } } /* .ics-Links in der Terminliste (event-list; Teaser-Layout blendet sie wie den Detaillink aus) */ .c-event__ics { margin: 0; font-size: var(--fv-fs-small); } .c-event__ics a { color: var(--fv-fg); font-weight: var(--fv-fw-bold); text-decoration-color: var(--fv-link-underline); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .c-feed--teaser .c-event__ics, .c-feed--teaser .c-ics-sub { display: none; } .c-ics-sub { margin-top: var(--fv-space-24); padding: var(--fv-space-24); background-color: var(--fv-papier); border: 0; border-radius: var(--fv-radius-24); max-width: 78ch; } :is(.is-tint, .is-papier) .c-ics-sub { background-color: var(--fv-weiss); } .c-ics-sub__title { margin: 0 0 var(--fv-space-8); font-weight: var(--fv-fw-bold); } .c-ics-sub__text { margin: 0; color: var(--fv-fg-muted); font-size: var(--fv-fs-small); } .c-ics-sub code { font-size: .92em; overflow-wrap: anywhere; } .c-nextev .c-nextev__tag { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } /* sections/nomination-3d.css */ /* nomination-3d: Seitenkopf /preise/nominierung/ (Welle 2, Agent w2-c-preise: Farben/Formen/UI ans Brandmanual v1.0). Nachtblau mit Glow, UI-Akzent Rosa (auf Nachtblau lesbar), Szene: Preis-Baustein in Logo-Farbe; 3D-Bildmarke erlaubt (A14). Modi: ohne JS alle Preise als Liste | .is-fallback Schrittgrafik + voller Text | .is-3d gepinnte Bühne, Scroll steuert die Station. */ .c-nom3d { --nom-bg: var(--fv-nachtblau); --nom-accent: var(--fv-rosa); /* Text/Marker auf Nachtblau: Rosa 6,49:1 (Manual 3.3) */ --nom-accent-solid: var(--fv-violett); --nom-step-len: 62vh; --nom-p: 0; --fv-focus: var(--fv-rosa); position: relative; isolation: isolate; color: var(--fv-weiss); background-color: var(--nom-bg); background-image: var(--fv-gradient-glow); } /* Preis-Baustein in der Szene: Lehrpreis Violett, Studienpreis Purpur, Wolf-Wagner-Preis Pflaume (Logo-Teile); UI-Akzent bleibt Rosa */ .c-nom3d[data-award="studienpreis"] { --nom-accent-solid: var(--fv-purpur); } .c-nom3d[data-award="wolf-wagner-preis"] { --nom-accent-solid: var(--fv-pflaume); } .c-nom3d :focus-visible { outline: var(--fv-focus-width) solid var(--fv-rosa); outline-offset: 3px; } .c-nom3d__sticky { position: relative; } .c-nom3d__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; } .c-nom3d__canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--fv-easing); } .c-nom3d.is-ready .c-nom3d__canvas { opacity: 1; } .c-nom3d__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fv-space-48); padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 88px); } .c-nom3d__copy { display: flex; flex-direction: column; gap: var(--fv-space-32); max-width: 560px; } /* Kopf */ /* Brotkrumen: gemeinsamer Stil .c-crumbs (css/sections.css, auf Nachtblau Weiss); hier nur der Abstand */ .c-nom3d .c-nom3d__crumbs { margin-bottom: var(--fv-space-24); } .c-nom3d__title { color: var(--fv-weiss); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); margin: 0 0 var(--fv-space-16); text-wrap: balance; max-width: 18ch; } .c-nom3d__intro { margin: 0; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); color: var(--fv-weiss); max-width: 48ch; } /* Umschalter */ .c-nom3d__switch { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--fv-space-24); } .c-nom3d__switch[hidden], .c-nom3d__seg[hidden] { display: none; } .c-nom3d__seg { display: inline-flex; flex-wrap: wrap; gap: var(--fv-space-4); padding: var(--fv-space-4); border-radius: var(--fv-radius-12); background: var(--fv-nachtblau-hover); } .c-nom3d__seg-btn { font: inherit; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1.2; color: var(--fv-weiss); background: transparent; border: 0; border-radius: var(--fv-radius-8); padding: 9px 14px; cursor: pointer; transition: background-color .25s, color .25s; } .c-nom3d__seg-btn:hover { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-nom3d__seg-btn[aria-pressed="true"] { background: var(--fv-weiss); color: var(--fv-nachtblau); text-decoration: none; } .c-nom3d__seg--cat .c-nom3d__seg-btn[aria-pressed="true"] { background: var(--fv-rosa); color: var(--fv-nachtblau); } /* Panels und Stationen */ .c-nom3d__panel + .c-nom3d__panel { margin-top: var(--fv-space-32); } .c-nom3d.is-js .c-nom3d__panel { display: none; } .c-nom3d.is-js .c-nom3d__panel.is-active { display: block; } .c-nom3d__panel-title { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); color: var(--fv-weiss); margin: 0 0 var(--fv-space-16); } .c-nom3d__panel-cat { color: var(--nom-accent); } .c-nom3d.is-js .c-nom3d__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .c-nom3d__steps { list-style: none; margin: 0; padding: 0; position: relative; } .c-nom3d__step { position: relative; padding-left: 0; } .c-nom3d__step + .c-nom3d__step { margin-top: 4px; } .c-nom3d__step-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 6px 0; font: inherit; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); color: var(--fv-weiss); text-align: left; background: none; border: 0; cursor: default; } .c-nom3d__num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--fv-radius-8); font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; background: var(--fv-nachtblau-hover); color: var(--fv-weiss); transition: background-color .3s, color .3s, transform .4s var(--fv-easing); } .c-nom3d__body { padding: 2px 0 var(--fv-space-16) 48px; } .c-nom3d__body-title { display: none; } .c-nom3d__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-weiss); } /* Verbfarbe nur als Kachel: Violett/Purpur als Schrift auf Nachtblau haette unter 3:1 */ .c-nom3d__meta::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--fv-radius-3); background: var(--nom-accent); } .c-nom3d__text { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-weiss); max-width: 46ch; } .c-nom3d__text p { margin: 0; } .c-nom3d__text p + p { margin-top: 8px; } .c-nom3d__text a { color: var(--fv-weiss); text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; overflow-wrap: anywhere; } .c-nom3d__text em { color: var(--fv-weiss); } .c-nom3d__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-24); } .c-nom3d .c-btn--light { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-nom3d .c-btn--light:hover { background: var(--fv-weiss-hover) !important; color: var(--fv-nachtblau) !important; } .c-nom3d__hint { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-weiss); } .c-nom3d__hint[hidden] { display: none; } /* Standbild (ohne WebGL2 / reduzierte Bewegung / ohne JS) */ .c-nom3d__still { margin: 0; align-self: center; } .c-nom3d__still img { display: block; width: 100%; height: auto; } @media (min-width: 1024px) { .c-nom3d:not(.is-3d) .c-nom3d__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } /* Von Hand ergaenzt 21.10.2026 (Audit-Fund, Punkt 15/31): "top: var(--header-h)" kennt nur die Hoehe der Logo/Nav-Zeile (80px), nicht die zusaetzliche Topbar (ca. 38px, ab 1201px sichtbar, c-topbar). Dadurch stickte dieser Block zu weit oben und lag unter dem Header. "--hdr-vis" (gesetzt von js/main.js aus header.offsetHeight, 0 wenn der Header beim Scrollen ausgeblendet ist) kennt die tatsaechliche Hoehe; Fallback bleibt --header-h fuer den ersten Render, bevor JS lief. Gleiches Muster wie .c-ktnav (Zeile 4480). */ .c-nom3d:not(.is-3d) .c-nom3d__still { position: sticky; top: calc(var(--hdr-vis, var(--header-h)) + 40px); } } /* ---------------------------------------------------------------- 3D: gepinnte Bühne */ .c-nom3d.is-3d { height: calc(100vh - var(--header-h) + 4 * var(--nom-step-len)); height: calc(100svh - var(--header-h) + 4 * var(--nom-step-len)); } /* Von Hand ergaenzt 21.10.2026 (Audit-Fund, Punkt 15/31, Brotkrumen "Start" lag unter dem Logo auf /preise/nominierung/): siehe Begruendung oben bei .c-nom3d__still. Nur "top" auf --hdr-vis umgestellt, "height" bewusst auf --header-h belassen (statisch), damit die Pin- Scroll-Strecke nicht bei jedem Ein-/Ausblenden des Headers neu springt. */ .c-nom3d.is-3d .c-nom3d__sticky { position: sticky; top: var(--hdr-vis, var(--header-h)); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 560px; overflow: hidden; } .c-nom3d.is-3d .c-nom3d__stage { display: block; } .c-nom3d.is-3d .c-nom3d__still { display: none; } /* Von Hand ergaenzt 21.10.2026 (Audit-Fund, Punkt 15/31, Rest-Ueberlappung nach der Korrektur oben): "align-content: center" zentriert den Kopf (Brotkrumen, H1, Intro) + alle Panels in der gepinnten Buehne. Ist der Inhalt bei kleineren Bildschirmhoehen (z. B. 1280x800) hoeher als die Buehne, wird bei "center" gleich viel oben wie unten abgeschnitten - oben verschwindet dann der Brotkrumen hinter dem Header. "safe center" (CSS Box Alignment) zentriert nur, wenn der Platz reicht, sonst faellt es auf "start" zurueck: ueberschuessiger Inhalt geht nach unten verloren (dort ohnehin per overflow:hidden abgeschnitten), der Kopf bleibt oben sichtbar. */ .c-nom3d.is-3d .c-nom3d__inner { height: 100%; padding-block: clamp(20px, 3.2vh, 48px); align-content: safe center; } .c-nom3d.is-3d .c-nom3d__copy { max-width: 470px; gap: clamp(16px, 2.6vh, 32px); } /* Lesbarkeit über der Szene */ .c-nom3d.is-3d .c-nom3d__sticky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--nom-bg) 0%, color-mix(in srgb, var(--nom-bg) 70%, transparent) 30%, transparent 50%); } .c-nom3d.is-3d .c-nom3d__inner { z-index: 2; } .c-nom3d.is-3d .c-nom3d__steps::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--fv-nachtblau-hover); } .c-nom3d.is-3d .c-nom3d__steps::after { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--nom-accent); transform-origin: top; transform: scaleY(var(--nom-p)); } .c-nom3d.is-3d .c-nom3d__step { z-index: 1; } .c-nom3d.is-3d .c-nom3d__step-btn { cursor: pointer; color: var(--fv-weiss); } .c-nom3d.is-3d .c-nom3d__step-btn:hover .c-nom3d__step-title { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-nom3d.is-3d .c-nom3d__num { background: var(--nom-bg); } .c-nom3d.is-3d .is-done .c-nom3d__num { background: var(--fv-violett); } .c-nom3d.is-3d .is-current .c-nom3d__step-btn { color: var(--fv-weiss); } .c-nom3d.is-3d .is-current .c-nom3d__num { background: var(--fv-rosa); color: var(--fv-nachtblau); transform: scale(1.06); } .c-nom3d.is-3d .c-nom3d__body { display: none; } .c-nom3d.is-3d .is-current .c-nom3d__body { display: block; animation: nom3d-in .5s var(--fv-easing) both; } @keyframes nom3d-in { from { transform: translateY(6px); } to { transform: none; } } /* ohne Ausblenden: Text bleibt voll deckend */ /* Tablet hoch: Text unten, Szene oben */ @media (max-width: 1023px) { .c-nom3d.is-3d .c-nom3d__sticky::before { background: linear-gradient(180deg, color-mix(in srgb, var(--nom-bg) 75%, transparent) 0%, transparent 26%, transparent 42%, color-mix(in srgb, var(--nom-bg) 90%, transparent) 64%); } .c-nom3d.is-3d .c-nom3d__inner { align-content: stretch; } .c-nom3d.is-3d .c-nom3d__copy { max-width: none; height: 100%; justify-content: space-between; } .c-nom3d.is-3d .c-nom3d__intro { display: none; } .c-nom3d.is-3d .c-nom3d__panel-wrap { margin-top: auto; } .c-nom3d.is-3d .c-nom3d__steps { display: grid; grid-template-columns: repeat(5, auto) 1fr; align-items: center; column-gap: 6px; } .c-nom3d.is-3d .c-nom3d__steps::before, .c-nom3d.is-3d .c-nom3d__steps::after { display: none; } .c-nom3d.is-3d .c-nom3d__step { display: contents; } .c-nom3d.is-3d .c-nom3d__step-btn { grid-row: 1; width: auto; padding: 4px; } .c-nom3d.is-3d .c-nom3d__step-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .c-nom3d.is-3d .c-nom3d__num { width: 40px; height: 40px; } .c-nom3d.is-3d .c-nom3d__body { grid-row: 2; grid-column: 1 / -1; padding: var(--fv-space-16) 0 0; min-height: 8.5em; } .c-nom3d.is-3d .c-nom3d__body-title { display: block; margin: 0 0 4px; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); color: var(--fv-weiss); } .c-nom3d.is-3d .c-nom3d__switch { margin-bottom: var(--fv-space-16); } } @media (max-width: 767px) { .c-nom3d { --nom-step-len: 70vh; } .c-nom3d.is-3d .c-nom3d__inner { padding-block: 16px 20px; } .c-nom3d.is-3d .c-nom3d__crumbs { display: none; } .c-nom3d.is-3d .c-nom3d__title { max-width: 16ch; } /* Groesse bleibt H1 der Skala 5.2 (36 px mobil) */ .c-nom3d__seg-btn { padding: 8px 11px; } .c-nom3d.is-3d .c-nom3d__switch { gap: 6px; } .c-nom3d.is-3d .c-nom3d__text { font-size: var(--fv-fs-small); } .c-nom3d.is-3d .c-nom3d__hint { display: none; } .c-nom3d.is-3d .c-nom3d__cta { padding: 10px 18px; } } @media (max-height: 700px) and (min-width: 1024px) { .c-nom3d.is-3d .c-nom3d__intro { display: none; } } /* sections/onpage-nav.css */ /* onpage-nav: feste On-Page-Navigation fuer lange Seiten (js/onpage-nav.js). Erscheint nur im Bereich der Abschnitte, sitzt unter dem Header und rutscht hoch, wenn der Header beim Runterscrollen ausblendet. Brandmanual v1.0: Verb = Farbkachel 10 x 10 (Radius 3) plus Text, Eintraege als Tags Radius 10, aktiv Nachtblau mit weisser Schrift. Keine Pillen, kein Glas, kein Schatten. */ :root { --onpage-h: 64px; } [data-onpage] { scroll-margin-top: calc(var(--onpage-h) + 16px); } .c-opn { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 0; pointer-events: none; } .c-opn[hidden] { display: none; } .c-opn__bar { position: absolute; top: 0; left: 0; right: 0; height: var(--onpage-h); display: flex; align-items: center; background-color: var(--fv-weiss); box-shadow: inset 0 -1px 0 var(--fv-nebel); transform: translate3d(0, calc(var(--onpage-hh, 0px) * -1 - 100%), 0); opacity: 0; visibility: hidden; transition: transform .35s var(--fv-easing), opacity .25s var(--fv-easing), visibility 0s linear .35s; } .c-opn.is-on .c-opn__bar { transform: translate3d(0, var(--onpage-off, 0px), 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .35s var(--fv-easing), opacity .25s var(--fv-easing), visibility 0s; } .c-opn__inner { min-width: 0; } .c-opn__list { display: flex; gap: var(--fv-space-8); list-style: none; margin: 0; padding: var(--fv-space-8) 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; justify-content: center; } .c-opn__list::-webkit-scrollbar { display: none; } .c-opn__item { --opn-verb: var(--fv-verb-foerdern); flex: none; scroll-snap-align: center; } .c-opn__item[data-verb="verbinden"] { --opn-verb: var(--fv-verb-verbinden); } .c-opn__item[data-verb="unterstuetzen"] { --opn-verb: var(--fv-verb-unterstuetzen); } .c-opn__item[data-verb="entwickeln"] { --opn-verb: var(--fv-verb-entwickeln); } .c-opn__item[data-verb="werben"] { --opn-verb: var(--fv-verb-werben); } .c-opn__link { display: inline-flex; align-items: center; gap: var(--fv-space-8); padding: 10px 14px; border-radius: var(--fv-radius-10); background-color: transparent; color: var(--fv-nachtblau); font-family: var(--fv-font-sans); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-opn__dot { width: 10px; height: 10px; border-radius: 3px; background-color: var(--opn-verb); flex: none; } .c-opn__link:hover { background-color: var(--fv-nebel); color: var(--fv-nachtblau); } .c-opn__link[aria-current="true"] { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } /* Nachtblau-Kachel auf Nachtblau ersetzt durch Weiss (Verb-Tag-Regel auf dunkel) */ .c-opn__item[data-verb="foerdern"] .c-opn__link[aria-current="true"] .c-opn__dot { background-color: var(--fv-weiss); } .c-opn__link:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-opn__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background-color: var(--fv-nachtblau); transform: scaleX(var(--onpage-p, 0)); transform-origin: 0 50%; } @media (max-width: 767px) { :root { --onpage-h: 56px; } .c-opn__list { justify-content: flex-start; gap: var(--fv-space-4); padding: 6px 0; scroll-padding-inline: var(--fv-page-margin); } .c-opn__link { padding: 10px 12px; } } @media (prefers-reduced-motion: reduce) { .c-opn__bar, .c-opn.is-on .c-opn__bar, .c-opn__link { transition: none; } } /* sections/organisch.css */ /* ===== ORGANISCHE FLAECHEN (Besitz: organisch, Regeln: konzept/organische-flaechen.md, Demo: /speedbuild/organisch/) ===== Logo-DNA "Kehle": Wo zwei Flaechen verschmelzen, gibt es keine Innenecke, sondern eine konkave Rundung. Modul M 16 px (mobil 12 px), Kehle 1,5 M = 24 px (mobil 16 px), Radien 8 / 12 / 16 / 24 px. Drei Primitive, alle ohne JavaScript, Text liegt immer normal im Fluss (keine Filter, keine Masken auf Text): .org-kehle einzelnes Kehlen-Stueck an einer Innenecke. Lage des "Lochs" per --loch (z. B. 100% 0 = oben rechts). Stufe 1: mask-image (radial-gradient), Fuellung frei. Rueckfall: radial-gradient als Hintergrund (ueberall). .org-fuss Fuss unter einer Zunge: zwei Kehlen links und rechts. Stufe 1: corner-shape: scoop. Rueckfall: radial-gradient. .org-zunge abgerundeter Block, der aus einer Flaeche waechst (.org-zunge--haengend: haengt nach unten). Bildmaske Hero: clip-path: shape() mit festen px-Radien. Rueckfall: SVG-clipPath #fv-mask-nische, dann border-radius. Goo-Filter (SVG) nur fuer Deko (.org-goo), nie fuer Text. .org-fallback an einer Sektion erzwingt die Rueckfallebene (nur Test, /speedbuild/organisch/fallback/). Verlaeufe aus css/sections/_gradients.css (brand2), jeweils mit flachem Ersatzwert. */ .org { --org-m: 16px; --org-k: 24px; /* Kehlenradius 1,5 M */ --org-r: 24px; /* r-xl: grosse Flaechen, Bilder */ --org-r-m: 16px; /* r-l: Karten */ --org-r-s: 12px; /* r-m: kleine Bloecke */ --org-fill: var(--fv-weiss); --org-pad: clamp(56px, 7vw, 104px); position: relative; padding-block: var(--org-pad); color: var(--fv-nachtblau); } @media (max-width: 767px) { .org { --org-m: 12px; --org-k: 16px; --org-r: 16px; --org-r-m: 12px; --org-r-s: 8px; } } @media (min-width: 768px) { .org-split, .org-wechsel, .org-karte, .org-footer { --org-k: 32px; } /* grosse Flaechen: Kehle 2 M */ } .org h2 { font-size: var(--fv-fs-h2); } .org p { margin: 0; } .org-kopf { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); } .org-kopf h2 { margin-bottom: 12px; } .org-kopf p { color: var(--fv-schiefer); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-body); } .org-link { font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; display: inline-flex; align-items: center; gap: .45em; } .org-link::after { content: ""; width: .5em; height: .5em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform var(--fv-duration) var(--fv-easing); } .org-link:hover { text-decoration-thickness: 4px; } .org-link:hover::after { transform: translateX(3px) rotate(45deg); } .org-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Primitiv 1: Kehlen-Stueck ---------- */ .org-kehle { --loch: 100% 0; position: absolute; width: var(--org-k); height: var(--org-k); pointer-events: none; background: radial-gradient(circle at var(--loch), #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)); } @supports ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) { .org:not(.org-fallback) .org-kehle { background: var(--org-fill); -webkit-mask: radial-gradient(circle at var(--loch), #0000 calc(var(--org-k) - .5px), #000 calc(var(--org-k) + .5px)); mask: radial-gradient(circle at var(--loch), #0000 calc(var(--org-k) - .5px), #000 calc(var(--org-k) + .5px)); } } /* ---------- Primitiv 2: Fuss mit zwei Kehlen (unter einer Zunge, Loecher oben links und oben rechts) ---------- */ .org-fuss { position: absolute; left: calc(-1 * var(--org-k)); right: calc(-1 * var(--org-k)); bottom: -1px; height: calc(var(--org-k) + 1px); z-index: -1; pointer-events: none; background: radial-gradient(circle at 0 0, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 0 0 / var(--org-k) var(--org-k) no-repeat, radial-gradient(circle at 100% 0, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 100% 0 / var(--org-k) var(--org-k) no-repeat, linear-gradient(var(--org-fill) 0 0) 50% 0 / calc(100% - 2 * var(--org-k)) 100% no-repeat, linear-gradient(var(--org-fill) 0 0) 0 100% / 100% 1px no-repeat; } .org-fuss--haengend { bottom: auto; top: -1px; background: radial-gradient(circle at 0 100%, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 0 100% / var(--org-k) var(--org-k) no-repeat, radial-gradient(circle at 100% 100%, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 100% 100% / var(--org-k) var(--org-k) no-repeat, linear-gradient(var(--org-fill) 0 0) 50% 0 / calc(100% - 2 * var(--org-k)) 100% no-repeat, linear-gradient(var(--org-fill) 0 0) 0 0 / 100% 1px no-repeat; } @supports (corner-shape: scoop) { .org:not(.org-fallback) .org-fuss { background: var(--org-fill); border-radius: var(--org-k) var(--org-k) 0 0; corner-shape: scoop; } .org:not(.org-fallback) .org-fuss--haengend { border-radius: 0 0 var(--org-k) var(--org-k); } } /* ---------- Primitiv 3: Zunge (waechst aus einer Flaeche) ---------- */ .org-zunge { position: absolute; display: block; isolation: isolate; background: var(--org-fill); border-radius: var(--org-r) var(--org-r) 0 0; } .org-zunge--haengend { border-radius: 0 0 var(--org-r) var(--org-r); } /* ====================================================================== Steckbrief (nur Speedbuild) ====================================================================== */ .org-spec { padding-block: clamp(56px, 6vw, 88px) 0; } .org-spec__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: start; padding-top: 32px; border-top: 2px solid var(--fv-nebel); } .org-spec__titel { font-size: var(--fv-fs-h3); margin: 0 0 10px; display: flex; gap: 14px; align-items: center; } .org-spec__nr { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fv-radius-12); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); font-size: var(--fv-fs-button); font-weight: var(--fv-fw-semibold); font-variant-numeric: tabular-nums; } .org-spec__text { color: var(--fv-schiefer); max-width: 44ch; } .org-spec__fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; font-size: var(--fv-fs-small); line-height: 1.5; } .org-spec__fakten > div { background: var(--fv-nebel); border-radius: var(--fv-radius-12); padding: 12px 16px; } .org-spec__fakten dt { font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); margin-bottom: 2px; } .org-spec__fakten dd { margin: 0; color: var(--fv-schiefer); } .org-spec__fakten code { font-size: .92em; color: var(--fv-nachtblau-hover); word-break: break-word; } @media (max-width: 900px) { .org-spec__inner { grid-template-columns: 1fr; } .org-spec__fakten { grid-template-columns: 1fr; } } /* ====================================================================== 1) Bild-Text mit Kehlen-Verbindung (.org-split) bild-links: Bild hoch, Textflaeche waechst seitlich aus dem Bild (Kehlen oben und unten an der Fuge). bild-rechts: Textflaeche hoch, Bild waechst aus der Flaeche, Akzentblock sitzt in der Nische. ====================================================================== */ .org-split { --org-fill: var(--fv-nebel); background: var(--fv-papier); } .org-split__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .org-split__media { position: relative; margin: 0; min-height: clamp(420px, 40vw, 560px); } .org-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--org-r); background: var(--fv-flieder-hell); } .org-split__panel { position: relative; align-self: center; margin-block: 72px; margin-left: -1px; padding: clamp(32px, 4vw, 56px); background: var(--org-fill); border-radius: 0 var(--org-r) var(--org-r) 0; } .org-split__titel { margin-bottom: 16px; } .org-split__text { color: var(--fv-schiefer); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .org-split__text p + p { margin-top: 12px; } .org-split__cta { margin-top: 28px !important; } .org-split .org-kehle { display: none; } /* bild-links: Kehlen am Panel, an der Fuge zum Bild */ .org-split--bild-links .org-split__k3 { display: block; left: 0; bottom: 100%; --loch: 100% 0; } .org-split--bild-links .org-split__k4 { display: block; left: 0; top: 100%; --loch: 100% 100%; } /* bild-rechts */ .org-split--bild-rechts .org-split__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .org-split--bild-rechts .org-split__panel { grid-column: 1; grid-row: 1; align-self: stretch; margin: 0; border-radius: var(--org-r); padding-block: clamp(48px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; } .org-split--bild-rechts .org-split__media { grid-column: 2; grid-row: 1; align-self: center; margin: 120px 0 72px -1px; min-height: clamp(320px, 30vw, 420px); } .org-split--bild-rechts .org-split__media img { border-radius: 0 var(--org-r) var(--org-r) 0; } .org-split--bild-rechts .org-split__k1 { display: block; left: 0; bottom: 100%; --loch: 100% 0; } .org-split--bild-rechts .org-split__k2 { display: block; left: 0; top: 100%; --loch: 100% 100%; } .org-split__akzent { position: absolute; left: calc(var(--org-k) + var(--org-m)); bottom: calc(100% + var(--org-m)); width: clamp(80px, 9vw, 120px); height: 36px; border-radius: var(--org-r-s); background: var(--fv-nachtblau); } @media (max-width: 900px) { .org-split__body, .org-split--bild-rechts .org-split__body { grid-template-columns: 1fr; } .org-split__media, .org-split--bild-rechts .org-split__media { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; margin: 0; } .org-split__panel, .org-split--bild-rechts .org-split__panel { grid-column: 1; grid-row: 2; align-self: auto; } /* bild-links: Panel schmaler, waechst unten aus dem Bild */ .org-split--bild-links .org-split__panel { margin: -1px var(--org-r) 0; border-radius: 0 0 var(--org-r) var(--org-r); padding: 28px 24px 32px; } .org-split--bild-links .org-split__k3 { left: auto; right: 100%; bottom: auto; top: 0; --loch: 0 100%; } .org-split--bild-links .org-split__k4 { left: 100%; top: 0; --loch: 100% 100%; } /* bild-rechts: Bild schmaler, waechst oben aus dem Panel */ .org-split--bild-rechts .org-split__media { margin: 0 var(--org-r) -1px; } .org-split--bild-rechts .org-split__media img { border-radius: var(--org-r) var(--org-r) 0 0; } .org-split--bild-rechts .org-split__panel { padding: 32px 24px; } .org-split--bild-rechts .org-split__k1 { left: auto; right: 100%; top: auto; bottom: 0; --loch: 0 0; } .org-split--bild-rechts .org-split__k2 { left: 100%; top: auto; bottom: 0; --loch: 100% 0; } .org-split__akzent { display: none; } } /* ====================================================================== 2) Teaser-Gruppe: Karten an einer Grundflaeche angewachsen (.org-teaser) ====================================================================== */ .org-teaser { --org-fill: var(--fv-weiss); background: var(--fv-flieder-hell); } .org-teaser__reihe { list-style: none; margin: 0; padding: 0 clamp(24px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--org-k) + var(--org-m)); align-items: end; } .org-teaser__karte { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 12px; margin-bottom: -1px; padding: 32px 32px 40px; background: var(--org-fill); border-radius: var(--org-r) var(--org-r) 0 0; } .org-teaser__karte:nth-child(3n+1) { min-height: 300px; } .org-teaser__karte:nth-child(3n+2) { min-height: 404px; } .org-teaser__karte:nth-child(3n) { min-height: 344px; } .org-teaser__marker { width: 28px; height: 12px; border-radius: var(--fv-radius-8); background: var(--accent); margin-bottom: auto; } .org-teaser__titel { font-size: var(--fv-fs-h3); margin: 24px 0 0; } .org-teaser__titel a { color: var(--fv-nachtblau); text-decoration: none; } .org-teaser__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .org-teaser__karte:hover .org-teaser__titel a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; } .org-teaser__titel a:focus-visible { outline: none; } .org-teaser__titel a:focus-visible::after { outline: 3px solid var(--fv-focus); outline-offset: 4px; border-radius: var(--org-r) var(--org-r) 4px 4px; } .org-teaser__text { color: var(--fv-schiefer); } .org-teaser__mehr { color: var(--fv-nachtblau); font-weight: var(--fv-fw-semibold); font-size: var(--fv-fs-button); } .org-teaser__marker { transition: width .25s var(--fv-easing); } .org-teaser__karte:hover .org-teaser__marker { width: 44px; } .org-teaser__grund { position: relative; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding: 22px clamp(24px, 4vw, 56px); background: var(--org-fill); border-radius: var(--org-r); } .org-teaser__grund p { color: var(--fv-schiefer); } .org-teaser__k { display: none; } @media (max-width: 900px) { /* mobil: Rueckgrat links, Karten wachsen nach rechts heraus */ .org-teaser__reihe { position: relative; grid-template-columns: 1fr; gap: calc(2 * var(--org-k) + var(--org-m)); padding: 32px 0 calc(var(--org-k) + 16px) 20px; } .org-teaser__reihe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; background: var(--org-fill); border-radius: var(--fv-radius-10) var(--fv-radius-10) 0 0; } .org-teaser__karte, .org-teaser__karte:nth-child(n) { min-height: 0; margin: 0 0 0 -1px; padding: 24px 24px 28px; border-radius: 0 var(--org-r) var(--org-r) 0; } .org-teaser__titel { margin-top: 16px; } .org-teaser__karte > .org-fuss { left: 0; right: auto; top: calc(-1 * var(--org-k)); bottom: calc(-1 * var(--org-k)); width: var(--org-k); height: auto; background: radial-gradient(circle at 100% 0, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 0 0 / 100% var(--org-k) no-repeat, radial-gradient(circle at 100% 100%, #0000 calc(var(--org-k) - .5px), var(--org-fill) calc(var(--org-k) + .5px)) 0 100% / 100% var(--org-k) no-repeat, linear-gradient(var(--org-fill) 0 0) 0 50% / 100% calc(100% - 2 * var(--org-k)) no-repeat; } .org-teaser__titel a:focus-visible::after { border-radius: 4px var(--org-r) var(--org-r) 4px; } .org-teaser__grund { border-radius: 0 var(--org-r) var(--org-r) var(--org-r); padding: 20px 24px; margin-top: -1px; } .org-teaser__k { display: block; left: 20px; bottom: 100%; --loch: 100% 0; } } @media (max-width: 900px) { @supports (corner-shape: scoop) { .org:not(.org-fallback) .org-teaser__karte > .org-fuss { background: var(--org-fill); border-radius: 0 var(--org-k) var(--org-k) 0; corner-shape: scoop; } } } /* ====================================================================== 3) Hero mit organischer Bildmaske aus Logo-Bloecken (.org-hero) Maske: Hauptblock, Nische oben rechts (Kehle), Sockel-Zunge unten links (zwei Kehlen). ====================================================================== */ .org-hero { --zunge: 48px; background: var(--fv-papier); padding-block: clamp(48px, 6vw, 96px); overflow: clip; } .org-hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .org-hero__titel { font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); font-weight: var(--fv-fw-bold); margin-bottom: 20px; max-width: 16ch; } .org-hero__lead { font-size: var(--fv-fs-lead); line-height: var(--fv-lh-body); color: var(--fv-schiefer); max-width: 40ch; } .org-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px !important; } .org-hero__bild { position: relative; aspect-ratio: 7 / 6; } .org-hero__img { position: absolute; inset: 0 0 var(--zunge) 0; width: 100%; height: calc(100% - var(--zunge)); object-fit: cover; border-radius: var(--org-r); clip-path: url(#fv-mask-nische); /* Stufe 2: SVG-clipPath aus partials/masks.html (objectBoundingBox) */ } @supports (clip-path: shape(from 0 0, line to 1px 1px)) { .org:not(.org-fallback) .org-hero__img { --R: var(--org-r); --K: var(--org-k); --T: var(--zunge); --NY: calc((100% - var(--T)) * .4); inset: 0; height: 100%; border-radius: 0; clip-path: shape(from var(--R) 0, hline to calc(67.5% - var(--R)), arc to 67.5% var(--R) of var(--R) cw, vline to calc(var(--NY) - var(--K)), arc to calc(67.5% + var(--K)) var(--NY) of var(--K) ccw, hline to calc(100% - var(--R)), arc to 100% calc(var(--NY) + var(--R)) of var(--R) cw, vline to calc(100% - var(--T) - var(--R)), arc to calc(100% - var(--R)) calc(100% - var(--T)) of var(--R) cw, hline to calc(40% + var(--K)), arc to 40% calc(100% - var(--T) + var(--K)) of var(--K) ccw, vline to calc(100% - var(--R)), arc to calc(40% - var(--R)) 100% of var(--R) cw, hline to calc(8% + var(--R)), arc to 8% calc(100% - var(--R)) of var(--R) cw, vline to calc(100% - var(--T) + var(--K)), arc to calc(8% - var(--K)) calc(100% - var(--T)) of var(--K) ccw, hline to var(--R), arc to 0 calc(100% - var(--T) - var(--R)) of var(--R) cw, vline to var(--R), arc to var(--R) 0 of var(--R) cw, close); } } .org-hero__akzent { position: absolute; top: 0; right: 0; left: calc(67.5% + var(--org-m)); height: calc((100% - var(--zunge)) * .4 - var(--org-m)); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: clamp(12px, 1.6vw, 20px); border-radius: var(--org-r); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); line-height: 1.25; } .org-hero__akzent strong { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; } .org-hero__akzent span { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } @media (max-width: 900px) { .org-hero { --zunge: 32px; } .org-hero__inner { grid-template-columns: 1fr; } .org-hero__titel { max-width: 18ch; } .org-hero__bild { aspect-ratio: 5 / 4; } .org-hero__akzent span { display: none; } .org-hero__akzent strong { font-size: var(--fv-fs-body); } } /* ====================================================================== 4) Sektionsuebergang hell zu Flieder (.org-wechsel) ====================================================================== */ .org-wechsel { padding: 0; --org-hell: var(--fv-papier); --org-flieder: var(--fv-nebel); } .org-wechsel__hell { padding-block: var(--org-pad) calc(var(--org-pad) + 40px); background: var(--org-hell); } .org-wechsel__flieder { position: relative; padding-block: calc(var(--org-pad) + 24px) var(--org-pad); background: var(--org-flieder); } .org-wechsel__kante { position: absolute; left: 0; right: 0; top: 0; height: 0; } .org-wechsel__zunge { --org-fill: var(--org-flieder); bottom: 0; left: calc(var(--fv-page-margin) + 6%); width: min(38%, 440px); height: 72px; } .org-wechsel__kerbe { --org-fill: var(--org-hell); top: 0; right: calc(var(--fv-page-margin) + 8%); width: min(26%, 300px); height: 64px; } .org-wechsel__titel { font-size: var(--fv-fs-h3); margin-bottom: 32px; max-width: 30ch; } .org-wechsel__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; } .org-wechsel__liste h4 { margin-bottom: 8px; } .org-wechsel__liste p { color: var(--fv-schiefer); } @media (max-width: 900px) { .org-wechsel__zunge { left: var(--fv-page-margin); width: 52%; height: 40px; } .org-wechsel__kerbe { right: var(--fv-page-margin); width: 28%; height: 36px; } .org-wechsel__liste { grid-template-columns: 1fr; } } /* ====================================================================== 5) Zahlen und Fakten als verschmolzene Bausteine (.org-fakten) Desktop: A | B B mobil: A A A | C D B C D D ====================================================================== */ .org-fakten { --org-fill: var(--fv-weiss); background: var(--fv-flieder-hell); } .org-fakten__gitter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); grid-template-rows: auto auto; } .org-fakt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: clamp(24px, 3vw, 40px); background: var(--org-fill); } .org-fakt__zahl { font-size: var(--fv-fs-h1); line-height: 1; letter-spacing: var(--fv-ls-display); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; color: var(--fv-nachtblau); } .org-fakt__text { font-size: var(--fv-fs-body); color: var(--fv-schiefer); max-width: 26ch; } .org-fakt__detail { margin-top: auto !important; padding-top: 24px; color: var(--fv-schiefer); font-size: var(--fv-fs-small); max-width: 36ch; } .org-fakt--a { grid-column: 1; grid-row: 1 / 3; border-radius: var(--org-r) 0 var(--org-r) var(--org-r); min-height: 420px; } .org-fakt--b { grid-column: 2 / 4; grid-row: 1; border-radius: 0 var(--org-r) 0 0; margin-left: -1px; min-height: 200px; justify-content: flex-end; } .org-fakt--c { grid-column: 2; grid-row: 2; margin: var(--org-m) var(--org-m) 0; border-radius: var(--org-r); background: var(--fv-nachtblau); justify-content: flex-end; } .org-fakt--c .org-fakt__zahl, .org-fakt--c .org-fakt__text { color: var(--fv-weiss); } .org-fakt--d { grid-column: 3; grid-row: 2; margin-top: -1px; border-radius: 0 0 var(--org-r) var(--org-r); justify-content: flex-end; min-height: 200px; } .org-fakt--a .org-fakt__zahl { color: var(--fv-nachtblau); } .org-fakten .org-kehle { display: none; } .org-fakten__k1 { display: block !important; left: 0; top: 100%; --loch: 100% 100%; } .org-fakten__k3 { display: block !important; right: 100%; top: 0; --loch: 0 100%; } @media (max-width: 767px) { .org-fakten__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; } .org-fakt--a { grid-column: 1 / 3; grid-row: 1; min-height: 0; border-radius: var(--org-r) var(--org-r) var(--org-r) 0; } .org-fakt--b { grid-column: 1; grid-row: 2; margin: -1px 0; border-radius: 0; min-height: 180px; } .org-fakt--c { grid-column: 2; grid-row: 2; margin: var(--org-m) 0 var(--org-m) var(--org-m); } .org-fakt--d { grid-column: 1 / 3; grid-row: 3; margin: 0; border-radius: 0 var(--org-r) var(--org-r) var(--org-r); min-height: 0; } .org-fakt__text { font-size: var(--fv-fs-body); } .org-fakt__zahl { font-size: clamp(2rem, 9vw, 2.75rem); } .org-fakt--b .org-fakt__zahl, .org-fakt--c .org-fakt__zahl { font-size: clamp(1.75rem, 7.6vw, 2.25rem); } .org-fakten__k1 { left: 100%; top: 0; --loch: 100% 100%; } .org-fakten__k2 { display: block !important; left: 100%; bottom: 0; --loch: 100% 0; } .org-fakten__k3 { display: none !important; } } /* ====================================================================== 6) Termin- und Zitat-Karte mit Kehle zur Flaeche (.org-karte) ====================================================================== */ .org-karte { --org-fill: var(--fv-nebel); background: var(--fv-papier); } .org-karte__gruppe { display: grid; grid-template-columns: minmax(0, 1fr); } .org-karte__flaeche { grid-row: 2; padding: clamp(36px, 4.5vw, 64px); background: var(--org-fill); border-radius: var(--org-r); } .org-karte__flaeche h2 { margin-bottom: 14px; max-width: 20ch; } .org-karte__flaeche > p { color: var(--fv-schiefer); font-size: var(--fv-fs-body); max-width: 52ch; } .org-karte__flaeche > p + p { margin-top: 20px; } .org-karte__termin, .org-karte__zitat { position: relative; isolation: isolate; background: var(--org-fill); } /* Termin: waechst oben rechts aus der Flaeche */ .org-karte__termin { grid-row: 1; justify-self: end; width: min(400px, 40%); margin-right: clamp(32px, 5vw, 72px); margin-bottom: -1px; padding: 28px 32px 20px; border-radius: var(--org-r) var(--org-r) 0 0; } .org-karte__datum { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); color: var(--fv-nachtblau); line-height: 1.2; } .org-karte__titel { font-size: var(--fv-fs-h3); margin: 14px 0 4px; } .org-karte__titel a { color: var(--fv-nachtblau); text-decoration: none; } .org-karte__titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--org-r) var(--org-r) 0 0; } .org-karte__titel a:hover { text-decoration: underline; text-underline-offset: .18em; } .org-karte__titel a:focus-visible { outline: none; } .org-karte__titel a:focus-visible::after { outline: 3px solid var(--fv-focus); outline-offset: 4px; } .org-karte__ort { color: var(--fv-schiefer); } /* Zitat: haengt unten links aus der Flaeche */ .org-karte__zitat { grid-row: 3; justify-self: start; width: min(600px, 52%); margin: -1px 0 0 clamp(32px, 5vw, 72px); padding: 20px 36px 32px; border-radius: 0 0 var(--org-r) var(--org-r); } .org-karte__zitat blockquote { margin: 0; padding-left: 20px; } .org-karte__zitat blockquote p { font-size: var(--fv-fs-lead); line-height: 1.45; color: var(--fv-nachtblau); } .org-karte__zitat figcaption { margin-top: 14px; padding-left: 23px; color: var(--fv-schiefer); font-size: var(--fv-fs-small); } @media (max-width: 900px) { .org-karte__termin { width: auto; justify-self: stretch; margin: 0 var(--org-r) -1px; padding: 22px 22px 16px; } .org-karte__flaeche { padding: 28px 24px 32px; } .org-karte__zitat { width: auto; justify-self: stretch; margin: -1px var(--org-r) 0; padding: 18px 22px 26px; } } /* ====================================================================== 7) Footer-Uebergang (.org-footer): Stufenkante wie das Logo-Geruest, Akzentriegel in der Fuge, Goo-Deko ====================================================================== */ .org-footer { --org-fill: var(--fv-nebel); padding-bottom: 0; padding-top: calc(var(--org-pad) + 132px); background: var(--fv-papier); } .org-footer__flaeche { position: relative; background: var(--org-fill); } .org-footer__kante { position: relative; height: 0; } .org-footer__stufe-a { bottom: 0; left: calc(var(--fv-page-margin) + 2%); width: min(48%, 560px); height: 60px; } .org-footer__stufe-b { bottom: 100%; left: 14%; width: 38%; height: 60px; } .org-footer__stufe-c { bottom: 0; right: calc(var(--fv-page-margin) + 4%); width: min(16%, 200px); height: 76px; } .org-footer__riegel { position: absolute; bottom: var(--org-m); left: calc(var(--fv-page-margin) + min(48%, 560px) + 2% + var(--org-k) + var(--org-m) + 16px); width: 112px; height: 36px; border-radius: var(--org-r-s); background: var(--fv-nachtblau); } .org-footer__inhalt { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 40px; padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px); } .org-footer__titel { font-size: var(--fv-fs-h3); margin-bottom: 12px; max-width: 26ch; } .org-footer__marke p { color: var(--fv-schiefer); max-width: 44ch; } .org-footer__marke p + p { margin-top: 24px; } .org-footer__spalte h3 { font-size: var(--fv-fs-button); font-weight: var(--fv-fw-semibold); margin-bottom: 12px; } .org-footer__spalte p, .org-footer__spalte li { color: var(--fv-schiefer); } .org-footer__spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .org-footer__spalte a { color: var(--fv-nachtblau); text-decoration: none; } .org-footer__spalte a:hover { color: var(--fv-nachtblau); text-decoration: underline; text-underline-offset: .18em; } /* Goo-Deko: SVG-Filter verschmilzt Bloecke zu Kehlen. Nur dekorativ (aria-hidden), nie auf Text. Ohne Filter: einfache runde Bloecke. */ .org-goo { position: absolute; right: calc(var(--fv-page-margin) + 2%); bottom: 32px; width: 220px; height: 150px; filter: url(#org-goo); pointer-events: none; } .org-goo i { position: absolute; display: block; border-radius: var(--fv-radius-16); background: var(--fv-nebel); } .org-goo i:nth-child(1) { left: 0; top: 40px; width: 120px; height: 72px; } .org-goo i:nth-child(2) { left: 104px; top: 0; width: 64px; height: 92px; } .org-goo i:nth-child(3) { left: 150px; top: 70px; width: 70px; height: 44px; } .org-goo i:nth-child(4) { left: 30px; top: 104px; width: 140px; height: 40px; } .org-goo i:nth-child(5) { left: 180px; top: 8px; width: 36px; height: 36px; } @media (prefers-reduced-motion: no-preference) { .org-goo i:nth-child(5) { animation: org-goo-drift 9s var(--fv-easing) infinite alternate; } .org-goo i:nth-child(3) { animation: org-goo-drift-b 11s var(--fv-easing) infinite alternate; } } @keyframes org-goo-drift { from { transform: translate(0, 0); } to { transform: translate(-46px, 34px); } } @keyframes org-goo-drift-b { from { transform: translate(0, 0); } to { transform: translate(-30px, -18px); } } @media (max-width: 900px) { .org-footer__inhalt { grid-template-columns: 1fr 1fr; } .org-footer__marke { grid-column: 1 / -1; } .org-footer__stufe-a { left: var(--fv-page-margin); width: 58%; height: 36px; } .org-footer__stufe-b { left: 22%; width: 44%; height: 36px; } .org-footer__stufe-c { right: var(--fv-page-margin); width: 18%; height: 44px; } .org-footer__riegel { left: auto; right: calc(var(--fv-page-margin) + 18% + var(--org-k) + var(--org-m)); width: 56px; height: 28px; } .org-goo { display: none; } } @media (max-width: 520px) { .org-footer__inhalt { grid-template-columns: 1fr; } } /* ====================================================================== 8) Mobil-Verhalten: Varianten in 390-px-Rahmen (nur Speedbuild) ====================================================================== */ .org-mobil { background: var(--fv-flieder-hell); } .org-mobil__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 48px 32px; } .org-mobil__geraet { width: 406px; max-width: 100%; padding: 8px; border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); margin-bottom: 20px; } .org-mobil__geraet iframe { display: block; width: 390px; max-width: 100%; height: 720px; border: 0; border-radius: var(--fv-radius-24); background: var(--fv-papier); } .org-mobil__titel { font-size: var(--fv-fs-h3); margin-bottom: 6px; } .org-mobil__item p { color: var(--fv-schiefer); max-width: 46ch; } @media (max-width: 900px) { .org-mobil__liste { grid-template-columns: 1fr; gap: 24px; } .org-mobil__geraet { display: none; } } /* sections/package-cards.css */ /* package-cards (Brandmanual v1.0): Pakete als .fv-card mit Verb-Baustein, Preis in tabular-nums, Leistungen als Checkliste (8.7), Button .fv-btn. Mit Formular: Radio-Karten (Schritt 1) plus Angaben (Schritt 2); gewaehlte Karte = Nachtblau. */ .c-pkg__head { max-width: 760px; margin-bottom: var(--fv-space-48); } .c-pkg__intro { margin: var(--fv-space-16) 0 0; max-width: 56ch; font-size: var(--fv-fs-lead); color: var(--fv-fg-muted); } .c-pkg__grid { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; margin: 0; padding: 0; align-items: stretch; } .c-pkg__item { display: flex; } .c-pkg__card { --pk: var(--accent, var(--fv-purpur)); position: relative; display: flex; flex-direction: column; width: 100%; transition: background-color var(--fv-duration) var(--fv-easing); } .c-pkg__badge { align-self: flex-start; margin: 0 0 var(--fv-space-16); } .c-pkg__name { display: block; margin: 0 0 var(--fv-space-16); min-height: calc(2em * var(--fv-lh-card)); font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-card); color: inherit; } /* min. zwei Zeilen: Preise einer Reihe stehen auf einer Linie */ .c-pkg__price { display: block; margin: 0; font-size: var(--fv-fs-zahl); font-weight: var(--fv-fw-bold); line-height: 1.05; letter-spacing: var(--fv-ls-h2); font-variant-numeric: tabular-nums; } .c-pkg__pnote { display: block; margin: var(--fv-space-4) 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-pkg__features { display: grid; gap: var(--fv-space-12); margin: var(--fv-space-32) 0 0; padding: 0; list-style: none; } .c-pkg__feature { position: relative; display: block; min-block-size: 24px; padding-inline-start: 32px; font-size: 1rem; font-weight: var(--fv-fw-regular); line-height: 1.45; } /* Haken frei stehend, ohne Hinterlegung (Anmerkung #13, R6) */ .c-pkg__feature::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1px; inline-size: 22px; block-size: 22px; background-color: var(--fv-purpur); -webkit-mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; mask: url("../assets/icons/lucide/check.svg") center / contain no-repeat; } .c-pkg__cta { margin: auto 0 0; padding-top: var(--fv-space-24); } .c-pkg__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } /* hervorgehoben (Uebersicht) bzw. gewaehlt (Formular): Nachtblau */ .c-pkg:not(.c-pkg--form) .c-pkg__card.is-featured, .c-pkg__card:has(.c-pkg__radio:checked) { background-color: var(--fv-nachtblau); color: var(--fv-weiss); --fv-focus: var(--fv-rosa); } :is(.c-pkg:not(.c-pkg--form) .is-featured, .c-pkg__card:has(.c-pkg__radio:checked)) .c-pkg__pnote { color: var(--fv-weiss); } :is(.c-pkg:not(.c-pkg--form) .is-featured, .c-pkg__card:has(.c-pkg__radio:checked)) .c-pkg__badge { background: var(--fv-weiss); color: var(--fv-nachtblau); } :is(.c-pkg:not(.c-pkg--form) .is-featured, .c-pkg__card:has(.c-pkg__radio:checked)) .c-pkg__feature::after { background-color: var(--fv-rosa); } :is(.c-pkg:not(.c-pkg--form) .is-featured, .c-pkg__card:has(.c-pkg__radio:checked)) .c-pkg__icon { color: var(--fv-rosa); } .c-pkg:not(.c-pkg--form) .is-featured .fv-btn { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } /* Formular */ .c-pkg__form { display: grid; gap: clamp(40px, 5vw, 64px); } .c-pkg__dummy { justify-self: start; margin: 0; padding: 8px 12px; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); border-radius: var(--fv-radius-12); background: var(--fv-nebel); } .c-pkg__set { margin: 0; padding: 0; border: 0; min-width: 0; } .c-pkg__legend { display: flex; align-items: center; gap: 14px; margin-bottom: var(--fv-space-24); padding: 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); letter-spacing: 0; } .c-pkg--form .c-pkg__card { cursor: pointer; } .c-pkg__radio { position: absolute; opacity: 0; width: 1px; height: 1px; } .c-pkg__card:has(.c-pkg__radio:focus-visible) { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-pkg__pick { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--fv-space-24); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-pkg__tick { position: relative; width: 24px; height: 24px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); flex: none; } .c-pkg__pick-on { display: none; } .c-pkg__card:has(.c-pkg__radio:checked) .c-pkg__tick { background: var(--fv-rosa); } .c-pkg__card:has(.c-pkg__radio:checked) .c-pkg__tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--fv-nachtblau); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .c-pkg__card:has(.c-pkg__radio:checked) .c-pkg__pick-on { display: inline; } .c-pkg__card:has(.c-pkg__radio:checked) .c-pkg__pick-off { display: none; } .c-pkg__fields { padding: clamp(28px, 4vw, 56px); border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-pkg__fields .c-pkg__legend { float: left; width: 100%; } .c-pkg__fields .c-pkg__legend + * { clear: both; } .c-pkg__ftext { max-width: 64ch; margin-bottom: var(--fv-space-24); font-size: var(--fv-fs-body); } .c-pkg__row { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-pkg__field { display: grid; gap: 8px; } .c-pkg__field--wide { grid-column: 1 / -1; } .c-pkg__field label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); } .c-pkg__opt { font-weight: var(--fv-fw-regular); color: var(--fv-fg-muted); } .c-pkg__field input, .c-pkg__field select, .c-pkg__field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--fv-nachtblau); padding: 13px 16px; border: 0; border-radius: var(--fv-radius-12); background: var(--fv-nebel); transition: border-color .2s, box-shadow .2s; } .c-pkg__field textarea { resize: vertical; min-height: 120px; } .c-pkg__field input:focus-visible, .c-pkg__field select:focus-visible, .c-pkg__field textarea:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-pkg__check { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--fv-space-24); font-size: var(--fv-fs-small); cursor: pointer; } .c-pkg__check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--fv-purpur); } .c-pkg__check .c-prose { font-size: var(--fv-fs-small); } .c-pkg__submit { margin: var(--fv-space-24) 0 0; } .c-pkg__submit .c-btn[aria-disabled="true"] { cursor: not-allowed; } @media (max-width: 767px) { .c-pkg__row { grid-template-columns: 1fr; } .c-pkg__name { min-height: 0; } .c-pkg__submit .c-btn { width: 100%; justify-content: center; } } /* optionales Icon: frei stehend, ohne Kachel */ .c-pkg__icon { margin-bottom: var(--fv-space-16); color: var(--fv-purpur); } @media (min-width: 900px) { .c-pkg__name { min-block-size: 2.4em; } } /* sections/people-grid.css */ /* people-grid (Brandmanual v1.0): Portraetflaechen Radius 40, Baustein in Verbfarbe an der Ecke. Ohne Foto: Platzhalter aus abgerundeten Bausteinen (Kopf, Schultern), gekennzeichnet "Foto folgt". Layout karten (Raster) oder kompakt (Karten in Zeilen). */ .c-people__grid { display: grid; gap: var(--fv-space-48) var(--fv-fuge); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .c-person { position: relative; --pv: var(--fv-verb-verbinden); --pv-soft: var(--fv-nebel); --pv-ink: var(--fv-nachtblau); } .c-person[data-verb="foerdern"] { --pv: var(--fv-verb-foerdern); } .c-person[data-verb="unterstuetzen"] { --pv: var(--fv-verb-unterstuetzen); } .c-person[data-verb="entwickeln"] { --pv: var(--fv-verb-entwickeln); } .c-person[data-verb="werben"] { --pv: var(--fv-verb-werben); } /* ohne verb_key rotieren die Bausteinfarben */ .c-person:not([data-verb]):nth-child(5n+2) { --pv: var(--fv-verb-entwickeln); } .c-person:not([data-verb]):nth-child(5n+3) { --pv: var(--fv-verb-werben); } .c-person:not([data-verb]):nth-child(5n+4) { --pv: var(--fv-verb-unterstuetzen); } .c-person:not([data-verb]):nth-child(5n+5) { --pv: var(--fv-verb-foerdern); } .c-person__media { position: relative; aspect-ratio: 4 / 5; margin-bottom: var(--fv-space-24); } .c-person__mask { position: absolute; inset: 0; overflow: hidden; border-radius: var(--fv-radius-40); background: var(--fv-nebel); } .c-person__mask img { width: 100%; height: 100%; object-fit: cover; } /* Baustein in Verbfarbe: lugt unten rechts hinter der Flaeche hervor */ .c-person__block { position: absolute; inset-inline-end: calc(-1 * var(--fv-space-8)); inset-block-end: calc(-1 * var(--fv-space-8)); inline-size: 42%; block-size: 26%; border-radius: var(--fv-radius-24); background: var(--pv); z-index: -1; } /* Platzhalter: Verbfarbe als Flaeche, Kopf und Schultern als abgerundete Bausteine */ .c-person__ph { position: absolute; inset: 0; background: var(--pv); } .c-person__head, .c-person__body-shape { position: absolute; inset-inline-start: 50%; background: var(--fv-weiss); opacity: .92; transform: translateX(-50%); } .c-person__head { inset-block-start: 22%; inline-size: 34%; aspect-ratio: 1; border-radius: var(--fv-radius-24); } .c-person__body-shape { inset-block-end: 0; inline-size: 66%; block-size: 38%; border-radius: var(--fv-radius-40) var(--fv-radius-40) 0 0; } .c-person__ph-label { position: absolute; inset-inline-start: var(--fv-space-16); inset-block-start: var(--fv-space-16); } /* Initialen-Monogramm statt Silhouette, wenn bewusst kein Foto hinterlegt ist (gleiches Muster wie .c-portal-user__avatar) */ .c-person__initialen { position: absolute; inset: 0; display: grid; place-items: center; background: var(--fv-nachtblau); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h1); letter-spacing: 0; } .c-people--kompakt .c-person__initialen { font-size: var(--fv-fs-h3); } .c-person__name { margin: 0; font-size: var(--fv-fs-h3); line-height: 1.2; } .c-person__role { margin: var(--fv-space-8) 0 var(--fv-space-12); font-size: var(--fv-fs-small); } .c-person__role:not([data-verb])::before { background-color: var(--pv); } .c-person.is-pending .c-person__name { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); color: var(--fv-fg-muted); } .c-person__text { margin: var(--fv-space-8) 0 0; color: var(--fv-fg-muted); } .c-person__mail { margin: var(--fv-space-8) 0 0; font-weight: var(--fv-fw-bold); } .c-person__mail a { color: var(--fv-nachtblau); text-decoration: underline 2px var(--fv-rosa); text-underline-offset: .2em; } .c-person__note { margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-body); } .c-people__more { margin-top: var(--fv-space-48); } /* kompakt: Karten in Zeilen */ .c-people--kompakt .c-people__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--fv-fuge); } .c-people--kompakt .c-person { display: grid; grid-template-columns: 104px 1fr; gap: var(--fv-space-24); align-items: center; padding: var(--fv-space-16) var(--fv-space-24) var(--fv-space-16) var(--fv-space-16); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-people--kompakt .c-person__media { margin: 0; } .c-people--kompakt .c-person__mask { border-radius: var(--fv-radius-16); } .c-people--kompakt .c-person__block { display: none; } .c-people--kompakt .c-person__head { border-radius: var(--fv-radius-12); } .c-people--kompakt .c-person__body-shape { border-radius: var(--fv-radius-16) var(--fv-radius-16) 0 0; } .c-people--kompakt .c-person__ph-label { display: none; } .c-people--kompakt .c-person__name { font-size: var(--fv-fs-lead); } .c-people--kompakt .c-person__role { margin-block: var(--fv-space-4) 0; } @media (min-width: 900px) { .c-people--kompakt .c-person:only-child { grid-column: 1 / -1; max-width: 760px; grid-template-columns: 150px 1fr; gap: var(--fv-space-32); padding: var(--fv-space-24) var(--fv-space-32) var(--fv-space-24) var(--fv-space-24); } } @media (min-width: 1100px) { .c-people--karten .c-people__grid { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 520px) { .c-people--karten .c-people__grid { grid-template-columns: 1fr 1fr; gap: var(--fv-space-32) 12px; } .c-people--karten .c-person__name { font-size: var(--fv-fs-body); } .c-person__ph-label { inset-inline-start: var(--fv-space-8); inset-block-start: var(--fv-space-8); } } /* dunkle und Rosa-Flaechen */ :is(.is-dark, .is-nacht) .c-person__mail a { color: var(--fv-weiss); } :is(.is-dark, .is-nacht) .c-person__role { color: var(--fv-weiss); } :is(.is-dark, .is-nacht) .c-person__block { background: var(--pv); } :is(.is-dark, .is-nacht) .c-person[data-verb="foerdern"] .c-person__role::before { background-color: var(--fv-weiss); } :is(.is-dark, .is-nacht) .c-person[data-verb="foerdern"] { --pv: var(--fv-purpur); } :is(.is-dark, .is-nacht) .c-person__text { color: var(--fv-weiss); } .c-people--kompakt:is(.is-dark, .is-nacht) .c-person { color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht).c-people--kompakt .c-person :is(.c-person__name, .c-person__role, .c-person__text, .c-person__mail a, .c-person__note) { color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht).c-people--kompakt .c-person__text { color: var(--fv-schiefer); } :is(.is-dark, .is-nacht).c-people--kompakt .c-person[data-verb="foerdern"] .c-person__role::before { background-color: var(--fv-nachtblau); } /* sections/picture.css */ /* Responsives Bild mit Fokuspunkt, optionaler Bildflaeche Radius 40 und LQIP-Hintergrund. Masken (clipPath) kommen aus partials/masks.html (muss auf der Seite eingebunden sein). */ .c-pic { display: block; position: relative; overflow: hidden; background-color: var(--fv-nebel); border-radius: var(--fv-radius-40); } .c-pic__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .c-pic--16x9 { aspect-ratio: 16 / 9; } .c-pic--4x5 { aspect-ratio: 4 / 5; } .c-pic--1x1 { aspect-ratio: 1 / 1; } /* LQIP: Data-URI als --lqip am Element setzen (aus *-lqip.txt), z. B. style="--lqip:url(data:...)" */ .c-pic[style*="--lqip"] { background: var(--lqip) center / cover no-repeat; } /* Bildflaechen: Klassen c-mask--nische|winkel|mosaik|hoch aus css/sections.css (dort einzige Definition) */ /* Bild-Fade (Brandmanual Verlauf 2) fuer Text auf Fotos; Fotos sonst ohne Farbfilter */ .c-pic--veil::after { content: ""; position: absolute; inset: 0; background-image: var(--fv-gradient-image-fade); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .c-pic__img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); } a:hover > .c-pic .c-pic__img, .c-pic--zoom:hover .c-pic__img { transform: scale(1.03); } } /* sections/pillars.css */ /* pillars: Verb-Karten (.fv-card) mit Icon-Kachel in Verbfarbe (Handoff 8.5, 11) */ .c-pillars__grid { display: grid; gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .c-pillar { display: flex; flex-direction: column; min-height: 280px; } .c-pillar__icon { margin-bottom: auto; } .c-pillar__verb { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); margin: var(--fv-space-32) 0 var(--fv-space-8); } .c-pillar__text { font-size: var(--fv-fs-body); color: var(--fv-schiefer); } .c-pillar__links { list-style: none; margin: var(--fv-space-12) 0 0; padding: 0; } .c-pillar__link { font-weight: var(--fv-fw-bold); } /* sections/post-detail.css */ /* post-detail: Beitragsseite. Bildflaeche Radius 40 (Handoff), Quellenhinweis als ruhige Karte */ .c-post-detail { padding-top: clamp(40px, 5vw, 72px); } .c-post-detail__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .c-post-detail__figure { position: relative; margin: 0; padding: 0; } .c-post-detail__figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fv-radius-40); } .c-post-detail:not(:has(.c-post-detail__figure)) .c-post-detail__wrap { grid-template-columns: minmax(0, 1fr); max-width: var(--container-narrow); } .c-post-detail__meta { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-16); margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-post-detail__meta span { align-self: center; } .c-post-detail__body { max-width: var(--fv-measure); font-size: var(--fv-fs-body); } .c-post-detail__source { margin-top: var(--fv-space-48); padding: var(--fv-space-16) var(--fv-space-24); background: var(--fv-papier); border-radius: var(--fv-radius-16); font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-post-detail__source summary { cursor: pointer; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-post-detail__source summary:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-post-detail__source p { margin: var(--fv-space-8) 0 0; } .c-post-detail .c-actions { margin-top: var(--fv-space-48); } .c-post-detail__related { margin-top: var(--section-pad); } .c-post-detail__related .c-section-head__title { margin: 0 0 var(--fv-space-32); } @media (max-width: 900px) { .c-post-detail__wrap { grid-template-columns: 1fr; } .c-post-detail__figure img { aspect-ratio: 16 / 10; } } /* sections/post-list.css */ /* post-list: News-Karten (Liste und Teaser) als .fv-card (Handoff 8.5). Bildflaeche Radius 40 [Welle 3 gegen Figma pruefen], Hover: Titel Rosa-Unterstrich, max. 4 px anheben. */ .c-feed--liste .c-feed__list { display: grid; gap: var(--fv-fuge); } .c-feed--teaser .c-feed__list { display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-news { position: relative; display: grid; height: 100%; padding: 0; overflow: hidden; transition: transform var(--fv-duration) var(--fv-easing); } .c-news:hover { transform: translateY(-4px); } .c-news:focus-within { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-news__media { position: relative; overflow: hidden; background: var(--fv-nebel); } .c-news__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .c-news__body { display: flex; flex-direction: column; gap: var(--fv-space-12); padding: var(--fv-card-padding); } .c-news__meta { display: flex; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-16); margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-news__cat { align-self: center; } .c-news__title { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); } .c-news__title a { color: var(--fv-nachtblau); text-decoration: underline 2px transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-news__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .c-news:hover .c-news__title a, .c-news__title a:focus-visible { text-decoration-color: var(--fv-rosa); } .c-news__title a:focus-visible { outline: none; } .c-news__teaser { margin: 0; color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .c-feed--liste .c-news { grid-template-columns: minmax(220px, 34%) 1fr; } .c-feed--liste .c-news__body { justify-content: center; } .c-feed--teaser .c-news { grid-template-rows: auto 1fr; } .c-feed--teaser .c-news__media { aspect-ratio: 3 / 2; } .c-feed__all { margin: 0; font-weight: var(--fv-fw-bold); } @media (min-width: 900px) { .c-section-head--split .c-feed__all { grid-column: 2; justify-self: end; } } @media (max-width: 1024px) { .c-feed--teaser .c-feed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .c-feed--teaser .c-feed__list { grid-template-columns: 1fr; } .c-feed--liste .c-news { grid-template-columns: 1fr; grid-template-rows: 190px 1fr; } } .c-news__meta time + .c-news__cat::before, .c-post-detail__meta time + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--fv-space-12); border-radius: 2px; background: var(--accent, var(--fv-schiefer)); vertical-align: middle; } @media (prefers-reduced-motion: reduce) { .c-news:hover { transform: none; } } /* Teaser mit drei Karten im Zweierraster (768 bis 1024): dritte Karte nicht verwaist, sondern quer ueber beide Spalten (Welle A2) */ @media (min-width: 768px) and (max-width: 1024px) { .c-feed--teaser .c-feed__list > li:nth-child(3):last-child { grid-column: 1 / -1; } .c-feed--teaser .c-feed__list > li:nth-child(3):last-child .c-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; } .c-feed--teaser .c-feed__list > li:nth-child(3):last-child .c-news__media { aspect-ratio: auto; min-block-size: 100%; } } /* sections/prize-hero.css */ /* prize-hero: Seitenkopf Bereich Preise (Welle 2, Agent w2-c-preise, Brandmanual v1.0). --stage: dunkler Kopf der Uebersicht /preise/ (Alexander mag ihn dunkel): Nachtblau mit Glow (.is-dark), Foto links mit Bild-Fade, Verb-Tag "entwickeln" ueber der h1. Keine Eigenfarbe. --object: Preis-Unterseiten neutral auf Weiss, links Titel und Eckdaten, rechts das vorgerenderte Preis-Objekt vor einem Baustein in Papier. Grosse Zahlen in Familjen [zu bestaetigen, A8]. Nur --fv-*-Tokens. */ .c-prize-hero { position: relative; isolation: isolate; overflow: hidden; } .c-prize-hero__inner { position: relative; display: grid; align-items: center; } /* Brotkrumen: gemeinsamer Stil .c-crumbs (css/sections.css); hier nur der Abstand */ .c-prize-hero .c-prize-hero__crumbs { margin-bottom: var(--fv-space-32); } .c-prize-hero__title { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); color: var(--fv-fg); text-wrap: balance; hyphens: manual; } .c-prize-hero__intro { margin: 0; max-width: 46ch; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); text-wrap: pretty; } .c-prize-hero__actions { margin-top: var(--fv-space-32); } /* ---------------------------------------------------------------- Buehne (Uebersicht): Nachtblau mit Glow */ .c-prize-hero--stage { min-height: clamp(560px, 46vw, 720px); display: flex; align-items: center; } .c-prize-hero__stage { position: absolute; z-index: -1; inset: var(--fv-space-24) auto var(--fv-space-24) var(--fv-space-24); width: calc(50% + 48px); /* endet vor der Textspalte (480 + Fuge), Text liegt nie auf dem Foto */ border-radius: var(--fv-radius-40); overflow: hidden; } .c-prize-hero__stage picture { display: contents; } .c-prize-hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } .c-prize-hero__stage::after { content: ""; position: absolute; inset: 0; background: var(--fv-gradient-image-fade); pointer-events: none; } .c-prize-hero--stage .c-prize-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); width: 100%; padding-block: var(--fv-space-96); } .c-prize-hero--stage .c-prize-hero__copy { grid-column: 2; } /* Baustein-Akzent ueber dem Text: Balken in Rosa (auf Nachtblau lesbar), kein Kreis, keine Linie */ .c-prize-hero--stage .c-prize-hero__copy::before { content: ""; display: block; width: 64px; height: 16px; margin-bottom: var(--fv-space-32); border-radius: var(--fv-radius-8); background: var(--fv-rosa); } /* ---------------------------------------------------------------- Objekt (Preis-Unterseiten): neutral Weiss */ .c-prize-hero--object { padding-block: var(--fv-space-48) var(--fv-space-64); } .c-prize-hero--object .c-prize-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--fv-space-64); } .c-prize-hero__facts { display: flex; flex-wrap: wrap; gap: var(--fv-space-16); margin: var(--fv-space-48) 0 0; padding: 0; } .c-prize-hero__fact { min-width: 0; padding: var(--fv-space-16) var(--fv-space-24); border-radius: var(--fv-radius-16); background: var(--fv-papier); } .c-prize-hero__fact dt { margin-bottom: var(--fv-space-4); font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* Zahlen: Familjen Bold in Nachtblau [zu bestaetigen, A8] */ .c-prize-hero__fact dd { margin: 0; font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums lining-nums; } .c-prize-hero__object { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: end; } .c-prize-hero__object picture { display: contents; } .c-prize-hero__img { position: relative; z-index: 1; width: 100%; height: auto; animation: ph-float 7s ease-in-out infinite; will-change: transform; } /* Bausteine hinter dem Objekt: grosser Papier-Baustein, kleiner Violett-Baustein (Verb entwickeln) mit Fuge */ .c-prize-hero__halo { position: absolute; inset: 20% 4% 6% 14%; border-radius: var(--fv-radius-64); background: var(--fv-papier); } .c-prize-hero__halo2 { position: absolute; left: 0; top: 20%; width: clamp(48px, 11%, 64px); aspect-ratio: 1; border-radius: var(--fv-radius-8); background: var(--fv-violett); } @keyframes ph-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .c-prize-hero__img { animation: none; } } /* ---------------------------------------------------------------- schmal */ @media (max-width: 900px) { .c-prize-hero--stage { display: block; min-height: 0; padding-top: var(--fv-space-16); } .c-prize-hero__stage { position: relative; inset: auto; width: auto; margin-inline: var(--fv-page-margin); height: 62vw; } .c-prize-hero--stage .c-prize-hero__inner { grid-template-columns: 1fr; padding-block: var(--fv-space-32) var(--fv-space-64); } .c-prize-hero--stage .c-prize-hero__copy { grid-column: 1; } .c-prize-hero--stage .c-prize-hero__copy::before { display: none; } .c-prize-hero--object .c-prize-hero__inner { grid-template-columns: 1fr; gap: 0; } .c-prize-hero--object .c-prize-hero__object { order: -1; justify-self: center; max-width: 320px; margin: 0 0 var(--fv-space-16); } .c-prize-hero--object .c-prize-hero__copy { display: contents; } .c-prize-hero--object .c-prize-hero__crumbs { order: -2; } .c-prize-hero--object .c-prize-hero__crumbs { margin-bottom: var(--fv-space-16); } } @media (max-width: 767px) { .c-prize-hero--object { padding-top: var(--fv-space-24); } .c-prize-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--fv-space-32); } .c-prize-hero__fact { padding: var(--fv-space-12) var(--fv-space-16); } } /* Responsive-QA Runde 8: Mobil Objekt und Buehne kleiner, damit Titel und Einleitung im ersten Bildschirm stehen */ @media (max-width: 600px) { .c-prize-hero--object .c-prize-hero__object { max-width: 210px; margin-bottom: var(--fv-space-8); } .c-prize-hero__stage { height: 52vw; } .c-prize-hero--stage .c-prize-hero__inner { padding-block: var(--fv-space-24) var(--fv-space-48); } } /* sections/prize-trio.css */ /* Sektion prize-trio: drei Kacheln Violett, Purpur, Nachtblau (Radius 24, Fuge 16), Preisname Familjen Bold (R8), eine Zeile Beschreibung. Mobil untereinander. */ .fv-prize-trio { margin-top: 112px; list-style: none; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(3, minmax(0, 1fr)); } .fv-prize { display: flex; flex-direction: column; gap: var(--fv-space-12); } .fv-prize__tile { position: relative; display: grid; place-items: end center; aspect-ratio: 4 / 5; overflow: visible; min-block-size: 0; border-radius: var(--fv-radius-24); background: var(--fv-nachtblau); } .fv-prize__tile--violett { background: var(--fv-violett); } .fv-prize__tile--purpur { background: var(--fv-purpur); } .fv-prize__tile--nachtblau { background: var(--fv-nachtblau); } .fv-prize__tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--fv-gradient-glow); pointer-events: none; } .fv-prize__img { position: absolute; z-index: 1; inset-inline: 5%; inset-block-end: 0; inline-size: 90%; block-size: 116%; max-block-size: none; object-fit: contain; object-position: bottom center; } .fv-prize__ph { position: relative; z-index: 1; display: grid; place-items: center; width: 62%; height: 78%; margin-bottom: var(--fv-space-24); border-radius: var(--fv-radius-40); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); text-align: center; padding: var(--fv-space-8); } .fv-prize__name { margin: var(--fv-space-8) 0 0; font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h3); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); color: var(--fv-nachtblau); } .fv-prize__cats { margin: 0; font-size: var(--fv-fs-body); color: var(--fv-schiefer); } @media (min-width: 1000px) { .fv-prize-sec__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; max-width: none; } .fv-prize-sec__head .c-section-head__intro { margin: 0; } } .fv-prize > .fv-verbtag { margin: 0; } @media (max-width: 720px) { .fv-prize-trio { grid-template-columns: 1fr; row-gap: 72px; } .fv-prize__tile { aspect-ratio: 16 / 10; } .fv-prize__ph { height: 70%; } } /* sections/process-steps.css */ /* process-steps (Brandmanual v1.0): nummerierte Schritte als Karten (.fv-card) mit Zahlen-Baustein (Radius 12, Verbfarbe), Fuge 16 px. Optional Formular (Attrappe). */ .c-process__head { max-width: 760px; margin-bottom: var(--fv-space-48); } .c-process { --ps: var(--fv-purpur); --ps-on: var(--fv-weiss); } .c-process[data-verb="foerdern"] { --ps: var(--fv-nachtblau); } .c-process[data-verb="unterstuetzen"] { --ps: var(--fv-rosa); --ps-on: var(--fv-nachtblau); } .c-process[data-verb="entwickeln"] { --ps: var(--fv-violett); } .c-process[data-verb="werben"] { --ps: var(--fv-pflaume); --ps-on: var(--fv-nachtblau); } .c-process__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .c-process__step { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-12); padding: var(--fv-card-padding); border-radius: var(--fv-radius-24); background: var(--fv-weiss); color: var(--fv-nachtblau); box-shadow: var(--fv-shadow-card); } .c-process__num { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; inline-size: 56px; block-size: 56px; border-radius: var(--fv-radius-12); background: var(--ps); color: var(--ps-on); font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; margin-bottom: var(--fv-space-12); } .c-process__step:first-child .c-process__num { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-process__title { font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-card); margin: 0; color: var(--fv-nachtblau); } /* ui-senior: Zeitpunkt (Vorher, Am Tag, Danach) als ruhige Meta-Zeile ueber dem Titel statt Badge darunter: Lesereihenfolge Meta, Titel, Text */ .c-process__meta { order: -1; align-self: flex-start; margin: 0; padding: 0; background: none; color: var(--fv-schiefer); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-small); } .c-process__text { font-size: var(--fv-fs-body); color: var(--fv-fg-muted); } .c-process__text a, .c-process__form-text a { overflow-wrap: anywhere; hyphens: none; } .c-process :is(.c-process__title, .c-process__text, .c-process__step) { --fv-fg-muted: var(--fv-schiefer); } :is(.is-dark, .is-nacht) .c-process__step .c-process__title { color: var(--fv-nachtblau); } :is(.is-dark, .is-nacht) .c-process__step .c-process__text, :is(.is-dark, .is-nacht) .c-process__step .c-process__text :is(p, li, a) { color: var(--fv-schiefer); } /* Formular */ .c-process__form { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(40px, 5vw, 72px); scroll-margin-top: calc(var(--header-h) + 24px); } .c-process__form-title { font-size: var(--fv-fs-h2); letter-spacing: 0; line-height: 1.15; margin: 0 0 var(--fv-space-16); } .c-process__form-text { font-size: var(--fv-fs-body); } .c-process__form-text ul { list-style: none; padding: 0; } .c-process__form-text li { padding: 10px 0; overflow-wrap: anywhere; } .c-process__panel { padding: clamp(24px, 3vw, 48px); border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-process__dummy { display: flex; gap: 12px; align-items: center; margin: 0 0 var(--fv-space-24); padding: 12px 16px; border-radius: var(--fv-radius-16); background: var(--fv-nebel); font-size: var(--fv-fs-small); font-weight: var(--fw-bold); color: var(--fv-fg-muted); } .c-process__dummy::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--fv-violett); } .c-process__fields { display: grid; gap: 20px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-process__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .c-process__field.is-wide { grid-column: 1 / -1; } .c-process__field label { font-size: var(--fv-fs-small); font-weight: var(--fw-bold); color: var(--fv-nachtblau); } .c-process__req { color: var(--fv-purpur); } .c-process__hint { order: 3; margin: 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-process__field input, .c-process__field select, .c-process__field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--fv-nachtblau); border: 0; border-radius: var(--fv-radius-12); background: var(--fv-nebel); padding: 13px 16px; min-height: 52px; transition: border-color .2s, box-shadow .2s; } .c-process__field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--fv-nachtblau) 50%), linear-gradient(135deg, var(--fv-nachtblau) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; } .c-process__field textarea { resize: vertical; min-height: 150px; line-height: var(--fv-lh-body); } .c-process__field input:focus-visible, .c-process__field select:focus-visible, .c-process__field textarea:focus-visible { outline: 3px solid var(--fv-nachtblau); outline-offset: 2px; } .c-process__privacy { margin-top: var(--fv-space-24); font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-process__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16); margin: var(--fv-space-24) 0 0; } .c-process__actions .c-btn[aria-disabled="true"] { cursor: not-allowed; } .c-process__req-note { font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } @media (max-width: 1024px) { .c-process__form { grid-template-columns: 1fr; } } @media (max-width: 767px) { .c-process__fields { grid-template-columns: 1fr; } .c-process__panel { border-radius: var(--fv-radius-24); } } /* sections/sawir.css */ /* So arbeiten wir (sections/sawir-chapter.html, js/sawir/*). Besitzer: w2-f-erzaehl (vorher sawir-lead). Ein fixiertes Canvas (.c-sawir-canvas, von js/sawir/stage.js erzeugt) liegt hinter allen Kapiteln, die Kapitel sind transparent. Zustände am : .sawir-js (Engine läuft), .sawir-3d (erstes Bild steht), .sawir-still (Fallback: reduzierte Bewegung, kein WebGL2, Fehler, ?sawir=still). Ohne .sawir-js oder mit .sawir-still: Kapitel zweispaltig mit SVG-Standbild. Brandmanual v1.0: Bühne Papier, Materialien nur in den fünf Markenfarben (stage.js liest --sawir-*), Karten und Etiketten als .fv-card-Bausteine (Weiß, Radius, Kartenschatten), kein Glas, keine Kreise. */ :root { --sawir-paper: var(--fv-papier); --sawir-paper-2: var(--fv-weiss); --sawir-ink: var(--fv-nachtblau); --sawir-muted: var(--fv-schiefer); /* Materialfarben der 3D-Szenen: nur Markenfarben. Weiche Töne (…-soft) = Bühnenfarbe, damit Glows unsichtbar werden. */ --sawir-accent: var(--fv-violett); --sawir-lilac: var(--fv-rosa); --sawir-lilac-soft: var(--fv-papier); --sawir-fresh: var(--fv-purpur); --sawir-fresh-soft: var(--fv-papier); --sawir-line: var(--fv-nachtblau); /* vier Mitgliedergruppen: Studierende, Lehrende, Fachfördervereine, Förderer */ --sawir-g1: var(--fv-rosa); --sawir-g2: var(--fv-violett); --sawir-g3: var(--fv-pflaume); --sawir-g4: var(--fv-nachtblau); --sawir-step-h: 118svh; } body:has(.c-sawir) { background: var(--sawir-paper); } /* ---------------------------------------------------------------- Kopf bleibt stehen (Wunsch Alexander, 06.10.2026) js/motion.js blendet den Header beim Runterscrollen global aus (.is-hidden). Auf dieser Seite bleiben Service- und Hauptnavigation sichtbar und sticky; js/sawir/main.js nimmt die Klasse zusätzlich wieder ab. */ body:has(.c-sawir) .c-header.is-hidden { transform: none; } /* ---------------------------------------------------------------- Bühne */ .c-sawir-canvas { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; height: 100lvh; display: block; pointer-events: none; opacity: 0; } .sawir-still .c-sawir-canvas { display: none; } /* Pause-Knopf der Bühne (js/sawir/stage.js, gemeinsamer Knopf aus js/lib/bildmarke-3d.js, WCAG 2.2.2). Fest unten links, da das Canvas fixiert hinter dem Inhalt liegt; unten rechts sitzt der Hilfe-Knopf. Nur sichtbar, solange eine Szene im Bild ist. */ .c-sawir-pause { position: fixed; left: var(--fv-page-margin); bottom: var(--fv-space-16); z-index: 40; display: flex; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; } .c-sawir-pause.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; } .sawir-still .c-sawir-pause { display: none; } @media (prefers-reduced-motion: reduce) { .c-sawir-pause { transition: none; } } /* ---------------------------------------------------------------- Kapitel */ .c-sawir { position: relative; color: var(--sawir-ink); } .c-sawir__flow { position: relative; z-index: 1; } .c-sawir__step { min-height: var(--sawir-step-h); display: flex; align-items: flex-start; } .c-sawir__inner { width: 100%; } .c-sawir__card { position: sticky; top: calc(var(--header-h) + 38px + 10svh); max-width: 440px; margin-top: calc(var(--header-h) + 38px + 10svh); padding: var(--fv-card-padding); border: 0; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-sawir__card--head { background: none; box-shadow: none; padding: 0; border-radius: 0; max-width: 600px; } /* Eyebrow-Felder sind geleert (keine Eyebrows); der Stil bleibt als ruhige Verb-Kachel, falls ein Feld doch gefüllt ist */ .c-sawir__eyebrow { display: inline-flex; align-items: center; gap: var(--fv-space-8); margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-sawir__eyebrow span { width: 10px; height: 10px; border-radius: 3px; background: var(--sawir-accent); } .c-sawir__verb { margin: 0 0 var(--fv-space-16); } .c-sawir__headline { margin: 0; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); font-weight: var(--fv-fw-bold); text-wrap: balance; color: var(--fv-nachtblau); } .c-sawir__headline--page { font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); } .c-sawir__intro { margin-top: var(--fv-space-24); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); max-width: 34em; } .c-sawir__intro p { margin: 0 0 .8em; } .c-sawir__intro p:last-child { margin-bottom: 0; } .c-sawir__title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-sawir__value { margin: 0 0 var(--fv-space-16); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .c-sawir__value strong { font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h2); color: var(--fv-violett); } .c-sawir__value span { color: var(--fv-schiefer); font-size: var(--fv-fs-small); } .c-sawir__text { color: var(--fv-schiefer); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .c-sawir__text p { margin: 0 0 .7em; } .c-sawir__text p:last-child { margin-bottom: 0; } .c-sawir__text a { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: .2em; } .c-sawir__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-16) var(--fv-space-24); margin: var(--fv-space-32) 0 0; } .c-sawir__zwischenruf { margin: var(--fv-space-32) 0 0; max-width: 28em; } /* Anmerkung 68 (14.10.2026): bunte Gruppenkachel vor h3.c-sawir__title site-weit entfernt (alle Szenen: Wirkfelder, Zielgruppen, Jahreslauf). Die Basisregel war die Ursache fuer alle Vorkommen; Wirkfelder hatte zuvor nur eine sektionsspezifische Ueberschreibung (siehe vorherige Fassung dieser Datei). Farbvariablen (--sawir-accent, --sawir-g1..g4) bleiben erhalten, sie werden weiterhin fuer die Eyebrow-Punkte, die Zielgruppen-Tags und die Jahreslauf-Grafik gebraucht. */ .c-sawir__step .c-sawir__title::before { content: none; display: none; margin-bottom: 0; } /* Intro: erster Bildschirm */ .c-sawir--intro .c-sawir__step { min-height: var(--sawir-step-h); } .c-sawir--intro .c-sawir__card--head { margin-top: calc(var(--header-h) + 38px + 8svh); max-width: 600px; } /* Abschluss (ohne Szene): Rosa-Fläche (danach folgt das globale Nachtblau-CTA-Band, nie zwei gleiche Flächen nacheinander) */ .c-sawir--cta { background: var(--fv-rosa); color: var(--fv-nachtblau); --fv-focus: var(--fv-nachtblau); } .c-sawir--cta .c-sawir__step { min-height: 0; padding: var(--fv-section-y) 0; } .c-sawir--cta .c-sawir__card--head { position: static; margin: 0; max-width: 760px; } .c-sawir--cta .c-sawir__intro { color: var(--fv-nachtblau); } .c-sawir--cta .fv-link { text-decoration-color: var(--fv-nachtblau); } .c-sawir--cta .fv-zwischenruf { color: var(--fv-nachtblau); } /* 3D läuft: inaktive Karten treten zurück. Kontrast bleibt: nicht die Deckkraft sinkt, sondern die Karte verliert Schatten und Weiss (Nebel-Flaeche) und wird etwas kleiner. Text bleibt voll deckend (Schiefer auf Nebel 6,45:1, Nachtblau 13,54:1). */ .sawir-3d .c-sawir__step .c-sawir__card { transition: background-color .5s var(--fv-easing), box-shadow .5s var(--fv-easing), transform .5s var(--fv-easing); } .sawir-3d .c-sawir.has-scene:not(.is-still) .c-sawir__step:not(.is-active) .c-sawir__card:not(.c-sawir__card--head) { background: var(--fv-nebel); box-shadow: none; transform: scale(.96); transform-origin: 0 0; } /* ---------------------------------------------------------------- Overlay: Etiketten und Zähler (Position aus der Szene) */ .c-sawir__overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; } .sawir-3d .c-sawir__overlay { display: block; } .sawir-3d .c-sawir.is-still .c-sawir__overlay { display: flex; } .c-sawir__tag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; display: grid; grid-template-columns: auto 1fr; column-gap: var(--fv-space-8); align-items: baseline; padding: 10px 14px 11px; border: 0; border-radius: var(--fv-radius-16); max-width: 220px; background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); font-size: var(--fv-fs-tag); line-height: var(--fv-lh-tag); color: var(--fv-nachtblau); translate: -50% -50%; } .c-sawir__tag i { grid-row: span 2; align-self: center; width: 10px; height: 10px; border-radius: 3px; background: var(--sawir-accent); } .c-sawir__tag[data-tag="studierende"] i { background: var(--sawir-g1); } .c-sawir__tag[data-tag="lehrende"] i { background: var(--sawir-g2); } .c-sawir__tag[data-tag="fachvereine"] i { background: var(--sawir-g3); } .c-sawir__tag[data-tag="foerderer"] i { background: var(--sawir-g4); } .c-sawir__tag-label { font-weight: var(--fv-fw-bold); } .c-sawir__tag-value { grid-column: 2; font-weight: var(--fv-fw-bold); color: var(--fv-violett); font-size: 15px; font-variant-numeric: tabular-nums; } .c-sawir__tag small { grid-column: 2; color: var(--fv-schiefer); font-size: 12px; } .c-sawir__tag--center { grid-template-columns: 1fr; text-align: center; max-width: 240px; background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-sawir__tag--center .c-sawir__tag-value { grid-column: 1; color: var(--fv-rosa); } /* ---------------------------------------------------------------- Standbild (Fallback): Linien und Flächen nur in Markenfarben */ .c-sawir__still { display: none; margin: 0; } .c-sawir__still svg { display: block; width: 100%; height: auto; } .c-sawir__still .s-flow { fill: none; stroke-width: 1.4; opacity: .5; } .c-sawir__still .s-orbit { fill: none; stroke-width: 1.5; opacity: .55; } .c-sawir__still .s-ring { fill: none; stroke: var(--fv-violett); stroke-width: 10; opacity: .18; } .c-sawir__still .s-ring-in { fill: none; stroke: var(--fv-rosa); stroke-width: 1.5; } .c-sawir__still .s-ring-thin { fill: none; stroke: var(--fv-nebel); stroke-width: 1.5; } .c-sawir__still .s-arc { fill: none; stroke: var(--fv-violett); stroke-width: 3; opacity: .45; } .c-sawir__still .s-tick { stroke: var(--fv-rosa); stroke-width: 2; } .c-sawir__still .s-node { fill: var(--fv-weiss); stroke-width: 1.5; } .c-sawir__still .s-glow-in { stop-color: var(--fv-papier); stop-opacity: 1; } .c-sawir__still .s-glow-out { stop-color: var(--fv-papier); stop-opacity: 0; } .c-sawir__still .g1 { fill: var(--sawir-g1); stroke: var(--sawir-g1); } .c-sawir__still .g2 { fill: var(--sawir-g2); stroke: var(--sawir-g2); } .c-sawir__still .g3 { fill: var(--sawir-g3); stroke: var(--sawir-g3); } .c-sawir__still .g4 { fill: var(--sawir-g4); stroke: var(--sawir-g4); } .c-sawir__still .s-flow, .c-sawir__still .s-orbit { fill: none; } /* Fallback-Layout: ohne Engine oder .sawir-still */ .sawir-still .c-sawir.has-scene, .c-sawir.has-scene.is-still { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); margin-inline: auto; padding: var(--fv-section-y) var(--fv-page-margin) 0; column-gap: clamp(24px, 4vw, 64px); } .sawir-still .c-sawir.has-scene .l-container, .c-sawir.is-still .l-container { padding-inline: 0; } .sawir-still .c-sawir__step, .c-sawir.is-still .c-sawir__step { min-height: 0; padding-bottom: 20px; } .sawir-still .c-sawir__card, .c-sawir.is-still .c-sawir__card { position: static; margin-top: 0; max-width: none; } .sawir-still .c-sawir__still, .c-sawir.is-still .c-sawir__still { display: block; position: sticky; top: calc(var(--header-h) + 38px + 32px); grid-column: 2; grid-row: 1 / span 2; } .sawir-still .c-sawir--intro .c-sawir__card--head { margin-top: 0; } .sawir-still .c-sawir--intro .c-sawir__flow { grid-column: 1 / -1; } .sawir-still .c-sawir__overlay, .c-sawir.is-still .c-sawir__overlay { display: flex; flex-wrap: wrap; gap: 10px; position: static; grid-column: 1; margin: 4px 0 24px; } .sawir-still .c-sawir__tag, .c-sawir.is-still .c-sawir__tag { position: static; opacity: 1; translate: none; } /* ---------------------------------------------------------------- Tablet und mobil (Servicezeile ab 1200 px ausgeblendet) */ @media (max-width: 1200px) { .c-sawir__card { top: calc(var(--header-h) + 10svh); margin-top: calc(var(--header-h) + 10svh); } .c-sawir--intro .c-sawir__card--head { margin-top: calc(var(--header-h) + 8svh); } } @media (max-width: 1023px) { .c-sawir__card { max-width: 400px; } } @media (max-width: 767px) { :root { --sawir-step-h: 110svh; } .c-sawir__step { align-items: flex-end; } .c-sawir__card { position: sticky; top: auto; bottom: 16px; margin: 52svh 0 16px; max-width: none; padding: 22px 22px 20px; } .c-sawir__card--head { margin-top: calc(var(--header-h) + 6svh); position: relative; bottom: auto; padding: 0; } .c-sawir--intro .c-sawir__card--head { margin-top: 46svh; } .c-sawir.has-scene .c-sawir__card--head { margin-top: 46svh; } .c-sawir.has-scene .c-sawir__step--head { align-items: flex-start; } .c-sawir__tag { font-size: 12px; padding: 6px 9px 7px; max-width: 160px; } .c-sawir__tag small { display: none; } .sawir-still .c-sawir.has-scene, .c-sawir.has-scene.is-still { grid-template-columns: 1fr; } .sawir-still .c-sawir__still, .c-sawir.is-still .c-sawir__still { position: static; grid-column: 1; grid-row: 2; max-width: 420px; margin: 0 auto 24px; } .sawir-still .c-sawir__card, .c-sawir.is-still .c-sawir__card { margin: 0; } } @media (prefers-reduced-motion: reduce) { .sawir-3d .c-sawir__step .c-sawir__card { transition: none; } } /* Standbild-Bausteine (content/so-arbeiten-wir: still_svg aus abgerundeten Rechtecken, keine Kreise) */ .c-sawir__still .s-core { fill: var(--fv-purpur); } .c-sawir__still .s-month { fill: var(--fv-nebel); } .c-sawir__still .s-label { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: 22px; fill: var(--fv-nachtblau); } .c-sawir__still .g1 + .s-label--on, .c-sawir__still .g3 + .s-label--on { fill: var(--fv-nachtblau); } .c-sawir__still .g2 + .s-label--on, .c-sawir__still .g4 + .s-label--on { fill: var(--fv-weiss); } /* CLS-Fix (a8-tiefe, 06.10.2026): Vorher galt das zweispaltige Standbild-Layout, bis js/sawir/stage.js .sawir-js setzte; der Wechsel auf die hohen 3D-Schritte verschob die ganze Seite (CLS 0,81). Jetzt steht das 3D-Layout (Schritthöhen, sticky Karten) schon beim ersten Rendern. Das Standbild-Layout greift sofort nur ohne JavaScript oder bei reduzierter Bewegung (dort setzt stage.js ohnehin .sawir-still), sonst über .sawir-still/.is-still wie bisher. */ @media (scripting: none) { html .c-sawir.has-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); margin-inline: auto; padding: var(--fv-section-y) var(--fv-page-margin) 0; column-gap: clamp(24px, 4vw, 64px); } html .c-sawir.has-scene .l-container { padding-inline: 0; } html .c-sawir__step { min-height: 0; padding-bottom: 20px; } html .c-sawir__card { position: static; margin-top: 0; max-width: none; } html .c-sawir__still { display: block; position: sticky; top: calc(var(--header-h) + 38px + 32px); grid-column: 2; grid-row: 1 / span 2; } html .c-sawir--intro .c-sawir__card--head { margin-top: 0; } html .c-sawir--intro .c-sawir__flow { grid-column: 1 / -1; } html .c-sawir__overlay { display: flex; flex-wrap: wrap; gap: 10px; position: static; grid-column: 1; margin: 4px 0 24px; } html .c-sawir__tag { position: static; opacity: 1; translate: none; } } @media (scripting: none) and (max-width: 767px) { html .c-sawir.has-scene { grid-template-columns: 1fr; } html .c-sawir__still { position: static; grid-column: 1; grid-row: 2; max-width: 420px; margin: 0 auto 24px; } html .c-sawir__card { margin: 0; } } @media (prefers-reduced-motion: reduce) { html:not(.sawir-js) .c-sawir.has-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); margin-inline: auto; padding: var(--fv-section-y) var(--fv-page-margin) 0; column-gap: clamp(24px, 4vw, 64px); } html:not(.sawir-js) .c-sawir.has-scene .l-container { padding-inline: 0; } html:not(.sawir-js) .c-sawir__step { min-height: 0; padding-bottom: 20px; } html:not(.sawir-js) .c-sawir__card { position: static; margin-top: 0; max-width: none; } html:not(.sawir-js) .c-sawir__still { display: block; position: sticky; top: calc(var(--header-h) + 38px + 32px); grid-column: 2; grid-row: 1 / span 2; } html:not(.sawir-js) .c-sawir--intro .c-sawir__card--head { margin-top: 0; } html:not(.sawir-js) .c-sawir--intro .c-sawir__flow { grid-column: 1 / -1; } html:not(.sawir-js) .c-sawir__overlay { display: flex; flex-wrap: wrap; gap: 10px; position: static; grid-column: 1; margin: 4px 0 24px; } html:not(.sawir-js) .c-sawir__tag { position: static; opacity: 1; translate: none; } } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { html:not(.sawir-js) .c-sawir.has-scene { grid-template-columns: 1fr; } html:not(.sawir-js) .c-sawir__still { position: static; grid-column: 1; grid-row: 2; max-width: 420px; margin: 0 auto 24px; } html:not(.sawir-js) .c-sawir__card { margin: 0; } } /* Mobil: Kapitelköpfe (H1 und H2 mit Intro) liefen beim Scrollen über die 3D-Bausteine und Etiketten (a8-tiefe). Ruhige Papier-Fläche als Lesegrund, gleiche Rundung wie die Schrittkarten, kein Glas. */ @media (max-width: 767px) { html:not(.sawir-still) .c-sawir.has-scene:not(.is-still) .c-sawir__card--head { padding: 20px 22px 22px; margin-inline: -6px; border-radius: var(--fv-radius-24); background: color-mix(in srgb, var(--fv-papier) 94%, transparent); } } /* sections/sb-gallery.css */ /* sb-gallery: grosse Bildgalerie, ein Bild pro Zeile (Speedbuild) */ .sb-gal__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); } .sb-gal__intro { margin: 12px 0 0; color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .sb-gal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 96px); } .sb-gal__fig { margin: 0; display: grid; gap: 22px; } .sb-gal__media { display: block; overflow: hidden; border-radius: var(--fv-radius-40); background: var(--fv-nachtblau); } .sb-gal__media img { display: block; width: 100%; height: auto; transition: transform var(--fv-duration) var(--fv-easing); } .sb-gal__media:hover img { transform: scale(1.02); } .sb-gal__cap { display: grid; grid-template-columns: auto 1fr; gap: 16px; max-width: 78ch; } .sb-gal__num { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h3); color: var(--fv-purpur); font-variant-numeric: tabular-nums; } .sb-gal__body { display: grid; gap: 10px; } .sb-gal__title { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); color: var(--fv-nachtblau); } .sb-gal__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sb-gal__fav { background: var(--fv-nachtblau); color: var(--fv-weiss); border-radius: var(--fv-radius-10); padding: 6px 14px; font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); } .sb-gal__rating { line-height: var(--fv-lh-body); } @media (min-width: 900px) { .sb-gal__item.is-portrait .sb-gal__fig { grid-template-columns: minmax(0, 540px) 1fr; align-items: end; gap: 56px; } } /* sections/sb-logo-3d.css */ /* sb-logo-3d: Experiment "Logo in 3D" (/speedbuild/logo-3d/). Agent logo3d. Zustände: .is-js (Skript läuft; Layout ohne Skript über @media (scripting: none), Ende der Datei), .is-3d (Szene bereit), .is-fallback (Standbild + Verbliste), .is-apart, .is-dock. Ein Raster für alles: die Bühne liegt hinter allen Feldern, Text und Bedienung liegen darüber. */ .c-sb3d { --sb3d-side: max(var(--fv-page-margin), (100% - var(--fv-content-max)) / 2); --sb3d-cx: 67%; --sb3d-dock: var(--fv-purpur); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: var(--sb3d-side) minmax(0, 38rem) minmax(0, 1fr) var(--sb3d-side); grid-template-rows: auto 1fr auto; column-gap: 0; min-height: clamp(660px, calc(100svh - var(--header-h)), 960px); color: var(--fv-nachtblau); background: var(--fv-nebel); } .c-sb3d > .c-sb3d__copy { display: contents; } .c-sb3d__stage { grid-area: 1 / 1 / -1 / -1; position: relative; z-index: 0; min-height: 0; } .c-sb3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity var(--fv-duration) var(--fv-easing); } .c-sb3d.is-3d .c-sb3d__canvas { opacity: 1; } .c-sb3d.is-grabbing .c-sb3d__canvas { cursor: grabbing; } /* Andock-Impuls: farbiger Lichthof hinter der Marke */ .c-sb3d__glow { position: absolute; left: var(--sb3d-cx); top: 46%; width: min(70vmin, 760px); aspect-ratio: 1; translate: -50% -50%; border-radius: var(--fv-radius-64); pointer-events: none; opacity: 0; background: var(--sb3d-dock); } .c-sb3d.is-dock .c-sb3d__glow { animation: sb3d-dock 1.1s var(--fv-easing) both; } @keyframes sb3d-dock { 0% { opacity: 0; scale: .82; } 18% { opacity: .18; } 100% { opacity: 0; scale: 1.12; } } /* Kopf */ .c-sb3d__lead { grid-column: 2; grid-row: 1; position: relative; z-index: 1; padding-top: clamp(32px, 4.6vw, 80px); } .c-sb3d__headline { font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); margin: 0 0 var(--fv-space-24); max-width: 16em; text-wrap: balance; hyphens: manual; } .c-sb3d__intro { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); margin: 0; max-width: 40ch; } /* Verb-Tafel */ .c-sb3d__verb { grid-column: 2; grid-row: 2; align-self: end; position: relative; z-index: 1; margin: var(--fv-space-32) 0 20px; padding: 22px 26px 22px 26px; max-width: 27rem; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); min-height: 12.5rem; } .c-sb3d__verb::before { content: ""; position: absolute; left: 26px; top: -9px; width: 46px; height: 18px; border-radius: var(--fv-radius-8); background: var(--accent); transform-origin: left center; scale: 0 1; transition: scale var(--fv-duration) var(--fv-easing), background-color var(--fv-duration) var(--fv-easing); } .c-sb3d__verb.is-active::before { scale: 1 1; } .c-sb3d__verb-part { margin: 0 0 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); } .c-sb3d__verb-word { margin: 0; font-size: var(--fv-fs-h1); line-height: 1; font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h1); color: var(--accent-ink); } .c-sb3d__verb-word:empty { display: none; } .c-sb3d__verb-text { margin: 12px 0 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-nachtblau); max-width: 40ch; } .c-sb3d__verb:not(.is-active) .c-sb3d__verb-text { color: var(--fv-schiefer); margin-top: 4px; } .c-sb3d__verb.is-swap > * { animation: sb3d-in var(--fv-duration) var(--fv-easing) both; } .c-sb3d__verb.is-swap > :nth-child(2) { animation-delay: .04s; } .c-sb3d__verb.is-swap > :nth-child(3) { animation-delay: .08s; } @keyframes sb3d-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } /* Bausteine als Schaltflächen (Tastatur, Tippen) */ .c-sb3d__list { grid-column: 2 / 4; grid-row: 3; align-self: end; position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 10px; } .c-sb3d__item { margin: 0; } .c-sb3d__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); flex: none; } .c-sb3d__chip { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); padding: 11px 18px 11px 14px; border-radius: var(--fv-radius-12); cursor: pointer; background: var(--fv-weiss); border: 0; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-sb3d__chip:hover { background: var(--fv-flieder-hell); } .c-sb3d__chip:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-sb3d__chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); } .c-sb3d__chip[aria-pressed="true"] .c-sb3d__swatch { background: var(--accent-on); } .c-sb3d__item-body { display: none; } /* Auseinandernehmen / Zusammensetzen */ .c-sb3d__controls { grid-column: 3; grid-row: 3; justify-self: end; align-self: end; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: clamp(24px, 3vw, 40px); } .c-sb3d__toggle:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-sb3d__toggle-icon { position: relative; width: 18px; height: 18px; flex: none; } .c-sb3d__toggle-icon i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: currentColor; transition: translate var(--fv-duration) var(--fv-easing); } .c-sb3d__toggle-icon i:nth-child(1) { left: 1px; top: 1px; } .c-sb3d__toggle-icon i:nth-child(2) { right: 1px; top: 1px; background: var(--fv-violett); } .c-sb3d__toggle-icon i:nth-child(3) { left: 1px; bottom: 1px; background: var(--fv-rosa); } .c-sb3d__toggle-icon i:nth-child(4) { right: 1px; bottom: 1px; background: var(--fv-pflaume); } .c-sb3d.is-apart .c-sb3d__toggle-icon i:nth-child(1) { translate: -3px -3px; } .c-sb3d.is-apart .c-sb3d__toggle-icon i:nth-child(2) { translate: 3px -3px; } .c-sb3d.is-apart .c-sb3d__toggle-icon i:nth-child(3) { translate: -3px 3px; } .c-sb3d.is-apart .c-sb3d__toggle-icon i:nth-child(4) { translate: 3px 3px; } .c-sb3d__keys { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* Pause-Knopf (inline, js/lib/bildmarke-3d.js) neben dem Auseinandernehmen-Knopf statt eng unter dem Tastaturhinweis */ .c-sb3d__controls { flex-flow: row wrap; justify-content: flex-end; align-items: center; column-gap: 12px; } .c-sb3d__controls > .c-szene-pause--inline { order: -1; } @media (min-width: 1200px) { .c-sb3d__controls { padding-bottom: clamp(56px, 5.4vw, 80px); } } /* Ecke unten rechts für den schwebenden Hilfe-Knopf frei */ .c-sb3d__controls > .c-sb3d__keys { order: 2; flex-basis: 100%; text-align: right; } @media (max-width: 1199px) { .c-sb3d__controls { justify-content: flex-start; } .c-sb3d__controls > .c-szene-pause--inline { order: 1; } .c-sb3d__controls > .c-sb3d__keys { text-align: left; } } .c-sb3d__outro { display: none; } /* Standbild: vor dem Laden als Platzhalter an der Stelle der Marke, im Fallback dauerhaft */ .c-sb3d__still { grid-area: 1 / 3 / -1 / 4; align-self: center; justify-self: center; position: relative; z-index: 0; width: min(100%, 520px); pointer-events: none; } .c-sb3d__still img { display: block; width: 100%; height: auto; } .c-sb3d:not(.is-fallback) .c-sb3d__still { position: absolute; left: var(--sb3d-cx); top: 47%; translate: -50% -50%; width: min(40vw, 560px); opacity: .9; transition: opacity var(--fv-duration) var(--fv-easing); } .c-sb3d.is-3d .c-sb3d__still { opacity: 0; visibility: hidden; transition: opacity var(--fv-duration) var(--fv-easing), visibility 0s var(--fv-duration); } /* Fallback und ohne Skript: Standbild + Verbliste */ .c-sb3d.is-fallback .c-sb3d__verb, .c-sb3d.is-fallback .c-sb3d__controls, .c-sb3d.is-fallback .c-sb3d__chip, .c-sb3d.is-fallback .c-sb3d__stage { display: none; } .c-sb3d.is-fallback { grid-template-rows: auto auto auto; min-height: 0; padding-bottom: clamp(48px, 6vw, 96px); } .c-sb3d.is-fallback .c-sb3d__list { grid-column: 2; grid-row: 2; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: var(--fv-space-32) 0 0; } .c-sb3d.is-fallback .c-sb3d__item-body { display: block; padding: 16px 0; border-top: 2px solid var(--fv-nebel); } .c-sb3d__item-verb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); color: var(--accent-ink); } .c-sb3d__item-part { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); } .c-sb3d__item-text { margin: 0; line-height: var(--fv-lh-body); } .c-sb3d.is-fallback .c-sb3d__outro { display: block; grid-column: 2; grid-row: 3; margin: var(--fv-space-24) 0 0; color: var(--fv-schiefer); max-width: 46ch; } .c-sb3d.is-fallback .c-sb3d__still { grid-area: 1 / 3 / 4 / 4; width: min(80%, 520px); } @media (max-width: 1199px) { .c-sb3d { grid-template-rows: auto 1fr auto auto; } .c-sb3d__list { grid-row: 3; padding-bottom: 14px; } .c-sb3d__controls { grid-column: 2 / 4; grid-row: 4; justify-self: start; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 12px 18px; } } @media (max-width: 1023px) { .c-sb3d { --sb3d-cx: 50%; grid-template-columns: var(--fv-page-margin) minmax(0, 1fr) var(--fv-page-margin); grid-template-rows: auto clamp(360px, 62svh, 560px) auto auto auto; min-height: 0; } .c-sb3d__lead { grid-column: 2; padding-top: clamp(32px, 6vw, 56px); } .c-sb3d__headline { max-width: 16ch; } .c-sb3d__stage { grid-area: 2 / 1 / 3 / -1; } .c-sb3d__glow { top: 50%; } .c-sb3d:not(.is-fallback) .c-sb3d__still { grid-area: 2 / 1 / 3 / -1; position: relative; left: auto; top: auto; translate: none; width: min(78%, 420px); } .c-sb3d__verb { grid-column: 2; grid-row: 3; margin: 0 0 var(--fv-space-24); max-width: none; min-height: 0; } .c-sb3d__list { grid-column: 2; grid-row: 4; gap: 8px; } .c-sb3d__chip { padding: 10px 14px 10px 12px; font-size: var(--fv-fs-small); } .c-sb3d__controls { grid-column: 2; grid-row: 5; } .c-sb3d.is-fallback .c-sb3d__still { grid-area: 2 / 2 / 3 / 3; width: min(80%, 380px); padding: var(--fv-space-32) 0 0; } .c-sb3d.is-fallback { grid-template-rows: auto auto auto auto; } .c-sb3d.is-fallback .c-sb3d__list { grid-row: 3; } .c-sb3d.is-fallback .c-sb3d__outro { grid-row: 4; } } @media (prefers-reduced-motion: reduce) { .c-sb3d__verb.is-swap > *, .c-sb3d.is-dock .c-sb3d__glow { animation: none; } .c-sb3d__chip, .c-sb3d__toggle-icon i, .c-sb3d__verb::before { transition: none; } } /* Ohne Skript (CLS: Die Skript-Variante gilt ab dem ersten Bild, nicht erst nach .is-js; scripting-Medienabfrage) */ @media (scripting: none) { .c-sb3d:not(.is-fallback) .c-sb3d__still { position: relative; left: auto; top: auto; translate: none; opacity: 1; } .c-sb3d .c-sb3d__verb, .c-sb3d .c-sb3d__controls, .c-sb3d .c-sb3d__chip, .c-sb3d .c-sb3d__stage { display: none; } .c-sb3d { grid-template-rows: auto auto auto; min-height: 0; padding-bottom: clamp(48px, 6vw, 96px); } .c-sb3d .c-sb3d__list { grid-column: 2; grid-row: 2; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: var(--fv-space-32) 0 0; } .c-sb3d .c-sb3d__item-body { display: block; padding: 16px 0; border-top: 2px solid var(--fv-nebel); } .c-sb3d .c-sb3d__outro { display: block; grid-column: 2; grid-row: 3; margin: var(--fv-space-24) 0 0; color: var(--fv-schiefer); max-width: 46ch; } .c-sb3d:not(.is-fallback) .c-sb3d__still { grid-area: 1 / 3 / 4 / 4; width: min(80%, 520px); } } @media (scripting: none) and (max-width: 1023px) { .c-sb3d:not(.is-fallback) .c-sb3d__still { grid-area: 2 / 2 / 3 / 3; width: min(80%, 380px); padding: var(--fv-space-32) 0 0; } .c-sb3d { grid-template-rows: auto auto auto auto; } .c-sb3d .c-sb3d__list { grid-row: 3; } .c-sb3d .c-sb3d__outro { grid-row: 4; } } /* sections/sb-logo-bereich.css */ /* sb-logo-bereich: Demo "Header-Logo je Bereich" (Speedbuild, Agent plan-3d). CSS-3D auf geschichteten SVG-Scheiben. */ .c-lb { background: var(--fv-weiss); } .c-lb__head { max-width: 780px; margin-bottom: var(--fv-space-32); } .c-lb__title { margin: 0; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-lb__intro { margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-lead); color: var(--fv-schiefer); } .c-lb__hint { margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-lb__areas { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); } .c-lb__area { display: inline-flex; align-items: center; gap: var(--fv-space-8); font: inherit; font-weight: var(--fv-fw-medium); font-size: var(--fv-fs-small); color: var(--fv-nachtblau); background: var(--fv-papier); border: 0; border-radius: var(--fv-radius-12); padding: 10px 16px; cursor: pointer; } .c-lb__area[aria-pressed="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-lb__area:focus-visible { outline: 2px solid var(--fv-purpur); outline-offset: 2px; } .c-lb__dot { width: 12px; height: 12px; border-radius: 3px; background: var(--fv-nachtblau); box-shadow: 0 0 0 1px rgb(255 255 255 / .6); } .c-lb__dot[data-verb="verbinden"] { background: var(--fv-purpur); } .c-lb__dot[data-verb="entwickeln"] { background: var(--fv-violett); } .c-lb__dot[data-verb="unterstuetzen"] { background: var(--fv-rosa); } .c-lb__dot[data-verb="werben"] { background: var(--fv-pflaume); } .c-lb__dot[data-verb="alle"] { background: linear-gradient(90deg, var(--fv-violett) 0 25%, var(--fv-purpur) 25% 50%, var(--fv-rosa) 50% 75%, var(--fv-pflaume) 75%); } .c-lb__variants { list-style: none; margin: var(--fv-space-48) 0 0; padding: 0; display: grid; gap: var(--fv-space-64); } .c-lb__variant { display: grid; gap: var(--fv-space-24); padding-top: var(--fv-space-32); border-top: 1px solid var(--fv-nebel); } .c-lb__vhead { max-width: 780px; } .c-lb__vtitle { margin: 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-lb__trigger { margin: var(--fv-space-4) 0 0; font-weight: var(--fv-fw-medium); color: var(--fv-purpur); } .c-lb__vtext { margin: var(--fv-space-8) 0 0; color: var(--fv-schiefer); } /* nachgebaute Kopfzeile */ .c-lb__bar { display: flex; align-items: center; gap: var(--fv-space-32); background: var(--fv-weiss); border-radius: var(--fv-radius-16); padding: var(--fv-space-8) var(--fv-space-24); box-shadow: 0 1px 0 var(--fv-nebel), 0 8px 28px rgb(23 29 58 / .07); } .c-lb__logo-link { display: block; border-radius: var(--fv-radius-8); padding: var(--fv-space-8) 0; } .c-lb__logo-link:focus-visible { outline: 2px solid var(--fv-purpur); outline-offset: 2px; } .c-lb__nav { display: flex; gap: var(--fv-space-24); margin-left: auto; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-nachtblau); } @media (max-width: 899px) { .c-lb__nav { display: none; } } .c-lb__scroller { height: 120px; overflow-y: auto; border-radius: var(--fv-radius-16); background: var(--fv-papier); } .c-lb__scroller-in { height: 1600px; padding: var(--fv-space-24); color: var(--fv-schiefer); font-size: var(--fv-fs-small); background: repeating-linear-gradient(180deg, transparent 0 79px, var(--fv-nebel) 79px 80px); } .c-lb__frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fv-space-16); } @media (max-width: 899px) { .c-lb__frames { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .c-lb__frame { display: grid; gap: var(--fv-space-12); align-content: start; } .c-lb__fbox { display: block; background: var(--fv-papier); border-radius: var(--fv-radius-24); padding: 16% 9%; } .c-lb__frame .c-lb__logo { width: 100%; } .c-lb__fcap { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-lb__fcap b { color: var(--fv-nachtblau); margin-right: 4px; } /* Logo: Ruhezustand = flache Marke, pixelgleich zu logo.svg */ .c-lb__logo { display: block; position: relative; width: 190px; } .c-lb__logo > img { display: block; width: 100%; height: auto; } .c-lb__logo.is-built::before { content: ""; display: block; aspect-ratio: 416.02 / 140.8; } .c-lb__3d { position: absolute; inset: 0; container-type: size; } .c-lb__word { position: absolute; inset: 0; width: 100%; height: 100%; } .c-lb__mark { position: absolute; left: calc(24 / 416.02 * 100%); top: calc(24 / 140.8 * 100%); width: calc(99 / 416.02 * 100%); height: calc(93 / 140.8 * 100%); perspective: 120cqw; perspective-origin: 50% 40%; } .c-lb__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--d, 0) * 18deg)) rotateY(calc(var(--d, 0) * -30deg)); } .c-lb__part { --isf: 0; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc((var(--d, 0) * var(--lift, 0) * 0.238 + var(--isf) * var(--f, 0) * 8) * 1cqw)) rotateY(calc(var(--isf) * var(--s, 0) * 360deg)) scale(calc(1 + var(--isf) * var(--f, 0) * 0.08)); } .c-lb__slice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(calc(var(--k) * -1 * (var(--d, 0) * 0.62 + var(--isf) * var(--f, 0) * 0.5) * 1cqw)); } .c-lb__logo:not(.is-3d) .c-lb__slice:not([data-k="0"]) { visibility: hidden; } .c-lb__logo.is-3d .c-lb__part .c-lb__slice[data-k="0"] { filter: drop-shadow(0 calc(var(--isf) * var(--f, 0) * 0.9cqw) calc(var(--isf) * var(--f, 0) * 1.6cqw) rgb(23 29 58 / .32)); } .c-lb__logo[data-verb="foerdern"] [data-part="foerdern"], .c-lb__logo[data-verb="verbinden"] [data-part="verbinden"], .c-lb__logo[data-verb="unterstuetzen"] [data-part="unterstuetzen"], .c-lb__logo[data-verb="entwickeln"] [data-part="entwickeln"], .c-lb__logo[data-verb="werben"] [data-part="werben"] { --isf: 1; } .c-lb__logo[data-verb="alle"] .c-lb__part:not([data-part="foerdern"]) { --isf: .55; } @media (prefers-reduced-motion: reduce) { .c-lb__scroller { display: none; } } /* Storyboard: Ausschnitt auf die Bildmarke (die Wortmarke bewegt sich nie) */ .c-lb__fbox { overflow: hidden; padding: 10% 0; } .c-lb__frame .c-lb__logo { width: 252%; margin-left: 5.4%; } .c-lb__frame .c-lb__word { visibility: hidden; } .c-lb__frame .c-lb__logo > img { clip-path: inset(0 70% 0 0); } /* sections/sb-mosaik-3d.css */ /* sb-mosaik-3d: Experiment "Mosaik in 3D" (/speedbuild/mosaik-3d/). Agent mosaik3d. Layouts: --hero (Hintergrund hinter Headline), --band (schmales Sektionsband), --logo (gepinnte Fläche mit Logo-Moment). Zustände vom Skript: Bühne .is-js / .is-ready (3D sichtbar) / .is-fallback (statisches SVG-Mosaik bleibt). Variable --mosaik-logo (0..1) setzt das Skript auf der Sektion, solange die Marke steht. */ .c-mosaik { --mosaik-ground: var(--fv-papier); --mosaik-tile: url("../assets/brand-system/muster/muster-2-mittel.svg"); --mosaik-tile-size: 272px; --mosaik-logo: 0; position: relative; isolation: isolate; color: var(--fv-nachtblau); background: var(--mosaik-ground); } .c-mosaik[data-variant="akzent"] { --mosaik-ground: var(--fv-nebel); } .c-mosaik[data-density="sparsam"] { --mosaik-tile: url("../assets/brand-system/muster/muster-1-sparsam.svg"); --mosaik-tile-size: 368px; } .c-mosaik[data-density="dicht"] { --mosaik-tile: url("../assets/brand-system/muster/muster-3-dicht.svg"); --mosaik-tile-size: 200px; } .c-mosaik__pin { position: relative; overflow: hidden; display: grid; align-items: center; } .c-mosaik__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Standbild (und Fallback): das Mosaik-Muster aus dem Brand-System, leicht geprägt */ .c-mosaik__still { position: absolute; inset: 0; background: var(--mosaik-tile) 0 0 / var(--mosaik-tile-size) repeat, var(--mosaik-ground); transition: opacity var(--fv-duration) var(--fv-easing); } .c-mosaik__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--fv-duration) var(--fv-easing); } .c-mosaik__stage.is-ready .c-mosaik__canvas { opacity: 1; } .c-mosaik__stage.is-ready .c-mosaik__still { opacity: 0; } /* Text liegt auf einer weißen Karte: das Mosaik bleibt sichtbar, die Schrift ruhig lesbar */ .c-mosaik__copy { position: relative; z-index: 2; pointer-events: none; } .c-mosaik__panel { pointer-events: auto; max-width: 34rem; padding: clamp(24px, 3vw, 44px) clamp(24px, 3.2vw, 48px); border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-mosaik__headline { margin: 0; font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h1); color: var(--fv-nachtblau); text-wrap: balance; } .c-mosaik__intro { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-schiefer); max-width: 44ch; } .c-mosaik__cta { margin: var(--fv-space-32) 0 0; } /* --- Hero: Fläche bis fast zur Bildschirmhöhe, Text links */ .c-mosaik--hero .c-mosaik__pin { min-height: clamp(560px, calc(92svh - var(--header-h)), 900px); } .c-mosaik--hero .c-mosaik__copy { padding-block: var(--fv-space-96); } /* --- Band: schmal, randlos, eine Zeile auf Glas */ .c-mosaik--band .c-mosaik__pin { min-height: clamp(180px, 20vw, 280px); } .c-mosaik--band .c-mosaik__copy { display: flex; justify-content: center; padding-block: var(--fv-space-48); } .c-mosaik--band .c-mosaik__panel { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fv-space-16) var(--fv-space-32); padding: 18px 20px 18px 30px; border-radius: var(--fv-radius-24); text-align: left; } .c-mosaik--band .c-mosaik__headline { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h3); } .c-mosaik--band .c-mosaik__intro { display: none; } .c-mosaik--band .c-mosaik__cta { margin: 0; } /* --- Logo-Moment: lange Scrollstrecke, die Bühne bleibt stehen */ .c-mosaik--logo { height: 280vh; height: 280svh; } .c-mosaik--logo .c-mosaik__pin { position: sticky; top: 0; height: 100vh; height: 100svh; } .c-mosaik--logo .c-mosaik__copy { align-self: start; padding-top: calc(var(--header-h) + clamp(24px, 5vh, 64px)); } .c-mosaik--logo .c-mosaik__panel { max-width: 27rem; } .c-mosaik--logo .c-mosaik__headline { font-size: var(--fv-fs-h2); } .c-mosaik__caption { position: absolute; z-index: 2; left: 50%; bottom: clamp(24px, 6vh, 64px); translate: -50% calc((1 - var(--mosaik-logo)) * 12px); margin: 0; padding: 12px 22px; max-width: min(36rem, calc(100% - 2 * var(--fv-page-margin))); font-size: var(--fv-fs-body); line-height: 1.45; font-weight: var(--fv-fw-medium); text-align: center; color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); background: var(--fv-weiss); hyphens: none; text-wrap: balance; box-shadow: var(--fv-shadow-card); opacity: clamp(0, calc((var(--mosaik-logo) - .55) * 3), 1); } .c-mosaik__mark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (min-width: 900px) { .c-mosaik--logo .c-mosaik__caption { left: 62%; } } /* --- Fallback (kein WebGL2, reduzierte Bewegung): Muster bleibt, Logo-Moment als ruhiges Standbild */ .c-mosaik.is-fallback.c-mosaik--logo { height: auto; } .c-mosaik.is-fallback .c-mosaik__pin { position: relative; top: auto; height: auto; min-height: clamp(520px, 80svh, 820px); } .c-mosaik.is-fallback .c-mosaik__mark { clip: auto; width: min(42vw, 360px); height: auto; left: 62%; top: 50%; translate: -50% -50%; z-index: 1; padding: clamp(20px, 3vw, 40px); box-sizing: content-box; border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-mosaik.is-fallback .c-mosaik__caption { opacity: 1; translate: -50% 0; } .c-mosaik--band.is-fallback .c-mosaik__pin { min-height: clamp(180px, 20vw, 280px); } .c-mosaik--hero.is-fallback .c-mosaik__pin { min-height: clamp(560px, calc(92svh - var(--header-h)), 900px); } @media (max-width: 899px) { .c-mosaik--hero .c-mosaik__pin { align-items: end; } .c-mosaik--hero .c-mosaik__copy { padding-block: 40vh var(--fv-space-48); } .c-mosaik--logo .c-mosaik__copy { padding-top: calc(var(--header-h) + var(--fv-space-16)); } .c-mosaik--logo .c-mosaik__panel { padding: 18px 20px; } .c-mosaik--logo .c-mosaik__intro { font-size: var(--fv-fs-body); } .c-mosaik.is-fallback .c-mosaik__mark { left: 50%; top: auto; bottom: 120px; translate: -50% 0; width: 46vw; } .c-mosaik.is-fallback.c-mosaik--logo .c-mosaik__pin { padding-bottom: 46vw; align-content: start; } .c-mosaik--band .c-mosaik__panel { padding: 14px 18px; } .c-mosaik__caption { width: calc(100% - 2 * var(--fv-page-margin)); font-size: var(--fv-fs-body); bottom: 20px; } .c-mosaik--band .c-mosaik__headline { font-size: var(--fv-fs-h3); } } @media (prefers-reduced-motion: reduce) { .c-mosaik__canvas, .c-mosaik__still { transition: none; } } /* sections/sb-verbinden.css */ /* Speedbuild "verbinden" (sections/sb-verbinden.html, js/speedbuild/verbinden.js). Standard: fixierte 3D-Bühne (sticky), Kapitel scrollen darüber. Text links, Bühne per setViewOffset nach rechts. .is-fallback (kein WebGL, reduzierte Bewegung, Fehler) und ohne Skript: Kapitel untereinander mit CSS-Standbildern. --sbv-light (0..1) setzt das Skript: am Ende wird die Bühne weiß, die Marke steht auf Weiß. Hell-Fassung (Alexander 06.10.2026): Grund Papier statt Nachtblau, Texte und UI dunkel auf hell (js/speedbuild/verbinden-scene.js HELL). */ .c-sb-verbinden { --sbv-night: var(--fv-papier); --sbv-light: 0; position: relative; background: var(--sbv-night); color: var(--fv-nachtblau); counter-reset: sbv; isolation: isolate; } /* ---------------------------------------------------------------- Bühne */ .c-sb-verbinden__stage { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--fv-papier); } .c-sb-verbinden__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--fv-duration) var(--fv-easing); } .c-sb-verbinden.is-3d .c-sb-verbinden__canvas { opacity: 1; } .c-sb-verbinden__scrim { position: absolute; inset: 0; pointer-events: none; } .c-sb-verbinden__scrim::before, .c-sb-verbinden__scrim::after { content: ""; position: absolute; inset: 0; } .c-sb-verbinden__scrim::before { background: linear-gradient(90deg, var(--fv-papier) 0%, transparent 56%); opacity: calc(1 - var(--sbv-light)); } .c-sb-verbinden__scrim::after { background: linear-gradient(90deg, var(--fv-weiss) 0%, transparent 54%); opacity: var(--sbv-light); } /* Etiketten der fünf Gruppen (Position kommt aus dem 3D-Bild) */ .c-sb-verbinden__labels { position: absolute; inset: 0; pointer-events: none; } .c-sb-verbinden__label { position: absolute; left: 0; top: 0; translate: -50% -100%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: var(--fv-radius-10); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); letter-spacing: 0; white-space: nowrap; color: var(--fv-weiss); background: var(--fv-nachtblau); opacity: 0; will-change: transform, opacity; } .c-sb-verbinden__label i { width: 9px; height: 9px; border-radius: 3px; background: var(--fv-rosa); } .c-sb-verbinden__label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; background: var(--fv-rosa); } /* Kapitelpunkte */ .c-sb-verbinden__dots { position: absolute; right: clamp(16px, 2.6vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 3; } .c-sb-verbinden__dot { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--fv-nachtblau); opacity: .35; transition: background-color var(--fv-duration) var(--fv-easing), opacity var(--fv-duration) var(--fv-easing); } .c-sb-verbinden__dot:hover { opacity: 1; } .c-sb-verbinden__dot[aria-current] { background: var(--fv-purpur); opacity: 1; } .c-sb-verbinden__dot:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-sb-verbinden.is-light .c-sb-verbinden__dot { background: var(--fv-nachtblau); } .c-sb-verbinden.is-light .c-sb-verbinden__dot[aria-current] { background: var(--fv-purpur); } .c-sb-verbinden.is-light .c-sb-verbinden__dot:focus-visible { outline-color: var(--fv-focus); } /* ---------------------------------------------------------------- Kapitel */ .c-sb-verbinden__chapters { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100lvh; } .c-sb-verbinden__chapter { counter-increment: sbv; min-height: 135vh; display: flex; align-items: center; scroll-margin-top: -18vh; } .c-sb-verbinden__chapter--first { min-height: 112vh; align-items: flex-start; padding-top: clamp(120px, 24vh, 260px); } .c-sb-verbinden__chapter--last { min-height: 100vh; min-height: 100lvh; color: var(--fv-nachtblau); } .c-sb-verbinden__inner { width: 100%; } .c-sb-verbinden__copy { max-width: 33rem; } .c-sb-verbinden__headline { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); font-weight: var(--fv-fw-bold); text-wrap: balance; color: inherit; } .c-sb-verbinden__text { margin: 0; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-body); color: var(--fv-schiefer); max-width: 30rem; text-wrap: pretty; } .c-sb-verbinden__chapter--last .c-sb-verbinden__text { color: var(--fv-schiefer); } .c-sb-verbinden__groups { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--fv-space-32) 0 0; padding: 0; } .c-sb-verbinden__groups li { padding: 6px 12px; border-radius: var(--fv-radius-10); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-sb-verbinden__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--fv-space-48) 0 0; } .c-sb-verbinden__hint { display: flex; align-items: center; gap: 12px; margin: var(--fv-space-64) 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-nachtblau); } .c-sb-verbinden__hint span { position: relative; width: 2px; height: 44px; background: var(--fv-nebel); overflow: hidden; } .c-sb-verbinden__hint span::after { content: ""; position: absolute; left: 0; top: -40%; width: 2px; height: 40%; background: var(--fv-purpur); animation: sbv-hint 2.2s var(--fv-easing) infinite; } @keyframes sbv-hint { to { top: 100%; } } .c-sb-verbinden__still { display: none; } .c-sb-verbinden a:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 3px; } .c-sb-verbinden__chapter--last a:focus-visible { outline-color: var(--fv-focus); } /* Text tritt im aktiven Kapitel hervor */ .c-sb-verbinden.is-3d .c-sb-verbinden__copy { opacity: .18; transform: translate3d(0, 24px, 0); transition: opacity var(--fv-duration) var(--fv-easing), transform var(--fv-duration) var(--fv-easing); } .c-sb-verbinden.is-3d .c-sb-verbinden__chapter.is-active .c-sb-verbinden__copy { opacity: 1; transform: none; } /* Mobil: Bühne mittig, Text unten */ @media (max-width: 1023px) { .c-sb-verbinden__scrim::before { background: linear-gradient(0deg, var(--fv-papier), transparent 55%); } .c-sb-verbinden__scrim::after { background: linear-gradient(0deg, var(--fv-weiss), transparent 55%); } .c-sb-verbinden__chapter { align-items: flex-end; padding-bottom: 14vh; } .c-sb-verbinden__chapter--first { align-items: flex-end; padding-top: 0; } .c-sb-verbinden__headline { font-size: var(--fv-fs-h1); } .c-sb-verbinden__dots { top: auto; bottom: 24px; transform: none; right: 50%; translate: 50% 0; flex-direction: row; display: none; } .c-sb-verbinden__groups, .c-sb-verbinden__hint { display: none; } .c-sb-verbinden__chapter--last { padding-bottom: 6vh; } .c-sb-verbinden__chapter--last .c-sb-verbinden__headline { font-size: var(--fv-fs-h1); } .c-sb-verbinden__chapter--last .c-sb-verbinden__text { font-size: var(--fv-fs-button); } .c-sb-verbinden__actions { margin-top: var(--fv-space-24); } .c-sb-verbinden__label { font-size: var(--fv-fs-tag); padding: 5px 10px 5px 8px; } } /* ---------------------------------------------------------------- Fallback: Kapitel mit Standbildern */ .c-sb-verbinden.is-fallback .c-sb-verbinden__stage { display: none; } .c-sb-verbinden.is-fallback .c-sb-verbinden__chapters { margin-top: 0; } .c-sb-verbinden.is-fallback .c-sb-verbinden__chapter { min-height: 0; padding: clamp(56px, 8vw, 112px) 0; align-items: center; } .c-sb-verbinden.is-fallback .c-sb-verbinden__chapter--first { padding-top: clamp(72px, 10vw, 140px); background: var(--sbv-night); } .c-sb-verbinden.is-fallback .c-sb-verbinden__chapter--last { background: var(--fv-nebel); } .c-sb-verbinden.is-fallback .c-sb-verbinden__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .c-sb-verbinden.is-fallback .c-sb-verbinden__still { display: block; } .c-sb-verbinden.is-fallback .c-sb-verbinden__hint { display: none; } @media (max-width: 1023px) { .c-sb-verbinden.is-fallback .c-sb-verbinden__inner { grid-template-columns: 1fr; } .c-sb-verbinden.is-fallback .c-sb-verbinden__groups { display: flex; } } @media (scripting: none) { .c-sb-verbinden__stage { display: none; } .c-sb-verbinden__chapters { margin-top: 0; } .c-sb-verbinden__chapter { min-height: 0; padding: clamp(56px, 8vw, 112px) 0; align-items: center; } .c-sb-verbinden__chapter--last { background: var(--fv-nebel); } .c-sb-verbinden__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; } .c-sb-verbinden__still { display: block; } .c-sb-verbinden__hint { display: none; } } @media (scripting: none) and (max-width: 1023px) { .c-sb-verbinden__inner { grid-template-columns: 1fr; } } /* Standbild: Bausteine als CSS-Komposition (gleiche Farben wie die 3D-Szene) */ .c-sb-verbinden__still { position: relative; aspect-ratio: 4 / 3; border-radius: var(--fv-radius-40); overflow: hidden; background: var(--fv-weiss); } .c-sb-verbinden__still i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); background: var(--c, var(--fv-violett)); border-radius: var(--rr, var(--fv-radius-8)); transform: rotate(var(--r, 0deg)); } /* Raum: verstreut, mit Tiefe */ [data-still="raum"] i:nth-child(1) { --x: 10%; --y: 14%; --w: 13%; --h: 10%; --c: var(--fv-purpur); --r: 18deg; } [data-still="raum"] i:nth-child(2) { --x: 31%; --y: 34%; --w: 10%; --h: 8%; --r: -12deg; } [data-still="raum"] i:nth-child(3) { --x: 62%; --y: 12%; --w: 15%; --h: 8%; --c: var(--fv-violett); --r: 8deg; } [data-still="raum"] i:nth-child(4) { --x: 80%; --y: 38%; --w: 10%; --h: 11%; --c: var(--fv-rosa); --r: -20deg; } [data-still="raum"] i:nth-child(5) { --x: 47%; --y: 56%; --w: 16%; --h: 11%; --r: 6deg; } [data-still="raum"] i:nth-child(6) { --x: 14%; --y: 64%; --w: 12%; --h: 8%; --c: var(--fv-pflaume); --r: -8deg; } [data-still="raum"] i:nth-child(7) { --x: 72%; --y: 72%; --w: 9%; --h: 8%; --c: var(--fv-purpur); --r: 25deg; } [data-still="raum"] i:nth-child(8) { --x: 88%; --y: 8%; --w: 6%; --h: 5%; --c: var(--fv-rosa); --rr: 5px; } [data-still="raum"] i:nth-child(9) { --x: 4%; --y: 42%; --w: 5%; --h: 4%; --c: var(--fv-violett); --rr: 4px; --r: 30deg; } [data-still="raum"] i:nth-child(10) { --x: 40%; --y: 7%; --w: 5%; --h: 4%; --rr: 4px; } [data-still="raum"] i:nth-child(11) { --x: 57%; --y: 37%; --w: 4%; --h: 3%; --c: var(--fv-rosa); --rr: 3px; } [data-still="raum"] i:nth-child(12) { --x: 26%; --y: 86%; --w: 6%; --h: 4%; --c: var(--fv-violett); --rr: 4px; --r: -15deg; } [data-still="raum"] i:nth-child(13) { --x: 86%; --y: 86%; --w: 5%; --h: 4%; --rr: 4px; } [data-still="raum"] i:nth-child(14) { --x: 62%; --y: 89%; --w: 4%; --h: 3%; --c: var(--fv-pflaume); --rr: 3px; } /* Verbinden: Gruppen mit Stegen in Purpur */ [data-still="verbinden"] i:nth-child(-n+4) { --c: var(--fv-purpur); --rr: 2px; } [data-still="verbinden"] i:nth-child(1) { --x: 24%; --y: 38%; --w: 30%; --h: 2px; --r: 14deg; } [data-still="verbinden"] i:nth-child(2) { --x: 50%; --y: 44%; --w: 26%; --h: 2px; --r: -22deg; } [data-still="verbinden"] i:nth-child(3) { --x: 30%; --y: 62%; --w: 34%; --h: 2px; --r: -6deg; } [data-still="verbinden"] i:nth-child(4) { --x: 58%; --y: 58%; --w: 22%; --h: 2px; --r: 38deg; } [data-still="verbinden"] i:nth-child(5) { --x: 14%; --y: 28%; --w: 11%; --h: 9%; } [data-still="verbinden"] i:nth-child(6) { --x: 21%; --y: 37%; --w: 9%; --h: 9%; --c: var(--fv-rosa); } [data-still="verbinden"] i:nth-child(7) { --x: 52%; --y: 32%; --w: 11%; --h: 10%; --c: var(--fv-purpur); } [data-still="verbinden"] i:nth-child(8) { --x: 64%; --y: 28%; --w: 9%; --h: 8%; } [data-still="verbinden"] i:nth-child(9) { --x: 75%; --y: 52%; --w: 12%; --h: 9%; --c: var(--fv-violett); } [data-still="verbinden"] i:nth-child(10) { --x: 77%; --y: 63%; --w: 9%; --h: 8%; } [data-still="verbinden"] i:nth-child(11) { --x: 22%; --y: 60%; --w: 11%; --h: 9%; } [data-still="verbinden"] i:nth-child(12) { --x: 29%; --y: 70%; --w: 9%; --h: 8%; --c: var(--fv-pflaume); } [data-still="verbinden"] i:nth-child(13) { --x: 47%; --y: 60%; --w: 10%; --h: 9%; } [data-still="verbinden"] i:nth-child(14) { --x: 55%; --y: 52%; --w: 7%; --h: 7%; --c: var(--fv-rosa); } /* Haus: Ansicht von vorn */ [data-still="haus"] i:nth-child(1) { --x: 6%; --y: 82%; --w: 88%; --h: 5%; --rr: 6px; } [data-still="haus"] i:nth-child(2) { --x: 11%; --y: 30%; --w: 6%; --h: 51%; } [data-still="haus"] i:nth-child(3) { --x: 83%; --y: 30%; --w: 6%; --h: 51%; } [data-still="haus"] i:nth-child(4) { --x: 20%; --y: 33%; --w: 60%; --h: 47%; --c: var(--fv-rosa); --rr: 8px; } [data-still="haus"] i:nth-child(5) { --x: 36%; --y: 42%; --w: 28%; --h: 26%; --c: var(--fv-rosa-hell); --rr: 6px; } [data-still="haus"] i:nth-child(6) { --x: 44%; --y: 58%; --w: 12%; --h: 16%; --c: var(--fv-purpur); } [data-still="haus"] i:nth-child(7) { --x: 8%; --y: 23%; --w: 84%; --h: 6%; --c: var(--fv-violett); --rr: 6px; } [data-still="haus"] i:nth-child(8) { --x: 12%; --y: 14%; --w: 76%; --h: 6%; --c: var(--fv-purpur); --rr: 6px; } [data-still="haus"] i:nth-child(9) { --x: 34%; --y: 75%; --w: 32%; --h: 5%; } [data-still="haus"] i:nth-child(n+10) { --c: var(--fv-rosa-hell); --h: 2px; --rr: 1px; } [data-still="haus"] i:nth-child(10) { --x: 11%; --y: 47%; --w: 6%; } [data-still="haus"] i:nth-child(11) { --x: 11%; --y: 64%; --w: 6%; } [data-still="haus"] i:nth-child(12) { --x: 83%; --y: 47%; --w: 6%; } [data-still="haus"] i:nth-child(13) { --x: 83%; --y: 64%; --w: 6%; } [data-still="haus"] i:nth-child(14) { --x: 6%; --y: 81.4%; --w: 88%; } /* Innen: Blick in den Saal */ [data-still="innen"] i:nth-child(1) { --x: -2%; --y: 84%; --w: 104%; --h: 20%; --rr: 0; } [data-still="innen"] i:nth-child(2) { --x: 24%; --y: 18%; --w: 52%; --h: 60%; --c: var(--fv-rosa); --rr: 8px; } [data-still="innen"] i:nth-child(3) { --x: 36%; --y: 27%; --w: 28%; --h: 32%; --c: var(--fv-rosa-hell); --rr: 6px; } [data-still="innen"] i:nth-child(4) { --x: 43%; --y: 51%; --w: 14%; --h: 19%; --c: var(--fv-purpur); } [data-still="innen"] i:nth-child(5) { --x: 37%; --y: 69%; --w: 26%; --h: 5%; } [data-still="innen"] i:nth-child(6) { --x: 1%; --y: -4%; --w: 11%; --h: 92%; } [data-still="innen"] i:nth-child(7) { --x: 88%; --y: -4%; --w: 11%; --h: 92%; } [data-still="innen"] i:nth-child(8) { --x: 15%; --y: 8%; --w: 6%; --h: 72%; } [data-still="innen"] i:nth-child(9) { --x: 79%; --y: 8%; --w: 6%; --h: 72%; } [data-still="innen"] i:nth-child(10) { --x: -2%; --y: 0; --w: 104%; --h: 7%; --c: var(--fv-violett); --rr: 0; } [data-still="innen"] i:nth-child(11) { --x: 18%; --y: 77%; --w: 20%; --h: 6%; } [data-still="innen"] i:nth-child(12) { --x: 62%; --y: 77%; --w: 20%; --h: 6%; } [data-still="innen"] i:nth-child(n+13) { --c: var(--fv-rosa-hell); --h: 2px; --rr: 1px; } [data-still="innen"] i:nth-child(13) { --x: 1%; --y: 40%; --w: 11%; } [data-still="innen"] i:nth-child(14) { --x: 88%; --y: 40%; --w: 11%; } /* Marke: Bildmarke auf Hell */ [data-still="marke"] { background: var(--fv-nebel); display: none; } [data-still="marke"] img { position: absolute; inset: 14% 18%; width: 64%; height: 72%; object-fit: contain; } .c-sb-verbinden.is-fallback [data-still="marke"] { display: block; } @media (scripting: none) { [data-still="marke"] { display: block; } } /* sections/search.css */ /* Globale Suche: Header-Knopf + Dialog (partials/search.html, js/search.js), nach Brandmanual v1.0. Weisse Karte mit Kartenschatten und Radius 28, Eingabe als Nebel-Feld, Treffer mit Verb-Balken, Fokus 3 px. Keine Glas-/Blur-Flaechen, keine Konturen, Uebergaenge 160 ms ease-out. */ .c-search-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 12px; border-radius: var(--fv-radius-12); color: var(--fv-fg); font-size: 15px; font-weight: var(--fv-fw-bold); text-decoration: none; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-search-btn:hover { background: var(--fv-nebel); color: var(--fv-nachtblau); } .c-search-btn[aria-current] { background: var(--fv-nebel); } .c-search-btn:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-search-btn__icon { flex: none; } /* tech-qa: 1201 bis 1279 px nur die Lupe (Platz fuer die Hauptnavigation in einer Zeile) */ @media (max-width: 1279px) and (min-width: 1201px) { .c-search-btn { padding: 10px; } .c-search-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 1200px) { .c-search-btn { padding: 10px; margin-left: auto; } .c-search-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .c-header__logo { margin-right: 0; } } .c-search { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 12vh - 16px); max-height: calc(100dvh - 12vh - 16px); margin: 10vh auto auto; padding: 0; border: 0; border-radius: var(--fv-radius-28); background: var(--fv-weiss); color: var(--fv-nachtblau); font-family: var(--fv-font-sans); box-shadow: var(--fv-shadow-card); overflow: hidden; --fv-focus: var(--fv-nachtblau); } .c-search::backdrop { background: color-mix(in srgb, var(--fv-nachtblau) 50%, transparent); } .c-search[open] { display: flex; animation: c-search-in var(--fv-duration) var(--fv-easing); } @keyframes c-search-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .c-search[open] { animation: none; } } html:has(.c-search[open]) { overflow: hidden; } .c-search__panel { display: flex; flex-direction: column; width: 100%; min-height: 0; } .c-search__form { display: flex; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 4px 8px 4px 16px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); } .c-search__form:focus-within { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-search__lens { flex: none; color: var(--fv-nachtblau); } .c-search__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--fv-radius-8); background: transparent; color: var(--fv-nachtblau); cursor: pointer; padding: 0; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-search__submit:hover { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-search__submit:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-search__input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--fv-nachtblau); font: inherit; font-size: 18px; font-weight: var(--fv-fw-medium); } .c-search__input::placeholder { color: var(--fv-schiefer); font-weight: var(--fv-fw-regular); } .c-search__input:focus { outline: none; } .c-search__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--fv-radius-8); background: transparent; color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-search__close:hover { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-search__close:focus-visible, .c-search__opt:focus-visible, .c-search__foot a:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-search__results { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 4px; } .c-search__group { padding: 6px 0 4px; } .c-search__group-title { margin: 0; padding: 8px 12px 6px; color: var(--fv-schiefer); font-size: 14px; font-weight: var(--fv-fw-bold); } .c-search__opt { position: relative; display: block; padding: 10px 12px 10px 20px; border-radius: var(--fv-radius-12); color: var(--fv-nachtblau); text-decoration: none; scroll-margin: 8px; transition: background-color var(--fv-duration) var(--fv-easing); } .c-search__opt::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--dot, var(--fv-nebel)); } .c-search__opt[aria-selected="true"], .c-search__opt:hover { background: var(--fv-nebel); } .c-search__title { display: block; font-size: 16px; font-weight: var(--fv-fw-bold); line-height: 1.3; } .c-search__meta { display: block; margin-top: 1px; color: var(--fv-schiefer); font-size: 14px; } .c-search__snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--fv-schiefer); font-size: 14px; line-height: 1.45; } .c-search mark { background: var(--fv-rosa-hell); color: var(--fv-nachtblau); border-radius: var(--fv-radius-mark); padding: 0 .15em; } .c-search__empty { margin: 0; padding: 28px 16px 24px; color: var(--fv-schiefer); font-size: 15px; text-align: center; } .c-search__empty a { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .c-search__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 28px 16px; background: var(--fv-papier); color: var(--fv-schiefer); font-size: 14px; } .c-search__foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .c-search__foot a:hover { text-decoration-thickness: 4px; } .c-search__foot a svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-verb="foerdern"] > .c-search__opt, .c-search__opt[data-verb="foerdern"] { --dot: var(--fv-verb-foerdern); } .c-search__opt[data-verb="verbinden"] { --dot: var(--fv-verb-verbinden); } .c-search__opt[data-verb="unterstuetzen"] { --dot: var(--fv-verb-unterstuetzen); } .c-search__opt[data-verb="entwickeln"] { --dot: var(--fv-verb-entwickeln); } .c-search__opt[data-verb="werben"] { --dot: var(--fv-verb-werben); } @media (max-width: 767px) { .c-search { width: 100vw; margin: 0 auto auto; max-height: 100dvh; border-radius: 0 0 var(--fv-radius-28) var(--fv-radius-28); } .c-search__keys { display: none; } .c-search__input { font-size: 17px; } } /* sections/speedbuild-dashboard.css */ /* Speedbuild-Uebersicht /speedbuild/ (sections/speedbuild-dashboard.html). Status-Tags und Vorschaubilder: speedbuild-mega.css. */ .sb-dash__head { display: grid; gap: var(--fv-space-24); margin-bottom: var(--fv-space-32); } .sb-dash__title { margin: 0; } .sb-dash__intro { margin: 0; max-inline-size: var(--fv-measure); color: var(--fv-schiefer); } .sb-dash__stats { display: flex; flex-wrap: wrap; gap: var(--fv-space-12); list-style: none; margin: 0; padding: 0; } .sb-dash__stat { display: flex; align-items: center; gap: var(--fv-space-12); padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-16); background-color: var(--fv-weiss); color: var(--fv-nachtblau); font-weight: var(--fv-fw-semibold); box-shadow: var(--fv-shadow-card); } .sb-dash__num { font-size: var(--fv-fs-h3); line-height: 1; font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; } .sb-dash__tools { display: grid; gap: var(--fv-space-16); margin-bottom: var(--fv-space-48); padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .sb-dash__tools[hidden] { display: none; } .sb-dash__search { display: grid; gap: var(--fv-space-8); max-inline-size: 520px; } .sb-dash__label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .sb-dash__input { min-block-size: 48px; padding: 0 var(--fv-space-16); border: 0; border-radius: var(--fv-radius-12); background-color: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; } .sb-dash__input::placeholder { color: var(--fv-schiefer); } .sb-dash__input:focus-visible { outline: var(--fv-focus-width, 3px) solid var(--fv-focus); outline-offset: 2px; } .sb-dash__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8); } .sb-dash__filter .sb-dash__label { min-inline-size: 64px; } .sb-chip { display: inline-flex; align-items: center; gap: var(--fv-space-8); min-block-size: 36px; padding: 6px 12px; border: 0; border-radius: var(--fv-radius-10); background-color: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-semibold); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .sb-chip[data-verb]::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 3px; background-color: var(--sb-verb); } .sb-chip:hover { background-color: var(--fv-papier); } .sb-chip[aria-pressed="true"] { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .sb-chip:focus-visible, .sb-dash__reset:focus-visible { outline: var(--fv-focus-width, 3px) solid var(--fv-focus); outline-offset: 2px; } .sb-dash__count { margin: 0; display: flex; flex-wrap: wrap; gap: var(--fv-space-16); align-items: baseline; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-semibold); color: var(--fv-schiefer); } .sb-dash__reset { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; } .sb-dash__group { margin-top: var(--fv-space-64); } .sb-dash__group:first-of-type, .sb-dash__tools + .sb-dash__group { margin-top: 0; } .sb-dash__group[hidden] { display: none; } .sb-dash__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fv-space-8) var(--fv-space-24); margin-bottom: var(--fv-space-24); } .sb-dash__gtitle { display: flex; align-items: center; gap: var(--fv-space-12); margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); } .sb-dash__gtitle::before { content: ""; flex: none; inline-size: 14px; block-size: 14px; border-radius: 4px; background-color: var(--sb-verb); } .sb-dash__gtext { margin: 0; color: var(--fv-schiefer); } .sb-dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--fv-space-24); list-style: none; margin: 0; padding: 0; } .sb-dash__grid > li[hidden] { display: none; } .sb-dash__flat { margin-top: 0; } .sb-dash__empty { margin: var(--fv-space-32) 0 0; font-weight: var(--fv-fw-semibold); } .sb-card { display: flex; flex-direction: column; block-size: 100%; padding: 0; overflow: hidden; color: var(--fv-nachtblau); } a.sb-card { text-decoration: none; } a.sb-card:focus-visible { outline: var(--fv-focus-width, 3px) solid var(--fv-focus); outline-offset: 3px; } .sb-card .sb-thumb--card { inline-size: 100%; border-radius: 0; border-bottom: 1px solid var(--fv-nebel); } .sb-card__body { display: flex; flex-direction: column; gap: var(--fv-space-8); flex: 1; padding: var(--fv-space-16) var(--fv-space-24) var(--fv-space-24); } .sb-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8) var(--fv-space-12); } .sb-card { hyphens: manual; } .sb-card__title { margin: var(--fv-space-4) 0 0; font-size: 1.25rem; line-height: 1.25; font-weight: var(--fv-fw-bold); } .sb-card__text { color: var(--fv-schiefer); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small, 1.5); } .sb-card__meta { margin-top: auto; padding-top: var(--fv-space-8); color: var(--fv-schiefer); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .sb-card.is-pending { opacity: .8; } /* Hervorhebung Neu / Zur Freigabe: Bausteinkante oben in Statusfarbe */ .sb-card.is-neu, .sb-card.is-freigabe { position: relative; } .sb-card.is-neu::before, .sb-card.is-freigabe::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 6px; z-index: 1; background-color: var(--fv-rosa); } .sb-card.is-freigabe::before { background-color: var(--fv-purpur); } @media (max-width: 640px) { .sb-dash__tools { padding: var(--fv-space-16); } .sb-dash__filter .sb-dash__label { inline-size: 100%; } .sb-dash__stat { padding: var(--fv-space-8) var(--fv-space-12); } } /* sections/speedbuild-mega.css */ /* Speedbuild: Mega-Navigation (partials/speedbuild-mega.html), Status-Tags und Vorschaubilder. Daten: speedbuild.json. Desktop = Topbar-Instanz, Panel volle Breite unter dem Header. Mobil = Instanz im Menue, Gruppen aufklappbar. Nur --fv-*-Tokens. Tags Radius 10, Karten Radius 24, keine Pillen, kein Glas. */ /* ---- Status-Tag (Radius 10, Bold 13) ---- */ .sb-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--fv-radius-10); background-color: var(--fv-nebel); color: var(--fv-nachtblau); font-family: var(--fv-font-sans); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: 1.2; white-space: nowrap; } .sb-status--neu { background-color: var(--fv-rosa); color: var(--fv-nachtblau); } .sb-status--freigabe { background-color: var(--fv-purpur); color: var(--fv-weiss); } .sb-status--in-arbeit { background-color: var(--fv-nebel); color: var(--fv-nachtblau); } .sb-status--archiv { background-color: var(--fv-papier); color: var(--fv-schiefer); } /* ---- Vorschaubild (fehlt das Bild: Papier-Kachel mit Baustein in Verbfarbe) ---- */ .sb-thumb { --sb-verb: var(--fv-verb-foerdern); position: relative; display: block; flex: none; inline-size: 64px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--fv-radius-8); background-color: var(--fv-papier); } .sb-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; } .sb-thumb--empty::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 30%; aspect-ratio: 1; border-radius: 25%; background-color: var(--sb-verb); } [data-verb="foerdern"] { --sb-verb: var(--fv-verb-foerdern); } [data-verb="verbinden"] { --sb-verb: var(--fv-verb-verbinden); } [data-verb="unterstuetzen"] { --sb-verb: var(--fv-verb-unterstuetzen); } [data-verb="entwickeln"] { --sb-verb: var(--fv-verb-entwickeln); } [data-verb="werben"] { --sb-verb: var(--fv-verb-werben); } /* ---- Mega-Panel: gemeinsame Teile. Standard verborgen (hidden im Markup, JS schaltet um) ---- */ .sb-mega[hidden] { display: none !important; } .sb-mega { hyphens: manual; color: var(--fv-nachtblau); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .sb-mega__title { margin: 0; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); font-weight: var(--fv-fw-bold); letter-spacing: var(--fv-ls-h3); } .sb-mega__lead { margin: var(--fv-space-8) 0 var(--fv-space-16); color: var(--fv-schiefer); font-size: var(--fv-fs-small); max-inline-size: 34ch; } .sb-mega__all { font-weight: var(--fv-fw-semibold); font-size: var(--fv-fs-small); } .sb-mega__hltitle { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .sb-mega__hllist, .sb-mega__list { list-style: none; margin: 0; padding: 0; } .sb-mega a { color: var(--fv-nachtblau); text-decoration: none; } .sb-mega :is(a, button):focus-visible { outline: var(--fv-focus-width, 3px) solid var(--fv-focus); outline-offset: 2px; } .sb-mega__link { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--fv-space-12); padding: 6px; border-radius: var(--fv-radius-12); transition: background-color var(--fv-duration) var(--fv-easing); } a.sb-mega__link:hover, a.sb-mega__hlcard:hover { background-color: var(--fv-nebel); } .sb-mega__link.is-pending, .sb-mega__hlcard.is-pending { opacity: .72; } .sb-mega__ltext, .sb-mega__hltext { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; } .sb-mega__lname, .sb-mega__hlname { font-size: 0.9375rem; font-weight: var(--fv-fw-semibold); line-height: 1.25; } .sb-mega__lmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sb-mega__lmeta:empty { display: none; } .sb-mega__lmeta .sb-status, .sb-mega__hltext .sb-status { padding: 2px 7px; font-size: 0.75rem; align-self: flex-start; } .sb-mega__date { color: var(--fv-schiefer); font-size: 0.8125rem; } .sb-mega [aria-current="page"] :is(.sb-mega__lname, .sb-mega__hlname) { text-decoration: underline; text-decoration-color: var(--fv-rosa); text-decoration-thickness: var(--fv-underline-thickness); text-underline-offset: var(--fv-underline-offset); } .sb-mega__gtitle { margin: 0; } .sb-mega__gbtn { display: flex; align-items: center; gap: var(--fv-space-8); inline-size: 100%; padding: 0; border: 0; background: none; color: var(--fv-nachtblau); font: inherit; font-weight: var(--fv-fw-bold); text-align: left; cursor: pointer; } .sb-mega__gbtn::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-radius: 3px; background-color: var(--sb-verb); } .sb-mega__count { color: var(--fv-schiefer); font-weight: var(--fv-fw-medium); font-size: var(--fv-fs-small); } .sb-mega__chev { margin-left: auto; color: var(--fv-schiefer); transition: transform var(--fv-duration) var(--fv-easing); } /* ---- Desktop: Topbar-Instanz, Panel volle Breite unter dem Header ---- */ .c-topbar .sb-mega-item { position: static; } .c-topbar .sb-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 60; max-block-size: var(--sb-mega-max, 75vh); overflow-y: auto; overscroll-behavior: contain; background-color: var(--fv-weiss); border-top: 1px solid var(--fv-nebel); box-shadow: 0 24px 48px rgba(23, 29, 58, 0.12); /* Kartenschatten, fuer das Panel tiefer gestaffelt */ opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0); transition: opacity .18s var(--fv-easing), transform .18s var(--fv-easing), visibility 0s linear .18s; } /* tech-qa: Hover-Bruecke vom Eintrag bis zum Panel (Masse setzt js/speedbuild-mega.js); Bezug ist der Header (Eintrag ist static) */ .c-topbar .sb-mega-item.is-open::after { content: ""; position: absolute; left: var(--sbb-l, 0); top: var(--sbb-t, 0); width: var(--sbb-w, 0); height: var(--sbb-h, 0); } .c-topbar .sb-mega-item.is-open > .sb-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--fv-easing), transform .18s var(--fv-easing); } .c-topbar .sb-mega-item.is-open > .sb-mega-item__toggle { transform: rotate(180deg); color: var(--fv-nachtblau); } .c-topbar .sb-mega__inner { padding-block: var(--fv-space-32) var(--fv-space-48); } .c-topbar .sb-mega__head { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: var(--fv-space-32); padding-bottom: var(--fv-space-24); margin-bottom: var(--fv-space-24); border-bottom: 1px solid var(--fv-nebel); } .c-topbar .sb-mega__hllist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--fv-space-12); } .c-topbar .sb-mega__hlcard { display: flex; align-items: center; gap: var(--fv-space-12); block-size: 100%; padding: var(--fv-space-8); border-radius: var(--fv-radius-16); background-color: var(--fv-papier); transition: background-color var(--fv-duration) var(--fv-easing); } .c-topbar .sb-thumb--hl { inline-size: 112px; border-radius: var(--fv-radius-12); } .c-topbar .sb-mega__groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fv-space-24); } .c-topbar .sb-mega__gbtn { cursor: default; padding: 0 6px var(--fv-space-12); font-size: 1rem; } .c-topbar .sb-mega__gbtn:disabled { opacity: 1; } .c-topbar .sb-mega__chev { display: none; } .c-topbar .sb-mega__list { display: grid; gap: 2px; } /* Speedbuild-Eintrag in der Topbar etwas deutlicher */ .c-topbar .sb-mega-item.is-open > .c-util__link { color: var(--fv-nachtblau); } @media (max-width: 1360px) and (min-width: 1201px) { .c-topbar .sb-mega__groups { gap: var(--fv-space-16); } .c-topbar .sb-mega__link { grid-template-columns: 48px 1fr; gap: var(--fv-space-8); } .c-topbar .sb-mega__link .sb-thumb { inline-size: 48px; } } /* ---- Mobil: Instanz im Menue, aufklappbare Gruppen ---- */ .c-nav__utility .sb-mega-item { flex-basis: 100%; flex-wrap: wrap; } .c-nav__utility .sb-mega { display: none; inline-size: 100%; padding-top: var(--fv-space-12); } .c-nav__utility .sb-mega-item.is-open > .sb-mega { display: block; } .c-nav__utility .sb-mega-item.is-open > .sb-mega-item__toggle { transform: rotate(180deg); } .c-nav__utility .sb-mega-item__toggle { width: 48px; height: 44px; } .c-nav__utility .sb-mega__inner { padding-inline: 0; } .c-nav__utility .sb-mega__lead, .c-nav__utility .sb-mega__title { display: none; } .c-nav__utility .sb-mega__intro { padding: 0 0 var(--fv-space-12); } .c-nav__utility .sb-mega__hl { padding: var(--fv-space-12); margin-bottom: var(--fv-space-8); border-radius: var(--fv-radius-16); background-color: var(--fv-papier); } .c-nav__utility .sb-mega__hllist { display: grid; gap: 2px; } .c-nav__utility .sb-mega__hlcard { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--fv-space-12); padding: 6px; border-radius: var(--fv-radius-12); } .c-nav__utility .sb-thumb--hl { inline-size: 64px; } .c-nav__utility .sb-mega__group { border-bottom: 1px solid var(--fv-nebel); } .c-nav__utility .sb-mega__gbtn { min-block-size: 52px; padding: var(--fv-space-12) 0; font-size: 1.0625rem; } .c-nav__utility .sb-mega__group.is-open .sb-mega__chev { transform: rotate(180deg); } .c-nav__utility .sb-mega__list { padding-bottom: var(--fv-space-12); } .c-nav__utility .sb-mega__list[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .c-topbar .sb-mega, .c-topbar .sb-mega-item.is-open > .sb-mega { transition: none; transform: none; } .sb-mega__chev, .sb-mega__link { transition: none; } } /* sections/sponsor-wall.css */ /* sponsor-wall (Brandmanual v1.0, Welle 2): Foerderer- und Sponsorenwand ohne Konturen. Karten = .fv-card-Gestalt (Weiss, Radius 24, Kartenschatten), Logo-Kachel Papier Radius 16, Platzhalter-Logo als Baustein (Nebel, Nachtblau-Kuerzel). Filter als Tags (Radius 10): aus = Nebel, an = Nachtblau. Stufen ueber Kartengroesse. Keine Kreise, Boegen, Drehungen. */ .c-sw__head { max-width: 760px; margin-bottom: var(--fv-space-48); } /* Lea-Runde 15.10.2026, Nr. 103: Stufen-Gruppierung der Sponsorenwand (echte Daten), eine Ueberschrift je Stufe (sponsor-wall.html.twig, collections.sponsoren_stufen). */ .c-sw__stufe { margin-bottom: var(--fv-space-48); } .c-sw__stufe:last-child { margin-bottom: 0; } .c-sw__stufe-title { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-bold); margin: 0 0 var(--fv-space-16); color: var(--fv-nachtblau); } .c-sw__intro { margin: var(--fv-space-16) 0 0; max-width: 58ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); color: var(--fv-fg-muted); } .c-sw__filter { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); margin-bottom: var(--fv-space-8); } .c-sw__filter[hidden] { display: none; } .c-sw__chip { font: inherit; font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-button); padding: 10px 16px; min-height: 44px; border: 0; border-radius: var(--fv-radius-10); background-color: var(--fv-nebel); color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-sw__chip:hover { background-color: var(--fv-flieder-hell); } .c-sw__chip.is-on { background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .c-sw__chip:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-sw__status { min-height: 1.5em; margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-sw__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fv-fuge); list-style: none; margin: 0; padding: 0; } .c-sw__item { grid-column: span 2; display: flex; } .c-sw__item.is-haupt { grid-column: span 3; } .c-sw__item[hidden] { display: none; } .c-sw__card { position: relative; display: flex; flex-direction: column; width: 100%; padding: var(--fv-card-padding); border: 0; border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .c-sw__item.is-haupt .c-sw__card { border-radius: var(--fv-radius-28); } .c-sw__logo { position: relative; display: grid; place-items: center; height: 88px; margin-bottom: var(--fv-space-24); border-radius: var(--fv-radius-16); background-color: var(--fv-papier); overflow: hidden; } .c-sw__item.is-haupt .c-sw__logo { height: 128px; } .c-sw__item.is-unterstuetzer .c-sw__logo { height: 64px; } /* Platzhalter-Logo: Baustein, Proportion je shape (Radius ca. 20 % der kurzen Seite) */ .c-sw__logo::before { content: ""; position: absolute; inline-size: 56px; block-size: 56px; border-radius: 12px; background-color: var(--fv-nebel); } .c-sw__logo.is-square::before { inline-size: 72px; block-size: 48px; border-radius: 10px; } .c-sw__logo.is-arc::before { inline-size: 48px; block-size: 60px; border-radius: 10px; } .c-sw__item.is-haupt .c-sw__logo::before { inline-size: 80px; block-size: 80px; border-radius: 16px; } .c-sw__item.is-haupt .c-sw__logo.is-square::before { inline-size: 104px; block-size: 68px; border-radius: 14px; } .c-sw__item.is-haupt .c-sw__logo.is-arc::before { inline-size: 68px; block-size: 88px; border-radius: 14px; } .c-sw__item.is-unterstuetzer .c-sw__logo::before { inline-size: 40px; block-size: 40px; border-radius: 8px; } .c-sw__item.is-unterstuetzer .c-sw__logo.is-square::before { inline-size: 52px; block-size: 36px; border-radius: 8px; } .c-sw__item.is-unterstuetzer .c-sw__logo.is-arc::before { inline-size: 36px; block-size: 44px; border-radius: 7px; } .c-sw__mark { position: relative; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-sw__item.is-haupt .c-sw__mark { font-size: var(--fv-fs-h3); } .c-sw__item.is-unterstuetzer .c-sw__mark { font-size: var(--fv-fs-small); } .c-sw__tier { align-self: flex-start; margin: 0 0 var(--fv-space-12); padding: 6px 14px; border-radius: var(--fv-radius-10); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); background-color: var(--fv-nachtblau); color: var(--fv-weiss); } .c-sw__item:not(.is-haupt) .c-sw__tier { background-color: var(--fv-nebel); color: var(--fv-nachtblau); } .c-sw__name { margin: 0; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: 1.25; color: var(--fv-nachtblau); } .c-sw__item.is-haupt .c-sw__name { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } .c-sw__areas { margin: var(--fv-space-8) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-sw__example { align-self: flex-start; margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-sw__example::before { content: "["; } .c-sw__example::after { content: "]"; } .c-sw__link { margin: auto 0 0; padding-top: var(--fv-space-24); font-size: var(--fv-fs-small); } .c-sw__link a { --fv-fg: var(--fv-nachtblau); --fv-focus: var(--fv-nachtblau); } .c-sw__card:hover .c-sw__link a { text-decoration-thickness: 4px; } .c-sw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .c-sw__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } @media (max-width: 1024px) { .c-sw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-sw__item, .c-sw__item.is-haupt, .c-sw__item.is-unterstuetzer { grid-column: span 1; } .c-sw__item.is-haupt { grid-column: 1 / -1; } } @media (max-width: 767px) { .c-sw__grid { gap: var(--fv-space-12); } } @media (max-width: 560px) { .c-sw__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .c-sw__chip { transition: none; } } /* Echte Logos (Handoff v2): gleich grosse weisse Kacheln, Logo per max-height/max-width optisch normiert, farbig. */ .c-sw__grid--logos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .c-sw__item--logo { grid-column: auto; } .c-sw__tile { display: grid; place-items: center; width: 100%; min-height: 128px; padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background-color: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } /* Mobil-QA 19.10.2026: feste px-Maximalgroessen liefen bei sehr schmalen Kacheln (2-spaltig ab 767px, dazu kleines Tile-Padding) aus der Box, weil die Kachel selbst schmaler als 120/150px werden kann. Jetzt relativ zur Kachel (max-width/max-height: 100%), der Innenabstand kommt vom Padding von .c-sw__tile (Aufgabe c). Gilt jetzt auf allen Breiten gleich, die 767px-Ueberschreibung der Bildgroesse entfaellt. */ .c-sw__tile img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; } @media (max-width: 767px) { .c-sw__grid--logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .c-sw__tile { min-height: 96px; padding: var(--fv-space-16); } } /* Responsive-QA Runde 8: Logo-Wand ohne verwaiste Reste, letzte Reihe zentriert */ @media (min-width: 768px) { .c-sw__grid--logos { display: flex; flex-wrap: wrap; justify-content: center; } .c-sw__grid--logos > .c-sw__item--logo { flex: 0 0 calc((100% - 3 * var(--fv-fuge)) / 4); min-width: 0; } } @media (min-width: 1100px) { .c-sw__grid--logos > .c-sw__item--logo { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } /* Responsive-QA Runde 8: Spaltenzahl passend zur Anzahl, keine verwaiste Reihe */ @media (min-width: 768px) and (max-width: 899px) { .c-sw__grid--logos:has(> :nth-child(5):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 900px) and (max-width: 1099px) { .c-sw__grid--logos:has(> :nth-child(5):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } @media (min-width: 1100px) { .c-sw__grid--logos:has(> :nth-child(5):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 4 * var(--fv-fuge)) / 5); } } @media (min-width: 1100px) { .c-sw__grid--logos:has(> :nth-child(12):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 5 * var(--fv-fuge)) / 6); } } @media (min-width: 1100px) { .c-sw__grid--logos:has(> :nth-child(16):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 3 * var(--fv-fuge)) / 4); } } @media (min-width: 768px) and (max-width: 899px) { .c-sw__grid--logos:has(> :nth-child(6):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 1100px) { .c-sw__grid--logos:has(> :nth-child(6):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 5 * var(--fv-fuge)) / 6); } } @media (min-width: 768px) and (max-width: 899px) { .c-sw__grid--logos:has(> :nth-child(9):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } @media (min-width: 1100px) { .c-sw__grid--logos:has(> :nth-child(9):last-child) > .c-sw__item--logo { flex-basis: calc((100% - 2 * var(--fv-fuge)) / 3); } } /* sections/szene-pause.css */ /* Pause-Knopf der 3D-Szenen (js/lib/bildmarke-3d.js, pauseButton). WCAG 2.2.2: Bewegung länger als 5 s anhaltbar. Klein, unten rechts in der Bühne, Manual-Stil (Weiß, Nachtblau, Button-Radius). aria-pressed="true" = angehalten. */ .c-szene-pause-host { position: relative; } .c-szene-pause { position: absolute; right: var(--szene-pause-right, var(--fv-space-16)); bottom: var(--szene-pause-bottom, var(--fv-space-16)); z-index: 3; display: inline-flex; align-items: center; gap: var(--fv-space-8); min-height: 36px; padding: 0 var(--fv-space-12); border: 1px solid color-mix(in srgb, var(--fv-nachtblau) 14%, transparent); border-radius: var(--fv-radius-12); background: color-mix(in srgb, var(--fv-weiss) 88%, transparent); color: var(--fv-nachtblau); font: inherit; font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-medium); line-height: 1; cursor: pointer; opacity: 0.78; transition: opacity 0.2s ease, background-color 0.2s ease; } .c-szene-pause:hover, .c-szene-pause:focus-visible, .c-szene-pause[aria-pressed="true"] { opacity: 1; background: var(--fv-weiss); } .c-szene-pause:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-szene-pause__icon { width: 10px; height: 11px; box-sizing: border-box; border-inline: 3px solid currentColor; } .c-szene-pause[aria-pressed="true"] .c-szene-pause__icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } @media (max-width: 599px) { .c-szene-pause__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .c-szene-pause { padding: 0 var(--fv-space-12); min-width: 36px; justify-content: center; } } .c-szene-pause--inline { position: static; align-self: center; } /* sections/teaser-list.css */ /* teaser-list: Termine/News als .fv-card (Handoff 8.5, Polish-Runde 1 R7): optional Bild, Datum, Titel, ein Satz, ein Link. Kein Verb-Tag (Verb nur ueber Farbe). Hover: Titel mit Rosa-Unterstrich (R9-Werte), max. 4 px anheben. */ .c-teasers__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); } @media (min-width: 900px) { .c-teasers__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .c-post { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-12); transition: transform var(--fv-duration) var(--fv-easing); } .c-post:has(a):hover { transform: translateY(-4px); } .c-post:has(a:focus-visible) { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-post__image { display: block; inline-size: calc(100% + 2 * var(--fv-card-padding)); max-inline-size: none; margin: calc(-1 * var(--fv-card-padding)) calc(-1 * var(--fv-card-padding)) var(--fv-space-12); aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--fv-radius-24) var(--fv-radius-24) 0 0; } .c-post__date { margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); font-variant-numeric: tabular-nums lining-nums; } .c-post__body > .c-tag { display: none; } /* Altmarkup: Verb-Tag entfaellt (R7) */ .c-post__title { font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); margin: 0 0 var(--fv-space-8); } .c-post__title a { color: var(--fv-nachtblau); text-decoration: underline var(--fv-underline-thickness) transparent; text-underline-offset: var(--fv-underline-offset); text-decoration-skip-ink: none; transition: text-decoration-color var(--fv-duration) var(--fv-easing); } .c-post__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .c-post:hover .c-post__title a, .c-post__title a:focus-visible { text-decoration-color: var(--fv-rosa); } .c-post__title a:focus-visible { outline: none; } .c-post__text { color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .c-teasers .c-actions { margin-top: var(--fv-space-32); } @media (prefers-reduced-motion: reduce) { .c-post:has(a):hover { transform: none; } } /* sections/termin-cards.css */ /* Sektion termin-cards: Raster; Foto 128 x 128 Radius 18, Verbkachel 24 x 24 Radius 6 ueberlappt die Ecke. Mobil Foto 96 px. */ .fv-termin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } .fv-termin { display: flex; gap: var(--fv-space-24); align-items: center; padding: var(--fv-space-24); --tile: var(--fv-nachtblau); } .fv-termin[data-verb="verbinden"] { --tile: var(--fv-verb-verbinden); } .fv-termin[data-verb="unterstuetzen"] { --tile: var(--fv-verb-unterstuetzen); } .fv-termin[data-verb="entwickeln"] { --tile: var(--fv-verb-entwickeln); } .fv-termin[data-verb="werben"] { --tile: var(--fv-verb-werben); } .fv-termin[data-verb="foerdern"] { --tile: var(--fv-verb-foerdern); } .fv-termin__media { position: relative; flex: none; width: 128px; height: 128px; } .fv-termin__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; } .fv-termin__img--ph { display: grid; place-items: center; background: var(--fv-nebel); color: var(--fv-schiefer); font-size: var(--fv-fs-small); text-align: center; background-image: var(--fv-gradient-glow-hell); } .fv-termin__tile { position: absolute; left: -8px; top: -8px; width: 24px; height: 24px; border-radius: 6px; background: var(--tile); } .fv-termin__body { display: flex; flex-direction: column; gap: var(--fv-space-8); min-width: 0; } .fv-termin__body > .fv-verbtag { margin: 0; } .fv-termin__title { hyphens: auto; overflow-wrap: break-word; margin: 0; font-size: 19px; font-weight: var(--fv-fw-bold); line-height: 1.25; color: var(--fv-nachtblau); } .fv-termin__date { margin: 0; font-size: var(--fv-fs-tag); line-height: 1.5; color: var(--fv-schiefer); font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .fv-termin { gap: var(--fv-space-16); padding: var(--fv-space-16); } .fv-termin__media { width: 96px; height: 96px; } } /* sections/text-block.css */ /* text-block: Textsektion (Handoff 4; Polish-Runde 1 R11). Fliesstext max. 66 Zeichen. Varianten (Feld layout): einspaltig (Standard, schmale Spalte) | zweispaltig (Headline links, Text rechts) | band (zentriert, grosser Zwischenruf). */ .c-text-block__headline { margin: 0 0 var(--fv-space-24); } .c-text-block__body { max-inline-size: var(--fv-measure); line-height: var(--fv-lh-body); } .c-text-block__quote { margin: var(--fv-space-32) 0 0; max-inline-size: 30ch; } .c-text-block__cta { margin: var(--fv-space-32) 0 0; } /* ---- zweispaltig ---- */ .c-text-block--zweispaltig .c-text-block__inner { max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); } @media (min-width: 900px) { .c-text-block--zweispaltig .c-text-block__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--fv-space-64); align-items: start; } .c-text-block--zweispaltig .c-text-block__headline { margin: 0; } } /* ---- band ---- */ .c-text-block--band .c-text-block__inner { max-width: calc(960px + 2 * var(--fv-page-margin)); text-align: center; } .c-text-block--band .c-text-block__body { margin-inline: auto; } .c-text-block--band .c-text-block__quote { max-inline-size: 32ch; margin-inline: auto; font-size: clamp(1.75rem, 1.4286rem + 1.3333vw, 2.625rem); } .c-text-block--band .c-text-block__headline + .c-text-block__main > .c-text-block__body:empty + .c-text-block__quote { margin-top: 0; } /* sections/text-media.css */ /* text-media (Handoff 4, 8.11, 10.1; Polish-Runde 1 R4, R11): Text neben Bildflaeche (Radius 40); Fliesstext max. 66 Zeichen; optional Checkliste und Zwischenruf. Bildflaechen clean: eine ruhige Form, keine Zierstriche/Balken/Eckbausteine. Varianten (Feld layout): bild-rechts (Standard, = media-right) | bild-links (= media-left) | einspaltig | zweispaltig | band. */ .c-text-media__inner { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; } @media (min-width: 900px) { .c-text-media:is(.c-text-media--media-right, .c-text-media--media-left, .c-text-media--bild-rechts, .c-text-media--bild-links) .c-text-media__inner { grid-template-columns: 1fr 1fr; } .c-text-media:is(.c-text-media--media-left, .c-text-media--bild-links) .c-text-media__figure { order: -1; } } .c-text-media__headline { margin: 0 0 var(--fv-space-24); font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-text-media .c-prose { max-inline-size: var(--fv-measure); line-height: var(--fv-lh-body); } .c-text-media__checks { margin: var(--fv-space-24) 0 0; } .c-text-media__quote { margin: var(--fv-space-32) 0 0; max-inline-size: 28ch; } .c-text-media .c-actions { margin-top: var(--fv-space-32); } .c-text-media__figure { margin: 0; } .c-text-media__figure img { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fv-radius-40); } /* abstrakte Komposition (partials/deco.html): Flaeche mit Radius 40 statt Maske */ .c-text-media .c-text-media__figure > .deco { clip-path: none; border-radius: var(--fv-radius-40); overflow: hidden; } /* Ohne Bild: EINE ruhige Flaeche in der Verbfarbe (R4). Weitere Spans aus Altmarkup bleiben unsichtbar. */ .c-blocks { position: relative; aspect-ratio: 4 / 3; } .c-blocks span { display: none; } .c-blocks .c-blocks__a { display: block; position: absolute; inset: 0; border-radius: var(--fv-radius-40); background: var(--accent, var(--fv-nachtblau)); } /* ---- einspaltig: ruhige Textspalte, Bild (falls vorhanden) breit darunter ---- */ .c-text-media--einspaltig .c-text-media__inner, .c-text-media--zweispaltig .c-text-media__inner, .c-text-media--band .c-text-media__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--fv-space-48); } .c-text-media--einspaltig .c-text-media__text { max-inline-size: var(--fv-measure); } :is(.c-text-media--einspaltig, .c-text-media--zweispaltig, .c-text-media--band) .c-text-media__figure:has(> .c-blocks) { display: none; } :is(.c-text-media--einspaltig, .c-text-media--zweispaltig, .c-text-media--band) .c-text-media__figure img, :is(.c-text-media--einspaltig, .c-text-media--zweispaltig, .c-text-media--band) .c-text-media__figure > .deco { aspect-ratio: 16 / 7; } /* ---- zweispaltig: Headline ueber volle Breite, Fliesstext in zwei Spalten ---- */ .c-text-media--zweispaltig .c-text-media__headline { max-inline-size: 22ch; } @media (min-width: 900px) { .c-text-media--zweispaltig .c-prose { max-inline-size: none; columns: 2; column-gap: var(--fv-space-64); } .c-text-media--zweispaltig .c-prose > * { break-inside: avoid; } } /* ---- band: zentriertes Zitat-/Zwischenruf-Band ---- */ .c-text-media--band .c-text-media__text { max-inline-size: 900px; margin-inline: auto; text-align: center; } .c-text-media--band .c-prose { margin-inline: auto; } .c-text-media--band .c-text-media__quote { max-inline-size: 32ch; margin-inline: auto; font-size: clamp(1.75rem, 1.4286rem + 1.3333vw, 2.625rem); } .c-text-media--band :is(.c-actions, .c-tags) { justify-content: center; } .c-text-media--band .fv-checklist { justify-content: center; text-align: start; } /* Ersatzflaeche auf dunklem Grund: Nachtblau verschwindet, dort Rosa */ :is(.is-dark, .is-nacht):is([data-verb="foerdern"], :not([data-verb])) .c-blocks .c-blocks__a { background: var(--fv-rosa); } /* sections/tier-cards.css */ /* Sektion tier-cards (Brandmanual v1.0): Mitgliedsgruppen, Spendenzwecke, Pakete, Wege. Karte = .fv-card (Radius 28, Kartenschatten, keine Kontur), Verb als .fv-verbtag, Preis in tabular-nums, Leistungen als .fv-checklist (8.7), Button .fv-btn. Hervorgehobene Karte: Nachtblau (auf dunklem Grund Purpur). */ .c-tiers__head { max-width: 760px; margin: 0 0 var(--fv-space-48); } .c-tiers__title { margin-bottom: var(--fv-space-16); } .c-tiers__intro { font-size: var(--fv-fs-lead); color: var(--fv-fg-muted); max-width: 60ch; margin: 0; } .c-tiers__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; } @media (min-width: 1100px) { .c-tiers__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .c-tiers__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } .c-tiers__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 700px) and (max-width: 1099px) { .c-tiers__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .c-tiers__grid { gap: 12px; } } .c-tier { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-24); margin: 0; overflow: hidden; --tier-verb: var(--fv-verb-foerdern); } .c-tier[data-verb="verbinden"] { --tier-verb: var(--fv-verb-verbinden); } .c-tier[data-verb="unterstuetzen"] { --tier-verb: var(--fv-verb-unterstuetzen); } .c-tier[data-verb="entwickeln"] { --tier-verb: var(--fv-verb-entwickeln); } .c-tier[data-verb="werben"] { --tier-verb: var(--fv-verb-werben); } /* Kopf: Name, darunter Verb-Tag als Meta-Zeile (keine Ueberzeile); rechts oben zwei Bausteine in Verbfarbe */ .c-tier__head { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-8); padding-inline-end: 88px; min-height: 96px; } .c-tier__blocks { position: absolute; inset-inline-end: 0; inset-block-start: 0; inline-size: 72px; block-size: 64px; } .c-tier__blocks i { position: absolute; display: block; background: var(--tier-verb); } .c-tier__blocks i:nth-child(1) { inset-inline-end: 0; inset-block-start: 0; inline-size: 44px; block-size: 36px; border-radius: var(--fv-radius-12); } .c-tier__blocks i:nth-child(2) { inset-inline-end: 0; inset-block-start: calc(36px + var(--fv-fuge)); inline-size: 72px; block-size: 12px; border-radius: 4px; opacity: .35; } .c-tier__label { margin: 0; font-size: var(--fv-fs-small); } .c-tier__name { margin: 0; font-size: var(--fv-fs-h3); line-height: 1.2; } .c-tier__badge { align-self: flex-start; margin: 0 0 var(--fv-space-8); } .c-tier__body { display: flex; flex-direction: column; flex: 1; gap: var(--fv-space-16); } .c-tier__pricing { margin: 0; } .c-tier__plabel { margin: 0 0 var(--fv-space-4); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-fg-muted); } .c-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--fv-space-4) var(--fv-space-8); margin: 0; color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; } .c-tier__prefix, .c-tier__unit { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-medium); color: var(--fv-fg-muted); } .c-tier__amount { font-size: clamp(2.5rem, 2.1rem + 1.6vw, 3.5rem); font-weight: var(--fv-fw-bold); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .c-tier__status { margin: var(--fv-space-4) 0 0; } .c-tier__pricing.is-open { padding: var(--fv-space-12) var(--fv-space-16); border-radius: var(--fv-radius-16); background: var(--fv-nebel); } .c-tier__pricing.is-open .c-tier__status .c-ph { background: none; padding: 0; font-size: var(--fv-fs-small); color: var(--fv-nachtblau); } .c-tier__text { margin: 0; color: var(--fv-fg-muted); font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .c-tier__btitle { margin: var(--fv-space-8) 0 calc(-1 * var(--fv-space-4)); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } .c-tier__benefits { margin: 0; } .c-tier__benefits > li { font-size: 1.125rem; } .c-tier__benefits > li.is-pending::before { background-color: var(--fv-nebel); } .c-tier__benefits > li.is-pending::after { background-color: var(--fv-schiefer); } .c-tier__benefits .c-ph { font-size: .9em; } .c-tier__action { margin: auto 0 0; padding-top: var(--fv-space-8); } .c-tier__cta { max-inline-size: 100%; } /* hervorgehobene Karte: Nachtblau, Weiss-Text, Button auf dunkel */ .c-tier.is-featured { background-color: var(--fv-nachtblau); color: var(--fv-weiss); --fv-focus: var(--fv-rosa); } .is-dark .c-tier.is-featured, .is-nacht .c-tier.is-featured, .fv-section--nacht .c-tier.is-featured { background-color: var(--fv-purpur); --fv-focus: var(--fv-weiss); } .c-tier.is-featured :is(.c-tier__name, .c-tier__price, .c-tier__btitle) { color: var(--fv-weiss); } .c-tier.is-featured :is(.c-tier__plabel, .c-tier__prefix, .c-tier__unit, .c-tier__text) { color: var(--fv-weiss); } .c-tier.is-featured .c-tier__label { color: var(--fv-weiss); } .c-tier.is-featured .c-tier__label::before { background-color: var(--tier-verb); } .c-tier.is-featured[data-verb="foerdern"] .c-tier__label::before { background-color: var(--fv-weiss); } .c-tier.is-featured .c-tier__blocks i { background: var(--fv-rosa); } .c-tier.is-featured .c-tier__badge { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .c-tier.is-featured .c-tier__benefits > li { color: var(--fv-weiss); } .c-tier.is-featured .c-tier__benefits > li::before { background-color: var(--fv-rosa); } .c-tier.is-featured .c-tier__benefits > li::after { background-color: var(--fv-nachtblau); } .c-tier.is-featured .c-tier__benefits .c-ph { background: rgba(255, 255, 255, .14); color: var(--fv-weiss); } .c-tier.is-featured .c-tier__pricing.is-open { background: rgba(255, 255, 255, .12); } .c-tier.is-featured .c-tier__pricing.is-open .c-ph { color: var(--fv-weiss); } .c-tier.is-featured .c-tier__cta { background-color: var(--fv-weiss); color: var(--fv-nachtblau); } .c-tier.is-featured .c-tier__cta:is(:hover, :active) { background-color: var(--fv-weiss-hover); color: var(--fv-nachtblau); } .c-tier.is-featured .c-tier__cta:focus-visible { outline-color: var(--fv-rosa); } .c-tiers__note { margin-top: var(--fv-space-32); max-width: 76ch; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-tiers__note p { margin: 0 0 .6em; } @media (prefers-reduced-motion: reduce) { .c-tier * { transition: none; } } /* sections/timeline.css */ /* timeline (Brandmanual v1.0): Stationen als Bausteine. Links Jahreszahl (sticky) mit Baustein in Verbfarbe, Mitte Fuge, rechts Karte (.fv-card). Keine Kreise, keine Linienpunkte. */ .c-timeline__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); } .c-timeline__item { --tl: var(--fv-verb-foerdern); position: relative; display: grid; grid-template-columns: minmax(150px, .62fr) 20px minmax(0, 2.4fr); align-items: start; column-gap: var(--fv-fuge); } .c-timeline__item[data-verb="verbinden"] { --tl: var(--fv-verb-verbinden); } .c-timeline__item[data-verb="unterstuetzen"] { --tl: var(--fv-verb-unterstuetzen); } .c-timeline__item[data-verb="entwickeln"] { --tl: var(--fv-verb-entwickeln); } .c-timeline__item[data-verb="werben"] { --tl: var(--fv-verb-werben); } .c-timeline__item:not([data-verb]):nth-child(5n+2) { --tl: var(--fv-verb-verbinden); } .c-timeline__item:not([data-verb]):nth-child(5n+3) { --tl: var(--fv-verb-entwickeln); } .c-timeline__item:not([data-verb]):nth-child(5n+4) { --tl: var(--fv-verb-unterstuetzen); } .c-timeline__item:not([data-verb]):nth-child(5n+5) { --tl: var(--fv-verb-werben); } /* durchgehende Baustein-Spalte: schmaler, abgerundeter Balken je Station, Fuge dazwischen ueber den Grid-Gap */ .c-timeline__item::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; inline-size: 20px; border-radius: var(--fv-radius-8); background: var(--tl); } .c-timeline__year { position: sticky; align-self: start; top: calc(var(--header-h, 72px) + 24px); grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: var(--fv-fw-bold); line-height: 1; letter-spacing: -0.01em; color: var(--fv-nachtblau); font-variant-numeric: tabular-nums; } .c-timeline__year span { display: inline-block; } .c-timeline__node { display: none; } .c-timeline__card { grid-column: 3; grid-row: 1; display: grid; gap: var(--fv-space-32); padding: var(--fv-card-padding); border-radius: var(--fv-radius-28); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-timeline__item.has-media .c-timeline__card { grid-template-columns: 1.15fr 1fr; align-items: center; } .c-timeline__date { margin: 0 0 var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-timeline__title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-h3); line-height: 1.2; } .c-timeline__text { font-size: var(--fv-fs-body); color: var(--fv-nachtblau); } .c-timeline__tag { margin-top: var(--fv-space-16); } .c-timeline__source { margin: var(--fv-space-12) 0 0; font-size: var(--fv-fs-small); color: var(--fv-fg-muted); } .c-timeline__media { margin: 0; } .c-timeline__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fv-radius-40); clip-path: none; } .c-timeline__note { margin: var(--fv-space-48) 0 0; font-size: var(--fv-fs-small); } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .c-timeline__card { animation: tl-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } @keyframes tl-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } } } } @media (max-width: 899px) { .c-timeline__list { gap: 12px; } .c-timeline__item { grid-template-columns: 12px minmax(0, 1fr); column-gap: 12px; row-gap: var(--fv-space-12); } .c-timeline__item::before { grid-column: 1; grid-row: 1 / span 2; inline-size: 12px; border-radius: 6px; } .c-timeline__year { position: static; grid-column: 2; grid-row: 1; font-size: 2.5rem; } .c-timeline__card { grid-column: 2; grid-row: 2; padding: var(--fv-space-24); } .c-timeline__item.has-media .c-timeline__card { grid-template-columns: 1fr; } .c-timeline__media { order: -1; } } /* sections/verbs.css */ /* verbs: "Was wir tun" (Polish-Runde 1). Fuenf Taetigkeiten, jede mit eigenem Layout (Feld layout) und eigener Flaeche (Feld ground): bild = grosses Foto neben Text | freisteller = Freisteller vor Baustein in Verbfarbe, unten angeschnitten | band = Text zweispaltig zahl = grosse Zahl plus Foto | kompakt = einspaltig. Bildflaechen ruhig mit Radius 40, keine Zierstriche (R4). Icons frei ohne Kachel (R6). Jeder Eintrag laeuft vollflaechig, Inhalt im .l-container. */ .c-verbs { padding-bottom: 0; overflow: clip; } .c-verbs__head { max-width: 860px; margin-bottom: var(--fv-space-48); } .c-verb { position: relative; padding-block: clamp(56px, 7vw, 112px); } .c-verb.is-weiss + .c-verb.is-weiss { padding-top: 0; } .c-verbs__head + .c-verb, .l-container + .c-verb.is-weiss { padding-top: var(--fv-space-24); } .c-verb.is-flieder-hell { --fv-bg: var(--fv-flieder-hell); --fv-fg: var(--fv-nachtblau); --fv-fg-muted: var(--fv-schiefer); background-color: var(--fv-flieder-hell); color: var(--fv-nachtblau); } .c-verb.is-rosa { background-image: var(--fv-gradient-glow-hell); } .c-verb__inner { display: grid; gap: var(--fv-space-24) clamp(32px, 5vw, 88px); align-items: start; } .c-verb__head, .c-verb__body { min-inline-size: 0; } /* Typo: grosse Spruenge (Verb gross, Lead mittel, Text ruhig) */ .c-verb__icon { display: block; margin-bottom: var(--fv-space-24); color: var(--accent, var(--fv-nachtblau)); } .c-verb__icon .fv-icon { inline-size: 44px; block-size: 44px; stroke-width: 1.5; vertical-align: 0; } .c-verb--foerdern .c-verb__icon { color: var(--fv-nachtblau); } .c-verb:is(.is-nacht, .is-dark) .c-verb__icon { color: var(--fv-rosa); } .c-verb.is-rosa .c-verb__icon { color: var(--fv-nachtblau); } .c-verb__title { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); color: var(--fv-fg, var(--fv-nachtblau)); } .c-verb__title::first-letter { text-transform: uppercase; } .c-verb__lead { margin: 0; max-width: 24ch; font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-medium); color: var(--fv-fg, var(--fv-nachtblau)); text-wrap: balance; } .c-verb__text { margin: 0; max-width: 52ch; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-fg-muted, var(--fv-schiefer)); } .c-verb:is(.is-nacht, .is-dark) .c-verb__text { color: var(--fv-weiss); opacity: .86; } /* Links: ruhige Zeilen, genau ein Pfeil (R2) */ .c-verb__links { list-style: none; margin: var(--fv-space-32) 0 0; padding: 0; display: grid; gap: var(--fv-space-8); } .c-verb__link { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--fv-space-16); padding: var(--fv-space-16) var(--fv-space-16) var(--fv-space-16) var(--fv-space-24); border-radius: var(--fv-radius-16); background-color: var(--fv-papier); color: var(--fv-nachtblau); text-decoration: none; transition: background-color var(--fv-duration) var(--fv-easing); } .c-verb:is(.is-papier, .is-rosa, .is-flieder-hell) .c-verb__link { background-color: var(--fv-weiss); } .c-verb:is(.is-nacht, .is-dark) .c-verb__link { background-color: rgba(255, 255, 255, .08); color: var(--fv-weiss); } .c-verb__link:hover { background-color: var(--fv-nebel); } .c-verb:is(.is-nacht, .is-dark) .c-verb__link:hover { background-color: rgba(255, 255, 255, .16); } .c-verb__link:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-verb__link:hover .c-verb__arrow { transform: translateX(4px); } .c-verb__link-label { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); } .c-verb__link-note { grid-column: 1; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-verb:is(.is-nacht, .is-dark) .c-verb__link-note { color: var(--fv-weiss); opacity: .78; } .c-verb.is-rosa .c-verb__link-note { color: var(--fv-nachtblau); } .c-verb__arrow { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--fv-radius-8); background-color: var(--fv-purpur); color: var(--fv-weiss); transition: transform var(--fv-duration) var(--fv-easing); } .c-verb__arrow .fv-icon { inline-size: 20px; block-size: 20px; } /* Bildflaeche: ruhige Form, Radius 40, keine Zusatzformen (R4) */ .c-verb__figure { margin: 0; min-inline-size: 0; } .c-verb__media { overflow: hidden; border-radius: var(--fv-radius-40); background-color: var(--fv-nebel); aspect-ratio: 4 / 3; } .c-verb__media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } /* ---- bild: Foto gross links, Kopf und Text rechts ---- */ @media (min-width: 900px) { .c-verb--bild .c-verb__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "fig head" "fig body"; align-content: center; align-items: start; } .c-verb--bild .c-verb__figure { grid-area: fig; align-self: center; } .c-verb--bild .c-verb__head { grid-area: head; align-self: end; } .c-verb--bild .c-verb__body { grid-area: body; } .c-verb--bild .c-verb__media { aspect-ratio: 5 / 4; } } /* ---- freisteller: Text links, Freisteller vor Baustein rechts, unten angeschnitten (Layout-Muster 1) ---- */ .c-verb--freisteller { padding-bottom: 0; overflow: clip; } .c-verb--freisteller .c-verb__body { padding-bottom: clamp(56px, 7vw, 112px); } .c-verb__stage { position: relative; justify-self: center; inline-size: min(100%, 420px); aspect-ratio: 4 / 5; } .c-verb__block { position: absolute; inset: 22% 6% 0 6%; border-radius: var(--fv-radius-64) var(--fv-radius-64) 0 0; background-color: var(--accent, var(--fv-purpur)); background-image: var(--fv-gradient-glow); } .c-verb__cut { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); block-size: 100%; inline-size: auto; max-inline-size: 118%; object-fit: contain; object-position: bottom center; } @media (min-width: 900px) { .c-verb--freisteller .c-verb__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head stage" "body stage"; align-items: start; } .c-verb--freisteller .c-verb__head { grid-area: head; align-self: end; } .c-verb--freisteller .c-verb__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fv-space-24) clamp(24px, 3vw, 48px); align-items: start; } .c-verb--freisteller .c-verb__links { margin-top: 0; } .c-verb--freisteller .c-verb__stage { grid-area: stage; align-self: end; justify-self: end; inline-size: 100%; max-inline-size: 440px; } } /* ---- band: ganze Flaeche, Kopf links, Text zweispaltig rechts, kein Bild ---- */ @media (min-width: 900px) { .c-verb--band .c-verb__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .c-verb--band .c-verb__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); padding-top: calc(44px + var(--fv-space-24)); } .c-verb--band .c-verb__text { font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); } .c-verb--band .c-verb__links { margin-top: 0; } } .c-verb--band.is-rosa .c-verb__text { color: var(--fv-nachtblau); } /* ---- zahl: grosse Zahl (Familjen Bold) mit Kopf links, Foto rechts, Links als Reihe darunter ---- */ .c-verb__number { display: flex; align-items: flex-end; gap: var(--fv-space-16); margin: 0 0 var(--fv-space-24); color: var(--accent, var(--fv-violett)); } .c-verb__number-value { font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: clamp(7rem, 4rem + 12vw, 13.5rem); line-height: .78; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; } .c-verb__number-label { max-inline-size: 7ch; padding-bottom: .2em; font-size: var(--fv-fs-lead); line-height: 1.15; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); } @media (min-width: 900px) { .c-verb--zahl .c-verb__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head fig" "body body"; } .c-verb--zahl .c-verb__head { grid-area: head; align-self: center; } .c-verb--zahl .c-verb__figure { grid-area: fig; } .c-verb--zahl .c-verb__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); margin-top: var(--fv-space-24); } .c-verb--zahl .c-verb__links { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: start; } .c-verb--zahl .c-verb__media { aspect-ratio: 16 / 10; } } /* ---- kompakt: einspaltig, schmale Textspalte, kein Bild ---- */ .c-verb--band .c-verb__figure, .c-verb--kompakt .c-verb__figure { display: none; } .c-verb--kompakt .c-verb__head, .c-verb--kompakt .c-verb__body { max-inline-size: 760px; } .c-verb--kompakt .c-verb__lead { max-width: 26ch; font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-verb--kompakt .c-verb__text { margin-top: var(--fv-space-24); } @media (min-width: 900px) { .c-verb--kompakt .c-verb__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head ." "body body"; } .c-verb--kompakt .c-verb__head { grid-area: head; } .c-verb--kompakt .c-verb__body { grid-area: body; max-inline-size: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; } .c-verb--kompakt .c-verb__links { margin-top: 0; } .c-verb--kompakt .c-verb__text { margin-top: 0; } } @media (max-width: 899px) { .c-verb__figure { order: -1; } .c-verb--zahl .c-verb__figure { order: 0; } .c-verb__icon .fv-icon { inline-size: 36px; block-size: 36px; } .c-verb__stage { inline-size: min(78%, 340px); margin-top: var(--fv-space-24); } } /* ==== Variante saeulen (Startseite, Welle A2, 06.10.2026): eine Flaeche, echte Fotos gross und ruhig, Raster statt Flaechenwechsel. Eintrag breit = Foto ueber volle Breite, Kopf links und Text rechts darunter; spalte = Foto, Kopf, Text untereinander, zwei nebeneinander. Titel unter der Sektions-H2 (H3-Groesse), Links als ruhige Textlinks mit genau einem Pfeil (R2). ==== */ .c-verbs--saeulen { padding-bottom: var(--fv-section-y); } .c-verbs--saeulen .c-verbs__head { margin-bottom: var(--fv-space-48); } .c-verbs--saeulen .c-verb { padding-block: 0; background: none; } .c-verbs--saeulen .c-verb + .c-verb { margin-top: var(--fv-space-64); } .c-verbs--saeulen .c-verb__inner { gap: var(--fv-space-24); } .c-verbs--saeulen .c-verb__figure { order: -1; } .c-verbs--saeulen .c-verb__media { aspect-ratio: 3 / 2; border-radius: var(--fv-radius-40); } .c-verbs--saeulen .c-verb__credit { margin-top: var(--fv-space-8); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-verbs--saeulen .c-verb__title { margin: 0 0 var(--fv-space-12); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } .c-verbs--saeulen .c-verb__lead { max-width: 30ch; font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); letter-spacing: 0; font-weight: var(--fv-fw-medium); } .c-verbs--saeulen .c-verb__text { max-width: 60ch; } .c-verbs--saeulen .c-verb__links { margin-top: var(--fv-space-24); display: flex; flex-wrap: wrap; gap: var(--fv-space-12) var(--fv-space-32); } .c-verbs--saeulen .c-verb__link { display: inline-flex; align-items: center; gap: var(--fv-space-8); padding: 0; border-radius: 0; background: none; color: var(--fv-nachtblau); } .c-verbs--saeulen .c-verb__link:hover { background: none; } .c-verbs--saeulen .c-verb__link-label { text-decoration: underline; text-decoration-thickness: var(--fv-underline-thickness, 2px); text-underline-offset: 0.18em; text-decoration-color: var(--fv-link-underline, var(--fv-rosa)); } .c-verbs--saeulen .c-verb__link:hover .c-verb__link-label { text-decoration-color: currentColor; } .c-verbs--saeulen .c-verb__link-note { display: none; } .c-verbs--saeulen .c-verb__arrow { inline-size: 24px; block-size: 24px; border-radius: var(--fv-radius-8); } .c-verbs--saeulen .c-verb__arrow .fv-icon { inline-size: 16px; block-size: 16px; } @media (min-width: 900px) { .c-verbs--saeulen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); margin-inline: auto; padding-inline: var(--fv-page-margin); } .c-verbs--saeulen > .l-container { grid-column: 1 / -1; padding-inline: 0; max-width: none; } .c-verbs--saeulen .c-verb__inner { padding-inline: 0; max-width: none; } .c-verbs--saeulen .c-verb--breit { grid-column: 1 / -1; } .c-verbs--saeulen .c-verb + .c-verb { margin-top: clamp(64px, 6vw, 96px); } .c-verbs--saeulen .c-verb--breit .c-verb__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "fig fig" "head body"; column-gap: clamp(32px, 5vw, 88px); row-gap: var(--fv-space-32); } .c-verbs--saeulen .c-verb--breit .c-verb__figure { grid-area: fig; } .c-verbs--saeulen .c-verb--breit .c-verb__head { grid-area: head; } .c-verbs--saeulen .c-verb--breit .c-verb__body { grid-area: body; padding-top: .35em; } .c-verbs--saeulen .c-verb--breit .c-verb__media { aspect-ratio: 12 / 5; } .c-verbs--saeulen .c-verb--spalte .c-verb__inner { grid-template-columns: minmax(0, 1fr); align-content: start; } } /* sections/video-player.css */ /* video-player: Hochkant-Video (9:16) im Querformat-Layout. Video links oder rechts, Text daneben; mobil volle Breite. Bildflaeche Radius 40 (mobil 24), ruhige eigene Steuerung auf Bild-Fade, Play-Kachel in Purpur. Nur Tokens. */ .c-vp__inner { display: grid; gap: var(--fv-space-48); align-items: center; } @media (min-width: 860px) { .c-vp__inner { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: var(--fv-space-64) var(--fv-space-96); } .c-vp--video-rechts .c-vp__inner { grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); } .c-vp--video-rechts .c-vp__stage { order: 2; } } .c-vp__stage { margin: 0; min-width: 0; } .c-vp__frame { position: relative; aspect-ratio: 9 / 16; max-block-size: min(82vh, 720px); margin-inline: auto; overflow: hidden; border-radius: var(--fv-radius-40); background-color: var(--fv-nachtblau); box-shadow: var(--fv-shadow-card); } .c-vp__video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; background-color: var(--fv-nachtblau); transition: opacity .6s var(--fv-easing); } .c-vp.is-fading .c-vp__video, .c-vp__stage.is-fading .c-vp__video { opacity: .25; } /* grosse Start-Kachel ueber dem Poster */ .c-vp__big { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--fv-space-12); padding: var(--fv-space-32) var(--fv-space-24); border: 0; color: var(--fv-weiss); background: linear-gradient(180deg, transparent 45%, rgba(10, 16, 48, .72) 100%); cursor: pointer; font: inherit; text-align: center; } .c-vp__big[hidden] { display: none; } .c-vp__big-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 72px; block-size: 72px; border-radius: var(--fv-radius-16); background-color: var(--fv-purpur); color: var(--fv-weiss); transition: transform var(--fv-duration) var(--fv-easing); } .c-vp__big-icon svg { margin-left: 4px; } .c-vp__big:hover .c-vp__big-icon { transform: scale(1.06); } .c-vp__big-label { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); line-height: 1.3; } .c-vp__big-sub { font-weight: var(--fv-fw-regular); opacity: .85; } .c-vp__big:focus-visible { outline: 3px solid var(--fv-rosa); outline-offset: -6px; border-radius: var(--fv-radius-40); } /* Steuerleiste */ .c-vp__bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: var(--fv-space-8); padding: var(--fv-space-48) var(--fv-space-16) var(--fv-space-16); color: var(--fv-weiss); background: linear-gradient(180deg, transparent 0%, rgba(10, 16, 48, .78) 100%); transition: opacity .4s var(--fv-easing); } .c-vp__bar[hidden] { display: none; } .c-vp__stage.is-playing:not(.is-active) .c-vp__bar { opacity: 0; } .c-vp__btn { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; padding: 0; border: 0; border-radius: var(--fv-radius-10); color: inherit; background-color: rgba(255, 255, 255, .14); cursor: pointer; } .c-vp__btn:hover { background-color: rgba(255, 255, 255, .26); } .c-vp__btn:focus-visible, .c-vp__range:focus-visible { outline: 3px solid var(--fv-rosa); outline-offset: 2px; } .c-vp__i-pause, .c-vp__i-muted { display: none; } .c-vp__stage.is-playing .c-vp__i-play { display: none; } .c-vp__stage.is-playing .c-vp__i-pause { display: block; } .c-vp__stage.is-muted .c-vp__i-sound { display: none; } .c-vp__stage.is-muted .c-vp__i-muted { display: block; } .c-vp__time { flex: none; min-inline-size: 4.2em; font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; text-align: right; } .c-vp__range { --p: 0%; flex: 1 1 auto; min-inline-size: 0; block-size: 24px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .c-vp__range::-webkit-slider-runnable-track { block-size: 4px; border-radius: var(--fv-radius-2); background: linear-gradient(90deg, var(--fv-rosa) var(--p), rgba(255, 255, 255, .35) var(--p)); } .c-vp__range::-moz-range-track { block-size: 4px; border-radius: var(--fv-radius-2); background: rgba(255, 255, 255, .35); } .c-vp__range::-moz-range-progress { block-size: 4px; border-radius: var(--fv-radius-2); background: var(--fv-rosa); } .c-vp__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 14px; block-size: 14px; margin-top: -5px; border: 0; border-radius: var(--fv-radius-4); background: var(--fv-weiss); } .c-vp__range::-moz-range-thumb { inline-size: 14px; block-size: 14px; border: 0; border-radius: var(--fv-radius-4); background: var(--fv-weiss); } .c-vp__credit { margin-top: var(--fv-space-12); font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); text-align: center; } /* Text */ .c-vp__body { min-width: 0; max-inline-size: var(--fv-measure); } .c-vp__title { margin-top: 0; } .c-vp__text { margin-top: var(--fv-head-gap, var(--fv-space-24)); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); } .c-vp__text p { margin: 0 0 var(--fv-space-16); } .c-vp__text p:last-child { margin-bottom: 0; } .c-vp__cta { margin: var(--fv-space-32) 0 0; } .c-vp__note { margin: var(--fv-space-24) 0 0; font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-fg-muted); } :is(.is-dark, .is-nacht, .is-purpur) .c-vp__text { color: var(--fv-weiss); } :is(.is-dark, .is-nacht, .is-purpur) :is(.c-vp__note, .c-vp__credit) { color: rgba(255, 255, 255, .72); } @media (max-width: 859px) { .c-vp__frame { max-block-size: none; max-inline-size: 440px; } .c-vp__body { max-inline-size: none; } } @media (max-width: 599px) { .c-vp__inner { gap: var(--fv-space-32); } .c-vp__frame { max-inline-size: none; inline-size: min(100%, calc(86svh * 9 / 16)); border-radius: var(--fv-radius-24); } .c-vp__big:focus-visible { border-radius: var(--fv-radius-24); } .c-vp__text { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } } @media (prefers-reduced-motion: reduce) { .c-vp__video, .c-vp__bar, .c-vp__big-icon { transition: none; } .c-vp__big:hover .c-vp__big-icon { transform: none; } } /* sections/vote-gallery.css */ /* vote-gallery (Welle 2, Agent w2-c-preise: Manual-Tokens, keine Pillen/Kreise/Glas/Konturen): Bildabnahme mit Bewertung, Filter, Auswertung A/B und Lightbox */ .c-vg { --vg-ja: var(--fv-violett); --vg-nein: var(--fv-nachtblau); --vg-r: var(--fv-radius-24); } .c-vg__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); } .c-vg__intro { color: var(--fv-fg-muted); font-size: var(--fv-fs-lead); line-height: var(--fv-lh-lead); margin: var(--fv-space-16) 0 0; } /* ---------- Panel: Filter, Fortschritt, Auswertung */ .c-vg__panel { background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); border-radius: var(--fv-radius-24); padding: clamp(18px, 2.6vw, 28px); margin-bottom: clamp(28px, 4vw, 48px); display: grid; gap: 22px; position: relative; overflow: hidden; } .c-vg__panel::after { content: ""; position: absolute; right: var(--fv-space-24); top: var(--fv-space-24); width: 48px; height: 12px; border-radius: var(--fv-radius-8); background: var(--fv-violett); pointer-events: none; } .c-vg__panel > * { position: relative; z-index: 1; } .c-vg__bar { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; } .c-vg__filters { display: flex; flex-wrap: wrap; gap: 8px; } .c-vg__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--fv-radius-10); border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .c-vg__chip:hover { background: var(--fv-flieder-hell); } .c-vg__chip[aria-pressed="true"] { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-vg__cnt { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--fv-weiss); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-variant-numeric: tabular-nums; } .c-vg__chip[aria-pressed="true"] .c-vg__cnt { background: var(--fv-weiss); } .c-vg__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--fv-schiefer); } .c-vg__dot.is-ja { background: var(--vg-ja); } .c-vg__dot.is-nein { background: var(--vg-nein); } .c-vg__chip[aria-pressed="true"] .c-vg__dot { background: var(--fv-weiss); } .c-vg__chip[aria-pressed="true"] .c-vg__dot.is-ja { background: var(--fv-rosa); } .c-vg__chip[aria-pressed="true"] .c-vg__dot.is-nein { background: var(--fv-weiss); } .c-vg__progress { display: grid; gap: 8px; min-width: 200px; } .c-vg__ptext { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-vg__ptext strong { color: var(--fv-nachtblau); font-size: var(--fv-fs-lead); } .c-vg__pbar { display: block; height: 8px; border-radius: var(--fv-radius-2); background: var(--fv-nebel); overflow: hidden; } .c-vg__pbar i { display: block; height: 100%; width: 0; background: var(--fv-violett); border-radius: inherit; transition: width .4s var(--fv-easing); } .c-vg__eval { display: grid; gap: 12px 28px; grid-template-columns: 1fr; padding-top: 20px; border-top: 0; } @media (min-width: 820px) { .c-vg__eval { grid-template-columns: 1fr 1fr; } .c-vg__evaltitle, .c-vg__verdict { grid-column: 1 / -1; } } .c-vg__eval[hidden], .c-vg__empty[hidden] { display: none; } .c-vg__evaltitle { margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); } .c-vg__evalrow { display: grid; gap: 8px; } .c-vg__evalname { margin: 0; font-size: var(--fv-fs-small); } .c-vg__evalname span { color: var(--fv-schiefer); } .c-vg__evalbar { display: flex; height: 14px; border-radius: 4px; background: var(--fv-nebel); overflow: hidden; } .c-vg__evalbar i { display: block; height: 100%; width: 0; transition: width .4s var(--fv-easing); } .c-vg__evalbar .is-ja { background: var(--vg-ja); } .c-vg__evalbar .is-nein { background: var(--vg-nein); } .c-vg__evaltext { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); font-variant-numeric: tabular-nums; } .c-vg__verdict { margin: 0; font-weight: var(--fv-fw-bold); color: var(--fv-purpur); } .c-vg__status { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); padding-left: 22px; position: relative; } .c-vg__status::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 3px; background: var(--fv-nebel); } .c-vg__status.is-ok::before { background: var(--fv-violett); } .c-vg__status.is-warn { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-vg__status.is-warn::before { background: var(--fv-rosa); } /* ---------- Raster */ .c-vg__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: 1fr; } @media (min-width: 760px) { .c-vg__grid { grid-template-columns: 1fr 1fr; } } .c-vg__item[hidden] { display: none; } .c-vg__card { height: 100%; display: flex; flex-direction: column; background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); border-radius: var(--vg-r); overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .25s; } .c-vg__item[data-vote="ja"] .c-vg__card { outline-color: var(--vg-ja); } .c-vg__item[data-vote="nein"] .c-vg__card { box-shadow: none; } .c-vg__media { position: relative; background: var(--fv-nachtblau); } .c-vg__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; } .c-vg__open picture { display: block; } .c-vg__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s var(--fv-easing), filter .35s, opacity .35s; } .c-vg__item[data-vote="nein"] .c-vg__img { filter: grayscale(.85); opacity: .5; } @media (prefers-reduced-motion: no-preference) { .c-vg__open:hover .c-vg__img { transform: scale(1.025); } } .c-vg__open:focus-visible { outline: 3px solid var(--fv-rosa); outline-offset: -3px; } .c-vg__zoom { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: var(--fv-radius-12); display: grid; place-items: center; background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-vg__num { position: absolute; left: 14px; top: 14px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--fv-radius-12); display: grid; place-items: center; background: var(--fv-weiss); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; pointer-events: none; } .c-vg__badge { position: absolute; left: 66px; top: 14px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--fv-radius-12); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); background: var(--fv-violett); color: var(--fv-weiss); pointer-events: none; } .c-vg__badge[data-style="B"] { background: var(--fv-rosa); color: var(--fv-nachtblau); } .c-vg__stamp { position: absolute; right: 14px; top: 14px; width: 52px; height: 52px; border-radius: var(--fv-radius-16); display: grid; place-items: center; transform: scale(.4); opacity: 0; transition: transform .3s var(--fv-easing), opacity .2s; pointer-events: none; } .c-vg__item[data-vote="ja"] .c-vg__stamp { opacity: 1; transform: none; background: var(--vg-ja); } .c-vg__item[data-vote="nein"] .c-vg__stamp { opacity: 1; transform: none; background: var(--vg-nein); } .c-vg__stamp::before { content: ""; width: 26px; height: 26px; background: var(--fv-weiss); -webkit-mask: var(--vg-icon) center / contain no-repeat; mask: var(--vg-icon) center / contain no-repeat; } .c-vg__item[data-vote="ja"] .c-vg__stamp { --vg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .c-vg__item[data-vote="nein"] .c-vg__stamp { --vg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); } .c-vg__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px, 2.4vw, 26px); flex: 1; } .c-vg__motif { margin: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .c-vg__verdictbadge { padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); } .c-vg__ttl { margin: -6px 0 0; font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); } .c-vg__text { margin: 0; color: var(--fv-schiefer); font-size: var(--fv-fs-small); } .c-vg__variants { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); align-self: flex-start; } .c-vg__var { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: var(--fv-radius-8); background: transparent; color: var(--fv-nachtblau); font: inherit; font-size: var(--fv-fs-small); cursor: pointer; } .c-vg__var[aria-pressed="true"] { background: var(--fv-weiss); font-weight: var(--fv-fw-bold); } .c-vg__sw { width: 16px; height: 16px; border-radius: 5px; flex: none; } .c-vg__sw.is-orig { background: var(--fv-schiefer); } .c-vg__sw.is-rosa { background: var(--fv-rosa); } .c-vg__sw.is-violett { background: var(--fv-violett); } .c-vg__prompt { padding-top: var(--fv-space-4); font-size: var(--fv-fs-small); } .c-vg__prompt summary { cursor: pointer; font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); min-height: 32px; display: flex; align-items: center; gap: 8px; list-style: none; } .c-vg__prompt summary::-webkit-details-marker { display: none; } .c-vg__prompt summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--fv-purpur); color: var(--fv-weiss); font-size: var(--fv-fs-body); line-height: 1; } .c-vg__prompt[open] summary::before { content: "−"; } .c-vg__prompt p { margin: 8px 0 0; color: var(--fv-schiefer); } .c-vg__vote { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; } .c-vg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 54px; padding: 10px 14px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-button); cursor: pointer; touch-action: manipulation; transition: background .18s, border-color .18s, color .18s, transform .12s; } .c-vg__btn:active { transform: scale(.97); } .c-vg__btn.is-ja:hover { background: var(--fv-flieder-hell); } .c-vg__btn.is-nein:hover { background: var(--fv-flieder-hell); } .c-vg__btn.is-ja[aria-pressed="true"] { background: var(--vg-ja); color: var(--fv-weiss); } .c-vg__btn.is-nein[aria-pressed="true"] { background: var(--vg-nein); color: var(--fv-weiss); } .c-vg__btn:focus-visible, .c-vg__chip:focus-visible, .c-vg__var:focus-visible, .c-vg__prompt summary:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-vg__note { display: grid; gap: 6px; font-size: var(--fv-fs-small); } .c-vg__notelabel { font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); display: flex; gap: 10px; align-items: baseline; } .c-vg__saved { font-weight: var(--fv-fw-regular); color: var(--fv-violett); opacity: 0; transition: opacity .3s; } .c-vg__saved.is-on { opacity: 1; } .c-vg__note textarea { width: 100%; min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; font-size: var(--fv-fs-body); line-height: 1.4; } .c-vg__note textarea:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); background: var(--fv-weiss); } .c-vg__empty, .c-vg__foot { margin: var(--fv-space-24) 0 0; color: var(--fv-fg-muted); } /* Ohne JavaScript: Bewertungswerkzeuge ausblenden */ .c-vg:not(.is-ready) .c-vg__panel, .c-vg:not(.is-ready) .c-vg__vote, .c-vg:not(.is-ready) .c-vg__note, .c-vg:not(.is-ready) .c-vg__variants { display: none; } /* ---------- Lightbox */ html.vg-lock { overflow: hidden; } .c-vg__lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--fv-nachtblau); color: var(--fv-weiss); display: none; grid-template-rows: 1fr auto; } .c-vg__lb[open] { display: grid; } .c-vg__lb::backdrop { background: var(--fv-nachtblau); } .c-vg__lbstage { position: relative; min-height: 0; display: grid; place-items: center; padding: 64px clamp(8px, 6vw, 96px) 12px; } .c-vg__lbimg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--fv-radius-16); } .c-vg__lb[data-vote="nein"] .c-vg__lbimg { opacity: .5; } .c-vg__lb[data-vote="ja"] .c-vg__lbimg { outline: 3px solid var(--fv-rosa); outline-offset: 4px; } .c-vg__lbnav, .c-vg__lbclose { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-weiss); color: var(--fv-nachtblau); cursor: pointer; transition: background .2s; } .c-vg__lbnav:hover, .c-vg__lbclose:hover { background: var(--fv-weiss-hover); } .c-vg__lbnav:focus-visible, .c-vg__lbclose:focus-visible, .c-vg__lb .c-vg__btn:focus-visible, .c-vg__lb .c-vg__var:focus-visible { outline: var(--fv-focus-width) solid var(--fv-rosa); outline-offset: var(--fv-focus-offset); } .c-vg__lbnav { top: 50%; transform: translateY(-50%); } .c-vg__lbnav.is-prev { left: clamp(8px, 1.6vw, 24px); } .c-vg__lbnav.is-next { right: clamp(8px, 1.6vw, 24px); } .c-vg__lbclose { top: 10px; right: clamp(8px, 1.6vw, 24px); } .c-vg__lbbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 14px clamp(16px, 3vw, 32px) max(16px, env(safe-area-inset-bottom)); background: var(--fv-nachtblau); } .c-vg__lbcap { margin: 0; flex: 1 1 260px; font-size: var(--fv-fs-small); } .c-vg__lbpos { color: var(--fv-weiss); font-variant-numeric: tabular-nums; margin-right: 6px; } .c-vg__lbmeta { color: var(--fv-rosa); margin-left: 6px; } .c-vg__lbvars { display: flex; gap: 6px; padding: 4px; border-radius: var(--fv-radius-12); background: var(--fv-nachtblau-hover); } .c-vg__lbvars[hidden] { display: none; } .c-vg__lb .c-vg__var { color: var(--fv-weiss); } .c-vg__lb .c-vg__var[aria-pressed="true"] { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-vg__vote--lb { margin: 0; min-width: min(100%, 340px); } .c-vg__lb .c-vg__btn { background: var(--fv-nachtblau-hover); color: var(--fv-weiss); } .c-vg__lb .c-vg__btn.is-ja[aria-pressed="true"] { background: var(--fv-rosa); color: var(--fv-nachtblau); } .c-vg__lb .c-vg__btn.is-nein[aria-pressed="true"] { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-vg__lbkeys { margin: 0; flex-basis: 100%; text-align: center; font-size: var(--fv-fs-small); color: var(--fv-weiss); } @media (hover: none) { .c-vg__lbkeys { display: none; } } @media (max-width: 600px) { .c-vg__lbstage { padding: 60px 0 8px; } .c-vg__lbimg { border-radius: 0; } .c-vg__lbnav { top: auto; bottom: 12px; transform: none; width: 46px; height: 46px; } .c-vg__lbcap { flex-basis: 100%; text-align: center; } .c-vg__lbvars .c-vg__var { font-size: var(--fv-fs-small); padding: 6px 8px; } .c-vg__badge { left: 64px; } .c-vg__btn { font-size: var(--fv-fs-small); padding: 10px 8px; } .c-vg__variants { display: grid; grid-template-columns: repeat(3, 1fr); align-self: stretch; } .c-vg__var { justify-content: center; padding: 6px 6px; } .c-vg__varpre { display: none; } } /* ---------- Zähler: Hoch/Runter mit Zahl, Saldo, Live-Aufleuchten */ .c-vg__btn { gap: 8px; } .c-vg__btn svg.is-down { transform: rotate(180deg); } .c-vg__n { font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; min-width: 2ch; padding: 2px 8px; border-radius: 6px; background: var(--fv-weiss); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); text-align: center; } .c-vg__btn.is-hit { transform: scale(.97); } .c-vg__btn.is-live .c-vg__n { animation: vg-live 1.4s var(--fv-easing); } .c-vg__lb .c-vg__n { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-vg__saldo { display: flex; align-items: center; gap: 12px; margin-top: -4px; } .c-vg__sbar { display: flex; flex: 1; height: 8px; border-radius: var(--fv-radius-2); background: var(--fv-nebel); overflow: hidden; } .c-vg__sbar i { display: block; height: 100%; width: 0; transition: width .4s var(--fv-easing); } .c-vg__sbar .is-ja { background: var(--vg-ja); } .c-vg__sbar .is-nein { background: var(--vg-nein); } .c-vg__snum { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; color: var(--fv-nachtblau); } .c-vg__sort { margin-left: auto; } .c-vg__card.is-live { animation: vg-card 1.4s var(--fv-easing); } @keyframes vg-live { 0%, 100% { background: var(--fv-weiss); } 20% { background: var(--fv-rosa); } } @keyframes vg-card { 0%, 100% { box-shadow: var(--fv-shadow-card); } 20% { box-shadow: 0 0 0 4px var(--fv-rosa); } } @media (prefers-reduced-motion: reduce) { .c-vg__btn.is-live .c-vg__n, .c-vg__card.is-live { animation: none; } } @media (max-width: 600px) { .c-vg__btnlabel { display: none; } .c-vg__sort { margin-left: 0; } } /* sections/winner-archive.css */ /* winner-archive (Welle 2, Agent w2-c-preise, Brandmanual v1.0): Preisträger:innen nach Jahr. Filter ohne JavaScript: Radiobuttons + :has(). Ohne :has-Unterstützung bleibt alles sichtbar. */ .c-winners__head { max-width: 760px; } /* Filter (Welle 2: Karte ohne Kontur, Chips als Bausteine Radius 10, keine Pillen) */ .c-winners__filter { display: grid; gap: var(--fv-space-16); margin: 0 0 var(--fv-space-48); padding: var(--fv-space-24) var(--fv-space-32); border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); } .c-winners__fs { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: var(--fv-space-12) var(--fv-space-16); } .c-winners__legend { float: left; padding: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-winners__chips { display: flex; flex-wrap: wrap; gap: var(--fv-space-8); } .c-winners__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .c-winners__chip { display: inline-flex; align-items: center; gap: var(--fv-space-8); min-height: 40px; padding: var(--fv-space-8) 14px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1; color: var(--fv-nachtblau); cursor: pointer; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-winners__chip:hover { background: var(--fv-flieder-hell); } .c-winners__chip[data-award]::before { content: ""; width: var(--award-w); height: var(--award-h); border-radius: var(--award-r); background: var(--award-c); flex: none; } .c-winners__chip--year { font-variant-numeric: tabular-nums; } .c-winners__radio:checked + .c-winners__chip { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-winners__radio:checked + .c-winners__chip[data-award]::before { background: var(--fv-weiss); } .c-winners__radio:focus-visible + .c-winners__chip { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } /* Filterlogik Preis (Jahresregeln entstehen im Template aus den Gruppen) */ .c-winners:has(#wa-p-lehrpreis:checked) .c-winners__entry:not([data-award="lehrpreis"]), .c-winners:has(#wa-p-studienpreis:checked) .c-winners__entry:not([data-award="studienpreis"]), .c-winners:has(#wa-p-wolf-wagner-preis:checked) .c-winners__entry:not([data-award="wolf-wagner-preis"]) { display: none; } /* alle Jahre: Jahrgänge ohne den gewählten Preis ausblenden; einzelnes Jahr: Hinweis statt leerer Fläche */ .c-winners:has(#wa-y-all:checked):has(#wa-p-lehrpreis:checked) .c-winners__year:not(:has([data-award="lehrpreis"])), .c-winners:has(#wa-y-all:checked):has(#wa-p-studienpreis:checked) .c-winners__year:not(:has([data-award="studienpreis"])), .c-winners:has(#wa-y-all:checked):has(#wa-p-wolf-wagner-preis:checked) .c-winners__year:not(:has([data-award="wolf-wagner-preis"])) { display: none; } .c-winners:has(#wa-p-lehrpreis:checked) .c-winners__year:not(:has([data-award="lehrpreis"])) .c-winners__none, .c-winners:has(#wa-p-studienpreis:checked) .c-winners__year:not(:has([data-award="studienpreis"])) .c-winners__none, .c-winners:has(#wa-p-wolf-wagner-preis:checked) .c-winners__year:not(:has([data-award="wolf-wagner-preis"])) .c-winners__none { display: block; } .c-winners:has(#wa-p-lehrpreis:checked) .c-winners__year:not(:has([data-award="lehrpreis"])) .c-winners__yearnote, .c-winners:has(#wa-p-studienpreis:checked) .c-winners__year:not(:has([data-award="studienpreis"])) .c-winners__yearnote, .c-winners:has(#wa-p-wolf-wagner-preis:checked) .c-winners__year:not(:has([data-award="wolf-wagner-preis"])) .c-winners__yearnote { display: none; } /* Filterlogik Kategorie (Bachelor, Master) */ .c-winners:has(#wa-k-bachelor:checked) .c-winners__entry:not([data-kat="Bachelor"]), .c-winners:has(#wa-k-master:checked) .c-winners__entry:not([data-kat="Master"]) { display: none; } .c-winners:has(#wa-y-all:checked):has(#wa-k-bachelor:checked) .c-winners__year:not(:has([data-kat="Bachelor"])), .c-winners:has(#wa-y-all:checked):has(#wa-k-master:checked) .c-winners__year:not(:has([data-kat="Master"])) { display: none; } .c-winners:has(#wa-k-bachelor:checked) .c-winners__year:not(:has([data-kat="Bachelor"])) .c-winners__none, .c-winners:has(#wa-k-master:checked) .c-winners__year:not(:has([data-kat="Master"])) .c-winners__none { display: block; } .c-winners:has(#wa-k-bachelor:checked) .c-winners__year:not(:has([data-kat="Bachelor"])) .c-winners__yearnote, .c-winners:has(#wa-k-master:checked) .c-winners__year:not(:has([data-kat="Master"])) .c-winners__yearnote { display: none; } /* Jahrgaenge: Jahreszahl in Familjen [zu bestaetigen, A8], Eintraege als Karten (Weiss, Radius 24, Kartenschatten) */ .c-winners__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-space-48); } .c-winners__year { display: grid; grid-template-columns: clamp(120px, 16vw, 200px) minmax(0, 1fr); gap: var(--fv-space-24) var(--fv-space-48); } .c-winners__yearnum.c-winners__yearnum { margin: 0; font-family: var(--fv-font-sans); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-zahl); line-height: 1; letter-spacing: var(--fv-ls-h2); color: var(--fv-nachtblau); font-variant-numeric: tabular-nums lining-nums; } @media (min-width: 768px) { .c-winners__yearnum { position: sticky; top: calc(var(--header-h) + var(--fv-space-24)); align-self: start; } } .c-winners__yearnote { margin: 0 0 var(--fv-space-16); font-size: var(--fv-fs-small); color: var(--fv-schiefer); max-width: 70ch; } .c-winners__entries { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fv-fuge); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .c-winners__entry { position: relative; display: flex; flex-direction: column; gap: var(--fv-space-8); padding: var(--fv-space-24) 28px 28px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .c-winners__entry p { margin: 0; } .c-winners__award { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fv-space-8); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); } .c-winners__glyph { width: var(--award-w); height: var(--award-h); border-radius: var(--award-r); background: var(--award-c); flex: none; } .c-winners__cat { padding: var(--fv-space-4) var(--fv-space-8); border-radius: 6px; background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); } .c-winners__name { font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-card); color: var(--fv-nachtblau); } .c-winners__work { font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); } .c-winners__work::before { content: "„"; } .c-winners__work::after { content: "“"; } .c-winners__meta { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); } .c-winners__note { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); color: var(--fv-schiefer); margin-top: auto !important; padding-top: var(--fv-space-4); } .c-winners__entry.is-placeholder { background: var(--fv-nebel); box-shadow: none; } .c-winners__entry.is-placeholder .c-winners__name { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-winners__entry.is-placeholder .c-winners__work::before, .c-winners__entry.is-placeholder .c-winners__work::after { content: none; } .c-winners__none { display: none; margin: 0; padding: var(--fv-space-24); border-radius: var(--fv-radius-16); background: var(--fv-nebel); color: var(--fv-schiefer); } .c-winners__foot { margin: var(--fv-space-32) 0 0; max-width: var(--fv-measure); font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .is-papier .c-winners__entry.is-placeholder, .is-tint .c-winners__entry.is-placeholder { background: var(--fv-weiss); } @media (max-width: 767px) { .c-winners__year { grid-template-columns: 1fr; gap: var(--fv-space-16); } .c-winners__fs { grid-template-columns: 1fr; gap: var(--fv-space-8); } .c-winners__filter { padding: 20px; } .c-winners__entry { padding: 20px 24px 24px; } } /* Kompakt (compact + decades, Archiv): Jahreszeilen statt Karten, Jahrzehnt-Filter statt Jahreschips */ .c-winners--compact .c-winners__list { gap: 0; border-top: 1px solid var(--fv-linie, rgba(10, 28, 67, .14)); } .c-winners--compact .c-winners__year { gap: var(--fv-space-16) var(--fv-space-32); padding: var(--fv-space-24) 0; border-bottom: 1px solid var(--fv-linie, rgba(10, 28, 67, .14)); grid-template-columns: clamp(88px, 12vw, 140px) minmax(0, 1fr); } .c-winners--compact .c-winners__yearnum.c-winners__yearnum { font-size: var(--fv-fs-h3, 1.75rem); } .c-winners--compact .c-winners__entries { display: block; } .c-winners--compact .c-winners__entry { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 2px var(--fv-space-24); padding: var(--fv-space-12) 0; border-radius: 0; background: none; box-shadow: none; } .c-winners--compact .c-winners__entry + .c-winners__entry { border-top: 1px solid var(--fv-linie, rgba(10, 28, 67, .08)); } .c-winners--compact .c-winners__entry > p:not(.c-winners__award) { grid-column: 2; } .c-winners--compact .c-winners__award { grid-column: 1; grid-row: 1 / span 6; align-self: start; padding-top: 4px; font-weight: var(--fv-fw-medium); } .c-winners--compact .c-winners__name { font-size: var(--fv-fs-body); } .c-winners--compact .c-winners__work { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-winners--compact .c-winners__meta--more { display: none; } .c-winners--compact .c-winners__note { margin-top: 0 !important; padding-top: 0; } .c-winners--compact .c-winners__entry.is-placeholder { background: none; } .c-winners--compact .c-winners__entry.is-placeholder .c-winners__name { font-size: var(--fv-fs-small); } .c-winners--compact .c-winners__none { display: none !important; } /* kompakt: Jahrgänge ohne den gewählten Preis oder die gewählte Kategorie immer ausblenden */ .c-winners--compact:has(#wa-p-lehrpreis:checked) .c-winners__year:not(:has([data-award="lehrpreis"])), .c-winners--compact:has(#wa-p-studienpreis:checked) .c-winners__year:not(:has([data-award="studienpreis"])), .c-winners--compact:has(#wa-p-wolf-wagner-preis:checked) .c-winners__year:not(:has([data-award="wolf-wagner-preis"])), .c-winners--compact:has(#wa-k-bachelor:checked) .c-winners__year:not(:has([data-kat="Bachelor"])), .c-winners--compact:has(#wa-k-master:checked) .c-winners__year:not(:has([data-kat="Master"])) { display: none; } @media (max-width: 767px) { .c-winners--compact .c-winners__year { grid-template-columns: 1fr; padding: var(--fv-space-16) 0; } .c-winners--compact .c-winners__entry { grid-template-columns: 1fr; } .c-winners--compact .c-winners__award { grid-row: auto; padding-top: 0; } .c-winners--compact .c-winners__entry > p:not(.c-winners__award) { grid-column: 1; } } /* Lücken freundlich (Abschluss-QA Runde 9): "Name folgt" statt Platzhaltertext, Hinweisbox mit Kontakt und Nominierung */ .c-winners__name--folgt { font-style: normal; color: var(--fv-schiefer); } .c-winners__gap { display: grid; gap: var(--fv-space-8); margin: 0 0 var(--fv-space-32); padding: var(--fv-space-24); border-radius: var(--fv-radius-24); background: var(--fv-papier); max-width: 760px; } .is-papier .c-winners__gap { background: var(--fv-weiss); } .c-winners__gaptitle { margin: 0; font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-lead); color: var(--fv-nachtblau); } .c-winners__gaptext { margin: 0; font-size: var(--fv-fs-body); line-height: var(--fv-lh-body); color: var(--fv-schiefer); max-width: 60ch; } .c-winners__gapactions { display: flex; flex-wrap: wrap; gap: var(--fv-space-8) var(--fv-space-32); margin: var(--fv-space-8) 0 0; } /* sections/zwischenruf.css */ /* Sektion zwischenruf: eigenes Band (Polish-Runde 1, R8/R11). Familjen Medium, groesser als Lead, Purpur auf hell, Rosa auf dunkel, nicht kursiv. Flaeche ueber data-ground (brand-swatches.css). */ .fv-zwischenruf-sec { padding-block: clamp(64px, 8vw, 128px); background-color: var(--fv-bg-sec, transparent); } .fv-zwischenruf-sec__inner > .fv-zwischenruf { margin: 0; max-width: 22ch; font-family: var(--fv-font-sans); font-style: normal; font-weight: var(--fv-fw-medium); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; } .fv-zwischenruf-sec[data-ground="nachtblau"] .fv-zwischenruf, .fv-zwischenruf-sec.is-dark .fv-zwischenruf { color: var(--fv-rosa); } .fv-zwischenruf__source { margin-top: var(--fv-space-12); font-family: var(--fv-font-sans); font-style: normal; font-size: var(--fv-fs-small); } /* pages/_typo.css */ /* Satzregeln (Besitz w1-fundament, Brandmanual v1.0 Abschnitt 5). Alle Typo-Tokens (--fv-fs-*, --fv-lh-*, --fv-ls-*, --fv-fw-*) stehen in css/tokens.css, Doku in konzept/typo.md. Hier nur Satzregeln, die fuer alle Sektionen gelten, plus Musterseite /speedbuild/typo/. Wird nach css/sections/*.css und vor den uebrigen css/pages/*.css gebuendelt. */ /* Formularelemente erben die Schrift */ button, input, select, textarea, optgroup { font-family: inherit; font-feature-settings: inherit; } input, select, textarea { font-size: max(var(--fs-input), 1em); } /* ---------- Headlines: ausgeglichener Umbruch, keine Silbentrennung ---------- */ h1, h2, h3, h4, h5, h6, [class*="__title"], [class*="__headline"], [class*="__name"] { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; } /* ---------- Typo-Stufen als Klassen (Manual 5.2; Display nur im Startseiten-Hero) ---------- */ .fv-display { font-family: var(--fv-font-sans); font-size: var(--fv-fs-display); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-display); letter-spacing: var(--fv-ls-display); text-wrap: balance; hyphens: manual; } .fv-h1 { font-size: var(--fv-fs-h1); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); text-wrap: balance; } .fv-h2 { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); text-wrap: balance; } .fv-h3 { font-size: var(--fv-fs-h3); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); text-wrap: balance; } .fv-lead { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); letter-spacing: 0; max-width: var(--fv-measure); } .fv-body { font-size: var(--fv-fs-body); font-weight: var(--fv-fw-regular); line-height: var(--fv-lh-body); } .fv-small { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .fv-muted { color: var(--fv-fg-muted); } /* ---------- Fliesstext: deutsche Silbentrennung (lang="de"), pretty gegen Hurenkinder/Schusterjungen ---------- */ p, li, dd, blockquote, figcaption { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; orphans: 2; widows: 2; } .c-prose { line-height: var(--lh-prose); } .c-prose > p, .c-prose > ul, .c-prose > ol, .c-prose > blockquote, .c-section-head__intro, .c-page-hero__text { max-width: var(--fv-measure); } .c-prose h2, .c-prose h3 { margin-top: 1.6em; margin-bottom: .5em; } .c-prose h2:first-child, .c-prose h3:first-child { margin-top: 0; } /* Bedienelemente nie trennen */ .c-btn, .c-nav, .c-tag, .c-crumbs, label, button, .c-footer__title, .c-header, [class*="__chip"], [class*="__badge"] { hyphens: manual; -webkit-hyphens: manual; } /* ---------- Ziffern: tabellarisch fuer Zahlen, Daten, Preise, Tabellen, Zaehler ---------- */ table, time, data, .u-tnum, [class*="__price"], [class*="__amount"], [class*="__date"], [class*="__day"], [class*="__value"], [class*="__num"], [class*="__count"], [class*="__year"], [class*="__stat"], [class*="__time"], [class*="__figure"] { font-variant-numeric: tabular-nums lining-nums; } /* ---------- Eyebrows entfallen (Projektregel). Sperre fuer Restvorkommen in Partials/Inhalten, bis deren Besitzer sie entfernt. ---------- */ .c-eyebrow { display: none !important; } /* ---------- Globale Komponenten (components.css gehoert w1-marke; Typo hier auf Manual-Tokens gezogen) ---------- */ .c-btn { font-size: var(--fv-fs-button); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-button); letter-spacing: 0; } .c-tag { font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); letter-spacing: 0; } .c-nav__link { font-size: var(--fs-ui); font-weight: var(--fw-medium); } .c-nav__sublink { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .c-header__cta { font-size: var(--fs-sm); } .c-topbar { font-size: var(--fv-fs-small); } @media (max-width: 1200px) { .c-nav__link { font-size: var(--fs-h4); letter-spacing: var(--ls-h4); } } .c-footer__claim { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-h2); } .c-footer__title { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); letter-spacing: 0; } .c-footer__contact { font-size: var(--fs-sm); } .c-footer__note { font-size: var(--fv-fs-small); } .c-section-head__title { font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } .c-page-hero__headline { font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } /* ---------- Musterseite /speedbuild/typo/ (Klassen .ty-*) ---------- */ .ty-spec { display: grid; gap: var(--fv-space-24); margin-top: var(--fv-space-32); } .ty-spec p { margin: 0; } .ty-big { font-family: var(--font-heading); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text); text-wrap: balance; hyphens: manual; } .ty-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--fv-fuge); } .ty-weights > div { padding: var(--fv-space-16) var(--fv-space-24); border-radius: var(--fv-radius-16); background: var(--fv-nebel); display: grid; gap: var(--fv-space-8); } .ty-weights b { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--text); } .ty-weights small { font-size: var(--fv-fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; } .ty-glyphs { font-size: var(--fs-lg); line-height: var(--lh-ui); font-weight: var(--fw-medium); color: var(--text); overflow-wrap: anywhere; hyphens: manual; } .ty-dark { border-radius: var(--fv-radius-24); padding: var(--fv-card-padding); background: var(--fv-papier); color: var(--fv-nachtblau); display: grid; gap: var(--fv-space-12); } .ty-dark .ty-h2 { font-family: var(--font-heading); font-weight: var(--fw-h2); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); text-wrap: balance; hyphens: manual; } .ty-dark .ty-text { color: var(--fv-schiefer); max-width: var(--fv-measure); } .c-text-block:has(.ty-spec) .l-container--narrow { max-width: calc(var(--fv-content-max) + 2 * var(--fv-page-margin)); } /* E-Mail-Adressen und Telefonnummern nie per Silbentrennung zerlegen, nur an sinnvollen Stellen umbrechen */ a[href^="mailto:"], a[href^="tel:"] { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; word-break: normal; } /* ---------- R9 (Polish-Runde 1): Unterstreichungen global einheitlich ---------- Alle Links, Textlinks, Sekundaer-Buttons und Titel-Unterstreichungen (auch Hover, Karten-Titel) mit gleicher Staerke und gleichem Abstand zur Grundlinie. Bewusst !important, weil viele Sektions-CSS eigene Werte (0.2em, 0.25em, 3px, 4px) setzen. Ausnahme: Reiter-Indikator der Karrieretag-Unternavigation (.c-ktnav__link), der kein Textlink-Unterstrich ist. */ :is(a, .fv-link, .c-btn--ghost, .c-btn--outline, [class*="__title"], [class*="__name"], a.fv-card :is(h2, h3, h4)):not(.c-ktnav__link) { text-underline-offset: var(--fv-underline-offset) !important; text-decoration-thickness: var(--fv-underline-thickness) !important; text-decoration-skip-ink: none; } /* pages/_ui-hierarchie.css */ /* Hierarchie-Schicht (ui-senior, 06.10.2026). Besitz: ui-senior. Gebuendelt nach pages/_typo.css, vor den Bereichsdateien. Ziel (Alexander: "sehr voll mit Typo", Jelena: "matscht alles zusammen"): wenige, klar springende Stufen nach Manual 5.2. H1 56/36 Bold > H2 40/28 Bold > Kartentitel 22/20 SemiBold > Lead 22/19 Medium > Body 18/17 Regular > Meta 14 Regular. Grosse Spruenge statt Treppchen: Kartentitel nie in H3-Groesse 28 neben H2 40, Labels/Meta nie fett, Zahlen in zwei Stufen. Grundlage Messung qa/runde-6-abstand-typo.md (Fix 2, 4, 5, 9, 10, 11, 20). Stufen ausserhalb des Manuals: tokens.css [zu bestaetigen Jelena]. */ /* ---------- Lead: alle Sektions-Intros eine Stufe (Fix 2) ---------- */ :is(.c-section-head__intro, .c-evf__intro, .c-exh__intro, .c-ktv__intro, .c-ktprog__intro, .c-pkg__intro, .c-ktarc__intro, .c-gal__intro, .c-sw__intro, .c-faq__intro, .c-widget__intro, .c-e3d__intro, .c-sawir__intro, .c-tiers__intro, .c-contact__intro, .c-awards__intro, .c-winners__intro, .c-dl__intro, .c-people__intro, .c-logos__intro, .c-jbk__intro) { font-size: var(--fv-fs-lead); font-weight: var(--fv-fw-medium); line-height: var(--fv-lh-lead); letter-spacing: 0; max-width: var(--fv-measure); } /* Intros, Leads, Kartentexte: keine automatische Trennung (Fix 11). Prosa behaelt hyphens: auto aus _typo.css. */ :is(.c-section-head__intro, [class*="__intro"], [class*="__lead"], .c-page-hero__text, .c-hsz__text, .c-evh__text, .c-cta-band__text, .c-pkg__feature, .c-process__text, .c-ktv__text, .c-ktprog__text, .c-ktarc__teaser, .c-evf__dtext) { hyphens: manual; -webkit-hyphens: manual; } /* ---------- Kartentitel-Stufe 22/20 SemiBold (Fix 4, 5) ---------- */ :is(.c-process__title, .c-pkg__name, .c-ktprog__ititle, .c-ktv__itemtitle, .c-ktarc__name, .c-evf__dtitle, .c-info__title, .c-jbk__titel, .c-ktjg__hltitle, .c-person__name, .c-download__title) { font-size: var(--fv-fs-card); font-weight: var(--fv-fw-semibold); line-height: var(--fv-lh-card); letter-spacing: var(--fv-ls-h3); } /* ---------- Headline zu Inhalt 32 (Fix 9) ---------- */ :is(.c-text-media__headline, .c-text-block__headline, .c-form__title, .c-ktjg__title, .c-sawir__headline, .c-e3d__headline) { margin-bottom: var(--fv-head-gap); } /* ---------- Sektionskopf: ein Muster (H2, 16, Lead, 48, Inhalt) ---------- */ .c-section-head__intro { color: var(--fv-fg-muted, var(--fv-schiefer)); } /* ui-senior: ein Kopfmuster fuer Event-Sektionen (Karrieretag, Hochschulball) (qa/runde-6 Fix 3). H2, 16, Lead (max. ca. 60 Zeichen), 48, Inhalt. Vorher: Split-Koepfe (H2 unten links, Intro oben rechts) neben gestapelten Koepfen und Sidebar-Kopf. */ :is(.c-evf__head, .c-exh__head, .c-ktarc__head, .c-gal__head) { display: block; max-width: 760px; margin-bottom: var(--fv-space-48); } :is(.c-evf__head, .c-exh__head, .c-ktarc__head, .c-gal__head) :is(.c-evf__intro, .c-exh__intro, .c-ktarc__intro, .c-gal__intro) { margin: var(--fv-space-16) 0 0; } /* ---------- Meta und Bildunterschrift: Small Regular, nie fett (Fix 20) ---------- */ .c-gal__cap { font-size: var(--fv-fs-small); line-height: var(--fv-lh-small); } .c-gal__ctitle { font-weight: var(--fv-fw-semibold); } /* ---------- Seitenkopf (page-intro): Lead deutlich kleiner als H1, Abstand H1 zu Lead 24, Lead max. ca. 60 Zeichen ---------- */ .c-page-hero__text { max-width: 34em; font-size: var(--fv-fs-lead); } .c-page-hero__headline { margin-bottom: var(--fv-space-24); } /* ---------- CTA-Band: keine Einzelwortzeilen (Fix 16) ---------- */ .c-cta-band__headline { max-width: 20ch; } /* ---------- Header-Button wie alle Buttons 16 px (Fix 19) ---------- */ .c-header__cta { font-size: var(--fv-fs-button); } /* pages/aktuelles.css */ /* Aktuelles / Termine / Presse: gemeinsame Feed-Bausteine (Filter, Chips, Leerzustand). Verb-Akzent kommt aus tokens.css ([data-verb] setzt --accent*). Filter ohne JavaScript: Radio-Inputs + :has(). */ .c-feed__filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fv-space-8); border: 0; margin: 0 0 var(--fv-space-48); padding: 0; min-width: 0; } .c-feed__legend { float: left; margin: 0 6px 0 0; padding: 0; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); color: var(--fv-schiefer); } .c-chip { position: relative; display: inline-flex; cursor: pointer; } .c-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* Filter-Chip: Tag-Form (Radius 10), Verbkachel 10 px Radius 3, aktiv Nachtblau */ .c-chip span { display: inline-flex; align-items: center; gap: var(--fv-space-8); padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-tag); line-height: var(--fv-lh-tag); transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-chip span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent, var(--fv-nachtblau)); } .c-chip:not([data-verb]) span::before { content: none; } .c-chip:hover span { background: var(--fv-flieder-hell); } .c-chip input:checked + span { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-chip[data-verb="foerdern"] input:checked + span::before { background: var(--fv-weiss); } .c-chip input:focus-visible + span { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-feed__empty { padding: var(--fv-space-32); background: var(--fv-papier); border-radius: var(--fv-radius-24); color: var(--fv-schiefer); } .c-feed__sub { margin: var(--fv-space-64) 0 var(--fv-space-24); font-size: var(--fv-fs-h3); line-height: var(--fv-lh-h3); letter-spacing: var(--fv-ls-h3); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-feed__list { list-style: none; margin: 0; padding: 0; } /* Filter: nicht passende Eintraege ausblenden */ .c-feed:has(input[value="foerdern"]:checked) .c-feed__item:not([data-verbs~="foerdern"]), .c-feed:has(input[value="verbinden"]:checked) .c-feed__item:not([data-verbs~="verbinden"]), .c-feed:has(input[value="unterstuetzen"]:checked) .c-feed__item:not([data-verbs~="unterstuetzen"]), .c-feed:has(input[value="entwickeln"]:checked) .c-feed__item:not([data-verbs~="entwickeln"]), .c-feed:has(input[value="werben"]:checked) .c-feed__item:not([data-verbs~="werben"]) { display: none; } /* Termin unbestaetigt (Tag-Zeile): Nebel-Flaeche statt gestrichelter Kontur */ .c-flag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-tag); color: var(--fv-schiefer); } /* pages/events.css */ /* Veranstaltungsseiten (Hochschulball, Karrieretag): Verb-Tags und gemeinsame Kopfzeilen der Event-Sektionen. Brandmanual v1.0: Events haben keine Eigenfarbe, Eventseiten neutral (Weiss, Papier, Nachtblau) mit Verb-Tags oben. Verb-Tag = .fv-verbtag (components.css): Verb als Text, 10-px-Farbkachel davor, auf dunkel Text Weiss. */ /* gemeinsame Kopfzeilen der Event-Sektionen */ :is(.c-evf, .c-exh, .c-pkg, .c-gal) .c-section-head__title { margin: 0; font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); max-width: 20ch; text-wrap: balance; } /* pages/karrieretag.css */ /* Bereich Karrieretag: Abstaende rund um die Reiterleiste (kt-subnav) und den Portal-Teaser. */ .c-ktnav + .l-section:not(.is-tint, .is-dark) { padding-top: var(--fv-section-y); } /* 96/64 statt 100,8 (qa/runde-6 Fix 6) */ .c-evh + .c-ktnav { border-top: 0; } /* pages/portal.css */ /* Aussteller-Portal (Vorschau) /speedbuild/portal/: Backend-Optik im Markendesign. Shell = Sektion portal-shell (Banner, Topbar, Seitenleiste); alle weiteren portal-* Sektionen liegen in Spalte 2. Auf Portalseiten werden Kopf und Fuß der Website ausgeblendet. Akzent: verbinden (Purpur). Nur Tokens. */ /* ---------------------------------------------------------------- Shell und Raster */ body:has(.c-portal-shell) { background: var(--fv-nebel); } body:has(.c-portal-shell) > .c-header, body:has(.c-portal-shell) > .c-footer { display: none; } html:has(.c-portal-shell) { scroll-padding-top: 24px; } /* Login/Registrierung/Passwort-vergessen/Passwort-neu (login.html.twig, forgot.html.twig, reset.html.twig, code-bestaetigen.html.twig) haben keine .c-portal-shell-Sektion, zeigten darum weiterhin die grosse, oeffentliche Marketing-Fusszeile zusaetzlich zur neuen schmalen .c-portal-footer (Jelenas Entscheidung A3, 20.10.2026, Option 2: nur die schmale zeigen). */ body:has(.c-portal-footer) > .c-footer { display: none; } main:has(> .c-portal-shell) { --side-w: 264px; --pane-pad: clamp(16px, 3.2vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; align-content: start; } main:has(> .c-portal-shell.is-app) { grid-template-columns: var(--side-w) minmax(0, 1fr); background: linear-gradient(90deg, var(--fv-weiss) var(--side-w), transparent var(--side-w)); } .c-portal-shell { display: contents; } .c-portal-banner, .c-portal-top { grid-column: 1 / -1; } main:has(> .c-portal-shell.is-app) > :not(.c-portal-shell) { grid-column: 2; } main:has(> .c-portal-shell) > :not(.c-portal-shell) { width: 100%; max-width: 1240px; padding-inline: var(--pane-pad); box-sizing: border-box; } main:has(> .c-portal-shell:not(.is-app)) > :not(.c-portal-shell) { margin-inline: auto; } main:has(> .c-portal-shell) > :last-child { padding-bottom: 96px; } /* Vorschau-Banner */ .c-portal-banner { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 9px var(--pane-pad); background: var(--fv-flieder-hell); color: var(--fv-schiefer); font-size: var(--fv-fs-small); line-height: 1.35; } .c-portal-banner__text { margin: 0; flex: 1 1 320px; } .c-portal-banner__link { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-portal-banner :focus-visible { outline-color: var(--fv-focus); } .c-portal-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); letter-spacing: 0; } .c-portal-badge::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--fv-rosa); } /* Topbar */ .c-portal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 10px var(--pane-pad); background: var(--fv-weiss); } main:has(> .c-portal-shell.is-app) .c-portal-top { padding-left: 24px; } .c-portal-top__brand { display: flex; align-items: center; gap: 14px; color: var(--fv-nachtblau); text-decoration: none; } .c-portal-top__name { display: flex; flex-direction: column; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-body); letter-spacing: 0; line-height: 1.2; } .c-portal-top__name small { font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-regular); color: var(--fv-schiefer); letter-spacing: 0; } .c-portal-glyph { display: grid; grid-template-columns: 14px 10px; grid-template-rows: 8px 14px 6px; gap: 3px; flex: none; } .c-portal-glyph i { border-radius: 3px; background: var(--fv-nachtblau); } .c-portal-glyph i:nth-child(1) { grid-column: 1 / 3; background: var(--fv-violett); } .c-portal-glyph i:nth-child(2) { background: var(--fv-rosa); } .c-portal-glyph i:nth-child(3) { background: var(--fv-purpur); } .c-portal-glyph i:nth-child(4) { grid-column: 1 / 3; } .c-portal-top__right { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; justify-content: flex-end; } .c-portal-top__switch, .c-portal-top__logout { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-nachtblau); text-decoration: none; } .c-portal-top__switch:hover, .c-portal-top__logout:hover { color: var(--accent-ink); text-decoration: underline; } .c-portal-top__cta { padding: 10px 18px; font-size: var(--fv-fs-small); } .c-portal-roles { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--fv-radius-12); background: var(--fv-nebel); font-size: var(--fv-fs-small); } .c-portal-roles__label { padding: 0 8px 0 6px; color: var(--fv-schiefer); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; } .c-portal-roles a { padding: 6px 11px; border-radius: var(--fv-radius-8); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); text-decoration: none; } .c-portal-roles a:hover { background: var(--fv-weiss); } .c-portal-roles a[aria-current="page"], .c-portal-roles a.is-active { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-portal-user { display: flex; align-items: center; gap: 10px; } .c-portal-user__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--fv-radius-12); background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); letter-spacing: 0; } .c-portal-user__text { display: flex; flex-direction: column; font-size: var(--fv-fs-small); line-height: 1.35; color: var(--fv-schiefer); } .c-portal-user__text strong { color: var(--fv-nachtblau); font-size: var(--fv-fs-small); } /* Seitenleiste */ .c-portal-side { grid-column: 1; grid-row: 3 / span 40; align-self: start; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 28px 16px 24px; color: var(--fv-schiefer); } .c-portal-side :focus-visible { outline-color: var(--fv-focus); } .c-portal-side__group { margin: 18px 12px 8px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-schiefer); } .c-portal-side__group:first-child { margin-top: 0; } .c-portal-side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .c-portal-side__list a { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--fv-radius-10); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); text-decoration: none; transition: background-color .2s; } .c-portal-side__list a:hover { background: var(--fv-nebel); } .c-portal-side__list a[aria-current="page"] { background: var(--fv-nebel); color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-portal-side__list a[aria-current="page"]::after { content: ""; position: absolute; right: 10px; width: 8px; height: 8px; border-radius: 3px; background: var(--fv-purpur); } .c-portal-side__badge { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); text-align: center; } .c-portal-side__foot { margin-top: auto; padding-top: 28px; } .c-portal-side__list--small a { padding: 7px 12px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* Icons (Maske, Farbe = currentColor) */ .c-portal-ico { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; opacity: .9; } [data-icon] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3' width='14' height='14' rx='3' fill='black'/%3E%3C/svg%3E"); } [data-icon="dashboard"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='2' width='7' height='9' rx='2'/%3E%3Crect x='11' y='2' width='7' height='5' rx='2'/%3E%3Crect x='11' y='9' width='7' height='9' rx='2'/%3E%3Crect x='2' y='13' width='7' height='5' rx='2'/%3E%3C/svg%3E"); } [data-icon="profil"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5 3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm2.5 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM4.5 14.5h6c-.6-1.6-1.7-2.4-3-2.4s-2.4.8-3 2.4ZM12 7.5v1.5h4V7.5Zm0 3v1.5h4v-1.5Z'/%3E%3C/svg%3E"); } [data-icon="stellen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 3h5A1.5 1.5 0 0 1 14 4.5V6h2a2 2 0 0 1 2 2v2.5H2V8a2 2 0 0 1 2-2h2V4.5A1.5 1.5 0 0 1 7.5 3Zm0 1.5V6h5V4.5ZM2 12h16v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); } [data-icon="infos"], [data-icon="dokumente"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M5 2h6.5L16 6.5V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm6 1v4h4ZM7 10v1.5h6V10Zm0 3v1.5h6V13Z'/%3E%3C/svg%3E"); } [data-icon="admin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 2l7 2.7v4.8c0 4.2-3 7.3-7 8.5-4-1.2-7-4.3-7-8.5V4.7Zm3.3 5.2-4.2 4.2-2-2-1.1 1.1 3.1 3.1 5.3-5.3Z'/%3E%3C/svg%3E"); } [data-icon="news"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3 3h11a1 1 0 0 1 1 1v1h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1Zm2 3v3h7V6Zm0 5v1.5h7V11Zm0 3v1.5h5V14Z'/%3E%3C/svg%3E"); } [data-icon="termine"], [data-icon="karrieretag"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6 2h1.5v2h5V2H14v2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1Zm-1.5 6v7a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8Zm2 2h3v3h-3Z'/%3E%3C/svg%3E"); } [data-icon="personen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='7' cy='6.5' r='3'/%3E%3Ccircle cx='14' cy='7.5' r='2.4'/%3E%3Cpath d='M1.5 16c.6-3.2 2.7-5 5.5-5s4.9 1.8 5.5 5ZM13 16c-.2-1.6-.8-3-1.8-4 .8-.6 1.7-.9 2.8-.9 2.3 0 4 1.6 4.5 4.9Z'/%3E%3C/svg%3E"); } [data-icon="sponsoren"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 17.5 3.4 11A4 4 0 0 1 10 5.3 4 4 0 0 1 16.6 11Z'/%3E%3C/svg%3E"); } [data-icon="preise"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7.5' r='5.5'/%3E%3Cpath d='M6.5 12.2 5 18l5-2.2 5 2.2-1.5-5.8a7 7 0 0 1-7 0Z'/%3E%3C/svg%3E"); } [data-icon="newsletter"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 4h14a1 1 0 0 1 1 1v.6l-8 5-8-5V5a1 1 0 0 1 1-1Zm-1 3.4 8 5 8-5V15a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E"); } [data-icon="seiten"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='14' rx='2.5'/%3E%3C/svg%3E"); } [data-icon="medien"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M4 3h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm9 3.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM3.5 15h13l-4.2-4.5-2.8 2.8-2-2Z'/%3E%3C/svg%3E"); } [data-icon="einstellungen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.5 2h3l.5 2.3 1.6.9 2.2-.8 1.5 2.6-1.8 1.6v1.8l1.8 1.6-1.5 2.6-2.2-.8-1.6.9-.5 2.3h-3L8 15.7l-1.6-.9-2.2.8-1.5-2.6 1.8-1.6V9.6L2.7 8l1.5-2.6 2.2.8L8 4.3ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E"); } /* Toast */ .c-portal-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 14px 18px 14px 14px; border-radius: var(--fv-radius-16); background: var(--fv-weiss); color: var(--fv-nachtblau); box-shadow: var(--fv-shadow-card); font-size: var(--fv-fs-small); line-height: 1.35; transition: opacity .25s, transform .25s var(--fv-easing); } .c-portal-toast:empty { display: none; } .c-portal-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .c-portal-toast::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: var(--fv-radius-8); background: var(--fv-purpur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='m5 10.5 3 3 7-7'/%3E%3C/svg%3E") center / 16px no-repeat; } /* Status (Text bleibt immer sichtbar, Farbe ist nur Zusatz) */ .c-portal-status { --st: var(--fv-schiefer); --st-bg: var(--fv-nebel); --st-ink: var(--fv-nachtblau); display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 10px 5px 8px; border-radius: var(--fv-radius-10); background: var(--st-bg); color: var(--st-ink); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); line-height: 1.2; white-space: nowrap; } .c-portal-status::before, .c-portal-dot { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--st); flex: none; display: inline-block; } [data-status="entwurf"] { --st: var(--fv-schiefer); --st-bg: var(--fv-nebel); --st-ink: var(--fv-nachtblau); } [data-status="pruefung"], [data-status="beantragt"] { --st: var(--fv-violett); --st-bg: var(--fv-flieder-hell); --st-ink: var(--fv-nachtblau); } [data-status="freigegeben"], [data-status="veroeffentlicht"], [data-status="bestaetigt"] { --st: var(--fv-purpur); --st-bg: var(--fv-flieder-hell); --st-ink: var(--fv-nachtblau); } [data-status="bezahlt"] { --st: var(--fv-rosa); --st-bg: var(--fv-rosa-hell); --st-ink: var(--fv-nachtblau); } [data-status="archiviert"], [data-status="abgesagt"] { --st: var(--fv-schiefer); --st-bg: var(--fv-nebel); --st-ink: var(--fv-schiefer); } .c-portal-status[data-status="archiviert"]::before, .c-portal-status[data-status="abgesagt"]::before { background: var(--fv-schiefer); opacity: .55; } .c-portal-status--on-dark { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-portal-status--on-dark::before { background: var(--fv-nachtblau); } /* ---------------------------------------------------------------- portal-head */ .c-portal-head { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 8px; } .c-portal-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; } .c-portal-head__copy { max-width: 720px; } .c-portal-head__title { font-size: var(--fv-fs-h1); line-height: var(--fv-lh-h1); letter-spacing: var(--fv-ls-h1); margin: 0 0 12px; } .c-portal-head__intro { margin: 0; color: var(--fv-schiefer); font-size: var(--fv-fs-body); } .c-portal-head__status { margin: 16px 0 0; display: flex; align-items: center; gap: 10px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-portal-head__actions { display: flex; gap: 10px; flex-wrap: wrap; } .c-portal-head__actions .c-btn { padding: 12px 20px; font-size: var(--fv-fs-small); } .c-portal-anchors { margin-top: 24px; border-bottom: 2px solid var(--fv-nebel); } .c-portal-anchors ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; } .c-portal-anchors a { display: block; padding: 10px 14px 12px; color: var(--fv-schiefer); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; } .c-portal-anchors a:hover { color: var(--fv-nachtblau); border-color: var(--fv-rosa); } /* Karten-Grundform */ .c-pd__card, .c-pp, .c-pf:not(.c-pf--auth) .c-pf__main, .c-pa__item, .c-pa__table-wrap, .c-pj__row, .c-pw__step, .c-pw__feature, .c-pw__role { background: var(--fv-weiss); border: 0; border-radius: var(--fv-radius-24); box-shadow: var(--fv-shadow-card); } /* ---------------------------------------------------------------- portal-dashboard */ .c-pd { display: grid; gap: 20px; padding-top: 24px; } .c-pd__top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; } .c-pd__profile { position: relative; overflow: hidden; padding: 28px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); } .c-pd__profile :focus-visible { outline-color: var(--fv-focus); } .c-pd__profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .c-pd__profile-head > div { flex: 1 1 200px; } .c-pd__logo { display: grid; place-items: center; width: 60px; height: 60px; border-radius: var(--fv-radius-16); background: var(--fv-nachtblau); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-lead); flex: none; } .c-pd__profile-title { margin: 0; color: var(--fv-nachtblau); font-size: var(--fv-fs-h2); } .c-pd__profile-text { margin: 18px 0 22px; max-width: 60ch; color: var(--fv-schiefer); } .c-pd__profile-link { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-pd__steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .c-pd__step { display: flex; flex-direction: column; gap: 8px; font-size: var(--fv-fs-small); line-height: 1.35; color: var(--fv-schiefer); } .c-pd__step-dot { height: 6px; border-radius: 3px; background: var(--fv-nebel); } .c-pd__step.is-done .c-pd__step-dot { background: var(--fv-nachtblau); } .c-pd__step.is-current .c-pd__step-dot { background: var(--fv-rosa); } .c-pd__step.is-done, .c-pd__step.is-current { color: var(--fv-nachtblau); } .c-pd__step-label { font-weight: var(--fv-fw-bold); } .c-pd__step-text { color: var(--fv-schiefer); } .c-pd__event { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; padding: 28px; border-radius: var(--fv-radius-24); background: var(--fv-flieder-hell); color: var(--fv-nachtblau); } .c-pd__event-title { margin: 0 0 8px; color: var(--fv-nachtblau); font-size: var(--fv-fs-h2); } .c-pd__event-date { margin: 0; font-weight: var(--fv-fw-bold); } .c-pd__event-text { margin: 10px 0 0; color: var(--fv-schiefer); font-size: var(--fv-fs-small); } .c-pd__event-blocks { position: absolute; top: 22px; right: 22px; display: grid; grid-template-columns: 54px 34px; grid-template-rows: 22px 44px; gap: 6px; } .c-pd__event-blocks i { border-radius: var(--fv-radius-8); background: var(--fv-nebel); } .c-pd__event-blocks i:first-child { grid-column: 1 / 3; height: 10px; align-self: start; background: var(--fv-purpur); } .c-pd__event-blocks i:last-child { background: var(--fv-rosa); } /* Antrag Teilnahme */ .c-pd__apply { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 40px; align-items: center; padding: 28px; border-radius: var(--fv-radius-24); background: var(--fv-flieder-hell); } .c-pd__apply-title { margin: 0 0 10px; font-size: var(--fv-fs-h3); } .c-pd__apply-text { margin: 0; color: var(--fv-schiefer); } .c-pd__apply-state { margin: 14px 0 0; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; font-size: var(--fv-fs-small); } .c-pd__packages { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .c-pd__packages-legend { margin-bottom: 8px; font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); } .c-pd__package { position: relative; cursor: pointer; } .c-pd__package input { position: absolute; opacity: 0; inset: 0; } .c-pd__package-box { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; border-radius: var(--fv-radius-16); background: var(--fv-weiss); border: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); transition: border-color .2s; } .c-pd__package-box strong { color: var(--fv-nachtblau); font-size: var(--fv-fs-small); line-height: 1.2; } .c-pd__package-box::before { content: ""; width: 18px; height: 18px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); margin-bottom: 6px; } .c-pd__package input:checked + .c-pd__package-box { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-pd__package input:checked + .c-pd__package-box strong { color: var(--fv-weiss); } .c-pd__package input:checked + .c-pd__package-box::before { background: var(--fv-purpur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.6'%3E%3Cpath d='m5 10.5 3 3 7-7'/%3E%3C/svg%3E") center / 14px no-repeat; } .c-pd__package input:focus-visible + .c-pd__package-box { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-pd__apply-note { margin: 0 0 14px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pd__apply-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .c-pd__apply-link { font-weight: var(--fv-fw-bold); } .c-pd__apply.is-applied .c-pd__apply-form { opacity: .55; pointer-events: none; } /* Zahlen */ .c-pd__stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .c-pd__stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); box-shadow: var(--fv-shadow-card); color: var(--fv-nachtblau); text-decoration: none; transition: background-color var(--fv-duration) var(--fv-easing); } .c-pd__stat:hover { background: var(--fv-flieder-hell); } .c-pd__stat-value { font-size: var(--fv-fs-h2); font-weight: var(--fv-fw-bold); line-height: 1; letter-spacing: var(--fv-ls-h2); } .c-pd__stat-label { display: flex; align-items: center; gap: 8px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-pd__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .c-pd__card { padding: 24px; } .c-pd__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .c-pd__card-title { margin: 0; font-size: var(--fv-fs-lead); letter-spacing: 0; } .c-pd__card-meta { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pd__card-link { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); } .c-pd__tasks, .c-pd__dates, .c-pd__jobs, .c-pd__history { list-style: none; margin: 0; padding: 0; } .c-pd__task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--fv-nebel); } .c-pd__task:first-child { border-top: 0; padding-top: 0; } .c-pd__task input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fv-nachtblau); } .c-pd__task label { display: flex; flex-direction: column; cursor: pointer; } .c-pd__task-title { font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); } .c-pd__task-text { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pd__task input:checked + label .c-pd__task-title { text-decoration: line-through; color: var(--fv-schiefer); } .c-pd__task-link { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); white-space: nowrap; } .c-pd__date { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0 12px 14px; border-top: 1px solid var(--fv-nebel); position: relative; } .c-pd__date:first-child { border-top: 0; } .c-pd__date::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: calc(100% - 32px); min-height: 14px; border-radius: 3px; background: var(--accent); } .c-pd__date-when { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-pd__date-what { display: flex; flex-direction: column; font-size: var(--fv-fs-small); } .c-pd__date-what span { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pd__job, .c-pd__hist { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--fv-nebel); } .c-pd__job:first-child, .c-pd__hist:first-child { border-top: 0; } .c-pd__job-type { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-violett); } .c-pd__job-title { font-weight: var(--fv-fw-bold); } .c-pd__job-date { font-size: var(--fv-fs-small); color: var(--fv-schiefer); white-space: nowrap; } .c-pd__hist { grid-template-columns: auto minmax(0, 1fr) auto; } .c-pd__hist-year { display: grid; place-items: center; width: 56px; height: 40px; border-radius: var(--fv-radius-10); background: var(--fv-nachtblau); color: var(--fv-weiss); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); } .c-pd__hist-what { display: flex; flex-direction: column; } .c-pd__hist-what span { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* ---------------------------------------------------------------- portal-jobs */ .c-pj { padding-top: 24px; } .c-pj__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .c-pj__tabs { display: flex; gap: 6px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; } .c-pj__tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; } .c-pj__tabs label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--fv-radius-12); background: var(--fv-weiss); font-weight: var(--fv-fw-bold); font-size: var(--fv-fs-small); cursor: pointer; } .c-pj__tabs label:hover { background: var(--fv-flieder-hell); } .c-pj__tabs input:checked + label { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-pj__tabs input:focus-visible + label { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-pj__n { min-width: 20px; padding: 1px 6px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); color: var(--fv-schiefer); font-size: var(--fv-fs-tag); text-align: center; } .c-pj__n:empty { display: none; } .c-pj__tabs input:checked + label .c-pj__n { background: var(--fv-weiss); color: var(--fv-nachtblau); } .c-pj__tools { display: flex; gap: 12px; flex-wrap: wrap; } .c-pj__tool { display: flex; flex-direction: column; gap: 4px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-pj__tool select { appearance: none; padding-right: 38px !important; background: var(--fv-nebel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23171d3a' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") right 10px center / 18px no-repeat !important; } .c-pj__tool select, .c-pj__tool input { min-height: 42px; padding: 8px 12px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-nebel); font: inherit; font-size: var(--fv-fs-button); font-weight: var(--fv-fw-regular); color: var(--fv-nachtblau); min-width: 180px; } .c-pj__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .c-pj__row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; grid-template-areas: "main state" "actions actions"; gap: 14px 24px; padding: 20px 22px; transition: background-color var(--fv-duration) var(--fv-easing); } .c-pj__row:hover { background: var(--fv-papier); } .c-pj__row[hidden] { display: none; } .c-pj__main { grid-area: main; } .c-pj__type { display: inline-flex; margin: 0 0 6px; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); letter-spacing: 0; color: var(--fv-violett); } .c-pj__type[data-type="abschlussarbeit"] { color: var(--fv-purpur); } .c-pj__type[data-type="werkstudium"] { color: var(--fv-nachtblau); } .c-pj__type[data-type="einstieg"] { color: var(--fv-violett); } .c-pj__title { margin: 0 0 6px; font-size: var(--fv-fs-lead); letter-spacing: 0; } .c-pj__title a { color: var(--fv-nachtblau); text-decoration: none; } .c-pj__title a:hover { text-decoration: underline; } .c-pj__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pj__meta span:empty { display: none; } .c-pj__fields { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .c-pj__fields li { padding: 4px 10px; border-radius: var(--fv-radius-10); background: var(--fv-nebel); font-size: var(--fv-fs-tag); font-weight: var(--fv-fw-bold); color: var(--fv-schiefer); } .c-pj__comment { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--fv-radius-12); background: var(--fv-rosa-hell); font-size: var(--fv-fs-small); } .c-pj__state { grid-area: state; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .c-pj__date { font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pj__actions { grid-area: actions; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--fv-nebel); } .c-pj__btn { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-nebel); color: var(--fv-nachtblau); font: inherit; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); text-decoration: none; cursor: pointer; } .c-pj__btn:hover { background: var(--fv-flieder-hell); } .c-pj__btn--accent { background: var(--fv-nachtblau); color: var(--fv-weiss); } .c-pj__btn--accent:hover { background: var(--fv-nachtblau-hover); color: var(--fv-weiss); } /* Go-live-Fund 19.10.2026: Hinweistext statt fehlendem Aktivieren-Knopf (siehe Stellen.php::aktivierenHinweis()). Passt in dieselbe Flex-Reihe wie die Buttons, aber als Fliesstext statt Knopf. */ .c-pj__hint { flex: 1 1 100%; margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pj__row [data-when] { display: none; } .c-pj__row[data-status="entwurf"] [data-when="entwurf"], .c-pj__row[data-status="pruefung"] [data-when="pruefung"], .c-pj__row[data-status="veroeffentlicht"] [data-when="veroeffentlicht"], .c-pj__row[data-status="archiviert"] [data-when="archiviert"] { display: inline-flex; } .c-pj__row[data-status="archiviert"] { background: var(--fv-papier); } .c-pj__row[data-status="archiviert"] .c-pj__title a { color: var(--fv-schiefer); } /* Statusfilter ohne JS */ .c-pj:has(#pj-f-entwurf:checked) .c-pj__row:not([data-status="entwurf"]), .c-pj:has(#pj-f-pruefung:checked) .c-pj__row:not([data-status="pruefung"]), .c-pj:has(#pj-f-veroeffentlicht:checked) .c-pj__row:not([data-status="veroeffentlicht"]), .c-pj:has(#pj-f-archiviert:checked) .c-pj__row:not([data-status="archiviert"]) { display: none; } .c-pj__empty, .c-pa__empty { padding: 28px; border-radius: var(--fv-radius-24); background: var(--fv-weiss); text-align: center; color: var(--fv-schiefer); } .c-pj__note { margin: 18px 0 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } /* ---------------------------------------------------------------- portal-form */ .c-pf { padding-top: 24px; } .c-pf:not(.c-pf--auth) .c-pf__main { padding: clamp(20px, 3vw, 36px); } .c-pf__intro { max-width: 720px; margin-bottom: var(--fv-space-24); } .c-pf__title { margin: 0 0 8px; font-size: var(--fv-fs-h3); letter-spacing: var(--fv-ls-h3); } /* Feinschliff Login-Card 15.10.2026 (Jelena, Screenshot-Referenz): h1 in der Karte eine Stufe kleiner als vorher (h1-Groesse) - jetzt dieselbe Groesse/Zeilenabstand wie ein h2 auf Inhaltsseiten (siehe .c-form__title), damit login/passwort/registrierung/code-bestaetigen nicht ueberdimensioniert wirken. */ h1.c-pf__title { font-size: var(--fv-fs-h2); line-height: var(--fv-lh-h2); letter-spacing: var(--fv-ls-h2); } .c-pf__lead { margin: 0; color: var(--fv-schiefer); } .c-pf__callout { margin: 0 0 20px; padding: 14px 16px 14px 18px; border-radius: var(--fv-radius-16); background: var(--fv-flieder-hell); font-size: var(--fv-fs-small); } .c-pf__callout p { margin: 0; } .c-pf__callout-title { font-weight: var(--fv-fw-bold); margin-bottom: 2px !important; } .c-pf__required-note { margin: 0 0 8px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pf__summary { margin: 0 0 20px; padding: 16px 18px; border-radius: var(--fv-radius-16); background: var(--fv-rosa-hell); } .c-pf__summary:focus { outline: 3px solid var(--fv-focus); outline-offset: 2px; } .c-pf__summary-title { margin: 0 0 6px; font-weight: var(--fv-fw-bold); color: var(--fv-purpur); } .c-pf__summary ul { margin: 0; padding-left: 20px; } .c-pf__summary a { color: var(--fv-nachtblau); font-weight: var(--fv-fw-bold); } .c-pf__set { border: 0; margin: 0; padding: 22px 0 6px; border-top: 1px solid var(--fv-nebel); min-width: 0; } .c-pf__set:first-of-type { border-top: 0; padding-top: 8px; } .c-pf__legend { float: left; width: 100%; margin: 0 0 14px; padding: 0; font-size: var(--fv-fs-body); font-weight: var(--fv-fw-bold); } .c-pf__legend + * { clear: both; } .c-pf__sethint { margin: -6px 0 14px; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pf__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; } .c-pf__field { grid-column: span 6; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .c-pf__field--half { grid-column: span 3; } .c-pf__field--third { grid-column: span 2; } .c-pf__label { font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); padding: 0; } .c-pf__req { color: var(--fv-purpur); } .c-pf__input { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--fv-radius-12); border: 0; background: var(--fv-nebel); font: inherit; font-size: var(--fv-fs-button); color: var(--fv-nachtblau); transition: background-color var(--fv-duration) var(--fv-easing); box-sizing: border-box; } textarea.c-pf__input { resize: vertical; line-height: var(--fv-lh-body); } select.c-pf__input { appearance: none; padding-right: 40px; background: var(--fv-nebel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23171d3a' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; } .c-pf__input:hover { background-color: var(--fv-flieder-hell); } .c-pf__input:focus-visible { outline: 3px solid var(--fv-focus); outline-offset: 2px; } /* Auge-Schalter fuer Passwortfelder (Karte "Auge-Button Passwortfelder", 19.10.2026): Markup aus macros/passwort-feld.html.twig, Verhalten in js/passwort-anzeigen.js. Wrapper nur um das Passwortfeld selbst (nicht um Label/Hint/Fehler), Knopf liegt absolut am rechten Rand, gleiche Formensprache wie .c-search__close (40x40, radius-8, transparent, Hover/Focus faerbt nur um). */ .c-pf__password-wrap { position: relative; } .c-pf__password-wrap .c-pf__input { padding-right: 48px; } /* Edge/IE zeigen in type="password"-Feldern ein eigenes Augen-Symbol zum Anzeigen/Leeren - das wuerde neben unserem eigenen Knopf doppelt erscheinen. Nur Edge/IE kennen diese Pseudo-Elemente, andere Browser ignorieren die Regel folgenlos. */ .c-pf__password-wrap .c-pf__input::-ms-reveal, .c-pf__password-wrap .c-pf__input::-ms-clear { display: none; } .c-pf__password-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--fv-radius-8); background: transparent; color: var(--fv-schiefer); cursor: pointer; padding: 0; transition: background-color var(--fv-duration) var(--fv-easing), color var(--fv-duration) var(--fv-easing); } .c-pf__password-toggle:hover { background: var(--fv-flieder-hell); color: var(--fv-nachtblau); } .c-pf__password-toggle:focus-visible { outline: var(--fv-focus-width) solid var(--fv-focus); outline-offset: var(--fv-focus-offset); } .c-pf__hint, .c-pf__count { margin: 0; font-size: var(--fv-fs-small); color: var(--fv-schiefer); } .c-pf__count { text-align: right; } .c-pf__form-error { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--fv-radius-8); background: var(--fv-flieder-hell); border: 1px solid var(--fv-purpur); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); } /* Punkt B, Login-Umbau 14.10.2026: Karte fuer eigenstaendige, nicht ins Portal eingebettete c-pf-Seiten (aktuell nur /portal/login/) - die Registrierung liegt im c-pf--auth-Zweilayout mit eigenem Kartenrand, Login braucht dieselbe optische Fassung ohne das Zweispalten-Layout. */ /* Feinschliff Login-Card 15.10.2026 (Jelena): Karte bekam oben nur Abstand (padding-top: 24px oben in .c-pf), unten gar keinen - sie sass auf der Footer-Kante. Jetzt derselbe Sektionsabstand wie ueberall sonst (--fv-section-y, siehe .l-section/page-intro auf /kontakt/), oben und unten. */ .c-pf--card { padding-block: var(--fv-section-y); } .c-pf--card .c-pf__main { background: var(--fv-weiss); border-radius: var(--fv-radius-24); max-width: 480px; margin-inline: auto; } /* Formular-Rhythmus wie im Kontaktformular (.c-form__panel): Feldgruppe zu Feldgruppe deutlich grosser als Label zu Feld (das regelt weiter .c-pf__field mit gap: 6px). Betrifft nur die flachen c-pf--card-Seiten (login/passwort/passwort-neu/code-bestaetigen); die Fieldset-Formulare (Registrierung etc.) haben ihren eigenen Rhythmus ueber .c-pf__set/.c-pf__grid. */ .c-pf--card .c-pf__form { display: grid; gap: var(--fv-space-24); } /* .c-pf__field traegt sonst "grid-column: span 6" fuer den Einsatz in .c-pf__grid (6 Spalten) - hier liegen die Felder direkt im einspaltigen .c-pf__form-Grid, darum zuruecksetzen, sonst erzeugt der Span ungewollt zusaetzliche implizite Spalten. */ .c-pf--card .c-pf__field { grid-column: auto; } .c-pf--card .c-pf__links { margin: 18px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fv-fs-small); } .c-pf__submit { margin: 22px 0 0; } /* Allgemeine Meldungsbox (partials/messages.html.twig), Scopes info/warning - error nutzt bewusst dieselbe Box wie echte Formularfehler (.c-pf__form-error), siehe dort. */ .c-msg { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--fv-radius-8); background: var(--fv-nebel); color: var(--fv-nachtblau); font-size: var(--fv-fs-small); font-weight: var(--fv-fw-medium); } .c-msg p { margin: 0; } .c-msg--warning { border: 1px solid var(--fv-purpur); } /* Erfolgsmeldung nach dem Speichern (Notion-Karte 130, Auftrag Jelena 28.10.2026: bestehenden Baustein partials/messages.html.twig jetzt auch auf /redaktion/**-Seiten einbinden, siehe sections.html.twig) - Grav-Scope "success" (z. B. "Jahrgang gespeichert.") hatte bisher keine eigene Farbe und fiel auf die neutrale .c-msg-Basis zurueck. Globale Tokens statt der nur auf .red-shell beschraenkten --red-ok-*-Variablen, damit dieselbe Meldung auch ausserhalb der Redaktion (z. B. Login/Passwort-Reset) richtig aussieht. */ .c-msg--success { border: 1px solid var(--fv-violett); background: var(--fv-flieder-hell); } .c-pf__error { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fv-fs-small); font-weight: var(--fv-fw-bold); color: var(--fv-purpur); } .c-pf__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: var(--fv-radius-8); background: var(--fv-purpur); color: var(--fv-weiss); font-size: var(--fv-fs-tag); } .c-pf__error[hidden] { display: none; } .is-invalid .c-pf__input, .c-pf__input[aria-invalid="true"] { background-color: var(--fv-rosa-hell); outline: 2px solid var(--fv-purpur); outline-offset: 0; } /* Feinschliff Login-Card 15.10.2026 (Jelena): Checkbox im Theme-Stil statt Browser-Standard, gleiche Komponente wie im Newsletter-Block (.c-nl__check/.c-nl__box, siehe dort) - hier als Pseudoelemente auf dem