/* KALEM Media. kalem.media
   Gestaltungssystem seit 03.10.2026, beschrieben im LIESMICH unter
   "Das Gestaltungssystem". Ein System von oben bis unten:
   - EINE Skala. Grundgroesse 17 px, Faktor phi (1,618). Sie gilt fuer
     Schrift UND Abstand. Keine Zwischenwerte, kein clamp() bei Schrift.
     pruefen.py bricht ab, wenn eine Schriftgroesse nicht auf der Skala liegt.
   - SIEBEN Rollen: sechs Textrollen plus Knopf. Jede Rolle ist ueberall
     gleich gesetzt. Neues bekommt eine vorhandene Rolle, keine neue.
     Hanken in Papier ist, was man anklicken kann.
   - EINE Form fuer "mehrere Punkte": die Reihe. Linie oben, Titel, Text.
     Eine Messing-Marke nur, wo sie etwas sagt: die Nummer im Ablauf,
     die Kategorie bei Arbeiten und Angebot.
   - EINE Linie. Sie setzt mit etwas mehr Tinte an und laeuft aus.
   - EINE Bewegung: jedes Element gleitet einmal weich herein,
     Linien zeichnen sich dabei von links nach rechts. Der Leitsatz
     im ersten Bildschirm steht still. */

/* Schriften. Selbst gehostet, Latin-Subset, kein Aufruf an Dritte. */
@font-face{
  font-family:"Castoro Titling";font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/castoro-titling.woff2) format("woff2");
}
@font-face{
  font-family:"Castoro";font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/castoro.woff2) format("woff2");
}
@font-face{
  font-family:"Castoro";font-style:italic;font-weight:400;font-display:swap;
  src:url(schriften/castoro-italic.woff2) format("woff2");
}
@font-face{
  font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/hanken-grotesk.woff2) format("woff2");
}

:root{
  --tinte:#0F0F0E;        /* Grund */
  --graphit:#191816;      /* zweite Flaeche */
  --linie:#2B2925;        /* Haarlinien */
  --rule:#4A3F2E;         /* messingfarbene Leitlinie */
  --papier:#F4F3EF;       /* Ueberschriften und alles Anklickbare, 17:1 */
  --fliess:#D8D5CD;       /* Text, 13:1 auf Tinte. Wie im Markenhandbuch */
  --stein-tief:#8F8A80;   /* "Stein" im Handbuch. Unterstrich der Links, nicht fuer Text */
  --messing:#B4955F;      /* Akzent. Nie Flaeche, ausser dem Knopf */
  --messing-tief:#7A5F37; /* Ansatz der Linie */
  --f-titel:"Castoro Titling","Castoro",Georgia,serif;
  --f-serif:"Castoro",Georgia,serif;
  --f-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Die Skala. b = 17 px, jede Stufe mal phi. */
  --s-2:.4058rem;   /*   6,5 px  nur Abstand */
  --s-1:.6567rem;   /*  10,5 px */
  --s0:1.0625rem;   /*  17 px    Grundschrift */
  --s1:1.7192rem;   /*  27,5 px  = Zeilenhoehe der Grundschrift */
  --s2:2.7817rem;   /*  44,5 px */
  --s3:4.5008rem;   /*  72 px */
  --s4:7.2826rem;   /* 116,5 px  nur Abstand */
  --s5:11.7834rem;  /* 188,5 px  nur Abstand */

  /* Groessen der drei Serifen-Rollen. Am Handy rueckt jede eine Stufe
     tiefer (s2, s1, s0), damit zwischen Leitsatz, Ueberschrift und Titel
     dieselben Abstaende bleiben wie am Desktop. Castoro und Hanken haben
     in s0 dieselbe x-Hoehe (gemessen 48 zu 49), der Titel hebt sich dort
     durch Schrift und Papier ab, nicht durch Groesse. In s0 bekommt er die
     Zeilenhoehe des Texts. */
  --g-leitsatz:var(--s3);
  --g-ueberschrift:var(--s2);
  --g-titel:var(--s1);
  --z-titel:1.25;

  /* Raster. Rand und Etikettenspalte sind s2 und s5, auf ganze Pixel
     gerundet: dort steht die Leitlinie, eine 1-px-Linie bleibt nur auf
     ganzen Pixeln scharf. */
  --rand:44px;            /* Seitenrand, s2 */
  --lab:188px;            /* Etikettenspalte, s5. Dort steht die Leitlinie */
  --einzug:var(--s2);     /* Leitlinie bis Inhalt */
  --luft:var(--s3);       /* Abschnitt oben und unten */
  --fuge:var(--s2);       /* zwischen den Bloecken eines Abschnitts */
  --nach-titel:var(--s2); /* nach jeder Ueberschrift, auf jedem Geraet */

  /* Die Linie. Setzt mit Tinte an, laeuft in der Haarlinie aus. */
  --strich:linear-gradient(90deg,var(--messing-tief),var(--rule) 38.2%,var(--linie));

  /* Bewegung */
  --kurve:cubic-bezier(.16,1,.3,1);
  --dauer:1.1s;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--tinte);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--tinte);color:var(--fliess);
  font:400 var(--s0)/1.618 var(--f-sans);
  padding-inline:var(--rand);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;max-width:40em;text-wrap:pretty}
b{font-weight:400}
a{color:var(--papier)}
::selection{background:var(--rule);color:var(--papier)}
:focus-visible{outline:2px solid var(--messing);outline-offset:4px}
/* Fliesstext bricht nur an Satzgrenzen um, solange die Saetze passen.
   Zwischen zwei Saetzen steht im HTML ein echtes Leerzeichen, kein margin. */
.satz{display:inline-block}
.abschnitt>.inhalt>p{text-wrap:balance}

/* Die Seite steht mittig, ihr linker Rand auf einem ganzen Pixel.
   Ohne round() einfach mittig, nichts geht kaputt. */
.seite{max-width:76rem;margin:0 auto}
@supports (margin-left:round(down,1.5px,1px)){
  .seite{margin-left:max(0px,round(down,(100% - 76rem) / 2,1px))}
}

/* ====================================================================
   Die sechs Textrollen und der Knopf. Nur hier werden Schrift, Groesse
   und Farbe festgelegt. Die Bausteine weiter unten regeln nur die Lage.
   Einzige Ausnahme: das Plus und Minus der Fragen (.fragen summary::after).
   Es ist ein Zeichen, kein Text, Screenreader lesen es nicht (alt leer).
   ==================================================================== */

/* Rolle 1. Leitsatz: Castoro, s3, Papier. Einmal pro Seite. */
.t-gross{
  font-family:var(--f-serif);font-size:var(--g-leitsatz);line-height:1.1;
  letter-spacing:-.01em;color:var(--papier);
}

/* Rolle 2. Ueberschrift: Castoro, s2, Papier */
.t-mittel,.recht h1{
  font-family:var(--f-serif);font-size:var(--g-ueberschrift);line-height:1.15;color:var(--papier);
}

/* Rolle 3. Titel: Castoro, s1 (Handy s0), Papier. Die Unterzeile im ersten
   Bildschirm, jeder Punkt einer Reihe, jede Frage, jeder Preis, das Zitat. */
.unterzeile,.zitat,.saeule b,.fundament b,.schritte b,.arbeit h3,.fragen summary,
.kachel h3,.kachel .preis,.recht h2{
  font-family:var(--f-serif);font-size:var(--g-titel);font-weight:400;
  line-height:var(--z-titel);letter-spacing:0;color:var(--papier);
}

/* Rolle 5. Text: Hanken Grotesk, s0, Fliess. Steht auf body und gilt
   ueberall, wo nichts anderes steht. Hier nur, was sonst erben wuerde. */
.wer,.klein-grau,.ueber .rolle,.saeule span,.fundament span,.schritte span,.arbeit p,
.fragen details p,.kachel p,.kachel .preis span,.kachel ul,.rahmen dd,.recht dd{
  font:400 var(--s0)/1.618 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--fliess);
}

/* Rolle 4. Zeichen: Castoro Titling, s-1, Messing, Versalien.
   Etiketten, Nummern im Ablauf, Kategorien, Begriffe. */
.lab,.claim,.arbeit .k,.kachel .k,.gruppe-titel,.rahmen dt,.recht dt,
.schritte>li::before{
  font-family:var(--f-titel);font-size:var(--s-1);font-weight:400;line-height:1.618;
  letter-spacing:.24em;text-transform:uppercase;color:var(--messing);
}

/* Rolle 6. Verweis: Hanken Grotesk, s0, Papier, mit Linie darunter.
   Alles Anklickbare ausser dem Knopf und den Fragen (die Fragen sind
   Titel, das Plus in Messing zeigt, dass sie aufgehen). Beim Zeigen zieht
   Messing von links nach rechts ueber die Linie. */
.textlink,.fuss a{
  display:inline-block;font:400 var(--s0)/1.618 var(--f-sans);color:var(--papier);text-decoration:none;
  padding-block:var(--s-1);
  background:
    linear-gradient(var(--messing),var(--messing)) 0 calc(100% - var(--s-1))/0 1px no-repeat,
    linear-gradient(var(--stein-tief),var(--stein-tief)) 0 calc(100% - var(--s-1))/100% 1px no-repeat;
  transition:background-size .7s var(--kurve);
}
/* Der Pfeil zeigt die Richtung, er gehoert nicht zum Namen des Links
   (leerer Alt-Text wie beim Plus der Fragen). Die erste Zeile gilt nur
   fuer Browser, die den Alt-Text noch nicht kennen. Der Weg zurueck
   zeigt nach links. */
.textlink::after{content:" \2192";content:" \2192" / ""}
.zurueck .textlink::after{content:none}
.zurueck .textlink::before{content:"\2190\20";content:"\2190\20" / ""}
/* Im Fliesstext der Rechtsseiten dieselbe Linie, als Unterstreichung. */
.recht a:not(.textlink){
  text-decoration:underline 1px var(--stein-tief);text-underline-offset:.25em;
  transition:text-decoration-color .3s;
}
/* Ein Link als ganzer Wert einer Angabe bekommt dieselbe Tippflaeche wie
   jeder Verweis. Der negative Rand gleicht sie aus: die Zeile bleibt gleich. */
.recht dd a{display:inline-block;padding-block:var(--s-1);margin-block:calc(-1 * var(--s-1))}

/* Rolle 7. Knopf: Hanken Grotesk, s0, Tinte auf Messing, eckig.
   Die einzige Flaeche. Zeigen: ein feiner Messingring. Fokus: derselbe
   Ring in 2 px, wie jeder Fokus auf der Seite. */
.knopf{
  display:inline-block;font:500 var(--s0)/1 var(--f-sans);letter-spacing:.01em;
  padding:var(--s0) var(--s1);border-radius:0;text-decoration:none;
  background-color:var(--messing);color:var(--tinte);
  transition:box-shadow .3s;
}
.knopf:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tinte),0 0 0 5px var(--messing)}
.knopf.druck,.textlink.druck{opacity:.75}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{box-shadow:0 0 0 3px var(--tinte),0 0 0 4px var(--messing)}
  .textlink:hover,.fuss a:hover{background-size:100% 1px,100% 1px}
  .recht a:not(.textlink):hover{text-decoration-color:var(--messing)}
}
/* Kontrastmodus (Windows): dort entfallen Flaeche und Ring. Der Knopf
   bekommt einen Rahmen und den Fokus des Systems. */
@media (forced-colors:active){
  .knopf{border:1px solid ButtonText}
  .knopf:focus-visible{outline:2px solid Highlight;outline-offset:4px}
}

/* ====================================================================
   Die Reihe. EINE Form fuer alles, was nebeneinander oder untereinander
   steht: Werkzeuge, Partnerschaft, Ablauf, Arbeiten, Fragen, Kacheln,
   Rahmen. Linie oben, dann Titel und Text.
   ==================================================================== */
.saeule,.fundament,.schritte>li,.arbeit,.fragen details,.kachel,.rahmen dl>div{
  position:relative;padding-top:var(--s0);
  background:var(--strich) 0 0/100% 1px no-repeat;
}
/* Das Fundament traegt die einzige volle Messinglinie. */
.fundament{background-image:linear-gradient(var(--messing),var(--messing))}

/* Raster der Reihe */
.saeulen,.schritte,.arbeiten,.kacheln{
  display:grid;gap:var(--s2) var(--s1);margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.schritte{grid-template-columns:repeat(4,minmax(0,1fr))}
.kacheln{grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.kacheln.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Ein Punkt der Reihe */
.saeule,.schritte>li,.arbeit,.kachel{display:flex;flex-direction:column;gap:var(--s-1);align-items:flex-start}

/* Nummern nur im Ablauf, dort sind sie eine Reihenfolge. Zweistellig
   gesperrt wie jedes Zeichen, vorgelesen wird nur die Zahl. */
.schritte{counter-reset:nr}
.schritte>li{counter-increment:nr}
.schritte>li::before{
  content:counter(nr,decimal-leading-zero);content:counter(nr,decimal-leading-zero) / counter(nr);
  margin-bottom:var(--s-2);
}

/* Fundament: eine Zeile ueber die volle Breite, im Raster der drei Werkzeuge */
.fundament{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s1);align-items:baseline}
.fundament span{grid-column:2/-1}

/* Arbeiten: der Link sitzt in allen drei Spalten auf gleicher Hoehe */
/* Zeichen ueber Titel und Text vor Link oder Preis: s-2 zur Fuge s-1,
   zusammen s0. Ueberall gleich, auch in den Kacheln. */
.arbeit .k,.kachel .k{margin-bottom:var(--s-2)}
.arbeit .textlink{margin-top:auto}
.arbeit h3+p{margin-bottom:var(--s-2)}

/* Fragen. Natives details/summary, kein Skript. name="faq" im HTML sorgt
   dafuer, dass immer nur eine Frage offen ist. */
.fragen summary{
  list-style:none;cursor:pointer;min-height:44px;
  display:grid;grid-template-columns:minmax(0,1fr) var(--s1);column-gap:var(--s0);align-items:baseline;
  padding-bottom:var(--s0);text-wrap:balance;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"+" / "";font:400 var(--g-titel)/1 var(--f-sans);color:var(--messing);text-align:right;
}
.fragen details[open] summary::after{content:"\2212" / ""}
.fragen details p{padding-bottom:var(--s1)}
.fragen summary:focus-visible{outline-offset:2px}

/* ====================================================================
   Seitenteile
   ==================================================================== */

/* Kopfzeile */
.kopf{padding-top:var(--s1)}
.kopf .marke{display:block;width:var(--s5);padding-block:var(--s-2)}
.kopf .marke img{width:100%;height:auto}

/* Erster Bildschirm. Gebaut wie jeder Abschnitt: links das Etikett, rechts
   der Leitsatz auf derselben Kante wie alle Ueberschriften. Darunter die
   Unterzeile oder der Einleitungstext, dann die Linie und der Knopf. Feste
   Zeilen, damit index, angebot und 404 gleich stehen, egal in welcher
   Reihenfolge die Teile im HTML kommen. Auf der Startseite ist das Etikett
   der Claim (ein Satz pro Zeile) und die Unterzeile die h1. */
.hero{
  display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:baseline;
  padding-block:var(--s5) var(--s3);
}
/* Die Ueberschriften stehen hinter der 1-px-Leitlinie, darum + 1px. */
.hero>*{grid-column:2;margin-left:calc(var(--einzug) + 1px)}
.hero .zeichen{grid-row:1;height:var(--s4);width:auto;margin-bottom:var(--s2)}
.hero .t-gross{grid-row:2}
/* Ohne Abstand rechts: bis 1100 px ist die Spalte 116 px breit und
   "MIT KAMERA." braucht 100. Den Abstand zum Leitsatz haelt der Einzug. */
.hero .claim{grid-row:2;grid-column:1;margin-left:0;padding-right:0}
.hero .claim .satz{display:block}
.hero>p:not(.claim),.hero>.unterzeile{grid-row:3;margin-top:var(--nach-titel)}
.hero .zeile{
  grid-row:4;margin-top:var(--s2);padding-top:var(--s1);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s0) var(--s1);
  background:var(--strich) 0 0/100% 1px no-repeat;
}

/* Abschnitte. Etikett links, Inhalt rechts der Leitlinie.
   Das Etikett sitzt auf der Grundlinie der Ueberschrift. */
.abschnitt{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:baseline}
.abschnitt>.lab{padding-right:var(--s0)}
.abschnitt>.inhalt{
  border-left:1px solid var(--rule);
  padding:var(--luft) 0 var(--luft) var(--einzug);
  display:grid;gap:var(--fuge);min-width:0;justify-items:start;
}
.abschnitt>.inhalt>*{width:100%}
/* Nach jeder Ueberschrift derselbe Abstand, auch wo die Fuge kleiner ist. */
.abschnitt>.inhalt>h2+*{margin-top:calc(var(--nach-titel) - var(--fuge))}

/* Haltung */
.zitat span{display:block;text-wrap:pretty}

/* Ueber. Name oben wie jede Ueberschrift, darunter Bild und Text im
   Raster der Werkzeuge: Bild in Spalte eins, Text ab Spalte zwei. */
.ueber{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s1);align-items:start}
.ueber .text,.ueber .text>div{display:contents}
.ueber h2,.ueber .rolle{grid-column:1/-1}
.ueber .rolle{margin-top:var(--s-1)}
.portraet{
  grid-column:1;grid-row:3;margin-top:var(--nach-titel);
  width:var(--s5);max-width:100%;aspect-ratio:1;overflow:hidden;background:var(--graphit);
  border-radius:50%;  /* die einzige Rundung der Seite: der Mensch, nicht das System */
}
.ueber .text>p{grid-column:2/-1;grid-row:3;margin-top:var(--nach-titel)}

/* Kontakt */
.kontakt-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s0) var(--s1)}
#kontakt>.inhalt{padding-bottom:var(--s4)}

/* Fusszeile */
.fuss{
  padding-block:var(--s0) var(--s3);
  background:var(--strich) 0 0/100% 1px no-repeat;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-1) var(--s1);
}
.fuss nav{display:flex;flex-wrap:wrap;gap:0 var(--s1)}

/* Rechtsseiten. Dieselben Rollen, dieselbe Linie ueber jedem Teil, dieselbe
   Kante wie die Ueberschriften der Startseite. */
.zurueck,.recht{margin-left:calc(var(--lab) + var(--einzug) + 1px)}
.zurueck{padding-top:var(--s2)}
.recht{max-width:44rem;padding-block:var(--s2) var(--s4);display:grid;gap:var(--s0)}
.recht h1{margin-bottom:var(--s-1)}
.recht h2{
  margin-top:var(--s1);padding-top:var(--s0);
  background:var(--strich) 0 0/100% 1px no-repeat;
}
.recht ul{margin:0;padding-left:var(--s0);display:grid;gap:var(--s-2)}
.recht li::marker,.kachel li::marker{color:var(--messing)}
.recht dl{display:grid;grid-template-columns:var(--s5) minmax(0,1fr);gap:var(--s-2) var(--s1);margin:0;align-items:baseline}
.recht dd{margin:0}

/* Angebotsseite. Die Kachel ist ein Punkt der Reihe. */
.gruppe-titel{margin-top:var(--s1)}
/* Das Etikett gehoert zur Gruppe darunter: s0 bis zur Linie, wie am Handy
   das Etikett ueber jeder Ueberschrift. */
.gruppe-titel+.kacheln{margin-top:calc(var(--s0) - var(--fuge))}
.kachel .preis{margin-top:var(--s-2)}
.kachel .preis span{display:block;margin-top:var(--s-2)}
.kachel ul{margin:var(--s-2) 0 0;padding-left:var(--s0);display:grid;gap:var(--s-2)}
/* Titel, Text und Preis stehen in jeder Reihe auf einer Hoehe, ueber alle
   Spalten. Eine Kachel mit Etikett und Liste hat fuenf Teile, sonst drei.
   Ohne subgrid stehen die Teile einfach untereinander, nichts geht kaputt. */
@supports (grid-template-rows:subgrid){
  .kachel{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--s-1);align-content:start;justify-items:start}
  .kachel:has(>.k){grid-row:span 5}
}
/* Rahmen: Begriff links, Text ab Spalte zwei. Dasselbe Raster wie das
   Fundament, der Text steht auf der Kante der mittleren Kachel. */
.rahmen dl{display:grid;gap:var(--s1);margin:0}
.rahmen dl>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s1);align-items:baseline}
.rahmen dd{margin:0;grid-column:2/-1}

/* ====================================================================
   Einblenden. Gehoert zu assets/js/einblenden.js.
   Jedes Element mit der Klasse einblenden gleitet einmal von unten
   herein und blendet auf. Linien zeichnen sich dabei von links nach
   rechts. Nur wenn das Skript im head die Klasse gleiten gesetzt hat:
   ohne JavaScript und bei reduzierter Bewegung ist alles sofort da.
   Versteckt wird nur am Bildschirm und nur ohne reduzierte Bewegung.
   Beim Drucken (auch als PDF) steht alles da, und wer die reduzierte
   Bewegung erst nach dem Laden einschaltet, sieht ebenfalls alles.
   ==================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  html.gleiten .einblenden{
    transition:
      opacity var(--dauer) var(--kurve) var(--verzug,0s),
      transform var(--dauer) var(--kurve) var(--verzug,0s),
      background-size calc(var(--dauer) + .5s) var(--kurve) var(--verzug,0s);
  }
  html.gleiten .einblenden:not(.da){opacity:0;transform:translateY(var(--s0))}
  html.gleiten .einblenden:not(.da):is(.saeule,.fundament,.schritte>li,.arbeit,.fragen details,.kachel,.rahmen dl>div,.hero .zeile){
    background-size:0 1px;
  }
}
/* Reduzierte Bewegung: auch die Linie unter den Verweisen steht sofort. */
@media (prefers-reduced-motion:reduce){
  .textlink,.fuss a{transition:none}
}

/* ====================================================================
   Tintenspur. Gehoert zu assets/js/spur.js, nur zusammen sinnvoll.
   Die Linie beginnt an der ersten Ueberschrift. Der Stift steht von
   Anfang an auf der Linie und faehrt nur senkrecht.
   spur.js misst die Ueberschriften ohne deren Gleitbewegung, darum
   duerfen auch die Ueberschriften hereingleiten.
   ==================================================================== */

/* Die grosse Feder im ersten Bildschirm entfaellt: der Stift kommt
   aus dem Logo. Faellt GSAP aus, ist sie wieder da. */
html.bewegt .hero .zeichen{display:none}
/* Ohne Spur (404) gibt es nichts, woraus die Feder zurueckfallen koennte:
   der erste Bildschirm steht dort wie auf jeder anderen Seite. */
.seite:not(:has(>.spur)) .hero .zeichen{display:none}

.seite{position:relative}
.hero,.abschnitt>.inhalt,.abschnitt>.lab,.fuss{position:relative;z-index:1}

/* Die feste Leitlinie wird von der Spur uebernommen. */
html.bewegt .abschnitt>.inhalt{border-left-color:transparent}

.spur{position:absolute;left:var(--lab);top:0;width:1px;pointer-events:none;z-index:0}
.spur .bahn{position:absolute;inset:0;background:var(--rule)}
.spur .tinte{
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:var(--messing);transform:scaleY(0);transform-origin:top center;
}

/* Der Stift. Anker ist die Spitze des Zeichens. Sie liegt bei 96,41 Prozent
   der Dateihoehe, nicht am unteren Rand. Deshalb genau dieser Wert. */
.laeufer{
  position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  opacity:0;will-change:transform;transform-origin:50% 96.41%;
}
.laeufer img{width:100%;height:auto;display:block}

/* ====================================================================
   Schmaler: Etikettenspalte schmaler, Ablauf in zwei Spalten.
   ==================================================================== */
@media (max-width:1100px){
  :root{--lab:116px;--rand:28px}  /* s4 und s1, auf ganze Pixel gerundet */
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ====================================================================
   Handy. Leitsatz, Ueberschrift und Titel ruecken je eine Stufe tiefer
   (s2, s1, s0). Die Ueberschrift bleibt so ueber dem Zitat und den
   Fragen, statt gleich gross daneben zu stehen. Eine Ueberschrift in s2
   passt nicht: "Drei Werkzeuge." braucht 332 px, die Spalte hat bei
   375 px nur 312.
   Der erste Bildschirm ist das Titelblatt: er steht auf der Aussenkante,
   dort wo darunter die Leitlinie beginnt. So bleibt der Leitsatz bis
   360 px ohne Trennung.
   ==================================================================== */
@media (max-width:760px){
  :root{
    --g-leitsatz:var(--s2);--g-ueberschrift:var(--s1);--g-titel:var(--s0);--z-titel:1.618;
    --rand:17px;--lab:0px;--einzug:var(--s1);--luft:var(--s3);--fuge:var(--s1);
  }
  .hero{grid-template-columns:minmax(0,1fr);padding-block:var(--s3)}
  .hero>*{grid-column:1;margin-left:0}
  .hero .claim{grid-row:2;grid-column:1;margin-bottom:var(--s0)}
  .hero .claim .satz{display:inline-block}  /* der Claim in einer Zeile */
  .hero .t-gross{grid-row:3}
  .hero>p:not(.claim),.hero>.unterzeile{grid-row:4}
  .hero .zeile{grid-row:5}
  .abschnitt{grid-template-columns:minmax(0,1fr)}
  .abschnitt>.lab{padding:var(--luft) 0 var(--s0) var(--einzug);border-left:1px solid var(--rule)}
  .abschnitt>.inhalt{padding-top:0}
  html.bewegt .abschnitt>.lab{border-left-color:transparent}
  .spur{left:0}

  .saeulen,.schritte,.arbeiten,.kacheln,.kacheln.zwei{grid-template-columns:minmax(0,1fr);row-gap:var(--s1)}
  /* Die Reihe endet sichtbar: nach dem letzten Punkt s2 wie am Desktop,
     nicht die Fuge s1. Sonst liest sich eine Notiz darunter als Text
     des letzten Punkts. Zwischen den Punkten bleibt s1. */
  .saeulen+*,.schritte+*,.arbeiten+*,.kacheln+*{margin-top:calc(var(--s2) - var(--fuge))}
  .fundament{grid-template-columns:minmax(0,1fr);row-gap:var(--s-1)}  /* wie jeder Punkt der Reihe */
  .fundament span{grid-column:1}
  .ueber{grid-template-columns:minmax(0,1fr)}
  .portraet{width:var(--s4)}
  .ueber .text>p{grid-column:1;grid-row:4;margin-top:var(--fuge)}
  .rahmen dl>div{grid-template-columns:minmax(0,1fr)}
  .rahmen dd{grid-column:1}
  .rahmen dt{margin-bottom:var(--s-2)}
  /* Vor jedem Gruppentitel s0 zur Fuge s1, zusammen s2. */
  .gruppe-titel{margin-top:var(--s0)}
  /* Endet eine Gruppe mit einer Notiz (s2 nach der Reihe), steht die
     naechste Gruppe s3 entfernt, wie am Desktop. Sonst schwebt die Notiz
     mittig zwischen zwei Gruppen. */
  .klein-grau+.gruppe-titel{margin-top:var(--s2)}
  .zurueck,.recht{margin-left:0}
  .recht dl{grid-template-columns:minmax(0,1fr)}
  .recht dt{margin-top:var(--s-2)}
}

/* Sehr schmale Geraete (unter 360 px). Die Groesse bleibt auf der Skala,
   statt dessen wird die Laufweite enger. Beim Leitsatz so weit, dass
   "Unternehmens." (284 px) ganz in die Spalte (286 px) passt: kein
   Trennstrich, vier Zeilen. Der Wortabstand bleibt dabei wie er war.
   Die Ueberschrift (s1) passt ohne Eingriff. Getrennt wird nie
   (hyphens:auto trennt auch Woerter, die in die naechste Zeile passen
   wuerden). Als Netz bricht nur ein Wort, das allein breiter als die
   Spalte waere, statt seitlich ueberzulaufen. */
@media (max-width:359px){
  .t-gross{letter-spacing:-.05em;word-spacing:.05em}
  .t-gross,.t-mittel,.recht h1{overflow-wrap:break-word}
}