* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
#dc-root, .sc-host { overflow-x: clip; max-width: 100vw; }
a { color: #ffffff; text-decoration: none; }
a:hover { color: #2B8CFF; }
section[id] { scroll-margin-top: 96px; }
/* Sichtbarer Fokusring für Tastaturnavigation */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #2B8CFF; outline-offset: 3px; border-radius: 4px; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes circlePulse {
0% { transform: scale(2); opacity: 0; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
#pp-burger { display: none; }
#pp-cards { height: 320px; }
@media (max-width: 640px) {
#pp-cta { flex-wrap: wrap; }
#pp-cta h2 { white-space: normal !important; }
#pp-hero-text { max-width: 100% !important; }
#pp-headline span:nth-child(1) { font-size: clamp(38px, 20vw, 72px) !important; }
#pp-headline span:nth-child(2) { font-size: clamp(26px, 13.3vw, 48px) !important; }
#pp-headline span:nth-child(3) { font-size: clamp(12px, 6.05vw, 22px) !important; }
}
@media (max-width: 1280px) {
#pp-lower { flex-direction: column; }
#pp-cta { max-width: none !important; width: 100% !important; }
}
@media (max-width: 1024px) {
#pp-nav-left, #pp-nav-right, #pp-nav-cta { display: none !important; }
#pp-burger { display: flex !important; }
#pp-pill-bg { -webkit-mask-image: none !important; mask-image: none !important; }
#pp-pill-outline { display: none !important; }
#pp-logo-wrap { left: 0 !important; transform: translateY(-50%) !important; width: 52px !important; height: 52px !important; }
#pp-upper { flex-direction: column !important; align-items: flex-start !important; gap: 36px !important; }
#pp-partners { align-items: flex-start !important; }
#pp-dots { display: none !important; }
}
@media (max-width:1023px){
#pp-dots{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; top:calc(42vh + 50px) !important; bottom:auto !important; left:0 !important; right:0 !important; transform:none !important; }
}
@media (max-width: 768px) {
#pp-cards { flex-direction: column !important; height: auto !important; }
#pp-content { padding: 0 20px !important; }
}
@media (max-width: 640px) {
#pp-upper { gap: 28px !important; }
#pp-stats { gap: 14px !important; flex-wrap: nowrap !important; }
#pp-stats > div { flex: 1 1 0; min-width: 0; }
#pp-partners-marks { gap: 20px !important; font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
#pp-root * { animation: none !important; }
}
/* Border-Beam Glow für die CTA-Karte (Portierung von border-beam, MIT) */
#pp-cta > *:not([data-beam-bloom]), .ksc-beam > *:not([data-beam-bloom]) { position: relative; z-index: 4; }
#pp-cta::after, .ksc-beam::after {
content: ""; position: absolute; inset: 0; border-radius: 11px; padding: 1px;
clip-path: inset(0 round 12px);
background:
conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 54%,
rgba(255,255,255,.1) 57%, rgba(255,255,255,.3) 60%, rgba(255,255,255,.6) 63%, rgba(255,255,255,.75) 66%,
rgba(255,255,255,.6) 69%, rgba(255,255,255,.3) 72%, rgba(255,255,255,.1) 75%,
transparent 78%, transparent 100%),
radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(45,75,181), transparent),
radial-gradient(ellipse 60px 35px at 12% -5%, rgb(56,113,189), transparent),
radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(66,152,198), transparent),
radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(61,133,194), transparent),
radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(77,190,206), transparent),
radial-gradient(ellipse 85px 26px at 55% 100%, rgb(52,101,187), transparent),
radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(71,171,202), transparent),
radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(80,203,209), transparent),
radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(64,145,196), transparent);
-webkit-mask:
conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 30%,
rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, white 52%, white 80%,
rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: source-in, xor;
mask:
conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 30%,
rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, white 52%, white 80%,
rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: intersect, exclude;
pointer-events: none; z-index: 2; opacity: .35;
animation: beam-hue-shift 12s ease-in-out infinite;
}
#pp-cta::before, .ksc-beam::before {
content: ""; position: absolute; inset: 0; border-radius: 12px; clip-path: inset(0 round 12px);
background:
radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(45,75,181,.45), transparent),
radial-gradient(ellipse 54px 32px at 12% -5%, rgba(56,113,189,.45), transparent),
radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(66,152,198,.45), transparent),
radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(61,133,194,.45), transparent),
radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(77,190,206,.45), transparent),
radial-gradient(ellipse 77px 23px at 55% 100%, rgba(52,101,187,.45), transparent),
radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(71,171,202,.45), transparent),
radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(80,203,209,.45), transparent),
radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(64,145,196,.45), transparent);
box-shadow: inset 0 0 9px 1px rgba(255,255,255,.27);
-webkit-mask-image:
conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 30%,
rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, white 52%, white 80%,
rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
-webkit-mask-composite: source-in, source-over;
mask-image:
conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 30%,
rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%, white 52%, white 80%,
rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%, transparent 95%, transparent 100%),
linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
mask-composite: intersect, add;
pointer-events: none; z-index: 1; opacity: .5;
animation: beam-hue-shift 12s ease-in-out infinite;
}
#pp-cta [data-beam-bloom], .ksc-beam [data-beam-bloom] {
position: absolute; inset: 0; border-radius: 11px; clip-path: inset(0 round 12px); padding: 1px;
background: conic-gradient(from var(--beam-angle,0deg),
transparent 0%, transparent 58%,
rgba(255,255,255,.03) 62%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.2) 67%, rgba(255,255,255,.45) 69%,
rgba(255,255,255,.85) 70%, rgba(255,255,255,.85) 70.5%,
rgba(255,255,255,.45) 71.5%, rgba(255,255,255,.2) 73%, rgba(255,255,255,.08) 75%, rgba(255,255,255,.03) 78%,
transparent 82%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
filter: blur(8px) brightness(1.6) saturate(2.5);
pointer-events: none; z-index: 3; opacity: .35;
}
@keyframes beam-hue-shift {
0% { filter: hue-rotate(-30deg) brightness(1.6) saturate(2.5); }
50% { filter: hue-rotate(30deg) brightness(1.6) saturate(2.5); }
100% { filter: hue-rotate(-30deg) brightness(1.6) saturate(2.5); }
}
/* ===== Editorial-Sektionen: globale Farb-Token ===== */
:root {
--bg-deep:#101A2E; --bg-dark:#1B2942; --bg-mid:#2C3E5E; --bg-light:#F4F7FA; --bg-light-alt:#E4EAF2; --bg-page:#080E1A;
--accent:#1E7BFF; --accent-bright:#2B8CFF;
--text-on-dark:#FFFFFF; --muted-on-dark:#9BA3AF; --text-on-light:#0F1520; --muted-on-light:#5A6473;
/* Kicker-Farben je nach Sektionshintergrund (zweite Sicherheitsebene für Lesbarkeit) */
--accent-kicker-dark:#7FB2FF; --accent-kicker-light:#0B5BCB;
/* Höhe der Verlaufszone am Sektionsanfang; Sektionskopf setzt darauf auf */
--grad-h:clamp(80px, 8.4vw, 130px); --sec-pad:clamp(4rem, 6.5vw, 6.5rem);
}
/* Reveal-System (Basiszustand hier, sichtbar via .inview durch den Observer) */
[data-reveal]{ transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js-anim [data-reveal]{ opacity:0; will-change:opacity,transform; }
.js-anim [data-reveal="slide-up"]{ transform:translateY(40px); }
.js-anim [data-reveal="slide-left"]{ transform:translateX(40px); }
.js-anim [data-reveal="slide-right"]{ transform:translateX(-40px); }
.js-anim [data-reveal="scale"]{ transform:scale(.9); }
.js-anim [data-reveal="fade"]{ transform:none; }
[data-reveal].inview{ opacity:1 !important; transform:none !important; }
/* Hero-Inhalt auf Desktop etwas größer */
@media (min-width:1280px){
#pp-hero-text{ max-width:820px !important; }
#pp-headline > span:nth-child(1){ font-size:150px !important; }
#pp-headline > span:nth-child(2){ font-size:101px !important; }
#pp-headline > span:nth-child(3){ font-size:45px !important; }
#pp-hero-text > p{ font-size:17px !important; max-width:600px !important; }
#pp-stats [data-count-to]{ font-size:60px !important; }
#pp-cta{ max-width:620px !important; margin-top:48px !important; }
#pp-cta h2{ font-size:31px !important; }
}
/* Feste Sektionshöhen nur auf Desktop – darunter richtet sich die Höhe nach dem Inhalt */
@media (max-width:1279px){
#events, #erfolge, #historie, #mannschaften, #spielort, #mitmachen{ height:auto !important; }
}
/* ===== Gestapeltes Hero-Layout unterhalb von lg (1024px) ===== */
@media (max-width:1023px){
#pp-root{ background-color:var(--bg-deep) !important; min-height:0 !important; }
/* Bildbereich: feste Höhe oben, Slideshow läuft unverändert weiter */
#pp-bg{ inset:auto !important; top:76px !important; left:0; right:0; height:42vh !important; }
#pp-bg::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:80px; pointer-events:none; background:linear-gradient(to bottom, rgba(16,26,46,0) 0%, var(--bg-deep) 100%); z-index:2; }
/* Overlays und Lichtstreifen entfallen — Text steht auf einfarbigem Grund */
#pp-ov-1, #pp-ov-2, #pp-ov-3, #pp-ov-4, #pp-stripes, #pp-hero-fade{ display:none !important; }
#pp-content{ min-height:0 !important; padding-bottom:0 !important; padding-top:calc(42vh + 76px) !important; }
#pp-content > nav{ position:absolute !important; top:0; left:0 !important; right:0 !important; width:auto !important; max-width:none !important; box-sizing:border-box; padding-left:clamp(20px,4vw,52px) !important; padding-right:clamp(20px,4vw,52px) !important; }
#pp-pill, #pp-pill-bg{ width:auto !important; max-width:100% !important; }
#pp-content > div[style*="min-height"]{ display:none !important; }
#pp-upper{ margin-top:0 !important; padding-top:40px !important; }
#pp-hero-text *{ text-shadow:none !important; }
#pp-lower{ padding-bottom:24px !important; }
/* Navigationspille liegt über dem Bild – etwas kräftiger hinterlegt */
#pp-pill-bg{ background:rgba(16,26,46,.7) !important; }
/* Social-Karten wandern ans Ende des Textbereichs */
#pp-social{ position:static !important; padding-top:0 !important; background:none !important; }
#pp-social .scroll-hint{ display:none !important; }
#pp-social-row{ background:none !important; border-top:none !important; padding-bottom:40px !important; }
}
@media (max-width:639px){
#pp-stats{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; }
#pp-bg{ height:36vh !important; }
#pp-content{ padding-top:calc(36vh + 76px) !important; }
#pp-dots{ top:calc(36vh + 50px) !important; }
}
/* Hero-Slideshow: Bildausschnitt je Displaygröße nachführen */
@media (max-width:1023px){ .hero-slide-img{ background-position:50% 38% !important; } }
@media (max-width:767px){ .hero-slide-img{ background-position:50% 32% !important; } }
@media (max-width:479px){ .hero-slide-img{ background-position:50% 28% !important; } }
@media (orientation:portrait) and (max-width:767px){ .hero-slide-img{ background-size:cover !important; } }
/* Lazy-Image: Platzhalter pulsiert, Bild blendet weich ein */
.lazy-ph{ animation:lazyPulse 1.6s ease-in-out infinite; }
.lazy-img{ opacity:0; transition:opacity .5s ease; }
.lazy-img.loaded{ opacity:1; }
@keyframes lazyPulse{ 0%,100%{opacity:.5;} 50%{opacity:.25;} }
/* Event-Karten Hover (Descendant-Hover ist inline nicht abbildbar) */
[data-ev-card]{ transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s; }
[data-ev-card]:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.2); box-shadow:0 16px 44px rgba(0,0,0,.55); }
[data-ev-img]{ transition:transform .4s cubic-bezier(.16,1,.3,1); }
[data-ev-card]:hover [data-ev-img]{ transform:scale(1.04); }
[data-ev-arrow]{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
[data-ev-card]:hover [data-ev-arrow]{ transform:translateX(4px); }
/* Mannschaften: dunkle Karten auf hellem Grund */
.team-card{ position:relative; overflow:hidden; border-radius:16px; padding:24px; background:linear-gradient(150deg,#1A2740,#0D1119); box-shadow:0 8px 32px rgba(15,21,32,.12); border:1px solid transparent; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease; }
.team-card:hover{ transform:translateY(-6px); box-shadow:0 18px 48px rgba(15,21,32,.22); border-color:var(--liga,#1E7BFF); }
.team-bignum{ position:absolute; right:12px; bottom:-20px; z-index:1; font-family:'Anton',sans-serif; font-size:clamp(90px,12vw,150px); line-height:1; color:rgba(255,255,255,.06); pointer-events:none; }
.team-btn-p{ transition:background-color .25s ease; }
.team-btn-p:hover{ background:var(--accent-bright) !important; }
.team-btn-s{ transition:background-color .25s ease, border-color .25s ease; }
.team-btn-s:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.4) !important; }
.team-btn-p:focus-visible, .team-btn-s:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.team-arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.team-btn-p:hover .team-arrow{ transform:translateX(3px); }
.team-grid > *:nth-child(1) .team-card, .team-grid .team-card{ transition-delay:0ms; }
.team-grid > *:nth-child(2) .team-card{ transition-delay:110ms; }
.team-grid > *:nth-child(3) .team-card{ transition-delay:220ms; }
.team-grid > *:nth-child(4) .team-card{ transition-delay:330ms; }
.team-grid > .team-card:nth-child(2){ transition-delay:110ms; }
.team-grid > .team-card:nth-child(3){ transition-delay:220ms; }
.team-grid > .team-card:nth-child(4){ transition-delay:330ms; }
@media (min-width:768px){ .team-card{ padding:28px; } }
@media (min-width:1024px){ .team-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:479px){ .team-btns{ flex-direction:column !important; } }
@media (prefers-reduced-motion:reduce){
.team-card, .team-card:hover{ transform:none !important; transition:none !important; }
.team-bignum{ transform:none !important; opacity:1 !important; }
}
/* Ordnungszahl: skaliert beim Reveal, Deckkraft bleibt bei 25% */
[data-reveal="num"]{ opacity:1; transform:scale(.9); }
[data-reveal="num"].inview{ opacity:1 !important; transform:none !important; }
/* Ligatabelle-Link Hover-Pfeil */
.lig-link:hover .team-arrow{ transform:translateX(4px); }
/* Timeline-Verbindungslinie (Mitglied werden): zeichnet sich von links nach rechts */
[data-reveal="line"]{ opacity:1; transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal="line"].inview{ opacity:1 !important; transform:scaleX(1) !important; }
/* Footer: Link-Hover mit 4px-Verschiebung */
.foot-link{ transition:color .25s ease, transform .25s ease; }
.foot-link:hover{ color:#fff !important; transform:translateX(4px); }
.foot-arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.foot-link:hover .foot-arrow{ transform:translate(3px,-3px); }
/* Pill-Button "Zur Gesamtchronik" im Zitatkasten */
.chron-pill{ transition:background-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.chron-pill:hover{ background:var(--accent-bright) !important; transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,123,255,.34) !important; }
.chron-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.chron-arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.chron-pill:hover .chron-arrow{ transform:translateX(3px); }
/* Mobil: Button über die volle Kartenbreite, unter der Quellenangabe */
@media (max-width:559px){ .chron-pill{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .chron-pill, .chron-pill:hover{ transform:none !important; } }
/* Footer: Social-Kreise */
.social-btn{ transition:background-color .3s ease, color .3s ease, border-color .3s ease; }
.social-btn:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
.legal-link{ transition:color .25s ease; }
.legal-link:hover{ color:#fff !important; }
/* Footer: Partnerlogos */
.partner-logo{ opacity:.6; transition:opacity .3s ease; }
.foot-partners .partner-logo{ min-width:0; }
.foot-partners image-slot{ display:block; width:100%; max-width:100%; height:100%; }
@media (min-width:768px) and (max-width:1023px){
.foot-partners{ gap:24px !important; }
.foot-partners .partner-logo{ height:110px !important; }
}
@media (max-width:767px){
.foot-partners{ gap:20px !important; }
.foot-partners .partner-logo{ min-width:0; height:100px !important; }
.foot-partners image-slot{ display:block; width:100%; max-width:100%; height:100%; }
}
.partner-logo:hover{ opacity:1; }
/* Skip-to-content nur bei Tastaturfokus sichtbar */
.skip-link{ position:fixed; top:12px; left:12px; z-index:200; background:var(--accent); color:#fff; padding:12px 20px; border-radius:8px; font-size:14px; font-weight:600; transform:translateY(-160%); transition:transform .2s ease; }
.skip-link:focus{ transform:translateY(0); color:#fff; }
/* Nach-oben-Button */
#pp-to-top{ opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
#pp-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
/* ===== Hero-Einblend-Choreografie: reine CSS-Keyframes, starten beim Laden ===== */
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes heroFadeDown{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroScaleIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
/* fill-mode:backwards → "from"-Frame (opacity:0) gilt schon während des Delays, aber nach dem Ende bleibt nichts stehen. Mit both blieb transform:translateY(0) zurück; Chrome legt für transformierte Elemente eine eigene Zeichenebene an und der backdrop-filter der Glass-Pille verlor damit seinen Hintergrund. */
.hero-anim{ animation-duration:800ms; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-fill-mode:backwards; }
/* Glass-Pille: Animation auf die Hülle, damit backdrop-filter des Kindes sofort greift */
#pp-pill-bg{ will-change:backdrop-filter; }
.hero-up{ animation-name:heroFadeUp; }
.hero-down{ animation-name:heroFadeDown; }
.hero-in{ animation-name:heroFade; }
.hero-scale{ animation-name:heroScaleIn; }
/* ===== Social-Leiste am Hero-Fuß ===== */
@keyframes chevBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.chev-bounce{ animation:chevBounce 2000ms ease-in-out infinite; }
/* Scroll-Hinweis: Maus mit wanderndem Punkt (ab md) */
@keyframes scrollDot{ 0%{ transform:translate(-50%,0); opacity:0; } 20%{ transform:translate(-50%,0); opacity:1; } 75%{ transform:translate(-50%,14px); opacity:1; } 100%{ transform:translate(-50%,18px); opacity:0; } }
@keyframes scrollChevron{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }
.scroll-mouse{ display:none; }
.scroll-chev{ display:none; }
@media (min-width:768px){ .scroll-mouse{ display:flex; } }
.scroll-dot{ animation:scrollDot 1900ms cubic-bezier(.4,0,.2,1) infinite; }
.scroll-chevron{ animation:scrollChevron 2000ms ease-in-out infinite; }
/* Sticky-Navbar: f\u00e4hrt von oben ein, sobald die Haupt-Nav aus dem Blick scrollt */
#pp-sticky{ position:fixed; top:0; left:0; right:0; z-index:100; transform:translateY(-100%); transition:transform .4s cubic-bezier(.16,1,.3,1); pointer-events:none; }
#pp-sticky.show{ transform:translateY(0); }
#pp-sticky.show .pp-sticky-inner{ pointer-events:auto; }
[data-mega]{ max-width:calc(100vw - 32px); }
[data-mega] > *{ max-width:100%; }
.pp-sticky-link{ font-family:Anton; font-size:17px; letter-spacing:.1em; color:rgba(255,255,255,.8); transition:color .15s; }
.pp-sticky-link:hover{ color:#2B8CFF; }
@media (max-width:935px){ #pp-sticky-links{ display:none !important; } #pp-sticky-burger{ display:flex !important; } }
/* Unter 1025px keine schwebende Pillen-Nav — die Sticky-Nav ist von Anfang an sichtbar */
@media (max-width:1024px){
#pp-content > nav{ display:none !important; }
#pp-sticky{ transform:none !important; pointer-events:auto !important; }
#pp-sticky .pp-sticky-inner{ pointer-events:auto !important; }
}
@media (min-width:1025px){ #pp-sticky:not(.show) [data-mega]{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } }
/* Haupt-Nav-Mega-Men\u00fcs ausblenden, sobald die Sticky-Bar aktiv ist (geteilter Hover-State) */
#pp-root.sticky-active #pp-nav-right [data-mega]{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
/* Logo-Bild weich einblenden (verhindert harten Cut beim späten Laden) */
#pp-logo, #pp-logo * { animation:heroFade 900ms ease both; animation-delay:200ms; }
@media (prefers-reduced-motion: reduce){ #pp-logo, #pp-logo * { animation:none !important; } }
.scroll-hint:hover .scroll-mouse-outline{ border-color:rgba(255,255,255,.85) !important; }
.scroll-hint:hover #pp-social-scroll-text{ color:#fff !important; }
.soc-link{ position:relative; display:flex; align-items:center; justify-content:center; padding:13px; color:rgba(255,255,255,.55); transition:color .25s ease, transform .25s ease; }
.soc-link:hover{ color:#fff; transform:translateY(-2px); }
.soc-label{ position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(6px); opacity:0; pointer-events:none; white-space:nowrap; font-size:11px; color:#fff; background:rgba(16,26,46,.85); border-radius:999px; padding:4px 12px; transition:opacity .25s ease, transform .25s ease; }
.soc-link:hover .soc-label{ opacity:1; transform:translateX(-50%) translateY(0); }
/* Kanal-Karten am Hero-Fuß */
.soc-card{ transition:background-color .25s ease, border-color .25s ease, transform .25s ease; }
.soc-card:hover{ transform:translateY(-3px); }
.soc-card-ic{ transition:color .25s ease; flex:none; }
.soc-card:focus-visible{ outline:2px solid #2B8CFF; outline-offset:3px; }
.soc-ig .soc-card-ic{ color:rgba(225,48,108,.75); }
.soc-ig:hover{ background:rgba(225,48,108,.15) !important; border-color:#E1306C !important; }
.soc-ig:hover .soc-card-ic{ color:#E1306C; }
.soc-fb .soc-card-ic{ color:rgba(24,119,242,.75); }
.soc-fb:hover{ background:rgba(24,119,242,.15) !important; border-color:#1877F2 !important; }
.soc-fb:hover .soc-card-ic{ color:#1877F2; }
.soc-yt .soc-card-ic{ color:rgba(255,0,0,.75); }
.soc-yt:hover{ background:rgba(255,0,0,.15) !important; border-color:#FF0000 !important; }
.soc-yt:hover .soc-card-ic{ color:#FF0000; }
.soc-tw .soc-card-ic{ color:rgba(145,70,255,.75); }
.soc-tw:hover{ background:rgba(145,70,255,.15) !important; border-color:#9146FF !important; }
.soc-tw:hover .soc-card-ic{ color:#9146FF; }
.soc-wa .soc-card-ic{ color:rgba(37,211,102,.75); }
.soc-wa:hover{ background:rgba(37,211,102,.15) !important; border-color:#25D366 !important; }
.soc-wa:hover .soc-card-ic{ color:#25D366; }
@media (max-width:1279px){
#pp-social-row{ flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
}
@media (min-width:1024px) and (max-width:1279px){
#pp-content{ padding-bottom:300px !important; }
}
@media (max-width:1023px){
#pp-social-cards{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:767px){
#pp-social-cards{ grid-template-columns:repeat(2,1fr) !important; }
#pp-content{ padding-bottom:0 !important; }
}
@media (max-width:479px){
#pp-social-cards{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:479px){
#pp-content{ padding-bottom:0 !important; }
.soc-card{ justify-content:center !important; }
.soc-card-txt{ display:none !important; }
}
@media (min-width:1024px) and (max-height:700px){ #pp-social-prompt{ display:none !important; } }
/* Flache Bildschirme, etwa ein Tablet im Querformat (gemessen
1097x511). Vorher stand hier display:none; das nahm zugleich
autoScrollToContent sein Ziel.
position:relative statt static ist zwingend. Die Leiste liegt
direkt im Hero, neben den absolut gesetzten Bildebenen, und
die spannen ueber die volle Hoehe. Ein Element ohne
Positionierung wird vor allen positionierten Geschwistern
gezeichnet, also darunter - der z-index:15 bliebe wirkungslos,
denn er greift nur bei positionierten Elementen. Mit static
war die Leiste vorhanden und gemessen 1097x67 gross, aber
nirgends zu sehen.
Die beiden Regeln zur Hero-Geometrie gehoeren dazu: ohne sie
bleibt der Hero auf min-height:100vh plus 200px Innenabstand
stehen, und die Leiste rutscht auf Dokumentposition 865 - bei
511px Fensterhoehe fast zwei Bildschirme tief.
Der Abstandhalter zwischen Pille und Hero-Text bleibt
ausdruecklich stehen. Unterhalb von 1024px wird er
ausgeblendet, dort ersetzt ihn aber ein padding-top am
Inhaltsbereich. Wird er hier ohne Ersatz entfernt, rutscht
der Kicker unter die Navigationspille. Sein flex-grow
stoert nicht mehr, weil min-height:0 keinen Ueberschuss
mehr zu verteilen laesst - er bleibt auf 46px. */
@media (min-width:1024px) and (max-height:560px){
#pp-root{ min-height:0 !important; }
#pp-content{ min-height:0 !important; padding-bottom:0 !important; }
#pp-social{ position:relative !important; z-index:15; padding-top:0 !important; background:none !important; }
#pp-social .scroll-hint{ display:none !important; }
#pp-social-row{ border-top:none !important; padding-bottom:24px !important; }
}
#pp-root.menu-open #pp-content{ z-index:70 !important; }
/* Social-Leiste dockt unter der Sticky-Nav an */
#pp-social.pinned{ position:fixed !important; top:var(--pin-top,64px) !important; bottom:auto !important; left:0; right:0; z-index:95; padding-top:0 !important; background:none !important; transition:top .3s cubic-bezier(.16,1,.3,1); }
#pp-social.pinned .scroll-hint{ display:none !important; }
/* angedockt: wie die Sticky-Nav auf die Containerbreite begrenzen, damit die Außenränder unberührt bleiben */
#pp-social.pinned > div:last-child{ max-width:1600px; margin:0 auto; }
#pp-social.pinned #pp-social-row{ border-top:none !important; border-bottom:none !important; box-shadow:none !important; }
#pp-root.menu-open #pp-social.pinned{ display:none !important; }
@media (prefers-reduced-motion: reduce){ .chev-bounce{ animation:none !important; } .scroll-dot{ animation:none !important; opacity:1 !important; transform:translate(-50%,7px) !important; } .scroll-chevron{ animation:none !important; opacity:1 !important; } }
@media (prefers-reduced-motion: reduce){
.hero-anim{ animation:none !important; opacity:1 !important; transform:none !important; }
}
/* Einmalige Einblendung des ersten Hintergrundbildes (legt sich vor Ken-Burns/Crossfade) */
@keyframes heroBgFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroBgScale{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
/* Nur weiches Einblenden, kein Heranzoomen beim Seitenaufruf */
.hero-bg-intro{ animation:heroBgFade 1200ms ease both; }
/* Historie-Scrollytelling: aktive Epoche voll deckend */
.era{ opacity:.35; transition:opacity .5s ease; }
.era.active{ opacity:1; }
@keyframes histIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;} }
/* Responsives Raster (nur Standard-Breakpoints) */
@media (min-width:640px){ .stat-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (min-width:640px){ .venue-feat-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (min-width:768px){ .ev-grid{ grid-template-columns:repeat(3,1fr) !important; } .sec-head{ grid-template-columns:1.1fr .9fr !important; } }
@media (min-width:768px){ .join-steps{ grid-template-columns:repeat(3,1fr) !important; } .join-line{ display:block !important; } .join-cta{ grid-template-columns:3fr 2fr !important; align-items:center !important; } .foot-main{ grid-template-columns:repeat(2,1fr) !important; } .foot-partners{ grid-template-columns:repeat(4,1fr) !important; } .foot-bottom{ flex-direction:row !important; align-items:center !important; justify-content:space-between !important; } }
@media (min-width:1024px){
.foot-main{ grid-template-columns:2fr 1fr 1fr 1fr !important; }
.venue-grid{ grid-template-columns:1fr 1fr !important; }
.venue-feat-grid{ grid-template-columns:repeat(4,1fr) !important; }
}
@media (min-width:1024px){
.stat-grid{ grid-template-columns:repeat(4,1fr) !important; }
.hist-grid{ grid-template-columns:40% 60% !important; }
.era-year-inline{ display:none !important; }
}
@media (max-width:1023px){
.hist-sticky{ display:none !important; }
.era{ opacity:1 !important; }
}
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1 !important; transform:none !important; }
.lazy-img{ opacity:1 !important; }
[data-ev-card], [data-ev-img], [data-ev-arrow]{ transition:none !important; }
}
/* ===== Unterseite Chronik: Erfolgskurve ===== */
/* Der Scroller clippt in beiden Achsen (overflow-x:auto erzwingt overflow-y:auto),
daher oben/seitlich Platz für die Hover-Labels reservieren. */
.vg-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:74px 0 6px; }
.vg-axis-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vg-chart{ position:relative; aspect-ratio:1000/320; min-width:1040px; }
@media (min-width:1024px){ .vg-chart{ min-width:0; } .vg-hint{ display:none !important; } }
/* Zeichenanimation als Wisch von links nach rechts: rein geometrisch, ohne
Längenberechnung — dadurch auf jeder Bildschirmbreite exakt vollständig. */
@keyframes vgDraw{ from{ clip-path:inset(-20% 100% -20% -2%); } to{ clip-path:inset(-20% -2% -20% -2%); } }
.vg-line{ clip-path:inset(-20% 100% -20% -2%); }
.vg-line.inview{ animation:vgDraw 1800ms cubic-bezier(.32,.72,.3,1) forwards; }
.vg-pt{ position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; padding:0; border:none; background:none; cursor:pointer; opacity:0; transition:opacity .45s ease; }
.vg-pt.inview{ opacity:1; }
.vg-dot{ position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:999px; border:3px solid #101A2E; transition:transform .2s ease; }
.vg-pt:hover .vg-dot, .vg-pt:focus-visible .vg-dot{ transform:scale(1.35); }
.vg-tip{ position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,6px); opacity:0; pointer-events:none; white-space:nowrap; text-align:left; background:#1B2942; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:8px 12px; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:opacity .2s ease, transform .2s ease; z-index:5; }
.vg-pt:hover .vg-tip, .vg-pt:focus-visible .vg-tip{ opacity:1; transform:translate(-50%,0); }
/* Randnahe Punkte: Label statt zentriert an der Kante ausrichten bzw. nach unten kippen */
.vg-tip.at-left{ left:0; transform:translate(-6px,6px); }
.vg-pt:hover .vg-tip.at-left, .vg-pt:focus-visible .vg-tip.at-left{ transform:translate(-6px,0); }
.vg-tip.at-right{ left:auto; right:0; transform:translate(6px,6px); }
.vg-pt:hover .vg-tip.at-right, .vg-pt:focus-visible .vg-tip.at-right{ transform:translate(6px,0); }
.vg-tip.below{ bottom:auto; top:calc(100% + 10px); }
.vg-tip-y{ font-family:'Anton',sans-serif; font-size:15px; color:#fff; letter-spacing:.02em; }
.vg-tip-t{ font-size:12px; color:var(--muted-on-dark); margin-top:2px; }
.vg-axis{ position:relative; height:22px; margin-top:10px; min-width:1040px; }
@media (min-width:1024px){ .vg-axis{ min-width:0; } }
.vg-axis span{ position:absolute; transform:translateX(-50%); font-size:13px; color:var(--muted-on-dark); font-variant-numeric:tabular-nums; }
/* ===== Unterseite Chronik: Timeline ===== */
.vg-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
.vg-sticky{ position:sticky; top:104px; }
.vg-era{ opacity:.4; transition:opacity .5s ease; }
.vg-era.active{ opacity:1; }
@keyframes vgYearIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.vg-year-in{ animation:vgYearIn .4s cubic-bezier(.16,1,.3,1) both; }
.vg-year-inline{ display:block; }
@media (min-width:1024px){
.vg-grid{ grid-template-columns:38% 1fr; gap:clamp(3rem,6vw,5rem); }
.vg-year-inline{ display:none; }
}
@media (max-width:1023px){ .vg-side{ display:none !important; } .vg-era{ opacity:1 !important; } }
@media (prefers-reduced-motion: reduce){
.vg-line{ clip-path:none !important; animation:none !important; }
.vg-pt{ opacity:1 !important; }
.vg-era{ opacity:1 !important; }
.vg-year-in{ animation:none !important; }
}
/* ===== Unterseite Tischfußball ===== */
.tf-topics{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:768px){ .tf-topics{ grid-template-columns:repeat(3,1fr); } }
.tf-topic svg{ opacity:.85; transition:opacity .3s ease; }
.tf-topic:hover svg{ opacity:1; }
.tf-grid-6{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,2.5rem) clamp(1rem,3vw,2rem); }
@media (min-width:768px){ .tf-grid-6{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1280px){ .tf-grid-6{ grid-template-columns:repeat(6,1fr); } }
.tf-tl{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:1024px){
.tf-tl{ grid-template-columns:repeat(6,1fr); gap:0; position:relative; }
.tf-tl::before{ content:""; position:absolute; left:0; right:0; top:9px; height:2px; background:rgba(255,255,255,.14); }
}
.tf-cards{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .tf-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tf-cards{ grid-template-columns:repeat(3,1fr); } }
.tf-card{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.tf-card:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(15,21,32,.16); }
.tf-card-img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.tf-card:hover .tf-card-img{ transform:scale(1.04); }
.tf-ext{ transition:color .2s ease; }
.tf-ext:hover{ color:var(--accent-bright) !important; }
.tf-tier{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
/* Logoplatte: mobil kompakt, ab sm größer — Stufen bleiben auch schmal lesbar */
.tf-tier-logo{ width:52px; height:52px; }
@media (min-width:640px){ .tf-tier-logo{ width:64px; height:64px; } }
@media (min-width:1024px){ .tf-tier-logo{ width:76px; height:76px; } }
/* Auf schmalen Bildschirmen alle Stufen volle Breite, sonst wird der Text gequetscht */
@media (max-width:767px){ .tf-tier{ width:100% !important; } }
.tf-tier:hover{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){
.tf-card:hover{ transform:none; } .tf-card:hover .tf-card-img{ transform:none; } .tf-tier:hover{ transform:none; }
}
/* ===== Unterseite Höhepunkte ===== */
.hp-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3rem) clamp(1rem,3vw,2rem); }
@media (min-width:1024px){ .hp-stats{ grid-template-columns:repeat(4,1fr); } }
.hp-hof{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .hp-hof{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .hp-hof{ grid-template-columns:repeat(3,1fr); } }
.hp-card{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.hp-card:hover{ transform:translateY(-4px); box-shadow:0 18px 46px rgba(15,21,32,.16); border-color:rgba(30,123,255,.45); }
.hp-av{ transition:box-shadow .3s ease, transform .3s ease; }
.hp-card:hover .hp-av{ box-shadow:0 0 0 6px rgba(30,123,255,.14), 0 10px 26px rgba(30,123,255,.3); }
.hp-pill{ transition:background-color .25s ease, border-color .25s ease, color .25s ease; }
.hp-pill:hover{ border-color:rgba(255,255,255,.5); }
.hp-cat{ transition:border-color .3s ease, background-color .3s ease; }
.hp-cat:hover{ border-color:rgba(255,255,255,.28); }
.hp-cat-head{ transition:background-color .25s ease; }
.hp-cat-head:hover{ background:rgba(255,255,255,.05); }
.hp-chev{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
/* Lange Kategorienamen dürfen umbrechen, nie unter die Pillen laufen */
.hp-cat-title{ overflow-wrap:anywhere; hyphens:auto; }
/* Mobil: Titel in eigene Zeile, Pillen darunter, Chevron oben rechts */
@media (max-width:639px){
.hp-cat-head{ flex-wrap:wrap; row-gap:10px; column-gap:8px; position:relative; padding-right:46px !important; }
.hp-cat-title{ flex:1 1 100% !important; }
.hp-chev{ position:absolute; right:16px; top:20px; }
}
/* Aufklappen: Höhe über grid-template-rows animieren (0fr → 1fr) */
.hp-panel{ display:grid; transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.hp-panel > div{ overflow:hidden; min-height:0; }
.hp-rows{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:1024px){ .hp-rows{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
.hp-card:hover{ transform:none; }
.hp-panel{ transition:none !important; }
.hp-chev{ transition:none !important; }
}
/* ===== Unterseite "Unser Spielort" ===== */
/* Galerien: gleichmäßige Raster, Bilder im Verhältnis 16:9.
Mobil 1 Spalte, ab 640 px 2, ab 1024 px 3 (Tische) bzw. 4 (Location). */
.sp-galx{ display:grid; grid-template-columns:1fr; gap:16px; }
.sp-gal-item{ position:relative; overflow:hidden; border-radius:16px; padding:0; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); cursor:zoom-in; text-align:left; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.sp-gal-item:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.28); }
.sp-gal-item:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }
.sp-gal-bild{ display:block; width:100%; aspect-ratio:16/9; background:rgba(255,255,255,.04); flex:none; }
.sp-gal-bild img{ display:block; width:100%; height:100%; object-fit:cover; }
.sp-gal-text{ display:block; padding:14px clamp(14px,1.6vw,18px) clamp(16px,1.8vw,20px); color:var(--muted-on-dark); font-size:15px; line-height:1.65; text-wrap:pretty; }
/* Abschlusstext und Preiskasten nebeneinander */
.sp-abschluss{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,36px); align-items:start; }
@media (min-width:1024px){ .sp-abschluss{ grid-template-columns:1.5fr 1fr; } }
.sp-preis-zeile{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.2); }
.sp-preis-zeile:last-child{ border-bottom:0; padding-bottom:2px; }
@media (min-width:640px){ .sp-galx{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
.sp-gal-3{ grid-template-columns:repeat(3,1fr); }
.sp-gal-4{ grid-template-columns:repeat(4,1fr); }
}
/* Lightbox */
.sp-lb-btn{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:9999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background-color .2s ease, border-color .2s ease; }
.sp-lb-btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.sp-lb-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* Karte */
.sp-map{ position:relative; overflow:hidden; border-radius:16px; box-shadow:0 18px 48px rgba(15,21,32,.16); aspect-ratio:4/3; background:var(--bg-light-alt); }
.sp-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (min-width:768px){ .sp-map{ aspect-ratio:16/9; } }
@media (min-width:1024px){ .sp-map{ aspect-ratio:21/9; } }
/* Outline-Button auf hellem Grund */
.sp-btn-o{ transition:background-color .25s ease, border-color .25s ease; }
.sp-btn-o:hover{ background:rgba(30,123,255,.08) !important; border-color:var(--accent) !important; }
.sp-btn-o:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
/* Zwei Spalten (Bewirtung / Ausstattung) */
.sp-two{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,36px); align-items:start; }
@media (min-width:1024px){ .sp-two{ grid-template-columns:1fr 1fr; } }
/* Ausstattungs-Grid */
.sp-feat{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:480px){ .sp-feat{ grid-template-columns:repeat(2,1fr); } }
.sp-feat-card{ transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.sp-feat-card:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.28); }
.sp-textlink{ transition:color .2s ease; }
.sp-textlink:hover{ color:var(--accent-bright) !important; }
.sp-textlink:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sp-textlink .sp-arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.sp-textlink:hover .sp-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
.sp-gal-item, .sp-gal-item:hover, .sp-feat-card, .sp-feat-card:hover{ transform:none !important; transition:none !important; }
}
@keyframes megaRow{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.mega-action:hover{ background:linear-gradient(110deg, rgba(30,123,255,.34), rgba(30,123,255,.12)) !important; border-color:rgba(43,140,255,.5) !important; }
.mega-action:hover .mega-arrow{ transform:translateX(4px); }
.mega-arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.mega-row:focus-visible{ outline:2px solid #2B8CFF; outline-offset:2px; }
/* Hervorhebung des Eintrags rein per Hover/Fokus — kein State nötig */
.mega-row:hover, .mega-row:focus-visible{ background:rgba(255,255,255,.07) !important; }
.mega-row:hover .mega-bar, .mega-row:focus-visible .mega-bar{ opacity:1 !important; }
.mega-row:hover .mega-title, .mega-row:focus-visible .mega-title{ color:#fff; }
.mega-ic svg{ stroke:rgba(255,255,255,.5); transition:stroke .25s ease; }
.mega-row:hover .mega-ic svg, .mega-row:focus-visible .mega-ic svg{ stroke:#2B8CFF; }
@media (prefers-reduced-motion: reduce){ .mega-row{ animation:none !important; } }
/* -------------------------------------------------------------
Hover- und Aktiv-Zustaende
In der HTML-Vorlage standen diese Zustaende als Attribut
style-hover bzw. style-active am Element; die Laufzeit erzeugte
daraus Klassen und schrieb die Regeln direkt ins Stylesheet-
Objekt. Hier stehen sie als normales CSS.
Die Klassennamen tragen den Namen der Herkunftsseite, weil die
urspruengliche Nummerierung pro Seite lief und sich sonst
widersprechen wuerde.
------------------------------------------------------------- */
/* Pixel Paragon Hero.dc.html */
.kscp-home-0:hover { background: linear-gradient(90deg, rgb(30, 123, 255), rgb(43, 140, 255)) !important; }
.kscp-home-1:active { transform: scale(0.97) !important; }
.kscp-home-2:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.45) !important; }
.kscp-home-3:hover { background: var(--accent-bright) !important; color: rgb(255, 255, 255) !important; }
.kscp-home-4:hover { background: rgb(30, 123, 255) !important; color: rgb(255, 255, 255) !important; }
.kscp-home-5:hover { color: rgb(43, 140, 255) !important; }
.kscp-home-6:hover { background: rgb(30, 123, 255) !important; }
.kscp-home-7:active { transform: scale(0.96) !important; }
.kscp-home-8:hover { background: rgb(43, 140, 255) !important; }
.kscp-home-9:active { transform: scale(0.94) !important; }
/* Vereinsgeschichte.dc.html */
.kscp-vereinsgeschichte-0:hover { background: rgb(30, 123, 255) !important; color: rgb(255, 255, 255) !important; }
.kscp-vereinsgeschichte-1:hover { color: rgb(43, 140, 255) !important; }
.kscp-vereinsgeschichte-2:hover { background: rgb(30, 123, 255) !important; }
.kscp-vereinsgeschichte-3:active { transform: scale(0.96) !important; }
.kscp-vereinsgeschichte-4:hover { background: rgb(43, 140, 255) !important; }
.kscp-vereinsgeschichte-5:active { transform: scale(0.94) !important; }
/* Tischfussball.dc.html */
.kscp-tischfussball-0:hover { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.07) !important; }
.kscp-tischfussball-1:hover { background: rgb(30, 123, 255) !important; color: rgb(255, 255, 255) !important; }
.kscp-tischfussball-2:hover { color: rgb(43, 140, 255) !important; }
.kscp-tischfussball-3:hover { background: rgb(30, 123, 255) !important; }
.kscp-tischfussball-4:active { transform: scale(0.96) !important; }
.kscp-tischfussball-5:hover { background: rgb(43, 140, 255) !important; }
.kscp-tischfussball-6:active { transform: scale(0.94) !important; }
/* Hoehepunkte.dc.html */
.kscp-hoehepunkte-0:hover { background: rgb(30, 123, 255) !important; color: rgb(255, 255, 255) !important; }
.kscp-hoehepunkte-1:hover { color: rgb(43, 140, 255) !important; }
.kscp-hoehepunkte-2:hover { background: rgb(30, 123, 255) !important; }
.kscp-hoehepunkte-3:active { transform: scale(0.96) !important; }
.kscp-hoehepunkte-4:hover { background: rgb(43, 140, 255) !important; }
.kscp-hoehepunkte-5:active { transform: scale(0.94) !important; }
/* Spielort.dc.html */
.kscp-spielort-0:hover { background: rgb(30, 123, 255) !important; color: rgb(255, 255, 255) !important; }
.kscp-spielort-1:hover { color: rgb(43, 140, 255) !important; }
.kscp-spielort-2:hover { background: rgb(30, 123, 255) !important; }
.kscp-spielort-3:active { transform: scale(0.96) !important; }
.kscp-spielort-4:hover { background: rgb(43, 140, 255) !important; }
.kscp-spielort-5:active { transform: scale(0.94) !important; }
/* ---------------------------------------------------------------
Ergaenzungen fuer die Joomla-Ausgabe
--------------------------------------------------------------- */
/* Sprungmarke fuer Tastaturnutzung */
.ksc-skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 18px;
background: #2B8CFF;
color: #fff;
border-radius: 0 0 8px 0;
}
.ksc-skip:focus { left: 0; }
/* Joomla-Systemmeldungen im Seitendesign.
Bewusst auf den Meldungsbehaelter begrenzt: frueher galt die Regel
fuer jedes .alert unter #ksc-content und faerbte damit auch die
Meldungskaesten in Beitraegen weiss auf hellem Grund. */
#system-message-container .alert,
#ksc-content > joomla-alert .alert {
max-width: 1280px;
margin: 0 auto;
padding: 14px 18px;
border-radius: 12px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: #fff;
}
/* ---------------------------------------------------------------
Hero-Hoehe auf flachen Desktop-Bildschirmen
---------------------------------------------------------------
Der Hero steht auf min-height:100vh. Alle Schriftgroessen darin
haengen an der Breite, nie an der Hoehe - der Textblock ist auf
einem 1080p- und einem 1440p-Bildschirm also gleich hoch in
Pixeln. Auf dem flacheren Schirm passt er nicht mehr in die
Sichthoehe, der Hero waechst darueber hinaus und die Social-
Leiste am unteren Rand rutscht unter die Sichtkante.
Gemessen bei 947 px Sichthoehe (1080p mit Browserleiste):
Navigation 91 px
dehnbarer Zwischenraum oben 85 px
Textblock (#pp-upper) 662 px
dehnbarer Zwischenraum unten 57 px
leere Zeile (#pp-lower) 44 px
Reserve fuer die Leiste 150 px
= 1089 px, also 142 px zu viel
Gegenmittel: die senkrechten Abstaende an die Viewport-Hoehe
koppeln. Schriftgroessen bleiben unangetastet. Jede Rampe ist so
gelegt, dass sie bei 947 px ihre Untergrenze und ab 1330 px den
urspruenglichen Wert erreicht - auf hohen Bildschirmen aendert
sich damit nichts. Die Werte ueberschreiben Angaben im
style-Attribut und brauchen deshalb !important. */
@media (min-width: 1024px) {
/* --- Abstaende oberhalb des Textblocks --- */
#pp-content > nav { padding-top: clamp(22px, calc(4.18vh - 17.6px), 38px) !important; }
#pp-content > div[style*="1.15 1 auto"] {
min-height: clamp(40px, calc(20.8vh - 157px), 130px) !important;
}
/* --- Abstaende innerhalb des Textblocks --- */
#pp-hero-text > div:first-child { margin-bottom: clamp(14px, 1.8vh, 24px) !important; }
#pp-hero-text > p { margin-top: clamp(18px, 2.25vh, 30px) !important; }
#pp-stats {
margin-top: clamp(24px, 3vh, 40px) !important;
margin-bottom: clamp(12px, 1.5vh, 20px) !important;
}
#pp-cta { margin-top: clamp(14px, 1.8vh, 24px) !important; }
/* --- Abstaende unterhalb des Textblocks --- */
#pp-content > div[style*="6vh"] {
min-height: clamp(32px, calc(12.5vh - 86px), 80px) !important;
}
#pp-lower { padding-bottom: clamp(0px, calc(11.5vh - 109px), 44px) !important; }
#pp-content { padding-bottom: clamp(120px, calc(20.9vh - 78px), 200px) !important; }
/* --- Die Social-Leiste selbst ---
Sie ist 268 px hoch, davon oben 78 px durchsichtiger Verlauf.
Sichtbar sind rund 190 px, die unter dem WhatsApp-Kasten Platz
brauchen. Unter der Leiste stehen nach obiger Rechnung nur noch
152 px zur Verfuegung, deshalb ruecken auch ihre eigenen
Abstaende zusammen - Schriftgroessen bleiben auch hier gleich. */
#pp-social { gap: clamp(8px, calc(4.7vh - 36.5px), 26px) !important; }
#pp-social .scroll-hint { gap: clamp(6px, calc(1.05vh - 3.9px), 10px) !important; }
#pp-social-row {
padding-top: clamp(10px, calc(3.13vh - 19.7px), 22px) !important;
padding-bottom: clamp(10px, calc(3.13vh - 19.7px), 22px) !important;
}
}
/* ---------------------------------------------------------------
Leuchtspur auf der Rueckseite der Termin-Karten
Die Spur laeuft mit offset-path entlang des Rahmens. Sichtbar ist
sie nur im 1px breiten Rahmen - das innere Feld der Rueckseite
liegt darueber und verdeckt den Rest. Dass sie auf der
Vorderseite nicht erscheint, ergibt sich aus dem
backface-visibility: hidden der Rueckseite.
offset-path gibt es seit 2022 breit, die Schreibweise mit
border-box ist juenger. Ohne Unterstuetzung bleibt die Spur
ausgeblendet; die Karte sieht dann aus wie zuvor.
--------------------------------------------------------------- */
.ksc-trail { display: none; }
@supports (offset-path: border-box) {
.ksc-trail {
display: block;
position: absolute;
width: 25%;
aspect-ratio: 2 / 1;
background: radial-gradient(100% 100% at right, #2ea3db, transparent 50%);
offset-path: border-box;
offset-anchor: 100% 50%;
animation: ksc-trail-journey 6s infinite linear;
pointer-events: none;
}
}
@keyframes ksc-trail-journey {
to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.ksc-trail { display: none; }
}
/* ---------------------------------------------------------------
Beitragsansicht (com_content, Ansicht "Beitrag")
Heller Bereich zwischen Kopf- und Fussbereich. Oben und unten
je ein Verlauf, damit keine harte Kante entsteht - dasselbe
Muster wie am Kopf der News-Sektion auf der Startseite.
--------------------------------------------------------------- */
.ksc-artikel {
--ksc-chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4l8 8-8 8M13 4l8 8-8 8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
position: relative;
display: flow-root;
background: var(--bg-light);
color: var(--text-on-light);
font-family: Inter, 'Inter Ersatz', system-ui, sans-serif;
padding: clamp(6rem, 10vw, 10rem) 0 calc(clamp(1.5rem, 2.5vw, 2.5rem) + 200px);
}
.ksc-artikel-verlauf-oben,
.ksc-artikel-verlauf-unten {
position: absolute;
left: 0;
right: 0;
pointer-events: none;
}
.ksc-artikel-verlauf-oben {
top: 0;
height: 180px;
background: linear-gradient(to bottom,
var(--bg-dark) 0%,
color-mix(in srgb, var(--bg-dark) 60%, var(--bg-light)) 40%,
color-mix(in srgb, var(--bg-dark) 25%, var(--bg-light)) 70%,
var(--bg-light) 96%,
var(--bg-light) 100%);
}
/* Der Fussbereich traegt an seinem oberen Rand einen eigenen Schleier
(rgba(244,247,250,.165) ueber --bg-deep). Seine oberste Zeile ist
dadurch nicht --bg-deep, sondern #363F50. Endet der Verlauf auf
--bg-deep, entsteht genau an der Naht eine sichtbare Kante. */
.ksc-artikel-verlauf-unten {
bottom: 0;
height: 200px;
background: linear-gradient(to top,
#363F50 0%,
color-mix(in srgb, #363F50 60%, var(--bg-light)) 40%,
color-mix(in srgb, #363F50 25%, var(--bg-light)) 70%,
var(--bg-light) 96%,
var(--bg-light) 100%);
}
/* Gleiche Breite und gleicher Seitenabstand wie die Sektionen der Startseite */
.ksc-artikel-huelle {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 2.5rem);
}
.ksc-artikel-kicker {
margin: 0 0 0.75rem;
font-family: Oswald, sans-serif;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-kicker-light);
}
.ksc-artikel-titel {
margin: 0;
font-family: Anton, sans-serif;
font-size: clamp(2.25rem, 4.5vw, 4rem);
font-weight: 400;
line-height: 0.95;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--text-on-light);
}
/* Kopfzeile: Autor, Lesezeit, Datum, Zugriffe */
.ksc-artikel-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 28px;
margin-top: 1.4rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(15, 21, 32, 0.12);
font-family: Oswald, sans-serif;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-on-light);
}
.ksc-artikel-meta > span {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ksc-artikel-meta svg {
width: 17px;
height: 17px;
flex: 0 0 auto;
fill: none;
stroke: var(--accent-kicker-light);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ksc-artikel-bild {
margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.ksc-artikel-bild img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 18px 44px rgba(15, 21, 32, 0.16);
}
/* --- Beitragstext ------------------------------------------------ */
.ksc-artikel-text {
margin-top: clamp(2rem, 3.5vw, 2.75rem);
font-size: clamp(1rem, 1.1vw, 1.125rem);
line-height: 1.75;
color: var(--text-on-light);
}
.ksc-artikel-text > :first-child { margin-top: 0; }
.ksc-artikel-text > :last-child { margin-bottom: 0; }
.ksc-artikel-text p { margin: 0 0 1.25em; }
.ksc-artikel-text h2,
.ksc-artikel-text h3,
.ksc-artikel-text h4,
.ksc-artikel-text h5 {
color: var(--text-on-light);
text-transform: uppercase;
}
.ksc-artikel-text h2 {
margin: 2em 0 0.6em;
font-family: Anton, sans-serif;
font-weight: 400;
font-size: clamp(1.75rem, 2.6vw, 2.5rem);
line-height: 1.05;
letter-spacing: 0.01em;
}
.ksc-artikel-text h3 {
margin: 1.9em 0 0.55em;
font-family: Oswald, sans-serif;
font-weight: 600;
font-size: clamp(1.3rem, 1.9vw, 1.6rem);
line-height: 1.2;
letter-spacing: 0.04em;
}
.ksc-artikel-text h4,
.ksc-artikel-text h5 {
margin: 1.7em 0 0.5em;
font-family: Oswald, sans-serif;
font-weight: 500;
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.25;
letter-spacing: 0.08em;
}
.ksc-artikel-text a {
color: var(--accent-kicker-light);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.2s ease;
}
.ksc-artikel-text a:hover { color: var(--accent); }
.ksc-artikel-text strong,
.ksc-artikel-text b { font-weight: 700; color: var(--text-on-light); }
.ksc-artikel-text ul,
.ksc-artikel-text ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.ksc-artikel-text li { margin: 0.4em 0; }
.ksc-artikel-text li::marker { color: var(--accent-kicker-light); }
.ksc-artikel-text img {
max-width: 100%;
height: auto;
border-radius: 14px;
box-shadow: 0 16px 38px rgba(15, 21, 32, 0.14);
}
.ksc-artikel-text figure { margin: 2em 0; }
.ksc-artikel-text figcaption {
margin-top: 0.6em;
font-size: 0.85rem;
color: var(--muted-on-light);
}
.ksc-artikel-text hr {
border: 0;
border-top: 1px solid rgba(15, 21, 32, 0.12);
margin: 2.5em 0;
}
.ksc-artikel-text table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.75em;
font-size: 0.95em;
}
.ksc-artikel-text th,
.ksc-artikel-text td {
padding: 0.7em 0.9em;
text-align: left;
border-bottom: 1px solid rgba(15, 21, 32, 0.12);
}
.ksc-artikel-text th {
font-family: Oswald, sans-serif;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* --- Zitat -------------------------------------------------------
Im Editor entweder setzen oder einem Block die Klasse
"ksc-zitat" geben. Die Namenszeile darunter bekommt "ksc-zitat-autor";
ohne Klasse wird ersatzweise der letzte Absatz so dargestellt.
----------------------------------------------------------------- */
.ksc-artikel-text blockquote,
.ksc-artikel-text .ksc-zitat {
margin: 2.5em 0;
padding: 0.2em 0 0.2em clamp(1.25rem, 3vw, 2rem);
border-left: 4px solid var(--accent);
font-family: Oswald, sans-serif;
font-weight: 500;
font-size: clamp(1.25rem, 2vw, 1.6rem);
font-style: normal;
line-height: 1.4;
color: var(--text-on-light);
}
.ksc-artikel-text blockquote p,
.ksc-artikel-text .ksc-zitat p { margin: 0 0 0.4em; }
.ksc-artikel-text blockquote cite,
.ksc-artikel-text blockquote footer,
.ksc-artikel-text .ksc-zitat cite,
.ksc-artikel-text .ksc-zitat footer,
.ksc-artikel-text .ksc-zitat-autor,
.ksc-artikel-text blockquote > p:last-child:not(:only-child),
.ksc-artikel-text .ksc-zitat > p:last-child:not(:only-child) {
display: block;
margin: 0.85em 0 0;
font-family: Inter, 'Inter Ersatz', system-ui, sans-serif;
font-size: 0.8rem;
font-weight: 600;
font-style: normal;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.4;
color: var(--accent-kicker-light);
}
/* Bestandsmarkup aus dem alten Astroid-Template:
…