/* ==========================================================================
   Betriebsgenie — Die Schreibtafel
   Drei Farben. Alle Zwischenwerte aus Deckkraft, keine vierte Farbe.
   Ecken folgen dem Signet: rx 2 auf Balken, knapp und eckig.
   ========================================================================== */

/* --- Schriften, selbst gehostet. Kein Google-CDN, das wäre ein Datenabfluss. --- */
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/archivonarrow-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/archivonarrow-600-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivonarrow-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/archivonarrow-700-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/librefranklin-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/librefranklin-400-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/librefranklin-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/librefranklin-500-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/librefranklin-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/librefranklin-600-latinext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- Die drei Farben --- */
:root{
  --paper:#F7F7F2;
  --slate:#0B0C0E;
  --lime:#D6FF3F;

  /* Abgeleitet, ausschliesslich durch Deckkraft der drei Farben */
  --on-paper:#0B0C0E;
  --on-paper-2:rgba(11,12,14,.66);   /* 5,4:1 auf Papier */
  --on-paper-3:rgba(11,12,14,.42);   /* nur Dekor, nie Text */
  --rule-paper:rgba(11,12,14,.14);
  --rule-paper-strong:rgba(11,12,14,.30);

  --chalk:#F7F7F2;
  --chalk-2:rgba(247,247,242,.70);   /* 8,3:1 auf Schiefer */
  --chalk-3:rgba(247,247,242,.40);   /* nur grosse Schrift, 3,5:1 */
  --chalk-rule:rgba(247,247,242,.16);
  --chalk-rule-2:rgba(247,247,242,.09);

  --display:"Archivo Narrow",Arial Narrow,Arial,sans-serif;
  --text:"Libre Franklin",Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --r:2px;      /* Balkenradius aus dem Signet */
  --r-tafel:4px;
  --maxw:1180px;
  --gut:clamp(1.25rem,4vw,2rem);

  /* Ein Abstandsrhythmus, durchgehend */
  --s1:.375rem; --s2:.75rem; --s3:1.125rem; --s4:1.75rem;
  --s5:2.5rem;  --s6:3.75rem; --s7:5.5rem;  --s8:7.5rem;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--on-paper);
  font:400 1.0625rem/1.62 var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Browser-Flächen. Was man nicht selbst zeichnet, trägt die Gestaltung mit. --- */
::selection{background:var(--lime);color:var(--slate);}
:root{scrollbar-color:rgba(11,12,14,.34) var(--paper);scrollbar-width:thin;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:rgba(11,12,14,.30);border:3px solid var(--paper);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(11,12,14,.48);}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:var(--r);}
.tafel :focus-visible,.slate-block :focus-visible{outline-color:var(--lime);}
input,textarea,select,button{font:inherit;color:inherit;}
input,textarea{caret-color:var(--slate);}

img,svg{display:block;max-width:100%;}
img{height:auto;}
h1,h2,h3,h4{margin:0;text-wrap:balance;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate);color:var(--chalk);padding:.8rem 1.2rem;
  font:600 .9rem/1 var(--text);border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);}
section{scroll-margin-top:5.5rem;}

/* --- Schriftregister ---------------------------------------------------- */
/* Die Tafelhand: schmal, aufrecht, Versalien. Was auf ein Brett geschrieben wird. */
.hand{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.035em;line-height:1.03;
}
.feld{ /* Feldbezeichnung im Tafelkopf, Teil des Objekts */
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.795rem;letter-spacing:.16em;line-height:1;
}
.zahl{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.05rem,5.9vw,3.95rem);line-height:1.02;letter-spacing:.012em;}
h2{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.06;letter-spacing:.02em;}
h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:1.075rem;line-height:1.2;letter-spacing:.05em;}
.lead{font-size:clamp(1.075rem,1.6vw,1.2rem);line-height:1.58;max-width:56ch;color:var(--on-paper-2);}
.prosa{max-width:68ch;}
.prosa p + p{margin-top:var(--s3);}
.klein{font-size:.875rem;line-height:1.5;color:var(--on-paper-2);}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
.prosa a,.klein a,footer a{text-decoration-color:var(--rule-paper-strong);}
.prosa a:hover,.klein a:hover,footer a:hover{text-decoration-color:currentColor;}

/* --- Kopf --------------------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--rule-paper);
}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem;
  padding-block:.7rem;}
/* Am Handy muessen Marke und Knopf in eine Zeile passen, sonst wird der
   klebende Kopf drei Zeilen hoch und frisst das erste Bild. */
.kopf > .wrap > .knopf{padding-inline:1.05rem;}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto;}
.marke svg{width:32px;height:32px;border-radius:7px;flex:none;}
.marke b{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:.005em;}
.nav{
  display:flex;order:3;flex-basis:100%;gap:var(--s3);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  border-top:1px solid var(--rule-paper);
}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  font:600 .9rem/1 var(--text);text-decoration:none;color:var(--on-paper-2);
  white-space:nowrap;padding-block:.7rem;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--on-paper);border-bottom-color:var(--slate);}
@media (min-width:900px){
  .kopf .wrap{gap:.2rem var(--s4);}
  .kopf > .wrap > .knopf{padding-inline:1.4rem;}
  .nav{order:0;flex-basis:auto;gap:var(--s4);margin-right:var(--s4);overflow:visible;border-top:0;}
  .nav a{padding-block:.4rem;}
}

/* --- Knöpfe. Kein Pillenradius, das Signet ist eckig. ------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:600 .975rem/1 var(--text);letter-spacing:.005em;
  padding:.95rem 1.4rem;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background-color .16s,border-color .16s,box-shadow .16s;
}
.knopf svg{width:16px;height:16px;flex:none;}
.knopf:active{transform:translateY(1px);}
.knopf--lime{background:var(--lime);color:var(--slate);
  box-shadow:0 8px 20px -8px rgba(11,12,14,.42),0 1px 2px rgba(11,12,14,.14);}
.knopf--lime:hover{background:#E2FF6E;box-shadow:0 12px 26px -8px rgba(11,12,14,.5),0 1px 2px rgba(11,12,14,.16);}
.knopf--slate{background:var(--slate);color:var(--chalk);
  box-shadow:0 8px 20px -8px rgba(11,12,14,.4),0 1px 2px rgba(11,12,14,.14);}
.knopf--slate:hover{background:#1B1D20;}
.knopf--rand{border-color:var(--rule-paper-strong);color:var(--on-paper);background:transparent;}
.knopf--rand:hover{border-color:var(--slate);background:rgba(11,12,14,.04);}
.knopf--kreide{border-color:rgba(247,247,242,.34);color:var(--chalk);background:transparent;}
.knopf--kreide:hover{border-color:var(--chalk);background:rgba(247,247,242,.08);}
.knopf[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;}
.knopf[disabled]:active{transform:none;}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:var(--s2);}

/* ==========================================================================
   Die Tafel
   ========================================================================== */
.tafel{
  position:relative;background:var(--slate);color:var(--chalk);
  border-radius:var(--r-tafel);
  padding:clamp(1.15rem,3vw,1.75rem);
  box-shadow:
    inset 0 1px 0 rgba(247,247,242,.13),          /* Licht von oben auf der Kante */
    inset 0 0 0 1px rgba(247,247,242,.07),
    0 2px 5px rgba(11,12,14,.14),
    0 22px 44px -16px rgba(11,12,14,.36);          /* sie hängt an der Wand */
  overflow:hidden;
}
/* Die Kreideleiste. Jede Tafel im Betrieb hat unten eine, darauf liegt die Kreide. */
.tafel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:rgba(247,247,242,.11);
  border-top:1px solid rgba(247,247,242,.07);
}
.tafel > *:last-child{margin-bottom:5px;}
.tafel-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  color:var(--chalk-2);padding-bottom:.7rem;
  border-bottom:1px solid var(--chalk-rule);
}
.tafel-fuss{
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--chalk-rule);
  font-size:.8rem;line-height:1.45;color:var(--chalk-2);
}

/* Die gewischte Vorschrift. Dekor, trägt keine Information. */
.geist{
  position:absolute;right:-.04em;top:.34em;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,11vw,7rem);line-height:.8;letter-spacing:.01em;
  color:rgba(247,247,242,.085);
  transform:rotate(-3deg);
}

/* Die Befundzeilen. Wertspalte rechts, wie die Preisspalte einer Tageskarte. */
.zeilen{margin-top:.35rem;}
.zeile{
  display:flex;align-items:baseline;gap:.6rem;
  padding-block:.62rem;
  border-bottom:1px solid var(--chalk-rule-2);
}
.zeile:last-child{border-bottom:0;}
.zeile-was{font-size:.975rem;line-height:1.35;}
.zeile-fuehrung{
  flex:1 1 auto;min-width:1.5rem;align-self:flex-end;margin-bottom:.32em;
  border-bottom:1px dotted rgba(247,247,242,.3);
}
.zeile-wert{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.9rem;letter-spacing:.05em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Gemessene Werte tragen ihre Einheit klein, wie auf einem Messgeraet. */
.zeile-wert--mass{text-transform:none;letter-spacing:.02em;}
/* Was fehlt, wird gezeichnet statt weggelassen: die leere Zeile in der Form,
   die der Eintrag hätte. */
.zeile-wert--leer{
  display:inline-block;width:4.4rem;height:1.15rem;border-radius:var(--r);
  border:1px dashed rgba(247,247,242,.42);
  background:repeating-linear-gradient(-45deg,transparent 0 5px,rgba(247,247,242,.05) 5px 10px);
}

/* Schreibbewegung: die Zeile wird einmal geschrieben, von links nach rechts.
   Standard ist sichtbar, die Bewegung kommt nur dazu. */
.js .schreibt .zeile{clip-path:inset(0 100% 0 0);}
.js .schreibt.laeuft .zeile{
  animation:schreiben .52s cubic-bezier(.16,1,.3,1) forwards;
}
.js .schreibt.laeuft .zeile:nth-child(1){animation-delay:.05s;}
.js .schreibt.laeuft .zeile:nth-child(2){animation-delay:.17s;}
.js .schreibt.laeuft .zeile:nth-child(3){animation-delay:.29s;}
.js .schreibt.laeuft .zeile:nth-child(4){animation-delay:.41s;}
.js .schreibt.laeuft .zeile:nth-child(5){animation-delay:.53s;}
@keyframes schreiben{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 -2% 0 0);}}
@media (prefers-reduced-motion:reduce){
  .js .schreibt .zeile,.js .schreibt.laeuft .zeile{clip-path:none;animation:none;}
}

/* ==========================================================================
   Erste Ansicht
   ========================================================================== */
.oben{padding-block:clamp(2.75rem,7vw,5rem) clamp(2.5rem,6vw,4.5rem);}
.oben-gitter{display:grid;gap:clamp(2rem,5vw,3.25rem);align-items:start;}
@media (min-width:960px){
  .oben-gitter{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(2.5rem,5vw,4rem);}
}
h1 .zweit{display:block;color:var(--on-paper-2);}
.oben .lead{margin-top:var(--s3);}
.oben .knopf-reihe{margin-top:var(--s4);}
.oben-notiz{margin-top:var(--s2);}

/* --- Beweisband: die einzige belegte Leistungsaussage ------------------- */
.beweis{border-block:1px solid var(--rule-paper);}
.beweis .wrap{padding-block:clamp(2.25rem,5vw,var(--s6));}
.beweis-tafel{margin-top:var(--s4);}
.beweis-satz{font-family:var(--display);font-weight:600;text-transform:none;
  font-size:1.15rem;line-height:1.3;letter-spacing:.005em;color:var(--on-paper);
  max-width:52ch;}
/* Die Befundzahl steht rechts in der Wertspalte, wie jeder andere Tafelwert. */
.beweis-tafel .zeile-wert{font-size:1.05rem;letter-spacing:.02em;}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.abschnitt{padding-block:clamp(2.75rem,6vw,var(--s7));}
.abschnitt--rule{border-top:1px solid var(--rule-paper);}
.abschnitt-kopf{max-width:60ch;}
.abschnitt-kopf p{margin-top:var(--s3);color:var(--on-paper-2);}

/* --- Zwei Türen --------------------------------------------------------- */
.tueren{display:grid;gap:var(--s3);margin-top:var(--s5);}
@media (min-width:860px){.tueren{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}}
.tuer{
  display:flex;flex-direction:column;
  border:1px solid var(--rule-paper-strong);border-radius:var(--r-tafel);
  padding:clamp(1.35rem,3vw,1.9rem);background:var(--paper);
}
.tuer-fuer{font-size:.9rem;line-height:1.45;color:var(--on-paper-2);margin-top:.55rem;}
.tuer h3{margin-top:0;}
.tuer h3 .tuer-nummer{
  color:var(--on-paper-2);font-weight:600;
}
.tuer-liste{margin-top:var(--s3);border-top:1px solid var(--rule-paper);}
.tuer-liste li{
  display:flex;gap:.7rem;padding-block:.62rem;
  border-bottom:1px solid var(--rule-paper);font-size:.95rem;line-height:1.45;
}
.tuer-liste svg{width:17px;height:17px;flex:none;margin-top:.22em;color:var(--on-paper-2);}
.tuer-bleibt{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule-paper);
  font-size:.875rem;line-height:1.5;color:var(--on-paper-2);
}
.tuer-bleibt b{font-weight:600;color:var(--on-paper);}
.tuer .knopf{margin-top:auto;align-self:flex-start;padding-top:.95rem;}
.tuer-bleibt{margin-bottom:var(--s4);}

/* --- Die drei Widgets, als Zeilen einer Karte, nicht als drei Kacheln --- */
.widgets{margin-top:var(--s5);}
.widget{
  display:grid;gap:.5rem var(--s4);align-items:baseline;
  padding-block:clamp(1.1rem,2.5vw,1.5rem);
  border-bottom:1px solid var(--chalk-rule);
}
.widget:last-child{border-bottom:0;padding-bottom:0;}
.widget:first-child{padding-top:.35rem;}
@media (min-width:800px){
  .widget{grid-template-columns:minmax(0,15rem) minmax(0,1fr);}
}
.widget h3{color:var(--chalk);}
.widget-was{font-size:.975rem;line-height:1.55;color:var(--chalk-2);}
.widget-was b{color:var(--chalk);font-weight:600;}
.widget-fuer{
  margin-top:.4rem;font-weight:500;
  font-size:.9rem;line-height:1.35;color:var(--chalk-2);
}
.slate-block{
  background:var(--slate);color:var(--chalk);
  border-radius:var(--r-tafel);
  padding:clamp(1.5rem,4vw,2.75rem);
  box-shadow:inset 0 1px 0 rgba(247,247,242,.12),0 22px 44px -18px rgba(11,12,14,.34);
}
.slate-block h2{color:var(--chalk);}
.slate-block .abschnitt-kopf p{color:var(--chalk-2);}

/* --- Ablauf. Die Reihenfolge trägt Information, darum nummeriert. ------- */
.ablauf{margin-top:var(--s5);counter-reset:schritt;}
.schritt{
  display:grid;gap:.35rem var(--s4);position:relative;
  padding:0 0 var(--s5) var(--s5);
  border-left:1px solid var(--rule-paper);
}
.schritt:last-child{padding-bottom:0;border-left-color:transparent;}
.schritt::before{
  counter-increment:schritt;content:counter(schritt);
  position:absolute;left:0;top:-.1rem;transform:translateX(-50%);
  width:1.85rem;height:1.85rem;border-radius:var(--r);
  display:grid;place-items:center;background:var(--paper);
  border:1px solid var(--rule-paper-strong);
  font-family:var(--display);font-weight:700;font-size:.85rem;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--on-paper-2);
}
/* Der laufende Schritt ist markiert: hier steht der Leser. */
.schritt--jetzt::before{
  background:var(--lime);border-color:var(--lime);color:var(--slate);
}
.schritt--jetzt .schritt-marke{
  display:inline-block;margin-top:.45rem;
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.775rem;letter-spacing:.14em;color:var(--on-paper-2);
}
.schritt p{margin-top:.35rem;color:var(--on-paper-2);max-width:62ch;font-size:.975rem;}
@media (min-width:800px){
  .schritt{grid-template-columns:minmax(0,13rem) minmax(0,1fr);padding-bottom:var(--s5);}
  .schritt p{margin-top:0;}
}

/* --- Arbeitsproben ------------------------------------------------------ */
.proben{display:grid;gap:var(--s4);margin-top:var(--s5);}
@media (min-width:760px){.proben{grid-template-columns:repeat(2,minmax(0,1fr));}}
.probe figure{margin:0;}
.probe-bild{
  position:relative;border:1px solid var(--rule-paper-strong);border-radius:var(--r-tafel);
  overflow:hidden;background:var(--slate);aspect-ratio:1120/406;
}
.probe-bild img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.probe-stempel{
  position:absolute;left:.6rem;top:.6rem;
  background:var(--paper);color:var(--slate);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.13em;line-height:1;
  padding:.42rem .55rem;border-radius:var(--r);
}
.probe figcaption{margin-top:var(--s2);}
.probe figcaption b{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.045em;}
.probe figcaption p{font-size:.9rem;line-height:1.5;color:var(--on-paper-2);margin-top:.2rem;}
.proben-hinweis{margin-top:var(--s4);}

/* --- Über ------------------------------------------------------------- */
.ueber{display:grid;gap:var(--s5);align-items:start;margin-top:var(--s5);}
@media (min-width:820px){.ueber{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s6);}}
.ueber img{
  width:100%;max-width:15rem;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;
  border-radius:var(--r-tafel);border:1px solid var(--rule-paper-strong);
}
.ueber-daten{
  display:grid;gap:var(--s3) var(--s4);margin-top:var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--rule-paper);
}
@media (min-width:560px){.ueber-daten{grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;}}
.ueber-daten div{display:flex;flex-direction:column;gap:.15rem;}
.ueber-daten dt{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.13em;color:var(--on-paper-2);
}
.ueber-daten dd{margin:0;font-weight:500;font-size:.95rem;font-variant-numeric:tabular-nums;}

/* --- Fragen ------------------------------------------------------------ */
.fragen{margin-top:var(--s5);border-top:1px solid var(--rule-paper);max-width:78ch;}
.fragen details{border-bottom:1px solid var(--rule-paper);}
.fragen summary{
  display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;list-style:none;
  padding-block:var(--s3);font:600 1.0125rem/1.45 var(--text);
}
.fragen summary::-webkit-details-marker{display:none;}
.fragen summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.42em;
  width:.62rem;height:.62rem;
  border-right:1.5px solid var(--on-paper-2);border-bottom:1.5px solid var(--on-paper-2);
  transform:rotate(45deg);transition:transform .18s cubic-bezier(.16,1,.3,1);
}
.fragen details[open] summary::after{transform:rotate(-135deg);}
.fragen summary:hover{color:var(--on-paper);}
.fragen p{padding-bottom:var(--s3);max-width:66ch;color:var(--on-paper-2);}

/* --- Termin und Kontakt ------------------------------------------------ */
.handeln{display:grid;gap:var(--s5);margin-top:var(--s5);align-items:start;}
@media (min-width:900px){
  .handeln{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:var(--s6);}
  /* Die Tafel behaelt ihre eigene Hoehe. Sie zu strecken erzeugte innen ein Loch,
     und ein Loch in der Tafel ist schlimmer als Papier daneben. */
  .handeln > .tafel{align-self:start;}
}
.termin-zeiten{margin-top:var(--s3);}
.termin-lade{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--chalk-rule);
}
.termin-rahmen{margin-top:var(--s3);border-radius:var(--r);overflow:hidden;background:var(--paper);}
.termin-rahmen iframe{display:block;width:100%;height:640px;border:0;}

/* --- Formular ---------------------------------------------------------- */
.form{margin-top:var(--s4);}
.form-reihe{display:grid;gap:var(--s3);margin-bottom:var(--s3);}
@media (min-width:560px){.form-reihe--2{grid-template-columns:repeat(2,minmax(0,1fr));}}
.feld-gruppe{display:flex;flex-direction:column;gap:.4rem;}
.feld-gruppe label{font:600 .875rem/1.3 var(--text);}
.feld-gruppe label .opt{font-weight:400;color:var(--on-paper-2);}
.feld-gruppe input,.feld-gruppe textarea{
  width:100%;padding:.8rem .9rem;background:var(--paper);
  border:1px solid var(--rule-paper-strong);border-radius:var(--r);
  font-size:1rem;line-height:1.45;
  transition:border-color .15s,box-shadow .15s;
}
.feld-gruppe input::placeholder,.feld-gruppe textarea::placeholder{color:var(--on-paper-2);}
.feld-gruppe input:hover,.feld-gruppe textarea:hover{border-color:rgba(11,12,14,.46);}
.feld-gruppe input:focus,.feld-gruppe textarea:focus{
  outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(11,12,14,.1);
}
.feld-gruppe textarea{min-height:8.5rem;resize:vertical;}
.feld-gruppe[data-fehler] input,.feld-gruppe[data-fehler] textarea{border-color:#8C2F1E;}
.feld-fehler{font:500 .82rem/1.4 var(--text);color:#8C2F1E;}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-fuss{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;}
.form-melde{
  margin-top:var(--s3);padding:var(--s3);border-radius:var(--r);
  font-size:.94rem;line-height:1.5;border:1px solid;
}
.form-melde--ok{background:rgba(214,255,63,.16);border-color:rgba(11,12,14,.3);color:var(--on-paper);}
.form-melde--fehler{background:rgba(140,47,30,.07);border-color:rgba(140,47,30,.4);color:#7A2919;}
[hidden]{display:none !important;}

/* --- Vorbereitet, noch ohne Inhalt ------------------------------------- */
/* Der Rückmeldungs-Abschnitt liegt in index.html als Kommentar bereit.
   Er wird eingeschaltet, sobald echte Rückmeldungen vorliegen, nicht vorher. */
.stimmen{display:grid;gap:var(--s4);margin-top:var(--s5);}
@media (min-width:820px){.stimmen{grid-template-columns:repeat(2,minmax(0,1fr));}}
.stimme{border-left:1px solid var(--rule-paper-strong);padding-left:var(--s4);}
.stimme blockquote{margin:0;font-size:1.05rem;line-height:1.55;}
.stimme figcaption{margin-top:var(--s2);font-size:.875rem;color:var(--on-paper-2);}

/* --- Fuß --------------------------------------------------------------- */
.fuss{border-top:1px solid var(--rule-paper);margin-top:var(--s6);}
.fuss .wrap{display:grid;gap:var(--s4);padding-block:var(--s5);}
@media (min-width:760px){.fuss .wrap{grid-template-columns:minmax(0,1fr) auto;align-items:start;}}
.fuss-marke{display:flex;align-items:center;gap:.6rem;}
.fuss-marke svg{width:26px;height:26px;border-radius:5px;}
.fuss-marke b{font-family:var(--display);font-weight:700;font-size:1.05rem;}
.fuss address{font-style:normal;font-size:.9rem;line-height:1.6;color:var(--on-paper-2);margin-top:var(--s2);}
.fuss-links{display:flex;flex-wrap:wrap;gap:.25rem var(--s3);font-size:.9rem;}
/* Antippflaeche: 17 px hohe Links sind am Handy nicht sicher zu treffen. */
.fuss-links a{color:var(--on-paper-2);display:inline-block;padding-block:.55rem;}
.fuss-links a:hover{color:var(--on-paper);}
.fuss-recht{grid-column:1/-1;padding-top:var(--s3);border-top:1px solid var(--rule-paper);
  font-size:.875rem;color:var(--on-paper-2);}

/* --- Rechtstexte ------------------------------------------------------- */
.recht{padding-block:clamp(2.5rem,6vw,4.5rem);}
.recht .prosa{max-width:72ch;}
.recht h2{margin-top:var(--s6);}
.recht h2:first-of-type{margin-top:var(--s5);}
.recht h3{margin-top:var(--s4);}
.recht p,.recht ul{margin-top:var(--s3);}
.recht ul li{padding-left:1.1rem;position:relative;margin-top:.4rem;}
.recht ul li::before{content:"";position:absolute;left:0;top:.62em;
  width:.32rem;height:.32rem;background:var(--on-paper-2);border-radius:50%;}
.recht dl{margin:var(--s3) 0 0;}
.recht dt{font-weight:600;margin-top:var(--s3);}
.recht dd{margin:.2rem 0 0;color:var(--on-paper-2);}