/* Typo */
@font-face {font-family: 'Fira Sans'; src: url('../fonts/FiraSans-Light.woff2') format('woff2'), url('../fonts/FiraSans-Light.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face {font-family: 'Fira Sans'; src: url('../fonts/FiraSans-Regular.woff2') format('woff2'), url('../fonts/FiraSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face {font-family: 'Fira Sans'; src: url('../fonts/FiraSans-600.woff2') format('woff2'), url('../fonts/FiraSans-600.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face {font-family: 'Bahagia'; src: url('../fonts/Bahagia.woff2') format('woff2'), url('../fonts/Bahagia.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

/* Basic Settings */
::-webkit-input-selection, ::-moz-selection, :-ms-input-selection, :-moz-selection, ::selection { background: rgb(210, 31, 112); color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: none !important; }
html { overflow-y: scroll; font-size: 16px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgb(210, 31, 112); }
body { position: relative; height: 100%; -ms-word-wrap: break-word; word-wrap: break-word; }
html, body { margin: 0; padding: 0; width: 100%; }
img { max-width: 100%; height: auto; }
img.text-logo { display: inline-block; width: 85px; }
h2 img.text-logo { width: 200px; padding-left: 10px; }
a { transition: all 0.3s ease; }
@media screen and (prefers-reduced-motion: reduce) { a { transition: none; } }
section { padding: 60px 0; }


/* -------------------------------------- */    
/* rectangle  list style                  */     

/* list */
ol 
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}

/* item  */
ol > li { position: relative; list-style: none; }
ol > li p { padding: 1.5rem 0rem 1.5rem 2rem; margin: 0 0 0 4rem; }

/* number  */
ol > li p:before
{
content: counter(li);
counter-increment: li;
position: absolute;	
left: 0;
top: 2rem;
margin-top: 0;
background-color: rgb(210, 31, 112);
color: rgb(255, 255, 255);
height: 4rem;
width: 4rem;
line-height: 4rem;
text-align: center;
font-weight: bold;
font-size: 3rem;
}
@media(min-width: 992px) {
  ol > li p:before { top: 50%; transform: translateY(-50%); }
}



/* Header */
header { height: 120px; }
header.scrolled nav a.mainlogo { width: 140px; padding-top: 1rem !important; }

main { margin-top: 120px; }

/* Navigation (Desktop) */
header nav a.mainlogo { width: 200px; top: 0; left: 0; background-color: rgb(255, 255, 255); }
@media(min-width: 992px) {
  header nav a.mainlogo { width: 250px; }
}
@media(min-width: 1400px) {
  header nav a.mainlogo { width: 300px; }
}


header nav .navbar-collapse { flex-grow: 0; height: 120px; }
header nav .nav-link { font-size: 1rem; margin-top: 5px; font-weight: 500; line-height: 2; background-color: rgb(17, 61, 100); color:rgb(255, 255, 255); }
header nav .nav-link:hover { background-color: rgb(210, 31, 112); color: rgb(255, 255, 255); }
@media(min-width: 1200px) {
  header nav .nav-link { font-size: 1.25rem; margin-top: 0; }
}
main * {
  hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
}

nav ul li { position: relative; }

.main-menu-toggler { position: relative; width: 75px; height: 60px; margin-top: 25px; border: 0; border-radius: 0; font-size: 1.25rem; background: rgb(255, 255, 255) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MCAzNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwOyI+PHBhdGggZD0iTTEwLjU5Niw5LjVsMjguODA4LDBtLTI4LjgwOCw4bDI4LjgwOCwwbS0yOC44MDgsOGwyOC44MDgsMCIgc3R5bGU9ImZpbGw6bm9uZTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6I2QyMWY3MDtzdHJva2Utd2lkdGg6Mi45MXB4OyIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: center center; z-index: 2; }
@media (min-width: 1400px) { #mm-main-menu{ display: none !important; } }
/* Navigation (Mobil) */
.mm-menu { --mm-color-background: rgb(17, 61, 100); --mm-color-text: rgb(255, 255, 255); --mm-color-button: rgb(255, 255, 255); --mm-color-text-dimmed: rgb(255, 255, 255); --mm-color-border: rgba(255, 255, 255, 0.5); }
.mm-navbar a.mobile-logo { background-color: rgb(255, 255, 255); }
.mm-navbar a.mobile-logo img { height: 200px; }
.mm-navbars_top .mm-navbar:nth-child(2){ display: none; }
/*** Aufflackern der Mobile-Navigation beim Pageload vermeiden... ***/
#mobile-menu:not( .mm-menu ) { display: none; }

/*** Banner ***/
section.banner { height: 55vh; padding: 0; background-position: center center; background-size: cover; }
section.banner .container-fluid .row { height: 60vh; }
section.banner + h1.banner-headline { margin: 0; font-family: 'Bahagia'; font-size: 3.5rem; text-shadow: 2px 2px rgb(255, 255, 255); background-color: rgba(17, 61, 100, 0.1); hyphens: none !important; }
@media(min-width: 576px) {
  section.banner + h1.banner-headline { font-size: 4.5rem; }
}
@media(min-width: 992px) {
  section.banner + h1.banner-headline { font-size: 6rem; }
}




#kontakt,
#kosten,
#was_ist_first_step {
  background: rgba(17, 61, 100, 0.1);
}
  img.footer-logo {
    width: 300px;
  }
#kontakt .big-image img { width: 300px; height: 100%; object-fit: cover; }
@media(min-width: 992px) {
  #kontakt .big-image {
    position: absolute;
    width: 40%;
    right: 0;
    top: 0;
    height: 100%;
  }
}
#datenschutz h1,
#impressum h1 {
  margin-top: 200px;
}
#datenschutz h2,
#impressum h2  {
  margin-top: 50px;
}
#datenschutz ul {
  margin-bottom: 1rem;
}
blockquote {
  font-size: 3.5rem !important;
  line-height: 1;
}

@media(min-width: 1400px) {
  blockquote {
    font-size: 3.5rem !important;
  }
}

.blockquote-footer {
  font-size: 1.5rem;
}
.blockquote-footer:before {
  content: '';
}

.nav-item { margin-left: 20px; }

#kosten img { display: block; width: 25%; margin: 0 auto; }
#kosten .col-md-4 { font-size: 24px; font-weight: bold; }



/*** RECODING ***/

@media screen and (prefers-reduced-motion: reduce) { a { transition: none; } }
.tzero { padding-top: 0 !important; }
.tsm { padding-top: 20px !important; }
.txl { padding-top: 60px !important; }
.bzero { padding-bottom: 0 !important; }
.bsm { padding-bottom: 20px !important; }
.bxl { padding-bottom: 60px !important; }

@media (min-width: 1200px) {
  .tzero { padding-top: 0 !important; }
  .tsm { padding-top: 40px !important; }
  .txl { padding-top: 120px !important; }
  .bzero { padding-bottom: 0 !important; }
  .bsm { padding-bottom: 60px !important; }
  .bxl { padding-bottom: 120px !important; }
}

.bg-primary-10 { background-color:rgba(17, 61, 100, 0.1); }
.bg-secondary-10 { background-color:rgba(210, 31, 112, 0.1); }

/*** Text-Bild-Icon ***/
.text-bild-icon h2 { 
  margin-bottom: 1.5rem;
}
.text-bild-icon ol { margin-bottom: 1rem; }
.text-bild-icon ol > li { position: relative; list-style: none; padding: 1.5rem 0rem 1.5rem 2rem; margin: 0 0 0 4rem; }
.text-bild-icon ol > li:before { content: counter(li); counter-increment: li; position: absolute;	left: -4rem; top: 2rem; margin-top: 0; background-color: rgb(210, 31, 112); color: rgb(255, 255, 255); height: 4rem; width: 4rem; line-height: 4rem; text-align: center; font-weight: bold; font-size: 3rem; }
@media(min-width: 992px) {
  .text-bild-icon ol > li:before { top: 50%; transform: translateY(-50%); }
}

/*** Icon-Spalten ***/
.icon-spalten img { display: block; width: 25%; margin: 0 auto; }
.icon-spalten img + span { font-size: 1.5rem; font-weight: bold; }
.icon-spalten img + span.maximize { font-size: 2.5rem; }
