/* ===========================================================================
   Compagnie Naglschmid — Grundgestalt
   Fassung 18.08.2026: technisch statt antiquarisch.

   Haltung: ein Laborbuch, kein Antiquariat.
     · Sans für den Text — sachlich, gut lesbar, heutig
     · Monospace für alles Messende: Datum, Reifegrad, Adresse, Zähler
     · Haarlinien statt Zierrat, ein ruhiges Raster
     · alles in Systemschriften — keine Anfrage an einen fremden Server
       (AUSLIEFERUNG.md). Kommt später eine eigene Schrift, wird sie
       selbst gehostet und hier eingesetzt.
   =========================================================================== */

:root {
    --tinte:      #14191f;
    --tinte-hell: #5f6b76;
    --tinte-fein: #86929c;
    --papier:     #fbfcfd;   /* Blaupause, halb zu Weiss zurueckgenommen */
    --linie:      #e1e6ea;
    --linie-fein: #eef1f5;
    --akzent:     #14538c;   /* Tinte, tiefblau */
    --skizze:     #4a6c8c;   /* Bleistift — dasselbe Blau, gedeckt */
    --arbeit:     #14538c;   /* Tinte */

    --breite:     44rem;
    --breit:      74rem;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;
}

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

/* Kein Dunkelmodus. Entschieden am 18.08.2026.
   Eine wissenschaftliche Tafel ist fuer weisses Papier gezeichnet: Auf
   fast schwarzem Grund wirken die Linien duenner und die Weissraeume
   werden zu Loechern. Bei einem Haus, dessen halbes Werk aus
   Handzeichnungen besteht, ist das keine Kleinigkeit.
   color-scheme sorgt dafuer, dass auch Formularfelder hell bleiben. */
html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* --- Technische Auszeichnung: alles Messende ---------------------------- */
.marke, .kachel__fuss, .beitrag__zeile, .beitrag__permalink,
.blaettern, .quellen__titel, .herkunft__titel, .herkunft__beiwerk,
.rechtsseite__stand, .fuss, .kopf__name, time {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* --- Sprungmarke -------------------------------------------------------- */
.sprungmarke { position: absolute; left: -9999px;
    background: var(--akzent); color: var(--papier); padding: .6rem 1rem; }
.sprungmarke:focus { left: 0; top: 0; z-index: 10; }

/* --- Kopfbild ----------------------------------------------------------- */
/* Empfohlen 2400 x 600 px (4:1). Der Streifen entfaellt ersatzlos, wenn
   im Panel keines hinterlegt ist. */
.kopfbild {
    max-width: var(--breit);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.kopfbild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    background: var(--linie-fein);
}
.kopfbild + .kopf { border-top: 0; padding-top: 1.1rem; }

/* --- Kopf --------------------------------------------------------------- */
.kopf {
    max-width: var(--breit); margin: 0 auto;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--linie);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem 1.4rem;
}
.kopf__marke {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--tinte); text-decoration: none;
}
.kopf__marke:hover { color: var(--akzent); }
/* Das Zeichen steht allein — kein Name, kein Leitsatz daneben.
   Es darf deshalb Groesse haben: Bei 24 px waere der Sandstein Matsch. */
.kopf__logo { display: block; width: 56px; height: 56px; flex: none; }
@media (max-width: 34rem) { .kopf__logo { width: 40px; height: 40px; } }

/* Weltschalter und Menue sitzen als eine Gruppe rechts. */
.kopf__werkzeug { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* --- Burgermenue: <details>, ohne eine Zeile JavaScript ----------------- */
/* Eine Knopfform fuer Menue und Weltschalter. Zwei fast gleiche waeren
   zwei, die mit der Zeit auseinanderlaufen. */
.knopf {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .55rem; cursor: pointer; list-style: none;
    background: transparent;
    border: 1px solid var(--linie); border-radius: 2px;
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tinte-hell); user-select: none;
}
.knopf:hover { color: var(--akzent); border-color: var(--akzent); }

.menue { position: relative; }
.menue__knopf::-webkit-details-marker { display: none; }
.menue[open] .menue__knopf { color: var(--akzent); border-color: var(--akzent); }

/* Die drei Balken — als Rahmen gezeichnet, kein Zeichensatz noetig */
.menue__balken, .menue__balken::before, .menue__balken::after {
    display: block; width: 14px; height: 1.5px;
    background: currentColor; content: "";
}
.menue__balken { position: relative; }
.menue__balken::before { position: absolute; top: -4.5px; }
.menue__balken::after  { position: absolute; top:  4.5px; }
.menue[open] .menue__balken { background: transparent; }
.menue[open] .menue__balken::before { top: 0; transform: rotate(45deg); }
.menue[open] .menue__balken::after  { top: 0; transform: rotate(-45deg); }

.menue__inhalt {
    position: absolute; right: 0; top: calc(100% + .45rem); z-index: 20;
    min-width: 11rem;
    display: flex; flex-direction: column;
    background: var(--papier);
    border: 1px solid var(--linie);
    box-shadow: 0 2px 0 var(--linie-fein);
}
.menue__inhalt a,
.menue__inhalt button {
    padding: .6rem .9rem;
    font-family: var(--mono); font-size: .74rem;
    letter-spacing: .04em; color: var(--tinte);
    text-decoration: none; text-align: left;
    background: none; border: 0;
    border-bottom: 1px solid var(--linie-fein);
    cursor: pointer;
}
.menue__inhalt a:hover,
.menue__inhalt button:hover { background: color-mix(in srgb, var(--akzent) 7%, transparent);
                              color: var(--akzent); }
.menue__inhalt a[aria-current="page"] { color: var(--akzent); font-weight: 600; }

/* Die Pforte: der Weg an den Schreibtisch, abgesetzt vom Lesestoff.
   Eine kraeftigere Linie darueber — es ist ein anderer Ort, nicht die
   naechste Rubrik. */
.menue__pforte {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--linie);
}
.menue__pforte a { color: var(--tinte-fein); }
.menue__abmelden { display: flex; flex-direction: column; }

/* Sonst stossen die untere Linie des letzten Verweises und die obere
   der Pforte aneinander und ergeben einen doppelten Strich. */
.menue__inhalt a:has(+ .menue__pforte) { border-bottom: 0; }
.menue__pforte > *:last-child,
.menue__abmelden button { border-bottom: 0; }

/* --- Der Weg nach oben --------------------------------------------------- */
.zurueck {
    max-width: var(--breit); margin: 0 auto;
    padding: .8rem 1.5rem 0;
    font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
}
.zurueck a { color: var(--tinte-fein); text-decoration: none; }
.zurueck a:hover { color: var(--akzent); }

main { max-width: var(--breite); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.startseite main, .feed-seite main { max-width: var(--breit); }

/* --- Überschriften ------------------------------------------------------ */
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.18;
     letter-spacing: -.018em; font-weight: 650; margin: 0 0 1.2rem; }
h2 { font-size: 1.22rem; letter-spacing: -.01em; margin: 2.6rem 0 .6rem; font-weight: 650; }
h3 { font-size: 1.02rem; margin: 1.9rem 0 .35rem; font-weight: 650; }
p  { margin: 0 0 1.05rem; }

a { color: var(--akzent); text-underline-offset: .19em;
    text-decoration-thickness: from-font; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .3rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

.anriss { max-width: 34rem; margin: 0 0 2.5rem; color: var(--tinte-hell); }
.leer   { color: var(--tinte-fein); padding: 3rem 0; }

/* --- Die Marke: Reifegrad und Form -------------------------------------- */
.marke { margin: 0 0 .55rem; font-size: .7rem; letter-spacing: .1em;
         text-transform: uppercase; color: var(--tinte-fein); }
.marke__reife { color: var(--skizze); font-weight: 600;
                border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.marke--arbeit .marke__reife { color: var(--arbeit); }
.marke--verworfen .marke__reife { color: var(--tinte-fein);
    border-bottom-style: dotted; text-decoration: line-through; }
.marke__trenner { opacity: .45; margin: 0 .45em; }

/* --- Der Feed: ein Raster mit Haarlinien -------------------------------- */
.feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
    gap: 0;
    border-top: 1px solid var(--linie);
}
.kachel { min-width: 0; border-bottom: 1px solid var(--linie);
          border-right: 1px solid var(--linie-fein); }
.kachel__link { display: block; padding: 1.4rem 1.5rem 1.5rem;
    color: inherit; text-decoration: none; height: 100%;
    transition: background .12s ease; }
.kachel__link:hover { background: color-mix(in srgb, var(--akzent) 4%, transparent); }
.kachel__link:hover .kachel__titel { color: var(--akzent); }

.kachel__bild { margin: 0 0 .9rem; background: var(--linie-fein);
    aspect-ratio: 16 / 10; overflow: hidden; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kachel__titel { font-size: 1.08rem; line-height: 1.28; letter-spacing: -.012em;
    margin: 0 0 .3rem; font-weight: 650; }
.kachel__untertitel { margin: 0 0 .45rem; color: var(--tinte-hell); font-size: .9rem; }
.kachel__vorspann   { margin: 0 0 .8rem; font-size: .9rem; color: var(--tinte-hell); }
.kachel__fuss       { margin: 0; font-size: .72rem; color: var(--tinte-fein);
                      letter-spacing: .02em; }

/* --- Blättern ----------------------------------------------------------- */
.blaettern { display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: 2rem; padding-top: 1.1rem;
    border-top: 1px solid var(--linie); font-size: .78rem; letter-spacing: .03em; }
.blaettern__stand { color: var(--tinte-fein); }

/* --- Der Beitrag -------------------------------------------------------- */
.beitrag__kopf { margin-bottom: 2.2rem; }
.beitrag__untertitel { margin: -.6rem 0 .9rem; font-size: 1.1rem;
    color: var(--tinte-hell); font-weight: 400; }
.beitrag__zeile { margin: 0; font-size: .75rem; color: var(--tinte-fein);
    letter-spacing: .03em; }

.beitrag__vorspann { font-size: 1.14rem; line-height: 1.5;
    margin: 0 0 2.2rem; padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--akzent); color: var(--tinte); }

.beitrag__permalink { margin-top: 3rem; padding-top: 1rem;
    border-top: 1px solid var(--linie); font-size: .72rem;
    color: var(--tinte-fein); overflow-wrap: anywhere; letter-spacing: .02em; }

/* --- Verworfen ---------------------------------------------------------- */
.verworfen { margin: 0 0 2rem; padding: .9rem 1.1rem;
    border: 1px solid var(--linie); border-left: 3px solid var(--tinte-fein);
    background: color-mix(in srgb, var(--tinte-fein) 7%, transparent);
    font-size: .92rem; }
.verworfen__kopf { font-family: var(--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    margin: 0 0 .5rem; }
.verworfen__hinweis { margin: .6rem 0 0; color: var(--tinte-fein); font-size: .82rem; }

/* --- Quellen und Herkunft ----------------------------------------------- */
.quellen, .herkunft { margin-top: 2.8rem; padding-top: 1.1rem;
    border-top: 1px solid var(--linie); font-size: .92rem; }
.quellen__titel, .herkunft__titel { font-size: .68rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--tinte-fein);
    margin: 0 0 .9rem; font-weight: 600; }
.quellen__liste { margin: 0; padding-left: 1.3rem; }
.quellen__liste li { margin-bottom: .45rem; }
.quellen__liste li::marker { font-family: var(--mono); color: var(--tinte-fein); }
.quellen__notiz { display: block; color: var(--tinte-fein); font-size: .85rem; }

.herkunft__teil { margin-bottom: 1.35rem; }
.herkunft__teil h3 { font-size: .82rem; margin: 0 0 .4rem; font-weight: 600;
    color: var(--tinte-hell); }
.herkunft__liste { list-style: none; margin: 0; padding: 0; }
.herkunft__liste li { margin: 0; padding: .34rem 0;
    border-bottom: 1px solid var(--linie-fein); }
.herkunft__liste li:last-child { border-bottom: 0; }
.herkunft__beiwerk { color: var(--tinte-fein); font-size: .72rem;
    letter-spacing: .03em; margin-left: .55em; }
.herkunft__fundstelle { color: var(--tinte-hell); }
.herkunft__anmerkung  { margin: .2rem 0 0; color: var(--tinte-fein); font-size: .86rem; }

/* --- Fließtext ---------------------------------------------------------- */
.fliesstext { overflow-wrap: break-word; }
.fliesstext figure { margin: 2.2rem 0; }
.fliesstext img { max-width: 100%; height: auto; display: block; }
.fliesstext figcaption { margin-top: .5rem; font-family: var(--mono);
    font-size: .74rem; color: var(--tinte-fein); line-height: 1.5; }
.fliesstext blockquote { margin: 2.2rem 0; padding-left: 1.1rem;
    border-left: 2px solid var(--linie); color: var(--tinte-hell); }
.fliesstext pre { overflow-x: auto; padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--tinte) 5%, transparent);
    border-left: 2px solid var(--linie);
    font-family: var(--mono); font-size: .84rem; line-height: 1.55; }
.fliesstext code { font-family: var(--mono); font-size: .9em; }
.fliesstext table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fliesstext th, .fliesstext td { border-bottom: 1px solid var(--linie);
    padding: .45rem .6rem; text-align: left; }
.fliesstext th { font-family: var(--mono); font-size: .72rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-hell); }

.rechtsseite__stand { margin-top: 3rem; padding-top: 1rem;
    border-top: 1px solid var(--linie); color: var(--tinte-fein);
    font-size: .74rem; letter-spacing: .03em; }

/* --- Fuß ---------------------------------------------------------------- */
.fuss { max-width: var(--breit); margin: 0 auto; padding: 1.2rem 1.5rem 3rem;
    border-top: 1px solid var(--linie); color: var(--tinte-fein);
    font-size: .74rem; letter-spacing: .04em;
    display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
    align-items: baseline; justify-content: space-between; }
.fuss__recht a { margin-right: 1.3rem; }
.fuss__zeile { margin: 0; text-transform: uppercase; }

/* --- Papier ------------------------------------------------------------- */
@media print {
    :root { --papier: #fff; --tinte: #000; --tinte-hell: #333; --tinte-fein: #555; }
    .sprungmarke, .fuss__recht, .blaettern { display: none; }
    body { font-size: 10.5pt; }
    main { max-width: none; padding: 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

/* ===========================================================================
   Das Komposium als Buch
   =========================================================================== */

.band__einband {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--tinte);
    margin-bottom: 2.4rem;
}
@media (min-width: 46rem) {
    .band__einband {
        grid-template-columns: 15rem minmax(0, 1fr) 2.4rem;
        align-items: start;
        gap: 2.2rem;
    }
}
.band__umschlag img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    background: var(--linie-fein);
    box-shadow: 0 1px 0 var(--linie), 3px 3px 0 var(--linie-fein);
}
.band__untertitel {
    margin: -.5rem 0 1rem; font-size: 1.16rem;
    color: var(--tinte-hell);
}
.band__zeile {
    margin: 0 0 1.1rem; font-family: var(--mono);
    font-size: .74rem; letter-spacing: .03em; color: var(--tinte-fein);
}
.band__klappentext {
    margin: 0; padding-left: 1.1rem;
    border-left: 2px solid var(--akzent);
    font-size: 1.05rem; line-height: 1.55;
}

/* Der Buchruecken: gedrehte Schrift am rechten Rand */
.band__ruecken { display: none; }
@media (min-width: 46rem) {
    .band__ruecken {
        display: flex; align-items: center; justify-content: center;
        border-left: 1px solid var(--linie);
        border-right: 1px solid var(--linie);
        background: color-mix(in srgb, var(--akzent) 6%, transparent);
        min-height: 12rem; align-self: stretch;
    }
    .band__ruecken span {
        writing-mode: vertical-rl; text-orientation: mixed;
        font-family: var(--mono); font-size: .72rem;
        letter-spacing: .16em; text-transform: uppercase;
        color: var(--akzent); white-space: nowrap;
    }
}

.band__abschnitt {
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--tinte-fein); font-weight: 600;
    margin: 0 0 1rem;
}
.band__einschlag, .band__vorwort, .band__inhalt {
    margin-bottom: 2.6rem; padding-bottom: 2rem;
    border-bottom: 1px solid var(--linie);
}

.band__angaben {
    display: grid; grid-template-columns: 7rem minmax(0, 1fr);
    gap: .3rem 1rem; margin: 1.2rem 0 0; font-size: .9rem;
}
.band__angaben dt {
    font-family: var(--mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinte-fein); padding-top: .18rem;
}
.band__angaben dd { margin: 0; }

/* --- Inhaltsverzeichnis: erzeugt sich selbst ---------------------------- */
.inhalt { list-style: none; margin: 0; padding: 0; }
.inhalt__zeile {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: .8rem; align-items: baseline;
    padding: .45rem 0;
    border-bottom: 1px solid var(--linie-fein);
}
.inhalt__zeile:last-child { border-bottom: 0; }
.inhalt__nr {
    font-family: var(--mono); font-size: .78rem;
    color: var(--tinte-fein); font-variant-numeric: tabular-nums;
}
.inhalt__titel { font-weight: 600; }
.inhalt__beiwerk {
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--tinte-fein); text-align: right;
}

/* --- Kapitel ------------------------------------------------------------ */
.kapitel {
    padding-top: 2.4rem; margin-bottom: 3rem;
    border-top: 1px solid var(--linie);
}
.kapitel__nr {
    margin: 0 0 .5rem; font-family: var(--mono);
    font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
    color: var(--akzent); font-weight: 600;
}
.kapitel__titel { font-size: 1.5rem; line-height: 1.2; margin: 0 0 .35rem;
                  letter-spacing: -.015em; }
.kapitel__titel a { color: inherit; text-decoration: none; }
.kapitel__titel a:hover { color: var(--akzent); }
.kapitel__untertitel { margin: 0 0 .6rem; color: var(--tinte-hell); font-size: 1.02rem; }
.kapitel__zeile {
    margin: 0 0 1.2rem; font-family: var(--mono);
    font-size: .72rem; letter-spacing: .03em; color: var(--tinte-fein);
}
.kapitel__korrekturen { color: var(--korrektur); font-weight: 600; }
.kapitel__vorspann {
    font-size: 1.06rem; margin: 0 0 1.4rem;
    padding-left: 1rem; border-left: 2px solid var(--linie);
    color: var(--tinte-hell);
}
.kapitel__fuss {
    margin: 1.6rem 0 0; font-family: var(--mono);
    font-size: .7rem; color: var(--tinte-fein);
    overflow-wrap: anywhere;
}

/* ===========================================================================
   Korrekturfahne — rote Einfuegungen und Streichungen
   =========================================================================== */

:root { --korrektur: #b3261e; }

.korrektur {
    color: var(--korrektur);
    text-decoration-color: var(--korrektur);
}
.korrektur--rein {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}
.korrektur--raus { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.korrektur--rand {
    font-family: var(--mono); font-size: .8em;
    border: 1px solid var(--korrektur);
    border-radius: 2px; padding: 0 .3em;
}
.korrektur__wer {
    font-family: var(--mono); font-size: .68em;
    letter-spacing: .08em; text-transform: uppercase;
    opacity: .8; margin-left: .35em; vertical-align: .1em;
}

.korrekturfahne {
    margin: 0 0 2.2rem; padding: .85rem 1.1rem;
    border: 1px solid var(--korrektur);
    border-left-width: 3px;
    background: color-mix(in srgb, var(--korrektur) 7%, transparent);
    font-size: .9rem;
}
.korrekturfahne p { margin: 0; }

@media print {
    .korrektur { color: #000; }
    .korrektur--raus { text-decoration: line-through; }
}

/* --- Begriffsregister ---------------------------------------------------- */
.register { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.register__zeile {
    display: grid; gap: .1rem .8rem; padding: .7rem 0;
    border-bottom: 1px solid var(--linie-fein);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
    .register__zeile { grid-template-columns: 12rem 9rem minmax(0, 1fr); align-items: baseline; }
}
.register__wort { font-weight: 600; text-decoration: none; }
.register__lat  { color: var(--tinte-hell); font-size: .9rem; }
.register__kurz { color: var(--tinte-hell); font-size: .9rem; }

/* ===========================================================================
   Suche — serverseitig, ohne Index, ohne JavaScript
   =========================================================================== */

.suche { margin: 0 0 2.2rem; }
.suche__label {
    display: block; margin-bottom: .5rem;
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--tinte-fein); font-weight: 600;
}
.suche__zeile { display: flex; gap: 0; max-width: 34rem; }
.suche__feld {
    flex: 1 1 auto; min-width: 0;
    padding: .6rem .8rem;
    font-family: var(--sans); font-size: 1rem;
    color: var(--tinte); background: #fff;
    border: 1px solid var(--linie); border-right: 0;
    border-radius: 0; appearance: none;
}
.suche__feld:focus {
    outline: none; border-color: var(--akzent);
    box-shadow: inset 0 0 0 1px var(--akzent);
}
.suche__knopf {
    flex: none; padding: .6rem 1.1rem;
    font-family: var(--mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--akzent);
    border: 1px solid var(--akzent); border-radius: 0;
    cursor: pointer;
}
.suche__knopf:hover { background: var(--tinte); border-color: var(--tinte); }

.suche__zahl {
    font-family: var(--mono); font-size: .72rem;
    letter-spacing: .04em; color: var(--tinte-fein);
    margin: 0 0 .8rem;
}

.trefferliste { list-style: none; margin: 0; padding: 0;
                border-top: 1px solid var(--linie); }
.treffer { padding: 1rem 0; border-bottom: 1px solid var(--linie-fein); }
.treffer .marke { margin-bottom: .3rem; }
.treffer__titel { font-size: 1.06rem; font-weight: 600; text-decoration: none;
                  letter-spacing: -.01em; }
.treffer__anriss { margin: .3rem 0 0; font-size: .92rem; color: var(--tinte-hell); }

/* ===========================================================================
   Das Diorama — die lebende Küste hinter der Startseite

   Aufsatz, kein Fundament: Ohne JavaScript existiert nichts davon, und die
   Seite sieht aus wie immer. Alle Regeln greifen erst, wenn das Skript
   .diorama--lebt gesetzt hat.
   =========================================================================== */

.diorama { display: contents; }

.diorama__grund {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    display: none; z-index: 0;
    filter: blur(9px) saturate(.9);
    transform: scale(1.04);          /* deckt die weichen Ränder des Blurs ab */
    opacity: .72;
    pointer-events: none;
    transition: filter .25s ease, opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .diorama--lebt .diorama__grund { display: block; }
}

/* Der Rahmen, in dem die Leiste auf der Welt liegt. */
.diorama__streifen { position: relative; max-width: var(--breit); margin: 0 auto; }

.diorama__kopf {
    display: none;
    /* Kein Anker fuers Scroll-Anchoring. Der Streifen steht ganz oben;
       wuerde der Browser hier ausgleichen, schoebe er ihn aus dem Bild. */
    overflow-anchor: none;
    width: 100%; aspect-ratio: 4 / 1;
    background: #0b1418;
    max-width: var(--breit);
    margin: 0 auto;
    position: relative; z-index: 1;
}
/* Sichtbar, sobald JavaScript laeuft.
   Die Klasse .js setzt ein winziges Skript im <head> — VOR dem ersten
   Layout. Das ist der entscheidende Punkt: Wuerde der Streifen erst
   spaeter eingeblendet, waechst er nachtraeglich ueber der Seite ein,
   der Browser gleicht per Scroll-Anchoring aus und schiebt ihn um seine
   eigene Hoehe aus dem Bild. Die Seite stuende dann heruntergescrollt da.
   Platz reservieren schlaegt Nachkorrigieren.
   Der Streifen braucht die Flaeche ausserdem, damit der
   IntersectionObserver ihn ueberhaupt beobachten kann. */
.js .diorama__kopf { display: block; }

/* --- Die Leiste liegt auf der Welt -------------------------------------
   Damit wird der Kopf zum Bedienfeld des Dioramas statt zu einer zweiten
   Zeile darunter. Sie bleibt auch stehen, wenn das Blatt weg ist - sonst
   gaebe es keinen Weg zurueck.

   Alles daran haengt an .js: Ohne Skript gibt es keinen Streifen, die
   Leiste muss dann im Fluss stehen. Waere sie trotzdem absolut gesetzt,
   laege sie ueber dem Feed. */
.js .kopf--welt {
    position: absolute; inset: 0 0 auto 0; z-index: 10;
    border-bottom: 0;
    padding: 1.1rem 1.5rem;
}
/* Ein Schleier, falls die Sonne genau hinter der Leiste durchwandert.
   Ohne ihn waere der Kontrast eine Frage der Tageszeit. */
.js .kopf--welt::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom,
                rgba(11, 20, 24, .60), rgba(11, 20, 24, 0));
    pointer-events: none;
}
.js .kopf--welt .knopf {
    color: #eef3f6;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(11, 20, 24, .30);
    backdrop-filter: blur(6px);
}
.js .kopf--welt .knopf:hover,
.js .kopf--welt .menue[open] .menue__knopf {
    color: #fff; border-color: #fff; background: rgba(11, 20, 24, .55);
}

/* Das Blatt: die Publikation liegt auf dem Grund auf.
   Ein Blatt, kein Anstrich: Es endet dort, wo der Dioramastreifen endet,
   und laesst die Welt links und rechts stehen. Vorher lag es als weisse
   Flaeche ueber der ganzen Breite — dann kann man sich das Diorama auch
   sparen. */
.blatt { position: relative; z-index: 1; }
.diorama--lebt ~ .blatt,
body:has(.diorama--lebt) .blatt {
    max-width: var(--breit);
    margin: 0 auto;
    /* 90 % statt 93 %: genug, dass die Kueste durchscheint, und noch weit
       jenseits dessen, was der Text an Kontrast braucht. */
    background: color-mix(in srgb, var(--papier) 90%, transparent);
    backdrop-filter: blur(3px);
    /* Der Feed setzt direkt unter dem Streifen an. Ein Fingerbreit Luft,
       damit die erste Kachel nicht am Wasser klebt. */
    padding-top: .6rem;
    box-shadow: 0 1px 34px color-mix(in srgb, var(--tinte) 15%, transparent);
}

/* Blatt weg — die Welt liegt frei */
body.blatt-weg .blatt { display: none; }

/* Im Spiel verschwindet der ganze Streifen samt Kopfleiste: Zeichen und
   Menue gehoeren zur Publikation, nicht zur Welt. Frueher musste die
   Leiste stehenbleiben, weil in ihr der einzige Weg zurueck sass — den
   traegt jetzt der Pause-Knopf im Stapel, der ohnehin immer da ist. */
body.blatt-weg .diorama__streifen { display: none; }
body.blatt-weg .diorama__grund { filter: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    /* Die Klasse .js wird bei "weniger Bewegung" gar nicht erst gesetzt,
       die Leiste steht also ohnehin im Fluss. Dies ist der Guertel zum
       Hosentraeger. */
    .diorama__grund, .diorama__kopf { display: none !important; }
}

/* ===========================================================================
   DER RECHTE STAPEL — nach dem Vorbild aus Coastal Explorer
   ===========================================================================
   Fängt klein an: Play/Pause und der Spielstand per Post. Später kommen
   SET, HELP, MOD, DOC, DEV dazu — deshalb ist es schon jetzt ein Stapel
   und nicht ein Knopf mit fester Position.

   Er liegt über allem (z-index 30), aber unter dem aufgeklappten Menü:
   Wer das Menü offen hat, will das Menü und nicht den Spielstand.
   =========================================================================== */

/* Für Text, den nur ein Screenreader hört. Nicht display:none — das würde
   ihn auch dort verschweigen. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.stapel {
    position: fixed; top: 1rem; right: 1rem; z-index: 30;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    max-width: min(22rem, calc(100vw - 2rem));
}

.stapel__spielen {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; padding: 0; cursor: pointer;
    color: #eef3f6; background: rgba(11, 20, 24, .55);
    border: 1px solid rgba(255, 255, 255, .38); border-radius: 2px;
    backdrop-filter: blur(6px);
    font-size: 1rem; line-height: 1;
}
.stapel__spielen:hover { color: #fff; border-color: #fff; background: rgba(11, 20, 24, .75); }
.stapel__spielen[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); }

/* --- Der Spielstand ------------------------------------------------------ */
/* --- Lasche und Einfahren ------------------------------------------------
   Aus Coastal Explorer: Das Feld faehrt nach ein paar Sekunden ein und
   kommt per Klick auf die Lasche zurueck. Es soll da sein, wenn man es
   sucht, und nicht dauerhaft ueber der Welt haengen.

   Eingefahren wird ueber grid-template-columns von 1fr auf 0fr. Der Umweg
   hat einen Grund: max-width oder width lassen sich nur auf feste Werte
   animieren, und die Breite haengt hier am Inhalt. Mit dem Raster geht es
   weich und ohne eine einzige gemessene Zahl. */
.spielstandBox { display: flex; align-items: flex-start; gap: .4rem; }

.spielstand__lasche {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; flex: none; padding: 0; cursor: pointer;
    color: #eef3f6; background: rgba(11, 20, 24, .55);
    border: 1px solid rgba(255, 255, 255, .38); border-radius: 2px;
    backdrop-filter: blur(6px);
    font-size: .95rem; line-height: 1;
}
.spielstand__lasche:hover { color: #fff; border-color: #fff; background: rgba(11, 20, 24, .75); }

.spielstand {
    display: grid; grid-template-columns: 1fr;
    transition: grid-template-columns .35s ease, opacity .3s ease;
    width: 20rem; max-width: 100%;
    padding: .7rem .8rem;
    color: #eef3f6; background: rgba(11, 20, 24, .62);
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 2px;
    backdrop-filter: blur(6px);
}

.spielstand__leib { overflow: hidden; min-width: 0; }

/* Eingefahren. visibility haelt die Felder aus der Tabulatorfolge — sonst
   springt der Fokus in ein Feld, das niemand sieht. */
.spielstand--zu { grid-template-columns: 0fr; opacity: 0; }
.spielstand--zu .spielstand__leib { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .spielstand { transition: none; }
}

.spielstand__titel {
    margin: 0 0 .45rem;
    font-family: var(--mono); font-size: .64rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(238, 243, 246, .8);
}

.spielstand__zeile { display: flex; gap: .35rem; }

.spielstand__feld {
    flex: 1; min-width: 0; padding: .35rem .5rem;
    color: #16181d; background: #fbfcfd;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 2px;
    font: inherit; font-size: .82rem;
}

.spielstand__senden {
    padding: .35rem .8rem; cursor: pointer;
    color: #eef3f6; background: transparent;
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 2px;
    font-family: var(--mono); font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase;
}
.spielstand__senden:hover:not(:disabled) { color: #fff; border-color: #fff; }
.spielstand__senden:disabled { opacity: .45; cursor: default; }

.spielstand__satz {
    margin: .45rem 0 0; min-height: 1em;
    font-size: .76rem; color: rgba(238, 243, 246, .85);
}
.spielstand__satz[data-gut="nein"] { color: #ffb4ae; }

/* Auf schmalen Geräten sitzt der Stapel unten: Oben rechts liegt dort der
   Daumen nie, und über dem Text schwebend wäre er im Weg. */
@media (max-width: 40rem) {
    .stapel { top: auto; bottom: 1rem; right: .75rem; left: .75rem;
              max-width: none; align-items: stretch; }
    .spielstand { width: auto; }
    .stapel__spielen { align-self: flex-end; }
}

/* Weniger Bewegung: Es gibt keine Welt zu zeigen, also auch keinen Knopf.
   Das Formular bleibt — es hat mit Bewegung nichts zu tun. */
@media (prefers-reduced-motion: reduce) {
    .stapel__spielen { display: none !important; }
}

/* ===========================================================================
   GALERIE
   ===========================================================================
   Die Vorschaubilder werden nicht beschnitten: Bei einem Gemälde oder einer
   Katalogseite gehört der Ausschnitt zum Werk. Stattdessen steht jedes Bild
   ganz in einem ruhigen, gleich hohen Feld — wie auf einer Hängung, bei der
   die Rahmen verschieden sind, die Wand aber durchläuft.
   =========================================================================== */

.galerie__kopf { margin-bottom: 1.75rem; }
.galerie__kopf h1 { margin-bottom: .6rem; }

.galerie__personen { display: flex; flex-wrap: wrap; gap: .35rem; }
.galerie__personen a {
    padding: .25rem .6rem;
    border: 1px solid var(--linie); border-radius: 2px;
    font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
    color: var(--tinte-hell); text-decoration: none;
}
.galerie__personen a:hover { color: var(--akzent); border-color: var(--akzent); }
.galerie__personen a[aria-current="page"] {
    color: var(--papier); background: var(--akzent); border-color: var(--akzent);
}

.galerie {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.5rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.galerie__stueck {
    display: flex; flex-direction: column; gap: .2rem;
    color: inherit; text-decoration: none;
}

.galerie__rahmen {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; padding: .9rem; margin-bottom: .45rem;
    background: var(--linie-fein);
    transition: background .2s ease;
}
.galerie__rahmen img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto; display: block;
    box-shadow: 0 1px 4px rgba(20, 25, 31, .18);
}
.galerie__stueck:hover .galerie__rahmen,
.galerie__stueck:focus-visible .galerie__rahmen { background: var(--linie); }

.galerie__titel { font-weight: 600; line-height: 1.3; }
.galerie__stueck:hover .galerie__titel { color: var(--akzent); }
.galerie__zeile {
    font-family: var(--mono); font-size: .72rem; color: var(--tinte-hell);
}

/* --- Die Großansicht ------------------------------------------------------
   Der <dialog> selbst ist die dunkle Fläche. So bedeutet ein Klick auf ihn
   (und nicht auf das Bild) eindeutig: schliessen. */
.lupe {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    margin: 0; padding: 3.5rem 4.5rem 2rem; border: 0;
    background: rgba(10, 14, 18, .95); color: #eef3f6;
}
.lupe::backdrop { background: transparent; }
.lupe[open] { display: flex; align-items: center; justify-content: center; }

.lupe__figur {
    margin: 0; max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.lupe__bild {
    max-width: 100%; max-height: calc(100vh - 12rem);
    object-fit: contain; display: block;
}
.lupe__text { text-align: center; max-width: 44rem; }
.lupe__text p { margin: 0; }
.lupe__titel { font-weight: 600; font-size: 1.05rem; }
.lupe__zeile { font-family: var(--mono); font-size: .75rem; color: rgba(238, 243, 246, .75); margin-top: .15rem !important; }
.lupe__beschreibung { font-size: .9rem; margin-top: .45rem !important; color: rgba(238, 243, 246, .9); }
.lupe__fuss {
    margin-top: .6rem !important;
    display: flex; gap: 1rem; justify-content: center;
    font-family: var(--mono); font-size: .72rem;
}
.lupe__ansichten { color: rgba(238, 243, 246, .6); }
.lupe__ansichten:empty { display: none; }
.lupe__eintrag { color: #9cc3e6; }

.lupe__zu,
.lupe__zurueck,
.lupe__weiter {
    position: fixed; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
    color: #eef3f6; background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px;
    font-size: 1.6rem; line-height: 1;
}
.lupe__zu:hover, .lupe__zurueck:hover, .lupe__weiter:hover {
    background: rgba(255, 255, 255, .16); border-color: #fff;
}
.lupe__zu      { top: 1rem; right: 1rem; }
.lupe__zurueck { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lupe__weiter  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 40rem) {
    .lupe { padding: 3.5rem .75rem 1.5rem; }
    .lupe__zurueck, .lupe__weiter { top: auto; bottom: 1rem; transform: none; }
}

/* --- Das Galeriestück auf seiner eigenen Seite -------------------------- */
.werk { margin: 0 0 2rem; }
.werk__bild {
    display: flex; justify-content: center;
    padding: 1.5rem; background: var(--linie-fein);
}
.werk__bild img {
    max-width: 100%; max-height: 80vh; width: auto; height: auto; display: block;
    box-shadow: 0 1px 6px rgba(20, 25, 31, .2);
}
.werk__beschriftung { margin-top: .6rem; color: var(--tinte-hell); font-size: .95rem; }

.werk__ansichten {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem;
}
.werk__ansichten a {
    display: flex; align-items: center; justify-content: center;
    width: 5.5rem; height: 5.5rem; padding: .3rem; background: var(--linie-fein);
}
.werk__ansichten img { max-width: 100%; max-height: 100%; display: block; }

/* Die Katalogkarte: zwei Spalten, Beschriftung klein und technisch. */
.katalog { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.katalog__titel {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tinte-hell); margin: 0 0 .8rem;
}
.katalog__karte {
    display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .35rem 1.25rem; margin: 0;
}
.katalog__karte dt {
    font-family: var(--mono); font-size: .72rem; color: var(--tinte-fein);
    padding-top: .2rem;
}
.katalog__karte dd { margin: 0; white-space: pre-line; }
@media (max-width: 34rem) {
    .katalog__karte { grid-template-columns: 1fr; }
    .katalog__karte dd { margin-bottom: .5rem; }
}

/* Im Feed: Galeriestücke nicht beschneiden. */
.kachel__bild--ganz { display: flex; align-items: center; justify-content: center; background: var(--linie-fein); aspect-ratio: 3 / 2; }
.kachel__bild--ganz img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Personengalerie: der Name unter dem Kurznamen, die Zahl im Reiter. */
.galerie__wer { margin: -.3rem 0 .8rem; font-family: var(--mono); font-size: .8rem; color: var(--tinte-hell); }
.galerie__zahl { opacity: .6; margin-left: .15rem; }