/*
Theme Name:  Skoutz
Description: Eigenes Block-Theme für den Skoutz-Relaunch. Ausschliesslich
             Darstellung — Datenmodell, Suche und Buchfieberkurve liegen im
             Plugin skoutz-books (ADR-0006).
Version:     0.1.0
Requires PHP: 8.4
Text Domain: skoutz
*/

/*
 * Der weitaus groesste Teil der Gestaltung steht in theme.json. Hier stehen nur
 * Dinge, die sich dort nicht ausdruecken lassen.
 *
 * Pruefbedingung aus ADR-0006: Wird dieses Theme deaktiviert, muessen alle
 * Buchdaten unversehrt bleiben. Deshalb findet sich hier kein
 * register_post_type, keine Abfrage, keine Fachlogik.
 */

/* Schriftlaufweite bei grossen Ueberschriften etwas enger fuehren. */
h1, h2, .wp-block-post-title {
    letter-spacing: -0.015em;
}

/* Buchtitel in Listen: mehrzeilig, aber nicht ausufernd. */
.wp-block-post-title a {
    text-decoration: none;
}

.wp-block-post-title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* Trennlinie unter dem Kopfbereich, ohne Rahmenblock im Template. */
.skoutz-header {
    border-bottom: 1px solid var(--wp--preset--color--rule);
}

.skoutz-footer {
    border-top: 1px solid var(--wp--preset--color--rule);
}


/* Die Buchdatentabelle des Plugins in die Theme-Typografie einpassen. */
.skoutz-book-meta {
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95em;
}

.skoutz-book-meta th,
.skoutz-book-meta td {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--wp--preset--color--rule);
    vertical-align: top;
}

.skoutz-book-meta th {
    width: 9rem;
    font-weight: 600;
    color: var(--wp--preset--color--muted);
}

/* Formularelemente einheitlich — Block-Themes lassen sie sonst roh. */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
select,
textarea {
    padding: 0.45em 0.6em;
    /* Nicht `rule`: Der Rahmen ist das Einzige, was ein leeres Feld als Feld
       ausweist (WCAG 1.4.11). `rule` schafft gegen den Feldgrund nur 1,38:1.
       Abgedunkelt wird hier statt in der Palette — `rule` ist die Haarlinie
       des ganzen Themes und soll zart bleiben. Siehe docs/04-kontraste.md. */
    border: 1px solid var(--wp--preset--color--muted);
    border-radius: 3px;
    background: var(--wp--preset--color--base);
    color: inherit;
    font: inherit;
}

select[multiple] {
    padding: 0.3em;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Einstiegsliste auf der Startseite: Stimmungen statt Kategorien. */
.skoutz-moods {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.skoutz-moods li {
    margin: 0;
}

.skoutz-moods a {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 4px;
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
}

.skoutz-moods a:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

/* Nur fuer Screenreader — die Kurzkurve ist rein visuell. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Suchlayout: Filter am linken Rand, Treffer nehmen den Rest.
   Prozentual wie das Magazin-Raster, damit breite Schirme genutzt werden. */
.skoutz-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
    gap: 0 2.5%;
    align-items: start;
    padding-left: var(--skoutz-gutter);
    padding-right: var(--skoutz-gutter);
}

@media (min-width: 900px) {
    .skoutz-layout__filters {
        position: sticky;
        top: 1.5rem;
    }
}

@media (max-width: 899px) {
    .skoutz-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem 0;
    }
}

/* Buchkacheln in Suche und Genre-Archiv */
.skoutz-grid {
    gap: var(--wp--preset--spacing--30);
}

/* Blaetterfunktion.

   Die Vorgabe von WordPress ist eine Reihe nackter Zahlen mit Auslassungs-
   punkten ("1 2 3 … 14"), die eher nach Fussnote aussieht als nach Bedienung.
   Als Flaechen mit ausreichend Platz sind sie auf dem Telefon ueberhaupt erst
   treffbar — 44 px ist das Mindestmass fuer den Finger. */
.skoutz-pager {
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.skoutz-pager .wp-block-query-pagination-numbers {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

.skoutz-pager a,
.skoutz-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: 0 0.7rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1;
    transition: background var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                color var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                border-color var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-pager a:hover {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

.skoutz-pager .page-numbers.current {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-weight: 600;
}

/* Die Auslassung ist keine Schaltflaeche und darf auch nicht wie eine
   aussehen. */
.skoutz-pager .page-numbers.dots {
    border: 0;
    min-width: 1.2rem;
    opacity: 0.5;
}

.skoutz-pager .wp-block-query-pagination-previous,
.skoutz-pager .wp-block-query-pagination-next {
    font-weight: 600;
}

@media (pointer: coarse) {
    .skoutz-pager a,
    .skoutz-pager .page-numbers {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Die Kachel liegt quer: Cover links, Angaben rechts.
   Hochkant gestapelt ergaben sich auf breiten Schirmen zehn schmale Spalten,
   in denen weder Titel noch Kurve lesbar waren. Quer passen zwei bis vier
   Kacheln nebeneinander, und die Kurve bekommt die Breite, die sie braucht.
   Das Cover ueberspannt alle Zeilen der rechten Spalte.

   Als abgesetzte Karte, nicht als freistehender Block: In der Trefferliste
   stehen viele gleichartige Eintraege dicht beieinander: ohne Flaeche und
   Rahmen verschwimmt, was zu welchem Buch gehoert. Die Genre-Farbe traegt die
   linke Kante — sie ordnet ein, ohne zu schreien. */
.skoutz-card {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    /* Genre, Titel, Autoren, Kurve — die letzte Zeile nimmt den Rest der
       Hoehe auf. Damit stehen die Kurven aller Karten einer Reihe auf
       gleicher Hoehe, statt je nach Titellaenge zu wandern. */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 1.1rem;
    height: 100%;
    box-sizing: border-box;
    /* Keine Polsterung an der Karte: Das Cover soll links buendig ueber die
       volle Hoehe stehen, wie im Bestand. Die Polsterung tragen deshalb die
       Elemente der rechten Spalte selbst. */
    padding: 0;
    overflow: hidden;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--rule);
    border-left: 4px solid var(--skoutz-genre, var(--wp--preset--color--rule));
    border-radius: 12px;
    transition: transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                box-shadow var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(31, 27, 24, 0.12);
}

/* Die Genre-Farbe traegt die ganze Karte, nicht nur die Kante.

   Mit Farbe allein an der Kante sahen die Karten einander zu aehnlich — bei
   einer Trefferliste, in der die Mehrheit der Buecher kein Cover hat, ist die
   Farbe das einzige Unterscheidungsmerkmal, das jedes Buch mitbringt. Sie
   faerbt deshalb auch die Kurve und den Platzhalter. */
.skoutz-card {
    --skoutz-fever-ink: var(--skoutz-genre, var(--wp--preset--color--primary));
}

/* Der Platzhalter sieht aus wie ein Buch, nicht wie ein fehlendes Bild.

   Er ist im Bestand die haeufigste Ansicht: rund 900 von 265.748 Buechern
   haben ein Cover, das noch existiert. Etwas, das man so oft sieht, darf nicht
   als Stoerung gestaltet sein. Deshalb Buchruecken links, Titel im Satzspiegel
   und die Genre-Farbe als Einband — eine Reihe solcher Platzhalter liest sich
   wie ein Regal und nicht wie eine Fehlerliste. */
.skoutz-book-cover--empty {
    background: color-mix(in srgb, var(--skoutz-genre, var(--wp--preset--color--rule)) 16%, var(--wp--preset--color--surface));
    border: 1px solid color-mix(in srgb, var(--skoutz-genre, var(--wp--preset--color--rule)) 40%, transparent);
}

.skoutz-book-cover__empty {
    position: relative;
    display: flex !important;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 0.9rem 0.7rem 0.7rem 1.1rem;
    box-sizing: border-box;
    text-decoration: none;
}

.skoutz-book-cover__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: color-mix(in srgb, var(--skoutz-genre, var(--wp--preset--color--rule)) 55%, transparent);
}

.skoutz-book-cover__title {
    font-family: var(--wp--preset--font-family--serif);
    font-size: 0.85rem;
    line-height: 1.25;
    color: color-mix(in srgb, var(--skoutz-genre, var(--wp--preset--color--contrast)) 75%, var(--wp--preset--color--contrast));
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Das Genre steht als kleine Zeile ueber dem Titel, nicht als Schild darunter.

   Als Schild fuellte "Contemporary (Zeitgenössische Romane)" ein Drittel der
   Karte und schob die Kurve nach unten. Als Zeile in der Genre-Farbe ordnet es
   ein, bevor der Titel gelesen wird — und die Karten unterscheiden sich schon
   in der obersten Zeile voneinander. */
.skoutz-card__genre {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skoutz-card__genre a {
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--skoutz-genre, var(--wp--preset--color--muted));
    text-decoration: none;
}

.skoutz-card__genre a:hover {
    text-decoration: underline;
}

/* Die Kurve traegt die Karte: Sie bekommt den Rest der Hoehe und rueckt nach
   unten weg von den Angaben. In einer Liste, in der die Mehrheit der Buecher
   kein Cover hat, ist sie das, was man tatsaechlich vergleicht. */
/* Fest in die letzte Zeile, nicht per automatischer Platzierung: Fehlt einem
   Buch das Genre oder die Autorenangabe — beides kommt im Bestand vor —,
   ruecken die uebrigen Angaben eine Zeile hoch, und die Kurve stuende bei
   jeder Karte woanders. */
.skoutz-card .skoutz-book-curve {
    grid-row: 4;
    align-self: end;
    padding-top: 0.7rem;
}

.skoutz-card .skoutz-mini {
    margin: 0;
}

/* Der Titel traegt die Karte — er darf groesser sein als die Angaben darunter,
   und er bekommt die Genre-Farbe schon ohne Ueberfahren. */
.skoutz-card .wp-block-post-title {
    font-size: 1.12rem;
    line-height: 1.25;
}

.skoutz-card .skoutz-book-authors {
    margin-top: 0.15rem;
    font-size: 0.82rem;
}

.skoutz-card > .skoutz-book-cover {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    height: 100%;
    border-radius: 0;
}

.skoutz-card > *:not(.skoutz-book-cover) {
    grid-column: 2;
    padding-right: 1.1rem;
}

.skoutz-card > .wp-block-post-title {
    padding-top: 1rem;
}

.skoutz-card > .skoutz-book-curve {
    padding-bottom: 1rem;
}

/* Unter 30rem ist fuer zwei Spalten kein Platz — dann wieder gestapelt,
   aber mit begrenzter Coverbreite, damit es die Kachel nicht auffuellt. */
@media (max-width: 30rem) {
    .skoutz-card { grid-template-columns: minmax(0, 1fr); }
    .skoutz-card > .skoutz-book-cover { grid-row: auto; width: 6.5rem; }
    .skoutz-card > *:not(.skoutz-book-cover) { grid-column: 1; }
}

.skoutz-card .skoutz-book-cover {
    position: relative;
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
    background: var(--wp--preset--color--surface);
}

/* Dasselbe Verfahren wie bei den Beitragsbildern: unscharfer Grund aus dem
   Cover selbst, damit unterschiedliche Coverformate eine ruhige Reihe ergeben. */
.skoutz-card .skoutz-book-cover:not(.skoutz-book-cover--empty)::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background-image: var(--skoutz-img);
    background-size: cover;
    background-position: center;
    filter: blur(24px) saturate(1.4);
    transform: scale(1.15);
}

.skoutz-card .skoutz-book-cover:not(.skoutz-book-cover--empty)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.skoutz-card .skoutz-book-cover img {
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 2px 10px rgba(31, 27, 24, 0.32));
}

/* Die Kurve bekommt in der Kachel etwas Luft. */
.skoutz-card .skoutz-book-curve {
    margin-top: 0.5rem;
}

/* Platzhalter, wenn kein Cover vorliegt — im Bestand die Regel.
   Er fuellt den Rahmen vollstaendig, statt als schmaler Kasten darin zu
   stehen: Eine Reihe unterschiedlich breiter Kaesten wirkt zerfahren. */
.skoutz-book-cover--empty {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--skoutz-genre, var(--wp--preset--color--rule));
}

.skoutz-book-cover--empty a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.skoutz-book-cover--empty span {
    font-family: var(--wp--preset--font-family--serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--skoutz-genre, var(--wp--preset--color--rule));
    opacity: 0.35;
}

.skoutz-card .wp-block-post-title {
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.skoutz-book-authors {
    margin: 0 0 0.3rem;
    font-size: 0.85em;
    opacity: 0.75;
}

.skoutz-book-curve__votes {
    margin: 0.2rem 0 0;
    font-size: 0.78em;
    opacity: 0.6;
}

.skoutz-book-curve--none {
    margin: 0.6rem 0 0;
    font-size: 0.78em;
    opacity: 0.45;
    font-style: italic;
}

.skoutz-card .wp-block-post-excerpt {
    margin-top: auto;
}

/* Buchseite: Cover, Text und Buchfieberkurve nebeneinander.

   Die Kurve steht rechts und bleibt beim Blättern stehen. Sie ist der Grund,
   aus dem die Seite aufgerufen wird — sie darf nicht erst nach Klappentext und
   Datentabelle auftauchen. Auf schmalen Schirmen faltet das Raster zu einer
   Spalte; die Kurve rutscht dann direkt hinter den Klappentext, nicht ans
   Seitenende. */
.skoutz-book {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 27rem);
    gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
    align-items: start;
    margin: 1.5rem 0 2rem;
}

.skoutz-book__byline {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
}

.skoutz-book__byline a {
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Dasselbe Verfahren wie bei Kachel und Beitragsbild: unscharfer Grund aus dem
   Cover selbst. Buchcover haben jedes Format; ohne den Grund steht ein
   schmales Hochformat verloren in einem breiten Kasten. */
.skoutz-book__coverbox {
    position: relative;
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border-radius: 10px;
    background: var(--wp--preset--color--surface);
}

.skoutz-book__coverbox::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background-image: var(--skoutz-img);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(1.4);
    transform: scale(1.15);
}

.skoutz-book__coverbox img {
    width: 100%;
    height: 100%;
    padding: 6%;
    box-sizing: border-box;
    object-fit: contain;
    filter: drop-shadow(0 3px 14px rgba(31, 27, 24, 0.34));
}

.skoutz-book__coverbox--empty {
    border: 1px solid var(--skoutz-genre, var(--wp--preset--color--rule));
}

.skoutz-book__coverbox--empty::before {
    display: none;
}

.skoutz-book__coverbox--empty span {
    font-family: var(--wp--preset--font-family--serif);
    font-size: 4rem;
    line-height: 1;
    color: var(--skoutz-genre, var(--wp--preset--color--rule));
    opacity: 0.35;
}

.skoutz-book__curve {
    position: sticky;
    top: 5.5rem;
    padding: 1.2rem 1.4rem 1.4rem;
    border-radius: 12px;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--rule);
}

.skoutz-book__curve > h2:first-child {
    margin-top: 0;
}

.skoutz-book__curve .skoutz-fever {
    max-width: none;
}

/* Umbrueche nach der SPALTENBREITE, nicht nach der Fensterbreite.

   Die Buchseite steht in der Mittelspalte des Magazin-Rasters und ist damit
   deutlich schmaler als das Fenster. Mit `@media` bekaeme sie auf einem
   1900-px-Schirm drei Spalten zugewiesen, obwohl ihr davon nur gut die
   Haelfte zur Verfuegung steht — und die Kurve wuerde gequetscht.
   `@container` fragt, was wirklich da ist. */
.skoutz-magazin__main {
    container-type: inline-size;
}

@container (max-width: 62rem) {
    .skoutz-book {
        grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    }

    /* Die Kurve wandert ueber den Text, nicht ans Ende. Ans Seitenende
       geschoben waere sie auf dem Telefon erst nach Klappentext,
       Datentabelle und Bewertungsformular erreichbar — genau dort, wo sie im
       alten Angebot schon niemand gefunden hat. */
    .skoutz-book__cover  { order: -2; }
    .skoutz-book__curve  { order: -1; grid-column: 1 / -1; position: static; }
    .skoutz-book__main   { order: 0; }
}

@container (max-width: 34rem) {
    .skoutz-book {
        grid-template-columns: minmax(0, 1fr);
    }

    .skoutz-book__cover {
        max-width: 11rem;
    }
}

/* Das Suchformular steht ueber den Treffern, nicht daneben.

   In einer Seitenspalte war es eine lange, schmale Liste, durch die man
   scrollen musste, waehrend die Treffer daneben schon standen. Quer ueber die
   Breite sieht man alle Bedingungen auf einmal — und die Treffer beginnen
   direkt darunter, statt neben dem Formular zu kleben.

   Das Raster ordnet sich nach vorhandener Breite selbst um; die Fieberkurve
   bekommt zwei Spalten, weil sie die meisten Zeilen hat. */
/* Das Formular ist so breit wie sein Inhalt, nicht so breit wie die Seite.

   Zweispaltig lief die Fieberkurve ueber beide Spalten (sie hat die meisten
   Zeilen), die Genres landeten in der naechsten Reihe — und rechts blieb die
   halbe Flaeche leer. Untereinander in begrenzter Breite steht alles dort, wo
   der Blick es sucht: Suchfeld, Kurve, Genres, Verfeinern, Schaltflaeche. */
.skoutz-search {
    display: block;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--rule);
    box-shadow: 0 2px 14px rgba(31, 27, 24, 0.05);
    padding: 1.6rem 1.8rem;
    margin-bottom: 2rem;
}

.skoutz-search fieldset + fieldset {
    margin-top: 0;
}

/* Die Abschnitte bekommen eine gemeinsame Ueberschriftenform, damit das
   Formular als ein Ding gelesen wird und nicht als vier lose Kaesten. */
.skoutz-search legend,
.skoutz-search__row > label:first-child {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

/* Die Erlaeuterung unter der Ueberschrift bleibt Fliesstext — sie erklaert,
   und Erklaerungen in Versalien liest niemand. */
.skoutz-search__hint {
    margin: -0.2rem 0 0.9rem;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--wp--preset--color--muted);
    text-transform: none;
    letter-spacing: 0;
}

.skoutz-search__check {
    display: block;
    padding: 0.15rem 0;
    font-size: 0.92rem;
}

.skoutz-search input[type="search"],
.skoutz-search select {
    width: 100%;
    box-sizing: border-box;
}

/* Abstand zwischen den Abschnitten, statt Spalten. */
.skoutz-search > * + * {
    margin-top: 1.5rem;
}

/* Genres als farbige Schalter, nicht als Mehrfachauswahlliste. Eine
   Auswahlliste mit Strg-Klick versteht ausserhalb von Buerosoftware niemand,
   und auf dem Telefon ist sie unbedienbar. */
.skoutz-genres__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.skoutz-genres__item {
    position: relative;
    display: inline-flex;
}

.skoutz-genres__item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

/* Die Oberkategorien sind runde Symbolschalter wie im Bestand — ohne Text.

   Zehn Symbole mit Beschriftung darunter waeren wieder eine Wand; das Symbol
   allein ist der Punkt der Uebung. Der Name steckt im `title` und im
   Bildschirmleser-Text, damit der Schalter nicht namenlos bleibt. */
.skoutz-genres__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.3rem;
    height: 3.3rem;
    /* Ersatzwert `muted`, nicht `rule`: Ohne Genre-Farbe ist der Umriss das
       Einzige, was den Schalter als Schalter zeigt — mit `rule` waeren das
       1,38:1 gegen den Grund. */
    border: 2px solid var(--skoutz-genre, var(--wp--preset--color--muted));
    border-radius: 50%;
    color: var(--skoutz-genre, var(--wp--preset--color--contrast));
    cursor: pointer;
    transition: background var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                color var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-genres__item:hover span {
    transform: translateY(-2px);
}

/* Die Zeichnungen werden als Bild gezeigt, nicht als Maske.

   Zwei Gruende, beide beim Ausprobieren aufgefallen:

   1. Nicht alle sind einfarbig. `humor.svg` hat drei Farbgruppen, `history`
      und `adventure` je zwei. Eine Maske macht daraus eine einzige Flaeche —
      helle Innenzeichnung und dunkle Kontur fallen zusammen, und das Ergebnis
      ist ein Fleck statt einer Zeichnung.
   2. Die Zeichnungen sitzen mit reichlich Rand in ihrer Flaeche: Bei
      `adventure.svg` liegt das Motiv etwa zwischen 58 und 176 von 237
      Einheiten. Bei `contain` bleibt davon sichtbar nur die Haelfte uebrig —
      deshalb wirkten die Symbole in den Kreisen so klein.

   Also: Originalbild, und die Flaeche so gross, dass das Motiv trotz seines
   Randes traegt. Die Genre-Farbe traegt der Kreis. */
.skoutz-genres__item--icon span::before {
    content: "";
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    background-image: var(--skoutz-genre-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Eine Reihe, kein zweiter Umbruch: Elf Schalter mit 3,3rem und 0,4rem
   Abstand ergeben 40,3rem und passen damit in die 44rem des Formulars. Wer
   die Kreise vergroessert, muss die Formularbreite mitziehen. */
.skoutz-genres__list {
    gap: 0.4rem;
    flex-wrap: nowrap;
    justify-content: space-between;
}

@media (max-width: 44rem) {
    .skoutz-genres__list {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.skoutz-subgenres__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.1rem 1.2rem;
}

.skoutz-genres__item input:checked + span {
    background: var(--skoutz-genre, var(--wp--preset--color--primary));
    color: var(--wp--preset--color--base);
}

.skoutz-genres__item input:focus-visible + span {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Die Feinheiten stehen zusammengeklappt darunter. */
.skoutz-search__more > summary {
    cursor: pointer;
    padding: 0.6rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wp--preset--color--primary);
    border-top: 1px solid var(--wp--preset--color--rule);
    list-style: none;
}

.skoutz-search__more > summary::-webkit-details-marker {
    display: none;
}

.skoutz-search__more > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-search__more[open] > summary::before {
    content: "▾ ";
}

.skoutz-search__more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.2rem 2rem;
    align-items: start;
    padding: 0.6rem 0 0.4rem;
}

@media (max-width: 62rem) {
}

@media (pointer: coarse) {
    .skoutz-genres__item span {
        min-height: 44px;
    }
}

.skoutz-search__axis {
    grid-template-columns: 7.5rem 1fr;
    max-width: none;
}

.skoutz-search__row input[type="search"],
.skoutz-search__row select {
    max-width: none;
}

/* Die Kurve zum Anklicken.

   Bewusst dasselbe Raster wie die Anzeige der Kurve: Wer eine Kurve gesehen
   hat, erkennt sofort, dass er hier dieselbe Sache einstellt. Zwei
   unterschiedliche Darstellungen fuer dieselbe Groesse waeren die Gelegenheit,
   an der man das Angebot nicht mehr versteht.

   Die Radio-Felder selbst sind unsichtbar, aber vorhanden — der Fokusrahmen
   liegt auf der Zelle, damit die Tastaturbedienung sichtbar bleibt. */
.skoutz-fcplot {
    position: relative;
    margin-bottom: 0.8rem;

    /* Der Container schmiegt sich an das Raster.
    
       Ohne das ist er so breit wie die Spalte, in der er steht — auf der
       Suchseite deutlich breiter als die 38,6rem des Rasters. Der rechte
       Abstand der Verbindungslinie misst dann von einer Kante weit rechts der
       Bahn, und die Nulllinie rutscht nach rechts. Genau das ist passiert,
       nachdem ich die feste Breite durch beide Kanten ersetzt hatte: Im
       schmalen Widget war es richtig, auf der breiten Seite falsch.
    
       `max-width: 100%` haelt ihn in schmalen Spalten trotzdem im Rahmen. */
    width: fit-content;
    max-width: 100%;
}

/* Die Linie deckt genau die Bahnspalte — eingerueckt um Beschriftung plus
   Abstand, rechts zusaetzlich um die Spalte mit "egal". Dieselbe Rechnung wie
   in der Anzeige; wer eine der Zahlen aendert und die andere vergisst, bekommt
   eine Linie neben den Punkten. */
.skoutz-fcplot__line {
    position: absolute;
    top: 0;
    bottom: 0;
    /* An BEIDE Kanten gebunden, nicht auf eine feste Breite gesetzt.
    
       Vorher stand hier `width: 22rem` — dieselbe Zahl wie die Obergrenze der
       Bahnspalte. Die Spalte darf aber schrumpfen (`minmax(0, 22rem)`), der
       Container nicht: In einer schmalen Spalte war er breiter als die Bahn,
       und die Senkrechte fuer „nichts gewaehlt" landete rechts der Mitte.
    
       Rechter Abstand = Beschriftung 6,5rem + Schalter 3,6rem + zwei Luecken. */
    left: calc(6.5rem + 0.5rem);
    right: calc(6.5rem + 3.6rem + 1rem);
    pointer-events: none;
    z-index: 1;
}

.skoutz-fcplot__line svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.skoutz-fcplot__line path {
    fill: none;
    stroke: var(--wp--preset--color--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Solange nichts gesetzt ist, laeuft die Linie senkrecht durch die Mitte und
   ist zurueckgenommen: Die Kurve ist von Anfang an als Kurve zu sehen, ohne zu
   behaupten, es sei schon etwas ausgewaehlt. */
.skoutz-fcplot__line--unset path {
    stroke: var(--wp--preset--color--rule);
}

/* Zeilen fester Hoehe ohne Abstand — nur so liegt die Mitte jeder Zeile bei
   (i + 0,5) / n, und genau damit rechnet die Linie. */
/* Die Bahn bekommt eine Hoechstbreite. Ueber die volle Formularbreite gezogen
   werden die einzelnen Felder handbreit, und sieben Stufen sind dann nicht
   mehr als Skala zu erkennen — sie sahen aus wie fuenf lange Balken. */
.skoutz-fcpick {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 22rem) 6.5rem 3.6rem;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    height: 2.1rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.skoutz-fcpick__track {
    position: relative;
}

/* Der Punkt haengt am angeklickten Feld, nicht an einer vom Server
   berechneten Position. Nur so springt er sofort mit — serverseitig gesetzt
   blieb er bis zum Absenden in der Mitte stehen, waehrend das Feld daneben
   schon farbig war. */
.skoutz-fcpick__cell > span[aria-hidden] {
    position: relative;
}

.skoutz-fcpick__cell input:checked + span[aria-hidden]::after,
.skoutz-fcpick:has(.skoutz-fcpick__any input:checked) .skoutz-fcpick__cell:nth-child(4) > span[aria-hidden]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary);
    box-shadow: 0 1px 4px rgba(31, 27, 24, 0.25);
    pointer-events: none;
    z-index: 2;
}

/* Ohne Angabe: der Punkt sitzt mittig und ist zurueckgenommen. Er zeigt, dass
   es die Achse gibt, ohne eine Auswahl zu behaupten. */
.skoutz-fcpick:has(.skoutz-fcpick__any input:checked) .skoutz-fcpick__cell:nth-child(4) > span[aria-hidden]::after {
    background: var(--wp--preset--color--rule);
    box-shadow: none;
}

.skoutz-fcpick__pole {
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: right;
}

.skoutz-fcpick__pole--right {
    text-align: left;
}

.skoutz-fcpick__track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.skoutz-fcpick__cell {
    position: relative;
    display: block;
    cursor: pointer;
}

.skoutz-fcpick__cell input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.skoutz-fcpick__cell > span[aria-hidden] {
    display: block;
    height: 15px;
    border-radius: 999px;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--rule);
    transition: background var(--skoutz-fast, 160ms) var(--skoutz-ease, ease),
                border-color var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-fcpick__cell:hover > span[aria-hidden] {
    border-color: var(--wp--preset--color--primary);
}

/* Das angeklickte Feld faerbt sich NICHT aus.

   Die Fuellung sah bei schmalen Feldern nach Punkt aus, bei breiten nach
   Balken — und die Felder werden mit der Fensterbreite beliebig breit. Die
   Markierung ist der runde Punkt darauf; das Feld bleibt Feld. */
.skoutz-fcpick__cell input:checked + span[aria-hidden] {
    border-color: var(--wp--preset--color--primary);
}

.skoutz-fcpick__cell input:focus-visible + span[aria-hidden] {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

.skoutz-fcpick__any {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* Mit JavaScript nimmt ein zweiter Klick auf dasselbe Feld die Auswahl
   zurueck — dann braucht es den Schalter "egal" daneben nicht mehr. Ohne
   JavaScript bleibt er stehen, sonst gaebe es keinen Weg zurueck. Die Klasse
   setzt das Skript selbst; im Markup steht sie nicht. */
.skoutz-fcplot--toggle .skoutz-fcpick__any {
    display: none;
}

.skoutz-fcplot--toggle .skoutz-fcplot__line {
    /* Diese Fassung hat keinen Schalter — der rechte Abstand ist entsprechend
       kleiner. */
    right: calc(6.5rem + 0.5rem);
}

.skoutz-fcplot--toggle .skoutz-fcpick {
    grid-template-columns: 6.5rem minmax(0, 22rem) 6.5rem;
}

/* Schmal: Pole ueber und unter die Bahn, "egal" darunter. Drei Spalten mit
   je 6,5rem Beschriftung liessen fuer die Bahn nichts uebrig.

   Hier faellt auch die feste Zeilenhoehe weg — und mit ihr die Grundlage der
   Linienberechnung. Sie wird deshalb ausgeblendet, statt daneben zu laufen. */
@media (max-width: 34rem) {
    .skoutz-fcplot__line {
        display: none;
    }

    .skoutz-fcpick {
        grid-template-columns: 1fr auto;
        grid-template-areas: "links rechts" "bahn bahn" "egal egal";
        row-gap: 0.2rem;
        height: auto;
    }

    .skoutz-fcpick__pole        { grid-area: links; text-align: left; }
    .skoutz-fcpick__pole--right { grid-area: rechts; text-align: right; }
    .skoutz-fcpick__track       { grid-area: bahn; }
    .skoutz-fcpick__any         { grid-area: egal; margin-bottom: 0.4rem; }
}

@media (pointer: coarse) {
    .skoutz-fcpick__cell > span[aria-hidden] {
        height: 26px;
    }
}

/* Die Aktionszeile schliesst das Formular ab: Suchfeld, Schaltflaeche,
   Zuruecksetzen und der Zugang zu den Feinheiten. */
.skoutz-search__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.2rem;
    margin: 0;
    border-top: 1px solid var(--wp--preset--color--rule);
    padding-top: 1.2rem;
}

.skoutz-search__actions input[type="search"] {
    flex: 1 1 14rem;
    width: auto;
}

/* Geschlossen steht "Suche verfeinern" am rechten Ende der Zeile. Offen
   nimmt der Bereich eine eigene Zeile — sonst wuerde die Aktionszeile beim
   Aufklappen auseinanderfallen. */
.skoutz-search__more {
    margin-left: auto;
}

.skoutz-search__more[open] {
    flex: 1 1 100%;
    margin-left: 0;
}

.skoutz-search__more > summary {
    border-top: 0;
    padding: 0;
    white-space: nowrap;
}

/* Ab hier passt nichts mehr nebeneinander: eine Spalte, alles untereinander. */
.skoutz-search__result {
    font-size: 1.05em;
}

/* ---------------------------------------------------------------------------
   Farbwelt: jedes Genre bekommt einen eigenen Ton.
   Die Farbe liefert das Plugin als --skoutz-genre auf der Kachel; welche Farbe
   das ist, entscheidet functions.php.
   --------------------------------------------------------------------------- */

:root {
    /* Seitenrand des Magazin-Rasters. Knapp, damit die Seitenleiste am Rand
       steht — auf grossen Schirmen etwas mehr, damit es nicht klebt. */
    --skoutz-gutter: clamp(1rem, 2.5vw, 3rem);
    /* Breite des mittigen Rahmens (Kopfbereich, Hero, Fussbereich). */
    --skoutz-center: 78rem;
    --skoutz-axis-simplicity: var(--wp--preset--color--genre-sach);
    --skoutz-axis-sadness: var(--wp--preset--color--genre-krimi);
    --skoutz-axis-adult: var(--wp--preset--color--genre-fantasy);
    --skoutz-axis-nonviolence: var(--wp--preset--color--genre-kinder);
    --skoutz-axis-erotic: var(--wp--preset--color--genre-romance);
    --skoutz-radius: 12px;

    /* Schrift auf farbigem Grund und die Flaeche der Markenleiste — beide
       kehren sich in der dunklen Fassung um und stehen deshalb hier statt
       fest im Regelsatz. */
    --skoutz-auf-primary: #FBF9F5;
    --skoutz-brandbar-grund: #FFFFFF;
    --skoutz-brandbar-marke: none;
}

/* Nur noch die Genre-Farbe und die Ecken — Polsterung, Flaeche und Rahmen
   stehen weiter oben beim Aufbau der Kachel. Diese Regel hat die Polsterung
   dort ueberschrieben, weshalb Cover und Titel am Rand der Karte klebten. */
.skoutz-card {
    position: relative;
    border-left: 4px solid var(--skoutz-genre, var(--wp--preset--color--rule));
    border-radius: 0 var(--skoutz-radius) var(--skoutz-radius) 0;
}

.skoutz-card .wp-block-post-title a {
    color: var(--skoutz-genre, var(--wp--preset--color--contrast));
}

.skoutz-card .skoutz-book-cover img,
.skoutz-book-cover--empty a {
    border-radius: 6px;
}

.skoutz-book-cover--empty a {
    border-color: var(--skoutz-genre, var(--wp--preset--color--rule));
    color: var(--skoutz-genre, var(--wp--preset--color--rule));
}

.skoutz-book-cover--empty span {
    color: inherit;
    opacity: 0.4;
}

/* Genre-Angaben als farbige Marken statt als Fließtext. */
.skoutz-card .wp-block-post-terms a,
.taxonomy-skoutz_genre .wp-block-post-terms a {
    display: inline-block;
    padding: 0.15em 0.7em;
    margin: 0 0.25em 0.25em 0;
    border-radius: 999px;
    /* Ersatzwert `muted`, nicht `surface`: Auf der hellen Flaeche stand die
       helle Schrift mit 1,10:1 — ein Genre ohne eigene Farbe war schlicht
       unlesbar. Grau ist die ehrliche Ersatzfarbe. */
    background: var(--skoutz-genre, var(--wp--preset--color--muted));
    color: var(--wp--preset--color--base);
    text-decoration: none;
    font-size: 0.82em;
}

/* Rundere Formen durchgängig. */
.skoutz-search,
.skoutz-shelf-pending,
.skoutz-shelf__notice,
.skoutz-moods a,
.card {
    border-radius: var(--skoutz-radius);
}

.skoutz-moods a {
    border-width: 2px;
}

.skoutz-moods li:nth-child(1) a { border-color: var(--wp--preset--color--genre-sach); }
.skoutz-moods li:nth-child(2) a { border-color: var(--wp--preset--color--genre-krimi); }
.skoutz-moods li:nth-child(3) a { border-color: var(--wp--preset--color--genre-kinder); }
.skoutz-moods li:nth-child(4) a { border-color: var(--wp--preset--color--genre-romance); }

.skoutz-moods li:nth-child(1) a:hover { background: var(--wp--preset--color--genre-sach); color: var(--wp--preset--color--base); }
.skoutz-moods li:nth-child(2) a:hover { background: var(--wp--preset--color--genre-krimi); color: var(--wp--preset--color--base); }
.skoutz-moods li:nth-child(3) a:hover { background: var(--wp--preset--color--genre-kinder); color: var(--wp--preset--color--base); }
.skoutz-moods li:nth-child(4) a:hover { background: var(--wp--preset--color--genre-romance); color: var(--wp--preset--color--base); }

/* Die Fieberkurve ist das Erkennungszeichen — sie darf Platz und Farbe haben. */
.skoutz-fever { max-width: 38rem; }

/* ---------------------------------------------------------------------------
   Mobilansicht
   Das Telefon ist kein Sonderfall, sondern der Regelfall. Was hier steht, ist
   deshalb keine Nachbesserung, sondern Teil der Gestaltung.
   --------------------------------------------------------------------------- */

@media (max-width: 899px) {
    /* Die Filterspalte laeuft nicht mit, sondern steht oben — mitlaufende
       Elemente fressen auf kleinen Schirmen die halbe Sicht. */
    .skoutz-layout__filters {
        position: static;
    }
}

@media (max-width: 600px) {
    /* Beschriftung ueber das Feld statt daneben. Bei 7,5rem Beschriftung
       blieben fuer die Auswahl sonst wenige Zentimeter. */
    .skoutz-search__axis {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .skoutz-search {
        padding: 1rem;
    }

    /* Buchdaten: Bezeichnung ueber dem Wert statt in einer schmalen Spalte. */
    .skoutz-book-meta,
    .skoutz-book-meta tbody,
    .skoutz-book-meta tr,
    .skoutz-book-meta th,
    .skoutz-book-meta td {
        display: block;
        width: auto;
    }

    .skoutz-book-meta tr {
        padding-bottom: 0.6rem;
        margin-bottom: 0.6rem;
        border-bottom: 1px solid var(--wp--preset--color--rule);
    }

    .skoutz-book-meta th,
    .skoutz-book-meta td {
        border: 0;
        padding: 0;
    }

    .skoutz-book-meta th {
        font-size: 0.85em;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Regal- und Bewertungsformular: Schaltflaechen ueber die volle Breite,
       damit sie sicher zu treffen sind. */
    .skoutz-shelf__buttons {
        flex-direction: column;
    }

    .skoutz-shelf__button {
        width: 100%;
        padding: 0.7em 1em;
    }

    .skoutz-vote td:first-child {
        white-space: normal;
    }

    /* Regalliste: Cover kleiner, Text bekommt Platz. */
    .skoutz-shelf-list__cover img {
        max-height: 72px;
    }
}

/* Touch-Ziele: mindestens 44 px hoch, sonst sind sie kaum zu treffen. */
@media (pointer: coarse) {
    .skoutz-search select,
    .skoutz-search input[type="search"],
    .skoutz-shelf__button,
    .skoutz-vote select,
    .wp-element-button {
        min-height: 44px;
    }

    .skoutz-search__check,
    .skoutz-search__unrated label {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

/* Die Raster rechnen ihre Polsterung in die Breite ein — sonst laufen sie
   ueber den rechten Rand hinaus, weil `alignfull` bereits die volle Breite
   belegt. */
.skoutz-magazin,
.skoutz-magazin > *,
.skoutz-layout,
.skoutz-layout > * {
    min-width: 0;
    box-sizing: border-box;
}

body {
    overflow-x: clip;
}

/* Nichts darf waagerecht aus dem Bild laufen. */
img,
table,
pre {
    max-width: 100%;
}

.skoutz-search select[multiple] {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Startseite als Magazin: Beiträge links, Widgets rechts
   --------------------------------------------------------------------------- */

.skoutz-hero {
    background: var(--wp--preset--color--surface);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}

.skoutz-hero__title {
    margin-bottom: 0.3rem;
}

.skoutz-hero__lead {
    max-width: 40em;
    color: var(--wp--preset--color--muted);
    margin-bottom: 1.2rem;
}

/* Abschnittsüberschrift mit farbiger Marke. */
.skoutz-section,
.skoutz-widget__head {
    position: relative;
    padding-left: 0.8rem;
    margin-bottom: 1.2rem;
}

.skoutz-section::before,
.skoutz-widget__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 2px;
    background: var(--wp--preset--color--primary);
}

/* Dreispaltiges Raster ueber die volle Breite.
   
   Bewusst prozentual statt mit fester Maximalbreite: Auf breiten Schirmen soll
   die Flaeche genutzt werden, nicht als Weissraum verschenkt. Die linke Spalte
   ist vorerst leer und fuer ein spaeteres Widget reserviert.
   
   Die Randbreite ist knapp gehalten — die Seitenleiste soll erkennbar am Rand
   stehen, nicht in der Mitte schweben. */
/* Beide Randspalten gleich breit.

   Vorher 15 % links und 22 % rechts. Die Mittelspalte sass dadurch 3,5 % links
   vom Seitenmittelpunkt — auf einem breiten Schirm rund 70 Bildpunkte. Das
   faellt nicht als Fehler auf, sondern als Unruhe: Man sieht nicht, dass etwas
   verschoben ist, man merkt nur, dass es nicht stimmt. Besonders deutlich auf
   Seiten mit wenig Inhalt, wo nichts von der Verschiebung ablenkt.

   Die Gesamtbreite bleibt nahezu gleich (15+22=37, jetzt 2x19=38). */
.skoutz-magazin {
    box-sizing: border-box;
    display: grid;
    /* 15 / 70 / 15, wie vom Projektinhaber vorgegeben — die Abstaende zaehlen
       dabei mit, sonst kaeme die Mitte auf weniger als siebzig Prozent. */
    grid-template-columns:
        minmax(0, 15%)
        minmax(0, 1fr)
        minmax(0, 15%);
    gap: 0 2.5%;
    align-items: start;
    padding-left: var(--skoutz-gutter);
    padding-right: var(--skoutz-gutter);
}

.skoutz-magazin__aside-left {
    /* Noch leer. Steht hier, damit das Raster schon die richtige Aufteilung
       hat und ein spaeteres Widget nur eingesetzt werden muss. */
    min-height: 1px;
}

/* Zwei Ebenen, bewusst unterschiedlich:
   
   `.skoutz-bleed`  — nutzt die volle Breite mit schmalem Rand. Fuer Inhalt,
                      der Flaeche braucht: das Magazin-Raster, die Buchsuche.
   `.skoutz-center` — bleibt mittig und begrenzt. Fuer den Rahmen der Seite:
                      Kopfbereich, Hero, Fussbereich.
   
   Der Rahmen mittig, der Inhalt breit — sonst kleben Logo und Menue auf grossen
   Schirmen in den Ecken, waehrend die Trefferliste die Flaeche braucht. */
.skoutz-bleed {
    padding-left: var(--skoutz-gutter);
    padding-right: var(--skoutz-gutter);
}

.skoutz-center {
    max-width: var(--skoutz-center);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--skoutz-gutter);
    padding-right: var(--skoutz-gutter);
}

/* Beitragsliste: der erste Beitrag gross, die uebrigen als Zeilen. So bekommt
   die Seite eine Rangfolge, statt alles gleich zu gewichten.
   
   Achtung bei den Selektoren: core/post-template erzeugt <ul><li>-Huellen. Ein
   `.skoutz-article:first-child` waere deshalb IMMER wahr — die Kachel ist stets
   das erste Kind ihres eigenen <li>. Der Bezug muss ueber die Liste laufen. */
.skoutz-articles {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.skoutz-articles > li {
    margin: 0;
}

/* Aus der Zeile wird eine Karte.

   Die Beitraege der Startseite standen als Zeilen untereinander, Bild links,
   Text rechts, getrennt durch eine Linie. Als Karte im selben Raster wie das
   Archiv wirken sie einheitlich — und das Bild bekommt das Gewicht zurueck,
   das ihm bei einem Buchmagazin zusteht. */
.skoutz-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: var(--skoutz-radius);
    background: var(--wp--preset--color--surface);
    position: relative;
    transition:
        transform var(--skoutz-fast) var(--skoutz-ease),
        box-shadow var(--skoutz-fast) var(--skoutz-ease),
        border-color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-article:hover,
.skoutz-article:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--rule));
    box-shadow: var(--skoutz-shadow-lift);
}

@media (prefers-reduced-motion: reduce) {
    .skoutz-article { transition: border-color var(--skoutz-fast) linear; }
    .skoutz-article:hover,
    .skoutz-article:focus-within { transform: none; }
}

.skoutz-article__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.35rem;
    flex: 1;
}

/* Die ganze Karte anklickbar — wie im Archiv. */
.skoutz-article .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.skoutz-article__cat { position: relative; z-index: 1; }

.skoutz-articles > li { list-style: none; }

.skoutz-articles > li:last-child .skoutz-article {
    border-bottom: 1px solid var(--wp--preset--color--rule);
    padding-bottom: 0;
}

/* Bilder werden nie beschnitten — und der Rahmen sieht trotzdem gefuellt aus.
   
   Das Problem: Beitragsbilder und Buchcover kommen in allen Formaten. Wer sie
   mit `cover` einpasst, schneidet ab — bei Buchcovern regelmaessig den Titel.
   Wer sie mit `contain` einpasst, bekommt ein kleines Bild in einer leeren
   Flaeche, das deplatziert wirkt.
   
   Der Ausweg: dieselbe Bildquelle zweimal. Unten formatfuellend, stark
   unschaerfer und leicht kraeftiger als Hintergrund; darueber das Bild
   vollstaendig. Die Flaeche traegt damit die Farben des Bildes, und das Motiv
   bleibt unversehrt. Das Verfahren stellt keinerlei Anforderungen an die
   Bildquelle — genau deshalb taugt es fuer einen gewachsenen Bestand. */
.skoutz-post-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
    background: var(--wp--preset--color--surface);
}

.skoutz-post-image::before {
    content: "";
    position: absolute;
    /* Ueber den Rand hinaus, sonst zeigt die Unschaerfe durchsichtige Kanten. */
    inset: -10%;
    z-index: -1;
    background-image: var(--skoutz-img);
    background-size: cover;
    background-position: center;
    filter: blur(30px) saturate(1.5);
    transform: scale(1.15);
}

/* Leichter Schleier, damit der Bildrand sich abhebt und Text darunter lesbar
   bleibt. */
.skoutz-post-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent),
        color-mix(in srgb, var(--wp--preset--color--contrast) 24%, transparent)
    );
}

/* Zwischen Rahmen und Bild steht ein Verweis. Ohne diese Regel ist ER das
   Flex-Kind, nicht das Bild — und die 100 % des Bildes beziehen sich dann auf
   einen Verweis ohne festgelegte Hoehe und verpuffen. Genau daran ist der
   Zuschnitt zuvor haengengeblieben. */
.skoutz-post-image > a,
.skoutz-book-cover > a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* `object-fit` wirkt nur, wenn Breite UND Hoehe gesetzt sind. */
.skoutz-post-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
    filter: drop-shadow(0 2px 8px rgba(31, 27, 24, 0.28));
}

/* In der Karte sitzt das Bild oben und ueber die volle Breite — nicht mehr
   als Spalte daneben. Die abgerundeten Ecken uebernimmt die Karte. */
.skoutz-article .skoutz-post-image {
    height: auto;
    aspect-ratio: 16 / 9;
    width: 100%;
    border-radius: 0;
}

.skoutz-article .wp-block-post-title {
    margin: 0.2rem 0 0.25rem;
    line-height: 1.25;
}

.skoutz-article .wp-block-post-title a {
    text-decoration: none;
}

.skoutz-article .wp-block-post-excerpt {
    margin: 0.4rem 0 0;
    color: var(--wp--preset--color--muted);
}

.skoutz-article .wp-block-post-date {
    color: var(--wp--preset--color--muted);
}

.skoutz-article__cat a {
    display: inline-block;
    padding: 0.12em 0.65em;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    text-decoration: none;
    font-size: 0.78em;
    margin-right: 0.3em;
}

/* KEIN AUFMACHER MEHR.

   Der erste Beitrag bekam frueher mehr Gewicht: hoeheres Bild, groessere
   Schrift. Das trug, solange die Beitraege als Zeilen untereinander standen —
   der Blick brauchte einen Anfang. Im Kartenraster stoert es: Eine Karte
   tanzt aus der Reihe, ihr Bild ist hoeher als das der Nachbarn, und die
   Zeile wirkt schief.

   Wenn ein Beitrag herausgehoben werden soll, dann bewusst und redaktionell —
   nicht deshalb, weil er zufaellig der neueste ist. */

/* Seitenleiste */
.skoutz-widget {
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.6rem;
    background: var(--wp--preset--color--surface);
    border-radius: var(--skoutz-radius);
}

.skoutz-widget--invite {
    background: transparent;
    border: 2px solid var(--wp--preset--color--primary);
}

.skoutz-widget__more {
    margin: 0.9rem 0 0;
}

.skoutz-widget .skoutz-moods {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.skoutz-widget .skoutz-moods a {
    padding: 0.5rem 0.8rem;
    background: var(--wp--preset--color--base);
    font-size: 0.92em;
}

/* Zuletzt bewertet */
.skoutz-recent {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.skoutz-recent__item {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

/* Auch die kleinen Vorschaubilder schneiden nichts ab — dieselbe Regel gilt
   ueberall, sonst faellt genau dort der Buchtitel weg, wo ohnehin wenig Platz
   ist. */
.skoutz-recent__cover img {
    width: 44px;
    height: 62px;
    object-fit: contain;
    object-position: center;
    border-radius: 3px;
    display: block;
    background: var(--wp--preset--color--base);
}

.skoutz-recent__cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 62px;
    border-radius: 3px;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--rule);
    text-decoration: none;
    font-family: var(--wp--preset--font-family--serif);
    color: var(--wp--preset--color--rule);
    flex: none;
}

.skoutz-recent__title {
    font-weight: 600;
    text-decoration: none;
    line-height: 1.25;
    display: block;
    font-size: 0.95rem;
}

.skoutz-recent__meta {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--wp--preset--color--muted);
}

/* Mittlere Schirme: linke Spalte entfaellt, Seitenleiste bleibt. */
@media (max-width: 1200px) {
    .skoutz-magazin {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26%);
        gap: 0 3%;
    }

    .skoutz-magazin__aside-left {
        display: none;
    }
}

@media (max-width: 899px) {
    .skoutz-magazin {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem 0;
    }

    .skoutz-article {
        grid-template-columns: 6.5rem 1fr;
        gap: 0.9rem;
    }
}

/* ---------------------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------------------- */

.skoutz-footer__brand {
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.skoutz-footer__head {
    font-family: var(--wp--preset--font-family--sans);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.skoutz-footer__list {
    list-style: none;
    padding: 0;
}

.skoutz-footer__list li {
    margin-bottom: 0.35rem;
}

.skoutz-footer__note {
    border-top: 1px solid var(--wp--preset--color--rule);
    padding-top: 1.2rem;
}

/* Kopfbereich etwas präsenter. */
.skoutz-header {
    background: var(--wp--preset--color--base);
}

.skoutz-header .wp-block-navigation a {
    padding: 0.3em 0;
    border-bottom: 2px solid transparent;
}

.skoutz-header .wp-block-navigation a:hover {
    border-bottom-color: var(--wp--preset--color--primary);
}

/* ===========================================================================
   Bewegung und Feinschliff
   
   Grundsatz: Bewegung soll etwas bedeuten — anzeigen, dass ein Element
   anfassbar ist, und wohin es fuehrt. Kein Selbstzweck. Alles laeuft kurz
   (150–350 ms) und wird bei `prefers-reduced-motion` vollstaendig
   abgeschaltet; das ist keine Kuer, sondern eine Zugaenglichkeitsanforderung.
   =========================================================================== */

:root {
    --skoutz-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --skoutz-fast: 160ms;
    --skoutz-slow: 320ms;
    --skoutz-shadow: 0 1px 2px rgba(31, 27, 24, 0.06), 0 8px 24px rgba(31, 27, 24, 0.08);
    --skoutz-shadow-lift: 0 2px 6px rgba(31, 27, 24, 0.08), 0 18px 40px rgba(31, 27, 24, 0.14);
}

/* --- Kopfbereich: bleibt oben, legt sich sanft ueber den Inhalt ----------- */

.skoutz-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* color-mix statt einer zweiten Farbvariable: bleibt automatisch
       stimmig, wenn die Palette geaendert wird. */
    background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: box-shadow var(--skoutz-slow) var(--skoutz-ease);
}

@supports not (backdrop-filter: blur(1px)) {
    .skoutz-header {
        background: var(--wp--preset--color--base);
    }
}

/* Menuepunkte: Linie waechst aus der Mitte statt hart umzuschalten. */
.skoutz-header .wp-block-navigation a {
    position: relative;
    border-bottom: 0;
    padding: 0.35em 0;
}

.skoutz-header .wp-block-navigation a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--wp--preset--color--primary);
    transition: left var(--skoutz-fast) var(--skoutz-ease),
                right var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-header .wp-block-navigation a:hover::after,
.skoutz-header .wp-block-navigation a:focus-visible::after {
    left: 0;
    right: 0;
}

.wp-block-site-title a {
    transition: color var(--skoutz-fast) var(--skoutz-ease);
}

.wp-block-site-title a:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* --- Magazinbeitraege: Bild zoomt, Titel rueckt nach ---------------------- */

.skoutz-article .skoutz-post-image {
    overflow: hidden;
    border-radius: 8px;
    /* Eigener Stapelkontext, sonst blitzt beim Skalieren der Rand durch. */
    isolation: isolate;
}

.skoutz-article .skoutz-post-image img {
    transition: transform var(--skoutz-slow) var(--skoutz-ease),
                filter var(--skoutz-slow) var(--skoutz-ease);
    will-change: transform;
}

.skoutz-articles > li:hover .skoutz-post-image img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

.skoutz-article .wp-block-post-title a {
    background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--skoutz-slow) var(--skoutz-ease),
                color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-articles > li:hover .wp-block-post-title a,
.skoutz-article .wp-block-post-title a:focus-visible {
    background-size: 100% 2px;
    color: var(--wp--preset--color--primary);
}

.skoutz-article__cat a {
    transition: transform var(--skoutz-fast) var(--skoutz-ease),
                box-shadow var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-article__cat a:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

/* --- Buchkacheln: heben sich an, Cover bekommt Tiefe --------------------- */

.skoutz-card {
    transition: transform var(--skoutz-slow) var(--skoutz-ease),
                border-color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-card:hover {
    transform: translateY(-4px);
}

.skoutz-card .skoutz-book-cover img,
.skoutz-book-cover--empty a {
    transition: transform var(--skoutz-slow) var(--skoutz-ease),
                box-shadow var(--skoutz-slow) var(--skoutz-ease);
}

.skoutz-card:hover .skoutz-book-cover img {
    transform: translateY(-2px) rotate(-0.6deg);
    box-shadow: var(--skoutz-shadow-lift);
}

.skoutz-card:hover .skoutz-book-cover--empty a {
    background: color-mix(in srgb, var(--skoutz-genre, var(--wp--preset--color--rule)) 12%, var(--wp--preset--color--surface));
}

/* Genre-Marken: Farbe laeuft von links ein. */
.skoutz-card .wp-block-post-terms a {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-card .wp-block-post-terms a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wp--preset--color--contrast);
    transform: translateX(-101%);
    transition: transform var(--skoutz-slow) var(--skoutz-ease);
}

.skoutz-card .wp-block-post-terms a:hover::before {
    transform: translateX(0);
}

/* --- Seitenleiste: Eintraege ruecken auf ------------------------------- */

.skoutz-recent__item {
    padding: 0.2rem;
    margin: -0.2rem;
    border-radius: 8px;
    transition: background var(--skoutz-fast) var(--skoutz-ease),
                transform var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-recent__item:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
    transform: translateX(3px);
}

.skoutz-recent__cover img,
.skoutz-recent__cover--empty {
    transition: transform var(--skoutz-fast) var(--skoutz-ease),
                box-shadow var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-recent__item:hover .skoutz-recent__cover img {
    transform: scale(1.06);
    box-shadow: var(--skoutz-shadow);
}

.skoutz-widget {
    transition: box-shadow var(--skoutz-slow) var(--skoutz-ease);
}

.skoutz-widget:hover {
    box-shadow: var(--skoutz-shadow);
}

/* --- Stimmungs-Einstiege: Farbe laeuft ein ------------------------------- */

.skoutz-moods a {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--skoutz-fast) var(--skoutz-ease),
                transform var(--skoutz-fast) var(--skoutz-ease),
                border-color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-moods a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--skoutz-slow) var(--skoutz-ease),
                opacity var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-moods a:hover {
    transform: translateX(2px);
}

.skoutz-moods a:hover::before {
    opacity: 0.09;
    transform: scaleX(1);
}

/* --- Schaltflaechen ------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
    transition: transform var(--skoutz-fast) var(--skoutz-ease),
                box-shadow var(--skoutz-fast) var(--skoutz-ease),
                background-color var(--skoutz-fast) var(--skoutz-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}

.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: none;
}

/* --- Fieberkurve: der Blickfang ----------------------------------------- */

.skoutz-fever__bar {
    transform-origin: left center;
    animation: skoutz-grow var(--skoutz-slow) var(--skoutz-ease) both;
}

.skoutz-fever__dot {
    box-shadow: 0 1px 4px rgba(31, 27, 24, 0.2);
    transition: transform var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-fever__row:hover .skoutz-fever__dot {
    transform: translateX(-50%) scale(1.25);
}

.skoutz-fever__row:hover .skoutz-fever__pole {
    color: var(--wp--preset--color--primary);
}

.skoutz-fever__pole {
    transition: color var(--skoutz-fast) var(--skoutz-ease);
}

@keyframes skoutz-grow {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* Die Achsen laufen nacheinander ein — die Kurve baut sich auf, statt
   schlagartig dazustehen. */
.skoutz-fever__row:nth-child(1) .skoutz-fever__bar { animation-delay: 0ms; }
.skoutz-fever__row:nth-child(2) .skoutz-fever__bar { animation-delay: 60ms; }
.skoutz-fever__row:nth-child(3) .skoutz-fever__bar { animation-delay: 120ms; }
.skoutz-fever__row:nth-child(4) .skoutz-fever__bar { animation-delay: 180ms; }
.skoutz-fever__row:nth-child(5) .skoutz-fever__bar { animation-delay: 240ms; }

.skoutz-mini__dot {
    transition: transform var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-card:hover .skoutz-mini__dot {
    transform: translate(-50%, -50%) scale(1.3);
}

/* --- Regal- und Filterbedienung ----------------------------------------- */

.skoutz-shelf__button {
    transition: transform var(--skoutz-fast) var(--skoutz-ease),
                border-color var(--skoutz-fast) var(--skoutz-ease),
                background var(--skoutz-fast) var(--skoutz-ease),
                color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-shelf__button:hover {
    transform: translateY(-1px);
}

.skoutz-search select,
.skoutz-search input[type="search"] {
    transition: border-color var(--skoutz-fast) var(--skoutz-ease),
                box-shadow var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-search select:hover,
.skoutz-search input[type="search"]:hover {
    border-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--rule));
}

.skoutz-search select:focus,
.skoutz-search input[type="search"]:focus {
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
    outline: none;
}

/* --- Verweise im Fliesstext --------------------------------------------- */

.skoutz-magazin__main p a:not(.wp-element-button),
.skoutz-widget__more a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    transition: background-size var(--skoutz-slow) var(--skoutz-ease);
}

.skoutz-magazin__main p a:not(.wp-element-button):hover,
.skoutz-widget__more a:hover {
    background-size: 100% 1px;
}

/* --- Grundlagen ---------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* Sichtbarer Fokus fuer Tastaturbedienung — nicht wegoptimieren. */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Wer Bewegung reduziert haben moechte, bekommt sie nicht. Vollstaendig,
   nicht nur abgeschwaecht. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skoutz-card:hover,
    .skoutz-recent__item:hover,
    .wp-element-button:hover,
    .skoutz-moods a:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
   Kopfbereich: Menuezeile ganz oben, Markenbanner darunter
   --------------------------------------------------------------------------- */

.skoutz-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}

.skoutz-topbar {
    gap: 1rem;
    padding: 0.4rem 0;
    align-items: center;
}

/* Social-Media-Symbole schlicht in der Menuezeile.
   
   Die Vorgabe von WordPress sind gefuellte Kreise in den Hausfarben der
   Anbieter — vier grelle Punkte, die mit der Gestaltung der Seite nichts zu
   tun haben und den Blick vom Menue ziehen. Hier stattdessen nur die Umrisse
   in der Textfarbe, die beim Ueberfahren den Akzent annehmen. */
.skoutz-topbar__social {
    gap: 0.15rem;
}

.skoutz-topbar__social .wp-block-social-link {
    margin: 0;
    padding: 0;
}

.skoutz-topbar__social .wp-block-social-link-anchor {
    padding: 6px;
    color: var(--wp--preset--color--muted);
    transition: color 160ms var(--skoutz-ease), transform 160ms var(--skoutz-ease);
}

.skoutz-topbar__social .wp-block-social-link-anchor svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.skoutz-topbar__social .wp-block-social-link:hover .wp-block-social-link-anchor {
    color: var(--wp--preset--color--primary);
    transform: translateY(-2px);
}

.skoutz-nav .wp-block-navigation__container {
    gap: 0;
    align-items: center;
}

.skoutz-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
    content: "◆";
    display: inline-block;
    padding: 0 0.9rem;
    font-size: 0.5em;
    color: var(--wp--preset--color--primary);
    opacity: 0.6;
}

/* Das Menue ist der Hauptweg durch die Seite und war mit 0,76rem kleiner
   gesetzt als der Fliesstext — es sah nach Fusszeile aus. Die Polsterung
   macht die Punkte gleichzeitig zu Zielen, die man auch auf dem Telefon
   trifft. */
.skoutz-nav .wp-block-navigation-item a {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0;
}

@media (pointer: coarse) {
    .skoutz-nav .wp-block-navigation-item a {
        padding: 0.7rem 0;
    }
}

/* ---------------------------------------------------------------------------
   Markenbanner ueber die volle Seitenbreite
   
   Das Bild traegt seinen eigenen weissen Grund. Es fuellt die Breite und wird
   nur in der Hoehe beschnitten — der abgeschnittene Teil ist Weissraum, kein
   Inhalt. Ein Logo darf man so behandeln; ein Buchcover nicht.
   --------------------------------------------------------------------------- */

.skoutz-brandbar {
    /* Die Wortmarke ist schwarz auf durchsichtigem Grund und braucht deshalb
       eine helle Flaeche. In der dunklen Fassung wird sie umgekehrt statt der
       Balken hell gelassen — ein weisser Streifen quer durch eine dunkle
       Seite ist genau das, was man im Dunkelmodus nicht sehen will. */
    background: var(--skoutz-brandbar-grund);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    line-height: 0;
}

/* Der Claim steht als Text ueber dem Menue, nicht mehr als Teil des Bildes.
   Damit ist er lesbar, uebersetzbar, kopierbar und waechst mit der
   Schriftgroesse des Lesers mit. */
.skoutz-claim {
    margin: 0 0 0.3rem;
    text-align: center;
    font-family: var(--wp--preset--font-family--serif);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--primary);
}

.skoutz-claim span {
    color: var(--wp--preset--color--contrast);
}

/* Eule links, Schriftzug rechts — zwei Bilder statt eines Banners.
   Als ein Bild liess sich weder die Groesse einzeln steuern noch der Umbruch
   auf schmalen Schirmen. */
.skoutz-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 2vw, 2rem);
    padding: clamp(1rem, 3vw, 2.4rem) var(--skoutz-gutter);
    text-decoration: none;
}

.skoutz-brand__owl {
    flex: none;
    width: auto;
    height: clamp(4rem, 9vw, 8.5rem);
}

.skoutz-brand__word {
    width: auto;
    height: clamp(2.2rem, 5.5vw, 5rem);
}

@media (max-width: 34rem) {
    .skoutz-brand {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 899px) {
    .skoutz-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
        padding: 0 0.4rem;
    }

    .skoutz-topbar {
        justify-content: center;
    }
}

.skoutz-footer__adresse {
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Kaufadressen auf der Buchseite

   Unter den Buchdaten, nicht neben dem Titel: Erst schauen, ob das Buch passt
   — die Kurve steht daneben —, dann kaufen.
   --------------------------------------------------------------------------- */

.skoutz-shop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 1.4rem 0;
}

.skoutz-shop__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

.skoutz-shop__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.35rem 1.1rem;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: 999px;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background var(--skoutz-fast) var(--skoutz-ease),
                color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-shop__link:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
}

/* Die Kennzeichnung steht in derselben Zeile und nicht im Kleingedruckten:
   Sie ist Pflicht, und wer sie versteckt, kennzeichnet nicht. */
.skoutz-shop__hinweis {
    flex: 1 1 100%;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--wp--preset--color--muted);
}

@media (pointer: coarse) {
    .skoutz-shop__link { min-height: 44px; }
}


/* --- Kopfzeile des Magazins: Ueberschrift links, Suche rechtsbuendig ------ */

.skoutz-magkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.skoutz-magkopf .skoutz-section {
    margin-bottom: 0;
}

.skoutz-magsuche {
    display: flex;
    gap: 0.4rem;
    /* Der Aufmacher darunter gibt die Kante vor, an der die Suche endet. */
    flex: 0 1 20rem;
}

.skoutz-magsuche input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
}

.skoutz-magsuche button {
    white-space: nowrap;
}

/* Auf schmalen Schirmen rutscht die Suche unter die Ueberschrift und nimmt
   die volle Breite — nebeneinander blieben beide zu schmal zum Tippen. */
@media (max-width: 40rem) {
    .skoutz-magsuche {
        flex: 1 1 100%;
    }
}

@media (pointer: coarse) {
    .skoutz-magsuche input[type="search"],
    .skoutz-magsuche button {
        min-height: 44px;
    }
}

/* --- Blaettern im Magazin ------------------------------------------------- */

/* Drei Spalten statt Flex: Bei `space-between` teilen sich die drei Teile den
   Platz nach ihrer Textlaenge, und „← Neuere" ist schmaler als „Ältere →" —
   die Zahlen landen dadurch neben der Mitte. Mit `1fr auto 1fr` sind die
   Aussenspalten gleich breit, egal was drinsteht, und die Zahlen stehen
   wirklich mittig. */
.skoutz-pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--wp--preset--color--rule);
}

/* Jeder Teil bekommt seine Spalte ausdruecklich zugewiesen. Ohne das rutscht
   auf Seite 1 — dort fehlt „Neuere" — alles eine Spalte nach links, und die
   Zahlen wandern beim Blaettern hin und her. */
.skoutz-pager .wp-block-query-pagination-previous {
    grid-column: 1;
    justify-self: start;
}

.skoutz-pager .wp-block-query-pagination-next {
    grid-column: 3;
    justify-self: end;
}

.skoutz-pager .wp-block-query-pagination-numbers {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Gleiche Groesse fuer jede Ziffer: Ohne feste Breite ist die einstellige
   aktive Seite ein Oval und die dreistellige ein Balken. */
.skoutz-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.6em;
    border-radius: 999px;
    border: 1px solid var(--wp--preset--color--rule);
    text-decoration: none;
    line-height: 1;
}

.skoutz-pager .page-numbers.dots {
    border-color: transparent;
    min-width: 1.6rem;
    padding: 0;
}

.skoutz-pager .page-numbers.current {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    font-weight: 600;
}

.skoutz-pager .page-numbers:not(.current):not(.dots):hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.skoutz-pager .wp-block-query-pagination-previous,
.skoutz-pager .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 1em;
    border-radius: 999px;
    border: 1px solid var(--wp--preset--color--rule);
    text-decoration: none;
}

.skoutz-pager .wp-block-query-pagination-previous:hover,
.skoutz-pager .wp-block-query-pagination-next:hover {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

/* Schmale Schirme: Die Zahlenreihe waere hier eine zweite Zeile Kleinkram.
   Vor und Zurueck genuegen, und die duerfen die Breite teilen. */
@media (max-width: 40rem) {
    .skoutz-pager {
        grid-template-columns: 1fr 1fr;
    }

    .skoutz-pager::before {
        display: none;
    }

    .skoutz-pager .wp-block-query-pagination-numbers {
        display: none;
    }

    .skoutz-pager .wp-block-query-pagination-next {
        grid-column: 2;
    }
}

@media (pointer: coarse) {
    .skoutz-pager .page-numbers,
    .skoutz-pager .wp-block-query-pagination-previous,
    .skoutz-pager .wp-block-query-pagination-next {
        min-height: 44px;
        height: 44px;
    }
}

/* --- Globale Suche im Menue ----------------------------------------------- */

/* Das Feld schwebt ueber der Zeile, statt sie zu verbreitern.
   
   Der Suchblock klappt sein Eingabefeld sonst IN der Menuezeile auf. Die Zeile
   wird dadurch breiter als der Platz, bricht um, und das Benutzerkonto rutscht
   in eine zweite Reihe — bei jedem Klick auf die Lupe springt also das halbe
   Menue. Absolut gesetzt traegt das Feld nichts zur Breite bei, und die Zeile
   bleibt stehen, egal ob offen oder zu.

   Die Lupe steht dafuer als letztes Element der Zeile, rechts vom Konto, und
   das Feld klappt nach RECHTS auf. Nach links waere es ueber die Menuepunkte
   gefallen — schwebend heisst eben auch: es verdeckt, was darunter liegt.
   Rechts davon liegt nichts. */
.skoutz-globalsuche {
    margin-left: 0.4rem;
    flex: 0 0 auto;
}

.skoutz-globalsuche .wp-block-search__inside-wrapper {
    position: relative;
}

.skoutz-globalsuche .wp-block-search__input {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14rem;
    margin-left: 0.45rem;
    background: var(--wp--preset--color--base);
    box-shadow: 0 2px 10px rgba(31, 27, 24, 0.12);
}

/* Nur auf wirklich breiten Schirmen klappt es nach rechts auf.
   
   Die Zeile liegt in einem zentrierten Rahmen von rund 1.200 px. Auf einem
   1.280er Schirm bleiben rechts daneben keine 224 px fuer das Feld — es liefe
   aus dem Bild und erzeugte einen waagerechten Balken. Erst ab etwa 1.440 px
   ist der Platz da. Darunter legt sich das Feld unter die Zeile und richtet
   sich am rechten Rand aus: ueberdeckt ebenfalls nichts und kann nicht
   ueberlaufen. */
@media (max-width: 90rem) {
    .skoutz-globalsuche .wp-block-search__input {
        left: auto;
        right: 0;
        top: calc(100% + 0.4rem);
        transform: none;
        width: min(18rem, 70vw);
        margin-left: 0;
        z-index: 20;
    }
}

.skoutz-globalsuche .wp-block-search__button {
    padding: 0.3em 0.6em;
    background: transparent;
    color: var(--wp--preset--color--contrast);
    border: 1px solid var(--wp--preset--color--rule);
}

.skoutz-globalsuche .wp-block-search__button:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary);
}

/* Sprungziel der Seitennavigation. Der Abstand haelt die Kopfzeile frei —
   ohne ihn liegt die erste Trefferzeile beim Sprung unter der Leiste. */
.skoutz-anker {
    scroll-margin-top: 5rem;
}

/* --- Untermenues ---------------------------------------------------------- */

/* Das Untermenue erbt sonst alles von der Menuezeile: Grossschreibung,
   Sperrung und die Trennpunkte zwischen den Oberpunkten. Zusammen ergibt das
   lange Zeilen in einem schmalen Kasten — jeder zweite Titel bricht um. */
.skoutz-nav .wp-block-navigation__submenu-container {
    min-width: 17rem;
    padding: 0.4rem 0;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: var(--skoutz-radius, 6px);
    background: var(--wp--preset--color--base);
    box-shadow: 0 8px 24px rgba(31, 27, 24, 0.14);
}

.skoutz-nav .wp-block-navigation__submenu-container li::after,
.skoutz-nav .wp-block-navigation__submenu-container li::before {
    content: none;
}

.skoutz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 0.5em 1.1em;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    white-space: nowrap;
}

.skoutz-nav .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary);
}

/* Die dritte Ebene klappt zur Seite auf. Ohne eigenen Abstand klebt sie am
   Rand des uebergeordneten Kastens. */
.skoutz-nav .wp-block-navigation__submenu-container
    .wp-block-navigation__submenu-container {
    margin-left: 0.2rem;
}

/* Der Pfeil zeigt an, dass es weitergeht — im Untermenue nach rechts. */
.skoutz-nav .wp-block-navigation__submenu-container
    .wp-block-navigation-submenu__toggle svg {
    transform: rotate(-90deg);
}

/* Auf schmalen Schirmen klappt das Menue als Ueberlagerung auf. Dort ist
   `nowrap` falsch — die Zeile liefe aus dem Bild. */
@media (max-width: 48rem) {
    .skoutz-nav .wp-block-navigation__submenu-container {
        min-width: 0;
        box-shadow: none;
        border: 0;
    }

    .skoutz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        white-space: normal;
        padding-left: 1.6em;
    }
}

/* --- Kompakte Buchsuche in der Seitenspalte -------------------------------- */

.skoutz-minisuche {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem 1rem;
    background: var(--wp--preset--color--surface);
    border-radius: var(--skoutz-radius, 6px);
}

.skoutz-minisuche__kopf {
    font-family: var(--wp--preset--font-family--serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.skoutz-minisuche input[type="search"] {
    width: 100%;
    min-width: 0;
}

/* Eine Reihe statt zwei: Bei acht Genres und einem Kreis von rund 28 px passt
   die Zeile auch in die schmale Spalte — und eine Reihe wirkt ruhiger als
   zwei, genau wie in der grossen Maske. */
.skoutz-minisuche__genres {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skoutz-minisuche__genres a {
    background-image: var(--skoutz-genre-icon);
    display: block;
    aspect-ratio: 1;
    border: 1.5px solid var(--skoutz-genre, var(--wp--preset--color--muted));
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 58%;
    transition: transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-minisuche__genres a:hover {
    transform: scale(1.12);
}

.skoutz-minisuche button {
    width: 100%;
}

.skoutz-minisuche__mehr {
    margin: 0;
    font-size: 0.88rem;
    text-align: center;
}

/* Auf schmalen Schirmen faellt die linke Spalte weg — dort steht die Suche
   ueber den Beitraegen statt daneben, und `sticky` waere dort stoerend. */
@media (max-width: 60rem) {
    .skoutz-minisuche {
        position: static;
    }
}

/* Die ganze linke Spalte laeuft mit, nicht nur die Suche.
   
   Vorher war allein `.skoutz-minisuche` sticky — sie schob sich beim Scrollen
   ueber das Widget darunter. In einem Raster braucht es zusaetzlich
   `align-self: start`, sonst dehnt sich die Spalte auf volle Hoehe und sticky
   hat keinen Weg, an dem es kleben koennte. */
.skoutz-magazin__aside-left {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.skoutz-minisuche {
    position: static;
}

@media (max-width: 60rem) {
    .skoutz-magazin__aside-left {
        position: static;
    }
}

/* --- Das Buecherregal ------------------------------------------------------ */

/* Die Farben kommen aus dem gewaehlten Thema (ShelfTheme). Hier steht nur die
   Gestalt — so bleibt das Regal bei jedem Thema dasselbe Moebel und wechselt
   nur die Kulisse. */
.skoutz-regal {
    --skoutz-regal-schrift: #FBF9F5;

    /* KEIN Ausbruch auf volle Breite.
    
       Ein Versuch damit (`width: 100vw` plus negative Raender) hat die Seite
       zerlegt: `100vw` rechnet den Rollbalken mit, die Seite lief waagerecht
       ueber, und weil die Regel in einem Rahmen sitzt, der selbst nicht in der
       Seitenmitte steht, verschob sich alles.
    
       Richtig waere es an der Vorlage, nicht hier: Der Block muesste
       `alignfull` bekommen, dann uebernimmt das Theme den Ausbruch mit seinen
       eigenen Regeln. Steht als Aufgabe in der Roadmap. */
    padding: 1.8rem clamp(1rem, 4vw, 2.5rem) 2.2rem;
    border-radius: var(--skoutz-radius, 6px);
    background-color: var(--skoutz-regal-grund, #FBF9F5);
    background-image: var(--skoutz-regal-bild, none);
    background-size: cover;
    background-position: center;
    color: var(--skoutz-regal-schrift);
}

.skoutz-regal--hell {
    --skoutz-regal-schrift: #1F1B18;
}

/* Ueber dem Bild liegt ein Schleier: Ohne ihn ist kein Text auf jedem
   Hintergrund lesbar, und die Bilder sind bewusst kontrastreich. */
.skoutz-regal[style*="--skoutz-regal-bild"] {
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb,
        var(--skoutz-regal-tief, #000) 62%, transparent);
}

.skoutz-regal h2,
.skoutz-regal .skoutz-shelf-list__heading {
    color: var(--skoutz-regal-schrift);
}

/* Ein Brett je Statusgruppe. Die Bretter tragen die Buecher — deshalb liegt
   der Schatten UNTER den Covern und die Kante darunter. */
.skoutz-regal .skoutz-shelf-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.9rem;
    list-style: none;
    margin: 0 0 2.2rem;
    padding: 0 0 0.9rem;
    border-bottom: 6px solid color-mix(in srgb,
        var(--skoutz-regal-akzent, #B8562F) 55%, #000);
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.55);
}

.skoutz-regal .skoutz-shelf-list > li {
    margin: 0;
    transition: transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

/* Beim Ueberfahren zieht das Buch aus dem Regal — dieselbe Bewegung, die man
   mit der Hand macht. */
.skoutz-regal .skoutz-shelf-list > li:hover {
    transform: translateY(-0.5rem);
}

.skoutz-regal .skoutz-shelf-list img {
    display: block;
    width: auto;
    height: 9.5rem;
    border-radius: 2px 4px 4px 2px;
    /* Der Buchruecken: heller Streifen links, wie bei einem stehenden Buch. */
    box-shadow: inset 0.35rem 0 0 rgba(255, 255, 255, 0.16),
                0 3px 8px rgba(0, 0, 0, 0.45);
}

.skoutz-regal .skoutz-shelf-list a {
    color: inherit;
    text-decoration: none;
}

/* --- Die Themenwahl -------------------------------------------------------- */

.skoutz-regal__wahl {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--skoutz-regal-schrift) 25%, transparent);
}

.skoutz-regal__wahl > summary {
    cursor: pointer;
    font-weight: 600;
}

.skoutz-regal__themen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

/* Jede Kachel traegt ihre eigenen Farben — man sieht vor dem Klick, was man
   bekommt. Eine Auswahlliste mit zehn Woertern koennte das nicht.
   
   Der Name sitzt unten auf einem Verlauf, nicht frei auf dem Bild: Ueber neun
   verschiedenen Hintergruenden ist frei stehender Text nirgends zuverlaessig
   lesbar. Der Verlauf verdunkelt nur den unteren Rand und laesst das Bild,
   worum es geht, frei. */
.skoutz-regal__themen button {
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 5rem;
    padding: 0.5rem 0.6rem;
    border: 2px solid transparent;
    border-radius: var(--skoutz-radius, 6px);
    background-color: var(--skoutz-regal-grund);
    background-image: var(--skoutz-regal-bild, none);
    background-size: cover;
    background-position: center;
    color: var(--skoutz-regal-schrift, #FBF9F5);
    text-align: left;
    cursor: pointer;
}

.skoutz-regal__themen button.is-active {
    border-color: var(--skoutz-regal-akzent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--skoutz-regal-akzent) 35%, transparent);
}

.skoutz-regal__themen button::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    border-radius: 0 0 var(--skoutz-radius, 6px) var(--skoutz-radius, 6px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
    pointer-events: none;
}

.skoutz-regal__themen button {
    position: relative;
    overflow: hidden;
}

/* Helle Themen brauchen keinen dunklen Verlauf — dort steht dunkle Schrift. */
.skoutz-regal__themen button[style*="--skoutz-regal-schrift"]::before {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.85), transparent);
}

.skoutz-regal__name {
    position: relative;
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

p.skoutz-regal__stimmung {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    opacity: 0.9;
}

.skoutz-regal__oeffentlich {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.8rem;
}

.skoutz-regal__hinweis {
    padding: 0.5rem 0.9rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--skoutz-regal-akzent) 25%, transparent);
}

@media (pointer: coarse) {
    .skoutz-regal__themen button {
        min-height: 44px;
    }
}

/* --- Was im Regal steht, nimmt die Farben des Regals an ------------------- */

/* Die Bausteine der Seite — Karten, Felder, Kurvenzellen — sind fuer den
   hellen Grund der uebrigen Seite gemacht. Im eingekleideten Regal stehen sie
   sonst als weisse Kaesten auf einer Zwergenhalle. Statt jede Regel doppelt zu
   pflegen, nehmen sie hier die Farben des Regals an. */
.skoutz-regal .skoutz-card,
.skoutz-regal .skoutz-widget,
.skoutz-regal .skoutz-shelf-list > li,
.skoutz-regal fieldset {
    background: color-mix(in srgb, var(--skoutz-regal-tief) 55%, transparent);
    border-color: color-mix(in srgb, var(--skoutz-regal-schrift) 22%, transparent);
    color: inherit;
}

.skoutz-regal a:not(.wp-element-button) {
    color: var(--skoutz-regal-akzent);
}

/* Die Kurve: Zellen als angedeutete Kaesten statt als weisse Balken. Die
   Linie und die Punkte behalten ihre Akzentfarbe — sie sind die Aussage. */
.skoutz-regal .skoutz-fever__row {
    background: color-mix(in srgb, var(--skoutz-regal-schrift) 8%, transparent);
    border-radius: 999px;
}

.skoutz-regal .skoutz-fever__bar,
.skoutz-regal .skoutz-fever__pole {
    background: color-mix(in srgb, var(--skoutz-regal-schrift) 14%, transparent);
    box-shadow: none;
}

.skoutz-regal .skoutz-fever-ink {
    color: var(--skoutz-regal-schrift);
}

/* Trennlinien und Ueberschriften: Die Haarlinie des Themes ist auf dunklem
   Grund unsichtbar. */
.skoutz-regal hr,
.skoutz-regal h2,
.skoutz-regal h3 {
    border-color: color-mix(in srgb, var(--skoutz-regal-schrift) 25%, transparent);
}

.skoutz-regal input[type="text"],
.skoutz-regal input[type="search"],
.skoutz-regal select,
.skoutz-regal textarea {
    background: color-mix(in srgb, var(--skoutz-regal-tief) 70%, transparent);
    border-color: color-mix(in srgb, var(--skoutz-regal-schrift) 35%, transparent);
    color: inherit;
}

/* Helle Themen brauchen den umgekehrten Weg: Dort ist der Grund hell, und ein
   aufgehellter Kasten verschwindet darin. */
.skoutz-regal--hell .skoutz-card,
.skoutz-regal--hell .skoutz-widget,
.skoutz-regal--hell .skoutz-shelf-list > li,
.skoutz-regal--hell fieldset {
    background: color-mix(in srgb, #FFFFFF 65%, transparent);
}

/* --- Das Brett ------------------------------------------------------------ */

.skoutz-regal .skoutz-brett__kopf {
    margin: 1.6rem 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--skoutz-regal-schrift);
}

.skoutz-regal .skoutz-brett__kopf span {
    opacity: 0.65;
    font-weight: 400;
}

/* Buecher stehen nebeneinander und stossen unten am Brett auf. */
.skoutz-brett {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0 0.4rem 0.7rem;
    border-bottom: 7px solid color-mix(in srgb, var(--skoutz-regal-akzent) 45%, #000);
    box-shadow: 0 7px 12px -7px rgba(0, 0, 0, 0.7);
}

.skoutz-brett__buch {
    margin: 0;
    /* Nicht alle Buecher sind gleich hoch — ein Regal, in dem sie es waeren,
       sieht aus wie eine Tabelle. */
    transition: transform var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-brett__buch:nth-child(3n) { transform: translateY(-2px); }
.skoutz-brett__buch:nth-child(5n) { transform: translateY(1px); }

.skoutz-brett__buch:hover,
.skoutz-brett__buch:focus-within {
    transform: translateY(-0.6rem);
}

.skoutz-brett__buch a {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}

.skoutz-brett__buch img {
    display: block;
    width: auto;
    height: 8.5rem;
    border-radius: 2px 3px 3px 2px;
    box-shadow: inset 0.3rem 0 0 rgba(255, 255, 255, 0.14),
                0 3px 9px rgba(0, 0, 0, 0.5);
}

/* Ohne Cover: ein Ruecken aus der Genre-Farbe, Titel laengs. */
.skoutz-brett__blind {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 8.5rem;
    padding: 0.4rem 0;
    border-radius: 2px 3px 3px 2px;
    background: var(--skoutz-genre, #6B6259);
    box-shadow: inset 0.3rem 0 0 rgba(255, 255, 255, 0.18),
                0 3px 9px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.skoutz-brett__blind span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.72rem;
    line-height: 1;
    color: #FBF9F5;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 7.6rem;
}

/* Der Titel erscheint erst beim Ueberfahren — sonst waere das Brett wieder
   eine Liste, nur mit Bildern. */
.skoutz-brett__titel {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 2;
    display: block;
    max-width: 9rem;
    padding: 0.25rem 0.4rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.82);
    color: #FBF9F5;
    font-size: 0.72rem;
    line-height: 1.2;
    opacity: 0;
    transition: opacity var(--skoutz-fast, 160ms) var(--skoutz-ease, ease);
}

.skoutz-brett__buch:hover .skoutz-brett__titel,
.skoutz-brett__buch:focus-within .skoutz-brett__titel {
    opacity: 0.9;
}

/* Bei Beruehrung gibt es kein Ueberfahren — dort steht der Titel immer. */
@media (pointer: coarse) {
    .skoutz-brett__titel {
        opacity: 0.9;
    }
}

/* --- Der Regalraum: das Thema faerbt die ganze Seite ---------------------- */

body.skoutz-regalraum {
    background-color: var(--skoutz-regal-grund);
    background-image: var(--skoutz-regal-bild, none);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    color: var(--skoutz-regal-schrift, #FBF9F5);
}

/* Ein Schleier ueber der ganzen Seite statt eines Kastens mit Rand. */
body.skoutz-regalraum::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--skoutz-regal-tief) 58%, transparent);
    pointer-events: none;
}

body.skoutz-regalraum .wp-block-post-title,
body.skoutz-regalraum .wp-block-post-date,
body.skoutz-regalraum h1,
body.skoutz-regalraum h2 {
    color: var(--skoutz-regal-schrift, #FBF9F5);
}

/* Im Regalraum braucht das Regal selbst keinen eigenen Grund mehr. */
body.skoutz-regalraum .skoutz-regal {
    background: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

/* --- Regalboeden ---------------------------------------------------------- */

/* Das Regal als Moebel.
   
   Die Werte stammen aus dem gelieferten Bild (1024x1536, freigestellt),
   ausgemessen am Alphakanal: vier Faecher, die Boeden auf 23,9 / 47,0 / 68,0
   und 89,5 Prozent der Hoehe, die Wangen 6,6 Prozent der Breite.
   
   Deshalb ein Raster mit AUSGEMESSENEN Zeilenhoehen statt vier gleicher
   Zeilen: Die Faecher im Bild sind nicht exakt gleich hoch, und schon zwei
   Prozent Abweichung lassen die Buecher schweben oder im Boden stecken.
   
   Wird das Bild je ersetzt, sind es diese vier Zahlen — sonst nichts. */
.skoutz-brett {
    --skoutz-wange: 6.6%;

    display: grid;
    grid-template-rows: 23.9% 23.1% 21% 21.5% 10.5%;
    aspect-ratio: 900 / 1350;
    margin: 0 0 0.6rem;
    padding: 0 var(--skoutz-wange);
    width: 100%;
    list-style: none;

    background-image: var(--skoutz-moebel, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Jedes Buch sitzt in seiner Zeile und steht auf dem Boden auf. Die Zeile
   ergibt sich aus der Reihenfolge — acht Buecher je Fach. */
.skoutz-brett__buch {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 4%;
}

.skoutz-brett__buch img,
.skoutz-brett__blind {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

/* Fuenf Plaetze je Fach. Bei einem Regal von rund 20rem Breite ist mehr
   nicht lesbar — die Ruecken wuerden zu Streifen. */
.skoutz-brett {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 0.6%;
}

/* Die Regale stehen nebeneinander.
   
   Drei Regale untereinander sind drei Bildschirme; nebeneinander sieht man
   auf einen Blick, wie die Sammlung verteilt ist. Sie brechen erst um, wenn
   der Platz wirklich fehlt. */
.skoutz-regale {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.skoutz-regale__einheit {
    flex: 1 1 17rem;
    min-width: 0;
    max-width: 23rem;
}

.skoutz-regale__einheit .skoutz-brett__kopf {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

/* Nicht alle gleich hoch — sonst ist es eine Tabelle. */
.skoutz-brett__buch:nth-child(3n) img { max-height: 88%; }
.skoutz-brett__buch:nth-child(4n) img { max-height: 96%; }
.skoutz-brett__buch:nth-child(5n) img { max-height: 91%; }

/* Blaettern im Fach */
.skoutz-fach__blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: -1.4rem 0 2rem;
    font-size: 0.88rem;
}

.skoutz-fach__blaettern a {
    padding: 0.25em 0.9em;
    border: 1px solid color-mix(in srgb, var(--skoutz-regal-schrift) 30%, transparent);
    border-radius: 999px;
    text-decoration: none;
}

.skoutz-fach__blaettern .skoutz-fach__aus {
    padding: 0.25em 0.9em;
    opacity: 0.35;
}

.skoutz-fach__blaettern span:not(.skoutz-fach__aus) {
    opacity: 0.75;
}

/* Das Sprungziel liegt unter der Kopfzeile, sonst verdeckt sie das Fach. */
.skoutz-brett {
    scroll-margin-top: 5rem;
}

@media (pointer: coarse) {
    .skoutz-fach__blaettern a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Begruessung */
.skoutz-gruss {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    opacity: 0.9;
}

/* Der Stapel: was noch nicht gelesen ist, liegt daneben statt im Regal. */
.skoutz-stapel {
    margin: 1rem 0 2rem;
}

.skoutz-stapel h2 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
}

.skoutz-stapel h2 span { opacity: 0.6; font-weight: 400; }

.skoutz-stapel ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skoutz-stapel a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 18rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--skoutz-regal-schrift) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--skoutz-regal-tief) 55%, transparent);
    color: inherit;
    text-decoration: none;
    font-size: 0.85rem;
}

.skoutz-stapel img {
    width: 1.6rem;
    height: 2.4rem;
    object-fit: cover;
    border-radius: 2px;
}

/* Das Buch bleibt im Fach — vorher ragte der Ruecken oben heraus. */
.skoutz-brett__blind {
    height: auto;
    max-height: 100%;
    width: 2.2rem;
}

.skoutz-brett__blind span { max-height: 100%; }

/* --- Die Regalseite ist ein Profil, keine Seite mit Titel und Datum -------- */

/* Der Gruss ersetzt die Ueberschrift. Beides zu zeigen hiesse, dieselbe
   Information zweimal zu geben — und „Meine Bücher" ueber „Willkommen
   zurueck" liest sich wie ein Formular. */
body.skoutz-regalraum .wp-block-post-title,
body.skoutz-regalraum .wp-block-post-date {
    display: none;
}

h1.skoutz-gruss {
    margin: 0 0 1.4rem;
    font-family: var(--wp--preset--font-family--serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    opacity: 1;
}

/* Der Hinweis trug den hellen Grund der uebrigen Seite — im Regalraum ein
   weisser Kasten in einer Zwergenhalle. */
body.skoutz-regalraum .skoutz-shelf-pending {
    background: color-mix(in srgb, var(--skoutz-regal-tief) 65%, transparent);
    border-left: 3px solid var(--skoutz-regal-akzent);
    border-radius: 4px;
    color: var(--skoutz-regal-schrift);
}

body.skoutz-regalraum .skoutz-shelf-pending a {
    color: var(--skoutz-regal-akzent);
}

/* Der Ruecken ohne Cover bleibt im Fach.
   
   `max-height: 100%` allein genuegt nicht: Das Element ist ein Flex-Kind mit
   `align-items: flex-end`, und die senkrechte Schrift darin gibt ihm eine
   Mindesthoehe, die groesser sein kann als das Fach. Deshalb zusaetzlich eine
   feste Hoehe in Prozent der Zeile. */
.skoutz-brett__blind {
    height: 86%;
    max-height: 86%;
    width: 2rem;
    min-height: 0;
    overflow: hidden;
}

.skoutz-brett__blind span {
    max-height: 100%;
    font-size: 0.62rem;
    overflow: hidden;
}

/* --- Kopfzeile des Profils: Gruss links, Hinweis rechts -------------------- */

.skoutz-profilkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.skoutz-profilkopf .skoutz-gruss {
    margin: 0;
    flex: 1 1 16rem;
}

/* Der Hinweis ist eine Randnotiz, keine Ansage: rechts oben, schmal, ruhig. */
.skoutz-profilkopf .skoutz-shelf-pending {
    flex: 0 1 22rem;
    margin: 0;
    padding: 0.8rem 1rem;
    font-size: 0.86rem;
}

.skoutz-profilkopf .skoutz-shelf-pending p {
    margin: 0 0 0.3rem;
}

.skoutz-profilkopf .skoutz-shelf-pending p:last-child {
    margin: 0;
}

/* --- Der Buchruecken bleibt im Fach --------------------------------------- */

/* Der Verweis umschliesst den Ruecken. Ohne eigene Hoehe hat er keine, an der
   sich eine Prozentangabe messen koennte — das Kind wurde deshalb so hoch wie
   sein Text, und bei einem langen Titel ragte es aus dem Regal. Genau daran
   sind die letzten beiden Versuche gescheitert. */
.skoutz-brett__buch a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 0;
}

.skoutz-brett__blind {
    height: 82%;
    max-height: 82%;
    min-height: 0;
    width: 1.9rem;
    flex: 0 0 auto;
    overflow: hidden;
}

.skoutz-brett__blind span {
    max-height: 100%;
    font-size: 0.58rem;
    letter-spacing: -0.01em;
    overflow: hidden;
}

.skoutz-brett__buch img {
    max-height: 82%;
    width: auto;
    object-fit: contain;
}

/* Das helle Regal ist ein anderes Moebel — eigene Zahlen.
   
   Am Alphakanal gemessen: Boeden auf 25,1 / 48,8 / 70,8 / 91,5 Prozent, Wange
   5,8 Prozent. Die Abweichung zum dunklen betraegt bis zu 2,8 Prozentpunkte —
   genug, dass die Buecher sonst schweben. */
body.skoutz-regalraum--hell .skoutz-brett {
    --skoutz-wange: 5.8%;
    grid-template-rows: 25.1% 23.7% 22% 20.7% 8.5%;
}

/* --- Der Buchruecken: das Problem war der Text, nicht der Kasten ---------- */

/* Vier Anlaeufe am CSS sind gescheitert. Der letzte hat das Regal geleert:
   `container-type: size` verlangt eine definierte Hoehe, die Rasterzeile
   liefert keine — der Container wurde null hoch und `overflow: hidden` hat
   alles verschluckt.
   
   Die Ursache lag nie im Kasten, sondern im Inhalt: Ein senkrecht gesetzter
   Titel ist so hoch wie er lang ist. „Harry Potter und der Stein der Weisen"
   sind 38 Zeichen — kein Fach der Welt ist so hoch. Gekuerzt wird deshalb der
   TEXT, in PHP, bevor er ins Markup geht. Danach braucht der Kasten keine
   Kunststuecke mehr. */
.skoutz-brett__blind {
    width: 1.9rem;
    height: auto;
    max-height: 100%;
    padding: 0.3rem 0;
}

.skoutz-brett__blind span {
    font-size: 0.58rem;
    line-height: 1;
}

.skoutz-brett__buch img {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

.skoutz-brett__titel {
    display: none;
}

/* Regale links, Einstellungen als Spalte rechts.
   
   Unter den Regalen waren sie eine Fussnote, die niemand sucht. An der Seite
   stehen sie neben dem, was sie veraendern — man sieht die Wirkung, waehrend
   man waehlt. */
.skoutz-regalseite {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.skoutz-regalseite__inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.skoutz-regal__optionen {
    flex: 0 0 17rem;
    position: sticky;
    top: 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--skoutz-radius, 6px);
    background: color-mix(in srgb, var(--skoutz-regal-tief) 62%, transparent);
}

.skoutz-regal__optionen .skoutz-regal__wahl {
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
}

.skoutz-regal__optionen .skoutz-regal__themen {
    grid-template-columns: repeat(2, 1fr);
}

.skoutz-regal__optionen h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

/* Auf schmalen Schirmen unter die Regale — nebeneinander bliebe fuer beides
   zu wenig Platz. */
@media (max-width: 62rem) {
    .skoutz-regalseite {
        display: block;
    }

    .skoutz-regal__optionen {
        position: static;
        margin-top: 1.5rem;
    }

    .skoutz-regal__optionen .skoutz-regal__themen {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }
}

/* --- Die Profilseite nutzt die volle Breite ------------------------------- */

/* Der Beitragsinhalt sitzt sonst in der zentrierten Textspalte von rund
   40rem. „Rechts" ist dort der Rand DIESER Spalte, nicht der Seite — die
   Einstellungen standen mitten im Bild, und fuer die Regale nebeneinander
   blieb kein Platz.
   
   Aufgehoben wird die Begrenzung nur auf dieser Seite und nur fuer die
   Regalflaeche; Ueberschrift und Hinweis bleiben lesbar breit. */
body.skoutz-regalraum .wp-block-post-content,
body.skoutz-regalraum .entry-content {
    max-width: none;
}

/* Dasselbe Raster wie im Magazin: 15 Prozent Rand links, 70 Prozent Inhalt,
   15 Prozent Widget-Spalte rechts. Vorher lief die Flaeche auf 96rem und war
   zentriert — dadurch endete die Widget-Spalte weit vor dem Seitenrand. */
body.skoutz-regalraum .skoutz-profilkopf,
body.skoutz-regalraum .skoutz-regalseite {
    display: grid;
    grid-template-columns:
        minmax(0, 15%)
        minmax(0, 70%)
        minmax(0, 15%);
    gap: 0 1.5rem;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}

body.skoutz-regalraum .skoutz-regalseite__inhalt,
body.skoutz-regalraum .skoutz-profilkopf .skoutz-gruss {
    grid-column: 2;
}

body.skoutz-regalraum .skoutz-regal__optionen {
    grid-column: 3;
    flex: none;
    width: 100%;
}

/* Die Einstellungen sitzen jetzt wirklich am rechten Rand — und duerfen
   etwas breiter sein, weil die Seite es hergibt. */
body.skoutz-regalraum .skoutz-regal__optionen .skoutz-regal__themen {
    grid-template-columns: repeat(2, 1fr);
}

/* Die Begrenzung sitzt bei Block-Themes an den KINDERN des Containers
   (`is-layout-constrained > *`), nicht am Container selbst. Eine Regel am
   Container bleibt deshalb wirkungslos — genau das ist mir eben passiert. */
body.skoutz-regalraum .wp-block-post-content.is-layout-constrained > * {
    max-width: none;
}

/* Unter 62 rem hat ein Drittelraster keinen Sinn — dort untereinander. */
@media (max-width: 62rem) {
    body.skoutz-regalraum .skoutz-profilkopf,
    body.skoutz-regalraum .skoutz-regalseite {
        display: block;
        padding-inline: 1rem;
    }
}

/* Die Regale stehen mittig in ihrer Spalte statt links angeschlagen — bei
   zwei Regalen in einer 70-Prozent-Spalte sah es sonst aus, als fehlte etwas. */
body.skoutz-regalraum .skoutz-regale {
    justify-content: center;
}

/* Der Hinweis steht ueber den Regalen, in ihrer Breite. */
body.skoutz-regalraum .skoutz-regalseite__inhalt .skoutz-shelf-pending {
    max-width: 46rem;
    margin: 0 auto 1.5rem;
}

/* Die Begruessung steht ueber den Regalen, nicht an der linken Kante ihrer
   Spalte — sie bekommt dieselbe Breite und Ausrichtung wie Hinweis und
   Regale, sonst steht sie versetzt darueber. */
body.skoutz-regalraum .skoutz-profilkopf .skoutz-gruss {
    max-width: 46rem;
    margin-inline: auto;
}

/* Etwas Luft zum Seitenrand — bündig an der Kante wirkt es abgeschnitten. */
body.skoutz-regalraum .skoutz-profilkopf,
body.skoutz-regalraum .skoutz-regalseite {
    padding-right: clamp(1rem, 2vw, 2rem);
}

/* --- Termine -------------------------------------------------------------
   Zwei Ansichten aus denselben Daten: Liste und Monatsraster.

   Die Liste ist die Voreinstellung und auf dem Telefon die einzige, die
   Sinn ergibt — sieben Spalten auf 360 Pixeln sind 50 Pixel je Tag. Das
   Raster bleibt trotzdem erreichbar, es wird dort nur waagerecht
   scrollbar statt gequetscht. */

.skoutz-events__wahl {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.skoutz-events__wahl a {
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.4;
}

.skoutz-events__wahl a.is-active {
    background: var(--wp--preset--color--primary);
    border-color: transparent;
    color: var(--skoutz-auf-primary);
}

/* Das Abonnement steht abgesetzt: Es ist keine dritte Ansicht, sondern ein
   Ausgang aus der Seite heraus. */
.skoutz-events__ical {
    margin-inline-start: auto;
}

.skoutz-events__ical::before {
    content: "\1F4C5\A0";
}

/* --- Liste --- */

.skoutz-events__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skoutz-event {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* Das Datum als Abreisskalenderblatt — es traegt die Ansicht, deshalb steht
   der Tag gross und Monat und Uhrzeit klein darum. */
.skoutz-event__datum {
    flex: 0 0 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
    line-height: 1.2;
}

.skoutz-event__datum span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

.skoutz-event__datum strong {
    font-size: 1.75rem;
    font-weight: 700;
}

.skoutz-event__text h3 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.skoutz-event__ort,
.skoutz-event__wer {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.skoutz-events__leer {
    padding: 2rem 0;
    opacity: 0.7;
}

/* --- Monatsraster --- */

.skoutz-events__monat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.skoutz-events__monat strong {
    min-width: 12ch;
    text-align: center;
    font-size: 1.1rem;
}

.skoutz-events__monat a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.skoutz-monat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 0.5rem;
    overflow: hidden;
}

.skoutz-monat__kopf {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    background: color-mix(in srgb, currentColor 6%, var(--wp--preset--color--base));
}

.skoutz-monat__leer,
.skoutz-monat__tag {
    min-height: 5.5rem;
    padding: 0.35rem;
    background: var(--wp--preset--color--base);
}

.skoutz-monat__tag > span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.6;
}

.skoutz-monat__tag.is-heute {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
}

.skoutz-monat__tag.is-heute > span {
    font-weight: 700;
    opacity: 1;
}

.skoutz-monat__tag ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.skoutz-monat__tag li a {
    display: block;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
    background: var(--wp--preset--color--primary);
    color: var(--skoutz-auf-primary);
    font-size: 0.72rem;
    line-height: 1.3;
    text-decoration: none;
    /* Der Titel ist in PHP schon gekuerzt; das hier faengt die Faelle ab,
       in denen ein einzelnes Wort trotzdem zu breit ist. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Schmale Schirme: Das Raster wird nicht gequetscht, sondern geschoben.
   Sieben Spalten unter 2,5 rem sind unlesbar und unklickbar. */
@media (max-width: 40rem) {
    .skoutz-monat {
        grid-auto-flow: row;
    }

    .skoutz-monat__leer,
    .skoutz-monat__tag {
        min-height: 4rem;
    }

    .skoutz-monat__tag li a {
        /* Auf dem Telefon zaehlt nur, DASS an dem Tag etwas ist. */
        font-size: 0;
        height: 0.5rem;
        padding: 0;
    }

    .skoutz-event__datum {
        flex-basis: 3.75rem;
    }
}

@media (pointer: coarse) {
    .skoutz-events__wahl a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Terminseite: volle Breite, Liste als Widget rechts -------------------
   Dasselbe Raster wie auf der Profilseite: 15 Prozent links, 70 Prozent
   Inhalt, 15 Prozent Widget rechts. Ein Monatsraster mit sieben Spalten in
   der zentrierten Textspalte von 40 rem ist ein Briefmarkenalbum. */

body.skoutz-terminraum .wp-block-post-content,
body.skoutz-terminraum .entry-content {
    max-width: none;
}

/* Die Begrenzung sitzt bei Block-Themes an den KINDERN des Containers, nicht
   am Container selbst — eine Regel am Container bliebe wirkungslos. */
body.skoutz-terminraum .wp-block-post-content.is-layout-constrained > * {
    max-width: none;
}

/* Ueberschrift und Einleitung bleiben lesbar schmal und mittig — nicht an der
   linken Seitenkante.

   Die Regel braucht dieselbe Klassenkette wie die Aufhebung darueber, sonst
   verliert sie: `.wp-block-post-content.is-layout-constrained > *` zaehlt drei
   Klassen, ein blosses `.entry-content > h2` nur zwei. Genau daran ist die
   Ueberschrift eben nach links gerutscht. */
body.skoutz-terminraum .wp-block-post-content.is-layout-constrained > h2,
body.skoutz-terminraum .wp-block-post-content.is-layout-constrained > p,
body.skoutz-terminraum .wp-block-post-title,
body.skoutz-terminraum .wp-block-post-date {
    max-width: 46rem;
    margin-inline: auto;
    /* Der Kasten war schon mittig, der Text darin nicht: Alle Zeilen begannen
       an der linken Kante einer zentrierten Spalte und standen dadurch
       sichtbar links neben der Kalendermitte. Ueber einem symmetrischen
       Raster muss auch die Zeile symmetrisch sitzen. */
    text-align: center;
}

body.skoutz-terminraum .skoutz-events {
    display: grid;
    grid-template-columns:
        minmax(0, 15%)
        minmax(0, 70%)
        minmax(0, 15%);
    gap: 0 1.5rem;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
    /* Beidseitig gleich viel Luft, nicht nur rechts: Sonst sitzt die Mitte
       des Rasters um die halbe Polsterung neben der Mitte der Seite — und
       genau daran misst das Auge die Ueberschrift darueber. */
    padding-inline: clamp(1rem, 2vw, 2rem);
}

body.skoutz-terminraum .skoutz-events__haupt {
    grid-column: 2;
    min-width: 0;
}

body.skoutz-terminraum .skoutz-events__neben {
    grid-column: 3;
    min-width: 0;
}

/* Das Widget laeuft beim Scrollen mit — der Kalender ist hoch, und die
   naechsten Termine sollen nicht nach dem ersten Bildschirm verschwinden. */
.skoutz-events__neben {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    padding: 1rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.skoutz-events__neben h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* In der schmalen Spalte steht das Datum ueber dem Text, nicht daneben:
   4,5 rem Kalenderblatt plus Titel gehen sich auf 15 Prozent nicht aus. */
.skoutz-events__liste--schmal .skoutz-event {
    display: block;
    padding: 0.6rem 0;
}

.skoutz-events__liste--schmal .skoutz-event__datum {
    flex-direction: row;
    gap: 0.4rem;
    justify-content: flex-start;
    padding: 0.15rem 0.4rem;
    margin-bottom: 0.3rem;
    width: fit-content;
    background: none;
}

.skoutz-events__liste--schmal .skoutz-event__datum strong {
    font-size: 1rem;
}

.skoutz-events__liste--schmal .skoutz-event__text h3 {
    font-size: 0.95rem;
    line-height: 1.3;
}

.skoutz-events__liste--schmal .skoutz-event__wer {
    display: none;
}

.skoutz-events__liste--schmal .skoutz-event__ort {
    font-size: 0.8rem;
}

/* --- Der Kalender darf gross sein ---------------------------------------- */

body.skoutz-terminraum .skoutz-monat__leer,
body.skoutz-terminraum .skoutz-monat__tag {
    /* Die Hoehe waechst mit der Breite, aber gedeckelt: Sechs Wochenzeilen a
       9vw waren auf einem breiten Schirm ueber tausend Pixel, und man musste
       fuer den halben Monat scrollen. Ein ganzer Monat soll auf einen Blick
       passen — das ist der Sinn der Ansicht. */
    min-height: clamp(3.5rem, 4.5vw, 5.5rem);
}

body.skoutz-terminraum .skoutz-monat__kopf {
    padding: 0.7rem 0.25rem;
    font-size: 0.95rem;
}

body.skoutz-terminraum .skoutz-monat__tag > span {
    font-size: 1rem;
}

body.skoutz-terminraum .skoutz-monat__tag li a {
    font-size: 0.85rem;
    padding: 0.25rem 0.45rem;
}

body.skoutz-terminraum .skoutz-events__monat strong {
    font-size: 1.35rem;
}

/* Unter 62 rem hat ein Drittelraster keinen Sinn — dort untereinander, und
   das Widget wird zur Liste unter dem Kalender. */
@media (max-width: 62rem) {
    body.skoutz-terminraum .skoutz-events {
        display: block;
        padding-inline: 1rem;
    }

    .skoutz-events__neben {
        position: static;
        margin-top: 2rem;
    }

    body.skoutz-terminraum .skoutz-monat__leer,
    body.skoutz-terminraum .skoutz-monat__tag {
        min-height: 4rem;
    }
}

/* --- Regal-Texturen ------------------------------------------------------
   Neun Muster fuer die Regal-Themen, alle als reine CSS-Verlaeufe.

   BEWUSST OHNE BILDDATEIEN. Ein gekacheltes Muster je Thema waeren neun
   Grafiken, die auf dem Telefon geladen werden muessen, bevor die Seite
   fertig aussieht — fuer Zierrat. Verlaeufe kosten nichts, skalieren auf
   jede Bildschirmgroesse und passen sich der Themenfarbe an, weil sie mit
   `currentColor` und den Themenvariablen arbeiten.

   Alle liegen auf `body::after` mit `pointer-events: none` ueber der Seite,
   aber unter dem Inhalt. Die Deckkraft bleibt niedrig: Eine Textur, die man
   bemerkt, lenkt vom Regal ab. */

body[class*="skoutz-textur--"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Papier — feine unregelmaessige Faserung. */
body.skoutz-textur--papier::after {
    background-image:
        repeating-linear-gradient(97deg, rgb(0 0 0 / 2%) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(3deg, rgb(0 0 0 / 1.5%) 0 1px, transparent 1px 7px);
}

/* Blattwerk — sich ueberlagernde Rundungen wie Laub im Gegenlicht. */
body.skoutz-textur--blattwerk::after {
    background-image:
        radial-gradient(ellipse 60px 22px at 20% 30%, rgb(255 255 255 / 4%), transparent 60%),
        radial-gradient(ellipse 80px 26px at 70% 65%, rgb(255 255 255 / 3%), transparent 60%),
        radial-gradient(ellipse 50px 18px at 45% 85%, rgb(255 255 255 / 3%), transparent 60%);
    background-size: 340px 280px;
}

/* Stein — grobe Blockfugen. */
body.skoutz-textur--stein::after {
    background-image:
        linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px);
    background-size: 120px 64px;
}

/* Regen — schraege Striche, wie Tropfen an der Scheibe. */
body.skoutz-textur--regen::after {
    background-image:
        repeating-linear-gradient(105deg,
            transparent 0 12px,
            rgb(255 255 255 / 5%) 12px 13px,
            transparent 13px 26px);
}

/* Nebel — grosse weiche Schwaden, absichtlich unscharf. */
body.skoutz-textur--nebel::after {
    background-image:
        radial-gradient(ellipse 60% 40% at 30% 20%, rgb(255 255 255 / 5%), transparent),
        radial-gradient(ellipse 50% 35% at 75% 70%, rgb(255 255 255 / 4%), transparent);
}

/* Samt — weicher Schimmer, der zur Mitte hin heller wird. */
body.skoutz-textur--samt::after {
    background-image:
        repeating-linear-gradient(90deg, rgb(255 255 255 / 2.5%) 0 2px, transparent 2px 6px),
        radial-gradient(ellipse 70% 55% at 50% 40%, rgb(255 255 255 / 5%), transparent 70%);
}

/* Sterne — Punkte in drei Groessen, unregelmaessig verteilt. */
body.skoutz-textur--sterne::after {
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgb(255 255 255 / 45%), transparent),
        radial-gradient(1px 1px at 65% 15%, rgb(255 255 255 / 35%), transparent),
        radial-gradient(1px 1px at 40% 70%, rgb(255 255 255 / 30%), transparent),
        radial-gradient(2px 2px at 85% 55%, rgb(255 255 255 / 40%), transparent),
        radial-gradient(1px 1px at 10% 85%, rgb(255 255 255 / 30%), transparent);
    background-size: 420px 380px;
}

/* Punkte — freundliches Raster fuer das helle Kinder-Thema. */
body.skoutz-textur--punkte::after {
    background-image: radial-gradient(2.5px 2.5px at 50% 50%, rgb(0 0 0 / 4%), transparent);
    background-size: 34px 34px;
}

/* Holz — laengs verlaufende Maserung. */
body.skoutz-textur--holz::after {
    background-image:
        repeating-linear-gradient(88deg,
            rgb(0 0 0 / 2.5%) 0 2px,
            transparent 2px 9px,
            rgb(0 0 0 / 1.5%) 9px 10px,
            transparent 10px 21px);
}

/* Wer Bewegungsreduzierung eingestellt hat, bekommt keine Muster mit
   feiner Streifung — sie flimmern beim Scrollen. */
@media (prefers-reduced-motion: reduce) {
    body.skoutz-textur--regen::after,
    body.skoutz-textur--holz::after,
    body.skoutz-textur--papier::after {
        background-image: none;
    }
}

/* --- Federstand in der Regal-Seitenspalte -------------------------------- */

.skoutz-federn {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--skoutz-regal-akzent, #B8562F) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--skoutz-regal-akzent, #B8562F) 30%, transparent);
}

.skoutz-federn__titel {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.2rem;
    font-size: 1.4rem;
    line-height: 1.1;
}

.skoutz-federn__titel span {
    font-size: 1rem;
    font-weight: 600;
}

.skoutz-federn__stufe {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.skoutz-federn__stufe small {
    font-weight: 400;
    opacity: 0.75;
}

/* Der Balken misst den Weg ZWISCHEN zwei Stufen, nicht von null — sonst
   steht jemand mit 480 von 500 Federn bei 96 Prozent und sieht sich nicht
   vorankommen, obwohl ihm nur zwei Bücher fehlen. */
.skoutz-federn__balken {
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 15%, transparent);
}

.skoutz-federn__balken span {
    display: block;
    height: 100%;
    background: var(--skoutz-regal-akzent, #B8562F);
    border-radius: 3px;
}

.skoutz-federn__ziel {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
}

.skoutz-federn__verlauf {
    margin-top: 0.8rem;
    font-size: 0.85rem;
}

.skoutz-federn__verlauf summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.skoutz-federn__verlauf ul {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.skoutz-federn__verlauf b {
    display: inline-block;
    min-width: 2.6em;
}

.skoutz-federn__hinweis {
    margin: 0.8rem 0 0;
    font-size: 0.82rem;
    opacity: 0.75;
    line-height: 1.4;
}

/* --- Federhinweis an der Bewertungsmaske ---------------------------------
   Er steht vor der Kurve, nicht darunter: Die Entscheidung, ob man ein Buch
   bewertet, faellt vorher. */

.skoutz-vote__federn {
    margin: 0 0 .8rem;
    padding: .6rem .8rem;
    border-radius: .4rem;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
    border-left: 3px solid var(--wp--preset--color--primary);
    font-size: .95rem;
    line-height: 1.45;
}

/* Der Lueckenbonus darf auffallen — er ist die Lenkung, die den Katalog
   fuellt. Ein Buch ohne jede Bewertung soll sichtbar mehr wert sein als das
   zwanzigste Urteil ueber einen Bestseller. */
.skoutz-vote__federn--bonus {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
    border-left-width: 5px;
}

.skoutz-vote__federn em {
    display: block;
    margin-top: .25rem;
    font-size: .88em;
    opacity: .8;
}

/* Tagesgrenze erreicht: ruhiger Ton statt Akzentfarbe — es ist kein Angebot,
   sondern eine Auskunft. */
.skoutz-vote__federn--grenze {
    background: color-mix(in srgb, currentColor 6%, transparent);
    border-left-color: color-mix(in srgb, currentColor 30%, transparent);
}

/* --- Bestenliste ---------------------------------------------------------
   Steht in der Seitenspalte unter „Zuletzt bewertet". Schmal, ruhig, ohne
   Pokale — es geht um Mitarbeit am Katalog, nicht um einen Wettkampf. */

.skoutz-rang-box {
    margin-top: 1.5rem;
}

.skoutz-rang__titel {
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}

.skoutz-rang {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rang;
}

.skoutz-rang__zeile {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem 0;
    font-size: .9rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.skoutz-rang__platz {
    font-variant-numeric: tabular-nums;
    opacity: .55;
    text-align: right;
}

/* Die ersten drei etwas kräftiger — ohne Medaillen, die Zahl reicht. */
.skoutz-rang__zeile:nth-child(-n+3) .skoutz-rang__platz {
    opacity: 1;
    font-weight: 700;
    color: var(--wp--preset--color--primary);
}

.skoutz-rang__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skoutz-rang__federn {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .8;
}

/* Der eigene Eintrag in der Liste — man soll sich sofort finden. */
.skoutz-rang__zeile.is-ich {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
    border-radius: .3rem;
    padding-inline: .4rem;
    font-weight: 600;
}

/* Der eigene Platz unterhalb der Liste: der wirksamste Teil des Bausteins. */
.skoutz-rang__ich {
    margin: .6rem 0 0;
    padding: .5rem .7rem;
    border-radius: .4rem;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
    font-size: .88rem;
    line-height: 1.45;
}

.skoutz-rang__hinweis {
    margin: .6rem 0 0;
    font-size: .85rem;
    opacity: .75;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   Dunkle Fassung
   ---------------------------------------------------------------------------

   Umgeschaltet wird die Palette, nicht das Stylesheet. Das ganze Theme rechnet
   ohnehin mit den Preset-Variablen — 303 Verwendungen gegen 32 fest
   eingetragene Farben —, also genuegt es, diese Variablen neu zu belegen.
   Alles andere folgt von selbst, auch kuenftige Flaechen.

   ZWEI SCHALTER, EINE PALETTE

   `[data-theme="dark"]` setzt die Wahl des Besuchers; `prefers-color-scheme`
   greift, solange er keine getroffen hat. Beide belegen dieselben Variablen —
   deshalb steht die Palette nur einmal da und wird zweimal aufgerufen.

   WARUM DIE FARBEN NICHT EINFACH UMGEDREHT SIND

   Aus Schwarz auf Creme wird nicht Creme auf Schwarz. Reines Weiss auf reinem
   Schwarz flimmert und ermuedet; die dunkle Flaeche traegt deshalb einen Rest
   Waerme aus dem hellen Entwurf, und der Text ist gebrochen statt weiss.

   Die Akzentfarben werden aufgehellt. Ein Rot, das auf Creme kraeftig wirkt,
   verschwindet auf dunklem Grund fast — Farben brauchen dort mehr Helligkeit,
   um gleich stark zu erscheinen. Das gilt besonders fuer die Genre-Farben, die
   nebeneinander unterscheidbar bleiben muessen. */

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --wp--preset--color--base: #17130F;
        --wp--preset--color--surface: #221C16;
        --wp--preset--color--contrast: #F6F1E9;
        --wp--preset--color--muted: #B6AB9C;
        --wp--preset--color--rule: #383028;
        --wp--preset--color--primary: #E07A4E;
        --wp--preset--color--secondary: #74A9AC;

        /* GEDAEMPFT, NICHT AUFGEDREHT.

           Der erste Anlauf hat die Genrefarben kraeftig aufgehellt, damit sie
           sich vom dunklen Grund abheben. Nebeneinander — acht Knoepfe in der
           Suche, jeder in seiner Farbe — ergab das ein Kaleidoskop, das vom
           Inhalt ablenkt.

           Jetzt sind sie heller als im Hellen, aber blasser: genug Helligkeit,
           um lesbar zu sein, wenig genug Saettigung, um nebeneinander ruhig zu
           wirken. Ihre Aufgabe ist zu unterscheiden, nicht zu leuchten. */
        --wp--preset--color--genre-krimi: #93A2BC;
        --wp--preset--color--genre-romance: #BE939F;
        --wp--preset--color--genre-fantasy: #A398B7;
        --wp--preset--color--genre-scifi: #8AA0A2;
        --wp--preset--color--genre-horror: #AE9082;
        --wp--preset--color--genre-kinder: #96AB92;
        --wp--preset--color--genre-sach: #B5A17E;
        --wp--preset--color--genre-erotik: #BE93AC;

        /* Schatten tragen im Dunkeln nicht — dort hebt Licht, nicht
           Dunkelheit. Statt eines schwarzen Schleiers eine feine helle
           Kante, die die Flaeche vom Grund abhebt. */
        --skoutz-shadow: 0 1px 0 rgba(255, 250, 240, 0.05),
                         0 8px 24px rgba(0, 0, 0, 0.45);
        --skoutz-shadow-lift: 0 1px 0 rgba(255, 250, 240, 0.08),
                              0 18px 40px rgba(0, 0, 0, 0.55);

    /* Dunkle Fassung: Das aufgehellte Orange traegt dunkle Schrift besser als
       helle. Die Markenleiste bekommt eine dunkle Flaeche, und die schwarze
       Wortmarke darauf wird umgekehrt. */
    --skoutz-auf-primary: #17130F;
    --skoutz-brandbar-grund: #221C16;
    --skoutz-brandbar-marke: invert(1);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --wp--preset--color--base: #17130F;
    --wp--preset--color--surface: #221C16;
    --wp--preset--color--contrast: #F6F1E9;
    --wp--preset--color--muted: #B6AB9C;
    --wp--preset--color--rule: #383028;
    --wp--preset--color--primary: #E07A4E;
    --wp--preset--color--secondary: #74A9AC;

    /* GEDAEMPFT, NICHT AUFGEDREHT.

       Der erste Anlauf hat die Genrefarben kraeftig aufgehellt, damit sie
       sich vom dunklen Grund abheben. Nebeneinander — acht Knoepfe in der
       Suche, jeder in seiner Farbe — ergab das ein Kaleidoskop, das vom
       Inhalt ablenkt.

       Jetzt sind sie heller als im Hellen, aber blasser: genug Helligkeit,
       um lesbar zu sein, wenig genug Saettigung, um nebeneinander ruhig zu
       wirken. Ihre Aufgabe ist zu unterscheiden, nicht zu leuchten. */
    --wp--preset--color--genre-krimi: #93A2BC;
    --wp--preset--color--genre-romance: #BE939F;
    --wp--preset--color--genre-fantasy: #A398B7;
    --wp--preset--color--genre-scifi: #8AA0A2;
    --wp--preset--color--genre-horror: #AE9082;
    --wp--preset--color--genre-kinder: #96AB92;
    --wp--preset--color--genre-sach: #B5A17E;
    --wp--preset--color--genre-erotik: #BE93AC;

    --skoutz-shadow: 0 1px 0 rgba(255, 250, 240, 0.05),
                     0 8px 24px rgba(0, 0, 0, 0.45);
    --skoutz-shadow-lift: 0 1px 0 rgba(255, 250, 240, 0.08),
                          0 18px 40px rgba(0, 0, 0, 0.55);

    /* Dunkle Fassung: Das aufgehellte Orange traegt dunkle Schrift besser als
       helle. Die Markenleiste bekommt eine dunkle Flaeche, und die schwarze
       Wortmarke darauf wird umgekehrt. */
    --skoutz-auf-primary: #17130F;
    --skoutz-brandbar-grund: #221C16;
    --skoutz-brandbar-marke: invert(1);
}

/* Bilder im Dunkeln eine Spur zurueckgenommen: Ein Cover in voller
   Leuchtkraft neben gedaempftem Text sticht sonst heraus wie ein
   Scheinwerfer. Beim Darueberfahren kommt die volle Farbe zurueck. */
:root[data-theme="dark"] .skoutz-cover img,
:root[data-theme="dark"] .wp-block-post-featured-image img {
    filter: brightness(0.92) contrast(1.02);
    transition: filter var(--skoutz-fast) var(--skoutz-ease);
}

:root[data-theme="dark"] .skoutz-cover img:hover,
:root[data-theme="dark"] .wp-block-post-featured-image img:hover {
    filter: none;
}

/* Der Umschalter selbst */
.skoutz-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 px auf Tastschirmen (CLAUDE.md) */
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    line-height: 0;
    transition: background var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-theme-toggle:hover,
.skoutz-theme-toggle:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.skoutz-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sonne bei Dunkelheit, Mond bei Helligkeit — das Symbol zeigt, wohin es
   geht, nicht wo man ist. */
.skoutz-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .skoutz-theme-toggle__sun { display: block; }
:root[data-theme="dark"] .skoutz-theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skoutz-theme-toggle__sun { display: block; }
    :root:not([data-theme="light"]) .skoutz-theme-toggle__moon { display: none; }
}

/* Die Genre-Symbole in der dunklen Fassung.

   Sie sind schwarze Zeichnungen und auf dunklem Grund praktisch unsichtbar.
   Ein `filter: invert(1)` auf den Knopf schiede aus: Er traegt einen farbigen
   Rand, und der wuerde mitgedreht.

   Deshalb wird das Symbol nicht mehr als Bild gezeichnet, sondern als Maske
   ueber eine helle Flaeche gelegt — dann bestimmt die Textfarbe, wie es
   aussieht, und der Rand bleibt, was er ist. Das Symbol steht dafuer in einer
   Variablen und nicht direkt im `background-image`. */
.skoutz-genre-maske {
    position: relative;
}

:root[data-theme="dark"] .skoutz-minisuche__genres a {
    background-image: none;
}

/* Die grosse Suchmaske zeichnet ihr Symbol in einem eigenen Pseudo-Element
   (`.skoutz-genres__item--icon span::before`) statt im Hintergrund des
   Knopfes. Dort genuegt deshalb die Maske an derselben Stelle — ein zweites
   Pseudo-Element gaebe es dort ohnehin nicht. */
:root[data-theme="dark"] .skoutz-genres__item--icon span::before {
    background-image: none;
    background-color: var(--wp--preset--color--contrast);
    -webkit-mask: var(--skoutz-genre-icon) center / contain no-repeat;
    mask: var(--skoutz-genre-icon) center / contain no-repeat;
    opacity: .85;
}

:root[data-theme="dark"] .skoutz-minisuche__genres a::after {
    content: "";
    position: absolute;
    inset: 22%;
    background: var(--wp--preset--color--contrast);
    -webkit-mask: var(--skoutz-genre-icon) center / contain no-repeat;
    mask: var(--skoutz-genre-icon) center / contain no-repeat;
    opacity: .85;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skoutz-minisuche__genres a {
        background-image: none;
    }

    :root:not([data-theme="light"]) .skoutz-genres__item--icon span::before {
        background-image: none;
        background-color: var(--wp--preset--color--contrast);
        -webkit-mask: var(--skoutz-genre-icon) center / contain no-repeat;
        mask: var(--skoutz-genre-icon) center / contain no-repeat;
        opacity: .85;
    }

    :root:not([data-theme="light"]) .skoutz-minisuche__genres a::after {
        content: "";
        position: absolute;
        inset: 22%;
        background: var(--wp--preset--color--contrast);
        -webkit-mask: var(--skoutz-genre-icon) center / contain no-repeat;
        mask: var(--skoutz-genre-icon) center / contain no-repeat;
        opacity: .85;
    }
}

/* Die Knöpfe brauchen einen Bezugspunkt für das Pseudo-Element. */
.skoutz-minisuche__genres a {
    position: relative;
}

/* Die Wortmarke in der Markenleiste wird als eigene Datei getauscht
   (functions.php), nicht gefiltert — bei ihr verdirbt eine Umkehr den
   Farbton. */

/* Der Umschalter im Benutzermenue sieht aus wie die Zeilen daneben — er ist
   ein Knopf, weil er etwas tut statt irgendwohin zu fuehren, aber das ist
   eine Frage der Technik und keine der Gestaltung. */
.skoutz-account__theme {
    display: flex;
    align-items: center;
    gap: .6em;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.skoutz-account__theme svg {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .75;
}

.skoutz-account__theme { justify-content: space-between; }
.skoutz-account__theme:hover { color: var(--wp--preset--color--primary); }

.skoutz-account__theme-label {
    display: flex;
    align-items: center;
    gap: .6em;
}

/* Der Kippschalter. Seine Stellung liest sich aus [data-theme] am
   Wurzelelement ab — deshalb kommt er ohne eigenen Zustand aus. */
.skoutz-switch {
    flex: none;
    width: 34px;
    height: 20px;
    padding: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 22%, transparent);
    transition: background var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-switch > span {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--wp--preset--color--base);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    transition: transform var(--skoutz-fast) var(--skoutz-ease);
}

:root[data-theme="dark"] .skoutz-switch {
    background: var(--wp--preset--color--primary);
}

:root[data-theme="dark"] .skoutz-switch > span {
    transform: translateX(14px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skoutz-switch {
        background: var(--wp--preset--color--primary);
    }

    :root:not([data-theme="light"]) .skoutz-switch > span {
        transform: translateX(14px);
    }
}

/* Buchtitel in Genrefarbe sind in der dunklen Fassung schwer zu lesen: Die
   gedaempften Toene tragen als Flaeche, aber nicht als Schrift. Titel bekommen
   deshalb die normale Textfarbe und behalten die Genrefarbe nur als Akzent an
   der Kante. */
:root[data-theme="dark"] .skoutz-card__title a,
:root[data-theme="dark"] .skoutz-result__title a {
    color: var(--wp--preset--color--contrast);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skoutz-card__title a,
    :root:not([data-theme="light"]) .skoutz-result__title a {
        color: var(--wp--preset--color--contrast);
    }
}

/* ---------------------------------------------------------------------------
   Anmelden im Overlay
   ---------------------------------------------------------------------------

   `<dialog>` statt eines nachgebauten Kastens: Der Browser bringt alles mit,
   was ein solches Fenster braucht und was von Hand regelmaessig vergessen
   wird — die Bedienung mit Escape, das Festhalten des Tastaturfokus im
   Fenster, und die Sperre fuer alles dahinter.
   --------------------------------------------------------------------------- */

.skoutz-dialog {
    width: min(24rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: var(--skoutz-radius);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    box-shadow: var(--skoutz-shadow-lift);
}

.skoutz-dialog::backdrop {
    background: rgba(20, 16, 12, .55);
    backdrop-filter: blur(2px);
}

.skoutz-dialog__schliessen { position: absolute; top: .35rem; right: .35rem; margin: 0; }

.skoutz-dialog__schliessen button {
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--wp--preset--color--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.skoutz-dialog__schliessen button:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.skoutz-dialog__titel {
    margin: 0;
    padding: 1.4rem 1.5rem .2rem;
    font-size: 1.25rem;
}

.skoutz-dialog__form { padding: .8rem 1.5rem 1.5rem; }

.skoutz-dialog__feld { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .9rem; }

.skoutz-dialog__feld label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--wp--preset--color--muted);
}

.skoutz-dialog__feld input {
    padding: .6rem .7rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 6px;
    background: var(--wp--preset--color--surface);
    color: inherit;
    font: inherit;
    /* 16 px, sonst zoomt iOS beim Hineintippen in das Feld. */
    font-size: 16px;
}

.skoutz-dialog__feld input:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 1px;
}

.skoutz-dialog__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    margin: 0 0 1.1rem;
}

.skoutz-dialog__merken { display: inline-flex; align-items: center; gap: .4em; }

.skoutz-dialog__senden {
    width: 100%;
    min-height: 44px;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: var(--skoutz-auf-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.skoutz-dialog__senden:disabled { opacity: .6; cursor: default; }

.skoutz-dialog__fehler {
    margin: 0 0 1rem;
    padding: .6rem .75rem;
    border-left: 3px solid #B23A2E;
    border-radius: 3px;
    background: color-mix(in srgb, #B23A2E 12%, transparent);
    font-size: .88rem;
}

.skoutz-dialog__wechsel {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--wp--preset--color--rule);
    font-size: .88rem;
    text-align: center;
    color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------------
   Registrierung
   --------------------------------------------------------------------------- */

.skoutz-register { max-width: 26rem; }

.skoutz-register__form { display: flex; flex-direction: column; gap: 1rem; }

.skoutz-register__feld { display: flex; flex-direction: column; gap: .3rem; margin: 0; }

.skoutz-register__feld label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--wp--preset--color--muted);
}

.skoutz-register__feld input {
    padding: .65rem .75rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 6px;
    background: var(--wp--preset--color--surface);
    color: inherit;
    font: inherit;
    /* 16 px, sonst zoomt iOS beim Hineintippen. */
    font-size: 16px;
}

.skoutz-register__feld input:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 1px;
}

.skoutz-register__hinweis {
    font-size: .8rem;
    color: var(--wp--preset--color--muted);
    line-height: 1.4;
}

/* Das Feld, das nur Maschinen ausfuellen.

   Nicht `display:none` allein: Manche Programme lesen das Stylesheet und
   ueberspringen offensichtlich Verborgenes. Aus dem Bild geschoben, ohne Platz
   und ohne Hoehe, bleibt es fuer sie ein gewoehnliches Feld — waehrend es fuer
   Menschen und Vorleseprogramme (aria-hidden am Element) nicht existiert. */
.skoutz-register__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skoutz-register__rechtliches,
.skoutz-register__wechsel {
    font-size: .85rem;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

.skoutz-register__wechsel {
    padding-top: 1rem;
    border-top: 1px solid var(--wp--preset--color--rule);
}

.skoutz-register__senden {
    width: 100%;
    min-height: 44px;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: var(--skoutz-auf-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.skoutz-register__meldung {
    padding: .7rem .85rem;
    border-radius: 6px;
    border-left: 3px solid;
    font-size: .9rem;
    margin: 0 0 1.2rem;
}

.skoutz-register__meldung--ok {
    border-color: #3F6B4A;
    background: color-mix(in srgb, #3F6B4A 12%, transparent);
}

.skoutz-register__meldung--fehler {
    border-color: #B23A2E;
    background: color-mix(in srgb, #B23A2E 12%, transparent);
}

/* Das Anmeldeformular als Seite trägt keinen Fensterrahmen. */
.skoutz-dialog--seite {
    max-width: 26rem;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
}

.skoutz-dialog--seite .skoutz-dialog__form { padding: 0; }

/* ---------------------------------------------------------------------------
   Magazin: Beiträge als Karten
   ---------------------------------------------------------------------------

   Die Liste war eine Spalte aus Titel, Datum und Anriss — richtig gesetzt,
   aber ohne Anlass, den Blick irgendwo hinzulenken. Zwei Karten je Reihe geben
   dem Bild wieder Gewicht: Bei einem Magazin über Bücher ist das Cover das
   Argument, nicht die Überschrift.

   Zwei und nicht drei, weil die Titel lang sind — „Adventskalender – Wintertage
   wie im Märchen von Sylvia Filz & Sigrid Konopatzki“ braucht Zeilenbreite,
   sonst zerfällt er in sechs Zeilen Flattersatz.
   --------------------------------------------------------------------------- */

/* Der Name „skoutz-magazin“ war schon vergeben — er traegt das dreispaltige
   Seitenlayout der Startseite. Ihn hier ein zweites Mal zu verwenden hat
   dieses Layout ueberschrieben: Aus 19/62/19 Prozent wurde ein Kartenraster,
   und die Startseite fiel auseinander. Das Kartenraster heisst deshalb
   „skoutz-beitraege“. */

.skoutz-beitrag {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: var(--skoutz-radius);
    background: var(--wp--preset--color--surface);
    /* Die Bewegung gehört auf die Karte, nicht auf ihre Teile: Sonst laufen
       Bild und Rahmen beim Überfahren minimal auseinander. */
    transition:
        transform var(--skoutz-fast) var(--skoutz-ease),
        box-shadow var(--skoutz-fast) var(--skoutz-ease),
        border-color var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-beitrag:hover,
.skoutz-beitrag:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--rule));
    box-shadow: var(--skoutz-shadow-lift);
}

/* Wer die Bewegung abbestellt hat, bekommt sie nicht — die Hervorhebung
   bleibt trotzdem, nur ohne Verschiebung. */
@media (prefers-reduced-motion: reduce) {
    .skoutz-beitrag { transition: border-color var(--skoutz-fast) linear; }
    .skoutz-beitrag:hover,
    .skoutz-beitrag:focus-within { transform: none; }
}

.skoutz-beitrag__bild { margin: 0; overflow: hidden; }

.skoutz-beitrag__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--skoutz-slow) var(--skoutz-ease);
}

/* Das Bild wandert eine Spur über den Rand hinaus statt zu wachsen —
   dadurch bleibt die Karte ruhig und nur ihr Inhalt bewegt sich. */
.skoutz-beitrag:hover .skoutz-beitrag__bild img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .skoutz-beitrag:hover .skoutz-beitrag__bild img { transform: none; }
}

.skoutz-beitrag__text {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.35rem;
    /* Der Textblock füllt die Karte, damit alle Karten einer Reihe gleich hoch
       enden — auch wenn ein Anriss kürzer ausfällt. */
    flex: 1;
}

.skoutz-beitrag__rubrik { margin: 0; font-size: .78rem; }

.skoutz-beitrag__rubrik a {
    display: inline-block;
    padding: .18em .7em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    font-weight: 600;
}

.skoutz-beitrag__rubrik a:hover { text-decoration: underline; }

.skoutz-beitrag__titel {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.25;
    text-wrap: balance;
}

.skoutz-beitrag__titel a { text-decoration: none; color: inherit; }
.skoutz-beitrag__titel a:hover { color: var(--wp--preset--color--primary); }

/* Die ganze Karte anklickbar machen, ohne das Markup zu verbiegen: Der
   Titel-Link spannt sich unsichtbar über die Karte. Der Verweis auf die
   Rubrik liegt darüber und bleibt einzeln erreichbar. */
.skoutz-beitrag__titel a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.skoutz-beitrag { position: relative; }
.skoutz-beitrag__rubrik { position: relative; z-index: 1; }

.skoutz-beitrag__datum {
    margin: 0;
    font-size: .8rem;
    color: var(--wp--preset--color--muted);
}

.skoutz-beitrag__anriss {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--wp--preset--color--muted);
}

.skoutz-beitrag__anriss .wp-block-post-excerpt__more-text { display: none; }

/* DAS RASTER RICHTET SICH NACH DEM PLATZ, NICHT NACH EINER ZAHL.

   Zuerst standen hier zwei feste Spalten. Das ging schief, sobald die Liste in
   einer schmalen Spalte steht — auf der Startseite hat sie links und rechts
   je eine Seitenspalte neben sich. Zwei Karten quetschten sich dort auf je
   zwölf Zentimeter, und die Titel brachen mitten im Wort um: „Proban d 63 –
   Medizi n- Thrille r“.

   `auto-fit` mit einer Mindestbreite dreht die Frage um: Passen zwei Karten
   nebeneinander, gibt es zwei; sonst eine. Dieselbe Regel trägt damit die
   breite Archivseite und die schmale Mittelspalte. */
/* SO VIELE KARTEN, WIE PLATZ HABEN — HOECHSTENS VIER.

   Der Weg dahin ging einmal hin und zurueck, und das ist die Lehre daraus:
   Erst standen zwei feste Spalten da, die in der schmalen Mittelspalte
   zerquetschten. Dann fuellte `auto-fit` jede Breite auf, was vier Karten
   ergab — dem Projektinhaber gefiel das, mir schien es von der Absprache
   abzuweichen, und ich habe auf zwei begrenzt. Zwei sind auf einem breiten
   Schirm aber zu wuchtig.

   Also wieder `auto-fit`, jetzt mit Absicht: Die Mindestbreite bestimmt, wie
   viele nebeneinander passen, und der Deckel bei vier verhindert, dass auf
   sehr breiten Schirmen Briefmarken daraus werden. In der schmalen
   Mittelspalte bleibt es von selbst bei einer oder zwei — dafuer ist keine
   Sonderregel noetig, das Raster rechnet es aus. */
.skoutz-beitraege,
.skoutz-articles {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)) !important;
    gap: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    align-items: stretch;
}

/* ARCHIV UND STARTSEITE BRAUCHEN VERSCHIEDENE RASTER.

   Auf der Startseite steht die Liste in der Mittelspalte, links und rechts
   flankiert von Widgets. Dort sind vier Karten richtig — sie haben zusammen
   siebzig Prozent der Breite und werden nicht schmaler als nötig.

   Auf den Archivseiten gibt es diese Spalten nicht: Die Liste haette die
   ganze Seite. Vier Karten ueber die volle Breite sind dort nicht grosszuegig,
   sondern schmal — die Titel brachen wieder mitten im Wort um. Deshalb
   bekommen diese Seiten dieselbe Aufteilung wie die Startseite, nur ohne
   Widgets: fuenfzehn Prozent Rand auf jeder Seite, siebzig Prozent Inhalt,
   und darin zwei Karten. */
.skoutz-liste > * {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.skoutz-liste .skoutz-beitraege {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100%;
}

/* Unter der Breite, ab der zwei Karten nebeneinander noch tragen, faellt
   beides zusammen: voller Platz und eine Spalte. */
@media (max-width: 60rem) {
    .skoutz-liste > * { max-width: 100%; }
    .skoutz-liste .skoutz-beitraege {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Auf sehr breiten Schirmen bleibt es auch auf der Startseite bei vier. */
@media (min-width: 110rem) {
    .skoutz-articles {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Lange Wörter dürfen brechen, aber erst als letztes Mittel — nicht
   zeichenweise, solange die Zeile noch trägt. */
.skoutz-beitrag__titel,
.skoutz-article .wp-block-post-title {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ---------------------------------------------------------------------------
   Blättern über der Liste
   ---------------------------------------------------------------------------

   Bei 376 Seiten ist der Weg nach unten weit — man scrollt an zwölf Karten
   vorbei, nur um auf Seite 2 zu kommen, und danach wieder hoch. Oben steht
   die Leiste deshalb ein zweites Mal.

   Sie trägt dieselbe Klasse wie die untere und erbt damit deren Aussehen. Der
   erste Anlauf hat es nachgebaut — mit dem Ergebnis, dass oben nackte Zahlen
   standen und unten Pillen. Zwei Fassungen desselben Bauteils laufen immer
   auseinander; der Modifikator ändert nur, was oben wirklich anders ist.
   --------------------------------------------------------------------------- */

.skoutz-pager--oben {
    /* Kein Grid über die volle Breite: Oben sitzt die Leiste neben der Suche
       und darf nur so breit sein wie ihr Inhalt. */
    display: flex !important;
    grid-template-columns: none;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: .85rem;
}

.skoutz-pager--oben .wp-block-query-pagination-previous,
.skoutz-pager--oben .wp-block-query-pagination-next,
.skoutz-pager--oben .wp-block-query-pagination-numbers {
    grid-column: auto;
    justify-self: auto;
}

/* „Neuere/Ältere" trägt oben nur Pfeile — die Wörter daneben machen die
   Zeile zu lang, und die Richtung sagt der Pfeil auch allein. */
.skoutz-pager--oben .wp-block-query-pagination-previous,
.skoutz-pager--oben .wp-block-query-pagination-next {
    font-size: 0;
}

.skoutz-pager--oben .wp-block-query-pagination-previous::before { content: "←"; font-size: 1rem; }
.skoutz-pager--oben .wp-block-query-pagination-next::after { content: "→"; font-size: 1rem; }

/* Die Werkzeuge stehen nebeneinander, nicht untereinander. `!important`,
   weil WordPress dem Gruppenblock seine eigene Layout-Klasse mitgibt. */
.skoutz-magkopf__werkzeuge {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin-left: auto;
}

/* Auf schmalen Schirmen nur vor und zurück — zwölf Ziffern drängen das
   Suchfeld sonst aus der Zeile. */
@media (max-width: 52rem) {
    .skoutz-pager--oben .wp-block-query-pagination-numbers { display: none; }
}


/* ---------------------------------------------------------------------------
   Werkzeuge über der Magazinliste in einer Zeile halten
   ---------------------------------------------------------------------------

   Blätterleiste und Suchfeld brachen untereinander, weil beide zusammen mehr
   Platz beanspruchten, als die Mittelspalte neben der Überschrift übrig lässt:
   die Suche allein wollte zwanzig Zentimeter. Sie darf jetzt schrumpfen, und
   die Leiste bleibt bei ihrer natürlichen Breite.
   --------------------------------------------------------------------------- */

.skoutz-magkopf__werkzeuge { flex-wrap: nowrap; }

/* Breit genug, dass der Platzhalter vollstaendig dasteht.

   Bei dreizehn Zentimetern wurde „Beitraege durchsuchen“ mitten im Wort
   abgeschnitten — ein Feld, dessen Beschriftung man raten muss, hilft
   niemandem. Zusammen mit dem kuerzeren Text passt es jetzt. */
.skoutz-magkopf__werkzeuge .skoutz-magsuche {
    flex: 0 1 17rem;
    min-width: 11rem;
}

.skoutz-magkopf__werkzeuge .skoutz-pager--oben { flex: 0 0 auto; }

/* Wird es wirklich eng, weicht zuerst die Blätterleiste — die Suche ist das
   häufiger gebrauchte Werkzeug, und unten steht ohnehin eine vollständige
   Leiste. Erst gehen die Ziffern, dann die Pfeile. */
@media (max-width: 76rem) {
    .skoutz-magkopf__werkzeuge .wp-block-query-pagination-numbers { display: none; }
}

@media (max-width: 62rem) {
    .skoutz-magkopf__werkzeuge .skoutz-pager--oben { display: none; }
}

/* ---------------------------------------------------------------------------
   Kopfzeile: nur die Suche begrenzen, nichts erzwingen
   ---------------------------------------------------------------------------

   Der erste Versuch hat der ganzen Zeile `nowrap` verordnet, damit die
   aufgeklappte Suche nicht in die zweite Zeile rutscht. Das Gegenteil trat
   ein: Weil nun nichts mehr umbrechen durfte, wurde die Navigation selbst
   zerlegt — „Über uns“ stand allein in einer zweiten Reihe.

   Umbrechen darf die Zeile also weiterhin. Begrenzt wird nur das eine
   Element, das zu viel wollte. */

.skoutz-topbar .wp-block-search {
    flex: 0 1 auto;
    min-width: 0;
}

.skoutz-topbar .wp-block-search__input {
    max-width: 11rem;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Der Suchknopf über der Magazinliste
   ---------------------------------------------------------------------------

   Er trug die Vorgaben des Browsers — grauer Kasten mit eckigen Ecken —,
   während jeder andere Knopf auf der Seite eine orange Pille ist. Ein
   einzelnes Bedienelement, das aus der Reihe fällt, sieht nicht nach Absicht
   aus, sondern nach Vergessen.
   --------------------------------------------------------------------------- */

.skoutz-magsuche button {
    white-space: nowrap;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--primary);
    color: var(--skoutz-auf-primary);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--skoutz-fast) var(--skoutz-ease);
}

.skoutz-magsuche button:hover {
    background: color-mix(in srgb, var(--wp--preset--color--primary) 85%, #000);
}

.skoutz-magsuche input[type="search"] {
    padding: .5rem .8rem;
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 999px;
    background: var(--wp--preset--color--base);
    color: inherit;
    font: inherit;
    font-size: .9rem;
}

.skoutz-magsuche input[type="search"]:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .skoutz-magsuche button,
    .skoutz-magsuche input[type="search"] { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Menüzeile: alles in eine Reihe
   ---------------------------------------------------------------------------

   Die Lupe rutschte in eine zweite Zeile, weil die Reihe schlicht zu voll ist:
   vier Symbole, sieben Menüpunkte mit Rautentrennern, Umschalter, Anmelden,
   Suche. Rechts daneben war zwar noch Fläche, aber der Inhaltsbereich endet
   bei 78 rem — dort ist Schluss.

   Statt weiter am Umbruch zu drehen (das hat schon einmal die Navigation
   zerlegt), wird die Zeile kompakter: engere Trenner, etwas weniger Abstand.
   Das kostet niemanden etwas und schafft genug Platz.

   Der eigentliche Grund bleibt allerdings bestehen — sieben Hauptpunkte sind
   viel. Wächst das Menü weiter, hilft nur, es zu kürzen.
   --------------------------------------------------------------------------- */

@media (min-width: 64rem) {
    .skoutz-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
        padding: 0 0.5rem;
    }

    .skoutz-topbar { gap: 0.7rem; }

    .skoutz-nav .wp-block-navigation-item a {
        font-size: 0.9rem;
        letter-spacing: 0.06em;
    }

    /* Die Symbole der sozialen Netze rücken zusammen — sie sind Beiwerk,
       nicht Navigation. */
    .skoutz-topbar__social { gap: 0.15rem !important; }
}

/* Zwischen 64 und 78 rem wird es besonders eng: Dort weichen die Trenner
   ganz, bevor etwas umbricht. */
@media (min-width: 64rem) and (max-width: 82rem) {
    .skoutz-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
        padding: 0 0.35rem;
    }

    .skoutz-nav .wp-block-navigation-item a { font-size: 0.85rem; }
}

/* ===========================================================================
   Schmale Schirme
   ===========================================================================

   Das Telefon ist der Regelfall, nicht der Sonderfall (CLAUDE.md). Was hier
   steht, ist deshalb keine Nachbesserung, sondern gehört zu jedem Bauteil
   dazu — gesammelt an einer Stelle, damit man es prüfen kann.
   =========================================================================== */

/* NICHTS LÄUFT WAAGERECHT AUS DEM BILD.

   Der häufigste Grund dafür sind lange Wörter ohne Trennstelle: Buchtitel wie
   „Weihnachtsanekdötchen“, Verlagsnamen, vor allem aber Adressen. Ein einziges
   solches Wort schiebt die ganze Seite breit, und dann wackelt sie beim
   Scrollen seitlich — der Fehler, den man auf dem Telefon sofort spürt und am
   Schreibtisch nie sieht. */
body { overflow-x: hidden; }

h1, h2, h3, h4,
p, li, dd, dt,
figcaption,
.skoutz-beitrag__titel,
.skoutz-card__title,
.skoutz-article .wp-block-post-title {
    overflow-wrap: break-word;
}

/* Adressen und Kennungen brechen notfalls mitten im Wort — bei ihnen ist
   das richtig, weil sie ohnehin niemand liest, sondern kopiert. */
code, .skoutz-embed__brand, textarea {
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    /* Der Kopf über der Magazinliste: Überschrift oben, Werkzeuge darunter
       über die volle Breite. Nebeneinander bliebe für beide zu wenig. */
    .skoutz-magkopf { flex-direction: column; align-items: stretch; }
    .skoutz-magkopf__werkzeuge { margin-left: 0; }
    .skoutz-magkopf__werkzeuge .skoutz-magsuche { flex: 1 1 auto; }

    /* Die untere Blätterleiste steht dreispaltig — auf dem Telefon reicht
       das nicht für Ziffern plus zwei Beschriftungen. */
    .skoutz-pager { gap: .5rem; }
    .skoutz-pager .wp-block-query-pagination-numbers { gap: .25rem; }

    /* Karten dürfen ihre Innenabstände nicht behalten, sonst bleibt für den
       Text kaum Zeile übrig. */
    .skoutz-beitrag__text,
    .skoutz-article__body { padding: .9rem 1rem 1.1rem; }
}

@media (max-width: 30rem) {
    /* Unter 480 px: Die Blätterleiste zeigt nur noch die aktuelle Seite und
       die Nachbarn — WordPress' Voreinstellung sind sieben Ziffern, die dort
       zweizeilig umbrechen. */
    .skoutz-pager .page-numbers:not(.current):not(.prev):not(.next):not(.dots) {
        display: none;
    }

    .skoutz-pager .page-numbers.current { min-width: 2.5rem; }
}

/* Bedienelemente bleiben auf Tastschirmen groß genug — 44 px ist das Maß,
   unter dem Treffer zur Glückssache werden. */
@media (pointer: coarse) {
    .skoutz-beitrag__rubrik a,
    .skoutz-article__cat a,
    .skoutz-pager a,
    .skoutz-pager .page-numbers {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}