/* BOBO Bundesliga - Erscheinungsbild "Sportredaktion". Alle Schriften lokal, keine externen Requests. */ @font-face { font-family: 'Saira Condensed'; src: url('fonts/saira-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Saira Condensed'; src: url('fonts/saira-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { --red: #C8102E; --ink: #101418; --bg: #FFFFFF; --surface: #F4F5F7; --muted: #6B7280; --line: #E3E5E9; /* --muted on white passes WCAG AA (4.83:1) but drops to 4.43:1 on --surface - below the 4.5:1 threshold for normal-size text. This darker shade is only for text sitting on --surface (the stand notice, the footer); --muted itself is unchanged everywhere else. */ --muted-on-surface: #5B616D; --cond: 'Saira Condensed', 'Arial Narrow', Arial, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } .num { font-variant-numeric: tabular-nums; } /* Kopf */ .masthead { background: var(--ink); color: #fff; } .masthead .inner { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .masthead img { display: block; } .brand { font-family: var(--cond); font-weight: 700; font-size: 25px; letter-spacing: 1.2px; line-height: 1; } .brand small { display: block; font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: .28em; color: #8A9099; margin-top: 3px; font-weight: 600; } .slogan { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A9099; border-left: 1px solid #333a44; padding-left: 13px; } .site-nav { background: var(--ink); border-top: 1px solid #262c35; } .site-nav .inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; display: flex; gap: 22px; overflow-x: auto; } .site-nav a { color: #C7CCD3; text-decoration: none; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 0; border-bottom: 3px solid transparent; white-space: nowrap; } .site-nav a:hover { color: #fff; } .site-nav a.active { color: #fff; border-bottom-color: var(--red); } .wrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 80px; } h1 { font-family: var(--cond); font-weight: 700; font-size: 34px; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 4px; } h2 { font-family: var(--cond); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; } h2::after { content: ""; flex: 1; height: 1px; background: var(--line); } h3 { font-family: var(--cond); font-weight: 700; font-size: 19px; line-height: 1.15; text-transform: uppercase; margin: 0 0 5px; } .lede { color: var(--muted); margin: 0 0 18px; } /* Spieltag-Navigation */ .matchday-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .matchday-nav a { text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--muted); } .matchday-nav a:hover { color: var(--ink); } .matchday-nav .prev, .matchday-nav .next { white-space: nowrap; } .matchday-strip { display: flex; flex-wrap: wrap; gap: 4px; } .matchday-strip a { min-width: 24px; text-align: center; padding: 3px 6px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; } .matchday-strip a.active { background: var(--ink); color: #fff; border-color: var(--ink); } .card { border: 1px solid var(--line); background: #fff; padding: 15px 17px; } .grid { display: grid; gap: 14px; } .grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } /* Spiel-Zeile */ .match { border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 12px 15px; background: #fff; } .match .teams { display: flex; align-items: center; gap: 9px; font-weight: 600; } .match .teams span:first-child { flex: 1; } .match .teams span:last-child { flex: 1; text-align: right; } .tip { background: var(--red); color: #fff; padding: 2px 9px; font-family: var(--cond); font-weight: 700; font-size: 16px; } /* Die Trefferquote im Tipp-Badge (siehe templates/_tip.html): kleiner und zurueckgenommen, aber im selben Chip - sie soll den Tipp einordnen, nicht mit ihm konkurrieren. Inter statt der kondensierten Schrift, damit das Prozentzeichen nicht gequetscht wirkt. */ .tip .odds { font-family: 'Inter', system-ui, sans-serif; font-size: 10.5px; font-weight: 600; opacity: .82; margin-left: 5px; letter-spacing: 0; } .bar { display: flex; height: 6px; margin: 10px 0 4px; } .bar i { display: block; } .bar .h { background: var(--red); } .bar .d { background: #C3C7CD; } .bar .a { background: var(--ink); } .legend { display: flex; gap: 18px; align-items: center; margin: 0 0 14px; font-size: 11px; color: var(--muted); } .legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; } .legend .h { background: var(--red); } .legend .d { background: #C3C7CD; } .legend .a { background: var(--ink); } .pct { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); } /* Die wahrscheinlichsten Ergebnisse auf der Spieltagsseite. Steht dort, wo bis zum 27.08.2026 nur "Tipp je Schema: 4 / 3 / 2 / 0 ..." stand - eine Zeile, die ohne Erklaerung des Schemas nicht zu entschluesseln war. `picked` markiert den getippten Eintrag: er ist nicht immer der oberste, und ohne Markierung wirkt genau das wie ein Rechenfehler. */ .scorelines { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 11px; font-size: 11px; color: var(--muted); } .scorelines .label { flex-basis: 100%; } .scoreline { font-variant-numeric: tabular-nums; white-space: nowrap; } .scoreline b { font-family: var(--cond); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: .3px; } .scoreline.picked b { color: var(--red); } /* Die eingeklappte Erklaerung unter dem Spieltagsraster. Zugeklappt ist sie eine Zeile, aufgeklappt der Text, der vorher als Fliesstext ueber den Partien stand und dort niemanden erreichte, der die Partien sehen wollte. Bewusst NICHT ".legend" - den Namen traegt bereits die Farblegende der Startseite (display:flex), und ohne eigenen Namen erbte dieser Block deren Flex-Layout. */ .explainer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 78ch; font-size: 13px; color: var(--muted); } .explainer summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 12.5px; padding: 4px 0; list-style-position: outside; } .explainer summary:hover { color: var(--red); } .explainer p { line-height: 1.65; margin: 10px 0 0; } .explainer b { color: var(--ink); } .result { font-family: var(--cond); font-weight: 700; } .pts { font-size: 11px; color: var(--muted); } .pts b { color: var(--ink); } /* News */ .entry { border-bottom: 1px solid var(--line); padding: 16px 0; } .entry:first-child { padding-top: 0; } .chip { background: var(--red); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; padding: 2px 7px; text-transform: uppercase; text-decoration: none; display: inline-block; } .chip.ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); } .meta { color: var(--muted); font-size: 11px; } .meta b { color: var(--ink); } .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } /* Aus