/* ══════════════════════════════════════════════════════════════
   Rudel — gebrochenes Weiss, Waldgrün, Manrope

   Die grüne Schwester der Vorlage `weide`. Dieselbe Architektur,
   dieselben Gesten, derselbe Stoff — nur die Farbwelt ist eine
   andere: Waldgrün statt Erdbraun, ein Papier mit kühlerem Zug
   statt eines warmen.

   Die Datei hat drei Stufen, und die Reihenfolge ist die ganze
   Mechanik:

     1. vier @layer rudel.*  — tokens, base, components, motif.
        Alles, was das Aussehen entscheidet.
     2. die CMS-Schicht      — ganz unten, bewusst OHNE @layer.
        Sie kleidet den Datenvertrag von Holzcloud CMS und gewinnt
        damit gegen alle vier oben, ohne Spezifitätsspiele.
     3. .Site.Design         — im <style> nach diesem Stylesheet,
        ebenfalls ausserhalb jeder Schicht, und gewinnt dadurch
        gegen die CMS-Schicht.

   Darum darf unten kein @layer stehen. Ein fünfter würde die
   CMS-Schicht wieder unter die eigenen vier UND unter .Site.Design
   stellen, und dann kleidete die Vorlage sich selbst statt der
   Seite.

   Kommentare im Rumpf einer Schicht bleiben eingerückt. Am
   Zeilenanfang steht `@layer` genau viermal, und `/* ══ CMS` genau
   einmal — daran zählt die Prüfung die Kaskade nach.
   ══════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────
   Manrope liegt als woff2 in fonts/ dieser Vorlage und kommt über
   /t/fonts/ vom eigenen Server. Kein Byte wird von einem Dritten
   geholt — siehe VENDOR.md, wo beide Dateien mit Grösse, Quelle,
   SHA-256 und Lizenz verzeichnet sind. Die zwei Dateien sind aus
   `weide/fonts/` kopiert und byteweise identisch; das ist Absicht
   und keine vergessene Kopie, denn eine Vorlage muss als
   hochladbares Archiv für sich stehen und /t/fonts/… zeigt immer in
   die Vorlage, die gerade ausgeliefert wird.

   Manrope ist variabel, also trägt eine Datei je Teilmenge jedes
   Gewicht von 200 bis 800: font-weight bekommt eine SPANNE, nicht
   einen Wert, und es gibt keinen @font-face je Schnitt. Die
   unicode-range trennt latin von latin-ext, damit ein deutscher
   Text die zweite Datei gar nicht erst anfragt — sie trägt nur,
   was über Westeuropa hinausgeht.

   Eine Familie fester Breite gibt es hier nicht. Beschriftungen
   sind gesperrte Versalien in Manrope, und Beträge richtet
   font-variant-numeric: tabular-nums aus. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/t/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/t/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer rudel.tokens {
  /* Die einzige Stelle, an der ein Farbwert, ein Abstand oder ein
     Schriftgrad ENTSCHIEDEN wird. Steht weiter unten irgendwo eine
     Farbe als Literal, gehört sie hierher und nicht dorthin.

     Fast alles ist eine Ableitung über color-mix(in srgb, …) aus
     den vier Werten am Kopf. Das ist nicht Sparsamkeit: die
     CMS-Schicht ganz unten lässt --hc-wald und --hc-ground aus den
     Reglern der Verwaltung kommen, und weil var() erst am Ende
     aufgelöst wird, zieht eine eingestellte Marke damit die halbe
     Palette mit, ohne dass eine Ableitung wiederholt werden müsste. */
  :root {
    /* ── Die vier Entscheidungen ───────────────────────────────
       Kein reines Schwarz auf reinem Weiss. Das Papier ist
       gebrochen mit einem leicht kühleren, grünlichen Zug, die
       Tinte ist ein sehr dunkles Grünschwarz, und der Akzent ist
       Wald. Der Name --hc-wald steht bewusst da, wo in `weide`
       --hc-erde stand: er macht jede Regel darunter von selbst
       lesbar. */
    --hc-ground:   #F7F6F0;
    --hc-ink:      #1B211A;
    --hc-wald:     #325737;
    /* Schrift, die AUF einer Waldfläche steht. Nie --hc-ink dort:
       Waldgrün gegen Papier misst 7.59:1 in beide Richtungen, also
       trägt die Marke als Verweisfarbe UND als Knopffüllung mit
       hellem Text. */
    --hc-on-wald:  var(--hc-ground);

    /* ── Tinte ─────────────────────────────────────────────────
       Drei Stufen, und die dritte ist der Boden. Sie trägt die
       kleinste Schrift des Systems — Beschriftungen, Chips, den
       Fuss.

       Auf DIESEM Papier nachgerechnet, nicht aus `weide`
       übernommen: die Tinte gegen das Papier misst 15.16:1. Davon
       52 % (der Wert aus `holzcloud`) ergeben 3.36:1 und fallen
       durch; 60 % ergeben 4.26:1 und fallen durch; 62 % ergeben
       4.52:1 und liegen auf der Messerschneide. 64 % ergeben
       4.80:1 und sind der Wert, den diese Datei festschreibt. Dass
       dieselbe Prozentzahl auch in `weide` steht, ist das Ergebnis
       einer eigenen Rechnung und keine Übernahme — die Papiere
       unterscheiden sich, die Zahl fällt zufällig gleich aus.
       Wer den Wert senkt, senkt die kleinste Schrift mit.
       --hc-ink-2 bei 80 % ergibt 8.12:1. */
    --hc-ink-2:    color-mix(in srgb, var(--hc-ink) 80%, transparent);
    --hc-ink-3:    color-mix(in srgb, var(--hc-ink) 64%, transparent);

    /* ── Flächen ───────────────────────────────────────────────
       Auf hellem Papier ist eine Karte ein deckender Kasten und
       keine Glasfläche: eine halbdurchsichtige Fläche über Papier
       wirkt schmutzig, nicht schwebend. Eine Karte liegt deshalb
       HELLER als das Blatt — sie ist ein zweites, frischeres
       Papier, kein Schleier darüber. Die schwächste Tinte misst
       darauf 4.86:1, hält also auch dort. */
    --hc-pane:           color-mix(in srgb, var(--hc-ground) 82%, #FFFFFF 18%);
    --hc-pane-edge:      color-mix(in srgb, var(--hc-ink) 12%, transparent);
    --hc-hairline:       color-mix(in srgb, var(--hc-ink) 14%, transparent);
    /* Ein Eingabefeld liegt UNTER der Fläche, auf der es steht,
       also etwas dunkler statt heller. */
    --hc-pane-sunken:    color-mix(in srgb, var(--hc-ground) 94%, var(--hc-ink) 6%);
    /* Die klebende Kopfleiste ist halbdurchsichtiges Papier. Unter
       ihr läuft die ganze Seite durch, deshalb deckt sie mehr als
       eine Karte — und deshalb ist sie die einzige Fläche der
       Vorlage mit einem backdrop-filter (siehe .hc-bar). In `weide`
       kostete genau diese Stelle einen Nachbesserungs-Commit: bei
       blosser Deckung geisterte der Fliesstext von unten als graue
       Schrift durch, denn 12 % einer Tinte, die 15.16:1 misst, sind
       auf Papier noch gut zu sehen. Der Unschärfefilter macht daraus
       eine Ahnung von Bewegung statt lesbarer Buchstaben.
       --hc-pane-bar-solid ist derselbe Balken für Browser ohne
       backdrop-filter und für alle, die weniger Durchsichtigkeit
       eingestellt haben. */
    --hc-pane-bar:       color-mix(in srgb, var(--hc-ground) 88%, transparent);
    --hc-pane-bar-solid: color-mix(in srgb, var(--hc-ground) 98%, transparent);
    --hc-blur-bar:       blur(12px) saturate(140%);

    /* ── Marke ─────────────────────────────────────────────────
       Ein Akzent. Ein zweiter machte den ersten bedeutungslos. */
    --hc-wald-soft:  color-mix(in srgb, var(--hc-wald) 35%, transparent);
    --hc-wald-wash:  color-mix(in srgb, var(--hc-wald) 8%, transparent);
    --hc-pane-lift:  var(--hc-wald-soft);

    /* ── Der Grund ─────────────────────────────────────────────
       Er ist nicht flach. Drei sehr leise Farbschleier liegen über
       einem hellen Verlauf: Grün aus der Marke, dazu ein Moos und
       ein warmer Sand. Die zwei stehen als Literal richtig, weil
       sie eine zweite und dritte Farbe SIND und nicht die Marke —
       das Grün dagegen leitet ab, damit eine eingestellte Marke den
       Grund mitzieht.

       Beide Enden des Verlaufs leiten aus dem Papierwert ab. Stünde
       eines fest, wäre ein anderes Papier nur an einem Ende zu
       sehen. */
    --hc-ground-2:    color-mix(in srgb, var(--hc-ground) 96%, #FFFFFF 4%);
    --hc-wash-gruen:  color-mix(in srgb, var(--hc-wald) 9%, transparent);
    --hc-wash-moos:   color-mix(in srgb, #6B7F4A 8%, transparent);
    --hc-wash-sand:   color-mix(in srgb, #C9A87C 7%, transparent);
    /* Der ganze Grund als ein Wert, damit eine Fläche nur
       `background: var(--hc-ground-image)` zu sagen braucht. */
    --hc-ground-image:
      radial-gradient(62% 52% at 16% 10%, var(--hc-wash-moos)  0%, transparent 100%),
      radial-gradient(50% 44% at 88% 22%, var(--hc-wash-gruen) 0%, transparent 100%),
      radial-gradient(58% 50% at 58% 96%, var(--hc-wash-sand)  0%, transparent 100%),
      linear-gradient(168deg, var(--hc-ground-2) 0%, var(--hc-ground) 100%);

    /* ── Zustände ──────────────────────────────────────────────
       Auf diesem Papier gemessen: jede Farbe steht über 5.4:1 gegen
       Papier UND gegen eine Karte, taugt also als Schrift und nicht
       nur als Punkt. Nie die Farbe allein: der Punkt bekommt immer
       ein Wort daneben — und auf einer Vorlage, deren Marke selbst
       grün ist, ist das nicht bloss eine Regel für Farbenblinde,
       sondern die einzige Art, „in Ordnung" von „Marke" zu
       unterscheiden. */
    --hc-ok:          #3F6B33;
    --hc-warn:        #8A5A12;
    --hc-danger:      #A33327;
    --hc-info:        #2E5C7A;
    --hc-ok-wash:     color-mix(in srgb, var(--hc-ok) 10%, transparent);
    --hc-warn-wash:   color-mix(in srgb, var(--hc-warn) 10%, transparent);
    --hc-danger-wash: color-mix(in srgb, var(--hc-danger) 10%, transparent);
    --hc-info-wash:   color-mix(in srgb, var(--hc-info) 10%, transparent);

    /* ── Rundung ───────────────────────────────────────────────
       Hier unterscheidet sich `rudel` von `weide`. Dort stehen die
       kleine und die grosse Rundung als feste Werte da, und eine in
       der Verwaltung eingestellte Rundung bewegt nur die mittlere —
       an einer Karte änderte sich damit die Ecke, am Bild darin
       aber nicht.

       Hier hängt die ganze Familie an der mittleren. Das Manifest
       einer Website stellt genau EINE Zahl ein, und sie soll die
       Ecken der Karte, des Bildes und des Eingabefeldes im selben
       Verhältnis mitziehen. Die Faktoren sind so gewählt, dass 0 zu
       0 wird und nichts negativ werden kann: eine Website, die
       keine Rundung will, bekommt überall keine.

       Der Entwurfswert der mittleren Rundung steht in der Brücke
       weiter unten und ist 10px — der Wert, den die Website
       einstellt, für die diese Vorlage gebaut ist. Die
       Schwestervorlage `weide` kleidet eine Website mit 0. Diese
       hier ist also die rundere der beiden, und der Entwurfswert
       soll das zeigen, statt `weide` zu spiegeln oder eine Zahl zu
       nennen, die keine bekannte Verwendung hat. */
    --hc-r-sm:   calc(var(--hc-r) * 0.55);
    --hc-r-lg:   calc(var(--hc-r) * 1.6);
    --hc-r-pill: 999px;

    /* ── Abstand ───────────────────────────────────────────────
       Ein 4px-Raster. Benannt nach Stufe und nicht nach Absicht:
       derselbe Abstand bedeutet an zwei Stellen Verschiedenes. */
    --hc-space-1: 4px;
    --hc-space-2: 8px;
    --hc-space-3: 12px;
    --hc-space-4: 16px;
    --hc-space-5: 24px;
    --hc-space-6: 32px;
    --hc-space-7: 48px;
    --hc-space-8: 64px;
    --hc-space-9: 96px;

    /* ── Schrift ───────────────────────────────────────────────
       Die vier grössten Grade sind fluid: sie sind die einzigen,
       bei denen der Unterschied zwischen Telefon und Bildschirm
       zählt. Alles darunter bleibt fest, weil ein Fliesstext, der
       mit dem Fenster wächst, nur unruhig wird. */
    --hc-font-sans:  Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;

    --hc-text-label: 11.5px;
    --hc-text-xs:    12.5px;
    --hc-text-sm:    14.5px;
    --hc-text-base:  17.5px;
    --hc-text-lg:    19.5px;
    --hc-text-xl:    clamp(1.35rem, 2.1vw, 1.65rem);
    --hc-text-2xl:   clamp(1.7rem,  3.0vw, 2.3rem);
    --hc-display-sm: clamp(1.7rem,  3.4vw, 2.5rem);
    --hc-display:    clamp(2.4rem,  5.5vw, 4.2rem);

    --hc-weight-thin:     250;
    --hc-weight-regular:  400;
    --hc-weight-medium:   500;
    --hc-weight-semibold: 650;

    --hc-track-tight:  -.025em;
    --hc-track-snug:   -.012em;
    --hc-track-wide:   .1em;
    --hc-track-widest: .18em;

    /* Die Schlagzeile steht eng: bei dieser Grösse ist der
       Zeilenabstand eines Fliesstextes ein Loch zwischen zwei
       Zeilen desselben Satzes. */
    --hc-leading-tight: 1.03;
    --hc-leading-snug:  1.3;
    --hc-leading-base:  1.7;

    /* ── Erhebung ──────────────────────────────────────────────
       Weich und aus der Tinte gemischt, nicht aus Schwarz: ein
       grauer Schatten auf diesem Papier liest sich fremd. */
    --hc-shadow-pane: 0 1px 2px color-mix(in srgb, var(--hc-ink) 6%, transparent),
                      0 12px 28px color-mix(in srgb, var(--hc-ink) 8%, transparent);
    --hc-shadow-lift: 0 2px 4px color-mix(in srgb, var(--hc-ink) 8%, transparent),
                      0 20px 44px color-mix(in srgb, var(--hc-ink) 13%, transparent);

    /* ── Bewegung ──────────────────────────────────────────────
       Kurz genug, dass niemand darauf wartet. */
    --hc-dur-fast: .16s;
    --hc-dur-base: .24s;
    --hc-ease:     cubic-bezier(.2, .7, .3, 1);

    /* ── Fläche der Seite ──────────────────────────────────────
       --hc-wide ist die Seite, --hc-measure ist, wie breit ein
       Absatz darin werden darf. Zwei verschiedene Zahlen, weil eine
       weite Seite und eine lesbare Zeile zwei verschiedene Probleme
       sind. --hc-measure ist zugleich einer der sechs Regler der
       Verwaltung und wirkt allein durch seinen Namen.

       66 und nicht die 74 aus `weide`: beide Websites, die heute
       eine der beiden Vorlagen tragen, stellen 66 ein. Ein
       Entwurfswert, der weiter von der einzigen bekannten
       Verwendung entfernt liegt als nötig, macht die Vorschau in
       der Verwaltung irreführend — und 66 Zeichen liegen ohnehin in
       der Mitte dessen, was als lesbare Zeile gilt. */
    --hc-wide:    1320px;
    --hc-measure: 66ch;
    --hc-gutter:  clamp(20px, 4vw, 56px);

    /* ── Fokus ─────────────────────────────────────────────────
       Ein Ring, überall, in der Marke, nie entfernt. */
    --hc-focus:        var(--hc-wald);
    --hc-focus-width:  2px;
    --hc-focus-offset: 3px;

    /* ── Motiv ─────────────────────────────────────────────────
       Die Vorlage heisst Rudel, also ist das Zeichen ein ruhiger
       Waldsaum mit einem Weg davor. Alle Töne mischen aus der Marke
       und der Tinte, damit die Zeichnung einer eingestellten Marke
       folgt statt neben ihr zu stehen. */
    --hc-w-fern:  color-mix(in srgb, var(--hc-wald) 14%, transparent);
    --hc-w-nah:   color-mix(in srgb, var(--hc-wald) 30%, transparent);
    --hc-w-boden: color-mix(in srgb, var(--hc-wald) 20%, transparent);
    --hc-w-licht: color-mix(in srgb, var(--hc-wald) 52%, transparent);
  }
}
@layer rudel.base {
  /* Was eine Seite bekommt, bevor irgendein Bauteil dazukommt: der
     Grund, die Schrift, der Fokusring. Braucht rudel.tokens und
     entscheidet selbst keinen Wert. */

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

  html {
    scroll-behavior: smooth;
    /* Was angesprungen wird, muss unter der klebenden Leiste
       hervorkommen — sonst steht die Überschrift dahinter. */
    scroll-padding-top: var(--hc-space-9);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100svh;
    /* Eine ausdrückliche Grundfarbe unter den Verläufen: das Bild
       darüber malt keine eigene, und ohne diese Zeile gehören die
       Pixel vor dem Auflösen dem Browser und nicht uns. */
    background-color: var(--hc-ground);
    background-image: var(--hc-ground-image);
    background-attachment: fixed;
    color: var(--hc-ink);
    font-family: var(--hc-font-sans);
    font-size: var(--hc-text-base);
    line-height: var(--hc-leading-base);
    -webkit-font-smoothing: antialiased;
  }

  /* Ein Ring, an allem, und nur für die Tastatur. Eine Umrandung zu
     entfernen, ohne etwas anderes hinzustellen, ist der Weg, ein
     Formular ohne Maus unbenutzbar zu machen. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--hc-focus-width) solid var(--hc-focus);
    outline-offset: var(--hc-focus-offset);
    border-radius: var(--hc-r-sm);
  }

  :where(h1, h2, h3, h4) {
    margin: 0;
    font-weight: var(--hc-weight-medium);
    letter-spacing: var(--hc-track-tight);
    line-height: var(--hc-leading-tight);
    text-wrap: balance;
  }
  :where(p) { margin: 0; max-width: var(--hc-measure); }
  /* Ohne Familie fester Breite bleibt Quelltext bei der Systemschrift
     des Browsers dafür — das ist genau, was ui-monospace meint, und
     es ist keine geladene Datei. */
  :where(code, kbd, samp, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
  :where(img, svg, video) { max-width: 100%; height: auto; }
  :where(a) { color: inherit; }

  /* Wer weniger Bewegung möchte, bekommt weniger. Der Grund bleibt,
     denn er bewegt sich nicht — er ist ein stehender Verlauf. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }

  /* Wer weniger Durchsichtigkeit möchte, bekommt deckendes Papier
     und keinen Schleier: die Leiste wird undurchsichtig und der
     Verlauf fällt weg. Eine deckende Leiste über einem laufenden
     Verlauf wäre nur die halbe Antwort. */
  @media (prefers-reduced-transparency: reduce) {
    :root {
      --hc-pane-bar: var(--hc-pane-bar-solid);
      --hc-blur-bar: none;
      --hc-ground-image: none;
    }
  }

  /* Kein backdrop-filter: dann deckt die Leiste, statt Text von unten
     durchscheinen zu lassen. Ohne diesen Zweig ist die Unschärfe eine
     Wette darauf, dass jeder Browser sie kann. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
      --hc-pane-bar: var(--hc-pane-bar-solid);
      --hc-blur-bar: none;
    }
  }

  /* Vor dem Auge verborgen, nicht vor der Vorlesesoftware. Geklemmt
     statt nach -9999px geschoben: ein Kasten ausserhalb der Seite hat
     eine linke Kante, aus der manche Browser eine Bildlaufleiste
     machen. */
  .hc-sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@layer rudel.components {
  /* Die Bauteile, aus denen die zwölf Ansichten gebaut sind. Die
     Klassennamen sind dieselben wie in den Vorlagen `weide` und
     `holzcloud` — nicht aus Bequemlichkeit, sondern damit dieselbe
     Geste denselben Namen trägt und eine Ansicht sich zwischen den
     Vorlagen lesen lässt. Was sich unterscheidet, ist die Farbe.

     Jede Klasse trägt das Präfix hc-. Dieses Stylesheet wird neben
     bausteine.css geladen, und ein blankes .btn stiesse dort an. */

  /* ── Fläche der Seite ─────────────────────────────────────── */
  .hc-wide {
    width: 100%; max-width: var(--hc-wide);
    margin-inline: auto; padding-inline: var(--hc-gutter);
  }
  .hc-stack > * + * { margin-block-start: var(--hc-space-4); }
  .hc-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--hc-space-3);
  }

  /* ── Fläche ───────────────────────────────────────────────────
     Die eine Fläche des Systems. Karten, Leisten und Kästen sind
     alle dies, mit anderem Innenabstand. Ein DECKENDER Kasten mit
     Haarlinie und weichem Schatten; der Glas-Kunstgriff aus
     `holzcloud` ergibt nur auf dunklem Grund Sinn. */
  .hc-pane {
    background: var(--hc-pane);
    border: 1px solid var(--hc-pane-edge);
    border-radius: var(--hc-r);
    box-shadow: var(--hc-shadow-pane);
  }
  .hc-pane--pad   { padding: clamp(var(--hc-space-5), 4vw, var(--hc-space-7)); }
  .hc-pane--tight { padding: var(--hc-space-4); }
  /* Nur für etwas, das der Zeiger aufnehmen kann. Eine Fläche, die
     sich beim Überfahren hebt und beim Klicken nichts tut, lügt. */
  a.hc-pane, button.hc-pane, .hc-pane--interactive {
    text-decoration: none;
    transition: border-color var(--hc-dur-fast) var(--hc-ease),
                box-shadow  var(--hc-dur-fast) var(--hc-ease),
                transform   var(--hc-dur-fast) var(--hc-ease);
  }
  a.hc-pane:hover, button.hc-pane:hover, .hc-pane--interactive:hover {
    border-color: var(--hc-pane-lift);
    box-shadow: var(--hc-shadow-lift);
    transform: translateY(-2px);
  }

  /* ── Leiste ───────────────────────────────────────────────────
     Das Kleben hängt am Element selbst. Eine klebende Verpackung,
     die genau so hoch ist wie ihr Inhalt, wandert null Pixel und
     scrollt stillschweigend weg — der Fehler, den diese Klasse
     niemanden noch einmal finden lassen soll. */
  .hc-bar {
    position: sticky; top: 0; z-index: 30;
    background: var(--hc-pane-bar);
    border-block-end: 1px solid var(--hc-hairline);
    backdrop-filter: var(--hc-blur-bar);
    -webkit-backdrop-filter: var(--hc-blur-bar);
  }
  .hc-bar__inner {
    display: flex; align-items: center; gap: var(--hc-space-4);
    min-height: 68px;
  }

  /* ── Wortmarke ────────────────────────────────────────────── */
  .hc-mark {
    font-size: var(--hc-text-lg); letter-spacing: var(--hc-track-snug);
    text-decoration: none; color: var(--hc-ink);
  }
  .hc-mark b { font-weight: var(--hc-weight-semibold); }

  /* ── Knöpfe ───────────────────────────────────────────────────
     Kein Verlauf, kein innerer Glanz, kein farbiges Leuchten. Diese
     drei zusammen sind, was einen Knopf alt aussehen lässt. Die
     Waldfläche trägt hellen Text mit 7.59:1, und der Knopf ist damit
     zugleich die einzige grosse Markenfläche der Seite. */
  .hc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--hc-space-2);
    padding: 13px var(--hc-space-5);
    border-radius: var(--hc-r-pill);
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--hc-text-sm); font-weight: var(--hc-weight-semibold);
    line-height: 1; text-decoration: none; cursor: pointer;
    background: var(--hc-wald); color: var(--hc-on-wald);
    transition: opacity var(--hc-dur-fast) var(--hc-ease),
                transform var(--hc-dur-fast) var(--hc-ease),
                border-color var(--hc-dur-fast) var(--hc-ease);
  }
  .hc-btn:hover { opacity: .9; transform: translateY(-1px); }
  .hc-btn:disabled, .hc-btn[aria-disabled="true"] {
    opacity: .45; cursor: not-allowed; transform: none;
  }
  .hc-btn--ghost {
    background: transparent; color: var(--hc-ink);
    border-color: var(--hc-pane-edge); font-weight: var(--hc-weight-medium);
  }
  .hc-btn--ghost:hover { opacity: 1; border-color: var(--hc-wald-soft); background: var(--hc-wald-wash); }
  /* Das Zerstörende ist umrandet, nicht gefüllt. Ein roter Block ist
     das Leichteste auf einem Bildschirm, was man aus Versehen
     trifft. */
  .hc-btn--danger {
    background: transparent; color: var(--hc-danger);
    border-color: var(--hc-danger); font-weight: var(--hc-weight-semibold);
  }
  .hc-btn--danger:hover { opacity: 1; background: var(--hc-danger-wash); }
  .hc-btn--sm { padding: 9px var(--hc-space-4); font-size: var(--hc-text-xs); }

  /* ── Beschriftung ─────────────────────────────────────────────
     Statt einer Familie fester Breite: gesperrte Versalien in
     Manrope. Der Buchstabenabstand ist das Signal — eine
     Beschriftung sieht damit anders aus als ein Satz, ohne eine
     zweite Schriftdatei zu kosten. */
  .hc-lbl, .hc-eyebrow {
    font-size: var(--hc-text-label); letter-spacing: var(--hc-track-widest);
    text-transform: uppercase; font-weight: var(--hc-weight-semibold);
    color: var(--hc-ink-3);
  }
  .hc-eyebrow {
    display: flex; align-items: baseline; gap: var(--hc-space-3);
    color: var(--hc-wald);
  }
  .hc-eyebrow a { color: inherit; }
  .hc-eyebrow b { color: var(--hc-wald); font-weight: var(--hc-weight-semibold); }

  /* ── Chip ─────────────────────────────────────────────────────
     Eine Tatsache über etwas, kein Bedienelement. */
  .hc-chip {
    display: inline-flex; align-items: center; gap: var(--hc-space-2);
    font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
    text-transform: uppercase; font-weight: var(--hc-weight-medium);
    padding: 6px var(--hc-space-3);
    border: 1px solid var(--hc-pane-edge); border-radius: var(--hc-r-pill);
    color: var(--hc-ink-3);
  }
  a.hc-chip {
    text-decoration: none; color: var(--hc-wald);
    border-color: var(--hc-wald-soft);
    transition: background-color var(--hc-dur-fast) var(--hc-ease);
  }
  a.hc-chip:hover { background: var(--hc-wald-wash); }

  /* ── Zustand ──────────────────────────────────────────────────
     Nie der Punkt allein. Die Farbe ist das zweite Signal; das Wort
     daneben ist das erste. Auf einer Vorlage mit grüner Marke gilt
     das doppelt: ein grüner Punkt allein wäre nicht von der Marke
     zu unterscheiden. */
  .hc-status {
    display: inline-flex; align-items: center; gap: var(--hc-space-2);
    font-size: var(--hc-text-sm); color: var(--hc-ink-2);
  }
  .hc-status::before {
    content: ""; flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hc-ink-3);
  }
  .hc-status--ok::before     { background: var(--hc-ok); }
  .hc-status--warn::before   { background: var(--hc-warn); }
  .hc-status--danger::before { background: var(--hc-danger); }
  .hc-status--info::before   { background: var(--hc-info); }

  /* ── Meldung ──────────────────────────────────────────────── */
  .hc-alert {
    display: flex; gap: var(--hc-space-3);
    padding: var(--hc-space-4);
    border: 1px solid var(--hc-pane-edge);
    border-inline-start: 3px solid var(--hc-ink-3);
    border-radius: var(--hc-r-sm);
    background: var(--hc-pane);
    font-size: var(--hc-text-sm); color: var(--hc-ink-2);
    max-width: none;
  }
  .hc-alert strong { color: var(--hc-ink); font-weight: var(--hc-weight-semibold); }
  .hc-alert--ok     { border-inline-start-color: var(--hc-ok);     background: var(--hc-ok-wash); }
  .hc-alert--warn   { border-inline-start-color: var(--hc-warn);   background: var(--hc-warn-wash); }
  .hc-alert--danger { border-inline-start-color: var(--hc-danger); background: var(--hc-danger-wash); }
  .hc-alert--info   { border-inline-start-color: var(--hc-info);   background: var(--hc-info-wash); }

  /* ── Formulare ────────────────────────────────────────────────
     Beschriftung oben, Hinweis darunter, Fehler zuletzt und
     angesagt. Die Reihenfolge ist die Lesereihenfolge, also hängt
     nichts an einer Farbe oder an einer Position. */
  .hc-field { display: flex; flex-direction: column; gap: var(--hc-space-2); }
  .hc-label {
    font-size: var(--hc-text-sm); font-weight: var(--hc-weight-medium);
    color: var(--hc-ink);
  }
  .hc-input, .hc-select, .hc-textarea {
    width: 100%;
    padding: 11px var(--hc-space-4);
    font: inherit; font-size: var(--hc-text-sm);
    color: var(--hc-ink);
    background: var(--hc-pane-sunken);
    border: 1px solid var(--hc-pane-edge);
    border-radius: var(--hc-r-sm);
    transition: border-color var(--hc-dur-fast) var(--hc-ease);
  }
  .hc-input::placeholder, .hc-textarea::placeholder { color: var(--hc-ink-3); }
  .hc-input:hover, .hc-select:hover, .hc-textarea:hover { border-color: var(--hc-wald-soft); }
  .hc-textarea { min-height: 7lh; resize: vertical; }
  .hc-input:disabled, .hc-select:disabled, .hc-textarea:disabled {
    opacity: .5; cursor: not-allowed;
  }
  .hc-hint  { font-size: var(--hc-text-xs); color: var(--hc-ink-3); }
  .hc-error { font-size: var(--hc-text-xs); color: var(--hc-danger); }
  /* Getrieben von genau der Eigenschaft, die die Vorlesesoftware
     liest — die rote Kante kann dem Angesagten damit nicht
     widersprechen. */
  .hc-input[aria-invalid="true"],
  .hc-select[aria-invalid="true"],
  .hc-textarea[aria-invalid="true"] { border-color: var(--hc-danger); }

  /* ── Tabelle ──────────────────────────────────────────────────
     Linien zwischen den Zeilen, keine darum. Ein Gitter aus Kästen
     macht Zahlen schwerer lesbar, nicht leichter. */
  .hc-table { width: 100%; border-collapse: collapse; font-size: var(--hc-text-sm); }
  .hc-table th {
    text-align: start; padding: var(--hc-space-3) var(--hc-space-4);
    font-size: var(--hc-text-label); font-weight: var(--hc-weight-semibold);
    letter-spacing: var(--hc-track-wide); text-transform: uppercase;
    color: var(--hc-ink-3);
    border-block-end: 1px solid var(--hc-pane-edge);
  }
  .hc-table td {
    padding: var(--hc-space-3) var(--hc-space-4);
    color: var(--hc-ink-2);
    border-block-end: 1px solid var(--hc-hairline);
  }
  .hc-table tr:last-child td { border-block-end: 0; }
  .hc-table td.hc-num { font-variant-numeric: tabular-nums; }
  .hc-table-scroll { overflow-x: auto; }

  /* ── Textrollen ───────────────────────────────────────────── */
  .hc-display {
    font-size: var(--hc-display); font-weight: var(--hc-weight-thin);
    line-height: var(--hc-leading-tight); letter-spacing: var(--hc-track-tight);
    max-width: 15ch;
  }
  .hc-display em { font-style: normal; font-weight: var(--hc-weight-medium); color: var(--hc-wald); }
  .hc-title { font-size: var(--hc-display-sm); font-weight: var(--hc-weight-medium); }
  .hc-claim {
    font-size: var(--hc-text-xl); font-weight: var(--hc-weight-regular);
    line-height: var(--hc-leading-snug); letter-spacing: var(--hc-track-snug);
    color: var(--hc-wald); max-width: 32ch;
  }
  .hc-lede { font-size: var(--hc-text-lg); color: var(--hc-ink-2); max-width: 54ch; }
  .hc-muted { color: var(--hc-ink-2); }
  .hc-dim   { color: var(--hc-ink-3); }

  /* ── Faktenzeilen ─────────────────────────────────────────────
     Begriff links, Wert rechts, eine Linie dazwischen. Die Form, in
     die jede Liste aus Angaben ohnehin läuft. */
  .hc-defs { margin: 0; }
  .hc-defs > div {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--hc-space-5);
    padding-block: var(--hc-space-4);
    border-block-start: 1px solid var(--hc-hairline);
  }
  .hc-defs > div:last-child { border-block-end: 1px solid var(--hc-hairline); }
  .hc-defs dt {
    font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
    text-transform: uppercase; font-weight: var(--hc-weight-semibold);
    color: var(--hc-ink-3); padding-block-start: 3px;
  }
  .hc-defs dd { margin: 0; color: var(--hc-ink-2); font-size: 15.5px; }
  @media (max-width: 640px) {
    .hc-defs > div { grid-template-columns: minmax(0, 1fr); gap: var(--hc-space-1); }
    .hc-defs dt { padding-block-start: 0; }
  }
}
@layer rudel.motif {
  /* Das Zeichenvokabular der Vorlage: der ruhige Waldsaum mit einem
     Weg davor, der im Aufmacher steht, wenn eine Seite kein
     Titelbild hat. Die Vorlage heisst Rudel, und ein Rudel läuft
     draussen.

     Die Klassen stehen HIER und nicht in der Ansicht, weil die
     Zeichnung zum Gestaltungssystem gehört. Das svg im Markup trägt
     deshalb kein fill und kein stroke als Literalwert — sonst folgte
     es einer eingestellten Marke nicht, und die eine Farbe der Seite
     stünde neben einer Zeichnung in einer anderen. */

  .hc-waldsaum { display: block; width: 100%; height: auto; }
  .hc-waldsaum .hc-w-fern  { fill: var(--hc-w-fern);  stroke: none; }
  .hc-waldsaum .hc-w-nah   { fill: var(--hc-w-nah);   stroke: none; }
  .hc-waldsaum .hc-w-boden { fill: var(--hc-w-boden); stroke: none; }
  .hc-waldsaum .hc-w-licht {
    fill: none; stroke: var(--hc-w-licht);
    stroke-width: 2; stroke-linecap: round;
  }
}
/* ══ CMS-Schicht ══════════════════════════════════════════════
   Was oben steht, kleidet ein Gestaltungssystem. Was hier steht,
   kleidet den Datenvertrag von Holzcloud CMS: die Kopfleiste aus
   .Menus, den Inhalt aus .Page, die Bausteine, die der Kern
   schreibt, und die zwölf Ansichten.

   Bewusst OHNE @layer. Die vier Schichten oben stehen in ihren
   Schichten, alles hier steht ausserhalb und gewinnt damit ohne
   Spezifitätsspiele. Genau darum darf hier kein @layer stehen — ein
   fünfter würde diesen Bereich wieder unter die eigenen vier UND
   unter .Site.Design stellen.

   Hier steht kein Farbwert. Steht doch einmal einer hier, gehört er
   nach oben in rudel.tokens und nicht hierher. Die einzige Ausnahme
   ist der Ausdruck ganz unten, und dort steht der Grund dabei.
   ══════════════════════════════════════════════════════════════ */

/* ── Brücke zu den Reglern der Verwaltung ─────────────────────
   internal/design/tokens.go gibt der Website genau sechs Namen. Sie
   kommen im <style> NACH diesem Stylesheet an, ebenfalls ausserhalb
   jeder Schicht — also gewinnen sie gegen alles hier.

   Zwei davon heissen im Gestaltungssystem schon genauso und meinen
   dasselbe: die Tinte und das Mass wirken allein durch ihren Namen
   und brauchen keine Zeile. Die anderen vier brauchen die Brücke
   unten, jeweils mit dem Entwurfswert aus rudel.tokens als Rückfall,
   damit die Vorlage ohne jede Einstellung genau so aussieht wie
   entworfen.

   Die Richtung geht immer vom Regler zum System, nie zurück. Ein
   Regler, der aus dem System läse, und ein System, das aus dem
   Regler liest, wären ein Zyklus im benutzerdefinierten Wert, und
   beide Werte fielen aus.

   Mehr braucht es nicht: alle Ableitungen in rudel.tokens zeigen
   über var() auf genau diese Namen, und var() wird erst am Ende
   aufgelöst. Eine eingestellte Marke zieht damit die halbe Palette
   mit — Schleier im Grund, Kante beim Überfahren, Zitatbalken,
   Fokusring —, und eine eingestellte Rundung zieht über die
   calc()-Familie in rudel.tokens die kleine und die grosse mit.

   Die vier Reglernamen dürfen in dieser ganzen Datei nur INNERHALB
   einer var()-Klammer stehen und nie links von einem Doppelpunkt —
   auch nicht in einem Kommentar. Das Prüftor liest die Datei als
   Text und unterscheidet Kommentar und Regel nicht. */
:root {
  --hc-wald:      var(--hc-brand,  #325737);
  --hc-ground:    var(--hc-paper,  #F7F6F0);
  --hc-font-sans: var(--hc-font,   Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif);
  --hc-r:         var(--hc-radius, 10px);
}

/* ── Brücke zu den Bausteinen ─────────────────────────────────
   assets/bausteine.css leitet seine eigenen Werte aus generischen
   Namen ab. Diese zehn Zeilen kleiden damit alle neun Bausteinarten
   auf einmal. Wer stattdessen .hc-block-Regeln nachbaut, hat zwei
   Gestaltungen zu pflegen und behält die zweite nicht.

   --paper ist bewusst der Seitengrund und nicht die Kartenfläche:
   .hc-knopf setzt ihn als SCHRIFTFARBE auf die Markenfläche, und
   eine Kartenfläche als Schrift auf Waldgrün wäre kaum lesbar. Dass
   .hc-karte und .hc-aufruf damit den Seitengrund als Füllung
   bekämen, korrigieren die Regeln im Baustein-Abschnitt weiter
   unten. */
:root {
  --ink:     var(--hc-ink);
  --paper:   var(--hc-ground);
  --brand:   var(--hc-wald);
  --line:    var(--hc-hairline);
  --space-3: var(--hc-space-5);
  --space-4: var(--hc-space-6);
  --step--1: var(--hc-text-sm);
  --step-1:  var(--hc-text-lg);
  --step-2:  var(--hc-text-xl);
  --radius:  var(--hc-r);
}

html { scroll-padding-top: var(--hc-space-9); }

/* ── Sprung zum Inhalt ────────────────────────────────────────
   Der Name muss skip-link heissen: er ist die Verabredung, die alle
   mitgelieferten Vorlagen teilen, und die Testreihe sucht ihn
   wörtlich. Geklemmt statt nach -9999px geschoben — ein Kasten
   ausserhalb der Seite erzeugt in manchen Browsern eine
   Bildlaufleiste. */
.skip-link {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; inset-block-start: var(--hc-space-3); inset-inline-start: var(--hc-space-3);
  z-index: 60; width: auto; height: auto; clip-path: none;
  padding: 10px var(--hc-space-4); border-radius: var(--hc-r-sm);
  background: var(--hc-wald); color: var(--hc-on-wald);
  font-weight: var(--hc-weight-semibold); text-decoration: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Kopfleiste ───────────────────────────────────────────────
   .hc-bar bringt Kleben, Papierdeckung und Kante mit; was hier
   steht, ist der Inhalt darin. */
/* flex: 0 1 auto statt none, dazu min-width: 0 — ein Betrieb mit
   einem langen Namen („Hundezucht Delnahida") sprengte die Leiste
   sonst auf einem Telefon nach rechts hinaus, weil ein
   flex: none-Element auf seiner max-content-Breite besteht. */
.site-mark { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.site-mark b { min-width: 0; overflow-wrap: break-word; font-weight: var(--hc-weight-semibold); }
.site-logo {
  width: auto; height: 32px; flex: none;
  margin-inline-end: var(--hc-space-3);
  border-radius: var(--hc-r-sm);
}

/* menuFor liefert nackte <ul><li><a> bis in die dritte Ebene, ohne
   eine einzige Klasse. Alles hier hängt deshalb an der Abstammung. */
.site-menu { margin-inline-start: auto; min-width: 0; }
.site-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 2vw, 28px);
}
.site-menu li { position: relative; }
.site-menu a {
  display: inline-block;
  color: var(--hc-ink-2); text-decoration: none;
  font-size: 15px; font-weight: var(--hc-weight-medium);
  padding-block: var(--hc-space-2);
  border-block-end: 1px solid transparent;
  transition: color var(--hc-dur-fast) var(--hc-ease),
              border-color var(--hc-dur-fast) var(--hc-ease);
}
.site-menu a:hover { color: var(--hc-ink); border-block-end-color: var(--hc-wald-soft); }
.site-menu a[aria-current="page"] { color: var(--hc-wald); border-block-end-color: var(--hc-wald); }

/* Untermenüs ohne eine Zeile Javascript: sie hängen an :hover und
   an :focus-within, also erreicht die Tastatur sie genauso wie der
   Zeiger. Geschaltet wird über Sichtbarkeit und Deckkraft und nicht
   über display, damit der Übergang etwas zu animieren hat.

   Delnahida hat sechs Hauptpunkte, zwei davon mit Untermenü. */
.site-menu li > ul {
  position: absolute; inset-inline-start: 0; inset-block-start: 100%;
  z-index: 40;
  flex-direction: column; align-items: stretch;
  gap: 0;
  min-width: max-content;
  margin-block-start: var(--hc-space-2);
  padding: var(--hc-space-2);
  background: var(--hc-pane-bar-solid);
  border: 1px solid var(--hc-pane-edge);
  border-radius: var(--hc-r-sm);
  box-shadow: var(--hc-shadow-pane);
  visibility: hidden; opacity: 0;
  transition: opacity var(--hc-dur-fast) var(--hc-ease),
              visibility var(--hc-dur-fast) var(--hc-ease);
}
.site-menu li:hover > ul,
.site-menu li:focus-within > ul { visibility: visible; opacity: 1; }
.site-menu li > ul a {
  display: block; width: 100%;
  padding: var(--hc-space-2) var(--hc-space-3);
  border-block-end: 0; border-radius: var(--hc-r-sm);
}
.site-menu li > ul a:hover { background: var(--hc-wald-wash); }

/* Ein Untermenü darf die Seite nie breiter machen als das Fenster.
 *
 * Der Fehler, den diese zwei Regeln verhindern, ist unsichtbar, bis man ihn
 * misst: ein Untermenü hängt an `inset-inline-start: 0` seines <li> und wächst
 * nach RECHTS. Steht das <li> nahe am rechten Rand, ragt es hinaus. Dass es
 * zugeklappt ist, hilft nicht — ein absolut positioniertes Element mit
 * `visibility: hidden` zählt weiterhin zur Scrollbreite. Der Besucher bekommt
 * also eine waagrechte Bildlaufleiste auf JEDER Seite, ohne das Menü je zu
 * öffnen; und öffnet er es, ist der rechte Rand abgeschnitten.
 *
 * An der Schwestervorlage `weide` mit echtem Inhalt gemessen: Fensterbreite
 * 1280, Inhaltsbreite 1265, scrollWidth 1271 — sechs Pixel, auf jeder Seite.
 * Im Prüfstand nachgestellt: ein Untermenü mit einem langen Eintrag ergab bei
 * 1265 px Inhaltsbreite eine scrollWidth von 1319, also 54 px Überlauf; mit
 * diesen Regeln 1280 zu 1280.
 *
 * Für Delnahida schlägt es heute NICHT durch — nachgemessen, nicht vermutet:
 * die Untermenüs hängen am zweiten und vierten von sechs Punkten und enden bei
 * 1016 px (Fenster 1280) und 851 px (Fenster 1100). Die Regeln stehen
 * trotzdem hier: welcher Punkt am rechten Rand steht, entscheidet der Inhalt
 * des Menüs und nicht die Vorlage, und ein zusätzlicher Menüpunkt kippt das
 * ohne jede Vorwarnung.
 *
 * Erste Regel — der Deckel: ein Untermenü kann nie breiter werden als der
 * Inhaltsbereich der Seite. Das begrenzt den Schaden in jedem Fall, auch in
 * dem, den die zweite Regel nicht trifft.
 *
 * Zweite Regel — die Ausrichtung: ein Untermenü an einem der beiden LETZTEN
 * Punkte richtet sich nach rechts aus und wächst nach links. Die zwei
 * letzten Punkte sind es, weil dort der rechte Rand ist: das Menü steht über
 * `margin-inline-start: auto` immer am rechten Ende der Leiste.
 *
 * `:nth-child(n+3)` ist die Wache für das ANDERE Ende. Ohne sie träfe die
 * Regel bei einem Menü aus zwei oder drei Punkten auch den ersten, und ein
 * breites Untermehr am ersten Punkt liefe nach LINKS hinaus — derselbe Fehler,
 * spiegelverkehrt. Beide Enden sind im Prüfstand gemessen worden, auch der
 * Fall eines umgebrochenen Menüs, bei dem der letzte Punkt auf der zweiten
 * Zeile weit links landet: dort blieben 123 px Luft zum linken Rand.
 *
 * Was diese Regeln NICHT abdecken: ein sehr breites Untermenü in der MITTE
 * eines langen Menüs. Echte Kollisionserkennung könnte das, aber
 * `position-try-fallbacks: flip-inline` wirkt nur an Elementen, die über
 * `anchor-name` positioniert sind — im Prüfstand ausprobiert: die Eigenschaft
 * wird unterstützt und bleibt hier wirkungslos. Ein Menü, dessen mittlerer
 * Punkt bis an den rechten Rand reicht, ist ohnehin ein Menü, das umbricht.
 *
 * Kein `overflow: clip` an der Leiste oder am <body>. Das nähme die
 * Bildlaufleiste, aber es schnitte auch das aufgeklappte Untermenü ab — es
 * MUSS über die Leiste hinausragen dürfen. Eine Vertuschung, keine Lösung. */
.site-menu > ul > li > ul {
  max-inline-size: min(22rem, calc(100vw - 2 * var(--hc-gutter)));
}
.site-menu > ul > li:nth-child(n+3):nth-last-child(-n+2) > ul {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Die Sprachwahl behält den Namen .lang-nav aus der bisherigen
   Fassung: bausteine.css grundgestaltet sie unter diesem Namen
   bereits, und ein neuer Name hiesse, das erst abzuräumen. */
.lang-nav { flex: none; padding-block: 0; }
.lang-nav ul { gap: 2px; }
.lang-nav a, .lang-nav span {
  display: inline-block;
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-medium);
  color: var(--hc-ink-3); text-decoration: none;
  padding: 6px 8px; border-radius: 7px;
  transition: color var(--hc-dur-fast) var(--hc-ease),
              background-color var(--hc-dur-fast) var(--hc-ease);
}
.lang-nav a:hover { color: var(--hc-ink); background: var(--hc-wald-wash); text-decoration: none; }
.lang-nav [aria-current] { color: var(--hc-wald); opacity: 1; }

/* Die Suche in der Leiste ist ein GET-Formular und funktioniert ohne
   alles. Sie erscheint nur, wenn die Website überhaupt sucht. */
.site-search { display: flex; align-items: center; gap: var(--hc-space-2); flex: none; }
.site-search .hc-input { width: clamp(9rem, 16vw, 15rem); padding-block: 8px; }

.site-cart {
  display: inline-flex; align-items: center; gap: var(--hc-space-2);
  flex: none;
  color: var(--hc-ink-2); text-decoration: none;
  font-size: 14.5px; font-weight: var(--hc-weight-medium);
  padding: 8px 15px; border-radius: var(--hc-r-pill);
  border: 1px solid var(--hc-pane-edge);
  transition: color var(--hc-dur-fast) var(--hc-ease),
              border-color var(--hc-dur-fast) var(--hc-ease);
}
.site-cart:hover { color: var(--hc-ink); border-color: var(--hc-wald-soft); }
.site-cart__count { color: var(--hc-wald); font-variant-numeric: tabular-nums; font-weight: var(--hc-weight-semibold); }

/* ── Der Menüschalter ─────────────────────────────────────────
   Oberhalb von 1000 px gibt es ihn nicht. display: none — nicht
   „optisch versteckt": ein Element mit display: none ist aus dem
   Tabulatorweg UND aus dem Baum der Hilfsmittel heraus, und genau
   das ist der Einwand gegen einen Schalter, den niemand sieht.
   Unterhalb der Schwelle holt die Medienabfrage weiter unten beides
   zurück. */
.nav-switch, .nav-button { display: none; }

/* Hat die Website gar kein Hauptmenü, gibt menuFor eine leere
   Zeichenkette zurück (internal/menu/render.go:20) — dann steht in
   .site-menu kein <ul>, und ein Knopf, der ein leeres Fach öffnet,
   wäre schlimmer als keiner. */
.hc-bar__inner:not(:has(.site-menu ul)) .nav-button { display: none !important; }

/* ── Der Inhalt ───────────────────────────────────────────────
   <main> trägt keine Breite: die Ansichten setzen .hc-wide selbst,
   damit eine Startseite eine Fläche über die ganze Breite legen kann
   und ein Artikel trotzdem in seinem Mass bleibt. */
main { display: block; }
main:focus { outline: none; }
.page-wrap { padding-block: clamp(var(--hc-space-6), 6vh, var(--hc-space-9)); }

/* Der Textkörper ist schmal, die Bilder sind es nicht.
 *
 * Zwei Rasterspalten statt max-width am Elternteil: die zweite ist unter dem
 * Mass null breit, also stapelt sich das auf dem Telefon von selbst, ohne eine
 * zweite Regel in einer Medienabfrage.
 *
 * Das Mass kommt aus --hc-measure, also aus dem Regler der Verwaltung, mit 66
 * Zeichen als Rückfall. */
.page-content {
  display: grid;
  grid-template-columns: [text-start] min(100%, var(--hc-measure, 66ch)) [text-end] minmax(0, 1fr) [breit-ende];
}
.page-content > * { grid-column: text-start / text-end; min-width: 0; }
/* Was die Breite füllen SOLL, füllt sie.
 *
 * Die Regel dahinter, damit ein neuer Bausteintyp nicht wieder geraten werden
 * muss: BREIT ist, was von sich aus mehrspaltig ist oder ein Bild in seiner
 * natürlichen Grösse zeigt. SCHMAL bleibt, was gelesen wird.
 *
 * Danach ist .hc-aufruf schmal, obwohl er eine Fläche ist: mittig gesetzter
 * Kurztext mit einem Knopf, über die volle Breite gezogen stünde er verloren.
 * Und .hc-bildtext ist breit, obwohl er Text enthält: er IST zwei Spalten.
 *
 * .hc-karten und .hc-bildtext stehen hier mit — anders als in der
 * Schwestervorlage `weide`, wo beide fehlen. Am laufenden Server bei 1280 px
 * gemessen: Raster 1178 px, Textspalte 705 px. Drei oder vier Karten brechen
 * darin auf 2+1 um, und wer das bemerkt, zwingt die Spaltenzahl in der
 * Verwaltung hoch — eine Notlösung gegen ein Vorlagenproblem. Einem bildtext
 * bleiben in der Textspalte 340 px fürs Bild und rund 30 Zeichen je Zeile
 * daneben: die Auszeichnung verspricht zwei Spalten, das Raster gäbe ihr eine
 * halbe.
 *
 * Für diese Website sind beide der wichtigere Teil: die Startseite besteht in
 * weiten Teilen aus Kartenreihen, und die zwölf Tierporträts sind alle
 * Bild-neben-Text. */
.page-content > :is(.hc-galerie, .hc-karten, .hc-bildtext, .hc-video,
                    .hc-bild--breit, .hc-bild--voll) {
  grid-column: text-start / breit-ende;
}
.page-content > * + * { margin-block-start: var(--hc-space-5); }

/* Überschriften: die GRÖSSE gilt überall, der ABSTAND nur oben.
 *
 * Der Kindselektor `>` trifft nur direkte Kinder von .page-content. Eine
 * Überschrift INNERHALB eines Bausteins — in .hc-text, in .hc-bildtext__text,
 * oder in einer handgeschriebenen <section> — ist keines und bliebe sonst auf
 * der Grösse des Fliesstextes stehen. In der Schwestervorlage `weide` hängen
 * Grösse und Abstand an derselben Regel, und dort ist genau das der Fehler:
 * eine h2 misst im Baustein 26 px und auf einer Markdown-Seite 37 px. Auf
 * einer Website, auf der umgegliederte und unangetastete Seiten nebeneinander
 * stehen, ist das ein sichtbarer Bruch von Seite zu Seite.
 *
 * Der grosse Abstand VOR der Überschrift bleibt dagegen bei den direkten
 * Kindern: dort eröffnet er einen Abschnitt der Seite. Innerhalb eines
 * Bausteins wäre er zu viel — eine Karte ist keine Seite.
 *
 * Ausgenommen sind die zwei Überschriften, die einem Baustein als dessen Titel
 * gehören (internal/block/render.go:185 und :225). Sie haben ihre eigene
 * Grösse aus bausteine.css, und die ist richtig: ein Kartentitel ist kein
 * Abschnittstitel. */
.page-content :where(h2):not(.hc-aufruf__titel) { font-size: var(--hc-text-2xl); }
.page-content :where(h3):not(.hc-karte__titel)  { font-size: var(--hc-text-xl); }
.page-content > :where(h2) { margin-block-start: var(--hc-space-8); }
.page-content > :where(h3) { margin-block-start: var(--hc-space-7); }
.page-content > :where(h2, h3):first-child { margin-block-start: 0; }
.page-content :where(h2, h3) { max-width: var(--hc-measure, 66ch); }

/* Ein Bild allein in seinem Absatz ist eine Figur und kein Wort im Satz.
 * Markdown macht daraus ein <p><img></p>, also hängt die Regel an :has() —
 * ohne sie klebte der Absatz danach am Bild, weil ein <p> mit Bild darin
 * genauso viel Luft bekäme wie ein <p> mit Text.
 *
 * Und die Figur ist BREIT: sie spannt bis breit-ende, wie .hc-bild--voll.
 * Das ist die Zeile, die eine Seite aus reinem Markdown trägt. Auf einer
 * Seite mit Karten, Galerien und einem Aufmacher hat die zweite Rasterspalte
 * etwas zu tun; auf einer Seite, die nur aus Überschrift, Bild, Absatz und
 * Link besteht, stand sie leer — in `weide` waren das bei 1265 px Seitenbreite
 * über 700 px Nichts neben einem 440 px schmalen Streifen, also 62 % der
 * Breite. Genau der Eindruck, gegen den diese Vorlage angetreten ist.
 *
 * Nur wenn das Bild ALLEIN im Absatz steht. Ein Bild mitten im Satz bleibt,
 * wo es ist — dafür sorgt :only-child.
 *
 * Ein Browser ohne :has() lässt beide Regeln fallen und zeigt das Bild in der
 * Textspalte, also den Zustand von vorher. Ein tragbarer Rückfall: die Seite
 * bleibt lesbar, sie ist nur schmaler. */
.page-content > :is(p:has(> :is(img, picture):only-child), figure:not(.hc-block):has(> img)) {
  grid-column: text-start / breit-ende;
  margin-block: var(--hc-space-7);
  max-width: none;
}
.page-content > :is(p:has(> :is(img, picture):only-child), figure:not(.hc-block):has(> img)) + * {
  margin-block-start: var(--hc-space-7);
}
/* inline-size: auto statt 100 %, dazu eine Höchsthöhe.
 *
 * Auf DIESER Website ist die Höhengrenze die tragende Regel und keine
 * Vorsichtsmassnahme: die Seite lebt von 85 Hundefotos, viele davon im
 * Hochformat, und ein Hochformat über die volle Breite wäre anderthalb
 * Bildschirme hoch. Ein Querformat füllt die breite Spalte, ein Hochformat
 * schrumpft auf 70vh und steht mittig.
 *
 * Kein object-fit: cover, weil ein Zuschnitt hier Hunde anschneidet, und kein
 * contain, weil dessen leere Streifen INNERHALB der Kante lägen und die Figur
 * als schlecht sitzendes Bild lesen würden. So umschliesst die Haarlinie immer
 * genau das Bild.
 *
 * Der Preis: ein Bild, das schmaler ist als die Spalte, wird nicht
 * hochgerechnet — es steht mittig in seiner natürlichen Grösse. Das ist die
 * richtige Seite des Handels: ein hochskaliertes Foto ist sichtbar weich. */
.page-content > p:has(> :is(img, picture):only-child) > :is(img, picture),
.page-content > figure:not(.hc-block) > img {
  display: block;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: 70vh;
  margin-inline: auto;
  border-radius: var(--hc-r);
  border: 1px solid var(--hc-hairline);
}
/* Die Bildunterschrift geht mit in die breite Spalte und steht unter dem
   Bild, nicht unter der Textspalte. */
.page-content > figure:not(.hc-block) > figcaption {
  margin-block-start: var(--hc-space-3);
  text-align: center;
  font-size: var(--hc-text-xs); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-medium);
  color: var(--hc-ink-3);
}

/* ── Übergangsform: handgeschriebenes HTML im Fliesstext ──────
 *
 * Diese Website trägt heute handgeschriebenes HTML im Markdown: die Startseite
 * baut ihre Kartenreihen als <div><section>…</section><section>…</section></div>
 * und ihren Aktuell-Kasten als <aside>. bluemonday lässt div, section und
 * aside unverändert durch (UGCPolicy in internal/page/markdown.go), es landet
 * also genau so im Inhalt.
 *
 * Diese Regeln gelten einer ÜBERGANGSFORM. Der Inhalt wird später in echte
 * Bausteine umgezogen, und dann greifen die hc-*-Regeln; bis dahin sähe die
 * Startseite nach der Neugestaltung sonst schlechter aus als vorher. Deshalb
 * bekommt jede Übergangsform dieselbe Breite und dieselbe Form wie der
 * Baustein, der später aus ihr wird: die <section>-Gruppe wird eine
 * Kartenreihe und ist darum breit, das <aside> wird ein aufruf und bleibt
 * darum schmal. Wer den Inhalt umgliedert, soll keinen Sprung sehen.
 *
 * Erkennbar ist die Gruppe an ihren Kindern, nicht an einer Klasse: ein <div>
 * mit <section>-Kindern ist im Fliesstext nichts anderes als eine Kartenreihe.
 * Ein Browser ohne :has() lässt die Regel fallen und zeigt die Abschnitte
 * untereinander — lesbar, nur ohne Raster. */
/* Ein Bild in einer handgeschriebenen <section> kennt dieselbe Höhengrenze wie
   das Bild im bildtext-Baustein, aus demselben Grund und mit derselben Zahl:
   auch hier gibt es keine Bildmitte aus dem Kern, also wird nicht
   zugeschnitten, sondern die Höhe begrenzt. Diese Regel fängt die
   <section>-Blöcke, die NICHT in einer Gruppe stehen; die Kacheln einer Gruppe
   werden weiter unten zugeschnitten und sind dadurch ohnehin niedrig. */
.page-content section img {
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: min(52vh, 500px);
}

.page-content > div:has(> section) {
  grid-column: text-start / breit-ende;
  display: grid; gap: var(--hc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: none;
}
.page-content > div:has(> section) > section {
  display: flex; flex-direction: column; gap: var(--hc-space-3);
  padding: var(--hc-space-5);
  background: var(--hc-pane);
  border: 1px solid var(--hc-pane-edge);
  border-radius: var(--hc-r);
  box-shadow: var(--hc-shadow-pane);
}
/* Die Überschrift in so einem Abschnitt ist ein Kartentitel und kein
   Abschnittstitel der Seite. Die Grössenregel weiter oben trifft sie, der
   grosse Abstand davor nicht — genau das ist der Grund, warum die zwei
   getrennt sind. */
.page-content > div:has(> section) > section :where(h2, h3) {
  font-size: var(--hc-text-lg); max-width: none;
}
.page-content > div:has(> section) > section :where(p) { font-size: var(--hc-text-sm); color: var(--hc-ink-2); max-width: none; }
/* Ein Bild in so einer Kachel wird zugeschnitten wie ein Kartenbild, damit die
   Reihe eine Reihe bleibt. Es ist handgeschrieben, hat also keine Angabe zur
   Bildmitte aus dem Kern; ein fester Zuschnitt ins obere Drittel ist die beste
   Vermutung, die sich ohne diese Angabe treffen lässt — auf einem Hundefoto
   steht der Kopf fast immer oben. */
.page-content > div:has(> section) > section img {
  inline-size: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}

/* Ein <aside> im Fliesstext ist ein hervorgehobener Kasten — auf dieser
   Website der Aktuell-Kasten der Startseite.
 *
 * Er bleibt SCHMAL, in der Textspalte. Nach der Regel weiter oben ist er
 * nichts anderes als ein .hc-aufruf: kurzer Text, der gelesen wird, weder
 * mehrspaltig noch ein Bild. Über die volle Breite gezogen stünde er verloren
 * — und genau ein .hc-aufruf wird er, wenn der Inhalt später umgegliedert
 * wird. Die Breite darf beim Umzug nicht springen. */
.page-content > aside {
  padding: clamp(var(--hc-space-5), 3vw, var(--hc-space-6));
  background: var(--hc-pane);
  border: 1px solid var(--hc-pane-edge);
  border-inline-start: 3px solid var(--hc-wald);
  border-radius: var(--hc-r);
  box-shadow: var(--hc-shadow-pane);
}
.page-content > aside > * + * { margin-block-start: var(--hc-space-4); }

.page-content :where(ul, ol) { padding-inline-start: var(--hc-space-5); }
.page-content :where(li + li) { margin-block-start: var(--hc-space-2); }
.page-content :where(a) { color: var(--hc-wald); text-underline-offset: 3px; }
.page-content :where(a):hover { text-decoration-thickness: 2px; }
.page-content :where(strong) { font-weight: var(--hc-weight-semibold); }
.page-content :where(blockquote) {
  margin-inline: 0; padding-inline-start: var(--hc-space-5);
  border-inline-start: 3px solid var(--hc-wald-soft);
  color: var(--hc-ink-2);
}
.page-content :where(table) { width: 100%; border-collapse: collapse; font-size: var(--hc-text-sm); }
.page-content :where(th, td) {
  text-align: start; padding: var(--hc-space-3) var(--hc-space-4);
  border-block-end: 1px solid var(--hc-hairline);
}
.page-content :where(pre) {
  padding: var(--hc-space-4); overflow-x: auto;
  background: var(--hc-pane-sunken);
  border: 1px solid var(--hc-hairline); border-radius: var(--hc-r-sm);
}
.page-content :where(mark), mark {
  background: var(--hc-wald-wash); color: var(--hc-ink);
  padding-inline: 2px; border-radius: 3px;
}
.page-content :where(hr) { border: 0; border-block-start: 1px solid var(--hc-hairline); }

/* ── Fusszeile ────────────────────────────────────────────────
   Mehrspaltig, weil hier fünf verschiedene Dinge stehen: die Marke
   mit der Pfote, die Fussnavigation, der Kontakt, die
   Schwesterseite und die Schlagwörter. Untereinander wäre das eine
   zweite Seite. */
.site-footer {
  margin-block-start: var(--hc-space-9);
  padding-block: var(--hc-space-7);
  border-block-start: 1px solid var(--hc-hairline);
  background: color-mix(in srgb, var(--hc-ground) 55%, transparent);
}
.site-footer__inner {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--hc-space-6) var(--hc-space-7);
}
.site-footer__mark {
  width: 48px; height: 48px; display: block;
  color: var(--hc-wald);
  margin-block-end: var(--hc-space-3);
}
.site-footer__name {
  margin: 0; font-size: var(--hc-text-lg); font-weight: var(--hc-weight-semibold);
  letter-spacing: var(--hc-track-snug);
}
.site-footer__tagline { margin: var(--hc-space-2) 0 0; font-size: var(--hc-text-sm); color: var(--hc-ink-3); }
.site-footer__heading {
  margin: 0 0 var(--hc-space-3);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-widest);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.site-footer p, .site-footer li { font-size: var(--hc-text-sm); color: var(--hc-ink-2); }
.site-footer a { color: var(--hc-ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--hc-wald); text-decoration: underline; }
.site-footer__contact > * + *, .site-footer__sister > * + * { margin-block-start: var(--hc-space-2); }
/* Die Schwesterseite steht in der Grundschriftgrösse und in --hc-ink-2, nicht
   in der kleinsten Stufe wie der Rest des Fusses: sie ist der Verweis auf den
   zweiten Auftritt desselben Hauses und muss sich als Satz lesen, nicht als
   Kleingedrucktes. Die Vorlage `weide` benutzt denselben Bausteinnamen für den
   Rückverweis — die beiden Websites zeigen aufeinander, und ein Verweis, den
   nur eine Seite sichtbar macht, ist ein halber. */
.site-footer__sister p { font-size: var(--hc-text-base); color: var(--hc-ink-2); }
.site-footer__sister a { color: var(--hc-wald); text-decoration: underline; text-underline-offset: 3px; }
.footer-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--hc-space-2);
}
/* Die zweite Ebene einer Fussnavigation ist kein Menü mehr, sondern
   eine Liste in einer Liste. Sie bleibt weg. */
.footer-nav ul ul { display: none; }
.site-footer__terms .term-list { margin-block-start: 0; }
.site-footer__legal {
  margin: var(--hc-space-6) auto 0;
  width: 100%; max-width: var(--hc-wide);
  padding-inline: var(--hc-gutter);
  font-size: var(--hc-text-xs); color: var(--hc-ink-3);
}

/* ══ Die Möblierung von page.html ═════════════════════════════ */
.preview-banner {
  display: flex; gap: var(--hc-space-3);
  margin-block-end: var(--hc-space-6);
  padding: var(--hc-space-4);
  border: 1px solid var(--hc-pane-edge);
  border-inline-start: 3px solid var(--hc-warn);
  border-radius: var(--hc-r-sm);
  background: var(--hc-warn-wash);
  font-size: var(--hc-text-sm); color: var(--hc-ink-2);
  max-width: none;
}

/* Der Kopf einer Textseite ist schlanker als der Aufmacher der
   Startseite: hier hat der Leser schon entschieden, dass er liest. */
.page-header { margin-block-end: var(--hc-space-6); max-width: var(--hc-measure, 66ch); }
.page-header h1 { font-size: var(--hc-display-sm); font-weight: var(--hc-weight-medium); }
.page-date {
  display: block; margin-block-start: var(--hc-space-3);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}

/* Eigene Felder — dieselbe Faktenzeile wie .hc-defs, nur an einer
   <dl> ohne Zwischenelement: der Kern schreibt <dt>/<dd> direkt
   nebeneinander, .hc-defs erwartet ein <div> je Paar. Auf dieser
   Website tragen die zwölf Tierporträts ihre Angaben hier — Wurftag,
   Farbe, Elterntiere. */
.page-fields {
  margin-block-start: var(--hc-space-8);
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 var(--hc-space-5);
  max-width: min(100%, 62ch);
}
.page-fields dt {
  padding-block: var(--hc-space-4) 0;
  border-block-start: 1px solid var(--hc-hairline);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.page-fields dd {
  margin: 0; padding-block: var(--hc-space-4);
  border-block-start: 1px solid var(--hc-hairline);
  color: var(--hc-ink-2); font-size: 15.5px;
}
.page-fields dd:last-of-type { border-block-end: 1px solid var(--hc-hairline); }
.page-fields dt:last-of-type { border-block-end: 1px solid var(--hc-hairline); }
.page-fields a { color: var(--hc-wald); }
/* Ein Feld vom Typ „bild" ist oft ein Hochformat — ein Ahnentafel-Foto, ein
   Wurfbild. Dieselbe Höhengrenze wie im Fliesstext, aus demselben Grund. */
.page-fields img {
  display: block; max-block-size: 50vh; inline-size: auto; max-inline-size: 100%;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}
.page-fields__rows { list-style: none; margin: 0; padding: 0; }
.page-fields__rows li + li { margin-block-start: var(--hc-space-2); }
.page-fields__rowlabel {
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
@media (max-width: 640px) {
  .page-fields { grid-template-columns: minmax(0, 1fr); }
  .page-fields dt { border-block-end: 0; padding-block-end: 0; }
  .page-fields dd { border-block-start: 0; padding-block-start: var(--hc-space-1); }
  .page-fields dt:last-of-type { border-block-end: 0; }
}

/* Schlagwörter — die Chips des Systems. */
.term-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--hc-space-2);
  margin-block-start: var(--hc-space-6);
}
.term {
  display: inline-flex; align-items: center; gap: var(--hc-space-2);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-medium);
  padding: 6px var(--hc-space-3);
  border: 1px solid var(--hc-wald-soft); border-radius: var(--hc-r-pill);
  color: var(--hc-wald); text-decoration: none;
  transition: background-color var(--hc-dur-fast) var(--hc-ease);
}
.term:hover { background: var(--hc-wald-wash); text-decoration: none; }

/* Nachbarbeiträge — drei Ziele in einer Zeile, aussen die Richtung.
   Die bisherige Fassung zeigt beim Nachbarn ausser der Richtung auch
   dessen Titel; das bleibt, denn „Älterer Beitrag" allein sagt
   niemandem, wohin er kommt. */
.post-nav {
  display: flex; flex-wrap: wrap; gap: var(--hc-space-4);
  align-items: baseline; justify-content: space-between;
  margin-block-start: var(--hc-space-8);
  padding-block-start: var(--hc-space-5);
  border-block-start: 1px solid var(--hc-hairline);
  font-size: var(--hc-text-sm);
}
.post-nav a { color: var(--hc-ink-2); text-decoration: none; }
.post-nav a:hover { color: var(--hc-wald); }
.post-nav__link { display: flex; flex-direction: column; gap: 2px; max-width: 22ch; }
.post-nav__label {
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.post-nav__title { font-weight: var(--hc-weight-medium); }
.post-nav__index {
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
}
.post-nav__next { margin-inline-start: auto; text-align: end; }

/* ── Schmalere Fenster ────────────────────────────────────────
   Hier klappt die Navigation zu, und der Schalter dafür ist eine
   Checkbox — kein Skript, diese Vorlage liefert keines aus.

   DIE OBERSTE LISTE MUSS HIER EINE SPALTE SEIN. Das ist die Zeile,
   an der die Schwestervorlage `weide` schon einmal gebrochen ist:
   `.site-menu ul` steht oben auf `display: flex; flex-wrap: wrap` in
   ZEILENrichtung. Ein <li> mit Untermenü wird darin zu einem breiten
   Flex-Element, dessen Kinder — der <a> und das jetzt statische
   <ul> — nebeneinander laufen; die Zeile bricht um dieses breite
   Element herum, und heraus kommt ein Treppenmuster aus drei
   verschiedenen Einzügen, in dem die Reihenfolge der Menüpunkte
   nicht mehr zu lesen ist. Ein `flex-direction: row` auf `li > ul`
   verstärkt es. Beide Ebenen stehen deshalb hier ausdrücklich auf
   column. Wer das eines Tages „aufräumt", holt das Treppenmuster
   zurück.

   Ausserdem die Menge: Delnahida hat SECHS Hauptpunkte, zwei davon
   mit Untermenü. Das sind rund 320 px Leiste, bevor auf einem
   Telefon der erste Inhalt kommt — auf jeder Seite. Deshalb
   zugeklappt statt umgebrochen. */
@media (max-width: 1000px) {
  .hc-bar__inner { flex-wrap: wrap; gap: 10px 18px; padding-block: var(--hc-space-3); }

  /* Für die Tastatur erreichbar, für das Auge unsichtbar. Hier NICHT
     display: none — das nähme der Checkbox den Fokus und damit die
     Bedienbarkeit ohne Maus. Oben, wo es den Schalter nicht geben
     soll, ist display: none genau richtig; hier wäre es der Fehler. */
  .nav-switch {
    display: block;
    position: absolute; inline-size: 1px; block-size: 1px;
    opacity: 0; pointer-events: none;
  }
  .nav-button {
    display: inline-flex; align-items: center; gap: .6em;
    flex: none; order: 1; margin-inline-start: auto;
    padding: 8px var(--hc-space-4);
    border: 1px solid var(--hc-pane-edge); border-radius: var(--hc-r-pill);
    background: var(--hc-pane);
    font-size: var(--hc-text-sm); font-weight: var(--hc-weight-medium);
    color: var(--hc-ink-2); cursor: pointer; user-select: none;
  }
  .nav-button__bars { display: grid; gap: 3px; inline-size: 1em; }
  .nav-button__bars span { display: block; block-size: 1.5px; background: currentColor; }
  /* Der Fokus liegt auf der unsichtbaren Checkbox; sichtbar wird er
     an der Beschriftung, die an ihrer Stelle steht. */
  .nav-switch:focus-visible + .hc-bar .nav-button {
    outline: var(--hc-focus-width) solid var(--hc-focus);
    outline-offset: var(--hc-focus-offset);
  }

  /* Zugeklappt heisst display: none. Damit sind auch die Punkte der
     Untermenüs aus dem Tabulatorweg — sichtbar-aber-nicht-erreichbar
     gibt es hier nicht. */
  .site-menu { display: none; margin-inline-start: 0; order: 3; width: 100%; }
  .nav-switch:checked + .hc-bar .site-menu {
    display: block;
    padding-block-end: var(--hc-space-2);
  }

  /* Beide Ebenen als Spalte, jedes <li> über die volle Breite. */
  .site-menu ul {
    flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; gap: 0;
  }
  .site-menu li { width: 100%; }
  .site-menu a {
    display: block; width: 100%;
    padding-block: 10px; border-block-end: 0;
  }
  .site-menu > ul > li + li { border-block-start: 1px solid var(--hc-hairline); }

  /* Umgeklappt ist kein Platz mehr für ein schwebendes Untermenü: es
     steht eingerückt unter seinem Punkt, immer sichtbar, mit einer
     Linie als Einzug — sie sagt die Verschachtelung, die die
     Einrückung allein auf einem Telefon nicht deutlich macht. */
  .site-menu li > ul {
    position: static; visibility: visible; opacity: 1;
    margin: 0 0 var(--hc-space-2) var(--hc-space-3); padding: 0;
    padding-inline-start: var(--hc-space-3);
    background: none; border: 0; box-shadow: none;
    border-inline-start: 1px solid var(--hc-hairline);
  }
  .site-menu li > ul a {
    display: block; width: auto;
    padding: var(--hc-space-2) 0;
    font-size: var(--hc-text-sm); color: var(--hc-ink-3);
  }
  .site-menu li > ul a:hover { background: none; color: var(--hc-ink); }

  .lang-nav { margin-inline-start: 0; order: 2; }
  .site-search { order: 4; width: 100%; }
  .site-search .hc-input { width: 100%; }
}
/* Auf einem Telefon nimmt die Suche in der Leiste mehr Platz, als sie
   wert ist. Sie verschwindet aber nicht: sie klappt mit dem Menü auf,
   an derselben Checkbox. Ganz wegzunehmen hiesse, dass ein Telefon
   die Suche der Website nur noch über die 404-Seite findet. */
@media (max-width: 600px) {
  .site-search { display: none; }
  .nav-switch:checked + .hc-bar .site-search { display: flex; }
}

/* ══ Der Aufmacher ════════════════════════════════════════════
   Zwei Spalten: links, was die Seite sagt, rechts das Titelbild —
   und wo keines gesetzt ist, die Waldsaum-Zeichnung. Auf einem
   schmalen Fenster untereinander; zwei Spalten auf einem Telefon
   sind zwei zu enge Spalten. */
.site-hero { padding-block: clamp(48px, 9vh, 104px) clamp(40px, 7vh, 80px); }
.site-hero-grid {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
}
.site-hero .hc-display { margin-block-start: var(--hc-space-4); }
.site-hero .hc-claim   { margin-block-start: var(--hc-space-5); }
.site-hero .hc-lede    { margin-block-start: var(--hc-space-5); }
.site-actions {
  display: flex; flex-wrap: wrap; gap: var(--hc-space-3);
  margin-block-start: var(--hc-space-6);
}
/* Bleibt auf einer nackten Website nichts übrig, das irgendwohin
   zeigt, soll auch kein Abstand übrig bleiben. */
.site-actions:empty { display: none; }

.site-art { justify-self: end; width: 100%; max-width: 620px; }
.site-art svg { width: 100%; height: auto; display: block; }
/* Hier weicht `rudel` bewusst von der Schwestervorlage `weide` ab: das
   Aufmacherbild wird NICHT zugeschnitten.
 *
 * `weide` zwingt es über aspect-ratio: 4/3 und object-fit: cover ins
 * Querformat. Das Titelbild ist aber ein blosser URL ohne jede Angabe zur
 * Bildmitte — anders als ein Galerie- oder Kartenbild, dem der Kern einen
 * Mittelpunkt mitgibt. Ein Zuschnitt auf Querformat trifft bei einem
 * hochformatigen Hundeporträt mit hoher Wahrscheinlichkeit den Kopf, und
 * genau davon lebt diese Website.
 *
 * Beide Hälften des Handels: ohne Zuschnitt ist die Spaltenhöhe nicht mehr
 * konstant, dafür geht kein Gesicht verloren. Ein Querformat füllt die Spalte,
 * ein Hochformat steht ganz und ruhig daneben und ist über min(70vh, 620px)
 * daran gehindert, den Aufmacher in die Länge zu ziehen. */
.site-art__bild {
  display: block; margin-inline: auto;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: min(70vh, 620px);
  border-radius: var(--hc-r-lg);
  border: 1px solid var(--hc-hairline);
  box-shadow: var(--hc-shadow-pane);
}
@media (max-width: 1000px) {
  .site-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .site-art { justify-self: start; max-width: 560px; margin-block-start: var(--hc-space-5); }
}

/* ══ Die Bausteine ════════════════════════════════════════════
   Die zehn Zeilen der Brücke weiter oben kleiden das meiste. Hier
   steht nur, was daraus NICHT folgt — und der Grund ist fast immer
   einer von zweien: das helle Papier, oder das Hochformat. Wer
   stattdessen .hc-block-Regeln nachbaut, hat zwei Gestaltungen zu
   pflegen und behält die zweite nicht. */

/* Bild — eine Haarlinie, damit ein helles Bild auf hellem Papier als
   Fenster liest und nicht ausfranst. Auf dunklem Grund braucht es
   sie nicht, dort trennt der Helligkeitssprung von selbst. */
.hc-bild img, .hc-galerie__bild img, .hc-eigen__bild img {
  border: 1px solid var(--hc-hairline);
}

/* Ein Bild wird in SEINER Grösse gezeigt; der Rahmen richtet sich danach,
 * nicht umgekehrt.
 *
 * Das ist ein Satz und zwei Zeilen, und sie gehören zusammen — wer eine davon
 * später entfernt, hat den halben Gedanken stehen lassen:
 *
 *   max-inline-size statt inline-size — kein Hochrechnen.
 *   max-block-size                    — kein Übertürmen.
 *
 * Es gilt für die drei Bausteinarten, die NICHT zugeschnitten werden:
 * .hc-bild, .hc-bildtext__bild und .hc-eigen__bild. internal/block/render.go
 * setzt das Zuschnitt-Kennzeichen nur für Galerie (Z. 165) und Karte (Z. 183);
 * nur dort entsteht aus der Bildmitte ein style-Attribut, und nur dort ist ein
 * fester Rahmen mit inline-size: 100 % richtig, weil er gefüllt sein muss.
 * Diesen dreien gibt der Kern keine Bildmitte mit — ein object-fit: cover
 * schnitte blind aus der geometrischen Mitte, und bei einem Hundeporträt ist
 * die Mitte nicht der Kopf.
 *
 * Beide Richtungen sind an echtem Inhalt aufgefallen:
 *   – zu gross: ein Hochformat 900×1600 wurde in einer 533-px-Spalte 533×945
 *     gezeigt, höher als das Fenster.
 *   – zu klein: eine 235 px breite Bildmarke wurde in einer 569-px-Spalte
 *     2,4-fach hochgerechnet und franste sichtbar aus.
 * Diese Website führt 85 Bilder, darunter Bildmarken und ältere Aufnahmen in
 * kleineren Massen; beides ist hier kein Randfall.
 *
 * bausteine.css setzt für diese drei inline-size: 100 % (Zeilen 50, 96 und
 * 299) und überschreibt damit sein eigenes, richtiges max-inline-size: 100 %
 * aus Zeile 34. Korrigiert wird das hier und nicht dort: die Datei gehört dem
 * Kern und kleidet alle acht mitgelieferten Vorlagen. Ihr Kommentarkopf hält
 * ausdrücklich fest, dass ein Theme alles davon überschreiben darf — genau
 * dafür gibt es diese Ebene.
 *
 * Der Preis, und er ist die richtige Seite des Handels: ein Bild schmaler als
 * seine Spalte steht mittig in seiner natürlichen Grösse, statt weichgerechnet
 * die Breite zu füllen. */
.hc-bild img, .hc-eigen__bild img {
  display: block; margin-inline: auto;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: 70vh;
}

/* Die drei Stufen des Bild-Bausteins, und sie sind hier eine Stufenleiter und
 * kein Zufall:
 *
 *   ohne Zusatz  — die Textspalte. Ein Bild auf Lesebreite; die bewusste Wahl
 *                  der Redaktion, wenn ein Bild zum Satz gehört und nicht zur
 *                  Seite.
 *   --breit      — die breite Spalte des Rasters, text-start / breit-ende,
 *                  genau wie .hc-karten und .hc-bildtext.
 *   --voll       — über die ganze Breite des Fensters.
 *
 * Damit --breit das tut, muss der Kunstgriff des Kerns hier NEUTRALISIERT
 * werden. bausteine.css:62-70 lässt ein Bild aus der Textspalte herauslaufen,
 * indem es sie prozentual überzieht: inline-size: min(115%, 100vw) mit
 * margin-inline: -7.5%. Das ist richtig für eine Vorlage OHNE Raster — dort
 * gibt es keine zweite Spalte, in die man ein Bild stellen könnte, also muss
 * es über den Rand hinauswachsen.
 *
 * Gegen ein Zweispaltenraster ergibt derselbe Kunstgriff aber 705 × 1.15 =
 * 810 px, während dieselbe Seite einem allein stehenden Bild im Markdown
 * 1163 px gibt. Zwei Wege zum selben Ziel mit zwei Ergebnissen, und der
 * ausdrücklich als „breit" ausgezeichnete war der schmalere. Prozentüberzug
 * und Rasterspalte kämpfen gegeneinander; die Rasterspalte gewinnt, sobald
 * der Überzug weg ist.
 *
 * --voll bleibt in der breiten Spalte und behält den Kunstgriff des Kerns.
 * Das ist kein Widerspruch, sondern seine Bedingung: margin-inline:
 * calc(50% - 50vw) bezieht die 50 % auf den enthaltenden Block, und nur wenn
 * der mittig im Fenster sitzt, landet das Bild genau von Rand zu Rand.
 * Nachgerechnet bei 1280 px Fenster: aus der breiten Spalte heraus beginnt es
 * bei 0 und endet bei 1280 — randlos. Aus der Textspalte heraus begänne es bei
 * -236 px und endete bei 1044 und wäre weder randlos noch mittig.
 *
 * Ein allein stehendes Bild im Markdown entspricht damit genau --breit. Das
 * ist richtig und kein Versehen: Markdown hat keine Möglichkeit zu sagen
 * „schmal", und von den drei Stufen ist breit die sinnvollere Vorgabe — ein
 * Bild, das jemand allein in einen Absatz stellt, ist als Bild gemeint und
 * nicht als Wort im Satz. Wer die Textspalte will, hat den Bild-Baustein ohne
 * Zusatz. */
.page-content > .hc-bild--breit {
  inline-size: auto;
  margin-inline: 0;
}

/* Bildunterschrift — gesperrte Versalien. Die opacity aus
   bausteine.css wird auf 1 zurückgesetzt: die Farbe --hc-ink-3 trägt
   die Abstufung schon, und beides übereinander fiele unter die
   Kontrastgrenze. */
.hc-block figcaption, .hc-bildunterschrift {
  font-size: var(--hc-text-xs); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-medium);
  color: var(--hc-ink-3); opacity: 1;
}

/* Das Kachelraster trägt Hochformat.
 *
 * bausteine.css schneidet das Galeriebild auf 4/3 und das Kartenbild auf 3/2
 * (Zeilen 121..145) — beides Querformat. Diese Website hat zwölf
 * Tierporträts und 85 Bilder, viele davon hochkant; ein Querformat-Zuschnitt
 * nimmt davon jedes Mal Kopf oder Rute.
 *
 * Das Quadrat ist die ehrliche Mitte: es kostet ein Hochformat und ein
 * Querformat denselben Anteil, während ein hochkantes Verhältnis die
 * Querformate härter bestrafen würde, als das Quadrat beide bestraft. Das
 * Kartenbild bleibt eine Spur breiter, weil darunter noch Titel und Text
 * stehen und eine quadratische Kachel die Karte sonst sehr hoch macht.
 *
 * Der Zuschnitt selbst BLEIBT. internal/block/render.go gibt für genau diese
 * zwei Bausteinarten je Bild einen Mittelpunkt als style-Attribut mit
 * (Zeile 367..371), und der wirkt nur, solange das Bild in eine feste Form
 * gezwungen wird. Wer den Zuschnitt abschaltet, macht die Angabe des Kerns zu
 * toter Auszeichnung.
 *
 * Und die Kehrseite derselben Münze: dieser Abschnitt setzt die Eigenschaft,
 * die diesen Mittelpunkt trägt, an keiner Stelle selbst. Eine Regel im
 * Stylesheet könnte ein style-Attribut nur mit !important schlagen, und genau
 * das wäre der Verlust der Angabe. Ein Prüftor liest diesen Abschnitt
 * kommentarbereinigt und verlangt null Treffer. */
.hc-galerie__bild img { aspect-ratio: 1 / 1; }
.hc-karte img { aspect-ratio: 4 / 3; }

/* Karte — ein deckender Kasten, kein Glas. Die Brücke gibt ihr über
   --paper den Seitengrund als Füllung; eine Karte soll aber HELLER
   liegen als das Blatt, damit sie als zweites Papier liest. */
.hc-karte {
  background: var(--hc-pane);
  border-color: var(--hc-pane-edge);
  box-shadow: var(--hc-shadow-pane);
  gap: var(--hc-space-3);
}
.hc-karte__titel { font-weight: var(--hc-weight-medium); letter-spacing: var(--hc-track-snug); }
.hc-karte__text  { color: var(--hc-ink-2); font-size: var(--hc-text-sm); }
.hc-karte--link:hover, .hc-karte--link:focus-visible {
  border-color: var(--hc-wald-soft);
  box-shadow: var(--hc-shadow-lift);
}
/* Das Anheben hängt an der Voreinstellung des Besuchers: wer weniger Bewegung
   möchte, bekommt die Kante und den Schatten, aber keinen Sprung. */
@media (prefers-reduced-motion: no-preference) {
  .hc-karte--link { transition: transform var(--hc-dur-fast) var(--hc-ease); }
  .hc-karte--link:hover { transform: translateY(-2px); }
}

/* Zitat — die Marke trägt der Balken, nicht die Schriftfarbe. Ein
   ganzer Absatz in Waldgrün läse sich als Werbung. */
.hc-zitat { border-inline-start-color: var(--hc-wald); }
.hc-zitat blockquote {
  font-size: var(--hc-text-xl); font-weight: var(--hc-weight-regular);
  line-height: var(--hc-leading-snug); letter-spacing: var(--hc-track-snug);
  color: var(--hc-ink);
}
.hc-zitat figcaption {
  margin-block-start: var(--hc-space-3);
  font-size: var(--hc-text-xs); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-medium);
  color: var(--hc-ink-3); opacity: 1;
}

/* Aufruf — dieselbe deckende Fläche wie eine Karte, eine Stufe
   grösser. */
.hc-aufruf {
  background: var(--hc-pane);
  border: 1px solid var(--hc-pane-edge);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-shadow-pane);
}
.hc-aufruf__titel { font-weight: var(--hc-weight-medium); letter-spacing: var(--hc-track-snug); }
.hc-aufruf__text  { color: var(--hc-ink-2); }
.hc-aufruf__knopf { margin-block-start: var(--hc-space-5); }
/* Die Einladung steht mittig, und dann soll sie auch wirklich mittig stehen:
   die Grundschicht begrenzt jeden Absatz auf das Lesemass, und ein so
   begrenzter Absatz sitzt ohne diese Zeile am linken Rand seines Kastens —
   der Text wäre in 705 px zentriert, der Kasten aber 641 px breit, und das
   Ganze sässe um gut 30 px daneben. */
.hc-aufruf__text p { margin-inline: auto; }

/* Ein Aufruf mit MEHR ALS EINEM Absatz ist keine Einladung mehr, sondern eine
 * Mitteilung — und Fliesstext mit beidseitigem Flatterrand ist schwer zu
 * lesen.
 *
 * bausteine.css:196 setzt .hc-aufruf auf text-align: center, und der Kern hat
 * damit nicht unrecht: block.go beschreibt den Aufruf als „a boxed invitation
 * with a button", und für einen Satz plus Knopf ist mittig genau richtig.
 * Derselbe Baustein trägt auf dieser Website aber den Kasten „Aktuell" mit
 * vier Absätzen. Als handgeschriebenes <aside> stand dieser Text vorher
 * linksbündig; der Umzug in einen echten Baustein hätte ihn ohne diese Regel
 * verschlechtert, und das darf ein Umzug in die richtige Form nie.
 *
 * Unterschieden wird an der Auszeichnung und nicht an einer Zeichenzahl: mehr
 * als ein Kind im __text, oder eine Liste, ein Zitat, eine Tabelle. Alles
 * davon ist Fliesstext und keine Einladung. Der ganze Kasten kippt mit —
 * Titel, Text und Knopf —, denn ein zentrierter Titel über linksbündigem Text
 * sähe nach Versehen aus.
 *
 * Ohne :has() fällt die Regel weg und es bleibt beim heutigen Zustand, also
 * mittig. Nennenswert, aber tragbar: die Mitteilung ist dann schlechter
 * gesetzt, nicht unlesbar. */
.hc-aufruf:has(.hc-aufruf__text > :is(:nth-child(2), ul, ol, blockquote, table)) {
  text-align: start;
}
.hc-aufruf:has(.hc-aufruf__text > :is(:nth-child(2), ul, ol, blockquote, table)) .hc-aufruf__text p {
  margin-inline: 0;
}

/* Knopf — die Pillenform des Systems. */
.hc-knopf {
  /* Die Schriftfarbe steht hier noch einmal, obwohl bausteine.css sie
     schon aus --paper baut. Weiter oben färbt `.page-content
     :where(a)` jeden Verweis im Inhalt waldgrün, und diese Regel steht
     SPÄTER in derselben Datei — ohne die Zeile hier stünde der Knopf
     im Aufruf-Baustein als grüne Schrift auf grüner Fläche und wäre
     unsichtbar. Genau das hat holzcloud einmal gekostet. */
  color: var(--hc-ground);
  border-radius: var(--hc-r-pill);
  padding: 13px var(--hc-space-5);
  font-size: var(--hc-text-sm); font-weight: var(--hc-weight-semibold);
  line-height: 1; letter-spacing: 0;
  transition: opacity var(--hc-dur-fast) var(--hc-ease),
              transform var(--hc-dur-fast) var(--hc-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .hc-knopf:hover { transform: translateY(-1px); }
}

/* Trennlinie — sie soll trennen und nicht auffallen. */
.hc-trenner { margin-block: var(--hc-space-8); }

/* Video — der Kern fragt hier die Reglernamen der Verwaltung direkt
   ab und fiele ohne sie auf 0 zurück. Die Regel zielt deshalb auf die
   Klasse und nicht auf :root: am :root wäre es der Zyklus, den die
   Brücke vermeidet. */
.hc-video { margin-block: var(--hc-space-6); }
.hc-video video { border-radius: var(--hc-r); border: 1px solid var(--hc-hairline); }

/* Absätze innerhalb eines Bausteins.
 *
 * rudel.base setzt :where(p) auf margin 0, und den Rhythmus macht sonst
 * `.page-content > * + *` — das trifft aber nur die Bausteine selbst. Ein
 * Textbaustein aus drei Absätzen stünde ohne diese Zeile als eine Wand ohne
 * Luft dazwischen. */
.hc-text > * + *,
.hc-eigen__text > * + *,
.hc-bildtext__text > * + * { margin-block-start: var(--hc-space-5); }

/* Das Bild im Bildtext folgt demselben Satz wie oben — es wird in seiner
 * Grösse gezeigt, und der Rahmen richtet sich danach. Dazu die Kante, aus
 * demselben Grund wie beim Bild-Baustein: es steht neben einem Absatz auf
 * demselben hellen Papier und braucht sie, um als Bild anzufangen.
 *
 * Nur die Höhengrenze ist eine andere und STRENGER als die 70vh oben: dieses
 * Bild hat nur die halbe Breite, und ein gleich hohes Bild wirkt in einer halb
 * so breiten Spalte doppelt so schlank. Ein bildtext ist ausserdem ein PAAR —
 * gemessen stand der Text neben einem 945 px hohen Hochformat wegen
 * align-items: center 405 px unter der Bildoberkante, und oben rechts klaffte
 * eine halbe Bildschirmhöhe Leere. Ein Bild, das ein Vielfaches seines Textes
 * misst, ist keine Hälfte eines Paares mehr.
 *
 * 500 px sind bei einem Verhältnis von 0.56 rund 280 px Breite. Nachgerechnet
 * bei 570 px Spalte: 900×1600 wird von 570×1013 auf 281×500 begrenzt,
 * 1600×1200 und 1600×900 bleiben unberührt — die Grenze greift erst ab einem
 * Verhältnis von etwa 1.1 und lässt jedes Querformat in Ruhe. */
.hc-bildtext__bild img {
  border: 1px solid var(--hc-hairline);
  display: block; margin-inline: auto;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: min(52vh, 500px);
}

/* Eigene Bausteinart — die Felder als ruhige Faktenzeilen. Eine eigene
   Bausteinart gehört der Website und nicht der Vorlage: der Kern schreibt nur
   `hc-eigen--<schluessel>`, und welche Schlüssel es gibt, weiss allein der
   Betrieb. Hier steht deshalb nur, was ohne Kenntnis des Schlüssels richtig
   ist. */
.hc-eigen__zeile, .hc-eigen__datum, .hc-eigen__link { color: var(--hc-ink-2); }
.hc-eigen__link a { color: var(--hc-wald); }

/* ══ Das Archiv ═══════════════════════════════════════════════ */
.archive-count {
  margin-block-start: var(--hc-space-3);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.archive-list { list-style: none; margin: 0; padding: 0; }
/* Eine Haarlinie zwischen den Beiträgen und keine Karten: eine Liste
   von Kästen liest sich schlechter als eine Liste. */
.archive-entry {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  padding-block: var(--hc-space-6);
  border-block-start: 1px solid var(--hc-hairline);
}
.archive-entry:last-child { border-block-end: 1px solid var(--hc-hairline); }
/* Ohne Bild soll der Text nicht in der schmalen zweiten Spalte hängen
   bleiben — dafür reicht :has(), kein zweiter Klassenname. */
.archive-entry:not(:has(.archive-entry__image)) { grid-template-columns: minmax(0, 1fr); }
.archive-entry__image { display: block; }
/* Das Vorschaubild des Eintrags kommt als blosser URL: .Archive.Entries trägt
   nur ImageURL und keine Angabe zur Bildmitte, anders als ein Galerie- oder
   Kartenbild. Zugeschnitten wird es trotzdem, weil eine Liste nur als Liste
   liest, wenn alle Kacheln gleich hoch sind — also bekommt es hier, und nur
   hier ausserhalb des Baustein-Abschnitts, eine feste Bildmitte im oberen
   Drittel. Auf einem Hundefoto steht der Kopf fast immer oben; ein Zuschnitt
   aus der Mitte trifft den Rumpf. */
.archive-entry__image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%;
  display: block;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}
.archive-entry__title {
  font-size: var(--hc-text-2xl); font-weight: var(--hc-weight-medium);
  letter-spacing: var(--hc-track-snug);
}
.archive-entry__title a { text-decoration: none; }
.archive-entry__title a:hover { color: var(--hc-wald); }
.archive-entry__date {
  display: block; margin-block-start: var(--hc-space-3);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.archive-entry__excerpt { margin-block-start: var(--hc-space-3); color: var(--hc-ink-2); }
.archive-entry .term-list { margin-block-start: var(--hc-space-4); }
.archive-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--hc-space-4);
  margin-block-start: var(--hc-space-7);
}
.archive-pager__position {
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-wide);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
  order: 2;
}
.archive-pager [rel="next"] { order: 3; margin-inline-start: auto; }
.archive-pager [rel="prev"] { order: 1; }
.archive-empty { margin-block-start: var(--hc-space-6); }
.archive-empty a { color: var(--hc-wald); }
.archive-terms { margin-block-start: var(--hc-space-8); }

/* ══ Die Suche ════════════════════════════════════════════════ */
.search-form {
  display: flex; flex-wrap: wrap; gap: var(--hc-space-3);
  margin-block-end: var(--hc-space-7);
  max-width: 44rem;
}
.search-form .hc-input { flex: 1 1 16rem; }
.search-count { margin-block-end: var(--hc-space-4); }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result {
  padding-block: var(--hc-space-5);
  border-block-start: 1px solid var(--hc-hairline);
}
.search-result:last-child { border-block-end: 1px solid var(--hc-hairline); }
.search-result__title {
  font-size: var(--hc-text-lg); font-weight: var(--hc-weight-medium);
  letter-spacing: var(--hc-track-snug); text-decoration: none;
}
.search-result__title:hover { color: var(--hc-wald); }
.search-result__snippet { margin-block-start: var(--hc-space-2); color: var(--hc-ink-2); }

/* ══ Die Schranke ═════════════════════════════════════════════
   Eine Fläche in der Mitte statt einer Seite: hier gibt es genau
   eine Sache zu tun. */
.gate-card { max-width: 34rem; margin-inline: auto; }
.gate-card h1 { margin-block-start: var(--hc-space-3); font-size: var(--hc-display-sm); }
.gate-lead   { margin-block-start: var(--hc-space-4); }
.gate-hint   { margin-block-start: var(--hc-space-3); }
.gate-error  { margin-block-start: var(--hc-space-4); }
.gate-form   { margin-block-start: var(--hc-space-6); }
.gate-form__submit { margin-block-start: var(--hc-space-4); }
.gate-target { margin-block-start: var(--hc-space-5); font-size: var(--hc-text-sm); }

/* ══ Die zwei kurzen Seiten ═══════════════════════════════════ */
.page--kurz .hc-title { margin-block-start: var(--hc-space-4); }
.page--kurz .hc-lede  { margin-block-start: var(--hc-space-5); }

/* ══ Der Laden ════════════════════════════════════════════════
   Wo es geht, tragen die Bauteile des Systems: .hc-pane für jede
   Fläche, .hc-input und .hc-field für jedes Formular, .hc-btn für
   jeden Knopf, .hc-status für jeden Zustand. Was hier steht, ist
   Anordnung — keine zweite Garnitur derselben Bauteile. */

.price { margin-block-start: var(--hc-space-4); }
/* Ohne Familie fester Breite ist tabular-nums die Zeile, die Beträge
   untereinander ausrichtet — und für Zahlen die bessere: die Ziffern
   behalten die Form der Textschrift und bekommen nur gleiche
   Breite. */
.price__amount {
  font-variant-numeric: tabular-nums;
  font-size: var(--hc-text-lg); font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink);
}
.price--large .price__amount { font-size: var(--hc-text-2xl); }
.price__note, .price__other {
  display: block; margin-block-start: var(--hc-space-1);
  font-size: var(--hc-text-xs); color: var(--hc-ink-3);
}

/* Der Umschalter ist ein Formular mit zwei Knöpfen, kein Schalter:
   ohne Javascript muss der Wechsel über den Server gehen. */
.price-switch {
  display: inline-flex; gap: 2px;
  margin-block-end: var(--hc-space-6);
  padding: 3px;
  border: 1px solid var(--hc-pane-edge); border-radius: var(--hc-r-pill);
  background: var(--hc-pane-sunken);
}
.price-switch__option {
  font: inherit;
  font-size: var(--hc-text-xs); font-weight: var(--hc-weight-medium);
  padding: 7px var(--hc-space-4);
  border: 0; border-radius: var(--hc-r-pill);
  background: transparent; color: var(--hc-ink-3); cursor: pointer;
  transition: color var(--hc-dur-fast) var(--hc-ease),
              background-color var(--hc-dur-fast) var(--hc-ease);
}
.price-switch__option:hover { color: var(--hc-ink); }
.price-switch__option.is-active { background: var(--hc-wald-wash); color: var(--hc-wald); }

.shop-categories { margin-block-end: var(--hc-space-6); }
.shop-categories .term-list { margin-block-start: 0; }
.shop-note { margin-block-start: var(--hc-space-7); font-size: var(--hc-text-sm); }

.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__media { display: block; margin-block-end: var(--hc-space-4); }
/* Wie beim Vorschaubild des Archivs: ein blosser URL ohne Angabe zur
   Bildmitte, zugeschnitten damit die Reihe eine Reihe bleibt, und deshalb
   dieselbe feste Mitte im oberen Drittel. */
.product-card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  display: block;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}
.product-card__title { font-size: var(--hc-text-lg); font-weight: var(--hc-weight-medium); }
.product-card__title a { text-decoration: none; }
.product-card__title a:hover { color: var(--hc-wald); }
.product-card__subtitle { margin-block-start: var(--hc-space-1); font-size: var(--hc-text-sm); color: var(--hc-ink-3); }
.product-card__excerpt { margin-block-start: var(--hc-space-3); font-size: var(--hc-text-sm); color: var(--hc-ink-2); }
/* Der Preis fällt ans untere Ende, damit die Karten einer Reihe ihn
   auf derselben Höhe zeigen, gleich wie lang die Titel sind. */
.product-card .price { margin-block-start: auto; padding-block-start: var(--hc-space-4); }
.product-card__gone { margin-block-start: var(--hc-space-3); }
.product-card .term-list { margin-block-start: var(--hc-space-3); }
.product-card--gone .product-card__media img { opacity: .55; }

/* ── Ein Artikel ──────────────────────────────────────────── */
.product {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 4vw, 64px);
  margin-block-start: var(--hc-space-6);
}
.product__subtitle { margin-block-start: var(--hc-space-3); }
/* Das Hauptbild wird NICHT zugeschnitten — dieselbe Begründung wie beim
   Aufmacherbild: ein einzelnes Artikelbild ohne Angabe zur Bildmitte soll
   ganz zu sehen sein. Die Höhengrenze hält ein Hochformat im Zaum. */
.product__image {
  display: block; margin-inline: auto;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: 70vh;
  border-radius: var(--hc-r); border: 1px solid var(--hc-hairline);
}
.product__gallery {
  list-style: none; margin: var(--hc-space-3) 0 0; padding: 0;
  display: grid; gap: var(--hc-space-3);
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}
.product__gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  display: block;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}
/* Klebt an der Höhe der Leiste, damit der Kaufkasten beim Lesen der
   Beschreibung nicht darunter verschwindet. */
.product__buy { position: sticky; top: calc(68px + var(--hc-space-4)); }
.product__stock, .product__delivery, .product__shipping {
  margin-block-start: var(--hc-space-3); font-size: var(--hc-text-sm);
}
.product__form { margin-block-start: var(--hc-space-5); }
.product__menge { max-width: 7rem; margin-block-end: var(--hc-space-4); }
.product__sold-out { margin-block-start: var(--hc-space-5); }
.product__sku {
  margin-block-start: var(--hc-space-5);
  font-size: var(--hc-text-xs); color: var(--hc-ink-3);
}
.product__description { margin-block-start: var(--hc-space-8); }

/* ── Der Warenkorb ────────────────────────────────────────── */
.cart-blocked { margin-block-end: var(--hc-space-5); }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid; align-items: start;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: var(--hc-space-3) clamp(16px, 2.5vw, 32px);
  padding-block: var(--hc-space-5);
  border-block-start: 1px solid var(--hc-hairline);
}
.cart-line:last-child { border-block-end: 1px solid var(--hc-hairline); }
.cart-line:not(:has(.cart-line__media)) { grid-template-columns: minmax(0, 1fr) auto auto; }
.cart-line__media img {
  width: 96px; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%;
  display: block;
  border-radius: var(--hc-r-sm); border: 1px solid var(--hc-hairline);
}
.cart-line__title { font-size: var(--hc-text-lg); font-weight: var(--hc-weight-medium); }
.cart-line__title a { text-decoration: none; }
.cart-line__title a:hover { color: var(--hc-wald); }
.cart-line__subtitle { margin-block-start: var(--hc-space-1); font-size: var(--hc-text-sm); color: var(--hc-ink-3); }
.cart-line__unit { margin-block-start: var(--hc-space-2); font-size: var(--hc-text-sm); color: var(--hc-ink-2); }
.cart-line__actions { display: flex; flex-direction: column; gap: var(--hc-space-3); align-items: flex-start; }
.cart-line__quantity { display: flex; gap: var(--hc-space-2); align-items: center; }
.cart-line__quantity .hc-input { width: 5rem; }
.cart-line__price {
  font-variant-numeric: tabular-nums;
  text-align: end; white-space: nowrap;
}
/* Ein Artikel, der ausgegangen ist, bleibt lesbar — er wird nur ruhiger. */
.cart-line--gone .cart-line__title, .cart-line--gone .cart-line__price { color: var(--hc-ink-3); }
.cart-line--gone .cart-line__media img { opacity: .55; }

.cart-summary { margin-block-start: var(--hc-space-7); max-width: 34rem; margin-inline-start: auto; }
.cart-totals {
  margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--hc-space-2) var(--hc-space-5);
}
.cart-totals dt { color: var(--hc-ink-2); font-size: var(--hc-text-sm); }
.cart-totals dd {
  margin: 0; text-align: end; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--hc-text-sm); color: var(--hc-ink-2);
}
.cart-totals__tax { color: var(--hc-ink-3); font-size: var(--hc-text-xs); }
.cart-totals__sum {
  padding-block-start: var(--hc-space-3);
  border-block-start: 1px solid var(--hc-hairline);
  color: var(--hc-ink); font-size: var(--hc-text-lg);
  font-weight: var(--hc-weight-semibold);
}
.cart-totals__note { margin-block-start: var(--hc-space-3); font-size: var(--hc-text-xs); color: var(--hc-ink-3); }
.cart-actions { display: flex; flex-wrap: wrap; gap: var(--hc-space-3); margin-block-start: var(--hc-space-5); }
.cart-empty { margin-block-start: var(--hc-space-6); }
.cart-continue {
  display: inline-block; margin-block-start: var(--hc-space-4);
  font-size: var(--hc-text-sm); color: var(--hc-ink-2);
}

/* ── Die Kasse ────────────────────────────────────────────── */
.checkout__grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: clamp(24px, 4vw, 64px);
  margin-block-start: var(--hc-space-6);
}
.checkout__group {
  margin: 0 0 var(--hc-space-7);
  padding: 0; border: 0;
  display: flex; flex-direction: column; gap: var(--hc-space-4);
}
.checkout__group legend {
  padding: 0; margin-block-end: var(--hc-space-4);
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-widest);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.field-row { display: flex; flex-wrap: wrap; gap: var(--hc-space-4); }
.field-row .hc-field { flex: 1 1 12rem; }
.field-row .field--narrow { flex: 0 1 7rem; }

/* Zur Auswahl gehört die ganze Zeile, nicht nur das Kästchen: ein Ziel
   von drei Zeichen trifft auf einem Telefon niemand. */
.choice {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--hc-space-3); align-items: center;
  padding: var(--hc-space-3) var(--hc-space-4);
  border: 1px solid var(--hc-pane-edge); border-radius: var(--hc-r-sm);
  cursor: pointer;
  transition: border-color var(--hc-dur-fast) var(--hc-ease);
}
.choice:hover { border-color: var(--hc-wald-soft); }
.choice:has(:checked) { border-color: var(--hc-wald-soft); background: var(--hc-wald-wash); }
.choice input { accent-color: var(--hc-wald); grid-row: 1 / span 2; }
.choice__label { font-size: var(--hc-text-sm); color: var(--hc-ink); }
.choice__note { grid-column: 2; font-size: var(--hc-text-xs); color: var(--hc-ink-3); }
.choice--confirm { margin-block-end: var(--hc-space-5); }
.checkout__policy { margin-block-end: var(--hc-space-5); font-size: var(--hc-text-sm); }
.checkout__submit { width: 100%; }

.checkout__summary { position: sticky; top: calc(68px + var(--hc-space-4)); }
.checkout__summary-title {
  font-size: var(--hc-text-label); letter-spacing: var(--hc-track-widest);
  text-transform: uppercase; font-weight: var(--hc-weight-semibold);
  color: var(--hc-ink-3);
}
.checkout__lines { list-style: none; margin: var(--hc-space-4) 0; padding: 0; }
.checkout__lines li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--hc-space-3); align-items: baseline;
  padding-block: var(--hc-space-3);
  border-block-end: 1px solid var(--hc-hairline);
  font-size: var(--hc-text-sm);
}
.checkout__line-qty { font-variant-numeric: tabular-nums; color: var(--hc-ink-3); }
.checkout__line-title { color: var(--hc-ink-2); }
.checkout__line-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: end;
}

/* ── Die Bestätigung ──────────────────────────────────────── */
.order__status { margin-block-start: var(--hc-space-4); }
.order__body { display: flex; flex-direction: column; gap: var(--hc-space-7); max-width: 46rem; }
.order__facts { margin: 0; }
.order__payment-note { font-size: var(--hc-text-xs); color: var(--hc-ink-3); }
.order__policy { font-size: var(--hc-text-sm); }

/* Zwei Spalten auf einem schmalen Fenster sind zwei zu enge Spalten,
   und was klebt, klebt dann an nichts mehr. */
@media (max-width: 900px) {
  .product, .checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .product__buy, .checkout__summary { position: static; }
}
@media (max-width: 700px) {
  .archive-entry { grid-template-columns: minmax(0, 1fr); }
  .archive-entry__image img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: var(--hc-space-4);
  }
  .cart-line:not(:has(.cart-line__media)) { grid-template-columns: minmax(0, 1fr); }
  .cart-line__media img { width: 72px; }
  .cart-line__actions, .cart-line__price { grid-column: 2; }
  .cart-line:not(:has(.cart-line__media)) .cart-line__actions,
  .cart-line:not(:has(.cart-line__media)) .cart-line__price { grid-column: 1; }
  .cart-line__price { text-align: start; }
  .cart-summary { max-width: none; }
}

/* ══ Der Ausdruck ═════════════════════════════════════════════
   Der Grund ist hier schon hell, also bleibt der Papierteil kurz:
   der Farbschleier wird abgeschaltet, damit er nicht als graue
   Fläche mitdruckt, und alles fällt weg, was auf Papier nirgendwohin
   führt.

   Adressen von Verweisen werden hinter dem Linktext ausgeschrieben —
   ein Link ist auf Papier sonst nur unterstrichen.

   Der Textbaustein footer-kontakt bleibt stehen. Wer die Seite eines
   Zwingers ausdruckt, will meistens genau diese Zeilen.

   Die drei Literalfarben hier sind bewusst Literale und gehören
   nicht nach oben in rudel.tokens: auf Papier ist Weiss das Papier
   des Druckers und kein Wert der Palette.

   Dieser Abschnitt ist die LETZTE Regel der Datei. Was später
   dazukommt, gehört davor. */
@media print {
  :root {
    --hc-ground-image: none;
    --hc-shadow-pane: none;
    --hc-shadow-lift: none;
  }
  body { background: #fff; }
  .hc-bar, .site-menu, .nav-switch, .nav-button, .lang-nav, .site-search,
  .site-cart, .skip-link, .post-nav, .term-list, .archive-pager,
  .search-form, .price-switch,
  .footer-nav, .site-footer__terms { display: none !important; }
  .site-footer { border-block-start: 1px solid #ddd; margin-block-start: 0; background: none; }
  main { padding: 0; }
  .hc-pane, .hc-karte, .hc-aufruf { border: 1px solid #bbb; box-shadow: none; }
  .page-content > div:has(> section) > section, .page-content > aside { border: 1px solid #bbb; box-shadow: none; }
  .page-content a::after { content: " (" attr(href) ")"; font-size: .85em; }
  .page-content a[href^="#"]::after { content: ""; }
  h1, h2, h3 { break-after: avoid; }
  img, figure, .hc-karte, tr { break-inside: avoid; }
}