/* ==========================================================================
   Gasthof Robens – Gestaltung der gesamten Website (eine Datei für alles)

   Aufbau:
    1. Farben und Grundwerte  ← Farben hier zentral ändern
    2. Schriften
    3. Grundlagen
    4. Seitenaufbau (Kopfbereich rechts, Inhalt links, Fußleiste)
    5. Navigation
    6. Inhaltsbereiche (Kopfbild, Textkästen, Bilder)
    7. Überschriften und Text
    8. Tabellen, Spalten, Galerie
    9. Formular
   10. Karte (2-Klick-Lösung)
   11. Bildvergrößerung (Lightbox)
   12. Einblend-Effekte
   13. Smartphone und Tablet (bis 960 px)
   14. Druck
   ========================================================================== */


/* 1. FARBEN UND GRUNDWERTE ------------------------------------------------- */

:root {
	--rot: #e52324;          /* Hausfarbe Rot: Überschriften, Buttons, Fußleiste */
	--gelb: #e0ac00;         /* Hausfarbe Senfgelb: Balken, Linien, Telefonleiste */
	--creme: #fff8e0;        /* Hintergrund der Textkästen */
	--weiss: #fff;
	--schwarz: #000;
	--grau-hell: #efefef;

	--schrift: 'Open Sans', Helvetica, Arial, sans-serif;
	--schrift-schmuck: 'Allura', 'Open Sans', cursive;

	--sidebar: 290px;        /* Breite des weißen Kopfbereichs rechts (Desktop) */
	--leiste: 40px;          /* Höhe der roten Fußleiste (Desktop) */
}


/* 2. SCHRIFTEN (lokal gespeichert, nur WOFF2) ------------------------------ */

@font-face {
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/allura-v7-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/open-sans-v16-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/open-sans-v16-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../webfonts/open-sans-v16-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('../webfonts/open-sans-v16-latin-600italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../webfonts/open-sans-v16-latin-700.woff2') format('woff2');
}


/* 3. GRUNDLAGEN ------------------------------------------------------------ */

*, *::before, *::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	font-family: var(--schrift);
	font-weight: 400;
	font-size: 100%;
	line-height: 1;
	color: var(--schwarz);
	background: var(--creme) url('../images/hg.webp') -120px center / cover no-repeat fixed;
}
h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, table, form, fieldset, legend, address {
	margin: 0;
	padding: 0;
}
address {
	font-style: normal;
}
strong {
	font-weight: 600;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
ul, ol {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	color: var(--schwarz);
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}
a:hover {
	color: var(--rot);
}
svg.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sichtbarer Rahmen für Tastatur-Bedienung */
:focus-visible {
	outline: 3px solid var(--rot);
	outline-offset: 2px;
}
#footernavi :focus-visible,
.button a:focus-visible,
.form2:focus-visible {
	outline-color: var(--schwarz);
}

/* "Zum Inhalt springen" – nur sichtbar, wenn per Tab angesteuert */
.skip-link {
	position: absolute;
	left: 10px;
	top: -100px;
	z-index: 20000;
	padding: 10px 15px;
	background: var(--weiss);
	color: var(--schwarz);
	font-weight: 600;
}
.skip-link:focus {
	top: 10px;
}

/* Text nur für Screenreader */
.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* 4. SEITENAUFBAU ---------------------------------------------------------- */

/* Weißer Kopfbereich mit Logo, Navigation und Telefon – rechts fest */
#sidebar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 800;
	width: var(--sidebar);
	height: 100%;
	padding-inline: 1.5vw;
	background-color: var(--weiss);
	overflow: auto;
	scrollbar-width: none;
}
#sidebar::-webkit-scrollbar {
	display: none;
}
#logo {
	display: block;
	padding-top: 30px;
	padding-bottom: 25px;
}
#logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Inhalt links neben dem Kopfbereich */
main {
	display: block;
	position: relative;
	z-index: 500;
	width: calc(100% - var(--sidebar));
	padding-bottom: 85px;
}

/* Telefon und Mail – unten rechts */
#hotline,
#navi__info {
	margin: 0;
}
#hotline {
	position: fixed;
	right: 0;
	bottom: var(--leiste);
	z-index: 5000;
	width: var(--sidebar);
	height: 40px;
	padding-left: 1.5vw;
	line-height: 40px;
	background-color: var(--gelb);
}
#hotline {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: nowrap;
}
#hotline a {
	font-size: 1.2em;
	font-weight: 600;
	color: var(--schwarz);
	text-decoration: none;
	white-space: nowrap;
}
#hotline a:hover {
	text-decoration: underline;
}

/* Navigationshinweis links neben der Telefonleiste */
#navi__info {
	position: fixed;
	right: var(--sidebar);
	bottom: var(--leiste);
	z-index: 5000;
	height: 40px;
	line-height: 40px;
	background-color: var(--weiss);
}
#navi__info a {
	display: inline-block;
	padding-inline: 10px;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--rot);
	text-decoration: none;
}

/* Rote Fußleiste */
#footernavi {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 3200;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	height: var(--leiste);
	padding-inline: 75px 60px;
	background-color: var(--rot);
	color: var(--weiss);
}
#footernavi p {
	margin: 0;
	font-size: 0.8em;
}
#footernavi a {
	color: var(--weiss);
	text-decoration: none;
}
#footernavi a:hover {
	text-decoration: underline;
}
#metanavi {
	display: flex;
	gap: 24px;
}
#metanavi a {
	font-size: 0.8em;
}

/* Abstufungen nach Bildschirmbreite (wie bisher) */
@media (min-width: 961px) {
	body { font-size: 98.1%; }
	:root { --sidebar: 220px; }
}
@media (min-width: 1220px) {
	body { font-size: 115.1%; }
	:root { --sidebar: 230px; }
}
@media (min-width: 1480px) {
	body { font-size: 108.1%; }
	:root { --sidebar: 260px; }
}
@media (min-width: 1700px) {
	body { font-size: 110.1%; }
	:root { --sidebar: 300px; }
}


/* 5. NAVIGATION ------------------------------------------------------------ */

/* Menü-Button nur auf dem Smartphone */
.navi-schalter {
	display: none;
}

#navi {
	padding: 0 0 130px 3px;
}
#navi a {
	display: block;
	padding-block: 7px;
	font-size: 0.75em;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--rot);
}
#navi a:hover {
	color: var(--schwarz);
}
#navi li {
	line-height: 100%;
}
#navi li:hover {
	background: var(--creme);
}
#navi ul {
	padding: 0 10px 5px 15px;
}
#navi li li {
	line-height: 110%;
}
#navi li li a {
	padding-block: 3px;
	text-transform: none;
}
/* Aktuelle Seite hervorheben (wird per JavaScript gesetzt) */
#navi a[aria-current="page"] {
	color: var(--schwarz);
	font-weight: 600;
}


/* 6. INHALTSBEREICHE ------------------------------------------------------- */

.content {
	display: flow-root;
	position: relative;
	width: 75%;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 50px;
	hyphens: auto;
}

/* Kopfbild jeder Seite (das Bild selbst steht im <head> der jeweiligen Seite) */
.headerbildbox {
	position: relative;
	display: block;
	width: 100%;
	height: 70vh;
	background-image: url('../bilder/zimmer-start2.webp');
	background-size: cover;
	background-position: center center;
	border: 20px solid var(--weiss);
}
.headerbildbox p,
.headerbildbox h1 {
	position: absolute;
	bottom: 10px;
	left: 20px;
	z-index: 800;
	margin: 0;
	font-family: var(--schrift-schmuck);
	font-size: 230%;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 115%;
	color: var(--weiss);
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Pfeil "nach unten" unter dem Kopfbild */
.scroll-down-cue {
	display: block;
	width: 70px;
	margin: 0 auto;
	padding-top: 30px;
}
.scroll-down-cue img {
	display: block;
	width: 70px;
	height: auto;
	animation: pfeil 2s ease-in-out 3;
}
@keyframes pfeil {
	0%   { opacity: 0; transform: translateY(-20px); }
	50%  { opacity: 1; transform: none; }
	100% { opacity: 1; transform: none; }
}

/* Cremefarbener Textkasten */
.textbox {
	display: flow-root;
	position: relative;
	z-index: 800;
	width: 70%;
	padding: 4vw;
	background-color: var(--creme);
	overflow-wrap: break-word; /* lange Internetadressen umbrechen */
}
/* Gelber Balken oben im Textkasten */
.textbox::before {
	content: "";
	position: absolute;
	top: 0;
	left: 4vw;
	right: 4vw;
	z-index: 850;
	height: 20px;
	background-color: var(--gelb);
}

/* Textkästen abwechselnd links und rechts */
.content:nth-child(odd) .textbox {
	float: right;
}

/* Bild mit Bildunterschrift */
.bildbox {
	display: flow-root;
	position: relative;
	margin-top: 60px;
}
img.bild,
.textbox .gmap {
	position: relative;
	z-index: 900;
	display: block;
	float: right;
	width: 100%;
	margin-right: -30%;
	border: 20px solid var(--weiss);
}
.content:nth-child(odd) img.bild,
.content:nth-child(odd) .textbox .gmap {
	float: left;
	margin-right: 0;
	margin-left: -30%;
}
.bildbox img {
	transition: transform 0.3s linear;
}
.bildbox:hover img {
	transform: scale(1.01);
}
.subline {
	position: absolute;
	bottom: 10px;
	width: 25%;
	font-size: 0.7em;
	line-height: 160%;
}
.content:nth-child(odd) .subline {
	right: 0;
}
.content:nth-child(even) .subline {
	left: 0;
}
.subline p {
	font-size: 1em;
}
.subline h2 {
	margin-top: 0;
	font-size: 1.7em;
}

/* Weißer Infokasten (Öffnungszeiten auf der Startseite) */
.infobox {
	float: right;
	width: 33%;
	margin: 0 0 30px 30px;
	padding: 20px;
	background-color: var(--weiss);
}

/* Roter Button */
p.button {
	line-height: 100%;
}
p.button a,
a.button,
button.button {
	display: inline-block;
	padding: 10px 12px;
	border: 0;
	font: inherit;
	color: var(--weiss);
	background-color: var(--rot);
	text-decoration: none;
	cursor: pointer;
}
p.button a:hover,
a.button:hover,
button.button:hover {
	color: var(--schwarz);
	background-color: var(--gelb);
}
p.txtright {
	text-align: right;
}

/* Bild mit fester Breite, z. B. Zahlungsarten-Logos */
.bild-klein {
	display: block;
	width: auto;
	max-width: 350px;
}
.gvlogo img {
	display: block;
	width: 200px;
	height: auto;
}


/* 7. ÜBERSCHRIFTEN UND TEXT ------------------------------------------------ */

h1, h2, .table td, .table th {
	hyphens: none;
}
h1,
h2.header1 {
	margin-bottom: 30px;
	font-family: var(--schrift-schmuck);
	font-size: clamp(1.9rem, 2.2vw, 3.2rem);
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 110%;
	color: var(--rot);
}
h2 {
	margin-top: 2em;
	margin-bottom: 0.85em;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 135%;
	color: var(--rot);
}
h2.header1,
h1 + h2,
h2:first-child {
	margin-top: 0;
}
h3 {
	margin-top: 1.5em;
	margin-bottom: 0.8em;
	font-size: 1em;
	font-weight: 600;
	line-height: 160%;
}
h2 + h3 {
	margin-top: 0;
}
h4 {
	margin-bottom: 0.8em;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 160%;
}
p,
address,
.content li,
.table td,
.table th[scope="row"] {
	margin-bottom: 0.8em;
	font-size: 0.8em;
	line-height: 160%;
	text-align: left;
}
.content ul {
	padding-left: 17px;
	list-style-type: square;
}
.content ol {
	margin-left: 10px;
	margin-bottom: 0.45em;
	padding-left: 15px;
	list-style-type: lower-alpha;
}
.content li {
	position: relative;
	line-height: 150%;
}
/* verschachtelte Listen nicht doppelt verkleinern */
.content li li,
.content li p {
	font-size: 1em;
}
.hinweis {
	margin-top: 20px;
	font-size: 0.7em;
	line-height: 140%;
}


/* 8. TABELLEN, SPALTEN, GALERIE -------------------------------------------- */

.table {
	width: 100%;
	margin: 0 auto 1em;
}
.table caption {
	margin-bottom: 0.5em;
	font-size: 0.8em;
	font-weight: 600;
	text-align: left;
}
.table th {
	padding: 5px;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 160%;
	text-align: right;
	vertical-align: bottom;
	border-bottom: 2px solid var(--gelb);
}
.table th[scope="row"],
.table td {
	padding: 5px;
	vertical-align: top;
	border-top: 1px solid var(--gelb);
	border-bottom: 1px solid var(--gelb);
}
.table th[scope="row"] {
	font-weight: 400;
	text-align: left;
}
.table thead th:first-child {
	text-align: left;
}
.table td {
	text-align: right;
}
.table tr:nth-child(odd) {
	background-color: var(--weiss);
}

/* Zwei Spalten nebeneinander, auf dem Smartphone untereinander */
.zweispaltig {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 4%;
}

/* Bildergalerie */
.galerie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 30px;
	padding: 0 !important;
	list-style: none !important;
}
.galerie li {
	margin: 0;
	font-size: 1em;
	border: 10px solid var(--weiss);
	background: var(--weiss);
}
.galerie img {
	display: block;
	width: 100%;
	height: auto;
}


/* 9. FORMULAR -------------------------------------------------------------- */

fieldset {
	min-width: 0;
	border: 0;
}
legend {
	margin-bottom: 0.8em;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--rot);
}
label {
	display: block;
}
.form,
.form3 {
	display: block;
	width: 100%;
	margin: 0;
	padding: 4px 2px;
	font: inherit;
	font-size: 1em;
	color: var(--schwarz);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--gelb);
	border-radius: 0;
}
.form3 {
	min-height: 120px;
	border: 1px solid var(--gelb);
	resize: vertical;
}
.form:focus,
.form3:focus {
	background: var(--weiss);
}
.form2 {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 14px;
	font: inherit;
	font-size: 0.9em;
	color: var(--weiss);
	background-color: var(--rot);
	border: 1px solid var(--rot);
	cursor: pointer;
}
.form2:hover {
	color: var(--schwarz);
	background-color: var(--gelb);
	border-color: var(--gelb);
}
/* Spamschutz-Feld: für Besucher unsichtbar */
.hp {
	position: absolute;
	left: -9999px;
}
/* Rückmeldung nach dem Absenden: wird nur angezeigt, wenn die Adresse auf #gesendet bzw. #nicht-gesendet endet */
.meldung {
	display: none;
	margin: 20px 0;
	padding: 15px;
	font-weight: 600;
	border-left: 6px solid var(--gelb);
	background: var(--weiss);
}
.meldung:target {
	display: block;
}
.meldung.fehler {
	border-left-color: var(--rot);
}


/* 10. KARTE (2-KLICK-LÖSUNG) ----------------------------------------------- */

.textbox .gmap {
	min-height: 400px;
	background-color: var(--grau-hell);
}
.karte-2klick {
	padding: 15px;
}
.karte-2klick p {
	font-size: 0.9em;
}
.karte-2klick.aktiv {
	padding: 0;
}
.karte-2klick iframe {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
}


/* 11. BILDVERGRÖSSERUNG (LIGHTBOX) ----------------------------------------- */

.lightbox {
	max-width: 95vw;
	max-height: 95vh;
	padding: 15px;
	border: 0;
	background: var(--weiss);
	overflow: visible;
}
.lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}
.lightbox img {
	display: block;
	max-width: calc(95vw - 30px);
	max-height: calc(95vh - 80px);
	width: auto;
	height: auto;
	margin: 0 auto;
}
.lightbox figcaption {
	padding-top: 10px;
	font-size: 0.9em;
	line-height: 140%;
	text-align: center;
}
.lightbox button {
	position: absolute;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	font-size: 28px;
	line-height: 44px;
	color: var(--weiss);
	background: var(--rot);
	cursor: pointer;
}
.lightbox button:hover {
	color: var(--schwarz);
	background: var(--gelb);
}
.lb-schliessen {
	top: -18px;
	right: -18px;
}
.lb-zurueck {
	top: 50%;
	left: -22px;
	transform: translateY(-50%);
}
.lb-weiter {
	top: 50%;
	right: -22px;
	transform: translateY(-50%);
}
.lightbox.einzeln .lb-zurueck,
.lightbox.einzeln .lb-weiter {
	display: none;
}


/* 12. EINBLEND-EFFEKTE (nur mit JavaScript) -------------------------------- */

.js .einblenden,
.js .textbox::before {
	transition: opacity 500ms linear, transform 500ms linear;
}
.js .einblenden:not(.in-view) {
	opacity: 0;
	transform: translateX(100px);
}
.js .content:nth-child(odd) .einblenden:not(.in-view) {
	transform: translateX(-100px);
}
.js .textbox:not(.in-view)::before {
	opacity: 0;
	transform: translateX(100px);
}
.js .content:nth-child(odd) .textbox:not(.in-view)::before {
	transform: translateX(-100px);
}

/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.js .einblenden:not(.in-view),
	.js .textbox:not(.in-view)::before {
		opacity: 1;
		transform: none;
	}
}


/* 13. SMARTPHONE UND TABLET (BIS 960 PX) ----------------------------------- */

@media (max-width: 960px) {
	body {
		/* großes Hintergrundbild bleibt auf dem Handy nicht stehen (ruckelt sonst) */
		background-image: url('../images/hg-klein.webp');
		background-attachment: scroll;
		background-position: center top;
		background-size: 100% auto;
		padding-bottom: 50px; /* Platz für die Telefonleiste */
	}

	/* Rote Menüleiste oben */
	.navi-schalter {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 40px;
		padding: 0 12px;
		border: 0;
		font: inherit;
		font-size: 0.9em;
		color: var(--weiss);
		background-color: var(--rot);
		cursor: pointer;
	}
	.navi-schalter svg {
		width: 26px;
		height: 26px;
	}
	.navi-schalter .zu,
	.navi-offen .navi-schalter .auf {
		display: none;
	}
	.navi-offen .navi-schalter .zu {
		display: inline;
	}

	#sidebar {
		position: relative;
		width: 100%;
		height: auto;
		padding: 0;
		overflow: visible;
		text-align: center;
	}
	#logo {
		width: 80%;
		max-width: 260px;
		margin: 0 auto;
		padding-top: 60px;
		padding-bottom: 20px;
	}

	/* Navigation: zugeklappt unsichtbar (auch für die Tab-Taste) */
	#navigation {
		display: none;
	}
	.navi-offen #navigation {
		display: block;
		position: absolute;
		top: 40px;
		left: 0;
		z-index: 15000;
		width: 100%;
		padding: 4%;
		background-color: var(--weiss);
		text-align: left;
	}
	.navi-offen main,
	.navi-offen #footernavi,
	.navi-offen #logo,
	.navi-offen #hotline,
	.navi-offen #navi__info {
		display: none;
	}
	#navi {
		padding: 0 0 30px;
	}
	#navi a {
		padding-block: 10px;
		font-size: 0.95em;
	}
	#navi li li a {
		padding-block: 8px;
	}

	/* Telefon und Mail als feste Leiste unten – immer erreichbar */
	#hotline {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 50px;
		padding: 0;
		line-height: 50px;
		text-align: center;
		justify-content: center;
		gap: 30px;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
	}

	main {
		width: 100%;
		padding-bottom: 20px;
	}
	.content {
		width: 100%;
		padding-top: 50px;
	}
	.content.kopf {
		padding-top: 0;
		padding-bottom: 40px;
	}
	.headerbildbox {
		height: 260px;
		border: 0;
		border-block: 10px solid var(--weiss);
	}
	.headerbildbox p,
	.headerbildbox h1 {
		font-size: 200%;
	}
	.scroll-down-cue {
		display: none;
	}
	.textbox,
	.content:nth-child(odd) .textbox {
		float: none;
		width: 94%;
		margin: 0 auto;
	}
	.bildbox {
		margin-top: 40px;
	}
	img.bild,
	.textbox .gmap,
	.content:nth-child(odd) img.bild,
	.content:nth-child(odd) .textbox .gmap {
		float: none;
		margin: 0;
		border-width: 10px;
	}
	.subline,
	.content:nth-child(odd) .subline,
	.content:nth-child(even) .subline {
		position: relative;
		width: 100%;
		left: auto;
		right: auto;
		bottom: auto;
		margin-top: 8px;
	}
	.infobox {
		float: none;
		width: 100%;
		margin: 0 0 30px;
	}
	.zweispaltig {
		grid-template-columns: 1fr;
	}
	.galerie {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 50px;
	}
	h1,
	h2.header1 {
		margin-top: 20px;
		font-size: 2.2em;
	}
	p.txtright {
		text-align: left;
	}

	/* Bildvergrößerung: Knöpfe innerhalb des Bildschirms */
	.lightbox {
		padding: 8px;
	}
	.lb-schliessen {
		top: 4px;
		right: 4px;
	}
	.lb-zurueck {
		left: 4px;
	}
	.lb-weiter {
		right: 4px;
	}

	/* keine Seitwärts-Animation auf dem Handy, nur einblenden */
	.js .einblenden:not(.in-view),
	.js .content:nth-child(odd) .einblenden:not(.in-view),
	.js .textbox:not(.in-view)::before,
	.js .content:nth-child(odd) .textbox:not(.in-view)::before {
		transform: none;
	}

	#navi__info {
		position: relative;
		right: auto;
		bottom: auto;
		margin: 30px 2vw 0;
		text-align: center;
	}
	#footernavi {
		position: relative;
		flex-direction: column;
		gap: 10px;
		height: auto;
		padding: 20px 2vw;
		text-align: center;
	}
	#metanavi {
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 20px;
	}
	#metanavi a {
		display: inline-block;
		padding: 6px;
	}
}


/* 14. DRUCK ---------------------------------------------------------------- */

@media print {
	body {
		background: none;
		font-size: 11pt;
	}
	#sidebar,
	#hotline,
	#navi__info,
	#footernavi,
	.navi-schalter,
	.skip-link,
	.content.kopf,
	.gmap,
	.galerie {
		display: none !important;
	}
	main,
	.content,
	.textbox {
		float: none !important;
		width: 100% !important;
		padding: 0 !important;
		background: none;
	}
	.textbox::before {
		display: none;
	}
	img.bild {
		float: none !important;
		width: 60% !important;
		margin: 10px 0 !important;
		border: 0;
	}
	.subline {
		position: static;
		width: auto;
	}
	.js .einblenden {
		opacity: 1 !important;
		transform: none !important;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}