/* ================================================================
   Galerie-Ansicht.
   Die Akzentfarbe kommt je Galerie aus der config.json und wird als
   --akzent im <head> gesetzt. Sonst steht hier alles.
   ================================================================ */

:root {
    --grund:      #14140f;
    --flaeche:    #1e1e18;
    --rand:       #32322a;
    --schrift:    #f0efe9;
    --gedaempft:  #a3a196;
    --fehler:     #ff6b5e;
    --radius:     10px;
}

* { box-sizing: border-box; }

/* 🔴 Muss ganz oben stehen und braucht das !important.

   Das hidden-Attribut versteckt ein Element nur ueber eine eingebaute
   Regel des Browsers - und die verliert gegen jede eigene Regel mit
   display. .gross{display:grid} hat die Grossansicht deshalb dauerhaft
   sichtbar gehalten, und gross.hidden = true blieb wirkungslos.
   Gefunden am 16.08.2026, nachdem die Galerie direkt in der leeren
   Grossansicht aufging. */
[hidden] { display: none !important; }

body {
    margin: 0;
    padding: 0;
    background: var(--grund);
    color: var(--schrift);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

a { color: var(--akzent); }

/* ── Der Empfang über der Galerie ──────────────────────────── */

/* Maße und Aufbau aus V4 übernommen (gallery.css, .gallery-hero).

   🔴 Das Bild füllt die volle Breite, die Höhe ergibt sich aus seinem
   eigenen Seitenverhältnis – kein Zuschnitt, kein Deckel. Ein hohes
   Bild macht den Empfang eben hoch; welches Bild passt, entscheidet
   der Fotograf und nicht das Stylesheet. */
.empfang {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--grund);
}

.empfang__bild {
    display: block;
    width: 100%;
    height: auto;
}

/* Nach unten dunkel auslaufen, damit die Kachelwand nicht hart
   anschließt. */
.empfang::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(10, 10, 10, .92) 100%);
}

.empfang__mitte {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

/* 🔴 Der abgedunkelte Kasten ist Lesbarkeit, nicht Zierde: Welches Bild
   dahinter liegt, weiß niemand vorher – ohne ihn stünde die Begrüßung
   je nach Foto auf Weiß. */
.empfang__karte {
    width: min(35rem, 100%);
    padding: 1.9rem 2.25rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(14, 14, 14, .78);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.empfang__titel {
    margin: 0 0 .75rem;
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.2px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}

/* 🔴 Seit dem 18.08.2026 ein Link. Er braucht deshalb eine Trefferfläche,
   die man auch mit dem Daumen sicher erwischt – 44 px sind das Maß, an
   dem sich Handy-Oberflächen messen lassen. */
.empfang__hinweis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    margin: 0;
    padding: 0 .75rem;
    border-radius: var(--radius);
    font-size: .85rem;
    color: var(--gedaempft);
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease;
}

.empfang__hinweis:hover,
.empfang__hinweis:focus-visible { color: var(--schrift); }

/* Sanft hinuntergleiten statt springen – ohne eine Zeile JavaScript. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.empfang__pfeil {
    display: inline-flex;
    color: var(--akzent);
    font-size: 1rem;
    font-weight: 700;
    animation: empfang-tippen 1.6s ease-in-out infinite;
}

@keyframes empfang-tippen {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* 🔴 Wer „weniger Bewegung" eingestellt hat, meint es ernst – oft wegen
   Schwindel oder Migräne. Der Pfeil bleibt dann einfach stehen. */
@media (prefers-reduced-motion: reduce) {
    .empfang__pfeil { animation: none; }
}

/* ── Auf dem Handy ─────────────────────────────────────────────

   🔴 Die wichtigste Regel steht beim Kachelraster. Ohne sie passen bei
   180 px Mindestbreite auf ein 414 px breites Handy rechnerisch keine
   zwei Kacheln mehr nebeneinander – die Galerie zeigte EIN Bild je
   Zeile, und ein Gast müsste sich durch dreihundert Bildschirmhöhen
   wischen. V4 schaltet an derselben Stelle auf 140 px; das ergibt zwei
   bis drei Spalten. Gefunden am 18.08.2026 beim Vergleich der
   Stylesheets.                                                       */
@media (max-width: 40rem) {
    .empfang__karte { padding: 1.25rem 1.4rem; }
    .empfang__hinweis { font-size: .8rem; }

    /* Das Raster steht weiter unten, nach seiner Grundregel – hier
       wurde es von ihr überschrieben (Abnahme Teil 6, 04.10.2026). */

    /* Ränder überall schmaler: Auf einem Handy ist jeder Millimeter
       Breite ein Millimeter Bild. */
    .hochladen,
    .hinweis,
    .begruessung { margin-left: .5rem; margin-right: .5rem; }

    .kopf   { padding: 1rem .5rem; }
    .ordner { padding: .75rem .5rem 0; }

    /* Die Knöpfe der Kopfleiste sind auf dem Handy die meistgetippten
       der Seite: etwas enger zusammen, dafür eine Fingerkuppe hoch. */
    .kopf__rechts { gap: .5rem; }
    .kopf__rechts .knopf-schlicht {
        display: inline-flex;        /* sonst wirkt min-height am Link nicht */
        align-items: center;
        gap: .35em;                  /* ersetzt das Leerzeichen vor dem Merklisten-Zähler,
                                        das in einem Flex-Element wegfällt */
        min-height: 2.75rem;
    }

    /* Die Filterzeile fürs Handy steht weiter unten, nach ihren
       Grundregeln (Abnahme Teil 6, 04.10.2026). */
}

/* ── Anmeldung ─────────────────────────────────────────────── */

/* Hintergrundbild der Anmeldeseite. Welches Bild, entscheidet die
   Galerie (eigenes Bild, sonst das allgemeine) - die Adresse steht
   deshalb inline im HTML, das Aussehen hier.

   position:fixed statt eines Hintergrunds auf <body>: So bleibt das
   Bild stehen, wenn die Tastatur auf dem Handy die Seite verkuerzt. */
.seiten-bild {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 🔴 Der Schleier ist nicht Zierde, sondern Lesbarkeit: Ohne ihn steht
   die Karte je nach Bild auf hellem Grund, und die Beschriftung
   verschwindet. Dieselbe Abdunklung wie auf der Startseite. */
.seiten-bild-schleier {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .66) 100%);
}

.anmeldung {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;

    /* Ueber Bild und Schleier. */
    position: relative;
    z-index: 2;
}

.anmeldung__karte {
    width: 100%;
    max-width: 22rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 2rem;
}

/* Logo der Galerie, falls hinterlegt. max-height statt fester Groesse:
   Die Datei kommt vom Kunden, ihr Seitenverhaeltnis ist unbekannt. */
.anmeldung__logo {
    display: block;
    max-width: 100%;
    max-height: 5rem;
    margin: 0 auto 1.25rem;
    object-fit: contain;
}

.anmeldung__karte h1 {
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
}

.anmeldung__begruessung {
    color: var(--gedaempft);
    margin: 0 0 1.25rem;
}

.anmeldung label {
    display: block;
    margin-bottom: .4rem;
    font-size: .9rem;
    color: var(--gedaempft);
}

.anmeldung input {
    width: 100%;
    padding: .7rem .85rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--schrift);
    font-size: 1rem;
}

.anmeldung input:focus {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.anmeldung button {
    width: 100%;
    margin-top: 1rem;
    padding: .75rem;
    background: var(--akzent);
    color: #14140f;
    border: 0;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.fehler {
    margin: .6rem 0 0;
    color: var(--fehler);
    font-size: .9rem;
}

/* ── Kopfzeile ─────────────────────────────────────────────── */

.kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rand);
}

.kopf h1 {
    margin: 0;
    font-size: 1.25rem;
}

/* 🔴 flex-wrap: Mit Hinzufügen, Merkliste, Warenkorb und Abmelden ist
   die Reihe gut 420 px breit – auf dem Handy (390 px) ragte „Abmelden"
   über den Rand, und die ganze Seite ließ sich seitlich verschieben
   (Abnahme Teil 6, 04.10.2026). */
.kopf__rechts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.kennzeichen {
    padding: .15rem .55rem;
    border: 1px solid var(--akzent);
    border-radius: 999px;
    color: var(--akzent);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.knopf-schlicht {
    padding: .45rem .9rem;
    background: transparent;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--schrift);
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}

.knopf-schlicht:hover { border-color: var(--akzent); }

/* 🔴 Löschen sieht anders aus als der Rest der Leiste. Es steht direkt
   neben „Herunterladen", und die beiden dürfen sich nicht ähneln – der
   eine Klick holt Bilder, der andere vernichtet sie. */
.knopf-gefahr {
    border-color: #7a2020;
    color: var(--fehler);
}

.knopf-gefahr:hover {
    border-color: #a03030;
    background: rgba(122, 32, 32, .18);
    color: #fff;
}

/* ── Ordner und Hinweise ───────────────────────────────────── */

.begruessung,
.hinweis {
    margin: 1rem 1.5rem;
    color: var(--gedaempft);
}

.hinweis--fehler { color: var(--fehler); }

/* ── Zeitraum und Reihenfolge ──────────────────────────────── */

.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 1rem 1.5rem;
    padding: .9rem 1rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    font-size: .9rem;
}

.filter label { color: var(--gedaempft); }

.filter input[type="date"],
.filter select {
    padding: .4rem .5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
    color: var(--schrift);
    font-size: .9rem;
}

.filter button {
    padding: .45rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--akzent);
    color: #111;
    font-weight: 600;
    cursor: pointer;
}

/* 🔴 Der Link zum Zurücksetzen sieht bewusst nach Knopf aus, ist aber
   keiner: Er führt auf die Galerie ohne Filter – das ist ein Ort, kein
   Vorgang, und gehört deshalb in die Adresszeile. */
.filter .knopf-schlicht {
    padding: .45rem 1rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    color: var(--gedaempft);
    text-decoration: none;
}

/* 🔴 Auf dem Handy als Raster: Beschriftung links, Feld rechts, je eine
   Zeile. Als Fließreihe brach die Zeile an beliebiger Stelle um – „Bis"
   stand am Ende der ersten Zeile, sein Feld in der zweiten, und
   „Reihenfolge" hinter dem falschen Feld (Abnahme Teil 6, 04.10.2026).
   Steht nach den Grundregeln, damit sie hier nicht wieder gewinnen. */
@media (max-width: 40rem) {
    .filter {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: .6rem .75rem;
        margin: .75rem .5rem;
        padding: .75rem;
    }

    .filter input[type="date"],
    .filter select {
        width: 100%;
        min-height: 2.75rem;
    }

    .filter button,
    .filter .knopf-schlicht {
        grid-column: 1 / -1;
        min-height: 2.75rem;
        text-align: center;
    }
}

/* ── Hinzufügen: Bilder und Ordner ─────────────────────────────

   🔴 Ein Fenster, kein Kasten auf der Seite. Die Galerie ist zum
   Anschauen da; die Werkzeuge liegen weg, bis jemand „Hinzufügen"
   drückt (V4 macht es genauso).                                      */
.werkzeuge {
    width: min(38rem, 92vw);
    max-height: 88vh;
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--schrift);
    overflow-y: auto;
}

/* Der dunkle Grund hinter dem Fenster. Ohne ihn steht das Fenster im
   Nichts und die Galerie dahinter zieht den Blick ab. */
.werkzeuge::backdrop {
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(3px);
}

.werkzeuge__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.werkzeuge__titel {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.05rem;
}

/* ── Die Ablage ────────────────────────────────────────────────────

   Das Feld selbst bleibt im HTML (sonst ginge das Formular ohne
   JavaScript nicht ab), wird aber unsichtbar: Angeklickt wird die
   große Fläche darüber, die zum Feld gehört.                         */
.ablage__feld {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ablage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ablage:hover,
.ablage--bereit {
    border-color: var(--akzent);
    background: rgba(255, 140, 0, .06);
}

/* Die Tastatur landet auf dem versteckten Feld – die Ablage muss
   trotzdem sichtbar werden, sonst weiß niemand, wo er gerade ist. */
.ablage__feld:focus-visible + .ablage {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ablage__zeichen { font-size: 1.6rem; line-height: 1; color: var(--akzent); }
.ablage__haupt   { font-weight: 600; }

.ablage__neben {
    color: var(--gedaempft);
    font-size: .8rem;
    line-height: 1.5;
}

/* Sagt, warum dieser Kasten überhaupt da ist – ein Gast sieht ihn
   sonst und fragt sich, ob er etwas falsch macht. */
.werkzeuge__rolle {
    padding: .15rem .55rem;
    border: 1px solid var(--akzent);
    border-radius: 999px;
    color: var(--akzent);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.werkzeuge__form + .werkzeuge__form,
.werkzeuge__form--rand {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rand);
}

.werkzeuge__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

/* Die Zeile unter der Ablage: Ziel wählen und abschicken. Der Knopf
   rückt ans rechte Ende – dort sucht ihn das Auge, und er klebt nicht
   am Text daneben. */
.ablage + .werkzeuge__zeile { margin-top: .9rem; }
.werkzeuge__zeile button[type="submit"] { margin-left: auto; }

.werkzeuge__zeile label {
    color: var(--gedaempft);
    font-size: .9rem;
}

.werkzeuge__zeile input[type="text"],
.werkzeuge__zeile input[type="file"],
.werkzeuge__zeile select {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
    color: var(--schrift);
    font-size: .9rem;
}

.werkzeuge__zeile button {
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--akzent);
    color: #111;
    font-weight: 600;
    cursor: pointer;
}

/* „Anlegen" ist die seltenere Handlung – sie soll neben „Hochladen"
   nicht um Aufmerksamkeit streiten. */
.werkzeuge__zeile button.werkzeuge__schlicht {
    background: none;
    border: 1px solid var(--rand);
    color: var(--schrift);
    font-weight: 500;
}

.werkzeuge__zeile button[disabled] { opacity: .5; cursor: default; }

.werkzeuge__hinweis {
    margin: .5rem 0 0;
    color: var(--gedaempft);
    font-size: .8rem;
}

@media (max-width: 40rem) {
    .werkzeuge { width: 100vw; max-height: 100vh; max-height: 100dvh; padding: 1rem .85rem; border-radius: 0; }
    .werkzeuge__zeile button { flex: 1 1 auto; }
    .ablage { padding: 1.25rem .75rem; }
}

/* Gast lädt ein Bild hoch. Eine Zeile, die umbricht statt zu quetschen –
   auf dem Handy stehen Feld, Knopf und Hinweis untereinander. */
.hochladen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 1rem 1.5rem;
    padding: 1rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
}

.hochladen label { font-weight: 600; }

.hochladen input[type="file"] {
    flex: 1 1 14rem;
    min-width: 0;
    color: var(--schrift);
}

.hochladen button {
    padding: .5rem 1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--akzent);
    color: #111;
    font-weight: 600;
    cursor: pointer;
}

.hochladen__hinweis {
    flex-basis: 100%;
    color: var(--gedaempft);
    font-size: .85rem;
}

.hochladen select {
    padding: .45rem .5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
    color: var(--schrift);
}

.hochladen__ordner-label { font-weight: 400; }

/* Fortschritt. Eigene Zeile, damit die Meldung nicht bei jedem Bild die
   Knöpfe verschiebt. */
.hochladen__stand {
    flex-basis: 100%;
    font-size: .9rem;
}

.hochladen__kopf { margin-bottom: .5rem; font-weight: 600; }
.hochladen__kopf--gut    { color: var(--akzent); }
.hochladen__kopf--fehler { color: var(--fehler); }

/* Eine Zeile je Bild: Name, Balken, Ergebnis.

   🔴 Der Balken ist der Grund für den ganzen Umbau. „Bild 12 von 60"
   sagt nur, dass es weitergeht; ein Balken zeigt, DASS gerade etwas
   passiert – und genau das braucht jemand, der auf einer Feier mit
   schwachem Netz sechzig Bilder schickt. */
.hochladen__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 7rem;
    gap: .6rem;
    align-items: center;
    padding: .25rem 0;
    border-top: 1px solid var(--rand);
}

.hochladen__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gedaempft);
}

.hochladen__balken {
    display: block;
    height: .5rem;
    border-radius: 999px;
    background: var(--grund);
    overflow: hidden;
}

/* 🔴 scaleX statt width.

   Der Balken ist voll breit und wird zusammengestaucht. Sieht identisch
   aus, kostet aber kein Neuberechnen des Layouts: Bei 60 Handybildern
   laufen 60 dieser Balken gleichzeitig, und zwar auf einem Telefon,
   das nebenher hochlädt. Genau dann darf nichts ruckeln. */
.hochladen__balken-fuellung {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--akzent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s linear;
}

.hochladen__ergebnis {
    text-align: right;
    font-size: .8rem;
    color: var(--gedaempft);
}

.hochladen__zeile--gut     .hochladen__ergebnis { color: var(--akzent); }
.hochladen__zeile--doppelt .hochladen__ergebnis { color: var(--gedaempft); }
.hochladen__zeile--fehler  .hochladen__ergebnis { color: var(--fehler); }

/* Auf dem Handy ist für drei Spalten kein Platz – der Balken bekommt
   die volle Breite unter dem Namen. */
@media (max-width: 40rem) {
    .hochladen__zeile {
        grid-template-columns: minmax(0, 1fr) 5rem;
    }

    .hochladen__balken { grid-column: 1 / -1; }
}

.hochladen button[disabled] { opacity: .5; cursor: default; }

/* ── Ordner ────────────────────────────────────────────────────────

   🔴 Kacheln mit Vorschaubild, wie in V4 – keine Reihe von Knöpfen.

   Ein Ordner heißt „Sektempfang" oder „Party ab 22 Uhr". Was darin
   liegt, sagt das Bild sofort; der Name erst nach dem Nachdenken. Und
   weil die Kacheln genauso aussehen wie die Bilder darunter, ist ohne
   Erklärung klar, dass man sie anklicken kann.                        */
.ordner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
    padding: 1rem 1.5rem;
}

.ordnerkachel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    color: var(--schrift);
    text-decoration: none;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .15s;
}

/* Nur an Geräten mit echtem Mauszeiger. Auf dem Handy bliebe der
   Zustand nach dem Tippen kleben. */
@media (hover: hover) {
    .ordnerkachel:hover { transform: translateY(-4px); border-color: var(--akzent); }
}

.ordnerkachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Halb durchsichtig, damit die Schrift darauf lesbar bleibt – auch
   über einem hellen Sommerbild. */
.ordnerkachel__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
}

.ordnerkachel__zeichen {
    position: absolute;
    top: .6rem;
    left: .7rem;
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}

.ordnerkachel__fuss {
    position: relative;
    z-index: 1;
    padding: .6rem .75rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .88));
}

.ordnerkachel__name {
    display: block;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;

    /* Lange Namen abschneiden statt die Kachel zu sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ordnerkachel__anzahl {
    display: block;
    font-size: .78rem;
    color: #bbb;
}

/* Die Brotkrume: Sie erscheint erst IN einem Ordner. Ohne sie wüsste
   niemand, warum plötzlich nur noch dreißig statt dreihundert Bilder
   da sind. */
.brotkrume {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem .25rem;
}

.brotkrume__name {
    color: var(--akzent);
    font-weight: 700;
}

@media (max-width: 40rem) {
    .ordner {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: .5rem;
        padding: .75rem .5rem;
    }

    .brotkrume { padding: .75rem .5rem .25rem; }
}

/* ── Bilderraster ──────────────────────────────────────────── */

/* ── Bilderraster ──────────────────────────────────────────────────

   🔴 Die Kachelbreite steht in einer Variablen, damit sie sich ändern
   lässt: am Rechner über zwei Knöpfe, auf dem Handy mit zwei Fingern
   (Michaels Wunsch vom 18.08.2026). Der Wert wird im Browser gemerkt –
   wer große Kacheln mag, soll sie nicht bei jedem Besuch neu einstellen.

   ⚠ `auto-fill` bleibt: Die Zahl der Spalten ergibt sich weiterhin aus
   der Fensterbreite. Verstellt wird nur, wie breit eine Kachel
   MINDESTENS ist – so bleibt das Raster auf jedem Bildschirm heil.    */
.raster {
    --kachelbreite: 180px;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kachelbreite), 1fr));
    gap: .75rem;
    padding: 0 1.5rem 3rem;

    /* Beim Zusammenziehen mit zwei Fingern soll der Browser nicht
       zusätzlich die ganze Seite zoomen. */
    touch-action: pan-y;
}

/* 🔴 Muss NACH der Grundregel stehen. Bis 04.10.2026 stand es weiter
   oben im allgemeinen Handy-Block und wurde von `.raster` hier
   überschrieben: 1,5 rem Rand statt .5 rem, und mit 180 px Mindestbreite
   passte auf ein Handy nur eine Spalte. Die Mindestbreite selbst setzt
   galerie.js (Vorgabe 140 px auf schmalen Bildschirmen). */
@media (max-width: 40rem) {
    .raster {
        gap: .5rem;
        padding: 0 .5rem 2rem;
    }
}

/* Die zwei Knöpfe in der Leiste über den Bildern. */
.zoom {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.zoom__knopf {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: transparent;
    color: var(--schrift);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.zoom__knopf:hover:not(:disabled) { border-color: var(--akzent); }
.zoom__knopf:disabled { opacity: .35; cursor: default; }

/* Auf Geräten ohne Mauszeiger führen die Finger – die Knöpfe wären
   dort nur zusätzliche Fläche neben dem Bild. */
@media (hover: none) {
    .zoom { display: none; }
}

.kachel {
    margin: 0;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
}

.kachel img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--grund);
}

.kachel figcaption {
    padding: .4rem .6rem;
    color: var(--gedaempft);
    font-size: .78rem;
}

/* Liegt unsichtbar ueber dem Bild und oeffnet die Grossansicht. Ein
   Knopf, damit die Tastatur ihn erreicht. */
.kachel__flaeche {
    position: absolute;
    inset: 0;
    bottom: 1.6rem;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.kachel__flaeche:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -3px;
}

/* ── Auswahl ───────────────────────────────────────────────── */

.leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
}

.leiste .hinweis { margin: 1rem 0; }

.auswaehlend .kachel__flaeche { cursor: pointer; }

/* Im Auswahlmodus bekommt jede Kachel einen sichtbaren Rand - sonst
   waere nicht zu erkennen, dass ein Klick jetzt markiert statt oeffnet. */
.auswaehlend .kachel {
    outline: 1px dashed var(--rand);
    outline-offset: -1px;
}

.kachel--gewaehlt {
    outline: 2px solid var(--akzent) !important;
    outline-offset: -2px;
}

.kachel--gewaehlt img { opacity: .75; }

.auswahl {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 1.5rem 1rem;
    padding: .75rem 1rem;
    background: var(--flaeche);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
}

.auswahl__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Zielordner und Knopf bleiben beim Umbrechen zusammen. */
.auswahl__verschieben {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
}

.auswahl__verschieben select {
    max-width: 11rem;
    padding: .4rem .5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund);
    color: var(--schrift);
    font-size: .9rem;
}

/* ── Grossansicht ──────────────────────────────────────────── */

.gross {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    background: rgb(0 0 0 / .93);

    /* Kein Doppeltipp-Zoom in der Großansicht – er kam beim schnellen
       Blättern dazwischen. Zwei Finger zoomen weiterhin. */
    touch-action: manipulation;
}

.gross__kopf {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

.gross__name { font-size: .95rem; }

.gross__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* 🔴 Bewusst height statt nur max-height: Zuerst steht hier das
   Vorschaubild mit 500 px laengster Kante. Ohne Streckung waere die
   "Grossansicht" auf einem grossen Bildschirm kleiner als eine Kachel -
   sie fuellt jetzt die Hoehe und ist dabei etwas weich, bis das
   Original geladen ist. */
.gross__bild {
    width: auto;
    height: calc(100vh - 7rem);

    /* Auf dem iPhone ist 100vh höher als der sichtbare Bereich – die
       Adressleiste zählt nicht mit, und der untere Teil des Bildes
       verschwand dahinter. dvh ist die tatsächlich sichtbare Höhe;
       ältere Browser bleiben bei der Zeile darüber. */
    height: calc(100dvh - 7rem);
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

.gross__blaettern {
    padding: .5rem 1rem;
    background: transparent;
    border: 0;
    color: var(--schrift);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;

    /* Schnelles Tippen auf die Pfeile wurde auf dem Handy als Doppeltipp
       gelesen und vergrößerte die Seite (Abnahme 04.10.2026).
       "manipulation" schaltet nur den Doppeltipp-Zoom ab; mit zwei
       Fingern zoomen geht weiter. */
    touch-action: manipulation;
}

.gross__blaettern:hover { color: var(--akzent); }

/* Kein Scrollen hinter der Grossansicht. */
.starr { overflow: hidden; }

/* ── Herunterladen ─────────────────────────────────────────── */

.fortschritt {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 30;
    width: min(24rem, calc(100vw - 3rem));
    transform: translateX(-50%);
    padding: .9rem 1.1rem;
    background: var(--flaeche);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
}

.fortschritt p {
    margin: 0 0 .5rem;
    font-size: .9rem;
}

.fortschritt__balken {
    height: .4rem;
    background: var(--grund);
    border-radius: 999px;
    overflow: hidden;
}

/* Gestaucht statt schmal: transform laeuft ohne neues Layout. Der
   Balken wird beim Laden mehrmals je Sekunde neu gesetzt - mit width
   waere das jedes Mal ein Umbruch der ganzen Seite. */
.fortschritt__balken span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--akzent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

/* Kurze Rueckmeldung fuer alles in der Galerie. */
.meldung {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 30;
    transform: translateX(-50%);
    margin: 0;
    padding: .7rem 1.1rem;
    background: var(--flaeche);
    border: 1px solid var(--akzent);
    border-radius: var(--radius);
    font-size: .9rem;
    text-align: center;
}

/* ── Fusszeile ─────────────────────────────────────────────── */

.fusszeile__kontakt {
    margin-bottom: .9rem;
    line-height: 1.7;
}

.fusszeile__marke { margin-bottom: .5rem; }

/* Etwas leiser als der Rest: Pflichtangaben, keine Werbung. */
.fusszeile__recht {
    display: flex;
    justify-content: center;
    gap: .6rem;
    color: var(--gedaempft);
}

.fusszeile {
    padding: 1.5rem;
    border-top: 1px solid var(--rand);
    text-align: center;
    font-size: .85rem;

    /* 🔴 Muss ueber dem Hintergrundbild der Anmeldeseite liegen. Ohne
       diese zwei Zeilen deckt der Schleier (z-index 1) die Fusszeile zu,
       und der Penksterbox-Verweis waere auf der Anmeldeseite
       verschwunden. */
    position: relative;
    z-index: 2;
}