:root{
  --brand:#be1522;
  --text:#1b1b1f;
  --muted:#5e5e66;
  --bg:#ffffff;
  --bg-alt:#f7f7f8;
  --surface:#ffffff;
  --border:#e5e5ea;
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.06);

  /* Linkfarben (Light Mode) */
  --link:#c81e2f;
  --link-hover:#a91925;
  --link-active:#8f1320;
}

@media (prefers-color-scheme: dark){
  :root{
    --text:#e8eaf0; --muted:#b3b7c3;
    --bg:#0f1115; --bg-alt:#12151b;
    --surface:#151922; --border:#262a33;
    --shadow:0 6px 20px rgba(0,0,0,.4);

    /* Linkfarben (Dark Mode) – HELLER und KRÄFTIGER */
    --link:#ff4141;
    --link-hover:#ffb3be;
    --link-active:#ff7185;
  }
}

/* Falls euer Toggle data-theme="dark" setzt, gelten dieselben hellen Linkfarben */
[data-theme="dark"]{
  --text:#e8eaf0; --muted:#b3b7c3;
  --bg:#0f1115; --bg-alt:#12151b;
  --surface:#151922; --border:#262a33;
  --shadow:0 6px 20px rgba(0,0,0,.4);

  --link:#ff4141;
  --link-hover:#ffb3be;
  --link-active:#ff7185;
}

/* Einheitliche Link-Regeln – nutzen ausschließlich die Variablen oben */
a{
  color:var(--link);
  text-decoration:none;
  text-underline-offset:2px;
  text-decoration-thickness:2px;
}
a:hover, a:focus{
  color:var(--link-hover);
  text-decoration:underline;
}
a:active{ color:var(--link-active); }
a:visited{ color:var(--link); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,Noto Sans;
  line-height:1.6; font-size:16px;
}
img{max-width:100%; height:auto; display:block}

/* WICHTIG: Kein Farb-Override mehr hier (früher: color: var(--brand)) */
a{ text-decoration:none }
a:hover,a:focus{ text-decoration:underline }

.container{width:min(1100px,92vw); margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:-999px;
}
.skip-link:focus{
  left:1rem; top:1rem; background:var(--brand); color:#fff;
  padding:.5rem .75rem; border-radius:8px; z-index:1000;
}

/* Header + Navigation */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab,var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0;
}
.brand{display:inline-flex; align-items:center; gap:.75rem; color:inherit}
.brand-sub{font-weight:600}
.site-nav{display:none}
.site-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:1rem}
.site-nav a{padding:.5rem .25rem; border-radius:8px}
.site-nav a.active{font-weight:700}
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px;
  background:none; border:1px solid var(--border); padding:.5rem; border-radius:10px; cursor:pointer;
}
.nav-toggle-bar{width:22px; height:2px; background:var(--text)}

@media (min-width: 900px){
  .nav-toggle{display:none}
  .site-nav{display:block !important}
}
.site-nav.open{display:block}
.site-nav.open ul{
  flex-direction:column; padding:.5rem 0; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; position:absolute; right:4vw; top:60px; box-shadow:var(--shadow);
}
@media (min-width: 900px){
  .site-nav.open ul{position:static; flex-direction:row; border:none; background:transparent; box-shadow:none}
}

/* Seitenabschnitte */
.section{padding:clamp(1.5rem, 3vw + .5rem, 3rem) 0}
.section-header h1,.section-header h2{margin:0 0 .5rem}
.section-header p{margin:0 0 1rem; color:var(--muted)}

/* Layout: Bild + Text */
.layout{
  display:grid; gap:1rem;
}
@media (min-width: 800px){
  .layout{grid-template-columns: 1fr 1.2fr; align-items:start}
}
.layout.no-media{grid-template-columns:1fr}

/* Bildbereich */
.page-media{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:.5rem; box-shadow:var(--shadow);
}
.page-media img{border-radius:10px}

/* Textbereich */
.page-content{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
}
.page-content p{margin:.5rem 0 1rem}
.page-content .meta{color:var(--muted)}

/* Footer */
.site-footer{padding:2rem 0; border-top:1px solid var(--border); margin-top:2rem}
.footer-grid{display:grid; gap:1rem}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
@media (min-width: 720px){
  .footer-grid{grid-template-columns: 2fr 1fr 1fr; align-items:center}
}

/* Buttons */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:999px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg); cursor:pointer; font-weight:600;
}
.btn-ghost{--btn-bg:transparent; --btn-fg:var(--text); border-color:transparent}

/* Galerie vertikal in der Medien-Spalte */
.gallery {
  display: grid;
  gap: 0.75rem;
}
.gallery figure { margin: 0; }
.gallery img { border-radius: 8px; width: 100%; height: auto; }
.gallery figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* Inhaltsverzeichnis */
.toc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.toc ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus { text-decoration: underline; }

/* Optional: TOC “sticky” halten auf großen Screens */
@media (min-width: 1100px) {
  .toc { position: sticky; top: 90px; }
}

/* Responsive Anpassung für die 2-Spalten-Ansicht dieser Seite */
@media (max-width: 799.98px) {
  /* Die inline grid-template-columns in der Seite greifen mobil ohnehin als 1 Spalte */
}

/* Einfacher Footer mit zwei Elementen: Copyright + Dark Mode */
.footer-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo + Brand im Header */
.header-inner { gap: 1rem; }
.tu-logo img { display: block; height: 40px; width: auto; }
@media (max-width: 420px) {
.tu-logo img { height: 32px; }
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; }
.brand-sub { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }

/* Videos: Abstände in geordneten Listen */
.page-content ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.page-content li { line-height: 1.55; }
.page-content .meta { color: var(--muted); }

/* Termine: etwas kompaktere Listen */
.page-content ul {
  padding-left: 1.1rem;
  margin: 0 0 1rem;
}
.page-content li {
  margin: 0.25rem 0;
}

/* FAQ: Listenlesbarkeit */
.page-content ol {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.page-content li { line-height: 1.55; }
.page-content details {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
  background: var(--surface);
}
.page-content details summary {
  cursor: pointer;
  font-weight: 600;
}

/* Bildunterschrift unter Medienbild (linke Spalte) */
.page-media figcaption{
  margin-top: .4rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

.page .section:first-of-type{
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.page .section:first-of-type .layout{
  box-shadow: var(--shadow-md);
}

body{
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 140%);
  color: var(--text);
}

/* Fix: Link-Buttons sollen ihre Textfarbe behalten (nicht vom allgemeinen a:hover überschrieben werden) */
.btn,
a.btn{
  color: var(--btn-fg) !important;
  text-decoration: none;
}

/* Zustände: Hover, Focus, Active, Visited – immer die Button-Farbe beibehalten */
.btn:hover, .btn:focus{
  filter: brightness(1.2);
}
.btn:active{
  filter: brightness(0.8);
}
.btn:visited,
a.btn:hover, a.btn:focus, a.btn:active, a.btn:visited{
  color: var(--btn-fg) !important;
  text-decoration: none;
}

/* Breitere Medien-Spalte für ausgewählte Abschnitte */
@media (min-width: 800px){
  /* 60/40-Aufteilung */
  .layout.media-60-40 { grid-template-columns: 1.6fr 1fr; }

  /* 66/34-Aufteilung (2:1) – noch breiter links */
  .layout.media-2-1 { grid-template-columns: 2fr 1fr; }

  /* 70/30 – sehr breite Medien-Spalte */
  .layout.media-70-30 { grid-template-columns: 1.8fr 1fr; }
}