/* TBS-Website – Designsystem „Zwei starke Seiten“ * Aufbau: Tokens · Grundlagen · Bausteine · Startseite · Website-Teile * Dokumentation: DESIGN.md */ /* TBS-Designsystem – Tokens * Einzige Quelle für Farben, Schrift, Abstände, Formen und Bewegung. * Kontraste (WCAG 2.2): siehe DESIGN.md. Keine Werte außerhalb dieser Datei hart kodieren. */ @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-latin-ext-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/atkinson-latin-ext-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; } :root { /* Markenfarben */ --navy: #0d2454; /* Text, dunkle Flächen 15,0 : 1 auf Weiß */ --navy-800: #142f6a; /* Flächen-Variante */ --navy-600: #23428a; /* Illustration, Hover auf hell */ --blue: #164194; /* Illustration */ --red: #c0203f; /* Handlung, Akzent 6,0 : 1 auf Weiß */ --red-700: #9a1633; /* Hover auf Rot 8,3 : 1 mit Weiß */ --lilac: #8f96cb; /* Akzent auf Navy 5,3 : 1 auf Navy */ --lilac-ink: #6a71ad; /* Flieder als Schrift auf hell 4,6 : 1 auf Weiß */ --lilac-200: #d9dcf0; /* Flächen, Text auf Navy 11,1 : 1 auf Navy */ --lilac-100: #eceef8; /* helle Flächen */ --paper: #f3f4f8; /* Abschnittsfläche */ --white: #fff; /* Funktion */ --ink: var(--navy); --muted: #4c5675; /* Nebentext 7,3 : 1 auf Weiß */ --grau: #646a82; /* zurückgenommener Text 4,9 : 1 auf Papier */ --line: #d6d9e6; /* Trennlinien (dekorativ) */ --rand-feld: #7a8099; /* Rahmen von Eingabefeldern 3,9 : 1 auf Weiß */ --erfolg: #1d6b45; /* Erfolgsmeldung 6,4 : 1 auf Weiß */ --erfolg-100: #e5f2ea; --fehler: var(--red); --fehler-100: #fbe9ed; /* Schrift */ --font-head: "Montserrat", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --fs-xs: .8125rem; /* 13 px Rubriken, Hinweise */ --fs-sm: .9375rem; /* 15 px Angaben, Fußzeile */ --fs-base: 1.125rem; /* 18 px Fließtext */ --fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem); --fs-h4: 1.125rem; --fs-h3: clamp(1.2rem, 1rem + .6vw, 1.5rem); --fs-h2: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); --fs-h1: clamp(1.9rem, 1.3rem + 3.2vw, 3.75rem); --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 5.25rem); /* Abstände (4er-Raster) */ --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem; --wrap: 1240px; --text: 68ch; /* Formen */ --cut: 22px; /* schräge Ecke – das Wiedererkennungszeichen */ --radius: 4px; --pill: 999px; --schatten: 0 1px 2px rgba(13, 36, 84, .06), 0 12px 32px -12px rgba(13, 36, 84, .22); --ecke: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); /* Bewegung */ --ease: cubic-bezier(.2, .7, .2, 1); --dauer: .25s; } /* ===== Grundlagen, Kopf, Fuß, Abschnitte ===== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.125rem/1.6 var(--font-body); } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; margin: 0; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } p { margin: 0; } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .dunkel :focus-visible { outline-color: var(--white); } [hidden] { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: min(100% - 2 * var(--s5), var(--wrap)); margin-inline: auto; } /* Kopfzeile */ .kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; } .kopf.ist-gescrollt { border-bottom-color: var(--line); } .kopf .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 76px; } .logo img { width: 156px; height: auto; } .hauptnav { display: flex; gap: var(--s5); margin-left: auto; font: 600 1rem/1 var(--font-head); } .hauptnav a { text-decoration: none; padding: var(--s2) 0; border-bottom: 2px solid transparent; } .hauptnav a:hover { border-bottom-color: var(--red); } .menue-knopf { display: none; margin-left: auto; background: none; border: 2px solid var(--navy); border-radius: var(--pill); padding: .5rem 1rem; font: 700 .9375rem/1 var(--font-head); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: var(--pill); font: 700 1rem/1.1 var(--font-head); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, transform .2s var(--ease); } .btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn--rot { background: var(--red); color: var(--white); } .btn--rot:hover { background: var(--red-700); } .btn--rand { border-color: currentColor; background: transparent; } .btn--klein { padding: .65rem 1.1rem; font-size: .9375rem; } .tel { display: inline-flex; gap: .5rem; align-items: center; font: 700 1.0625rem/1.2 var(--font-head); text-decoration: none; } .tel svg { flex: none; width: 22px; height: 22px; color: var(--red); } .tel small { display: block; font: 400 .8125rem/1.3 var(--font-body); color: var(--muted); } /* Abschnitte */ .abschnitt { padding-block: clamp(var(--s7), 8vw, var(--s9)); } .abschnitt--papier { background: var(--paper); } .abschnitt--navy { background: var(--navy); color: var(--white); } .kicker { font: 700 .875rem/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s3); } .abschnitt--navy .kicker { color: var(--lilac); } .h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; } .lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: var(--muted); } .abschnitt--navy .lead { color: var(--lilac-200); } .kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s7); flex-wrap: wrap; } .pfeil-link { display: inline-flex; gap: .4rem; align-items: center; font: 700 1rem/1.2 var(--font-head); text-decoration: none; color: var(--red); } .pfeil-link svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .pfeil-link:hover svg { transform: translateX(4px); } .abschnitt--navy .pfeil-link { color: var(--white); } /* Themenliste (8 Themen) */ .themen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); } .themen li { border-bottom: 1px solid var(--line); } .themen a { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: var(--s3); align-items: center; padding: var(--s5) var(--s3) var(--s5) 0; text-decoration: none; font: 700 1.125rem/1.25 var(--font-head); transition: color .2s, padding .25s var(--ease); } .themen a:hover { color: var(--red); padding-left: var(--s2); } .themen .nr { font: 800 .875rem/1 var(--font-head); color: var(--lilac-ink); } .themen svg { width: 20px; height: 20px; color: var(--red); } @media (min-width: 700px) { .themen li:nth-child(odd) { border-right: 1px solid var(--line); } .themen li:nth-child(even) a { padding-left: var(--s5); } } @media (min-width: 1100px) { .themen { grid-template-columns: repeat(4, 1fr); } .themen li { border-right: 1px solid var(--line); } .themen li:nth-child(4n) { border-right: 0; } .themen li:not(:nth-child(4n+1)) a { padding-left: var(--s5); } } /* Ablauf */ .ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s6); counter-reset: s; } .ablauf li { counter-increment: s; border-top: 3px solid var(--lilac); padding-top: var(--s5); } .ablauf li:first-child { border-top-color: var(--red); } .ablauf li::before { content: "0" counter(s); display: block; font: 800 2.5rem/1 var(--font-head); color: var(--lilac-ink); margin-bottom: var(--s3); } .abschnitt--navy .ablauf li::before { color: var(--lilac); } .ablauf h3 { font-size: 1.25rem; margin-bottom: var(--s2); } .ablauf p { color: var(--muted); } .abschnitt--navy .ablauf p { color: var(--lilac-200); } /* Menschen */ .menschen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s7); align-items: center; } .fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); } .fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; filter: saturate(.9); transition: transform .3s var(--ease); } .fotos li:nth-child(even) { transform: translateY(var(--s5)); } .fotos li:hover img { transform: scale(1.04); } /* Seminare */ .termine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); } .termin { display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s5); background: var(--white); border-radius: 4px; text-decoration: none; box-shadow: var(--schatten); transition: transform .25s var(--ease); clip-path: var(--ecke); } .termin:hover { transform: translateY(-4px); } .termin time { font: 800 1.5rem/1 var(--font-head); color: var(--red); } .termin h3 { font-size: 1.125rem; } .termin .meta { margin-top: auto; font-size: .9375rem; color: var(--muted); } .tag { display: inline-block; font: 700 .75rem/1 var(--font-head); padding: .4rem .6rem; border-radius: var(--pill); background: var(--lilac-100); color: var(--navy-800); letter-spacing: .02em; } /* Kontaktband und Fuß */ .band { background: var(--red); color: var(--white); } .band .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--s6); padding-block: var(--s7); flex-wrap: wrap; } .band h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem); font-weight: 800; } .band .btn { background: var(--white); color: var(--red); } .band .tel small { color: #ffe1e7; } .fuss { position: relative; z-index: 6; background: var(--white); color: var(--muted); font-size: .875rem; border-top: 1px solid var(--line); } .fuss a { color: var(--navy); text-decoration: none; } .fuss a:hover { text-decoration: underline; text-underline-offset: 3px; } .fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); padding-block: var(--s5); } .fuss address { font-style: normal; } .fuss address a { white-space: nowrap; } .fuss-unten nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); } /* Handy-Leiste */ .handyleiste { display: none; } /* Erscheinen beim Scrollen */ .js .auftauchen { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .js .auftauchen.ist-da { opacity: 1; transform: none; } @media (max-width: 1000px) { .kopf .wrap { flex-wrap: wrap; } .hauptnav { order: 3; width: 100%; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); font-size: .9375rem; } .js .hauptnav { display: none; } .menue-knopf { display: inline-flex; } .kopf .btn--klein { display: none; } .menschen { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } } @media (max-width: 640px) { body { font-size: 1.0625rem; padding-bottom: 72px; } .logo img { width: 128px; } .kopf .wrap { min-height: 64px; } .fotos { grid-template-columns: repeat(3, 1fr); } .fotos li:nth-child(n+7) { display: none; } .handyleiste { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s2); position: fixed; inset: auto 0 0; z-index: 60; padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); } .handyleiste .btn { justify-content: center; padding: .85rem 1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .js .auftauchen { opacity: 1; transform: none; } } /* Hilfsklassen für Abstände */ .abstand { margin-top: var(--s4); } .abstand-gross { margin-top: var(--s6); } .abstand-unten { padding-bottom: var(--s8); } .hauptnav a[aria-current="page"] { border-bottom-color: var(--red); } /* TBS-Designsystem – Bausteine für Unterseiten, Formulare und Listen */ /* Brotkrumen */ .krumen ol { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); } .krumen li + li::before { content: "/"; margin-right: var(--s2); color: var(--lilac-ink); } .krumen a { text-decoration: none; } .krumen a:hover { text-decoration: underline; } .krumen [aria-current] { color: var(--navy); font-weight: 700; } /* Seitenkopf: geteilte Fläche wie auf der Startseite, schmaler */ .seitenkopf { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); background: var(--paper); overflow: hidden; } .seitenkopf::before { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(42.5% + 60px); background: var(--navy); clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%); } .seitenkopf-text { position: relative; padding: var(--s7) var(--s8) var(--s8) max(var(--s5), (100vw - var(--wrap)) / 2); } .seitenkopf h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; } .seitenkopf .lead { margin-top: var(--s4); } .seitenkopf-seite { position: relative; padding: var(--s7) max(var(--s5), (100vw - var(--wrap)) / 2) var(--s7) clamp(var(--s7), 6vw, 7rem); color: var(--lilac-200); display: flex; flex-direction: column; justify-content: center; gap: var(--s4); } .seitenkopf-seite h2 { color: var(--white); font-size: var(--fs-h4); } .seitenkopf-seite .tel { color: var(--white); } .seitenkopf-seite .tel small { color: var(--lilac-200); } .seitenkopf-seite .tel svg { width: 22px; height: 22px; color: var(--red); } .seitenkopf-seite a:focus-visible { outline-color: var(--white); } .seitenkopf--schlicht { grid-template-columns: minmax(0, 1fr); } .seitenkopf--schlicht::before { display: none; } .seitenkopf--schlicht .seitenkopf-text { padding-bottom: var(--s7); } /* Personen (Gesichter mit Namen) */ .personen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .person { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: center; font-size: var(--fs-sm); } .person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .person strong { display: block; font: 700 1rem/1.25 var(--font-head); color: var(--white); } .person--hell strong { color: var(--navy); } /* Fließtext */ .prosa { max-width: var(--text); } .prosa > * + * { margin-top: var(--s4); } .prosa h2 { font-size: var(--fs-h3); margin-top: var(--s6); } .prosa ul { padding-left: 1.2em; } .prosa li + li { margin-top: var(--s2); } .prosa a { color: var(--red); } /* Zweispaltiger Inhalt mit Randspalte */ .raster-inhalt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s8); align-items: start; } /* Haken-Liste */ .haken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .haken li { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--s2); } .haken li::before { content: ""; width: 1rem; height: .55rem; margin-top: .45em; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: rotate(-45deg); } /* Schrittkarten */ .schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); counter-reset: k; } .schritte li { counter-increment: k; padding: var(--s6) var(--s5); background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); } .schritte li::before { content: counter(k); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: var(--white); font: 800 1.125rem/1 var(--font-head); margin-bottom: var(--s4); } .schritte h3 { font-size: var(--fs-h4); margin-bottom: var(--s2); } .schritte p { color: var(--muted); font-size: 1rem; } /* Praxisbeispiel */ .praxis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s6); background: var(--navy); color: var(--lilac-200); clip-path: var(--ecke); } .praxis h3 { font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--lilac); margin-bottom: var(--s3); } .praxis p { font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.4 var(--font-head); color: var(--white); } .praxis .pfeil { width: 48px; height: 48px; color: var(--red); } .praxis .meta { grid-column: 1 / -1; font-size: var(--fs-sm); border-top: 1px solid var(--navy-600); padding-top: var(--s4); } @keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } } /* Downloads / Publikationen */ .downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .download { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color var(--dauer); } .download:hover { border-color: var(--navy); } .download .typ { display: grid; place-items: center; height: 64px; background: var(--lilac-100); color: var(--navy-800); font: 800 var(--fs-xs)/1 var(--font-head); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); } .download strong { display: block; font: 700 1rem/1.3 var(--font-head); } .download span { font-size: var(--fs-sm); color: var(--muted); } .download svg { width: 22px; height: 22px; color: var(--red); } /* Formulare */ .formular { display: grid; gap: var(--s5); } .feldgruppe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } .feld { display: grid; gap: var(--s2); } .feld label, .feld legend { font: 700 var(--fs-sm)/1.3 var(--font-head); } .feld .pflicht { color: var(--red); } .feld .hilfe { font-size: var(--fs-sm); color: var(--muted); } .feld input, .feld select, .feld textarea { width: 100%; font: 400 1.0625rem/1.4 var(--font-body); color: var(--ink); background: var(--white); border: 2px solid var(--rand-feld); border-radius: var(--radius); padding: .8rem .9rem; min-height: 48px; transition: border-color var(--dauer), box-shadow var(--dauer); } .feld textarea { min-height: 140px; resize: vertical; } .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--navy); } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--lilac-200); } .feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--fehler); } .feld .fehlertext { display: flex; gap: .4rem; align-items: center; font: 700 var(--fs-sm)/1.3 var(--font-body); color: var(--fehler); } .feld .fehlertext::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: var(--white); font-size: .75rem; } fieldset.feld { border: 0; padding: 0; margin: 0; } .wahl { display: flex; flex-wrap: wrap; gap: var(--s2); } .wahl label { position: relative; cursor: pointer; } .wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; } .wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--rand-feld); border-radius: var(--pill); font: 600 var(--fs-sm)/1.2 var(--font-head); transition: background var(--dauer), border-color var(--dauer), color var(--dauer); } .wahl input:hover + span { border-color: var(--navy); } .wahl input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); } .wahl input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; } .check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; font-size: var(--fs-sm); cursor: pointer; } .check input { appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--rand-feld); border-radius: var(--radius); background: var(--white); display: grid; place-items: center; cursor: pointer; } .check input:checked { background: var(--navy); border-color: var(--navy); } .check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--white); border-bottom: 3px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); } .check input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .check a { color: var(--red); } /* Meldungen */ .meldung { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); padding: var(--s5); border-left: 6px solid; border-radius: var(--radius); } .meldung h3 { font-size: var(--fs-h4); margin-bottom: var(--s1); } .meldung p { font-size: 1rem; } .meldung svg { width: 28px; height: 28px; } .meldung--erfolg { background: var(--erfolg-100); border-color: var(--erfolg); color: var(--erfolg); } .meldung--erfolg h3, .meldung--erfolg p { color: #134a30; } .meldung--fehler { background: var(--fehler-100); border-color: var(--fehler); } .meldung--fehler svg { color: var(--fehler); } .meldung--info { background: var(--lilac-100); border-color: var(--navy); } /* Filter-Chips und Suchfeld (Seminarfinder) */ .finder { position: sticky; top: 76px; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-block: var(--s4); } .finder .wrap { display: grid; gap: var(--s3); } .finder-zeile { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .suche { position: relative; flex: 1 1 280px; } .suche input { width: 100%; min-height: 48px; padding: .7rem 1rem .7rem 2.8rem; border: 2px solid var(--rand-feld); border-radius: var(--pill); font: 400 1.0625rem/1.3 var(--font-body); color: var(--ink); } .suche input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--lilac-200); } .suche svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--muted); } .finder select { min-height: 48px; padding: .6rem 2.4rem .6rem 1rem; border: 2px solid var(--rand-feld); border-radius: var(--pill); font: 600 var(--fs-sm)/1.2 var(--font-head); color: var(--ink); background: var(--white); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } .chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } .chip { flex: none; display: inline-flex; align-items: center; text-decoration: none; min-height: 40px; padding: .5rem .9rem; border-radius: var(--pill); border: 2px solid var(--line); background: var(--white); font: 600 var(--fs-sm)/1.1 var(--font-head); color: var(--ink); cursor: pointer; transition: border-color var(--dauer), background var(--dauer); } .chip:hover { border-color: var(--navy); } .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); } .chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .treffer { font: 700 var(--fs-sm)/1 var(--font-head); color: var(--muted); } /* Terminliste */ .monat { margin-top: var(--s7); } .monat h2, .monat h3 { font-size: var(--fs-h3); padding-bottom: var(--s3); border-bottom: 3px solid var(--navy); } .liste-termine { list-style: none; margin: 0; padding: 0; } .zeile { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; gap: var(--s5); align-items: center; padding: var(--s5) 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--dauer); } .zeile:hover { background: var(--paper); } .zeile:hover .pfeil { transform: translateX(4px); } .zeile .datum { font: 800 1.5rem/1 var(--font-head); color: var(--red); } .zeile .datum small { display: block; font: 600 var(--fs-xs)/1.3 var(--font-head); color: var(--muted); margin-top: .3rem; } .zeile h3 { font-size: var(--fs-h4); margin-bottom: var(--s2); } .zeile .angaben { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--muted); align-items: center; } .plaetze { font: 700 var(--fs-xs)/1 var(--font-head); padding: .45rem .7rem; border-radius: var(--pill); white-space: nowrap; } .plaetze--frei { background: var(--erfolg-100); color: #134a30; } .plaetze--wenig { background: #fff1d6; color: #6b4300; } .plaetze--voll { background: var(--lilac-100); color: var(--navy-800); } .zeile .pfeil { width: 22px; height: 22px; color: var(--red); transition: transform var(--dauer) var(--ease); } .leer { padding: var(--s7) 0; text-align: center; color: var(--muted); } @media (max-width: 900px) { .seitenkopf { grid-template-columns: minmax(0, 1fr); } .seitenkopf::before { display: none; } .seitenkopf-text { padding: var(--s6) var(--s5) var(--s8); } .seitenkopf-seite { background: var(--navy); margin-top: -40px; padding: calc(var(--s6) + 40px) var(--s5) var(--s6); clip-path: polygon(-1px 40px, calc(100% + 1px) 0, calc(100% + 1px) 100%, -1px 100%); } .seitenkopf-seite .nur-gross { display: none; } .raster-inhalt { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .praxis { grid-template-columns: minmax(0, 1fr); } .praxis .pfeil { transform: rotate(90deg); } .feldgruppe { grid-template-columns: minmax(0, 1fr); } .zeile { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3) var(--s4); } .zeile .plaetze { grid-column: 2; justify-self: start; } .zeile .pfeil { display: none; } .finder { position: static; } } /* ===== Startseite: Bühne „Zwei starke Seiten“ und Fragen-Wand ===== */ /* Bühne: geteilte Fläche, die Trennlinie ist die schräge TBS-Ecke */ .gegen { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto; align-content: center; min-height: min(calc(100svh - 120px), 720px); background: var(--paper); overflow: hidden; } .gegen::before { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(53.5% + 80px); background: var(--navy); clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%); } .gegen h1 { display: contents; } .gegen-links { position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: center; display: block; padding: var(--s8) var(--s8) var(--s8) max(var(--s5), (100vw - var(--wrap)) / 2); font: 600 clamp(1.35rem, .9rem + 1.6vw, 2.15rem)/1.3 var(--font-head); color: var(--grau); } .gegen-links > span { display: block; } .gegen-links .wer { color: var(--navy); font-weight: 700; } .gegen-links .liste span { display: block; width: fit-content; } /* Ohne Aufzählung ein durchgehender Satz: beide Hälften gleich groß, auf einer Grundlinie */ .gegen--satz .gegen-links, .gegen--satz .gegen-punkt { grid-row: 1; align-self: end; padding-bottom: 0; font: 800 clamp(2rem, .6rem + 3.2vw, 4rem)/1.05 var(--font-head); letter-spacing: -.03em; } .gegen--satz .gegen-links .wer { font-weight: 800; } /* Das längste Wort (mit Lücke gut 8em) muss in die linke Spalte passen, auch wenn der Rand auf breiten Schirmen wächst */ /* Beide Satzhälften gleich gewichtet: Spalten gleich breit, die schräge Kante schneidet genau die Mitte */ .gegen--satz { container-type: inline-size; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gegen--satz::before { width: calc(50% + 40px); } .gegen--satz .gegen-links, .gegen--satz .gegen-punkt { font-size: min(clamp(2rem, .6rem + 3.2vw, 4rem), (100cqi / 2 - max(var(--s5), (100cqi - var(--wrap)) / 2) - var(--s8)) / 9); } @media (max-width: 900px) { .gegen--satz .gegen-links, .gegen--satz .gegen-punkt { font-size: min(clamp(2rem, .6rem + 3.2vw, 4rem), (100cqi - 2 * var(--s5)) / 8.6); } .gegen--satz .gegen-links, .gegen--satz .gegen-punkt { grid-row: auto; } .gegen--satz .gegen-links { padding-bottom: var(--s8); } .gegen--satz .gegen-punkt { padding-bottom: .25em; } } /* Fehlender Buchstabe: eine Vertiefung in Form des Puzzleteils (Rechteck mit Nase unten), oben im Schatten. Der Buchstabe bleibt für Screenreader im Text, ist aber unsichtbar. */ .wort { white-space: nowrap; } .luecke { position: relative; display: inline-block; } .luecke > span { color: transparent; } .luecke::after { content: ""; position: absolute; inset: .1em -.01em -.02em; border-radius: .07em; background: linear-gradient(#d3d7e3, #e6e8f0); box-shadow: inset 0 .045em .05em rgba(13, 36, 84, .3), 0 .02em 0 #fff; } .luecke::before { content: ""; position: absolute; z-index: 1; left: 50%; bottom: -.2em; width: .24em; height: .24em; margin-left: -.12em; border-radius: 50%; background: #e6e8f0; box-shadow: 0 .02em 0 #fff; clip-path: inset(.03em -.1em -.1em -.1em); } .luecke::before, .luecke::after { transition: opacity .3s; } .komplett .luecke::before, .komplett .luecke::after { opacity: 0; } /* Das Teil sitzt zuerst im Wort, fällt heraus und gleitet beim Überfahren zurück in die Lücke (site.js) */ .teil { position: absolute; z-index: 2; display: block; text-align: center; white-space: nowrap; color: var(--white); pointer-events: none; opacity: 0; animation: da .6s var(--ease) .15s forwards; transition: transform .9s cubic-bezier(.55, 0, .2, 1.15), color .3s; } .teil::before { content: ""; position: absolute; z-index: -1; inset: .1em -.01em -.02em; background: var(--red); border-radius: .07em; transition: opacity .3s; } .teil::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -.2em; width: .24em; height: .24em; margin-left: -.12em; border-radius: 50%; background: var(--red); transition: opacity .3s; } .teil > span { display: inline-block; transform: translateY(.03em) scale(.78); transition: transform .3s var(--ease); } .teil.drin { color: var(--navy); } /* Als loses Teil hat die Schrift Luft zum Rand, im Wort wieder volle Größe */ .teil.drin > span { transform: none; } .teil.drin::before, .teil.drin::after { opacity: 0; } @keyframes da { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .js .gegen .gegen-links, .js .gegen .gegen-punkt, .js .gegen .gegen-mehr, .js .gegen .gegen-mehr > *, .js .gegen-links .liste span, .teil { opacity: 1 !important; } .js .gegen .gegen-links, .js .gegen .gegen-punkt, .js .gegen .gegen-mehr, .js .gegen-links .liste span { transform: none !important; } .js .gegen-punkt em::after { transform: none !important; } } .gegen-punkt { position: relative; grid-column: 2; grid-row: 1; align-self: end; display: block; padding: var(--s8) max(var(--s5), (100vw - var(--wrap)) / 2) 0 clamp(var(--s7), 7vw, 9rem); color: var(--white); font: 800 clamp(3.4rem, 1.6rem + 6.4vw, 7.25rem)/.95 var(--font-head); letter-spacing: -.035em; } .gegen-punkt em { font-style: normal; position: relative; white-space: nowrap; } .gegen-punkt em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .1em; background: var(--red); transform-origin: left; } .gegen-mehr { position: relative; grid-column: 2; grid-row: 2; padding: var(--s6) max(var(--s5), (100vw - var(--wrap)) / 2) var(--s8) clamp(var(--s7), 7vw, 9rem); color: var(--lilac-200); } .gegen-mehr .text { max-width: 34ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); } .gegen-mehr strong { color: var(--white); } .werte { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--white); font: 700 .9375rem/1.3 var(--font-head); } .werte li { display: flex; gap: .5rem; align-items: center; } .werte li::before { content: ""; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); } .aktionen { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; margin-top: var(--s6); } .gegen-mehr .tel { color: var(--white); } .gegen-mehr .tel small { color: var(--lilac-200); } .aktionen .tel svg { width: 22px; height: 22px; color: var(--red); } .gegen .btn--rot:focus-visible, .gegen-mehr a:focus-visible { outline-color: var(--white); } .abstand { margin-top: var(--s4); } .abstand-gross { margin-top: var(--s6); } /* Auftritt: erst die Gegenseite, dann die Pointe */ .js .gegen-links .liste span { opacity: 0; transform: translateX(-12px); animation: rein .6s var(--ease) forwards; } .js .gegen-links .liste span:nth-child(1) { animation-delay: .25s; } .js .gegen-links .liste span:nth-child(2) { animation-delay: .5s; } .js .gegen-links .liste span:nth-child(3) { animation-delay: .75s; } .js .gegen-links .liste span:nth-child(4) { animation-delay: 1s; } .js .gegen-punkt { opacity: 0; transform: translateY(18px); animation: rein .8s var(--ease) 1.35s forwards; } .js .gegen-punkt em::after { transform: scaleX(0); animation: strich .6s var(--ease) 2s forwards; } .js .gegen-mehr { opacity: 0; animation: rein .7s var(--ease) 1.9s forwards; } /* Satz: Anfang zuerst, dann fällt das Teil heraus, danach folgt die Pointe */ .js .gegen--satz .gegen-links { opacity: 0; animation: rein .6s var(--ease) .15s forwards; } .js .gegen--satz .gegen-punkt { transform: translateX(-12px); animation-delay: 1.7s; } .js .gegen--satz .gegen-punkt em::after { animation-delay: 2.3s; } .js .gegen--satz .gegen-mehr { animation-delay: 2.4s; } @keyframes rein { to { opacity: 1; transform: none; } } @keyframes strich { to { transform: scaleX(1); } } /* Schmal gehört das Blau zu den Blöcken selbst: Die Fläche steht sofort, nur ihr Inhalt blendet ein */ @media (max-width: 900px) { .js .gegen .gegen-punkt { opacity: 1; transform: none; animation: textrein .8s var(--ease) 1.35s backwards; } .js .gegen .gegen-mehr { opacity: 1; animation: none; } .js .gegen .gegen-mehr > * { opacity: 0; animation: rein .7s var(--ease) 1.9s forwards; } .js .gegen--satz .gegen-punkt { animation-delay: 1.7s; } .js .gegen--satz .gegen-mehr > * { animation-delay: 2.4s; } } @keyframes textrein { from { color: transparent; } } /* Fragen-Wand */ .hinweis { display: inline-block; margin-top: var(--s4); font-size: .8125rem; color: var(--muted); background: var(--lilac-100); padding: .3rem .6rem; border-radius: 4px; } .eigene { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s5); margin-top: var(--s6); padding: var(--s6); border: 2px dashed var(--lilac); border-radius: 4px; } .eigene p { font: 700 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.25 var(--font-head); } @media (max-width: 900px) { .gegen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; } .gegen::before { display: none; } .gegen-links { grid-row: auto; padding: var(--s7) var(--s5) var(--s8); } .gegen-punkt { grid-column: 1; grid-row: auto; background: var(--navy); margin-top: -40px; padding: calc(var(--s7) + 40px) var(--s5) .25em; clip-path: polygon(-1px 40px, calc(100% + 1px) 0, calc(100% + 1px) 100%, -1px 100%); } .gegen-mehr { grid-column: 1; grid-row: auto; background: var(--navy); margin-top: -1px; padding: var(--s5) var(--s5) var(--s7); } } .aktionen--band { margin: 0; } .gegen-punkt--lang { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.25rem); line-height: 1; } .gegen-punkt--lang em { white-space: normal; } /* ========================================================================= Website: Navigation, Seitenbausteine, Formulare, Inhalte ========================================================================= */ /* Sprungmarke */ .sprung { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--navy); color: var(--white); padding: var(--s3) var(--s4); border-radius: var(--radius); font: 700 var(--fs-sm)/1 var(--font-head); } .sprung:focus { top: var(--s3); } /* Mobile Navigation */ .menue-knopf { align-items: center; gap: .5rem; cursor: pointer; } .menue-knopf .striche { position: relative; width: 18px; height: 2px; background: currentColor; transition: background .2s; } .menue-knopf .striche::before, .menue-knopf .striche::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .25s var(--ease); } .menue-knopf .striche::before { top: -6px; } .menue-knopf .striche::after { top: 6px; } .menue-knopf[aria-expanded="true"] .striche { background: transparent; } .menue-knopf[aria-expanded="true"] .striche::before { transform: translateY(6px) rotate(45deg); } .menue-knopf[aria-expanded="true"] .striche::after { transform: translateY(-6px) rotate(-45deg); } .hauptnav .nur-mobil { display: none; } @media (max-width: 1000px) { .js .kopf .wrap { flex-wrap: nowrap; } .js .hauptnav { position: fixed; inset: 64px 0 0; z-index: 49; display: none; flex-direction: column; gap: 0; margin: 0; padding: var(--s5); background: var(--white); overflow-y: auto; font-size: 1.375rem; } .js .hauptnav.ist-offen { display: flex; } .js .hauptnav a { padding: var(--s4) 0; border-bottom: 1px solid var(--line); } .js .hauptnav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--line); } .js .hauptnav .nur-mobil { display: inline-flex; margin-top: var(--s5); justify-content: center; border: 0; } } @media (min-width: 641px) and (max-width: 1000px) { .js .hauptnav { inset: 76px 0 0; } } /* Kopfzeile: oben großes Logo, beim Scrollen schrumpft es auf die normale Größe */ .kopf .wrap { transition: min-height .3s var(--ease); } .logo img { transition: width .3s var(--ease); } :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .wrap { min-height: 112px; } :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .logo img { width: 220px; } @media (max-width: 1000px) { :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .wrap { min-height: 96px; } :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .logo img { width: 190px; } } @media (max-width: 640px) { :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .wrap { min-height: 80px; } :root:not(.menue-offen) .kopf:not(.ist-gescrollt) .logo img { width: 164px; } } @media (prefers-reduced-motion: reduce) { .kopf .wrap, .logo img { transition: none; } } /* Unterseiten-Reiter (Seminare | Veranstaltungen, Aktuelles | Publikationen) */ .reiter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); } .reiter a { min-height: 40px; display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: var(--pill); border: 2px solid var(--line); background: var(--white); font: 700 var(--fs-sm)/1 var(--font-head); text-decoration: none; } .reiter a:hover { border-color: var(--navy); } .reiter a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--white); } /* Karten (Beiträge, Projekte, Publikationen) */ .karten-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s5); } .karten-raster--2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .karte { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); transition: transform var(--dauer) var(--ease); } .karte:hover { transform: translateY(-4px); } .karte-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lilac-100); } .karte-bild img, .karte-bild svg { width: 100%; height: 100%; object-fit: cover; } .karte-bild svg { padding: 12%; color: var(--lilac-200); } .karte-text { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; } .karte .rubrik { font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--red); } .karte h2, .karte h3 { font-size: var(--fs-h4); line-height: 1.3; } .karte h2 a, .karte h3 a { text-decoration: none; } .karte h2 a::after, .karte h3 a::after { content: ""; position: absolute; inset: 0; } .karte p { font-size: 1rem; color: var(--muted); } .karte-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: var(--s3); font-size: var(--fs-sm); color: var(--muted); } .karte-fuss .icon { color: var(--red); } .karte--cover .karte-bild { aspect-ratio: 3 / 4; background: var(--paper); } .karte--cover .karte-bild img { object-fit: contain; padding: var(--s4); } /* Detailseiten (Seminar, Veranstaltung, Beitrag, Projekt) */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s8); align-items: start; padding-block: var(--s7) var(--s8); } .detail--schmal { grid-template-columns: minmax(0, var(--text)); justify-content: center; } .seitenkopf--schmal .seitenkopf-text { padding-inline: max(var(--s5), (100% - var(--text)) / 2); } .seitenkopf--schmal h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); } .prosa { overflow-wrap: break-word; hyphens: auto; } .prosa table { display: block; max-width: 100%; overflow-x: auto; } .titelbild { margin: 0 0 var(--s6); } .titelbild img { width: 100%; height: auto; border-radius: var(--radius); } .eckdaten { position: sticky; top: 100px; background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); } .eckdaten-kopf { display: grid; gap: var(--s1); padding: var(--s5); background: var(--navy); color: var(--white); } .eckdaten-kopf .rubrik { font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--lilac); } .eckdaten-datum { font: 800 1.5rem/1.2 var(--font-head); } .eckdaten-zeit { color: var(--lilac-200); font-size: var(--fs-sm); } .eckdaten-inhalt { display: grid; gap: var(--s4); padding: var(--s5); } .eckdaten dl { margin: 0; display: grid; gap: var(--s3); } .eckdaten dt { font: 700 var(--fs-xs)/1.2 var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .eckdaten dd { margin: 0; font-size: 1rem; } .eckdaten .btn { justify-content: center; } .eckdaten-hinweis { font-size: var(--fs-sm); color: var(--muted); } .eckdaten-block { display: grid; gap: var(--s3); justify-items: start; } .eckdaten-block + .eckdaten-block { padding-top: var(--s4); border-top: 1px solid var(--line); } .eckdaten-block .btn { justify-self: stretch; } .eckdaten-titel { font: 700 var(--fs-xs)/1.2 var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .eckdaten-termine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); } .eckdaten-termine a { display: grid; gap: .2rem; text-decoration: none; font: 700 1rem/1.3 var(--font-head); color: var(--navy); } .eckdaten-termine a:hover span { text-decoration: underline; } .eckdaten-termine small { font: 600 var(--fs-xs)/1.2 var(--font-head); color: var(--red); font-variant-numeric: tabular-nums; } /* Rechtliche Seiten: Navigation in der Seitenspalte */ .rechtliches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); width: 100%; } .rechtliches a { display: block; padding: var(--s2) 0; font: 700 1rem/1.3 var(--font-head); color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); } .rechtliches a:hover { color: var(--red); } .rechtliches a[aria-current="page"] { color: var(--red); } /* Projekte: Logo und Förderlogos ungeschnitten, Partner als Logo-Raster */ .eckdaten-logo { display: grid; place-items: center; padding: var(--s5); border-bottom: 1px solid var(--line); } .eckdaten-logo img, .foerderlogos img, .partner-logo img { width: auto; height: auto; max-width: 100%; } .eckdaten-logo img { max-height: 120px; } .eckdaten-text { font-size: var(--fs-sm); } .foerderlogos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); width: 100%; } .foerderlogos img { max-height: 72px; } .eckdaten-veranstalter { border-top: 1px solid var(--line); } .veranstalterlogos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); width: 100%; } .veranstalterlogos img { width: auto; height: auto; max-width: 100%; max-height: 300px; } .partner-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--s4); } .partner { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color var(--dauer), box-shadow var(--dauer); } a.partner:hover { border-color: var(--navy); box-shadow: var(--schatten); } .partner-logo { display: flex; align-items: center; justify-content: center; height: 136px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .partner-logo img { max-height: 112px; object-fit: contain; } .partner-name { padding: var(--s4); font: 600 var(--fs-sm)/1.35 var(--font-head); color: var(--navy); hyphens: auto; overflow-wrap: break-word; } @media (max-width: 640px) { .partner { flex-direction: row; } .partner-logo { flex: 0 0 104px; height: auto; padding: var(--s2); border-bottom: 0; border-right: 1px solid var(--line); } .partner-logo img { max-height: 80px; } .partner-name { flex: 1; min-width: 0; align-self: center; } } .themen-tags { display: flex; flex-wrap: wrap; gap: var(--s2); } .themen-tags a { text-decoration: none; } .themen-tags a:hover { background: var(--lilac-200); } /* Fließtext aus dem Redaktionsbereich */ .prosa h2 { font-size: var(--fs-h3); margin-top: var(--s7); } .prosa h3 { font-size: var(--fs-h4); margin-top: var(--s6); } .prosa > :first-child { margin-top: 0; } .prosa ol { padding-left: 1.4em; } .prosa blockquote { margin: var(--s6) 0; padding: var(--s5) var(--s6); background: var(--lilac-100); border-left: 6px solid var(--red); font: 600 1.25rem/1.45 var(--font-head); } .prosa blockquote footer { margin-top: var(--s3); font: 400 var(--fs-sm)/1.4 var(--font-body); color: var(--muted); } .prosa figure { margin: var(--s6) 0; } .prosa figure img { width: 100%; height: auto; max-height: 480px; object-fit: contain; object-position: left center; border-radius: var(--radius); } .prosa figcaption { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--muted); } .prosa hr { border: 0; border-top: 1px solid var(--line); margin: var(--s7) 0; } .prosa table { width: 100%; border-collapse: collapse; font-size: 1rem; } .prosa th, .prosa td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); } .prosa .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); } .prosa .video-link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 700; color: var(--red); } /* Abschnitt-Fuß mit Link */ .mehr { margin-top: var(--s6); } /* Formulare (Markup der Anmelde- und Anfrageformulare) */ .form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); } .form-grid > * { grid-column: 1 / -1; } .form-grid > .field--3 { grid-column: span 3; } .form-grid > .field--4 { grid-column: span 4; } .form-grid > .field--6 { grid-column: span 6; } .form-grid > .field--8 { grid-column: span 8; } .form-grid > .field--9 { grid-column: span 9; } .field { display: grid; gap: var(--s2); align-content: start; margin: 0; border: 0; padding: 0; min-width: 0; } .field > label, .feldtitel { font: 700 var(--fs-sm)/1.3 var(--font-head); padding: 0; } .req { color: var(--red); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; font: 400 1.0625rem/1.4 var(--font-body); color: var(--ink); background: var(--white); border: 2px solid var(--rand-feld); border-radius: var(--radius); padding: .8rem .9rem; min-height: 48px; transition: border-color var(--dauer), box-shadow var(--dauer); } .field textarea { min-height: 150px; resize: vertical; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px var(--lilac-200); } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .field [aria-invalid="true"] { border-color: var(--fehler); } .field-hilfe { font-size: var(--fs-sm); color: var(--muted); } .field-error { display: flex; gap: .4rem; align-items: center; font: 700 var(--fs-sm)/1.3 var(--font-body); color: var(--fehler); } .field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fehler); color: var(--white); font-size: .75rem; } .choices { display: flex; flex-wrap: wrap; gap: var(--s2); } .choices--stack { flex-direction: column; align-items: stretch; } .choice { position: relative; cursor: pointer; } .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } .choice > span { display: inline-flex; align-items: center; gap: var(--s3); justify-content: space-between; min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--rand-feld); border-radius: var(--pill); font: 600 var(--fs-sm)/1.25 var(--font-head); background: var(--white); transition: background var(--dauer), border-color var(--dauer), color var(--dauer); } .choices--stack .choice > span { display: flex; border-radius: var(--radius); } .choice .preis { font-weight: 400; font-family: var(--font-body); white-space: nowrap; } .choice-hinweis { display: block; margin-top: .15rem; font: 400 var(--fs-xs)/1.35 var(--font-body); opacity: .8; } .choice input:hover + span { border-color: var(--navy); } .choice input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); } .choice input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; } label.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; font: 400 var(--fs-sm)/1.5 var(--font-body); cursor: pointer; } .check input[type="checkbox"] { appearance: none; width: 24px; height: 24px; margin: 0; border: 2px solid var(--rand-feld); border-radius: var(--radius); background: var(--white); display: grid; place-items: center; cursor: pointer; } .check input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); } .check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--white); border-bottom: 3px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); } .check input[type="checkbox"]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .check a { color: var(--red); } .hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .formschritt { border: 0; margin: 0 0 var(--s6); padding: var(--s6); background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); } .formschritt > legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); font: 800 var(--fs-h3)/1.2 var(--font-head); padding: 0; } .formschritt > legend + * { clear: both; } .formschritt .nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 1rem; flex: none; } .anmeldung { padding-block: var(--s7) var(--s8); } .anmeldung > h2 { font-size: var(--fs-h2); font-weight: 800; margin-bottom: var(--s4); } .anmeldung-intro { color: var(--muted); margin-bottom: var(--s5); } .anmeldung form { margin-top: var(--s5); } /* Meldungen (Formular-Rückmeldungen) */ .alert { display: grid; gap: var(--s2); padding: var(--s5); border-left: 6px solid var(--navy); border-radius: var(--radius); background: var(--lilac-100); margin-bottom: var(--s5); } .alert h3 { font-size: var(--fs-h4); } .alert p, .alert li { font-size: 1rem; } .alert ul { margin: 0; padding-left: 1.2em; } .alert a { color: inherit; font-weight: 700; } .alert--ok { background: var(--erfolg-100); border-color: var(--erfolg); color: #134a30; } .alert--error { background: var(--fehler-100); border-color: var(--fehler); } .alert:focus { outline: 3px solid var(--navy); outline-offset: 3px; } /* Erfolgsmeldung: blendet ein, Kreis und Häkchen zeichnen sich nacheinander */ .alert--ok { animation: meldung-rein .5s var(--ease); } .alert--ok:has(.ok-haken) { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s4); } .alert--ok:has(.ok-haken) > :not(.ok-haken) { grid-column: 2; } .ok-haken { grid-row: 1; align-self: start; width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--erfolg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ok-haken circle { stroke-dasharray: 101; stroke-dashoffset: 101; animation: zeichnen .6s var(--ease) .2s forwards; } .ok-haken path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: zeichnen .35s var(--ease) .7s forwards; } @keyframes meldung-rein { from { opacity: 0; transform: translateY(8px); } } @keyframes zeichnen { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .ok-haken circle, .ok-haken path { stroke-dashoffset: 0; } } /* Absenden läuft: Pfeil weicht einem Ladekreis, weitere Klicks gehen ins Leere */ .btn[aria-busy="true"] { cursor: progress; opacity: .85; } .btn[aria-busy="true"] svg { display: none; } .btn[aria-busy="true"]::after { content: ""; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drehen .7s linear infinite; } @keyframes drehen { to { transform: rotate(360deg); } } /* Anmeldeleiste auf dem Handy (Seminarseite) */ .anmeldeleiste { display: none; } @media (max-width: 640px) { .anmeldeleiste { position: fixed; inset: auto 0 0; z-index: 61; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); font: 700 var(--fs-sm)/1.2 var(--font-head); transform: translateY(110%); transition: transform .3s var(--ease); } .anmeldeleiste.ist-sichtbar { transform: none; } .hat-anmeldeleiste .handyleiste { display: none; } } /* Team */ .person-kopf { display: grid; grid-template-columns: 280px 1fr; gap: var(--s7); align-items: start; } .person-kopf img { width: 100%; height: auto; border-radius: var(--radius); } .kontaktzeilen { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); } .kontaktzeilen a { color: var(--red); font-weight: 700; } /* Fehlerseite */ .fehlerseite { padding-block: var(--s8); } .fehlerseite .code { font: 800 clamp(5rem, 3rem + 8vw, 10rem)/1 var(--font-head); color: var(--lilac-200); } /* Download-Block im Fließtext */ .prosa .downloads { margin: var(--s5) 0; } @media (max-width: 1000px) { .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .eckdaten { position: static; order: -1; } .eckdaten--danach { order: 0; } .person-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .person-kopf img { max-width: 280px; } } @media (max-width: 640px) { .form-grid > [class*="field--"] { grid-column: 1 / -1; } .formschritt { padding: var(--s5) var(--s4); } .karten-raster--2 { grid-template-columns: minmax(0, 1fr); } } @media print { .kopf, .handyleiste, .band, .fuss, .anmeldeleiste, .finder { display: none !important; } body { padding: 0; } } .js [data-ohne-js] { display: none; } .anmeldung > .kicker { margin-bottom: var(--s2); } /* Seitenblättern und Team-Details */ .blaettern { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s7); font: 700 var(--fs-sm)/1 var(--font-head); color: var(--muted); } .kopfzeile > .lead { max-width: 40ch; } .eckdaten > img { width: 100%; height: auto; background: var(--paper); } .stapel { display: grid; gap: var(--s5); align-content: start; } .karte-bild .rlp { width: 100%; height: 100%; padding: 14%; fill: var(--lilac-200); } .person .initialen { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-600); color: var(--white); font: 800 1rem/1 var(--font-head); } .field .btn, .formular .btn { justify-self: start; } .menue-offen .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); } .karte-bild img { height: 100%; } /* Logos und Cover einpassen statt beschneiden */ .karte--cover .karte-bild img, .karte--logo .karte-bild img { object-fit: contain; padding: var(--s4); background: var(--white); } .karte--logo .karte-bild { background: var(--white); border-bottom: 1px solid var(--line); } .chips small { margin-left: .35rem; font-weight: 600; opacity: .7; } /* Terminliste: Monat als Spalte links */ .monat { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 var(--s5); margin-top: 0; border-top: 3px solid var(--navy); } .monat:first-of-type { margin-top: var(--s6); } .monat h2, .monat h3 { border: 0; padding: var(--s5) 0 0; font-size: var(--fs-h4); } .monat h3 small { display: block; font: 600 var(--fs-sm)/1.3 var(--font-head); color: var(--muted); } .monat .liste-termine li:last-child .zeile { border-bottom: 0; } @media (max-width: 700px) { .monat { grid-template-columns: minmax(0, 1fr); } .monat h3 { padding-bottom: var(--s2); } .monat h3 small { display: inline; margin-left: .3rem; } } /* Kontakt */ .kontaktwege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s5); } .kontaktweg { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5); background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); } .kontaktweg h3 { font-size: var(--fs-h3); } .kontaktweg p { color: var(--muted); } .kontaktweg a:not(.btn):not(.tel):not(.pfeil-link) { color: var(--red); font-weight: 700; } .kontaktweg .btn, .kontaktweg .pfeil-link { margin-top: auto; align-self: flex-start; } .kontaktweg--navy { background: var(--navy); color: var(--white); } .kontaktweg--navy .kicker { color: var(--lilac); } .kontaktweg--navy p { color: var(--lilac-200); } .kontaktweg--navy .btn:focus-visible { outline-color: var(--white); } .adresse { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; } /* Platzhalter für Inhalte, die die TBS noch liefert */ .platzhalter { padding: var(--s3) var(--s4); border: 2px dashed var(--lilac); border-radius: var(--radius); background: var(--lilac-100); color: var(--navy-800); font: 600 var(--fs-sm)/1.4 var(--font-body); } /* Startseite: Schnellzugriff auf die Themen direkt unter der Bühne */ .gegen { min-height: min(calc(100svh - 150px), 660px); } .schnellzugriff { background: var(--white); border-bottom: 1px solid var(--line); } .schnellzugriff .wrap { display: flex; align-items: center; gap: var(--s3) var(--s4); padding-block: var(--s4); flex-wrap: wrap; } .schnell-titel { font: 700 var(--fs-sm)/1 var(--font-head); color: var(--muted); } .schnellzugriff ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); } @media (max-width: 640px) { .schnellzugriff ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-inline: calc(-1 * var(--s5)); padding-inline: var(--s5); } .schnellzugriff .wrap { display: block; } .schnell-titel { display: block; margin-bottom: var(--s3); } } /* Wer wir sind */ .wer-wir-sind { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s8); align-items: center; } .fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); } .fakten li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s4); align-items: baseline; padding-bottom: var(--s4); border-bottom: 1px solid var(--line); } .fakten strong { font: 800 1.75rem/1.1 var(--font-head); color: var(--red); } .fakten span { color: var(--muted); } .fakten li:has(.platzhalter) { grid-template-columns: minmax(0, 1fr); } @media (max-width: 900px) { .wer-wir-sind { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } } /* Feststehendes Thema im Anfrageformular */ .thema-fest > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); cursor: pointer; padding: var(--s4); background: var(--white); border: 2px solid var(--rand-feld); border-radius: var(--radius); } .thema-fest > summary::-webkit-details-marker { display: none; } .thema-fest > summary .feldtitel { flex-basis: 100%; } .thema-fest > summary strong { font: 700 1.0625rem/1.3 var(--font-head); } .thema-fest > summary .aendern { margin-left: auto; font: 700 var(--fs-sm)/1 var(--font-head); color: var(--red); text-decoration: underline; } .thema-fest > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .thema-fest[open] > summary { margin-bottom: var(--s4); } .thema-fest[open] > summary .aendern { display: none; } /* Ziffern: Atkinson zeichnet die Null mit Schrägstrich – Daten, Zeiten und Telefon in Montserrat */ .tel, .fuss address, .adresse, .karte-fuss span, .zeile .angaben, .eckdaten dd, .eckdaten-zeit, .blaettern, .termin .meta, .chips small, .fakten strong, .kontaktweg .tel { font-family: var(--font-head); font-variant-numeric: tabular-nums; } .zeile .angaben, .karte-fuss span, .eckdaten dd { font-weight: 500; } span.platzhalter { display: block; } /* ========================================================================= Startseite, Themenseiten, Abschluss: feste Abschnittsfolge, schräge Übergänge, Themen-Symbole und dezente Bewegung ========================================================================= */ /* Themen-Symbole */ .themen-icon { width: 48px; height: 48px; color: var(--navy); flex: none; } .themen-icon .akzent { stroke: var(--red); } .dunkel .themen-icon { color: var(--white); } .dunkel .themen-icon .akzent { stroke: var(--lilac); } /* Einheitlicher Abschnittskopf */ .e-kopf { display: flex; justify-content: space-between; align-items: end; gap: var(--s5) var(--s7); flex-wrap: wrap; margin-bottom: var(--s7); } .e-kopf .lead { max-width: 44ch; } .e-links { display: flex; gap: var(--s5); flex-wrap: wrap; } .e-h3 { font-size: var(--fs-h3); font-weight: 800; } /* Schräge Übergänge zwischen Abschnitten (die TBS-Kante) */ .schraeg { --kante: clamp(28px, 4vw, 64px); position: relative; margin-top: calc(-1 * var(--kante)); padding-top: calc(var(--kante) + var(--s8)); padding-bottom: var(--s8); clip-path: polygon(0 var(--kante), 100% 0, 100% 100%, 0 100%); } .schraeg--links { clip-path: polygon(0 0, 100% var(--kante), 100% 100%, 0 100%); } /* 2 · Aktuell */ .e-aktuell { position: relative; z-index: 1; padding-block: var(--s8) calc(var(--s8) + 40px); background: var(--white); } .e-aktuell-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s5); align-items: stretch; } .e-haupt { background: var(--white); box-shadow: var(--schatten); clip-path: var(--ecke); transition: transform var(--dauer) var(--ease); } .e-haupt:hover { transform: translateY(-4px); } .e-haupt-link { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; } .e-haupt-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lilac-100); } .e-haupt-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .e-haupt:hover .e-haupt-bild img { transform: scale(1.04); } .e-bild-ersatz { height: 100%; display: grid; place-items: center; } .e-bild-ersatz .themen-icon { width: 120px; height: 120px; } .e-bild-ersatz .rlp { width: 40%; fill: var(--lilac-200); } .e-art { position: absolute; left: var(--s4); top: var(--s4); padding: .45rem .8rem; border-radius: var(--pill); background: var(--red); color: var(--white); font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; } .e-haupt-text { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); } .e-haupt-text h3 { font-size: var(--fs-h3); } .e-haupt-text p { color: var(--muted); } .e-haupt-text .pfeil-link { margin-top: auto; } .e-datum { font: 700 var(--fs-sm)/1.3 var(--font-head) !important; color: var(--red) !important; font-variant-numeric: tabular-nums; } .e-neben { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); align-content: start; } .e-eintrag { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--paper); text-decoration: none; border-left: 4px solid transparent; transition: background var(--dauer), border-color var(--dauer); } .e-eintrag:hover { background: var(--lilac-100); border-left-color: var(--red); } .e-eintrag:hover > .icon { transform: translateX(4px); } .e-eintrag > .icon { color: var(--red); transition: transform var(--dauer) var(--ease); } .e-tag { display: grid; place-items: center; align-content: center; width: 64px; height: 64px; background: var(--navy); color: var(--white); font: 600 var(--fs-xs)/1.1 var(--font-head); text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); } .e-tag strong { font-size: 1.5rem; line-height: 1; } .e-tag--beitrag { background: var(--lilac-200); color: var(--navy); } .e-tag--beitrag .icon { width: 26px; height: 26px; } .e-eintrag-text { display: grid; gap: .25rem; } .e-eintrag-text strong { font: 700 1.0625rem/1.3 var(--font-head); } .e-art-klein { font: 700 var(--fs-xs)/1.2 var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* 3 · Themen-Kacheln */ .e-themen { background: var(--paper); z-index: 2; } .e-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); } .e-kachel { position: relative; display: flex; flex-direction: column; gap: var(--s3); height: 100%; min-height: 240px; padding: var(--s6) var(--s5) var(--s5); background: var(--white); text-decoration: none; box-shadow: var(--schatten); clip-path: var(--ecke); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .e-kachel .themen-icon { width: 56px; height: 56px; transition: transform .4s var(--ease), color .3s; } .e-kachel strong { font: 800 1.0625rem/1.25 var(--font-head); } .e-kachel span { font-size: var(--fs-sm); color: var(--muted); transition: color .3s; } .e-kachel > .icon { margin-top: auto; color: var(--red); transition: transform .3s var(--ease), color .3s; } .e-kachel:hover, .e-kachel:focus-visible { background: var(--navy); color: var(--white); transform: translateY(-6px); } .e-kachel:hover .themen-icon, .e-kachel:focus-visible .themen-icon { color: var(--white); transform: rotate(-6deg) scale(1.08); } .e-kachel:hover .themen-icon .akzent, .e-kachel:focus-visible .themen-icon .akzent { stroke: var(--lilac); } .e-kachel:hover span, .e-kachel:focus-visible span { color: var(--lilac-200); } .e-kachel:hover > .icon, .e-kachel:focus-visible > .icon { transform: translateX(6px); color: var(--white); } .e-kachel:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* 4 · Fragen-Karussell */ .e-wer { font-size: var(--fs-sm) !important; } /* 5 · So arbeiten wir + Wer wir sind */ .e-punkt { position: absolute; left: -64px; top: 0; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 3px solid var(--line); font: 800 1.1rem/1 var(--font-head); color: var(--muted); transition: background .3s, border-color .3s, color .3s; } .e-zahlen { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); } .e-zahlen li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s4); align-items: baseline; padding-top: var(--s4); border-top: 1px solid var(--line); } .e-zahlen li:has(.platzhalter) { grid-template-columns: minmax(0, 1fr); } .e-zahlen strong { font: 800 2.4rem/1 var(--font-head); color: var(--red); font-variant-numeric: tabular-nums; } .e-zahlen span { color: var(--muted); } /* 6 · Menschen */ .e-menschen { background: var(--white); z-index: 5; } .e-fotos figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); } .e-fotos figcaption { position: absolute; inset: auto 0 0; padding: var(--s5) var(--s3) var(--s2); background: linear-gradient(transparent, rgba(13, 36, 84, .85)); color: var(--white); font: 700 var(--fs-xs)/1.2 var(--font-head); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease); } .e-fotos figure:hover figcaption { opacity: 1; transform: none; } /* Themenseite: Kopf mit Symbol */ .e-themakopf { background: var(--paper); overflow: hidden; } .e-themakopf-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s7); align-items: center; padding-block: var(--s7); } .e-themakopf h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.02em; } .e-themakopf .lead { margin-top: var(--s4); } .e-personen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); font-size: var(--fs-sm); } .e-personen a { font-weight: 700; color: var(--navy); } .e-personen .gesichter { display: flex; } .e-personen .gesichter img, .e-personen .initialen { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--paper); object-fit: cover; } .e-personen .gesichter > * + * { margin-left: -12px; } .e-personen .initialen { display: grid; place-items: center; background: var(--navy-600); color: var(--white); font: 800 .8rem/1 var(--font-head); } .e-personen .klein { display: block; font: 700 var(--fs-xs)/1.3 var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .e-themakopf-bild { display: grid; justify-items: center; gap: var(--s4); text-align: center; } .e-symbolflaeche { display: grid; place-items: center; width: min(280px, 60vw); aspect-ratio: 1; background: var(--navy); clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); } .e-symbolflaeche .themen-icon { width: 55%; height: 55%; color: var(--white); stroke-width: 1.6; } .e-symbolflaeche .themen-icon .akzent { stroke: var(--lilac); } .e-themakopf-bild .tel { justify-content: center; } /* Sprungnavigation */ .e-sprung { position: sticky; top: 76px; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .e-sprung ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; } .e-sprung a { display: block; padding: var(--s4) 0; white-space: nowrap; text-decoration: none; font: 700 var(--fs-sm)/1 var(--font-head); color: var(--muted); border-bottom: 3px solid transparent; transition: color var(--dauer), border-color var(--dauer); } .e-sprung a:hover { color: var(--navy); } .e-sprung a[aria-current="true"] { color: var(--navy); border-bottom-color: var(--red); } .e-sprung ~ section[id], main > section[id] { scroll-margin-top: 140px; } .e-mitgestalten { padding: var(--s6); background: var(--lilac-100); clip-path: var(--ecke); } .e-mitgestalten h3 { font-size: var(--fs-h4); margin-bottom: var(--s4); } /* Der Weg zur Beratung: vier Karten mit Pfeilen, darunter Hinweise und Rechtsgrundlagen */ .e-weg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); } .e-weg li { position: relative; padding: var(--s5); background: var(--white); border-top: 4px solid var(--red); box-shadow: var(--schatten); } .e-weg li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * var(--s6) / 2 - 6px); width: 12px; height: 12px; border-top: 3px solid var(--navy); border-right: 3px solid var(--navy); transform: translateY(-50%) rotate(45deg); } .e-weg-nr { display: block; margin-bottom: var(--s3); font: 800 2.25rem/1 var(--font-head); color: var(--navy); } .e-weg h3 { font-size: var(--fs-h4); margin-bottom: var(--s2); } .e-weg p { margin: 0; color: var(--muted); font-size: 1rem; } .e-weg-recht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s5); margin-top: var(--s6); } .e-weg-recht h3 { font-size: var(--fs-h4); margin-bottom: var(--s4); } .e-weg-wissen { padding: var(--s6); background: var(--navy); color: var(--lilac-200); clip-path: var(--ecke); } .e-weg-wissen h3 { color: var(--white); } .e-weg-wissen .haken li::before { border-color: var(--lilac-200); } .e-weg-grundlagen { padding: var(--s6); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); } .e-rechtsgrundlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); margin: 0; font-size: var(--fs-sm); } .e-rechtsgrundlagen dt { font-weight: 700; color: var(--navy); } .e-rechtsgrundlagen dd { margin: 0; } @media (max-width: 1000px) { .e-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .e-weg li::after { display: none; } .e-weg-recht { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .e-weg, .e-rechtsgrundlagen { grid-template-columns: minmax(0, 1fr); } } /* Unterstützung als waagerechte Schrittleiste */ .e-hilfe { background: var(--navy); color: var(--white); } .e-hilfe .kicker { color: var(--lilac); } .e-schrittleiste { --fortschritt: 0; position: relative; list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } .e-schrittleiste::before, .e-schrittleiste::after { content: ""; position: absolute; left: 23px; right: 23px; top: 22px; height: 3px; background: var(--navy-600); } .e-schrittleiste::after { background: var(--red); transform-origin: left; transform: scaleX(var(--fortschritt)); transition: transform .2s linear; } .e-schrittleiste li { position: relative; padding-top: 64px; } .e-schrittleiste .e-punkt { left: 0; top: 0; background: var(--navy); border-color: var(--navy-600); color: var(--lilac-200); } .e-schrittleiste h3 { font-size: var(--fs-h4); margin-bottom: var(--s2); } .e-schrittleiste p { color: var(--lilac-200); font-size: 1rem; } /* Fragen als Akkordeon */ .e-fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s7); align-items: start; } .e-akkordeon { border-top: 2px solid var(--navy); } .e-akkordeon details { border-bottom: 1px solid var(--line); } .e-akkordeon summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 32px; gap: var(--s4); align-items: center; padding: var(--s5) 0; font: 700 1.125rem/1.35 var(--font-head); } .e-akkordeon summary::-webkit-details-marker { display: none; } .e-akkordeon summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 1.3rem; transition: transform var(--dauer) var(--ease); } .e-akkordeon details[open] summary::after { transform: rotate(45deg); } .e-akkordeon summary:hover { color: var(--red); } .e-akkordeon summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } .e-akkordeon details > div { padding: 0 var(--s7) var(--s5) 0; color: var(--muted); } .e-akkordeon details[open] > div { animation: aufklappen .35s var(--ease); } /* Weitere Themen */ .e-blaettern { border-top: 1px solid var(--line); background: var(--white); } .e-blaettern .wrap { display: flex; justify-content: space-between; gap: var(--s5); padding-block: var(--s6); } .e-blaettern a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; text-decoration: none; font: 700 1.0625rem/1.3 var(--font-head); max-width: 45%; } .e-blaettern a .klein { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--s2); } .e-blaettern a:hover { color: var(--red); } .e-blaettern .e-weiter { text-align: right; justify-items: end; } /* Seitenübergänge: Kachel → Themenkopf (Browser mit View Transitions) */ @view-transition { navigation: auto; } /* Seitenwechsel kurz halten, damit die Seite nicht träge wirkt; nur das Themensymbol wandert mit */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; } .vt-icon-wirtschaft-und-beschaeftigung { view-transition-name: icon-wirtschaft-und-beschaeftigung; } .vt-icon-transformation { view-transition-name: icon-transformation; } .vt-icon-entgelt-und-leistung { view-transition-name: icon-entgelt-und-leistung; } .vt-icon-arbeitsorganisation { view-transition-name: icon-arbeitsorganisation; } .vt-icon-arbeitszeit { view-transition-name: icon-arbeitszeit; } .vt-icon-ressourceneffizienz { view-transition-name: icon-ressourceneffizienz; } .vt-icon-gremienarbeit { view-transition-name: icon-gremienarbeit; } .vt-icon-it-und-datenschutz { view-transition-name: icon-it-und-datenschutz; } .vt-icon-arbeits-und-gesundheitsschutz { view-transition-name: icon-arbeits-und-gesundheitsschutz; } .vt-icon-qualifizierung { view-transition-name: icon-qualifizierung; } /* Gestaffeltes Einblenden */ .js .e-kacheln .auftauchen:nth-child(4n+2) { transition-delay: .04s; } .js .e-kacheln .auftauchen:nth-child(4n+3) { transition-delay: .08s; } .js .e-kacheln .auftauchen:nth-child(4n+4) { transition-delay: .12s; } .js .e-neben .auftauchen:nth-child(2) { transition-delay: .08s; } .js .e-neben .auftauchen:nth-child(3) { transition-delay: .16s; } .js .e-neben .auftauchen:nth-child(4) { transition-delay: .24s; } @media (max-width: 1000px) { .e-aktuell-raster, .e-fragen-raster, .e-themakopf-raster { grid-template-columns: minmax(0, 1fr); } .e-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .e-schrittleiste { grid-template-columns: 1fr 1fr; } .e-schrittleiste::before, .e-schrittleiste::after { display: none; } .e-sprung { top: 64px; } .e-themakopf-bild { justify-items: start; text-align: left; } .e-symbolflaeche { display: none; } } @media (max-width: 640px) { .e-kacheln { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .e-kachel { min-height: 0; display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4); align-items: center; } .e-kachel .themen-icon { width: 44px; height: 44px; grid-row: span 2; } .e-kachel span { grid-column: 2; } .e-kachel > .icon { grid-column: 3; grid-row: 1 / span 2; margin: 0; } .e-schrittleiste { grid-template-columns: minmax(0, 1fr); } .e-blaettern .wrap { flex-direction: column; } .e-blaettern a { max-width: none; } .e-zahlen li { grid-template-columns: 5.5rem 1fr; } .e-akkordeon details > div { padding-right: 0; } } /* Kopfzeile bleibt beim Seitenwechsel stehen, nur der Inhalt blendet über */ .kopf { view-transition-name: kopf; } .menue-offen .kopf { view-transition-name: none; } ::view-transition-group(kopf) { animation-duration: .15s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Karussell: Karten nur so hoch wie ihr Inhalt, Symbole in Markenfarben auf weißer Karte */ /* ===== Aktuell – gemeinsame Kennung je Art ===== */ .e-kennung { display: inline-flex; align-items: center; gap: .4rem; font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--navy); } .e-kennung::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--navy); } .e-kennung--seminar::before { background: var(--red); } .e-kennung--veranstaltung::before { background: var(--navy-600); } .e-kennung--beitrag::before { background: var(--lilac); } .e-spaltentitel { font: 700 var(--fs-sm)/1 var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding-bottom: var(--s3); margin-bottom: var(--s2); border-bottom: 3px solid var(--navy); } .e-agenda-meta { font: 500 var(--fs-sm)/1.4 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; } /* Aktuell als Kartenband */ .e-aktuell--b { background: var(--lilac-100); } .e-kartenband { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s5); } .e-mehr { display: flex; justify-content: center; margin-top: var(--s7); } .e-bandkarte { display: flex; flex-direction: column; height: 100%; background: var(--white); text-decoration: none; box-shadow: var(--schatten); clip-path: var(--ecke); border-top: 5px solid var(--lilac); transition: transform .3s var(--ease); } .e-bandkarte--seminar { border-top-color: var(--red); } .e-bandkarte--veranstaltung { border-top-color: var(--navy-600); } .e-bandkarte:hover { transform: translateY(-6px); } .e-bandkarte-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); } .e-bandkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .e-bandkarte:hover .e-bandkarte-bild img { transform: scale(1.05); } .e-bandkarte-bild .e-bild-ersatz { display: grid; place-items: center; height: 100%; } .e-bandkarte-bild .themen-icon { width: 72px; height: 72px; } .e-bandkarte-bild .rlp { width: 30%; fill: var(--lilac-200); } .e-bandkarte-bild .e-kennung { position: absolute; left: var(--s3); bottom: var(--s3); padding: .45rem .7rem; background: var(--white); border-radius: var(--pill); } .e-bandkarte-text { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; } .e-bandkarte-text strong { font: 700 1.125rem/1.3 var(--font-head); } .e-bandkarte-text .pfeil-link { margin-top: auto; padding-top: var(--s3); } /* ===== Abschluss im Motiv der Bühne ===== */ .e-abschluss { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--paper); overflow: hidden; } .e-abschluss::before { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(47.6% + 70px); background: var(--navy); clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%); } .e-abschluss-links { position: relative; padding: var(--s8) var(--s8) var(--s8) max(var(--s5), (100vw - var(--wrap)) / 2); align-self: center; } .e-abschluss-links h2 { font: 800 clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem)/1.02 var(--font-head); letter-spacing: -.025em; } .e-abschluss-links p:last-child { margin-top: var(--s4); max-width: 38ch; color: var(--muted); font-size: var(--fs-lead); } .e-abschluss-rechts { position: relative; display: grid; gap: var(--s4); justify-items: start; align-content: center; padding: var(--s8) max(var(--s5), (100vw - var(--wrap)) / 2) var(--s8) clamp(var(--s7), 7vw, 8rem); color: var(--white); } .e-abschluss-tel { display: grid; text-decoration: none; font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.1 var(--font-head); font-variant-numeric: tabular-nums; } .e-abschluss-tel .nummer { white-space: nowrap; } .e-abschluss-tel .klein { font: 700 var(--fs-xs)/1.4 var(--font-head); color: var(--lilac); text-transform: uppercase; letter-spacing: .06em; } .e-abschluss-tel:hover { color: var(--lilac-200); } .e-abschluss-mail a { color: var(--white); font: 600 1.125rem/1.3 var(--font-head); } .e-abschluss-hinweis { font-size: var(--fs-sm); color: var(--lilac-200); } .e-abschluss a:focus-visible { outline-color: var(--white); } @media (max-width: 900px) { .e-abschluss { grid-template-columns: minmax(0, 1fr); } .e-abschluss::before { display: none; } .e-abschluss-links { padding: var(--s7) var(--s5) var(--s8); } .e-abschluss-rechts { background: var(--navy); margin-top: -40px; padding: calc(var(--s7) + 40px) var(--s5) var(--s7); clip-path: polygon(-1px 40px, calc(100% + 1px) 0, calc(100% + 1px) 100%, -1px 100%); } } @media (max-width: 640px) { } .e-bandkarte-text strong, .e-kachel strong { hyphens: auto; overflow-wrap: break-word; } /* Kleine Themen-Symbole in Schlagworten und Filtern */ .tag--symbol, .chip:has(.themen-icon) { display: inline-flex; align-items: center; gap: .35rem; } .tag--symbol .themen-icon { width: 18px; height: 18px; stroke-width: 3; } .chip .themen-icon { width: 20px; height: 20px; stroke-width: 3; } .chip[aria-pressed="true"] .themen-icon { color: var(--white); } .chip[aria-pressed="true"] .themen-icon .akzent { stroke: var(--lilac); } /* Schräge Kanten setzen die Templates gezielt (.schraeg / .schraeg--links): Seitenköpfe enden gerade; Schrägen nur auf den langen Seiten, abwechselnd. */ .abschnitt--trenner > .wrap { padding-top: var(--s7); border-top: 1px solid var(--line); } .abschnitt--trenner { padding-top: 0; } /* Beratung: Unser Anspruch ------------------------------------------- */ .e-anspruch-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(var(--s6), 6vw, var(--s9)); align-items: start; } .e-anspruch .lead { max-width: 52ch; } .e-ziele { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); } .e-ziele li { display: grid; align-content: start; gap: var(--s2); padding-top: var(--s4); border-top: 3px solid var(--red); } .e-ziel-nr { font: 800 .875rem/1 var(--font-head); color: var(--lilac-ink); letter-spacing: .08em; } .e-ziele strong { font: 700 var(--fs-h4)/1.25 var(--font-head); color: var(--navy); } .e-ziele span:last-child { color: var(--muted); } .e-kernaufgaben-mehr { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; } @media (max-width: 900px) { .e-anspruch-raster { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .e-ziele { grid-template-columns: minmax(0, 1fr); } } /* Terminzeilen: Bild, Symbole, Inhouse-Hinweis ----------------------- */ .zeile { grid-template-columns: 72px 240px minmax(0, 1fr) auto auto; padding-inline: var(--s3); margin-inline: calc(-1 * var(--s3)); } @media (max-width: 1200px) { .zeile { grid-template-columns: 64px 180px minmax(0, 1fr); align-items: start; } .zeile .datum, .zeile-bild { grid-row: 1 / span 2; } .zeile > span:nth-child(3) { grid-column: 3; grid-row: 1; } .zeile .plaetze { grid-column: 3; grid-row: 2; justify-self: start; } .zeile > span:empty, .zeile .pfeil { display: none; } } .zeile-bild { display: grid; place-items: center; aspect-ratio: 3 / 2; overflow: hidden; background: var(--lilac-100); clip-path: var(--ecke); } .zeile-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .zeile-bild .themen-icon { width: 44%; height: 44%; } .zeile-bild .rlp { width: auto; height: 62%; fill: var(--lilac-200); } .zeile:hover .zeile-bild img { transform: scale(1.05); } .mit-icon { display: inline-flex; align-items: center; gap: .35rem; } .mit-icon .icon { width: 16px; height: 16px; color: var(--lilac-ink); } .e-hinweisband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); align-items: center; margin-top: var(--s8); padding: var(--s6); background: var(--navy); color: var(--white); clip-path: var(--ecke); } .e-hinweisband h2 { color: var(--white); margin-bottom: var(--s2); } .e-hinweisband p { color: var(--lilac-200); } .e-hinweisband-symbol { display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--lilac); } .e-hinweisband-symbol .icon { width: 32px; height: 32px; color: var(--white); } /* Helle Variante, damit zwei Bänder untereinander nicht gleich aussehen */ .e-hinweisband--hell { margin-top: var(--s5); padding: var(--s5) var(--s6); background: var(--lilac-100); color: var(--navy); clip-path: none; border-left: 6px solid var(--navy); border-radius: var(--radius); } .e-hinweisband--hell h2 { color: var(--navy); } .e-hinweisband--hell p { color: var(--navy-800); } .e-hinweisband--hell .e-hinweisband-symbol { width: 48px; height: 48px; border: 0; } .e-hinweisband--hell .e-hinweisband-symbol .icon { color: var(--navy); } .e-hinweisband--hell .btn--rand:hover { background: var(--navy); color: var(--white); } @media (max-width: 700px) { .zeile { grid-template-columns: 120px minmax(0, 1fr); align-items: start; } .zeile .datum { grid-column: 2; grid-row: 1; font-size: 1.125rem; display: flex; gap: .4rem; align-items: baseline; } .zeile .datum small { margin: 0; } .zeile-bild { grid-column: 1; grid-row: 1 / span 3; } .zeile > span:nth-child(3) { grid-column: 2; grid-row: 2; } .zeile .plaetze { grid-column: 2; grid-row: 3; } .e-hinweisband { grid-template-columns: minmax(0, 1fr); } .e-hinweisband-symbol { display: none; } } @media (prefers-reduced-motion: reduce) { .zeile:hover .zeile-bild img { transform: none; } } /* Startseite: Fragen-Wand – Karten in zwei Größen, rotes Plus zum Aufklappen */ .e-wand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; } .e-wand-spalte { display: grid; gap: var(--s4); } .e-wk { background: var(--white); color: var(--navy); box-shadow: var(--schatten); clip-path: var(--ecke); transition: transform var(--dauer) var(--ease); } .e-wk:hover { transform: translateY(-3px); } /* Karte: oben Thema (Symbol + Titel) mit Knopf, darunter klein die Frage */ .e-wk summary, .e-wk--link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4); padding: var(--s5); } .e-wk summary { cursor: pointer; list-style: none; } .e-wk summary::-webkit-details-marker { display: none; } .e-wk summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; } .e-wk-thema { display: flex; align-items: center; gap: var(--s3); font: 700 clamp(1.05rem, .95rem + .35vw, 1.25rem)/1.25 var(--font-head); color: var(--navy); } .e-wk-thema .themen-icon { flex: none; width: 34px; height: 34px; } .e-wk-thema > span:last-child { min-width: 0; hyphens: manual; } .e-wk q { grid-column: 1 / -1; grid-row: 2; quotes: "„" "“"; font: 400 var(--fs-sm)/1.5 var(--font-body); color: var(--muted); } .e-wk summary q { transition: opacity .3s, transform .3s; } .e-wk summary q.wechselt { opacity: 0; transform: translateY(4px); } /* Punkte zeigen, wie viele Fragen es zum Thema gibt und welche gerade steht */ .e-wk-punkte { grid-column: 1; grid-row: 3; display: flex; margin: -.5rem 0 -.5rem -.25rem; } .e-wk-punkte button { appearance: none; border: 0; background: none; padding: .5rem .25rem; cursor: pointer; } .e-wk-punkte button::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .3s, background .3s; } .e-wk-punkte button:hover::before { background: var(--lilac); } .e-wk-punkte button[aria-current]::before { width: 18px; background: var(--red); } .e-wk-punkte button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 4px; } .e-wk-plus { grid-column: 2; grid-row: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--white); transition: transform .3s var(--ease), background var(--dauer); } .e-wk-plus .icon { width: 16px; height: 16px; } .e-wk summary:hover .e-wk-plus { background: var(--red-700); } .e-wk[open] .e-wk-plus { transform: rotate(45deg); } .e-wk-antwort { padding: 0 var(--s5) var(--s5); font-size: var(--fs-sm); } .e-wk-antwort > p:first-child { padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); } .e-wk-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); } .e-wk[open] .e-wk-antwort { animation: aufklappen .35s var(--ease); } .e-wk--link { text-decoration: none; } .e-wk-ohne { quotes: none; } .e-wk-eigene { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5); border: 2px dashed var(--lilac); } .e-wk-eigene p { font: 700 clamp(1.05rem, .95rem + .35vw, 1.25rem)/1.25 var(--font-head); } /* Schmale Karten: Titel bekommt die ganze Breite, der Knopf rückt neben die Frage */ @media (max-width: 1080px) { .e-wk-thema { grid-column: 1 / -1; } .e-wk q { grid-column: 1; } .e-wk-plus { grid-row: 2; align-self: end; } } @media (max-width: 900px) { .e-wand { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .e-wand-spalte { display: contents; } .e-wk summary, .e-wk--link { padding: var(--s4); } .e-wk-thema { font-size: 1rem; } .e-wk-thema .themen-icon { width: 28px; height: 28px; } .e-wk-antwort { padding: 0 var(--s4) var(--s4); } .e-wand [data-nr="0"] { order: 0; } .e-wand [data-nr="1"] { order: 1; } .e-wand [data-nr="2"] { order: 2; } .e-wand [data-nr="3"] { order: 3; } .e-wand [data-nr="4"] { order: 4; } .e-wand [data-nr="5"] { order: 5; } .e-wand [data-nr="6"] { order: 6; } .e-wand [data-nr="7"] { order: 7; } .e-wand [data-nr="8"] { order: 8; } .e-wand [data-nr="9"] { order: 9; } .e-wand [data-nr="10"] { order: 10; } .e-wand [data-nr="11"] { order: 11; } } @media (prefers-reduced-motion: reduce) { .e-wk, .e-wk-plus { transition: none; } .e-wk:hover { transform: none; } .e-wk[open] .e-wk-antwort { animation: none; } } /* Startseite: Über uns – Kopf und Gesichterreihe (klein, rund, leicht überlappend) */ .e-menschen-kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s7); align-items: end; } .e-gesichter-band { margin-top: var(--s7); } .e-gesichter { list-style: none; margin: 0; padding: 0 0 0 14px; display: flex; flex-wrap: wrap; } .e-gesichter li { width: clamp(52px, 5.1vw, 72px); aspect-ratio: 1; margin-left: -14px; border-radius: 50%; overflow: hidden; border: 3px solid var(--white); background: var(--lilac-100); transition: transform .3s var(--ease); } .e-gesichter li:hover, .e-gesichter li:focus-within { position: relative; z-index: 2; transform: translateY(-4px); } .e-gesichter a { display: block; height: 100%; text-decoration: none; } .e-gesichter a:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; } .e-gesichter img { display: block; width: 100%; height: 100%; object-fit: cover; } .e-gesichter-initialen { display: grid; place-items: center; width: 100%; height: 100%; color: var(--navy); font: 800 1.1rem/1 var(--font-head); } @media (max-width: 640px) { .e-gesichter { padding-left: 10px; } .e-gesichter li { width: 52px; margin-left: -10px; } } @media (max-width: 900px) { .e-menschen-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } } @media (prefers-reduced-motion: reduce) { .e-gesichter li { transition: none; } } @media (max-width: 640px) { .e-zahlen li { grid-template-columns: 5.75rem 1fr; gap: var(--s3); } .e-zahlen strong { font-size: 1.9rem; } } /* Über uns: Team in Gruppen, einheitliche Karten, Profil als Fenster ---------- */ .team-gruppe + .team-gruppe { margin-top: var(--s8); } .team-gruppe-kopf { display: grid; gap: var(--s4); margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); } .team-gruppe-kopf h2 { font-size: var(--fs-h4); } .team-gruppe-kopf h2 small { margin-left: .3rem; font: 600 var(--fs-sm)/1 var(--font-head); color: var(--muted); } .team-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s4); } .team-filter { flex-wrap: wrap; overflow: visible; } .mitglied[hidden] { display: none; } .mitglied-karte { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--s1); width: 100%; height: 100%; padding: 0 0 var(--s4); background: var(--white); cursor: pointer; box-shadow: var(--schatten); clip-path: var(--ecke); transition: transform .3s var(--ease); } .mitglied-karte:hover { transform: translateY(-4px); } .mitglied-karte:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } .mitglied-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lilac-100); margin-bottom: var(--s3); } .mitglied-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .5s var(--ease); } .mitglied-karte:hover .mitglied-bild img { transform: scale(1.04); } .ohne-foto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--lilac-100); font: 800 2.4rem/1 var(--font-head); color: var(--lilac-ink); } .mitglied-karte strong { padding-inline: var(--s4); font: 700 1.0625rem/1.3 var(--font-head); color: var(--navy); } .mitglied-funktion { padding-inline: var(--s4); font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; } .mitglied-themen { display: flex; gap: var(--s2); padding: var(--s2) var(--s4) 0; } .mitglied-themen .themen-icon { width: 24px; height: 24px; } .mitglied-mehr { display: flex; align-items: center; justify-content: space-between; margin: auto var(--s4) 0; padding-top: var(--s3); border-top: 1px solid var(--line); font: 700 var(--fs-sm)/1.2 var(--font-head); color: var(--navy); } .mitglied-mehr .icon { width: 16px; height: 16px; color: var(--red); } .profil { width: min(860px, calc(100vw - 2 * var(--s4))); max-height: calc(100vh - 2 * var(--s5)); margin: auto; padding: 0; border: 0; background: var(--white); color: var(--navy); box-shadow: 0 30px 80px -20px rgba(13, 36, 84, .5); overflow: auto; } .profil:popover-open { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } .profil::backdrop { background: rgba(13, 36, 84, .55); } .profil-bild { background: var(--lilac-100); } .profil-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; } .profil-text { padding: var(--s6) var(--s6) var(--s5); } .profil-text h3 { font-size: var(--fs-h3); margin-bottom: var(--s3); } .profil-text h4 { margin: var(--s5) 0 var(--s3); font-size: 1rem; } .profil-quali { color: var(--muted); } .profil-text .themen-tags { margin-top: var(--s4); } .profil-text .haken { gap: var(--s2); font-size: .9375rem; } .profil-klein { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--muted); } .profil-kontakt { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s4); font-weight: 600; } .profil-zu { position: absolute; top: var(--s3); right: var(--s3); width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--paper); color: var(--navy); cursor: pointer; } .profil-zu .icon { transform: rotate(45deg); } .profil-zu:hover { background: var(--navy); color: var(--white); } .profil-zu:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; } @media (max-width: 700px) { .team-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .mitglied-bild { aspect-ratio: 1; } .mitglied-karte strong, .mitglied-funktion { padding-inline: var(--s3); } .mitglied-themen { padding-inline: var(--s3); } .mitglied-mehr { margin-inline: var(--s3); } .profil:popover-open { grid-template-columns: minmax(0, 1fr); } .profil-bild { max-height: 260px; overflow: hidden; } .profil-text { padding: var(--s5) var(--s4); } } /* Feinschliff nach Design-Durchsicht (2026-10-25) ------------------------- */ /* Handy: Anruf und Anfrage stehen schon in der festen Leiste unten */ @media (max-width: 640px) { .gegen .aktionen, .e-themakopf-bild .tel, .seitenkopf-seite .tel { display: none; } } /* Karten auf weißem Grund klar abgrenzen (Wissen, Publikationen, Projekte) */ .karte { box-shadow: inset 0 0 0 1px var(--line), var(--schatten); } .karte--logo .karte-bild { aspect-ratio: 16 / 9; background: var(--paper); } .karte--logo .karte-bild img { object-fit: contain; padding: var(--s5); } /* Projekt-Übersicht: Zeilen mit einheitlicher Logofläche. #f9f9f9 entspricht dem Hintergrund der Logo-Dateien, so bleibt kein Kasten sichtbar. */ .projekt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); } .projekt-karte { position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ecke); transition: transform var(--dauer) var(--ease); } .projekt-karte:hover { transform: translateY(-3px); } .projekt-logo { display: grid; place-items: center; min-height: 200px; padding: var(--s5); background: #f9f9f9; } .projekt-logo img { width: 210px; max-width: 100%; height: auto; } .projekt-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s6); } .projekt-text h3 { font-size: var(--fs-h3); line-height: 1.25; } .projekt-text h3 a { text-decoration: none; } .projekt-text h3 a::after { content: ""; position: absolute; inset: 0; } .projekt-karte:hover h3 a { color: var(--red); } .projekt-text p { margin: 0; max-width: 62ch; font-size: 1rem; color: var(--muted); } .projekt-text .pfeil-link { margin-top: auto; } .projekt-karte:focus-within { outline: 3px solid var(--red); outline-offset: -3px; } @media (max-width: 720px) { .projekt-karte { grid-template-columns: minmax(0, 1fr); } .projekt-logo { min-height: 150px; } .projekt-logo img { width: 170px; } .projekt-text { padding: var(--s5); } } @media (prefers-reduced-motion: reduce) { .projekt-karte { transition: none; } .projekt-karte:hover { transform: none; } } /* Karten mit abgeschrägter Ecke schneiden einen äußeren Fokusrahmen ab – Rahmen nach innen legen */ .termin:focus-visible, .e-kachel:focus-visible, .e-bandkarte:focus-visible, .mitglied-karte:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; } .karte:has(:focus-visible), .e-haupt:has(:focus-visible) { outline: 3px solid var(--red); outline-offset: -3px; } .download svg { transition: transform var(--dauer) var(--ease); } .download:hover svg { transform: translateX(4px); } /* Nachgeladene Bilder blenden weich ein statt hart aufzuspringen */ img.laedt { opacity: 0; } img.geladen { animation: bild-rein .4s var(--ease); } @keyframes bild-rein { from { opacity: 0; } } .karten-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .karten-raster--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } } /* Nummern überall im gleichen Stil wie die Schrittleisten (Kreis mit Rand) */ .schritte li::before { background: var(--white); border: 3px solid var(--line); color: var(--navy); } /* Themenseite: bei ein bis zwei Fragen kompakter Kopf statt großer Überschrift daneben */ .e-fragen-raster--kompakt { grid-template-columns: minmax(0, 860px); gap: var(--s4); } /* Handy: Pfeil-Links mit ausreichend großer Tippfläche */ @media (max-width: 640px) { .pfeil-link { display: inline-flex; align-items: center; min-height: 44px; } } /* Beratung: Themen auf Weiß, damit nicht zwei graue Flächen aufeinander folgen */ .e-themen--weiss { background: var(--white); } .e-anspruch--weiss { background: var(--white); } .abschnitt--papier .e-mitgestalten { background: var(--white); } .e-themen--weiss .e-kachel { box-shadow: inset 0 0 0 1px var(--line), var(--schatten); } /* Über uns: Team direkt unter dem grauen Kopf auf Weiß, Karten mit feinem Rand */ .abschnitt--team { padding-top: var(--s7); } .abschnitt--team .mitglied-karte { box-shadow: inset 0 0 0 1px var(--line), var(--schatten); }