/* Docs: dieselben Farben, Schrift und Haarlinien wie die Startseite (index.html). Drei Spalten:
   links die Seiten des Werkzeugs, in der Mitte der Text mit lesbarer Zeilenlänge, rechts, was auf
   der Seite steht. Code ist in beiden Modi dunkel, damit Befehle immer gleich aussehen. Farbe trägt
   Bedeutung: Grün veröffentlicht, Bernstein Vorabversion; Hinweiskästen haben je ihre Farbe, das
   Wort steht immer dabei. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../schrift/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../schrift/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --text: #16161A; --linie: #DEDCD6; --linie-fest: #BDBAB2; --linie-leise: #EFEEEA;
  --grund: #F3F2EE; --flaeche: #FFFFFF; --band: #F6F5F1; --hauch: rgba(22, 22, 26, .06);
  --schiefer: #4D4C4A; --leise: #686764; --gut: #1A7F37; --bernstein: #8A5300;
  --glas: rgba(243, 242, 238, .78); --glas-kante: rgba(22, 22, 26, .08);
  --code-grund: #1B1B20; --code-kopf: #26262C; --code-kante: #1B1B20; --code-text: #E6E6EA; --code-leise: #8E8E98;
  --code-hell: #EAE9E4; --markierung: #FFF1A8; --diagramm: #FFFFFF;
  --schatten: 0 1px 2px rgba(22, 22, 26, .04), 0 6px 20px rgba(22, 22, 26, .05);
  --schatten-hoch: 0 2px 6px rgba(22, 22, 26, .06), 0 18px 48px rgba(22, 22, 26, .16);
  --blau: #1F5FAD; --blau-grund: #EEF4FB; --blau-kante: #C8DAF0;
  --gruen: #1A7F37; --gruen-grund: #EDF7EF; --gruen-kante: #C3E3CB;
  --violett: #6941C6; --violett-grund: #F3EFFC; --violett-kante: #D8CCF5;
  --gelb: #9A5B00; --gelb-grund: #FFF7E6; --gelb-kante: #F1D9A6;
  --rot: #B42318; --rot-grund: #FDEFED; --rot-kante: #F3C7C1;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, Menlo, "DejaVu Sans Mono", monospace;
  --kopf: 60px;
  /* Seitenrand wie auf der Startseite: wächst von 20 auf 40 px. Kopfleiste und Raster nehmen ihn
     beide, damit Logo, Seitenleiste und Text auf einer Linie stehen. */
  --rand: clamp(20px, 4vw, 40px);
}
/* Dunkel, wenn das Skript im Kopf es sagt: gespeicherte Wahl oder System (data-theme an <html>) */
:root { color-scheme: light; --seite: #EAE9E4; }
:root[data-theme="dunkel"] {
  color-scheme: dark; --seite: #0B0B0D;
    --text: #ECEBE7; --linie: #2E2E34; --linie-fest: #4B4B53; --linie-leise: #232328;
    --grund: #111114; --flaeche: #1B1B1F; --band: #1F1F24; --hauch: rgba(255, 255, 255, .07);
    --schiefer: #A3A29B; --leise: #8A8984; --gut: #4CB86B; --bernstein: #D8AE5E;
    --glas: rgba(17, 17, 20, .78); --glas-kante: rgba(255, 255, 255, .08);
    --code-grund: #18181C; --code-kopf: #202025; --code-kante: #2E2E34; --code-text: #E6E6EA; --code-leise: #8E8E98;
    --code-hell: #26262C; --markierung: #5A4A10; --diagramm: #F3F2EE;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .55);
    --blau: #7FA4EE; --blau-grund: #151D2B; --blau-kante: #26385A;
    --gruen: #4CB86B; --gruen-grund: #13241A; --gruen-kante: #2C5A3A;
    --violett: #B796EA; --violett-grund: #1E1830; --violett-kante: #3F3160;
    --gelb: #D8AE5E; --gelb-grund: #262012; --gelb-kante: #5A4520;
    --rot: #F07A70; --rot-grund: #2C1617; --rot-kante: #6A2C28;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--kopf) + 24px); }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sz { display: block; fill: currentColor; }
kbd {
  display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--linie); border-radius: 6px;
  background: var(--flaeche); font: 500 11.5px/1.7 var(--sans); color: var(--schiefer); text-align: center;
}
.springen { position: absolute; left: var(--rand); top: -48px; z-index: 50; padding: 8px 14px; border-radius: 999px; background: var(--text); color: var(--flaeche); }
.springen:focus { top: 10px; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20; height: var(--kopf);
  background: var(--glas); border-bottom: 1px solid var(--glas-kante);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
/* Gleiche Breite und gleicher Rand wie .raster darunter */
.kopf-innen { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 var(--rand); display: flex; align-items: center; gap: 4px; }
.kopf a { text-decoration: none; }
.marke { padding: 8px 10px 8px 0; }
.marke .sz { width: 30px; height: auto; }
.docs-name { font-weight: 600; font-size: 16px; padding: 9px 14px 9px 4px; margin-right: 6px; line-height: 1.2; }
.suchknopf {
  margin-left: auto; width: 290px; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 7px 0 14px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--leise); cursor: pointer;
  font-size: 14.5px; text-align: left; transition: border-color .15s;
}
.suchknopf:hover { border-color: var(--linie-fest); }
.suchknopf span { flex: 1; }
.themaknopf {
  display: grid; place-items: center; width: 38px; height: 38px; margin-left: 8px; padding: 0; flex: none;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--schiefer); cursor: pointer; transition: border-color .15s;
}
.themaknopf:hover { border-color: var(--linie-fest); color: var(--text); }
.themaknopf .i { width: 17px; height: 17px; }
.themaknopf span { display: grid; }
:root[data-theme="dunkel"] .themaknopf .mond, :root:not([data-theme="dunkel"]) .themaknopf .sonne { display: none; }
.menueknopf { display: none; }

/* ---------- Raster ---------- */
.raster { max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: 264px minmax(0, 1fr) 224px; gap: 56px; }
.seiten, .toc {
  position: sticky; top: var(--kopf); height: calc(100vh - var(--kopf)); overflow-y: auto; scrollbar-width: thin;
  padding: 40px 0 48px; overscroll-behavior: contain;
}
/* Die Einträge haben 12 px Innenabstand für die Fläche beim Zeigen; die Leiste ragt dafür 12 px in den
   Rand, damit der Text trotzdem auf der Linie von Logo und Kopf steht. Links überstehende Kinder
   würde die scrollende Leiste abschneiden, deshalb der Innenabstand an ihr selbst. */
.seiten { margin-left: -12px; padding-left: 12px; }
/* Die Seitenleiste scrollt ohne sichtbaren Balken; unten blendet sie über den Innenabstand weich aus,
   damit man sieht, dass noch mehr kommt, und der letzte Eintrag am Ende trotzdem voll dasteht. */
.seiten {
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
.haupt { min-width: 0; max-width: 780px; width: 100%; justify-self: center; padding: 40px 0 88px; }
/* Seitenleiste und Inhaltsverzeichnis auf einem etwas dunkleren Ton, über die ganze Höhe und bis an den
   Fensterrand, mit einer Haarlinie zum Text. Die Kanten liegen mitten in den Lücken des Rasters (56 px):
   Rasterrand + Rand + Spalte + 28 px. */
body.mit-leiste {
  --l: calc(max(0px, (100% - 1440px) / 2) + var(--rand) + 264px + 28px);
  --r: calc(100% - max(0px, (100% - 1440px) / 2) - var(--rand) - 224px - 28px);
  background: linear-gradient(90deg, var(--seite) var(--l), var(--linie) var(--l), var(--linie) calc(var(--l) + 1px), var(--grund) calc(var(--l) + 1px),
    var(--grund) calc(var(--r) - 1px), var(--linie) calc(var(--r) - 1px), var(--linie) var(--r), var(--seite) var(--r)) fixed;
}

/* ---------- Seitenleiste ---------- */
.werkzeug { padding: 0 0 20px; border-bottom: 1px solid var(--linie); margin-bottom: 14px; }
.werkzeug-name { font-weight: 600; font-size: 22px; letter-spacing: -.02em; text-decoration: none; margin-right: 8px; }
.werkzeug p { margin: 8px 0 0; font-size: 14px; color: var(--schiefer); line-height: 1.5; }
.werkzeug .werkzeug-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.werkzeug-links a { white-space: nowrap; }
.werkzeug-links a, .anderes a { font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); }
.werkzeug-links a:hover, .anderes a:hover { border-color: currentColor; }
.stand { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; vertical-align: 3px; white-space: nowrap; }
.stand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stand.gut { color: var(--gut); }
.stand.vorab { color: var(--bernstein); }
.seiten ul { list-style: none; margin: 0 0 6px; padding: 0; }
.seiten li a { display: block; margin-left: -12px; padding: 6px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.4; color: var(--schiefer); text-decoration: none; }
.seiten li a:hover { color: var(--text); background: var(--hauch); }
.seiten li a[aria-current] { color: var(--text); background: var(--flaeche); font-weight: 500; box-shadow: var(--schatten); }
.gruppe { margin: 22px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.seiten li.unter { padding: 10px 0 2px; font-size: 12.5px; color: var(--leise); }
/* Abschnitte der offenen Seite (setzt docs.js ein), nur ohne Inhaltsverzeichnis rechts sichtbar.
   Gleiche Haarlinie wie rechts; die Linie steht auf der Textkante der Seiteneinträge. */
.seiten .abschnitte { display: none; list-style: none; margin: 2px 0 8px; padding: 0; border-left: 1px solid var(--linie); }
.seiten .abschnitte a { margin-left: -1px; padding: 4px 0 4px 14px; border-left: 1px solid transparent; border-radius: 0; font-size: 13.5px; }
.seiten .abschnitte .stufe-3 a { padding-left: 26px; font-size: 13px; }
.seiten .abschnitte a:hover { background: none; }
.seiten .abschnitte a.aktiv { color: var(--text); border-left-color: var(--text); }
.anderes { margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--leise); }
.anderes a { margin-left: 6px; }

/* ---------- Kopf des Textes ---------- */
.pfad { margin: 0; font-size: 13.5px; color: var(--leise); }
/* Größere Tippfläche ohne Folgen fürs Layout: Innenabstand und gleich großer negativer Außenabstand,
   das gilt auch in der Meta-Zeile, die ein Flex-Container ist */
.pfad a, .meta a, .fuss a { padding: 10px 0; margin: -10px 0; }
.pfad a { color: var(--schiefer); text-decoration: none; }
.pfad a:hover { color: var(--text); }
.pfad span { margin: 0 8px; }
h1 { margin: 12px 0 0; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.04; font-weight: 600; letter-spacing: -.035em; }
.unterzeile { margin: 16px 0 0; font-size: 20px; line-height: 1.42; letter-spacing: -.01em; color: var(--schiefer); max-width: 40ch; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 18px 0 0; font-size: 13.5px; color: var(--leise); }
.meta a { color: var(--schiefer); text-decoration: underline; text-decoration-color: var(--linie-fest); text-underline-offset: 4px; }
.meta a:hover { color: var(--text); }
.fakten { margin: 28px 0 0; border-top: 1px solid var(--linie); }
.fakten div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14.5px; }
.fakten dt { font-weight: 500; }
.fakten dd { margin: 0; color: var(--schiefer); }
.herkunft { margin: 24px 0 0; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--band); font-size: 14px; color: var(--schiefer); }

/* ---------- Text ---------- */
.text { margin-top: 40px; font-size: 16.5px; line-height: 1.72; overflow-wrap: break-word; }
.text p { margin: 0 0 1.1em; }
.text h2 { margin: 1.9em 0 .7em; padding-top: 1em; border-top: 1px solid var(--linie); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; }
.text > h2:first-child { margin-top: 0; }
.text h3 { margin: 1.9em 0 .5em; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em; }
.text h4 { margin: 1.6em 0 .4em; font-size: 16.5px; font-weight: 600; }
.anker { margin-left: .35em; color: var(--leise); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity .15s; }
:is(h2, h3, h4):hover .anker, .anker:focus-visible { opacity: 1; }
.text a { text-decoration: underline; text-decoration-color: var(--linie-fest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text a:hover { text-decoration-color: currentColor; }
.text a[href^="http"]:not(:has(img), .knopf)::after { content: "↗"; margin-left: 1px; font-size: .78em; color: var(--leise); }

/* Überschriften, die selbst Verweise sind (Versionen im CHANGELOG), sehen aus wie Überschriften */
.text :is(h2, h3, h4) a[href]:not(.anker) { text-decoration: none; }
.text :is(h2, h3, h4) a[href]:not(.anker):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text :is(h2, h3, h4) a[href]:not(.anker)::after { content: none; }

/* Aufrufe aus den READMEs als Knöpfe, wie auf der Startseite; der Rest der Zeile klein daneben */
.text .aktionen { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 1.6em 0 1.8em; }
.text .aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 300px; }
.text .aktion span { font-size: 13.5px; line-height: 1.45; color: var(--schiefer); }
:is(.text, .uebersicht) .knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche); font-size: 15px; font-weight: 500; white-space: nowrap;
  text-decoration: none; transition: border-color .15s, background .15s;
}
:is(.text, .uebersicht) .knopf:hover { border-color: var(--linie-fest); }
:is(.text, .uebersicht) .knopf.voll { background: var(--text); border-color: var(--text); color: var(--grund); }
:is(.text, .uebersicht) .knopf.voll:hover { opacity: .88; }
:is(.text, .uebersicht) .knopf svg { width: 16px; height: 16px; }
.text strong { font-weight: 600; }
.text :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.4em; }
.text li { margin: .3em 0; }
.text li > p { margin: 0 0 .5em; }
.text li::marker { color: var(--leise); }
.text :not(pre) > code { font: .86em var(--mono); background: var(--code-hell); padding: .14em .4em; border-radius: 5px; }
.text hr { border: 0; border-top: 1px solid var(--linie); margin: 2.4em 0; }
.text blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--linie); color: var(--schiefer); }
.text img { display: block; max-width: 100%; height: auto; margin: 1.4em 0; border: 1px solid var(--linie); border-radius: 10px; }
.text p > img:only-child { margin: 0; }
.text details { margin: 1.2em 0; padding: 10px 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.text summary { cursor: pointer; font-weight: 500; }

.code { margin: 1.4em 0; border: 1px solid var(--code-kante); border-radius: 12px; overflow: hidden; background: var(--code-grund); color: var(--code-text); }
.code-kopf { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 4px 6px 4px 16px; background: var(--code-kopf); font-size: 12px; letter-spacing: .03em; color: var(--code-leise); }
.code pre { margin: 0; padding: 14px 18px 16px; overflow-x: auto; font: 13.5px/1.65 var(--mono); tab-size: 2; }
.code .kommentar { color: var(--code-leise); }
.kopieren {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 6px; background: transparent; color: var(--code-leise);
  font-size: 12px; padding: 2px 10px; cursor: pointer;
}
.kopieren:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); }

.tabelle { margin: 1.4em 0; overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.tabelle th { text-align: left; padding: 10px 14px; background: var(--band); border-bottom: 1px solid var(--linie); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--schiefer); }
.tabelle td { padding: 10px 14px; border-top: 1px solid var(--linie-leise); vertical-align: top; }
.tabelle tr:first-child td { border-top: 0; }

.hinweis {
  --farbe: var(--blau); --grundton: var(--blau-grund); --kante: var(--blau-kante);
  margin: 1.5em 0; padding: 13px 18px 3px; border: 1px solid var(--kante); border-left: 4px solid var(--farbe);
  border-radius: 10px; background: var(--grundton); font-size: 15.5px;
}
.hinweis.gruen { --farbe: var(--gruen); --grundton: var(--gruen-grund); --kante: var(--gruen-kante); }
.hinweis.violett { --farbe: var(--violett); --grundton: var(--violett-grund); --kante: var(--violett-kante); }
.hinweis.bernstein { --farbe: var(--gelb); --grundton: var(--gelb-grund); --kante: var(--gelb-kante); }
.hinweis.rot { --farbe: var(--rot); --grundton: var(--rot-grund); --kante: var(--rot-kante); }
.text .hinweis-titel { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--farbe); }
.hinweis p { margin: 0 0 .7em; }

/* Diagramme sind helle SVGs aus den Repos; auf eigener heller Fläche bleiben sie im dunklen Modus lesbar */
.diagramm { margin: 1.6em 0; padding: 24px; background: var(--diagramm); border: 1px solid var(--linie); border-radius: 12px; }
.text .diagramm img { width: 100%; margin: 0; border: 0; border-radius: 0; }

/* ---------- Blättern und Fuß ---------- */
.blaettern { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; margin-top: 72px; }
.blaettern a {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); text-decoration: none; font-weight: 500; transition: border-color .15s;
}
.blaettern a:hover { border-color: var(--linie-fest); }
.blaettern small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 400; color: var(--leise); }
.blaettern small svg { width: 14px; height: 14px; }
.blaettern .weiter { grid-column: 2; align-items: flex-end; text-align: right; }
.fuss { margin: 28px 0 0; font-size: 13.5px; color: var(--leise); }
.fuss a { color: var(--schiefer); }

/* ---------- Inhaltsverzeichnis rechts ---------- */
.toc p { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linie); }
.toc a {
  display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 1px solid transparent;
  font-size: 13.5px; line-height: 1.4; color: var(--schiefer); text-decoration: none;
}
.toc .stufe-3 a { padding-left: 26px; font-size: 13px; }
.toc a:hover { color: var(--text); }
.toc a.aktiv { color: var(--text); border-left-color: var(--text); }

/* ---------- Übersicht unter docs/ ----------
   Oben Titel und Satz; gesucht wird über die Kopfleiste. Darunter je Projekt eine Karte; alle gleich groß, und Bild, Kopf, Satz,
   Umfang und Knöpfe stehen in allen auf derselben Linie (Subgrid). Darunter alle Seiten. */
.uebersicht .raster { grid-template-columns: minmax(0, 1fr); }
.uebersicht .haupt { max-width: 1120px; justify-self: center; padding-top: 72px; }
.uebersicht h1 { margin-top: 18px; font-size: clamp(56px, 7vw, 88px); line-height: .92; letter-spacing: -.05em; }
.uebersicht .unterzeile { max-width: 42ch; }
.uebersicht .karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); grid-auto-rows: auto auto auto auto auto;
  column-gap: 24px; margin: 64px 0 -24px;
}
.karte {
  display: grid; grid-row: span 5; grid-template-rows: subgrid; margin-bottom: 24px; padding-bottom: 28px;
  border: 1px solid var(--linie); border-radius: 20px; background: var(--flaeche); overflow: hidden;
}
.karte-bild { display: block; aspect-ratio: 16 / 9; padding: 28px 28px 0; background: var(--band); overflow: hidden; }
.karte-bild img { display: block; width: 100%; height: auto; border-radius: 8px 8px 0 0; box-shadow: var(--schatten-hoch); transition: transform .3s ease; }
.karte-bild:hover img { transform: translateY(-4px); }
.karte-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 24px 28px 0; }
.karte h2 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.karte h2 a { text-decoration: none; }
.karte .satz { margin: 10px 0 0; padding: 0 28px; font-size: 16.5px; line-height: 1.5; color: var(--schiefer); }
.karte .umfang { margin: 14px 0 0; padding: 0 28px; font-size: 13.5px; color: var(--leise); }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 28px 0; }
.uebersicht .abschnitt { margin: 104px 0 0; text-align: center; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
/* Alle Seiten als Vergleich: dieselben Spalten wie die Karten, jede Zeile gleich hoch und mittig, so liegen
   gleichnamige Seiten nebeneinander. Der Projektname über der Spalte steht nur da, wenn die Spalten
   untereinander rutschen (dann fehlt die Karte darüber als Bezug). */
.vergleich { margin-top: 16px; }
.vergleich-gruppe { margin-top: 40px; }
.vergleich-gruppe .gruppe { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.vergleich-gruppe .gruppe::before, .vergleich-gruppe .gruppe::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.vergleich-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 24px; row-gap: 24px; }
.vergleich-spalten ul { list-style: none; margin: 0; padding: 0; }
.vergleich-spalten li { display: flex; align-items: center; justify-content: center; height: 40px; }
.vergleich-spalten a { padding: 9px 0; font-size: 15.5px; text-decoration: none; border-bottom: 1px solid transparent; }
.vergleich-spalten a:hover { border-color: currentColor; }
.vergleich-spalten .leer { color: var(--leise); }
.spalten-name { display: none; margin: 0 0 4px; text-align: center; font-size: 13px; font-weight: 600; color: var(--schiefer); }
/* Eine Gruppe, die nur ein Projekt hat (das Fundus-Handbuch), läuft über die volle Breite, in gleich breiten
   Spalten nach der Anzahl (16 = 4 × 4, --sp schreibt der Bau); am Handy zwei. Der Projektname steht darüber. */
.vergleich-voll .spalten-name { display: block; margin-bottom: 8px; }
.vergleich-voll ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--sp), minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: 24px; }
/* Alle Zeilen so hoch wie die höchste (1fr): Bricht ein langer Titel um, bleiben die Zeilen trotzdem gleich */
.vergleich-voll li { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; line-height: 1.35; }
.vergleich-voll a { padding: 9px 0; font-size: 15.5px; text-decoration: none; border-bottom: 1px solid transparent; }
.vergleich-voll a:hover { border-color: currentColor; }
@media (max-width: 700px) { .vergleich-voll ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 943px) { .spalten-name { display: block; } }

/* ---------- Suche: Glas wie die Schnellsuche in Fundus ---------- */
dialog.suche {
  width: min(680px, calc(100% - 32px)); max-height: min(600px, calc(100% - 96px)); margin: 11vh auto 0; padding: 0;
  border: 1px solid var(--glas-kante); border-radius: 16px; overflow: hidden; color: var(--text);
  background: var(--glas); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--schatten-hoch);
}
dialog.suche[open] { display: flex; flex-direction: column; }
dialog.suche::backdrop { background: rgba(22, 22, 26, .25); backdrop-filter: blur(3px); }
.suche-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linie); }
.suche-kopf svg { color: var(--schiefer); }
.suche-kopf input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 17px var(--sans); color: var(--text); }
.suche-kopf input::-webkit-search-cancel-button { display: none; }
.suche-kopf input::placeholder { color: var(--leise); }
.treffer { position: relative; list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.treffer a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; }
.treffer a.gewaehlt { background: var(--flaeche); box-shadow: var(--schatten); }
.treffer small { display: block; font-size: 12px; color: var(--leise); }
.treffer b { display: block; font-weight: 500; line-height: 1.35; margin-top: 1px; }
.treffer span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--schiefer); margin-top: 3px; }
.treffer mark { background: var(--markierung); color: inherit; border-radius: 3px; padding: 0 1px; }
.treffer .leer { padding: 28px 12px; text-align: center; color: var(--schiefer); }
.suche-fuss { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--schiefer); }
.suche-fuss span { display: flex; align-items: center; gap: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Schmaler ---------- */
@media (max-width: 1180px) {
  .raster { grid-template-columns: 248px minmax(0, 1fr); gap: 48px; }
  .toc { display: none; }
  .seiten .abschnitte { display: block; }
  body.mit-leiste {
    --l: calc(var(--rand) + 248px + 24px);
    background: linear-gradient(90deg, var(--seite) var(--l), var(--linie) var(--l), var(--linie) calc(var(--l) + 1px), var(--grund) calc(var(--l) + 1px)) fixed;
  }
}
/* Unter 900px wird die Seitenleiste zur Schublade, die der Knopf „Seiten“ öffnet */
@media (max-width: 900px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  body.mit-leiste { background: var(--grund); }
  /* Ohne Seitenleiste steht der Text am Rand, auf einer Linie mit dem Logo */
  .haupt { justify-self: start; }
  .menueknopf {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; margin-left: 6px;
    border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); cursor: pointer; font-size: 14px;
  }
  .seiten {
    position: fixed; top: var(--kopf); left: 0; bottom: 0; z-index: 30; height: auto; width: min(330px, 88vw);
    margin-left: 0; padding: 24px var(--rand) 40px; background: var(--grund); border-right: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility .22s;
    -webkit-mask-image: none; mask-image: none;
  }
  .menue-offen .seiten { transform: none; visibility: visible; }
  .menue-offen::after { content: ""; position: fixed; inset: var(--kopf) 0 0; z-index: 25; background: rgba(22, 22, 26, .25); }
  .haupt { padding: 28px 0 64px; }
}
@media (max-width: 640px) {
  .suchknopf { width: 38px; padding: 0; justify-content: center; }
  .suchknopf span, .suchknopf kbd, .suche-fuss { display: none; }
  h1 { font-size: 34px; }
  .uebersicht h1 { font-size: 64px; }
  .uebersicht .haupt { padding-top: 40px; }
  .unterzeile { font-size: 18px; }
  /* Bricht die Meta-Zeile um, hinge ein „·“ allein am Zeilenende; hier trennt der Abstand */
  .meta { gap: 4px 16px; }
  .meta > .trenner { display: none; }
  .text { font-size: 16px; margin-top: 32px; }
  .text h2 { font-size: 24px; }
  .text h3 { font-size: 18.5px; }
  .code pre { font-size: 13px; padding: 12px 14px 14px; }
  .fakten div { grid-template-columns: 1fr; gap: 0; }
  .blaettern { grid-template-columns: 1fr; margin-top: 56px; }
  .blaettern .weiter { grid-column: auto; }
  dialog.suche { margin-top: 12px; max-height: calc(100% - 24px); }
}