/* Kiez Original Automatik – Styles für Laufband, Termine, News, Fakten, Stempel, Kacheln.
   Farben über CSS-Variablen; das Theme setzt sie, sonst gelten die Standardwerte. */
:root {
  --ko-nacht: #0B0B0B;
  --ko-signal: #F5E90A;
  --ko-rot: #E4002B;
  --ko-weiss: #FFFFFF;
  --ko-anton: 'Anton', Impact, 'Arial Black', sans-serif;
  --ko-text: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

/* Laufband */
.ko-ticker { display: flex; align-items: stretch; background: var(--ko-rot); color: var(--ko-weiss); font-family: var(--ko-text); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; overflow: hidden; border-top: 4px solid var(--ko-signal); border-bottom: 4px solid var(--ko-signal); }
.ko-ticker__label { flex: 0 0 auto; padding: 14px 24px; background: var(--ko-nacht); color: var(--ko-signal); }
.ko-ticker__track { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.ko-ticker__items { display: inline-flex; white-space: nowrap; will-change: transform; }
.ko-ticker__item { padding: 14px 28px; }
.ko-ticker__item + .ko-ticker__item::before { content: '·'; margin-right: 28px; opacity: .7; }
.ko-ticker a { color: inherit; text-decoration: none; }
.ko-ticker a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ko-ticker__items { transform: none !important; } }

/* Termine */
.ko-termine, .ko-news { list-style: none; margin: 0; padding: 0; }
.ko-termin { display: grid; grid-template-columns: 150px 1fr auto 24px; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 3px solid var(--ko-signal); font-family: var(--ko-text); }
.ko-termin:last-child { border-bottom: 3px solid var(--ko-signal); }
.ko-termin__zeit { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ko-rot); }
.ko-termin__titel { font-family: var(--ko-anton); text-transform: uppercase; font-size: 22px; line-height: 1; }
.ko-termin__titel a { color: inherit; text-decoration: none; }
.ko-termin__titel a:hover { color: var(--ko-rot); }
.ko-termin__ort { font-size: 14px; opacity: .75; }
.ko-termin__ort a { color: inherit; }
.ko-pfeil { font-family: var(--ko-anton); color: var(--ko-rot); font-size: 22px; }
@media (max-width: 640px) { .ko-termin { grid-template-columns: 1fr 24px; } .ko-termin__zeit { grid-column: 1 / -1; } .ko-termin__ort { grid-column: 1 / -1; } }

/* News */
.ko-news__item { border-top: 3px solid var(--ko-signal); }
.ko-news__item:last-child { border-bottom: 3px solid var(--ko-signal); }
.ko-news__item a { display: block; padding: 14px 0; color: inherit; text-decoration: none; }
.ko-news__item a:hover .ko-news__titel { color: var(--ko-rot); }
.ko-news__quelle { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-bottom: 4px; }
.ko-news__titel { display: block; font-family: var(--ko-anton); text-transform: uppercase; font-size: 22px; line-height: 1; }
.ko-news__teaser { display: block; font-size: 14px; opacity: .75; margin-top: 6px; line-height: 1.45; }
.ko-news__hinweis { font-size: 12px; opacity: .55; margin-top: 8px; }

/* Fakten-Kasten */
.ko-fakten { background: var(--ko-signal); color: var(--ko-nacht); padding: 8px 24px 24px; font-family: var(--ko-text); margin: 0 0 24px; }
.ko-fakten__titel { font-family: var(--ko-anton); text-transform: uppercase; font-size: 26px; padding: 10px 0 8px; }
.ko-fakt { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 3px solid var(--ko-nacht); }
.ko-fakt b { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ko-fakt div { font-size: 16px; font-weight: 500; }
.ko-fakt a { color: var(--ko-rot); font-weight: 700; text-decoration: none; }
.ko-fakten__siegel { padding-top: 24px; text-align: center; }

/* Stempel */
.ko-stempel-wrap { display: flex; justify-content: center; padding: 16px 0; }
.ko-stempel { max-width: 100%; height: auto; }

/* Transparenz */
.ko-transparenz { border: 3px solid currentColor; padding: 14px 16px; font-size: 14px; line-height: 1.5; font-weight: 500; margin: 24px 0; }
.ko-transparenz a { color: var(--ko-rot); text-decoration: none; font-weight: 700; }

/* Kacheln (Orte) */
.ko-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0; border: 4px solid var(--ko-signal); }
.ko-kachel { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-right: 4px solid var(--ko-signal); border-bottom: 4px solid var(--ko-signal); }
.ko-kachel__media { position: relative; aspect-ratio: 4 / 3; background: #1A1A1A; overflow: hidden; }
.ko-kachel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ko-kachel__leer { width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #1A1A1A 0 18px, #222 18px 20px); }
.ko-kachel__siegel { position: absolute; left: 12px; bottom: 12px; background: var(--ko-signal); color: var(--ko-nacht); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 6px 10px; }
.ko-kachel__text { padding: 18px; border-top: 4px solid var(--ko-signal); display: flex; flex-direction: column; gap: 8px; }
.ko-kachel__titel { font-family: var(--ko-anton); text-transform: uppercase; font-size: 28px; line-height: .98; }
.ko-kachel:hover .ko-kachel__titel { color: var(--ko-rot); }
.ko-tag { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.ko-leer { opacity: .6; font-style: italic; }