/* Variablen: Farben und Maße */
:root {
  --hg-pri: #ffe100;
  --text-pri: #000;
  --hg-sek: #e71672;
  --text-sek: #fff;
  --hellgrau: #f5f5f5;
  --mittelgrau: #767676;
  --linienfarbe: #ddd;
  --linkfarbe: #ff0078;
  --focusfarbe: #529cfb;
  
  --inhaltbreite: 680px;
  --kachelmargin: 30px;
  --infomargin: 16px;
  --titelfontsize: 36px;
  --titellineheight: 39px;
  --infofontsize: 18px;
  --piktobreite: 30px;
  --faktor: 1.1;
}

@media (min-width:700px) {
	:root {
		--faktor: 0.95;
		--inhaltbreite: 575px;
	}
}
@media (min-width:960px) {
	:root {
		--faktor: 0.9;
		--inhaltbreite: 860px;
	}
}
@media (min-width:1200px) {
	:root {
		--faktor: 1.15;
		--inhaltbreite: 1100px;
	}
}

/* Schriften */
.font-black, .k-titel, h1 {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
.font-regular {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.font-semibold{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.font-medium, a  {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Standard */
body {
  font-size: 14pt;
  line-height: 1.3;
  color: var(--text-pri);
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	padding: 0;
	margin: 0;
}
p {
  margin: 0	0	0.5em 0;
}

h1 {
	text-transform: uppercase;
	margin: 0.25em 0;
}
a {
	color: var(--linkfarbe);
}

/* Layout */
.pagecontainer {
	
}
.header-container {
	position: relative;
	margin-bottom: 100px;
}
.header-container header {
	background-color: rgba(255,255,255,0.95);
	position: fixed;
	z-index: 499;
	top: 0;
	width: 100%;
	min-height: 50px;
	-webkit-box-shadow: 0 2px 14px rgba(100,100,100,0.1),0 2px 2px rgba(100,100,100,0.1);
	box-shadow: 0 2px 14px rgba(100,100,100,0.1),0 2px 2px rgba(100,100,100,0.1);
}
.footer-container footer {
	width: 100%;
	min-height: 50px;
	-webkit-box-shadow: 0 -2px 14px rgba(100,100,100,0.1),0 -2px 2px rgba(100,100,100,0.1);
	box-shadow: 0 -2px 14px rgba(100,100,100,0.1),0 -2px 2px rgba(100,100,100,0.1);
	margin-top: 125px;
	padding: 12px 0;
}
@media (max-width:699px) {
	.inhalt-container {
		margin: 0 2vw;
	}
}
@media (min-width:700px) {
	.inhalt-container {
		width: var(--inhaltbreite);
		margin: 0 auto;
	}
}

/* Menü */
.menu-container {
	text-align: center;
	padding: 12px 0;
}
.mobilemenu {
	display: none;
	font-family: "FontAwesome";
	width: 100%;
	height: 50px;
}
.mobilemenu::after {
	content: "\f0c9";
	position: absolute;
	top: 0;
	right: 20px;
	text-align: right;
	line-height: 52px;
	width: 50px;
	height: 50px;
}
.menu {
	position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}
.mainmenu > li::after {
	content: '|';
	color: var(--mittelgrau);
}
.mainmenu > li:last-child::after {
	content: none;
}
.menuitem {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.menuitem img {
	height: 20px;
	position: absolute;
	right: 12px;
	top: 5px;
}
.menu ul .menuitem {
	display: block;
}
.menuitem ul {
	display: none;
	background-color: var(--hellgrau);
	box-shadow: 0 2px 14px rgba(100,100,100,0.4),0 2px 2px rgba(100,100,100,0.4);
	position: absolute;
	padding: 0;
	margin: 0;
	text-align: left;
}
.mainmenu > li:hover ul {
	display: block;
}
.mainmenu > li.submenu > a {
	pointer-events: none;
}
.menu a {
	text-transform: uppercase;
	font-size: 0.9em;
	text-decoration: none;
	color: var(--mittelgrau);
	letter-spacing: 0.01em;
	position: relative;
	padding: 5px 12px 5px 12px;
}
.mainmenu > li:hover > a {
	color: var(--text-pri);
}
.menu .menuitem ul li a {
	padding: 8px 20px 8px 20px;
	display: block;	
}
.menu .menuitem ul li a:hover {
	background-color: var(--mittelgrau);
	color: var(--text-sek);
}
.menu li.submenu > a::after {
	content: "\f107";
	font-family: 'FontAwesome';
	position: absolute;
	top: 6px;
	right: 2px;
	font-weight: 400;
	line-height: 20px;
	font-size: 10px;
}
.mainmenu.open, .menuitem.submenu.open ul {
	display: block;
}

.footermenu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}
.footermenu li {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.footermenu a {
	font-size: 0.75em;
	text-decoration: none;
	color: var(--mittelgrau);
	padding: 5px 12px 5px 12px;
}
.footermenu a:hover {
	color: var(--text-pri);
}
@media (max-width:699px) { /* Mobil-Menü */
	.header-container {
		margin-bottom: 50px;
	}
	.header-container header {
		position: relative;
	}
	.menu-container {
		padding: 0;
	}
	.mobilemenu {
		display: block;
	}
	.menu {
		padding: 0;
		text-align: left;
		background: #e3d1d8;
		border: 1px solid #eaeaea;
	}
	.mainmenu {
		display: none;
	}
	.menuitem {
		position: relative;
	}
	.menuitem ul {
		position: relative;
	}
	.mainmenu > li:hover ul {
		display: none;
	}
	.mainmenu > li::after {
		content: '';
	}
	.menu a {
		display: block;
		border-bottom: 1px solid #eaeaea;
		text-transform: none;
		margin: 0;
		padding: 15px 30px;
	}
	.menu li.submenu > a::after {
		content: "\f067";
		border-left: 1px solid #eaeaea;
		top: 0;
		right: 0;
		text-align: center;
		font-size: 12px;
		font-weight: 400;
		line-height: 52px;
		width: 50px;
		height: 50px;
	}
	.menuitem ul {
		box-shadow: none;
	}
	.menu ul, .menu li {
		width: 100%;
	}
}

/* Kacheln */
.kacheln {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	column-gap: 1.1rem;
  -webkit-column-gap: 1.1rem; /* für alte Webkit-Browser */
  grid-column-gap: 1.1rem; /* alte Bezeeichnung */
  row-gap: 1.1rem;
  hyphens: manual;
}
@media (min-width:700px) {
	.kacheln {
		grid-template-columns: repeat(2,1fr);
	}
}
@media (min-width:960px) {
	.kacheln {
		grid-template-columns: repeat(3,1fr);
	}
}

.kachel {
	width: 100%;
	/*aspect-ratio: 1 / 1; /* Seitenverhältnis beibehalten */
	height: 0;
  padding-bottom: 100%; /* Höhe = 100% der Breite für 1:1 */
  position: relative;
  background-color: var(--hg-pri);
  border-radius: 15px;
  overflow: hidden;
}
.dienstleister .kachel {
	padding-bottom: 50%; /* Höhe = 50% der Breite für 1:2 */
}
.k-titel {
	position: absolute;
	left: calc(3.7*3vw);
	right: calc(3.7*3vw);
	top: calc(3.7*3vw);
	text-transform: uppercase;
	font-size: calc(3.8*3vw);
	line-height: calc(4.1*3vw);
}
.dienstleister .k-titel { 
	font-size: calc(2*3vw);
	line-height: calc(2.3*3vw);
	text-transform: none;
}
.k-info {
	position: absolute;
	left: calc(3.7*3vw);
	bottom: calc(1.6*3vw);
	font-size: calc(1.75*3vw);
	visibility: hidden;
}
.k-pikto-int, .k-pikto-ext {
	position: absolute;
	right: calc(1.6*3vw);
	bottom: calc(1.6*3vw);
}

@media (min-width:700px) {
	.k-titel {
		position: absolute;
		left: calc(var(--kachelmargin)*var(--faktor));
		right: calc(var(--kachelmargin)*var(--faktor));
		top: calc(var(--kachelmargin)*var(--faktor));
		text-transform: uppercase;
		font-size: calc(var(--titelfontsize)*var(--faktor));
		line-height: calc(var(--titellineheight)*var(--faktor));
	}
	.dienstleister .k-titel { 
		font-size: calc(var(--titelfontsize)*0.6*var(--faktor));
		line-height: calc(var(--titellineheight)*0.6*var(--faktor));
	}
	.k-info {
		position: absolute;
		left: calc(var(--kachelmargin)*var(--faktor));
		bottom: calc(var(--infomargin)*var(--faktor));
		font-size: calc(var(--infofontsize)*var(--faktor));
		visibility: hidden;
	}
	.k-pikto-int, .k-pikto-ext {
		position: absolute;
		right: calc(var(--infomargin)*var(--faktor));
		bottom: calc(var(--infomargin)*var(--faktor));
	}
}

.kacheln a {
	color: var(--text-pri)
}
.kacheln a:hover {
	color: var(--text-sek)
}
.kacheln a:hover .kachel {
	background-color: var(--hg-sek);
}
.kacheln a:hover .k-info {
	visibility: visible;
}
.k-pikto-int::before {
	content: url("../img/pikto_int_s.svg");
}
.k-pikto-ext::before {
	content: url("../img/pikto_ext_s.svg");
}
.kacheln a:hover .k-pikto-int::before {
	content: url("../img/pikto_int_w.svg");
}
.kacheln a:hover .k-pikto-ext::before {
	content: url("../img/pikto_ext_w.svg");
}
.k-pikto-int::before, .k-pikto-ext::before {
	display: block;
	width: calc(var(--piktobreite)*var(--faktor));
	height: auto;
}

/* sonstiges */
.textbox {
	text-align: center;
	padding: 0 3.5vw 1.5rem 5vw;
}
.textbox.impressum p {
	text-align: left;
}