html.ju-html, .ju-html body { height: auto; overflow: visible; }
html.ju-html { overflow-x: clip; scrollbar-color: var(--nacht) var(--schwarz); }
@media (prefers-reduced-motion: no-preference) { html.ju-html { scroll-behavior: smooth; } }
.ju {
--rand-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
min-height: 100vh;
overflow-x: clip;
font: 700 17px/1.5 var(--lauf);
}
.ju .rt-sticker { max-width: 100%; }
.ju .rt-sticker > .rt-schild { flex: 0 1 auto; min-width: 0; }
.ju a:not(.rt-sticker) { color: var(--gelb); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ju-konfetti { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }
.ju-kopf {
display: flex;
justify-content: space-between;
gap: 16px;
max-width: 1120px;
margin: 0 auto;
padding: max(16px, env(safe-area-inset-top)) var(--rand-x) 0;
}
.ju-buehne {
display: grid;
gap: 40px;
max-width: 1120px;
margin: 0 auto;
padding: 18px var(--rand-x) 48px;
}
@media (min-width: 900px) {
.ju-buehne {
grid-template-columns: minmax(0, 1fr) 340px;
grid-template-areas: "auftakt handy" "schritte handy" "weiter handy" "klein handy";
column-gap: clamp(40px, 6vw, 88px);
padding-top: 28px;
}
.ju-auftakt { grid-area: auftakt; }
.ju-handy { grid-area: handy; align-self: start; position: sticky; top: 24px; }
.ju-schritte { grid-area: schritte; }
.ju-weiter { grid-area: weiter; }
.ju-klein { grid-area: klein; }
}
.ju-auftakt {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: 12px;
}
.ju-anlass {
grid-column: 1 / -1;
margin: 0 0 10px;
font: 900 14px/1.2 var(--lauf);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tuerkis);
}
.ju-titel {
grid-column: 1 / -1;
margin: 0 0 18px;
line-height: 0;
--farbe: var(--gelb);
}
.ju-titel .rt-schild {
width: min(100%, calc(var(--breite) * 1.5px));
margin-left: -8px;
rotate: -3deg;
filter: drop-shadow(4px 4px 0 #000);
}
@media (min-width: 900px) {
.ju-titel { grid-column: 1; }
.ju-titel .rt-schild { width: min(100%, calc(var(--breite) * 2.1px)); }
.ju-valerio { grid-row: 2 / 4; align-self: end; width: 116px; }
.ju-lead { align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
.ju-titel .rt-schild { animation: rt-logo-klatsch 640ms 120ms var(--federnd) both; }
}
.ju-lead {
grid-column: 1;
grid-row: 3;
margin: 0;
max-width: 30em;
font-size: clamp(18px, .5vw + 16px, 21px);
line-height: 1.45;
text-wrap: pretty;
}
.ju-valerio {
grid-column: 2;
grid-row: 3;
width: clamp(84px, 22vw, 150px);
height: auto;
margin-bottom: -6px;
rotate: 4deg;
}
.ju-handy { margin: 0; justify-self: center; width: min(78vw, 340px); }
.ju-handy-rahmen {
position: relative;
padding: 9px;
border-radius: 46px;
background: var(--nacht);
box-shadow: 5px 5px 0 #000;
}
.ju-film {
display: block;
width: 100%;
height: auto;
aspect-ratio: 540 / 1168;
border-radius: 37px;
background: var(--schwarz);
object-fit: cover;
}
.ju-halt { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; }
.ju-halt svg { width: 22px; height: 22px; }
.ju-halt-spiel, .ju-halt[data-angehalten="true"] .ju-halt-pause { display: none; }
.ju-halt[data-angehalten="true"] .ju-halt-spiel { display: block; }
.ju-unterzeile {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
min-height: 44px;
margin-top: -24px;
line-height: 0;
--farbe: var(--gelb);
}
.ju-unterzeile > span { grid-area: 1 / 1; }
.ju-unterzeile > span[hidden] { display: none; }
.ju-unterzeile > [data-schritt="5"] { --farbe: var(--magenta); }
.ju-unterzeile .rt-schild {
width: calc(var(--breite) * .95px);
rotate: -3deg;
filter: drop-shadow(3px 3px 0 #000);
}
@media (prefers-reduced-motion: no-preference) {
.ju-unterzeile > span .rt-schild { animation: rt-sticker-klatsch 420ms var(--federnd) both; }
}
.ju-zwischentitel {
margin: 0 0 18px;
line-height: 0;
--farbe: var(--gelb);
}
.ju-zwischentitel .rt-schild {
width: calc(var(--breite) * 1.1px);
margin-left: -6px;
rotate: -2deg;
filter: drop-shadow(3px 3px 0 #000);
}
.ju-leise { --farbe: var(--weiss); }
.ju-leise .rt-schild { width: calc(var(--breite) * .8px); }
.ju-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ju-schritt {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 14px;
padding: 14px 14px 14px 10px;
border-radius: 18px;
transition: background-color 240ms ease-out;
}
.ju-schritt p { margin: 6px 0 0; max-width: 34em; text-wrap: pretty; }
.ju-nummer {
appearance: none;
padding: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 2px solid var(--gelb);
border-radius: 50%;
font: 900 22px/1 var(--display);
color: var(--gelb);
transition: background-color 240ms ease-out, color 240ms ease-out;
}
.ju-name { margin: 6px 0 0; line-height: 0; --farbe: var(--tuerkis); }
.ju-name .rt-schild {
width: calc(var(--breite) * .72px);
margin-left: -5px;
rotate: -2deg;
filter: drop-shadow(2px 2px 0 #000);
}
.ju-nummer:focus-visible { outline: none; border: 4px solid var(--weiss); }
.ju-schritt.ju-jetzt { background: var(--nacht); }
.ju-schritt.ju-jetzt .ju-nummer { background: var(--gelb); color: var(--schwarz); }
.ju-springt .ju-schritt { cursor: pointer; }
@media (hover: hover) { .ju-springt .ju-schritt:not(.ju-jetzt):hover { background: rgb(54 23 82 / .5); } }
.ju-los { --farbe: var(--amber); --einheit: 1.25; --dreh: -2deg; margin: 26px 0 0 4px; }
.ju-weiter > p { margin: 0 0 14px; max-width: 34em; text-wrap: pretty; }
.ju-saal { color: var(--tuerkis); }
.ju-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin: 22px 0 18px 4px; }
.ju-teilen-knopf { --farbe: var(--amber); --einheit: 1.15; --dreh: -2deg; }
.ju-teilen .rt-leise { --einheit: .75; }
.ju-teilen [hidden] { display: none; }
.ju-teilen .rt-sticker > span:not(.rt-sr, [hidden]) { display: contents; }
.ju-teilen .rt-sticker > span > svg { filter: drop-shadow(3px 3px 0 #000); }
.ju-story { gap: 14px; }
.ju-story-bild {
width: 46px;
height: auto;
border: 3px solid var(--weiss);
border-radius: 7px;
rotate: -5deg;
filter: drop-shadow(3px 3px 0 #000);
transition: transform 200ms var(--aus), filter 200ms var(--aus);
}
@media (hover: hover) {
.ju-story:hover > .ju-story-bild { transform: rotate(-3deg) scale(1.06); filter: drop-shadow(6px 6px 0 #000); }
}
.ju-story:active > .ju-story-bild { transform: translate(2px, 2px); filter: drop-shadow(1px 1px 0 #000); transition-duration: 60ms; }
.ju-adresse { font-size: 15px; color: rgb(255 255 255 / .75); }
.ju-adresse strong { color: var(--weiss); font-weight: 900; user-select: all; }
.ju-frage { border-top: 2px solid var(--nacht); }
.ju-frage:last-of-type { border-bottom: 2px solid var(--nacht); }
.ju-frage summary {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 2px;
font-weight: 900;
cursor: pointer;
list-style: none;
}
.ju-frage summary::-webkit-details-marker { display: none; }
.ju-frage summary::after {
content: '+';
flex: none;
font: 900 22px/1 var(--display);
color: var(--gelb);
transition: rotate 200ms var(--aus);
}
.ju-frage[open] summary::after { rotate: 45deg; }
.ju-frage summary:focus-visible { outline-offset: -3px; border-radius: 6px; }
.ju-frage p { margin: 0 0 16px; max-width: 34em; color: rgb(255 255 255 / .85); text-wrap: pretty; }
.ju-fuss {
padding: 0 var(--rand-x) max(32px, env(safe-area-inset-bottom));
text-align: center;
font-size: 15px;
color: rgb(255 255 255 / .7);
}