/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

@CHARSET "ISO-8859-1";

/* roboto-100 - latin */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src: local(''),
		 url('../fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/roboto-v30-latin-100.woff') format('woff'), /* Modern Browsers */
  }
  
  /* roboto-300 - latin */
  @font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src: local(''),
		 url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
  }
  
  /* roboto-regular - latin */
  @font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
  }
  
  /* roboto-500 - latin */
  @font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		 url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
  }


/* FARBEN **************** */

:root {
    --dklred: #ab4969; 
    --dklviolett: #864f6e;
    --hellviolett: #d16a95; 
    --bgblue: #f0f5f8; 
  }

 .bgcolor-hell { background-color: var(--bgblue);}

 /* SCHRIFT ************** */
 html, body { font-family: Roboto, sans-serif; }
 h1 { font-family: Roboto; font-size: 2.2rem; line-height: 2.9rem; font-weight: normal; color: var(--dklred); }
 h2 { font-family: Roboto; font-size: 1.6rem; line-height: 2rem; font-weight: normal; color: var(--dklred); margin-top: 0;}
 h2::before { background: none; }
 h3 { font-family: Roboto; font-size: 1.4rem; line-height: 1.5rem; font-weight: 400; color: var(--dklred); }
 p { line-height: 1.4;}
 span.intro2 { font-size: 1.8rem; line-height: 2.2rem; color: var(--dklred); }
 strong { color: var(--dklred); }
 ul { margin-left: -1.4rem; }
 li { line-height: 1.3rem; }
 hr { margin-top: 2rem; margin-bottom: 0; border-top: 2px dotted var(--dklred); }

 @media (max-width: 960px) {
	h1 { font-size: 1.5rem; line-height: 1.9rem; }
	span.intro2 { font-size: 1.2rem; line-height: 1.6rem; color: var(--dklred); }
 }


.dropmenu a { padding: 0.5rem 0.6rem; }
a { color: var(--dklred); text-decoration: none; font-weight: 500;}
a.lnkButton { background-color: var(--dklred); color: white; padding: 0.5rem 1rem; border-radius: 10px; margin-top: 1rem; }
p a.lnkButton { margin-top: 1rem; }
.login-status a, .login-status strong { color: white; }

#footer a { font-size: 0.9rem; color: white; font-weight: 500; padding: 0 0.9rem; }
#footer p { color: white; }

p:has(a.lnkButton)  { margin-top: 2rem; }
 
 /* LOGO und NAVIGATION DESKTOP  ******** */

 .navbar-brand img, .navbar-brand svg { height: 15vH; width: auto; display: block; }
 #header .navbar { align-items: end; }
 .dropmenu a.active, .dropmenu a.hover, .dropmenu a.focus  { background: none; color: white; }
 .dropmenu a { color: white; }
 .dropmenu > ul, .dropmenu ul.navigation { align-items: end; padding-bottom: 1rem; }

ul .tree { background-color: var(--dklviolett); }
.overlay { padding: 5rem 0rem 2rem; }
.overlay .overlay-menu li { background-color: var(--dklviolett); padding-left: 0.5rem; }
.overlay .overlay-menu a { font-family: Roboto, sans-serif; color: white; }


#header { background-color: var(--dklviolett); border: 0; }
/* #header { background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(134,79,110,1) 55%, rgba(134,79,110,1) 100%); border: 0; } */
#header .container { background-color: var(--dklviolett); padding-left: 0; }


 /* HERO ******** */

 .hero-large { height: 80vh; }
 .hero-medium { height: 65vh; }
 .hero-small { height: 35vh; }

 @media (max-width: 960px) {
	.hero-medium { height: 35vh; }
 }

 .hero[style*="background-image"] .image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100% );
  z-index: -1;
 }

 .hero { background-position: center left; align-content: end; padding-block: clamp(2rem, 12vw, 4rem); }
 .heroButton { max-width: 1200px; width: 100%; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); text-align: right; }
 .heroButton .lnkButton { display: inline-block; }
 .lnkButton:hover { background-color: black; color: white; }

 @media (max-width: 960px) {
	a.lnkButton { font-size: 1rem; margin-top: 0.3rem; }
	.hero { padding-block: clamp(2rem, 12vw, 1rem); }
 }

/* MODULES ******************* */
.modular-text, .modular-features { padding-top: 2rem; padding-bottom: 2rem; margin: 0; }
.modular-intro { height: 20vH; padding-top: 1.5rem; padding-bottom: 0; }
.modular-intro h1 { text-align: center; margin-bottom: 0; margin-top: 0; } 
.modular-col { padding-top: 2rem; padding-bottom: 1rem; line-height: 1.2rem; } 
.modular-col .columns { align-items: start; }
.modular-text .columns { align-items: start; }
.modular-text img { width: 80%; }
.modular-news { padding-bottom: 0; }
.frame-box { margin-inline-start: 0 !important; }
.modular-nummern { background-color: var(--bgblue); }
.notfall-titel, .notfall-nummer, .notfall-beschreibung { display: block; height: 3rem; }
.notfall-nummer p { font-size: 1.6rem; padding-top: 0.4rem; }

#aktuelles { scroll-margin-top: 150px; }
.imgBGR { border: 0; box-shadow: none !important; width: 180px !important; height: auto !important; }

/* SPALTEN ******************* */
#footer { background-color: var(--dklviolett);}


/* TEAM ******************* */
.mitarbeiter-foto { width: 120px; height: 120px; float: left; margin-right: 1rem; background-size: contain !important; }
.mitarbeiter-text { font-size: 1rem; }
.modular-team .columns {  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); hyphens: none;  }
.team-column { background: none !important; border: 0 !important; box-shadow: none !important;  }


@media (max-width: 960px) {
	.modular-features .column { padding: 0; }
	.modular-nummern .column { padding: 1rem; }
	.modular-team .columns {  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  }
	.mitarbeiter-text p { font-size: 0.9rem; margin-bottom: 0.3rem; }
	.mitarbeiter-foto { width: 100px; height: 100px; }
}


/* FOTO ******************* */
.modular-fotos .columns {  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))  }
.modular-fotos .column { padding: 0;}
.column .foto-column { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.foto-content img { border-radius: 10px; }