/* ==========================================================================
   Religion vor Ort — Site CSS
   Sits on top of Bootstrap 5 + Tabler Icons. Organised by area; see the
   table of contents below.

   1. Brand palette
   2. Base / links
   3. Header & navigation
   4. Home page
   5. Breadcrumb
   6. Status / count badges
   7. Forms
   8. Tables & religion/branch listing
   9. Cards & content boxes
   10. Map & popup
   11. Misc utilities
   12. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand palette
   Restores the app's original accent colours (from the old "Spacelab"
   Bootstrap 3 theme) as CSS custom properties, so they can be reused
   consistently instead of relying on Bootstrap 5's stock theme colours.

   Darkened from the original Spacelab hues (rgb(51,153,243) / rgb(60,181,33)
   / rgb(212,117,0)) to meet WCAG AA 4.5:1 text contrast - these colours are
   used both as text/link colour on white AND as button/badge backgrounds
   with white text on top, so both directions need the same 4.5:1 floor.
   -------------------------------------------------------------------------- */
:root {
	--rvo-blue: rgb(12, 118, 212);
	--rvo-green: rgb(45, 134, 25);
	--rvo-orange: rgb(176, 97, 0);
	--rvo-dark-blue: rgb(68, 110, 155);
	--rvo-dark-grey: #484549;
	--rvo-light-grey: #848484;
	--rvo-light-bg: #eeeeee;
}

/* Point Bootstrap's own theme-colour variables at the brand palette. This
   covers every utility that reads the colour through a custom property at
   run time (.bg-success, .text-success, .border-primary, badges, ...). It
   does NOT cover .btn-success/.btn-primary/.btn-warning (and their
   .btn-outline-* siblings) - Bootstrap bakes those as hex literals into
   per-component variables at build time, so they're overridden explicitly
   below in section 7 (Forms / buttons). Keep both in sync if the palette
   above changes. */
:root {
	--bs-primary: var(--rvo-blue);
	--bs-primary-rgb: 12, 118, 212;
	--bs-success: var(--rvo-green);
	--bs-success-rgb: 45, 134, 25;
	--bs-warning: var(--rvo-orange);
	--bs-warning-rgb: 176, 97, 0;
}

/* --------------------------------------------------------------------------
   2. Base / links
   -------------------------------------------------------------------------- */
html {
	position: relative;
	min-height: 100%;
}
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
	color: var(--rvo-blue);
	text-decoration: none;
}
a:hover,
a:focus {
	color: var(--rvo-blue);
	text-decoration: underline;
}

header {
	background-color: var(--rvo-dark-grey);
	color: white;
}

.container-fluid {
	flex: 1;
}

.flexbox {
	display: flex;
}

/* Dashboard widgets: stack full-width on narrow screens, float side by
   side (only as wide as their content needs, up to half the row) once
   the viewport is wide enough for two of them to sit comfortably next
   to each other. */
.dashboard-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.dashboard-widget {
	flex: 1 1 100%;
}

@media (min-width: 768px) {
	.dashboard-widget {
		flex: 1 1 auto;
		max-width: 50%;
	}
}

/* Sticky-footer layout (body is a flex column, this container is the only
   flex: 1 child) - on any page whose content reaches the bottom of the
   viewport, the last element (a form's action buttons, a view page's "new
   X" link, ...) would otherwise sit flush against the footer with no
   breathing room, since neither Bootstrap's .container-fluid nor individual
   templates add their own bottom spacing there. One padding-bottom here
   covers every page instead of chasing it per template. */
#main-content {
	padding-bottom: 2rem;
}

footer {
	background-color: #666;
	color: white;
	padding: 1rem;
	width: 100%;
}
footer a {
	color: #fff;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. Header & navigation
   -------------------------------------------------------------------------- */

/* Skip-to-content link: invisible until keyboard-focused (Bootstrap's
   .visually-hidden-focusable handles the show/hide), then pinned above the
   fixed navbar (z-index: 1030) so it's never hidden behind it. */
.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1040;
	padding: 0.5rem 1rem;
	background-color: var(--rvo-dark-grey);
	color: #fff;
	border-radius: 0.25rem;
}

/* Themed hero image - homepage only (see templates/layout/bootstrap.php),
   so it never competes with a page's own map any more. It, and #main-content
   on every other page, are the first element right after the fixed navbar -
   both need the same top clearance, handled once below instead of per
   element. */
#headerpicture {
	width: 100%;
	height: 130px;
	overflow: hidden;
	background: grey;
	background-image: url(../img/rvo-header3.jpg);
	background-repeat: repeat-x;
}
nav.fixed-top + * {
	margin-top: 72px;
}

/* Solid, subdued navbar - was 80%-transparent white so it could float over
   #headerpicture on every page; now that the picture only ever appears on
   the homepage (and sits below the nav there, not behind it), the navbar
   no longer needs to borrow the page background through it. */
.navbar {
	background: var(--rvo-light-bg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.navbar .nav-link {
	color: var(--rvo-dark-grey);
}
.navbar .nav-link .ti {
	margin-right: 0.25em;
}

a.navbar-brand {
	font-weight: bold;
	color: var(--rvo-orange);
}

/* Site search, now living in the navbar itself (used to float over
   #headerpicture, back when every page had one). Compact instead of
   full-width, and its CakePHP FormHelper wrapper div (.mb-3) needs its
   margin zeroed so it doesn't throw off the navbar's vertical centering -
   same reasoning as .inline-flex .mb-3 below. */
.header-search-form {
	max-width: 220px;
}
/* FormHelper wraps the input in its own <div class="mb-3">, a block box
   that would otherwise force the submit button onto its own line;
   display: contents drops it from the render tree. That alone isn't
   enough though - Bootstrap's own input-group sizing rule is a direct-child
   selector (.input-group > .form-control), which only matches real DOM
   children and ignores display: contents, so the <input> still needs its
   flex sizing set explicitly here. */
.header-search-form .mb-3 {
	display: contents;
}
.header-search-form .input-group input.form-control {
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Home page
   -------------------------------------------------------------------------- */
.home-header {
	text-align: center;
	font-size: 130%;
}
.home-header h1 {
	font-weight: 400;
	font-size: 200%;
}
.home-header .subtitle {
	color: #595959;
	font-weight: 200;
	font-size: 80%;
}
.home-header p.teaser {
	font-size: 50%;
}
@media (min-width: 480px) {
	.home-header { font-size: 140%; }
}
@media (min-width: 768px) {
	.home-header { font-size: 200%; }
}
@media (min-width: 992px) {
	.home-header { font-size: 260%; }
}

.home-icon {
	text-align: center;
	font-size: 300%;
	color: var(--rvo-blue);
}
.home-body .well {
	height: 18em;
}
.home-wrapper {
	display: flex;
}
.home-wrapper .well {
	margin-right: 1rem;
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Andere Seiten (Hilfe, Erläuterungen…)
   -------------------------------------------------------------------------- */

.rvo-page-wrapper {
	padding: 2rem;
}

.seitenspalte {
	background-color: var(--rvo-light-bg);
	padding-top: 1rem;
}

.rvo_page_content {
	padding-top: 1rem;
}

.actions {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   5. Breadcrumb
   Bootstrap 5 exposes these as empty custom properties by default -
   filling them in restores the light background/rounded corners the old
   Bootstrap 3 breadcrumb had.
   -------------------------------------------------------------------------- */
.breadcrumb {
	--bs-breadcrumb-bg: #f5f5f5;
	--bs-breadcrumb-padding-x: 1rem;
	--bs-breadcrumb-padding-y: 0.5rem;
	--bs-breadcrumb-border-radius: 0.25rem;
}

/* --------------------------------------------------------------------------
   6. Status / count badges
   Bare `.badge` (no bg-* modifier) is used throughout for plain counts;
   give it the brand blue by default. `.bg-success` / `.bg-warning` badges
   are used for member/visitor counts - override to the brand green/orange
   instead of Bootstrap's stock colours (with !important to win over the
   Bootstrap utility, which also uses !important).
   -------------------------------------------------------------------------- */
.badge {
	background-color: var(--rvo-blue);
	color: #fff;
}
.badge.bg-success {
	background-color: var(--rvo-green) !important;
	color: #fff !important;
}
.badge.bg-warning {
	background-color: var(--rvo-orange) !important;
	color: #fff !important;
}

/* Precision indicator: stepped segment bar (replaces the old opacity-faded
   badge, which encoded precision via colour brightness alone - not
   accessible, and its badge shape wrongly suggested it was clickable).
   Segment count filled = precision level (0-4), so the primary signal is
   length/position, not colour; colour (green=members / orange=visitors)
   only echoes the count column it belongs to. */
.precision-bar {
	display: flex;
	gap: 2px;
	width: 100%;
	margin-top: 3px;
	padding: 0 2px;
}
.precision-bar__seg {
	flex: 1 1 0;
	height: 4px;
	border-radius: 2px;
	background: #ddd;
}
.precision-bar--green .precision-bar__seg.is-filled { background: var(--rvo-green); }
.precision-bar--orange .precision-bar__seg.is-filled { background: var(--rvo-orange); }

.status-0, .status-1, .status-2, .status-3 {
	text-align: center;
	border-radius: 50%;
	color: white;
}
.status-0 { background: rgb(238, 238, 238); }
.status-1 { background: var(--rvo-blue); }
.status-2 { background: rgba(60, 181, 33, 0.5); }
.status-3 { background: var(--rvo-green); }

.label-grey {
	font-weight: normal;
	background-color: #aaa;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.inline-flex {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
}

/* The selects in .inline-flex (choose_area) come from Form->control() with
   Bootstrap's stock "mb-3" wrapper (margin-bottom: 1rem !important), which
   only makes sense stacked vertically. Here they sit inline next to the
   "show" button, which has no such margin, so they end up sitting visibly
   lower. Only .inline-flex uses this markup, so this is safe to zero out
   without an !important arms race elsewhere. */
.inline-flex .mb-3 {
	margin-bottom: 0 !important;
}

/* Bootstrap forms carry no padding of their own, so full add/edit forms end
   up with their fields flush against the surrounding column edge. Compact
   toolbar-style forms (area/religion picker, header search, per-page
   selector, the inline "connect picture" form in table cells) are excluded
   - they already manage their own spacing and shouldn't grow a border gap. */
form {
	padding: 1rem;
}
.header-search-form,
#selectPageLimit,
#selectReligion,
td form {
	padding: 0;
}

/* A field that failed HTML5 validation gets a red outline from the browser
   immediately, before the user ever submits - which reads as an error out
   of nowhere. Suppress that; the required marker below is enough. */
.form-control:invalid,
.form-select:invalid,
.form-check-input:invalid {
	box-shadow: none;
	border-color: var(--bs-border-color);
}
.required > label::after,
label.required::after {
	content: " *";
	color: var(--bs-danger, #dc3545);
}

.form-actions .btn {
	margin-bottom: 0;
}

/* Bootstrap bakes .btn-success/.btn-primary/.btn-warning (and their
   .btn-outline-* siblings) as hex literals into per-component variables at
   build time, so overriding the --bs-success/--bs-primary/--bs-warning
   custom properties above (section 1) does not reach them - the submit
   buttons stayed Bootstrap's stock dark green. Re-point the component
   variables at the brand palette directly; hover/active shades are derived
   with color-mix() so they stay in sync automatically if the palette above
   changes. */
.btn-primary {
	--bs-btn-bg: var(--rvo-blue);
	--bs-btn-border-color: var(--rvo-blue);
	--bs-btn-hover-bg: color-mix(in srgb, var(--rvo-blue) 85%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--rvo-blue) 80%, black);
	--bs-btn-active-bg: color-mix(in srgb, var(--rvo-blue) 80%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--rvo-blue) 75%, black);
	--bs-btn-disabled-bg: var(--rvo-blue);
	--bs-btn-disabled-border-color: var(--rvo-blue);
}
.btn-success {
	--bs-btn-bg: var(--rvo-green);
	--bs-btn-border-color: var(--rvo-green);
	--bs-btn-hover-bg: color-mix(in srgb, var(--rvo-green) 85%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--rvo-green) 80%, black);
	--bs-btn-active-bg: color-mix(in srgb, var(--rvo-green) 80%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--rvo-green) 75%, black);
	--bs-btn-disabled-bg: var(--rvo-green);
	--bs-btn-disabled-border-color: var(--rvo-green);
}
.btn-warning {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--rvo-orange);
	--bs-btn-border-color: var(--rvo-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: color-mix(in srgb, var(--rvo-orange) 85%, black);
	--bs-btn-hover-border-color: color-mix(in srgb, var(--rvo-orange) 80%, black);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: color-mix(in srgb, var(--rvo-orange) 80%, black);
	--bs-btn-active-border-color: color-mix(in srgb, var(--rvo-orange) 75%, black);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--rvo-orange);
	--bs-btn-disabled-border-color: var(--rvo-orange);
}
.btn-outline-primary {
	--bs-btn-color: var(--rvo-blue);
	--bs-btn-border-color: var(--rvo-blue);
	--bs-btn-hover-bg: var(--rvo-blue);
	--bs-btn-hover-border-color: var(--rvo-blue);
	--bs-btn-active-bg: var(--rvo-blue);
	--bs-btn-active-border-color: var(--rvo-blue);
	--bs-btn-disabled-color: var(--rvo-blue);
	--bs-btn-disabled-border-color: var(--rvo-blue);
}
.btn-outline-success {
	--bs-btn-color: var(--rvo-green);
	--bs-btn-border-color: var(--rvo-green);
	--bs-btn-hover-bg: var(--rvo-green);
	--bs-btn-hover-border-color: var(--rvo-green);
	--bs-btn-active-bg: var(--rvo-green);
	--bs-btn-active-border-color: var(--rvo-green);
	--bs-btn-disabled-color: var(--rvo-green);
	--bs-btn-disabled-border-color: var(--rvo-green);
}
.btn-outline-warning {
	--bs-btn-color: var(--rvo-orange);
	--bs-btn-border-color: var(--rvo-orange);
	--bs-btn-hover-bg: var(--rvo-orange);
	--bs-btn-hover-border-color: var(--rvo-orange);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--rvo-orange);
	--bs-btn-active-border-color: var(--rvo-orange);
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: var(--rvo-orange);
	--bs-btn-disabled-border-color: var(--rvo-orange);
}

/* --------------------------------------------------------------------------
   8. Tables & religion/branch listing
   -------------------------------------------------------------------------- */
td, th {
	padding: 0.7em;
}
.number {
	text-align: right;
}

/* table-layout: fixed, not the default "auto", so the table actually
   respects .split-table's flex-basis (see section 10) and wraps its cell
   text into that width - auto layout instead sizes columns from cell
   content across the whole table and just overflows past the flex item
   into the map next to it once that content is wider than the column. */
table.branches {
	width: 100%;
	/*table-layout: fixed;*/
}
table.branches td, table.branches th {
	padding: 5px;
	overflow-wrap: break-word;
}
/* table-layout: fixed (above) needs explicit column widths to work with;
   taking them from the first row's cells is fragile because that row's
   name cell spans the icon column (col 2, marker) and the name column
   (col 3) with colspan="2" - with no width of its own, fixed layout then
   splits the two spanned columns evenly, forcing the narrow marker-icon
   column to match the wide name column and pushing the branch names far
   to the right. A <colgroup> sets widths per column directly instead, so
   it's immune to how any given row spans its cells; the name column
   (3rd, unstyled) gets whatever remains. */
table.branches .col-icon {
	width: 2.2em;
}
table.branches .col-number {
	width: 6.5em;
}
th.th-badge {
	width: 5em;
}
th.number {
	width: 7em;
}

tr.branch {
	font-size: 100%;
	font-weight: bold;
	border-top: 1px dotted var(--rvo-blue);
}
tr.branch .badge {
	font-size: 80%;
}
tr.org span {
	font-size: 60%;
}
tr.religions {
	padding-top: 0.5em;
	margin-top: 0.5em;
	background: rgb(220, 220, 220);
}
tr.labels {
	background: rgb(238, 238, 238);
}
.sum-mg-title {
	font-weight: bold;
	color: var(--rvo-green);
}
.sum-tn-title {
	font-weight: bold;
	color: var(--rvo-orange);
}

.waiting {
	border: 1px solid red;
}
.sum {
	font-weight: normal;
}
.xsmall {
	font-size: 70%;
}
.comment {
	font-size: 70%;
	color: #595959;
}
.own-entry {
	color: var(--rvo-orange);
}

table.table-striped tbody tr:nth-child(even) {
  background-color: var(--rvo-light-bg);
}

/*
table.table-striped tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
*/

/* --------------------------------------------------------------------------
   9. Cards & content boxes
   -------------------------------------------------------------------------- */
.card {
	margin: 1em 1em 1em 0;
}

.card-header {
	background-color: var(--rvo-blue);
}
.card-header, .card-header a {
	color: white;
}
.card-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1rem
}

.border-primary {
	border-color: var(--rvo-blue);
}

.list-group-item.active {
	background-color: var(--rvo-blue);
	border-color: var(--rvo-blue);
}

/* Bootstrap 5 dropped the .well component; kept as a plain content-box class
   for the places still using it (home page teaser boxes, feedback form). */
.well {
	padding: 1.5rem;
	background-color: var(--bs-tertiary-bg, #f8f9fa);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: 0.375rem;
}

.infoline {
	padding: 0;
	background: #eee;
}
.infoline h4 {
	margin: 0;
}

.statusinfo {
	padding: 0.5em;
	font-size: 70%;
	color: #595959;
	float: right;
	line-height: 1.4;
}

/* Longer free-text (branch/organisation description etc.) reads better a
   touch larger than the surrounding UI chrome. */
.tab-pane p, .tab-pane li {
	font-size: 1.05rem;
}

.info {
	background: #bbb;
	color: var(--rvo-dark-grey);
}

/* --------------------------------------------------------------------------
   10. Map & popup
   -------------------------------------------------------------------------- */
/* Table/map split (list + map, Map-Modus "table"/"both"/"map"): one shared
   flex row, used by every page that shows a religions/branches/locations
   table next to the map. Table and map are simple flex children - whichever
   one isn't rendered for the current mode just leaves the other to fill
   100% on its own, no per-mode width class needed.
   In "both" mode specifically, the table gets a fixed share of the row
   (below) and the map gets whatever is left over - deliberately not a
   percentage-based max-width on flex-basis: auto, which let the table's own
   unwrapped content width win the flex calculation and made it sit at the
   cap on every page with more than a couple of short rows, leaving the map
   the same narrow strip regardless of how much the table's content could
   otherwise have wrapped into less space. Below the md breakpoint there's
   no room for two columns, so both panes stack full-width instead. */
.split-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.split-table {
	flex: 1 1 auto;
	min-width: 0;
}
/* flex-basis: 0 (not "auto") is deliberate: it makes this item ignore its
   own content size when the row decides whether it still fits on one line.
   The map's content is a <canvas> that OpenLayers sizes to match whatever
   width #map last had - if this item's hypothetical size were based on
   that (flex-basis: auto), the canvas's own last-rendered width feeds back
   into the flex calculation and can tip the row into wrapping even though
   there's room, in a self-reinforcing way that's hard to reproduce
   reliably. With flex-basis: 0 it always just grows to fill whatever the
   table leaves over, regardless of what's inside it. */
.split-map {
	flex: 1 1 0%;
	min-width: 0;
	position: relative;
}

/* "Show/hide map" toggle (element map-view-toggle.php) shares its row with
   whatever heading/toolbar already sits directly above the split-row (see
   .view-header-row), instead of taking a full empty row of its own -
   pushed to the far right of that row, which happens to line up above the
   map pane below it (map is the split-row's right-hand column in every
   mode: table-only, split, map-only). */
.view-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.view-header-row h1 {
	margin-bottom: 0;
}
.map-view-toolbar {
	flex-shrink: 0;
}

/* Fullscreen/half-screen toggle (element map-fullscreen-toggle.php):
   overlaid on the map's own top-right corner, so it needs to sit above
   OpenLayers' canvas and its own controls (zoom buttons etc. render at low
   z-index values with no stacking context of their own). */
.map-fullscreen-btn {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 500;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.15);
}
.map-fullscreen-btn:hover {
	background: #fff;
}
@media (min-width: 768px) {
	/* ~40/60 on a standard desktop viewport - a fixed flex-basis (not a
	   max-width capping flex-basis: auto) so the table actually wraps its
	   own content down to this width instead of the cap only ever taking
	   effect once content happens to be wider. */
	.split-row.split-both .split-table {
		flex: 0 1 40rem;
	}
}
@media (max-width: 767.98px) {
	.split-table,
	.split-map {
		flex-basis: 100%;
	}
}
#map {
	width: 100%;
	height: 100%;
}
#popup-orig {
	font-size: 80%;
	margin-left: -92px;
	margin-bottom: 50px;
	border-radius: 5px;
	padding: 5px;
	background-color: white;
}
#popup {
	position: absolute;
	background-color: white;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #cccccc;
	bottom: 12px;
	left: -50px;
	min-width: 280px;
}
#popup:after, .ol-popup:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#popup:after {
	border-top-color: white;
	border-width: 10px;
	left: 48px;
	margin-left: -10px;
}
#popup:before {
	border-top-color: #cccccc;
	border-width: 11px;
	left: 48px;
	margin-left: -11px;
}

/* --------------------------------------------------------------------------
   11. Misc utilities
   -------------------------------------------------------------------------- */
hr.small {
	margin: 5px 0;
}
.spacer-vertical {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}
.space-right {
	margin-right: 5px;
}
.right {
	text-align: right;
}
.mcspacer {
	display: inline-block;
	width: 6em;
}

/* Textcaptcha */
.s { color: black; background-color: black; width: 1em; }
.w { color: white; background-color: white; width: 1em; }
.tc { line-height: 1.1; }

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
	body { font-size: 70%; }
	/* !important: Bootstrap's own rules for some of what gets marked
	   .noprint - e.g. .navbar-expand-lg .navbar-collapse - are already
	   !important at this breakpoint, and would otherwise win. */
	.noprint { display: none !important; }

	/* The whole top nav is .noprint (see templates/layout/bootstrap.php)
	   except the "Religion vor Ort" brand link, which stays so a printout
	   still says what site it came from - undo the fixed positioning that
	   pins it over the page on screen, or it would overlay/repeat on every
	   printed page instead of sitting once at the top. */
	.navbar.fixed-top {
		position: static;
	}
	/* .navbar-collapse.noprint alone loses to Bootstrap's own
	   ".navbar-expand-lg .navbar-collapse{display:flex!important}" at this
	   breakpoint - same !important, but that selector has higher
	   specificity (two classes). Matching it here with an extra class
	   ties the specificity, and rvo.css loading after bootstrap.min.css
	   then wins the tie. */
	.navbar-expand-lg .navbar-collapse.noprint {
		display: none !important;
	}

	/* No Bootstrap button (add/edit/save/cancel/delete, view toggles like
	   #toggle_orgs/#toggle_locs, pagination, the region form's submit, ...)
	   is operable on paper, and none carries information beyond what's
	   already in the surrounding text - so drop all of them at once instead
	   of chasing each one down per template. */
	.btn {
		display: none !important;
	}

	/* Edit links (pencil icon) are pure actions with nothing to read once
	   printed - :has() targets the enclosing <a> from the icon's class,
	   the same way IconHelper renders it everywhere (<i class="ti
	   ti-pencil">), so this covers every template without listing them. */
	a:has(> .ti-pencil) {
		display: none !important;
	}

	/* The map is a <canvas> OpenLayers sizes to match its on-screen pixel
	   box once, at load. Print has no real viewport, so #map's height: 100%
	   (inherited from .split-map's flex cross-axis stretch) balloons to the
	   printed page's full content length - CSS then stretches the canvas's
	   small original bitmap over that much taller box, which is what
	   actually distorts it. The live map is therefore always dropped from
	   print; where a map is actually visible on screen, webroot/js/map_print.js
	   freezes it into a plain #map-print-image (at the screen proportions and
	   markers of that moment) right before printing, and that image is what
	   actually appears on paper instead. */
	#map,
	#popup {
		display: none !important;
	}
	.split-row {
		display: block;
	}
	.split-table {
		max-width: 100%;
	}
	/* Table+map ("both" mode): table first, map image below it - stacking
	   them is simplest and matches print's single-column flow; nothing more
	   deliberate ("floated" etc.) is needed. Map-only mode: only the image
	   prints, there's no table to stack it under. Table-only mode: neither
	   .map-container nor #map-print-image exist in the DOM, so this section
	   has no effect and only the table prints. */
	/* !important: needed to win over the plain #map-print-image { display:
	   none } rule below, which comes later in this file and would otherwise
	   take the cascade (same specificity, later source order beats a
	   media-scoped rule) and keep the image hidden even when printing. */
	#map-print-image {
		display: block !important;
		max-width: 100%;
		height: auto;
	}
}

/* Hidden outside print - it only exists to be printed in place of the live
   #map (see @media print above and webroot/js/map_print.js). */
#map-print-image {
	display: none;
}