/*! Craheim my Castle is my Home – Designsystem | Quelle: statisches Projekt src/assets/css (tools/sync-assets.mjs) */
@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;
}
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 5.6rem); }
@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; }
@property --aura-a      { syntax: '<color>'; inherits: true; initial-value: #9fd0f2; }
@property --aura-b      { syntax: '<color>'; inherits: true; initial-value: #e3ec8a; }
@property --aura-c      { syntax: '<color>'; inherits: true; initial-value: #f4c2d2; }
: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);
--step-display: clamp(2.4rem, 1.15rem + 5.6vw, 6.6rem);   
--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;
--aura-a: #9fd0f2; --aura-b: #e3ec8a; --aura-c: #f4c2d2;
transition: --aura-a 1.6s var(--ease-in-out), --aura-b 1.6s var(--ease-in-out), --aura-c 1.6s var(--ease-in-out), --flow-accent 1.2s var(--ease-in-out), --flow-bg 1.2s var(--ease-in-out);
}
@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: #44708c; --sky-m: #7fa7bf; --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;
--aura-a: #b9d6d0; --aura-b: #dfe9ef; --aura-c: #c8d9c2;
}
[data-tone="zweisam"] {
--bg-alt: light-dark(#fbf0f3, #2a1820);
--sky-a: #5b3570; --sky-m: #b5607f; --sky-b: #f1b3a0;
--display-wght: 500; --display-wdth: 94;
--accent: #c32a5c; --accent-ink: light-dark(#97173f, #ff9fbd); --accent-tint: light-dark(#fde7ee, #3a1624); --on-accent: #fff;
--r-m: 22px; --r-l: 32px;
--aura-a: #f6b8c9; --aura-b: #f9d6b8; --aura-c: #d9b8f0;
--breath-cycle: 12s;
}
[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;
--aura-a: #ffd76a; --aura-b: #8fd3ff; --aura-c: #b8e986;
}
[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;
--r-m: 14px; --r-l: 20px;
--aura-a: #7c3aed; --aura-b: #d6e43a; --aura-c: #ff5fa8;
}
[data-tone="klar"] {
--sky-a: #013b6b; --sky-m: #0b6db8; --sky-b: #3c9be0;
--display-wght: 600; --display-wdth: 88;
--r-m: 12px; --r-l: 18px;
--aura-a: #8ec5f0; --aura-b: #c9dceb; --aura-c: #a9d8cf;
}
[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);
--aura-a: #b8862b; --aura-b: #6c4a78; --aura-c: #2f4a6b;
}
[data-tone="standard"] {
color-scheme: light dark;
--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);
--display-wght: 640; --display-wdth: 92; --r-m: 18px; --r-l: 28px;
color: var(--ink);
}
: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: minmax(0, 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--accent { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
.btn--neon { --btn-bg: var(--lime); --btn-ink: var(--violett-nacht); box-shadow: 0.3rem 0.3rem 0 var(--pink); border-color: var(--violett-nacht); }
.btn--neon:hover { translate: -2px -3px; box-shadow: 0.5rem 0.5rem 0 var(--pink); }
.btn svg:last-child:not(:first-child) { transition: translate var(--dur-2) var(--ease-out); }
.btn:hover svg:last-child:not(:first-child) { translate: 0.2em 0; }
.meter { block-size: 0.8rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--accent) 18%, var(--surface)); overflow: clip; }
.meter span { display: block; block-size: 100%; inline-size: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--wiese))); }
.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)); }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.tags li { margin: 0; }
.tag {
display: inline-flex; align-items: center; gap: 0.4em;
padding: 0.22em 0.7em 0.24em; border-radius: var(--r-pill);
background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink);
font-size: 0.86rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.005em; white-space: nowrap;
}
.tag--aud { background: color-mix(in oklab, var(--tag, var(--accent)) 16%, var(--surface)); }
.tag--cat { display: inline-flex; align-items: center; gap: 0.4em; color: #fff; background: color-mix(in oklab, var(--tag) 82%, #0b1118); border-color: transparent; }
.tag--cat::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: #fff; }
.tag--aud::before { content: ""; inline-size: 0.55em; block-size: 0.55em; border-radius: 50%; background: var(--tag, var(--accent)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--tag, var(--accent)) 30%, transparent); }
.tag--theme { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 18%, transparent); color: var(--ink-2); }
.tag--new { background: var(--mohn); color: #fff; }
.tag--friends { background: var(--wiese); color: var(--schiefer); }
.badge {
display: inline-grid; place-items: center; min-block-size: 1.9rem; padding: 0.15rem 0.65rem; border-radius: var(--r-pill);
font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5);
}
.badge--new { background: var(--mohn-ink); color: #fff; }
.badge--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; }
.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; }
.linklike {
appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}
.linklike:hover { text-decoration-color: currentColor; }
.site-footer .linklike { color: #fff; text-decoration-color: color-mix(in oklab, #fff 35%, transparent); }
.switch { position: relative; display: inline-grid; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch__track {
inline-size: 3.2rem; block-size: 1.9rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 22%, var(--surface));
position: relative; transition: background-color var(--dur-2);
}
.switch__track::after {
content: ""; position: absolute; inset-block: 0.22rem; inset-inline-start: 0.22rem; aspect-ratio: 1; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: translate var(--dur-2) var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { translate: 1.3rem 0; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.privacy {
inline-size: min(36rem, calc(100vw - 1.5rem)); max-block-size: min(88dvh, 46rem);
margin: auto; padding: 0; border: 0; border-radius: var(--r-l); overflow: auto; overscroll-behavior: contain;
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
opacity: 0; translate: 0 1rem;
transition: opacity var(--dur-2), translate var(--dur-3) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
}
.privacy[open] { opacity: 1; translate: 0 0; }
@starting-style { .privacy[open] { opacity: 0; translate: 0 1rem; } }
.privacy::backdrop { background: color-mix(in oklab, var(--nacht) 55%, transparent); backdrop-filter: blur(6px); }
.privacy__head { display: grid; gap: 0.5rem; padding: var(--space-m) var(--space-m) var(--space-s); }
.privacy__head h2 { font-size: var(--step-2); }
.privacy__head p { color: var(--ink-2); }
.privacy__groups { display: grid; gap: 0.6rem; padding-inline: var(--space-s); }
.privacy__group { border-radius: var(--r-m); padding: 1rem 1.1rem; background: var(--bg-alt); display: grid; gap: 0.4rem; }
.privacy__group.is-optional { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent); }
.privacy__row { display: flex; gap: 1rem; align-items: start; justify-content: space-between; }
.privacy__row h3 { font-size: var(--step-0); font-family: var(--font-text); font-weight: 800; }
.privacy__row p { font-size: 0.95rem; color: var(--ink-2); margin-block-start: 0.15rem; }
.privacy__fest { flex: none; font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); }
.privacy details summary { cursor: pointer; font-size: 0.9rem; font-weight: 700; color: var(--accent-ink); inline-size: fit-content; }
.privacy__list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.6rem; }
.privacy__list li { display: grid; gap: 0.1rem; font-size: 0.9rem; padding-inline-start: 0.8rem; border-inline-start: 2px solid var(--line); }
.privacy__list span { color: var(--ink-2); }
.privacy__list small { color: var(--ink-2); font-size: 0.82rem; }
.privacy__msg { margin: 0.8rem var(--space-m) 0; padding: 0.6rem 0.9rem; border-radius: var(--r-m); background: var(--accent-tint); font-weight: 700; font-size: 0.95rem; }
.privacy__foot {
position: sticky; bottom: 0; display: flex; gap: 0.6rem 1rem; align-items: center; justify-content: space-between;
padding: var(--space-s) var(--space-m); margin-block-start: var(--space-s);
background: linear-gradient(transparent, var(--surface) 30%);
}
.privacy__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.9rem; }
.privacy__links :is(a, button) { color: var(--ink-2); }
.remember {
display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; justify-content: space-between;
padding: 0.8rem 0.9rem 0.8rem 1.1rem; border-radius: var(--r-l); max-inline-size: 40rem;
background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
box-shadow: 0 0.8rem 2rem -1.4rem color-mix(in oklab, var(--accent) 70%, transparent);
backdrop-filter: blur(8px);
opacity: 0; translate: 0 0.6rem; transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out);
}
.remember.is-in { opacity: 1; translate: 0 0; }
.remember.is-out { opacity: 0; translate: 0 -0.4rem; }
.remember__q { display: grid; gap: 0.15rem; font-size: 0.95rem; margin: 0; }
.remember__q span { color: var(--ink-2); font-size: 0.88rem; }
.remember__btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fmodal {
--fm: var(--fm-accent, var(--eibe));
inline-size: min(28rem, calc(100vw - 2rem)); margin: auto; padding: var(--space-l) var(--space-m) var(--space-m); border: 0; border-radius: var(--r-l);
display: grid; justify-items: center; gap: 0.7rem; text-align: center;
background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
opacity: 0; translate: 0 1rem; scale: 0.97;
transition: opacity var(--dur-2), translate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-spring), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
}
.fmodal:not([open]) { display: none; }
.fmodal[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .fmodal[open] { opacity: 0; translate: 0 1rem; scale: 0.97; } }
.fmodal::backdrop { background: color-mix(in oklab, var(--nacht) 55%, transparent); backdrop-filter: blur(6px); }
.fmodal__badge { inline-size: 5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--fm) 14%, var(--surface)); }
.fmodal__badge svg { inline-size: 70%; fill: none; stroke: var(--fm); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fmodal__badge circle, .fmodal__badge path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fmodal.is-in .fmodal__badge circle { transition: stroke-dashoffset 700ms var(--ease-out); stroke-dashoffset: 0; }
.fmodal.is-in .fmodal__badge path { transition: stroke-dashoffset 450ms 550ms var(--ease-out); stroke-dashoffset: 0; }
[data-motion="reduziert"] .fmodal__badge :is(circle, path) { stroke-dashoffset: 0; transition: none; }
.fmodal__title { font-size: var(--step-3); }
.fmodal__text { color: var(--ink-2); max-inline-size: 34ch; }
.fmodal__btn { --btn-bg: var(--fm); --btn-ink: #fff; margin-block-start: 0.4rem; }
.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, .offer-card { --pad: clamp(1rem, 0.8rem + 1cqi, 1.35rem); block-size: 100%; grid-template-rows: auto 1fr; }
.event-card .media, .offer-card .media { aspect-ratio: 4 / 3; border-radius: calc(var(--r-l) - 6px); margin: 6px 6px 0; }
.event-card .media img, .offer-card .media img { transition: scale 1.4s var(--ease-out), filter var(--dur-3); }
.event-card:has(.card__link:hover) .media img, .offer-card:has(.card__link:hover) .media img { scale: 1.07; }
.event-card .card__body, .offer-card .card__body { padding: var(--pad); padding-top: calc(var(--pad) * 0.8); align-content: start; gap: 0.6rem; }
.event-card h3, .offer-card h3 { font-size: clamp(1.15rem, 1rem + 0.8cqi, 1.45rem); line-height: 1.16; }
.event-card__date {
position: absolute; z-index: 2; top: 14px; left: 14px;
display: grid; justify-items: center; min-inline-size: 3.9rem; padding: 0.45rem 0.55rem 0.5rem;
border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45);
font-family: var(--font-display); line-height: 0.95;
}
.event-card__date b { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.03em; font-stretch: 80%; }
.event-card__date span { font-size: 0.78rem; font-weight: 800; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.2rem; }
.event-card__badges { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; gap: 0.3rem; }
.event-card__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.93rem; color: var(--ink-2); margin-top: auto; }
.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__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@container (width < 17rem) { .event-card h3 { font-size: 1.12rem; } }
.event-card { --cat: var(--accent); --cat2: var(--cat); --cat-ink: color-mix(in oklab, var(--cat) 72%, var(--ink)); border: 1.5px solid color-mix(in oklab, var(--cat) 32%, var(--line)); background: linear-gradient(180deg, color-mix(in oklab, var(--cat) 7%, var(--surface)), var(--surface) 55%); }
.event-card::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; block-size: 5px; background: linear-gradient(90deg, var(--cat), var(--cat2)); }
.event-card .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--cat) 38%, transparent), transparent 42%); opacity: 0.85; transition: opacity var(--dur-3); }
.event-card:has(.card__link:hover) .media::after { opacity: 1; }
.event-card .event-card__date { box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45); }
.event-card__meta svg { color: var(--cat-ink); }
.event-card .event-card__date { padding: 0.45rem 0 0; overflow: clip; }
.event-card .event-card__date span { justify-self: stretch; text-align: center; margin: 0.3rem 0 0; padding: 0.25rem 0.5rem 0.3rem; color: #fff; background: color-mix(in oklab, var(--cat) 80%, #0b1118); }
.event-card__cat { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cat-ink); }
.event-card__cat i { flex: none; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--cat); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cat) 22%, transparent); }
.event-card__cat .event-card__cat2 { background: var(--cat2); margin-inline-start: -0.15rem; }
.event-card h3 .card__link { background: linear-gradient(var(--cat), var(--cat)) 0 100% / 0 2px no-repeat; transition: background-size 450ms var(--ease-out); }
.event-card:has(.card__link:hover) h3 .card__link { background-size: 100% 2px; }
.event-card:has(.card__link:hover), .event-card:has(.card__link:focus-visible) { border-color: color-mix(in oklab, var(--cat) 55%, transparent); box-shadow: 0 1.4rem 2.4rem -1.6rem color-mix(in oklab, var(--cat) 75%, #000); }
.event-card.is-past { --cat: color-mix(in oklab, var(--cat) 40%, var(--schiefer-2)); --cat2: var(--cat); }
.offer-card { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
.offer-card__icon { position: absolute; z-index: 2; top: 14px; left: 14px; inline-size: 3rem; block-size: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 24px -12px rgb(0 0 0 / .5); }
.offer-card__icon svg { inline-size: 1.4rem; block-size: 1.4rem; }
.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) 55%, transparent);
border: 1px solid color-mix(in oklab, #fff 26%, transparent);
backdrop-filter: blur(20px) saturate(1.5);
box-shadow: 0 20px 50px -24px rgb(0 0 0 / .6);
transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-2);
overflow: clip; isolation: isolate;
}
.wcard__flow {
position: absolute; z-index: -2; inset: -70%; pointer-events: none;
background: conic-gradient(from 0deg,
color-mix(in oklab, var(--aura-a) 58%, var(--nacht)), color-mix(in oklab, var(--accent) 56%, var(--nacht)),
color-mix(in oklab, var(--aura-c) 56%, var(--nacht)), color-mix(in oklab, var(--aura-b) 46%, var(--nacht)),
color-mix(in oklab, var(--aura-a) 58%, var(--nacht)));
transition: opacity var(--dur-3);
}
.wcard::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgb(10 16 24 / .12), rgb(10 16 24 / .42)); transition: opacity var(--dur-3); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .wcard__flow { animation: spin 28s linear infinite; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .wcard:nth-of-type(2) .wcard__flow { animation-duration: 34s; animation-direction: reverse; }
}
:root[data-kontrast="hoch"] .wcard__flow { display: none; }
:root[data-kontrast="hoch"] .wcard { background: var(--nacht); }
.wcard:hover { translate: 0 -4px; border-color: color-mix(in oklab, var(--accent) 75%, #fff); }
.wcard:hover::after { opacity: 0.55; }
.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 { position: relative; inline-size: 0.6em; block-size: 0.6em; border-radius: 50%; background: var(--accent); }
.wcard__label .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: 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% { opacity: 0.7; scale: 1; } 70%, 100% { opacity: 0; scale: 3.2; } }
.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__spin { position: absolute; inset: 0; animation: spin 26s linear infinite; animation-play-state: var(--play, running); }
.ring svg.ring__text { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.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; isolation: isolate; overflow: clip;
background: radial-gradient(90% 70% at 85% 0%, color-mix(in oklab, var(--himmel) 34%, transparent), transparent 60%),
radial-gradient(70% 60% at 0% 100%, color-mix(in oklab, var(--eibe) 30%, transparent), transparent 60%), var(--nacht);
color: #e9eef2; padding-block: var(--space-3xl) var(--space-l);
--accent-ink: var(--lime); --link: #fff; --ink: #fff; --ink-2: #c5ced6; --line: #2a3846;
}
.site-footer__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.site-footer__sym { position: absolute; inline-size: clamp(22rem, 60vw, 54rem); right: -12%; top: -18%; color: #fff; opacity: 0.09; stroke-width: 2px; }
.site-footer__hero { display: grid; gap: var(--space-m); justify-items: start; padding-block-end: var(--space-2xl); margin-block-end: var(--space-xl); border-bottom: 1px solid var(--line); }
.site-footer__claim { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; font-weight: 500; font-stretch: 94%; max-inline-size: 32ch; color: #fff; }
.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.3fr 1fr 1.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 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 components {
.site-header {
position: fixed; inset: 0 0 auto; z-index: 50;
padding: var(--header-pad, 0.75rem) var(--gutter) 0;
pointer-events: none;
transition: translate var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out);
view-transition-name: site-header;
}
.site-header__bar {
position: relative; 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 0.9rem;
border-radius: var(--r-pill);
color: var(--header-ink, var(--ink));
background: var(--header-bg, color-mix(in oklab, var(--bg) 80%, transparent));
border: 1px solid var(--header-line, color-mix(in oklab, var(--ink) 8%, transparent));
backdrop-filter: blur(20px) saturate(1.7);
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.55rem; }
.site-header.is-scrolled .site-header__bar {
max-width: 76rem; min-height: calc(var(--header-h) - 0.6rem);
border-color: color-mix(in oklab, var(--flow-accent) 55%, transparent);
box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in oklab, var(--flow-accent) 22%, transparent);
}
.brand {
--sym: 2.85rem;
display: inline-flex; align-items: center; gap: 0.7rem; flex: none;
color: inherit; text-decoration: none; border-radius: var(--r-s);
}
.brand__sym { inline-size: var(--sym); flex: none; color: var(--brand-sym, light-dark(var(--himmel-ci), #8fd0ff)); transition: inline-size var(--dur-3) var(--ease-out), color var(--dur-3), rotate var(--dur-4) var(--ease-spring); }
.brand__sym svg { inline-size: 100%; block-size: auto; fill: currentColor; overflow: visible; }
.brand:hover .brand__sym { rotate: -8deg; }
.brand__text { display: grid; gap: 0.18rem; line-height: 1; }
.brand__word { display: block; inline-size: 9.2rem; color: inherit; }
.brand__word svg { inline-size: 100%; block-size: auto; fill: currentColor; }
.brand__sub {
font-family: var(--font-text); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase;
color: var(--brand-sub, var(--accent-ink)); padding-inline-start: 0.08rem; white-space: nowrap;
}
.has-hero .site-header:not(.is-scrolled) .brand { --brand-sym: #fff; --brand-sub: var(--lime); }
:is([data-tone="still"], [data-tone="familie"], [data-tone="zweisam"]) .has-hero .site-header:not(.is-scrolled) .brand { --brand-sub: #fff; }
.brand--light { --brand-sym: #fff; --brand-sub: var(--lime); color: #fff; }
.brand--stack { flex-direction: column; align-items: flex-start; --sym: 4rem; }
.brand--stack .brand__word { inline-size: 12rem; }
.brand--stack .brand__sub { font-size: 0.78rem; }
.is-scrolled .brand { --sym: 2.4rem; }
[data-tone="jung"] .brand { --brand-sub: var(--lime); --brand-sym: var(--lime); }
[data-tone="fest"] .brand { --brand-sym: var(--gold); }
.mainnav { margin-inline: auto; }
.mainnav__list { display: flex; gap: 0.1rem; align-items: center; margin: 0; padding: 0; list-style: none; position: relative; }
.mainnav__item { display: flex; align-items: center; margin: 0; }
.mainnav__link {
position: relative; display: inline-flex; align-items: center; gap: 0.5em;
padding: 0.6em 0.3em 0.6em 0.8em; border-radius: var(--r-pill);
color: inherit; text-decoration: none; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.005em; white-space: nowrap;
}
.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), border-radius var(--dur-2);
}
.mainnav__item:hover .dot, .mainnav__item:focus-within .dot, .mainnav__link[aria-current] .dot { scale: 1.6; }
.mainnav__link::after {
content: ""; position: absolute; inset: auto 0.7em 0.18em 1.85em; height: 3px; border-radius: 3px; background: var(--accent);
scale: 0 1; transform-origin: left; transition: scale var(--dur-3) var(--ease-out);
}
.mainnav__link[aria-current]::after, .mainnav__item:hover .mainnav__link::after { scale: 1 1; }
.mainnav__toggle {
display: inline-grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem;
border: 0; background: none; color: inherit; border-radius: 50%; cursor: pointer; margin-inline-end: 0.15rem;
}
.mainnav__toggle svg { inline-size: 0.85rem; 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 12%, 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, var(--ind-color, currentColor) 14%, transparent);
opacity: 0; transition: left var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), opacity var(--dur-2), background-color var(--dur-3);
pointer-events: none;
}
.site-header__tools { display: flex; align-items: center; gap: 0.3rem; 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), rotate var(--dur-3) var(--ease-spring);
}
.tool-btn:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.tool-btn:hover svg { scale: 1.08; }
.tool-btn svg { inline-size: 1.35rem; block-size: 1.35rem; transition: scale var(--dur-2) var(--ease-spring); }
.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); }
[data-tone="jung"] .site-header .btn--accent { --btn-bg: var(--lime); --btn-ink: var(--violett-nacht); }
@media (width >= 68rem) and (width < 92rem) {
.brand__word { inline-size: 7.4rem; }
.brand__sub { font-size: 0.56rem; letter-spacing: 0.3em; }
.brand { --sym: 2.5rem; gap: 0.55rem; }
.mainnav__link { font-size: 0.95rem; padding-inline-start: 0.6em; }
.site-header__bar { gap: 0.6rem; }
}
@media (width >= 68rem) and (width < 80rem) {
.brand__text { display: none; }
.brand { --sym: 2.9rem; }
}
.menu-btn {
display: none; align-items: center; gap: 0.6rem; 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); }
[data-tone="jung"] .menu-btn { background: var(--lime); color: var(--violett-nacht); }
.menu-btn__icon { display: grid; gap: 4px; inline-size: 1.15rem; }
.menu-btn__icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: inline-size var(--dur-2) var(--ease-out); }
.menu-btn__icon span:nth-child(2) { inline-size: 70%; }
.menu-btn:hover .menu-btn__icon span:nth-child(2) { inline-size: 100%; }
@media (width < 68rem) {
.mainnav, .site-header__tools .btn--accent { display: none; }
.menu-btn { display: inline-flex; }
:root { --header-h: 4rem; }
.brand__word { inline-size: 8.2rem; }
.brand { --sym: 2.5rem; }
}
@media (width < 34rem) { .site-header__tools .tool-btn { display: none; } .site-header__bar { padding-inline-start: 0.7rem; } }
@media (width < 24rem) { .brand__word { inline-size: 6.8rem; } .brand__sub { font-size: 0.52rem; letter-spacing: 0.26em; } .brand { --sym: 2.2rem; gap: 0.5rem; } .menu-btn__label { display: none; } .menu-btn { padding-inline: 0.9rem; } }
.mega {
position: absolute; top: calc(100% + 0.7rem); left: 50%; translate: -50% 0;
inline-size: min(66rem, 94vw);
display: grid; grid-template-columns: 1fr 1.2fr 0.95fr; gap: var(--space-l);
padding: var(--space-l); border-radius: calc(var(--r-l) + 6px);
background:
radial-gradient(60% 90% at 0% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
var(--surface);
color: var(--ink);
border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
box-shadow: var(--shadow-3), 0 0 0 6px color-mix(in oklab, var(--surface) 40%, transparent);
overflow: clip;
opacity: 0; clip-path: inset(0 0 100% 0 round 24px); translate: -50% -10px;
transition: opacity var(--dur-2) var(--ease-out), clip-path var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out), display var(--dur-3) allow-discrete;
transition-behavior: allow-discrete;
}
.mega:not([hidden]) { opacity: 1; clip-path: inset(0 0 0 0 round 24px); translate: -50% 0; }
@starting-style { .mega:not([hidden]) { opacity: 0; clip-path: inset(0 0 100% 0 round 24px); translate: -50% -10px; } }
.mega__intro { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
.mega__num {
font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 4.6rem; line-height: 0.8;
color: transparent; -webkit-text-stroke: 1.5px var(--accent); letter-spacing: -0.04em;
}
.mega__intro h2 { font-size: var(--step-3); line-height: 1; }
.mega__intro p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.5; }
.mega .btn--accent { --btn-bg: var(--accent); --btn-ink: var(--on-accent); }
.mega__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; align-content: start; }
.mega__links li { margin: 0; }
.mega__links a {
position: relative; display: grid; grid-template-columns: 2.1rem 1fr auto; align-items: center; gap: 0.6rem;
padding: 0.7rem 0.85rem; border-radius: var(--r-m); color: var(--ink); text-decoration: none; overflow: clip;
transition: background-color var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.mega__links a::before { content: ""; position: absolute; inset: 0.6rem auto 0.6rem 0; inline-size: 4px; border-radius: 4px; background: var(--accent); scale: 1 0; transition: scale var(--dur-2) var(--ease-out); }
.mega__links a:is(:hover, :focus-visible, .is-active) { background: var(--accent-tint); translate: 0.25rem 0; }
.mega__links a:is(:hover, :focus-visible, .is-active)::before { scale: 1 1; }
.mega__ln { font-family: var(--font-display); font-weight: 750; font-stretch: 80%; color: var(--accent-ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.mega__lt { display: grid; gap: 0.1rem; }
.mega__lt b { font-size: 1.08rem; }
.mega__lt small { color: var(--ink-2); font-size: 0.92rem; }
.mega__links svg { inline-size: 1.15rem; color: var(--accent-ink); opacity: 0; translate: -0.5rem 0; transition: opacity var(--dur-2), translate var(--dur-2) var(--ease-out); }
.mega__links a:is(:hover, :focus-visible) svg { opacity: 1; translate: 0 0; }
.mega__links li, .mega__intro > * { opacity: 1; translate: 0 0; transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: calc(80ms + var(--i, 0) * 45ms); }
@starting-style { .mega:not([hidden]) :is(.mega__links li, .mega__intro > *) { opacity: 0; translate: 0 10px; } }
.mega__preview { position: relative; border-radius: var(--r-arch); overflow: clip; min-block-size: 17rem; background: var(--accent-tint); isolation: isolate; }
.mega__img { position: absolute; inset: 0; opacity: 0; scale: 1.06; transition: opacity 600ms var(--ease-out), scale 1.6s var(--ease-out); background: var(--img-color); }
.mega__img.is-active { opacity: 1; scale: 1; }
.mega__img picture, .mega__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mega__preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--accent) 45%, transparent), transparent 55%); mix-blend-mode: multiply; z-index: 1; }
.mega__sym { position: absolute; z-index: 2; inline-size: 62%; right: -12%; bottom: -10%; color: #fff; stroke-width: 2.5px; opacity: 0.9; }
.mobilmenu {
--mm-accent: var(--himmel);
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)); will-change: clip-path; contain: layout paint;
transition: clip-path 640ms var(--ease-in-out), display 640ms allow-discrete, overlay 640ms 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__aura {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: clip;
background:
radial-gradient(60% 45% at 85% 12%, color-mix(in oklab, var(--mm-accent) 55%, transparent), transparent 70%),
radial-gradient(70% 50% at 0% 95%, color-mix(in oklab, var(--mm-accent) 30%, transparent), transparent 70%);
transition: background 900ms var(--ease-in-out);
}
.mobilmenu__sym { position: absolute; inline-size: 120vmin; right: -42vmin; top: 6vh; color: #fff; opacity: 0.08; stroke-width: 1.5px; animation: mm-float 18s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running); }
@keyframes mm-float { to { translate: -4vmin 3vmin; scale: 1.06; } }
.mobilmenu__inner { position: relative; z-index: 1; display: grid; gap: var(--space-m); padding: 0.75rem var(--gutter) 2.5rem; min-height: 100%; align-content: start; max-inline-size: 46rem; margin-inline: auto; }
.mobilmenu__top {
display: flex; align-items: center; justify-content: space-between; min-height: 4rem; position: sticky; top: 0; z-index: 3;
padding-block: 0.4rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
background: linear-gradient(var(--nacht) 70%, color-mix(in oklab, var(--nacht) 0%, transparent));
}
.mobilmenu__top::after { content: ""; position: absolute; inset: auto 0 -1.2rem; block-size: 1.2rem; pointer-events: none; background: linear-gradient(var(--nacht), transparent); }
.mobilmenu .mworld[data-world="schloss"] { --accent: #c9d3dc; --on-accent: var(--schiefer); }
.mobilmenu__close { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.9rem; padding: 0 1.1rem 0 0.9rem; border: 0; border-radius: var(--r-pill); background: #fff; color: var(--schiefer); font-weight: 700; cursor: pointer; }
.mobilmenu__close svg { inline-size: 1.2rem; transition: rotate var(--dur-3) var(--ease-spring); }
.mobilmenu__close:hover svg { rotate: 90deg; }
.mobilmenu__worlds { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; counter-reset: w; }
.mworld { margin: 0; border-bottom: 1px solid color-mix(in oklab, #fff 12%, transparent); }
.mworld details { border-radius: var(--r-l); transition: background-color var(--dur-3); }
.mworld details[open] { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.mworld summary {
display: grid; grid-template-columns: 2.2rem 1fr auto auto; align-items: center; gap: 0.8rem;
padding: 0.85rem 0.5rem 0.85rem 0.6rem; color: #fff; cursor: pointer; list-style: none; border-radius: var(--r-l);
}
.mworld summary::-webkit-details-marker { display: none; }
.mworld__num { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: 1.05rem; color: var(--accent); letter-spacing: 0.02em; }
.mworld__txt strong { display: block; font-family: var(--font-display); font-size: clamp(1.45rem, 1rem + 2.6vw, 2.2rem); line-height: 1; font-weight: 700; font-stretch: 88%; letter-spacing: -0.015em; transition: color var(--dur-2), translate var(--dur-3) var(--ease-out); }
.mworld summary:hover strong, .mworld details[open] strong { color: var(--accent); translate: 0.3rem 0; }
.mworld__txt small { display: block; color: color-mix(in oklab, #fff 70%, transparent); font-size: 0.95rem; margin-top: 0.3rem; }
.mworld__img { inline-size: 3.4rem; aspect-ratio: 3 / 4; border-radius: var(--r-arch); overflow: clip; position: relative; background: var(--img-color); opacity: 0.9; rotate: 4deg; transition: rotate var(--dur-3) var(--ease-spring), scale var(--dur-3) var(--ease-spring); }
.mworld details[open] .mworld__img, .mworld summary:hover .mworld__img { rotate: -3deg; scale: 1.08; }
.mworld__img picture, .mworld__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mworld__chev { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, #fff 10%, transparent); color: #fff; transition: rotate var(--dur-2) var(--ease-out), background-color var(--dur-2); }
.mworld details[open] .mworld__chev { rotate: 180deg; background: var(--accent); color: var(--on-accent); }
.mworld details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
.mworld details[open]::details-content { block-size: auto; }
.mworld ul { list-style: none; margin: 0; padding: 0 0.8rem 0.9rem 3.6rem; display: grid; gap: 0.05rem; }
.mworld ul li { margin: 0; }
.mworld ul a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.2rem; color: #fff; font-weight: 600; font-size: 1.08rem; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, #fff 10%, transparent); }
.mworld ul a svg { inline-size: 1.1rem; color: var(--accent); transition: translate var(--dur-2) var(--ease-out); }
.mworld ul a:hover svg { translate: 0.3rem 0; }
.mworld details[open] ul li { animation: mm-link 520ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes mm-link { from { opacity: 0; translate: -0.8rem 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.95rem 0.4rem; border-radius: var(--r-l);
background: color-mix(in oklab, #fff 8%, transparent); border: 1px solid color-mix(in oklab, #fff 12%, transparent);
color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: background-color var(--dur-2), translate var(--dur-2) var(--ease-out);
}
.mobilmenu__quick a:hover { background: color-mix(in oklab, var(--mm-accent) 30%, transparent); translate: 0 -3px; }
.mobilmenu__quick svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--lime); }
.mobilmenu__search {
display: flex; align-items: center; gap: 0.7rem; inline-size: 100%; min-height: 3.2rem; padding: 0 1.1rem;
border-radius: var(--r-pill); border: 1px solid color-mix(in oklab, #fff 16%, transparent);
background: color-mix(in oklab, #fff 6%, transparent); color: color-mix(in oklab, #fff 78%, transparent);
font: inherit; font-size: 1rem; text-align: start; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2);
}
.mobilmenu__search:hover { background: color-mix(in oklab, #fff 12%, transparent); border-color: color-mix(in oklab, #fff 30%, transparent); }
.mobilmenu__search svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--lime); flex: none; }
.mobilmenu__foot { padding-block: var(--space-m) 0; opacity: 0.85; }
.mobilmenu__foot .lettering { inline-size: min(100%, 22rem); }
.mobilmenu :is(.mworld, .mobilmenu__quick > *, .mobilmenu__search, .mobilmenu__foot) {
opacity: 0; translate: 2.5rem 0;
transition: opacity 520ms var(--ease-out), translate 700ms var(--ease-out);
transition-delay: calc(160ms + var(--i, 0) * 55ms);
}
.mobilmenu:popover-open :is(.mworld, .mobilmenu__quick > *, .mobilmenu__search, .mobilmenu__foot) { opacity: 1; translate: 0 0; }
@starting-style {
.mobilmenu:popover-open :is(.mworld, .mobilmenu__quick > *, .mobilmenu__search, .mobilmenu__foot) { opacity: 0; translate: 2.5rem 0; }
}
@media (width < 26rem) {
.mobilmenu__close span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.mobilmenu__close { padding: 0; inline-size: 2.9rem; justify-content: center; }
}
@media (width >= 40rem) {
.mobilmenu__worlds { gap: 0.3rem; }
.mworld__img { inline-size: 4.4rem; }
}
}
@layer sections {
.hero {
--img-ratio: 1.4977;      
--dome-x: 0.54;           
--dome-top: 0.115;        
--dome-at: 0.34;          
--W: max(100cqw, 100cqh * (1 - var(--dome-at)) / (1 - var(--dome-top)) * var(--img-ratio));
--L: clamp(100cqw - var(--W), 50cqw - var(--W) * var(--dome-x), 0px);
position: relative; isolation: isolate;
block-size: max(100svh, 40rem);
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__halo, .hero__script { --dome-at: 0.36; }
.hero__scrim { block-size: 72%; }
}
.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: var(--L);
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: 40%; z-index: 2; pointer-events: none;
background: linear-gradient(to bottom, rgb(0 12 32 / .28), transparent);
}
.hero__sky {
overflow: clip;
background: linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-m) 22%, var(--sky-b) 46%, var(--sky-b) 100%);
}
.hero__sky::after { 
content: ""; position: absolute; inline-size: 70%; aspect-ratio: 1.4; left: 40%; top: -18%; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in oklab, #fff 36%, transparent), transparent);
}
.hero__halo {
--size: min(76cqh, 64cqw);
position: absolute; z-index: 3; pointer-events: none;
inline-size: var(--size); aspect-ratio: 1000 / 987.5;
left: calc(var(--L) + var(--W) * var(--dome-x)); top: calc(100cqh * var(--dome-at) + 4cqh);
translate: calc(-50% + var(--hx, 0px)) calc(-50% + var(--hy, 0px));
color: #fff;
}
.hero__halo-in { position: absolute; inset: 0; }
.hero__glow { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, #fff 30%, transparent) 0%, transparent 62%); }
.hero__sym { position: absolute; inset: 0; --sw: 3.4; opacity: 0.5; filter: drop-shadow(0 0 16px rgb(255 255 255 / .35)); }
[data-tone="jung"] .hero__halo { color: var(--lime); }
[data-tone="fest"] .hero__halo { color: var(--gold); }
.hero__script {
position: absolute; z-index: 5; pointer-events: none;
inset-inline-start: max(var(--gutter), calc((100cqw - var(--wide)) / 2));
inset-block-start: calc(var(--header-h) + max(3.5cqh, 1.6rem));
inline-size: min(40cqw, (100cqh * var(--dome-at) - var(--header-h) - 3cqh) * 2.6, 46rem);
filter: drop-shadow(0 2px 14px rgb(0 25 60 / .35));
translate: var(--sx, 0) var(--sy, 0);
}
.lettering--hero { --lettering-fill: linear-gradient(100deg, #fff 0 46%, var(--lime) 72%); }
[data-tone="jung"] .lettering--hero { --lettering-fill: linear-gradient(100deg, var(--lime) 0 40%, var(--pink) 80%); }
[data-tone="fest"] .lettering--hero { --lettering-fill: linear-gradient(100deg, #fff 0 40%, var(--gold) 75%); }
[data-tone="zweisam"] .lettering--hero { --lettering-fill: linear-gradient(100deg, #fff 0 40%, #ffc2d4 75%); }
@container hero (aspect-ratio < 0.9) {
.hero__script { inset-inline-start: 50%; translate: calc(-50% + var(--sx, 0px)) var(--sy, 0); inline-size: min(82cqw, (100cqh * var(--dome-at) - var(--header-h) - 3cqh) * 2.3); }
}
.hero__scrim {
position: absolute; inset: auto 0 0; block-size: 64%; z-index: 6; pointer-events: none;
background: linear-gradient(to top,
color-mix(in oklab, var(--nacht) 90%, transparent) 0%,
color-mix(in oklab, var(--nacht) 70%, transparent) 30%,
color-mix(in oklab, var(--nacht) 28%, transparent) 62%,
transparent 100%);
}
.hero__content {
position: absolute; z-index: 7; 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: 46rem; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start;
padding: 0.35rem 0.9rem 0.35rem 0.4rem; border-radius: var(--r-pill);
background: color-mix(in oklab, #fff 14%, transparent); border: 1px solid color-mix(in oklab, #fff 28%, transparent);
backdrop-filter: blur(10px); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.hero__eyebrow-sym { inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; background: #fff; color: var(--himmel-ci); display: grid; place-items: center; }
.hero__eyebrow-sym svg { inline-size: 70%; fill: currentColor; }
[data-tone="jung"] .hero__eyebrow-sym { background: var(--lime); color: var(--violett-nacht); }
.hero__title {
font-size: clamp(2.1rem, 1.3rem + 2.8cqw, 4rem); line-height: 1.02; color: #fff;
font-weight: 660; font-stretch: 92%; letter-spacing: -0.02em; max-inline-size: 18ch;
text-shadow: 0 2px 24px rgb(0 15 35 / .35);
}
.hero__lead { font-size: var(--step-1); line-height: 1.45; color: rgb(255 255 255 / .92); max-inline-size: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block-start: 0.3rem; }
.hero__actions .btn { min-height: 3.4rem; font-size: var(--step-0); padding-inline: 1.4em; }
.hero__dock { display: grid; gap: 0.7rem; }
@container hero (width < 64rem) { .hero__dock { display: none; } }
.hero__scroll {
position: absolute; z-index: 7; left: 50%; bottom: 1rem; translate: -50% 0;
inline-size: 2.8rem; block-size: 2.8rem; border-radius: 50%; display: none; place-items: center; color: #fff;
border: 1.5px solid color-mix(in oklab, #fff 50%, transparent);
}
.hero__scroll svg { inline-size: 1.2rem; }
@container hero (width >= 64rem) and (height >= 46rem) { .hero__scroll { display: grid; } }
.dock-strip { background: var(--nacht); padding: 0.8rem var(--gutter) 1.2rem; overflow: clip; }
.dock-strip .slider { --slide: min(82vw, 21rem); }
.dock-strip .wcard { background: #1e2a37; block-size: 100%; }
.dock-strip .wcard__flow { opacity: 0.85; }
@media (width >= 64rem) { .dock-strip { display: none; } }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) {
.hero__glow { animation: glow-in 2.4s var(--ease-out) both; }
.hero__halo-in { animation: fade-in 2s var(--ease-out) 0.2s both, halo-breathe var(--breath-cycle) var(--ease-breath) 2.4s infinite; }
.hero__text > * { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(0.5s + var(--i, 0) * 110ms); }
.hero__dock > * { animation: dock-in 1s var(--ease-out) both; animation-delay: calc(1.6s + var(--i, 0) * 140ms); }
.hero__scroll { animation: cue 2.6s var(--ease-in-out) 3s infinite; animation-play-state: var(--play, running); }
.hero__sky::after { animation: sun-drift 40s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running); }
.lettering--hero { animation: fade-up 1.6s var(--ease-out) 0.3s both; }
@media (width >= 64rem) {
.hero__cut { animation: hero-settle 2.4s var(--ease-out) both; }
.lettering--hero { animation: write-on 2.6s cubic-bezier(.45, 0, .3, 1) 0.7s both; }
.hero__sym { animation: sym-draw 3.2s cubic-bezier(.6, 0, .3, 1) 0.2s both; }
.hero__text > * { animation-delay: calc(1.3s + var(--i, 0) * 120ms); }
}
}
}
@keyframes sun-drift { from { translate: -12% 6%; } to { translate: 14% -4%; } }
@keyframes fade-up { from { opacity: 0; translate: 0 1rem; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes hero-settle { from { scale: 1.05; } to { scale: 1; } }
@keyframes sym-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes halo-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes glow-in { from { opacity: 0; scale: 0.6; } }
@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; } }
@keyframes cue { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 8px; } }
.hero__sym { stroke-dasharray: 1; stroke-dashoffset: 0; }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .hero__halo { animation: halo-out linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
:root:not([data-motion="reduziert"]) .hero__script { animation: script-up linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
:root:not([data-motion="reduziert"]) .hero__content { animation: content-lift linear both; animation-timeline: scroll(root); animation-range: 0 80svh; }
}
}
@keyframes halo-out { to { scale: 1.45; opacity: 0.2; } }
@keyframes script-up { to { transform: translateY(-12cqh); opacity: 0; } }
@keyframes content-lift { to { transform: translateY(-6cqh); opacity: 0; } }
}
@layer sections {
.foryou {
position: relative; isolation: isolate; overflow: clip;
padding-block: var(--space-3xl) var(--space-2xl);
background: color-mix(in oklab, var(--aura-a) 22%, var(--flow-bg));  
}
.foryou__aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.foryou__aura span {
position: absolute; inline-size: max(40rem, 60vw); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklab, var(--c) 55%, transparent) 0%, transparent 62%);
animation: aura-drift 26s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running);
}
.foryou__aura span:nth-child(1) { --c: var(--aura-a); left: -20%; top: -30%; }
.foryou__aura span:nth-child(2) { --c: var(--aura-b); right: -25%; top: 10%; animation-duration: 31s; animation-direction: alternate-reverse; }
.foryou__aura span:nth-child(3) { --c: var(--aura-c); left: 20%; bottom: -50%; animation-duration: 37s; }
[data-tone="jung"] .foryou__aura span, [data-tone="fest"] .foryou__aura span { opacity: 0.38; }
[data-tone="jung"] .foryou__aura span:nth-child(2) { opacity: 0.22; }
@keyframes aura-drift { 0% { translate: 0 0; scale: 1; } 50% { translate: 6vw 4vh; scale: 1.12; } 100% { translate: -4vw 8vh; scale: 0.95; } }
.foryou__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 60rem) { .foryou__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.foryou__main { display: grid; gap: var(--space-m); align-content: start; }
.sentence {
font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: calc(var(--display-wdth) * 1%);
font-size: clamp(1.85rem, 1rem + 2.7vw, 3.7rem); line-height: 1.22; letter-spacing: -0.025em;
color: var(--ink); text-wrap: balance; max-inline-size: 21ch;
}
.sentence p { max-inline-size: none; }
.sentence__slot { position: relative; display: inline-block; vertical-align: baseline; }
.sentence__slot::after {
content: ""; position: absolute; right: 0.42em; top: 50%; inline-size: 0.36em; block-size: 0.36em; translate: 0 -70%; rotate: 45deg;
border-right: 0.08em solid var(--on-accent); border-bottom: 0.08em solid var(--on-accent); pointer-events: none;
transition: border-color var(--dur-3);
}
.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.06em 0.45em; margin: 0.06em 0;
border: 0; border-radius: 0.3em;
background: var(--accent);
box-shadow: 0 0.08em 0 color-mix(in oklab, var(--accent-ink) 70%, transparent), 0 0.4em 1em -0.5em color-mix(in oklab, var(--accent) 80%, transparent);
transition: background-color var(--dur-3) var(--ease-in-out), color var(--dur-3), box-shadow var(--dur-3);
}
.sentence__slot[data-slot="was"] select { background: var(--ink); color: var(--bg); box-shadow: 0 0.08em 0 color-mix(in oklab, var(--ink) 60%, transparent); }
.sentence__slot[data-slot="was"]::after { border-color: var(--bg); }
.sentence select:hover { filter: brightness(1.06); }
.sentence select:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.sentence select option { font-family: var(--font-text); font-size: 1.05rem; color: var(--schiefer); background: #fff; }
.sentence__slot.is-changed select { animation: slot-pop 700ms var(--ease-spring); }
@keyframes slot-pop { 0% { scale: 1; } 30% { scale: 1.08; rotate: -1.5deg; } 100% { scale: 1; rotate: 0deg; } }
.foryou__mood { display: grid; gap: 0.6rem; max-inline-size: 40rem; }
.foryou__head { font-size: var(--step-3); color: var(--accent-ink); }
.foryou__text { font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.foryou__line { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); }
.foryou__line svg { inline-size: 1.2rem; color: var(--accent-ink); flex: none; }
.foryou__mood.is-swapping > * { animation: mood-in 700ms var(--ease-out) both; }
.foryou__mood.is-swapping > :nth-child(2) { animation-delay: 60ms; }
.foryou__mood.is-swapping > :nth-child(3) { animation-delay: 120ms; }
@keyframes mood-in { from { opacity: 0; translate: 0 0.6rem; filter: blur(4px); } }
.foryou__visual { position: relative; justify-self: center; inline-size: min(100%, 32rem); }
.foryou__visual .symwin__line { position: absolute; inset: 0; color: var(--accent); --sw: 5; pointer-events: none; }
.foryou__results { margin-block-start: var(--space-2xl); }
.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-2); }
.slider--foryou { --slide: min(80vw, 20rem); }
.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: none;
}
.rail::-webkit-scrollbar { display: none; }
.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; }
.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; }
.doors-section { position: relative; overflow: clip; isolation: isolate; }
.doors-section__sym { position: absolute; z-index: -1; inline-size: clamp(30rem, 70vw, 64rem); right: -18%; top: -12%; color: var(--accent); opacity: 0.12; --sw: 2.5; }
.slider--doors { --slide: min(78vw, 22rem); }
.door { position: relative; container-type: inline-size; block-size: clamp(28rem, 66svh, 34rem); }
.door__frame {
position: absolute; inset: 0; overflow: clip; isolation: isolate;
border-radius: 999px 999px var(--r-l) var(--r-l); background: var(--accent); color: #fff;
box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--accent-ink) 80%, black);
transition: box-shadow var(--dur-3), translate var(--dur-3) var(--ease-out);
}
.door__frame::before { 
content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
border: 1.5px solid color-mix(in oklab, #fff 55%, transparent); border-radius: 999px 999px calc(var(--r-l) - 6px) calc(var(--r-l) - 6px);
transition: inset var(--dur-4) var(--ease-out), border-color var(--dur-3);
}
.door__frame::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top, color-mix(in oklab, var(--accent-ink) 92%, black) 0%, color-mix(in oklab, var(--accent-ink) 55%, transparent) 30%, transparent 58%);
}
.door__media { position: absolute; inset: 0; z-index: 0; }
.door__img { position: absolute; inset: 0; background: var(--img-color); }
.door__img picture, .door__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.door__img img { transition: scale 1.6s var(--ease-out); }
.door__img--more { opacity: 0; display: none; }
.door__num {
position: absolute; z-index: 3; top: 2.4rem; left: 50%; translate: -50% 0;
inline-size: 3.3rem; block-size: 3.3rem; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em;
color: var(--on-accent); background: var(--accent);
box-shadow: 0 0 0 3px rgb(255 255 255 / .92), 0 0 0 9px color-mix(in oklab, var(--accent) 30%, transparent), 0 12px 24px -8px rgb(0 0 0 / .55);
transition: top var(--dur-4) var(--ease-out), left var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out), scale 500ms var(--ease-spring), box-shadow 500ms;
}
.door__num::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px dashed rgb(255 255 255 / .55); transition: rotate 1.2s var(--ease-out), opacity 400ms; opacity: 0; }
.door:is(:hover, :focus-within) .door__num { scale: 1.08; box-shadow: 0 0 0 3px #fff, 0 0 0 12px color-mix(in oklab, var(--accent) 38%, transparent), 0 14px 28px -8px rgb(0 0 0 / .6); }
.door:is(:hover, :focus-within) .door__num::after { opacity: 1; rotate: 120deg; }
[data-tone="jung"] .door__num { border-radius: 0.9rem; rotate: -6deg; box-shadow: 4px 4px 0 var(--pink), 0 0 0 3px #fff; }
.door__spine {
position: absolute; z-index: 3; left: 50%; bottom: 1.6rem; translate: -50% 0;
writing-mode: vertical-rl; rotate: 180deg; font-family: var(--font-display); font-weight: 750; font-stretch: 82%;
font-size: clamp(1.4rem, 1rem + 1vw, 2rem); letter-spacing: 0.01em; white-space: nowrap; display: none;
}
.door__body { position: absolute; z-index: 3; inset: auto 0 0; padding: clamp(1.2rem, 1rem + 1.5cqi, 2rem); display: grid; gap: 0.6rem; }
.door__title { font-size: clamp(1.4rem, 1rem + 3.2cqi, 2.3rem); line-height: 1.02; color: #fff; font-stretch: 86%; hyphens: auto; }
.door__title::before { content: ""; display: block; inline-size: 2.4rem; block-size: 5px; border-radius: 5px; margin-block-end: 0.8rem; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.door__link { color: inherit; text-decoration: none; }
.door__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.door__link:focus-visible { outline: none; }
.door:has(.door__link:focus-visible) .door__frame { outline: 4px solid var(--focus); outline-offset: 4px; }
.door__text { font-size: 1.02rem; line-height: 1.45; color: rgb(255 255 255 / .92); max-inline-size: 34ch; }
.door__links { display: flex; flex-wrap: wrap; gap: 0.4rem; position: relative; z-index: 2; }
.door__links a {
display: inline-flex; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); font-size: 0.92rem; font-weight: 700;
color: #fff; text-decoration: none; background: color-mix(in oklab, #fff 16%, transparent); border: 1px solid color-mix(in oklab, #fff 35%, transparent);
backdrop-filter: blur(8px); transition: background-color var(--dur-2), color var(--dur-2);
}
.door__links a:hover { background: #fff; color: var(--schiefer); }
.door__go {
position: absolute; z-index: 3; top: 1.2rem; right: 1.2rem; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
display: none; place-items: center; background: var(--accent); color: var(--on-accent);
}
.door__go svg { inline-size: 1.3rem; }
@container (width < 15rem) {
.door__body { display: none; }
.door__spine { display: block; }
.door__num { top: 2.2rem; inline-size: 2.9rem; block-size: 2.9rem; font-size: 1.15rem; }
}
@container (width >= 26rem) {
.door__num { top: 2.6rem; inline-size: 3.8rem; block-size: 3.8rem; font-size: 1.5rem; }
}
@media (width >= 64rem) {
.slider--doors .slider__track { display: flex; overflow: visible; padding: 0; margin: 0; gap: clamp(0.5rem, 0.9vw, 1rem); mask: none; -webkit-mask: none; block-size: clamp(32rem, 74svh, 44rem); }
.slider--doors .slider__ui { display: none !important; }
.door { flex: 1 1 0; min-inline-size: 0; block-size: auto; transition: flex-grow 900ms var(--ease-out); }
.doors:has(.door:is(:hover, :focus-within)) .door { flex-grow: 0.75; }
.doors:has(.door:is(:hover, :focus-within)) .door:is(:hover, :focus-within) { flex-grow: 3.2; }
.door:is(:hover, :focus-within) .door__frame { translate: 0 -6px; box-shadow: 0 50px 80px -40px color-mix(in oklab, var(--accent) 80%, black), 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent); }
.door:is(:hover, :focus-within) .door__frame::before { inset: 16px; border-color: color-mix(in oklab, var(--accent) 80%, #fff); }
.door:is(:hover, :focus-within) .door__img img { scale: 1.06; }
.door__img--more { display: block; }
.door:is(:hover, :focus-within) .door__img--more { animation: door-fade 9s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 3s - 1.5s); animation-play-state: var(--play, running); }
.door__text, .door__links { display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity 400ms, grid-template-rows 600ms var(--ease-out); }
.door__links { display: flex; max-block-size: 0; overflow: clip; transition: opacity 400ms, max-block-size 600ms var(--ease-out); }
.door:is(:hover, :focus-within) .door__text { opacity: 1; grid-template-rows: 1fr; transition-delay: 200ms; }
.door:is(:hover, :focus-within) .door__links { opacity: 1; max-block-size: 8rem; transition-delay: 260ms; }
.door__text { overflow: clip; }
}
@keyframes door-fade { 0% { opacity: 0; scale: 1.08; } 10%, 33% { opacity: 1; scale: 1; } 43%, 100% { opacity: 0; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (width >= 64rem) {
:root:not([data-motion="reduziert"]) .door { animation: door-rise linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(75% + var(--i) * 5%); }
}
}
@keyframes door-rise { from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); translate: 0 5rem; } to { clip-path: inset(-40px -40px -60px -40px); translate: 0 0; } }
.soon { position: relative; overflow: clip; isolation: isolate; }
.soon__sym { position: absolute; z-index: -1; inline-size: clamp(26rem, 52vw, 48rem); left: -14%; bottom: -24%; color: var(--accent); opacity: 0.1; --sw: 2.5; }
.soon__intro { align-items: flex-start; }
@media (width >= 60rem) { .soon__intro { align-items: flex-end; text-align: end; } }
.soon__filter { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-block-end: var(--space-m); }
:root:not(.js) .soon__filter { display: none; } 
@media (width < 48rem) {
.soon__filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0.3rem var(--gutter);
mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - 3rem), transparent); }
.soon__filter::-webkit-scrollbar { display: none; }
.soon__filter .chip { flex: none; }
}
.chip--aud { gap: 0.5em; font-size: 0.98rem; font-weight: 700; padding-inline: 0.9em 0.55em; }
.chip--aud small { display: inline-grid; place-items: center; min-inline-size: 1.7rem; block-size: 1.7rem; padding-inline: 0.35rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--ink) 8%, transparent); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.chip--aud[aria-pressed="true"] small { background: color-mix(in oklab, var(--bg) 22%, transparent); }
.chip--aud .dot { inline-size: 0.7em; block-size: 0.7em; }
.chip--aud[aria-pressed="true"] .dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--chip-dot) 45%, transparent); }
.slider--soon { --slide: min(80vw, 19.5rem); }
@property --story-bg { syntax: '<color>'; inherits: true; initial-value: #0b6fb0; }
.story {
position: relative; isolation: isolate;
padding-block: var(--space-3xl);
background: color-mix(in oklab, var(--story-bg) 12%, var(--bg));
transition: --story-bg 1.2s var(--ease-in-out);
}
.story__grid { display: grid; gap: var(--space-xl); }
.story__stage { display: none; }
.story__head { display: grid; gap: var(--space-s); margin-block-end: var(--space-xl); }
.story__step { display: grid; gap: 0.7rem; padding-block: var(--space-l); border-top: 1px solid color-mix(in oklab, var(--step-color) 35%, transparent); }
.story__n { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; color: color-mix(in oklab, var(--step-color) 65%, var(--ink)); font-size: 1.1rem; letter-spacing: 0.04em; }
.story__step h3 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); line-height: 0.95; color: var(--step-color); font-stretch: 82%; letter-spacing: -0.03em; }
[data-tone="jung"] .story__step h3, [data-tone="fest"] .story__step h3 { color: color-mix(in oklab, var(--step-color) 55%, #fff); }
.story__step p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-inline-size: 34ch; }
.story__thumb { inline-size: min(78vw, 22rem); aspect-ratio: 1000 / 987.5; margin-block-start: 0.6rem; position: relative; background: var(--img-color);
mask: url('../svg/symbol-kammern.svg') center / contain no-repeat; -webkit-mask: url('../svg/symbol-kammern.svg') center / contain no-repeat; }
.story__thumb picture, .story__thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (width >= 60rem) {
.story__grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
.story__stage {
display: grid; place-items: center; position: sticky; top: calc(var(--header-h) + 1.5rem);
block-size: calc(100svh - var(--header-h) - 3rem); isolation: isolate;
}
.story__win { position: relative; inline-size: min(100%, 36rem, 70svh); aspect-ratio: 1000 / 987.5;
mask: url('../svg/symbol-kammern.svg') center / contain no-repeat; -webkit-mask: url('../svg/symbol-kammern.svg') center / contain no-repeat; }
.story__img { position: absolute; inset: 0; opacity: 0; scale: 1.12; background: var(--img-color); transition: opacity 1s var(--ease-in-out), scale 2.4s var(--ease-out); }
.story__img.is-active { opacity: 1; scale: 1; }
.story__img picture, .story__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.story__frame { position: absolute; inline-size: min(100%, 36rem, 70svh); aspect-ratio: 1000 / 987.5; color: var(--story-bg); --sw: 4; transition: color 1.2s; }
.story__word {
position: absolute; z-index: -1; inset: auto 0 0; text-align: center; max-inline-size: none;
font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: clamp(5rem, 11vw, 11rem); line-height: 0.8; letter-spacing: -0.04em;
color: transparent; -webkit-text-stroke: 2px color-mix(in oklab, var(--story-bg) 60%, transparent);
transition: opacity 500ms;
}
.story__word.is-swap { animation: word-swap 900ms var(--ease-out); }
.story__steps { padding-block: 10svh 30svh; }
.story__step { min-block-size: 62svh; align-content: center; border-top: 0; position: relative; padding-inline-start: 1.6rem; }
.story__step::before { content: ""; position: absolute; inset: 22% auto 22% 0; inline-size: 4px; border-radius: 4px; background: var(--step-color); scale: 1 0.25; opacity: 0.35; transition: scale 700ms var(--ease-out), opacity 700ms; }
.story__step.is-active::before { scale: 1 1; opacity: 1; }
.story__step h3 { transition: translate 700ms var(--ease-out); }
.story__step:not(.is-active) h3 { translate: -0.4rem 0; }
.story__thumb { display: none; }
}
@keyframes word-swap { from { opacity: 0; translate: 0 0.25em; letter-spacing: 0.06em; } }
.band { position: relative; padding-block: var(--space-3xl); background: var(--bg); color: var(--ink); overflow: clip; isolation: isolate; }
.band--jung {
padding-block: var(--space-xl);
background:
radial-gradient(60% 50% at 85% 20%, color-mix(in oklab, var(--violett) 70%, transparent), transparent 70%),
radial-gradient(50% 45% at 5% 90%, color-mix(in oklab, var(--pink) 30%, transparent), transparent 70%),
radial-gradient(40% 35% at 50% 50%, color-mix(in oklab, var(--lime) 10%, transparent), transparent 70%),
var(--bg);
}
.band--jung::before { 
content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.18;
background-image: radial-gradient(circle, var(--lime) 1px, transparent 1.6px); background-size: 26px 26px;
mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent);
}
.band--jung-page { padding-block: calc(var(--header-h) + var(--space-l)) 0; }
.band--jung-page .tape { margin-block-start: var(--space-l); }
.jung__grid { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }
@media (width >= 60rem) { .jung__grid { grid-template-columns: 1fr 1.05fr; } }
.jung__text .lead { color: var(--ink-2); }
.mycastle { display: block; inline-size: min(68%, 21rem); block-size: auto; filter: drop-shadow(0 6px 24px rgb(214 228 58 / .25)); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .mycastle { animation: wobble 6s var(--ease-breath) infinite; animation-play-state: var(--play, running); transform-origin: 30% 80%; }
}
@keyframes wobble { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
.jung__events { display: grid; gap: 0.55rem; 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.7rem 1rem 0.7rem 0.7rem; border-radius: var(--r-m); background: color-mix(in oklab, #fff 7%, transparent);
border: 2px 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), box-shadow var(--dur-2);
}
.jung__events a:hover { background: color-mix(in oklab, var(--lime) 14%, transparent); border-color: var(--lime); translate: -3px -3px; box-shadow: 5px 5px 0 var(--pink); }
.jung__events time { display: grid; justify-items: center; inline-size: 3.6rem; padding: 0.35rem 0; border-radius: 12px; background: var(--lime); color: var(--violett-nacht); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; rotate: -3deg; }
.jung__events li:nth-child(even) time { background: var(--pink); rotate: 3deg; }
.jung__events time b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; font-stretch: 75%; }
.jung__events strong { font-weight: 700; line-height: 1.3; }
.jung__events svg { inline-size: 1.2rem; color: var(--lime); }
.jung__stage { position: relative; block-size: clamp(24rem, 46vw, 36rem); transform-style: preserve-3d; perspective: 4000px; }
.polaroid {
position: absolute; inset: 6% 16% 10% 16%; margin: 0; padding: 0.75rem 0.75rem 3rem; background: #fdfdf7; border-radius: 6px;
box-shadow: 0 30px 60px -28px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .2);
rotate: var(--r); display: grid; grid-template-rows: 1fr auto;
}
.polaroid__img { position: relative; overflow: clip; border-radius: 3px; background: var(--img-color); }
.polaroid__img picture, .polaroid__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.polaroid figcaption { position: absolute; inset: auto 0 0.7rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: 1.35rem; color: var(--violett-nacht); rotate: -2deg; }
.polaroid:nth-child(1) { transform: translateZ(40px); } .polaroid:nth-child(2) { transform: translateZ(30px); } .polaroid:nth-child(3) { transform: translateZ(20px); } .polaroid:nth-child(4) { transform: translateZ(10px); }
.jung__stage .sticker, .jung__stage .ring { transform: translateZ(80px); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .polaroid { animation: shuffle 18s var(--ease-in-out) infinite; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .polaroid:nth-child(2) { animation-delay: -13.5s; }
:root:not([data-motion="reduziert"]) .polaroid:nth-child(3) { animation-delay: -9s; }
:root:not([data-motion="reduziert"]) .polaroid:nth-child(4) { animation-delay: -4.5s; }
}
@keyframes shuffle {
0%, 19%  { transform: translateZ(40px); translate: 0 0; rotate: var(--r); scale: 1; }
23%      { transform: translateZ(45px); translate: 62% -10%; rotate: 16deg; scale: 1; }
26%      { transform: translateZ(0px); translate: 46% -5%; rotate: 12deg; scale: 0.92; }
31%, 44% { transform: translateZ(10px); translate: -7% 5%; rotate: -9deg; scale: 0.9; }
50%, 69% { transform: translateZ(20px); translate: 5% 3%; rotate: 7deg; scale: 0.94; }
75%, 94% { transform: translateZ(30px); translate: -3% 1.5%; rotate: -4deg; scale: 0.97; }
100%     { transform: translateZ(40px); translate: 0 0; rotate: var(--r); scale: 1; }
}
.sticker { position: absolute; display: grid; place-items: center; text-align: center; font-family: var(--font-display); font-weight: 800; font-stretch: 75%; line-height: 0.95; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .6); }
.sticker--sym { inline-size: 5.4rem; aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--violett-nacht); right: 4%; top: 2%; rotate: 12deg; }
.sticker--sym svg { inline-size: 62%; fill: currentColor; }
.sticker--text { padding: 0.7rem 1rem; border-radius: 14px; background: var(--pink); color: var(--violett-nacht); font-size: 1.5rem; left: 2%; top: 14%; rotate: -10deg; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .sticker--text { animation: bob 3.6s var(--ease-breath) infinite; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .sticker--sym { animation: bob 4.4s var(--ease-breath) -1s infinite; animation-play-state: var(--play, running); }
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.jung__stage .ring { position: absolute; right: 0; bottom: 0; --ring-bg: var(--lime); --ring-ink: var(--violett-nacht); --size: 7.5rem; }
.tape { position: relative; z-index: 2; overflow: clip; background: var(--lime); color: var(--violett-nacht); rotate: -2deg; margin-inline: -2rem; padding-block: 0.6rem; box-shadow: 0 12px 30px -16px rgb(0 0 0 / .6); }
.tape--rev { background: var(--pink); rotate: 1.5deg; }
.tape__track { display: flex; gap: 1.4rem; align-items: center; inline-size: max-content; animation: tape-run 40s linear infinite; animation-play-state: var(--play, running); }
.tape--rev .tape__track { animation-direction: reverse; animation-duration: 46s; }
.tape span { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.tape i { font-style: normal; font-size: 1.2rem; }
@keyframes tape-run { to { translate: calc(-100% / 3) 0; } }
.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%);
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 { aspect-ratio: 4 / 5; border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent); padding: 0.7rem; border-radius: 999px 999px var(--r-l) var(--r-l); max-inline-size: 34rem; }
.fest__arch { position: relative; block-size: 100%; border-radius: 999px 999px calc(var(--r-l) - 6px) calc(var(--r-l) - 6px); overflow: clip; isolation: isolate; }
.fest__img { position: absolute; inset: 0; background: var(--img-color); }
.fest__img picture, .fest__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fest__img:not(:first-child) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .fest__img { animation: fest-fade 18s var(--ease-in-out) infinite; animation-delay: calc(var(--k) * 6s); animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .fest__img:first-child { opacity: 1; animation-name: fest-fade-first; }
}
@keyframes fest-fade { 0% { opacity: 0; scale: 1.1; } 6%, 33% { opacity: 1; } 39%, 100% { opacity: 0; scale: 1; } }
@keyframes fest-fade-first { 0%, 33% { opacity: 1; scale: 1; } 39%, 94% { opacity: 0; scale: 1.08; } 100% { opacity: 1; } }
.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; transition: background-color var(--dur-2), color var(--dur-2); }
.occasions li:hover { background: var(--gold); color: var(--schiefer); }
.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; }
}
.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-section .section-head .btn { justify-self: start; }
.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.7rem, 1.5rem + 5.4vw, 6.8rem); max-inline-size: 14ch; hyphens: auto; line-height: 0.95; letter-spacing: -0.035em; font-stretch: min(calc(var(--display-wdth) * 1%), 88%); }
.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__sym { position: absolute; z-index: -1; inline-size: clamp(22rem, 46vw, 44rem); right: -6%; top: 8%; color: var(--accent); opacity: 0.22; --sw: 3; }
@media (prefers-reduced-motion: no-preference) and (width >= 64rem) {
:root:not([data-motion="reduziert"]) .phero__sym { stroke-dasharray: 1; animation: sym-draw 3s cubic-bezier(.6, 0, .3, 1) both; }
}
.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; }
.subnav ul { transition: opacity 350ms, translate 450ms var(--ease-out); }
.subnav.is-away ul { opacity: 0; translate: 0 -1.2rem; pointer-events: none; }
.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 .chip[data-cat]:not([data-cat="alle"]) { border-color: color-mix(in oklab, var(--chip-dot) 35%, var(--line)); }
.pfilter .chip[data-cat]:not([data-cat="alle"]):hover { background: color-mix(in oklab, var(--chip-dot) 12%, var(--surface)); }
.pfilter .chip[data-cat]:not([data-cat="alle"])[aria-pressed="true"] { background: color-mix(in oklab, var(--chip-dot) 82%, #0b1118); border-color: transparent; color: #fff; }
.pfilter .chip[data-cat]:not([data-cat="alle"])[aria-pressed="true"] .dot { background: #fff; }
.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; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
.event-layout > * { min-inline-size: 0; }
.event-text { overflow-wrap: break-word; hyphens: auto; }
@media (width >= 60rem) { .event-layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; } }
.event-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); }
.factbox > *, .factbox dd { min-inline-size: 0; overflow-wrap: break-word; }
@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); }
.legal-table { overflow-x: auto; margin-block: 1.2em; border-radius: var(--r-m); border: 1px solid var(--line); }
.legal-table table { inline-size: 100%; min-inline-size: 36rem; border-collapse: collapse; font-size: 0.92rem; }
.legal-table :is(th, td) { text-align: start; vertical-align: top; padding: 0.7rem 0.8rem; border-block-end: 1px solid var(--line); }
.legal-table thead th { background: var(--bg-alt); font-size: 0.85rem; }
.legal-table tbody tr:last-child > * { border-block-end: 0; }
.legal-table code { font-size: 0.78rem; color: var(--ink-2); word-break: break-all; }
.legal-table:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.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 tokens {
@property --hs { syntax: '<color>'; inherits: true; initial-value: #0077bd; }
:root {
--haus-schloss: var(--himmel);         --haus-schloss-ink: light-dark(#005a8e, #8fd0ff);
--haus-franziskushof: var(--eibe);     --haus-franziskushof-ink: light-dark(#095646, #7fe0c6);
--haus-gaestehaus: var(--sonne);       --haus-gaestehaus-ink: light-dark(#7a5200, #ffd36e);
--haus-schwesternhaus: #9b5aa8;        --haus-schwesternhaus-ink: light-dark(#6b3477, #e5b8f0);
--dawn: #ffc98a; --noon: #bfe3ff; --dusk: #c3b2f4;
}
[data-house="schloss"]        { --h: var(--haus-schloss); --h-ink: var(--haus-schloss-ink); --h-on: #fff; }
[data-house="franziskushof"]  { --h: var(--haus-franziskushof); --h-ink: var(--haus-franziskushof-ink); --h-on: #fff; }
[data-house="gaestehaus"]     { --h: var(--haus-gaestehaus); --h-ink: var(--haus-gaestehaus-ink); --h-on: var(--schiefer); }
[data-house="schwesternhaus"] { --h: var(--haus-schwesternhaus); --h-ink: var(--haus-schwesternhaus-ink); --h-on: #fff; }
[data-tone="still"]   { --dawn: #ecdcc4; --noon: #d9e8ea; --dusk: #c9d6d0; }
[data-tone="zweisam"] { --dawn: #f9c9b4; --noon: #f6d3df; --dusk: #cdb4ec; }
[data-tone="familie"] { --dawn: #ffd76a; --noon: #9ad6ff; --dusk: #ffb38a; }
[data-tone="jung"]    { --dawn: #ff5fa8; --noon: #7c3aed; --dusk: #2a1a5c; }
[data-tone="fest"]    { --dawn: #f0a35e; --noon: #6c4a78; --dusk: #1d2550; }
}
@layer pages {
.houses { --hs: var(--haus-schloss); transition: --hs 1.1s var(--ease-in-out); isolation: isolate; overflow: clip; }
.houses::after {
content: ""; position: absolute; z-index: -1; inset: 18% -20% auto auto; inline-size: min(70vw, 60rem); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in oklab, var(--hs) 26%, transparent), transparent);
}
.houses:has(.hstage__tab:nth-of-type(2) input:checked) { --hs: var(--haus-franziskushof); }
.houses:has(.hstage__tab:nth-of-type(3) input:checked) { --hs: var(--haus-gaestehaus); }
.houses:has(.hstage__tab:nth-of-type(4) input:checked) { --hs: var(--haus-schwesternhaus); }
.hstage__tabs { border: 0; padding: 0; margin: 0 0 var(--space-l); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
@media (width >= 48rem) { .hstage__tabs { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); } }
.hstage__tab {
position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center;
padding: 0.8rem 1rem; border-radius: var(--r-l); background: var(--surface); cursor: pointer; overflow: clip; isolation: isolate;
border: 1.5px solid color-mix(in oklab, var(--h) 40%, var(--line));
transition: color 400ms, border-color 400ms, translate 450ms var(--ease-spring), box-shadow 400ms;
}
.hstage__tab input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hstage__tab::before {
content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left; scale: 0 1;
background: linear-gradient(120deg, var(--h), color-mix(in oklab, var(--h) 82%, #000)); transition: scale 650ms var(--ease-out);
}
.hstage__tab:hover { translate: 0 -2px; box-shadow: var(--shadow-1); }
.hstage__tab:has(input:checked) { color: var(--h-on); border-color: var(--h); box-shadow: 0 16px 32px -18px var(--h); }
.hstage__tab:has(input:checked)::before { scale: 1 1; }
.hstage__tab:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.hstage__num { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1; color: var(--h-ink); }
.hstage__tab:has(input:checked) .hstage__num { color: inherit; }
.hstage__name { font-weight: 800; font-size: 1.04rem; line-height: 1.2; }
.hstage__meta { font-size: 0.85rem; font-weight: 600; }
@media (width < 48rem) {
.hstage__tabs { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.35rem; }
.hstage__tab { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 0.25rem; padding: 0.65rem 0.25rem 0.7rem; border-radius: var(--r-m); }
.hstage__tab::before { transform-origin: bottom; scale: 1 0; }
.hstage__tab:has(input:checked)::before { scale: 1 1; }
.hstage__num { grid-row: auto; font-size: 1.3rem; }
.hstage__name { font-size: 0.8rem; line-height: 1.15; hyphens: manual; overflow-wrap: normal; }
.hstage__meta { display: none; }
.hstage__tab { align-content: start; }
}
@media (width < 25rem) { .hstage__tab { padding-inline: 0.1rem; } .hstage__name { font-size: 0.72rem; letter-spacing: -0.01em; } .hstage__num { font-size: 1.15rem; } }
.hpanel { display: none; gap: var(--space-l) var(--space-xl); align-items: center; }
.hstage:has(.hstage__tab:nth-of-type(1) input:checked) .hpanel:nth-child(1),
.hstage:has(.hstage__tab:nth-of-type(2) input:checked) .hpanel:nth-child(2),
.hstage:has(.hstage__tab:nth-of-type(3) input:checked) .hpanel:nth-child(3),
.hstage:has(.hstage__tab:nth-of-type(4) input:checked) .hpanel:nth-child(4),
.hstage:has(.hstage__tab:nth-of-type(5) input:checked) .hpanel:nth-child(5) { display: grid; }
@supports not selector(:has(*)) { .hstage__tabs { display: none; } .hpanel { display: grid; margin-block-end: var(--space-2xl); } }
@media (width >= 64rem) { .hpanel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.hpanel__media { position: relative; aspect-ratio: 4 / 3; isolation: isolate; margin: 2.2rem 1rem 1rem 0; }
.hpanel__media::before {
content: ""; position: absolute; inset: 0; z-index: -1; translate: 1rem 1rem; border-radius: var(--r-l);
background: linear-gradient(135deg, var(--h), color-mix(in oklab, var(--h) 50%, var(--aura-b)));
}
.hpanel__img { position: absolute; inset: 0; margin: 0; border-radius: var(--r-l); overflow: clip; background: var(--img-color); }
.hpanel__img:not(:first-child) { opacity: 0; }
.hpanel__img picture, .hpanel__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hpanel__img figcaption {
position: absolute; left: 0.8rem; bottom: 0.8rem; max-inline-size: calc(100% - 1.6rem); padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
background: rgb(15 23 32 / .72); color: #fff; font-size: 0.82rem; font-weight: 700; line-height: 1.3;
}
.hpanel__big {
position: absolute; left: -0.06em; top: -0.62em; z-index: -2; pointer-events: none;
font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 3rem + 6vw, 9rem); line-height: 1; letter-spacing: -0.05em;
color: transparent; -webkit-text-stroke: 2px var(--h); text-shadow: none;
}
.hpanel__body { display: grid; gap: var(--space-s); align-content: start; }
.hpanel__kicker { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-weight: 800; font-size: var(--step--1); color: var(--h-ink); }
.hpanel__kicker span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hpanel__kicker svg { inline-size: 1.1em; block-size: 1.1em; }
.hpanel__title { font-size: var(--step-4); line-height: 0.95; letter-spacing: -0.03em; }
.hpanel__title::after { content: ""; display: block; inline-size: 4.5rem; block-size: 0.35rem; margin-block-start: 0.6rem; border-radius: 1rem; background: linear-gradient(90deg, var(--h), color-mix(in oklab, var(--h) 30%, transparent)); }
.hpanel__lead { font-size: var(--step-1); line-height: 1.4; font-weight: 600; }
.hpanel__body > p:not([class]) { color: var(--ink-2); }
.hpanel__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hpanel__stats li { margin: 0; padding: 0.65rem 1rem; border-radius: var(--r-m); display: grid; gap: 0.15rem; background: color-mix(in oklab, var(--h) 13%, var(--surface)); border: 1px solid color-mix(in oklab, var(--h) 25%, transparent); }
.hpanel__stats b { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.hpanel__stats span { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.hpanel__specs { font-size: 0.95rem; color: var(--ink-2); }
.tag--house { background: color-mix(in oklab, var(--h, var(--accent)) 15%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--h, var(--accent)) 30%, transparent); }
.tag--house::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--h, var(--accent)); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .hpanel { animation: hpanel-in 800ms var(--ease-out) both; }
:root:not([data-motion="reduziert"]) .hpanel .tag--house { animation: tag-pop 500ms var(--ease-spring) both; animation-delay: calc(250ms + var(--j, 0) * 45ms); }
:root:not([data-motion="reduziert"]) .hpanel__img img { animation: ken-burns 22s var(--ease-in-out) infinite alternate; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .hpanel__media--k2 .hpanel__img:not(:first-child) { animation: xf2 12s linear infinite both; animation-delay: calc(var(--k) * 6s - 6s); animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .hpanel__media--k3 .hpanel__img:not(:first-child) { animation: xf3 18s linear infinite both; animation-delay: calc(var(--k) * 6s - 6s); animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .hpanel__media--k4 .hpanel__img:not(:first-child) { animation: xf4 24s linear infinite both; animation-delay: calc(var(--k) * 6s - 6s); animation-play-state: var(--play, running); }
}
@keyframes hpanel-in { from { opacity: 0; translate: 0 1.5rem; } }
@keyframes tag-pop { from { opacity: 0; scale: 0.8; } }
@keyframes ken-burns { from { scale: 1.02; } to { scale: 1.1; translate: -1.5% -1%; } }
@keyframes xf2 { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xf3 { 0%, 29% { opacity: 0; } 33.3%, 62% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes xf4 { 0%, 21% { opacity: 0; } 25%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
.prices-sec { background: linear-gradient(170deg, var(--bg-alt), color-mix(in oklab, var(--aura-a) 14%, var(--bg)) 60%, var(--bg)); }
.prices { display: grid; gap: var(--space-l); }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; justify-items: start; }
.seg__legend { padding: 0; margin-block-end: 0.5rem; font-weight: 700; color: var(--ink-2); }
.seg__track {
position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); inline-size: min(100%, 34rem);
padding: 0.35rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); isolation: isolate;
}
.seg__opt { position: relative; z-index: 1; display: grid; place-items: center; min-block-size: 2.9rem; padding: 0.4rem 0.6rem; border-radius: var(--r-pill); font-weight: 800; text-align: center; line-height: 1.15; cursor: pointer; transition: color 350ms; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt:has(input:checked) { color: var(--on-accent); }
.seg__opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg__pill {
position: absolute; z-index: 0; inset: 0.35rem auto 0.35rem 0.35rem; inline-size: calc((100% - 0.7rem) / 3); border-radius: var(--r-pill);
background: linear-gradient(135deg, var(--accent), var(--accent-ink)); box-shadow: 0 10px 22px -10px var(--accent);
transition: translate 600ms var(--ease-spring);
}
.seg__track:has(.seg__opt:nth-child(2) input:checked) .seg__pill { translate: 100% 0; }
.seg__track:has(.seg__opt:nth-child(3) input:checked) .seg__pill { translate: 200% 0; }
[data-tone="jung"] .seg__pill { background: var(--lime); }
.ppanel { display: none; gap: var(--space-s); }
.prices:has(.seg__opt:nth-child(1) input:checked) .ppanel:nth-child(1),
.prices:has(.seg__opt:nth-child(2) input:checked) .ppanel:nth-child(2),
.prices:has(.seg__opt:nth-child(3) input:checked) .ppanel:nth-child(3) { display: grid; }
@supports not selector(:has(*)) { .seg { display: none; } .ppanel { display: grid; margin-block-end: var(--space-l); } }
.ppanel__title { font-family: var(--font-text); font-size: var(--step-0); font-weight: 700; color: var(--ink-2); }
.pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pcard { margin: 0; display: grid; align-content: start; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: clip; transition: translate 400ms var(--ease-out), box-shadow 400ms; }
.pcard:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
.pcard__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.95rem 1.2rem; color: var(--h-on); background: linear-gradient(120deg, var(--h), color-mix(in oklab, var(--h) 80%, #000)); }
.pcard__name { font-size: var(--step-1); color: inherit; }
.pcard__from { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1; white-space: nowrap; }
.pcard__from small { font-family: var(--font-text); font-size: 0.5em; font-weight: 700; margin-inline-end: 0.15em; }
.pcard__rows { margin: 0; padding: 0.3rem 1.2rem 0.9rem; display: grid; }
.pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.7rem; border-block-end: 1px dashed var(--line); }
.pcard__row:last-child { border-block-end: 0; }
.pcard__row dt { font-weight: 600; color: var(--ink-2); }
.pcard__row dd { margin: 0; display: grid; justify-items: end; text-align: end; }
.pcard__row b { font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.pcard__bath { font-size: 0.85rem; font-weight: 700; color: var(--h-ink); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .ppanel .pcard { animation: hpanel-in 600ms var(--ease-out) both; }
:root:not([data-motion="reduziert"]) .ppanel .pcard:nth-child(2) { animation-delay: 80ms; }
:root:not([data-motion="reduziert"]) .ppanel .pcard:nth-child(3) { animation-delay: 160ms; }
}
:root:not(.js) cr-pricecalc { display: none; }
cr-pricecalc:not(:defined) { visibility: hidden; }
.pcalc {
display: grid; gap: var(--space-s); padding: var(--space-m); border-radius: var(--r-l);
background: linear-gradient(130deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), color-mix(in oklab, var(--aura-c) 24%, var(--surface)));
border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line));
}
.pcalc__head { display: flex; align-items: center; gap: 0.8rem; }
.pcalc__head h3 { font-size: var(--step-1); }
.pcalc__icon { inline-size: 2.6rem; block-size: 2.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.pcalc__icon svg { inline-size: 1.3rem; }
.pcalc__form { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); align-items: end; }
.pcalc__f { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.95rem; }
.pcalc__f select, .pcalc__step input { min-block-size: 3rem; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); padding: 0.5rem 0.8rem; font-weight: 700; inline-size: 100%; }
.pcalc__f select:focus-visible, .pcalc__step :focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pcalc__f--check { display: flex; align-items: center; gap: 0.6rem; min-block-size: 3rem; cursor: pointer; }
.pcalc__f--check input { inline-size: 1.35rem; block-size: 1.35rem; accent-color: var(--accent-ink); }
.pcalc__f--check:has(input:disabled) { opacity: 0.45; cursor: default; }
.pcalc__step { display: grid; grid-template-columns: 3rem minmax(2.5rem, 1fr) 3rem; }
.pcalc__step button { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.pcalc__step button:first-child { border-radius: var(--r-m) 0 0 var(--r-m); }
.pcalc__step button:last-child { border-radius: 0 var(--r-m) var(--r-m) 0; }
.pcalc__step button:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }
.pcalc__step input { border-radius: 0; border-inline: 0; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pcalc__step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pcalc__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.pcalc__sum { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; display: inline-block; }
.pcalc__sum.is-bump { animation: slot-pop 600ms var(--ease-spring); }
.pcalc__out span { font-weight: 600; color: var(--ink-2); }
.pcalc__note { font-size: 0.9rem; color: var(--ink-2); }
.pways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.pway {
position: relative; margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-l);
background: color-mix(in oklab, var(--h) 11%, var(--surface)); border: 1px solid color-mix(in oklab, var(--h) 32%, var(--line));
transition: translate 350ms var(--ease-out), box-shadow 350ms;
}
.pway:hover { translate: 0 -3px; box-shadow: var(--shadow-2); }
.pway:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pway__icon { inline-size: 3rem; block-size: 3rem; border-radius: var(--r-m); display: grid; place-items: center; background: var(--h); color: var(--h-on); }
.pway__icon svg, .pway__link svg { inline-size: 1.4rem; }
.pway h3 { font-size: 1.08rem; }
.pway p { font-size: 0.95rem; color: var(--ink-2); margin-block-start: 0.15rem; }
.pway b { color: var(--ink); }
.pway__link { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); }
.pway__link:focus-visible { outline: none; }
.pway__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-l); }
.pnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pnotes li { margin: 0; display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 1rem; border-radius: var(--r-m); background: color-mix(in oklab, var(--surface) 70%, transparent); border: 1px solid var(--line); font-size: 0.97rem; }
.pnotes svg { inline-size: 1.3rem; flex: none; color: var(--accent-ink); margin-block-start: 0.1rem; }
.stay { isolation: isolate; overflow: clip; background: linear-gradient(165deg, color-mix(in oklab, var(--accent) 22%, var(--bg)), var(--bg) 62%); }
.stay__glow {
position: absolute; z-index: -1; inset: -15% -12% auto auto; inline-size: min(80vw, 56rem); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in oklab, var(--aura-b) 55%, transparent), transparent);
animation: drift 26s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running);
}
@keyframes drift { to { translate: -14% 18%; scale: 1.15; } }
.stay__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 60rem) { .stay__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m) var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.perk { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.perk__icon { inline-size: 2.9rem; block-size: 2.9rem; border-radius: var(--r-m); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); rotate: -5deg; transition: rotate 500ms var(--ease-spring), scale 500ms var(--ease-spring); }
.perk:nth-child(3n + 2) .perk__icon { background: var(--eibe); color: #fff; rotate: 4deg; }
.perk:nth-child(3n) .perk__icon { background: var(--himmel); color: #fff; rotate: -2deg; }
.perk:hover .perk__icon { rotate: 0deg; scale: 1.08; }
.perk__icon svg { inline-size: 1.4rem; }
.perk h3 { font-size: 1.08rem; }
.perk p { font-size: 0.98rem; color: var(--ink-2); margin-block-start: 0.15rem; }
.ticket { --tk-a: var(--eibe); --tk-b: var(--himmel); --notch: 1.1rem; position: relative; justify-self: center; inline-size: min(100%, 25rem); display: grid; filter: drop-shadow(0 26px 34px rgb(15 40 40 / .22)); rotate: 2deg; transition: rotate 700ms var(--ease-spring); }
.ticket:hover { rotate: 0deg; }
[data-tone="jung"] .ticket { --tk-a: var(--violett); --tk-b: #a3216d; }
[data-tone="zweisam"] .ticket { --tk-a: #b02455; --tk-b: #5b3570; }
[data-tone="fest"] .ticket { --tk-a: #6c4a78; --tk-b: #1d2550; }
[data-tone="still"] .ticket { --tk-a: var(--salbei); --tk-b: #3f5f6f; }
.ticket__main, .ticket__bottom { background: var(--surface); }
.ticket__main {
border-radius: var(--r-l) var(--r-l) 0 0; overflow: clip;
-webkit-mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
mask: radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}
.ticket__bottom {
position: relative; display: grid; gap: 0.7rem; justify-items: start; padding: 1.3rem 1.4rem 1.4rem; border-radius: 0 0 var(--r-l) var(--r-l);
-webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}
.ticket__bottom::before { content: ""; position: absolute; inset: 0 calc(var(--notch) + 0.4rem) auto; border-block-start: 2px dashed var(--line); }
.ticket__top { position: relative; padding: 1.4rem 1.4rem 1.2rem; color: #fff; background: linear-gradient(135deg, var(--tk-a), var(--tk-b)); overflow: clip; }
.ticket__label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; }
.ticket__label svg { inline-size: 1.2rem; }
.ticket__price { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 3vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-block: 0.3rem 0.2rem; }
.ticket__price small { font-family: var(--font-text); font-size: 0.32em; font-weight: 700; letter-spacing: 0; }
.ticket__sub { font-weight: 600; opacity: 1; }
.ticket__sym { position: absolute; inset: -12% -14% auto auto; inline-size: 9rem; color: rgb(255 255 255 / .22); --sw: 8; }
.ticket__rows { margin: 0; padding: 0.4rem 1.4rem 1.5rem; display: grid; }
.ticket__rows > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-block: 0.65rem; border-block-end: 1px solid var(--line); }
.ticket__rows > div:last-child { border: 0; }
.ticket__rows dt { font-weight: 600; color: var(--ink-2); font-size: 0.97rem; }
.ticket__rows dd { margin: 0; text-align: end; white-space: nowrap; }
.ticket__rows dd b { font-size: 1.2rem; }
.ticket__rows dd span { display: block; font-size: 0.8rem; color: var(--ink-2); }
.ticket__tel { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.ticket__tel svg { inline-size: 1.15rem; color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .ticket { animation: float 7s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running); }
}
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
.meals { overflow: clip; }
.dayarc { position: relative; --arc-h: clamp(7rem, 4rem + 9vw, 12rem); view-timeline-name: --dayarc; }
.dayarc__sky { display: none; }
.dayarc__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--space-m); }
.dayarc__list::before { content: ""; position: absolute; inset: 0.5rem auto 0.5rem calc(1.7rem - 2px); inline-size: 4px; border-radius: 4px; background: linear-gradient(var(--dawn), var(--noon), var(--dusk)); }
.meal { --meal-c: var(--sonne); margin: 0; position: relative; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1rem; row-gap: 0.15rem; align-items: start; }
.meal:nth-child(2) { --meal-c: var(--himmel); }
.meal:nth-child(3) { --meal-c: var(--pink); }
.meal:nth-child(4) { --meal-c: var(--violett); }
.meal:nth-child(5) { --meal-c: var(--gold); }
.meal__dot { grid-row: span 3; z-index: 1; inline-size: 3.4rem; block-size: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 3px solid var(--meal-c); box-shadow: 0 8px 20px -10px var(--meal-c); }
.meal__dot svg { inline-size: 1.45rem; }
.meal__time { font-weight: 800; color: var(--accent-ink); font-size: 0.95rem; }
.meal__title { font-size: var(--step-2); line-height: 1.05; }
.meal__text { color: var(--ink-2); max-inline-size: 34ch; }
.meal--minor .meal__title { font-size: var(--step-1); }
.meal--minor .meal__dot { scale: 0.82; }
@media (width >= 60rem) {
.dayarc__sky { display: block; position: absolute; inset: 0 0 auto; block-size: var(--arc-h); pointer-events: none; }
.dayarc__arc { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: color-mix(in oklab, var(--ink) 35%, transparent); overflow: visible; }
.dayarc__arc path:first-of-type { opacity: 0.6; }
.dayarc__arc { -webkit-mask: linear-gradient(#000 35%, transparent 98%); mask: linear-gradient(#000 35%, transparent 98%); }
.dayarc__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-s); }
.dayarc__list::before { display: none; }
.meal { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block-start: calc(var(--arc-h) * var(--y)); }
.meal__dot { grid-row: auto; translate: 0 -50%; margin-block-end: -0.9rem; }
.meal__text { font-size: 0.98rem; }
.dayarc__sunx { position: absolute; inset: 0; }
.dayarc__suny { position: absolute; left: 50%; top: 0; inline-size: 0; block-size: 100%; translate: 0 -100%; }
.dayarc__sun {
position: absolute; left: 0; top: 100%; inline-size: 3.2rem; block-size: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fff8d2, var(--sonne) 55%, #ff9a3c);
box-shadow: 0 0 0 10px color-mix(in oklab, var(--sonne) 22%, transparent), 0 0 60px 14px color-mix(in oklab, var(--sonne) 50%, transparent);
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .dayarc__sunx { translate: -50% 0; animation: sun-x linear both; animation-timeline: --dayarc; animation-range: cover 18% cover 72%; }
:root:not([data-motion="reduziert"]) .dayarc__suny { animation: sun-y linear both; animation-timeline: --dayarc; animation-range: cover 18% cover 72%; }
}
}
}
@keyframes sun-x { from { translate: -50% 0; } to { translate: 50% 0; } }
@keyframes sun-y { 0% { translate: 0 0; animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); } 50% { translate: 0 -100%; animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); } 100% { translate: 0 0; } }
.diet { margin-block-start: var(--space-l); display: flex; flex-wrap: wrap; gap: 0.7rem 1.2rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--r-l); background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }
.tag--diet { background: var(--surface); }
.tag--diet svg { inline-size: 1em; block-size: 1em; color: var(--eibe); }
.selfcook { margin-block-start: var(--space-2xl); display: grid; gap: var(--space-l); align-items: start; scroll-margin-top: calc(var(--header-h) + 4rem); }
@media (width >= 60rem) { .selfcook { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.selfcook__title { font-size: var(--step-3); }
.kitchens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.kitchen {
position: relative; margin: 0; display: grid; gap: 0.55rem; align-content: start; padding: var(--space-m); border-radius: var(--r-l); overflow: clip; isolation: isolate;
background: linear-gradient(160deg, color-mix(in oklab, var(--h) 18%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in oklab, var(--h) 32%, var(--line));
}
.kitchen::after { content: ""; position: absolute; z-index: -1; inset: auto -2.5rem -2.5rem auto; inline-size: 10rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklab, var(--h) 20%, transparent); transition: scale 600ms var(--ease-spring); }
.kitchen:hover::after { scale: 1.25; }
.kitchen__icon { inline-size: 3rem; block-size: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--h); color: var(--h-on); }
.kitchen__icon svg { inline-size: 1.5rem; }
.kitchen__who { font-weight: 800; font-size: 0.9rem; color: var(--h-ink); }
.kitchen__title { font-size: var(--step-1); }
.kitchen > p:not([class]) { color: var(--ink-2); }
.community {
--ink: #f3f7f5; --ink-2: #cfe1db; --line: rgb(255 255 255 / .2); --surface: rgb(255 255 255 / .07); --focus: #ffe95c;
--accent: var(--wiese); --accent-ink: #dbe86a; --on-accent: var(--schiefer); --cbase: #0b2a2a;
color-scheme: dark; color: var(--ink); background: var(--cbase); isolation: isolate; overflow: clip;
}
[data-tone="jung"] .community { --cbase: #170c3a; --accent: var(--lime); --accent-ink: var(--lime); }
[data-tone="fest"] .community { --cbase: #101923; --accent: var(--gold); --accent-ink: #f2c877; }
[data-tone="zweisam"] .community { --cbase: #2a1420; --accent: #ff9fbd; --accent-ink: #ffb9cf; }
[data-tone="familie"] .community { --cbase: #0a3156; --accent: var(--sonne); --accent-ink: #ffd36e; }
[data-tone="klar"] .community { --cbase: #0d2c4a; }
[data-tone="still"] .community { --cbase: #1f3536; --accent: #a9cdc2; --accent-ink: #b9dbd0; }
.community__aura span { position: absolute; z-index: -1; inline-size: 60vmax; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 45%, transparent), transparent); animation: drift 30s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running); }
.community__aura span:nth-child(1) { --c: var(--aura-a); left: -20%; top: -25%; }
.community__aura span:nth-child(2) { --c: var(--aura-b); right: -25%; top: 25%; animation-duration: 36s; animation-direction: alternate-reverse; }
.community__aura span:nth-child(3) { --c: var(--aura-c); left: 25%; bottom: -45%; animation-duration: 41s; }
.community .lead { color: var(--ink); }
.community p { color: var(--ink-2); }
.community__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (width >= 60rem) { .community__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.community .display { color: #fff; }
.unity { margin: 0; display: grid; gap: var(--space-s); justify-items: center; text-align: center; }
.unity__rings { position: relative; inline-size: min(100%, 25rem); aspect-ratio: 1; }
.unity__ring {
--c: var(--himmel); --tx: 0%; --ty: 9%;
position: absolute; inline-size: 58%; aspect-ratio: 1; border-radius: 50%; left: 21%; top: 6%;
border: 2px solid color-mix(in oklab, var(--c) 85%, #fff); background: color-mix(in oklab, var(--c) 34%, transparent); mix-blend-mode: screen;
}
.unity__ring:nth-child(2) { --c: var(--wiese); left: 6%; top: 36%; --tx: 8%; --ty: -5%; }
.unity__ring:nth-child(3) { --c: var(--pink); left: 36%; top: 36%; --tx: -8%; --ty: -5%; }
.unity__label { position: absolute; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .45); white-space: nowrap; }
.unity__ring:nth-child(1) .unity__label { top: 17%; left: 50%; translate: -50% 0; }
.unity__ring:nth-child(2) .unity__label { bottom: 22%; left: 9%; }
.unity__ring:nth-child(3) .unity__label { bottom: 22%; right: 9%; }
.unity__core { position: absolute; left: 50%; top: 55%; translate: -50% -50%; inline-size: 19%; color: #fff; filter: drop-shadow(0 0 14px rgb(255 255 255 / .55)); }
.unity figcaption { display: grid; gap: 0.2rem; color: var(--ink-2); }
.unity__q { font-family: var(--font-display); font-size: var(--step-2); color: #fff; line-height: 1.1; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .unity__ring { animation: unite 9s var(--ease-in-out) infinite alternate; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .unity__ring:nth-child(2) { animation-delay: -3s; }
:root:not([data-motion="reduziert"]) .unity__ring:nth-child(3) { animation-delay: -6s; }
}
@keyframes unite { from { translate: calc(var(--tx) * -0.6) calc(var(--ty) * -0.6); } to { translate: var(--tx) var(--ty); } }
.cstats { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.cstats li { margin: 0; padding: var(--space-s) var(--space-m); border-radius: var(--r-l); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .15); display: grid; gap: 0.3rem; }
.cstats b { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--accent-ink); }
.cstats span { color: var(--ink-2); font-weight: 600; }
.community__row { margin-block-start: var(--space-xl); display: grid; gap: var(--space-l); }
@media (width >= 60rem) { .community__row { grid-template-columns: 1fr 1fr; } }
.rhythm { padding: var(--space-m); border-radius: var(--r-l); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .14); }
.rhythm h3 { font-size: var(--step-2); margin-block-end: var(--space-s); }
.rhythm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.rhythm li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.rhythm li div { display: grid; }
.rhythm li span:not(.rhythm__icon) { color: var(--ink-2); font-size: 0.97rem; }
.rhythm__icon { inline-size: 2.7rem; block-size: 2.7rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--accent-ink); }
.rhythm__icon svg { inline-size: 1.3rem; }
.cquote { position: relative; margin: 0; display: grid; gap: 0.9rem; align-content: center; padding: var(--space-l); border-radius: var(--r-l); color: #fff; overflow: clip; background: linear-gradient(135deg, var(--eibe), var(--himmel)); }
[data-tone="jung"] .cquote { background: linear-gradient(135deg, var(--violett), #a3216d); }
[data-tone="fest"] .cquote { background: linear-gradient(135deg, #6c4a78, #1d2550); }
[data-tone="zweisam"] .cquote { background: linear-gradient(135deg, #b02455, #5b3570); }
.cquote blockquote { margin: 0; }
.cquote blockquote p { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.cquote figcaption { font-weight: 700; color: #fff; }
.cquote__mark { position: absolute; inset: 0.8rem 1rem auto auto; inline-size: 5rem; block-size: 5rem; opacity: 0.25; }
.cquote__motto { padding-block-start: 0.9rem; border-block-start: 1px solid rgb(255 255 255 / .35); color: #fff !important; }
.cstory { margin-block-start: var(--space-xl); }
.cstory__title { font-size: var(--step-2); margin-block-end: var(--space-m); }
.cstory__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.cstory__list li { position: relative; margin: 0; padding-block-start: 1.4rem; border-block-start: 2px solid rgb(255 255 255 / .22); }
.cstory__list li::before { content: ""; position: absolute; top: -0.55rem; left: 0; inline-size: 1rem; block-size: 1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgb(255 255 255 / .1); }
.cstory b { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent-ink); }
.cstory p { font-size: 0.98rem; margin-block-start: 0.3rem; }
.community__cta { margin-block-start: var(--space-xl); }
.slider--team { --slide: min(84vw, 21rem); }
.person-card {
--pc: var(--himmel); --pc2: var(--wiese); --pc3: var(--pink); --pc-ink: light-dark(#005a8e, #8fd0ff);
position: relative; isolation: isolate; overflow: clip; display: grid; gap: 0.55rem; align-content: start; justify-items: center; text-align: center;
padding: var(--space-m) var(--space-m) var(--space-l); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
transition: translate 450ms var(--ease-out), box-shadow 450ms;
}
.person-card[data-c="eibe"] { --pc: var(--eibe); --pc2: var(--himmel); --pc3: var(--sonne); --pc-ink: light-dark(#095646, #7fe0c6); }
.person-card[data-c="pink"] { --pc: var(--pink); --pc2: var(--violett); --pc3: var(--sonne); --pc-ink: light-dark(#a1195a, #ff9fc8); }
.person-card[data-c="wiese"] { --pc: var(--wiese); --pc2: var(--eibe); --pc3: var(--himmel); --pc-ink: light-dark(#4d5900, #d4e05a); }
.person-card[data-c="gold"] { --pc: var(--gold); --pc2: var(--mohn); --pc3: var(--pink); --pc-ink: light-dark(#7a5410, #f2c877); }
.person-card::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; block-size: 9.5rem; background: linear-gradient(160deg, color-mix(in oklab, var(--pc) 55%, var(--surface)), color-mix(in oklab, var(--pc2) 22%, var(--surface))); }
.person-card:hover { translate: 0 -5px; box-shadow: var(--shadow-2); }
.person-card__ava { position: relative; inline-size: 9rem; aspect-ratio: 1; display: grid; place-items: center; margin-block-start: 0.8rem; }
.person-card__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--pc), var(--pc2), var(--pc3), var(--pc)); }
.person-card__img { position: relative; inline-size: calc(100% - 12px); aspect-ratio: 1; border-radius: 50%; overflow: clip; background: var(--img-color); box-shadow: 0 0 0 4px var(--surface); transition: scale 500ms var(--ease-spring); }
.person-card__img picture, .person-card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1.06; }
.person-card:hover .person-card__img { scale: 1.05; }
.person-card__sym { inline-size: 70%; color: var(--pc); }
.person-card--more .person-card__ava { border-radius: 50%; background: color-mix(in oklab, var(--pc) 16%, var(--surface)); }
.person-card__role { font-weight: 800; font-size: 0.84rem; letter-spacing: 0.03em; color: var(--pc-ink); padding: 0.2rem 0.75rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--pc) 16%, var(--surface)); }
.person-card__name { font-size: var(--step-2); line-height: 1.05; }
.person-card__quote { margin: 0; }
.person-card__quote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; color: var(--ink); }
.person-card__text { color: var(--ink-2); font-size: 0.98rem; }
.person-card__foot { margin-block-start: auto; display: flex; gap: 0.6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.person-card__foot a:not(.link-more) { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--pc) 18%, var(--surface)); color: var(--ink); }
.person-card__foot svg { inline-size: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .person-card__ring { animation: spin 16s linear infinite; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .person-card:hover .person-card__ring { animation-duration: 4s; }
}
[data-tone="still"] .person-card__ring { animation: none !important; background: color-mix(in oklab, var(--pc) 45%, var(--surface)); }
[data-tone="still"] .person-card::before { background: color-mix(in oklab, var(--pc) 12%, var(--surface)); }
[data-tone="zweisam"] .person-card__ring { background: conic-gradient(#f6b8c9, #c32a5c, #d9b8f0, #f9d6b8, #f6b8c9); }
[data-tone="familie"] .person-card { border-radius: 2rem; }
[data-tone="familie"] .person-card__ring { background: repeating-conic-gradient(var(--sonne) 0 30deg, var(--himmel) 30deg 60deg, var(--wiese) 60deg 90deg); }
[data-tone="klar"] .person-card { justify-items: start; text-align: start; }
[data-tone="klar"] .person-card__ring, [data-tone="klar"] .person-card__img { border-radius: var(--r-m); animation: none !important; }
[data-tone="klar"] .person-card__ring { background: linear-gradient(135deg, var(--pc), var(--pc2)); }
[data-tone="jung"] .person-card { border: 2px solid color-mix(in oklab, var(--lime) 60%, transparent); box-shadow: 6px 6px 0 color-mix(in oklab, var(--pink) 75%, transparent); rotate: -1.2deg; }
[data-tone="jung"] .slider__item:nth-child(even) .person-card { rotate: 1.4deg; }
[data-tone="jung"] .person-card__ring { background: repeating-conic-gradient(var(--lime) 0 12deg, var(--pink) 12deg 24deg); }
[data-tone="jung"] .person-card__role { background: var(--lime); color: var(--violett-nacht); rotate: -2deg; }
[data-tone="fest"] .person-card__ring { background: conic-gradient(#f2c877, #8a6a2a, #f7e2b0, #b8862b, #f2c877); box-shadow: 0 0 30px -4px rgb(242 200 119 / .5); }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: minmax(0, 1fr); }
@media (width >= 40rem) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value:first-child { grid-column: span 2; } }
@media (width >= 64rem) { .values { grid-template-columns: repeat(4, minmax(0, 1fr)); } .value:first-child { grid-row: span 2; } }
.value {
--v: var(--himmel); --v-on: #fff; --v-a: var(--v); --v-b: color-mix(in oklab, var(--v) 70%, #000);
position: relative; isolation: isolate; overflow: clip; margin: 0; display: grid; align-content: space-between; gap: var(--space-s);
min-block-size: 14.5rem; padding: var(--space-m); border-radius: var(--r-l); color: var(--v-on);
background: linear-gradient(150deg, var(--v-a), var(--v-b)); box-shadow: 0 22px 44px -26px var(--v);
transition: translate 500ms var(--ease-out), box-shadow 500ms;
}
.value:hover { translate: 0 -5px; box-shadow: 0 30px 50px -24px var(--v); }
.value[data-v="sonne"]   { --v: var(--sonne); --v-on: var(--schiefer); --v-a: color-mix(in oklab, var(--v) 72%, #fff); --v-b: var(--v); }
.value[data-v="wiese"]   { --v: var(--wiese); --v-on: var(--schiefer); --v-a: color-mix(in oklab, var(--v) 72%, #fff); --v-b: var(--v); }
.value[data-v="salbei"]  { --v: var(--salbei); }
.value[data-v="violett"] { --v: var(--violett); }
.value[data-v="eibe"]    { --v: var(--eibe); }
.value[data-v="pink"]    { --v: var(--pink); --v-on: var(--schiefer); --v-a: color-mix(in oklab, var(--v) 72%, #fff); --v-b: var(--v); }
.value[data-v="gold"]    { --v: var(--gold); --v-on: var(--schiefer); --v-a: color-mix(in oklab, var(--v) 72%, #fff); --v-b: var(--v); }
.value__glow { position: absolute; z-index: -1; inset: auto -30% -45% auto; inline-size: 85%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(255 255 255 / .38), transparent); }
.value__n { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); display: inline-flex; align-items: center; gap: 0.6rem; }
.value__n::after { content: ""; inline-size: 2.4rem; block-size: 2px; background: currentColor; opacity: 0.7; }
.value__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.32em; font-size: var(--step-2); line-height: 1.04; color: inherit; hyphens: auto; }
.value:first-child .value__title { font-size: var(--step-4); }
.value__verb { font-family: var(--font-text); font-weight: 600; font-style: italic; font-size: 0.58em; }
.value__to { position: relative; display: inline-block; }
.value__to::after { content: ""; position: absolute; inset: auto 0 -0.06em; block-size: 0.11em; border-radius: 1em; background: currentColor; transform-origin: left; }
.value__text { font-size: 1rem; line-height: 1.5; color: inherit; }
.value:first-child .value__text { font-size: var(--step-1); max-inline-size: 30ch; }
.value--vision { --v: var(--accent); color: var(--ink); background: var(--surface); border: 2px dashed color-mix(in oklab, var(--accent) 50%, var(--line)); box-shadow: none; align-content: center; justify-items: start; }
.value--vision blockquote { margin: 0; }
.value--vision blockquote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.value__sym { inline-size: 3rem; color: var(--accent); --sw: 7; }
.value__cap { font-weight: 800; color: var(--accent-ink); }
:is([data-tone="still"], [data-tone="klar"], [data-tone="zweisam"]) .value:not(.value--vision) {
--v-a: color-mix(in oklab, var(--v) 24%, var(--surface)); --v-b: color-mix(in oklab, var(--v) 9%, var(--surface));
color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--v) 35%, transparent);
}
:is([data-tone="still"], [data-tone="klar"], [data-tone="zweisam"]) :is(.value__n, .value__to) { color: color-mix(in oklab, var(--v) 45%, var(--ink)); }
[data-tone="jung"] .value { border: 2px solid rgb(255 255 255 / .2); box-shadow: 6px 6px 0 color-mix(in oklab, var(--pink) 70%, transparent); }
[data-tone="jung"] .value:nth-child(odd) { rotate: -0.8deg; }
[data-tone="jung"] .value:nth-child(even) { rotate: 0.8deg; }
[data-tone="fest"] .value { box-shadow: 0 0 0 1px rgb(242 200 119 / .35), 0 24px 40px -26px #000; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .value__glow { animation: glow-drift 13s var(--ease-breath) infinite alternate; animation-delay: calc(var(--i) * -1.6s); animation-play-state: var(--play, running); }
:root.js:not([data-motion="reduziert"]) .values:not(.is-in) .value { opacity: 0; translate: 0 2rem; }
:root.js:not([data-motion="reduziert"]) .values.is-in .value { animation: value-in 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
:root.js:not([data-motion="reduziert"]) .values.is-in .value__to { animation: word-in 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 280ms); }
:root.js:not([data-motion="reduziert"]) .values.is-in .value__to::after { animation: line-grow 800ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + 600ms); }
}
@keyframes glow-drift { to { translate: -35% -25%; scale: 1.25; } }
@keyframes value-in { from { opacity: 0; translate: 0 2rem; scale: 0.97; } }
@keyframes word-in { from { opacity: 0; translate: 0.4em 0; filter: blur(6px); } }
@keyframes line-grow { from { scale: 0 1; } }
}
@layer pages {
[data-tone="jung"] .seg__opt:has(input:checked) { color: var(--violett-nacht); }
}
@layer pages {
.badge--laeuft { background: var(--eibe); color: #fff; gap: 0.4em; }
.badge--laeuft::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: #b8f5d8; }
.badge--laeuft::after { content: ""; position: absolute; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: #b8f5d8; animation: ping 1.8s ease-out infinite; animation-play-state: var(--play, running); }
.badge--laeuft { position: relative; display: inline-flex; align-items: center; }
.badge--laeuft::after { left: 0.65rem; top: 50%; margin-block-start: -0.25em; }
.badge--vorbei, .badge--archiv { background: var(--schiefer-2); color: #fff; }
.event-card.is-past .event-card__media img { filter: grayscale(0.85); opacity: 0.85; }
.event-card.is-past .event-card__date { background: var(--kalk-2); color: var(--schiefer-2); }
.event-card.is-past .event-card__date span { color: var(--schiefer-2); }
[data-stale] { display: none !important; }
.pmonth[data-empty] { display: none; }
.months { display: flex; align-items: stretch; gap: 0; block-size: auto; overflow-x: auto; scrollbar-width: none; padding: 0.2rem 0.4rem 1.7rem; }
.months::-webkit-scrollbar { display: none; }
.months__yr { flex: var(--m, 1) 1 0; min-inline-size: calc(var(--m, 1) * 2.6rem); display: grid; grid-template-rows: auto 1fr; gap: 0.35rem; position: relative; }
.months__yr[hidden] { display: none; }
.months__yr + .months__yr { margin-inline-start: 0.9rem; padding-inline-start: 0.9rem; }
.months__yr + .months__yr::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: 2px; border-radius: 2px; background: linear-gradient(var(--accent), color-mix(in oklab, var(--accent) 20%, transparent)); }
.months__ylabel { justify-self: start; font-family: var(--font-display); font-weight: 750; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.1rem 0.6rem; border-radius: var(--r-pill); color: var(--ink-2); background: var(--bg-alt); }
.months__yr + .months__yr .months__ylabel { color: var(--on-accent); background: var(--accent); }
.months__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.4rem, 1fr); gap: 0.3rem; block-size: 5.4rem; }
.months button > span { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.months button[hidden] { display: none; }
.months button:disabled i { background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px); min-block-size: 3px; }
.months button.is-now { color: var(--ink); }
.months button.is-now i { background: linear-gradient(90deg, var(--accent-ink) 0 calc(var(--day, 0) * 100%), color-mix(in oklab, var(--accent) 45%, var(--bg-alt)) 0); }
.months__now { position: absolute; z-index: 1; inset: 0 auto 1.35rem calc(var(--day, 0) * 100%); inline-size: 2px; translate: -1px 0; background: var(--mohn); border-radius: 2px; pointer-events: none; }
.months__now::after { content: ""; position: absolute; inset: -4px -4px auto; block-size: 10px; border-radius: 50%; background: var(--mohn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mohn) 30%, transparent); }
.months__now b, .months__now small { position: absolute; inset: auto auto -1.45rem 50%; translate: -50% 0; white-space: nowrap; padding: 0.08rem 0.45rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--mohn); }
.months__now b, .months__now small { display: none; }
.months button.is-now > span { color: var(--mohn); font-weight: 800; }
.months button.is-now::after { content: "Heute"; position: absolute; inset: auto auto -1.45rem 50%; translate: -50% 0; white-space: nowrap; padding: 0.08rem 0.45rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--mohn); }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .months__now::after { animation: ping-now 2.2s ease-out infinite; animation-play-state: var(--play, running); } }
@keyframes ping-now { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mohn) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (width < 48rem) { .months__row { grid-auto-columns: 2.7rem; } .months__yr { flex: none; min-inline-size: 0; } }
.pyear { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-block: var(--space-l) var(--space-s); }
.pyear[hidden] { display: none; }
.pyear__line { block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent)); }
.pyear__line:last-child { background: linear-gradient(90deg, var(--accent), transparent); }
.pyear__label { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 1.3rem; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); box-shadow: 0 1rem 2rem -1.2rem var(--accent); }
.pyear__label span { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pyear__label b { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; }
.prog-archive { margin-block-start: var(--space-xl); text-align: center; }
.prog-archive .link-more { display: inline-flex; gap: 0.5rem; align-items: center; }
.prog-archive svg { inline-size: 1.1em; }
.past-note {
display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; margin-block-start: var(--space-s);
padding: 1rem 1.2rem; border-radius: var(--r-l); max-inline-size: 40rem;
background: color-mix(in oklab, var(--gold) 22%, var(--surface)); border: 1px solid color-mix(in oklab, var(--gold) 55%, var(--line));
}
.past-note[hidden] { display: none; }
.past-note__icon { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--schiefer); }
.past-note__icon svg { inline-size: 1.3rem; }
.past-note p { margin-block-start: 0.2rem; }
.event.is-over .ehero__media img { filter: grayscale(0.6); }
a.chip small { margin-inline-start: 0.35em; font-size: 0.8em; color: var(--ink-2); }
}
@layer pages {
.ctiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ctile {
--c: var(--himmel); position: relative; isolation: isolate; overflow: clip; margin: 0; display: grid; gap: 0.5rem; align-content: start;
padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
transition: translate 400ms var(--ease-out), box-shadow 400ms;
}
.ctile:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
.ctile::before { content: ""; position: absolute; z-index: -1; inset: -3rem -3rem auto auto; inline-size: 9rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklab, var(--c) 16%, transparent); transition: scale 600ms var(--ease-spring); }
.ctile:hover::before { scale: 1.3; }
.ctile--phone { --c: var(--eibe); }
.ctile--gf { --c: var(--gold); }
.ctile--addr { --c: var(--pink); }
.ctile__icon { inline-size: 3rem; block-size: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.ctile--gf .ctile__icon, .ctile--addr .ctile__icon { color: var(--schiefer); }
.ctile__icon svg { inline-size: 1.45rem; }
.ctile__ava { inline-size: 4rem; aspect-ratio: 1; border-radius: 50%; overflow: clip; background: var(--img-color); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px color-mix(in oklab, var(--c) 60%, transparent); }
.ctile__ava img { inline-size: 100%; block-size: 100%; object-fit: cover; scale: 1.06; }
.ctile__title { font-size: var(--step-1); }
.ctile__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }
.ctile__big--mail { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); overflow-wrap: normal; }
.ctile__big a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 3px no-repeat; transition: background-size 400ms var(--ease-out); }
.ctile__big a:hover { background-size: 100% 3px; }
.ctile address { font-style: normal; }
.ctile__hours { margin: 0; display: grid; gap: 0.35rem; font-size: 0.94rem; }
.ctile__hours div { display: grid; }
.ctile__hours dt { font-weight: 700; }
.ctile__hours dd { margin: 0; color: var(--ink-2); }
.opennow { justify-self: start; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); font-weight: 800; font-size: 0.88rem; background: var(--kalk-2); color: var(--schiefer-2); }
.opennow[hidden] { display: none; }
.opennow[data-state="open"] { background: var(--eibe-tint); color: var(--eibe-ink); }
.opennow__dot { position: relative; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--schiefer-3); }
.opennow[data-state="open"] .opennow__dot { background: var(--eibe); }
.opennow[data-state="open"] .opennow__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--eibe); animation: ping 1.8s ease-out infinite; animation-play-state: var(--play, running); }
@keyframes ping { from { scale: 1; opacity: 0.7; } to { scale: 2.8; opacity: 0; } }
.contact { isolation: isolate; overflow: clip; }
.contact__aura { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40rem 30rem at 85% 30%, color-mix(in oklab, var(--topic, var(--accent)) 18%, transparent), transparent 70%), radial-gradient(36rem 28rem at 10% 90%, color-mix(in oklab, var(--aura-c) 30%, transparent), transparent 70%); transition: background 800ms; }
.contact__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (width >= 60rem) { .contact__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .contact__intro { position: sticky; top: calc(var(--header-h) + 5rem); } }
.promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.promise li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; }
.promise svg { inline-size: 2.6rem; block-size: 2.6rem; padding: 0.6rem; border-radius: 50%; background: color-mix(in oklab, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.promise span { color: var(--ink-2); }
.promise strong { color: var(--ink); }
.glowcard { position: relative; isolation: isolate; overflow: clip; padding: 3px; border-radius: calc(var(--r-l) + 3px); box-shadow: var(--shadow-3); }
.glowcard::before {
content: ""; position: absolute; z-index: -1; inset: -50%; pointer-events: none;
background: conic-gradient(from 0deg, var(--topic, var(--accent)), var(--aura-a), var(--aura-b), var(--aura-c), var(--topic, var(--accent)));
}
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .glowcard::before { animation: spin 12s linear infinite; animation-play-state: var(--play, running); }
}
.glowcard > .formcard { border: 0; box-shadow: none; border-radius: var(--r-l); }
.formcard { --f: var(--topic, var(--accent)); }
@media (width < 40rem) { .formcard { padding: var(--space-m) var(--space-s); } }
.formcard .field input:not([type="checkbox"]):not([type="radio"]), .formcard .field select, .formcard .field textarea {
border-radius: var(--r-m); border: 1.5px solid var(--line); background: color-mix(in oklab, var(--f) 4%, var(--surface));
transition: border-color 250ms, box-shadow 250ms, background-color 250ms;
}
.formcard .field input:hover, .formcard .field select:hover, .formcard .field textarea:hover { border-color: color-mix(in oklab, var(--f) 45%, var(--line)); }
.formcard .field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--f); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in oklab, var(--f) 26%, transparent); }
.field--area { position: relative; }
.field__count { justify-self: end; font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.form__foot { display: grid; gap: var(--space-s); padding-block-start: var(--space-s); border-block-start: 1px solid var(--line); }
.form__send { justify-self: start; gap: 0.6rem; }
.form__send svg { inline-size: 1.15em; transition: translate 400ms var(--ease-spring); }
.form__send:hover svg { translate: 4px -4px; }
.form.is-sending .form__send { opacity: 0.7; }
@media (width < 40rem) { .form__send { justify-self: stretch; justify-content: center; } }
.topics { border: 0; padding: 0; margin: 0; display: grid; gap: 0.7rem; min-inline-size: 0; }
.topics legend { padding: 0; margin-block-end: 0.6rem; font-weight: 800; }
.topics__list { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.2rem), 1fr)); }
.topic {
position: relative; display: flex; align-items: center; gap: 0.55rem; min-block-size: 3.2rem; padding: 0.5rem 0.7rem; border-radius: var(--r-m);
border: 1.5px solid color-mix(in oklab, var(--t) 35%, var(--line)); background: var(--surface); font-weight: 700; font-size: 0.92rem; line-height: 1.2; cursor: pointer;
transition: background-color 300ms, border-color 300ms, translate 350ms var(--ease-spring), box-shadow 300ms;
}
.topic input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.topic__icon { inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--t) 18%, var(--surface)); color: var(--ink); transition: background-color 300ms, color 300ms, rotate 500ms var(--ease-spring); }
.topic__icon svg { inline-size: 1.05rem; }
.topic:hover { translate: 0 -2px; }
.topic:has(input:checked) { background: color-mix(in oklab, var(--t) 15%, var(--surface)); border-color: var(--t); box-shadow: 0 10px 22px -14px var(--t); }
.topic:has(input:checked) .topic__icon { background: var(--t); color: var(--surface); rotate: -10deg; }
.topic:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.topic-hint { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; padding: 0.75rem 0.95rem; border-radius: var(--r-m); background: color-mix(in oklab, var(--f) 12%, var(--surface)); font-size: 0.95rem; }
.topic-hint[hidden] { display: none; }
.topic-hint svg { inline-size: 1.2rem; flex: none; margin-block-start: 0.12rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .topic-hint:not([hidden]) { animation: hpanel-in 450ms var(--ease-out); } }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .form__done:not([hidden]) .form__done-sym { animation: done-pop 800ms var(--ease-spring) both; }
:root:not([data-motion="reduziert"]) .form__done:not([hidden]) .form__done-check { animation: done-pop 700ms var(--ease-spring) 300ms both; }
}
@keyframes done-pop { from { scale: 0.4; opacity: 0; } }
.captcha { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.9rem; border-radius: var(--r-m); font-size: 0.93rem; line-height: 1.35; color: var(--ink-2);
background: color-mix(in oklab, var(--accent) 6%, var(--surface)); border: 1.5px dashed color-mix(in oklab, var(--accent) 35%, var(--line)); transition: border-color 400ms, background-color 400ms; }
.captcha strong { color: var(--ink); }
.captcha__badge { position: relative; inline-size: 2.3rem; block-size: 2.3rem; flex: none; display: grid; place-items: center; }
.captcha__sym { inline-size: 1.4rem; color: var(--accent-ink); transition: opacity 300ms, scale 400ms var(--ease-spring); }
.captcha__spin { position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in oklab, var(--accent) 22%, transparent); border-block-start-color: var(--accent-ink); opacity: 0; transition: opacity 300ms; }
.captcha__ok { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--eibe); color: #fff; scale: 0; transition: scale 500ms var(--ease-spring); }
.captcha__ok svg { inline-size: 1.2rem; }
.captcha[data-state="working"] .captcha__spin { opacity: 1; animation: spin 900ms linear infinite; }
.captcha[data-state="working"] .captcha__sym { scale: 0.75; }
.captcha[data-state="done"] { border-style: solid; border-color: color-mix(in oklab, var(--eibe) 45%, var(--line)); background: color-mix(in oklab, var(--eibe) 8%, var(--surface)); }
.captcha[data-state="done"] .captcha__ok { scale: 1; }
.captcha[data-state="done"] .captcha__sym { opacity: 0; }
.captcha[data-state="error"] { border-color: var(--mohn-ink); color: var(--mohn-ink); }
.captcha__q { display: grid; gap: 0.3rem; font-weight: 700; color: var(--ink); }
.captcha__q input { min-block-size: 2.8rem; border-radius: var(--r-s); border: 1.5px solid var(--line); padding: 0.4rem 0.7rem; }
.captcha--mini { padding: 0; border: 0; background: none; gap: 0.45rem; font-size: 0.8rem; color: inherit; opacity: 0.85; }
.captcha--mini strong { color: inherit; }
.captcha--mini .captcha__badge { inline-size: 1.4rem; block-size: 1.4rem; }
.captcha--mini .captcha__sym { inline-size: 0.95rem; color: currentColor; }
.captcha--mini .captcha__spin { border-width: 2px; }
.captcha--mini .captcha__ok svg { inline-size: 0.8rem; }
.captcha--mini[data-state="done"] { background: none; }
@media (prefers-reduced-motion: reduce) { .captcha[data-state="working"] .captcha__spin { animation-duration: 2.5s; } }
.route-sec { background: linear-gradient(175deg, color-mix(in oklab, var(--accent) 12%, var(--bg)), var(--bg) 55%); }
.route { --rc: var(--eibe); display: grid; gap: var(--space-l); }
[data-tone="jung"] .route { --rc: var(--lime); }
[data-tone="fest"] .route { --rc: var(--gold); }
[data-tone="zweisam"] .route { --rc: #c32a5c; }
.route__from { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.route__from legend { padding: 0; margin-block-end: 0.7rem; font-weight: 800; font-size: var(--step-1); }
.route__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.route__chip { position: relative; display: inline-flex; align-items: center; min-block-size: 2.9rem; padding: 0.4rem 1.05rem; border-radius: var(--r-pill); border: 1.5px solid color-mix(in oklab, var(--rc) 40%, var(--line)); background: var(--surface); font-weight: 700; cursor: pointer; transition: background-color 300ms, color 300ms, translate 350ms var(--ease-spring); }
.route__chip--far { font-weight: 800; }
.route__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.route__chip:hover { translate: 0 -2px; }
.route__chip:has(input:checked) { background: var(--rc); border-color: var(--rc); color: #fff; }
[data-tone="jung"] .route__chip:has(input:checked), [data-tone="fest"] .route__chip:has(input:checked) { color: var(--schiefer); }
.route__chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.route__grid { display: grid; gap: var(--space-l); align-items: start; }
@media (width >= 60rem) { .route__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.route__map { margin: 0; position: relative; }
.route__map--de { max-inline-size: 34rem; justify-self: center; inline-size: 100%; }
.route__svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.route__svg--region { overflow: hidden; border-radius: 18px; }
.route__land { fill: color-mix(in oklab, var(--rc) 10%, var(--surface)); stroke: color-mix(in oklab, var(--rc) 45%, var(--line)); stroke-width: 2; stroke-linejoin: round; }
.route__dot { fill: color-mix(in oklab, var(--ink) 12%, transparent); }
.route__land-dots { stroke: none; }
.route__path { fill: none; stroke: color-mix(in oklab, var(--ink) 22%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.008 0.012; transition: stroke 400ms, stroke-width 400ms; }
.route__path.is-active { stroke: var(--rc); stroke-width: 6; stroke-dasharray: none; filter: drop-shadow(0 3px 6px color-mix(in oklab, var(--rc) 45%, transparent)); }
.route__path.is-drawing { stroke-dasharray: 1; animation: route-draw 1.8s var(--ease-in-out) both; }
@keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.route:has(.route__chip:nth-child(1) input:checked) .route__map--de .route__path:nth-of-type(3),
.route:has(.route__chip:nth-child(2) input:checked) .route__map--de .route__path:nth-of-type(4),
.route:has(.route__chip:nth-child(3) input:checked) .route__map--de .route__path:nth-of-type(5),
.route:has(.route__chip:nth-child(4) input:checked) .route__map--de .route__path:nth-of-type(6),
.route:has(.route__chip:nth-child(5) input:checked) .route__map--de .route__path:nth-of-type(7),
.route:has(.route__chip:nth-child(6) input:checked) .route__map--de .route__path:nth-of-type(8),
.route:has(.route__chip:nth-child(7) input:checked) .route__map--de .route__path:nth-of-type(9) { stroke: var(--rc); stroke-width: 6; stroke-dasharray: none; }
.route__city circle { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.route__city text { font: 700 15px/1 var(--font-text); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.route__city--small text { font-size: 12px; font-weight: 600; fill: var(--ink-2); }
.route__goal circle { fill: var(--rc); }
.route__goal-ring { fill: none !important; stroke: var(--rc); stroke-width: 2.5; opacity: 0.6; }
.route__goal text { font: 800 17px/1 var(--font-display); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.route__car { opacity: 0; transition: opacity 300ms; }
.route__car.is-on { opacity: 1; }
.route__car circle { fill: var(--rc); stroke: var(--surface); stroke-width: 3; }
.route__car .route__car-in { fill: var(--surface); stroke: none; }
.route.is-static .route__car { opacity: 0; }
.route__road { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route__road--motorway { stroke: color-mix(in oklab, #2f5fb8 70%, var(--surface)); stroke-width: 7; }
.route__road--road { stroke: color-mix(in oklab, var(--ink) 30%, var(--surface)); stroke-width: 3.5; }
.route__shield rect { fill: #2f5fb8; stroke: #fff; stroke-width: 1.5; }
.route__shield text { font: 800 12px/1 var(--font-text); fill: #fff; }
.route__path--last { stroke-dasharray: none; stroke: transparent; stroke-width: 6; }
.route__path--last.is-active { stroke: var(--rc); }
.route__info { display: grid; gap: var(--space-m); align-content: start; }
.route__panel { display: none; padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.route:has(.route__chip:nth-child(1) input:checked) .route__panel:nth-child(1),
.route:has(.route__chip:nth-child(2) input:checked) .route__panel:nth-child(2),
.route:has(.route__chip:nth-child(3) input:checked) .route__panel:nth-child(3),
.route:has(.route__chip:nth-child(4) input:checked) .route__panel:nth-child(4),
.route:has(.route__chip:nth-child(5) input:checked) .route__panel:nth-child(5),
.route:has(.route__chip:nth-child(6) input:checked) .route__panel:nth-child(6),
.route:has(.route__chip:nth-child(7) input:checked) .route__panel:nth-child(7) { display: block; }
@supports not selector(:has(*)) { .route__panel { display: block; } }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .route__panel { animation: hpanel-in 500ms var(--ease-out); } }
.route__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-block-end: var(--space-s); font-size: 1.05rem; }
.route__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.route__meta svg { inline-size: 1.1em; color: var(--ink-2); }
.route__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.route__steps li { margin: 0; display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.8rem; align-items: start; }
.route__badge { display: grid; place-items: center; min-block-size: 1.9rem; padding: 0.15rem 0.4rem; border-radius: 0.45rem; background: #2f5fb8; color: #fff; font-weight: 800; font-size: 0.85rem; white-space: nowrap; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85), 0 0 0 1px #2f5fb8; }
.route__badge--road { background: var(--kalk-2); color: var(--ink); box-shadow: none; }
.route__badge--road svg { inline-size: 1.1rem; }
.route__badge--goal { background: var(--rc); box-shadow: none; }
.route__badge--goal .sym { inline-size: 1.15rem; color: #fff; }
.route__map--region figcaption { font-weight: 800; margin-block-end: 0.5rem; }
.route__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.9rem 1.1rem; border-radius: var(--r-l); background: color-mix(in oklab, var(--rc) 12%, var(--surface)); }
.route__nav svg { inline-size: 1.2rem; color: var(--rc); }
.transit__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (width >= 60rem) { .transit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .transit { position: sticky; top: calc(var(--header-h) + 5rem); } }
.hops { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); position: relative; }
.hops::before { content: ""; position: absolute; inset: 1.5rem auto 1.5rem calc(1.5rem - 1.5px); inline-size: 3px; border-radius: 3px; background: linear-gradient(var(--himmel), var(--eibe), var(--pink)); }
.hop { margin: 0; display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: start; position: relative; }
.hop__icon { inline-size: 3rem; block-size: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--himmel); color: var(--ink); z-index: 1; }
.hop:nth-child(2) .hop__icon { border-color: var(--eibe); }
.hop:nth-child(3) .hop__icon { border-color: var(--pink); }
.hop__icon svg { inline-size: 1.35rem; }
.hop h3 { font-size: var(--step-1); }
.hop p { color: var(--ink-2); margin-block-start: 0.2rem; }
.callheinz {
--ch: #6a3fb5; --ch2: #c0399f;
position: relative; isolation: isolate; overflow: clip; display: grid; gap: 1rem; padding: var(--space-m); border-radius: var(--r-l);
background: radial-gradient(28rem 14rem at 100% 0%, color-mix(in oklab, var(--ch2) 16%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in oklab, var(--ch) 13%, var(--surface)), var(--surface) 65%);
border: 1.5px solid color-mix(in oklab, var(--ch) 32%, var(--line)); box-shadow: 0 1.4rem 2.6rem -2rem color-mix(in oklab, var(--ch) 70%, transparent);
}
.callheinz__top { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; }
.callheinz__icon { inline-size: 3.2rem; block-size: 3.2rem; border-radius: 1rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--ch), var(--ch2)); color: #fff; rotate: -6deg; box-shadow: 0 0.6rem 1.2rem -0.6rem var(--ch); }
.callheinz__icon svg { inline-size: 1.5rem; }
.callheinz__kicker { font-weight: 800; font-size: 0.85rem; color: color-mix(in oklab, var(--ch) 78%, var(--ink)); }
.callheinz h3 { font-size: var(--step-3); line-height: 1; letter-spacing: -0.02em; }
.callheinz__line { grid-column: 1 / -1; inline-size: 100%; block-size: 2.4rem; overflow: visible; }
.callheinz__line path { fill: none; stroke: color-mix(in oklab, var(--ch) 35%, transparent); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.callheinz__line circle { fill: var(--surface); stroke: var(--ch); stroke-width: 3; }
.callheinz__line .callheinz__run { stroke: var(--ch2); stroke-width: 5; stroke-dasharray: 6 94; stroke-dashoffset: 100; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .callheinz__run { animation: ch-run 4.5s var(--ease-in-out) infinite; animation-play-state: var(--play, running); } }
@keyframes ch-run { to { stroke-dashoffset: 6; } }
@media (width >= 30rem) { .callheinz__top { grid-template-columns: auto auto 1fr; } .callheinz__line { grid-column: auto; } }
.callheinz__lead { color: var(--ink); }
.callheinz__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: none; }
@media (width >= 36rem) { .callheinz__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.callheinz__steps li { margin: 0; position: relative; display: grid; gap: 0.2rem; align-content: start; padding: 0.85rem 0.9rem 0.9rem; border-radius: var(--r-m); background: color-mix(in oklab, var(--surface) 82%, transparent); border: 1px solid color-mix(in oklab, var(--ch) 20%, var(--line)); font-size: 0.92rem; line-height: 1.45; }
.callheinz__steps b { font-family: var(--font-display); font-size: 1.05rem; }
.callheinz__steps span:last-child { color: var(--ink-2); }
.callheinz__n { inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; display: grid; place-items: center; margin-block-end: 0.3rem; background: var(--ch); color: #fff; font-weight: 800; font-size: 0.9rem; }
.callheinz__steps li:nth-child(2) .callheinz__n { background: color-mix(in oklab, var(--ch) 50%, var(--ch2)); }
.callheinz__steps li:nth-child(3) .callheinz__n { background: var(--ch2); }
.callheinz__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem 1.2rem; }
@media (width >= 30rem) { .callheinz__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.callheinz__facts li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.93rem; line-height: 1.4; }
.callheinz__facts svg { inline-size: 1.25rem; color: var(--ch); margin-block-start: 0.1rem; }
.callheinz__note { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; padding: 0.7rem 0.85rem; border-radius: var(--r-m); background: color-mix(in oklab, var(--ch) 8%, var(--surface)); font-size: 0.9rem; color: var(--ink-2); }
.callheinz__note svg { inline-size: 1.2rem; color: var(--ch); margin-block-start: 0.1rem; }
.callheinz__cta { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.callheinz .btn:not(.btn--ghost) { background: linear-gradient(120deg, var(--ch), var(--ch2)); color: #fff; border-color: transparent; }
.callheinz__src { font-size: 0.8rem; color: var(--ink-2); }
[data-tone="jung"] .callheinz, [data-tone="fest"] .callheinz { --ch: #b79cff; --ch2: #ff7ac0; }
[data-tone="jung"] .callheinz .btn:not(.btn--ghost), [data-tone="fest"] .callheinz .btn:not(.btn--ghost) { color: #1a1036; }
.transit {
--sky1: color-mix(in oklab, var(--aura-a) 22%, #84bde6); --sky2: color-mix(in oklab, var(--aura-b) 18%, #e6f2fa);
--sun: #ffd45c; --sun-in: #fff6cf; --cloud: #ffffff;
--far: #b9cfd8; --hill: #2c5230; --t1: #33603a; --t2: #4c7f43; --t3: #7ea958;
--slope: #d8c792; --field: #e3c47f; --crop: #a9c25b; --meadow: #8cb456; --trunk: #6b5a43;
--road: #4b535d; --road2: #6a737c; --edge: #f5f4ee; --bike: #8d949b; --pole: #6d757d;
--wall: #efe8da; --wall2: #c9bea8; --trim: #b5a78c; --roof: #46515e; --roof2: #6f7a86; --win: #2a3846;
--rail: #59636d; --train: #ffffff; --stripe: var(--himmel); --bus: #f2c230; --van: var(--accent); --sign: #f2c230;
display: block; position: relative; isolation: isolate; overflow: clip; aspect-ratio: 800 / 520; border-radius: var(--r-l);
background: linear-gradient(var(--sky1), var(--sky2) 62%); box-shadow: var(--shadow-2);
}
[data-tone="familie"] .transit { --sky1: #4fb2ee; --sky2: #dff2ff; --t3: #8cc152; --meadow: #7fc04f; --field: #f1c94e; --bus: var(--sonne); }
[data-tone="still"] .transit { --sky1: #cfe3dd; --sky2: #f6f1e6; --far: #cbd9d1; --hill: #46624f; --t1: #4f6f5d; --t2: #678a75; --t3: #93b29b; --slope: #e3d8b8; --field: #e8d6a6; --crop: #b8c99a; --meadow: #a6bf98; --stripe: var(--salbei); --bus: #d9c79e; --sun: #fff1c2; }
[data-tone="zweisam"] .transit { --sky1: #f2a3b8; --sky2: #fde3c6; --sun: #ffb36b; --sun-in: #fff0d8; --far: #e5bcc0; --hill: #3d573f; --t1: #476440; --t2: #5f7f4a; --t3: #91a85e; --slope: #ecc795; --field: #f1bf79; --stripe: #c32a5c; --wall: #f6e9df; }
[data-tone="klar"] .transit { --sky1: #6fb0e0; --sky2: #eef6fb; --t3: #6f9c57; --stripe: var(--himmel); }
[data-tone="jung"] .transit {
--sky1: #22104d; --sky2: #a04fd9; --sun: #ff6fb8; --sun-in: #ffd1ea; --cloud: #e9d8ff;
--far: #5a3a9a; --hill: #1c1240; --t1: #24164f; --t2: #34216e; --t3: #5a3aa0; --slope: #4c2f80; --field: #6a3f9e; --crop: #3a2875; --meadow: #2b1c5e; --trunk: #1a1036;
--road: #160e31; --road2: #241850; --edge: var(--lime); --bike: #2c1f5a; --pole: #6f58b8;
--wall: #f1ecff; --wall2: #c9bbf2; --trim: #a995e6; --roof: #1a1038; --roof2: #3a2a78; --win: var(--lime);
--rail: #8a74d6; --train: #f6f3ff; --stripe: var(--pink); --bus: var(--lime); --van: #ff5fa8; --sign: var(--lime);
}
[data-tone="fest"] .transit {
--sky1: #0d1430; --sky2: #3a2c55; --sun: #f4f1ff; --sun-in: #ffffff; --cloud: #c9c3e6;
--far: #222c46; --hill: #121d24; --t1: #16262a; --t2: #20353a; --t3: #2f4b47; --slope: #37352e; --field: #4a412d; --crop: #283829; --meadow: #1f3226; --trunk: #121a1d;
--road: #161c23; --road2: #252d36; --edge: #d9c79a; --bike: #29313a; --pole: #59636d;
--wall: #f3dcab; --wall2: #c9a86c; --trim: #b0904f; --roof: #18202a; --roof2: #2c3746; --win: #ffd06a;
--rail: #59636d; --stripe: var(--gold); --bus: var(--gold); --van: #e8b04b; --sign: #c9a64a;
}
.transit__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.st-wall { stop-color: var(--wall); } .st-wall2 { stop-color: var(--wall2); } .st-roof { stop-color: var(--roof); } .st-roof2 { stop-color: var(--roof2); }
.st-sun { stop-color: var(--sun); } .st-sun-in { stop-color: var(--sun-in); } .st-road { stop-color: var(--road); } .st-road2 { stop-color: var(--road2); }
.tl-sun { fill: var(--sun-in); stroke: var(--sun); stroke-width: 6; }
.tl-sunglow { opacity: 0.55; }
.tl-stars circle { fill: #fff; opacity: 0; }
[data-tone="fest"] .tl-stars circle, [data-tone="jung"] .tl-stars circle { opacity: 0.75; }
.tl-streak { fill: none; stroke: var(--cloud); stroke-width: 7; stroke-linecap: round; opacity: 0.55; }
.tl-streak--thin { stroke-width: 3; opacity: 0.45; }
.tl-puff { fill: var(--cloud); opacity: 0.85; }
[data-tone="fest"] .tl-streak, [data-tone="fest"] .tl-puff { opacity: 0.12; }
[data-tone="jung"] .tl-streak, [data-tone="jung"] .tl-puff { opacity: 0.22; }
.tl-far { fill: var(--far); }
.tl-hill { fill: var(--hill); }
.tc1 { fill: var(--t1); } .tc2 { fill: var(--t2); } .tc3 { fill: var(--t3); opacity: 0.8; }
.sl-wall { fill: var(--wall); } .sl-wall2 { fill: var(--wall2); } .sl-trim { fill: var(--trim); } .sl-chim { fill: var(--wall2); }
.sl-roof { fill: var(--roof); } .sl-roof2 { fill: var(--roof2); } .sl-win { fill: var(--win); transition: fill 600ms; }
.sl-bar { stroke: var(--wall); stroke-width: 4; }
.sl-rib { fill: none; stroke: var(--roof2); stroke-width: 5; opacity: 0.45; }
.sl-rail { fill: none; stroke: var(--roof); stroke-width: 4; }
.sl-cross { fill: none; stroke: var(--roof); stroke-width: 7; stroke-linecap: round; }
.tl-way { fill: none; stroke: var(--road2); stroke-width: 9; stroke-linecap: round; }
.tl-way--up { stroke-width: 6; }
.tl-way--side { stroke-width: 11; stroke: var(--road); }
.tl-slope { fill: var(--slope); }
.tl-crop { fill: var(--crop); }
.tl-field { fill: var(--field); }
.tl-field-lines { fill: none; stroke: color-mix(in oklab, var(--field) 70%, #7a5a20); stroke-width: 1.5; opacity: 0.45; }
.tl-rail { stroke: var(--rail); stroke-width: 3; }
.tl-railbed { stroke: color-mix(in oklab, var(--slope) 70%, #6b5a43); stroke-width: 9; opacity: 0.55; }
.tl-sleepers { stroke: var(--rail); stroke-width: 3; stroke-dasharray: 2 5; opacity: 0.6; }
.tl-trunk { stroke: var(--trunk); stroke-width: 2.4; stroke-linecap: round; }
.tl-meadow { fill: var(--meadow); }
.tl-road { fill: url(#tl-road); }
.tl-bike { fill: var(--bike); }
.tl-edge { fill: none; stroke: var(--edge); stroke-width: 2.5; opacity: 0.85; }
.tl-dash { fill: none; stroke: var(--edge); stroke-width: 3.5; stroke-dasharray: 16 18; }
.tl-poles path { fill: none; stroke: var(--pole); stroke-width: 2; }
.tl-poles .tl-wire { stroke-width: 0.8; opacity: 0.7; }
.tl-post { stroke: var(--pole); stroke-width: 2.2; }
.tl-sign { fill: var(--sign); stroke: color-mix(in oklab, var(--sign) 60%, #000); stroke-width: 0.8; }
.tl-sign--brown { fill: #7a4a2a; stroke: #fff; }
.tl-sign-txt { stroke: #1c2733; stroke-width: 1.6; stroke-dasharray: 5 2 7 2 4; opacity: 0.75; }
.tl-posts path { stroke: #f4f4f0; stroke-width: 2.2; stroke-linecap: round; }
.tl-posts .tl-post-band { stroke: #1c2733; }
.tl-grass path { fill: none; stroke: color-mix(in oklab, var(--meadow) 70%, #1f3b12); stroke-width: 1.4; stroke-linecap: round; opacity: 0.6; }
.tl-sign-ico { fill: none; stroke: #fff; stroke-width: 1.4; }
.tl-stop { fill: #f2c230; stroke: #1d7a3e; stroke-width: 2.4; }
.tl-stop-h { fill: none; stroke: #1d7a3e; stroke-width: 1.8; }
.tl-shadow { fill: #000; opacity: 0.18; }
.tl-arrive { opacity: 0; scale: 0.4; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 400ms, scale 600ms var(--ease-spring); }
.tl-arrive-pin { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.tl-arrive-heart { fill: #fff; }
.transit.is-arrived .tl-arrive { opacity: 1; scale: 1; }
.transit.is-arrived .sl-win { fill: color-mix(in oklab, var(--win) 40%, #ffd06a); }
[data-tone="fest"] .transit.is-arrived .sl-win, [data-tone="jung"] .transit.is-arrived .sl-win { fill: #fff3c4; }
.tr-body { fill: var(--train); stroke: color-mix(in oklab, var(--win) 40%, transparent); stroke-width: 1.5; }
.tr-nose, .tr-stripe { fill: var(--stripe); }
.tr-win, .bus-win, .van-win { fill: color-mix(in oklab, var(--win) 85%, #000); opacity: 0.85; }
.tr-wheel { fill: #1c2733; stroke: #8792a0; stroke-width: 2; }
.tr-pan { fill: none; stroke: #1c2733; stroke-width: 2.5; }
.bus-body { fill: var(--bus); } .bus-stripe { fill: color-mix(in oklab, var(--bus) 60%, #000); }
.van-body { fill: var(--van); } .van-pin { fill: #fff; stroke: var(--van); stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .tl-clouds { animation: tl-drift 60s linear infinite alternate; animation-play-state: var(--play, running); }
:root:not([data-motion="reduziert"]) .tl-stars circle { animation: tl-twinkle 3.6s ease-in-out infinite alternate; animation-delay: var(--d); animation-play-state: var(--play, running); }
}
@keyframes tl-drift { to { translate: -60px 0; } }
@keyframes tl-twinkle { to { opacity: 0.2; } }
.hop .hop__icon { transition: scale 500ms var(--ease-spring), background-color 400ms, box-shadow 400ms; }
.hop h3 { transition: color 400ms; }
.hop.is-now .hop__icon { scale: 1.12; background: color-mix(in oklab, var(--hc, var(--himmel)) 16%, var(--surface)); box-shadow: 0 0 0 6px color-mix(in oklab, var(--hc, var(--himmel)) 18%, transparent); }
.hop:nth-child(1) { --hc: var(--himmel); } .hop:nth-child(2) { --hc: var(--eibe); } .hop:nth-child(3) { --hc: var(--pink); }
.osm {
--rc: var(--accent);
position: relative; isolation: isolate; display: block; overflow: clip; min-block-size: 22rem; border-radius: var(--r-l);
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.osm { --map-a: #123e5e; --map-b: #fcfdf9; --map-green: #a9c24a; --map-water: #5fb0e4; --map-fx: var(--map-fx-light); --map-ui: var(--himmel); }
[data-tone="still"] .osm { --map-a: #2c4a40; --map-green: #9fb79a; --map-water: #8fb8c4; --map-ui: var(--salbei); }
[data-tone="zweisam"] .osm { --map-a: #5e1f3c; --map-b: #fffaf8; --map-green: #b8c27a; --map-water: #9cc3e0; --map-ui: #c32a5c; }
[data-tone="familie"] .osm { --map-a: #12456e; --map-b: #fffdf3; --map-green: #9cc94a; --map-water: #49aef0; }
[data-tone="klar"] .osm { --map-a: #0b2f4a; }
[data-tone="jung"] .osm { --map-a: #150b33; --map-b: #e9ddff; --map-fx: var(--map-fx-dark); --map-ui: var(--lime); }
[data-tone="fest"] .osm { --map-a: #0f1720; --map-b: #f2dcab; --map-fx: var(--map-fx-dark); --map-ui: var(--gold); }
.osm__fx { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.osm__fa { flood-color: var(--map-a); } .osm__fb { flood-color: var(--map-b); } .osm__fg { flood-color: var(--map-green); } .osm__fw { flood-color: var(--map-water); }
.osm[data-map-style="craheim"] .leaflet-tile-pane { filter: var(--map-fx); }
.osm .leaflet-bar { border: 0; border-radius: var(--r-m); overflow: clip; box-shadow: var(--shadow-2); }
.osm .leaflet-bar a { inline-size: 2.4rem; block-size: 2.4rem; line-height: 2.4rem; font-size: 1.3rem; color: var(--ink); background: var(--surface); border-color: var(--line); transition: background-color 200ms, color 200ms; }
.osm .leaflet-bar a:hover { background: var(--map-ui); color: #fff; }
[data-tone="jung"] .osm .leaflet-bar a:hover, [data-tone="fest"] .osm .leaflet-bar a:hover { color: #111; }
.osm .leaflet-popup-content-wrapper { border-radius: var(--r-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); }
.osm .leaflet-popup-tip { background: var(--surface); }
.osm .leaflet-popup-content a { color: var(--accent-ink); font-weight: 700; }
.osm__preview { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.osm__preview .route__svg { position: absolute; inset: 0; block-size: 100%; inline-size: 100%; border-radius: 0; opacity: 0.8; }
.osm__preview .route__path--last[data-last="west"] { stroke: var(--accent); }
.osm__consent {
position: relative; z-index: 2; max-inline-size: 30rem; margin: var(--space-l) var(--space-m); padding: var(--space-m); border-radius: var(--r-l); display: grid; gap: 0.8rem;
background: color-mix(in oklab, var(--surface) 90%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-2);
}
.osm__title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.osm__title svg { inline-size: 1.2em; color: var(--accent-ink); }
.osm__consent p:not(.osm__title) { font-size: 0.95rem; color: var(--ink-2); }
.osm__remember { font-size: 0.92rem; }
.osm.is-loading .osm__consent [data-load] { opacity: 0.6; pointer-events: none; }
.osm.is-loaded .osm__consent, .osm.is-loaded .osm__preview { display: none; }
.osm__map { block-size: clamp(22rem, 58vh, 36rem); z-index: 1; }
.osm__map:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.osm__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-block-start: 1px solid var(--line); background: var(--surface); }
.osm__bar[hidden] { display: none; }
.osm__styles { display: inline-flex; gap: 0.3rem; padding: 0.25rem; border-radius: var(--r-pill); background: var(--bg-alt); }
.osm__styles button { min-block-size: 2.4rem; padding: 0.3rem 0.9rem; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink); font-weight: 700; cursor: pointer; }
.osm__styles button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.osm .leaflet-container { font: inherit; background: var(--bg-alt); }
.osm .leaflet-control-attribution { font-size: 0.75rem; background: rgb(255 255 255 / .88); color: #1c2733; border-radius: var(--r-s) 0 0 0; padding: 0.15rem 0.5rem; }
.osm .leaflet-control-attribution a { color: #005a8e; }
.osm__pin { background: none; border: 0; }
.osm__pin-in { position: relative; display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: linear-gradient(135deg, var(--himmel), color-mix(in oklab, var(--himmel) 55%, var(--wiese))); box-shadow: 0 8px 18px -6px rgb(0 0 0 / .45), 0 0 0 4px #fff; }
.osm__pin-in::after { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 3px solid var(--himmel); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .osm__pin-in::after { animation: pin-ping 2.4s ease-out infinite; animation-play-state: var(--play, running); } }
@keyframes pin-ping { 0% { opacity: .7; scale: .8; } 100% { opacity: 0; scale: 1.35; } }
.osm__pin-sym { inline-size: 28px; rotate: 45deg; color: #fff; }
.osm .leaflet-popup-content { font-size: 0.95rem; line-height: 1.45; }
}
@layer sections {
.foryou { transition: --aura-a 900ms var(--ease-in-out), --aura-b 900ms var(--ease-in-out), --aura-c 900ms var(--ease-in-out); }
.sentence__slot.is-enhanced select { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; pointer-events: none; }
.sentence .pick__btn {
appearance: none; font: inherit; letter-spacing: inherit; text-align: start; cursor: pointer;
color: var(--on-accent); padding: 0 1.15em 0.06em 0.45em; margin: 0.06em 0; border: 0; border-radius: 0.3em; background: var(--accent);
box-shadow: 0 0.08em 0 color-mix(in oklab, var(--accent-ink) 70%, transparent), 0 0.4em 1em -0.5em color-mix(in oklab, var(--accent) 80%, transparent);
transition: background-color var(--dur-3) var(--ease-in-out), color var(--dur-3), box-shadow var(--dur-3), filter var(--dur-2);
}
.sentence__slot[data-slot="was"] .pick__btn { background: var(--ink); color: var(--bg); box-shadow: 0 0.08em 0 color-mix(in oklab, var(--ink) 60%, transparent); }
.sentence__slot.is-enhanced { font-size: clamp(0.72em, calc(14em / var(--chars, 10)), 1em); max-inline-size: 100%; }
.sentence .pick__btn { white-space: nowrap; max-inline-size: 100%; }
.sentence .pick__btn:hover { filter: brightness(1.07); }
.sentence .pick__btn:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
.sentence__slot.is-changed .pick__btn { animation: slot-pop 700ms var(--ease-spring); }
.sentence__slot.is-enhanced::after { transition: rotate 400ms var(--ease-spring), translate 400ms var(--ease-spring), border-color var(--dur-3); }
.sentence__slot.is-open::after { rotate: 225deg; translate: 0 -25%; }
[data-tone="jung"] .sentence .pick__btn { rotate: -1deg; box-shadow: 5px 5px 0 var(--pink); }
[data-tone="jung"] .sentence__slot[data-slot="was"] .pick__btn { background: var(--pink); color: var(--violett-nacht); rotate: 1deg; box-shadow: 5px 5px 0 var(--lime); }
.pick__pop {
position: absolute; z-index: 60; inset-block-start: calc(100% + 0.6rem); inset-inline-start: 0;
inline-size: min(27rem, calc(100vw - 2 * var(--gutter))); max-block-size: min(70vh, 31rem); overflow: auto; overscroll-behavior: contain;
padding: 0.45rem; border-radius: var(--r-l); background: var(--surface); color: var(--ink);
box-shadow: var(--shadow-3), 0 0 0 1px var(--line);
font: 400 1rem/1.4 var(--font-text); letter-spacing: 0; font-stretch: 100%; text-wrap: wrap; transform-origin: 1.5rem 0;
}
.pick__pop[hidden] { display: none; }
.pick__pop.is-up { inset-block-start: auto; inset-block-end: calc(100% + 0.6rem); transform-origin: 1.5rem 100%; }
.pick__pop.is-fixed { position: fixed; z-index: 1001; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .pick__pop:not([hidden]) { animation: pop-in 320ms var(--ease-out); } }
@keyframes pop-in { from { opacity: 0; scale: 0.96; translate: 0 -0.4rem; } }
.pick__head { display: none; }
.pick__pop--plain { inline-size: min(19rem, calc(100vw - 2 * var(--gutter))); }
.pick__pop--plain .pick__opt { padding: 0.62rem 0.8rem; }
.pick__pop--plain .pick__label { font-size: 1.1rem; }
.pick__pop--plain .pick__opt::before { content: ""; position: absolute; inset: 0.55rem auto 0.55rem 0.2rem; inline-size: 3px; border-radius: 3px; background: var(--accent); opacity: 0; scale: 1 0.4; transition: opacity 200ms, scale 300ms var(--ease-spring); }
.pick__pop--plain .pick__opt.is-active::before, .pick__pop--plain .pick__opt[aria-selected="true"]::before { opacity: 1; scale: 1; }
.pick__list { display: grid; gap: 0.15rem; }
.pick__list:focus { outline: none; }
.pick__list:focus-visible .pick__opt.is-active { outline: 3px solid var(--focus); outline-offset: -3px; }
.pick__opt { position: relative; display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: var(--r-m); cursor: pointer; transition: background-color 200ms; }
.pick__opt.is-active { background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
.pick__opt[aria-selected="true"] .pick__label { font-weight: 800; }
.pick__sw {
inline-size: 2.7rem; block-size: 2.7rem; border-radius: 0.8rem; display: grid; place-items: center;
background: linear-gradient(135deg, var(--aura-a), var(--aura-b) 55%, var(--aura-c));
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent);
transition: scale 400ms var(--ease-spring), rotate 400ms var(--ease-spring);
}
.pick__opt.is-active .pick__sw { scale: 1.08; rotate: -4deg; }
.pick__aa { padding: 0.05rem 0.3rem; border-radius: 0.4rem; background: var(--bg); color: var(--accent-ink); font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: calc(var(--display-wdth) * 1%); font-size: 0.85rem; line-height: 1.3; }
.pick__txt { display: grid; min-inline-size: 0; flex: 1; }
.pick__sw, .pick__meta, .pick__check { flex: none; }
.pick__label { font-weight: 650; font-size: 1.04rem; }
.pick__sub { font-size: 0.85rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick__meta { font-size: 0.76rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); white-space: nowrap; }
.pick__check { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; border: 2px solid var(--line); }
.pick__opt[aria-selected="true"] .pick__check { border-color: var(--accent-ink); background: var(--accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat; }
.pick__scrim { position: fixed; inset: 0; z-index: 1000; background: rgb(10 16 24 / .5); backdrop-filter: blur(3px); }
.pick__scrim[hidden] { display: none; }
:root.pick-lock, :root.pick-lock body { overflow: hidden; }
@media (width < 40rem) {
.pick__pop {
position: fixed; inset: auto 0 0; inline-size: auto; max-block-size: 80vh; z-index: 1001; padding: 0 0.7rem calc(1rem + env(safe-area-inset-bottom));
border-radius: 1.6rem 1.6rem 0 0; transform-origin: 50% 100%;
}
.pick__pop.is-up { inset-block-end: 0; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduziert"]) .pick__pop:not([hidden]) { animation: sheet-in 420ms var(--ease-out); } }
.pick__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0.4rem 0.6rem; background: var(--surface); }
.pick__head::before { content: ""; position: absolute; top: 0.45rem; left: 50%; translate: -50% 0; inline-size: 2.6rem; block-size: 0.3rem; border-radius: 1rem; background: var(--line); }
.pick__title { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; }
.pick__close { inline-size: 2.75rem; block-size: 2.75rem; flex: none; border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pick__opt { padding: 0.75rem 0.55rem; min-block-size: 3.6rem; }
}
@keyframes sheet-in { from { translate: 0 100%; } }
}
@property --news-c { syntax: '<color>'; inherits: true; initial-value: #d8392b; }
@layer pages {
.nhl, .ntile {
--nc: color-mix(in oklab, var(--n-img, var(--accent)) 35%, var(--n-cat, var(--accent)));
--nc2: color-mix(in oklab, var(--nc) 70%, var(--accent));
--nc-deep: color-mix(in oklab, var(--nc) 26%, #0e1822);
}
section:has(cr-news) {
transition: --news-c 1.1s var(--ease-in-out);
background:
radial-gradient(52rem 26rem at 12% 8%, color-mix(in oklab, var(--news-c) 10%, transparent), transparent 70%),
radial-gradient(40rem 24rem at 92% 92%, color-mix(in oklab, var(--news-c) 7%, transparent), transparent 70%);
}
.news2 { position: relative; overflow: clip; isolation: isolate; }
.news2__sym { position: absolute; z-index: -1; inline-size: clamp(26rem, 50vw, 46rem); right: -12%; top: -8%; color: var(--news-c); opacity: 0.13; --sw: 2.5; transition: color 1.1s; }
.news2__title { max-inline-size: none; }
.news2__vis { display: inline; }
.nrot { display: grid; justify-items: start; }
.nrot__item { grid-area: 1 / 1; white-space: nowrap; transition: opacity 600ms var(--ease-out), translate 800ms var(--ease-spring), filter 600ms; }
.nrot__item:not(.is-on) { opacity: 0; translate: 0 0.5em; filter: blur(6px); pointer-events: none; }
.nrot__item.is-off { translate: 0 -0.5em; }
.news2 .nrot__mark { color: color-mix(in oklab, var(--news-c) 78%, var(--ink)); transition: color 1.1s; }
.news2 .nrot__mark .kw__line path { stroke: var(--news-c); transition: stroke 1.1s; }
.nrot__item.is-on .kw__line path { animation: line-draw 900ms var(--ease-out) both; animation-delay: 250ms; }
[data-tone="jung"] .news2 .nrot__mark { color: var(--violett-nacht); }
@media (prefers-reduced-motion: reduce) { .nrot__item { transition: none; } }
.news2__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (width < 40rem) { .news2__cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0.2rem var(--gutter); } .news2__cats::-webkit-scrollbar { display: none; } .news2__cats a { white-space: nowrap; } }
.news2__cats li { margin: 0; }
.news2__cats a {
display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.3rem; padding: 0.3rem 0.85rem; border-radius: var(--r-pill);
font-size: 0.9rem; font-weight: 700; color: var(--ink); text-decoration: none; background: var(--surface); border: 1.5px solid color-mix(in oklab, var(--c) 35%, var(--line));
transition: background-color 250ms, color 250ms, translate 350ms var(--ease-spring);
}
.news2__cats a::before { content: ""; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--c); }
.news2__cats a:hover { background: var(--c); color: #fff; translate: 0 -2px; }
.news2__cats a:hover::before { background: #fff; }
.news2__grid { display: grid; gap: var(--space-m); }
@media (width >= 64rem) { .news2__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; } }
.news2__list { display: grid; gap: var(--space-s); grid-auto-rows: 1fr; }
@media (40rem <= width < 64rem) { .news2__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .news2__list .ntile--row { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .news2__list .ntile--row .ntile__media { aspect-ratio: 16 / 10; } }
.slider--nhl { --slide: 100%; block-size: 100%; display: grid; grid-template-rows: 1fr auto; }
.slider--nhl .slider__track { --gap: var(--space-m); block-size: 100%; padding: 0 0 1.4rem; margin-inline: 0; scroll-padding-inline: 0; mask-image: none; -webkit-mask-image: none; border-radius: var(--r-l); }
.slider--nhl .slider__item { block-size: 100%; }
.slider--nhl .slider__dot[aria-current="true"]::after { background: var(--news-c); }
.slider--nhl .slider__dot[aria-current="true"]::before { background: color-mix(in oklab, var(--news-c) 25%, transparent); }
.nhl-wrap { display: block; block-size: 100%; }
.nhl {
position: relative; isolation: isolate; overflow: clip; block-size: 100%; min-block-size: clamp(24rem, 50vh, 33rem);
display: grid; align-items: end; border-radius: var(--r-l); color: #fff; background: var(--nc-deep);
box-shadow: 0 0.9rem 1.4rem -1rem color-mix(in oklab, var(--nc) 85%, #000);
}
.nhl__media { position: absolute; inset: 0; z-index: -2; background: var(--img-color); }
.nhl__media picture, .nhl__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.nhl__shade {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(100deg, color-mix(in oklab, var(--nc-deep) 92%, transparent) 0%, color-mix(in oklab, var(--nc-deep) 70%, transparent) 36%, transparent 74%),
linear-gradient(to top, color-mix(in oklab, var(--nc-deep) 72%, transparent), transparent 50%);
}
.nhl::before { content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none; border: 1.5px solid rgb(255 255 255 / .38); border-radius: calc(var(--r-l) - 6px); transition: inset 700ms var(--ease-out), border-color 500ms; }
.nhl:hover::before { inset: 16px; border-color: color-mix(in oklab, var(--nc) 55%, #fff); }
.nhl__body { display: grid; gap: 0.75rem; justify-items: start; padding: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); max-inline-size: 38rem; }
.nhl__title::before { content: ""; display: block; inline-size: 2.4rem; block-size: 5px; border-radius: 5px; margin-block-end: 0.7rem; background: var(--n-cat); box-shadow: 0 0 18px var(--n-cat); }
.nhl__title { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem); line-height: 1.04; color: #fff; text-wrap: balance; }
.nhl__link { color: inherit; text-decoration: none; }
.nhl__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nhl__link:focus-visible { outline: none; }
.nhl:has(.nhl__link:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
.nhl__teaser { font-size: 1.05rem; line-height: 1.5; color: rgb(255 255 255 / .92); max-inline-size: 36ch; }
.nhl__more { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.4rem; padding: 0.5rem 1.05rem; border-radius: var(--r-pill); border: 1.5px solid rgb(255 255 255 / .55); color: #fff; font-weight: 800; transition: gap 350ms var(--ease-spring), background-color 300ms, color 300ms; }
.nhl__more svg { inline-size: 1.1rem; }
.nhl:hover .nhl__more { gap: 0.9rem; background: #fff; color: var(--schiefer); }
@media (prefers-reduced-motion: no-preference) {
:root:not([data-motion="reduziert"]) .nhl.is-current .nhl__media img { animation: nhl-drift 12s var(--ease-in-out) both; animation-play-state: var(--play, running); }
}
@keyframes nhl-drift { from { scale: 1.02; } to { scale: 1.1; translate: -1.5% -1%; } }
@media (width < 40rem) {
.nhl { grid-template-rows: auto 1fr; align-items: stretch; min-block-size: 0; }
.nhl__media { position: relative; z-index: 0; aspect-ratio: 16 / 10; }
.nhl__shade { display: none; }
.nhl__body { background: linear-gradient(170deg, var(--nc-deep), color-mix(in oklab, var(--nc-deep) 80%, #000)); align-content: start; }
}
.nmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.9rem; font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.nmeta__cat { display: inline-flex; align-items: center; gap: 0.45rem; color: color-mix(in oklab, var(--n-cat, var(--accent)) 72%, var(--ink)); }
.nmeta__cat i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--n-cat, var(--accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--n-cat, var(--accent)) 22%, transparent); }
.nmeta--light, .nmeta--light .nmeta__cat { color: rgb(255 255 255 / .9); }
.nmeta--light .nmeta__cat i { box-shadow: 0 0 0 3px rgb(255 255 255 / .25); }
.ncat { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 800; color: #fff; background: color-mix(in oklab, var(--c) 82%, #0b1118); }
.nhead { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.ntag { font-size: 0.85rem; font-weight: 650; color: var(--ink-2); }
.ntag::before { content: "#"; opacity: 0.55; }
.ntile {
position: relative; isolation: isolate; display: flex; flex-direction: column; block-size: 100%; overflow: clip;
border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line);
transition: translate 450ms var(--ease-spring), box-shadow 400ms, border-color 400ms, background-color 400ms;
}
.ntile::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; block-size: 3px; background: linear-gradient(90deg, var(--n-cat), var(--nc2)); transform-origin: left; scale: 0 1; transition: scale 600ms var(--ease-out); }
.ntile:hover, .ntile:focus-within { translate: 0 -4px; border-color: color-mix(in oklab, var(--nc) 40%, var(--line)); background: color-mix(in oklab, var(--nc) 5%, var(--surface)); box-shadow: 0 1.4rem 2.2rem -1.6rem color-mix(in oklab, var(--nc) 70%, #000); }
.ntile:hover::before, .ntile:focus-within::before { scale: 1 1; }
.ntile__media { position: relative; aspect-ratio: 16 / 10; overflow: clip; background: var(--img-color, var(--nc)); flex: none; }
.ntile__media picture, .ntile__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ntile__media img { transition: scale 1.2s var(--ease-out); }
.ntile:hover .ntile__media img { scale: 1.07; }
.ntile__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--nc), var(--nc2)); }
.ntile__ph svg { inline-size: 2.4rem; }
.ntile__body { display: flex; flex-direction: column; gap: 0.45rem; flex: 1; padding: 1.05rem 1.15rem 1.15rem; }
.ntile__title { font-size: 1.22rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ntile__link { color: var(--ink); text-decoration: none; background: linear-gradient(var(--nc), var(--nc)) 0 100% / 0 2px no-repeat; transition: background-size 450ms var(--ease-out); }
.ntile:hover .ntile__link { background-size: 100% 2px; }
.ntile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ntile__link:focus-visible { outline: none; }
.ntile:has(.ntile__link:focus-visible) { outline: 4px solid var(--focus); outline-offset: 3px; }
.ntile__teaser { color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ntile__more { margin-block-start: auto; padding-block-start: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; font-weight: 800; font-size: 0.92rem; color: var(--accent-ink); transition: gap 350ms var(--ease-spring), color 300ms; }
.ntile:hover .ntile__more { color: color-mix(in oklab, var(--n-cat) 70%, var(--ink)); }
.ntile__more svg { inline-size: 1.05rem; }
.ntile:hover .ntile__more { gap: 0.75rem; }
.ntile--row { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; }
.ntile--row .ntile__media { aspect-ratio: auto; block-size: 100%; min-block-size: 7.5rem; }
.ntile--row .ntile__body { padding: 0.9rem 1rem; justify-content: center; }
.ntile--row .ntile__title { font-size: 1.1rem; }
.ntile--row .ntile__more { position: absolute; inset: auto 0.9rem 0.8rem auto; margin: 0; padding: 0; }
.ntile--row::before { inset: 0 auto 0 0; inline-size: 3px; block-size: auto; transform-origin: top; scale: 1 0; }
.ntile--row:hover::before, .ntile--row:focus-within::before { scale: 1 1; }
.ngrid { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); grid-auto-rows: 1fr; }
.ngrid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.nfilter { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.nfilter__chip { position: relative; cursor: pointer; }
.nfilter__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nfilter__chip span { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.6rem; padding: 0.35rem 1rem; border-radius: var(--r-pill); font-weight: 700; background: var(--surface); border: 1.5px solid color-mix(in oklab, var(--c, var(--ink)) 30%, var(--line)); transition: background-color 250ms, color 250ms, translate 350ms var(--ease-spring); }
.nfilter__chip i { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--c); }
.nfilter__chip small { font-size: 0.78em; font-weight: 800; padding: 0.05rem 0.45rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--c, var(--ink)) 14%, transparent); }
.nfilter__chip:hover span { translate: 0 -2px; }
.nfilter__chip input:checked + span { background: color-mix(in oklab, var(--c, var(--ink)) 85%, #0b1118); color: #fff; border-color: transparent; }
.nfilter__chip input:checked + span i { background: #fff; }
.nfilter__chip:not([style]) input:checked + span { background: var(--ink); color: var(--bg); }
.nfilter__chip:not([style]) input:checked + span small { background: color-mix(in oklab, var(--bg) 22%, transparent); }
.nfilter__chip input:checked + span small { background: rgb(255 255 255 / .2); }
.nfilter__chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
:root.js:not([data-motion="reduziert"]) [data-reveal]:not(.is-in) > .ntile { opacity: 0; }
:root.js:not([data-motion="reduziert"]) [data-reveal].is-in > .ntile { animation: ntile-in 800ms var(--ease-spring) both; }
[data-reveal].is-in > .ntile:nth-child(2) { animation-delay: 90ms; } [data-reveal].is-in > .ntile:nth-child(3) { animation-delay: 180ms; }
[data-reveal].is-in > .ntile:nth-child(4) { animation-delay: 270ms; } [data-reveal].is-in > .ntile:nth-child(n + 5) { animation-delay: 340ms; }
}
@keyframes ntile-in { from { opacity: 0; translate: 0 1.6rem; } }
[data-tone="jung"] .ntile { border: 2px solid color-mix(in oklab, var(--lime) 45%, transparent); }
[data-tone="jung"] .ntile:hover { box-shadow: 6px 6px 0 var(--pink); }
[data-tone="jung"] .nhl { box-shadow: 6px 6px 0 var(--pink); }
}
@layer pages {
.arch__room { position: absolute; inset: 0; z-index: 1; opacity: 0; scale: 1.06; background: var(--img-color); transition: opacity 700ms var(--ease-out), scale 1.4s var(--ease-out); }
.arch__room picture, .arch__room img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fest-rooms:has(details[data-room="0"][open]) .arch__room[data-room="0"],
.fest-rooms:has(details[data-room="1"][open]) .arch__room[data-room="1"],
.fest-rooms:has(details[data-room="2"][open]) .arch__room[data-room="2"],
.fest-rooms:has(details[data-room="3"][open]) .arch__room[data-room="3"],
.fest-rooms:has(details[data-room="4"][open]) .arch__room[data-room="4"],
.fest-rooms:has(details[data-room="5"][open]) .arch__room[data-room="5"] { opacity: 1; scale: 1; }
}
@layer pages {
.dining { display: grid; gap: var(--space-s); margin-block: var(--space-m); }
@media (width >= 56rem) { .dining { grid-template-columns: 1fr 1fr; } }
.dining__pic { position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: var(--r-l); overflow: clip; background: var(--img-color); box-shadow: var(--shadow-2); }
.dining__pic picture, .dining__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.dining__pic img { transition: scale 1.6s var(--ease-out); }
.dining__pic:hover img { scale: 1.05; }
.dining__pic figcaption { position: absolute; inset: auto auto 0.8rem 0.8rem; padding: 0.3rem 0.8rem; border-radius: var(--r-pill); font-size: 0.88rem; font-weight: 800; color: var(--ink); background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
}
@layer pages {
.fest__media > .arch { block-size: 100%; border-radius: 999px 999px calc(var(--r-l) - 6px) calc(var(--r-l) - 6px); }
}
@layer pages {
.jgroup { display: grid; gap: var(--space-s); }
.jgroup + .jgroup { margin-block-start: var(--space-l); }
.jgroup__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; padding-block-end: 0.6rem; border-block-end: 2px solid color-mix(in oklab, var(--lime) 55%, transparent); }
.jgroup__head h3 { font-size: var(--step-2); display: inline-flex; align-items: center; gap: 0.6rem; }
.jgroup__head small { font-size: 0.9rem; font-weight: 800; padding: 0.1rem 0.6rem; border-radius: var(--r-pill); background: var(--lime); color: var(--violett-nacht); }
.jgroup__head p { color: var(--ink-2); }
}
@layer pages {
.fsj__badge {
justify-self: start; align-self: flex-start; inline-size: fit-content; display: inline-flex; gap: 0.6rem; align-items: center; padding: 0.45rem 1rem; border-radius: var(--r-pill);
background: var(--lime); color: var(--violett-nacht); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; rotate: -2deg;
}
.fsj__badge i { font-style: normal; color: var(--pink); }
.fsj__title { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); line-height: 0.98; color: #fff; text-wrap: balance; }
.fsj__sec { padding-block: var(--space-2xl); }
.fsj__sec .section-head p { color: var(--ink-2); }
.fsj__icon { inline-size: 3.2rem; block-size: 3.2rem; display: grid; place-items: center; border-radius: 1rem; background: var(--lime); color: var(--violett-nacht); rotate: -4deg; }
.fsj__icon svg { inline-size: 1.6rem; block-size: 1.6rem; }
.fsj__why { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fsj__why li {
margin: 0; display: grid; gap: 0.6rem; align-content: start; padding: var(--space-m); border-radius: 1.4rem;
background: color-mix(in oklab, #fff 6%, transparent); border: 1.5px solid color-mix(in oklab, #fff 14%, transparent);
transition: translate var(--dur-2) var(--ease-spring), border-color var(--dur-2), rotate var(--dur-2) var(--ease-spring);
}
.fsj__why li:nth-child(even) .fsj__icon { background: var(--pink); rotate: 5deg; }
.fsj__why li:hover { translate: 0 -5px; rotate: calc((var(--i) - 1.5) * 0.6deg); border-color: var(--lime); }
.fsj__why h3 { font-size: var(--step-1); color: #fff; }
.fsj__why p { color: var(--ink-2); }
.fsj__areas { list-style: none; padding: 0 0 0.6rem; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--space-s); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fsj__areas li { margin: 0; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; border-radius: 1.4rem; overflow: hidden; background: color-mix(in oklab, #fff 6%, transparent); border: 1.5px solid color-mix(in oklab, #fff 14%, transparent); }
.fsj__areaimg { position: relative; aspect-ratio: 4 / 3; background: var(--img-color); overflow: hidden; }
.fsj__areaimg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
.fsj__areas li:hover img { scale: 1.07; }
.fsj__areas li > div { padding: var(--space-s) var(--space-m) var(--space-m); display: grid; gap: 0.35rem; align-content: start; }
.fsj__areas h3 { font-size: var(--step-1); color: var(--lime); }
.fsj__areas p { color: var(--ink-2); font-size: 0.97rem; }
.fsj__facts { display: grid; gap: var(--space-xl); }
@media (width >= 60rem) { .fsj__facts { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.fsj__vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items: center; }
.fsj__vs > div { display: grid; gap: 0.15rem; padding: var(--space-s); border-radius: 1.2rem; background: color-mix(in oklab, #fff 7%, transparent); border: 1.5px solid color-mix(in oklab, #fff 14%, transparent); }
.fsj__vs b { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--lime); }
.fsj__vs > div:last-child b { color: var(--pink); }
.fsj__vs span { font-weight: 700; color: #fff; font-size: 0.95rem; }
.fsj__vs small { color: var(--ink-2); }
.fsj__or { font-family: var(--font-display); font-weight: 700; color: var(--ink-2); rotate: -8deg; }
.fsj__faq { display: grid; gap: 0.5rem; }
.fsj__faq details { border-radius: 1.1rem; background: color-mix(in oklab, #fff 6%, transparent); border: 1.5px solid color-mix(in oklab, #fff 12%, transparent); transition: border-color var(--dur-2), background-color var(--dur-2); }
.fsj__faq details[open] { border-color: color-mix(in oklab, var(--lime) 60%, transparent); background: color-mix(in oklab, #fff 9%, transparent); }
.fsj__faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.2rem; font-weight: 800; font-size: var(--step-0); color: #fff; }
.fsj__faq summary::-webkit-details-marker { display: none; }
.fsj__faq summary svg { inline-size: 1.2rem; flex: none; color: var(--lime); transition: rotate var(--dur-2) var(--ease-spring); }
.fsj__faq details[open] summary svg { rotate: 180deg; }
.fsj__faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 1.1rem; }
.fsj__faq details > p { padding: 0 1.2rem 1rem; color: var(--ink-2); }
.fsj__news { --grid-min: 18rem; }
.fsj__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.fsj__steps li { margin: 0; display: flex; gap: 0.8rem; align-items: center; }
.fsj__steps b { flex: none; inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--violett-nacht); font-family: var(--font-display); }
.fsj__steps li:nth-child(even) b { background: var(--pink); }
.fsj__steps span { color: #fff; font-weight: 600; }
.fsj__pate { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.fsj__pateimg { aspect-ratio: 4 / 3.2; max-inline-size: 34rem; justify-self: center; inline-size: 100%; }
.fsj__paten { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fsj__paten li { margin: 0; display: grid; gap: 0.4rem; align-content: start; padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.fsj__paten .fsj__icon { background: var(--accent-tint); color: var(--accent-ink); rotate: 0deg; border-radius: 50%; }
.fsj__paten h3 { font-size: var(--step-1); }
.fsj__amount { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--accent-ink); line-height: 1.1; }
.fsj__paten p:last-child { color: var(--ink-2); }
}
@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-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; }
}
}
@layer components {
.sym { display: block; inline-size: 100%; block-size: auto; fill: currentColor; overflow: visible; }
.sym--line { fill: none; stroke: currentColor; stroke-width: var(--sw, 6); stroke-linejoin: round; stroke-linecap: round; }
.symwin {
position: relative; inline-size: 100%; aspect-ratio: 1000 / 987.5; isolation: isolate;
-webkit-mask: url('../svg/symbol-kammern.svg') center / contain no-repeat;
mask: url('../svg/symbol-kammern.svg') center / contain no-repeat;
}
.symwin__img { position: absolute; inset: 0; background: var(--img-color, var(--accent-tint)); opacity: 0; scale: 1.12; rotate: -2deg; transition: opacity 900ms var(--ease-in-out), scale 1.8s var(--ease-out), rotate 1.8s var(--ease-out); }
.symwin__img.is-active { opacity: 1; scale: 1; rotate: 0deg; }
.symwin__img picture, .symwin__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lettering {
display: block; inline-size: 100%; aspect-ratio: 1744 / 764;
background: var(--lettering-fill, currentColor);
-webkit-mask: url('../svg/aufatmen-leben.svg') center / contain no-repeat;
mask: url('../svg/aufatmen-leben.svg') center / contain no-repeat;
}
.lettering--light { --lettering-fill: linear-gradient(100deg, #fff 0 45%, var(--lime) 72%); }
.lettering--footer { inline-size: min(100%, 36rem); --lettering-fill: linear-gradient(100deg, #fff 0 42%, var(--lime) 70%); }
.lettering--hero, .lettering--footer {
-webkit-mask: url('../svg/aufatmen-leben.svg') center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 260% 100% no-repeat;
-webkit-mask-composite: source-in;
mask: url('../svg/aufatmen-leben.svg') center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 260% 100% no-repeat;
mask-composite: intersect;
}
@keyframes write-on { from { mask-position: center, 100% 0; -webkit-mask-position: center, 100% 0; } to { mask-position: center, 0 0; -webkit-mask-position: center, 0 0; } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) and (width >= 64rem) {
:root:not([data-motion="reduziert"]) .lettering--footer { animation: write-on linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}
}
.kicker {
display: inline-flex; align-items: center; gap: 0.55em;
font-weight: 800; font-size: var(--step--1); color: var(--accent-ink); letter-spacing: 0.04em;
}
.kicker::before {
content: ""; inline-size: 1.05em; block-size: 1.05em; flex: none; border-radius: 0; box-shadow: none;
background: var(--accent);
mask: url('../svg/symbol.svg') center / contain no-repeat; -webkit-mask: url('../svg/symbol.svg') center / contain no-repeat;
}
.kicker--light { color: var(--lime); }
.kicker--light::before { background: var(--lime); }
.display, h2.display {
font-size: var(--step-display); line-height: 0.94; letter-spacing: -0.035em;
font-weight: max(var(--display-wght), 600); font-stretch: min(calc(var(--display-wdth) * 1%), 86%);
max-inline-size: 16ch; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
.section-head .display { max-inline-size: 13ch; }
.reveal-head { font-size: clamp(2.2rem, 1.15rem + 3.6vw, 4.6rem); line-height: 0.98; letter-spacing: -0.03em; font-stretch: min(calc(var(--display-wdth) * 1%), 88%); }
.kw { display: inline-block; position: relative; }
.kw--mark { color: var(--accent-ink); }
.kw__line { position: absolute; inset: auto -2% -0.08em; inline-size: 104%; block-size: 0.22em; overflow: visible; }
.kw__line path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
:root.js:not([data-motion="reduziert"]) .kinetic:not(.is-in) .kw { opacity: 0; }
:root.js:not([data-motion="reduziert"]) .kinetic.is-in .kw { animation: kw-in 1s var(--ease-out) both; animation-delay: calc(var(--i) * 85ms); }
:root.js:not([data-motion="reduziert"]) .kinetic:not(.is-in) .kw__line path { stroke-dashoffset: 1; }
:root.js:not([data-motion="reduziert"]) .kinetic.is-in .kw__line path { animation: line-draw 900ms var(--ease-out) both; animation-delay: calc(var(--i) * 85ms + 500ms); }
}
@keyframes kw-in { from { opacity: 0; translate: 0 0.55em; rotate: 3deg; filter: blur(8px); } to { opacity: 1; translate: 0 0; rotate: 0deg; filter: blur(0); } }
@keyframes line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.slider { --slide: min(82vw, 20rem); --gap: var(--space-s); position: relative; display: grid; gap: var(--space-s); }
.slider__track {
display: grid; grid-auto-flow: column; grid-auto-columns: var(--slide); gap: var(--gap);
margin: 0; list-style: none;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
padding: 0.6rem var(--gutter) 1.4rem; margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter);
mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--r-m); }
.slider__track.is-animating { scroll-snap-type: none; }
.slider__item { margin: 0; scroll-snap-align: start; min-inline-size: 0; }
.slider__item > * { block-size: 100%; }
.slider__ui { display: flex; align-items: center; gap: 0.6rem; }
.slider__btn {
inline-size: 3rem; block-size: 3rem; flex: none; border-radius: 50%; border: 1.5px solid color-mix(in oklab, var(--ink) 22%, transparent);
background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer;
transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), scale var(--dur-2) var(--ease-spring);
}
.slider__btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); scale: 1.06; }
.slider__btn:disabled { opacity: 0.35; cursor: default; }
.slider__btn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.slider__play .i-play { display: none; }
.slider__play[aria-pressed="true"] .i-play { display: block; }
.slider__play[aria-pressed="true"] .i-pause { display: none; }
.slider__dots { flex: 1; display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: center; min-inline-size: 0; }
.slider__dot {
position: relative; inline-size: 1.6rem; block-size: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer;
transition: inline-size 500ms var(--ease-out);
}
.slider__dot::before { 
content: ""; position: absolute; inset: 50% 0.45rem auto; block-size: 0.7rem; translate: 0 -50%; border-radius: var(--r-pill);
background: color-mix(in oklab, var(--ink) 24%, transparent); transition: background-color var(--dur-2);
}
.slider__dot:hover::before { background: color-mix(in oklab, var(--ink) 45%, transparent); }
.slider__dot[aria-current="true"] { inline-size: 3.4rem; }
.slider__dot[aria-current="true"]::before { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.slider__dot[aria-current="true"]::after { content: ""; position: absolute; inset: 50% 0.45rem auto; block-size: 0.7rem; translate: 0 -50%; border-radius: var(--r-pill); background: var(--accent); transform-origin: left; }
.slider.is-playing .slider__dot[aria-current="true"]::after { animation: dot-fill var(--auto, 6s) linear both; }
@keyframes dot-fill { from { scale: 0 1; } to { scale: 1 1; } }
.slider__count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.95rem; }
.slider__item.is-new { animation: card-in 700ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
@keyframes card-in { from { opacity: 0; translate: 2.5rem 0; scale: 0.96; } }
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease-out), translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2); }
.tilt.is-tilting { transition: transform 120ms linear, translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.tilt::before {
content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
background: radial-gradient(40% 50% at var(--gx, 50%) var(--gy, 0%), rgb(255 255 255 / .32), transparent 70%);
transition: opacity var(--dur-3);
}
.tilt.is-tilting::before { opacity: 1; }
}
@layer base {
body::before {
content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
background:
radial-gradient(38vmax 34vmax at 12% 18%, color-mix(in oklab, var(--aura-a) 34%, transparent), transparent 70%),
radial-gradient(42vmax 36vmax at 88% 30%, color-mix(in oklab, var(--aura-b) 30%, transparent), transparent 70%),
radial-gradient(40vmax 34vmax at 40% 92%, color-mix(in oklab, var(--aura-c) 26%, transparent), transparent 70%),
radial-gradient(30vmax 26vmax at 70% 70%, color-mix(in oklab, var(--flow-accent) 18%, transparent), transparent 70%);
animation: aura-float 48s var(--ease-breath) infinite alternate; animation-play-state: var(--play, running);
}
@keyframes aura-float { from { translate: -2vmax -1vmax; } to { translate: 2vmax 2vmax; } }
body::after { 
content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05;
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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-kontrast="hoch"] body::after, :root[data-kontrast="hoch"] body::before { display: none; }
@media print { body::before, body::after { display: none; } }
.v-jung { display: none; }
[data-tone="jung"] .v-jung { display: inline; }
[data-tone="jung"] .v-std { display: none; }
.vx > .v-t { display: none; }
[data-tone="jung"] .vx[data-has~="jung"] > .v-std { display: none; } [data-tone="jung"] .vx[data-has~="jung"] > .v-t[data-t="jung"] { display: inline; }
[data-tone="zweisam"] .vx[data-has~="zweisam"] > .v-std { display: none; } [data-tone="zweisam"] .vx[data-has~="zweisam"] > .v-t[data-t="zweisam"] { display: inline; }
[data-tone="familie"] .vx[data-has~="familie"] > .v-std { display: none; } [data-tone="familie"] .vx[data-has~="familie"] > .v-t[data-t="familie"] { display: inline; }
[data-tone="still"] .vx[data-has~="still"] > .v-std { display: none; } [data-tone="still"] .vx[data-has~="still"] > .v-t[data-t="still"] { display: inline; }
[data-tone="klar"] .vx[data-has~="klar"] > .v-std { display: none; } [data-tone="klar"] .vx[data-has~="klar"] > .v-t[data-t="klar"] { display: inline; }
[data-tone="fest"] .vx[data-has~="fest"] > .v-std { display: none; } [data-tone="fest"] .vx[data-has~="fest"] > .v-t[data-t="fest"] { display: inline; }
}
@layer pages {
:root[data-tone="jung"] {
--font-display: 'Bricolage', 'Atkinson Next', system-ui, sans-serif;
--shadow-2: 6px 6px 0 color-mix(in oklab, var(--pink) 75%, transparent);
--shadow-3: 10px 10px 0 color-mix(in oklab, var(--pink) 70%, transparent);
}
:root[data-tone="jung"] body::after { opacity: 0.08; }
:root[data-tone="jung"] .display { font-stretch: 75%; font-weight: 800; letter-spacing: -0.02em; }
:root[data-tone="jung"] .kw--mark { color: var(--violett-nacht); background: var(--lime); padding: 0 0.12em; border-radius: 0.12em; rotate: -2deg; }
:root[data-tone="jung"] .kw__line { display: none; }
:root[data-tone="jung"] :is(.event-card, .offer-card, .news-card, .icard) { border: 2px solid color-mix(in oklab, var(--lime) 55%, transparent); box-shadow: 5px 5px 0 color-mix(in oklab, var(--pink) 70%, transparent); }
:root[data-tone="jung"] :is(.event-card, .offer-card, .news-card, .icard):has(.card__link:hover) { translate: -3px -3px; box-shadow: 9px 9px 0 var(--pink); border-color: var(--lime); }
:root[data-tone="jung"] .tag--aud { background: var(--lime); color: var(--violett-nacht); rotate: -2deg; }
:root[data-tone="jung"] .tag--aud::before { background: var(--violett-nacht); box-shadow: none; }
:root[data-tone="jung"] .tag--theme { box-shadow: inset 0 0 0 1.5px var(--pink); color: var(--ink); rotate: 1.5deg; }
:root[data-tone="jung"] .event-card__date { background: var(--lime); color: var(--violett-nacht); rotate: -4deg; }
:root[data-tone="jung"] .event-card__date span { color: var(--violett-nacht); }
:root[data-tone="jung"] .btn:not(.btn--glass, .btn--light, .btn--ghost) { box-shadow: 4px 4px 0 var(--pink); }
:root[data-tone="jung"] .sentence select { rotate: -1deg; box-shadow: 5px 5px 0 var(--pink); }
:root[data-tone="jung"] .sentence__slot[data-slot="was"] select { background: var(--pink); color: var(--violett-nacht); rotate: 1deg; box-shadow: 5px 5px 0 var(--lime); }
:root[data-tone="jung"] .sentence__slot[data-slot="was"]::after { border-color: var(--violett-nacht); }
:root[data-tone="jung"] .door__frame::before { border-style: dashed; }
:root[data-tone="jung"] .kicker { text-transform: uppercase; letter-spacing: 0.12em; }
:root[data-tone="jung"] .chip[aria-pressed="true"] { background: var(--lime); color: var(--violett-nacht); border-color: var(--lime); }
:root[data-tone="jung"] .story { background: color-mix(in oklab, var(--story-bg) 22%, var(--bg)); }
}