/* Bausteine.
 *
 * Die Auszeichnung der Bausteine schreibt der Kern, also liefert er auch die
 * Grundgestaltung dazu. Ein Theme, das nichts davon weiss — und dazu gehört
 * jedes hochgeladene —, zeigt eine Galerie sonst als Liste untereinander und
 * eine Kartenreihe als Textwüste.
 *
 * Ein Theme darf alles davon überschreiben: dieses Stylesheet steht vor dem des
 * Themes, und alle Angaben sind eine Klasse tief, also leicht zu übertreffen.
 *
 * Farben und Abstände kommen aus dem Theme, wo es welche gibt. Die
 * mitgelieferten benutzen zwei Namensfamilien — --paper/--ink/--brand und
 * --bg/--text/--accent —, deshalb wird beides gefragt, mit einem letzten
 * Rückfall auf currentColor. So sieht ein Baustein auch in einem Theme
 * anständig aus, das keine der beiden kennt.
 */

.hc-block {
    --hc-ton: var(--ink, var(--text, currentColor));
    --hc-grund: var(--paper, var(--bg, transparent));
    --hc-akzent: var(--brand, var(--accent, currentColor));
    --hc-linie: var(--line, var(--border, color-mix(in oklch, currentColor 20%, transparent)));
    --hc-luft: var(--space-3, 1.5rem);
    --hc-rund: var(--radius, 4px);

    margin-block: var(--space-4, 2rem);
}

/* Der erste und der letzte Baustein brauchen aussen keinen zusätzlichen
 * Abstand — den setzt das Theme um den Inhalt herum schon. */
.hc-block:first-child { margin-block-start: 0; }
.hc-block:last-child { margin-block-end: 0; }

.hc-block img {
    max-inline-size: 100%;
    block-size: auto;
}

.hc-block figcaption,
.hc-bildunterschrift {
    margin-block-start: 0.5rem;
    font-size: 0.875em;
    opacity: 0.75;
}

/* --- Bild ---------------------------------------------------------------- */

.hc-bild { margin-inline: 0; }

.hc-bild img {
    inline-size: 100%;
    border-radius: var(--hc-rund);
}

/* Breiter und ganz breit gehen über den Textblock hinaus, aber nie über den
 * Bildschirm: 100vw wäre auf einer Seite mit sichtbarer Bildlaufleiste einen
 * Balken zu breit. */
.hc-bild--breit,
.hc-bild--voll {
    inline-size: min(100%, 100vw);
}

@media (min-width: 60em) {
    .hc-bild--breit {
        inline-size: min(115%, 100vw);
        margin-inline: -7.5%;
    }
    .hc-bild--voll {
        inline-size: 100vw;
        margin-inline: calc(50% - 50vw);
        border-radius: 0;
    }
    .hc-bild--voll img { border-radius: 0; }
}

/* --- Bild und Text ------------------------------------------------------- */

/* Auf schmalen Bildschirmen steht das Bild über dem Text. Nicht daneben und
 * schmaler: zwei Spalten auf einem Telefon sind zwei zu enge Spalten. */
.hc-bildtext {
    display: grid;
    gap: var(--hc-luft);
}

@media (min-width: 45em) {
    .hc-bildtext {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    /* Die Reihenfolge im Quelltext bleibt Bild, dann Text — auch wenn das Bild
     * rechts steht. Das ist die Reihenfolge, in der ein Vorleseprogramm liest,
     * und die soll nicht von einer Layout-Einstellung abhängen. */
    .hc-bildtext--rechts .hc-bildtext__bild { order: 2; }
}

.hc-bildtext__bild img {
    inline-size: 100%;
    border-radius: var(--hc-rund);
}

.hc-bildtext__text > :first-child { margin-block-start: 0; }
.hc-bildtext__text > :last-child { margin-block-end: 0; }

/* --- Galerie und Karten -------------------------------------------------- */

.hc-galerie,
.hc-karten {
    display: grid;
    gap: var(--hc-luft);
}

/* auto-fit statt einer festen Spaltenzahl: die gewünschte Zahl ist eine
 * Obergrenze, und darunter bricht das Raster von selbst um, ohne dass für jede
 * Breite eine eigene Regel nötig wäre. */
.hc-spalten-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hc-spalten-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.hc-spalten-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.hc-galerie__bild { margin: 0; }

/* Das Bild behält seine eigene Form.
 *
 * Hier stand `aspect-ratio: 4 / 3` mit `object-fit: cover`, und das schnitt
 * von jedem Bild weg, was nicht in diese Form passte — bei einem 1,94:1 breiten
 * Bildschirmfoto knapp ein Drittel, links und rechts, also genau dort, wo bei
 * einer Anwendung die Ränder und die Werkzeugleisten liegen. Der Baustein heisst
 * Galerie; sein Zweck ist das Bild, nicht die Kachel.
 *
 * Die drei anderen Bildstellen — hc-bild, hc-bildtext, hc-eigen — haben es immer
 * so gehalten. Ein gleichmässiges Raster bleibt trotzdem gleichmässig, solange
 * die Bilder einer Galerie dieselbe Form haben, was bei einer Reihe
 * Bildschirmfotos der Normalfall ist. Sind sie verschieden hoch, richten sie
 * sich oben aus, damit der Rest der Zeile nicht auseinanderfällt.
 *
 * Eine Vorlage, die eine feste Kachel will, setzt sie selbst — Rudel tut das
 * mit `aspect-ratio: 1` für seine Hundebilder. */
.hc-galerie__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--hc-rund);
}

.hc-galerie { align-items: start; }

/* --- The lightbox -------------------------------------------------------- */

/* From here down the comments are English while the rest of this file is
 * German. That is deliberate: this project's code became English on
 * 2026-09-06, and an existing file is not translated to match. Do not "fix"
 * one half of it.
 *
 * The whole mechanism is :target and one anchor per picture. No script is
 * involved, so the browser's back button undoes an enlargement for free — the
 * state is a fragment in the URL, where the browser already keeps it.
 *
 * The large view is removed from the layout with display: none, and that is
 * the point of this section rather than a detail of it. An element that is
 * taken out of the flow but left in the box tree still counts toward the
 * scroll width: .planning/STATE.md:209 records what that cost in the weide
 * theme, where a submenu nobody had opened made every page of the site scroll
 * sideways, measured in headless Chrome at 1280, 1100 and 1024 pixels before
 * it was believed. A gallery sits on more pages than a submenu.
 *
 * display: none is also the honest hiding. With this stylesheet absent the
 * rule does not exist at all, the figure is simply visible, and the page reads
 * as a list of pictures with working anchors instead of a wreck — which is the
 * case for every theme written by following TEMPLATE-SPEC.md until today.
 *
 * So: no fixed and no absolute placement anywhere below, and no hiding that
 * leaves the element where it was. Those are three spellings of one mistake
 * and they all lead back to STATE.md:209. */
.hc-galerie__gross {
    display: none;
    margin: 0;
}

/* The gallery is a grid, so the revealed picture takes every column of it. The
 * browser scrolls to it on its own, because that is what a fragment does. */
.hc-galerie__gross:target {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.hc-galerie__gross img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: 80vh;
    object-fit: contain;
    border-radius: var(--hc-rund);
}

/* The tile is a link now. Without this a browser underlines it and paints its
 * own link colour into the gap under the picture. */
.hc-galerie__oeffnen {
    display: block;
    color: inherit;
    text-decoration: none;
}

.hc-galerie__steuerung {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hc-luft);
    align-items: baseline;
}

/* The close control goes to the end of the row wherever it lands, because
 * previous and next are absent at the two ends of a gallery and a control that
 * moved about would be a control nobody finds twice. */
.hc-galerie__schliessen {
    margin-inline-start: auto;
}


.hc-karte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--hc-luft);
    border: 1px solid var(--hc-linie);
    border-radius: var(--hc-rund);
    background: var(--hc-grund);
}

.hc-karte img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: calc(var(--hc-rund) / 2);
}

.hc-karte__titel {
    margin: 0;
    font-size: var(--step-1, 1.25rem);
}

.hc-karte__text > :first-child { margin-block-start: 0; }
.hc-karte__text > :last-child { margin-block-end: 0; }

/* Die ganze Karte ist der Link, nicht ein Wort darin: ein Ziel von drei Zeichen
 * trifft auf einem Telefon niemand. */
.hc-karte--link {
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.hc-karte--link:hover,
.hc-karte--link:focus-visible {
    border-color: var(--hc-akzent);
}

@media (prefers-reduced-motion: no-preference) {
    .hc-karte--link:hover { transform: translateY(-2px); }
}

.hc-karte--link .hc-karte__titel { color: var(--hc-akzent); }

/* --- Zitat --------------------------------------------------------------- */

.hc-zitat {
    margin-inline: 0;
    padding-inline-start: var(--hc-luft);
    border-inline-start: 3px solid var(--hc-akzent);
}

.hc-zitat blockquote {
    margin: 0;
    font-size: var(--step-1, 1.25rem);
    line-height: 1.4;
}

.hc-zitat blockquote p { margin: 0; }

.hc-zitat figcaption::before { content: "— "; }

/* --- Aufruf -------------------------------------------------------------- */

.hc-aufruf {
    padding: var(--space-4, 2rem);
    border-radius: var(--hc-rund);
    background: color-mix(in oklch, var(--hc-akzent) 8%, var(--hc-grund));
    text-align: center;
}

.hc-aufruf__titel {
    margin-block-start: 0;
    font-size: var(--step-2, 1.5rem);
}

.hc-aufruf__text > :last-child { margin-block-end: 0; }

.hc-aufruf__knopf { margin-block-end: 0; }

.hc-knopf {
    display: inline-block;
    padding: 0.65em 1.4em;
    border-radius: var(--hc-rund);
    background: var(--hc-akzent);
    color: var(--hc-grund);
    font-weight: 600;
    text-decoration: none;
}

.hc-knopf:hover,
.hc-knopf:focus-visible {
    background: color-mix(in oklch, var(--hc-akzent) 85%, var(--hc-ton));
}

/* --- Trennlinie ---------------------------------------------------------- */

.hc-trenner {
    border: 0;
    border-block-start: 1px solid var(--hc-linie);
}

/* --- Sprachwahl ---------------------------------------------------------- */

/* Die Auszeichnung dafür schreibt der Kern (jede mitgelieferte Vorlage bekommt
   dieselbe), also gehört auch die Grundgestaltung hierher. Bewusst schlicht:
   eine Vorlage soll sie überschreiben können, ohne erst etwas abzuräumen. */

.lang-nav {
    padding-block: 0.4rem;
}

.lang-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1, 0.875rem);
}

.lang-nav a { text-decoration: none; }

.lang-nav a:hover,
.lang-nav a:focus-visible { text-decoration: underline; }

/* Die aktuelle Sprache steht da, ist aber kein Link – sonst führt die
   Sprachwahl auf die Seite, auf der man ohnehin schon ist. */
.lang-nav [aria-current] {
    font-weight: 600;
    opacity: 0.75;
}

/* Ein Video aus der eigenen Mediathek. Kein eingebetteter Rahmen von einem
   fremden Server — deshalb braucht diese Seite auch kein Cookie-Banner. */
.hc-video { margin: var(--hc-space, 1.5rem) 0; }
.hc-video video { width: 100%; height: auto; display: block; border-radius: var(--hc-radius, 0); background: #000; }
.hc-video figcaption { margin-top: .4rem; font-size: .9em; opacity: .75; }

/* Eine Bausteinart, die diese Website selbst angelegt hat.
 *
 * Der Kern kann nicht wissen, wie ein „Rezeptschritt" aussehen soll — das ist
 * genau die Entscheidung, die dem Theme gehört. Was er liefern kann, ist, dass
 * so ein Baustein von Anfang an nicht wie ein Unfall aussieht: die Felder
 * stehen untereinander, ein Bild sprengt nichts, und ein angekreuztes Ja/Nein
 * setzt eine Klasse, an der das Theme etwas festmachen kann.
 *
 * Alles hier ist eine Klasse tief. Ein Theme, das
 * .hc-eigen--rezeptschritt {…} schreibt, gewinnt jedes Mal. */
.hc-eigen {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.hc-eigen__zeile,
.hc-eigen__datum,
.hc-eigen__link {
    margin: 0;
}

/* Eine Mehrfachauswahl steht Wert für Wert da, wie in der Spalte. */
.hc-eigen__liste {
    margin: 0;
    padding-inline-start: 1.25em;
}

.hc-eigen__text > :first-child { margin-block-start: 0; }
.hc-eigen__text > :last-child { margin-block-end: 0; }

.hc-eigen__bild {
    margin: 0;
}

.hc-eigen__bild img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--hc-rund);
}

/* --- The slideshow ------------------------------------------------------- */

/* English comments again, and for the reason the lightbox section gives above.
 *
 * A gallery whose block carries no display mode never matches anything here:
 * the grid rules further up are untouched and this whole section hangs off one
 * modifier class. So every page that exists today renders exactly as it did.
 *
 * The mechanism is scroll-snap and nothing else. The same grid becomes a single
 * row of columns, the row scrolls along the inline axis, and it comes to rest
 * on a picture's edge instead of between two. Stepping with the keyboard and
 * flicking with a thumb are the browser's own scrolling — there is no script
 * here, and internal/tmplmgr/script.go would refuse the scripted shape in an
 * uploaded theme in any case.
 *
 * Both halves are needed and neither does anything alone: scroll-snap-type on
 * the container says the scrolling snaps, scroll-snap-align on the children
 * says to what.
 *
 * On .hc-galerie.hc-galerie--diashow rather than on the modifier alone so that
 * it outweighs .hc-spalten-3 by specificity and not merely by standing later in
 * the file, which is a thing a later edit can undo without noticing. */
.hc-galerie.hc-galerie--diashow {
    /* One row of columns instead of a wrapping grid. grid-template-columns is
     * cleared explicitly because .hc-spalten-N set it and auto-flow alone would
     * fill those columns before it started making new ones. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 22rem);

    /* overflow-x rather than the logical overflow-inline, which is not yet
     * something every browser this program is served to understands. The snap
     * axis beside it is logical, so a right-to-left site snaps the right way
     * round without a second rule. */
    overflow-x: auto;
    scroll-snap-type: inline mandatory;

    /* Without this, reaching the end of the track hands the gesture to the page
     * behind it — which on a phone is the difference between a slideshow and an
     * accidental navigation backwards. */
    overscroll-behavior-inline: contain;

    /* The track scrolls, so it needs no wrapping and no stretching. */
    align-items: start;
    padding-block-end: 0.25rem;
}

/* Every direct child is a snap point: the tiles, and a large view once :target
 * has returned it to the layout. */
.hc-galerie.hc-galerie--diashow > * {
    scroll-snap-align: start;
}

/* The revealed large view is a member of the track, not something laid over it.
 *
 * The lightbox section further up hides it with display: none and gives it
 * grid-column: 1 / -1 when it is the target, which is right for a wrapping grid
 * and wrong for a single row — there it would mean the whole row. Here it is
 * simply the next column, so opening a picture in a slideshow scrolls the track
 * to a wide panel and nothing leaves the flow.
 *
 * That constraint is not a matter of taste. .planning/STATE.md:209 records what
 * an element outside the flow but inside the box tree cost the weide theme: a
 * submenu nobody had opened made every page of the site scroll sideways. A
 * horizontal scroll container is the easiest place in this phase to reproduce
 * it, because it is a scroll container on purpose — so there is no fixed and no
 * absolute placement in this section, and no hiding that leaves an element
 * where it was.
 *
 * No unit test can see that. It is measured in the browser pass of plan 11-07,
 * at three widths against the real files, the way the weide finding was
 * measured before it was believed. */
.hc-galerie.hc-galerie--diashow .hc-galerie__gross:target {
    grid-column: auto;
    grid-row: 1;
    inline-size: min(90vw, 48rem);
}