:root {

--font-family-base: "Open Sans", sans-serif;
--font-family-heading: "Reenie Beanie", sans-serif;

--bg-gruen: rgba(196, 196, 0, 1.0);
--bg-lightgrey: rgba(229, 229, 229, 0.3);
--bg-blau: rgba(0, 88, 164, 1.0);
--bg-darkblue: rgba(11, 68, 112, 1.0);
--bg-light: rgba(229, 240, 239, 1.0);
--bg-lightgreen: rgba(237, 237, 201, 1.0);
--bg-impuls: rgba(229, 240, 239, 0.3);

--gruen: #9e9e08;
--blau: #0058A4;
--darkblue: #0B4470;
--light: #e5f0ef;

--border-color: #dee2e6;
--border-radius: 0.25rem;
--big-radius: 3.0rem;
--small-radius: 1.5rem;
--card-border-radius: 1.5rem;

--color-text: #0B0B0A;   /* <-- Text */
--color-text-light: #fff;
--color-heading: #0B4470;   /* <-- Headlines */
--color-link: #9e9e08;   /* <-- darkgreen*/
--color-link-hover: #0B4470;     /* <-- gruen */
--color-link-active: #C4C400;     /* <-- gruen */
--color-button: #0b4470;    /* <-- darkblue */
--color-button-hover: #C4C400;  /* <-- gruen */
--color-button-link-hover: #0B4470;   /* <-- darkblue */

--color-background: rgba(229, 240, 239, 1.0);
--color-background-farbe1: rgba(224, 239, 246, 1.0);  /* <-- bleu */
--color-background-farbe2: rgba(237, 237, 201, 1.0);  /* <-- light */
--color-background-farbe3: rgba(237, 237, 201, 1.0);  /* <-- lightgreen */




--fontsize: clamp(0.875rem, 0.8411rem + 0.1695vw, 1rem);
--padding: clamp(1.175rem, 0.8411rem + 0.1695vw, 1rem);

--line-height-base: 1.5;
--line-height-heading: 1.1;
--font-weight-base: 400;
--font-weight-heading: 500;
--font-link-heading: 600;
--step-0: clamp(0.875rem, 0.8411rem + 0.1695vi, 1rem);
--space-m: clamp(1.3125rem, 1.2617rem + 0.2542vi, 1.5rem);
--space-3xs: clamp(0.25rem, 0.25rem + 0vi, 0.25rem);

}


/*--------------------------------------------------------------
# Flexible Höhe
--------------------------------------------------------------*/
html, body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
}
main {
flex: 1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
  width: 100%;
  padding-right: var(--padding);
  padding-left: var(--padding);
  margin-right: auto;
  margin-left: auto;
}
body.article-1 .showcase,
body.article-1 #impulse{  
padding-right: var(--padding);
padding-left: var(--padding);
}
body.article-1 .teasercards {
padding-left: calc(var(--padding) * 1.5);
padding-right: calc(var(--padding) * 1.5);
}

/*--------------------------------------------------------------
# Grund
--------------------------------------------------------------*/
body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-background);
  font-size: var(--fontsize);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-base);
}

body.article-9 {
  background-color: var(--bg-lightgreen);
}
body.article-1 { background-color:#FFF; }

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
color: var(--color-heading);
margin-block: calc(var(--padding) * 1.5) calc(var(--padding) * 0.4);
}

.h1, h1 {font-size:calc(1.65rem + 1.9vw);}
.h2, h2 {font-size:calc(1.45rem + 1.6vw);}
.h3, h3 {font-size:calc(1.25625rem + 1.2vw);}
.h4, h4 {font-size:calc(1.25625rem + .075vw);}
.h5, h5 {font-size:1.125rem}
.h6, h6 {font-size:1rem}
@media (min-width:1200px) {
.h1, h1 {font-size:2.95rem}
.h2, h2 {font-size:2.55rem}
.h3, h3 {font-size:1.75rem}
.h4, h4 {font-size:1.65rem}
}

.fontnormal { font-family: var(--font-family-base) !important; }
h3.fontnormal { font-family: var(--font-family-base) !important; font-size:1.4rem; }

p { margin-block: 1% 3%; }
.card h2 {margin-top: 0; margin-bottom: .5rem; }
b, strong { font-weight: 700; }

a, a:focus, a:active, a:visited {
color: var(--color-link);
font-weight: var(--font-link-heading);
}

a:hover, a:visited:hover {
color: var(--color-link-hover);
}

a:active {
  color: var(--color-link-active);
}

.text-right {
  text-align: right;
}

.margin-y {
  margin-bottom: 3rem;
  margin-top: 8rem;
}

section.kasten { padding: var(--padding); }

section.kasten > .container {
  background-color: #FFF;
  padding-top: var(--padding); padding-bottom: var(--padding);
  border-radius: var(--card-border-radius);
}

.content-space-1 {
  padding-top: var(--padding) !important;
  padding-bottom: calc(var(--padding) * 2) !important;
}
.content-space-2 {
  padding-top: var(--padding) !important;
  padding-bottom: calc(var(--padding) * 3) !important;
}
.content-space-b-2 {
  padding-bottom: calc(var(--padding) * 2) !important;
}
.content-space-t-1 {
  padding-top: var(--padding) !important;
}

.bg-fleur, .bg-dunkel { display:block; padding:1.2rem 1.2rem 1.3rem 1.2rem; border-radius:1rem; }
.bg-fleur { background-color: var(--bg-light); }
.bg-dunkel { background-color: var(--bg-blau); color:#FFF;  }


.modal-backdrop { background-color: #FFF; }
#imp5Modal .bg-image {
position:relative;
  background: url('../../media/imp5_istock-1182491376.jpg') top center;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-size: cover;
  color: #FFF !important;
  border-radius: 20px;
}
#imp5Modal .bg-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  border-radius: 20px;
}
#imp5Modal .modal-inhalt { position:relative; z-index:2; padding:2rem; }
#imp5Modal .modal-inhalt h2, #imp5Modal .modal-inhalt p { color: #FFF; font-weight:600; }
#imp5Modal .modal-inhalt { color: #FFF; }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
transition: all 0.5s;
background: rgb(255, 255, 255, 0);
display:block;
}
.navbar { padding:0; }
.navTrigger { top: 25px; }
#header.header-light { background: var(--bg-light); }

#logo { padding-top:0.5rem; padding-bottom:0.5rem;float:left; }
.navbar-brand-logo {
  width: 100%;
  min-width: 5rem;
  max-width: 5rem;
}
#header.header-scrolled { 
background: #FFF;
transition: all 0.5s;
color:#2d374b;
}
#header.header-scrolled .navbar-brand-logo { min-width: 4rem;max-width:4rem;  }
.card.transp-60 { background-color: rgba(255,255,255,0.6); }
#hero .card-title { font-family: "Open Sans", sans-serif; font-weight:600; }
#hero .card h2 { font-weight:600; font-size:3rem;}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
width: 100%;
  background: #FFF;
  padding: var(--padding) 0 0 0;
  color: var(--color-text);
  font-size: 1rem;
}
#footer a { color: #FFF; text-decoration: none; }
#footer .footer-top a { color: var(--blau); }
#footer a:hover { color: var(--color-button-hover); }
#footer h6 { font-family: "Open Sans", sans-serif; color: var(--darkblue); font-size: 1.2rem; font-weight: 500; }
#footer .footer-top .first { padding-right:3rem; }
#footer .footer-top .first img { min-width:230px; width:90%;}
#footer .footer-top .last img { width:100px; }
#footer .buntzeile { color:var(--blau); font-weight:700;font-size:1.2em; margin:0; }
#footer .buntzeile .color1 { color:var(--darkblue); }
#footer .list-inline-item:not(:last-child) { margin-right: 0.5rem; }
.bg-footer { background: var(--bg-darkblue); color:#FFF; }
.bg-footer .col-md-5.text-end {text-align: left !important;}
.sm-tiefer { padding-top: 1.5rem !important; }

/*--------------------------------------------------------------
# Appfooter
--------------------------------------------------------------*/
#appfooter .container { padding-right: 0; padding-left: 0; }
#appfooter .iconwrapper { background: #FFF; padding: var(--padding); }
#appfooter .leftside img  { height:40px; margin-right:30px; }
#appfooter .rightside img { height:40px; margin-left:30px;  }

@media (min-width: 576px) {
#appfooter .container { padding-right: 0; padding-left: 0; }
#appfooter .iconwrapper { background: #FFF; padding: var(--padding); }
#appfooter .leftside img  { height:50px; margin-right:30px; }
#appfooter .rightside img { height:50px; margin-left:30px;  } 
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: rgba(214, 215, 181, 1.0);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: rgba(214, 215, 181, 0.5);
  color: #767764;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}


/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding:0px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .card-lg > .card-body { padding: 2.25rem 2.75rem; }

/*--------------------------------------------------------------
# Showcase
--------------------------------------------------------------*/
.showcase { background-color: var(--bg-light); }
.showcase .item-body { padding-right:0 !important; }
.showcase .device { left: 0%; position:relative; }
.showcase .device-content { position:absolute; top:0px;}
.showcase .device-content img.mobi { max-height:38em; }
.showcase .storebuttons img { max-height:40px; }

@media (max-width: 767px) {
.showcase .device { display:none; }
}




/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/

.card { padding-left:0; border-radius: var(--small-radius); border:0; overflow:hidden; }
.card .col-4 { position:relative; }
.card .col-4 a, .card .col-4 .img-fluid, .card { border-top-left-radius:var(--small-radius); border-bottom-left-radius:var(--small-radius); }
.card-body { padding: 1.75rem; }
.card-title { font-size: 2.2em; margin-top:0; }
.card-title a { color: var(--blau);}
.object-fit-cover { object-fit: cover; }

.badge {
  padding: .525em .975em;
  line-height: normal;
  font-size: 0.9rem;
}
.pinned-top-end {
  position: absolute;
  top: -.0625rem;
  right: -.0625rem;
}
.badge.bg-blue {
  background-color: var(--darkblue);
  border-radius: 0 0 0 .8rem;
}
.card.bg-lightgreen {
  border-radius: 0;
  padding-bottom: 1rem;
}
.card.bg-white {
  border-radius: 0;
  padding-bottom: var(--padding);
}

/*--------------------------------------------------------------
# Accordion
--------------------------------------------------------------*/
  .card .p-acc {
    padding-left: var(--padding);
    padding-right: var(--padding);
  margin-top: -3.2rem;
}
.accordion .card { background-color:#FFF; border:none;border-radius: var(--small-radius); }
.accordion-collapse, .step-icon-soft-light.step-icon-pseudo::before {background-color: #FFF;}
.accordion .card-header { 
background-color:transparent; 
border:none; 
padding: calc(var(--padding) * 0.8); }

.accordion .card-name, .accordion .card h5 { font-size:2.8rem; margin: 0em 0.2em; }
.accordion .card-header a.button { 
background-color:transparent; 
border-radius: 0px;
text-align:left;
text-transform:none;
color: var(--darkblue); 
border:none; 
display:block;
width:100%;
position:relative;
font-size:1em;
line-height:1em;
margin:0;
 }
 
.accordion .card-header a.button span {
  cursor: pointer;
  display: inline-block;
  position:absolute;
right:30px;
  transition: 0.5s;
}

.accordion .card-header a.button.collapsed span:after {
  content: '+';
  position: absolute;
  opacity: 1;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.accordion .card-header a.button span:after {
  content: '-';
  position: absolute;
  opacity: 1;
  top: 0;
  right: -20px;
  transition: 0.5s;
  }

.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: transparent;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: var(--bs-danger);
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}

.accordion .card { margin-bottom:2em; }
.accordion .card.rounded-40 .card-body { background-color: #FFF; position:relative; top: 0px; border-top-left-radius: var(--big-radius); border-top-right-radius: var(--big-radius);border-bottom-left-radius: var(--big-radius); border-bottom-right-radius: var(--big-radius); }
.accordion .card-body img { border-top-left-radius: 20px; border-top-right-radius: 20px; margin-bottom:1rem; max-width:100%; }


/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.button, .btn.btn-primary {
  display: inline-block;
  border-radius: 10px;
  background-color: var(--color-button);
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 1.1em;
  width: auto;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  text-transform:uppercase;
  padding: 6px 15px;
}

.button:hover, .btn.btn-primary:hover {
  background-color: var(--color-button-hover);
  color: #FFF;
  }

a.button, a.button:hover, a.button:focus, a.button:active, a.button:visited { color: #FFF; }



/*--------------------------------------------------------------
# Formular
--------------------------------------------------------------*/
.checkbox input { margin-right: 10px; }
.form-group { margin-bottom: 1rem; }
#kontaktform input { background: rgba(227, 231, 240, 0.4)}
label { display: inline-block; margin-bottom: .2rem; }


/*--------------------------------------------------------------
# Teasercards Homepage
--------------------------------------------------------------*/
.teasercards { background-color: var(--bg-light);  }
.teasercards .container { padding-right:0; padding-left:0; margin-top:var(--padding); }
.teasercards .card { border-top-right-radius: var(--big-radius); }


/*--------------------------------------------------------------
# Gallery Pressekit in Accordion
--------------------------------------------------------------*/
.gallery.accgallery .col, .gallery.accgallery .col-md-4 { width:29%; margin: 15px; background: #FFF; border:1px solid #DDD; padding:15px; border-radius:20px;}
.accordion .card-body .gallery.accgallery img { border-top-left-radius: 0px; border-top-right-radius: 0px; border-radius:none; }
.decker.item_open { background:#FFF; opacity:1; }
.decker .bild { padding:40px; }
.item_open .close { right:40px; top:40px; }
.decker .captionbottom { padding:10px 15px; }
@media (max-width: 767px) {
.decker.item_open { display:block; min-height:50vH; padding:15px; }
}


/*--------------------------------------------------------------
# Impulse
--------------------------------------------------------------*/
.impuls .dachzeile { font-family: "Open Sans", sans-serif; font-weight: 600; color: var(--gruen);text-transform:uppercase; }
.impuls .bg-lightgreen { background-color: var(--bg-lightgreen) !important; }

.impuls .card-body.bg-lightgreen img.zweig { position:absolute; right:3rem;top:2rem; width:90px;}
.impuls .accordion .card-body { border-top:1px solid var(--darkblue); margin: 0rem 2rem 1rem 2rem; padding:var(--padding) 0 0 0;  border-bottom-left-radius: var(--small-radius); border-bottom-right-radius: var(--small-radius); }
.impuls .accordion .card-body img { border-radius: var(--small-radius) }
.impuls > .container > .card {  padding-bottom:var(--padding); }
table.namenspiel strong { font-size: 42px; font-family: "Reenie Beanie", sans-serif; color: var(--darkblue); }

.card table.namenspiel > tbody > tr:first-child > td {  
  padding-right: 1rem;
  padding-left: 1rem;
   }
.card table.namenspiel > :not(caption) > * > * {
  padding-right: 1rem;
  padding-left: 1rem;
}

.impuls .card-body.bg-lightgreen {
position:relative; top: -3.2rem;
padding: var(--padding);
border-top-left-radius: var(--small-radius);
border-top-right-radius: var(--small-radius);
  }
 .impuls .card.bg-white .card-body { 
position:relative; top: -3.2rem;
padding: var(--padding);
border-top-left-radius: var(--small-radius);
border-top-right-radius: var(--small-radius);
  }

/*--------------------------------------------------------------
# Verschiedenes
--------------------------------------------------------------*/

main img {
  max-width: 100% !important;
}

.quelle { margin: 1rem 1rem 1rem 3rem; text-align: right; }
p.quelle, p.quelle a, p.hinweis  { color:#999; font-size: 12px !important; font-style: italic; }

.videowrapper {
  width: 560px;
  margin: 30px auto 10px auto;
  max-width: 100%;
  padding-bottom: var(--padding);
  position: relative;
  border-radius: 20px;
}

iframe {
  border: 0;
  border-radius: 20px;
  max-width: 100%;
}
.inhalt ul {
  list-style-type: none;
  padding: 0.5rem 0;
  margin: 0;
}
.inhalt ul li {
padding-left:35px;
background-image: url('../../media/listenpunkt.svg');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 2px 2px;
margin-bottom:0.5rem;
min-height:24px;
}

.bildrechts.logo img { position:relative; width:120px;margin-bottom:20px; }
.logozeile .col-md-7, .logozeile .col-md-5, .logozeile .col-md-6 { text-align:center; padding-top: 10px; padding-bottom:10px; padding-left:0; padding-right:0;  }

.logozeile .col-md-7 img { max-height:140px; }
.logozeile .col-md-5 img { max-height:110px; }
.doppellogo img { width:220px; right:0%; }
.doppellogo.oben img { position:relative; display:none; }
.doppellogo.unten { display:block; margin-top:2rem; }
.doppellogo.unten img { position:relative; display:block; }
.w-35 { width:35%!important; }
.w-65 { width:65%!important; }
#impulse .position-md-absolute { display:inline-block; height:100%; width:40%;
background-image: url('../../media/stock-photo-330079703.png');
background-repeat: no-repeat;
background-size: cover;
}


/* in der APP
.notinapp { display:none; }
*/
.bigger { font-size: 1.6em; }










@media (min-width: 768px) {
p { margin-block: 0.58% 2%; }
main .container, main .container-sm, #appfooter .container { max-width: 710px; padding-right: var(--padding);padding-left: var(--padding); }
.container.headlineblock { padding-left: calc(var(--padding) + 1rem); }
.impuls .accordion .card-body img { width: 50%; float: right; margin-top: 6px;margin-left: 1.5em;margin-bottom: 2rem; }
.impuls .card-body.bg-lightgreen img.zweig { position:absolute; right:3rem;top:2rem; width:100px;}
.bildrechts p, .bildlinks p { width:50%;  }
.bildrechts.logo img { position:absolute; right:18%; max-width:120px; }
.bildlinks img { float: left; margin: 0.3rem 2rem 0 0; }

.logozeile .col-md-7 { width:62%; }
.logozeile .col-md-5 { width:38%;padding-top: 20px; }
.logozeile .col-md-5 img { max-height:130px; }
.doppellogo.oben { position:relative; }
.doppellogo.oben p { width:55%; }
.doppellogo.oben img { position:absolute; display:block; width:220px; right:3%; }
.doppellogo.unten { display:none; margin-top:2rem; }
.doppellogo.unten img { position:relative; display:none; }
.anleitung figure { margin-right:5%; float:left; width:43%;  }
table.namenspiel { width:70%; margin:0 15%; }
.card {
  padding-left: 0;
  border-radius: var(--big-radius);
  border: 0;
}
.card .col-4 a, .card .col-4 .img-fluid { border-top-left-radius:var(--big-radius); border-bottom-left-radius:var(--big-radius); }

  .card .p-acc {
    padding-left: calc(var(--padding) * 2);
    padding-right: calc(var(--padding) * 2);
  margin-top: -3.2rem;
}
.card-title { font-size: 2.4em; margin-top:0; }
.card-title a { color: var(--blau);}

.impuls .card-body.bg-lightgreen {
position:relative; top: -3.2rem;
padding: calc(var(--padding) * 2) calc(var(--padding) * 2);
border-top-left-radius: var(--big-radius);
border-top-right-radius: var(--big-radius);
  }
 .impuls .card.bg-white .card-body { 
position:relative; top: -3.2rem;
padding: var(--padding);
border-top-left-radius: var(--big-radius);
border-top-right-radius: var(--big-radius);
  }
.accordion .card { border-radius: var(--big-radius); }
.impuls .accordion .card-body { margin: 0rem 2rem 2rem 2rem; border-bottom-left-radius: var(--big-radius); border-bottom-right-radius: var(--big-radius); }
.accordion .card-header { padding: var(--padding); }

section#teaser > .container {
  padding-right: 0;
  padding-left: 0;
}
section.kasten > .container {
  padding-right: calc(var(--padding) * 2) !important;
  padding-left: calc(var(--padding) * 2) !important;
}
.content-space-1 {
  padding-top: calc(var(--padding) * 2) !important;
  padding-bottom: calc(var(--padding) * 2) !important;
}
.content-space-2 {
  padding-top: calc(var(--padding) * 3) !important;
  padding-bottom: calc(var(--padding) * 3) !important;
}
#impulse .content-space-1 {
  padding-top: calc(var(--padding) * 5) !important;
  padding-bottom: calc(var(--padding) * 5) !important;
}
.content-space-b-2 {
  padding-bottom: calc(var(--padding) * 3) !important;
}
.content-space-t-1 {
  padding-top: calc(var(--padding) * 4) !important;
}
.quelle { margin: 1rem 3rem 1rem 3rem; }
#footer .list-inline-item:not(:last-child) { margin: 0 0.7rem; }
.bg-footer .col-md-5.text-end {text-align: left !important;}
.sm-tiefer { padding-top: 0rem !important; }
}







  .position-md-absolute {
    position: absolute !important;
  }




@media (min-width: 992px) {
main .container, main .container-lg, main .container-md, main .container-sm, #appfooter .container { max-width: 930px; }
#hero .container { max-width: 1080px; }
.bildrechts.logo.doppellogo img { max-width:220px !important; right:5%;  }
.impuls .accordion .card-body img { width: 40%; float: right; margin-top: 6px;margin-left: 1.5em; }
}

@media (min-width: 1200px) {
main .container, main .container-lg, main .container-md, main .container-sm, main .container-xl, #appfooter .container { max-width: 930px; }
.bildrechts, .bildlinks { display:inline-block; width:90%; position:relative; }
.bildrechts.logo img { position:absolute; right:20%; max-width:120px !important; }
}

@media (min-width: 1400px) {
main .container, main .container-lg, main .container-md, main .container-sm, main .container-xl, main .container-xxl, #appfooter .container { max-width: 930px; }
}
@media (min-width: 1600px) {
#impulse .position-md-absolute { background-size: cover; background-position-y: -10rem;}
}

/*--------------------------------------------------------------
# Audioblock
--------------------------------------------------------------*/
.audioblock { display:inline-block; text-align:center; }
.audioblock img { max-width: 50px !important; }
.audioblock img, .impuls .accordion .card-body .audioblock img {
width: 40%; margin-left:auto; margin-right:auto;
float:none;
  }