/* ============================================
	 SCHRIFTARTEN (Webfonts) – Optimiert mit font-display: swap
============================================ */

/* === Inter Regular (400) – Nur lateinische Zeichen === */
@font-face {
	font-display: swap; /* Schnelleres Rendern mit Fallback */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'),
			 url('../fonts/inter-v18-latin-regular.ttf') format('truetype');
}

/* === Inter Medium (500) – Nur lateinische Zeichen === */
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/inter-v18-latin-500.woff2') format('woff2'),
			 url('../fonts/inter-v18-latin-500.ttf') format('truetype');
}

/* === Roboto Regular (400) – Latin === */
@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.eot');
	src: url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2') format('woff2'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.woff') format('woff'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-regular.ttf') format('truetype');
}

/* === Roboto Medium (500) – Latin === */
@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/roboto-v30-latin/roboto-v30-latin-500.eot');
	src: url('../fonts/roboto-v30-latin/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-500.woff2') format('woff2'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-500.woff') format('woff'),
			 url('../fonts/roboto-v30-latin/roboto-v30-latin-500.ttf') format('truetype');
}

/* material-icons-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/material-icons-v143-latin/material-icons-v143-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
}

/* ============================================
	 GRUNDSTIL – Reset & Basislayout
============================================ */

/* Box-Modell auf border-box für ALLE Elemente */
*, *:before, *:after {
	box-sizing: border-box;
}

/* === HTML & BODY Grundstruktur === */
html, body {
	font-family: Inter, sans-serif;
/*	font-size: 62.5%;           1rem = 10px für einfache Skalierung */
font-size: clamp(0.875rem, 1.2vw, 1rem); /* 14px – 16px */
line-height: 1.6; /* Grundline-height für Standardtexte */
/*	color: #282830; */
/*	1. Wahl color: #444; */

	height: 100%;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

/* ============================================
   BASISSTIL & SYSTEM-DARKMODE-ERKENNUNG
============================================ */

/* Farbvariablen */
:root {
  --bg: #f9f9fb;             /* helles Grau als Default */
  --text: #1a1a1a;
  --accent-dark: rgb(68, 68, 68);
  --accent-light: rgb(220, 220, 220);
  --transition-speed: 0.35s;
}

/* Dark Mode automatisch aktivieren, wenn das System es bevorzugt */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: rgb(50, 55, 60);
    --text: #EAEAEA;
    --accent-dark: rgb(68, 68, 68);
    --accent-light: rgb(220, 220, 220);
  }
}

/* === BODY Standardlayout === */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: Roboto, system-ui, sans-serif;
  transition: background-color var(--transition-speed) ease-in-out,
              color var(--transition-speed) ease-in-out;
}

/* === BODY im Vollbildmodus – kein Scrollen === */
body.fullscreen {
  overflow: hidden;
}

/* ============================================
   DARKMODE-TOGGLE MANUELL
============================================ */
body.dark-mode {
  background-color: rgb(50, 55, 60);
  color: #EAEAEA;
  transition: background-color var(--transition-speed) ease-in-out,
              color var(--transition-speed) ease-in-out;
}

body.light-mode {
  background-color: #ffffff;
  color: #212121;
  transition: background-color var(--transition-speed) ease-in-out,
              color var(--transition-speed) ease-in-out;
}

/* ============================================
   DARKMODE-TOGGLE BUTTONS (bestehende Klassen)
============================================ */
.darkButton,
.lightButton {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150px;
  padding: 10px 50px;
  border-radius: 25px;
  transform: translate(-50%, -50%);
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Dark-Button Stil */
.darkButton {
  background-color: var(--accent-dark);
  color: white;
}
.darkButton:hover {
  background-color: rgb(100, 100, 100);
  transform: scale(1.05);
}

/* Light-Button Stil */
.lightButton {
  background-color: var(--accent-light);
  color: black;
}
.lightButton:hover {
  background-color: white;
  transform: scale(1.05);
}

/* Fokus für Tastaturbedienung */
.darkButton:focus-visible,
.lightButton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}










/* ============================================
	 SEITENAUFBAU – Struktur-Wrapper
============================================ */

/* Header, Main, Content, Footer – Vollbreite */
header,
content,
main,
footer {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* Flex-Verhalten für Kopf- und Fußbereich */
header,
footer {
	flex: 0 0 auto;
}

/* Content nimmt verbleibenden Platz ein */
content,
main {
	flex: 1 1 auto;
}




/* === Inhaltliche Wrapper – Zentrierung & Breitenbegrenzung === */
.headerwrapper,
.contentwrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* Mobile Anpassung für Wrapper */
@media only screen and (max-width: 600px) {
	.contentwrapper {
		width: 100%;
		padding: 0;
	}
}

@media only screen and (max-width: 481px) {
	content,
	main {
		width: 100%;
	}
}


/* === Contentbereich maximal 1200px === */


.content {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 20px;
	justify-content: flex-start;
	margin: 10vh auto 10vh auto;
	width: 95%;
	flex-direction: row;
	max-width: 1200px;
}
@media only screen and (min-width: 1200px) {
	.content {
		width: 100%;
	}
}

#first {
	margin-top: 0;
}












/* ============================================
	 FOOTER
============================================ */

.footer {
	background: rgb(40, 40, 48); /* optional, falls der Hintergrund schwarz sein soll */
	color: #fff;
	padding: 2rem 0 1rem 0;
	font-size: 0.8rem;
}

.footer-wrapper {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.footer-social {
	display: flex;
	gap: 1rem;
}

.footer-social a {
	color: #fff;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	transition: opacity 0.3s ease;
}

.footer-social a:hover {
	opacity: 0.7;
}

.footer-social img {
	height: 20px;
	max-width: 100%;
	display: block;
}

.footer-text {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.footer-text a {
	color: #fff;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-text a:hover {
	color: #ccc;
}

.footer-social,
.footer-text {
	flex-wrap: wrap;
}



/* ============================================
	 ALLGEMEINE LINK-STILE
============================================ */

a {
	background-color: transparent;
}

a:link {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

a:visited {
	color: inherit;
}

a:active,
a:hover {
	outline: none;
}


/* ============================================
	 TYPOGRAFIE: Überschriften h1–h6
============================================ */

h1, h2, h3, h4 {
	margin: 0 !important;
	background-color: transparent;
	color: inherit;
	font-family: Roboto, sans-serif;
	font-weight: 500;
	letter-spacing: 0.2rem;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
}

/* Responsive Schriftgrößen mit clamp()
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h5 { font-size: clamp(1rem, 2vw, 1.4rem); }
h6 { font-size: clamp(0.875rem, 1.5vw, 1.2rem); }
 */



/* Überschriften */
h1 {
	font-size: clamp(1.5rem, 6vw, 2.5rem); /* 24–40px */
	line-height: 1.2;
}

h2 {
	font-size: clamp(1.25rem, 5vw, 2rem);   /* 20–32px */
	line-height: 1.3;
	margin-bottom: 0.6em;

}

h3 {
	font-size: clamp(1.125rem, 4vw, 1.75rem); /* 18–28px */
	line-height: 1.3;

}

h4 {
	font-size: clamp(1.125rem, 3vw, 1.5rem); /* 18–24px */
	line-height: 1.4;
		margin-top: -0.1px;
}

h5 {
	font-size: clamp(1rem, 2.5vw, 1.25rem); /* 16–20px */
	line-height: 1.4;
	margin-bottom: 0.4em;
}

h6 {
	font-size: clamp(0.875rem, 2vw, 1rem); /* 14–16px */
	line-height: 1.4;
	margin-bottom: 0.3em;
}








/* ============================================
	 TYPOGRAFIE – Überschriften & Textdetails
============================================ */

/* === SPAN-Elemente innerhalb von h1–h4 (z. B. Hervorhebungen) === */
h1 span,
h2 span,
h3 span,
h4 span {
	background-color: #fff !important;
	border: 1px solid black;
	color: #282830 !important;
	padding: 0.5em;
}

/* === Überschriften-Zentrierung z. B. für Kategorien === */
.category {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	white-space: nowrap;
	font-weight: 500;
}


/* ============================================
	 FLIESSTEXT – Absätze, Links, Bildunterschriften
============================================ */

/* === Absätze (p) – Grundabstand & responsive Schriftgröße === */
p-alt {
	margin-top: -0.25em;
	font-size: clamp(1.125rem, 1.8vw, 1.25rem);
	line-height: clamp(1.5rem, 2.5vw, 1.7rem);
	max-width: 65ch;			/* Zeilenlänge begrenzen (~65 Zeichen optimal) */
}

/* Absätze */
p {
	font-size: clamp(1.05rem, 1.5vw, 1.15rem);
	line-height: clamp(1.5rem, 2.5vw, 1.7rem);
	margin-top: 1em;
  margin-bottom: 0;
  hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty; /* neu in modernen Browsern */
}
p:first-child {
  margin-top: 0;
}


/* === Links innerhalb von Absätzen – lesbare Hervorhebung === */
p a:link {
	font-family: Inter, sans-serif;
	font-weight: 500;
	text-decoration: underline;
}


/* === Bildunterschriften (.bu) === */
.bu {
	background: inherit;
	margin: 0.5em 0 4em 0;
	text-align: left;
}

/* Responsive Schriftgrößen für Bildunterschriften */
@media only screen and (max-width: 599px) {
	.bu {
		font-size: 0.9rem;
		line-height: 1.3;
	}
}

@media only screen and (min-width: 600px) and (max-width: 991px) {
	.bu {
		font-size: 0.9rem;
		line-height: 1.4;
	}
}

@media only screen and (min-width: 992px) {
	.bu {
		font-size: 0.9em;
		line-height: 1.6;
	}
}


/* ============================================
	 TYPOSPEZIALITÄTEN – Hoch- & Tiefstellung
============================================ */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}


/* ============================================
	 TEXTEIGENSCHAFTEN
============================================ */

/* === Kein automatischer Zeilenumbruch (z. B. bei Produktnamen, Zahlen) === */
.no-break {
	white-space: nowrap;
}


/* ============================================
	 MEDIEN – Bilder & Videos
============================================ */

/* === Bilder – Basiseinstellungen === */
img {
	border-style: none;
	vertical-align: middle;
}

/* === Videos – Cover-Anzeige & responsive Breite === */
video {
	object-fit: cover;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

/* Bildunterschrift */
figcaption {
	font-size: 0.8rem;
	line-height: 1.2em;
	margin-top: 0.3em;
	color: inherit;
	text-align: center;
	min-height: 2.4em; /* für gleichmäßige Höhe */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
@media (max-width: 480px) {
	figcaption {
		display: block;
		font-size: 0.85rem;
	}
}


/* ============================================
	 SICHTBARKEIT – Geräteabhängige Anzeige
============================================ */

/* === Auf kleinen Geräten ausblenden === */
@media (max-width: 599px) {
	.hide-small-device {
		display: none;
	}
}

/* === Auf mittleren Geräten ausblenden === */
@media (min-width: 600px) and (max-width: 991px) {
	.hide-medium-device {
		display: none;
	}
}

/* === Auf großen Geräten ausblenden === */
@media (min-width: 992px) {
	.hide-large-device {
		display: none;
	}
}





/* ============================
	 MENÜ – Allgemeine Struktur
============================ */
.top {
	height: auto;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100000;
}


/* ============================
	 MENÜ – Navigationsleiste
============================ */
.navbar {
	animation: animatetop 0.4s;
	background-color: rgb(245, 245, 245) !important;
	color: #000 !important;
	overflow: hidden;
	position: relative;
	z-index: 100000;
	width: 100%;
}

.navbarx {
	background-color: rgb(245, 245, 245) !important;
	color: #000 !important;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100000;
	animation: animatetop 0.4s;
}

.navbar:before {
	content: "";
	display: table;
	clear: both;
}

/* Animation für das Einblenden von oben */
@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}


/* Nur auf der Startseite transparent */
body.home .navbar {
	background-color: transparent !important;
	box-shadow: none;
}

/* Nach Scrollen: Weiß mit Schatten */
body.home .navbar.scrolled {
	background-color: rgb(245, 245, 245) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



/* ============================
	 MENÜ – Einzelelemente (Desktop)
============================ */
.navbar-item {
	display: flex;
	align-items: center;
	float: left;
	background-color: inherit;
	color: inherit;
	font-size: 1.1rem;
	margin: 5px 4px;
	padding: 2px 8px;
	border: none;
	border-radius: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	width: auto;
	vertical-align: middle;
}

.navbar-item:hover {
	background-color: #282a2d !important;
	color: #fff !important;
}

.navbar-item .right {
	float: right !important;
}

.navbar-item.current {
	border-bottom: 2px solid red;
}

/* Standardgröße Icons in Navbar */
.navbar-item .mdi,
.navbar-item .mdi::before {
	font-size: 1.2rem;
	vertical-align: middle;
	line-height: 1;
}

/* ============================
	 MENÜ – Responsive Sichtbarkeit
============================ */
.hide {
	display: none !important;
}

@media (max-width: 600px) {
	.hide-small {
		display: none !important;
	}
}

@media (min-width: 601px) and (max-width: 992px) {
	.hide-medium {
		display: none !important;
	}
}

@media (min-width: 993px) {
	.hide-large {
		display: none !important;
	}
}

/* ============================
	 MENÜ – Mobile Navigation
============================ */
.navbar-small {
	display: none !important;
	background: #fff;
	color: #000;
	height: 100vh;
	width: 100%;
	text-align: left;
	padding: 3em;
	overflow: hidden;
}

@media (max-width: 992px) and (min-width: 601px),
			 (min-width: 993px) {
	.navbar-small {
		display: none !important;
	}
}

.navbar-small ul {
	list-style: none;
	background-color: inherit;
	color: inherit;
	display: block;
	padding: 6px 16px;
	margin: 0 auto 20px;
	max-width: 100%;
	overflow: hidden;
	user-select: none;
	white-space: nowrap;
	text-align: left;
}

.navbar-small ul li {
	display: block;
	margin: 0 auto 4vh;
	user-select: none;
	white-space: nowrap;
	text-align: left;
}

.navbar-small-item {
	display: flex;
	align-items: left;
	font-weight: 500;
	font-size: 1.25rem !important;
	color: #000;
	cursor: pointer;
	text-decoration: none;
	text-align: left;
	user-select: none;
	white-space: nowrap;
}

.navbar-small-item .mdi,
.navbar-small-item .mdi::before {
	font-size: inherit !important; /* Icon übernimmt die gleiche Größe wie der Text */
}

/* ============================
	 Mobile-Spezialfälle: bestimmte Icons größer
============================ */
@media (max-width: 601px) {
	.mdi.mdi-menu,
	.mdi.mdi-circle-half-full {
		font-size: 2rem !important;
	}
}

/* ============================
	 Generelle Vergrößerung Icons in Navbar
============================ */
.navbar-item .mdi,
.navbar-item .mdi::before {
	font-size: 1.8rem !important;  /* gewünschte Größe */
	line-height: 1;
	vertical-align: middle;
}







/* ============================
	 BREADCRUMB – Navigation
============================ */

.breadcrumb {
	font-size: 0.8rem; /* ca. 14px bei 16px Body */
	width: 100%;
	margin: 0px auto;
}


@media only screen and (min-width: 1200px) {
	.breadcrumb {
		width: 100%;
	}
}



	/* ============================
	 SLIDESHOW – Container & Bilder
============================ */
.slideshow-container {
	position: relative;
	width: 100%;
	margin: 2.6em auto 0;
	overflow: hidden;
	aspect-ratio: 3 / 1;
	line-height: 0;
	background: transparent center / cover no-repeat;
}

.slideshow-container figure {
	margin: 0;
	padding: 0;
}

.slideshow-container img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

/* Mobile Anpassung */
@media only screen and (max-width: 600px) {
	.slideshow-container {
		aspect-ratio: 3 / 2;
	}

	.slideshow-container img {
		aspect-ratio: 3 / 2;
	}
}

/* ============================
	 SLIDESHOW – Slides
============================ */
.mySlides {
	display: none;
	width: 100%;
}

.fade {
	animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
	from { opacity: 0.4; }
	to { opacity: 1; }
}

/* ============================
	 SLIDESHOW – Steuerungspfeile
============================ */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;                  /* Bezugspunkt: 50% Containerhöhe */
	transform: translateY(-50%);
	padding: 0.5em;            /* auf Mobile etwas kleiner */
	color: white;
	font-weight: bold;
	font-size: 1.8em;
	border: none;
	background: rgba(0,0,0,0.4);
	border-radius: 0.25em;
	user-select: none;
	z-index: 10;               /* sicher über dem Bild */
}

.prev { left: 0.25em; }
.next { right: 0.25em; }

/* Mobile Anpassung */
@media only screen and (max-width: 600px) {
	.prev, .next {
		font-size: 1.5em;     /* etwas kleinere Pfeile */
		padding: 0.25em;      /* weniger Padding */
	}
}

/* ============================
	 SLIDESHOW – Dots
============================ */
.slideshow-dots {
	text-align: center;
	margin-top: 1em;
}

.dot {
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin: 0 4px;
	background-color: #bbb;
	border-radius: 50% !important;
	border: none;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.dot.active,
.dot:hover {
	background-color: #717171;
}

/* Mobile Anpassung */
@media only screen and (max-width: 600px) {
	.dot {
		display: none;
	}
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 3em;
}
@media (max-width: 600px) { .numbertext { display:none }}




























/* ============================
	 LAYOUT – Abstandshalter
============================ */
.spacer {
	display: flex;
	align-items: center;
	min-height: 6vw;
}


/* ============================
	 PARALLAX – Hintergründe
============================ */
.parallax {
	display: flex;
	justify-content: center;
	position: relative;
	background: #ccc center / cover no-repeat fixed;
}

/* Parallax-Bilder: Trenner zwischen Sektionen */
.bgimg-1 {
	background-image: url("/img/podersdorf-neusiedlersee-leuchtturm.jpg");
	min-height: 100%;
}

.bgimg-2 {
	background-image: url("/img/podersdorf-neusiedlersee-leuchtturm.jpg");
	min-height: 400px;
}

.bgimg-3 {
	background-image: url("/img/d180muc-residenz01-2000px.jpg");
	min-height: 400px;
}


/* ============================
	 MISC – zusätzliche Klassen
============================ */
.w3-wide {
	letter-spacing: 10px;
}

.w3-hover-opacity {
	cursor: pointer;
}




/* ============================
	 BUTTONS
============================ */
.button {
	background-color: inherit;
	border: 1px solid #d5d9d9;
	border-radius: 1;
	box-shadow: rgba(213, 217, 217, 0.5) 0 2px 5px 0;
	box-sizing: border-box;
	color: #0f1111;
	cursor: pointer;
	display: inline-block;
	font-family: "Amazon Ember", sans-serif;
	font-size: 0.9rem !important;
	line-height: 29px;
	letter-spacing: 1px;
	margin: 0 auto;
	padding: 0 10px 0 11px;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	width: auto;
}

/*
.button:hover {
	background-color: #f7fafa;
	color: #444;
}

.button:focus {
	border-color: #008296;
	box-shadow: rgba(213, 217, 217, 0.5) 0 2px 5px 0;
	outline: 0;
}
*/


.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1em auto 2em auto;
	width:100%;
	color: #282830 !important;
}

.btn-wrapper {
	display: flex;
	justify-content: center;
}

.btn-readmore {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto !important;               /* sorgt für Zentrierung */
	width: fit-content;       /* nur so breit wie Inhalt */
	color: inherit !important;
	background: transparent !important;
	border: none;
	cursor: pointer;
	font-size: 1rem !important;
	touch-action: manipulation;
	text-transform: none;
	-webkit-tap-highlight-color: transparent; /* verhindert Markierung auf Mobile */
}





/* 360° VR STARTSEITE - Filter-Button */
.btn-filter {
	flex: none;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	background-color: #fff !important;
	border: 1px solid #6E6E6E;
	color: #404040 !important;
	cursor: pointer;
	font-size: 0.9rem !important;
/*	text-transform: uppercase; */
	letter-spacing: 1px;
	padding: 0.5em 0.7em;
	margin: 0.25em 0.5em;
	white-space: nowrap; /* Verhindert das Umbrechen des Inhalts */
/* max-width: 150px; */ /* Optional: Setze eine maximale Breite */
}








/* ============================================
	INTRO – Text AKTUELL (Grundlinienraster)
============================================ */
.intro {
	width: 95%;
	max-width: 980px;
	font-size: 1rem;
	line-height: 1.5; /* definiert Rasterhöhe */
	margin: 0 auto;
}

.intro p {
	margin: 0 0 1.5em 0; /* Abstand = 1 Zeilenhöhe */
}

/* Kein zusätzlicher Abstand vor dem ersten Absatz */
.intro p:first-child {
	margin-top: 0;
}

/* ============================================
	READMORE (Details/Summary)
============================================ */
.readmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
}

.readmore > summary {
	order: 2;
	cursor: pointer;
	list-style: none;
	margin-top: 1.5em; /* auch im Raster */
	display: inline-block;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: #0070f3;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.readmore > summary::-webkit-details-marker {
	display: none;
}

.readmore > summary::after {
	content: "Mehr lesen";
}

.readmore[open] > summary::after {
	content: "Weniger anzeigen";
}

.readmore-content {
	order: 1;
	max-height: 2000px;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.25s ease;
	opacity: 1;
	width: 100%;
	text-align: left;
}

@media (min-width: 992px) {
	.readmore > summary {
		display: none;
	}
	.readmore-content {
		max-height: none;
		overflow: visible;
		opacity: 1;
	}
}

/* ============================================
	INTRO – Desktop: 2 Spalten im Raster
============================================ */
@media (min-width: 992px) {
	.intro, .intro-columns {
		column-count: 2;
		column-gap: 30px;
		column-rule: 1px solid #777;
	}

	.intro-columns > * {
		break-inside: avoid-column;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Keine Zusatzabstände oben */
	.intro-columns p:first-child {
		margin-top: 0;
	}

	/* readmore-content darf Spalten aufteilen */
	.intro-columns > .readmore .readmore-content {
		break-inside: auto;
		-webkit-column-break-inside: auto;
		page-break-inside: auto;
	}
}






















/* Abstand als zusätzliche Klasse für alle Objekte */

.abstand {
	margin: 6vh 0 6vh 0;
}















/* ============================
	 HEADLINE / INTRO / CONTENT
============================ */
		.headlinebox {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.headlinebox hr {
			border: none;
			border-top: 1px solid red;
			width: 100%;
			margin: 0.5rem auto;    /* zentrieren */
		}

.headlinebox-inner {
	display: table;
	margin: 3vh auto 4vh auto;
	max-width: 90vw;
	width: auto;
}
























/* ============================================
	INTRO – Text AKTUELL (Grundlinienraster)
============================================ */
.intro {
	width: 95%;
	max-width: 980px;
	font-size: 1rem;
	line-height: 1.5; /* definiert Rasterhöhe */
	margin: 0 auto;
	margin-bottom: 6vh;
}

.intro p {
	margin: 0 0 1.5em 0; /* Abstand = 1 Zeilenhöhe */
}

/* Kein zusätzlicher Abstand vor dem ersten Absatz */
.intro p:first-child {
	margin-top: 0;
}

/* ============================================
	READMORE (Details/Summary)
============================================ */
.readmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
}

.readmore > summary {
	order: 2;
	cursor: pointer;
	list-style: none;
	margin-top: 1.5em; /* auch im Raster */
	display: inline-block;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.readmore > summary::-webkit-details-marker {
	display: none;
}

.readmore > summary::after {
	content: "Mehr lesen";
}

.readmore[open] > summary::after {
	content: "Weniger anzeigen";
}

.readmore-content {
	order: 1;
	max-height: 2000px;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.25s ease;
	opacity: 1;
	width: 100%;
	text-align: left;
}

.readmore-content p {
	margin: 0 0 1.5em 0; /* gleiche Abstände wie bei .intro */
}

/* Desktop: Readmore immer geöffnet */
@media (min-width: 992px) {
	.readmore > summary {
		display: none;
	}
	.readmore-content {
		max-height: none;
		overflow: visible;
		opacity: 1;
	}
}

/* ============================================
	INTRO – Desktop: 2 Spalten im Raster
============================================ */
@media (min-width: 992px) {
  .intro {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    position: relative;
  }

  .intro-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding:0;
  }

  /* Trennlinie genau mittig */
  .intro::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 3px); /* 50% Container - Hälfte des Gaps */
    width: 1px;
    background: #777;
    transformx: translateX(-50%);
  }

  /* Keine Zusatzabstände oben */
  .intro-column p:first-child {
    margin-top: 0;
  }
}

/* ============================================
	STARTSEITE - STORY ABOUT - Über mich
============================================ */
.story {
	display: grid;
	gap: 30px 30px;
	grid-template-columns: auto auto;
	align-items: start; /* sorgt dafür, dass Bild und Text oben bündig sind */
	margin: 0 auto;
	width: 95%;
}

@media only screen and (max-width: 600px) {
	.story { display: block; }
}

@media only screen and (min-width: 600px) {
	.story { grid-template-columns: auto auto; }
}

@media only screen and (min-width: 768px) {
	.story { grid-template-columns: 50% auto; }
}

@media only screen and (min-width: 992px) {
	.story { width: 100%; grid-template-columns: 40% auto; }
}

/* Bild-Container */
.story-img {
	margin: 0;
	margin-bottom: 3em;
	height: auto;
}

/* Bild selbst */
.story-img img {
	width: 100%;
	display: block;
}

/* Text-Container */
.about {
	margin: 0;
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Oberkante bündig mit Bild */
}

/* Absätze */
.about p {
	text-align: left;
	width: 100%;
	margin: 0 0 1.5em 0;
}

.about p:first-child {
	margin-top: -0.3em;
}

/* --- Readmore --- */
.about .readmore {
	display: flex;
	flex-direction: column;
}

.about .readmore > summary {
	order: 2;
	cursor: pointer;
	list-style: none;
	margin-top: 1.5em;
	display: inline-block;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	user-select: none;
}

.about .readmore > summary::-webkit-details-marker {
	display: none;
}

.about .readmore > summary::after {
	content: "Mehr lesen";
}

.about .readmore[open] > summary::after {
	content: "Weniger anzeigen";
}

.about .readmore-content {
	order: 1;
	width: 100%;
	text-align: left;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.5s ease, opacity 0.3s ease;
}

.about .readmore-content p {
	margin: 0 0 1.5em 0;
}

.about .readmore[open] .readmore-content {
	max-height: 2000px;
	opacity: 1;
}

/* ============================================
	Responsive Anpassungen
============================================ */
@media (min-width: 992px) {
	.about .readmore > summary {
		display: none;
	}
	.about .readmore-content {
		max-height: none;
		overflow: visible;
		opacity: 1;
	}
}































/* einzelne Absätze innerhalb .intro
.intro .absatz,
.absatz {
	display: block;
	margin-bottom: 0em;
	padding-bottom: 0.8em;
	break-inside: avoid;
	orphans: 2;    /* min. 2 Zeilen am Spaltenanfang */
	widows: 2;     /* min. 2 Zeilen am Spaltenende */
}

@media only screen and (max-width: 991px) {
#more .absatz {
	margin-top: 0em; /* Abstand zum vorherigen Element */
}
}
@media only screen and (max-width: 991px) {
.intro .absatz {
	margin-bottom: 0em;
}
}

.content-text {
	text-align: left;
	margin: 0 auto;
	width: 95%;
	max-width: 600px;
}

@media only screen and (min-width: 992px) {
	.content-text {
		max-width: 980px;
		column-count: 2;
		column-gap: 30px;
		column-rule-color: #777;
		column-rule-width: 1px;
		column-rule-style: solid;
		break-inside: avoid;
	}

	.content-text p {
		break-inside: avoid;   /* Verhindert, dass Absätze geteilt werden */
		margin-bottom: 1.5em;  /* optional: Abstand zwischen Absätzen */
	}
}

.content-text .absatz, .absatz {
	display: block;
	margin-bottom: 1em;
	break-inside: auto;
}

/* Mehr-/Weniger-Text für kleine Bildschirme */
@media (max-width: 600px) {
#more {
	display: none;
}
#more.show {
	display: inline-block; /* block oder inline-block */
	margin-bottom: 0px;
}
}


/* ============================
	 SEITENINHALT DATENSCHUTZ und IMPRESSUM
============================ */

.datenschutz,
.impressum {
	text-align: left;
	margin: 0 auto;
	width: 95%;
}

.impressum p,
.datenschutz p {
	font-size: 0.8rem;
	line-height: 1.4;
	margin-bottom: 1.2em;
}


/* ============================
	 ENDE SEITENINHALT (FOOTER-BEREICH)

.endofpage,
.blog-ende,
.vr-ende {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 8vw 0 10vw 0;
	margin-left: auto;
	margin-right: auto;
}
============================ */

.end-of-page {
	margin: 4vw auto 8vw auto;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
	display: flex;
	justify-content: center;
	width:100%;
}







.scrolltotop {
	background-color:#fff !important; 
	color:#000 !important; 
	border-radius:50%; 
	font-size:2.2rem; 
	padding:0;
	display:block !important;
}

.darkmode-btngg {
	display: inline-flex;           /* flex für zentriertes Icon */
	align-items: center;            /* vertikal zentrieren */
	justify-content: center;        /* horizontal zentrieren */
	width: 2.5rem;                  /* Kreisgröße passend zum Icon */
	height: 2.5rem;
	background-color: #fff;         /* Hintergrund */
	color: #000;                    /* Icon-Farbe */
	border-radius: 50%;             /* rund */
	font-size: 2.5rem;              /* Icongröße */
	line-height: 1;                 /* damit Icon zentriert */
	cursor: pointer;
}


/* ============================
	 W3C Altes Styling / Utility Classes
============================ */
.w3-right,
.right {
	float: right !important;
}

.w3-bar {
	width: 100%;
	overflow: hidden;
}

.w3-card {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.w3-animate-top {
	position: relative;
	animation: animatetop 0.4s;
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}

.w3-white {
	color: #000 !important;
	background-color: #fff !important;
}

.w3-show {
	display: block !important;
}