/* =========================================================
   Sowasdat – Fotoalben (Regal /alben und Blätteransicht /album)
   Schwarze Albumseiten mit Fotoecken, Leinen-Einband mit Goldprägung.
   ========================================================= */
:root {
    --gold: #e2c98a;
    --gold-dunkel: #b9995a;
    --albumseite: #1e1c1a;
    --kreide: #efe8d8;
}

/* ---------------------------------------------------------- Regal */
.alben-kopf { padding-bottom: 2.6rem; }
.alben-lead { max-width: 640px; }
.alben-regal { padding-top: 2.5rem; padding-bottom: 4rem; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2.4rem 2rem; }

.album-cover { display: flex; flex-direction: column; gap: .8rem; color: var(--text-dark); perspective: 900px; }
.album-cover:hover { color: var(--primary-blue); }
.ac-buch {
    --leinen: #1d3b5c;
    position: relative; aspect-ratio: 3 / 4; border-radius: 3px 10px 10px 3px; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.1rem .9rem 1rem 1.35rem;
    background-color: var(--leinen);
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.08) 9px, rgba(255,255,255,.06) 11px, rgba(0,0,0,0) 15px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px);
    box-shadow: 0 14px 28px rgba(13, 30, 50, .28), 0 2px 4px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.04);
    transform-origin: left center; transition: transform .45s cubic-bezier(.3,.7,.2,1), box-shadow .45s ease;
}
.album-cover:hover .ac-buch, .album-cover:focus-visible .ac-buch { transform: rotateY(-16deg); box-shadow: 18px 18px 34px rgba(13, 30, 50, .32), 0 2px 4px rgba(0,0,0,.2); }
.album-cover:focus-visible { box-shadow: none !important; outline: 0; }
.album-cover:focus-visible .ac-titel { text-decoration: underline; }
.farbe-1 .ac-buch { --leinen: #2c4a3b; }
.farbe-2 .ac-buch { --leinen: #6a2a30; }
.farbe-3 .ac-buch { --leinen: #5b4330; }
.farbe-4 .ac-buch { --leinen: #353b45; }
.ac-foto { position: relative; width: 74%; padding: 5px; background: #f2ecdf; box-shadow: 0 3px 8px rgba(0,0,0,.45); rotate: -1.2deg; }
.ac-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd5c4; }
.ac-foto .ecke { --e: 13px; }
.ac-titel { font-family: var(--serif); color: var(--gold); text-align: center; font-size: 1.02rem; line-height: 1.25; text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.12); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-unter { color: rgba(226, 201, 138, .78); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.ac-text { font-size: .85rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Startseite: eine Reihe Alben */
.album-grid-start { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 991.98px) { .album-grid-start { grid-template-columns: repeat(3, 1fr); } .album-grid-start .album-cover:nth-child(n+4) { display: none; } }
@media (max-width: 575.98px) { .album-grid-start { grid-template-columns: repeat(2, 1fr); } .album-grid-start .album-cover:nth-child(n+3) { display: none; } }

/* Fotoecken (Regal und Album) */
.ecke { --e: clamp(14px, 6cqw, 30px); position: absolute; width: var(--e); height: var(--e); background: linear-gradient(135deg, #34312d, #0e0d0c); z-index: 2; pointer-events: none; }
.ecke.lo { left: -3px; top: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ecke.ro { right: -3px; top: -3px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ecke.lu { left: -3px; bottom: -3px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.ecke.ru { right: -3px; bottom: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---------------------------------------------------------- Bühne */
.album-buehne {
    min-height: calc(100vh - 110px); padding: 1rem 0 1.5rem; overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, #f4eee2 0%, #e6dccb 55%, #d3c6b0 100%);
}
.album-buehne.ist-vollbild, .album-buehne:fullscreen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 1rem 0; }
.album-kopfzeile { max-width: 1180px; margin: 0 auto .6rem; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.album-name { font-family: var(--serif); color: var(--primary-blue); font-size: clamp(1.15rem, .9rem + 1.2vw, 1.75rem); margin: 0; text-align: center; font-weight: 400; }
.album-zurueck { font-size: .9rem; font-weight: 600; color: var(--secondary-blue); white-space: nowrap; }
.album-zurueck:hover { color: var(--primary-blue); }
.album-rahmen { position: relative; display: flex; justify-content: center; padding: 1rem 16px 1.25rem; }
.album-lade { display: flex; align-items: center; justify-content: center; min-height: 50vh; color: #6b5d48; }
.album-lade[hidden] { display: none; }

/* ---------------------------------------------------------- Buch */
.buch { position: relative; perspective: 2800px; transition: transform 1s cubic-bezier(.645,.045,.355,1); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.buch:empty { display: none; }
.buch.doppelt { width: max(700px, min(1180px, 94vw, calc((100vh - 330px) * 1.5))); aspect-ratio: 3 / 2; }
.buch.einzeln { width: max(260px, min(560px, calc(100vw - 32px), calc((100vh - 300px) * .75))); aspect-ratio: 3 / 4; }
.ist-vollbild .buch.doppelt, .album-buehne:fullscreen .buch.doppelt { width: min(97vw, calc((100vh - 130px) * 1.5)); }
.ist-vollbild .buch.einzeln, .album-buehne:fullscreen .buch.einzeln { width: min(calc(100vw - 32px), calc((100vh - 130px) * .75)); }
.buch.zu-vorn { transform: translateX(-25%); }
.buch.zu-hinten { transform: translateX(25%); }
.buch.sofort, .buch.sofort .blatt { transition: none !important; }

.blatt { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.645,.045,.355,1); }
.blatt.dreht { will-change: transform; }
.blatt.umgeblaettert { transform: rotateY(-180deg); }
.blatt.aus { display: none; }
.einzeln .blatt { left: 0; width: 100%; transition: transform .8s cubic-bezier(.645,.045,.355,1), opacity .4s ease; }
.einzeln .blatt.umgeblaettert { transform: rotateY(-100deg); opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.645,.045,.355,1), opacity .45s ease .3s; }

.seite { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: size; background-color: var(--albumseite);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px), radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.04), transparent 70%); }
/* Schatten nur für die oben liegenden Blätter, sonst addieren sie sich */
.blatt.sichtbar .seite { box-shadow: 0 22px 44px -18px rgba(40, 28, 10, .5), 0 2px 8px rgba(40, 28, 10, .14); }
.blatt.dreht .seite { box-shadow: 0 14px 34px -14px rgba(40, 28, 10, .38); }
.seite.hinten { transform: rotateY(180deg); }
.seite.rechts { border-radius: 0 10px 10px 0; }
.seite.links { border-radius: 10px 0 0 10px; }
.seite.einzel { border-radius: 6px 12px 12px 6px; }
/* Schatten am Buchrücken */
.seite::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.seite.rechts::after { background: linear-gradient(to right, rgba(0,0,0,.42) 0, rgba(0,0,0,.2) 2%, rgba(0,0,0,.06) 6%, rgba(0,0,0,0) 13%), linear-gradient(to left, rgba(255,255,255,.035), rgba(255,255,255,0) 3%); }
.seite.links::after { background: linear-gradient(to left, rgba(0,0,0,.42) 0, rgba(0,0,0,.2) 2%, rgba(0,0,0,.06) 6%, rgba(0,0,0,0) 13%), linear-gradient(to right, rgba(255,255,255,.035), rgba(255,255,255,0) 3%); }
.seite.einzel::after { background: linear-gradient(to right, rgba(0,0,0,.38) 0, rgba(0,0,0,.1) 3%, rgba(0,0,0,0) 8%); }
/* Licht beim Umblättern */
.blatt.dreht .seite::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; animation-duration: 1s; animation-timing-function: cubic-bezier(.645,.045,.355,1); animation-fill-mode: forwards; }
.blatt.dreht .vorn::before { background: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.18) 60%, rgba(0,0,0,.08)); }
.blatt.dreht .hinten::before { background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.18) 60%, rgba(0,0,0,.08)); }
/* vorwärts: Vorderseite dunkelt bis zur Senkrechten ab, Rückseite hellt danach auf – rückwärts umgekehrt */
.blatt.dreht-vor .vorn::before, .blatt.dreht-zurueck .hinten::before { animation-name: al-licht-weg; }
.blatt.dreht-vor .hinten::before, .blatt.dreht-zurueck .vorn::before { animation-name: al-licht-her; }
@keyframes al-licht-weg { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes al-licht-her { 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } }
.seite.papier { background: #24211e; }

.seite-inhalt { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7cqw 7.5cqw 8cqw; }

/* Einband vorn und hinten */
.seite.art-umschlag, .seite.art-rueck {
    background-color: #183453;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.08), transparent 65%);
}
.seite.art-umschlag.rechts, .seite.art-umschlag.einzel { border-radius: 3px 12px 12px 3px; }
.seite.art-rueck.links { border-radius: 12px 3px 3px 12px; }
.seite.art-umschlag::after { background: linear-gradient(to right, rgba(0,0,0,.45) 0, rgba(0,0,0,.1) 3.5%, rgba(255,255,255,.07) 4.2%, rgba(0,0,0,0) 6%); }
.seite.art-rueck::after { background: linear-gradient(to left, rgba(0,0,0,.45) 0, rgba(0,0,0,.1) 3.5%, rgba(0,0,0,0) 6%); }
.seite-umschlag { align-items: center; justify-content: center; text-align: center; }
.umschlag-praegung { width: 80%; padding: 7cqw 5cqw 6cqw; border: 1px solid rgba(226, 201, 138, .5); outline: 1px solid rgba(226, 201, 138, .25); outline-offset: 1.4cqw; display: flex; flex-direction: column; align-items: center; gap: 4cqw; }
.umschlag-kicker { margin: 0; color: var(--gold); font-size: clamp(9px, 2.1cqw, 13px); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.umschlag-titel { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--gold); font-size: clamp(20px, 7.2cqw, 46px); line-height: 1.15; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.14); }
.umschlag-unter { margin: 0; color: rgba(226, 201, 138, .8); font-size: clamp(10px, 2.3cqw, 14px); letter-spacing: .1em; text-transform: uppercase; }
.umschlag-fuss { position: absolute; bottom: 5cqw; left: 0; right: 0; margin: 0; color: rgba(226, 201, 138, .55); font-family: var(--serif); font-style: italic; font-size: clamp(10px, 2.3cqw, 14px); }
.buch.zu-vorn .abzug.umschlag-foto { width: 66%; rotate: -1.5deg; }
.abzug.umschlag-foto img { width: 100%; max-width: none; max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
.rueck-marke { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--gold); opacity: .55; font-weight: 800; letter-spacing: .02em; font-size: clamp(12px, 3cqw, 18px); }
.rueck-marke img { filter: grayscale(1) brightness(2.2) sepia(.6); opacity: .8; }

/* Vorsatzpapier (Innenseite des Umschlags) */
.seite.art-innen { background-color: #ece2cc; background-image: radial-gradient(circle at 25% 30%, rgba(120, 90, 50, .07) 0 2px, transparent 3px), radial-gradient(circle at 75% 70%, rgba(120, 90, 50, .06) 0 2px, transparent 3px), linear-gradient(160deg, rgba(255,255,255,.4), rgba(0,0,0,.04)); background-size: 18px 18px, 22px 22px, auto; }
.seite-innen { justify-content: center; text-align: center; color: #4c3c28; gap: 2.4cqw; }
.seite-innen .schreibschrift { color: #6b4f2f; }
.innen-titel { margin: 0; font-family: var(--serif); font-weight: 400; color: #2f2416; font-size: clamp(18px, 5.6cqw, 34px); line-height: 1.2; }
.innen-text { margin: 0; font-family: var(--serif); font-size: clamp(13px, 2.9cqw, 17px); line-height: 1.65; max-height: 40%; overflow: hidden; }
.innen-anzahl { margin: 0; font-size: clamp(10px, 2.2cqw, 13px); letter-spacing: .1em; text-transform: uppercase; color: #8a7254; }
.innen-linie { display: block; width: 26%; height: 1px; margin: .6cqh auto; background: linear-gradient(90deg, transparent, rgba(107, 79, 47, .45), transparent); }
.innen-hinweis, .innen-login { margin: 0; font-size: clamp(10px, 2.2cqw, 13px); color: #7b6447; }
.innen-login { font-style: italic; }

/* Fotoseite: Foto und Unterschrift als Gruppe, mittig; Querformate paarweise */
.seite-foto { justify-content: center; align-items: center; gap: 4.5cqh; padding: 6cqh 7.5cqw 8cqh; }
.foto-block { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2cqh; min-height: 0; }
.foto-flaeche { width: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
.seite-foto.eins .foto-flaeche { height: 62cqh; }
.seite-foto.zwei .foto-flaeche { height: 29cqh; }
.abzug { position: relative; display: inline-block; padding: clamp(4px, 2.2cqw, 12px); background: #f3ede0; box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4); transition: box-shadow .3s ease; }
.foto-block .abzug { cursor: zoom-in; }
/* Hover: kein Anheben, nur ein Hauch Licht – das Foto bleibt eingeklebt */
.foto-block .abzug img { transition: opacity .4s ease, filter .3s ease; }
.foto-block .abzug:hover { box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255, 246, 222, .28), 0 0 18px rgba(255, 240, 205, .07); }
.foto-block .abzug:hover img { filter: brightness(1.05); }
.links .abzug { rotate: .6deg; }
.rechts .abzug, .einzel .abzug { rotate: -.5deg; }
.seite-foto.zwei .foto-block + .foto-block .abzug { rotate: .45deg; }
.abzug img { display: block; max-width: calc(100cqw - 2 * clamp(4px, 2.2cqw, 12px) - 8px); max-height: calc(100cqh - 2 * clamp(4px, 2.2cqw, 12px) - 8px); width: auto; height: auto; opacity: 0; transition: opacity .4s ease; }
.abzug.geladen img { opacity: 1; }
.abzug:not(.geladen) { width: 72cqw; height: 86cqh; max-width: 100%; background: #e9e2d2; }
.abzug:not(.geladen) img { position: absolute; }
.abzug.fehlt::before { content: "Bild folgt"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9a8f7c; font-size: 13px; }
.foto-text { display: flex; flex-direction: column; align-items: center; gap: .5em; max-width: 88%; text-align: center; color: var(--kreide); }
.schreibschrift { margin: 0; font-family: 'Italianno', 'Brush Script MT', cursive; font-size: clamp(27px, 7.8cqw, 52px); line-height: .9; color: #f7f0e0; letter-spacing: .01em; }
.schreibschrift.gross { font-size: clamp(30px, 10cqw, 64px); }
.seite-foto.zwei .schreibschrift { font-size: clamp(23px, 6cqw, 40px); }
.foto-nr { font-size: clamp(10.5px, 2.2cqw, 13px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(226, 201, 138, .85); }
.foto-titel { font-family: var(--bs-body-font-family); font-size: clamp(13.5px, 3.2cqw, 17px); font-weight: 400; line-height: 1.5; letter-spacing: .005em; color: rgba(247, 241, 229, .92); -webkit-font-smoothing: antialiased; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.foto-titel.kurz { -webkit-line-clamp: 2; font-size: clamp(13px, 2.9cqw, 15.5px); }
.seitenzahl { position: absolute; bottom: 3.6cqw; font-family: var(--bs-body-font-family); font-size: clamp(10px, 2cqw, 12.5px); font-weight: 600; letter-spacing: .08em; color: rgba(239, 232, 216, .42); }
.rechts .seitenzahl { right: 5.5cqw; }
.links .seitenzahl { left: 5.5cqw; }
.einzel .seitenzahl { left: 0; right: 0; text-align: center; }

/* Ende */
.seite-ende { justify-content: center; align-items: center; text-align: center; gap: 4cqw; color: var(--kreide); }
.seite-ende .innen-text { color: rgba(239, 232, 216, .8); max-width: 85%; }
.ende-knoepfe { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.ende-knoepfe .btn { font-size: clamp(11px, 2.4cqw, 15px); min-width: 62%; }
.ende-knoepfe .btn-outline-light { --bs-btn-color: var(--kreide); --bs-btn-border-color: rgba(239,232,216,.5); }
.ende-knoepfe .btn i { margin-right: .15rem; }
/* Ende der Leseprobe */
.seite-probe { justify-content: center; align-items: center; text-align: center; gap: 3cqw; color: var(--kreide); }
.seite-probe .innen-text { color: rgba(247, 241, 229, .86); max-width: 84%; font-family: var(--bs-body-font-family); font-size: clamp(13px, 3.1cqw, 16.5px); line-height: 1.6; max-height: none; }
.seite-probe .schreibschrift { color: #f7f0e0; }
.probe-kicker { margin: 0; font-size: clamp(10.5px, 2.2cqw, 12.5px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(226, 201, 138, .9); }
.probe-stapel { position: relative; width: 34cqw; aspect-ratio: 286 / 205; margin-bottom: 2cqw; }
.probe-karte { position: absolute; inset: 0; background: #efe8d9; border: clamp(3px, 1.4cqw, 8px) solid #f6f1e6; box-shadow: 0 6px 16px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.probe-karte:nth-child(1) { rotate: -7deg; translate: -8% 2%; background: #d9d0bf; }
.probe-karte:nth-child(2) { rotate: 5deg; translate: 7% 1%; background: #e3dbcb; }
.probe-karte:nth-child(3) { rotate: -1deg; background: linear-gradient(160deg, #ece4d4, #d8ceba); }
.probe-karte i { font-size: clamp(18px, 6cqw, 34px); color: #8a7a60; }
.probe-anmelden { font-weight: 600; }

/* Seitenstapel: zeigt, wie viel schon geblättert ist und wie viel noch kommt */
.stapel { position: absolute; top: 0; width: 50%; height: 100%; z-index: 0; pointer-events: none; background: #24211e; transition: box-shadow .6s ease; }
.stapel[hidden] { display: none; }
.stapel.rechts { left: 50%; border-radius: 0 10px 10px 0; }
.stapel.links { left: 0; border-radius: 10px 0 0 10px; }

/* Eselsohr: hebt beim Überfahren die Ecke der Seite an, die umgeblättert wird */
.eselsohr { --ohr: clamp(44px, 5.4vw, 70px); filter: drop-shadow(-3px -3px 5px rgba(0,0,0,.35)); position: absolute; bottom: 0; width: var(--ohr); height: var(--ohr); z-index: 10000; pointer-events: none; transform: scale(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.eselsohr.rechts { right: 0; transform-origin: 100% 100%; }
.eselsohr.links { left: 0; transform-origin: 0 100%; }
.eselsohr::before, .eselsohr::after { content: ""; position: absolute; inset: 0; }
/* die angehobene Ecke gibt den Blick auf die nächste Seite frei (zur Falz hin im Schatten) … */
.eselsohr.rechts::before { background: linear-gradient(to top left, #2e2b28 0%, #1f1d1b 46%, #141311 50%); clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 10px; }
.eselsohr.links::before { background: linear-gradient(to top right, #2e2b28 0%, #1f1d1b 46%, #141311 50%); clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom-left-radius: 10px; }
/* … und zeigt die Rückseite der Seite mit Licht an der Falz */
.eselsohr.rechts::after { clip-path: polygon(0 0, 100% 0, 0 100%); background: linear-gradient(to top left, #7d766c 50%, #58524b 64%, #33302c 100%); border-top-left-radius: 4px; }
.eselsohr.links::after { clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(to top right, #7d766c 50%, #58524b 64%, #33302c 100%); border-top-right-radius: 4px; }
.buch.zu-vorn .eselsohr.rechts::after { background: linear-gradient(to top left, #f6e7bd 50%, #d9bc77 68%, #a98a4c 100%); }
.buch.ohr-rechts .eselsohr.rechts, .buch.ohr-links .eselsohr.links { transform: scale(1); }
.buch.blaettert .eselsohr { transition: none; transform: scale(0); }
.einzeln .eselsohr.links, .buch.zu-hinten .eselsohr.rechts, .buch.zu-vorn .eselsohr.links { display: none; }

/* ---------------------------------------------------------- Bedienleiste */
.album-leiste { display: flex; align-items: center; gap: .45rem; width: fit-content; max-width: calc(100% - 24px); margin: .2rem auto 0; padding: .4rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(60, 45, 20, .16), 0 1px 0 rgba(255,255,255,.8) inset; }
.album-leiste[hidden] { display: none; }
.album-knopf { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: transparent; color: var(--primary-blue); font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background .15s ease, opacity .15s ease; }
.album-knopf:hover:not(:disabled) { background: #f1ebdf; }
.album-knopf:disabled { opacity: .3; cursor: default; }
.album-knopf-text { width: auto; padding: 0 .95rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.album-knopf-klein { font-size: 1rem; }
.album-trenner { width: 1px; height: 24px; background: rgba(13, 44, 78, .12); margin: 0 .15rem; }
.album-position { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; width: min(360px, 40vw); padding: 0 .3rem; }
#album-seitenzahl { font-size: .8rem; font-weight: 600; color: #5d4f3a; text-align: center; white-space: nowrap; }
#album-regler { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
#album-regler::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--primary-blue) var(--fortschritt, 0%), #ddd3c2 var(--fortschritt, 0%)); }
#album-regler::-moz-range-track { height: 4px; border-radius: 4px; background: #ddd3c2; }
#album-regler::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--primary-blue); }
#album-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 3px solid var(--primary-blue); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
#album-regler::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--primary-blue); }
#album-regler:focus-visible { box-shadow: none !important; }
#album-regler:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.album-hinweis { text-align: center; color: #7a6a52; font-size: .82rem; margin: .7rem 16px 0; transition: opacity .6s ease, transform .6s ease; }
.album-hinweis[hidden] { display: none; }
.album-hinweis.weg { opacity: 0; transform: translateY(-4px); pointer-events: none; }
body.album-modal-offen { overflow: hidden; }

/* ---------------------------------------------------------- Lupe */
.album-lupe, .album-uebersicht { position: fixed; inset: 0; z-index: 1090; opacity: 0; transition: opacity .2s ease; }
.album-lupe[hidden], .album-uebersicht[hidden] { display: none; }
.album-lupe.offen, .album-uebersicht.offen { opacity: 1; }
.album-lupe { display: flex; align-items: center; justify-content: center; padding: 64px 84px 24px; background: rgba(14, 12, 10, .9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); touch-action: pan-y; }
.lupe-figur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.lupe-abzug { display: inline-block; padding: clamp(6px, 1vw, 14px); background: #f3ede0; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lupe-abzug img { display: block; max-width: min(100%, 1200px); max-height: calc(100vh - 250px); width: auto; height: auto; opacity: 0; transition: opacity .3s ease; }
.lupe-abzug.geladen img { opacity: 1; }
.album-lupe figcaption { display: flex; flex-direction: column; align-items: center; gap: .3rem; max-width: 68ch; text-align: center; color: var(--kreide); }
.lupe-titel { font-family: var(--bs-body-font-family); font-size: 1.05rem; line-height: 1.55; color: rgba(247, 241, 229, .94); -webkit-font-smoothing: antialiased; }
.lupe-fuss { font-size: .82rem; color: rgba(239, 232, 216, .6); }
.lupe-fuss a { color: var(--gold); font-weight: 600; }
.lupe-fuss a:hover { color: #fff3cf; }
.lupe-login { font-size: .8rem; font-style: italic; color: rgba(226, 201, 138, .8); }
.lupe-zu { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--primary-blue); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.lupe-zu.statisch { position: static; box-shadow: none; background: #f1ece2; }
.lupe-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, opacity .15s ease; }
.lupe-pfeil:hover:not(:disabled) { background: rgba(255,255,255,.28); }
.lupe-pfeil:disabled { opacity: .2; }
.lupe-pfeil.links { left: 16px; }
.lupe-pfeil.rechts { right: 16px; }

/* ---------------------------------------------------------- Übersicht */
.album-uebersicht { display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(30, 24, 16, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.uebersicht-box { width: min(1100px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: #fbf8f2; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; transform: translateY(8px); transition: transform .2s ease; }
.album-uebersicht.offen .uebersicht-box { transform: none; }
.uebersicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem .8rem 1.4rem; border-bottom: 1px solid #ebe3d4; }
.uebersicht-kopf h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--primary-blue); }
.uebersicht-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.uebersicht-raster { padding: 1.1rem 1.3rem 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: .75rem; align-content: start; }
.uebersicht-foto { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 286 / 205; background: #e9e2d2; box-shadow: 0 1px 3px rgba(60,45,20,.18); transition: box-shadow .2s ease; }
.uebersicht-foto img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease, filter .2s ease; }
.uebersicht-foto.geladen img { opacity: 1; }
.uebersicht-foto:not(.aktuell):hover { box-shadow: 0 0 0 2px rgba(13, 44, 78, .18), 0 1px 3px rgba(60,45,20,.18); }
.uebersicht-foto:hover img { filter: brightness(1.05); }
.uebersicht-foto.aktuell { box-shadow: 0 0 0 3px #fbf8f2, 0 0 0 5px var(--accent); }
.uebersicht-mehr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: #13294a; color: #fff; font-size: .78rem; line-height: 1.2; }
.uebersicht-mehr i { font-size: 1.1rem; opacity: .8; margin-bottom: .15rem; }
.uebersicht-mehr strong { font-size: 1.15rem; }
.uebersicht-mehr span { opacity: .8; }
.uebersicht-mehr:hover { background: #1b3863; }
.uebersicht-nr { position: absolute; left: 6px; bottom: 6px; min-width: 1.8em; padding: .05rem .4rem; border-radius: 999px; background: rgba(13, 30, 50, .78); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }

/* ---------------------------------------------------------- Regal: Suche */
.alben-suche { position: relative; display: flex; align-items: center; gap: 1rem; max-width: 560px; margin: 0 0 2.2rem; }
.alben-suche > i { position: absolute; left: 1rem; color: var(--text-muted); pointer-events: none; }
.alben-suche .form-control { border-radius: 999px; padding: .7rem 1rem .7rem 2.6rem; border-color: var(--line); box-shadow: var(--card-shadow); }
.alben-suche .small { white-space: nowrap; }
.album-grid[hidden], .album-cover[hidden], .section-head[hidden] { display: none !important; }

@media (max-width: 575.98px) {
    .album-kopfzeile { grid-template-columns: auto 1fr auto; gap: .5rem; }
    .album-name { font-size: 1.05rem; }
    .album-leiste { gap: .2rem; padding: .3rem; }
    .album-position { width: auto; flex: 1; min-width: 0; }
    .album-knopf { width: 38px; height: 38px; }
    .album-knopf-text span, .album-knopf-klein, .album-trenner { display: none; }
    .album-knopf-text { width: 38px; padding: 0; }
    .album-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
    .ac-titel { font-size: .9rem; }
    .album-lupe { padding: 60px 12px 16px; }
    .lupe-pfeil { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
    .lupe-abzug img { max-height: calc(100vh - 280px); }
    .uebersicht-raster { grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: .8rem; }
    .album-uebersicht { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .blatt, .einzeln .blatt, .buch, .ac-buch, .abzug, .stapel, .eselsohr { transition: none !important; }
    .blatt.dreht .seite::before { animation: none; }
}