/* =========================================================================
   Collaborative Community – Gestaltungssystem
   -------------------------------------------------------------------------
   Gestalterische Grundhaltung, abgeleitet aus dem Grunddokument:
   "Klares Zentrum, offene Ränder" und "Architektur statt Appell".
   Daher: viel Ruhe, feine Linien statt Flächenlärm, ein einziger Akzent,
   Serifen für Aussagen, Grotesk für Erklärung und Navigation.
   ========================================================================= */

/* --- 1. Farb- und Maßtoken ---------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Papier / Tinte */
  --paper:        #fbfaf8;
  --paper-2:      #f4f2ee;
  --paper-3:      #eceae4;
  --ink:          #1b2429;
  --ink-2:        #3d4a52;
  --ink-3:        #6b7981;

  /* Akzent: ruhiges Blaugrau, übernommen aus der bisherigen Seite */
  --accent:       #4f6470;
  --accent-stark: #3a4c56;
  --accent-zart:  rgba(79, 100, 112, 0.10);

  /* Zweitakzent: warmes Ocker – markiert Perspektivwechsel, nie Dekoration */
  --signal:       #9a6b34;
  --signal-zart:  rgba(154, 107, 52, 0.10);

  --linie:        rgba(27, 36, 41, 0.14);
  --linie-zart:   rgba(27, 36, 41, 0.07);

  /* Typografie */
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mass:      72rem;   /* äußere Bühne */
  --mass-text: 38rem;   /* Lesespalte */
  --mass-weit: 54rem;   /* breitere Textblöcke */

  --radius: 10px;
  --takt:   clamp(3.5rem, 8vw, 6.5rem);   /* vertikaler Abschnittsabstand */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #131a1e;
    --paper-2:    #192126;
    --paper-3:    #202a30;
    --ink:        #e8e6e1;
    --ink-2:      #bcc5ca;
    --ink-3:      #8d9aa1;
    --accent:     #93b0bd;
    --accent-stark: #b8cfd9;
    --accent-zart: rgba(147, 176, 189, 0.14);
    --signal:     #d3a068;
    --signal-zart: rgba(211, 160, 104, 0.13);
    --linie:      rgba(232, 230, 225, 0.16);
    --linie-zart: rgba(232, 230, 225, 0.08);
  }
}

:root[data-theme="dark"] {
  --paper:      #131a1e;
  --paper-2:    #192126;
  --paper-3:    #202a30;
  --ink:        #e8e6e1;
  --ink-2:      #bcc5ca;
  --ink-3:      #8d9aa1;
  --accent:     #93b0bd;
  --accent-stark: #b8cfd9;
  --accent-zart: rgba(147, 176, 189, 0.14);
  --signal:     #d3a068;
  --signal-zart: rgba(211, 160, 104, 0.13);
  --linie:      rgba(232, 230, 225, 0.16);
  --linie-zart: rgba(232, 230, 225, 0.08);
}

/* --- 1b. Lokal eingebundene Schriften ------------------------------------ */
/* Statt Google Fonts extern zu laden: eigene, kleine Subsets (nur lateinische
   Zeichen, keine Datenübertragung an Dritte). Quelle: fontsource.org.       */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
}

/* --- 2. Grundlagen ------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.15rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.4rem); margin-top: 2em; }
h4 { font-size: 1.075rem; margin-top: 1.8em; font-family: var(--sans); font-weight: 620; letter-spacing: 0; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
strong { font-weight: 620; color: var(--ink); }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.6rem 0; }

a { color: var(--accent-stark); text-decoration-color: var(--linie); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 1.3em; padding-left: 1.15em; }
li { margin-bottom: .42em; }
li::marker { color: var(--ink-3); }

img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: var(--radius);
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }

/* --- 3. Gerüst ----------------------------------------------------------- */

.buehne { width: 100%; max-width: var(--mass); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.spalte { max-width: var(--mass-text); }
.spalte-weit { max-width: var(--mass-weit); }

.abschnitt { padding-block: var(--takt); border-top: 1px solid var(--linie-zart); }
.abschnitt--getoent { background: var(--paper-2); border-top-color: transparent; }
.abschnitt--ruhig { padding-block: calc(var(--takt) * .62); }

.abschnitt__marke {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.5rem; display: flex; align-items: center; gap: .8rem;
}
.abschnitt__marke::after { content: ""; flex: 1; height: 1px; background: var(--linie); max-width: 8rem; }

/* --- 4. Kopf und Fuß ----------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie-zart);
}
.kopf__innen { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; position: relative; }

.marke { display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink); flex: none; }
.marke__wort { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; }
.marke__wort span { color: var(--ink-3); font-weight: 400; }
.marke:hover .marke__wort span { color: var(--accent); }

.hauptnav { margin-left: auto; }
.hauptnav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; align-items: center; }
.hauptnav a {
  display: block; padding: .45rem .7rem; border-radius: 7px;
  font-size: .935rem; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.hauptnav a:hover { background: var(--accent-zart); color: var(--ink); }
.hauptnav a[aria-current="page"] { color: var(--ink); font-weight: 560; background: var(--accent-zart); }
.hauptnav .nav-extern { color: var(--ink-3); }
.nav-trenner { width: 1px; height: 1.4rem; background: var(--linie); margin: 0 .5rem; }

.nav-schalter {
  display: none; background: none; border: 1px solid var(--linie);
  border-radius: 8px; padding: .45rem .75rem; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
}

@media (max-width: 64rem) {
  .nav-schalter { display: block; margin-left: auto; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--linie);
    padding: .8rem 0 1.3rem; margin: 0;
  }
  .hauptnav[data-offen="ja"] { display: block; }
  .hauptnav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .hauptnav a { padding: .7rem .5rem; border-bottom: 1px solid var(--linie-zart); border-radius: 0; }
  .nav-trenner { display: none; }
}

.fuss { border-top: 1px solid var(--linie); background: var(--paper-2); padding-block: 3.5rem 2.5rem; margin-top: var(--takt); }
.fuss__raster { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .fuss__raster { grid-template-columns: 1fr; gap: 2rem; } }
.fuss h2 { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss a { color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: var(--ink); text-decoration: underline; }
.fuss__satz { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-2); max-width: 34rem; margin: 0 0 1rem; }
.fuss__zeile { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-zart); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; font-size: .85rem; color: var(--ink-3); }

/* --- 5. Hero ------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
.hero__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 62rem) { .hero__innen { grid-template-columns: 1fr; } .hero__bild { max-width: 26rem; } }

.hero__auge {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1.4rem;
}
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin-bottom: .5em; }
.hero__lead { font-size: clamp(1.1rem, 1.9vw, 1.28rem); line-height: 1.62; color: var(--ink-2); max-width: 34rem; }
.hero__dreiklang { margin: 2rem 0 2.4rem; padding-left: 1.15rem; border-left: 2px solid var(--signal); font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: var(--ink-3); }
.hero__dreiklang span { display: block; }
.hero__dreiklang span:last-child { color: var(--ink); }

/* --- 6. Aussagen, Zitate, Kontraste -------------------------------------- */

.aussage {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.62rem); line-height: 1.42;
  color: var(--ink); border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem 1.4rem; margin: 2.2rem 0; max-width: var(--mass-weit);
}
.aussage p:last-child { margin-bottom: 0; }
.aussage--gross { font-size: clamp(1.5rem, 3.4vw, 2.15rem); border-left-width: 3px; }

blockquote {
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.5;
  border-left: 2px solid var(--accent); padding-left: 1.4rem; margin: 1.9rem 0; color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

/* Gegenüberstellung "Nicht X. Sondern Y." – das sprachliche Muster aus
   Kapitel 21 bekommt eine eigene visuelle Form. */
.wende { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin: 2rem 0; max-width: var(--mass-weit); }
@media (max-width: 40rem) { .wende { grid-template-columns: 1fr; } }
.wende > div { background: var(--paper); padding: 1.5rem 1.6rem; }
.wende__label { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.wende__nicht { color: var(--ink-3); }
.wende__nicht p { font-family: var(--serif); font-size: 1.08rem; margin: 0; }
.wende__sondern { background: var(--paper-2); }
.wende__sondern p { font-family: var(--serif); font-size: 1.14rem; margin: 0; color: var(--ink); }
.wende__sondern .wende__label { color: var(--accent); }

/* Das Aha-Prinzip aus Kapitel 32 – eine kleine Perspektivverschiebung,
   bewusst leise gesetzt. */
.aha {
  border: 1px solid var(--linie); border-left: 2px solid var(--signal);
  background: var(--signal-zart); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin: 2.2rem 0; max-width: var(--mass-weit);
}
.aha__label { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--signal); margin: 0 0 .55rem; }
.aha p { font-family: var(--serif); font-size: 1.13rem; line-height: 1.5; margin: 0; }

/* --- 7. Karten und Raster ------------------------------------------------ */

.raster { display: grid; gap: 1.15rem; margin: 2rem 0; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }

.karte {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--paper); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.5rem 1.55rem; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
a.karte:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--paper-2); }
.karte__nummer { font-family: var(--serif); font-size: .95rem; color: var(--ink-3); }
.karte h3 { font-size: 1.14rem; margin: 0; line-height: 1.28; }
.karte p { font-size: .96rem; color: var(--ink-2); margin: 0; }
.karte__mehr { margin-top: auto; padding-top: .6rem; font-size: .9rem; color: var(--accent); font-weight: 540; }
a.karte:hover .karte__mehr { color: var(--ink); }

.karte--ton { background: var(--paper-2); }
.abschnitt--getoent .karte { background: var(--paper); }

/* Typ-Kennzeichnung CORE / PERSPECTIVE / APPLICATION (Kapitel 13) */
.typ {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--linie); border-radius: 100px; padding: .2rem .65rem;
}
.typ::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.typ--heuristik { color: var(--accent); }
.typ--raum { color: var(--signal); }
.typ--application { color: var(--ink-2); }

/* Schlüsselbegriffe: nicht klickbare Stichwörter, optisch verwandt mit
   .weiter, aber ohne Link-Semantik. */
.stichworte__label { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 2.4rem 0 .8rem; }
.stichworte { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.8rem; }
.stichworte span {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linie); border-radius: 100px; padding: .32rem .85rem;
  font-size: .87rem; color: var(--ink-2); background: var(--paper-2);
}

/* --- 8. Aufzählungen mit Struktur ---------------------------------------- */

.liste-fein { list-style: none; padding: 0; margin: 1.5rem 0; max-width: var(--mass-weit); }
.liste-fein li { padding: .8rem 0 .8rem 1.5rem; border-top: 1px solid var(--linie-zart); position: relative; margin: 0; }
.liste-fein li:last-child { border-bottom: 1px solid var(--linie-zart); }
.liste-fein li::before { content: ""; position: absolute; left: 0; top: 1.42rem; width: .55rem; height: 1px; background: var(--accent); }

.frageliste { list-style: none; padding: 0; margin: 1.6rem 0; max-width: var(--mass-weit); }
.frageliste li { font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; padding: .55rem 0 .55rem 1.6rem; position: relative; }
.frageliste li::before { content: "?"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }

/* --- 9. Übergänge zu anderen Ebenen -------------------------------------- */

.uebergang {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem); margin: 2.2rem 0; background: var(--paper);
  transition: border-color .18s ease, background .18s ease;
}
.uebergang:hover { border-color: var(--accent); background: var(--paper-2); }
.uebergang__auge { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .8rem; }
.uebergang h2, .uebergang h3 { margin: 0 0 .6rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.uebergang p { color: var(--ink-2); margin: 0 0 .9rem; max-width: 44rem; }
.uebergang__pfeil { font-weight: 560; color: var(--accent); }
.uebergang:hover .uebergang__pfeil { color: var(--ink); }

.weiter { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0; }
.weiter a {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--linie); border-radius: 100px; padding: .4rem .95rem;
  font-size: .92rem; text-decoration: none; color: var(--ink-2); background: var(--paper);
}
.weiter a:hover { border-color: var(--accent); color: var(--ink); }

/* --- 10. Seitenkopf für Unterseiten -------------------------------------- */

.seitenkopf { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.seitenkopf .typ { margin-bottom: 1.1rem; }
.seitenkopf h1 { margin-bottom: .45em; }
.seitenkopf__lead { font-size: clamp(1.08rem, 1.8vw, 1.22rem); line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.brotkrumen { font-size: .87rem; color: var(--ink-3); margin: 0 0 1.2rem; }
.brotkrumen a { color: var(--ink-3); text-decoration: none; }
.brotkrumen a:hover { color: var(--ink); text-decoration: underline; }

/* Raum-Wechsler: Orientierung innerhalb der sechs Perspektivräume – bewusst
   als Nebeneinander gestaltet, nicht als Vorher/Nachher (siehe Landschaft:
   "keine feste Reihenfolge"). */
.raumwechsler { margin: 1.6rem 0 0; }
.raumwechsler__label { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.raumwechsler__liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.raumwechsler__liste a {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--linie); border-radius: 100px; padding: .4rem .95rem;
  font-size: .9rem; text-decoration: none; color: var(--ink-2); background: var(--paper);
}
.raumwechsler__liste a:hover { border-color: var(--accent); color: var(--ink); }
.raumwechsler__liste a[aria-current="page"] { background: var(--accent-zart); border-color: var(--accent); color: var(--ink); font-weight: 560; }

/* --- 11. Fließtext einer Inhaltsseite ------------------------------------ */

.fliesstext { max-width: var(--mass-text); }
.fliesstext > .aussage,
.fliesstext > .aha,
.fliesstext > .wende,
.fliesstext > blockquote,
.fliesstext > .liste-fein,
.fliesstext > .frageliste { max-width: none; }
.fliesstext h2 { padding-top: 1.6rem; border-top: 1px solid var(--linie-zart); }
.fliesstext h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* --- 12. Diagramm der drei Ebenen ---------------------------------------- */

.ebenen { margin: 2.5rem 0; }
/* Auf schmalen Bildschirmen lieber seitlich scrollen als die Beschriftung
   unleserlich klein werden lassen. */
.ebenen__bild { overflow-x: auto; padding-bottom: .4rem; }
.ebenen svg { width: 100%; min-width: 33rem; height: auto; max-width: 46rem; display: block; }
.ebenen__linie { stroke: var(--linie); stroke-width: 1.25; fill: none; }
.ebenen__pfeil { fill: var(--ink-3); }
.ebenen__kasten { fill: var(--paper); stroke: var(--linie); stroke-width: 1.25; }
.ebenen__kasten--kern { fill: var(--accent-zart); stroke: var(--accent); }
.ebenen__titel { font-family: var(--serif); font-size: 15px; fill: var(--ink); }
.ebenen__unter { font-family: var(--sans); font-size: 11.5px; fill: var(--ink-3); }
.ebenen figcaption { font-size: .9rem; color: var(--ink-3); margin-top: 1rem; max-width: 42rem; line-height: 1.6; }

/* --- 12b. Landschaftsdiagramm der sechs Räume ---------------------------- */
/* Die Metapher "Landschaft" bleibt als Bild erhalten, auch wenn der Bereich
   in der Navigation "Räume" heißt. */

.landschaft__bild { overflow-x: auto; padding-bottom: .4rem; margin: 2.5rem 0 1.5rem; }
.landschaft__bild svg { width: 100%; min-width: 30rem; height: auto; max-width: 40rem; display: block; margin-inline: auto; }
.landschaft__ring { fill: none; stroke: var(--linie); stroke-width: 1.25; stroke-dasharray: 3 7; }
.landschaft__nabe { fill: var(--paper-2); stroke: var(--linie); stroke-width: 1.25; }
.landschaft__verbindung { stroke: var(--linie); stroke-width: 1.1; fill: none; }
.landschaft__knoten { fill: var(--paper); stroke: var(--accent); stroke-width: 1.4; }
.landschaft__knoten--meta { fill: var(--accent-zart); stroke: var(--accent-stark); stroke-dasharray: 2 4; }
.landschaft__titel { font-family: var(--serif); font-size: 14px; fill: var(--ink); text-anchor: middle; }
.landschaft__titel--meta { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; fill: var(--accent-stark); text-anchor: middle; }
.landschaft__figcaption { font-size: .9rem; color: var(--ink-3); margin: .5rem auto 0; max-width: 34rem; text-align: center; line-height: 1.6; }

/* Übergangsliste unter dem Diagramm */
.uebergangsliste { list-style: none; padding: 0; margin: 2rem 0; max-width: var(--mass-weit); display: grid; gap: .9rem; }
.uebergangsliste li { display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; gap: .3rem 1.2rem; padding: .75rem 0; border-top: 1px solid var(--linie-zart); align-items: baseline; }
.uebergangsliste li:last-child { border-bottom: 1px solid var(--linie-zart); }
.uebergangsliste strong { font-family: var(--serif); font-weight: 600; color: var(--accent-stark); font-size: .97rem; }
.uebergangsliste span { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 34rem) { .uebergangsliste li { grid-template-columns: 1fr; } }

/* --- 12c. Situation im Situationsbereich --------------------------------- */
/* Drei Zeilen je Situation: wo es hakt, warum das Übliche nicht reicht,
   was Collaborative Community beitragen kann. Die letzte Zeile ist die
   Antwort und wird deshalb leicht abgesetzt. */

.fall { margin: 1.6rem 0 2.4rem; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.fall > div { display: grid; grid-template-columns: minmax(9rem, 12rem) 1fr; gap: .3rem 1.3rem; padding: 1rem 1.35rem; background: var(--paper); border-top: 1px solid var(--linie-zart); align-items: baseline; }
.fall > div:first-child { border-top: 0; }
.fall > div:last-child { background: var(--paper-2); }
.fall dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); line-height: 1.45; }
.fall > div:last-child dt { color: var(--accent); }
.fall dd { margin: 0; font-size: .98rem; color: var(--ink-2); }
.fall > div:last-child dd { color: var(--ink); }
@media (max-width: 40rem) { .fall > div { grid-template-columns: 1fr; } }

/* --- 12d. Einstiegstür einer Anwendungsseite ----------------------------- */

.tuer {
  margin: 0 0 2.6rem; padding: 1.3rem 1.5rem;
  border: 1px solid var(--linie); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--paper-2);
}
.tuer__label { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 .55rem; }
.tuer__frage { font-family: var(--serif); font-size: 1.22rem; line-height: 1.45; color: var(--ink); margin: 0 0 .9rem; }
.tuer__dahinter { font-size: .95rem; color: var(--ink-2); margin: 0; }
.tuer__dahinter strong { color: var(--ink); font-weight: 600; }

/* --- 13. Redaktionelle Notizen (nur im Entwurfsmodus) -------------------- */

.notiz {
  border: 1px dashed var(--signal); border-radius: var(--radius);
  background: var(--signal-zart); padding: 1.15rem 1.35rem; margin: 1.9rem 0;
  font-size: .945rem; max-width: var(--mass-weit);
}
.notiz__kopf { display: flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); margin-bottom: .55rem; }
.notiz p:last-child { margin-bottom: 0; }
.notiz strong { color: var(--ink); }
.notiz__quelle { font-size: .85rem; color: var(--ink-3); margin-top: .5rem; }

.entwurfsband {
  background: var(--signal); color: #fff; text-align: center;
  font-size: .82rem; padding: .4rem 1rem; letter-spacing: .02em;
}
.entwurfsband a { color: #fff; text-underline-offset: .2em; }

.tabelle-offen, .tabelle { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .95rem; }
.tabelle-offen th, .tabelle-offen td, .tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: .85rem .9rem; border-bottom: 1px solid var(--linie-zart); }
.tabelle-offen th, .tabelle th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; border-bottom-color: var(--linie); }
.tabellen-huelle { overflow-x: auto; }

/* Zurückhaltender Hintergrundgedanke zum Aufklappen – für Inhalte, die
   Kontext bieten, aber nicht die Hauptaussage einer Seite tragen sollen. */
.hintergrund {
  border: 1px solid var(--linie); border-radius: var(--radius);
  margin: 2.2rem 0; max-width: var(--mass-weit); background: var(--paper-2);
}
.hintergrund summary {
  cursor: pointer; list-style: none; padding: 1rem 1.4rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: .6rem;
}
.hintergrund summary::-webkit-details-marker { display: none; }
.hintergrund summary::before { content: "+"; font-family: var(--serif); font-size: 1.1rem; line-height: 1; color: var(--accent); }
.hintergrund[open] summary::before { content: "–"; }
.hintergrund__inhalt { padding: 0 1.4rem 1.5rem; }
.hintergrund__inhalt p:first-child { margin-top: 0; }
.hintergrund__inhalt p { font-size: .97rem; }

/* --- 14. Kleinteile ------------------------------------------------------ */

.themenschalter {
  background: none; border: 1px solid var(--linie); border-radius: 8px;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); flex: none; font-size: .95rem; line-height: 1;
}
.themenschalter:hover { border-color: var(--accent); color: var(--ink); }

.klein { font-size: .92rem; color: var(--ink-3); }