/* ============================================================
   pixels-working.de — V2
   Farben stammen aus den Motiven: Überzugslicht über Schilf und
   Wasser (hell), Wasser in der Dämmerung (dunkel). Keine
   Akzentfarbe — die einzige Farbe kommt aus den Fotos.
   ============================================================ */

@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; font-display: swap;
             src: url('/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; font-display: swap;
             src: url('/fonts/poppins-300.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap;
             src: url('/fonts/poppins-400.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap;
             src: url('/fonts/poppins-500.ttf') format('truetype'); }

:root {
    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Poppins', system-ui, -apple-system, sans-serif;
    --mass:  min(1460px, 92vw);
    --spur:  8.5rem;   /* Breite der Datumsspalte an der Zeitachse */
}

[data-thema="hell"] {
    --grund:  #EDEEE9;
    --tinte:  #1F2421;
    --linie:  #CFD3CB;
    --neben:  #545B54;
    --schleier: rgba(31, 36, 33, .06);
}

[data-thema="dunkel"] {
    --grund:  #131A1C;
    --tinte:  #E8E6DF;
    --linie:  #253032;
    --neben:  #8B948F;
    --schleier: rgba(232, 230, 223, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Muss !important sein: .lupe und .auflage setzen display:flex und haben
   dieselbe Spezifitaet wie die Browserregel [hidden]{display:none}. Ohne
   das hier bliebe die Grossansicht dauerhaft ueber der Seite liegen. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    background: var(--grund);
    color: var(--tinte);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Kopfzeile ---------- */

.kopf {
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem;
    padding: 1.4rem clamp(1.2rem, 4vw, 2.6rem);
    color: #F2F1EC;
    text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
/* Auf Seiten ohne Auftaktbild sitzt sie fest und traegt eigenen Grund.
   Ein mix-blend-mode, wie hier vorher stand, macht sie auf hellem Grund
   unlesbar. */
.kopf--fest {
    position: fixed; color: var(--tinte); background: var(--grund);
    border-bottom: 1px solid var(--linie); text-shadow: none;
}

.marke { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .01em; }
.kopf nav { display: flex; gap: 1.4rem; font-size: .875rem; }
.kopf nav a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .25s; }
.kopf nav a:hover { border-color: currentColor; }

/* ---------- Fortschritt ---------- */

.fortschritt {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: var(--tinte); opacity: .35; z-index: 50;
}

/* ---------- Auftakt ---------- */

.auftakt {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: flex-end;
    overflow: hidden;
}

.auftakt__bilder { position: absolute; inset: 0; }
.auftakt__bilder img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 2.4s ease-in-out;
}
.auftakt__bilder img.an { opacity: 1; }
.auftakt__bilder::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,14,15,.72) 0%, rgba(10,14,15,.15) 45%, rgba(10,14,15,.35) 100%);
}
/* Der Auftakt loest sich nach unten in den Seitengrund auf. */
.auftakt::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: clamp(70px, 12vh, 150px); z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--grund));
}

.auftakt__text {
    position: relative; z-index: 2;
    width: var(--mass); margin: 0 auto;
    padding: 0 0 clamp(3rem, 9vh, 6rem);
    color: #F2F1EC;
}

.auftakt h1 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.7rem, 7.5vw, 5.6rem);
    line-height: 1.02; letter-spacing: -.018em;
    max-width: 14ch;
    text-wrap: balance;
}

.auftakt__satz {
    margin-top: 1.6rem; max-width: 52ch;
    font-size: 1.0625rem; color: rgba(242,241,236,.86);
    /* Verteilt die Zeilen so, dass kein einzelnes Wort allein unten steht. */
    text-wrap: pretty;
}

.auftakt__weiter {
    display: inline-block; margin-top: 2.6rem;
    font-size: .875rem; color: rgba(242,241,236,.7);
    border-bottom: 1px solid rgba(242,241,236,.35); padding-bottom: 3px;
}

/* ---------- Zeitachse ---------- */

.achse { width: var(--mass); margin: clamp(3rem, 7vw, 6rem) auto 0; }

.eintrag {
    position: relative;
    display: grid; grid-template-columns: var(--spur) 1fr;
    padding-bottom: clamp(2.5rem, 6vh, 4.25rem);
}

/* Nicht klebend: das Datum gehoert zu seiner Marke auf dem Strahl. Klebend
   wanderte es beim Scrollen davon weg und wirkte beziehungslos. */
.eintrag__zeit {
    align-self: start;
    height: fit-content;
    padding-top: .5rem; padding-right: 1.25rem;
    text-align: right;
    font-size: .875rem; font-weight: 400;
    color: #4C534C;
    font-variant-numeric: tabular-nums;
}

.eintrag__tafel {
    position: relative;
    padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
}
/* Der Zeitstrahl laeuft durch den ganzen Eintrag einschliesslich des
   Abstands nach unten. Als Rahmen am Inhalt riss er zwischen den Alben ab. */
.eintrag::after {
    content: ''; position: absolute;
    left: var(--spur); top: 0; bottom: 0; width: 1px;
    background: rgba(31, 36, 33, .28);
    z-index: 1; pointer-events: none;
}
/* Die Marke des Albums auf dem Strahl. */
.eintrag__tafel::before {
    content: ''; position: absolute; left: -4px; top: .75rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--grund);
    box-shadow: 0 0 0 2px rgba(31, 36, 33, .55);
    z-index: 2;
}

/* Heller, unscharfer Abzug eines Albumbildes hinter dem Abschnitt. Er ragt
   ueber den Abschnitt hinaus und blendet oben und unten aus - dadurch gehen
   benachbarte Alben ineinander ueber, statt Kanten zu bilden. Die Quelle ist
   ein 400px-Vorschaubild; hochskaliert ist es ohnehin weich, der Weichzeichner
   glaettet nur nach. */
.eintrag__grund {
    position: absolute;
    /* Auf die eigene Spalte begrenzt - bei zwei Alben nebeneinander traegt
       jedes seinen eigenen Grund. Die Ueberhaenge lassen die Alben
       untereinander weiter ineinander laufen. */
    top: -10%; bottom: -10%;
    left: -6%; right: -6%;
    z-index: 0; pointer-events: none;
    background-size: cover; background-position: center;
    filter: blur(14px) saturate(1.35);
    opacity: .46;
    /* Geradliniger Verlauf in alle vier Richtungen. Eine elliptische Maske
       hatte ich hier zwischenzeitlich probiert - sie war schlechter, weil
       sie zu frueh ausduennt und den Grund kraftlos macht. */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
        linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image:
        linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
        linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect;
}
/* Inhalt liegt darueber. */
.eintrag__zeit, .eintrag__tafel { position: relative; z-index: 1; }

/* Buehne: eine Reihe, deren Breite sich nach den Bildern richtet.
   Ein Spaltenraster passt hier nicht - die Breite des Leitbilds ergibt sich
   aus seiner gedeckelten Hoehe mal Seitenverhaeltnis und trifft nie eine
   Spaltenkante. Das hinterliess tote Felder. */
.eintrag__buehne {
    display: flex;
    align-items: center;
    /* Zentriert: die Freiflaeche verteilt sich gleichmaessig auf beide
       Seiten. Links oder rechts ausgerichtet lag sie einseitig, was je nach
       Anordnung mal links und mal rechts ein grosses Loch ergab.
       'space-between' waere ebenfalls falsch - bei zwei Elementen legt es
       den ganzen Rest DAZWISCHEN. */
    justify-content: center;
    gap: clamp(1rem, 2.4vw, 2rem);
}

/* Darf schrumpfen, wenn ein breites Querformat sonst herauslaufen wuerde. */
.eintrag__leit { flex: 0 1 auto; min-width: 0; display: block; }
/* Runde Ecken wie im Album statt weicher Raender. */
.eintrag__leit img, .eintrag__beiwerk img { border-radius: 10px; }
.eintrag__leit img {
    display: block;
    width: auto; height: auto;
    max-width: 100%;
    max-height: var(--leit-hoehe, 400px);
}

/* Feste Spaltenbreite: gleiche Breite bei natuerlicher Hoehe ergibt einen
   ruhigen Stapel. Gleiche Hoehe bei natuerlicher Breite - was hier vorher
   stand - ergibt bei gemischten Formaten einen ausgefransten Haufen. */
.eintrag__beiwerk {
    flex: 0 0 var(--beiwerk-breite, 200px);
    display: grid; gap: clamp(.7rem, 1.6vw, 1.15rem);
    align-content: center;
}
.eintrag__beiwerk a { display: block; }
.eintrag__beiwerk img { display: block; width: 100%; height: auto; }

/* Neben einem Querformat-Leitbild werden die Vorschauen schmaler: ein
   flaches Bild ist niedrig, und ein zu breiter Stapel ragte oben und unten
   darueber hinaus. */
.eintrag[data-quer="1"] { --beiwerk-breite: calc(var(--beiwerk-grund, 200px) * .62); }

/* Vier Anordnungen: Seite, Groesse des Leitbilds, Breite der Vorschauspalte,
   Versatz und Tempo wechseln. */

.eintrag { padding-bottom: clamp(4rem, 8vw, 7rem); }

.eintrag[data-variante="0"] {
    --leit-hoehe: clamp(320px, 40vw, 540px); --beiwerk-breite: clamp(140px, 21vw, 245px); --beiwerk-grund: clamp(140px, 21vw, 245px);
}
.eintrag[data-variante="0"] .eintrag__beiwerk { translate: 0 30px; }

.eintrag[data-variante="1"] {
    --leit-hoehe: clamp(290px, 36vw, 470px); --beiwerk-breite: clamp(130px, 19vw, 215px); --beiwerk-grund: clamp(130px, 19vw, 215px);
}
.eintrag[data-variante="1"] .eintrag__buehne  { flex-direction: row-reverse; }
.eintrag[data-variante="1"] .eintrag__beiwerk { translate: 0 12px; }

/* Der grosse Auftritt. */
.eintrag[data-variante="2"] {
    --leit-hoehe: clamp(360px, 48vw, 620px); --beiwerk-breite: clamp(120px, 17vw, 200px); --beiwerk-grund: clamp(120px, 17vw, 200px);
    padding-bottom: clamp(5rem, 10vw, 9rem);
}
.eintrag[data-variante="2"] .eintrag__beiwerk { translate: 0 38px; }

/* Der knappe Auftritt. */
.eintrag[data-variante="3"] {
    --leit-hoehe: clamp(250px, 30vw, 390px); --beiwerk-breite: clamp(135px, 20vw, 225px); --beiwerk-grund: clamp(135px, 20vw, 225px);
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.eintrag[data-variante="3"] .eintrag__buehne  { flex-direction: row-reverse; }
.eintrag[data-variante="3"] .eintrag__beiwerk { translate: 0 18px; }

/* Die Ueberschrift der breiten Variante darf mehr Gewicht tragen. */
.eintrag[data-variante="2"] h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); }
.eintrag[data-variante="3"] h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

.eintrag__kopf {
    display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
    /* Muss groesser sein als der groesste Ausschlag der Bilder nach oben.
       Der Parallaxe-Deckel liegt bei 45px (data-deckel in overview.js), der
       Grundversatz der Vorschauen laeuft nach unten. 56px lassen Luft.
       Nachgemessen von tools/pruefe-ueberlappung.js - diese Ueberlappung ist
       mir zweimal durchgegangen, weil sie nur waehrend des Scrollens auftritt. */
    margin-bottom: clamp(3.5rem, 4.4vw, 4.2rem);
}
.eintrag h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    line-height: 1.06; letter-spacing: -.015em;
}
.eintrag__anzahl { font-size: .9375rem; color: #3E453E; }
.eintrag__anzahl::before { content: '\2014\00a0'; }
.eintrag img { transition: opacity .35s ease; }
.eintrag a:hover img { opacity: .88; }

/* ---------- Abschluss ---------- */

.abschluss {
    width: var(--mass); margin: clamp(5rem, 12vh, 8rem) auto 0;
    padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(3rem, 7vh, 5rem);
    border-top: 1px solid var(--linie);
}
.abschluss p { max-width: 52ch; }
.abschluss__zeilen { margin-top: 2rem; display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .875rem; }
.abschluss__zeilen a { border-bottom: 1px solid var(--linie); padding-bottom: 2px; }
.abschluss__zeilen a:hover { border-color: currentColor; }
/* Alben mit Passwort: eigener kleiner Bereich am Seitenende, mehrere
   nebeneinander. Nur Schloss und Name - kein Bild, keine Bildzahl. */
.verschlossen {
    width: var(--mass); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: .5rem clamp(1rem, 2vw, 1.75rem);
}
.verschlossen__album {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .2rem;
    font-size: .875rem; color: var(--neben);
    border-bottom: 1px solid var(--linie);
    transition: color .25s ease, border-color .25s ease;
}
.verschlossen__album:hover { color: var(--tinte); border-color: var(--neben); }
.verschlossen .schloss { flex-shrink: 0; opacity: .75; }
.verschlossen__album span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Ruhiges Einblenden ----------
   Nur die Bilder blenden auf, der Text steht. Ein Fade-and-slide-up
   auf jedem Element waere der generische Standard. */

/* Nur die Deckkraft - der Versatz kommt aus der Parallaxe, sonst wuerden
   sich zwei transform-Regeln auf demselben Element ueberschreiben. */
.verhuellt { opacity: 1; }
.js .verhuellt { opacity: 0; transition: opacity .9s ease; }
.js .verhuellt.da { opacity: 1; }
/* Bilder in Bewegung brauchen eine eigene Ebene, sonst flimmert der Rand. */
[data-tempo] { will-change: transform; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .verhuellt { opacity: 1; transition: none; }
    [data-tempo] { transform: none !important; will-change: auto; }
    .auftakt__bilder img { transition: none; }
    * { animation-duration: .001ms !important; }
}

/* ---------- Zwei Alben nebeneinander (nur am Rechner) ---------- */

@media (min-width: 900px) {
    .achse {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(2rem, 4vw, 4.5rem);
        align-items: start;
    }

    /* Kein Zeitstrahl und keine Datumsspalte mehr - das Datum steht ueber
       dem Titel. */
    .eintrag { --spur: 0; grid-template-columns: minmax(0, 1fr); }
    .eintrag::after { display: none; }
    .eintrag__tafel::before { display: none; }
    .eintrag__tafel { padding-left: 0; }
    .eintrag__zeit {
        text-align: left; padding: 0 0 .5rem;
    }

    /* Halbe Breite: Leitbild und Vorschauen kleiner ansetzen. */
    .eintrag[data-variante="0"] { --leit-hoehe: clamp(300px, 25vw, 470px); --beiwerk-breite: clamp(110px, 9.5vw, 178px); --beiwerk-grund: clamp(110px, 9.5vw, 178px); }
    .eintrag[data-variante="1"] { --leit-hoehe: clamp(275px, 22.5vw, 425px); --beiwerk-breite: clamp(100px, 8.8vw, 164px); --beiwerk-grund: clamp(100px, 8.8vw, 164px); }
    .eintrag[data-variante="2"] { --leit-hoehe: clamp(330px, 28vw, 520px); --beiwerk-breite: clamp(94px, 8vw, 150px); --beiwerk-grund: clamp(94px, 8vw, 150px); }
    .eintrag[data-variante="3"] { --leit-hoehe: clamp(255px, 20.5vw, 385px); --beiwerk-breite: clamp(104px, 9.2vw, 170px); --beiwerk-grund: clamp(104px, 9.2vw, 170px); }

    .eintrag { padding-bottom: clamp(3rem, 5vw, 5rem); }
    .eintrag[data-variante="2"] { padding-bottom: clamp(3.5rem, 6vw, 6rem); }
    .eintrag[data-variante="3"] { padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem); }

    .eintrag h2 { font-size: clamp(1.4rem, 2vw, 2.1rem); }
    .eintrag[data-variante="2"] h2 { font-size: clamp(1.6rem, 2.3vw, 2.4rem); }
    .eintrag[data-variante="3"] h2 { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 700px) {
    :root { --spur: 0; }
    .eintrag { grid-template-columns: 1fr; }
    .eintrag__tafel { grid-column: 1; padding-left: 0; }
    .eintrag::after { display: none; }
    .eintrag__tafel::before { display: none; }
    .eintrag__zeit {
        position: static; text-align: left; padding: 0 0 .6rem;
    }
    /* Auf schmalen Fenstern keine Ueberlappung - das wuerde zu eng. */
    .eintrag__buehne { display: block; }
    /* max-height MUSS hier weg: zusammen mit width:100% staucht der Browser
       das Bild, statt es zu verkleinern - Hochformate erscheinen dann quer
       gestreckt. Nachgemessen von tools/pruefe-verzerrung.js. */
    .eintrag__leit img { width: 100%; max-height: none; }
    .eintrag[data-variante="0"] .eintrag__beiwerk,
    .eintrag[data-variante="1"] .eintrag__beiwerk {
        translate: none; transform: none; margin-top: .5rem;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(.6rem, 2vw, 1rem);
    }
    /* Kein Zuschnitt auch auf schmalen Fenstern - die Vorschauen behalten
       ihr Verhaeltnis und stehen oben ausgerichtet nebeneinander. */
    /* Keine Parallaxe auf schmalen Fenstern: dort stehen Leitbild und
       Vorschauen uebereinander, und die Verschiebung liess sie ineinander
       laufen. Das !important sticht die vom Skript gesetzte Inline-Angabe. */
    [data-tempo] { transform: none !important; }
    .eintrag__beiwerk { align-items: start; margin-top: 1rem; }
    .eintrag__beiwerk img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; }
    /* Nicht kleiner als der Parallaxe-Deckel (45px), sonst laeuft das
       Leitbild beim Scrollen in die Ueberschrift. */
    .eintrag__kopf { margin-bottom: 3.4rem; }
}

/* ============================================================
   Albumseite
   ============================================================ */

.albumkopf {
    width: var(--mass); margin: 0 auto;
    padding: clamp(7rem, 16vh, 10rem) 0 clamp(2rem, 5vh, 3.25rem);
}
.zurueck {
    display: inline-block; font-size: .875rem; color: var(--neben);
    border-bottom: 1px solid var(--linie); padding-bottom: 2px; margin-bottom: 1.6rem;
}
.zurueck:hover { color: var(--tinte); border-color: currentColor; }
.albumkopf h1 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.1rem, 5.5vw, 4.1rem);
    line-height: 1.04; letter-spacing: -.018em;
}
.albumkopf__meta { margin-top: .7rem; font-size: .9375rem; color: var(--neben); }

.unteralben {
    width: var(--mass); margin: 0 auto clamp(2rem, 5vh, 3rem);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
}
.unteralbum { display: block; }
.unteralbum img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--schleier); margin-top: .5rem; }
.unteralbum__name { display: block; font-family: var(--serif); font-size: 1.15rem; }
.unteralbum__anzahl { display: block; font-size: .8125rem; color: var(--neben); }

/* Gleichfoermige Karten, zentriert umbrechend. Der ruhige Rhythmus traegt
   die Uebersicht besser als ausgerichtete Reihen mit wechselnden Formaten. */
.raster {
    width: var(--mass); margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(12px, 1.6vw, 20px);
    padding-bottom: clamp(3rem, 8vh, 5rem);
}
.kachel {
    position: relative; display: block;
    width: 280px; max-width: 100%; aspect-ratio: 4 / 3;
    flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: var(--schleier);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    transition: transform .4s cubic-bezier(.2,.7,.3,1.2), box-shadow .4s ease;
}
.kachel img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s ease, opacity .35s ease;
    -webkit-user-drag: none; user-select: none;
}
.kachel:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,.42); }
.kachel:hover img { transform: scale(1.07); }

.kachel__name {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.2rem .9rem .7rem;
    background: linear-gradient(transparent, rgba(0,0,0,.82));
    color: #fff; font-size: .8125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transition: opacity .3s ease;
}
.kachel:hover .kachel__name, .kachel:focus-visible .kachel__name { opacity: 1; }

.leer { width: var(--mass); margin: 0 auto; color: var(--neben); padding-bottom: 5rem; }

/* ---------- Lupe (Lightbox) ----------
   Der unscharfe, abgedunkelte Abzug des Bildes traegt den Hintergrund. Das
   Bild sitzt dadurch in seinen eigenen Farben statt in einem schwarzen Loch. */

.lupe {
    position: fixed; inset: 0; z-index: 100;
    background: #000;
    display: flex; align-items: center; justify-content: center;
}
.lupe__grund {
    position: absolute; inset: -30px;
    background-size: cover; background-position: center;
    filter: blur(34px) brightness(.32);
    transition: background-image .5s ease;
}
.lupe__buehne {
    position: relative; z-index: 2;
    max-width: 90%; max-height: 85%;
    display: flex; align-items: center; justify-content: center;
}
.lupe__buehne img {
    display: block;
    max-width: 100%; max-height: 84svh;
    width: auto; height: auto;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,.55);
    animation: aufzoomen .32s ease;
    -webkit-user-drag: none; user-select: none;
}
@keyframes aufzoomen {
    from { transform: scale(.93); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.lupe__zu, .lupe__nav {
    position: absolute; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.1); color: #fff;
    font-family: var(--sans); line-height: 1;
    transition: background .3s ease, transform .3s ease;
}
.lupe__zu { top: 22px; right: 30px; width: 48px; height: 48px; font-size: 1.7rem; }
.lupe__nav { top: 50%; transform: translateY(-50%); width: 58px; height: 58px; font-size: 1.5rem; background: rgba(255,255,255,.06); }
.lupe__zurueck { left: 20px; }
.lupe__vor { right: 20px; }
.lupe__zu:hover { background: rgba(255,255,255,.26); }
.lupe__nav:hover { background: rgba(255,255,255,.22); }

.lupe__leiste {
    position: absolute; z-index: 10;
    bottom: 26px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 1rem;
    max-width: min(92vw, 40rem);
    padding: .7rem 1.4rem; border-radius: 999px;
    background: rgba(0,0,0,.7); color: rgba(255,255,255,.88);
    font-size: .875rem;
}
.lupe__leiste > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lupe__anfrage {
    flex-shrink: 0; border: 0; border-radius: 999px;
    padding: .45rem 1.1rem; cursor: pointer;
    background: #EDEEE9; color: #12181A;
    font-family: var(--sans); font-size: .8125rem; font-weight: 500;
    transition: background .25s ease;
}
.lupe__anfrage:hover { background: #fff; }

body.lupe-offen { overflow: hidden; }

/* ---------- Auflage: Anfrageformular ---------- */

.auflage {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(9,13,14,.8);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem; overflow-y: auto;
}
.auflage__blatt {
    position: relative; background: var(--grund); color: var(--tinte);
    max-width: 42rem; width: 100%; max-height: 90svh; overflow-y: auto;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.auflage__zu {
    position: absolute; top: .5rem; right: .9rem;
    background: none; border: 0; color: var(--neben);
    font-size: 2rem; line-height: 1; cursor: pointer;
}
.auflage__blatt p { margin-bottom: .9rem; font-size: .9375rem; }
.auflage__blatt label { display: block; margin-top: 1rem; font-size: .875rem; }
.auflage__blatt input[type=text], .auflage__blatt input[type=email] {
    width: 100%; padding: .7rem .8rem; margin-top: .35rem;
    border: 1px solid var(--linie); background: transparent;
    color: var(--tinte); font-family: var(--sans); font-size: 1rem;
}
.auflage__blatt button[type=submit] {
    margin-top: 1.4rem; padding: .75rem 1.4rem;
    border: 1px solid var(--tinte); background: var(--tinte); color: var(--grund);
    font-family: var(--sans); font-size: .9375rem; cursor: pointer;
}
.auflage__meldung { margin-top: 1rem; font-size: .9375rem; }
.auflage__honig { position: absolute; left: -9999px; }

@media (max-width: 700px) {
    .lupe__buehne { max-width: 96%; }
    .lupe__nav { width: 46px; height: 46px; font-size: 1.2rem; }
    .lupe__zurueck { left: 8px; }
    .lupe__vor { right: 8px; }
    .lupe__zu { top: 12px; right: 12px; width: 42px; height: 42px; }
    .lupe__leiste { bottom: 14px; padding: .55rem 1rem; }
    .kachel { width: 100%; }
}

/* ---------- Schmale Textseiten: Passwort, Datenschutz, 404 ---------- */

.schmal {
    width: min(46rem, 92vw); margin: 0 auto;
    padding: clamp(7rem, 18vh, 11rem) 0 clamp(4rem, 10vh, 7rem);
}
.schmal h1 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06;
    letter-spacing: -.018em; margin-bottom: 1rem;
}
.schmal__hinweis { color: var(--neben); max-width: 46ch; }
.schmal__fehler { margin-top: 1rem; color: #A6402F; }
.schmal__zurueck { margin-top: 2.5rem; font-size: .875rem; }
.schmal__zurueck a { border-bottom: 1px solid var(--linie); padding-bottom: 2px; }

.schluessel { margin-top: 2rem; max-width: 22rem; }
.schluessel label { display: block; font-size: .875rem; color: var(--neben); }
.schluessel input {
    width: 100%; margin-top: .4rem; padding: .75rem .85rem;
    border: 1px solid var(--linie); background: transparent;
    color: var(--tinte); font-family: var(--sans); font-size: 1rem;
}
.schluessel button {
    margin-top: 1.1rem; padding: .75rem 1.4rem;
    border: 1px solid var(--tinte); background: var(--tinte); color: var(--grund);
    font-family: var(--sans); font-size: .9375rem; cursor: pointer;
}

.fliesstext p { max-width: 68ch; margin-bottom: 1rem; }
.fliesstext h2 {
    font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
    margin: 2rem 0 .6rem;
}
.fliesstext ul { margin: 0 0 1rem 1.2rem; max-width: 68ch; }
.fliesstext a { border-bottom: 1px solid var(--linie); }