@import url("https://fonts.googleapis.com/css2?family=Antic+Didone&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Licorice&display=swap");

:root {
    --background: #fdfcf9;
    --paper: #fffefb;
    --green: #3f5a49;
    --green-soft: rgba(63, 90, 73, 0.11);
    --rose: #cdabb3;
    --rose-deep: #c89b99;
    --line: rgba(63, 90, 73, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--background);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--green);
    font-family: "Cormorant Garamond", Georgia, serif;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

.hidden {
    display: none !important;
}

.album-page {
    width: min(1100px, calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 38px 0 60px;
}

.locked-view,
.password-view {
    min-height: calc(100vh - 98px);
    display: grid;
    place-items: center;
}

.album-cover {
    position: relative;
    width: min(430px, 84vw);
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    perspective: 1000px;
}

.cover-sheet,
.cover-front {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    box-shadow: 0 18px 45px rgba(53, 75, 61, 0.1);
}

.cover-sheet-back-two {
    transform: rotate(4deg) translate(10px, 9px);
    opacity: 0.62;
}

.cover-sheet-back-one {
    transform: rotate(-2.4deg) translate(-8px, 5px);
    opacity: 0.8;
}

.cover-front {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 26px;
    overflow: hidden;
    transition:
        transform 0.48s cubic-bezier(.22,.68,.23,1),
        box-shadow 0.48s ease;
}

.album-cover:hover .cover-front {
    transform: translateY(-5px) rotate(-0.4deg);
    box-shadow: 0 24px 54px rgba(53, 75, 61, 0.13);
}

.cover-botanical {
    width: min(315px, 70vw);
    height: auto;
    margin: 0 auto 24px;
}

.cover-kicker,
.small-rose {
    margin: 0;
    color: var(--rose);
    font-family: "Antic Didone", Didot, Georgia, serif;
    letter-spacing: 0.03em;
}

.cover-kicker {
    font-size: 18px;
}

.cover-title {
    margin-top: 7px;
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: clamp(42px, 9vw, 62px);
}

.cover-date {
    margin-top: 9px;
    font-size: 18px;
}

.cover-hint {
    margin-top: 34px;
    font-size: 15px;
    opacity: 0.7;
}

.password-view {
    position: relative;
}

.back-link {
    position: absolute;
    top: 10px;
    left: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
}

.password-card {
    width: min(480px, 100%);
    padding: 36px 30px 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    text-align: center;
    box-shadow: 0 16px 42px rgba(53, 75, 61, 0.07);
}

.password-card h1,
.album-header h1 {
    margin: 5px 0 0;
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-weight: 400;
}

.password-card h1 {
    font-size: clamp(36px, 8vw, 54px);
}

.password-copy {
    margin: 15px auto 27px;
    max-width: 360px;
    font-size: 18px;
    line-height: 1.5;
}

.password-card label,
.search-row label {
    display: block;
    margin-bottom: 7px;
    color: var(--rose-deep);
    text-align: left;
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: 16px;
}

.password-card input,
.search-row input {
    width: 100%;
    padding: 10px 2px;
    border: 0;
    border-bottom: 1px solid rgba(63, 90, 73, 0.56);
    border-radius: 0;
    outline: none;
    background: transparent;
    color: var(--green);
    font-size: 18px;
}

.password-card input:focus,
.search-row input:focus {
    border-bottom-color: var(--green);
    box-shadow: 0 1px 0 rgba(63, 90, 73, 0.15);
}

.password-message {
    margin: 12px 0 0;
    color: #8f5d5a;
    font-size: 15px;
}

.primary-button {
    width: 100%;
    margin-top: 24px;
    padding: 13px 18px;
    border: 1px solid var(--green);
    border-radius: 7px;
    background: var(--green);
    color: white;
    cursor: pointer;
    font-size: 17px;
}

.album-view {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(.22,.68,.23,1);
}

.album-view.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.album-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.album-header h1 {
    font-size: clamp(34px, 6vw, 54px);
}

.mode-switch {
    display: flex;
    gap: 8px;
}

.mode-button {
    padding: 9px 14px;
    border: 1px solid var(--green);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.mode-button.active {
    background: var(--green);
    color: white;
}

.search-row {
    position: relative;
    max-width: 460px;
    margin: 0 auto 6px;
}

.clear-search {
    position: absolute;
    right: 0;
    bottom: 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rose-deep);
    cursor: pointer;
    font-size: 14px;
}

.result-info {
    min-height: 22px;
    margin: 8px 0 18px;
    text-align: center;
    font-size: 15px;
    opacity: 0.65;
}

.stack-mode {
    max-width: 820px;
    margin: 0 auto;
}

.stack-shell {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 12px;
}

.photo-stack {
    position: relative;
    width: min(620px, 100%);
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.stack-shadow,
.active-photo-card {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    box-shadow: 0 16px 38px rgba(53, 75, 61, 0.1);
}

.stack-shadow-one {
    transform: rotate(-2deg) translate(-5px, 4px);
    opacity: 0.72;
}

.stack-shadow-two {
    transform: rotate(2.7deg) translate(7px, 7px);
    opacity: 0.5;
}

.active-photo-card {
    z-index: 2;
    padding: 11px;
    display: grid;
    place-items: center;
    overflow: hidden;
    transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(.22,.68,.23,1);
}

.active-photo-card.is-leaving-left {
    opacity: 0;
    transform: translateX(-46px) rotate(-2deg);
}

.active-photo-card.is-leaving-right {
    opacity: 0;
    transform: translateX(46px) rotate(2deg);
}

.active-photo-card.is-entering {
    opacity: 0;
    transform: scale(0.985);
}

.active-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-arrow {
    width: 46px;
    height: 58px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 1;
    opacity: 0.7;
}

.nav-arrow:disabled {
    opacity: 0.18;
    cursor: default;
}

.photo-caption {
    max-width: 620px;
    margin: 22px auto 0;
    text-align: center;
}

.active-names {
    margin: 0;
    color: var(--rose-deep);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: 20px;
}

.active-message {
    min-height: 26px;
    margin: 8px auto 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.45;
}

.photo-counter {
    margin: 12px 0 0;
    font-size: 14px;
    opacity: 0.55;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.gallery-item {
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
    box-shadow: 0 10px 24px rgba(53, 75, 61, 0.06);
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease;
}

.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(53, 75, 61, 0.1);
}

.gallery-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.gallery-item span {
    display: block;
    margin-top: 8px;
    font-size: 14px;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 50px 12px;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: 18px;
}

@media (max-width: 820px) {
    .album-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .stack-shell {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        gap: 6px;
    }

    .nav-arrow {
        width: 36px;
        font-size: 38px;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .album-page {
        width: min(100% - 20px, 1100px);
        padding-top: 22px;
    }

    .album-cover {
        width: min(360px, 86vw);
    }

    .password-card {
        padding: 30px 22px 28px;
    }

    .mode-switch {
        width: 100%;
    }

    .mode-button {
        flex: 1;
    }

    .stack-shell {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
    }

    .nav-arrow {
        width: 30px;
        font-size: 34px;
    }

    .photo-stack {
        aspect-ratio: 3 / 4;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}


/* v35: Deckblatt bleibt das botanische Jana-&-Jens-Motiv */
.cover-botanical {
    width: min(330px, 72vw);
    margin-bottom: 30px;
}

.cover-kicker {
    margin-top: 4px;
}

.cover-date {
    margin-top: 12px;
}

/* Im Fotostapel signalisiert das Bild, dass es vergrößert werden kann. */
.active-photo-card {
    cursor: zoom-in;
}

/* Galerie-Suche erscheint nur innerhalb des Galeriemodus. */
.gallery-mode .search-row {
    margin-bottom: 6px;
}

/* Vordergrundmodus / Lightbox */
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;

    padding: 28px;

    background: rgba(20, 27, 23, 0.88);
    backdrop-filter: blur(5px);

    opacity: 0;
    transition: opacity 0.28s ease;
}

.photo-lightbox.is-visible {
    opacity: 1;
}

.lightbox-figure {
    width: min(1180px, 100%);
    max-height: calc(100vh - 56px);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transform: scale(0.975);
    opacity: 0;

    transition:
        transform 0.34s cubic-bezier(.22,.68,.23,1),
        opacity 0.28s ease;
}

.photo-lightbox.is-visible .lightbox-figure {
    transform: scale(1);
    opacity: 1;
}

.lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;

    object-fit: contain;
    border-radius: 7px;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.lightbox-caption {
    max-width: 760px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
}

.lightbox-names {
    margin: 0;
    color: #e1c2c8;
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: 20px;
}

.lightbox-message {
    margin: 7px 0 0;
    font-size: 17px;
    line-height: 1.42;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;

    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;
    color: white;
    cursor: pointer;

    font-family: Georgia, serif;
    font-size: 38px;
    line-height: 1;

    opacity: 0.82;
}

.lightbox-arrow {
    width: 52px;
    height: 68px;

    border: 0;
    background: transparent;
    color: white;
    cursor: pointer;

    font-family: Georgia, serif;
    font-size: 52px;
    line-height: 1;

    opacity: 0.78;
}

.lightbox-arrow:disabled {
    opacity: 0.16;
    cursor: default;
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .photo-lightbox {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        padding: 18px 8px;
    }

    .lightbox-arrow {
        width: 34px;
        font-size: 42px;
    }

    .lightbox-close {
        top: 10px;
        right: 12px;
    }

    .lightbox-figure img {
        max-height: calc(100vh - 150px);
    }
}


/* v36: Albumansicht wieder ruhig und mittig wie die Landingpage */
.album-page {
    padding-top: 28px;
}

.album-view {
    min-height: calc(100vh - 68px);
    display: flex;
    flex-direction: column;
}

.album-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin-bottom: 18px;
}

.album-signature {
    justify-self: start;
    margin: 0;
    white-space: nowrap;
}

.album-header h1 {
    justify-self: center;
    margin: 0;
    text-align: center;
    font-size: clamp(31px, 4.5vw, 49px);
    line-height: 1.08;
}

.album-header .mode-switch {
    justify-self: end;
}

/*
   Der Fotostapel nutzt den verbleibenden Platz wie ein zentriertes Motiv.
   Dadurch klebt er nicht mehr oben an der Seite.
*/
.stack-mode {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 12px 0 28px;
}

.stack-shell {
    width: 100%;
}

/*
   Keine starre 4:3-Beschneidung mehr.
   Die Papierfläche ist groß genug, das eigentliche Foto bleibt aber immer
   vollständig sichtbar und in seiner natürlichen Proportion.
*/
.photo-stack {
    width: min(700px, 100%);
    height: clamp(390px, 58vh, 650px);
    aspect-ratio: auto;
}

.active-photo-card {
    padding: 16px;
}

.active-photo-card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.photo-caption {
    margin-top: 18px;
}

/* Galerie darf wie gewohnt von oben nach unten laufen. */
.gallery-mode {
    width: 100%;
    padding-top: 12px;
}

@media (max-width: 820px) {
    .album-header {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "signature modes"
            "title title";
        row-gap: 14px;
    }

    .album-signature {
        grid-area: signature;
    }

    .album-header h1 {
        grid-area: title;
        width: 100%;
    }

    .album-header .mode-switch {
        grid-area: modes;
    }

    .photo-stack {
        height: min(60vh, 590px);
    }
}

@media (max-width: 560px) {
    .album-page {
        padding-top: 18px;
    }

    .album-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "signature"
            "title"
            "modes";
        justify-items: center;
    }

    .album-signature,
    .album-header .mode-switch,
    .album-header h1 {
        justify-self: center;
    }

    .album-header h1 {
        font-size: clamp(29px, 9vw, 39px);
    }

    .mode-switch {
        max-width: 340px;
    }

    .stack-mode {
        padding-top: 6px;
    }

    .photo-stack {
        width: 100%;
        height: min(57vh, 520px);
    }

    .active-photo-card {
        padding: 12px;
    }
}


/* v37: dreizeilige mittige Albumüberschrift */
.album-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 18px;
}

.album-heading {
    text-align: center;
}

.album-heading-kicker,
.album-heading-date {
    margin: 0;
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-weight: 400;
}

.album-heading-kicker {
    color: var(--rose);
    font-size: clamp(17px, 2.2vw, 23px);
    letter-spacing: 0.025em;
}

.album-heading h1 {
    margin: 4px 0 3px;
    color: var(--green);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 400;
    line-height: 1.04;
}

.album-heading-date {
    color: var(--rose-deep);
    font-size: clamp(16px, 2vw, 21px);
}

.album-header .mode-switch {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/*
   v37: Fotostapel bewusst wieder kleiner.
   Die Papierfläche bleibt groß genug, das eigentliche Foto bekommt aber
   rundherum Luft und wird niemals auf Kantenhöhe hochgezogen.
*/
.stack-mode {
    justify-content: center;
    padding-top: 4px;
}

.photo-stack {
    width: min(590px, 74vw);
    height: clamp(360px, 50vh, 535px);
}

.active-photo-card {
    padding: 20px;
}

.active-photo-card img {
    width: auto;
    height: auto;
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    object-position: center center;
}

/* Die Beschriftung rückt etwas näher an den nun kleineren Stapel. */
.photo-caption {
    max-width: 590px;
    margin-top: 15px;
}

@media (max-width: 820px) {
    .album-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .album-header .mode-switch {
        position: static;
        transform: none;
        align-self: center;
    }

    .photo-stack {
        width: min(590px, 82vw);
        height: min(50vh, 500px);
    }
}

@media (max-width: 560px) {
    .album-heading h1 {
        font-size: clamp(38px, 12vw, 52px);
    }

    .photo-stack {
        width: 84vw;
        height: min(48vh, 430px);
    }

    .active-photo-card {
        padding: 14px;
    }

    .active-photo-card img {
        max-width: 90%;
        max-height: 90%;
    }
}


/* v38: Fotostapel im Seitenverhältnis des Deckblatts */
.photo-stack {
    width: min(430px, 72vw);
    height: auto;
    aspect-ratio: 4 / 5;
}

/*
   Die Karten behalten exakt dieselbe Hochformat-Form wie das Deckblatt.
   Das Foto selbst wird vollständig innerhalb der Karte angezeigt.
*/
.stack-shadow,
.active-photo-card {
    border-radius: 7px;
}

.active-photo-card {
    padding: 16px;
}

.active-photo-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;

    object-fit: contain;
    object-position: center center;
}

/* Pfeile bleiben mittig auf Höhe des Stapels. */
.stack-shell {
    align-items: center;
}

/* Beschriftung bewusst dicht unter dem Hochformat-Stapel. */
.photo-caption {
    max-width: 430px;
    margin-top: 16px;
}

@media (max-width: 820px) {
    .photo-stack {
        width: min(420px, 76vw);
        height: auto;
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 560px) {
    .photo-stack {
        width: min(360px, 78vw);
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .active-photo-card {
        padding: 12px;
    }
}


/* v39: Licorice nur für „Jana & Jens“ + ruhigerer Hochformat-Fotostapel */
.album-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
}

.album-heading {
    flex: 1;
    text-align: center;
}

.album-heading-kicker {
    margin: 0 0 4px;
    color: var(--rose);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.album-heading h1 {
    margin: 0;
    color: var(--green);
    font-family: "Licorice", cursive;
    font-size: clamp(72px, 9vw, 112px);
    font-weight: 400;
    line-height: 0.88;
}

.album-heading-date {
    margin: 10px 0 0;
    color: var(--rose);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: clamp(18px, 2.1vw, 23px);
    font-weight: 400;
}

.album-header .mode-switch {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* Stapel bewusst wie das Deckblatt im 4:5-Hochformat. */
.photo-stack {
    position: relative;
    width: min(430px, 72vw);
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

/* Der Vordergrundbogen nutzt dieselbe Kartenform. */
.stack-shadow,
.active-photo-card {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
}

/* Mehr Luft um das eigentliche Foto. */
.active-photo-card {
    z-index: 2;
    padding: 22px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Nie beschneiden: immer vollständig und proportional anzeigen. */
.active-photo-card img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

.photo-caption {
    max-width: 430px;
    margin: 16px auto 0;
}

/* Der gesamte Stapel bleibt ruhig in der verfügbaren Fläche zentriert. */
.stack-mode {
    flex: 1;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 0 28px;
}

@media (max-width: 820px) {
    .album-header {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }

    .album-header .mode-switch {
        position: static;
        transform: none;
    }

    .album-heading h1 {
        font-size: clamp(68px, 13vw, 96px);
    }

    .photo-stack {
        width: min(420px, 76vw);
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 560px) {
    .album-heading h1 {
        font-size: clamp(64px, 18vw, 86px);
    }

    .photo-stack {
        width: min(360px, 78vw);
        aspect-ratio: 4 / 5;
    }

    .active-photo-card {
        padding: 14px;
    }
}

/* v40: Überschrift feiner abgestimmt */
.album-heading-kicker {
    color: var(--green) !important;
}

.album-heading h1 {
    color: var(--rose) !important;
    font-size: clamp(52px, 7.2vw, 86px) !important;
    line-height: 0.92 !important;
    margin-top: 2px !important;
}

.album-heading-date {
    color: var(--rose) !important;
    margin-top: 6px !important;
}

.album-heading {
    gap: 0;
}

@media (max-width: 820px) {
    .album-heading h1 {
        font-size: clamp(50px, 10.5vw, 76px) !important;
    }
}

@media (max-width: 560px) {
    .album-heading h1 {
        font-size: clamp(44px, 13.5vw, 64px) !important;
    }
}

/* v41: Jana & Jens filigraner */
.album-heading h1 {
    font-size: clamp(44px, 6vw, 70px) !important;
    font-weight: 400 !important;
    line-height: 0.96 !important;
    letter-spacing: 0.005em !important;
    opacity: 0.94;
    -webkit-text-stroke: 0.2px currentColor;
    text-rendering: geometricPrecision;
}

@media (max-width: 820px) {
    .album-heading h1 {
        font-size: clamp(42px, 9.5vw, 64px) !important;
    }
}

@media (max-width: 560px) {
    .album-heading h1 {
        font-size: clamp(38px, 12vw, 56px) !important;
    }
}


/* v44: dezente Gäste-Navigation */
.guest-menu-toggle {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    left: 18px;
    z-index: 910;
    width: 42px;
    height: 42px;
    padding: 10px 8px;
    border: 0;
    background: rgba(253, 252, 249, 0.78);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 180ms ease, transform 180ms ease;
}

.guest-menu-toggle:hover,
.guest-menu-toggle:focus-visible,
.guest-menu-toggle.is-open {
    opacity: 1;
}

.guest-menu-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    margin: 5px auto;
    background: var(--green, #3f5a49);
    transform-origin: center;
    transition: transform 220ms ease, opacity 180ms ease;
}

.guest-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.guest-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.guest-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.guest-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 880;
    background: rgba(39, 52, 43, 0.16);
    opacity: 0;
    transition: opacity 220ms ease;
}

.guest-menu-backdrop.is-visible {
    opacity: 1;
}

.guest-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: min(265px, 78vw);
    height: 100dvh;
    padding: 86px 32px 32px;
    background: rgba(253, 252, 249, 0.97);
    border-right: 1px solid rgba(63, 90, 73, 0.12);
    box-shadow: 18px 0 44px rgba(53, 75, 61, 0.08);
    transform: translateX(-104%);
    transition: transform 280ms cubic-bezier(.22,.68,.23,1);
}

.guest-menu-panel.is-open {
    transform: translateX(0);
}

.guest-menu-brand {
    margin: 0 0 30px;
    color: var(--rose, #cdabb3);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: 22px;
}

.guest-menu-panel nav {
    display: grid;
    gap: 6px;
}

.guest-menu-link {
    display: block;
    padding: 12px 0;
    color: var(--green, #3f5a49);
    text-decoration: none;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    border-bottom: 1px solid rgba(63, 90, 73, 0.10);
}

.guest-menu-link.is-current {
    color: var(--rose-deep, #c89b99);
}

body.guest-menu-open {
    overflow: hidden;
}


/* v44: moderner Album-Ladevorgang */
.album-loading {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 28px;
    background: var(--background);
    opacity: 1;
    transition: opacity 320ms ease;
}

.album-loading.is-leaving {
    opacity: 0;
}

.album-loading-inner {
    width: min(390px, 86vw);
    text-align: center;
}

.album-loading-botanical {
    display: block;
    width: min(280px, 68vw);
    height: auto;
    margin: 0 auto 22px;
    mix-blend-mode: multiply;
}

.album-loading p {
    margin: 0;
    color: var(--green);
    font-family: "Antic Didone", Didot, Georgia, serif;
    font-size: clamp(20px, 4vw, 27px);
    font-weight: 400;
}

.album-loading-line {
    display: block;
    position: relative;
    width: min(180px, 52vw);
    height: 1px;
    margin: 24px auto 0;
    overflow: hidden;
    background: rgba(63, 90, 73, 0.11);
}

.album-loading-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: var(--rose);
    animation: album-loading-sweep 1.2s ease-in-out infinite;
}

@keyframes album-loading-sweep {
    0% { transform: translateX(-120%); }
    50% { transform: translateX(115%); }
    100% { transform: translateX(330%); }
}

/* Bilder werden erst nach vollständigem Laden sichtbar */
.active-photo-card img {
    opacity: 0;
    transition: opacity 260ms ease;
}

.active-photo-card img.is-photo-ready {
    opacity: 1;
}

.photo-stack.is-waiting::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 8;
    width: 34px;
    height: 1px;
    background: var(--rose);
    transform: translateX(-50%);
    animation: stack-waiting 900ms ease-in-out infinite alternate;
}

@keyframes stack-waiting {
    from { width: 18px; opacity: .35; }
    to { width: 44px; opacity: .95; }
}

.gallery-item {
    background: rgba(63, 90, 73, 0.035);
}

.gallery-item img {
    opacity: 0;
    transition: opacity 280ms ease;
}

.gallery-item img.is-photo-ready {
    opacity: 1;
}

.lightbox-download {
    display: inline-block;
    margin-top: 16px;
    padding: 7px 2px 3px;
    color: rgba(255, 254, 251, 0.92);
    text-decoration: none;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 254, 251, 0.42);
}

.lightbox-download:hover,
.lightbox-download:focus-visible {
    border-bottom-color: rgba(255, 254, 251, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .album-loading,
    .active-photo-card img,
    .gallery-item img,
    .guest-menu-panel,
    .guest-menu-backdrop {
        transition: none;
    }

    .album-loading-line span,
    .photo-stack.is-waiting::after {
        animation: none;
    }
}


/* v47: lange Ranke wächst während der gesamten Ladezeit in eine Richtung */
.album-loading {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1400 !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: #ffffff !important;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 520ms ease,
        visibility 520ms ease;
}

.album-loading.hidden {
    display: none !important;
}

.album-loading.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.album-loading-vine {
    width: min(270px, 64vw);
    color: var(--green);
}

.album-loading-vine svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.album-loading-vine path {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vine-stem {
    fill: none;
    stroke-width: 1.35;
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
}

.vine-leaf {
    fill: rgba(63, 90, 73, 0.10);
    stroke-width: 1.15;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.album-loading.is-animating .vine-stem {
    animation: vine-grow-stem 5s cubic-bezier(.18,.55,.28,.96) forwards;
}

.album-loading.is-animating .vine-leaf {
    animation: vine-grow-leaf 780ms ease-out forwards;
}

/* Die Blätter erscheinen nacheinander entlang der Wuchsrichtung */
.album-loading.is-animating .vine-leaf-1 { animation-delay: 550ms; }
.album-loading.is-animating .vine-leaf-2 { animation-delay: 950ms; }
.album-loading.is-animating .vine-leaf-3 { animation-delay: 1400ms; }
.album-loading.is-animating .vine-leaf-4 { animation-delay: 1850ms; }
.album-loading.is-animating .vine-leaf-5 { animation-delay: 2350ms; }
.album-loading.is-animating .vine-leaf-6 { animation-delay: 2850ms; }
.album-loading.is-animating .vine-leaf-7 { animation-delay: 3350ms; }
.album-loading.is-animating .vine-leaf-8 { animation-delay: 3850ms; }
.album-loading.is-animating .vine-leaf-9 { animation-delay: 4300ms; }

@keyframes vine-grow-stem {
    0% {
        stroke-dashoffset: 360;
        opacity: 0.18;
    }
    8% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes vine-grow-leaf {
    0% {
        stroke-dashoffset: 70;
        opacity: 0;
        transform: scale(0.72);
    }
    35% {
        opacity: 0.55;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 560px) {
    .album-loading-vine {
        width: min(235px, 72vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .album-loading.is-animating .vine-stem {
        animation-duration: 5s;
    }

    .album-loading.is-animating .vine-leaf {
        animation-duration: 900ms;
    }
}



/* v48: verständlicher Original-Download im Vollbild */
.lightbox-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 7px 2px 4px;
}

.lightbox-download-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* v49: weicher Seitenwechsel über das Hamburger-Menü */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 360ms cubic-bezier(.22,.68,.23,1),
        visibility 0s linear 360ms;
}

.page-transition.is-active {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 360ms cubic-bezier(.22,.68,.23,1),
        visibility 0s linear 0s;
}

.page-transition.is-arriving {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.page-transition.is-arriving.is-arrival-fading {
    opacity: 0;
    transition:
        opacity 460ms cubic-bezier(.22,.68,.23,1),
        visibility 0s linear 460ms;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition,
    .page-transition.is-active,
    .page-transition.is-arriving.is-arrival-fading {
        transition-duration: 120ms;
    }
}


/* v55: Videos verhalten sich im Album wie Fotokarten */
.active-photo-card {
    position: relative;
}

.active-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

.active-video.hidden,
.lightbox-video.hidden,
.video-toggle.hidden {
    display: none !important;
}

.video-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);

    width: 62px;
    height: 62px;
    padding: 0;
    border: 1px solid rgba(63, 90, 73, 0.22);
    border-radius: 50%;

    display: grid;
    place-items: center;

    background: rgba(253, 252, 249, 0.84);
    color: #3f5a49;
    box-shadow: 0 8px 28px rgba(25, 35, 29, 0.15);
    backdrop-filter: blur(5px);

    cursor: pointer;
    transition:
        transform 180ms ease,
        background 180ms ease;
}

.video-toggle:hover,
.video-toggle:focus-visible {
    background: rgba(253, 252, 249, 0.94);
}

.video-toggle:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.video-toggle-icon {
    display: block;
    margin-left: 3px;
    font-family: Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
}

.video-toggle.is-playing .video-toggle-icon {
    margin-left: 0;
    font-size: 20px;
    letter-spacing: -3px;
}

.gallery-item {
    position: relative;
}

.gallery-video-badge {
    position: absolute;
    left: 50%;
    top: calc(50% - 13px);
    transform: translate(-50%, -50%);

    width: 42px;
    height: 42px;
    margin: 0 !important;

    display: grid !important;
    place-items: center;

    border-radius: 50%;
    background: rgba(253, 252, 249, 0.82);
    color: #3f5a49;
    box-shadow: 0 5px 18px rgba(25, 35, 29, 0.13);
    backdrop-filter: blur(4px);

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    padding-left: 2px;
    pointer-events: none;
}

.lightbox-media-shell {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 100%;
    max-height: calc(100vh - 170px);
}

.lightbox-media-shell > img,
.lightbox-video {
    grid-area: 1 / 1;
}

.lightbox-video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;
    border-radius: 7px;
    background: #111;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.lightbox-video-toggle {
    z-index: 8;
}

@media (max-width: 560px) {
    .video-toggle {
        width: 56px;
        height: 56px;
    }

    .gallery-video-badge {
        width: 38px;
        height: 38px;
    }
}


/* v55.3: Video-Vorschau exakt wie eine Fotokarte */
.active-photo-card {
    position: absolute !important;
    inset: 0 !important;
}

/* Fotos bleiben vollständig sichtbar. Nur Videoposter werden als Cover beschnitten. */
.active-photo-card img.is-video-poster {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Zähler/Beschriftung bleibt garantiert vor bzw. unter dem Stapel sichtbar. */
.photo-caption {
    position: relative;
    z-index: 4;
}

/* Im Stapel wird niemals das echte Video eingeblendet.
   Play öffnet direkt die Vollbildansicht. */
.active-video {
    display: none !important;
}


/* v55.4: Desktop-Vorschau wie Foto, Mobile als eigener Vollbildplayer */

/* Desktop: Posterkarte exakt identisch zu Fotos. */
.active-photo-card img.is-video-poster {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Mobile Video Player */
@media (max-width: 700px) {
    .photo-lightbox.is-mobile-video {
        display: block;
        padding: 0;
        background: #000;
        backdrop-filter: none;
    }

    .photo-lightbox.is-mobile-video .lightbox-figure {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        display: block;
        transform: none;
        opacity: 1;
    }

    .photo-lightbox.is-mobile-video .lightbox-media-shell {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        display: grid;
        place-items: center;
        background: #000;
        overflow: hidden;
    }

    .photo-lightbox.is-mobile-video .lightbox-image,
    .photo-lightbox.is-mobile-video #lightboxImage {
        max-width: 100vw;
        max-height: 100dvh;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 0;
        box-shadow: none;
    }

    .photo-lightbox.is-mobile-video .lightbox-video {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        object-fit: contain;
        border-radius: 0;
        box-shadow: none;
        background: #000;
    }

    /* Im mobilen Vollbild brauchen wir keine Album-Pfeile / Caption. */
    .photo-lightbox.is-mobile-video .lightbox-arrow,
    .photo-lightbox.is-mobile-video .lightbox-caption {
        display: none !important;
    }

    /* Mobile: das mittige Play/Pause-Symbol wird nur vor dem Start gebraucht. */
    .photo-lightbox.is-mobile-video .lightbox-video-toggle {
        width: 64px;
        height: 64px;
        z-index: 10004;
    }

    /* X klein, halbtransparent, oben rechts. */
    .photo-lightbox.is-mobile-video .lightbox-close {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        z-index: 10006;

        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 50%;
        background: rgba(20, 27, 23, 0.46);
        color: rgba(255, 255, 255, 0.94);
        font-size: 28px;
        line-height: 1;

        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease, background 180ms ease;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .photo-lightbox.is-mobile-video.mobile-video-controls-visible .lightbox-close,
    .photo-lightbox.is-mobile-video:not(.is-visible) .lightbox-close {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-video-controls {
        position: fixed;
        left: max(18px, env(safe-area-inset-left));
        right: max(18px, env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 10005;

        padding: 10px 12px;
        border-radius: 12px;

        background: rgba(20, 27, 23, 0.42);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);

        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    .photo-lightbox.is-mobile-video.mobile-video-controls-visible .mobile-video-controls {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-video-controls.hidden {
        display: none !important;
    }

    .mobile-video-seek {
        width: 100%;
        margin: 0;
        accent-color: #f6f4ef;
        cursor: pointer;
        touch-action: none;
    }

    .mobile-video-seek::-webkit-slider-runnable-track {
        height: 4px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.34);
    }

    .mobile-video-seek::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -7px;
        border: 0;
        border-radius: 50%;
        background: #f6f4ef;
        -webkit-appearance: none;
    }

    .mobile-video-seek::-moz-range-track {
        height: 4px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.34);
    }

    .mobile-video-seek::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 0;
        border-radius: 50%;
        background: #f6f4ef;
    }
}


/* v55.5: echte mobile Vollbildansicht auch für Fotos */
@media (max-width: 700px) {
    .photo-lightbox.is-mobile-photo {
        display: block;
        padding: 0;
        background: #000;
        backdrop-filter: none;
    }

    .photo-lightbox.is-mobile-photo .lightbox-figure {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        display: block;
        transform: none;
        opacity: 1;
    }

    .photo-lightbox.is-mobile-photo .lightbox-media-shell {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;

        display: grid;
        place-items: center;

        background: #000;
        overflow: hidden;
    }

    .photo-lightbox.is-mobile-photo #lightboxImage {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;

        object-fit: contain;
        object-position: center;

        border-radius: 0;
        box-shadow: none;
        background: #000;
    }

    /* Caption und Album-Pfeile stören auf dem Handy im echten Vollbild. */
    .photo-lightbox.is-mobile-photo .lightbox-caption,
    .photo-lightbox.is-mobile-photo .lightbox-arrow {
        display: none !important;
    }

    /* Kleines halbtransparentes X analog zum mobilen Videoplayer. */
    .photo-lightbox.is-mobile-photo .lightbox-close {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        z-index: 10006;

        width: 38px;
        height: 38px;

        display: grid;
        place-items: center;

        border-radius: 50%;
        background: rgba(20, 27, 23, 0.46);
        color: rgba(255, 255, 255, 0.94);
        font-size: 28px;
        line-height: 1;

        opacity: 1;
        pointer-events: auto;

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    /* Bestehendes Wischen funktioniert weiter über die Lightbox-Gestenlogik. */
}


/* v55.6: angenehmerer mobiler Foto-Vollbildmodus + einblendbare Infos */
@media (max-width: 700px) {
    .photo-lightbox.is-mobile-photo {
        background: #1f2922;
    }

    .photo-lightbox.is-mobile-photo .lightbox-media-shell {
        background: #1f2922;
        isolation: isolate;
    }

    .mobile-photo-backdrop {
        position: absolute;
        inset: -28px;
        z-index: 0;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        filter: blur(24px) brightness(0.54) saturate(0.78);
        transform: scale(1.08);
        opacity: 0.92;

        pointer-events: none;
    }

    .mobile-photo-backdrop.hidden {
        display: none !important;
    }

    .photo-lightbox.is-mobile-photo #lightboxImage {
        position: relative;
        z-index: 2;

        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;

        object-fit: contain;
        object-position: center;

        background: transparent;
    }

    /* Leichte Abdunklung nur für Lesbarkeit der Bedienelemente. */
    .photo-lightbox.is-mobile-photo .lightbox-media-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;

        background:
            linear-gradient(
                to bottom,
                rgba(13, 18, 15, 0.30) 0,
                transparent 18%,
                transparent 68%,
                rgba(13, 18, 15, 0.42) 100%
            );
    }

    /* X bleibt oben rechts, aber verschwindet zusammen mit den Foto-Controls. */
    .photo-lightbox.is-mobile-photo .lightbox-close {
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease, background 180ms ease;
    }

    .photo-lightbox.is-mobile-photo.mobile-photo-controls-visible .lightbox-close {
        opacity: 1;
        pointer-events: auto;
    }

    /* Caption + Download werden als dezentes Overlay am unteren Rand wieder genutzt. */
    .photo-lightbox.is-mobile-photo .lightbox-caption {
        position: fixed;
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 10005;

        display: block !important;
        max-width: none;
        margin: 0;
        padding: 12px 14px;

        border-radius: 12px;
        background: rgba(24, 32, 27, 0.58);
        color: rgba(255, 255, 255, 0.94);

        text-align: center;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        opacity: 0;
        pointer-events: none;
        transform: translateY(7px);
        transition:
            opacity 180ms ease,
            transform 180ms ease;
    }

    .photo-lightbox.is-mobile-photo.mobile-photo-controls-visible .lightbox-caption {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .photo-lightbox.is-mobile-photo .lightbox-names,
    .photo-lightbox.is-mobile-photo .lightbox-message {
        color: rgba(255, 255, 255, 0.92);
    }

    .photo-lightbox.is-mobile-photo .lightbox-message:empty,
    .photo-lightbox.is-mobile-photo .lightbox-names:empty {
        display: none;
    }

    .photo-lightbox.is-mobile-photo .lightbox-download {
        color: rgba(255, 255, 255, 0.96);
        border-color: rgba(255, 255, 255, 0.36);
    }

    .photo-lightbox.is-mobile-photo .lightbox-download-icon {
        stroke: currentColor;
    }

    /* Die Album-Pfeile bleiben auf Mobile unsichtbar; Navigation bleibt per Wischen. */
    .photo-lightbox.is-mobile-photo .lightbox-arrow {
        display: none !important;
    }
}


/* v55.7: Mobile Foto-Swipe + dezente Orientierungspfeile */
@media (max-width: 700px) {
    .photo-lightbox.is-mobile-photo .lightbox-arrow {
        position: fixed;
        top: 50%;
        z-index: 10005;

        width: 38px;
        height: 58px;
        margin: 0;
        padding: 0;

        display: grid !important;
        place-items: center;

        border: 0;
        border-radius: 10px;

        background: rgba(20, 27, 23, 0.18);
        color: rgba(255, 255, 255, 0.72);

        font-size: 36px;
        font-weight: 300;
        line-height: 1;

        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);

        transition:
            opacity 180ms ease,
            background 180ms ease,
            color 180ms ease;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .photo-lightbox.is-mobile-photo .lightbox-prev {
        left: 7px;
    }

    .photo-lightbox.is-mobile-photo .lightbox-next {
        right: 7px;
    }

    .photo-lightbox.is-mobile-photo.mobile-photo-controls-visible .lightbox-arrow {
        opacity: 1;
        pointer-events: auto;
    }

    .photo-lightbox.is-mobile-photo .lightbox-arrow:active {
        background: rgba(20, 27, 23, 0.34);
        color: rgba(255, 255, 255, 0.96);
    }

    .photo-lightbox.is-mobile-photo .lightbox-arrow:disabled {
        opacity: 0 !important;
        pointer-events: none;
    }

    /* Horizontales Wischen soll Vorrang vor Browser-Gesten haben,
       vertikale Gesten bleiben unberührt. */
    .photo-lightbox.is-mobile-photo #lightboxImage {
        touch-action: pan-y;
    }
}


/* v55.8: Swipe-Fix + wirklich dezente mobile Pfeile */
@media (max-width: 700px) {
    .photo-lightbox.is-mobile-photo .lightbox-arrow {
        position: fixed !important;
        top: 50% !important;
        z-index: 10005 !important;

        width: 30px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        border: 0 !important;
        border-radius: 0 !important;

        /* Fast keine Fläche, nur ein Hauch zur Orientierung. */
        background: rgba(15, 20, 17, 0.035) !important;
        color: rgba(255, 255, 255, 0.74) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        font-family: Georgia, serif !important;
        font-size: 39px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-50%) !important;

        transition:
            opacity 160ms ease,
            color 160ms ease !important;
    }

    /* Tatsächliche Klassennamen aus dem HTML. */
    .photo-lightbox.is-mobile-photo .lightbox-arrow-left {
        left: 8px !important;
        right: auto !important;
    }

    .photo-lightbox.is-mobile-photo .lightbox-arrow-right {
        right: 8px !important;
        left: auto !important;
    }

    .photo-lightbox.is-mobile-photo.mobile-photo-controls-visible .lightbox-arrow:not(:disabled) {
        opacity: 0.78 !important;
        pointer-events: auto !important;
    }

    .photo-lightbox.is-mobile-photo .lightbox-arrow:active {
        color: rgba(255, 255, 255, 1) !important;
        background: rgba(15, 20, 17, 0.08) !important;
    }

    .photo-lightbox.is-mobile-photo .lightbox-arrow:disabled {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .photo-lightbox.is-mobile-photo #lightboxImage {
        touch-action: pan-y !important;
        -webkit-user-drag: none;
        user-select: none;
    }
}


/* v55.9: dezenter Positionszähler im mobilen Vollbild */
.mobile-lightbox-counter {
    display: none;
}

@media (max-width: 700px) {
    .photo-lightbox.is-mobile-photo .mobile-lightbox-counter,
    .photo-lightbox.is-mobile-video .mobile-lightbox-counter {
        position: fixed;
        top: max(16px, env(safe-area-inset-top));
        left: 50%;
        z-index: 10006;

        display: block;

        padding: 5px 9px;
        border-radius: 8px;

        background: rgba(20, 27, 23, 0.16);
        color: rgba(255, 255, 255, 0.84);

        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;

        letter-spacing: 0.02em;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.24);

        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%);

        transition: opacity 160ms ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .photo-lightbox.is-mobile-photo.mobile-photo-controls-visible .mobile-lightbox-counter,
    .photo-lightbox.is-mobile-video.mobile-video-controls-visible .mobile-lightbox-counter {
        opacity: 1;
    }
}