/* ========================================================= CUSTOM CSS — migriert aus dem WordPress Customizer (Zusätzliches CSS / Additional CSS) am 2026-07-24. Diese Datei wird über functions.php geladen (Handle: child-custom-style). Enthält KEINEN globalen Reset — betrifft nur eigene Klassen. ========================================================= */ /*LETZTE BEITRÄGE WIDGET STYLEN START */ .recent-posts li{ display:flex!important; flex-direction:column!important; } .wp-block-latest-posts__post-date{ font-size:12px; color:#c2c2c2; } /*LETZTE BEITRÄGE WIDGET STYLEN END */ /* SAISON-UMSCHALTER STYLEN START */ .sv-season-filter { margin-bottom: 25px; text-align: center; } .sv-season-filter select { /* Padding: Oben (10px), Rechts (35px Platz für den Pfeil), Unten (10px), Links (15px) */ padding: 10px 35px 10px 15px; font-size: 16px; font-family: inherit; font-weight: 500; /* Text etwas dicker, wie im Bild */ border: 2px solid #fff; border-radius: 0; background-color: #004c87; color: #fff; cursor: pointer; /* Standard-Pfeil des Browsers ausblenden */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Eigenen, Base64-kodierten weißen Pfeil einfügen (wird garantiert überall angezeigt) */ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjU5IDAuNTlMNiA1LjE3TDEuNDEgMC41OUwwIDJMNiA4TDEyIDJMMTAuNTkgMC41OVoiLz48L3N2Zz4='); background-repeat: no-repeat; background-position: right 15px center; /* Exakte Position des Pfeils */ } /* Hover & Fokus Status */ .sv-season-filter select:hover, .sv-season-filter select:focus { outline: none; border-color: #de9e21; /* Das Gelb/Gold von Volley Liebefeld */ } /* Die Optionen im Dropdown selbst */ .sv-season-filter option { background-color: #013972; color: #fff; } /* SAISON-UMSCHALTER STYLEN END */ /*TABELLE VON API STYLEN START*/ .ranking-table-wrapper { overflow-x: auto; } /* gesamte Tabelle mit weißem Rahmen */ .ranking-table { width: 100%; border-collapse: collapse; border: 2px solid #fff !important; background-color: #004c87; color: #fff; font-size: 16px; margin-bottom:0px !important; } /* Kopfzeile */ .ranking-table th { padding: 20px 15px !important; background-color: #fff; color: #013972 !important; font-weight: 600 !important; font-size: 20px; text-transform: uppercase; text-align: center; } /* Zellen */ .ranking-table td { padding: 15px 15px !important; text-align: center; } /* Alternierende Zeilen */ .ranking-table tr:nth-child(even) td { background-color: #025596; } .ranking-table tr.highlight td { border-top: 3px solid #de9e21; border-bottom: 3px solid #de9e21; } /* Tabelle auf Mobile: Schrift + Abstände gleichmässig reduzieren, damit mehr passt / weniger cramped */ @media (max-width: 520px) { .ranking-table { font-size: 14px; } .ranking-table th { padding: 12px 10px !important; font-size: 15px; } .ranking-table td { padding: 9px 10px !important; } /* Scrollbar aus (der Fade zeigt die Scrollbarkeit, wie bei den Karussells) */ .ranking-table-wrapper { scrollbar-width: none; } .ranking-table-wrapper::-webkit-scrollbar { display: none; } } @media (max-width: 360px) { .ranking-table { font-size: 13px; } .ranking-table th { padding: 10px 8px !important; font-size: 14px; } .ranking-table td { padding: 8px 8px !important; } } /*TABELLE VON API STYLEN END*/ /* PLATZHALTERTEXTE (Fehler / Keine Daten) */ .sv-placeholder { font-size: 22px; font-style:italic; color: #ffffff; } /*SPIELE CARDS VON API STYLEN START*/ /* Grid für die volle Spielliste (mehrere Karten pro Reihe) */ .games-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 1440px) { .games-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 950px) { .games-list { grid-template-columns: 1fr; } } /* Kurzliste (Landingpage): Karten gestapelt */ .games-list-short .game-card-short { margin-bottom: 1.5rem; } /* ---------- Karte ---------- */ .game-card, .game-card-short { display: grid; grid-template-columns: 1fr auto; /* links Inhalt, rechts Meta */ row-gap: 26px; column-gap: 1rem; background-color: #004c87 !important; border-radius: 0 !important; border: 2px solid #fff; box-shadow: none !important; padding: 1rem 1.5rem; color: #fff; } /* Kopf: Datum bzw. Ort links, Heim/Auswärts-Badge rechts */ .game-header, .game-header-short { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: #fff; } /* Ort als Maps-Link (nur bei kommenden Spielen) */ a.game-location, a.game-location-short { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 0.75rem; color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 2px; } a.game-location:hover, a.game-location-short:hover { color: #de9e21; } /* Heim/Auswärts-Badge */ .game-badge, .game-badge-short { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 9px; border: 1px solid #fff; border-radius: 0; white-space: nowrap; align-self: center; line-height: 1.6; background: transparent; } .game-badge.is-home, .game-badge-short.is-home { color: #de9e21; border-color: #de9e21; } /* Heim = orange */ .game-badge.is-away, .game-badge-short.is-away { color: #fff; border-color: #fff; font-weight: 450; } /* Auswärts = weiss; leicht dünner (450 statt 600), damit weiss auf dunkel nicht optisch schwerer wirkt als das orange "Heim" */ /* Inhalt links (Resultat oder Vorschau) */ .score-container, .score-container-short { grid-column: 1; } .result-block, .result-block-short, .match-preview, .match-preview-short { display: flex; flex-direction: column; gap: 0.5rem; } /* Resultat */ .big-score, .big-score-short { font-size: 2.5rem; font-weight: 700; line-height: 1; color: #fff; } /* Sieger-Markierung: dezente Unterstreichung in Orange (Resultat + Team) */ .is-winner { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #de9e21; } /* Nächstes Spiel in der Kurzliste (Landingpage) mit orangem Rahmen hervorheben */ .game-card.sv-highlight, .game-card-short.sv-highlight { border-color: #de9e21; } /* Titel über den 3 Karten der Kurzliste (Landingpage) */ .sv-short-title { font-size: 1rem; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; } /* Etwas mehr Abstand zwischen einer Karte und dem darauffolgenden Titel */ .games-list-short .sv-short-title { margin-top: 1.4rem; } .games-list-short .sv-short-title:first-child { margin-top: 0; } /* Kurzliste auf schmalen Screens (<=420px): Logos ausblenden (mit höherer Spezifität + !important, damit Divi-Bild-Styles überschrieben werden) */ @media (max-width: 420px) { .games-list-short .team-logo-short { display: none !important; } } /* Satzresultate: horizontale Reihe mit "|" als Trennzeichen */ .set-results, .set-results-short { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 0.9rem; color: #fff; } .set-score, .set-score-short { white-space: nowrap; } .set-score:not(:last-child)::after, .set-score-short:not(:last-child)::after { content: "|"; margin: 0 0.5rem; opacity: 0.6; } /* Vorschau (kommendes Spiel): Datum prominent, Zeit darunter */ .preview-date, .preview-date-short { font-size: 2rem; font-weight: 600; line-height: 1; color: #fff; } .preview-time, .preview-time-short { font-size: 1.5rem; font-weight: 300; line-height: 1; color: #fff; } /* Meta rechts: Liga + Runde */ .game-meta, .game-meta-short { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.25rem; font-size: 0.85rem; color: #fff; } .league-caption, .league-caption-short, .phase-caption, .phase-caption-short { color: #fff; } /* Teams unten */ .teams, .teams-short { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 1rem; } .team, .team-short { display: flex; align-items: center; gap: 0.5rem; } .team-logo, .team-logo-short { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; } .team-name, .team-name-short { font-size: 1rem; font-weight: 500; color: #fff; /* Zeilenhöhe so, dass bei einem ECHTEN Textumbruch innerhalb des Namens der orange Winner-Underline (Offset 3px + 2px Dicke) der oberen Zeile nicht an die untere klebt. 1.2 war dafür zu eng. Der dadurch grössere Zeilenkasten wird beim gestapelten Layout (<=425px) über row-gap:0 kompensiert, damit der Abstand zwischen Heim/Auswärts gleich bleibt. */ line-height: 1.4; } .vs, .vs-short { font-size: 1.2rem; color: #fff; } /* ---------- MOBIL (<= 425px): eine Spalte, keine Logos, keine Liga/Runde ---------- */ @media (max-width: 425px) { /* minmax(0,1fr) statt 1fr: verhindert den Grid-Blowout, bei dem ein Kind mit grosser min-content-Breite (z.B. langer Ort/Name) die Spalte über die Kartenbreite hinaus aufbläht. */ .game-card, .game-card-short { grid-template-columns: minmax(0, 1fr); } /* Grid-Kinder dürfen schmaler als ihr Inhalt werden -> Ellipsis/Fade greift, Karte bleibt in der Breite */ .game-header, .game-header-short, .score-container, .score-container-short, .teams, .teams-short { min-width: 0; } .score-container, .score-container-short { grid-column: 1; } .game-meta, .game-meta-short { display: none; } .team-logo, .team-logo-short { display: none; } /* column-gap bleibt für den horizontalen Abstand (Name <-> "—"); row-gap:0, weil die grössere line-height (1.4) den Zeilenkasten schon so weit aufmacht, dass gestapelte Teams den gewünschten Abstand haben (sonst würden sie zu weit auseinander stehen). */ .teams, .teams-short { justify-content: flex-start; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0; } .big-score, .big-score-short { font-size: 2.2rem; } } /*SPIELE CARDS VON API STYLEN END*/ /*SPIELE 3-SEKTIONEN + KARUSSELL (Vollansicht) START*/ .sv-games { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; } .sv-section { width: 100%; } .sv-section-title { font-size: 1.4rem; font-weight: 600; color: #fff; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.03em; } /* "Nächstes Spiel": zentrierter, umrandeter Featured-Block */ .sv-next { border: 2px solid #fff; background-color: #004c87; padding: 1.75rem 2rem; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .sv-next-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .sv-next-date { font-size: 2.2rem; font-weight: 600; line-height: 1; } .sv-next-time { font-size: 1.6rem; font-weight: 300; line-height: 1; } .sv-next-teams { display: flex; align-items: center; justify-content: center; gap: 2.5rem; width: 100%; } .sv-next-team { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex: 1; max-width: 260px; } .sv-next-logo { width: 90px; height: 90px; object-fit: contain; margin-bottom: 0.15rem; } .sv-next-name { font-size: 1.4rem; font-weight: 600; line-height: 1.2; } .sv-next-rank { font-size: 0.9rem; opacity: 0.85; } .sv-next-vs { font-size: 1.4rem; font-weight: 300; opacity: 0.75; } .sv-next-info { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.9rem; opacity: 0.9; } .sv-next-info a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 2px; } .sv-next-info a:hover { color: #de9e21; } /* Karussell: horizontal ziehbar (Drag/Fade via script.js) */ .sv-carousel { overflow-x: auto; overflow-y: hidden; cursor: grab; padding-bottom: 0; -webkit-overflow-scrolling: touch; /* Scrollbar überall aus -> Navigation via Chevron-Buttons + Fade + Drag (auch Desktop). */ scrollbar-width: none; /* Firefox */ /* Standard: nur rechts ausblenden (Start ganz links). script.js aktualisiert je nach Scrollposition. */ -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%); } .sv-carousel.dragging { cursor: grabbing; } .sv-carousel.dragging * { user-select: none; } .sv-track { display: flex; gap: 1.5rem; } .sv-track .game-card { flex: 0 0 390px; width: 390px; } .sv-track .game-card .team-logo { display: none; } /* keine Logos in den Karussell-Karten */ .sv-carousel::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /*SPIELE 3-SEKTIONEN + KARUSSELL (Vollansicht) END*/ /*========================================================= MOBILE-OPTIMIERUNG SPIELKARTEN (<=520px / <=360px) Ergänzt 2026-07-29. Behebt: Überlauf im "Nächstes Spiel"- Block und zu breite Karussell-Karten auf schmalen Screens. =========================================================*/ /* ---- "Nächstes Spiel"-Featured-Block: kompakter, bündig, kein Überlauf ---- */ @media (max-width: 520px) { .sv-next { padding: 1.25rem 1rem; gap: 1rem; } /* Logos oben ausrichten, damit beide Teams unabhängig von der Namens-Zeilenzahl fluchten */ .sv-next-teams { gap: 0.6rem; align-items: flex-start; } /* min-width:0 erlaubt dem Flex-Item zu schrumpfen; lange Vereinsnamen umbrechen statt überlaufen */ .sv-next-team { max-width: none; min-width: 0; gap: 0.3rem; } /* Namen auf 2 Zeilen Höhe reservieren -> "Rang X" beider Teams stehen auf gleicher Höhe */ .sv-next-name { font-size: 0.95rem; line-height: 1.2; min-height: 2.4em; display: flex; align-items: center; justify-content: center; overflow-wrap: break-word; } .sv-next-logo { width: 56px; height: 56px; } .sv-next-date { font-size: 1.7rem; } .sv-next-time { font-size: 1.28rem; } .sv-next-vs { font-size: 0.95rem; } .sv-next-rank { font-size: 0.82rem; } .sv-next-info { font-size: 0.85rem; } } @media (max-width: 360px) { .sv-next { padding: 1.1rem 0.8rem; } .sv-next-teams { gap: 0.4rem; } .sv-next-logo { width: 46px; height: 46px; } .sv-next-name { font-size: 0.86rem; } .sv-next-date { font-size: 1.4rem; } .sv-next-time { font-size: 1.08rem; } } /* ---- Karussell-Karten: Breite + Typo an Mobile anpassen ---- */ @media (max-width: 520px) { /* Karte zentriert mit schmalen ~20px-Guttern links/rechts, in denen die Nachbarkarten knapp angedeutet werden (Fade + Chevron). scroll-snap zentriert; an den Enden klemmt der Browser -> erste Karte bündig links, letzte bündig rechts. border-box, da die Site sonst content-box nutzt (Padding käme sonst zur Breite dazu). */ .sv-track .game-card { box-sizing: border-box; flex: 0 0 calc(100% - 52px); width: calc(100% - 52px); max-width: none; scroll-snap-align: center; } /* Kleiner Gap -> von den ~26px Gutter bleibt mehr echte Nachbarkarte übrig (statt leerem Abstand), sodass deren Ecke/horizontale Ränder sichtbar werden, nicht nur der vertikale Rand. */ .sv-track { gap: 8px; } /* Karten mittig einrasten; script.js setzt den Fade dynamisch passend zur Position */ .sv-carousel { scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); } /* Während des Drags nicht einrasten (verhindert Ruckeln); beim Loslassen snappt es zur Mitte */ .sv-carousel.dragging { scroll-snap-type: none; } /* Datum/Zeit + Resultat sind die grössten Elemente -> verkleinern schafft Luft. Verhältnis Datum:Zeit bleibt ~1.33, damit der typografische Kontrast stimmig bleibt. */ .preview-date, .preview-date-short { font-size: 1.7rem; } .preview-time, .preview-time-short { font-size: 1.28rem; } .big-score, .big-score-short { font-size: 1.9rem; } .team-name, .team-name-short { font-size: 0.92rem; } .set-results, .set-results-short { font-size: 0.85rem; } } @media (max-width: 360px) { .preview-date, .preview-date-short { font-size: 1.4rem; } .preview-time, .preview-time-short { font-size: 1.08rem; } .big-score, .big-score-short { font-size: 1.65rem; } .set-results, .set-results-short { font-size: 0.8rem; } .team-name, .team-name-short { font-size: 0.86rem; } /* Durch die kleineren Schriften entsteht vertikal etwas viel Luft -> Karten leicht kompakter */ .game-card, .game-card-short { row-gap: 16px; padding: 0.85rem 1.25rem; } } /* ---- Ort-Link auf Mobile sanft rechts ausfaden (statt harter Ellipsis). Es ist ein klickbarer Maps-Link -> man muss den Text nicht ganz lesen können. ---- */ @media (max-width: 520px) { a.game-location, a.game-location-short { text-overflow: clip; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); } } /* ---- Scroll-Hinweis (Pfeil) über dem rechten Fade der Karussells ---- Wrapper + Pfeil werden von script.js erzeugt. Der Pfeil erscheint nur, solange rechts noch Inhalt folgt (JS steuert die Opazität in updateFade). */ .sv-carousel-wrap { position: relative; } .sv-scroll-cue { position: absolute; right: -17px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 0, 0, 0.32); color: #fff; cursor: pointer; /* klickbar: scrollt eine Karte weiter (script.js) */ pointer-events: auto; opacity: 0; /* Startwert; JS blendet je nach Scrollposition ein */ transition: opacity 0.25s ease, background-color 0.2s ease; z-index: 3; } .sv-scroll-cue.sv-cue-left { right: auto; left: -17px; } .sv-scroll-cue:hover { background: rgba(0, 0, 0, 0.5); } .sv-scroll-cue svg { display: block; } /* Chevron-Buttons auf ALLEN Breiten sichtbar (auch Desktop) — Scrollbar ist überall aus, navigiert wird per Chevron/Drag/Fade. JS steuert die Sichtbarkeit je nach Scrollposition. */ /* ---- Logo-Fallback: Volleyball-SVG, wenn ein Verein kein Logo hat ---- script.js setzt src auf ein weisses Volleyball-SVG und ergänzt .is-logo-fallback. Dünner weisser Rand + transparenter Inhalt (das Blau der Karte scheint durch). border-radius wird von der jeweiligen Logo-Klasse geerbt (Featured eckig, Team-Logos rund). */ img.is-logo-fallback { border: 2px solid rgba(255, 255, 255, 0.6); background: transparent; object-fit: contain; padding: 0; } /* ---- Scrollbalken auf Mobile ausblenden (Fade + Pfeil zeigen die Scrollbarkeit) ---- */ /* (Scrollbar wird jetzt bereits in der Basis-Regel von .sv-carousel für alle Breiten ausgeblendet.) */ /* ============================================================ CTA-BUTTONS ("Kalender abonnieren" / "Zum Gamecenter") Optik wie die bestehenden Divi-Buttons ("nach oben"): weiss auf dunkel, eckig, blaue Schrift, mit Pfeil; Hover -> transparent + weisse Schrift. Nutzt die Divi-Basisklasse .et_pb_button für Struktur; hier nur Farben/Icon. ============================================================ */ /* Links ausgerichtet + etwas Abstand -> Button gehört sichtbar zum Block darüber (Tabelle bzw. Karussell), sitzt aber nicht direkt drauf. */ .sv-cta-wrap { text-align: left; margin-top: 1rem; } .et_pb_button.sv-cta, a.sv-cta { color: #013972 !important; background-color: #ffffff; /* Rand IMMER da (auch im Normalzustand) + border-box: der Rand ist in die Grösse eingerechnet -> kein Springen/Resize beim Hover. */ border: 2px solid #ffffff !important; box-sizing: border-box; border-radius: 0; font-size: 14px; line-height: 1.6em; /* Padding fix per !important -> Divis Hover kann es nicht ändern -> Text rutscht nicht. */ padding: 0.35em 1.3em !important; font-weight: 600; display: inline-block; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; } a.sv-cta:hover { color: #ffffff !important; background-color: transparent !important; border-color: #ffffff !important; /* weisser Rand bleibt auf Hover sichtbar */ } /* Divi rendert bei .et_pb_button standardmässig einen Pfeil via :after (data-icon) — hier bewusst unterdrücken: kein Pfeil UND keine dadurch verursachte Text-Verschiebung. */ a.sv-cta:after, a.sv-cta:before { content: none !important; display: none !important; } a.sv-cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* ============================================================ TASTATUR-BEDIENBARKEIT der Karussell-Pfeile Die Pfeile sind jetzt echte