/* ===========================================================================
   ANKYR — Bauform B (Laborbuch)
   Ergänzt styles.css, ersetzt es nicht. Farben, Schriften und Kontraste
   bleiben unverändert; hier steht nur, wie die Seite aufgeteilt ist.

   Drei Breiten mit gemeinsamer linker Kante:
     .kapitel.schmal    640 px  — die Lesespalte
     .kapitel.weit     1240 px  — Aufzählungen, Raster, Bilder
     .kopfbild                  — randlos über den ganzen Bildschirm
   Entscheidend ist die gemeinsame linke Kante. Der Breitenwechsel wirkt
   dadurch gesetzt und nicht zufällig — vorher hatte die Seite genau eine
   Breite (1120 px), und genau das ließ sie nach Baukasten aussehen.
   =========================================================================== */
:root{
  --kante:clamp(1.2rem,6vw,5rem);
  --weit:1240px;
  --schmal:640px;
  --rinne:clamp(1.1rem,3vw,2.4rem);
}

/* ---------------------------------------------------------------- Kopfzeile
   Sie erbte aus styles.css noch die alte Breite von 1120 px, waehrend die
   Bauform mit 1240 rechnet. Ergebnis waren drei verschiedene linke Kanten:
   Wortmarke 221 px, Kapitelstrich 209 px, Fliesstext 247 px. Jetzt eine. */
/* Nachtrag 26.08.: Die Wortmarke stand schon auf der Kante des Kapitels
   (202 px), der Fliesstext aber 39 px weiter rechts - das ist die Rinne,
   also die Polsterung hinter dem senkrechten Strich. Damit Wortmarke und
   Text eine Kante haben, muss die Kopfzeile die Rinne mitrechnen. */
.kopf-innen{max-width:var(--weit);
  padding-left:calc(var(--kante) + var(--rinne));padding-right:var(--kante)}

/* ---------------------------------------------------------------- Kapitel */
.kapitel{max-width:var(--weit);margin:0 auto;padding:clamp(2.6rem,6vw,5rem) var(--kante)}
.kapitel+.kapitel{padding-top:0}
.kapitel .rinne{position:relative;padding-left:var(--rinne);border-left:1px solid var(--line-fest)}
/* Der kurze kräftige Anschlag oben am Strich markiert den Kapitelanfang.
   Er ersetzt den Kasten: Ein Rahmen war vorher nur nötig, weil sonst nichts
   den Abschnitt zusammenhielt. */
.kapitel .rinne::before{content:'';position:absolute;left:-1px;top:0;width:3px;height:3.4rem;
  background:var(--coral)}
.kapitel.schmal .rinne>*{max-width:var(--schmal)}

.marke-kapitel{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1.2rem;display:flex;align-items:baseline;gap:.7rem;
  color:var(--coral-tief)}
.marke-kapitel .nr{color:var(--teal-lt);letter-spacing:.1em}   /* 9,44:1 statt 3,20:1 */
.marke-kapitel .strich{flex:1;height:1px;background:var(--line);max-width:7rem}

.kapitel h2{margin-bottom:1.15rem;max-width:22ch}
.kapitel.weit h2{max-width:26ch}
.lauf{font-size:clamp(1.1rem,2vw,1.26rem);line-height:1.62;margin:0 0 1.1rem;color:var(--ink)}
.dazu{color:var(--ink-soft);max-width:64ch;margin:1.6rem 0 0}
.weiter{margin:1.3rem 0 0}
.weiter a{font-weight:600}

/* ------------------------------------------------- Die Beispielsätze
   Nummeriert, nur Trennlinien. Kein Kasten, kein Zebrastreifen: Für Augen,
   die schlecht sehen, ist eine ruhige Zeile leichter zu verfolgen. */
.saetze{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr}
.saetze li{padding:1.4rem 0;border-top:1px solid var(--line)}
.saetze li:last-child{border-bottom:1px solid var(--line)}
.saetze .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--teal-lt);
  display:block;margin-bottom:.5rem}
.saetze p{margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.2rem,2.5vw,1.7rem);line-height:1.3;max-width:24ch}
@media (min-width:900px){
  .saetze{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,4.5rem)}
  .saetze li:nth-last-child(2){border-bottom:1px solid var(--line)}
}

/* ------------------------------------------------- Stufen an je einer Linie */
.stufen{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:2.4rem}
.stufe{border-top:2px solid var(--coral);padding-top:1rem}
.stufe .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--coral-tief);
  display:block;margin-bottom:.5rem}
.stufe h3{margin:0 0 .4rem;font-size:1.3rem}
.stufe p{margin:0;color:var(--ink-soft);max-width:34ch}
@media (min-width:820px){ .stufen{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.4rem)} }

/* ------------------------------------------------- Bild ohne Rahmen
   „Zu präsent, eingerahmt" war die Rückmeldung. Kein Rahmen, kein Schatten:
   die Kanten laufen in den Sandton aus, das Bild liegt nicht auf der Seite,
   es ist ein Teil von ihr. */
.randlos{margin:0 0 1.8rem;max-width:460px}
.randlos img{width:100%;border:0;border-radius:0;
  /* Die Ellipse muss KLEINER sein als der Bildkasten, sonst liegt der weiche
     Teil des Verlaufs ausserhalb und die Kanten bleiben hart. */
  -webkit-mask-image:radial-gradient(62% 66% at 42% 46%, #000 38%, transparent 94%);
          mask-image:radial-gradient(62% 66% at 42% 46%, #000 38%, transparent 94%)}
.randlos figcaption{margin-top:.5rem;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.04em;color:var(--teal-lt);max-width:44ch}
@media (min-width:900px){
  .kapitel.weit .rinne:has(.randlos){display:grid;grid-template-columns:460px 1fr;
    column-gap:clamp(2rem,4vw,3.4rem);align-items:start}
  .kapitel.weit .rinne:has(.randlos)>.marke-kapitel{grid-column:1 / -1}
  .randlos{margin-bottom:0}
}

/* ---------------------------------------------------------------- Kopfbereich
   Randlos, links verankert, Grafik rechts daneben statt hinter dem Text. */
.kopfbild{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.kopfbild .hero-grafik{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Das Zeichen liegt hinter der Schrift, nicht daneben — Mike: „bitte nicht
   separat stellen". Blasser und nach rechts gerueckt, damit es das Zeilenende
   unterlegt und die leere rechte Flaeche mitnimmt, statt quer durch die
   Ueberschrift zu laufen. */
.kopfbild .hero-grafik{opacity:.42}
.kopfbild .hero-grafik svg{position:absolute;height:158%;width:auto;left:34%;right:auto;top:-30%}
.kopfbild-innen{max-width:var(--weit);margin:0 auto;padding:clamp(3.4rem,9vw,7rem) var(--kante);
  min-height:clamp(320px,34vw,440px);display:flex;flex-direction:column;justify-content:center}
/* Der zweite Teil der Überschrift darf nicht mitten im Wort umbrechen.
   Steht hier und nicht als style-Attribut, damit die Sicherheitsregel in
   _headers ohne 'unsafe-inline' für Stile auskommt. */
/* Fassung C, entschieden am 24.08.
   Vorher: 80 px, dreizeilig, Verhaeltnis Ueberschrift zu Text 6,7 — der
   hoechste Wert im Vergleichsfeld (Anthropic 5,2, Linear 4,0). Mike: „zu
   aufdringlich". Die drei Zeilen kamen nicht von der Groesse, sondern von
   `max-width:12ch`: Bei 80 px ist der Satz nur 788 px breit, die Spalte
   bietet 1080. Der Deckel arbeitete gegen den Satz.
   An der echten Schrift gemessen gilt: Breite = Schriftgroesse x 9,84.
   4,8vw statt 5,2vw, damit auch die laengste Ueberschrift der Seite
   („Eine Ergaenzung, kein Ersatz.") nicht auf Kante steht. */
.kopfbild h1{font-size:clamp(2.1rem,4.8vw,3.25rem);max-width:none;letter-spacing:-.025em;line-height:1.06}
.kopfbild h1 .gold{white-space:nowrap}
.kopfbild .lead{font-size:clamp(1.06rem,1.5vw,1.18rem);max-width:34ch}
.stand{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-lt);margin:0 0 1.6rem;display:flex;align-items:center;gap:.6rem}
.stand::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 0 4px rgba(196,99,59,.18)}

/* „Über mich" ist die eine Seite, auf der Mike erscheinen soll — und nur dort. */
.kopfbild.mit-portraet .kopfbild-innen{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.kopf-portraet img{width:100%;max-width:300px;border-radius:0;border:0;
  -webkit-mask-image:radial-gradient(58% 62% at 50% 40%, #000 40%, transparent 92%);
          mask-image:radial-gradient(58% 62% at 50% 40%, #000 40%, transparent 92%)}
@media (min-width:820px){
  .kopfbild.mit-portraet .kopfbild-innen{grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4rem)}
}

/* ---------------------------------------------------------------- Messwerte
   Die Zahl steht vor dem Titel und ist das Groesste im Eintrag: Wer die Liste
   ueberfliegt, sieht zuerst das Ergebnis, nicht die Ueberschrift. „Faellt"
   wird nicht rot markiert — es ist kein Fehler, sondern ein Messwert. Der
   Unterschied liegt in der Linie, nicht in der Farbe. Ueber die Flaeche
   entscheidet Mike, wenn die Zahlen stehen. */
.messliste{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
.mess{padding:1.5rem 0 1.5rem 1.1rem;border-top:1px solid var(--line);border-left:3px solid transparent}
.mess:last-child{border-bottom:1px solid var(--line)}
.mess.haelt{border-left-color:var(--coral)}
.mess.faellt{border-left-color:var(--ink-faint)}
.mess-zahl{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1;margin:0 0 .45rem;color:var(--ink)}
.mess h3{font-size:1.12rem;margin:0 0 .4rem}
.mess-detail{margin:0 0 .6rem;color:var(--teal-lt);max-width:60ch;font-size:.98rem}
 /* ink-faint hat 3,20:1 auf Sand. In styles.css steht woertlich: „keine
    Schriftfarbe. Linien, Punkte." Ich hatte es hier trotzdem als Schrift
    benutzt — gemessen 3,20 statt der geforderten 7,0. teal-lt liefert 9,44. */
.mess-marke{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-lt)}
.mess.faellt .mess-marke{color:var(--coral-tief)}
@media (min-width:900px){
  .messliste{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.4rem)}
  .mess:nth-last-child(2){border-bottom:1px solid var(--line)}
}
.offen-titel{margin:2.6rem 0 .8rem;font-size:1.15rem}
.offenliste{margin:0;padding-left:1.1rem;max-width:66ch}
.offenliste li{margin:0 0 .6rem;color:var(--teal-lt);font-size:.98rem}
.offenliste b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- Hinweis
   Bleibt hervorgehoben, aber als durchgehender Strich statt als Kasten. */
.hinweis-kapitel .rinne{border-left-color:var(--coral)}
.hinweis-kapitel .rinne::before{height:100%}
.hinweis-kapitel p{color:var(--ink-soft);font-size:.99rem;max-width:66ch;margin:0 0 .8rem}
.hinweis-kapitel .krise{max-width:660px}

/* ---------------------------------------------------------------- Rechtsseite */
.kapitel .legal{padding:0;margin:0;max-width:none}
.kapitel .legal>*{max-width:72ch}

/* ---------------------------------------------------------------- Fuß */
.fuss-raster{max-width:var(--weit);padding-left:var(--kante);padding-right:var(--kante)}
.copy{max-width:var(--weit);padding-left:var(--kante);padding-right:var(--kante)}
.fuss .klein{font-size:.78rem;color:var(--teal-lt);max-width:44ch;margin-top:.7rem;line-height:1.55}

/* ---------------------------------------------------------------- Farbe
   Die Akzentfarbe traegt nur Hervorhebungen: die Kapitelnummer und ihr
   Name, der zweite Teil der Ueberschrift, Verweise, der Strich am Rand.
   Fliesstext steht immer in --ink auf --bg: 14,28:1. Nichts am Text wird
   auf- oder abgeblendet - er ist von der ersten Sekunde an vollstaendig
   lesbar. Die wortweise Aufdeckung, die hier stand, ist am 24.08. wieder
   entfernt worden: Sie hat den Text unleserlich gemacht.
   -------------------------------------------------------------------- */
.lauf strong,.lauf b{font-weight:600;color:var(--ink)}
.lauf em{font-style:italic;color:var(--coral-tief)}

@media print{ .kopfbild .hero-grafik{display:none} }

/* ---------------------------------------------------------------- Handy */
@media (max-width:760px){
  .kopfbild .hero-grafik svg{right:-52%;height:100%;top:0}
  .kopfbild .hero-grafik{opacity:.7}
  .kopfbild-innen{min-height:auto;padding-top:clamp(2.6rem,9vw,4rem)}
}
/* Bei 390 px brach die Navigation in zwei Zeilen um und machte die Kopfzeile
   doppelt so hoch. Kleinere Wortmarke, engere Abstände — die 60-px-
   Trefferfläche bleibt unangetastet. */
@media (max-width:560px){
  /* Der Rand muss derselbe sein wie ueberall sonst, sonst steht die
     Wortmarke 7 px neben dem Kapitelstrich. Nur rechts darf es enger sein. */
  /* Auch hier die Rinne mitrechnen - sonst steht die Wortmarke auf
     schmalen Schirmen wieder 19 px neben dem Fliesstext. */
  .kopf-innen{gap:.4rem;padding-left:calc(var(--kante) + var(--rinne));padding-right:.4rem}
  .marke{font-size:1.08rem;gap:.45rem}
  .marke img{width:26px;height:26px}
  .nav a{padding:0 .5rem;font-size:.92rem}
}