/* =========================================================
   Privatbergführer – Projekt-Styles
   Variablen: styles.css · Schriften: fonts.css · Navigation: navigation.css
   Farben, Typografie und Kopfbereich nach Vorbild privatbergfuehrer.de.
   ========================================================= */

body {
	font-family: var(--pbf-font-base);
	font-size: var(--pbf-font-size);
	line-height: var(--pbf-line-height);
	color: var(--pbf-text);
	/* Platz für die fixierte Navigation */
	padding-top: var(--pbf-header-hoehe);
}

/* Schmale Bildschirme: flacherer Balken (Umschaltpunkt wie in navigation.css) */
@media (max-width: 1399.98px) {

	body {
		padding-top: var(--pbf-header-hoehe-mobil);
	}
}

/*------------------------------------*\
  #TYPOGRAFIE
\*------------------------------------*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
	margin-top: 5px;
	margin-bottom: 10px;
	color: var(--pbf-text);
	font-family: var(--pbf-font-headline);
	font-weight: 400;
	line-height: 1.25;
}

h1,
.h1 {
	font-size: 2rem;
}

h2,
.h2 {
	font-size: 1.625rem;
}

h3,
.h3 {
	font-size: 1.375rem;
}

h4,
.h4 {
	font-size: 1.125rem;
}

h5,
.h5 {
	font-size: 1rem;
}

p {
	margin-bottom: .75rem;
}

a {
	color: var(--pbf-blau);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--pbf-blau-dark);
	text-decoration: underline;
}

/*------------------------------------*\
  #KOPFBEREICH (Kopfslider / Kopfbild)
\*------------------------------------*/
.kopfbereich {
	position: relative;
	overflow: hidden;
}

.kopfbereich picture {
	display: block;
	height: 100%;
}

.kopfbereich-bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Kopfbild der Unterseiten: wie auf der Altseite bis 600 px hoch,
   auf schmalen Bildschirmen flacher, damit das Bild nicht die halbe Seite füllt. */
.seitenheader-kopfbild .kopfbereich,
.seitenheader-kopfslider .kopfbereich {
	height: min(var(--pbf-kopfbild-hoehe), 33.33vw);
	/* 3:1 wie der ausgelieferte Bildzuschnitt, nach oben auf 600 px begrenzt */
}

@media (max-width: 767.98px) {

	.seitenheader-kopfbild .kopfbereich,
	.seitenheader-kopfslider .kopfbereich {
		/* Mobil 4:3 wie der ausgelieferte Zuschnitt */
		height: 75vw;
		max-height: 360px;
	}
}

.kopfslider .swiper-slide {
	height: 100%;
}

.kopfbereich-text {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem 0;
	color: var(--pbf-text-weiss);
	background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent);
}

.kopfbereich-titel {
	font-family: var(--pbf-font-headline);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
	margin-bottom: .25rem;
}

.kopfbereich-beschreibung {
	margin-bottom: 0;
	text-shadow: 1px 1px 1px #000;
}

.kopfslider {
	--swiper-theme-color: var(--pbf-text-weiss);
	--swiper-navigation-color: var(--pbf-text-weiss);
	--swiper-pagination-color: var(--pbf-text-weiss);
}

/*------------------------------------*\
  #INHALT
\*------------------------------------*/
.inhalt {
	padding-top: var(--pbf-space-medium);
	padding-bottom: var(--pbf-space-medium);
}

@media (max-width: 767.98px) {

	.inhalt {
		padding-top: var(--pbf-space-small);
		padding-bottom: var(--pbf-space-small);
	}
}

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
.footer {
	background-color: var(--pbf-footer-bg);
	color: var(--pbf-footer-text);
	padding-top: 35px;
}

.footer h1,
.footer h2,
.footer h3,
.footer .h2 {
	color: var(--pbf-footer-headline);
	font-size: 1.125rem;
	text-transform: uppercase;
}

.footer a {
	color: var(--pbf-footer-text);
}

.footer a:hover,
.footer a:focus-visible {
	color: var(--pbf-text-weiss);
	text-decoration: underline;
}

.footer .spalte-rechtliches {
	background-color: var(--pbf-copyright-bg);
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 35px;
}

.container-footer {
	max-width: 1320px;
	--bs-gutter-x: 1.5rem;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-right: auto;
	margin-left: auto;
}

.footer .logos-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.footer .logos-footer img {
	width: 110px;
	height: auto;
}

/*------------------------------------*\
  #TYPO3 – Abstände (space_before_class / space_after_class)
\*------------------------------------*/
.frame-space-before-extra-small {
	padding-top: 20px;
	margin-top: 0;
}

.frame-space-before-small {
	padding-top: 40px;
	margin-top: 0;
}

.frame-space-before-medium {
	padding-top: 64px;
	margin-top: 0;
}

.frame-space-before-large {
	padding-top: 72px;
	margin-top: 0;
}

.frame-space-before-extra-large {
	padding-top: 96px;
	margin-top: 0;
}

.frame-space-after-extra-small {
	margin-bottom: 20px;
}

.frame-space-after-small {
	margin-bottom: 40px;
}

.frame-space-after-medium {
	margin-bottom: 64px;
}

.frame-space-after-large {
	margin-bottom: 72px;
}

.frame-space-after-extra-large {
	margin-bottom: 96px;
}

/* Mobil: große Abstände zusammenstauchen */
@media (max-width: 767.98px) {

	.frame-space-before-large,
	.frame-space-before-extra-large {
		padding-top: 48px;
	}

	.frame-space-after-large,
	.frame-space-after-extra-large {
		margin-bottom: 48px;
	}
}

/*------------------------------------*\
  #RTE – Highlight-Marker (CKEditor-Plugin „highlight“)
\*------------------------------------*/
.marker-yellow {
	background-color: #fdfd77;
}

.marker-green {
	background-color: #62f962;
}

.pen-red {
	color: #e71313;
	background-color: transparent;
}

/*------------------------------------*\
  #BUTTONS
  Optik der Altseite: eckig, gefüllt, Versalien nur im Content Block.
\*------------------------------------*/
a.pbf-btn {
	display: inline-block;
	min-width: 190px;
	padding: 10px 20px;
	border: 1px solid var(--pbf-blau);
	background: var(--pbf-blau);
	color: var(--pbf-text-weiss);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

a.pbf-btn:hover,
a.pbf-btn:focus-visible {
	background: var(--pbf-blau-dark);
	border-color: var(--pbf-blau-dark);
	color: var(--pbf-text-weiss);
	text-decoration: none;
}

a.pbf-btn.primary {
	background: transparent;
	border-color: var(--pbf-text-weiss);
	color: var(--pbf-text-weiss);
}

a.pbf-btn.primary:hover,
a.pbf-btn.primary:focus-visible {
	background: var(--pbf-text-weiss);
	color: var(--pbf-blau);
}

/* Bootstrap-Buttons an Projektfarben koppeln (RTE-Style „Button“) */
.btn {
	--bs-btn-border-radius: 0;
}

.btn-primary {
	--bs-btn-bg: var(--pbf-blau);
	--bs-btn-border-color: var(--pbf-blau);
	--bs-btn-hover-bg: var(--pbf-blau-dark);
	--bs-btn-hover-border-color: var(--pbf-blau-dark);
	--bs-btn-active-bg: var(--pbf-blau-dark);
	--bs-btn-active-border-color: var(--pbf-blau-dark);
}

.btn-outline-primary {
	--bs-btn-color: var(--pbf-blau);
	--bs-btn-border-color: var(--pbf-blau);
	--bs-btn-hover-bg: var(--pbf-blau);
	--bs-btn-hover-border-color: var(--pbf-blau);
	--bs-btn-active-bg: var(--pbf-blau);
	--bs-btn-active-border-color: var(--pbf-blau);
}

/*------------------------------------*\
  #FORMULAR (EXT:form)
\*------------------------------------*/

/* Deine bisherige Behelfsregel – seit dem Formular-Set
   (Configuration/Form/Privatbergfuehrer/config.yaml) ohne Wirkung,
   weil die Klasse visually-hidden am <legend> gar nicht mehr gesetzt wird.
   Kann ersatzlos raus. */
#bergsportzentrum-74 legend.visually-hidden {
	display: block !important;
}

/* Beschriftung einer Options- oder Auswahlgruppe (<legend>).
   Wird ausgegeben, seit legendVisuallyHidden auf 0 steht –
   siehe Configuration/Form/Privatbergfuehrer/config.yaml */
.inhalt .form-element-radio>legend,
.inhalt .form-element-checkbox>legend,
.inhalt .form-element-fieldset>legend {
	float: none;
	width: auto;
	margin-bottom: .5rem;
	padding: 0;
	color: var(--pbf-text);
	font-family: var(--pbf-font-headline);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Übergeordnetes Fieldset (z. B. „Termine“) etwas kräftiger */
.inhalt .form-element-fieldset>legend {
	font-size: 1.125rem;
	margin-bottom: .75rem;
}

#c75 .input.checkbox .form-check {
	padding-left: 0;
	margin-top: 30px;
	margin-bottom: 30px;
}

/*------------------------------------*\
  #MOBIL – Bilder und Tabellen nicht überlaufen lassen
\*------------------------------------*/
.inhalt img {
	max-width: 100%;
	height: auto;
}

.inhalt table {
	width: 100%;
}

@media (max-width: 767.98px) {

	.inhalt .table-responsive-auto {
		overflow-x: auto;
	}
}

@media (max-width: 575.98px) {

	.spalte-rechtliches .container-footer {
		hyphens: none;
		text-align: center;
	}
}