html { overflow-x: hidden; }
body {
  margin: 0;
  background: #fff;
  color: #222;
  font-family: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: #c4231a; }

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

h1 { margin: 0 0 8px; font-size: 2rem; line-height: 1.2; }
.intro { margin: 0 0 32px; color: #555; }
.back { text-decoration: none; }

/* Header auf der Startseite: füllt den ganzen Bildschirm */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 16px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
}
.hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.1; }
.hero .intro { margin: 16px 0 0; max-width: 40ch; font-size: 1.15rem; }
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 1.6rem; text-decoration: none; color: #888;
}
.scroll-hint:hover { color: #c4231a; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .scroll-hint { animation: bob 2s ease-in-out infinite; }
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* Themen-Textblöcke auf der Startseite */
#topics { padding-top: 24px; }
.topic { margin-bottom: 40px; }
.topic h2 { margin: 0 0 6px; font-size: 1.4rem; }
.topic p { margin: 0 0 8px; color: #444; }
.topic a { font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.topic a:hover { text-decoration: underline; }

/* Abwechselnd von links und rechts hereinrutschen */
.reveal { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.reveal.from-left { transform: translateX(-60px); }
.reveal.from-right { transform: translateX(60px); }
.reveal.visible { opacity: 1; transform: none; }

/* Nummernliste unten */
.numbers-section { margin-top: 64px; padding-top: 32px; border-top: 1px solid #e3e3e3; }
.numbers-section h2 { margin: 0 0 6px; font-size: 1.4rem; }
.numbers-section .intro { margin-bottom: 16px; }
.numbers { display: flex; flex-wrap: wrap; gap: 6px; }
.numbers a {
  min-width: 40px; padding: 6px 0; text-align: center;
  border: 1px solid #e3e3e3; border-radius: 6px;
  color: #222; text-decoration: none; font-variant-numeric: tabular-nums;
}
.numbers a:hover { border-color: #c4231a; color: #c4231a; }

/* Unterseite: alle Dinge einer Kategorie */
.items { list-style: none; margin: 0; padding: 0; }
.items li { padding: 16px 12px; border-top: 1px solid #eee; scroll-margin-top: 24px; }
.items h2 { margin: 0 0 4px; font-size: 1.05rem; }
.items p { margin: 0; color: #444; }
.items li.current { background: #fdf1f0; border-radius: 6px; }

.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.pager a { text-decoration: none; font-weight: 600; }

footer { margin-top: 48px; color: #888; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}