/* buendel-kopf.css — ERZEUGT von werkzeug/buendeln.sh am 2026-10-06. Nicht von Hand ändern; Quellen: grundschicht.css bauteil/bauteil.css seite.css schlange.css */
/* = grundschicht.css = */

[hidden] { display: none !important; }
:root {
--ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    
--dauer-sofort: 120ms;  
--dauer-ui:     200ms;  
--dauer-flaeche:320ms;  
--staffel:       60ms;  
--treffer-min: 44px;    
}
@media (hover: hover) and (pointer: fine) {
.knopf:hover      { background: var(--knopf-bg-hover, #333); }
.karte:hover      { border-color: var(--karte-rand-hover, #666); }
}
.knopf:active,
.karte:active { transform: scale(0.97); transition-duration: var(--dauer-sofort); }
.knopf, .karte, a, button { -webkit-tap-highlight-color: transparent; }
.knopf, button, a.knopf { min-height: var(--treffer-min); min-width: var(--treffer-min); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
.aufdecken, .menue, .schublade {
transition: opacity 120ms linear !important;
transform: none !important;
}
}
@media (prefers-reduced-transparency: reduce) {
.glas, .menue, .fenster, [class*="backdrop"] {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--flaeche-deckend, #14110e) !important;
}
}
@media (prefers-contrast: more) {
.glas, .menue, .fenster, .karte {
background: var(--flaeche-deckend, #14110e) !important;
border: 1px solid var(--rand-stark, #fff) !important;
backdrop-filter: none !important;
}
.knopf { border: 1px solid currentColor; }
}
.eintritt {
opacity: 0;
transform: scale(0.95);
transition: opacity var(--dauer-ui) var(--ease-out),
transform var(--dauer-ui) var(--ease-out);
}
.eintritt[data-offen="true"] { opacity: 1; transform: scale(1); }
.menue { transform-origin: var(--ursprung, top left); }
/* = bauteil/bauteil.css = */

.sb-buehne {
--sb-dauer: 820ms;                                    
--sb-dauer-fall: 450ms;                               
--sb-dauer-tauch: 420ms;                              
--sb-verzug-tauch: 40ms;                              
--sb-dauer-flug: 420ms;                               
--sb-dauer-raus: 400ms;                               
--sb-dauer-steig: 380ms;                              
--sb-dauer-sink: 300ms;                               
--sb-dauer-farbe: 80ms;                               
--sb-farbe-verzug: 30ms;                              
--sb-dauer-blitz: 420ms;                              
--sb-dauer-rast: 460ms;                               
--sb-staffel: 14ms;
--sb-kurve-band: cubic-bezier(0.77, 0, 0.175, 1);     
--sb-kurve-rein: cubic-bezier(0.2, 1.07, 0.32, 1);    
--sb-kurve-raus: cubic-bezier(0.6, 0.04, 0.9, 0.5);   
--sb-kurve-fall: cubic-bezier(0.42, 0.04, 0.92, 0.6); 
--sb-kurve-rast: cubic-bezier(0.22, 1, 0.36, 1);      
--sb-dose-h: 73cqh;                                   
--sb-dose-fuss: 12.5cqh;                              
--sb-dose-seite: 0.411;                               
--sb-streckung: 1.38;                                 
--sb-wort-mitte: 49cqh;
--sb-rand: clamp(16px, 2.6cqw, 72px);
--sb-krone-h: 0.5;                                    
--sb-spritzer-h: 0.36;
--sb-abstand: 6cqh;                                   
--sb-flugweg: 70cqw;                                  
--sb-licht: 0.42;                                      
--sb-unten: calc(var(--sb-fuss-h, 34px) + 62px + 114px + 10px);   
position: relative;
container-type: size;
height: 100vh;
height: 100svh;
min-height: 560px;
overflow: hidden;
overflow: clip;
background: var(--sb-f-grund, #B5121B);
color: var(--sb-f-schrift, #FBE3D6);
touch-action: pan-y;                                  
isolation: isolate;
}
.sb-buehne.sb-zieht { user-select: none; -webkit-user-select: none; }
.sb-lage { position: absolute; inset: 0; pointer-events: none; }
.sb-buehne img { display: block; user-select: none; -webkit-user-drag: none; }
.sb-grundbild { position: absolute; inset: 0; opacity: 0; }
.sb-grundbild[data-oben] { opacity: 1; }
.sb-grundbild.sb-blende { transition: opacity var(--sb-dauer-farbe) linear var(--sb-farbe-verzug); }
.sb-grundbild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.sb-schleier {
position: absolute;
inset: 0;
opacity: 0;
background-color: var(--sb-f-grund, #B5121B);   
}
.sb-kegel, .sb-blitz {
position: absolute;
left: 50%;
bottom: calc(var(--sb-dose-fuss) - var(--sb-dose-h) * 0.12);
height: calc(var(--sb-dose-h) * 1.34);
aspect-ratio: 0.86;
translate: -50% 0;
border-radius: 50%;
}
.sb-kegel {
background: radial-gradient(closest-side, rgb(255 255 255 / var(--sb-licht)), rgb(255 255 255 / calc(var(--sb-licht) * 0.55)) 42%, rgb(255 255 255 / 0) 100%);
}
.sb-blitz {
height: calc(var(--sb-dose-h) * 2.6);
bottom: calc(var(--sb-dose-fuss) - var(--sb-dose-h) * 1.3);
aspect-ratio: 1.5;
background: radial-gradient(closest-side, var(--sb-blitz-1, rgb(255 255 255 / 0.95)), var(--sb-blitz-2, rgb(255 255 255 / 0.5)) 45%, rgb(255 255 255 / 0) 100%);
opacity: 0;
}
.sb-blitz.sb-zuendet { animation: sb-blitzen var(--sb-dauer-blitz) linear; }   
@keyframes sb-blitzen {
0%   { opacity: 0; transform: scale(0.5); }
18%  { opacity: 0.72; transform: scale(1); }
100% { opacity: 0; transform: scale(1.25); }
}
.sb-wort {
--sb-ort: 0cqw;
position: absolute;
left: 0;
top: var(--sb-wort-mitte);
width: 100%;
margin: 0;
translate: 0 -50%;
scale: 1 var(--sb-streckung);
text-align: center;
white-space: nowrap;
line-height: 0.74;
font-size: calc(94cqw / var(--sb-em, 8));
font-kerning: none;                 
letter-spacing: 0;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
transform: translate3d(calc(var(--sb-ort) + var(--sb-zug, 0px)), 0, 0);
transition: transform var(--sb-dauer) var(--sb-kurve-band);
}
.sb-wort[data-lage="links"]  { --sb-ort: -104cqw; }
.sb-wort[data-lage="rechts"] { --sb-ort: 104cqw; }
.sb-buehne[data-rastet] .sb-wort { transition: transform var(--sb-dauer-rast) var(--sb-kurve-rast); }   
.sb-steig {
position: absolute;
left: 50%;
bottom: calc(var(--sb-dose-fuss) + var(--sb-hub, 0cqh));
width: min(calc(var(--sb-dose-h) * var(--sb-hoch, 0.5) * var(--sb-seite, 1.8)), 98cqw);
translate: -50% 0;
transform-origin: 50% 100%;
transition: transform var(--sb-dauer-steig) var(--sb-kurve-rein), opacity 90ms linear;
}
.sb-steig[data-lage="unten"] {
transform: translate3d(0, 12%, 0) scale(0.55, 0.08);
opacity: 0;
transition: transform var(--sb-dauer-sink) var(--sb-kurve-raus), opacity 220ms linear 80ms;
}
.sb-steig img { width: 100%; height: auto; }
.sb-krone .sb-steig    { --sb-hoch: var(--sb-krone-h); --sb-hub: -2.5cqh; }
.sb-spritzer .sb-steig { --sb-hoch: var(--sb-spritzer-h); --sb-hub: -6cqh; }
.sb-spritzer {
--sb-band-maske: radial-gradient(calc(var(--sb-dose-h) * var(--sb-dose-seite) * var(--sb-band-breite, 0.6)) calc(var(--sb-dose-h) * var(--sb-band-dicke, 0.055))
at 50% calc(100% - var(--sb-dose-fuss) - var(--sb-dose-h) * var(--sb-band-lage, 0.068)), transparent 0 70%, #000 100%);
-webkit-mask-image: var(--sb-spritzer-maske, none); mask-image: var(--sb-spritzer-maske, none);
}
.sb-aufschlag img {
position: absolute;
left: 50%;
bottom: calc(var(--sb-dose-fuss) + var(--sb-aufschlag-hub, -4.5cqh));
width: min(calc(var(--sb-dose-h) * var(--sb-aufschlag-b, 1.6)), 100cqw);
height: auto;
translate: -50% 0;
opacity: 0;
transition: opacity 160ms linear;
}
.sb-aufschlag img[data-laeuft] { opacity: 1; transition: none; }
.sb-dose {
position: absolute;
left: 50%;
bottom: var(--sb-dose-fuss);
height: var(--sb-dose-h);
aspect-ratio: var(--sb-dose-seite);
translate: -50% 0;
pointer-events: none;
}
.sb-fall {
position: absolute;
inset: 0;
transition: transform var(--sb-dauer-fall) var(--sb-kurve-fall) var(--sb-vorlauf, 0ms);
}
.sb-fall[data-lage="oben"] { transform: translate3d(0, calc(-1 * (var(--sb-dose-h) + var(--sb-abstand))), 0) rotate(-4deg); }   
.sb-fall[data-lage="unten"] {
transform: translate3d(0, calc(var(--sb-dose-fuss) + var(--sb-dose-h) + 4cqh), 0) rotate(3deg);
transition: transform var(--sb-dauer-tauch) var(--sb-kurve-fall) var(--sb-verzug-tauch);
}
.sb-fall picture { display: contents; }
.sb-fall img { width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 100%; }
.sb-fall::before {
content: "";
position: absolute;
left: -32%; right: -32%; bottom: -3.2%;
height: 9%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.22) 55%, rgb(0 0 0 / 0));
transition: opacity 160ms linear;
}
.sb-fall[data-lage]::before { opacity: 0; transition: none; }
.sb-fall.sb-federt img { animation: sb-federn 340ms cubic-bezier(0.3, 0.6, 0.4, 1); }
@keyframes sb-federn {
0%   { transform: scale(1.05, 0.94); }
42%  { transform: scale(0.98, 1.025); }
72%  { transform: scale(1.008, 0.992); }
100% { transform: none; }
}
.sb-frucht {
--sb-u: min(1cqw, 1.7cqh);
--px: var(--x); --py: var(--y); --pb: var(--b);
position: absolute;
left: calc(var(--px) * 1%);
top: calc(var(--py) * 1%);
width: calc(var(--pb) * var(--sb-u));
translate: -50% -50%;
transform: translate3d(calc(var(--sb-zug, 0px) * var(--sb-zug-anteil, 0.3)), 0, 0);
transition: transform var(--sb-dauer-flug) var(--sb-kurve-rein) calc(var(--i, 0) * var(--sb-staffel)),
opacity 110ms linear calc(var(--i, 0) * var(--sb-staffel));
}
.sb-hinten .sb-frucht { --sb-zug-anteil: 0.12; }
.sb-ganz-vorn .sb-frucht { --sb-zug-anteil: 0.5; }
.sb-frucht[data-lage="kern"] { opacity: 0; transition: none; }
.sb-frucht[data-lage="kern"][data-seite="links"] {
transform: translate3d(calc(50cqw - var(--sb-dose-h) * var(--sb-dose-seite) * 0.5 - 3cqw - var(--px) * 1cqw),
calc(100cqh - var(--sb-dose-fuss) - 5cqh - var(--py) * 1cqh), 0) scale(0.14) rotate(-50deg);
}
.sb-frucht[data-lage="kern"][data-seite="rechts"] {
transform: translate3d(calc(50cqw + var(--sb-dose-h) * var(--sb-dose-seite) * 0.5 + 3cqw - var(--px) * 1cqw),
calc(100cqh - var(--sb-dose-fuss) - 5cqh - var(--py) * 1cqh), 0) scale(0.14) rotate(50deg);
}
.sb-frucht[data-lage="links"],
.sb-frucht[data-lage="rechts"] {
transition: transform var(--sb-dauer-raus) var(--sb-kurve-raus) calc(var(--i, 0) * 16ms);
}
.sb-frucht[data-lage="links"]  { transform: translate3d(calc(var(--sb-flugweg) * -1), -6cqh, 0) rotate(-28deg); }
.sb-frucht[data-lage="rechts"] { transform: translate3d(var(--sb-flugweg), 6cqh, 0) rotate(28deg); }
.sb-zeiger { will-change: transform; }
.sb-treib { animation: sb-treiben calc(var(--takt, 10) * 1s) ease-in-out infinite alternate; }
.sb-frucht img { width: 100%; height: auto; rotate: calc(var(--dreh, 0) * 1deg); }
@keyframes sb-treiben {
from { transform: translate3d(-3px, 4px, 0) rotate(-1.2deg); }
to   { transform: translate3d(4px, -5px, 0) rotate(1.4deg); }
}
.sb-buehne[data-pause] .sb-treib { animation-play-state: paused; }
.sb-buehne.sb-zieht .sb-wort,
.sb-buehne.sb-zieht .sb-frucht:not([data-lage]) { transition: none; }
.sb-buehne [data-ruht] { visibility: hidden; }
.sb-sprung, .sb-sprung * { transition: none !important; }
.sb-bedienung { position: absolute; inset: 0; pointer-events: none; }
.sb-bedienung > * { pointer-events: auto; }
.sb-karte {
position: absolute;
left: var(--sb-rand);
bottom: calc(var(--sb-fuss-h, 34px) + clamp(16px, 3cqh, 44px));
width: clamp(340px, 26cqw, 680px);
padding: clamp(18px, 1.35cqw, 32px) clamp(20px, 1.5cqw, 36px) clamp(16px, 1.2cqw, 30px);
border-radius: clamp(18px, 1.3cqw, 30px);
background: color-mix(in srgb, var(--sb-f-tinte, #2F0508) 82%, transparent);
color: var(--sb-f-wort, #FBE3D6);
transition: opacity 160ms linear;
}
.sb-karte[data-wechselt] { opacity: 0; }
.sb-karte-name {
margin: 0;
font-size: min(clamp(22px, 2.1cqw, 52px), calc((clamp(340px, 26cqw, 680px) - 2 * clamp(20px, 1.5cqw, 36px)) / var(--sb-em-name, 13)));
line-height: 1.05; font-weight: 400; white-space: nowrap;
}
.sb-karte-satz { margin: 0.5em 0 0.75em; font-size: clamp(15px, 1.12cqw, 27px); line-height: 1.4; }
.sb-karte-zahl { margin: 0; font-size: clamp(12px, 0.85cqw, 20px); letter-spacing: 0.04em; opacity: 0.92; }
.sb-punkte {
--sb-punkt: clamp(20px, 1.2cqw, 28px);               
--sb-treffer: clamp(44px, 2.9cqw, 64px);              
position: absolute;
left: 50%;
bottom: calc(var(--sb-fuss-h, 34px) + clamp(6px, 1cqh, 16px));
translate: -50% 0;
display: flex;
margin: 0;
padding: 0 clamp(6px, 0.5cqw, 12px);
list-style: none;
border-radius: 999px;
background: color-mix(in srgb, var(--sb-f-tinte, #2F0508) 86%, transparent);
}
.sb-punkt {
display: grid;
place-items: center;
width: var(--sb-treffer);
height: var(--sb-treffer);
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sb-punkt::before, .sb-punkt::after {
content: "";
grid-area: 1 / 1;
width: var(--sb-punkt);
height: var(--sb-punkt);
border-radius: 50%;
box-sizing: border-box;
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms linear;
}
.sb-punkt::before { background: var(--sb-punkt-farbe, currentColor); transform: scale(0.82); }
.sb-punkt::after { border: 2px solid #fff; transform: scale(1.3); opacity: 0; }
.sb-punkt[aria-current="true"]::before { transform: scale(1.12); }
.sb-punkt[aria-current="true"]::after { transform: scale(1.62); opacity: 1; }
.sb-punkt:active::before { transform: scale(0.8); }
.sb-pfeile {
position: absolute;
right: var(--sb-rand);
bottom: calc(var(--sb-fuss-h, 34px) + clamp(16px, 3cqh, 44px));
display: flex;
gap: clamp(10px, 0.7cqw, 18px);
}
.sb-pfeil {
display: grid;
place-items: center;
width: clamp(56px, 3.9cqw, 92px);
height: clamp(56px, 3.9cqw, 92px);
padding: 0;
border: 0;
border-radius: 50%;
background: var(--sb-f-wort, #FBE3D6);
color: var(--sb-f-tinte, #2F0508);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sb-pfeil:active { transform: scale(0.94); }
.sb-pfeil svg { width: 40%; height: 40%; }
.sb-punkt:focus-visible, .sb-pfeil:focus-visible { outline: 3px solid var(--sb-f-wort, #FBE3D6); outline-offset: 3px; }
.sb-punkt:focus-visible { outline-offset: -5px; border-radius: 50%; }
.sb-wischhinweis { display: none; }
.sb-nur-vorlesen {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
@container (max-width: 700px) {
.sb-lage, .sb-dose { --sb-dose-fuss: var(--sb-unten); --sb-dose-h: min(47cqh, calc(100cqh - var(--sb-unten) - 150px)); }
.sb-dose { --sb-verzug-tauch: 80ms; }
.sb-wort {
top: 0; height: 100%;
translate: none;
scale: none;
line-height: 0.74;
font-size: calc(92cqw / var(--sb-em2, 4.5));
}
.sb-wort {
--sb-boden: calc(var(--sb-dose-fuss) + var(--sb-dose-h) - 1.2cqw);
--sb-f: min(calc(92cqw / var(--sb-em2, 4.5)), calc((100cqh - var(--sb-boden) - 64px) / 2.1));
}
.sb-teil {
position: absolute;
left: 0;
width: 100%;
font-size: var(--sb-f);
scale: 1 var(--sb-streckung);
transform-origin: 50% 100%;
}
.sb-teil:nth-child(1) { bottom: calc(var(--sb-boden) + var(--sb-f) * 1.02); }
.sb-teil:nth-child(2) { bottom: var(--sb-boden); display: flex; justify-content: center; }
.sb-halb { width: auto; }
.sb-frucht { --px: var(--mx, var(--x)); --py: var(--my, var(--y)); --pb: var(--mb, var(--b)); }
.sb-frucht[data-handy="aus"] { display: none; }
.sb-karte {
left: var(--sb-rand); right: var(--sb-rand);
width: auto;
bottom: calc(var(--sb-fuss-h, 34px) + 62px);
height: 114px;   
padding: 12px 14px 11px;
border-radius: 14px;
}
.sb-karte-name { font-size: min(22px, calc((100cqw - 2 * var(--sb-rand) - 28px) / var(--sb-em-name, 13))); }
.sb-karte-satz { margin: 4px 0 6px; font-size: 16px; line-height: 1.3; }   
.sb-karte-zahl { font-size: 12px; }
.sb-punkte { --sb-punkt: 20px; --sb-treffer: 44px; left: var(--sb-rand); translate: none; padding: 0 4px; bottom: calc(var(--sb-fuss-h, 34px) + 9px); }
.sb-pfeile { bottom: calc(var(--sb-fuss-h, 34px) + 8px); gap: 10px; }
.sb-pfeil { width: 46px; height: 46px; }
.sb-wischhinweis {
position: absolute;
left: calc(var(--sb-rand) + 4 * 44px + 8px);
right: calc(var(--sb-rand) + 102px);
bottom: calc(var(--sb-fuss-h, 34px) + 20px);
height: 22px;
width: max-content;
margin: 0 auto;
padding: 0 5px;
border-radius: 999px;
display: flex; align-items: center; justify-content: center; gap: 3px;
font-size: 10.5px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
background: color-mix(in srgb, var(--sb-f-tinte, #2F0508) 86%, transparent);
color: var(--sb-f-wort, #FBE3D6);
pointer-events: none;
transition: opacity 240ms linear;
}
.sb-wischhinweis svg { width: 15px; height: 15px; flex: none; animation: sb-wink 1.6s ease-in-out infinite; }
.sb-buehne[data-gewischt] .sb-wischhinweis { opacity: 0; }
.sb-buehne[data-gewischt] .sb-wischhinweis svg { animation: none; }
}
@keyframes sb-wink {
0%, 100% { transform: translate3d(3px, 0, 0); }
50%      { transform: translate3d(-3px, 0, 0); }
}
@media (hover: hover) and (pointer: fine) {
.sb-buehne { cursor: grab; }
.sb-buehne.sb-zieht { cursor: grabbing; }
.sb-pfeil:hover { transform: scale(1.06); }
.sb-punkt:hover::before { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.sb-wort, .sb-steig, .sb-frucht, .sb-fall,
.sb-wort[data-lage], .sb-steig[data-lage], .sb-frucht[data-lage], .sb-fall[data-lage] {
transform: none !important;
transition: opacity 200ms linear !important;
}
.sb-wort[data-lage="links"], .sb-wort[data-lage="rechts"],
.sb-frucht[data-lage], .sb-fall[data-lage],
.sb-steig[data-lage="unten"] { opacity: 0; }
.sb-grundbild.sb-blende { transition: opacity 200ms linear; }
.sb-treib, .sb-fall.sb-federt img, .sb-blitz.sb-zuendet, .sb-wischhinweis svg { animation: none !important; }
.sb-zeiger { transform: none !important; }
.sb-pfeil, .sb-punkt::before, .sb-punkt::after { transition: none; }
}
.sb-spritzer { --sb-spritzer-maske: var(--sb-band-maske); }
/* = seite.css = */

@font-face {
font-family: "Caprasimo";
src: url("schrift/caprasimo-400.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Caprasimo Ersatz";
src: local("Georgia Bold"), local("Georgia-Bold");
font-weight: 400; font-style: normal;
size-adjust: 99.3%; ascent-override: 92.4%; descent-override: 23.1%; line-gap-override: 0%;
}
@font-face {
font-family: "Caprasimo Ersatz 2";
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Noto Serif Bold"), local("NotoSerif-Bold");
font-weight: 400; font-style: normal;
size-adjust: 108.2%; ascent-override: 84.8%; descent-override: 21.2%; line-gap-override: 0%;
}
@font-face {
font-family: "Inter";
src: url("schrift/inter-var.woff2") format("woff2");
font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("schrift/jetbrains-mono-500.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
:root {
--sb-f-grund: #B5121B;
--sb-f-tief: #5E0A10;
--sb-f-wort: #FBE3D6;
--sb-f-akzent: #E0202B;
--sb-f-tinte: #2F0508;
--sb-f-schrift: #FBE3D6;
--schrift-wort: "Caprasimo", "Caprasimo Ersatz", "Caprasimo Ersatz 2", Georgia, serif;
--schrift-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--schrift-zahl: "JetBrains Mono", ui-monospace, Menlo, monospace;
--rand: clamp(16px, 2.6vw, 72px);
--knopf-bg-hover: var(--sb-f-wort);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--sb-f-tinte);
color: var(--sb-f-wort);
font-family: var(--schrift-text);
font-size: 17px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.sprung {
position: absolute; left: 12px; top: 12px; z-index: 5;
padding: 10px 14px; border-radius: 10px;
background: var(--sb-f-wort); color: var(--sb-f-tinte);
transform: translateY(-200%);
}
.sprung:focus { transform: none; }
.kopf {
position: absolute; left: 0; right: 0; top: 0; z-index: 2;
display: flex; align-items: center; gap: 24px;
padding: clamp(12px, 1.6vw, 26px) var(--rand);
color: var(--sb-f-schrift);
}
.marke {
font-family: var(--schrift-wort);
font-size: clamp(26px, 2.1vw, 56px);
line-height: 1; letter-spacing: 0.02em; text-decoration: none;
min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-links { display: flex; gap: clamp(8px, 1.4vw, 28px); margin-left: clamp(8px, 2vw, 40px); }
.kopf-links a, .menue a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
font-size: clamp(15px, 1.08vw, 27px); font-weight: 600; text-decoration: none; border-radius: 8px;
}
.marke-rv, .kopf .nur-rv { display: none; }
.kopf-rechts { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.knopf {
display: inline-flex; align-items: center; justify-content: center;
border: 0; cursor: pointer; text-decoration: none; font: inherit; font-weight: 700;
transition: transform var(--dauer-sofort) var(--ease-out);
}
.knopf-haupt {
padding: 0 clamp(22px, 1.6vw, 40px); min-height: clamp(48px, 3.2vw, 78px); border-radius: 999px;
background: var(--sb-f-wort); color: var(--sb-f-tinte);
font-size: clamp(15px, 1.08vw, 27px); white-space: nowrap;
}
.knopf-menue { display: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: var(--sb-f-tinte); color: var(--sb-f-wort); }
.knopf-menue svg { width: 22px; height: 22px; }
.menue {
position: absolute; right: 0; top: 56px; left: auto !important;
display: grid; min-width: 220px; padding: 8px;
border-radius: 14px; background: var(--sb-f-tinte); color: var(--sb-f-wort);
}
.menue a { padding: 0 12px; }
.kopf a:focus-visible, .knopf:focus-visible, .folgt a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.knopf-haupt:focus-visible { outline-color: var(--sb-f-schrift); }
@media (hover: hover) and (pointer: fine) {
.kopf-links a:hover, .menue a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.knopf-haupt:hover { background: #fff; }
}
.sb-buehne { --sb-fuss-h: clamp(34px, 2.1vw, 52px); }
.sb-wort, .sb-karte-name { font-family: var(--schrift-wort); }
.sb-karte-zahl { font-family: var(--schrift-zahl); font-weight: 500; }
.fuss {
position: absolute; left: 0; right: 0; bottom: 0;
height: var(--sb-fuss-h);
display: flex; align-items: center; gap: 8px 22px;
padding: 0 var(--rand);
background: var(--sb-f-tinte); color: var(--sb-f-wort);
font-size: clamp(13px, 0.82vw, 20px); line-height: 1.25;
}
.fuss-version { margin-left: auto; font-family: var(--schrift-zahl); font-weight: 500; }
.sb-karte-dach {
margin: 0 0 0.45em; font-family: var(--schrift-zahl); font-weight: 500; font-size: clamp(12px, 0.8cqw, 19px);
letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
}
.sb-buehne { --sb-unten: calc(var(--sb-fuss-h, 34px) + 62px + 132px + 10px); }   
@container (max-width: 700px) {
.sb-karte { height: 132px; }
.sb-karte-dach { margin-bottom: 4px; font-size: 12px; line-height: 1.1; }
.sb-wischhinweis { font-size: 12px; height: 26px; left: auto; right: var(--sb-rand); bottom: calc(var(--sb-fuss-h, 34px) + 62px + 132px + 8px); margin: 0; padding: 0 9px; gap: 5px; }
}
.folgt {
padding: clamp(56px, 9vw, 150px) var(--rand);
border-top: 1px solid color-mix(in srgb, var(--sb-f-wort) 22%, transparent);
scroll-margin-top: 0;
}
.folgt h2 { margin: 6px 0 10px; font-family: var(--schrift-wort); font-weight: 400; font-size: clamp(38px, 5vw, 96px); line-height: 1; }
.folgt p { margin: 0; max-width: 60ch; }
.folgt-marke { font-family: var(--schrift-zahl); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
@media (max-width: 700px) {
.kopf { gap: 10px; padding: 10px 16px; }
.kopf-links { display: none; }
.knopf-menue { display: inline-flex; }
.knopf-haupt { min-height: 44px; padding: 0 16px; font-size: 15px; }
.sb-buehne { --sb-fuss-h: 52px; }
.fuss { flex-wrap: wrap; align-content: center; font-size: 11.5px; gap: 0 12px; padding: 0 16px; }
}
@media (max-width: 374px) {
.kopf { gap: 6px; }
.knopf-haupt { padding: 0 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.knopf { transition: none; }
}
.fuss a { color: inherit; text-underline-offset: 3px; }
.fuss-link { display: inline-flex; align-items: center; min-height: 32px; }
.fuss a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 700px) {
.fuss-gebaut { display: none; }
.fuss-link { min-height: 0; padding: 4px 0; }
}
.sb-buehne { --sb-fuss-h: clamp(44px, 2.1vw, 52px); }
.sb-buehne .fuss { gap: 0 clamp(18px, 1.4vw, 34px); color: color-mix(in srgb, var(--sb-f-wort) 80%, var(--sb-f-tinte)); }
.sb-buehne .fuss .fuss-link { min-height: 44px; padding: 0; }
@media (hover: hover) and (pointer: fine) { .sb-buehne .fuss a:hover { color: var(--sb-f-wort); } }
@media (max-width: 700px) {
.sb-buehne .fuss { flex-wrap: nowrap; font-size: 13px; gap: 0 12px; }
}
.kopf { position: fixed; z-index: 4;    transition: background-color var(--dauer-ui) var(--ease-out), box-shadow var(--dauer-ui) var(--ease-out); }
html[data-kopf="mit"] .kopf {
padding-top: clamp(6px, 0.35vw, 10px); padding-bottom: clamp(6px, 0.35vw, 10px);
background: var(--sb-f-tinte);
box-shadow: 0 1px 0 color-mix(in srgb, var(--sb-f-wort) 16%, transparent);
color: var(--sb-f-wort);
}
html[data-kopf="mit"] .knopf-haupt { min-height: clamp(44px, 2.3vw, 60px); background: var(--sb-f-wort); color: var(--sb-f-tinte); }
html[data-kopf="mit"] .kopf-gebaut { opacity: 1; }
@media (max-width: 1100px) {
html[data-kopf="mit"] .kopf-gebaut { display: inline-flex; }
html[data-kopf="mit"] .knopf-haupt { display: none; }
}
@media (max-width: 700px) {
html[data-kopf="mit"] .kopf { padding-top: 6px; padding-bottom: 6px; }
html[data-kopf="mit"] .kopf-gebaut { padding: 0 6px; font-size: 15px; }
}
.kopf-termin, .menue .menue-termin { display: none; }
html[data-frei] .kopf-gebaut, html[data-frei] .knopf-haupt, html[data-frei] .menue .menue-gebaut { display: none; }
html[data-frei] .kopf-termin {
display: inline-flex; align-items: center; min-height: clamp(44px, 2.3vw, 60px); padding: 0 clamp(16px, 1.1vw, 28px);
border-radius: 0.5rem; background: #FF7716; color: #0A0B0D; text-decoration: none; white-space: nowrap;
font: 600 clamp(15px, 1vw, 24px)/1.1 "Space Grotesk", system-ui, sans-serif;
}
html[data-frei] .kopf-termin:focus-visible { outline: 2px solid #F8F8F8; outline-offset: 3px; }
html[data-frei] .kopf-termin { transition: opacity var(--dauer-ui) var(--ease-out), visibility var(--dauer-ui); }
html[data-frei][data-termin-im-bild] .kopf-termin { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) { html[data-frei] .kopf-termin:hover { background: #FF8A3A; } }
html[data-frei] .menue .menue-termin { display: inline-flex; color: #FF7716; font-family: "Space Grotesk", system-ui, sans-serif; }
html[data-frei][data-kopf="mit"] .kopf { background: #0E0F12; color: #F8F8F8; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14); }
@media (max-width: 374px) { html[data-frei] .kopf-termin { padding: 0 12px; font-size: 14px; } }
#kontakt, #erlebt { scroll-margin-top: calc(var(--kopf-h, 64px) + 16px); }
@media (min-width: 701px) { html:has(#probierpaket[data-schritt="wahl"]) footer.kp-fuss-klein { position: relative; z-index: 4; margin-top: -64px; } }
footer.kp-fuss-klein .kp-fuss-stand { display: inline-flex; align-items: center; gap: 0.4em; }
footer.kp-fuss-klein .kp-fuss-version { font-family: var(--schrift-zahl); font-weight: 500; }
@media (max-width: 700px) {
footer.kp-fuss-klein { gap: 0 16px; font-size: 13px; }
html:has(#probierpaket[data-schritt="wahl"]) footer.kp-fuss-klein { margin-top: -96px; }
#probierpaket[data-schritt="wahl"] .kp-pulpa { padding-bottom: 24px; }
}
@media (max-width: 374px) {   
#probierpaket .kp-wahl-platz { height: min(19.5svh, 230px); }
}
@media (prefers-reduced-motion: reduce) { .kopf, html[data-frei] .kopf-termin { transition: none; } }
@media (prefers-reduced-transparency: reduce) {
html[data-kopf="mit"] .kopf { background: var(--sb-f-tinte); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-frei][data-kopf="mit"] .kopf { background: #0E0F12; }
}
@media (prefers-contrast: more) {
html[data-kopf="mit"] .kopf { background: var(--sb-f-tinte); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 0 var(--sb-f-wort); }
html[data-frei][data-kopf="mit"] .kopf { background: #0E0F12; box-shadow: 0 2px 0 #F8F8F8; }
}
.kopf-gebaut {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
font-size: clamp(14px, 0.95vw, 23px); font-weight: 500; text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 5px; opacity: 0.86; white-space: nowrap;
}
.kopf-gebaut:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .kopf-gebaut:hover { opacity: 1; } }
@media (max-width: 1100px) { .kopf-gebaut { display: none; } }
html[data-rest="laedt"] main > :not(#buehne), html[data-rest="laedt"] body > footer { visibility: hidden; overflow: clip; }
/* = schlange.css = */

:root { --schlange-h: clamp(28px, 2.25vw, 46px); }
.marke { gap: clamp(6px, 0.45vw, 12px); }
.schlange {
display: inline-block; flex: none;
width: calc(var(--schlange-h) * 1.031); height: var(--schlange-h);
}
.schlange-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.schlange-svg.schlange-frei {
position: fixed; z-index: 4; pointer-events: none;
width: calc(var(--schlange-h) * 1.031); height: var(--schlange-h);
}
.schlange-frei { transition: opacity var(--dauer-ui) var(--ease-out), transform var(--dauer-ui) var(--ease-out); }
.schlange-frei.schlange-weg { opacity: 0; transform: translateY(-10px) scale(0.8); }
@media (prefers-reduced-motion: reduce) { .schlange-frei { transition: none; } .schlange-frei.schlange-weg { transform: none; } }
.sch-kopf { fill: #0B0B0C; stroke: #FBF1E4; stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.sch-weiss { fill: #FFF7EC; }
.sch-pupille, .sch-lid { fill: #0B0B0C; }
.sch-zunge { transform: translateY(-22px); }
.sch-zu .sch-auge { visibility: hidden; }
@media (max-width: 700px) {
:root { --schlange-h: 28px; }
.marke { font-size: 23px; gap: 5px; }
.knopf-haupt { padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 374px) {
.marke { font-size: 21px; gap: 4px; }
.knopf-haupt { padding: 0 11px; font-size: 13.5px; }
.kopf-rechts { gap: 6px; }
}