/* ============================================================================
   Teich- & Gartenservice Müller, Penig — Gestaltungsschicht „Uferkante“
   ----------------------------------------------------------------------------
   Ein Teich fängt als Linie im Rasen an. Diese eine asymmetrische Uferkurve ist
   die Handschrift der Seite und erscheint in drei Maßstäben (partials/custom/
   motiv.php): als geschnittene Sektionskante, als selbstzeichnende Linie unter
   Überschriften, als kleiner Listenpunkt im Leistungsumfang.

   Farbwelt aus dem Logo: fast schwarzes Waldgrün trägt, das Blattgrün aus
   brand-colors.json ist der Akzent, das Wasserblau der Teichfläche die einzige
   Zweitfarbe, Uferkies und Granit sind die neutrale Basis.
   Wird als LETZTES geladen und gewinnt in der Kaskade — kein !important nötig.
   ========================================================================== */

:root {
  /* --- Farbwelt (aus dem Logo abgeleitet, WCAG-AA geprüft) ---
     Die Grundfläche war ein warmes Beige (#e6e3da) — genau der Cremeton, den
     jede zweite generierte Seite trägt, und der die Grüns stumpf aussehen liess.
     Sie ist jetzt kühler Granitkies: Grün minimal über Rot, Blau minimal darunter.
     Kontraste dadurch besser statt schlechter (Waldgrund 13,7:1, Blattgrün 5,1:1). */
  --uk-kies:        #e8eae4;  /* Grundfläche, kühl-steinig */
  --uk-kies-tief:   #dcdfd6;  /* zweite helle Fläche */
  --uk-papier:      #f5f7f2;  /* Karten, Eingabefelder, hellstes Band */
  --uk-granit:      #adb2a5;  /* Haarlinien */
  --uk-granit-fein: #c6cabf;
  --uk-grund:       #16220f;  /* Waldgrund — dunkle Bänder + Fließtext */
  --uk-grund-2:     #1f2e15;  /* eine Spur heller, für Flächen im Band */
  --uk-blatt:       #456b16;  /* Akzent, aus brand-colors.json */
  --uk-wasser:      #2c6377;  /* Wasserblau auf Hell (Kontrast 5.2:1) */
  --uk-wasser-hell: #8dc0d0;  /* Wasserblau auf Dunkel */
  --uk-ton-hell:    #d5d8cd;  /* gedämpfter Text auf dunklem Band */

  /* --- Theme-Tokens umlegen --- */
  --bg:            var(--uk-kies);
  --surface:       var(--uk-papier);
  --surface-2:     var(--uk-kies-tief);
  --surface-3:     #ced2c6;
  --surface-soft:  var(--uk-kies-tief);
  --border:        var(--uk-granit-fein);
  --border-strong: var(--uk-granit);
  --fg:            var(--uk-grund);
  --fg-muted:      #4c5544;
  --fg-subtle:     #5d6654;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-image: 10px;
  --btn-radius: 6px;

  /* Ruhe statt Schatten: die Seite trennt über Haarlinien und Flächen. */
  --card-shadow: none;
  --card-shadow-hover: none;
  --shadow-xs: none;
  --shadow-sm: 0 1px 0 var(--uk-granit-fein);

  --container: 78rem;
  --container-narrow: 44rem;
  --container-wide: 88rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-pad: clamp(4.5rem, 9vw, 9rem);

  /* Höhe der grossen Uferkante + Höhe der Kopfzeile (base.css: 4.5rem) */
  --uk-kante-h: clamp(3.2rem, 6.5vw, 8.5rem);
  --uk-header-h: 4.5rem;
}

/* ---------------------------------------------------------------------------
   Typografie — wenige Stufen, viel Abstand. Display Bricolage Grotesque 700
   (gearbeitet, etwas rau, hält sehr grosse Grade aus), Body Archivo.
   Verhältnis grösste Überschrift zu Fliesstext: ~5,5:1 auf Desktop, ~2,6:1 mobil.
   Deutsche Komposita dürfen NIE mitten im Wort brechen.
   --------------------------------------------------------------------------- */
body {
  background: var(--uk-kies);
  color: var(--uk-grund);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.uk-hero__titel {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.9rem); }
/* h3 stehen hier oft zweizeilig (Leistungstitel, Ablaufschritte). 1.14 war für
   die grossen Displaygrade gedacht und in dieser Grösse zu eng — 1.24 lässt die
   zweite Zeile atmen, ohne die Überschrift auseinanderfallen zu lassen. */
h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); letter-spacing: -0.014em; line-height: 1.24; }

p { overflow-wrap: break-word; }
.lead {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 44ch;
}

/* Über JEDER Überschrift stand vorher ein Versal-Label („Rechtliches“ über
   „Impressum“, „Kontakt“ über „Rufen Sie an.“). Zwölfmal dieselbe Kleinkapitälchen-
   Zeile, die nur wiederholte, was die Überschrift darunter ohnehin sagt — das ist
   kein Motiv, das ist ein Tic. Die Labels sind weg; geblieben ist die Auszeichnung
   dort, wo sie WAS AUSSAGT: die Leistungsgruppe. Die trägt jetzt zusätzlich ihr
   eigenes Zeichen (uk_gruppenzeichen), damit sie mobil überhaupt trennt. */
.uk-gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uk-wasser);
}
.uk-gruppe__zeichen {
  display: inline-flex;
  color: var(--uk-blatt);
}
.uk-zeichen { width: 1.5rem; height: 1.5rem; flex: none; }
.uk-glyph { width: 1.7em; height: 0.66em; flex: none; overflow: visible; }

/* Selbstzeichnende Uferlinie unter Überschriften. Ruhezustand = fertig gezeichnet. */
.uk-linie {
  display: block;
  width: clamp(9rem, 22vw, 17rem);
  height: 1.35rem;
  margin-top: 1rem;
  color: var(--uk-blatt);
  overflow: visible;
}
.uk-linie--hell { color: var(--uk-wasser-hell); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .uk-linie .draw {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: uk-zeichnen linear forwards;
      animation-timeline: view();
      animation-range: entry 15% cover 34%;
    }
  }
}
@keyframes uk-zeichnen { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------------
   Grosse Uferkante — die geschnittene Oberkante einer Sektion. Wird per
   negativem Rand über die vorhergehende Fläche gezogen.
   --------------------------------------------------------------------------- */
.uk-kante {
  position: relative;
  z-index: 2;
  height: var(--uk-kante-h);
  margin-block-start: calc(-1 * var(--uk-kante-h));
  margin-inline: 0;
  pointer-events: none;
  line-height: 0;
}
/* inset statt 100%: die Kurve übersteht die Box um 1px nach allen Seiten, damit
   Rundungsdifferenzen zwischen Box- und SVG-Rasterung nicht als Haarlinie an
   der Naht zur Nachbarsektion durchscheinen. */
.uk-kante svg { display: block; position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.uk-kante--kies   svg path { fill: var(--uk-kies); }
.uk-kante--papier svg path { fill: var(--uk-papier); }
.uk-kante--grund  svg path { fill: var(--uk-grund); }
.uk-kante--oben   { margin-block-start: 0; margin-block-end: calc(-1 * var(--uk-kante-h)); }

/* Die Kante darf in die FLÄCHE davor schneiden, nie in deren Text. Von allein
   hält das nicht: die Kantenhöhe wächst mit 6.5vw, die unteren Polster der
   Sektionen stehen bei 6–8vw mit rem-Deckel. Ab etwa 1400px überholt die Kante
   das Polster und legt sich über die letzte Zeile (Hero, Fragen, Leistungs-
   blöcke). Deshalb rechnet jede Fläche vor einer Kante ihr unteres Polster aus
   der Kantenhöhe plus einem sichtbaren Rest Luft — statt aus einer Zahl, die
   davon nichts weiss. `:has(+ .uk-kante)` greift nur dort, wo wirklich eine
   Kante folgt, und gilt ohne weiteres Zutun auch für jede Sektion, die später
   eine bekommt.
   --uk-kante-frei ist der eine Hebel dafür, wieviel eine Fläche freihält:
   der Hero nur die Kantenhöhe (seine Luft steckt innen), ein Bildband gar
   nichts (in ein Foto darf die Kante schneiden, da steht kein Text). */
:is(section, figure, div, p):has(+ .uk-kante:not(.uk-kante--oben)) {
  padding-bottom: var(--uk-kante-frei, calc(var(--uk-kante-h) + clamp(1.75rem, 3.4vw, 3.5rem)));
}
/* Nach oben ausschneidende Kante: dieselbe Rechnung für die Fläche darunter. */
.uk-kante--oben + :is(section, figure, div, p) {
  padding-top: var(--uk-kante-frei, calc(var(--uk-kante-h) + clamp(1.75rem, 3.4vw, 3.5rem)));
}

/* ---------------------------------------------------------------------------
   Kopfzeile — über Hero und Seitenkopf transparent, darunter eine Fläche, die
   beim Scrollen einwandert (scroll-gebunden, kein JS). Ohne Support bleibt die
   normale helle Leiste.
   Die beiden Bühnen sind gegensätzlich und bekommen deshalb je eine eigene
   Tinte: der Seitenkopf ist eine dunkle Fläche (helle Tinte, weiter unten),
   der Hero ist ein Foto mit hellem Himmel — dort trägt die dunkle Haustinte,
   gestützt vom hellen Streifen oben im Hero (.uk-hero::before). Dunkle Tinte
   auf diesem Himmel steht bei 13:1, weisse käme nicht über 2,4:1.
   --------------------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--uk-kies) 88%, transparent);
  border-bottom: 1px solid var(--uk-granit-fein);
}
.brand__logo { height: clamp(2.4rem, 4vw, 3.3rem); width: auto; }
.nav__link {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--uk-grund);
}
.nav__link[aria-current="page"] { color: var(--uk-blatt); }

/* Auf der Startseite steht die Leiste ohne eigene Fläche über dem Foto und
   fährt sie beim Scrollen ein. Die Tinte bleibt dabei die dunkle der ganzen
   Seite — sie steht auf dem hellen Streifen oben im Hero wie auf Kies. */
@supports (animation-timeline: scroll()) {
  body:has(.uk-hero) .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: uk-kopf linear both;
    animation-timeline: scroll(root);
    animation-range: 0 220px;
  }
  @keyframes uk-kopf {
    from { background: color-mix(in srgb, var(--uk-kies) 0%, transparent); border-bottom-color: transparent; }
    to   { background: color-mix(in srgb, var(--uk-kies) 94%, transparent); border-bottom-color: var(--uk-granit-fein); }
  }
}

/* ---------------------------------------------------------------------------
   HERO — ein einziges grosses Foto über die volle Breite, der Satz auf einer
   Tafel davor (.uk-hero__tafel).
   Das Foto wird NICHT getönt. Ein Schleier über der ganzen Fläche macht zwar
   jede Schrift lesbar, nimmt dem Bild aber die Farbe — und die Farbe ist hier
   das Verkaufsargument (Wasser, Blüten, Birken). Gemessen trägt dieses Motiv
   weisse Schrift nirgends: hinter der Überschrift steht der hellste Grund bei
   0,83 relativer Leuchtdichte (1,19:1), auch tief unten im Wasser nur bei 0,63
   (1,55:1). Nötig sind 3:1. Deshalb kommt der Kontrast aus einer eigenen
   Fläche, nicht aus dem Bild.
   Einziger Eingriff: ein heller Streifen oben (.uk-hero::before), damit die
   dunkle Kopfzeile auch dann steht, wenn der Bildausschnitt dort einmal ins
   Dunkle wandert.
   --------------------------------------------------------------------------- */
.uk-hero {
  position: relative;
  isolation: isolate;
  /* Der Hero trägt seine Luft im Inneren (.uk-hero__inner, unteres Polster) —
     die Sektion selbst hält nur die Kantenhöhe frei, sonst steht der Anruf-Knopf
     zweimal so weit über dem Ufer wie gewollt. */
  --uk-kante-frei: var(--uk-kante-h);
  min-height: min(88svh, 54rem);
  display: grid;
  align-items: end;
  margin-top: calc(-1 * var(--uk-header-h, 4.6rem));
  padding-top: var(--uk-header-h, 4.6rem);
  overflow: hidden;
  background: var(--uk-grund);
}
.uk-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.uk-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Heller Streifen unter der Kopfzeile — das einzige, was auf dem Foto liegt.
   Er hebt die oberen 11 rem an, damit die dunkle Wortmarke und die Navigation
   auch auf einem dunklen Bildausschnitt stehen (dort sonst 1,4:1, mit dem
   Streifen 7,8:1); auf dem hellen Himmel ist er kaum zu sehen und lässt die
   Farbe stehen. Er hört weit über der Tafel auf und berührt sie nie. */
.uk-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 11rem;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(244, 247, 242, 0.62) 0%,
    rgba(244, 247, 242, 0.34) 45%,
    rgba(244, 247, 242, 0) 100%);
}
.uk-hero__inner {
  position: relative;
  z-index: 3;
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vh, 5rem) clamp(2.5rem, 7vh, 5rem);
  /* Dieser Block spannt über den ganzen Hero und liegt über dem Foto — damit
     lag er auch über der KI-Marke unten rechts und schluckte deren Hover.
     Er selbst ist reine Hülle; alles Anfassbare sitzt in der Tafel, die die
     Ereignisse gleich wieder annimmt. */
  pointer-events: none;
}
.uk-hero__tafel { pointer-events: auto; }
/* Die Tafel — dieselbe Fläche, auf der weiter unten das Porträt steht: hellstes
   Papier, Haarlinie, grosser Radius. Sie liegt an der linken Satzkante auf dem
   Foto und trägt den ganzen Kontrast: Tinte in Waldgrund steht darauf bei 13:1,
   die zweite Zeile im Blattgrün bei 5,7:1, der Anruf-Knopf bei 5,7:1. Der
   Schlagschatten ist kein Schmuck, er hält die Tafel vom Foto getrennt — ohne
   ihn klebt helles Papier auf hellem Himmel. */
.uk-hero__tafel {
  max-width: 41rem;
  color: var(--uk-grund);
  background: var(--uk-papier);
  border: 1px solid var(--uk-granit-fein);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.4rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.2vw, 2.2rem);
  box-shadow: 0 18px 50px rgba(9, 15, 6, 0.3);
}
.uk-hero__titel {
  margin: 0;
  color: var(--uk-grund);
  font-size: clamp(2.3rem, 1.5svh + 2.9vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.032em;
  max-width: 17ch;
}
.uk-hero__titel span { display: block; }
.uk-hero__titel .uk-hero__zeile-2 { color: var(--uk-blatt); }
.uk-hero__sub {
  margin: clamp(1rem, 2.2vh, 1.6rem) 0 0;
  max-width: 42ch;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.5;
  color: var(--fg-muted);
}
.uk-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: clamp(1.4rem, 3vh, 2.4rem);
}
.uk-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.5rem;
  min-height: 3.1rem;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--uk-blatt);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.uk-tel svg { width: 1.15em; height: 1.15em; flex: none; }
.uk-tel:hover { background: #3a5a12; transform: translateY(-1px); }
.uk-tel--gross { font-size: clamp(1.15rem, 1rem + 0.9vw, 1.75rem); padding: 1.1rem 1.8rem; }
.uk-textlink {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  color: var(--uk-grund);
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  border-bottom: 2px solid var(--uk-granit);
  padding-block: 0.2rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.uk-textlink svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-base) var(--ease); }
.uk-textlink:hover { border-bottom-color: var(--uk-grund); }
.uk-textlink:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   ERÖFFNUNG — der Vorhang über der ersten Sekunde.
   Gemessen auf gedrosseltem Mobilfunk (1,6 Mbit/s, 150 ms Latenz): der Text
   steht nach 0,8 s, das Hero-Foto erst nach 2,6 s. Diese Lücke trägt der
   Vorhang: Waldgrund mit der Wortmarke, und wenn das Foto da ist, fährt er mit
   der Uferkante nach oben aus dem Bild.
   ZWEI Animationen mit VERSCHIEDENEN NAMEN statt einer mit anderer Verzögerung:
   nur ein Namenswechsel startet eine Animation neu. Mit derselben Animation und
   auf 0 gesetzter Verzögerung spränge der Vorhang beim frühen Heben sofort an
   ihr Ende, statt zu fahren.
   uk-vorhang-netz läuft IMMER und braucht kein JavaScript. Ein Vorhang, der
   hängen bleibt, ist eine weisse Seite — deshalb liegt die Obergrenze im CSS
   und nicht im Skript.
   --------------------------------------------------------------------------- */
.uk-eroeffnung {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 20);
  display: grid;
  place-items: center;
  background: var(--uk-grund);
  animation: uk-vorhang-netz 0.75s var(--ease) 1.8s both;
}
.uk-eroeffnung.hebt { animation: uk-vorhang-heben 0.75s var(--ease) 0s both; }
/* Die Wortmarke ist dunkel gezeichnet (helle Flächen sind ihr Normalfall) und
   wird für den dunklen Vorhang invertiert — dieselbe Umkehr wie im Seitenkopf. */
.uk-eroeffnung__marke {
  width: min(52vw, 14rem);
  height: auto;
  filter: brightness(0) invert(1);
  animation: uk-vorhang-marke 0.7s var(--ease) both;
}
/* Die Uferkante hängt UNTER dem Vorhang und fährt mit ihm nach oben durchs
   Bild — dieselbe Kurve, die auf der ganzen Seite die Flächen trennt. */
.uk-eroeffnung .uk-kante {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
}
@keyframes uk-vorhang-heben { to { transform: translateY(-101%); } }
@keyframes uk-vorhang-netz  { to { transform: translateY(-101%); } }
@keyframes uk-vorhang-marke { from { opacity: 0; transform: translateY(0.7rem); } }

/* Wer Bewegung abbestellt hat, bekommt keinen Vorhang — nicht einen langsamen,
   sondern gar keinen. Das Skript entfernt ihn zusätzlich aus dem DOM. */
@media (prefers-reduced-motion: reduce) {
  .uk-eroeffnung { display: none; }
}

/* KI-Kennzeichnung auf dem Foto: so leise wie zulässig — aber nicht leiser.
   Klein und gemischt geschrieben statt in Versalien; der Grund bleibt deckend,
   weil darunter ein Foto mit wechselnder Helligkeit liegt und der Hinweis auf
   JEDEM Ausschnitt lesbar sein muss (Art. 50 Abs. 4 KI-VO: klar und erkennbar).
   Bei 0,7 rem tragen die Glyphen nur mit Weight 600 — mit 500 franste der Text
   auf 1x-Schirmen aus und war praktisch nicht mehr zu lesen. Das ist die
   Untergrenze, nicht der Startwert für weitere Verkleinerung. */
.uk-hero .ki-hinweis--overlay {
  right: max(var(--gutter), 1rem);
  bottom: calc(var(--uk-kante-h) + 0.75rem);
  background: rgba(11, 18, 8, 0.82);
  color: #f2f4ee;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 3px;
  padding: 0.32em 0.7em;
}

/* ---------------------------------------------------------------------------
   KOMPAKTE KENNZEICHNUNG — „KI“ als Marke, der Wortlaut klappt bei Hover aus.
   Auf den beiden grossen Fotos (Hero, Bildband) soll der Pflichthinweis so
   wenig Fläche wie möglich beanspruchen. Er verschwindet dabei NICHT: die
   Abkürzung steht in voller Deckkraft am Bild und ist selbst die Kennzeichnung,
   die Langform ergänzt sie nur.
   Das Einklappen steht bewusst NUR in (hover: hover) — auf dem Telefon gibt es
   kein Hover, dort bliebe der Wortlaut sonst für immer unsichtbar. Ohne diese
   Bedingung wäre der Hinweis auf Touchgeräten faktisch nicht vorhanden. Als
   Pille statt Kästchen, weil ein zweibuchstabiges Wort in einem Rechteck wie
   ein abgeschnittenes Wort aussieht.
   --------------------------------------------------------------------------- */
.ki-hinweis--kompakt {
  display: inline-flex;
  align-items: baseline;
  border-radius: var(--radius-full);
  padding: 0.3em 0.62em;
}
.ki-hinweis--kompakt .ki-hinweis__rest { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .ki-hinweis--kompakt .ki-hinweis__rest {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    /* Kein margin/gap: der Rest wächst direkt aus der Abkürzung heraus, sonst
       stünde beim Ausklappen eine Lücke mitten im Wort. */
    transition: max-width var(--dur-base) var(--ease),
                opacity var(--dur-fast) var(--ease);
  }
  /* focus-within hält die Geste auch für Tastatur offen, falls das Bild später
     einmal in einem fokussierbaren Element steht. */
  .ki-hinweis--kompakt:hover .ki-hinweis__rest,
  .ki-hinweis--kompakt:focus-within .ki-hinweis__rest {
    max-width: 14rem;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ki-hinweis--kompakt .ki-hinweis__rest { transition: none; }
}

/* Im Druck gibt es kein Hover: der Wortlaut steht ausgeschrieben. */
@media print {
  .ki-hinweis--kompakt .ki-hinweis__rest { max-width: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   THESE — die unterschriebene Aussage, jetzt mit Gesicht.
   Hier steht das Vertrauensargument der ganzen Seite („ich arbeite allein“).
   Rein textlich war es austauschbar mit jedem anderen Solo-Betrieb; also steht
   das Porträt daneben — auf grossen Schirmen als eigene Spalte über die volle
   Höhe von Satz und Text, darunter zwischen beiden. Die Signatur (Name,
   Rechtsform, Einzugsgebiet) bleibt: Bild und Unterschrift zusammen, wie auf
   einem Briefkopf.
   --------------------------------------------------------------------------- */
.uk-these {
  position: relative;
  background: var(--uk-kies);
  /* Unten mindestens die Höhe der dunklen Uferkante + Luft: die Folgesektion
     zieht ihre Kante per negativem Rand ÜBER diese Fläche — ohne den Freihalt
     schnitt die dunkle Kurve die Unterkante der Porträt-Tafel an. */
  padding-block: clamp(3.5rem, 7vw, 7rem) calc(var(--uk-kante-h) + clamp(1.8rem, 3vw, 2.8rem));
}
.uk-these__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
.uk-these__satz {
  margin: 0;
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  max-width: 17ch;
}
.uk-these__satz em { font-style: normal; color: var(--uk-blatt); }
.uk-these__nach {
  margin: clamp(0.9rem, 1.8vw, 1.3rem) 0 0;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.98rem + 0.75vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.016em;
  color: var(--fg-muted);
}

/* Signatur: die Uferlinie als Federstrich, darunter Name und Zuordnung.
   Alles aus site.json — hier wird nichts behauptet, was nicht im Impressum steht. */
.uk-signatur {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  display: grid;
  gap: 0.15rem;
  justify-items: start;
}
.uk-signatur .uk-linie { width: clamp(8rem, 17vw, 12rem); height: 1.15rem; margin: 0 0 0.35rem; }
.uk-signatur__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.uk-signatur__rolle {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}

.uk-these__text {
  max-width: 58ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--fg-muted);
}
.uk-these__text p + p { margin-top: 0.9em; }

/* Textlink auf hellem Grund — dieselbe Geste wie .uk-textlink im Hero. */
.uk-weiterlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  margin-top: 1.1rem;
  color: var(--uk-blatt);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--uk-blatt) 40%, transparent);
  padding-block: 0.2rem;
  transition: border-color var(--dur-fast) var(--ease);
}
.uk-weiterlink svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-base) var(--ease); }
.uk-weiterlink:hover { border-bottom-color: var(--uk-blatt); }
.uk-weiterlink:hover svg { transform: translateX(3px); }

@media (min-width: 62rem) {
  /* Links die Aussage und ihre Erläuterung untereinander, rechts das Porträt über
     beide Zeilen — es bekommt damit die volle Höhe der Sektion und muss nicht
     zwischen zwei Textblöcken um Platz bitten. */
  .uk-these__inner {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: clamp(2rem, 3.5vw, 3rem);
  }
  .uk-these__kopf { grid-column: 1; grid-row: 1; }
  .uk-these__text { grid-column: 1; grid-row: 2; }
  .uk-portraet    { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------------------------------------------------------------------------
   PORTRÄT — der Mann, der danach im Garten steht. Das Bild ist eine
   Freistellung (Alphakanal, uk_portraet() in partials/custom/motiv.php);
   die dunkelgrüne Arbeitskleidung verlangt zwingend hellen Grund. Die Bühne:
   eine Tafel im hellsten Ton der Seite, auf der die Figur GANZ steht — mit
   Kopffreiheit oben, nicht über die Kante hinausragend. Vor den Beinen liegt
   die grosse Uferkante als Kiesfläche; sie verdeckt die Schnittkante der
   Freistellung: der Mann steht am Ufer.
   Das Motiv ist ein KI-bearbeitetes Foto; der vorgeschriebene Hinweis
   (Art. 50 Abs. 4 KI-VO) steht als stille Zeile rechts unten auf der
   Kiesfläche. Klein und ruhig — aber lesbar, und Ausblenden ist ausgeschlossen.
   --------------------------------------------------------------------------- */
.uk-portraet { margin: 0; }
/* Kopffreiheit über dem Scheitel: die Quelle ist exakt auf die Figur getrimmt,
   die Luft muss deshalb aus dem Layout kommen. Prozent bezieht sich auf die
   Tafelbreite und skaliert damit mit der Figur. */
.uk-portraet__buehne { position: relative; padding-top: clamp(1.6rem, 8%, 3.2rem); }
/* Tafel: der volle Grund unter der Figur, hell, mit Haarlinie statt Schatten. */
.uk-portraet__buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--uk-papier);
  border: 1px solid var(--uk-granit-fein);
  border-radius: var(--radius-lg);
}
/* Die Figur: Freistellungen brauchen Luft, keine Ränder. 62 % von 28 rem
   ≈ 17 rem Anzeigebreite — die 516-px-Quelle reicht dafür knapp für 2x. */
.uk-portraet__buehne picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 62%;
  margin-inline: auto;
  /* 2px Standluft: die Ufer-SVG ist wegen der Haarlinie 1px eingerückt — ohne
     die Luft schaute die unterste (dunkle) Pixelzeile der Freistellung als
     Strich unter der Kiesfläche hervor. */
  padding-bottom: 2px;
}
.uk-portraet__buehne img { display: block; width: 100%; height: auto; }
/* Kiesfläche mit der Uferkurve als Oberkante — dieselbe Kurve wie uk_kante(),
   gleicher Massstab. 1px eingerückt, damit die Haarlinie der Tafel stehen bleibt. */
.uk-portraet__ufer {
  position: absolute;
  z-index: 2;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 15%;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}
.uk-portraet__ufer path { fill: var(--uk-kies-tief); }
/* KI-Kennzeichnung: nackte Zeile ohne Plakette, rechts unten auf der Kiesfläche.
   Ein Kasten mit Rahmen war der lauteste Punkt der ganzen Tafel; der Text
   allein trägt hier, weil BEIDE möglichen Gründe hell sind — auf Kies 5,7:1,
   auf Papier 7,0:1, also auch als Kleintext klar über AA. Gemischte Schreibung
   statt Versalien: kürzer, ruhiger, besser lesbar. Weight 600 ist bei diesem
   Grad Pflicht und nicht Betonung — mit 500 blieb von den Strichen auf
   1x-Schirmen zu wenig stehen. */
.uk-portraet .ki-hinweis--overlay {
  right: 0.9rem;
  bottom: 0.6rem;
  left: auto;
  z-index: 3;
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: var(--fg-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Startseite: gedeckelt, damit die Tafel weder die Textspalte erdrückt noch
   auf dem Telefon über zwei Bildschirmhöhen läuft. */
.uk-these .uk-portraet { width: min(100%, 28rem); margin-inline: auto; }

/* Über mich: das Porträt führt die Lesespur an — gedeckelt, damit das
   Hochformat auf grossen Schirmen nicht zur Litfasssäule wird. Der Abstand
   nach unten kommt aus dem Kopfabstand der folgenden h2. */
.uk-portraet--spur { width: min(100%, 32rem); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   BEWEIS — die einzigen echten Fotos, die es von dieser Arbeit gibt. Gross,
   nebeneinander, ungefiltert. Kein Schieberegler: die beiden Aufnahmen sind
   aus verschiedenen Winkeln gemacht, ein Überblenden wäre eine Behauptung.
   --------------------------------------------------------------------------- */
.uk-beweis {
  position: relative;
  background: var(--uk-grund);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 7.5rem) clamp(3.5rem, 7vw, 7rem);
}
.uk-beweis__inner {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}
.uk-beweis h2 {
  margin: 0;
  color: #fff;
  max-width: 22ch;
  font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.2rem);
}
.uk-beweis__paar {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.4vw, 3rem);
  margin-top: clamp(2.4rem, 5vw, 4rem);
}
.uk-beweis__bild figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.uk-beweis__wann {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.1rem);
  letter-spacing: -0.02em;
  color: #fff;
}
.uk-beweis__wo {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--uk-wasser-hell);
}
.uk-beweis__bild { margin: 0; }
.uk-beweis__bild picture { display: block; }
.uk-beweis__bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-image);
}
.uk-beweis__text {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  max-width: 62ch;
  color: var(--uk-ton-hell);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.16rem);
}
@media (min-width: 48rem) {
  .uk-beweis__paar { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   LEISTUNGEN — Zeilen statt Karten. Keine Nummerierung: fünf Leistungen sind
   keine Sequenz. Die Zugehörigkeit („Am Wasser“ / „Im Garten“ / „Laufend“)
   steht typografisch links, nicht als Farbe — es gibt genau einen Akzent.
   --------------------------------------------------------------------------- */
.uk-liste { background: var(--uk-kies); padding-block: clamp(3.5rem, 7vw, 7.5rem); }
.uk-liste__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.uk-liste__kopf { max-width: 44ch; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }
.uk-liste__kopf h2 { margin: 0; }

.uk-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem 2rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--uk-granit);
  color: inherit;
  text-decoration: none;
}
.uk-zeile:last-of-type { border-bottom: 1px solid var(--uk-granit); }
/* Zeichen + Gruppe stehen an JEDER Zeile, nicht nur an der ersten je Gruppe:
   mobil ist das der einzige Halt, an dem man eine Leistung von einem
   Ablaufschritt unterscheidet, bevor man den Text liest. */
.uk-zeile__gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uk-wasser);
  padding-top: 0.3rem;
}
.uk-zeile__gruppe .uk-zeichen { color: var(--uk-blatt); width: 1.6rem; height: 1.6rem; }
.uk-zeile__titel {
  margin: 0;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.35rem);
  letter-spacing: -0.02em;
  transition: transform var(--dur-base) var(--ease);
}
.uk-zeile__teaser { margin: 0; color: var(--fg-muted); max-width: 46ch; }
.uk-zeile__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 0.2rem;
  border: 1px solid var(--uk-granit);
  border-radius: 50%;
  color: var(--uk-blatt);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.uk-zeile:hover .uk-zeile__pfeil { background: var(--uk-blatt); border-color: var(--uk-blatt); color: #fff; }
.uk-zeile__pfeil svg { width: 1.15rem; height: 1.15rem; transition: transform var(--dur-base) var(--ease); }
.uk-zeile:hover .uk-zeile__titel { transform: translateX(4px); }
.uk-zeile:hover .uk-zeile__pfeil svg { transform: translateX(4px); }
.uk-zeile:focus-visible { outline: 3px solid var(--uk-blatt); outline-offset: 4px; }

@media (min-width: 56rem) {
  .uk-zeile {
    grid-template-columns: 10.5rem minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  .uk-zeile__gruppe { grid-row: span 2; }
  .uk-zeile__pfeil { grid-column: 4; grid-row: span 2; align-self: center; margin-top: 0; }
  .uk-zeile { grid-template-columns: 10.5rem minmax(0, 1.1fr) minmax(0, 1fr) 2.6rem; }
}

/* ---------------------------------------------------------------------------
   ABLAUF — ein Strang mit fünf Marken.
   Vorher lag jeder Schritt eine Stufe weiter rechts, jeder mit einem eigenen,
   abgesetzten Strich: der Blick musste einem Zickzack folgen, und die Einrückung
   las sich wie ein Ausrichtungsfehler statt wie eine Sequenz. Jetzt eine
   gemeinsame linke Kante, EIN durchgehender Strang, und die Reihenfolge steht als
   Ziffer da, wo sie hingehört. Der Strang ist der abgesteckte Schlauch aus dem
   Rasen — dieselbe Erzählung wie die Uferkante, nur als Achse.
   Die Sektion liegt zusätzlich auf der hellsten Fläche der Seite: mobil laufen
   Leistungen und Ablauf sonst als ein einziger Textstrom durch.
   --------------------------------------------------------------------------- */
.uk-profil {
  position: relative;
  background: var(--uk-papier);
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
  --uk-marke: 2.75rem;   /* Durchmesser der Ziffernmarke */
  --uk-stufe-pad: clamp(1.3rem, 2.4vw, 1.9rem);
}
.uk-profil__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.uk-profil__kopf { max-width: 40ch; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.uk-profil__kopf h2 { margin: 0; }
.uk-profil__stufen { list-style: none; margin: 0; padding: 0; max-width: 52rem; }

.uk-stufe {
  position: relative;
  display: grid;
  grid-template-columns: var(--uk-marke) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 1.7rem);
  align-items: start;
  padding-block: var(--uk-stufe-pad);
}
/* Der Strang: jede Stufe zeichnet ihr eigenes Segment über die volle Höhe, die
   Segmente stossen lückenlos aneinander. Oben beginnt er in der ersten Marke,
   unten endet er in der letzten — er läuft nicht ins Leere. */
.uk-stufe::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--uk-marke) / 2);
  width: 1px;
  background: var(--uk-granit);
}
.uk-stufe:first-child::before { inset-block-start: calc(var(--uk-stufe-pad) + var(--uk-marke) / 2); }
.uk-stufe:last-child::before  { inset-block-end: calc(100% - var(--uk-stufe-pad) - var(--uk-marke) / 2); }

.uk-stufe__nr {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--uk-marke);
  height: var(--uk-marke);
  border: 1px solid var(--uk-granit);
  border-radius: 50%;
  background: var(--uk-papier);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  color: var(--uk-blatt);
  font-variant-numeric: tabular-nums;
}
.uk-stufe__inhalt { padding-top: 0.3rem; }
.uk-stufe h3 { margin: 0 0 0.45rem; }
.uk-stufe p { margin: 0; color: var(--fg-muted); max-width: 54ch; }

/* ---------------------------------------------------------------------------
   FRAGEN — natives <details>-Akkordeon, exklusiv über das name-Attribut.
   Der Ausgangszustand ist lesbar: Fragen stehen sichtbar da, nichts hängt an JS.
   --------------------------------------------------------------------------- */
.uk-fragen { background: var(--uk-kies); padding-block: clamp(3.5rem, 7vw, 7.5rem); }
.uk-fragen__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.uk-fragen__kopf { max-width: 26ch; }
.uk-fragen__kopf h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); }
.uk-fragen__kopf h2 { margin: 0; }
.uk-frage { border-top: 1px solid var(--uk-granit); }
.uk-frage:last-child { border-bottom: 1px solid var(--uk-granit); }
.uk-frage summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.05rem, 1.9vw, 1.5rem);
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.uk-frage summary::-webkit-details-marker { display: none; }
.uk-frage summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.35rem;
  border-right: 2px solid var(--uk-blatt);
  border-bottom: 2px solid var(--uk-blatt);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease);
  /* Gedreht ist die Diagonale breiter als das Kästchen — ohne diesen Rand steht
     der Haken 3px über die Zeile hinaus. */
  margin-inline-end: 0.2rem;
}
.uk-frage[open] summary::after { transform: rotate(-135deg); }
.uk-frage summary:focus-visible { outline: 3px solid var(--uk-blatt); outline-offset: 2px; }
.uk-frage__antwort {
  margin: 0;
  padding-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
  max-width: 62ch;
  color: var(--fg-muted);
}

@media (min-width: 62rem) {
  .uk-fragen__inner { grid-template-columns: 0.85fr 1.6fr; align-items: start; }
}

/* ---------------------------------------------------------------------------
   ANRUF — das Telefon ist sein Hauptkanal, also steht es hier gross und einmal.
   --------------------------------------------------------------------------- */
.uk-anruf {
  position: relative;
  background: var(--uk-grund);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.uk-anruf__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: end;
}
.uk-anruf h2 {
  margin: 0;
  color: #fff;
  max-width: 18ch;
  font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.2rem);
}
.uk-anruf p { margin: 1rem 0 0; color: var(--uk-ton-hell); max-width: 46ch; }
.uk-anruf__wege { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.uk-anruf__nebenwege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  font-size: 0.98rem;
}
.uk-anruf__nebenwege a {
  color: var(--uk-wasser-hell);
  text-decoration: none;
  border-bottom: 1px solid rgba(141, 192, 208, 0.45);
  padding-block: 0.4rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.uk-anruf__nebenwege a:hover { border-bottom-color: var(--uk-wasser-hell); }
@media (min-width: 56rem) {
  .uk-anruf__inner { grid-template-columns: 1.3fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Unterseiten — jede bekommt eine eigene Komposition, kein wiederholter
   Pagehead-Stub. Gemeinsam ist nur die Uferkante.
   --------------------------------------------------------------------------- */

/* Seitenkopf: Versal-Label, sehr grosse Zeile, eine Lesespur — ohne Foto. */
.uk-seitenkopf {
  background: var(--uk-grund);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
  margin-top: calc(-1 * var(--uk-header-h, 4.6rem));
  padding-top: calc(var(--uk-header-h, 4.6rem) + clamp(3rem, 7vw, 6rem));
}
.uk-seitenkopf__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.uk-seitenkopf h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.35rem, 1.5rem + 3.8vw, 5rem);
  letter-spacing: -0.03em;
  max-width: 17ch;
}
.uk-seitenkopf__lead {
  margin: clamp(1.1rem, 2.5vw, 1.8rem) 0 0;
  max-width: 52ch;
  color: var(--uk-ton-hell);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.55;
}
@supports (animation-timeline: scroll()) {
  body:has(.uk-seitenkopf) .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: uk-kopf-dunkel linear both;
    animation-timeline: scroll(root);
    animation-range: 0 200px;
  }
  body:has(.uk-seitenkopf) .brand__logo { filter: brightness(0) invert(1); }
  body:has(.uk-seitenkopf) .nav__link { color: rgba(255, 255, 255, 0.9); }
  body:has(.uk-seitenkopf) .nav__link[aria-current="page"] { color: var(--uk-wasser-hell); }
  body:has(.uk-seitenkopf) .nav-toggle span { background: #fff; }
  body:has(.uk-seitenkopf) .nav-toggle { border-color: rgba(255, 255, 255, 0.35); }
  @keyframes uk-kopf-dunkel {
    from { background: color-mix(in srgb, var(--uk-grund) 0%, transparent); border-bottom-color: transparent; }
    to   { background: color-mix(in srgb, var(--uk-grund) 96%, transparent); border-bottom-color: rgba(255,255,255,0.16); }
  }
}

/* Mobil klappt die Navigation als Fläche auf — die braucht immer einen eigenen
   Grund, sonst steht sie auf dem Foto. */
@media (max-width: 60rem) {
  .nav.is-open { background: var(--uk-kies); border: 1px solid var(--uk-granit-fein); }
  body:has(.uk-seitenkopf) .nav.is-open .nav__link { color: var(--uk-grund); }
  body:has(.uk-hero) .site-header:has(.nav.is-open),
  body:has(.uk-seitenkopf) .site-header:has(.nav.is-open) {
    background: color-mix(in srgb, var(--uk-kies) 96%, transparent);
    animation: none;
  }
  body:has(.uk-seitenkopf) .site-header:has(.nav.is-open) .brand__logo { filter: none; }
  body:has(.uk-seitenkopf) .site-header:has(.nav.is-open) .nav-toggle span { background: var(--uk-grund); }
}

/* ---------------------------------------------------------------------------
   Das aufgeklappte Menü — eine Tafel, keine linierte Liste.
   Die Breite ist 820px, nicht 60rem: genau dort schaltet base.css die Leiste auf
   das Klappmenü um. Eine Zeile breiter angesetzt, und die Regeln träfen oben die
   waagerechte Desktop-Navigation.
   Vorher stand unter jeder Zeile ein Strich, auch unter der letzten — die Tafel
   endete mit einer Linie im Nichts. Striche stehen jetzt nur noch ZWISCHEN den
   Zeilen; die Tafel selbst schliesst unten mit Rundung und einer Haarlinie ab.
   --------------------------------------------------------------------------- */
@media (max-width: 51.25rem) {
  .nav {
    padding: 0.35rem var(--gutter) 0.55rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 20px 44px -20px rgba(11, 18, 8, 0.5);
  }
  .nav.is-open {
    background: var(--uk-papier);
    border: 0;
    border-bottom: 1px solid var(--uk-granit-fein);
  }
  .nav__link {
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid var(--uk-granit-fein);
    border-radius: var(--radius-sm);
    color: var(--uk-grund);
    font-weight: 600;
  }
  .nav__link:last-child { border-bottom: 0; }
  /* Antippen soll sich anfühlen wie ein Ziel, nicht wie Text. */
  .nav__link:active { background: var(--uk-kies); }

  /* Die Desktop-Unterstreichung läuft hier über die ganze Zeilenbreite und liest
     sich als weiterer Trennstrich. Die laufende Seite bekommt stattdessen eine
     kurze Marke am linken Rand — dort, wo das Auge die Zeile beginnt. */
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--uk-blatt); }
  .nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.2em;
    border-radius: 2px;
    background: var(--uk-blatt);
  }

  /* Ein offenes Menü mit Hamburger-Zeichen behauptet, es sei zu. Die drei
     Striche werden zum Kreuz — dieselben Elemente, nur gedreht. */
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
}

/* Leistungs-Detailblöcke: Text und Umfang tauschen die Seite. Kein Kartenraster.
   Die FLÄCHE wechselt nicht bei jedem Block, sondern am Themenwechsel (siehe
   leistungen.php): „Am Wasser“ auf Kies, „Im Garten“ auf Papier, „Laufend“
   wieder auf Kies. Damit sieht man die zwei Cluster, statt sie nur zu lesen. */
.uk-detail { background: var(--uk-kies); padding-block: clamp(3rem, 6vw, 5.5rem); }
.uk-detail--wechsel { background: var(--uk-papier); }
.uk-detail__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
}
.uk-detail__gruppe { margin-bottom: 0.85rem; }
.uk-detail__gruppe .uk-zeichen { width: 1.75rem; height: 1.75rem; }
.uk-detail h2 { margin: 0 0 0.9rem; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); }
.uk-detail__text { margin: 0; max-width: 60ch; color: var(--fg-muted); }
.uk-umfang { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.uk-umfang li {
  max-width: 62ch;
  display: grid;
  grid-template-columns: 1.7em 1fr;
  align-items: start;
  gap: 0.7rem;
  font-size: 0.98rem;
}
.uk-umfang .uk-glyph { color: var(--uk-blatt); margin-top: 0.55em; width: 1.7em; height: 0.66em; }
.uk-umfang__kopf {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uk-wasser);
  margin: 0 0 1rem;
}
@media (min-width: 56rem) {
  .uk-detail__inner { grid-template-columns: 1.25fr 1fr; column-gap: clamp(2.5rem, 6vw, 6rem); }
  .uk-detail__seite { padding-top: 0.4rem; }
}

/* Vollbreites Zwischenbild — ein Foto, das die Seite atmen lässt. Es trägt
   keine Unterschrift: die Bildaussage steht im Text davor, und der einzige
   Zusatz, der bleiben muss, ist die KI-Marke in der Ecke.
   Folgt eine Uferkante, schneidet sie ins Foto (--uk-kante-frei: 0) — das Bild
   läuft bis an die Welle, ohne hellen Streifen dazwischen. */
.uk-bildband {
  position: relative;
  line-height: 0;
  background: var(--uk-grund);
  --uk-kante-frei: 0px;
}
.uk-bildband img {
  display: block;
  width: 100%;
  height: clamp(15rem, 42vw, 30rem);
  object-fit: cover;
}
/* Wie im Hero: leise, aber auf dem Foto zwingend lesbar. */
.uk-bildband .ki-hinweis--overlay {
  right: max(var(--gutter), 1rem);
  bottom: 0.9rem;
  background: rgba(11, 18, 8, 0.82);
  color: #f2f4ee;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  border-radius: 3px;
  padding: 0.28em 0.6em;
}
/* Schneidet eine Uferkante ins Foto, liegt deren Fläche über der Bildecke — die
   Marke rückt genau um die Kantenhöhe hoch. Sie ist Pflicht (Art. 50 Abs. 4
   KI-VO) und darf nirgends unter die Welle geraten. */
.uk-bildband:has(+ .uk-kante) .ki-hinweis--overlay {
  bottom: calc(var(--uk-kante-h) + 0.9rem);
}

/* Über mich: eine Lesespur, ruhig gesetzt, mit einem herausgestellten Satz. */
.uk-lesespur { background: var(--uk-kies); padding-block: clamp(3.5rem, 7vw, 7rem); }
.uk-lesespur__inner {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
}
.uk-lesespur p {
  margin: 0 0 1.15em;
  font-size: clamp(1.04rem, 1rem + 0.4vw, 1.24rem);
  line-height: 1.62;
}
.uk-lesespur p:last-child { margin-bottom: 0; }
/* Herausgestellter Satz. Der farbige Randbalken links („3px solid“) ist die
   Standardgeste für eine Randnotiz oder einen Hinweiskasten — hier ist es aber
   die Kernaussage der Seite, und sie sah dadurch aus wie eine Seitenleiste. Statt
   des Balkens steht die Uferlinie der Seite darüber: dasselbe Motiv, das unter
   jeder Überschrift läuft, hier als Auftakt. */
.uk-heraus {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0;
}
.uk-heraus .uk-linie {
  width: clamp(7rem, 15vw, 10rem);
  height: 1.15rem;
  margin: 0 0 0.9rem;
}
.uk-heraus p {
  /* Das Zeilenmass gehört an den Absatz, nicht an den Kasten: ch rechnet gegen
     die eigene Schriftgrösse, und die ist hier der Displaygrad. */
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.uk-lesespur h2 { margin: clamp(2.2rem, 4vw, 3.2rem) 0 1rem; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.2; }
.uk-lesespur h2:first-child { margin-top: 0; }

/* 404: die drei Hauptziele als Zeilen mit Haarlinie — dieselbe Geste wie die
   Leistungsliste, nur ohne Beiwerk. Vorher lief diese eine Seite als einzige
   noch auf den generischen Template-Klassen. */
.uk-weiter { display: grid; }
.uk-weiter a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.4rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--uk-granit);
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  letter-spacing: -0.016em;
  text-decoration: none;
}
.uk-weiter a:last-child { border-bottom: 1px solid var(--uk-granit); }
.uk-weiter a svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--uk-blatt); transition: transform var(--dur-base) var(--ease); }
.uk-weiter a:hover { color: var(--uk-blatt); }
.uk-weiter a:hover svg { transform: translateX(4px); }

/* Kontakt: Wege links, Formular rechts — das Telefon zuerst. */
.uk-kontakt { background: var(--uk-kies); padding-block: clamp(3.5rem, 7vw, 7rem); }
.uk-kontakt__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.uk-wege { display: grid; gap: 1.6rem; }
.uk-weg { border-top: 1px solid var(--uk-granit); padding-top: 1.1rem; }
.uk-weg__was {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uk-wasser);
}
.uk-weg__wert {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem);
  letter-spacing: -0.018em;
  color: var(--uk-grund);
  text-decoration: none;
  word-break: break-word;
}
.uk-weg__wert svg { width: 0.85em; height: 0.85em; flex: none; }
a.uk-weg__wert:hover { color: var(--uk-blatt); }
.uk-weg__zusatz { margin: 0.35rem 0 0; font-size: 0.94rem; color: var(--fg-muted); }
@media (min-width: 62rem) {
  .uk-kontakt__inner { grid-template-columns: 1fr 1.35fr; }
}

/* Formular — sichtbare Labels, Pflichtfelder markiert, grosse Tippziele. */
.uk-formular { background: var(--uk-papier); border: 1px solid var(--uk-granit-fein); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.4rem); }
.uk-formular h2 { margin: 0 0 1.4rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.uk-feld { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.uk-feld label { font-size: 0.92rem; font-weight: 600; }
.uk-feld .uk-pflicht { color: var(--uk-blatt); }
.uk-feld input,
.uk-feld textarea,
.uk-feld select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--uk-grund);
  background: #fff;
  border: 1px solid var(--uk-granit);
  border-radius: var(--radius-sm);
}
.uk-feld textarea { min-height: 9rem; resize: vertical; }
.uk-feld input:focus-visible,
.uk-feld textarea:focus-visible,
.uk-feld select:focus-visible { outline: 3px solid var(--uk-blatt); outline-offset: 1px; border-color: var(--uk-blatt); }
.uk-hinweis-klein { font-size: 0.86rem; color: var(--fg-muted); margin: 0 0 1.2rem; max-width: 62ch; }
.uk-hinweis-klein a { color: var(--uk-wasser); }
.uk-senden {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--uk-blatt);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
}
.uk-senden:hover { background: #3a5a12; }
.uk-meldung {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--uk-blatt);
  background: color-mix(in srgb, var(--uk-blatt) 10%, var(--uk-papier));
  font-size: 0.96rem;
}
.uk-meldung--fehler { border-color: #a33a1c; background: color-mix(in srgb, #a33a1c 8%, var(--uk-papier)); }

/* ---------------------------------------------------------------------------
   Fusszeile — dunkel, damit die Seite auf demselben Grund endet, auf dem der
   Beweis und das Anruf-Band stehen.
   --------------------------------------------------------------------------- */
/* Die Seite endet auf einem dunklen Band; der geerbte Abstand darüber riss
   einen hellen Streifen zwischen Anruf-Band und Fusszeile auf. */
.site-footer { background: var(--uk-grund-2); color: var(--uk-ton-hell); border-top: 0; margin-top: 0; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--uk-wasser-hell);
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--uk-wasser-hell); }
.site-footer .muted { color: var(--uk-ton-hell); }
.site-footer .brand__logo { filter: brightness(0) invert(1); }
.site-footer .footer-login,
.site-footer .footer-credit { color: rgba(255, 255, 255, 0.55); }

/* ---------------------------------------------------------------------------
   Gemeinsames: Tastaturfokus, Reveal-Sicherheit, Bewegung.
   Der Ausgangszustand jedes Elements ist SICHTBAR — ohne JS, mit Skript-Blocker
   und bei prefers-reduced-motion steht die ganze Seite vollständig lesbar da.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.uk-tel:focus-visible,
.uk-textlink:focus-visible {
  outline: 3px solid var(--uk-blatt);
  outline-offset: 3px;
  border-radius: 2px;
}
.uk-hero a:focus-visible,
.uk-beweis a:focus-visible,
.uk-anruf a:focus-visible,
.uk-seitenkopf a:focus-visible { outline-color: var(--uk-wasser-hell); }

@media (prefers-reduced-motion: reduce) {
  .uk-linie .draw { stroke-dashoffset: 0; animation: none; }
  .uk-zeile__titel, .uk-zeile__pfeil svg { transition: none; }
}

/* ---------------------------------------------------------------------------
   MOBIL (bis 700px) — eigener Entwurf, keine gestapelte Desktopseite.
   Der Hero muss Überschrift, Kernaussage und Anruf-Knopf im ERSTEN Bildschirm
   tragen; die Hierarchie bleibt bei mindestens 2,6:1; der Rhythmus bleibt
   erhalten (volle Breite gegen eingerückt, Foto gegen Fläche).
   --------------------------------------------------------------------------- */
@media (max-width: 43.75rem) {
  :root { --uk-kante-h: 2.2rem; }

  /* Der Hero wird höher als auf dem Desktop-Anteil nötig wäre: sonst füllt die
     Tafel den Schirm und vom Foto bleibt nur ein Rand. So steht über der Tafel
     ein echter Streifen Bild und darunter das Wasser bis zur Uferkante. */
  .uk-hero { min-height: 88svh; }
  .uk-hero__media img { object-position: 50% 58%; }
  .uk-hero::before { height: 8rem; }
  .uk-hero__tafel { padding: 1.35rem 1.2rem 1.4rem; }
  .uk-hero__titel { font-size: clamp(1.95rem, 1rem + 4.4vw, 2.7rem); max-width: 16ch; }
  .uk-hero__sub { font-size: 0.98rem; max-width: 34ch; }
  /* Der Anruf-Knopf behält seine Eigenbreite. Über die ganze Zeile gezogen
     stand die Nummer verloren in einer grünen Fläche — die Fläche wirkte dann
     wichtiger als die Nummer. Er darf schrumpfen, aber nicht wachsen. */
  .uk-hero__aktionen { gap: 0.9rem; width: 100%; }
  .uk-hero__aktionen .uk-tel { flex: 0 1 auto; }

  /* Vorher/Nachher gross und untereinander: nebeneinander wären es Briefmarken. */
  .uk-beweis__bild img { aspect-ratio: 3 / 4; }

  .uk-detail__inner { gap: 1.6rem; }
  .uk-bildband img { height: 16rem; }
  .uk-heraus p { font-size: 1.45rem; }

  /* Seitenkopf-Überschrift: „Datenschutzerklärung“ ist EIN Wort von 20 Zeichen
     und darf nach der Regel oben nicht im Wort brechen — bei 38,8px lief es 51px
     aus dem Satzspiegel heraus. Der Grad richtet sich deshalb hier nach der
     verfügbaren Breite (Container = 100vw minus zwei Ränder), nicht nach der
     Viewporthöhe. Der Abzug fängt den festen Rand unter 400px ab. */
  .uk-seitenkopf h1 { font-size: clamp(1.6rem, calc(9.4vw - 5px), 2.9rem); }

  /* Aus demselben Grund die h2-Untergrenze: „Durchsetzungsverfahren“ (22 Zeichen,
     ein Wort) passte auf 320px-Geräten nicht mehr in die Lesespur. */
  h2 { font-size: clamp(1.55rem, 1.25rem + 2vw, 2.9rem); }

  /* Ablauf: Marke und Strang etwas schmaler, der Text bekommt die Breite. */
  .uk-profil { --uk-marke: 2.3rem; }
  .uk-stufe__nr { font-size: 0.94rem; }
  .uk-stufe__inhalt { padding-top: 0.15rem; }
}

/* ---------------------------------------------------------------------------
   ZUSTIMMUNGSBANNER — Markup und Text sind Infrastruktur (partials/consent.php)
   und bleiben unberührt; hier wird nur die Form gemacht.
   Vorher war es eine hohe weisse Fläche: mobil rund 230px, die den unteren
   Hero-Rand samt Uferkante verdeckt hat, bevor überhaupt gescrollt wurde, und
   auf der Kontaktseite mitten durch die Telefonnummer lief. Ausserdem lief der
   Text über 105 Zeichen je Zeile — die längste Zeile der ganzen Site.
   Jetzt: schmaler Satzspiegel, kleinere Schrift, flachere Leiste. Zusätzlich
   reserviert die Seite Platz, solange das Banner offen ist (--uk-consent-raum),
   damit im Hero nichts darunter verschwindet. Die beiden Schaltflächen bleiben
   exakt gleich gross und gleich sichtbar — das ist Pflicht, kein Stil.
   --------------------------------------------------------------------------- */
.consent-banner {
  padding: clamp(0.8rem, 1.8vw, 1.15rem) var(--gutter);
  background: var(--uk-papier);
  border-top: 1px solid var(--uk-granit);
  box-shadow: 0 -6px 22px rgba(11, 18, 8, 0.1);
}
.consent-banner__inner {
  width: min(100%, var(--container));
  max-width: none;
  gap: 0.8rem 2rem;
  align-items: center;
}
.consent-banner__text {
  flex: 1 1 28rem;
  max-width: 62ch;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--fg-muted);
}
.consent-banner__text a { color: var(--uk-wasser); }
.consent-banner__aktionen .btn {
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.94rem;
}

/* Solange das Banner offen ist, endet der Hero — samt Uferkante — ÜBER der
   Leiste statt darunter, und die Fusszeile bekommt Boden. --uk-consent-raum ist
   die gemessene Höhe der Leiste in der jeweiligen Breite. Der Hero wird dafür
   gekürzt, nicht gepolstert: Polster würde ihn wachsen lassen und die Kante
   erst recht unter das Banner schieben. */
body:has(#wdc-consent:not([hidden])) { --uk-consent-raum: 6rem; }
body:has(#wdc-consent:not([hidden])) .uk-hero {
  min-height: min(min(88svh, 54rem), calc(100svh - var(--uk-consent-raum) - 0.75rem));
}
.site-footer { padding-bottom: var(--uk-consent-raum, 0rem); }

@media (max-width: 43.75rem) {
  body:has(#wdc-consent:not([hidden])) { --uk-consent-raum: 11rem; }
  body:has(#wdc-consent:not([hidden])) .uk-hero {
    min-height: min(78svh, calc(100svh - var(--uk-consent-raum) - 0.75rem));
  }
  .consent-banner { padding-inline: var(--gutter); }
  .consent-banner__inner { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .consent-banner__text { flex: none; font-size: 0.8rem; line-height: 1.4; }
  .consent-banner__aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .consent-banner__aktionen .btn { width: 100%; justify-content: center; padding-inline: 0.6rem; }
}

/* Kein horizontales Scrollen, nie Text am Displayrand. */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Leistungs-Detailblöcke: Text und Umfang tauschen von Block zu Block die
   Seite. Kein Kartenraster — der Wechsel allein hält die Seite in Bewegung.
   --------------------------------------------------------------------------- */
@media (min-width: 56rem) {
  .uk-detail--gespiegelt .uk-detail__inner { grid-template-columns: 1fr 1.25fr; }
  .uk-detail--gespiegelt .uk-detail__haupt { order: 2; }
  .uk-detail--gespiegelt .uk-detail__seite { order: 1; }
}

/* Zustimmungs-Feld: Kästchen und Text nebeneinander, Tippziel gross genug. */
.uk-feld--check > label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  font-weight: 400;
  font-size: 0.94rem;
  line-height: 1.5;
  cursor: pointer;
}
.uk-feld--check input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  min-height: 0;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--uk-blatt);
  flex: none;
}
.uk-feld--check a { color: var(--uk-wasser); }

/* Zwei aufeinanderfolgende gleiche Detail-Flächen brauchen eine Haarlinie,
   damit der Blockwechsel lesbar bleibt. */
.uk-detail + .uk-detail { border-top: 1px solid var(--uk-granit-fein); }

/* ---------------------------------------------------------------------------
   Fokus-Kontrast auf dunklem Grund (WCAG 1.4.11, min. 3:1 zur Umgebung).
   Die Fusszeile ist immer dunkel (--uk-grund-2); die Kopfzeile bleibt auf
   Unterseiten mit dunklem Seitenkopf (.uk-seitenkopf) während des gesamten
   Scrollverlaufs dunkel getönt (siehe body:has(.uk-seitenkopf) .site-header
   weiter oben) — der voreingestellte Fokusring in Blattgrün hätte dort nur
   rund 2,3:1 Kontrast zum Untergrund. Auf der Startseite (heller Header über
   dem Foto bzw. hellem Band nach dem Scrollen) bleibt der Standardring aktiv.
   --------------------------------------------------------------------------- */
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: var(--uk-wasser-hell);
}
body:has(.uk-seitenkopf) .site-header a:focus-visible,
body:has(.uk-seitenkopf) .site-header button:focus-visible {
  outline-color: var(--uk-wasser-hell);
}

/* ---------------------------------------------------------------------------
   ÜBER MICH — Porträt neben der Lesespur statt darüber.
   Der Freisteller ist ein Dreiviertel-Porträt: die Quelle endet auf Höhe der
   Oberschenkel. Jede Behandlung, die die Figur auf einer Fläche „stehen“ lässt
   (Tafel + Kiesband), macht aus dieser Schnittkante eine Bodenlinie — die Figur
   liest sich dann als halb eingegraben. Sie steht deshalb frei auf dem hellen
   Seitengrund und läuft unten weich aus. Heller Grund ist keine Geschmacksfrage:
   die Arbeitskleidung ist dunkelgrün.
   Ab 62rem liegt das Bild rechts und läuft beim Scrollen mit, damit der Mann
   bei den Sätzen bleibt, die von ihm handeln.
   --------------------------------------------------------------------------- */
.uk-lesespur--vita .uk-lesespur__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
}
/* Bis 62rem steht die Figur allein über der Lesespur — dort ist mittig die
   ruhigere Stellung: linksbündig zog sie den Blick an den Rand, obwohl rechts
   neben ihr nichts steht. Die Kennzeichnung geht mit, sonst hinge sie an einer
   Kante, die es nicht mehr gibt. */
.uk-vita__bild {
  width: min(100%, 17rem);
  margin: 0 auto clamp(2rem, 4vw, 2.8rem);
  text-align: center;
}
.uk-vita__bild picture { display: block; }
.uk-vita__bild img {
  display: block;
  width: 100%;
  height: auto;
  /* Weicher Auslauf statt harter Schnittkante. Ohne Mask-Unterstützung bleibt
     das Bild vollständig sichtbar — der Ausfall ist der bisherige Zustand. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}
/* KI-Kennzeichnung als stille Unterschrift — auf Kies 5,7:1, klar über AA. */
.uk-vita__bild .ki-hinweis {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}
/* Vier Themen, keine Reihenfolge: eine Haarlinie trennt sie, keine Nummern. */
.uk-vita__text > h2:not(:first-child) {
  padding-top: clamp(1.7rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--uk-granit-fein);
}
@media (min-width: 62rem) {
  .uk-lesespur--vita .uk-lesespur__inner {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(15rem, 20rem);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .uk-vita__text { grid-column: 1; grid-row: 1; min-width: 0; }
  .uk-vita__bild {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
    text-align: left;
    position: sticky;
    top: calc(var(--uk-header-h, 4.6rem) + 1.6rem);
  }
}