/* Momentum Impuls — vollständiges Stylesheet für den Design-Sync.
   Erzeugt aus design/tokens.css + komponenten.css + seiten.css.
   Nicht von Hand bearbeiten: `python3 gesamt-css.py` schreibt sie neu. */

/* Momentum Impuls AG – Gestaltungsmarken
   Quelle: Landingpage momentum-impuls.com (aus Mos Canva-Vorlage).
   Alle Kontrastwerte sind nachgerechnet und in DESIGN.md tabelliert. */

/* ---------------------------------------------------------------
   Schrift – selbst gehostet, kein Google-CDN.
   Pfad wie auf der Landingpage: /fonts/…
   --------------------------------------------------------------- */

@font-face{font-family:Lato;font-style:normal;font-weight:300;font-display:swap;src:url(./fonts/lato-300.woff2) format('woff2')}

:root{

  /* -------------------------------------------------------------
     Grünskala – Farbton 114°, Sättigung 5–16 %.
     500 ist die gesetzte Marke #646d63, alles andere leitet sich ab.
     ------------------------------------------------------------- */

  --gruen-50:  #f6f9f6;   /* Flächenwechsel, kaum sichtbar        */
  --gruen-100: #edf1ec;   /* Karten- und Feldfüllung              */
  --gruen-200: #dbe1da;   /* Trennlinien auf Weiss, dekorativ     */
  --gruen-300: #bdc7bc;   /* Linien auf grüner Fläche  3.08:1     */
  --gruen-400: #839281;   /* Rahmen von Bedienelementen 3.28:1    */
  --gruen-500: #646d63;   /* Marke, grosse Flächen      5.37:1    */
  --gruen-600: #4d574c;   /* Hover auf grüner Fläche    7.55:1    */
  --gruen-700: #3b4639;   /* Fliesstext                 9.90:1    */
  --gruen-800: #273126;   /* Überschriften             13.52:1    */
  --gruen-900: #192018;   /* Fokusring, Höchstkontrast 16.65:1    */

  /* Neutrale Skala – bewusst kurz. Die Grünskala ist mit 5 %
     Sättigung selbst fast neutral; eine zweite volle Graustufen-
     leiter wäre Doppelspurigkeit. Diese vier decken die Fälle ab,
     in denen der Grünstich stört (Tabellen, Bildrahmen, Overlay). */

  --neutral-0:   #ffffff;
  --neutral-300: #d6d6d4;   /*  1.46:1 – nur Linien               */
  --neutral-600: #6b6b69;   /*  5.34:1 – Text ab 4.5:1            */
  --neutral-900: #1b1b1a;   /* 17.24:1                            */

  /* Signalfarbe – genau eine. Für Erfolgsmeldungen genügt die
     Marke selbst (siehe DESIGN.md), ein zweites Grün verwirrt. */

  --fehler:         #9c2f22;   /* 7.39:1 auf Weiss                */
  --fehler-flaeche: #fdf3f1;   /* Text darauf 6.78:1              */

  /* -------------------------------------------------------------
     Farbrollen – im Bauteil wird nur hierauf zugegriffen.
     Auf grünem Grund werden diese Rollen von .auf-gruen gekippt.
     ------------------------------------------------------------- */

  --ton-text:        var(--gruen-700);
  --ton-titel:       var(--gruen-800);
  --ton-gedaempft:   var(--gruen-500);   /* Meta, Bildlegenden     */
  --ton-marke:       var(--gruen-500);
  --ton-marke-tief:  var(--gruen-600);   /* Hover, gedrückt        */

  --ton-flaeche:       var(--neutral-0);
  --ton-flaeche-ruhig: var(--gruen-50);  /* Abschnittswechsel      */
  --ton-flaeche-marke: var(--gruen-500);

  --ton-linie:   var(--gruen-200);       /* dekorativ              */
  --ton-rahmen:  var(--gruen-400);       /* bedienbar, ≥ 3:1       */
  --ton-fokus:   var(--gruen-900);

  /* -------------------------------------------------------------
     Typografie
     Light (300) trägt ab etwa 25 px, darunter wird der Strich zu
     dünn. Fliesstext läuft deshalb in Regular (400).
     ------------------------------------------------------------- */

  --schrift: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --gewicht-light:   300;   /* nur ≥ --schrift-xl                  */
  --gewicht-normal:  400;   /* Fliesstext, Navigation, Formular    */
  --gewicht-fett:    700;   /* Hervorhebung im Satz, Buttons       */

  /* Stufen: 360 px → 1440 px, danach gedeckelt */
  --schrift-xs:      clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem);  /* 13→14 */
  --schrift-s:       clamp(0.9375rem, 0.91rem + 0.14vw, 1.03rem);   /* 15→17 */
  --schrift-basis:   clamp(1.0625rem, 1.02rem + 0.20vw, 1.20rem);   /* 17→19 */
  --schrift-m:       clamp(1.1875rem, 1.08rem + 0.46vw, 1.50rem);   /* 19→24 */
  --schrift-l:       clamp(1.25rem,   1.13rem + 0.56vw, 1.625rem);  /* 20→26 */
  --schrift-xl:      clamp(1.5625rem, 1.29rem + 1.20vw, 2.375rem);  /* 25→38 */
  --schrift-2xl:     clamp(1.875rem,  1.42rem + 2.04vw, 3.25rem);   /* 30→52 */

  --zeile-eng:     1.15;   /* Display, Wortmarke                   */
  --zeile-titel:   1.25;
  --zeile-kompakt: 1.45;   /* Aufzählungen, Adressblock            */
  --zeile-text:    1.65;   /* deutscher Fliesstext, lange Wörter   */

  --sperrung-weit: 0.06em; /* Kleinversalien-Label                 */
  --sperrung-eng:  0.002em;/* grosse Grade, wie auf der Landingpage*/

  /* -------------------------------------------------------------
     Raum – Vierer-Raster, in rem
     ------------------------------------------------------------- */

  --raum-3xs: 0.25rem;
  --raum-2xs: 0.5rem;
  --raum-xs:  0.75rem;
  --raum-s:   1rem;
  --raum-m:   1.5rem;
  --raum-l:   2rem;
  --raum-xl:  3rem;
  --raum-2xl: 4rem;

  --raum-abschnitt: clamp(3.5rem, 2.17rem + 5.93vw, 7.5rem);  /* 56→120 */
  --raum-rand:      clamp(1.25rem, 0.33rem + 4.07vw, 4rem);   /* 20→64  */

  /* Breiten */
  --breite-inhalt: 72rem;   /* Raster, Kopf, Fuss                  */
  --breite-text:   38rem;   /* ~68 Zeichen bei 19 px               */
  --ziel-min:      2.75rem; /* 44 px – kleinste Klickfläche        */

  /* -------------------------------------------------------------
     Kanten, Tiefe, Bewegung
     ------------------------------------------------------------- */

  --radius-1: 2px;   /* Standard: Felder, Buttons, Fokus           */
  --radius-2: 4px;   /* Karten, Bilder                            */

  /* Genau ein Schatten. Die Marke arbeitet mit Linien, nicht mit
     Tiefe; er trägt allein den klebenden Kopf beim Scrollen.      */
  --schatten-1: 0 1px 2px rgb(25 32 24 / .06), 0 2px 8px rgb(25 32 24 / .05);

  --kurve: cubic-bezier(.22,.61,.36,1);   /* aus der Landingpage   */
  --zeit:  200ms;

  --linie-staerke: 1px;   /* die feine Vertikale, überall gleich   */
}

/* Momentum Impuls AG – Bausteine
   Setzt tokens.css voraus:  <link rel="stylesheet" href="/design/tokens.css">
                             <link rel="stylesheet" href="/design/komponenten.css">
   Semantisches HTML vorausgesetzt. Klassen gibt es nur dort, wo das
   Element allein nicht sagt, was es ist (Karte, Stimme, Bahn). */

/* ===============================================================
   1 · Grundlage
   =============================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:6rem;          /* klebender Kopf verdeckt sonst */
}

body{
  margin:0;
  background:var(--ton-flaeche);
  color:var(--ton-text);
  font-family:var(--schrift);
  font-weight:var(--gewicht-normal);
  font-size:var(--schrift-basis);
  line-height:var(--zeile-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;height:auto}
img{border-radius:var(--radius-2)}

::selection{background:var(--gruen-200);color:var(--gruen-900)}

/* Ein Fokusstil für alles. Auf grünem Grund kippt --ton-fokus mit. */
:focus-visible{
  outline:3px solid var(--ton-fokus);
  outline-offset:3px;
  border-radius:var(--radius-1);
}
:focus:not(:focus-visible){outline:none}

/* Umschaltbare Rollen für grüne Flächen (Bühne, Fuss, Zitatband). */
.auf-gruen{
  --ton-text:      var(--neutral-0);
  --ton-titel:     var(--neutral-0);
  --ton-gedaempft: var(--gruen-300);
  --ton-linie:     var(--gruen-300);
  --ton-rahmen:    var(--gruen-300);
  --ton-fokus:     var(--neutral-0);
  background:var(--ton-flaeche-marke);
  color:var(--ton-text);
}

/* Sprungmarke für Tastatur und Screenreader */
.sprung{
  position:absolute;left:var(--raum-s);top:-100%;z-index:100;
  padding:var(--raum-2xs) var(--raum-s);
  background:var(--neutral-0);color:var(--gruen-800);
  border:var(--linie-staerke) solid var(--ton-rahmen);
  border-radius:var(--radius-1);
}
.sprung:focus{top:var(--raum-s)}

/* ===============================================================
   2 · Layout
   =============================================================== */

.bahn{
  width:100%;
  max-width:var(--breite-inhalt);
  margin-inline:auto;
  padding-inline:var(--raum-rand);
}
.bahn--schmal{max-width:calc(var(--breite-text) + 2 * var(--raum-rand))}

main > section{padding-block:var(--raum-abschnitt)}
main > section + section{border-top:var(--linie-staerke) solid var(--ton-linie)}
main > section.auf-gruen,
main > section.auf-gruen + section{border-top:0}

/* Ruhige Fläche statt Trennlinie – für den Wechsel zwischen Abschnitten */
main > section.ruhig{background:var(--ton-flaeche-ruhig);border-top:0}
main > section.ruhig + section{border-top:0}

/* ===============================================================
   3 · Marke – Wortmarke, Bildmarke, die feine Vertikale
   =============================================================== */

.wortmarke{
  font-weight:var(--gewicht-light);
  letter-spacing:var(--sperrung-eng);
  line-height:var(--zeile-eng);
  white-space:nowrap;
  color:inherit;
  text-decoration:none;
}

.bildmarke{                          /* Fingerabdruck-SVG */
  display:block;
  width:clamp(2.25rem,4vw,4.5rem);
  color:currentColor;                /* SVG nutzt fill:currentColor */
}

/* Wiederkehrendes Element: die feine Vertikale.
   Als eigenständiger Strich oder als linke Kante eines Bausteins. */
.vertikale{
  display:block;
  width:var(--linie-staerke);
  background:var(--ton-linie);
  border:0;
  margin:0;
}

/* ===============================================================
   4 · Navigation
   =============================================================== */

.kopf{
  position:sticky;top:0;z-index:50;
  background:var(--ton-flaeche);
  border-bottom:var(--linie-staerke) solid transparent;
}
.kopf > .bahn{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--raum-xs) var(--raum-l);
  padding-block:var(--raum-xs);
}
.kopf .wortmarke{font-size:var(--schrift-l)}

.kopf nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:0 var(--raum-m);
  margin:0;padding:0;
  list-style:none;
}
.kopf nav a{
  display:flex;
  align-items:center;
  min-height:var(--ziel-min);
  padding-block:var(--raum-3xs);
  font-size:var(--schrift-s);
  color:var(--ton-text);
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--zeit) var(--kurve),border-color var(--zeit) var(--kurve);
}
.kopf nav a:hover{color:var(--gruen-800);border-bottom-color:var(--ton-rahmen)}
.kopf nav a[aria-current="page"]{color:var(--gruen-800);border-bottom-color:var(--ton-marke)}

/* Kein Burger-Menü: vier kurze Einträge brechen auf dem Handy sauber
   um. Ein Aufklapper ohne JavaScript wäre mehr Technik als Nutzen. */
@media (max-width:34em){
  .kopf > .bahn{justify-content:flex-start}
  .kopf nav ul{gap:0 var(--raum-s)}
}

/* Die Trennlinie erscheint erst, wenn die Seite gescrollt ist –
   an den Scrollstand gekoppelt, keine Dauerbewegung, kein Skript. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .kopf{
      animation:kopf-linie linear both;
      animation-timeline:scroll(root);
      animation-range:0 6rem;
    }
    @keyframes kopf-linie{
      to{border-bottom-color:var(--ton-linie);box-shadow:var(--schatten-1)}
    }
  }
}

/* ===============================================================
   5 · Bühne (Hero)
   =============================================================== */

.buehne{
  position:relative;
  padding-block:clamp(3rem,10vh,7rem) var(--raum-abschnitt);
  overflow:hidden;
}
.buehne > .bahn{      /* bleibt in der Inhaltsspalte, Breite steuern die Kinder */
  display:grid;
  gap:var(--raum-m);
}
.buehne h1{
  margin:0;
  max-width:52rem;
  font-size:var(--schrift-2xl);
  font-weight:var(--gewicht-light);
  line-height:var(--zeile-titel);
  letter-spacing:var(--sperrung-eng);
  color:var(--ton-titel);
  text-wrap:balance;
}
.buehne p{
  margin:0;
  max-width:34rem;
  font-size:var(--schrift-m);
  font-weight:var(--gewicht-light);
  line-height:var(--zeile-kompakt);
}
.buehne .knopf{justify-self:start;margin-top:var(--raum-xs)}

/* Vertikale rechts, wie auf der Landingpage; ab 60em sichtbar */
.buehne > .vertikale{
  position:absolute;
  top:var(--raum-abschnitt);bottom:var(--raum-abschnitt);
  right:clamp(2rem,7vw,7rem);
  display:none;
}
@media (min-width:60em){.buehne > .vertikale{display:block}}

.buehne > .bildmarke{
  position:absolute;
  right:clamp(1.5rem,5vw,4.5rem);
  bottom:clamp(1.5rem,5vw,4.5rem);
  pointer-events:none;
}

/* ===============================================================
   6 · Fliesstext
   =============================================================== */

.fliess{max-width:var(--breite-text)}
.fliess > * + *{margin-top:var(--raum-s)}

.fliess h2,.fliess h3{
  color:var(--ton-titel);
  line-height:var(--zeile-titel);
  text-wrap:balance;
}
.fliess h2{
  margin-top:var(--raum-xl);
  font-size:var(--schrift-xl);
  font-weight:var(--gewicht-light);
}
.fliess h3{
  margin-top:var(--raum-l);
  font-size:var(--schrift-l);
  font-weight:var(--gewicht-normal);
}
.fliess > :first-child{margin-top:0}

.fliess p{margin-bottom:0;hyphens:auto}
.fliess p.lead{
  font-size:var(--schrift-m);
  font-weight:var(--gewicht-light);
  line-height:var(--zeile-kompakt);
  color:var(--gruen-600);
}

.fliess ul,.fliess ol{
  margin-bottom:0;
  padding-left:var(--raum-m);
  line-height:var(--zeile-kompakt);
}
.fliess li + li{margin-top:var(--raum-2xs)}
.fliess ul{list-style:none;padding-left:0}
.fliess ul > li{position:relative;padding-left:var(--raum-m)}
.fliess ul > li::before{                 /* der Strich statt Punkt */
  content:"";position:absolute;left:0;top:.72em;
  width:.6rem;height:var(--linie-staerke);
  background:var(--ton-rahmen);
}

.fliess strong{font-weight:var(--gewicht-fett);color:var(--ton-titel)}
.fliess small{font-size:var(--schrift-s);color:var(--ton-gedaempft)}

/* Textlinks: Unterstreichung dauerhaft, sie ist die Barrierefreiheit */
.fliess a{
  color:var(--ton-marke-tief);
  text-decoration:underline;
  text-decoration-thickness:var(--linie-staerke);
  text-underline-offset:.18em;
  transition:color var(--zeit) var(--kurve),text-decoration-color var(--zeit) var(--kurve);
}
.fliess a:hover{color:var(--gruen-800);text-decoration-thickness:2px}
.auf-gruen .fliess a{color:var(--neutral-0)}

/* Abschnittsmarke über der Überschrift */
.marke-abschnitt{
  display:block;
  margin-bottom:var(--raum-2xs);
  font-size:var(--schrift-xs);
  font-weight:var(--gewicht-fett);
  letter-spacing:var(--sperrung-weit);
  text-transform:uppercase;
  color:var(--ton-gedaempft);
}

/* ===============================================================
   7 · Leistungskarte
   =============================================================== */

.leistungen{
  display:grid;
  gap:var(--raum-l);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  margin:0;padding:0;
  list-style:none;
}

.leistung{
  padding:var(--raum-m) 0 var(--raum-m) var(--raum-m);
  border-left:var(--linie-staerke) solid var(--ton-rahmen);  /* die Vertikale */
  /* Ohne `min-width:0` behaelt eine Karte die Breite ihres laengsten Wortes und
     schiebt sich ueber die Nachbarkarte — sichtbar bei «Personal- und
     Organisationsentwicklungsmandate» im dreispaltigen Raster. */
  min-width:0;
  transition:border-color var(--zeit) var(--kurve),background-color var(--zeit) var(--kurve);
}
.leistung h3{
  margin:0 0 var(--raum-2xs);
  hyphens:auto;
  overflow-wrap:break-word;
  font-size:var(--schrift-l);
  font-weight:var(--gewicht-normal);
  line-height:var(--zeile-titel);
  color:var(--ton-titel);
  text-wrap:balance;
}
.leistung p{margin:0;color:var(--ton-text)}
.leistung > a{
  display:inline-flex;align-items:center;
  min-height:var(--ziel-min);
  margin-top:var(--raum-2xs);
  font-size:var(--schrift-s);
  color:var(--ton-marke-tief);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:var(--linie-staerke);
}

/* Ganze Karte anklickbar: Überschrift trägt den Link, ::after deckt ab */
.leistung:has(a):hover{border-left-color:var(--ton-marke);background:var(--gruen-50)}
.leistung h3 a{color:inherit;text-decoration:none}
.leistung h3 a::after{content:"";position:absolute;inset:0}
.leistung:has(h3 a){position:relative}

/* ===============================================================
   8 · Stimme (Zitat)
   =============================================================== */

.stimme{
  max-width:var(--breite-text);
  margin:0;
  padding-left:var(--raum-m);
  border-left:var(--linie-staerke) solid var(--ton-rahmen);
}
.stimme p{
  margin:0;
  font-size:var(--schrift-m);
  font-weight:var(--gewicht-light);
  line-height:var(--zeile-kompakt);
  color:var(--ton-titel);
}
.stimme footer{                        /* Herkunft des Zitats */
  margin-top:var(--raum-s);
  font-size:var(--schrift-s);
  line-height:var(--zeile-kompakt);
  color:var(--ton-gedaempft);
}
.stimme cite{font-style:normal;font-weight:var(--gewicht-fett)}

/* ===============================================================
   9 · Häufige Fragen (details/summary)
   =============================================================== */

.fragen{max-width:var(--breite-text)}

.frage{border-bottom:var(--linie-staerke) solid var(--ton-linie)}
.frage:first-of-type{border-top:var(--linie-staerke) solid var(--ton-linie)}

.frage > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--raum-s);
  min-height:var(--ziel-min);
  padding:var(--raum-s) 0;
  font-size:var(--schrift-l);
  font-weight:var(--gewicht-normal);
  line-height:var(--zeile-titel);
  color:var(--ton-titel);
  cursor:pointer;
  list-style:none;
  transition:color var(--zeit) var(--kurve);
}
.frage > summary::-webkit-details-marker{display:none}
.frage > summary:hover{color:var(--ton-marke-tief)}

/* Zeichen: waagrechter Strich plus senkrechter, der beim Öffnen geht */
.frage > summary::after{
  content:"";
  flex:0 0 auto;
  width:.875rem;height:.875rem;
  background:
    linear-gradient(var(--ton-rahmen) 0 0) center/100% var(--linie-staerke) no-repeat,
    linear-gradient(var(--ton-rahmen) 0 0) center/var(--linie-staerke) 100% no-repeat;
  transition:transform var(--zeit) var(--kurve),opacity var(--zeit) var(--kurve);
}
.frage[open] > summary::after{
  background:linear-gradient(var(--ton-marke) 0 0) center/100% var(--linie-staerke) no-repeat;
  transform:rotate(180deg);
}

.frage > :not(summary){
  padding:0 0 var(--raum-m);
  max-width:calc(var(--breite-text) - var(--raum-l));
}
.frage p{margin:0}
.frage p + p{margin-top:var(--raum-s)}

/* ===============================================================
   10 · Formular
   =============================================================== */

.formular{
  display:grid;
  gap:var(--raum-m);
  max-width:34rem;
}
.formular > p{margin:0}

.feld{display:grid;gap:var(--raum-3xs)}

.feld > label{
  font-size:var(--schrift-s);
  font-weight:var(--gewicht-normal);
  line-height:var(--zeile-kompakt);
  color:var(--ton-titel);
}
.feld > label .freiwillig{
  font-weight:var(--gewicht-normal);
  color:var(--ton-gedaempft);
}

.feld input,
.feld textarea,
.feld select{
  width:100%;
  min-height:var(--ziel-min);
  padding:var(--raum-2xs) var(--raum-xs);
  font:inherit;
  font-size:var(--schrift-basis);
  color:var(--ton-text);
  background:var(--ton-flaeche);
  border:var(--linie-staerke) solid var(--ton-rahmen);
  border-radius:var(--radius-1);
  transition:border-color var(--zeit) var(--kurve),background-color var(--zeit) var(--kurve);
}
.feld textarea{min-height:8rem;line-height:var(--zeile-text);resize:vertical}
.feld input:hover,.feld textarea:hover{border-color:var(--ton-marke-tief)}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--gruen-700)}
.feld ::placeholder{color:var(--ton-gedaempft);opacity:1}

.feld .hinweis{
  font-size:var(--schrift-s);
  line-height:var(--zeile-kompakt);
  color:var(--ton-gedaempft);
}

/* Fehler: Farbe allein reicht nicht, deshalb Text plus Rahmenstärke */
.feld :is(input,textarea)[aria-invalid="true"]{
  border-color:var(--fehler);
  border-width:2px;
  background:var(--fehler-flaeche);
}
.feld .fehler{
  font-size:var(--schrift-s);
  line-height:var(--zeile-kompakt);
  font-weight:var(--gewicht-fett);
  color:var(--fehler);
}

/* Rückmeldung nach dem Absenden – ohne zweite Signalfarbe */
.meldung{
  padding:var(--raum-s) var(--raum-m);
  background:var(--gruen-50);
  border-left:var(--linie-staerke) solid var(--ton-marke);   /* dieselbe Hairline wie überall */
  border-radius:0 var(--radius-1) var(--radius-1) 0;
  color:var(--gruen-700);
}
.meldung[role="alert"]{background:var(--fehler-flaeche);border-left-color:var(--fehler);color:var(--fehler)}

/* ===============================================================
   11 · Buttons
   =============================================================== */

.knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--raum-2xs);
  min-height:var(--ziel-min);
  padding:var(--raum-2xs) var(--raum-m);
  font-family:inherit;
  font-size:var(--schrift-s);
  font-weight:var(--gewicht-fett);
  line-height:var(--zeile-kompakt);
  letter-spacing:.01em;
  text-decoration:none;
  border:var(--linie-staerke) solid var(--ton-marke);
  border-radius:var(--radius-1);
  background:var(--ton-marke);
  color:var(--neutral-0);
  cursor:pointer;
  transition:background-color var(--zeit) var(--kurve),border-color var(--zeit) var(--kurve),color var(--zeit) var(--kurve);
}
.knopf:hover{background:var(--ton-marke-tief);border-color:var(--ton-marke-tief)}
.knopf:active{background:var(--gruen-700);border-color:var(--gruen-700)}
.knopf[disabled],.knopf[aria-disabled="true"]{
  background:var(--gruen-400);border-color:var(--gruen-400);cursor:not-allowed;
}

/* sekundär */
.knopf--leer{background:transparent;color:var(--ton-marke-tief);border-color:var(--ton-rahmen)}
.knopf--leer:hover{background:var(--gruen-50);color:var(--gruen-800);border-color:var(--ton-marke-tief)}
.knopf--leer:active{background:var(--gruen-100)}

/* auf grünem Grund gedreht */
.auf-gruen .knopf{background:var(--neutral-0);border-color:var(--neutral-0);color:var(--gruen-700)}
.auf-gruen .knopf:hover{background:var(--gruen-50);border-color:var(--gruen-50);color:var(--gruen-800)}
.auf-gruen .knopf--leer{background:transparent;color:var(--neutral-0);border-color:var(--gruen-300)}
.auf-gruen .knopf--leer:hover{background:var(--gruen-600);border-color:var(--neutral-0);color:var(--neutral-0)}

/* ===============================================================
   12 · Fusszeile
   =============================================================== */

.fuss{
  position:relative;
  padding-block:var(--raum-2xl);
  font-size:var(--schrift-s);
  line-height:var(--zeile-kompakt);
}
.fuss > .bahn{
  display:grid;
  gap:var(--raum-l);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  align-items:start;
}
.fuss .wortmarke{font-size:var(--schrift-l)}
.fuss h2{
  margin:0 0 var(--raum-2xs);
  font-size:var(--schrift-xs);
  font-weight:var(--gewicht-fett);
  letter-spacing:var(--sperrung-weit);
  text-transform:uppercase;
  color:var(--ton-gedaempft);
}
.fuss address{font-style:normal}
.fuss p{margin:0}
.fuss ul{margin:0;padding:0;list-style:none}
.fuss a{
  display:inline-flex;align-items:center;
  min-height:var(--ziel-min);
  color:inherit;
  text-decoration:none;
  border-bottom:var(--linie-staerke) solid transparent;
}
.fuss a:hover{border-bottom-color:currentColor}

.fuss .bildmarke{margin-top:var(--raum-s);justify-self:end}

.fuss .klein{
  margin-top:var(--raum-xl);
  padding-top:var(--raum-s);
  border-top:var(--linie-staerke) solid var(--ton-linie);
  font-size:var(--schrift-xs);
  color:var(--ton-gedaempft);
}

/* ===============================================================
   13 · Bewegung – nur an Scrollstand oder Zeiger gekoppelt
   =============================================================== */

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  @supports (animation-timeline:view()){
    .einblenden{
      animation:auf linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 45%;
    }
    /* Untergrenze bewusst nicht 0: `view()` ist an die Scrollposition gekoppelt und laeuft
   beim Zurueckscrollen rueckwaerts. Bei 0 verschwinden gelesene Abschnitte wieder,
   was als Fehler wahrgenommen wird. Bei 0.15 bleibt der Eintritt sichtbar, das
   Zurueckblenden faellt nicht auf. */
@keyframes auf{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:none}}
  }
}

/* Browser ohne Scroll-Timeline zeigen den Inhalt einfach sofort.
   Nichts läuft nach dem Laden von selbst weiter. */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===============================================================
   14 · Druck
   =============================================================== */

@media print{
  .kopf,.sprung,.knopf{display:none}
  body{font-size:11pt;color:#000}
  .auf-gruen{background:none;color:#000}
  .frage > :not(summary){display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}


/* Seitenspezifische Anordnungen des Prototyps.

   tokens.css und komponenten.css sind das System. Was hier steht, ist die
   Anordnung einzelner Seiten — Bild neben Text, Formular neben Kontaktangaben.
   Ausschliesslich mit Tokens, keine neuen Farben und keine neuen Grade. */

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

.kopf-knopf{
  /* Auf schmalen Schirmen sitzt der Knopf unter der Navigation und darf
     dort nicht die halbe Breite fressen. */
  flex:0 0 auto;
}

/* Ohne Burger-Menü stapelt der Kopf auf dem Handy auf drei Zeilen und wird
   160 px hoch — klebend wären das 20 % des Displays, auf jeder Bildschirmseite.
   Deshalb steht er dort mit, statt oben zu bleiben. Ab Tablet klebt er wieder. */
@media (max-width:52rem){
  .kopf{position:static}
}

/* ── Leseachse ────────────────────────────────────────────────────── */

/* `.bahn--schmal` zentriert die Textspalte, `.bahn` sitzt bei breitem Schirm
   linksbündig am Inhaltsmass. Wechseln sich beide ab — auf der Startseite tun
   sie das viermal —, springt die linke Kante bei jedem Abschnitt. Deshalb
   beginnt die schmale Bahn an derselben Kante wie die breite. Das hält
   zugleich die Vertikale, die als Markenelement ohnehin durchläuft. */
.bahn--schmal{
  margin-inline:max(0px, calc(50% - var(--breite-inhalt) / 2)) auto;
}

/* ── Bühne ────────────────────────────────────────────────────────── */

.buehne-ober{
  font-size:var(--schrift-xs);
  letter-spacing:var(--sperrung-weit);
  text-transform:uppercase;
  color:inherit;
  opacity:.8;
  margin-bottom:var(--raum-s);
}

.bildmarke--buehne{
  /* Wie auf der Landingpage: unten rechts, an der Vertikalen ausgerichtet. */
  position:absolute;
  right:var(--raum-rand);
  bottom:var(--raum-l);
  width:clamp(3.5rem,7vw,7rem);
  opacity:.9;
}
.buehne{position:relative}

/* ── Fliesstext ───────────────────────────────────────────────────── */

.anriss{
  font-size:var(--schrift-l);
  font-weight:var(--gewicht-light);
  line-height:var(--zeile-kompakt);
  color:var(--ton-titel);
}

.format{
  margin-top:var(--raum-m);
  padding-top:var(--raum-s);
  border-top:var(--linie-staerke) solid var(--ton-linie);
  font-size:var(--schrift-s);
  color:var(--ton-gedaempft);
}
.label{
  display:inline-block;
  margin-right:var(--raum-2xs);
  font-size:var(--schrift-xs);
  font-weight:var(--gewicht-fett);
  letter-spacing:var(--sperrung-weit);
  text-transform:uppercase;
  color:var(--ton-marke-tief);
}

.meta{
  font-size:var(--schrift-xs);
  color:var(--ton-gedaempft);
}

/* Sichtbare Lücke: was im Prototyp bewusst offen ist. Kein Warnton,
   sondern eine ruhige Markierung — sie verschwindet vor dem Livegang. */
.offen{
  padding:var(--raum-s) var(--raum-m);
  border-left:2px solid var(--ton-rahmen);
  background:var(--ton-flaeche-ruhig);
  font-size:var(--schrift-s);
  color:var(--ton-gedaempft);
}

/* ── Bild neben Text ──────────────────────────────────────────────── */

.person-anriss,
.person-gross{
  display:grid;
  gap:var(--raum-l) var(--raum-xl);
  align-items:start;
}
.person-anriss img,
.person-gross img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:var(--radius-1);
}
@media (min-width:52rem){
  .person-anriss{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}
  .person-gross {grid-template-columns:minmax(0,24rem) minmax(0,1fr)}
}

/* ── Kontakt ──────────────────────────────────────────────────────── */

.kontakt-raster{
  display:grid;
  gap:var(--raum-xl);
  align-items:start;
}
@media (min-width:52rem){
  .kontakt-raster{grid-template-columns:minmax(0,1fr) minmax(0,18rem)}
}

/* ── Abschluss ────────────────────────────────────────────────────── */

.abschluss{
  padding-block:var(--raum-2xl);
  border-top:var(--linie-staerke) solid var(--ton-linie);
}
.abschluss .knopf{margin-top:var(--raum-m)}

/* ── Fusszeile ────────────────────────────────────────────────────── */

.fuss-raster{
  display:grid;
  gap:var(--raum-l);
  align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}
.fuss-marke{
  font-weight:var(--gewicht-fett);
  margin-bottom:var(--raum-2xs);
}
.fuss-raster .bildmarke{
  justify-self:end;
  align-self:end;
}

/* Das Fingerabdruck-SVG kommt inline in die Seite, damit es die Textfarbe
   erbt (fill:currentColor). Ohne diese Regel behielte es seine eigene Grösse. */
.fp{
  display:block;
  width:100%;
  height:auto;
}