@font-face { font-family: Barlow; src: url(../../assets/fonts/barlow-v13-latin-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Barlow; src: url(../../assets/fonts/barlow-v13-latin-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Barlow; src: url(../../assets/fonts/barlow-v13-latin-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: Rubik;  src: url(../../assets/fonts/rubik-v31-latin-900.woff2)  format('woff2'); font-weight: 900; font-display: swap; }
:root {
--gelb:    #FDFF55;
--rot:     #FF3D5A;
--violett: #4B0F99;
--tuerkis: #3DC7C6;
--magenta: #EE6EFA;
--blau:    #4282C2;
--amber:   #FFC42E;
--vorhang: #C0105A;
--schwarz: #1A0836;
--weiss:   #FFFFFF;
--display: Rubik, system-ui, sans-serif;
--lauf:    Barlow, system-ui, sans-serif;
--t-display:  clamp(39.1px, 2.4vw + 30px, 84.7px);
--t-headline: clamp(31.3px, 1.9vw + 24px, 52.4px);
--t-title:    25px;
--t-body:     16px;
--t-label:    16px;
--t-kapsel:     19px;
--t-klein:    14px;
--t-beschreibung: clamp(19px, 0.5vw + 17px, 23px);
--t-terminname: clamp(25px, 0.86vw + 21.9px, 34px);
--t-frage: clamp(19px, 0.48vw + 17.3px, 25px);
--zeilenmass: 46rem;
--t-jahr: clamp(28px, 1.2vw + 23px, 42px);
--s-2xs: clamp(3.8px,  0.32vw + 3px,  7.3px);
--s-xs:  clamp(6.1px,  0.53vw + 4px,  11.8px);
--s-s:   clamp(9.9px,  0.86vw + 7px,  19.2px);
--s-m:   clamp(16px,   1.39vw + 11px, 31px);
--s-l:   clamp(25.9px, 2.25vw + 18px, 50.2px);
--s-xl:  clamp(41.9px, 3.64vw + 29px, 81.2px);
--s-2xl: clamp(67.8px, 5.88vw + 47px, 131.3px);
--r-flaeche: 50px;
--r-block:   25px;
--r-kapsel:  100px;
--r-feld:    14px;
--breite: 78rem;
--uebergang: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--kopf-h: calc(2 * var(--s-s) + 1.5 * var(--t-label));
--grund:  var(--gelb);
--stimme: var(--rot);
--lesen:  var(--schwarz);
--grund-block: color-mix(in oklab, var(--weiss) 25%, var(--grund));
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-padding-block-start: calc(var(--kopf-h) + var(--s-m));
--balken-grund: var(--grund);
--balken-lesen: var(--lesen);
scrollbar-color: color-mix(in oklab, var(--balken-lesen) 28%, var(--balken-grund)) var(--balken-grund);
background: var(--grund);
}
@media (prefers-reduced-motion: no-preference) {
html { transition: scrollbar-color 300ms cubic-bezier(0.4, 0, 0.2, 1); }
}
body {
margin: 0;
font-family: var(--lauf);
font-weight: 600;              
font-size: var(--t-body);
line-height: 1.5;
letter-spacing: .1px;
color: var(--lesen);
background: var(--grund);
}
[hidden] { display: none !important; }
img, video, iframe { max-width: 100%; display: block; }
img, video { height: auto; }
a {
color: inherit;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 2px;
text-underline-offset: .18em;
}
a:is(:hover, :focus-visible) {
text-underline-offset: .34em;
}
@media (prefers-reduced-motion: no-preference) {
a {
transition: text-underline-offset var(--uebergang);
}
}
::selection { background: var(--stimme); color: var(--grund); }
:where(a, button, input, textarea, select, summary):focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
:where(.knopf, .knopf-voll, .hero-pfeil, .leuchtkasten-pfeil,
.anfrage input, .anfrage textarea, .anfrage-fehler):focus-visible {
outline-offset: 0;
}
:where(.anfrage input, .anfrage textarea, .anfrage-fehler):focus-visible {
border-color: currentColor;
}
html { -webkit-tap-highlight-color: transparent; }
:is([data-jahr-knopf], .jahrwahl-zu, .jahrwahl-alle, .karte-zu,
.umkreis-standort, .umkreis-stufe, .umkreis-frage,
.signet-heim, .anschlag-ecke):active {
transform: translate(1px, 1px);
}
a:active { text-underline-offset: .06em; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.sprunglink {
position: fixed;
z-index: 70;
inset-block-start: calc(var(--s-s) + env(safe-area-inset-top, 0px));
inset-inline-start: var(--s-m);
}
@media (max-width: 52rem) {
.sprunglink { inset-inline-end: var(--s-m); text-align: center; }
}
.sprunglink:not(:focus) {
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
border-width: 0;
clip-path: inset(50%); white-space: nowrap;
}
.huelle { width: min(100% - 2 * var(--s-m), var(--breite)); margin-inline: auto; }
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: 260ms cubic-bezier(0.4, 0, 1, 1) both licht-aus;
}
::view-transition-new(root) {
animation: 520ms cubic-bezier(0.16, 1, 0.3, 1) both licht-an;
}
@keyframes licht-aus { to   { opacity: 0 } }
@keyframes licht-an  { from { opacity: 0 } }
.kopf   { view-transition-name: kopf; }
.filter { view-transition-name: filter; }
::view-transition-group(kopf),
::view-transition-old(kopf),
::view-transition-new(kopf),
::view-transition-group(filter),
::view-transition-old(filter),
::view-transition-new(filter) {
animation-duration: 520ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.vorhang[open] .vorhang-tuch { view-transition-name: vorhang; }
html[data-vorhang-ab] body * { view-transition-name: none; }
html[data-vorhang-ab] .vorhang[open] .vorhang-tuch { view-transition-name: vorhang; }
html[data-vorhang-ab] .vorhang[open] .vorhang-griff { view-transition-name: vorhang-griff; }
html:active-view-transition-type(vorhang)::view-transition-group(*),
html:active-view-transition-type(vorhang)::view-transition-old(*),
html:active-view-transition-type(vorhang)::view-transition-new(*) {
animation: none;
}
html:active-view-transition-type(vorhang)::view-transition-group(vorhang) { z-index: 2; }
html:active-view-transition-type(vorhang)::view-transition-group(vorhang-griff) { z-index: 3; }
html:active-view-transition-type(vorhang)::view-transition-old(vorhang) {
animation: 460ms cubic-bezier(0.5, 0, 0.2, 1) both vorhang-ab;
}
@keyframes vorhang-ab {
from { transform: none }
to   { transform: translateY(calc(-100% - 7rem)) }
}
.vorhang[open] .vorhang-griff { view-transition-name: vorhang-griff; }
html:active-view-transition-type(vorhang)::view-transition-old(vorhang-griff) {
animation: 460ms cubic-bezier(0.5, 0, 0.2, 1) both griff-ab;
}
@keyframes griff-ab {
from { transform: none }
to   { transform: translateY(-100vh) }
}
html:not([data-vorhang-ab]) .vorhang-griff { view-transition-name: vorhang-griff; }
html:not(:active-view-transition-type(vorhang))::view-transition-group(vorhang-griff),
html:not(:active-view-transition-type(vorhang))::view-transition-new(vorhang-griff) {
animation: none;
}
html:not(:active-view-transition-type(vorhang))::view-transition-old(vorhang-griff) {
animation: none;
opacity: 0;
}
#archiv .termine { view-transition-name: termine; }
html:active-view-transition-type(vor)::view-transition-old(root),
html:active-view-transition-type(zurueck)::view-transition-old(root) {
animation: none;
}
html:active-view-transition-type(vor)::view-transition-new(root) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-von-rechts;
}
html:active-view-transition-type(zurueck)::view-transition-new(root) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-von-links;
}
@keyframes wischer-von-rechts {
from { clip-path: inset(0 0 0 100%) }
to   { clip-path: inset(0) }
}
@keyframes wischer-von-links {
from { clip-path: inset(0 100% 0 0) }
to   { clip-path: inset(0) }
}
::view-transition-group(vertiefung) {
animation-duration: 520ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(vertiefung),
::view-transition-new(vertiefung) {
width: 100%;
height: 100%;
object-fit: cover;
animation-duration: 520ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-group(schild) { animation: none; }
::view-transition-new(schild) {
animation: 340ms cubic-bezier(0.34, 1.4, 0.64, 1) 460ms both schild-an;
}
@keyframes schild-an {
from { opacity: 0; transform: translateY(.6rem) scale(.94); }
}
html:active-view-transition-type(schildreise)::view-transition-group(schild) {
animation: -ua-view-transition-group-anim-schild 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
html:active-view-transition-type(schildreise)::view-transition-old(schild) { animation: none; opacity: 0; }
html:active-view-transition-type(schildreise)::view-transition-new(schild) { animation: none; }
html:active-view-transition-type(verwaist)::view-transition-old(vertiefung),
html:active-view-transition-type(verwaist)::view-transition-old(schild) {
animation: 260ms cubic-bezier(0.4, 0, 1, 1) both licht-aus;
}
html:active-view-transition-type(verwaist)::view-transition-group(vertiefung),
html:active-view-transition-type(verwaist)::view-transition-group(schild) {
animation: none;
}
html:active-view-transition-type(verwaist)::view-transition-old(*.plakat) {
animation: 260ms cubic-bezier(0.4, 0, 1, 1) both licht-aus;
}
html:active-view-transition-type(verwaist)::view-transition-group(*.plakat) {
animation: none;
}
html:active-view-transition-type(filtern)::view-transition-old(root),
html:active-view-transition-type(filtern)::view-transition-new(root) {
animation: none;
}
::view-transition-group(termine) {
animation-duration: 380ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(termine) {
animation: 160ms cubic-bezier(0.4, 0, 1, 1) both licht-aus;
}
::view-transition-new(termine) {
animation: 380ms cubic-bezier(0.16, 1, 0.3, 1) both licht-an;
}
.terminbuehne { view-transition-name: buehne; }
html:active-view-transition-type(lichtwechsel)::view-transition-old(root),
html:active-view-transition-type(lichtwechsel)::view-transition-new(root) {
animation: none;
}
::view-transition-group(buehne) {
animation-duration: 460ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
html:active-view-transition-type(licht-rechts)::view-transition-new(buehne) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-von-rechts;
}
html:active-view-transition-type(licht-rechts)::view-transition-old(buehne) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-raeumt-nach-links;
}
html:active-view-transition-type(licht-links)::view-transition-new(buehne) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-von-links;
}
html:active-view-transition-type(licht-links)::view-transition-old(buehne) {
animation: 460ms cubic-bezier(0.16, 1, 0.3, 1) both wischer-raeumt-nach-rechts;
}
@keyframes wischer-raeumt-nach-links {
from { clip-path: inset(0) }
to   { clip-path: inset(0 100% 0 0) }
}
@keyframes wischer-raeumt-nach-rechts {
from { clip-path: inset(0) }
to   { clip-path: inset(0 0 0 100%) }
}
.signet-name { view-transition-name: signet; }
::view-transition-group(signet),
::view-transition-old(signet),
::view-transition-new(signet) {
animation-duration: 520ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.sektion {
padding-block: var(--s-xl);
background: var(--grund);
color: var(--lesen);
caret-color: var(--stimme);
}
[data-ton="gelb"]    { --grund: var(--gelb);    --stimme: var(--rot);     --stimme-klein: var(--vorhang); --lesen: var(--schwarz); --karte: var(--violett); --karte-text: var(--gelb); --karte-fehl: var(--rot); }
[data-ton="rot"]     { --grund: var(--rot);     --stimme: var(--gelb);    --stimme-klein: var(--schwarz); --lesen: var(--schwarz); --karte: var(--violett); --karte-text: var(--gelb); --karte-fehl: var(--tuerkis); }
[data-ton="violett"] { --grund: var(--violett); --stimme: var(--gelb);    --stimme-klein: var(--gelb);    --lesen: var(--gelb);    --karte: var(--gelb);    --karte-text: var(--violett); --karte-fehl: var(--rot); }
[data-ton="tuerkis"] { --grund: var(--tuerkis); --stimme: var(--violett); --stimme-klein: var(--violett); --lesen: var(--schwarz); --karte: var(--violett); --karte-text: var(--gelb); --karte-fehl: var(--magenta); }
[data-ton="magenta"] { --grund: var(--magenta); --stimme: var(--violett); --stimme-klein: var(--violett); --lesen: var(--schwarz); --karte: var(--violett); --karte-text: var(--gelb); --karte-fehl: var(--tuerkis); }
[data-ton="blau"]    { --grund: var(--blau);    --stimme: var(--gelb);    --stimme-klein: var(--schwarz); --lesen: var(--schwarz); --karte: var(--violett); --karte-text: var(--gelb); --karte-fehl: var(--magenta); }
[data-ton="gelb"]    { --grund-block: color-mix(in oklab, var(--weiss) 25%, var(--grund)); }
[data-ton="rot"]     { --grund-block: color-mix(in oklab, var(--schwarz) 8%, var(--grund)); }
[data-ton="violett"] { --grund-block: color-mix(in oklab, var(--weiss) 7%,  var(--grund)); }
[data-ton="tuerkis"] { --grund-block: color-mix(in oklab, var(--weiss) 18%, var(--grund)); }
[data-ton="magenta"] { --grund-block: color-mix(in oklab, var(--weiss) 15%, var(--grund)); }
[data-ton="blau"]    { --grund-block: color-mix(in oklab, var(--weiss) 10%, var(--grund)); }
[data-ton="schwarz"] { --grund-block: color-mix(in oklab, var(--weiss) 6%,  var(--grund)); }
[data-trennung][data-trennung] { hyphens: manual; }
[data-trennung] .trennbar { hyphens: auto; }
h1, h2, h3, .stimme {
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
color: var(--stimme);
margin: 0 0 var(--s-m);
text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-headline); }
h3 { font-size: var(--t-title); font-family: var(--lauf); }
p { max-width: 65ch; }
.versatz {
color: var(--grund);
--versatz-farbe: var(--stimme);
text-shadow: 2px 2px 0 var(--versatz-farbe);
}
@keyframes andruck {
from { text-shadow: 0.35em 0.35em 0 var(--versatz-farbe); }
to   { text-shadow: 2px 2px 0 var(--versatz-farbe); }
}
.versatz {
animation: andruck 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rollen {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
text-transform: uppercase;
line-height: 1.05;
color: var(--stimme);
list-style: none;
margin: var(--s-m) 0 0;
padding: 0;
}
.vorspann {
font-size: var(--t-title);
font-weight: 600;
line-height: 1.35;
max-width: 45ch;
}
.vorspann p { max-width: none; }
.event-wann {
font-family: var(--lauf);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-label);
line-height: 1.05;
letter-spacing: .04em;
color: var(--stimme-klein, var(--stimme));
margin: 0 0 var(--s-s);
}
.hero-sektion { padding: 0; background: var(--violett); }
.hero {
height: 100svh;
padding: 0;
display: grid;
grid-template: "buehne" 1fr / 1fr;
}
.hero > * { grid-area: buehne; }
.hero-slider {
position: relative;
min-height: 0;
overflow: hidden;
isolation: isolate;
border-radius: 0 0 var(--r-flaeche) var(--r-flaeche);
background: var(--stimme);        
}
.hero-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-bild[data-aktiv] { opacity: 1; }
.hero-slider:not([data-bereit]) .hero-bild:first-child { opacity: 1; }
.hero-streifen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.hero-steuerung {
position: absolute;
inset: auto var(--s-m) var(--s-m) auto;
z-index: 1;
display: flex;
gap: var(--s-2xs);
}
.hero-pfeil {
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid var(--amber);
border-radius: var(--r-kapsel);
background: var(--amber);
color: var(--violett);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.hero-pfeil:hover { background: transparent; color: var(--amber); }
.hero-pfeil:active { transform: translate(1px, 1px); }
.hero-pause svg { grid-area: 1 / 1; transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero-pause .glyphe-weiter { opacity: 0; }
.hero-pause[aria-pressed="true"] .glyphe-pause  { opacity: 0; }
.hero-pause[aria-pressed="true"] .glyphe-weiter { opacity: 1; }
.hero-blase {
--grund: var(--weiss);
--stimme: var(--violett);
position: absolute;
z-index: 1;
isolation: isolate;
width: max-content;
max-width: min(24rem, calc(100% - 2 * var(--s-m)));
margin: 0;
padding: var(--s-s) var(--s-m) var(--s-xs);
border-radius: calc(var(--r-feld) * 2);
background: var(--weiss);
color: var(--violett);
box-shadow: 3px 3px 0 var(--violett);
opacity: 0;
visibility: hidden;
transform-origin: var(--ursprung, 50% 100%);
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 200ms;
}
.hero-blase[data-seite="rechts"] { left: calc(var(--mx) + 4%); }
.hero-blase[data-seite="links"]  { right: calc(100% - var(--mx) + 4%); }
.hero-blase { bottom: calc(100% - var(--my) + 3%); }
.hero-blase[data-gesetzt] { right: auto; bottom: auto; }
.hero-blase[data-aktiv] {
opacity: 1;
visibility: visible;
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 350ms, visibility 0s 350ms;
}
.hero-blase blockquote { margin: 0; }
.hero-blase blockquote p {
margin: 0;
max-width: none;
display: grid;
gap: var(--s-2xs);
font-family: var(--display);
font-weight: 900;
font-size: calc(var(--blase-mass, 1) * clamp(20px, 0.9vw + 15px, 30px));
text-transform: uppercase;
line-height: 1.14;
text-wrap: balance;
hyphens: manual;
overflow-wrap: break-word;
}
.hero-blase[data-gesetzt] blockquote p { overflow-wrap: normal; }
.hero-blase[data-gesetzt] :is(.einzeiler-text, .einzeiler-stichwort, .trennbar) { hyphens: manual; }
.blase-wort {
display: inline-block;
transform-origin: 50% 88%;
}
.blase-pointe {
display: inline-block;
padding: 0.12em 0.42em 0.06em;
border-radius: var(--r-kapsel);
background: linear-gradient(var(--violett), var(--violett)) no-repeat 0 0 / 100% 100%;
color: var(--gelb);
white-space: nowrap;
}
.hero-blase[data-misst] :is(.blase-wort, .blase-pointe) { scale: none !important; rotate: none !important; translate: none !important; }
.blase-pointe[data-bricht] {
white-space: normal;
border-radius: var(--r-feld);
}
.hero-blase figcaption {
margin-block-start: var(--s-2xs);
font-size: var(--t-klein);
font-weight: 600;
}
.hero-blase a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hero-blase a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hero-blase:hover a { text-decoration-thickness: 2px; }
.hero-blase:has(a:focus-visible) { outline: 3px solid var(--amber); outline-offset: 3px; }
.hero-blase a:focus-visible { outline: none; }
.hero-blase-zipfel {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.hero-blase-zipfel[hidden] { display: none; }
.hero-blase:not([data-gesetzt]) .hero-blase-zipfel { display: none; }
.zipfel-flaeche  { fill: var(--weiss); }
.zipfel-schatten { fill: var(--violett); }
@media (prefers-reduced-motion: no-preference) {
.hero-slider[data-bereit] .hero-blase { transform: scale(0.15); transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1) 60ms, transform 180ms cubic-bezier(0.55, 0, 1, 0.45), visibility 0s 180ms; }
.hero-slider[data-bereit] .hero-blase[data-aktiv] {
transform: none;
transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1) 300ms, transform 360ms cubic-bezier(0.34, 1.45, 0.5, 1) 300ms, visibility 0s 300ms;
}
}
@keyframes letter-fall {
from {
opacity: 0;
transform: translateY(-0.42em) rotate(-7deg) scale(1.16);
}
60% {
opacity: 1;
transform: translateY(0.04em) rotate(2deg) scale(0.975);
}
to {
opacity: 1;
transform: none;
}
}
.signet[data-einzug] .signet-zeichen {
animation: letter-fall 620ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes andruck-signet {
from { text-shadow: 0.3em 0.3em 0 var(--versatz-farbe); }
to   { text-shadow: 2px 2px 0 var(--versatz-farbe); }
}
.signet[data-einzug] .signet-name {
animation: andruck-signet 520ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: 380ms;
}
@keyframes rolle-ein {
from { opacity: 0; transform: translateX(-0.8em) skewX(-12deg); }
to   { opacity: 1; transform: none; }
}
.signet[data-einzug] .signet-rollen li {
animation: rolle-ein 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: calc(700ms + var(--i, 0) * 90ms);
}
.signet-zeichen {
transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--i, 0) * 22ms);
}
.signet-name:hover .signet-zeichen,
.signet-heim:focus-visible .signet-zeichen {
transform: translateY(-0.14em) rotate(-6deg);
}
.signet-name:hover .signet-zeichen:nth-child(even),
.signet-heim:focus-visible .signet-zeichen:nth-child(even) {
transform: translateY(-0.14em) rotate(7deg);
}
.karte:hover, .karte:focus-visible,
.kachel:hover, .kachel:focus-visible { rotate: -1.2deg; }
.karte:active, .kachel:active { rotate: 0deg; }
.karte, .kachel { transition: transform var(--uebergang), box-shadow var(--uebergang), rotate var(--uebergang); }
.knopf, .knopf-voll {
display: inline-block;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-label);
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
padding: 9.6px 16px;
border-radius: var(--r-kapsel);
border: 2px solid currentColor;
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.knopf {
background: transparent;
color: var(--stimme-klein, var(--stimme));
}
.knopf:hover {
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
}
.knopf:active, .knopf-voll:active, .anfrage button:active {
transform: translate(1px, 1px);
}
.knopf-voll {
background: var(--amber);
border-color: var(--amber);
color: var(--violett);
}
.knopf-voll:hover {
background: var(--violett);
color: var(--amber);
}
.knopf-paar {
display: inline-grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-s);
margin-top: var(--s-m);
}
.knopf-paar .knopf { text-align: center; }
@media (max-width: 40rem) {
.knopf-paar { grid-template-columns: 1fr; }
}
.terminbuehne { --bedien: 46.5px; }
@media (max-width: 26rem) {
.terminbuehne { --bedien: var(--griff-zeile); }
}
.kapseln ul {
display: flex; flex-wrap: wrap; gap: var(--s-xs);
list-style: none; margin: 0 0 var(--s-m); padding: 0;
}
.kapseln:has(+ .umkreis) ul { margin-block-end: var(--s-s); }
.kapseln + .umkreis { margin-block-end: var(--s-s); }
.kapsel { text-transform: none; font-size: var(--t-kapsel); padding: 7px 15px; }
.kapsel b { font-variant-numeric: tabular-nums; }
@media (max-width: 26rem) {
.kapsel { font-size: 17px; padding: 7.25px 13px; }
}
.kapsel[aria-current="true"] {
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
}
.kapsel:has(> .kapsel-abriss) {
--kv: 7px;
--kh: 15px;
--kerbe: 5px;
display: inline-flex;
align-items: stretch;
padding: 0;
position: relative;
}
.kapsel-name {
padding: var(--kv) 11px var(--kv) var(--kh);
transition: padding var(--uebergang);
}
.kapsel-abriss {
--perf: var(--grund);
position: relative;
display: grid;
place-items: center;
min-width: 1.7em;
margin-block: -2px;
margin-inline-end: -2px;
padding: var(--kv) calc(var(--kh) - 2px) var(--kv) 11px;
border: 2px solid var(--stimme-klein, var(--stimme));
border-inline-start: 0;
border-radius: 0 var(--r-kapsel) var(--r-kapsel) 0;
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
font-variant-numeric: tabular-nums;
transition: background var(--uebergang), color var(--uebergang);
}
.kapsel[aria-current="true"] > .kapsel-abriss {
--perf: var(--stimme-klein, var(--stimme));
background: var(--grund);
color: var(--stimme-klein, var(--stimme));
}
.kapsel[aria-current="true"]:has(> .kapsel-abriss) { border-color: var(--stimme-klein, var(--stimme)); }
.kapsel-abriss::before {
content: "";
position: absolute;
inset-block: calc(-1px - var(--kerbe));
inset-inline-start: calc(-1 * var(--kerbe));
width: calc(2 * var(--kerbe));
pointer-events: none;
background:
radial-gradient(circle at 50% 0, var(--grund) 0 var(--kerbe), rgb(0 0 0 / 0) calc(var(--kerbe) + .5px))
top    / 100% calc(2 * var(--kerbe)) no-repeat,
radial-gradient(circle at 50% 100%, var(--grund) 0 var(--kerbe), rgb(0 0 0 / 0) calc(var(--kerbe) + .5px))
bottom / 100% calc(2 * var(--kerbe)) no-repeat,
radial-gradient(circle at center, var(--perf) 0 1.5px, rgb(0 0 0 / 0) 2px)
center / 100% 7px repeat-y content-box;
padding-block: calc(2 * var(--kerbe) + 1px);
}
.kapsel-abriss > span { display: inline-block; }
.kapsel-abriss[data-leer] {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.kapsel:has(> .kapsel-abriss[data-leer]) > .kapsel-name { padding-inline-end: var(--kh); }
@media (max-width: 26rem) {
.kapsel:has(> .kapsel-abriss) { --kv: 7.25px; --kh: 13px; --kerbe: 4px; }
.kapsel-name   { padding-inline-end: 9px; }
.kapsel-abriss { padding-inline-start: 9px; }
}
.kapseln:has(+ .kapseln) ul { margin-block-end: var(--s-s); }
:is(.kapseln, .jahrwahl) + .kapseln ul { margin-block-end: var(--s-l); }
.jahrwahl { margin-block-end: var(--s-s); }
.jahrwahl-knopf,
.jahrwahl-zu {
display: inline-flex;
align-items: center;
gap: .45em;
}
.jahrwahl-knopf { anchor-name: --jahrwahl; }
.jahrwahl-pfeil {
width: .62em;
height: auto;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.jahrwahl-tafel {
--kapsel-b: 9em;
--kapsel-h: 2.6em;
--ecke: 22px;
--zu: inset(0 calc(100% - var(--kapsel-b)) calc(100% - var(--kapsel-h)) 0 round calc(var(--kapsel-h) / 2));
inset: 0;
margin: auto;
width: min(27rem, calc(100vw - 32px));
height: fit-content;
padding: 0 0 var(--s-s);
border: 0;
border-radius: var(--ecke);
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
box-shadow: 5px 5px 0 var(--karte-fehl, var(--schwarz));
font-size: var(--t-kapsel);
overflow: visible;
clip-path: var(--zu);
transition:
clip-path 200ms cubic-bezier(0.4, 0, 1, 1),
overlay 200ms allow-discrete,
display 200ms allow-discrete;
}
@supports (position-anchor: --jahrwahl) {
.jahrwahl-tafel {
position-anchor: --jahrwahl;
inset: auto;
top: anchor(top);
left: anchor(left);
}
}
.jahrwahl-tafel:popover-open {
clip-path: inset(0 -12px -12px 0 round var(--ecke));
transition:
clip-path 460ms cubic-bezier(0.16, 1, 0.3, 1),
overlay 460ms allow-discrete,
display 460ms allow-discrete;
}
@starting-style {
.jahrwahl-tafel:popover-open { clip-path: var(--zu); }
}
.jahrwahl-tafel::backdrop { background: none; }
@media (prefers-reduced-motion: reduce) {
.jahrwahl-tafel, .jahrwahl-tafel:popover-open { transition: none; }
}
.jahrwahl-zu {
padding: 9px 17px;
border: 0;
border-radius: var(--r-kapsel);
background: none;
color: inherit;
font: 900 1em / 1.5 var(--lauf);
cursor: pointer;
}
.jahrwahl-zu .jahrwahl-pfeil { rotate: 180deg; }
.jahrwahl-raster {
display: grid;
gap: 2px;
margin: var(--s-xs) 0 0;
padding: 0 var(--s-s);
list-style: none;
}
.jahrwahl-zeile {
display: grid;
grid-template-columns: 2.4em 1fr;
align-items: center;
}
.jahrwahl-kopf {
padding-inline-end: .3em;
font: 600 .72em / 1 var(--lauf);
letter-spacing: .04em;
text-align: end;
font-variant-numeric: tabular-nums;
}
.jahrwahl-zeile ol {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.jahrwahl-zeile a {
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 50%;
color: inherit;
font: 900 1em / 1 var(--lauf);
font-variant-numeric: tabular-nums;
text-decoration: none;
transition: background var(--uebergang), color var(--uebergang);
}
.jahrwahl-leer {
aspect-ratio: 1;
background: radial-gradient(circle at center, currentColor 0 1.5px, rgb(0 0 0 / 0) 2px);
}
.jahrwahl-alle {
display: block;
margin: var(--s-xs) var(--s-s) 0;
padding: 5px 13px;
border: 2px solid currentColor;
border-radius: var(--r-kapsel);
color: inherit;
font: 900 1em / 1.5 var(--lauf);
text-align: center;
text-decoration: none;
transition: background var(--uebergang), color var(--uebergang);
}
:is(.jahrwahl-zeile a, .jahrwahl-alle):is(:hover, [aria-current="true"]) {
background: var(--grund);
border-color: var(--grund);
color: var(--stimme-klein, var(--stimme));
}
:is(.jahrwahl-zeile a, .jahrwahl-alle, .jahrwahl-zu):focus-visible {
outline: 3px solid var(--grund);
outline-offset: 0;
}
.jahrwahl-zeile a:focus-visible { outline-offset: -3px; }
.jahrwahl-zeile a:is(:hover, [aria-current="true"]):focus-visible { outline-offset: 2px; }
@media (max-width: 26rem) {
.jahrwahl-tafel { font-size: 17px; }
.jahrwahl-zu { padding: 7px 15px; }
}
.roehre ~ .sektion[data-ton="schwarz"] > .huelle {
border-block-start: 2px solid var(--stimme);
padding-block-start: var(--s-xl);
}
.termin-bilanz { margin: 0 0 var(--s-m); }
.termin-bilanz b {
font-size: var(--t-title); color: var(--stimme);
font-variant-numeric: tabular-nums;
}
.termin-fuss {
display: flex; flex-wrap: wrap; gap: var(--s-xs);
margin-block-start: var(--s-l);
max-width: none;
}
.termine { list-style: none; margin: 0; padding: 0; }
.termin[hidden][data-geht] { display: grid !important; }
.umkreis-ohne[hidden][data-geht] { display: block !important; }
.umkreis-hinweis[hidden][data-geht] { display: flex !important; }
.termin[data-geht]::before { background-image: none; }
.termin:focus-visible { outline: 3px solid var(--stimme); outline-offset: 3px; }
.termin {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr) auto;
gap: var(--s-m);
align-items: center;
padding-block: var(--s-s);
padding-inline: var(--s-m);
position: relative;
}
.termin::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 0;
block-size: calc(2 * var(--punkt-r));
background-image:  var(--punkt);
background-size:   var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
pointer-events: none;
}
.termine {
--punkt: radial-gradient(circle at center,
var(--punkt-farbe) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
--punkt-farbe: var(--stimme-klein, var(--stimme));
position: relative;
padding-block-end: calc(2 * var(--punkt-r) + var(--s-2xs));
}
.termine::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: calc(2 * var(--punkt-r));
background-image:  var(--punkt);
background-size:   var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
pointer-events: none;
}
.termin[data-block="b"] { background-color: var(--grund-block); }
.termin[data-block="b"][data-neu]        { border-start-start-radius: var(--r-block); border-start-end-radius: var(--r-block); }
.termin[data-block="b"][data-block-ende] { border-end-start-radius: var(--r-block); border-end-end-radius: var(--r-block); }
.termin[data-neu]:not([data-geht])::before {
block-size: calc(4 * var(--punkt-r) + 2px);
background-image: var(--punkt), var(--punkt);
background-position: left top, left calc(2 * var(--punkt-r) + 2px);
}
.termin-datum {
display: block;                
font-family: var(--lauf);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
font-size: var(--t-label);
color: var(--lesen);
font-variant-numeric: tabular-nums;
}
.termin-datum b { display: block; font-size: var(--t-title); color: var(--stimme); }
.termin-wann {
display: flex;
flex-wrap: wrap;
column-gap: .55em;
font-size: var(--t-klein);
}
.termin-jahr { font-weight: 600; }
.termin-zeit { font-weight: 900; white-space: nowrap; }
.termin-titel {
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-terminname);
line-height: 1.05;
color: var(--stimme);
margin: 0;
text-wrap: balance;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
overflow-wrap: break-word;
}
.termin-ort { font-size: var(--t-klein); margin: var(--s-2xs) 0 0; }
.termin-inhalt { position: relative; }
.termin:has(> .termin-aktion) { position: relative; }
.termin-aktion::after {
content: "";
position: absolute;
inset: 0;
}
.termin .termin-aktion:active {
transform: none;
margin: 1px -1px -1px 1px;
}
@media (max-width: 40rem) {
.termin { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; padding-inline: var(--s-s); }
.termin-aktion { grid-column: 2; justify-self: start; }
}
.umkreis {
--umkreis-schrift: var(--t-frage);
margin: 0 0 var(--s-s);
}
@media (max-width: 26rem) {
.umkreis { --umkreis-schrift: 17px; }
}
.umkreis-satz {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-xs) var(--s-s);
}
.umkreis-frage {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--umkreis-schrift);
line-height: 1.2;
color: var(--lesen);
padding: 0;
}
.umkreis-feld {
display: inline-flex;
align-items: stretch;
gap: 2px;
block-size: var(--bedien);
padding: 0 2px 0 0;
border: 2px solid var(--stimme-klein, var(--stimme));
border-radius: var(--r-kapsel);
}
.umkreis-feld:has(input:focus-visible) {
outline: 3px solid var(--lesen);
outline-offset: 0;
border-color: var(--lesen);
}
.umkreis-feld input {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--umkreis-schrift);
line-height: 1.2;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
color: var(--lesen);
background: transparent;
border: 0;
outline: none;
inline-size: 4.6ch;
padding: 0 0 0 .7em;
box-sizing: content-box;
}
.umkreis-feld input:placeholder-shown { inline-size: 3.2ch; }
.umkreis-feld input::placeholder {
color: var(--stimme-klein, var(--stimme));
opacity: 1;
letter-spacing: 0;
}
.umkreis-feld input[aria-invalid="true"] {
text-decoration: line-through;
text-decoration-thickness: 2px;
}
.umkreis-standort {
display: grid;
place-items: center;
inline-size: calc(var(--bedien) - 8px);
block-size: calc(var(--bedien) - 8px);
align-self: center;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.umkreis-standort { position: relative; }
.umkreis-standort::after {
content: "";
position: absolute;
inset-block: calc((var(--griff-zeile) - var(--bedien) + 8px) / -2);
inset-inline: 0 -7px;
}
.umkreis-standort:hover { background: var(--lesen); }
.umkreis-standort:focus-visible { outline: 3px solid var(--lesen); outline-offset: 2px; }
.umkreis-standort svg {
inline-size: 1.35rem;
block-size: 1.35rem;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
}
.umkreis-standort-kern { fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: no-preference) {
.umkreis-standort[aria-busy="true"] .umkreis-standort-kern {
animation: umkreis-suchen 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
transform-origin: 12px 12px;
}
}
@keyframes umkreis-suchen { to { transform: scale(.35); } }
.umkreis-stufen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2xs) var(--s-s);
min-inline-size: 0;
}
.umkreis-wahl {
display: inline-flex;
align-items: center;
gap: .35em;
white-space: nowrap;
}
.umkreis-schalter {
display: inline-flex;
gap: 2px;
block-size: var(--bedien);
padding: 2px;
border: 2px solid var(--stimme-klein, var(--stimme));
border-radius: var(--r-kapsel);
}
.umkreis-stufe {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-inline-size: 2.6ch;
padding: 0 .5em;
border-radius: var(--r-kapsel);
font-family: var(--lauf);
font-weight: 900;
font-size: var(--umkreis-schrift);
line-height: 1.2;
text-align: center;
font-variant-numeric: tabular-nums;
color: var(--stimme-klein, var(--stimme));
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.umkreis-stufe:hover { color: var(--lesen); }
.umkreis-stufe input {
position: absolute;
inset: -4px 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.umkreis-stufe:has(input:checked) {
background: var(--stimme-klein, var(--stimme));
color: var(--grund);
}
.umkreis-stufe:has(input:focus-visible) { outline: 3px solid var(--lesen); outline-offset: 0; }
.umkreis-meldung {
margin: var(--s-2xs) 0 0;
font-size: var(--t-klein);
font-weight: 700;
}
.umkreis-meldung:empty { display: none; }
.termin-bilanz-zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-xs) var(--s-m);
margin: 0 0 var(--s-s);
}
.termin-bilanz-zeile .termin-bilanz { margin: 0; }
.umkreis :is(.knopf, .knopf-voll),
.umkreis-werkzeug :is(.knopf, .knopf-voll) {
display: inline-flex;
align-items: center;
justify-content: center;
block-size: var(--bedien);
padding-block: 0;
}
.umkreis-werkzeug { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
.umkreis-weg[hidden] { display: none; }
.umkreis-karte-knopf { display: inline-flex; align-items: center; gap: .5em; }
.knopf-schweiz {
flex: none;
block-size: 1.6em;
inline-size: auto;
aspect-ratio: 748 / 491.3;
margin-block: -.3em;
margin-inline-start: -.15em;
overflow: visible;
}
.knopf-kegel { stroke-width: 26; }
.umkreis-hinweis {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-xs) var(--s-s);
margin: calc(-1 * var(--s-2xs)) 0 var(--s-s);
font-weight: 700;
max-width: none;
}
.umkreis-hinweis[hidden] { display: none; }
.umkreis-ohne {
margin: var(--s-s) 0 0;
font-size: var(--t-klein);
font-weight: 700;
}
.termin-weg {
margin: var(--s-2xs) 0 0;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--lesen);
}
.termin-weg::before {
content: "";
display: inline-block;
inline-size: .7em;
block-size: .7em;
margin-inline-end: .4em;
border: 2.5px solid var(--stimme-klein, var(--stimme));
border-radius: 50%;
vertical-align: -.02em;
}
.umkreis-karte {
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: var(--s-m);
border: 0;
overflow: hidden;
background: var(--grund);
color: var(--lesen);
clip-path: inset(0 0 0 0);
transition: clip-path 240ms cubic-bezier(0.16, 1, 0.3, 1),
display 240ms allow-discrete,
overlay 240ms allow-discrete;
}
.umkreis-karte:not(:popover-open) { clip-path: inset(100% 0 0 0); }
@starting-style {
.umkreis-karte:popover-open { clip-path: inset(100% 0 0 0); }
}
.umkreis-karte::backdrop { background: var(--schwarz); }
.umkreis-karte-offen { overflow: hidden; scrollbar-gutter: stable; }
.umkreis-karte[data-aus-knopf] {
clip-path: inset(0 0 0 0 round 0px);
transition: clip-path 640ms cubic-bezier(0.7, 0, 0.2, 1),
display 640ms allow-discrete,
overlay 640ms allow-discrete;
}
.umkreis-karte[data-aus-knopf]:not(:popover-open) {
clip-path: var(--blende-von);
transition: clip-path 440ms cubic-bezier(0.55, 0, 0.3, 1),
display 440ms allow-discrete,
overlay 440ms allow-discrete;
}
.umkreis-karte[data-fliegt] .karte-ort .karte-name { display: none; }
.umkreis-karte[data-aus-knopf]::backdrop { background: none; }
@starting-style {
.umkreis-karte[data-aus-knopf]:popover-open { clip-path: var(--blende-von); }
}
@media (prefers-reduced-motion: reduce) {
.umkreis-karte,
.umkreis-karte[data-aus-knopf],
.umkreis-karte[data-aus-knopf]:not(:popover-open) { transition: none; }
}
.umkreis-karte:popover-open { display: grid; }
.umkreis-karte {
grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
grid-template-rows: auto minmax(0, 1fr);
grid-template-areas:
"kopf   kopf"
"buehne tafel";
gap: var(--s-s) var(--s-l);
}
.karte-kopf {
grid-area: kopf;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-xs) var(--s-m);
}
.karte-titel { margin: 0; flex: 1 1 auto; font-size: var(--t-headline); }
.karte-stufen ul { margin: 0; }
.karte-zu {
display: grid;
place-items: center;
inline-size: 3rem;
block-size: 3rem;
padding: 0;
border: 2px solid var(--stimme);
border-radius: 50%;
background: transparent;
color: var(--stimme);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.karte-zu:hover { background: var(--stimme); color: var(--grund); }
.karte-zu:focus-visible { outline: 3px solid var(--lesen); outline-offset: 0; border-color: var(--lesen); }
.karte-zu svg {
inline-size: 1.3rem;
block-size: 1.3rem;
stroke: currentColor;
stroke-width: 2.8;
stroke-linecap: round;
}
.karte-buehne {
grid-area: buehne;
min-block-size: 0;
border-radius: var(--r-flaeche);
overflow: hidden;
background: var(--schwarz);
touch-action: manipulation;
}
.karte-bild { display: block; inline-size: 100%; block-size: 100%; }
.karte-bild [hidden] { display: none; }
#karte-nachbarn, #karte-land, #karte-seen {
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
}
.karte-dunkel .karte-grund    { fill: var(--schwarz); }
.karte-dunkel .karte-nachbarn { fill: var(--schwarz); stroke: var(--violett); stroke-width: 1.5px; }
.karte-dunkel .karte-land     { fill: var(--violett); stroke: var(--violett); stroke-width: 1px; }
.karte-dunkel .karte-seen     { fill: var(--schwarz); stroke: none; }
.karte-hell .karte-grund    { fill: var(--amber); }
.karte-hell .karte-nachbarn { fill: var(--amber); stroke: var(--schwarz); stroke-width: 1px; }
.karte-hell .karte-land     { fill: var(--gelb); stroke: var(--schwarz); stroke-width: 1.5px; }
.karte-hell .karte-seen     { fill: var(--tuerkis); stroke: none; }
.karte-kegelrand {
fill: none;
stroke: var(--gelb);
stroke-width: 2px;
vector-effect: non-scaling-stroke;
}
.karte-tastfeld { fill: transparent; }
.karte-ort { cursor: pointer; }
.karte-punkt {
fill: var(--schwarz);
stroke: var(--weiss);
stroke-width: 2px;
}
.karte-name {
display: none;
font-family: var(--lauf);
font-weight: 900;
font-size: 14px;
letter-spacing: .02em;
text-transform: uppercase;
text-anchor: middle;
fill: var(--weiss);
stroke: var(--schwarz);
stroke-width: 4px;
stroke-linejoin: round;
paint-order: stroke;
pointer-events: none;
}
.karte-ort:hover .karte-name,
.karte-ort[data-gewaehlt] .karte-name { display: inline; }
.karte-ort[data-hell] .karte-punkt { stroke: var(--schwarz); stroke-width: 2.5px; fill: var(--schwarz); }
.karte-ort[data-hell][data-ton-punkt="magenta"] .karte-punkt { fill: var(--magenta); }
.karte-ort[data-hell][data-ton-punkt="rot"]     .karte-punkt { fill: var(--rot); }
.karte-ort[data-hell][data-ton-punkt="blau"]    .karte-punkt { fill: var(--blau); }
.karte-ort[data-hell][data-ton-punkt="tuerkis"] .karte-punkt { fill: var(--tuerkis); }
.karte-ort[data-hell][data-ton-punkt="violett"] .karte-punkt { fill: var(--violett); }
.karte-ort[data-hell] .karte-name { display: inline; fill: var(--schwarz); stroke: var(--gelb); }
.karte-ort[data-still]:not([data-gewaehlt], :hover) .karte-name { display: none; }
.karte-ort[data-gewaehlt] .karte-punkt { stroke-width: 4.5px; }
.karte-ort[data-gewaehlt] .karte-name  { font-size: 17px; }
.karte-du-ring { fill: none; stroke: var(--vorhang); stroke-width: 3px; }
.karte-du-kern { fill: var(--vorhang); }
.karte-tafel {
grid-area: tafel;
min-block-size: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-color: var(--violett) var(--grund);
padding-inline: var(--s-s);
overflow-x: hidden;
}
.karte-bilanz { margin: 0 0 var(--s-s); font-weight: 700; }
.karte-bilanz b { font-size: var(--t-title); color: var(--stimme); font-variant-numeric: tabular-nums; }
.karte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.karte-liste ul { list-style: none; margin: 0; padding: 0; }
.karte-eintrag {
padding: var(--s-s) var(--s-s);
margin-inline: calc(-1 * var(--s-s));
border-radius: var(--r-feld);
transition: background var(--uebergang);
}
.karte-eintrag[data-gewaehlt] { background: var(--violett); }
.karte-ortsname {
display: flex;
align-items: baseline;
gap: .5em;
margin: 0 0 var(--s-2xs);
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
text-transform: uppercase;
color: var(--stimme);
}
.karte-km {
font-family: var(--lauf);
font-size: var(--t-klein);
color: var(--lesen);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.karte-liste a {
display: grid;
grid-template-columns: minmax(6.6em, max-content) minmax(0, 1fr);
gap: .6em;
padding-block: 3px;
color: var(--lesen);
font-weight: 700;
text-decoration: none;
}
.karte-liste a:hover span { text-decoration: underline dotted 2px; text-underline-offset: .18em; }
.karte-liste time {
font-weight: 900;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.karte-quelle {
margin: var(--s-m) 0 0;
font-size: var(--t-klein);
font-weight: 600;
}
@media (max-width: 48rem) {
.umkreis-karte { padding: var(--s-s); }
.umkreis-karte {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-areas: "kopf" "buehne" "tafel";
gap: var(--s-s);
}
.karte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.karte-titel { font-size: var(--t-title); }
.karte-stufen { grid-column: 1 / -1; grid-row: 2; }
.karte-zu { grid-column: 2; grid-row: 1; inline-size: 2.75rem; block-size: 2.75rem; }
.karte-buehne { border-radius: calc(var(--r-flaeche) / 2); }
}
.ausverkauft {
display: block;
width: fit-content;
margin: var(--s-xs) 0 0;
padding: .18em .75em .22em;
border-radius: var(--r-kapsel);
background: var(--karte, var(--lesen));
color: var(--karte-text, var(--grund));
box-shadow: 3px 3px 0 var(--karte-fehl, var(--stimme));
font: 900 var(--t-kapsel) / 1.15 var(--display);
text-transform: uppercase;
white-space: nowrap;
rotate: -4deg;
transform-origin: 0 50%;
}
.termin-ausverkauft {
margin-block: var(--s-xs) var(--s-2xs);
}
.ausverkauft-gross {
margin-block: var(--s-m) 0;
font-size: var(--t-terminname);
letter-spacing: -.02em;
box-shadow: 4px 4px 0 var(--karte-fehl, var(--stimme));
rotate: -3deg;
}
.billett-ausverkauft {
margin-block-start: var(--s-s);
background: var(--karte-text);
color: var(--karte);
}
@media (forced-colors: active) {
.ausverkauft { border: 2px solid CanvasText; }
}
.termin-plakat { display: none; }
.plakat-faden,
.termin-plakat img {
--plakat-schatten: var(--stimme);
}
.plakat-faden {
position: fixed;
top: 0;
left: 0;
z-index: 45;                 
width: clamp(12rem, 14vw + 4rem, 17rem);
aspect-ratio: 4 / 5;
pointer-events: none;
transform-origin: 50% 0;     
will-change: transform;
visibility: hidden;
}
.plakat-faden[data-offen],
.plakat-faden[data-geht] { visibility: visible; }
.plakat-blende {
position: absolute;
inset: 0;
clip-path: inset(-3rem);
}
.plakat-schatten,
.plakat-faden img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: var(--r-flaeche);
}
.plakat-schatten {
background: var(--plakat-schatten);
translate: var(--versatz-x, 6px) var(--versatz-y, 6px);
}
.plakat-faden img {
object-fit: cover;
background: var(--grund);
}
.plakat-faden[data-ausverkauft] .plakat-blende::after {
content: "Ausverkauft";
position: absolute;
left: 50%;
bottom: 12%;
translate: -50% 0;
rotate: -8deg;
padding: .18em .7em .22em;
border-radius: var(--r-kapsel);
background: var(--karte, var(--lesen));
color: var(--karte-text, var(--grund));
box-shadow: 3px 3px 0 var(--karte-fehl, var(--stimme));
font: 900 var(--t-kapsel) / 1.15 var(--display);
text-transform: uppercase;
white-space: nowrap;
}
html[data-plakate="zettel"] .termin[data-plakat] { position: relative; }
html[data-plakate="zettel"] .sektion:has(.termin[data-plakat]) { overflow-x: clip; }
html[data-plakate="zettel"] .termin > :not(.termin-plakat) { position: relative; z-index: 1; }
html[data-plakate="zettel"] .termin > .termin-aktion { position: static; }
html[data-plakate="zettel"] .termin-plakat {
display: block;
position: absolute;
z-index: 0;
top: 50%;
right: calc(50% - 50vw);
width: clamp(6.5rem, 24vw, 9rem);
aspect-ratio: 4 / 5;
pointer-events: none;
transform-origin: 100% 0;
translate: 160% -50%;
rotate: 24deg;
}
html[data-plakate="zettel"] .termin-plakat[data-klebt] {
translate: 26% -50%;
rotate: -8deg;
}
@media (max-width: 40rem) {
html[data-plakate="zettel"] .termin-plakat {
top: auto;
bottom: var(--s-s);
transform-origin: 100% 100%;
width: 5.5rem;
translate: 160% 0;
}
html[data-plakate="zettel"] .termin-plakat[data-klebt] { translate: 32% 0; }
html[data-plakate="zettel"] .termin[data-plakat] .termin-ort { padding-inline-end: 4rem; }
}
html[data-plakate="zettel"] .termin-plakat img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--r-feld);
background: var(--grund);
box-shadow: -5px 5px 0 var(--plakat-schatten);
}
@media (prefers-reduced-motion: no-preference) {
html[data-plakate="zettel"] .termin-plakat {
transition: translate 320ms cubic-bezier(0.4, 0, 1, 1),
rotate    320ms cubic-bezier(0.4, 0, 1, 1);
}
html[data-plakate="zettel"] .termin-plakat[data-klebt] {
transition: translate 560ms cubic-bezier(0.34, 1.56, 0.64, 1),
rotate    700ms cubic-bezier(0.34, 1.8, 0.64, 1);
}
}
@media (forced-colors: active) {
.plakat-faden,
html[data-plakate="zettel"] .termin-plakat { display: none; }
}
.karten {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
gap: var(--s-m);
list-style: none; margin: 0; padding: 0;
}
.karte {
display: flex;
flex-direction: column;
height: 100%;
background: var(--karte, var(--violett));
color: var(--karte-text, var(--gelb));
border-radius: var(--r-flaeche);
overflow: hidden;
text-decoration: none;
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.karte:hover, .karte:focus-visible {
transform: translate(-3px, -3px);
box-shadow: 3px 3px 0 var(--stimme-klein, var(--stimme));
}
.karte:active { transform: translate(0, 0); box-shadow: none; }
.karte img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
@media (max-width: 40rem) {
.karte img { aspect-ratio: 16 / 9; }
}
.karte-text {
--karte-einzug: max(var(--s-m), calc(0.7 * var(--r-flaeche)));
padding: var(--karte-einzug);
}
.karte :is(h2, h3) { color: inherit; font-family: var(--display); font-size: var(--t-title); margin-bottom: var(--s-2xs); }
.karte p    { margin: 0; }
.karte-label {
text-transform: uppercase;
font-size: var(--t-klein);
font-weight: 900;
margin: 0 0 var(--s-2xs);
}
.karte-text > span { display: block; }
.film-titel {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
text-transform: uppercase;
line-height: 1.05;
}
.film-buehne {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--schwarz);       
}
.film-standbild {
width: 100%;
height: 100%;
object-fit: cover;
}
.film-knopf {
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
display: grid;
place-items: center;
width: 66px;
height: 66px;
border: 2px solid var(--amber);
border-radius: var(--r-kapsel);
background: var(--amber);
color: var(--violett);
transition: background var(--uebergang), color var(--uebergang);
}
.film:hover .film-knopf,
.film:focus-visible .film-knopf { background: transparent; color: var(--amber); }
.film-knopf svg { margin-left: 3px; }
.karten-hoch { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.short .film-buehne { aspect-ratio: 9 / 16; }
.karte.short img { aspect-ratio: 9 / 16; }
.short .karte-text { --karte-einzug: max(var(--s-m), calc(0.5 * var(--r-flaeche))); }
.short .film-titel { font-size: 18px; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
.karten-hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-s, 0.75rem); }
.short .film-knopf { width: 52px; height: 52px; }
.karte.short { border-radius: calc(var(--r-flaeche) / 2); }
.short .karte-text { --karte-einzug: var(--s-m); }
.short .film-titel { font-size: var(--t-klein); }
}
.film-im-text { margin-block: var(--s-l); }
.kachel {
display: block;
border-radius: var(--r-flaeche);
overflow: hidden;
transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.kachel:hover, .kachel:focus-visible {
transform: translate(-3px, -3px);
box-shadow: 3px 3px 0 var(--stimme-klein, var(--stimme));
}
.kachel:active { transform: translate(0, 0); box-shadow: none; }
.kachel img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
@media (max-width: 40rem) {
.kachel img { aspect-ratio: 16 / 9; }
}
@property --rakel {
syntax: '<number>';
inherits: false;
initial-value: 0;
}
.druck, .druck-rakel { display: none; }
html[data-farbauszug] [data-druck] {
--schraeg: 22px;
--wulst: 7px;
position: relative;
}
html[data-farbauszug] [data-druck] > :is(.druck, .druck-rakel) {
display: block;
position: absolute;
pointer-events: none;
}
html[data-farbauszug] [data-druck] > .druck {
--kante: calc(var(--rakel) * (100% + var(--schraeg) + var(--wulst)) - var(--wulst));
inset: 0;
background: var(--karte, var(--violett));
clip-path: polygon(var(--kante) 0, 100% 0, 100% 100%, calc(var(--kante) - var(--schraeg)) 100%);
transition: --rakel 280ms cubic-bezier(0.55, 0, 0.8, 0.35);
}
.druck-platte {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.druck-platte[data-platte="fehl"] {
translate: 5px 4px;
transition: translate 90ms cubic-bezier(0.3, 0, 0.8, 0.15) 260ms;
}
html[data-farbauszug] [data-druck] > .druck-rakel {
inset-block: 0;
left: calc(var(--rakel) * (100% + var(--schraeg) + var(--wulst)) - var(--wulst) - var(--schraeg));
width: calc(var(--schraeg) + var(--wulst));
background: var(--karte-fehl, var(--tuerkis));
clip-path: polygon(var(--schraeg) 0, 100% 0, var(--wulst) 100%, 0 100%);
transition: --rakel 280ms cubic-bezier(0.55, 0, 0.8, 0.35);
}
html[data-farbauszug] a:is(:hover, :focus-visible, [data-durch]) :is(.druck, .druck-rakel) {
--rakel: 1;
transition: --rakel 560ms cubic-bezier(0.65, 0, 0.35, 1) 150ms;
}
html[data-farbauszug] a:is(:hover, :focus-visible, [data-durch]) .druck-platte[data-platte="fehl"] {
translate: 0 0;
transition: translate 320ms linear(0, 0.35 12%, 0.78 26%, 1.06 42%, 1.09 50%, 1.03 64%, 0.99 80%, 1);
}
html[data-farbauszug] a:has(.leuchtkasten-morph) :is(.druck, .druck-rakel) {
--rakel: 1;
transition: none;
}
html[data-farbauszug] .film-knopf { z-index: 1; }
.instagram-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-s) var(--s-m);
margin-block: var(--s-2xl) var(--s-m);
}
.instagram-kopf h2 { margin: 0; }
.beitrag, .beitrag .kachel { position: relative; }
.beitrag .kachel img { aspect-ratio: 4 / 5; }
.beitrag-datum {
display: block;
margin-top: var(--s-xs);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
color: var(--stimme-klein, var(--stimme));
}
.beitrag-nass {
position: absolute;
z-index: 2;
inset: var(--s-s) auto auto var(--s-s);
padding: 4px 12px;
border-radius: var(--r-kapsel);
background: var(--karte-fehl, var(--tuerkis));
color: var(--violett);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
rotate: -4deg;
pointer-events: none;
}
.beitrag-nass[hidden] { display: none; }
.leuchtkasten {
--grund:  var(--schwarz);
--stimme: var(--gelb);
--stimme-klein: var(--gelb);
--lesen:  var(--weiss);
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
margin: 0;
padding: var(--s-m);
border: 0;
overflow: hidden;
background: var(--grund);
color: var(--lesen);
clip-path: inset(0 0 0 0);
transition: clip-path 240ms cubic-bezier(0.16, 1, 0.3, 1),
display 240ms allow-discrete,
overlay 240ms allow-discrete;
}
.leuchtkasten:not([open]) { clip-path: inset(100% 0 0 0); }
@starting-style {
.leuchtkasten[open] { clip-path: inset(100% 0 0 0); }
}
.leuchtkasten[open] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr) auto;
grid-template-areas:
"buehne zettel"
"leiste leiste";
column-gap: var(--s-l);
row-gap: var(--s-s);
}
.leuchtkasten[open]:has(.leuchtkasten-zettel[hidden]) { column-gap: 0; }
.leuchtkasten::backdrop {
background: var(--schwarz);
clip-path: inset(0 0 0 0);
transition: clip-path 240ms cubic-bezier(0.16, 1, 0.3, 1),
display 240ms allow-discrete,
overlay 240ms allow-discrete;
}
.leuchtkasten:not([open])::backdrop { clip-path: inset(100% 0 0 0); }
@starting-style {
.leuchtkasten[open]::backdrop { clip-path: inset(100% 0 0 0); }
}
.leuchtkasten-offen { overflow: hidden; }
.leuchtkasten-buehne {
grid-area: buehne;
position: relative;
display: flex;
min-width: 0;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.leuchtkasten-buehne::-webkit-scrollbar { display: none; }
.leuchtkasten-blatt {
flex: 0 0 100%;
min-width: 0;
margin: 0;
display: grid;
place-items: center;
scroll-snap-align: center;
scroll-snap-stop: always;
container-type: size;
}
.leuchtkasten-bild {
max-width: 100%;
max-height: 100cqh;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r-flaeche);
}
.leuchtkasten-film {
position: relative;
width: min(100%, calc(100cqh * 16 / 9));
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--r-flaeche);
background: var(--schwarz);
}
.leuchtkasten-standbild,
.leuchtkasten-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.leuchtkasten-standbild { object-fit: cover; }
.leuchtkasten-film.leuchtkasten-hoch {
width: min(100%, calc(100cqh * 9 / 16));
aspect-ratio: 9 / 16;
}
video.leuchtkasten-video { object-fit: contain; background: var(--schwarz); }
.leuchtkasten-zettel {
grid-area: zettel;
align-self: center;
width: min(19rem, 28vw);
max-height: 100%;
overflow-y: auto;
margin: 0;
clip-path: inset(0);
transition: clip-path 240ms cubic-bezier(0.16, 1, 0.3, 1),
display 240ms allow-discrete;
}
.leuchtkasten-zettel[hidden] { display: none; clip-path: inset(0 0 0 100%); }
@starting-style {
.leuchtkasten-zettel:not([hidden]) { clip-path: inset(0 0 0 100%); }
}
.leuchtkasten-zettel > * { margin: 0; }
.leuchtkasten-zettel > * + * { margin-block-start: var(--s-s); }
.leuchtkasten-titel {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
text-transform: uppercase;
color: var(--stimme);
hyphens: auto;
overflow-wrap: break-word;
}
.leuchtkasten-text {
max-width: 65ch;
font-weight: 600;
font-size: var(--t-body);
line-height: 1.5;
letter-spacing: 0.1px;
}
.leuchtkasten-quelle {
font-weight: 900;
font-size: var(--t-klein);
line-height: 1.5;
text-transform: uppercase;
letter-spacing: .06em;
}
.leuchtkasten-leiste {
grid-area: leiste;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-m);
min-width: 0;
}
.leuchtkasten-zaehler {
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--stimme-klein);
}
.leuchtkasten-pfeil {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 2px solid var(--amber);
border-radius: var(--r-kapsel);
background: var(--amber);
color: var(--violett);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.leuchtkasten-pfeil:hover { background: transparent; color: var(--amber); }
.leuchtkasten-pfeil:active { transform: translate(1px, 1px); }
.leuchtkasten-pfeil[aria-pressed="true"],
.leuchtkasten-pfeil[aria-expanded="true"] {
background: var(--violett);
color: var(--amber);
}
.leuchtkasten-werkzeug {
position: absolute;
inset: var(--s-m) var(--s-m) auto auto;
display: flex;
gap: var(--s-2xs);
}
.leuchtkasten-blaetter {
display: flex;
gap: var(--s-2xs);
margin-inline-start: auto;
}
.leuchtkasten[data-vollbild] { padding: 0; }
.leuchtkasten[data-vollbild][open] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
grid-template-areas: "buehne";
gap: 0;
}
.leuchtkasten[data-vollbild] .leuchtkasten-leiste { display: none; }
.leuchtkasten[data-vollbild] .leuchtkasten-zettel { display: none; clip-path: inset(0 0 0 100%); }
.leuchtkasten[data-vollbild] :is(.leuchtkasten-bild, .leuchtkasten-film) { border-radius: 0; }
html[data-leuchtkasten-wechsel] body * { view-transition-name: none; }
html[data-leuchtkasten-wechsel] .leuchtkasten-morph { view-transition-name: leuchtkasten-bild; }
html[data-leuchtkasten-wechsel] .leuchtkasten,
html[data-leuchtkasten-wechsel] .leuchtkasten::backdrop { transition: none; }
html[data-leuchtkasten-wechsel="auf"]::view-transition-old(root) { animation: none; }
html[data-leuchtkasten-wechsel="auf"]::view-transition-new(root) {
animation: 240ms cubic-bezier(0.16, 1, 0.3, 1) both blende-auf;
}
html[data-leuchtkasten-wechsel="zu"]::view-transition-new(root) { animation: none; }
html[data-leuchtkasten-wechsel="zu"]::view-transition-old(root) {
z-index: 1;
animation: 240ms cubic-bezier(0.4, 0, 1, 1) both blende-zu;
}
@keyframes blende-auf {
from { clip-path: inset(100% 0 0 0) }
to   { clip-path: inset(0) }
}
@keyframes blende-zu {
from { clip-path: inset(0) }
to   { clip-path: inset(100% 0 0 0) }
}
html[data-leuchtkasten-wechsel]::view-transition-group(leuchtkasten-bild) {
animation-duration: 240ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-leuchtkasten-wechsel]::view-transition-image-pair(leuchtkasten-bild) {
border-radius: var(--r-flaeche);
overflow: clip;
}
html[data-leuchtkasten-wechsel]::view-transition-old(leuchtkasten-bild),
html[data-leuchtkasten-wechsel]::view-transition-new(leuchtkasten-bild) {
width: 100%;
height: 100%;
object-fit: cover;
overflow: clip;
animation: none;
mix-blend-mode: normal;
}
html[data-leuchtkasten-wechsel="auf"]::view-transition-old(leuchtkasten-bild),
html[data-leuchtkasten-wechsel="zu"]::view-transition-new(leuchtkasten-bild) {
display: none;
}
@media (max-width: 40rem) {
.leuchtkasten[open] {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto auto;
grid-template-areas:
"buehne"
"zettel"
"leiste";
column-gap: 0;
}
.leuchtkasten-zettel {
align-self: end;
width: 100%;
max-height: 34svh;
}
.leuchtkasten-zettel { translate: 0 calc(-1 * var(--bild-luft, 0px)); }
.leuchtkasten-zettel[hidden] { clip-path: inset(100% 0 0 0); }
@starting-style {
.leuchtkasten-zettel:not([hidden]) { clip-path: inset(100% 0 0 0); }
}
}
.preis {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
font-variant-numeric: tabular-nums;
margin: var(--s-s) 0 0;
}
.anfrage { display: grid; gap: var(--s-l); align-items: start; }
.anfrage-felder   { display: grid; gap: var(--s-m); max-width: 42rem; }
.anfrage-absenden { display: grid; gap: var(--s-s); justify-items: start; }
@media (min-width: 62rem) {
.anfrage {
grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.6fr);
column-gap: var(--s-xl);
}
.anfrage-felder   { grid-column: 1; grid-row: 1; }
.anfrage-absenden { grid-column: 1; grid-row: 2; }
.zettel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--kopf-h) + var(--s-m)); }
}
.anfrage-pitch > :last-child { margin-block-end: 0; }
.anfrage-pitch + .anfrage { margin-block-start: var(--s-l); }
.anfrage-mehr { margin-block-start: var(--s-2xl); }
.anfrage-mehr .notizen { margin-block-start: 0; }
.anfrage-mehr .belege { margin-block-end: 0; }
.notizen {
display: grid;
gap: var(--s-m);
margin-block: var(--s-l) var(--s-xl);
padding: 0;
}
.notiz {
background: var(--karte, var(--violett));
color: var(--weiss);
border-radius: var(--r-feld);
padding: var(--s-m);
font-size: var(--t-body);
line-height: 1.5;
rotate: var(--neigung, -0.8deg);
}
.notiz p { margin: 0; max-width: none; }
.notiz p + p { margin-block-start: var(--s-xs); }
.notiz:nth-child(4n + 2) { --neigung: 1.1deg; }
.notiz:nth-child(4n + 3) { --neigung: -0.4deg; }
.notiz:nth-child(4n + 4) { --neigung: 0.9deg; }
.notizen:focus-visible { outline: 3px solid var(--stimme); outline-offset: 6px; border-radius: var(--r-feld); }
@media (max-width: 39.99rem) {
.notizen {
grid-auto-flow: column;
grid-auto-columns: 82%;
align-items: start;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--s-m);
margin-inline: calc(-1 * var(--s-m));
padding: var(--s-s) var(--s-m);
scrollbar-width: none;
}
.notizen::-webkit-scrollbar { display: none; }
.notiz { scroll-snap-align: start; }
}
@media (min-width: 40rem) {
.notizen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 62rem) {
.notizen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--s-m); }
.notiz:nth-child(even) { margin-block-start: var(--s-l); }
}
.belege {
display: grid;
gap: var(--s-m);
justify-items: start;
margin-block: 0 var(--s-xl);
}
.belege-liste {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: var(--s-s) var(--s-l);
inline-size: 100%;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-label);
line-height: 1.3;
color: var(--lesen);
text-wrap: balance;
}
.belege-jahr {
display: block;
font-family: var(--display);
font-size: var(--t-title);
line-height: 1.1;
color: var(--stimme);
font-variant-numeric: tabular-nums;
}
.anfrage-zeile { display: grid; gap: var(--s-m); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.anfrage-feld { display: grid; gap: var(--s-xs); min-inline-size: 0; }
.anfrage label {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-frage);
line-height: 1.2;
color: var(--lesen);
text-wrap: balance;
}
.anfrage-optional {
font-size: var(--t-klein);
font-weight: 700;
color: var(--stimme-klein, var(--stimme));
margin-inline-start: .45em;
white-space: nowrap;
}
.anfrage input, .anfrage textarea {
font: inherit;
font-size: 19px;
inline-size: 100%;
min-inline-size: 0;
color: var(--lesen);
background: transparent;
border: 2px solid var(--stimme-klein, var(--stimme));
border-radius: var(--r-feld);
padding: .55em .8em;
}
.anfrage textarea {
resize: vertical;
min-block-size: calc(6lh + 1.1em);
field-sizing: content;
max-block-size: 70vh;
}
.anfrage input::placeholder, .anfrage textarea::placeholder {
color: var(--stimme-klein, var(--stimme));
opacity: 1;
font-weight: 600;
}
.anfrage button { font-size: var(--t-title); }
.anfrage button[aria-disabled="true"] { pointer-events: none; }
.anfrage-hinweis { margin: 0; font-size: var(--t-klein); font-weight: 700; }
.anfrage-fehler {
border: 2px solid var(--stimme-klein, var(--stimme));
border-radius: var(--r-feld);
padding: var(--s-s);
margin: 0;
font-weight: 900;
}
.anfrage-fehler:focus-visible { outline: 3px solid currentColor; }
.anfrage-fehler p  { margin: 0 0 var(--s-2xs); }
.anfrage-fehler ul { margin: 0; padding-left: 1.2em; font-weight: 700; }
.anfrage-fehler li + li { margin-top: var(--s-2xs); }
.anfrage-danke:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
.anfrage-danke {
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-headline);
line-height: 1.1;
letter-spacing: -0.02em;
text-wrap: balance;
color: var(--stimme);
margin: 0;
}
@keyframes rakel-ein {
from { clip-path: inset(-0.2em 100% -0.2em 0); }
to   { clip-path: inset(-0.2em 0 -0.2em 0); }
}
@media (prefers-reduced-motion: no-preference) {
.anfrage-danke { animation: rakel-ein 560ms cubic-bezier(0.65, 0, 0.35, 1) 120ms backwards; }
}
.anfrage-alternative { font-size: var(--t-klein); margin: 0; }
.anfrage-honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zettel {
margin: 0;
--versatz-farbe: var(--rot);
}
.zettel-blatt {
background: var(--karte, var(--violett));
color: var(--karte-text, var(--gelb));
border-radius: var(--r-flaeche);
padding: var(--s-l) var(--s-m);
rotate: -1.4deg;
}
.zettel-blatt :is(p, ul, li) { margin: 0; }
.zettel-blatt > *        { padding-block: var(--s-m); }
.zettel-blatt > :first-child { padding-block-start: 0; }
.zettel-blatt > :last-child  { padding-block-end: 0; }
.zettel-name {
display: block;
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
text-transform: uppercase;
text-shadow: 2px 2px 0 var(--versatz-farbe);
}
.zettel-rollen {
display: block;
margin-block-start: var(--s-xs);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .06em;
}
.zettel-anlass {
font-family: var(--display);
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
font-size: var(--t-terminname);
hyphens: auto;
overflow-wrap: anywhere;
}
.zettel-anlass[data-stufe="gross"] { font-size: var(--t-headline); }
.zettel-anlass[data-stufe="klein"] { font-size: var(--t-title); }
.zettel-paar { display: grid; gap: var(--s-2xs); }
.zettel-angabe {
font-weight: 900;
font-size: var(--t-title);
line-height: 1.15;
}
.zettel-paar .zettel-angabe:last-child { font-weight: 600; }
.zettel-vorspann {
display: block;
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .06em;
margin-block-end: var(--s-2xs);
}
.zettel-fuss {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--s-s) var(--s-m);
}
.zettel-stempel {
flex: none;
display: grid;
justify-items: center;
padding: .3em .7em .35em;
border: 3px solid var(--karte-fehl, var(--tuerkis));
border-radius: var(--r-feld);
color: var(--karte-fehl, var(--tuerkis));
font-weight: 900;
font-size: var(--t-klein);
line-height: 1.15;
text-transform: uppercase;
letter-spacing: .08em;
rotate: -7deg;
}
.zettel-stempel time {
font-size: 19px;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
@keyframes stempel {
0%   { visibility: hidden; }
1%   { visibility: visible; scale: 2.4; rotate: 8deg; }
62%  { scale: .92; rotate: -9deg; }
100% { scale: 1;   rotate: -7deg; }
}
@media (prefers-reduced-motion: no-preference) {
.zettel[data-gedruckt] .zettel-stempel {
animation: stempel 380ms cubic-bezier(0.5, 0, 0.75, 0) 720ms backwards;
}
}
.zettel-absender {
display: block;
font-weight: 900;
font-size: var(--t-title);
line-height: 1.15;
}
.zettel-blind {
display: inline-block;
width: min(7ch, 62%);
height: .34em;
background: currentColor;
vertical-align: .06em;
}
.zettel-satz   { display: inline; }
.zettel-wort   { display: inline-block; }
.zettel-zeichen { display: inline-block; }
.zettel-zeichen[data-neu] {
animation: letter-fall 520ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
animation-delay: calc(var(--i, 0) * 34ms);
}
@keyframes zettel-andruck {
from { translate: -8px -8px; box-shadow: 14px 14px 0 var(--schwarz); }
to   { translate: 0 0;       box-shadow: 3px 3px 0 var(--schwarz); }
}
.zettel[data-andruck] .zettel-blatt {
animation: zettel-andruck 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.zettel[data-gedruckt] .zettel-blatt {
box-shadow: 3px 3px 0 var(--schwarz);
animation: zettel-andruck 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.zettel[data-gedruckt] .zettel-name {
animation: andruck-signet 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
html[data-anfrage-druck] body * { view-transition-name: none; }
html[data-anfrage-druck] #anfrage .zettel-blatt { view-transition-name: zettel-platte; }
html:active-view-transition-type(anfrage)::view-transition-image-pair(root) { isolation: auto; }
html:active-view-transition-type(anfrage)::view-transition-old(root) {
z-index: 1;
mix-blend-mode: normal;
animation: 520ms cubic-bezier(0.65, 0, 0.35, 1) both anfrage-blende;
}
html:active-view-transition-type(anfrage)::view-transition-new(root) {
mix-blend-mode: normal;
animation: none;
}
@keyframes anfrage-blende {
from { clip-path: inset(0 0 0 0); }
to   { clip-path: inset(0 0 100% 0); }
}
html:active-view-transition-type(anfrage)::view-transition-group(zettel-platte) {
z-index: 2;
animation-duration: 720ms;
animation-timing-function: cubic-bezier(0.34, 1.32, 0.64, 1);
}
html:active-view-transition-type(anfrage)::view-transition-old(zettel-platte) { display: none; }
html:active-view-transition-type(anfrage)::view-transition-new(zettel-platte) { animation: none; }
.kopf {
position: sticky;
top: 0;
z-index: 10;
padding-block: var(--s-s);
background: var(--grund);
}
.kopf-innen { display: grid; align-items: start; }
[data-kopf-schwebt] .kopf {
position: fixed;
inset: 0 0 auto;
background: transparent;
transition: background var(--uebergang);
}
[data-kopf-schwebt] main > :first-child {
padding-block-start: calc(var(--kopf-h) + var(--s-m));
}
[data-kopf-schwebt] main > .hero-sektion:first-child { padding-block-start: 0; }
[data-kopf-schwebt]:has(main > .hero-sektion:first-child) .kopf .kopf-innen {
transition: translate 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-kopf-schwebt]:has(main > .hero-sektion:first-child) .kopf:not([data-kompakt]) .kopf-innen {
translate: 0 var(--s-m);
}
@media (max-width: 40rem) {
[data-kopf-schwebt]:has(main > .hero-sektion:first-child) .kopf:not([data-kompakt]) .kopf-innen {
translate: var(--s-xs) var(--s-xs);
}
}
@media (max-width: 52rem) {
.kopf:not([data-kompakt]) .kopf-innen { padding-block-start: calc(var(--griff-zeile) + var(--s-xs)); }
}
.kopf[data-kompakt] .kopf-innen { min-height: var(--griff-zeile); align-items: center; }
[data-kopf-schwebt] main > .roehre:first-child { padding-block-start: 0; }
[data-kopf-schwebt] main > .roehre:first-child .roehre-buehne {
padding-block-start: calc(var(--kopf-h) + var(--s-m));
}
[data-kopf-schwebt] .kopf[data-kompakt] { background: var(--grund); }
@media (max-width: 52rem) {
:root {
--kopf-h: calc(2 * var(--s-s) + 2 * 1.05 * var(--t-display) + 3.4 * 1.5 * var(--t-label));
}
}
.signet {
min-width: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: var(--s-s);
}
.signet-name { grid-area: 1 / 1; }
.signet-name {
font-family: var(--display);
font-weight: 900;
font-size: var(--signet-groesse, var(--t-display));
text-transform: uppercase;
line-height: 0.95;
margin: 0;
color: var(--gelb);
--versatz-farbe: var(--vorhang);
text-shadow: 2px 2px 0 var(--versatz-farbe);
transition: font-size 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kopf[data-ton="gelb"] .signet-name {
color: var(--violett);
--versatz-farbe: var(--rot);
}
[data-kopf-schwebt] .kopf[data-ton="gelb"][data-ueber-bild]:not([data-kompakt]) .signet-name {
color: var(--gelb);
--versatz-farbe: var(--vorhang);
}
.kopf[data-ton="gelb"] .signet-rollen {
color: var(--violett);
text-shadow: none;
}
[data-kopf-schwebt] .kopf[data-ton="gelb"][data-ueber-bild]:not([data-kompakt]) .signet-rollen {
color: var(--weiss);
text-shadow: 1.5px 1.5px 0 var(--schwarz);
}
.kopf[data-ton="gelb"][data-kompakt] .signet-name,
.kopf[data-ton="gelb"][data-kompakt] .signet-rollen {
color: var(--violett);
text-shadow: none;
}
.signet-heim { text-decoration: none; color: inherit; }
.signet-satz { display: inline; }
.signet-wort { white-space: nowrap; }
.signet-zeichen { display: inline-block; }
.signet-huelse { grid-area: 2 / 1 / auto / -1; min-width: 0; }
.kopf[data-kompakt] .signet-huelse { grid-area: 1 / 2; }
.kopf[data-kompakt] { --signet-groesse: var(--t-title); }
@media (max-width: 52rem) {
.kopf[data-kompakt] {
--signet-groesse: clamp(
var(--t-klein),
(100vw - 3 * var(--s-m) - var(--griff-b, 8.5rem)) / 8.52,
var(--t-title)
);
}
}
@keyframes kopf-andruck {
from { clip-path: inset(0 100% 0 0); }
to   { clip-path: inset(0 0 0 0); }
}
.signet-huelse[data-druck] .signet-rollen {
animation: kopf-andruck 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kopf[data-kompakt] .signet-name {
color: var(--stimme-klein, var(--stimme));
text-shadow: none;
animation: none;
}
.signet-rollen {
margin: var(--s-2xs) 0 0;
color: var(--weiss);
text-shadow: 1.5px 1.5px 0 var(--schwarz);
transition: font-size 320ms cubic-bezier(0.16, 1, 0.3, 1),
margin 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kopf[data-kompakt] .signet-rollen {
display: flex;
flex-wrap: wrap;
column-gap: var(--s-xs);
row-gap: 0;
margin: 0;
font-size: var(--t-label);
color: var(--stimme-klein, var(--stimme));
text-shadow: none;
}
@media (max-width: 52rem) {
.kopf[data-kompakt] .signet-rollen { font-size: var(--t-klein); line-height: 1.15; }
}
@media (max-width: 52rem) {
.kopf[data-kompakt] .signet-huelse { display: none; }
}
.vorhang-griff {
position: fixed;
z-index: 60;
right: var(--s-m);
top: calc(var(--s-s) + env(safe-area-inset-top, 0px));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: var(--griff-zeile);
height: var(--griff-zeile);
padding-inline: 14px;
list-style: none;
cursor: pointer;
background: var(--vorhang);
color: var(--gelb);
border: 2px solid var(--gelb);
border-radius: var(--r-kapsel);
box-shadow: 3px 3px 0 var(--schwarz);
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-klein);
letter-spacing: .02em;
line-height: 1;
transition: top 320ms cubic-bezier(0.16, 1, 0.3, 1),
padding 320ms cubic-bezier(0.16, 1, 0.3, 1),
gap 320ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 200ms 120ms linear,
color 200ms 120ms linear;
}
:root { --griff-zeile: 44px; }
@media (min-width: 52.0625rem) {
[data-kopf-schwebt]:has(.kopf:not([data-kompakt])) .vorhang:not([data-auf]) .vorhang-griff {
top: calc(var(--s-s) + 0.475 * var(--t-display) - var(--griff-zeile) / 2);
}
[data-kopf-schwebt]:has(main > .hero-sektion:first-child):has(.kopf:not([data-kompakt])) .vorhang:not([data-auf]) .vorhang-griff {
top: calc(var(--s-s) + var(--s-m) + 0.475 * var(--t-display) - var(--griff-zeile) / 2);
}
}
.vorhang-griff::-webkit-details-marker { display: none; }
.vorhang-griff::marker { content: ""; }
.vorhang-griff:active { transform: translate(1px, 1px); }
.tafel { display: inline-flex; justify-content: center; min-width: 5.4em; letter-spacing: 0; }
.blatt { display: inline-block; text-align: center; }
.vorhang-zeichen { flex: 0 0 auto; }
.vorhang-kreuz { display: none; }
.vorhang[open] .vorhang-zieh { display: none; }
.vorhang[open] .vorhang-kreuz { display: block; }
html:not([data-vorhang-skript]) .vorhang[open] .vorhang-griff,
.vorhang[data-auf] .vorhang-griff {
background: var(--gelb);
color: var(--vorhang);
padding-inline: 0;
gap: 0;
}
html:not([data-vorhang-skript]) .vorhang[open] .tafel { display: none; }
html[data-vorhang-skript] .tafel {
max-width: var(--tafel-b, none);
overflow: hidden;
transition: max-width 300ms 60ms cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-vorhang-skript] .blatt {
transition: rotate 180ms calc(110ms + var(--n, 0) * 20ms) cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-vorhang-skript] .vorhang[data-auf] .tafel {
max-width: 0;
min-width: 0;
transition: max-width 320ms 90ms cubic-bezier(0.65, 0, 0.35, 1);
}
html[data-vorhang-skript] .vorhang[data-auf] .blatt {
rotate: x 90deg;
transition: rotate 140ms calc(var(--n, 0) * 18ms) cubic-bezier(0.5, 0, 0.75, 0);
}
html[data-vorhang-skript] .vorhang[data-auf] .vorhang-griff {
transition: top 320ms cubic-bezier(0.16, 1, 0.3, 1),
padding 320ms 90ms cubic-bezier(0.65, 0, 0.35, 1),
gap 320ms 90ms cubic-bezier(0.65, 0, 0.35, 1),
background-color 0s 380ms,
color 0s 380ms;
}
html[data-vorhang-skript] .vorhang:not([data-auf]) .vorhang-griff {
transition: top 320ms cubic-bezier(0.16, 1, 0.3, 1),
padding 300ms 60ms cubic-bezier(0.16, 1, 0.3, 1),
gap 300ms 60ms cubic-bezier(0.16, 1, 0.3, 1),
background-color 0s,
color 0s;
}
@supports (d: path("M0 0")) {
html[data-vorhang-skript] .vorhang[open] .vorhang-zieh { display: block; }
html[data-vorhang-skript] .vorhang[open] .vorhang-kreuz { display: none; }
html[data-vorhang-skript] .vorhang-zieh path {
transition: d 300ms 60ms cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-vorhang-skript] .vorhang[data-auf] .vorhang-zieh path {
transition: d 340ms 120ms cubic-bezier(0.65, 0, 0.35, 1);
}
html[data-vorhang-skript] .vorhang[data-auf] .zeichen-a { d: path("M6 6L12 12L18 18"); }
html[data-vorhang-skript] .vorhang[data-auf] .zeichen-b { d: path("M6 18L12 12L18 6"); }
}
@media (min-width: 52.0625rem) {
.vorhang-griff { right: max(var(--s-m), (100vw - var(--breite)) / 2); }
}
[data-anschnitt] { text-indent: calc(-1 * var(--anschnitt, 0.055em)); }
[data-anschnitt="U"]                                             { --anschnitt: 0.049em; }
[data-anschnitt="C"], [data-anschnitt="G"],
[data-anschnitt="O"], [data-anschnitt="Q"], [data-anschnitt="Z"] { --anschnitt: 0.048em; }
[data-anschnitt="W"]                                             { --anschnitt: 0.036em; }
[data-anschnitt="S"]                                             { --anschnitt: 0.030em; }
[data-anschnitt="V"]                                             { --anschnitt: 0.027em; }
[data-anschnitt="T"]                                             { --anschnitt: 0.017em; }
[data-anschnitt="A"], [data-anschnitt="X"]                        { --anschnitt: 0.012em; }
[data-anschnitt="J"]                                             { --anschnitt: 0.010em; }
[data-anschnitt="Y"]                                             { --anschnitt: 0.003em; }
.vorhang-tuch {
position: fixed;
inset: 0;
z-index: 50;
background: var(--vorhang);
display: grid;
grid-template-rows: auto 1fr;
grid-template-areas: "marke" "ziele";
overflow-y: auto;
overscroll-behavior: contain;
padding-block: calc(var(--s-s) + env(safe-area-inset-top, 0px)) var(--s-xl);
}
.vorhang-marke {
margin-block: 0;
max-width: none;
align-self: start;
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-title);
line-height: 0.95;
color: var(--gelb);
}
.vorhang-marke {
grid-area: marke;
display: flex;
align-items: center;
min-height: var(--griff-zeile);
}
.vorhang-navi { grid-area: ziele; align-self: center; }
@media (max-width: 52rem) {
.vorhang-navi { align-self: end; }
}
.vorhang-spruch {
grid-area: ziele;
align-self: end;
display: flex;
justify-content: flex-end;
pointer-events: none;
}
.vorhang-spruch > * { pointer-events: auto; }
@media (max-width: 72rem) {
.vorhang-tuch {
grid-template-rows: auto auto 1fr;
grid-template-areas: "marke" "spruch" "ziele";
}
.vorhang-spruch {
grid-area: spruch;
align-self: start;
justify-content: flex-start;
margin-block-start: var(--s-l);
}
}
@media (max-height: 32rem) {
.vorhang-spruch { display: none; }
}
html[data-vorhang-skript] .vorhang-tuch {
transform: translateY(calc(-100% - 7rem));
box-shadow: 0 -7rem 0 0 var(--vorhang), 0 6px 0 0 var(--gelb);
}
@starting-style {
html[data-vorhang-skript] .vorhang[open] .vorhang-tuch { transform: translateY(calc(-100% - 7rem)); }
}
html[data-vorhang-skript] .vorhang[open] .vorhang-tuch {
transition: transform 380ms cubic-bezier(0.55, 0, 0.75, 0.1);
}
html[data-vorhang-skript] .vorhang[open][data-auf] .vorhang-tuch {
transform: none;
transition: transform 640ms linear(0, 0.012, 0.028, 0.048, 0.072, 0.1, 0.132, 0.168, 0.208, 0.252, 0.3, 0.352, 0.408, 0.468, 0.532, 0.6, 0.672, 0.748, 0.828, 0.912, 1, 1.0199, 1.0294, 1.0304, 1.0256, 1.0178, 1.0095, 1.0024, 1);
}
html[data-vorhang-skript] .vorhang[data-auf] .vorhang-navi > ul > li {
animation: vorhang-nachhall 560ms cubic-bezier(0.3, 0, 0.3, 1) both;
animation-delay: calc(300ms + var(--i, 0) * 45ms);
transform-origin: 0 0;
}
@keyframes vorhang-nachhall {
0%   { translate: 0 0;     rotate: 0deg; }
28%  { translate: 0 0.16em; rotate: var(--kippen, 1.2deg); }
58%  { translate: 0 -0.04em; rotate: calc(var(--kippen, 1.2deg) * -0.4); }
100% { translate: 0 0;     rotate: 0deg; }
}
.vorhang-navi > ul > li:nth-child(even) { --kippen: -1.2deg; }
html[data-vorhang-auf] { overflow: hidden; }
.vorhang-navi ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--s-2xs);
}
.vorhang-navi a {
display: block;
color: var(--gelb);
text-decoration: none;
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: min(clamp(2.4rem, 8vw, 5.2rem), 9vh);
letter-spacing: -0.02em;
line-height: 1;
width: fit-content;
transition: transform var(--uebergang);
}
.vorhang-navi a[aria-current="page"] { color: var(--weiss); }
.vorhang-navi a:is(:hover, :focus-visible) { transform: translate(-3px, -3px); }
.vorhang-navi a:is(:hover, :focus-visible) span { text-shadow: 2px 2px 0 var(--schwarz); }
.vorhang-navi a:active { transform: translate(0, 0); }
.vorhang-navi a:active span { text-shadow: none; }
.vorhang-unter {
margin-block-start: var(--s-2xs);
padding-inline-start: 0.55em;
}
.vorhang-navi .vorhang-unter a {
font-size: min(clamp(1.25rem, 3vw, 2rem), 4.5vh);
letter-spacing: 0;
}
.vorhang-unter a span::before {
content: "↳ " / "";
font-family: var(--lauf);
}
.fuss { padding-block: var(--s-l); }
.fuss-sozial {
display: flex; flex-wrap: wrap;
gap: var(--s-2xs);
list-style: none; padding: 0;
margin: 0 0 var(--s-s) -11px;
}
.sozial-knopf {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--r-kapsel);
color: var(--stimme);
transition: background var(--uebergang), color var(--uebergang);
}
.sozial-knopf:hover,
.sozial-knopf:focus-visible {
background: var(--stimme);
color: var(--grund);
}
.sozial-knopf:active { transform: translate(1px, 1px); }
.fuss-presse { margin: 0 0 var(--s-m); }
.fuss-presse-titel {
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-label);
color: var(--stimme);
margin: 0 0 var(--s-xs);
}
.fuss-presse-knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--s-xs);
margin: 0;
}
.knopf-laden {
display: inline-flex;
align-items: center;
gap: var(--s-2xs);
}
.knopf-laden svg { flex: none; }
.knopf-zusatz {
font-weight: 400;
text-transform: none;
font-size: .82em;
white-space: nowrap;
opacity: .8;
}
.fuss-meta { margin: 0; }
.billett {
--kerbe: 13px;
--billett-r: var(--r-flaeche);
--abriss-b: 9.5rem;
position: relative;
display: grid;
grid-template-columns: var(--abriss-b) minmax(0, 1fr);
grid-template-areas: "abriss blatt";
max-width: 50rem;
margin: var(--s-s) 0 var(--s-xl);
color: var(--karte-text, var(--violett));
filter: drop-shadow(6px 6px 0 var(--rot));
rotate: 1deg;
}
.billett-blatt,
.billett-abriss {
background: var(--karte, var(--gelb));
margin: 0;
}
.billett-blatt {
grid-area: blatt;
margin-inline-start: -1px;
overflow-wrap: anywhere;
padding: var(--s-l) var(--s-l) var(--s-l) var(--s-m);
border-radius: 0 var(--billett-r) var(--billett-r) 0;
-webkit-mask: var(--kerben-blatt);
mask: var(--kerben-blatt);
--kerben-blatt:
radial-gradient(circle at 0 0,    #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) top    / 100% 51% no-repeat,
radial-gradient(circle at 0 100%, #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) bottom / 100% 51% no-repeat;
}
.billett-abriss {
grid-area: abriss;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--s-m) var(--s-2xs);
border-radius: var(--billett-r) 0 0 var(--billett-r);
text-align: center;
container-type: inline-size;
--punkt-farbe: var(--karte-text, var(--violett));
--punkt: radial-gradient(circle at center,
var(--punkt-farbe) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background-image: var(--punkt);
background-size: calc(2 * var(--punkt-r)) var(--punkt-ab);
background-repeat: repeat-y;
background-position: right top;
-webkit-mask: var(--kerben-abriss);
mask: var(--kerben-abriss);
--kerben-abriss:
radial-gradient(circle at 100% 0,    #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) top    / 100% 51% no-repeat,
radial-gradient(circle at 100% 100%, #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) bottom / 100% 51% no-repeat;
transform-origin: 100% 100%;
}
.billett-nr {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .08em;
}
.billett-zahl {
font-family: var(--display);
font-weight: 900;
font-size: min(var(--t-jahr), 27cqi);
line-height: 1;
font-variant-numeric: tabular-nums;
margin-inline-end: calc(2 * var(--punkt-r));
}
.billett-satz {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-headline);
line-height: 1.08;
text-transform: uppercase;
text-wrap: balance;
hyphens: auto;
margin: 0 0 var(--s-s);
color: inherit;
text-shadow: 1px 1px 0 var(--rot);
}
.billett-link {
text-decoration: none;
}
.billett-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r-flaeche);
}
.billett { border-radius: var(--billett-r); }
.billett-link:focus-visible { outline: none; }
.billett:has(.billett-link:focus-visible) {
outline: 3px solid var(--stimme);
outline-offset: 8px;
filter: none;
}
.billett-was {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.2;
margin: 0 0 var(--s-2xs);
text-wrap: balance;
}
.billett-was-lang { font-size: var(--t-kapsel); }
.billett-wann {
display: flex;
flex-wrap: wrap;
column-gap: var(--s-s);
font-weight: 600;
margin: 0;
}
.billett-wann time { font-weight: 900; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.billett:hover {
translate: -3px -3px;
filter: drop-shadow(9px 9px 0 var(--rot));
}
.billett:hover .billett-abriss { rotate: -7deg; translate: -4px 0; }
}
.billett:has(.billett-link:focus-visible) .billett-abriss { rotate: -7deg; translate: -4px 0; }
.billett:active {
translate: 1px 1px;
filter: drop-shadow(4px 4px 0 var(--rot));
}
.billett:active .billett-abriss { rotate: -10deg; translate: -6px 1px; }
@media (prefers-reduced-motion: no-preference) {
.billett {
transition: translate var(--uebergang), filter var(--uebergang);
}
.billett-abriss {
transition: rotate 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
translate 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
@media (forced-colors: active) {
.billett { filter: none; }
.billett-blatt, .billett-abriss { border: 2px solid CanvasText; }
}
@media (min-width: 72rem) {
.fuss > .huelle {
display: grid;
grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
column-gap: var(--s-xl);
align-items: end;
}
.fuss .billett { margin: var(--s-s) 0; }
}
@media (max-width: 36rem) {
.billett {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "abriss" "blatt";
rotate: 1.4deg;
--billett-r: calc(var(--r-flaeche) / 2);
}
.billett-abriss {
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: var(--s-xs);
padding: var(--s-s) var(--s-m) var(--s-s) var(--s-l);
border-radius: var(--billett-r) var(--billett-r) 0 0;
background-size: var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
background-position: left bottom;
--kerben-abriss:
radial-gradient(circle at 0 100%,    #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) left  / 51% 100% no-repeat,
radial-gradient(circle at 100% 100%, #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) right / 51% 100% no-repeat;
}
.billett-zahl { margin: 0; }
.billett-blatt {
margin-inline-start: 0;
margin-block-start: -1px;
padding: var(--s-m) var(--s-m) var(--s-l) var(--s-l);
border-radius: 0 0 var(--billett-r) var(--billett-r);
--kerben-blatt:
radial-gradient(circle at 0 0,    #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) left  / 51% 100% no-repeat,
radial-gradient(circle at 100% 0, #0000 var(--kerbe), #000 calc(var(--kerbe) + .5px)) right / 51% 100% no-repeat;
}
@media (hover: hover) {
.billett:hover .billett-abriss { rotate: 4deg; translate: 0 -3px; }
}
.billett:has(.billett-link:focus-visible) .billett-abriss { rotate: 4deg; translate: 0 -3px; }
.billett:active .billett-abriss { rotate: 8deg; translate: 0 -8px; }
}
:root {
--punkt-r:  2px;     
--punkt-ab: 10px;    
}
.zettel-blatt > * + *,
.meilenstein dt::after {
--punkt: radial-gradient(circle at center,
var(--punkt-farbe) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background-image:  var(--punkt);
background-size:   var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
}
.meilenstein dt::after { --punkt-farbe: var(--stimme-klein, var(--stimme)); }
.zettel-blatt > * + * { --punkt-farbe: currentColor; }
.zettel-blatt > * + * { background-position: left top; }
.intro { overflow-x: clip; }
.intro,
.spur {
--lesen: var(--weiss);
--spur-breite: 40rem;
--t-folge: clamp(17px, 0.24vw + 16.1px, 20px);
}
.intro-wort {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s-m);
justify-items: start;
}
.intro-rede {
display: grid;
gap: var(--s-s);
justify-items: start;
}
.intro-gruss {
margin: 0;
font-size: var(--t-headline);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--stimme);
text-shadow: 2px 2px 0 var(--karte-fehl);
text-wrap: balance;
}
.intro-rede > .vorspann {
font-size: clamp(21px, 0.55vw + 17.5px, 26px);
line-height: 1.38;
letter-spacing: 0.005em;
max-width: 36ch;
text-wrap: pretty;
}
.intro-rede > .vorspann > :first-child { margin-block-start: 0; }
.intro-rede > .vorspann > :last-child { margin-block-end: 0; }
@media (min-width: 62rem) {
.intro-wort {
grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
column-gap: var(--s-xl);
align-items: start;
}
}
.intro-billett {
justify-self: end;
width: min(100%, 34rem);
margin: var(--s-2xs) var(--s-2xs) 0 0;
rotate: -1.2deg;
--kerbe: 10px;
--abriss-b: 6.5rem;
filter: drop-shadow(4px 4px 0 var(--rot));
}
.intro-billett .billett-blatt { padding: var(--s-m) var(--s-m) var(--s-m) var(--s-s); }
.intro-billett .billett-abriss { padding-block: var(--s-s); }
.intro-billett .billett-satz {
font-size: clamp(22px, 0.9vw + 16px, 30px);
margin-block-end: var(--s-xs);
}
.intro-billett .billett-was { font-size: 19px; }
.intro-billett .billett-was-lang { font-size: 17px; }
.intro-billett .billett-wann { font-size: 15px; column-gap: var(--s-xs); }
.intro-billett .billett-zahl { font-size: min(30px, 27cqi); }
@media (hover: hover) {
.intro-billett:hover { filter: drop-shadow(6px 6px 0 var(--rot)); }
}
.intro-billett:active { filter: drop-shadow(3px 3px 0 var(--rot)); }
.intro-notizen {
grid-column: 1 / -1;
justify-self: stretch;
margin-block: var(--s-s) 0;
}
.intro-notizen .notiz {
background: var(--karte);
color: var(--karte-text);
font-size: 17px;
font-weight: 600;
line-height: 1.45;
text-wrap: pretty;
}
.intro-notizen .notiz:not([data-zuruf]) {
transition: rotate .42s cubic-bezier(.3, 1.4, .5, 1);
}
.intro-notizen .notiz:not([data-zuruf])[data-wach] {
rotate: 0deg;
transition-duration: .22s;
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
.intro-notizen .notiz:not([data-zuruf]):hover {
rotate: 0deg;
transition-duration: .22s;
transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}
}
@media (prefers-reduced-motion: reduce) {
.intro-notizen .notiz { transition: none !important; }
}
.intro-notizen .notiz[data-zuruf] {
align-self: center;
background: none;
color: var(--stimme);
padding: 0;
font-family: var(--display);
font-weight: 900;
font-size: var(--t-headline);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
text-shadow: 2px 2px 0 var(--karte-fehl);
text-wrap: balance;
--neigung: -4deg;
}
@media (min-width: 62rem) {
.intro-notizen .notiz[data-zuruf] { margin-block-start: 0; }
}
@media (max-width: 39.99rem) {
.intro-notizen .notiz[data-zuruf] { align-self: center; padding-inline: var(--s-s); }
.intro-billett { justify-self: stretch; margin-inline-end: 0; rotate: 1.4deg; }
.intro-billett .billett-blatt { padding: var(--s-s) var(--s-m) var(--s-m); }
.intro-billett .billett-abriss { padding: var(--s-xs) var(--s-m); }
}
.gruss-wort { display: inline-block; white-space: nowrap; }
.gruss-letter { display: inline-block; }
.intro[data-auftritt] .gruss-letter {
animation: letter-fall 420ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
animation-delay: calc(min(var(--i), 18) * 20ms);
}
@keyframes gruss-andruck {
from { text-shadow: 0.17em 0.17em 0 var(--versatz-farbe); }
to   { text-shadow: 2px 2px 0 var(--versatz-farbe); }
}
.intro[data-auftritt] .intro-gruss {
--versatz-farbe: var(--karte-fehl);
animation: gruss-andruck 520ms cubic-bezier(0.16, 1, 0.3, 1) 120ms backwards;
}
@keyframes rakel-vorspann {
from { clip-path: inset(-0.2em 100% -0.2em 0); }
to   { clip-path: inset(-0.2em 0 -0.2em 0); }
}
.intro[data-auftritt] .intro-rede > .vorspann {
animation: rakel-vorspann 620ms cubic-bezier(0.65, 0, 0.35, 1) 260ms backwards;
}
@keyframes billett-kleben {
0%   { translate: -10px -16px; rotate: -5deg; scale: 1.05; filter: drop-shadow(14px 14px 0 var(--rot)); visibility: hidden; }
70%  { translate: 1px 1px; rotate: -0.9deg; scale: 0.995; filter: drop-shadow(3px 3px 0 var(--rot)); }
100% { translate: 0 0; rotate: -1.2deg; scale: 1; filter: drop-shadow(4px 4px 0 var(--rot)); }
}
.intro[data-auftritt] .intro-billett {
animation: billett-kleben 640ms cubic-bezier(0.2, 0.9, 0.3, 1) 520ms backwards;
}
@keyframes notiz-heften {
0%   { translate: 0 -22px; rotate: calc(var(--neigung, -0.8deg) + 7deg); visibility: hidden; }
65%  { translate: 0 3px; rotate: calc(var(--neigung, -0.8deg) - 1.5deg); }
100% { translate: 0 0; rotate: var(--neigung, -0.8deg); }
}
@keyframes zuruf-auftritt {
0%   { scale: 1.6; rotate: 4deg; visibility: hidden; text-shadow: 0.3em 0.3em 0 var(--karte-fehl); }
60%  { scale: 0.94; }
100% { scale: 1; rotate: var(--neigung); text-shadow: 2px 2px 0 var(--karte-fehl); }
}
.intro[data-auftritt] .intro-notizen .notiz {
animation: notiz-heften 560ms cubic-bezier(0.3, 1.2, 0.5, 1) backwards;
animation-delay: calc(760ms + var(--n, 0) * 90ms);
}
.intro[data-auftritt] .intro-notizen .notiz[data-zuruf] {
animation-name: zuruf-auftritt;
animation-duration: 520ms;
animation-delay: calc(900ms + var(--n, 0) * 90ms);
}
@media (max-width: 39.99rem) {
@keyframes billett-kleben-schmal {
0%   { translate: 10px -16px; rotate: 5deg; scale: 1.05; filter: drop-shadow(14px 14px 0 var(--rot)); visibility: hidden; }
70%  { translate: -1px 1px; rotate: 1.1deg; filter: drop-shadow(3px 3px 0 var(--rot)); }
100% { translate: 0 0; rotate: 1.4deg; scale: 1; filter: drop-shadow(4px 4px 0 var(--rot)); }
}
.intro[data-auftritt] .intro-billett { animation-name: billett-kleben-schmal; }
}
.intro[data-auftritt] :is(.gruss-letter, .intro-gruss, .intro-rede > .vorspann, .intro-billett, .intro-notizen .notiz) {
animation-play-state: paused;
}
.intro[data-auftritt="los"] :is(.gruss-letter, .intro-gruss, .intro-rede > .vorspann, .intro-billett, .intro-notizen .notiz) {
animation-play-state: running;
}
.zeitspur { list-style: none; margin: 0; padding: 0; }
.meilenstein {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--spur-breite));
gap: var(--s-m);
align-items: baseline;
padding-block: var(--s-xs);
}
.meilenstein dt {
display: flex;
align-items: baseline;
gap: var(--s-m);
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-jahr);
line-height: 1.05;
color: var(--stimme);
font-variant-numeric: tabular-nums;
}
.meilenstein dt::after {
content: "";
flex: 1;
align-self: flex-end;
height: calc(2 * var(--punkt-r));
margin-block-end: .22em;
background-image:    var(--punkt);
background-size:     var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat:   repeat-x;
background-position: left center;
}
.meilenstein dd {
margin: 0;
font-size: var(--t-title);
text-wrap: pretty;
}
.meilenstein dd :is(p, ul, ol) { margin: 0; }
.meilenstein dd > * + *        { margin-block-start: var(--s-2xs); }
@media (max-width: 46rem) {
.meilenstein {
grid-template-columns: 2.5em minmax(0, 1fr);
gap: var(--s-s);
padding-block: var(--s-s);
font-size: 22px;
}
.meilenstein dt[data-doppel] { font-size: .78em; line-height: 1.15; }
.meilenstein + .meilenstein {
--punkt-farbe: var(--stimme-klein, var(--stimme));
--punkt: radial-gradient(circle at center,
var(--punkt-farbe) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background-image:    var(--punkt);
background-size:     var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat:   repeat-x;
background-position: left top;
}
.meilenstein dt { display: block; font-size: 1em; }
.meilenstein dt::after { content: none; }
.meilenstein dd { font-size: var(--t-body); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.meilenstein dt::after {
clip-path: inset(0 100% 0 0);
animation: spur-ziehen linear both;
animation-timeline: view();
animation-range: entry 20% cover 38%;
}
.meilenstein dt {
animation: spur-licht linear both;
animation-timeline: view();
animation-range: entry 10% cover 30%;
}
}
}
@keyframes spur-ziehen {
to { clip-path: inset(0 0 0 0); }
}
@keyframes spur-licht {
from { color: color-mix(in oklab, var(--stimme) 45%, var(--grund)); }
to   { color: var(--stimme); }
}
.blaettern { display: flex; gap: var(--s-s); margin-top: var(--s-l); }
@media (prefers-reduced-motion: reduce) {
.versatz { animation: none; }
.signet[data-einzug] .signet-zeichen,
.signet[data-einzug] .signet-name,
.signet[data-einzug] .signet-rollen li { animation: none; }
.signet-zeichen { transition: none; }
.signet-name:hover .signet-zeichen,
.signet-heim:focus-visible .signet-zeichen,
.signet-name:hover .signet-zeichen:nth-child(even),
.signet-heim:focus-visible .signet-zeichen:nth-child(even) { transform: none; }
.signet-name { transition: none; }
.signet-rollen { transition: none; }
.signet-huelse[data-druck] .signet-rollen { animation: none; }
.karte:hover, .karte:focus-visible,
.kachel:hover, .kachel:focus-visible { rotate: none; }
.hero-bild { transition: none; }
.hero-pfeil:active { transform: none; }
.karte, .kachel { transition: box-shadow var(--uebergang); }
.karte:hover, .karte:focus-visible,
.kachel:hover, .kachel:focus-visible { transform: none; }
.karte:active, .kachel:active { transform: none; }
.leuchtkasten-pfeil:active { transform: none; }
.leuchtkasten,
.leuchtkasten::backdrop,
.leuchtkasten-zettel { transition: none; }
.knopf:active, .knopf-voll:active, .anfrage button:active {
transform: none;
}
.zettel-zeichen[data-neu] { animation: none; }
.zettel[data-gedruckt] .zettel-blatt,
.zettel[data-andruck] .zettel-blatt { animation: none; }
.zettel[data-gedruckt] .zettel-name { animation: none; }
@view-transition { navigation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 1ms; }
}
[data-ton="schwarz"] {
--grund: var(--schwarz);
--stimme: var(--gelb);
--stimme-klein: var(--gelb);
--lesen: var(--weiss);
--karte: var(--gelb);
--karte-text: var(--schwarz);
--karte-fehl: var(--rot);
}
.roehre {
padding-block: 0;
overflow: clip;
--t-karte-titel: 30px;
--t-karte-zeile: 15px;
--t-jahrraum: clamp(7rem, 27vw, 24rem);
}
.roehre-bahn { position: relative; }
.roehre[data-flug] .roehre-bahn { height: calc(var(--schritte, 8) * 100svh); }
.roehre-buehne { padding-block: var(--s-xl); }
.roehre[data-flug] .roehre-buehne {
position: sticky;
top: 0;
height: 100svh;
padding-block: 0;
overflow: clip;
isolation: isolate;
}
.roehre-fernfeld,
.roehre-jahr,
.roehre-feld { display: none; }
.roehre[data-flug] .roehre-fernfeld,
.roehre[data-flug] .roehre-feld { display: block; }
.roehre[data-flug] .roehre-jahr { display: flex; }
.roehre[data-flug] .roehre-staffel { display: none; }
.roehre-fernfeld { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.roehre[data-flug] .roehre-buehne::before,
.roehre[data-flug] .roehre-buehne::after {
content: '';
position: absolute;
inset-inline: 0;
height: 34%;
z-index: 3;
pointer-events: none;
}
.roehre[data-flug] .roehre-buehne::before {
top: 0;
height: 42%;
background: linear-gradient(var(--schwarz) 34%, transparent);
}
.roehre[data-flug] .roehre-buehne::after {
bottom: 0;
background: linear-gradient(transparent, var(--schwarz) 88%);
}
.roehre-jahr {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-xs);
padding-top: 5vh;
color: var(--gelb);
pointer-events: none;
user-select: none;
}
.roehre-jahrzahl {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-jahrraum);
line-height: 0.74;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
}
.roehre-jahrbilanz {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
text-transform: uppercase;
color: var(--weiss);
}
.roehre-jahrbilanz b {
color: inherit;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.roehre-feld {
position: absolute;
inset: 0;
z-index: 2;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
pointer-events: none;
}
.roehre-karte {
position: absolute;
left: 50%;
top: 50%;
width: var(--kartenbreite, 22rem);
padding: var(--s-s) var(--s-m);
border-radius: var(--r-flaeche);
text-decoration: none;
color: var(--weiss);
text-wrap: balance;
}
.roehre-karte-datum,
.roehre-karte-ort,
.roehre-karte-titel { display: block; }
.roehre-karte-datum {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-karte-zeile);
line-height: 1.2;
font-variant-numeric: tabular-nums;
color: var(--farbe, var(--gelb));
}
.roehre-karte-ort {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-karte-zeile);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .75;
}
.roehre-karte-ort:empty { display: none; }
.roehre-karte-titel {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-karte-titel);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-top: var(--s-2xs);
}
.roehre-karte[data-mehr] { pointer-events: auto; }
.roehre-karte[data-mehr] .roehre-karte-titel {
text-decoration: underline;
text-decoration-color: var(--farbe, var(--gelb));
text-decoration-thickness: 3px;
text-underline-offset: .18em;
}
.roehre-karte[data-glanz] {
background: var(--farbe, var(--gelb));
color: var(--schwarz);
}
.roehre-karte[data-glanz] .roehre-karte-datum { color: var(--schwarz); opacity: .68; }
.roehre-karte[data-glanz] .roehre-karte-ort { opacity: .68; }
.roehre-karte[data-glanz] .roehre-karte-titel { text-decoration-color: var(--schwarz); }
.roehre-karte[data-mehr]:hover,
.roehre-karte[data-mehr]:focus-visible {
background: var(--farbe, var(--gelb));
color: var(--schwarz);
box-shadow: 6px 6px 0 var(--weiss);
}
.roehre-karte[data-mehr]:hover .roehre-karte-datum,
.roehre-karte[data-mehr]:focus-visible .roehre-karte-datum { color: var(--schwarz); opacity: .68; }
.roehre-karte[data-mehr]:hover .roehre-karte-titel,
.roehre-karte[data-mehr]:focus-visible .roehre-karte-titel { text-decoration-color: var(--schwarz); }
.roehre-karte:not([data-mehr]) { cursor: default; }
.roehre-karte[data-kuenftig]:not([data-mehr]) .roehre-karte-titel {
color: var(--farbe, var(--gelb));
}
.roehre-kopf,
.roehre-zaehler,
.roehre-fuss { position: relative; z-index: 4; }
.roehre[data-flug] .roehre-kopf {
position: absolute;
inset: calc(var(--s-s) + var(--kopfhoehe, 3.4rem)) 0 auto;
pointer-events: none;
}
.roehre-kopf h1 { margin-bottom: var(--s-xs); }
.roehre[data-flug] .roehre-kopf h1 { font-size: var(--t-title); }
.roehre-vorspann { font-size: var(--t-klein); max-width: 34ch; margin: 0; }
.roehre[data-flug] .roehre-vorspann { max-width: 26ch; }
.roehre-zaehler {
position: absolute;
inset: auto auto calc(var(--s-s) + var(--schienenhoehe, 3.6rem)) var(--s-m);
margin: 0;
display: grid;
font-family: var(--lauf);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
pointer-events: none;
}
.roehre-zaehler b {
font-size: var(--t-headline);
color: var(--gelb);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.roehre-zaehler span { font-size: var(--t-klein); }
.roehre-fuss {
position: absolute;
inset: auto var(--s-m) calc(var(--s-s) + var(--schienenhoehe, 3.6rem)) auto;
display: flex;
align-items: center;
gap: var(--s-m);
}
.roehre-wink {
margin: 0;
font-size: var(--t-klein);
font-weight: 900;
text-transform: uppercase;
transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.roehre-schiene {
position: absolute;
inset: auto 0 0;
z-index: 4;
padding: 0 var(--s-m) var(--s-s);
}
.roehre-schiene ol {
display: flex;
align-items: flex-end;
gap: 2px;
height: var(--schienenhoehe, 3.6rem);
list-style: none;
margin: 0;
padding: 0;
}
.roehre-schiene li { flex: 1; display: flex; height: 100%; }
.roehre-schritte { display: none; }
.roehre-schritt {
display: grid;
place-items: center;
width: var(--griff-zeile);
height: var(--griff-zeile);
padding: 0;
border: 2px solid var(--amber);
border-radius: var(--r-kapsel);
background: var(--amber);
color: var(--violett);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.roehre-schritt:hover { background: transparent; color: var(--amber); }
.roehre-schritt:active { transform: translate(1px, 1px); }
.roehre-schritt[disabled],
.roehre-schritt[disabled]:hover {
cursor: default;
background: transparent;
border-color: color-mix(in oklab, var(--amber) 45%, var(--grund));
color: color-mix(in oklab, var(--amber) 45%, var(--grund));
}
.roehre-schiene ol button {
flex: 1;
display: flex;
align-items: flex-end;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.roehre-saeule {
display: block;
width: 100%;
max-width: 14px;
margin-inline: auto;
height: var(--anteil, 2%);
min-height: 2px;
border-radius: var(--r-kapsel);
background: var(--weiss);
opacity: .3;
transition: opacity var(--uebergang), background var(--uebergang);
}
.roehre-schiene ol button:hover .roehre-saeule { opacity: .68; }
.roehre-schiene ol button[aria-current] .roehre-saeule {
opacity: 1;
background: var(--jahrfarbe, var(--gelb));
}
@property --durchflogen {
syntax: '<percentage>';
inherits: true;
initial-value: 0%;
}
.roehre[data-flug] .roehre-schiene ol {
background: linear-gradient(
to right,
color-mix(in srgb, var(--jahrfarbe, var(--gelb)) 16%, transparent) var(--durchflogen),
transparent var(--durchflogen)
);
border-radius: var(--r-kapsel);
}
.roehre-schiene ol button[disabled] { cursor: default; }
.roehre-schiene ol button[data-leer] .roehre-saeule { opacity: .14; }
.roehre-schiene ol button[disabled]:hover .roehre-saeule { opacity: .3; }
.roehre-schiene ol button[data-leer]:hover .roehre-saeule { opacity: .14; }
.roehre-staffel {
margin-top: var(--s-l);
width: min(100% - 2 * var(--s-m), var(--breite));
margin-inline: auto;
}
.zaehlung {
list-style: none;
margin: 0;
padding: 0;
max-width: var(--zeilenmass);
display: grid;
grid-template-columns: fit-content(12rem) minmax(0, 1fr) max-content;
}
.zaehlung li {
display: grid;
grid-column: span 3;
grid-template-columns: subgrid;
align-items: center;
gap: var(--s-s);
padding-block: var(--s-2xs);
}
.zaehlung b {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
color: var(--stimme);
font-variant-numeric: tabular-nums;
}
.zaehlung-balken {
display: block;
height: 10px;
width: var(--anteil);
min-width: 2px;
border-radius: var(--r-kapsel);
background: var(--stimme-klein, var(--stimme));
}
.zaehlung-wert {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
line-height: 1.05;
color: var(--stimme);
font-variant-numeric: tabular-nums;
text-align: right;
}
.roehre-staffel .zaehlung-balken { background: var(--jahrfarbe, var(--weiss)); }
.roehre-staffel li { transition: opacity var(--uebergang); }
.roehre-staffel li[aria-current] b {
text-decoration: underline;
text-decoration-color: var(--jahrfarbe, var(--gelb));
text-decoration-thickness: 3px;
text-underline-offset: .18em;
}
@media (max-width: 48rem) {
.roehre { --t-karte-titel: 22px; --t-karte-zeile: 13px; }
.roehre-karte { --kartenbreite: 15rem; padding: var(--s-xs) var(--s-s); }
.roehre-schiene { --schienenhoehe: 2.2rem; padding-inline: var(--s-s); }
.roehre { --schrittzeile: calc(var(--griff-zeile) + var(--s-xs) + var(--s-m)); }
.roehre-schritte {
display: flex;
justify-content: space-between;
gap: var(--s-s);
height: var(--griff-zeile);
margin-block-end: var(--s-xs);
}
.roehre-zaehler { inset: auto auto calc(var(--s-s) + 2.2rem + var(--schrittzeile)) var(--s-m); }
.roehre-fuss { inset: auto var(--s-m) calc(var(--s-s) + 2.2rem + var(--schrittzeile)) auto; gap: var(--s-s); }
.roehre-schiene ol { gap: 1px; }
.roehre-jahrbilanz { font-size: var(--t-label); }
.roehre-wink { display: none; }
.zaehlung { grid-template-columns: 4rem minmax(0, 1fr) max-content; }
}
@media (max-width: 26rem) {
.roehre-fuss {
flex-direction: column;
align-items: flex-end;
gap: var(--s-xs);
}
}
.unterabschnitt {
margin-top: var(--s-l);
padding-top: var(--s-m);
--punkt: radial-gradient(circle at center,
var(--stimme-klein, var(--stimme)) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background: var(--punkt) left top / var(--punkt-ab) calc(2 * var(--punkt-r)) repeat-x;
max-width: var(--zeilenmass);
}
.grosszahl {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--s-s);
margin: var(--s-l) 0 var(--s-s);
max-width: none;
}
.grosszahl b {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-display);
line-height: 0.8;
letter-spacing: -0.04em;
color: var(--stimme);
font-variant-numeric: tabular-nums;
}
.grosszahl span {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
text-transform: uppercase;
line-height: 1.05;
}
.zaehlung-breit { grid-template-columns: fit-content(15rem) minmax(0, 1fr) max-content; }
.zaehlung-breit b {
font-size: var(--t-label);
line-height: 1.2;
text-wrap: balance;
color: var(--stimme-klein, var(--stimme));
}
@media (max-width: 40rem) {
.zaehlung-breit { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) max-content; }
}
.gebaut { margin-top: var(--s-xl); }
.gebaut-marke {
display: inline-flex;
align-items: center;
gap: var(--s-m);
flex-wrap: wrap;
padding: var(--s-m) var(--s-l) var(--s-m) var(--s-m);
background: var(--karte, var(--violett));
color: var(--karte-text, var(--gelb));
border-radius: var(--r-flaeche);
text-decoration: none;
box-shadow: 6px 6px 0 var(--stimme-klein, var(--stimme));
transition: transform var(--uebergang), box-shadow var(--uebergang),
rotate var(--uebergang);
}
.gebaut-marke:hover,
.gebaut-marke:focus-visible {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 var(--stimme-klein, var(--stimme));
rotate: -1.2deg;
}
.gebaut-marke:focus-visible {
outline: 3px solid var(--schwarz);
outline-offset: 4px;
}
.gebaut-marke:active {
transform: translate(1px, 1px);
box-shadow: 4px 4px 0 var(--stimme-klein, var(--stimme));
rotate: 0deg;
}
.gebaut-scheibe {
flex: none;
display: block;
transition: rotate 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gebaut-zeichen {
width: clamp(4.4rem, 8vw, 6.4rem);
height: auto;
animation: gebaut-drehung 28s linear infinite;
}
@keyframes gebaut-drehung { to { rotate: 360deg; } }
.gebaut-marke:hover .gebaut-scheibe,
.gebaut-marke:focus-visible .gebaut-scheibe { rotate: 180deg; }
.gebaut-wort {
display: flex;
flex-direction: column;
gap: var(--s-2xs);
min-width: 0;
}
.gebaut-zeile {
font-family: var(--display);
font-weight: 900;
font-size: var(--t-title);
text-transform: uppercase;
line-height: 1.05;
text-shadow: 2px 2px 0 var(--rot);
}
.gebaut-herz {
width: 1em;
height: 1em;
vertical-align: -0.12em;
fill: var(--rot);
transform-origin: center;
animation: gebaut-puls 1.6s ease-in-out infinite;
}
@keyframes gebaut-puls {
0%, 42%, 100% { scale: 1; }
8%            { scale: 1.32; }
20%           { scale: 1.04; }
30%           { scale: 1.18; }
}
.gebaut-marke:hover .gebaut-herz,
.gebaut-marke:focus-visible .gebaut-herz { animation-duration: 0.75s; }
.gebaut-name { white-space: nowrap; }
.gebaut-buchstabe {
display: inline-block;
transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--i, 0) * 22ms);
}
.gebaut-marke:hover .gebaut-buchstabe,
.gebaut-marke:focus-visible .gebaut-buchstabe { transform: translateY(-0.16em) rotate(-7deg); }
.gebaut-marke:hover .gebaut-buchstabe:nth-child(even),
.gebaut-marke:focus-visible .gebaut-buchstabe:nth-child(even) { transform: translateY(-0.16em) rotate(8deg); }
.gebaut-fussnote {
font-family: var(--lauf);
font-weight: 600;
font-size: var(--t-klein);
line-height: 1.35;
text-wrap: balance;
}
@media (max-width: 26rem) {
.gebaut-marke { flex-direction: column; align-items: flex-start; padding: var(--s-m); }
}
@media (prefers-reduced-motion: reduce) {
.gebaut-zeichen, .gebaut-herz { animation: none; }
.gebaut-scheibe { transition: none; }
.gebaut-buchstabe { transition: none; }
.gebaut-marke:hover .gebaut-scheibe,
.gebaut-marke:focus-visible .gebaut-scheibe { rotate: none; }
.gebaut-marke:hover .gebaut-buchstabe,
.gebaut-marke:focus-visible .gebaut-buchstabe,
.gebaut-marke:hover .gebaut-buchstabe:nth-child(even),
.gebaut-marke:focus-visible .gebaut-buchstabe:nth-child(even) { transform: none; }
.gebaut-marke:hover, .gebaut-marke:focus-visible { transform: none; rotate: none; }
.gebaut-marke:active { transform: none; }
}
.zeiger {
position: fixed;
inset: auto;
top: 0;
left: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
background: none;
pointer-events: none;
z-index: 9999;
--dreh: -30deg;                 
}
.zeiger::backdrop { background: none; }
.zeiger[data-fort],
.zeiger[data-stumm] { opacity: 0; }
.zeiger-huepf { display: block; }
.zeiger-mikro {
position: absolute;
left: -15px;
top: -1.5px;
transform-origin: 15px 1.5px;
transform: rotate(var(--dreh));
fill: var(--weiss);
filter: drop-shadow(2px 2px 0 var(--schwarz));
transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
fill 140ms linear;
}
.zeiger[data-sendung] { --dreh: -7deg; }
.zeiger[data-sendung] .zeiger-mikro { fill: var(--amber); }
.zeiger[data-druck] .zeiger-mikro {
transform: rotate(var(--dreh)) translate(0, 2.5px);
transition-duration: 90ms;
}
.zeiger-welle {
position: absolute;
left: -21px;
top: -15.3px;
width: 44px;
height: 44px;
border: 2px solid var(--amber);
border-radius: 50%;
filter: drop-shadow(1.5px 1.5px 0 var(--schwarz));
}
html[data-zeiger],
html[data-zeiger] * { cursor: none; }
html[data-zeiger] :is(
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
[contenteditable]:not([contenteditable="false"]),
iframe
) { cursor: auto; }
@media (prefers-reduced-motion: reduce) {
.zeiger-mikro { transition: fill 140ms linear; }
.zeiger[data-sendung] { --dreh: -30deg; }
.zeiger[data-druck] .zeiger-mikro { transform: rotate(var(--dreh)); }
}
@media (forced-colors: active) {
html[data-zeiger],
html[data-zeiger] * { cursor: auto; }
.zeiger { display: none; }
}
[data-verfolger] {
position: relative;
isolation: isolate;
overflow: clip;
--verfolger-nacht: color-mix(in oklab, var(--schwarz) 84%, var(--magenta));
}
.verfolger-nacht {
position: absolute;
inset: 0;
z-index: 1;
padding-block: var(--s-xl);
pointer-events: none;
--sx: 50%;
--sy: 50%;
--sr: 0px;
--stimme: var(--magenta);
--lesen: var(--magenta);
color: var(--lesen);
background: radial-gradient(circle at calc(var(--sx) + 5px) calc(var(--sy) + 5px),
var(--karte-fehl) var(--sr), var(--verfolger-nacht) calc(var(--sr) + 0.75px));
-webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent var(--sr), #000 calc(var(--sr) + 0.75px));
mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent var(--sr), #000 calc(var(--sr) + 0.75px));
}
.verfolger-nacht[data-ruht] { visibility: hidden; }
.verfolger-nacht .knopf-voll {
background: transparent;
color: var(--amber);
border-color: var(--amber);
}
.verfolger-wort {
display: inline-block;
transform-origin: 50% 88%;
}
.verfolger-mikro {
position: fixed;
z-index: 9999;
width: 0;
height: 0;
pointer-events: none;
}
.verfolger-mikro svg {
position: absolute;
left: -15px;
top: -1.5px;
transform-origin: 15px 15px;
rotate: -7deg;
fill: var(--amber);
filter: drop-shadow(2px 2px 0 var(--schwarz));
}
.verfolger-aufprall {
position: fixed;
z-index: 9998;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
border: 3px solid var(--amber);
border-radius: 50%;
pointer-events: none;
filter: drop-shadow(2px 2px 0 var(--schwarz));
}
html[data-mikro-faellt] .zeiger { opacity: 0; }
.karte :is(h2, h3, .film-titel) {
transition: text-shadow 90ms cubic-bezier(0.55, 0, 0.7, 1);
}
.karte:hover :is(h2, h3, .film-titel),
.karte:focus-visible :is(h2, h3, .film-titel) {
text-shadow: 2px 2px 0 var(--karte-fehl, var(--stimme));
transition-duration: 220ms;
transition-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1);
}
.karte:active :is(h2, h3, .film-titel) { text-shadow: none; }
.blackout {
min-height: 100svh;
display: grid;
align-content: center;
}
.blackout-buehne {
display: grid;
justify-items: center;
text-align: center;
gap: var(--s-s);
max-width: 34rem;
}
.blackout-licht {
width: min(64vw, 19rem);
aspect-ratio: 1;
border-radius: 50%;
background: var(--gelb);
display: grid;
place-items: center;
margin-bottom: var(--s-m);
}
.blackout-mikro {
width: 82%;
height: auto;
color: var(--schwarz);
rotate: -7deg;
filter: drop-shadow(3px 3px 0 var(--vorhang));
}
.blackout-knoepfe {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-s);
margin-top: var(--s-m);
}
@media (prefers-reduced-motion: no-preference) {
.blackout-licht {
animation: licht-schwenken 760ms cubic-bezier(0.22, 0.9, 0.3, 1) 120ms backwards;
}
}
@keyframes licht-schwenken {
from { transform: translateX(-38vw) scale(0.72); }
60%  { transform: translateX(4vw)   scale(1.04); }
to   { transform: none; }
}
.einzeiler-zeile {
margin: 0;
max-width: 24ch;
font-size: var(--t-title);
}
.einzeiler-zeile blockquote { margin: 0; }
.einzeiler-zeile blockquote p {
margin: 0;
max-width: none;
display: grid;
gap: var(--s-2xs);
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
text-wrap: balance;
hyphens: auto;
overflow-wrap: break-word;
}
.einzeiler-stichwort {
font-family: var(--lauf);
font-size: var(--t-label);
text-transform: none;
line-height: 1.3;
}
.einzeiler-zeile figcaption {
margin-block-start: var(--s-s);
font-weight: 900;
font-size: var(--t-label);
}
.einzeiler-zeile-vorhang { color: var(--weiss); }
.einzeiler-zeile-vorhang .einzeiler-stichwort,
.einzeiler-zeile-vorhang a { color: var(--gelb); }
.einzeiler-zeile-blackout {
color: var(--stimme);
margin-block-start: var(--s-m);
justify-self: center;
}
.einzeiler-zeile-blackout .einzeiler-stichwort,
.einzeiler-zeile-blackout figcaption { color: var(--lesen); }
.zwischenruf {
position: fixed;
left: var(--s-m);
bottom: calc(var(--s-m) + env(safe-area-inset-bottom, 0px));
z-index: 40;
max-width: min(23rem, calc(100vw - 2 * var(--s-m)));
margin: 0;
padding: var(--s-s) var(--s-m);
border-radius: var(--r-flaeche);
background: var(--schwarz);
color: var(--gelb);
box-shadow: 3px 3px 0 var(--weiss);
rotate: -2deg;
font-weight: 600;
cursor: pointer;
}
.zwischenruf::after {
content: "";
position: absolute;
left: var(--s-l);
bottom: -11px;
width: 22px;
height: 12px;
background: inherit;
clip-path: polygon(0 0, 100% 0, 18% 100%);
}
@media (prefers-reduced-motion: no-preference) {
.zwischenruf { animation: zuruf-rein 420ms cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
.zwischenruf[data-fort] { animation: zuruf-raus 200ms cubic-bezier(0.55, 0, 0.7, 1) forwards; }
}
@keyframes zuruf-rein {
from { transform: translateY(150%); rotate: -9deg; }
to   { transform: none;             rotate: -2deg; }
}
@keyframes zuruf-raus {
to { transform: translateY(150%); rotate: -9deg; }
}
@media (max-width: 30rem) {
.zwischenruf::after { left: var(--s-m); }
}
.fuss-zugabe { margin: var(--s-l) 0 0; }
@keyframes blatt-fallen {
0%   { transform: rotateX(0deg); }
50%  { transform: rotateX(90deg); }
100% { transform: rotateX(0deg); }
}
.blatt[data-faellt] {
animation: blatt-fallen 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
transform-origin: center;
backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
.blatt[data-faellt] { animation: none; }
html[data-vorhang-skript] .vorhang[open] .vorhang-tuch { transition: none; }
html[data-vorhang-skript] .vorhang[data-auf] .vorhang-navi > ul > li { animation: none; }
.vorhang-griff, .vorhang-griff *, html[data-vorhang-skript] .vorhang .vorhang-griff,
html[data-vorhang-skript] .tafel, html[data-vorhang-skript] .blatt,
html[data-vorhang-skript] .vorhang .vorhang-zieh path { transition: none !important; }
.vorhang-navi a:is(:hover, :focus-visible) { transform: none; }
}
.buehnenkarte { margin: var(--s-l) 0 0; }
.buehnenkarte-fenster {
position: relative;
block-size: clamp(22rem, 72vh, 44rem);
border-radius: var(--r-flaeche);
overflow: hidden;
background: var(--grund-block);
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.buehnenkarte-fenster:focus-visible { outline: 3px solid var(--lesen); outline-offset: 3px; }
.buehnenkarte-fenster > svg {
display: block;
inline-size: 100%;
block-size: 100%;
}
.buehnenkarte-fenster[data-zieht] { cursor: grabbing; }
@media (scripting: enabled) {
.buehnenkarte-fenster { cursor: grab; }
}
.buehnenkarte-land {
fill: var(--schwarz);
stroke: var(--grund-block);
stroke-width: 1px;
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
}
.buehnenkarte-see { fill: var(--grund-block); }
.buehnenkarte-kanton {
fill: none;
stroke: color-mix(in oklab, var(--grund-block) 45%, var(--schwarz));
stroke-width: 1px;
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
}
.buehnenkarte-orte circle,
.buehnenkarte-buehnen circle {
fill: var(--gelb);
stroke: var(--schwarz);
cursor: pointer;
}
.buehnenkarte-orte circle:hover,
.buehnenkarte-buehnen circle:hover,
.buehnenkarte :is(circle[data-gewaehlt]) { fill: var(--weiss); }
.buehnenkarte-namen {
font-family: var(--lauf);
font-weight: 900;
letter-spacing: .02em;
fill: var(--weiss);
pointer-events: none;
paint-order: stroke;
stroke: var(--schwarz);
stroke-linejoin: round;
}
.buehnenkarte-namen .buehnenkarte-name-buehne { font-weight: 600; fill: var(--gelb); }
.buehnenkarte-steuer {
position: absolute;
inset-block-start: var(--s-m);
inset-inline-end: var(--s-m);
display: grid;
gap: var(--s-2xs);
}
.buehnenkarte-knopf,
.buehnenkarte-zettel-zu {
display: grid;
place-items: center;
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
border: 2px solid var(--amber);
border-radius: 50%;
background: var(--amber);
color: var(--violett);
cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.buehnenkarte-knopf:hover { background: var(--violett); color: var(--amber); }
.buehnenkarte-knopf:active,
.buehnenkarte-zettel-zu:active { transform: translate(1px, 1px); }
.buehnenkarte-knopf:focus-visible { outline-offset: 0; }
.buehnenkarte-knopf:disabled { cursor: default; background: var(--grund-block); border-color: var(--schwarz); color: var(--schwarz); }
.buehnenkarte-knopf svg,
.buehnenkarte-zettel-zu svg {
inline-size: 1.2rem;
block-size: 1.2rem;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.buehnenkarte-hinweis {
position: absolute;
inset: 0;
margin: 0;
max-inline-size: none;
display: grid;
place-items: center;
padding: var(--s-m);
text-align: center;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-title);
color: var(--weiss);
background: color-mix(in oklab, var(--schwarz) 70%, transparent);
pointer-events: none;
opacity: 0;
transition: opacity 300ms;
}
.buehnenkarte-hinweis[data-sichtbar] { opacity: 1; transition-duration: 120ms; }
.buehnenkarte-zettel {
position: absolute;
inset-inline-start: var(--s-m);
inset-block-end: var(--s-m);
max-inline-size: min(24rem, calc(100% - 2 * var(--s-m)));
max-block-size: calc(100% - 2 * var(--s-m));
overflow: auto;
padding: var(--s-m) var(--s-m) var(--s-m);
border-radius: var(--r-block);
background: var(--karte);
color: var(--karte-text);
cursor: auto;
user-select: text;
-webkit-user-select: text;
}
.buehnenkarte-zettel[hidden] { display: none; }
@media (max-width: 40rem) {
.buehnenkarte-zettel {
inset-inline: var(--s-s);
inset-block-end: var(--s-s);
max-inline-size: none;
max-block-size: 50%;
padding: var(--s-s) var(--s-m) var(--s-m);
}
}
.buehnenkarte-zettel-zu {
float: right;
margin: calc(-1 * var(--s-2xs)) calc(-1 * var(--s-2xs)) var(--s-2xs) var(--s-s);
inline-size: 2.5rem;
block-size: 2.5rem;
background: transparent;
border-color: currentColor;
color: inherit;
}
.buehnenkarte-zettel-zu:hover { background: var(--karte-text); color: var(--karte); }
.buehnenkarte-zettel-zu:focus-visible { outline-offset: 0; }
.buehnenkarte-zettel-ort {
margin: 0;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .06em;
}
.buehnenkarte-zettel-titel {
margin: .15em 0 0;
font-size: var(--t-title);
line-height: 1.15;
color: inherit;
}
.buehnenkarte-zettel p,
.buehnenkarte-zettel ul {
margin: var(--s-xs) 0 0;
font-size: var(--t-body);
line-height: 1.45;
white-space: pre-line;
}
.buehnenkarte-zettel ul { padding: 0; list-style: none; white-space: normal; }
.buehnenkarte-zettel li + li { margin-top: .2em; }
.buehnenkarte-zettel li button {
all: unset;
cursor: pointer;
text-decoration: underline dotted 2px;
text-underline-offset: .25em;
}
.buehnenkarte-zettel li button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.buehnenkarte figcaption {
margin-top: var(--s-s);
max-width: 65ch;
font-size: var(--t-label);
font-weight: 600;
line-height: 1.45;
color: var(--lesen);
text-wrap: pretty;
}
.buehnenkarte-quelle { display: block; margin-top: var(--s-2xs); }
.tournee {
display: grid;
gap: var(--s-s);
margin-top: var(--s-xs);
padding: var(--s-m) var(--s-m) var(--s-s);
border-radius: var(--r-block);
background: var(--grund);
color: var(--lesen);
}
.tournee[hidden] { display: none; }
.tournee-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-s) var(--s-m);
}
.tournee-spielen {
display: inline-flex;
align-items: center;
gap: .5em;
min-inline-size: 15.5em;
justify-content: center;
}
.tournee-spielen svg { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; flex: none; }
.tournee-spielen .tournee-zeichen-halten,
.tournee-spielen[aria-pressed="true"] .tournee-zeichen-spielen { display: none; }
.tournee-spielen[aria-pressed="true"] .tournee-zeichen-halten { display: inline; }
.tournee-stand {
flex: 1 1 14rem;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 .5em;
margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tournee-jahr {
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-jahr);
line-height: 1.05;
color: var(--tourfarbe, var(--gelb));
text-shadow: 2px 2px 0 var(--violett);
}
.tournee-jahr:empty { display: none; }
.tournee-zurueck { margin-inline-start: auto; }
.tournee-schiene {
position: relative;
touch-action: none;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
}
.tournee-schiene ol {
display: flex;
gap: 2px;
block-size: 4.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.tournee-schiene li { flex: 1; display: flex; min-inline-size: 0; }
.tournee-schiene button {
flex: 1;
display: grid;
grid-template-rows: 1fr 1.2rem;
align-items: end;
justify-items: center;
row-gap: 4px;
min-inline-size: 0;
padding: 0;
border: 0;
border-radius: var(--r-feld);
background: none;
color: var(--lesen);
cursor: inherit;
}
.tournee-schiene button:focus-visible { outline: 3px solid var(--lesen); outline-offset: 0; }
.tournee-saeule {
display: block;
inline-size: 100%;
max-inline-size: 14px;
block-size: var(--anteil);
min-block-size: 3px;
border-radius: var(--r-kapsel);
background: var(--jahrfarbe);
transition: background var(--uebergang), translate 160ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.tournee-zahl {
font-family: var(--lauf);
font-weight: 900;
font-size: 12px;
line-height: 1.2rem;
font-variant-numeric: tabular-nums;
color: var(--weiss);
}
.tournee-schiene button:hover .tournee-saeule { translate: 0 -3px; }
.tournee-schiene button[data-kommt] .tournee-saeule { background: color-mix(in oklab, var(--jahrfarbe) 28%, var(--grund)); }
.tournee-schiene button[data-kommt] .tournee-zahl { color: color-mix(in oklab, var(--weiss) 55%, var(--grund)); }
.tournee-schiene button[aria-current] .tournee-zahl { color: var(--jahrfarbe); }
.tournee-kopfnadel {
position: absolute;
inset-block: -6px calc(1.2rem + 4px);
inline-size: 2px;
margin-inline-start: -1px;
background: var(--weiss);
pointer-events: none;
}
.tournee-kopfnadel::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: -4px;
inline-size: 10px;
block-size: 10px;
border-radius: 50%;
background: var(--weiss);
}
.tournee-kopfnadel[hidden] { display: none; }
@media (max-width: 40rem) {
.tournee { padding: var(--s-s) var(--s-s) var(--s-xs); }
.tournee-spielen { min-inline-size: 0; flex: 1 1 auto; }
.tournee-zurueck { margin-inline-start: 0; }
.tournee-schiene li:not(:nth-child(3n + 1)) button:not([aria-current]) .tournee-zahl { visibility: hidden; }
}
.buehnenkarte-tournee circle {
stroke: var(--schwarz);
cursor: pointer;
transform-box: fill-box;
transform-origin: center;
}
.buehnenkarte-tournee circle[data-war] { fill: var(--schwarz); stroke: var(--weiss); }
.buehnenkarte-tournee circle:hover { stroke: var(--weiss); }
.buehnenkarte-zettel-kalender { font-weight: 900; }
.buehnenkarte-ringe circle {
fill: none;
vector-effect: non-scaling-stroke;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
}
.ortsliste { margin-top: var(--s-xl); }
.ortsliste-kopf {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--s-s) var(--s-m);
}
.ortsliste-kopf .unterabschnitt { margin: 0; }
.ortsliste-suche {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2xs) var(--s-s);
flex: 0 1 26rem;
margin: 0;
font-weight: 600;
}
.ortsliste-suche label { font-weight: 900; flex-basis: 100%; }
.ortsliste-suche input {
font: 600 var(--t-body) / 1.3 var(--lauf);
color: var(--lesen);
background: var(--grund-block);
border: 2px solid var(--lesen);
border-radius: var(--r-kapsel);
padding: 10px 18px;
flex: 1 1 14rem;
min-inline-size: 0;
}
.ortsliste-suche input:focus-visible { outline-offset: 0; }
.ortsliste-treffer { font-variant-numeric: tabular-nums; }
.ortsliste-land { margin-top: var(--s-l); }
.ortsliste-land h4 {
margin: 0 0 var(--s-xs);
padding-bottom: var(--s-2xs);
border-bottom: 2px solid var(--lesen);
font-size: var(--t-title);
}
.ortsliste-land h4 b,
.ortsliste :is(summary, .ortsliste-ort) b {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.ortsliste-land > ul {
display: flex;
flex-wrap: wrap;
row-gap: .3em;
margin: 0 0 0 -1.1em;
padding: 0;
list-style: none;
clip-path: inset(-.6em -.6em -.6em .8em);
line-height: 1.35;
}
.ortsliste-land > ul > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.ortsliste-land > ul > li::before {
content: "·" / "";
display: inline-block;
inline-size: 1.1em;
text-align: center;
font-weight: 900;
}
.ortsliste-land > ul > li:has(> details[open]) { flex-basis: 100%; }
.ortsliste-land > ul > li > details { display: inline; }
.ortsliste summary {
display: inline;
cursor: pointer;
font-weight: 900;
list-style: none;
}
.ortsliste summary::-webkit-details-marker { display: none; }
.ortsliste-in { font-weight: 600; }
.ortsliste details > ul {
margin: .3em 0 .6em 1.1em;
padding: 0;
list-style: none;
font-size: var(--t-klein);
font-weight: 600;
line-height: 1.4;
}
.ortsliste details > ul > li + li { margin-top: .25em; }
.ortsliste[data-skript] li[data-ort] > details { display: none; }
.ortsliste-ort {
font: inherit;
font-weight: 900;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: start;
text-decoration: underline transparent 2px;
text-underline-offset: .2em;
transition: text-decoration-color var(--uebergang);
}
.ortsliste-ort:hover { text-decoration-color: currentColor; }
.ortsliste-funde { font-size: var(--t-klein); font-weight: 600; }
.ortsliste[data-skript]:not([data-sucht]) [data-kurz]:not([data-offen]) li[data-ort]:not([data-gross]) { display: none; }
.ortsliste-mehr {
margin-top: var(--s-xs);
font: 900 var(--t-body) / 1.35 var(--lauf);
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-decoration: underline 2px;
text-underline-offset: .2em;
}
.ortsliste-mehr::after {
content: "";
display: inline-block;
inline-size: .45em;
block-size: .45em;
margin-inline-start: .5em;
border-right: 2.5px solid currentColor;
border-bottom: 2.5px solid currentColor;
transform: translateY(-.25em) rotate(45deg);
transition: transform var(--uebergang);
}
.ortsliste-mehr[aria-expanded="true"]::after { transform: translateY(-.05em) rotate(-135deg); }
.ortsliste[data-sucht] .ortsliste-mehr { display: none; }
.ortsliste [data-weg] { display: none; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.zaehlung-balken {
transform-origin: left center;
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 60ms);
}
[data-auftritt]:not([data-da]) .zaehlung-balken { transform: scaleX(0); }
.grosszahl b,
.grosszahl span {
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.grosszahl span { transition-delay: 250ms; }
.grosszahl:not([data-da]) b,
.grosszahl:not([data-da]) span {
transform: translateY(0.35em);
clip-path: inset(0 0 100% 0);
}
}
.aushang-knoepfe {
display: flex;
flex-wrap: wrap;
gap: var(--s-s);
margin-block-start: var(--s-l);
}
.programm-presse { margin-block-start: var(--s-l); }
.programm-presse .fuss-presse-titel { color: inherit; }
.knopf-kalender { display: inline-flex; align-items: center; gap: .45em; }
.knopf-kalender svg { flex: none; }
.aushang-raster {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
column-gap: var(--s-m);
row-gap: var(--s-l);
align-items: start;
}
.aushang-blatt { grid-column: 1; grid-row: 1; position: relative; }
.aushang-kopf  { grid-column: 2; grid-row: 1; align-self: center; }
.aushang-bild,
.aushang-text  { grid-column: 1 / -1; }
@media (min-width: 52.0625rem) {
.aushang-raster {
grid-template-columns: minmax(15rem, 19rem) minmax(0, 46rem);
column-gap: var(--s-2xl);
}
.aushang-blatt { grid-row: 1 / span 3; }
.aushang-kopf, .aushang-bild, .aushang-text { grid-column: 2; }
.aushang-kopf { align-self: start; padding-block-start: var(--s-m); }
}
.kalenderblatt {
container-type: inline-size;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0 2.4rem;
background: var(--karte);
color: var(--karte-text);
border-radius: var(--r-feld);
box-shadow: 6px 6px 0 var(--karte-fehl, var(--stimme));
rotate: -2deg;
font-family: var(--lauf);
font-weight: 900;
text-transform: uppercase;
line-height: 1;
font-variant-numeric: tabular-nums;
text-align: center;
}
.kalenderblatt-kopf {
align-self: stretch;
padding: max(.8rem, 10cqi) .4rem max(.5rem, 5cqi);
font-size: max(11px, 8.5cqi);
letter-spacing: .06em;
background-image: radial-gradient(circle at center,
var(--karte-text) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background-size: var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
background-position: center bottom;
}
.kalenderblatt-tag {
display: block;
margin-block: max(.3rem, 4cqi) 0;
font-size: 58cqi;
line-height: .86;
letter-spacing: -.04em;
text-shadow: .025em .025em 0 var(--karte-fehl, var(--stimme));
}
.kalenderblatt-monat {
margin-block-start: max(.25rem, 3cqi);
font-size: max(13px, 12.5cqi);
}
.kalenderblatt-fuss {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: .5em;
margin-block-start: max(.3rem, 4cqi);
font-size: max(11px, 7.5cqi);
}
.kalenderblatt-fuss > :first-child { font-weight: 600; }
.kalenderblatt-zeit { white-space: nowrap; }
.kalenderblatt-nummer {
margin: var(--s-s) 0 0;
text-align: center;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-klein);
text-transform: uppercase;
letter-spacing: .06em;
color: var(--stimme-klein, var(--stimme));
}
.kalenderblatt-stempel {
position: absolute;
z-index: 1;
right: -1.1rem;
bottom: 1.6rem;
margin: 0;
padding: .2em .7em .25em;
border: 2px solid var(--karte);
border-radius: var(--r-kapsel);
background: var(--karte-text);
color: var(--karte);
box-shadow: 3px 3px 0 var(--karte-fehl, var(--stimme));
font: 900 var(--t-kapsel) / 1.1 var(--display);
text-transform: uppercase;
white-space: nowrap;
rotate: 7deg;
}
@media (max-width: 52rem) {
.kalenderblatt-stempel { font-size: var(--t-klein); right: auto; left: 50%; bottom: 1.9rem; translate: -50% 0; }
.kalenderblatt { padding-block-end: 1.6rem; }
.kalenderblatt-nummer { margin-block-start: 2.1rem; }
}
@keyframes stempel-andruck {
from { translate: -8px -8px; scale: 1.25; box-shadow: 14px 14px 0 var(--karte-fehl, var(--stimme)); }
to   { translate: 0 0;       scale: 1;    box-shadow: 3px 3px 0 var(--karte-fehl, var(--stimme)); }
}
@media (prefers-reduced-motion: no-preference) {
.kalenderblatt-stempel[data-andruck] { animation: stempel-andruck 620ms cubic-bezier(0.16, 1, 0.3, 1); }
@media (max-width: 52rem) {
.kalenderblatt-stempel[data-andruck] { animation-name: none; }
}
}
.aushang-kopf h1 { margin-block-end: var(--s-s); overflow-wrap: break-word; hyphens: auto; }
.aushang-kopf h1[data-lang] { font-size: var(--t-headline); }
.aushang-ort {
display: block;
margin-block-end: .35em;
font-family: var(--lauf);
font-size: var(--t-title);
letter-spacing: .03em;
line-height: 1.05;
color: var(--stimme-klein, var(--stimme));
}
.aushang-adresse {
margin: 0;
font-size: var(--t-title);
font-weight: 600;
line-height: 1.3;
max-width: 34ch;
}
.wegweiser {
display: block;
width: fit-content;
margin-block-start: var(--s-s);
text-decoration: none;
filter: drop-shadow(3px 3px 0 var(--stimme));
rotate: -2deg;
transform-origin: 0 50%;
}
.wegweiser-schild {
display: block;
padding: .32em 1.7em .36em .8em;
background: var(--lesen);
color: var(--grund);
font: 900 var(--t-kapsel) / 1.1 var(--display);
text-transform: uppercase;
white-space: nowrap;
clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%);
}
.wegweiser:is(:hover, :focus-visible) { rotate: 1deg; }
.wegweiser:is(:hover, :focus-visible) .wegweiser-schild { translate: .25em 0; }
@media (prefers-reduced-motion: no-preference) {
.wegweiser {
transition: rotate 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wegweiser-schild {
transition: translate 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
@media (forced-colors: active) {
.wegweiser-schild { border: 2px solid CanvasText; }
}
@media (max-width: 52rem) {
.aushang-kopf h1 { font-size: var(--t-terminname); hyphens: manual; }
.aushang-kopf h1[data-lang] { font-size: var(--t-title); }
.aushang-ort { font-size: var(--t-label); }
.aushang-adresse { grid-column: 1 / -1; font-size: var(--t-body); }
.aushang-kopf .ausverkauft-gross { font-size: var(--t-kapsel); }
}
.aushang-bild img:not(.sticker img) {
width: auto;
max-height: min(78svh, 46rem);
border-radius: var(--r-flaeche);
box-shadow: 6px 6px 0 var(--stimme);
rotate: 1deg;
}
.aushang-text { font-size: var(--t-beschreibung); }
.aushang-text > :first-child { margin-block-start: 0; }
.programm-huelle { max-width: 64rem; container-type: inline-size; }
.programm-plakat { position: relative; margin-block-end: var(--s-2xl); }
.programm-plakat img { width: 100%; border-radius: var(--r-flaeche); }
.programm-schild {
position: absolute;
left: calc(-1 * var(--s-s));
bottom: calc(-1 * var(--s-xl));
max-width: calc(100% - var(--s-m));
margin: 0;
padding: .12em .5em .16em;
background: var(--karte);
color: var(--karte-text);
border-radius: var(--r-feld);
box-shadow: 6px 6px 0 var(--karte-fehl, var(--stimme));
font-size: min(clamp(2.2rem, 1.2rem + 5vw, 6rem),
calc((100cqi - var(--s-m)) / (var(--wort, 8) * .76 + 1)));
overflow-wrap: anywhere;
letter-spacing: -.02em;
line-height: 1;
rotate: -2.5deg;
transform-origin: 0 100%;
}
.programm-schild-frei { position: static; display: inline-block; margin-block-end: var(--s-l); }
.programm-text { max-width: 56rem; font-size: var(--t-beschreibung); }
.programm-text .vorspann { font-size: 1.5625em; }
.programm[data-ton="violett"] .programm-text { color: var(--weiss); }
.programm[data-ton="violett"] .programm-text .vorspann { color: var(--gelb); }
.programm[data-ton="gelb"] + .programm-abende[data-ton="gelb"] { padding-block-start: 0; }
.programm-fussnoten { margin-block-start: var(--s-l); font-size: .875em; }
.programm-abende h2 { margin-block-end: var(--s-l); }
.programm-zaehler {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: .3em;
align-items: center;
align-content: center;
margin: var(--s-xl) 0 0;
font-size: var(--t-headline);
}
.programm-zaehler:first-child { margin-block-start: 0; }
.programm-strich {
display: contents;
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
color: var(--stimme);
}
.programm-strich b {
grid-row: span 2;
font-family: var(--lauf);
font-size: min(6rem, 1.9em);
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
color: var(--karte, var(--lesen));
}
.programm-strich span { grid-column: 2; align-self: end; }
.programm-bilanz { margin: var(--s-s) 0 0; font-weight: 700; }
.programm-zaehler .programm-bilanz { display: block; grid-column: 2; align-self: start; margin-block-start: .15rem; font-size: var(--t-body); }
.programm-archiv > summary { list-style: none; cursor: pointer; }
.programm-archiv > summary::-webkit-details-marker { display: none; }
.programm-archiv > summary::marker { content: ""; }
.programm-auf {
display: inline-flex;
align-items: center;
gap: .3em;
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-label);
text-transform: uppercase;
white-space: nowrap;
color: var(--stimme-klein, var(--stimme));
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: .2em;
}
.programm-bilanz:has(> .programm-auf:first-child) { margin-block-start: .4rem; }
.programm-zaehler:hover .programm-auf { text-decoration-color: transparent; }
.programm-auf svg { flex: 0 0 auto; }
.programm-auf-offen { display: none; }
.programm-archiv[open] .programm-auf-zu { display: none; }
.programm-archiv[open] .programm-auf-offen { display: inline; }
.programm-archiv[open] .programm-auf svg { transform: rotate(180deg); }
.programm-gespielt { margin-block-start: var(--s-xl); }
.blaettern {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--s-m);
margin-block-start: var(--s-2xl);
}
.blaettern-knopf {
display: grid;
place-items: center;
width: 64px;
height: 64px;
background: var(--karte);
color: var(--karte-text);
border-radius: var(--r-kapsel);
transition: transform var(--uebergang), box-shadow var(--uebergang), rotate var(--uebergang);
}
.blaettern-zurueck { grid-column: 1; justify-self: start; }
.blaettern-alle    { grid-column: 2; }
.blaettern-weiter  { grid-column: 3; justify-self: end; }
.blaettern-zeichen { width: 26px; height: 26px; }
.blaettern-knopf:is(:hover, :focus-visible) {
transform: translate(-3px, -3px);
box-shadow: 3px 3px 0 var(--karte-fehl, var(--stimme));
rotate: -4deg;
transition-duration: 220ms;
}
.blaettern-knopf:active { transform: none; box-shadow: none; rotate: 0deg; }
.auslage { overflow-x: clip; }
.auslage-raster {
display: grid;
gap: var(--s-2xl) var(--s-xl);
align-items: start;
}
@media (min-width: 52.0625rem) {
.auslage-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auslage .blaettern { grid-column: 1 / -1; }
}
.auslage .blaettern { margin-block-start: 0; }
.auslage-fenster {
position: relative;
isolation: isolate;
max-width: 34rem;
padding: var(--s-m) var(--s-l) var(--s-m) var(--s-s);
}
.auslage-cover {
position: relative;
z-index: 1;
width: 100%;
border-radius: var(--r-flaeche);
box-shadow: 8px 8px 0 var(--stimme-klein, var(--stimme));
rotate: -2.5deg;
}
.auslage-platte {
position: absolute;
z-index: 0;
top: 9%;
left: 12%;
width: 80%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle, rgb(0 0 0 / 0) 0 60%, var(--violett) 60% 61%, rgb(0 0 0 / 0) 61% 78%, var(--violett) 78% 79%, rgb(0 0 0 / 0) 79%),
var(--schwarz);
translate: 22% 0;
transition: translate 700ms cubic-bezier(0.16, 1, 0.3, 1), rotate 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.auslage-platte > span {
position: absolute;
inset: 32%;
border-radius: 50%;
background:
radial-gradient(circle, var(--grund) 0 11%, rgb(0 0 0 / 0) 11%),
linear-gradient(var(--violett), var(--violett)) 50% 18% / 46% 14% no-repeat,
var(--stimme);
}
.auslage-fenster[data-huelle] .auslage-cover { border-radius: 0; }
.auslage-fenster[data-buch] {
inline-size: fit-content;
margin-inline: auto;
padding: var(--s-m) var(--s-xl) var(--s-m) var(--s-m);
}
.auslage-fenster[data-buch] .auslage-cover {
inline-size: auto;
block-size: clamp(22rem, 58vh, 34rem);
border-radius: 0;
box-shadow: none;
filter: drop-shadow(10px 10px 0 var(--stimme-klein, var(--schwarz)));
}
.auslage-fenster[data-buch] .preisschild { top: var(--s-xs); right: 0; }
@media (max-width: 40rem) {
.auslage-fenster[data-buch] .auslage-cover { block-size: 24rem; }
}
.auslage-fenster[data-huelle] .auslage-platte { top: 5%; left: 7%; width: 88%; translate: 16% 0; }
@media (prefers-reduced-motion: no-preference) {
.auslage-fenster:hover .auslage-platte { translate: 48% 0; rotate: 200deg; }
.auslage-fenster[data-huelle]:hover .auslage-platte { translate: 22% 0; }
}
@media (max-width: 40rem) {
.auslage-platte { translate: 14% 0; }
}
.preisschild {
position: absolute;
z-index: 2;
top: 0;
right: 0;
display: grid;
place-content: center;
width: clamp(5.6rem, 4rem + 5vw, 8rem);
aspect-ratio: 1;
margin: 0;
border-radius: var(--r-kapsel);
background: var(--stimme);
color: var(--violett);
box-shadow: 4px 4px 0 var(--stimme-klein, var(--schwarz));
rotate: 12deg;
font-family: var(--lauf);
font-weight: 900;
text-align: center;
line-height: 1;
font-variant-numeric: tabular-nums;
text-transform: uppercase;
font-size: var(--t-klein);
}
.preisschild b { display: block; font-size: 2.35em; letter-spacing: -.03em; }
.auslage-text h1 { overflow-wrap: break-word; hyphens: auto; }
.auslage-text h1[data-lang] { font-size: var(--t-headline); }
.steckbrief {
list-style: none;
margin: 0 0 var(--s-l);
padding: 0 0 calc(2 * var(--punkt-r));
--punkt-farbe: var(--stimme-klein, var(--stimme));
background-image: radial-gradient(circle at center,
var(--punkt-farbe) 0 var(--punkt-r),
rgb(0 0 0 / 0) calc(var(--punkt-r) + .5px));
background-size: var(--punkt-ab) calc(2 * var(--punkt-r));
background-repeat: repeat-x;
background-position: left bottom;
}
.steckbrief li {
padding-block: var(--s-xs);
font-weight: 900;
text-transform: uppercase;
letter-spacing: .03em;
font-variant-numeric: tabular-nums;
background-image: inherit;
background-size: inherit;
background-repeat: repeat-x;
background-position: left top;
}
@media (forced-colors: active) {
.kalenderblatt, .programm-schild, .blaettern-knopf, .preisschild, .kalenderblatt-stempel { border: 2px solid CanvasText; }
.auslage-platte { display: none; }
}
@property --hub    { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --aus    { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --dreh   { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --kipp-x { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --kipp-y { syntax: '<angle>';  inherits: true; initial-value: 0deg; }
@property --schild { syntax: '<angle>';  inherits: true; initial-value: -8deg; }
.karte.ware {
--ware-steg: clamp(3rem, 2.2rem + 2vw, 4.25rem);
background: none;
border-radius: 0;
overflow: visible;
}
.karte.ware:is(:hover, :focus-visible, :active) { transform: none; box-shadow: none; rotate: 0deg; }
.ware .karte-text {
flex: 1 1 auto;
background: var(--karte, var(--violett));
border-radius: var(--r-flaeche);
padding-block-start: calc(var(--karte-einzug) + var(--ware-steg));
}
.karten-laden { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); column-gap: var(--s-l); }
.karten-laden > li { container-type: inline-size; }
.ware-fenster {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: flex-end;
block-size: clamp(15rem, 12rem + 7vw, 20rem);
block-size: clamp(15rem, 82cqi, 27rem);
padding-block-start: var(--s-m);
margin-block-end: calc(-1 * var(--ware-steg));
pointer-events: none;
}
.ware-koerper {
position: relative;
display: block;
block-size: 100%;
transform:
perspective(70rem)
translateY(calc(var(--hub) * -6%))
rotateX(var(--kipp-x))
rotateY(var(--kipp-y));
transform-origin: 50% 100%;
}
.karte .ware-ding {
position: relative;
z-index: 1;
display: block;
block-size: 100%;
inline-size: auto;
aspect-ratio: auto;
object-fit: contain;
--versatz: calc(6px + var(--hub) * 12px);
filter: drop-shadow(var(--versatz) var(--versatz) 0 var(--stimme-klein, var(--schwarz)));
}
.ware[data-platte] .ware-koerper { block-size: 78%; translate: -14% 0; }
.ware-platte {
position: absolute;
z-index: 0;
inset-block-start: 3%;
inset-inline-start: 3%;
inline-size: 94%;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle, rgb(0 0 0 / 0) 0 60%, var(--violett) 60% 61%, rgb(0 0 0 / 0) 61% 78%, var(--violett) 78% 79%, rgb(0 0 0 / 0) 79%),
var(--schwarz);
translate: calc(12% + var(--aus) * 40%) 0;
rotate: var(--dreh);
}
.ware-platte > span {
position: absolute;
inset: 32%;
border-radius: 50%;
background:
radial-gradient(circle, var(--grund) 0 11%, rgb(0 0 0 / 0) 11%),
linear-gradient(var(--violett), var(--violett)) 50% 18% / 46% 14% no-repeat,
var(--stimme);
}
.ware-schild {
position: absolute;
z-index: 2;
inset-block-start: 3%;
inset-inline-start: 91%;
inline-size: clamp(4.75rem, 4rem + 2vw, 5.75rem);
padding-block-start: 1.35rem;
translate: -50% 0;
transform-origin: 50% 0;
rotate: var(--schild);
}
.ware[data-platte] { --schild: 8deg; }
.ware[data-platte] .ware-schild { inset-inline-start: 9%; }
.ware-schild::before,
.ware-schild::after {
content: '';
position: absolute;
inset-inline-start: 50%;
background: var(--schwarz);
}
.ware-schild::before { inset-block-start: 0; inline-size: 2px; block-size: 1.45rem; translate: -50% 0; }
.ware-schild::after  { inset-block-start: -4px; inline-size: 9px; aspect-ratio: 1; border-radius: 50%; translate: -50% 0; }
.ware-schild > span {
display: grid;
place-content: center;
aspect-ratio: 1;
border-radius: 50%;
background: var(--stimme);
color: var(--violett);
box-shadow: 4px 4px 0 var(--stimme-klein, var(--schwarz));
font-family: var(--lauf);
font-weight: 900;
font-size: var(--t-klein);
line-height: 1;
text-align: center;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.ware-schild b { display: block; font-size: 2.1em; letter-spacing: -.03em; }
.ware:is(:hover, :focus-visible, [data-wach]) { --hub: 1; --aus: 1; }
@media (prefers-reduced-motion: no-preference) {
.ware {
transition:
--hub 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
--aus 700ms cubic-bezier(0.16, 1, 0.3, 1),
--dreh 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ware:is(:hover, :focus-visible, [data-wach]) { --dreh: 200deg; }
html[data-feder] .ware { transition: none; }
}
@media (forced-colors: active) {
.ware-platte { display: none; }
.ware-schild > span { border: 2px solid CanvasText; }
.ware-schild::before, .ware-schild::after { background: CanvasText; }
}
.panel-knopf {
position: fixed;
z-index: 48;
bottom: calc(var(--s-s) + env(safe-area-inset-bottom, 0px));
right: var(--s-m);
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding-inline: 14px;
background: var(--violett);
color: var(--gelb);
border: 2px solid var(--gelb);
border-radius: var(--r-kapsel);
box-shadow: 3px 3px 0 var(--schwarz);
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: var(--t-klein);
letter-spacing: .02em;
line-height: 1;
text-decoration: none;
}
.panel-knopf:is(:hover, :focus-visible) { background: var(--gelb); color: var(--violett); border-color: var(--violett); }
.panel-knopf:focus-visible { outline-offset: 0; }
.panel-knopf:active { transform: translate(1px, 1px); }
@media print { .panel-knopf { display: none; } }
@property --ecke   { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --wurf-x { syntax: '<length>'; inherits: true; initial-value: 6px; }
@property --wurf-y { syntax: '<length>'; inherits: true; initial-value: 6px; }
.anschlagwand {
list-style: none;
margin: var(--s-xl) 0 0;
padding: 0 0 var(--s-xl);
display: grid;
gap: var(--s-2xl) var(--s-l);
grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 39.999rem) {
.anschlagwand { overflow-x: clip; overflow-clip-margin: 16px; }
.anschlag:nth-child(odd)  { margin-inline-end: 7%; }
.anschlag:nth-child(even) { margin-inline-start: 7%; }
}
@media (min-width: 40rem) {
.anschlagwand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anschlag:nth-child(even) { top: var(--s-2xl); }
.anschlagwand { padding-block-end: calc(var(--s-xl) + var(--s-2xl)); }
}
@media (min-width: 64rem) {
.anschlagwand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.anschlag:nth-child(even) { top: 0; }
.anschlag:nth-child(3n+2) { top: var(--s-2xl); }
.anschlag:nth-child(3n)   { top: var(--s-l); }
}
@media (min-width: 72rem) {
.anschlagwand[data-reihe] { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block-end: var(--s-l); }
.anschlagwand[data-reihe] .anschlag:nth-child(n) { top: 0; }
.anschlagwand[data-reihe] .anschlag:nth-child(even) { top: var(--s-xl); }
}
:is(.anschlag, .stapel-blatt)[data-farbe="violett"] { --papier: var(--violett); --name: var(--gelb);    --text: var(--gelb);    --fehl: var(--rot);     --wurf: var(--rot);     --zettel: var(--gelb);    --zettel-text: var(--violett); }
:is(.anschlag, .stapel-blatt)[data-farbe="gelb"]    { --papier: var(--gelb);    --name: var(--rot);     --text: var(--schwarz); --fehl: var(--violett); --wurf: var(--violett); --zettel: var(--violett); --zettel-text: var(--gelb); }
:is(.anschlag, .stapel-blatt)[data-farbe="rot"]     { --papier: var(--rot);     --name: var(--gelb);    --text: var(--schwarz); --fehl: var(--violett); --wurf: var(--violett); --zettel: var(--gelb);    --zettel-text: var(--violett); }
:is(.anschlag, .stapel-blatt)[data-farbe="magenta"] { --papier: var(--magenta); --name: var(--violett); --text: var(--schwarz); --fehl: var(--gelb);    --wurf: var(--violett); --zettel: var(--gelb);    --zettel-text: var(--violett); }
:is(.anschlag, .stapel-blatt)[data-farbe="blau"]    { --papier: var(--blau);    --name: var(--gelb);    --text: var(--schwarz); --fehl: var(--violett); --wurf: var(--violett); --zettel: var(--gelb);    --zettel-text: var(--violett); }
.anschlag {
--ecke-max: min(14rem, 58cqi);
--wurf-x: 6px;
--wurf-y: 6px;
position: relative;
container-type: inline-size;
rotate: var(--kipp, 0deg);
transform-origin: 50% 0;
align-self: start;
}
.anschlag-papier {
--ecke: 0px;
--weg: cubic-bezier(0.55, 0, 0.7, 1);
--hin: cubic-bezier(0.22, 0.9, 0.3, 1);
transition: --ecke 140ms var(--weg), translate 90ms var(--weg),
--wurf-x 90ms var(--weg), --wurf-y 90ms var(--weg);
}
.anschlag:is(:hover, :has(:focus-visible)) .anschlag-papier {
--ecke: var(--ecke-max);
transition: --ecke 420ms cubic-bezier(0.2, 1.5, 0.4, 1), translate 220ms var(--hin),
--wurf-x 220ms var(--hin), --wurf-y 220ms var(--hin);
}
.anschlag[data-gezogen] { z-index: 6; }
.anschlag:is(:hover, :has(:focus-visible)):not([data-gezogen]) .anschlag-papier {
translate: -2px -2px;
--wurf-x: 9px;
--wurf-y: 9px;
}
.anschlag:has(.anschlag-blatt:active):not([data-gezogen]) .anschlag-papier {
translate: 3px 3px;
--wurf-x: 2px;
--wurf-y: 2px;
transition-duration: 70ms;
}
.anschlag-papier {
position: relative;
z-index: 1;
filter: drop-shadow(var(--wurf-x) var(--wurf-y) 0 var(--wurf));
}
.anschlag-blatt {
display: flex;
flex-direction: column;
padding: var(--s-s) var(--s-s) var(--s-m);
background: var(--papier);
color: var(--text);
border-radius: var(--r-feld);
text-decoration: none;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%, 0 100%);
-webkit-user-drag: none;
}
.anschlag-blatt img {
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
-webkit-user-drag: none;
user-select: none;
}
.anschlag-blatt :is(h2, h3) {
margin: var(--s-s) 0 var(--s-xs);
color: var(--name);
font-family: var(--display);
font-size: min(var(--t-headline), calc((100cqi - 2 * var(--s-s)) / (var(--wort, 8) * 0.84)));
line-height: 1;
letter-spacing: -0.02em;
text-wrap: balance;
transition: text-shadow 90ms cubic-bezier(0.55, 0, 0.7, 1);
}
.anschlag-blatt p {
margin: 0;
max-width: 40ch;
}
.anschlag:is(:hover, :has(:focus-visible)) .anschlag-blatt :is(h2, h3) {
text-shadow: 2px 2px 0 var(--fehl);
transition-duration: 220ms;
transition-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1);
}
.anschlag-blatt:focus-visible { outline: none; }
.anschlag:has(.anschlag-blatt:focus-visible) {
outline: 3px solid var(--violett);
outline-offset: 6px;
border-radius: var(--r-feld);
}
.anschlag-lasche {
position: absolute;
inset: 0;
pointer-events: none;
background: var(--weiss);
clip-path: polygon(calc(100% - var(--ecke)) 100%, 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) calc(100% - var(--ecke)));
filter: drop-shadow(-2px -2px 0 var(--wurf));
}
.anschlag-zettel {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: var(--ecke-max);
height: var(--ecke-max);
background: var(--zettel);
color: var(--zettel-text);
border-radius: 0 0 var(--r-feld) 0;
text-decoration: none;
}
.anschlag-satz {
position: absolute;
left: calc(100% - var(--ecke-max) / 3.1);
top:  calc(100% - var(--ecke-max) / 3.1);
translate: -50% -50%;
rotate: -45deg;
display: flex;
flex-direction: column;
align-items: center;
width: calc(var(--ecke-max) * 0.95);
font-family: var(--lauf);
font-weight: 900;
text-transform: uppercase;
text-align: center;
line-height: 1;
white-space: nowrap;
}
.anschlag-gross {
font-size: calc(var(--ecke-max) * 0.16);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin-block: .08em;
}
.anschlag-zettel[data-lang] .anschlag-gross { font-size: calc(var(--ecke-max) * 0.105); }
.anschlag-klein { font-size: calc(var(--ecke-max) * 0.068); letter-spacing: .02em; }
.anschlag-band {
position: absolute;
z-index: 2;
top: -0.85rem;
left: 50%;
width: clamp(4.5rem, 30cqi, 6.5rem);
height: 1.7rem;
translate: -50% 0;
rotate: calc(var(--kipp, 0deg) * -2.4);
background: var(--weiss);
clip-path: polygon(0 0, 4% 20%, 0 40%, 4% 60%, 0 80%, 4% 100%, 96% 100%, 100% 80%, 96% 60%, 100% 40%, 96% 20%, 100% 0);
pointer-events: none;
transition: rotate 300ms cubic-bezier(0.2, 1.5, 0.4, 1), translate 300ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.anschlag[data-los] .anschlag-band {
rotate: calc(var(--kipp, 0deg) * -2.4 - 24deg);
translate: -62% -0.4rem;
}
.anschlag[data-angedrueckt] .anschlag-papier {
animation: anschlag-andruck 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.anschlag[data-angedrueckt] .anschlag-band {
animation: anschlag-klaps 300ms cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes anschlag-klaps {
from { scale: 1.35 1.6; translate: -50% -0.5rem; }
}
@keyframes anschlag-andruck {
from { --wurf-x: 16px; --wurf-y: 16px; translate: -6px -6px; }
to   { translate: 0 0; }
}
.anschlag-ecke { display: none; }
[data-anschlag="handy"] .anschlag-ecke {
display: block;
position: absolute;
z-index: 3;
right: -8px;
bottom: -8px;
width: 64px;
height: 64px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
[data-anschlag="handy"] .anschlag-ecke:focus-visible { outline: none; }
.anschlagwand[data-auftritt] .anschlag {
--takt: calc(120ms + var(--i, 0) * 85ms);
animation: anschlag-aufrollen 340ms cubic-bezier(0.3, 0.7, 0.2, 1) var(--takt) backwards;
}
.anschlagwand[data-auftritt] .anschlag-papier {
animation: anschlag-anpressen 620ms linear var(--takt) backwards;
}
.anschlagwand[data-auftritt] .anschlag-band {
animation: anschlag-klaps 300ms cubic-bezier(0.2, 1.6, 0.4, 1) calc(var(--takt) + 430ms) backwards;
}
.anschlag:nth-child(2) { --i: 1; }
.anschlag:nth-child(3) { --i: 2; }
.anschlag:nth-child(4) { --i: 3; }
.anschlag:nth-child(5) { --i: 4; }
.anschlag:nth-child(6) { --i: 5; }
.anschlag:nth-child(7) { --i: 6; }
.anschlag:nth-child(8) { --i: 7; }
.anschlag:nth-child(9) { --i: 8; }
.anschlag:nth-child(n+10) { --i: 9; }
@keyframes anschlag-aufrollen {
from { clip-path: inset(0 -3rem 100% -3rem); }
to   { clip-path: inset(-3rem); }
}
@keyframes anschlag-anpressen {
0%   { translate: -5px -9px; --wurf-x: 18px; --wurf-y: 18px; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
60%  { translate: -5px -9px; --wurf-x: 18px; --wurf-y: 18px; animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
78%  { translate: 2px 2px;   --wurf-x: 2px;  --wurf-y: 2px;  animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
100% { translate: 0 0;       --wurf-x: 6px;  --wurf-y: 6px; }
}
[data-anschlag] .anschlag-papier {
transition: translate 90ms var(--weg), --wurf-x 90ms var(--weg), --wurf-y 90ms var(--weg);
}
[data-anschlag] .anschlag:is(:hover, :has(:focus-visible)) .anschlag-papier {
transition: translate 220ms var(--hin), --wurf-x 220ms var(--hin), --wurf-y 220ms var(--hin);
}
[data-anschlag] .anschlag:has(.anschlag-blatt:active) .anschlag-papier { transition-duration: 70ms; }
[data-anschlag] .anschlag[data-greifbar] .anschlag-blatt { cursor: grab; }
[data-anschlag] .anschlag[data-gezogen] .anschlag-blatt { cursor: grabbing; }
[data-anschlag="handy"] .anschlag-blatt {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
.anschlag-papier,
.anschlag:is(:hover, :has(:focus-visible)) .anschlag-papier,
.anschlag-band { transition: none; }
.anschlag[data-angedrueckt] :is(.anschlag-papier, .anschlag-band),
.anschlagwand[data-auftritt] :is(.anschlag, .anschlag-papier, .anschlag-band) { animation: none; }
.anschlag .anschlag-papier { translate: none !important; }
}
@media (forced-colors: active) {
.anschlag { rotate: none; }
.anschlag-papier { --ecke: 0px !important; }
.anschlag-zettel, .anschlag-lasche, .anschlag-band { display: none; }
.anschlag-blatt { clip-path: none; border: 2px solid CanvasText; }
.anschlag-papier { filter: none; }
.anschlagwand[data-auftritt] :is(.anschlag, .anschlag-papier, .anschlag-band) { animation: none; }
}
.stapel {
--blatt-b: 2.4em;
--blatt-h: 3.1em;
position: relative;
display: inline-block;
isolation: isolate;
}
.stapel-blaetter {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.stapel-blatt {
--hoch: 0.5em;
--faecher: 0deg;
--takt: 0ms;
position: absolute;
left: calc(20% + var(--i, 0) * 60% / max(1, var(--n) - 1));
bottom: calc(100% + var(--hoch) - var(--blatt-h));
width: var(--blatt-b);
height: var(--blatt-h);
translate: -50% 0;
rotate: calc(var(--kipp, 0deg) * 2 + var(--faecher));
transform-origin: 50% 100%;
background: var(--papier);
border-radius: calc(var(--r-feld) * 0.2);
filter: drop-shadow(2px 2px 0 var(--wurf));
font-size: var(--t-label);
transition: bottom 150ms cubic-bezier(0.55, 0, 0.7, 1), rotate 150ms cubic-bezier(0.55, 0, 0.7, 1);
}
.stapel-blatt::after {
content: '';
position: absolute;
inset: 14% 12% auto;
aspect-ratio: 5 / 4;
background: var(--name);
}
.stapel-blatt::before {
content: '';
position: absolute;
z-index: 1;
top: -0.3em;
left: 50%;
width: 62%;
height: 0.62em;
translate: -50% 0;
rotate: calc(var(--kipp, 0deg) * -3);
background: var(--weiss);
clip-path: polygon(0 0, 6% 25%, 0 50%, 6% 75%, 0 100%, 100% 100%, 94% 75%, 100% 50%, 94% 25%, 100% 0);
}
@media (hover: none) {
.stapel-blatt { --hoch: 0.95em; }
}
.stapel:is(:hover, :has(.knopf:focus-visible)) .stapel-blatt {
--hoch: calc(1.5em + (var(--i) - (var(--n) - 1) / 2) * (var(--i) - (var(--n) - 1) / 2) * -0.1em + 0.3em);
--faecher: calc((var(--i) - (var(--n) - 1) / 2) * 9deg);
transition: bottom 460ms cubic-bezier(0.2, 1.55, 0.4, 1) calc(var(--i) * 28ms),
rotate 460ms cubic-bezier(0.2, 1.55, 0.4, 1) calc(var(--i) * 28ms);
}
.stapel:has(.knopf:active) .stapel-blatt {
--hoch: 0.2em;
--faecher: 0deg;
transition-duration: 70ms;
transition-delay: 0ms;
}
.stapel .knopf { background-color: var(--grund); }
.stapel .knopf:hover { background-color: var(--stimme-klein, var(--stimme)); }
@media (prefers-reduced-motion: reduce) {
.stapel-blatt,
.stapel:is(:hover, :has(.knopf:focus-visible)) .stapel-blatt { transition: none; }
}
@media (forced-colors: active) {
.stapel-blaetter { display: none; }
}
html:active-view-transition-type(umzug)::view-transition-new(*) { animation: none; }
html:active-view-transition-type(umzug)::view-transition-old(*) { animation: none; opacity: 0; }
html:active-view-transition-type(umzug)::view-transition-group(*.plakat) {
animation-duration: 640ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
animation-fill-mode: both;
}
html:active-view-transition-type(umzug)::view-transition-old(*.plakat) { animation: none; opacity: 0; }
html:active-view-transition-type(umzug)::view-transition-new(*.plakat) {
animation: none;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
html:active-view-transition-type(umzug)::view-transition-group(*.plakat) { animation: none; }
}
.sticker {
--sticker-b: 10rem;
--sticker-kipp: -6deg;
--wurf: 3px;
display: block;
width: var(--sticker-b);
rotate: var(--sticker-kipp);
pointer-events: none;
filter: drop-shadow(var(--wurf) var(--wurf) 0 var(--schwarz));
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-drag: none;
}
.sticker img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
a.sticker { pointer-events: auto; }
a.sticker:not([data-bereit]) { transition: rotate 220ms cubic-bezier(0.3, 1.4, 0.5, 1), scale 220ms cubic-bezier(0.3, 1.4, 0.5, 1); }
@media (hover: hover) {
a.sticker:not([data-bereit]):hover { rotate: calc(var(--sticker-kipp) + 3deg); scale: 1.05; --wurf: 6px; }
}
.sticker:focus,
.sticker:focus-visible { outline: none; }
a.sticker:focus-visible { rotate: calc(var(--sticker-kipp) + 3deg); scale: 1.05; }
.sticker[data-bereit] { pointer-events: auto; cursor: grab; }
.sticker[data-geloest] { cursor: grabbing; z-index: 30; }
.sticker-flaeche { display: block; position: relative; transform-origin: 50% 50%; }
.sticker-lasche {
position: absolute;
inset: 0;
transform-origin: 50% 50%;
pointer-events: none;
filter: drop-shadow(var(--lasche-x, 2px) var(--lasche-y, 2px) 0 var(--schwarz));
}
.sticker-lasche[hidden] { display: none; }
.sticker .sticker-rueck { height: 100%; filter: brightness(0) invert(1); }
.sticker-hero {
--sticker-b: clamp(9.5rem, 24vw, 21rem);
--sticker-kipp: -7deg;
align-self: end;
justify-self: start;
margin: 0 0 var(--s-l) var(--s-m);
}
.aushang-bild { position: relative; }
.sticker-aushang {
--sticker-b: clamp(8.5rem, 30%, 15rem);
--sticker-kipp: 7deg;
position: absolute;
z-index: 2;
top: calc(-1 * var(--s-l));
right: calc(-1 * var(--s-xs));
}
.sticker-aushang-frei {
--sticker-b: clamp(9rem, 40%, 14rem);
--sticker-kipp: -5deg;
position: static;
margin-block-start: var(--s-m);
}
.zahlen-kopf { position: relative; }
.zahlen-kopf > h1 { padding-inline-end: 6.5rem; }
.sticker-zahlen {
--sticker-b: 6.5rem;
--sticker-kipp: 8deg;
position: absolute;
z-index: 2;
top: calc(-1 * var(--s-m));
right: calc(-1 * var(--s-2xs));
}
@media (min-width: 62rem) {
.zahlen-kopf > h1 { padding-inline-end: 0; max-width: calc(100% - 16rem); }
.sticker-zahlen { --sticker-b: clamp(10rem, 16vw, 16rem); top: 0; right: 0; }
}
[data-verfolger] > .huelle { position: relative; }
.sticker-anfrage {
--sticker-b: 6rem;
--sticker-kipp: 6deg;
position: absolute;
right: 0;
bottom: calc(-1 * var(--s-xl));
}
@media (min-width: 62rem) {
.sticker-anfrage { --sticker-b: clamp(9rem, 14vw, 14rem); bottom: 50%; translate: 0 50%; }
}
.vorhang-sticker {
grid-area: ziele;
align-self: start;
display: flex;
justify-content: flex-end;
align-items: flex-start;
margin-block-start: var(--s-l);
pointer-events: none;
}
.sticker-vorhang { flex: none; }
.sticker-vorhang-1 { --sticker-b: clamp(11rem, 17vw, 17rem); --sticker-kipp: -8deg; z-index: 1; }
.sticker-vorhang-2 { --sticker-b: clamp(7rem, 10vw, 10.5rem); --sticker-kipp: 9deg; margin-inline-start: -1.5rem; margin-block-start: 7rem; }
.sticker-vorhang-3 { --sticker-b: clamp(7.5rem, 11vw, 11.5rem); --sticker-kipp: -4deg; margin-inline-start: -0.5rem; margin-block-start: 1.5rem; }
@media (max-width: 72rem) {
.vorhang-tuch {
grid-template-rows: auto auto auto 1fr;
grid-template-areas: "marke" "spruch" "sticker" "ziele";
}
.vorhang-sticker {
grid-area: sticker;
justify-content: flex-start;
margin-block-start: var(--s-m);
}
.sticker-vorhang-1 { --sticker-b: clamp(8rem, 30vw, 12rem); }
.sticker-vorhang-2 { --sticker-b: clamp(5rem, 17vw, 7.5rem); margin-block-start: 2.5rem; }
.sticker-vorhang-3 { --sticker-b: clamp(5.5rem, 19vw, 8rem); margin-block-start: 0.5rem; }
}
@media (max-height: 32rem) {
.vorhang-sticker { display: none; }
}
.verfolger-nacht .sticker { visibility: hidden; }
@media (forced-colors: active) {
.sticker { filter: none; }
}