:root {
  /* Brand Core */
  --brand-primary:   #ada59a; /* ruhiges Teal/Grün */
  --brand-primary-light:   #d4cfca; /* ruhiges Teal/Grün */
  --brand-secondary: #ada59a; /* warmes Beige/Sand */
  --brand-accent:    #ada59a; /* dezentes Gold/Accent */
  --brand-bg:    #ada59a; /* dezentes Gold/Accent */
  --brand-wte:    #fff; /* dezentes Gold/Accent */
}


body {
font-family: 'Messina Sans';
margin:0;
padding:0;
font-size:19px;
line-height:1.0em;
font-weight:normal;
background-color:#fff;
color:#978f83;
overflow-x:hidden;
width:100%;
height:100v%;
display:block;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
position: relative;
}

strong {
font-weight:normal;
}

p, ul, li, h1, h2, a {
text-size-adjust: none;
-webkit-text-size-adjust:none;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
outline:none;
}

a:focus {
text-size-adjust:none;
-webkit-text-size-adjust:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
background-color:transparent;
}
pre {
display:none;
}

.header {
width:100%;
height:90px;
background-color:#fff;
position:fixed;
color:#ada69b;
padding:0 0%;
vertical-align: middle;
text-align:center;
transition:1s ease width;
-webkit-transition:1s ease width;
left:0;
top:0;
display:flex;
z-index:200;

}

.headerinner {
	max-width:1700px;
	height:90px;
	width:94%;
	display:flex;
	justify-content: space-between;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	vertical-align:middle;
	text-align:center;
	align-items: center;
	top:0;
}

div.terminbuchen {
width:auto;
min-width:195px;
display:inline-flex;
height:90px;
position:relative;
align-items: center;
vertical-align:middle;

color:#978f83;
}
.terminbuchen a {


text-align: left;
font-size:.95em;
line-height:1.1em;
letter-spacing: 0.03em;
color:#978f83;

}
.terminbuchen a:hover {
opacity:.5;

}
.terminbuchen a.telefon {

margin-right:20px;
}
.terminbuchen a.telefon img {
width:35px;
height:40px;

}
.menubu {
width:195px;
height:90px;
position:relative;
display:inline-flex;
align-items: center;
text-align:right;
vertical-align:middle;
justify-content: flex-end; 
}




a {
text-decoration: none;
color:#978f83;
}

.content div a {
text-decoration: none;
}

.content div a:hover {
text-decoration: none;
opacity:.5;
}

.logo {
width:auto;
height:100px;
position:relative;
display:inline-flex;
align-items: center;
vertical-align:middle;
margin-top:0px;
}

.logo img {
width:250px;
left:0px;
margin-left:-20px;
}


.content {
text-align:center;
padding:90px 0 70px 0;
margin:0;
width:100%;
height:100%;
position:relative;

}

.content p,
.content .textrahmen h2, 
.content .textrahmen h3, 
.content .textrahmen ul, 
.multitext div {
width:76%;
position:relative;
color: #978f83;
margin:auto auto;
padding:20px 0;
line-height:1.6em;
letter-spacing: 0.03em;
font-weight: normal;
}
.content p {
font-size:1.0em;
font-weight: normal;
}
#inhalt2 .content p {
padding:0 0 0 0;
}
@media (min-width:1000px) {
.content .textrahmen h2 {
line-height: 1.2em;
letter-spacing: 0.04em;
}
}
.content h1 {
color:#ada69b;
font-size:3.2em;
width:100%;
position:relative;
margin:0 auto;
line-height:.95em;
letter-spacing: 0.06em;
}

.content .inhalt2spalten h1 {
color:#ffffff;
font-size:2.6em;

position:relative;
margin:0 auto;
line-height:1.2em;
letter-spacing: 0.04em;
font-weight:normal;
}

.content h2 {
color:#ada69b;
font-size:1.8em;
width:100%;
position:relative;
margin:0 auto;
line-height:1.2em;
letter-spacing: 0.04em;
font-weight:normal;
}


.multi {
width:100%;
height:100vh;
position:relative;
background-color:#ada69b;
color:#fff;
}

.multi .multitext {
width:100%;
height:auto;
position:relative;

color:#fff;

}

.multi .multitext p,
.multi .multitext h1 {
text-align: center;
position: relative;

}

.multi p,
.multi h1,
.multi h2 {
color:#fff;

}

.textrahmen {
padding:100px 0;
margin:0;

}

div.inhalt2spalten {
width:100%;
position:relative;
height:auto;
display:flex;

}

.content > div.inhalt2spalten > div {
position:relative;
display:inline-flex;
width:50%;
height:auto;
flex-direction: column;
text-align:left;
align-items: center;
justify-content: center;
}

.content > div.inhalt2spalten > div > div.spalteinner {

display:inline-block;
height:auto;
}

div.inhalt2spalten > div p {
width:100%;
}

div.inhalt2spalten > div p.img {
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
line-height:0;
}

div.inhalt2spalten > div img {
width:100%;
height:auto;
position:relative;
}

div.inhalt2spalten > div div.img {
width:100%;

}
.bilder {
width:90%;
height:auto;
position:relative;
margin-left:auto;
margin-right:auto;
text-align:center;
display:grid;
grid-template-columns:calc(50%-15px) calc(50%-15px);
grid-column-gap:30px;
z-index:10;
line-height:0;
}

.bilder.vb {
width:100%;
}

.bilder img {
width:100%;
height:auto;
position:relative;

border:0;
}
.bilder .vollebreite img {
z-index:700;
}

.bilder .bild {
line-height:0;
position:relative;
}
.vollebreite {
width:100%;
height:auto;
position:relative;
vertical-align:top;
grid-column: 1 / 3;
line-height:0;
}



.linkeSpalte {
width:100%;
height:auto;
position:relative;
display:inline-block;
vertical-align:top;
grid-column:1/1;
display:grid;
grid-row-gap:0px;
line-height:0;
}



.rechteSpalte {
width:100%;
height:auto;
position:relative;
display:inline-block;
grid-column:2/2;
display:grid;
grid-row-gap:0px;
line-height:0;
}


button.menubutton {
width:40px;
height:40px;
border:0;
background-color:transparent;
position:relative;
left:0px;
top:0px;
display:inline-block;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
text-align:right;

}
button.menubutton.focus {
outline: none;
}
div.menu {
top:0px;
position:fixed;
height:100vh;

opacity:0;
z-index:-200;
width:100%;
}

body.auf div.menu {
top:0;
position:relative;
height:100%;
left:0;
position:fixed;
width:100%;
z-index:200;
background-color:var(--brand-wte);
opacity:1;
}

body.auf div.menu nav {
display:flex;
width:78%;
height:100%;
background-color: var(--brand-bg);
top:90px;
position:absolute;
justify-content: center;
flex-direction: column;
}

body.auf div.menu nav section {
padding-left:12vw;

}

body div.menu nav section .textrahmen {
margin-left:0px;
opacity:0;
transition:margin-left .5s;
}
body div.menu nav section .textrahmen {
font-size:2.6em;
}
body.auf div.menu nav section .textrahmen {
font-size:2.6em;
color:var(--brand-wte);
margin-left:0;
opacity:1;
font-weight:normal;
line-height: 1.2em;
letter-spacing: 0.04em;
}
body.auf div.menu nav section .textrahmen p {
line-height:1.3em;
font-weight:normal;
letter-spacing:inherit;
}
body.auf div.menu nav section .textrahmen a {
color:#fff;
text-decoration: none;
font-weight:normal;
}

body div.menu nav section .textrahmen a {
margin-left:-50px;
transition:.5s;
display:inline-block;
font-weight:normal;
transition:.5s ease all;
}
body.auf div.menu nav section .textrahmen a {
border-bottom:0px solid transparent;
}
body.auf div.menu nav section .textrahmen a:hover {
border-bottom:0px solid var(--brand-wte);
opacity:.5;
}
body.auf div.menu nav section .textrahmen a {
margin-left:0;
}

button.menubutton {
line-height:0.5em;
margin-left:0;
padding-left:0;

display:inline-block;
position:relative;
}




button.menubutton span.strich {
width:34px;
height:1px;
background-color:#ada69b;
display:inline-block;
position:relative;
left:0px;
}

button.menubutton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;               /* Abstand zwischen den Strichen */
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

button.menubutton .strich {
  width: 30px;
  height: 2px;
  background-color: #ada69b;
  transition: transform 0.3s ease, rotate 0.3s ease, opacity 0.2s ease;
}

/* Offener Zustand -> Striche überkreuzen */
body.auf button.menubutton {
  gap: 0;   /* Striche übereinanderziehen */
}

body.auf button.menubutton .strich:nth-child(1) {
  transform: rotate(45deg);
}

body.auf button.menubutton .strich:nth-child(2) {
  transform: rotate(-45deg);
}





.nurm {
display:none;
}

@media screen and (min-width:1000px) {
	.nurd {
	display:block;
	}
}
body.auf .header {
width:100%;
text-align:left;
background-color:rgba(255,255,255,1);
z-index:1000;
} 

body.auf .logo {

}
body.auf .menubutton {

}






#inhalt2spalten3 .spalte2 {

width:50%;

}





.content p br.nurm {
display:none;
}

@media (max-width:1000px) {
  body {

  }
	.nurd {
	display:none;
	}
  body.auf {
    overflow: hidden;
  }

  body div.menu {
    display: flex;
    opacity: 0;
    z-index: -200;

  }

  body.auf div.menu {
    position: fixed;
    top: 75px;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    display: flex;
    opacity: 1;
    z-index: 1001;
    box-sizing: border-box;
  }

  body.auf div.menu nav {
    top: 0;
    width: 85%;
    justify-content: start;
  }
	.content h2 {
	font-size:1.6em;

	}

  body div.menu nav section {
    padding-left: 8vw;

  }

  body.auf div.menu nav section {
    padding-left: 8vw;
  }

  body div.menu nav section .textrahmen {
    margin-left: 0;
    opacity: 0;
    font-size: 2em;
    background-color: var(--brand-accent);

    padding: 120px 0 0 0;
  }

  body.auf div.menu nav section .textrahmen {
    font-size: 1.8em;
    font-weight: normal;
    color: var(--brand-wte);
    margin-left: 0;
    opacity: 1;
    padding: 190px 0 0 0;
  }

  body.auf div.menu nav section .textrahmen p {
    line-height: 1.4em;
    font-weight: normal;
    letter-spacing: inherit;
  }

  body div.menu nav section .textrahmen a {
    margin-left: -50px;
    display: inline-block;
    font-weight: normal;
    transition: 1s;
  }

  body.auf div.menu nav section .textrahmen a {
    margin-left: 0;
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    border-bottom: 0 solid transparent;
  }

  body.auf div.menu nav section .textrahmen a:hover {
    border-bottom: 0 solid var(--brand-wte);
    opacity: .5;
  }



}


@media screen and (max-width:1000px) {
body {
text-size-adjust:none;
}

body {

font-family: 'Messina Sans';
margin:0;
padding:0;
font-size:16px;
line-height:1.3em;
font-weight:normal;;
background-color:#fff;
color:#ada69b;
overflow-x:hidden;
width:100%;
height:auto;
display:block;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}

.content p, .multitext div {
width: 70%;
position: relative;
color: #ada69b;
margin: 0 auto;
padding: 10px 0;
line-height: 1.5em;
letter-spacing: 0.03em;
font-size: 1.0em;
}


.content p,
.content .textrahmen h2, 
.content .textrahmen h3, 
.content .textrahmen ul, 
.multitext div {
width:80%;
position:relative;
color: #978f83;
margin:auto auto;
padding:20px 0;
line-height:1.6em;
letter-spacing: 0.03em;
font-weight:normal;;
text-align:left;
}


.content .textrahmen h2 {

line-height:1.2em;
}

.textrahmen {
padding: 25px 0;
margin: 0;
}

.content > div.inhalt2spalten {

display:flex;
flex-direction: column;
padding: 25px 0;
}



.content > div.inhalt2spalten > div {
position:relative;
display:flex;
width:100%;
height:auto;
flex-direction: row;
text-align:left;
align-items: center;
justify-content: center;

}



.content > div.inhalt2spalten > div {
position:relative;
display:flex;
width:100%;
height:auto;
flex-direction: row;
text-align:left;
align-items: center;
justify-content: center;

}

.content > div.inhalt2spalten > div > div.spalteinner {
display:block;

}


.content > div.inhalt2spalten .spalteinner {
padding-left:3%;
padding-right:3%;
padding-top: 20px;
padding-bottom:20px;
}
.content > div.inhalt2spalten .spalteinner.img {
padding-left:0%;
padding-right:0%;
padding-top: 0px;
padding-bottom:0px;
}
.logo {
height:75px;
}
.header {
height:75px;
}

.terminbuchen {
height:75px;
}
.menubu {
width: 195px;
height: 75px;

}
.headerinner {
width:90%;
height:75px;
}

div.terminbuchen {
width:70px;
min-width:70px;
text-wrap:wrap;

}

.content {
text-align: center;
padding: 75px 0 90px 0;

}

.terminbuchen a {
width:70px;
text-wrap:wrap;
text-align: left;
font-size:.8em;
line-height:1.1em;
letter-spacing: 0.03em;
}
a.onlinetermin {
display:inline-block;
position: fixed;
bottom:0px;
margin-left:0;
margin-right:0;
left:0;
background:#ada69b;
color:#fff;
z-index:200;
padding:.7em 0rem .8rem 0rem;
width:100%;
text-align:center;
z-index:200;
margin-bottom:0;
font-size: 19.0px;
box-sizing: border-box;
transition:.5s;
font-weight:bold;
margin: 0 auto;
line-height: 1.2em;
letter-spacing: 0.04em;
}

body.scrolled a.onlinetermin {
opacity:0;
z-index:-200;
scale:0;
}

.menubu {
width: 70px;

}

.terminbuchen a.telefon img {
width:30px;
height:35px;
}
.terminbuchen a.telefon {
margin-top:8px;
margin-right:5px;
}

button.menubutton {
line-height: 0.5em;
margin-left: 0;
padding-left: 0;
display: inline-block;
position: relative;
}

button.menubutton span.strich {
width:24px;
}

button.menubutton {
line-height:0.5em;
margin-left:0;
padding-left:0;

display:inline-block;
position:relative;
}




button.menubutton span.strich {
width:28px;
height:1px;
background-color:#ada69b;
display:inline-block;
position:relative;
left:0px;
}

button.menubutton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;               /* Abstand zwischen den Strichen */
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

button.menubutton .strich {
  width: 30px;
  height: 2px;
  background-color: #ada69b;
  transition: transform 0.3s ease, rotate 0.3s ease, opacity 0.2s ease;
}

/* Offener Zustand -> Striche überkreuzen */
body.auf button.menubutton {
  gap: 0;   /* Striche übereinanderziehen */
}

body.auf button.menubutton .strich:nth-child(1) {
  transform: rotate(45deg);
}

body.auf button.menubutton .strich:nth-child(2) {
  transform: rotate(-45deg);
}


.content .inhalt2spalten h1 {
color: #ffffff;
font-size: 1.2em;
position: relative;
margin: 0 auto;

line-height: 1.2em;
letter-spacing: 0.04em;
}

.logo img {
width: 200px;
left: 0px;
}

.content .spalteinner p br {
	display:none;
	}


.content p br.mdoch {
display:block;
}
.content p br.nurm {
display:block;
}
}


@media screen and (max-width:1000px) and (orientation:landscape) {


}
.content p br.nurmdoch {
display:none;
}


#debug-hud {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 99999;
    font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    pointer-events: none; /* nicht anklickbar, stört nichts */
    white-space: nowrap;
    display:none;
  }
  #debug-hud .dim {opacity:.75;}
  
.inhalt2spalten .slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* alternativ: height: 480px; */

}

/* Slides stacken, per opacity überblenden */
.slideshow .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2000ms ease; /* 2s */
  will-change: opacity;              /* GPU Hint */
  backface-visibility: hidden;
  pointer-events: none;
}

.slideshow .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Falls Bilder sehr groß sind, hilft das häufig gegen Mikroruckler */
.slideshow {
  contain: layout paint; /* grenzt Repaints ein */
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
  .slideshow .slide { transition: none; }
}



#debug-hud {
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 9999;
  min-width: 180px;
  max-width: 40vw;
  max-height: 40vh;
  overflow-y: auto;

  background: rgba(0, 0, 0, 0.75);
  color: #0f0;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;

  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  white-space: pre-wrap; /* Zeilenumbrüche */
}


@media (max-width:1000px) and (orientation:landscape) {

body.auf div.menu nav section .textrahmen {
padding-top:40px;
}


.content > div.inhalt2spalten#inhalt2spalten21 {
display: flex;
flex-direction: row;
padding: 25px 0;
}

}



@media (min-width:1000px) and (max-width:1200px) {

body.auf div.menu nav {
display: flex;
width: 78%;
height: 100%;
background-color: var(--brand-bg);
top: 40px;
position: absolute;
justify-content: center;
flex-direction: column;
}

}