/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* poppins-200 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/poppins-v20-latin-200.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v20-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v20-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v20-latin-200.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v20-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v20-latin-200.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-300 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v20-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v20-latin-300.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-regular - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v20-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-500 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
  }
  /* poppins-600 - latin */
  @font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/poppins-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/poppins-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/poppins-v20-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/poppins-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/poppins-v20-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
  }

  /*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-300 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
  }

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */


/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: regular;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
    width:100%;
}

[readonly] {
    opacity: 0.3!important;
}

.col-sm-1>.box,
.col-sm-2>.box,
.col-sm-3>.box,
.col-sm-4>.box,
.col-sm-5>.box,
.col-sm-6>.box,
.col-sm-7>.box,
.col-sm-8>.box,
.col-sm-9>.box,
.col-sm-10>.box,
.col-sm-11>.box,
.col-sm-12>.box {
    height: 100%;
}

:root {
    --background:#3B4B5B;
    --box-color:#4f5d6c;
    --radius:10px;
}



/* ==========================================================================
   Loginbereich
   ========================================================================== */

#login {display:flex;
justify-content: center;
align-items:center;
width:100%;
height:calc(100vh - 4em);}

#login > div {max-width:400px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background:var(--box-color);
    padding:3.5em;
    border:1px solid #fff;
    outline:10px solid var(--box-color);
width:100%;}

#loginlogo {max-width:150px;
    margin:0 auto 4em;
    width:100%;
display:block;}

#login .formfield {position:relative;}

#login .formfield label {font-size:1em;
text-transform: uppercase;}

.input-icon {position:absolute;
    color:var(--background);
bottom:0.5em;
left:0.5em;}

.input-icon + input.form-control {padding-left:1.5em;}

.form-group {margin: 1em 0;}

#login .btn-ohne,
#login .btn-primary {display:block;
    color:#fff;
    border:none;
    margin:0.5em 0;
    width:100%;
text-align: center;}

#login .btn-primary {background:var(--background);}

#login .btn-primary:hover {background: rgb(252,177,23);
    background: -moz-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcb117",endColorstr="#fc9217",GradientType=1);}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    padding: 2em;
    margin: 0;
    font-family: 'Open Sans';
    min-height: 100vh;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--background);
    font-weight: 400;
    font-size: 14px;
    color:#fff;
    padding-right:5em;
}

body::-webkit-scrollbar {
    display: none;
}

section {
    width: 100%;
}

a {
    text-decoration: none;
    color: #fff;
}

a i {margin-right:0.35em;}

a:hover {
    color: #fcb117;
}

h1 {
    color: #fcb117;
    text-transform: uppercase;
    font-size: 1.7em;
    padding-bottom:0.25em;
    margin-bottom:0.5em;
    font-weight: 400;
}

h2 {
    color: #fcb117;
    text-transform: uppercase;
    font-size: 1.3em;
    padding-bottom:0.25em;
    margin-bottom:0;
    font-weight: 400;
}

p {line-height:1.6;}

img {
    display: block;
    width: 100%;
    height: auto;
    max-width: max-content;
}


.btn-primary {
    background: rgb(252,177,23);
    background: -moz-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcb117",endColorstr="#fc9217",GradientType=1);
    font-size:1em;
    border:none;
    padding:0.5em 1.5em;
}

.btn-primary:hover {background:rgba(0,0,0,0.15)}


.btn-secondary {
    background: #333;
    font-size:1em;
    border:none;
    padding:0.5em 1.5em;
}

.btn-secondary:hover {background:#444}

.btn-dark {font-size:1em;
    border:none;
    background:var(--box-color);
    padding:0.5em 1.5em;}

.box .btn-dark,
.btn-dark:hover {
        background:rgba(0,0,0,0.15)}

.btn#reload {color:#fff;
margin-left:-1em;}

.btn#reload:hover {background:#444}

.alert {width:100%;
margin-top:0.5rem;}

.strong {font-weight:600;
color:#fcb117;}

/* =========================================================================
Spalten
==========================================================================*/
.einspalten {width:100%!important;}
.zweispalten {width:calc(50% - 0.25rem)!important;}


/* =========================================================================
Header 
==========================================================================*/
header {width:100%;
    position:sticky;
    top:-1;
    left:0;
    z-index:100;
    background:var(--box-color);
    text-align: center;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    border-radius:var(--radius);
} 

header.stick {margin-left:-2em;
    width:calc(100% + 4em);
    padding:0 2em;
    border-radius:0;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);    
}
  
#logo {padding:1em 1.5em;
    display:flex;
    align-items:center;
    gap:1em;
}

#logo p {
    font-size:1.15em;
    margin:0;
    padding-left:1em;
    border-left:1px solid #fff;
    text-transform: uppercase;
}

#logo img {width:auto;
    height:28px;}

nav {padding:1em 1.5em;
font-size:1em;}


nav > div > ul {padding:0;
list-style: none;
margin:0;}

nav > div > ul > li {display: inline-block;
padding:0 1em;}

nav > div > ul > li:not(:last-child) {border-right:1px solid var(--background)}


#abteilungselect + .nice-select {width:200px;
    border:none;
    background:rgba(0,0,0,0.1);
    border-radius: 10px;}

    #abteilungselect + .nice-select .list {
        width: 350px;
        right:0;
        left:unset}

/* Main ==================================*/

main {width:100%;
    position:relative;
    padding:0;
margin-top:0.5rem;}

main ul {list-style: none;
    padding-left:30px;}

main ul li {position:relative;
    margin-bottom:0.5em;
}

main ul li:before {
    content:"";
    background:url(../img/whatsNext_Icon.png) no-repeat;
    background-size: contain;
    width:10px;
    height:10px;
    position:absolute;
    left:-25px;
    top:6px;
  }

.box {
    width:100%;
    padding: 1.5em;
    background: var(--box-color);
    border-radius: var(--radius);
}

.linkbox {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:0.5rem;}

.card-header {padding:0;
background:none;
margin-bottom:1em;}

.zweispaltig {display:flex;
    justify-content: space-between;
    gap:5em;
width:100%;}

.zweispaltig .bilder + .bilder {margin-top:0.5rem;} 


.zweispaltig > div:first-child {width:100%;}

.zweispaltig > div:nth-child(2) {width:100%;
    max-width:500px;}

.contentwrap {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:0.5rem;
    width:100%;
}

.contentwrap > div:first-child {width:calc(100% - 450px - 0.5rem);}

.contentwrap > div:nth-child(2) {max-width:450px;
    width:100%;}

.contentwrap > div:nth-child(2) a {width:100%;}

.contentwrap > div:only-child {width:100%;}

.boxohne {padding:0;
    background:none;}

/* Formulare ==================================*/

form {
    width: 100%;
}

.form-row {display:flex;
    width:100%;
    gap:1rem;}

.form-row > div {
        width:100%;}

label {margin-bottom:0.3rem;
    font-size:0.8em;
    display:block;}

.formgroup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

textarea.form-control {min-height:200px;}

.formfield {
    margin-bottom: 1.75em;
}

.reg_label {display:block;}

input[type=file] {margin-top:0.5em;}

textarea.notiz {min-height:300px;}

/*==========  NEWS  ===============*/
#artikelhead {display:flex;
    width:100%;
    justify-content: space-between;
    border-bottom:1px solid var(--background);
    padding-bottom:0.5em;}

#artikelhead + * {
    margin-top:1.5em;}

#artikelhead h1,
#artikelhead p {padding:0;
    margin:0;}

.artikel + .artikel {margin-top:0.5rem;}

.artikel h2 {border-bottom: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 1rem;}

    .artikel h2 span {text-transform:none;
        color:#fff;
    display:block;
font-size:0.65rem;
margin-top:0.2rem;}


/*==========  Kacheln  ===============*/
#kacheln {display: flex;
    width:100%;
    flex-wrap: wrap;
    gap:1.5rem;
    margin-top:3.5rem;}

#kacheln > div,
#kacheln > div.dashspalten4 {
    padding: 1rem 1rem;
    background:var(--box-color);
    border-radius:var(--radius);
    max-width:calc(100% / 4 - 1.15rem);
    min-width:350px;
    width:100%;
    margin-bottom:1.5rem;
}

#kacheln > div.dashspalten1 {
    max-width:unset;
}

#kacheln > div.dashspalten2 {
    max-width:calc(100% / 2 - 1.5rem / 2);
}

#kacheln > div.dashspalten3 {
    max-width:calc(100% / 3 - 1.5rem / 3 - 10px);
}

#kacheln > div.dashspalten5 {
    max-width:calc(100% / 5 - 1.5rem / 5 - 15px);
    min-width:unset;
    font-size:0.85rem;
}

#kacheln > div.dashspalten6 {
    max-width:calc(100% / 6 - 1.5rem / 6 - 20px);
    min-width:unset;
    font-size:0.7rem;
}

#kacheln > div.dashspalten6 > a,
#kacheln > div.dashspalten5 > a {flex-wrap:wrap;
    justify-content: center;
    gap:0;}

#kacheln > div.dashspalten6 > a .text,
#kacheln > div.dashspalten5 > a .text {width:100%;
    text-align: center;}

#zusatz {margin-top:1rem;
    display:flex;
    align-items:center;
width:100%;}

#zusatz > span {width:200px;}

#kacheln h2 {pointer-events: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.3em;
    padding-bottom: 0.25em;
    margin-bottom: 0;
    font-weight: 400;
    width: 100%;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--box-color);
}

#kacheln > div > a {
    display:flex;
    width:100%;
    gap:1.5em;
    font-size:1.1em;
}

#kacheln > div > a .text {
    margin-top: 1.25rem;
}

#kacheln p {margin:0;
padding:0;}

#kacheln p.datum {font-size:0.7em;
margin-bottom:0.5em;}

.icon {
    background: #333;
    background: linear-gradient(135deg, #333 0%, #333 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#333", endColorstr="#333", GradientType=1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    min-width: 110px;
    width: 110px;
    height:110px;
    margin-top:-2.5rem;
    border-radius:var(--radius);
    padding:1.25em;
    display:flex;
    justify-content: center;
    align-items:center;
}

.icon img {padding:0.5em;}

.icon i {font-size:3em;
margin:0;}

a:hover .icon,
#kacheln > div.ungelesen a .icon {
    background: orange;
    background: linear-gradient(135deg, orange 0%, #ff7700 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffa500", endColorstr="#ff7700", GradientType=1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    color:#fff;
}

a:hover .text {
   color:#fff;
}

/*===============Checkliste =========================*/
.checklist {display:flex;
    align-items:top;
    width:100%;
    gap:1rem;
    padding:0.75em 0;
    border-bottom:1px solid var(--background);
    position:relative;}

.checklist:before {
    content:"";
    background:#fff;
    border-radius:5px;
    width:24px;
    height:24px;
    position: absolute;
}

.checklist input {
    width:25px;
    height:25px;
    opacity:0;
}

.checklist input + i {
   position:absolute;
   display:none;
   top:0.3em;
   left:0;
   font-size:2em;
   color:#fcb117;
   pointer-events: none;
   cursor: pointer;
}

.checklist input:checked + i {
    display:block;
 }

 .untergeordnet {padding-left:3em;}
 .untergeordnet input + i {left:1.5em;}

 #checkBox {display:flex;
    flex-wrap:wrap;
    gap:4em;
    width:100%;
}

#checkBox > div {
    width:calc(50% - 2em);
    min-width:500px;
}

#checkBox > div:only-child {
    width:100%;
    min-width:100%;
}

/*==========  Formular Dashboard  ===============*/
#formbar {margin-bottom:1em;}

#formbar form > div {display:flex;
    align-items:center;
    gap:1.5em;
    padding-right:1.5rem;
border-right:1px solid var(--background);}

#formbar form {display:flex;
        flex-wrap:wrap;
        width:100%;
        align-content:center;
        gap:1.5rem;
        margin:0;}

#formbar label {
            margin:0;}

.nice-select {width:100%;
height:35px;
color:#333;
line-height: 32px!important;}

.nice-select .current {color:#fff;}

#formbar .nice-select {min-width:200px;
border:none;}

#formbar .nice-select .current {color:#fff;}

#formbar .selector {width:100%;}

#content {display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:0.5rem;}

#content .box h2:not(:first-child) {margin:2em 0 0.5em;}
#content h2 {font-size:1.2em;}

#headerBild {
    width: 100%;
    height: 35vh;
    overflow: hidden;
    margin-top:0;
    border-radius:var(--radius);    
}

.box #headerBild {  
    margin-top:0;
    margin-bottom:1.5rem;
}

div#headerBild img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#anfrageContent {width:calc(100% - 600px - 2rem)}

#anfrageNext {min-width:400px;
    max-width:600px;
    width:100%;
}


.ck.ck-editor__main>.ck-editor__editable {height:300px;
color:#333;}


/* ================= ICON PICKER ==============================*/
.iconpicker .iconpicker-items {color:#333;}

.iconpicker-popover.popover {width:40vw!important;}

/*============= TIMELINE =========================*/
#dashHistory {
    position: relative;
    padding:1rem;
    height:100%;
}

#dashHistory:before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 35px;
    z-index: 0;
    background: #333;
}

.historyBox {
    display: flex;
    margin-bottom: 2.5rem;
}

.historyBox:last-child {
    margin-bottom: 0;
}

.historyText p {
    padding: 0;
    margin: 0;
}

.historyText p:last-child {
    font-size: 0.8em;
    opacity: 0.5;
}

.historyIcon {
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid var(--box-color);
    outline: 4px solid #fff;
    color: var(--box-color);
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1.3em;
    position: relative;
    z-index:1;
}


/* SLIDER ============================================== */
#slider {width:50px;
    background:var(--box-color);
    padding:1.35rem 0 1.35rem 1.35rem;
    position:fixed;
    top:0;
    right:0;
    z-index:1000;
    height:100vh;
    display:flex;
    transition: all 0.5s ease-in-out;}

#slider.show {width:500px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); 
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
transition: all 0.5s ease-in-out; }

#sliderBtn {height:100%;
    padding: 0.5rem 0;
    width:30px;
    min-width:30px;
    border-right:1px solid var(--background)}

#sliderBtn i:hover {color:#fcb117;
    cursor: pointer;}

#sliderContent {display:none;
    width:100%;
    padding:0.25rem 1rem;}

#slider.show #sliderContent {display:block;}

#fragen {height:100%;
    width:416.5px;}


 /* Ticketsystem ============================================== */   
#ticket {
    display: flex;
    gap: 5em;
    width: 100%;
    padding: 1.5em;
}

#ticket>div:first-child {
    flex: 0 0 350px
}

#ticket>div:last-child {
    flex: 1 1 100%;
}
      
/* ==================================================================
Suchfunktion
================================================================== */

.wnSuche {
    margin-bottom:1.5rem;
    display:flex;
    font-size:0.8em;
}

.wnSuche p {
    font-size: 1em;
    margin: 0 0 0 0.5rem;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wnSuche input {width:100%;
    border-radius:10px;
    border:1px solid #ddd;
    padding:0.5em 0.85em;
}

.wnSuche input:focus {
    outline: none;
    border-color: #aaa;
}


/* ==================================================================
ACCORDION / Aufklappmenüs
================================================================== */
.accordion-item {border:none;
    background:none;}

.accordion-body {
        padding: 0.5rem;
}

.accordion-header .accordion-button {background:var(--background);
        border-radius:10px;
        position: relative;
        color:#fff;
        text-transform: uppercase;
}

#content h2.accordion-header {margin-top:0;}

.accordion-header .accordion-button:hover {
    background:var(--background);
    }

.accordion-header .accordion-button:focus {box-shadow:none;}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {background-image: url(../img/arrow.svg);}

/* ==================================================================
ACCORDION / Aufklappmenüs - SLIDER
================================================================== */

#sliderContent .accordion-button {font-size:11px;}


#sliderContent .accordion-item {
    margin-bottom:0.5em;}

#sliderContent .accordion-button::after {display:none;
}

#sliderContent  .accordion-header .accordion-button {
    text-transform:none;
}

#sliderContent .accordionHeader  {display:flex;
justify-content: space-between;
margin-bottom:0.5em;}

#sliderContent .accordionHeader h2, #vokabelheft h2 {font-size:1em;
    font-weight:normal;
    text-transform: uppercase;}

#sliderContent .accordionHeader p {font-size:0.85em;
    cursor:pointer;
    margin:0;
    padding:0;}

#sliderContent .accordionHeader p:hover {color:#fcb117;}

#sliderContent .accordion-header {background:none;
    border:none;}
        .accordion-item:last-of-type .accordion-button.collapsed {border-radius:10px;}

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        #sliderContent .accordion-body {
        border-left: 1px solid #fcb117;
        margin: 1em 1em 1em 0;
        font-size:12px;
        padding: 0  0 0 1.5em;
    }
            #wnEintraege {height:calc(100vh - 4.5rem);
                overflow:hidden;}

                #wnEintraege .tab-pane > .wnSuche + div {overflow-y:scroll;
                height:calc(100% - 60px);
                -ms-overflow-style: none;
                scrollbar-width: none;}

                #wnEintraege .tab-pane > .wnSuche + div::-webkit-scrollbar {
                display: none;
            }

            #wnEintraege .formfield {margin:1.5em 0;
            width:100%;}

            #wnEintraege .formfield > div {display:flex;
                justify-content: space-between;
                width:100%;}

            #wnEintraege .formfield > div > div {width:calc(100% / 2 - 0.5em)}

            #wnEintraege form {font-size:0.9em;}

            #wnEintraege form p {margin:0;
            padding:0;
        opacity:0.5;}

            #wnEintraege .formfield input {border-radius:7px;
                margin-top:0.5em;
                width:100%;
                border:1px solid #ddd;
            padding:0.5em;}

            #wnEintraege .formfield input:focus {outline:none;}

            .maincontent {
            padding:0.5em 1.5em 1.5em 1.5em;
            height:100%;}

                select {
                    outline: 0;
                    box-shadow: none;
                    padding: 0.5em 0.3em;
                    color: #fff;
                    background-color: var(--background);
                    background-image: none;
                    cursor: pointer;
                    border-radius: 5px;
                    font-size: 0.8em;
                    width: 130px;
                }

                .tab-content, .tab-pane {height:100%;}

                .morelink {color:#fcb117;
                cursor:pointer;}

/* ==================================================================
Slider Tabellendesign
================================================================== */

.sTabelle {width:100%;}

.sTabelleneintrag {
border-bottom:1px solid var(--background);
font-size:0.7em;
width:100%;}

.sTabelleneintrag:hover {background:var(--background);}

.sTabelleneintrag > td p {margin:0;
padding:0;}

.sTabelleneintrag > td:first-child {width:40%;
    font-weight: 600;
    padding:1em 1.5em 1em 0.5em;}

.sTabelleneintrag > td:last-child {width:60%;
padding:1em 0.5em;}

.sTHeader {display:flex;
    justify-content: space-between;
    margin-bottom:1em;}

/* ==================================================================
TABS bzw. Reiter
==================================================================*/                   
.nav-tabs {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-start;
padding-left: 0;
margin-bottom:1.5em;
border:none;
}
.nav-tabs > li {
list-style-type: none;
}
.nav-tabs > li  > button {
text-transform: uppercase;
}

.nav-tabs .nav-link {border-radius: 0;
position: relative;
color:#fff;
padding: 0.5em 1.25em;
font-size: 0.8em;}

.nav-tabs .nav-link:after {content:"";
position:absolute;
height:15px;
width:2px;
background:var(--box-color);
top:0.6em;
right:0;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent;
    color:#fff;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color:#fff;
font-weight:800;
border:none;
background:none;}

.nav-tabs .nav-link.active {color:#fcb117;}

/*.nav-tabs .nav-link.active:before {
    content:"";
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent var(--box-color) transparent;
    position:absolute;
    bottom:-3px;
    left:calc(50% - 7px);
}*/

#tabnav {
background:var(--background);
border-radius:var(--radius);
width:100%;}

#subtabnav {
    background:var(--background);
    border-radius:var(--radius);
    width:100%;}

/* ==================================================================
Leitfaden Aufbau
==================================================================*/     

#leitContent {display:flex;
    width:100%;
    gap:0.5rem;}

#leitContent > #vorbereitung {
    width:100%;
    max-width:450px;}

#leitfaden {width:100%;
}

#dropdownSelected {display:none;}

.tipp {
position: relative;
margin: 2rem 0;
}

.tipp:first-child {margin-top:0;}
.tipp:last-child {margin-bottom:0;}

.action {width:calc(50% - 1em);
cursor:pointer;
position:relative;
margin: 1rem 0;
}

.action:hover .actiontext {
    background: rgb(252,177,23);
    background: -moz-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    background: radial-gradient(circle, rgba(252,177,23,1) 0%, rgba(252,146,23,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcb117",endColorstr="#fc9217",GradientType=1);
    color:#fff;           
}

.actionbuttons {display:flex;
    justify-items: center;
    flex-wrap:wrap;
    justify-content: space-between;
    gap:1em;}

.tipptext, .actiontext {background:var(--background);
border-radius:10px;
margin-left:17px;
padding:1em 1em 1em calc(1em + 17px);
display:flex;
justify-content: center;
align-items:center;
text-align: center;
}

.actiontext {background:#fff;
color:#333;
text-align:left;
text-transform:uppercase;
min-height:unset;}


.tipptext p,
.actiontext p {margin:0;
width:100%;}

.tippicon,
.actionicon {position:absolute;
left:0;
top:calc(50% - 17px);
border:2px solid var(--box-color);
color:#fff;
background:var(--background);
width:34px;
height:34px;
display:flex;
justify-content: center;
align-items:center;
border-radius:100%;
}

.actionicon {border-color:var(--box-color);
    background:#fff;
    color:var(--background)
    }

.action.back {padding:0;
margin:0;
text-align: center;
width:100%;
position: relative;}

.action.back:before {content:"";
width:100%;
height:1px;
background:var(--background);
position: absolute;
top:18px;
left:0;
}
    

.action.back p {padding:0.5em;
    margin:0 auto;
    display:inline-block;
    background:var(--box-color);
position: relative;
z-index:1;}

.action.back:hover {color:#fcb117;}

.telefonat {display:none;}

.telefontext {
    /*background: var(--background);
    padding: 1em;*/
    border-radius: 10px;
    margin-bottom: 1.5em;
}

.telefonat.active {display:block;}

/* ==================================================================
          Tonalitäten
          ================================================================== */
          #ton > div {display:flex;
          } 

          #ton > div > div:first-child {width:120px;
          } 

          #ton > div > div:first-child i {margin-right:0.3em;} 

          #ton p {margin:0.25em 0;}

          .tonRot {color:#f7133e;}
          .tonOrange {color:#f89200;}
          .tonLila {color:#c913f7}
          .tonSchwarz {color:#000;}
          .tonGruen {color:#21ad2a;}
          .tonBlau {color:#00cfe2;}

          .reaktion {font-style: italic;
                position: relative;
            }

          .reaktion span {background:var(--box-color);;
            position:relative;
            z-index:1;
            padding-right:0.5em;
          }

          .reaktion span:before {color:#fcb117;
              font-family: "Font Awesome 5 Free";
              font-style: normal;
              font-weight: 900;
              content: "\f101";
              margin-right:0.5em;
          }

          .reaktion:before {content:"";
            height:1px;
            width:100%;
            background:var(--background);
            position:absolute;
            bottom:0.5em;
            left:0;
          }



/* ==================================================================
    NICE SELECT
    ================================================================== */
#fragen .nice-select {
    width: 150px;
    height: 25px;
    line-height: 25px!important;
    font-size: 0.7em;
    background: #fff;
    color: #333;
    border: none;
}

#fragen .nice-select .current {
    color: #333;
}  

#fragen .nice-select .list {
    background-color: var(--background);
    color:#fff;
}

#fragen .nice-select .option:hover, #fragen .nice-select .option.focus, #fragen .nice-select .option.selected.focus {
    background-color: var(--box-color);
}

/*===== Switch Schalter =====*/

.onoffswitch {
    display: inline-block;
    position: relative;
    width: 40px;
    margin-top: 0.2em;
}

.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.onoffswitch-label {
    margin: 0;
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 15px;
    padding: 0;
    line-height: 15px;
    border: 0px solid #FFFFFF;
    border-radius: 20px;
    background-color: #edf2f9;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.15);
}

.onoffswitch-label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: -2.5px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 22px;
    border-radius: 20px;
    box-shadow: 0 0px 0px 1px #aaa;
}

.onoffswitch-checkbox:checked+.onoffswitch-label {
    background-color: #FCB117;
}

.onoffswitch-checkbox:checked+.onoffswitch-label,
.onoffswitch-checkbox:checked+.onoffswitch-label:before {
    border-color: #FCB117;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label:before {
    right: 2px;
    background-color: #FFFFFF;
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}


/*================  Abstimmungen ======================*/
.abstimmung {margin-bottom:0.5rem;
    display:flex;
}


@media all and (min-width:900px) {
.abstimmung > *:first-child {width:100%;
    padding-top:0.75rem;
    max-width:350px;
    min-width:350px;
}

.abstimmung > *:last-child {width:100%;
}
}

.abstimmung > div > div {display:flex;
    align-items: center;
    background:rgba(0,0,0,0.1);
    padding:0.5rem 1rem;
    border-radius: var(--radius);
    margin:0.5rem 0;
    width:100%;}

.abstimmung > div > div  h2,
.abstimmung > div > div  p {margin:0;}

.abstimmung > div > div > div  {display:flex;
width:100%;}

.abstimmung > div  > div > div:nth-of-type(2) {max-width:260px}

.abstimmung > div > div > div > div {max-width:130px;
    position: relative;
    align-items: center;
    gap:1rem;
    display:flex;
    width:100%;
    text-align: center;}

.abstimmungErgebnis {background:var(--box-color);
    font-size:0.8rem;
    padding:0.25rem 1rem;
    border-radius: var(--radius);}

.abstimmung label {font-size:1.3rem;
    pointer-events: none;}

.abstimmung input {opacity:0;
    cursor:pointer;
    z-index:1;
    left:0;
    top:0;
    width:20px;
    height:20px;
    position: absolute;}

.stimme:checked + label {
    color:#fcb117;
}


/*================  STEPS LEITFADEN ======================*/
#leitfadenDashboard {
position: relative;
display:flex;
flex-wrap:wrap;
gap:3rem;}


#leitfadenDashboard .steps {margin-top:3em;
position:relative;
z-index:1;
cursor:unset}

#leitfadenDashboard .steps:first-of-type {
    margin-top:0.5rem;
}

#leitfadenDashboard .steps:not(:first-of-type):before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f175";
position:absolute;
top:-1.75em;
left:calc(50% - 10px);
width:20px;
height:32px;
text-align: center;
color:rgba(0,0,0,0.3);
font-size:1.5em;}

.leitfadenContainer {width:calc(50% - 1.5rem);
    min-width:600px;}

#leitfadenDashboard .leitfadenContainer:only-child {width:100%;}

.zweispalten .leitfadenContainer {width:100%;
    min-width:unset;}

.steps {display:flex;
    align-items:center;
    width:100%;
    background:var(--background);
    color:#fff;
    border-radius:var(--radius);
    margin-bottom:0.5rem;
    padding:1em;
    cursor:pointer;
}

.steps.selected {background: linear-gradient(135deg, orange 0%, #ff7700 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#ffa500", endColorstr="#ff7700", GradientType=1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}

.steps > div:first-child {width:60px;
    text-align: center;
    font-size:2em;}

.steps > div:nth-child(2) {width:100%;
padding-left:1em;}

.steps > div:nth-child(3) {width:100%;
    max-width:250px;}

.steps > div:nth-child(3) a {width:100%;
        display: block;}

.steps > div:nth-child(3) a i {display:inline-block;
margin-right:0.5rem;}
    
.steps > div:nth-child(3) a + a  {margin-top:0.5rem;}

.steps .stepname {font-size:1.25em;
text-transform: uppercase;}

.steps p {margin:0;}

.deleteStep {width:30px;
cursor:pointer}

.deleteStep:hover {color:#fcb117;}

.mediadaten {
    display:flex;
    flex-wrap:wrap;
    gap:1em;
    width:100%;
}

.mediadaten h2 {width:100%;}

.mediadaten a {display:block;
    width:calc(33% - 0.5em);
padding:1em;
background:var(--background);
border-radius:var(--radius)}

/*==========  Rückmeldung Skripte  ===============*/

.alerts {
    background: #333;
    position: fixed;
    bottom: 1em;
    right: -20px;
    width: 400px;
    z-index: 9999;
    -webkit-animation: moveAlert 4s;
    -webkit-animation-fill-mode: forwards;
    pointer-events: none;
    transform: translateX(500px);
    color: #fff;
    border-radius: 15px;
    overflow: hidden;
}

@-webkit-keyframes moveAlert {
    from {
        -webkit-transform: translateX(500px);
    }
    10% {
        -webkit-transform: translateX(0px);
    }
    12% {
        -webkit-transform: translateX(0px);
    }
    16% {
        -webkit-transform: translateX(0px);
    }
    80% {
        -webkit-transform: translateX(0px);
    }
    85% {
        -webkit-transform: translateX(0px);
    }
    to {
        -webkit-transform: translateX(500px);
    }
}

@keyframes moveAlert {
    from {
        transform: translateX(500px);
    }
    10% {
        transform: translateX(0px);
    }
    12% {
        transform: translateX(0px);
    }
    16% {
        transform: translateX(0px);
    }
    80% {
        transform: translateX(0px);
    }
    85% {
        transform: translateX(0px);
    }
    to {
        transform: translateX(500px);
    }
}

.alerts .alert {
    position: relative;
    border: none !important;
    margin-bottom: 8px;
}

.alerts .alert .icon {
    position: absolute;
    margin-left: -15px;
    width: 80px;
    padding: 0;
    text-align: center;
    min-width: unset;
    height: unset;
    margin-top:0;
}

.alerts .alert .copy {
    margin-left: 45px;
    padding-left: 20px;
    line-height: 1.2;
}

.alerts .alert .copy h4 {
    font-size: 15px;
    font-weight: 200;
    margin-bottom: 5px;
    color: #fcb117;
    text-transform: uppercase;
}

.alerts .alert .copy p {
    font-size: 12px;
    margin-bottom: 0;
    line-height: 1.5;
}

.alerts .alert.alert-success {
    background-color: #333;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.alerts svg {
    width: 50px;
    display: block;
    margin: 0 auto;
}

.alerts svg polyline {
    stroke: #fcb117;
}

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

.path.circle {
    opacity: 0;
    -webkit-animation: dash 0.9s 0.95s ease-in-out;
    animation: dash 0.9s 0.95s ease-in-out;
}

.path.line {
    opacity: 0;
    stroke-dashoffset: 1000;
    -webkit-animation: dash 0.9s 0.15s ease-in-out forwards;
    animation: dash 0.9s 0.15s ease-in-out forwards;
}

.path.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check 1.4s 0.5s ease-in-out forwards;
    animation: dash-check 1.4s 0.5s ease-in-out forwards;
}

@-webkit-keyframes dash {
    0% {
        opacity: 0;
        stroke-dashoffset: 1000;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    0% {
        opacity: 0;
        stroke-dashoffset: 1000;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}

@keyframes dash-check {
    0% {
        stroke-dashoffset: -100;
    }
    100% {
        stroke-dashoffset: 900;
    }
}


/* ==================================================================
Media QUERIES
================================================================== */
@media all and (max-width:1400px) {
    .zweispaltig {flex-wrap: wrap;}
    .zweispaltig > * {width:100%!important;
        max-width:100%;
        margin:0 0 2em 0;}

    .mediadaten a {width:100%;}  
}


@media all and (max-width:1100px) {
    #kacheln > div {
        min-width:unset;
        max-width:unset;
    }

    .contentwrap > div:first-child,
    .contentwrap > div:nth-child(2) {width:100%;
        max-width: unset;}


    #kacheln > div.dashspalten1,
    #kacheln > div.dashspalten2,
    #kacheln > div.dashspalten3,
    #kacheln > div.dashspalten5,    
    #kacheln > div.dashspalten6 {
        max-width:100%;
        font-size:1rem;
    }
    
    #kacheln > div.dashspalten6 > a,
    #kacheln > div.dashspalten5 > a {flex-wrap:nowrap;
        justify-content: flex-start;
        gap:1.5rem;}
    
    #kacheln > div.dashspalten6 > a .text,
    #kacheln > div.dashspalten5 > a .text {
        text-align: left;}
    

    nav > div {display:none;}

    #formbar form > div {flex-wrap:wrap;        
        border:none;
        width:100%;}

    .abfrageradio,
    #leitContent > #vorbereitung,
    #contentBox > div,
    .action {width:100%;
        max-width:unset;}

    #leitContent,
    #contentBox {flex-wrap:wrap;}

    .col-6 {width:100%;}

    .zweispalten {width:100%!important;}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */


/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
    display: none !important;
}


/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
}


/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
}


/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}

.clearfix::after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media all and (max-width: 1024px) {
    #calendarBox {flex-wrap:wrap;}

    #personalCalender {width:100%;}

    #calendar .fc-day.feiertag:after {display:none!important;}

}



/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: #fff !important;
        color: #000 !important;
        /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]::after {
        content: " (" attr(href) ")";
    }
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
    /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}