@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;
--schwarz: #1A0836;
--nacht:   #361752;
--weiss:   #FFFFFF;
--berry:   #E9415E;
--vorhang: #C0105A;
--kart-violett: #6A2BC4;
--display: Rubik, system-ui, sans-serif;
--lauf:    Barlow, system-ui, sans-serif;
--r-kapsel: 100px;
--federnd:  cubic-bezier(.34, 1.56, .64, 1);
--aus:      cubic-bezier(.16, 1, .3, 1);
--rand: max(16px, env(safe-area-inset-left));
--rand-r: max(16px, env(safe-area-inset-right));
--rand-o: max(12px, env(safe-area-inset-top));
--rand-u: max(14px, env(safe-area-inset-bottom));
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
height: 100%;
overflow: hidden;
background: var(--schwarz);
color: var(--weiss);
font-family: var(--lauf);
font-weight: 700;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
::selection { background: var(--gelb); color: var(--violett); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }
.rt-spiel {
position: fixed;
inset: 0;
overflow: hidden;
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.rt-bild {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.rt-spiel::before {
content: 'Die Strasse wird noch geteert.';
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: calc(min(100vw, 36rem) + 14px);
right: 0;
display: grid;
place-items: center;
padding: 0 24px;
text-align: center;
font: 900 16px/1.3 var(--lauf);
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tuerkis);
pointer-events: none;
animation: rt-geduld 400ms ease-out 800ms both;
}
.rt-spiel[data-vorgemerkt]::before { content: 'Die Strasse wird noch geteert. Dann geht es los.'; }
.rt-spiel[data-vorgemerkt="mit"]::before { content: 'Die Strasse wird noch geteert. Dann geht der Raum auf.'; }
.rt-geladen .rt-spiel::before { content: none; }
@keyframes rt-geduld { from { opacity: 0; } }
.rt-rund {
appearance: none;
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
border: 2px solid currentColor;
background: var(--schwarz);
color: var(--weiss);
cursor: pointer;
}
.rt-rund svg { width: 26px; height: 26px; fill: currentColor; }
@media (hover: hover) { .rt-rund:hover { color: var(--gelb); } }
.rt-rund:active { transform: translate(1px, 1px); }
.rt-rund:focus-visible, .rt-tanz-ton:focus-visible { outline: none; border: 4px solid var(--gelb); }
.rt-taste:focus-visible { outline: none; border: 5px solid var(--gelb); }
.rt-tafel {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y pinch-zoom;
scrollbar-width: thin;
scrollbar-color: rgb(255 255 255 / .3) transparent;
}
.rt-tafel[hidden] { display: none; }
.rt-tafel-innen {
position: relative;
margin: auto;
padding: calc(var(--rand-o) + 20px) var(--rand-r) calc(var(--rand-u) + 20px) var(--rand);
}
.rt-tafel-start {
justify-content: flex-start;
scroll-padding-bottom: calc(var(--rand-u) + 96px);
}
.rt-tafel-start .rt-tafel-innen {
--innen-l: max(var(--rand), 48px);
--innen-r: 40px;
margin: 0;
width: min(100%, 36rem);
min-height: 100%;
align-self: flex-start;
background: var(--schwarz);
padding-left: var(--innen-l);
padding-right: var(--innen-r);
display: flex;
flex-direction: column;
justify-content: safe center;
gap: 22px;
animation: rt-rein 700ms var(--aus) both;
}
.rt-tafel-start .rt-tafel-innen::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -14px;
width: 14px;
background: repeating-linear-gradient(180deg, var(--rot) 0 34px, var(--weiss) 34px 68px);
}
@keyframes rt-rein { from { transform: translateX(calc(-100% - 30px)); } }
.rt-tafel-start.rt-faehrt-ab { pointer-events: none; }
.rt-tafel-start.rt-faehrt-ab .rt-tafel-innen { animation: rt-abfahrt 520ms both; }
@keyframes rt-abfahrt {
0%   { transform: none; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
18%  { transform: translateX(12px); animation-timing-function: cubic-bezier(.5, 0, .8, .5); }
100% { transform: translateX(calc(-100% - 40px)); }
}
.rt-titel {
margin: 0 0 0 -12px;
width: clamp(200px, 22vw, 290px);
line-height: 0;
}
.rt-titel img {
display: block;
width: 100%;
height: auto;
transform: rotate(-4deg);
filter: drop-shadow(3px 3px 0 #000);
cursor: pointer;
transition: transform 200ms var(--aus), filter 200ms var(--aus);
animation: rt-logo-klatsch 640ms 260ms var(--federnd) both;
}
@keyframes rt-logo-klatsch {
0%  { transform: scale(1.6) rotate(-14deg); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.03, .92) rotate(-4deg); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
}
.rt-titel img.rt-klebt { animation: none; }
.rt-titel img.rt-klebt:hover { transform: rotate(-6deg) scale(1.03); filter: drop-shadow(6px 6px 0 #000); }
.rt-titel img.rt-klatscht { animation: rt-logo-nochmal 460ms var(--federnd) both; }
@keyframes rt-logo-nochmal {
0%  { transform: scale(1.16) rotate(-10deg); filter: drop-shadow(14px 14px 0 #000); }
55% { transform: scale(1.03, .92) rotate(-4deg); filter: drop-shadow(3px 3px 0 #000); }
}
.rt-kopfzeile {
display: flex;
align-items: center;
gap: 10px;
}
.rt-kopfzeile .rt-titel { flex: none; }
.rt[data-raum] .rt-kopfzeile { display: contents; }
.rt-modi {
flex: 1 1 0;
min-width: 0;
max-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.rt-sticker {
--farbe: var(--amber);
--einheit: .95;
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 0;
border: 0;
border-radius: 12px;
background: none;
color: var(--farbe);
font: inherit;
line-height: 0;
text-decoration: none;
cursor: pointer;
rotate: var(--dreh, 0deg);
-webkit-tap-highlight-color: transparent;
}
.rt-sticker::before { content: ''; position: absolute; inset: -8px -6px; }
.rt-sticker[hidden] { display: none; }
.rt-sticker:focus-visible { outline: none; }
.rt-leise { --farbe: var(--weiss); --einheit: .7; }
.rt-klein { --farbe: var(--tuerkis); --einheit: .5; }
.rt-modi .rt-sticker { display: block; width: 100%; }
.rt-mit { --farbe: var(--tuerkis); --dreh: 4deg; --spaet: 520ms; }
.rt-feelgood { --farbe: var(--berry); --dreh: -5deg; --spaet: 660ms; margin-left: -10px; }
.rt-sticker > svg:not(.rt-zeichen) {
overflow: visible;
filter: drop-shadow(3px 3px 0 #000);
transition: transform 200ms var(--aus), filter 200ms var(--aus), opacity 300ms ease-out;
}
.rt-modi .rt-sticker > svg { display: block; width: 100%; height: auto; }
.rt-sticker > .rt-schild { flex: none; }
.rt-klein > .rt-schild { filter: drop-shadow(2px 2px 0 #000); }
.rt-zeichen { width: 22px; height: 22px; flex: none; fill: currentColor; }
:is(.rt-modi .rt-sticker, .rt-los) > svg { animation: rt-sticker-klatsch 640ms var(--spaet) var(--federnd) backwards; }
:is(.rt-modi .rt-sticker, .rt-los) > svg.rt-klebt { animation: none; }
@keyframes rt-sticker-klatsch {
0%  { transform: scale(1.6) rotate(-10deg); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.03, .92); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
}
@media (hover: hover) {
.rt-sticker:not(:disabled):hover > svg:not(.rt-zeichen) { transform: rotate(-2deg) scale(1.04); filter: drop-shadow(6px 6px 0 #000); }
}
.rt-sticker:not(:disabled):active > svg:not(.rt-zeichen) { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 #000); transition-duration: 60ms; }
.rt-sticker:disabled, .rt-sticker[aria-disabled="true"] { cursor: progress; }
.rt-sticker.rt-vorgemerkt > svg { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 #000); }
.rt-kaputt .rt-sticker:disabled { cursor: not-allowed; }
.rt-kaputt .rt-sticker:disabled > svg { opacity: .45; }
@media (scripting: none) { .rt-modi { display: none; } }
:is(.rt-sticker, .rt-schild) text { font-family: var(--display); font-weight: 900; font-variant-numeric: tabular-nums; }
.rt-sticker .rt-band text { font-family: var(--lauf); }
:is(.rt-sticker, .rt-schild) .rt-platte { fill: var(--weiss); stroke: var(--weiss); stroke-width: 14; stroke-linejoin: round; }
.rt-sticker .rt-platte { transition: fill 140ms ease-out, stroke 140ms ease-out, stroke-width 140ms var(--aus); }
.rt-sticker:focus-visible .rt-platte { fill: var(--gelb); stroke: var(--gelb); }
.rt-sticker:focus-visible > svg:not(.rt-zeichen), .rt-sticker:focus-visible > span > svg {
--ring: max(2.5px, calc(var(--einheit, 1) * 4px));
filter: drop-shadow(var(--ring) 0 0 var(--gelb)) drop-shadow(calc(-1 * var(--ring)) 0 0 var(--gelb))
drop-shadow(0 var(--ring) 0 var(--gelb)) drop-shadow(0 calc(-1 * var(--ring)) 0 var(--gelb))
drop-shadow(var(--wurf, 3px) var(--wurf, 3px) 0 #000);
}
.rt-klein { --wurf: 2px; }
:is(.rt-sticker, .rt-schild) .rt-tinte { fill: #000; stroke: #000; stroke-width: 3; stroke-linejoin: round; }
:is(.rt-sticker, .rt-schild) .rt-farbe { fill: var(--farbe, var(--weiss)); stroke: #000; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.rt-sticker .rt-band:not(.rt-platte) { fill: var(--schwarz); }
.rt-schild {
display: block;
width: calc(var(--breite) * var(--einheit, 1) * 1px);
max-width: 100%;
height: auto;
overflow: visible;
}
.rt-titel-klein, .rt-frage { margin: 0; padding: 0; line-height: 0; }
.rt-titel-klein { --farbe: var(--gelb); --einheit: 1.45; }
.rt-frage { --farbe: var(--tuerkis); --einheit: .62; }
:is(.rt-titel-klein, .rt-frage) .rt-schild {
margin-left: calc(var(--einheit) * -7px);
max-width: calc(100% + var(--einheit) * 7px);
rotate: -1.5deg;
filter: drop-shadow(3px 3px 0 #000);
}
.rt-frage .rt-schild { rotate: -2.5deg; filter: drop-shadow(2px 2px 0 #000); }
.rt-titel-klein.rt-lang { --einheit: 1.15; }
.rt-lead {
margin: 0;
max-width: 30em;
font: 700 19px/1.4 var(--lauf);
color: var(--weiss);
text-wrap: pretty;
}
.rt-wahl {
margin: 4px 0 0;
padding: 0;
border: 0;
min-width: 0;
}
.rt-wahl legend { margin-bottom: 14px; }
.rt-wahl-reihe {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.rt-wahl-reihe:has(.rt-foto-knopf:not([hidden]), .rt-fahrer-du:not([hidden])) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rt-fahrer {
position: relative;
display: grid;
justify-items: center;
gap: 6px;
padding: 10px 6px 8px;
border-radius: 18px;
border: 2px solid rgb(255 255 255 / .16);
cursor: pointer;
transition: border-color 200ms, transform 300ms var(--federnd), background 200ms;
}
.rt-fahrer input {
appearance: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
}
.rt-fahrer img {
width: 100%;
max-width: 84px;
height: auto;
aspect-ratio: 533 / 660;
transition: transform 300ms var(--federnd);
}
.rt-fahrer { --einheit: .5; --farbe: var(--berry); }
.rt-gefaehrt { --farbe: var(--tuerkis); }
.rt-fahrer .rt-schild {
max-width: calc(100% + 10px);
filter: drop-shadow(2px 2px 0 #000);
rotate: -3deg;
transition: transform 300ms var(--federnd);
}
.rt-wahl-reihe > :nth-child(even) .rt-schild { rotate: 2deg; }
.rt-wahl-reihe > :nth-child(3n) .rt-schild { rotate: -1deg; }
.rt-fahrer:hover { border-color: rgb(255 255 255 / .45); }
.rt-fahrer:hover :is(img, .rt-ding) { transform: rotate(-4deg) scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
.rt-fahrer:hover:not(:has(input:checked)) :is(img, .rt-ding),
.rt-fahrer:has(input:focus-visible:not(:checked)) :is(img, .rt-ding) { animation: rt-hallo 560ms ease-out; }
}
@keyframes rt-hallo {
0%   { transform: none; }
32%  { transform: translateY(-5px) rotate(-10deg) scale(1.06); }
62%  { transform: rotate(-1deg) scale(1.04); }
100% { transform: rotate(-4deg) scale(1.04); }
}
.rt-fahrer:has(input:checked) {
border-color: var(--amber);
background: var(--nacht);
transform: translateY(-3px);
}
.rt-fahrer:has(input:checked) { --farbe: var(--amber); }
.rt-fahrer:has(input:checked) .rt-schild { transform: scale(1.1); }
.rt-fahrer:has(input:checked) :is(img, .rt-ding) { transform: rotate(-6deg) scale(1.08); }
.rt-fahrer:has(input:focus-visible) { border-color: var(--gelb); border-width: 4px; padding: 8px 4px 6px; }
.rt-fahrer .rt-kopf { position: relative; display: block; width: 100%; max-width: 84px; line-height: 0; }
.rt-ding {
position: absolute;
inset: 0;
pointer-events: none;
transition: transform 300ms var(--federnd);
}
.rt-ding > i {
position: absolute;
display: block;
translate: -50% -50%;
background: center / 100% 100% no-repeat;
}
.rt-ding-kamera, .rt-ding-blitz { opacity: 0; }
.rt-ding-maske { transition: transform 280ms var(--federnd); }
.rt-fahrer:has(input:checked) .rt-ding-maske { transform: translateY(var(--hoch)); }
.rt-ding > .rt-ding-z {
font: 900 15px/1 var(--display);
font-style: normal;
color: var(--weiss);
text-shadow: 1.5px 0 var(--schwarz), -1.5px 0 var(--schwarz), 0 1.5px var(--schwarz), 0 -1.5px var(--schwarz);
opacity: 0;
}
.rt-fahrer:has(input:checked) .rt-ding-z { display: none; }
.rt-ding-stift { rotate: -64deg; transform-origin: 12% 50%; }
@media (prefers-reduced-motion: no-preference) {
.rt-fahrer:hover .rt-ding-kamera,
.rt-fahrer:has(input:focus-visible) .rt-ding-kamera { animation: rt-knipsen 1150ms cubic-bezier(.2, .8, .3, 1); }
.rt-fahrer:hover .rt-ding-blitz,
.rt-fahrer:has(input:focus-visible) .rt-ding-blitz { animation: rt-blitz 1150ms ease-out; }
.rt-fahrer:hover:not(:has(input:checked)) .rt-ding-maske { animation: rt-blinzeln 900ms ease-in-out; }
.rt-ding-z { animation: rt-zzz 2.4s linear infinite; }
.rt-fahrer:hover .rt-ding-stift { animation: rt-kritzeln 700ms ease-in-out; }
.rt-fahrer:hover .rt-ding-teeglas,
.rt-fahrer:has(input:focus-visible) .rt-ding-teeglas { animation: rt-schluck 1300ms ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
.rt-ding > .rt-ding-z:nth-of-type(2) { opacity: 1; translate: -50% -50%; }
}
@keyframes rt-knipsen {
0%       { opacity: 0; transform: translateY(70%); }
22%, 72% { opacity: 1; transform: none; }
100%     { opacity: 0; transform: translateY(70%); }
}
@keyframes rt-blitz {
0%, 36% { opacity: 0; transform: scale(.3); }
42%     { opacity: 1; transform: scale(1); }
60%     { opacity: 0; transform: scale(1.5); }
100%    { opacity: 0; }
}
@keyframes rt-blinzeln {
0%, 100% { transform: none; }
30%, 55% { transform: translateY(calc(var(--hoch) * .45)); }
}
@keyframes rt-zzz {
0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
20%  { opacity: 1; }
80%  { opacity: 1; }
100% { opacity: 0; transform: translate(70%, -170%) scale(1.15); }
}
@keyframes rt-kritzeln {
0%, 100% { transform: none; }
20% { transform: rotate(16deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(12deg); }
80% { transform: rotate(-6deg); }
}
@keyframes rt-schluck {
0%, 100% { transform: none; }
32%, 68% { transform: translate(var(--zum-mund-x), var(--zum-mund-y)) rotate(-26deg); }
}
.rt-fahrer[hidden] { display: none; }
@media (scripting: none) {
.rt-foto-knopf { display: none; }
.rt-wahl-reihe:has(.rt-foto-knopf:not([hidden]), .rt-fahrer-du:not([hidden])) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.rt-foto-knopf {
appearance: none;
margin: 0;
background: none;
border-style: dashed;
border-color: rgb(255 255 255 / .38);
color: inherit;
font: inherit;
}
.rt-foto-knopf:focus-visible { outline: none; border: 4px solid var(--gelb); padding: 8px 4px 6px; }
.rt-foto-knopf img { opacity: .78; }
.rt-foto-knopf:hover img { opacity: 1; }
.rt-foto-knopf[aria-busy] img { opacity: 1; animation: rt-schnipp 600ms ease-in-out infinite; }
@keyframes rt-schnipp {
50% { transform: rotate(-8deg) scale(.94); }
}
.rt-fahrer-du img { object-fit: contain; }
.rt-foto-zeile {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 20px;
}
.rt-foto-text {
flex: 1 1 100%;
margin: 10px 0 0;
max-width: 32em;
font: 700 15px/1.4 var(--lauf);
color: rgb(255 255 255 / .82);
text-wrap: pretty;
}
.rt-foto-text:empty { display: none; }
.rt-wahl:is([data-foto="gesicht"], [data-foto="bild"], [data-foto="laden"]) .rt-foto-text { color: var(--amber); }
.rt-foto-tun { display: none; }
.rt-wahl:has(input[value="du"]:checked):not([data-foto="schneidet"]) .rt-foto-tun { display: inline-flex; }
.rt-wahl:has(input[value="du"]:checked) .rt-foto-tun[hidden] { display: none; }
.rt-gefaehrte { display: flex; }
.rt-gefaehrte + .rt-gefaehrte { margin-top: 10px; }
.rt-gefaehrt { flex: 1 1 0; min-width: 0; align-content: end; }
.rt-gefaehrt-bild {
display: block;
width: 100%;
height: 96px;
transform-origin: 50% 100%;
transition: transform 300ms var(--federnd);
}
.rt-gefaehrt:hover .rt-gefaehrt-bild { transform: translateY(-3px); }
.rt-gefaehrt-bild[data-gefaehrt="huckepack"] { --trick: rt-traben; }
.rt-gefaehrt-bild[data-gefaehrt="longboard"] { --trick: rt-rollen; }
.rt-gefaehrt-bild[data-gefaehrt="ziehgor"]   { --trick: rt-steigen; }
.rt-gefaehrt-bild[data-gefaehrt="slammobil"] { --trick: rt-schaukeln; }
.rt-gefaehrt-bild[data-gefaehrt="sofa"]      { --trick: rt-plumpsen; }
.rt-gefaehrt-bild[data-gefaehrt="baellebad"] { --trick: rt-federn; }
.rt-gefaehrt-bild[data-gefaehrt="carl"]      { --trick: rt-wanken; }
.rt-gefaehrt-bild[data-gefaehrt="trottinett"] { --trick: rt-kicken; }
@media (prefers-reduced-motion: no-preference) {
.rt-gefaehrt:hover .rt-gefaehrt-bild,
.rt-gefaehrt:has(input:focus-visible) .rt-gefaehrt-bild,
.rt-gefaehrt:has(input:checked) .rt-gefaehrt-bild { animation: var(--trick) 760ms ease-in-out; }
}
@keyframes rt-traben {
12% { transform: translateY(-7px) rotate(-2deg); }
24% { transform: none; }
38% { transform: translateY(-6px) rotate(2deg); }
50% { transform: none; }
64% { transform: translateY(-4px) rotate(-1.5deg); }
78% { transform: none; }
}
@keyframes rt-rollen {
14% { transform: translateX(-4px) rotate(-1.5deg); }
48% { transform: translateX(11px) rotate(1deg); }
78% { transform: translateX(3px); }
}
@keyframes rt-steigen {
28% { transform: translate(2px, -4px) rotate(-7deg); }
52% { transform: rotate(2deg); }
72% { transform: rotate(-1deg); }
}
@keyframes rt-schaukeln {
16% { transform: rotate(3deg); }
36% { transform: rotate(-2.6deg); }
56% { transform: rotate(1.6deg); }
76% { transform: rotate(-.8deg); }
}
@keyframes rt-plumpsen {
20% { transform: scale(1.07, .88); }
46% { transform: translateY(-5px) scale(.97, 1.05); }
70% { transform: scale(1.02, .97); }
}
@keyframes rt-wanken {
18% { transform: translateY(1px) rotate(-2.4deg); }
42% { transform: rotate(2deg); }
64% { transform: rotate(-1.2deg); }
84% { transform: rotate(.5deg); }
}
@keyframes rt-kicken {
12% { transform: translateX(3px) rotate(-1deg); }
26% { transform: translateX(-1px); }
40% { transform: translateX(8px) rotate(-1deg); }
56% { transform: translateX(4px); }
80% { transform: translateX(14px) rotate(.5deg); }
}
@keyframes rt-federn {
14% { transform: scale(1.06, .9); }
34% { transform: translateY(-10px) scale(.96, 1.06); }
54% { transform: scale(1.05, .94); }
72% { transform: translateY(-4px); }
88% { transform: scale(1.01, .99); }
}
.rt-kann { display: grid; margin-top: 12px; }
.rt-kann p {
grid-area: 1 / 1;
margin: 0;
max-width: 32em;
font: 700 16px/1.4 var(--lauf);
color: rgb(255 255 255 / .82);
text-wrap: pretty;
visibility: hidden;
}
.rt-wahl-gefaehrt:has([value="huckepack"]:checked) [data-fuer="huckepack"],
.rt-wahl-gefaehrt:has([value="longboard"]:checked) [data-fuer="longboard"],
.rt-wahl-gefaehrt:has([value="ziehgor"]:checked) [data-fuer="ziehgor"],
.rt-wahl-gefaehrt:has([value="slammobil"]:checked) [data-fuer="slammobil"],
.rt-wahl-gefaehrt:has([value="sofa"]:checked) [data-fuer="sofa"],
.rt-wahl-gefaehrt:has([value="baellebad"]:checked) [data-fuer="baellebad"],
.rt-wahl-gefaehrt:has([value="carl"]:checked) [data-fuer="carl"],
.rt-wahl-gefaehrt:has([value="trottinett"]:checked) [data-fuer="trottinett"] { visibility: visible; }
.rt-los-zeile {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
}
.rt-leiste {
position: sticky;
bottom: 0;
z-index: 3;
margin-inline: calc(-1 * var(--innen-l)) calc(-1 * var(--innen-r));
padding: 12px var(--innen-r) var(--rand-u) var(--innen-l);
background: var(--schwarz);
}
.rt-leiste::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 24px;
background: linear-gradient(rgb(26 8 54 / 0), var(--schwarz));
pointer-events: none;
}
.rt[data-raum] .rt-los-zeile { position: static; }
.rt[data-raum] .rt-los-zeile::before { display: none; }
.rt-sticker.rt-los {
--einheit: 1.5;
--dreh: -3deg;
--spaet: 780ms;
flex: 0 1 auto;
min-width: 0;
}
.rt-los-zeile .rt-rund { flex: none; }
.rt-los :is(.rt-wort-gleich, .rt-wort-kaputt),
.rt-los:is([data-wort="gleich"], [data-wort="kaputt"]) .rt-wort-los { display: none; }
.rt-los[data-wort="gleich"] .rt-wort-gleich,
.rt-los[data-wort="kaputt"] .rt-wort-kaputt { display: block; }
.rt-los :is(.rt-wort-gleich, .rt-wort-kaputt) { animation-delay: 0ms; }
.rt-los:not(.rt-solo):disabled { cursor: default; }
.rt-los:not(.rt-solo):disabled > svg { opacity: .45; }
.rt-ton .rt-ton-aus { display: none; }
.rt-ton[aria-pressed="false"] .rt-ton-an { display: none; }
.rt-ton[aria-pressed="false"] .rt-ton-aus { display: block; }
.rt-ohne-skript { margin: 0; color: var(--amber); }
.rt-bereit .rt-ohne-skript:not(.rt-fehler) { display: none; }
.rt-steuerung {
margin: 0;
font: 700 15px/1.4 var(--lauf);
color: rgb(255 255 255 / .8);
}
dl.rt-steuerung {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
dl.rt-steuerung div { display: flex; align-items: center; gap: 7px; }
dl.rt-steuerung dt { display: flex; gap: 3px; }
dl.rt-steuerung dd { margin: 0; }
kbd {
display: inline-grid;
place-items: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 6px;
border: 2px solid rgb(255 255 255 / .55);
border-bottom-width: 4px;
font: 900 13px/1 var(--lauf);
color: var(--weiss);
}
kbd svg { width: 14px; height: 14px; }
.rt-steuerung-finger { display: none; max-width: 30em; }
.rt-finger .rt-steuerung-tasten { display: none; }
.rt-finger .rt-steuerung-finger { display: block; }
.rt-hilfe { align-self: flex-start; gap: 6px; --dreh: 1.5deg; }
.rt-tafel-pause .rt-hilfe { margin-top: 4px; }
.rt-hilfe-figur {
align-self: flex-start;
display: flex;
align-items: flex-end;
gap: 0;
margin: 4px 0 -6px;
color: var(--weiss);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.rt-hilfe-valerio {
position: relative;
z-index: 1;
width: 78px;
height: auto;
margin-right: -14px;
transform-origin: 50% 100%;
transition: transform 300ms var(--federnd);
filter: drop-shadow(3px 3px 0 #000);
}
.rt-hilfe-schild { display: grid; justify-items: center; }
.rt-hilfe-kipp { display: grid; justify-items: center; transform-origin: 50% calc(100% - 8px); transition: transform 300ms var(--federnd); }
.rt-hilfe-tafel {
display: grid;
justify-items: center;
gap: 2px;
padding: 9px 16px 8px;
border-radius: 10px;
border: 3px solid var(--weiss);
background: var(--violett);
box-shadow: 3px 3px 0 #000;
--farbe: var(--gelb);
--einheit: .82;
}
.rt-hilfe-tafel .rt-schild { rotate: -2deg; filter: drop-shadow(2px 2px 0 #000); }
.rt-hilfe-unter { font: 900 12px/1.2 var(--lauf); letter-spacing: .05em; text-transform: uppercase; color: var(--weiss); white-space: nowrap; }
.rt-hilfe-pfosten { width: 8px; height: 46px; background: #C8C3DC; box-shadow: 3px 0 0 #000; }
.rt-hilfe-gras { display: block; width: 80px; height: auto; margin-top: -24px; filter: drop-shadow(2px 2px 0 #000); }
.rt-gras-platte { fill: var(--weiss); stroke: var(--weiss); stroke-width: 7; stroke-linejoin: round; }
.rt-gras-hinten { fill: #2F8F45; stroke: #000; stroke-width: 1.6; stroke-linejoin: round; }
.rt-gras-vorn { fill: #57C35A; stroke: #000; stroke-width: 1.6; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
.rt-hilfe-valerio { animation: rt-hilfe-wiegen 3.4s ease-in-out infinite alternate; }
}
@keyframes rt-hilfe-wiegen { from { transform: rotate(-2.5deg); } to { transform: rotate(2deg); } }
@media (hover: hover) {
.rt-hilfe-figur:hover .rt-hilfe-kipp { transform: rotate(-5deg); }
.rt-hilfe-figur:hover .rt-hilfe-valerio { animation: rt-hallo 560ms ease-out; transform: rotate(-4deg) scale(1.04); }
}
.rt-hilfe-figur:active .rt-hilfe-tafel { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.rt-hilfe-figur:focus-visible { outline: none; }
.rt-hilfe-figur:focus-visible .rt-hilfe-tafel { border-color: var(--gelb); border-width: 4px; }
.rt-hilfe-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 12px; }
.rt-wegweiser {
--spitze: 12px;
position: relative;
display: grid;
justify-items: center;
margin: 0 6px -6px auto;
font: 900 13px/1 var(--display);
text-transform: uppercase;
letter-spacing: .02em;
}
.rt-wegweiser ul { position: relative; z-index: 1; display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rt-weg-pfosten {
position: absolute;
top: -9px;
bottom: 14px;
left: calc(50% - 4px);
width: 8px;
border-radius: 4px 4px 0 0;
background: #C8C3DC;
box-shadow: 3px 0 0 #000;
}
.rt-weg-gras { position: relative; z-index: 2; display: block; width: 64px; height: auto; margin-top: 10px; filter: drop-shadow(2px 2px 0 #000); }
.rt-wegweiser li { rotate: var(--dreh, 0deg); filter: drop-shadow(3px 3px 0 #000); }
.rt-wegweiser li:nth-child(1) { --dreh: -2.5deg; }
.rt-wegweiser li:nth-child(2) { --dreh: 2deg; }
.rt-wegweiser li:nth-child(3) { --dreh: -1deg; }
.rt-wegweiser li:nth-child(4) { --dreh: 3deg; }
.rt-wegweiser li:nth-child(5) { --dreh: -2deg; }
.rt-weg-rechts { translate: 7px 0; }
.rt-weg-links { translate: -7px 0; }
.rt-weg {
--rand: 3px;
--kante: var(--weiss);
--grund: var(--violett);
--schrift: var(--weiss);
position: relative;
display: block;
padding: var(--rand);
background: var(--kante);
color: var(--schrift);
text-decoration: none;
transition: transform 220ms var(--federnd);
-webkit-tap-highlight-color: transparent;
}
.rt-weg-tafel { display: block; padding: 6px 10px 5px; background: var(--grund); text-align: center; white-space: nowrap; }
.rt-weg-rechts .rt-weg { clip-path: polygon(0 0, calc(100% - var(--spitze)) 0, 100% 50%, calc(100% - var(--spitze)) 100%, 0 100%); }
.rt-weg-rechts .rt-weg-tafel {
padding-right: calc(10px + var(--spitze));
clip-path: polygon(0 0, calc(100% - var(--spitze) + .5px) 0, calc(100% - var(--rand) * .6) 50%, calc(100% - var(--spitze) + .5px) 100%, 0 100%);
}
.rt-weg-links .rt-weg { clip-path: polygon(var(--spitze) 0, 100% 0, 100% 100%, var(--spitze) 100%, 0 50%); }
.rt-weg-links .rt-weg-tafel {
padding-left: calc(10px + var(--spitze));
clip-path: polygon(calc(var(--spitze) - .5px) 0, 100% 0, 100% 100%, calc(var(--spitze) - .5px) 100%, calc(var(--rand) * .6) 50%);
}
.rt-weg[aria-current] { --grund: var(--gelb); --schrift: var(--schwarz); }
a.rt-weg::before { content: ''; position: absolute; inset: -4px -6px; }
@media (hover: hover) {
.rt-weg-rechts a.rt-weg:hover { transform: translateX(4px) rotate(-2deg); }
.rt-weg-links a.rt-weg:hover { transform: translateX(-4px) rotate(2deg); }
}
a.rt-weg:active { transform: translate(2px, 2px); transition-duration: 60ms; }
a.rt-weg:focus-visible { outline: none; --rand: 5px; --kante: var(--gelb); }
@media (forced-colors: active) {
.rt-weg { forced-color-adjust: none; --kante: CanvasText; --grund: Canvas; --schrift: CanvasText; }
.rt-weg[aria-current] { --grund: Highlight; --schrift: HighlightText; }
a.rt-weg:focus-visible { --kante: Highlight; }
}
@media (max-width: 420px) {
.rt-hilfe-zeile { column-gap: 8px; }
.rt-wegweiser { --spitze: 10px; margin-right: 0; font-size: 13px; letter-spacing: 0; }
.rt-wegweiser ul { gap: 14px; }
.rt-wegweiser li { rotate: calc(var(--dreh) / 2); }
.rt-weg-tafel { padding: 7px 6px 6px; }
.rt-weg-rechts { translate: 4px 0; }
.rt-weg-links { translate: -4px 0; }
a.rt-weg::before { inset: -6px -4px; }
}
.rt-heim { align-self: flex-start; gap: 6px; }
.rt-heim .rt-zeichen { width: 18px; height: 18px; transition: transform 200ms var(--aus); }
.rt-heim:hover .rt-zeichen { transform: translateX(-4px); }
.rt-tafel-pause, .rt-tafel-ziel, .rt-tafel-bestzeiten { background: rgb(26 8 54 / .72); }
.rt-tafel-pause, .rt-tafel-ziel, .rt-tafel-bestzeiten, .rt-tafel-meldung {
padding: 64px 0 16px;
overflow-x: hidden;
animation: rt-licht-runter 240ms ease-out both;
}
@keyframes rt-licht-runter { from { background-color: transparent; } }
.rt-tafel-bestzeiten { background: rgb(54 23 82 / .88); }
.rt-tafel-pause .rt-tafel-innen,
.rt-tafel-ziel .rt-tafel-innen,
.rt-tafel-bestzeiten .rt-tafel-innen {
width: min(100% - 32px, 34rem);
margin: auto;
background: var(--schwarz);
border-radius: 28px;
padding: 36px 32px 32px;
display: grid;
gap: 18px;
justify-items: start;
--nicken: 5deg;
transform-origin: 50% 100%;
animation: rt-vorfahren 620ms both;
}
@keyframes rt-vorfahren {
0%   { transform: translateX(calc(50vw + 50% + 40px)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
58%  { transform: translateX(-12px) skewX(var(--nicken)); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
80%  { transform: translateX(3px) skewX(calc(var(--nicken) * -.35)); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
100% { transform: none; }
}
@keyframes rt-wegfahren {
0%   { transform: none; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
20%  { transform: translateX(12px) skewX(calc(var(--nicken) * .4)); animation-timing-function: cubic-bezier(.5, 0, .85, .4); }
100% { transform: translateX(calc(-50vw - 50% - 40px)) skewX(calc(var(--nicken) * -1)); }
}
.rt-tafel.rt-faehrt-weg { pointer-events: none; animation: rt-licht-an 300ms 120ms ease-in both; }
.rt-tafel.rt-faehrt-weg .rt-tafel-innen { animation: rt-wegfahren 440ms both; }
@keyframes rt-licht-an { to { background-color: transparent; } }
.rt-tafel-bestzeiten .rt-tafel-innen { --nicken: 3deg; }
.rt-hoff-knopf {
position: absolute;
z-index: 21;
padding: 0;
border: 0;
border-radius: 18px;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.rt-hoff-knopf[hidden] { display: none; }
.rt-tafel-konzert {
display: block;
z-index: 22;
overflow: hidden;
background: #150630;
animation: rt-konzert-auf 320ms ease-out both;
}
@keyframes rt-konzert-auf { from { opacity: 0; } }
.rt-tafel-konzert.rt-faehrt-weg { animation: rt-konzert-zu 300ms ease-in both; }
@keyframes rt-konzert-zu { to { opacity: 0; } }
.rt-konzert-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rt-konzert-kopf {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 14px 28px;
padding: calc(var(--rand-o) + 22px) var(--rand-r) 0 var(--rand);
}
.rt-konzert-text { display: grid; gap: 8px; max-width: 30rem; }
.rt-konzert-text .rt-lead { font-size: 17px; text-shadow: 0 2px 0 #150630; }
.rt-konzert-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.rt-konzert-knoepfe > .rt-sticker:nth-child(odd) { --dreh: 1.5deg; }
.rt-konzert-knoepfe > .rt-sticker:nth-child(even) { --dreh: -2deg; }
.rt-tafel-ziel .rt-tafel-innen { --nicken: 0deg; }
.rt-stand {
margin: -2px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 24px;
font: 900 14px/1.1 var(--lauf);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tuerkis);
}
.rt-stand[hidden] { display: none; }
.rt-stand > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rt-stand b { --farbe: var(--weiss); --einheit: .78; display: block; line-height: 0; }
.rt-stand b .rt-schild { filter: drop-shadow(2px 2px 0 #000); }
.rt-stand > span:nth-child(odd) b .rt-schild { rotate: -2deg; }
.rt-stand > span:nth-child(even) b .rt-schild { rotate: 1.5deg; }
.rt-neue-bestzeit {
--farbe: var(--gelb);
--einheit: .6;
--dreh: -6deg;
display: block;
line-height: 0;
transform: rotate(var(--dreh));
filter: drop-shadow(3px 3px 0 #000);
animation: rt-tafel-klatsch 600ms 760ms var(--federnd) both;
}
.rt-knopf-reihe { display: grid; justify-items: start; gap: 18px; margin-top: 6px; }
.rt-knopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.rt-knopf-reihe > .rt-sticker { --dreh: -2deg; }
.rt-knopf-zeile > .rt-sticker:nth-child(odd) { --dreh: 1.5deg; }
.rt-knopf-zeile > .rt-sticker:nth-child(even) { --dreh: -1.5deg; }
.rt-kappe {
height: 24px;
border-color: currentColor;
border-width: 2px 2px 3px;
font-size: 12px;
color: inherit;
vertical-align: 2px;
}
@media (pointer: coarse) { .rt-kappe { display: none; } }
.rt-ton-schalter { gap: 8px; }
.rt-ton-schalter[data-an="true"] .rt-ton-aus,
.rt-ton-schalter[data-an="false"] .rt-ton-an { display: none; }
.rt-tafel-ziel .rt-titel-klein { padding-right: 120px; }
.rt-tafel-ziel .rt-titel-klein + .rt-lead { padding-right: 96px; }
.rt-tafel-meldung .rt-titel-klein { padding-right: 64px; }
.rt-ziel-sticker, .rt-tafel-sticker {
--dreh: 9deg;
position: absolute;
top: -64px;
right: -40px;
width: 170px;
transform: rotate(var(--dreh));
filter: drop-shadow(3px 3px 0 #000);
animation: rt-tafel-klatsch 680ms 400ms var(--federnd) both;
pointer-events: none;
}
.rt-tafel-sticker:not([src]) { display: none; }
.rt-pause-sticker { --dreh: -9deg; top: -52px; right: -24px; width: 122px; }
.rt-meldung-sticker { --dreh: 7deg; top: -60px; right: -30px; width: 132px; }
@keyframes rt-tafel-klatsch {
0%  { transform: scale(1.8) rotate(calc(var(--dreh) * -1.4)); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.03, .9) rotate(var(--dreh)); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
}
.rt-rangliste {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: grid;
gap: 6px;
counter-reset: platz;
}
.rt-rangliste:empty { display: none; }
.rt-rangliste li {
counter-increment: platz;
display: grid;
grid-template-columns: 2.2em 44px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 6px 14px 6px 10px;
overflow-wrap: anywhere;
border-radius: 14px;
background: var(--nacht);
font: 900 18px/1.1 var(--lauf);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.rt-rangliste li::before {
content: counter(platz) '.';
font: 900 24px/1 var(--display);
color: var(--tuerkis);
}
.rt-rangliste li.rt-du { background: var(--amber); color: var(--violett); }
.rt-rangliste li.rt-du::before { color: var(--violett); }
.rt-rangliste img { width: 44px; height: auto; }
.rt-rangliste small {
display: block;
margin-top: 3px;
font: 700 13px/1 var(--lauf);
text-transform: none;
opacity: .75;
}
.rt-rangliste .rt-zeit { font-weight: 700; opacity: .85; }
.rt-wm { margin: 0; font: 700 17px/1.45 var(--lauf); color: rgb(255 255 255 / .85); }
.rt-wm a {
color: var(--tuerkis);
font-weight: 900;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.rt-wm a:hover { color: var(--gelb); }
.rt-eintrag { display: grid; gap: 10px; width: 100%; }
.rt-eintrag[hidden], .rt-bestzeit-stand[hidden] { display: none; }
.rt-eintrag-frage, .rt-bestzeit-stand {
margin: 0;
font: 900 16px/1.3 var(--lauf);
text-transform: uppercase;
color: var(--tuerkis);
text-wrap: pretty;
}
.rt-eintrag-zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.rt-name {
appearance: none;
width: 100%;
min-width: 0;
min-height: 52px;
margin: 0;
padding: 0 20px;
border-radius: var(--r-kapsel);
border: 2px solid rgb(255 255 255 / .45);
background: var(--nacht);
color: var(--weiss);
font: 900 18px/1.2 var(--lauf);
user-select: text;
-webkit-user-select: text;
transition: border-color 200ms;
}
.rt-name:hover { border-color: rgb(255 255 255 / .75); }
.rt-name:focus, .rt-name:focus-visible { outline: none; border: 4px solid var(--gelb); padding: 0 18px; }
.rt-eintrag-meldung { margin: 0; font: 700 15px/1.4 var(--lauf); color: var(--amber); }
.rt-eintrag-meldung:empty { display: none; }
.rt-bestenliste { gap: 4px; }
@media (min-width: 1000px) {
.rt-tafel-bestzeiten .rt-tafel-innen:has(.rt-zwei) { width: min(100% - 32px, 62rem); }
.rt-bestenliste.rt-zwei {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(10, auto);
grid-auto-flow: column;
column-gap: 16px;
}
}
.rt-bestenliste li {
grid-template-columns: 2.2em 30px minmax(0, 1fr) auto;
padding: 4px 14px 4px 10px;
font-size: 16px;
}
.rt-bestenliste li::before { font-size: 20px; }
.rt-bestenliste img { width: 30px; }
.rt-bestenliste li span:not(.rt-zeit) { overflow-wrap: anywhere; }
.rt-bestenliste li.rt-du { animation: rt-eingetragen 600ms 300ms var(--federnd) both; }
@keyframes rt-eingetragen { from { transform: scale(1.08) rotate(-2deg); } }
.rt-tafel-ziel[inert]:not(.rt-faehrt-weg) .rt-tafel-innen { visibility: hidden; }
.rt-hud {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
}
.rt-hud[hidden] { display: none; }
.rt-hud button { pointer-events: auto; }
.rt-links {
position: absolute;
top: var(--rand-o);
left: var(--rand);
display: flex;
align-items: flex-start;
gap: 10px;
}
.rt-links .rt-stand { display: grid; justify-items: start; gap: 2px; margin: 0; }
.rt-platz { margin: 0; line-height: 0; --farbe: var(--gelb); }
.rt-platz .rt-schild {
width: calc(var(--breite) * clamp(1.6px, .29vw, 3.4px));
rotate: -3deg;
filter: drop-shadow(3px 3px 0 #000);
transform-origin: 30% 70%;
animation: rt-platz 480ms var(--federnd);
}
.rt-platz .rt-farbe text:last-child { fill: var(--weiss); }
@keyframes rt-platz { 0% { transform: scale(1.5) rotate(-8deg); } }
.rt-rennzeit { margin: 0 0 0 6px; line-height: 0; --farbe: var(--weiss); }
.rt-rennzeit .rt-schild { width: calc(var(--breite) * clamp(.58px, .064vw, .78px)); rotate: 1.5deg; filter: drop-shadow(2px 2px 0 #000); }
.rt-kaffee {
width: clamp(44px, 5vw, 58px);
margin-top: 4px;
opacity: 0;
transform: scale(.4) rotate(-20deg);
transform-origin: 50% 90%;
transition: opacity 220ms, transform 220ms ease-in;
filter: drop-shadow(0 3px 0 rgb(26 8 54 / .6));
}
.rt-kaffee.rt-an { opacity: 1; transform: none; transition: opacity 160ms, transform 420ms var(--federnd); }
.rt-kaffee svg { display: block; width: 100%; height: auto; overflow: visible; }
.rt-kaffee-teller, .rt-kaffee-koerper { fill: var(--weiss); stroke: var(--schwarz); stroke-width: 3.2; }
.rt-kaffee-henkel { fill: none; stroke: var(--schwarz); stroke-width: 8.5; stroke-linecap: round; }
.rt-kaffee-henkel-innen { fill: none; stroke: var(--weiss); stroke-width: 3.5; stroke-linecap: round; }
.rt-kaffee-kaffee { fill: #6B3A1E; }
.rt-kaffee-crema { fill: #C8955A; }
.rt-kaffee-rand { fill: none; stroke: var(--schwarz); stroke-width: 3.2; stroke-linejoin: round; }
.rt-kaffee-dampf path { fill: none; stroke: var(--weiss); stroke-width: 3; stroke-linecap: round; animation: rt-dampf 1.5s ease-out infinite; }
.rt-kaffee-dampf path:nth-child(2) { animation-delay: -.5s; }
.rt-kaffee-dampf path:nth-child(3) { animation-delay: -1s; }
.rt-kaffee:not(.rt-an) .rt-kaffee-dampf path { animation: none; }
@keyframes rt-dampf {
0% { opacity: 0; transform: translateY(5px); }
35% { opacity: 1; }
100% { opacity: 0; transform: translateY(-5px); }
}
.rt-kaffee.rt-schwapp svg { animation: rt-schwapp 520ms var(--federnd); transform-origin: 50% 90%; }
@keyframes rt-schwapp { 0% { transform: rotate(-14deg); } 40% { transform: rotate(9deg); } }
.rt-karte {
position: absolute;
top: var(--rand-o);
left: 50%;
translate: -50% 0;
width: min(340px, 42vw);
padding: 6px 10px 8px;
border-radius: 18px;
background: rgb(26 8 54 / .9);
border: 2px solid rgb(255 255 255 / .22);
display: grid;
gap: 2px;
}
.rt-karte-bild { width: 100%; height: auto; display: block; overflow: visible; }
.rt-karte-text {
margin: 0;
display: flex;
justify-content: space-between;
gap: 8px;
font: 900 13px/1.2 var(--lauf);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#rt-etappe { color: var(--gelb); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rt-km { color: rgb(255 255 255 / .85); }
.rt-rechts {
position: absolute;
top: var(--rand-o);
right: var(--rand-r);
display: flex;
align-items: flex-start;
gap: 10px;
}
.rt-item {
position: relative;
width: 88px;
height: 88px;
border-radius: 26px;
background: rgb(26 8 54 / .78);
border: 3px solid var(--weiss);
display: grid;
place-items: center;
}
.rt-item canvas { width: 72px; height: 72px; }
.rt-item-name {
--farbe: var(--amber);
--einheit: .46;
position: absolute;
bottom: -14px;
left: 50%;
translate: -50% 0;
line-height: 0;
white-space: nowrap;
}
.rt-item-name .rt-schild { max-width: none; rotate: -4deg; filter: drop-shadow(2px 2px 0 #000); }
.rt-item-name:empty { display: none; }
.rt-item.rt-voll { border-color: var(--amber); animation: rt-item 420ms var(--federnd); }
@keyframes rt-item { 0% { transform: scale(1.25) rotate(6deg); } }
.rt-item.rt-vorrat { width: 60px; height: 60px; border-radius: 20px; border-width: 2px; }
.rt-vorrat[hidden] { display: none; }
.rt-item.rt-vorrat canvas { width: 48px; height: 48px; }
.rt-pause-knopf { width: 48px; height: 48px; border-color: rgb(255 255 255 / .6); background: rgb(26 8 54 / .78); }
.rt-tasten {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0 var(--rand-r) var(--rand-u) var(--rand);
justify-content: space-between;
align-items: flex-end;
}
.rt-finger .rt-tasten { display: flex; }
.rt-tasten-lenken { display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; touch-action: none; }
.rt-tasten-tun {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: ". drift" "bremse wurf";
gap: 10px;
align-items: end;
justify-items: center;
}
.rt-taste-drift { grid-area: drift; }
.rt-taste-wurf { grid-area: wurf; }
.rt-taste-bremse { grid-area: bremse; }
.rt-taste {
appearance: none;
width: 76px;
height: 76px;
border-radius: 50%;
border: 3px solid rgb(255 255 255 / .75);
background: rgb(26 8 54 / .55);
color: var(--weiss);
font: 900 14px/1 var(--lauf);
text-transform: uppercase;
display: grid;
place-items: center;
padding: 0;
touch-action: none;
transition: transform 90ms, background 90ms;
}
.rt-taste svg { width: 38px; height: 38px; }
.rt-taste.rt-gedrueckt {
background: var(--amber);
border-color: var(--amber);
color: var(--violett);
transform: scale(.94);
}
.rt-taste-wurf { width: 88px; height: 88px; border-color: var(--amber); color: var(--amber); }
.rt-taste-drift { border-color: var(--tuerkis); color: var(--tuerkis); }
.rt-taste-bremse { width: 58px; height: 58px; }
.rt-taste-bremse svg { width: 30px; height: 30px; }
.rt-ansage {
position: absolute;
inset: 0;
z-index: 12;
display: grid;
place-items: center;
pointer-events: none;
}
.rt-ruf {
--farbe: var(--gelb);
--pro: clamp(3px, .667vw, 7.3px);
grid-area: 1 / 1;
line-height: 0;
animation: rt-ruf 900ms var(--federnd) both;
}
.rt-ruf .rt-schild { width: calc(var(--breite) * var(--pro)); max-width: calc(100vw - 32px); filter: drop-shadow(5px 5px 0 #000); }
.rt-ruf-los { --farbe: var(--tuerkis); }
.rt-ruf-party { --farbe: var(--magenta); --pro: clamp(1.33px, .3vw, 3.7px); }
.rt-ruf-wort { --pro: clamp(1.6px, .367vw, 4.6px); }
@keyframes rt-ruf {
0%   { transform: scale(2.2) rotate(-10deg); opacity: 0; }
30%  { transform: scale(1) rotate(-3deg); opacity: 1; }
75%  { transform: scale(1) rotate(-3deg); opacity: 1; }
100% { transform: scale(.7) rotate(-3deg); opacity: 0; }
}
.rt-etappe {
grid-area: 1 / 1;
align-self: start;
margin-top: calc(var(--rand-o) + 196px);
display: grid;
justify-items: center;
gap: 2px;
line-height: 0;
animation: rt-etappe 3200ms var(--aus) both;
}
.rt-etappe .rt-schild { --farbe: var(--weiss); width: calc(var(--breite) * clamp(1.33px, .233vw, 2.8px)); max-width: calc(100vw - 32px); rotate: -2deg; filter: drop-shadow(4px 4px 0 #000); }
.rt-etappe .rt-schild + .rt-schild { --farbe: var(--gelb); width: calc(var(--breite) * clamp(.56px, .08vw, .85px)); rotate: 1deg; filter: drop-shadow(2px 2px 0 #000); }
@keyframes rt-etappe {
0%   { transform: translateY(-16px); opacity: 0; clip-path: inset(0 100% 0 0); }
14%  { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }
82%  { transform: none; opacity: 1; }
100% { transform: translateY(-10px); opacity: 0; }
}
.rt-klebestelle {
position: absolute;
inset: 0;
z-index: 13;
pointer-events: none;
}
.rt-klebe {
position: absolute;
width: clamp(120px, 20vw, 220px);
filter: drop-shadow(3px 3px 0 #000);
animation: rt-klatsch 1700ms var(--federnd) both;
}
@keyframes rt-klatsch {
0%   { transform: scale(1.7) rotate(calc(var(--dreh, 8deg) * -2)); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
14%  { transform: scale(1.02, .9) rotate(var(--dreh, 8deg)); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
22%  { transform: scale(1) rotate(var(--dreh, 8deg)); opacity: 1; }
80%  { transform: scale(1) rotate(var(--dreh, 8deg)); opacity: 1; }
100% { transform: scale(.94) rotate(var(--dreh, 8deg)); opacity: 0; }
}
.rt-zielfoto {
margin: 4px 0 0;
width: 100%;
display: grid;
justify-items: end;
gap: 12px;
}
.rt-zielfoto[hidden] { display: none; }
.rt-zielfoto-bild {
display: block;
width: 100%;
height: auto;
transform: rotate(-1.2deg);
filter: drop-shadow(3px 3px 0 #000);
animation: rt-zielfoto-druck 640ms 120ms var(--federnd) both;
}
@keyframes rt-zielfoto-druck {
0%  { transform: translateY(-16px) scale(1.1) rotate(-6deg); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.01, .96) rotate(-1.2deg); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
}
.rt[data-tanz] .rt-hud { opacity: 0; visibility: hidden; pointer-events: none; }
.rt[data-tanz] .rt-hud * { pointer-events: none; }
.rt-tanz-weiter {
position: absolute;
right: var(--rand-r);
bottom: var(--rand-u);
z-index: 14;
--dreh: -3deg;
animation: rt-anzeige-unten 420ms 900ms var(--aus) both;
}
.rt-tanz-weiter[hidden] { display: none; }
.rt-tanz {
margin: 4px 0 0;
width: 100%;
display: grid;
justify-items: end;
gap: 12px;
}
.rt-tanz[hidden] { display: none; }
.rt-tanz-bilder {
width: 100%;
display: grid;
grid-template-columns: 45fr 64fr;
gap: 16px;
align-items: center;
}
.rt-tanz-ohne-video .rt-tanz-bilder { grid-template-columns: minmax(0, 1fr); width: min(100%, 300px); justify-self: center; }
.rt-tanz-film { position: relative; transform: rotate(1.6deg); }
.rt-tanz-film[hidden] { display: none; }
.rt-tanz-video {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
background: var(--schwarz);
border: 7px solid var(--weiss);
border-radius: 18px;
filter: drop-shadow(3px 3px 0 #000);
animation: rt-tanz-druck 640ms 260ms var(--federnd) both;
}
.rt-tanz-foto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
transform: rotate(-1.2deg);
filter: drop-shadow(3px 3px 0 #000);
animation: rt-zielfoto-druck 640ms 120ms var(--federnd) both;
}
@keyframes rt-tanz-druck {
0%  { transform: translateY(-16px) scale(1.1) rotate(6deg); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.01, .96); opacity: 1; filter: drop-shadow(3px 3px 0 #000); }
}
.rt-tanz-ton {
appearance: none;
position: absolute;
right: 12px;
top: 12px;
width: 44px;
height: 44px;
padding: 0;
display: grid;
place-items: center;
border: 2px solid var(--weiss);
border-radius: 50%;
background: rgb(26 8 54 / .72);
color: var(--weiss);
cursor: pointer;
}
@media (hover: hover) { .rt-tanz-ton:hover { color: var(--gelb); border-color: var(--gelb); } }
.rt-tanz-ton svg { width: 24px; height: 24px; overflow: visible; }
.rt-tanz-ton-box { fill: currentColor; }
.rt-tanz-ton-an, .rt-tanz-ton-aus { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.rt-tanz-ton[aria-pressed="false"] .rt-tanz-ton-an,
.rt-tanz-ton[aria-pressed="true"] .rt-tanz-ton-aus { display: none; }
.rt-tanz-halt { right: auto; left: 12px; }
.rt-tanz-halt path { fill: currentColor; }
.rt-tanz-halt[data-laeuft="true"] .rt-tanz-halt-spiel,
.rt-tanz-halt[data-laeuft="false"] .rt-tanz-halt-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
.rt-tanz-video, .rt-tanz-foto, .rt-tanz-weiter { animation: none; }
}
.rt-kippen { --dreh: -1.5deg; align-self: flex-start; }
.rt-kippen[aria-pressed="true"] { --farbe: var(--amber); }
.rt-karte, .rt-rechts, .rt-tasten { transition: opacity 420ms var(--aus); }
.rt-abfahrt .rt-links, .rt-abfahrt .rt-karte, .rt-abfahrt .rt-rechts { animation: rt-anzeige-oben 420ms 260ms var(--aus) both; }
.rt-abfahrt .rt-karte { animation-delay: 300ms; }
.rt-abfahrt .rt-rechts { animation-delay: 340ms; }
.rt-abfahrt .rt-tasten { animation: rt-anzeige-unten 420ms 320ms var(--aus) both; }
@keyframes rt-anzeige-oben { from { transform: translateY(-28px); opacity: 0; } }
@keyframes rt-anzeige-unten { from { transform: translateY(36px); opacity: 0; } }
.rt[data-finale] .rt-karte,
.rt[data-finale] .rt-rechts,
.rt[data-finale] .rt-tasten,
.rt[data-finale] .rt-tasten * { opacity: 0; pointer-events: none; }
.rt[data-finale] .rt-rechts,
.rt[data-finale] .rt-tasten { visibility: hidden; transition: opacity 420ms var(--aus), visibility 0s 420ms; }
@media (prefers-reduced-motion: reduce) {
.rt-zielfoto-bild { animation: none; }
}
.rt:not([data-raum]):not([data-fernseher]) .rt-nur-raum,
.rt[data-fernseher] .rt-nur-raum:not(.rt-auch-fs),
.rt[data-fernseher] .rt-solo:not(.rt-auch-fs),
.rt[data-raum] .rt-solo,
.rt[data-raum="gast"] .rt-nur-gastgeber { display: none !important; }
.rt-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.rt[data-raum] .rt-titel {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.rt-raum { display: grid; gap: 14px; }
.rt-raum-titel { --einheit: 1.3; }
.rt-raum-text { margin: 0; max-width: 30em; font: 700 18px/1.4 var(--lauf); color: var(--weiss); text-wrap: pretty; }
.rt-raum-name { display: flex; align-items: center; gap: 12px; }
.rt-raum-name .rt-name { max-width: 17rem; min-height: 46px; }
.rt-raum-name .rt-name::placeholder { color: rgb(255 255 255 / .55); }
.rt-raum-foto { display: flex; align-items: center; gap: 14px; }
.rt-raum-foto[hidden] { display: none; }
.rt-raum-foto-kopf { flex: none; width: 52px; height: auto; aspect-ratio: 533 / 660; object-fit: contain; transform: rotate(-6deg); }
.rt-raum-foto[data-an="nein"] .rt-raum-foto-kopf { opacity: .6; }
.rt-raum-foto-text { margin: 0; max-width: 30em; font: 700 15px/1.4 var(--lauf); color: rgb(255 255 255 / .82); text-wrap: pretty; }
.rt-raum-foto:is([data-foto="gesicht"], [data-foto="bild"], [data-foto="laden"]) .rt-raum-foto-text { color: var(--amber); }
.rt-raum-foto .rt-sticker { margin: 10px 22px 0 0; }
.rt-bogen { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.rt-bogen-blatt {
--spur: color-mix(in oklab, var(--gelb), var(--weiss) 62%);
--stanze: color-mix(in oklab, var(--gelb), var(--schwarz) 24%);
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 4px 10px;
margin: 2px 6px 6px 0;
padding: 18px 16px 10px;
border-radius: 14px;
background: var(--gelb);
color: var(--schwarz);
transform: rotate(-1.2deg);
box-shadow: 6px 6px 0 var(--rot);
}
.rt-bogen-platz {
position: relative;
display: grid;
justify-items: center;
align-content: end;
gap: 4px;
padding: 2px;
border-radius: 14px;
cursor: pointer;
}
.rt-bogen-platz input { position: absolute; opacity: 0; pointer-events: none; }
.rt-bogen-platz:has(input:disabled) { cursor: default; }
.rt-bogen-platz:has(input:focus-visible) { outline: 3px solid var(--schwarz); outline-offset: 2px; }
.rt-bogen-kopf, .rt-spur, .rt-spur-name {
grid-area: 1 / 1;
width: min(100%, 108px);
aspect-ratio: 332 / 394;
}
.rt-bogen-kopf {
display: block;
height: auto;
object-fit: contain;
filter: drop-shadow(3px 3px 0 var(--schwarz));
transform-origin: 50% 60%;
transition: transform 220ms var(--aus), filter 220ms var(--aus);
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
touch-action: pan-y;
}
.rt-bogen-platz:not(:has(input:disabled)):hover .rt-bogen-kopf {
transform: translate(-1px, -3px) rotate(-3deg);
filter: drop-shadow(6px 6px 0 var(--schwarz));
}
.rt-bogen-platz[data-stand="hebt"] .rt-bogen-kopf {
transform: translate(-3px, -9px) rotate(-7deg) scale(1.06);
filter: drop-shadow(14px 14px 0 var(--schwarz));
}
.rt-spur {
position: relative;
visibility: hidden;
filter: drop-shadow(1.5px 0 0 var(--stanze)) drop-shadow(-1.5px 0 0 var(--stanze)) drop-shadow(0 1.5px 0 var(--stanze)) drop-shadow(0 -1.5px 0 var(--stanze));
}
.rt-spur::before {
content: '';
position: absolute;
inset: 0;
background: var(--spur);
-webkit-mask: var(--form) center / contain no-repeat;
mask: var(--form) center / contain no-repeat;
}
.rt-spur-name {
display: grid;
place-items: center;
padding: 0 4px;
visibility: hidden;
font: 900 15px/1.05 var(--lauf);
text-transform: uppercase;
text-align: center;
color: var(--vorhang);
overflow-wrap: anywhere;
transform: rotate(-8deg);
pointer-events: none;
}
.rt-spur-name[data-lang="lang"] { font-size: 13px; hyphens: auto; }
.rt-spur-name[data-lang="sehr"] { font-size: 11px; hyphens: auto; }
.rt-bogen-platz:is([data-stand="weg"], [data-stand="kommt"], [data-stand="hand"]) .rt-bogen-kopf { visibility: hidden; }
.rt-bogen-platz:is([data-stand="weg"], [data-stand="kommt"], [data-stand="hand"]) :is(.rt-spur, .rt-spur-name) { visibility: visible; }
.rt-bogen-name {
font: 900 13px/1 var(--lauf);
text-transform: uppercase;
color: var(--vorhang);
}
.rt-bogen-kopf.rt-andruck { animation: rt-andruck 420ms var(--federnd); }
@keyframes rt-andruck {
0% { transform: translateY(-10px) rotate(-6deg) scale(1.08); filter: drop-shadow(14px 14px 0 var(--schwarz)); }
55% { transform: scale(1.04, .92); filter: drop-shadow(3px 3px 0 var(--schwarz)); }
}
.rt-bogen-kopf.rt-zu-spaet { animation: rt-zu-spaet 560ms var(--aus); }
@keyframes rt-zu-spaet {
0% { transform: translate(-3px, -9px) rotate(-7deg) scale(1.06); filter: drop-shadow(14px 14px 0 var(--schwarz)); }
28% { transform: rotate(5deg) scale(1.03, .93); filter: drop-shadow(3px 3px 0 var(--schwarz)); }
48% { transform: rotate(-4deg); }
68% { transform: rotate(2deg); }
}
.rt-bogen-druck {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin: 8px 0 0;
padding-top: 8px;
border-top: 3px dotted var(--stanze);   
font: 900 13px/1.2 var(--lauf);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--vorhang);
}
.rt-bogen-druck b { font-size: 19px; letter-spacing: .16em; color: var(--schwarz); }
.rt-bogen-druck span:last-child { white-space: nowrap; }
.rt-flug {
position: fixed;
z-index: 60;
height: auto;
pointer-events: none;
transform-origin: 50% 50%;
filter: drop-shadow(14px 14px 0 var(--schwarz));
will-change: transform;
}
.rt-flug-hand { transform: scale(1.08); }
.rt-flug-platte canvas { display: block; width: 100%; height: auto; }
.rt-flug-platte img { position: absolute; }
.rt-raum-fuss { display: grid; gap: 10px; }
.rt-raum-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#rt-teilen { --dreh: 2deg; }
.rt-raum-stand, .rt-ziel-warten { margin: 0; font: 900 16px/1.35 var(--lauf); color: var(--tuerkis); text-wrap: pretty; }
.rt-raum-stand:empty, .rt-ziel-warten:empty { display: none; }
.rt-tafel-meldung { background: rgb(54 23 82 / .88); }
.rt-tafel-meldung .rt-tafel-innen {
width: min(100% - 32px, 34rem);
margin: auto;
background: var(--schwarz);
border-radius: 28px;
padding: 36px 32px 32px;
display: grid;
gap: 18px;
justify-items: start;
--nicken: 0deg;
animation: rt-ausrollen 760ms var(--aus) both;
}
@keyframes rt-ausrollen { from { transform: translateX(calc(50vw + 50% + 40px)); } }
.rt[data-zustand="meldung"] .rt-hud { display: none; }
.rt-zuschauen {
position: absolute;
left: 50%;
bottom: var(--rand-u);
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
max-width: calc(100% - 32px);
padding: 8px 10px 8px 20px;
border-radius: var(--r-kapsel);
background: var(--schwarz);
border: 2px solid rgb(255 255 255 / .3);
pointer-events: auto;
}
.rt-zuschauen[hidden] { display: none; }
.rt-zuschauen-text { margin: 0; font: 900 15px/1.25 var(--lauf); color: var(--weiss); text-wrap: balance; }
.rt-zuschauen-koepfe { display: flex; gap: 6px; flex: none; }
.rt-zuschauen-kopf {
appearance: none;
width: 46px;
height: 46px;
padding: 4px;
border-radius: 50%;
border: 2px solid rgb(255 255 255 / .3);
background: var(--nacht);
cursor: pointer;
}
.rt-zuschauen-kopf img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rt-zuschauen-kopf[aria-pressed="true"] { border: 4px solid var(--gelb); padding: 2px; }
.rt-zuschauen-kopf:focus-visible { outline: none; border: 4px solid var(--weiss); padding: 2px; }
.rt-zuschauen-kopf[aria-pressed="true"]:focus-visible { border-color: var(--gelb); background: rgb(253 255 85 / .3); }
.rt[data-zuschauer] .rt-tasten, .rt[data-zuschauer] .rt-item { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
.rt[data-zustand="start"] .rt-bild { height: calc(30vh - 10px); }
.rt-spiel::before { left: 0; bottom: auto; height: calc(30vh - 10px); }
.rt[data-zustand="start"] .rt-tafel-start, .rt.rt-abfahrt .rt-tafel-start {
top: calc(30vh - 10px);
border-radius: 28px 28px 0 0;
background: var(--schwarz);
}
.rt-tafel-start .rt-tafel-innen, .rt-tafel-start.rt-faehrt-ab .rt-tafel-innen { animation: none; }
.rt[data-zustand="start"] .rt-tafel-start .rt-tafel-innen,
.rt.rt-abfahrt .rt-tafel-start .rt-tafel-innen { margin-top: 0; border-radius: 0; }
.rt[data-zustand="start"] .rt-tafel-start .rt-tafel-innen::after,
.rt.rt-abfahrt .rt-tafel-start .rt-tafel-innen::after { display: none; }
.rt[data-zustand="start"] .rt-tafel-start, .rt[data-zustand="start"] .rt-spiel::after { animation: rt-rein-hoch 600ms var(--aus) both; }
.rt.rt-abfahrt .rt-tafel-start, .rt.rt-abfahrt .rt-spiel::after { animation: rt-abfahrt-runter 520ms both; }
.rt[data-zustand="start"] .rt-spiel::after, .rt.rt-abfahrt .rt-spiel::after {
content: '';
position: absolute;
z-index: 21;
top: calc(30vh - 22px);
left: 28px;
right: 28px;
height: 12px;
border-radius: 6px 6px 0 0;
background: repeating-linear-gradient(90deg, var(--rot) 0 30px, var(--weiss) 30px 60px);
pointer-events: none;
}
@keyframes rt-rein-hoch { from { transform: translateY(75vh); } }
@keyframes rt-abfahrt-runter {
0%   { transform: none; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
18%  { transform: translateY(-10px); animation-timing-function: cubic-bezier(.5, 0, .8, .5); }
100% { transform: translateY(75vh); }
}
.rt-bogen-blatt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; padding: 16px 20px 10px; }
.rt-bogen-kopf, .rt-spur, .rt-spur-name { width: min(100%, 116px); }
.rt-spur-name { font-size: 17px; }
.rt-spur-name[data-lang="lang"] { font-size: 15px; }
.rt-spur-name[data-lang="sehr"] { font-size: 13px; }
.rt-bogen-druck { font-size: 11px; letter-spacing: .02em; }
.rt-raum-text { font-size: 17px; }
.rt-raum-name { flex-wrap: wrap; gap: 6px 12px; }
.rt-raum-name .rt-name { max-width: none; flex: 1 1 12rem; }
.rt-zuschauen { left: var(--rand); right: var(--rand-r); transform: none; max-width: none; flex-wrap: wrap; border-radius: 22px; padding: 10px 12px; }
.rt-tafel-meldung .rt-tafel-innen { padding: 30px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.rt-bogen-kopf.rt-andruck, .rt-bogen-kopf.rt-zu-spaet, .rt-tafel-meldung .rt-tafel-innen { animation: none; }
}
.rt[data-feelgood] .rt-links,
.rt[data-feelgood] .rt-item,
.rt[data-feelgood] .rt-taste-drift,
.rt[data-feelgood] .rt-taste-wurf,
.rt[data-feelgood] .rt-zielfoto,
.rt[data-feelgood] .rt-rangliste,
.rt[data-feelgood] .rt-tafel-ziel [data-tun="bestzeiten"] { display: none; }
.rt[data-zustand="ziel"] .rt-hud,
.rt[data-zustand="start"] .rt-hud,
.rt[data-zustand="ziel"] .rt-tasten { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
.rt-tafel-start .rt-tafel-innen {
--innen-l: var(--rand);
--innen-r: var(--rand-r);
width: 100%;
min-height: 0;
align-self: flex-start;
justify-content: flex-start;
padding: 28px var(--innen-r) calc(var(--rand-u) + 24px) var(--innen-l);
gap: 18px;
}
}
@media (max-width: 700px) {
.rt-lead { font-size: 17px; }
.rt-wahl-reihe { gap: 8px; }
.rt-fahrer { --einheit: .38; }
.rt-wahl-reihe:has(.rt-foto-knopf:not([hidden]), .rt-fahrer-du:not([hidden])) { gap: 6px; }
.rt-wahl-reihe:has(.rt-foto-knopf:not([hidden]), .rt-fahrer-du:not([hidden])) .rt-fahrer { padding-inline: 3px; }
.rt-wahl-reihe:has(.rt-foto-knopf:not([hidden]), .rt-fahrer-du:not([hidden])) .rt-fahrer:is(:has(input:focus-visible), .rt-foto-knopf:focus-visible) { padding-inline: 1px; }
.rt-gefaehrte + .rt-gefaehrte { margin-top: 8px; }
.rt-gefaehrt-bild { height: 84px; }
.rt-kann p { font-size: 15px; }
.rt-item.rt-vorrat { width: 50px; height: 50px; border-radius: 17px; }
.rt-item.rt-vorrat canvas { width: 40px; height: 40px; }
.rt-sticker.rt-los { --einheit: 1.3; }
.rt-titel-klein { --einheit: 1.15; }
.rt-titel-klein.rt-lang { --einheit: .95; }
.rt-raum-titel { --einheit: 1.1; }
.rt-knopf-reihe > .rt-sticker:not(.rt-leise) { --einheit: .85; }
.rt-leise { --einheit: .62; }
.rt-karte { top: calc(var(--rand-o) + 96px); width: min(250px, 62vw); }
.rt-km-lang { display: none; }
.rt-taste { width: 68px; height: 68px; }
.rt-taste-wurf { width: 82px; height: 82px; }
.rt-taste-bremse { width: 54px; height: 54px; }
.rt-tasten-lenken { gap: 10px; }
.rt-item { width: 72px; height: 72px; border-radius: 22px; }
.rt-item canvas { width: 58px; height: 58px; }
.rt-pause-knopf { width: 44px; height: 44px; }
.rt-etappe { margin-top: calc(var(--rand-o) + 262px); }
.rt-tafel-pause .rt-tafel-innen, .rt-tafel-ziel .rt-tafel-innen, .rt-tafel-bestzeiten .rt-tafel-innen { padding: 30px 22px 24px; }
.rt-ziel-sticker { width: 118px; top: -52px; right: -6px; }
.rt-pause-sticker { width: 108px; top: -48px; right: -8px; }
.rt-meldung-sticker { width: 116px; top: -56px; right: -8px; }
.rt-tafel-ziel .rt-titel-klein { padding-right: 96px; }
.rt-tafel-ziel .rt-titel-klein + .rt-lead { padding-right: 0; }
.rt-rangliste li { grid-template-columns: 1.8em 36px minmax(0, 1fr) auto; gap: 8px; font-size: 15px; }
.rt-rangliste img { width: 36px; }
.rt-bestenliste li { grid-template-columns: 1.8em 28px minmax(0, 1fr) auto; font-size: 14px; }
.rt-bestenliste img { width: 28px; }
}
@media (max-height: 520px) and (orientation: landscape) {
.rt-tafel-start .rt-tafel-innen { gap: 12px; padding-top: 16px; padding-bottom: 16px; justify-content: flex-start; }
.rt-titel { width: 130px; }
.rt-modi { flex-direction: row; max-width: none; gap: 6px; }
.rt-modi .rt-sticker { flex: 1 1 0; max-width: 156px; }
.rt-lead { font-size: 16px; }
.rt-fahrer img, .rt-fahrer .rt-kopf { max-width: 52px; }
.rt-gefaehrt-bild { height: 64px; }
.rt-steuerung-finger { display: none !important; }
.rt-platz .rt-schild { width: calc(var(--breite) * 1.85px); }
.rt-karte {
top: calc(var(--rand-o) + 96px);
left: var(--rand);
translate: none;
width: clamp(140px, (100dvh - var(--rand-o) - var(--rand-u) - 182px) / .375 + 16px, min(240px, 32vw));
padding: 4px 6px;
}
.rt-karte-bild, .rt-karte-text { grid-area: 1 / 1; }
.rt-karte-text { align-self: start; flex-direction: column; gap: 0; padding: 2px 0 0 4px; font-size: 12px; }
.rt-karte-bild text { font-size: 14px; }
.rt-km-lang { display: none; }
.rt-etappe { margin-top: calc(var(--rand-o) + 52px); }
.rt-etappe .rt-schild { width: calc(var(--breite) * clamp(1.07px, .173vw, 1.73px)); }
.rt-taste { width: 66px; height: 66px; }
.rt-taste-wurf { width: 76px; height: 76px; }
}
@media (forced-colors: active) {
.rt-fahrer:has(input:checked), .rt-zuschauen-kopf[aria-pressed="true"] { border-color: Highlight; }
.rt-rangliste li.rt-du, .rt-bestenliste li.rt-du { outline: 3px solid Highlight; outline-offset: -3px; }
:is(.rt-schild, .rt-sticker > svg) { forced-color-adjust: none; }
:is(.rt-sticker, .rt-schild) :is(.rt-platte, .rt-tinte) { fill: Canvas; stroke: Canvas; }
:is(.rt-sticker, .rt-schild) .rt-farbe { fill: CanvasText; stroke: Canvas; }
.rt-sticker :is(.rt-farbe, .rt-band:not(.rt-platte)) { fill: ButtonText; stroke: Canvas; }
.rt-sticker:focus-visible :is(.rt-platte, .rt-tinte) { fill: Highlight; stroke: Highlight; }
.rt-sticker:focus-visible :is(.rt-farbe, .rt-band:not(.rt-platte)) { fill: HighlightText; stroke: Highlight; }
.rt-sticker:focus-visible > svg:not(.rt-zeichen), .rt-sticker:focus-visible > span > svg { filter: none; }
.rt-sticker:focus-visible .rt-platte { stroke-width: 22; }
.rt-fahrer:has(input:checked) .rt-farbe { fill: Highlight; }
.rt-hilfe-gras { forced-color-adjust: none; }
}
.rt-umgefaerbt :is(.rt-sticker, .rt-schild) .rt-tinte { filter: url(#rt-zf-tinte); }
.rt-umgefaerbt :is(.rt-sticker, .rt-schild) .rt-farbe { stroke: none; }
.rt-umgefaerbt :is(.rt-sticker, .rt-schild) .rt-farbe text { filter: var(--zf, url(#rt-zf-weiss)); }
.rt-umgefaerbt .rt-platz .rt-farbe text:last-child { filter: url(#rt-zf-weiss); }
.rt-umgefaerbt .rt-sticker .rt-band:not(.rt-platte) { filter: url(#rt-zf-band); }
.rt-umgefaerbt .rt-fernsehen > svg { --farbe: var(--gelb); }
.rt-zf-vorrat { position: absolute; }
.rt-tanz-video { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 1ms !important; }
.rt-tafel-innen, .rt-platz .rt-schild, .rt-item.rt-voll, .rt-ziel-sticker, .rt-tafel-sticker, .rt-neue-bestzeit, .rt-titel img, .rt-sticker > svg, .rt-gefaehrt-bild, .rt-foto-knopf img,
.rt-kaffee svg, .rt-kaffee-dampf path, .rt-bestenliste li,
.rt-tafel-start, .rt-spiel::after, .rt-links, .rt-karte, .rt-rechts, .rt-tasten { animation: none !important; }
.rt-ruf, .rt-etappe, .rt-klebe { animation: none !important; transform: rotate(var(--dreh, -3deg)); }
}
.rt-fernsehen { --dreh: 3deg; --spaet: 800ms; margin-left: 8px; }
.rt-fernsehen .rt-farbe { fill: var(--gelb); }
.rt[data-fernseher] { --e: min(1vw, 1.778vh); }
.rt[data-fernseher] .rt-hud,
.rt[data-fernseher] .rt-tanz-weiter,
.rt[data-fernseher] .rt-zielfoto,
.rt[data-fernseher] .rt-tanz,
.rt[data-fernseher] .rt-eintrag,
.rt[data-fernseher] .rt-bestzeit-stand { display: none !important; }
.rt[data-fernseher] .rt-kappe { display: none; }
.rt[data-fernseher] .rt-spiel::before { content: none; }
.rt[data-fernseher]:is([data-fs-phase="rennen"], [data-fs-phase="zu"]) .rt-spiel { cursor: none; }
.rt[data-fernseher] .rt-fs-knoepfe,
.rt[data-fernseher] .rt-tafel { cursor: auto; }
.rt-fernseher {
position: absolute;
inset: 0;
z-index: 15;
pointer-events: none;
}
.rt-fernseher[hidden] { display: none; }
.rt-fs-raum {
position: absolute;
inset: 0 0 auto;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: calc(4 * var(--e));
padding: calc(2.4 * var(--e)) calc(4 * var(--e)) calc(2.6 * var(--e)) calc(4.4 * var(--e));
background: var(--schwarz);
animation: rt-fs-rein 700ms var(--aus) both;
}
.rt-fs-raum::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: calc(.9 * var(--e));
background: repeating-linear-gradient(90deg, var(--rot) 0 calc(2.6 * var(--e)), var(--weiss) calc(2.6 * var(--e)) calc(5.2 * var(--e)));
}
@keyframes rt-fs-rein { from { transform: translateY(calc(-100% - 2vh)); } }
.rt:not([data-fs-phase="raum"]) .rt-fs-raum { display: none; }
.rt-fs-bogen { margin: 0; }
.rt-fs-bogen .rt-bogen-blatt {
grid-template-columns: repeat(5, calc(6.4 * var(--e))) auto;
gap: calc(.5 * var(--e)) calc(1 * var(--e));
align-items: end;
margin: 0;
padding: calc(1.5 * var(--e)) calc(1.5 * var(--e)) calc(.9 * var(--e));
border-radius: calc(1.4 * var(--e));
box-shadow: calc(.6 * var(--e)) calc(.6 * var(--e)) 0 var(--rot);
}
.rt-fs-bogen .rt-bogen-platz { cursor: default; padding: 0; }
.rt-fs-bogen :is(.rt-bogen-kopf, .rt-spur, .rt-spur-name) { width: 100%; }
.rt-fs-bogen .rt-bogen-kopf { filter: drop-shadow(calc(.3 * var(--e)) calc(.3 * var(--e)) 0 var(--schwarz)); }
.rt-fs-bogen .rt-spur-name { font-size: calc(1.45 * var(--e)); }
.rt-fs-bogen .rt-spur-name[data-lang="lang"] { font-size: calc(1.2 * var(--e)); }
.rt-fs-bogen .rt-spur-name[data-lang="sehr"] { font-size: calc(1 * var(--e)); }
.rt-fs-bogen .rt-bogen-name { font-size: calc(1 * var(--e)); text-align: center; text-wrap: balance; }
.rt-fs-bogen .rt-bogen-druck { grid-column: 1 / 6; grid-row: 3; font-size: calc(.95 * var(--e)); margin-top: calc(.6 * var(--e)); padding-top: calc(.7 * var(--e)); }
.rt-fs-bogen .rt-bogen-druck b { font-size: calc(1.5 * var(--e)); }
.rt-fs-gaeste {
--gast: calc(4.6 * var(--e));
grid-column: 1 / 6;
grid-row: 2;
display: flex;
flex-wrap: wrap;
align-items: end;
gap: calc(.3 * var(--e)) calc(.6 * var(--e));
margin-top: calc(.3 * var(--e));
}
.rt-fs-gaeste[data-viele="ja"] { --gast: calc(3.7 * var(--e)); }
.rt-fs-gaeste[data-viele="sehr"] { --gast: calc(3 * var(--e)); }
.rt-fs-gaeste:not(:has(.rt-fs-gast, .rt-fs-dazu:not([hidden]))) { display: none; }
.rt-fs-bogen .rt-fs-gast { width: var(--gast); pointer-events: auto; }
.rt-fs-gast .rt-bogen-name {
max-width: 100%;
font-size: calc(.75 * var(--e));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rt-fs-gast .rt-bogen-name:empty { display: none; }
.rt-fs-bogen .rt-fs-gast .rt-spur-name { font-size: calc(.95 * var(--e)); }
.rt-fs-bogen .rt-fs-gast .rt-spur-name:is([data-lang="lang"], [data-lang="sehr"]) { font-size: calc(.75 * var(--e)); }
.rt-fs-gast-weg {
position: absolute;
top: calc(-.4 * var(--e));
right: calc(-.4 * var(--e));
display: grid;
place-items: center;
width: calc(1.7 * var(--e));
height: calc(1.7 * var(--e));
padding: 0;
border: calc(.15 * var(--e)) solid var(--schwarz);
border-radius: 50%;
background: var(--weiss);
color: var(--schwarz);
cursor: pointer;
opacity: 0;
transition: opacity 160ms var(--aus), background-color 160ms var(--aus);
}
.rt-fs-gast-weg svg { width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; }
.rt-fs-gast:hover .rt-fs-gast-weg { opacity: 1; }
.rt-fs-gast-weg:hover { background: var(--rot); color: var(--weiss); }
.rt-fs-gast-weg:focus-visible { opacity: 1; outline: none; border-width: calc(.3 * var(--e)); border-color: var(--rot); }
.rt-fs-dazu {
display: grid;
justify-items: center;
gap: calc(.25 * var(--e));
width: var(--gast);
padding: 0;
border: 0;
background: none;
color: var(--vorhang);
cursor: pointer;
pointer-events: auto;
}
.rt-fs-dazu[hidden] { display: none; }
.rt-fs-dazu-plus {
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 332 / 394;
border: calc(.2 * var(--e)) dashed var(--stanze);
border-radius: 46%;
font: 900 calc(2.6 * var(--e))/1 var(--lauf);
color: var(--stanze);
transition: background-color 160ms var(--aus), color 160ms var(--aus);
}
.rt-fs-dazu:hover .rt-fs-dazu-plus { background: var(--spur); color: var(--vorhang); }
.rt-fs-dazu .rt-bogen-name { font-size: calc(.75 * var(--e)); white-space: nowrap; }
.rt-fs-dazu:focus-visible { outline: none; }
.rt-fs-dazu:focus-visible .rt-fs-dazu-plus { border-style: solid; border-width: calc(.3 * var(--e)); border-color: var(--schwarz); color: var(--schwarz); }
.rt-fs-gaeste:not(:has(.rt-fs-gast)) .rt-fs-dazu { width: auto; grid-auto-flow: column; align-items: center; gap: calc(.5 * var(--e)); }
.rt-fs-gaeste:not(:has(.rt-fs-gast)) .rt-fs-dazu-plus { width: calc(2.1 * var(--e)); aspect-ratio: 1; border-radius: 50%; font-size: calc(1.5 * var(--e)); }
.rt-fs-gaeste:not(:has(.rt-fs-gast)) .rt-fs-dazu .rt-bogen-name { font-size: calc(1 * var(--e)); }
.rt-fs-qr {
grid-column: 6;
grid-row: 1 / span 3;
align-self: stretch;
display: grid;
place-items: center;
margin-left: calc(.6 * var(--e));
padding: calc(.4 * var(--e));
border-radius: calc(1 * var(--e));
background: var(--weiss);
rotate: 2deg;
box-shadow: calc(.3 * var(--e)) calc(.3 * var(--e)) 0 var(--schwarz);
}
.rt-fs-qr svg { display: block; width: calc(12.6 * var(--e)); height: auto; }
.rt-fs-bogen:has(.rt-fs-gast) .rt-fs-qr { align-self: center; }
.rt-fs-qr:empty::before {
content: '';
width: calc(12.6 * var(--e));
aspect-ratio: 1;
border-radius: calc(.6 * var(--e));
background: repeating-linear-gradient(45deg, rgb(26 8 54 / .08) 0 calc(.8 * var(--e)), transparent calc(.8 * var(--e)) calc(1.6 * var(--e)));
}
.rt-fs-ansage { display: grid; gap: calc(.9 * var(--e)); align-content: center; min-width: 0; }
.rt-fs-titel { margin: 0 0 calc(.4 * var(--e)); line-height: 0; --farbe: var(--gelb); }
.rt-fs-titel .rt-schild { width: calc(var(--breite) * .135 * var(--e)); rotate: -2deg; filter: drop-shadow(4px 4px 0 #000); }
.rt-fs-text {
margin: 0;
max-width: 30em;
font: 700 calc(1.5 * var(--e))/1.35 var(--lauf);
color: var(--weiss);
text-wrap: pretty;
}
.rt-fs-stand {
margin: 0;
font: 900 calc(1.5 * var(--e))/1.3 var(--lauf);
color: var(--tuerkis);
text-wrap: pretty;
}
.rt-fs-stand:empty { display: none; }
.rt-fs-adresse {
margin: calc(.4 * var(--e)) 0 0;
font: 900 calc(1.25 * var(--e))/1.2 var(--lauf);
letter-spacing: .02em;
color: rgb(255 255 255 / .72);
overflow-wrap: anywhere;
}
.rt-fs-adresse:empty { display: none; }
.rt-fs-dazu-zeile {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: calc(.6 * var(--e)) calc(1.4 * var(--e));
pointer-events: auto;
}
.rt-fs-dazu-zeile:has(.rt-fs-dazu-text:empty) { display: none; }
.rt-fs-dazu-text {
margin: 0;
max-width: 36em;
font: 700 calc(1.15 * var(--e))/1.35 var(--lauf);
color: var(--gelb);
text-wrap: pretty;
}
.rt-fs-dazu-zeile .rt-sticker > .rt-schild { width: calc(var(--breite) * .052 * var(--e)); }
.rt-fs-dazu-zeile .rt-sticker { --dreh: -2deg; }
.rt-fs-knoepfe {
position: absolute;
right: calc(1.6 * var(--e));
bottom: calc(.5 * var(--e));
display: flex;
align-items: center;
gap: calc(1.8 * var(--e));
pointer-events: auto;
}
.rt-fs-knoepfe .rt-sticker > .rt-schild { width: calc(var(--breite) * .052 * var(--e)); }
.rt-fs-knoepfe .rt-sticker:nth-child(odd) { --dreh: 2deg; }
.rt-fs-knoepfe .rt-sticker:nth-child(even) { --dreh: -2deg; }
:fullscreen .rt-fs-knoepfe [data-tun="fs-vollbild"] { display: none; }
.rt-fs-bahnen { position: absolute; inset: 0; }
.rt-fs-bahn {
position: absolute;
top: 0;
bottom: 0;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto 1fr;
align-items: start;
gap: calc(.6 * var(--e)) calc(.8 * var(--e));
padding: calc(1.6 * var(--e)) calc(1.8 * var(--e));
opacity: 0;
transition: opacity 260ms ease-out;
}
.rt-fs-bahn[data-sicht="ja"] { opacity: 1; }
.rt-fs-wer {
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
display: flex;
align-items: center;
gap: calc(.4 * var(--e));
margin-top: calc(-.4 * var(--e));
max-width: 100%;
}
.rt-fs-wer-kopf { width: calc(3.4 * var(--e)); height: auto; filter: drop-shadow(2px 2px 0 #000); }
.rt-fs-wer-name { line-height: 0; min-width: 0; --farbe: var(--weiss); }
.rt-fs-wer-name .rt-schild { width: min(calc(var(--breite) * .08 * var(--e)), 100%); rotate: -2deg; filter: drop-shadow(2px 2px 0 #000); }
.rt-fs-platz { grid-column: 1; grid-row: 2; margin: 0; line-height: 0; --farbe: var(--gelb); }
.rt-fs-platz .rt-schild {
width: calc(var(--breite) * .15 * var(--e));
rotate: -3deg;
filter: drop-shadow(3px 3px 0 #000);
transform-origin: 30% 70%;
animation: rt-platz 480ms var(--federnd);
}
.rt-fs-items { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: calc(.5 * var(--e)); }
.rt-fs-items canvas {
width: calc(5.2 * var(--e));
height: calc(5.2 * var(--e));
border-radius: 50%;
background: rgb(26 8 54 / .72);
border: calc(.25 * var(--e)) solid rgb(255 255 255 / .3);
}
.rt-fs-items canvas.rt-voll { border-color: var(--gelb); }
.rt-fs-items canvas[hidden] { display: none; }
.rt-fs-schlaf {
display: none;
grid-column: 1 / -1;
grid-row: 3;
align-self: center;
justify-self: center;
margin: 0;
line-height: 0;
--farbe: var(--magenta);
}
.rt-fs-schlaf .rt-schild { width: min(calc(var(--breite) * .075 * var(--e)), 92%); rotate: -4deg; filter: drop-shadow(3px 3px 0 #000); }
.rt-fs-bahn[data-schlaf="ja"] .rt-fs-schlaf { display: block; }
.rt-fs-bahn[data-schlaf="ja"] .rt-fs-wer-kopf { filter: grayscale(1) drop-shadow(2px 2px 0 #000); opacity: .7; }
.rt-fs-da {
display: none;
grid-column: 1 / -1;
grid-row: 3;
align-self: center;
justify-self: center;
justify-items: center;
margin: 0;
line-height: 0;
rotate: -4deg;
}
.rt-fs-bahn[data-da="ja"] .rt-fs-da { display: grid; animation: rt-fs-klatsch 640ms var(--federnd) both; }
.rt-fs-bahn[data-da="ja"] .rt-fs-platz { visibility: hidden; }
.rt-fs-da-rang { --farbe: var(--gelb); }
.rt-fs-da-rang .rt-schild { width: min(calc(var(--breite) * .3 * var(--e)), 80%); filter: drop-shadow(calc(.5 * var(--e)) calc(.5 * var(--e)) 0 #000); }
.rt-fs-da-zeit { --farbe: var(--weiss); margin-top: calc(.6 * var(--e)); }
.rt-fs-da-zeit .rt-schild { width: calc(var(--breite) * .09 * var(--e)); rotate: 3deg; filter: drop-shadow(3px 3px 0 #000); }
.rt-fs-da span { display: block; }
@keyframes rt-fs-klatsch {
0% { transform: scale(1.8) rotate(-12deg); opacity: 0; filter: drop-shadow(14px 14px 0 #000); }
60% { transform: scale(1.03, .92); opacity: 1; }
}
.rt-fs-rufe {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
container-type: inline-size;
}
.rt-fs-rufe .rt-ruf { --pro: clamp(1px, .9cqi, 7px); }
.rt-fs-rufe .rt-klebe { width: min(220px, 42cqi); }
.rt-fs-rufe .rt-ruf-wort { --pro: clamp(.8px, .55cqi, 4.6px); }
.rt-fs-rufe .rt-ruf-party { --pro: clamp(.6px, .45cqi, 3.7px); }
.rt-fs-rufe .rt-ruf .rt-schild { max-width: calc(100cqi - 24px); filter: drop-shadow(4px 4px 0 #000); }
.rt-fs-rufe .rt-etappe { align-self: start; margin-top: calc(16.5 * var(--e)); }
.rt-fs-rufe .rt-etappe .rt-schild { width: min(calc(var(--breite) * .3cqi), calc(100cqi - 24px)); }
.rt-fs-rufe .rt-etappe .rt-schild + .rt-schild { width: min(calc(var(--breite) * .11cqi), calc(100cqi - 32px)); }
.rt-fs-weg {
position: absolute;
left: 50%;
bottom: calc(1.4 * var(--e));
translate: -50% 0;
margin: 0;
padding: calc(.6 * var(--e)) calc(1.6 * var(--e));
border-radius: var(--r-kapsel);
background: rgb(26 8 54 / .88);
font: 900 calc(1.35 * var(--e))/1 var(--lauf);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--weiss);
white-space: nowrap;
}
.rt-fs-km { color: var(--amber); margin-left: .5em; }
.rt:not([data-fs-phase="rennen"]) .rt-fs-weg,
.rt[data-zustand="countdown"] .rt-fs-weg { display: none; }
.rt[data-fernseher] :is(.rt-tafel-pause, .rt-tafel-ziel) .rt-tafel-innen { zoom: 1.15; }
@media (min-width: 1700px) { .rt[data-fernseher] :is(.rt-tafel-pause, .rt-tafel-ziel) .rt-tafel-innen { zoom: 1.4; } }
@media (prefers-reduced-motion: reduce) {
.rt-fs-raum, .rt-fs-bahn[data-da="ja"] .rt-fs-da, .rt-fs-platz .rt-schild { animation: none !important; }
}