/* ==========================================================================
   CraftPartner — Entwurf 11 „Werkstatt live“
   Gestaltung von Entwurf 02: schwere Grotesk für die Aussage, Serife für den
   Lesetext, Werkbankfarben, warmes Putty als Grund.
   Neu ist die Signatur: eine mitlaufende Bühne, auf der erst das Telefon des
   Heimwerkers steht, dann der Laptop der Marktleitung aufklappt, dann der des
   Herstellers. Dazu eine Akzentwahl am rechten Rand und der Normen-Abschnitt.
   ========================================================================== */

:root{
  --putty:#efe9de;
  --putty-deep:#e3dbcc;
  --card:#fbf8f2;
  --ink:#241f1a;
  --ink-soft:#4c443b;
  --muted:#5f5749;
  --pine:#2f4a3c;
  --pine-deep:#22382d;
  --brass:#a8802c;
  --brass-text:#70510f;

  /* Akzent. Vier Werte, nicht einer: --accent-on ist die Schrift *auf* der
     Akzentfläche, --accent-text der Akzent *als* Schrift auf hellem Grund.
     Weiß auf Gelb wäre unlesbar, ein heller Akzent taugt nicht als Schrift.
     Die Indirektion bleibt: ein Rebranding ist damit eine Zeile. */
  --accent:var(--pine);
  --accent-deep:var(--pine-deep);
  --accent-on:#ffffff;
  --accent-text:var(--pine);
  --line:#d6cdbc;

  /* Die beiden Farben des Zeichens. Sie stehen hier, damit das Wort neben dem
     Zeichen denselben Ton trifft — ein Rebranding des Akzents lässt sie
     bewusst unberührt, ein Markenzeichen ist keine Akzentfarbe. */
  --logo-ink:#1d3446;
  --logo-ring:#a7a49c;

  /* Schriftbild. Familie allein genügt nicht: Georgia im Gewicht 800 ist ein
     Fettklotz, Palatino bei -.045em klebt zusammen. Darum stehen Gewicht und
     Laufweite als eigene Werte daneben. --util (Mono) trägt Zahlen und
     Kleingedrucktes. */
  --display:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --display-weight:800;
  --display-weight-sm:700;
  /* Die Laufweiten stehen weiterhin je Regel — groß gesetzte Zeilen brauchen
     mehr Zug als kleine. Der Faktor zieht sie gemeinsam nach: Serifen wollen
     deutlich lockerer stehen als eine enge Grotesk. */
  --display-track-scale:1;
  --body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --util:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:min(70rem,100% - 2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--putty);color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.09rem)/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
::selection{background:var(--accent);color:var(--accent-on)}
a{color:var(--accent-text)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:2px}

.shell{width:var(--shell);margin-inline:auto}

.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--accent-on);padding:.7rem 1rem;text-decoration:none;z-index:99}
.skip:focus{left:.5rem;top:calc(var(--cp-switcher-h,0px) + .5rem)}

/* ── Kopf ───────────────────────────────────────────────────────────── */

.bar{position:sticky;top:var(--cp-switcher-h,0px);z-index:40;background:var(--putty);border-bottom:2px solid var(--ink)}
.bar__in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
/* Zeichen und Wort. Die Bogenschrift „CRAFT"/„PARTNER" im Zeichen ist bei
   44 px nur noch Ornament, darum steht der Name daneben als Schrift. Beide
   gehören zur Marke und bringen ihre eigene Farbe mit (Tintenblau aus dem
   Zeichen, dazu Kranzgrau); sie folgen deshalb als einzige nicht --accent. */
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.logo__mark{height:44px;width:auto;display:block;flex:none}
/* Die Grotesk des Zeichens ist eine geschlossene, eng laufende Serifenlose —
   die Display-Familie der Seite im schweren Schnitt kommt ihr am nächsten. */
.logo__wort{font:var(--display-weight) 1.3125rem/1 var(--display);
  letter-spacing:calc(-.02em * var(--display-track-scale));color:var(--logo-ink);
  white-space:nowrap}
.logo:hover .logo__wort{color:var(--accent-text)}

.bar__nav{display:flex;gap:1.4rem;margin-left:auto}
.bar__nav a{font:var(--display-weight-sm) .8125rem/1 var(--display);letter-spacing:calc(-.005em * var(--display-track-scale));color:var(--ink-soft);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.bar__nav a:hover{border-bottom-color:var(--accent);color:var(--ink)}
/* Wo man gerade steht: app.js setzt .is-current auf den Link des Abschnitts,
   der die Mitte des Fensters füllt. Dieselbe Unterstreichung wie beim
   Sprachumschalter — die Kopfzeile kennt nur eine Art, „hier" zu sagen. */
.bar__nav a.is-current{border-bottom-color:var(--accent);color:var(--ink)}
.bar__end{display:flex;align-items:center;gap:.85rem;margin-left:auto}
.bar__nav + .bar__end{margin-left:1.4rem}

.lang{display:inline-flex;gap:.35rem}
/* Der Sprachumschalter besteht seit dem Wechsel auf getrennte Adressen aus
   Links, nicht mehr aus Knöpfen. Beide Selektoren stehen hier, damit die
   Gestaltung an einer Stelle bleibt. */
.lang a,
.lang button{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:.35rem .1rem;
  text-decoration:none;
  font:var(--display-weight-sm) .75rem/1 var(--display);letter-spacing:calc(-.01em * var(--display-track-scale));color:var(--muted);
  border-bottom:2px solid transparent;
}
.lang a.is-active,
.lang button.is-active{color:var(--ink);border-bottom-color:var(--accent)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:var(--display-weight-sm) .875rem/1 var(--display);letter-spacing:calc(-.01em * var(--display-track-scale));text-decoration:none;
  background:var(--accent);color:var(--accent-on);padding:.95rem 1.4rem;
  border:2px solid var(--accent);border-radius:2px;transition:transform .15s,background .15s;
}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);transform:translate(-1px,-1px)}
.btn--tight{padding:.6rem .9rem;font-size:.8125rem}
.btn--line{background:transparent;color:var(--accent-text);border-color:var(--ink)}
.btn--line:hover{background:var(--card);color:var(--ink)}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero{position:relative;padding:clamp(3rem,8vw,6.5rem) 0 0}
.kicker{
  margin:0 0 1.5rem;font:700 .6875rem/1.4 var(--util);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);
}
h1{
  margin:0 0 1.75rem;
  font:var(--display-weight) clamp(2.6rem,1rem + 6.4vw,5.5rem)/.95 var(--display);
  letter-spacing:calc(-.045em * var(--display-track-scale));color:var(--ink);
}
.hero__say{margin:0 0 2.25rem;max-width:52ch;font-size:1.13em;color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem}
.fine{margin:1.1rem 0 0;font:400 .8125rem/1.5 var(--util);color:var(--muted)}
.benchline{
  margin-top:clamp(2.5rem,6vw,4.5rem);height:14px;
  background:linear-gradient(var(--ink) 0 3px,transparent 3px) ,
             repeating-linear-gradient(90deg,var(--putty-deep) 0 22px,var(--line) 22px 24px);
}
.h2{margin:0 0 .8rem;font:var(--display-weight) clamp(1.7rem,3.2vw,2.6rem)/1.08 var(--display);letter-spacing:calc(-.035em * var(--display-track-scale))}
.lead{margin:0 0 2.5rem;max-width:56ch;color:var(--ink-soft)}

/* Abschnittskopf. Breit genug wird daraus ein Zweispalter: Überschrift links,
   Vorspann rechts — siehe home/blocks/section_intro.html. Die Abstände wandern
   dabei an den Umschlag, damit beide Spalten oben bündig anfangen. */
.einstieg{margin:0 0 2.5rem}
.einstieg .h2:last-child{margin-bottom:0}
@media (min-width:64rem){
  .einstieg:not(.einstieg--allein){
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(2rem,5vw,4rem);align-items:start;
  }
  .einstieg .kicker{grid-column:1/-1}
  .einstieg .h2,.einstieg .lead{margin-bottom:0}
  /* Der Vorspann setzt kleiner: ohne diesen Schub liefe seine erste Zeile
     oberhalb der Versalhöhe der Überschrift an. */
  .einstieg .lead{padding-top:.45rem}
}


/* ── Wissen ─────────────────────────────────────────────────────────── */

.wissen{padding:clamp(3rem,6vw,5rem) 0}
.stock{list-style:none;margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));background:var(--line);
  border:1px solid var(--line)}
.stock li{background:var(--putty);padding:1.4rem 1.2rem}
.stock b{display:block;font:var(--display-weight) clamp(1.9rem,4vw,2.6rem)/1 var(--display);letter-spacing:calc(-.045em * var(--display-track-scale));
  color:var(--accent-text);font-variant-numeric:tabular-nums;margin-bottom:.45rem}
.stock span{font-size:.85rem;line-height:1.45;color:var(--muted);display:block}

.knot{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;background:var(--card);border:2px solid var(--ink);padding:clamp(1.5rem,3vw,2.25rem)}
.knot h3{margin:0 0 .7rem;font:var(--display-weight) 1.3rem/1.2 var(--display);letter-spacing:calc(-.03em * var(--display-track-scale))}
.knot p{margin:0 0 1rem;font-size:.95rem;color:var(--ink-soft);max-width:48ch}
.knot p:last-child{margin:0}
.knot__svg{width:100%;height:auto}
.knot .edges line{stroke:var(--line);stroke-width:1.5}
.knot .nodes circle{fill:var(--pine)}
.knot .nodes g:nth-child(n+4) circle{fill:var(--brass)}
.knot .nodes text{font:600 9px/1 var(--util);fill:var(--muted);letter-spacing:.02em}
.knot .nodes g:first-child text{fill:var(--ink);font-weight:800;font-size:11px}

/* ── Neutralität ────────────────────────────────────────────────────── */

.neutral{background:var(--accent);color:var(--accent-on);padding:clamp(3rem,7vw,5.5rem) 0}
.kicker--light{color:var(--accent-on)}
.big{margin:0 0 1.5rem;max-width:26ch;
  font:var(--display-weight) clamp(1.7rem,3.6vw,2.9rem)/1.08 var(--display);letter-spacing:calc(-.04em * var(--display-track-scale));color:var(--accent-on)}
.big__after{margin:0;max-width:58ch;color:var(--accent-on);opacity:.86;font-size:1rem}

/* ── Handel ─────────────────────────────────────────────────────────── */

.handel{padding:clamp(3rem,6vw,5rem) 0}
.handel__grid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.ticks li{position:relative;padding-left:2rem;font-size:.98rem;line-height:1.55}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.side{display:grid;gap:1rem}
.side article{background:var(--card);border-left:4px solid var(--accent);padding:1.1rem 1.2rem}
.side h3{margin:0 0 .3rem;font:var(--display-weight) 1rem/1.2 var(--display);letter-spacing:calc(-.025em * var(--display-track-scale))}
.side p{margin:0;font-size:.9rem;color:var(--muted)}

.modell{background:var(--putty-deep);border:2px solid var(--ink);padding:clamp(1.5rem,3vw,2.25rem)}
.modell h3{margin:0 0 .7rem;font:var(--display-weight) 1.3rem/1.2 var(--display);letter-spacing:calc(-.03em * var(--display-track-scale))}
.modell > p{margin:0 0 1.75rem;max-width:64ch;font-size:.98rem;color:var(--ink-soft)}
.markt{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin:0 !important;
  padding-top:1.5rem;border-top:2px solid var(--ink)}
.markt b{display:block;font:var(--display-weight) 1.9rem/1 var(--display);letter-spacing:calc(-.045em * var(--display-track-scale));color:var(--accent-text);
  font-variant-numeric:tabular-nums;margin-bottom:.3rem}
.markt em{font-style:normal;font-size:.82rem;line-height:1.4;color:var(--muted);display:block}

/* ── Weg ────────────────────────────────────────────────────────────── */

.weg{padding:clamp(3rem,6vw,5rem) 0;background:var(--putty-deep);border-top:2px solid var(--ink)}
.timeline{list-style:none;margin:0 0 clamp(2.5rem,5vw,3.5rem);padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:clamp(1rem,3vw,2rem);
  padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.timeline li:first-child{border-top:2px solid var(--ink)}
.timeline b{font:700 .875rem/1.3 var(--util);letter-spacing:.04em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.timeline span{font-size:.98rem;max-width:52ch}

.herkunft h3{margin:0 0 .8rem;font:var(--display-weight) clamp(1.35rem,2.6vw,1.9rem)/1.15 var(--display);letter-spacing:calc(-.035em * var(--display-track-scale));max-width:24ch}
.herkunft p{margin:0 0 1.5rem;max-width:64ch;color:var(--ink-soft);font-size:.98rem}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{font:var(--display-weight-sm) .8125rem/1 var(--display);color:var(--muted);background:var(--card);
  border:1px solid var(--line);padding:.55rem .75rem;border-radius:2px}

/* ── Ende ───────────────────────────────────────────────────────────── */

.ende{padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.ende h2{margin:0 0 .8rem;font:var(--display-weight) clamp(1.8rem,3.4vw,2.8rem)/1.08 var(--display);letter-spacing:calc(-.04em * var(--display-track-scale))}
.ende p{margin:0 auto 2rem;max-width:56ch;color:var(--ink-soft)}
.ende .cta{justify-content:center}

.foot{background:var(--ink);color:#b9b0a3;padding:2rem 0}
.foot .shell{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.foot p{margin:0;font-size:.8125rem}
.foot nav{display:flex;gap:1.25rem}
.foot a{font:var(--display-weight-sm) .8125rem/1 var(--display);color:#d8d0c4;text-decoration:none;border-bottom:1px solid #4c443b}
.foot a:hover{color:#e9d9b4;border-bottom-color:#e9d9b4}

/* ── Schmaler ───────────────────────────────────────────────────────── */

@media (max-width:64rem){
  .knot{grid-template-columns:1fr}
  .handel__grid{grid-template-columns:1fr}
}
@media (max-width:52rem){
  .bar__in{flex-wrap:wrap;gap:.75rem;padding-block:.7rem;min-height:0}
  .bar__nav{display:none}
  .bar__end{margin-left:auto}
  /* Auf dem Telefon teilen sich Zeichen, Wort und Sprachwahl eine Zeile.
     Beide rücken zusammen, damit nichts umbricht. */
  .logo{gap:.5rem}
  .logo__mark{height:36px}
  .logo__wort{font-size:1.125rem}
  .timeline li{grid-template-columns:1fr;gap:.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .btn:hover{transform:none}
}

/* ── Fotografie ──────────────────────────────────────────────────────
   Warm und vollfarbig — hier darf das Material selbst sprechen. */

.hero__shot{margin:clamp(2.5rem,6vw,4rem) 0 0}
.hero__pic{
  display:block;width:100%;height:clamp(15rem,34vw,26rem);object-fit:cover;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}

.cp-phone{
  --cp-phone-frame:var(--pine);
  --cp-phone-screen:var(--card);
  --cp-phone-ink:var(--ink);
  --cp-phone-muted:var(--muted);
  --cp-phone-line:var(--line);
  --cp-phone-soft:var(--putty);
  --cp-phone-ok:var(--pine);
  --cp-phone-gap:#9a3412;
  --cp-phone-radius:26px;
}

/* Farbwerte für das gemeinsame Netz. */
svg[data-graph]{
  --cp-graph-edge:var(--line);
  --cp-graph-edge-lit:var(--brass);
  --cp-graph-edge-dim:#e6e0d4;
  --cp-graph-hub:var(--pine);
  --cp-graph-node:var(--pine);
  --cp-graph-node-alt:var(--brass);
  --cp-graph-node-dim:#cfc7b6;
  --cp-graph-label:var(--muted);
  --cp-graph-label-hub:var(--ink);
  --cp-graph-label-dim:#b0a897;
  --cp-graph-surface:var(--card);
  --cp-graph-label-size:9.5px;
}

@media (max-width:56rem){
  .cp-phone{margin-inline:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   Entwurf 11 — was über Entwurf 02 hinausgeht
   ══════════════════════════════════════════════════════════════════════ */

/* Auf dunkler Akzentfläche muss auch das Kleingedruckte mitwandern. */
.neutral .kicker{color:var(--accent-on)}

/* ── Bühne: Telefon und zwei Laptops an derselben Stelle ─────────────── */

.run{padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem);
  background:
    radial-gradient(circle at 12px 12px,rgba(36,31,26,.10) 1.6px,transparent 1.7px) 0 0/24px 24px,
    var(--putty-deep);
}
.run__grid{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,27rem) minmax(0,1fr);
  align-items:start;margin-top:clamp(1.5rem,3vw,2.5rem);
}

.stage{
  position:sticky;top:calc(var(--cp-switcher-h,0px) + 5.5rem);
  display:grid;min-height:30rem;
}
/* Alle Geräte liegen übereinander; nur das aktive ist sichtbar. */
.stage__slot{
  grid-area:1/1;opacity:0;visibility:hidden;
  transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
  align-self:center;
}
.stage__slot.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease,transform .45s ease,visibility 0s;
}

.cp-phone{
  --cp-phone-frame:var(--accent);
  --cp-phone-screen:var(--card);
  --cp-phone-ink:var(--ink);
  --cp-phone-muted:var(--muted);
  --cp-phone-line:var(--line);
  --cp-phone-soft:var(--putty);
  --cp-phone-ok:#2f4a3c;
  --cp-phone-gap:#9a3412;
  --cp-phone-radius:26px;
  margin-inline:auto;
}
.cp-phone{max-width:19rem}
/* Feste Höhe, keine Mindesthöhe: die acht Schirme sind unterschiedlich voll —
   „Nachbarschaft" ist der längste — und mit min-height wüchse und schrumpfte
   das Gerät beim Durchscrollen. Das Maß ist der längste Schirm der längsten
   Sprache (deutsch, 554 px) plus etwas Luft. Wer einen Schirm verlängert, muss
   hier nachziehen; sonst schneidet overflow:hidden ihn ab. */
.cp-phone .cp-phone__screen{height:35.5rem}
.cp-phone .cp-bubble--me{color:var(--accent-on)}
/* Der Vorschriften-Hinweis ist die einzige Meldung, die wirklich bremst. */
.cp-note--warn{background:#fdeee0;color:#7a3c05}

.cp-laptop .cp-laptop__screen{aspect-ratio:auto;min-height:19rem}
.cp-laptop{
  /* Gehäuse, Sockel und Akzent setzen die Modifikatoren --retail / --maker in
     shared/laptop.css — hier stünde sonst für beide Geräte dasselbe. */
  --cp-laptop-screen:var(--card);
  --cp-laptop-ink:var(--ink);
  --cp-laptop-muted:var(--muted);
  --cp-laptop-line:var(--line);
  --cp-laptop-soft:var(--putty);

  /* Kategoriale Farben der Diagramme — mit dem Palettenvalidator geprüft
     (#2563eb / #b45309 / #0d9488 / #9333ea, alle Checks bestanden). Sie
     bleiben bewusst unabhängig vom Akzent: Serienfarben sind Daten, keine
     Marke, und dürfen beim Farbwechsel nicht die Bedeutung wechseln. */
  --cat-1:#2563eb;
  --cat-2:#b45309;
  --cat-3:#0d9488;
  --cat-4:#9333ea;
}

/* ── Stationen ───────────────────────────────────────────────────────── */

.run .steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3rem,10vw,7rem)}
.run .step{
  padding-left:1.25rem;border-left:3px solid var(--line);
  transition:border-color .25s;
}
.run .step.is-current{border-left-color:var(--accent)}
.run .step__no{
  margin:0 0 .6rem;font:700 .6875rem/1 var(--util);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.run .step.is-current .step__no{color:var(--accent-text)}
.run .step h3{margin:0 0 .7rem;font:var(--display-weight) clamp(1.35rem,2.4vw,1.9rem)/1.15 var(--display);
  letter-spacing:calc(-.035em * var(--display-track-scale));max-width:20ch}
.run .step p{margin:0 0 .8rem;max-width:48ch;color:var(--ink-soft)}
.run .step p:last-child{margin-bottom:0}
.run .step__punch{
  font:var(--display-weight) 1.1rem/1.3 var(--display) !important;letter-spacing:calc(-.03em * var(--display-track-scale));
  color:var(--ink) !important;padding-top:.9rem;border-top:2px solid var(--ink);
}
/* Perspektivwechsel: der Moment, in dem das Gerät wechselt, wird angesagt. */
.run .step--turn .step__no{color:var(--accent-text)}
.run .step--turn h3{max-width:22ch}
.run .step--turn::before{
  content:"";display:block;width:2.5rem;height:3px;background:var(--accent);
  margin:0 0 1.1rem -1.25rem;
}

/* ── Normen ──────────────────────────────────────────────────────────── */

.normen{padding:clamp(3rem,6vw,5rem) 0;background:var(--card);border-block:2px solid var(--ink)}
.rules{list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.rule{border:2px solid var(--ink);border-radius:3px;padding:1.35rem 1.35rem 1.2rem;
  background:var(--putty);box-shadow:5px 5px 0 rgba(36,31,26,.10)}
.rule p.rule__tag{
  margin:0 0 .9rem;display:inline-block;
  font:700 .6875rem/1 var(--util);letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-on);padding:.4rem .6rem;
}
.rule h3{margin:0 0 .6rem;font:var(--display-weight) 1.2rem/1.2 var(--display);letter-spacing:calc(-.03em * var(--display-track-scale))}
.rule p{margin:0 0 .9rem;font-size:.9375rem;color:var(--ink-soft)}
.rule__out{
  margin:0 !important;padding-top:.85rem;border-top:1px dashed var(--line);
  font:400 .8125rem/1.5 var(--util) !important;color:var(--accent-text) !important;
}

/* Der Zweispalter mit abgesetztem Hinweis. Der Klassenname stammt aus dem
   Normen-Abschnitt, wo der Block zuerst stand; inzwischen schließt er auch den
   Wissens-Abschnitt ab. Der Abstand nach oben muss deshalb hier stehen und
   nicht am Vorgänger: Ohne ihn stößt die Trennlinie direkt auf den Rahmen des
   Netz-Kastens, und die beiden Striche verschmelzen zu einem dicken. Wo der
   Vorgänger schon Abstand hält (die Regelkarten), fallen beide Ränder
   zusammen — das Maß bleibt dasselbe. */
.normen__foot{display:grid;gap:clamp(1.5rem,4vw,2.5rem);
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:2rem;border-top:2px solid var(--ink)}
.normen__foot h3{margin:0 0 .7rem;font:var(--display-weight) 1.2rem/1.2 var(--display);letter-spacing:calc(-.03em * var(--display-track-scale))}
.normen__foot p{margin:0 0 .9rem;color:var(--ink-soft);max-width:52ch}
.normen__note{
  margin:0 !important;padding:1.1rem 1.2rem;background:var(--putty-deep);
  border-left:4px solid var(--accent);
  font:400 .8125rem/1.6 var(--util) !important;color:var(--ink) !important;
}

/* ── Schmaler: Bühne läuft im Fluss mit ─────────────────────────────── */

@media (max-width:64rem){
  .run__grid{grid-template-columns:minmax(0,1fr)}
  .stage{position:static;min-height:0;display:grid;gap:2rem;
    grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
  .stage__slot{grid-area:auto;opacity:1;visibility:visible;transform:none}
  .cp-phone .cp-phone__screen{height:auto;display:block}
  .cp-phone .cp-screen{display:block;border-bottom:1px solid var(--line)}
  .cp-phone .cp-screen:last-child{border-bottom:0}
  .run .steps{gap:2.5rem}
  .run .step{border-left-color:var(--accent)}
  .normen__foot{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .stage__slot{transition:none}
}

/* ── Fotografie in den neuen Abschnitten ─────────────────────────────── */

/* Bildband. Im Entwurf gab es dieselbe Regel dreimal, je Abschnitt einmal,
   und sie unterschied sich nur in der Höhe — als frei platzierbarer Block ist
   das eine Regel mit drei Varianten. Beschnitten wird über object-fit und
   nicht serverseitig: die Motive liegen als 3:2 vor, und je nach Breite ist ein
   anderer Anschnitt richtig. */
.bildband{margin:0 0 clamp(1.5rem,3vw,2.25rem);border:2px solid var(--ink)}
.bildband img{display:block;width:100%;object-fit:cover}
.bildband--klein img{height:clamp(8rem,14vw,11rem)}
.bildband--normal img{height:clamp(10rem,18vw,14rem)}
.bildband--hoch img{height:clamp(11rem,22vw,18rem)}
.bildband figcaption{
  padding:.8rem 1rem;border-top:2px solid var(--ink);background:var(--putty);
  font:400 .8125rem/1.5 var(--util);color:var(--ink-soft);
}



/* ── Textseiten ──────────────────────────────────────────────────────
   Impressum, Datenschutz, Artikel. Die Landingpage argumentiert mit
   Komposition, diese Seiten mit Lesbarkeit: eine Spalte, ruhiges Maß,
   dieselbe Schrift. Kein eigenes Gestaltungssystem — nur die Bausteine,
   die oben schon stehen. */

.prosa{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,8vw,6rem)}
.prosa h1{
  margin:0 0 1rem;
  font:var(--display-weight) clamp(1.9rem,4vw,3rem)/1.06 var(--display);
  letter-spacing:calc(-.04em * var(--display-track-scale));
}
.prosa h2{
  margin:2.5rem 0 .6rem;
  font:var(--display-weight-sm) clamp(1.1rem,1.8vw,1.35rem)/1.2 var(--display);
  letter-spacing:calc(-.02em * var(--display-track-scale));
}
.prosa h3{margin:1.8rem 0 .4rem;font:var(--display-weight-sm) 1.05rem/1.25 var(--display)}
/* 68 Zeichen sind die bequeme Lesebreite; darüber verliert das Auge die Zeile. */
.prosa p,.prosa li{max-width:68ch}
.prosa p{margin:0 0 1rem}
.prosa ul,.prosa ol{margin:0 0 1.2rem;padding-left:1.3rem}
.prosa li{margin:0 0 .4rem}
.prosa hr{margin:2.5rem 0;border:0;border-top:2px solid var(--ink)}
.prosa .lead{margin-bottom:2rem}
.prosa a{color:var(--accent-text)}
/* Knöpfe behalten ihre eigenen Farben, auch im Fließtext. `.prosa a` ist
   spezifischer als `.btn` und färbte sie sonst um — der gefüllte Knopf stand
   dann dunkelgrün auf dunkelgrün, also unsichtbar. Aufgefallen ist das erst
   am Bildschirmfoto der Terminseite; die Landingpage setzt ihre Knöpfe
   außerhalb von `.prosa` und war nie betroffen. */
.prosa a.btn{color:var(--accent-on)}
.prosa a.btn--line{color:var(--accent-text)}
.prosa a.btn--line:hover{color:var(--ink)}
.anschrift{font-style:normal;line-height:1.7}

.zitat{
  margin:2rem 0;padding:1.2rem 1.4rem;
  border-left:4px solid var(--accent);background:var(--card);
}
.zitat p{margin:0 0 .5rem;font-size:1.08em}
.zitat cite{font:400 .8125rem/1.5 var(--util);color:var(--muted);font-style:normal}

.artikelliste{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:0}
.artikel{
  display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2rem);align-items:start;
  padding:1.6rem 0;border-bottom:1px solid var(--line);
}
.artikel:first-child{border-top:2px solid var(--ink)}
.artikel img{display:block;width:100%;height:9rem;object-fit:cover;border:2px solid var(--ink)}
.artikel__datum{margin:0 0 .35rem;font:400 .8125rem/1.4 var(--util);color:var(--muted)}
/* h2 in der Artikelübersicht, h4 im Startseitenblock: Dort steht die Liste
   unter der h3 des Blocks, eine h2 risse die Gliederung auf. Gleiche Optik,
   unterschiedliche Ebene — deshalb beide Namen statt eines festen. */
.artikel h2,.artikel h4{margin:0 0 .4rem;font:var(--display-weight-sm) 1.2rem/1.25 var(--display)}
.artikel h2 a,.artikel h4 a{color:inherit;text-decoration:none}
.artikel h2 a:hover,.artikel h4 a:hover{text-decoration:underline}
.artikel p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:60ch}

@media (max-width:52rem){
  .artikel{grid-template-columns:minmax(0,1fr)}
}

/* Rubrikenleiste und Blätterung. Die Bauform ist `.chips` weiter oben — dort
   sind es Beschriftungen, hier Links, deshalb eine eigene Klasse statt einer
   Variante: Ein Link braucht Hover, Fokus und einen aktiven Zustand, ein
   Schildchen nicht. */
.rubriken{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.rubriken a{
  display:block;font:var(--display-weight-sm) .8125rem/1 var(--display);
  color:var(--muted);background:var(--card);border:1px solid var(--line);
  padding:.55rem .75rem;border-radius:2px;text-decoration:none;
}
.rubriken a:hover{color:var(--ink);border-color:var(--ink)}
.rubriken a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rubriken a[aria-current="true"]{color:var(--accent-text);border-color:var(--accent);background:var(--accent-on)}

.blaettern{display:flex;gap:.75rem;align-items:center;margin:2rem 0 0;
  padding-top:1.5rem;border-top:1px solid var(--line)}
.blaettern a{font:var(--display-weight-sm) .875rem/1 var(--display);color:var(--ink);
  text-decoration:none;border:1px solid var(--line);padding:.6rem .9rem;border-radius:2px}
.blaettern a:hover{border-color:var(--ink)}
.blaettern span{font:400 .8125rem/1.4 var(--util);color:var(--muted);margin-inline:auto}

/* Der Link von der Startseite in die Übersicht. (Entwurf 02 hatte dafür ein
   `.more`; das war eine der 13 toten Regeln, die beim Umzug fielen. Hier
   entsteht es neu, weil es jetzt wieder etwas zu verlinken gibt.) */
.mehr{margin:1.2rem 0 0}
.mehr a{font:var(--display-weight-sm) .9375rem/1 var(--display);color:var(--accent-text);text-decoration:none}
.mehr a:hover{text-decoration:underline}

/* Rich-Text-Felder liefern immer <p>…</p>. Wo die Klasse am Umschlag hängt
   statt am Absatz selbst — .lead, .hero__say — schlägt der letzte Absatz sonst
   einen zweiten Abstand auf. */
.lead>p,.hero__say>p{margin:0 0 1em}
.lead>p:last-child,.hero__say>p:last-child{margin-bottom:0}

.nachweise{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9rem}
.nachweise th,.nachweise td{text-align:left;padding:.5rem .75rem .5rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.nachweise th{font:700 .75rem/1.3 var(--util);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--ink)}
/* Auf schmalen Geräten darf die Tabelle scrollen — die Seite selbst nicht. */
.nachweis-rahmen{overflow-x:auto}


/* ── Terminbuchung ────────────────────────────────────────────────────
   Kalender, Formular, Bestätigung. Die Slots sind eine umbrechende Reihe
   und kein Wochenraster: Sieben Spalten fallen bei 390 px durch die
   Überlaufprüfung. Die Bauform gibt es schon — `.chips` weiter oben
   macht dasselbe. */

.termin__zone{margin:0 0 1.5rem}

/* Die Terminlisten stehen in `.prosa`, und die rückt Listen um 1.3rem ein —
   richtig für Fließtext, falsch hier: Die Tage sollen mit der Überschrift
   fluchten, nicht daneben. Deshalb beides ausdrücklich zurücksetzen, sonst
   addieren sich zwei Einzüge. */
/* `.prosa .tage` und nicht `.tage`: Die Regel weiter oben heißt `.prosa ol`
   und ist damit spezifischer als eine einzelne Klasse. Ohne den Vorfahren im
   Selektor gewinnt sie, und der Einzug bleibt stehen. */
.prosa .tage,.prosa .tag__zeiten{list-style:none;margin:0;padding:0}
.tag{padding:0 0 1.4rem}
.tag__name{
  margin:0 0 .6rem;font:var(--display-weight-sm) 1rem/1.25 var(--display);
  letter-spacing:calc(-.02em * var(--display-track-scale));
}
.tag__zeiten{display:flex;flex-wrap:wrap;gap:.4rem}

/* Frei und belegt unterscheiden sich nicht allein über die Farbe: Der belegte
   Slot trägt zusätzlich den durchgestrichenen Text und das Wort „belegt".
   Nur-Farbe verstieße gegen WCAG 1.4.1. */
.slot{
  display:inline-flex;flex-direction:column;gap:.15rem;align-items:center;
  min-width:4.75rem;padding:.6rem .7rem;border-radius:2px;
  font:var(--display-weight-sm) .9375rem/1 var(--display);
  text-decoration:none;
  border:2px solid var(--accent);background:var(--card);color:var(--accent-text);
}
a.slot:hover{background:var(--accent);color:var(--accent-on)}
.slot--weg{
  border-color:var(--line);border-style:dashed;background:transparent;
  color:var(--muted);text-decoration:line-through;
}
.slot__lage{
  font:400 .625rem/1 var(--util);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;
}

.termin__blaettern{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.5rem 0 0;
  padding-top:1.2rem;border-top:1px solid var(--line)}
.termin__blaettern a{font:var(--display-weight-sm) .875rem/1 var(--display)}

.termin__gewaehlt{
  margin:0 0 1.8rem;padding:1rem 1.2rem;
  background:var(--card);border-left:4px solid var(--accent);
}
.termin__gewaehlt strong{font-size:1.05em}

.termin__leer,.termin__notnagel{margin:2rem 0 0;padding-top:1.5rem;border-top:2px solid var(--ink)}
.termin__notnagel h2{margin:0 0 .5rem;font:var(--display-weight-sm) 1.05rem/1.25 var(--display)}
.termin__link{word-break:break-all;font:400 .8125rem/1.5 var(--util)}

/* ── Formular ───────────────────────────────────────────────────────── */

.termin__form{margin:0 0 2rem;max-width:34rem}
.feld{margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.feld label{font:var(--display-weight-sm) .875rem/1.3 var(--display)}
.feld__pflicht{color:var(--accent-text)}
.feld input,.feld textarea{
  font:inherit;font-size:1rem;padding:.7rem .8rem;
  border:2px solid var(--line);border-radius:2px;
  background:var(--card);color:var(--ink);width:100%;
}
.feld input:focus,.feld textarea:focus{
  border-color:var(--accent);outline:2.5px solid var(--ink);outline-offset:2px;
}
.feld__hilfe{font:400 .8125rem/1.45 var(--util);color:var(--muted)}
.feld__meldung{font:400 .8125rem/1.45 var(--util);color:#8c2f0d}
.feld--fehler input,.feld--fehler textarea{border-color:#8c2f0d}

.termin__fehler{
  margin:0 0 1.8rem;padding:1rem 1.2rem;
  background:#fdeee0;border-left:4px solid #8c2f0d;
}
.termin__fehler h2{margin:0 0 .4rem;font:var(--display-weight-sm) 1rem/1.25 var(--display)}
.termin__fehler ul{margin:0;padding-left:1.2rem}
.termin__fehler a{color:#8c2f0d}

.termin__hinweis{margin:0 0 1.5rem;font-size:.9rem;color:var(--ink-soft)}
.termin__hinweis p{margin:0 0 .5rem}

/* Honigtopf: für Menschen unsichtbar, für Screenreader und Bots vorhanden.
   Ausdrücklich **kein** `display:none` (brauchbare Bots überspringen das) und
   **kein** `aria-hidden` am Umschlag — axe-Regel `aria-hidden-focus` wäre ein
   Verstoß vom Schweregrad `serious`. Also visuell wegschieben. */
.honig{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

.termin .cta{align-items:center}
.termin form .cta{margin:0}