@charset "utf-8";

@font-face { 
	font-family: 'sonfon'; 
	src: url('../media/fonts/sonfon.ttf');
}


a.mnav {
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'sonfon';
	color: var(--vc1);
	border: 0;
	background-color: transparent;
	font-weight: 500;
	font-size: 5vw;
	line-height: 1.5vw;
	margin: 0.5vw;
	padding: 1vw 1vw;	
}
a.mnav:hover {
	text-decoration: none;
	color: var(--vc2);
	border: 0;
	background-color: var(--bc2);
}

a.mnav.pointernav {
	text-decoration: none;
	color: var(--vc3);
	border: 0;
	background-color: transparent;
}
a.mnav.pointernav:hover {
	text-decoration: none;
	color: var(--vc2);
	border: 0;
	background-color: var(--bc2);
}

.mainnav nav{
  width: 100%;
}

/* UL */
.mainnav .navlist{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* LI */
.mainnav .navlist > li{
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.mainnav .navlist > li:not(:last-child)::after{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9a24a;

  margin: 0 32px;
  transform: translateY(-1px);
}

.tlogo {
	width: 14vw;
	margin: 2vw;
}

.topnavline {
	color: var(--vc1);
	background: var(--bc1);
}

.topnavorna {
    background-image: url("../media/web/bgtop.jpg");
    background-position: center;
	background-size: cover;
}

.mainnav {
	background-color: var(--bc2);
	border-top: 6px goldenrod double;
	border-bottom: 5px goldenrod double;
}



.mnavline, .botnavline {
	color: var(--vc1);
	background: var(--bc3);
}

.is-sticky {
    background-color: var(--bcdk75) !important;
    
}

.slidebar {
    position: absolute;
    bottom: 20%;
    left: 0;
}

.sbubblepos {
    position: absolute;
    top: 20%;
    left: 10%;
}

.slogo1pos {
    position: absolute;
    top: 0;
    right: 0;
}

.slogo2pos {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
}

.slogo3pos {
    position: absolute;
    top: 0;
    right: 20vw;
    width: 35vw;
}

.kontentfrm {
  padding:var(--ctttfrnp, 16px);
  background-color: var(--bcdk75);
  background-image:
    url(../media/web/frameset1nw.webp),
    url(../media/web/frameset1ne.webp),
    url(../media/web/frameset1sw.webp),
    url(../media/web/frameset1se.webp),
    url(../media/web/frameset1n.webp),
    url(../media/web/frameset1s.webp),
    url(../media/web/frameset1w.webp),
    url(../media/web/frameset1e.webp);
    

  background-position:
    left   top,
    right  top,
    left   bottom,
    right  bottom,
    top,
    bottom,
    left,
    right,
    center;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y,
    repeat;

  background-size:
    24px 24px,
    24px 24px,
    24px 24px,
    24px 24px,
    auto 24px,
    auto 24px,
    24px auto,
    24px auto,
    auto;

  /* Ecken/Kanten am Außenrand zeichnen, Mitte erst ab Padding */
  background-origin:
    border-box, border-box, border-box, border-box,
    border-box, border-box, border-box, border-box,
    content-box;


	flex: 1 1 auto;
    height: 100%;

}

.hero-fade{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;

  background: linear-gradient(
    to bottom,
    #00000000 0%,
    #4c030880 60%,
    #330607 100%
  );
}



/* ============================================================
   DER "NAV-STABILISATOR" (Fix für hüpfende Menüs)
   ============================================================ */

/* 1. Alle Listen-Punkte (<li>) werden zu identischen Flex-Boxen */
.navlist > li {
    display: flex !important;  /* Zwingt ALLE ins gleiche Raster */
    align-items: center !important; /* Zentriert den Inhalt vertikal */
    justify-content: center;
    height: 100%; /* Nutzen die volle Höhe der Leiste */
}

/* 2. Die Links (<a>) selbst werden auch stabilisiert */
/* Damit ignorieren sie line-height Probleme und zentrieren sich mathematisch */
a.mnav {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Wir nehmen die Höhe aus dem Padding/Font statt line-height */
    /* Das ist robuster gegen Verrutschen */
    line-height: 1.2 !important; 
    
    /* Optional: Fixe Mindesthöhe, damit alle Buttons gleich fett sind */
    /* 32px Font + 8px Padding oben + 8px unten + Border = ca. 50-60px */
    min-height: 56px; 
}

/* 3. Korrektur für den Dropdown-Pfeil */
/* Damit er schön mittig neben dem Text sitzt */
.caret {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 12px;
    padding-top: 4px; /* Kleine optische Korrektur */
}

.logotopo {
	width: 90vw;
}


a.mnav {
	font-size: 5vw;
	line-height: 28px;
	margin: 0.5vw;
	padding: 0.5vw 0.7vw;	
}

.tlogo {
	width: 1.8vw;
	margin: 8px;
}
.logotopo {
	width: 80vw;
}

.nav-logo {
  display: none;
  align-items: center;
  gap: 10px;

  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width .25s ease, opacity .25s ease;
}

.mainnav.is-sticky .nav-logo {
  display: inline-flex;
  width: 55vw;
  opacity: 1;
  pointer-events: auto;
}


.mainnav .navlist > li:not(:last-child)::after{
  width: 8px;
  height: 8px;

  margin: 0 32px;
  transform: translateY(-1px);
}

.herologo {
    position: absolute;
    left: 20w;
    top: 5vh;
    width: 100vw;
    height: auto;
}

.heroterm {
    position: absolute;
    left: 20w;
    bottom: 40vh;
    min-width: 30vw;
    height: auto;
    text-align: center;
}

.heroprog {
    position: absolute;
    left: 20w;
    bottom: 10vh;
    min-width: 30vw;
    max-width: 70vw;
    height: auto;
    text-align: center;
}

.heroschl {
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleX(-1);
    height: 100%;
}

.heroschr {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.herogoldrain {
  position: absolute;
    left: 0;
    top: 0;
    background-image: url("../media/web/goldregen.webp");
    background-repeat: repeat;
    background-size: auto 50%;
    background-position: 0% 50%;
    width: 100%;
    height: 100%;
    animation: herogoldrainfall 60s linear infinite;
}

@keyframes herogoldrainfall {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 25% 450%;
    }
}


.herogoldrain2 {
  position: absolute;
    left: 0;
    top: 0;
    background-image: url("../media/web/goldregen.webp");
    background-repeat: repeat;
    background-size: auto 25%;
    background-position: 0% 25%;
    width: 100%;
    height: 100%;
    animation: herogoldrainfall2 120s linear infinite;
}

@keyframes herogoldrainfall {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 25% 450%;
    }
}


@keyframes herogoldrainfall2 {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 25% 450%;
    }
}


.progimg {
  width: 100%;
  float: left;
  margin: 8px;
}

#refgallerie {
  line-height: 0;   
  -webkit-column-count: 1;
  -webkit-column-gap:   0px;
  -moz-column-count:    1;
  -moz-column-gap:      0px;
  column-count:         1;
  column-gap:           0px;  
}

#refgallerie img {
 border: 4px solid transparent;
}

/* --------------------------------------------------------
   >= 576px — mobiles Hochformat / kleine Tablets
--------------------------------------------------------- */
@media (min-width: 576px) {
a.mnav {
	font-size: 6vw;
	line-height: 1.5vw;
	margin: 0.5vw;
	padding: 2vw 2vw;	
	border-radius: 50ex;	
}

.tlogo {
	width: 14vw;
	margin: 2vw;
}

.logotopo {
	width: 90vw;
}


}

/* --------------------------------------------------------
   >= 768px — Tablet
--------------------------------------------------------- */
@media (min-width: 768px) {
a.mnav {
	font-size: 5.5vw;
	line-height: 1.7vw;
	margin: 0.5vw;
	padding: 0.5vw 0.75vw;	
}

.tlogo {
	width: 96px;
	margin: 8px;
}
.logotopo {
	width: 80vw;
}

.herologo {
    position: absolute;
    left: 20w;
    top: 5vh;
    width: 80vw;
    height: auto;
}

.heroterm {
    position: absolute;
    left: 20w;
    bottom: 35vh;
    min-width: 30vw;
    height: auto;
    text-align: center;
}


.progimg {
  width: 120px;
  float: left;
  margin: 8px;
}

.mainnav .navlist > li:not(:last-child)::after{
  width: 0.5vw;
  height: 0.5vw;

  margin: 0 2vw;
  transform: translateY(-1px);
}

#refgallerie {
  line-height: 0;   
  -webkit-column-count: 2;
  -webkit-column-gap:   0px;
  -moz-column-count:    2;
  -moz-column-gap:      0px;
  column-count:         2;
  column-gap:           0px;  
}

#refgallerie img {
 border: 4px solid transparent;
}

}


/* --------------------------------------------------------
   >= 992px — Tablet breit / Laptop klein (Port)
--------------------------------------------------------- */
@media (min-width: 992px) {
.logotopo {
	width: 75vw;
}


a.mnav {
	font-size: 1.7vw;
	line-height: 1.7vw;
	margin: 0.2vw;
	padding: 0.2vw 0.55vw;	
}

.mainnav.is-sticky .nav-logo {
  width: 18vw;
}

.heroterm {
    position: absolute;
    left: 20w;
    bottom: 15vh;
    min-width: 30vw;
    height: auto;
    text-align: center;
}

#refgallerie {
  line-height: 0;   
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;  
}

#refgallerie img {
 border: 4px solid transparent;
}
}

/* --------------------------------------------------------
   >= 1200px — Desktop
--------------------------------------------------------- */
@media (min-width: 1200px) {
.logotopo {
	width: 75vw;
}


a.mnav {
	font-size: 1.5vw;
	line-height: 28px;
	margin: 0.2vw;
	padding: 0.2vw 0.4vw;	
}


.mainnav.is-sticky .nav-logo {
  width: 18vw;
}

.tlogo {
	width: 1.8vw;
	margin: 8px;
}
.logotopo {
	width: 80vw;
}


.mainnav .navlist > li:not(:last-child)::after{
  width: 8px;
  height: 8px;

  margin: 0 32px;
  transform: translateY(-1px);
}

.herologo {
    position: absolute;
    left: 20w;
    top: 5vh;
    width: 60vw;
    height: auto;
}

.heroterm {
    position: absolute;
    left: 20w;
    bottom: 10vh;
    min-width: 30vw;
    height: auto;
    text-align: center;
}

.heroschl {
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleX(-1);
    height: 100%;
}

.heroschr {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

}

/* --------------------------------------------------------
   >= 1600px — XXL Desktop
--------------------------------------------------------- */
@media (min-width: 1600px) {
a.mnav {
	font-size: 24px;
	line-height: 28px;
	margin: 8px;
	padding: 8px 12px;	
}

.tlogo {
	width: 96px;
	margin: 8px;
}
.logotopo {
	width: 1000px;
}


.mainnav .navlist > li:not(:last-child)::after{
  width: 8px;
  height: 8px;

  margin: 0 32px;
  transform: translateY(-1px);
}

.herologo {
    position: absolute;
    left: 20w;
    top: 5vh;
    width: 60vw;
    height: auto;
}

.heroterm {
    position: absolute;
    left: 20w;
    bottom: 10vh;
    min-width: 30vw;
    height: auto;
    text-align: center;
}

.heroschl {
    position: absolute;
    left: 0;
    top: 0;
    transform: scaleX(-1);
    height: 100%;
}

.heroschr {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

}