/* sf1903.de – Farben, Schrift, Layout */

:root {
  --rasen: #0e4d2c;
  --rasen-tief: #093a21;
  --kleeblatt: #2e9e5b;
  --kleeblatt-hell: #d9efe0;
  --kreide: #ffffff;
  --flutlicht: #f2f5f1;
  --tinte: #172019;
  --tinte-leise: #5b6b60;
  --linie: #d5ded8;
  --gold: #b8933b;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;

  --maxw: 1080px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kreide: #f3f6f3;
    --flutlicht: #0f1712;
    --tinte: #eef3ef;
    --tinte-leise: #9db0a4;
    --linie: #233329;
    --kleeblatt-hell: #163a26;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinte);
  background: var(--flutlicht);
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--kleeblatt); outline-offset: 3px; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Kopf: Spielfeld ---------- */

.masthead {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 50% 100% no-repeat,
    radial-gradient(circle at 50% 46%, transparent 0 118px, rgba(255,255,255,.14) 119px 121px, transparent 122px) ,
    linear-gradient(180deg, var(--rasen) 0%, var(--rasen-tief) 100%);
  background-color: var(--rasen);
  position: relative;
  overflow: hidden;
}

.masthead::before {
  /* Mittellinie, dezent */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
  position: relative;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand svg { width: 26px; height: 26px; }

.nav { display: flex; gap: 22px; font-size: 16px; }
.nav a { text-decoration: none; opacity: .88; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; border-bottom-color: #fff; }

.hero {
  position: relative;
  padding: 44px 0 36px;
}

.hero .weekday {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .02em;
  opacity: .85;
  margin: 0;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 10vw, 112px);
  line-height: .92;
  margin: 2px 0 18px;
  letter-spacing: -.01em;
}

.hero .status {
  margin: 0;
  font-size: 17px;
  opacity: .9;
  max-width: 60ch;
}

@media (min-width: 720px) {
  .hero { padding: 64px 0 52px; }
}

/* ---------- Meldungen ---------- */

.main { padding: 28px 0 56px; }

.day {
  margin: 0 0 44px;
}

.day h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--rasen);
}
@media (prefers-color-scheme: dark) { .day h2 { border-bottom-color: var(--kleeblatt); } }

.day h2 small {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 15px;
  color: var(--tinte-leise);
  margin-top: 2px;
}

.items { list-style: none; margin: 0; padding: 0; }

.item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linie);
}

.item time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  color: var(--rasen);
  padding-top: 3px;
}
@media (prefers-color-scheme: dark) { .item time { color: var(--kleeblatt); } }

.item .body { min-width: 0; }

.item .source {
  font-size: 14px;
  color: var(--tinte-leise);
  margin: 0 0 4px;
}
.item .source a { text-decoration: none; }
.item .source a:hover { text-decoration: underline; }

.item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.12;
  margin: 0 0 6px;
  letter-spacing: 0;
}
.item h3 a { text-decoration: none; }
.item h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.item p.excerpt {
  margin: 0;
  max-width: 68ch;
  color: var(--tinte);
}

.item .more {
  display: inline-block;
  margin-top: 8px;
  font-size: 15px;
  color: var(--tinte-leise);
  text-decoration: none;
}
.item .more:hover { color: var(--tinte); text-decoration: underline; }

@media (min-width: 720px) {
  .item { grid-template-columns: 84px 1fr; padding: 22px 0; }
  .item time { font-size: 26px; }
  .item h3 { font-size: 30px; }
}

.empty {
  padding: 28px 0;
  color: var(--tinte-leise);
  max-width: 60ch;
}

/* Tagesnavigation (Vor / Zurück) */
.daynav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 28px;
  font-size: 16px;
}
.daynav a { text-decoration: none; color: var(--rasen); font-weight: 500; }
.daynav a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .daynav a { color: var(--kleeblatt); } }

/* ---------- Archiv ---------- */

.archive-month { margin: 0 0 36px; }
.archive-month h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--rasen);
}
@media (prefers-color-scheme: dark) { .archive-month h2 { border-bottom-color: var(--kleeblatt); } }

.days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.days a {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  background: var(--kreide);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--kleeblatt);
}
@media (prefers-color-scheme: dark) { .days a { background: #141f18; } }
.days a:hover { border-color: var(--kleeblatt); }
.days .d {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.05;
}
.days .c { display: block; margin-top: 4px; font-size: 14px; color: var(--tinte-leise); }

/* ---------- Fuß ---------- */

.footer {
  border-top: 1px solid var(--linie);
  padding: 32px 0 44px;
  font-size: 15px;
  color: var(--tinte-leise);
}
.footer .partner-logo {
  display: inline-block;
  background: #fff;
  padding: 14px 22px;
  border: 1px solid var(--linie);
  margin: 0 0 18px;
  max-width: 100%;
}
.footer .partner-logo img {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}
.footer .partner {
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 16px;
}
.footer .partner a { color: inherit; text-decoration: none; }
.footer .partner a:hover { text-decoration: underline; }
.footer p { margin: 0 0 10px; max-width: 72ch; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { text-decoration: underline; }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */

.page { max-width: 72ch; padding: 36px 0 60px; }
.page h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; margin: 0 0 24px; }
.page h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; margin: 32px 0 8px; }
.page p, .page li { font-size: 17px; }
.page .todo { background: #fff6d6; color: #5a4300; padding: 2px 6px; border-radius: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .item h3 a { transition: text-decoration-color .15s; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}