/* ---------------------------------------------------------------------------
   christian-duesi.de

   Gesetze des Blattes:

   1. Zwei Kanten: Spalte 1 traegt die Marginalie, Spalte 4 den Satz. Die
      Marginalie traegt einen Bezeichner und hoechstens zwei Zeilen — sie ist
      Beschriftung, keine zweite Spalte. Ausnahme mit Absicht: das Portraet,
      das die Sektion "Person" traegt.
   2. Sechs Grade: 96 Titel, 60 Frage, 40 Kapitel, 24 Werk, 17 Text,
      13 Marginalie. Mono nur in der Marginalie und in der Zeichnung.
   3. Keine Kapitellinien. Getrennt wird durch Luft und durch Registerwechsel:
      Zeichnung, typografische Tafel, Tabelle, Bild, Formular.
   4. Rost dreimal: der Bogen der Abbildung, die Bezeichner der drei Fragen,
      der Handlungsaufruf. Ein Idiom fuer den Aufruf, oben wie unten.
   --------------------------------------------------------------------------- */

@import url("/assets/fonts/fonts.css");

:root{
  --paper:#f1efe9;
  --ink:#16263a;          /* unveraendert aus den CV-/Anschreiben-Dateien */
  --ink-body:#22303f;
  --ink-note:#3f4c5c;     /* Navy bei 86 % — die Marginalie traegt die Belege */
  --row:#c6c0b0;
  --rust:#bf4722;

  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display:clamp(40px,7.4vw,104px);
  --t-ask:clamp(19px,1.75vw,22px);
  --t-h2:clamp(28px,4vw,56px);
  --t-work:clamp(19px,1.75vw,22px);
  --t-body:clamp(16px,1.4vw,18px);
  --t-note:13px;

  --gut:clamp(20px,4vw,48px);
  --colgap:24px;
  --bay:clamp(96px,12.5vw,236px);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-body);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  font-synthesis-weight:none;text-wrap:pretty;
}
h1,h2,h3{margin:0;color:var(--ink);font-weight:600}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* --- Raster: zwei Kanten -------------------------------------------------- */

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.sheet{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap)}
.note{grid-column:1/4}
.main{grid-column:4/10}
.wide{grid-column:4/13}
.full{grid-column:1/-1}

.note p,.key p{font-family:var(--mono);font-size:var(--t-note);line-height:1.55;letter-spacing:.04em;
  color:var(--ink-note);font-variant-numeric:tabular-nums}
.note p + p,.key p + p{margin-top:12px}
.note .eyebrow{text-transform:uppercase;letter-spacing:.09em}

.lnk{color:inherit;box-shadow:inset 0 -1px 0 currentColor;transition:box-shadow 130ms}
.lnk:hover{box-shadow:inset 0 -2px 0 currentColor}
.nowrap{white-space:nowrap}

/* Ein Idiom fuer den Handlungsaufruf — oben wie unten. */
.go{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:19px;
  font-weight:600;color:var(--rust);letter-spacing:-.012em;background:none;border:0;padding:0;
  cursor:pointer;box-shadow:inset 0 -1px 0 var(--rust);transition:box-shadow 130ms}
.go:hover{box-shadow:inset 0 -2px 0 var(--rust)}
.go:disabled{opacity:.5;cursor:not-allowed}

/* Die eine Aktion, die etwas absendet, traegt Masse. Gleiche Farbe wie der
   Textlink oben — ein Vokabular, zwei Gewichte. */
.send{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 30px;border:0;
  background:var(--rust);color:var(--paper);font-family:var(--sans);font-size:18px;font-weight:600;
  letter-spacing:-.01em;cursor:pointer;transition:opacity 130ms}
.send:hover{opacity:.87}
.send:disabled{opacity:.5;cursor:not-allowed}
/* Der kuerzeste Weg zur Antwort steht gross im Satz, nicht klein am Rand. */
.direct{font-size:var(--t-ask);font-weight:400;letter-spacing:-.008em;color:inherit;
  box-shadow:inset 0 -1px 0 currentColor;transition:box-shadow 130ms}
.direct:hover{box-shadow:inset 0 -2px 0 currentColor}

/* --- Kopfzeile ------------------------------------------------------------ */

.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px)}
.topbar .sheet{padding:15px 0;grid-template-columns:1fr auto}
.wordmark{font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.chapters{display:flex;align-items:baseline}
.chapters a{font-family:var(--sans);font-size:var(--t-body);font-weight:500;letter-spacing:0;color:var(--ink-note);
  white-space:nowrap;transition:color 130ms}
.chapters a:hover{color:var(--ink)}

/* --- Kapitel -------------------------------------------------------------- */

.chapter{padding:var(--bay) 0 0}
.chapter h2{grid-column:4/13;grid-row:1;font-size:var(--t-h2);font-weight:600;line-height:1.08;letter-spacing:-.022em;max-width:22ch}
.chapter h2 .soft{font-weight:400}
.chapter > .wrap > .sheet > .note{grid-column:1/4;grid-row:1;padding-top:3px}
.chapter .main,.chapter .wide{grid-row:2;margin-top:clamp(20px,2.4vw,32px)}
.chapter .main > p + p{margin-top:1.1em}

/* --- 1 · Titelblatt mit der Zeichnung ------------------------------------- */

.cover{padding:clamp(40px,5vw,72px) 0 0}
.cover h1{grid-column:1/-1;font-size:var(--t-display);font-weight:600;font-stretch:94%;
  line-height:.95;letter-spacing:-.026em;margin-left:-.055em}
.cover h1 .l{display:block}
.cover h1 .beat{font-weight:400}
.cover .note{grid-row:2;margin-top:clamp(26px,3vw,40px);padding-top:3px}
.cover .main{grid-row:2;margin-top:clamp(26px,3vw,40px)}
.cover .main > p:first-child{font-size:clamp(19px,1.9vw,23px);line-height:1.4;letter-spacing:-.012em;color:var(--ink)}
.cover .main > p + p{margin-top:1.3em}

.loop{grid-column:1/-1;grid-row:3;margin:clamp(30px,3.6vw,56px) 0 0}
.loop svg{width:100%;height:auto;display:block}
.loop .w1{fill:none;stroke:var(--ink);stroke-width:.9;stroke-linecap:round}
.loop .w2{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.loop .w3{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.loop .hot{fill:none;stroke:var(--rust);stroke-width:3;stroke-linecap:round}
.loop .tick{stroke:var(--ink);stroke-width:1.5;fill:none}
.loop .hair{stroke:var(--ink);stroke-width:1;fill:none}
.loop .tip{fill:var(--ink);stroke:none}
.loop .lead{stroke:var(--rust);stroke-width:1;fill:none}
.loop text{font-family:var(--mono);font-size:13px;letter-spacing:.04em;fill:var(--ink)}
.loop .phase{font-size:11px;fill:var(--ink-note)}
.loop .callout{fill:var(--rust)}
.loop figcaption{font-family:var(--mono);font-size:var(--t-note);letter-spacing:.04em;
  color:var(--ink-note);margin-top:14px}
.figcap{grid-column:1/4;grid-row:3;align-self:start;margin-top:clamp(30px,3.6vw,56px);padding-top:24px}
.figcap p{font-family:var(--mono);font-size:var(--t-note);letter-spacing:.04em;color:var(--ink-note);line-height:1.6}

/* --- Abb. 1 baut sich auf ------------------------------------------------
   Drei Akte. Erst ein Durchlauf, flach in Aufsicht: von innen nach aussen
   durch vier Stationen, dazu der Marker fuer den Punkt, an dem die meisten
   stehen. Dann kippt die Aufsicht in die Schraegsicht — und das Bild zoomt
   heraus, weil sich zeigt, dass dieser Durchlauf nur das untere Drittel
   einer Helix war. Zuletzt laeuft die Helix zweimal weiter nach oben.
   Der Ruhezustand ist der Endzustand: ohne Skript und bei reduzierter
   Bewegung steht die fertige Helix da. Nur .play blendet den flachen
   Vorlauf ueberhaupt ein, und .play vergibt allein das Skript. */
#abb1 .flat{opacity:0}
#abb1.play .draw{stroke-dasharray:1;animation:abb-draw var(--d) cubic-bezier(.4,0,.25,1) var(--t) both}
#abb1.play .fade{animation:abb-fade .5s ease-out var(--t) both}
#abb1.play .flat{animation:abb-flat 3.8s linear both}
#abb1.play .helix{animation:abb-fade .5s ease-out 7.4s both}
@keyframes abb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes abb-fade{from{opacity:0}to{opacity:1}}
@keyframes abb-flat{0%,87%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  #abb1.play .draw{stroke-dasharray:none;animation:none}
  #abb1.play .fade,#abb1.play .helix{animation:none}
  #abb1.play .flat{animation:none;opacity:0}
}
.figcap .figno{color:var(--ink);margin-bottom:16px}
.figcap .step{color:var(--ink)}
.figcap p + p{margin-top:12px}


/* --- 2 · Die typografische Tafel ------------------------------------------ */

/* Das Modell ist Prosa mit Schluesselwort am Rand; die Leistungen sind eine
   Tabelle. Zwei Dinge, zwei Bauformen — unterschieden durch Linien und Luft,
   nicht durch die Struktur. */
.model{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:subgrid;
  margin-top:clamp(24px,2.8vw,40px)}
.model > li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline}
.model > li + li{margin-top:clamp(26px,3vw,42px)}
.model .k{grid-column:1/4;font-family:var(--mono);font-size:var(--t-note);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-note);line-height:1.55}
.model .q{grid-column:4/10;font-size:var(--t-ask);font-weight:600;line-height:1.2;
  letter-spacing:-.015em;color:var(--ink)}
.model .a{grid-column:4/10;margin-top:.35em}

/* Ein lauter Takt in der Mitte: die haerteste Zahl der Seite, allein. */
.beat-section{padding:calc(var(--bay) * 1.5) 0 calc(var(--bay) * .5)}
.beat-section p.big{grid-column:1/-1;font-size:var(--t-display);font-weight:600;font-stretch:94%;
  line-height:.95;letter-spacing:-.028em;color:var(--ink);margin-left:-.05em}
.beat-section .note{grid-column:1/4;grid-row:2;margin-top:clamp(34px,4vw,52px)}
/* Der Zwischenruf bricht wie das Titelblatt und kippt in der letzten Zeile. */
.beat-section .l{display:block}
.beat-section .beat{font-weight:400}

/* --- 3 · Die Tabelle: die einzigen Linien der Seite ----------------------- */

.table{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;
  margin-top:clamp(22px,2.6vw,36px)}
.table > li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;
  padding:0 0 30px;border-bottom:1px solid var(--row)}
.table > li + li{padding-top:30px}
.table > li:last-child{border-bottom:0}
/* Die Marginalie der Tabelle bindet jedes Format an die Windung der
   Zeichnung, die es adressiert. */
.table .n{grid-column:1/4;grid-row:1;font-family:var(--mono);font-size:var(--t-note);
  letter-spacing:.04em;color:var(--ink);padding-top:.32em}
.table .n .round{display:block;margin-top:9px;color:var(--ink-note)}
.table .who{font-family:var(--mono);font-size:var(--t-note);
  line-height:1.6;letter-spacing:.04em;color:var(--ink-note);margin-top:12px}
.table .ti{grid-column:4/8;grid-row:1}
.table h3{margin:-.16em 0 0;font-size:var(--t-work);font-weight:600;color:var(--ink);
  line-height:1.14;letter-spacing:-.015em}
.table .what{grid-column:8/13;grid-row:1;margin-top:-.1em}

/* --- 4 · Bildgetragen: das Portraet traegt die Sektion -------------------- */

.portrait{grid-column:10/13;grid-row:2;margin:clamp(20px,2.4vw,32px) 0 0;align-self:stretch;position:relative;overflow:hidden;background:var(--ink);
  margin-right:calc(-1 * (var(--gut) + max(0px,(100vw - 1200px) / 2)))}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.1) brightness(.97);mix-blend-mode:luminosity;opacity:.9}
.portrait figcaption{font-family:var(--mono);font-size:var(--t-note);letter-spacing:.04em;
  color:var(--ink-note);margin-top:12px}
.vita{grid-column:4/10;grid-row:2;margin-top:clamp(20px,2.4vw,32px)}
.note-body{grid-row:2 !important;margin-top:clamp(20px,2.4vw,32px)}
.vita p + p{margin-top:1.1em}

/* --- 5 · Das Formular, leise, auf Papier ---------------------------------- */

.form{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;
  row-gap:30px;margin-top:clamp(20px,2.4vw,32px)}
.form > .f:nth-of-type(1){grid-column:4/8}
.form > .f:nth-of-type(2){grid-column:8/13}
.f{display:flex;flex-direction:column;gap:7px}
.f.w{grid-column:4/13}
.f label{font-family:var(--sans);font-size:var(--t-note);letter-spacing:0;color:var(--ink-note)}
.f input,.f textarea{font-family:var(--sans);font-size:var(--t-body);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--row);padding:10px 0;width:100%;
  transition:border-color 130ms}
.f textarea{resize:none;height:118px;line-height:1.5;align-content:start}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--ink)}
.consent{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-size:var(--t-note);
  line-height:1.5;color:var(--ink-note)}
.consent .lnk{color:var(--ink)}
.consent input{appearance:none;width:19px;height:19px;flex:none;border:1.5px solid var(--ink);background:transparent;cursor:pointer}
.consent input:checked::after{content:"";display:block;width:6px;height:11px;margin:1px auto 0;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.submit{grid-column:4/13;display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:6px}
.status{grid-column:4/13;margin:0;font-family:var(--mono);font-size:var(--t-note);min-height:20px;color:var(--ink-note)}
.thanks{grid-column:4/13;grid-row:2;display:none;flex-direction:column;align-items:flex-start;gap:14px;margin-top:clamp(20px,2.4vw,32px)}
.thanks .stated{font-size:var(--t-work);color:var(--ink);font-weight:600;letter-spacing:-.015em}

/* --- Fusszeile ------------------------------------------------------------ */

.foot{margin-top:calc(var(--bay) * .55);padding:0 0 40px}
.foot .sheet{padding-top:22px;border-top:1px solid var(--row)}
.foot p,.foot a{font-family:var(--sans);font-size:var(--t-note);letter-spacing:0;line-height:1.6;color:var(--ink-note)}
.foot a{transition:color 130ms}
.foot a:hover{color:var(--ink)}
.foot .a{grid-column:1/7}
.foot .b{grid-column:7/13;display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}

/* --- Schmale Viewports ---------------------------------------------------- */

/* Rechtstexte. Gleicher Bau wie .table: die Randspalte traegt den
   Abschnittsnamen, die Hauptspalte den Text. So liest sich ein Pflichttext
   wie der Rest der Seite und bleibt trotzdem ueberfliegbar. */
.rechtstext{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;
  margin-top:clamp(20px,2.4vw,32px);list-style:none;padding:0}
.rechtstext > li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;
  padding-bottom:30px;border-bottom:1px solid var(--row)}
.rechtstext > li + li{padding-top:30px}
.rechtstext > li:last-child{border-bottom:0}
.rechtstext h2{grid-column:1/4;font-family:var(--mono);font-size:var(--t-note);
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-note);
  padding-top:3px}
.rechtstext .t{grid-column:4/11}
.rechtstext .t > * + *{margin-top:14px}
.rechtstext ul{margin:14px 0 0;padding-left:1.1em}
.rechtstext li{margin-top:6px}
.rechtstext strong{font-weight:600;color:var(--ink)}

/* Informationsblatt der Studie. Bau der Rechtstexte: links der Bezeichner,
   rechts der Satz, Linien zwischen den Abschnitten wie in der Tabelle. Enger
   gesetzt als ein Kapitel, weil die Seite in zwei Bildschirmen gelesen sein
   muss. Der Ertrag fuer Teilnehmende steht einen Grad groesser: er ist der
   eigentliche Grund zuzusagen. */
.blatt-kapitel{padding-top:clamp(36px,4.4vw,64px)}
.blatt{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.blatt > section{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;
  padding:26px 0;border-top:1px solid var(--row)}
.blatt > section:last-child{padding-bottom:0}
.blatt .k{grid-column:1/4;padding-top:4px}
.chapter .blatt h2{grid-row:auto;max-width:none;font-family:var(--mono);font-size:var(--t-note);
  font-weight:500;line-height:1.55;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-note)}
.blatt .k p{margin-top:10px;font-family:var(--mono);font-size:var(--t-note);line-height:1.55;
  letter-spacing:.04em;color:var(--ink-note);font-variant-numeric:tabular-nums}
.blatt .t{grid-column:4/10}
.blatt .t > * + *{margin-top:.8em}
.blatt .ertrag{font-size:var(--t-ask);font-weight:600;line-height:1.35;letter-spacing:-.012em;color:var(--ink)}
.blatt .zeilen li + li{margin-top:4px}
.blatt .klein{font-size:var(--t-note);color:var(--ink-note)}
.blatt .t > .klein{margin-top:8px}
.blatt .bild{grid-column:11/13;margin:0;background:var(--ink)}
.blatt .bild img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 24%;
  filter:grayscale(1) contrast(1.1) brightness(.97);mix-blend-mode:luminosity;opacity:.9}

/* Zeilenzuweisung als Klasse statt inline — nur so kann die Mobil-Regel sie
   auf auto zuruecksetzen. Steht am Ende und eine Stufe spezifischer, weil
   .form, .thanks und .chapter .main oben eigene Zeilen setzen. */
.sheet > .r2{grid-row:2}
.sheet > .r3{grid-row:3}
.sheet > .r4{grid-row:4}

@media (max-width:920px){
  :root{--colgap:16px}
  .chapters{display:none}
  .topbar .sheet,.sheet{grid-template-columns:minmax(0,1fr)}
  .note,.main,.wide,.full,.form,.thanks,.loop,.figcap,.portrait,.vita,.consent,.beat-section p.big,
  .cover h1,.chapter h2,.foot .a,.foot .b,.model,.model > li,
  .model,.model > li,.model .k,.model .q,.model .a,.table,.table > li,.table .ti,.table .n,.table .who,.table .what,
  .rechtstext,.rechtstext > li,.rechtstext h2,.rechtstext .t{grid-column:1/-1}
  .model,.model > li,.table,.table > li,.rechtstext,.rechtstext > li{display:block}
  .rechtstext h2{margin-bottom:10px}
  .model .k{display:block;margin-bottom:6px}
  .sheet > .r2,.sheet > .r3,.sheet > .r4,
  .chapter h2,.chapter > .wrap > .sheet > .note,.chapter .main,.chapter .wide,.loop,
  .portrait,.vita,.model,.table,.form,.thanks,.cover .note,.cover .main,.figcap,
  .beat-section .note{grid-row:auto}
  .chapter > .wrap > .sheet > .note{padding-top:0;margin-bottom:16px}
  .cover h1 .l,.beat-section .l{display:inline}
  .cover h1{margin-left:0}
  /* Auf Handybreite passen Zeichnung und lesbare Schrift nicht in denselben
     Massstab: bei voller Breite laege die 13-px-Beschriftung bei vier Pixeln.
     Also wird die Zeichnung vergroessert und nach links gerueckt, sodass die
     Ebenenschrift rechts daneben Platz behaelt — und die Schrift waechst im
     Zeichnungsmassstab mit, statt mit ihm zu schrumpfen. 136 % Breite bei
     -35 % Versatz zeigt den Ausschnitt 283 bis 1095 des viewBox. */
  /* Einspaltig zuerst die Zeichnung, dann die Legende: sie erklaert etwas,
     das man vorher gesehen haben muss. Nebeneinander stellt sich die Frage
     nicht. */
  .figcap{order:1}
  .loop{overflow:hidden}
  .loop svg{width:136%;margin-left:-35%}
  .loop text{font-size:26px}
  .loop .phase{font-size:22px}
  /* Der Callout waere breiter als der viewBox und wuerde abgeschnitten. Sein
     Inhalt steht im Bildtext darunter im Wortlaut ("Der rote Bogen"). */
  .loop .callout,.loop .lead{display:none}
  .table .n{margin-bottom:6px}
  .table .who{margin-top:8px}
  .form > .f:nth-of-type(1),.form > .f:nth-of-type(2),.f.w,.submit,.status{grid-column:1/-1}
  .note-body{grid-row:auto !important}
  .table .who{margin-bottom:12px}
  .form{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:320px;margin-bottom:26px;margin-right:0;position:static;overflow:visible}
  .portrait img{position:static;aspect-ratio:4/5;height:auto}
  .portrait figcaption{padding-left:0}
  .foot .b{justify-content:flex-start;margin-top:12px}
  .blatt,.blatt > section{display:block}
  .blatt .k{padding-top:0;margin-bottom:10px}
  .blatt .bild{max-width:160px;margin-top:20px}
}