@font-face {
font-family: 'jennasue';
src: url('../fonts/jennasue.woff2') format('woff2'),
url('../fonts/jennasue.woff') format('woff');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'Impact';
src: url('../fonts/unicode-impact.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'ElegantIcons';
src:url('../fonts/ElegantIcons.eot');
src:url('../fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
url('../fonts/ElegantIcons.woff') format('woff'),
url('../fonts/ElegantIcons.ttf') format('truetype'),
url('../fonts/ElegantIcons.svg#ElegantIcons') format('svg');
font-weight: normal;
font-style: normal;
}


html {height:100%;box-sizing: border-box;}
body {height:100%;padding: 0;margin: 0;}
#myCanvas, #tags, #tags ul li a { font-family: 'Impact', sans-serif !important; }



/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'ElegantIcons';
content: attr(data-icon);
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.table > :not(caption) > * > * {
    border-bottom-width: 0px;
}
.table tr:not(:last-child) {
border-bottom:1px solid #c6c6c6;
}



/* Footer */


#footer {
   position: fixed;
   height:70px;
   background-color:rgba(255, 255, 255, 1.0);
   left: 0;
   bottom: -60px;
   width: 100%;
   padding-right: var(--bs-gutter-x,1.2rem);
   padding-left: var(--bs-gutter-x,1.2rem);
}


footer .schatzk { 
position:relative; top:-4.2em;
background-image: url('../../media/halbkreis.svg');
width:10rem;height:8rem;
max-width:30vH;
text-align:center; }

footer .schatzk img { 
padding:2em; }

footer .buttons { max-width:30vH; }

footer .buttons a { 
    display: inline-block;
    width:2.6em;height:2.6em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
  }
footer .buttons a.weiter {
      background-image: url('../../media/weiter-re.svg');
      }
footer .buttons a.zurueck { 
    background-image: url('../../media/weiter-li.svg');
  }
footer .buttons a.weiter-gr {
      background-image: url('../../media/weiter-re-grau.svg');
      }
footer .buttons a.hamburger {
      background-image: url('../../media/footer-hamburger.svg');
      }
footer .buttons a.dreip {
      background-image: url('../../media/kesse-einheiten.svg');
      }
  
.card .flip-btn a, .card .unflip-btn a { color:#5ab4aa !important; }



#scrollArrow {
display: block;
text-align: center;
font-size: 30px;
z-index: 1000;
text-decoration: none;
text-shadow: none;
width: 40px;
height: 40px;
background-color: white;
cursor: pointer;
 }



/* Allgemein */

body, html {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight:500; 
font-style: normal; 
font-variant: normal;     
line-height: 1.4;
-webkit-text-size-adjust: 100%;
}

p {
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 0.8rem;
}
.form-switch label{
    margin-top: 0.5rem;
}

/* Farben */


:root {
--default: rgba(255, 217, 98, 1);  /* hellorange #ffd962 */
--stufe1: rgba(90, 180, 170, 1);  /* gruen #5ab4aa */
--stufe2: rgba(61, 165, 227, 1);  /* blau #3da5e3 */
/*   alt                                                  --stufe3: rgba(224, 150, 0, 1); /* orange #e09600 */
--stufe3: rgba(255, 102, 0, 1); /* orange #ff6600 */
--stufe4: rgba(140, 111, 157, 1); /* lila #8c6f9d */
--stufe5: rgba(166, 72, 114, 1); /* cranberry #a64872 */
--stufe6: rgba(50, 120, 180, 1); /* dblau #3278b4 */
/*   alt                                                  --stufe7: rgba(200, 99, 80, 1);  braun #c86350 */
--stufe7: rgba(51, 153, 51, 1); /* braun #339933 */
--text-dark: rgba(10, 10, 10, 1); /* textfarbe #0a0a0a  */ 
--text-red: rgba(204, 0, 0, 1); /* textfarbe #CC0000  */ 
--stufe1d: rgba(41, 111, 95, 1);  /* textgruen #296f5f */

/* ausgegraut: #c3bfb7 */
}


body.default { background-color: var(--default); }
body.stufe1, body.stufe1 .btn-secondary, body.stufe1 .form-switch .form-check-input:checked { background-color: var(--stufe1); }
body.stufe2, body.stufe2 .btn-secondary, body.stufe2 .form-switch .form-check-input:checked { background-color: var(--stufe2); }
body.stufe3, body.stufe3 .btn-secondary, body.stufe3 .form-switch .form-check-input:checked { background-color: var(--stufe3); }
body.stufe4, body.stufe4 .btn-secondary, body.stufe4 .form-switch .form-check-input:checked { background-color: var(--stufe4); }
body.stufe5, body.stufe5 .btn-secondary, body.stufe5 .form-switch .form-check-input:checked { background-color: var(--stufe5); }
body.stufe6, body.stufe6 .btn-secondary, body.stufe6 .form-switch .form-check-input:checked { background-color: var(--stufe6); }
body.stufe7, body.stufe7 .btn-secondary, body.stufe7 .form-switch .form-check-input:checked { background-color: var(--stufe7); }

body, h1, a.kesse_einheiten, .btn.weiter a, .btn.zurueck a, .main h2 { color:#FFF; }
body.article-147 { color:#67748e; }
.card-body h2 { color:#0a0a0a; }
.alert-primary, .alert-secondary, p.alert, .card, #sitemap a, .table { color: #0a0a0a; }
a { color:#FFF; font-weight:bold; }
a:hover { color: var(--default); font-weight:bold; }
body.default a:hover { color: var(--text-red); font-weight:bold; }
body.default a.btn-primary:hover { color: var(--default); font-weight:bold; }
#sitemap a:hover { color:red; }
#lesezeichen h4 a:hover { color: var(--default);font-weight: bold; }
.w-65 { width: 65% !important; }
.o-60 { opacity:0.6 !important; }
span.pfeil { font-weight:700; font-size:1.8rem; }

.text-dark, .bg-white p { color: #0a0a0a !important; }
.btn-primary {
background-color: #d9a709;
border-color: #bc9007; 
font-size:1.0em;
}
.btn-secondary {
background-color: #d9a709;
border-color: #bc9007; 
font-size:1.0em;
}
body.stufe3 .btn-mini {
margin-top:40px;
background-color: #ff6600;
border-color: #ff6600; 
font-size:1.0em;
color:#FFF !important;
padding: .4rem 1.0rem;
}
body.stufe6 .btn-mini {
margin-top: 10px;
margin-left: 26px;
    background-color: #3278b4;
    border-color: #3278b4;
    font-size: 1.0em;
    color: #FFF !important;
    padding: .4rem 1.0rem;
}


.btn-primary i { margin-right:10px; }
.btn-primary:hover, .btn.bg-gradient-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
background-color: #bc9007;
border-color: #bc9007;
}
body.default .btn-primary {
background-color: #CC0000;
border-color: #CC0000; 
}
.btn { padding:5px 14px 4px 14px !important; }



.bg-primary {background-color: #4d786e!important; } 
.bg-secondary {background-color: #8392ab!important; } 
.alert-primary {background-color: #f4c3aa;border-color: #CC0000;background-image:none;}
.alert-secondary {background-color: #b5f4aa;border-color: #CC0000;background-image:none;}

.dropdown-toggle::after { display: none; }
.dropdown-menu { padding:20px; max-width:100%; min-width:100%; }
.dropdown-menu a { color: #0a0a0a !important; font-weight: 400; font-size: 1.3rem; text-transform:uppercase; color: rgba(37,47,64,.9); 
}
footer .buttons .dropdown-menu a { font-size: 1.2rem;}
.dropdown-menu.show li a {
white-space: nowrap;
}



/* Eierkreise */

div.rubrik, div.rubrikklein  { display:block; 
background-image: url('../../media/eierkreis.svg');
background-repeat: no-repeat;
background-position: center center;
background-size:contain;
}
a.erfolg  { display:block; 
background-image: url('../../media/eierkreiserfolg.svg');
background-repeat: no-repeat;
background-position: center center;
background-size:contain;
}
div.favherz, div.favherzfull  { 
display:block; width:30px; height:30px;
float:right;
margin-right:20px;
cursor:pointer;
}
div.favherz:before, span.favherz:before  { 
color:#FFF;
font-family: 'ElegantIcons';
font-size:1.2rem;
content: "\e030";
font-weight: bold;
font-variant: normal;
text-transform: none;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div.favherzfull:before  { 
color:#CC0000;
font-family: 'ElegantIcons';
font-size:1.2rem;
content: "\e089";
}



.title .rubrik { margin-bottom: 1rem;width:60px;height:60px; text-align:center; font-size:3em; }
.rubrikklein { position:relative; width:30px;height:30px; float:right; }
.rubrikklein:after { position:absolute; left:10px;font-size:1.4em;font-weight:bold; }
a.erfolg { margin-bottom: 1rem;height:80px; font-weight:bold; }

body.stufe1 .title .rubrik, body.stufe1 .rubrikklein:after, body.stufe1 h4, .color1, .color1 a { color:var(--stufe1) !important; }
body.stufe2 .title .rubrik, body.stufe2 .rubrikklein:after, body.stufe2 h4, .color2, .color2 a { color:var(--stufe2) !important; }
body.stufe3 .title .rubrik, body.stufe3 .rubrikklein:after, body.stufe3 h4, .color3, .color3 a { color:var(--stufe3) !important; }
body.stufe4 .title .rubrik, body.stufe4 .rubrikklein:after, body.stufe4 h4, .color4, .color4 a { color:var(--stufe4) !important; }
body.stufe5 .title .rubrik, body.stufe5 .rubrikklein:after, body.stufe5 h4, .color5, .color5 a { color:var(--stufe5) !important; }
body.stufe6 .title .rubrik, body.stufe6 .rubrikklein:after, body.stufe6 h4, .color6, .color6 a { color:var(--stufe6) !important; }
body.stufe7 .title .rubrik, body.stufe7 .rubrikklein:after, body.stufe7 h4, .color7, .color7 a { color:var(--stufe7) !important; }
.colorlesez, .colorlesez a { color:var(--text-red) !important; }

body.stufe1 .rubrikklein:after { content:"1"; }
body.stufe2 .rubrikklein:after { content:"2"; }
body.stufe3 .rubrikklein:after { content:"3"; }
body.stufe4 .rubrikklein:after { content:"4"; }
body.stufe5 .rubrikklein:after { content:"5"; }
body.stufe6 .rubrikklein:after { content:"6"; }
body.stufe7 .rubrikklein:after { content:"7"; }
body.stufe1 li.list-group-item { color:var(--stufe1);border-bottom: 1px solid var(--stufe1); }
body.stufe2 li.list-group-item { color:var(--stufe2);border-bottom: 1px solid var(--stufe2); }
body.stufe3 li.list-group-item { color:var(--stufe3);border-bottom: 1px solid var(--stufe3); }
body.stufe4 li.list-group-item { color:var(--stufe4);border-bottom: 1px solid var(--stufe4); }
body.stufe5 li.list-group-item { color:var(--stufe5);border-bottom: 1px solid var(--stufe5); }
body.stufe6 li.list-group-item { color:var(--stufe6);border-bottom: 1px solid var(--stufe6); }
body.stufe7 li.list-group-item { color:var(--stufe7);border-bottom: 0px solid var(--stufe7); }

/* !!!!!!!!!! Array muss noch vervollständigt werden Template Helper Header */

/*
.bg-modal .modal-xl, 
.bg-modal .modal-content { background-color: var(--stufe7) !important; }
.bg-modal .modal-footer { border-top:none; }
.bg-modal {width:100%;height100vH;}

.modal-dialog { margin:0; }
.modal-content { max-width:80vw; margin-left:10vw; margin-right:10vw; padding:30px; }
.modal-backdrop { opacity: 0.7; background-color: rgba(255, 217, 98, 1); }
*/


.form-control:focus {
color: #495057; 
background-color: #fff;
color: var(--text-dark);
outline: 0;
box-shadow: 0 0 0 1px var(--default);
}




.h1, .h2, .h3, .h4, h1, h2, h3, h4 { letter-spacing:0; }
div.rubrik, .header a { text-transform: uppercase; font-weight: 700; }
h1, span.h1 { font-size:1.4rem;line-height:1.6rem;  font-weight: 700; letter-spacing:0px; text-transform: uppercase;}
h2 { font-size: 1.2rem; line-height:1.4rem; margin-top:2rem;  font-weight: 700; }
.weissfeld p.h2 { display:block;width:100%;font-size: 1.2rem; line-height:1.4rem; margin-top:0rem;  font-weight: 700; }
p.logo-left { text-align:left; margin:10px 0 20px 0; }
h3 { font-size:1.0rem;line-height:1.5rem; color:white; text-transform: none; font-weight: 700; }

ul#results, ul.list-group-horizontal { display:block;width:100%;text-align:center; }
#results h4, ul#results li, ul.list-group-horizontal li { 
width:auto;display:inline-block;
font-size:1.0rem;font-weight:bold;line-height:1.2em;
padding:4px 8px; margin:4px 8px 4px 0; border-radius: .25rem; 
background-color:#f6f6f6; color: var(--text-dark) !important; }

body.article-8 .title h1, 
body.article-9 .title h1, 
body.article-10 .title h1, 
body.article-11 .title h1, 
body.article-12 .title h1, 
body.article-13 .title h1, 
body.article-14 .title h1 { font-size:1.8rem; line-height:2rem; font-weight:900; }
body.article-6 h2 { text-transform: uppercase; }

/* Schatzkiste */

body.article-15 h4, body.article-149 h4 { 
width:auto;display:inline-block;
font-size:1.0rem;font-weight:bold;line-height:1.2em;
padding:4px 8px; margin:4px; border-radius: .25rem; }

body.article-15, body.article-149, body.article-3, body.article-7, body.article-156, body.article-158, .invers { color:var(--text-dark); }
body.article-3 a, body.article-7 a, body.article-158 a, .invers a { color:var(--text-red); }
body.article-15 h3, body.article-149 h3, body.article-3 h3, body.article-156 h3, body.article-158 h3, body.article-158 h2, body.article-7 h2 { font-size:1.2rem;line-height:1.2em; color:var(--text-dark); text-transform: none; margin:4px 0px; }
.invers h3 { font-size:1.2rem;line-height:1.2em; color:var(--text-red); text-transform: none; margin:4px 0px; }
body.article-15 h2, body.article-149 h2 { margin:4px 4px; }
body.article-15 p, body.article-149 p { margin:4px 4px; }

.stufe1 h4 { background-color: var(--stufe1); color:#FFF; }
.stufe2 h4 { background-color: var(--stufe2); color:#FFF; }
.stufe3 h4 { background-color: var(--stufe3); color:#FFF; }
.stufe4 h4 { background-color: var(--stufe4); color:#FFF; }
.stufe5 h4 { background-color: var(--stufe5); color:#FFF; }
.stufe6 h4 { background-color: var(--stufe6); color:#FFF; }
.stufe7 h4 { background-color: var(--stufe7); color:#FFF; }
.lesez h4 { background-color: var(--text-red); color:#FFF; }


/* Basic */

.wrapper {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
background-image: url('../../media/wolkebg.svg');
background-repeat: no-repeat;
background-position: top 20vH center;
background-size:120%;
z-index: 2;
}
body.stufe5 .wrapper,
body.stufe6 .wrapper {
background-image: url('../../media/kessk.svg');
background-repeat: no-repeat;
background-position: top 20vH center;
background-size:100%;
z-index: 2;
}


#zipper { position:relative;margin-top:-30px;margin-left:auto;margin-right:auto; }
#zipper img { width:100%; }
#zipper .container { position:absolute;top:30px; padding-left:1.5rem;padding-right:1.5rem; }
#zipper .container h1 { padding-right: var(--bs-gutter-x,1.5rem);
margin-right: auto;
margin-left: auto;
}

.container { max-width:767px; }
.phpcont .container  { margin: 20px 0; padding:15px; }
.main.mb-auto, body.article-6 .container.mb-auto, body.article-7 .container.mb-auto  { padding-bottom:120px; }
body.article-1 .header.container{ width: 100%;padding-right: 0;padding-left: 0; }

.totalmiddle {display: flex !important;align-items: center !important;justify-content: center !important;}

.quadratbox { position:relative; width: 100%; text-align:center; }
.quadratbox img:before {
content: "";
display:block;
padding-top: 100%;
}

.h-400 { height:400px; padding:2rem; }
.w-85 { width: 85% !important; }
img { max-width:100%; max-height:100% }
img.schatzkiste { width:120px; max-width:120px; }
.akkus1 { display:block; width:70%; margin:15px 20% 15px 10%; }
.akkus2 { display:block; width:56%; margin:15px 22% 15px 22%; }
figure.bildrechts { display:block; float:right; width:35%; }
figure.bildrechts2 img { width:40%;float:right; }
figure.bildrechts3 { display:block; float:right; width:30%; }
figure.bildrechts4 { display:block; float:right; height:140px; margin-top:10px; margin-right:10px; margin-bottom:10px; }
figure.bildrechts5 { display:block; float:right; width:60px; margin-top:10px; margin-right:20px; margin-right:20px; margin-left:10px; }
figure.bigimg { display:block;text-align:center; }
figure.bigimg img { width:80%; }
p.quelle {margin-top:50px;}
p.quelle,p.quelle a  { font-weight:normal;font-size:11px;}
.title { margin-bottom:20px; }
.textunten { margin-top:20px; }
.btn.weiter,.btn.zurueck { box-shadow:none;padding:.75rem 0rem; }
.resume { background: rgba(255, 255, 255, 0.3); padding:15px; color:#4d786e; border-radius:5px;}
.modal-content h3 { text-transform: none; }
.modal-backdrop { opacity: 0.7; background-color: rgba(255, 255, 255, 1); }
.knopfbutton, .soundbutton { display:inline-block;width:20%;height:auto;float:right;}
.playbutton { display:block; width:70px;height:auto;margin: 40px auto;}

.weissfeld {
background-color: #fff;
border-radius: 5px;
padding:15px 15px 15px 18px;
color: var(--text-dark);
}
table.weissfeld {
background-color: #d6e7f6;
border-radius: 5px;
padding:15px 15px 15px 18px;
color: var(--text-dark);
}
.weissfeld.p0 {
background-color: #fff;
border-radius: 5px;
padding:0;
color: var(--text-dark);
}
.weissfeld.p1 {
background-color: #fff;
border-radius: 5px;
padding:15px 15px 5px 18px;
color: var(--text-dark);
}
.weissfeld { display:inline-block; width:100%; }
.weissfeld.p0 h2.title { color: #a64872; margin:20px 20px 0; }
.weissfeld.justify-content-between p { display:block; float:left; }
table.weissfeld.beispiele { display:table; width:100%; }
table.beispiele td { padding-left:0;padding-right:0;}
table.beispiele td p { font-size: 1.1rem; font-weight:600;margin-bottom:0;margin-top:6px;}
table.beispiele td .knopfbutton,
table.beispiele td .soundbutton { width:60%;max-width:50px;height:auto;}
table.weissfeld.beispiele td { padding-top:25px !important; }
table.weissfeld.beispiele td.erstesp {  }
table.weissfeld.beispiele td.zweitesp { padding-top:10px !important; padding-bottom:8px; padding-right:12px; width:135px; text-align:right;}
table.weissfeld.beispiele td .first { display:inline-block;float:left;padding-left:13px; }
table.weissfeld.beispiele td .btn-mini {
    margin-top: 5px;
    margin-left: 26px;
    background:none;
    box-shadow:none;
    border:none;
    float:right;
    font-size: 1.0em;
    font-weight:normal;
    color: #3278b4 !important;
    padding: 0;
    text-transform:none;
}

.kess1, .kess2, .kess3, .kess4, .kess5, .kess6, .kess7, .kess8, .kess9 {
display:inline-block;
border-radius: 5px;
color: var(--text-dark);
}
.kess1 img, .kess2 img, .kess3 img, .kess4 img, .kess5 img, .kess6 img, .kess7 img, .kess8 img, .kess9 img {
border-top-left-radius: 5px;border-top-right-radius: 5px; }
.kess1 p, .kess2 p, .kess3 p, .kess4 p, .kess5 p, .kess6 p, .kess7 p, .kess8 p, .kess9 p { margin:5px 15px; }
form.kesstermine button { font-weight:700; font-size:1.1rem; margin:5px 10px 15px 10px;
background:none; border: none; outline: none; }

.kess1 { background-color: #fff6e1; } .kess1 form.kesstermine button { color: #F9B200; }
.kess1 h2 { text-transform:uppercase; color: #F9B200; margin:15px 15px 5px 15px; }
.kess2 { background-color: #fff9fa; } .kess2 form.kesstermine button { color: #E0091D; }
.kess2 h2 { text-transform:uppercase; color: #E0091D; margin:15px 15px 5px 15px; }
.kess3 { background-color: #f5ffdf; } .kess3 form.kesstermine button { color: #89BA17; }
.kess3 h2 { text-transform:uppercase; color: #89BA17; margin:15px 15px 5px 15px; }
.kess4 { background-color: #eaf8ff; } .kess4 form.kesstermine button { color: #0080BA; }
.kess4 h2 { text-transform:uppercase; color: #0080BA; margin:15px 15px 5px 15px; }
.kess5 { background-color: #fff6ed; } .kess5 form.kesstermine button { color: #EC7405; }
.kess5 h2 { text-transform:uppercase; color: #EC7405; margin:15px 15px 5px 15px; }
.kess6 { background-color: #f2f5ff; } .kess6 form.kesstermine button { color: #6572a6; }
.kess6 h2 { text-transform:uppercase; color: #6572a6; margin:15px 15px 5px 15px; }
.kess7 { background-color: #fff7ee; } .kess7 form.kesstermine button { color: #f6931e; }
.kess7 h2 { text-transform:uppercase; color: #f6931e; margin:15px 15px 5px 15px; }
.kess8 { background-color: #effdff; } .kess8 form.kesstermine button { color: #01abbd; }
.kess8 h2 { text-transform:uppercase; color: #01abbd; margin:15px 15px 5px 15px; }
.kess9 { background-color: #fff9fa; } .kess9 form.kesstermine button { color: #E0091D; }
.kess9 h2 { text-transform:uppercase; color: #E0091D; margin:15px 15px 5px 15px; }

a.soundbutton,
a.is-playing,
a.not-playing,
div.audioknopf { width:50px;height:50px;
float:right;
background-image: url('ek_audio6.svg');
background-repeat: no-repeat;
background-position: center center;
background-color:transparent;
border:none;
content: "";
cursor:pointer;
}
div.lieberlesen { width:50px;height:50px;
float:right; margin-left: 10px;
cursor:pointer;
}


body.stufe5 table.beispiele td p { color:#a64872; }
body.stufe6 table.beispiele td p { color:#3278b4;margin-top:0px; }

/* Fadeinmodals */

.fadeinmodal { 
margin-top:10px;    
pointer-events: auto;
background-color: #f44;
border: 1px solid rgba(0,0,0,.2);
border-radius: .75rem;
outline: 0;
background-image: url('../../media/wolkebgmodal.svg');
background-position: bottom -5vH center;
background-repeat: no-repeat;
background-size:105%;
}
.fadeinmodal.blue { 
margin-top:10px;    
pointer-events: auto;
background-color: #3278b4;
border: 1px solid rgba(0,0,0,.2);
border-radius: .75rem;
outline: 0;
background-image: none;
background-position: bottom -5vH center;
background-repeat: no-repeat;
background-size:105%;
}
.fadeinmodal.start { 
margin-top:10px;    
pointer-events: auto;
background-color: var(--text-red);
border: 1px solid rgba(0,0,0,.2);
border-radius: .75rem;
outline: 0;
background-image: none;
background-position: bottom -5vH center;
background-repeat: no-repeat;
background-size:105%;
}

body.stufe6 .fadeinmodal.blue h2 { color: #FFF; }

body.stufe1 .fadeinmodal {background-image: url('../../media/wolkebgmodal1.svg');}
body.stufe2 .fadeinmodal {background-image: url('../../media/wolkebgmodal2.svg');}
body.stufe3 .fadeinmodal {background-image: url('../../media/wolkebgmodal3.svg');}
body.stufe4 .fadeinmodal {background-image: url('../../media/wolkebgmodal4.svg');}
body.stufe5 .fadeinmodal {background-image: url('../../media/wolkebgmodal5.svg');}
body.stufe6 .fadeinmodal {background-image: url('../../media/wolkebgmodal6.svg');}
body.stufe7 .fadeinmodal {background-image: url('../../media/wolkebgmodal7.svg');}
body.article-105 .fadeinmodal, body.article-108 .fadeinmodal {
background-image: url('../../media/modalbglandschaft.jpg');
background-size:100%;
background-position: bottom -1vH center;
}
body.stufe6 .fadeinmodal.blue {background-image: none;}
body.stufe3 .modal-backdrop.show { opacity: .2; }
#results { margin-bottom:10px; }

.fadeinmodal h2 { margin: 14px 0; }
.fadeinmodal h3 { color:#0a0a0a; }


body.stufe1 .fadeinmodal h2, body.stufe1 .fadeinmodal a { color: var(--stufe1d); }
body.stufe2 .fadeinmodal h2, body.stufe2 .fadeinmodal a { color: var(--stufe2); }
body.stufe4 .fadeinmodal h2, body.stufe4 .fadeinmodal a { color: var(--stufe4); }
body.stufe5 .fadeinmodal h2, body.stufe5 .fadeinmodal a { color: var(--stufe5); }
body.stufe6 .fadeinmodal h2, body.stufe6 .fadeinmodal a { color: var(--stufe6); }
body.stufe7 .fadeinmodal h2, body.stufe7 .fadeinmodal a { color: var(--stufe7); }
.mcontent { padding:35px 25px 25px; }
#videoModal .mcontent { padding:5px; }
.mcontent.ende { padding-top:0px; }
.btn.btn-secondary { padding: .75rem 2.5rem; }
body.stufe1 .fadeinmodal a.btn-secondary,
body.stufe2 .fadeinmodal a.btn-secondary,
body.stufe3 .fadeinmodal a.btn-secondary,
body.stufe4 .fadeinmodal a.btn-secondary,
body.stufe5 .fadeinmodal a.btn-secondary,
body.stufe6 .fadeinmodal a.btn-secondary,
body.stufe7 .fadeinmodal a.btn-secondary { color:#FFF !important; }


.fadeinmodal .btn-close { position:absolute; right:-10px;top:-10px;color: #000;
    background: #FFF url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;z-index:2000;
     }


/* Accordion */

.accordion-header { border-bottom:1px solid #FFF; margin-bottom:15px; }
.accordion-button { padding: 0rem; }
.accordion-button a { 
display:block;
width:80%;
font-size:1.2rem;
font-weight:400;
line-height:1.2em; 
margin-top:1rem; 
color:#FFF !important; 
text-transform:uppercase;
height: auto;
padding: 0 0 1rem 0;
width:100%;
}
.accordion.botschaften { }
.accordion.vvvv { }

.accordion.zipper a span,
.accordion.vvvv a span {
display:block;
width:auto;
height:1.5rem;
position:relative;
top:-0.5rem;
float:left;
font-size: 200%;
font-weight:700;
color: #FFFFFF;
}

.accordion.zipper a span { padding-right:5px; }

table.weissfeld td span {
display:block;
width:auto;
height:1.5rem;
position:relative;
top:-26px;
float:left;
font-size: 40px;
font-weight:700;
color: #3278b4;
}

body.article-3 .main.mb-auto { padding-bottom: 0px;}

#accordion-datenschutz .accordion-button { 
display:block;
width:80%;
font-size:1.1rem;
font-weight:700;
line-height:1.2em; 
margin-top:1rem; 
color: var(--text-dark);
height: auto;
padding: 0 0 1rem 0;
width:100%;
}
#accordion-datenschutz .accordion-body { padding:0; }
body.article-3 section.pt-5 { padding-top:0 !important; }
#accordion-datenschutz{ margin-bottom:10em;}

/* Listen */

body.stufe1 .form-check-input:checked[type="checkbox"], 
body.stufe1 .form-check-input:checked[type="radio"],
body.stufe1 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe1);
}
body.stufe2 .form-check-input:checked[type="checkbox"], 
body.stufe2 .form-check-input:checked[type="radio"],
body.stufe2 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe2);
}
body.stufe3 .form-check-input:checked[type="checkbox"], 
body.stufe3 .form-check-input:checked[type="radio"],
body.stufe3 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe3);
}
body.stufe4 .form-check-input:checked[type="checkbox"], 
body.stufe4 .form-check-input:checked[type="radio"],
body.stufe4 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe4);
}
body.stufe5 .form-check-input:checked[type="checkbox"], 
body.stufe5 .form-check-input:checked[type="radio"],
body.stufe5 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe5);
}
body.stufe6 .form-check-input:checked[type="checkbox"], 
body.stufe6 .form-check-input:checked[type="radio"],
body.stufe6 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe6);
}
body.stufe7 .form-check-input:checked[type="checkbox"], 
body.stufe7 .form-check-input:checked[type="radio"],
body.stufe7 .form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
background-image: none; background-color: var(--stufe7);
}

.list-group {margin-bottom: 10px;}
.form-check {margin-bottom: 1px;}
.list-group-item {border: none;}
.list-group label { font-size:1.0rem;font-weight:bold;line-height:1.4em; }

ul.list-group.daumenhoch li.list-group-item {
background-image: url('../../media/ek_daumenhoch2.svg');
background-repeat: no-repeat; 
background-position: 10px center;
background-blend-mode: lighten;
}
ul.list-group.daumenrunter li.list-group-item {
background: #ffffff url('../../media/ek_daumenrunter2.svg') no-repeat 10px center;
background-blend-mode: lighten;
}
ul.list-group.kesslogo li.list-group-item {
background: #ffffff url('../../media/ek_kess.svg') no-repeat 10px center;
background-blend-mode: lighten;
}

ul.list-group.daumenhoch li.list-group-item,
ul.list-group.daumenrunter li.list-group-item,
ul.list-group.kesslogo li.list-group-item   {
min-height:49px;
background-size:35px;
padding: .5rem;
padding-left:55px;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
display: flex !important;
align-items: center !important;
}

ul.list-group.checklist li.list-group-item   {
padding-left:35px;
}




/* Accordion wie Liste */
.accordion.verhalten .accordion-header {
margin-bottom: 1px;
border-bottom: 0px solid #FFF;
}
.accordion.verhalten a { color: #0a0a0a; }

.accordion.verhalten .list-group-item {
background-color: #ffffff;
background-image: url('../../media/ek_kess.svg');
background-repeat: no-repeat;
background-position:  10px center;
background-blend-mode: lighten;
}
.accordion.verhalten .list-group-item   {
min-height:49px;
background-size:35px;
padding: .5rem;
padding-left:55px;
font-size:14px;
font-weight:bold;
display: flex !important;
align-items: center !important;
}

.accordion.verhalten #heading-One a.list-group-item {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}
.accordion.verhalten #heading-Four a.list-group-item {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
.accordion.verhalten .list-group-item {
    color: #0a0a0a;
}



.form-check:not(.form-switch) .form-check-input[type=checkbox], .form-check:not(.form-switch) .form-check-input[type=radio] {
border: 1px solid #cbd3da; background-color:#f6f6f6;
}
.form-check:not(.form-switch) .form-check-input[type=checkbox]:checked:after {
border-radius: .35rem;
}


.form-switch .form-check-input::after {
transition: transform .25s ease-in-out,background-color .25s ease-in-out;
content: "";
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
position: absolute;
background-color: #fff;
transform: translateX(1px);
box-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
top: 1px;
}

.form-switch .form-check-input {
border: 1px solid #e9ecef;
position: relative;
background-color: rgba(170, 180, 170, .3);
height: 1.5em;
width: 3.5rem;
}
.form-switch .form-check-input:checked::after {
transform: translateX(28px);
}
.form-switch .form-check-input:checked {
border: 1px solid #e9ecef;
}
.form-check-label { font-size: 1rem; font-weight: 400; }

.clearable-input {
  position: relative;
  width:100%;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > span::after {
  content: "Speichern";
  position: absolute;
  top:10%;
  right: 4px;
  height:80%;
  font-weight: bold;
background-color: rgb(154, 167, 164);
  font-size: 1.0em;
  line-height:2em;
  padding: 0 0.2em;
  cursor: pointer;
  border-radius:5px;
}
.clearable-input span { opacity:0.4; }
.clearable-input span.opfull { opacity:1.0; }
.clearable-input span.okbut { opacity:1.0; }
.clearable-input span.okbut::after {
opacity:1.0;
font-family: 'ElegantIcons';
  content: "\4e";
line-height:1.1em;
  width: auto;
  height: auto;
  display: inline-block;
  color: #57b5aa;
  font-size: 0rem;
  margin: 0 auto;
  pointer-events: none;
  transition: .5s all ease;
background: none;
}

.clearable-input span.okbut::after {
  font-size: 2rem;
}

.rangeslider { margin-bottom:20px; }
.rangeslider .float-start,.rangeslider .float-end { font-style:italic;opacity:0.7; }
.range2nd h2 { margin-top:10px; }
.range2nd h2:not(:first-child) { margin-top:30px; }






/* oben */
.header { display:block; padding:0 20px 30px 20px; }
.modal-backdrop.show {opacity: .5;}
.header svg { vertical-align: top; }
.header .einheiten { padding-top:40px; }
.header .buttonright { padding-top:38px; }
.header .einheiten a, .btn.bottom a { letter-spacing:1px; font-size:0.8rem; }
button.navbar-toggler { margin:0 !important; padding:0 !important; }
.navbar { box-shadow:none;padding-top: 0rem; }
.navbar-collapse { border-radius: 5px; border-bottom:2px solid var(--default); position:relative;top:0;padding:20px;}
.navbar-brand { 
position: relative;
right:5px;
top:30px;
z-index: 999;
padding:0;margin:0;float:right;
}
.navbar-brand img { width:60px; }
.navbar-toggler img { width:80px; }
.navbar-toggler { position:relative; top:0; left:0; border: 0px solid transparent; }
.navbar .nav-link, .navbar .navbar-brand {
color: #252f40;
font-size: 1.3rem;
}

/* Inhalt: Video video-js Overwrite */

#my-video { width:100%; }
.vjs-poster { opacity:0.3; }



/* *******************************************************
Inhalt
******************************************************** */



.button-ru { cursor:pointer; }
.button-ru .schatten { position:absolute;right:80px;bottom:20px; }

/* *******************************************************
Timer, Countdown
******************************************************** */

#countdown {
position: absolute;
left: 50%;
top: 50%;
display: inline-block;
transform: translate(-50%, -50%);
transition: 1s;
font-size: 0vw;
opacity: 50%;
color: #040; 
}



/* *******************************************************
Cards
******************************************************** */




body.article-16 .card.default { background-image: url('../../media/hgkreis0.svg'); }
body.article-16 .card.stufe1 { background-image: url('../../media/hgkreis1.svg'); }
body.article-16 .card.stufe2 { background-image: url('../../media/hgkreis2.svg'); }
body.article-16 .card.stufe3 { background-image: url('../../media/hgkreis3.svg'); }
body.article-16 .card.stufe4 { background-image: url('../../media/hgkreis4.svg'); }
body.article-16 .card.stufe5 { background-image: url('../../media/hgkreis5.svg'); }
body.article-16 .card.stufe6 { background-image: url('../../media/hgkreis6.svg'); }
body.article-16 .card.stufe7 { background-image: url('../../media/hgkreis7.svg'); }

body.article-16 .card.bildlinks, body.article-16 .card.bildrechts {
background-repeat: no-repeat;
background-size: auto 130%;
z-index: 2;
}


body.article-16 .card.bildlinks { background-position: top 20px left -100px; }
body.article-16 .card.bildrechts { background-position: top -30px right -90px; }


.card .col-sm-4 { padding:45px 25px; }
.card.bildlinks .col-sm-8 { padding-top:20px; }
.card.bildrechts .col-sm-4 { padding:45px 45px 45px 5px; }
.card.bildrechts .col-sm-8 { padding-left:20px;padding-top:20px; }


.card.stufe1 h2, .card.stufe1 h2 a, .card-block.stufe1 .col-10 h2 a  { color: var(--stufe1); }
.card.stufe2 h2, .card.stufe2 h2 a, .card-block.stufe2 .col-10 h2 a  { color: var(--stufe2); }
.card.stufe3 h2, .card.stufe3 h2 a, .card-block.stufe3 .col-10 h2 a  { color: var(--stufe3); }
.card.stufe4 h2, .card.stufe4 h2 a, .card-block.stufe4 .col-10 h2 a  { color: var(--stufe4); }
.card.stufe5 h2, .card.stufe5 h2 a, .card-block.stufe5 .col-10 h2 a  { color: var(--stufe5); }
.card.stufe6 h2, .card.stufe6 h2 a, .card-block.stufe6 .col-10 h2 a  { color: var(--stufe6); }
.card.stufe7 h2, .card.stufe7 h2 a, .card-block.stufe7 .col-10 h2 a  { color: var(--stufe7); }
.card-block.lesez .col-10 h2 a  { color: var(--text-red); }

/* Wendekarten */

.card .front { background: url('/media/panel-bg.jpg');border-radius: 1rem; background-size: cover; }
.card .back { background: url('/media/panel-bg2.jpg');border-radius: 1rem; background-size: cover; }
.card .flip-btn, .card .unflip-btn { font-size:2.8em; float:right;  margin-right:20px;font-weight:bold; }
.card .card-body { min-height:120px; display:block; margin-right:0; padding-right:0rem !important; }
.card-block { border-radius: .5rem; background-color:#FFF; margin:0 0 15px;}
body.article-15 .card-block, body.article-149 .card-block, body.article-20 .card-block { padding: 5px 10px; }
.card-block .col-2 { padding:10px;width: 18%;}
.card-block .col-10 { width: 82%; }
.card-block .col-10 h2 { margin:4px 0;}

.card .front h2,
.card .back h3 { font-size: 1.2rem; line-height:1.3em; font-weight: 700; color: #0a0a0a; margin-top:5px; }

.card .front h2.versal-title,
.card .back h2.versal-title { text-transform:uppercase; color:#ff6600; margin-top:0; }
p.daniel { font-family: 'Daniel', 'jennasue'; margin: 20px 0 5px !important;}
.card .front p.daniel { font-size:1.5rem !important;}
.card .back p.daniel { font-size:1.2rem !important;}
body.article-31 .card .flip-btn a, 
body.article-31 .card .unflip-btn a { color:#ff6600 !important; position:absolute; right:10%; }
body.article-31 .card .card-body { padding-top:2.5rem; padding-bottom:0.5rem; }
body.article-31 .card .card-body .btn-mini { margin-top:0;  }
body.article-31 .card .card-body .btn { margin: 5px 15px 15px 10px; float:right;  }
body.article-31 .card .front, body.article-31 .card .back { background: rgba(255, 102, 0, 0.2); }
body.article-31 .card td img { max-height:220px;float:right; }
body.article-31 .fadeinmodal .btn-close { position:absolute; right:10px;top:10px; background-color:transparent; }
body.article-31 .fadeinmodal { background-color:#ff791f !important; background-image:none; margin-bottom:50px; }
body.article-31 .fadeinmodal p { font-size:0.9rem;line-height:1.2rem;color:#FFF; }
body.article-31 .fadeinmodal h2 { color:#FFF;text-transform: uppercase; margin-top: 0; }

/* List Kurse */
body.article-156 .card-block { padding-top:10px; }

/* *******************************************************
Range Slider
******************************************************** */



input[type=range] {
  width: 100%;
  margin: 10.5px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #ffffff;
  border: 0;
  border-radius: 11px;
  width: 100%;
  height: 9px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -10.5px;
  width: 30px;
  height: 30px;
  background: #d63384;
  border: 7px solid #e8e2eb;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  background: #ffffff;
  border: 0;
  border-radius: 11px;
  width: 100%;
  height: 9px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  background: #d63384;
  border: 7px solid #e8e2eb;
  border-radius: 50px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 11.5px 0;
  color: transparent;
  width: 100%;
  height: 9px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0;
  border-radius: 22px;
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
  border: 0;
  border-radius: 22px;
}
input[type=range]::-ms-thumb {
  width: 30px;
  height: 30px;
  background: #d63384;
  border: 7px solid #e8e2eb;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}
.form-range:disabled::-moz-range-thumb {
    background-color: #d087ab;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}




/* *******************************************************
Draggable
******************************************************** */

.alert-secondary {
cursor:pointer;
}

#board {
width: 100%;
height: 160px;
position: relative;
margin-bottom:20px; 
}  

/* totale mitte */
.drag-item {
position: absolute;
top: 50%;
left: 50%;
display:flex;
justify-content: center !important;
align-items: center !important;
text-align:center;
width: 100%;
height: auto;
min-height: 150px;
border-radius: .5rem;
padding: 30px 1rem;
box-shadow: 0px 4px 4px 0px rgba(176, 176, 176, 0.2);
background-color: rgba(255, 255, 255, 1);
background: url('/media/panel-bg2.jpg');
background-size: cover;
transform: translateX(-50%) translateY(-50%) scale(0.95);
font-size: 1.2rem; line-height:1.3em; font-weight: 700; color: #0a0a0a;
cursor:pointer;
}


.rotateimg0, rotateimg90 {
-webkit-animation-name: rotate; 
-webkit-animation-duration: 4.5s; 
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}


/* *******************************************************
Startseite Carousel
******************************************************** */


.startseite h1 { color: var(--text-red); font-size:1.7rem; line-height:2.2rem; margin-bottom:1rem; }
.startseite .subtitle a { color: var(--text-red); font-size:1.7rem; font-weight:normal; line-height:2.2rem; margin-bottom:1rem; }
#startcarousel img { max-height:40vH; margin: 15px 0; }
#startcarousel h3 { font-size:1.1rem;  line-height:1.7rem; color: var(--text-dark); font-weight:normal; }
#startcarousel p { font-size:1.1rem; line-height:1.7rem; color: var(--text-red) }
#startcarousel, #endcarousel { padding-bottom:50px; }
#endcarousel img { max-height:100px; margin: 10px 0 0 0; }
.carousel-indicators [data-bs-target] {
    border-radius: 50%;
    width: 12px;
    height: 12px;
}
.carousel-indicators .active {
    opacity: 1; background-color: var(--text-red);
}
.startseite .carousel-control-prev,
.startseite .carousel-control-next,
body.article-146 .carousel-control-prev,
body.article-146 .carousel-control-next { display:none; }
.fade5 { transition: transform 5s ease-in-out; }

#startcarousel .col.float-end { padding-right:0; }
#startcarousel .col-3.float-start { padding-left:0; padding-top:50px; text-align:left; }
#startcarousel .col-3.float-start img { margin: 5px 0; }

#startbutton, #readbutton { display:block; height:auto;cursor:pointer; }

#resetbutton, #rueckbutton { display:block; max-height:50px; width:auto; cursor:pointer; margin-left:20px;float:left; }
a#resetbutton, a#rueckbutton  { display:block; text-align:center; font-size:12px; font-weight: 400; }
#resetbutton img, #rueckbutton img { width: 2.3em; height:auto; }


.flipwrapper {
width: 76px;
height: 76px;
transform-style: preserve-3d;
margin-bottom: 1.8rem;
z-index:2000002;
}
.flipfront, .flipback {
  display: flex;
  width: 80px;
  height: 80px;
  text-align: center;
  justify-content: center;
  backface-visibility: hidden;
}

body.article-1 #startcarousel { overflow:visible; }
.flipwrapper > #startbutton { margin-bottom: 4rem; }


.flipfront {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.flipback {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  color: #fff;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}

#photoCarousel .carousel-control-prev { justify-content: left; }
#photoCarousel .carousel-control-next { justify-content: right; }




/* *******************************************************
Animationen
******************************************************** */

.title .line {
position: relative;
display: block;
text-align: left;
width: 100%;
height: 70px;
margin-bottom:5px;
} 

.title .line .rubrik {
position: absolute;
right:-300px;
margin-bottom: 1rem;
width: 20px;
height: 60px;
text-align: center;
font-size: 1em;
} 

.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}

.delay2 {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 1.0s;
    animation-fill-mode: forwards;
}
.delay3 {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
.delay5 {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
.delay10 {
    opacity: 0;
    animation: fadeIn 1s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes backgroundIn {
    from { background-blend-mode: lighten; }
    to { background-blend-mode: normal; }
}


/* *******************************************************
Termine
******************************************************** */

ul.kursliste .btn-sm { padding: .3rem 1rem; float:right; margin-top:8px; }
ul.kursliste li.card-block p { margin-bottom:0px; margin:0;}
ul.kursliste li.card-block h3 {}
ul.kursliste li.card-block p.dachzeile { margin-bottom:0; font-size:0.9rem; text-transform: uppercase;}
ul.kursliste li.card-block p.datum { margin-bottom:0;font-weight:bold; }
ul.kursliste li.anfang h3 { color: #F9B200; }
ul.kursliste li.kess h3 { color: #E0091D; }
ul.kursliste li.puber h3 { color: #89BA17; }
ul.kursliste li.staunen h3 { color: #0080BA; }
ul.kursliste li.hand h3 { color: #EC7405; }
ul.kursliste li.allein h3 { color: #6572a6; }
ul.kursliste li.migration h3 { color: #f6931e; }
ul.kursliste li.handicap h3 { color: #01abbd; }
ul.kursliste li.kids h3 { color: #E0091D; }

@media screen and (max-width:992px){
#fullwrapper { padding-top: env(safe-area-inset-top); }
#footer { padding-bottom: env(safe-area-inset-bottom); }
}


/* *******************************************************
Responsive
******************************************************** */


@media all and (min-width: 320px) {  
.header img { width:70%;max-width:100px; }
.header .navbar-brand img { float:right;margin-right:15px;width:60%; }
.startseite h1 { color: var(--text-red); font-size:1.6rem; line-height:2.1rem; margin-bottom:1rem; }
.card .col-sm-4 { width:40%; }
.card .col-sm-8 { width:60%; }
.card.bildrechts .card-body { padding: 1.5rem 0 1.5rem 1rem; }
.card.bildlinks .card-body { padding: 1.5rem 1rem 1.5rem 0rem; }
.card.bildrechts .col-sm-4 { padding: 45px 30px 45px 0px; }
.card.bildlinks .col-sm-4 { padding: 45px 0px 45px 30px; }

p.alert-secondary { display:none; }
body.article-158 span.h1 { font-size:14px;}
footer .schatzk { 
background-image: url('../../media/halbkreis.svg');
position:relative; top:-2.2em;
width:6.4rem;height:5.4rem;
max-width:20vH; }

footer .schatzk img { padding:1.3em; }
footer .buttons { max-width:20vH; }
footer .buttons a { width:2.3em;height:2.3em; }
footer .buttons a.ms-4 { margin-left: 1.1rem!important; }
}

@media all and (min-width: 414px) {  
footer .buttons { max-width:17vH; }
body.article-158 span.h1 { font-size:1.2rem;}
}

@media all and (min-width: 576px) {  

.card .col-sm-4 { width: 33.333333%; }
.card .col-sm-8 { width: 66.666667%; }
.card.bildrechts .card-body { padding: 1.5rem; }
.card.bildlinks .card-body { padding: 1.5rem; }
.card.bildrechts .col-sm-4 { padding:45px 45px 45px 5px; }
.card.bildlinks .col-sm-4 { padding: 45px 5px 45px 45px; }

.startseite { padding: 0 2rem; }
.startseite h1 { color: var(--text-red); font-size:1.7rem; line-height:2.2rem; margin-bottom:1rem; }
#startcarousel .col.float-end img { max-height:60vH; margin: 30px 0; }
#startcarousel .col-3.float-start img { max-width:120px; margin: 30px 0; }



footer .schatzk { 
position:relative; top:-4.2em;
width:10rem;height:8rem;
max-width:30vH; }

footer .schatzk img { padding:2em; }
footer .buttons { max-width:30vH; }
footer .buttons a { width:2.6em;height:2.6em; }
footer .buttons a.ms-4 { margin-left: 1.5rem!important; }
body.article-158 span.h1 { font-size:1.4rem;}

.flipwrapper {
width: 120px;
height: 120px;
transform-style: preserve-3d;
margin-bottom: 4rem;
}
.flipfront, .flipback {
  display: flex;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-content: center;
  backface-visibility: hidden;
}

}


@media all and (min-width: 768px) {  


.header img { width:100%;max-width:100px; }
.drag-item { width: 60%;padding: 2rem; }
.row.kesse { margin-right: -15px; margin-left: -15px; }
.row.kesse .col { display: flex; flex-wrap: wrap; }
.row.kesse .container { padding-left:5px; padding-right:5px; }
.kess1, .kess2, .kess3, .kess4, .kess5, .kess6, .kess7, .kess8, .kess9 {
position: relative;
min-height: 1px;
margin-left:2.5%;
margin-right:2.5%;
width:45%;
float: left;
}

}

/* navi springt um */

@media all and (min-width: 992px) {



}

@media all and (min-width: 1200px) {

p.alert-secondary { display:block; }
}