@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url(schriften/Manrope-ExtraLight.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url(schriften/Manrope-Light.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(schriften/Manrope-Regular.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(schriften/Manrope-Bold.woff2) format('woff2')}

/* ============================================================================
   GELAENDE. Zweite Fassung der Landingpage, andere Gestaltungsidee.

   Die erste Fassung ist ein Buch: heller Grund, linksbuendiger Satzspiegel,
   duenne Linien, Abschnitte als volle Baender, alles ruhig von oben nach unten.

   Diese hier ist eine Gelaendeaufnahme. Ein einziger dunkler Grund liegt hinter
   der ganzen Seite und bewegt sich, Hoehenschichten, gerechnet aus deinen
   Farben. Darauf liegen helle Blaetter wie Karten auf einem Tisch. Am Rand
   stehen Instrumente: Kapitelzaehler, Hoehenprofil, Eckmarken. Gelesen wird in
   Kapiteln, nicht in Absaetzen, und die Schrift ist deutlich groesser.

   Die Marke bleibt unangetastet: nur navy, creme, sand und die zwei Blautoene,
   nur Manrope, leichte Schnitte im Grossen, Bold nur im Kleinen. Die zwei
   erlaubten Flaechenrichtungen bleiben die einzigen: sand mit navy, navy mit
   creme. Blau traegt Text nur auf dunklem Grund.
   ========================================================================== */

:root{
  /* Die Seite ist von sich aus dunkel. Ohne diese Angabe legt Samsung
     Internet im Dunkelmodus eine eigene Umfaerbung darueber. */
  color-scheme:dark;
  /* Luft an jeder Abschnittsnaht und die Hoehe des Strichs darin. Beides
     steht hier, weil auch das Laufband und der Auftakt damit rechnen. */
  --polster:clamp(72px,11vh,150px);
  --strich:clamp(34px,5vh,52px);
  --navy:#051F4C;
  --creme:#FDF9F1;
  --sand:#EADEC8;
  --blau:#7092CD;
  --blau-hell:#8AA6D6;
  --mut:#8A94A6;
  --tief:#03112A;          /* keine Flaechenfarbe, nur Tiefe: Schatten, Verlauf */

  --rand:clamp(20px,5vw,72px);
  --satz:clamp(320px,60ch,72ch);
  /* Ein Mass fuer alles, was auf dem Grund steht. Damit fluchtet jede Flaeche. */
  --blattbreite:min(100% - 2*var(--rand),1180px);
  /* Nur gebrochen, nicht rund: der Uebergang vom weichen Grund zur Flaeche
     soll nicht mehr hart sein, die Flaeche aber Flaeche bleiben. */
  --rund:10px;
  --rund-klein:5px;

  --e-weich:cubic-bezier(0.22,1,0.36,1);
  --e-hart:cubic-bezier(0.65,0,0.35,1);
  --e-zu:cubic-bezier(0.64,0,0.78,0);
  --e-mikro:cubic-bezier(0.4,0,0.2,1);

  --leiste-h:72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* Ein einzelnes Wort auf der letzten Zeile eines Absatzes sieht nach Zufall
   aus. text-wrap:pretty zieht dafuer ein Wort aus der vorletzten Zeile mit
   herunter. Browser ohne diese Regel setzen wie bisher, es geht nichts kaputt. */
p,li,figcaption,blockquote,summary{text-wrap:pretty}

body{
  margin:0;
  background:var(--navy);
  color:var(--creme);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:300;
  font-size:clamp(1.0625rem,1.15vw,1.1875rem);
  line-height:1.65;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--blau-hell);color:var(--navy)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blau-hell);outline-offset:4px;
}

/* ---------------------------------------------------------------- Der Grund
   Ein einziges bewegtes Bild hinter der ganzen Seite. Es scrollt nicht mit,
   deshalb wandert man beim Scrollen durch das Gelaende, statt es zu verlassen.
   Darueber ein Verlauf aus navy, damit Text jederzeit trägt, und eine feine
   Koernung, die die Flaeche lebendig haelt. */
.grund{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--navy)}
.grund-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:saturate(.8)}
.grund-schleier{position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 16%, rgba(5,31,76,.34) 0%, rgba(5,31,76,.80) 52%, rgba(3,17,42,.94) 100%),
    linear-gradient(180deg, rgba(3,17,42,.62) 0%, rgba(5,31,76,.44) 40%, rgba(3,17,42,.80) 100%);
}
.grund-korn{position:absolute;inset:-50%;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eckmarken wie auf einem Messblatt */
.rahmenwerk{position:fixed;inset:0;z-index:60;pointer-events:none}
.ecke{position:absolute;width:14px;height:14px;opacity:.32}
.ecke::before,.ecke::after{content:"";position:absolute;background:var(--blau-hell)}
.ecke::before{left:0;top:0;width:100%;height:1px}
.ecke::after{left:0;top:0;width:1px;height:100%}
.ecke-lo{left:16px;top:16px}
.ecke-ro{right:16px;top:16px;transform:scaleX(-1)}
.ecke-lu{left:16px;bottom:16px;transform:scaleY(-1)}
.ecke-ru{right:16px;bottom:16px;transform:scale(-1)}
@media (max-width:700px){ .rahmenwerk{display:none} }

/* ------------------------------------------------------------- Die Leiste */
.leiste{
  position:fixed;top:0;left:0;right:0;z-index:70;height:var(--leiste-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 max(var(--rand),34px);
  transition:height 420ms var(--e-weich),background 420ms var(--e-mikro),
             border-color 420ms var(--e-mikro);
  border-bottom:1px solid transparent;
}
.leiste.eng{height:56px;background:rgba(5,31,76,.86);border-bottom-color:rgba(138,166,214,.22)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .leiste.eng{background:rgba(5,31,76,.6);
    -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
}
.leiste-marke{display:block;width:132px;height:34px;color:var(--creme);text-decoration:none;
  transition:opacity 300ms var(--e-mikro)}
@supports (mask-image:url()) or (-webkit-mask-image:url()){
  .leiste-marke{background-color:currentColor;
    -webkit-mask:url(bilder/wortmarke.svg) left center/contain no-repeat;
            mask:url(bilder/wortmarke.svg) left center/contain no-repeat}
}
.leiste-mitte{justify-self:center;min-width:0;position:relative}
.leiste-kapitel{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blau-hell);opacity:.8;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.leiste-rechts{justify-self:end;display:flex;align-items:center;gap:18px}
.leiste-zaehler{font-size:.6875rem;font-weight:700;letter-spacing:.16em;color:var(--blau-hell);
  font-variant-numeric:tabular-nums;opacity:.75}
.leiste-zaehler b{font-weight:700;color:var(--creme)}
.leiste-zaehler i{font-style:normal;opacity:.5;margin:0 3px}
@media (max-width:700px){
  /* Der Kapitelname ist zu breit, der Knopf bleibt: Ziffern und Pfeil genuegen.
     Dazu schmalere Raender, sonst stossen Marke, Knopf und Bewerben aneinander. */
  .leiste{padding:0 18px}
  .leiste-mitte .leiste-kapitel{display:none}
  .menue-knopf{gap:8px;padding:12px 8px}
  .leiste-rechts{gap:10px}
  .leiste-rechts .knopf.klein{padding:12px 14px;letter-spacing:.1em}
  .leiste-marke{width:98px;height:26px}
}
@media (max-width:359px){ .leiste-rechts .knopf.klein{padding:12px 11px;font-size:.6875rem} }

/* -------------------------------------------------------- Das Hoehenprofil
   Links am Rand: eine Linie, auf der ein Strich mitwandert. Zeigt, wie weit
   man im Gelaende gekommen ist. Ersetzt die Leseachse der ersten Fassung. */
.profil{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:65;
  height:min(46vh,340px);width:14px;pointer-events:none;opacity:0;
  transition:opacity 600ms var(--e-mikro)}
.profil.da{opacity:1}
.profil-linie{position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--blau-hell);opacity:.25}
.profil-stand{position:absolute;left:0;top:0;width:14px;height:1px;background:var(--creme);
  box-shadow:0 0 12px rgba(253,249,241,.5)}
.profil-stand::after{content:"";position:absolute;left:0;top:-3px;width:5px;height:7px;
  background:var(--creme)}
@media (max-width:1100px){ .profil{display:none} }

/* -------------------------------------------------------------- Typografie */
/* Zeilenabstand nicht unter 1.0: sonst trifft die Unterlaenge eines g auf den
   Punkt eines i oder auf einen Umlaut der naechsten Zeile. Im Deutschen kommt
   das oft vor. */
.riesig{
  margin:0;font-weight:200;
  /* Nach oben zusaetzlich an der Fensterhoehe gedeckelt: auf flachen Laptops
     (1366x768, 1920x1080 bei 125 Prozent, 13-Zoll-MacBook) blieb der Knopf
     sonst unter der Falte. Am Handy und auf grossen Bildschirmen greift der
     Deckel nicht. */
  font-size:min(clamp(2.6rem,7.6vw,7.5rem),10vh);
  line-height:1.04;letter-spacing:-.035em;text-wrap:balance;
}
.gross{
  margin:0;font-weight:200;
  font-size:clamp(2rem,5.2vw,4.75rem);
  line-height:1.1;letter-spacing:-.03em;text-wrap:balance;
}
.mittelgross{margin:0;text-wrap:balance;font-weight:300;font-size:clamp(1.5rem,2.4vw,2.25rem);
  line-height:1.18;letter-spacing:-.015em}
.fuehrung{font-weight:200;font-size:clamp(1.1875rem,1.75vw,1.625rem);line-height:1.5;
  max-width:46ch;margin:0}
.fuehrung.mittig{margin-inline:auto}
.marke{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blau-hell);margin:0}
.marke.leise{opacity:.7}
.klein{font-size:.875rem;line-height:1.65;color:var(--blau-hell);margin:0}
.ph{opacity:.85}
.ph::before{content:"[ "}
.ph::after{content:" ]"}

/* ------------------------------------------------------------- Die Kapitel */
main{position:relative;z-index:10}
/* Beim Sprung auf ein Kapitel bleibt Platz fuer die feste Leiste, sonst
   verdeckt sie den Anfang des Abschnitts. */
.kapitel{position:relative;padding:var(--polster) 0;
  overflow-x:clip;scroll-margin-top:calc(var(--leiste-h) + 20px)}
.kapitel.voll{min-height:100vh;min-height:100svh;display:grid;align-content:center;
  padding-top:var(--polster-oben)}
/* Nur ganz oben auf der Seite steht die Leiste wirklich ueber dem Inhalt und
   braucht mehr Platz. Das Formular liegt mitten im Lauf und bekommt dieselbe
   Naht wie jeder andere Abschnitt. */
#auftakt{--polster-oben:calc(var(--leiste-h) + 40px)}
#anfrage{--polster-oben:var(--polster)}
.mitte{width:var(--blattbreite);margin-inline:auto;text-align:center}
.szene{position:relative;z-index:1;width:var(--blattbreite);margin-inline:auto;text-align:center;
  padding-bottom:clamp(34px,4.5vh,56px)}
/* Unter der Ueberschrift wird der Grund ruhiger, damit die Linien nicht
   gegen die Buchstaben arbeiten. Kein Kasten, nur ein weicher Schatten. */
.szene::before{content:"";position:absolute;z-index:-1;
  left:max(-8%,calc(-1 * var(--rand)));right:max(-8%,calc(-1 * var(--rand)));
  top:-14%;bottom:-6%;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 46%,
    rgba(3,17,42,.62) 0%, rgba(3,17,42,.34) 52%, rgba(3,17,42,0) 100%)}
.szene.auf-links{text-align:left}
.szene .gross + .fuehrung{margin-top:clamp(22px,3.2vh,38px)}
.szene .ziffer + .gross{margin-top:0}
.ziffer{display:block;font-size:.75rem;font-weight:700;letter-spacing:.3em;
  color:var(--blau-hell);opacity:.55;margin-bottom:22px;font-variant-numeric:tabular-nums}

/* Der Auftakt */
.auftakt .marke{margin-bottom:clamp(20px,3vh,34px)}
.auftakt .riesig{margin-bottom:clamp(26px,4vh,44px)}
.auftakt .fuehrung{margin-inline:auto;margin-bottom:clamp(30px,4vh,44px)}
.auftakt .marke.leise{margin-top:clamp(24px,3.5vh,40px)}
/* Flache, breite Fenster (Laptops ohne Vollbild): engere Abstaende im Auftakt,
   damit Ueberschrift, Vorspann und Knopf gemeinsam ins erste Bild passen. */
@media (min-width:900px) and (max-height:820px){
  #auftakt{--polster-oben:calc(var(--leiste-h) + 16px)}
  .auftakt .ziffer{margin-bottom:12px}
  .auftakt .marke{margin-bottom:12px}
  .auftakt .riesig{margin-bottom:22px}
  .auftakt .fuehrung{margin-bottom:22px}
}
/* Die Zeilenmaske schneidet die Unterlaengen ab, wenn sie genau so hoch ist
   wie die Zeile. Deshalb unten Platz dazugeben und ihn mit einem negativen
   Aussenabstand wieder aus dem Satz nehmen: die Maske wird hoeher, der
   Zeilenabstand bleibt. */
.zl{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.zl > span{display:block}
/* Der Strich am Fuss des Auftakts sitzt in derselben Naht wie alle anderen,
   also mittig zwischen dem Ende des Auftakts und dem Laufband. */
.weiter{position:absolute;left:50%;bottom:calc(var(--strich) / -2);transform:translateX(-50%)}
/* Derselbe Strich am Anfang jedes weiteren Kapitels. Er zeigt, dass es
   weitergeht, und gibt allen Abschnittswechseln denselben Takt. Zentriert
   ueber margin, nicht ueber transform: die Bewegung braucht das transform
   fuer sich. Jedes zweite laeuft versetzt, damit zwei sichtbare Striche nicht
   im Gleichschritt pulsieren. */
/* Der Strich steht in der Luecke zwischen zwei Abschnitten, also mittig
   zwischen dem Polster des Vorgaengers und dem eigenen. Beide sind gleich
   gross, deshalb liegt die Mitte genau auf der Kapitelkante und der Strich
   haengt mit seiner halben Hoehe darueber. Das gilt auch nach dem Laufband,
   seit dieses dasselbe Polster traegt. */
.kapitel:not(#auftakt)::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  --oben:var(--polster);            /* Polster zwischen Strich und Kapitel */
  --vor:var(--polster);             /* Polster zwischen Vorgaenger und Strich */
  left:50%;margin-left:-.5px;
  top:calc((var(--oben) - var(--vor)) / 2 - var(--strich) / 2);
  width:1px;height:var(--strich);
  background:linear-gradient(180deg,transparent,var(--blau-hell));
  transform-origin:top center;
  animation:sinken 2600ms var(--e-mikro) infinite;
}
.kapitel:nth-of-type(2n)::before{animation-delay:-1300ms}
.weiter-strich{display:block;width:1px;height:var(--strich);background:linear-gradient(180deg,transparent,var(--blau-hell));
  transform-origin:top center;animation:sinken 2600ms var(--e-mikro) infinite}
@keyframes sinken{0%{transform:scaleY(.2);opacity:0}40%{opacity:.9}100%{transform:scaleY(1);opacity:0}}

/* ------------------------------------------------------------- Das Laufband
   Die acht Gruppen, auf die ich im Gesicht schaue, laufen langsam durch. */
/* Das Laufband ist eine Naht wie jede andere und bekommt oben und unten
   dasselbe Polster. Ohne das war die Luft dort nur halb so gross wie an
   allen uebrigen Abschnittswechseln. */
.laufband{position:relative;z-index:10;overflow:hidden;margin:var(--polster) 0;
  border-top:1px solid rgba(138,166,214,.16);border-bottom:1px solid rgba(138,166,214,.16);
  padding:16px 0}
.laufband-spur{display:flex;align-items:center;gap:0;width:max-content;
  animation:laufen 96s linear infinite}
.laufband-spur span{font-size:clamp(.9375rem,1.5vw,1.25rem);font-weight:200;
  letter-spacing:.02em;color:var(--creme);opacity:.72;white-space:nowrap;padding:0 26px}
.laufband-spur i{display:block;width:5px;height:5px;background:var(--blau-hell);opacity:.55;flex:0 0 auto}
@keyframes laufen{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --------------------------------------------------------------- Blaetter
   Helle Karten, die auf dem dunklen Gelaende aufliegen. Der Schatten ist
   technische Tiefe, keine Flaechenfarbe: er sorgt dafuer, dass das Blatt
   ueber dem Grund liegt und nicht in ihm klebt. */
/* Ein Blatt ist kein Bedienfeld, sondern ein Kartenblatt.
   Deshalb kein Schlagschatten und kein durchgezogener Rahmen, sondern
   Passmarken an den Ecken, wie sie auf einem Messblatt stehen. Und auf dem
   hellen Blatt ist dasselbe Gelaende gedruckt, nur blass in Navy auf Sand.
   Vorder- und Hintergrund sind damit dieselbe Zeichnung in zwei Farben. */
.blatt{
  position:relative;overflow:clip;border-radius:var(--rund);
  width:var(--blattbreite);margin-inline:auto;
  padding:clamp(44px,5.5vw,80px) clamp(22px,5.5vw,80px) clamp(28px,3.5vw,52px);
  --marke:rgba(5,31,76,.32);
}
.blatt::before{
  content:"";position:absolute;inset:17px;pointer-events:none;--d:20px;
  background:
    linear-gradient(var(--marke),var(--marke)) left    top/var(--d) 1px no-repeat,
    linear-gradient(var(--marke),var(--marke)) left    top/1px var(--d) no-repeat,
    linear-gradient(var(--marke),var(--marke)) right   top/var(--d) 1px no-repeat,
    linear-gradient(var(--marke),var(--marke)) right   top/1px var(--d) no-repeat,
    linear-gradient(var(--marke),var(--marke)) left bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--marke),var(--marke)) left bottom/1px var(--d) no-repeat,
    linear-gradient(var(--marke),var(--marke)) right bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--marke),var(--marke)) right bottom/1px var(--d) no-repeat;
}
.blatt[data-blatt]::after{
  content:attr(data-blatt);position:absolute;left:30px;top:24px;
  font-size:.625rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--marke);pointer-events:none;
}
.blatt.hell{
  color:var(--navy);--marke:rgba(5,31,76,.34);
  background-color:var(--sand);
  background-image:linear-gradient(rgba(234,222,200,.80),rgba(234,222,200,.80)),
                   url(bilder/blattgrund.jpg);
  background-size:auto,cover;background-position:center,center;
}
/* Das dunkle Blatt hat gar keine Kante: es ist eine Verdichtung des Grundes,
   die nach aussen ausblendet. */
.blatt.dunkel{
  color:var(--creme);--marke:rgba(138,166,214,.42);
  background:radial-gradient(130% 100% at 50% 50%,
    rgba(3,17,42,.78) 0%, rgba(3,17,42,.66) 52%, rgba(3,17,42,0) 100%);
}
.blatt.hell .marke{color:var(--navy);opacity:.55}
.blatt.dunkel .marke{color:var(--blau-hell);opacity:1}

.satz{max-width:var(--satz)}
.satz p{margin:0;padding-bottom:1.15em}
.satz p:last-child{padding-bottom:0}
/* Wie ein Textblock die Breite fuellt, haengt davon ab, was er enthaelt.
   Eine pauschale Spaltenregel zerreisst sonst einen einzelnen Absatz mitten
   im Satz, und man muss beim Lesen von unten links nach oben rechts springen.

   Ein Absatz allein  -> Vorspann: ganze Breite, etwas groesser, eine Spalte.
   Zwei oder mehr     -> zwei Spalten, jeder Absatz bleibt ganz (.zwei).
   Text neben Liste   -> nebeneinander statt untereinander (.paar).
   Alles andere       -> eine Spalte in Satzbreite. */
.blatt .satz{max-width:var(--satz)}
.blatt .satz.vorspann{max-width:78ch;font-size:clamp(1.125rem,1.4vw,1.3125rem);
  line-height:1.6}
.blatt p.satz{max-width:78ch}
@media (min-width:900px){
  .blatt .satz.zwei{max-width:none;columns:2;column-gap:clamp(38px,4vw,72px)}
  .blatt .satz.zwei p{break-inside:avoid}
}
/* Im Kasten stehen die Absaetze links und die Liste rechts. So fuellen zwei
   verschiedene Dinge die Breite, statt einen Text auseinanderzureissen. */
.paar{display:grid;gap:clamp(26px,3vw,52px)}
@media (min-width:900px){ .paar{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} }
.paar .satz{max-width:none}
.paar .hakenliste{margin:0;align-self:start}
/* Der Schlusssatz gehoert zu beiden Spalten, nicht zur linken. Als Absatz in
   Satzbreite begann er unter der linken Spalte und lief unter die rechte
   hinein. Jetzt steht er mittig unter beiden, so wie der Schlusssatz im
   Ablauf, und fuehrt zum Aufruf. */
/* Endet ein Blatt mit einem Satz und dem Aufruf darunter, stehen beide in
   derselben Achse. Ein linksbuendiger Block ueber einem mittigen Knopf sieht
   aus, als gehoerten sie nicht zusammen. */
.schluss{text-align:center;margin-inline:auto}
.paar + .schluss{margin:clamp(32px,4.2vh,52px) auto 0;max-width:44ch;
  font-weight:200;font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.44;
  letter-spacing:-.01em}
/* Der Schlussabsatz der Lesart ist ein ganzer Absatz, kein einzelner Satz.
   Mittig braucht er ein engeres Mass, damit die Zeilen sauber auslaufen. Am
   Handy bleibt er linksbuendig: dort waeren es neun mittige Zeilen, und die
   liest man schlechter als einen ruhigen Block. */
.blatt .satz.vorspann.schluss{max-width:62ch}
@media (max-width:639px){ .blatt .satz.vorspann.schluss{text-align:left} }

/* Die fuenf Fragen: grosse Zeilen mit laufender Nummer */
.fragenliste{list-style:none;margin:0 0 clamp(40px,6vh,72px);padding:0;display:grid}
.fragenliste li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,38px);
  align-items:start;padding:clamp(18px,2.4vw,30px) 0;
  border-top:1px solid rgba(5,31,76,.18)}
.fragenliste li:last-child{border-bottom:1px solid rgba(5,31,76,.18)}
.fragenliste span{font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  color:var(--navy);opacity:.42;font-variant-numeric:tabular-nums;padding-top:.7em}
.fragenliste p{margin:0;font-weight:200;font-size:clamp(1.25rem,2.5vw,2rem);
  line-height:1.24;letter-spacing:-.015em}

.kasten{margin-top:clamp(44px,6vh,80px);padding-top:clamp(36px,5vh,60px);
  border-top:1px solid rgba(5,31,76,.2)}
.kasten .mittelgross{margin:14px 0 26px}
.hakenliste{list-style:none;margin:30px 0;padding:0;display:grid}
.hakenliste li{position:relative;padding:14px 0 14px 30px;
  border-top:1px solid rgba(5,31,76,.16)}
.hakenliste li:last-child{border-bottom:1px solid rgba(5,31,76,.16)}
.hakenliste li::before{content:"";position:absolute;left:0;top:1.5em;width:14px;height:1px;
  background:var(--navy);opacity:.5}
/* Alle Handlungsaufrufe stehen mittig, auf dem Blatt wie frei auf dem Grund. */
.tat{margin:clamp(34px,5vh,56px) 0 0;text-align:center}
/* Steht ein Aufruf nicht auf einem Blatt, sondern frei auf dem Gelaende,
   braucht er dasselbe Mass wie alles andere, sonst sitzt er am Bildrand. */
.tat.frei{width:var(--blattbreite);margin:clamp(40px,6vh,72px) auto 0;text-align:center}

/* ------------------------------------------------------------------ Knopf */
/* Der Knopf ist ein kleines Blatt: dasselbe Papier, dieselben Passmarken.
   So bleibt auch die Handlungsaufforderung Teil der Karte und nicht ein
   Bedienelement, das von woanders stammt. */
.knopf{
  position:relative;
  display:inline-block;font-family:inherit;cursor:pointer;text-decoration:none;text-align:center;
  font-size:1rem;font-weight:700;letter-spacing:.02em;line-height:1;
  padding:20px 34px;border-radius:var(--rund-klein);
  --km:rgba(5,31,76,.3);
  background-color:var(--creme);color:var(--navy);border:1px solid var(--creme);
  background-image:linear-gradient(rgba(253,249,241,.84),rgba(253,249,241,.84)),
                   url(bilder/blattgrund.jpg);
  background-size:auto,cover;background-position:center,center;
  transition:background 260ms var(--e-mikro),color 260ms var(--e-mikro),
             border-color 260ms var(--e-mikro),
             transform 340ms var(--e-weich),opacity 340ms var(--e-weich);
}
.knopf.gross{padding:24px 44px;font-size:1.0625rem}
.knopf::before{
  content:"";position:absolute;inset:6px;pointer-events:none;--d:14px;
  background:
    linear-gradient(var(--km),var(--km)) left    top/var(--d) 1px no-repeat,
    linear-gradient(var(--km),var(--km)) left    top/1px var(--d) no-repeat,
    linear-gradient(var(--km),var(--km)) right   top/var(--d) 1px no-repeat,
    linear-gradient(var(--km),var(--km)) right   top/1px var(--d) no-repeat,
    linear-gradient(var(--km),var(--km)) left bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--km),var(--km)) left bottom/1px var(--d) no-repeat,
    linear-gradient(var(--km),var(--km)) right bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--km),var(--km)) right bottom/1px var(--d) no-repeat;
}
.knopf.klein{padding:12px 20px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  background-image:none;background-color:transparent;color:var(--creme);
  border-color:rgba(253,249,241,.4);--km:rgba(253,249,241,.34)}
.knopf.klein::before{inset:4px;--d:10px}
.blatt.hell .knopf{background-image:none;background-color:var(--navy);color:var(--creme);
  border-color:var(--navy);--km:rgba(253,249,241,.42)}
a.knopf:active,button.knopf:active{transform:scale(.97);opacity:.82;
  transition:transform 100ms ease-out,opacity 100ms ease-out}

/* ------------------------------------------------------------- Bildtafeln
   Volle Breite, das Bild liegt tiefer als der Text darauf. */
/* Die Bildtafel steht nicht als Band im Gelaende, sie taucht daraus auf und
   wieder ab. Deshalb oben und unten ausgeblendet statt hart geschnitten. */
.tafel{position:relative;margin:clamp(52px,7vh,96px) 0 0;padding:0;
  height:clamp(480px,80vh,860px)}
/* Die Maske liegt auf dem Bildgrund, nicht auf der Tafel. Sonst wuerde der
   Satz mit ausgeblendet und seine letzte Zeile stuende blasser da als die
   Zeilen darueber. */
.tafel-grund{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.tafel img{position:absolute;left:50%;top:50%;width:112%;height:112%;
  transform:translate3d(-50%,calc(-50% + var(--py,0px)),0);
  object-fit:cover;object-position:50% 30%;
  filter:grayscale(.25) contrast(1.05);opacity:.62}
.tafel-grund::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,31,76,.58),rgba(3,17,42,.78))}
.tafel-satz{position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(28px,5vw,80px);margin:0;
  font-weight:200;font-size:clamp(1.5rem,3.6vw,3.25rem);line-height:1.12;
  letter-spacing:-.025em;color:var(--creme);max-width:20ch;text-wrap:balance}

.bildfuss{width:var(--blattbreite);margin:14px auto 0}

/* --------------------------------------------------------- Der Weg zurueck
   Vier Bausteine in einer Reihe, darunter der Rueckpfeil ueber die volle
   Breite. Er zeigt nach links, weil der Weg der Authentizitaet der Rueckweg
   zum Ursprung ist. Der Ablauf laeuft von selbst, sobald die Reihe im Bild
   steht; am Scrollen haengt nichts. */
.wegwerk{position:relative;z-index:1;width:var(--blattbreite);margin-inline:auto}
.stationen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px)}
@media (min-width:640px){ .stationen{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .stationen{grid-template-columns:repeat(4,1fr)} }
.station{position:relative;padding:clamp(26px,2.4vw,34px);border-radius:var(--rund-klein);
  background:radial-gradient(120% 90% at 50% 50%,
    rgba(3,17,42,.72) 0%, rgba(3,17,42,.5) 55%, rgba(3,17,42,0) 100%)}
.station::before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  --m:rgba(138,166,214,.4);--d:16px;
  background:
    linear-gradient(var(--m),var(--m)) left    top/var(--d) 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left    top/1px var(--d) no-repeat,
    linear-gradient(var(--m),var(--m)) right   top/var(--d) 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right   top/1px var(--d) no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--m),var(--m)) left bottom/1px var(--d) no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/var(--d) 1px no-repeat,
    linear-gradient(var(--m),var(--m)) right bottom/1px var(--d) no-repeat;
}
.station-nr{display:block;font-size:clamp(2.25rem,3.4vw,3.25rem);font-weight:200;line-height:1;
  color:var(--blau-hell);opacity:.5;font-variant-numeric:tabular-nums}
.station h3{margin:18px 0 10px;font-weight:300;font-size:clamp(1.25rem,1.7vw,1.5rem);
  letter-spacing:-.015em;line-height:1.18}
.station p{margin:0;color:var(--creme);opacity:.78;font-size:.9375rem;line-height:1.6}

.wegrueck{margin-top:clamp(26px,3vw,40px)}
/* Luft zwischen Rueckpfeil und dem Blatt darunter */
.wegwerk + .blatt,.lesewerk + .blatt,.ablaufwerk + .blatt{margin-top:clamp(44px,6vh,80px)}
.rueck-pfeil{display:flex;align-items:center;gap:10px}
.rueck-spitze{width:13px;height:13px;flex:0 0 auto}
.rueck-spitze polyline{stroke:var(--blau-hell);stroke-width:1.25;fill:none}
.rueck-balken{flex:1 1 auto;height:1px;background:var(--blau-hell);opacity:.7;
  transform-origin:right center}
.rueck-marke{margin:12px 0 0;font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blau-hell)}

/* Ablauf der Reihe. Die Klassen sitzen nur, wenn das Skript laeuft. */
.js .station{opacity:0;transform:translate3d(0,22px,0)}
.js .station.an{opacity:1;transform:none;
  transition:opacity 620ms var(--e-weich),transform 620ms var(--e-weich)}
.js .rueck-balken{transform:scaleX(0)}
.js .wegrueck.an .rueck-balken{transform:scaleX(1);transition:transform 900ms var(--e-weich)}
.js .rueck-spitze,.js .rueck-marke{opacity:0}
.js .wegrueck.an .rueck-spitze{opacity:1;transition:opacity 320ms 700ms linear}
.js .wegrueck.an .rueck-marke{opacity:1;transition:opacity 420ms 760ms linear}

/* ------------------------------------------------------------- Die Lesart
   Die Tafel bleibt stehen, die vier Schritte ziehen daran vorbei. */
.lesewerk{position:relative;z-index:1;width:var(--blattbreite);margin-inline:auto;
  display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:1000px){ .lesewerk{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} }
.lesewerk-tafel{margin:0;position:relative;align-self:start}
@media (min-width:1000px){ .lesewerk-tafel{position:sticky;top:calc(var(--leiste-h) + 40px)} }
.lesewerk-tafel img{width:100%;height:auto;border-radius:var(--rund);
  filter:grayscale(.3) contrast(1.04);opacity:.88}
.lesewerk-schritte{list-style:none;margin:0;padding:0;display:grid;align-content:start}
.lesewerk-schritte li{display:grid;grid-template-columns:64px 1fr;gap:6px clamp(16px,2vw,28px);
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid rgba(138,166,214,.22)}
/* Das <li> hat drei Kinder, das Raster zwei Spalten. Ohne feste Zuordnung
   rutscht der Absatz in die 64px breite Bildspalte und bricht nach jedem Wort. */
.lesewerk-schritte li > figure{grid-column:1;grid-row:1 / span 2;align-self:start;width:64px;height:64px}
.lesewerk-schritte li > h3{grid-column:2;grid-row:1}
.lesewerk-schritte li > p{grid-column:2;grid-row:2}
/* Die erste Trennlinie liegt auf der Oberkante des Holzschnitts */
.lesewerk-schritte li:first-child{padding-top:0;border-top:0}
.lesewerk-schritte li:last-child{border-bottom:1px solid rgba(138,166,214,.22)}
.lesewerk-schritte figure{margin:0}
/* Die Zeichen sind Tusche auf hellem Papier. Auf dunklem Grund wirkten sie als
   helle Kaesten. Jetzt sind sie kleine Siegel: eine dunkle Kachel wie die
   Bausteine, darin die umgekehrte Zeichnung. Die Mischung passiert innerhalb
   der Kachel, denn den Grund hinter der Seite erreicht sie nicht. */
.lesewerk-schritte figure{isolation:isolate;border-radius:var(--rund-klein);overflow:hidden;
  background:rgba(3,17,42,.62);box-shadow:inset 0 0 0 1px rgba(138,166,214,.22)}
.lesewerk-schritte figure img{width:64px;height:64px;object-fit:cover;
  filter:grayscale(1) invert(1) contrast(1.9) brightness(.85);mix-blend-mode:screen;opacity:.85}
.lesewerk-schritte h3{margin:0 0 8px;font-weight:300;
  font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.015em;line-height:1.2}
.lesewerk-schritte p{margin:0;opacity:.8;font-size:1rem;line-height:1.62}

/* ------------------------------------------------------- Vergleichsregler */
.vergleich{position:relative;width:var(--blattbreite);margin:0 auto;border-radius:var(--rund);
  aspect-ratio:16/9;overflow:hidden;background:var(--navy);isolation:isolate;
  touch-action:pan-y;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vergleich img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);mix-blend-mode:luminosity;-webkit-user-drag:none}
/* Zwei Ebenen, beide rahmenbreit: die aeussere faehrt um --pos nach rechts und
   schneidet ab, die innere faehrt gleich weit zurueck. Nur transform, also
   ohne Neuzeichnen bei jeder Bewegung. */
.v-lesart{position:absolute;inset:0;overflow:hidden;transform:translateX(var(--pos))}
.v-lesart-innen{position:absolute;inset:0;transform:translateX(calc(-1 * var(--pos)))}
.v-netz{position:absolute;inset:0;width:100%;height:100%}
.v-netz line{stroke:var(--navy);stroke-width:1.25;vector-effect:non-scaling-stroke;opacity:.75}
.v-netz .v-mal circle{fill:none;stroke:var(--navy);stroke-width:1.25;vector-effect:non-scaling-stroke;opacity:.75}
.v-marken{position:absolute;inset:0;pointer-events:none;opacity:var(--marken,0);
  transition:opacity 260ms var(--e-mikro)}
.v-marke{position:absolute;left:60%;transform:translateY(-50%);text-align:left;
  color:var(--navy);font-size:11px;line-height:1.35;background:rgba(253,249,241,.9);
  padding:5px 8px;max-width:46%}
.v-marke b{display:block;font-size:9px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.62}
.v-kante{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--kante,var(--pos)))}
.v-kante::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;
  background:var(--creme);opacity:.85}
/* Der Griff traegt zwei Pfeilspitzen nach links und rechts. Ohne dieses
   Zeichen sieht man dem Kaestchen beim Vorbeiscrollen nicht an, dass man es
   anfassen kann. Gezeichnet in derselben Strichsprache wie der Rueckpfeil.
   Bewusste Abweichung von der ersten Seite, die ohne Zeichen auskommt. */
.v-griff{position:absolute;top:50%;left:0;width:44px;height:44px;margin:-22px 0 0 -22px;
  display:grid;place-items:center;border-radius:var(--rund-klein);
  border:1px solid var(--creme);background:rgba(5,31,76,.5);
  transition:transform 320ms var(--e-weich),background 320ms var(--e-weich)}
.v-griff svg{display:block;width:26px;height:26px}
.v-griff polyline{stroke:var(--creme);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vergleich.greift .v-griff{transform:scale(1.12);background:rgba(5,31,76,.75);
  transition:transform 100ms ease-out,background 100ms ease-out}
.vergleich.lebt .v-lesart,.vergleich.lebt .v-lesart-innen,.vergleich.lebt .v-kante{will-change:transform}
.v-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  pointer-events:none;-webkit-appearance:none;appearance:none;background:none}
.v-regler:focus-visible{opacity:1;outline:2px solid var(--blau-hell);outline-offset:2px}
@media (max-width:899px){
  .v-marke{font-size:0;padding:3px 6px;max-width:52%;line-height:1.1}
  .v-marke b{font-size:10px;letter-spacing:.06em}
}

/* --------------------------------------------------------------- Ablauf */
.ablaufwerk{position:relative;z-index:1;width:var(--blattbreite);margin-inline:auto;
  display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:1000px){ .ablaufwerk{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)} }
/* Die Buehne klebt nur dort, wo sie eine eigene Spalte hat. Am Handy gibt es
   keine zweite Spalte; eine klebende Buehne wuerde ueber dem Schritt liegen,
   den man gerade liest. Dort bekommt jeder Schritt sein eigenes Bild. */
@media (min-width:1000px){
  .ablauf-buehne{position:sticky;top:calc(var(--leiste-h) + 40px);z-index:2;align-self:start}
}
@media (max-width:999px){ .ablauf-buehne{display:none} }
.schritt-bild{display:none}
@media (max-width:999px){
  .schritt-bild{display:block;margin:0 0 clamp(20px,3.4vw,30px);
    aspect-ratio:16/11;overflow:hidden;border-radius:var(--rund);background:var(--tief)}
  .schritt-bild img{width:100%;height:100%;object-fit:cover;opacity:.85;
    filter:grayscale(.35) contrast(1.05)}
}
.buehne-nr{display:block;font-size:clamp(3rem,6vw,7rem);font-weight:200;line-height:.9;
  color:var(--blau-hell);opacity:.4;font-variant-numeric:tabular-nums;margin-bottom:18px}
.buehne-bilder{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--rund);background:var(--tief)}
.buehne-bilder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);filter:grayscale(.35) contrast(1.05);
  transition:opacity 900ms var(--e-weich),transform 1400ms var(--e-weich)}
.buehne-bilder img.da{opacity:.85;transform:scale(1)}
.ablauf-schritte{display:grid;gap:0}
.ablauf-schritt{padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid rgba(138,166,214,.22);
  transition:opacity 500ms var(--e-mikro)}
.ablauf-schritt:last-of-type{border-bottom:1px solid rgba(138,166,214,.22)}
.ablauf-nr{display:block;font-size:.75rem;font-weight:700;letter-spacing:.2em;
  color:var(--blau-hell);opacity:.6;margin-bottom:14px;font-variant-numeric:tabular-nums}
.ablauf-schritt h3{margin:0 0 12px;font-weight:300;font-size:clamp(1.375rem,2.2vw,1.875rem);
  letter-spacing:-.015em;line-height:1.18}
.ablauf-schritt p{margin:0 0 .9em;opacity:.8;font-size:1rem;line-height:1.62}
.ablauf-schritt p:last-child{margin-bottom:0}
.ablauf-tat{padding-top:clamp(30px,4vh,48px);text-align:center}
.ablauf-tat p{margin:0 0 20px;font-weight:200;font-size:clamp(1.25rem,2vw,1.625rem)}

/* --------------------------------------------------------------- Stimmen */
#stimmen:not(:has(.stimme)){display:none}
/* Solange keine echte Stimme eingetragen ist, gehoert der Eintrag auch nicht
   ins Kapitelverzeichnis. Ohne Skript erledigt das diese Regel. */
body:not(:has(#stimmen .stimme)) .kapitelfeld a[href="#stimmen"]{display:none}
/* Jede Stimme ist ein eigenes kleines Blatt, drei nebeneinander, so wie die
   vier Bausteine im Kapitel "Der Weg der Authentizitaet". Oben steht, wer
   schreibt, darunter der Text. Frei geschriebene Texte sind ungleich lang;
   getrennte Blaetter vertragen das, eine gemeinsame Flaeche nicht. */
.stimmen{position:relative;z-index:1;width:var(--blattbreite);margin-inline:auto;
  display:grid;gap:clamp(16px,1.8vw,26px)}
@media (min-width:820px){ .stimmen{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} }
.stimme.blatt{width:auto;margin-inline:0;
  padding:clamp(28px,2.6vw,40px) clamp(24px,2.4vw,36px) clamp(30px,2.8vw,42px)}
/* Die allgemeine Regel fuer Bildunterschriften nimmt Deckkraft zurueck und
   setzt mittig. Hier sitzt das Foto mit drin und der Name ist eine
   Unterschrift, keine Bildunterschrift. */
.blatt.hell figcaption.stimme-wer{display:block;opacity:1;text-align:left;
  margin:0 0 clamp(20px,2.4vw,28px);margin-inline:0;max-width:none}
.blatt.hell figcaption.stimme-wer img{display:block;width:52px;height:52px;margin-bottom:12px;
  object-fit:cover;border-radius:var(--rund-klein);filter:grayscale(1) contrast(1.05)}
.stimme-name b{display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy)}
.stimme-name i{display:block;font-style:normal;font-size:.9375rem;opacity:.6;margin-top:3px}
.stimme-text{margin:0;font-weight:300;
  font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.58}
.stimme-text p{margin:0;padding-bottom:.9em}
.stimme-text p:last-child{padding-bottom:0}
.stimmen-zahl{width:var(--blattbreite);margin:clamp(30px,3.6vw,46px) auto 0;text-align:center}

/* --------------------------------------------------------------- Person */
#person{overflow:hidden}
/* Links die Bildspalte, rechts die Laufbahn. Das Portrait steht oben, das
   Uniformfoto unten; die Spalte verteilt den Platz dazwischen, damit beide
   Spalten auf gleicher Hoehe enden und links kein Loch bleibt. */
.lebenslauf{display:grid;gap:clamp(28px,3.4vw,56px)}
@media (min-width:1000px){
  .lebenslauf{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .lebenslauf-bilder{display:grid;align-content:space-between;gap:clamp(24px,3vh,40px)}
}
.lebenslauf-bilder{display:grid;gap:clamp(24px,3vh,40px);align-content:start}
.lebenslauf .portraet,.lebenslauf .dienstzeit{margin:0}
.lebenslauf img{width:100%;height:auto;border-radius:var(--rund);
  filter:grayscale(.45) contrast(1.04);opacity:.92}
/* Die Biografie liest sich als Laufbahn: vier Stationen, jede mit ihrer Marke
   ueber dem Absatz und einer Haarlinie darueber. So kann man sie ueberfliegen,
   statt einen Block am Stueck lesen zu muessen. Die Marken sind Woerter aus
   seinen eigenen Saetzen. */
.lauf{list-style:none;margin:0;padding:0;display:grid}
.lauf li{padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid rgba(138,166,214,.22)}
.lauf li:first-child{padding-top:0;border-top:0}
.lauf li:last-child{padding-bottom:0}
.lauf .marke{margin-bottom:10px}
.lauf p{margin:0;font-size:1rem;line-height:1.68;opacity:.85}
/* Abschluss des Abschnitts: eine Linie ueber die volle Breite und darunter
   sein Namenszug. Danach folgt der Handlungsaufruf. */
.lauf-schluss{margin-top:clamp(34px,4.5vh,56px);padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid rgba(138,166,214,.22);text-align:center}
.signatur{display:block;width:180px;height:59px;margin:0 auto;opacity:.85;
  background-color:var(--creme)}
@supports (mask-image:url()) or (-webkit-mask-image:url()){
  .signatur{-webkit-mask:url(bilder/namenszug.svg) center/contain no-repeat;
                    mask:url(bilder/namenszug.svg) center/contain no-repeat}
}
@media (max-width:899px){ .signatur{width:150px;height:49px} }
/* Das Uniformfoto ist ein Beleg zur Laufbahn, kein zweites Portrait. Es traegt
   dasselbe Format wie das Portrait, damit die beiden ein Paar sind. Der
   Ausschnitt sitzt etwas hoeher, sonst faellt unten der Weg ins Bild. */
.lebenslauf .dienstzeit img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
@media (max-width:999px){
  /* Am Handy zuerst das Portrait, dann die Laufbahn, zuletzt das Uniformfoto.
     Die Bildspalte loest sich auf, die Reihenfolge macht order. */
  .lebenslauf{display:flex;flex-direction:column}
  .lebenslauf-bilder{display:contents}
  .lebenslauf .portraet{order:1;margin-bottom:clamp(24px,4vh,36px)}
  .lebenslauf-text{order:2;margin-bottom:clamp(28px,4vh,40px)}
  .lebenslauf .dienstzeit{order:3;max-width:330px}
}

/* ------------------------------------------------------- Bildunterschriften
   Eine Familie fuer alle: klein, gedaempft, mittig unter dem Bild, nie
   breiter als das Bild. Regel aus der ersten Fassung. */
figcaption:not(.tafel-satz),.bildfuss{
  margin-top:12px;margin-inline:auto;max-width:100%;text-align:center;
  font-size:.75rem;line-height:1.5;letter-spacing:.02em;
  color:var(--blau-hell);opacity:.8;font-weight:400;
}
.blatt.hell figcaption:not(.tafel-satz){color:var(--navy);opacity:.6}

/* ----------------------------------------------------------------- Fragen */
.faq{max-width:none}
.faq details{border-top:1px solid rgba(5,31,76,.18)}
.faq details:last-child{border-bottom:1px solid rgba(5,31,76,.18)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(22px,2.6vw,30px) 56px clamp(22px,2.6vw,30px) 0;
  font-weight:300;font-size:clamp(1.125rem,1.9vw,1.5rem);line-height:1.3;
  transition:opacity 320ms var(--e-weich);
}
.faq summary:active{opacity:.6;transition:opacity 100ms ease-out}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:18px;height:1px;
  background:currentColor;opacity:.65}
.faq summary::before{content:"";position:absolute;right:16px;top:calc(50% - 9px);width:1px;height:19px;
  background:currentColor;opacity:.65;
  transition:transform 320ms var(--e-zu),opacity 320ms var(--e-zu)}
.faq details[open]:not(.schliesst) summary::before{transform:scaleY(0);opacity:0;
  transition:transform 320ms var(--e-weich),opacity 320ms var(--e-weich)}
.faq .antwort{overflow:hidden}
.faq .antwort > div{padding:0 0 30px;max-width:70ch;font-size:1.0625rem;line-height:1.7;opacity:.85}
/* Ab dieser Breite steht die Frage links und die Antwort rechts daneben. Vorher
   lag rechts ein Drittel des Blattes brach, und der Abschnitt war unnoetig hoch,
   weil Frage und Antwort untereinander standen. Das Zeichen zum Auf- und
   Zuklappen bleibt am rechten Rand der Fragenspalte, also innerhalb der
   Flaeche, die man anklickt. */
@media (min-width:900px){
  .faq details{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
    column-gap:clamp(30px,4vw,64px);align-items:start}
  .faq summary{grid-column:1;grid-row:1}
  .faq .antwort{grid-column:2;grid-row:1}
  .faq .antwort > div{padding-top:clamp(22px,2.6vw,30px);max-width:none}
}

/* --------------------------------------------------------------- Formular */
/* Zwei kurze Bloecke ueber dem Formular: wie ich auswaehle und was vertraulich
   bleibt. Nebeneinander, damit sie das Formular nicht wegdruecken.
   Ein Mass fuer beides: die Bloecke standen frueher auf 900 und das Formular
   auf 760, beide mittig. Dadurch ragten die Bloecke auf jeder Seite 70 px
   weiter hinaus und die Flucht war gebrochen. */
.anfrage{--anfragebreite:min(100%,760px)}
.aufnahme{width:var(--anfragebreite);margin:clamp(34px,5vh,56px) auto 0;text-align:left;
  display:grid;row-gap:clamp(22px,3vw,44px);column-gap:clamp(20px,3vw,40px)}
@media (min-width:760px){ .aufnahme{grid-template-columns:1fr 1fr} }
.aufnahme .marke{margin-bottom:10px}
.aufnahme p{margin:0;font-size:.9375rem;line-height:1.65;opacity:.8}
.anfrage form{margin:clamp(34px,5vh,56px) auto 0;width:var(--anfragebreite);text-align:left}
/* Die Felder bleiben linksbuendig, der Absendeknopf steht wie alle anderen mittig */
.anfrage form > .knopf{display:block;margin-inline:auto}
.feldreihe{display:grid;gap:0}
@media (min-width:700px){ .feldreihe{grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px)} }
.feld{display:block;margin-bottom:26px}
.feld .marke{margin-bottom:10px}
.feld input,.feld textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(138,166,214,.45);
  border-radius:0;color:var(--creme);font-family:inherit;font-size:1.125rem;font-weight:300;
  padding:14px 0;transition:border-color 240ms var(--e-mikro);
}
.feld textarea{resize:vertical;min-height:110px;line-height:1.6}
.feld input:focus,.feld textarea:focus{border-bottom-color:var(--creme)}
.feld input:focus-visible,.feld textarea:focus-visible{outline-offset:6px}
.feld input::placeholder,.feld textarea::placeholder{color:var(--blau-hell);opacity:.5}
.feld.fehlt input,.feld.fehlt textarea{border-bottom-color:var(--creme)}
.feld.fehlt .marke{color:var(--creme)}
.form-stand{margin:22px 0 0;color:var(--creme);opacity:.92;font-size:.9375rem;line-height:1.6}
/* Nur der Hinweis im Formular geht mit dem Knopf mittig. Der Rechtstext
   darunter traegt dieselbe Klasse, bleibt aber linksbuendig: ein langer
   Absatz mittig gesetzt liest sich schlecht. */
.anfrage form .klein{margin-top:16px;text-align:center}
.anfrage .rechtlich{margin-top:clamp(44px,6vh,72px)}
.rechtlich{margin:clamp(44px,6vh,72px) auto 0;width:min(100%,760px);opacity:.62;
  font-size:.8125rem;line-height:1.6;text-align:left}

/* ------------------------------------------------------------------- Fuss */
.fuss{position:relative;z-index:10;margin-top:0;
  padding:clamp(50px,8vh,96px) var(--rand) clamp(36px,5vh,56px);
  background:rgba(3,17,42,.72);border-top:1px solid rgba(138,166,214,.22)}
.fuss-marke-block{display:grid;gap:20px;align-content:start}
.fuss-marke{display:block;width:170px;height:44px;background-color:var(--creme)}
@supports (mask-image:url()) or (-webkit-mask-image:url()){
  .fuss-marke{-webkit-mask:url(bilder/wortmarke.svg) left center/contain no-repeat;
                      mask:url(bilder/wortmarke.svg) left center/contain no-repeat}
}
.fuss-satz{margin:0;max-width:38ch;opacity:.7;font-size:.9375rem;line-height:1.7}
.fuss-gitter{width:min(100%,1180px);margin:0 auto;display:grid;gap:34px}
@media (min-width:820px){ .fuss-gitter{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.7fr);gap:clamp(30px,4vw,64px)} }
.fuss-gitter .marke{margin-bottom:14px}
/* Groessere Trefferflaeche: mit reiner Zeilenhoehe sind die Verweise am Handy
   nur rund 30px hoch, das ist fuer den Daumen zu wenig. */
.fuss-gitter a{display:block;color:var(--creme);text-decoration:none;opacity:.72;
  font-size:.9375rem;line-height:1.5;padding:11px 0;
  transition:opacity 300ms var(--e-weich)}
.fuss-gitter a:active{opacity:.45;transition:opacity 100ms ease-out}
.fuss-gitter p{margin:0;opacity:.72;font-size:.9375rem;line-height:1.9}
/* Die Mailadresse ist das einzige Feld hier, auf das man wirklich tippt.
   Deshalb steht sie oben und traegt einen Unterstrich. */
/* Der Unterstrich sitzt an der Schrift, nicht am Rand des Verweises. Sonst
   muesste die Trefferflaeche klein bleiben, damit er nicht abgesetzt wirkt. */
.fuss-mail{align-self:start;width:fit-content;opacity:.9 !important;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(253,249,241,.4)}
.fuss-wo{margin:16px 0 18px !important;max-width:32ch;opacity:.62 !important;
  font-size:.875rem !important;line-height:1.7 !important}
.fuss-adresse{opacity:.5 !important;font-size:.875rem !important;line-height:1.8 !important}
/* Schlusszeile: rechtlicher Hinweis links, der Weg nach oben rechts. Auf einer
   Seite von rund 17000px Hoehe ist das kein Zierrat. */
.fuss-schluss{width:min(100%,1180px);margin:clamp(40px,6vh,64px) auto 0;
  padding-top:24px;border-top:1px solid rgba(138,166,214,.2);
  display:grid;gap:18px;align-items:start}
@media (min-width:820px){
  .fuss-schluss{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
}
.fuss-recht{margin:0;font-size:.8125rem;line-height:1.7;color:var(--blau-hell);opacity:.85}
.nach-oben{display:inline-flex;align-items:center;gap:9px;justify-self:start;
  color:var(--blau-hell);text-decoration:none;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 0;transition:color 300ms var(--e-weich)}
@media (min-width:820px){ .nach-oben{justify-self:end} }
.nach-oben svg{width:12px;height:12px;flex:0 0 auto}
.nach-oben polyline{stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.nach-oben:active{color:var(--creme);transition:color 100ms ease-out}

/* ------------------------------------------------------------- Bewegungen
   Alles kommt aus derselben Richtung herein, in der es liegt: Textbloecke
   heben sich, Tafeln blenden auf. Erst wenn das Skript laeuft, wird etwas
   versteckt, sonst waere die Seite ohne JavaScript leer. */
.js .auf,.js .auf-1,.js .auf-2,.js .auf-3,.js .auf-4,.js .auf-5{
  opacity:0;transform:translate3d(0,26px,0)}
/* Muss weiter schieben als die Maske hoch ist, sonst blitzt unten ein Rest */
.js .zl > span{transform:translate3d(0,140%,0)}
.js .auf.da,.js .auf-1.da,.js .auf-2.da,.js .auf-3.da,.js .auf-4.da,.js .auf-5.da{
  opacity:1;transform:none;
  transition:opacity 900ms var(--e-weich),transform 900ms var(--e-weich)}
.js .zl > span.da{transform:none;transition:transform 1100ms var(--e-weich)}
.js .auf-2.da{transition-delay:60ms}
.js .auf-3.da{transition-delay:160ms}
.js .auf-4.da{transition-delay:240ms}
.js .auf-5.da{transition-delay:320ms}
.js .fragenliste li.auf.da:nth-child(2){transition-delay:70ms}
.js .fragenliste li.auf.da:nth-child(3){transition-delay:140ms}
.js .fragenliste li.auf.da:nth-child(4){transition-delay:210ms}
.js .fragenliste li.auf.da:nth-child(5){transition-delay:280ms}
.js .lesewerk-schritte li.auf.da:nth-child(2){transition-delay:80ms}
.js .lesewerk-schritte li.auf.da:nth-child(3){transition-delay:160ms}
.js .lesewerk-schritte li.auf.da:nth-child(4){transition-delay:240ms}
.js .lauf li.auf.da:nth-child(2){transition-delay:80ms}
.js .lauf li.auf.da:nth-child(3){transition-delay:160ms}
.js .lauf li.auf.da:nth-child(4){transition-delay:240ms}

/* Ohne Skript bleibt die Strecke lesbar */
body:not(.js) .v-regler,body:not(.js) .v-kante{display:none}

/* ------------------------------------------------------------------ Handy */
@media (max-width:639px){
  .fragenliste li{grid-template-columns:1fr;gap:6px}
  .fragenliste span{padding-top:0}
  .ablaufwerk{gap:22px}
  /* Am Handy flacher, damit unter dem Bild noch Text steht */
  .tafel{height:clamp(420px,60vh,560px)}
  .blatt[data-blatt]::after{left:22px;top:18px}
  .blatt::before{inset:12px}
}

@media (hover:hover){
  .knopf:hover{background:var(--sand);color:var(--navy);border-color:var(--sand)}
  .knopf.klein:hover{background:var(--creme);color:var(--navy);border-color:var(--creme)}
  .blatt.hell .knopf:hover{background:var(--creme);color:var(--navy);border-color:var(--navy)}
  .fuss-gitter a:hover{opacity:1}
  .nach-oben:hover{color:var(--creme)}
  .leiste-marke:hover{opacity:.75}
}
a,button,summary,.vergleich{-webkit-tap-highlight-color:transparent}
a.knopf,button.knopf,summary{touch-action:manipulation}


/* ---------------------------------------------------- Kapitelverzeichnis
   Als <details> gebaut: es klappt ohne Skript auf und zu, ist mit der Tastatur
   bedienbar und braucht keine Zusatzangaben fuer Vorleseprogramme. */
.kapitelmenue{position:static}
/* Der Knopf traegt die Trefferflaeche, nicht nur die Schrift */
.menue-knopf:focus-visible{outline:2px solid var(--blau-hell);outline-offset:2px;border-radius:var(--rund-klein)}
.menue-knopf{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--rund-klein);
  transition:background 260ms var(--e-mikro)}
.menue-knopf::-webkit-details-marker{display:none}
.menue-knopf:active{background:rgba(253,249,241,.1)}
.menue-pfeil{width:12px;height:12px;flex:0 0 auto;
  transition:transform 320ms var(--e-weich)}
.menue-pfeil polyline{stroke:var(--blau-hell);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kapitelmenue[open] .menue-pfeil{transform:rotate(180deg)}
.burger{display:block;width:19px;height:13px;position:relative}
.burger i{position:absolute;left:0;right:0;height:1px;background:var(--creme);opacity:.8;
  transition:transform 320ms var(--e-weich),opacity 240ms var(--e-mikro)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}
.kapitelmenue[open] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.kapitelmenue[open] .burger i:nth-child(2){opacity:0}
.kapitelmenue[open] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.kapitelfeld{position:fixed;left:0;right:0;top:var(--leiste-h);
  background:rgba(5,31,76,.94);border-bottom:1px solid rgba(138,166,214,.22)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .kapitelfeld{background:rgba(5,31,76,.72);
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
}
.leiste.eng .kapitelfeld{top:56px}
.kapitelfeld-inner{width:var(--blattbreite);margin-inline:auto;
  padding:clamp(20px,3vh,34px) 0 clamp(24px,3.4vh,40px)}
/* Zwei Spalten, aber der Reihe nach: erst die linke von oben nach unten, dann
   die rechte. Ein Raster fuellt zeilenweise, da springt der Blick beim Lesen
   staendig hin und her. Der Spaltensatz fuellt untereinander und teilt sich
   selbst auf, auch wenn einmal ein Kapitel dazukommt. */
@media (min-width:760px){
  .kapitelfeld-inner{columns:2;column-gap:clamp(24px,4vw,64px)}
}
.kapitelfeld a{break-inside:avoid;margin-bottom:2px}
.kapitelfeld a{display:flex;align-items:baseline;gap:16px;text-decoration:none;
  color:var(--creme);opacity:.75;padding:11px 0;
  font-size:clamp(1rem,1.4vw,1.125rem);font-weight:300;letter-spacing:-.01em;
  border-bottom:1px solid rgba(138,166,214,.14);
  transition:opacity 260ms var(--e-weich)}
.kapitelfeld a i{font-style:normal;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  color:var(--blau-hell);opacity:.7;font-variant-numeric:tabular-nums;min-width:2.2em}
.kapitelfeld a[aria-current]{opacity:1}
.kapitelfeld a[aria-current] i{opacity:1;color:var(--creme)}
.kapitelfeld a:active{opacity:.5;transition:opacity 100ms ease-out}
@media (hover:hover){ .kapitelfeld a:hover{opacity:1} }


/* --------------------------------------------------- Rechtsseiten (zweite Fassung)
   Impressum, Datenschutz und Rechtliches liegen im selben Gelaende, aber ohne
   Film: der Grund steht still, das spart auf einer Rechtsseite ein Vielfaches
   der Seitengroesse. */
body.unterseite .grund{background:var(--navy) url(bilder/auftakt.jpg) center/cover}
body.unterseite .kapitel::before{display:none}
body.unterseite .kapitel{padding-top:calc(var(--leiste-h) + clamp(40px,7vh,90px))}
/* Der Einstieg sieht genauso aus wie ein Kapitel der Hauptseite: mittig, dieselbe
   Schriftgroesse, dieselbe Marke darueber. Statt der Kapitelziffer steht das Wort,
   denn eine Rechtsseite ist kein Kapitel. */
body.unterseite .szene .marke{margin-bottom:22px}
/* Auf einer Rechtsseite steht schmaler Text, deshalb ist hier das gemeinsame
   Mass schmaler. Es gilt fuer Ueberschrift, Blatt und Aufruf gleichermassen,
   damit alles auf einer Kante bleibt. Ein eigenes Mass nur fuer das Blatt hatte
   die Einrueckung verloren und es an den Bildrand geschoben. */
body.unterseite{--blattbreite:min(100% - 2*var(--rand),900px)}
/* Ein Bindestrich ist eine Umbruchstelle. In einem zusammengesetzten Wort sieht
   das falsch aus, wenn die Zeile nach dem Strich endet. */
.zusammen{white-space:nowrap}
body.unterseite .blatt .satz{max-width:none}
body.unterseite .blatt .satz p{padding-bottom:1.1em}
body.unterseite .blatt h2{margin:clamp(34px,4.5vh,54px) 0 14px}
body.unterseite .blatt h2:first-of-type{margin-top:0}
.blattlinie{border:0;border-top:1px solid rgba(5,31,76,.2);
  margin:clamp(30px,4vh,48px) 0}
/* Offene Punkte sind als solche gekennzeichnet, nicht versteckt */
.ph-block{border:1px dashed rgba(5,31,76,.45);border-radius:var(--rund-klein);
  padding:20px 24px;max-width:var(--satz);font-size:.9375rem;line-height:1.6;opacity:.9}
.ph-block .marke{margin-bottom:8px}

/* Zugeklappte Faltgeraete sind 280 px breit. Dort braeche die Auftakt-Zeile
   in sechs Zeilen und der Knopf laege unter der Falte. */
@media (max-width:320px){ .riesig{font-size:2rem} }

/* --------------------------------------------------- Seite "Deine Stimme"
   Die eine Frage steht gross, damit klar ist, dass es nur diese eine gibt.
   Der Einverstaendnissatz steht als Zitat, weil er woertlich so in die
   E-Mail geht. */
/* Die Frage steht in einer Zeile, solange das Blatt breit genug ist. Ein
   enges Mass hat sie frueher unnoetig umgebrochen. */
.grossfrage{font-weight:200;font-size:clamp(1.375rem,2.4vw,2rem);line-height:1.22;
  letter-spacing:-.015em;margin:0 0 clamp(18px,2vw,26px);max-width:none}
.einverstaendnis{margin:clamp(24px,3vw,34px) 0 0;padding:clamp(20px,2.4vw,28px);
  border-radius:var(--rund-klein);background:rgba(5,31,76,.05);
  border-left:2px solid rgba(5,31,76,.28);
  font-weight:300;font-size:1rem;line-height:1.6;max-width:var(--satz)}