/* Paderborn Oli */ /* Home Deluxe Arena – Filter, Hover, Feinschliff. Alles auf #hda-arena begrenzt. */ #hda-arena a{transition:opacity .18s ease,background-color .18s ease} #hda-arena a:hover{opacity:.88} #hda-arena a[style*="background:#fff"]:hover{background:#e4e7eb!important;opacity:1} #hda-arena a[style*="background:#16283C"]:hover{background:#0f1d2e!important;opacity:1} #hda-arena a[data-pos]:hover{background:rgba(255,255,255,.16)!important} /* Tabs */ #hda-arena .hda-radio{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none} #hda-arena .hda-radio:focus-visible + .hda-tab{outline:2px solid currentColor;outline-offset:2px} #hda-arena .hda-tabs-dark .hda-radio:focus-visible + .hda-tab{outline-color:#fff} #hda-arena .hda-tabs-light .hda-radio:focus-visible + .hda-tab{outline-color:#16283C} #hda-arena #hda-more:focus-visible ~ .hda-more-btn{outline:2px solid #16283C;outline-offset:3px} #hda-arena #hda-squad-more:focus-visible ~ .hda-more-btn{outline:2px solid #fff;outline-offset:3px} #hda-arena .hda-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px} #hda-arena .hda-tab{cursor:pointer;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:9px 15px;user-select:none;transition:background-color .15s ease,color .15s ease} #hda-arena .hda-tabs-dark .hda-tab{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)} #hda-arena .hda-tabs-dark .hda-radio:checked + .hda-tab{background:#fff!important;color:#16283C!important} #hda-arena .hda-tabs-light{background:#F2F3F5;padding:4px;display:inline-flex} #hda-arena .hda-tabs-light .hda-tab{background:transparent;color:#5C6B7C;font-size:12px} #hda-arena .hda-tabs-light .hda-radio:checked + .hda-tab{background:#16283C!important;color:#fff!important} /* Kader-Filter */ #hda-arena:has(#hda-pos-tw:checked) a[data-pos]:not([data-pos="Torwart"]), #hda-arena:has(#hda-pos-ab:checked) a[data-pos]:not([data-pos="Abwehr"]), #hda-arena:has(#hda-pos-mf:checked) a[data-pos]:not([data-pos="Mittelfeld"]), #hda-arena:has(#hda-pos-st:checked) a[data-pos]:not([data-pos="Sturm"]){display:none!important} /* Spielplan-Filter */ #hda-arena:has(#hda-fx-home:checked) div[data-home="0"]{display:none!important} @media (max-width:760px){ #hda-arena section{padding-left:18px!important;padding-right:18px!important} #hda-arena .hda-fixtures > div[data-home]{grid-template-columns:1fr 1fr!important;gap:6px!important} } /* Theme-Reset: Shop-CSS zeichnet Linien/Unterstriche an Überschriften */ #hda-arena h1,#hda-arena h2,#hda-arena h3,#hda-arena h4{border:0!important;background:none!important;text-transform:none!important;padding-bottom:0!important} #hda-arena h1::before,#hda-arena h1::after, #hda-arena h2::before,#hda-arena h2::after, #hda-arena h3::before,#hda-arena h3::after, #hda-arena h4::before,#hda-arena h4::after{content:none!important;display:none!important} #hda-arena hr{display:none!important} /* Eckige Kanten wie im Shop - einzige Ausnahme sind die runden Slider-Punkte */ #hda-arena *:not(.hda-dot){border-radius:0!important} #hda-arena p{border:0!important} /* "Mehr Spiele anzeigen" – erste 5 Spieltage sichtbar */ #hda-arena .hda-more-btn{display:block;margin:18px auto 26px;cursor:pointer;width:max-content; font-size:12px;font-weight:600;letter-spacing:.02em;color:#5C6B7C; border:0;padding:6px 2px;line-height:1.2;user-select:none; text-decoration:underline;text-underline-offset:4px;text-decoration-color:#C9D0D8; transition:color .16s ease,text-decoration-color .16s ease} #hda-arena .hda-more-btn:hover{color:#16283C;text-decoration-color:#16283C} #hda-arena .hda-more-btn .hda-more-less{display:none} #hda-arena:has(#hda-more:checked) .hda-more-btn:not(.hda-more-dark) .hda-more-open{display:none} #hda-arena:has(#hda-more:checked) .hda-more-btn:not(.hda-more-dark) .hda-more-less{display:inline} #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="5"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="6"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="7"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="8"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="9"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="10"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="11"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="12"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="13"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="14"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="15"], #hda-arena:has(#hda-fx-home:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-hi="16"]{display:none!important} #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="5"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="6"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="7"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="8"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="9"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="10"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="11"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="12"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="13"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="14"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="15"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="16"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="17"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="18"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="19"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="20"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="21"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="22"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="23"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="24"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="25"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="26"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="27"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="28"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="29"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="30"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="31"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="32"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="33"], #hda-arena:has(#hda-fx-all:checked):not(:has(#hda-more:checked)) .hda-fixtures > div[data-ai="34"]{display:none!important} /* Kader: erst 12 Spieler, dann "kompletten Kader anzeigen" */ #hda-arena .hda-more-dark{color:rgba(255,255,255,.72);text-decoration-color:rgba(255,255,255,.35)} #hda-arena .hda-more-dark:hover{color:#fff;text-decoration-color:#fff} #hda-arena:has(#hda-squad-more:checked) .hda-more-dark .hda-more-open{display:none} #hda-arena:has(#hda-squad-more:checked) .hda-more-dark .hda-more-less{display:inline} /* eingeklappt: 3 je Position (12 Karten = 2 Reihen), bei aktivem Positionsfilter 6 */ #hda-arena:has(#hda-pos-all:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="3"],[data-pi="4"],[data-pi="5"],[data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-ab:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-mf:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-st:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]){display:none!important} /* Torwart hat nur 3 Spieler - dann gibt es nichts aufzuklappen */ #hda-arena:has(#hda-pos-tw:checked) .hda-more-dark{display:none!important} /* Fanstore-Slider: mittige Karte groß, Nachbarn schauen hervor */ #hda-arena .hda-slider{ display:flex!important;grid-template-columns:none!important; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:14px!important;padding:0 12%!important;scroll-padding:0 12%;scrollbar-width:none} #hda-arena .hda-slider::-webkit-scrollbar{display:none} #hda-arena .hda-slider > *{ flex:0 0 62%!important;scroll-snap-align:center;aspect-ratio:3/2!important; transition:opacity .3s ease} #hda-arena .hda-dots{display:flex;justify-content:center;gap:18px;margin:18px 0 0} #hda-arena .hda-dot{position:relative;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28); transition:background-color .18s ease,transform .18s ease} #hda-arena .hda-dot::after{content:"";position:absolute;inset:-8px} #hda-arena .hda-dot:hover{background:#fff;transform:scale(1.25)} #hda-arena .hda-dot:focus-visible{outline:2px solid #fff;outline-offset:7px} #hda-arena .hda-slider:focus-visible{outline:2px solid #fff;outline-offset:4px} /* ============ MOBILE (<=760px) ============ */ @media (max-width:760px){ /* Sektions-Abstände + Typo */ #hda-arena section{padding-top:48px!important;padding-bottom:48px!important;padding-left:18px!important;padding-right:18px!important} #hda-arena p{font-size:14px!important;line-height:1.8!important} /* alle zweispaltigen Blöcke stapeln, Bild zuerst */ #hda-arena div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:26px!important} /* Hero: keine fixen Höhen */ #hda-arena section[style*="height:660px"], #hda-arena section[style*="height:480px"], #hda-arena section[style*="height:560px"], #hda-arena section[style*="height:520px"]{height:auto!important;min-height:420px!important} #hda-arena img[src*="HomeDeluxeArena.png"]{width:min(220px,58vw)!important;height:auto!important} #hda-arena section > img{width:100%!important;height:100%!important;min-height:420px!important;object-fit:cover!important} /* Bild-Overlays/Verschiebungen mobil neutralisieren */ #hda-arena div[style*="position:absolute"][style*="linear-gradient(90deg"]{background:linear-gradient(180deg,rgba(15,29,46,.35) 0%,rgba(15,29,46,.9) 70%)!important} #hda-arena div[style*="margin-right:-"],#hda-arena div[style*="margin-left:-"]{margin-left:0!important;margin-right:0!important} /* absolut positionierte Textblöcke im Hero in den Fluss holen */ #hda-arena div[style*="position:absolute"][style*="padding:0 80px"], #hda-arena div[style*="position:absolute"][style*="padding:0 72px"]{padding:0 20px!important;max-width:100%!important} /* Fakten-Zeile: 2 Spalten, ohne Trennlinien */ #hda-arena div[style*="repeat(auto-fit,minmax(190px"]{grid-template-columns:1fr 1fr!important;gap:16px 10px!important} #hda-arena div[style*="repeat(auto-fit,minmax(190px"] > *{border-left:0!important;border-right:0!important;padding-left:0!important;padding-right:0!important;text-align:center!important} /* Kader: 2 Spalten, Tabs horizontal scrollbar */ #hda-arena .hda-squad.hda-squad{grid-template-columns:1fr 1fr!important;gap:10px!important} /* mobil (2 Spalten): 2 je Position = 8 Karten, bei aktivem Positionsfilter 4 */ #hda-arena:has(#hda-pos-all:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="2"],[data-pi="3"],[data-pi="4"],[data-pi="5"],[data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-ab:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="4"],[data-pi="5"],[data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-mf:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="4"],[data-pi="5"],[data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]), #hda-arena:has(#hda-pos-st:checked):not(:has(#hda-squad-more:checked)) .hda-squad > a:is([data-pi="4"],[data-pi="5"],[data-pi="6"],[data-pi="7"],[data-pi="8"],[data-pi="9"],[data-pi="10"]){display:none!important} #hda-arena .hda-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:14px} #hda-arena .hda-tabs::-webkit-scrollbar{display:none} #hda-arena .hda-tab{flex:0 0 auto;padding:11px 14px} /* Spielplan: Gegner groß, Rest darunter */ #hda-arena .hda-fixtures > div[data-home]{display:grid!important;grid-template-columns:1fr auto!important;grid-template-areas:"opp time" "date comp"!important;row-gap:5px!important;column-gap:10px!important;padding:14px 0!important} /* DOM-Reihenfolge: 1 Wettbewerb, 2 Datum, 3 Gegner, 4 Anstoss */ #hda-arena .hda-fixtures > div[data-home] > *:nth-child(1){grid-area:comp!important;font-size:11px!important;text-align:right!important;white-space:nowrap} #hda-arena .hda-fixtures > div[data-home] > *:nth-child(2){grid-area:date!important;font-size:11.5px!important;text-align:left!important;white-space:nowrap} #hda-arena .hda-fixtures > div[data-home] > *:nth-child(3){grid-area:opp!important;font-size:14.5px!important;font-weight:700!important;text-align:left!important} #hda-arena .hda-fixtures > div[data-home] > *:nth-child(4){grid-area:time!important;font-size:12px!important;text-align:right!important;white-space:nowrap} /* Paarung + Spielstaette umbrechen statt abschneiden (mobil war beides ellipsiert) */ #hda-arena .hda-fixtures > div[data-home] > *:nth-child(3){display:block!important} #hda-arena .hda-fixtures > div[data-home] > *:nth-child(3) > span{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} #hda-arena .hda-fixtures > div[data-home] > *:nth-child(3) > span + span{margin-top:3px;line-height:1.4} /* Blockplan: volle Breite, Höhe automatisch */ #hda-arena img[style*="object-fit:contain"]{width:100%!important;height:auto!important} #hda-arena div:has(> img[style*="object-fit:contain"]){height:auto!important;min-height:0!important;padding:0!important} /* Blockplan + Bildcontainer: keine fixen Höhen */ #hda-arena div[style*="height:420px"],#hda-arena div[style*="height:380px"], #hda-arena div[style*="height:340px"],#hda-arena div[style*="height:300px"]{height:auto!important;min-height:220px!important} #hda-arena div[style*="height:auto"] > img{height:auto!important} /* Fanstore-Slider mobil: eine Karte, Nachbar schaut hervor */ #hda-arena .hda-slider{gap:10px!important;padding:0 8%!important;scroll-padding:0 8%} #hda-arena .hda-slider > *{flex:0 0 84%!important} /* "Mehr anzeigen"-Buttons mobil volle Breite */ #hda-arena .hda-more-btn{width:max-content!important;text-align:center;padding:10px 18px!important} /* Buttons: volle Breite, Touch-Target */ #hda-arena a[style*="padding:14px"],#hda-arena a[style*="padding:13px"], #hda-arena a[style*="padding:12px"]{display:block!important;width:100%!important;text-align:center!important;min-height:48px!important;line-height:24px!important;padding-top:12px!important;padding-bottom:12px!important;padding-left:14px!important;padding-right:14px!important} } @media (max-width:420px){ #hda-arena .hda-squad{grid-template-columns:1fr 1fr!important} #hda-arena h1{font-size:28px!important} } /* Arena-Erlebnis: Text links, Bild rechts angeschnitten (nicht gestapelt) */ @media (max-width:760px){ /* Sektion voll auf Kante, damit das Bild wirklich aus dem Rand laeuft */ #hda-arena section[style*="background:#0F1D2E"]{padding:0!important} /* eigener dunkler Grund: bei krummen Zoomstufen (z.B. 75%) runden die beiden Spalten auf verschiedene Geraetepixel - ohne Grund blitzt dort eine Haarlinie durch */ #hda-arena div[style*="repeat(auto-fit,minmax(320px"]{grid-template-columns:1fr 34%!important;gap:0!important;align-items:stretch!important;background:#0F1D2E!important} #hda-arena div[style*="repeat(auto-fit,minmax(320px"] > div:first-child{padding:44px 16px 46px 18px!important;gap:18px!important} #hda-arena div[style*="min-height:360px"]{width:auto!important;min-height:0!important;margin:0!important;aspect-ratio:auto!important} #hda-arena div[style*="min-height:360px"] > img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:62% center!important} /* Verlauf wieder horizontal, auf die schmale Spalte gestaucht */ #hda-arena div[style*="min-height:360px"] > div[style*="linear-gradient(90deg"]{background:linear-gradient(90deg,#0F1D2E 0%,rgba(15,29,46,.45) 42%,rgba(15,29,46,0) 100%)!important} } /* Voll-Bleed-Sektionen (Bild als direktes Kind) ohne Innenabstand */ @media (max-width:760px){ #hda-arena section:has(> img){padding:0!important} } /* mobil ausgeblendete Elemente */ @media (max-width:760px){ #hda-arena .hda-hide-mobile{display:none!important} }