/* ============================================================
   KI-Results.de – Hauptstylesheet
   Farben: #FF8700 (Orange), #474747 (Grau), #FFFFFF (Weiß)
   Schrift: Arial – analog zur Resultment-Webseite
   ============================================================ */

:root {
  --orange:      #FF8700;
  --orange-dark: #d97000;
  --gray:        #474747;
  --gray-light:  #f4f4f4;
  --gray-mid:    #e0e0e0;
  --white:       #ffffff;
  --text:        #333333;
  --text-light:  #666666;
  --font:        Arial, Helvetica, sans-serif;
  --max-width:   1500px;
  --radius:      4px;
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--white); }
img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; color: var(--gray); }
h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: var(--gray); margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; font-weight: 700; color: var(--gray); margin-bottom: 0.5rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section   { padding: 72px 0; }
.section--gray { background: var(--gray-light); }
.section--dark { background: var(--gray); color: var(--white); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.5rem; }
.section-intro  { color: var(--text-light); margin-bottom: 2rem; font-size: 1.05rem; }

/* ── HEADER / NAV ───────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 3px solid var(--orange);
  box-shadow: var(--shadow);
}
.nav { display: flex; align-items: center; gap: 0; height: 48px; }
.nav__brand {
  /* NICHT flex: Flex-Elemente verlieren den Leerraum zwischen sich.
     Bei "KI-Results.de" faellt das nicht auf (dort soll keiner sein),
     bei "Ein Softwareprojekt mit KI" verschwand das Leerzeichen. */
  display: inline-block;
  margin-right: auto;
  font-size: 1.05rem; font-weight: 700; color: var(--gray);
}
.nav__brand span { color: var(--orange); }
.nav__brand:hover { text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 0; }
.nav__links li { position: relative; }
.nav__links a {
  display: block; padding: 0 13px; height: 48px; line-height: 48px;
  font-size: 0.88rem; color: var(--gray); white-space: nowrap;
  transition: color 0.15s;
}
.nav__links a:hover, .nav__links a.active { color: var(--orange); text-decoration: none; }
.nav__links a.active { box-shadow: inset 0 -3px 0 var(--orange); }

/* ── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  background: var(--gray-light);
  border-bottom: 1px solid var(--gray-mid);
  font-size: 0.85rem;
  padding: 10px 0;
}
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--text-light); }
.breadcrumb li::after { content: "›"; color: var(--gray-mid); font-weight: 700; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--orange); text-decoration: none; }
.breadcrumb li[aria-current="page"] { color: var(--gray); font-weight: 700; }

/* ── KATEGORIE-BLOCK (gruppierte Bausteine) ─────────────── */
.kategorie-block { margin-top: 2.75rem; }
.kategorie-block:first-of-type { margin-top: 1.5rem; }
.kategorie-titel {
  font-size: 1.25rem; color: var(--gray);
  margin: 0 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--orange);
  display: inline-block;
}
.kategorie-beschreibung {
  color: var(--text-light); font-size: 0.95rem;
  max-width: 680px; margin-bottom: 1.5rem;
}
.kategorie-block .cards { margin-top: 0; }

/* ── LOGIN-PAGE ─────────────────────────────────────────── */
.login-body {
  min-height: 100vh; margin: 0;
  background: linear-gradient(135deg, var(--gray) 0%, #2a2a2a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-wrap {
  width: 100%; max-width: 420px;
}
.login-card {
  background: var(--white); padding: 40px 36px;
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  border-top: 5px solid var(--orange);
}
.login-card h1 {
  font-size: 1.8rem; margin: 0 0 0.5rem; color: var(--gray);
}
.login-card h1 span { color: var(--orange); }
.login-sub { color: var(--text-light); margin-bottom: 1.5rem; font-size: 0.95rem; }
.login-card label { display: block; margin-bottom: 1rem; }
.login-card label span {
  display: block; font-size: 0.85rem; font-weight: 700;
  margin-bottom: 0.25rem; color: var(--gray);
}
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100%; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid var(--gray-mid); border-radius: var(--radius);
  font-family: var(--font); font-size: 1rem; color: var(--text);
  transition: border-color 0.15s;
}
.login-card input:focus { outline: none; border-color: var(--orange); }
.login-card .btn { width: 100%; margin-top: 0.5rem; }
.login-error {
  background: #fdecea; color: #b71c1c;
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.9rem; margin-bottom: 1rem;
  border-left: 4px solid #b71c1c;
}
.login-foot {
  margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-light);
  text-align: center;
}

/* ── OBERPUNKT-CARDS (Landing) ──────────────────────────── */
.oberpunkte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { .oberpunkte { grid-template-columns: repeat(2, 1fr); } }

/* Pipeline-Layout: 3 Cards mit Pfeilen dazwischen */
.oberpunkte-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 1.5rem;
}
.oberpunkte-flow > .oberpunkt-card { height: 100%; }
.oberpunkte-flow__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  font-size: 2.4rem; font-weight: 700;
  line-height: 1;
}
@media (max-width: 1100px) {
  .oberpunkte-flow {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }
  .oberpunkte-flow__arrow {
    transform: rotate(90deg);
    justify-self: center;
    font-size: 2rem;
    padding: 4px 0;
  }
}

/* Hierarchie-Intro über den Cards */
.hierarchie-intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 1rem;
}
.hierarchie-intro h2 {
  margin-bottom: 0.5rem;
}
.hierarchie-intro p {
  color: var(--text-light);
  font-size: 1.02rem;
}

/* Ausblicks-Hinweis unter den Cards */
.landing-ausblick {
  margin-top: 3rem;
  padding: 24px 28px;
  background: var(--gray-light);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  max-width: 820px;
  margin-left: auto; margin-right: auto;
}
.landing-ausblick h3 {
  margin-top: 0; margin-bottom: 0.5rem; color: var(--gray);
}
.landing-ausblick p { margin-bottom: 0; color: var(--text); }
.oberpunkt-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 32px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--orange);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.oberpunkt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  text-decoration: none;
}
.oberpunkt-card__icon {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange);
  color: var(--white);
  font-weight: 700; font-size: 2.4rem;
  border-radius: var(--radius);
  font-family: var(--font);
}
.oberpunkt-card__kicker {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}
.oberpunkt-card__title {
  font-size: 1.45rem; color: var(--gray);
  margin: 0 0 0.6rem; line-height: 1.2;
}
.oberpunkt-card__teaser {
  color: var(--text-light);
  margin-bottom: 0.85rem;
}
.oberpunkt-card__cta {
  font-weight: 700; font-size: 0.95rem;
  color: var(--orange);
}
@media (max-width: 900px) {
  .oberpunkte { grid-template-columns: 1fr; }
}

/* ── KOMPETENZ-SEKTION ──────────────────────────────────── */
.kompetenz-liste { margin: 0.75rem 0 0 1.25rem; list-style: disc; }
.kompetenz-liste li { color: var(--text); margin-bottom: 0.3rem; font-size: 0.95rem; }

/* Liste mit Status-Badge: kein Bullet, Name in Zeile 1, Status in Zeile 2 */
.kompetenz-liste--status { list-style: none; margin: 1rem 0 0; padding: 0; }
.kompetenz-item {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 0.92rem;
  border-left: 4px solid transparent;
  background: transparent;
}
.kompetenz-item--vorhanden    { border-left-color: #1f9d55; background: #f4fbf6; }
.kompetenz-item--notwendig    { border-left-color: #d22f2f; background: #fdf2f2; }
.kompetenz-item--nice-to-have { border-left-color: #2563eb; background: #eff6ff; }
.kompetenz-name { display: block; font-weight: 600; color: var(--gray); margin-bottom: 4px; }
.kompetenz-status-row { display: block; }

/* Status-Buckets (Auflistung nach Kriterium) */
.status-buckets { align-items: stretch; }
.status-bucket { border-top-width: 6px; }
.status-bucket--vorhanden    { border-top-color: #1f9d55; }
.status-bucket--notwendig    { border-top-color: #d22f2f; }
.status-bucket--nice-to-have { border-top-color: #2563eb; }
.status-bucket h3 { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 1.1rem; }
.status-bucket__count { font-size: 1.3rem; font-weight: 700; color: var(--gray); }
.status-bucket__list {
  list-style: disc;
  margin: 1rem 0 0 1.25rem;
  padding: 0;
}
.status-bucket__list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--gray-mid);
  font-size: 0.88rem;
  line-height: 1.4;
}
.status-bucket--vorhanden    .status-bucket__list li::marker { color: #1f9d55; font-size: 1.1em; }
.status-bucket--notwendig    .status-bucket__list li::marker { color: #d22f2f; font-size: 1.1em; }
.status-bucket--nice-to-have .status-bucket__list li::marker { color: #2563eb; font-size: 1.1em; }
.status-bucket__list li:last-child { border-bottom: none; }
.status-bucket__thema { color: var(--text); font-weight: 600; }
.status-bucket__kat   { color: var(--text-light); font-size: 0.78rem; margin-left: 4px; }

/* Status-Badges */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.6;
}
.status-badge--vorhanden    { background: #1f9d55; color: var(--white); border-color: #1f9d55; }
.status-badge--notwendig    { background: #d22f2f; color: var(--white); border-color: #d22f2f; }
.status-badge--nice-to-have { background: #2563eb; color: var(--white); border-color: #2563eb; }

/* Status: In Vorbereitung (gelb) – dunkler Text für Lesbarkeit auf Gelb */
.kompetenz-item--in-vorbereitung { border-left-color: #e0a100; background: #fff8e1; }
.status-bucket--in-vorbereitung  { border-top-color: #e0a100; }
.status-bucket--in-vorbereitung .status-bucket__list li::marker { color: #e0a100; font-size: 1.1em; }
.status-badge--in-vorbereitung { background: #f2b705; color: var(--gray); border-color: #d99e00; }

/* Status-Legende oben */
.status-legende {
  background: var(--gray-light);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 2rem;
}
.status-legende__head { font-size: 0.95rem; color: var(--gray); margin-bottom: 12px; }
.status-legende__list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.status-legende__list li { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text); }
.status-legende__count { font-size: 1.4rem; font-weight: 700; color: var(--gray); line-height: 1; }
.status-legende__desc  { color: var(--text-light); font-size: 0.82rem; line-height: 1.4; }
@media (max-width: 900px) { .status-legende__list { grid-template-columns: 1fr; } }

/* Counts-Zeile pro Kategorie-Card */
.kat-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.75rem 0 0.25rem; }

.kompetenz-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 2.5rem;
  padding: 24px; background: var(--gray-light); border-radius: var(--radius);
}
.kompetenz-meta__head {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--orange); margin-bottom: 0.75rem;
}
.kompetenz-tags { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .kompetenz-meta { grid-template-columns: 1fr; } }

/* ── HERO-CARD (Detailseite: spiegelt die Übersichts-Karte) ── */
.hero-card {
  background: var(--gray-light);
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--gray-mid);
}
.card--hero {
  padding: 40px 48px;
}
.card--hero h1 {
  color: var(--orange);
  font-size: 2rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.card--hero .card__kind { font-size: 0.85rem; }
.card--hero p { font-size: 1.1rem; color: var(--text-light); margin-bottom: 0; }
.card--hero .card__tags { margin-bottom: 1.25rem; }
@media (max-width: 680px) {
  .card--hero { padding: 28px 24px; }
  .card--hero h1 { font-size: 1.6rem; }
}

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  background: var(--gray);
  color: var(--white);
  padding: 96px 0 80px;
}
.hero h1 { color: var(--white); margin-bottom: 1rem; }
.hero h1 span { color: var(--orange); }
.hero__sub { font-size: 1.15rem; color: #ccc; margin-bottom: 2rem; max-width: 720px; }
.hero__meta { font-size: 0.9rem; color: #aaa; }
.hero__meta strong { color: var(--orange); font-weight: 700; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 28px;
  font-family: var(--font); font-size: 0.95rem; font-weight: 700;
  border-radius: var(--radius); cursor: pointer; transition: 0.15s;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--orange); color: var(--white); border: 2px solid var(--orange); }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }
.btn--outline-dark { background: transparent; color: var(--gray); border: 2px solid var(--gray-mid); }
.btn--outline-dark:hover { border-color: var(--gray); color: var(--gray); }

/* ── CARDS (Projekte/Bausteine) ─────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 2rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 32px;
  border-top: 4px solid var(--orange);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.card h3 { color: var(--orange); margin-bottom: 0.5rem; font-size: 1.2rem; }
.card .card__kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.5rem; }
.card p { color: var(--text-light); margin-bottom: 1rem; }
.card .card__link { font-weight: 700; font-size: 0.9rem; color: var(--orange); margin-top: auto; }
.card .card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 1rem; }
.card__tags-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-light);
  margin-right: 4px; width: 100%;
}

/* Tags / Badges */
.tag { background: var(--gray-light); border: 1px solid var(--gray-mid); border-radius: 20px; padding: 4px 12px; font-size: 0.8rem; color: var(--gray); font-weight: 700; }
.tag--orange { background: var(--orange); color: var(--white); border-color: var(--orange); }
.tag--orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); text-decoration: none; }

/* ── DETAIL PAGE ────────────────────────────────────────── */
.detail-meta {
  display: flex; flex-wrap: wrap; gap: 24px;
  padding: 24px 0; border-bottom: 1px solid var(--gray-mid);
  margin-bottom: 2rem;
}
.detail-meta__item { font-size: 0.9rem; }
.detail-meta__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }

.prose h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--orange); }
.prose ul { margin: 0.5rem 0 1rem 1.5rem; list-style: disc; }
.prose li { margin-bottom: 0.25rem; color: var(--text-light); }
.prose p  { color: var(--text); }

.bausteine-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5rem; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer { background: var(--gray); color: #bbb; padding: 40px 0 24px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.footer-brand strong { display: block; color: var(--white); font-size: 1.1rem; margin-bottom: 0.5rem; }
.footer-brand strong span { color: var(--orange); }
.footer-brand p { font-size: 0.9rem; line-height: 1.6; }
.footer-col h4 { color: var(--white); font-size: 0.9rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-col ul li { margin-bottom: 6px; }
.footer-col ul a { color: #bbb; font-size: 0.9rem; }
.footer-col ul a:hover { color: var(--orange); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 0.85rem; }
.footer-bottom a { color: #bbb; }
.footer-bottom a:hover { color: var(--orange); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* Default oben: 3 Spalten (Full HD und große Desktops) */
@media (max-width: 1100px) {
  .cards, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  h1 { font-size: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cards, .cards--3, .cards--4, .cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hero { padding: 64px 0 56px; }
  .section { padding: 48px 0; }
  .nav__links a { padding: 0 10px; font-size: 0.85rem; }
}

/* ── VERGLEICHSTABELLE (Projekt-Infos / Personas) ───────── */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--gray);
  border-radius: 4px;
}
.compare-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  background: var(--white); margin: 0; min-width: 900px;
  border: 1px solid var(--gray);
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--gray);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.compare-table thead th {
  background: var(--gray); color: var(--white); font-weight: 700;
  text-align: center;
  vertical-align: middle;
  position: sticky; top: 0; z-index: 2;
  border: 1px solid var(--gray);
}
.compare-table thead th a { color: var(--white); text-decoration: none; }
.compare-table thead th a:hover { color: var(--orange); }
.compare-table tbody th {
  background: #f7f7f7; font-weight: 600; color: var(--gray); width: 14rem;
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  vertical-align: top;
}
.compare-table tbody tr:nth-child(even) td { background: #fafafa; }
.compare-table ul.compact {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
  text-align: left;
}
.compare-table ul.compact li {
  margin: 0 0 3px 0;
  line-height: 1.4;
  text-align: left;
}
.compare-table ul.compact li:first-child { margin-top: 0; }

/* ─── Matrix Projekte × Bausteine (Landing, section--dark) ─────────────── */
.matrix-wrap {
  margin-top: 1.2rem;
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 8px;
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
.matrix {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  color: var(--gray);
  font-size: 0.92rem;
}
/* Sticky linke Spalte + Ecke */
.matrix__corner,
.matrix__rowhead {
  position: sticky;
  left: 0;
  background: var(--white);
  z-index: 2;
}
.matrix__corner {
  z-index: 3;
  background: var(--gray-light);
  color: var(--gray);
  font-weight: 700;
  text-align: left;
  padding: 8px 14px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  vertical-align: bottom;
}
/* Gruppen-Kopf (Module / Methode / Pipeline / …) */
.matrix__group {
  background: var(--gray);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 6px 8px;
  border-left: 1px solid #5a5a5a;
}
/* Spalten-Kopf: rotierter Text */
.matrix__col {
  height: 265px;
  vertical-align: bottom;
  padding: 8px 0 10px;
  background: var(--gray-light);
  border-left: 1px solid var(--gray-mid);
  border-bottom: 2px solid var(--orange);
}
.matrix__col span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: inline-block;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray);
}
.matrix__col a { color: var(--gray); }
.matrix__col a:hover span { color: var(--orange); text-decoration: none; }
.matrix__col--module { background: #efe7dd; }
/* Zeilen-Kopf: Projektname */
.matrix__rowhead {
  text-align: left;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 9px 16px 9px 14px;
  border-top: 1px solid var(--gray-mid);
  border-right: 2px solid var(--orange);
}
.matrix__rowhead a { color: var(--gray); }
.matrix__rowhead a:hover { color: var(--orange); text-decoration: none; }
/* Zellen */
.matrix__cell {
  width: 38px;
  min-width: 38px;
  text-align: center;
  border-left: 1px solid var(--gray-mid);
  border-top: 1px solid var(--gray-mid);
}
.matrix__cell.is-on { color: var(--orange); font-size: 1.3rem; line-height: 1; }
.matrix tbody tr:hover td,
.matrix tbody tr:hover .matrix__rowhead { background: #fff7ee; }
.matrix__legende {
  color: #bbb;
  font-size: 0.9rem;
  margin-top: 0.9rem;
  margin-bottom: 0;
}
.matrix__legende--light { color: var(--text-light); }

/* CTA-Button auf der Landing (führt zur Matrix-Seite) */
.matrix-cta {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius);
}
.matrix-cta:hover { background: var(--orange-dark); color: var(--white); text-decoration: none; }

/* Matrix-Seite: Zwischenüberschriften */
.matrix-heading { font-size: 1.2rem; margin: 0 0 0.2rem; color: var(--gray); }
.matrix-heading__note { color: var(--text-light); font-weight: 400; font-size: 0.95rem; }
.matrix-sub { color: var(--text-light); font-size: 0.92rem; margin: 0 0 0.3rem; }

/* Inverse Matrix: Projektnamen als rotierte Spaltenköpfe sind länger → höher */
.matrix--inverse .matrix__col { height: 360px; }
.matrix--inverse .matrix__col span { font-size: 0.8rem; }
/* Kategorie-Trennzeile im Body der inversen Matrix */
.matrix__catlabel {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--gray);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-top: 2px solid var(--orange);
}

/* ── Arbeitsweise & Projektrollen (RM-965) ──────────────────────────────────
   Eigenes Status-Schema, bewusst getrennt vom Kompetenz-Schema: dort geht es
   um Koennen, hier um Besetzung. Gleiche Optik waere irrefuehrend.          */

.status-badge--besetzt       { background: #1f9d55; color: var(--white); border-color: #1f9d55; }
.status-badge--teilweise     { background: #e0a100; color: #3a2c00;      border-color: #e0a100; }
.status-badge--in-planung    { background: #2563eb; color: var(--white); border-color: #2563eb; }
.status-badge--bewusst-nicht-besetzt { background: var(--gray-mid); color: var(--text-light); border-color: #cfcfcf; }
/* Automatisiert bekommt eine eigene Farbe - es ist der ungewoehnliche Fall
   und soll beim Ueberfliegen der Tabelle als erstes auffallen. */
.status-badge--automatisiert { background: #7c3aed; color: var(--white); border-color: #7c3aed; }

/* Traeger: wer die Rolle ausfuellt */
.traeger { display: inline-block; font-size: 0.92rem; }
.traeger--code   { font-weight: 700; color: #6d28d9; }
.traeger--mensch { color: var(--text); }
.traeger--agent  { color: var(--text); }
.traeger--geteilt{ color: var(--text-light); }

/* Rollen-Tabelle */
.rollen-tabelle td { vertical-align: top; }
.rollen-tabelle .rollen-aufgabe { font-size: 0.88rem; color: var(--text-light); margin-top: 0.25rem; }
.rollen-zeile--in-planung { background: #f5f8ff; }
.rollen-zeile--automatisiert { background: #faf7ff; }
.rollen-ohne-praktik { color: var(--text-light); }

/* Status-Legende ueber der Tabelle */
.status-legende { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: 2rem; }
.status-legende__item { display: flex; align-items: baseline; gap: 0.6rem; max-width: 34rem; }
.status-legende__text { font-size: 0.9rem; color: var(--text-light); }

/* Lebenszyklus einer Aenderung - Textfassung, bis das Diagramm steht (RM-970) */
.lebenszyklus { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }
.lebenszyklus__schritt {
  border: 1px solid var(--gray-mid);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  background: var(--white);
  min-width: 9rem;
}
.lebenszyklus__name    { display: block; font-weight: 700; }
.lebenszyklus__traeger { display: block; font-size: 0.8rem; color: var(--text-light); }
.lebenszyklus__schritt--mensch  { border-left-color: #d22f2f; }
.lebenszyklus__schritt--agent   { border-left-color: var(--orange); }
.lebenszyklus__schritt--code    { border-left-color: #7c3aed; }
.lebenszyklus__schritt--geteilt { border-left-color: #e0a100; }

/* Besetzungsart-Karten */
.besetzungsart { border-top: 4px solid var(--gray-mid); }
.besetzungsart--mensch { border-top-color: #FF8700; }
.besetzungsart--agent  { border-top-color: #7c3aed; }
.besetzungsart--code   { border-top-color: #7c3aed; }

.stand-hinweis { color: var(--text-light); font-size: 0.9rem; }

/* ── Landing: Arbeitsweise als Rahmen ueber der Hierarchie (RM-969/RM-974) ──
   Abgesetzter Hintergrund, damit der Block als eigene Ebene UEBER den drei
   Ebenen liest und nicht als vierte Card daneben.                          */
.section--rahmen { background: #fffaf3; border-bottom: 1px solid var(--gray-mid); }
.rahmen-intro    { max-width: 720px; font-size: 1.06rem; }
.rahmen-nachsatz { max-width: 780px; margin-top: 1.75rem; }
.rahmen-ctas     { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.rahmen-cta-zweit{ font-weight: 700; }

.grafik-arbeitsweise { margin: 2.25rem 0 0; padding: 0; }
.grafik-arbeitsweise svg { width: 100%; height: auto; display: block; }
.grafik-arbeitsweise figcaption {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--text-light);
  max-width: 780px;
}
/* Auf schmalen Schirmen wuerde die Grafik unlesbar klein - dann darf sie in
   ihrem eigenen Kasten scrollen, statt die Seite breit zu machen. */
@media (max-width: 640px) {
  .grafik-arbeitsweise { overflow-x: auto; }
  .grafik-arbeitsweise svg { min-width: 560px; }
}

/* ── Navigation umbrechen statt die Seite breit machen (RM-969) ─────────────
   Die Leiste hatte schon bei sieben Eintraegen mehr Breite gebraucht, als ein
   Handy hergibt; mit „Arbeitsweise" und „Projektrollen" sind es neun. Ohne
   Umbruch scrollt die GANZE Seite waagerecht - der klassische Fall, in dem
   ein Zuwachs an Inhalt einen alten Layout-Fehler sichtbar macht.           */
.nav__links { flex-wrap: wrap; }
.nav { flex-wrap: wrap; }

@media (max-width: 900px) {
  .nav__links a { height: 44px; line-height: 44px; }
  .nav__links a.active { box-shadow: inset 0 -3px 0 var(--orange); }
}

/* ── Landing: drei Kategorien WIE / WER / WAS (RM-969, 06.08.2026) ─────────
   Der Prozess ordnet, die beiden Saeulen folgen. Deshalb bekommt WIE eine
   eigene Einfaerbung und die Nummern sind gross - die Reihenfolge ist die
   Aussage, nicht bloss Gliederung.                                         */
.kategorie-sektion { border-top: 1px solid var(--gray-mid); }
.kategorie-sektion--wie { background: #fffaf3; }

.kategorie-kopf { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1.4rem; }
.kategorie-nummer {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  /* Alle drei Nummern grau (Michael, 07.08.2026). Die Eins war orange, Zwei
     und Drei grau - das las sich als Hervorhebung der ersten Kategorie, war
     aber nur ein Rest. Eine Nummernfolge zaehlt; sie gewichtet nicht. */
  background: var(--gray); color: var(--white);
  font-size: 1.35rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.kategorie-label {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--text-light);
}
.kategorie-ueberschrift { margin: 0.1rem 0 0; }

.kategorie-inhalt { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem 2.5rem; }
.kategorie-teaser { margin: 0; font-size: 1.02rem; }
/* list-style ausdruecklich setzen: Zeile 29 nimmt allen ul die Punkte weg */
.kategorie-punkte { margin: 0; padding-left: 1.2rem; list-style: disc; }
.kategorie-punkte li { margin-bottom: 0.45rem; font-size: 0.94rem; color: var(--text); }
.kategorie-punkte li::marker { color: var(--orange); }
.kategorie-cta { margin-top: 1.8rem; }

.kategorie-sektion .oberpunkte-flow { margin-top: 2rem; }

@media (max-width: 800px) {
  .kategorie-inhalt { grid-template-columns: 1fr; }
}

/* ── Prozessbild als HTML-Raster (RM-970, 06.08.2026) ──────────────────────
   Loest die SVG-Fassung ab. Grund: anklickbare Prozessschritte. In einem SVG
   waeren Klickflaeche, Tastaturfokus und Screenreader-Text Handarbeit; hier
   sind sie eingebaut. Nebeneffekt: kein seitliches Scrollen mehr auf dem
   Handy - das Raster wird dort zu einer Liste von Karten.

   Drei Farben, keine vierte (Michael, 06.08.2026):
   Orange = Mensch bzw. Teil-Abdeckung, Lila = maschinell, Grau = neutral. */
.prozess { margin: 2rem 0 0; padding: 0; }

.prozess__raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 9), 1fr);
  column-gap: .7rem;
  align-items: stretch;
}

/* Zeile je Bauteil fest zuweisen. Ohne das setzt die automatische Platzierung
   jedes Element in eine neue Reihe (die Spalte kommt per inline-Style aus der
   Schleife) - das Raster kaskadiert dann treppenfoermig nach rechts unten. */
.prozess__bandtitel--oben  { grid-row: 1; }
.prozess__kasten           { grid-row: 2; }
.prozess__stand            { grid-row: 3; }
.prozess__werkzeug         { grid-row: 4; }
.prozess__strich           { grid-row: 5; }
.prozess__bandtitel--unten { grid-row: 6; }
.prozess__wer              { grid-row: 7; }

.prozess__bandtitel {
  grid-column: 1 / -1;
  margin: 0 0 .5rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-light);
}
.prozess__bandtitel--unten { color: #7c3aed; margin-top: 0; }

/* Der Ablauf. Bewusst unspektakulaer: Er soll aussehen wie jedes Prozessbild,
   das ein Fachleser kennt. */
.prozess__kasten {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3.6rem;
  padding: .5rem .35rem;
  border: 1.5px solid #474747;
  border-radius: 6px;
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25;
  color: #474747;
  hyphens: auto;
}
/* Gestrichelt = es entsteht kein festgehaltenes, pruefbares Ergebnis. Der
   Rahmen bleibt dunkel: Die Station gehoert zum Prozess und findet statt. */
.prozess__kasten--ohne-ergebnis { border-style: dashed; }

.prozess__stand {
  margin: .45rem 0 0;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
.prozess__stand--laeuft       { color: #7c3aed; }
.prozess__stand--teilweise    { color: #FF8700; }
/* Orange, nicht grau: Die Station laeuft - grau haette sie als nicht
   vorhanden gelesen. Der offene Kreis sagt, was fehlt: das Ergebnis. */
.prozess__stand--nicht_belegt { color: #FF8700; }

.prozess__werkzeug {
  margin: .2rem 0 0;
  text-align: center;
  font-size: .7rem;
  font-style: italic;
  line-height: 1.25;
  color: #999;
}

.prozess__strich {
  justify-self: center;
  width: 1.5px;
  min-height: 1.6rem;
  margin: .35rem 0 .55rem;
  background: #e0e0e0;
}

/* Die Besetzung. Drei Gewichte statt einer vierten Farbe: die beiden Tore voll
   gefuellt, die gemeinsam bearbeiteten Stationen nur umrandet. Gleich stark
   gezeichnet haetten sie die Aussage "entschieden wird an zwei Stellen"
   im Bild widerlegt. */
.prozess__wer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 3.4rem;
  padding: .5rem .3rem;
  border: 2px solid;
  border-radius: 6px;
  text-align: center;
  font: inherit;
  line-height: 1.2;
}
.prozess__wer-name  { font-size: .76rem; font-weight: 700; }
.prozess__wer-rolle { font-size: .66rem; opacity: .8; }

.prozess__wer--mensch    { border-color: #FF8700; background: #FF8700; color: #fff; }
.prozess__wer--gemeinsam { border-color: #FF8700; background: #fff;    color: #FF8700; }
.prozess__wer--agent     { border-color: #7c3aed; background: #f9f6ff; color: #7c3aed; }

/* Nur mit JavaScript: Aus den Kaesten werden Schalter. Ohne Skript bleiben sie
   gewoehnliche Kaesten - die Texte stehen dann ohnehin offen darunter. */
.prozess__wer[role="button"] { cursor: pointer; }
.prozess__wer[role="button"]:hover,
.prozess__wer[role="button"]:focus-visible { box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }
.prozess__wer[role="button"]:focus-visible { outline: 2px solid #7c3aed; outline-offset: 2px; }
.prozess__wer[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(124, 58, 237, .35); }
.prozess__wer[role="button"]::after {
  content: "Details →";
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
}
.prozess__wer[aria-expanded="true"]::after { content: "schließen"; }

.prozess figcaption {
  margin-top: 1.1rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 820px;
}
/* Eigene Zeile: Der Rollen-Hinweis ist eine Randbemerkung zum Bild, keine
   Fortsetzung der Kernaussage in der Bildunterschrift. */
.prozess__rollen { display: block; margin-top: .55rem; }

/* Die Fehlstelle steht abgesetzt: Sie ist die unbequemste Aussage der Seite
   und soll nicht ueberlesen werden. */
.prozess__fehlstelle {
  margin: 1.1rem 0 0;
  padding: .9rem 1.1rem;
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 820px;
}

/* Die Beschreibungen. Ohne Skript eine gewoehnliche Liste - sichtbar,
   druckbar, vorlesbar. Das Skript klappt sie ein. */
.prozess__texte { margin: 1.3rem 0 0; max-width: 820px; }
.prozess__text + .prozess__text { margin-top: .9rem; }
.prozess__text dt { font-weight: 700; color: #474747; font-size: .95rem; }
.prozess__text dd { margin: .25rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--text-light); }

.prozess__texte[data-eingeklappt] .prozess__text { display: none; }
.prozess__texte[data-eingeklappt] .prozess__text[data-offen] {
  display: block;
  margin: 1.1rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid #e0e0e0;
  border-left: 3px solid #7c3aed;
  border-radius: 6px;
  background: #fafafa;
}

/* Schmale Schirme: Raster aus, Karten an. Die SVG-Fassung musste hier
   seitlich scrollen; das entfaellt. */
@media (max-width: 900px) {
  .prozess__raster { display: block; }
  .prozess__bandtitel--oben  { margin-bottom: .35rem; }
  .prozess__bandtitel--unten { display: none; }
  .prozess__kasten { min-height: 0; margin-top: .9rem; font-size: .9rem; }
  .prozess__stand, .prozess__werkzeug { text-align: left; }
  .prozess__strich { display: none; }
  .prozess__wer {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: .5rem;
    margin-top: .35rem;
    padding: .45rem .7rem;
  }
}

.rueckwege-titel { margin-top: 2.5rem; }
.rueckwege { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.rueckweg { border: 1px solid var(--gray-mid); border-left-width: 5px; border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--white); }
.rueckweg--code        { border-left-color: #7c3aed; }
.rueckweg--anforderung { border-left-color: #FF8700; background: #fffaf3; }
.rueckweg--abnahme     { border-left-color: #FF8700; }
.rueckweg--betrieb     { border-left-color: var(--orange); }
.rueckweg__weg    { font-weight: 700; color: var(--text); }
.rueckweg__anlass { font-size: .88rem; color: var(--text-light); margin: .15rem 0 .6rem; }
.rueckweg p { margin: 0; font-size: .94rem; }

/* ── Rechtstexte (Impressum & Datenschutz, RM-987) ─────────────────────────
   Bewusst schmucklos: Wer hier landet, sucht eine Angabe. Begrenzte Zeilen-
   laenge, klare Absaetze, keine Karten und keine Farbakzente. */
.container--schmal { max-width: 760px; }
.rechtstext { margin-top: 2.4rem; }
.rechtstext h2 { margin-bottom: .6rem; font-size: 1.35rem; }
.rechtstext h3 { margin: 1.6rem 0 .35rem; font-size: 1rem; color: var(--text-light); }
.rechtstext p  { margin: 0 0 .9rem; line-height: 1.7; }
.rechtstext__anschrift { line-height: 1.6; }
.footer-bottom__recht { margin-left: 1rem; }
.footer-bottom__recht a { color: inherit; text-decoration: underline; }

/* Einordnungssatz auf der Uebersicht der oeffentlichen Fassung (RM-987):
   abgesetzt, damit er nicht als Fliesstext untergeht. */
.einordnung {
  margin: 1.4rem 0 0;
  padding: .95rem 1.15rem;
  background: rgba(255,255,255,.08);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  line-height: 1.65;
}


/* Einheitliche Spaltenbreiten in allen eingefuegten Tabellen (Michael,
   06.08.2026). Ohne feste Aufteilung richtet der Browser die Spalten nach dem
   laengsten Inhalt aus - dann steht dieselbe Spalte auf jeder Seite anders,
   und beim Vergleichen springt das Auge. */
.rollen-tabelle, .compare-table { table-layout: fixed; width: 100%; }
.rollen-tabelle th, .rollen-tabelle td,
.compare-table th, .compare-table td { overflow-wrap: anywhere; }
.rollen-tabelle th:nth-child(1), .rollen-tabelle td:nth-child(1) { width: 30%; }
.rollen-tabelle th:nth-child(2), .rollen-tabelle td:nth-child(2) { width: 52%; }
.rollen-tabelle th:nth-child(3), .rollen-tabelle td:nth-child(3) { width: 18%; }

/* ── Rollentabelle: einheitliche Schriftgroessen (RM-987, 06.08.2026) ──────
   Der Status-Badge war groesser als der Text daneben - in derselben Zeile
   sprangen dadurch drei Groessen. Jetzt: kleiner als bisher, aber deutlich
   groesser als die Zusatzangaben darunter. */
.rollen-tabelle .status-badge { font-size: .8rem; padding: .18rem .5rem; }
.rollen-tabelle .traeger { font-size: .88rem; display: inline-flex;
  align-items: baseline; gap: .4em; }
.rollen-tabelle .rollen-aufgabe { font-size: .82rem; }

/* Zeichen statt Farbflaeche: Wer die Tabelle ueberfliegt, erkennt Mensch,
   Agent und Automatik am Symbol - das Wort steht daneben, weil ein Symbol
   allein Ratespiel waere. */
.traeger__zeichen { font-size: .7em; opacity: .85; }
.traeger--mensch  .traeger__zeichen { color: #FF8700; }
.traeger--agent   .traeger__zeichen { color: #7c3aed; }
.traeger--code    .traeger__zeichen { color: #7c3aed; }
.traeger--geteilt .traeger__zeichen { color: #FF8700; }

/* Offene Rollen: der Hinweis steht bei der Rolle, nicht in einer zweiten
   Liste. Zurueckhaltend - kein Rot, es ist keine Stoerung, sondern ein Plan. */
.rollen-geplant {
  margin-top: .35rem; padding: .3rem .55rem;
  font-size: .8rem; line-height: 1.5; color: var(--text-light);
  background: #fafafa; border-left: 2px solid #d8d8d8; border-radius: 3px;
}

/* ── Kopfleiste auf schmalen Schirmen nicht klebend (RM-991) ───────────────
   Die Leiste umbricht dort auf zwei Zeilen und ueberdeckte klebend den
   Seitenkopf: Ueberschriften liefen sichtbar dahinter durch. Eine gemessene
   Hoehe waere die feinere Loesung, aber jede Loesung, die eine Hoehe ANNIMMT,
   bricht beim naechsten Menuepunkt wieder. Auf einem Telefon ist eine
   Navigation mit neun Punkten ohnehin kein Bedienelement, dem man beim
   Scrollen hinterhertraegt.
   Anforderung: RM-993. */
@media (max-width: 900px) {
  .site-header { position: static; }
}

/* ── "Ein Prozess, zwei Säulen" (RM-987) ───────────────────────────────────
   Erste Fassung sah nicht wie ein Bild aus: Balken und "Säulen" waren gleich
   hoch (69 px) und die Säulen halb so breit wie der Balken - drei
   gleichwertige Rechtecke. Ein Dach auf Säulen entsteht erst durch das
   Verhaeltnis: der Balken flach und ueber die volle Breite, die Saeulen
   schmal und deutlich hoeher, mit sichtbaren Traegern dazwischen. */
.saeulen { margin: 1.6rem 0 0; padding: 0; max-width: 640px; }
.saeulen a {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; text-decoration: none; color: inherit;
  border: 1.5px solid #d7cbb8; border-radius: 5px; background: #fff;
  transition: border-color .15s, background .15s;
}
.saeulen a:hover, .saeulen a:focus-visible {
  border-color: var(--orange); background: #fff6ec; text-decoration: none;
}
.saeulen__wort { font-weight: 700; font-size: .95rem; }
.saeulen__zusatz { font-size: .74rem; opacity: .72; margin-top: .08rem; }

/* Der Balken: flach, volle Breite, staerker gezeichnet - er traegt. */
.saeulen a.saeulen__balken {
  min-height: 2.9rem; padding: .35rem .8rem;
  border-width: 2px; border-color: var(--orange);
  background: #fff6ec;
}
.saeulen__balken .saeulen__wort { color: var(--orange); letter-spacing: .04em; }

/* Traeger und Saeulen teilen dieselbe Rasteraufteilung - nur so sitzen die
   Verbindungen wirklich ueber den Saeulenmitten und nicht ungefaehr. */
.saeulen__traeger, .saeulen__paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 13rem));
  justify-content: space-around; gap: 1.2rem;
}
.saeulen__traeger { height: 1.5rem; }
.saeulen__traeger span {
  justify-self: center; width: 2px; height: 100%;
  background: #c9b89f;
}

/* Die Saeulen: schmal und hoch - das Verhaeltnis macht das Bild. */
.saeulen__saeule { min-height: 5.2rem; padding: .5rem .6rem; }

@media (max-width: 600px) {
  .saeulen__traeger, .saeulen__paar { grid-template-columns: 1fr; }
  .saeulen__traeger span:nth-child(2) { display: none; }
  .saeulen__traeger { height: 1rem; }
  .saeulen__saeule { min-height: 0; padding: .55rem .7rem; }
}

/* ── Verweise bündig mit der Abschnitts-Überschrift (RM-987) ───────────────
   Die Überschrift steht hinter der Nummer eingerückt, die Verweise standen am
   Containerrand - zwei Fluchten in derselben Spalte. */
.kategorie-cta { margin-left: 4rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
@media (max-width: 700px) { .kategorie-cta { margin-left: 0; } }

/* ── Abschnitte auf der Übersicht sauber abwechselnd (RM-987) ──────────────
   Rahmen und WIE hatten denselben Ton, WER und WAS gar keinen - die Gliederung
   war dadurch nicht mehr ablesbar. Jetzt streng im Wechsel. */
.section--rahmen            { background: #fffaf3; }
.kategorie-sektion--wie     { background: #ffffff; }
.kategorie-sektion--wer     { background: #fffaf3; }
.kategorie-sektion--was     { background: #ffffff; }


/* Matrix-Abschnitt in der Farbfolge der Uebersicht (RM-987): Der dunkle Block
   brach die Gliederung, die WIE / WER / WAS gerade aufbaut. */
.landing .section--dark, body .section--dark {
  background: #fffaf3; color: inherit;
}
.section--dark h2, .section--dark .section-label { color: var(--gray); }
.section--dark p { color: var(--text-light); }


/* ── Saeulen-Bild: der Balken steht AUF den Saeulen (RM-987, 06.08.2026) ────
   Verbindungslinien sind weg - wenn die Saeulen den Balken wirklich tragen,
   braucht es keine Linie, die es behauptet. Dafuer muss der Balken die
   Saeulen beruehren und die Saeulen muessen schmal und hoch sein: Ein
   liegendes Rechteck ueber zwei liegenden Rechtecken ist kein Bauwerk. */
.saeulen { max-width: 460px; }
.saeulen a.saeulen__balken {
  min-height: 3.2rem; border-radius: 5px 5px 0 0; border-bottom-width: 3px;
}
.saeulen__paar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 8.5rem));
  justify-content: space-around; gap: 2.6rem; margin-top: -1.5px;
}
.saeulen a.saeulen__saeule {
  min-height: 7rem; border-radius: 0 0 5px 5px; border-top-width: 0;
  padding: .6rem .5rem;
}

/* Rahmen um beide Schaubilder - sie sind Bilder, keine Textabschnitte. */
.saeulen, figure.prozess {
  border: 1px solid #e2d9cb; border-radius: 8px;
  padding: 1.2rem 1.3rem; background: rgba(255,255,255,.55);
}
.saeulen { padding: 1.4rem 1.6rem; }


/* ── Saeulen-Bild: einheitlich orange, mit Abstand (RM-987, 06.08.2026) ─────
   Michael: alle Elemente wie der Prozess-Kasten, und mehr Luft zwischen dem
   Balken und den beiden Saeulen. Damit stehen sie nicht mehr direkt auf ihm -
   die Kanten werden also wieder rundum gezeichnet, sonst blieben die
   abgeschnittenen Ecken von der buendigen Fassung stehen. */
.saeulen a.saeulen__balken,
.saeulen a.saeulen__saeule {
  border: 2px solid var(--orange); border-radius: 5px;
  background: #fff6ec;
}
.saeulen a.saeulen__saeule { border-top-width: 2px; }
.saeulen__paar { margin-top: 1.6rem; }
.saeulen .saeulen__wort { color: var(--orange); }


/* ── Orange Oberkante: eine Regel, ein Ort (RM-987, 06.08.2026) ────────────
   Sie markiert eine KARTE - ein abgegrenztes, anklickbares Objekt, das
   irgendwohin fuehrt. Abschnitte, Schaubilder und Fliesstext tragen sie
   nicht. Bis heute trug .section--rahmen sie als einzige Ausnahme; damit war
   die Kante kein Zeichen mehr, sondern Dekoration.

   Der Matrix-Verweis war deshalb ohne Kante: Er ist ein Abschnitt. Da er
   dieselbe Rolle spielt wie die drei Oberpunkt-Karten - ein Angebot,
   weiterzugehen - bekommt er jetzt eine Karte statt eines Abschnitts. */
.matrix-teaser {
  border-top: 4px solid var(--orange);
  background: #fff; border: 1px solid var(--border-light, #e0e0e0);
  border-top: 4px solid var(--orange); border-radius: 6px;
  padding: 1.6rem 1.8rem; max-width: 820px;
}

/* Saeulen-Bild: Schrift eine Spur groesser (Michael, 06.08.2026). */
.saeulen .saeulen__wort   { font-size: 1.15rem; }
.saeulen .saeulen__zusatz { font-size: .86rem; opacity: .8; }


/* ── Prozessbild: groessere Schrift und Legende (RM-987, 06.08.2026) ────────
   Michael: Schrift zu klein, und die beiden Zeilen unter den Kaesten sowie
   die Farben erklaeren sich nicht. Beides behoben - die Legende sagt, was
   Zeile 2 und Zeile 3 sind und wofuer die Farben stehen. */
.prozess__kasten   { font-size: .88rem; }
.prozess__stand    { font-size: .8rem; }
.prozess__werkzeug { font-size: .78rem; }
.prozess__wer-name { font-size: .84rem; }
.prozess__wer-rolle{ font-size: .72rem; }
.prozess__bandtitel{ font-size: .95rem; }

.prozess__legende {
  list-style: none; margin: 1.2rem 0 0; padding: .9rem 1.1rem;
  background: #fafafa; border: 1px solid #e6e6e6; border-radius: 6px;
  font-size: .86rem; line-height: 1.7; color: var(--text-light);
}
.prozess__legende li + li { margin-top: .2rem; }
.pl__kopf { font-weight: 700; color: var(--gray); }
.pl__m--laeuft    { color: #7c3aed; }
.pl__m--teilweise { color: #FF8700; }
.pl__m--offen     { color: #FF8700; }


/* ── Rueckwege: Anlass zuerst, Pfeil zurueck (RM-987, 06.08.2026) ───────────
   Ein Rueckweg beginnt mit einem Ereignis. Deshalb steht der Anlass oben und
   traegt das Gewicht; die Wegstrecke darunter zeigt, wie weit es zurueckgeht.
   Der Bogen laeuft unter beiden Stationen hindurch - herunter, nach links,
   wieder herauf -, damit man einen Ruecksprung sieht und keinen
   Vorwaertsschritt. Ein gerader Pfeil nach links waere zu leicht mit dem
   Hauptpfad zu verwechseln. */
.rueckweg__anlass {
  font-weight: 700; font-size: 1rem; color: var(--gray);
  margin-bottom: .7rem; line-height: 1.4;
}
.rueckweg__weg {
  position: relative; display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; padding-bottom: 1.1rem;
  font-size: .84rem; color: var(--text-light);
}
.rw__ziel, .rw__start {
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: .18rem .5rem; font-weight: 700; color: var(--gray);
  white-space: nowrap;
}
/* Der Bogen: unten herum vom rechten zum linken Kasten. */
.rw__bogen {
  position: relative; height: 1px; align-self: center;
}
.rw__bogen::before {
  content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: .75rem;
  border: 2px solid currentColor; border-top: 0; border-radius: 0 0 6px 6px;
  opacity: .75;
}
.rw__bogen::after {
  content: ""; position: absolute; left: -1px; top: .5rem;
  border: 5px solid transparent; border-bottom-color: currentColor;
  opacity: .75;
}
.rw__lesehilfe { grid-column: 1 / -1; font-size: .78rem; opacity: .75; }


/* ── Rueckwege: Bogen tiefer, aus der Mitte, deutlicher (RM-987) ────────────
   Michael: Der Bogen begann am Rand und war zu zart. Er startet jetzt in der
   MITTE des rechten Kastens, laeuft tiefer und ist kraeftiger gezeichnet -
   ein Ruecksprung soll man sehen, nicht suchen. */
.rueckweg__weg { padding-bottom: 1.9rem; }
.rw__bogen::before {
  top: 1.0rem; height: 1.5rem; border-width: 2.5px; opacity: 1;
  left: -50%; right: -50%;
}
.rw__bogen::after {
  left: calc(-50% - 6px); top: .9rem;
  border-width: 7px; opacity: 1;
}
.rueckweg--code    .rw__bogen { color: #7c3aed; }
.rueckweg--anforderung .rw__bogen { color: #FF8700; }
.rueckweg--abnahme .rw__bogen { color: #FF8700; }
.rueckweg--betrieb .rw__bogen { color: #FF8700; }

/* Legende: die Farbfelder als gefuellt/umrandet zeigen, damit der Unterschied
   sichtbar ist statt nur benannt. */
.pl__feld {
  display: inline-block; width: .85em; height: .85em; vertical-align: -.08em;
  border: 2px solid; border-radius: 2px; margin-right: .15em;
}
.pl__feld--mensch    { border-color: #FF8700; background: #FF8700; }
.pl__feld--gemeinsam { border-color: #FF8700; background: #fff; }
/* Der violette Punkt darin zeigt: die KI arbeitet mit. */
.pl__feld--gemeinsam { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px #7c3aed; }
.pl__feld--agent     { border-color: #7c3aed; background: #f9f6ff; }


/* ── Rueckwege: Bogen exakt zwischen den Kastenmitten (RM-987, 06.08.2026) ──
   Michael: Der Pfeil sass bei "Abnahme" und "Betrieb" nicht mittig. Ursache:
   Die beiden Kaesten waren unterschiedlich breit, der Bogen aber mit festen
   Prozentwerten gezeichnet - er konnte gar nicht ueberall passen.
   Jetzt zwei GLEICH BREITE Spalten: Die Mitten liegen damit immer bei 25 %
   und 75 %, unabhaengig von der Laenge der Stationsnamen. Geometrie schlaegt
   Nachjustieren. */
.rueckweg__weg {
  grid-template-columns: 1fr 1fr; gap: 0;
  padding-bottom: 2.6rem; position: relative;
}
.rw__ziel, .rw__start { justify-self: center; text-align: center; }
.rw__bogen { display: none; }

.rueckweg__weg::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 2.35rem;
  height: 1.15rem; border: 2.5px solid currentColor; border-top: 0;
  border-radius: 0 0 7px 7px;
}
/* Pfeilspitze exakt ueber der Mitte des linken Kastens, direkt an ihm. */
.rueckweg__weg::after {
  content: ""; position: absolute; left: 25%; top: 2.1rem;
  transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: currentColor;
}
.rueckweg--code        .rueckweg__weg { color: #7c3aed; }
.rueckweg--anforderung .rueckweg__weg { color: #FF8700; }
.rueckweg--abnahme     .rueckweg__weg { color: #FF8700; }
.rueckweg--betrieb     .rueckweg__weg { color: #FF8700; }

/* Abstand: Die Lesehilfe stand mitten im Bogen. */
.rw__lesehilfe { margin-top: 2.9rem; color: var(--text-light); }


/* ── Stand im Kasten statt darunter (RM-987, 06.08.2026) ────────────────────
   Der Kasten traegt jetzt beides: oben die Station, darunter - durch eine
   Linie getrennt - wie weit sie traegt. Damit erklaert sich die Angabe aus
   ihrer Lage und braucht keine Legende. */
.prozess__kasten {
  flex-direction: column; gap: 0; padding: 0; min-height: 5.4rem;
  justify-content: flex-start;
}
.prozess__name {
  display: flex; align-items: center; justify-content: center;
  flex: 1; padding: .5rem .35rem; text-align: center; hyphens: auto;
}
.prozess__kasten .prozess__stand {
  display: block; width: 100%; margin: 0;
  padding: .3rem .25rem; font-size: .72rem; font-weight: 700;
  border-top: 1px solid #e0e0e0; text-align: center; line-height: 1.25;
}
.prozess__kasten--ohne-ergebnis .prozess__stand { border-top-style: dashed; }
.prozess__werkzeug { margin-top: .55rem; }

@media (max-width: 900px) {
  .prozess__kasten { min-height: 0; }
  .prozess__name { padding: .5rem .7rem; justify-content: flex-start; text-align: left; }
  .prozess__kasten .prozess__stand { text-align: left; padding: .3rem .7rem; }
}


/* ── Prozessbild: hoehere Kaesten, einheitlicher Trennstrich (RM-987) ───────
   Michael, 06.08.2026: Die Kaesten duerfen nach unten deutlich groesser sein,
   und der Trennstrich soll ueberall gleich aussehen - auch bei der Station
   ohne festgehaltenes Ergebnis. Deren Besonderheit traegt der gestrichelte
   Rahmen, das muss der Strich nicht wiederholen. */
.prozess__kasten { min-height: 8.4rem; }
.prozess__kasten--ohne-ergebnis .prozess__stand { border-top-style: solid; }
.prozess__kasten .prozess__stand { padding: .45rem .3rem; font-size: .74rem; }

/* Mehr Luft vor den Besetzungsarten und den Rueckwegen. */
.besetzungsarten, .rueckwege-titel { margin-top: 3.2rem; }

/* ── Ueberschriften-Hierarchie auf der Prozess-Seite (RM-987) ───────────────
   Vorher trugen "Der Prozess", "Die vier Rueckwege", "Drei Besetzungsarten"
   und "Die Praktiken dahinter" verschiedene Groessen ohne Regel dahinter.
   Regel jetzt: Ein Hauptthema (h2) steht ueber allem, was danach kommt;
   Unterabschnitte (h3) sind kleiner und ruhiger. Gleiche Ebene, gleiche
   Groesse - sonst raet der Leser an der Gliederung herum. */
.section h2 { font-size: 1.75rem; line-height: 1.25; margin-bottom: .6rem; }
.section h3, .rueckwege-titel { font-size: 1.25rem; line-height: 1.3; margin-bottom: .5rem; }
.rueckweg__anlass { font-size: 1rem; }


/* ── Feinschliff Prozessbild (RM-987, 06.08.2026) ──────────────────────────
   Der Trennstrich sass bei "Verifikation" tiefer als bei den Nachbarn, weil
   "eingerichtet mit bekannter Luecke" auf zwei Zeilen umbricht. Eine feste
   Hoehe fuer den Standbereich bringt den Strich ueberall auf dieselbe Linie -
   eine Kante, die je Kasten woanders liegt, liest sich als Schlamperei. */
.prozess__kasten .prozess__stand {
  min-height: 2.6rem; display: flex; align-items: center;
  justify-content: center; padding: .3rem .3rem;
}
@media (max-width: 900px) {
  .prozess__kasten .prozess__stand { min-height: 0; justify-content: flex-start; }
}

/* Abstand ueber den Besetzungsarten - der Block stand direkt am Schaubild. */
.abschnitt--besetzungsarten { margin-top: 4rem; }

/* Der Ruecksprung-Pfeil endet DIREKT unter dem Kasten, nicht auf halber
   Hoehe des Bogens (Michael, 06.08.2026). */
.rueckweg__weg::after { top: 1.55rem; }
.rueckweg__weg::before { top: 1.95rem; height: 1.35rem; }


/* FESTE Hoehe, nicht nur Mindesthoehe: "eingerichtet mit bekannter Luecke"
   braucht zwei Zeilen und schob den Strich sonst um 14px nach oben. Eine
   Mindesthoehe erlaubt genau das - eine feste nicht. */
.prozess__kasten .prozess__stand { height: 3.1rem; min-height: 0; }
@media (max-width: 900px) { .prozess__kasten .prozess__stand { height: auto; } }

/* Pfeilspitze buendig an die Unterkante des Kastens. */
.rueckweg__weg::after  { top: 1.9rem; }
.rueckweg__weg::before { top: 2.3rem; }


/* ── Stand: eigene Farbskala (RM-987, 06.08.2026) ──────────────────────────
   Michael: umgesetzt dunkelgruen, eingerichtet mit bekannter Luecke blau,
   in Planung orange - alles fett.

   Bewusst eine ANDERE Skala als im unteren Band: Dort sagt die Farbe, WER
   arbeitet; hier sagt sie, WIE WEIT die Station traegt. Zwei Fragen, zwei
   Skalen. Wuerden sie sich dieselben Farben teilen, laese man eine Verbindung,
   die es nicht gibt. */
.prozess__kasten .prozess__stand { font-weight: 700; }
.prozess__stand--laeuft       { color: #1d7a3c; }
.prozess__stand--teilweise    { color: #1565b8; }
.prozess__stand--nicht_belegt { color: #FF8700; }

/* "MEHR" unten rechts in die Ecke: Dort liest man es als Aufforderung, nicht
   als weitere Angabe zur Rolle. */
.prozess__wer { position: relative; padding-bottom: 1.25rem; }
.prozess__wer[role="button"]::after {
  position: absolute; right: .45rem; bottom: .3rem;
  font-size: .58rem; letter-spacing: .05em; opacity: .8;
}

/* Pfeilspitze mittig auf den senkrechten Strich des Bogens. Der Strich ist
   der 2.5px breite Rand des Bogens; seine Mitte liegt daher 1.25px rechts
   von der 25%-Marke - genau darum war die Spitze immer leicht daneben. */
.rueckweg__weg::after { left: calc(25% + 1.25px); }


/* Schrift im unteren Band durchgehend dunkel (Michael, 06.08.2026, als Test).
   Die Besetzungsart steht in Rahmen und Fuellung - der Text muss vor allem
   lesbar sein. Weisse Schrift auf Orange und orange Schrift auf Weiss waren
   beide schwaecher als dunkel auf hell. */
.prozess__wer--mensch, .prozess__wer--gemeinsam,
.prozess__wer--agent, .prozess__wer--offen { color: #222; }
.prozess__wer .prozess__wer-rolle { color: #555; }


/* ── Status-Legende: eine Fluchtlinie fuer den Text (RM-987, 06.08.2026) ────
   Die Marken sind unterschiedlich breit ("BESETZT" gegen "BEWUSST NICHT
   BESETZT"), der Text begann deshalb bei jedem Eintrag woanders. Feste Spalte
   fuer die Marke: Dann fluchtet der Text - und die Folgezeile eines
   umbrechenden Textes ebenso, statt unter die Marke zu rutschen. */
.status-legende__item {
  display: grid; grid-template-columns: 11.5rem 1fr;
  align-items: start; gap: .1rem .75rem;
}
.status-legende__item > :first-child { justify-self: start; }
.status-legende__text { display: block; }

@media (max-width: 700px) {
  .status-legende__item { grid-template-columns: 1fr; gap: .25rem; }
}


/* ── Eine Statusskala fuer die ganze Seite (RM-987, 06.08.2026) ─────────────
   Geprueft auf Michaels Verdacht hin - er stimmte. Die Projektrollen und das
   Prozessbild benutzten verschiedene Farben fuer dieselben Zustaende:

     Zustand                        Projektrollen   Prozessbild
     umgesetzt / besetzt            gruen           gruen (anderer Ton)
     teilweise                      gelb            BLAU
     in Planung                     BLAU            ORANGE

   Damit stand Blau auf derselben Seite einmal fuer "teilweise" und einmal fuer
   "in Planung" - und Orange zusaetzlich schon fuer "Mensch" im unteren Band.
   Eine Farbe mit zwei Bedeutungen ist schlimmer als gar keine Farbe.

   Massgeblich ist die Skala der Projektrollen: Sie ist aelter, deckt fuenf
   Zustaende ab und ist bereits ueberall dort im Einsatz. Das Prozessbild zieht
   nach. Michaels frueherer Wunsch "in Planung = orange" faellt damit -
   Widerspruchsfreiheit geht hier vor Einzelentscheidung. */
.prozess__stand--laeuft       { color: #1f9d55; }
.prozess__stand--teilweise    { color: #b07d00; }
.prozess__stand--nicht_belegt { color: #2563eb; }

/* Breiteste Marke ist "BEWUSST NICHT BESETZT" mit 201px - die Spalte war mit
   184px zu schmal und der Text lief hinein. */
.status-legende__item { grid-template-columns: 13.6rem 1fr; }


/* ── "teilweise" in dunklem Bernstein (RM-987, 06.08.2026) ──────────────────
   Michael: Orange ist besetzt (Mensch), Gelb zu schwach. Bernstein ist dunkel
   genug zum Lesen und von Gruen wie Blau eindeutig zu unterscheiden - und es
   sagt semantisch das Richtige: angefangen, nicht fertig.
   Auch das gefuellte Abzeichen bei den Projektrollen wird dunkler; hell auf
   Gelb war dort kaum lesbar. */
.prozess__stand--teilweise { color: #a06a00; }
.status-badge--teilweise { background: #a06a00; color: #fff; }


/* ── Regeln: Bezug zum Prozessbild (RM-987, 06.08.2026) ────────────────────
   Zurueckhaltend gesetzt - die Zuordnung ist eine Fussnote zur Regel, nicht
   ihr Inhalt. Wichtig ist, dass die Namen woertlich aus dem Bild stammen;
   eine sinngemaesse Umschreibung waere genau der Bruch, der aufgefallen ist. */
.card__gilt { margin: .7rem 0 0; font-size: .78rem; color: var(--text-light); }
.gilt-marke {
  display: inline-block; margin: .15rem .25rem .15rem 0;
  padding: .1rem .45rem; border: 1px solid #d8d8d8; border-radius: 3px;
  background: #fafafa; color: var(--gray); font-weight: 700;
}
.gilt-marke--alle { border-style: dashed; }


/* ── Gleicher Farbrhythmus auf allen Seiten (RM-987, 07.08.2026) ────────────
   Michael mag den Wechsel getoent/weiss von der Uebersicht und wollte ihn
   ueberall. Der Grund, warum es ihn sonst nirgends gab: Die Uebersicht hat
   fuenf Abschnitte, jede andere Seite genau einen - es gab schlicht nichts zu
   wechseln.

   Deshalb greift der Wechsel hier eine Ebene tiefer, an den Inhaltsbloecken.
   Damit die Toenung wie auf der Uebersicht von Rand zu Rand laeuft, obwohl der
   Block in einem begrenzten Container sitzt: ein sehr breiter Schlagschatten,
   seitlich freigegeben. Das kommt ohne zusaetzliche Huellen im HTML aus -
   und ohne die haette jede der sieben Vorlagen angefasst werden muessen. */
/* Die Toenung setzt die Vorlage (loop.index0), nicht eine CSS-Zaehlregel:
   nth-of-type zaehlt Geschwister gleichen Tags und geraet aus dem Tritt,
   sobald dazwischen ein fremdes Element steht - sichtbar, aber nicht
   erklaerbar. */
.block { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.block--getoent {
  background: #fffaf3;
  box-shadow: 0 0 0 100vmax #fffaf3;
  clip-path: inset(0 -100vmax);
  padding-top: 2.4rem; padding-bottom: 2.4rem;
  margin-top: 2.2rem; margin-bottom: 2.2rem;
}
.block--getoent:last-child { margin-bottom: 3.2rem; }

/* Kopfleiste: kompakter, aber der aktive Punkt bleibt erkennbar. */
.nav__links a.active { font-weight: 700; }
.site-header .container { padding-top: 0; padding-bottom: 0; }


/* ── Feinschliff Farbrhythmus und Kopf (RM-987, 07.08.2026) ────────────────
   Der Matrix-Abschnitt schliesst die Folge der Uebersicht ab und muss deshalb
   wieder getoent sein - sonst enden zwei weisse Abschnitte hintereinander. */
.section--getoent { background: #fffaf3; }

/* Der dunkle Kopfbereich nahm auf jeder Seite sehr viel Hoehe. 96/80 Pixel
   Innenabstand waren fuer eine Ueberschrift und zwei Saetze zu viel. */
.hero { padding: 52px 0 46px; }
.hero h1 { margin-bottom: .7rem; line-height: 1.2; }

/* Alle vier Rueckwege gleich gestalten: Einer trug als einziger eine
   Hintergrundfarbe. Das las sich als Hervorhebung, war aber nur ein Rest aus
   einer frueheren Fassung - die Aussage "der wichtigste Rueckweg" steht im
   Text und braucht keine zweite Auszeichnung. */
.rueckweg--anforderung { background: #fff; }


/* Kopfbereich weiter verdichtet (Michael, 07.08.2026): 302px waren immer noch
   viel, bevor ein Wort Inhalt kommt. Der Einleitungstext lief mit 1.65-facher
   Zeilenhoehe auf 720px Breite ueber vier Zeilen - etwas breiter und enger
   gesetzt sind es drei, ohne dass er gedraengt wirkt. */
.hero { padding: 40px 0 34px; }
.hero h1 { line-height: 1.15; margin-bottom: .55rem; }
.hero__sub { line-height: 1.5; max-width: 860px; }


/* ── Gleich hoher Kopfbereich auf allen Seiten (Michael, 07.08.2026) ────────
   Der dunkle Kopf war je Seite unterschiedlich hoch, weil er sich allein nach
   der Laenge des Einleitungstextes richtete: drei Zeilen auf den Projekten,
   zwei auf den Bausteinen - 235 gegen 208 Pixel. Beim Blaettern sprang die
   Seite dadurch, ohne dass ein Grund erkennbar war.

   Eine Mindesthoehe statt einer festen: Ein laengerer Einleitungstext darf den
   Kopf weiterhin wachsen lassen (auf schmalen Fenstern bricht er ohnehin um) -
   kuerzer als das gemeinsame Mass wird er aber nicht mehr. Der Inhalt sitzt
   dabei mittig, sonst haengt bei kurzem Text unten ein leerer Streifen. */
.hero .container {
  min-height: 10rem;
  display: flex; flex-direction: column; justify-content: center;
}

/* Die Rueckwege ruecken naeher an das heran, worauf sie sich beziehen
   (Michael, 07.08.2026). 3.2rem stammten aus der Zeit, als sie in einem
   eigenen Block standen und der Abstand die Blockgrenze ueberbruecken musste.
   Im selben Block gelesen war das zu viel Luft zwischen Bild und Fortsetzung. */
.rueckwege-titel { margin-top: 2rem; }


/* ════ Farbbaender: eine Regel fuer alle Seiten (Michael, 07.08.2026) ══════
   Vorgeschichte: Der Wechsel gelb/weiss lag bisher auf den INHALTSBLOECKEN,
   waehrend der Abschnitt drumherum weiter seine 72px Polsterung behielt und
   die Bloecke zusaetzlich Aussenabstaende trugen. Ergebnis auf der
   Prozess-Seite: 107px Weiss zwischen dunklem Kopf und erstem gelben Band,
   dann 64px, dann 35px zwischen den Baendern. Auf den Projektrollen sass die
   Status-Legende in genau diesem weissen Streifen - die Seite sah aus, als
   begaenne sie mit der Legende.

   Auf der Uebersicht gab es das Problem nie, weil die Baender dort echte
   Seitenabschnitte sind, die sich beruehren. Genau das gilt jetzt ueberall:

     * Der Abschnitt selbst hat KEINE senkrechte Polsterung mehr - sonst
       entsteht Weiss, das zu keinem Band gehoert.
     * Baender tragen ihren Abstand als Innenpolsterung, nie als Aussenabstand
       - ein Aussenabstand ist per Definition Raum ZWISCHEN Baendern.
     * Damit stossen sie aneinander: Das erste Band beginnt an der Unterkante
       des dunklen Kopfes, jedes weitere an der Unterkante seines Vorgaengers.

   Merksatz fuer spaeter: Wer hier einen Abstand braucht, gibt ihn dem Band
   nach innen. Ein `margin` an einem Band reisst die Farbfolge wieder auf. */
.section--baender { padding-top: 0; padding-bottom: 0; }
.section--baender .block,
.section--baender .block--getoent {
  margin-top: 0; margin-bottom: 0;
  padding-top: 2.6rem; padding-bottom: 2.6rem;
}
/* Das letzte Band bekommt etwas mehr Boden, damit es nicht auf dem Fussbereich
   aufsitzt - als Innenpolsterung, nicht als Abstand. */
.section--baender .block:last-child { padding-bottom: 3.4rem; }

/* Was frueher lose unter den Baendern hing, ist jetzt selbst ein Band und
   braucht seinen eigenen Abstand nicht mehr mitzubringen. */
.section--baender .stand-hinweis { margin-top: 0; }