/* Blaupause: das Aussehen des Entwurfszweigs.
 *
 * Das hier ist kein Aufsatz auf basis.css, sondern dessen Ersatz. Auf
 * Entwurfsseiten wird nur diese Datei geladen. Der Grund ist, dass sich die
 * beiden Bauweisen an der Wurzel unterscheiden: basis.css setzt auf Fraunces
 * und eine warme Creme-Bronze-Palette, hier gilt Bauzeichnung auf Papier,
 * schmale Grotesk, kuehle Graphit-Toene und keine Serifen. Zwei solche
 * Systeme uebereinanderzulegen ergibt nur ein Ueberschreibungsknaeuel, in dem
 * am Ende niemand mehr weiss, welche Regel gilt.
 *
 * Der Bestand unter /de/ und /en/ bleibt unberuehrt.
 *
 * Stand: 31.08.2026
 *
 * RASTERREGEL: Jeder senkrechte und waagerechte Abstand ist ein Vielfaches
 * von --raster. Keine krummen Werte. Abschnitte 4x oder 6x, Innenabstaende
 * 1x bis 3x. Wer hier 18px schreibt, bricht die Anmutung, bevor jemand
 * sagen kann, warum.
 */

:root {
  color-scheme: light only;
  --papier:        #f4f2ee;
  --papier-hell:   #fbfaf8;
  --graphit:       #1f2124;
  --graphit-weich: #4a4d52;
  --blau:          #2f4858;
  --stahl:         #8d9299;
  --linie:         rgba(31, 33, 36, 0.12);
  --raster:        24px;
}

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

html { scroll-behavior: smooth; background: var(--papier); }
/* Die Papierflaeche, zweilagig.
 *
 * Erst versucht mit einem erzeugten Bild. Das war der falsche Weg: ein
 * Diffusionsmodell glaettet Papier weg und liefert eine fast weisse Flaeche,
 * die auf fast gleichfarbigem Grund unsichtbar bleibt. Papierkorn ist
 * prozedurales Rauschen, also wird es hier auch prozedural erzeugt. Das
 * kachelt sauber, ist schaerfer und wiegt ein paar hundert Byte statt
 * mehrerer Kilobyte.
 *
 * Darueber das Raster aus --raster. Es ist dieselbe Einheit, nach der jeder
 * Abstand auf dieser Seite bemessen ist, und damit die einzige Dekoration,
 * die tatsaechlich etwas ueber den Bau aussagt.
 */
body::before, body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
}
body::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23k%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: 180px 180px;
  opacity: 0.085; mix-blend-mode: multiply; z-index: 0;
}
body::after {
  background-image:
    repeating-linear-gradient(to right,  var(--linie) 0 1px, transparent 1px var(--raster)),
    repeating-linear-gradient(to bottom, var(--linie) 0 1px, transparent 1px var(--raster));
  opacity: 0.20; z-index: 0;
}
/* Der Inhalt liegt ueber beiden Lagen. */
body > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { }

body {
  background: var(--papier);
  color: var(--graphit-weich);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Typografie --------------------------------------------------------
 * Ueberschrift und Fliesstext sind dieselbe Familie. Den Unterschied machen
 * Gewicht und Laufweite, nicht ein zweiter Schriftschnitt. */
h1, h2, h3, h4 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600; color: var(--graphit);
  letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.8vw, 4.4rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
h4 { font-size: 1rem; }

p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--graphit); }
em { font-style: normal; font-weight: 600; color: var(--blau); }
a { color: var(--blau); text-decoration: none;
    border-bottom: 1px solid var(--linie); transition: border-color .2s; }
a:hover { border-bottom-color: var(--blau); }
hr.rule { border: none; height: 1px; background: var(--linie); }

/* Alles Zaehlende, Messende und Beschriftende steht klein, versal und weit
 * gesperrt. Die Anmutung kommt aus Groesse, Sperrung und Farbe, nicht aus
 * einer zweiten Schriftfamilie: eine Monospace liest sich maschinell, und
 * maschinell ist nicht dasselbe wie praezise. Eine Familie fuer die ganze
 * Seite, wie es der Brief ohnehin fuer Ueberschrift und Fliesstext will. */
.eyebrow, .block-nr, .camp-num, .stage-num, .posten-preis, .portraet-rolle,
.dg-dim, .dg-zaehler, .dg-punkte, .dg-schwaeche-dim, .dg-wert,
.dg-feld > span, .footer-links a, .footer-copy, .footer-brand,
.topnav-links a, .lang-btn, .lang-sep, .beleg figcaption, .mono {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stahl);
}
.eyebrow { display: block; margin-bottom: calc(var(--raster) * 0.75); }
.eyebrow-num { color: var(--graphit); margin-right: 0.9em; }

/* --- Geruest ------------------------------------------------------------ */
main { display: block; }
section { position: relative; padding: calc(var(--raster) * 6) 0; }
main > section + section { border-top: 1px solid var(--linie); }
.wrap { max-width: 1128px; margin: 0 auto; padding: 0 calc(var(--raster) * 1.5); }

/* Die senkrechte Grundlinie. Sie faengt im Hero an und laeuft in jedem
 * Abschnitt an derselben x-Position weiter. Auf schmalen Schirmen entfaellt
 * sie, dort gibt es die Spalte nicht, an der sie liegt. */
@media (min-width: 940px) {
  main > section::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
    left: max(calc(var(--raster) * 1.5), calc((100vw - 1128px) / 2 + var(--raster) * 1.5));
    background: var(--linie); pointer-events: none;
  }
  .wrap { padding-left: calc(var(--raster) * 3.5); }
}

.fliesstext { max-width: 62ch; }
.lede, .hero-lede { max-width: 58ch; font-size: 1.12rem; color: var(--graphit);
                    margin-bottom: calc(var(--raster) * 1.25); }
.kopf { margin-bottom: calc(var(--raster) * 2); }
.kopf h1, .kopf h2 { margin-bottom: var(--raster); }
.textblock .fliesstext { margin-bottom: 0; }
.kasten { border-left: 2px solid var(--blau); background: var(--papier-hell);
          padding: calc(var(--raster) * 1.25) calc(var(--raster) * 1.5);
          margin: calc(var(--raster) * 1.5) 0; max-width: 62ch; }
.kasten p { color: var(--graphit); font-weight: 500; }
.stempel { margin-top: calc(var(--raster) * 2); color: var(--stahl);
           font-family: 'Archivo', system-ui, sans-serif;
           font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
           max-width: 52ch; line-height: 1.7; }

/* --- Knoepfe ------------------------------------------------------------ */
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--raster);
            margin-top: calc(var(--raster) * 2); }
.btn {
  display: inline-block; font-family: 'Archivo', system-ui, sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1.2;
  padding: calc(var(--raster) * 0.75) calc(var(--raster) * 1.5);
  background: var(--graphit); color: var(--papier-hell);
  border: 1px solid var(--graphit); border-radius: 2px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.btn:hover { background: var(--blau); border-color: var(--blau); }
/* Der stille Knopf. Er braucht zweierlei: eigenen Grund, damit er ueber
 * dem Hero-Foto lesbar bleibt, und eine dunkle Kante, damit er auf hellem
 * Papier ueberhaupt als Knopf zu erkennen ist. Nur eins von beidem hat
 * jeweils an einer der zwei Stellen versagt. */
.btn-ghost { background: var(--papier-hell); color: var(--graphit);
             border-color: var(--graphit); }
.btn-ghost:hover { background: var(--graphit); color: var(--papier-hell);
                   border-color: var(--graphit); }

/* --- Kopfzeile ---------------------------------------------------------- */
.topnav { position: sticky; top: 0; z-index: 100;
          background: rgba(244, 242, 238, 0.94); backdrop-filter: blur(8px);
          border-bottom: 1px solid var(--linie); }
.topnav-inner { display: flex; align-items: center; gap: var(--raster);
                padding-top: var(--raster); padding-bottom: var(--raster); }
.topnav-brand { font-family: 'Archivo', sans-serif; font-weight: 700;
                font-size: 1rem; letter-spacing: -0.02em; color: var(--graphit);
                border: none; text-transform: none; }
.topnav-rechts { display: flex; align-items: center; gap: calc(var(--raster) * 1.25);
                 margin-left: auto; }
.topnav-links { display: flex; gap: calc(var(--raster) * 1.25); align-items: center; }
.topnav-links a, .lang-btn { font-size: 11px; font-weight: 400;
                             color: var(--graphit-weich); border: none; }
.topnav-links a:hover, .lang-btn:hover { color: var(--blau); }
.lang-btn.active { color: var(--graphit); font-weight: 500; }
.lang-switcher { display: flex; gap: calc(var(--raster) * 0.25); align-items: baseline; }
.lang-sep { color: var(--linie); }
.topnav-cta-wrap .btn { padding: calc(var(--raster) * 0.5) var(--raster); }
.nav-schalter { display: none; }
.nav-klappe-knopf { display: none; }

@media (max-width: 940px) {
  .nav-klappe-knopf { display: inline-block; width: 26px; height: 26px;
                      background: none; border: none; cursor: pointer;
                      position: relative; order: 3; }
  .nav-klappe-knopf::before, .nav-klappe-knopf::after {
    content: ''; position: absolute; left: 1px; width: 24px; height: 1px;
    background: var(--graphit); }
  .nav-klappe-knopf::before { top: 9px; }
  .nav-klappe-knopf::after { top: 17px; }
  .topnav-links { position: absolute; top: 100%; left: 0; right: 0;
                  flex-direction: column; align-items: flex-start;
                  gap: var(--raster); padding: calc(var(--raster) * 1.5);
                  background: var(--papier);
                  border-bottom: 1px solid var(--linie); display: none; }
  .nav-schalter:checked ~ .topnav-links,
  .topnav:has(.nav-schalter:checked) .topnav-links { display: flex; }
  .topnav-cta-wrap { display: none; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding: calc(var(--raster) * 6) 0; }
.hero-kompakt { padding: calc(var(--raster) * 4) 0 calc(var(--raster) * 3); }
/* Das Foto liegt in voller Breite hinter dem Text und klart nach links in
 * die Papierflaeche auf. Der Verlauf ist hier kein Schmuck, sondern das,
 * was die Schrift lesbar haelt: ohne ihn stuende die Ueberschrift auf dem
 * Bild. Er verlaeuft deshalb genau in --papier und in nichts anderes.
 *
 * Das Bild selbst ist stark zurueckgenommen, damit die warme Aufnahme die
 * kuehle Palette nicht sprengt. */
.hero { position: relative; overflow: hidden; padding: 0;
        min-height: min(74vh, 760px); display: flex; align-items: center; }
/* Das hidden-Attribut schlaegt jede Klasse.
 *
 * Die Browservorgabe fuer [hidden] ist display:none, aber sie verliert
 * gegen jede Autorenregel mit gleicher Spezifitaet. Ein Element mit
 * display:grid in der Klasse war deshalb trotz hidden sichtbar: das
 * Arbeitsfenster des Statik-Checks lag am 02.09.2026 dauerhaft ueber der
 * Seite, und die Seite sah aus, als haenge sie. Diese Regel gilt fuer alle
 * Elemente und nimmt der Falle die Grundlage. */
[hidden] { display: none !important; }

.hero-oben { display: contents; }
.hero-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hero-bg picture { display: block; width: 100%; height: 100%; }
/* Das Bild wird nach links durchsichtig, statt von einem deckenden Verlauf
 * ueberdeckt zu werden. Ein deckender Verlauf haette den Papieruntergrund
 * mit zugedeckt, und dann faedet das Foto in eine einfarbige Flaeche aus
 * statt in das Papier. Mit einer Maske bleibt darunter sichtbar, was
 * darunter liegt. */
.hero-bg img { width: 100%; height: 100%; display: block; object-fit: cover;
               object-position: 100% 32%;
               -webkit-mask-image: linear-gradient(90deg,
                 transparent 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.3) 42%,
                 rgba(0,0,0,0.72) 60%, #000 80%);
               mask-image: linear-gradient(90deg,
                 transparent 0%, rgba(0,0,0,0.06) 24%, rgba(0,0,0,0.3) 42%,
                 rgba(0,0,0,0.72) 60%, #000 80%); }
/* Der Hero zentriert seinen Inhalt senkrecht. Was oben an Luft steht, ist
 * also halber Freiraum plus Innenabstand plus der Abstand unter der
 * Grundlinie. Alle drei zusammen ergaben ueber hundert Pixel Leere zwischen
 * Menue und Augenbraue. Innenabstand und Linienabstand auf je eine
 * Rastereinheit, dann sitzt die Marke an der Augenbraue statt daneben. */
/* Der Hero ist ein Flex-Container. Ein .wrap darin nimmt ohne width nicht
 * seine Maximalbreite, sondern schrumpft auf Inhaltsbreite und wird dann von
 * margin:auto zentriert. Genau dadurch sass der Kopf der Unterseiten 224
 * Pixel weiter rechts als jeder Abschnitt darunter. */
.hero .wrap { width: 100%; }
.hero-inner { position: relative; z-index: 2;
              padding-top: calc(var(--raster) * 1.5);
              padding-bottom: calc(var(--raster) * 2); }
/* Breit genug, dass die zwei Knoepfe nebeneinander stehen. Die Lesebreite
 * von Ueberschrift und Vorspann wird darunter einzeln begrenzt, damit sie
 * nicht an der Knopfbreite haengt. */
.hero-text { max-width: 560px; }
.hero h1 { max-width: 14ch; margin-bottom: var(--raster); }
.hero .hero-lede { max-width: 44ch; margin-bottom: calc(var(--raster) * 1.5); }
.hero .hero-cta { margin-top: calc(var(--raster) * 1.5); }
/* Steht eine Merkmalszeile darueber, gehoert der Knopf naeher an sie: die
 * beiden sind eine Einheit, die Zeile beantwortet die Frage vor dem Klick. */
.hero-merkmale + .hero-cta { margin-top: var(--raster); }
.hero-text::before { content: ''; display: block; height: 1px;
                     background: var(--graphit); width: calc(var(--raster) * 2);
                     margin-bottom: var(--raster); }

/* Auf schmalen Schirmen greift der Verlauf nicht: dort deckt das Bild die
 * ganze Breite, und der Text stuende mittendrin. Also Bild unter den Text,
 * wie im Bestand auch. */
/* --- Der Kopfbereich auf dem Telefon -------------------------------------
 *
 * Ueber der Falz steht genau vier Dinge: Augenbraue, Ueberschrift, Bild und
 * die Knoepfe. Der Absatz darunter wandert unter die Falz, damit der erste
 * Eindruck aufgeraeumt ist. Er ist dieselbe Stelle im HTML, nur weiter
 * unten im Fluss, also gibt es ihn nicht zweimal.
 *
 * Gemessen wird in dvh und nicht in vh. vh rechnet mit der Fensterhoehe
 * ohne die ein- und ausfahrenden Browserleisten, und genau deshalb sitzen
 * Knoepfe auf dem einen Geraet richtig und auf dem naechsten unter dem
 * Bildrand. Mit dvh und einem festen Abstand nach unten steht der Knopf auf
 * jedem Geraet gleich weit ueber dem unteren Rand, egal ob iPhone oder
 * Pixel. */
@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column; align-items: stretch;
          min-height: 0; }
  .hero-bg { position: relative; inset: auto; order: 2;
             height: 30dvh; min-height: 200px; max-height: 300px; flex: none; }
  .hero-bg img { object-position: 100% 20%;
                 -webkit-mask-image: none; mask-image: none; }
  .hero-inner { order: 1; padding-top: calc(var(--raster) * 2);
                padding-bottom: 0; }

  /* Die beiden Huellen loesen sich auf, damit Kopfteil, Bild, Knoepfe und
     Nachtrag direkte Kinder des Kopfbereichs werden und sich frei ordnen
     lassen. display:contents nimmt ihnen dabei auch die Innenabstaende,
     deshalb bekommen die Kinder sie selbst. */
  /* Der obere Block ist genau eine Bildschirmhoehe hoch. Was danach kommt,
     liegt ausserhalb und kann ihn nicht mehr auseinanderdruecken. */
  .hero .hero-oben { display: flex; flex-direction: column;
               min-height: calc(100dvh - var(--kopfzeile, 64px)); }
  .hero .hero-inner,
  .hero .hero-text { display: contents; }
  .hero .hero-kopfteil,
  .hero .hero-handlung {
    max-width: 1128px; width: 100%; margin: 0 auto;
    padding-left: calc(var(--raster) * 1.5);
    padding-right: calc(var(--raster) * 1.5); }

  .hero { min-height: 0; }
  /* Weniger Luft ueber der Augenbraue. Der Rasterabstand von zwei Einheiten
     sah auf dem Telefon wie ein Fehler aus, weil darueber schon die
     Kopfzeile mit eigener Hoehe steht. */
  .hero .hero-kopfteil { order: 1; flex: 0 0 auto;
                   padding-top: calc(var(--raster) * 0.75); }
  .hero-kompakt { padding-top: 0; padding-bottom: 0; min-height: 0; }
  /* Das Bild nimmt genau den Platz, der zwischen Ueberschrift und Knoepfen
     uebrig bleibt. Auf einem langen Geraet wird es hoeher, auf einem
     kurzen niedriger, und der Abstand der Knoepfe zum unteren Rand bleibt
     auf jedem Geraet derselbe. */
  /* Das Schluesselbild steht zwischen Ueberschrift und Knoepfen und nimmt
     allen Platz, der uebrig bleibt. Es ist damit das groesste Element ueber
     der Falz, und die Knoepfe stehen darunter, nicht darueber. */
  /* flex-basis 0, nicht auto: mit auto zieht das Bild seine eigene Hoehe
     als Ausgangswert heran und waechst ueber die Falz hinaus. Mit 0 nimmt
     es genau den Platz, der nach Ueberschrift und Knoepfen uebrig ist. */
  .hero .hero-bg { order: 2; flex: 1 1 0; height: auto;
             min-height: 160px; max-height: none;
             position: relative; inset: auto; z-index: 0; }
  .hero .hero-bg img, .hero .hero-bg picture {
    width: 100%; height: 100%; object-fit: contain; object-position: center; }
  /* Das freigestellte Foto laeuft nicht im Fluss mit, sondern liegt als
     Ebene hinter allem. Nur so kann es gross sein, ohne Ueberschrift oder
     Knoepfe zu verschieben, und ueberdecken kann es nichts, weil Text und
     Knoepfe darueber liegen. */
  .hero .hero-bg-frei { position: absolute; inset: 0; flex: none;
                        min-height: 0; z-index: 0; pointer-events: none; }
  /* Die Regel muss genauer sein als .hero .hero-bg img darueber, sonst
     zieht das Bild wieder auf volle Breite und laeuft rechts aus dem
     Schirm. */
  .hero .hero-bg-frei img, .hero .hero-bg-frei picture {
    width: 76%; margin-left: 24%; height: 76%; margin-top: 24%;
    object-fit: contain; object-position: right bottom;
    /* Nach unten ausblenden, damit Knoepfe und der Satz darunter auf
       Papier stehen und nicht auf dem Hemd. */
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 92%); }
  /* Ohne mitlaufendes Bild braucht die Handlung den freien Platz, damit
     sie am unteren Rand steht. */
  .hero:has(.hero-bg-frei) .hero-handlung { margin-top: auto; }
  .hero .hero-kopfteil, .hero .hero-handlung { position: relative; z-index: 2; }
  .hero .hero-handlung { order: 3; flex: 0 0 auto;
                   padding-top: calc(var(--raster) * 1.25);
                   padding-bottom: calc(var(--raster) * 1.5); }
  /* Die Ueberschrift darf auf schmalen Schirmen etwas kleiner sein, damit
     Bild und Knoepfe zuverlaessig in dieselbe Bildschirmhoehe passen. */
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.75rem); }
  .hero-nachsatz { margin-top: calc(var(--raster) * 0.75); font-size: .9rem; }
  /* Ohne eigene Ordnungszahl stuende der Nachtrag vor allem anderen: die
     Geschwister tragen 1 und 2, die Vorgabe ist 0. */
  .hero-nachtrag { order: 3;
                   padding-top: calc(var(--raster) * 2);
                   padding-bottom: calc(var(--raster) * 2); }
  .hero .hero-lede { max-width: none; margin-bottom: var(--raster); }
  .hero-nachsatz { max-width: none; }
  .hero-text::before { display: none; }
  .hero .hero-kopfteil::before { content: ''; display: block; height: 1px;
    width: 48px; background: var(--graphit);
    margin-bottom: calc(var(--raster) * 1.5); }
}

/* Der Nachtrag steht auf breiten Schirmen wieder da, wo er immer stand:
   direkt unter der Ueberschrift und ueber den Knoepfen. */
@media (min-width: 861px) {
  /* Auf breiten Schirmen steht der Nachtrag wieder zwischen Ueberschrift
     und Knoepfen in derselben Spalte.
     Wichtig ist die Richtung: mit dem alten align-items:center und zwei
     Kindern wurde aus dem Kopfbereich eine Zweispalter, und der Absatz
     landete rechts ueber dem Bild. Untereinander und senkrecht zentriert
     ist das, was vorher schon galt, als es nur ein Kind gab. */
  .hero { display: flex; flex-direction: column; justify-content: center;
          align-items: stretch; }
  /* Die drei Huellen loesen sich auch hier auf, damit der Absatz wieder
     zwischen Ueberschrift und Knoepfen steht und nicht darunter. Die
     Innenabstaende der Huelle uebernehmen die Kinder. */
  .hero .hero-oben, .hero .hero-inner, .hero .hero-text { display: contents; }
  .hero .hero-kopfteil, .hero .hero-nachtrag, .hero .hero-handlung {
    position: relative; z-index: 2;
    width: 100%; max-width: 1128px; margin-left: auto; margin-right: auto;
    padding-left: calc(var(--raster) * 1.5);
    padding-right: calc(var(--raster) * 1.5); }
  .hero .hero-kopfteil > *, .hero .hero-nachtrag > *,
  .hero .hero-handlung > * { max-width: 560px; }
  .hero .hero-kopfteil { order: 1; }
  .hero .hero-nachtrag { order: 2; padding-top: var(--raster); }
  .hero .hero-handlung { order: 3; padding-top: calc(var(--raster) * 0.5); }
  .hero .hero-nachtrag .hero-lede { max-width: 44ch; }
}

/* Der kompakte Hero der Unterseiten traegt kein Bild und braucht deshalb
 * weder Mindesthoehe noch Verlauf. */
.hero-kompakt { min-height: 0; display: block;
                padding: calc(var(--raster) * 4) 0 calc(var(--raster) * 3); }

/* --- 01 Nummerierte Bloecke --------------------------------------------- */
/* Nummerierte Zeilen statt Fliesstext. Links die Mono-Nummer, rechts die
 * Szene, oben je eine feine Linie. Der Baustein, der den Rhythmus bricht. */
.bloecke { margin-top: calc(var(--raster) * 2); }
.block { display: grid; grid-template-columns: calc(var(--raster) * 3) 1fr;
         gap: var(--raster); padding: calc(var(--raster) * 1.5) 0;
         border-top: 1px solid var(--linie); }
.block:last-child { border-bottom: 1px solid var(--linie); }
.block-nr { padding-top: 0.4em; }
.block-text { max-width: 58ch; }
.block-text strong { color: var(--graphit); }
@media (max-width: 720px) {
  .block { grid-template-columns: 1fr; gap: calc(var(--raster) * 0.5); }
  .block-nr { padding-top: 0; }
}

/* --- 02 Ja-Nein-Zweispalte ---------------------------------------------- */
/* Gleiche Hoehe, senkrechte Trennlinie, keine Haekchen, keine Kreuze. Der
 * Unterschied zwischen den Spalten ist die Ueberschrift, sonst nichts. */
.janein { display: grid; grid-template-columns: 1fr 1px 1fr;
          gap: calc(var(--raster) * 2); margin-top: calc(var(--raster) * 2); }
.janein-linie { background: var(--linie); }
.janein-spalte h3 { margin-bottom: var(--raster);
                    padding-bottom: calc(var(--raster) * 0.75);
                    border-bottom: 1px solid var(--linie); }
.janein-spalte ul { list-style: none; }
.janein-spalte li { padding: calc(var(--raster) * 0.75) 0;
                    border-bottom: 1px solid var(--linie); }
.janein-spalte li:last-child { border-bottom: none; }
.janein-nein h3 { color: var(--stahl); }
/* Der Nachsatz gehoert zu beiden Spalten und darf sich deshalb nicht an die
 * linke anlehnen. Eigener Abstand, eigene Lesebreite. */
.janein-nach { margin-top: calc(var(--raster) * 2);
               padding-top: calc(var(--raster) * 1.5);
               border-top: 1px solid var(--linie); }
@media (max-width: 800px) {
  .janein { grid-template-columns: 1fr; gap: calc(var(--raster) * 1.5); }
  .janein-linie { height: 1px; }
}

/* --- 03 Systemnachweis --------------------------------------------------- */
/* Zwei Portraets mit Name und Rolle in Mono, daneben Belege des gebauten
 * Systems. Streng begrenzt: Beleg, keine Galerie. */
.nachweis { display: grid; gap: calc(var(--raster) * 2);
            margin-top: calc(var(--raster) * 2); }
@media (min-width: 940px) {
  .nachweis { grid-template-columns: 5fr 1px 7fr; }
  .nachweis::after { content: ''; grid-column: 2; background: var(--linie); }
  .portraets { grid-column: 1; }
  .belege { grid-column: 3; }
}
.portraets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster);
             align-content: start; }
/* Portraets und Belege stehen in ihrer eigenen Farbe, wie das Headerbild
 * auch. Ein Filter darauf haette sie zu Gestaltungselementen gemacht, und
 * sie sind Nachweis. */
.portraet img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5;
                object-fit: cover; border: 1px solid var(--linie);
                border-radius: 2px; }
.portraet-name { display: block; margin-top: calc(var(--raster) * 0.5);
                 color: var(--graphit); font-weight: 600; font-size: .95rem; }
.portraet-rolle { display: block; text-transform: none; letter-spacing: 0.05em;
                  font-size: 11px; margin-top: 2px; }
.belege { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raster);
          align-content: start; }
.beleg img { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16;
             object-fit: cover; object-position: top;
             border: 1px solid var(--linie); border-radius: 2px; }
.beleg figcaption { margin-top: calc(var(--raster) * 0.5); font-size: 10px;
                    letter-spacing: 0.1em; line-height: 1.5; }
@media (max-width: 560px) { .belege { grid-template-columns: repeat(2, 1fr); } }

/* --- Ruhepunkt ----------------------------------------------------------- */
/* Ein grosser Satz auf leerer Flaeche. Der Bruch im Rhythmus ist die
 * Gestaltung, deshalb steht hier ausser dem Satz nichts. */
.ruhepunkt { padding: calc(var(--raster) * 8) 0; }
.ruhepunkt::before { display: none; }
.ruhepunkt p { font-size: clamp(1.45rem, 3.2vw, 2.3rem); font-weight: 600;
               letter-spacing: -0.025em; line-height: 1.25; color: var(--graphit);
               max-width: 24ch; margin: 0 auto; text-align: center;
               text-wrap: balance; }

/* --- Die weiche Flaeche --------------------------------------------------- */
.weich { background: var(--papier-hell); padding: calc(var(--raster) * 7) 0; }
.weich .fliesstext { max-width: 68ch; line-height: 1.8; font-size: 1.06rem; }

/* --- Bild und Text -------------------------------------------------------- */
.bio-inner { display: grid; gap: calc(var(--raster) * 2); align-items: start; }
@media (min-width: 940px) { .bio-inner { grid-template-columns: 1fr 1fr; } }
.bio-figure img { width: 100%; height: auto; display: block;
                  border: 1px solid var(--linie); border-radius: 2px; }
.bio-text .fliesstext { max-width: 54ch; }

/* --- Szenen, Saeulen, Etappen (Bestandstypen im neuen Kleid) -------------- */
.szenen-liste { list-style: none; margin-top: calc(var(--raster) * 2); }
.szene { padding: calc(var(--raster) * 1.25) 0; border-top: 1px solid var(--linie);
         max-width: 62ch; }
.szene:last-child { border-bottom: 1px solid var(--linie); }
.camps { margin-top: calc(var(--raster) * 2); }
/* Ordnungswort und Name sind zwei Angaben, keine. Ohne eigenen Block laufen
 * sie ineinander: "THE INSIDEAVIANNA MCKEE". */
.camp-num em { display: block; margin-top: calc(var(--raster) * 0.4);
               font-style: normal; font-weight: 600; color: var(--graphit);
               letter-spacing: 0.1em; }
.camp { display: grid; grid-template-columns: calc(var(--raster) * 7) 1fr;
        gap: var(--raster); padding: calc(var(--raster) * 1.5) 0;
        border-top: 1px solid var(--linie); align-items: start; }
.camp-body { max-width: 58ch; }
.path-stages { margin-top: calc(var(--raster) * 2); }
.stage { display: grid; grid-template-columns: calc(var(--raster) * 3) 1fr;
         gap: var(--raster); padding: calc(var(--raster) * 1.5) 0;
         border-top: 1px solid var(--linie); }
.stage-spacer { display: none; }
.stage-title { margin-bottom: calc(var(--raster) * 0.5); }
.stage-content { max-width: 58ch; }
@media (max-width: 720px) {
  .camp, .stage { grid-template-columns: 1fr; gap: calc(var(--raster) * 0.5); }
}

/* --- Zwei Listen ---------------------------------------------------------- */
/* Die zwei Listen stehen als abgesetzte Flaeche, sonst schwimmen sie im
 * Fliesstext und der Nachsatz darunter lehnt sich an die linke Spalte. */
.foryou-grid { display: grid; gap: 0;
               margin: calc(var(--raster) * 2) 0 calc(var(--raster) * 2);
               background: var(--papier-hell); border: 1px solid var(--linie);
               border-radius: 2px; }
.foryou-col { padding: calc(var(--raster) * 1.5); }
@media (min-width: 800px) {
  .foryou-grid { grid-template-columns: 1fr 1fr; }
  .foryou-col + .foryou-col { border-left: 1px solid var(--linie); }
}
@media (max-width: 799px) {
  .foryou-col + .foryou-col { border-top: 1px solid var(--linie); }
}
.foryou-grid ul, .foryou-grid ol { list-style: none; }
.foryou-grid li { padding: calc(var(--raster) * 0.75) 0;
                  border-bottom: 1px solid var(--linie); }
.foryou-grid li:last-child { border-bottom: none; padding-bottom: 0; }
.foryou-grid h3 { margin-bottom: var(--raster);
                  padding-bottom: calc(var(--raster) * 0.75);
                  border-bottom: 1px solid var(--linie); }
.foryou-grid + .fliesstext, .foryou-grid + * { margin-top: calc(var(--raster) * 2); }

/* --- Preise --------------------------------------------------------------- */
.preiszeile { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700;
              color: var(--graphit); letter-spacing: -0.03em;
              margin-top: calc(var(--raster) * 1.5); }
.preiszeile-detail { color: var(--graphit-weich); font-size: .95rem;
                     margin-top: calc(var(--raster) * 0.5); max-width: 52ch; }
.stufen-raster { display: grid; gap: calc(var(--raster) * 1.5);
                 margin-top: calc(var(--raster) * 2); }
@media (min-width: 900px) { .stufen-raster { grid-template-columns: 1fr 1fr; } }
.stufen-raster .stufe { display: block; border: 1px solid var(--linie);
                        background: var(--papier-hell); border-radius: 2px;
                        padding: calc(var(--raster) * 1.5); }
.stufen-raster .preis { font-size: 1.5rem; font-weight: 700; color: var(--graphit);
                        letter-spacing: -0.03em; margin: var(--raster) 0 0; }
.stufen-raster ul { list-style: none; margin-top: var(--raster); }
.stufen-raster li { padding: calc(var(--raster) * 0.5) 0;
                    border-top: 1px solid var(--linie); font-size: .95rem; }
/* Der Nachsatz gehoert zu beiden Karten und klebte bisher an ihrer
 * Unterkante. Derselbe Fehler wie bei der Ja-Nein-Spalte und bei den zwei
 * Listen: ein Block nach einem Raster braucht seinen eigenen Abstand. */
.stufen-raster + .fliesstext { margin-top: calc(var(--raster) * 2);
                               padding-top: calc(var(--raster) * 1.5);
                               border-top: 1px solid var(--linie); }
.stufe-lede { color: var(--graphit-weich); margin-top: calc(var(--raster) * 0.5); }
.stufen-raster .stufe h3 { margin-bottom: calc(var(--raster) * 0.25); }
.stufen-raster .btn { margin-top: calc(var(--raster) * 1.25); }
.posten-liste { list-style: none; margin-top: calc(var(--raster) * 2);
                max-width: 720px; }
.posten { display: flex; justify-content: space-between; gap: var(--raster);
          padding: calc(var(--raster) * 0.75) 0;
          border-top: 1px solid var(--linie); }
.posten-name { color: var(--graphit-weich); }
.posten-preis { white-space: nowrap; color: var(--graphit); }
.posten-summe { border-top: 1px solid var(--graphit); margin-top: var(--raster); }
.posten-summe .posten-name, .posten-summe .posten-preis {
  color: var(--graphit); font-weight: 600; }

/* Der eigene Preis, direkt unter der Vergleichssumme. Kein Rahmen, keine
 * Farbe, nur die blaue Kante links: der Unterschied soll aus der Zahl
 * kommen und nicht aus der Gestaltung. */
.posten-unser { border-top: 0; margin-top: 0;
                margin-bottom: calc(var(--raster) * 2);
                padding-left: var(--raster);
                border-left: 3px solid var(--blau);
                background: var(--papier-hell); }
.posten-unser .posten-name, .posten-unser .posten-preis { color: var(--graphit); }
.posten-unser .posten-preis { padding-right: var(--raster); }

/* Eine Nachweis-Sektion ohne Portraets ist einspaltig: sonst bleiben die
 * Belege in der rechten Spalte kleben und die linke Haelfte steht leer.
 * :has() faellt auf aelteren Browsern aus, dort steht der Block dann wie
 * vorher, also lesbar und nur nicht ideal ausgerichtet. */
.portraets:empty { display: none; }
@media (min-width: 940px) {
  .nachweis:has(.portraets:empty) { grid-template-columns: 1fr; }
  .nachweis:has(.portraets:empty)::after { display: none; }
  .nachweis:has(.portraets:empty) .belege { grid-column: 1; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-liste { margin-top: calc(var(--raster) * 2); }
.faq-item { padding: calc(var(--raster) * 1.5) 0; border-top: 1px solid var(--linie); }
.faq-item:last-child { border-bottom: 1px solid var(--linie); }
.faq-frage { margin-bottom: var(--raster); }
.faq-antwort { max-width: 62ch; }

/* --- Schluss und Fusszeile ------------------------------------------------ */
.final-inner .fliesstext { max-width: 52ch; }
.site-footer { border-top: 1px solid var(--linie);
               padding: calc(var(--raster) * 3) 0; }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--raster);
                align-items: baseline; }
.footer-brand { color: var(--graphit); }
.footer-links { display: flex; gap: var(--raster); margin-left: auto; }
.footer-links a { border: none; }
.footer-links a:hover { color: var(--blau); }

/* --- Fortschritt und Einblendungen ---------------------------------------- */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px;
                   z-index: 101; pointer-events: none; }
.scroll-progress-bar { height: 100%; background: var(--blau); width: 0; }
.js .reveal-on-scroll { opacity: 0; transform: translateY(12px);
                        transition: opacity .7s ease, transform .7s ease; }
.js .reveal-on-scroll.is-revealed { opacity: 1; transform: none; }

/* --- Bewerbungsfenster ----------------------------------------------------- */
.wr-modal { position: fixed; inset: 0; z-index: 200; display: none;
            background: rgba(31, 33, 36, 0.55); }
/* Die Klasse heisst "open", nicht "is-open". Mit dem falschen Namen laedt
 * der Knopf die Survey brav und das Fenster bleibt unsichtbar: der Knopf
 * wirkt tot, obwohl alles laeuft. */
.wr-modal.open { display: grid; place-items: center; padding: var(--raster); }
.wr-modal-inner { background: var(--papier-hell); width: min(760px, 100%);
                  height: min(80vh, 900px); position: relative;
                  border: 1px solid var(--linie); border-radius: 2px; }
.wr-survey-frame { width: 100%; height: 100%; border: 0; }
.wr-modal-close { position: absolute; top: var(--raster); right: var(--raster);
                  background: none; border: none; cursor: pointer; z-index: 2;
                  font-family: 'Archivo', system-ui, sans-serif;
                  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
                  color: var(--graphit-weich); }
.wr-survey-loading { position: absolute; inset: 0; display: grid; place-items: center;
                     font-family: 'Archivo', system-ui, sans-serif;
                     font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
                     color: var(--stahl); }
.wr-survey-loading-dot { display: none; }
/* Das Skript blendet den Ladehinweis mit dieser Klasse aus. Ohne die Regel
 * bleibt er ueber dem Formular stehen, sobald es geladen hat. */
.wr-survey-loading.is-hidden { display: none; }

/* --- Musterhaus: die eingebettete Anwendung -----------------------------
 *
 * Auf breiten Schirmen steht die Anwendung in einem Telefonrahmen, daneben
 * vier Zeilen, die sagen, was zu sehen ist. Auf dem Handy entfaellt beides:
 * ein Telefon im Telefon ist albern, und bedienen laesst sich eine
 * Anwendung in einem 300 Pixel breiten Fenster ohnehin nicht. Dort steht
 * ein Standbild und darunter der Knopf, der die Anwendung ganz normal
 * aufmacht. */
.mh-buehne { display: grid; gap: calc(var(--raster) * 2); align-items: start; }
.mh-geraet { display: none; }
.mh-standbild { max-width: 300px; }
.mh-standbild img { display: block; width: 100%; height: auto;
                    border: 1px solid var(--linie-stark, rgba(31,33,36,.22)); }
.mh-liste { list-style: none; margin: 0 0 calc(var(--raster) * 1.5); padding: 0;
            max-width: 46ch; }
.mh-liste li { position: relative; padding-left: calc(var(--raster) * 1.25);
               margin-bottom: calc(var(--raster) * 0.75); }
.mh-liste li::before { content: ''; position: absolute; left: 0; top: 0.62em;
                       width: 12px; height: 1px; background: var(--graphit); }

@media (min-width: 940px) {
  .mh-buehne { grid-template-columns: 430px 1fr; }
  .mh-standbild { display: none; }
  .mh-geraet {
    display: block; width: 430px; padding: 20px 20px 26px;
    border: 1px solid var(--graphit); background: var(--papier-hell);
    position: relative;
  }
  /* Der Steg unter dem Bild, wie am Geraet. Kein Foto eines Telefons: die
   * Zeichnung der Seite kommt ohne Abbildungen von Dingen aus. */
  .mh-geraet::after {
    content: ''; position: absolute; left: 50%; bottom: 11px;
    transform: translateX(-50%); width: 96px; height: 3px;
    background: var(--linie-stark);
  }
  .mh-rahmen { display: block; width: 390px; height: 760px; border: 0;
               background: var(--papier); }
}

/* --- Rechtstexte ----------------------------------------------------------- */
.rechtstext { max-width: 68ch; }
.rechtstext h2 { font-size: 1.1rem; margin: calc(var(--raster) * 2) 0 var(--raster); }
.rechtstext ul { margin: 0 0 1em calc(var(--raster)); }

/* --- Diagnose --------------------------------------------------------------
 * Der Test erbt die Grundformen und braucht nur die Stellen, an denen
 * basis.css eigene Farben gesetzt hatte. */
.dg-form, .dg-ergebnis { max-width: 46rem; margin-top: calc(var(--raster) * 2); }
.dg-fortschritt-bar { height: 1px; background: var(--linie); }
.dg-fortschritt-bar span { display: block; height: 100%; width: 0;
                           background: var(--blau); transition: width .35s ease; }
.dg-zaehler { margin-top: calc(var(--raster) * 0.5); }
.dg-fragen { list-style: none; }
.dg-dim { margin-bottom: calc(var(--raster) * 0.5); }
.dg-frage-text { margin-bottom: var(--raster); }
.dg-nr { display: inline-block; min-width: 2.6em;
         font-family: 'Archivo', system-ui, sans-serif;
         font-size: 12px; color: var(--stahl); letter-spacing: 0.12em;
         vertical-align: middle; }
.dg-antworten { display: grid; gap: calc(var(--raster) * 0.5); }
.dg-antwort { display: flex; gap: var(--raster); align-items: flex-start;
              padding: var(--raster); border: 1px solid var(--linie);
              background: var(--papier-hell); cursor: pointer; border-radius: 2px;
              transition: border-color .2s; }
.dg-antwort:hover { border-color: var(--stahl); }
.dg-antwort:has(input:checked) { border-color: var(--graphit); }
.dg-antwort input { margin-top: .4em; accent-color: var(--blau); flex: none; }
.dg-steuerung { margin-top: calc(var(--raster) * 1.5); }
.dg-steuerung .btn[disabled] { opacity: .3; pointer-events: none; }
.dg-ergebnis-kopf { display: flex; justify-content: space-between; align-items: baseline;
                    gap: var(--raster); padding-bottom: var(--raster);
                    border-bottom: 1px solid var(--linie);
                    margin-bottom: calc(var(--raster) * 1.5); }
.dg-stufe h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--raster); }
.dg-schwaechen { margin-top: calc(var(--raster) * 2);
                 padding-top: calc(var(--raster) * 1.5);
                 border-top: 1px solid var(--linie); }
.dg-schwaeche { border-left: 2px solid var(--linie);
                padding: var(--raster) calc(var(--raster) * 1.25);
                background: var(--papier-hell); }
.dg-schwaeche.dg-ist-schwach { border-left-color: var(--blau); }
.dg-schwaeche + .dg-schwaeche { margin-top: calc(var(--raster) * 0.5); }
.dg-schwaeche-dim { display: flex; justify-content: space-between; gap: var(--raster);
                    margin-bottom: calc(var(--raster) * 0.5); color: var(--graphit); }
.dg-wert { text-transform: none; letter-spacing: 0.08em; color: var(--stahl); }
.dg-optin > h3 { margin-bottom: var(--raster); }
.dg-optin { margin-top: calc(var(--raster) * 2); padding: calc(var(--raster) * 1.5);
            border: 1px solid var(--linie); background: var(--papier-hell);
            border-radius: 2px; }
.dg-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster);
             margin: var(--raster) 0; }
.dg-feld { display: block; }
.dg-feld > label { display: block; margin-bottom: calc(var(--raster) * 0.5); }
.dg-feld span { display: block; margin-bottom: calc(var(--raster) * 0.4); }
.dg-feld input, .dg-feld textarea {
  width: 100%; padding: calc(var(--raster) * 0.6) var(--raster);
  font: inherit; color: var(--graphit); background: var(--papier);
  border: 1px solid var(--linie); border-radius: 2px; }
.dg-feld textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.dg-feld input:focus, .dg-feld textarea:focus { outline: none; border-color: var(--blau); }
.dg-feld-breit { margin-bottom: var(--raster); }
.dg-stichpunkte { list-style: none; margin: 0 0 var(--raster); }
.dg-stichpunkte li { position: relative; padding-left: var(--raster);
                     margin-bottom: calc(var(--raster) * 0.3); font-size: .9rem;
                     color: var(--graphit-weich); }
.dg-stichpunkte li::before { content: ''; position: absolute; left: 0; top: .7em;
                             width: 8px; height: 1px; background: var(--stahl); }
.dg-klein, .dg-feld-hinweis { display: block; font-size: .85rem; line-height: 1.6;
                              color: var(--graphit-weich); text-transform: none;
                              letter-spacing: 0; margin-top: calc(var(--raster) * 0.5); }
.dg-meldung { margin-top: var(--raster); color: var(--blau); }
.dg-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dg-bericht { margin-top: calc(var(--raster) * 2); padding: calc(var(--raster) * 1.5);
              background: var(--papier-hell); border-top: 2px solid var(--blau);
              border-left: 1px solid var(--linie); border-right: 1px solid var(--linie);
              border-bottom: 1px solid var(--linie); }
.dg-bericht-text p { margin-bottom: 1.1em; }
.dg-bericht-fuss { margin-top: calc(var(--raster) * 1.5); padding-top: var(--raster);
                   border-top: 1px solid var(--linie); }
.dg-bericht-fuss p { font-size: .87rem; color: var(--stahl); }
.dg-schluss { margin-top: calc(var(--raster) * 2); padding-top: calc(var(--raster) * 1.5);
              border-top: 1px solid var(--linie); }
.js .dg-ergebnis[hidden] { display: none; }
@media (max-width: 560px) { .dg-felder { grid-template-columns: 1fr; } }

/* --- Nachtraege ----------------------------------------------------------- */

/* Das breite Bild zwischen Kopf und Spalten. Ohne Begrenzung stand es in
 * seiner natuerlichen Breite da und lief ueber den Rand hinaus. */
.bildband { margin: calc(var(--raster) * 2) 0; }
.bildband img, .bildband picture { display: block; width: 100%; height: auto; }
/* 21:9 auf einem Hochkantmotiv schneidet die Koepfe ab, wenn mittig
 * ausgerichtet wird. Der Ausschnitt sitzt deshalb im oberen Drittel. */
.bildband img { aspect-ratio: 21 / 9; object-fit: cover; object-position: center 22%;
                border: 1px solid var(--linie); border-radius: 2px; }

/* Die Nummer vor der Augenbraue bekommt eine eigene Kante, damit sie als
 * Zaehlung liest und nicht als Teil des Wortes. */
.eyebrow-num { position: relative; padding-right: 0.9em; }
.eyebrow-num::after { content: ''; position: absolute; right: 0.35em; top: 0.15em;
                      bottom: 0.15em; width: 1px; background: var(--linie); }

/* Der Hero der Unterseiten. Er traegt ein eigenes Bild und dieselbe Maske
 * wie die Startseite, nur flacher. */
.hero-kompakt { min-height: min(56vh, 520px); display: flex; align-items: center;
                padding: calc(var(--raster) * 3) 0; }
/* Auf den Unterseiten traegt die Ueberschrift eine Aussage, keine Parole.
 * In Startseitengroesse braucht sie vier Zeilen, schiebt den Knopf unter die
 * Kante und laeuft ins Bild. Kleiner und breiter gesetzt passt beides. */
.hero-kompakt h1 { font-size: clamp(1.9rem, 3.4vw, 3rem); max-width: 19ch;
                   letter-spacing: -0.03em; }
.hero-kompakt .hero-lede { max-width: 50ch; }
/* Die Kopfzeichnungen der Unterseiten sind Vektor und sollen nicht
 * beschnitten werden: eine Konstruktionszeichnung, der eine Kante fehlt, ist
 * keine mehr. Deshalb contain statt cover, rechts ausgerichtet, und keine
 * Maske, denn die Zeichnung hat ihre leere Haelfte schon eingebaut. */
/* Der Kopf einer Unterseite traegt entweder eine Konstruktionszeichnung
 * oder ein Foto, und die beiden wollen das Gegenteil voneinander.
 *
 * Die Zeichnung darf nicht beschnitten werden, denn einer Zeichnung, der
 * eine Kante fehlt, kann man nicht mehr trauen. Sie braucht auch keinen
 * Verlauf, ihre leere Haelfte ist eingebaut. Also: vollstaendig einpassen,
 * rechts ausrichten, keine Maske.
 *
 * Das Foto fuellt die Flaeche und laeuft nach links in das Papier aus, wie
 * auf der Startseite. Es erbt damit einfach die Regeln von .hero-bg. */
/* Die Breite allein wiegt die beiden Kopfzeichnungen nicht gleich: die eine
 * ist fast quadratisch, die andere doppelt so breit wie hoch. Deshalb
 * begrenzt zusaetzlich die Hoehe, und jede Seite darf ihren Faktor setzen. */
/* Die Zeichnung steht neben dem Text, nicht in der oberen Ecke. Vorher
 * sass sie oben, weil margin:auto nur im Flex- oder Rasterfluss zentriert
 * und der Kopfbereich beides nicht war. */
.hero-bg-zeichnung { left: auto; width: min(46%, 760px);
                     display: flex; align-items: center; justify-content: flex-end;
                     padding-right: calc(var(--raster) * 2); }
.hero-bg-zeichnung img, .hero-bg-zeichnung picture {
  width: auto; height: auto; max-width: 100%;
  max-height: var(--zeichnung-hoehe, 62%);
  margin: 0; object-fit: contain;
  -webkit-mask-image: none; mask-image: none; }
/* Feste Stufen statt eines Inline-Stils. Jede Seite waehlt ueber
 * data-hoehe, wieviel Hoehe ihre Kopfzeichnung einnehmen darf. */
.hero-bg-zeichnung[data-hoehe="42"] { --zeichnung-hoehe: 42%; }
.hero-bg-zeichnung[data-hoehe="46"] { --zeichnung-hoehe: 46%; }
.hero-bg-zeichnung[data-hoehe="55"] { --zeichnung-hoehe: 55%; }
.hero-bg-zeichnung[data-hoehe="66"] { --zeichnung-hoehe: 66%; }
.hero-bg-zeichnung[data-hoehe="78"] { --zeichnung-hoehe: 78%; }

/* Die Merkmalszeile unter dem Vorspann: was der Test kostet, wie lange er
 * dauert, was danach passiert. Sie steht ueber dem Knopf, weil genau diese
 * drei Angaben die Frage beantworten, die vor dem Klick im Kopf steht. */
.hero-merkmale { display: flex; flex-wrap: wrap; gap: calc(var(--raster) * 0.75);
                 align-items: center; margin: calc(var(--raster) * 1.25) 0 0;
                 padding: 0; list-style: none; }
.hero-merkmale li { font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--graphit); }
.hero-merkmale li + li::before { content: ''; display: inline-block;
                                 width: 14px; height: 1px; background: var(--stahl);
                                 vertical-align: middle;
                                 margin-right: calc(var(--raster) * 0.75); }
.hero-nachsatz { margin-top: var(--raster); font-size: .95rem; color: var(--stahl);
                 max-width: 44ch; }
@media (max-width: 860px) {
  .hero-kompakt { min-height: 0; }
  .hero-kompakt .hero-bg { height: 34vh; min-height: 220px; }
}

/* Ein Abschnitt mit Zeichnung: Text links, Konstruktion rechts. Die
 * Zeichnung steht nicht als Schmuck daneben, sie zeigt, wovon der Absatz
 * spricht. Auf schmalen Schirmen rutscht sie unter den Text. */
.mit-zeichnung .wrap { display: grid; gap: calc(var(--raster) * 2);
                       align-items: start; }
@media (min-width: 940px) {
  .mit-zeichnung .wrap { grid-template-columns: minmax(0, 1fr) 420px;
                         grid-template-areas: "kopf zeichnung" "text zeichnung"; }
  .mit-zeichnung .kopf { grid-area: kopf; margin-bottom: 0; }
  .mit-zeichnung .fliesstext { grid-area: text; }
  .mit-zeichnung .zeichnung { grid-area: zeichnung; width: 100%; }
}
.zeichnung { margin: 0; }

/* Zeichnung und Unterschrift gehoeren zusammen: die Zeichnung steht auf
 * hellerem Papier mit Rahmen, wie ein eingeklebtes Blatt, darunter die
 * Erklaerung. Ohne Unterschrift waere sie Dekoration mit gutem Gewissen. */
.zeichnung img, .zeichnung-mitte img {
  display: block; width: 100%; height: auto;
  background: var(--papier-hell);
  border: 1px solid var(--linie); border-radius: 2px;
  padding: var(--raster);
}
.zeichnung figcaption, .zeichnung-mitte figcaption {
  margin-top: var(--raster); font-size: .88rem; line-height: 1.6;
  color: var(--graphit-weich); max-width: 46ch;
}
.zeichnung-nr {
  display: block; margin-bottom: calc(var(--raster) * 0.3);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stahl);
}

/* --- Bewerbungsformular ---------------------------------------------------
 * Es liegt auf der eigenen Seite statt in einem fremden iframe. Also gelten
 * hier dieselben Formen wie ueberall: eckig, Haarlinien, Feld heller als der
 * Grund, alles auf dem Raster. */
.bw-form { max-width: 46rem; margin-top: calc(var(--raster) * 2); }
.bw-gruppe { border: none; padding: 0; margin: 0 0 calc(var(--raster) * 2); }
/* Die Trennlinie liegt als eigene Lage darueber, nicht als Rahmen am
 * fieldset: eine legend wird vom Browser ueber den Rahmen ihres fieldsets
 * gezeichnet, und dann laeuft die Linie mitten durch die Ueberschrift. */
.bw-gruppe + .bw-gruppe { padding-top: calc(var(--raster) * 2); position: relative; }
.bw-gruppe + .bw-gruppe::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--linie); }
.bw-gruppe-titel { display: block; padding: 0; margin-bottom: calc(var(--raster) * 1.25);
                   font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
                   text-transform: uppercase; color: var(--stahl); }
.bw-felder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raster); }
@media (max-width: 640px) { .bw-felder { grid-template-columns: 1fr; } }

.bw-feld { display: block; border: none; padding: 0; margin: 0; min-width: 0; }
.bw-feld-breit { grid-column: 1 / -1; }
.bw-feld > span, .bw-feld > legend {
  display: block; padding: 0; margin-bottom: calc(var(--raster) * 0.4);
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphit-weich); line-height: 1.5; }
/* Ausdruecklich ohne die Auswahlknoepfe: die stehen in derselben Gruppe und
 * wurden von dieser Regel auf volle Breite mit Rahmen und Hintergrund
 * gezogen, wodurch der Punkt in der Mitte eines Kastens sass und die
 * Beschriftung daneben aus dem Feld lief. */
.bw-feld input:not([type="radio"]), .bw-feld textarea {
  width: 100%; padding: calc(var(--raster) * 0.6) var(--raster);
  font: inherit; color: var(--graphit); background: var(--feld, #fdfbf6);
  border: 1px solid var(--linie); border-radius: 2px; }
.bw-feld textarea { min-height: 118px; line-height: 1.6; resize: vertical; }
.bw-feld input:not([type="radio"]):focus, .bw-feld textarea:focus {
  outline: none; border-color: var(--blau); }

/* Ein fehlendes Pflichtfeld wird am Feld markiert, nicht in einer Blase, die
 * immer nur das erste zeigt und nicht dorthin scrollt. */
.bw-fehlt input:not([type="radio"]), .bw-fehlt textarea,
.bw-fehlt .bw-option { border-color: var(--blau); }
.bw-fehlt > span, .bw-fehlt > legend { color: var(--blau); }

/* Die Auswahl steht offen da. Eine Antwort, die man sieht, wird ehrlicher
 * gegeben als eine, die man erst aufklappen muss. */
.bw-auswahl { display: grid; gap: calc(var(--raster) * 0.5); }
.bw-option { display: flex; gap: var(--raster); align-items: flex-start;
             padding: var(--raster); border: 1px solid var(--linie);
             background: var(--papier-hell); border-radius: 2px; cursor: pointer;
             transition: border-color .2s; }
.bw-option:hover { border-color: var(--stahl); }
.bw-option:has(input:checked) { border-color: var(--graphit); }
.bw-option input { margin-top: .35em; accent-color: var(--blau); flex: none; }
.bw-option span { color: var(--graphit-weich); }

.bw-form > .btn { margin-top: var(--raster); }
.bw-fehler { color: var(--blau); font-weight: 500; }
.bw-danke { max-width: 46rem; margin-top: calc(var(--raster) * 2);
            padding: calc(var(--raster) * 2);
            background: var(--papier-hell); border-top: 2px solid var(--blau);
            border-left: 1px solid var(--linie); border-right: 1px solid var(--linie);
            border-bottom: 1px solid var(--linie); }
.bw-danke:focus { outline: none; }
.bw-danke h3 { margin-bottom: var(--raster); }

/* Eine Zeichnung, die das Verhaeltnis zweier Spalten zeigt, steht neben dem
 * Text, der sie erklaert, und nicht darunter: unter dem Absatz liest sie
 * sich als Abschluss, daneben als Beleg des Gesagten. Auf schmalen Schirmen
 * rutscht sie darunter, dort gibt es keine zweite Spalte. */
.zeichnung-mitte { margin: calc(var(--raster) * 2) 0; max-width: 420px; }

@media (min-width: 940px) {
  /* Kopf links, Zeichnung rechts, alles Weitere darunter ueber die volle
   * Breite. Gilt fuer alle Abschnitte, die eine Nebenzeichnung tragen. */
  .mit-nebenzeichnung .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: calc(var(--raster) * 3);
    align-items: start;
  }
  .mit-nebenzeichnung .kopf { grid-column: 1; grid-row: 1; }
  .mit-nebenzeichnung .wrap > .fliesstext:first-of-type { grid-column: 1; grid-row: 2; }
  .mit-nebenzeichnung .zeichnung-mitte { grid-column: 2; grid-row: 1 / span 2;
                                         align-self: center; margin: 0; }
  .mit-nebenzeichnung .bildband,
  .mit-nebenzeichnung .camps-list,
  .mit-nebenzeichnung .szenen-liste,
  .mit-nebenzeichnung .bloecke,
  .mit-nebenzeichnung .stempel,
  .mit-nebenzeichnung .wrap > .fliesstext:last-of-type { grid-column: 1 / -1; }
}

/* --- Instagram-Stand ------------------------------------------------------
 * Kein Fremdkoerper: dieselbe Linienstaerke wie die Zeichnungen, dieselbe
 * Kante wie die Belege, keine Markenfarbe. Die Zahl traegt, nicht das Logo. */
/* Ein einzelner Beleg fuellt die Spalte und behaelt seine eigenen
 * Proportionen. Das 9/16 darueber ist fuer Telefonaufnahmen gedacht und
 * wuerde ein Querformat an der rechten Kante abschneiden. */
.belege-eins { grid-template-columns: 1fr; }
.belege-eins .beleg img { aspect-ratio: auto; object-fit: contain;
                          border: 0; border-radius: 0; }
.ig-stand {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; text-decoration: none; color: var(--graphit);
  margin-top: var(--raster); padding-top: var(--raster);
  border-top: 1px solid var(--linie);
}
.ig-stand:hover { color: var(--blau); }
.ig-marke { align-self: center; flex: none; }
/* Die Zahl zaehlt sich beim Hinscrollen hoch. Feste Ziffernbreite und eine
 * Mindestbreite fuer die Endzahl, sonst wackelt die Zeile beim Zaehlen. */
.ig-zahl { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
           letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
           display: inline-block; }
.ig-label { font-size: .95rem; color: var(--graphit-weich); }
.ig-handle { margin-left: auto; font-size: 11px; letter-spacing: 0.14em;
             text-transform: uppercase; color: var(--stahl); }

/* --- Rechtstexte --------------------------------------------------------
 * Impressum, Datenschutz und AGB liegen im Entwurfszweig unter eigener
 * Adresse, damit ein Klick ins Kleingedruckte den Entwurf nicht verlaesst
 * und im alten Aussehen landet.
 *
 * Ein Rechtstext wird gelesen und nicht ueberflogen: eine Spalte, ruhige
 * Abstaende, und die Zwischentitel deutlich kleiner als auf den anderen
 * Seiten. Die grossen h2 der Verkaufsseiten wuerden hier wie vierzig
 * Ueberschriften hintereinander wirken. Die Linie ueber jedem Titel
 * uebernimmt das Trennen, das sonst die Groesse leisten muesste. */
/* Ein Kopf ohne Bild und ohne Handlungsaufruf braucht auch keine halbe
 * Bildschirmhoehe. Vor einem Rechtstext stand sonst ein Titel allein in
 * einer leeren Flaeche, und der Text begann erst nach dem ersten Scrollen. */
.hero:has(+ .rechtstext) { min-height: 0; }
.hero:has(+ .rechtstext) .hero-oben { min-height: 0; }
.hero:has(+ .rechtstext) .hero-nachtrag { margin-top: calc(var(--raster) * 0.5); }

.rechtstext .wrap { max-width: calc(1128px * 0.72); }
.rechtstext h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  letter-spacing: -0.01em;
  margin: calc(var(--raster) * 2.5) 0 calc(var(--raster) * 0.75);
  padding-top: calc(var(--raster) * 0.75);
  border-top: 1px solid var(--linie);
}
.rechtstext h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.rechtstext p, .rechtstext li { max-width: 68ch; }
.rechtstext ul { margin: 0 0 1em; padding-left: 1.2em; }
.rechtstext li { margin-bottom: 0.35em; }

/* Ein Kundenlogo, kein Schmuck: klein, ohne Rahmen, mit Abstand nach oben. */
.kundenlogo { margin-top: calc(var(--raster) * 2); }
.kundenlogo img { display: block; width: 120px; height: auto; }
.kundenlogo figcaption { margin-top: calc(var(--raster) * 0.75);
                         font-size: 11px; letter-spacing: 0.14em;
                         text-transform: uppercase; color: var(--stahl); }

/* Im Bild-Text-Abschnitt steht die Ueberschrift ohne .kopf-Huelle direkt
 * ueber dem Fliesstext und bekam deshalb keinen Abstand nach unten. */
.bio-text > h2, .bio-text > h3 { margin-bottom: calc(var(--raster) * 1.5); }

/* Der Stand unter der Followerzahl. Klein, aber vorhanden: eine Zahl ohne
 * Datum behauptet, sie waere von jetzt. */
.ig-datum { flex-basis: 100%; margin-top: calc(var(--raster) * 0.4);
            font-size: 11px; letter-spacing: 0.08em; color: var(--stahl); }

/* --- Das Arbeitsfenster ---------------------------------------------------
 * Waehrend die Auswertung geschrieben wird, dauert es eine halbe Minute. Ein
 * Knopf, der in dieser Zeit nichts sagt, sieht kaputt aus, und wer die Seite
 * verlaesst, verliert sein Ergebnis. Das Fenster haelt die Aufmerksamkeit
 * und zeigt, dass etwas laeuft, indem es benennt, was gerade laeuft. */
.dg-arbeit { position: fixed; inset: 0; z-index: 200;
             display: grid; place-items: center; padding: var(--raster);
             background: rgba(31, 33, 36, 0.55);
             -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dg-arbeit-karte { width: min(100%, 30rem); background: var(--papier-hell);
                   border: 1px solid var(--linie); border-radius: 2px;
                   padding: calc(var(--raster) * 1.75); }
.dg-arbeit-balken { height: 3px; background: var(--linie); border-radius: 2px;
                    overflow: hidden; }
.dg-arbeit-balken span { display: block; height: 100%; width: 40%;
                         background: var(--blau); border-radius: 2px;
                         animation: dgLauf 1.6s ease-in-out infinite; }
@keyframes dgLauf {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(90%); }
  100% { transform: translateX(250%); }
}
.dg-arbeit-schritt { margin-top: var(--raster); font-size: 1.05rem;
                     line-height: 1.5; color: var(--graphit); min-height: 3.2em; }
.dg-arbeit-fuss { margin-top: calc(var(--raster) * 0.75); font-size: .88rem;
                  color: var(--stahl); }
@media (prefers-reduced-motion: reduce) {
  .dg-arbeit-balken span { animation: none; width: 100%; }
}

/* --- Die Ergebnisseite --------------------------------------------------- */
.dg-post { margin-top: calc(var(--raster) * 2);
           padding: calc(var(--raster) * 1.75);
           background: var(--papier-hell); border: 1px solid var(--linie);
           border-left: 3px solid var(--blau); border-radius: 2px; }
.dg-post h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: var(--raster) 0; }
.dg-post .dg-klein { margin-top: var(--raster); color: var(--stahl); }
.dg-leer { margin-top: calc(var(--raster) * 2); max-width: 46rem; }
.ergebnis-seite { padding-top: calc(var(--raster) * 4); }

/* Die Kontextfragen und die drei Freitextfelder im Opt-in. */
.dg-kontext, .dg-felder-block { margin-top: calc(var(--raster) * 2); }
.dg-kontext > h4, .dg-felder-block > h4 { font-size: 1.05rem;
  margin-bottom: calc(var(--raster) * 0.5); }
.dg-kontext + .dg-felder-block { margin-top: calc(var(--raster) * 2.5); }
.dg-feld select { width: 100%; padding: calc(var(--raster) * 0.6) var(--raster);
  font: inherit; color: var(--graphit); background: var(--papier);
  border: 1px solid var(--linie); border-radius: 2px; }
.dg-feld select:focus { outline: none; border-color: var(--blau); }
.dg-felder-block .dg-feld-breit { margin-top: var(--raster); }

/* --- Der Nachweis unter dem Ergebnis --------------------------------------
 * Kein Kleingedrucktes. Der Block ist ein Argument: er zeigt, was die
 * Maschine wirklich gelesen hat, und die Liste kommt aus den Werkzeug-
 * Ergebnissen der Schnittstelle, nicht aus dem Text des Modells. */
.dg-nachweis { margin-top: calc(var(--raster) * 3);
               padding-top: calc(var(--raster) * 2);
               border-top: 1px solid var(--linie); }
.dg-nachweis h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem);
                  margin-bottom: var(--raster); }
.dg-nachweis-satz { max-width: 46rem; line-height: 1.7; }
.dg-nachweis-liste { list-style: none; margin: var(--raster) 0;
                     padding-left: var(--raster);
                     border-left: 2px solid var(--linie);
                     font-family: 'Archivo', ui-monospace, monospace;
                     font-size: .85rem; letter-spacing: 0.02em;
                     color: var(--graphit-weich); }
.dg-nachweis-liste li { padding: calc(var(--raster) * 0.2) 0;
                        overflow-wrap: anywhere; }
.dg-nachweis .fliesstext { margin-top: var(--raster); }

/* Stand frueher als style-Attribut im HTML. Ausgelagert, damit die
 * Inhaltsrichtlinie ohne unsafe-inline fuer Stile auskommt. */
.nachweis-text { margin-top: calc(var(--raster) * 2); }

/* Der Sprung auf die erste Frage darf nicht unter der klebenden Kopfzeile
 * landen. scroll-margin schiebt das Ziel um deren Hoehe nach unten. */
#dgFragen { scroll-margin-top: calc(var(--raster) * 5); }

/* Kurze Geraete, etwa ein iPhone SE mit 667 Punkten Hoehe. Dort passt die
 * vierzeilige Ueberschrift nicht mehr neben Bild und Knoepfe, also wird sie
 * kleiner und die Abstaende enger. Gemessen wird die Hoehe, nicht die
 * Breite: entscheidend ist, wieviel senkrecht zur Verfuegung steht. */
@media (max-width: 860px) and (max-height: 740px) {
  .hero h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero .hero-kopfteil { padding-top: var(--raster); }
  .hero .hero-kopfteil::before { margin-bottom: var(--raster); }
  .hero .hero-bg { min-height: 110px; }
  .hero-handlung { padding-top: var(--raster);
                   padding-bottom: calc(var(--raster) * 0.75); }
  .hero .eyebrow { font-size: 11px; }
}

/* --- Die mitlaufende Leiste ----------------------------------------------
 * Erscheint, sobald der Kopfbereich vorbei ist, und geht wieder weg, sobald
 * der Abschluss im Bild ist. Sie klebt am unteren Rand, weil dort auf dem
 * Telefon der Daumen liegt. */
.laufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--papier-hell); border-top: 1px solid var(--linie);
  padding: calc(var(--raster) * 0.6) 0;
  padding-bottom: calc(var(--raster) * 0.6 + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform .28s ease; }
.laufleiste.ist-da { transform: none; }
.laufleiste-inner { display: flex; align-items: center; gap: var(--raster);
  justify-content: space-between; }
.laufleiste-text { font-size: .9rem; line-height: 1.4; color: var(--graphit-weich); }
.laufleiste .btn { flex: none; }
@media (max-width: 560px) {
  .laufleiste-text { font-size: .82rem; }
  .laufleiste-text strong { display: block; }
  .laufleiste .btn { padding: calc(var(--raster) * 0.7) var(--raster); }
}
@media (prefers-reduced-motion: reduce) { .laufleiste { transition: none; } }

/* Der eingeklappte Block mit den drei Fragen. Zugeklappt sieht das Formular
 * nach drei Feldern aus statt nach acht, aufgeklappt liefert es das beste
 * Material fuer die Auswertung. */
.dg-felder-block > summary { cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 600; color: var(--graphit);
  padding: calc(var(--raster) * 0.75) 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.dg-felder-block > summary::-webkit-details-marker { display: none; }
.dg-felder-block > summary::after { content: '+'; float: right;
  font-weight: 400; color: var(--stahl); }
.dg-felder-block[open] > summary::after { content: '–'; }
.dg-felder-block > summary .dg-klein { display: block; font-weight: 400;
  margin-top: 2px; color: var(--stahl); }
.dg-felder-block > summary:focus-visible { outline: 2px solid var(--blau);
  outline-offset: 2px; }
.dg-felder-block[open] > .dg-feld-hinweis { margin-top: var(--raster); }

/* Die wiederholte Ergebnisstufe auf der Ergebnisseite. */
.dg-stufen-ergebnis { margin-bottom: calc(var(--raster) * 2); }
.dg-stufen-ergebnis h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom: var(--raster); }
.dg-schluss-nachsatz { margin-top: var(--raster); color: var(--stahl);
  max-width: 46ch; }

/* --- Fortschritt und Übernahme im Bewerbungsformular ---------------------- */
.bw-fortschritt { position: sticky; top: var(--kopfzeile, 64px); z-index: 60;
  background: var(--papier); padding: calc(var(--raster) * 0.75) 0;
  margin-bottom: var(--raster); }
.bw-fortschritt-bar { height: 3px; background: var(--linie); border-radius: 2px;
  overflow: hidden; }
.bw-fortschritt-bar span { display: block; height: 100%; width: 0;
  background: var(--blau); border-radius: 2px; transition: width .3s ease; }
.bw-fortschritt-text { margin-top: calc(var(--raster) * 0.4); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--stahl); }
.bw-schritt { display: block; font-size: 11px; letter-spacing: 0.14em;
  color: var(--stahl); margin-bottom: 2px; }
.bw-uebernommen { margin-bottom: calc(var(--raster) * 1.5);
  padding: var(--raster); background: var(--papier-hell);
  border-left: 3px solid var(--blau); font-size: .92rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .bw-fortschritt-bar span { transition: none; }
}

/* Tippziele. Gemessen wurden fuenf Stellen unter 44 Punkten: der
 * Sprachumschalter mit 18, die drei Rechtslinks mit 19 und die Wortmarke
 * mit 26. Die sichtbare Groesse bleibt, die Trefferflaeche waechst. */
.lang-btn, .fuss-links a, .topnav .marke, .fuss-marke {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; }
@media (max-width: 860px) {
  .fuss-links { gap: calc(var(--raster) * 0.5) var(--raster); }
}

/* ==========================================================================
 * Kopfbereich auf dem Telefon, abschliessend.
 *
 * Diese Regeln stehen am Ende, weil frueher im Stylesheet mehrere aeltere
 * .hero-kompakt-Bloecke liegen, die sonst gewinnen. Hier wird der Aufbau
 * fuer alle Kopfbereiche festgelegt: Augenbraue und Ueberschrift oben, das
 * Schluesselbild dazwischen, die Knoepfe in festem Abstand ueber dem
 * unteren Rand.
 * ====================================================================== */
@media (max-width: 860px) {
  .hero, .hero-kompakt {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; padding: 0; }
  .hero .hero-oben {
    display: flex; flex-direction: column;
    min-height: calc(100dvh - var(--kopfzeile, 64px)); }

  /* Der Strich ueber der Augenbraue entfaellt, er kostet Hoehe und traegt
     auf dem Telefon nichts bei. */
  .hero .hero-kopfteil::before, .hero .hero-text::before { display: none; }
  .hero .hero-kopfteil {
    order: 1; flex: 0 0 auto;
    padding-top: calc(var(--raster) * 0.75); }

  /* Die Zeichnung der Unterseiten steht mittig und nimmt den ganzen Platz
     zwischen Ueberschrift und Knoepfen. Die Regeln fuer breite Schirme
     haben sie nach rechts gedrueckt und auf 46 Prozent begrenzt. */
  .hero .hero-bg-zeichnung {
    position: relative; inset: auto; left: auto; width: 100%;
    max-width: none; padding-right: 0; order: 2;
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 0; min-height: 180px; }
  .hero .hero-bg-zeichnung img, .hero .hero-bg-zeichnung picture {
    width: 100%; height: 100%; max-height: none; margin: 0;
    object-fit: contain; object-position: center; }

  /* Das freigestellte Foto liegt als Ebene hinter allem, gross genug, dass
     der Scheitel auf Hoehe der Ueberschrift sitzt, und links leicht
     beschnitten, damit das Gesicht frei steht. */
  .hero .hero-bg-frei {
    position: absolute; inset: 0; flex: none; min-height: 0;
    z-index: 0; pointer-events: none; display: block; }
  /* Gemessen statt geschaetzt: der Kopfbereich ist 759 Punkte hoch, die
     Ueberschrift endet 239 Punkte unter seiner Oberkante, das sind 32
     Prozent. Der Scheitel setzt knapp darunter an, damit das Gesicht in
     keinem Fall hinter der Schrift liegt. Hoeher ginge nur, wenn die
     Ueberschrift schmaler waere, und die soll ihre Zeilen behalten. */
  .hero .hero-bg-frei img, .hero .hero-bg-frei picture {
    width: 96%; margin-left: 4%; height: 70%; margin-top: 33%;
    object-fit: contain; object-position: right top;
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 66%, transparent 97%); }
  .hero:has(.hero-bg-frei) .hero-handlung { margin-top: auto; }

  .hero .hero-kopfteil, .hero .hero-handlung { position: relative; z-index: 2; }
  .hero .hero-handlung {
    order: 3; flex: 0 0 auto;
    padding-top: calc(var(--raster) * 1.25);
    padding-bottom: calc(var(--raster) * 1.5); }
  .hero .hero-nachtrag { order: 4; }
}

@media (max-width: 860px) and (max-height: 740px) {
  .hero .hero-bg-zeichnung { min-height: 130px; }
  .hero .hero-bg-frei img, .hero .hero-bg-frei picture {
    height: 80%; margin-top: 20%; }
}

/* Die Zeichnungen in den hellen Kaesten fuellen ihren Rahmen jetzt aus.
 * Vorher stand um jede eine Rasterbreite Rand, wodurch die eigentliche
 * Zeichnung klein wirkte und Details verlorengingen. */
.zeichnung img, .zeichnung-mitte img {
  padding: calc(var(--raster) * 0.4); }
.zeichnung-mitte { max-width: 560px; }
@media (min-width: 940px) {
  .mit-zeichnung .wrap { grid-template-columns: minmax(0, 1fr) 500px; }
  .mit-nebenzeichnung .wrap { grid-template-columns: minmax(0, 1fr) 500px; }
}

/* Der Zwischenstand nach der Haelfte der Fragen. Er zeigt zum ersten Mal,
 * dass die Maschine mitliest, und zwar genau dort, wo die meisten sonst
 * abbrechen. Gebaut aus den bisherigen Antworten, ohne Modell und ohne
 * Kosten. */
.dg-zwischenstand { margin-bottom: calc(var(--raster) * 1.5);
  padding: var(--raster) calc(var(--raster) * 1.25);
  background: var(--papier-hell); border-left: 3px solid var(--blau);
  border-radius: 2px; font-size: 1rem; line-height: 1.6;
  color: var(--graphit); animation: dgAuf .4s ease; }
@keyframes dgAuf { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .dg-zwischenstand { animation: none; } }

/* --- Lange Woerter brechen ------------------------------------------------
 * "Persoenlichkeitsentwicklungsszene" ist in einer grossen Ueberschrift
 * breiter als ein Telefon. Ohne Umbruchregel schiebt so ein Wort die ganze
 * Seite auf und macht sie waagerecht scrollbar. Trennung, wo es geht,
 * Bruch als letzte Rettung. */
h1, h2, h3, h4, p, li, summary, .eyebrow, .btn {
  overflow-wrap: break-word; }
/* Kein hyphens:auto und kein anywhere: beides hat die Ueberschrift der
 * Startseite mitten im Wort getrennt und ihre gesetzten Zeilen zerlegt.
 * break-word greift nur, wenn ein Wort allein nicht in die Zeile passt,
 * und genau das ist der Fall, den es zu loesen gab. */
/* Und ein Netz darunter: nichts darf breiter sein als der Schirm. */
html, body { overflow-x: hidden; max-width: 100%; }

/* --- Der Freisteller: kleiner, rechts angeschnitten, faehrt herein --------
 * Er soll gross wirken, ohne in die Ueberschrift zu laufen. Deshalb sitzt
 * er tiefer, ist schmaler als vorher, und die rechte Schulter laeuft aus
 * dem Bild. Beim Laden faehrt er von rechts ein, das gibt der Seite einen
 * Moment Bewegung, ohne dass etwas springt. */
@media (max-width: 860px) {
  /* Ausgerichtet, nicht geschaetzt.
   *
   * Vorher standen hier Prozentwerte, die auf einem Geraet gut aussahen und
   * auf dem naechsten nicht: der Kopf rutschte in die Schrift oder das
   * Gesicht landete in der Mitte, und die Zeile unter den Knoepfen lag auf
   * dem Foto und war nicht mehr zu lesen.
   *
   * Jetzt gilt eine Regel, und verhalten.js rechnet sie fuer jede
   * Bildschirmhoehe aus:
   *
   *   Der Scheitel liegt auf der Oberkante der Ueberschrift.
   *   Die Kopfmitte liegt bei drei Vierteln der Breite.
   *   Der Text endet dort, wo die Gestalt anfaengt.
   *
   * Die drei Masse dafuer sind am Bild abgelesen und stehen im Skript:
   * Scheitel bei 1,9 Prozent der Bildhoehe, Kopfmitte bei 54,2 Prozent der
   * Breite, linke Kante der Gestalt bei 32,2 Prozent. Aendert sich das
   * Foto, aendern sich diese drei Zahlen und sonst nichts. */
  .hero .hero-bg-frei { overflow: hidden; }
  .hero .hero-bg-frei picture { display: contents; }
  .hero .hero-bg-frei img {
    position: absolute;
    left: var(--bild-x, 0); top: var(--bild-y, 36%);
    width: var(--bild-b, 112%); height: var(--bild-h, 72%);
    margin: 0; object-fit: contain; object-position: left top;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 99%); }

  /* Die Schrift bleibt links von der Gestalt.
   *
   * Nur die Ueberschrift und die Zeile unter den Knoepfen, nicht die
   * Augenbraue: die steht oberhalb des Scheitels und hat die ganze Breite
   * fuer sich. Die Knoepfe duerfen ueber dem Foto liegen, sie haben eine
   * eigene Flaeche und bleiben lesbar. */
  .hero:has(.hero-bg-frei) .hero-kopfteil h1,
  .hero:has(.hero-bg-frei) .hero-nachsatz {
    max-width: var(--text-breite, 54%); }
  /* Die Zeile unter den Knoepfen stand in Stahlgrau und lag auf einem
     kurzen Schirm am Aermel: hellgrau auf Haut ist nicht zu lesen. Sie
     bekommt hier die Textfarbe, damit sie auf Papier wie auf Foto steht. */
  .hero:has(.hero-bg-frei) .hero-nachsatz { color: var(--graphit-weich); }
  /* In der halben Breite braucht die Ueberschrift einen kleineren Grad,
     sonst bricht sie mitten im Wort. Vier Zeilen sind gesetzt, nicht
     zufaellig: "Ich baue / die Struktur / hinter Arbeit, / die tief geht." */
  .hero:has(.hero-bg-frei) .hero-kopfteil h1 {
    font-size: clamp(1.65rem, 7.4vw, 2.05rem); line-height: 1.1; }
}
.js .hero-bg-frei img, .js .hero-bg-frei picture {
  animation: heroHerein .8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroHerein {
  from { opacity: 0; transform: translateX(14%); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-bg-frei img, .js .hero-bg-frei picture { animation: none; }
}

/* --- Die Zeichnungen zeichnen sich selbst --------------------------------
 *
 * Die Steuerung liegt im JavaScript, nicht hier. Der Versuch ueber CSS ist
 * an der Kaskade gescheitert: die Regel fuer den gezeichneten Zustand hat
 * nachweislich gepasst und trotzdem nicht gegriffen, die Zeichnungen
 * blieben unsichtbar. Inline gesetzte Werte und die Web-Animations-
 * Schnittstelle sind eindeutig, und eine Zeichnung, die man nicht sieht,
 * ist der schlimmste aller Ausgaenge. Deshalb steht hier nichts mehr. */

/* Inline statt <img>: die Groesse kommt jetzt vom Element selbst. */
.zeichnung svg, .zeichnung-mitte svg {
  display: block; width: 100%; height: auto;
  background: var(--papier-hell); border: 1px solid var(--linie);
  border-radius: 2px; padding: calc(var(--raster) * 0.4); }
.hero-bg-zeichnung svg { display: block; width: 100%; height: auto; }

/* --- Die technische Zeile in der Fusszeile --------------------------------
 * Vier Angaben, alle wahr und im Browser nachprüfbar. Die letzten beiden
 * erzwingt die Inhaltsrichtlinie, die ersten beiden misst die Seite an sich
 * selbst. Ohne JavaScript steht dort der Teil, der immer gilt. */
.footer-technik { margin-top: var(--raster); padding-top: var(--raster);
  border-top: 1px solid var(--linie); }
.footer-technik p { font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stahl); line-height: 1.7;
  max-width: 70ch; }

/* --- Die Grundlinie als Massband ----------------------------------------
 * Die senkrechte Linie laeuft ohnehin durch jeden Abschnitt. Hier bekommt
 * sie eine Marke, die mit dem Lesen mitwandert: ein dunkler Abschnitt vom
 * oberen Rand bis zum Lesestand, unten mit zwei Haekchen abgeschlossen, wie
 * ein Mass auf einer Bauzeichnung. Kein Balken, kein Prozentwert. */
@media (min-width: 940px) {
  .massband { position: fixed; top: var(--kopfzeile, 64px); z-index: 40;
    left: max(calc(var(--raster) * 1.5), calc((100vw - 1128px) / 2 + var(--raster) * 1.5));
    width: 1px; height: 0; background: var(--graphit);
    pointer-events: none; will-change: height; }
  .massband::after { content: ''; position: absolute; bottom: 0;
    left: -4px; width: 9px; height: 1px; background: var(--graphit); }
  .massband::before { content: ''; position: absolute; top: 0;
    left: -4px; width: 9px; height: 1px; background: var(--graphit); }
}
@media (max-width: 939px) { .massband { display: none; } }