/* ============================================================
   AIFIM — Stylesheet der ganzen Website
   (Der Dateiname stammt aus der Zeit des Atlas, der als
   Navigationsform entfallen ist. Sicherung: sicherung/atlas/)
   Acht statische Seiten, alle ohne JavaScript lesbar.

   Grundsatz: Zeichen, die nur der Optik dienen, stehen hier —
   nicht im Text. Alles Bedeutungstragende steht als Wort im HTML.

   Verfeinerung 26. Juli 2026:
   - Die Ebenenachse liegt senkrecht. Die Ebenen sind eine
     senkrechte Ordnung; waagrechte Reiter behaupten das
     Gegenteil.
   - Im Feld steht nur der Name. Der Kurztext stand doppelt da
     (Feld und Liste) und musste im Feld auf zwei Zeilen
     beschnitten werden. Eine Karte traegt Namen, keine
     Beschreibungen — der Text steht in der Liste.
   - Ein Grundton statt zwei. Das Feld ist keine Karte auf der
     Seite, sondern eine gezeichnete Flaeche: eine Haarlinie,
     kein Radius, keine Fuellung.
   ============================================================ */

/* --- Schriften ---------------------------------------------
   Spectral, SIL Open Font License 1.1, selbst gehostet.
   Die Dateien liegen in /schriften. Fehlen sie, greift die
   Systemschrift — die Seite funktioniert trotzdem.
   Quelle: github.com/productiontype/spectral
------------------------------------------------------------ */
@font-face {
  font-family: 'Spectral';
  src: url('../schriften/spectral-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('../schriften/spectral-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('../schriften/spectral-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Fuer die Lesehilfe: Ohne diese Datei rechnet der Browser die
   Fettschrift selbst hoch, und sie ist kaum zu sehen. Der Bereich
   600-700 deckt beide Angaben ab. */
@font-face {
  font-family: 'Spectral';
  src: url('../schriften/spectral-semibold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* --- Apparatschrift ----------------------------------------
   IBM Plex Sans, SIL Open Font License 1.1, selbst gehostet.
   Gewaehlt nach zwei Kriterien: hohe Lesbarkeit in kleinen
   Graden — Labels, Achse, Legende stehen bei 11 bis 17 px —
   und ein technisch-forschender Charakter, der Beschriftung
   sichtbar von Prosa trennt. Zwei Dateien reichen.
   Quelle: github.com/IBM/plex
------------------------------------------------------------ */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../schriften/plexsans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../schriften/plexsans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root{
  /* Farben. Ein Grundton, nicht zwei. Alle Textwerte gegen
     diesen Grund gerechnet — siehe README, Abschnitt Kontrast.
     Der Grund ist heller als vorher; alle Textkontraste
     steigen dadurch. */
  /* Zwei Toene mit klaren Rollen:
     --grund ist die Papierfarbe. Sie liegt hinter Karten, Hoefen und
     Beschriftungen — dort, wo kein Korn hingehoert.
     --papier-basis ist ein Bauwert: der Grund, auf dem die Kornlagen
     liegen. Sie hellen im overlay-Verfahren auf, deshalb ist die Basis
     dunkler als das Ergebnis. Gemessen ergibt die Ueberlagerung im
     Mittel #DFDACB bei einer Spanne von 68 Stufen — die Kontraste
     unten sind gegen #DED7C4 gerechnet, also praktisch derselbe Ton.

     Je heller die Basis, desto weniger muss aufgehellt werden und
     desto ruhiger bleibt die Flaeche: Die hellen und dunklen Flecken
     kommen vom Aufhellen, nicht vom Korn. */
  --grund:        #DED7C4;
  --papier-basis: #C8BFA4;
  /* Derselbe Ton mit Deckung 0. Die Regionen-Lasuren blenden darauf
     aus — stand hier ein anderer Wert, blendeten sie auf ein Papier
     aus, das es nicht gibt, und bekamen einen Rand. */
  --tinte:      #182234;   /* Tintenblau, 11,10:1 */
  --tinte-2:    #394253;   /* 7,04:1 */
  --marke:      #474D60;   /* Kleinschrift, Labels — 5,85:1 */
  /* Zwei Linienrollen. --linie ist Zierde (Trennlinien, Haarlinien im
     Bild) und darf leise sein. --kontur umschliesst Bedienelemente und
     muss deshalb 3:1 erreichen — sonst ist die Grenze einer
     Schaltflaeche fuer manche Augen nicht da. Gerechnete Werte im
     README. */
  --linie:      #BFB8A2;
  --kontur:     #7C7663;   /* 3,16:1 — Ränder von Bedienelementen */
  --linie-zart: #CEC6AF;
  --hervor:     #383C45;   /* 7,69:1 — Hervorhebungen der Lesehilfe */
  --sprachton:  #12657A;   /* 4,80:1 — Türkis der Wolke, Sprachwahl */
  --akzent:     #0F505C;   /* Blaugrün, 7,18:1 */
  --fokus:      #0B4450;   /* dasselbe, tiefer — 8,53:1 */
  /* Enden der Wolkenfarbe: innen der Ton der Seite, aussen blauer.
     Die Punkte dazwischen werden in js/signet.js gemischt. */
  /* Die Vorhabenpunkte: blaue Fuellung, je Vorhaben ein anderer Ring.
     Der Ring unterscheidet die drei voneinander — er sagt nichts ueber
     Rang oder Feld. Alle Werte gegen das Papier gerechnet, alle ueber
     den 3:1, die fuer Grafik gefordert sind. */
  --punkt-blau:  #1C4F86;   /* 6,64:1 */
  --ring-gruen:  #35733A;   /* 4,55:1 — PapoNox */
  --ring-orange: #B4520F;   /* 4,02:1 — Drift Limiter */
  /* Derselbe Ton, dunkel genug fuer Kleinschrift: 4,81:1 gegen die
     Papierbasis. --ring-orange ist Zeichenfarbe auf Beruehrung und
     erreicht als Text nur 2,75:1. */
  --warnton:     #7A370A;
  --ring-blau:   #3877A8;   /* 3,82:1 — Wertekartenanalyse */

  --wolke-innen:  #0F505C;
  --wolke-aussen: #1F6690;

  /* Zwei Schriftrollen. Spectral traegt die Saetze, IBM Plex Sans
     alles Beschriftende: Hauptwege, Titel, Marken, Leiste.
     Im Bild steht dadurch sichtbar Apparat, nicht Prosa.
     Fehlen die Dateien, greifen die Systemschriften. */
  --schrift-lese: 'Spectral', Georgia, 'Times New Roman', serif;
  --schrift-ui:   'IBM Plex Sans', system-ui, 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing: border-box }
html,body{ margin:0 }
body{
  /* Korn wie bei Buettenpapier: eine feine Stoerung im Papier selbst,
     nicht ein Schleier darueber. Deshalb liegt sie als Untergrund am
     body und nicht als Element mit position:fixed — ein Aufsatz laege
     ueber jedem Bedienelement (siehe README, Fehlerklasse).
     Die Stoerung ist SVG-Rauschen, also keine Bilddatei, kein
     zusaetzlicher Ladevorgang. */
  background-color: var(--papier-basis);
  background-image:
    /* Korn — die Rauheit der Oberflaeche */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.7' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.7' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.7' intercept='-0.8'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23k)' opacity='0.56'/%3E%3C/svg%3E"),
    /* Faser — eine schwache Richtung, kein Gewebe */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23k)' opacity='0.2'/%3E%3C/svg%3E"),
    /* Wolkigkeit — die grobe Ungleichmaessigkeit des Bogens */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.25' intercept='-0.12'/%3E%3CfeFuncG type='linear' slope='1.25' intercept='-0.12'/%3E%3CfeFuncB type='linear' slope='1.25' intercept='-0.12'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23k)' opacity='0.16'/%3E%3C/svg%3E");
  background-blend-mode: overlay, overlay, overlay;
  background-repeat: repeat;
  color: var(--tinte);
  font-family: var(--schrift-lese);
  font-size:20px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Rolle 1 — der Textlink: Akzentton, unterstrichen. Wer im Satz einen
   Weg sieht, soll ihn ohne Nachdenken erkennen. */
a{
  color:var(--akzent);
  text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--kontur);
}
a:hover{ color:var(--akzent); text-decoration-color:var(--akzent) }
a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Rolle 3 — Navigation: kein Strich, die aktive Seite traegt Gewicht.
   In einer Leiste ist ohnehin alles ein Weg; Striche waeren Laerm. */
.wegezeile a, .fuss a, .lockup, .zurueck{ text-decoration:none }
.wegezeile a:hover, .fuss a:hover, .zurueck:hover{ text-decoration:underline }

/* Sprungmarke: aus dem Bild heraus geparkt, im Fokus sichtbar.
   Nicht mit display:none versteckt — das nimmt sie auch der
   Tastatur. */
.sprung{
  position:absolute; left:12px; top:-60px; z-index:30;
  background:var(--grund); color:var(--akzent);
  border:1px solid var(--kontur); padding:10px 16px;
  font-family:var(--schrift-ui); font-size:16px; text-decoration:none;
  transition:top .18s ease;
}
.sprung:focus{ top:12px; outline:2px solid var(--fokus); outline-offset:2px }

.huelle{
  max-width:1180px; margin:0 auto;
  padding:clamp(14px, 2.2vw, 26px) clamp(16px, 3vw, 26px) 0;
  min-height:100vh; display:flex; flex-direction:column;
}
.kopf, .fuss{ flex:none }

/* --- Kopf --------------------------------------------------- */
.kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; padding-bottom:10px; border-bottom:1px solid var(--linie);
  margin-bottom:clamp(16px, 2.4vh, 26px);
  flex-wrap: wrap;
}
/* Die Wortmarke als Institutsschild: das Kuerzel in der Lesetype, der
   Name darunter in der Apparatschrift, eine Haarlinie dazwischen. Wie
   auf einer Kartentafel — Titel ueber der Linie, Werkangabe darunter.
   Serifenschrift neben geometrischem Signet: Groteske neben Geometrie
   waere dasselbe zweimal. */
/* Die Marke im Kopf der Startseite: gross genug, um allein zu stehen —
   das grosse Signet rechts ist entfallen. */
.kopfsignet{ width:clamp(96px, 11vw, 158px); height:auto; color:var(--tinte) }
.lockup:has(.kopfsignet){ gap:clamp(12px, 1.6vw, 20px) }
.lockup:has(.kopfsignet) .wm-kurz{ font-size:clamp(20px, 2.6vw, 26px) }
.lockup:has(.kopfsignet) .wm-lang{ font-size:clamp(11px, 1.2vw, 14px) }

/* Auf der eigenen Seite ist die Marke kein Weg — sie sieht gleich aus,
   traegt aber keinen Zeiger und keinen Fokus. */
.lockup-hier{ cursor:default }
.lockup-hier .wm-kurz{ color:var(--tinte) }

.wortmarke{ display:flex; flex-direction:column; gap:3px; margin:0 }
.wm-kurz{
  font-family:var(--schrift-lese); font-size:clamp(20px, 2vw, 26px);
  font-weight:400; letter-spacing:.2em; line-height:1;
  color:var(--tinte); padding-bottom:2px;
  transition:color .25s cubic-bezier(.4,.7,.2,1);
}
.wm-lang{
  background-image:none; text-decoration:none;
  font-family:var(--schrift-ui); font-size:14px; font-weight:400;
  letter-spacing:.04em; line-height:1.25; color:var(--marke);
  transition:color .25s cubic-bezier(.4,.7,.2,1);
}
/* Die Marke im Kopf ist ein Link, aber kein Textlink: kein Strich.
   Ohne diesen Block erbt sie die Unterstreichung, die Links tragen —
   und beide Zeilen sind unterstrichen. */
.lockup{
  display:flex; align-items:center; gap:14px;
  color:inherit; text-decoration:none;
}
.lockup:hover, .lockup:focus-visible{ text-decoration:none }
.lockup:focus-visible{ outline:2px solid var(--fokus); outline-offset:4px }
.lockup:hover .wm-kurz{ color:var(--akzent) }
.lockup:hover .wm-lang{ color:var(--tinte-2) }
/* Der Leitsatz gehoert zur Marke: dieselbe Apparatschrift wie der Name,
   eine Spur kleiner und leiser. Kursiv waere ein dritter Ton in einem
   Zeichen, das schon zwei hat. */
.wm-satz{
  display:block; margin-top:3px;
  font-family:var(--schrift-ui); font-size:11px; font-weight:400;
  letter-spacing:.04em; line-height:1.3; color:var(--marke);
  transition:color .25s cubic-bezier(.4,.7,.2,1);
}
.lockup:hover .wm-satz{ color:var(--tinte-2) }
/* Werkzeuge und Sprache oben rechts: Das Glossar ist ein Werkzeug zum
   Lesen, keine Seite ueber den Verein — deshalb steht es hier und nicht
   in der Fussleiste. Ein zarter Trenner scheidet Werkzeug von Sprache. */
.kopfleiste{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap }
.kopf-glossar{
  font-family:var(--schrift-ui); font-size:14px; letter-spacing:.02em;
  color:var(--marke); text-decoration:none;
}
.kopf-glossar:hover{ color:var(--akzent); text-decoration:underline; text-underline-offset:4px }
.kopf-glossar:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Die Erklaerung zum Glossar: ein Kasten unter dem Wort, in reinem CSS
   — kein Skript, keine Lagerechnung, und er erscheint auch beim
   Tastaturfokus. Fuer Vorleseprogramme verborgen: Dort ist er eine
   Wiederholung, denn der Weg fuehrt ohnehin zur Seite. */
.kopf-hilfe{ position:relative; display:inline-block }
.kopf-glosse{
  position:absolute; right:0; top:calc(100% + 9px); width:230px; z-index:20;
  font-family:var(--schrift-ui); font-size:14px; line-height:1.45;
  color:var(--tinte-2); text-align:left;
  background:var(--grund); border:1px solid var(--kontur);
  padding:10px 12px;
  opacity:0; visibility:hidden; transform:translateY(-3px);
  transition:opacity .24s cubic-bezier(.4,.7,.2,1),
             transform .24s cubic-bezier(.4,.7,.2,1),
             visibility 0s linear .24s;
  pointer-events:none;
}
.kopf-hilfe:hover .kopf-glosse,
.kopf-hilfe:focus-within .kopf-glosse{
  opacity:1; visibility:visible; transform:translateY(0);
  transition-delay:0s, 0s, 0s;
}
@media (max-width: 560px){ .kopf-glosse{ display:none } }
@media (prefers-reduced-motion: reduce){ .kopf-glosse{ transition:none } }
.kopfleiste-trenner{ width:1px; align-self:stretch; background:var(--linie); margin:2px 0 }
/* Die Sprachwahl als Paar: gerahmt, die geltende Sprache gefuellt. Ein
   Schalter sieht anders aus als ein Weg. */
.sprachen{
  display:flex; gap:0; align-items:stretch;
  border:1px solid color-mix(in srgb, var(--sprachton) 52%, transparent);
}
.kopfleiste a[hreflang], .kopfleiste .sprache-jetzt{
  font-family:var(--schrift-ui); font-size:14px; letter-spacing:.06em;
  padding:3px 9px; text-decoration:none; color:var(--marke);
}
.kopfleiste .sprache-jetzt{ background:var(--sprachton); color:var(--grund) }   /* 4,62:1, gemessen */
.kopfleiste a[hreflang]:hover{
  background:color-mix(in srgb, var(--sprachton) 14%, transparent);
  color:var(--sprachton);
}
.kopfleiste a[hreflang]:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Die gewaehlte Sprache traegt Gewicht, nicht nur Farbe. */
.kopfleiste [aria-current="true"]{ font-weight:500 }
/* Noch nicht zu haben: sichtbar und fokussierbar, aber ohne Ziel. */
.kopfleiste a[aria-disabled="true"]{ color:var(--marke); cursor:default }
.kopfleiste a[aria-disabled="true"]:hover{ color:var(--marke); text-decoration:none }

/* Der Kopf der Startseite: links das Zeichen mit Namen, rechts das
   Zitat. Die Marke steht damit nicht mehr in der Leiste, sondern dort,
   wo die Seite anfaengt zu sprechen — und das Zitat hat einen Absender.
   Auf schmalen Fenstern untereinander: Zwei Spalten unter 700 Pixeln
   sind zwei zu schmale Spalten. */
/* Die Zeile ueber dem Kopf: Sie sagt, was diese Seite ist — leiser als
   das Zitat darunter, das ihre Stimme traegt. */
.blatt h1.kopfzeile, .kopfzeile{
  font-family:var(--schrift-ui); font-size:14px; font-weight:400;
  letter-spacing:normal; color:var(--marke);
  margin:0 0 clamp(14px, 2.4vh, 24px);
}

.seitenkopf{
  display:grid; grid-template-columns:minmax(0, 250px) 1fr;
  gap:clamp(20px, 4vw, 52px); align-items:end;
  margin:0 0 clamp(26px, 4.4vh, 48px);
}
/* Der Satz unter der Marke: Er antwortet auf die erste Frage jedes
   Besuchers — wer spricht hier, und was tun die? Bisher stand die
   Antwort erst auf „Über uns", einen Klick zu weit. Das Gruendungsdatum
   steht darin: offen genannt ist es Staerke. */
.blatt .marke-satz{
  max-width:30ch; margin:14px 0 0;
  font-family:var(--schrift-ui); font-size:14px; line-height:1.5;
  color:var(--tinte-2); text-wrap:pretty;
}

.seitenkopf .lockup{
  flex-direction:column; align-items:flex-start; gap:12px;
  justify-content:flex-end;
}
.kopfspalte{
  display:flex; flex-direction:column;
  /* Bemessen am laengsten Zitat: So bleibt die Unterkante an ihrem
     Platz, statt mit jedem Wechsel zu springen. */
  min-height:clamp(310px, 36vh, 370px);
}
/* Das Zitat sitzt unten in der Spalte — die Zeile darueber bleibt oben,
   wo sie einfuehrt. */
.kopfspalte .zitat{ margin-top:auto }
.seitenkopf .zitat{ margin-right:0; margin-bottom:0; margin-left:0; max-width:52ch }
@media (max-width: 700px){
  .seitenkopf{ grid-template-columns:1fr; gap:22px }
}

/* Der Kopf der Startseite: Leitsatz links, Signet rechts. Das Signet ist
   hier Flaeche, kein Weg — es steht fuer den Verein, ohne etwas zu
   versprechen. Die Startseite traegt keinen Leserand, also ist rechts
   Platz, ohne dass der Text schmaler wird. */
.startkopf{
  display:grid; grid-template-columns:1fr clamp(140px, 20vw, 230px);
  gap:clamp(16px, 2.6vw, 40px);
  align-items:center; margin:0 0 clamp(10px, 2vh, 20px);
}
.startkopf .leitsatz-gross{ margin:0 }
/* Die Blogueberschrift: „Blog:" bleibt Beschriftung in der
   Apparatschrift, der Nachsatz wird persoenlich. Spectral kursiv ist
   die schreibnaechste Form, die wir haben — eine echte Schreibschrift
   waere eine ganze Schriftdatei fuer sechs Woerter.
   Der leichte Zeilenversatz und die weiteren Buchstabenabstaende
   nehmen dem Satz die Strenge des Bleisatzes. */
.blogkopf{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.bk-marke{
  font-family:var(--schrift-ui); font-size:1.3em; font-weight:500;
  letter-spacing:.04em; color:var(--marke);
}
.bk-satz{
  font-family:var(--schrift-ui); font-weight:500;
  font-size:1.3em; letter-spacing:.04em; color:var(--tinte);
}
/* Das wechselnde Zitat: Es steht, wo vorher der Leitsatz stand, und
   traegt dieselbe Groesse. Die Herkunft darunter ist ein Weg zum
   ganzen Text — ein Zitat ohne Quelle ist eine Behauptung. */
.zitat{
  position:relative; margin:0 0 clamp(30px, 5vh, 56px);
  padding-left:clamp(22px, 3.4vw, 42px);
  /* Ein Zitat laeuft nicht auf Textbreite — die schmalere Spalte sagt
     das, bevor der erste Satz gelesen ist. */
  max-width:56ch;
}
/* Das Anfuehrungszeichen als Marke am Rand: Es sagt „Zitat", bevor der
   erste Satz gelesen ist. Fuer Vorleseprogramme verborgen — dort sagt
   es das <blockquote> selbst. */
.zitat::before{
  content:''; position:absolute; left:0; top:.16em;
  bottom:.1em; width:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='160' viewBox='0 0 6 160'%3E%3Cpath d='M3.2 1 C 2.1 18, 4.2 32, 3.1 48 C 2.0 65, 4.4 80, 3.3 97 C 2.2 114, 4.1 128, 2.9 145 C 2.4 152, 3.2 156, 2.8 159' fill='none' stroke='%230F505C' stroke-width='1.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  background-repeat:repeat-y; background-position:left top; background-size:6px 160px;
}
.zitat blockquote{ margin:0 }
.zitat-satz{
  font-family:var(--schrift-lese); font-weight:400; font-style:italic;
  font-size:clamp(20px, 2.9vw, 32px); line-height:1.28;
  letter-spacing:-.012em; color:var(--tinte);
  margin:0 0 10px; text-wrap:pretty;
  transition:opacity .5s cubic-bezier(.4,.7,.2,1);
}
/* Die Herkunft ist ein Weg, keine Beschriftung: Sie sagt es im Wortlaut
   und traegt einen Pfeil. */
.zitat-quelle{
  font-family:var(--schrift-ui); font-size:14px; color:var(--marke);
  transition:opacity .5s cubic-bezier(.4,.7,.2,1);
}
.zitat-quelle::before{ content:'Weiterlesen in '; color:var(--marke) }
html:lang(en) .zitat-quelle::before{ content:'Read more in ' }
.zitat-quelle a{
  color:var(--akzent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  padding-bottom:1px;
}
.zitat-quelle a::after{ content:' \2192'; font-size:.94em }
.zitat-quelle a:hover{ border-bottom-color:var(--akzent) }
.zitat-quelle a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Lange Zitate stehen kleiner: Ein Satz von vierhundert Zeichen im Grad
   eines Vierzeilers sprengt den Kopf. Der Grad haengt an der
   Zeichenzahl, nicht an einer Handentscheidung. */
.zitat[data-laenge="mittel"] .zitat-satz{ font-size:clamp(20px, 2.5vw, 32px) }
.zitat[data-laenge="lang"] .zitat-satz{ font-size:clamp(16px, 2vw, 26px); line-height:1.4 }

/* Der Wechsel: ausblenden, tauschen, einblenden. Kein Schieben, kein
   Springen — der Satz bleibt an seinem Platz. */
.zitat.wechselt .zitat-satz, .zitat.wechselt .zitat-quelle{ opacity:0 }
@media (prefers-reduced-motion: reduce){
  .zitat-satz, .zitat-quelle{ transition:none }
}
/* Signet und Name als eine Einheit: das Zeichen, darunter das Kuerzel
   und der volle Name. Der Kopf traegt nur noch „AIFIM" — hier steht,
   wofuer es steht. */
.signet-block{ display:flex; flex-direction:column; align-items:center; gap:10px }
.signet-name{
  margin:0; text-align:center; line-height:1.3;
}
.sn-kurz{
  display:block; font-family:var(--schrift-lese); font-size:16px;
  letter-spacing:.2em; color:var(--tinte);
}
.sn-lang{
  display:block; font-family:var(--schrift-ui); font-size:11px;
  letter-spacing:.03em; color:var(--marke); text-wrap:balance;
}
.startsignet{
  width:100%; height:auto; color:var(--tinte); opacity:.9;
  transition:filter .55s cubic-bezier(.4,.7,.2,1);
}
/* Ruhiger Atem ohne Zutun: langsamer und mit kleinerem Ausschlag als
   beim Zeigen. Ein Zeichen, das dauernd atmet, darf nicht auffallen. */
@keyframes atem-ruhig{
  0%,100%{ transform:scale(.94); opacity:.72 }
  50%    { transform:scale(1.1); opacity:1 }
}
.startsignet.wach .punkt{
  animation:
    zuenden .6s cubic-bezier(.4,.9,.3,1) var(--d) both,
    atem-ruhig 11s ease-in-out calc(var(--atem, 0s) + .6s) infinite;
}
/* Bloom: Zeigt man auf einen Blogeintrag, leuchtet die Wolke auf. Das
   verbindet den Eintrag mit dem Zeichen, das fuer den Verein steht —
   ohne Pfeil, ohne Linie, ohne Erklaerung. */
.blatt:has(.logbuch-liste .log-eintrag:hover) .startsignet,
.blatt:has(.logbuch-liste a:focus-visible) .startsignet{
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--wolke-aussen) 52%, transparent))
    drop-shadow(0 0 20px color-mix(in srgb, var(--wolke-aussen) 34%, transparent))
    drop-shadow(0 0 40px color-mix(in srgb, var(--wolke-innen) 22%, transparent));
}
/* Auf schmalen Fenstern entfaellt es: Dort ist jeder Zentimeter Text
   mehr wert als ein Zeichen, das nichts tut. */
@media (max-width: 720px){
  .startkopf{ grid-template-columns:1fr }
  .startsignet{ display:none }
  /* Der Name bleibt: Ohne das Zeichen im Kopf ist er die einzige
     Stelle, an der der Verein ausgeschrieben steht. */
  .signet-block{ align-items:flex-start }
  .signet-name{ text-align:left }
}

/* --- Blogeintraege, Leitsatz, Marke ------------------------------
   Was vom Atlas-Abschnitt bleibt: die Regeln, die das neue Markup
   wirklich benutzt. Alles andere — Achse, Ebenen, Feld, Regionen,
   Knoten, Mitte, Entbergen, Tafeltext, Themen — ist mit dem Atlas
   entfallen. Sicherung: sicherung/atlas/
------------------------------------------------------------------ */
/* Ein Blogeintrag ist ein <article>, keine Schaltflaeche: Zeichen links,
   Text rechts. Kein Klickzeiger — es gibt hier nichts zu klicken ausser
   den Verweisen im Text selbst. */
.log-eintrag{
  display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start;
}
.log-text{ min-width:0 }

.vz-bild{
  width:34px; height:34px; opacity:.7;
  transition:opacity .3s cubic-bezier(.4,.7,.2,1), color .3s cubic-bezier(.4,.7,.2,1);
}
.lockup-text{ display:flex; flex-direction:column }

@keyframes atem-punkt{
  0%,100%{ transform:scale(1) }
  50%    { transform:scale(1.08) }
}

.vz-bild svg{ width:100%; height:100% }

.signet:focus-visible{outline:2px solid var(--fokus);outline-offset:4px}

.signet .kopf-linie{
  fill:none; stroke:var(--tinte); stroke-width:3.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.signet.hell .kopf-linie{stroke:var(--grund)}

/* Wolke: im Ruhezustand unsichtbar, aber vorhanden. */
.signet .wolke{
  opacity:0; transition:opacity .5s ease;
}
.signet:hover .wolke, .signet:focus-visible .wolke, .signet.wach .wolke{opacity:1}
.signet:hover .wolke, .signet:focus-visible .wolke, .signet.wach .wolke{
  filter:
    drop-shadow(0 0 2px color-mix(in srgb, var(--wolke-aussen) 55%, transparent))
    drop-shadow(0 0 7px color-mix(in srgb, var(--wolke-aussen) 30%, transparent));
}
/* In der Mitte ist das Zeichen gross, also darf der Schein weiter
   reichen — bei kleinen Fassungen wuerde dieselbe Streuung die Punkte
   verschmieren. */
.mitte.signet.wach .wolke{
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--wolke-aussen) 60%, transparent))
    drop-shadow(0 0 12px color-mix(in srgb, var(--wolke-aussen) 34%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--wolke-innen) 20%, transparent));
}

.signet .punkt{ fill:var(--akzent); opacity:0; transform-box:fill-box; transform-origin:center }
.signet.hell .punkt{fill:var(--grund)}

/* Die Welle laeuft vom Saatpunkt nach aussen: Jeder Punkt bekommt
   eine Verzoegerung nach seinem Abstand zur Mitte. Das ist kein
   Zufall, sondern Ausbreitung. */
@keyframes zuenden{
  0%   { opacity:0; transform:scale(.4) }
  55%  { opacity:1; transform:scale(1.35) }
  100% { opacity:.92; transform:scale(1) }
}
@keyframes breathe{
  0%,100%{ transform:scale(.86); opacity:.4 }
  50%    { transform:scale(1.3); opacity:1 }
}

.signet:hover .punkt, .signet:focus-visible .punkt, .signet.wach .punkt{
  animation:
    zuenden .5s cubic-bezier(.4,.9,.3,1) var(--d) both,
    breathe 6s ease-in-out calc(var(--atem, 0s) + .5s) infinite;
}
/* Die Mitte atmet langsamer als die kleinen Fassungen: Ein grosses
   Zeichen darf nicht hecheln. */
.mitte.signet.wach .punkt{ animation-duration: .5s, 8s }

/* Statisch: immer sichtbar, ohne Puls. Muss nach den Hover-Regeln
   stehen, um sie zu ueberstimmen. */
.signet-statisch .wolke{ opacity:1; animation:none }
.signet-statisch .punkt{ opacity:1; animation:none }

@media (prefers-reduced-motion: reduce){
  .startsignet.wach .punkt{ animation:none; opacity:.85 }
  /* Bei reduzierter Bewegung stehen die Punkte still und sichtbar. */
  .signet:hover .punkt, .signet:focus-visible .punkt, .signet.wach .punkt{
    animation:none; opacity:.85;
  }
}

/* Die Mitte atmet langsam: Zuenden bleibt kurz, das Atmen wird
   von 4,2 auf 9 Sekunden gestreckt. Die beiden Werte gehoeren zu
   den beiden Animationen in der Reihenfolge, in der sie im
   Signet-Block stehen. */

/* --- Fuß --------------------------------------------------
   Eine Zeile, zwei Gruppen: links, was man tun kann, rechts, was
   stehen muss. Gleicher Grad und gleiche Schrift — die Trennung
   liegt im Abstand, nicht in der Auszeichnung.
------------------------------------------------------------ */
.fuss{
  border-top:1px solid var(--linie); margin-top:0; padding:6px 0 7px;
  display:flex; gap:14px 34px; flex-wrap:wrap; align-items:baseline;
  font-family:var(--schrift-ui); font-size:16px;
}
.fuss-gruppe{ display:flex; gap:22px; flex-wrap:wrap; letter-spacing:.02em }
/* Die Pflichtangaben stehen am Ende der Zeile: Sie sind erreichbar,
   drängen sich aber nicht vor. */
.fuss-pflicht{ margin-left:auto }
.fuss a{ color:var(--tinte-2); text-decoration:none }
.fuss a:hover{ color:var(--akzent); text-decoration:underline; text-underline-offset:4px }
.fuss a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
@media (max-width: 640px){
  .fuss-pflicht{ margin-left:0 }
}

/* --- Nur für Vorleseprogramme -------------------------------- */
.nur-vorlesen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Ohne JavaScript ----------------------------------------
   Die Seite baut Achse, Feld und Liste aus daten/inhalt.de.js.
   Ohne JavaScript ist keine dieser drei Ansichten da. Der
   Hinweis sagt das und nennt einen Weg — er tut nicht so, als
   sei die Liste ein Rueckfall.
------------------------------------------------------------ */
/* --- Schmale und niedrige Fenster ----------------------------
   Die Bruchstellen korrigieren nur die ANORDNUNG und die Dichte.
   Alle Groessen stehen als Verlauf weiter oben.
------------------------------------------------------------ */
@media (max-height: 720px){
  .leitsatz-gross{ font-size:clamp(20px, 2.2vw, 26px); margin-bottom:8px }
  .log-satz{ line-height:1.3 }
  .logbuch-liste{ gap:clamp(16px, 2.6vh, 26px) }
}
@media (max-height: 600px){
  .fuss{ padding:8px 0 10px }
}

/* --- Ruhige Bewegung ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .log-eintrag, .signet .punkt, .signet .wolke{
    animation:none !important; transition:none !important;
  }
  html{ scroll-behavior:auto }
}


/* --- Textseiten -------------------------------------------------
   Impressum, Datenschutz, Barrierefreiheit, Kontakt,
   Partnerschaften: echte Seiten mit eigener Adresse, lesbar ohne
   JavaScript. Dasselbe Papier, dieselben Schriften, dieselben
   Farben wie der Atlas — nur ohne Tafel, denn hier wird gelesen.
---------------------------------------------------------------- */
.blatt{
  max-width:70ch; margin:0 auto;
  padding:clamp(18px, 3vw, 32px) clamp(16px, 3vw, 26px) 60px;
}
/* Ohne Leserand darf das Blatt breiter sein — der gewonnene Raum traegt
   das Signet, nicht laengere Zeilen. In der Grundschicht, nicht in einer
   Breitenbedingung: Sonst gilt sie genau dort nicht, wo der Platz knapp
   ist. */
.blatt:has(.startkopf){ max-width:calc(70ch + 260px) }
.blatt h1{
  font-family:var(--schrift-ui); font-size:clamp(26px, 2.6vw, 32px);
  font-weight:400; letter-spacing:-.008em; margin:26px 0 6px;
}
.blatt .vorlauf{
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marke); margin:0;
}
/* Der Stand einer Erklaerung: klein, direkt unter dem Titel. */
.blatt .stand{
  font-family:var(--schrift-ui); font-size:16px; color:var(--marke);
  margin:0 0 18px;
}
.blatt h2{
  font-family:var(--schrift-ui); font-size:clamp(16px, 1.7vw, 20px);
  font-weight:500; letter-spacing:.06em;
  color:var(--tinte); margin:clamp(38px, 6vh, 64px) 0 clamp(14px, 2vh, 22px);
  padding-bottom:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='6' viewBox='0 0 160 6'%3E%3Cpath d='M1 3.4 C 18 2.2, 32 4.3, 48 3.2 C 65 2.0, 80 4.4, 97 3.3 C 114 2.2, 128 4.1, 145 2.9 C 152 2.4, 156 3.2, 159 2.8' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left bottom; background-size:160px 6px;
}
/* Eine Stufe unter h2: kleiner UND leiser. Sonst steht die
   Unterueberschrift ueber ihrer eigenen Ueberschrift. */
.blatt h3{
  font-family:var(--schrift-ui); font-size:clamp(14px, 1.3vw, 16px);
  font-weight:500; color:var(--marke); margin:22px 0 5px;
}
/* Versalien und Sperrung gehoeren an die ROLLE „Rubrik", nicht an das
   Element h3: Am Element trafen sie jede Inhaltsueberschrift und
   entstellten Produktnamen — aus „Plugin: Drift Limiter" wurde
   „PLUGIN: DRIFT LIMITER". */
.blatt h3.rubrik{ letter-spacing:.08em; text-transform:uppercase }
.blatt p, .blatt li{ margin:0 0 12px; color:var(--tinte-2); text-wrap:pretty }
.blatt ul{ margin:0 0 12px; padding-left:20px }
.blatt li{ margin:0 0 6px }
/* Hervorhebungen: dunkles Grau statt Tinte — weicher im Auge, gerechnet
   7,69:1 gegen das Papier und ueber dem Fliesstext (7,04:1). Die
   Hervorhebung traegt vor allem die Strichstaerke; Farbe ist der zweite
   Traeger. */
.blatt strong{ color:var(--hervor); font-weight:700 }
/* Ein Absatz, der mehr Gewicht traegt als seine Nachbarn. Gewicht statt
   Farbe, damit die Aussage nicht an der Farbe haengt. */
/* Gezaehlte Grundsaetze: als echte Liste, damit ein Vorleseprogramm
   ansagt, wie viele kommen. Die Ziffer steht im Rand. */
.blatt .grundsaetze{
  list-style:none; margin:0 0 16px; padding:0; counter-reset:grundsatz;
}
.blatt .grundsaetze li{
  counter-increment:grundsatz; position:relative;
  padding-left:30px; margin:0 0 12px; color:var(--tinte-2);
}
.blatt .grundsaetze li::marker{ content:'' }
.blatt .grundsaetze li::after{
  content:counter(grundsatz) '.'; position:absolute; left:0; top:0;
  font-family:var(--schrift-ui); font-size:16px; font-weight:500; color:var(--marke);
}
/* Ein Satzteil, der leiser steht als der Absatz um ihn. */
.blatt .beisatz-ton{ color:var(--tinte-2); font-weight:400 }

.blatt .hervor{ color:var(--tinte); font-weight:500 }
.blatt .hervor em{ font-style:normal; font-weight:600 }
/* Angaben, die als Block zusammengehoeren: Anschrift, Kennzahlen.
   Kein Kasten — eine Linie links genuegt, wie im Atlas. */
.blatt .angabe{
  border-left:1px solid var(--linie); padding-left:18px; margin:0 0 18px;
  font-style:normal;
}
.blatt .angabe p{ margin:0 0 3px }
/* Ein Beisatz erklaert eine Angabe, ohne sie zu ueberdecken. */
.blatt .beisatz{ color:var(--marke); font-size:16px }
/* Noch zu ergaenzen: sichtbar als Luecke ausgezeichnet, nicht
   stillschweigend weggelassen. Wer die Seite veroeffentlicht, muss
   sehen, was fehlt. */
.blatt .offen{
  border-left:2px solid var(--ring-orange); padding-left:16px;
  margin:0 0 18px; color:var(--tinte);
}
.blatt .offen p{ margin:0 0 6px }
.blatt .offen .marke{
  display:block; font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warnton); margin:0 0 4px;
}
/* Eine Tabelle bleibt eine Tabelle: Vier Arten mit vier Merkmalen sind
   tabellarische Daten. Als Fliesstext muesste man vergleichen, was
   nebeneinander stehen sollte. Kopfzellen mit scope, damit
   Vorleseprogramme jede Zelle benennen koennen. */
.blatt .tafel{
  width:100%; border-collapse:collapse; margin:0 0 14px;
  font-family:var(--schrift-ui); font-size:16px;
}
.blatt .tafel th, .blatt .tafel td{
  text-align:left; vertical-align:top; padding:9px 14px 9px 0;
  border-bottom:1px solid var(--linie-zart);
}
.blatt .tafel thead th{
  font-weight:500; color:var(--tinte); border-bottom:1px solid var(--kontur);
  font-size:14px; letter-spacing:.03em;
}
.blatt .tafel tbody th{ font-weight:400; color:var(--tinte); white-space:nowrap }
.blatt .tafel td{ color:var(--tinte-2) }
/* Auf schmalen Fenstern rollt die Tabelle waagrecht, statt zu
   zerbrechen. Der Behaelter ist fokussierbar, damit man auch mit der
   Tastatur rollen kann. */
.tafel-rolle{ overflow-x:auto; margin:0 0 14px }
.tafel-rolle:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }

/* Vier Schritte, gezaehlt. Die Zahl steht als Zahl da — ein Verfahren
   hat eine Reihenfolge, und die gehoert in eine geordnete Liste. */
.blatt .schritte{ list-style:none; margin:0 0 14px; padding:0; counter-reset:schritt }
.blatt .schritte li{
  counter-increment:schritt; position:relative;
  padding-left:36px; margin:0 0 14px; color:var(--tinte-2);
}
.blatt .schritte li::before{
  content:counter(schritt); position:absolute; left:0; top:1px;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:14px;
  color:var(--marke);
}
.blatt .schritt-titel{
  display:block; font-family:var(--schrift-ui); font-size:16px; font-weight:500;
  color:var(--tinte);
}

/* Die Rechte am Fuss der Erklaerung: Nachschlagestoff, kein Lesetext.
   Kleiner gesetzt und durch eine Linie abgesetzt — sichtbar vorhanden,
   ohne den Gedankengang zu unterbrechen. */
.rechtszeile{
  margin:clamp(38px, 6vh, 62px) 0 0; padding-top:clamp(16px, 2.4vh, 24px);
  border-top:1px solid var(--linie);
}
.rechtszeile h3{
  font-family:var(--schrift-ui); font-size:16px; font-weight:500;
  letter-spacing:.04em; color:var(--tinte); margin:0 0 8px;
}
.rechtszeile p{
  font-size:14px; line-height:1.55; color:var(--tinte-2); margin:0 0 9px;
}

/* Ausklappbare Abschnitte: <details>/<summary> statt eines eigenen
   Umschalters. Der Browser bringt das Bedienelement mit, es ist mit der
   Tastatur bedienbar und wird von Vorleseprogrammen als
   „ausgeklappt/eingeklappt" angesagt — und es braucht kein JavaScript,
   was diese Seiten ohnehin verlangen.
   Das Symbol ist ein Winkel, der sich dreht: dieselbe Sprache wie im
   uebrigen Design, keine Bildchen. */
.blatt .klapp{ margin:0 }
.blatt .klapp > summary{
  display:flex; align-items:baseline; gap:12px;
  cursor:pointer; list-style:none;
}
.blatt .klapp > summary::-webkit-details-marker{ display:none }
.blatt .klapp > summary::before{
  content:''; flex:0 0 auto; width:7px; height:7px;
  border-right:1.5px solid var(--kontur); border-bottom:1.5px solid var(--kontur);
  transform:rotate(-45deg); transform-origin:60% 60%;
  transition:transform .25s cubic-bezier(.4,.7,.2,1), border-color .25s cubic-bezier(.4,.7,.2,1);
}
.blatt .klapp[open] > summary::before{ transform:rotate(45deg) }
.blatt .klapp > summary:hover::before{ border-color:var(--akzent) }
.blatt .klapp > summary:hover h2,
.blatt .klapp > summary:hover h3{ color:var(--akzent) }
.blatt .klapp > summary:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Die Ueberschrift behaelt ihre Gestalt; nur ihr Aussenabstand wandert
   an das <details>, sonst schiebt der eingeklappte Zustand Luft vor sich
   her. */
.blatt .klapp > summary h2,
.blatt .klapp > summary h3{ margin:0 }
.blatt .klapp:has(> summary h2){
  margin:clamp(46px, 7vh, 78px) 0 0;
  border-top:2px solid var(--kontur); padding-top:clamp(16px, 2.4vh, 24px);
}
.blatt .klapp:has(> summary h2) > summary h2{
  font-size:clamp(20px, 1.9vw, 26px); border-bottom:0; padding-bottom:0;
}
/* Unterabschnitte ruecken ein: Einrueckung zeigt Zugehoerigkeit
   deutlicher als jede Groessenstufe. */
.blatt .klapp:has(> summary h3){
  margin:clamp(20px, 3vh, 30px) 0 0; padding-left:clamp(14px, 2vw, 24px);
  border-left:1px solid var(--linie-zart);
}
.blatt .klapp:has(> summary h3) > summary h3{ font-size:16px; color:var(--tinte) }
/* Ruhigere Zeilen in der Erklaerung: kuerzer und luftiger als im
   uebrigen Text — eine Rechtserklaerung liest man ungern in langen
   Zeilen. */
.klapp-inhalt p, .klapp-inhalt li{ line-height:1.62 }
.klapp-inhalt ul{ margin:0 0 14px }
.klapp-inhalt li{ margin:0 0 9px }
.blatt .klapp > summary h2{ padding-bottom:7px }
.klapp-inhalt{ padding-top:clamp(12px, 2vh, 18px) }
.klapp-inhalt > *:last-child{ margin-bottom:0 }

/* Das Transkript: Zeitmarke links, gesprochener Text rechts — wie in
   einem Sitzungsprotokoll. Die Zeit steht in der Apparatschrift und
   traegt Ziffern gleicher Breite, damit die Spalte ruhig bleibt. */
.transkript-liste{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
  margin:0; }
.transkript-liste dt{ margin:0 }
.tr-zeit{
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:14px;
  font-variant-numeric:tabular-nums; color:var(--marke);
}
.transkript-liste dd{
  margin:0 0 6px; color:var(--tinte-2); line-height:1.55; font-size:16px;
}
.tr-hinweis{
  font-family:var(--schrift-ui); font-size:14px; color:var(--marke);
  margin:0 0 14px;
}

/* Ein Verweis auf ein Video. Kein eingebettetes Fenster: Das laedt
   fremden Code und setzt Kennungen — was diese Seiten ausschliessen.
   Der Hinweis sagt vorher, wohin der Weg fuehrt. */
.blatt .film{
  border-left:1px solid var(--kontur); padding-left:16px;
  margin:0 0 22px;
}
/* Der Knopf laedt nichts: Er ist bis zum Klick nur Papier. */
.film-start{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px 16px; margin:0 0 8px;
  border:1px solid var(--kontur); text-decoration:none;
  background:var(--grund); color:var(--akzent);
  font:inherit; text-align:left; cursor:pointer;
  transition:border-color .25s cubic-bezier(.4,.7,.2,1);
}
.film-start:hover{ border-color:var(--akzent) }
.film-start:focus-visible{ outline:2px solid var(--fokus); outline-offset:2px }
.film-marke{
  flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border-radius:999px;
  background:var(--akzent); color:var(--grund);
  font-size:14px; line-height:1; padding-left:2px;
}
.film-text{ font-family:var(--schrift-ui); font-size:16px; color:var(--akzent) }
/* Das Videofenster erst nach dem Klick — im Seitenverhaeltnis 16:9,
   damit beim Laden nichts springt. */
.film-rahmen{
  position:relative; aspect-ratio:16 / 9; margin:0 0 8px;
  border:1px solid var(--kontur); background:var(--tinte);
}
.film-rahmen iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.film-hinweis{
  display:block; font-family:var(--schrift-ui); font-size:14px;
  line-height:1.45; color:var(--marke);
}

/* Trennlinien wie im Blog: derselbe Federstrich, damit ein Verzeichnis
   von Vorhaben aussieht wie eine Reihe von Vorhaben. */
.blatt .vorhaben-liste{ list-style:none; margin:0; padding:0 }
.blatt .vorhaben-liste > li{ margin:0 }
.blatt .vorhaben-liste > li + li{
  margin-top:clamp(22px, 3.4vh, 38px);
  padding-top:clamp(22px, 3.4vh, 38px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M1 3.4 C 22 2.1, 39 4.2, 58 3.1 C 78 1.9, 96 4.4, 117 3.3 C 137 2.2, 154 4.1, 174 2.9 C 194 1.8, 214 3.9, 239 2.6' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left top; background-size:240px 6px;
}

/* Der Stand im Vorhabenverzeichnis: eigene Zeile, leiser als die
   Beschreibung. Ein Verzeichnis, das nur nennt WAS es gibt, laesst die
   wichtigste Frage offen — wie weit es ist. */
.vorhaben-stand{
  display:block; margin-top:5px;
  font-family:var(--schrift-ui); font-size:14px; color:var(--marke);
}

/* Die Themenreihe: eine Zeile statt sechs Listenpunkte. Sechs Namen
   ohne Erklaerung sind eine Aufzaehlung, keine Liste — als Reihe
   gesetzt nehmen sie den Platz ein, den sie verdienen. */
.blatt .themenreihe{
  font-family:var(--schrift-ui); font-size:14px; line-height:1.6;
  color:var(--marke); margin:0 0 18px; }
.tr-marke{ color:var(--tinte-2) }

/* Das Team: Name und Rolle gehoeren zusammen, deshalb eine
   Definitionsliste — ein Vorleseprogramm sagt dann, wie viele Menschen
   kommen. Die Rolle steht in eigener Zeile ueber dem Satz. */
.blatt .team{ margin:0 0 18px }
.blatt .team dt{
  font-family:var(--schrift-ui); font-size:16px; font-weight:500;
  color:var(--tinte); margin:22px 0 2px;
}
.blatt .team dd{
  margin:0 0 22px; padding-bottom:22px;
  color:var(--tinte-2); text-wrap:pretty;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M1 3.4 C 22 2.1, 39 4.2, 58 3.1 C 78 1.9, 96 4.4, 117 3.3 C 137 2.2, 154 4.1, 174 2.9 C 194 1.8, 214 3.9, 239 2.6' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left bottom; background-size:240px 6px;
}
/* Der letzte Eintrag ohne Strich: Die Kontaktzeile darunter schliesst
   den Abschnitt. */
.blatt .team dd:last-of-type{ background-image:none; padding-bottom:0; margin-bottom:0 }
/* Stationen im Lebenslauf: eine Liste, kein Fliesstext. Ohne Punkte —
   sie zaehlt auf, sie gliedert nicht. */
.blatt .stationen{ list-style:none; margin:4px 0 0; padding:0 }
.blatt .stationen li{ margin:0 0 3px; padding-left:14px; position:relative }
.blatt .stationen li::before{
  content:'·'; position:absolute; left:2px; color:var(--marke);
}
.blatt .team-satz{ margin:6px 0 0 }
.blatt .team-kontakt{
  margin:24px 0 0; font-family:var(--schrift-ui); font-size:16px;
  color:var(--tinte-2);
}
.blatt .team .rolle{
  display:block; font-family:var(--schrift-ui); font-size:14px;
  letter-spacing:.03em; color:var(--marke); margin:0 0 4px;
}

/* Dieselbe Schaltflaeche am Seitenende: fuer alle, die den Text gelesen
   haben — sie sollen nicht nach oben zurueckrollen muessen. Ein
   Federstrich darueber trennt sie vom Schlussabschnitt. */
.blatt .demo-tuer-fuss{
  margin:clamp(26px, 4vh, 44px) 0 0; padding-top:clamp(20px, 3.4vh, 34px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M1 3.4 C 22 2.1, 39 4.2, 58 3.1 C 78 1.9, 96 4.4, 117 3.3 C 137 2.2, 154 4.1, 174 2.9 C 194 1.8, 214 3.9, 239 2.6' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left top; background-size:240px 6px;
}

/* Der Weg zum Quelltext: ein Textlink, kein Kasten — er steht neben der
   Demo, nicht an ihrer Stelle. */
.blatt .repo-weg{ margin:0 0 22px; font-family:var(--schrift-ui); font-size:16px }

/* Die Vorschau auf die Demo: ein echtes Bildschirmfoto, damit man sieht,
   wie sie aussieht — sie hat ein eigenes Aussehen, und eine Zeichnung im
   Papierton haette gerade das verdeckt. Rahmen und Toene aus dem
   Farbsystem, keine Sonderwerte. */
.blatt .demo-vorschau{ margin:0 0 22px }
.demo-vorschau a{
  display:block; margin:0 0 10px;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(24,34,52,.10);
  box-shadow:
    0 22px 44px -20px rgba(24,34,52,.45),
    0 8px 18px -14px rgba(15,80,92,.35);
  transition:transform .28s cubic-bezier(.4,.7,.2,1),
             box-shadow .28s cubic-bezier(.4,.7,.2,1);
}
.demo-vorschau img{
  display:block; width:100%; height:auto; border:0; margin:0;
}
.demo-vorschau a:hover{
  transform:translateY(-3px);
  box-shadow:
    0 30px 56px -20px rgba(24,34,52,.5),
    0 12px 24px -14px rgba(15,80,92,.42);
}
.demo-vorschau a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
@media (prefers-reduced-motion: reduce){
  .demo-vorschau a{ transition:none }
  .demo-vorschau a:hover{ transform:none }
}
.dv-hinweis{
  display:block; margin-top:3px;
  font-family:var(--schrift-ui); font-size:12px; color:var(--marke); line-height:1.45;
}


/* Eine Tuer im Text: die eine Handlung, die die Seite anbietet. */
.blatt .tuer{
  display:inline-block; font-family:var(--schrift-ui); font-size:16px;
  color:var(--akzent); text-decoration:none;
  border:1px solid var(--kontur); padding:9px 18px;
  text-decoration:none;
}
.blatt .tuer:hover{ border-color:var(--akzent); text-decoration:underline; text-underline-offset:4px }

/* Die eine Handlung dieser Seite: groesser als ein Textlink, damit man
   sie nicht sucht. Form wie die Tuer auf „Mitmachen" — eine Schaltflaeche
   sieht ueberall gleich aus. */
.blatt .demo-tuer{ margin:0 0 26px }
.blatt .tuer-gross{
  font-size:17px; padding:13px 24px;
  border-color:var(--akzent); color:var(--akzent);
}
.blatt .tuer-gross:hover{ background:var(--akzent); color:var(--grund); text-decoration:none }

.blatt .tuer:focus-visible{ outline:2px solid var(--fokus); outline-offset:2px }

.zurueck{
  display:inline-block; margin:0 0 8px;
  font-family:var(--schrift-ui); font-size:16px; color:var(--akzent);
  text-decoration:none;
}
.zurueck:hover{ text-decoration:underline; text-underline-offset:4px }
.zurueck:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }

/* --- Der Rand: Randglossen, Lesespur, Anstreichung ------------
   Marginalien wie im Fachbuch. Alles hier ist Zugabe: Die Begriffe
   sind echte Links auf das Glossar und funktionieren ohne davon.
---------------------------------------------------------------- */

/* Ein erklaerungsbeduerftiges Wort traegt denselben Federstrich wie
   die Fragen im Atlas — eine Sprache, keine zweite Erfindung. Im
   Ruhezustand blass, bei Beruehrung kraeftig. */
.begriff{
  color:inherit; text-decoration:none; padding-bottom:3px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5' viewBox='0 0 120 5'%3E%3Cpath d='M1 3.1 C 14 1.6, 27 3.9, 41 2.7 C 55 1.5, 68 4.0, 82 2.9 C 95 1.9, 108 3.7, 119 2.5' fill='none' stroke='%23474D60' stroke-width='1' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left bottom; background-size:120px 5px;
  transition:color .25s cubic-bezier(.4,.7,.2,1);
}
.begriff:hover, .begriff:focus-visible{
  color:var(--akzent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5' viewBox='0 0 120 5'%3E%3Cpath d='M1 3.1 C 14 1.6, 27 3.9, 41 2.7 C 55 1.5, 68 4.0, 82 2.9 C 95 1.9, 108 3.7, 119 2.5' fill='none' stroke='%230F505C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.begriff:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }

/* Die Glosse steht IM RAND, nicht ueber dem Text: Der Satz bleibt
   lesbar, waehrend man die Erklaerung liest. Sie faengt keine Klicks —
   sie ist Auskunft, nicht Bedienung. */
.glosse{
  position:absolute; left:calc(100% + 78px); width:130px;
  font-family:var(--schrift-ui); font-size:14px; line-height:1.45;
  color:var(--tinte-2); pointer-events:none;
  border-left:1px solid var(--kontur); padding:1px 0 1px 12px;
  /* Sichtbarkeit statt hidden-Attribut: Ein Wechsel von display im
     selben Bildaufbau laesst keinen Uebergang starten. Und die
     Sichtbarkeit traegt sie ALLEIN — nicht im Zusammenspiel mit der
     Deckung: Ein Einblenden ist Zierde, das Sichtbarwerden ist die
     Funktion, und eine Zierde, die die Funktion verhindert, ist keine. */
  visibility:hidden; transform:translateY(3px);
  transition:transform .26s cubic-bezier(.4,.7,.2,1);
}
.glosse.wach{ visibility:visible; transform:translateY(0) }

/* Das Lesebaendchen: eine Haarlinie im Rand, die mitwaechst. */
.lesespur{
  position:absolute; left:calc(100% + 64px); top:0; bottom:0; width:1px;
  background:var(--linie-zart); pointer-events:none;
}
.lesespur-fuellung{
  display:block; width:1px; height:var(--gelesen, 0%);
  background:var(--kontur);
  transition:height .18s linear;
}

/* Die Anstreichung: ein zarter, leicht schiefer Strich links neben
   dem Absatz, den man gerade ueberfaehrt. Nur bei Beruehrung, nur
   einer, sofort weg. */
.anstreichbar{ position:relative }
.anstreichbar::before{
  content:''; position:absolute; left:calc(-1 * clamp(11px, 2vw, 20px));
  top:.25em; bottom:.25em; width:2px;
  background:var(--akzent); opacity:0; transform:rotate(.6deg) scaleY(.82);
  transform-origin:top;
  transition:opacity .3s cubic-bezier(.4,.7,.2,1), transform .3s cubic-bezier(.4,.7,.2,1);
}
.anstreichbar:hover::before{ opacity:.62; transform:rotate(.6deg) scaleY(1) }

/* Marginalien brauchen Rand. Gibt es keinen, bleibt der Link und die
   Glosse entfaellt — ein Kasten ueber dem Text waere der Fehler, den
   wir dreimal korrigiert haben. */
/* Ohne Rand steht die Glosse UNTER dem Absatz statt daneben: im
   Fluss, nichts wird verdeckt. Die Lage setzt js/rand.js. */
@media (max-width: 1179px){
  .glosse{
    /* Im Fluss, nicht absolut: rand.js setzt den Kasten hier per DOM
       hinter den Absatz. Absolut positioniert naehme er keinen Platz
       ein und truege ein altes top mit sich. */
    position:static; left:auto; width:auto; max-width:62ch;
    margin:9px 0 14px;
    border-left:2px solid var(--kontur); padding:8px 0 8px 14px;
    background:none;
  }
  /* Das Lesebaendchen braucht einen Rand. Es ist Zierde; ohne Rand
     entfaellt es, ohne dass etwas fehlt. */
  .lesespur{ display:none }
}
/* Bezugsrahmen der Randglosse — bei jeder Breite, weil rand.js ihre
   Lage immer gegen den Hauptteil rechnet. Nur im Rand-Modus ist er
   auch der Ort der Glosse; unter 1180 Pixeln steht sie unter dem
   Absatz, gerechnet gegen denselben Rahmen. */
.blatt > main{ position:relative }
@media (min-width: 1180px){
  .blatt{ max-width:calc(70ch + 226px) }
  .blatt > header, .blatt > main, .blatt > footer{ max-width:70ch }
  /* Eine Seite ohne Rand behaelt die ganze Breite fuer den Text. */
  
}
/* Ohne Rand ist die Glosse ein Kasten unter dem Absatz. Dieselbe
   Gestalt wie auf schmalen Fenstern, aus demselben Grund. */
[data-rand="aus"] .glosse{
  /* Wirklich IM FLUSS: Nur ein statisches Element schiebt den folgenden
     Text weg. Absolut positioniert nimmt es keinen Platz ein und legt
     sich darauf — genau die Fehlerklasse, die mehrfach zu beheben war. */
  position:static; width:auto; max-width:none;
  border-left:2px solid var(--kontur); padding:9px 0 9px 15px;
  margin:10px 0 14px; background:none; transform:none;
}
[data-rand="aus"] .glosse[hidden]{ display:none }
/* Die Anstreichung ist eine Zeigergeste. Sie haengt am Zeiger, nicht an
   der Breite — und ihr Strich rueckt so weit heraus, wie Platz ist. */
@media (hover: none){
  .anstreichbar::before{ display:none }
}
@media (prefers-reduced-motion: reduce){
  .glosse, .lesespur-fuellung, .anstreichbar::before, .begriff{ transition:none }
}

/* Das Glossar selbst: Begriff und Erklaerung, wie im Fachbuch. */
.glossar{ margin:0 }
.glossar dt{
  font-family:var(--schrift-ui); font-size:clamp(16px, 1.6vw, 20px); font-weight:500;
  color:var(--tinte); margin:26px 0 4px; scroll-margin-top:24px;
}
.glossar dt:target{ color:var(--akzent) }
/* Der angesprungene Eintrag traegt eine Marke am Rand — damit man
   sieht, wo man gelandet ist, ohne suchen zu muessen. */
.glossar dt:target::before{
  content:''; position:absolute; left:-16px; top:.35em; bottom:0; width:2px;
  background:var(--akzent);
}
.glossar dt{ position:relative }
.glossar dt:target + dd{ color:var(--tinte) }
.glossar dd{ margin:0; color:var(--tinte-2); text-wrap:pretty }

/* --- Wiederhergestellt: Bloecke, die beim Aufraeumen mitgingen ---
   Aus sicherung/2026-07-27 zurueckgeholt bzw. neu geschrieben.
---------------------------------------------------------------- */


/* Der Verweis am Ende der Box: Wer mehr will, liest die Seite. */
.mehr{
  display:inline-block; margin-top:2px;
  font-family:var(--schrift-ui); font-size:16px; color:var(--akzent);
  text-decoration:none; border-bottom:1px solid var(--kontur); padding-bottom:2px;
}
.mehr:hover{ border-bottom-color:var(--akzent) }
.mehr:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Auf schmalen Fenstern nimmt die Box die ganze Breite: Neben dem Kopf
   waere sie dort zu eng zum Lesen. */

/* --- Startseite: Logbuch und Felder ---------------------------
   Die Startseite ist ein Blatt wie die uebrigen Seiten. Was der Atlas
   hinter Gesten zeigte, steht hier als Text — und damit ohne
   JavaScript lesbar.
---------------------------------------------------------------- */
.lb-kopf{
  display:flex; flex-wrap:wrap; gap:2px 14px; align-items:baseline;
  margin:0 0 2px !important;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.04em; color:var(--marke);
}
.lb-marken{ word-spacing:.3em }
.lb-stand{
  font-family:var(--schrift-ui); font-size:14px; color:var(--marke);
}
/* Die sechs Felder: eine Reihe, keine Karten. Die Marke steht neben dem
   Namen, weil sie dasselbe benennt. */
.blatt .felder-reihe{ list-style:none; margin:0 0 14px; padding:0 }
.blatt .felder-reihe > li{
  border-left:1px solid var(--linie); padding-left:18px; margin:0 0 14px;
}
.fr-marke{
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.02em; color:var(--marke);
}

/* --- Randglosse im Feld ---------------------------------------
   Dieselbe Lesehilfe wie auf den Textseiten: eine Haarlinie rechts, und
   daran die Zusammenfassung des Eintrags, den die Maus beruehrt. Sie
   liegt im Rand, nicht ueber dem Text.
---------------------------------------------------------------- */
/* Ein Behaelter, eine Kante: Seine linke Linie IST die Lesespur, die
   Glosse liegt darin. Zwei Elemente, die unabhaengig von derselben
   rechten Kante rechnen, kreuzen sich irgendwann — dieses kann es
   konstruktiv nicht. */
/* Ohne Rand keine Randglosse: Unter dieser Breite steht der Satz schon
   im Eintrag selbst, und ein Kasten ueber dem Text waere die
   Fehlerklasse, die wir dreimal korrigiert haben. */
/* --- Hauptwege ------------------------------------------------
   Drei Seiten, waagrecht ueber dem Inhalt. Die aktuelle traegt
   Gewicht und einen Federstrich, nicht nur Farbe.
---------------------------------------------------------------- */
/* Die Wegezeile: links die Werkzeuge (Glossar, Sprache), rechts die
   Hauptbereiche. Jedes an seinem Rand — man sucht Werkzeuge nicht dort,
   wo man navigiert. */
.wegezeile{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:10px; border-bottom:1px solid var(--linie);
  gap:clamp(16px, 3vw, 40px); flex-wrap:wrap;
  margin:0 0 clamp(32px, 5.2vh, 62px);
}

.hauptwege{
  display:flex; gap:clamp(18px, 3vw, 40px); align-items:baseline;
  margin:0;
  padding-bottom:9px; border-bottom:1px solid var(--linie-zart);
  flex-wrap:wrap;
}
.hauptwege a, .hauptwege .kopf-glossar{
  font-family:var(--schrift-ui); font-size:clamp(16px, 1.6vw, 20px);
  color:var(--tinte-2); text-decoration:none; padding-bottom:3px;
  transition:color .25s cubic-bezier(.4,.7,.2,1);
}
.hauptwege a:hover, .hauptwege .kopf-glossar:hover{ color:var(--akzent) }
.hauptwege a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
/* Die aktuelle Seite: Gewicht UND Federstrich — eine Kennzeichnung, die
   nicht allein an der Farbe haengt. */
.hauptwege a[aria-current="page"]{
  color:var(--tinte); font-weight:500;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='5' viewBox='0 0 120 5'%3E%3Cpath d='M1 3.1 C 14 1.6, 27 3.9, 41 2.7 C 55 1.5, 68 4.0, 82 2.9 C 95 1.9, 108 3.7, 119 2.5' fill='none' stroke='%230F505C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left bottom; background-size:120px 5px;
}

/* --- Blogeintraege --------------------------------------------
   Zeichen links, Text rechts. Datum, Marken, Titel, Satz, Stand,
   dann der Text — die Ordnung eines Laborbuchs.
---------------------------------------------------------------- */
.blatt .logbuch-liste{ list-style:none; margin:0; padding:0 }
.blatt .logbuch-liste > li + li{
  margin-top:clamp(22px, 3.4vh, 38px);
  padding-top:clamp(22px, 3.4vh, 38px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M1 3.4 C 22 2.1, 39 4.2, 58 3.1 C 78 1.9, 96 4.4, 117 3.3 C 137 2.2, 154 4.1, 174 2.9 C 194 1.8, 214 3.9, 239 2.6' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left top; background-size:240px 6px;
}
.log-eintrag{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start }
.log-zeichen{ display:flex; line-height:0; color:var(--tinte); opacity:.7 }
.log-text{ min-width:0 }
.log-datum{
  display:block; font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:14px; letter-spacing:.06em; color:var(--marke);
}
.log-marken{
  margin:2px 0 4px; display:flex; flex-wrap:wrap; gap:2px 12px;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.02em; color:var(--marke);
}
.blatt .log-titel{
  font-family:var(--schrift-lese); font-size:clamp(20px, 2.3vw, 26px); font-weight:400;
  color:var(--tinte); margin:0 0 6px; line-height:1.24; letter-spacing:-.006em;
}
/* Der Vorspann: die Zusammenfassung des Eintrags, groesser als der
   Fliesstext darunter und in der Tinte des Titels. */
.blatt .log-satz{
  font-family:var(--schrift-lese); font-size:clamp(16px, 1.6vw, 20px);
  color:var(--tinte); margin:0 0 12px; line-height:1.45;
}
/* Der Stand macht aus einem Blog ein Laborbuch: Was ist das hier, und
   wie weit ist es? */
.blatt .log-stand{
  margin:0 0 10px; font-family:var(--schrift-ui); font-size:14px; color:var(--tinte-2);
}
.stand-marke{
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--marke); margin-right:7px;
}
.blatt /* Der Vorspann traegt den Grad des Satzes darueber: Er gehoert zur
   Frage und beantwortet sie im Ansatz — kein Kleingedrucktes. */
.log-vorspann{
  font-family:var(--schrift-lese); font-size:clamp(16px, 1.4vw, 16px);
  line-height:1.55; color:var(--tinte-2); margin:0 0 12px; text-wrap:pretty;
}
/* Die Serie: eng gesetzt und kursiv. Hier spricht etwas anderes — ein
   Ausblick, kein Befund. Die Linie links sagt es ohne Wort. */
.log-serie{
  font-style:italic; font-family:var(--schrift-lese);
  font-size:16px; line-height:1.4; color:var(--tinte-2);
  border-left:1px solid var(--linie-zart);
  padding-left:14px; margin:12px 0 0;
}
.log-serie p{ margin:0 0 4px }
.log-serie p:last-child{ margin:0 }

.log-lang{
  font-size:clamp(16px, 1.4vw, 16px); line-height:1.55;
  margin:0 0 10px; color:var(--tinte-2); text-wrap:pretty;
}
.log-lang:last-child{ margin-bottom:0 }

/* Der Leitsatz: die eine Aussage, die zuerst ankommen soll. */
.blatt .leitsatz-gross{
  font-family:var(--schrift-lese); font-size:clamp(26px, 3.6vw, 32px);
  font-weight:400; line-height:1.22; letter-spacing:-.008em;
  color:var(--tinte); margin:0 0 8px; max-width:32ch; text-wrap:pretty;
}
.blatt .leitsatz-bei{
  font-family:var(--schrift-ui); font-size:clamp(16px, 1.5vw, 16px);
  color:var(--tinte-2); margin:0 0 clamp(20px, 3vh, 34px); max-width:52ch;
}

/* Die sechs Felder: ein Verzeichnis mit Nummern. */
.felder-liste{ list-style:none; margin:0 0 8px; padding:0; counter-reset:feld }
.felder-liste > li{
  counter-increment:feld; position:relative; padding-left:34px;
  margin:0 0 clamp(16px, 2.4vh, 26px);
}
.felder-liste > li::before{
  content:counter(feld); position:absolute; left:0; top:2px;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:14px; color:var(--marke);
}
.felder-liste h3{ margin:0 0 2px }
.feld-marke{
  margin:0 0 5px; font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.02em; color:var(--marke);
}

/* --- Projektseite ---------------------------------------------
   Eine eigene Seite je Vorhaben: Marken, Titel, Untertitel, Stand —
   dann der Text. Dieselbe Sprache wie im Blog, nur ausfuehrlich.
---------------------------------------------------------------- */
.projekt-marken{
  display:flex; flex-wrap:wrap; gap:3px 12px; margin:22px 0 6px;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:14px;
  letter-spacing:.02em; color:var(--marke);
}
.projekt-unter{
  font-family:var(--schrift-ui); font-size:clamp(16px, 1.6vw, 20px);
  font-weight:400; color:var(--tinte-2); margin:0 0 10px; text-wrap:pretty;
}
/* Der Stand steht am Anfang, nicht am Ende: Er sagt, wie belastbar das
   Folgende ist. */
.projekt-stand{
  font-family:var(--schrift-ui); font-size:16px; color:var(--tinte-2);
  border-left:1px solid var(--kontur); padding-left:14px; margin:0 0 26px;
}
.projekt-stand .stand-marke{
  display:block; font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marke);
}

/* Die drei Aufgaben: gezaehlt, weil sie eine Zahl haben — ein
   Vorleseprogramm sagt dann, wie viele kommen. */
.aufgaben{ list-style:none; margin:0 0 18px; padding:0; counter-reset:aufgabe }
.aufgaben li{
  counter-increment:aufgabe; position:relative; padding-left:34px;
  margin:0 0 16px; color:var(--tinte-2); text-wrap:pretty;
}
.aufgaben li::after{
  content:counter(aufgabe); position:absolute; left:0; top:1px;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums; font-size:14px;
  color:var(--marke);
}
.aufgabe-titel{
  display:block; font-family:var(--schrift-ui); font-size:16px;
  font-weight:500; color:var(--tinte); margin:0 0 3px;
}

/* Quellen: der Titel traegt den Link, nicht die Adresse. „arxiv.org/abs/
   2406.00799" ist kein Linktext — beim Vorlesen eine Ziffernkette. */
.quellen{ list-style:none; margin:0 0 18px; padding:0 }
.quellen li{ margin:0 0 14px; padding-left:16px; position:relative }
.quellen li::before{
  content:''; position:absolute; left:0; top:.62em; width:6px; height:1px;
  background:var(--kontur);
}
.quellen a{
  font-family:var(--schrift-ui); font-size:16px; color:var(--akzent);
  text-decoration:none; text-wrap:pretty;
}
.quellen a:hover{ text-decoration:underline; text-underline-offset:4px }
.quellen a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
.quelle-wo{
  display:block; font-family:var(--schrift-ui); font-size:14px;
  color:var(--marke); margin-top:1px;
}

/* Mehrere Stationen eines Stands: als Liste, damit ein Vorleseprogramm
   ansagt, wie viele kommen. Im Ton der Standzeile, also leiser als der
   Text darueber. */
.blatt .standliste{
  list-style:none; margin:2px 0 0; padding:0;
  font-family:var(--schrift-ui); font-size:14px; color:var(--marke);
}
.blatt .standliste li{ margin:0 0 2px; padding-left:14px; position:relative }
.blatt .standliste li::before{ content:'·'; position:absolute; left:2px }

/* Das Inhaltsverzeichnis der Blogseite: Datum, Titel, ein Satz. Es
   steht ueber der Liste, damit man sieht, was kommt, bevor man liest —
   und ist eine echte Liste mit Sprungmarken, also ohne JavaScript
   bedienbar und fuer Vorleseprogramme zaehlbar.
   Zwei Spalten, wo Platz ist: Sechs Titel untereinander waeren selbst
   schon eine Seite. */
.inhaltsvz{
  margin:0 0 clamp(30px, 5vh, 54px);
  padding-top:clamp(20px, 3.4vh, 34px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6' viewBox='0 0 240 6'%3E%3Cpath d='M1 3.4 C 22 2.1, 39 4.2, 58 3.1 C 78 1.9, 96 4.4, 117 3.3 C 137 2.2, 154 4.1, 174 2.9 C 194 1.8, 214 3.9, 239 2.6' fill='none' stroke='%230F505C' stroke-width='1.1' stroke-linecap='round' opacity='.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:left top; background-size:240px 6px;
}
.ivz-marke{
  font-family:var(--schrift-ui); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--marke);
  margin:0 0 10px;
}
.ivz-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px clamp(20px, 3vw, 40px);
  }
.ivz-liste li{ margin:0; padding-left:36px; position:relative }
/* Das Zeichen statt der Ziffer: Es sagt, was fuer ein Ding kommt. Wo
   keines vorliegt, bleibt der Platz leer — eine Ziffer daneben waere
   eine zweite Markierung fuer dieselbe Position. */
.ivz-zeichen{
  position:absolute; left:0; top:0;
  width:26px; height:26px; color:var(--marke); opacity:.75;
}
.ivz-zeichen svg{ width:100%; height:100% }
.ivz-liste li:hover .ivz-zeichen{ opacity:1; color:var(--akzent) }
.ivz-liste a{
  display:block; font-family:var(--schrift-ui); font-size:14px;
  font-weight:500; color:var(--tinte); text-decoration:none;
  line-height:1.35;
}
.ivz-liste a:hover{ color:var(--akzent); text-decoration:underline }
/* Ein Verzeichnis aus reinen Titeln braucht keine zwei Spalten so
   breit wie auf der Blogseite — dort tragen die Eintraege noch einen
   Satz. */
.ivz-schmal{
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:7px clamp(20px, 3vw, 40px);
  counter-reset:ivz;
}
.ivz-schmal li{ counter-increment:ivz; padding-left:26px }
.ivz-schmal li::before{
  content:counter(ivz, decimal-leading-zero);
  position:absolute; left:0; top:.2em;
  font-family:var(--schrift-ui); font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--marke);
}
/* Die Sprungziele sollen nicht am Fensterrand kleben. */
.blatt h2{ scroll-margin-top:22px }

.ivz-satz{
  display:block; font-size:14px; color:var(--marke);
  line-height:1.4; margin-top:1px;
}
/* Das Sprungziel soll nicht am Fensterrand kleben. */
.logbuch-liste > li{ scroll-margin-top:22px }

/* Der Weg vom Blogeintrag zur Projektseite: ein Satz, der sagt, was
   dort steht — nicht „mehr lesen". */
.projekt-weg{
  display:inline-block; font-family:var(--schrift-ui); font-size:16px;
}
.projekt-weg:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
.log-titel a{ color:inherit; text-decoration:none }
.log-titel a:hover{ color:var(--akzent) }
.log-titel a:focus-visible{ outline:2px solid var(--fokus); outline-offset:3px }
.feld-vorhaben{
  font-family:var(--schrift-ui); font-size:16px; color:var(--marke); margin:4px 0 0;
}
.feld-vorhaben a{ color:var(--akzent); text-decoration:none }
.feld-vorhaben a:hover{ text-decoration:underline; text-underline-offset:4px }

/* --- Schmale Fenster ------------------------------------------
   Die Randglosse braucht Rand; unter dieser Breite steht der Satz
   schon im Eintrag selbst. Ein Kasten ueber dem Text waere die
   Fehlerklasse, die wir dreimal korrigiert haben.
---------------------------------------------------------------- */
@media (max-width: 900px){
  .huelle{ padding:20px 16px 0 }
  .hauptwege{ gap:clamp(14px, 4vw, 26px) }
  .log-eintrag{ grid-template-columns:1fr; gap:6px }
  .log-zeichen{ width:24px; height:24px }
  .felder-liste{ gap:18px }
}
@media (max-width: 560px){
  .hauptwege{ font-size:16px }
  .blatt .leitsatz-gross{ font-size:26px }
}

/* Verzeichnis der Vorhaben auf der Forschungsseite: Name, Gedankenstrich,
   ein Satz. Keine Nummern — die Reihenfolge sagt nichts. */
.vorhaben-liste{ list-style:none; margin:0 0 8px; padding:0 }
.vorhaben-liste > li{
  margin:0 0 clamp(10px, 1.6vh, 16px); padding-left:16px; position:relative;
  color:var(--tinte-2);
}
.vorhaben-liste > li::before{
  content:'·'; position:absolute; left:0; color:var(--marke);
}
.vorhaben-liste a{ font-weight:500 }

/* Zwei Sprachfassungen einer Datei: untereinander, damit die Wahl
   sichtbar ist statt in einer Zeile zu verschwimmen. */
.log-dateien{
  display:flex; flex-direction:column; gap:4px;
  margin:0 0 12px; font-family:var(--schrift-ui); font-size:16px;
}
/* Die Unterzeile eines Arbeitspapiers: der zweite Teil des Titels,
   nicht ein erster Satz. */
.blatt .unterzeile{
  font-family:var(--schrift-lese); font-size:clamp(16px, 1.7vw, 20px);
  font-style:italic; color:var(--tinte-2); margin:0 0 22px;
}

/* --- Der Papier-Satz: Arbeitspapiere ---------------------------
   Ein Arbeitspapier ist kein Blogbeitrag. Was es dazu macht, ist
   nicht Schmuck, sondern APPARAT: nummerierte Abschnitte, gezaehlte
   Absaetze im Rand, ein Zitierhinweis. Damit ist der Text zitierbar
   — man kann „Abschnitt 3, Absatz 12" sagen statt „etwa in der Mitte".
---------------------------------------------------------------- */
.papier{ counter-reset:teil absatz }

/* Nummerierte Abschnitte. Die Ziffer haengt links im Rand, damit die
   Ueberschrift selbst an der Textkante bleibt — sonst waere die
   Fluchtlinie der Seite gebrochen. */
.blatt .papier h2:not(.apparat){
  counter-increment:teil; position:relative;
}
.blatt .papier h2:not(.apparat)::before{
  content:counter(teil);
  position:absolute; left:-58px; top:0; width:30px; text-align:right;
  font-family:var(--schrift-ui); font-weight:400; color:var(--marke);
}
/* Apparat-Abschnitte tragen keine Nummer: Sie gehoeren nicht zur
   Argumentlinie, sondern sprechen ueber sie. */
.blatt .papier h2.apparat{
  border-top:1px solid var(--linie-zart); padding-top:22px; margin-top:44px;
}

/* Gezaehlte Absaetze. Die Ziffer steht im Rand, der Text ruecht dafuer
   ein — dieselbe Bauweise wie in kritischen Ausgaben. */
.blatt .papier > p:not(.unterzeile):not(.projekt-marken):not(.log-dateien){
  counter-increment:absatz; position:relative;
}
.blatt .papier > p:not(.unterzeile):not(.projekt-marken):not(.log-dateien)::after{
  content:counter(absatz);
  position:absolute; left:-58px; top:.28em; width:30px; text-align:right;
  font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.02em; color:var(--marke);
}

/* Klassischer Satz: kein Abstand zwischen Absaetzen, dafuer ein
   Erstzeileneinzug. Nach einer Ueberschrift kein Einzug — dort ist der
   Anfang schon markiert. Blocksatz mit Silbentrennung; die Sprache
   steht am <html>, die Trennung greift also. */
.blatt .papier > p:not(.unterzeile):not(.projekt-marken):not(.log-dateien){
  margin:0; text-indent:1.6em; text-align:justify; text-align-last:left;
  hyphens:auto;
}
.blatt .papier > h1 + p:not(.unterzeile):not(.projekt-marken):not(.log-dateien),
.blatt .papier > h2 + p:not(.unterzeile):not(.projekt-marken):not(.log-dateien),
.blatt .papier > h3 + p:not(.unterzeile):not(.projekt-marken):not(.log-dateien),
.blatt .papier > .unterzeile + p:not(.unterzeile):not(.projekt-marken):not(.log-dateien){
  text-indent:0;
}
/* Der letzte Absatz vor einer Ueberschrift braucht Luft. */
.blatt .papier > p:not(.unterzeile):not(.projekt-marken):not(.log-dateien) + h2{ margin-top:38px }

/* Namen in Kapitaelchen: die Konvention wissenschaftlicher Prosa. */
.blatt .name{ font-variant-caps:all-small-caps; letter-spacing:.06em }

/* Der Zitierhinweis. Ein Text, der zitiert werden will, sagt wie. */
.zitieren{
  margin:34px 0 0; padding:16px 0 0; border-top:1px solid var(--kontur);
}
.zitieren .marke{
  display:block; font-family:var(--schrift-ui);
  font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marke); margin:0 0 6px;
}
.blatt .zitieren p{
  margin:0; font-family:var(--schrift-ui); font-size:16px;
  line-height:1.5; text-indent:0; text-align:left;
}

/* Ohne Rand kein Zaehlrand: Unter 900 Pixeln steht der Text vorn und
   die Ziffern entfallen. Eine Ziffer, die im Text liegt, waere
   schlechter als keine. */
@media (min-width: 900px){
  .blatt .papier{ padding-left:58px }
}
@media (max-width: 899px){
  .blatt .papier h2:not(.apparat)::before,
  .blatt .papier > p:not(.unterzeile):not(.projekt-marken):not(.log-dateien)::after{ display:none }
}

/* ============================================================
   Bild / Grafik (redaktionell einfuegbar, .abbildung)
   Responsiv, im warmen Papier-Look wie die Demo-Vorschau.
   ============================================================ */
.blatt .abbildung{ margin:0 0 22px }
.abbildung img{
  display:block; width:100%; height:auto; margin:0;
  border-radius:16px;
  border:1px solid rgba(24,34,52,.10);
  box-shadow:
    0 22px 44px -20px rgba(24,34,52,.45),
    0 8px 18px -14px rgba(15,80,92,.35);
}
.abbildung figcaption{
  display:block; margin-top:10px;
  font-family:var(--schrift-ui); font-size:14px;
  line-height:1.45; color:var(--marke);
}