@font-face { font-family: "Geist"; src: url(/gemeinsam/schriften/Geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url(/gemeinsam/schriften/GeistMono-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } /* ═══ Designsystem „Werkstatt“ – German Legal Tech Hub ═══ Hub-Fassung des Summit-Tragwerks: Geist und Geist Mono, 12er-Raster, eckig, 2-px-Linien mit orangefarbenem Knoten. Hell zuerst, Dunkel gleichwertig, Automatik folgt dem System. Nur Orange als Akzent, kein Türkis (Summit). Dokumentation: /system/ und Relaunch-Website/06-Designsystem.md */ @property --grund { syntax: ""; inherits: true; initial-value: #ffffff; } @property --flaeche { syntax: ""; inherits: true; initial-value: #f3f4f5; } @property --linie { syntax: ""; inherits: true; initial-value: #e1e4e7; } @property --linie-stark { syntax: ""; inherits: true; initial-value: #14171a; } @property --marke { syntax: ""; inherits: true; initial-value: #ea640b; } @property --tinte { syntax: ""; inherits: true; initial-value: #14171a; } :root { --schrift: "Geist", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --t-1: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); --t-2: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); --t-3: clamp(1.3rem, 1.05rem + .9vw, 1.85rem); --t-gross: clamp(1.08rem, 1rem + .35vw, 1.28rem); --breite: 1440px; --rand: clamp(1rem, .2rem + 3.2vw, 3.5rem); --spalt: clamp(1rem, .55rem + 1.4vw, 2rem); --abschnitt: clamp(3.5rem, 2.2rem + 4.4vw, 6.5rem); --kurve: cubic-bezier(.2, .7, .1, 1); --nacht: #0d1013; --nacht-2: #171b1f; --nacht-tinte: #f2f4f6; --nacht-leise: #a7b0b8; --nacht-linie: rgb(255 255 255 / .16); --logo-flaeche: #ffffff; } :root, :root[data-theme="hell"] { color-scheme: light; --grund: #ffffff; --flaeche: #f3f4f5; --linie: #e1e4e7; --linie-stark: #14171a; --tinte: #14171a; --tinte-2: #3b434b; --leise: #5b6570; --feld: #858f98; --marke: #ea640b; --marke-text: #b84a06; --auf-marke: #14171a; --gruen: #1f7a45; } :root[data-theme="dunkel"] { color-scheme: dark; --grund: #0d1013; --flaeche: #161a1e; --linie: #262c32; --linie-stark: #f2f4f6; --tinte: #f2f4f6; --tinte-2: #c3cad0; --leise: #98a2ab; --feld: #6b757e; --marke: #f07a2e; --marke-text: #f5873d; --auf-marke: #0d1013; --gruen: #5fc58a; --logo-flaeche: #eef0f2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { color-scheme: dark; --grund: #0d1013; --flaeche: #161a1e; --linie: #262c32; --linie-stark: #f2f4f6; --tinte: #f2f4f6; --tinte-2: #c3cad0; --leise: #98a2ab; --feld: #6b757e; --marke: #f07a2e; --marke-text: #f5873d; --auf-marke: #0d1013; --gruen: #5fc58a; --logo-flaeche: #eef0f2; } } :root.theme-wechsel { --tinte-2: var(--tinte); --leise: var(--tinte); --marke-text: var(--tinte); transition: --grund 2.4s ease-in-out, --flaeche 2.4s ease-in-out, --linie 2.4s ease-in-out, --linie-stark 2.4s ease-in-out, --marke 2.4s ease-in-out, --tinte 1ms steps(1, end) 1.2s !important; } :root.theme-wechsel * { transition: none !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; } body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1rem/1.55 var(--schrift); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; } .huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); } .mono { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 400; } .leise { color: var(--leise); } .nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sprungmarke { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--tinte); color: var(--grund); padding: .6rem 1rem; } .sprungmarke:focus { top: 1rem; } .etikett { display: inline-block; font: 500 .68rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; padding: .25rem .4rem; border: 1px solid currentColor; color: var(--leise); vertical-align: .15em; margin-left: .3rem; } .quelle { color: var(--leise); margin: 1rem 0 0; } /* Knöpfe */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.25rem; border: 1px solid transparent; font: 600 .95rem/1 var(--schrift); text-decoration: none; cursor: pointer; transition: background .16s, color .16s, border-color .16s; white-space: nowrap; } .knopf-haupt { background: var(--marke); color: var(--auf-marke); } .knopf-haupt:hover { background: var(--tinte); color: var(--grund); } .knopf-neben { border-color: var(--linie-stark); color: var(--tinte); } .knopf-neben:hover { background: var(--tinte); color: var(--grund); } .knopf-glas { color: #fff; border-color: rgb(255 255 255 / .7); background: rgb(13 16 19 / .25); backdrop-filter: blur(6px); } .knopf-glas:hover { background: #fff; color: #0d1013; } .pfeil { display: inline-block; transition: transform .28s var(--kurve); } a:hover .pfeil { transform: translateX(4px); } .handlungen { display: flex; flex-wrap: wrap; gap: .75rem; } /* Kopf */ .entwurfsband { background: var(--flaeche); border-bottom: 1px solid var(--linie); font-size: .82rem; } .entwurfsband .huelle { display: flex; justify-content: space-between; gap: 1rem; padding-top: .45rem; padding-bottom: .45rem; } .kopf { position: sticky; top: 0; z-index: 30; background: var(--grund); border-bottom: 1px solid var(--linie); } /* deckend (06.11.2026: „transparent, das funktioniert so nicht“) */ .kopf .huelle { display: flex; align-items: center; gap: 2rem; height: 68px; } .wortmarke { display: block; width: 146px; color: var(--tinte); flex: none; } .logo-maske { display: block; aspect-ratio: 800 / 181; background: currentColor; -webkit-mask: url(/gemeinsam/logo-hub.png) center / contain no-repeat; mask: url(/gemeinsam/logo-hub.png) center / contain no-repeat; } .nav { display: flex; gap: 1.5rem; margin-right: auto; } .werkzeuge { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .darstellung { display: inline-flex; border: 1px solid var(--linie); border-radius: 100px; padding: 2px; } .darstellung button { all: unset; cursor: pointer; width: 30px; height: 26px; display: grid; place-items: center; border-radius: 100px; color: var(--leise); } .darstellung button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); } .darstellung button:focus-visible { outline: 2px solid var(--marke-text); } .darstellung svg { width: 15px; height: 15px; } .textlink { font-size: .9rem; font-weight: 500; text-decoration: none; } .menueknopf { all: unset; display: none; cursor: pointer; width: 44px; height: 44px; place-items: center; } .menueknopf.sichtbar { display: grid; } @media (max-width: 1100px) { .nav, .werkzeuge .textlink, .werkzeuge > .darstellung { display: none; } .menueknopf { display: grid; } } @media (max-width: 520px) { .kopf .knopf { min-height: 40px; padding: 0 .85rem; font-size: .86rem; } .wortmarke { width: 120px; } .entwurfsband .huelle { flex-direction: column; gap: .2rem; } } dialog#menue { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--grund); color: var(--tinte); } dialog#menue::backdrop { background: transparent; } .menue-kopf { display: flex; justify-content: space-between; align-items: center; height: 68px; padding: 0 var(--rand); border-bottom: 1px solid var(--linie); } .menue-liste { list-style: none; margin: 0; padding: .5rem var(--rand); } .menue-liste a { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--linie); font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; text-decoration: none; } .menue-fuss { padding: 1rem var(--rand); display: grid; gap: .75rem; } .menue-fuss .darstellung { justify-self: start; } /* Abschnittsköpfe: 2-px-Linie mit orangefarbenem Knoten */ section.abschnitt { padding: var(--abschnitt) 0 0; } .register { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; padding-top: 1.1rem; border-top: 2px solid var(--linie-stark); margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); } .register::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--marke); } .register h2 { margin: 0; font-size: var(--t-2); line-height: 1.02; letter-spacing: -.035em; font-weight: 620; } .register h2 .mono, .register-zeile .mono { display: block; margin-bottom: .75rem; color: var(--leise); letter-spacing: .06em; } .register-zeile { position: relative; margin: 0; padding-top: 1.1rem; border-top: 2px solid var(--linie-stark); } .register-zeile::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--marke); } p.gross { font-size: var(--t-gross); color: var(--tinte-2); margin: 0 0 1.5rem; } /* ── Terminkarte (Startseite, Kalender, Eventdetail) ── */ .termine .register .knopf { margin-left: auto; } .termin-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spalt); } .termin a { display: flex; flex-direction: column; height: 100%; text-decoration: none; border-top: 2px solid var(--linie-stark); } .termin figure { margin: 0; aspect-ratio: 2 / 1; background: var(--flaeche); overflow: hidden; } .termin figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--kurve); } .termin a:hover figure img { transform: scale(1.03); } .termin .ohne-bild { display: grid; place-items: center; color: var(--leise); } .termin-text { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0 .75rem; } .termin-datum { margin: 0; text-align: center; min-width: 3.2rem; padding-right: 1rem; border-right: 1px solid var(--linie); } .termin-datum b { display: block; font-size: 2rem; line-height: 1; letter-spacing: -.04em; font-weight: 620; } .termin-datum span { font: .72rem/1.6 var(--mono); text-transform: uppercase; color: var(--leise); } .termin h3 { margin: .3rem 0 .35rem; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.015em; } .termin .mono { color: var(--leise); } .termin-nutzen { margin: 0 0 .35rem; font-size: .92rem; color: var(--tinte-2); } .termin-ort { margin: 0; font-size: .9rem; color: var(--leise); } .termin-fuss { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 0 .2rem; border-top: 1px solid var(--linie); } .termin-knopf { font-weight: 600; white-space: nowrap; } .status { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--leise); flex: none; } .status.frei { color: var(--gruen); } .status.frei::before { background: var(--gruen); } .status.voll::before { background: var(--marke); } .status.anfrage::before { background: var(--tinte); } .platzhalter { min-height: 330px; background: linear-gradient(90deg, var(--flaeche), var(--linie), var(--flaeche)); background-size: 200% 100%; animation: glanz 1.6s linear infinite; } @keyframes glanz { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .platzhalter { animation: none; } } .leer { grid-column: 1 / -1; padding: 2rem; background: var(--flaeche); } @media (max-width: 1100px) { .termin-raster { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .termin-raster { grid-template-columns: minmax(0, 1fr); } } /* ── Auswahlregister „Ich bin …“ und Pakettafel ── */ .wahl { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--linie-stark); } .wahl [role="tab"] { all: unset; cursor: pointer; flex: 1 1 auto; text-align: center; padding: 1rem 1.1rem; font-weight: 550; border-right: 1px solid var(--linie-stark); transition: background .2s, color .2s; } .wahl [role="tab"]:last-child { border-right: 0; } .wahl [role="tab"][aria-selected="true"] { background: var(--tinte); color: var(--grund); } .wahl [role="tab"]:focus-visible { outline: 2px solid var(--marke-text); outline-offset: -4px; } .paket[hidden] { display: none !important; } .paket { display: grid; grid-template-columns: 1fr auto; gap: var(--spalt); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border: 1px solid var(--linie-stark); border-top: 0; background: var(--flaeche); } .paket h3 { margin: .5rem 0 1.25rem; font-size: var(--t-3); letter-spacing: -.025em; line-height: 1.15; max-width: 26ch; } .paket .mono { color: var(--marke-text); margin: 0; } .paket ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; } .paket li { padding-left: 1.1rem; position: relative; } .paket li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--marke); } .paket-preis { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .25rem; padding-left: var(--spalt); border-left: 1px solid var(--linie); min-width: 15rem; } .paket-preis .ab { color: var(--leise); font-size: .9rem; } .paket-preis strong { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); letter-spacing: -.045em; line-height: 1; } .paket-preis > span:not(.ab) { color: var(--leise); font-size: .88rem; margin-bottom: 1rem; } .hinweis { margin: 1rem 0 0; font-size: .88rem; color: var(--leise); } @media (max-width: 820px) { .wahl [role="tab"] { flex: 1 1 45%; border-bottom: 1px solid var(--linie-stark); } .paket { grid-template-columns: minmax(0, 1fr); } .paket ul { grid-template-columns: minmax(0, 1fr); } .paket-preis { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: 1.25rem; } } /* ── Abschlussband ── */ .abschluss { background: var(--marke); color: var(--auf-marke); padding: clamp(3rem, 2rem + 3vw, 5rem) 0; } .abschluss .huelle { display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; align-items: end; } .abschluss h2 { margin: 0; font-size: var(--t-2); letter-spacing: -.035em; line-height: 1; font-weight: 650; grid-column: 1; } .abschluss p { margin: 0; grid-column: 1; max-width: 40rem; font-size: var(--t-gross); } .abschluss .handlungen { grid-column: 2; grid-row: 1 / span 2; } .knopf-dunkel { background: var(--auf-marke); color: var(--marke); } .knopf-dunkel:hover { background: var(--grund); color: var(--tinte); } .knopf-rand { border-color: var(--auf-marke); color: var(--auf-marke); } .knopf-rand:hover { background: var(--auf-marke); color: var(--marke); } @media (max-width: 820px) { .abschluss .huelle { grid-template-columns: minmax(0, 1fr); } .abschluss .handlungen { grid-column: 1; grid-row: auto; } } /* Fuß */ .fuss { padding: var(--abschnitt) 0 1.5rem; } .fuss-raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--spalt); } .fuss h3 { margin: 0 0 1rem; color: var(--leise); } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .fuss a { text-decoration: none; color: var(--tinte-2); } .fuss a:hover { color: var(--tinte); text-decoration: underline; } .fuss .wortmarke { margin-bottom: 1.25rem; } .feld { display: flex; border: 1px solid var(--feld); margin-top: .75rem; max-width: 26rem; } .feld input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 1rem; height: 48px; font: inherit; color: var(--tinte); } .feld input:focus-visible { outline: none; } .feld:focus-within { outline: 2px solid var(--marke-text); outline-offset: 2px; } .foerderung { display: flex; gap: 1rem; align-items: center; margin-top: 2.5rem; font-size: .85rem; color: var(--leise); } .unterzeile { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--leise); } @media (max-width: 1100px) { .fuss-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fuss-raster > :first-child { grid-column: 1 / -1; } } @media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-raster > :first-child { grid-column: 1 / -1; } } /* Auftritte */ .js .auftritt { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--kurve), transform .9s var(--kurve); } .js .auftritt.sichtbar { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .auftritt { opacity: 1; transform: none; transition: none; } } /* ═══ Ergänzende Bausteine für die Ansichten ═══════════════════════════════════════════════ */ /* Rückmeldefarben: Erfolg grün, Fehler rot, Hinweis neutral (je Schema geprüft, ≥ 4,5 : 1) */ :root, :root[data-theme="hell"] { --rot: #b42318; --rot-flaeche: #fdecea; --gruen-flaeche: #e8f5ed; --hinweis-flaeche: #f3f4f5; } :root[data-theme="dunkel"] { --rot: #ff8a7a; --rot-flaeche: #3a1714; --gruen-flaeche: #12301f; --hinweis-flaeche: #161a1e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --rot: #ff8a7a; --rot-flaeche: #3a1714; --gruen-flaeche: #12301f; --hinweis-flaeche: #161a1e; } } /* Knopf-Varianten */ .knopf-klein { min-height: 40px; padding: 0 1rem; font-size: .88rem; } .knopf-breit { width: 100%; } .knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } .textknopf { all: unset; cursor: pointer; font-weight: 600; color: var(--marke-text); text-decoration: underline; text-underline-offset: .2em; } .textknopf:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; } /* Seitenkopf und Brotkrumen */ .seitenkopf { padding: clamp(2rem, 1.2rem + 3vw, 4rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); border-bottom: 1px solid var(--linie); } .seitenkopf h1 { margin: .9rem 0 1rem; font-size: var(--t-1); line-height: 1; letter-spacing: -.04em; font-weight: 650; max-width: 22ch; } .seitenkopf .einleitung { margin: 0; font-size: var(--t-gross); color: var(--tinte-2); max-width: 46rem; } .brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font: .76rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); } .brotkrumen li + li::before { content: "/"; margin-right: .4rem; color: var(--linie-stark); opacity: .4; } .brotkrumen a { text-decoration: none; } .brotkrumen a:hover { color: var(--tinte); text-decoration: underline; } .brotkrumen [aria-current] { color: var(--tinte); } /* Filter, Umschalter */ .filterleiste { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: end; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); } .filtergruppe { display: grid; gap: .4rem; } .filtergruppe > span, .filtergruppe > label { font: .72rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); } .pillen { display: flex; flex-wrap: wrap; gap: .4rem; } .pille { all: unset; cursor: pointer; padding: .45rem .85rem; border: 1px solid var(--linie); border-radius: 100px; font-size: .88rem; font-weight: 500; transition: background .16s, color .16s, border-color .16s; } .pille:hover { border-color: var(--linie-stark); } .pille[aria-pressed="true"] { background: var(--tinte); color: var(--grund); border-color: var(--tinte); } .pille:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .segment { display: inline-flex; border: 1px solid var(--linie-stark); } .segment button { all: unset; cursor: pointer; padding: .55rem 1rem; font-size: .9rem; font-weight: 550; } .segment button + button { border-left: 1px solid var(--linie-stark); } .segment button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); } .segment button:focus-visible { outline: 2px solid var(--marke-text); outline-offset: -3px; } /* Formulare */ .formular { display: grid; gap: 1.25rem; } .formular-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } .formular-raster .ganz { grid-column: 1 / -1; } @media (max-width: 640px) { .formular-raster { grid-template-columns: minmax(0, 1fr); } } .feld-gruppe { display: grid; gap: .4rem; } .feld-gruppe > label, .feld-gruppe > .feldname, fieldset > legend { font-weight: 600; font-size: .95rem; } .pflicht { color: var(--marke-text); margin-left: .15rem; } .hilfe { font-size: .85rem; color: var(--leise); margin: 0; } .eingabe { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--feld); border-radius: 0; background: var(--grund); color: var(--tinte); font: inherit; transition: border-color .16s, box-shadow .16s; } textarea.eingabe { min-height: 120px; resize: vertical; } select.eingabe { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; } .eingabe:hover { border-color: var(--tinte-2); } .eingabe:focus-visible { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 2px var(--marke-text); } .eingabe::placeholder { color: var(--leise); opacity: 1; } .feld-gruppe.fehlerhaft .eingabe { border-color: var(--rot); box-shadow: inset 3px 0 0 var(--rot); } .fehlertext { display: none; align-items: flex-start; gap: .45rem; margin: 0; font-size: .88rem; font-weight: 500; color: var(--rot); } .fehlertext::before { content: "!"; flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; background: var(--rot); color: var(--grund); font: 700 .75rem/1 var(--schrift); margin-top: .1rem; } .feld-gruppe.fehlerhaft .fehlertext { display: flex; } fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: .6rem; } .wahlfeld { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; padding: .9rem 1rem; border: 1px solid var(--linie); cursor: pointer; transition: border-color .16s, background .16s; } .wahlfeld:hover { border-color: var(--tinte-2); } .wahlfeld input { appearance: none; margin: .15rem 0 0; width: 20px; height: 20px; border: 1.5px solid var(--feld); background: var(--grund); display: grid; place-items: center; cursor: pointer; } .wahlfeld input[type="radio"] { border-radius: 50%; } .wahlfeld input:checked { border-color: var(--tinte); background: var(--tinte); } .wahlfeld input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 5px; border: 2px solid var(--grund); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .wahlfeld input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grund); } .wahlfeld input:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .wahlfeld:has(input:checked) { border-color: var(--tinte); background: var(--flaeche); } .wahlfeld .wahl-text { display: grid; gap: .15rem; } .wahlfeld strong { font-size: .98rem; } .wahlfeld small { color: var(--leise); font-size: .86rem; } .wahlfeld.einfach { border: 0; padding: .2rem 0; background: none !important; } .datei { display: grid; gap: .5rem; padding: 1.1rem; border: 1px dashed var(--feld); text-align: left; } .datei input { font: inherit; color: var(--tinte-2); } /* Meldungen: Erfolg grün, Fehler rot */ .meldung { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; padding: 1rem 1.15rem; border-left: 4px solid var(--leise); background: var(--hinweis-flaeche); } .meldung::before { content: "i"; grid-row: span 2; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--tinte); color: var(--grund); font: 700 .85rem/1 var(--schrift); } .meldung strong { font-size: 1rem; } .meldung p { margin: 0; color: var(--tinte-2); } .meldung.erfolg { border-color: var(--gruen); background: var(--gruen-flaeche); } .meldung.erfolg::before { content: "✓"; background: var(--gruen); color: var(--grund); } .meldung.fehler { border-color: var(--rot); background: var(--rot-flaeche); } .meldung.fehler::before { content: "!"; background: var(--rot); color: var(--grund); } .meldung.fehler strong { color: var(--rot); } .meldung.erfolg strong { color: var(--gruen); } .meldung a { color: inherit; font-weight: 600; } /* Schrittleiste */ .schrittleiste { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(var(--schritte, 4), minmax(0, 1fr)); gap: .4rem; counter-reset: s; } .schrittleiste li { counter-increment: s; padding-top: .7rem; border-top: 3px solid var(--linie); font-size: .88rem; color: var(--leise); } .schrittleiste li::before { content: counter(s, decimal-leading-zero) " "; font: .74rem/1 var(--mono); } .schrittleiste li.erledigt { border-color: var(--tinte); color: var(--tinte-2); } .schrittleiste li[aria-current="step"] { border-color: var(--marke); color: var(--tinte); font-weight: 600; } @media (max-width: 560px) { .schrittleiste li span { display: none; } .schrittleiste li[aria-current="step"] span { display: inline; } } /* Karte und Kennzeile */ .karte { background: var(--flaeche); padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); } .karte > h2, .karte > h3 { margin: 0 0 .75rem; font-size: 1.2rem; letter-spacing: -.015em; } .karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .75rem; } .karte-kopf h2, .karte-kopf h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.015em; } .kennliste { margin: 0; display: grid; gap: 0; } .kennliste > div { display: grid; grid-template-columns: minmax(7rem, 35%) 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); } .kennliste dt { color: var(--leise); font-size: .9rem; } .kennliste dd { margin: 0; } /* Tabelle (auf schmalen Geräten als Liste) */ .tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; } .tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--linie); } .tabelle thead th { font: .72rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); border-bottom: 2px solid var(--linie-stark); } .tabelle tbody th { font-weight: 600; } .ja::before { content: "✓"; color: var(--gruen); font-weight: 700; margin-right: .35rem; } .nein { color: var(--leise); } @media (max-width: 760px) { .tabelle.stapelbar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tabelle.stapelbar tr { display: grid; padding: .75rem 0; border-bottom: 1px solid var(--linie); } .tabelle.stapelbar th, .tabelle.stapelbar td { border: 0; padding: .2rem 0; } .tabelle.stapelbar td[data-spalte]::before { content: attr(data-spalte) ": "; color: var(--leise); } } /* Artikeltypografie */ .prosa { font-size: 1.1rem; line-height: 1.7; color: var(--tinte); max-width: 68ch; } .prosa > * + * { margin-top: 1.1em; } .prosa p { margin-bottom: 0; } .prosa > :first-child { margin-top: 0; } .prosa h2 { margin: 2.2em 0 0; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); line-height: 1.2; letter-spacing: -.02em; } .prosa h3 { margin: 1.8em 0 0; font-size: 1.25rem; letter-spacing: -.015em; } .prosa .frage { font-weight: 650; letter-spacing: -.01em; padding-left: 1rem; border-left: 3px solid var(--marke); } .prosa blockquote { margin: 2em 0; padding: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 550; } .prosa blockquote::before { content: ""; display: block; width: 10px; height: 10px; background: var(--marke); margin-bottom: .8rem; } .prosa ul, .prosa ol { padding-left: 1.2em; } .prosa li + li { margin-top: .4em; } .prosa a { color: var(--marke-text); text-underline-offset: .2em; } .prosa figure { margin: 2em 0; } .prosa figcaption { font-size: .86rem; color: var(--leise); margin-top: .5rem; } /* Bereichsnavigation (Mein Hub) */ .bereichsnav { display: grid; gap: .15rem; align-content: start; } .bereichsnav a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem .85rem; text-decoration: none; font-weight: 500; color: var(--tinte-2); border-left: 3px solid transparent; } .bereichsnav a:hover { background: var(--flaeche); color: var(--tinte); } .bereichsnav a[aria-current="page"] { border-color: var(--marke); background: var(--flaeche); color: var(--tinte); font-weight: 600; } .zaehler { min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; padding: 0 .35rem; background: var(--marke); color: var(--auf-marke); font: 600 .72rem/1 var(--mono); } /* Fortschrittsbalken (Leistungen) */ .balken { height: 6px; background: var(--linie); } .balken i { display: block; height: 100%; background: var(--marke); } /* ═══ Abschnitts-Bausteine (aus der Startseite, für alle Seiten) ═══ */ .belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; border-top: 1px solid var(--linie); } .belege div { padding: 1rem 1rem 0 0; } .belege div + div { padding-left: 1rem; border-left: 1px solid var(--linie); } .belege dt { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 620; letter-spacing: -.04em; line-height: 1; } .belege dd { margin: .35rem 0 0; color: var(--leise); font-size: .92rem; overflow-wrap: break-word; } .leistungen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); } .leistungen a { display: grid; grid-template-columns: 2.2rem 1fr; gap: .1rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: padding .3s var(--kurve), background .3s; } .leistungen a:hover { padding-left: .75rem; background: var(--flaeche); } .l-nr { grid-row: span 2; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--marke); color: var(--auf-marke); font: 600 .85rem/1 var(--mono); } .leistungen strong { font-size: 1.2rem; letter-spacing: -.015em; } .leistungen span:not(.l-nr) { color: var(--leise); } @media (max-width: 520px) { .belege { grid-template-columns: minmax(0, 1fr); } .belege div, .belege div + div { display: flex; align-items: baseline; gap: 1rem; padding: .7rem 0; border-left: 0; border-bottom: 1px solid var(--linie); } .belege dt { font-size: 1.8rem; min-width: 3.2rem; } .belege dd { margin: 0; } } @media (max-width: 380px) { .kopf .werkzeuge > .knopf { display: none; } } /* ── 3 · Vorteile: unterschiedliche Größen, zwei Bildkacheln, eine Akzentfläche ── */ .vorteil-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spalt); } .vorteil { grid-column: span 4; display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.75rem; background: var(--flaeche); border-top: 2px solid var(--linie-stark); } .vorteil h3 { margin: 0 0 .5rem; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.02em; } .vorteil p { margin: 0; color: var(--tinte-2); } .vorteil .fall { margin-top: auto; padding-top: 1.25rem; font-size: .93rem; color: var(--tinte); } .vorteil .fall .mono { display: block; color: var(--marke-text); margin-bottom: .3rem; } .v-bild { position: relative; padding: 0; background: var(--nacht); color: #fff; border-top: 0; overflow: hidden; min-height: 420px; } .v-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .v-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(13 16 19 / .92) 0%, rgb(13 16 19 / .6) 45%, rgb(13 16 19 / 0) 75%); } .v-bild > div { position: relative; z-index: 1; margin-top: auto; padding: 1.75rem; } .v-bild h3 { font-size: var(--t-3); } .v-bild p { color: rgb(255 255 255 / .88); } .v-bild .fall { color: #fff; } .v-bild .fall .mono { color: #f5873d; } .v-gross { grid-column: span 8; grid-row: span 2; min-height: 560px; } .v-breit { grid-column: span 8; } .v-band { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 4fr 4fr; gap: var(--spalt); align-items: start; } .v-band .fall { margin-top: 0; padding-top: 0; } @media (max-width: 1000px) { .v-band { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .v-band .fall { padding-top: .75rem; } } .v-akzent { background: var(--marke); color: var(--auf-marke); border-top-color: var(--auf-marke); } .v-akzent p, .v-akzent .fall { color: var(--auf-marke); } .v-akzent .fall .mono { color: var(--auf-marke); opacity: .75; } @media (max-width: 1000px) { .vorteil, .v-gross, .v-breit { grid-column: span 6; } .v-gross { grid-row: auto; min-height: 460px; } } @media (max-width: 640px) { .vorteil, .v-gross, .v-breit { grid-column: 1 / -1; } .v-bild { min-height: 380px; } } /* ── 4 · Formate: Entdeckungsstrecke ── */ .formate .register { align-items: end; } .schiene-pfeile { display: flex; gap: .25rem; } .schiene-pfeile button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--linie-stark); } .schiene-pfeile button:hover { background: var(--tinte); color: var(--grund); } .schiene-pfeile button:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .schiene-pfeile svg { width: 18px; height: 18px; } .schiene { list-style: none; margin: 0; padding: 0 max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))) .5rem; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 420px); gap: var(--spalt); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); scrollbar-width: thin; } .schiene:focus-visible { outline: 2px solid var(--marke-text); outline-offset: -2px; } .format { scroll-snap-align: start; } .format a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--flaeche); } .format img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .8s var(--kurve); } .format a:hover img { transform: scale(1.03); } .format a { overflow: hidden; } .format-text { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.25rem 1.4rem; position: relative; background: var(--flaeche); } .format h3 { margin: 0 0 .9rem; font-size: 1.45rem; letter-spacing: -.02em; } .format dl { margin: 0 0 1.25rem; display: grid; gap: .6rem; } .format dt { font: .7rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); } .format dd { margin: .1rem 0 0; font-size: .93rem; } .format-link { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linie); font-weight: 600; color: var(--marke-text); } /* ── 6 · Mein Hub ── */ .mein-hub-raster { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: center; } .mein-text h2 { margin: .75rem 0 1rem; font-size: var(--t-2); letter-spacing: -.035em; line-height: 1.02; font-weight: 620; } .haken { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .1rem; } .haken li { padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--linie); position: relative; color: var(--tinte-2); } .haken li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 9px; height: 9px; background: var(--marke); } .haken strong { color: var(--tinte); } .geraet { border: 1px solid var(--linie); background: var(--nacht); color: var(--nacht-tinte); padding: 1.25rem; display: grid; gap: .75rem; box-shadow: 0 40px 80px -40px rgb(13 16 19 / .45); } .geraet-kopf { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--nacht-linie); } .geraet-kopf .logo-maske.klein { width: 92px; color: #fff; } .geraet-kopf .mono { color: var(--nacht-leise); margin-right: auto; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: #f07a2e; color: #0d1013; display: grid; place-items: center; font: 600 .75rem/1 var(--schrift); } .gruss { margin: .25rem 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .gruss .mono { color: var(--nacht-leise); font-weight: 400; font-size: .68rem; } .kachel { background: var(--nacht-2); padding: .9rem 1rem; display: grid; gap: .3rem; font-size: .92rem; } .kachel .mono { color: var(--nacht-leise); font-size: .68rem; } .kachel strong { font-size: 1.05rem; } .kachel a { color: #f5873d; font-size: .88rem; } .k-naechstes { border-left: 3px solid #f07a2e; } .kachel-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .balken { height: 4px; background: rgb(255 255 255 / .12); } .balken i { display: block; height: 100%; background: #f07a2e; } .status-chip { justify-self: start; font-size: .75rem; padding: .2rem .5rem; margin-top: .2rem; } .status-chip.gruen { background: rgb(95 197 138 / .16); color: #8fe0b0; } .verlauf { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; font-size: .72rem; color: var(--nacht-leise); } .verlauf li { border-top: 3px solid rgb(255 255 255 / .14); padding-top: .35rem; } .verlauf .erledigt { border-color: rgb(255 255 255 / .55); } .verlauf .jetzt { border-color: #f07a2e; color: #fff; } .k-neu { grid-template-columns: 1fr auto; align-items: center; } .k-neu .mono { grid-column: 1 / -1; } .geraet .etikett { color: var(--nacht-leise); } @media (max-width: 900px) { .mein-hub-raster { grid-template-columns: minmax(0, 1fr); } } /* ── 7 · Magazin ── */ .magazin-raster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); } .aufmacher a { display: grid; text-decoration: none; } .aufmacher figure { margin: 0 0 1.25rem; overflow: hidden; aspect-ratio: 16 / 10; background: var(--flaeche); } .aufmacher img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .9s var(--kurve); } .aufmacher a:hover img { transform: scale(1.03); } .aufmacher h3 { margin: .5rem 0 .75rem; font-size: var(--t-3); line-height: 1.12; letter-spacing: -.025em; } .aufmacher p:last-child { margin: 0; color: var(--tinte-2); font-size: 1.05rem; } .meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; font: .74rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); } .kategorie { color: var(--marke-text); } .beitragsliste { display: grid; align-content: start; border-top: 2px solid var(--linie-stark); } .beitrag a { display: block; padding: 1.15rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; } .beitrag h3 { margin: .45rem 0 .3rem; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.015em; } .beitrag p:last-child:not(.meta) { margin: 0; color: var(--leise); font-size: .93rem; } .aufmacher h3, .beitrag h3, .beitrag-karte h3 { transition: color var(--dauer-1, .14s); } .aufmacher a:is(:hover, :focus-visible) h3, .beitrag a:is(:hover, :focus-visible) h3 { text-decoration: none; color: var(--marke-text); } /* orange statt unterstrichen (05.11.2026) */ @media (max-width: 900px) { .magazin-raster { grid-template-columns: minmax(0, 1fr); } } /* ── 8 · Netzwerk ── */ .stimmen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .stimme { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 0 1.25rem; padding: 1.5rem; background: var(--flaeche); } .stimme img { grid-row: span 2; width: 96px; height: 96px; object-fit: cover; } .stimme blockquote { margin: 0; } .stimme blockquote p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; } .stimme figcaption { display: grid; font-size: .9rem; } .stimme figcaption span { color: var(--leise); } .logowand > .mono { color: var(--leise); margin: 0 0 .75rem; } .logos { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); } .logos li { background: var(--logo-flaeche); display: grid; place-items: center; padding: 1.25rem 1.5rem; aspect-ratio: 5 / 2; } .logos img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; } .logos li:hover img { filter: none; opacity: 1; } .logos-gross { grid-template-columns: repeat(4, 1fr); } .logos-gross img { max-height: 64px; } .team { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--linie); } .team-text h3 { margin: 0 0 .5rem; font-size: var(--t-3); letter-spacing: -.02em; } .team-text p { color: var(--tinte-2); margin: 0 0 1.5rem; } .koepfe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .koepfe img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; margin-bottom: .6rem; filter: grayscale(.25); } .koepfe strong { display: block; font-size: .92rem; line-height: 1.25; } .koepfe span { font-size: .82rem; color: var(--leise); } @media (max-width: 1000px) { .stimmen { grid-template-columns: minmax(0, 1fr); } .logos { grid-template-columns: repeat(4, 1fr); } .team { grid-template-columns: minmax(0, 1fr); } .koepfe { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .logos, .logos-gross { grid-template-columns: repeat(2, 1fr); } .stimme { grid-template-columns: 64px 1fr; padding: 1.1rem; } .stimme img { width: 64px; height: 64px; } } /* ── 10 · Summit ── */ .summit { position: relative; margin-top: var(--abschnitt); min-height: clamp(560px, 70vh, 760px); display: flex; align-items: flex-end; background: var(--nacht); color: #fff; overflow: hidden; } .summit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .summit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(13 16 19 / .9) 0%, rgb(13 16 19 / .55) 45%, rgb(13 16 19 / .1) 80%), linear-gradient(0deg, rgb(13 16 19 / .6), rgb(13 16 19 / 0) 50%); } .summit .huelle { position: relative; z-index: 1; width: 100%; padding-top: 4rem; padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .summit-text { max-width: 44rem; } .summit-text .mono { color: rgb(255 255 255 / .8); display: flex; align-items: center; gap: .6rem; } .summit-text .mono::before { content: ""; width: 10px; height: 10px; background: #f07a2e; } .summit h2 { margin: 1rem 0 1rem; font-size: var(--t-2); line-height: 1.02; letter-spacing: -.035em; font-weight: 620; } .summit-text > p:not(.mono) { color: rgb(255 255 255 / .88); font-size: var(--t-gross); margin: 0 0 1.75rem; } .summit-zahlen { display: flex; gap: 2.5rem; margin: 0 0 2rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / .25); } .summit-zahlen dt { font-size: 2.2rem; font-weight: 620; letter-spacing: -.04em; line-height: 1; } .summit-zahlen dd { margin: .3rem 0 0; color: rgb(255 255 255 / .75); font-size: .88rem; } .summit .knopf-haupt { background: #f07a2e; color: #0d1013; } .summit .knopf-haupt:hover { background: #fff; } /* ═══ Navigation mit Untermenüs (Michel 26.10.: „Keine One-Page“ – viele Unterseiten) ═══ */ .nav { gap: .25rem; align-items: center; } .nav-punkt { position: static; display: flex; align-items: center; } .nav-haupt { text-decoration: none; font-weight: 500; font-size: .95rem; padding: .4rem .1rem .4rem .5rem; border-bottom: 2px solid transparent; } .nav-haupt:hover, .nav-haupt[aria-current="page"] { border-color: var(--marke); } .nav-auf { all: unset; cursor: pointer; width: 24px; height: 32px; display: grid; place-items: center; color: var(--leise); margin-right: .4rem; } .nav-auf:hover, .nav-auf[aria-expanded="true"] { color: var(--tinte); } .nav-auf[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-auf svg { transition: transform .2s var(--kurve); } .nav-auf:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-top: 1px solid var(--linie); border-bottom: 2px solid var(--linie-stark); box-shadow: 0 30px 50px -30px rgb(13 16 19 / .35); } .kopf .nav-panel-raster { display: grid; height: auto; align-items: start; grid-template-columns: 4fr 8fr; gap: 3rem; padding-top: 2rem; padding-bottom: 2.25rem; } .nav-panel-kopf .mono { color: var(--marke-text); margin: 0 0 .6rem; } .nav-panel-kopf p:not(.mono) { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 550; max-width: 22ch; } .nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; } .nav-panel li a { display: grid; gap: .15rem; padding: .85rem 0; border-top: 1px solid var(--linie); text-decoration: none; } .nav-panel li a strong { font-size: 1rem; } .nav-panel li a span { font-size: .88rem; color: var(--leise); } .nav-panel li a:hover strong { text-decoration: underline; text-decoration-color: var(--marke); text-underline-offset: .2em; } .textlink-pfeil { font-weight: 600; color: var(--marke-text); text-decoration: none; } .textlink-pfeil:hover { text-decoration: none; } /* ohne Unterstrich (06.11.2026) – beim Hovern rückt nur der Pfeil */ .menue-liste details { border-bottom: 1px solid var(--linie); } .menue-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; } .menue-liste summary::-webkit-details-marker { display: none; } .menue-liste details ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; } .menue-liste details ul a { display: block; padding: .6rem 0 .6rem .9rem; border-left: 2px solid var(--linie); text-decoration: none; font-size: 1.05rem; border-bottom: 0; font-weight: 500; letter-spacing: 0; } .plus { position: relative; width: 14px; height: 14px; flex: none; } .plus::before, .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; transition: transform .2s; } .plus::after { transform: rotate(90deg); } details[open] > summary .plus::after { transform: rotate(0); } /* Bereichsleiste: Nachbarseiten eines Bereichs */ .bereichsleiste { border-bottom: 1px solid var(--linie); background: var(--grund); position: sticky; top: 68px; z-index: 20; } .bereichsleiste .huelle { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; } .bereichsleiste a { flex: none; padding: .9rem 0 .8rem; text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--tinte-2); border-bottom: 2px solid transparent; } .bereichsleiste a:hover { color: var(--tinte); } .bereichsleiste a[aria-current="page"] { color: var(--tinte); border-color: var(--marke); font-weight: 600; } /* Seitenkopf mit Bild */ .seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spalt); align-items: end; } .seitenkopf.mit-bild .seitenkopf-raster { grid-template-columns: 7fr 5fr; } .seitenkopf-bild { margin: 0; } .seitenkopf-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (max-width: 860px) { .seitenkopf.mit-bild .seitenkopf-raster { grid-template-columns: minmax(0, 1fr); } .seitenkopf-bild img { aspect-ratio: 16 / 9; } } /* Spalten-Block */ .spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; margin-bottom: 1rem; } .spalten.v-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .spalten.v-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .spalte > * + * { margin-top: 1rem; } .spalte .register { margin-bottom: 1.25rem; } .spalte .register h2 { font-size: var(--t-2); } .spalte p.gross { margin: 0; } @media (max-width: 900px) { .spalten, .spalten.v-6-6, .spalten.v-5-7 { grid-template-columns: minmax(0, 1fr); } } .abschnitt .huelle > * + * { margin-top: 0; } .abschnitt .huelle > .meldung, .abschnitt .huelle > p.absatz, .abschnitt .huelle > .punktliste, .abschnitt .huelle > .haken, .abschnitt .huelle > .ablauf { max-width: 56rem; margin-bottom: 1.25rem; } p.absatz { margin: 0 0 1rem; font-size: 1.05rem; color: var(--tinte-2); max-width: 64ch; } .zwischentitel { margin: 1.5rem 0 .75rem; font-size: 1.2rem; letter-spacing: -.015em; } .punktliste { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; } ul.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .haken li { padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--linie); position: relative; } .haken li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 9px; height: 9px; background: var(--marke); } .spalte .meldung + .meldung { margin-top: .75rem; } .kernaussage { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; border-left: 4px solid var(--marke); padding-left: 1.1rem; margin: 2rem 0; } .zitatblock { margin: 2rem 0; } .zitatblock p { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.32; letter-spacing: -.015em; font-weight: 550; } .zitatblock p::before { content: ""; display: block; width: 10px; height: 10px; background: var(--marke); margin-bottom: .8rem; } .zitatblock footer { margin-top: .75rem; color: var(--leise); font-size: .9rem; } .trenner { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; } .bildtext { display: grid; grid-template-columns: 160px 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem; background: var(--flaeche); margin: 1.5rem 0; } .bildtext img { background: #fff; padding: .5rem; } .bildtext p { margin: 0; font-size: .95rem; } @media (max-width: 560px) { .bildtext { grid-template-columns: minmax(0, 1fr); } } /* Ablauf */ .ablauf { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 2px solid var(--linie-stark); } .ablauf li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--linie); } .ablauf .zeit { font: .82rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--marke-text); } @media (max-width: 560px) { .ablauf li { grid-template-columns: minmax(0, 1fr); gap: .2rem; } } /* Karten */ .karten-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); margin-bottom: 1rem; } @media (max-width: 1000px) { .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .karten-raster { grid-template-columns: minmax(0, 1fr); } } .karte { display: flex; flex-direction: column; gap: .5rem; } .karte h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.015em; } .karte p { margin: 0; color: var(--tinte-2); } .karte .textlink-pfeil { margin-top: auto; padding-top: .75rem; } .karte .mono { color: var(--marke-text); } .partnerkarte img { max-height: 40px; width: auto; max-width: 60%; object-fit: contain; object-position: left; margin-bottom: .5rem; } .karte-bild a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--flaeche); } .karte-bild img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } .karte-bild div { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .4rem; } .karte-bild h3 { margin: 0; font-size: 1.25rem; } .karte-bild p { margin: 0; color: var(--tinte-2); } .schiene-kopf { display: flex; justify-content: flex-end; margin: -1rem auto .75rem; } .logowand-titel { color: var(--leise); margin: 0 0 .75rem; } .logo-name span { font-weight: 600; color: #2b3138; text-align: center; font-size: .95rem; } .kopf-initialen, .avatar-gross { display: grid; place-items: center; background: var(--flaeche); color: var(--leise); font: 600 1.4rem/1 var(--schrift); } .kopf-initialen { aspect-ratio: 4 / 5; width: 100%; margin-bottom: .6rem; } .avatar-gross { width: 96px; height: 96px; grid-row: span 2; } .koepfe-gross { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0 0 2rem; } @media (max-width: 860px) { .koepfe-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Paketkarten und Vergleich */ .paket-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); margin-bottom: 1rem; } .paket-raster.einzeln { grid-template-columns: minmax(0, 1fr); } @media (max-width: 1000px) { .paket-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .paket-raster { grid-template-columns: minmax(0, 1fr); } } .paketkarte { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--linie); border-top: 3px solid var(--linie-stark); background: var(--grund); } .paketkarte .mono { color: var(--marke-text); margin: 0; } .paketkarte h3 { margin: .45rem 0 .5rem; font-size: 1.3rem; letter-spacing: -.02em; } .paket-nutzen-satz { margin: 0 0 1rem; color: var(--tinte-2); } .paket-betrag { margin: 0; font-size: 2.3rem; font-weight: 620; letter-spacing: -.045em; line-height: 1; } .preis-zusatz { font-size: .85rem; color: var(--leise); margin-top: .35rem; } .paketkarte ul { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; } .paketkarte li { padding-left: 1.1rem; position: relative; } .paketkarte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--marke); } .paket-hinweis { margin: -.5rem 0 1rem; font-size: .85rem; color: var(--leise); } .paketkarte-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .tabelle-rahmen { overflow-x: auto; margin-bottom: 1rem; } .vergleich { min-width: 860px; } .vergleich thead th span { display: block; margin-top: .35rem; font-family: var(--schrift); font-size: .95rem; font-weight: 650; color: var(--tinte); text-transform: none; letter-spacing: 0; } .vergleich td { font-size: .9rem; } /* Paketspalten gleich breit (05.11.2026), die Spalte „Leistung“ fest etwas breiter */ @media (min-width: 760.02px) { .vergleich { table-layout: fixed; width: 100%; } .vergleich thead th:first-child { width: 22%; } .vergleich thead th span { white-space: nowrap; } } @media (max-width: 760px) { .vergleich { min-width: 0; } } /* Häufige Fragen */ .faq { border-top: 2px solid var(--linie-stark); margin-bottom: 1.5rem; max-width: 60rem; } .faq details { border-bottom: 1px solid var(--linie); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 600; font-size: 1.08rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .faq-antwort { padding: 0 0 1.25rem; color: var(--tinte-2); max-width: 64ch; } .faq-antwort p { margin: 0; } .faq-gruppe + .faq-gruppe { margin-top: 2.5rem; } .faq-gruppe-titel { margin: 0 0 .75rem; font: .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .pitch .mono { color: var(--marke-text); } /* Schmale Bildschirme: nichts darf breiter als die Seite werden */ fieldset { min-width: 0; } .kennliste dd, .karte a { overflow-wrap: anywhere; } .logos li { min-width: 0; padding: 1rem; } .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 560px) { .logos, .logos-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .darstellung.gross { flex-wrap: wrap; } @media (max-width: 640px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } .formular { grid-template-columns: minmax(0, 1fr); } .wahlfeld .wahl-text { min-width: 0; } fieldset, .paket-wahl { grid-template-columns: minmax(0, 1fr); } .wahlfeld { grid-template-columns: auto minmax(0, 1fr); } .paket-wahl .wahlfeld { grid-template-columns: auto minmax(0, 1fr) auto; } @media (max-width: 560px) { .paket-wahl .wahlfeld { grid-template-columns: auto minmax(0, 1fr); } } [hidden] { display: none !important; } .team .koepfe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } @media (max-width: 760px) { .team .koepfe { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* „Design by ibx“ wie auf der Summit-Website: Original-Logo als Maske in Textfarbe (passt in Hell und Dunkel) */ .urheber { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.2rem; } .design-ibx { font: 400 .85rem/1.4 var(--schrift); letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--leise); transition: color .16s; } .design-ibx:hover, .design-ibx:focus-visible { color: var(--tinte); } .ibx-logo { display: inline-block; margin-left: .3em; height: .95em; vertical-align: -.12em; aspect-ratio: 240 / 136; background: currentColor; -webkit-mask: url(/gemeinsam/logos/ibx-logo.png) center / contain no-repeat; mask: url(/gemeinsam/logos/ibx-logo.png) center / contain no-repeat; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ Rhythmus und Bewegung (26.10.2026, Überarbeitung „gestalterisch ausgereift“) Bewegung: wenige feste Dauern und zwei Kurven. Nie Scroll-Sperren, nie Wartezeiten, kein Parallax. Ohne JavaScript und bei „Bewegung reduzieren“ ist alles sofort sichtbar und statisch. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --dauer-1: 140ms; /* Farbe, Rahmen, Unterstreichung */ --dauer-2: 280ms; /* Pfeile, Menüs, kleine Wege */ --dauer-3: 560ms; /* Bildvergrößerung, Abschnitte erscheinen */ --dauer-4: 1100ms; /* Bildüberblendung im Slider */ --kurve: cubic-bezier(.2, .7, .1, 1); /* auslaufend: Ankommen */ --kurve-weich: cubic-bezier(.45, 0, .2, 1); /* ein- und auslaufend: Überblenden */ --stufe: 70ms; /* Versatz in Gruppen (Karten, Listen) */ } /* Abschnitte im Wechsel: Standard, Fläche, Dunkel, Orange */ section.abschnitt { padding-bottom: 0; } section.abschnitt[class*="stil-"] { margin-top: var(--abschnitt); padding: var(--abschnitt) 0; } section.abschnitt[class*="stil-"] + section.abschnitt[class*="stil-"] { margin-top: 0; } .stil-flaeche { background: var(--flaeche); } .stil-dunkel, .stil-marke { --grund: var(--nacht); --flaeche: var(--nacht-2); --tinte: var(--nacht-tinte); --tinte-2: #c3cad0; --leise: var(--nacht-leise); --linie: var(--nacht-linie); --linie-stark: #f2f4f6; --marke-text: #f5873d; --feld: #6b757e; background: var(--nacht); color: var(--tinte); } .stil-marke { --grund: var(--marke); --tinte: #14171a; --tinte-2: #14171a; --leise: rgb(20 23 26 / .78); --linie: rgb(20 23 26 / .2); --linie-stark: #14171a; --marke-text: #14171a; background: var(--marke); color: #14171a; } .stil-marke .register::before { background: #14171a; } .stil-flaeche .karte, .stil-flaeche .praxis { background: var(--grund); } /* Abschnittskopf: Linie und Kennung nur, wo sie gliedern */ .register.ohne-linie { border-top: 0; padding-top: 0; } .register.ohne-linie::before { display: none; } .register h2 .mono { margin-bottom: .6rem; } .register-link { align-self: end; white-space: nowrap; } .stil-dunkel .textlink-pfeil, .stil-marke .textlink-pfeil { color: inherit; } /* Links: Unterstreichung wächst von links, Pfeil gleitet */ .textlink-pfeil { position: relative; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: .1em; transition: background-size var(--dauer-2) var(--kurve), color var(--dauer-1); } .textlink-pfeil:hover, .textlink-pfeil:focus-visible { background-size: 0 1.5px; } /* kein Unterstrich beim Hovern (06.11.2026) */ .pfeil { transition: transform var(--dauer-2) var(--kurve); } a:hover .pfeil, a:focus-visible .pfeil, button:hover .pfeil { transform: translateX(4px); } .knopf { transition: background-color var(--dauer-1), color var(--dauer-1), border-color var(--dauer-1), box-shadow var(--dauer-2) var(--kurve); } .knopf:active { transform: translateY(1px); } .prosa a, .absatz a, p.gross a, .faq-antwort a, .meldung a { text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color var(--dauer-1), text-decoration-thickness var(--dauer-1); } .prosa a:hover, .absatz a:hover, p.gross a:hover, .faq-antwort a:hover { text-decoration-thickness: 2px; } /* Bildkarten: dezente Vergrößerung bei Zeiger und Tastaturfokus, klarer Fokusrahmen */ .termin a, .format a, .aufmacher a, .karte-bild a, .feature-bild { overflow: hidden; } .termin figure img, .format img, .aufmacher img, .karte-bild img, .feature-bild img { transition: transform var(--dauer-3) var(--kurve); } .termin a:is(:hover, :focus-visible) figure img, .format a:is(:hover, :focus-visible) img, .aufmacher a:is(:hover, :focus-visible) img, .karte-bild a:is(:hover, :focus-visible) img { transform: scale(1.04); } .termin a:focus-visible, .format a:focus-visible, .aufmacher a:focus-visible, .beitrag a:focus-visible, .karte-bild a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; } /* Abschnitte erscheinen einmal beim ersten Eintritt: kurz, wenig Weg, Gruppen leicht versetzt */ .js .auftritt { opacity: 0; transform: translateY(14px); transition: opacity var(--dauer-3) var(--kurve), transform var(--dauer-3) var(--kurve); transition-delay: calc(var(--i, 0) * var(--stufe)); } .js .auftritt.sichtbar { opacity: 1; transform: none; } /* Kopf: beim Scrollen ruhiger Wechsel auf eine flachere Leiste */ .kopf { transition: box-shadow var(--dauer-2) var(--kurve), background-color var(--dauer-2); } .kopf .huelle { transition: height var(--dauer-2) var(--kurve); } .kopf .wortmarke { transition: width var(--dauer-2) var(--kurve); } .gescrollt .kopf { box-shadow: 0 10px 30px -22px rgb(13 16 19 / .45); } .gescrollt .kopf .huelle { height: 58px; } .gescrollt .kopf .wortmarke { width: 128px; } .bereichsleiste { transition: top var(--dauer-2) var(--kurve); } .gescrollt .bereichsleiste { top: 58px; } .kopf-login { display: none; width: 40px; height: 40px; place-items: center; color: var(--tinte); } .kopf-login svg { width: 20px; height: 20px; } @media (max-width: 1100px) { .kopf-login { display: grid; } } /* Untermenü: weich auf- und zuklappen (ohne JS bleibt es zu, die Bereichslinks führen auf die Übersichten) */ .nav-panel { opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity var(--dauer-2) var(--kurve), transform var(--dauer-2) var(--kurve), visibility 0s linear var(--dauer-2); } .nav-punkt.offen .nav-panel { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dauer-2) var(--kurve), transform var(--dauer-2) var(--kurve), visibility 0s; } .nav-panel[hidden] { display: block !important; } .nav-panel li { opacity: 0; transform: translateY(4px); transition: opacity var(--dauer-2) var(--kurve), transform var(--dauer-2) var(--kurve); } .nav-punkt.offen .nav-panel li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 60ms); } /* Menü auf dem Handy: gleitet herein */ dialog#menue[open] { animation: menue-auf var(--dauer-2) var(--kurve); } @keyframes menue-auf { from { opacity: 0; transform: translateY(-10px); } } .menue-liste details > ul { animation: aufklappen var(--dauer-2) var(--kurve); } @keyframes aufklappen { from { opacity: 0; transform: translateY(-4px); } } /* Schienen (Formate, Galerien): einrasten, direkt steuerbar mit Wischen, Pfeilen und Tastatur */ .schiene { scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; } .schiene-pfeile button { transition: background-color var(--dauer-1), color var(--dauer-1), opacity var(--dauer-2); } .schiene-pfeile button[disabled] { opacity: .3; pointer-events: none; } /* Themen-Index (dunkle Fläche): große Zeilen mit Leitfrage, Pfeil gleitet */ .themen-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); counter-reset: thema; } .themen-index a { display: grid; grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 2.5rem; gap: 1.5rem; align-items: baseline; padding: 1.6rem clamp(1rem, 5vw, 4.5rem) 1.6rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: padding var(--dauer-2) var(--kurve), background-color var(--dauer-2); } .themen-index a:is(:hover, :focus-visible) { padding-left: 1rem; background: rgb(255 255 255 / .04); } .themen-index a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .thema-nr { font: .8rem/1 var(--mono); color: var(--marke-text); } .thema-titel { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 620; } .thema-einstieg { color: var(--tinte-2); font-size: 1rem; } .thema-pfeil { justify-self: start; font-size: 1.4rem; color: var(--marke-text); transition: transform var(--dauer-2) var(--kurve); } .themen-index a:is(:hover, :focus-visible) .thema-pfeil { transform: translateX(6px); } @media (max-width: 760px) { .themen-index a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: .25rem 1rem; padding-right: .5rem; } .thema-einstieg { grid-column: 2; } .thema-pfeil { grid-row: 1; grid-column: 3; } } section.abschnitt:not([class*="stil-"]) .themen-index a:is(:hover, :focus-visible) { background: var(--flaeche); } /* Praxis: Ausgangsfrage → Beitrag des Hub → Ergebnis */ .praxis-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); } .praxis { display: flex; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--flaeche); border-top: 3px solid var(--marke); } .praxis-art { margin: 0 0 .6rem; font: .72rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .praxis h3 { margin: 0 0 1.1rem; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; } .praxis dl { margin: 0 0 1rem; display: grid; gap: 0; counter-reset: schritt; } .praxis dl > div { position: relative; padding: 0 0 1rem 1.6rem; } .praxis dl > div::before { content: ""; position: absolute; left: 4px; top: .35rem; bottom: -.1rem; width: 1px; background: var(--linie); } .praxis dl > div:last-child::before { display: none; } .praxis dl > div::after { content: ""; position: absolute; left: 0; top: .3rem; width: 9px; height: 9px; background: var(--grund); border: 1.5px solid var(--tinte); } .praxis dl > div:last-child::after { background: var(--marke); border-color: var(--marke); } .praxis dt { font: .7rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); margin-bottom: .2rem; } .praxis dd { margin: 0; font-size: .97rem; color: var(--tinte); } .praxis .textlink-pfeil { margin-top: auto; color: var(--marke-text); font-weight: 600; } @media (max-width: 1000px) { .praxis-raster { grid-template-columns: minmax(0, 1fr); } } /* Großes Zitat (Orange): Porträt, Zitat, Name mit Kontext und Quelle */ .zitat-gross { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; } .zitat-gross img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; } .zitat-gross blockquote { margin: 0; } .zitat-gross blockquote p { margin: 0 0 1.5rem; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 620; text-wrap: balance; } .zitat-gross blockquote p::before { content: "„"; } .zitat-gross blockquote p::after { content: "“"; } .zitat-gross figcaption { display: grid; gap: .2rem; font-size: .95rem; } .zitat-gross figcaption span { color: var(--leise); } .zitat-gross figcaption a { color: inherit; text-underline-offset: .2em; } @media (max-width: 760px) { .zitat-gross { grid-template-columns: minmax(0, 1fr); } .zitat-gross img { width: 46%; } } /* Redaktionelle Bild-Text-Komposition */ .feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: center; } .feature-rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .feature-rechts .feature-bild { order: 2; } .feature-bild { margin: 0; } .feature-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .feature-hoch .feature-bild img { aspect-ratio: 4 / 5; } .feature-text h2 { margin: .5rem 0 1rem; font-size: var(--t-2); line-height: 1.04; letter-spacing: -.035em; font-weight: 620; } .feature-text p { color: var(--tinte-2); font-size: var(--t-gross); margin: 0 0 1.25rem; } .kicker-punkt { display: flex; align-items: center; gap: .6rem; color: var(--leise); margin: 0; } .kicker-punkt::before { content: ""; width: 10px; height: 10px; background: var(--marke); } @media (max-width: 900px) { .feature, .feature-rechts { grid-template-columns: minmax(0, 1fr); } .feature-rechts .feature-bild { order: 0; } } /* Hinweise auf dunkler Fläche (z. B. „Schon Mitglied?“) */ .stil-dunkel .meldung { background: var(--nacht-2); border-color: var(--marke); } .stil-dunkel .meldung::before { background: var(--marke); color: #14171a; } .stil-dunkel .spalten { align-items: end; } .stil-dunkel .haken li { border-color: var(--linie); } .termin-raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .termin-raster.drei { grid-template-columns: minmax(0, 1fr); } } /* Seitenkopf: Stand und Verantwortung, wo sie Lesern helfen */ .seitenkopf-meta { margin: 1.25rem 0 0; font-size: .88rem; color: var(--leise); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-delay: 0s !important; } .js .auftritt { opacity: 1; transform: none; } .schiene { scroll-behavior: auto; } } /* Förderlogo (Original der NBank-Kombination EU + Niedersachsen, von der bisherigen Website): immer auf weißer Fläche, nie umgefärbt */ .foerderlogo { flex: none; display: block; background: #fff; padding: .7rem .9rem; border: 1px solid var(--linie); } .foerderlogo img { display: block; height: 34px; width: auto; max-width: 100%; } .foerderung { align-items: center; } @media (max-width: 560px) { .foerderung { flex-direction: column; align-items: flex-start; } .foerderlogo img { height: 26px; } } .belege dd { hyphens: auto; -webkit-hyphens: auto; } /* Magazin mit wenigen Beiträgen: gleichwertige Bildkarten */ .beitrag-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--spalt); } .beitrag-karte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; border-top: 2px solid var(--linie-stark); } .beitrag-karte figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--flaeche); } .beitrag-karte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform var(--dauer-3) var(--kurve); } .beitrag-karte a:is(:hover, :focus-visible) img { transform: scale(1.04); } .beitrag-karte a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; } .beitrag-karte div { padding: 1rem 0 .5rem; } .beitrag-karte h3 { margin: .5rem 0 .5rem; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; } .beitrag-karte a:is(:hover, :focus-visible) h3 { text-decoration: none; color: var(--marke-text); } .beitrag-karte p:last-child { margin: 0; color: var(--tinte-2); } /* Kopf: Navigation bricht nie um; schmale Bildschirme sparsamer */ .nav-haupt { white-space: nowrap; } @media (max-width: 1360px) { .kopf .huelle { gap: 1.25rem; } .werkzeuge { gap: .75rem; } .nav-haupt { font-size: .92rem; } } @media (max-width: 520px) { .kopf .huelle { gap: .5rem; } .werkzeuge { gap: .25rem; } .kopf-login, .menueknopf { width: 40px; } } @media (max-width: 400px) { .kopf .knopf { padding: 0 .65rem; font-size: .8rem; } .wortmarke { width: 108px; } } .thema-titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } @media (max-width: 400px) { .thema-titel { font-size: 1.45rem; } } .knopf-breit { white-space: normal; text-align: center; line-height: 1.25; padding-top: .7rem; padding-bottom: .7rem; } p.gross { max-width: 54rem; } .praxis-raster + *, .termin-raster + *, .beitrag-karten + * { margin-top: 1.5rem !important; } /* Ein einzelnes Szenario (Themenseiten): die drei Schritte nebeneinander */ .praxis-raster:has(> .praxis:only-child) { grid-template-columns: minmax(0, 1fr); } .praxis:only-child dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .praxis:only-child dl > div::before { display: none; } @media (max-width: 760px) { .praxis:only-child dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .praxis:only-child dl > div::before { display: block; } } /* Dunkle Bänder bleiben auch im dunklen Schema als eigene Fläche erkennbar */ :root[data-theme="dunkel"] .stil-dunkel { --grund: #171b20; background: #171b20; --flaeche: #1e2329; } @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .stil-dunkel { --grund: #171b20; background: #171b20; --flaeche: #1e2329; } } /* ═══ Zweite Überarbeitung (26.10.2026): Linie nur, wo gewollt; unterschiedliche Enthüllungen ═══ */ /* Abschnittsköpfe ohne Linie und Knoten – die Linie ist jetzt dem Motiv „Verbindung“ vorbehalten (mit-linie nur auf Wunsch) */ .register { border-top: 0; padding-top: 0; } .register::before { display: none; } .register.mit-linie { border-top: 2px solid var(--linie-stark); padding-top: 1.1rem; } .register.mit-linie::before { display: block; } .register h2 .mono { color: var(--marke-text); margin-bottom: .75rem; } /* Überschriften „wie einen Strich gezogen“ (darstellung.js, 05.11.2026): warten unsichtbar, wischen sich dann Zeile für Zeile von links auf; die Unterzeile darunter erscheint erst, wenn die Überschrift steht. Nur mit Bewegung – sonst ist alles sofort da. */ @media (prefers-reduced-motion: no-preference) { .js .strich-wartet { clip-path: inset(0 100% 0 0); } .strich-zeile { display: inline-block; text-indent: 0; animation: strich-text 680ms var(--kurve-weich) calc(var(--z, 0) * 220ms) backwards; } html.js .strich-folgt:not(.strich-folgt-an) { opacity: 0; transform: translateY(10px); } html.js .strich-folgt { animation: none !important; transition: opacity 600ms var(--kurve), transform 700ms var(--kurve); transition-delay: 0s; } html.js .strich-folgt.strich-folgt-an { opacity: 1; transform: none; } .strich-wartet::after, .strich-laeuft::after { opacity: 0; } } @keyframes strich-text { from { clip-path: inset(-.25em 100% -.3em 0); } to { clip-path: inset(-.25em -.1em -.3em 0); } } /* Hervorhebung im Abschnittstitel (*Text* im HUB OS): Akzentfarbe, nicht kursiv (05.11.2026) */ .register h2 em.akzent { font-style: normal; color: var(--marke-text); } .register-mitte { justify-content: center; text-align: center; } /* Enthüllungen nach Art: Bilder öffnen sich, Texte steigen kurz, Linien ziehen sich, Reihen gleiten, Karten gestaffelt */ .js .auftritt[data-art="bild"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--kurve); transition-delay: calc(var(--i, 0) * 120ms); } .js .auftritt[data-art="bild"] img { transform: scale(1.08); transition: transform 1400ms var(--kurve); transition-delay: calc(var(--i, 0) * 120ms); } .js .auftritt[data-art="bild"].sichtbar { clip-path: inset(0 0 0 0); } .js .auftritt[data-art="bild"].sichtbar img { transform: none; } .js .auftritt[data-art="text"] { transform: translateY(10px); transition-duration: 600ms; } .js .auftritt[data-art="reihe"] { transform: translateX(-14px); } .js .auftritt[data-art="reihe"].sichtbar { transform: none; } .js .auftritt[data-art="zahl"] { transform: none; } .js .auftritt[data-art="linie"] { opacity: 1; } .js .auftritt[data-art="karte"] { transform: translateY(22px) scale(.985); transition-duration: 700ms; transition-delay: calc(var(--i, 0) * 90ms); } .js .auftritt[data-art="karte"].sichtbar { transform: none; } /* Gruppen, die als Ganzes beobachtet werden, deren Teile aber gestaffelt kommen (05.11.2026): Logowand, Summit-Text. Gleiche Kurve und Wege wie oben; die Verzögerung gilt nur fürs Erscheinen, nicht für spätere Hover-Reaktionen. */ .js .logowand.auftritt, .js .summit-text.auftritt { opacity: 1; transform: none; } .js .logowand.auftritt li { opacity: 0; transform: translateY(12px); transition: opacity var(--dauer-3) var(--kurve) calc(min(var(--i, 0), 12) * 45ms), transform var(--dauer-3) var(--kurve) calc(min(var(--i, 0), 12) * 45ms), border-color var(--dauer-1); } .js .logowand.auftritt.sichtbar li { opacity: 1; transform: none; } .logos li:hover { border-color: var(--marke); } .js .summit-text.auftritt > * { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--kurve), transform 700ms var(--kurve); } .js .summit-text.auftritt.sichtbar > * { opacity: 1; transform: none; } .js .summit-text.auftritt.sichtbar > :nth-child(2) { transition-delay: 90ms; } .js .summit-text.auftritt.sichtbar > :nth-child(3) { transition-delay: 180ms; } .js .summit-text.auftritt.sichtbar > :nth-child(4) { transition-delay: 270ms; } .js .summit-text.auftritt.sichtbar > :nth-child(5) { transition-delay: 360ms; } /* Orange Haltung: Überschrift nur als Kennung */ .hat-haltung .register h2 { font-size: .8rem; font-family: var(--mono); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; } /* Mitgliedschaft mit Bild: Bild links, Text rechts */ .hat-bild .spalten > .spalte:last-child { order: -1; } @media (prefers-reduced-motion: reduce) { .js .auftritt[data-art] { clip-path: none !important; transform: none !important; opacity: 1 !important; } .js .auftritt[data-art] img { transform: none !important; } .js .logowand.auftritt li, .js .summit-text.auftritt > * { opacity: 1 !important; transform: none !important; } } html, body { overflow-x: clip; } /* Sicherheitsnetz gegen Rundungspixel (Bildzug im Einstieg); clip statt hidden, damit „sticky“ weiter funktioniert */ /* Falle für Bots in Formularen: für Menschen unsichtbar, auch für Vorleseprogramme */ .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .newsletter-hinweis { margin-top: .6rem; } .newsletter-hinweis.fehler { color: var(--rot); } .newsletter-recht { margin-top: .5rem; font-size: .8rem; color: var(--leise); } .newsletter-recht a { color: inherit; text-underline-offset: .2em; } /* Logowände flach (04.11.2026, Michel: „Partnerlogos klar und flach“ – statt Glas mit Verlauf und Schatten): weiße Flächen, feiner Rahmen, gleiche Innenabstände. Logos freigestellt (logos.mjs), in Markenfarbe, optisch ausgeglichen (darstellung.py logo_img). */ .logos, .hat-logos .logos { gap: clamp(.5rem, .35rem + .4vw, .75rem); background: none; border: 0; } /* Logokacheln aus mattem Glas wie auf der Summit-Seite (Michel, 05.11.2026): heller Glaston mit Kante, Lichtreflex und weichem Schatten; weiße Dateihintergründe gehen per Multiplizieren im Glas auf. */ .logos { --glas-a: rgb(243 246 248 / .9); --glas-b: rgb(206 215 222 / .78); --glas-kante: rgb(255 255 255 / .75); --glas-rand: rgb(255 255 255 / .28); --glas-schatten: 0 14px 34px -18px rgb(0 0 0 / .75); } :root[data-theme="hell"] .logos { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); } @media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) .logos { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); } } .logos li { position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 3px; padding: 1.25rem 1.5rem; background: linear-gradient(150deg, var(--glas-a), var(--glas-b)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px var(--glas-rand), var(--glas-schatten); outline: 1px solid transparent; outline-offset: 3px; transition: outline-color var(--dauer-2) var(--kurve), transform var(--dauer-2) var(--kurve); } .logos li::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 38%); } .logos li:hover, .js .logowand.auftritt.sichtbar li:hover { outline-color: color-mix(in srgb, var(--marke) 70%, transparent); transform: translateY(-2px); } .logos img { filter: none; opacity: 1; mix-blend-mode: multiply; } .logo-name span { color: #1a2026; } /* Wechsel: festes Raster, wartende Einträge ausgeblendet, Inhalt blendet aus und ein, die Glasfläche bleibt stehen */ .logos-wechsel { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + .5vw, 1rem); } .logowand .logos.logos-wechsel li { aspect-ratio: 16 / 9; min-height: 0; padding: 1rem 1.25rem; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; } /* Logos in den Kacheln nie höher als 62 % der Kachel – hohe Logos (KSB INTAX, Größe 196 % in der Akte) stehen sonst über und wirken nach unten verschoben; so sitzen alle senkrecht mittig (05.11.2026) */ .logowand .logos.logos-wechsel li img { max-height: 100%; max-width: 86%; width: auto; object-fit: contain; } .logowand .logos.logos-wechsel li.logo-wartet { display: none; } .logos-wechsel li > * { transition: opacity 300ms var(--kurve-weich), transform 300ms var(--kurve-weich); } .logos-wechsel li.ist-aus > * { opacity: 0; transform: translateY(-6px); } .logos-wechsel li.ist-ein > * { animation: logo-ein 600ms var(--kurve) both; } @keyframes logo-ein { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 999.98px) { .logos-wechsel { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 599.98px) { .logos-wechsel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .logos li:hover { transform: none; } } /* ── Kopfbühne (05.11.2026, Mitgliedschaft): bildfüllendes Eventfoto, dunkle Textkarte links mit feiner Markenlinie. Ablauf beim Laden, einmal: Foto blendet weich ein → Karte gleitet kurz von oben in Position (700 ms, sanft abgebremst) → Dachzeile, Überschrift, Text und Knöpfe leicht versetzt. Reine CSS-Animation, kein Scroll-Lock; bei „Bewegung reduzieren“ steht alles sofort. */ .kopfbuehne { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100svh - 68px - 36px); /* Kopf + Umschaltleiste Hub | Summit (08.11.2026) */ background: var(--nacht); color: var(--nacht-tinte); overflow: hidden; } .kopfbuehne-bild { position: absolute; inset: 0; z-index: -1; margin: 0; } .kopfbuehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); } .kopfbuehne-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(13 16 19 / .6) 0, rgb(13 16 19 / 0) 18%), linear-gradient(90deg, rgb(13 16 19 / .5) 0, rgb(13 16 19 / .18) 42%, rgb(13 16 19 / 0) 68%); } .kopfbuehne-raster { width: 100%; padding-block: clamp(2.5rem, 7vh, 5.5rem); } .kopfbuehne-karte { width: 48%; min-width: 30rem; max-width: 46rem; padding: clamp(1.75rem, 1rem + 1.6vw, 2.6rem); background: rgb(23 27 31 / .94); border-top: 2px solid #f07a2e; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); } .kopfbuehne-dach { margin: 0 0 1.1rem; color: #f5873d; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .kopfbuehne h1 { margin: 0 0 1.15rem; font-size: clamp(1.9rem, .9rem + 1.6vw, 2.6rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 650; color: #fff; text-wrap: balance; } .kopfbuehne-zeile { display: block; } /* Kein „nowrap“ mehr (06.11.2026): Lange Titel liefen sonst aus der Kachel. Jede Zeile beginnt neu und bricht nur um, wenn sie nicht passt. */ .kopfbuehne-text { margin: 0; font-size: var(--t-gross); line-height: 1.55; color: #c3cad0; } .kopfbuehne h1 { overflow-wrap: break-word; hyphens: auto; } /* lange Wörter wie „Vertragsautomatisierung“ auf dem Handy */ .kopfbuehne .kopfbuehne-meta { margin: 1.25rem 0 0; color: #9aa3ab; font-size: .85rem; } .kopfbuehne-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); } .kopfbuehne .knopf-haupt { background: #f07a2e; color: #0d1013; } .kopfbuehne .knopf-haupt:is(:hover, :focus-visible) { background: #fff; color: #0d1013; } .kopfbuehne .knopf-glas:is(:hover, :focus-visible) { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; } /* Schrift bleibt weiß (06.11.2026) */ .kopfbuehne .knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 860px) { .kopfbuehne { display: block; min-height: 0; background: transparent; color: var(--tinte); overflow: visible; } .kopfbuehne-bild { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; max-height: 62svh; width: 100%; } .kopfbuehne-bild img { object-position: var(--fokus-m, var(--fokus, 50% 50%)); } /* eigener Ausschnitt fürs Handy aus dem HUB OS */ .kopfbuehne-bild::after { background: linear-gradient(180deg, rgb(13 16 19 / .45) 0, rgb(13 16 19 / 0) 30%); } .kopfbuehne-raster { position: relative; z-index: 1; padding-block: 0 var(--spalt); margin-top: -3.5rem; } .kopfbuehne-karte { width: auto; min-width: 0; max-width: 40rem; padding: 1.6rem 1.35rem 1.75rem; } .kopfbuehne h1 { font-size: clamp(1.85rem, 1.2rem + 3vw, 2.5rem); } .kopfbuehne-text { font-size: 1.05rem; } .kopfbuehne-knoepfe { flex-direction: column; align-items: stretch; } .kopfbuehne-knoepfe .knopf { min-height: 52px; white-space: normal; text-align: center; } } @media (prefers-reduced-motion: no-preference) { /* Nach dem Auftritt treibt das Bild ganz langsam (Michel, 06.11.2026: „zu wenig Bewegung … was dezentes, um es nicht starr wirken zu lassen“) */ /* 07.11.2026 (Michel: „wenn die Bildanimation durch ist, ruckelt es kurz“): Einblenden nur über die Deckkraft, das Treiben läuft ab dem ersten Bild durch – keine Übergabe zweier Bewegungen nach 1,1 s, bei der Chrome das Bild neu zeichnete */ .kopfbuehne-bild img { animation: kopfbuehne-ein 1.1s cubic-bezier(.25, .6, .3, 1) both, kopfbuehne-treiben 28s ease-in-out infinite alternate; transform-origin: var(--fokus, 50% 50%); will-change: transform; } .kopfbuehne-karte { animation: kopfbuehne-karte 700ms cubic-bezier(.16, 1, .3, 1) 450ms both; } .kopfbuehne-karte > :is(.kopfbuehne-dach, h1, .kopfbuehne-text, .kopfbuehne-knoepfe) { animation: kopfbuehne-teil 520ms cubic-bezier(.2, .7, .1, 1) both; } .kopfbuehne-dach { animation-delay: 750ms !important; } .kopfbuehne-karte > h1 { animation-delay: 850ms !important; } .kopfbuehne-text { animation-delay: 980ms !important; } .kopfbuehne-knoepfe { animation-delay: 1100ms !important; } } @keyframes kopfbuehne-bild { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } } @keyframes kopfbuehne-ein { from { opacity: 0; } to { opacity: 1; } } /* Außer Sicht ruht das Bild (06.11.2026, Michel: „Tabelle flackert schon wieder“): die Dauerbewegung samt eigener Grafikebene ließ Chrome beim Scrollen durch lange Listen nicht mit dem Zeichnen nachkommen – die Liste blieb kurz leer */ .kopfbuehne.ruht .kopfbuehne-bild, .kopfbuehne.ruht .kopfbuehne-bild img { will-change: auto; } .kopfbuehne.ruht .kopfbuehne-bild img { animation-play-state: paused; } @keyframes kopfbuehne-treiben { from { transform: scale(1); } to { transform: scale(1.075) translate(-1.2%, -.8%); } } /* Tiefe beim Scrollen (nur breite Bildschirme): das Bild läuft langsamer mit als die Seite – oben 10vh Reserve */ @media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .kopfbuehne-bild { inset: -10vh 0 0 0; transform: translate3d(0, var(--tiefe, 0px), 0); will-change: transform; } } @keyframes kopfbuehne-karte { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } } @keyframes kopfbuehne-teil { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Geteilter Seitenkopf (06.11.2026): Foto und Text nebeneinander über die volle Breite ───────────────────────────────────────── Text am Satzspiegel, Foto bis an den Bildschirmrand; hell oder dunkel, Foto rechts oder links (HUB OS → Seite → Seitenkopf). Orange nur als Knoten an der Dachzeile. Auf dem Handy: Foto oben mit eigenem Ausschnitt, darunter der Text. */ .kopf-geteilt { --kg-text: #fff0; background: var(--grund); border-bottom: 1px solid var(--linie); } .kg-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(30rem, 70svh, 46rem); } .kg-bild-links .kg-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .kg-bild-links .kg-bild { order: -1; } .kg-text { display: flex; align-items: center; padding: clamp(2.5rem, 7vh, 5rem) clamp(1.75rem, 1rem + 3vw, 4.5rem) clamp(2.5rem, 7vh, 5rem) max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); } .kg-bild-links .kg-text { padding-left: clamp(1.75rem, 1rem + 3vw, 4.5rem); padding-right: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))); } .kg-innen { width: 100%; max-width: 38rem; } .kg-dach { display: flex; align-items: center; gap: .65rem; margin: 1.75rem 0 1rem; color: var(--marke-text); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; } .kg-dach::before { content: ""; width: 9px; height: 9px; background: var(--marke); flex: none; } .kopf-geteilt h1 { margin: 0 0 1.1rem; font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 650; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } .kopf-geteilt .kopf-zeile { display: block; } .kg-einleitung { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--tinte-2); max-width: 34rem; } .kg-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem; margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); } .kopf-geteilt .seitenkopf-meta { margin-top: 1.5rem; } .kg-bild { position: relative; margin: 0; overflow: hidden; background: var(--flaeche); } .kg-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); } /* dunkel */ .kg-dunkel { background: #23282e; color: var(--nacht-tinte); border-bottom: 0; } /* Anthrazit statt Schwarz (06.11.2026, Michel) – setzt sich in beiden Modi vom Seitenhintergrund ab */ .kg-dunkel h1 { color: #fff; } .kg-dunkel .kg-dach { color: #f5873d; } .kg-dunkel .kg-einleitung { color: #c3cad0; } .kg-dunkel .brotkrumen ol, .kg-dunkel .brotkrumen a { color: #a7b0b8; } .kg-dunkel .brotkrumen [aria-current] { color: #f2f4f6; } .kg-dunkel .seitenkopf-meta { color: #9aa3ab; } .kg-dunkel .knopf-haupt { background: #f07a2e; color: #0d1013; } .kg-dunkel .knopf-haupt:is(:hover, :focus-visible) { background: #fff; color: #0d1013; } .kg-dunkel .knopf-glas:is(:hover, :focus-visible) { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; } .kg-dunkel .knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .kg-dunkel .kg-bild { background: var(--nacht-2); } @media (max-width: 860px) { .kg-raster, .kg-bild-links .kg-raster { grid-template-columns: minmax(0, 1fr); min-height: 0; } .kg-bild, .kg-bild-links .kg-bild { order: -1; aspect-ratio: 4 / 3; max-height: 58svh; } .kg-bild img { object-position: var(--fokus-m, var(--fokus, 50% 50%)); } .kg-text, .kg-bild-links .kg-text { padding: 1.5rem var(--rand) 2.25rem; } .kg-dach { margin-top: 1.25rem; } .kg-knoepfe { flex-direction: column; align-items: stretch; } .kg-knoepfe .knopf { min-height: 52px; justify-content: center; } } @media (prefers-reduced-motion: no-preference) { /* wie auf der Startseite: Bild öffnet sich von oben und zieht sich zurück, Text kurz und ruhig */ .kg-bild img { animation: kg-bild 1s cubic-bezier(.25, .6, .3, 1) both; } .kg-innen > * { animation: kg-text 520ms cubic-bezier(.2, .7, .1, 1) both; } .kg-innen > :nth-child(2) { animation-delay: 120ms; } .kg-innen > :nth-child(3) { animation-delay: 200ms; } .kg-innen > :nth-child(4) { animation-delay: 280ms; } .kg-innen > :nth-child(n+5) { animation-delay: 360ms; } } @keyframes kg-bild { from { clip-path: inset(0 0 100% 0); transform: scale(1.08); } to { clip-path: inset(0); transform: none; } } @keyframes kg-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .seitenkopf-dach { margin: 1.25rem 0 .75rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--marke-text); } /* ── Bildkopf, kompakt (Kalender, Kontakt: Inhalt schnell erreichbar) ──────────────────────────────────────────────────────────────────────────────── */ @media (min-width: 861px) { .kopfbuehne-kompakt { min-height: clamp(26rem, 56svh, 38rem); } .kopfbuehne-kompakt .kopfbuehne-raster { padding-block: clamp(2rem, 5vh, 3.5rem); } } @media (max-width: 860px) { .kopfbuehne-kompakt .kopfbuehne-bild { aspect-ratio: 16 / 9; max-height: 44svh; } } @media (prefers-reduced-motion: no-preference) { /* Nur die kurze Einblendung – auf diesen Arbeitsseiten treibt das Bild nicht dauerhaft */ .kopfbuehne-kompakt .kopfbuehne-bild img { animation: kopfbuehne-bild 900ms cubic-bezier(.25, .6, .3, 1) both; } } /* ── Mitgliedschaft auf einer Seite (05.11.2026) ───────────────────────────────────────────────────────────── Nutzen (drei Bild-Text-Kompositionen im Wechsel), Auswahl mit Sprunglinks, Zielgruppen mit Bild, Preis und Buchung, aufklappbare Details, Schrittfolge, Vergleich zum Aufklappen. Wenig Kästen: Linien, Flächen, Bildgrößen im Wechsel. */ section.abschnitt[id] { scroll-margin-top: 72px; } /* Nutzen: drei Kompositionen, jede anders */ .hat-feature .feature + .feature { margin-top: clamp(3rem, 2rem + 4vw, 6.5rem); } .hat-feature .feature .kicker-punkt { color: var(--marke-text); } .hat-feature .feature:nth-child(1 of .feature) .feature-bild img { aspect-ratio: 16 / 10; } .hat-feature .feature:nth-child(2 of .feature) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .hat-feature .feature:nth-child(2 of .feature) .feature-bild { padding: 0 1.25rem 1.25rem 0; } .hat-feature .feature:nth-child(2 of .feature) .feature-bild img { box-shadow: 1.25rem 1.25rem 0 var(--marke); } .hat-feature .feature:nth-child(3 of .feature) .feature-text { border-left: 3px solid var(--marke); padding-left: clamp(1rem, .6rem + 1.4vw, 2rem); } .hat-feature .feature:nth-child(3 of .feature) .feature-bild img { aspect-ratio: 2 / 1; } .feature-text h2 { font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.7rem); } /* Auswahl: Sprunglinks statt Reiter */ .wahl-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--spalt); } .wahl-liste a { position: relative; display: grid; gap: .3rem; padding: 1.1rem 2.25rem 1.25rem 0; border-top: 2px solid var(--linie-stark); color: inherit; text-decoration: none; transition: border-color var(--dauer-1, .14s), color var(--dauer-1, .14s); } .wahl-liste .mono { color: var(--leise); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } .wahl-liste strong { font-size: 1.15rem; line-height: 1.25; } .wahl-liste .wahl-preis { font-weight: 650; color: var(--marke-text); } .wahl-liste .wahl-preis span { font-weight: 400; color: var(--leise); font-size: .88rem; } .wahl-liste .pfeil { position: absolute; right: .25rem; top: 1.15rem; transition: transform var(--dauer-2, .25s) var(--kurve); } .wahl-liste a:is(:hover, :focus-visible) { border-top-color: var(--marke); } .wahl-liste a:is(:hover, :focus-visible) strong { color: var(--marke-text); } .wahl-liste a:is(:hover, :focus-visible) .pfeil { transform: translateX(4px); } .wahl-liste a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; } @media (max-width: 900px) { .wahl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .wahl-liste { grid-template-columns: minmax(0, 1fr); } } /* Zielgruppen: großes Bild, darunter Preis und Buchung */ .hat-paket .spalten { align-items: start; margin-bottom: 0; } .hat-paket .spalten > .spalte:last-child { order: 0; } /* Reihenfolge wie im HUB OS (Bildseite wechselt je Abschnitt) */ .hat-paket .bildblock { margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem); } .hat-paket .bildblock img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .hat-paket .spalte > .register h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem); } .paket-buchung { border-top: 3px solid var(--marke); padding-top: 1.25rem; } .paket-buchung > .mono { margin: 0 0 .35rem; color: var(--leise); letter-spacing: .06em; } .paket-buchung .paket-betrag { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; } .paket-buchung .paket-betrag span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--leise); } .paket-buchung .preis-zusatz { margin: .3rem 0 1.25rem; font-size: .9rem; color: var(--leise); } .paket-buchung .haken { margin-bottom: 1.25rem; } .paket-buchung .paket-hinweis { margin: 0 0 1rem; font-size: .9rem; color: var(--tinte-2); } .paket-buchung-fuss { display: flex; flex-wrap: wrap; gap: .75rem; } .stil-marke .knopf-haupt { background: #14171a; color: #fff; } .stil-marke .knopf-haupt:is(:hover, :focus-visible) { background: #fff; color: #14171a; } .stil-marke .paket-buchung { border-top-color: #14171a; } .stil-marke .haken li::before { background: #14171a; } .stil-marke .bildblock img { filter: saturate(.9); } /* Zwei kompakte Mitgliedschaften nebeneinander (gleich gestaltet) */ .hat-paket .spalten.v-6-6 .zwischentitel { margin: 0 0 .75rem; font-size: var(--t-3); } .hat-paket .spalten.v-6-6 p.absatz { color: var(--tinte-2); margin-bottom: 1.5rem; } /* Überschrift, Text und Preis beider Spalten auf gleicher Höhe (05.11.2026): gemeinsame Zeilen über subgrid */ @media (min-width: 900.02px) { .hat-paket .spalten.v-6-6 { grid-template-rows: auto auto auto; row-gap: 0; } .hat-paket .spalten.v-6-6 > .spalte { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } } /* Aufklappbarer Bereich */ .aufklapp { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 0 0 1.25rem; } .aufklapp + .aufklapp { margin-top: -1.25rem; border-top: 0; } .aufklapp summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 600; } .aufklapp summary::-webkit-details-marker { display: none; } .aufklapp summary:hover { color: var(--marke-text); } .aufklapp summary:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .aufklapp-inhalt { padding: 0 0 1.1rem; color: var(--tinte-2); } .aufklapp-inhalt p { margin: 0; } /* Schrittfolge */ .schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalt); counter-reset: none; } .schritte li { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--linie-stark); } .schritte li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--marke); } .schritte .schritt-nr { display: block; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; font-weight: 650; letter-spacing: -.04em; color: var(--marke-text); margin-bottom: .75rem; } .schritte p { margin: 0; color: var(--tinte-2); } @media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } } @media (max-width: 520px) { .schritte { grid-template-columns: minmax(0, 1fr); } .schritte li { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: start; } .schritte .schritt-nr { font-size: 2.4rem; margin: 0; } } /* Vergleich zum Aufklappen */ .vergleich-klapp { border-top: 2px solid var(--linie-stark); border-bottom: 1px solid var(--linie); } .vergleich-klapp > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 650; } .vergleich-klapp > summary::-webkit-details-marker { display: none; } .vergleich-klapp > summary:hover span:first-child { color: var(--marke-text); } .vergleich-klapp > summary:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; } .vergleich-klapp .plus { width: 18px; height: 18px; } .vergleich-klapp .plus::before, .vergleich-klapp .plus::after { top: 8px; } .vergleich-inhalt { padding-bottom: 1.5rem; } .vergleich-gemeinsam { margin: 0 0 1.25rem; padding: .9rem 1.1rem; background: var(--flaeche); border-left: 3px solid var(--marke); } .vergleich-gemeinsam .mono { display: block; margin-bottom: .2rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .vergleich td:has(.ja-text) { display: table-cell; } .vergleich .ja-text { display: inline; margin-top: 0; font-size: .84rem; line-height: 1.35; color: var(--tinte-2); } .vergleich td { vertical-align: top; } .vergleich-wisch { display: none; margin: 0 0 .6rem; font-size: .75rem; color: var(--leise); } .vergleich-rahmen:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; } @media (max-width: 760px) { .vergleich-wisch { display: block; } .vergleich-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Spalten breit genug für Preise und Namen wie „Corporate/Kanzlei“ – vorher stieß „5.000 € netto“ an die Nachbarspalte (06.11.2026) */ .vergleich-rahmen .vergleich { min-width: 1010px; table-layout: fixed; } .vergleich-rahmen .vergleich thead th:first-child { width: 140px; } .vergleich-rahmen .vergleich thead th { overflow-wrap: break-word; hyphens: auto; } .vergleich-rahmen .vergleich :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 1; background: var(--grund); box-shadow: 1px 0 0 var(--linie); } } /* Beratung mit Ansprechpartner */ .hat-personen .spalte .koepfe-gross { grid-template-columns: minmax(0, 1fr); max-width: 22rem; margin: 0 0 0 auto; } .hat-personen .spalte .koepfe-gross img { filter: none; } .hat-personen .spalte .koepfe-gross strong { font-size: 1.15rem; margin-top: .35rem; } .hat-personen .spalte p.absatz { color: var(--tinte-2); } .hat-personen .spalte p.absatz a { color: var(--marke-text); } .hat-personen .spalte .knopf { margin: 0 .5rem .5rem 0; } .hat-personen .spalte > p:has(> .knopf) { display: inline-block; margin: 0; } @media (max-width: 900px) { .hat-personen .spalte .koepfe-gross { margin: 1rem 0 0; max-width: 16rem; } } /* Schnell gescrollt: bereits weit oben eintreffende Elemente ohne Übergang (darstellung.js setzt „sofort“) */ .js .auftritt.sofort, .js .auftritt.sofort * { transition: none !important; transition-delay: 0s !important; } /* ── Mitgliedschaft verdichtet (05.11.2026, zweite Runde) ───────────────────────────────────────────────── */ /* Nutzen: ein Bild, drei nummerierte Punkte */ ol.nummern { list-style: none; margin: 0; padding: 0; counter-reset: nr; display: grid; gap: 0; } ol.nummern li { counter-increment: nr; position: relative; padding: 1.1rem 0 1.15rem 3.25rem; border-top: 1px solid var(--linie); color: var(--tinte-2); line-height: 1.55; } ol.nummern li:last-child { border-bottom: 1px solid var(--linie); } ol.nummern li::before { content: counter(nr, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font: 600 .95rem/1.4 var(--mono); color: var(--marke-text); } ol.nummern li strong { display: block; margin-bottom: .2rem; font-size: 1.15rem; color: var(--tinte); } .hat-bild:not(.hat-paket) .spalten { align-items: center; } .hat-bild:not(.hat-paket) .bildblock img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Auswahl kompakter */ .wahl-liste a { padding: .85rem 2rem .95rem 0; gap: .2rem; } .wahl-liste strong { font-size: 1.05rem; } .hat-auswahl .register { margin-bottom: 1rem; } .hat-auswahl p.absatz { margin: 0 0 1.25rem; } /* Zielgruppen: Bild flacher, Leistungen zweispaltig, wenig Leerraum */ .hat-paket .bildblock img { aspect-ratio: 3 / 2; } .hat-paket .spalte > .bildblock:last-child { margin-bottom: 0; } .hat-paket .spalte > p.gross { margin-bottom: 1.5rem; } .paket-buchung .haken { gap: 0 1.5rem; } .paket-buchung .haken li { padding: .55rem 0 .55rem 1.4rem; font-size: .95rem; } .paket-buchung .haken li::before { top: .95rem; width: 8px; height: 8px; } @media (min-width: 1100px) { .paket-buchung .haken { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .paket-buchung .preis-zusatz { margin-bottom: .9rem; } .paket-buchung + .aufklapp, .paket-buchung-fuss + * { margin-top: 1.25rem; } .paket-betrag-anfrage { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; margin-bottom: .9rem !important; } .paket-betrag-anfrage span { display: block; font-size: .95rem; } .hat-paket .spalte > .aufklapp:first-of-type { margin-top: 1.25rem; } /* Zwei vergünstigte Mitgliedschaften: Preise einzeln, Leistungen einmal */ .paket-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--spalt); align-items: start; margin-bottom: 1.5rem; } .paar-preis { border-top: 3px solid var(--marke); padding-top: 1.1rem; } .paar-preis > .mono, .paar-leistungen > .mono { margin: 0 0 .35rem; color: var(--leise); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } .paar-preis h3 { margin: 0 0 .6rem; font-size: 1.2rem; line-height: 1.25; } .paar-preis .paket-betrag { margin: 0; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; } .paar-preis .paket-betrag span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--leise); } .paar-preis .preis-zusatz { margin: .3rem 0 1rem; font-size: .9rem; color: var(--leise); } .paar-leistungen { border-top: 1px solid var(--linie-stark); padding-top: 1.1rem; } .paar-leistungen .haken { margin: 0; } .paar-leistungen .haken li { padding: .5rem 0 .5rem 1.4rem; font-size: .95rem; } .paar-leistungen .haken li::before { top: .9rem; width: 8px; height: 8px; } @media (max-width: 900px) { .paket-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .paar-leistungen { grid-column: 1 / -1; } } @media (max-width: 560px) { .paket-paar { grid-template-columns: minmax(0, 1fr); } } /* Strategische Partnerschaft: Logos als ruhige Reihe */ .stil-marke .logowand { margin-top: 1.5rem; } .stil-marke .logowand .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .stil-marke .logowand .logos li { min-height: 72px; padding: .75rem 1rem; } .stil-marke .logowand .logos img { max-height: 30px; } @media (max-width: 560px) { .stil-marke .logowand .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Ablauf und Vergleich in einem Abschnitt */ .schritte + .vergleich-klapp, .hat-vergleich .vergleich-klapp { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); } .vergleich-klapp > summary { padding: 1.1rem 0; } .schritte .schritt-nr { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3.2rem); margin-bottom: .5rem; } .schritte li { padding-top: 1rem; } /* Beratung kompakter */ .hat-personen .spalte .koepfe-gross { max-width: 18rem; } /* Zielgruppen: Das Bild füllt die Höhe der Nachbarspalte – keine leere Fläche unter kurzen Spalten (Desktop) */ @media (min-width: 900.02px) { .hat-paket .spalten:not(.v-6-6) { align-items: stretch; } .hat-paket .spalte:has(> .bildblock) { display: flex; flex-direction: column; } .hat-paket .spalte > .bildblock { flex: 1 1 auto; display: flex; min-height: 18rem; } .hat-paket .spalte > .bildblock .bild-rahmen { flex: 1 1 auto; display: block; position: relative; overflow: hidden; } .hat-paket .spalte > .bildblock img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } .hat-paket .spalte > .bildblock + .aufklapp { margin-top: 1.25rem; } } /* Strategische Partner: ruhige, flache Logoreihe */ .stil-marke .logowand .logos.logos-gross { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; } /* alle strategischen Partner in einer Reihe (06.11.2026) */ @media (max-width: 1000px) { .stil-marke .logowand .logos.logos-gross { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .stil-marke .logowand .logos.logos-gross li { aspect-ratio: auto; min-height: 0; height: 76px; padding: .6rem 1rem; } .stil-marke .logowand .logos.logos-gross li img { max-height: 34px !important; height: auto !important; max-width: 80%; width: auto; } @media (max-width: 560px) { .stil-marke .logowand .logos.logos-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .hat-paket .bildblock img, .hat-bild:not(.hat-paket) .bildblock img { aspect-ratio: 16 / 9; } .hat-paket .spalte > .bildblock { margin: 1.5rem 0 0; } } /* Zum Seitenanfang (05.11.2026): kantig, dunkel, orange beim Darüberfahren; nur mit Skript sichtbar */ .nach-oben { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 25; display: none; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgb(255 255 255 / .18); background: rgb(23 27 31 / .92); color: #f2f4f6; cursor: pointer; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .55); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--kurve), visibility 0s .2s, background-color .15s, color .15s; } .js .nach-oben { display: grid; } .nach-oben.an { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--kurve), visibility 0s, background-color .15s, color .15s; } .nach-oben:is(:hover, :focus-visible) { background: #f07a2e; color: #0d1013; border-color: #f07a2e; } .nach-oben:focus-visible { outline: 2px solid #f07a2e; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .nach-oben, .nach-oben.an { transition: none; transform: none; } } @media print { .nach-oben { display: none !important; } } /* „So werden Sie Mitglied“ (05.11.2026): Schritte langsam nacheinander – Linie zieht sich von links, dann Ziffer und Text */ @media (prefers-reduced-motion: no-preference) { .js .schritte li.auftritt { border-top-color: transparent; transform: translateY(12px); transition: opacity .8s var(--kurve), transform .8s var(--kurve); transition-delay: calc(var(--i, 0) * 420ms); } .js .schritte li.auftritt::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--linie-stark); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--kurve); transition-delay: calc(var(--i, 0) * 420ms); } .js .schritte li.auftritt::before { opacity: 0; transition: opacity .3s; transition-delay: calc(var(--i, 0) * 420ms); } .js .schritte li.auftritt.sichtbar { transform: none; } .js .schritte li.auftritt.sichtbar::after { transform: none; } .js .schritte li.auftritt.sichtbar::before { opacity: 1; } .js .schritte li.auftritt.sofort::after, .js .schritte li.auftritt.sofort::before { transition: none; transform: none; opacity: 1; } } /* ── Fuß (05.11.2026): immer dunkel, Auftakt mit Leitsatz und Newsletter, Seitenübersicht in sechs Spalten, Förderband, Unterzeile ── */ .fuss { --grund: var(--nacht); --flaeche: var(--nacht-2); --tinte: var(--nacht-tinte); --tinte-2: #c3cad0; --leise: var(--nacht-leise); --linie: var(--nacht-linie); --linie-stark: #f2f4f6; --marke-text: #f5873d; --feld: #6b757e; color-scheme: dark; position: relative; margin-top: var(--abschnitt); padding: clamp(3rem, 2rem + 3vw, 5rem) 0 1.5rem; background: #0a0c0f; color: var(--tinte); border-top: 1px solid var(--linie); } main:has(> section[class*="stil-"]:last-child, > .summit:last-child, > .abschluss:last-child) + .fuss { margin-top: 0; } /* endet die Seite mit einer Farbfläche: kein weißer Streifen vor dem Fuß (06.11.2026) */ .fuss::before { content: ""; position: absolute; top: -1px; left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); width: 64px; height: 3px; background: #f07a2e; } .fuss-auftakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; padding-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); border-bottom: 1px solid var(--linie); } .fuss .fuss-claim .wortmarke { display: block; width: 168px; margin: 0 0 1.75rem; color: var(--tinte); } .fuss-satz { margin: 0 0 1.75rem; max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 650; color: #fff; } .fuss-satz .akzent { color: #f07a2e; } .fuss-claim .handlungen { display: flex; flex-wrap: wrap; gap: .75rem; } .fuss .knopf-haupt { background: #f07a2e; color: #0d1013; } .fuss .knopf-haupt:is(:hover, :focus-visible) { background: #fff; color: #0d1013; text-decoration: none; } .fuss .knopf-glas { color: #fff; } .fuss .knopf-glas:is(:hover, :focus-visible) { background: rgb(255 255 255 / .1); border-color: #fff; text-decoration: none; } .fuss-newsletter h2 { margin: 0 0 .6rem; font-size: .78rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #f5873d; } .fuss-newsletter > p:not(.hilfe) { margin: 0 0 .25rem; color: var(--tinte-2); } .fuss .feld { max-width: none; background: rgb(255 255 255 / .03); } .fuss .feld input { color: #fff; } .fuss .fuss-raster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 2rem var(--spalt); padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem); } .fuss-kontakt a { overflow-wrap: anywhere; } .fuss h3 { margin: 0 0 1rem; font-size: .74rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); } .fuss h3 a { color: inherit; } .fuss h3 a:hover { color: #fff; text-decoration: none; } .fuss ul { gap: .55rem; } .fuss a { color: var(--tinte-2); text-decoration: none; transition: color .15s; } .fuss a:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; text-underline-offset: .2em; } .fuss-kontakt address { font-style: normal; color: var(--tinte-2); line-height: 1.55; margin: 0 0 .9rem; } .fuss-kontakt ul + ul { margin-top: 1rem; } .fuss-sozial { display: flex !important; gap: 1rem !important; } .fuss-foerderband { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); } .fuss .foerderung { display: flex; align-items: center; gap: clamp(1rem, .5rem + 2vw, 2.5rem); margin-block: 0; padding-block: 1.75rem; } .fuss .foerderlogo { flex: none; background: none; padding: 0; border: 0; } /* helle Fassung direkt auf dem dunklen Fuß (05.11.2026) */ .fuss .foerderlogo img { height: 40px; width: auto; } .fuss .foerderung p { margin: 0; max-width: 62rem; font-size: .86rem; line-height: 1.55; color: var(--leise); } .fuss .foerderung p a { color: var(--tinte-2); text-decoration: underline; text-underline-offset: .2em; } .fuss .unterzeile { border-top: 0; margin-top: 0; padding-top: 1.25rem; align-items: center; } .fuss-recht { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.1rem; } .fuss-recht a, .fuss .unterzeile > .urheber > a { font: 400 .8rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); } @media (max-width: 1100px) { .fuss .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .fuss-auftakt { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 640px) { .fuss .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss .foerderung { flex-direction: column; align-items: flex-start; } .fuss .foerderlogo { max-width: 100%; } .fuss .foerderlogo img { height: auto; width: 100%; max-width: 320px; } .fuss-claim .handlungen .knopf { flex: 1 1 100%; } } .fuss-sozial a { white-space: nowrap; } @media (max-width: 640px) { .fuss .fuss-kontakt { grid-column: 1 / -1; } .fuss .unterzeile { padding-bottom: 4.5rem; } /* Platz für „Zum Seitenanfang“ */ } /* Plus in aufklappbaren Zeilen dreht sich beim Darüberfahren (05.11.2026) – nur geschlossen, offen bleibt das Minus ruhig */ .plus { transition: transform .45s var(--kurve); } details:not([open]) > summary:is(:hover, :focus-visible) .plus { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .plus, .plus::before, .plus::after { transition: none; } details:not([open]) > summary:is(:hover, :focus-visible) .plus { transform: none; } } /* Rückblick einer Veranstaltung: Bericht und Fotogalerie (06.11.2026) */ .termin-rueckblick .prosa { margin-bottom: 1.5rem; } .galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .galerie li { margin: 0; } .galerie a { display: block; overflow: hidden; border-radius: 4px; background: var(--flaeche); } .galerie img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; } .galerie a:hover img { transform: scale(1.04); } .galerie a:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; } @media (max-width: 700px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .galerie-gross { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 10 12 / .94); color: #fff; } .galerie-gross::backdrop { background: rgb(0 0 0 / .6); } .galerie-gross figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 4rem 4.5rem 2rem; } .galerie-gross img { max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; } .galerie-gross figcaption { font-size: .875rem; color: #c3cad0; text-align: center; } .galerie-gross button { position: absolute; border: 0; background: rgb(255 255 255 / .08); color: #fff; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; } .galerie-gross button:hover, .galerie-gross button:focus-visible { background: #f07a2e; outline: none; } .galerie-zu { top: 1rem; right: 1rem; font-size: 1.1rem !important; } .galerie-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); } .galerie-weiter { right: 1rem; top: 50%; transform: translateY(-50%); } @media (max-width: 700px) { .galerie-gross figure { padding: 4rem .75rem 2rem; } .galerie-zurueck, .galerie-weiter { top: auto; bottom: 1rem; transform: none; } } /* Vergleich offen (06.11.2026): Tabelle direkt sichtbar, mit kräftiger Linie oben wie die aufklappbare Fassung */ .vergleich-offen { border-top: 2px solid var(--linie-stark); padding-top: 1.5rem; } /* Auswahl der Mitgliedschaften nach Zielgruppen (06.11.2026): drei gleich hohe Karten, darunter die strategische Partnerschaft als Streifen */ .wahl-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + .8vw, 1.25rem); margin-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); } .wahl-karte { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); background: var(--flaeche); border-top: 2px solid var(--linie-stark); } .wahl-karte h3 { margin: 0 0 .45rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 650; } .wahl-ziel { margin: 0 0 1.1rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); } .wahl-nutzen { margin: 0 0 1.75rem; color: var(--tinte-2); line-height: 1.55; } .wahl-optionen { list-style: none; margin: auto 0 0; padding: 0; } .wahl-optionen li { margin: 0; border-top: 1px solid var(--linie); } .wahl-optionen a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name pfeil" "preis pfeil"; align-items: center; column-gap: 1rem; padding: .95rem 0; color: var(--tinte); text-decoration: none; } .wahl-optionen strong { grid-area: name; font-weight: 600; line-height: 1.3; transition: color .16s; } .wahl-optionen .wahl-preis { grid-area: preis; margin-top: .2rem; font-size: .92rem; color: var(--tinte-2); } .wahl-optionen .wahl-preis span { color: var(--leise); } .wahl-optionen .pfeil { grid-area: pfeil; color: var(--leise); transition: transform .18s, color .16s; } .wahl-optionen a:hover strong, .wahl-optionen a:focus-visible strong { color: var(--marke-text); } .wahl-optionen a:hover .pfeil, .wahl-optionen a:focus-visible .pfeil { color: var(--marke-text); transform: translateX(3px); } .wahl-optionen a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .wahl-streifen { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.25rem, 1rem + 2vw, 3rem); margin-top: clamp(.75rem, .5rem + .8vw, 1.25rem); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); background: #1c2126; color: #fff; } .wahl-streifen h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; color: #fff; } .wahl-streifen p { margin: 0; max-width: 46rem; color: #c3cad0; line-height: 1.55; } .wahl-streifen .wahl-anfrage { margin-top: .9rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #f5873d; } .wahl-streifen .knopf { flex: none; } .wahl-streifen .knopf-haupt { background: #f07a2e; color: #0d1013; } .wahl-streifen .knopf-haupt:is(:hover, :focus-visible) { background: #fff; color: #0d1013; } .wahl-streifen .knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .wahl-streifen + .hinweis, .wahl-karten + .hinweis { margin-top: 1.25rem; } @media (max-width: 1000px) { .wahl-karten { grid-template-columns: minmax(0, 1fr); } .wahl-nutzen { margin-bottom: 1.25rem; } } @media (max-width: 700px) { .wahl-streifen { flex-direction: column; align-items: stretch; } .wahl-streifen .knopf { justify-content: center; } } /* Vergleich: Namen unten bündig über den Preisen, Preise in eigener Kopfzeile auf einer Linie (06.11.2026) */ .vergleich thead tr:first-child th { vertical-align: bottom; border-bottom: 0; padding-bottom: .35rem; } .vergleich thead .v-preise td { padding-top: 0; border-bottom: 2px solid var(--linie-stark); } .vergleich thead .v-preise span { display: block; font-size: .95rem; font-weight: 650; color: var(--tinte); white-space: nowrap; } /* Suche in den häufigen Fragen (06.11.2026) */ .faq-suche { margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); max-width: 52rem; } .faq-suche .eingabe { width: 100%; font-size: 1.05rem; padding-block: .9rem; } .faq-suche .hilfe { min-height: 1.3em; margin: .5rem 0 0; } .faq-leer { max-width: 52rem; color: var(--tinte-2); } /* Einzelpersonen (06.11.2026): Seitenkopf mit Dachzeile und Handlungen, größeres Bild, weniger Leerraum oben */ .seitenkopf-angebot { padding-top: clamp(1.25rem, .8rem + 1.5vw, 2.25rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .seitenkopf-angebot .seitenkopf-raster { align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); } .seitenkopf-angebot .seitenkopf-dach { margin: 1.25rem 0 .75rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--marke-text); } .seitenkopf-angebot h1 { margin-top: 0; text-wrap: balance; } .seitenkopf-angebot .seitenkopf-bild img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; } .seitenkopf-handlung { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem; } @media (max-width: 900px) { .seitenkopf-angebot .seitenkopf-raster { grid-template-columns: minmax(0, 1fr); } } /* Angebotskarte (Preis und Buchung, kompakt) */ .angebot-karte { padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); background: var(--flaeche); border-top: 3px solid var(--marke); } .angebot-karte .angebot-name { margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); } .angebot-karte .paket-betrag { margin: 0; } .angebot-karte .preis-zusatz { margin: .3rem 0 1.25rem; } .angebot-karte .angebot-titel { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .angebot-liste { margin: 0 0 1.5rem; font-size: .92rem; } .angebot-liste li { padding-block: .2rem; } .angebot-karte .knopf { width: 100%; justify-content: center; } .hat-paket .spalte:has(> .angebot-karte) { align-self: start; } /* Ermäßigte Mitgliedschaften: zwei gleichwertige Karten, Nachweis als Hinweis, gemeinsame Leistungen einmal */ .paar-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, .5rem + .8vw, 1.25rem); } .paar-karte { display: flex; flex-direction: column; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); background: rgb(255 255 255 / .05); border-top: 3px solid #f07a2e; } .paar-karte .mono { margin: 0 0 .5rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #f5873d; } .paar-karte h3 { margin: 0 0 .5rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.2; color: #fff; } .paar-karte .paar-ziel { margin: 0 0 1.25rem; color: #c3cad0; } .paar-karte .paket-betrag { margin: auto 0 0; color: #fff; } .paar-karte .preis-zusatz { margin: .3rem 0 1.25rem; color: #c3cad0; } .paar-karte .knopf { align-self: flex-start; } .paar-nachweis { margin: 1rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid #f07a2e; background: rgb(255 255 255 / .05); color: #c3cad0; font-size: .92rem; } .paar-nachweis strong { color: #fff; } .paar-gemeinsam { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); } .paar-gemeinsam .mono { margin: 0 0 .75rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #c3cad0; } .paar-gemeinsam ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.5rem; margin: 0; } @media (max-width: 900px) { .paar-karten, .paar-gemeinsam ul { grid-template-columns: minmax(0, 1fr); } } /* Kompakter Vergleich der Pakete einer Seite */ .vk { width: 100%; table-layout: fixed; } .vk thead th:first-child { width: 18%; } .vk thead th { font-size: .74rem; } .vk tbody th { font-weight: 600; } .vk .v-klein { display: block; margin-top: .2rem; font-size: .84rem; color: var(--leise); } .vk .v-gleich { margin: 0 0 .5rem; } .vk .v-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem 1.5rem; margin: 0; font-size: .9rem; } .vk-alle { display: inline-block; margin-top: 1rem; } /* Handy: je Merkmal untereinander, Paketname vor dem Wert – ohne seitliches Scrollen */ @media (max-width: 760px) { .vk, .vk tbody, .vk tr, .vk th, .vk td { display: block; width: 100%; } .vk thead { display: none; } .vk tbody tr { padding: .9rem 0; border-bottom: 1px solid var(--linie); } .vk tbody th, .vk tbody td { border: 0; padding: .25rem 0; } .vk tbody th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); font-family: var(--mono); } .vk td[data-paket]::before { content: attr(data-paket); display: block; font-weight: 600; color: var(--tinte); } .vk .v-liste { grid-template-columns: minmax(0, 1fr); } } /* Kompaktvergleich: Leistungen ohne Trennlinien (06.11.2026) */ .vk .v-liste li { border-bottom: 0; border-top: 0; } .vk td:not([colspan]) .v-liste { grid-template-columns: minmax(0, 1fr); } /* Unterzeilen und große Absätze deutlich kleiner (06.11.2026, Michel: „Sublines … Schriftgröße zu groß“) */ p.gross { font-size: 1rem; line-height: 1.6; } .seitenkopf .einleitung, .kopfbuehne-text { font-size: 1.05rem; line-height: 1.6; } /* Angebotskarte (06.11.2026): Punkte mittig zur Zeile, mehr Luft zum Knopf, Karte etwas tiefer (auf Höhe der Überschrift) */ .angebot-karte .angebot-liste li { padding-block: .45rem; } .angebot-karte .angebot-liste li::before { top: 50%; transform: translateY(-50%); } .angebot-karte .angebot-liste { margin-bottom: 2rem; } @media (min-width: 901px) { .hat-angebot .spalte > .angebot-karte { margin-top: 2.6rem; } } /* Stimmen: Name und Position eng zusammen, auch bei kurzem Zitat in gleich hoher Karte (06.11.2026) */ .stimme figcaption { align-content: start; gap: .15rem; } /* Untermenü: beim Scrollen schrumpfte die Leiste – das galt auch für das Untermenü, dessen Inhalt dann über die Seite ragte (06.11.2026) */ .gescrollt .kopf .nav-panel-raster, .kopf .nav-panel .nav-panel-raster { height: auto; } /* Ablauf in einer Spalte (neben einem Bild): Schritte untereinander, Nummer links (06.11.2026: „nummern untereinander“) */ .spalte .schritte { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; } .spalte .schritte li { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; align-items: start; } .spalte .schritte .schritt-nr { font-size: clamp(2rem, 1.7rem + 1vw, 2.6rem); margin: 0; } /* Knopf „Mitglied werden“ in der Kopfleiste kleiner (06.11.2026) */ @media (min-width: 521px) { .kopf .knopf { min-height: 38px; padding: 0 1rem; font-size: .88rem; } } /* Überschriften aus zwei kurzen Sätzen: je Satz eine Zeile (06.11.2026) */ .titel-zeile { display: block; } /* Concierge (Kanzleien, 06.11.2026): ruhige Schrittfolge – kleine Zahlen, keine Linien, begrenzte Zeilenlänge, Spalte mittig zum Foto */ .spalte:has(> p + ol.nummern) { align-self: center; } .spalte:has(> p + ol.nummern) h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.08; } .spalte:has(> p + ol.nummern) > p { max-width: 36rem; margin: 0 0 1.75rem; color: var(--tinte-2); } .spalte > p + ol.nummern { max-width: 36rem; gap: 1.35rem; } .spalte > p + ol.nummern li, .spalte > p + ol.nummern li:last-child { border: 0; padding: 0 0 0 3rem; } .spalte > p + ol.nummern li::before { top: .15rem; font-size: .8rem; letter-spacing: .04em; color: var(--marke-text); } .spalte > p + ol.nummern li strong { font-size: 1.02rem; margin-bottom: .25rem; } /* Kopfleiste angemeldet (Mein Hub, 06.11.2026): Nachrichten, Hinweise, Kontomenü */ .kopf-konto { display: flex; align-items: center; gap: .25rem; } .kopf-symbol { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: var(--tinte); } .kopf-symbol svg { width: 21px; height: 21px; } .kopf-symbol:hover { color: var(--marke-text); } .kopf-symbol:focus-visible, .kopf-avatar:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; } .kopf-zahl { position: absolute; top: 3px; right: 1px; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem; display: grid; place-items: center; background: var(--marke); color: var(--auf-marke); font: 600 .6rem/1 var(--mono); } .kopf-menue { position: relative; } .kopf-avatar { width: 36px; height: 36px; margin-left: .25rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--tinte); color: var(--grund); border: 0; font: 600 .78rem/1 var(--schrift); cursor: pointer; padding: 0; } .kopf-avatar img { width: 100%; height: 100%; object-fit: cover; } .kopf-menue-liste { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 15rem; display: grid; padding: .4rem; background: var(--grund); border: 1px solid var(--linie-stark); box-shadow: 0 16px 40px rgb(0 0 0 / .16); } .kopf-menue-liste p { margin: 0 0 .3rem; padding: .5rem .7rem .7rem; border-bottom: 1px solid var(--linie); } .kopf-menue-liste p strong { display: block; font-size: .92rem; } .kopf-menue-liste p small { display: block; color: var(--leise); font-size: .8rem; overflow-wrap: anywhere; } .kopf-menue-liste a, .kopf-menue-liste button { text-align: left; padding: .6rem .7rem; background: none; border: 0; font: inherit; font-size: .92rem; color: var(--tinte); text-decoration: none; cursor: pointer; } .kopf-menue-liste a:hover, .kopf-menue-liste button:hover { background: var(--flaeche); } @media (max-width: 520px) { .kopf-symbol { width: 36px; } .kopf-avatar { width: 32px; height: 32px; } } /* ── Galerie-Seite /veranstaltungen//fotos/ (06.11.2026): Fotos in ihrem Seitenverhältnis, drei Spalten, Unterschrift und Bildnachweis unter dem Foto; Großansicht mit Tastatur (darstellung.js). Feste Maße an jedem Bild – kein Springen beim Laden. */ .galerie-alle { margin: 1rem 0 0; } .galerie-kopf .einleitung { font-family: var(--mono); font-size: .85rem; letter-spacing: .03em; color: var(--leise); } .galerie-seite .galerie-bericht { max-width: 46rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); } .galerie-voll { list-style: none; margin: 0; padding: 0; columns: 3 320px; column-gap: clamp(.6rem, .4rem + .6vw, 1rem); } .galerie-voll li { break-inside: avoid; margin: 0 0 clamp(.6rem, .4rem + .6vw, 1rem); } .galerie-voll figure { margin: 0; } .galerie-voll a { display: block; overflow: hidden; background: var(--flaeche); } .galerie-voll img { display: block; width: 100%; height: auto; transition: transform .5s var(--kurve, ease); } .galerie-voll a:hover img { transform: scale(1.03); } .galerie-voll a:focus-visible { outline: 3px solid var(--marke); outline-offset: 2px; } .galerie-voll figcaption { padding: .5rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--tinte-2); } .galerie-voll figcaption span { display: block; margin-top: .15rem; font: .7rem/1.4 var(--mono); letter-spacing: .04em; color: var(--leise); } @media (prefers-reduced-motion: reduce) { .galerie-voll img { transition: none; } } /* Profilbild im Kopf mit Punkt bei Neuigkeiten (06.11.2026, öffentliche Seiten ohne Glocke und Sprechblase) */ .kopf-avatar { position: relative; } .kopf-avatar.hat-neues::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #f07a2e; box-shadow: 0 0 0 2px var(--grund); } /* Fuß (06.11.2026, Michel): Spalte „Rechtliches“ statt Kontakt; Social Media als orange Symbole, Summit-Logo in Farbe in der Unterzeile */ .fuss .fuss-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fuss-recht { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .fuss .unterzeile { align-items: center; } .fuss .unterzeile .urheber { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; } .fuss .fuss-sozial { display: flex !important; gap: .6rem !important; list-style: none; margin: 0; padding: 0; } .fuss .fuss-sozial a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #f07a2e; border: 1px solid rgb(240 122 46 / .35); transition: background .15s, color .15s, border-color .15s; } .fuss .fuss-sozial a:is(:hover, :focus-visible) { background: #f07a2e; color: #0d1013; border-color: #f07a2e; text-decoration: none; } .fuss .fuss-sozial svg { width: 1.05rem; height: 1.05rem; } .fuss .fuss-summit { display: inline-flex; align-items: center; } .fuss .fuss-summit img { display: block; height: 34px; width: auto; } .fuss .fuss-summit:is(:hover, :focus-visible) { text-decoration: none; opacity: .85; } @media (max-width: 1100px) { .fuss .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .fuss .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fuss .fuss-raster > :first-child { grid-column: auto; } .fuss-recht-spalte .fuss-recht a { font: inherit; letter-spacing: normal; text-transform: none; color: var(--tinte-2); } .fuss-recht-spalte .fuss-recht a:is(:hover, :focus-visible) { color: #fff; } .fuss .fuss-summit img { height: 44px; } /* Summit-Wortmarke vollständig im Förderband rechts (06.11.2026, Michel: „summit Logo komplett und eine Zeile höher“) */ .fuss .foerderung .fuss-summit { flex: none; margin-left: auto; padding-left: clamp(1rem, .5rem + 2vw, 2.5rem); border-left: 1px solid var(--linie); } .fuss .foerderung .fuss-summit img { height: 32px; width: auto; } @media (max-width: 900px) { .fuss .foerderung { flex-wrap: wrap; } .fuss .foerderung .fuss-summit { margin-left: 0; padding-left: 0; border-left: 0; } } /* ── 06.11.2026 abends (Michel) ────────────────────────────────────────────────────────────────────────────────────────────── Formulare: alle Felder gleich hoch, Hinweise und Fehlertexte unter dem Feld verschieben die Nachbarspalte nicht mehr */ .feld-gruppe { align-content: start; } .formular-raster { align-items: start; } input.eingabe:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select.eingabe { height: 48px; min-height: 48px; } .feld-gruppe > label, .feld-gruppe > .feldname { min-height: 1.4em; line-height: 1.4; } /* „Design by ibx“ wie auf der Summit-Website: normale Schrift, klein und leise, Logo auf der Grundlinie */ .fuss .unterzeile > .urheber > a.design-ibx { font: 400 .875rem/1.4 var(--schrift); letter-spacing: 0; text-transform: none; color: var(--leise); } .fuss .unterzeile > .urheber > a.design-ibx:is(:hover, :focus-visible) { color: var(--tinte); } .design-ibx .ibx-logo { height: .95em; vertical-align: -.06em; } /* 07.11.2026 Michel: „ibx Logo tick größer“ (vorher .76em) */ /* Galerie-Seite: zurück zu allen Fotogalerien */ .textlink-zurueck span { display: inline-block; margin-right: .35em; transition: transform .16s; } .textlink-zurueck:hover span { transform: translateX(-3px); } /* Fuß: dezente Animation „digitale Bausteine“ in der dunklen Fläche (fuss-netz.js); Inhalte liegen darüber */ .fuss { overflow: hidden; } .fuss > :not(.fuss-netz) { position: relative; z-index: 1; } .fuss-netz { position: absolute; inset: 0 0 auto 0; width: 100%; height: min(100%, 44rem); pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); } @media print { .fuss-netz { display: none; } } /* 08.11.2026 Michel: „Header Mobile, Mitglied-Schaltfläche raus“ – auf dem Handy nur EN, Login und Menü (Mitglied werden steht im Menü) */ @media (max-width: 860px) { .kopf .werkzeuge > .knopf { display: none; } } /* Umschalter Hub | Summit (08.11.2026, Benedikt/Michel): schmale Leiste über dem Kopf, gleicher Aufbau wie auf der Summit-Website. Immer dunkel; scrollt weg, der Kopf bleibt oben. */ .markenwahl { height: 36px; background: var(--nacht); color: var(--nacht-leise); border-bottom: 1px solid var(--nacht-linie); } .markenwahl .huelle { height: 100%; display: flex; align-items: stretch; gap: 1.6rem; } .markenwahl-reiter { position: relative; display: inline-flex; align-items: center; font: 400 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--nacht-leise); text-decoration: none; white-space: nowrap; transition: color .2s; } .markenwahl-reiter:hover { color: var(--nacht-tinte); } .markenwahl-reiter.ist-aktiv { color: var(--nacht-tinte); font-weight: 600; } .markenwahl-reiter.ist-aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--marke); } .markenwahl-reiter:focus-visible { outline: 2px solid var(--nacht-tinte); outline-offset: -2px; } @media (max-width: 559px) { .markenwahl-lang { display: none; } .markenwahl .huelle { gap: 1.25rem; } } /* Trennstreifen über dem Fuß weiß, wenn direkt darüber eine orange Fläche steht (Michel, 08.11.2026) – orange auf orange verschwindet */ main:has(> :is(.abschluss, .stil-marke):last-child) ~ .fuss::before, :is(.abschluss, .stil-marke) + .fuss::before { background: #fff; }