@import url("/schriften/schriften.css");

/* ============================================================
   Elch Sachsen — Gestaltungsraster
   Farben stammen aus der Vorgängerseite und sind auf
   BITV-2.0-Kontraste geprüft. Werte siehe doku/gestaltung.md
   ============================================================ */

:root {
  --gruen: #72a12f;          /* Marke — nur Flächen und Linien, 2,96:1 */
  --gruen-text: #3d5a1c;     /* Links und Text auf hellem Grund, 7,58:1 */
  --gruen-tief: #223225;     /* Überschriften, dunkle Bänder, 13,08:1 */
  --signal: #93d339;         /* Schaltfläche auf dunklem Grund */
  --signal-hell: #b7e07a;    /* Links auf dunklem Grund, 9,00:1 */

  --tinte: #1b241d;          /* Fließtext, 15,41:1 */
  --grau: #5c6659;           /* Nebentext, 5,80:1 */
  --grau-dunkel: #4d5a4c;    /* Bildunterschriften, 7,04:1 */

  --papier: #fcfbf8;
  --sand: #f2efe4;
  --weiss: #ffffff;
  --linie: #e3e1d6;
  --linie-kraeftig: #cfd3c6;

  --schrift-titel: "Petrona", Georgia, "Times New Roman", serif;
  --schrift-text: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;

  --breite: 1180px;
  --rand: clamp(1rem, 4vw, 2rem);
  --luft: clamp(2.5rem, 6vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.09rem;
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Sprungmarke ---------- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gruen-tief);
  color: var(--weiss);
  font-weight: 700;
  padding: 0.85rem 1.3rem;
  text-decoration: none;
}
.sprungmarke:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Grundelemente ---------- */
a { color: var(--gruen-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-tief); }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--gruen-tief);
  line-height: 1.16;
  text-wrap: balance;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.1rem, 5vw, 2.9rem); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); font-weight: 600; margin-top: 2.2em; }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 600; margin-top: 1.8em; }
h4 { font-size: 1.15rem; font-weight: 700; margin-top: 1.6em; }
h2:first-child, h3:first-child { margin-top: 0; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.35em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--gruen-text); }
hr { border: none; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; display: block; }

address { font-style: normal; }

figure { margin: 0 0 1.6em; }
figure img { width: 100%; }
figcaption { font-size: 0.92rem; line-height: 1.55; color: var(--grau-dunkel); margin-top: 0.55em; }

blockquote {
  margin: 0 0 1.4em;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 4px solid var(--gruen);
  color: var(--grau-dunkel);
}

/* ---------- Tabellen ---------- */
.tabelle-rollbar { overflow-x: auto; border: 1px solid var(--linie); margin: 0 0 1.6em; }
.tabellen-titel { margin: 0 0 0.5rem; font-size: 0.94rem; line-height: 1.5; color: var(--grau-dunkel); max-width: 66ch; }
th[scope="row"] { white-space: nowrap; }
table { border-collapse: collapse; width: 100%; background: var(--weiss); font-size: 0.98rem; }
caption { caption-side: top; text-align: left; padding: 0.8em 1em; background: var(--sand); border-bottom: 1px solid var(--linie); font-size: 0.95rem; color: var(--grau-dunkel); }
th, td { text-align: left; padding: 0.7em 1em; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { background: var(--sand); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grau-dunkel); }
tbody tr:last-child td { border-bottom: none; }

/* ---------- Gerüst ---------- */
.mitte { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

.hochschulband {
  background: var(--gruen-tief);
  color: #cfd6cb;
  font-size: 0.83rem;
}
.hochschulband .mitte {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-block: 0.55rem;
}
.hochschulband a { color: #cfd6cb; }
.band-link { display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font-weight: 700; white-space: nowrap; }
.band-link:hover { text-decoration: underline; }
.band-link svg { flex: none; }
.hochschulband a:hover { color: var(--weiss); }

.kopf { border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf .mitte { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }

.marke { display: inline-block; text-decoration: none; }
.marke img { height: 58px; width: auto; }

/* ---------- Hauptmenü ---------- */
.menue-schalter { display: none; }

.hauptmenue > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.9rem; }
.hauptmenue li { margin: 0; position: relative; }
.hauptmenue a { text-decoration: none; color: #2c3a2e; display: block; padding-block: 0.35rem; }
.hauptmenue a:hover { color: var(--gruen-tief); }
.hauptmenue a[aria-current] { color: var(--gruen-tief); font-weight: 700; border-bottom: 3px solid var(--gruen); }

.hauptmenue ul ul {
  list-style: none; margin: 0; padding: 0.4rem 0;
  position: absolute; left: -0.9rem; top: 100%; min-width: 16rem; z-index: 20;
  background: var(--weiss); border: 1px solid var(--linie);
  box-shadow: 0 12px 28px rgba(34, 50, 37, 0.12);
  display: none;
}
.hauptmenue li:hover > ul,
.hauptmenue li:focus-within > ul { display: block; }
.hauptmenue ul ul a { padding: 0.55rem 1.1rem; }
.hauptmenue ul ul a:hover { background: var(--sand); }

/* ---------- Brotkrumen ---------- */
.krumen { background: var(--sand); border-bottom: 1px solid var(--linie); }
.krumen ol { list-style: none; margin: 0; padding-block: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.88rem; color: var(--grau); }
.krumen li { margin: 0; }
.krumen [aria-current] { color: #2c3a2e; }

/* ---------- Seitenkopf ---------- */
.seitenkopf { padding-block: var(--luft) 0; }
.seitenkopf .obertitel { margin: 0 0 0.5rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.seitenkopf h1 { margin-bottom: 0; max-width: 22ch; }

/* ---------- Inhalt ---------- */
.inhalt { padding-block: 2.2rem var(--luft); }
.inhalt > :last-child { margin-bottom: 0; }
.inhalt p, .inhalt ul, .inhalt ol, .inhalt h2, .inhalt h3, .inhalt h4 { max-width: 66ch; }

.spalten { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.spalten .haupt > :first-child, .spalten .rand > :first-child { margin-top: 0; }
.rand { font-size: 0.98rem; }
.rand h3 { margin-top: 0; font-size: 1.2rem; }
.rand > :first-child { margin-top: 0; }
/* Randspalten mit Faktenliste werden zum Kasten */
.rand:has(.fakten) { background: var(--sand); border-top: 4px solid var(--gruen-tief); padding: 1.5rem 1.6rem 1.7rem; }
.rand address + .fakten { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--linie-kraeftig); }
.rand .hinweis-druck + p { margin-bottom: 0; }
.rand p { color: var(--grau-dunkel); }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1.6em; }

/* ---------- Hero der Startseite ---------- */
.hero { position: relative; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.hero-bild { margin: 0; position: relative; }
.hero-bild img {
  width: 100%;
  height: clamp(22rem, 53vw, 47.5rem);
  object-fit: cover;
  object-position: 60% 50%;
}
.hero-bild figcaption {
  position: absolute; right: 1rem; top: 1rem; margin: 0;
  color: var(--weiss); background: rgba(15, 22, 16, 0.55);
  padding: 0.3rem 0.7rem; font-size: 0.8rem;
}
.hero .mitte { position: relative; }
.hero-karte {
  background: var(--papier);
  border-left: 7px solid var(--gruen);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 2.9rem);
  max-width: 50rem;
  margin-top: clamp(-7rem, -7vw, -4rem);
  box-shadow: 0 22px 50px rgba(34, 50, 37, 0.18);
}
.hero-karte .obertitel { margin: 0 0 0.8rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau); }
.hero-karte h1 { margin: 0 0 1.1rem; max-width: 18ch; }
.hero-text { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: #35402f; max-width: 54ch; margin: 0 0 1.7rem; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 34rem) {
  .hero-knoepfe { flex-direction: column; align-items: stretch; }
  .hero-knoepfe .knopf { width: 100%; }
  .melden .knoepfe .knopf { width: 100%; }
}
.knopf-dunkel { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--weiss); }
.knopf-dunkel:hover { background: #2f4632; border-color: #2f4632; color: var(--weiss); }
.knopf-linie { background: transparent; border-color: var(--gruen-tief); color: var(--gruen-tief); }
.knopf-linie:hover { background: var(--gruen-tief); color: var(--weiss); }

/* ---------- Randloses Bild ---------- */
.randlos { margin-inline: calc(50% - 50vw); margin-bottom: 2.4rem; position: relative; }
.randlos img { width: 100vw; max-width: none; height: clamp(20rem, 46vw, 33rem); object-fit: cover; object-position: 62% 42%; }
.randlos figcaption { position: absolute; right: 1rem; bottom: 0.8rem; margin: 0; color: var(--weiss); background: rgba(16, 23, 17, 0.62); padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* ---------- Einleitungsabsatz ---------- */
.einleitung { font-size: 1.2rem; line-height: 1.62; color: #35402f; }

/* ---------- Faktenliste ---------- */
.fakten { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.fakten dt { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.fakten dd { margin: 0.15rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinte); }

/* ---------- Teaser ---------- */
.teaser { margin-top: 0.5rem; }
.karte { border: 1px solid var(--linie); border-top: 4px solid var(--gruen); background: var(--weiss); padding: 1.4rem 1.5rem 1.5rem; }
.karte h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.karte h3 a { text-decoration: none; color: var(--gruen-tief); }
.karte h3 a:hover { color: var(--gruen-text); text-decoration: underline; }
.karte p { margin: 0; font-size: 1rem; line-height: 1.6; color: #3c463c; max-width: none; }

/* ---------- Partnerlogos in einheitlicher Höhe ---------- */
.logo { margin-bottom: 1.1rem; display: flex; align-items: flex-end; min-height: 6rem; }
.logo img { width: auto; max-width: 100%; max-height: 6rem; object-fit: contain; }
.logo-gross { min-height: 0; margin-top: 2rem; }
.logo-gross img { max-height: 11rem; }
.fakten-breit { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1.5rem; align-items: baseline; margin: 1.3rem 0 1.5rem; }
.fakten-breit dt { padding-top: 0.1rem; }
.fakten-breit dd { margin: 0; }
.zelle > :first-child { margin-top: 0; }
.zelle > :last-child { margin-bottom: 0; }

/* ---------- Aufruf zum Melden ---------- */
.melden { background: var(--gruen-tief); color: #d7ddd2; margin-top: var(--luft); }
.melden .mitte { padding-block: clamp(2.2rem, 5vw, 3.4rem); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.melden h2 { color: var(--weiss); margin-top: 0; }
.melden p { max-width: 56ch; margin-bottom: 0; }
.melden .knoepfe { display: flex; flex-direction: column; gap: 0.85rem; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 44px; padding: 0.85rem 1.5rem;
  font-weight: 700; font-size: 1.02rem; text-decoration: none;
  background: var(--signal); color: var(--tinte); border: 2px solid var(--signal);
}
.knopf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tinte); }
.knopf-rand { background: transparent; color: #f0efe6; border-color: #7d8f79; }
.knopf-rand:hover { background: transparent; border-color: var(--weiss); color: var(--weiss); }
.knopf svg { flex: none; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--gruen-tief); color: #cdd5c8; }
.fuss a { color: #cdd5c8; }
.fuss a:hover { color: var(--weiss); }
.fuss .spalten-fuss { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem; padding-block: clamp(2.2rem, 5vw, 3.2rem) 2rem; }
.fuss h2 { font-size: 1.2rem; color: var(--weiss); margin: 0 0 0.9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fuss li { margin: 0; }
.fuss address { font-style: normal; line-height: 1.75; }
.fuss-logo { display: inline-block; margin-top: 1.5rem; }
.fuss-logo img { width: 190px; height: auto; }
.fuss-logo:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.fuss address a { color: var(--signal-hell); }
.fuss-unten { border-top: 1px solid #3c4d3e; }
.fuss-unten .mitte { padding-block: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; justify-content: space-between; align-items: baseline; }
.fuss-zusatz { margin: 0; font-family: var(--schrift-titel); font-size: 1.05rem; color: #cdd5c8; }
.fuss-rechte { margin: 0; font-size: 0.85rem; color: #9fab9b; }

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width: 62rem) {
  .spalten { grid-template-columns: 1fr; }
  .rand { border-top: 1px solid var(--linie); padding-top: 1.6rem; }
  .melden .mitte { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .marke img { height: 46px; }

  .menue-schalter {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 44px; padding: 0.6rem 0.9rem;
    background: var(--gruen-tief); color: var(--weiss);
    border: none; font-family: inherit; font-size: 0.95rem; font-weight: 700;
    cursor: pointer;
  }

  .hauptmenue {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    box-shadow: 0 16px 32px rgba(34, 50, 37, 0.14);
    max-height: calc(100vh - 6rem); overflow-y: auto;
  }
  .hauptmenue.offen { display: block; }
  .kopf .mitte { position: relative; }

  .hauptmenue > ul { flex-direction: column; gap: 0; }
  .hauptmenue li { border-top: 1px solid var(--linie); }
  .hauptmenue > ul > li:first-child { border-top: none; }
  .hauptmenue a { padding: 0.95rem var(--rand); min-height: 44px; display: flex; align-items: center; font-size: 1.05rem; }
  .hauptmenue a[aria-current] { border-bottom: none; border-left: 5px solid var(--gruen); background: var(--sand); }

  .hauptmenue ul ul {
    position: static; display: block; min-width: 0;
    border: none; box-shadow: none; background: #f7f6ee; padding: 0;
  }
  .hauptmenue ul ul a { padding-left: calc(var(--rand) + 1.1rem); font-size: 1rem; }
}


/* ---------- Hörproben ---------- */
.hoerprobe { border: 1px solid var(--linie); background: var(--weiss); padding: 1.1rem 1.3rem; margin: 0 0 1.2rem; max-width: 40rem; }
.hoerprobe-titel { margin: 0 0 0.6rem; font-weight: 700; color: var(--gruen-tief); }
.hoerprobe audio { width: 100%; margin-bottom: 0.6rem; }
.hoerprobe-text { margin: 0; font-size: 0.94rem; line-height: 1.55; color: var(--grau-dunkel); }

/* ---------- Hinweis in der Randspalte ---------- */
.hinweis-druck { font-size: 0.9rem; color: var(--grau); border-top: 1px solid var(--linie); padding-top: 0.9rem; margin-top: 1.4rem; }

/* ============================================================
   Druckausgabe — jede Seite lässt sich als Merkblatt ausdrucken
   ============================================================ */
@media print {
  :root {
    --papier: #fff; --sand: #f4f4f0; --weiss: #fff;
    --tinte: #000; --grau: #444; --grau-dunkel: #333;
    --gruen-tief: #1b2a1d; --gruen-text: #24401a; --linie: #bbb;
  }
  body { font-size: 11pt; line-height: 1.5; background: #fff; }
  .hochschulband, .hauptmenue, .menue-schalter, .krumen,
  .melden, .fuss, .sprungmarke, .hinweis-druck { display: none; }
  .kopf { border-bottom: 2px solid #1b2a1d; }
  .kopf .mitte { padding-block: 0.4cm; }
  .marke img { height: 1.5cm; }
  .mitte { max-width: none; padding-inline: 0; }
  .hero-bild img { height: 6cm; }
  .hero-karte { box-shadow: none; border-left: 4px solid #1b2a1d; margin-top: 0; max-width: none; padding: 0.5cm 0 0; }
  .spalten { display: block; }
  .rand { border-top: 1px solid #bbb; margin-top: 0.8cm; padding-top: 0.5cm; break-inside: avoid; }
  .raster { display: block; }
  .karte { border: none; border-top: 2px solid #1b2a1d; padding: 0.3cm 0; break-inside: avoid; }
  figure, table, .tabelle-rollbar, .karte, address { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .inhalt p, .inhalt ul, .inhalt ol, .inhalt h2, .inhalt h3 { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .inhalt a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  .knopf { border: 1px solid #000; background: none; color: #000; }
  @page { margin: 1.8cm 1.6cm; }
}