/* AG/AOS Leipzig – statische Website
   Farben und Aufteilung orientieren sich an der bisherigen Drupal-Seite,
   Kontraste sind für WCAG AA (4,5:1) nachgemessen. */

:root {
  --blau-hell: #3d7cc2;
  --blau: #3470b5;
  --blau-dunkel: #1f3d6e;
  --link: #1f5aa0;
  --abitur: #253a6f;
  --rsa: #4e7a1f;
  --hsa: #b5501b;
  --text: #222;
  --rand: #cfd8e3;
  --flaeche: #f5f5f5;
  --akzent-flaeche: #eef3f9;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.55;
  color: var(--text);
  background: #fff;
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

a { color: var(--link); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopf und Menü ---------- */
.kopf { background: linear-gradient(var(--blau-hell), var(--blau)); color: #fff; }
.kopf .logozeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; padding-bottom: .6rem; }
.logo img { display: block; max-width: 100%; height: auto; }

.menuknopf { display: none; font: inherit; font-weight: 600; color: #fff; background: rgba(0,0,0,.25);
  border: 2px solid #fff; border-radius: 4px; padding: .4rem .9rem; cursor: pointer; }

.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; }
.menue a { display: block; color: #fff; text-decoration: none; padding: .6rem .8rem; font-size: .97rem; }
.menue a:hover { background: rgba(255,255,255,.2); }
.menue a[aria-current="page"] { background: var(--blau-dunkel); font-weight: 600; }

/* ---------- Seitenaufteilung ---------- */
.seite { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 2rem; align-items: start; }
main { min-width: 0; }

.karte { border: 1px solid var(--rand); border-radius: 6px; background: #fff; margin-bottom: 1.5rem; overflow: hidden; }
.karte > h1 { margin: 0; padding: .65rem 1rem; font-size: 1.2rem; color: #fff; background: var(--blau); }
.karte .inhalt { padding: 1rem; }
.karte .inhalt > :first-child { margin-top: 0; }

h2 { font-size: 1.25rem; line-height: 1.3; color: var(--blau-dunkel); }
h3 { font-size: 1.1rem; line-height: 1.3; color: var(--blau-dunkel); margin-bottom: .3rem; }

.hero { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 1rem; }

/* ---------- Drei Bildungsgänge ---------- */
.stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.stufe { border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.stufe h2 { margin: 0; padding: .6rem 1rem; font-size: 1.1rem; color: #fff; }
.stufe p { margin: 0; padding: .8rem 1rem .5rem; flex: 1; }
.stufe .knopfzeile { padding: .3rem 1rem 1rem; }
.stufe.abitur h2, .stufe.abitur .knopf { background: var(--abitur); }
.stufe.rsa h2, .stufe.rsa .knopf { background: var(--rsa); }
.stufe.hsa h2, .stufe.hsa .knopf { background: var(--hsa); }

.knopf { display: inline-block; background: var(--blau); color: #fff; text-decoration: none; font-weight: 600;
  padding: .45rem .85rem; border-radius: 4px; }
.knopf:hover { filter: brightness(.88); }

/* ---------- Seitenleiste ---------- */
.seitenleiste { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px; padding: 1rem; }
.seitenleiste h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.seitenleiste section + section { margin-top: 1.4rem; }
.seitenleiste p { margin: .4rem 0; }
.seitenleiste ul { list-style: none; margin: .6rem 0; padding: 0; }
.seitenleiste li { margin: .35rem 0; }
.seitenleiste address { font-style: normal; }
.seitenleiste .knopf { margin: .2rem 0; }

/* ---------- Aufklappbereiche ---------- */
details { border: 1px solid var(--rand); border-radius: 6px; margin: .7rem 0; background: #fff; }
summary { cursor: pointer; padding: .75rem 1rem; font-weight: 700; color: var(--blau-dunkel); background: var(--akzent-flaeche); border-radius: 6px; }
details[open] > summary { border-bottom: 1px solid var(--rand); border-radius: 6px 6px 0 0; }
.detail-inhalt { padding: .2rem 1rem 1rem; }
.detail-inhalt h3:first-child { margin-top: .8rem; }

/* ---------- Tabellen, Hinweise ---------- */
.tabelle { overflow-x: auto; margin: .8rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 28rem; font-size: .97rem; }
caption { text-align: left; font-weight: 600; padding-bottom: .3rem; }
th, td { border: 1px solid var(--rand); padding: .4rem .6rem; text-align: left; vertical-align: top; }
th { background: var(--akzent-flaeche); }

.hinweis { border-left: 4px solid var(--hsa); background: #fdf3ec; padding: .6rem .9rem; margin: 1rem 0; }
.hinweis p { margin: .3rem 0; }
.quelle { font-size: .9rem; color: #444; margin: .6rem 0 0; }
.klein { font-size: .9rem; color: #444; }

.todo { background: #fff3a3; outline: 1px dashed #8a6d00; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--rand); background: var(--flaeche); font-size: .93rem; padding: 1rem 0; }
.fuss p { margin: .2rem 0; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 52rem) {
  .seite { grid-template-columns: minmax(0, 1fr); }
  .stufen { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .js .menuknopf { display: block; }
  .js .menue { display: none; padding-bottom: .6rem; }
  .js .menue.offen { display: block; }
  .menue ul { flex-direction: column; gap: 0; }
  .menue a { padding: .75rem 1rem; border-top: 1px solid rgba(255,255,255,.25); }
}

@media print {
  .kopf, .seitenleiste, .fuss, .skip { display: none; }
  .seite { display: block; }
  .karte, details { border: 0; }
  .karte > h1 { color: #000; background: none; padding-left: 0; }
  summary { background: none; padding-left: 0; }
  a { color: #000; }
}