/* ============================================================================
   qds.ch — Stylesheet
   ----------------------------------------------------------------------------
   Eine Schrift (Inter), keine Zierschrift, keine Schmuckfarbe. Schwarz, Weiss
   und Grau wie das Signet. Farbe traegt hier keine Bedeutung, sondern Kontrast
   und Groesse tun es.
   Lesbarkeit als Vorgabe: Fliesstext 17px, Nebentext nie unter 13px, jede
   Beschriftung mindestens 11.5px. Kein Text unter 4.5:1 Kontrast.
   Kein Build, keine Fremdbibliothek.
   ========================================================================== */

:root{
  --bg:#0A0A0C;
  --bg-2:#0F0F12;
  --flaeche:#141418;
  --flaeche-2:#1C1C21;
  /* Feine Lichtkante auf der Oberkante jeder Flaeche: gibt Tiefe, ohne dass
     ein Schatten auf schwarzem Grund gebaut werden muesste. */
  --kante:inset 0 1px 0 rgba(255,255,255,.055);
  /* Auf #0A0A0C rendern .11 und .2 als Grauwert 37 und 59, also 1.3:1 und
     1.9:1 gegen den Grund. Auf einem dunkleren oder flauer eingestellten
     Bildschirm verschwinden sie ganz. Angehoben auf 59 und 93, damit --linie-2
     die 3:1-Schwelle fuer grafische Elemente erreicht. */
  --linie:rgba(255,255,255,.2);
  --linie-2:rgba(255,255,255,.34);

  /* Kontrast auf --bg: txt 18.7:1, txt-2 9.8:1, txt-3 5.6:1 */
  --txt:#F7F7F8;
  --txt-2:#BCBDC2;
  --txt-3:#8B8C93;

  /* Breite und Seitenpolster wie ilearnweb (dort --mw:1480px,
     --gutter:clamp(22px,4vw,64px)), damit beide Seiten gleich weit laufen. */
  --mw:1480px;
  --gutter:clamp(22px,4vw,64px);
  --nav-h:76px;
  --r:14px;
  --r-gross:20px;
  --ease:cubic-bezier(.22,.7,.18,1);

  /* Untergrenze 34 statt 40: bei 320 und 349px Fensterbreite stand im
     Seitentitel sonst das Wort "und" allein auf einer Zeile. Mit 36px war
     es bei 349px behoben, bei 320px nicht. */
  --t-seite:clamp(34px,5.1vw,82px);
  --t-kapitel:clamp(30px,3.2vw,50px);
  --t-tafel:clamp(21px,1.9vw,27px);
  --t-karte:clamp(19px,1.5vw,23px);

  --sans:'Instrument Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Akzent. Traegt jede aktive Stelle: Kennzeichnung, Kapitelnummer,
     Fortschritt, Hauptknopf, gewaehlter Weg im Diagramm, Fokus im Formular.
     Alles andere bleibt schwarz, weiss und grau. */
  --akz:#BC000E;
  --akz-tief:#8E000A;
  --akz-fuss:#FFFFFF;
  --akz-06:rgba(188,0,14,.10);
  --akz-12:rgba(188,0,14,.18);
  --akz-40:rgba(188,0,14,.55);
  --akz-70:rgba(188,0,14,.85);
  /* Dasselbe Rot (gleicher Farbton, 355.5 Grad), nur aufgehellt. Nur dort, wo
     der Akzent Text oder Fokusrahmen ist: #BC000E kommt auf --bg nur auf
     2.96:1, diese Aufhellung auf 4.8:1. Flaechen und Linien bleiben --akz. */
  --akz-hell:#F42030;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{width:0;height:0;display:none}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menuOffen{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg,canvas{display:block;max-width:100%}
::selection{background:rgba(255,255,255,.22);color:#fff}
:focus-visible{outline:2px solid var(--akz-hell);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--mw);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;padding:14px 18px;background:#fff;color:#0A0A0B;
  font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ===== Schrift =============================================================== */
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:600;line-height:1.06;overflow-wrap:break-word}
h1{font-size:var(--t-seite);letter-spacing:-.038em;line-height:1.03}
h2{font-size:var(--t-kapitel);letter-spacing:-.032em;line-height:1.06}
h3{font-size:var(--t-tafel);letter-spacing:-.022em;line-height:1.22}
h4{font-size:var(--t-karte);letter-spacing:-.02em;line-height:1.28}
p{margin:0}
.lead{font-size:clamp(18px,1.3vw,21px);line-height:1.62;color:var(--txt-2)}
.copy{font-size:16.5px;line-height:1.68;color:var(--txt-2)}
.copy+.copy{margin-top:16px}
/* Beschriftungen: Versalien, aber nie kleiner als 11.5px und nie unter --txt-3. */
.marke{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--akz-hell)}
.marke.matt{color:var(--txt-3)}
.zahl{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* ===== Kopfzeile ============================================================= */
.kopf{position:fixed;inset:0 0 auto;z-index:900;height:var(--nav-h);
  background:rgba(10,10,11,.78);backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.kopf.tief{border-bottom-color:var(--linie);background:rgba(10,10,11,.94)}
.kopfInner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:40px;width:auto;filter:invert(1)}
/* Zweistufige Kopfzeile: vier Gruppen, darunter die Ziele mit einer Zeile
   Erklaerung. Acht einzelne Links nebeneinander wurden zu eng, sobald der Blog
   dazukam, und sie sagten nichts darueber, was einen am Ziel erwartet.
   Aufbau und Verhalten wie in ilearnweb und intelligenz-pro-watt. */
.navi{display:flex;align-items:center}
.naviGruppen{display:flex;align-items:center;gap:2px}
.naviGruppe{position:relative}
.naviKnopf{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:8px;
  font-size:14.5px;font-weight:500;color:var(--txt-2);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.naviKnopf:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.naviGruppe.offen .naviKnopf,.naviGruppe.hier .naviKnopf{background:rgba(255,255,255,.08);color:var(--txt)}
.naviPfeil{width:14px;height:14px;flex:none;transition:transform .25s var(--ease)}
.naviGruppe.offen .naviPfeil{transform:rotate(180deg)}
.naviMenu{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;z-index:20;
  display:grid;gap:2px;width:max-content;min-width:270px;max-width:350px;padding:8px;
  border-radius:16px;background:var(--flaeche);border:1px solid var(--linie);
  box-shadow:0 30px 60px -30px #000,var(--kante);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease)}
.naviGruppe.offen .naviMenu{opacity:1;visibility:visible;transform:none}
/* Die letzte Gruppe liefe mittig zentriert rechts aus der Leiste hinaus. */
.naviGruppe:last-of-type .naviMenu{left:auto;right:0;translate:none}
.naviMenu a{display:block;padding:10px 12px;border-radius:10px;color:var(--txt-2);
  transition:background .2s var(--ease)}
.naviMenu a b{display:block;font-size:14.5px;font-weight:600;color:var(--txt);line-height:1.3}
.naviMenu a span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--txt-3)}
.naviMenu a:hover{background:rgba(255,255,255,.06)}
.naviMenu a.hier{background:var(--akz-06)}
.naviMenu a.hier b{color:var(--akz-hell)}
.naviLabel{display:none}
.kopfAktion{display:flex;align-items:center;gap:10px}
.knopfMini{padding:9px 18px;border-radius:8px;background:var(--akz);color:var(--akz-fuss);font-size:14.5px;
  font-weight:600;transition:background .2s var(--ease)}
.knopfMini:hover{background:var(--akz-tief)}
/* Menuetaste: Form, Masse und Klapp-Bewegung wie in ilearnweb (.navToggle),
   nur die Farben kommen aus dem dunklen Satz statt aus --bg-soft. */
.menuTaste{display:none;flex:none;width:46px;height:46px;border-radius:999px;border:1px solid var(--linie);
  background:rgba(255,255,255,.06);flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.menuTaste:hover{border-color:var(--linie-2);background:rgba(255,255,255,.1)}
.menuTaste span{display:block;width:18px;height:2px;background:var(--txt);border-radius:2px;
  transition:transform .28s var(--ease),opacity .18s var(--ease)}
.menuTaste.offen span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuTaste.offen span:nth-child(2){opacity:0}
.menuTaste.offen span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.balken{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--akz)}
.naviCta{display:none}
/* Auf dem Telefon nimmt die Kopfzeile wie in ilearnweb weniger Platz. */
@media(max-width:640px){
  .kopfInner{gap:14px}
  .menuTaste{width:40px;height:40px;gap:4.5px}
  .menuTaste span{width:16px}
  .menuTaste.offen span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menuTaste.offen span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
/* Menuetafel wie in ilearnweb: absolut an der Unterkante der Kopfzeile, auf
   volle Resthoehe des Fensters, nicht nur so hoch wie ihr Inhalt.
   Absolut statt fest, weil .kopf ein backdrop-filter hat und damit selbst der
   Bezugsrahmen fuer feste Kinder waere.
   Umschaltpunkt 860px. Seit die Leiste vier Gruppen statt acht Einzellinks
   traegt, ist sie schmaler: gemessen 452px, mit Signet, Knopf und den beiden
   24px-Fugen 685px. Mit zweimal 4vw Seitenpolster passt sie ab rund 745px
   (685 / 0.92). 860px laesst Luft fuer laengere Gruppennamen in einer
   spaeteren Fassung. Vorher lag der Punkt bei 1040px, das war fuer die alte,
   breite Leiste gerechnet. */
@media(max-width:860px){
  .menuTaste{display:flex}
  /* absolut statt fest: .kopf hat backdrop-filter und waere sonst selbst der
     Bezugsrahmen fuer feste Kinder. */
  .naviGruppen{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:0;
    padding:24px var(--gutter) 30px;background:var(--bg);
    height:calc(100vh - var(--nav-h));height:calc(100dvh - var(--nav-h));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease)}
  .naviGruppen:not(.offen){pointer-events:none}
  .naviGruppen.offen{opacity:1;visibility:visible;transform:none}
  /* Im Ausklappmenue wird nicht geklappt: die Gruppe ist nur noch eine
     Zwischenueberschrift, ihre Punkte stehen offen darunter. Das spart je
     Sprung einen Tipp. */
  .naviGruppe{position:static;display:block}
  .naviGruppe+.naviGruppe{margin-top:18px}
  .naviKnopf{display:none}
  .naviLabel{display:block;padding:0 14px 4px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--txt-3)}
  /* visibility:inherit statt visible, sonst waere ein Punkt auch bei
     geschlossenem Menue anklickbar. */
  .naviMenu{position:static;translate:none;width:auto;min-width:0;max-width:none;padding:0;
    border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:inherit;
    transform:none;transition:none}
  .naviMenu a{padding:12px 14px;border-radius:12px}
  .naviMenu a b{font-size:16px}
  /* Die Erklaerungen bleiben dem Rechner vorbehalten, sonst wird das Menue
     hoeher als der Bildschirm. */
  .naviMenu a span{display:none}
  .naviCta{display:block;margin-top:22px;padding:16px 12px;border-radius:14px;background:var(--akz);
    color:var(--akz-fuss);font-weight:600;text-align:center}
  .kopfAktion .knopfMini{display:none}
  body.menuOffen{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.naviGruppen,.naviMenu,.menuTaste span{transition:none}}

/* ===== Schaltflaechen ======================================================== */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 24px;border-radius:10px;
  font-size:15.5px;font-weight:600;border:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.knopf svg{width:16px;height:16px;flex:none}
.knopf.hell{background:var(--akz);color:var(--akz-fuss)}
.knopf.hell:hover{background:var(--akz-tief)}
.knopf.rand{border-color:var(--linie-2);color:var(--txt)}
.knopf.rand:hover{border-color:var(--akz-hell);color:var(--akz-hell);background:var(--akz-06)}

/* ===== Kapitel =============================================================== */
/* Nach einem Sprung soll die Kapitelzeile nicht an der Kopfzeile kleben:
   22px reichten dafuer nicht, jetzt 52px unter deren Unterkante. */
main section[id]{scroll-margin-top:calc(var(--nav-h) + 52px)}
/* Das erste Kapitel traegt als einziges noch das obere Polster der Sektion,
   .kap+.kap setzt es bei allen folgenden auf 0. Ohne diesen Ausgleich landete
   es nach dem Sprung 160px unter der Kopfzeile statt 52px wie die anderen. */
.held + .kap{scroll-margin-top:calc(var(--nav-h) + 52px - clamp(72px,7.5vw,128px))}
.kap{padding:clamp(72px,7.5vw,128px) 0}
.kap+.kap{padding-top:0}
.kapRegel{display:flex;align-items:center;gap:18px;padding-bottom:clamp(14px,1.4vw,20px)}
.kapRegel .nr{font-size:11.5px;font-weight:600;letter-spacing:.13em;color:var(--akz-hell);font-variant-numeric:tabular-nums}
.kapRegel .name{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);
  white-space:nowrap}
/* Kapitelkopf: Titel, direkt darunter der Untertitel. Eine Spalte auf allen
   Breiten, der Untertitel steht nie neben dem Titel. Halbfett wie die
   Ueberschriften, damit er als zweite Zeile des Titels liest und nicht als
   Fliesstext. */
.kapKopf{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;
  align-items:start;padding-bottom:clamp(28px,3.1vw,50px)}
.kapKopf h2{max-width:18ch}
.kapKopf .lead{max-width:54ch;font-weight:600}

/* ===== Einblenden ============================================================ */
.auf{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.auf.da{opacity:1;transform:none}

/* ===== Hero ==================================================================
   Voller Bildschirm, Inhalt unten am Raster ausgerichtet. Hinter dem Text ein
   Stroemungsfeld in Grautoenen, darueber ein feines Raster. Kein Farbschleier:
   der Text steht auf schwarzem Grund, nicht auf einem Verlauf. */
/* Der Inhalt muss auf 900px Fensterhoehe vollstaendig ins Bild passen, sonst
   ist die Kennzahlenreihe angeschnitten. Deshalb weniger Polsterung oben und
   ein Titel, der bei 1440px auf drei statt vier Zeilen laeuft. */
/* Der Inhalt steht mittig, nicht am unteren Rand: bei 963x944 fielen sonst
   401px Leerraum oben an und nur 29px unten, bei 820x1180 sogar 561px. Gleiche
   Ausrichtung wie in ilearnweb (.hero, align-content:center). */
.held{position:relative;z-index:0;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(28px,3vw,44px)}
.heldFeld{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.heldRaster{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse 76% 60% at 44% 46%,#000 10%,transparent 74%);
  mask-image:radial-gradient(ellipse 76% 60% at 44% 46%,#000 10%,transparent 74%)}
/* Ein dunkler Schleier direkt hinter der Textspalte: das Feld darf nie durch
   eine Buchstabenzeile laufen. */
.heldSchleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,12,.96) 0%,rgba(10,10,12,.9) 38%,rgba(10,10,12,.34) 62%,rgba(10,10,12,0) 82%)}
/* Auf schmalen Geraeten fuellt der Text die ganze Breite, ein schraeger
   Verlauf laesst das Feld dann hinter den Buchstaben durchlaufen. */
/* Der Schleier lag bei 94 bis 62 Prozent Deckkraft und das Feld zusaetzlich
   auf 0.7. Zusammen war die Bewegung technisch da, aber nicht zu sehen.
   Ein senkrechter Verlauf gab danach nach unten frei, dort sitzen aber die
   Kennzahlen und der Blick faengt oben an. Jetzt diagonal wie auf dem
   Rechner: offen in der oberen rechten Ecke, dicht ab der Fliesstextzeile. */
@media(max-width:820px){
  .heldSchleier{background:linear-gradient(202deg,rgba(10,10,12,.06) 0%,rgba(10,10,12,.3) 16%,rgba(10,10,12,.72) 34%,rgba(10,10,12,.9) 56%,rgba(10,10,12,.86) 100%)}
}
.heldInner{position:relative;z-index:2;width:100%}
.held h1{max-width:25ch;margin-top:20px}
.heldLead{margin-top:clamp(20px,2vw,28px);max-width:48ch}
.heldAktion{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,3vw,40px)}
@media(max-width:520px){.heldAktion{flex-direction:column;align-items:stretch}.heldAktion .knopf{width:100%}}
.heldWerte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(38px,4vw,60px);padding-top:clamp(20px,2vw,26px);border-top:1px solid var(--linie)}
@media(max-width:820px){.heldWerte{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(20px,4vw,34px)}}
.heldWert b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--txt)}
.heldWert span{display:block;margin-top:9px;font-size:14px;line-height:1.55;color:var(--txt-3);max-width:26ch}

/* ===== Leistungen ============================================================
   Ein Raster aus Linien statt Karten mit Abstand: die Kanten treffen sich
   exakt, es gibt keine ungleichen Zwischenraeume. */
.lsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--kante)}
@media(max-width:860px){.lsGrid{grid-template-columns:1fr}}
.ls{position:relative;background:var(--flaeche);padding:clamp(28px,2.6vw,40px);display:flex;flex-direction:column;
  transition:background .3s var(--ease)}
.ls:hover{background:var(--flaeche-2)}
/* Nummer bleibt grau, der Name der Leistung traegt den Akzent. */
.lsKopf{margin-bottom:28px;display:grid;justify-items:start;gap:6px}
/* Die Zeichnung ist ueber das Seitenverhaeltnis des viewBox rund 197px breit.
   Lief das SVG ueber die ganze Kartenbreite, sass sie mittig darin. Mit
   automatischer Breite ist der Rahmen so breit wie die Zeichnung und steht
   links an der Textkante. */
.lsFig{align-self:flex-start;width:auto;height:118px;margin-bottom:28px}
.ls h3{margin-bottom:14px}
.ls .copy{max-width:42ch}
.lsMarken{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:28px}
.lsMarken span{padding:6px 11px;border-radius:6px;border:1px solid var(--linie);font-size:12px;font-weight:500;
  color:var(--txt-3)}

/* Figur 1: Knoten verbinden sich mit der Mitte. */
.fig1 line{stroke:rgba(255,255,255,.16);stroke-width:1}
.fig1 .kante{stroke:var(--akz);stroke-width:1.4;stroke-dasharray:90;stroke-dashoffset:90}
.ls.da .fig1 .kante{animation:kanteZieh 4s var(--ease) infinite}
.ls.da .fig1 .kante:nth-of-type(2){animation-delay:.3s}
.ls.da .fig1 .kante:nth-of-type(3){animation-delay:.6s}
.ls.da .fig1 .kante:nth-of-type(4){animation-delay:.9s}
@keyframes kanteZieh{0%{stroke-dashoffset:90}38%,74%{stroke-dashoffset:0}100%{stroke-dashoffset:90}}
.fig1 circle{fill:var(--flaeche-2);stroke:rgba(255,255,255,.28);stroke-width:1}
.fig1 circle.kern{fill:var(--akz);stroke:none}

/* Figur 2: vier Spuren, eine ist gewaehlt. */
.fig2 rect.spur{fill:rgba(255,255,255,.07)}
.fig2 rect.aktiv{fill:var(--akz)}
.ls.da .fig2 rect.aktiv{animation:spurWechsel 5.2s steps(1,end) infinite}
@keyframes spurWechsel{0%,24%{transform:translateY(0)}25%,49%{transform:translateY(28px)}
  50%,74%{transform:translateY(56px)}75%,100%{transform:translateY(84px)}}
.fig2 .puls{fill:var(--txt-3)}
.ls.da .fig2 .puls{animation:pulsLauf 2.4s linear infinite}
@keyframes pulsLauf{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}
  100%{transform:translateX(144px);opacity:0}}

/* Figur 3: Schichten, die sich zu einem Modell stapeln. */
.fig3 path{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2);stroke-width:1}
.fig3 path.oben{fill:var(--akz-12);stroke:var(--akz)}
.ls.da .fig3 path{animation:schichtHeben 4.4s var(--ease) infinite}
.ls.da .fig3 path:nth-of-type(2){animation-delay:.14s}
.ls.da .fig3 path:nth-of-type(3){animation-delay:.28s}
@keyframes schichtHeben{0%,100%{transform:translateY(0)}46%,66%{transform:translateY(-6px)}}

/* Figur 4: eine Prueflinie laeuft durch, die Haken setzen sich. */
.fig4 rect{fill:rgba(255,255,255,.06)}
.fig4 .haken{fill:none;stroke:var(--akz);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26}
.ls.da .fig4 .haken{animation:hakenZieh 4.4s var(--ease) infinite}
.ls.da .fig4 .haken:nth-of-type(2){animation-delay:.45s}
.ls.da .fig4 .haken:nth-of-type(3){animation-delay:.9s}
@keyframes hakenZieh{0%,10%{stroke-dashoffset:26}32%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:26}}
.fig4 .scan{stroke:var(--akz-70);stroke-width:1}
.ls.da .fig4 .scan{animation:scanLauf 4.4s linear infinite}
@keyframes scanLauf{from{transform:translateY(0)}to{transform:translateY(112px)}}

/* ===== Modell-Routing ========================================================
   Der Weg ist HTML, nicht SVG: In der SVG-Fassung standen die Beschriftungen
   auf festen Koordinaten und liefen bei langen Namen ("Claude · GPT · Gemini")
   aus dem Kasten und am Panelrand ab. Als Rasterzellen wachsen die Kaesten mit
   ihrem Inhalt und brechen auf schmalen Geraeten um. */
.rt{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--kante)}
@media(max-width:980px){.rt{grid-template-columns:1fr}}
.rtListe{background:var(--flaeche);display:flex;flex-direction:column}
.rtTaste{position:relative;flex:1;display:grid;gap:7px;align-content:center;text-align:left;
  padding:22px clamp(22px,2vw,28px);border-bottom:1px solid var(--linie);transition:background .25s var(--ease)}
.rtTaste:last-child{border-bottom:0}
.rtTaste:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--akz);
  opacity:0;transition:opacity .25s var(--ease)}
.rtTaste:hover{background:var(--flaeche-2)}
.rtTaste.an{background:var(--flaeche-2)}
.rtTaste.an:before{opacity:1}
.rtTaste b{font-size:16.5px;font-weight:600;letter-spacing:-.015em;color:var(--txt-3);transition:color .25s var(--ease)}
.rtTaste.an b,.rtTaste:hover b{color:var(--txt)}
.rtTaste span{font-size:14px;line-height:1.5;color:var(--txt-3)}

.rtRechts{background:var(--flaeche);padding:clamp(24px,2.4vw,36px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(26px,2.6vw,38px)}
/* Drei Halte in einer Zeile. Die Spuren dazwischen sind eigene Rasterzellen mit
   fester Mindestbreite, dadurch bleibt der Abstand gleich, egal wie lang ein
   Modellname ist. */
.rtWeg{display:grid;grid-template-columns:minmax(0,.9fr) 40px minmax(0,.9fr) 80px minmax(0,1.35fr);
  align-items:stretch;gap:0}
/* Nicht auf die Hoehe der vier Ziele strecken: die beiden Halte standen sonst
   als hohe, fast leere Kaesten da. */
.rtHalt{align-self:center;display:grid;align-content:center;gap:5px;padding:18px;border-radius:14px;
  border:1px solid var(--linie);background:var(--bg-2);min-width:0}
.rtHalt .rtRolle{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.rtHalt b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--txt);overflow-wrap:break-word}
.rtHalt>span:last-child{font-size:13.5px;line-height:1.4;color:var(--txt-3);overflow-wrap:break-word}
/* Alle Linien der Grafik liegen in einem SVG mit shape-rendering:crispEdges.
   Grund: der Block sitzt auf gebrochenen Pixeln, weil die Spaltenbreiten aus fr
   und die Polster aus clamp()/vw kommen. Eine 1px-Kante aus HTML verteilt sich
   dort auf zwei Geraetezeilen, und weil jede Linie einen anderen Bruchteil
   erwischt, sieht jede anders aus. crispEdges rastet jede Kante aufs ganze
   Geraetepixel, damit sind alle Linien gleich und scharf. */
.rtNetz{position:absolute;inset:0;width:100%;height:100%;shape-rendering:crispEdges;pointer-events:none}
.rtNetz rect{fill:var(--linie-2)}

/* Verteiler: 80px breit. Die linke Haelfte ist die Strecke von Schritt 2 zur
   Schiene, die rechte sind die vier Stummel zu den Zielen. Die Mitten der vier
   Zeilen sind aus der eigenen Hoehe gerechnet, damit sie ohne Raster genau auf
   den Zielen daneben liegen (vier Zeilen, drei Luecken zu 8px).
   Alle Linien bleiben grau. Rot ist einzig das laufende Paket, sonst gaebe es
   zwei rote Zeichen fuer dieselbe Aussage. Der gewaehlte Stummel ist nur ueber
   die hellere Graustufe von den drei anderen unterschieden. */
.rtVerteiler{position:relative;align-self:stretch;
  --n:0;
  --y0:calc((100% - 24px) / 8);
  --y:calc(var(--n) * (2 * var(--y0) + 8px) + var(--y0))}
.rtVerteiler:has(.ast[data-z="2"].an){--n:1}
.rtVerteiler:has(.ast[data-z="3"].an){--n:2}
.rtVerteiler:has(.ast[data-z="4"].an){--n:3}
.rtVerteiler .rtEin{x:0;y:calc(50% - .5px);width:40px;height:1px}
.rtVerteiler .rtSenk{x:40px;y:calc(var(--y0) - .5px);width:1px;height:calc(6 * var(--y0) + 24px)}
/* width:100% laeuft rechts aus dem Rahmen und wird vom SVG beschnitten, das
   spart ein calc und trifft die Kante exakt. */
.rtVerteiler .ast{x:40px;width:100%;height:1px;fill:var(--linie)}
.rtVerteiler .ast.an{fill:var(--linie-2)}
.rtVerteiler .ast[data-z="1"]{y:calc(var(--y0) - .5px)}
.rtVerteiler .ast[data-z="2"]{y:calc(3 * var(--y0) + 7.5px)}
.rtVerteiler .ast[data-z="3"]{y:calc(5 * var(--y0) + 15.5px)}
.rtVerteiler .ast[data-z="4"]{y:calc(7 * var(--y0) + 23.5px)}
/* Ein einziges Paket laeuft den ganzen Weg: waagrecht bis zur Schiene, senkrecht
   auf die gewaehlte Spur, dann waagrecht ins Ziel. Die aeussere Huelle traegt
   die Laengsbewegung, der Punkt darin die Querbewegung. */
.rtPaket{position:absolute;left:0;top:0;bottom:0;width:0;animation:rtPaketLaengs 2.6s linear 1.3s infinite}
.rtPaket b{position:absolute;left:-3px;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--akz);animation:rtPaketQuer 2.6s var(--ease) 1.3s infinite}
@keyframes rtPaketLaengs{
  0%{transform:translateX(0);opacity:0}
  9%{opacity:1}
  38%{transform:translateX(40px)}
  56%{transform:translateX(40px)}
  91%{opacity:1}
  100%{transform:translateX(80px);opacity:0}}
@keyframes rtPaketQuer{0%,38%{top:50%}56%,100%{top:var(--y)}}
.rtZiele{display:grid;grid-template-rows:repeat(4,1fr);gap:8px;align-self:stretch}
.rtZiel{display:grid;align-content:center;gap:3px;padding:11px 14px;border-radius:11px;
  border:1px solid var(--linie);background:var(--bg-2);min-width:0;
  transition:border-color .3s var(--ease),background .3s var(--ease),opacity .3s var(--ease)}
.rtZiel b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--txt-3);overflow-wrap:break-word;
  transition:color .3s var(--ease)}
.rtZiel span{font-size:12px;line-height:1.35;color:var(--txt-3)}
.rtZiel:not(.an){opacity:.55}
.rtZiel.an{border-color:var(--akz-hell);background:var(--akz-06)}
.rtZiel.an b{color:var(--akz-hell)}
@media(max-width:720px){
  /* Untereinander gibt es keine Schiene mit vier Abzweigungen, die Ziele
     stehen ja bereits als Liste da. Vom Verteiler bleibt deshalb nur die
     Strecke von Schritt 2 zur Liste, senkrecht wie die Spur darueber, sonst
     endete die Kette nach dem Routing im Nichts. */
  .rtVerteiler{display:block;position:relative;align-self:auto;height:34px}
  .rtVerteiler .rtEin{x:calc(50% - .5px);y:0;width:1px;height:100%}
  .rtVerteiler .rtSenk,.rtVerteiler .ast{display:none}
  .rtPaket{left:0;right:0;top:0;bottom:0;width:auto;animation:none}
  .rtPaket b{left:calc(50% - 3px);top:0;margin-top:-3px;
    animation:rtLaufSenkrecht 2.6s var(--ease) 1.3s infinite}
  .rtZiele{grid-template-rows:none;gap:8px}
  /* Der Strich laeuft senkrecht und endet damit immer an der ersten Karte.
     Damit er auf das zeigt, was das Routing tatsaechlich gewaehlt hat,
     rueckt die gewaehlte Karte hier an die erste Stelle. */
  .rtZiel.an{order:-1}
}
/* Spur: Linie in der Mitte der Zelle, darauf ein wandernder Punkt. */
.rtSpur{position:relative;display:flex;align-items:center;justify-content:center;align-self:center;height:1px}
.rtSpur .rtBahn{x:0;y:0;width:100%;height:1px}
.rtSpur i{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--akz);
  animation:rtLauf 2.6s var(--ease) infinite}
@keyframes rtLauf{0%{left:-6px;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:100%;opacity:0}}
@media(max-width:720px){
  .rtWeg{grid-template-columns:1fr;gap:0}
  .rtSpur{height:34px}
  .rtSpur .rtBahn{x:calc(50% - .5px);y:0;width:1px;height:100%}
  .rtSpur i{left:50%;top:auto;margin-left:-3px;margin-top:0;animation-name:rtLaufSenkrecht}
  @keyframes rtLaufSenkrecht{0%{top:-6px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:100%;opacity:0}}
}
.rtInfo{padding-top:clamp(24px,2.4vw,32px);border-top:1px solid var(--linie);transition:opacity .18s var(--ease)}
.rtInfo.wechsel{opacity:0}
/* War ein h4 unter einem h2 und riss damit ein Loch in die Gliederung.
   Als h3 bleibt die Reihenfolge sauber, die Groesse bleibt die der Karte. */
.rtInfo h3{margin-bottom:12px;font-size:var(--t-karte);letter-spacing:-.02em;line-height:1.28}
.rtInfo p{font-size:16px;line-height:1.66;color:var(--txt-2);max-width:60ch}
.rtPunkte{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rtPunkte li{padding:7px 12px;border-radius:6px;border:1px solid var(--linie);font-size:12.5px;font-weight:500;
  color:var(--txt-3)}

/* ===== Prueflauf ============================================================= */
.pf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--kante)}
@media(max-width:980px){.pf{grid-template-columns:1fr}}
.pfKarte{background:var(--flaeche);padding:clamp(28px,2.6vw,36px);display:flex;flex-direction:column}
.pfKarte h3{margin:16px 0 0}
/* Bezeichnung und Wert stehen in einer Zeile beieinander, nicht an den beiden
   Raendern. Fett ist die Bezeichnung, der Wert laeuft normal weiter. */
.pfMeta{display:grid;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linie)}
.pfMeta div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13.5px;color:var(--txt-2)}
.pfMeta b{color:var(--txt);font-weight:600}
.pfNotiz{margin-top:auto;padding-top:28px;font-size:14.5px;line-height:1.65;color:var(--txt-3)}
.pfNotiz b{color:var(--txt-2);font-weight:600}
.pfListe{list-style:none;margin:0;padding:0;background:var(--flaeche)}
.pfZeile{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:18px;row-gap:5px;
  align-items:center;padding:21px clamp(22px,2vw,28px);border-bottom:1px solid var(--linie);
  transition:background .3s var(--ease)}
.pfZeile:last-child{border-bottom:0}
.pfZeile.laeuft,.pfZeile.fertig{background:var(--flaeche-2)}
.pfZeile i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);
  color:var(--txt-3);transition:background .3s var(--ease),color .3s var(--ease)}
.pfZeile i svg{width:16px;height:16px}
.pfZeile.laeuft i{background:var(--akz-12);color:var(--akz-hell)}
.pfZeile.fertig i{background:rgba(255,255,255,.12);color:#fff}
.pfZeile b{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--txt)}
.pfZeile span{display:block;font-size:14px;line-height:1.5;color:var(--txt-3)}
.pfStatus{padding:6px 11px;border-radius:6px;border:1px solid var(--linie);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.pfZeile.laeuft .pfStatus{border-color:var(--akz-40);color:var(--akz-hell)}
.pfZeile.fertig .pfStatus{border-color:rgba(255,255,255,.38);color:#fff}
.pfBalken{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--akz);transition:width .1s linear}
/* Der Balken ist die Fortschrittsanzeige des Laufs, nicht eine Markierung
   danach. Blieb er stehen, lag er auf der Trennlinie der Zeile und die
   erledigten Zeilen bekamen eine doppelt so helle Kante wie die uebrigen
   (Grauwert 137 gegen 67). Dass eine Zeile durch ist, sagen Abzeichen und
   Flaeche bereits. Ueber opacity, weil die Breite inline vom Lauf kommt. */
.pfZeile.fertig .pfBalken{opacity:0;transition:opacity .4s var(--ease)}
/* Auf dem Telefon war das Symbol 34px hoch, die Titelzeile daneben 20px.
   Beide stehen jetzt auf derselben Hoehe, das Zeichen darin bleibt im
   Verhaeltnis. */
@media(max-width:600px){.pfZeile{grid-template-columns:20px minmax(0,1fr);column-gap:12px}
  .pfZeile i{width:20px;height:20px;border-radius:6px;align-self:start}
  .pfZeile i svg{width:12px;height:12px}
  .pfStatus{grid-column:2;justify-self:start;margin-top:7px}}

/* ===== Datenhoheit ===========================================================
   Auch dieses Bild ist HTML, nicht SVG. Als SVG schrumpfte es auf dem Telefon
   mitsamt seinen Beschriftungen auf etwa 5px mit. Als Rasterzellen behalten
   Text und Abstaende ihre Groesse und stapeln sich unter 780px. */
.dh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,56px);align-items:stretch}
@media(max-width:980px){.dh{grid-template-columns:1fr}}
/* Die Karte laeuft auf die Hoehe der Textspalte daneben. Der Zuwachs geht an
   das Feld, die Legende bleibt unten am Fuss der Karte. */
.dhBuehne{padding:clamp(22px,2.2vw,32px);border-radius:var(--r-gross);background:var(--flaeche);
  border:1px solid var(--linie);box-shadow:var(--kante);display:flex;flex-direction:column}
.dhFeld{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.62fr);gap:clamp(14px,1.6vw,22px);
  align-items:center}
@media(max-width:780px){.dhFeld{grid-template-columns:1fr;gap:14px}}
.dhLand{position:relative;display:grid;gap:8px;padding:26px 18px 18px;border-radius:14px;
  border:1px dashed var(--akz-70);background:var(--akz-06)}
.dhLandMarke{position:absolute;top:-9px;left:16px;padding:2px 9px;border-radius:4px;background:var(--flaeche);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--akz-hell)}
.dhZeile{display:grid;gap:3px;padding:12px 14px;border-radius:10px;background:var(--bg-2);
  border:1px solid var(--linie)}
.dhZeile b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--txt)}
.dhZeile span{font-size:12.5px;line-height:1.4;color:var(--txt-3)}
/* Zwei Gleise zwischen Land und Ausland. Auf dem oberen laeuft ein Paket
   durch, auf dem unteren bis zur Sperre und wieder zurueck. */
.dhBruecke{display:grid;gap:26px;justify-items:stretch;min-width:96px}
.dhGleis{display:grid;gap:8px;justify-items:center}
.dhSchiene{position:relative;display:block;width:100%;height:1px;background:var(--linie-2)}
.dhGleis.stopp .dhSchiene{background:repeating-linear-gradient(90deg,var(--linie-2) 0 4px,transparent 4px 8px)}
.dhSchiene i{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--akz)}
.dhGleis.frei .dhSchiene i{animation:dhDurch 3.2s var(--ease) infinite}
.dhGleis.stopp .dhSchiene i{background:#8B8C93;animation:dhZurueck 2.6s var(--ease) infinite}
.dhSchiene em{position:absolute;right:-1px;top:50%;width:12px;height:12px;margin-top:-6px}
.dhSchiene em:before,.dhSchiene em:after{content:"";position:absolute;left:0;top:5px;width:12px;height:1.5px;
  background:#8B8C93;border-radius:2px}
.dhSchiene em:before{transform:rotate(45deg)}
.dhSchiene em:after{transform:rotate(-45deg)}
@keyframes dhDurch{0%{left:-6px;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:100%;opacity:0}}
@keyframes dhZurueck{0%{left:-6px;opacity:0}12%{opacity:1}46%{left:58%;opacity:1}
  56%{left:58%;opacity:1}92%{left:-6px;opacity:1}100%{left:-6px;opacity:0}}
.dhWort{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
  text-align:center;color:var(--txt-3)}
.dhGleis.frei .dhWort{color:var(--akz-hell)}
/* Nebeneinander blieben von den Gleisen zwei Stummel von je 142px, die
   Beschriftungen brachen um und das Sperrkreuz sass am Rand. Untereinander
   hat jedes Gleis die volle Breite und die Aussage bleibt lesbar: eines
   laeuft durch, das andere endet an der Sperre. */
@media(max-width:780px){
  .dhBruecke{grid-template-columns:1fr;gap:22px}
}
.dhAussen{display:grid;gap:4px;padding:16px 16px;border-radius:12px;border:1px dashed var(--linie-2);
  background:transparent}
.dhAussen b{font-size:14.5px;font-weight:600;color:var(--txt-3)}
.dhAussen span{font-size:12.5px;line-height:1.4;color:var(--txt-3)}
.dhLegende{display:grid;gap:11px;margin-top:24px;padding-top:22px;border-top:1px solid var(--linie)}
.dhLegende span{display:grid;grid-template-columns:11px minmax(0,1fr);gap:13px;align-items:start;
  font-size:14px;line-height:1.55;color:var(--txt-3)}
.dhLegende i{width:11px;height:11px;border-radius:50%;margin-top:4px}
.dhLegende i.frei{background:var(--akz)}
.dhLegende i.stopp{background:#6C6D74}
.dhListe{list-style:none;margin:28px 0 0;padding:0}
.dhListe li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:17px 0;
  border-top:1px solid var(--linie);font-size:16px;line-height:1.55;color:var(--txt-2)}
.dhListe li b{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--akz-hell);
  white-space:nowrap}

/* ===== Referenz ============================================================== */
/* Beide Projektblöcke teilen sich eine Geometrie. Sonst beginnt der Text des
   einen 98px weiter rechts als der des anderen, und die Kapitelseite wirkt
   schief. Gemessen an der Textspalte: beide beginnen bei 646px auf 1440. */
.ref,.pw{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(26px,3.4vw,64px);align-items:center;padding:clamp(28px,3vw,56px);
  border-radius:var(--r-gross);background:var(--flaeche);
  border:1px solid var(--linie);box-shadow:var(--kante)}
@media(max-width:980px){.ref,.pw{grid-template-columns:1fr}}
.refRing{position:relative}
.refRing svg{width:100%;height:auto;aspect-ratio:1/1}
.refKern circle{fill:var(--bg);stroke:var(--akz-40);stroke-width:1.2}
.refKern text{fill:var(--txt);font-family:'Instrument Sans',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600}
.refSpeiche{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:150;stroke-dashoffset:150}
.refRing.da .refSpeiche{animation:speicheZieh .7s var(--ease) forwards;animation-delay:calc(.15s + var(--i,0)*24ms)}
@keyframes speicheZieh{to{stroke-dashoffset:0}}
/* Gefuellte Punkte statt Umrisse: als Ring auf schwarzem Grund waren die
   beiden grauen Gruppen praktisch unsichtbar. Der dunkle Rand trennt den Punkt
   von der Speiche darunter. */
.refPunkt{stroke:var(--flaeche);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.refRing.da .refPunkt{animation:punktAuf .45s var(--ease) forwards;animation-delay:calc(.34s + var(--i,0)*24ms)}
@keyframes punktAuf{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.refBogen{fill:none;stroke-width:3;stroke-linecap:round;opacity:.9}
.refPulsring{fill:none;stroke:var(--akz-40);stroke-width:1;transform-box:fill-box;transform-origin:center}
.refRing.da .refPulsring{animation:kernPuls 3.6s var(--ease) infinite}
@keyframes kernPuls{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.46);opacity:0}}
.refLegende{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;justify-content:center}
.refLegende span{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:6px;
  border:1px solid var(--linie);font-size:12px;font-weight:500;color:var(--txt-3)}
.refLegende i{width:7px;height:7px;border-radius:50%}
.refText h3{margin:16px 0 16px}
.refAktion{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* ===== Zweites Projekt: Intelligenz pro Watt =================================
   Oben eine Tafel: links die gezeichnete Weltkugel, rechts wenig Text und die
   zwei Wege. Darunter ueber die volle Breite die Bruecke der drei Ebenen, im
   Fugenraster der Startseite. Der Text ist bewusst kurz: die Sektion soll
   neugierig machen und nicht erklaeren. */
.pw{margin-top:clamp(28px,3vw,44px)}
/* Der Globus kommt von ipw.qds.ch (globe.js, world.js) und zeichnet sich
   selbst in die Flaeche. Er laesst sich mit dem Zeiger drehen. */
/* Der Globus füllt seine Spalte wie der Ring im Block darüber. */
#pwGlobus{width:100%;aspect-ratio:1/1;display:block;cursor:grab;touch-action:pan-y}
#pwGlobus:active{cursor:grabbing}
/* Keine eigene Textbreite: der Block darüber hat auch keine, sonst laufen die
   Absätze der beiden Projekte verschieden weit. */
.pwText h3{margin:14px 0 16px}
.pwText .refAktion{margin-top:30px}
/* ===== Unternehmen =========================================================== */
.un{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(26px,3.4vw,64px);align-items:start}
@media(max-width:900px){.un{grid-template-columns:1fr}}
.unSatz{list-style:none;margin:22px 0 0;padding:0}
.unSatz li{padding:22px 0;border-top:1px solid var(--linie);font-size:16px;line-height:1.66;color:var(--txt-2)}
.unSatz b{display:block;margin-bottom:7px;font-size:16.5px;font-weight:600;letter-spacing:-.015em;color:var(--txt)}
.unKarte{margin-top:30px;padding:28px;border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie)}
.unKarte address{margin-top:16px;font-style:normal;font-size:16px;line-height:1.8;color:var(--txt-2)}
.unKarte address b{color:var(--txt);font-weight:600}
.unKarte a{color:var(--txt);text-decoration:none}
.unKarte a:hover{color:#fff}

/* ===== Gespraech ============================================================= */
.gs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,3vw,52px);align-items:start}
@media(max-width:900px){.gs{grid-template-columns:1fr}}
.gsFaelle{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.gsFaelle button{position:relative;display:grid;gap:7px;width:100%;text-align:left;padding:22px 0 22px 20px;
  border-bottom:1px solid var(--linie);transition:padding-left .25s var(--ease)}
.gsFaelle button:before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;background:var(--akz);
  opacity:0;transition:opacity .25s var(--ease)}
.gsFaelle button:hover{padding-left:26px}
.gsFaelle button.an:before{opacity:1}
.gsFaelle b{font-size:16.5px;font-weight:600;letter-spacing:-.015em;color:var(--txt-3);transition:color .25s var(--ease)}
.gsFaelle button.an b,.gsFaelle button:hover b{color:var(--txt)}
.gsFaelle span{font-size:14px;line-height:1.55;color:var(--txt-3)}
.gsVertrauen{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.gsVertrauen span{padding:7px 12px;border-radius:6px;border:1px solid var(--linie);font-size:12px;font-weight:500;
  color:var(--txt-3)}
.gsForm{position:relative;padding:clamp(28px,2.6vw,36px);border-radius:var(--r-gross);background:var(--flaeche);
  border:1px solid var(--linie);box-shadow:var(--kante);display:grid;gap:22px;align-content:start}
.gsKopf h3{font-size:var(--t-tafel)}
.gsKopf span{display:block;margin-top:8px;font-size:14.5px;color:var(--txt-3)}
.gsSeg{border:0;margin:0;padding:0;min-width:0}
.gsSeg legend{padding:0;font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3)}
.gsSegRow{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.gsSegRow input{position:absolute;opacity:0;width:0;height:0}
.gsSegRow span{display:inline-block;padding:10px 15px;border-radius:8px;border:1px solid var(--linie);
  font-size:14px;font-weight:500;color:var(--txt-2);cursor:pointer;transition:.2s var(--ease)}
.gsSegRow label:hover span{border-color:var(--linie-2);color:var(--txt)}
.gsSegRow input:checked+span{border-color:var(--akz);background:var(--akz);color:var(--akz-fuss);font-weight:600}
.gsSegRow input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.gsFelder{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:560px){.gsFelder{grid-template-columns:1fr 1fr}.gsFeld.voll{grid-column:1/-1}}
.gsFeld{display:grid;gap:8px;min-width:0}
.gsFeld>span{font-size:13.5px;font-weight:500;color:var(--txt-2)}
.gsFeld>span i{font-style:normal;font-weight:400;color:var(--txt-3)}
.gsFeld input,.gsFeld textarea{width:100%;padding:13px 15px;border-radius:9px;border:1px solid var(--linie);
  background:rgba(255,255,255,.03);font-size:16px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.gsFeld textarea{resize:vertical;min-height:92px;line-height:1.6}
.gsFeld input:focus,.gsFeld textarea:focus{outline:none;border-color:var(--akz-hell);background:var(--akz-06)}
.gsFeld.fehler input,.gsFeld.fehler textarea{border-color:#E8646F;background:rgba(232,100,111,.08)}
.gsFeld input:-webkit-autofill,.gsFeld input:-webkit-autofill:hover,.gsFeld input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);caret-color:var(--txt);-webkit-box-shadow:inset 0 0 0 1000px #1B1B1E;
  transition:background-color 9999s ease-out}
.gsSenden{padding:16px 20px;border-radius:9px;background:var(--akz);color:var(--akz-fuss);font-size:15.5px;
  font-weight:600;transition:background .2s var(--ease)}
.gsSenden:hover{background:var(--akz-tief)}
.gsSenden[disabled]{opacity:.5;cursor:default}
.gsHinweis{margin:0;font-size:13px;line-height:1.62;color:var(--txt-3)}
.gsHinweis a{color:var(--txt-2);text-decoration:underline;text-underline-offset:2px}
.gsStatus{margin:0;font-size:14.5px;line-height:1.62;font-weight:600;color:#E8646F}
.gsStatus:empty{display:none}
.gsStatus.ok{color:var(--txt)}
.gsFalle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gsForm.gesendet .gsFelder,.gsForm.gesendet .gsSeg,.gsForm.gesendet .gsSenden,
.gsForm.gesendet .gsHinweis,.gsForm.gesendet .gsKopf{display:none}
.gsForm.gesendet{padding:clamp(30px,3vw,44px)}
.gsForm.gesendet .gsStatus{font-size:20px;line-height:1.5;letter-spacing:-.02em}

/* ===== Fusszeile ============================================================= */
.fuss{margin-top:clamp(28px,2.8vw,44px);background:var(--bg-2);
  padding:clamp(52px,5vw,80px) 0 30px}
.fussOben{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,4vw,64px)}
@media(max-width:820px){.fussOben{grid-template-columns:1fr}}
.fussMarke p{max-width:34ch;font-size:14.5px;line-height:1.68;color:var(--txt-3)}
/* Fuenf Spalten: die vier Gruppen des Menues und der Kontakt. Unter 1100px
   wird es dreispaltig, auf dem Telefon zweispaltig. */
.fussNav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
@media(max-width:1100px){.fussNav{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}}
@media(max-width:560px){.fussNav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}}
.fussSpalte b{display:block;margin-bottom:15px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3)}
.fussSpalte a{display:block;padding:6px 0;font-size:14.5px;color:var(--txt-2);transition:color .2s var(--ease)}
.fussSpalte a:hover{color:var(--akz-hell)}
.fussUnten{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  margin-top:clamp(38px,4vw,60px);padding-top:24px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--txt-3)}

/* ===== Rechtliche Seite ====================================================== */
.dokKopf{padding:calc(var(--nav-h) + clamp(48px,6vw,90px)) 0 clamp(26px,3vw,42px)}
.dokKopf h1{font-size:clamp(34px,4vw,58px);max-width:20ch;margin-top:20px}
.dokKopf .lead{margin-top:22px;max-width:56ch}
.dokBody{padding:clamp(28px,4vw,54px) 0 clamp(60px,8vw,110px)}
.dokGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,56px)}
@media(min-width:1000px){.dokGrid{grid-template-columns:200px minmax(0,1fr);align-items:start}}
.dokNav{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:1px}
@media(max-width:999px){.dokNav{position:static;display:flex;flex-wrap:wrap;gap:6px}}
.dokNav a{padding:9px 12px;border-radius:8px;font-size:14px;color:var(--txt-3);transition:.2s var(--ease)}
.dokNav a:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.dokText{max-width:68ch}
/* Sprungziele der Seitennavigation: ohne scroll-margin landeten die Titel
   unter der festen Kopfzeile. Die Polsterung des Titels wird abgezogen,
   damit die Trennlinie und nicht der Text an der Kopfzeile klebt. */
.dokText h2[id]{scroll-margin-top:calc(var(--nav-h) + 40px)}
.dokText h2{font-size:clamp(24px,2.4vw,34px);margin:clamp(36px,4vw,54px) 0 18px;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--linie)}
.dokText h2:first-child{margin-top:0;padding-top:0;border-top:0}
.dokText h3{font-size:17px;font-weight:600;margin:28px 0 10px}
.dokText p{margin:0 0 15px;font-size:16.5px;line-height:1.72;color:var(--txt-2)}
.dokText ul{margin:0 0 18px;padding-left:20px}
.dokText li{margin-bottom:8px;font-size:16.5px;line-height:1.72;color:var(--txt-2)}
.dokText a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
/* 4px mehr oben als bei einem Absatz: die erste Textzeile hat ueber sich
   noch Durchschuss, die Kante der Karte nicht. Der Wert muss ueber den 10px
   Aussenabstand des Titels hinausgehen, sonst faellt er der Randzusammen-
   legung zwischen Geschwistern zum Opfer. Optisch sind beide dann 14.7px
   unter der Titelzeile. */
.dokBox{margin:14px 0 18px;padding:24px;border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie)}
.dokBox address{font-style:normal;font-size:16px;line-height:1.8;color:var(--txt-2)}
.dokBox address b{color:var(--txt);font-weight:600}
.dokStand{margin-top:36px;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-3)}

/* ===== Bewegung aus ========================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{opacity:1;transform:none;transition:none}
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important}
  .heldFeld{display:none}
  .refSpeiche{stroke-dashoffset:0}
  .refPunkt{opacity:1}
  .fig1 .kante{stroke-dashoffset:0}
  .fig4 .haken{stroke-dashoffset:0}
}

/* ===== Ablauf eines Projekts =================================================
   Vier Schritte nebeneinander, dieselbe Linienlogik wie beim Angebot: die
   Zellen stossen aneinander, es gibt keine ungleichen Zwischenraeume. */
.abGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--kante)}
@media(max-width:1000px){.abGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.abGrid{grid-template-columns:1fr}}
.ab{background:var(--flaeche);padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;
  transition:background .3s var(--ease)}
.ab:hover{background:var(--flaeche-2)}
.abNr{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--linie-2);
  font-size:14px;font-weight:600;color:var(--akz-hell);font-variant-numeric:tabular-nums;margin-bottom:24px}
.ab h3{font-size:19px;line-height:1.3;margin-bottom:12px}
.ab p{font-size:15.5px;line-height:1.62;color:var(--txt-2)}
.ab small{display:block;margin-top:auto;padding-top:22px;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  line-height:1.5;text-transform:uppercase;color:var(--txt-3)}
.ab small b{display:block;font-weight:600}

/* ===== Klartext, der Blog ====================================================
   Keine eigene Formsprache: das Kartenraster ist dasselbe wie beim Angebot und
   beim Ablauf (1px Fugen auf --linie, Zelle auf --flaeche, Aufhellung beim
   Zeigen), der Seitenkopf ist der der rechtlichen Seite, der Fliesstext laeuft
   ueber .dokText. Neu sind nur Filterleiste, Titelbild und die Schiene neben
   dem Beitrag. */

/* Kopf: wie .dokKopf, nur traegt er zusaetzlich die Filterleiste. */
.ktKopf .lead{max-width:62ch}
.ktFilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px)}
.ktChip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;
  border:1px solid var(--linie);font-size:13.5px;font-weight:500;color:var(--txt-2);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.ktChip i{font-style:normal;font-size:12px;font-weight:600;color:var(--txt-3)}
.ktChip:hover{border-color:var(--linie-2);color:var(--txt);background:rgba(255,255,255,.05)}
/* Gewaehlt: derselbe Akzent wie beim gewaehlten Weg im Modell-Diagramm. */
.ktChip.an{border-color:var(--akz-40);background:var(--akz-06);color:var(--txt)}
.ktChip.an i{color:var(--akz-hell)}

.ktBody{padding:clamp(20px,3vw,40px) 0 clamp(60px,8vw,110px)}

/* Neuster Beitrag: eine breite Zelle ueber dem Raster, Bild links. */
.ktGross{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:stretch;
  margin-bottom:clamp(22px,2.4vw,34px);border:1px solid var(--linie);border-radius:var(--r-gross);
  background:var(--flaeche);overflow:hidden;box-shadow:var(--kante);
  transition:background .3s var(--ease)}
.ktGross:hover{background:var(--flaeche-2)}
@media(max-width:900px){.ktGross{grid-template-columns:1fr}}
.ktGrossBild{display:block;border-right:1px solid var(--linie)}
@media(max-width:900px){.ktGrossBild{border-right:0;border-bottom:1px solid var(--linie)}}
.ktGrossBild img{width:100%;height:100%;object-fit:cover;aspect-ratio:1200/630}
.ktGrossText{padding:clamp(28px,2.8vw,44px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ktGrossText h2{font-size:clamp(23px,2.1vw,32px);max-width:22ch;text-wrap:balance}
.ktGrossText h2 a{display:inline;transition:color .2s var(--ease)}
.ktGrossText h2 a:hover{color:var(--akz-hell)}
.ktGrossText .copy{max-width:50ch}
.ktGrossText .ktKarteFuss{margin-top:auto;padding-top:10px}

/* Raster: jeder Beitrag ist eine eigene Karte mit eigenem Rahmen, in der
   Uebersicht, auf den Themenseiten und unter einem Beitrag identisch. Die
   grosse Karte des neusten Beitrags ist dieselbe Karte, nur breiter. */
.ktGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
@media(max-width:1000px){.ktGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ktGrid{grid-template-columns:1fr}}
.ktKarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-gross);
  overflow:hidden;box-shadow:var(--kante);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.ktKarte:hover{background:var(--flaeche-2);border-color:var(--linie-2)}
.ktKarteLink{display:flex;flex-direction:column;height:100%}
.ktKarteBild{display:block;border-bottom:1px solid var(--linie)}
.ktKarteBild img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.ktKarteText{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1;
  padding:clamp(22px,2vw,30px)}
.ktKarteTitel{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--txt);
  text-wrap:balance}
.ktKarte:hover .ktKarteTitel{color:#fff}
.ktKarteAnriss{font-size:15px;line-height:1.6;color:var(--txt-2)}
.ktKarteFuss{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--txt-3)}
.ktKarteFuss i{font-style:normal}
.ktKarteFuss i:before{content:'·';margin-right:10px}
/* Themenmarken: gleiche Form wie die Marken auf den Leistungskarten. */
.ktMarken{display:flex;flex-wrap:wrap;gap:6px}
.ktMarken span{padding:5px 10px;border-radius:6px;border:1px solid var(--linie);font-size:11.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3)}
.ktLeer{margin-top:28px;font-size:16px;color:var(--txt-3)}
.ktZurueck{margin-top:clamp(28px,3vw,44px)}
/* Der Klartext-Abschnitt der Startseite benutzt dieselben Bauteile wie der
   Blog, nur stehen sie dort unter einem Kapitelkopf statt unter einem
   Seitenkopf, darum andere Abstaende. */
#klartext .ktFilter{margin-top:0;margin-bottom:clamp(22px,2.4vw,32px)}
.ktStartAktion{margin-top:clamp(24px,2.6vw,36px)}

/* ===== Fragen auf der Startseite ============================================
   Dieselbe Form wie .unSatz im Kapitel "Wer wir sind": Zeilen an einer
   Haarlinie, Frage als Kopfzeile, Antwort darunter. Zwei Spalten, damit die
   sechs Fragen nicht als lange Kolonne stehen. */
.fragen{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,3.4vw,64px)}
@media(max-width:820px){.fragen{grid-template-columns:1fr}}
.fragen li{padding:22px 0;border-top:1px solid var(--linie)}
.fragen b{display:block;margin-bottom:8px;font-size:16.5px;font-weight:600;letter-spacing:-.015em;
  color:var(--txt)}
.fragen p{font-size:16px;line-height:1.68;color:var(--txt-2)}
.fragen a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.fragen a:hover{color:var(--akz-hell)}

/* ----- Ein Beitrag --------------------------------------------------------- */
.ktBeitragKopf h1{max-width:26ch;font-size:clamp(31px,3.6vw,52px);text-wrap:balance}
.ktPfad{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.ktPfad a{color:var(--akz-hell)}
.ktPfad a:hover{color:var(--txt)}
.ktPfad span{color:var(--linie-2)}
.ktBildWrap{padding-top:clamp(10px,1.4vw,18px)}
/* Das Titelbild ist 1200x630 gezeichnet. Ueber die ganze Breite waere es im
   Beitrag 696px hoch und schoebe den Text unter die Bildkante. Darum als Band:
   1200x470 des Bildes bleiben sichtbar, also 80px oben und unten beschnitten.
   Alle Motive zeichnen innerhalb von 90px Rand und bleiben damit vollstaendig. */
.ktBild{width:100%;height:auto;aspect-ratio:1200/470;object-fit:cover;
  border:1px solid var(--linie);border-radius:var(--r-gross);box-shadow:var(--kante)}
/* Die Kurzform padding: x 0 y wuerde das Seitenpolster von .wrap ueberschreiben
   und die Schiene an die Fensterkante setzen. Darum nur oben und unten. */
.ktLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,56px);
  padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(60px,7vw,100px)}
@media(min-width:1000px){.ktLayout{grid-template-columns:200px minmax(0,1fr);align-items:start}}
.ktRail{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:20px}
/* Unter 1000px steht die Schiene ueber dem Text und laeuft als Zeile. */
@media(max-width:999px){.ktRail{position:static;grid-template-columns:repeat(auto-fit,minmax(150px,auto));
  gap:14px 28px;padding-bottom:22px;border-bottom:1px solid var(--linie)}}
.ktRailBlock span{display:block;margin-bottom:5px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-3)}
.ktRailBlock b{font-size:15px;font-weight:600;color:var(--txt-2)}
.ktRailKat{display:flex;flex-wrap:wrap;gap:8px}
.ktRailKat a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.ktRailKat a:hover{color:var(--akz-hell)}
.ktRailZurueck{font-size:13.5px;font-weight:600;color:var(--akz-hell)}
.ktRailZurueck:hover{color:var(--txt)}
/* ----- Satz eines Beitrags -------------------------------------------------
   .dokText kommt von der rechtlichen Seite. Dort trennt vor jedem Titel eine
   Linie die Paragraphen, das ist fuer einen Vertrag richtig und fuer einen
   Beitrag falsch: bei fuenf Titeln liest sich die Seite wie ein Formular.
   Gegliedert wird hier ueber Abstand und eine kurze rote Marke, die Listen
   folgen dem Muster von .unSatz und .dhListe auf der Startseite. */
.ktText h2{border-top:0;padding-top:0;margin:clamp(32px,2.6vw,42px) 0 14px;
  font-size:clamp(24px,2.3vw,32px);letter-spacing:-.028em;line-height:1.16;
  /* Keine eigene Breitenbegrenzung: die Spalte begrenzt schon, und
     text-wrap:balance verteilt die Zeilen erst, wenn es wirklich umbricht. */
  text-wrap:balance}
.ktText h3{font-size:19px;letter-spacing:-.015em;color:var(--txt);margin:28px 0 10px}
.ktText p{font-size:17px;line-height:1.78;margin:0 0 18px;text-wrap:pretty}
.ktText strong{color:var(--txt);font-weight:600}
/* Der erste Absatz ist die Einstiegszeile: groesser, hell, und der erste Titel
   ruecht danach naeher heran als sonst. */
.ktText .ktLead{font-size:20px;line-height:1.62;font-weight:400;color:var(--txt);
  max-width:58ch;margin-bottom:6px}
.ktText .ktLead+h2{margin-top:clamp(26px,2.2vw,34px)}
/* Aufzaehlungen: keine Punkte, sondern Zeilen an einer Haarlinie, wie die
   Satzliste im Kapitel "Wer wir sind". Der fette Einstieg wird zur Kopfzeile. */
.ktText ul{list-style:none;margin:6px 0 22px;padding:0;
  border-bottom:1px solid var(--linie)}
.ktText li{margin:0;padding:18px 0;border-top:1px solid var(--linie);
  font-size:16.5px;line-height:1.66;color:var(--txt-2);text-wrap:pretty}
.ktText li strong:first-child{display:block;margin-bottom:6px;font-size:16.5px;
  letter-spacing:-.015em;color:var(--txt)}

/* Merksatz: die eine Aussage eines Abschnitts, als Tafel wie .dokBox und
   .unKarte. Kein Zierstrich, sondern ein eigener Gegenstand im Text. */
.ktMerk{margin:26px 0;padding:clamp(22px,2.2vw,30px) clamp(24px,2.4vw,34px);
  border-radius:var(--r);background:var(--flaeche);border:1px solid var(--linie);
  box-shadow:var(--kante);
  font-size:clamp(18px,1.6vw,21px);line-height:1.5;letter-spacing:-.018em;color:var(--txt);
  max-width:none;text-wrap:pretty}
/* Kennzahlen als Tafel: Zellen mit 1px-Fugen wie das Leistungs- und das
   Ablaufraster der Startseite, nicht als nackte Zahlenreihe im Fliesstext.
   Auf dem Telefon wird aus jeder Zelle eine Zeile mit Wert links und
   Bedeutung rechts, sonst steht die Tafel halb leer. */
.ktZahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  margin:26px 0 30px;background:var(--linie);border:1px solid var(--linie);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--kante)}
.ktZahlen>div{background:var(--flaeche);padding:clamp(20px,2vw,26px)}
.ktZahlen b{display:block;font-size:clamp(28px,2.8vw,38px);font-weight:700;letter-spacing:-.04em;
  line-height:1.05;color:var(--txt);overflow-wrap:break-word}
/* Wortangaben statt Zahlen: zwei Stufen kleiner, damit sie in die Spalte
   passen. Getrennt wird nur hier, eine Zahl bricht nie um. */
.ktZahlen b.wortMittel{font-size:clamp(23px,2.1vw,28px);line-height:1.15;letter-spacing:-.02em;hyphens:auto}
.ktZahlen b.wortKlein{font-size:clamp(20px,1.9vw,26px);line-height:1.15;letter-spacing:-.02em;hyphens:auto}
.ktZahlen span{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--txt-3)}
@media(max-width:560px){
  .ktZahlen{grid-template-columns:1fr}
  .ktZahlen>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
    padding:15px 18px}
  .ktZahlen b{font-size:28px}
  /* Zahlen stehen mobil links, die Erklaerung rechts daneben. Eine Wortangabe
     wuerde in der halben Breite silbenweise umbrechen, darum bleibt sie im
     Blocksatz untereinander und bekommt die ganze Zeile. */
  .ktZahlen>div.wort{display:block;padding:17px 18px}
  .ktZahlen b.wortMittel{font-size:24px}
  .ktZahlen b.wortKlein{font-size:22px}
  .ktZahlen span{margin-top:0;max-width:62%;text-align:right}
  .ktZahlen>div.wort span{margin-top:7px;max-width:none;text-align:left}
}
/* Gegenüberstellung: zwei Spalten, Kopfzeile in Versalien wie .dhListe. */
.ktTab{width:100%;border-collapse:collapse;margin:26px 0 30px;text-align:left}
.ktTab th{padding:0 18px 12px 0;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--akz-hell);white-space:nowrap}
.ktTab th:last-child{padding-right:0}
.ktTab td{padding:16px 18px 16px 0;border-top:1px solid var(--linie);
  font-size:16px;line-height:1.6;color:var(--txt-2);vertical-align:top}
.ktTab td:last-child{padding-right:0}
.ktTab tr td:first-child{color:var(--txt);font-weight:600}
@media(max-width:560px){
  .ktTab,.ktTab tbody,.ktTab tr,.ktTab td{display:block;width:100%}
  .ktTab thead{display:none}
  .ktTab tr{padding:16px 0;border-top:1px solid var(--linie)}
  .ktTab td{border-top:0;padding:0 0 6px}
}
.ktOutro{margin-top:clamp(40px,4.5vw,64px);padding:clamp(26px,2.6vw,36px);border-radius:var(--r);
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--kante)}
.ktOutro p{margin:12px 0 22px;font-size:16px;line-height:1.68;color:var(--txt-2)}
/* Der Kasten steht in .dokText, dort sind Verweise unterstrichen. Fuer den
   Knopf gilt das nicht, sonst liest er sich wie ein Textlink in einer Schaltflaeche. */
.ktOutro .knopf{text-decoration:none;color:var(--akz-fuss)}
.ktWeiter{padding:0 0 clamp(72px,7.5vw,120px)}
.ktWeiter .kapRegel{padding-bottom:clamp(14px,1.4vw,20px)}