/* ==========================================================================
   Sonnenberg Consulting — Layout und Komponenten
   Aufbau: Reset · Basis · Hilfsklassen · Kopf · Held · Abschnitte ·
           Komponenten · Fuß · Bewegung
   Farbwerte und Maße kommen aus tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* damit Ankerziele nicht unter dem Kopf liegen */
}

body {
  font-family: var(--schrift-text);
  font-size: var(--text-md);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--farbe-grund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` statt `hidden`: Beides verhindert waagrechtes Scrollen, aber
     `hidden` macht den Body zu einem Scroll-Container -- und in einem
     Scroll-Container hört `position: sticky` auf zu funktionieren. Genau
     daran klebte die Kontaktspalte nicht. `clip` hat diesen Nebeneffekt
     nicht. */
  overflow-x: clip;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> ist nur eine Hülle um das <img> und bekommt von sich aus keine
   Höhe. Steht darin ein Bild mit `height: 100%`, bezieht sich das auf die
   Hülle -- nicht auf den Container darum. Genau daran blieb das Heldenbild
   auf dem Telefon bei 210px stehen, während der Bereich 747px hoch war; die
   Lücke darunter zeigte nur noch den blauen Schleier.
   Wo eine Hülle eine Fläche füllen soll, gibt sie die Grösse jetzt weiter. */
.held__bild picture,
.person__bild picture {
  display: block;
  width: 100%;
  height: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: none; background: none; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

:where(h1, h2, h3, h4) {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-kopf);
  line-height: var(--zeilenhoehe-kopf);
  letter-spacing: var(--laufweite-kopf);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Sichtbarer Fokus für Tastaturbedienung — nie entfernen. */
:focus-visible {
  outline: 3px solid var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Basis-Layout
   -------------------------------------------------------------------------- */

.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--rand-x);
}

.inhalt--weit { max-width: var(--breite-weit); }
.inhalt--schmal { max-width: 780px; }

.abschnitt { padding-block: var(--sektion-y); }

/* Für Abschnitte, die nur ein paar Zeilen tragen. Der Kontaktabschluss über
   der Fusszeile stand mit voller Sektionshöhe (656px) für vier Zeilen Text --
   das las sich wie eine Lücke, nicht wie ein Abschluss. */
/* Früher etwas knapper als die übrigen Abschnitte. Der Unterschied war
   nur an einer einzigen Stelle wirksam und liess den Rhythmus dort um 8px
   springen -- nicht genug, um als Absicht durchzugehen, aber genug, um
   ungleichmässig zu wirken. Jetzt derselbe Wert, nur der Abschluss nach
   unten bleibt etwas kürzer, weil darunter die Fusszeile beginnt. */
.abschnitt--knapp { padding-block: var(--sektion-y) clamp(2rem, 1.25rem + 2.6vw, 3.5rem); }

/* Der Abschluss vor der Fusszeile rückt näher an das, was darüber steht.
   Sonst gilt auf der ganzen Seite ein einheitlicher Abstand von 112px --
   hier ist die Ausnahme begründet: Über dem Block steht nur noch ein
   einzelner Textverweis und darunter beginnt gleich die dunkle Fusszeile.
   Zwischen zwei so dünnen Zeilen wirkt derselbe Abstand wie eine Lücke. */
.abschnitt--abschluss { padding-block-start: calc(var(--sektion-y) * 0.55); }

/* Zwei ungetönte Abschnitte hintereinander -- etwa Willkommen und Vision --
   brauchen nicht die doppelte Trennung. Ohne Farbwechsel dazwischen las sich
   der doppelte Abstand als Lücke, nicht als Gliederung. Der obere Abstand
   entfällt hier, der untere des vorigen Abschnitts trennt ausreichend. */
/* Hier stand eine Regel, die den oberen Abstand auf 0 setzte, wenn zwei
   ungetönte Abschnitte aufeinander folgen -- gedacht als Ausgleich dafür,
   dass ohne Farbwechsel keine Trennung nötig sei.
   
   Nachgemessen war die Folge ein halbierter Abstand: 72px zwischen zwei
   weissen Abschnitten gegenüber 144px überall sonst. Derselbe Sprung
   wiederholte sich beim Weiterlesen und liess die Seite ungleichmässig
   wirken. Ein durchgehender Rhythmus trägt mehr als eine Sonderregel, die
   nur an zwei Stellen greift -- deshalb ist sie ersatzlos entfallen. */
.abschnitt--flaeche { background: var(--farbe-flaeche); }
.abschnitt--tief {
  background: var(--farbe-flaeche-tief);
  color: var(--farbe-text-invers);
}


/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprunglink {
  position: absolute;
  top: -100%;
  left: var(--raum-4);
  z-index: 200;
  padding: var(--raum-3) var(--raum-5);
  background: var(--farbe-akzent);
  color: var(--farbe-text-invers);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--dauer-schnell) var(--easing-weich);
}
.sprunglink:focus { top: var(--raum-4); }

/* --------------------------------------------------------------------------
   Typografische Bausteine
   -------------------------------------------------------------------------- */

.augenbraue {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: var(--raum-4);
}

.abschnitt--tief .augenbraue { color: var(--marke-gelb); }

/* Die gelbe Linie unter der Augenbraue: das Markengelb als reine Fläche,
   nie als Textfarbe (Kontrast 1.52:1 auf Weiß). */
.augenbraue::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: var(--raum-2);
  background: var(--marke-gelb);
  border-radius: var(--radius-rund);
}


.titel-xl { font-size: var(--text-4xl); }
.titel-l  { font-size: var(--text-3xl); }
.titel-m  { font-size: var(--text-2xl); }
.titel-s  { font-size: var(--text-xl); }

.vorspann {
  font-size: var(--text-lg);
  color: var(--grau-700);
  max-width: var(--breite-text);
}

.abschnitt--tief .vorspann { color: rgb(255 255 255 / 0.82); }

.fliesstext { max-width: var(--breite-text); }
.fliesstext > * + * { margin-top: var(--raum-4); }
.fliesstext h2 { margin-top: var(--raum-8); font-size: var(--text-2xl); }
.fliesstext h3 { margin-top: var(--raum-6); font-size: var(--text-xl); }
.fliesstext a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fliesstext a:hover { text-decoration-thickness: 2px; }
.fliesstext ul { list-style: none; }
.fliesstext li { position: relative; padding-left: var(--raum-5); }
.fliesstext li + li { margin-top: var(--raum-2); }
.fliesstext ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--marke-gelb);
}

.abschnitt-kopf { margin-bottom: var(--raum-8); }
.abschnitt-kopf .vorspann { margin-top: var(--raum-4); }

/* Zentrierte Abschnitte */
.mitte { text-align: center; }
.vorspann--mitte { margin-inline: auto; margin-top: var(--raum-4); }

/* Telefonnummer als eigenständiges Element — sie ist der direkteste Weg
   zum Gespräch und soll wie eine Überschrift wirken, nicht wie ein Link
   im Fließtext. */
.grossnummer {
  margin-block: var(--raum-6) var(--raum-6);
  font-family: var(--schrift-display);
  /* Eine Stufe kleiner als eine Abschnittsüberschrift: Die Nummer soll gut
     sichtbar sein, aber der Überschrift darüber nicht die Show stehlen. */
  font-size: var(--text-xl);
  font-weight: var(--gewicht-kopf);
  letter-spacing: var(--laufweite-kopf);
}
.grossnummer a {
  color: var(--farbe-akzent);
  padding-bottom: var(--raum-1);
  border-bottom: 3px solid var(--marke-gelb);
  transition: color var(--dauer) var(--easing-weich);
}
.grossnummer a:hover { color: var(--farbe-akzent-hover); }

/* --------------------------------------------------------------------------
   Schaltflächen
   -------------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-6);
  border-radius: var(--radius-rund);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  transition: background var(--dauer) var(--easing-weich),
              color var(--dauer) var(--easing-weich),
              transform var(--dauer) var(--easing),
              box-shadow var(--dauer) var(--easing);
  will-change: transform;
}

.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }

.knopf--voll {
  background: var(--farbe-knopf);
  color: var(--farbe-text-invers);
  box-shadow: var(--schatten);
}
.knopf--voll:hover {
  background: var(--farbe-knopf-hover);
  box-shadow: var(--schatten-lg);
}

.knopf--rand {
  border: 1.5px solid var(--farbe-rand);
  color: var(--farbe-akzent);
  background: var(--farbe-grund);
}
.knopf--rand:hover {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-text-invers);
}

/* Auf dunklem Grund kehrt sich die Logik um: helle Fläche, dunkle Schrift. */
.abschnitt--tief .knopf--rand,
.held .knopf--rand {
  border-color: rgb(255 255 255 / 0.5);
  color: var(--farbe-text-invers);
  background: transparent;
}
.abschnitt--tief .knopf--rand:hover,
.held .knopf--rand:hover {
  background: var(--farbe-text-invers);
  color: var(--blau-800);
  border-color: var(--farbe-text-invers);
}

/* Textlink mit wanderndem Pfeil */
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 600;
  color: var(--farbe-akzent);
}
.pfeillink svg { transition: transform var(--dauer) var(--easing); }
.pfeillink:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Kopfbereich
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background var(--dauer) var(--easing-weich),
              box-shadow var(--dauer) var(--easing-weich),
              padding var(--dauer) var(--easing-weich);
  padding-block: var(--raum-4);
}

/* Über dem Heldenbild schwebt der Kopf transparent, ab dem ersten Scrollen
   legt er sich als weiße Leiste darüber. Die Klasse setzt kopf.js. */
.kopf--fest {
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--schatten-sm);
  /* Etwas mehr Luft als die 12px von zuvor: Seit die Logodatei getrimmt ist,
     steht dort die Zeichnung selbst und nicht mehr ein Kasten, der oben und
     unten Leerraum mitbrachte. Ohne diesen Zuschlag klebte die Marke am
     Rand der Leiste. Die Gesamthöhe der Leiste bleibt dabei gleich. */
  padding-block: 0.875rem;
}

/* Solange das Menü offen ist, KEIN backdrop-filter.
 *
 * Ein Element mit backdrop-filter wird zum Bezugsrahmen für alles, was
 * darin `position: fixed` ist -- auch dann, wenn es das gar nicht sein
 * soll. Die Menüfläche liegt im <header>; mit Filter bezog sich ihr
 * `inset: 0` auf die Kopfleiste statt auf das Fenster. Nachgemessen war
 * sie dadurch 72 Pixel hoch statt 900, und die Einträge standen in weisser
 * Schrift auf der weissen Seite darunter.
 *
 * Auf Unterseiten trat das immer auf: Ohne Heldenbild trägt die Leiste von
 * der ersten Sekunde an `kopf--fest`. Auf der Startseite erst nach den
 * ersten 48 gescrollten Pixeln -- was das Ganze schwer zu bemerken machte.
 *
 * Verzichten kostet nichts: Über der Leiste liegt dann die deckende blaue
 * Fläche, es gibt nichts mehr zu verwischen.
 */
.kopf.kopf--menue {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-6);
}

.kopf__logo { position: relative; z-index: 110; display: block; flex-shrink: 0; }

/* Über dem Heldenbild steht das Logo gross -- es ist dort das erste, was man
   sieht, und sitzt genau vor dem Sonnenschein im Bild. Sobald gescrollt wird,
   schrumpft es in die schmale Leiste. Der Schatten hält die weisse Fassung
   auch über dem hellen Lichtschein lesbar. */
/* Die Werte beziehen sich seit dem Trimmen der Datei auf die ZEICHNUNG,
   nicht mehr auf einen Kasten, der zu 39.5 % leer war. Bei gleicher Zahl
   erscheint das Logo dadurch rund zwei Drittel grösser -- die Angaben
   hier sind zusätzlich angehoben. */
.kopf__logo img {
  height: clamp(3.15rem, 1.98rem + 4.95vw, 5.85rem);   /* 10 % kleiner */
  width: auto;
  filter: drop-shadow(0 2px 14px rgb(0 25 45 / 0.55));
  transition: height var(--dauer-langsam) var(--easing),
              opacity var(--dauer) var(--easing-weich),
              filter var(--dauer) var(--easing-weich);
}

/* Beim Scrollen auf gut ein Drittel zusammen — der Sprung soll deutlich
   sichtbar sein, nicht bloss zu ahnen. */
.kopf--fest .kopf__logo img {
  height: clamp(2.25rem, 1.935rem + 1.53vw, 3.375rem);   /* 10 % kleiner */
  filter: none;
}

/* Zwei Logofassungen übereinander: die negative liegt über dem Bild, die
   positive erscheint, sobald die Leiste weiß wird. */
.kopf__logo { position: relative; }
.kopf__logo .logo--positiv { position: absolute; inset: 0; opacity: 0; }
.kopf--fest .logo--positiv { opacity: 1; }
.kopf--fest .logo--negativ { opacity: 0; }

.navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--raum-4), 0.5rem + 1.4vw, var(--raum-7));
}

.navigation a {
  position: relative;
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text-invers);
  padding-block: var(--raum-3);
  /* Absicherung für helle Stellen im Heldenbild; in der weissen Leiste weg. */
  text-shadow: 0 1px 10px rgb(0 25 45 / 0.62);
  transition: color var(--dauer) var(--easing-weich),
              text-shadow var(--dauer) var(--easing-weich);
}

.kopf--fest .navigation a { color: var(--grau-700); text-shadow: none; }

.navigation a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--marke-gelb);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dauer) var(--easing);
}
.navigation a:hover::after,
.navigation a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.navigation a:hover { color: var(--farbe-text-invers); }
.kopf--fest .navigation a:hover { color: var(--farbe-akzent); }


/* Burger */
.burger {
  position: relative;
  z-index: 110;          /* über der blauen Menüfläche */
  display: block;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
/* Die drei Striche sitzen absolut, jeweils bezogen auf die Mitte der
   Schaltfläche. Vorher standen sie als Grid-Kinder mit margin untereinander
   und mussten beim Öffnen um genau den Zeilenabstand verschoben werden --
   stimmte der Wert nicht aufs Pixel, ergab das statt eines Kreuzes einen
   Pfeil. Mit `top: 50%` für beide Striche treffen sie sich immer. */
.burger__strich {
  position: absolute;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  background: var(--farbe-text-invers);
  border-radius: 2px;
  transition: top var(--dauer) var(--easing),
              rotate var(--dauer) var(--easing),
              opacity var(--dauer-schnell) var(--easing-weich),
              background var(--dauer) var(--easing-weich);
}

.burger__strich:nth-child(1) { top: calc(50% - 9px); }
.burger__strich:nth-child(2) { top: calc(50% - 1px); }
.burger__strich:nth-child(3) { top: calc(50% + 7px); }

.kopf--fest .burger__strich { background: var(--grau-900); }

.burger[aria-expanded='true'] .burger__strich:nth-child(1) {
  top: calc(50% - 1px);
  rotate: 45deg;
}
.burger[aria-expanded='true'] .burger__strich:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__strich:nth-child(3) {
  top: calc(50% - 1px);
  rotate: -45deg;
}
/* Im geöffneten Zustand liegt das Kreuz auf der blauen Fläche -- immer weiss,
   auch wenn die Kopfleiste darunter schon weiss geworden ist. */
.burger[aria-expanded='true'] .burger__strich { background: var(--farbe-text-invers); }

@media (max-width: 900px) {
  /* Vollflächiges Menü: Die Seite färbt sich blau ein, darauf stehen die
     Einträge gross und ruhig untereinander. Bewusst als Fläche und nicht als
     Schublade -- auf dem Telefon soll nichts vom Ziel ablenken. */
  .navigation {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    background: var(--blau-800);
    opacity: 0;
    visibility: hidden;
    /* Sichtbarkeit erst am Ende zurücknehmen, sonst verschwindet die Fläche
       schlagartig statt auszublenden. */
    transition: opacity var(--dauer) var(--easing-weich),
                visibility 0s linear var(--dauer);
  }

  .navigation[data-offen='true'] {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dauer) var(--easing-weich), visibility 0s;
  }

  .navigation ul {
    flex-direction: column;
    align-items: center;
    gap: var(--raum-6);
    text-align: center;
  }

  .navigation a {
    font-size: var(--text-2xl);
    font-family: var(--schrift-display);
    font-weight: var(--gewicht-kopf);
    letter-spacing: var(--laufweite-kopf);
    text-transform: none;
    color: var(--farbe-text-invers);
    text-shadow: none;
    padding-block: var(--raum-2);
  }
  .kopf--fest .navigation a { color: var(--farbe-text-invers); }

  /* Im offenen Menü bleibt die Schrift weiss -- auch beim Überfahren.
   *
   * Für die Leiste am oberen Rand gilt weiter oben: Ist sie weiss geworden,
   * färbt sich der überfahrene Eintrag ins Markenblau. Auf der blauen
   * Menüfläche ist genau das dieselbe Farbe wie der Grund dahinter, und der
   * Eintrag verschwindet -- sichtbar blieb nur sein gelber Unterstrich.
   *
   * Die Regel dort ist spezifischer als die Grundfarbe hier (0,3,1 gegen
   * 0,2,1) und gewinnt deshalb auch innerhalb dieses Medienblocks. Sie muss
   * mit demselben Selektor überschrieben werden, nicht mit einem schwächeren.
   *
   * Rückmeldung beim Überfahren gibt der gelbe Unterstrich, der ohnehin
   * einläuft. Das genügt und bleibt lesbar. */
  .kopf--fest .navigation a:hover,
  .navigation a:hover,
  .navigation a:focus-visible { color: var(--farbe-text-invers); }

  .navigation a::after { background: var(--marke-gelb); height: 3px; }

  /* Die Einträge kommen einzeln nach, sobald die Fläche steht. */
  .navigation[data-offen='true'] li {
    animation: einblenden-hoch 520ms var(--easing) backwards;
  }
  .navigation[data-offen='true'] li:nth-child(1) { animation-delay: 120ms; }
  .navigation[data-offen='true'] li:nth-child(2) { animation-delay: 180ms; }
  .navigation[data-offen='true'] li:nth-child(3) { animation-delay: 240ms; }
  .navigation[data-offen='true'] li:nth-child(4) { animation-delay: 300ms; }
  .navigation[data-offen='true'] li:nth-child(5) { animation-delay: 360ms; }
}

@media (min-width: 901px) {
  .burger { display: none; }
}

/* --------------------------------------------------------------------------
   Heldenbereich
   -------------------------------------------------------------------------- */

.held {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid;
  align-items: center;
  color: var(--farbe-text-invers);
  overflow: hidden;
  isolation: isolate;
}


.held__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.held__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Links oben verankert: Auf schmalen Fenstern beschneidet cover die Seiten,
     und der Sonnenschein in der linken oberen Ecke soll dabei stehen bleiben --
     er ist der Bezug zum Namen und zum Sonnenzeichen im Logo. */
  object-position: left top;
  /* Sehr langsamer Zoom — fällt nicht auf, nimmt dem Standbild aber die Härte */
  animation: langsam-zoomen 24s var(--easing-weich) both;
}

/* Der Schleier muss zwei Dinge zugleich leisten: Text lesbar halten UND den
   warmen Lichtschein oben links stehen lassen. Der gehört zur Bildwirkung --
   die Sonne im Bild greift den Namen und das Sonnenzeichen im Logo auf, das
   Logo steht bewusst genau davor. Ein durchgehender dunkler Keil über die
   Kopfzeile würde ihn auslöschen.
   Darum:
   1. eine Ellipse, die die obere linke Ecke ausspart und erst daneben
      abdunkelt — die Navigation rechts bekommt so ihren dunklen Grund,
      die Sonne links bleibt frei,
   2. eine Grundabdunklung, unten kräftiger, für die Fliesstexte,
   3. ein diagonaler Farbschleier, der die Bildmitte zur Marke hin zieht.
   Logo und Navigation tragen zusätzlich einen Schatten, damit sie auch dann
   stehen, wenn das Bild an ihrer Stelle einmal hell ist. */
/* Alle Deckungen auf 75 % der ursprünglichen Werte -- der Schleier lag zu
   schwer auf dem Foto. Nachgerechnet: Das Bild selbst hat hinter dem Titel
   eine Leuchtdichte von 0.61, weisse Schrift käme dort ohne Schleier auf
   1.6:1 und wäre unlesbar. Mit den abgeschwächten Werten stehen im Mittel
   6.5:1 (vorher 8.4:1); an der hellsten Stelle des Bildes 2.3:1, was der
   Schattenwurf der Schrift auffängt. */
.held__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 52% 46% at 9% -4%,
      transparent 0%,
      transparent 46%,
      rgb(0 30 55 / 0.345) 100%),
    /* Oben bewusst bei transparent beginnen. Läge hier auch nur eine
       schwache Deckschicht, überschriebe ihr Blau den warmen Lichtton --
       genau das hatte den Sonnenschein vorher verschluckt. */
    linear-gradient(to bottom,
      transparent 0%,
      rgb(0 40 70 / 0.135) 24%,
      rgb(0 40 70 / 0.315) 58%,
      rgb(0 40 70 / 0.525) 100%),
    /* 300deg statt 120deg: Der Farbschleier zieht jetzt von unten rechts
       herein statt aus der oberen linken Ecke -- dort lag sein dichtestes
       Ende bisher genau auf dem Sonnenschein. */
    linear-gradient(300deg,
      rgb(0 63 102 / 0.375) 0%,
      rgb(0 90 150 / 0.135) 55%,
      transparent 100%);
}

/* Mittig gesetzt wie auf der bisherigen Seite — dort steht der ganze
   Heldenblock zentriert, und diese Anmutung soll erhalten bleiben.
   Oben genug Luft für die grosse Kopfleiste, unten für den Scroll-Hinweis. */
.held__inhalt {
  padding-block: clamp(7rem, 4.5rem + 10vw, 12rem) clamp(3rem, 1.5rem + 6vw, 7rem);
  text-align: center;

  /* Weicher Schattenwurf über allen Texten des Einstiegs.
     Er wirkt nicht als Effekt -- man sieht ihn nicht --, sondern hält die
     Buchstaben über hellen Stellen des Fotos ablesbar. Seit der Schleier
     um ein Viertel schwächer ist, sind das an der hellsten Stelle 2.3:1
     ohne diese Absicherung. */
  text-shadow: 0 1px 12px rgb(0 25 45 / 0.55);
}

/* Alles, was eine eigene Breite hat, muss zum Zentrieren selbst mittig
   ausgerichtet werden — text-align allein reicht dafür nicht. */
.held__titel,
.held__zusatz { margin-inline: auto; }


.held__augenbraue {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
  margin-bottom: var(--raum-5);
}

.held__titel {
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-held);
  max-width: 16ch;
}
.held__titel strong {
  display: block;
  font-weight: var(--gewicht-held);
}

/* Die Merkzeile steht auf einer gelben Grundlinie statt in gelber Schrift --
   Markengelb hat auf hellem Grund nur 1.52:1 und ist als Text unlesbar. */
.held__unterzeile {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--farbe-text-invers);
  margin-top: var(--raum-5);
  padding-bottom: var(--raum-2);
  border-bottom: 3px solid var(--marke-gelb);
}

.held__zusatz {
  font-size: var(--text-lg);
  color: rgb(255 255 255 / 0.85);
  margin-top: var(--raum-5);
  max-width: 42ch;
}

/* Gruppe nebeneinanderstehender Schaltflächen. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-4);
}


@media (max-width: 600px) {
  
}

/* --------------------------------------------------------------------------
   Raster und Karten
   -------------------------------------------------------------------------- */

/* Zwei Spalten, die auf schmalen Schirmen untereinander rutschen. */
.zweispalt {
  display: grid;
  gap: var(--raum-10);
  /* Senkrecht mittig: Die beiden Spalten sind unterschiedlich hoch, oben
     ausgerichtet wirkt die kürzere davon nach oben gerutscht. */
  align-items: center;
}

@media (min-width: 900px) {
  .zweispalt { grid-template-columns: 1fr 1fr; gap: var(--raum-12); }
  /* Beim Zitat trägt links nur das Label, rechts steht der Satz. */
  .zweispalt--zitat { grid-template-columns: minmax(0, 15rem) 1fr; }
}

.raster {
  display: grid;
  gap: var(--raum-6);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Ohne Deckel stünden auf einem 27-Zoll-Schirm alle fünf Leistungen in einer
   Reihe und wirkten wie eine Aufzählung dünner Streifen. Drei Spalten geben
   jeder Karte genug Fläche; die letzte Reihe bleibt linksbündig. */
@media (min-width: 1100px) {
  .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
@media (min-width: 1100px) {
  .raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   Leistungsliste

   Bewusst keine Kacheln mit Rahmen und Schatten: Fünf gleich grosse Boxen
   nebeneinander sind das Standardmuster jedes Baukastens und sagen über die
   Inhalte nichts aus. Eine gesetzte Liste mit Haarlinien, grosser Überschrift
   und viel Raum wirkt ruhiger und liest sich schneller -- und die Reihenfolge
   der Leistungen wird zur Aussage statt zum Zufall des Rasters.
   -------------------------------------------------------------------------- */

.leistungsliste { border-top: 1px solid var(--farbe-rand); }

.leistung {
  position: relative;
  display: grid;
  gap: var(--raum-2) var(--raum-6);
  padding-block: var(--raum-6);
  border-bottom: 1px solid var(--farbe-rand);
  transition: border-color var(--dauer) var(--easing-weich);
}

@media (min-width: 860px) {
  .leistung {
    grid-template-columns: 3.5rem minmax(0, 20rem) minmax(0, 1fr) 2rem;
    align-items: start;
    padding-block: var(--raum-7);
  }

  /* Ohne Beschreibung fällt eine Spalte weg: Nummer, Titel, Pfeil. Der
     Titel bekommt den frei gewordenen Platz, beginnt aber an derselben
     Stelle wie auf der Leistungsseite -- beide Ansichten fluchten. */
  .leistungsliste--kompakt .leistung {
    grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
    align-items: center;
    padding-block: var(--raum-6);
  }
  .leistungsliste--kompakt .leistung__nummer { padding-top: 0; }
  .leistungsliste--kompakt .leistung__pfeil { padding-top: 0; }
}

.leistung__nummer {
  font-family: var(--schrift-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  color: var(--farbe-text-leise);
  padding-top: 0.45em;      /* auf die Grundlinie des Titels bringen */
  transition: color var(--dauer) var(--easing-weich);
}

.leistung__titel {
  font-size: var(--text-xl);
  transition: color var(--dauer) var(--easing-weich);
}

/* Die ganze Zeile klickbar, ohne verschachtelte Links */
.leistung__titel a::after { content: ''; position: absolute; inset: 0; }

.leistung__text {
  color: var(--grau-700);
  max-width: 46ch;
}

.leistung__pfeil {
  display: none;
  color: var(--farbe-text-leise);
  padding-top: 0.35em;
  transition: transform var(--dauer) var(--easing),
              color var(--dauer) var(--easing-weich);
}

@media (min-width: 860px) {
  .leistung__pfeil { display: block; justify-self: end; }
}

/* Beim Überfahren färbt sich die Trennlinie in der Markenfarbe, der Titel
   nimmt das Blau auf und der Pfeil wandert. Kein Kasten, kein Schatten. */
.leistung:hover,
.leistung:focus-within { border-bottom-color: var(--marke-gelb); }
.leistung:hover .leistung__titel,
.leistung:focus-within .leistung__titel { color: var(--farbe-akzent); }
.leistung:hover .leistung__nummer,
.leistung:focus-within .leistung__nummer { color: var(--farbe-akzent); }
.leistung:hover .leistung__pfeil,
.leistung:focus-within .leistung__pfeil {
  transform: translateX(5px);
  color: var(--farbe-akzent);
}


/* Die Ordnungsziffer war in Grau-300 mit 1.48:1 praktisch unsichtbar und sah
   nach Fehler statt nach Absicht aus. Jetzt ein klar gesetztes Element:
   kleiner, kräftiger, mit gesperrter Laufweite. */
.karte__nummer {
  font-family: var(--schrift-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  color: var(--farbe-text-leise);
  margin-bottom: var(--raum-4);
  transition: color var(--dauer) var(--easing-weich);
}


/* Die ganze Karte klickbar machen, ohne verschachtelte Links */
.karte__deckel::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   Kopfbereich der Unterseiten
   -------------------------------------------------------------------------- */

/* Die Kopfleiste liegt fest über der Seite, darum braucht der erste Abschnitt
   Abstand nach oben. Nach unten deutlich weniger: Zwischen Titel und erstem
   Inhalt sollen keine leeren Bildschirmhöhen stehen. */
/* Ohne Trennlinie und ohne Farbwechsel: Der Kopf geht unsichtbar in den
   Inhalt über. Eine Kante quer über die Seite zerschneidet sie nur. */
.seitenkopf {
  padding-block: calc(var(--raum-16) + 3.5rem) var(--raum-12);
}

/* --------------------------------------------------------------------------
   Kennzahlen
   -------------------------------------------------------------------------- */

.kennzahlen {
  display: grid;
  gap: var(--raum-6);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Der gelbe Strich ist ein Pseudo-Element und keine border-left: nur so
   lässt er sich beim Erscheinen von oben einlaufen lassen. */
.kennzahl { position: relative; padding-left: var(--raum-5); }
.kennzahl::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  border-radius: var(--radius-rund);
  background: var(--marke-gelb);
}

.kennzahl__wert {
  font-family: var(--schrift-display);
  font-size: var(--text-3xl);
  font-weight: var(--gewicht-held);
  line-height: 1;
  letter-spacing: var(--laufweite-held);
  color: var(--farbe-akzent);
}

.kennzahl__text {
  margin-top: var(--raum-2);
  font-size: var(--text-sm);
  color: var(--grau-700);
}

.abschnitt--tief .kennzahl__wert { color: var(--marke-gelb); }
.abschnitt--tief .kennzahl__text { color: rgb(255 255 255 / 0.78); }
.abschnitt--tief .kennzahl { border-left-color: rgb(255 255 255 / 0.25); }

/* --------------------------------------------------------------------------
   Unternehmensvision im Seitenkopf

   Ein fortlaufender Absatz in gewöhnlicher Fliesstextgrösse. Eine frühere
   Fassung setzte das Zitat als abgesetzten Block mit gelber Linie und
   eigener Zeile für die Zuschreibung -- drei Ebenen für drei Sätze, und der
   Seitenkopf wurde dadurch doppelt so hoch.
   -------------------------------------------------------------------------- */

.vision {
  margin-top: var(--raum-6);
  color: var(--grau-700);
}

/* Die Zuschreibung läuft im Satz mit, tritt aber eine Spur zurück -- sie
   gehört zum Zitat, ist aber nicht Teil der Aussage.

   Kein white-space: nowrap. Der erste Versuch hielt die Zeile zusammen und
   ragte auf dem Telefon 59px aus der Spalte -- „Peter Meyer, Geschäftsführer
   Sonnenberg Consulting" ist für eine Zeile schlicht zu lang. */
.vision__quelle { color: var(--farbe-text-leise); }


/* --------------------------------------------------------------------------
   Zitat (für dunkle Abschnitte)
   -------------------------------------------------------------------------- */

/* Breite in rem, nicht in ch: ch bezöge sich auf die geerbte Schriftgröße
   dieses Elements, nicht auf die grosse Zitatschrift darin -- das Zitat
   bräche dann viel zu früh um. */
.zitat { max-width: 44rem; margin: 0; }


/* --------------------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------------------- */

.hinweis {
  padding: var(--raum-5) var(--raum-6);
  border-radius: var(--radius);
  border-left: 4px solid;
  margin-bottom: var(--raum-6);
}
.hinweis > * + * { margin-top: var(--raum-2); }

.hinweis--gut {
  background: #ecfdf5;
  border-color: #059669;
  color: #064e3b;
}
.hinweis--fehler {
  background: #fef2f2;
  border-color: #dc2626;
  color: #7f1d1d;
}

.feld__fehler {
  margin-top: var(--raum-2);
  font-size: var(--text-sm);
  color: #b91c1c;
}
.feld input[aria-invalid='true'],
.feld textarea[aria-invalid='true'] { border-color: #dc2626; }

/* --------------------------------------------------------------------------
   Blogliste
   -------------------------------------------------------------------------- */

.beitrag {
  display: flex;
  flex-direction: column;
  background: var(--farbe-grund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dauer) var(--easing),
              box-shadow var(--dauer) var(--easing);
  position: relative;
}
.beitrag:hover { transform: translateY(-4px); box-shadow: var(--schatten-lg); }

/* Alle Beiträge trugen in WordPress dasselbe Bild — das Firmensignet. Acht
   gleiche Kacheln nebeneinander sähen wie ein Fehler aus, darum bleibt die
   Kachel ohne Bild. Statt einer riesigen blassen Jahreszahl (die mit 1.23:1
   nur wie ein Darstellungsfehler wirkte) markiert ein gelber Strich den Kopf.
   Sobald es echte Beitragsbilder gibt, greift der Bildzweig wieder. */
.beitrag__kopfzone {
  padding: var(--raum-6) var(--raum-6) 0;
}
.beitrag__strich {
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: var(--radius-rund);
  background: var(--marke-gelb);
}

.beitrag__bild {
  aspect-ratio: 16 / 10;
  background: var(--grau-100);
  overflow: hidden;
}
.beitrag__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dauer-langsam) var(--easing);
}
.beitrag:hover .beitrag__bild img { transform: scale(1.04); }

/* Der gelbe Strich oben wie bei .karte */
.beitrag::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--marke-gelb);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-langsam) var(--easing);
  z-index: 1;
}
.beitrag:hover::before,
.beitrag:focus-within::before { transform: scaleX(1); }

.beitrag__koerper {
  padding: var(--raum-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.beitrag__meta {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--text-xs);
  color: var(--farbe-text-leise);
  margin-bottom: var(--raum-3);
}
.beitrag__meta time { letter-spacing: 0.04em; }
.beitrag__punkt { width: 3px; height: 3px; border-radius: 50%; background: var(--grau-300); }

.beitrag__titel {
  font-size: var(--text-xl);
  margin-bottom: var(--raum-3);
}
.beitrag__titel a::after { content: ''; position: absolute; inset: 0; }

.beitrag__teaser { color: var(--grau-700); flex-grow: 1; }
.beitrag__mehr { margin-top: var(--raum-5); }

/* --------------------------------------------------------------------------
   Kundenstimmen
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Kundenstimmen

   Keine Kacheln: Die Aussagen sind unterschiedlich lang, in gleich grossen
   Kästen erzeugt das entweder Leerraum oder abgeschnittenen Text. Als
   Zitatstrecke gesetzt -- links wer es sagt, rechts was gesagt wurde, dazwischen
   nur Haarlinien -- darf jedes Zitat seine natürliche Länge behalten.
   -------------------------------------------------------------------------- */

.stimmenstrecke { border-top: 1px solid var(--farbe-rand); }

.stimme {
  display: grid;
  gap: var(--raum-5);
  padding-block: var(--raum-8);
  border-bottom: 1px solid var(--farbe-rand);
  /* Beim Sprung aus dem Adminbereich („Ansehen") soll die Stimme unter der
     festen Kopfleiste stehen, nicht dahinter. */
  scroll-margin-top: 7rem;
}

@media (min-width: 900px) {
  .stimme {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--raum-10);
    padding-block: var(--raum-10);
  }
}

/* Linke Spalte: wer spricht. Mittig gesetzt -- so steht das Logo über dem
   Namen und nicht daneben angeschnitten. */
.stimme__quelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--raum-4);
}

/* Kundenlogo, sobald eines hinterlegt ist. Graustufig und zurückgenommen,
   damit die Logos die Seite nicht bunt sprenkeln; beim Überfahren in Farbe. */
/* Die Logos haben sehr unterschiedliche Seitenverhältnisse -- von breit und
   flach (Rauch Transporte) bis fast quadratisch (Valavier). Ein fester
   Rahmen mit `contain` gibt jedem denselben Platz, ohne eines zu
   beschneiden oder zu verzerren. */
.stimme__logo {
  width: 100%;
  max-width: 11rem;
  height: 4.5rem;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--dauer) var(--easing-weich),
              opacity var(--dauer) var(--easing-weich);
}
.stimme:hover .stimme__logo { filter: grayscale(0); opacity: 1; }

/* Ausrichtung einzelner Logos.
 *
 * Beim Logo der Apotheke Nenzing sitzt die Zeichnung nicht in der Mitte der
 * Datei: links 1 Pixel Rand, rechts 51 -- die Zeichnung steht also 26 von
 * 320 Pixeln zu weit links und wirkt im gleichmässigen Raster der
 * Kundenstimmen verrutscht.
 *
 * Ein früherer Versuch schnitt den Leerraum aus der Datei. Das ist der
 * falsche Ort: Die Datei ist das Logo, wie es die Firma herausgegeben hat,
 * und beim nächsten Austausch wäre der Beschnitt wieder fällig. Verschoben
 * wird deshalb nur die Darstellung.
 *
 * 8.1 % entsprächen den gemessenen 26 von 320 Pixeln und stellten die
 * Zeichnung genau mittig -- nachgerechnet lag ihre Mitte danach auf 155.2,
 * die Spaltenmitte auf 155.0. Auf Wunsch steht sie jetzt bewusst weiter
 * rechts, in mehreren Schritten eingegrenzt:
 *   8.1 %  rechnerisch mittig
 *  29.6 %  ein Zentimeter weiter -- zu viel
 *  18.9 %  die Hälfte davon zurück
 *  13.5 %  halber Schritt zurück nach links   (-5.4)
 *  10.8 %  und davon nochmals die Hälfte       (-2.7)
 *
 * Damit steht die Zeichnung 2.7 Punkte rechts der rechnerischen Mitte --
 * in der Anzeige rund fünf Pixel.
 *
 * Als Prozentwert stimmt das Verhältnis in jeder Grösse -- auf dem Telefon
 * wie auf einem grossen Schirm.
 */
.stimme__logo[src*="/apotheke-nenzing."] { transform: translateX(10.8%); }

/* Rückfall ohne Logo: Initialen in einem Kreis. Besser als eine leere Stelle
   und besser als ein fremdes Platzhalterbild. Dieselbe Höhe wie ein Logo,
   damit die Zeilen der Strecke gleich hoch beginnen. */
.stimme__initialen {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-block: 0.5rem;
  border-radius: 50%;
  background: var(--grau-100);
  color: var(--farbe-akzent);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}

.stimme__name {
  font-family: var(--schrift-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--laufweite-kopf);
  color: var(--farbe-text);
}
.stimme__rolle {
  font-size: var(--text-sm);
  color: var(--farbe-text-leise);
  margin-top: var(--raum-1);
}

/* Rechte Spalte: das Zitat, etwas grösser als Fließtext gesetzt. */
.stimme__text {
  font-size: var(--text-lg);
  color: var(--grau-700);
  max-width: 60ch;
}
.stimme__text p + p { margin-top: var(--raum-4); }


/* Lange Zitate einklappen, damit die Liste ruhig bleibt */
.stimme__text--gekuerzt {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.person {
  display: grid;
  gap: var(--raum-6);
  align-items: start;
}

@media (min-width: 720px) {
  .person { grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--raum-8); }
}

.person__bild {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--grau-100);
  box-shadow: var(--schatten);
}
.person__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform var(--dauer-langsam) var(--easing);
}
.person:hover .person__bild img { transform: scale(1.03); }

.person__rolle {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: var(--raum-2);
}
.person__name { font-size: var(--text-3xl); margin-bottom: var(--raum-4); }
.person__text { color: var(--grau-700); }
.person__text > * + * { margin-top: var(--raum-4); }

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.kontakt-raster {
  display: grid;
  gap: var(--raum-10);
}
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: 1fr 1fr; gap: var(--raum-12); }
}

.feld { margin-bottom: var(--raum-5); }
.feld label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--raum-2);
}
.feld input,
.feld textarea {
  width: 100%;
  padding: var(--raum-3) var(--raum-4);
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-grund);
  transition: border-color var(--dauer-schnell) var(--easing-weich),
              box-shadow var(--dauer-schnell) var(--easing-weich);
}
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgb(0 90 150 / 0.12);
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld__hinweis { font-size: var(--text-xs); color: var(--farbe-text-leise); margin-top: var(--raum-2); }

/* Honigtopf gegen Formular-Spam: für Menschen unsichtbar, für Bots verlockend. */
.honigtopf {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Die Kontaktangaben laufen beim Scrollen mit: Wer das Formular ausfüllt und
   sich anders entscheidet, hat Telefonnummer und Adresse weiter im Blick,
   statt wieder nach oben scrollen zu müssen. */
/* Die Kontaktangaben laufen beim Scrollen des Formulars mit.
   `align-self: start` ist dabei entscheidend: Ohne diese Zeile streckt das
   Raster die Spalte auf die volle Zeilenhöhe. Ein Element, das ohnehin so
   hoch ist wie sein Container, hat keinen Weg zum Kleben -- `position:
   sticky` bleibt dann wirkungslos, ohne dass der Browser etwas meldet. */
.kontaktspalte {
  position: sticky;
  top: calc(var(--raum-16) + 1.5rem);
  align-self: start;
}

@media (max-width: 899px) {
  .kontaktspalte { position: static; }
}

/* Keine Symbole in grauen Kästchen -- die sehen auf jeder zweiten Website
   gleich aus und tragen nichts bei. Die Angaben stehen für sich, gegliedert
   durch Haarlinien und eine kleine Bezeichnung darüber. */
.kontaktdaten li {
  padding-block: var(--raum-4);
  border-bottom: 1px solid var(--farbe-rand);
}
.kontaktdaten li:first-child { padding-top: 0; }

.kontaktdaten__bezeichnung {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--farbe-text-leise);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  margin-bottom: var(--raum-2);
}

.kontaktdaten__wert {
  font-family: var(--schrift-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--laufweite-kopf);
  color: var(--farbe-text);
  transition: color var(--dauer-schnell) var(--easing-weich);
}

.kontaktdaten a { display: block; }
.kontaktdaten a:hover .kontaktdaten__wert { color: var(--farbe-akzent); }

.kontaktdaten__zusatz {
  font-size: var(--text-sm);
  color: var(--farbe-text-leise);
  margin-top: var(--raum-1);
}

/* --------------------------------------------------------------------------
   Angabenliste (Impressum)
   -------------------------------------------------------------------------- */

.angaben__zeile {
  display: grid;
  gap: var(--raum-1);
  padding-block: var(--raum-4);
  border-bottom: 1px solid var(--farbe-rand);
}
.angaben__zeile dt {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}
.angaben__zeile dd { margin: 0; }
.angaben__zeile a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 720px) {
  .angaben__zeile {
    grid-template-columns: 15rem 1fr;
    gap: var(--raum-6);
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   Häufige Fragen (Leistungen)
   Frage und Antwort untereinander, eine Haarlinie zwischen den Einträgen --
   dieselbe Ruhe wie die Angaben im Impressum, nur mit der Frage als
   Überschrift statt als Rubrik. Bewusst ohne Aufklappen: Was eine
   Antwortmaschine zitieren soll, muss auch ein Mensch ohne Klick lesen
   können, und sechs kurze Antworten brauchen keine Verstecke.
   -------------------------------------------------------------------------- */
.fragen { margin: 0; }
.fragen__eintrag {
  padding-block: var(--raum-5);
  border-top: 1px solid var(--farbe-rand);
}
.fragen__eintrag:last-child { border-bottom: 1px solid var(--farbe-rand); }
.fragen__frage {
  font-family: var(--schrift-display);
  font-weight: var(--gewicht-kopf);
  font-size: var(--text-lg);
  letter-spacing: var(--laufweite-kopf);
  line-height: var(--zeilenhoehe-kopf);
  color: var(--farbe-text);
}
.fragen__antwort {
  margin: var(--raum-2) 0 0;
  max-width: var(--breite-text);
  color: var(--grau-700);
}

/* --------------------------------------------------------------------------
   Fußbereich
   -------------------------------------------------------------------------- */

.fuss {
  background: var(--farbe-flaeche-tief);
  color: rgb(255 255 255 / 0.75);
  padding-block: var(--raum-12) var(--raum-6);
}

/* Vier gleich breite Spalten mit gleichem Abstand -- auch zum Rand, denn den
   stellt bereits .inhalt. Mit repeat(auto-fit, minmax(...)) verteilte der
   Browser den Rest ungleich, die Kontaktspalte rutschte dadurch nach rechts
   aussen und der Fuss wirkte schief. */
.fuss__raster {
  display: grid;
  gap: var(--raum-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--raum-8);
}

@media (min-width: 640px) {
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .fuss__raster {
    /* Nicht vier gleiche Spalten: „Unternehmen" enthält kurze Links
       („Über uns", „Blog") und liess 186 von 317 Pixeln ungenutzt. Der
       optische Abstand zur Kontaktspalte betrug dadurch 219 Pixel gegenüber
       80 und 88 zwischen den übrigen. Schmaler gesetzt rücken alle vier
       gleichmässig zusammen. */
    grid-template-columns: 1fr 1fr 0.45fr 1fr;
    gap: var(--raum-6);
  }
}

.fuss__logo img { height: 3.825rem; width: auto; margin-bottom: var(--raum-5); }   /* 15 % kleiner */

.fuss h2 {
  font-family: var(--schrift-text);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-invers);
  margin-bottom: var(--raum-4);
}

/* Nur die senkrechten Spaltenlisten bekommen Abstand nach oben. Ohne diese
   Einschränkung erwischt die Regel auch die waagrechte Rechtliches-Zeile und
   schiebt dort jeden Eintrag ab dem zweiten um 4px nach unten -- Impressum
   und Datenschutz stünden dann sichtbar versetzt. */
.fuss__raster li + li { margin-top: var(--raum-1); }

/* Die Links im Fuss bekommen Höhe, damit sie sich auch am Telefon treffen
   lassen. Ohne das Polster sind sie nur zeilenhoch (21px) und liegen unter
   dem Mindestmass von 24px aus WCAG 2.2. */
.fuss a {
  display: inline-block;
  padding-block: var(--raum-2);
  transition: color var(--dauer-schnell) var(--easing-weich);
}
.fuss a:hover { color: var(--marke-gelb); }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--raum-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--text-sm);
}
.fuss__rechtliches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-5);
}

/* Der Login-Link tritt noch weiter zurück als die übrigen Fusslinks --
   sichtbar für den, der ihn sucht, ohne Besucher zu beschäftigen. */
/* 0.62 statt 0.4: Bei 0.4 ergab die Farbe auf dem Blau der Fusszeile 3.07:1
   und war der einzige Punkt, an dem die Seite die Barrierefreiheitsprüfung
   nicht bestand (gemessen mit Lighthouse auf jeder Seite). 0.62 ergibt 5.23:1
   -- deutlich über den geforderten 4.5:1 und immer noch zurückgenommener als
   die übrigen Verweise daneben. */
.fuss__redaktion { color: rgb(255 255 255 / 0.62); }
.fuss__redaktion:hover { color: rgb(255 255 255 / 0.9); }

/* --------------------------------------------------------------------------
   Bewegung
   -------------------------------------------------------------------------- */

@keyframes einblenden-hoch {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Der Einstieg zoomt beim Laden langsam heraus. Über 24 Sekunden sind das
   0.6 % je Sekunde -- man bemerkt die Bewegung nicht, sondern nur, dass das
   Bild lebt. Vorher 8 %, jetzt 15 %. */
@keyframes langsam-zoomen {
  from { transform: scale(1.15); }
  to   { transform: scale(1); }
}

@keyframes maus-tropfen {
  0%        { opacity: 0; transform: translateY(0); }
  30%       { opacity: 1; }
  70%, 100% { opacity: 0; transform: translateY(12px); }
}

/* Beim Scrollen einblenden.
   ENTSCHEIDEND ist der `.js`-Vorsatz: Die Startwerte gelten nur, wenn das
   Inline-Skript im <head> gelaufen ist. Ohne JavaScript -- und für jeden
   Crawler, der keines ausführt -- greift keine dieser Regeln und die Seite
   ist vollständig sichtbar. Ohne diesen Vorsatz bliebe sie schlicht weiss.
   Verschiebung und Dauer sind bewusst klein: Die Bewegung soll auffallen,
   wenn man darauf achtet, und sonst nicht im Weg sein. */
.js [data-reveal],
.js [data-reveal-gruppe] > * {
  opacity: 0;
  transform: translateY(18px);
  /* Die Deckkraft läuft weich und kürzer, die Bewegung federt und länger.
     Zwei getrennte Kurven, weil ein nachschwingendes Verblassen flackert --
     sichtbar bleibt nur das Nachfedern der Verschiebung. */
  transition: opacity 420ms var(--easing-weich),
              transform 760ms var(--easing-hupf);
}

.js [data-reveal].ist-sichtbar,
.js [data-reveal-gruppe].ist-sichtbar > * {
  opacity: 1;
  transform: none;
}

/* Gestaffelte Kinder — für Raster und Listen */
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(1) { transition-delay:   0ms; }
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(2) { transition-delay:  70ms; }
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(5) { transition-delay: 280ms; }
.js [data-reveal-gruppe].ist-sichtbar > *:nth-child(6) { transition-delay: 350ms; }

/* Wer Bewegung abbestellt hat, bekommt keine. Alles bleibt bedienbar und
   vollständig sichtbar — die Reveals sind reine Zugabe. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal-gruppe] > * { opacity: 1 !important; transform: none !important; }
  .held__bild img { animation: none; }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */

@media print {
  .kopf, .fuss, .held__hinweis, .knopf { display: none; }
  body { color: #000; background: #fff; }
  .abschnitt { padding-block: 1rem; }
}

/* --------------------------------------------------------------------------
   Beitragsseite

   Der Einstieg trug vorher nur die Überschrift auf weissem Grund; das
   Titelbild kam überhaupt nicht vor. Jetzt Meta, Überschrift, Vorspann und
   Bild als zusammenhängender Kopf -- und der Fließtext eine Spur grösser
   gesetzt, weil hier tatsächlich gelesen wird.
   -------------------------------------------------------------------------- */

/* Rein typografischer Einstieg, kein Titelbild: Rubrik, Überschrift, Zeile
   mit Datum und Lesezeit, darunter eine Haarlinie zum Text. */
.beitragskopf {
  padding-block: calc(var(--raum-16) + 3.5rem) var(--raum-8);
}

.beitragskopf__rubrik {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-akzent);
  margin-bottom: var(--raum-5);
}

.beitragskopf__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-3);
  font-size: var(--text-sm);
  color: var(--farbe-text-leise);
  margin-top: var(--raum-6);
  padding-bottom: var(--raum-6);
  border-bottom: 1px solid var(--farbe-rand);
}

.beitragskopf__titel {
  font-size: var(--text-4xl);
  max-width: 18ch;
}


/* Lesetypografie: etwas grösser und luftiger als der übrige Fließtext. */
.beitragstext {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--grau-700);
  max-width: 66ch;
}
.beitragstext > * + * { margin-top: var(--raum-5); }
.beitragstext h2 {
  margin-top: var(--raum-10);
  font-size: var(--text-2xl);
  color: var(--farbe-text);
}
.beitragstext h3 {
  margin-top: var(--raum-8);
  font-size: var(--text-xl);
  color: var(--farbe-text);
}
.beitragstext a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Der erste Absatz führt in den Text und darf etwas kräftiger stehen. */
.beitragstext > p:first-child { color: var(--farbe-text); }

/* --------------------------------------------------------------------------
   Verfasser am Ende des Beitrags
   -------------------------------------------------------------------------- */

.verfasser {
  display: grid;
  gap: var(--raum-5);
  align-items: start;
  margin-top: var(--raum-12);
  padding-top: var(--raum-8);
  border-top: 1px solid var(--farbe-rand);
}

@media (min-width: 640px) {
  .verfasser { grid-template-columns: 5.5rem 1fr; gap: var(--raum-6); }
}

.verfasser__bild {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

/* Der Faktenabsatz unter der Vision -- dieselbe Breite wie der Fliesstext,
   etwas leiser als die Vision darüber. */
.vision__fakten {
  max-width: var(--breite-text);
  margin-top: var(--raum-5);
  color: var(--grau-700);
}
.vision__fakten a {
  color: var(--farbe-akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verfasser__name {
  font-family: var(--schrift-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--laufweite-kopf);
}
/* Der Name führt zur Person auf der Über-uns-Seite. Die Unterstreichung ist
   zurückgenommen, aber vorhanden: Ein Verweis, den man nur durch Überfahren
   findet, ist für Tastatur und Vorlesesoftware keiner. */
.verfasser__name a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--grau-300);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dauer) var(--easing-weich);
}
.verfasser__name a:hover,
.verfasser__name a:focus-visible { text-decoration-color: var(--farbe-akzent); }
.verfasser__text {
  color: var(--grau-700);
  margin-top: var(--raum-2);
  max-width: 52ch;
}
.verfasser__aktion { margin-top: var(--raum-4); }

/* --------------------------------------------------------------------------
   Ausklappen langer Texte

   Der Text läuft nach unten in einen weichen Verlauf aus statt hart
   abzubrechen, der Schalter steht darunter. Beim Öffnen wächst der Block
   animiert -- vorher zerschnitt ein <details> den Text in Anfang,
   Schaltfläche und Rest und schob beim Öffnen alles Nachfolgende weg.

   Das Kappen greift nur mit der .js-Klasse: Ohne JavaScript stünde sonst ein
   beschnittener Text ohne funktionierenden Schalter da. Die Höhe des offenen
   Zustands misst das Skript und setzt sie als --voll-hoehe.
   -------------------------------------------------------------------------- */

.ausklapp { --fade-farbe: var(--farbe-grund); }
.abschnitt--flaeche .ausklapp { --fade-farbe: var(--farbe-flaeche); }

.js .ausklapp__inhalt {
  position: relative;
  max-height: var(--kurz-hoehe, 8.5rem);
  overflow: hidden;
  transition: max-height 480ms var(--easing);
}

.js .ausklapp[data-offen='true'] .ausklapp__inhalt {
  max-height: var(--voll-hoehe, 200rem);
}

.js .ausklapp__inhalt::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(to bottom, transparent, var(--fade-farbe) 88%);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dauer) var(--easing-weich);
}
.js .ausklapp[data-offen='true'] .ausklapp__inhalt::after { opacity: 0; }

.ausklapp__schalter {
  display: none;
  align-items: center;
  gap: var(--raum-2);
  margin-top: var(--raum-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--farbe-akzent);
  transition: color var(--dauer-schnell) var(--easing-weich);
}
.js .ausklapp__schalter { display: inline-flex; }
.ausklapp__schalter:hover { color: var(--farbe-akzent-hover); }
.ausklapp__schalter::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate var(--dauer) var(--easing);
}
.ausklapp[data-offen='true'] .ausklapp__schalter::after {
  rotate: -135deg;
  translate: 0 2px;
}

/* Wer Bewegung abbestellt hat, bekommt den Sprung ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .js .ausklapp__inhalt { transition: none; }
}

/* Der Werdegang steht etwas abgesetzt vom einführenden Text. */
.person__werdegang { margin-top: var(--raum-5); }

/* Auf der Startseite steht neben der Quellenspalte nur ein kurzer Auszug.
   Oben ausgerichtet klebte er an der Oberkante, während links Logo, Name und
   Funktion deutlich mehr Höhe brauchen -- senkrecht mittig sitzen beide
   Spalten auf einer Linie. Auf der Detailseite bleibt es bei oben, dort ist
   der Text länger als die Quelle. */
@media (min-width: 900px) {
  .stimme--auszug { align-items: center; }
}

/* --------------------------------------------------------------------------
   Kundenstimmen auf schmalen Schirmen

   Nebeneinander stehen Quelle und Zitat in zwei Spalten -- dort ist die
   Quellenspalte für sich zentriert. Untereinander gestapelt ergibt das einen
   Bruch: erst drei zentrierte Zeilen, dann linksbündiger Fließtext. Auf dem
   Telefon steht deshalb alles an derselben Kante.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .stimme__quelle {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--raum-4);
  }
  /* Kleiner und in fester Breite, damit Name und Funktion daneben Platz
     haben und die Logos nicht die halbe Bildschirmbreite einnehmen. */
  .stimme__logo {
    width: 5.5rem;
    height: 3rem;
    flex-shrink: 0;
    object-position: left center;
  }

  /* Unter 900px stehen die Logos linksbündig nebeneinander -- da gibt es
     keine Mitte, gegen die etwas verrutschen könnte. Die Verschiebung des
     Apothekenlogos hätte hier nur zur Folge, dass es als einziges nicht mit
     den anderen fluchtet. Deshalb gilt sie nur in der breiten Ansicht. */
  .stimme__logo[src*="/apotheke-nenzing."] { transform: none; }
  .stimme__initialen {
    width: 3rem;
    height: 3rem;
    margin-block: 0;
    flex-shrink: 0;
  }
  .stimme__name { font-size: var(--text-md); }
  .stimme__rolle { font-size: var(--text-xs); }
}

/* Auf schmalen Schirmen schneidet `cover` das breite Heldenbild stark
   seitlich zu. Links verankert bliebe nur der Fensterrahmen übrig -- die
   Personen, um die es im Bild geht, lägen ausserhalb. Ein Stück weiter zur
   Mitte zeigt beides: den Lichtschein links und die Szene. */
@media (max-width: 700px) {
  .held__bild img { object-position: 32% top; }
}

/* --------------------------------------------------------------------------
   Wechselnde Blockrichtung

   Die Abschnitte der Startseite legen ihr Gewicht abwechselnd auf die linke
   und die rechte Seite: Willkommen (Text links, Zahlen rechts), Vision (Text
   links, Bild rechts), Leistungen (volle Breite). Das nimmt der Seite die
   Gleichförmigkeit, ohne dass etwas springt.

   Bewusst NICHT gespiegelt wird der Textsatz selbst -- rechtsbündiger
   Fließtext zwingt das Auge, bei jeder Zeile den Anfang neu zu suchen.
   Verschoben wird nur die Anordnung der Blöcke.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Jahrgänge im Blog

   Die Jahreszahl steht gross und ruhig da; beim Überfahren rückt sie heran,
   färbt sich in der Markenfarbe und der Pfeil wandert. Bewusst als Liste mit
   Haarlinien gesetzt -- dasselbe Motiv wie bei den Leistungen, damit die
   Seite eine Handschrift behält.
   -------------------------------------------------------------------------- */

.jahrgaenge { border-top: 1px solid var(--farbe-rand); }

.jahrgang { border-bottom: 1px solid var(--farbe-rand); }

.jahrgang__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--raum-4) var(--raum-6);
  padding-block: var(--raum-6);
  transition: padding-left var(--dauer) var(--easing);
}

@media (min-width: 720px) {
  .jahrgang__link {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
    padding-block: var(--raum-7);
  }
}

.jahrgang__zahl {
  font-family: var(--schrift-display);
  font-size: var(--text-4xl);
  font-weight: var(--gewicht-held);
  line-height: 1;
  letter-spacing: var(--laufweite-held);
  color: var(--grau-300);
  font-variant-numeric: tabular-nums;
  transition: color var(--dauer) var(--easing-weich);
}

.jahrgang__inhalt { display: block; min-width: 0; }

.jahrgang__anzahl {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-akzent);
}

.jahrgang__titel {
  display: block;
  margin-top: var(--raum-2);
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
  /* Bei vielen Beiträgen sonst eine sehr lange Zeile. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jahrgang__pfeil {
  display: none;
  color: var(--grau-300);
  transition: transform var(--dauer) var(--easing),
              color var(--dauer) var(--easing-weich);
}
@media (min-width: 720px) { .jahrgang__pfeil { display: block; } }

.jahrgang:hover .jahrgang__zahl,
.jahrgang:focus-within .jahrgang__zahl { color: var(--farbe-akzent); }
.jahrgang:hover .jahrgang__pfeil,
.jahrgang:focus-within .jahrgang__pfeil {
  color: var(--farbe-akzent);
  transform: translateX(8px);
}
.jahrgang:hover .jahrgang__link,
.jahrgang:focus-within .jahrgang__link { padding-left: var(--raum-3); }
.jahrgang:hover, .jahrgang:focus-within { border-bottom-color: var(--marke-gelb); }

/* --------------------------------------------------------------------------
   Jahresleiste auf der Jahrgangsseite
   -------------------------------------------------------------------------- */

.jahrleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-bottom: var(--raum-8);
}
.jahrleiste a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-5);
  border: 1.5px solid var(--farbe-rand);
  border-radius: var(--radius-rund);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dauer-schnell) var(--easing-weich),
              background var(--dauer-schnell) var(--easing-weich),
              color var(--dauer-schnell) var(--easing-weich);
}
.jahrleiste a span { font-size: var(--text-xs); color: var(--farbe-text-leise); }
.jahrleiste a:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.jahrleiste a[aria-current='page'] {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-text-invers);
}
.jahrleiste a[aria-current='page'] span { color: rgb(255 255 255 / 0.7); }

/* Verweis am Ende eines Abschnitts: bewusst ein Schriftzug, keine
   Schaltfläche. Ein zweiter gefüllter Knopf neben dem Kontakt-Aufruf weiter
   unten würde mit diesem um Aufmerksamkeit konkurrieren -- hier genügt ein
   klarer, ruhiger Hinweis. */
/* Der Verweis gehört zur Liste darüber, nicht in den Raum zwischen zwei
   Abschnitten. Bei 2.5rem stand er ungefähr mittig im Leerraum und wirkte
   dadurch heimatlos -- näher an der Liste liest er sich als deren Abschluss. */
.weiterlink { margin-top: var(--raum-6); }

/* --------------------------------------------------------------------------
   Auftritt des Einstiegs

   Das Heldenbild ist beim Laden sofort da, der Text darüber baut sich in
   Leserichtung auf: Rubrik, Titel, Merkzeile, Erklärung. Die Verzögerungen
   sind knapp gehalten -- nach einer halben Sekunde steht alles. Wer scrollt,
   bevor die Reihe durch ist, verpasst nichts: Die Sätze sind schon lesbar,
   während sie sich noch setzen.

   Bewusst als CSS-Animation und ohne den `.js`-Vorsatz der Reveals: Sie
   läuft von selbst zu Ende, auch wenn kein Skript ausgeführt wird. Ein
   Einstieg, der ohne JavaScript leer bliebe, wäre hier das Letzte, was
   man will.
   -------------------------------------------------------------------------- */

.held__augenbraue,
.held__titel,
.held__unterzeile,
.held__zusatz {
  animation: einstieg-rein 780ms var(--easing-hupf) backwards;
}
.held__augenbraue { animation-delay:  80ms; }
.held__titel      { animation-delay: 180ms; }
.held__unterzeile { animation-delay: 300ms; }
.held__zusatz     { animation-delay: 400ms; }

@keyframes einstieg-rein {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Linien, die sich ziehen

   Die gelbe Linie unter jeder Rubrik und der gelbe Strich neben jeder
   Kennzahl sind schon da -- sie wachsen jetzt beim Erscheinen hinein.
   Das ist die kleinste denkbare Bewegung und zugleich die, die am
   ehesten als „gemacht" wahrgenommen wird.

   Der `.js`-Vorsatz gilt auch hier: Ohne Skript stehen beide Linien
   von Anfang an in voller Länge.
   -------------------------------------------------------------------------- */

.js [data-reveal] .augenbraue::after,
.js [data-reveal-gruppe] .augenbraue::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms var(--easing) 160ms;
}
.js [data-reveal].ist-sichtbar .augenbraue::after,
.js [data-reveal-gruppe].ist-sichtbar .augenbraue::after { transform: scaleX(1); }

/* Mittig gesetzte Rubriken wachsen aus der Mitte, sonst wandert die Linie. */
.js [data-reveal] .augenbraue--mitte::after,
.js [data-reveal-gruppe] .augenbraue--mitte::after { transform-origin: center; }

/* Der Strich neben den Kennzahlen läuft von oben ein. */
.js [data-reveal-gruppe] .kennzahl::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 560ms var(--easing) 220ms;
}
.js [data-reveal-gruppe].ist-sichtbar .kennzahl::before { transform: scaleY(1); }

/* Die vier Kennzahlen laufen einzeln nach, passend zur Staffelung der
   Kacheln darüber. */
.js [data-reveal-gruppe].ist-sichtbar > .kennzahl:nth-child(1)::before { transition-delay: 220ms; }
.js [data-reveal-gruppe].ist-sichtbar > .kennzahl:nth-child(2)::before { transition-delay: 290ms; }
.js [data-reveal-gruppe].ist-sichtbar > .kennzahl:nth-child(3)::before { transition-delay: 360ms; }
.js [data-reveal-gruppe].ist-sichtbar > .kennzahl:nth-child(4)::before { transition-delay: 430ms; }

/* Bewegung abbestellt: Alles steht sofort und vollständig. */
@media (prefers-reduced-motion: reduce) {
  .held__augenbraue, .held__titel, .held__unterzeile, .held__zusatz { animation: none; }
  .js [data-reveal] .augenbraue::after,
  .js [data-reveal-gruppe] .augenbraue::after,
  .js [data-reveal-gruppe] .kennzahl::before { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Störungsseite (500.php)

   Sie kommt ohne kopf.php und fuss.php aus -- also ohne Navigation und ohne
   Fusszeile, weil beide PHP-Code brauchen, der im Störungsfall womöglich
   gerade nicht läuft. Was fehlt, muss die Seite selbst mitbringen: das Logo
   als Weg zurück und die Kontaktdaten als Weg vorbei.
   -------------------------------------------------------------------------- */

.fehlerseite { padding-block-start: calc(var(--sektion-y) + 2rem); }

.fehlerseite__marke {
  display: inline-block;
  margin-bottom: var(--raum-8);
}
.fehlerseite__marke img { height: 3.5rem; width: auto; }

.fehlerseite__text { margin-top: var(--raum-5); }

.fehlerseite__kontakt {
  margin-top: var(--raum-8);
  display: flex;
  gap: var(--raum-4);
  flex-wrap: wrap;
}

.fehlerseite__zurueck {
  margin-top: var(--raum-7);
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Kleine Hilfsklassen statt style-Attributen

   Sie ersetzen die letzten Inline-Stile in den Vorlagen. Der Grund ist nicht
   Ordnungsliebe: Solange irgendwo ein style="…" steht, muss die
   Sicherheitsrichtlinie style-src 'unsafe-inline' erlauben -- und damit auch
   jedes eingeschleuste. Ohne Inline-Stile kann die Richtlinie enger werden.

   Bewusst wenige und benannte Klassen statt eines Baukastens: Ein
   Utility-System mit hundert Kürzeln wäre für zwölf Seiten die grössere
   Belastung als das Problem, das es löst.
   -------------------------------------------------------------------------- */

/* Abschnitt ohne oberen Innenabstand -- steht direkt unter dem Seitenkopf,
   der seinen Abstand schon mitbringt. */
.abschnitt--anschluss { padding-block-start: 0; }

/* Abschnitt mit zusätzlicher Luft oben (Fehlerseite).

   NICHT „--tief" nennen: Diesen Namen gibt es weiter oben schon, und zwar
   für die dunkelblauen Abschnitte. Beim ersten Versuch hiess die Klasse so,
   und prompt bekam die 404-Seite einen blauen Hintergrund, während die
   bestehenden blauen Abschnitte 64 Pixel Polsterung dazu bekamen. */
.abschnitt--luftig { padding-block-start: calc(var(--sektion-y) + 4rem); }

/* Abstände nach oben, in den Stufen, die die Vorlagen brauchen. */
.abstand-5 { margin-top: var(--raum-5); }
.abstand-6 { margin-top: var(--raum-6); }
.abstand-7 { margin-top: var(--raum-7); }
.abstand-8 { margin-top: var(--raum-8); }
.abstand-10 { margin-top: var(--raum-10); }
.abstand-sektion { margin-top: var(--sektion-y); }

/* Zentrierter Block mit zentriertem Vorspann. */
.mittig { text-align: center; }
.mittig .vorspann { margin-inline: auto; margin-top: var(--raum-4); }

/* Knopfzeile: mehrere Knöpfe nebeneinander, die bei Bedarf umbrechen. */
.knopfzeile {
  margin-top: var(--raum-8);
  display: flex;
  gap: var(--raum-4);
  flex-wrap: wrap;
}

/* Überschrift mit etwas mehr Abstand nach unten als der Standard. */
.titel-m.abstand-unten { margin-bottom: var(--raum-6); }

/* Der Schlusssatz der Datenschutzerklärung -- kleiner und leiser als der
   übrige Text. */
.schlussnotiz {
  color: var(--farbe-text-leise);
  font-size: var(--text-sm);
  margin-top: var(--raum-8);
}

/* Die Anschrift im Fuss ist ein <address>; Browser setzen das kursiv. */
.adresse { font-style: normal; }

/* Der Pfeil der Jahresnavigation zeigt zurück. */
.pfeil-zurueck { transform: rotate(180deg); }