/*
Dittmar Dacheindeckungen GmbH
creation Date: 2026-08-10
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ===========================================================================
   KOPFBEREICH / NAVIGATION

   Geometrie (Layoutvorgabe):
   - Leiste sitzt 30px unter der Fensterkante, gescrollt (.smaller) 10px
   - Leistenhoehe 88px -> Pillenradius 44px
   - Logohoehe 72px, vertikal in der Leiste zentriert
   - Breite = .main-container.wide, damit Logo und Menue mit dem Inhaltsraster
     fluchten

   Die Menuepunkte 1..n-1 bilden zusammen die weisse Pille, der letzte Punkt
   ("Kontakt") ist die abgesetzte rosé Pille.
   =========================================================================== */

#topmenu-wrapper,
#topmenu-wrapper *,
#topmenu-wrapper ul.mod-menu__sub li:before,
#top_kontaktzeile, #top_kontaktzeile *,
#top_textbox, #top_textbox *,
#header, #header *{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

#topmenu-wrapper{
	text-align: left;
	position: fixed;
	width: 100%;
	height: 88px;
	color: #002643;
	background-color: transparent;
	top: 30px;
	left: 0px;
	font-size: 20px;
}
#topmenu-wrapper.smaller{
	top: 10px;
}
#topmenu-wrapper > .main-container{
	height: 100%;
}


/* ===== LOGO =====
   Beide Logofassungen liegen uebereinander und werden per Deckkraft
   getauscht - so bleibt der Linktext (alt des weissen Logos) durchgehend im
   Accessibility-Baum. Die Umschaltung macht ddm_updateLogoColor() in
   functions.js anhand der Abschnittsklassen ._logo_white / ._logo_blue. */
#logo_wrap{
	position: absolute;
	height: 72px;
	width: 250px;
	left: 0px;
	top: 50%;
	margin-top: -36px;
	z-index: 0;
}
#logo_wrap > a{
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
}
.logo_img{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	height: 100%;
	width: auto;
	opacity: 0;
}
/* Voreinstellung ohne Zustandsklasse: weiss (Kopfbild) */
#topmenu-wrapper .logo_img._white,
#topmenu-wrapper.logo_white .logo_img._white{
	opacity: 1;
}
#topmenu-wrapper.logo_white .logo_img._blue{
	opacity: 0;
}
#topmenu-wrapper.logo_blue .logo_img._white{
	opacity: 0;
}
#topmenu-wrapper.logo_blue .logo_img._blue{
	opacity: 1;
}


/* ===== MENUELEISTE ===== */
#top-menu{
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
}

.navbar-toggler,
.icon-chevron-down{
	display: none;
}

/* nur im responsiven Menue sichtbar */
#resmenu_footer{
	display: none;
}

#topmenu-wrapper ul.mod-menu{
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	position: relative;
	z-index: 1;
	height: 100%;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#topmenu-wrapper ul.mod-menu > li{
	position: relative;
	display: block;
	width: auto;
	background-color: #ffffff;
	line-height: normal;
}
/* Aussenkanten der weissen Pille */
#topmenu-wrapper ul.mod-menu > li:first-child{
	border-top-left-radius: 44px;
	border-bottom-left-radius: 44px;
}
#topmenu-wrapper ul.mod-menu > li:nth-last-child(2){
	border-top-right-radius: 44px;
	border-bottom-right-radius: 44px;
}
#topmenu-wrapper ul.mod-menu > li:first-child > a,
#topmenu-wrapper ul.mod-menu > li:first-child > .nav-header,
#topmenu-wrapper ul.mod-menu > li:first-child > button.mod-menu__toggle-sub{
	padding-left: 48px;
}
#topmenu-wrapper ul.mod-menu > li:nth-last-child(2) > a,
#topmenu-wrapper ul.mod-menu > li:nth-last-child(2) > .nav-header,
#topmenu-wrapper ul.mod-menu > li:nth-last-child(2) > button.mod-menu__toggle-sub{
	padding-right: 48px;
}

/* Ein Menuepunkt mit Unterpunkten, der selbst kein Link ist, rendert Joomla
   als <button class="mod-menu__toggle-sub"> mit der Beschriftung in einem
   <span class="nav-header"> darin. Der Button ist also die Zeile und muss
   wie ein <a> gesetzt werden - sonst sitzt die Beschriftung auf der
   Grundlinie des Buttons und damit hoeher als die Nachbarpunkte. */
#topmenu-wrapper ul.mod-menu > li > a,
#topmenu-wrapper ul.mod-menu > li > .nav-header,
#topmenu-wrapper ul.mod-menu > li > button.mod-menu__toggle-sub{
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;
	margin: 0px;
	padding: 0px 38px;
	color: #002643;
	font-family: 'Avenir-Book', sans-serif;
	font-size: 20px;
	line-height: 26px;
	font-weight: normal;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	background: transparent;
	border: 0px none;
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
/* die Beschriftung im Button traegt keine eigenen Werte */
#topmenu-wrapper ul.mod-menu span.nav-header{
	display: block;
	margin: 0px;
	padding: 0px;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	background: transparent;
	border: none;
}
#topmenu-wrapper ul.mod-menu > li > a:hover,
#topmenu-wrapper ul.mod-menu > li:hover > .nav-header,
#topmenu-wrapper ul.mod-menu > li:hover > button.mod-menu__toggle-sub{
	color: #d97680;
}
/* aktiver Punkt: gleiche Farbe, nur staerkerer Schnitt */
#topmenu-wrapper ul.mod-menu > li.current > a,
#topmenu-wrapper ul.mod-menu > li.active > a,
#topmenu-wrapper ul.mod-menu > li.current > .nav-header,
#topmenu-wrapper ul.mod-menu > li.active > .nav-header,
#topmenu-wrapper ul.mod-menu > li.current > button.mod-menu__toggle-sub,
#topmenu-wrapper ul.mod-menu > li.active > button.mod-menu__toggle-sub{
	background-color: transparent;
	color: #002643;
	font-family: 'Avenir-Medium', sans-serif;
}
#topmenu-wrapper ul.mod-menu > li.current > a:hover,
#topmenu-wrapper ul.mod-menu > li.active > a:hover,
#topmenu-wrapper ul.mod-menu > li.current:hover > button.mod-menu__toggle-sub,
#topmenu-wrapper ul.mod-menu > li.active:hover > button.mod-menu__toggle-sub{
	color: #d97680;
}

/* ===== KONTAKT-PILLE (letzter Menuepunkt) ===== */
#topmenu-wrapper ul.mod-menu > li:last-child{
	margin-left: 8px;
	border-radius: 44px;
	background-color: #d97680;
}
#topmenu-wrapper ul.mod-menu > li:last-child > a,
#topmenu-wrapper ul.mod-menu > li:last-child > .nav-header,
#topmenu-wrapper ul.mod-menu > li:last-child > button.mod-menu__toggle-sub,
#topmenu-wrapper ul.mod-menu > li:last-child.current > a,
#topmenu-wrapper ul.mod-menu > li:last-child.active > a{
	padding: 0px 60px;
	color: #ffffff;
}
#topmenu-wrapper ul.mod-menu > li:last-child:hover{
	background-color: #002643;
}
#topmenu-wrapper ul.mod-menu > li:last-child > a:hover{
	color: #ffffff;
}

#topmenu-wrapper li a:hover,
#topmenu-wrapper li a.current,
#topmenu-wrapper li.active .nav-header{
	text-decoration: none;
}


/* ===== UNTERMENUE =====
   Weisse Karte unter dem jeweiligen Punkt. Der transparente obere Rand
   ueberbrueckt den optischen Abstand zur Leiste, damit der Zeiger beim
   Wechsel nicht aus dem Hover-Bereich faellt (background-clip haelt die
   weisse Flaeche innerhalb des Rands). */
#topmenu-wrapper ul.mod-menu__sub{
	position: absolute;
	z-index: 2;
	top: 100%;
	left: 20px;
	width: 300px;
	margin: 0px;
	padding: 14px 0px;
	border: 0px none;
	border-top: 10px solid transparent;
	border-radius: 22px;
	background-color: #ffffff;
	background-clip: padding-box;
	-webkit-box-shadow: 0px 14px 34px rgba(0, 38, 67, 0.18);
	-moz-box-shadow: 0px 14px 34px rgba(0, 38, 67, 0.18);
	box-shadow: 0px 14px 34px rgba(0, 38, 67, 0.18);
	text-align: left;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* nur Hover - die Klasse "opened" setzt top_menu.js auch auf den aktiven Ast,
   im Desktopmenue soll dessen Karte aber nicht dauerhaft offen stehen */
#topmenu-wrapper ul.mod-menu > li.parent:hover > ul.mod-menu__sub,
#topmenu-wrapper ul.mod-menu__sub li.parent:hover > ul.mod-menu__sub{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#topmenu-wrapper ul.mod-menu__sub li{
	display: block;
	position: relative;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	line-height: normal;
	text-align: left;
}
#topmenu-wrapper ul.mod-menu__sub li a,
#topmenu-wrapper ul.mod-menu__sub li .nav-header,
#topmenu-wrapper ul.mod-menu__sub li > button.mod-menu__toggle-sub{
	display: block;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 9px 30px;
	color: #002643;
	font-family: 'Avenir-Book', sans-serif;
	font-size: 17px;
	line-height: 22px;
	font-weight: normal;
	text-align: left;
	text-transform: none;
	white-space: normal;
	background: transparent;
	border: 0px none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
#topmenu-wrapper ul.mod-menu__sub li > button.mod-menu__toggle-sub{
	box-sizing: border-box;
}
#topmenu-wrapper ul.mod-menu__sub li a:hover,
#topmenu-wrapper ul.mod-menu__sub li a.current,
#topmenu-wrapper ul.mod-menu__sub li.current > a,
#topmenu-wrapper ul.mod-menu__sub li.active > a{
	color: #d97680;
	background-color: transparent;
	border: none;
}
/* dritte Ebene klappt seitlich auf */
#topmenu-wrapper ul.mod-menu__sub li.parent > ul.mod-menu__sub{
	top: -14px;
	left: 100%;
	margin-left: 6px;
	border-top: 0px none;
}
/* die Kopie des Elternlinks (top_menu.js) gehoert nur ins responsive Menue */
#topmenu-wrapper li.resp_only,
#topmenu-wrapper li.parent-link-copy{
	display: none;
}


/* ===== BURGER ===== */
#menu-activator{
	position: fixed;
	height: auto;
	width: 40px;
	cursor: pointer;
	top: 62px;
	right: -100%;
	z-index: 3;
}
#topmenu-wrapper.smaller #menu-activator{
	top: 42px;
}
#menu-activator > div{
	width: 100%;
	height: 4px;
	margin-bottom: 6px;
	margin-left: auto;
	margin-right: 0px;
}
#menu-activator > div:nth-child(2){
	width: 70%;
}
#menu-activator > div:nth-child(3){
	width: 90%;
}
#menu-activator:hover > div{
	width: 100%;
}
/* auf dunklem Grund laeuft der Burger wie das Logo auf weiss um */
#topmenu-wrapper.logo_white #menu-activator > div{
	background-color: #ffffff;
}


/* ===== SPRACHUMSCHALTER ===== */
.mod-languages{
	position: relative;
}
.mod-languages ul{
	margin: 0px;
}
.mod-languages ul li{
	display: inline-block !important;
	font-size: 16px;
	margin: 0px;
	margin-left: 10px;
}
.mod-languages button{
	display: none;
}
div.mod-languages .dropdown-menu{
	padding: 0px;
}
.mod-languages ul li > a{
	padding: 0px;
}
div.mod-languages ul.lang-block li{
	background-color: transparent;
	margin: 0px;
}
div.mod-languages ul li.lang-active{
	background-color: transparent !important;
}
div.mod-languages ul.lang-block li a{
	padding-left: 10px;
	padding-right: 10px;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mod-languages .visually-hidden{
	display: none;
}


/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1750px){
	#top-menu{
		right: 0px;
	}
	.mod-languages,
	#topmenu-wrapper.smaller .mod-languages{
		top: 0px;
		right: 15px;
	}
}

@media (max-width: 1460px){
	/* ===== BURGER =====
	   #menu-activator ist position:fixed und kann die Mitte der Leiste nicht
	   erben - die Werte zentrieren ihn auf derselben Achse wie das Logo:
	   geschlossen          Leiste 30 - 118 -> Mitte 74, Balken 24 hoch -> top 62
	   geschlossen .smaller Leiste 10 -  98 -> Mitte 54                 -> top 42
	   geoeffnet            Leiste  0 -  88 -> Mitte 44                 -> top 32 */
	#menu-activator{
		right: 5%;
		top: 62px;
	}
	#topmenu-wrapper.smaller #menu-activator{
		top: 42px;
	}
	#menu-activator > div:last-child{
		margin-bottom: 0px;
	}
	#logo_wrap{
		left: 0px;
	}

	/* ===== LEISTE BEI GEOEFFNETEM MENUE =====
	   Die Leiste dockt an die Fensterkante und bekommt den blauen Grund des
	   Panels. */
	#topmenu-wrapper.res_act,
	#topmenu-wrapper.res_act.smaller{
		top: 0px;
		height: 88px;
		background-color: #002643;
	}
	#topmenu-wrapper.res_act #menu-activator,
	#topmenu-wrapper.res_act.smaller #menu-activator{
		top: 32px;
	}
	#topmenu-wrapper.res_act #menu-activator > div,
	#topmenu-wrapper.res_act #menu-activator > div:nth-child(2),
	#topmenu-wrapper.res_act #menu-activator > div:nth-child(3),
	#topmenu-wrapper.res_act #menu-activator:hover > div{
		width: 100%;
		height: 4px;
		margin-bottom: 3px;
		background-color: #ffffff;
	}
	/* auf dem blauen Panel immer das weisse Logo */
	#topmenu-wrapper.res_act .logo_img._white{
		opacity: 1;
	}
	#topmenu-wrapper.res_act .logo_img._blue{
		opacity: 0;
	}

	#topmenu-wrapper:not(.res_act) ul.mod-menu{
		height: 0px;
		overflow: hidden;
	}

	/* ===== MENUEPANEL ===== */
	#topmenu-wrapper.res_act #top-menu,
	#topmenu-wrapper.res_act.smaller #top-menu{
		position: fixed;
		width: 100%;
		height: calc(100% - 88px);
		left: 0px;
		top: 88px;
		padding-top: 0px;
		background-color: #002643;
		transform: none;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#top-menu{
		overflow: hidden;
	}
	/* 4px Seitenluft fuer die gesamte Liste - dort enden auch die Trennlinien */
	#topmenu-wrapper.res_act ul.mod-menu{
		display: block;
		height: auto;
		margin: 0px 4px;
		padding: 0px;
		text-align: left;
		background-color: transparent;
		border-top: 1px solid #d97680;
		overflow: visible;
	}

	/* Die Pillenform der Desktopleiste faellt weg - die Regeln fuer den
	   ersten/letzten Punkt sind spezifischer als der Grundzustand darunter
	   und muessen deshalb einzeln zurueckgesetzt werden. */
	#topmenu-wrapper ul.mod-menu > li:first-child,
	#topmenu-wrapper ul.mod-menu > li:nth-last-child(2),
	#topmenu-wrapper ul.mod-menu > li:last-child{
		margin-left: 0px;
		border-radius: 0px;
		background-color: transparent;
	}
	#topmenu-wrapper ul.mod-menu > li:last-child:hover{
		background-color: transparent;
	}

	/* ----- Grundzustand fuer Listenpunkte aller Ebenen ----- */
	#topmenu-wrapper ul.mod-menu li,
	#topmenu-wrapper.res_act ul.mod-menu > li,
	#topmenu-wrapper ul.mod-menu li .nav-header{
		display: block;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 0px;
		margin: 0px;
		text-align: left;
		background-color: transparent;
		line-height: normal;
		border: none;
		border-radius: 0px;
		overflow: visible;
	}

	/* ----- die anklickbare Zeile (Link, Ueberschrift oder Umschalter) -----
	   Joomla rendert eine Ueberschrift mit Unterpunkten als
	   <button class="mod-menu__toggle-sub">; der Button ist damit eine eigene
	   Zeile und muss wie eine solche gesetzt (und zurueckgesetzt) werden. */
	#topmenu-wrapper.res_act ul.mod-menu li a,
	#topmenu-wrapper.res_act ul.mod-menu li .nav-header,
	#topmenu-wrapper.res_act ul.mod-menu li > button.mod-menu__toggle-sub{
		display: block;
		float: none;
		width: 100%;
		box-sizing: border-box;
		height: auto;
		margin: 0px;
		padding: 14px 55px 15px 11px;
		line-height: 22px;
		text-align: left;
		color: #ffffff;
		font-family: 'Avenir-Book', sans-serif;
		text-transform: none;
		letter-spacing: 0px;
		font-size: 18px !important;
		background: transparent;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
		border: 0px none;
		border-bottom: 1px solid #d97680;
	}
	/* Beschriftung im Umschalter - der Button ist bereits die Zeile */
	#topmenu-wrapper.res_act ul.mod-menu li > button.mod-menu__toggle-sub .nav-header{
		display: block;
		width: auto;
		padding: 0px;
		border: none;
		background: transparent;
		color: inherit;
		font-family: inherit !important;
		font-size: inherit !important;
		font-style: inherit;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		text-align: inherit;
	}

	/* Ein Elternpunkt, der selbst ein Link ist, rendert <a> UND einen
	   Umschalter; die ganze Zeile schaltet ueber top_menu.js, deshalb faellt
	   die zusaetzliche Buttonzeile weg. Ueberschriften ohne Link behalten
	   ihren Button - er ist ihre einzige Zeile. */
	#topmenu-wrapper.res_act ul.mod-menu li:has(> a) > button.mod-menu__toggle-sub{
		display: none;
	}

	/* ===== EBENE 1 ===== */
	#topmenu-wrapper.res_act ul.mod-menu > li > a,
	#topmenu-wrapper.res_act ul.mod-menu > li > .nav-header,
	#topmenu-wrapper.res_act ul.mod-menu > li > button.mod-menu__toggle-sub{
		font-family: 'Avenir-Medium', sans-serif;
		padding-left: 11px;
	}

	/* ===== EBENE 2 (und der Rahmen der Unterliste) ===== */
	#topmenu-wrapper.res_act ul.mod-menu__sub{
		position: relative;
		height: auto;
		transform: none;
		top: 0px;
		left: 0px;
		width: auto !important;
		margin: 0px 0px 0px 24px;
		padding: 0px;
		border: 0px none;
		border-radius: 0px;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		text-align: left;
	}
	#topmenu-wrapper.res_act ul.mod-menu__sub li{
		display: block;
		background-color: transparent;
		border: none;
		text-align: left;
		line-height: normal;
		margin: 0px;
	}
	#topmenu-wrapper.res_act ul.mod-menu > li > ul.mod-menu__sub > li > a,
	#topmenu-wrapper.res_act ul.mod-menu > li > ul.mod-menu__sub > li > .nav-header,
	#topmenu-wrapper.res_act ul.mod-menu > li > ul.mod-menu__sub > li > button.mod-menu__toggle-sub{
		font-family: 'Avenir-Book', sans-serif;
		font-weight: normal;
		padding-left: 5px;
	}

	/* ===== EBENE 3 ===== */
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub{
		background-color: transparent;
		margin-left: 22px;
	}
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub li{
		margin-left: 0px;
		margin-right: 0px;
	}
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub > li > a,
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub > li > .nav-header,
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub > li > button.mod-menu__toggle-sub{
		font-family: 'Avenir-Light', sans-serif;
		font-style: italic;
		padding-left: 5px;
	}
	#topmenu-wrapper.res_act ul.mod-menu__sub ul.mod-menu__sub ul.mod-menu__sub{
		margin-left: 22px;
	}

	/* die per JS erzeugte Kopie des Elternlinks gehoert ins responsive Menue */
	#topmenu-wrapper.res_act li.resp_only,
	#topmenu-wrapper.res_act li.parent-link-copy{
		display: block;
	}

	/* ===== AKTIVER PUNKT ===== */
	#topmenu-wrapper.res_act ul.mod-menu a.current,
	#topmenu-wrapper.res_act ul.mod-menu li.current > a,
	#topmenu-wrapper.res_act ul.mod-menu li.active > a{
		background-color: transparent;
		color: #d97680 !important;
	}
	/* Elternzeilen bleiben weiss, nur weil ein Kind aktiv ist */
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent.active > a,
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent.current > a{
		background-color: transparent;
		color: #ffffff !important;
	}

	/* ===== AUF-/ZUKLAPP-PFEIL =====
	   Als CSS-Winkel gezeichnet, damit keine zusaetzliche Grafik noetig ist. */
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent:after{
		content: "";
		position: absolute;
		cursor: pointer;
		right: 22px;
		top: 21px;
		width: 10px;
		height: 10px;
		border: 0px none;
		border-right: 2px solid #d97680;
		border-bottom: 2px solid #d97680;
		background: none;
		margin: 0px;
		left: auto;
		line-height: normal;
		color: transparent;
		z-index: 4;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent.opened:after{
		top: 17px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	/* ===== UNTERMENUE EIN-/AUSBLENDEN ===== */
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent ul.mod-menu__sub{
		display: none;
	}
	#topmenu-wrapper.res_act ul.mod-menu li.deeper.parent.opened > ul.mod-menu__sub{
		display: block;
		opacity: 1;
		height: auto;
	}

	/* ===== FUSS DES MENUEPANELS ===== */
	#topmenu-wrapper.res_act #resmenu_footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 23px 21px 45px 12px;
		background-color: #002643;
	}
	#resmenu_footer .resmenu_social{
		margin-top: 0px;
		line-height: 0px;
		flex: 0 0 auto;
	}
	#resmenu_footer .resmenu_social a{
		display: inline-block;
		margin-right: 0px;
		margin-left: 12px;
		padding: 0px;
	}
	#resmenu_footer .resmenu_social a img{
		height: 38px;
		width: 38px;
		display: block;
	}
}

@media (max-width: 1000px){
	#topmenu-wrapper{
		height: 72px;
	}
	#logo_wrap{
		height: 56px;
		margin-top: -28px;
	}
	/* Leiste 30 - 102 -> Mitte 66, Balken 24 hoch -> top 54 */
	#menu-activator{
		top: 54px;
	}
	#topmenu-wrapper.smaller #menu-activator{
		top: 34px;
	}
	#topmenu-wrapper.res_act,
	#topmenu-wrapper.res_act.smaller{
		height: 72px;
	}
	#topmenu-wrapper.res_act #menu-activator,
	#topmenu-wrapper.res_act.smaller #menu-activator{
		top: 24px;
	}
	#topmenu-wrapper.res_act #top-menu,
	#topmenu-wrapper.res_act.smaller #top-menu{
		top: 72px;
		height: calc(100% - 72px);
	}
}

@media (max-width: 800px){
	#menu-activator{
		width: 34px;
	}
}