/* NGO Broschüre – eckig, ruhig, Theme-Farben werden geerbt */
/* Darf breiter werden als die Textspalte des Themes (max. 1300 px, mittig) */
.ngo-broschuere {
	--ngo-br-ratio: .707;
	position: relative; outline: none;
	width: min(1300px, calc(100vw - 32px));
	margin: 0 0 2rem calc(50% - min(650px, calc(50vw - 16px)));
}
.ngo-br-titel { text-align: center; margin-bottom: 1rem; }

.ngo-br-buehne { position: relative; min-height: 240px; padding: 0 64px; }
.ngo-br-laden {
	position: absolute; inset: 0; display: grid; place-items: center;
	color: #666; font-size: .95rem;
}
.ngo-br-laden[hidden] { display: none; }
/* Höhe auf ~80 % des Fensters begrenzen: Breite = Höhe × 2 Seiten × Seitenverhältnis */
/* !important: page-flip setzt selbst max-width als Inline-Stil */
.ngo-br-buch { margin: 0 auto; max-width: calc(80vh * 2 * var(--ngo-br-ratio)) !important; }

/* Pfeile links/rechts neben dem Heft */
.ngo-br-pfeil {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	display: grid; place-items: center; width: 48px; height: 48px;
	border: 1px solid rgba(0,0,0,.12); border-radius: 2px; background: rgba(255,255,255,.92);
	color: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.ngo-br-pfeil[hidden] { display: none; }
.ngo-br-pfeil:hover { background: #fff; }
.ngo-br-pfeil-links  { left: 4px; }
.ngo-br-pfeil-rechts { right: 4px; }
.ngo-br-pfeil svg,
.ngo-br-schliessen svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Schließen-X nur im Vollbild */
.ngo-br-schliessen {
	display: none; position: absolute; top: 14px; right: 14px; z-index: 10;
	width: 44px; height: 44px; place-items: center;
	border: 0; border-radius: 2px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
}
.ngo-br-schliessen:hover { background: rgba(255,255,255,.24); }
.ngo-broschuere.ist-vollbild .ngo-br-schliessen { display: grid; }

/* Handy: Pfeile nur unten in der Leiste */
@media (max-width: 700px) {
	.ngo-br-buehne { padding: 0; }
	.ngo-br-pfeil { display: none !important; }
}

.ngo-br-blatt { background: #fff; overflow: hidden; }
.ngo-br-blatt img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.ngo-br-blatt img:not([src]) { visibility: hidden; }

.ngo-br-leiste {
	display: flex; align-items: center; gap: .5rem;
	max-width: 520px; margin: 1rem auto 0; padding: .4rem;
	border: 1px solid rgba(0,0,0,.12); border-radius: 2px; background: #fff;
}
.ngo-br-leiste[hidden] { display: none; }
.ngo-br-leiste button,
.ngo-br-leiste a {
	display: grid; place-items: center; width: 40px; height: 40px; flex: none;
	border: 0; border-radius: 2px; background: transparent; color: inherit; cursor: pointer;
}
.ngo-br-leiste button:hover,
.ngo-br-leiste a:hover { background: rgba(0,0,0,.06); }
.ngo-br-leiste button[hidden] { display: none; }
.ngo-br-leiste svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ngo-br-seite { min-width: 9.5em; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ngo-br-abstand { flex: 1; }

/* Vollbild */
.ngo-broschuere.ist-vollbild {
	max-width: none; margin: 0; padding: 2vh 2vw; background: #2b2b2e;
	display: flex; flex-direction: column; justify-content: center;
}
.ngo-broschuere.ist-vollbild .ngo-br-titel { color: #fff; }
.ngo-broschuere.ist-vollbild .ngo-br-buch { max-width: calc((100vh - 150px) * 2 * var(--ngo-br-ratio)) !important; width: 100%; }
.ngo-broschuere.ist-vollbild .ngo-br-leiste { background: #fff; }