@import url("fonts.css?v=65feb1b0");

/* ============================================================
   MUTAUSBRUCH, Systemische Beratung, Katja Kalkau
   Gestaltungsidee "Bruchkante": eine senkrechte Linie laeuft
   durch die ganze Seite, waechst mit dem Scrollfortschritt und
   ist die Kante, an der die Abschnitte aufklappen.
   ============================================================ */

:root {
  /* Erdfarben, Stand 18.09.2026 auf Katjas Wunsch.
     Jeder Wert ist mit werkzeuge/kontrast_pruefen.py gegen WCAG 2.1 geprueft,
     Fliesstext 4,5:1, grafische Elemente 3:1. Die Erdtoene liegen enger
     beieinander als die vorherige Palette, deshalb gibt es je einen
     aufgehellten Zwilling fuer dunkle Flaechen. */
  --grund:   #2b241c;   /* nasse Rinde, tiefes Braun */
  --grund-2: #3a3126;   /* zweite Tiefe fuer Flaechen im Dunkeln */
  --kalk:    #e2d9c8;   /* warmer Sand, heller Grund */
  --kalk-2:  #d5cab5;   /* Sand, eine Stufe dunkler */
  --mut:     #934429;   /* gebrannte Erde, das Signal */
  --licht:   #967026;   /* Ocker, warmes Licht */
  --flechte: #5e5b49;   /* trockenes Gras, Linien und Stille */
  --flechte-hell: #a8a48c; /* dieselbe Farbe, aufgehellt fuer dunkle Flaechen */
  --mut-hell: #c9795c;  /* gebrannte Erde fuer dunklen Grund */
  --licht-hell: #d9a84f; /* Ocker fuer dunklen Grund */

  --kante: 29%;         /* Lage der Bruchkante auf dem Desktop */
  --rand: clamp(1.25rem, 5vw, 5rem);
  --weg-gap: clamp(1rem, 2.5vw, 2rem);

  --schrift-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Newsreader", Georgia, "Times New Roman", serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kalk);
  color: var(--grund);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1.1em; max-width: 34em; }
a { color: inherit; }

::selection { background: var(--mut); color: var(--kalk); }

:focus-visible {
  outline: 3px solid var(--mut);
  outline-offset: 3px;
}

/* ---------- Vorschau-Streifen ---------- */

.vorschau {
  background: var(--mut);
  color: #fff;
  font-family: var(--schrift-display);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 96%;
  letter-spacing: 0.01em;
  padding: 0.6rem var(--rand);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}
.vorschau b { font-weight: 700; }
.vorschau a { color: #fff; text-underline-offset: 3px; }

/* ---------- Bruchkante ---------- */

.seite { position: relative; }

.kante {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kante);
  width: 1px;
  background: var(--flechte);
  opacity: 0.4;
  transform: scaleY(var(--fortschritt, 1));
  transform-origin: top;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Abschnittsraster ---------- */

.block {
  position: relative;
  padding: clamp(4.5rem, 11vh, 9rem) var(--rand);
  display: grid;
  grid-template-columns: calc(var(--kante) - var(--rand)) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.marke {
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.35;
  color: var(--flechte);
  text-align: right;
  margin: 0;
  max-width: none;
}
.block > .marke {
  padding-right: clamp(1.5rem, 4vw, 4rem);
  padding-top: 0.55rem;
  position: sticky;
  top: 2rem;
}

/* Randspalte: dieselbe Spalte wie die Beschriftung, zusaetzlich mit einem Foto.
   Das Raster hat dort ohnehin Platz, und ein Portraet gehoert neben den Text
   ueber die Person, nicht in den Lesefluss hinein. */
.randspalte {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.35rem;
  padding-right: clamp(1.5rem, 4vw, 4rem);
  padding-top: 0.55rem;
}
/* Schmaler als die Spalte, damit die rechte Bildkante mit der Beschriftung
   darueber und mit der Bruchkante eine Linie bildet. */
.portraet { margin: 0; width: 100%; max-width: 15rem; }
.portraet img {
  display: block;
  width: 100%;
  height: auto;
  /* Kein Rahmen, kein Schatten. Die Kante des Fotos ist die Kante. */
}

.block.dunkel {
  background: var(--grund);
  color: var(--kalk);
}
.block.dunkel .marke { color: var(--flechte-hell); }

h2 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 1.1rem;
  max-width: 16em;
  text-wrap: balance;
}

h3 {
  font-family: var(--schrift-display);
  font-weight: 650;
  font-stretch: 90%;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 0 0 0.5rem;
}

/* ---------- Kopf ---------- */

.kopf {
  background: var(--grund);
  color: var(--kalk);
  padding: clamp(3rem, 9vh, 7rem) var(--rand) clamp(3.5rem, 10vh, 8rem);
  position: relative;
  overflow: hidden;
}

.wortmarke {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.82;
  /* An den Glyphen gemessen, nicht am Kasten: der span ist ein Block und seine
     Kastenbreite sagt nichts ueber die Buchstaben. Bei 13.4vw blieben auf dem
     Handy nur 3 bis 11 Pixel Luft, das liest sich als angeschnitten.
     12.4vw laesst bei 360 px rund 25 Pixel und behaelt die Wucht. */
  font-size: clamp(2.3rem, 12.4vw, 11.5rem);
  text-transform: uppercase;
}
.wortmarke span { display: block; }
.wortmarke .oben { color: var(--kalk); }
.wortmarke .unten {
  color: var(--mut);
  margin-left: 0.085em;
  position: relative;
}
/* Der Riss: eine schmale helle Fuge zwischen den beiden Haelften. */
.wortmarke .unten::before {
  content: "";
  position: absolute;
  left: -0.085em;
  right: 0;
  top: -0.045em;
  height: 2px;
  background: var(--licht-hell);
  transform: scaleX(var(--riss, 1));
  transform-origin: left;
}

.kopf .rolle {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-stretch: 96%;
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.2rem);
  letter-spacing: 0.015em;
  color: color-mix(in srgb, var(--kalk) 78%, transparent);
  margin: clamp(1.75rem, 4vh, 3rem) 0 0;
  max-width: none;
}

.kopf .leitsatz {
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.15rem);
  line-height: 1.32;
  font-weight: 350;
  font-style: italic;
  max-width: 19em;
  margin: clamp(2.5rem, 6vh, 4.5rem) 0 0;
  text-wrap: pretty;
}

/* ---------- Fliesstext ---------- */

.fliess p { font-size: 1.02em; }
.fliess p:last-child { margin-bottom: 0; }

.auftakt::first-letter {
  float: left;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 0.06em 0.12em 0 0;
  color: var(--mut);
}

.merksatz {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.24;
  letter-spacing: -0.012em;
  max-width: 17em;
  margin: 2.25rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--mut);
}
.dunkel .merksatz { border-left-color: var(--licht-hell); }

/* ---------- Weg (Stationen) ---------- */

.weg { list-style: none; margin: 0; padding: 0; }

.weg li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1.35rem 0;
  border-top: 1px solid color-mix(in srgb, var(--flechte) 45%, transparent);
}
.weg li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--flechte) 45%, transparent); }

.weg .zeit {
  font-family: var(--schrift-display);
  font-weight: 650;
  font-stretch: 84%;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: var(--mut);
  padding-top: 0.15rem;
}
.weg p { margin: 0; max-width: 30em; }

.weg li.jetzt h3 { color: var(--mut); }

/* ---------- Haltung (Herz / Kante) ---------- */

.haltung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2.5rem;
}
.haltung > div { padding-top: 1rem; border-top: 3px solid var(--licht); }
.dunkel .haltung > div { border-top-color: var(--licht-hell); }
.haltung > div + div { border-top-color: var(--mut); }
.dunkel .haltung > div + div { border-top-color: var(--mut-hell); }
.haltung p { margin-bottom: 0; }

/* ---------- Spanne 0 bis 90+ ---------- */

.spanne { margin-top: 2.75rem; max-width: 46rem; }

.spanne .band {
  display: grid;
  grid-template-columns: repeat(3, minmax(min(100%, 13rem), 1fr));
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.spanne .band i {
  display: block;
  height: 0.6rem;
  background: var(--licht);
  transform: scaleX(var(--fuellung, 1));
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.spanne .band i:nth-child(2) { background: var(--mut); transition-delay: 0.12s; }
.spanne .band i:nth-child(3) { background: var(--flechte); transition-delay: 0.24s; }

.spanne dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
}
.spanne dt {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.spanne dd { margin: 0; font-size: 0.95em; line-height: 1.5; }

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

.kontakt-liste { list-style: none; margin: 2rem 0 0; padding: 0; }
.kontakt-liste li {
  padding: 0.85rem 0;
  border-top: 1px solid color-mix(in srgb, var(--flechte) 50%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
}
.kontakt-liste .was {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-stretch: 86%;
  font-size: 0.875rem;
  color: var(--flechte);
  min-width: 7rem;
}
.dunkel .kontakt-liste .was { color: var(--flechte-hell); }

.luecke {
  font-family: var(--schrift-display);
  font-weight: 500;
  font-stretch: 90%;
  font-size: 0.875rem;
  color: var(--mut);
  background: color-mix(in srgb, var(--mut) 12%, transparent);
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
}
.dunkel .luecke { color: var(--licht-hell); background: color-mix(in srgb, var(--licht-hell) 16%, transparent); }

/* ---------- Fuss ---------- */

.fuss {
  background: var(--grund);
  color: var(--flechte-hell);
  padding: clamp(2.5rem, 6vh, 4rem) var(--rand);
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-stretch: 92%;
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: flex-end;
}
.fuss nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fuss a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.fuss a:hover { color: var(--kalk); }
.fuss .name { color: var(--kalk); font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */

.rechtstext {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) var(--rand) clamp(3.5rem, 9vh, 6rem);
}
.rechtstext h1 {
  font-family: var(--schrift-display);
  font-weight: 750;
  font-stretch: 94%;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}
.rechtstext h2 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  margin-top: 2.5rem;
  max-width: none;
}
.rechtstext .zurueck {
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 90%;
  color: var(--flechte);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.rechtstext dl { margin: 0 0 1.5rem; }
.rechtstext dt {
  font-family: var(--schrift-display);
  font-weight: 600;
  font-stretch: 88%;
  font-size: 0.875rem;
  color: var(--flechte);
  margin-top: 0.9rem;
}
.rechtstext dd { margin: 0.1rem 0 0; }
.rechtstext .hinweis {
  border-left: 3px solid var(--mut);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 0 0 2.5rem;
}

/* ---------- Aufklappen an der Kante ---------- */

.js .kante { --fortschritt: 0; }
.js .wortmarke .unten { --riss: 0; }
.js .spanne .band { --fuellung: 0; }
.js .block.sichtbar .spanne .band { --fuellung: 1; }

/* Versteckt wird nur, wenn JavaScript laeuft und Bewegung erwuenscht ist.
   Ohne beides steht der Text sofort da, das ist der Normalfall fuer Suchmaschinen,
   Lesemodus und abgeschaltetes JavaScript.

   Wichtig: der Schnitt liegt auf den KINDERN des Abschnitts, nie auf dem Abschnitt
   selbst. Chromium rechnet ein eigenes clip-path in den Sichtbarkeitsanteil ein, den
   der IntersectionObserver misst. Ein so verstecktes Element meldet dauerhaft 0 und
   klappt deshalb nie auf. Gemessen am 18.09.2026, siehe data/verify. */
@media (prefers-reduced-motion: no-preference) {
  .js .auf > * {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s ease-out;
  }
  .js .auf > *:nth-child(2) { transition-delay: 0.14s; }
  .js .auf.sichtbar > * { clip-path: inset(0 0 0 0); opacity: 1; }
  .js .wortmarke .unten::before { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 52rem) {
  :root { --kante: 0px; }
  .kante { left: calc(var(--rand) / 2); opacity: 0.22; }
  .block {
    grid-template-columns: minmax(0, 1fr);
    padding-left: calc(var(--rand) + 0.75rem);
  }
  .marke { text-align: left; }
  .block > .marke {
    position: static;
    padding: 0 0 1.25rem;
  }
  .randspalte {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0 0 1.75rem;
  }
  .portraet { max-width: 9.5rem; flex: 0 0 auto; }
  .portraet.hoch { max-width: 7rem; }
  .weg li { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; }
  .spanne .band { grid-template-columns: 1fr; gap: 2px; }
  .spanne .band i { height: 0.45rem; }
}

/* ============================================================
   Bilder und Grafiken (ergaenzt 18.09.2026)
   ============================================================ */

/* ---------- Kopfbild ---------- */

.kopf {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(88vh, 820px);
}
.kopf-bild { position: absolute; inset: 0; }
.kopf-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  opacity: 0.86;
}
/* Der Verlauf haelt die Schrift lesbar, ohne das Bild plattzudruecken.
   Die Werte sind --grund (43, 36, 28). Vorher stand hier noch das Blaugrau
   der ersten Palette, was das warme Bild kalt und trueb wirken liess. */
.kopf-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(43, 36, 28, 0.58) 0%,
    rgba(43, 36, 28, 0.12) 34%,
    rgba(43, 36, 28, 0.72) 82%,
    var(--grund) 100%
  );
}
.kopf-inhalt { position: relative; z-index: 1; }

/* ---------- Bildband ueber die volle Breite ---------- */

.bildband { margin: 0; position: relative; background: var(--grund); }
.bildband img {
  display: block;
  width: 100%;
  height: clamp(220px, 44vh, 480px);
  object-fit: cover;
  object-position: center 52%;
}
.bildband figcaption {
  padding: 0.9rem var(--rand) 1.1rem;
  background: var(--kalk);
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-stretch: 92%;
  color: var(--flechte);
}

/* ---------- Gemeinsames fuer alle Grafiken ---------- */

.grafik { margin: 2.75rem 0; max-width: 46rem; }
.grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafik figcaption {
  margin-top: 1rem;
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.5;
  color: var(--flechte);
  max-width: 32em;
}
.dunkel .grafik figcaption { color: var(--flechte-hell); }

.grafik-titel {
  margin-top: 3.25rem;
  color: var(--flechte);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.015em;
}

/* ---------- Systembild ---------- */

.systembild { margin-top: 2.25rem; }
.systembild .sys-strahl { stroke: var(--flechte); stroke-width: 1.5; opacity: 0.5; }
.systembild .sys-ring {
  fill: none;
  stroke: var(--flechte);
  stroke-width: 1.5;
  opacity: 0.38;
}
.systembild .sys-ring.stark { stroke: var(--licht); stroke-width: 2.5; opacity: 0.95; }
.systembild .sys-knoten circle { fill: var(--grund); }
.systembild .sys-knoten text {
  font-family: var(--schrift-display);
  font-size: 17px;
  font-weight: 600;
  font-stretch: 90%;
  fill: var(--grund);
}
.systembild .sys-mitte circle { fill: var(--mut); }
.systembild .sys-mitte text {
  font-family: var(--schrift-display);
  font-size: 21px;
  font-weight: 700;
  font-stretch: 96%;
  fill: var(--kalk);
}

/* ---------- Erfahrungsjahre ---------- */

.jahre { margin-top: 1.25rem; }
.jahre .jahr-name {
  font-family: var(--schrift-display);
  font-size: 16px;
  font-weight: 500;
  font-stretch: 92%;
  fill: var(--grund);
}
.jahre .jahr-balken { fill: var(--mut); }
.jahre .jahr-wert {
  font-family: var(--schrift-display);
  font-size: 15px;
  font-weight: 650;
  font-stretch: 88%;
  fill: var(--mut);
}

/* ---------- Dorf ---------- */

.dorf { max-width: 38rem; }
.dorf .dorf-haus { fill: var(--licht-hell); opacity: 0.85; }
.dorf .dorf-mensch { fill: var(--mut-hell); }
.dorf .dorf-ring {
  fill: none;
  stroke: var(--flechte-hell);
  stroke-width: 1.5;
  opacity: 0.3;
  stroke-dasharray: 5 9;
}

/* ---------- Weg als Schiene mit Punkten ---------- */

.weg { position: relative; }
.weg li { grid-template-columns: 5.5rem 1.5rem minmax(0, 1fr); column-gap: var(--weg-gap); }
.weg .punkt {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--flechte);
  margin: 0.5rem auto 0;
  position: relative;
  z-index: 1;
  /* Der Ring in Hintergrundfarbe stanzt den Punkt aus der Schiene aus. */
  box-shadow: 0 0 0 5px var(--kalk);
}
.weg li.jetzt .punkt { background: var(--mut); box-shadow: 0 0 0 5px var(--kalk); }
.weg::before {
  content: "";
  position: absolute;
  top: 2.2rem;
  bottom: 2.2rem;
  left: calc(5.5rem + var(--weg-gap) + 0.75rem - 1px);
  width: 2px;
  background: color-mix(in srgb, var(--flechte) 38%, transparent);
}

/* ---------- Aufbau der Grafiken beim Sichtbarwerden ---------- */

.js .grafik .sys-strahl,
.js .grafik .sys-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .grafik .sys-knoten,
.js .grafik .sys-mitte,
.js .grafik .jahr-wert,
.js .grafik .dorf-haus,
.js .grafik .dorf-mensch { opacity: 0; }
/* Die Haeuser tragen ihre Position als transform-Attribut. Eine CSS-Transform
   wuerde sie ueberschreiben und alle uebereinanderlegen, deshalb nur Deckkraft. */
.js .grafik .jahr-balken {
  transform: scaleX(0);
  transform-origin: left center;
  transform-box: fill-box;
}

@media (prefers-reduced-motion: no-preference) {
  .js .grafik.aktiv .sys-strahl,
  .js .grafik.aktiv .sys-ring {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s ease-out var(--t, 0s);
  }
  .js .grafik.aktiv .sys-knoten {
    opacity: 1;
    transition: opacity 0.5s ease-out var(--t, 0s);
  }
  .js .grafik.aktiv .sys-mitte { opacity: 1; transition: opacity 0.6s ease-out; }
  .js .grafik.aktiv .jahr-balken {
    transform: scaleX(1);
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--t, 0s);
  }
  .js .grafik.aktiv .jahr-wert {
    opacity: 1;
    transition: opacity 0.4s ease-out calc(var(--t, 0s) + 0.55s);
  }
  .js .grafik.aktiv .dorf-haus {
    opacity: 0.85;
    transition: opacity 0.55s ease-out var(--t, 0s);
  }
  .js .grafik.aktiv .dorf-mensch {
    opacity: 1;
    transition: opacity 0.6s ease-out 0.95s;
  }
}

/* Ohne Bewegungswunsch steht alles sofort fertig da. */
@media (prefers-reduced-motion: reduce) {
  .grafik .sys-strahl,
  .grafik .sys-ring { stroke-dashoffset: 0; }
  .grafik .sys-knoten,
  .grafik .sys-mitte,
  .grafik .jahr-wert { opacity: 1; }
  .grafik .dorf-haus { opacity: 0.85; }
  .grafik .dorf-mensch { opacity: 1; }
  .grafik .jahr-balken { transform: none; }
}

@media (max-width: 52rem) {
  .kopf { min-height: auto; }
  .weg li { grid-template-columns: minmax(0, 1fr); }
  .weg .punkt, .weg::before { display: none; }
  /* Schmale Fenster: die Zeichnung darf den Seitenrand mitbenutzen, sonst
     schrumpft die Beschriftung unter die Lesbarkeit. */
  /* Nur die Zeichnung tritt ueber den Rand, die Bildunterschrift bleibt im Satz.
     Am ganzen figure gesetzt wuerde sie links angeschnitten. */
  .systembild svg {
    margin-inline: calc(var(--rand) * -0.7);
    width: calc(100% + var(--rand) * 1.4);
  }
  .systembild .sys-knoten text { font-size: 30px; }
  .systembild .sys-mitte text { font-size: 34px; }
  .jahre .jahr-name { font-size: 19px; }
  .jahre .jahr-wert { font-size: 18px; }
}

/* ============================================================
   Runde 4: Navigation, Angebotsseite, Handy zuerst
   ============================================================ */

/* ---------- Navigation ---------- */

.navi {
  background: var(--grund);
  color: var(--kalk);
  padding: 0.75rem var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  font-family: var(--schrift-display);
}
.navi-marke {
  font-weight: 750;
  font-stretch: 100%;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kalk);
  padding: 0.35rem 0;
}
.navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-left: auto;
}
.navi a {
  color: var(--kalk);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 550;
  font-stretch: 94%;
  /* Mindestens 44 Pixel hoch, damit man auf dem Handy trifft. */
  display: inline-block;
  padding: 0.6rem 0;
  min-height: 44px;
  line-height: 1.75;
}
/* Keine Dauerunterstreichung. Sie lief unter jedem Punkt UND unter der Wortmarke
   durch und sah nach kaputten Verweisen aus. Sichtbar wird der Strich erst beim
   Darauffahren, und dauerhaft nur unter der Seite, auf der man gerade ist. */
.navi ul a:hover,
.navi ul a:focus-visible { box-shadow: inset 0 -2px 0 var(--licht-hell); }
.navi-marke { box-shadow: none; }
.navi a[aria-current="page"] {
  color: var(--kalk);
  box-shadow: inset 0 -2px 0 var(--licht-hell);
}

/* ---------- Knopf ---------- */

.knopf {
  display: inline-block;
  font-family: var(--schrift-display);
  font-weight: 650;
  font-stretch: 94%;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--kalk);
  background: var(--mut);
  padding: 0.95rem 1.5rem;
  min-height: 48px;
  border-radius: 2px;
  transition: background 0.2s ease;
}
.knopf:hover, .knopf:focus-visible { background: var(--grund); }
.knopf.hell { background: var(--licht-hell); color: var(--grund); }
.knopf.hell:hover, .knopf.hell:focus-visible { background: var(--kalk); }

/* ---------- Freigestelltes Portraet ---------- */

/* Ohne Kasten: die Silhouette steht direkt auf dem Sandgrund. Das Quellfoto
   endet auf Brusthoehe, deshalb braeche das Freigestellte unten mit einer
   geraden Kante ab. Der Verlauf loest es stattdessen in den Grund auf. */
.portraet.frei img {
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
}

/* ---------- Unterseiten-Kopf ---------- */

.kopf-unterseite { min-height: min(52vh, 420px); }
.seitentitel {
  margin: 0;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 104%;
  font-size: clamp(2rem, 7vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--kalk);
  text-wrap: balance;
}
.kopf-unterseite .leitsatz { margin-top: 1.25rem; max-width: 24em; }

/* ---------- Angebote ---------- */

.angebote { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.angebot {
  padding: 1.75rem 0;
  border-top: 2px solid color-mix(in srgb, var(--flechte) 40%, transparent);
}
.angebot:last-child { border-bottom: 2px solid color-mix(in srgb, var(--flechte) 40%, transparent); }
.angebot-name {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 94%;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  margin: 0;
}
.angebot-zusatz {
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 550;
  font-stretch: 92%;
  color: var(--flechte);
  margin: 0.3rem 0 1rem;
}
.angebot p { max-width: 32em; }

.ablauf { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.ablauf li {
  padding: 0.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--flechte) 28%, transparent);
  max-width: 34em;
}
.ablauf .schritt {
  display: block;
  font-family: var(--schrift-display);
  font-size: 0.8125rem;
  font-weight: 650;
  font-stretch: 86%;
  color: var(--mut);
  letter-spacing: 0.01em;
}

.preis { margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.preis .zahl {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-stretch: 92%;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mut);
}
.preis .preis-zusatz {
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--flechte);
}

.feindruck {
  margin-top: 2rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--flechte);
  max-width: 34em;
}

/* ---------- Kontaktliste, gefuellte Werte ---------- */

.kontakt-liste .wert { font-size: 0.975em; }
.kontakt-liste a.wert { color: inherit; text-underline-offset: 3px; }

/* ---------- Fussleiste der Rechtsseiten ---------- */

.rechts-fuss {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* ============================================================
   Handy zuerst. 99 Prozent der Aufrufe kommen vom Telefon,
   deshalb ist alles ab hier kein Zusatz, sondern der Hauptfall.
   ============================================================ */

@media (max-width: 52rem) {
  .navi { gap: 0.25rem 1.25rem; padding: 0.5rem var(--rand) 0.35rem; }
  .navi ul { margin-left: 0; width: 100%; gap: 0 1.25rem; }
  .navi a { font-size: 0.875rem; padding: 0.55rem 0; }

  /* svh statt vh: vh rechnet die Adressleiste des Handybrowsers mit und
     macht den Kopf dadurch hoeher als der sichtbare Bildschirm. */
  .kopf { min-height: 76svh; }
  .kopf-unterseite { min-height: 62svh; }

  /* Die Abstaende von oben und unten kommen auf dem Handy doppelt zusammen und
     ergaben zwischen zwei Abschnitten ueber 180 Pixel leere Flaeche. */
  .block { padding-top: 3rem; padding-bottom: 3rem; }
  .kopf { padding-bottom: 2.5rem; }

  .bildband img { height: auto; aspect-ratio: 3 / 4; max-height: 74svh; }

  /* Die Randspalte ist auf dem Handy keine Spalte mehr. Nebeneinander sah das
     Foto verrutscht aus: Beschriftung ganz links, kleines Bild ganz rechts.
     Jetzt untereinander, das Bild ueber die volle Spaltenbreite. */
  .randspalte {
    display: block;
    padding: 0 0 1.5rem;
  }
  .randspalte .marke { margin-bottom: 1rem; }
  .portraet { max-width: none; width: 100%; }
  .portraet img { width: 100%; }

  .angebot { padding: 1.25rem 0; }
  .ablauf li { padding: 0.45rem 0; }

  .knopf { display: block; text-align: center; }

  .rechts-fuss { flex-direction: column; gap: 0.9rem; }

  /* Der Vorschau-Streifen ist ein Hinweis, kein Gestaltungselement.
     In voller Groesse sah er oben auf dem Handy aus wie eine Fehlermeldung. */
  .vorschau { font-size: 0.75rem; padding: 0.5rem var(--rand); line-height: 1.45; }
}

@media (max-width: 26rem) {
  /* Sehr schmale Geraete: der Fliesstext darf nicht enger werden als lesbar. */
  .block { padding-left: calc(var(--rand) + 0.5rem); padding-right: var(--rand); }
  .navi ul { gap: 0 1rem; }
  .navi a { font-size: 0.8125rem; }
  .wortmarke { letter-spacing: -0.03em; }
  .weg .zeit { font-size: 0.875rem; }
}

/* Tippziele in den Fussleisten. Gemessen waren sie 26 bzw. 16 Pixel hoch,
   auf dem Handy trifft man das nicht zuverlaessig. 44 Pixel sind die Untergrenze
   aus den WCAG-Empfehlungen und aus Apples und Googles Gestaltungsregeln. */
.fuss nav a,
.rechtstext .zurueck {
  display: inline-block;
  padding: 0.7rem 0;
  min-height: 44px;
  line-height: 1.7;
}
.fuss nav { gap: 0.25rem 1.5rem; }
.rechts-fuss { gap: 0 1.5rem; }


/* Beim Sprung ueber einen Anker klappt nichts auf, es steht sofort da.
   Sonst landet man fuer knapp eine Sekunde auf leerer Flaeche, und der
   Verweis wirkt kaputt. */
.js .auf.sofort > *,
.js .auf.sofort.sichtbar > * {
  transition: none !important;
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
}

/* Bildbaender werden nicht beschnitten.
   Ein Element, das per clip-path auf null Breite steht, gilt dem Browser als
   nicht im Sichtfeld. Bei `loading="lazy"` heisst das: das Bild wird nie
   angefordert, auch nicht, nachdem der Schnitt wieder weg ist. Sichtbar war
   dann nur die Hintergrundfarbe des Bandes. Belegt am 18.09.2026: ohne
   loading-Attribut laedt dieselbe Datei sofort.
   Dieselbe Ursache wie beim IntersectionObserver weiter oben: eigenes
   clip-path zaehlt in die Sichtbarkeitsrechnung hinein. */
.js .bildband > picture,
.js .bildband > img {
  clip-path: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ---------- Vorstellungsvideo ---------- */

/* Deutlich kleiner als zuerst: 26rem waren auf dem Desktop ein Kinoformat
   mitten im Text. 19rem stehen neben dem Fliesstext, nicht vor ihm. */
.vorstellung { margin: 2.25rem 0 0; max-width: 19rem; }
.film-rahmen { position: relative; background: var(--grund); }
.film {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.ton-knopf {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 650;
  font-stretch: 92%;
  color: var(--grund);
  background: color-mix(in srgb, var(--kalk) 92%, transparent);
  border: 0;
  border-radius: 2px;
  padding: 0 1rem;
  min-height: 44px;
  cursor: pointer;
}
.ton-knopf:hover, .ton-knopf:focus-visible { background: var(--kalk); }
.ton-knopf .ton-aus { display: none; }
.ton-knopf[aria-pressed="true"] .ton-an { display: none; }
.ton-knopf[aria-pressed="true"] .ton-aus { display: inline; }

.vorstellung figcaption {
  margin-top: 0.9rem;
  font-family: var(--schrift-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.5;
  color: var(--flechte);
  max-width: 30em;
}
/* Offenlegung: ein synthetisch erzeugtes Abbild eines Menschen gehoert
   gekennzeichnet, ohne dass der Hinweis die Seite dominiert. */
.hinweis-ki { display: block; margin-top: 0.3rem; font-size: 0.8125rem; }

/* Wie die Bildbaender vom Schnitt ausgenommen: ein per clip-path auf null
   gesetztes Video laedt und spielt nicht zuverlaessig. */
.js .vorstellung {
  clip-path: none !important;
  opacity: 1 !important;
  transition: none !important;
}


/* Muss nach der Grundregel stehen, sonst gewinnt bei gleicher Spezifitaet
   die spaetere Zeile und die Handyfassung greift nicht. */
@media (max-width: 52rem) {
  .vorstellung { max-width: 68%; min-width: 12rem; }
}

/* Das Kleeblatt ist eine Marke, kein Portraet: deutlich kleiner als die Fotos
   in derselben Spalte, sonst nimmt es ihnen den Rang. */
.portraet.klee { max-width: 8rem; }
@media (max-width: 52rem) {
  .portraet.klee { max-width: 5.5rem; }
}