/*
 * Grundgeruest: Zuruecksetzen, Typografie, Raster, Buttons.
 * Werte stehen in tokens.css.
 */

/* --- Zuruecksetzen --------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--pdbb-weiss);
	color: var(--pdbb-text);
	font-family: var(--pdbb-schrift-text);
	font-size: var(--pdbb-gr-text);
	line-height: var(--pdbb-zeilenhoehe);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* --- Typografie ------------------------------------------------------ */

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--pdbb-abstand-2);
	font-family: var(--pdbb-schrift-headline);
	font-weight: 700;
	line-height: var(--pdbb-zeilenhoehe-eng);
	text-wrap: balance;
}

h1 { font-size: var(--pdbb-gr-h1); }
h2 { font-size: var(--pdbb-gr-h2); }
h3 { font-size: var(--pdbb-gr-h3); }
h4 { font-size: var(--pdbb-gr-gross); }

p,
ul,
ol {
	margin: 0 0 var(--pdbb-abstand-3);
}

p {
	text-wrap: pretty;
}

a {
	color: var(--pdbb-text);
	text-decoration-color: var(--pdbb-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: color var(--pdbb-dauer) var(--pdbb-kurve);
}

a:hover {
	color: var(--pdbb-orange-abgetoent);
}

/*
 * Tastaturbedienung sichtbar halten. Ohne das ist die Seite fuer jeden
 * unbenutzbar, der nicht mit der Maus arbeitet.
 */
:focus-visible {
	outline: 3px solid var(--pdbb-blau);
	outline-offset: 3px;
}

/* Sprungziele nicht unter der Overlay-Navigation verstecken. */
h1[id],
h2[id],
h3[id],
h4[id],
section[id],
.pdbb-sprungziel,
:target {
	scroll-margin-top: calc(var(--pdbb-navhoehe) + var(--pdbb-abstand-2));
}

/* Nur fuer Screenreader, etwa der Sprunglink zum Inhalt. */
.pdbb-nur-vorlesen {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pdbb-nur-vorlesen:focus {
	position: fixed !important;
	top: var(--pdbb-abstand-2);
	left: var(--pdbb-abstand-2);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: var(--pdbb-abstand-1) var(--pdbb-abstand-2);
	clip-path: none;
	background: var(--pdbb-weiss);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* --- Raster ----------------------------------------------------------
 *
 * Jeder Bereich, der .pdbb-raster traegt, spannt drei Spalten auf: Rand,
 * Inhalt (hoechstens 1080 px), Rand. Seine Kinder landen automatisch in
 * der Inhaltsspalte; was ueber die ganze Breite laufen soll, bekommt
 * .pdbb-vollbreite.
 *
 * Bewusst ueber Grid geloest und nicht ueber 100vw: 100vw rechnet die
 * Breite des Rollbalkens mit und erzeugt am Desktop waagerechtes
 * Scrollen. Ausserdem traegt derselbe Mechanismus spaeter den Slider,
 * der mitten im Inhalt stehen und trotzdem full-bleed laufen soll.
 */

.pdbb-raster {
	display: grid;
	grid-template-columns:
		minmax(var(--pdbb-rand), 1fr)
		min(var(--pdbb-breite), 100% - 2 * var(--pdbb-rand))
		minmax(var(--pdbb-rand), 1fr);
	align-content: start;
}

/*
 * Bewusst Spaltennummern statt benannter Linien: Benannte Spalten
 * entstehen in CSS nur aus Linienpaaren, die auf -start und -end enden.
 * Eine deutsche Benennung mit -ende bildet keine Spalte, und der Browser
 * legt die Inhalte dann stillschweigend rechts daneben.
 */
.pdbb-raster > * {
	grid-column: 2;
}

.pdbb-raster > .pdbb-vollbreite {
	grid-column: 1 / -1;
}

.pdbb-inhalt {
	padding-block: var(--pdbb-abstand-5);
	row-gap: 0;
}

/* --- Buttons ---------------------------------------------------------
 *
 * Umriss in Orange, bei Hover faellt die Flaeche von links ein. Dieselbe
 * Animation tragen spaeter die Menuepunkte.
 */

.pdbb-button {
	position: relative;
	isolation: isolate;          /* haelt das Fuellelement hinter dem Text */
	display: inline-block;
	padding: 0.7em 1.8em;
	border: 2px solid var(--pdbb-orange);
	background: transparent;
	color: var(--pdbb-button-text-ruhe);
	font-weight: 600;
	font-size: var(--pdbb-gr-klein);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-button::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pdbb-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-button:hover,
.pdbb-button:active,
.pdbb-button:focus-visible {
	color: var(--pdbb-button-text-gefuellt);
}

.pdbb-button:hover::before,
.pdbb-button:active::before,
.pdbb-button:focus-visible::before {
	transform: scaleX(1);
}

/*
 * Aktiver Zustand: aktuelle Seite im Menue, aktiver Filter-Chip.
 * Blau gefuellt statt orange, damit "hier bin ich" und "hier koennte ich
 * hin" nicht dieselbe Farbe tragen.
 */
.pdbb-button--aktiv,
.pdbb-button[aria-current='page'],
.pdbb-button[aria-pressed='true'] {
	border-color: var(--pdbb-blau);
	color: var(--pdbb-button-text-gefuellt);
}

.pdbb-button--aktiv::before,
.pdbb-button[aria-current='page']::before,
.pdbb-button[aria-pressed='true']::before {
	background: var(--pdbb-blau);
	transform: scaleX(1);
}
/* --- Kopfbereich und Navigation --------------------------------------
 *
 * Die Leiste liegt als Overlay ueber dem Motiv, nicht als eigener Balken
 * darueber, und sie laeuft beim Scrollen mit.
 */

.pdbb-kopfbereich {
	position: relative;
}

/*
 * Die Leiste laeuft mit und liegt als eigene Ebene ueber allem. Ueber
 * dem Kopfmotiv ist sie durchsichtig, sobald gescrollt wird, legt sie
 * sich auf Anthrazit - sonst steht weisse Schrift irgendwann auf
 * weissem Grund.
 */
.pdbb-kopf {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 40;
	padding-block: var(--pdbb-abstand-2);
	color: var(--pdbb-weiss);
	transition: background-color var(--pdbb-dauer) var(--pdbb-kurve),
		padding-block var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-kopf--gescrollt {
	background-color: rgba(43, 46, 49, 0.94);
	padding-block: var(--pdbb-abstand-1);
}

@supports (backdrop-filter: blur(6px)) {
	.pdbb-kopf--gescrollt {
		background-color: rgba(43, 46, 49, 0.82);
		backdrop-filter: blur(8px);
	}
}

.pdbb-kopf-zeile {
	display: flex;
	gap: var(--pdbb-abstand-2);
	align-items: center;
	justify-content: space-between;
	min-height: var(--pdbb-navhoehe);
}

/* --- Logo -------------------------------------------------------------
 *
 * Das Logo wird weiss eingefaerbt. Es steht entweder ueber einem Motiv
 * oder auf der dunklen Leiste, in beiden Faellen braucht es Weiss.
 * brightness(0) macht alle Farben schwarz, invert(1) daraus Weiss -
 * das funktioniert bei einem einfarbigen Logo mit durchsichtigem Grund,
 * unabhaengig davon, welchen Grauton die Datei mitbringt.
 */
.pdbb-logo {
	position: relative;
	z-index: 50;
	display: flex;
	align-items: center;
}

.pdbb-logo img,
.pdbb-logo .custom-logo {
	width: auto;
	height: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
	filter: brightness(0) invert(1);
}

.pdbb-name {
	margin: 0;
	color: inherit;
	font-family: var(--pdbb-schrift-headline);
	font-size: var(--pdbb-gr-h3);
	line-height: 1.1;
	text-decoration: none;
}

/* --- Statisches Kopfmotiv --------------------------------------------
 * Auf Unterseiten. Die Startseite bekommt in Schritt 3 den Slider.
 */

.pdbb-kopfbild {
	position: relative;
	align-content: end;
	min-height: var(--pdbb-kopfhoehe);
	padding-block: calc(var(--pdbb-navhoehe) + var(--pdbb-abstand-4)) var(--pdbb-abstand-5);
	background-color: var(--pdbb-text);
	background-image: var(--pdbb-kopfbild-datei, none);
	background-position: center;
	background-size: cover;
	color: var(--pdbb-weiss);
}

/*
 * Abdunklung oben und unten. Ohne sie steht weisse Schrift bei einem
 * hellen Motiv auf hellem Grund - genau der Fall, der bei Gegenlicht
 * und Schnee regelmaessig vorkommt.
 *
 * Absolut positioniert, damit das Pseudoelement nicht als Rasterzelle
 * zaehlt und die Spalten verschiebt.
 */
.pdbb-kopfbild::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(43, 46, 49, 0.55), transparent 35%),
		linear-gradient(to top, rgba(43, 46, 49, 0.65), transparent 45%);
}

.pdbb-kopfbild--ohne-motiv::before {
	background: none;
}

.pdbb-kopfbild-titel {
	position: relative;
	margin: 0;
}

/* --- Burger ----------------------------------------------------------
 * Ohne JavaScript ueberfluessig, denn dann steht das Menue ohnehin offen.
 */

.pdbb-ohne-js .pdbb-burger {
	display: none;
}

.pdbb-burger {
	/*
	 * Liegt ueber dem geoeffneten Menue, sonst verdeckt die Flaeche
	 * genau den Schalter, mit dem man sie wieder schliesst.
	 */
	position: relative;
	z-index: 50;
	display: flex;
	gap: 0.6em;
	align-items: center;
	padding: 0.5em 0.2em;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--pdbb-gr-klein);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.pdbb-burger-striche,
.pdbb-burger-striche::before,
.pdbb-burger-striche::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: transform var(--pdbb-dauer) var(--pdbb-kurve),
		opacity var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-burger-striche {
	position: relative;
}

.pdbb-burger-striche::before,
.pdbb-burger-striche::after {
	content: '';
	position: absolute;
	inset-inline: 0;
}

.pdbb-burger-striche::before { top: -0.45rem; }
.pdbb-burger-striche::after  { top: 0.45rem; }

/* Im geschlossenen Zustand steht "Menü", im offenen "Schließen". */
.pdbb-burger-text--auf {
	display: none;
}

.pdbb-menue-offen .pdbb-burger-text--zu {
	display: none;
}

.pdbb-menue-offen .pdbb-burger-text--auf {
	display: inline;
}

/* Offen: aus den drei Strichen wird ein Kreuz. */
.pdbb-menue-offen .pdbb-burger-striche {
	background: transparent;
}

.pdbb-menue-offen .pdbb-burger-striche::before {
	transform: translateY(0.45rem) rotate(45deg);
}

.pdbb-menue-offen .pdbb-burger-striche::after {
	transform: translateY(-0.45rem) rotate(-45deg);
}

/* --- Menue, Grundzustand: Handy und Tablet hoch ----------------------- */

.pdbb-mit-js .pdbb-nav {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	align-content: center;
	padding: var(--pdbb-abstand-5) var(--pdbb-rand);
	background: var(--pdbb-text);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--pdbb-dauer) var(--pdbb-kurve),
		visibility var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-mit-js .pdbb-menue-offen .pdbb-nav,
body.pdbb-menue-offen .pdbb-nav {
	visibility: visible;
	opacity: 1;
}

/* Hinter dem offenen Menue soll die Seite nicht mitscrollen. */
body.pdbb-menue-offen {
	overflow: hidden;
}

.pdbb-navliste {
	display: grid;
	gap: var(--pdbb-abstand-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pdbb-navpunkt {
	position: relative;
}

.pdbb-navlink {
	position: relative;
	isolation: isolate;
	display: inline-block;
	padding: 0.45em 0.9em;
	color: inherit;
	font-size: var(--pdbb-gr-klein);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--pdbb-dauer) var(--pdbb-kurve);
}

/* Dieselbe Fuellung von links wie bei den Buttons. */
.pdbb-navlink::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pdbb-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--pdbb-dauer) var(--pdbb-kurve);
}

@media (hover: hover) {
	.pdbb-navlink:hover {
		color: var(--pdbb-button-text-gefuellt);
	}

	.pdbb-navlink:hover::before {
		transform: scaleX(1);
	}
}

/* Auf Tippgeraeten tut es der Druckzustand, dort gibt es kein Hover. */
.pdbb-navlink:active::before,
.pdbb-navlink:focus-visible::before {
	transform: scaleX(1);
}

.pdbb-navlink:active,
.pdbb-navlink:focus-visible {
	color: var(--pdbb-button-text-gefuellt);
}

/* Aktuelle Seite: blau gefuellt, nicht orange. */
.pdbb-navlink[aria-current='page'] {
	color: var(--pdbb-button-text-gefuellt);
}

.pdbb-navlink[aria-current='page']::before {
	background: var(--pdbb-blau);
	transform: scaleX(1);
}

/* Der Weg zum Kundenportal ist kein Seitenpunkt, sondern ein Ausgang. */
.pdbb-navlink--portal {
	border: 2px solid currentColor;
}

/* --- Unterpunkte ------------------------------------------------------ */

.pdbb-navpunkt .sub-menu {
	display: grid;
	gap: var(--pdbb-abstand-1);
	margin: var(--pdbb-abstand-1) 0 var(--pdbb-abstand-2) var(--pdbb-abstand-2);
	padding: 0;
	list-style: none;
}

/* Mit JavaScript eingeklappt, bis jemand den Schalter drueckt. */
.pdbb-mit-js .pdbb-navpunkt--mit-unterpunkten .sub-menu {
	display: none;
}

.pdbb-mit-js .pdbb-navpunkt--offen .sub-menu {
	display: grid;
}

.pdbb-unterpunkte-schalter {
	position: absolute;
	top: 0;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pdbb-unterpunkte-schalter::before {
	content: '';
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.15rem, -0.15rem);
	transition: transform var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-navpunkt--offen > .pdbb-unterpunkte-schalter::before {
	transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

/* --- Umschaltung auf die waagerechte Leiste ---------------------------
 *
 * Breite UND Ausrichtung UND Hoehe. Allein ueber die Breite faellt ein
 * iPad quer in die falsche Variante; allein ueber Breite und Ausrichtung
 * faellt ein iPhone quer (844 x 390) in die Desktop-Variante, in der die
 * Leiste fast den halben Bildschirm fuellt.
 *
 * Dieselbe Bedingung steht in assets/js/navigation.js. Wer sie hier
 * aendert, muss sie dort mitaendern.
 */
@media (min-width: 1000px),
	(orientation: landscape) and (min-width: 900px) and (min-height: 600px) {

	.pdbb-burger {
		display: none;
	}

	.pdbb-mit-js .pdbb-nav {
		position: static;
		z-index: auto;
		padding: 0;
		background: transparent;
		overflow: visible;
		visibility: visible;
		opacity: 1;
	}

	body.pdbb-menue-offen {
		overflow: visible;
	}

	.pdbb-navliste {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pdbb-abstand-1);
		align-items: center;
	}

	/* Unterpunkte als Klappliste unter ihrem Punkt. */
	.pdbb-mit-js .pdbb-navpunkt--mit-unterpunkten .sub-menu,
	.pdbb-navpunkt .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: grid;
		min-width: 13rem;
		margin: 0;
		padding: var(--pdbb-abstand-1);
		background: var(--pdbb-text);
		visibility: hidden;
		opacity: 0;
		transition: opacity var(--pdbb-dauer) var(--pdbb-kurve),
			visibility var(--pdbb-dauer) var(--pdbb-kurve);
	}

	.pdbb-navpunkt--mit-unterpunkten:hover .sub-menu,
	.pdbb-navpunkt--mit-unterpunkten:focus-within .sub-menu {
		visibility: visible;
		opacity: 1;
	}

	/* Am Desktop uebernimmt Hover, der Schalter wird nicht gebraucht. */
	.pdbb-unterpunkte-schalter {
		display: none;
	}
}


/* --- Zurueck nach oben ------------------------------------------------
 *
 * Erscheint erst, wenn genug gescrollt wurde. Vorher ist er im Weg.
 */

.pdbb-nach-oben {
	position: fixed;
	right: var(--pdbb-rand);
	bottom: var(--pdbb-rand);
	z-index: 35;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--pdbb-orange);
	background: rgba(43, 46, 49, 0.85);
	color: var(--pdbb-weiss);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
	transition: opacity var(--pdbb-dauer) var(--pdbb-kurve),
		visibility var(--pdbb-dauer) var(--pdbb-kurve),
		transform var(--pdbb-dauer) var(--pdbb-kurve),
		background-color var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-nach-oben--sichtbar {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (hover: hover) {
	.pdbb-nach-oben:hover {
		background: var(--pdbb-orange);
	}
}

.pdbb-nach-oben:active {
	background: var(--pdbb-orange);
}

/* Der Pfeil ist ein gedrehtes Winkelstueck, kein Zeichen aus der Schrift. */
.pdbb-nach-oben-pfeil {
	display: block;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: 0.25rem;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}

/* Bei offenem Menue waere er nur Beiwerk ueber einer leeren Flaeche. */
.pdbb-menue-offen .pdbb-nach-oben {
	opacity: 0;
	visibility: hidden;
}
.pdbb-fuss {
	margin-top: var(--pdbb-abstand-5);
	padding-block: var(--pdbb-abstand-3);
	border-top: 1px solid var(--pdbb-linie);
	color: var(--pdbb-text);
	font-size: var(--pdbb-gr-klein);
}

/* --- Musterblatt ----------------------------------------------------
 * Nur fuer die Abnahme von Schritt 1, spaeter entbehrlich.
 */

.pdbb-muster-farben {
	display: grid;
	gap: var(--pdbb-abstand-3);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-bottom: var(--pdbb-abstand-4);
}

.pdbb-muster-flaeche {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	color: var(--pdbb-weiss);
	font-weight: 600;
}

.pdbb-muster-farbe p {
	margin: var(--pdbb-abstand-1) 0 0;
	line-height: 1.5;
}

.pdbb-muster-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pdbb-abstand-2);
	align-items: center;
}

code {
	font-size: 0.9em;
	background: var(--pdbb-flaeche);
	padding: 0.1em 0.35em;
}

.pdbb-muster-streifen {
	margin-top: var(--pdbb-abstand-4);
	padding: var(--pdbb-abstand-4) var(--pdbb-rand);
	background: var(--pdbb-flaeche);
	text-align: center;
}

.pdbb-muster-streifen p {
	margin: 0;
}

/* --- Header-Slider ----------------------------------------------------
 *
 * Ein Band aus Platten, von denen genau eine breit ist. Das Band wird so
 * verschoben, dass die breite Platte mittig steht. Breite und
 * Verschiebung werden zusammen weich uebergeblendet, daher wandert alles
 * in einem Zug.
 *
 * Die beiden Breiten stehen als Variable hier im CSS und werden vom
 * JavaScript ausgelesen. So gibt es die Zahlen nur an einer Stelle.
 */

.pdbb-slider {
	--pdbb-slide-breit: 100;   /* Prozent der Sliderbreite */
	--pdbb-slide-schmal: 0;
	--pdbb-slider-dauer: 700ms;

	position: relative;
	overflow: hidden;
	height: var(--pdbb-kopfhoehe);
	background: var(--pdbb-text);
}

@media (prefers-reduced-motion: reduce) {
	.pdbb-slider {
		--pdbb-slider-dauer: 1ms;
	}
}

.pdbb-slider-band {
	position: relative;
	height: 100%;
	transition: transform var(--pdbb-slider-dauer) var(--pdbb-kurve);
}

/* Ohne JavaScript bleibt das erste Motiv stehen, der Rest verschwindet. */
.pdbb-ohne-js .pdbb-slider-band {
	display: flex;
}

.pdbb-ohne-js .pdbb-slide {
	flex: 1 0 100%;
}

.pdbb-ohne-js .pdbb-slide ~ .pdbb-slide {
	display: none;
}

.pdbb-slide {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	transition: width var(--pdbb-slider-dauer) var(--pdbb-kurve),
		left var(--pdbb-slider-dauer) var(--pdbb-kurve);
}

/*
 * Das Motiv fuellt die Platte immer ganz. Der gepflegte Bildmittelpunkt
 * entscheidet, welcher Teil stehen bleibt, wenn die Platte schmal ist
 * oder das Bild hochkant beschnitten wird.
 */
.pdbb-slide-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--pdbb-fokus, 50% 50%);
}

/*
 * Einfaerbung der Streifen. Liegt ausschliesslich auf den schmalen
 * Platten und verschwindet, sobald eine in die Mitte rueckt.
 */
.pdbb-slide-ton {
	position: absolute;
	inset: 0;
	background: var(--pdbb-streifen-farbe);
	opacity: var(--pdbb-streifen-deckkraft);
	transition: opacity var(--pdbb-slider-dauer) var(--pdbb-kurve);
}

.pdbb-slide--aktiv .pdbb-slide-ton {
	opacity: 0;
}

/* --- Streifen: Schaltflaeche mit gestuerztem Titel -------------------- */

.pdbb-slide-sprung {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pdbb-weiss);
	cursor: pointer;
	transition: opacity var(--pdbb-slider-dauer) var(--pdbb-kurve);
}

.pdbb-slide-streifentitel {
	font-family: var(--pdbb-schrift-headline);
	font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.2rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);   /* von unten nach oben lesbar */
}

/* In der Mitte stoert der Streifentitel, dort steht der richtige Text. */
.pdbb-slide--aktiv .pdbb-slide-sprung {
	opacity: 0;
	pointer-events: none;
}

/* --- Inhalt der breiten Platte ---------------------------------------- */

.pdbb-slide-inhalt {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	justify-items: center;
	gap: var(--pdbb-abstand-2);
	padding: var(--pdbb-abstand-4) var(--pdbb-abstand-2) calc(var(--pdbb-abstand-4) + 2rem);
	background: linear-gradient(to top, rgba(43, 46, 49, 0.75), transparent);
	color: var(--pdbb-weiss);
	text-align: center;
	opacity: 0;
	transition: opacity var(--pdbb-slider-dauer) var(--pdbb-kurve);
	pointer-events: none;
}

.pdbb-slide--aktiv .pdbb-slide-inhalt {
	opacity: 1;
	pointer-events: auto;
}

.pdbb-slide-titel {
	margin: 0;
	font-family: var(--pdbb-schrift-headline);
	font-size: var(--pdbb-gr-h2);
	line-height: 1.1;
}

.pdbb-slide-text {
	max-width: 32rem;
	margin: 0;
}

/* Auf dem Motiv muss der Button auch ohne Fuellung lesbar sein. */
.pdbb-slide-button {
	border-color: var(--pdbb-weiss);
	color: var(--pdbb-weiss);
}

/* --- Pfeile ------------------------------------------------------------ */

.pdbb-slider-pfeil {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-top: -1.5rem;
	border: 0;
	background: rgba(43, 46, 49, 0.45);
	color: var(--pdbb-weiss);
	cursor: pointer;
	transition: background-color var(--pdbb-dauer) var(--pdbb-kurve);
}

.pdbb-slider-pfeil--zurueck { left: var(--pdbb-rand); }
.pdbb-slider-pfeil--vor { right: var(--pdbb-rand); }

@media (hover: hover) {
	.pdbb-slider-pfeil:hover {
		background: var(--pdbb-orange);
	}
}

.pdbb-slider-pfeil-spitze {
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.pdbb-slider-pfeil--zurueck .pdbb-slider-pfeil-spitze {
	transform: rotate(-45deg) translate(0.1rem, 0.1rem);
}

.pdbb-slider-pfeil--vor .pdbb-slider-pfeil-spitze {
	transform: rotate(135deg) translate(0.1rem, 0.1rem);
}

/*
 * Ab hier gibt es Streifen. Dieselbe Bedingung wie bei der Navigation:
 * Breite UND Ausrichtung UND Hoehe.
 */
@media (min-width: 1000px),
	(orientation: landscape) and (min-width: 900px) and (min-height: 600px) {

	.pdbb-slider {
		--pdbb-slide-breit: 80;
		--pdbb-slide-schmal: 5;    /* zwei Streifen je Seite, je 5 % */
	}

	/*
	 * Ausserhalb der Handy-Darstellung fuellen Slider und Kopfmotiv
	 * den Bildschirm. Auf dem Handy waere das zu viel: dort muesste
	 * man erst an einem bildschirmfuellenden Motiv vorbeiwischen,
	 * bevor ueberhaupt Inhalt kommt.
	 */
	:root {
		--pdbb-kopfhoehe: 100vh;
		--pdbb-kopfhoehe: 100dvh;
	}
}

/* --- Hinweis zum Weiterscrollen --------------------------------------
 *
 * Sitzt unten mittig ueber dem Motiv und wippt leicht. Sobald gescrollt
 * wurde, blendet er aus - dann hat er seinen Zweck erfuellt.
 */

.pdbb-weiterpfeil {
	position: absolute;
	bottom: var(--pdbb-abstand-4);
	left: 50%;
	z-index: 15;
	display: grid;
	place-items: center;
	width: 3.5rem;
	padding: 0.5rem 0;
	margin-left: -1.75rem;
	color: var(--pdbb-weiss);
	text-decoration: none;
	transition: opacity var(--pdbb-dauer) var(--pdbb-kurve),
		visibility var(--pdbb-dauer) var(--pdbb-kurve);
}

/*
 * Drei Winkel untereinander. Sie laufen nacheinander los, dadurch
 * entsteht eine Welle nach unten statt eines gleichmaessigen Wippens -
 * das liest sich eher als "hier geht es weiter".
 */
.pdbb-weiterpfeil-spitzen {
	display: grid;
	gap: 0.15rem;
	justify-items: center;
}

.pdbb-weiterpfeil-spitze {
	display: block;
	width: 0.85rem;
	height: 0.85rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.25;
	animation: pdbb-welle 1.8s var(--pdbb-kurve) infinite;
}

.pdbb-weiterpfeil-spitze:nth-child(2) { animation-delay: 0.18s; }
.pdbb-weiterpfeil-spitze:nth-child(3) { animation-delay: 0.36s; }

@keyframes pdbb-welle {
	0%, 70%, 100% { opacity: 0.25; }
	35%           { opacity: 1; }
}

/*
 * Bei reduzierter Bewegung stehen die Winkel still und gleichmaessig
 * sichtbar. Der Hinweis bleibt, nur die Bewegung faellt weg.
 */
@media (prefers-reduced-motion: reduce) {
	.pdbb-weiterpfeil-spitze {
		animation: none;
		opacity: 0.7;
	}
}

.pdbb-weiterpfeil--weg {
	opacity: 0;
	visibility: hidden;
}

/* Bei offenem Menue waere er nur Beiwerk ueber einer dunklen Flaeche. */
.pdbb-menue-offen .pdbb-weiterpfeil {
	opacity: 0;
	visibility: hidden;
}

/* --- Text-Bild-Block --------------------------------------------------
 *
 * Zwei Drittel Text, ein Drittel Bild. Im Markup steht das Bild zuerst,
 * damit es auf dem Handy vor seinem Text erscheint; am Desktop setzt das
 * Raster es an die richtige Seite.
 *
 * Die Bildseite wechselt von Block zu Block, gesteuert von PHP ueber die
 * Klasse --bild-links beziehungsweise --bild-rechts.
 */

.pdbb-text-bild {
	display: grid;
	gap: var(--pdbb-abstand-3);
	margin-block: var(--pdbb-abstand-5);
}

.pdbb-text-bild-bild img {
	width: 100%;
	height: auto;
}

.pdbb-text-bild-bild figure {
	margin: 0;
}

.pdbb-text-bild-text > *:first-child {
	margin-top: 0;
}

.pdbb-text-bild-text > *:last-child {
	margin-bottom: 0;
}

/*
 * Ab hier zwei Spalten. Bewusst eine eigene Grenze und nicht die der
 * Navigation: Fuer zwei Textspalten reicht ein Tablet hochkant locker,
 * waehrend die Navigation dort noch den Burger braucht.
 */
@media (min-width: 48em) {

	.pdbb-text-bild {
		align-items: center;
		gap: var(--pdbb-abstand-4);
	}

	.pdbb-text-bild--bild-rechts {
		grid-template-columns: 2fr 1fr;
	}

	.pdbb-text-bild--bild-rechts .pdbb-text-bild-text {
		grid-area: 1 / 1;
	}

	.pdbb-text-bild--bild-rechts .pdbb-text-bild-bild {
		grid-area: 1 / 2;
	}

	.pdbb-text-bild--bild-links {
		grid-template-columns: 1fr 2fr;
	}

	.pdbb-text-bild--bild-links .pdbb-text-bild-bild {
		grid-area: 1 / 1;
	}

	.pdbb-text-bild--bild-links .pdbb-text-bild-text {
		grid-area: 1 / 2;
	}
}

/*
 * Der WordPress-eigene Button bringt eigene Flaeche und runde Ecken mit.
 * Beides wird hier zurueckgenommen, den Rest macht .pdbb-button.
 */
.wp-block-button__link.pdbb-button {
	padding: 0.7em 1.8em;
	border-radius: 0;
	background: transparent;
}

.pdbb-text-bild-text .wp-block-buttons {
	margin-top: var(--pdbb-abstand-3);
}