/* Der Verleih im Frontend.
   Alle Klassen mit dem Vorsatz pjl-, keine Regeln auf Elemente des Themes.
   Farben und Schriften kommen bewusst vom Theme, damit der Katalog nicht wie
   ein Fremdkörper wirkt — gesetzt werden nur Abstände und Anordnung. */

.pjl-katalog {
    --pjl-rand: #d9dce0;
    /* Deutlich dunkler als zuvor (#646970). Der alte Wert war auf Weiß gerade
       noch lesbar, auf den hellgrauen Kästen im Formular nicht mehr. */
    --pjl-leise: #4a4f54;
    --pjl-text: #1d2327;

    /* Grundgröße für alles im Katalog. Sie stand vorher nirgends, sodass jeder
       Abschnitt des Themes eine andere mitbrachte — mal 15, mal 16 Pixel, und
       am Rechner wirkte alles gedrängt. Ein Wert an einer Stelle, an dem sich
       die übrigen orientieren. */
    font-size: 1.14rem;
    line-height: 1.65;

    /* Die Textfarbe ausdrücklich. Sonst erbt jeder Abschnitt die des Themes —
       im Formular standen Hilfetexte in Orange und Verweise in einem hellen
       Blau, beides auf hellgrauem Grund kaum zu lesen. */
    color: var(--pjl-text);
}

/* Auch alles darin, sonst greifen die Farbregeln des Themes für einzelne
   Elemente weiter durch. Farben, die etwas bedeuten — Rot für belegt, Gelb
   für knapp — setzen ihre eigene und stehen weiter unten. */
.pjl-katalog .pjl-zeile-name,
.pjl-katalog .pjl-block-titel,
.pjl-katalog .pjl-feld-name,
.pjl-katalog .pjl-gruppe-summary,
.pjl-katalog .pjl-korb,
.pjl-katalog .pjl-karte-titel { color: var(--pjl-text); }

/* Verweise im Katalog: dunkelblau statt der hellen Themefarbe. */
.pjl-katalog .pjl-karte-link,
.pjl-katalog .pjl-zeile-mehr,
.pjl-katalog .pjl-zurueck-link {
    color: rgba(var(--pjl-dunkel), 1);
    text-decoration-color: rgba(var(--pjl-dunkel), .4);
}

/* Das Dunkelblau der Vereinsseite. Als Variable am Wurzelelement, weil die
   Vollbildansicht außerhalb von .pjl-katalog liegt — dort greifen die Werte
   von oben nicht. Wer eine andere Farbe will, überschreibt hier eine Zeile. */
:root { --pjl-dunkel: 4, 12, 79; }

.pjl-katalog * { box-sizing: border-box; }

/* Gruppen */
.pjl-gruppe { margin-bottom: 3rem; }
.pjl-gruppe-titel { margin-bottom: .4rem; font-size: 1.9rem; }
.pjl-gruppe-text { margin-bottom: 1.2rem; color: var(--pjl-leise); }

/* Kacheln.

   Die Spaltenzahl kommt aus dem Shortcode und stand vorher nur als Attribut
   im HTML, ohne Wirkung — `auto-fill` hat sie schlicht übergangen. Jetzt
   entscheidet sie wirklich, und `spalten="1"` oder `"2"` macht die Kacheln
   entsprechend größer.

   `minmax(0, 1fr)` statt `1fr`: Ohne die Null wird eine Spalte nie schmaler
   als ihr Inhalt, und ein langer Name sprengt dann das Raster. */
.pjl-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}

.pjl-katalog[data-spalten="1"] .pjl-karten { grid-template-columns: minmax(0, 1fr); }
.pjl-katalog[data-spalten="2"] .pjl-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjl-katalog[data-spalten="3"] .pjl-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pjl-katalog[data-spalten="4"] .pjl-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auf schmalen Bildschirmen zählt der Platz mehr als die Vorgabe. Vier
   Kacheln auf einem Handy wären Briefmarken. */
@media (max-width: 900px) {
    .pjl-katalog[data-spalten="3"] .pjl-karten,
    .pjl-katalog[data-spalten="4"] .pjl-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .pjl-karten,
    .pjl-katalog[data-spalten="2"] .pjl-karten,
    .pjl-katalog[data-spalten="3"] .pjl-karten,
    .pjl-katalog[data-spalten="4"] .pjl-karten { grid-template-columns: minmax(0, 1fr); }
}

.pjl-karte {
    display: flex; flex-direction: column;
    border: 1px solid var(--pjl-rand);
    border-radius: .6rem;
    overflow: hidden;
    background: #fff;
}

.pjl-karte-bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f6f7f7; }
.pjl-foto-kachel { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne Bild bleibt die Kachel gleich hoch — sonst rutscht die Reihe */
.pjl-kein-bild { display: block; width: 100%; height: 100%; background: #f0f0f1; }

/* Schriftgrößen in der Kachel.

   Sie standen deutlich unter dem, was das Theme sonst verwendet — auf einer
   Kachel, die ein Drittel der Seite einnimmt, wirkt ein Name in 1,1 rem
   verloren. Alles eine Stufe hoch; die Zahlenwerte stehen absolut, damit sie
   nicht von einer geerbten Schriftgröße abhängen, die je nach Abschnitt
   anders ausfällt. */
.pjl-karte-text { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.pjl-karte-titel { margin: 0; font-size: 1.45rem; line-height: 1.3; font-weight: 700; }
.pjl-karte-link { text-decoration: none; }
.pjl-kurz { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.pjl-bestand { margin: 0; font-size: 1.02rem; }
/* Der Knopf immer unten, egal wie lang der Text darüber ist */
.pjl-karte-text .pjl-knopf { margin-top: auto; }

/* Die Ausführungen auf der Kachel — Name links, Menge rechts */
.pjl-varianten-kurz { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.pjl-varianten-kurz-zeile {
    display: flex; justify-content: space-between; gap: .6rem;
    padding: .15rem 0;
}
.pjl-varianten-kurz .pjl-bestand { white-space: nowrap; }

.pjl-zusatz { display: block; font-size: 1rem; }

/* Knöpfe */
/* Knöpfe.

   Alle Eigenschaften ausdrücklich gesetzt, auch beim Überfahren — Themes
   bringen eigene Regeln für `button:hover` mit, und `currentColor` als
   Rahmenfarbe verschwand dabei mitsamt dem Rahmen. `!important` bleibt
   trotzdem draußen: Die Regeln sind spezifisch genug, und wer das Aussehen
   im Theme anpassen will, soll es können. */
.pjl-knopf {
    display: inline-block;
    padding: .7rem 1.3rem;
    border: 1px solid #c9ccd0;
    border-radius: .35rem;
    background: #fff;
    color: inherit;
    font: inherit; font-size: 1.08rem; line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s, border-color .15s;
}

.pjl-katalog .pjl-knopf:hover,
.pjl-katalog .pjl-knopf:focus {
    background: #f0f0f1;
    border-color: #8c8f94;
    color: inherit;
    text-decoration: none;
}

.pjl-knopf-leise { color: var(--pjl-leise); }

/* Gemerktes deutlich gefüllt — vorher unterschied es nur die Schriftstärke,
   und das sieht man auf einer Kachel kaum. */
.pjl-katalog .pjl-merken.ist-gemerkt {
    background: #1d2327;
    border-color: #1d2327;
    color: #fff;
    font-weight: 600;
}
.pjl-katalog .pjl-merken.ist-gemerkt:hover,
.pjl-katalog .pjl-merken.ist-gemerkt:focus {
    background: #2c3338;
    border-color: #2c3338;
    color: #fff;
}

/* Merkleiste — am unteren Rand, über allem.
   Unten statt oben, weil dort im Katalog nichts liegt und weil die Hand am
   Handy ohnehin dort ist. `fixed`, damit sie beim Scrollen durch einen langen
   Katalog stehen bleibt: Wer unten angekommen ist, soll nicht erst wieder
   hochscrollen, um zur Anfrage zu kommen. */
.pjl-merkleiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Die Stapelung der drei schwebenden Dinge am unteren Rand ist hier
       ausdrücklich festgelegt, statt sie dem Zufall zu überlassen:

           999   diese Leiste
          1000   das reCAPTCHA-Zeichen
          1100   der Nach-oben-Knopf

       Vorher stand hier 9999 — damit lag die Leiste über beiden, und beide
       waren nicht mehr anzuklicken. Die Reihenfolge folgt der Dringlichkeit:
       Der Nach-oben-Knopf muss immer erreichbar sein, das Zeichen von Google
       muss sichtbar bleiben (das verlangen dessen Nutzungsbedingungen), und
       die Leiste tritt hinter beides zurück. */
    z-index: 999;
    /* Großzügig am Rechner: Die Leiste ist der Weg zur Anfrage und damit das
       Wichtigste auf der Katalogseite. Zu schmal wirkt sie wie ein
       Hinweisstreifen, den man wegklickt. Am Handy wird sie unten wieder
       schlanker — dort zählt jeder Millimeter Bildschirm. */
    /* Der seitliche Abstand steht als Variable da, weil die Merkliste ihn
       weiter unten wieder aufheben muss: Sie soll über die ganze Breite
       laufen, damit ihr Rollbalken am rechten Fensterrand sitzt und nicht
       irgendwo in der Fläche. Zwei getrennte Werte liefen beim nächsten
       Ändern auseinander, und dann stünde die Liste um ein paar Pixel
       versetzt. */
    --pjl-leiste-x: 1.2rem;
    padding: 1.15rem var(--pjl-leiste-x);
    background: #fff;
    border-top: 1px solid var(--pjl-rand);
    box-shadow: 0 -2px 12px rgba(0,0,0,.12);
}
.pjl-merkleiste-innen {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
/* Die beiden fremden Elemente über die Leiste schieben.

   **Verschoben, nicht nur überlagert.** Nur die Stapelung zu regeln hieße,
   dass eines von beidem verdeckt bleibt — der Nach-oben-Knopf säße dann
   mitten auf „Anfrage stellen". Mit dem Abstand liegen sie darüber und
   überlappen gar nicht erst.

   Die Höhe kommt aus `--pjl-leiste-hoehe`, gemessen von `verleih.js`: Am
   Handy bricht die Leiste in zwei Zeilen, ein fester Wert wäre auf der Hälfte
   der Geräte falsch.

   Regeln auf fremde Klassen sind sonst tabu — hier ist es der einzige Weg,
   weil beide ihre Lage selbst setzen und reCAPTCHA sogar unmittelbar im
   Element. Deshalb `!important`, und deshalb hängen die Regeln an
   `body.pjl-hat-korb`: Sie wirken **nur, solange die Leiste da ist**. Ohne
   gemerkte Sachen bleibt alles, wie das Theme es vorsieht.

   `transition` mit derselben Dauer wie das Erscheinen der Leiste, damit die
   Knöpfe mitwandern statt zu springen. */
body.pjl-hat-korb .grecaptcha-badge {
    z-index: 1000 !important;
    bottom: calc(var(--pjl-leiste-hoehe, 4.5rem) + 14px) !important;
    transition: bottom .2s ease;
}

body.pjl-hat-korb .scroll-top-right,
body.pjl-hat-korb #scroll-top,
body.pjl-hat-korb .ocean-scroll-top {
    z-index: 1100 !important;
    bottom: calc(var(--pjl-leiste-hoehe, 4.5rem) + 20px) !important;
    transition: bottom .2s ease;
}

/* Kein Abstand mehr nötig, wenn die beiden ohnehin darüber liegen — der Platz
   rechts in der Leiste kann so für die Knöpfe genutzt werden. */
.pjl-merkleiste-innen { padding-right: 1rem; }

/* Platz am Seitenende, damit die Leiste nichts verdeckt — sonst liegt sie
   über der Fußzeile und man kommt an deren Verweise nicht heran.

   Die Höhe misst `verleih.js` und legt sie in `--pjl-leiste-hoehe` ab. Der
   Rückfallwert greift, solange noch nicht gemessen wurde. */
body.pjl-hat-korb { padding-bottom: calc(var(--pjl-leiste-hoehe, 4.5rem) + 1rem); }
.pjl-merkinfo { display: flex; align-items: baseline; gap: .55rem; margin-right: auto; }
.pjl-merkaktionen { display: flex; align-items: center; gap: .7rem; }
.pjl-merkzahl { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.pjl-merktext { color: var(--pjl-leise); font-size: 1.15rem; }

/* Die Knöpfe in der Leiste größer als anderswo — sie sind der Abschluss des
   ganzen Vorgangs, und „Anfrage stellen" ist der wichtigste Knopf der Seite. */
.pjl-merkaktionen .pjl-knopf { padding: .75rem 1.6rem; font-size: 1.1rem; }
.pjl-merkaktionen .pjl-knopf:not(.pjl-knopf-leise) {
    background: #1d2327;
    border-color: #1d2327;
    color: #fff;
    font-weight: 600;
}
.pjl-katalog .pjl-merkaktionen .pjl-knopf:not(.pjl-knopf-leise):hover,
.pjl-katalog .pjl-merkaktionen .pjl-knopf:not(.pjl-knopf-leise):focus {
    background: #2c3338;
    border-color: #2c3338;
    color: #fff;
}

/* Am Handy: zwei Zeilen und schlanker.
   Steht bewusst NACH den Grundregeln — eine Media Query gewinnt nicht
   durch ihre Bedingung, sondern nur durch die Reihenfolge. Vorher stand
   sie davor und wurde von den Grundregeln überschrieben. */
@media (max-width: 600px) {
    /* Am Handy in zwei Zeilen: Text oben, Knöpfe darunter nebeneinander.
       Nebeneinander in einer Zeile blieben für die Knöpfe wenige Zentimeter,
       und „Anfrage stellen" bräche mitten im Wort um. */
    .pjl-merkleiste { --pjl-leiste-x: 1rem; padding: .8rem var(--pjl-leiste-x); }
    .pjl-merkleiste-innen { row-gap: .6rem; }
    .pjl-merkzahl { font-size: 1.5rem; }
    .pjl-merktext { font-size: 1.02rem; }
    .pjl-merkaktionen .pjl-knopf { padding: .65rem 1rem; font-size: 1rem; }
    .pjl-merkinfo { flex: 1 1 100%; margin-right: 0; }
    .pjl-merkaktionen { flex: 1 1 100%; }
    /* Die beiden Knöpfe teilen sich die Breite — nebeneinander in einer Zeile
       mit dem Text blieben ihnen wenige Zentimeter, und „Anfrage stellen"
       bräche mitten im Wort um. */
    .pjl-merkaktionen .pjl-knopf { flex: 1 1 0; }
}
.pjl-merkliste {
    list-style: none; margin: .8rem 0 0; padding: 0;

    /* **Die Liste wächst nicht mehr ins Unendliche.** Bei neun gemerkten
       Sachen füllte sie den halben Bildschirm, und „Anfrage stellen" schob
       sich mit ihr nach oben aus dem Blick — der Knopf, um den es geht.

       Kein `max-height` in Pixeln, sondern am Fenster gemessen: Am Handy im
       Querformat wären 300px schon fast alles, am großen Bildschirm zu wenig.
       `40vh` lässt immer noch etwas vom Katalog dahinter stehen, damit klar
       bleibt, dass die Leiste über der Seite liegt.

       `overscroll-behavior` hält das Scrollen in der Liste: Ohne die Angabe
       scrollt am Ende der Liste die Seite dahinter weiter, und man verliert
       die Stelle, an der man war. */
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Der Abstand der Leiste wird hier wieder aufgehoben und wandert in die
   Zeilen. **Warum der Umweg:** Bleibt der Abstand am Behälter, endet der
   Rollbalken davor — sichtbar irgendwo in der Fläche statt am Fensterrand,
   wo man ihn sucht. So läuft die Liste bis an den Rand, die Trennlinien
   ziehen durch, und der Text behält seinen Abstand trotzdem.

   „entfernen" gerät dabei nicht unter den Rollbalken: Er nimmt sich seinen
   Platz aus dem Inhaltsbereich, der Abstand der Zeile kommt danach. */
.pjl-merkliste { margin-left: calc(-1 * var(--pjl-leiste-x)); margin-right: calc(-1 * var(--pjl-leiste-x)); }
.pjl-merkliste-zeile {
    display: flex; justify-content: space-between; align-items: center;
    padding: .35rem var(--pjl-leiste-x); border-top: 1px solid var(--pjl-rand);
}
.pjl-merkliste .pjl-weg {
    border: 0; background: none; color: #b32d2e; cursor: pointer; font: inherit; font-size: .85rem;
}

/* Einzelansicht.

   Die Bilder nehmen etwas mehr als die Hälfte: Ein Gerät sieht man sich
   zuerst an, gelesen wird danach. Alles Übrige — Name, Knopf, Beschreibung,
   technische Angaben — steht in der rechten Spalte. Vorher lagen Beschreibung
   und Technik darunter über die ganze Breite; daneben blieb die halbe Seite
   leer, und die Zeilen wurden auf großen Bildschirmen unlesbar lang. */
.pjl-zurueck { margin-bottom: 1.2rem; }
.pjl-zurueck-link { text-decoration: none; }

.pjl-einzeln-oben {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 2.4rem;
    margin-bottom: 2rem;
    align-items: start;
}

/* Die Bilder bleiben beim Scrollen stehen — bei einer langen Beschreibung
   verliert man sonst den Bezug zum Gerät, über das man gerade liest. */
.pjl-bilder { position: sticky; top: 1.5rem; min-width: 0; }

.pjl-bild-gross { position: relative; margin: 0; }
.pjl-foto-gross {
    width: 100%; height: auto; display: block;
    border-radius: .6rem;
    border: 1px solid var(--pjl-rand);
    background: #f6f7f7;
}

/* Der Knopf zum Vergrößern liegt im Bild, nicht daneben — dort sucht man ihn,
   und daneben bräuchte es eine Zeile, die sonst leer bliebe. */
.pjl-lupe {
    position: absolute; right: .7rem; bottom: .7rem;
    width: 2.6rem; height: 2.6rem; padding: 0;
    border: 0; border-radius: .4rem;
    background: rgba(var(--pjl-dunkel), .8); color: #fff;
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    transition: background-color .15s;
}
.pjl-lupe:hover, .pjl-lupe:focus { background: rgba(var(--pjl-dunkel), .96); }

.pjl-bild-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.pjl-bild-klein {
    user-select: none;
    -webkit-user-select: none;
    padding: 0; border: 2px solid var(--pjl-rand); border-radius: .4rem;
    background: none; cursor: pointer; line-height: 0;
    overflow: hidden;
    transition: border-color .15s;
}
.pjl-bild-klein:hover, .pjl-bild-klein:focus { border-color: #8c8f94; }
/* Die gerade gezeigte Miniatur auszeichnen — sonst weiß man nach dem dritten
   Klick nicht mehr, wo man ist. */
.pjl-bild-klein.ist-aktiv { border-color: #1d2327; }
.pjl-foto-klein { width: 100px; height: 100px; object-fit: cover; display: block; }

/* Vollbild */
.pjl-vollbild {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    /* Dunkelblau statt Schwarz — dieselbe Familie wie der Banner der Seite.
       Ein schwarzer Schleier wirkt daneben wie ein fremdes Fenster. */
    background: rgba(var(--pjl-dunkel), .94);
    backdrop-filter: blur(3px);
}
.pjl-vollbild[hidden] { display: none; }
.pjl-vollbild-foto {
    max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: .4rem;
}
.pjl-vollbild-zu {
    position: absolute; top: 1rem; right: 1.4rem;
    width: 3rem; height: 3rem; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff;
    font-size: 1.8rem; line-height: 1; cursor: pointer;
    transition: background-color .15s;
}
.pjl-vollbild-zu:hover, .pjl-vollbild-zu:focus { background: rgba(255, 255, 255, .34); }

/* Die Pfeile liegen am Rand, außerhalb des Bildes — bei einem hohen Bild
   säßen sie sonst mitten drin und verdeckten gerade das, was man ansehen
   will. */
.pjl-vollbild-pfeil {
    user-select: none;
    -webkit-user-select: none;
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 3.4rem; height: 3.4rem; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .18); color: #fff;
    font-size: 2.2rem; line-height: 1; cursor: pointer;
    transition: background-color .15s;
}
.pjl-vollbild-pfeil:hover, .pjl-vollbild-pfeil:focus { background: rgba(255, 255, 255, .34); }
.pjl-vollbild-pfeil[hidden] { display: none; }
.pjl-vollbild-zurueck { left: 1rem; }
.pjl-vollbild-vor { right: 1rem; }

.pjl-vollbild-zaehler {
    position: absolute; bottom: 1.2rem; left: 50%;
    transform: translateX(-50%);
    margin: 0; padding: .35rem 1rem;
    background: rgba(255, 255, 255, .15); color: #fff;
    border-radius: 1rem; font-size: .95rem;
}
.pjl-vollbild-zaehler[hidden] { display: none; }

@media (max-width: 600px) {
    /* Am Handy kleiner und näher am Rand — dort wird ohnehin gewischt, die
       Pfeile sind nur die sichtbare Zusicherung, dass es weitergeht. */
    .pjl-vollbild { padding: 1rem; }
    .pjl-vollbild-pfeil { width: 2.8rem; height: 2.8rem; font-size: 1.8rem; }
    .pjl-vollbild-zurueck { left: .3rem; }
    .pjl-vollbild-vor { right: .3rem; }
}

@media (max-width: 780px) {
    .pjl-einzeln-oben { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    /* Am Handy nicht anheften: Das Bild nähme sonst dauerhaft den halben
       Bildschirm ein, und darunter bliebe für den Text nichts. */
    .pjl-bilder { position: static; }
}

.pjl-einzeln-titel { margin-top: 0; margin-bottom: .5rem; font-size: 2rem; line-height: 1.2; }
.pjl-kurz-gross { font-size: 1.15rem; margin-bottom: 1.2rem; }

/* Bestand und Merken zusammen in einem Kasten — sie gehören zusammen, und der
   Kasten hebt die einzige Handlung auf der Seite hervor. */
.pjl-wahlkasten {
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.8rem;
    background: #f6f7f7;
    border-radius: .5rem;
}
.pjl-bestand-gross { font-size: 1.05rem; margin-bottom: .8rem; }
.pjl-bestand-zahl { font-size: 1.5rem; font-weight: 700; color: inherit; }
.pjl-knopf-gross { padding: .8rem 1.8rem; font-size: 1.2rem; width: 100%; }
.pjl-beschreibung { margin: 2rem 0; }
.pjl-hinweis { color: var(--pjl-leise); font-style: italic; }

.pjl-varianten { margin: 1.4rem 0; }
/* Anhängsel sitzen unter der eigentlichen Wahl und sollen sich davon absetzen,
   ohne sie zu überstrahlen: eine Linie darüber und etwas Luft. Eine eigene
   Farbe hätte hier nichts zu bedeuten — Farben bleiben den Zuständen
   vorbehalten (belegt, knapp, Pflicht). */
.pjl-anhaengsel {
    margin-top: 1.8rem; padding-top: 1.2rem;
    border-top: 2px solid var(--pjl-rand);
}
.pjl-variante-zeile {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem 0; border-top: 1px solid var(--pjl-rand);
}
.pjl-variante-name { flex: 1; }

.pjl-dazu { margin-top: 1.6rem; }
.pjl-dazu-titel, .pjl-varianten-titel { margin-bottom: .3rem; }
.pjl-dazu-liste { margin: 0; padding-left: 1.2rem; }
.pjl-pflicht { font-size: .8rem; color: var(--pjl-leise); }

.pjl-technik { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.pjl-technik-titel { text-align: left; font-weight: 700; padding-bottom: .5rem; }
.pjl-technik-name, .pjl-technik-wert { padding: .5rem .6rem; border-bottom: 1px solid var(--pjl-rand); text-align: left; }
.pjl-technik-name { width: 40%; font-weight: 600; }

/* Formular.

   Breiter und mittig: Es steht allein auf seiner Seite, und links angeschlagen
   in einem breiten Inhaltsbereich sieht es aus, als fehle daneben etwas. */
.pjl-anfrage { max-width: 76rem; margin-left: auto; margin-right: auto; }
.pjl-formular { max-width: none; }

.pjl-feld { margin-bottom: 1.1rem; }
/* Die Beschriftungen ausdrücklich sichtbar. Manche Themes verstecken Labels in
   Formularen, weil sie mit Platzhaltern arbeiten — hier sind sie die einzige
   Beschriftung und müssen bleiben. */
.pjl-feld-name {
    display: block !important;
    position: static !important;
    width: auto !important; height: auto !important;
    margin-bottom: .35rem;
    clip: auto !important;
    font-weight: 700; font-size: 1.08rem;
    color: inherit;
}
/* Pflicht und Freiwilligkeit an der Beschriftung.

   **Zwei Merkmale statt eines.** Nur die Pflichtfelder zu markieren hilft
   wenig, wenn fast alle Pflicht sind — dann steht überall ein Stern und
   niemand liest ihn. Nur die freiwilligen zu markieren wäre ebenso
   mehrdeutig: Ein Feld ohne Vermerk könnte auch vergessen worden sein.

   Der Stern rot, aber nicht schreiend, und `aria-hidden` — für eine
   Vorlesesoftware steht die Pflicht schon im `required` des Feldes. */
.pjl-stern { color: #b32d2e; font-weight: 700; }
.pjl-optional {
    margin-left: .25rem;
    font-weight: 400; font-size: .82rem;
    color: var(--pjl-leise);
}

/* Die Legende über dem Formular. Gedämpft, aber nicht so klein, dass man sie
   für einen Rechtshinweis hält und überliest. */
.pjl-legende {
    margin: 0 0 1.2rem; padding: .7rem .9rem;
    background: #f4f5f7;
    border-left: 3px solid var(--pjl-rand);
    border-radius: .25rem;
    font-size: .95rem; color: var(--pjl-leise);
}

.pjl-eingabe {
    width: 100%; padding: .8rem .9rem;
    border: 1px solid var(--pjl-rand); border-radius: .35rem;
    font: inherit; background: #fff;
    color: inherit;
    box-sizing: border-box;
}
.pjl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .pjl-zwei { grid-template-columns: 1fr; } }
/* PLZ und Ort: Die Postleitzahl braucht wenig, der Ort viel. Zwei gleiche
   Spalten ließen neben der PLZ die halbe Zeile leer. */
.pjl-plzort { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
@media (max-width: 600px) { .pjl-plzort { grid-template-columns: 7rem 1fr; } }

/* Der eigene Abschnitt für die Lieferung */
.pjl-lieferkasten {
    padding: 1.4rem 1.6rem;
    margin: 1.6rem 0;
    background: #f4f5f7;
    border: 1px solid var(--pjl-rand);
    border-left: 4px solid rgba(var(--pjl-dunkel), .8);
    border-radius: .6rem;
}
.pjl-lieferkasten[hidden] { display: none; }
.pjl-lieferkasten .pjl-feld:last-of-type { margin-bottom: 0; }

/* Ein Knopf, der wie ein Verweis aussieht — er tut etwas Kleines und soll
   nicht mit dem Absenden konkurrieren. */
.pjl-textknopf {
    padding: 0; border: 0; background: none;
    color: rgba(var(--pjl-dunkel), 1);
    font: inherit; font-size: 1rem;
    text-decoration: underline; cursor: pointer;
}
.pjl-hilfe { margin: .45rem 0 0; font-size: 1.02rem; line-height: 1.5; }
.pjl-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }

/* Blöcke im Formular. Jeder Abschnitt in einem eigenen Kasten mit
   Überschrift — ein Formular als eine lange Reihe von Feldern liest sich wie
   ein Antrag, und genau das soll es nicht sein. */
.pjl-korb, .pjl-zeitkasten, .pjl-wunschkasten {
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.6rem;
    background: #f4f5f7;
    border: 1px solid var(--pjl-rand);
    border-radius: .6rem;
}
/* Die Zusammenfassung hebt sich vom Rest ab — sie ist das Ergebnis der
   Auswahl und soll beim Scrollen ins Auge fallen. */
.pjl-korb {
    border-left: 5px solid rgba(var(--pjl-dunkel), 1);
    background: #fff;
    font-size: 1.18rem;
}
.pjl-korb-leer { margin: 0; color: var(--pjl-leise); }
.pjl-block-titel {
    margin: 0 0 1rem; font-size: 1.4rem; font-weight: 700;
    padding-bottom: .5rem; border-bottom: 2px solid rgba(var(--pjl-dunkel), .15);
}
.pjl-zeitkasten .pjl-feld { margin-bottom: 0; }
.pjl-datumsmeldung {
    margin: .8rem 0 0; padding: .6rem .9rem;
    background: #fff; border-left: 4px solid #996800;
    border-radius: .3rem; font-size: 1rem;
}
.pjl-datumsmeldung[hidden] { display: none; }

.pjl-gruppe-wahl {
    border: 1px solid var(--pjl-rand); border-radius: .6rem;
    margin-bottom: .8rem; padding: .2rem 1.3rem 1rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.pjl-gruppe-wahl:not([open]) { padding-bottom: .2rem; }
.pjl-gruppe-wahl[open] { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.pjl-gruppe-wahl[open] { border-color: rgba(var(--pjl-dunkel), .35); }
.pjl-gruppe-summary {
    padding: 1rem 0; cursor: pointer;
    font-weight: 700; font-size: 1.3rem;
    /* Zweimal schnell auf- und zuklappen ist ein Doppelklick, und der markiert
       sonst Text — beim zweiten Mal zieht sich die Auswahl über die halbe
       Liste. Bei einem Element, das man zum Klicken anbietet, ist Markieren
       nicht gemeint. */
    user-select: none;
    -webkit-user-select: none;
}
/* Unterkategorien stehen jetzt **innerhalb** der Hauptkategorie als
   Zwischenüberschrift, nicht als eigener Aufklapper. Damit gehen sie mit auf,
   und man muss nicht zweimal klicken, um zu den Bartheken zu kommen. */
.pjl-untergruppe {
    margin: 1.4rem 0 .2rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(var(--pjl-dunkel), .18);
    font-size: 1.15rem;
    font-weight: 700;
}
/* Die erste Zwischenüberschrift braucht keine Linie, wenn direkt darüber die
   Kategorieüberschrift steht. */
.pjl-gruppe-summary + .pjl-untergruppe { margin-top: .4rem; padding-top: 0; border-top: 0; }

.pjl-auswahl-kopf { margin: 0 0 1rem; }

.pjl-zeile {
    display: flex; align-items: center; gap: 1.1rem;
    padding: .9rem .6rem; border-top: 1px solid var(--pjl-rand);
    border-radius: .4rem;
    transition: background-color .15s;
}
.pjl-zeile:first-child { border-top: 0; }
/* Bild, Name und Menge in einer Zeile. Das Bild hilft beim Wiedererkennen —
   „Eckteil" sagt weniger als ein Foto davon. */
.pjl-zeile-bild { flex: 0 0 auto; line-height: 0; }
.pjl-foto-zeile {
    width: 104px; height: 104px; object-fit: cover;
    border-radius: .4rem; display: block;
    border: 1px solid var(--pjl-rand);
}
.pjl-zeile-bild .pjl-kein-bild {
    width: 104px; height: 104px; border-radius: .4rem;
    background: #f0f0f1; display: block;
}
@media (max-width: 560px) {
    .pjl-foto-zeile, .pjl-zeile-bild .pjl-kein-bild { width: 72px; height: 72px; }
}

.pjl-zeile-name { flex: 1; font-size: 1.2rem; font-weight: 600; min-width: 0; }

.pjl-zeile-mehr {
    display: inline-block; margin-top: .25rem;
    font-size: 1rem; font-weight: 400;
    text-decoration: underline;
}
.pjl-zeile-mehr:hover { text-decoration: underline; }
.pjl-neuer-tab { font-size: .85em; }
/* Für Vorleseprogramme, nicht fürs Auge — ein Pfeil allein sagt nicht, dass
   sich ein neues Fenster öffnet. */
.pjl-versteckt-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Pflichtleistungen: angehakt und gesperrt */
.pjl-zeile-leistung.ist-pflicht { background: rgba(var(--pjl-dunkel), .05); cursor: default; }
.pjl-pflichtgrund {
    display: block; margin-top: .2rem;
    font-weight: 700; font-size: 1rem;
}
.pjl-pflichtgrund[hidden] { display: none; }

/* Was über eine Kopplung mitgeht — dieselbe Rolle wie die Pflichtbegründung
   bei den Leistungen, nur für Mengen. */
.pjl-mitgebucht {
    display: block; margin-top: .2rem;
    font-weight: 700; font-size: 1rem;
}
.pjl-mitgebucht[hidden] { display: none; }

.pjl-zeile-name .pjl-zusatz { font-size: .95rem; }

/* Ausgewähltes hervorheben — in einer langen Liste sieht man sonst nicht,
   was man schon angeklickt hat. */
.pjl-zeile.ist-gewaehlt {
    background: rgba(var(--pjl-dunkel), .07);
    box-shadow: inset 3px 0 0 rgba(var(--pjl-dunkel), .8);
}

/* Verfügbarkeit im gewählten Zeitraum */
.pjl-zeile.ist-belegt { opacity: .55; }
/* Nur die Schriftstärke — die Farben stehen bei den Sammelregeln am Ende,
   sonst gäbe es zwei Stellen, an denen dieselbe Farbe festgelegt wird. */
.pjl-zeile.ist-belegt .pjl-von-wie-vielen,
.pjl-zeile.ist-knapp .pjl-von-wie-vielen { font-weight: 700; }
/* Während des Abrufs gedämpft, damit klar ist, dass die Zahl gerade nicht
   stimmt — eine veraltete Zahl ist schlimmer als eine erkennbar wartende. */
.pjl-zeile.ist-laedt .pjl-von-wie-vielen { opacity: .4; }
.pjl-zeile-menge { display: flex; align-items: center; gap: .3rem; }
.pjl-mengenknopf {
    /* Dieselbe Überlegung: Wer schnell dreimal auf „+" klickt, will drei
       Stück, keine Textauswahl. */
    user-select: none;
    -webkit-user-select: none;
    width: 2.9rem; height: 2.9rem; padding: 0;
    border: 1px solid var(--pjl-rand); border-radius: .35rem;
    background: #fff; color: var(--pjl-text);
    font: inherit; font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.pjl-mengenknopf:hover { background: #f0f0f1; border-color: #8c8f94; }
.pjl-anzahl {
    width: 4.4rem; text-align: center; padding: .6rem;
    font-size: 1.2rem; font-weight: 700;
    border: 1px solid var(--pjl-rand); border-radius: .35rem;
    color: var(--pjl-text); background: #fff;
}
.pjl-von-wie-vielen {
    font-size: 1rem; white-space: nowrap; min-width: 7rem;
}
.pjl-zeile-leistung { cursor: pointer; }
.pjl-haken { width: auto; }

.pjl-knopfreihe { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.pjl-knopf-voll { flex: 1 1 100%; }
.pjl-anfrage .pjl-knopf-gross:not(.pjl-knopf-leise) {
    background: rgba(var(--pjl-dunkel), 1);
    border-color: rgba(var(--pjl-dunkel), 1);
    color: #fff; font-weight: 600;
}
.pjl-anfrage .pjl-knopf-gross:not(.pjl-knopf-leise):hover,
.pjl-anfrage .pjl-knopf-gross:not(.pjl-knopf-leise):focus {
    background: rgba(var(--pjl-dunkel), .85);
    border-color: rgba(var(--pjl-dunkel), .85);
    color: #fff;
}
.pjl-bedingungen {
    margin: 1.6rem 0; padding: 1rem;
    background: #f6f7f7; border-radius: .4rem; font-size: .92rem;
}

.pjl-meldung { padding: .8rem 1rem; border-radius: .4rem; margin-bottom: 1.2rem; }
.pjl-meldung-fehler { background: #fcf0f1; border-left: 4px solid #d63638; }
/* Der Schleier während des Absendens.

   Er liegt über dem Formular, nicht über der ganzen Seite: Was daneben steht —
   Kopfzeile, Menü — bleibt bedienbar, und der Blick bleibt dort, wo gerade
   etwas passiert. */
.pjl-anfrage { position: relative; }

.pjl-sendet {
    position: absolute; inset: 0;
    z-index: 30;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(2px);
    border-radius: .6rem;
}
.pjl-sendet[hidden] { display: none; }

.pjl-sendet-innen { text-align: center; padding: 2rem 1rem; }
.pjl-sendet-text { margin: 1rem 0 .3rem; font-size: 1.3rem; font-weight: 700; }
.pjl-sendet-klein { margin: 0; font-size: 1.02rem; }

/* Der Kreisel. Als reines CSS statt als Bild — er läuft weiter, während der
   Browser auf den Server wartet, und braucht keine zweite Datei. */
.pjl-kreisel {
    display: inline-block;
    width: 1.1em; height: 1.1em;
    margin-left: .6rem;
    vertical-align: -.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pjl-dreht .7s linear infinite;
}
.pjl-kreisel[hidden] { display: none; }
/* Der Text im Knopf — er bekommt einen eigenen Behälter, damit sich seine
   Beschriftung ändern lässt, ohne den Kreisel daneben zu entfernen. */
.pjl-knopftext { display: inline; }

.pjl-kreisel-gross {
    width: 3rem; height: 3rem; margin: 0;
    border-width: 3px;
    color: rgba(var(--pjl-dunkel), 1);
}

@keyframes pjl-dreht { to { transform: rotate(360deg); } }

/* Ohne Bewegung bleibt ein ruhiger Ring stehen — er zeigt immer noch, dass
   etwas läuft, nur ohne zu drehen. */
@media (prefers-reduced-motion: reduce) {
    .pjl-kreisel { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* Kurze Mitteilungen — leerer Katalog, unbekanntes Gerät, geschlossene
   Anfrage. Dieselbe Mindesthöhe wie die Dankeseite, aus demselben Grund: Ohne
   sie endet die Seite mitten im Bildschirm, und unter der Fußzeile bleibt ein
   weißer Streifen stehen. */
.pjl-mitteilung {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50vh;
    padding: 2rem 1rem;
}

/* Die Dankeseite.

   `min-height` in Sichthöhe: Der Inhalt ist kurz, und ohne Mindesthöhe endet
   die Seite mitten im Bildschirm — darunter bleibt ein weißer Streifen unter
   der Fußzeile stehen. 60 % lassen Kopf- und Fußbereich des Themes noch Platz
   und reichen, um die Fußzeile ans untere Ende zu schieben. */
.pjl-danke {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 3rem 1rem;
}

.pjl-danke-titel { margin: 0 0 1rem; font-size: 2.1rem; }
.pjl-danke-text { margin: 0 0 .8rem; max-width: 34rem; font-size: 1.15rem; }
.pjl-danke-knopf { margin-top: 1.8rem; }

/* Der grüne Haken */
.pjl-hakenkreis { display: block; width: 6.5rem; height: 6.5rem; margin-bottom: 1.6rem; }
.pjl-haken-svg { width: 100%; height: 100%; display: block; }
.pjl-haken-rand {
    stroke: #007017; stroke-width: 3;
    /* Der Kreis zeichnet sich einmal — ein kurzer Moment der Bestätigung,
       nicht mehr. Danach steht er still; eine Dauerschleife lenkt vom Text ab. */
    stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: pjl-kreis .5s ease-out forwards;
}
.pjl-haken-strich {
    stroke: #007017; stroke-width: 4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: pjl-strich .3s .45s ease-out forwards;
}
@keyframes pjl-kreis { to { stroke-dashoffset: 0; } }
@keyframes pjl-strich { to { stroke-dashoffset: 0; } }

/* Wer Bewegung abgestellt hat, bekommt den Haken sofort und vollständig. */
@media (prefers-reduced-motion: reduce) {
    .pjl-haken-rand, .pjl-haken-strich { animation: none; stroke-dashoffset: 0; }
}
.pjl-leer { color: var(--pjl-leise); font-style: italic; }

/* Behälter und Anker.
   .pjl-mehr / .pjl-weniger werden über `.pjl-zeile-menge button` gestaltet,
   .pjl-merken / .pjl-leistung / .pjl-merkliste-zeigen sind reine Anker für
   verleih.js, .pjl-nur-neu und .pjl-nur-bestand werden per `hidden`
   geschaltet. */
.pjl-anfrage, .pjl-einzeln { margin-bottom: 2rem; }
.pjl-schritt { margin-top: 1.6rem; }
.pjl-schritt-titel { margin-bottom: 1rem; }
.pjl-auswahl { margin-bottom: 1.6rem; }
.pjl-bilder { min-width: 0; }

/* Klassen, die es der Vollständigkeit halber gibt.

   Sie tragen wenig oder keine eigene Gestaltung — sie sind da, damit **jedes**
   Element im Katalog eine eigene Klasse hat. Das ist der Sinn der Übung:
   Solange nirgends ein nackter Element-Selektor wie `h3` oder `img` steht,
   kann eine Theme-Regel mit höherer Spezifität hier nichts kapern, und
   umgekehrt greift auch nichts von hier versehentlich in fremde Elemente. */
.pjl-anfrage-titel { margin-top: 0; font-size: 2.1rem; }
.pjl-schritt-titel { font-size: 1.5rem; }
.pjl-nur-lesbar { position: static; }
.pjl-bild-gross { margin: 0; }
.pjl-dazu-zeile { margin-bottom: .2rem; }
.pjl-eingabe-mehrzeilig { min-height: 5rem; resize: vertical; }
.pjl-einzeln-text { min-width: 0; }
.pjl-foto { max-width: 100%; height: auto; }
.pjl-technik-zeile { background: none; }

/* Der Hinweis, solange die beiden Fragen offen sind. */
.pjl-warten {
    margin: 1.2rem 0;
    padding: 1rem 1.2rem;
    background: #f4f5f7;
    border-left: 4px solid rgba(var(--pjl-dunkel), .6);
    border-radius: .4rem;
}
.pjl-warten[hidden], .pjl-persoenlich[hidden], .pjl-feld[hidden] { display: none; }

/* Ein gesperrter Absendeknopf muss als gesperrt zu erkennen sein — sonst
   klickt man dagegen und hält die Seite für kaputt. */
.pjl-katalog .pjl-knopf[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* Große Bildschirme.

   Auf einem 27-Zoll-Monitor wirkt alles zu klein, auf Laptop und Handy passt
   es. Deshalb erst ab 1500 Pixeln — darunter bleibt alles wie es ist.

   **Die Größen stehen einzeln.** Naheliegend wäre, nur `.pjl-katalog` größer
   zu machen — das bringt aber nichts: `rem` bezieht sich auf die Wurzel des
   Dokuments, nicht auf das Elternelement. Eine Umstellung auf `em` wäre der
   andere Weg, dort multiplizieren sich die Werte aber über jede Schachtelung
   hinweg, und niemand rechnet einem Zwischenschritt an, dass er die Schrift
   verdoppelt. Explizite Werte sind länger, aber sie tun, was dasteht. */
@media (min-width: 1500px) {
    .pjl-katalog { font-size: 1.28rem; }

    /* Katalog */
    .pjl-karte-titel { font-size: 1.65rem; }
    .pjl-kurz { font-size: 1.18rem; }
    .pjl-bestand { font-size: 1.15rem; }
    .pjl-gruppe-titel { font-size: 2.2rem; }
    .pjl-varianten-kurz { font-size: 1.15rem; }

    /* Einzelansicht */
    .pjl-einzeln-titel { font-size: 2.4rem; }
    .pjl-kurz-gross { font-size: 1.3rem; }
    .pjl-technik-name, .pjl-technik-wert { font-size: 1.15rem; padding: .7rem .8rem; }
    .pjl-bestand-zahl { font-size: 1.8rem; }

    /* Formular */
    .pjl-anfrage-titel { font-size: 2.4rem; }
    .pjl-schritt-titel { font-size: 1.7rem; }
    .pjl-block-titel { font-size: 1.55rem; }
    .pjl-gruppe-summary { font-size: 1.45rem; }
    .pjl-untergruppe { font-size: 1.3rem; }
    .pjl-zeile-name { font-size: 1.32rem; }
    .pjl-zusatz, .pjl-zeile-mehr, .pjl-hilfe, .pjl-von-wie-vielen { font-size: 1.12rem; }
    .pjl-feld-name { font-size: 1.18rem; }
    .pjl-eingabe { font-size: 1.18rem; padding: .9rem 1rem; }
    .pjl-korb { font-size: 1.32rem; }
    .pjl-knopf { font-size: 1.2rem; padding: .8rem 1.5rem; }
    .pjl-knopf-gross { font-size: 1.35rem; padding: .95rem 2rem; }
    .pjl-anzahl { font-size: 1.35rem; width: 5rem; }
    .pjl-mengenknopf { width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }

    /* Bilder mitwachsen lassen — sonst wirken sie neben der größeren Schrift
       plötzlich verloren. */
    .pjl-foto-zeile, .pjl-zeile-bild .pjl-kein-bild { width: 124px; height: 124px; }
    .pjl-foto-klein { width: 116px; height: 116px; }

    /* Dankeseite und Mitteilungen */
    .pjl-danke-titel { font-size: 2.7rem; }
    .pjl-danke-text { font-size: 1.35rem; max-width: 40rem; }
    .pjl-hakenkreis { width: 8.5rem; height: 8.5rem; }
    .pjl-mitteilung .pjl-leer { font-size: 1.35rem; }

    /* Während des Absendens */
    .pjl-sendet-text { font-size: 1.6rem; }
    .pjl-sendet-klein { font-size: 1.2rem; }
    .pjl-kreisel-gross { width: 4rem; height: 4rem; border-width: 4px; }

    /* Merkleiste */
    .pjl-merkzahl { font-size: 2.1rem; }
    .pjl-merktext { font-size: 1.28rem; }
    .pjl-merkaktionen .pjl-knopf { font-size: 1.22rem; padding: .85rem 1.8rem; }
    .pjl-merkliste { font-size: 1.15rem; }

    /* Der Rest, damit nichts zurückbleibt */
    .pjl-bedingungen { font-size: 1.12rem; }
    .pjl-bestand-gross { font-size: 1.25rem; }
    .pjl-datumsmeldung { font-size: 1.15rem; }
    .pjl-pflicht { font-size: 1rem; }
    .pjl-textknopf { font-size: 1.12rem; }
    .pjl-neuer-tab { font-size: .9em; }

    /* Vollbild */
    .pjl-lupe { width: 3.2rem; height: 3.2rem; font-size: 1.5rem; }
    .pjl-vollbild-pfeil { width: 4.2rem; height: 4.2rem; font-size: 2.8rem; }
    .pjl-vollbild-zu { width: 3.6rem; height: 3.6rem; font-size: 2.2rem; }
    .pjl-vollbild-zaehler { font-size: 1.15rem; padding: .45rem 1.2rem; }
}

/* Die gedämpften Texte an einer Stelle.

   Sie stehen hier gesammelt und am Ende, weil viele Themes eigene Farben für
   Hilfetexte, Kleingedrucktes und Beschreibungen mitbringen — im Betrieb waren
   sie orange und auf den hellgrauen Kästen kaum zu lesen. `!important` ist
   hier das mildere Mittel gegenüber immer längeren Selektoren, und es steht
   ausdrücklich **nur auf der Farbe**: Größe, Abstände und alles Übrige bleiben
   im Theme anpassbar.

   Der Wert selbst (`--pjl-leise`) ist deutlich dunkler als der übliche
   WordPress-Grauton — der war auf Weiß gerade noch lesbar, auf Hellgrau nicht
   mehr. */
.pjl-katalog .pjl-kurz,
.pjl-katalog .pjl-bestand,
.pjl-katalog .pjl-zusatz,
.pjl-katalog .pjl-hilfe,
.pjl-katalog .pjl-von-wie-vielen,
.pjl-katalog .pjl-korb-leer,
.pjl-katalog .pjl-hinweis { color: var(--pjl-leise) !important; }

/* Ausnahmen: Farben, die etwas bedeuten, setzen ihre eigene und müssen die
   Sammelregel überstimmen können. */
.pjl-katalog .pjl-zeile.ist-belegt .pjl-von-wie-vielen { color: #b32d2e !important; }
.pjl-katalog .pjl-zeile.ist-knapp .pjl-von-wie-vielen { color: #8a5a00 !important; }
.pjl-katalog .pjl-pflichtgrund { color: rgba(var(--pjl-dunkel), .9) !important; }
.pjl-katalog .pjl-mitgebucht { color: rgba(var(--pjl-dunkel), .9) !important; }

/* Der Honigtopf. Weit außerhalb des Bildes statt display:none — manche
   Ausfüllprogramme prüfen darauf und lassen versteckte Felder dann stehen. */
.pjl-topf {
    position: absolute !important;
    left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------------------- *
 * Was im Zeitraum weggefallen ist
 * ---------------------------------------------------------------------- */

/* Der Kasten unter der Auswahl, wenn Gemerktes im gewählten Zeitraum nicht
   mehr frei ist.

   **Kein Blinken.** Blinkender Text ist für Menschen mit Aufmerksamkeits-
   oder Anfallsleiden ein echtes Problem und in den Barrierefreiheitsregeln
   ausdrücklich ausgeschlossen — er wäre außerdem nach dem dritten Mal nur
   noch lästig. Auffällig wird der Kasten stattdessen durch Farbe, Gewicht und
   ein **einmaliges** Aufleuchten beim Erscheinen.

   Rot und nicht das Ockergelb der Datumsmeldung: Dort geht es um eine Eingabe,
   die noch zu machen ist, hier um etwas, das dem Besucher gerade weggenommen
   wurde. Das ist die ernstere Nachricht von beiden. */
.pjl-engpass {
    margin: 0 0 1.6rem; padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid #f0c2c2;
    border-left: 5px solid #b32d2e;
    border-radius: .5rem;
}

.pjl-engpass[hidden] { display: none; }

.pjl-engpass-kopf {
    margin: 0 0 .5rem;
    font-weight: 700; font-size: 1.05rem;
    color: #b32d2e;
}

.pjl-engpass-liste { margin: 0; padding-left: 1.2rem; }
.pjl-engpass-liste li { margin-bottom: .25rem; }

.pjl-engpass-fuss {
    margin: .7rem 0 0;
    font-size: .95rem; color: var(--pjl-leise);
}

/* Einmal aufleuchten, dann Ruhe. `forwards` fehlt mit Absicht: Am Ende soll
   der gewöhnliche Zustand stehen, nicht der letzte Bildschritt. */
@keyframes pjl-engpass-auf {
    0%   { background: #fdecec; transform: scale(1); }
    35%  { background: #fdecec; transform: scale(1.012); }
    100% { background: #fff;    transform: scale(1); }
}

.pjl-engpass.ist-neu { animation: pjl-engpass-auf 1.1s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .pjl-engpass.ist-neu { animation: none; }
}

/* ---------------------------------------------------------------------- *
 * Der Kasten mit dem Gemerkten
 * ---------------------------------------------------------------------- */

/* Steht ganz oben in der Auswahl und trägt die Zeilen, die der Besucher im
   Katalog gemerkt hat — dieselben Zeilen, nur an eine andere Stelle
   verschoben.

   Abgesetzt durch die Randfarbe des Vereins statt durch eine eigene
   Hintergrundfarbe: Er ist kein anderer Kasten als die Kategorien darunter,
   nur der erste und wichtigste. Ein Kasten in einer fremden Farbe sähe aus,
   als gehörte er nicht dazu. */
.pjl-gruppe-gemerkt {
    border-color: rgba(var(--pjl-dunkel), .55);
    border-left-width: 5px;
}

.pjl-gruppe-gemerkt[hidden] { display: none; }

.pjl-gruppe-gemerkt .pjl-gruppe-summary { color: rgb(var(--pjl-dunkel)); }

/* Die Zahl daneben, damit man beim Zuklappen weiß, was drinsteckt. */
.pjl-gruppe-zahl {
    margin-left: .4rem;
    font-weight: 400; font-size: 1.05rem;
    color: var(--pjl-leise);
}