/* ============================================================ LONGEVITY RESORTS — Theme (global, plain CSS) Design-Tokens · Fonts · Typografie · Frame-Hintergruende + Invert · globale Helfer (.eyebrow/.link-arrow/.btn--.section-head/…) · Header · Fullscreen-Overlay · Footer ------------------------------------------------------------ PLAIN CSS (kein .scss) — die fluide clamp(vw+rem)-Type-Scale zerbricht scssphp 1.x. Die --bs-*-Variablen werden hier autoritativ gesetzt. Block-spezifisches CSS liegt je ContentBlock (spaetere Welle), NICHT hier. */ /* ---------- Fonts (self-hosted woff2, kein Google-CDN) ---------- */ @font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:300; font-display:swap; src:url("../Fonts/cormorant-garamond-v21-latin-300.woff2") format("woff2"); } @font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:400; font-display:swap; src:url("../Fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2"); } @font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url("../Fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2"); } @font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:300; font-display:swap; src:url("../Fonts/cormorant-garamond-v21-latin-300italic.woff2") format("woff2"); } @font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:400; font-display:swap; src:url("../Fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2"); } @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:300; font-display:swap; src:url("../Fonts/hanken-grotesk-v12-latin-300.woff2") format("woff2"); } @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("../Fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2"); } @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("../Fonts/hanken-grotesk-v12-latin-500.woff2") format("woff2"); } @font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("../Fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2"); } /* ---------- Design Tokens (aus base.css der Vorlage) ---------- */ :root { /* Brand palette — Rose/Warmgrau, 1:1 aus der Referenzseite longevityresorts.com uebernommen (Stand 08/2026). Die Token-NAMEN bleiben unveraendert, damit alle CB-CSS und die plate_*-Fallbacks weiterlaufen; "bronze" ist jetzt der Rose-Ton, "forest" das Warmgrau. Diese Werte sind AUTORITATIV fuers Frontend und muessen mit Configuration/Sets/LongevityTheme/settings.yaml uebereinstimmen. */ --lr-ivory: #F7F4F2; /* bright / body-bg */ --lr-ivory-deep: #EFE9E6; /* info-Flaeche */ --lr-stone: #E4D1D0; /* heller Rose-Ton (Akzent auf Dunkel) */ --lr-bronze: #DBC3C1; /* primary / Rose — FLAECHENfarbe, nicht fuer Text */ --lr-bronze-deep: #9B736E; /* dunklere Rose-Stufe (Akzent-Text, Gradient-Mitte) */ /* Barrierefreiheit: der Rose-Ton ist eine Flaechen-, keine Textfarbe — #DBC3C1 schafft auf bright nur 1.5:1, #9B736E 3.8:1 (reicht nur fuer grosse Typo). Diese Stufe erreicht 5.4:1 (WCAG AA) und bleibt die Textfarbe fuer Eyebrows, Footer-Ueberschriften und Links in Fliesstextgroesse. Dekorative Linien und Flaechen behalten --lr-bronze / --lr-bronze-deep. */ --lr-bronze-ink: #7c5c58; --lr-charcoal: #393536; /* headlines */ --lr-forest: #393536; /* secondary-Slot → Warmgrau-Gruen */ --lr-soft-black: #3D3D3C; /* Marken-Verlauf (Vorlage: --background-gold-gradient; Name beibehalten) */ --lr-gold-gradient: linear-gradient(125deg, var(--lr-bronze) 10%, #9B736E 55%, var(--lr-bronze) 100%); /* Aliase in der Namensgebung der Vorlage — fuer 1:1 uebernommene Snippets */ --template-color-primary: var(--lr-bronze); --template-color-headlines: var(--lr-charcoal); --template-color-links: var(--lr-bronze); --background-gold-gradient: var(--lr-gold-gradient); /* Functional */ --lr-ink: #3D3D3C; --lr-ink-soft: rgba(61, 61, 60, 0.72); --lr-ink-faint: rgba(61, 61, 60, 0.48); --lr-line: rgba(61, 61, 60, 0.14); --lr-line-strong: rgba(61, 61, 60, 0.28); --lr-on-dark: #F3EFED; --lr-on-dark-soft: rgba(243, 239, 237, 0.68); --lr-line-on-dark: rgba(243, 239, 237, 0.18); /* Typography families */ --lr-font-display: "Cormorant Garamond", "Times New Roman", serif; --lr-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* Fluid type scale */ --lr-fs-eyebrow: clamp(0.68rem, 0.62rem + 0.3vw, 0.78rem); --lr-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); --lr-fs-lead: clamp(1.18rem, 1.05rem + 0.7vw, 1.5rem); --lr-fs-h4: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); --lr-fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); --lr-fs-h2: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); --lr-fs-h1: clamp(2.6rem, 1.4rem + 5vw, 5rem); --lr-fs-display: clamp(3.2rem, 1rem + 9vw, 8rem); /* Spacing / rhythm */ --lr-space-section: clamp(5rem, 4rem + 9vh, 11rem); --lr-gutter: clamp(1.4rem, 0.6rem + 4vw, 5rem); --lr-maxw: 1380px; --lr-measure: 62ch; /* Motion */ --lr-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --lr-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --lr-header-h: 120px; /* Sektions-Rhythmus: CEs OHNE Hintergrund tragen kein Frame-Innen-Padding mehr (CASE -> pt-0), der vertikale Abstand kommt aus space_before/after (frame-space-*-xxl an den Datensaetzen). Die Skala mappt hier auf einen fluiden Theme-Wert; Nachbar-Margins kollabieren. */ --frame-outer-spacing-variant-xxl: clamp(4rem, 3rem + 3vw, 6.5rem); /* ---- Bootstrap-Farbkette autoritativ auf die Marke mappen ---- (plate_bootstrap pl-bstheme.scss setzt --bs-* frueh via forceOnTop; diese Datei laedt danach und gewinnt.) */ --bs-primary: var(--lr-bronze); --bs-primary-rgb: 219, 195, 193; --bs-secondary: var(--lr-forest); --bs-secondary-rgb: 75, 82, 76; --bs-body-bg: var(--lr-ivory); --bs-body-color: var(--lr-ink); --bs-body-color-rgb: 61, 61, 60; --bs-heading-color: var(--lr-charcoal); /* PFLICHT zusaetzlich zu --bs-heading-color: plate_bootstrap erzeugt inline eine Regel `h2,.h2 { --bs-heading-color: var(--bs-h2-color, var(--bs-primary,#333)) }`. Die deklariert die Variable DIREKT auf jedem Heading — eine von :root geerbte Angabe kann dagegen nie gewinnen (Vererbung verliert immer gegen eine eigene Deklaration am Element). Der vorgesehene Hook sind die --bs-hN-color-Slots. Ohne sie faellt jede Ueberschrift auf --bs-primary zurueck: mit dem Rose-Ton #DBC3C1 waeren das 1.5:1 auf Bright — die Referenzseite setzt Ueberschriften ebenfalls in Charcoal, nicht im Akzentton. */ --bs-h1-color: var(--lr-charcoal); --bs-h2-color: var(--lr-charcoal); --bs-h3-color: var(--lr-charcoal); --bs-h4-color: var(--lr-charcoal); --bs-h5-color: var(--lr-charcoal); /* Links: --lr-bronze waere als Rose-FLAECHE auf bright nur 1.5:1 und damit praktisch unsichtbar. Die Referenzseite nutzt fuer Akzent-TEXT ebenfalls die dunklere Stufe (.eyebrow/.text-bronze/.link-arrow → --bronze-deep), deshalb hier --lr-bronze-deep (3.8:1 — AA fuer grosse Typo, darunter grenzwertig). Wer strikt WCAG AA will, setzt --lr-bronze-ink (5.4:1). */ --bs-link-color: var(--lr-bronze-deep); --bs-link-hover-color: var(--lr-bronze-ink); --bs-font-sans-serif: var(--lr-font-body); --bs-body-font-family: var(--lr-font-body); --bs-h1-font-family: var(--lr-font-display); --bs-h2-font-family: var(--lr-font-display); --bs-h3-font-family: var(--lr-font-display); --bs-h4-font-family: var(--lr-font-display); --bs-h5-font-family: var(--lr-font-display); /* ---- Frame-Breiten: das Theme mappt die Designbreiten EINMAL ---- (plate_bootstrap definiert nur Fallbacks; frame_layout schmaelert innen.) */ --frame-width-lg: var(--lr-maxw); --frame-width-xl: var(--lr-maxw); --frame-width-xxl: var(--lr-maxw); --plate-framewidth-wide-lg: var(--lr-maxw); --plate-framewidth-wide-xl: var(--lr-maxw); --plate-framewidth-wide-xxl: var(--lr-maxw); --plate-framewidth-slim-lg: 1040px; --plate-framewidth-slim-xl: 1040px; --plate-framewidth-slim-xxl: 1040px; --plate-framewidth-moreslim-lg: 880px; --plate-framewidth-moreslim-xl: 880px; --plate-framewidth-moreslim-xxl: 880px; --plate-framewidth-veryslim-lg: 680px; --plate-framewidth-veryslim-xl: 680px; --plate-framewidth-veryslim-xxl: 680px; } /* ---------- Body: Grain-Textur + Basis-Typo ---------- */ body { font-family: var(--lr-font-body); font-size: var(--lr-fs-body); line-height: 1.72; font-weight: 350; color: var(--lr-ink); background-color: var(--lr-ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* subtile Papier-Koernung */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } html { scroll-padding-top: var(--lr-header-h); } ::selection { background: var(--lr-bronze); color: var(--lr-ivory); } :focus-visible { outline: 2px solid var(--lr-bronze); outline-offset: 3px; } .frame-pretitle { display: inline-flex; align-items: center; gap: 0.85em; font-family: var(--lr-font-body); font-size: var(--lr-fs-eyebrow); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lr-bronze-ink); } .frame-pretitle:not(.eyebrow)::before { content: ""; width: 2.4rem; height: 1px; background: var(--lr-bronze); display: inline-block; } /* ---------- Headings: GENERISCHE Typo (nicht pro CE!) ---------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--lr-font-display); font-weight: 300; line-height: 1.04; letter-spacing: -0.01em; color: var(--lr-charcoal); } h1, .h1 { font-size: var(--lr-fs-h1); } h2, .h2 { font-size: var(--lr-fs-h2); } h3, .h3 { font-size: var(--lr-fs-h3); line-height: 1.12; } h4, .h4 { font-size: var(--lr-fs-h4); } h5, h6 { font-size: 1.05rem; } em, i { font-style: italic; } .lr-display, .display { font-family: var(--lr-font-display); font-weight: 300; font-size: var(--lr-fs-display); line-height: 0.98; letter-spacing: -0.015em; } .lead, .lr-lead { font-family: var(--lr-font-display); font-weight: 300; font-size: var(--lr-fs-lead); line-height: 1.4; letter-spacing: 0; color: var(--lr-ink); } /* ============================================================ FRAME-HINTERGRUENDE (randabfallend) + INVERT ============================================================ */ /* Helle Marken-Flaechen: background-color DIREKT (frame.css wertet --frame-background nur bei .frame-layout-embedded aus). */ .frame-background-ivory-deep { --frame-background: var(--lr-ivory-deep); background-color: var(--lr-ivory-deep); } .frame-background-stone { --frame-background: var(--lr-stone); background-color: var(--lr-stone); } /* Invertierende Marken-Flaechen (eigene Keys, nicht Teil der Bootstrap-Invert-Map): Hintergrund + helle Typo direkt setzen (analog theme_kov .frame-background-forest). */ .frame-background-forest { --frame-background: var(--lr-forest); background-color: var(--lr-forest); --frame-color: var(--lr-on-dark); --bs-body-color: var(--lr-on-dark); --bs-heading-color: var(--lr-on-dark); /* Die --bs-hN-color-Slots muessen mitgedreht werden, sonst gewinnt die inline erzeugte Heading-Regel wieder mit --bs-primary (siehe :root). */ --bs-h1-color: var(--lr-on-dark); --bs-h2-color: var(--lr-on-dark); --bs-h3-color: var(--lr-on-dark); --bs-h4-color: var(--lr-on-dark); --bs-h5-color: var(--lr-on-dark); color: var(--lr-on-dark); } .frame-background-dark { --frame-background: var(--lr-soft-black); background-color: var(--lr-soft-black); --frame-color: var(--lr-on-dark); --bs-body-color: var(--lr-on-dark); --bs-heading-color: var(--lr-on-dark); /* Die --bs-hN-color-Slots muessen mitgedreht werden, sonst gewinnt die inline erzeugte Heading-Regel wieder mit --bs-primary (siehe :root). */ --bs-h1-color: var(--lr-on-dark); --bs-h2-color: var(--lr-on-dark); --bs-h3-color: var(--lr-on-dark); --bs-h4-color: var(--lr-on-dark); --bs-h5-color: var(--lr-on-dark); color: var(--lr-on-dark); } .frame-background-forest h1, .frame-background-forest h2, .frame-background-forest h3, .frame-background-forest h4, .frame-background-forest h5, .frame-background-forest h6, .frame-background-dark h1, .frame-background-dark h2, .frame-background-dark h3, .frame-background-dark h4, .frame-background-dark h5, .frame-background-dark h6 { color: var(--lr-on-dark); } .frame-background-forest p, .frame-background-forest li, .frame-background-dark p, .frame-background-dark li { color: rgba(243, 239, 237, 0.9); } .frame-background-forest .eyebrow, .frame-background-dark .eyebrow { color: var(--lr-stone); } .frame-background-forest .eyebrow .idx, .frame-background-dark .eyebrow .idx { color: var(--lr-on-dark-soft); } .frame-background-forest a:not([class]), .frame-background-dark a:not([class]) { color: var(--lr-on-dark); } /* GENERISCHE Invert-Regel (Pflicht laut css-SKILL): greift fuer JEDE Settings-Farbe mit *-invert:true (Bootstrap-Slots primary/secondary/dark/darker → Frame-Klasse `-colorized`). Spezifitaet .frame.-colorized schlaegt die Theme-Heading-Regeln. */ .frame.-colorized { --frame-color: var(--lr-on-dark); --bs-body-color: var(--lr-on-dark); --bs-heading-color: var(--lr-on-dark); /* Die --bs-hN-color-Slots muessen mitgedreht werden, sonst gewinnt die inline erzeugte Heading-Regel wieder mit --bs-primary (siehe :root). */ --bs-h1-color: var(--lr-on-dark); --bs-h2-color: var(--lr-on-dark); --bs-h3-color: var(--lr-on-dark); --bs-h4-color: var(--lr-on-dark); --bs-h5-color: var(--lr-on-dark); color: var(--lr-on-dark); } .frame.-colorized h1, .frame.-colorized h2, .frame.-colorized h3, .frame.-colorized h4, .frame.-colorized h5, .frame.-colorized h6, .frame.-colorized .h1, .frame.-colorized .h2, .frame.-colorized .h3, .frame.-colorized .h4, .frame.-colorized .lead, .frame.-colorized .lr-display { color: var(--lr-on-dark); } .frame.-colorized p, .frame.-colorized li { color: rgba(243, 239, 237, 0.9); } .frame.-colorized .eyebrow { color: var(--lr-stone); } .frame.-colorized .eyebrow .idx { color: var(--lr-on-dark-soft); } .frame.-colorized a:not([class]) { color: var(--lr-on-dark); } .frame.-colorized label, .frame.-colorized .form-label, .frame.-colorized .form-check-label, .frame.-colorized legend { color: var(--lr-on-dark); } /* Token-Remap fuer invertierte Flaechen: CE- und Sektions-CSS nutzen die --lr-*-Tokens an der Verwendungsstelle — hier werden sie frame-lokal auf On-Dark-Pendants gedreht, damit JEDER Block automatisch reagiert (statt Regel fuer Regel nachzuziehen). Achtung: :root-gefrorene Aliase fremder Pakete (--plx-*, --plp-*) erreicht das nicht, die drehen ihre Namespaces selbst (siehe experts-grid.css / program-list.css). */ .frame.-colorized, .frame-background-forest, .frame-background-dark { --lr-ink: var(--lr-on-dark); --lr-charcoal: var(--lr-on-dark); --lr-ink-soft: rgba(243, 239, 237, 0.9); --lr-ink-faint: rgba(243, 239, 237, 0.72); --lr-line: var(--lr-line-on-dark); --lr-line-strong: rgba(243, 239, 237, 0.34); --lr-media-empty-bg: rgba(0, 0, 0, 0.12); } /* Akzent-Remap NUR fuer bg primary/secondary (nicht fuer den dark-Slot und nicht fuer die Marken-Frames forest/dark — dort sind Bronze-Akzente/-Buttons auf Dunkel bestehendes, abgenommenes Design): - Auf Bronze (primary) sind Bronze-Akzente unsichtbar, auf Forest-Gruen (secondary) zu schwach — deshalb auf helle Toene drehen. - --lr-forest darf NICHT im forest-Marken-Frame gedreht werden: der malt seinen HINTERGRUND aus --lr-forest auf demselben Element. Hier ist das sicher, weil primary/secondary ihre Flaeche aus --bs-primary/--bs-secondary malen (auf :root eingefroren). */ .frame-background-primary.-colorized, .frame-background-secondary.-colorized { --lr-bronze: var(--lr-ivory-deep); --lr-bronze-deep: var(--lr-ivory-deep); --lr-bronze-ink: var(--lr-ivory-deep); --lr-forest: var(--lr-on-dark); } /* Bronze (bg primary) ist deutlich heller als Forest/Dark — Stone-Akzente tragen dort nicht, deshalb auf on-dark drehen. Gilt nur fuer den primary-Slot. */ .frame-background-primary.-colorized { --lr-stone: var(--lr-on-dark); } /* Button-Paare, deren Gegenfarbe nicht aus dem Remap kommt: Fuellung wird hell, also Text auf der Fuellung dunkel halten. */ .frame.-colorized .btn--solid, .frame-background-forest .btn--solid, .frame-background-dark .btn--solid { --lr-fg: var(--lr-soft-black); } .frame.-colorized .btn--line:hover, .frame.-colorized .btn--solid:hover, .frame-background-forest .btn--line:hover, .frame-background-forest .btn--solid:hover, .frame-background-dark .btn--line:hover, .frame-background-dark .btn--solid:hover { color: var(--lr-soft-black); } /* ============================================================ GLOBALE HELFER-KLASSEN (blockuebergreifend — Vertrag fuer die CBs) ============================================================ */ .lr-container, .container--narrow { width: 100%; max-width: var(--lr-maxw); margin-inline: auto; padding-inline: var(--lr-gutter); } .container--narrow { max-width: 980px; } .hairline { height: 1px; background: var(--lr-line); border: 0; width: 100%; } .hairline.on-dark { background: var(--lr-line-on-dark); } .text-bronze { color: var(--lr-bronze-deep); } .measure-wide { max-width: 46ch; } /* Eyebrow / section label */ .eyebrow { display: inline-flex; align-items: center; gap: 0.85em; font-family: var(--lr-font-body); font-size: var(--lr-fs-eyebrow); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--lr-bronze-ink); } /* Der Abstand zum Label kommt aus dem `gap` des inline-flex .eyebrow — das generische Partial Header/PreTitle rendert .idx und Label ohne Whitespace. */ .eyebrow .idx { font-variant-numeric: tabular-nums; color: var(--lr-ink-soft); letter-spacing: 0.15em; } .eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: var(--lr-bronze); display: inline-block; } .eyebrow.is-centered { justify-content: center; } .eyebrow.on-dark { color: var(--lr-stone); } .eyebrow.on-dark .idx { color: var(--lr-on-dark-soft); } /* Text link with underline reveal + arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lr-bronze-deep); padding-bottom: 0.35em; position: relative; width: fit-content; } .link-arrow .arw { transition: transform 0.45s var(--lr-ease-out); } .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--lr-ease-out); } .link-arrow:hover::after { transform: scaleX(1); } .link-arrow:hover .arw { transform: translateX(5px); } /* Buttons (globale Theme-Varianten; RTE-Buttons bevorzugt Bootstrap-btn, s. Conventions) */ .btn--line, .btn--bronze, .btn--solid, .btn--ghost-light { --lr-bd: var(--lr-charcoal); --lr-fg: var(--lr-charcoal); position: relative; display: inline-flex; align-items: center; gap: 0.7em; padding: 1.05em 2.1em; font-family: var(--lr-font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lr-fg); border: 1px solid var(--lr-bd); border-radius: 0; overflow: hidden; transition: color 0.5s var(--lr-ease-soft); z-index: 0; } .btn--line::after, .btn--bronze::after, .btn--solid::after, .btn--ghost-light::after { content: ""; position: absolute; inset: 0; background: var(--lr-charcoal); transform: translateY(101%); transition: transform 0.55s var(--lr-ease-out); z-index: -1; } .btn--line:hover, .btn--solid:hover { color: var(--lr-ivory); } .btn--line:hover::after, .btn--solid:hover::after, .btn--bronze:hover::after, .btn--ghost-light:hover::after { transform: translateY(0); } .btn--bronze { --lr-bd: var(--lr-bronze); --lr-fg: var(--lr-bronze-deep); } .btn--bronze::after { background: var(--lr-bronze); } .btn--bronze:hover { color: var(--lr-soft-black); } .btn--solid { --lr-fg: var(--lr-ivory); background: var(--lr-charcoal); } .btn--solid::after { background: var(--lr-bronze); } .btn--solid:hover { color: var(--lr-soft-black); } .btn--ghost-light { --lr-bd: var(--lr-line-on-dark); --lr-fg: var(--lr-on-dark); } .btn--ghost-light::after { background: var(--lr-ivory); } .btn--ghost-light:hover { color: var(--lr-soft-black); } /* Shared section heading */ .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-head .sh-title { margin-top: 1.4rem; max-width: 18ch; } .section-head .sh-aside { color: var(--lr-ink-soft); max-width: 44ch; padding-bottom: 0.4rem; } .frame.-colorized .section-head .sh-aside, .frame-background-forest .section-head .sh-aside, .frame-background-dark .section-head .sh-aside { color: var(--lr-on-dark-soft); } .section-head.is-centered { grid-template-columns: 1fr; justify-items: center; text-align: center; } .section-head.is-centered .sh-title { max-width: 24ch; } @media (max-width: 800px) { .section-head { grid-template-columns: 1fr; align-items: start; } } /* Decorative section number watermark */ .sec-watermark { position: absolute; top: clamp(1.5rem, 4vh, 3rem); right: var(--lr-gutter); font-family: var(--lr-font-display); font-size: clamp(4rem, 12vw, 11rem); font-style: italic; line-height: 1; color: var(--lr-bronze); opacity: 0.10; pointer-events: none; user-select: none; z-index: 0; } /* Trust / certification strip */ .trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; /* Der Abstand ist bewusst knapper als bei den uebrigen Sektions-Elementen: vier Labels sollen in der schmalen Editorial-Spalte (container--narrow) auf EINE Zeile passen — mit dem frueheren Wert fehlten wenige Pixel und das letzte Label rutschte allein in die zweite Zeile. */ gap: 0.9rem clamp(1.2rem, 2.6vw, 2.4rem); margin-top: 3.4rem; } .trust-strip span { font-family: var(--lr-font-display); font-size: 1.15rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); } /* Trennzeichen per CSS, NICHT als eigenes : ein eigenes Element bleibt beim Umbruch allein am Zeilenende haengen („… Longevity Certified ·" / Umbruch / „Forbes Travel Guide"). Als ::before klebt es immer am folgenden Label. */ .trust-strip span + span::before { content: "·"; margin-right: 0.7em; color: rgba(255,255,255,0.45); } /* Schmale Viewports: die Leiste bricht ohnehin mehrzeilig um — dort stoeren die Trennzeichen mehr als sie gliedern. */ @media (max-width: 640px) { .trust-strip { gap: 0.6rem 1.6rem; } .trust-strip span + span::before { content: none; } } /* Image cover helper with slow zoom on reveal (atomic-inview .revealed) */ .media { overflow: hidden; position: relative; } .media img, .media video { width: 100%; height: 100%; object-fit: cover; } .media--zoom img { transition: transform 1.6s var(--lr-ease-out); transform: scale(1.06); } .media--zoom.revealed img, .revealed .media--zoom img { transform: scale(1); } /* ============================================================ HEADER (fixiert) — DropIn/Page/PageBefore → Partial Header/All Scroll-State ueber atomic-stickystate (html[stuck]). ============================================================ */ .lr-site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--lr-header-h); display: flex; align-items: center; color: var(--lr-on-dark); transition: background-color .5s var(--lr-ease-soft), color .5s var(--lr-ease-soft), box-shadow .5s var(--lr-ease-soft), height .5s var(--lr-ease-soft); } .lr-site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lr-line-on-dark); transition: background .5s var(--lr-ease-soft); } html[stuck] .lr-site-header { background: rgba(255, 255, 255, 1); -webkit-backdrop-filter: saturate(1.1) blur(14px); backdrop-filter: saturate(1.1) blur(14px); color: var(--lr-charcoal); height: 72px; } html[stuck] .lr-site-header::after { background: var(--lr-line); } /* Unterseiten (jedes Layout ausser lr_home): Der Header liegt auf dem Seitenkopf-Bild — darum schon VOR dem Scrollen heller Grund + dunkle Typo wie im Stuck-Zustand, nur schwaecher deckend. Home behaelt die volltransparente Variante auf dunklem Hero. */ html:not([stuck]) body:not(.backendlayout-lr_home) .lr-site-header { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.1) blur(10px); backdrop-filter: saturate(1.1) blur(10px); color: var(--lr-charcoal); } html:not([stuck]) body:not(.backendlayout-lr_home) .lr-site-header::after { background: var(--lr-line); } .lr-header-inner { width: 100%; max-width: 1640px; margin-inline: auto; padding-inline: var(--lr-gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; } .lr-brand { justify-self: start; display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; } /* Logo fuellt die volle Header-Hoehe (nicht-sticky 120px, sticky 72px); die HTML-Wortmarke daneben ist raus — der Schriftzug steckt im Logo-SVG. */ .lr-brand-mark { height: var(--lr-header-h); width: auto; display: block; transition: height .5s var(--lr-ease-soft); } html[stuck] .lr-brand-mark { height: 72px; } .lr-nav { justify-self: center; } .lr-nav ul { display: flex; gap: clamp(1.1rem, 1.8vw, 2.4rem); align-items: center; list-style: none; margin: 0; padding: 0; } .lr-nav-link { position: relative; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding-block: 0.4rem; color: inherit; opacity: 0.92; transition: opacity .3s; } .lr-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--lr-ease-out); } .lr-nav-link:hover { opacity: 1; } .lr-nav-link:hover::after { transform: scaleX(1); } .lr-nav-link.is-active { opacity: 1; } .lr-nav-link.is-active::after { transform: scaleX(1); background: var(--lr-bronze); } .lr-actions { justify-self: end; display: inline-flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.6rem); } .lr-actions .lr-enquire { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.85em 1.6em; border: 1px solid currentColor; color: inherit; transition: background-color .4s var(--lr-ease-soft), color .4s var(--lr-ease-soft), border-color .4s var(--lr-ease-soft); } .lr-actions .lr-enquire:hover { background: var(--lr-bronze); border-color: var(--lr-bronze); color: var(--lr-soft-black); } .lr-toggle { display: none; width: 30px; height: 18px; position: relative; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .lr-toggle span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s var(--lr-ease-out), opacity .3s; } .lr-toggle span:nth-child(1) { top: 0; } .lr-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); } .lr-toggle span:nth-child(3) { bottom: 0; } @media (max-width: 1080px) { .lr-nav { display: none; } .lr-toggle { display: block; } .lr-actions .lr-lang { display: none; } } @media (max-width: 720px) { .lr-actions .lr-enquire { display: none; } } /* ---------- Fullscreen overlay menu ---------- */ .lr-overlay { position: fixed; inset: 0; z-index: 99; background: var(--lr-soft-black); color: var(--lr-on-dark); display: grid; grid-template-rows: var(--lr-header-h) 1fr auto; opacity: 0; visibility: hidden; transition: opacity .6s var(--lr-ease-soft), visibility .6s; } body.menu-open { overflow: hidden; } body.menu-open .lr-overlay { opacity: 1; visibility: visible; } body.menu-open .lr-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body.menu-open .lr-toggle span:nth-child(2) { opacity: 0; } body.menu-open .lr-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .lr-overlay-body { align-self: center; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; padding-inline: var(--lr-gutter); max-width: 1640px; margin-inline: auto; width: 100%; } .lr-overlay-nav ul { list-style: none; margin: 0; padding: 0; counter-reset: lr-ov; } .lr-overlay-nav li { overflow: hidden; border-top: 1px solid var(--lr-line-on-dark); counter-increment: lr-ov; } .lr-overlay-nav li:last-child { border-bottom: 1px solid var(--lr-line-on-dark); } .lr-overlay-nav a { display: flex; align-items: baseline; gap: 1.2rem; padding: clamp(0.5rem, 2vh, 1.15rem) 0; font-family: var(--lr-font-display); font-weight: 300; font-size: clamp(1.8rem, 5vw, 3.2rem); line-height: 1.1; color: var(--lr-on-dark); transform: translateY(110%); transition: transform .7s var(--lr-ease-out), color .4s; } .lr-overlay-nav a::before { content: "0" counter(lr-ov); font-family: var(--lr-font-body); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--lr-bronze); transform: translateY(-0.6em); } body.menu-open .lr-overlay-nav a { transform: translateY(0); } .lr-overlay-nav a:hover, .lr-overlay-nav a.is-active { color: var(--lr-bronze); } .lr-overlay-nav li:nth-child(1) a { transition-delay: .10s; } .lr-overlay-nav li:nth-child(2) a { transition-delay: .16s; } .lr-overlay-nav li:nth-child(3) a { transition-delay: .22s; } .lr-overlay-nav li:nth-child(4) a { transition-delay: .28s; } .lr-overlay-nav li:nth-child(5) a { transition-delay: .34s; } .lr-overlay-nav li:nth-child(6) a { transition-delay: .40s; } .lr-overlay-nav li:nth-child(7) a { transition-delay: .46s; } .lr-overlay-aside { align-self: end; display: flex; flex-direction: column; gap: 2rem; padding-bottom: 0.4rem; } .lr-overlay-aside .label { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lr-bronze); margin-bottom: 0.8rem; } .lr-overlay-aside p, .lr-overlay-aside a { color: var(--lr-on-dark-soft); font-size: 0.95rem; max-width: 34ch; } .lr-overlay-aside a:hover { color: var(--lr-on-dark); } .lr-overlay-foot { padding: 1.6rem var(--lr-gutter); border-top: 1px solid var(--lr-line-on-dark); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 1640px; margin-inline: auto; width: 100%; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-on-dark-soft); } .lr-overlay-foot a:hover { color: var(--lr-bronze); } @media (max-width: 720px) { .lr-overlay-body { grid-template-columns: 1fr; gap: 2rem; } .lr-overlay-aside { display: none; } } /* ============================================================ FOOTER — DropIn/Structure/FooterAfter → Partial Footer/All ============================================================ */ /* Footer: WEISSER Grund mit dunkler Typo (Umstellung 08/2026, vorher Soft-Black). */ .lr-site-footer { background: #fff; color: var(--lr-ink); padding-top: clamp(4rem, 8vh, 7rem); } .lr-footer-inner { width: 100%; max-width: var(--lr-maxw); margin-inline: auto; padding-inline: var(--lr-gutter); } .lr-footer-top { /* 4 Spalten: Brand · Explore · Ratgeber (optional, SEO-Landingpages) · Newsletter */ display: grid; grid-template-columns: 1.5fr 0.9fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 4rem; border-bottom: 1px solid var(--lr-line); } @media (max-width: 1000px) { .lr-footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .lr-footer-top { grid-template-columns: 1fr; } } .lr-footer-brand .lr-footer-mark { height: 110px; width: auto; display: block; margin-bottom: 1.6rem; } .lr-footer-brand .lr-footer-wordmark { font-family: var(--lr-font-display); font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lr-charcoal); margin-bottom: 0.4rem; } .lr-footer-brand p { color: var(--lr-ink-soft); max-width: 32ch; font-size: 0.95rem; } .lr-footer-col h4, .lr-footer-col .lr-footer-h { font-family: var(--lr-font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; /* Akzent-Ueberschriften auf Hell: AA-sichere Ink-Stufe statt --lr-bronze (1.5:1) */ text-transform: uppercase; color: var(--lr-bronze-ink); margin-bottom: 1.4rem; } .lr-footer-col ul { list-style: none; margin: 0; padding: 0; } .lr-footer-col li { margin-bottom: 0.85rem; } .lr-footer-col a { color: var(--lr-ink-soft); font-size: 0.92rem; transition: color .3s; } .lr-footer-col a:hover { color: var(--lr-charcoal); } /* Service-Menue (Kontakt/Impressum/Datenschutz) unter dem Newsletter-Formular */ .lr-footer-service { margin-top: 1.6rem; } .lr-footer-news input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--lr-line-strong); color: var(--lr-ink); padding: 0.6em 0; margin-bottom: 0.8rem; font-family: var(--lr-font-body); } .lr-footer-news input::placeholder { color: var(--lr-ink-faint); } .lr-footer-news .link-arrow { color: var(--lr-bronze-ink); } .lr-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 2rem; font-size: 0.74rem; letter-spacing: 0.1em; color: var(--lr-ink-soft); } .lr-footer-bottom .lr-footer-legal { display: flex; gap: 1.6rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .lr-footer-bottom .lr-footer-legal a { color: var(--lr-ink-soft); } .lr-footer-bottom .lr-footer-legal a:hover { color: var(--lr-charcoal); } @media (max-width: 720px) { .lr-footer-top { grid-template-columns: 1fr 1fr; } .lr-footer-brand { grid-column: 1 / -1; } } /* Reduced motion: Overlay-Links sofort sichtbar */ @media (prefers-reduced-motion: reduce) { .lr-overlay-nav a { transform: none !important; } .media--zoom img { transform: none !important; } } /* ============================================================ Formular-Bestaetigung als Overlay (plate_forms, pl-form-async) Basis-Positionierung liefert pl-form-async.css — hier nur die Longevity-Optik ueber dessen Variablen. ============================================================ */ .pl-form-modal { --pl-form-modal-bg: var(--lr-ivory); --pl-form-modal-color: var(--lr-ink); --pl-form-modal-backdrop: rgba(26, 27, 25, 0.72); --pl-form-modal-shadow: 0 2rem 5rem rgba(26, 27, 25, 0.45); --pl-form-modal-padding: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--lr-bronze); text-align: center; } .pl-form-modal__body { font-family: var(--lr-font-display); font-size: var(--lr-fs-lead); font-weight: 300; line-height: 1.45; color: var(--lr-ink); } .pl-form-modal__body p { margin: 0; } .pl-form-modal__close { color: var(--lr-ink); } /* ============================================================ Sprachumschalter (Header + Overlay) Kompakt: es steht immer nur die ANDERE Sprache da, als Zwei-Buchstaben-Kuerzel in der Mikro-Typo der Navigation. ============================================================ */ .lr-lang { display: inline-flex; align-items: center; gap: 0.5rem; } .lr-lang__link { font-family: var(--lr-font-body); font-size: var(--lr-fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--lr-ink-soft); padding: 0.25rem 0.1rem; position: relative; transition: color 0.35s var(--lr-ease-soft); } .lr-lang__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.05rem; height: 1px; background: var(--lr-bronze); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--lr-ease-out); } .lr-lang__link:hover, .lr-lang__link:focus-visible { color: var(--lr-bronze-deep); } .lr-lang__link:hover::after, .lr-lang__link:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Mehr als eine Alternative: dezenter Trenner dazwischen. */ .lr-lang__link + .lr-lang__link::before { content: "·"; position: absolute; left: -0.4rem; color: var(--lr-ink-faint); } /* Trennstrich zum Enquire-Button — nur wenn beide da sind. */ .lr-actions .lr-lang { margin-right: 0.9rem; padding-right: 0.9rem; position: relative; } .lr-actions .lr-lang::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 0.9rem; transform: translateY(-50%); background: var(--lr-line-strong); } /* Header auf dunklem Hero (nur Home, vor dem Scrollen) — helle Typo. Auf Unterseiten und im Stuck-Zustand steht der Header auf hellem Grund, dort gelten die dunklen Basisfarben oben. */ html:not([stuck]) body.backendlayout-lr_home .lr-site-header .lr-lang__link { color: rgba(255,255,255,0.72); } html:not([stuck]) body.backendlayout-lr_home .lr-site-header .lr-lang__link:hover, html:not([stuck]) body.backendlayout-lr_home .lr-site-header .lr-lang__link:focus-visible { color: #fff; } html:not([stuck]) body.backendlayout-lr_home .lr-site-header .lr-actions .lr-lang::after { background: rgba(255,255,255,0.28); } /* Im Fullscreen-Overlay: eigene Zeile unter der Navigation. */ .lr-lang.is-overlay { margin-top: 2rem; } .lr-lang.is-overlay .lr-lang__link { color: var(--lr-on-dark-soft); font-size: 0.8rem; letter-spacing: 0.22em; } .lr-lang.is-overlay .lr-lang__link:hover, .lr-lang.is-overlay .lr-lang__link:focus-visible { color: var(--lr-on-dark); } @media (max-width: 900px) { /* Auf schmalen Viewports steckt der Umschalter im Overlay — im Header wuerde er mit Logo und Burger konkurrieren. */ .lr-actions .lr-lang { display: none; } } /* ---- Footer-Newsletter: EXT:form-Ausgabe auf die schlanke Zeile eindampfen ---- Das Formular kommt aus EXT:form (Standard-Prototyp) und bringt Labels, Wrapper und Fehlerausgabe mit. Das Label bleibt im Markup (Screenreader), wird hier aber visuell versteckt — die Zeile bleibt so schmal wie zuvor. */ .lr-footer-news__form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lr-footer-news__form .form-group, .lr-footer-news__form .input, .lr-footer-news__form fieldset { margin: 0; padding: 0; border: 0; } .lr-footer-news__form input[type="email"], .lr-footer-news input[type="email"] { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--lr-line-strong); color: var(--lr-ink); padding: 0.6em 0; margin-bottom: 0.8rem; font-family: var(--lr-font-body); font-size: 0.95rem; border-radius: 0; } .lr-footer-news__form input[type="email"]::placeholder { color: var(--lr-ink-faint); } .lr-footer-news__form input[type="email"]:focus-visible { outline-offset: 4px; } /* Der EXT:form-Submit ist ein