/* ══════════════════════════════════════════════════════════════
   Weide — warmes Papier, Erdbraun, Manrope

   Dieselbe Architektur und dieselben Gesten wie die mitgelieferte
   Vorlage `holzcloud`, aber ins Helle übersetzt: gebrochenes Weiss
   statt Nachtbraun, Erdbraun statt Messing, kein Glas, sondern
   Karton mit einer Haarlinie.

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

     1. vier @layer weide.*  — 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.

   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 Mono-Familie gibt es hier nicht. Eine Schreibmaschine klingt
   auf einem Bauernhof technisch; Beschriftungen sind stattdessen
   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 weide.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-erde 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. Papier ist warm
       gebrochen, die Tinte ist ein sehr dunkles Warmbraun, und der
       Akzent ist Erde — nicht Messing wie in holzcloud. Der Name
       --hc-erde steht bewusst da, wo dort --hc-brass stand: er
       macht jede Regel darunter von selbst lesbar. */
    --hc-ground:   #FAF6EF;
    --hc-ink:      #231A11;
    --hc-erde:     #6E4D32;
    /* Schrift, die AUF einer Erdfläche steht. Nie --hc-ink dort:
       Erdbraun gegen Papier misst 7.04:1 in beide Richtungen, also
       trägt die Marke als Verweisfarbe UND als Knopffüllung mit
       heller Schrift. */
    --hc-on-erde:  var(--hc-ground);

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

       Die 52 % aus holzcloud gelten NICHT hier. Dort ist es helle
       Tinte auf dunklem Grund; auf diesem Papier gemessen ergäben
       52 % nur 3.45:1 und fielen durch, 60 % ergäben 4.40:1 und
       fielen knapp durch. 64 % ergibt 5.00:1 und ist der Wert, den
       diese Datei festschreibt. Wer ihn senkt, senkt die kleinste
       Schrift mit. --hc-ink-2 bei 80 % ergibt 8.59: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. */
    --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). Bei 82 %
       allein geisterte der Fliesstext von unten als graue Schrift
       durch: 18 % einer Tinte, die 15.9: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-erde-soft:  color-mix(in srgb, var(--hc-erde) 35%, transparent);
    --hc-erde-wash:  color-mix(in srgb, var(--hc-erde) 8%, transparent);
    --hc-pane-lift:  var(--hc-erde-soft);

    /* ── Der Grund ─────────────────────────────────────────────
       Er ist nicht flach. Drei sehr leise Farbschleier liegen über
       einem hellen Verlauf: Braun aus der Marke, dazu ein Strohgelb
       und ein Salbeigrün. Die zwei stehen als Literal richtig, weil
       sie eine zweite und dritte Farbe SIND und nicht die Marke —
       das Braun 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-erde:    color-mix(in srgb, var(--hc-erde) 9%, transparent);
    --hc-wash-stroh:   color-mix(in srgb, #D8B65A 8%, transparent);
    --hc-wash-salbei:  color-mix(in srgb, #8FA37E 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-stroh)  0%, transparent 100%),
      radial-gradient(50% 44% at 88% 22%, var(--hc-wash-erde)   0%, transparent 100%),
      radial-gradient(58% 50% at 58% 96%, var(--hc-wash-salbei) 0%, transparent 100%),
      linear-gradient(168deg, var(--hc-ground-2) 0%, var(--hc-ground) 100%);

    /* ── Zustände ──────────────────────────────────────────────
       Jede Farbe steht über 4.5: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. */
    --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 ───────────────────────────────────────────────
       Zwei echte Grössen und eine Pille. --hc-r ist die Fläche,
       --hc-r-sm ist, was darin sitzt, damit die innere Ecke der
       äusseren nicht widerspricht. */
    --hc-r-sm:   8px;
    --hc-r:      14px;
    --hc-r-lg:   22px;
    --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 warmem Papier liest sich kalt. */
    --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. */
    --hc-wide:    1320px;
    --hc-measure: 74ch;
    --hc-gutter:  clamp(20px, 4vw, 56px);

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

    /* ── Motiv ─────────────────────────────────────────────────
       Die Vorlage heisst Weide, also ist das Zeichen eine ruhige
       Hügellinie. Alle Töne mischen aus der Marke und der Tinte,
       damit die Zeichnung einer eingestellten Marke folgt statt
       neben ihr zu stehen. */
    --hc-h-fern:  color-mix(in srgb, var(--hc-erde) 13%, transparent);
    --hc-h-mitte: color-mix(in srgb, var(--hc-erde) 22%, transparent);
    --hc-h-nah:   color-mix(in srgb, var(--hc-erde) 34%, transparent);
    --hc-h-linie: color-mix(in srgb, var(--hc-erde) 55%, transparent);
    --hc-sonne:   color-mix(in srgb, var(--hc-erde) 26%, transparent);
  }
}
@layer weide.base {
  /* Was eine Seite bekommt, bevor irgendein Bauteil dazukommt: der
     Grund, die Schrift, der Fokusring. Braucht weide.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 Mono-Familie bleibt Quelltext bei der Systemschrift des
     Browsers für Feste Breite — 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 weide.components {
  /* Die Bauteile, aus denen die zwölf Ansichten gebaut sind. Die
     Klassennamen sind dieselben wie in der Vorlage holzcloud — nicht
     aus Bequemlichkeit, sondern damit dieselbe Geste denselben Namen
     trägt und eine Ansicht sich zwischen den beiden Vorlagen lesen
     lässt. Was sich unterscheidet, ist der Stoff: Karton statt Glas.

     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.

     Auf hellem Papier ist sie ein DECKENDER Kasten mit Haarlinie und
     weichem Schatten. Der Glas-Kunstgriff aus holzcloud — halbe
     Deckung plus backdrop-filter — ergibt nur auf dunklem Grund
     Sinn; auf Papier wirkt eine halbdurchsichtige Fläche schmutzig
     statt schwebend. Deshalb steht hier kein backdrop-filter, und es
     braucht auch keinen @supports-Zweig für Browser ohne. */
  .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. Auf
     Papier trägt die Erdfläche mit heller Schrift: 7.04: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-erde); color: var(--hc-on-erde);
    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-erde-soft); background: var(--hc-erde-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 Mono-Familie: 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-erde);
  }
  .hc-eyebrow a { color: inherit; }
  .hc-eyebrow b { color: var(--hc-erde); 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-erde);
    border-color: var(--hc-erde-soft);
    transition: background-color var(--hc-dur-fast) var(--hc-ease);
  }
  a.hc-chip:hover { background: var(--hc-erde-wash); }

  /* ── Zustand ──────────────────────────────────────────────────
     Nie der Punkt allein. Die Farbe ist das zweite Signal; das Wort
     daneben ist das erste. */
  .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-erde-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-erde); }
  .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-erde); 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 weide.motif {
  /* Das Zeichenvokabular der Vorlage: die ruhige Hügellinie, die im
     Aufmacher steht, wenn eine Seite kein Titelbild hat.

     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-huegel { display: block; width: 100%; height: auto; }
  .hc-huegel .hc-h-fern  { fill: var(--hc-h-fern);  stroke: none; }
  .hc-huegel .hc-h-mitte { fill: var(--hc-h-mitte); stroke: none; }
  .hc-huegel .hc-h-nah   { fill: var(--hc-h-nah);   stroke: none; }
  .hc-huegel .hc-h-linie {
    fill: none; stroke: var(--hc-h-linie);
    stroke-width: 2; stroke-linecap: round;
  }
  .hc-huegel .hc-sonne { fill: var(--hc-sonne); stroke: none; }
}
/* ══ 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 weide.tokens und nicht hierher.
   ══════════════════════════════════════════════════════════════ */

/* ── 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 weide.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 weide.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 —, ohne dass hier eine einzige Ableitung wiederholt
   werden müsste. */
:root {
  --hc-erde:      var(--hc-brand,  #6E4D32);
  --hc-ground:    var(--hc-paper,  #FAF6EF);
  --hc-font-sans: var(--hc-font,   Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif);
  --hc-r:         var(--hc-radius, 14px);
}

/* ── 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 Erdbraun wäre kaum lesbar. Dass
   .hc-karte und .hc-aufruf damit den Seitengrund als Füllung
   bekämen, korrigieren die Regeln weiter unten. */
:root {
  --ink:     var(--hc-ink);
  --paper:   var(--hc-ground);
  --brand:   var(--hc-erde);
  --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-erde); color: var(--hc-on-erde);
  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 („Milchschäferei Seehof") 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; }
.site-logo {
  width: auto; height: 32px; flex: none;
  margin-inline-end: var(--hc-space-3);
  border-radius: var(--hc-r-sm);
}
.site-mark b { font-weight: var(--hc-weight-semibold); }

/* 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-erde-soft); }
.site-menu a[aria-current="page"] { color: var(--hc-erde); border-block-end-color: var(--hc-erde); }

/* 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. */
.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; }

/* EIN UNTERMENÜ AM RECHTEN RAND HÄNGT NACH LINKS, NICHT NACH RECHTS.
 *
 * Sonst scrollt jede Seite waagrecht, ohne dass jemand das Menü öffnet. Ein
 * absolut gesetztes Element zählt zur Scrollbreite des Dokuments, auch mit
 * visibility: hidden — der geschlossene Zustand kostet also genauso viel wie
 * der offene. Gemessen bei 1280 px: clientWidth 1265, scrollWidth 1271, und
 * der Verursacher war das Untermenü des vorletzten Punktes, linke Kante 1069
 * plus 203 px Breite. Bei 1100 px waren es 17 px, bei 1024 px 22 px — je
 * enger, desto schlimmer, bis bei 1000 px die Spaltenfassung übernimmt.
 *
 * Die Regel muss OHNE Kenntnis des Menüs tragen; welcher Punkt am rechten
 * Rand steht, ist eine Frage des Inhalts. Zwei Tatsachen machen sie möglich:
 *
 *   Die überlaufende Menge ist immer ein SCHLUSSSTÜCK der Liste. Überlauf
 *   heisst linke Kante + Breite > rechter Rand; je weiter rechts ein Punkt
 *   steht, desto eher trifft das zu. Es kann also nie ein Punkt in der Mitte
 *   überlaufen, während der letzte es nicht tut.
 *
 *   Die Leiste ist rechtsbündig (.site-menu steht auf margin-inline-start:
 *   auto). Der letzte Punkt endet damit genau am rechten Rand, und die drei
 *   letzten Punkte liegen immer in der rechten Hälfte der Seite — ein nach
 *   rechts ausgerichtetes Untermenü hat dort links Platz im Überfluss.
 *
 * Drei und nicht zwei: in die rechtesten 300 px passen bei üblichen Titel-
 * breiten bis zu drei Punkte, und zwei liessen den dritten überlaufen.
 *
 * Die symmetrische Falle — ein sehr breites Untermenü am ERSTEN Punkt, das
 * rechtsbündig nach links hinausliefe — schliesst :nth-last-child von selbst,
 * und zwar besser als eine Ausnahme es könnte. Ein erster Punkt kann nur dann
 * unter die Regel fallen, wenn das Menü höchstens drei Punkte hat; dann steht
 * er selbst weit rechts, und rechtsbündig ist auch für ihn richtig. In einem
 * langen Menü, wo der erste Punkt weit links steht, ist er nie unter den
 * letzten drei und bleibt linksbündig.
 *
 * Ein erster Entwurf trug hier ein :not(:first-child). Das war genau
 * verkehrt herum: gemessen an einem Menü aus drei Punkten mit 417 px breiten
 * Untermenüs lief bei 1024 px der erste Punkt über den rechten Rand, weil die
 * Ausnahme ihn von der Regel ausnahm, die ihm geholfen hätte.
 *
 * Nachfahren statt Kind im zweiten Teil des Selektors: liegt eine dritte
 * Ebene in einem rechtsbündigen Zweig, endet auch sie am rechten Rand statt
 * darüber hinaus. menuFor rendert bis zur dritten Ebene.
 *
 * Kein overflow: clip an der Leiste oder am body. Das wäre keine Lösung,
 * sondern eine Vertuschung: das Untermenü MUSS über die Leiste hinausragen
 * dürfen, sonst ist es unbrauchbar. */
.site-menu > ul > li:nth-last-child(-n+3) ul {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
.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-erde-wash); }

/* 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. Hier
   kommt nur dazu, was die neue Sprache braucht. */
.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-erde-wash); text-decoration: none; }
.lang-nav [aria-current] { color: var(--hc-erde); 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-erde-soft); }
.site-cart__count { color: var(--hc-erde); 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. Eine Galerie, ein Video und ein Bild
 * über die volle Breite laufen bis an den rechten Rand von .hc-wide.
 *
 * Das Mass kommt aus --hc-measure, also aus dem Regler der Verwaltung, mit 74
 * Zeichen als Rückfall. Die Hofseiten, für die diese Vorlage gedacht ist, sind
 * reiner Fliesstext: Überschrift, Bild, Absatz, Link, immer wieder. Genau
 * dieser Wechsel muss tragen. */
.page-content {
  display: grid;
  grid-template-columns: [text-start] min(100%, var(--hc-measure, 74ch)) [text-end] minmax(0, 1fr) [breit-ende];
}
.page-content > * { grid-column: text-start / text-end; min-width: 0; }
/* WELCHER BAUSTEIN BREIT WIRD — die Regel, nicht die Liste.
 *
 * Breit ist, was von sich aus MEHRSPALTIG ist oder ein BILD in seiner
 * natürlichen Grösse zeigt. Schmal bleibt, was GELESEN wird.
 *
 * Diese Zeile ist dreimal nachgebessert worden, jedesmal um einen Namen, und
 * jedesmal war der Grund derselbe. Deshalb steht hier die Regel: beim nächsten
 * Bausteintyp muss niemand raten, und niemand nimmt „der Vollständigkeit
 * halber" etwas auf, das dort nicht hingehört.
 *
 * Mehrspaltig, also breit:
 *   .hc-galerie   ein Raster aus Bildern.
 *   .hc-karten    ein Raster aus Karten. In der Textspalte (705 px bei
 *                 1280 px Fenster) passten drei nicht nebeneinander:
 *                 bausteine.css gibt .hc-spalten-3 ein
 *                 minmax(min(100%, 14rem), 1fr), drei Spuren brauchen mit den
 *                 zwei Fugen 3 × 224 + 2 × 24 = 720 px. Es fehlten fünfzehn
 *                 Pixel, und die Reihe brach auf 2+1 um.
 *   .hc-bildtext  ein Bild NEBEN einem Text, also zwei Spalten. In 705 px
 *                 blieben dem Bild 340 px und dem Text Zeilen von rund
 *                 30 Zeichen — es sah aus, als sei ein Vorschaubild neben
 *                 einen Absatz gerutscht. Bei voller Breite sind es
 *                 (1178 − 24) / 2 = 577 px je Seite, und der Baustein tut,
 *                 wofür es ihn gibt. --rechts geht als blosser Modifikator
 *                 derselben Klasse von selbst mit.
 * Bild in natürlicher Grösse, also breit:
 *   .hc-video      ein Film läuft nicht in Spaltenbreite.
 *   .hc-bild--breit und .hc-bild--voll: siehe die drei Stufen gleich unten.
 *
 * Wird gelesen, bleibt also schmal: .hc-text, .hc-zitat, .hc-eigen — und
 * ausdrücklich AUCH .hc-aufruf. Das ist kein Versehen und keine vergessene
 * Zeile: ein Aufruf ist ein Kasten mit einem Satz und einem Knopf, sein Inhalt
 * ist mittig gesetzt, und über 1178 px gezogen stünde ein Halbsatz in einer
 * sehr breiten leeren Fläche. Er ist das einzige Element, das absichtlich in
 * der Textspalte bleibt. Wer ihn hier einträgt, macht ihn kaputt.
 *
 * Unterhalb des Masses ändert das nichts: die zweite Rasterspalte ist dort
 * null breit, breit und schmal sind dasselbe. */
.page-content > :is(.hc-galerie, .hc-karten, .hc-bildtext, .hc-video,
                    .hc-bild--breit, .hc-bild--voll) {
  grid-column: text-start / breit-ende;
}

/* FÜR EIN BILD HAT „BREIT" DREI STUFEN.
 *
 * Das ist die Ergänzung, die der Regel oben noch fehlte: sie sagt, WAS breit
 * ist, aber für ein Bild ist breit nicht ein Zustand, sondern eine Leiter.
 *
 *   ohne Zusatz   Textspalte. Ein Bild auf Lesebreite — die bewusste Wahl der
 *                 Redaktion, und deshalb die einzige Stufe, die man ansagen
 *                 muss.
 *   --breit       die breite Rasterspalte, text-start / breit-ende, dasselbe
 *                 Mass wie .hc-karten und .hc-bildtext.
 *   --voll        über die ganze Fensterbreite. Das macht bausteine.css mit
 *                 margin-inline: calc(50% - 50vw) schon richtig, und es bleibt
 *                 dort.
 *
 * Warum --breit hier eine eigene Zeile braucht: bausteine.css zieht es ab
 * 60em auf inline-size: min(115%, 100vw) mit margin-inline: -7.5% (Z. 58-70).
 * Das ist der Kunstgriff einer Vorlage OHNE Raster — ein Bild läuft prozentual
 * aus der Textspalte heraus. Gegen unser Zweispaltenraster ergab das
 * 705 × 1.15 = 810 px, während ein allein stehendes Bild im Markdown 1163 px
 * bekam: zwei Wege zum selben Ziel mit verschiedenem Ergebnis, und der
 * ausdrücklich als „breit" ausgezeichnete war der schmalere. Prozentüberzug
 * und Rasterspalte kämpfen gegeneinander, also wird der Überzug hier
 * zurückgenommen und die Spalte entscheidet allein.
 *
 * Ein allein stehendes Bild im Markdown entspricht damit genau --breit, und
 * das ist richtig: Markdown hat keine Möglichkeit, „schmal" zu sagen, und
 * breit ist die sinnvollere Vorgabe. Die beiden Wege dürfen sich also
 * unterscheiden — der eine wird ausgezeichnet, der andere geerbt. */
.page-content > .hc-bild--breit {
  inline-size: auto;
  margin-inline: 0;
}
.page-content > * + * { margin-block-start: var(--hc-space-5); }

/* Überschriften: die GRÖSSE gilt überall im Inhalt, der grosse ABSTAND nur
 * auf der obersten Ebene. Zwei Regeln, zwei verschiedene Reichweiten, und das
 * ist Absicht — wer sie zusammenführt, macht einen der beiden Fehler wieder.
 *
 * Warum die Grösse ein Nachfahrenselektor sein MUSS: eine Überschrift über
 * einem Bild-neben-Text kann gar nicht anders, als im Markdown des Bausteins
 * zu stehen. internal/block/render.go gibt blk.Title nur beim `aufruf` aus,
 * und templates/admin/block_list.html bietet ein Titelfeld auch nur dort an
 * (plus je Karte einer Kartenreihe). Für `bildtext` und `galerie` gibt es
 * keines. Ein `## …` im Baustein landet damit in .hc-bildtext__text oder
 * .hc-text — kein direktes Kind von .page-content. Mit einem Kindselektor
 * blieb es auf 26 px stehen, während dieselbe Überschrift auf einer
 * Fliesstext-Seite 37 px hatte; auf einer Website, auf der Baustein- und
 * Fliesstextseiten nebeneinander stehen, ist das ein Bruch von Seite zu Seite.
 *
 * Warum der Abstand ein KINDselektor bleibt: dort eröffnet eine Überschrift
 * einen Abschnitt DER SEITE, und der Absatz davor gehört noch zum vorigen —
 * auf neun Abschnitten ist das der Unterschied zwischen einer Wand und einem
 * Text. Innerhalb eines Bausteins, der über .hc-block schon margin-block um
 * sich hat, wäre derselbe Abstand doppelt gesetzte Luft; dort trägt der
 * Rhythmus des Bausteins (.hc-text > * + *).
 *
 * Ausgenommen sind die zwei Überschriften, die der Kern SELBST baut:
 * .hc-karte__titel und .hc-aufruf__titel. Sie sind Bauteile und keine
 * Gliederung des Textes, ihre Grösse kommt aus bausteine.css über --step-1
 * und --step-2. Ohne das :not() gewänne der Nachfahrenselektor gegen die
 * Klasse und blähte jeden Kartentitel auf die Grösse einer Kapitelüberschrift. */
.page-content :where(h2):not(.hc-karte__titel, .hc-aufruf__titel) { font-size: var(--hc-text-2xl); }
.page-content :where(h3):not(.hc-karte__titel, .hc-aufruf__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); }
/* Steht die Überschrift ganz oben, gibt es nichts, wovon sie sich absetzen
   müsste — sonst reisst der erste Abschnitt ein Loch unter den Seitenkopf. */
.page-content > :where(h2, h3):first-child { margin-block-start: 0; }
.page-content :where(h2, h3) { max-width: var(--hc-measure, 74ch); }

/* 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 neun Seiten, die nur aus Überschrift, Bild, Absatz und
 * Link bestehen, stand sie leer — bei 1265 px Seitenbreite waren das ü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.
 *
 * Ein Querformat füllt damit die breite Spalte, ein Hochformat schrumpft auf
 * 70vh und steht mittig — statt den halben Bildschirm zu füllen. Kein
 * object-fit: cover, weil ein Zuschnitt auf einer Hofseite Köpfe abschneidet,
 * 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);
}

.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-erde); 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-erde-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-erde-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 dem Schaf, 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: 64px; height: 40px; display: block;
  color: var(--hc-erde);
  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-erde); text-decoration: underline; }
.site-footer__contact > * + *, .site-footer__sister > * + * { margin-block-start: var(--hc-space-2); }
.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, 74ch); }
.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. */
.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-erde); }
.page-fields img { 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-erde-soft); border-radius: var(--hc-r-pill);
  color: var(--hc-erde); text-decoration: none;
  transition: background-color var(--hc-dur-fast) var(--hc-ease);
}
.term:hover { background: var(--hc-erde-wash); text-decoration: none; }

/* Nachbarbeiträge — drei Ziele in einer Zeile, aussen die Richtung. */
.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-erde); }
.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 es 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.

   Ausserdem: sieben Menüzeilen 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 Hügelzeichnung. 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; }
/* aspect-ratio mit object-fit: cover, damit ein Hochformat den
   Aufmacher nicht in die Länge zieht. Ein Hofbild ist meistens quer,
   aber „meistens" ist keine Zusage, die eine Vorlage machen darf. */
.site-art__bild {
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  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 dafür ist fast
   immer derselbe: das helle Papier. Wer stattdessen .hc-block-Regeln
   nachbaut, hat zwei Gestaltungen zu pflegen und behält die zweite
   nicht. */

/* 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.

   Das Galeriebild wird zugeschnitten und füllt seinen Rahmen; die drei
   Bildarten, die NICHT zugeschnitten werden, stehen zusammen weiter
   unten unter „Ein Bild wird in seiner eigenen Grösse gezeigt". */
.hc-galerie__bild img { border: 1px solid var(--hc-hairline); }

/* Bildunterschrift — gesperrte Versalien statt der Mono-Beschriftung
   aus holzcloud. 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;
}

/* 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. Kein
   backdrop-filter: der Kunstgriff aus holzcloud ergibt nur auf
   dunklem Grund Sinn, auf Papier wirkt eine halbdurchsichtige Karte
   schmutzig. */
.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-erde-soft);
  box-shadow: var(--hc-shadow-lift);
}

/* Zitat — die Marke trägt der Balken, nicht die Schriftfarbe. Ein
   ganzer Absatz in Erdbraun läse sich als Werbung. */
.hc-zitat { border-inline-start-color: var(--hc-erde); }
.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); }

/* EIN ZURUF DARF MITTIG STEHEN, EINE MITTEILUNG NICHT.
 *
 * bausteine.css stellt .hc-aufruf auf text-align: center (Z. 196), und für
 * das, was block.go beschreibt — „a boxed invitation with a button" —, ist
 * das richtig: ein Satz und ein Knopf stehen mittig besser als linksbündig.
 *
 * Derselbe Baustein trägt in der Praxis aber auch Mitteilungen. Gemessen: ein
 * aufruf mit VIER Absätzen, 705 px breit, alles mittig. Fliesstext mit
 * beidseitigem Flatterrand ist schwer zu lesen — das Auge findet den Anfang
 * der nächsten Zeile nicht, weil er jedesmal woanders liegt. Derselbe Text
 * stand als handgeschriebenes <aside> vorher linksbündig; die Umstellung auf
 * einen echten Baustein hat ihn also verschlechtert.
 *
 * Nicht grundsätzlich linksbündig, sondern am Inhalt entschieden: den kurzen
 * Fall macht die Vorgabe des Kerns richtig, und ihn mitzunehmen hiesse, den
 * guten Fall für den schlechten zu opfern. Zwei Merkmale verraten die
 * Mitteilung, und beide sind mit :has() zu sehen:
 *
 *   mehr als ein Kind   ein zweiter Absatz, oder ein Absatz und eine Liste.
 *                       Ein Zuruf ist genau ein Satz.
 *   eine Liste          Aufzählungspunkte mittig sind in jeder Länge falsch;
 *                       eine Liste hat eine linke Kante, das ist ihr Sinn.
 *
 * text-align: start und nicht left — dieselbe Regel trägt dann auch eine
 * Sprache, die von rechts nach links läuft.
 *
 * Ohne :has() bleibt es beim heutigen Zustand, also mittig. Das ist der
 * schlechtere der beiden Fälle und darum nennenswert; tragbar ist es, weil
 * der Text lesbar bleibt und nur unruhig steht. */
.hc-aufruf:has(.hc-aufruf__text > :nth-child(2)),
.hc-aufruf:has(.hc-aufruf__text :is(ul, ol)) {
  text-align: start;
}

/* 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 erdbraun, und diese Regel steht
     SPÄTER in derselben Datei — ohne die Zeile hier stünde der Knopf
     im Aufruf-Baustein als erdbraune Schrift auf erdbrauner 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 --hc-radius und --hc-space direkt ab,
   also die Reglernamen der Verwaltung, 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.
 *
 * weide.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); }

/* EIN BILD WIRD IN SEINER EIGENEN GRÖSSE GEZEIGT, UND DER RAHMEN RICHTET
 * SICH DANACH — NICHT UMGEKEHRT.
 *
 * Das ist die Absicht. Was darunter steht, sind ihre zwei Hälften: nicht
 * hochrechnen, und nicht ins Unermessliche wachsen lassen. Sie stehen
 * zusammen, weil sie dasselbe sagen; wer eine davon entfernt, hat den Satz
 * darüber halbiert.
 *
 * Sie gelten für die drei Bildarten, die NICHT zugeschnitten werden:
 * .hc-bild, .hc-bildtext__bild und .hc-eigen__bild. Karte und Galerie sind
 * ausgenommen und behalten ihr inline-size: 100 % aus bausteine.css — dort
 * wird in einen festen Rahmen (aspect-ratio + cover) zugeschnitten, und ein
 * Bild MUSS diesen Rahmen füllen, sonst klafft er.
 *
 * ── Erste Hälfte: nicht hochrechnen ──────────────────────────────────
 *
 * bausteine.css sagt eine Ebene höher schon das Richtige — .hc-block img
 * steht auf max-inline-size: 100 % (Z. 34). Zwei Zeilen darunter
 * überschreiben es .hc-bild img (Z. 50) und .hc-bildtext__bild img (Z. 96)
 * mit inline-size: 100 %, und das ist für einen ungeschnittenen Baustein zu
 * viel: es zwingt jedes Bild auf die Spaltenbreite, auch ein kleines.
 *
 * Gemessen: die Bildmarke eines Hofes, ein Scherenschnitt mit Schriftzug,
 * 235 px breit, wurde in einer 569 px breiten Bildtext-Spalte 2,4-fach
 * hochgerechnet — der Schriftzug franste sichtbar aus. Ein kleines Bild
 * steht jetzt mittig in seiner Spalte, statt sie zu füllen. Das ist die
 * richtige Seite des Handels: eine unscharfe Marke ist schlimmer als eine
 * kleine.
 *
 * bausteine.css bleibt dabei unangetastet. Die Datei gehört dem Kern und
 * kleidet alle mitgelieferten Vorlagen plus jede hochgeladene; ihr
 * Kommentarkopf hält ausdrücklich fest, dass ein Theme alles davon
 * überschreiben darf und die Angaben dafür nur eine Klasse tief liegen.
 * Genau diese Freiheit wird hier benutzt.
 *
 * ── Zweite Hälfte: eine Höhengrenze ──────────────────────────────────
 *
 * Ein Hochformat sprengt sonst den Baustein. Gemessen auf einer Seite mit
 * vier bildtext-Bausteinen, Spalte je 533 px: ein Bild 900 × 1600 stand auf
 * 533 × 945, der Text daneben war 143 px hoch, und weil bausteine.css die
 * zwei Spalten auf align-items: center stellt, begann er 405 px unter der
 * Bildoberkante — eine Leerstelle von der Höhe eines halben Bildschirms.
 * Die drei Querformate im selben Wechsel sassen richtig. Ein bildtext
 * verspricht ein Bild NEBEN einem Text; ist das Bild dreimal so hoch wie
 * der Text, ist es kein Paar mehr, sondern ein Bild mit einer Fussnote.
 *
 * Vorher fiel das nicht auf, weil in der schmalen Textspalte jedes Bild auf
 * 340 px gedrückt wurde. Die Verbreiterung des Bausteins ist richtig; sie
 * legt den Fall nur offen.
 *
 * ZUSCHNITT IST HIER NICHT ERLAUBT, und das ist der Grund, warum die Grenze
 * an der Höhe hängt und nicht an einem cover. internal/block/render.go ruft
 * imgTag nur für Galerie (Z. 165) und Karte (Z. 182) mit gesetztem
 * Zuschnitt-Kennzeichen; nur dort entsteht aus dem Bildmittelpunkt ein
 * object-position (Z. 369). Ein bildtext-Bild bekommt keinen mitgeliefert
 * (Z. 146, cropped = false), ein object-fit: cover schnitte also blind aus
 * der geometrischen Mitte — bei einem Tierbild ist das der Kopf.
 *
 * Zwei Zahlen, zwei verschiedene Fragen:
 *
 *   100cqw  Im Bildtext: ein Bild wird nie höher, als seine eigene Spalte
 *           breit ist. Das ist die Paar-Regel selbst, in eine Länge
 *           übersetzt — die Grenze folgt dem Layout und nicht dem Fenster.
 *   70vh    Überall: nie höher, als das Fenster trägt. Für .hc-bild und
 *           .hc-eigen__bild ist das die ganze Grenze, denn die stehen
 *           allein in der Spalte und sind nicht die Hälfte eines Paares —
 *           dieselbe Zahl wie bei der Figur im Fliesstext, und aus
 *           demselben Grund.
 *
 * Für eine Vorlage, deren Website überwiegend aus Tierporträts besteht, ist
 * das nicht ein Sonderfall unter vieren, sondern der Regelfall — die Regel
 * heisst dort genauso, nur trägt sie mehr Gewicht.
 *
 * Ohne Unterstützung für Container-Abfragen fällt allein die
 * min()-Deklaration weg; das Nicht-Hochrechnen und die 70vh der beiden
 * anderen Bildarten bleiben. Tragbarer Rückfall, dieselbe Überlegung wie
 * bei :has(). */
.hc-bild img, .hc-bildtext__bild img, .hc-eigen__bild img {
  /* inline-size: auto hebt das 100 % aus bausteine.css auf. Ohne diese
     Zeile ist die Breite gesetzt, und eine Höhengrenze staucht das Bild,
     statt es zu verkleinern. */
  display: block;
  inline-size: auto; max-inline-size: 100%;
  block-size: auto; max-block-size: 70vh;
  margin-inline: auto;
  border: 1px solid var(--hc-hairline);
}
/* Nur im Bildtext kommt die Spaltenbreite als zweite Grenze dazu; dafür
   muss die Spalte ein Grössen-Container sein. */
.hc-bildtext__bild { container-type: inline-size; }
.hc-bildtext__bild img { max-block-size: min(100cqw, 70vh); }

/* --voll ist die eine Stelle, an der die Höhengrenze WEG muss.
 *
 * Der Modifikator ist die Ansage: „über die ganze Fensterbreite". Eine
 * Höhengrenze nähme dem Bild genau dafür die Breite wieder — ein 16:9-Bild
 * über 1400 px ist 787 px hoch und wäre bei 70vh auf einem 900er Fenster auf
 * 1120 px zusammengeschrumpft, also nicht mehr voll. Wer --voll setzt, hat
 * entschieden.
 *
 * Das Nicht-Hochrechnen gilt hier trotzdem weiter, und das ist kein
 * Widerspruch: eine hochgerechnete Aufnahme ist BESCHÄDIGT, eine hohe ist nur
 * hoch. Das eine will niemand, das andere kann man wollen. */
.hc-bild--voll img { max-block-size: none; }

/* 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-erde); }

/* ══ 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; }
.archive-entry__image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; 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-erde); }
.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-erde); }
.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-erde); }
.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 Hofladen ═════════════════════════════════════════════
   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 Mono-Familie ist tabular-nums die Zeile, die Beträge
   untereinander ausrichtet. Sie ist der Ersatz für die
   Schreibmaschine aus holzcloud, und für Zahlen der 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-erde-wash); color: var(--hc-erde); }

.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); }
.product-card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; 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-erde); }
.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); }
.product__image {
  width: 100%; display: block;
  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; 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; 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-erde); }
.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-erde-soft); }
.choice:has(:checked) { border-color: var(--hc-erde-soft); background: var(--hc-erde-wash); }
.choice input { accent-color: var(--hc-erde); 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 ═════════════════════════════════════════════
   Anders als bei der Vorlage holzcloud ist der Grund 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 eine Hofseite
   ausdruckt, will meistens genau diese Zeilen. */
@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 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; }
}