/* ===============================
   Allgemeingültiger Kram
   Farbpalette basierend auf Logo:
   - Dunkelblau Haupt: #171733
   - Weiß: #ffffff
   - Hellweiß: #fafafa
   - Dunkelblau Nuancen: #181834, #191935, #161733
   - Akzent-Rot: #87192b
   =============================== */

html, body {
	margin: 0;
	background-color: #fafafa;
	color: #171733;
	font-family: Arial, sans-serif;
	padding: 0;
  overflow-x: hidden;
	max-width: 100%;
}
h1, h2, h3, h4, h5 {
	color: #171733;
}
h1{
	color: #fafafa;
	margin-top: 4%;
}
header { 
	height: auto;
	min-height: 500px;
	box-shadow: 0px 5px 13px 2px #e6e6ea;
  	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.Überschrift{
	margin-top: 2%;
	text-align: center;
	min-height: 8%;
	margin-bottom: auto;
}
/* Bilder global responsive */
img, .bild, .bild1, .bild2, .bild3 {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Links */
a {
	text-decoration: none;
}
a:not([class]) {
  all: unset;
  cursor: pointer;
  color: inherit;
}
body {
	background-color: #171733;
	color: #ffffff;
}

/* Tablet hochkant */
@media (max-width: 768px) {
  .desgin {
    	flex-direction: column;
    	padding: 10px;
    	margin: 10px;
    	align-items: center;
  }
  .abstand, .abstand1, .abstand2, #text, .text1 {
    	margin: 10px;
    	font-size: 16px;
    	padding: 10px;
  }
  .bild1 {
    	width: 100%;
    	min-width: unset;
    	min-height: unset;
  }
  .Farbe, .Farbe2, .Farbe3, .Farbe4 {
    	font-size: 18px;
    	padding: 10px;
    	display: block;
    	margin: 10px 0;
  }
  .Überschrift {
    	margin-left: 0;
    	text-align: center;
  }
  footer {
    	margin: 10px;
  }
  .headline-row,
  .kontakt-zeile {
    	flex-direction: column;
    	align-items: flex-start;
  }
  h2{
    font-size: 13px;
  }
}

/* Tablet quer */
@media (max-width: 992px) {
  .desgin {
    	flex-direction: column;
    	padding: 10px;
    	margin: 10px;
    	align-items: center;
  }
  .abstand, .abstand1, .abstand2, #text, .text1 {
    	margin: 10px;
    	font-size: 16px;
    	padding: 10px;
  }
  .bild1 {
    	width: 100%;
    	min-width: unset;
    	min-height: unset;
  }
  .Farbe, .Farbe2, .Farbe3, .Farbe4 {
    	font-size: 18px;
    	padding: 10px;
    	display: block;
    	margin: 10px 0;
  }
  .Überschrift {
    	margin-left: 0;
    	text-align: center;
  }
  footer {
    	margin: 10px;
  }
  .headline-row,
  .kontakt-zeile {
    	flex-direction: column;
    	align-items: flex-start;
  }
}

/* Smartphone */
@media (max-width: 480px) {
  .abstand, .abstand1, .abstand2, #text, .text1 {
    	margin: 10px;
    	font-size: 16px;
    	padding: 10px;
  }
  .bild1 {
    	width: 100%;
    	min-width: unset;
    	min-height: unset;
  }
  .Farbe, .Farbe2, .Farbe3, .Farbe4 {
    	font-size: 18px;
    	padding: 10px;
    	display: block;
    	margin: 10px 0;
  }
  .Überschrift {
    	margin-left: 0;
    	text-align: center;
  }
  footer {
    	margin: 10px;
  }
  .headline-row,
  .kontakt-zeile {
    	flex-direction: column;
    	align-items: flex-start;
  }
  .desgin {
    flex-direction: column;
    padding: 10px;
    margin: 10px;
    align-items: center;
    background: white;             /* sorgt dafür, dass die Slideshow im Kartenrahmen bleibt */
  }

  .slideshow-column {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    overflow: hidden;              /* verhindert, dass Bilder rausstehen */
  }

  .slideshow-container {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background: #fff;              /* Hintergrund für sicheres Rendering */
  }

  .slideshow-container img {
    position: absolute;
    width: 50%;
    height: 50%;
    object-fit: cover;
    margin-left: 17%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .slideshow-container img.active {
    opacity: 1;
  }
}

header.head {
  display: flex;
  min-height: 500px;
  width: 100%;
}
/* Handy: Bild über Text */
@media (max-width: 768px) {
	header.head {
    	flex-direction: column;
    	min-height: auto;
 	}
  	.bild2, .Anpassung {
    	width: 100%;
  	}
  	.bild2 {
    	margin-bottom: 20px;
  	}
	.Anpassung {
    	margin-top: 0;
  }
    .bild1 {
    	width: 100%;
    	min-width: unset;
    	min-height: unset;
  }
    .desgin {
    flex-direction: column;        /* Text über Slideshow */
    padding: 12px;
    margin: 12px;
  }

  .content-column {
    order: 1;
    width: 100%;
    flex: 1 1 100%;
  }

  .slideshow-column {
    flex: 0 0 45%; /* nimmt Platz im Flex-Layout */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slideshow-container {
    position: relative;
    width: 100%;
   
    max-width: 300px;
    
    overflow: hidden;
    border-radius: 20px;
  }

  .slideshow-container img {
    position: absolute;
    inset: 0;
    max-width: 58%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  .slideshow-container img.active {
    opacity: 1;
  }
}
@media (min-width: 600px) and (max-width: 992px) {
  .desgin {
    flex-direction: column;         /* Text über Slideshow */
    align-items: center;
    padding: 4%;
  }

  .content-column {
    order: 1;
    width: 100%;
    text-align: center;
  }

  .slideshow-column {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .slideshow-container {
    position: relative;
    width: 90%;                     /* etwas kleiner als Desktop */
    max-width: 600px;               /* ideal für iPad quer */
    aspect-ratio: 16 / 9;
    min-height: 320px;
    overflow: hidden;
    border-radius: 20px;
    margin: 20px auto;              /* zentriert in der Karte */
  }

  .slideshow-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* Hover-Effekte */
@media (hover: hover) and (pointer: fine) {
  .Farbe:hover, .Farbe2:hover, .Farbe3:hover, .Farbe4:hover {
    background-color: #87192b;
    color: #ffffff;
    border-color: #ffffff;
  } 
  .bild:hover, .bild1:hover{
    max-width: 600px;
    max-height: 380px;
    border-radius: 100px;
    box-shadow: 0px 5px 13px 2px #87192b;
  }
  .bild3:hover{
    max-width: 50px;
    max-height: 50px;
    border-radius: 100px;
    box-shadow: 0 0 10px #87192b;
  }
  .Anpassung:hover{
    padding: 5%;
    border: 2px solid;
    background-color: #ffffff;
    color: #171733;
    border-color: #87192b;
    box-shadow: inset 0px 5px 50px 2px #87192b;
    text-align: center;
  }
  .Anpassung1:hover{
    padding: 5%;
    border: 2px solid;
    background-color:  #3a3a3a;
    color: #bbb78f;
    border-color: #1b1987;
    box-shadow: inset 0px 5px 50px 2px #8f820e;
    text-align: center;
  }

  .abstand2:hover{
    padding: 3%;
    font-size: 20px;
    background-color: #ffffff;
    color: #171733;
    border-color: #87192b;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
  }
}

/* Buttons & Links */
.Farbe, .Farbe2, .Farbe3, .Farbe4 {
	background-color: #171733;
	color: #ffffff;
	border-color: #87192b;
	border-width: 2px;
	font-weight: bold;
}
.Farbe {
	margin-right: 10px;
	font-size: 30px;
	border-style: solid;
	border-width: 3px;
	border-radius: 10px;
	padding: 5px;
}
.Farbe2 {
	margin-top: -15px;
	font-size: 40px;
	border-style: solid;
	border-width: 3px;
	border-radius: 15px;
	padding: 5px;
}
.Farbe3 {
	border-style: solid;
	border-width: 2px;
	border-radius: 10px;
	padding: 2%;
	transition: all 0.3s ease;
	overflow: hidden;
	min-width: 80px;
}	
.Farbe4 {
	border-style: solid;
	border-width: 3px;
	border-radius: 10px;
	padding: 5px;
	transition: all 0.3s ease;
	overflow: hidden;
	max-width: 300px;
}

/* Bilder (Desktop) */
@media (min-width: 1024px) {
    .bild1 {
        max-width: 600px;
		max-height: 380px;
    }
}

/* Bild-Styles */
.bild1 {
	border-style: solid;
	border-width: 0px;
	border-radius: 100px;
	border-color: #171733;
	margin-left: 2%;
}
.bild3 {
	max-width: 50px;
	max-height: 50px;
	border-radius: 100px;
}
.bild2 {
	width: 100%;
	position: relative;
	height: 100%;
	object-fit: cover;
	z-index: auto;
}
.Anpassung {
	width: auto;
  height: 100%;
	padding: 5%;
	border: 2px solid;
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
  text-align: center;
}
.Anpassung1 {
	width: 100%;
  height: 100%;
	padding: 5%;
	background-color: #3a3a3a;
	color: #bbb78f;
  text-align: center;
}

/* Layout-Elemente */
.desgin {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 5%;
	border: 2px solid #171733;
	margin: 3% 5% 0 5%;
	background-color: #ffffff;
	color: #171733;
	max-height: 1700px;
}
.abstand {
	margin-right: 20%;
	margin-left: 5%;
	font-size: 20px;		
}
.abstand1 {
	margin: 4%;
}
.abstand2 {
	padding: 3%;
	font-size: 20px;
	margin-top: 3%;
	margin-left: 4%;
	margin-right: 4%;
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
#text {
	padding: 20px;
	font-size: 20px;
	margin-right: 20px;
	margin-left: 20px;
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
.color {
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
.Überschrift {
	text-align: center;
}
.footer {
	border-style: solid;
	border-width: 2px;
	border-color: #171733;
	padding: 15px;
}
footer {
	margin-top: 3%;
	margin-left: 5%;
	margin-right: 5%;	
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.1);		
}
.headline-row {
	display: flex;
  	align-items: center;
  	gap: 16px;
  	margin-bottom: 10px;
}
.info, .info1 {
	margin-top: 10px;
	padding: 10px 14px;
	background-color: #171733;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #ffffff;
}
.info.hidden, .info1.hidden {
  	display: none;
}
.content-column {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 2%;
}
.text1 {
	padding: 20px;
	margin: 20px 40px 0 40px;
	background-color: #ffffff;
	color: #171733;
	border-color: #171733;
	box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}
.kontakt-zeile {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* ===============================
   Slideshow für wechselnde Bilder
   =============================== */
.slideshow-column {
	flex: 1; /* Slideshow nimmt flexiblen Platz */
	display: flex;
}
.slideshow-container {
  position: relative;            /* wichtig – kein absolute */
  width: 110%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;          /* sorgt für feste Höhe im Verhältnis */
  overflow: hidden;
  height:120%;
  min-height: 320px;             /* !!! gibt der Box echte Höhe */
}


.slideshow-container img {
	position: absolute;
	width: 110%;
	height: 110%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.slideshow-container img.active {
	opacity: 1;
	z-index: 1;
}
/* ===============================
   Preisübersicht & Tabellen
   =============================== */
.preise-section {
  margin: 5%;
  padding: 3%;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: #ffffff;
  color: #171733;
}

.preis-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  background-color: #ffffff;
  color: #171733;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.preis-tabelle th {
  background-color: #171733;
  color: #ffffff;
  text-align: left;
  padding: 14px;
  font-size: 18px;
  font-weight: bold;
}

.preis-tabelle td {
  padding: 14px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
  line-height: 1.5;
}

.preis-tabelle tr:last-child td {
  border-bottom: none;
}

/* Mobile Tabellen-Layout */
@media (max-width: 768px) {
  .preis-tabelle th, .preis-tabelle td {
    display: block;
    width: 100%;
  }
  .preis-tabelle tr {
    margin-bottom: 25px;
    display: block;
    border-bottom: 2px solid #171733;
    border-radius: 10px;
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  .preis-tabelle th {
    background-color: #171733;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
  }
}
.theme-select {
  height: 100vh;
  display: flex;
}

.theme {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}
.theme1 {
  background: #1e1e1e;
}
.theme2 {
  background: #3a3a3a;
}
/* Startscreen immer Vollbild */
.theme-select {
  min-height: 100vh;
}

/* Nach Startscreen normaler Content */
/* 🔒 Scroll-Sperre für Startscreen */
@media (min-width: 1024px) {
  html.lock-scroll,
  body.lock-scroll {
    height: 100%;
    overflow: hidden !important;
  }

  html.unlocked,
  body.unlocked {
    overflow-y: auto;
  }
}
.bild2{
  max-width: 50%;
  height: auto;
  border-radius: 2%;
  display: block;
  margin: 0 auto;
  margin-top: 80px;
}
.begrüßung{
  font-size: 20px;
}
/* ===============================
   Desktop-Navigation
   =============================== */
@media (min-width: 1024px) {
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    background-color: #171733;
  }

  .main-nav .Überschrift {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 10px 0;
  }

  /* Platz für fixes Menü schaffen */
  body.unlocked {
    padding-top: 70px;
  }
}
.empfehlung{
  margin-bottom: -30px; /*Warum macht das nichts gar nichts Ich habe keine Lust mehr das bleibt jetzt so*/
}