/*! Schloss Craheim – Designsystem 2027 | Quelltext: src/assets/css */
@layer reset, tokens, base, layout, components, sections, pages, motion, utilities;
@font-face {
font-family: 'Bricolage';
src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2-variations');
font-weight: 300 800; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Atkinson Next';
src: url('../fonts/atkinson-next-var.woff2') format('woff2-variations');
font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Atkinson Next';
src: url('../fonts/atkinson-next-var-italic.woff2') format('woff2-variations');
font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'Atkinson Next Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 92%; descent-override: 24%;
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
body { min-height: 100svh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6, li, dt, dd, blockquote, figcaption { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
}
@layer base {
html {
font-size: calc(100% * var(--text-scale));
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1.5rem);
hanging-punctuation: first last;
accent-color: var(--accent);
interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root[data-motion="reduziert"] { scroll-behavior: auto; }
body {
font-family: var(--font-text), 'Atkinson Next Fallback', sans-serif;
font-size: var(--step-0);
line-height: 1.6;
color: var(--ink);
background: var(--bg);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--dur-3) var(--ease-in-out), color var(--dur-3) var(--ease-in-out);
overflow-x: clip; 
}
h1, h2, h3, h4, .display {
font-family: var(--font-display);
font-weight: var(--display-wght);
font-stretch: calc(var(--display-wdth) * 1%);
line-height: 1.04;
letter-spacing: -0.015em;
text-wrap: balance;
color: var(--heading-ink, var(--ink));
transition: font-weight var(--dur-3) var(--ease-out), font-stretch var(--dur-3) var(--ease-out);
}
h1 { font-size: var(--step-5); letter-spacing: -0.025em; }
h2 { font-size: var(--step-4); letter-spacing: -0.02em; }
h3 { font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.008em; }
h4 { font-size: var(--step-1); line-height: 1.2; letter-spacing: 0; }
p, li, dd, blockquote { text-wrap: pretty; }
p { max-width: var(--measure); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
small, .small { font-size: var(--step--1); }
strong, b { font-weight: 700; }
a {
color: var(--link, var(--accent-ink));
text-decoration-line: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.2em;
text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
transition: text-decoration-color var(--dur-1), color var(--dur-1);
}
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 0.12em; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
svg.i { inline-size: 1.15em; block-size: 1.15em; flex: none; display: inline-block; vertical-align: -0.18em; }
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: inherit; }
hr { border: 0; height: 1px; background: var(--line); margin-block: var(--space-l); }
ul:not([role]), ol:not([role]) { padding-inline-start: 1.25em; }
li + li { margin-block-start: 0.35em; }
::marker { color: var(--accent-ink); }
.skip-link {
position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 1000;
padding: 0.8rem 1.2rem; border-radius: var(--r-s);
background: var(--schiefer); color: #fff; font-weight: 700; text-decoration: none;
translate: 0 -200%; transition: translate var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { translate: 0 0; }
.visually-hidden:not(:focus):not(:active) {
clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap;
}
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-size: var(--step-3); margin-block-start: 1.6em; }
.prose h3 { font-size: var(--step-2); margin-block-start: 1.4em; }
.prose h2 + *, .prose h3 + * { margin-block-start: 0.6em; }
.prose blockquote {
font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35;
padding-inline-start: var(--space-s); border-inline-start: 4px solid var(--accent);
}
}
@layer tokens {
@property --flow-bg     { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --flow-ink    { syntax: '<color>'; inherits: true; initial-value: #1c2733; }
@property --flow-accent { syntax: '<color>'; inherits: true; initial-value: #007cc3; }
@property --sky-a       { syntax: '<color>'; inherits: true; initial-value: #00467a; }
@property --sky-m       { syntax: '<color>'; inherits: true; initial-value: #0b7cc6; }
@property --sky-b       { syntax: '<color>'; inherits: true; initial-value: #419ad9; }
@property --breath      { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --arch-open   { syntax: '<number>'; inherits: true; initial-value: 0; }
:root {
color-scheme: light dark;
--schiefer:      #1c2733;   
--schiefer-2:    #3d4a57;   
--schiefer-3:    #66727e;   
--nacht:         #121b25;   
--kalk:          #f1f3ee;   
--kalk-2:        #e3e7df;
--linie:         #d3d9d0;
--weiss:         #ffffff;
--himmel:        #0077bd;   
--himmel-ci:     #007cc3;   
--himmel-ink:    #005a8e;
--himmel-tint:   #e4f1fa;
--wiese:         #c2cd23;   
--wiese-ink:     #4d5900;
--wiese-tint:    #f3f6d4;
--mohn:          #d8392b;
--mohn-ink:      #a3241a;
--mohn-tint:     #fce9e6;
--eibe:          #0e7c66;
--eibe-ink:      #095646;
--eibe-tint:     #e0f1ec;
--gold:          #e8b04b;
--gold-ink:      #7a5410;
--gold-tint:     #fbf0da;
--violett:       #5b2be0;   
--violett-nacht: #1b0f40;
--lime:          #d6e43a;   
--pink:          #ff6fae;
--sonne:         #ffc22e;   
--salbei:        #4f7268;   
--nebel:         #e7eef0;
--bg:        light-dark(var(--weiss), #0f1720);
--bg-alt:    light-dark(var(--kalk), #16212c);
--surface:   light-dark(var(--weiss), #1a2633);
--ink:       light-dark(var(--schiefer), #eef2f5);
--ink-2:     light-dark(var(--schiefer-2), #c3ccd4);
--ink-3:     light-dark(var(--schiefer-3), #98a5b1);
--line:      light-dark(var(--linie), #2c3a48);
--focus:     light-dark(#0b5cd5, #8cc8ff);
--accent:      var(--himmel);
--accent-ink:  light-dark(var(--himmel-ink), #7cc4f2);
--accent-tint: light-dark(var(--himmel-tint), #10293b);
--on-accent:   #ffffff;
--flow-bg: var(--bg);
--flow-ink: var(--ink);
--flow-accent: var(--accent);
--sky-a: #0260a5;   
--sky-m: #0b7cc6;   
--sky-b: #419ad9;   
--font-display: 'Bricolage', 'Atkinson Next', system-ui, sans-serif;
--font-text: 'Atkinson Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
--display-wght: 640;
--display-wdth: 92;
--text-scale: 1;                         
--step--1: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
--step-0:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
--step-1:  clamp(1.35rem, 1.26rem + 0.45vw, 1.67rem);
--step-2:  clamp(1.65rem, 1.47rem + 0.9vw, 2.22rem);
--step-3:  clamp(2.05rem, 1.7rem + 1.75vw, 3.1rem);
--step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.4rem);
--step-5:  clamp(3rem, 2rem + 5vw, 6.4rem);
--measure: 68ch;
--space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
--space-2xs: clamp(0.5rem, 0.47rem + 0.16vw, 0.63rem);
--space-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.94rem);
--space-s:   clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
--space-m:   clamp(1.5rem, 1.4rem + 0.5vw, 1.88rem);
--space-l:   clamp(2rem, 1.85rem + 0.75vw, 2.5rem);
--space-xl:  clamp(3rem, 2.7rem + 1.5vw, 4rem);
--space-2xl: clamp(4rem, 3.4rem + 3vw, 6rem);
--space-3xl: clamp(4rem, 3rem + 3.6vw, 7rem);
--gutter:    clamp(1rem, 0.5rem + 2.5vw, 3rem);
--content:   78rem;
--wide:      96rem;
--r-xs: 6px;
--r-s: 10px;
--r-m: 18px;
--r-l: 28px;
--r-pill: 999px;
--r-arch: 999px 999px var(--r-m) var(--r-m);   
--shadow-1: 0 1px 2px color-mix(in oklab, var(--accent-ink) 14%, transparent),
0 2px 8px -2px color-mix(in oklab, var(--accent-ink) 12%, transparent);
--shadow-2: 0 2px 4px color-mix(in oklab, var(--accent-ink) 10%, transparent),
0 18px 40px -16px color-mix(in oklab, var(--accent-ink) 38%, transparent);
--shadow-3: 0 4px 10px color-mix(in oklab, var(--accent-ink) 12%, transparent),
0 40px 80px -30px color-mix(in oklab, var(--accent-ink) 50%, transparent);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
--ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
--dur-1: 160ms;
--dur-2: 320ms;
--dur-3: 640ms;
--dur-4: 1100ms;
--motion: 1;                               
--breath-cycle: 11s;                       
--header-h: 4.5rem;
}
@media (color-gamut: p3) {
:root {
--himmel: oklch(54.5% 0.17 245);
--wiese:  oklch(82% 0.2 113);
--mohn:   oklch(58% 0.21 30);
--eibe:   oklch(52% 0.12 170);
--gold:   oklch(79% 0.15 78);
--violett: oklch(48% 0.27 285);
--lime:   oklch(88% 0.2 112);
--pink:   oklch(72% 0.2 355);
}
}
[data-world="seminare"] {
--accent: var(--himmel); --accent-ink: light-dark(var(--himmel-ink), #7cc4f2);
--accent-tint: light-dark(var(--himmel-tint), #10293b); --on-accent: #fff;
}
[data-world="auszeit"] {
--accent: var(--wiese); --accent-ink: light-dark(var(--wiese-ink), #d4e05a);
--accent-tint: light-dark(var(--wiese-tint), #232a08); --on-accent: var(--schiefer);
}
[data-world="aktuelles"] {
--accent: var(--mohn); --accent-ink: light-dark(var(--mohn-ink), #ff9a8c);
--accent-tint: light-dark(var(--mohn-tint), #33140f); --on-accent: #fff;
}
[data-world="mitmachen"] {
--accent: var(--eibe); --accent-ink: light-dark(var(--eibe-ink), #6fd3bb);
--accent-tint: light-dark(var(--eibe-tint), #0c2a24); --on-accent: #fff;
}
[data-world="feiern"] {
--accent: var(--gold); --accent-ink: light-dark(var(--gold-ink), #f2c877);
--accent-tint: light-dark(var(--gold-tint), #2e2310); --on-accent: var(--schiefer);
}
[data-world="schloss"] {
--accent: var(--schiefer-2); --accent-ink: light-dark(var(--schiefer), #dfe6ec);
--accent-tint: light-dark(var(--kalk), #1b2733); --on-accent: #fff;
}
[data-tone="still"] {
--bg-alt: light-dark(var(--nebel), #16232a);
--sky-a: #5d86a2; --sky-m: #8db2c7; --sky-b: #d4e5ec;
--display-wght: 420; --display-wdth: 100;
--accent: var(--salbei); --accent-ink: light-dark(#3b5a51, #a9cdc2); --accent-tint: light-dark(var(--nebel), #18262a); --on-accent: #fff;
--breath-cycle: 14s;
}
[data-tone="familie"] {
--sky-a: #0a6fc0; --sky-m: #2e95e6; --sky-b: #9ad6ff;
--display-wght: 760; --display-wdth: 96;
--accent: var(--sonne); --accent-ink: light-dark(#7a5200, #ffd36e); --accent-tint: light-dark(#fff4d6, #2e2508); --on-accent: var(--schiefer);
--r-m: 24px; --r-l: 36px;
}
[data-tone="jung"] {
color-scheme: dark;
--bg: #170c3a; --bg-alt: #22124f; --surface: #2a175f;
--ink: #f6f3ff; --ink-2: #dcd4f8; --ink-3: #b9aee6; --line: #46338e; --focus: #ffe95c;
--sky-a: #22104d; --sky-m: #5a24c9; --sky-b: #b44fd6;
--display-wght: 800; --display-wdth: 75;
--accent: var(--lime); --accent-ink: light-dark(#4b5600, var(--lime)); --accent-tint: light-dark(#f2f6c8, #2a1a5c); --on-accent: var(--violett-nacht);
--breath-cycle: 6s;
}
[data-tone="klar"] {
--sky-a: #013b6b; --sky-m: #0b6db8; --sky-b: #3c9be0;
--display-wght: 600; --display-wdth: 88;
--r-m: 12px; --r-l: 18px;
}
[data-tone="fest"] {
color-scheme: dark;
--bg: #101923; --bg-alt: #17222e; --surface: #1c2936;
--ink: #f7f2e8; --ink-2: #e0d6c4; --ink-3: #bdb19c; --line: #354350; --focus: #ffd27a;
--sky-a: #1d2550; --sky-m: #6c4a78; --sky-b: #f0a35e;
--display-wght: 520; --display-wdth: 100;
--accent: var(--gold); --accent-ink: light-dark(var(--gold-ink), #f2c877); --accent-tint: light-dark(var(--gold-tint), #2e2310); --on-accent: var(--schiefer);
}
:root[data-text="gross"]      { --text-scale: 1.15; }
:root[data-text="sehr-gross"] { --text-scale: 1.3; }
:root[data-motion="reduziert"] { --motion: 0; }
:root[data-scheme="hell"]   { color-scheme: light; }
:root[data-scheme="dunkel"] { color-scheme: dark; }
:root[data-kontrast="hoch"] {
--ink: light-dark(#000, #fff); --ink-2: light-dark(#111, #f2f2f2); --ink-3: light-dark(#222, #e6e6e6);
--line: light-dark(#000, #fff);
--himmel-ink: #00406a; --wiese-ink: #333c00; --mohn-ink: #7f1a12; --eibe-ink: #053d31; --gold-ink: #523700;
}
@media (prefers-reduced-motion: reduce) {
:root:not([data-motion="voll"]) { --motion: 0; }
}
}
@layer layout {
.wrap {
width: min(100% - 2 * var(--gutter), var(--content));
margin-inline: auto;
}
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wide)); }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 46rem); }
.section {
position: relative;
padding-block: var(--section-pad, var(--space-3xl));
background: var(--section-bg, transparent);
color: var(--ink);
}
.section--alt { --section-bg: var(--bg-alt); }
.section--tint { --section-bg: var(--accent-tint); }
.section--tight { --section-pad: var(--space-2xl); }
[data-tone].section, [data-tone].band { --section-bg: var(--bg); }
.section[data-prev-bg]::before, .band[data-prev-bg]::before {
content: ""; position: absolute; inset: 0 0 auto; height: clamp(5rem, 18vh, 12rem);
background: linear-gradient(to bottom, var(--prev-bg), transparent);
pointer-events: none;
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }
.stack > * { margin: 0; }
.stack--l { --stack-gap: var(--space-l); }
.stack--xl { --stack-gap: var(--space-xl); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-xs)); align-items: center; }
.grid {
display: grid; gap: var(--grid-gap, var(--space-m));
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
}
.split {
display: grid; gap: var(--space-xl) var(--space-2xl);
grid-template-columns: 1fr;
align-items: start;
}
@media (width >= 56rem) {
.split { grid-template-columns: var(--split, 5fr 7fr); }
.split--center { align-items: center; }
.split--rev > :first-child { order: 2; }
}
.section-head {
display: grid; gap: var(--space-s); margin-block-end: var(--space-xl);
grid-template-columns: 1fr;
}
.section-head p { color: var(--ink-2); font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }
@media (width >= 60rem) {
.section-head--row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
.section-head--row > :last-child { justify-self: end; }
}
.kicker {
display: inline-flex; align-items: center; gap: 0.55em;
font-weight: 700; font-size: var(--step--1); color: var(--accent-ink);
}
.kicker::before {
content: ""; inline-size: 0.7em; block-size: 0.7em; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
main { display: block; }
body[data-tone] { background: var(--bg); color: var(--ink); }
main:focus { outline: none; }
}
@layer components {
.btn {
--btn-bg: var(--accent); --btn-ink: var(--on-accent); --btn-line: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
min-height: 3rem; padding: 0.7em 1.35em;
border: 2px solid var(--btn-line); border-radius: var(--r-pill);
background: var(--btn-bg); color: var(--btn-ink);
font-family: var(--font-text); font-weight: 700; font-size: var(--step-0); line-height: 1.1;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2),
translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.btn:hover { translate: 0 -2px; box-shadow: var(--shadow-2); text-decoration: none; }
.btn:active { translate: 0 0; box-shadow: none; }
.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-ink: var(--ink); --btn-line: color-mix(in oklab, var(--ink) 35%, transparent); }
.btn--ghost:hover { --btn-line: var(--ink); }
.btn--light { --btn-bg: #fff; --btn-ink: var(--schiefer); }
.btn--glass {
--btn-bg: color-mix(in oklab, #fff 16%, transparent); --btn-ink: #fff; --btn-line: color-mix(in oklab, #fff 45%, transparent);
backdrop-filter: blur(12px) saturate(1.4);
}
.btn--ink { --btn-bg: var(--ink); --btn-ink: var(--bg); }
.btn--sm { min-height: 2.6rem; padding: 0.5em 1.05em; font-size: var(--step--1); }
.btn--lg { min-height: 3.5rem; padding: 0.8em 1.6em; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.28rem); }
.link-more {
display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700;
color: var(--accent-ink); text-decoration: none;
}
.link-more svg { inline-size: 1.1em; transition: translate var(--dur-2) var(--ease-out); }
.link-more:hover svg { translate: 0.25em 0; }
.link-more:hover { text-decoration: underline; }
.chip {
display: inline-flex; align-items: center; gap: 0.45em;
min-height: 2.6rem; padding: 0.4em 1em; border-radius: var(--r-pill);
border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
font-weight: 600; font-size: var(--step--1); cursor: pointer; text-decoration: none;
transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip:has(input:checked) {
background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.chip .dot { inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--chip-dot, var(--accent)); }
.tag {
display: inline-flex; align-items: center; gap: 0.35em;
padding: 0.2em 0.65em; border-radius: var(--r-pill);
background: var(--accent-tint); color: var(--accent-ink);
font-size: var(--step--1); font-weight: 700; line-height: 1.4;
}
.tag--new { background: var(--mohn); color: #fff; }
.tag--friends { background: var(--wiese); color: var(--schiefer); }
.media { display: block; position: relative; overflow: clip; background: var(--img-color, var(--bg-alt)); }
.media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
:is(.media, .arch, .feature__media, .wcard__thumb, .arcade__media) { position: relative; }
:is(.media, .arch, .feature__media, .wcard__thumb, .arcade__media) > picture { position: absolute; inset: 0; }
:is(.media, .arch, .feature__media, .wcard__thumb, .arcade__media) > picture img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.jung__collage .arch, .arcade__media { position: absolute; }
.arch { display: block; border-radius: var(--r-arch); overflow: clip; isolation: isolate; background: var(--img-color, var(--bg-alt)); }
.arch img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.rounded { border-radius: var(--r-l); overflow: clip; }
.site-header {
position: fixed; inset: 0 0 auto; z-index: 50;
padding: var(--header-pad, 0.75rem) var(--gutter) 0;
pointer-events: none;
transition: padding var(--dur-3) var(--ease-out);
view-transition-name: site-header;
}
.site-header__bar {
pointer-events: auto;
margin-inline: auto; max-width: var(--wide);
display: flex; align-items: center; gap: var(--space-s);
min-height: var(--header-h);
padding: 0.4rem 0.5rem 0.4rem 1rem;
border-radius: var(--r-pill);
color: var(--header-ink, var(--ink));
background: var(--header-bg, color-mix(in oklab, var(--bg) 82%, transparent));
border: 1px solid var(--header-line, color-mix(in oklab, var(--ink) 8%, transparent));
backdrop-filter: blur(18px) saturate(1.6);
box-shadow: var(--header-shadow, var(--shadow-1));
transition: background-color var(--dur-3), color var(--dur-3), box-shadow var(--dur-3),
max-width var(--dur-3) var(--ease-out), min-height var(--dur-3) var(--ease-out), border-color var(--dur-3);
}
.has-hero .site-header:not(.is-scrolled) {
--header-bg: transparent; --header-ink: #fff; --header-line: transparent; --header-shadow: none;
}
.has-hero .site-header:not(.is-scrolled) .site-header__bar { backdrop-filter: none; }
.site-header.is-scrolled { --header-pad: 0.6rem; }
.site-header.is-scrolled .site-header__bar { max-width: 72rem; min-height: calc(var(--header-h) - 0.6rem); }
.site-header.is-hidden { translate: 0 calc(-100% - 1rem); }
.site-header { transition: translate var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out); }
.brand {
display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; text-decoration: none;
flex: none; border-radius: var(--r-s);
}
.brand__mark { inline-size: 3.1rem; block-size: auto; color: currentColor; transition: inline-size var(--dur-3) var(--ease-out); }
.brand__word { inline-size: 9.6rem; color: currentColor; }
.brand__word svg { inline-size: 100%; block-size: auto; }
.is-scrolled .brand__mark { inline-size: 2.6rem; }
.brand__mark path { transition: fill var(--dur-3); }
.mainnav { margin-inline: auto; }
.mainnav__list { display: flex; gap: 0.15rem; align-items: center; margin: 0; padding: 0; list-style: none; position: relative; }
.mainnav__item { display: flex; align-items: center; margin: 0; }
.site-header__bar { position: relative; }
.mainnav__link {
position: relative; display: inline-flex; align-items: center; gap: 0.5em;
padding: 0.6em 0.4em 0.6em 0.85em; border-radius: var(--r-pill);
color: inherit; text-decoration: none; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.005em;
}
.mainnav__link .dot {
inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
transition: scale var(--dur-2) var(--ease-spring);
}
.mainnav__item:hover .dot, .mainnav__item:focus-within .dot, .mainnav__link[aria-current] .dot { scale: 1.5; }
.mainnav__link[aria-current]::after {
content: ""; position: absolute; inset: auto 0.8em 0.2em 1.9em; height: 3px; border-radius: 3px; background: var(--accent);
}
.mainnav__toggle {
display: inline-grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem;
border: 0; background: none; color: inherit; border-radius: 50%; cursor: pointer; margin-inline-end: 0.2rem;
}
.mainnav__toggle svg { inline-size: 0.9rem; transition: rotate var(--dur-2) var(--ease-out); }
.mainnav__toggle[aria-expanded="true"] svg { rotate: 180deg; }
.mainnav__toggle:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.mainnav__indicator {
position: absolute; z-index: -1; top: 50%; translate: 0 -50%; height: 2.6rem; border-radius: var(--r-pill);
background: color-mix(in oklab, currentColor 9%, transparent);
opacity: 0; transition: left var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out), opacity var(--dur-2);
pointer-events: none;
}
.site-header__tools { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; }
.mainnav + .site-header__tools { margin-inline-start: 0; }
.tool-btn {
display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer;
transition: background-color var(--dur-2);
}
.tool-btn:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.tool-btn svg { inline-size: 1.35rem; block-size: 1.35rem; }
.site-header .btn--accent { --btn-bg: var(--ink); --btn-ink: var(--bg); }
.has-hero .site-header:not(.is-scrolled) .btn--accent { --btn-bg: #fff; --btn-ink: var(--schiefer); }
.site-header.is-scrolled .site-header__bar { border-color: color-mix(in oklab, var(--flow-accent) 60%, transparent); box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in oklab, var(--flow-accent) 25%, transparent); }
.mainnav__link { white-space: nowrap; }
@media (width >= 68rem) and (width < 94rem) {
.brand__word { display: none; }
.mainnav__link { font-size: 0.98rem; padding-inline-start: 0.7em; }
}
.menu-btn {
display: none; align-items: center; gap: 0.55rem; min-height: 2.9rem; padding: 0 1.1rem 0 0.95rem;
border: 0; border-radius: var(--r-pill); cursor: pointer; font-weight: 700;
background: var(--ink); color: var(--bg);
}
.has-hero .site-header:not(.is-scrolled) .menu-btn { background: #fff; color: var(--schiefer); }
.menu-btn__icon { display: grid; gap: 4px; inline-size: 1.1rem; }
.menu-btn__icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: rotate var(--dur-2), translate var(--dur-2), opacity var(--dur-2); }
@media (width < 68rem) {
.mainnav, .site-header__tools .btn--accent, .tool-btn--desk { display: none; }
.menu-btn { display: inline-flex; }
.brand__word { inline-size: 8.4rem; }
:root { --header-h: 4rem; }
}
@media (width < 34rem) { .site-header__tools .tool-btn { display: none; } .site-header__bar { padding-inline-start: 0.8rem; } }
@media (width < 26rem) { .brand__word { inline-size: 7.4rem; } .brand__mark { inline-size: 2.4rem; } }
.mega {
position: absolute; top: calc(100% + 0.7rem); left: 50%; translate: -50% 0;
inline-size: min(60rem, 94vw);
display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--space-m);
padding: var(--space-m); border-radius: var(--r-l);
background: var(--surface); color: var(--ink);
border: 1px solid var(--line);
box-shadow: var(--shadow-3);
opacity: 0; scale: 0.97; transform-origin: top center;
transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete;
transition-behavior: allow-discrete;
}
.mega:not([hidden]) { opacity: 1; scale: 1; }
@starting-style { .mega:not([hidden]) { opacity: 0; scale: 0.97; } }
.mega::before { 
content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: var(--r-l) var(--r-l) 0 0;
background: var(--accent);
}
.mega__intro { display: grid; gap: 0.6rem; align-content: start; }
.mega__intro h2 { font-size: var(--step-2); }
.mega__intro p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.mega__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; align-content: start; }
.mega__links li { margin: 0; }
.mega__links a {
display: grid; gap: 0.1rem; padding: 0.55rem 0.75rem; border-radius: var(--r-s);
color: var(--ink); text-decoration: none; font-weight: 700;
}
.mega__links a span { font-weight: 400; color: var(--ink-2); font-size: 0.92rem; }
.mega__links a:hover { background: var(--accent-tint); }
.mega__feature { display: grid; gap: 0.6rem; align-content: start; color: inherit; text-decoration: none; }
.mega__feature .media { aspect-ratio: 4 / 3; border-radius: var(--r-arch); }
.mega__feature strong { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.mega__feature small { color: var(--accent-ink); font-weight: 700; }
.mobilmenu {
position: fixed; inset: 0; z-index: 60; margin: 0; padding: 0; border: 0;
inline-size: 100%; block-size: 100dvh; max-inline-size: none; max-block-size: none;
background: var(--nacht); color: #fff; overflow-y: auto; overscroll-behavior: contain;
clip-path: circle(0% at var(--mx, 90%) var(--my, 2.5rem));
transition: clip-path 620ms var(--ease-in-out), display 620ms allow-discrete, overlay 620ms allow-discrete;
}
.mobilmenu:popover-open { clip-path: circle(150% at var(--mx, 90%) var(--my, 2.5rem)); }
@starting-style { .mobilmenu:popover-open { clip-path: circle(0% at var(--mx, 90%) var(--my, 2.5rem)); } }
.mobilmenu__inner { display: grid; gap: var(--space-m); padding: 1rem var(--gutter) 2.5rem; min-height: 100%; align-content: start; }
.mobilmenu__top { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; }
.mobilmenu__top .brand { color: #fff; }
.mobilmenu__close { background: #fff; color: var(--schiefer); }
.mobilmenu__worlds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.mobilmenu__worlds > li { margin: 0; }
.mworld {
border-radius: var(--r-l); background: color-mix(in oklab, var(--accent) 16%, var(--nacht));
border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); overflow: clip;
}
.mworld > a, .mworld summary {
display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: 1rem;
padding: 0.7rem 1rem 0.7rem 0.7rem; color: #fff; text-decoration: none; cursor: pointer; list-style: none;
}
.mworld summary::-webkit-details-marker { display: none; }
.mworld .arch { inline-size: 4.2rem; aspect-ratio: 3/4; }
.mworld strong { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; font-weight: 650; }
.mworld small { display: block; color: color-mix(in oklab, #fff 72%, transparent); font-size: 0.95rem; margin-top: 0.25rem; }
.mworld__chev { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transition: rotate var(--dur-2); }
.mworld[open] .mworld__chev { rotate: 180deg; }
.mworld ul { list-style: none; margin: 0; padding: 0 1rem 1rem 6rem; display: grid; gap: 0.1rem; }
.mworld ul a { display: block; padding: 0.55rem 0; color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, #fff 12%, transparent); }
.mworld ul li { margin: 0; }
.mobilmenu__quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mobilmenu__quick a {
display: grid; justify-items: center; gap: 0.35rem; padding: 0.9rem 0.4rem; border-radius: var(--r-m);
background: color-mix(in oklab, #fff 8%, transparent); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem;
}
.mobilmenu__quick svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--lime); }
.mobilmenu__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.95rem; }
.mobilmenu__meta a { color: color-mix(in oklab, #fff 80%, transparent); }
.mobilmenu .mworld, .mobilmenu__quick > *, .mobilmenu__meta {
opacity: 0; translate: 0 18px;
transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out);
transition-delay: calc(180ms + var(--i, 0) * 55ms);
}
.mobilmenu:popover-open .mworld, .mobilmenu:popover-open .mobilmenu__quick > *, .mobilmenu:popover-open .mobilmenu__meta { opacity: 1; translate: 0 0; }
@starting-style {
.mobilmenu:popover-open .mworld, .mobilmenu:popover-open .mobilmenu__quick > *, .mobilmenu:popover-open .mobilmenu__meta { opacity: 0; translate: 0 18px; }
}
.panel {
margin: 0; inset: auto; position: fixed; top: calc(var(--header-h) + 1.4rem); right: max(var(--gutter), calc((100vw - var(--wide)) / 2));
inline-size: min(25rem, calc(100vw - 2 * var(--gutter)));
padding: var(--space-m); border-radius: var(--r-l); border: 1px solid var(--line);
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
opacity: 0; translate: 0 -8px;
transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
}
.panel:popover-open { opacity: 1; translate: 0 0; }
@starting-style { .panel:popover-open { opacity: 0; translate: 0 -8px; } }
.panel h2 { font-size: var(--step-2); }
.panel fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.panel legend { font-weight: 700; margin-block-end: 0.4rem; }
.panel .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: var(--r-pill); background: var(--bg-alt); }
.panel .seg label {
display: grid; place-items: center; min-height: 2.6rem; border-radius: var(--r-pill); cursor: pointer;
font-weight: 700; font-size: 0.95rem; position: relative; text-align: center; padding-inline: 0.3rem;
}
.panel .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.panel .seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.panel .seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.panel__close { position: absolute; top: 0.9rem; right: 0.9rem; }
.search {
inline-size: min(44rem, calc(100vw - 2rem)); max-block-size: min(80vh, 44rem);
margin: 8vh auto auto; padding: 0; border: 0; border-radius: var(--r-l);
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); overflow: hidden;
}
.search::backdrop { background: color-mix(in oklab, var(--nacht) 55%, transparent); backdrop-filter: blur(6px); }
.search__field { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.search__field svg { inline-size: 1.4rem; color: var(--ink-2); flex: none; }
.search__field input { flex: 1; border: 0; background: none; font-size: var(--step-1); outline: none; min-width: 0; }
.search__results { list-style: none; margin: 0; padding: 0.6rem; overflow-y: auto; max-block-size: calc(min(80vh, 44rem) - 5rem); }
.search__results li { margin: 0; }
.search__results a { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; padding: 0.7rem 0.8rem; border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.search__results a:hover, .search__results a:focus-visible, .search__results [aria-selected="true"] a { background: var(--accent-tint); outline: none; }
.search__results .dot { grid-row: span 2; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%; margin-top: 0.45rem; background: var(--accent); }
.search__results strong { font-weight: 700; }
.search__results small { color: var(--ink-2); }
.search__empty { padding: 1.5rem; color: var(--ink-2); }
kbd { font-family: inherit; font-size: 0.8em; padding: 0.1em 0.45em; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-alt); }
.card {
position: relative; display: grid; align-content: start; gap: var(--space-xs);
grid-template-columns: minmax(0, 1fr);
border-radius: var(--r-l); background: var(--surface); color: var(--ink);
border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
overflow: clip; container-type: inline-size;
transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.card:has(a.card__link:hover), .card:has(a.card__link:focus-visible) { translate: 0 -4px; box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__body { display: grid; gap: 0.55rem; padding: 0 var(--space-s) var(--space-s); }
.card__body:first-child { padding-top: var(--space-s); }
.card h3 { font-size: var(--step-1); line-height: 1.15; }
.card p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.event-card .media { aspect-ratio: 16 / 10; }
.event-card .media img { transition: scale var(--dur-4) var(--ease-out); }
.event-card:has(.card__link:hover) .media img { scale: 1.05; }
.event-card__date {
position: absolute; z-index: 2; top: var(--space-xs); left: var(--space-xs);
display: grid; justify-items: center; min-inline-size: 4.2rem; padding: 0.35rem 0.6rem 0.45rem;
border-radius: var(--r-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
font-family: var(--font-display); line-height: 1;
}
.event-card__date b { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.event-card__date span { font-size: 0.82rem; font-weight: 700; color: var(--accent-ink); margin-top: 0.15rem; }
.event-card__date em { font-style: normal; font-size: 0.78rem; color: var(--ink-2); margin-top: 0.1rem; }
.event-card__tags { position: absolute; z-index: 2; top: var(--space-xs); right: var(--space-xs); display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: end; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font-size: 0.95rem; color: var(--ink-2); }
.event-card__meta span { display: inline-flex; align-items: center; gap: 0.35em; }
.event-card__meta svg { inline-size: 1em; color: var(--accent-ink); }
.event-card__cats { display: flex; gap: 0.35rem; flex-wrap: wrap; }
@container (width < 17rem) { .event-card h3 { font-size: 1.2rem; } }
.wcard {
position: relative; display: grid; gap: 0.35rem; align-content: start;
padding: 1rem 1.15rem 1.1rem; border-radius: var(--r-l);
color: #fff; text-decoration: none;
background: color-mix(in oklab, var(--nacht) 38%, transparent);
border: 1px solid color-mix(in oklab, #fff 22%, transparent);
backdrop-filter: blur(20px) saturate(1.5);
box-shadow: 0 20px 50px -24px rgb(0 0 0 / .55);
transition: translate var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2);
overflow: clip;
}
.wcard:hover { translate: 0 -4px; background: color-mix(in oklab, var(--nacht) 52%, transparent); border-color: color-mix(in oklab, var(--accent) 70%, transparent); }
.wcard__label { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9rem; font-weight: 700; color: color-mix(in oklab, #fff 82%, transparent); }
.wcard__label .dot { inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2.4s var(--ease-out) infinite; animation-play-state: var(--play, running); }
.wcard strong { display: block; font-family: var(--font-display); font-size: 1.28rem; line-height: 1.15; font-weight: 650; }
.wcard small { display: block; margin-top: 0.2rem; font-size: 0.95rem; color: color-mix(in oklab, #fff 84%, transparent); }
.wcard__row { display: flex; gap: 0.8rem; align-items: center; }
.wcard__thumb { display: block; inline-size: 3.6rem; aspect-ratio: 3/4; flex: none; border-radius: var(--r-arch); overflow: clip; }
.wcard__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.wcard__count { font-variant-numeric: tabular-nums; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.icard { padding: var(--space-m); gap: var(--space-xs); }
.icard__icon { inline-size: 3.2rem; block-size: 3.2rem; border-radius: var(--r-m); display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); }
.icard__icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
.ring {
--size: 8.5rem;
position: relative; inline-size: var(--size); block-size: var(--size); flex: none;
display: grid; place-items: center; border-radius: 50%; color: var(--ring-ink, var(--schiefer));
background: var(--ring-bg, var(--wiese)); text-decoration: none;
box-shadow: var(--shadow-2);
transition: scale var(--dur-2) var(--ease-spring);
}
.ring:hover { scale: 1.06; }
.ring svg.ring__text { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; animation: spin 26s linear infinite; animation-play-state: var(--play, running); }
.ring svg.ring__text text { font-family: var(--font-text); font-weight: 700; font-size: 10.6px; letter-spacing: 0.13em; fill: currentColor; }
.ring__core { inline-size: 42%; color: currentColor; }
@keyframes spin { to { rotate: 1turn; } }
.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field { display: grid; gap: 0.4rem; }
.field label, .field legend { font-weight: 700; }
.field .hint { font-size: 0.92rem; color: var(--ink-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
inline-size: 100%; min-height: 3.1rem; padding: 0.65rem 0.9rem;
border-radius: var(--r-s); border: 1.5px solid color-mix(in oklab, var(--ink) 30%, transparent);
background: var(--surface); color: var(--ink); font-size: 1.05rem;
transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 35%, transparent);
}
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--mohn-ink); }
.field__error { color: var(--mohn-ink); font-weight: 700; font-size: 0.95rem; display: none; }
.field:has(:user-invalid) .field__error, .was-submitted .field:has(:invalid) .field__error { display: block; }
.was-submitted .field :invalid { border-color: var(--mohn-ink); }
.was-submitted .check:has(:invalid) { color: var(--mohn-ink); font-weight: 700; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 1rem; }
.check input { inline-size: 1.4rem; block-size: 1.4rem; margin-top: 0.15rem; }
.form__hp { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form__status { padding: 1rem 1.2rem; border-radius: var(--r-m); font-weight: 700; }
.form__status[data-state="ok"] { background: var(--eibe-tint); color: var(--eibe-ink); }
.form__status[data-state="error"] { background: var(--mohn-tint); color: var(--mohn-ink); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.accordion { display: grid; gap: 0.6rem; }
.accordion details { border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); overflow: clip; }
.accordion summary {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 1rem 1.2rem; cursor: pointer; font-weight: 700; font-size: var(--step-0); list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
content: ""; flex: none; inline-size: 0.75rem; block-size: 0.75rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
rotate: 45deg; translate: 0 -25%; transition: rotate var(--dur-2) var(--ease-out);
}
.accordion details[open] summary::after { rotate: 225deg; translate: 0 25%; }
.accordion details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.accordion details[open]::details-content { block-size: auto; }
.accordion .accordion__body { padding: 0 1.2rem 1.2rem; }
.table-wrap { overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--line); }
.table { inline-size: 100%; font-size: 1rem; }
.table th, .table td { text-align: start; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { background: var(--bg-alt); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; font-size: 0.95rem; }
.crumbs li { margin: 0; display: inline-flex; gap: 0.6rem; align-items: center; }
.crumbs li + li::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; rotate: 45deg; opacity: 0.55; }
.crumbs a { color: inherit; }
.crumbs [aria-current] { font-weight: 700; }
.person { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; }
.person .media { inline-size: 4.5rem; aspect-ratio: 1; border-radius: 50%; }
.person strong { display: block; font-size: 1.08rem; }
.person p { font-size: 0.98rem; color: var(--ink-2); margin-top: 0.2rem; }
.quote { display: grid; gap: var(--space-s); }
.quote blockquote { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; font-weight: 480; font-stretch: 96%; text-wrap: pretty; }
.quote figcaption { color: var(--ink-2); font-weight: 700; }
.notice {
position: fixed; z-index: 70; inset: auto var(--gutter) var(--gutter) auto; inline-size: min(26rem, calc(100vw - 2 * var(--gutter)));
padding: 1.1rem 1.2rem; border-radius: var(--r-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
border: 1px solid var(--line); display: grid; gap: 0.7rem; font-size: 0.98rem;
}
.site-footer {
position: relative; z-index: 1; margin-top: 0;
background: var(--nacht); color: #e9eef2; padding-block: var(--space-2xl) var(--space-l);
--accent-ink: var(--lime); --link: #fff; --ink: #fff; --ink-2: #c5ced6; --line: #2a3846;
}
.site-footer__arc { position: absolute; inset: auto 0 calc(100% - 1px); inline-size: 100%; block-size: clamp(3rem, 8vw, 7rem); color: var(--nacht); }
.site-footer__grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer__grid > * { min-inline-size: 0; }
@media (width >= 75rem) { .site-footer__grid { grid-template-columns: 1.1fr 1fr 1.1fr 1fr 1.5fr; } }
.site-footer h2 { font-size: var(--step-1); color: #fff; margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.site-footer li { margin: 0; }
.site-footer a { color: #fff; text-decoration-color: color-mix(in oklab, #fff 35%, transparent); }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer__brand { display: grid; gap: 1rem; align-content: start; }
.site-footer__brand .brand__mark { inline-size: 4.5rem; color: #fff; }
.site-footer__script { display: block; inline-size: min(16rem, 100%); color: var(--lime); }
.site-footer a[href^="tel:"] { white-space: nowrap; }
.site-footer__bottom {
margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; justify-content: space-between; font-size: 0.95rem; color: var(--ink-2);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.newsletter { display: grid; gap: 0.6rem; }
.newsletter__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.newsletter input[type="email"] {
flex: 1 1 12rem; min-inline-size: 0; min-height: 3rem; padding: 0.6rem 1rem; border-radius: var(--r-pill);
border: 1.5px solid #4a5a6a; background: #18232f; color: #fff;
}
.newsletter .btn { --btn-bg: var(--lime); --btn-ink: var(--schiefer); }
.to-top {
position: fixed; z-index: 40; right: var(--gutter); bottom: var(--gutter);
inline-size: 3.2rem; block-size: 3.2rem; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2);
opacity: 0; translate: 0 1rem; pointer-events: none; transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.to-top.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top svg { inline-size: 1.3rem; }
}
@layer sections {
.hero {
--img-ratio: 1.4977;      
--dome-x: 0.54;           
--dome-top: 0.115;        
--dome-at: 0.3;           
--W: max(100cqw, 100cqh * (1 - var(--dome-at)) / (1 - var(--dome-top)) * var(--img-ratio));
--F: min(19.5cqw, 30cqh);  
position: relative; isolation: isolate;
block-size: max(100svh, 38rem);
container-type: size; container-name: hero;
overflow: clip;
color: #fff;
background: var(--sky-a);
transition: --sky-a var(--dur-4) var(--ease-in-out), --sky-m var(--dur-4) var(--ease-in-out), --sky-b var(--dur-4) var(--ease-in-out);
}
@container hero (aspect-ratio < 0.9) {
.hero__layer, .hero__word { --dome-at: 0.31; }
.hero__word { --F: min(21cqw, 30cqh); }
.hero__scrim { block-size: 74%; }
}
.hero__layer {
position: absolute; z-index: 1;
inline-size: var(--W); max-inline-size: none; aspect-ratio: var(--img-ratio);
inset-block-start: calc(100cqh * var(--dome-at) - var(--W) / var(--img-ratio) * var(--dome-top));
inset-inline-start: clamp(100cqw - var(--W), 50cqw - var(--W) * var(--dome-x), 0px);
pointer-events: none;
translate: var(--px, 0) var(--py, 0);
}
.hero__layer img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__cut { z-index: 4; }
.hero::before { 
content: ""; position: absolute; inset: 0 0 auto; block-size: 45%; z-index: 2; pointer-events: none;
background: linear-gradient(to bottom, rgb(0 12 32 / .32), transparent);
}
.hero__sky {
background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-m) 22%, var(--sky-b) 46%, var(--sky-b) 100%);
}
.hero__word {
position: absolute; z-index: 3; inset-inline: 0;
inset-block-start: calc(100cqh * var(--dome-at) + var(--F) * 0.2 - var(--F) * 0.86);
margin: 0; text-align: center; pointer-events: none; user-select: none;
font-family: var(--font-display); font-size: var(--F); line-height: 1;
font-weight: 640; font-stretch: 90%; letter-spacing: -0.03em;
color: #fff;
text-shadow: 0 0.02em 0.12em rgb(0 20 50 / .18);
translate: var(--wx, 0) var(--wy, 0);
white-space: nowrap;
}
.hero__word span { display: inline-block; }
.hero__scrim {
position: absolute; inset: auto 0 0; block-size: 68%; z-index: 5; pointer-events: none;
background: linear-gradient(to top,
color-mix(in oklab, var(--nacht) 90%, transparent) 0%,
color-mix(in oklab, var(--nacht) 72%, transparent) 30%,
color-mix(in oklab, var(--nacht) 30%, transparent) 62%,
transparent 100%);
}
.hero__content {
position: absolute; z-index: 6; inset: auto 0 0;
inline-size: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto;
padding-block-end: clamp(1.5rem, 5cqh, 3.5rem);
display: grid; gap: var(--space-l); align-items: end;
grid-template-columns: minmax(0, 1fr);
}
@container hero (width >= 64rem) {
.hero__content { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); }
}
.hero__text { display: grid; gap: var(--space-s); max-inline-size: 44rem; }
.hero__script { inline-size: clamp(10rem, 24cqw, 19rem); color: var(--lime); margin-block-end: -0.4rem; overflow: visible; }
.hero__title {
font-size: clamp(1.7rem, 1.2rem + 2.2cqw, 3.1rem); line-height: 1.08; color: #fff;
font-weight: 620; font-stretch: 94%; letter-spacing: -0.015em; max-inline-size: 22ch;
}
.hero__lead { font-size: var(--step-1); line-height: 1.45; color: rgb(255 255 255 / .9); max-inline-size: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 0.3rem; }
.hero__actions .btn { min-height: 3.3rem; font-size: var(--step-0); padding-inline: 1.4em; }
.hero__dock { display: grid; gap: 0.7rem; }
@container hero (width < 64rem) { .hero__dock { display: none; } }
.dock-strip {
display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
padding: 1rem var(--gutter) 1.4rem; margin-block-start: -0.5rem;
background: var(--nacht); scrollbar-width: none;
}
.dock-strip::-webkit-scrollbar { display: none; }
.dock-strip .wcard { flex: 0 0 min(80vw, 20rem); scroll-snap-align: start; background: #1e2a37; }
@media (width >= 64rem) { .dock-strip { display: none; } }
.hero__scroll {
position: absolute; z-index: 6; left: 50%; bottom: 0.9rem; translate: -50% 0;
inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: none; place-items: center; color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
@media (width >= 64rem) { :root:not([data-motion="reduziert"]) .hero__layer { animation: hero-settle 2.2s var(--ease-out) both; } }
:root:not([data-motion="reduziert"]) .hero__word span {
animation: word-arrive 2.4s var(--ease-out) 0.35s both, breathe var(--breath-cycle) var(--ease-breath) 2.8s infinite;
}
:root:not([data-motion="reduziert"]) .hero__text > * { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(1.1s + var(--i, 0) * 120ms); }
:root:not([data-motion="reduziert"]) .hero__dock > * { animation: dock-in 1s var(--ease-out) both; animation-delay: calc(1.5s + var(--i, 0) * 140ms); }
}
@keyframes hero-settle { from { scale: 1.06; } to { scale: 1; } }
@keyframes word-arrive {
from { opacity: 0; letter-spacing: 0.18em; filter: blur(8px); translate: 0 0.12em; }
to   { opacity: 1; letter-spacing: -0.03em; filter: blur(0); translate: 0 0; }
}
@keyframes breathe {
0%, 100% { font-stretch: 90%; font-weight: 640; letter-spacing: -0.03em; }
45%      { font-stretch: 100%; font-weight: 520; letter-spacing: 0.012em; }
55%      { font-stretch: 100%; font-weight: 520; letter-spacing: 0.012em; }
}
@keyframes rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes dock-in { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
.script-write .write path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .script-write.is-writing .write path,
:root:not([data-motion="reduziert"]) .hero .script-write .write path {
animation: write var(--w-dur, 0.5s) cubic-bezier(.5, 0, .5, 1) both;
animation-delay: calc(var(--w-start, 1.7s) + var(--d, 0s));
}
}
@keyframes write { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .hero__word {
animation: word-sink linear both; animation-timeline: scroll(root); animation-range: 0 100svh;
}
:root:not([data-motion="reduziert"]) .hero__content {
animation: content-lift linear both; animation-timeline: scroll(root); animation-range: 0 80svh;
}
}
}
@keyframes word-sink { to { transform: translateY(22cqh) scale(0.92); opacity: 0.35; } }
@keyframes content-lift { to { transform: translateY(-6cqh); opacity: 0; } }
}
@layer sections {
.foryou { --section-pad: var(--space-2xl) var(--space-3xl); }
.sentence {
font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: calc(var(--display-wdth) * 1%);
font-size: clamp(2rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.22; letter-spacing: -0.02em;
color: var(--ink); text-wrap: balance; max-inline-size: 20ch;
}
.sentence__slot { position: relative; display: inline-block; vertical-align: baseline; }
.sentence__slot::after { 
content: ""; position: absolute; right: 0.36em; top: 50%; inline-size: 0.42em; block-size: 0.42em; translate: 0 -70%; rotate: 45deg;
border-right: 0.09em solid var(--on-accent); border-bottom: 0.09em solid var(--on-accent); pointer-events: none;
}
.sentence select {
appearance: none; -webkit-appearance: none; field-sizing: content;
font: inherit; letter-spacing: inherit; color: var(--on-accent); cursor: pointer;
padding: 0 1.15em 0.04em 0.4em; margin: 0.05em 0;
border: 0; border-radius: 0.28em;
background: var(--accent);
box-shadow: 0 0.06em 0 color-mix(in oklab, var(--accent-ink) 60%, transparent);
transition: background-color var(--dur-3) var(--ease-in-out), color var(--dur-3);
}
.sentence select:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.sentence select option { font-family: var(--font-text); font-size: 1rem; color: var(--schiefer); background: #fff; }
.foryou__hint { margin-block-start: var(--space-s); color: var(--ink-2); }
.foryou__results { margin-block-start: var(--space-xl); }
.foryou__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; margin-block-end: var(--space-s); }
.foryou__bar h3 { font-size: var(--step-1); }
.rail {
display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-col, min(82vw, 21rem));
gap: var(--space-s); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
padding-block: 0.5rem 1.5rem; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1);
scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: 0.5rem; }
.rail-nav button {
inline-size: 3rem; block-size: 3rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.rail-nav button:hover { border-color: var(--ink); }
.rail-nav button:disabled { opacity: 0.4; cursor: default; }
.rail-nav svg { inline-size: 1.2rem; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .rail > * {
animation: rail-in linear both; animation-timeline: view(inline); animation-range: entry 0% entry 60%;
}
}
}
@keyframes rail-in { from { scale: 0.9; translate: 4% 0; } to { scale: 1; translate: 0 0; } }
.mini-event {
display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
padding: 1rem; border-radius: var(--r-l); background: var(--surface); color: var(--ink);
border: 1px solid var(--line); text-decoration: none; min-block-size: 100%;
transition: border-color var(--dur-2), translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.mini-event:hover { border-color: var(--accent); translate: 0 -3px; box-shadow: var(--shadow-2); }
.mini-event__date { display: grid; justify-items: center; inline-size: 3.6rem; padding: 0.4rem 0; border-radius: var(--r-m); background: var(--accent-tint); color: var(--accent-ink); font-family: var(--font-display); line-height: 1; }
.mini-event__date b { font-size: 1.5rem; color: var(--ink); }
.mini-event__date span { font-size: 0.8rem; font-weight: 700; margin-top: 0.2rem; }
.mini-event strong { display: block; font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; font-weight: 640; }
.mini-event small { display: block; color: var(--ink-2); margin-top: 0.3rem; font-size: 0.95rem; }
.offer-card { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.offer-card small { color: color-mix(in oklab, var(--bg) 78%, transparent); }
.offer-card .mini-event__date { background: var(--accent); color: var(--on-accent); }
.offer-card .mini-event__date svg { inline-size: 1.6rem; block-size: 1.6rem; margin-block: 0.45rem; }
.arcade {
list-style: none; margin: 0; padding: 0;
display: flex; gap: clamp(0.5rem, 1vw, 1rem);
block-size: clamp(30rem, 68vh, 42rem);
}
.arcade > li { margin: 0; }
.arcade__arch {
position: relative; flex: 1 1 0; min-inline-size: 0; container-type: inline-size;
transition: flex-grow 700ms var(--ease-out);
}
.arcade:has(.arcade__arch:hover, .arcade__arch:focus-within) .arcade__arch { flex-grow: 0.8; }
.arcade:has(.arcade__arch:hover, .arcade__arch:focus-within) .arcade__arch:is(:hover, :focus-within) { flex-grow: 2.4; }
.arcade__link {
position: absolute; inset: 0; display: block; color: #fff; text-decoration: none;
border-radius: var(--r-arch); overflow: clip; isolation: isolate;
background: var(--accent);
}
.arcade__link:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.arcade__media { position: absolute; inset: 0; z-index: -1; }
.arcade__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.arcade__arch:is(:hover, :focus-within) .arcade__media img { scale: 1.06; }
.arcade__link::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, color-mix(in oklab, var(--accent-ink) 92%, black) 0%, color-mix(in oklab, var(--accent-ink) 55%, transparent) 38%, transparent 65%);
}
[data-world="auszeit"] .arcade__link::after, [data-world="feiern"] .arcade__link::after {
background: linear-gradient(to top, color-mix(in oklab, var(--accent-ink) 96%, black) 0%, color-mix(in oklab, var(--accent-ink) 70%, transparent) 40%, transparent 68%);
}
.arcade__label {
position: absolute; inset: auto 0 0; padding: clamp(1rem, 1.6vw, 1.6rem);
display: grid; gap: 0.5rem;
}
.arcade__title {
font-family: var(--font-display); font-weight: 680; font-stretch: 86%;
font-size: clamp(1.35rem, 0.8rem + 1.3vw, 2.2rem); line-height: 1.02; letter-spacing: -0.01em;
hyphens: auto;
}
@container (width < 12rem) { .arcade__title { font-size: 1.12rem; } }
.arcade__title::before {
content: ""; display: block; inline-size: 2.2rem; block-size: 5px; border-radius: 5px; margin-block-end: 0.7rem;
background: var(--accent);
}
.arcade__text {
font-size: 1.02rem; line-height: 1.45; color: rgb(255 255 255 / .92); max-inline-size: 30ch;
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows 600ms var(--ease-out), opacity 400ms;
}
.arcade__text > span { overflow: hidden; }
.arcade__arch:is(:hover, :focus-within) .arcade__text { grid-template-rows: 1fr; opacity: 1; transition-delay: 150ms; }
.arcade__go {
position: absolute; top: 1.1rem; right: 1.1rem; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
scale: 0.6; opacity: 0; transition: scale var(--dur-2) var(--ease-spring), opacity var(--dur-2);
}
.arcade__arch:is(:hover, :focus-within) .arcade__go { scale: 1; opacity: 1; }
.arcade__go svg { inline-size: 1.3rem; }
@media (width < 56rem) {
.arcade {
block-size: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
padding: 0.5rem var(--gutter) 1.5rem; margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.arcade__arch, .arcade .arcade__arch:is(:hover, :focus-within), .arcade:has(.arcade__arch:hover) .arcade__arch { flex: 0 0 min(76vw, 20rem); block-size: 30rem; scroll-snap-align: start; }
.arcade__text { grid-template-rows: 1fr; opacity: 1; }
.arcade__go { scale: 1; opacity: 1; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (width >= 56rem) {
:root:not([data-motion="reduziert"]) .arcade__arch {
animation: arch-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 35%;
}
:root:not([data-motion="reduziert"]) .arcade__arch:nth-child(2), :root:not([data-motion="reduziert"]) .arcade__arch:nth-child(4) { animation-range: entry 0% cover 30%; }
:root:not([data-motion="reduziert"]) .arcade__arch:nth-child(3) { animation-range: entry 0% cover 25%; }
}
}
@keyframes arch-rise { from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); translate: 0 6rem; } to { clip-path: inset(0 0 0 0 round 0); translate: 0 0; } }
.bento { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (width >= 62rem) {
.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(12rem, auto); }
.bento > :first-child { grid-column: span 2; grid-row: span 2; }
}
.news-card .media { aspect-ratio: 16 / 9; }
.bento > :first-child.news-card .media { aspect-ratio: 4 / 3; }
.bento > :first-child.news-card h3 { font-size: var(--step-2); }
.news-card time { font-weight: 700; color: var(--accent-ink); font-size: 0.95rem; }
.news-card--text { background: var(--accent-tint); border-color: transparent; }
.news-card--text .card__body { padding-top: var(--space-m); }
.horizon { position: relative; block-size: max(78svh, 34rem); overflow: clip; background: #2b5c86; color: #fff; isolation: isolate; }
.horizon__track { position: absolute; inset: 0; display: flex; }
.horizon__track picture { block-size: 100%; max-inline-size: none; aspect-ratio: 4996 / 1287; flex: none; }
.horizon__track img { block-size: 100%; inline-size: 100%; object-fit: cover; }
.horizon__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(10 25 20 / .78), rgb(10 25 20 / .05) 55%), linear-gradient(to right, rgb(10 25 35 / .45), transparent 55%); }
.horizon__card { position: absolute; z-index: 2; inset: auto auto 0 0; padding: var(--space-l) var(--gutter); max-inline-size: 44rem; display: grid; gap: var(--space-s); }
.horizon__card h2 { color: #fff; }
.horizon__card p { color: rgb(255 255 255 / .9); font-size: var(--step-1); line-height: 1.45; }
.horizon__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.horizon__facts li { margin: 0; padding: 0.4rem 0.9rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .16); backdrop-filter: blur(8px); font-weight: 700; font-size: 0.98rem; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .horizon__track {
animation: pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
}
}
}
@keyframes pan { from { translate: 0 0; } to { translate: calc(100cqw - max(78svh, 34rem) * 3.882) 0; } }
.horizon { container-type: inline-size; }
@supports not (animation-timeline: view()) {
.horizon__track { animation: none; }
.horizon__track picture { translate: calc((100cqw - max(78svh, 34rem) * 3.882) * 0.45) 0; }
}
.band { position: relative; padding-block: var(--space-3xl); background: var(--bg); color: var(--ink); overflow: clip; isolation: isolate; }
.band--jung { background: radial-gradient(120% 80% at 85% 10%, #4a1fb8 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, #2d1478 0%, transparent 60%), var(--bg); }
.band--jung .lettering { display: block; inline-size: min(100%, 24rem); block-size: auto; }
.jung__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 60rem) { .jung__grid { grid-template-columns: 1fr 1.1fr; } }
.jung__collage { position: relative; block-size: clamp(24rem, 52vw, 38rem); }
.jung__collage .arch { position: absolute; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); border: 6px solid var(--surface); }
.jung__collage .arch:nth-child(1) { inset: 0 38% 22% 4%; rotate: -5deg; }
.jung__collage .arch:nth-child(2) { inset: 14% 2% 6% 46%; rotate: 4deg; }
.jung__collage .arch:nth-child(3) { inset: 58% 44% -6% 18%; rotate: 2deg; border-radius: var(--r-l); }
.jung__collage .ring { position: absolute; left: 0; bottom: 4%; --ring-bg: var(--pink); --ring-ink: var(--violett-nacht); z-index: 2; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .jung__collage .arch:nth-child(1) { animation: tilt-a linear both; animation-timeline: view(); }
:root:not([data-motion="reduziert"]) .jung__collage .arch:nth-child(2) { animation: tilt-b linear both; animation-timeline: view(); }
:root:not([data-motion="reduziert"]) .lettering--reveal { animation: letter-wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}
}
@keyframes tilt-a { from { rotate: -12deg; translate: -4% 10%; } to { rotate: 2deg; translate: 0 -6%; } }
@keyframes tilt-b { from { rotate: 12deg; translate: 6% 16%; } to { rotate: -2deg; translate: 0 -10%; } }
@keyframes letter-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.jung__events { display: grid; gap: 0.6rem; list-style: none; padding: 0; margin: 0; }
.jung__events li { margin: 0; }
.jung__events a {
display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
padding: 0.85rem 1rem; border-radius: var(--r-m); background: color-mix(in oklab, #fff 7%, transparent);
border: 1px solid color-mix(in oklab, #fff 14%, transparent); color: var(--ink); text-decoration: none;
transition: background-color var(--dur-2), border-color var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.jung__events a:hover { background: color-mix(in oklab, var(--lime) 14%, transparent); border-color: var(--lime); translate: 6px 0; }
.jung__events time { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; color: var(--lime); font-size: 1.15rem; min-inline-size: 5.4rem; }
.jung__events strong { font-weight: 700; line-height: 1.3; }
.jung__events svg { inline-size: 1.2rem; color: var(--lime); }
.band--fest { background: radial-gradient(70% 60% at 75% 30%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 70%), var(--bg); }
.fest__glow {
position: absolute; z-index: -1; inline-size: 40rem; aspect-ratio: 1; left: var(--gx, 60%); top: var(--gy, 30%); translate: -50% -50%;
background: radial-gradient(circle, color-mix(in oklab, var(--gold) 32%, transparent), transparent 62%);
filter: blur(10px); pointer-events: none; transition: left 1.2s var(--ease-out), top 1.2s var(--ease-out);
animation: flicker 5s ease-in-out infinite; animation-play-state: var(--play, running);
}
@keyframes flicker { 0%, 100% { opacity: 0.85; scale: 1; } 30% { opacity: 1; scale: 1.04; } 60% { opacity: 0.75; scale: 0.98; } }
.fest__media .arch { block-size: 100%; }
.fest__media { aspect-ratio: 4 / 5; border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent); padding: 0.6rem; border-radius: var(--r-arch); }
.fest__media .arch { block-size: 100%; }
.occasions { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.occasions li { margin: 0; padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1.5px solid color-mix(in oklab, var(--gold) 55%, transparent); color: var(--ink); font-weight: 600; }
.voices { overflow: clip; }
.voices__track { display: flex; gap: var(--space-m); inline-size: max-content; padding-inline-start: var(--gutter); animation: marquee 80s linear infinite; animation-play-state: var(--play, running); }
.voices:hover .voices__track, .voices:focus-within .voices__track, .voices.is-paused .voices__track { animation-play-state: paused; }
.voices figure { inline-size: min(80vw, 30rem); flex: none; padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.voices blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; font-weight: 450; font-stretch: 96%; }
.voices figcaption { margin-top: 0.8rem; color: var(--ink-2); font-weight: 700; font-size: 0.95rem; }
@keyframes marquee { to { translate: calc(-50% - var(--space-m) / 2) 0; } }
.phero {
position: relative; padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
background: var(--accent-tint); color: var(--ink); overflow: clip; isolation: isolate;
}
.phero__grid { display: grid; gap: var(--space-xl); align-items: end; }
@media (width >= 56rem) { .phero__grid { grid-template-columns: 1.25fr 0.75fr; } }
.phero__text { display: grid; gap: var(--space-s); align-content: end; }
.phero h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 6.4rem); max-inline-size: 14ch; hyphens: auto; }
.phero .lead { color: var(--ink-2); }
.phero__media { aspect-ratio: 4 / 5; max-block-size: 34rem; inline-size: 100%; justify-self: end; box-shadow: var(--shadow-3); view-transition-name: var(--vt-media, none); }
.phero__arc { position: absolute; inset: auto 0 -1px; z-index: -1; inline-size: 100%; block-size: clamp(3rem, 9vw, 8rem); color: var(--bg); }
.phero--plain { padding-block-end: var(--space-xl); }
.phero--plain .phero__grid { grid-template-columns: 1fr; }
.subnav {
position: sticky; top: calc(var(--header-h) + 1.1rem); z-index: 30;
margin-block: var(--space-m) 0; pointer-events: none;
}
.subnav ul {
pointer-events: auto; list-style: none; margin: 0 auto; padding: 0.35rem; inline-size: fit-content; max-inline-size: calc(100% - 2 * var(--gutter));
display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none;
border-radius: var(--r-pill); background: color-mix(in oklab, var(--surface) 88%, transparent); border: 1px solid var(--line);
backdrop-filter: blur(14px); box-shadow: var(--shadow-1);
}
.subnav li { margin: 0; flex: none; }
.subnav a { display: block; padding: 0.55rem 1rem; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.98rem; white-space: nowrap; }
.subnav a:hover { background: var(--accent-tint); }
.subnav a[aria-current="true"] { background: var(--ink); color: var(--bg); }
.has-subnav .site-header.is-scrolled { --header-pad: 0.5rem; }
.feature { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 56rem) {
.feature { grid-template-columns: 1fr 1fr; }
.feature--rev > .feature__media { order: 2; }
}
.feature__media { aspect-ratio: var(--ratio, 5 / 4); border-radius: var(--r-l); overflow: clip; box-shadow: var(--shadow-2); }
.feature__media.arch { aspect-ratio: 4 / 5; border-radius: var(--r-arch); max-inline-size: 30rem; }
.feature__text { display: grid; gap: var(--space-s); }
.feature__text h2 { font-size: var(--step-3); }
.facts { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.facts li { margin: 0; padding: var(--space-s); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 0.2rem; }
.facts b { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; font-weight: 700; color: var(--accent-ink); }
.facts span { color: var(--ink-2); font-weight: 600; }
.cta-band {
display: grid; gap: var(--space-m); align-items: center; padding: var(--space-xl); border-radius: var(--r-l);
background: var(--accent); color: var(--on-accent);
}
@media (width >= 56rem) { .cta-band { grid-template-columns: 1fr auto; } }
.cta-band h2 { color: inherit; font-size: var(--step-3); }
.cta-band p { color: inherit; }
.cta-band .btn { --btn-bg: var(--on-accent); --btn-ink: var(--accent); }
}
@layer pages {
.pfilter {
position: sticky; top: calc(var(--header-h) + 1.2rem); z-index: 20;
display: grid; gap: 0.8rem; padding: 0.9rem; border-radius: var(--r-l);
background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(16px);
border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.pfilter__row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.pfilter__search { position: relative; flex: 1 1 16rem; }
.pfilter__search svg { position: absolute; left: 0.9rem; top: 50%; translate: 0 -50%; inline-size: 1.2rem; color: var(--ink-2); pointer-events: none; }
.pfilter__search input {
inline-size: 100%; min-height: 3rem; padding: 0.6rem 1rem 0.6rem 2.8rem; border-radius: var(--r-pill);
border: 1.5px solid var(--line); background: var(--surface); font-size: 1.05rem;
}
.pfilter__search input:focus-visible { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 30%, transparent); }
.pfilter select { min-height: 3rem; padding: 0.5rem 2.2rem 0.5rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; }
.pfilter__cats { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.1rem; }
.pfilter__cats .chip { flex: none; }
.pfilter__toggle { display: none; }
@media (width < 48rem) {
.pfilter { position: relative; top: 0; }
}
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.3rem; align-items: end; block-size: 5.2rem; margin-block: var(--space-m) var(--space-s); }
.months button {
position: relative; display: grid; grid-template-rows: 1fr auto; gap: 0.3rem; block-size: 100%;
border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-2); font-weight: 700; font-size: 0.82rem;
}
.months button i {
align-self: end; display: block; block-size: calc(var(--n) / var(--max) * 100%); min-block-size: 4px;
border-radius: 6px 6px 3px 3px; background: color-mix(in oklab, var(--accent) 35%, var(--bg-alt));
transition: background-color var(--dur-2), block-size var(--dur-3) var(--ease-out);
}
.months button:hover i { background: var(--accent); }
.months button[aria-pressed="true"] { color: var(--ink); }
.months button[aria-pressed="true"] i { background: var(--accent-ink); }
.months button:disabled { cursor: default; opacity: 0.45; }
.presults__count { font-weight: 700; color: var(--ink-2); margin-block: var(--space-s); }
.pmonth { margin-block-start: var(--space-xl); }
.pmonth h2 { font-size: var(--step-3); display: flex; align-items: baseline; gap: 0.8rem; margin-block-end: var(--space-m); }
.pmonth h2 small { font-family: var(--font-text); font-size: var(--step-0); color: var(--ink-2); font-weight: 600; }
.pgrid { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.pempty { padding: var(--space-xl); border-radius: var(--r-l); background: var(--bg-alt); text-align: center; display: grid; gap: 1rem; justify-items: center; }
.ehero { position: relative; padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl); background: var(--accent-tint); overflow: clip; isolation: isolate; }
.ehero__grid { display: grid; gap: var(--space-l); align-items: end; }
@media (width >= 56rem) { .ehero__grid { grid-template-columns: 1.3fr 0.7fr; } }
.ehero h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.8rem); max-inline-size: 20ch; hyphens: auto; }
.ehero__sub { font-size: var(--step-1); color: var(--ink-2); max-inline-size: 40ch; line-height: 1.4; }
.ehero__when { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; font-weight: 700; font-size: var(--step-1); }
.ehero__when span { display: inline-flex; gap: 0.5rem; align-items: center; }
.ehero__when svg { inline-size: 1.2em; color: var(--accent-ink); }
.ehero__media { aspect-ratio: 4 / 5; max-block-size: 30rem; box-shadow: var(--shadow-3); }
.event-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
@media (width >= 60rem) { .event-layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; } }
.event-aside { display: grid; gap: var(--space-s); }
@media (width >= 60rem) { .event-aside { position: sticky; top: calc(var(--header-h) + 2rem); } }
.factbox { padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); display: grid; gap: var(--space-s); }
.factbox dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; margin: 0; font-size: 1rem; }
.factbox dt { color: var(--ink-2); font-weight: 600; }
.factbox dd { margin: 0; font-weight: 700; }
.factbox .price { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; font-weight: 700; }
.factbox .price--long { font-size: var(--step-1); line-height: 1.3; }
.factbox .early { display: inline-block; padding: 0.3rem 0.7rem; border-radius: var(--r-s); background: var(--wiese-tint); color: var(--wiese-ink); font-weight: 700; font-size: 0.95rem; }
.factbox .btn { inline-size: 100%; }
.factbox__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.factbox__actions .btn { font-size: 0.95rem; padding-inline: 0.6rem; }
.event-text { font-size: var(--step-0); }
.event-text p { white-space: pre-line; }
.event-text h2 { font-size: var(--step-2); }
.event-leaders { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; inset: 0.6rem auto 0.6rem calc(1.3rem - 1px); inline-size: 2px; background: color-mix(in oklab, var(--accent) 45%, transparent); }
.timeline li::before { content: ""; inline-size: 1.1rem; block-size: 1.1rem; margin: 0.45rem auto 0; border: 3px solid var(--accent); background: var(--bg); position: relative; }
.timeline h3 { font-family: var(--font-display); color: var(--accent-ink); }
.roomcard .media { aspect-ratio: 3 / 2; }
.spec { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.spec li { margin: 0; padding: 0.2rem 0.7rem; border-radius: var(--r-pill); background: var(--bg-alt); font-size: 0.92rem; font-weight: 600; }
.formcard { padding: var(--space-l); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); counter-reset: step; }
.steps li { margin: 0; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; counter-increment: step; }
.steps li::before {
content: counter(step); inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center;
background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
}
.legal { padding-block: var(--space-xl) var(--space-2xl); }
.legal h2 { font-size: var(--step-2); margin-block-start: 1.8em; }
.legal h3 { font-size: var(--step-1); }
.todo { padding: 0.15em 0.4em; border-radius: 4px; background: #fff3b0; color: #4a3b00; font-weight: 700; }
.sg-swatches { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.sg-swatch { border-radius: var(--r-m); overflow: clip; border: 1px solid var(--line); background: var(--surface); }
.sg-swatch i { display: block; block-size: 6rem; }
.sg-swatch div { padding: 0.7rem 0.9rem; font-size: 0.92rem; display: grid; gap: 0.1rem; }
.sg-swatch code { font-size: 0.85rem; color: var(--ink-2); }
.sg-type > * + * { margin-top: 1rem; }
.sg-worlds { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.sg-world { padding: var(--space-m); border-radius: var(--r-l); background: var(--accent-tint); display: grid; gap: 0.6rem; }
.sg-world b { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent-ink); }
.sg-world .bar { block-size: 0.6rem; border-radius: 1rem; background: var(--accent); }
.sg-tones { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sg-tone { padding: var(--space-m); border-radius: var(--r-l); background: var(--bg); color: var(--ink); border: 1px solid var(--line); display: grid; gap: 0.7rem; }
.sg-tone h3 { font-size: var(--step-2); }
.sg-tone .sky { block-size: 4rem; border-radius: var(--r-m); background: linear-gradient(var(--sky-a), var(--sky-m), var(--sky-b)); }
code, pre { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; }
pre { padding: 1rem; border-radius: var(--r-m); background: var(--bg-alt); overflow-x: auto; font-size: 0.9rem; }
}
@layer motion {
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: vt-out 320ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) both; }
::view-transition-group(*) { animation-duration: 560ms; animation-timing-function: var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
:root[data-motion="reduziert"]::view-transition-group(*),
:root[data-motion="reduziert"]::view-transition-old(*),
:root[data-motion="reduziert"]::view-transition-new(*) { animation: none !important; }
@keyframes vt-out { to { opacity: 0; scale: 0.985; } }
@keyframes vt-in { from { opacity: 0; translate: 0 18px; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .reveal-head {
animation: head-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
}
:root:not([data-motion="reduziert"]) .reveal-arch {
animation: arch-open linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
}
:root:not([data-motion="reduziert"]) .reveal-arch > picture {
animation: img-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%;
}
:root:not([data-motion="reduziert"]) .reveal-up {
animation: up-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
}
:root:not([data-motion="reduziert"]) .phero__arc path {
stroke-dasharray: 1; animation: arc-draw 1.6s var(--ease-out) 0.2s both;
}
}
}
@keyframes head-in { from { opacity: 0; translate: 0 0.6em; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes arch-open { from { clip-path: inset(30% 10% 0 10% round 999px 999px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes img-settle { from { scale: 1.12; } to { scale: 1; } }
@keyframes up-in { from { opacity: 0; translate: 0 2.5rem; } to { opacity: 1; translate: 0 0; } }
@keyframes arc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
@layer utilities {
.center { text-align: center; margin-inline: auto; }
.mt-s { margin-block-start: var(--space-s); }
.mt-m { margin-block-start: var(--space-m); }
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }
.mb-l { margin-block-end: var(--space-l); }
.muted { color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.full { inline-size: 100%; }
.todo { background: #fff3b0; color: #4a3b00; border-radius: 4px; padding: 0 0.3em; font-weight: 700; }
:root[data-live] .todo { background: none; color: inherit; padding: 0; font-weight: inherit; }
@media print {
.site-header, .site-footer, .to-top, .hero__dock, .dock-strip, .subnav, .mobilmenu, .panel { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
a { color: #000; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
.phero, .ehero { padding-block: 1rem; background: none; }
}
}