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

.sonfon {
	font-family: 'sonfon'; 
}

a.mnav {
	text-decoration: none;
	text-transform: uppercase;
	font-family: serif;
	font-size: 32px;
	font-weight: 500;
	color: var(--vc1);
	border: 1px solid transparent;
	background-color: transparent;
	margin: 8px;
	padding: 8px 24px;	
	border-radius: 0.5em;	
}
a.mnav:hover {
	text-decoration: none;
	color: var(--vc1);
	border: 1px solid var(--red);
	background-color: var(--bc2);
}

a.mnav.pointernav {
	text-decoration: none;
	color: var(--vc2);
	border: 1px solid var(--vc2);
	background-color: transparent;
}
a.mnav.pointernav:hover {
	text-decoration: none;
	color: var(--vc2);
	border: 1px solid var(--orange);
	background-color: var(--bc2);
}

.tlogo {
	height: 128px;
}

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

.mnavline {

	color: var(--vc1);
	background: transparent;
}




.mainnav, .kontentfrm {
  padding:var(--ctttfrnp, 16px);                 /* Abstand, damit die Mitte nicht unter den Rand läuft */
  /* Ecken, Kanten, Mitte: je eine Datei */
  background-color: var(--bc1);
  background-image:
    url(../media/web/sprite.nav.nw.png),  /* 1: Ecke oben links   */
    url(../media/web/sprite.nav.ne.png),  /* 2: Ecke oben rechts  */
    url(../media/web/sprite.nav.sw.png),  /* 3: Ecke unten links  */
    url(../media/web/sprite.nav.se.png),  /* 4: Ecke unten rechts */
    url(../media/web/sprite.nav.n.png),   /* 5: Kante oben        */
    url(../media/web/sprite.nav.s.png),   /* 6: Kante unten       */
    url(../media/web/sprite.nav.w.png),   /* 7: Kante links       */
    url(../media/web/sprite.nav.e.png);   /* 8: Kante rechts      */
    

  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;

  /* Kachel-/Dickensteuerung:
     Ecken 16×16, Kanten tilebar – hier 16px dick */
  background-size:
    24px 24px,   /* nw  */
    24px 24px,   /* ne  */
    24px 24px,   /* sw  */
    24px 24px,   /* se  */
    auto 24px,   /* n   */
    auto 24px,   /* s   */
    24px auto,   /* w   */
    24px auto,   /* e   */
    auto;        /* c   */

  /* 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%;

}

.ddmain {
	background-image: url(../media/web/navbg0.png);
	background-color: var(--bc2);
	background-size:  cover;
	border: solid var(--vc2) 2px;
	padding: 8px;
	border-radius: 16px;
	line-height: 2em;
	font-size: 1.4em;
}


.herofrm {
  padding: 32px;                 /* Abstand, damit die Mitte nicht unter den Rand läuft */
  height: var(--heroheight);
  margin-top: 32px;
  margin-bottom: 32px;

  overflow: hidden;
  position: relative;

  /* Ecken, Kanten, Mitte: je eine Datei */
  background-color: transparent;
  background-image:
    url(../media/web/sprite.hero.nw.png),  /* 1: Ecke oben links   */
    url(../media/web/sprite.hero.ne.png),  /* 2: Ecke oben rechts  */
    url(../media/web/sprite.hero.sw.png),  /* 3: Ecke unten links  */
    url(../media/web/sprite.hero.se.png),  /* 4: Ecke unten rechts */
    url(../media/web/sprite.hero.n.png),   /* 5: Kante oben        */
    url(../media/web/sprite.hero.s.png),   /* 6: Kante unten       */
    url(../media/web/sprite.hero.w.png),   /* 7: Kante links       */
    url(../media/web/sprite.hero.e.png);   /* 8: Kante rechts      */
    

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

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

  /* Kachel-/Dickensteuerung:
     Ecken 16×16, Kanten tilebar – hier 16px dick */
  background-size:
    26px 32px,   /* nw  */
    26px 32px,   /* ne  */
    26px 34px,   /* sw  */
    26px 34px,   /* se  */
    auto 32px,   /* n   */
    auto 34px,   /* s   */
    26px auto,   /* w   */
    26px 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;
}

.herologo {
	position: absolute;
	left: 30%;
	top: 13%;
	width: 40%;
	height: auto;
	z-index:1000;
}

.herotent {
	position: absolute;
	left: 20%;
	bottom: 0;
	width: 60%;
	height: auto;
}

.heroplane {
	position: absolute;
	right: 1%;
	top: 3%;
	width: 30%;
	height: auto;
}

.herorex {
	position: absolute;
	right: 2%;
	bottom: 6px;
	width: 23%;
	height: auto;
}

.heroclown {
	position: absolute;
	left: 1%;
	bottom: 24px;
	width: 40%;
	height: auto;
}

.firstsec {
	margin-top: 100px;
}

.fullsec {
    width: 100vw;
    height: 100vh;
}

.topsec {
    width: 100vw;
    height: 50vh;
}

.botnavline {
	color: var(--vc1);
	background: var(--bc2);
}

.wtrns {
	background-color: var(--bc1t75);
	border-radius: 8px;
}

.dtrns {
	background-color: var(--bcdk75);
	border-radius: 8px;
}


.titfon {
	font-size: 128px;
	color: var(--vc1);
	text-shadow:  0.25vw  0.25vw 0px var(--bc1),
				 -0.25vw -0.25vw 0px var(--bc1),
				  0.25vw -0.25vw 0px var(--bc1),
				 -0.25vw  0.25vw 0px var(--bc1);
}

.titimg {
	height:128px;
}

.sfood {
	color: var(--vc1);
}
.sfood a {
	color: var(--vc1);
	font-size: 18px;
	line-height: 32px;
	margin: 12px;
}
.sfood a:hover {
	color: var(--vc1);
}
.sfood div.row div {
	min-height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 32px;
}
.sfood big {
	font-size: 40px;
}
.sfood ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0;
}
.sfood li a {
    padding: 8px;
    font-size: 24px;
    font-weight: 600;
}
.sfood li {
    padding: 8px;
    font-size: 24px;
    font-weight: 600;
}
.sfood li a:hover {
    text-decoration: none;
}

#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;
}

.card {
  border-radius: 16px;
}



.imgsqbox {
    width: 100%;
    background-image: url('../media/dummy.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}






/* Äußeres Grid */
.ronelli-frameset .frameset-wrapper {
    display: flex;
    gap: 16px;                 /* Abstand NUR zwischen t und rechter Spalte */
}

/* Linke Box fix auf volle Höhe */
.ronelli-frameset .frame-left {
    flex: 0 0 33.33%;          /* entspricht col-md-4 */
    display: flex;
}

.ronelli-frameset .frame-left .kontentfrm {
    flex: 1;
}

/* Rechte Spalte streckt sich automatisch */
.ronelli-frameset .frame-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;                 /* Abstand zwischen w und (b,g) */
}

/* einzelne Box */
.ronelli-frameset .frame-item {
    display: flex;
}

.ronelli-frameset .frame-item .kontentfrm {
    flex: 1;
}

/* Untere 2×1 Reihe */
.ronelli-frameset .frame-row {
    display: flex;
    gap: 16px;
}

/* beide halb */
.ronelli-frameset .frame-row .half {
    flex: 1;
}



@media only screen and (min-width: 1600px) {
	.tlogo {
		width: 56px;
		height: auto;
		margin: 0px;
	}
	.mlogo {
		width: 256px;
		height: auto;
		margin: 0px;
	}
	a.mnav {
		font-size: 20px;
		margin: 4px;
		padding: 4px 24px;	
	}
	#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;  
}
.herotit {
  font-size: 4em;
  text-shadow: 0 0 14px var(--bc1);
}
}

/*		Wide Mobile Layout: 1600px.   */

@media only screen and (min-width: 991px) and (max-width: 1599px) {
	.tlogo {
		min-width: 48px;
		width: 4vw;
		max-width: 56px;
		height: auto;
		margin: 0;
	}
	.mlogo {
		width: 256px;
		height: auto;
		margin: 0px;
	}
	a.mnav {
		font-size: 1.42vw;
		margin: 4px;
		padding: 4px 24px;	
	}
	#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;  
}

.herologo {
	position: absolute;
	left: 30%;
	top: 13%;
	width: 40vw;
	height: auto;
	z-index:1000;
}

.herotent {
	position: absolute;
	left: 20vw;
	bottom: 0;
	width: 60vw;
	height: auto;
}

.heroplane {
	position: absolute;
	right: 1%;
	top: 15%;
	width: 30%;
	height: auto;
}

.herorex {
	position: absolute;
	right: 2%;
	bottom: 6px;
	width: 25vw;
	height: auto;
}

.heroclown {
	position: absolute;
	left: 1%;
	bottom: 24px;
	width: 30vw;
	height: auto;
}



}

/*		Small Mobile Layout: 992px.   */

@media only screen and (max-width: 992px) {
	.tlogo {
		min-width: 24px;
		width: 16vw;
		max-width: 80px;
		height: auto;
		margin: 16px;
	}
	.mlogo {
		width: 256px;
		height: auto;
		margin: 0px;
	}
	a.mnav {
		font-size: 4vw;
		margin: 4px;
		padding: 4px 24px;
	}
	#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;  
}


.herologo {
	position: absolute;
	left: 30%;
	top: 13%;
	width: 40vw;
	height: auto;
	z-index:1000;
  margin-top: 8vh;
}

.herotent {
	position: absolute;
	left: 5vw;
	bottom: 0;
	width: 90vw;
	height: auto;
}

.heroplane {
	position: absolute;
	right: 1%;
	top: 15%;
	width: 40vw;
	height: auto;
}

.herorex {
	position: absolute;
	right: 2%;
	bottom: -6px;
	width: 35vw;
	height: auto;
  z-index: 998;
}

.heroclown {
	position: absolute;
	left: 1%;
	bottom: 2px;
	width: 45vw;
	height: auto;
  z-index: 999;
}

/* Frame-Wrapper wird vertikal */
    .ronelli-frameset .frameset-wrapper {
        flex-direction: column;
    }

    /* Linke Box volle Breite */
    .ronelli-frameset .frame-left {
        flex: 0 0 100%;
        width: 100%;
	}

    /* Rechte Spalte ebenfalls volle Breite */
    .ronelli-frameset .frame-right {
        flex: 0 0 100%;
        width: 100%;
    }

    /* b und g untereinander */
    .ronelli-frameset .frame-row {
        flex-direction: column !important;
        width: 100%;
        gap: 16px;   /* Gapping behalten */
    }

    /* Halb-boxen werden volle Breite */
    .ronelli-frameset .frame-row .half {
        flex: 0 0 100% !important;
        width: 100%;
    }

}





/*		Small Mobile Layout: 640px.   */

@media only screen and (max-width: 600px) {
	.tlogo {
		min-width: 24px;
		width: 16vw;
		max-width: 48px;
		height: auto;
		margin: 16px;
	}
	.mlogo {
		width: 256px;
		height: auto;
		margin: 0px;
	}
	a.mnav {
		font-size: 4vw;
		margin: 4px;
		padding: 4px 12px;	
	}
	#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;  
}


.herologo {
	position: absolute;
	left: 10vw;
	top: 0;
	width: 80vw;
	height: auto;
	z-index:1000;
  margin-top: 15vh;
}

.herotent {
	position: absolute;
	left: 5vw;
	bottom: 0;
	width: 90vw;
	height: auto;
  z-index: 701;
}

.heroplane {
	position: absolute;
	right: 1%;
	top: 20vh;
	width: 50vw;
	height: auto;
  z-index: 1001;
}

.herorex {
	position: absolute;
	right: -25vw;
	bottom: 6px;
	width: 55vw;
	height: auto;
  z-index: 998;
}

.heroclown {
	position: absolute;
	left: 1vw;
	bottom: 65px;
	width: 65vw;
	height: auto;
  z-index: 700;
}


.ronelli-frameset .frameset-wrapper {
        gap: 12px; /* etwas kleineres Gap */
    }

    .ronelli-frameset .frame-right {
        gap: 12px;
    }

    .ronelli-frameset .frame-row {
        gap: 12px;
    }

    .ronelli-frameset .frame-left,
    .ronelli-frameset .frame-item,
    .ronelli-frameset .frame-row .half {
        flex: 0 0 100%; /* Jede Box 100% */
    }

	.mainnav, .kontentfrm {
	padding:var(--ctttfrnp, 16px);                 /* Abstand, damit die Mitte nicht unter den Rand läuft */
	/* Ecken, Kanten, Mitte: je eine Datei */
	background-color: var(--bc1);
	background-image:
		url(../media/web/sprite.nav.n.png),   /* 5: Kante oben        */
		url(../media/web/sprite.nav.s.png);   /* 6: Kante unten       */
		

	background-position:
		top,
		bottom;

	background-repeat:
		repeat-x,
		repeat-x;

	/* Kachel-/Dickensteuerung:
		Ecken 16×16, Kanten tilebar – hier 16px dick */
	background-size:
		auto 24px,   /* n   */
		auto 24px;        /* c   */

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


		flex: 1 1 auto;
		height: 100%;

	}


}