/* ═══════════════════════════════════════════
   RESET & CUSTOM PROPERTIES
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--night:    #06060f;
	--dark:     #0d0d1a;
	--surface:  #131320;
	--border:   #28283c;
	--gold:     #c9a84c;
	--gold-dim: #8a6e2c;
	--text:     #e2d8ce;
	--muted:    #7a7090;
	--f-title:  'Cinzel', Georgia, serif;
	--f-body:   'Lora', Georgia, serif;
	--sat: env(safe-area-inset-top,    0px);
	--sab: env(safe-area-inset-bottom, 0px);
	--sal: env(safe-area-inset-left,   0px);
	--sar: env(safe-area-inset-right,  0px);
}

html { height: 100%; }
body  { min-height: 100%; background: var(--night); color: var(--text);
	font-family: var(--f-body); overflow-x: hidden; }
.hidden { display: none !important; }
button  { cursor: pointer; }
img     { display: block; }

/* ═══════════════════════════════════════════
   STERNE
═══════════════════════════════════════════ */
#stars {
	position: fixed; inset: 0; z-index: 0; pointer-events: none;
	background:
			radial-gradient(ellipse at 22% 28%, rgba(40,18,80,.3) 0%, transparent 55%),
			radial-gradient(ellipse at 78% 72%, rgba(80,18,18,.18) 0%, transparent 50%),
			var(--night);
}
#stars::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
			radial-gradient(1px 1px at  8% 12%, rgba(255,255,255,.65) 0%,transparent 100%),
			radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,.45) 0%,transparent 100%),
			radial-gradient(1.5px 1.5px at 48%  8%, rgba(255,245,200,.55) 0%,transparent 100%),
			radial-gradient(1px 1px at 63% 55%, rgba(255,255,255,.35) 0%,transparent 100%),
			radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.5)  0%,transparent 100%),
			radial-gradient(1px 1px at 14% 72%, rgba(255,255,255,.3)  0%,transparent 100%),
			radial-gradient(1px 1px at 52% 82%, rgba(255,255,255,.4)  0%,transparent 100%),
			radial-gradient(1px 1px at 78% 88%, rgba(255,255,255,.28) 0%,transparent 100%),
			radial-gradient(2px 2px at 38% 52%, rgba(255,230,160,.28) 0%,transparent 100%),
			radial-gradient(1px 1px at 71% 28%, rgba(255,255,255,.48) 0%,transparent 100%),
			radial-gradient(1px 1px at 30% 18%, rgba(255,255,255,.38) 0%,transparent 100%),
			radial-gradient(1px 1px at 92% 64%, rgba(255,255,255,.3)  0%,transparent 100%),
			radial-gradient(1px 1px at  5% 48%, rgba(255,255,255,.28) 0%,transparent 100%),
			radial-gradient(1.5px 1.5px at 58% 75%, rgba(180,200,255,.18) 0%,transparent 100%);
}

/* ═══════════════════════════════════════════
   GEMEINSAME ELEMENTE
═══════════════════════════════════════════ */
/* Buttons */
.btn {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--f-title); font-size: .75rem;
	letter-spacing: .22em; text-transform: uppercase;
	padding: .75rem 1.5rem; border: 1px solid; border-radius: 2px;
	transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
	-webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--night); }
.btn-primary:hover { background: #dbbe62; border-color: #dbbe62;
	box-shadow: 0 0 18px rgba(201,168,76,.3); }
.btn-ghost   { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--gold-dim); color: var(--gold-dim); }
.btn:disabled { opacity: .35; pointer-events: none; }

/* Logo-Bild (NOX-Schriftzug) */
.logo-img {
	width: min(320px, 74vw);
	height: auto;
	margin: 0 auto;
}
/* Per-Band-Titellogo */
.band-title-img {
	height: 25px;
	width: auto;
	margin: .5rem auto;
}
/* Ornament-Trennlinie */
.ornament {
	width: min(240px, 62vw);
	height: auto;
	margin: .9rem auto;
	opacity: .7;
}
.ornament--wide { width: min(320px, 80vw); }
.ornament--sm   { width: min(150px, 42vw); opacity: .5; }

/* Lade-Spinner */
.loader {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	padding: 4rem 2rem;
	font-family: var(--f-title); font-size: .7rem;
	letter-spacing: .3em; color: var(--gold-dim); text-transform: uppercase;
}
.ld { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim);
	animation: ldp 1.3s ease-in-out infinite; }
.ld:nth-child(2) { animation-delay: .18s; }
.ld:nth-child(3) { animation-delay: .36s; }
@keyframes ldp {
	0%,80%,100% { opacity:.2; transform:scale(.8); }
	40%          { opacity:1;  transform:scale(1.2); }
}

/* Einblend-Animation */
.fade-in { animation: fi .35s ease forwards; }
@keyframes fi {
	from { opacity:0; transform:translateY(6px); }
	to   { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════
   VIEW: BÜCHERSCHRANK
═══════════════════════════════════════════ */
#v-shelf {
	position: relative; z-index: 1;
	min-height: 100svh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 2.5rem 0 5rem; gap: 2rem;
}

.shelf-header { text-align: center; padding: 0 1rem; }
.shelf-tagline {
	font-family: var(--f-title);
	font-size: clamp(.55rem, 2.3vw, .78rem);
	letter-spacing: .42em; color: var(--gold-dim);
	text-transform: uppercase; margin-top: .65rem;
}

/* Scrollbares Regal */
.bookcase { width: 100%; }
.shelf-floor { position: relative; padding-bottom: 22px; }
.shelf-floor::after {
	content: '';
	position: absolute;
	bottom: 0; left: -3%; right: -3%; height: 22px;
	background: linear-gradient(180deg, #2e2010 0%, #1c1208 55%, #110d07 100%);
	border-top: 2px solid #4a3520;
	box-shadow: 0 8px 28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,200,100,.08);
}
.shelf-scroll {
	display: flex; align-items: flex-end;
	gap: clamp(6px, 2vw, 16px);
	overflow-x: auto; scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	padding: 1.5rem clamp(1.5rem, 8vw, 4rem) 0;
	justify-content: safe center;
}
.shelf-scroll::-webkit-scrollbar { display: none; }

/* Einzelbuch */
.book {
	position: relative; flex-shrink: 0;
	scroll-snap-align: center;
	height: clamp(260px, 58vw, 330px); width: auto;
	transform-origin: bottom center;
	transition: transform .35s cubic-bezier(.34,1.56,.64,1);
	-webkit-tap-highlight-color: transparent;
}
.book img.spine-img {
	height: 100%; width: auto;
	object-fit: cover;
	border-radius: 1px 3px 3px 1px;
	box-shadow: 4px 0 14px rgba(0,0,0,.6), -1px 0 4px rgba(0,0,0,.35);
	user-select: none; -webkit-user-drag: none;
}
.book--available { cursor: pointer; }
.book--available:hover,
.book--available:focus-visible {
	transform: translateY(-16px) rotateY(-6deg); outline: none;
}
.book--locked {
	filter: grayscale(.35) brightness(.58);
}
.book--locked::after {
	content: 'Bald';
	position: absolute; bottom: 30px; left: 50%;
	transform: translateX(-50%) rotate(-90deg);
	font-family: var(--f-title); font-size: .5rem; letter-spacing: .3em;
	color: rgba(255,255,255,.4); text-transform: uppercase;
	white-space: nowrap; pointer-events: none;
}

.shelf-hint {
	font-family: var(--f-title); font-size: .62rem;
	letter-spacing: .3em; color: var(--gold-dim);
	text-transform: uppercase;
	animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.28;} 50%{opacity:.6;} }

/* ═══════════════════════════════════════════
   VIEW: COVER (Full-Bleed)
═══════════════════════════════════════════ */
#v-cover {
	position: fixed; inset: 0; z-index: 10;
	background: var(--night);
	overflow: hidden;
	/* kein touch-action — JS behandelt Swipe selbst */
}

/* Vollflächiges Cover-Bild — immer 100 % Viewport */
.cover-fullbleed {
	position: absolute; inset: 0; z-index: 0;
	overflow: hidden;
}
.cover-fullbleed img {
	/* absolute + inset: 0 garantiert Vollbild unabhängig vom Bildverhältnis */
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	user-select: none; -webkit-user-drag: none;
}

/* NOX Logo oben mittig */
.cover-top-bar {
	position: absolute; top: 0; left: 0; right: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	padding: calc(2.5rem + var(--sat)) 3.5rem 1.4rem;
	background: linear-gradient(to bottom, rgba(6,6,15,.65) 0%, transparent 100%);
	pointer-events: none;
}
.cover-nox-logo {
	width: min(300px, 72vw);
	height: auto;
	pointer-events: none;
}

/* Zurück-Button oben links */
.cover-back-btn {
	position: absolute; top: calc(.5rem + var(--sat)); left: max(.75rem, var(--sal)); z-index: 3;
	font-family: var(--f-title); font-size: .68rem;
	letter-spacing: .16em; color: rgba(201,168,76,.8);
	background: none; border: none; padding: .5rem .4rem;
	min-width: 44px; min-height: 44px;
	display: flex; align-items: center;
	transition: color .2s;
	-webkit-tap-highlight-color: transparent;
}
.cover-back-btn:hover { color: var(--gold); }

/* Unterer Gradient-Overlay */
.cover-overlay {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
	padding: 5rem 1.5rem calc(2rem + var(--sab));
	background: linear-gradient(
			transparent 0%,
			rgba(6,6,15,.5) 20%,
			rgba(6,6,15,.85) 52%,
			rgba(6,6,15,.97) 75%
	);
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cover-overlay .band-title-img {
	height: calc(90vw / 15);
	width: auto; margin: 0 auto .15rem;
}
.cover-author {
	font-family: var(--f-title);
	font-size: clamp(.58rem, 2vw, .75rem);
	letter-spacing: .38em; color: rgba(201,168,76,.7);
	text-transform: uppercase; margin-bottom: .25rem;
}
.cover-actions {
	display: flex; gap: .75rem; justify-content: center;
	flex-wrap: wrap; margin-top: .9rem;
	height: 4rem;
}
.cover-continue {
	font-family: var(--f-title); font-size: .6rem; letter-spacing: .2em;
	color: var(--gold-dim); margin-top: .55rem; opacity: .75;
	background: none; border: none;
	text-decoration: underline; text-underline-offset: 3px;
}
.cover-continue:hover { opacity: 1; }

/* Demnächst-State */
.cover-coming-soon { height: 4rem; margin-top: .9rem; }
.coming-soon-label {
	font-family: var(--f-title); font-size: .7rem;
	letter-spacing: .3em; color: var(--muted);
	text-transform: uppercase;
}

/* Band-Indikator-Dots */
.cover-band-dots {
	position: absolute; bottom: calc(.5rem + var(--sab)); left: 0; right: 0; z-index: 3;
	display: flex; justify-content: center; gap: 7px;
	pointer-events: none;
}
.cover-band-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(201,168,76,.25);
	transition: background .25s, transform .25s;
}
.cover-band-dot.active { background: var(--gold); transform: scale(1.45); }

/* ═══════════════════════════════════════════
   VIEW: LESER (position:fixed, flex-column)
═══════════════════════════════════════════ */
#v-reader {
	position: fixed; inset: 0; z-index: 20;
	display: flex; flex-direction: column;
	background: var(--night);
}

/* Topbar */
.reader-top {
	flex-shrink: 0;
	display: flex; align-items: center; gap: .75rem;
	padding: calc(.6rem + var(--sat)) max(1rem,var(--sal)) .6rem max(1rem,var(--sal));
	background: rgba(13,13,26,.97);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}
.top-back {
	flex-shrink: 0; font-family: var(--f-title); font-size: .68rem;
	letter-spacing: .18em; color: var(--gold-dim);
	background: none; border: none; padding: .4rem .2rem;
	min-width: 44px; min-height: 44px; display: flex; align-items: center;
	transition: color .2s;
}
.top-back:hover { color: var(--gold); }
.top-chapter {
	flex: 1; background: var(--surface); border: 1px solid var(--border);
	color: var(--text); font-family: var(--f-title); font-size: .66rem;
	letter-spacing: .08em; padding: .42rem .7rem; border-radius: 2px;
	cursor: pointer; max-width: 340px; min-height: 36px;
}
.top-chapter:focus { outline: 1px solid var(--gold-dim); }
.top-progress {
	flex-shrink: 0; font-family: var(--f-title); font-size: .6rem;
	letter-spacing: .18em; color: var(--muted); white-space: nowrap;
}

/* Scrollbarer Inhalt */
.reader-scroll {
	flex: 1; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.reader-page {
	max-width: 680px; width: 100%;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 2rem;
}

/* Szenenheading */
.scene-heading { text-align: center; margin-bottom: 2.5rem; }
.scene-heading .sh-chapter {
	font-family: var(--f-title);
	font-size: clamp(.92rem, 3.5vw, 1.3rem);
	color: var(--gold); letter-spacing: .1em;
}
.scene-heading .sh-sub {
	font-family: var(--f-body); font-style: italic;
	color: var(--muted); font-size: .88rem; margin-top: .3rem;
}
.scene-heading .sh-scene {
	font-family: var(--f-title);
	font-size: clamp(.65rem, 2.3vw, .8rem);
	letter-spacing: .25em; color: var(--muted);
	text-transform: uppercase; margin-top: .85rem;
}
.scene-heading .sh-counted {
	font-family: var(--f-title);
	font-size: clamp(.65rem, 2.3vw, .8rem);
	letter-spacing: .25em; color: var(--muted);
	text-transform: uppercase; margin-top: .85rem;
}

/* Prosa */
.prose {
	font-family: var(--f-body);
	font-size: clamp(1.02rem, 2.8vw, 1.14rem);
	line-height: 1.92; color: var(--text);
}
.prose p { margin-bottom: 1.4em; }
.prose > p:first-child::first-letter {
	font-size: 4.3em; font-family: var(--f-title); font-weight: 700;
	color: var(--gold); float: left; line-height: .75;
	margin: .1em .1em 0 0;
}
.prose em     { font-style: italic; color: #cec4ba; }
.prose strong { font-weight: 600; color: #ede5dc; }
.prose blockquote { display: none; }
.prose hr { border: none; border-top: 1px solid var(--border);
	margin: 2rem auto; width: 35%; }
.prose h2, .prose h3 { font-family: var(--f-title); color: var(--gold-dim);
	letter-spacing: .1em; margin: 1.5rem 0 .75rem; font-size: 1em; }

/* Footer-Navigation (fixed am unteren Rand) */
.scene-nav {
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: space-between; gap: .5rem;
	padding: .8rem max(1.25rem,var(--sal)) calc(.8rem + var(--sab)) max(1.25rem,var(--sar));
	background: rgba(13,13,26,.97);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--border);
}
.scene-nav .btn { padding: .68rem 1rem; font-size: .7rem; }
.nav-dots {
	display: flex; gap: 5px; align-items: center;
	flex-wrap: nowrap; overflow: hidden; max-width: 120px;
}
.nav-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
	background: var(--border); transition: background .2s, transform .2s; }
.nav-dot.active { background: var(--gold); transform: scale(1.4); }

/* ═══════════════════════════════════════════
   VIEW: RÜCKSEITE
═══════════════════════════════════════════ */
#v-backcover {
	position: relative; z-index: 1;
	min-height: 100svh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 2.5rem 1.5rem calc(2.5rem + var(--sab));
	gap: 0;
}
.backcover-wrap {
	display: flex; flex-direction: column;
	align-items: center; gap: 1.75rem;
	max-width: 680px; width: 100%;
}
.backcover-img {
	width: min(260px, 68vw);
	height: auto;
	border-radius: 3px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.backcover-card {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: 3px; width: 100%; padding: 2rem 1.75rem; text-align: center;
}
.bc-badge {
	font-family: var(--f-title); font-size: .6rem; letter-spacing: .42em;
	color: var(--gold-dim); text-transform: uppercase;
}
.bc-sub {
	font-family: var(--f-title); letter-spacing: .2em; color: var(--muted);
	font-size: .78rem; margin-top: .3rem;
}
.bc-quote {
	font-family: var(--f-body); font-style: italic;
	color: var(--text); opacity: .85;
	font-size: clamp(.92rem, 2.8vw, 1.02rem); line-height: 1.85;
}
.bc-next {
	font-family: var(--f-title); font-size: .6rem; letter-spacing: .25em;
	color: var(--muted); text-transform: uppercase; margin-top: 1.5rem;
}
.bc-next strong {
	display: block; color: var(--gold);
	font-size: .82rem; margin-top: .3rem; letter-spacing: .15em;
}
.bc-actions {
	display: flex; gap: .75rem; justify-content: center;
	flex-wrap: wrap; margin-top: 1.25rem;
}

/* ═══════════════════════════════════════════
   DESKTOP (≥700px)
═══════════════════════════════════════════ */
@media (min-width: 700px) {
	/* Cover: Desktop — Cover-Bild bleibt full-bleed, Overlay etwas schlanker */
	.cover-fullbleed img { object-position: center center; }
	.cover-overlay { padding-bottom: calc(2.5rem + var(--sab)); }
	.cover-overlay .band-title-img { width: min(320px, 40vw); }

	/* Rückseite: nebeneinander */
	#v-backcover { flex-direction: row; padding-top: 5rem; }
	.backcover-wrap { flex-direction: row; align-items: flex-start; gap: 3rem; }
	.backcover-img { width: min(200px, 28vw); }
	.backcover-card { text-align: left; }
	.bc-actions { justify-content: flex-start; }
}