/* ========================================================================== MEMBERS GATEWAY — styles.css Business Club im Rheinland. Eigene Welt „Der Raum“: Elfenbein-Papier, Tinte, Messinggold. Gold nur als Haarlinie, Kapitälchen und Logo, nie als Fläche. Serifen (Newsreader) für Text und Überschriften, Schibsted Grotesk für Beschriftungen. Bögen als Bildrahmen (das „Gateway“), römische Kapitelziffern wie in einer gedruckten Clubbroschüre. Bewegung ruhig und präzise. ========================================================================== */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('assets/fonts/newsreader-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('assets/fonts/newsreader-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/schibsted-grotesk-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/schibsted-grotesk-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --paper: #F6F2EA; --paper-2: #EEE8DC; --paper-3: #E3DBCB; --ink: #17140F; --ink-2: #3B362E; --ink-3: #6B6458; --gold: #A9864B; --gold-text: #7D6131; --gold-2: #CDAF74; --night: #0F0D0A; --night-2: #1A1612; --night-3: #27211A; --schwarz: #0B0A08; --on-night: #EFE8DA; --on-night-2: #B9AF9E; --line: rgba(23, 20, 15, .14); --line-2: rgba(23, 20, 15, .26); --line-n: rgba(239, 232, 218, .14); --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --wrap: 1240px; --pad: clamp(20px, 4.4vw, 60px); --nav-h: 92px; --ease: cubic-bezier(.22, .7, .2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); scrollbar-gutter: stable; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--serif); font-optical-sizing: auto; font-size: 1.125rem; font-weight: 430; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } h1, h2, h3, h4, p, li, dd, dt, summary, figcaption, label, blockquote { overflow-wrap: break-word; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; } .nacht :focus-visible, .portal :focus-visible, .nav--dunkel :focus-visible, .leiste-mobil :focus-visible { outline-color: var(--gold-2); } [tabindex="-1"]:focus { outline: none; } .skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; font-family: var(--sans); font-size: .9rem; transition: top .2s; } .skip:focus { top: 16px; } .wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; } .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Typografie ---------- */ .h1, .h2, .h3 { color: var(--ink); font-family: var(--serif); font-weight: 540; letter-spacing: -.024em; text-wrap: balance; } .h1 { font-size: clamp(2.5rem, 5vw, 5.1rem); line-height: 1.02; } .h2 { font-size: clamp(2rem, 3.3vw, 3.3rem); line-height: 1.08; } .h3 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1.2; font-weight: 580; letter-spacing: -.012em; } /* Betonte Satzteile: gleiche Schrift, nur etwas leiser (keine kursiven Goldwörter) */ .h1 em, .h2 em, .h3 em { font-style: normal; font-weight: inherit; color: var(--ink-3); } .nacht .h1, .nacht .h2, .nacht .h3 { color: var(--on-night); } .nacht .h1 em, .nacht .h2 em, .nacht .h3 em { color: var(--on-night-2); } .lead { font-size: clamp(1.12rem, 1.3vw, 1.26rem); line-height: 1.55; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; } .nacht .lead { color: var(--on-night-2); } .marke { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); } .marke::before { content: ""; width: 34px; height: 1px; background: var(--gold); } .nacht .marke, .portal .marke { color: var(--gold-2); } .ziffer { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: .95rem; letter-spacing: .06em; color: var(--gold-text); } .nacht .ziffer, .portal .ziffer { color: var(--gold-2); } .klein { font-family: var(--sans); font-size: .8rem; letter-spacing: .02em; color: var(--ink-3); max-width: 70ch; } .nacht .klein { color: var(--on-night-2); } .text p + p { margin-top: 1.05em; } .text p { max-width: 62ch; text-wrap: pretty; } .zitat { font-family: var(--serif); font-style: italic; font-weight: 460; font-size: clamp(1.4rem, 2.1vw, 1.95rem); line-height: 1.3; color: var(--ink); text-wrap: balance; } .nacht .zitat { color: var(--on-night); } .zitat cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); } .nacht .zitat cite { color: var(--gold-2); } /* ---------- Knöpfe und Links ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 14px 26px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--ease); } .btn:hover { background: transparent; color: var(--ink); } .btn:hover svg { transform: translateX(4px); } .btn-hell { background: transparent; color: var(--ink); } .btn-hell:hover { background: var(--ink); color: var(--paper); } .nacht .btn { background: var(--gold-2); border-color: var(--gold-2); color: var(--night); } .nacht .btn:hover { background: transparent; color: var(--gold-2); } .nacht .btn-hell { background: transparent; color: var(--on-night); border-color: var(--line-n); } .nacht .btn-hell:hover { border-color: var(--gold-2); color: var(--gold-2); background: transparent; } .verweis { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 6px; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); } .verweis svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--ease); } .verweis:hover { background-size: 0 1px; background-position: 100% 100%; } .verweis:hover svg { transform: translateX(4px); } .nacht .verweis { color: var(--on-night); } /* ---------- Navigation ---------- */ .nav { position: fixed; inset: 0 0 auto; z-index: 200; height: var(--nav-h); transition: background-color .4s, box-shadow .4s; } .nav.is-scrolled, .menu-open .nav { background: rgba(246, 242, 234, .94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); } .nav-inner { height: 100%; width: min(100% - 2 * var(--pad), 1400px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .brand { display: inline-flex; align-items: center; min-height: 44px; } /* Logo im Kopf größer (Inhaber 15.10.2026 „kaum lesbar und geht unter“, Giuseppe 26.10.2026 „Logo ist nicht gut sichtbar“). Seit 28.10.2026 nur der Schriftzug ohne Türme (Janik): bei gleicher Leiste etwa 1,4-mal so große Schrift wie vorher (der Schriftzug war 36 px hoch). */ .brand img { height: 50px; width: auto; } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { position: relative; padding-block: 8px; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); transition: color .25s; } @media (max-width: 1300px) { .nav-links { gap: 20px; } .nav-links a { letter-spacing: .1em; } .nav-links .nav-login { padding-left: 16px; } .nav-links .nav-login::after { left: 16px; } .nav-login-lang { display: none; } } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); } .nav-links a:hover, .nav-links a[aria-current="page"], .nav-links a.is-active { color: var(--ink); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; } /* Seit 26.10.2026 auf allen Seiten ein schwarzer Balken mit heller Schrift (.nav--dunkel steht fest im HTML; Giuseppe: „Bei Einblicke geht der schwarze Balken oben weg“). Nur bei offenem Mobilmenü wird die Leiste hell wie das Menü. */ .nav--dunkel { background: rgba(11, 10, 8, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-n); } .nav--dunkel .nav-links a { color: rgba(239, 232, 218, .76); } .nav--dunkel .nav-links a:hover, .nav--dunkel .nav-links a[aria-current="page"], .nav--dunkel .nav-links a.is-active { color: var(--on-night); } .nav--dunkel .nav-links a::after { background: var(--gold-2); } .nav--dunkel .burger { color: var(--on-night); } .nav--dunkel .btn-hell { color: var(--on-night); border-color: rgba(239, 232, 218, .34); } .nav--dunkel .btn-hell:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--schwarz); } .nav--dunkel.is-scrolled { background: rgba(11, 10, 8, .97); box-shadow: 0 1px 0 var(--line-n); } .menu-open .nav.nav--dunkel { background: rgba(246, 242, 234, .94); box-shadow: 0 1px 0 var(--line); } .menu-open .nav--dunkel .burger { color: var(--ink); } .menu-open .nav--dunkel .btn-hell { color: var(--ink); border-color: var(--ink); } .nav-links .nav-login { display: inline-flex; align-items: center; gap: 7px; margin-left: -4px; padding-left: 22px; border-left: 1px solid var(--line-2); } .nav-links .nav-login::after { left: 22px; } .nav-links .nav-login svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; } .nav--dunkel .nav-links .nav-login { border-left-color: var(--line-n); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-cta { min-height: 44px; padding: 10px 18px; font-size: .74rem; } .burger { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); } .burger i { position: relative; display: block; width: 26px; height: 9px; } .burger i::before, .burger i::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .4s var(--ease); } .burger i::before { top: 0; } .burger i::after { bottom: 0; } .menu-open .burger i::before { transform: translateY(4px) rotate(45deg); } .menu-open .burger i::after { transform: translateY(-4px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 30px) var(--pad) 30px; background: var(--paper); visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility 0s .4s; overflow-y: auto; } .menu-open .menu { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); } .menu-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .menu-links a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.65rem, 6vw, 2.2rem); font-weight: 520; letter-spacing: -.015em; color: var(--ink); } .menu-links .ziffer { min-width: 2.2em; font-size: 1rem; } .menu-links small { margin-left: auto; align-self: center; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .menu-cta { margin-top: 24px; width: 100%; } .menu-mitglied { align-self: center; margin-top: 6px; } .menu-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; font-family: var(--sans); font-size: .86rem; color: var(--ink-3); } .menu-foot a { display: inline-block; padding-block: 10px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; } /* ---------- Abschnitte ---------- */ .sec { position: relative; padding-block: clamp(72px, 8vw, 120px); } .sec--sand { background: var(--paper-2); } .nacht { background: var(--night); color: var(--on-night-2); --ink: var(--on-night); --ink-2: var(--on-night-2); --ink-3: #A39A8B; --gold-text: var(--gold-2); --line: var(--line-n); --line-2: rgba(239, 232, 218, .26); --paper: var(--night); --paper-2: var(--night-2); --paper-3: var(--night-3); } .nacht--tief { background: var(--schwarz); } .nacht--zwei { background: var(--night-2); --paper: var(--night-2); --paper-2: var(--night-3); --paper-3: #322A21; } .kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 70px; align-items: end; margin-bottom: clamp(48px, 6.5vw, 90px); } .kopf-titel { display: grid; gap: 22px; } .kopf .lead { justify-self: end; } .linie { height: 1px; background: var(--line); transform-origin: left; } .nacht .linie { background: var(--line-n); } /* Bildrahmen: klassisch gerahmt, eine feine Goldlinie mit Abstand wie ein Passepartout (der Bogen bleibt dem Logo vorbehalten) */ .bogen { position: relative; isolation: isolate; aspect-ratio: 4 / 5; } .bogen-innen { position: absolute; inset: 0; overflow: hidden; background: var(--paper-3); } .bogen-innen img { width: 100%; height: 100%; object-fit: cover; } .bogen::after { content: ""; position: absolute; inset: -12px; z-index: -1; border: 1px solid rgba(169, 134, 75, .55); pointer-events: none; } .bogen--breit { aspect-ratio: 4 / 5; } .rahmen { position: relative; overflow: hidden; background: var(--paper-3); outline: 1px solid rgba(169, 134, 75, .5); outline-offset: 9px; } .nacht .rahmen { background: var(--night-2); outline-color: rgba(205, 175, 116, .38); } .rahmen img { width: 100%; height: 100%; object-fit: cover; } .bild-notiz { margin-top: 18px; font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* Kennzeichnung von KI-Bildern: klein, golden, zurückhaltend */ .ki-marke { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 6px 2px; background: rgba(11, 10, 8, .34); font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); pointer-events: none; } /* ---------- Bühne (Startseite): schwarzer Raum, rechts das Bild des Raums in einem feinen Rahmen ---------- Das Bild ist ein clip-path auf dem Raumbild (--t0 oben, --r0 rechts, --b0 unten, --l0 links). Es bewegt sich nicht; --p bleibt 0 (die Formeln stammen aus der früheren Fassung, in der sich der Bogen beim Scrollen öffnete). */ .portal { position: relative; background: var(--schwarz); --p: 0; --q: calc(1 - var(--p)); } .portal-buehne { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; --t0: calc(var(--nav-h) + 7svh); --r0: 7vw; --b0: 9svh; --l0: 58vw; --rad0: 0px; } .portal-raum { position: absolute; inset: 0; z-index: 0; background: var(--night-2); clip-path: inset(calc(var(--t0) * var(--q)) calc(var(--r0) * var(--q)) calc(var(--b0) * var(--q)) calc(var(--l0) * var(--q)) round calc(var(--rad0) * var(--q)) calc(var(--rad0) * var(--q)) 0 0); } .portal-raum > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(calc(1.04 + var(--p) * .07)); transform-origin: 70% 62%; } .portal-raum::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 8, .28) 0%, rgba(11, 10, 8, 0) 26%, rgba(11, 10, 8, 0) 50%, rgba(11, 10, 8, .9) 100%); opacity: var(--p); } .portal-raum .ki-marke { right: calc(var(--r0) * var(--q) + 12px); bottom: calc(var(--b0) * var(--q) + 12px + var(--p) * var(--ki-hoch, 150px)); } .portal-linie { position: absolute; z-index: 1; top: calc(var(--t0) - 12px); right: calc(var(--r0) - 12px); bottom: calc(var(--b0) - 12px); left: calc(var(--l0) - 12px); border: 1px solid rgba(205, 175, 116, .5); pointer-events: none; } .portal-inhalt { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; } .portal-text { width: min(52vw, 680px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: calc(var(--nav-h) * .6); opacity: calc(1 - var(--p) * 3.2); transform: translateY(calc(var(--p) * -90px)); } .portal-text.is-weg { visibility: hidden; } .portal .h1 { color: var(--on-night); max-width: 12.5ch; } .portal .h1 em { color: var(--on-night-2); } .portal .lead { color: var(--on-night-2); } .portal .lead .kurz { display: none; } .held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; } .portal .btn { background: var(--gold-2); border-color: var(--gold-2); color: var(--schwarz); } .portal .btn:hover { background: transparent; color: var(--gold-2); } .portal .verweis { color: var(--on-night); } .portal-fakten { position: relative; z-index: 2; padding: 0 0 clamp(56px, 7vw, 96px); } .eckdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(239, 232, 218, .3); } .eckdaten li { padding: 22px 28px 0 0; display: grid; gap: 6px; } .eckdaten li + li { padding-left: 28px; border-left: 1px solid var(--line-n); } .eckdaten b { font-family: var(--serif); font-weight: 560; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; color: var(--on-night); letter-spacing: -.012em; } .eckdaten span { font-family: var(--sans); font-size: .84rem; color: var(--on-night-2); } /* ---------- Der Club ---------- */ .club-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 120px); align-items: start; } .club-grid .zitat { margin-top: 40px; padding-left: 26px; border-left: 1px solid var(--gold); } .aussage { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 2.7vw, 2.6rem); line-height: 1.16; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; } .aussage em { font-style: normal; color: var(--ink-3); } /* ---------- Kodex ---------- */ .kodex-sec { position: relative; background: var(--schwarz); } .kodex-kopf { display: grid; justify-items: center; gap: 18px; text-align: center; } .kodex-kopf .h2 { max-width: 18ch; color: var(--on-night); } .kodex-bild { margin: clamp(44px, 5vw, 70px) auto 0; max-width: 1100px; aspect-ratio: 21 / 9; } .kodex-lead { margin: clamp(34px, 4vw, 54px) auto clamp(38px, 4.5vw, 60px); text-align: center; } .kodex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(239, 232, 218, .28); } .kodex li { position: relative; padding: 34px 34px 10px 0; display: grid; gap: 14px; align-content: start; } .kodex li + li { padding-left: 34px; border-left: 1px solid var(--line-n); } .kodex .ziffer { font-size: 1.4rem; } .kodex h3 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.55rem, 2.1vw, 2rem); line-height: 1.1; color: var(--on-night); } .kodex p { color: var(--on-night-2); max-width: 36ch; } /* ---------- Der Tisch ---------- */ .tisch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; } .tisch-buehne { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; margin-inline: auto; } .tisch-buehne svg { width: 100%; height: 100%; overflow: visible; } /* bei Nacht: Holz, feine Goldlinien, die Plätze mit ihren Branchen; Zeigen hebt einen Platz hervor */ .t-ring { fill: none; stroke: rgba(205, 175, 116, .38); stroke-width: .8; } .t-platte { fill: url(#t-holz); stroke: rgba(205, 175, 116, .3); stroke-width: 1; } .t-scheibe { fill: #120E0A; stroke: rgba(205, 175, 116, .45); stroke-width: .8; } .t-mitte { font-family: var(--serif); font-size: 27px; font-weight: 500; fill: var(--on-night); text-anchor: middle; } .t-mitte-klein { font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: .2em; fill: var(--gold-2); text-anchor: middle; text-transform: uppercase; } .t-platz { cursor: default; outline: none; } .t-platz rect { fill: rgba(205, 175, 116, .72); transition: fill .4s var(--ease); } .t-platz:hover rect, .t-platz:focus-visible rect, .t-platz.is-aktiv rect { fill: #F2DDAA; } .t-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; fill: var(--on-night-2); text-anchor: middle; opacity: .85; transition: opacity .4s var(--ease), fill .4s var(--ease); pointer-events: none; } .t-platz:hover + .t-label, .t-platz:focus-visible + .t-label, .t-platz.is-aktiv + .t-label { opacity: 1; fill: #F2DDAA; } .tisch-text { display: grid; gap: 26px; } .tisch-liste { display: grid; border-top: 1px solid var(--line); } .tisch-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .tisch-liste .ziffer { padding-top: 2px; } .tisch-liste b { display: block; font-weight: 600; color: var(--ink); } .nacht .tisch-liste, .nacht .tisch-liste li { border-color: var(--line-n); } .nacht .tisch-liste b { color: var(--on-night); } .tisch-sec { overflow: hidden; } /* ---------- Abende im Club: gerahmte Bilder im Raster ---------- */ .abende { position: relative; background: var(--schwarz); padding-block: clamp(84px, 10vw, 140px); } .abende-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 22px 70px; align-items: end; } .abende-rechts { display: grid; gap: 14px; justify-items: start; } .abende-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.2vw, 46px); margin-top: clamp(44px, 5vw, 70px); } .abende-bild { margin: 0; } .abende-bild .rahmen { aspect-ratio: 4 / 3; } .abende-bild figcaption { margin-top: 20px; max-width: 34ch; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); } .abende-lauf { display: none; } .tisch-zaehler { font-family: var(--sans); font-size: .8rem; letter-spacing: .06em; color: var(--ink-3); } .tisch-zaehler b { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--ink); letter-spacing: 0; } /* ---------- Mehrwert ---------- */ .werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 90px); } .werte li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px 18px; padding: 26px 0; border-top: 1px solid var(--line); } .werte .ziffer { font-size: 1.2rem; padding-top: 3px; } .werte h3 { font-family: var(--serif); font-size: 1.36rem; font-weight: 600; line-height: 1.25; color: var(--ink); } .werte p { grid-column: 2; color: var(--ink-2); } /* ---------- Aufnahme ---------- */ .weg { position: relative; padding-top: 46px; } .weg-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 60px); } .weg-faden { position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--line-2); } .weg-faden i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--f, 1)); } .weg li { position: relative; display: grid; gap: 14px; align-content: start; } .weg li::before { content: ""; position: absolute; left: 0; top: -39px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--gold); transition: background-color .5s var(--ease); } .weg li.is-an::before { background: var(--gold); } .weg .ziffer { font-size: 1.15rem; } .weg h3 { font-family: var(--serif); font-size: clamp(1.4rem, 1.8vw, 1.75rem); font-weight: 560; line-height: 1.15; color: var(--ink); } .weg p { color: var(--ink-2); max-width: 34ch; } .weg-notiz { margin-top: clamp(40px, 5vw, 64px); padding: 22px 26px; border: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 26px; align-items: center; } .weg-notiz p { font-size: 1.02rem; color: var(--ink-2); } .weg-notiz svg { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.2; } /* Kasten „Nächstes Business Meeting“ in der Bühne (Giuseppe 26.10.2026: „So wie unten“, wie der Kasten der Aufnahme mit goldenem Knopf). Ohne Daten ein Hinweis auf die Termine im Portal, mit Daten (main.js) Datum, Runden, Ort und Club. */ .termin-kasten { margin-top: clamp(26px, 3vw, 36px); padding: 22px 26px; border: 1px solid rgba(205, 175, 116, .6); background: rgba(239, 232, 218, .03); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; } .termin-kasten-zeichen { width: 30px; height: 30px; fill: none; stroke: var(--gold-2); stroke-width: 1.2; } .termin-kasten-text { display: grid; gap: 6px; min-width: 0; } .termin-kasten-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); } .termin-kasten-club { color: var(--on-night-2); letter-spacing: .12em; } .termin-kasten-club:empty { display: none; } .termin-kasten-club::before { content: "·"; margin-right: 12px; color: var(--gold-2); } .termin-kasten-wann { font-family: var(--serif); font-weight: 560; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.12; letter-spacing: -.012em; color: var(--on-night); } .termin-kasten-info { font-family: var(--sans); font-size: .9rem; color: var(--on-night-2); } .termin-kasten-wege { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 26px; } .termin-kasten.is-termin .termin-kasten-text { animation: held-ein .9s var(--ease) backwards; } /* Kodex: Knopf unter den drei Grundsätzen (Giuseppe 26.10.2026: „Besuchen Sie unsere Meetings“) */ .kodex-weiter { margin-top: clamp(42px, 5vw, 66px); display: flex; justify-content: center; } /* Liste „Die nächsten Business Meetings“ unter dem Kodex (29.10.2026), main.js füllt sie aus dem Portal */ .termine-liste { max-width: 860px; margin: clamp(42px, 5vw, 66px) auto 0; } .termine-liste[hidden] { display: none; } .termine-liste.is-an { animation: held-ein .9s var(--ease) backwards; } .termine-liste + .kodex-weiter { margin-top: clamp(30px, 3.5vw, 44px); } .termine-marke { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); } .termine-marke::before { content: ""; width: 34px; height: 1px; background: var(--gold); } .termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(205, 175, 116, .35); } .termin { border-bottom: 1px solid rgba(205, 175, 116, .35); } .termin-link { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; min-height: 64px; padding: 18px 6px; color: var(--on-night); transition: background-color .4s var(--ease); } .termin-link:hover { background: rgba(239, 232, 218, .04); } .termin-tag { display: grid; justify-items: center; line-height: 1; } .termin-tag b { font-family: var(--serif); font-weight: 500; font-size: 2rem; color: var(--gold-2); } .termin-tag span { margin-top: 6px; font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-2); } .termin-text { display: grid; gap: 5px; min-width: 0; } .termin-titel { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--on-night); overflow-wrap: anywhere; } .termin-info { font-family: var(--sans); font-size: .86rem; line-height: 1.45; color: var(--on-night-2); overflow-wrap: anywhere; } .termin-weg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night); white-space: nowrap; } .termin-weg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--ease); } .termin-link:hover .termin-weg svg { transform: translateX(4px); } .termin--mitglieder .termin-weg { color: var(--gold-2); } .termin--voll .termin-weg { color: var(--on-night-2); } @media (max-width: 640px) { .termin-link { grid-template-columns: 50px minmax(0, 1fr); gap: 6px 16px; padding: 16px 0; } .termin-tag { grid-row: span 2; align-self: start; } .termin-tag b { font-size: 1.7rem; } .termin-weg { grid-column: 2; white-space: normal; } } /* ---------- Gründer ---------- */ .gruender { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; } .gruender .bogen, .seite-kopf-grid .bogen { max-width: 420px; } .gruender-text { display: grid; gap: 24px; } .gruender-name { display: grid; gap: 4px; margin: 0; font-size: inherit; font-weight: inherit; } .gruender-name b { font-family: var(--serif); font-size: clamp(1.85rem, 2.6vw, 2.5rem); font-weight: 560; line-height: 1.05; color: var(--ink); } .gruender-name span { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .motto { font-family: var(--serif); font-style: italic; font-weight: 480; font-size: 1.25rem; color: var(--ink); } .foto-credit { margin-top: 24px; font-family: var(--sans); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); } .abende-credit { margin-top: clamp(18px, 2vw, 28px); } /* ---------- Menschen ---------- */ .mensch { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); background: var(--paper); } .mensch-bild { aspect-ratio: 1; overflow: hidden; background: var(--paper-3); } .mensch-bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); } .mensch-text { display: grid; gap: 16px; } .mensch-text b, .mensch-name { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 560; line-height: 1.1; color: var(--ink); } /* ---------- Einblicke ---------- */ .journal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); } .beitrag { position: relative; display: grid; gap: 20px; align-content: start; } .beitrag-text { display: grid; gap: 12px; align-content: start; } .beitrag-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); } .beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .beitrag:hover .beitrag-bild img { transform: scale(1.035); } .beitrag-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); } .beitrag-meta time, .beitrag-meta .lesezeit { color: var(--ink-3); font-weight: 500; } .beitrag :is(h2, h3) { font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 560; line-height: 1.22; color: var(--ink); text-wrap: balance; } .beitrag :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; } .beitrag :is(h2, h3) a:focus-visible { outline: none; } .beitrag:has(a:focus-visible) { outline: 1px solid var(--gold); outline-offset: 8px; } .beitrag p { font-size: 1rem; color: var(--ink-2); } .beitrag--gross { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(34px, 4vw, 56px); border-bottom: 1px solid var(--line); } .beitrag--gross :is(h2, h3) { font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 540; line-height: 1.14; } .beitrag--gross p { font-size: 1.08rem; } .filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 4vw, 50px); } .filter button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-2); font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); transition: background-color .3s, color .3s, border-color .3s; } .filter button:hover { border-color: var(--ink); color: var(--ink); } .filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .beitrag[hidden] { display: none; } /* ---------- Zitatband (Nacht) ---------- */ .band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(110px, 14vw, 200px); } .band-bild { position: absolute; inset: -8% 0; z-index: -1; } .band-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .band-bild picture { display: block; width: 100%; height: 100%; } /* am Telefon ein eigenes Hochformat (28.10.2026) */ .band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--night) 0%, rgba(21, 18, 14, .78) 45%, rgba(21, 18, 14, .35) 100%); } .band .zitat { max-width: 22ch; font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.12; font-weight: 500; } /* Bilder blenden ruhig ein, sobald sie ins Bild kommen (main.js setzt .is-auf) */ .js .vorhang { opacity: 0; } .js .vorhang.is-auf { opacity: 1; transition: opacity 1.2s var(--ease); } /* ---------- Schlussabschnitt: Meetings im Portal, Mitgliedschaft, Direktkontakt (kein Formular mehr) ---------- */ .buchen-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 7vw, 110px); align-items: center; } .anfrage-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: start; } .anfrage-info .naechstes { margin-top: 0; } .anfrage-neben { display: grid; gap: 26px; } .anfrage-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; margin-top: 10px; } .anfrage-bild img { width: 100%; height: 100%; object-fit: cover; opacity: .9; } .direkt { display: grid; gap: 6px; padding-top: 22px; border-top: 1px solid var(--line-n); font-family: var(--sans); font-size: .9rem; } .direkt a { display: flex; align-items: center; min-height: 44px; color: var(--on-night); font-family: var(--serif); font-size: 1.25rem; overflow-wrap: anywhere; } .direkt a:hover { color: var(--gold-2); } /* ---------- Fuß ---------- */ .fuss { background: var(--night); color: var(--on-night-2); padding: clamp(64px, 8vw, 100px) 0 34px; border-top: 1px solid var(--line-n); } .fuss-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .6fr)); gap: 40px; } .fuss-marke img { width: 290px; } .fuss-marke p { margin-top: 22px; max-width: 34ch; font-size: 1rem; } /* Profile in sozialen Netzwerken (28.10.2026): runde Goldlinie, beim Zeigen gefüllt; Trefferfläche 44 px */ .fuss-profile { display: flex; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; } .fuss-profile a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(205, 175, 116, .45); transition: background .25s ease, color .25s ease, box-shadow .25s ease; } .fuss-profile a:hover, .fuss-profile a:focus-visible { background: var(--gold-2); color: var(--night); box-shadow: inset 0 0 0 1px var(--gold-2); } .fuss-profile svg { width: 19px; height: 19px; } .fuss-nav { display: flex; flex-direction: column; gap: 2px; font-family: var(--sans); font-size: .9rem; } .fuss-nav > span { margin-bottom: 4px; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); } .fuss-nav a { padding-block: 6px; color: var(--on-night); } .fuss-nav a:hover { color: var(--gold-2); } /* Unterste Zeile: Firma, Alliance (seit 26.10.2026 hier statt als eigener Streifen, Giuseppe) und der Hinweis für Unternehmer */ .fuss-unten { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-n); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; font-family: var(--sans); font-size: .78rem; color: var(--on-night-2); } .fuss-unten > span { opacity: .8; } .fuss-unten > .fuss-gruppe { opacity: 1; display: inline-flex; align-items: center; gap: 10px; } .fuss-gruppe svg { width: 14px; height: auto; flex: none; } .fuss-gruppe a { color: var(--gold-2); border-bottom: 1px solid rgba(205, 175, 116, .4); } /* ---------- Unterseiten ---------- */ .seite-kopf { padding: calc(var(--nav-h) + clamp(50px, 8vw, 110px)) 0 clamp(56px, 7vw, 100px); background: var(--schwarz); } .nacht .pfad { color: var(--on-night-2); } .nacht .pfad a:hover { color: var(--on-night); } .nacht .bogen-innen { background: var(--night-2); } .seite-kopf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(40px, 6vw, 100px); align-items: end; } .seite-kopf .h1 { max-width: 15ch; margin-top: 24px; } .seite-kopf .lead { margin-top: 26px; } .pfad { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .pfad a:hover { color: var(--ink); } .zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .foto-breit { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); } .foto-breit img { width: 100%; height: 100%; object-fit: cover; } .haltung { display: grid; gap: 0; border-top: 1px solid var(--line-2); } .haltung li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(1.3rem, 1.8vw, 1.65rem); font-weight: 520; line-height: 1.2; color: var(--ink); } .fragen details { border-bottom: 1px solid var(--line); } .fragen details:first-child { border-top: 1px solid var(--line-2); } .fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 560; color: var(--ink); } .fragen summary::-webkit-details-marker { display: none; } .fragen summary::after { content: ""; flex: none; margin-right: 6px; width: 13px; height: 13px; border-right: 1px solid var(--gold-text); border-bottom: 1px solid var(--gold-text); transform: rotate(45deg) translate(-3px, -3px); transition: transform .4s var(--ease); } .fragen details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .fragen details p { padding: 0 50px 26px 0; color: var(--ink-2); max-width: 66ch; } .profil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); } .profil li { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-2); align-content: start; } .profil h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 580; color: var(--ink); } /* Artikel */ .artikel-kopf { padding: calc(var(--nav-h) + clamp(50px, 7vw, 100px)) 0 clamp(130px, 15vw, 220px); background: var(--schwarz); } .nacht .artikel-dek { color: var(--on-night-2); } .nacht .beitrag-meta { color: var(--gold-2); } .nacht .beitrag-meta time, .nacht .beitrag-meta .lesezeit { color: var(--on-night-2); } .artikel-kopf .h1 { font-size: clamp(2.1rem, 3.8vw, 3.5rem); max-width: 22ch; margin-top: 22px; text-wrap: balance; } .artikel-dek { margin-top: 24px; max-width: 46ch; font-family: var(--serif); font-style: italic; font-weight: 440; font-size: clamp(1.22rem, 1.9vw, 1.55rem); line-height: 1.42; color: var(--ink-2); text-wrap: pretty; } .artikel-kopf .beitrag-meta { margin-top: 28px; } .artikel-bild { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), 1100px); margin: calc(-1 * clamp(100px, 12vw, 180px)) auto 0; } .artikel-bild-rahmen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); } .artikel-bild--panorama .artikel-bild-rahmen { aspect-ratio: 1500 / 430; } .artikel-bild img { width: 100%; height: 100%; object-fit: cover; } .artikel-bild figcaption { margin-top: 12px; font-family: var(--sans); font-size: .74rem; letter-spacing: .04em; color: var(--ink-3); } /* Bildstrecke seit 28.10.2026 in 4 : 3 und zwei Spalten (vorher Banner 1500 × 430 untereinander, am Telefon auf 16 : 9 beschnitten) */ .galerie { width: min(100% - 2 * var(--pad), 1100px); margin: clamp(60px, 7vw, 100px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .galerie-kopf { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .galerie-kopf p:last-child { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); } .galerie figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); } .galerie img { width: 100%; height: 100%; object-fit: cover; } .weitere .journal { margin-top: clamp(28px, 3vw, 44px); } .artikel { width: min(100% - 2 * var(--pad), 720px); margin: clamp(40px, 6vw, 80px) auto 0; font-size: 1.2rem; line-height: 1.7; color: var(--ink-2); } .artikel > * + * { margin-top: 1.1em; } .artikel h2 { margin-top: 1.8em; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 560; line-height: 1.2; color: var(--ink); } .artikel h3 { margin-top: 1.5em; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); } .artikel blockquote { margin-block: 1.7em; padding: 4px 0 4px 26px; border-left: 1px solid var(--gold); font-family: var(--serif); font-style: italic; font-weight: 460; font-size: clamp(1.35rem, 2vw, 1.62rem); line-height: 1.42; color: var(--ink); text-wrap: pretty; } .infokasten { margin-block: 1.6em; padding: 26px 28px 28px; background: var(--paper-2); border-top: 1px solid var(--gold); font-size: 1.05rem; } .infokasten > * + * { margin-top: .55em; } .infokasten-titel { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); } .artikel .artikel-weiter a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .95rem; font-weight: 600; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; padding-block: 6px; overflow-wrap: anywhere; } .artikel-weiter svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; } .artikel ul { list-style: none; display: grid; gap: .5em; } .artikel ul li { position: relative; padding-left: 22px; } .artikel ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold); } .artikel ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: .5em; } .artikel a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .artikel figure img { width: 100%; height: auto; } .artikel figcaption { margin-top: 8px; font-family: var(--sans); font-size: .78rem; color: var(--ink-3); } .artikel > p:first-of-type::first-letter { float: left; margin: .08em .1em 0 0; font-size: 3.6em; line-height: .82; font-weight: 520; color: var(--gold-text); } .artikel-schluss { width: min(100% - 2 * var(--pad), 720px); margin: clamp(50px, 6vw, 80px) auto 0; padding: clamp(26px, 3.6vw, 42px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; background: var(--paper-2); outline: 1px solid rgba(169, 134, 75, .5); outline-offset: -9px; } .artikel-schluss .h3 { max-width: 22ch; } .artikel-schluss > p:not(.marke) { max-width: 58ch; color: var(--ink-2); } .artikel-schluss .held-aktionen { margin-top: 6px; } .artikel-fuss { width: min(100% - 2 * var(--pad), 720px); margin: clamp(40px, 5vw, 60px) auto 0; padding-top: 26px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; } /* Recht, 404 */ .recht { padding: calc(var(--nav-h) + 70px) 0 110px; } .recht .wrap { max-width: 820px; } .recht h1 { margin-top: 18px; font-family: var(--serif); font-weight: 540; font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.05; color: var(--ink); } .recht h2 { margin-top: 40px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); } .recht p { margin-top: 12px; } .recht a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .recht-entwurf { margin-top: 20px; display: inline-block; padding: 8px 14px; border: 1px solid var(--gold); font-family: var(--sans); font-size: .78rem; color: var(--gold-text); } .nichts { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--pad) 60px; } .nichts .bogen { width: 160px; margin: 0 auto 34px; aspect-ratio: 2 / 3; } .nichts .bogen-innen { border-radius: 50% 50% 0 0 / 33.34% 33.34% 0 0; } .nichts .bogen::after { display: none; } .nichts .bogen-innen { background: var(--paper-2); } .nichts h1 { font-family: var(--serif); font-weight: 540; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; color: var(--ink); } .nichts p { margin: 16px auto 30px; max-width: 40ch; } .nichts .nichts-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; max-width: none; margin: 28px auto 0; } /* ---------- Mitgliederwand ---------- Logos der Mitglieder, die ihr Einverständnis gegeben haben (Quelle: Members Hub, main.js wand()). Der Abschnitt hat im HTML das Attribut hidden und bleibt unsichtbar, bis Logos da sind. Feste Kachelgrößen: nichts springt, wenn die Bilder nachladen. Die Logos stehen grau und dezent im Elfenbein, beim Zeigen in Farbe. mix-blend-mode: multiply lässt die weiße Fläche von JPG- und PNG-Logos verschwinden. Dafür darf zwischen Bild und Seite keine eigene Ebene liegen: an den Kacheln kein opacity, transform oder filter, nur am Bild. Eingeblendet wird erst, wenn der Abschnitt ins Bild kommt (main.js setzt .is-an) und das Logo geladen ist (.is-da an der Kachel). */ .wand[hidden], .wand [hidden] { display: none; } .wand .kopf > :not(.verweis), .wand-hinweis { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .wand.is-an .kopf > :not(.verweis), .wand.is-an .wand-hinweis { opacity: 1; transform: none; } .wand.is-an .kopf > p { transition-delay: .12s; } .wand.is-an .wand-hinweis { transition-delay: .3s; } .wand-liste { --luecke: clamp(10px, 1.4vw, 18px); --spalten: 2; --hoehe: clamp(88px, 10.5vw, 128px); display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: var(--luecke); } .wand-liste li { position: relative; display: flex; align-items: center; justify-content: center; height: var(--hoehe); padding: clamp(14px, 1.8vw, 24px) clamp(18px, 2.4vw, 32px); border: 1px solid transparent; transition: border-color .8s var(--ease); } .wand-liste li.is-da { border-color: var(--line); } .wand-liste img { width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 0; filter: grayscale(1) opacity(.8); mix-blend-mode: multiply; transition: filter .6s var(--ease); } .wand.is-an .wand-liste li.is-da img { opacity: 1; animation: wand-ein 1s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 70ms); } @keyframes wand-ein { from { opacity: 0; transform: translateY(12px); } } .wand-liste li.is-da:hover { border-color: var(--gold); } .wand-liste li:hover img { filter: none; } .wand-hinweis { margin-top: clamp(22px, 2.6vw, 34px); } @media (min-width: 600px) { .wand-liste { --spalten: 3; } } @media (min-width: 860px) { .wand-liste { --spalten: 4; } } @media (min-width: 1100px) { .wand-liste { --spalten: 5; } } /* Teaser auf der Startseite: kleiner, höchstens sechs Kacheln (2 × 3, 3 × 2, 6 × 1) und ein Verweis auf die volle Wand */ .wand--teaser { padding-block: clamp(60px, 7vw, 100px); } .wand--teaser .kopf { margin-bottom: clamp(30px, 3.6vw, 48px); } .wand--teaser .h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); } .wand--teaser .kopf .verweis { justify-self: end; } .wand--teaser .wand-liste { --spalten: 2; --hoehe: clamp(76px, 8vw, 104px); } @media (min-width: 600px) { .wand--teaser .wand-liste { --spalten: 3; } } @media (min-width: 1000px) { .wand--teaser .wand-liste { --spalten: 6; } } @media (max-width: 960px) { .wand--teaser .kopf .verweis { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .wand-liste img { animation: none !important; } .wand .kopf > p, .wand-hinweis { transition-delay: 0s !important; } } /* ---------- Einblenden ---------- Die Klasse js setzt das Skript im Kopf, mg setzt main.js beim Start. Bleibt main.js aus (Funkloch, Blocker, App-Browser), zeigt ein Notfall nach 2,5 s alles, was wartet. Die Bühne und die Köpfe der Unterseiten warten nie auf main.js. */ .js .rv { opacity: 0; transform: translateY(18px); } .js .split:not(h1) { opacity: 0; } .js .rv, .js .split:not(h1), .js .vorhang { animation: notfall 0s 2.5s forwards; } .mg .rv, .mg .split, .mg .vorhang { animation: none; } @keyframes notfall { to { opacity: 1; transform: none; visibility: visible; } } .zm-mask { padding-bottom: .12em; margin-bottom: -.12em; } /* ---------- Responsiv ---------- */ @media (max-width: 1120px) { .nav-links { display: none; } .burger { display: inline-flex; } .fuss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss-marke { grid-column: 1 / -1; } } @media (max-width: 960px) { .kopf, .club-grid, .tisch-grid, .gruender, .buchen-grid, .seite-kopf-grid, .zwei, .abende-kopf { grid-template-columns: minmax(0, 1fr); } .abende-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kopf .lead { justify-self: start; } .journal, .profil { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beitrag--gross { grid-template-columns: minmax(0, 1fr); gap: 20px; } .werte { grid-template-columns: minmax(0, 1fr); } .gruender .bogen { max-width: 340px; } .mensch { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } } @media (max-width: 760px) { /* Bühne: Text oben, das gerahmte Bild darunter (main.js setzt --t0 nach der Texthöhe) */ .portal-buehne { --t0: max(52svh, calc(var(--nav-h) + 350px)); --l0: 8vw; --r0: 8vw; --b0: 5svh; --rad0: 0px; min-height: 600px; } .portal-inhalt { align-items: flex-start; } .portal-text { width: 100%; gap: 18px; padding-top: calc(var(--nav-h) + 22px); } .portal .lead .lang { display: none; } .portal .lead .kurz { display: inline; } .portal .held-aktionen { gap: 6px 24px; } .kodex, .weg-liste, .eckdaten { grid-template-columns: minmax(0, 1fr); } .kodex li, .kodex li + li { padding: 26px 0 8px; border-left: 0; border-top: 1px solid var(--line-n); } .kodex li:first-child { border-top: 0; } .eckdaten li, .eckdaten li + li { padding: 14px 0 12px; border-left: 0; border-bottom: 1px solid var(--line-n); } .weg { padding-top: 0; padding-left: 34px; } .weg-liste { gap: 34px; } .weg-faden { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; } .weg-faden i { transform-origin: top; transform: scaleY(var(--f, 1)); } .weg li::before { left: -34px; top: 6px; } .weg-notiz { grid-template-columns: auto minmax(0, 1fr); } .weg-notiz .btn { grid-column: 1 / -1; } .termin-kasten { grid-template-columns: auto minmax(0, 1fr); } .termin-kasten-wege { grid-column: 1 / -1; justify-content: flex-start; } .journal, .profil { grid-template-columns: minmax(0, 1fr); } /* Telefon: die Bilder der Abende als wischbare Reihe (Platz für die Rahmenlinie oben und an den Seiten) */ .abende-raster { display: flex; gap: 26px; width: 100%; margin-inline: 0; padding: 12px var(--pad) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } .abende-bild { flex: none; width: 78vw; scroll-snap-align: start; } .kodex-bild { aspect-ratio: 4 / 3; } .artikel-bild--panorama .artikel-bild-rahmen { aspect-ratio: 16 / 9; } .galerie { grid-template-columns: minmax(0, 1fr); } .infokasten { padding: 22px 20px 24px; } .mensch { grid-template-columns: minmax(0, 1fr); } .mensch-bild { max-width: 260px; } .fuss-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 560px) { :root { --nav-h: 74px; } body { font-size: 1.06rem; } .brand img { height: 38px; } .termin-kasten { padding: 18px 18px 20px; gap: 14px 16px; } .termin-kasten-marke { display: grid; gap: 4px; } .termin-kasten-club::before { content: none; } .termin-kasten-wege .btn { width: 100%; } .nav-cta { display: none; } .h1 { font-size: clamp(2.05rem, 9vw, 2.55rem); } .h2 { font-size: clamp(1.75rem, 7.4vw, 2.15rem); } .aussage { font-size: clamp(1.5rem, 6.2vw, 1.8rem); } .held-aktionen .btn { width: 100%; } /* längere Knopftexte („Meetings ansehen und buchen“) brechen auf schmalen Telefonen um, statt die Seite zu verbreitern */ .btn { white-space: normal; text-align: center; } .portal .eckdaten b { font-size: 1.35rem; } .portal .eckdaten span { font-size: .78rem; } .t-label { font-size: 16px; } .t-mitte-klein { font-size: 12px; letter-spacing: .14em; } .fragen details p { padding-right: 0; } .artikel { font-size: 1.1rem; } p, li, dd, summary { hyphens: auto; -webkit-hyphens: auto; } } /* ========================================================================== Bewegung (13.10.2026): mehr Schwung, weiter ohne festgehaltene Abschnitte, Zähler oder Wortanimation. Alles nur mit transform, opacity, clip-path und Linien; jede Bewegung läuft einmal. Ohne main.js (.mg fehlt) und bei „Bewegung reduzieren“ stehen alle Endzustände sofort. main.js setzt .is-on, sobald ein Element erscheint. ========================================================================== */ /* Bühne und Seitenköpfe: sofort lesbar, ruhige Eröffnung ohne Warten auf main.js */ .js :is(.portal-text, .seite-kopf, .artikel-kopf) .rv { opacity: 1; transform: none; animation: held-ein .8s var(--ease) backwards; } .js :is(.portal-text, .seite-kopf, .artikel-kopf) .lead.rv, .js :is(.seite-kopf, .artikel-kopf) .artikel-dek.rv { animation-delay: .1s; } .js :is(.portal-text, .seite-kopf, .artikel-kopf) .held-aktionen.rv, .js .artikel-kopf .beitrag-meta.rv { animation-delay: .2s; } .js .seite-kopf-grid > .rv { animation-delay: .15s; } @keyframes held-ein { from { opacity: 0; transform: translateY(12px); } } .js .portal-raum > img { animation: raum-atmen 8s var(--ease) both; } @keyframes raum-atmen { from { transform: scale(1.1); } to { transform: scale(1.04); } } .js .portal-linie { animation: rahmen-zeichnen 1.6s var(--ease) .2s backwards; } @keyframes rahmen-zeichnen { from { clip-path: inset(0 100% 100% 0); } to { clip-path: inset(0 0 0 0); } } .js .eckdaten { position: relative; border-top-color: transparent; } .js .eckdaten::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(239, 232, 218, .3); transform-origin: left; animation: haar-x 1.4s var(--ease) .45s backwards; } @keyframes haar-x { from { transform: scaleX(0); } } .js .portal h1 em, .js .seite-kopf h1 em, .js .artikel-kopf h1 em { animation: em-ton 1.6s var(--ease) .35s backwards; } @keyframes em-ton { from { color: var(--on-night); } } .js .seite-kopf .vorhang { opacity: 1; } .js .seite-kopf .bogen-innen img, .js .artikel-bild img { animation: bild-setzen 1.8s var(--ease) both; } @keyframes bild-setzen { from { transform: scale(1.06); } to { transform: none; } } .js .seite-kopf .bogen::after { animation: rahmen-setzen 1.4s var(--ease) .25s backwards; } @keyframes rahmen-setzen { from { inset: 0; opacity: 0; } } .js .artikel-bild.rv { opacity: 1; transform: none; animation: none; } /* Kopfleiste: Lesefortschritt als Haarlinie */ .nav-fortschritt { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform-origin: left; transform: scaleX(var(--fortschritt, 0)); opacity: 0; transition: opacity .4s; pointer-events: none; } .nav.is-scrolled .nav-fortschritt { opacity: 1; } .nav--dunkel .nav-fortschritt { background: var(--gold-2); } .menu-open .nav-fortschritt { opacity: 0; } /* Linien wachsen beim Erscheinen von links nach rechts (Kapitälchen-Linie und Listen wie in einem Kontorbuch) */ .mg .marke.rv::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .15s; } .mg .marke.rv.is-on::before { transform: none; } .mg :is(.werte, .profil, .haltung, .tisch-liste) > li { position: relative; } .mg :is(.werte, .profil) > li { border-top-color: transparent; } .mg :is(.haltung, .tisch-liste) > li { border-bottom-color: transparent; } .mg :is(.werte, .profil, .haltung, .tisch-liste) > li::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .12s; pointer-events: none; } .mg :is(.werte, .profil) > li::after { top: -1px; } .mg .profil > li::after { background: var(--line-2); } .mg :is(.haltung, .tisch-liste) > li::after { bottom: -1px; } .mg .nacht .tisch-liste > li::after { background: var(--line-n); } .mg :is(.werte, .profil, .haltung) > li.is-on::after, .mg .tisch-liste.is-on > li::after { transform: none; } .mg .tisch-liste.is-on > li:nth-child(2)::after { transition-delay: .22s; } .mg .tisch-liste.is-on > li:nth-child(3)::after { transition-delay: .32s; } /* Betonung als zweiter Gedanke: der leisere Satzteil folgt etwas später */ .mg :is(.h2, .aussage).split em { opacity: 0; color: var(--ink); transition: opacity .9s var(--ease) .38s, color 1.8s var(--ease) .5s; } .mg :is(.h2, .aussage).split.is-on em { opacity: 1; color: var(--ink-3); } .mg .nacht .h2.split em { color: var(--on-night); } .mg .nacht .h2.split.is-on em { color: var(--on-night-2); } /* Rahmen setzen sich: das Passepartout rückt auf seinen Abstand, das Bild kommt zur Ruhe */ .mg .rahmen { outline-offset: 0px; transition: outline-offset 1.4s var(--ease) .1s; } .mg .rahmen img { transform: scale(1.06); transition: transform 1.8s var(--ease); } .mg .rahmen.is-on, .mg .is-on > .rahmen { outline-offset: 9px; } .mg .rahmen.is-on img, .mg .is-on > .rahmen img { transform: none; } .mg .abende-bild.is-on:hover > .rahmen { outline-offset: 14px; } .mg .abende-bild.is-on:hover > .rahmen img { transform: scale(1.03); } .mg .sec .bogen::after { inset: 0; transition: inset 1.4s var(--ease) .2s; } .mg .sec .bogen:has(.vorhang.is-auf)::after { inset: -12px; } /* Porträts öffnen sich von oben (Gründer, Moderatorin) */ .mg .sec :is(.bogen-innen, .mensch-bild).vorhang { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); } .mg .sec :is(.bogen-innen, .mensch-bild).vorhang.is-auf { clip-path: inset(0 0 0 0); } .mg .sec :is(.bogen-innen, .mensch-bild).vorhang img { transform: scale(1.06); transition: transform 1.8s var(--ease) .1s; } .mg .sec :is(.bogen-innen, .mensch-bild).vorhang.is-auf img { transform: none; } /* Der Tisch: der Ring zeichnet sich, die Plätze setzen sich im Uhrzeigersinn, dann ein ruhiger Rundlauf (main.js) */ .mg .tisch-buehne .t-ring { stroke-dasharray: 1245; stroke-dashoffset: 1245; transition: stroke-dashoffset 2.2s var(--ease); } .mg .tisch-buehne.is-on .t-ring { stroke-dashoffset: 0; } .mg .tisch-buehne .t-platz { transform-box: fill-box; transform-origin: center; transform: scale(.6); opacity: 0; transition: transform .8s var(--ease) calc(.35s + var(--i, 0) * 70ms), opacity .8s var(--ease) calc(.35s + var(--i, 0) * 70ms); } .mg .tisch-buehne.is-on .t-platz { transform: none; opacity: 1; } .mg .tisch-buehne .t-label { opacity: 0; transition: opacity .8s var(--ease) calc(.6s + var(--i, 0) * 70ms), fill .4s var(--ease); } .mg .tisch-buehne.is-on .t-label { opacity: .85; } .mg .tisch-buehne.is-on .t-platz.is-aktiv + .t-label, .mg .tisch-buehne.is-on .t-platz:hover + .t-label { opacity: 1; transition-delay: 0s; } .mg .tisch-buehne.is-on .t-label--frei { opacity: 1; } .mg .tisch-buehne.is-rund .t-platz, .mg .tisch-buehne.is-rund .t-label { transition-delay: 0s; } /* Ihr Platz: ein freier Platz als Einladung, mit sanftem Puls alle sechs Sekunden (nur im Sichtbereich) */ .t-frei { cursor: pointer; } .t-frei:focus { outline: none; } .t-frei-flaeche { fill: transparent; stroke: none; } .t-frei:focus-visible .t-frei-flaeche { stroke: var(--gold-2); stroke-width: 1; } .t-platz--frei rect { fill: none; stroke: var(--gold-2); stroke-width: 1.2; stroke-dasharray: 4 3; transition: fill .4s var(--ease); } .t-frei:hover .t-platz--frei rect, .t-frei:focus-visible .t-platz--frei rect { fill: rgba(205, 175, 116, .3); } .t-label--frei { fill: var(--gold-2); font-weight: 700; opacity: 1; } .tisch-buehne.is-sicht .t-platz--frei rect { animation: frei-puls 6s var(--ease) 3s infinite; } @keyframes frei-puls { 0%, 80%, 100% { fill: rgba(205, 175, 116, 0); } 88% { fill: rgba(205, 175, 116, .32); } } /* Aufnahme: erreicht der Faden den dritten Punkt, setzt ein Goldring den Schlusspunkt */ .weg li::after { content: ""; position: absolute; left: 0; top: -39px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; } .weg.is-fertig li:last-child::after { animation: ring-puls 1.1s var(--ease); } @keyframes ring-puls { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } .mg .weg-notiz { transition: border-color 1.4s var(--ease) .3s; } .mg .weg.is-fertig ~ .weg-notiz { border-color: rgba(169, 134, 75, .7); } /* Nächstes Business Meeting (nur Datum und Ort, aus dem Members Portal) */ .naechstes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 22px; font-family: var(--sans); font-size: .84rem; color: var(--on-night-2); } .naechstes[hidden] { display: none; } .naechstes.is-an { animation: held-ein .9s var(--ease) backwards; } .naechstes-marke { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); } .naechstes-marke::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .naechstes-wann { font-family: var(--serif); font-size: 1.12rem; color: var(--on-night); } .naechstes-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-night); background: linear-gradient(var(--gold-2), var(--gold-2)) 0 calc(100% - 10px) / 100% 1px no-repeat; } .naechstes-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s var(--ease); } .naechstes-link:hover svg { transform: translateX(4px); } /* Formularfelder, Einblicke-Karten */ .beitrag :is(h2, h3) a { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); } .beitrag:hover :is(h2, h3) a, .beitrag:has(a:focus-visible) :is(h2, h3) a { background-size: 100% 1px; } .beitrag-lesen { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--gold-text); opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .beitrag-lesen svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; } .beitrag:hover .beitrag-lesen { opacity: 1; transform: none; } @media (hover: none) { .beitrag-lesen { display: none; } } /* Philosophie-Band: das Bild hat bereits Reserve (inset -8 %), main.js verschiebt es beim Scrollen ganz leicht */ .band-bild { will-change: transform; } /* Fuß: die Türme der Gruppe wachsen von der Grundlinie */ .mg .fuss-gruppe svg path { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 80ms); } .mg .fuss-gruppe.is-on svg path { transform: none; } /* Telefon: Leiste am unteren Rand (main.js zeigt sie nach der Bühne, nie über der Anfrage, dem Fuß oder dem offenen Menü) */ .leiste-mobil { display: none; } @media (max-width: 560px) { .leiste-mobil:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom); background: rgba(246, 242, 234, .97); border-top: 1px solid var(--gold); transform: translateY(110%); transition: transform .45s var(--ease); } .leiste-mobil.is-an { transform: none; } .menu-open .leiste-mobil { transform: translateY(110%); } .leiste-mobil a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 10px; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--ink); } .leiste-mobil .leiste-mobil-anfrage { background: var(--ink); color: var(--paper); } .leiste-mobil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; } } /* Telefon: Position in der Reihe der Abende */ @media (max-width: 760px) { .abende-lauf { display: block; position: relative; height: 1px; margin-top: 4px; background: var(--line-n); } .abende-lauf i { position: absolute; inset: 0; background: var(--gold-2); transform-origin: left; transform: scaleX(var(--lauf, .25)); transition: transform .3s var(--ease); } .weg li::after { left: -34px; top: 6px; } } /* Seitenwechsel: weich überblenden, die Kopfleiste bleibt stehen */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; animation-timing-function: var(--ease); } .nav { view-transition-name: kopfleiste; } } /* ---------- Weniger Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---------- Unternehmensgruppe (Modul aus Webseiten/_gruppe, hier nur die Anpassung an diese Seite) ---------- Helle Flächen in Elfenbein und Sand, Newsreader 540 mit ruhiger Betonung (nicht kursiv), eckige Karten wie im übrigen Club. Schrift in Gold auf hellem Grund: --gold-text (5,2 : 1 auf Elfenbein, 4,8 : 1 auf Sand). Baum, Führung, Kontaktband und Leiste bleiben Nacht und Gold, das Gesicht der Gruppe. */ .gr, .gr-leiste { --gr-s-display: var(--serif); --gr-s-sans: var(--sans); --gr-s-display-gewicht: 540; --gr-s-display-sperrung: -.024em; --gr-s-em-stil: normal; --gr-s-flaeche: var(--paper); --gr-s-flaeche-2: var(--paper-2); --gr-s-karte: var(--paper); --gr-s-text: var(--ink); --gr-s-text-2: var(--ink-2); --gr-s-linie: var(--line); --gr-s-akzent: var(--gold-text); --gr-s-rund: 0px; --gr-s-wrap: var(--wrap); --gr-s-gutter: var(--pad); --gr-s-nav: var(--nav-h); } /* Das Modul kennt nur eine Schrift für Fließtext und Beschriftungen (--gr-s-sans). Hier ist Fließtext Newsreader wie im ganzen Club, Beschriftungen und Knöpfe bleiben Schibsted Grotesk (die setzt das Modul ausdrücklich). Newsreader hat echte Kursive für die Claims. */ body .gr { font-family: var(--serif); } .gr .gr-karte-link { font-family: var(--sans); } .gr .gr-h2 em { font-weight: inherit; } /* Fokusrahmen auf den Nacht-Bühnen in Gold wie in .nacht */ .gr-baum :focus-visible, .gr-kontakt :focus-visible, .gr-leiste :focus-visible { outline-color: var(--gold-2); } /* Sprungziele: html hat schon scroll-padding-top (Kopfleiste + 16 px); der zusätzliche Abstand des Moduls würde sich addieren */ .gr .gr-sec, .gr .gr-karte { scroll-margin-top: 0; } /* ========================================================================== Nachtfassung (14.10.2026, Wunsch des Nutzers: mehr Schwarz, echte Bilder, mehr Bewegung wie auf den anderen Gateway-Seiten). Die Startseite steht fast ganz auf Nacht (.nacht, .nacht--tief, .nacht--zwei). Neu: in der Bühne drei echte Fotos im Wechsel, der Kodex hinter zwei Flügeln, die sich öffnen, ein laufendes Band der Orte und die Abende in zwei Reihen, die beim Scrollen gegeneinander gleiten. Bei „Bewegung reduzieren“ und ohne main.js steht alles still und vollständig. ========================================================================== */ /* Bühne: sechs Fotos im Wechsel (seit 28.10.2026), jedes kommt langsam näher; eine Goldlinie zählt die Zeit bis zum nächsten */ .diashow { position: absolute; top: var(--t0); right: var(--r0); bottom: var(--b0); left: var(--l0); overflow: hidden; background: var(--night-2); } .dia { position: absolute; inset: 0; margin: 0; opacity: 0; } .dia:first-child { opacity: 1; } /* Seit 30.10.2026 lädt nur das erste Foto mit der Seite, main.js (dias) setzt die übrigen aus