/* Prototyp Bildungsgang-Steckbrief, angelehnt an szut.de (Blau #374973, Rot #d50005, Calibri). */
:root {
  --blau: #374973;
  --blau-hell: #e8ecf4;
  --rot: #d50005;
  --text: #222;
  --text-leise: #5a5f6b;
  --flaeche: #fff;
  --flaeche-2: #f4f5f7;
  --linie: #dcdfe5;
  --platzhalter-bg: #fff4d6;
  --platzhalter-rand: #e0a800;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blau: #8fa6d8;
    --blau-hell: #232b3d;
    --rot: #ff5a5f;
    --text: #e6e8ec;
    --text-leise: #a7adb9;
    --flaeche: #15181e;
    --flaeche-2: #1d2129;
    --linie: #333a46;
    --platzhalter-bg: #3a3112;
    --platzhalter-rand: #c99a1a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Calibri, Carlito, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--flaeche);
}
a { color: var(--blau); }
a:hover { color: var(--rot); }

.kopf { background: #374973; color: #fff; }
.kopf-innen { max-width: 64rem; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.kopf a { color: #fff; text-decoration: none; font-weight: 700; }
.kopf .marke { font-size: 1.15rem; }
.kopf .zusatz { font-size: .9rem; opacity: .85; }
.prototyp-hinweis { background: var(--rot); color: #fff; font-size: .85rem; text-align: center; padding: .3rem 1rem; }

main { max-width: 64rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.brotkrumen { font-size: .9rem; color: var(--text-leise); margin: .5rem 0 1rem; }
.brotkrumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.brotkrumen li + li::before { content: "›"; margin-right: .25rem; }

h1 { color: var(--blau); font-size: 2rem; line-height: 1.2; margin: .25rem 0 .25rem; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 34rem) { h1 { font-size: 1.55rem; } h2 { font-size: 1.3rem; } }
.unterzeile { color: var(--text-leise); margin: 0 0 1rem; font-size: 1.05rem; }
h2 { color: var(--blau); font-size: 1.45rem; margin: 2.25rem 0 .6rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
h3 { font-size: 1.1rem; margin: 1.25rem 0 .35rem; }
.stand { font-size: .9rem; color: var(--text-leise); }

.einleitung { font-size: 1.15rem; max-width: 48rem; }

.steckbrief { background: var(--blau-hell); border-left: 4px solid var(--blau); padding: 1rem 1.25rem; border-radius: 4px; margin: 1.25rem 0; }
.steckbrief h2 { border: 0; margin: 0 0 .5rem; padding: 0; font-size: 1.2rem; }
.steckbrief dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .35rem 1.25rem; margin: 0; }
.steckbrief dt { font-weight: 700; }
.steckbrief dd { margin: 0; }
@media (max-width: 34rem) {
  .steckbrief dl { grid-template-columns: 1fr; gap: 0; }
  .steckbrief dd { margin-bottom: .5rem; }
}

.inhalt-nav { font-size: .95rem; margin: 1rem 0; }
.inhalt-nav ul { columns: 2 16rem; padding-left: 1.1rem; margin: .25rem 0; }

.tabelle-rahmen { overflow-x: auto; margin: .5rem 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 32rem; }
caption { text-align: left; font-weight: 700; padding: .25rem 0 .5rem; }
th, td { border: 1px solid var(--linie); padding: .4rem .55rem; text-align: left; vertical-align: top; }
thead th { background: var(--flaeche-2); }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
tfoot td { font-weight: 700; background: var(--flaeche-2); }

.platzhalter { background: var(--platzhalter-bg); border: 1px dashed var(--platzhalter-rand); padding: 0 .3rem; border-radius: 3px; }
div.platzhalter, p.platzhalter { padding: .6rem .8rem; margin: .75rem 0; }

.kasten { border: 1px solid var(--linie); border-radius: 4px; padding: .9rem 1.1rem; margin: 1rem 0; background: var(--flaeche-2); }
.kontakt { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.karte { border: 1px solid var(--linie); border-radius: 4px; padding: 1rem; }
.karte h3 { margin-top: 0; }

ul.check li { margin-bottom: .2rem; }
.fuss { border-top: 1px solid var(--linie); margin-top: 3rem; padding-top: 1rem; font-size: .9rem; color: var(--text-leise); }

/* Vergleichstabelle: auf schmalen Bildschirmen Zeilen stapeln statt seitlich scrollen. */
@media (max-width: 40rem) {
  table.vergleich { min-width: 0; }
  table.vergleich thead { display: none; }
  table.vergleich caption { display: block; width: 100%; }
  table.vergleich, table.vergleich tbody, table.vergleich tr, table.vergleich th, table.vergleich td { display: block; width: 100%; }
  table.vergleich tr { border: 1px solid var(--linie); border-radius: 4px; margin-bottom: .75rem; }
  table.vergleich th[scope="row"] { background: var(--flaeche-2); border: 0; }
  table.vergleich td { border: 0; border-top: 1px solid var(--linie); }
  table.vergleich td::before { content: attr(data-label); display: block; font-weight: 700; font-size: .85rem; color: var(--text-leise); }
}