:root {
    /* Basis-Schriftgröße und typografisches Verhältnis */
    --font-size-base: 1rem; /* 16px als Basis */
    --font-scale: 1.618; /* Goldenes Verhältnis */

    /* Responsive Schriftgrößen mit clamp() */
    --font-size-h1: clamp(1.25rem, 1rem + 2vw, 2rem);
    --font-size-h2: clamp(1.125rem, 0.95rem + 1.5vw, 1.75rem);
    --font-size-h3: clamp(1rem, 0.9rem + 1.2vw, 1.5rem);
    --font-size-h4: clamp(0.9rem, 0.85rem + 1vw, 1.25rem);
    --font-size-pli: clamp(0.875rem, 0.85rem + 0.8vw, 1.15rem);
    --font-size-small1: clamp(0.75rem, 0.725rem + 0.5vw, 1rem);
    --font-size-small2: clamp(0.6875rem, 0.65rem + 0.3vw, 0.85rem);
    --biublau1: rgb(68, 90, 129);
    --biublau2: rgb(40, 76, 97);
    --biublau3: rgb(66, 88, 94);
    --biublau4: rgb(1, 63, 95);
    --biublau5: rgb(18, 40, 53);
    --biugruen: rgb(18, 53, 49);
    --biuhgweiss: rgb(246, 245, 244);
    --biuicon: rgb(10, 70, 70);
    --biupetrol1: rgb(4, 92, 95);
    --biupetrol2: rgb(48, 98, 80);
    --biupetrol3: rgb(5, 61, 73);
    --biupetrol4: rgb(1, 43, 53);
    --biurot1: rgb(122, 26, 26);
    --biurot2: rgb(134, 40, 60);
    --biutext: rgb(4, 7, 37);
    --biuviolett1: rgb(105, 30, 83);
    --biuviolett2: rgb(49, 18, 52);
    --biuyellow: rgb(255, 212, 42);

    --biubg0: linear-gradient(
        45deg,
       rgba(68, 90, 129, 1) 0%,
       rgba(18, 40, 53, 1) 26%,
        rgba(1,63,95, 1) 52%,
        rgba(18,40,53, 1) 76%,
        rgba(18,40,53, 1) 100%
    );
}
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
scroll-behavior: smooth;
font-family: -apple-system, BlinkMacSystemFont, Arial,"Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
background: #f6f5f4;
font-weight: 300;
}

.invisible {
border:0;
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
svg {display: block;}

a {
text-decoration: none;
color: inherit;
word-wrap: break-word;
}
img {
max-width:100%;
height:auto;
}
picture, picture img {
width:100%;
height:auto;
margin:0 auto;
display:block;
}
figcaption {
font-size: .75rem;
line-height: 1.4;
color: #2f2f2f;
border-bottom: 1px solid #2f2f2f;
padding-bottom: .5rem;
margin-bottom: .5rem;

}
.small07, .quelle {
font-size: .825rem;
line-height: 1.4;
}
.small07 a {
font-weight: 700;
}
.small09 {
font-size: .9rem;
line-height: 1.4;
}
.normsize .blue {
font-size: .825rem;
color: #003F61;
}
.bold {
font-weight: 500;
}
.bold7 {
font-weight: 700;
}
p.gelb, gelb {
color: #FFD42A;
}
.marginnull {
margin: 0;
}
.right {
text-align: right;
}
header {
width: 100%;
background: #172e2c;
background: linear-gradient(45deg,rgba(2,0,36,1) 0%, rgba(18,53,49,1) 26%, rgba(0,43,54,1) 52%, rgba(18,53,49,1) 76%, rgba(0,92,96,1) 100%);
border-bottom: .2rem solid #f6f5f4;
padding: .5rem .8rem;
box-shadow: 0px 4px 12px -4px #828282;
}

header .inside {
display: flex;
justify-content: space-between;
align-items: center;
}

@media(min-width: 1080px) {
header {
margin: 0 auto;
height: auto;
position: static;
padding: 2rem;
width: 100%;
background: #172e2c;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(18,53,49,1) 13%, rgba(0,92,96,1) 27%, rgba(18,53,49,1) 74%, rgba(0,92,96,1) 100%);

}
}

/*Header Logo*/
#headerlogo svg {
width: 3rem;
height: 3rem;
background: #fff;
border: 1px solid #fff;
}
@media(min-width: 1080px) {

#headerlogo {
display: block;
}
#headerlogo svg {
width: 8rem;
height: 8rem;
}
}
/*buildiutpSchrift*/

.builditup svg {
width: 100%;
max-width: 170px;
height: auto;
}
@media(min-width: 400px) {
 .builditup svg {
    max-width: 240px;
 }
}
@media(min-width: 1080px) {
.builditup {
display:none;
}
}

/*header Navigation*/
/*header buttons =======================================*/

.navbutton {
height: 48px;
position: relative;
cursor: pointer;
width: 48px;
}
.navbutton div svg {
position: absolute;
z-index: 25;
top: 0;
right: 0;
}

.navbutton button.navopen svg {
width: 100%;
height: 100%;
}
.navbutton button.navclose svg {
stroke: #fff;
width: 100%;
height: 100%;
}

.headernav {
opacity: 0;
padding: 2rem 0 2rem 0;
transition: opacity .4s ease-out;
position: absolute;
top: 4.3rem;
left: 0;
z-index: 23;
background: #f6f5f4;
border-top: .2rem solid #f6f5f4;
border-bottom: .2rem solid #f6f5f4;
box-shadow: 0px 4px 12px -4px #828282;
height:0;
}
.headernav nav {
display: none; 
margin: 1rem 0 1rem 1rem;
width: 100%;
}
.navtoggle {
opacity: 1;
transition: opacity .4s ease-in;
height: auto;
width: 100%;
}
.navclose {
visibility: hidden;
}
.openweg {
visibility: collapse;
}
.closezeigen {
visibility: visible;
}
.closezeigen svg {
animation: drehung .7s forwards linear;
}
 @keyframes drehung {
                from {
                   transform: rotate(20deg);
                }

                to {
                   transform: rotate(180deg);
                }
            }
.closezeigen svg circle, .closezeigen svg line {
animation: drehungkreis .5s forwards linear;
}
 @keyframes drehungkreis {
                0% {
                   stroke-width: 0px;
                   stroke: #003F61;
                }
                100% {
                   stroke-width: 3px;
                   stroke: #F6F5F4;
                }
            }
.navtoggle nav {
display: flex;
flex-direction: column;
gap: 2rem;
margin: 0 0 0 2rem;
}

.headernav nav a {
color: #000;
font-weight: 500;
display: block; 
margin: 0 0 0 1rem;;
cursor: pointer;
font-size: 1rem;
line-height:1.2;
}
.headernav nav a.a-ueberschrift {
font-size: 1.4rem;
color: #003F61;
margin:0;
}
.headernav nav a svg  {
    width: 50px;
    height:auto;
    display: inline;
}
@media(min-width:1080px) {
.headernav {
top:0;
padding: 3rem 0 3rem 0;
}
.closezeigen svg {
margin:0;
}
@keyframes drehungkreis {
                0% {
                   stroke-width: 0px;
                   stroke: #003F61;
                }
                100% {
                   stroke-width: 3px;
                   stroke: #003F61;
                }
}
}
/*main*/
#container {
margin-top: 0rem;
}
#main  {
max-width: 100%;
font-size: 1rem;
line-height: 1.6;
position: relative;
}
@media(min-width:1200px) {
#main {
min-height: 20rem;
}
}
.content-text {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
.content-text_760 {
max-width: 760px;
margin: 0 auto;
}
.content-text.rte{
width: 100%;
margin: 0 auto;

}
.content-text#vorlaeufig {
margin: 4rem auto;
}
.ce_image figure img {
width: 100%;
height: auto;
margin: 0 auto;
}

h1 {
line-height: 1.2; 
font-size:1.6rem;
color: #123531;
font-weight: 600;
padding-top: 2rem;
}

h1+p{
margin-top: 2rem;
}
h2 {
line-height: 1.2; 
padding: 0;
margin: 3rem 0 0 0;
font-size: 1.2rem;
color: #003F61;
font-weight: 600;
}
h2 + p {
margin-top: 1rem;
}
h3 {
line-height: 1.2; 
padding: 0;
margin: 2rem 0 0 0;
font-size: 1.1rem;
color: #003F61;
font-weight: 600;
}
h3 + p {
margin-top: 1rem;
}
h4 {
line-height: 1.2; 
padding: 0;
margin: 1.5rem 0 0 0;
font-size: 1rem;
color: #003F61;
font-weight: 600;
}
h4 + p {
margin-top: 1rem;
}
p {
font-size: 1rem;
margin:1rem 0;
line-height: 1.3;
}
ul, ol {
margin: 0;
padding: 0 0 0 1rem;
line-height: 1.2;

}
ul {
list-style-type: square;
}
li::marker {
color: #005c60;
}
li {
margin: .5rem 0;
}

p, li {
font-size: 1rem;
}
}
.white, .white h2, .white h3, .white h4, .white p, .white a, .white li, .white li::marker {
color: #fff;
}
.mod_article a {
font-weight: 600;
}
.mod_article a.norm {
font-weight: 300;
}
.mod_article strong {
font-weight: 600;
}

.backtostore {
width: 100px;
margin: 0 auto;
}
@media(min-width: 1080px) {
#container {
margin-top: 0;
}
}
/*Footer*/
footer#footer  {
padding: 3rem 1rem 5rem 1rem;
color: #fff;
background: rgb(2,0,36);
background: linear-gradient(313deg, rgba(2,0,36,1) 0%, rgba(18,53,49,1) 13%, rgba(0,92,96,1) 27%, rgba(18,53,49,1) 74%, rgba(0,92,96,1) 100%);
margin: 5rem 0 0 0;
border-top: .2rem solid #f6f5f4;
box-shadow: 0px -4px 12px -4px #828282;
}

footer #footerflex {
display: flex;
justify-content:  space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 2rem;
max-width: 1920px;
margin:0 auto;
}
footer#footer p {
margin-top: 0;
margin-bottom: 1rem;
font-size: 14px;
}
footer ul {
     list-style: none; 
  padding: 0;
  margin: 0;
}
.footer-col_1 {
width: 100%;
}
.footer-col_2 {
display: flex;
align-items: center; 
justify-content: flex-start;
gap: 2rem;
margin: 2rem auto 1rem;
padding: 2rem 0;
border-bottom: .02rem solid #FEFDFC;
border-top: .02rem solid #FEFDFC;
flex-wrap: wrap;
}
.footer-col_2 div {
display: flex;
align-items: center; 
}

#footer p.contact {
padding: .5rem 0;
display: block;
}
.footer-col_3 {
width: 100%;
justify-self: end;
}
footer div.footerlogo svg, footer div.footerlogo img {
width: 6rem;
height: 6rem;
border: 1px solid #fff;
background-color: #fff;
margin: 0 0 1rem 0;
}


footer nav a {
text-decoration: none;
color: #F6F5F4;
display:block;
font-size: .825rem;
border: 1px solid #FEFDFC;
padding: .4rem .6rem;
margin: 2rem 0;
}
footer svg.telefon {
display: inline;
height: 30px;
width: auto;
padding-right: .8rem;
}
footer svg.email {
display: inline;
height: 18px;
width: auto;
padding-right: .8rem;
}
footer svg.uhr {
display: inline;
height: 75px;
width: auto;
}
footer .footer-col_3 .linknewsletter { 
display: block;
margin: 0;
font-size: 1.2rem;
color: #000;
flex-direction: column;
color: #fff;
line-height: 1;
margin: 0 0 2rem 0;
transform: rotate(-3deg);
}

footer .footer-col_3 .linknewsletter span.newsserif {
font-family: serif;
font-size: 2rem;
}

@media(min-width: 400px) {
.footer-col_3 {
width: auto;
}
}
@media(min-width:560px) {
footer#footer  {
padding: 3rem 2rem 5rem 2rem;
}
}
@media(min-width: 1080px) {
.footer-col_1, .footer-col_3 {
width: auto;
border-bottom: none;
gap: 3rem;
padding:0;
}
.footer-col_2 {
padding: 2rem 0;
border-bottom: none;
border-top: .02rem solid #FEFDFC;
}
}
@media(min-width: 1300px) {
footer #footerflex {
justify-content: space-around;
}
}
/*iconleiste bottom*/
.iconcontainer {
background: #f6f5f4;
width: 100%;
bottom: 0;
left: 0;
position: fixed;
z-index: 101;
border-top: 1px solid #122835;
box-shadow: 0px -4px 12px -4px #828282;
}
.iconleiste {
display: flex;
justify-content: space-around;
align-items: center;
max-width: 300px;
margin: 0 auto;
padding: .5rem 0;
}

.iconleiste > a {
    display:  flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1;
color: #0a4646;
font-weight: 600;

}
.iconleiste > a svg {
    width: auto;
    height: 28px;
     margin: 0;
     padding:0;
     cursor: pointer;
}

#top:target {
padding: .01rem 0 0 0;
}
@media(min-width: 380px) {
.iconleiste {
max-width: 600px;
gap: 20px;
}
}
@media(min-width: 1080px) {
.iconcontainer {
opacity: 0;
transition: opacity .6s ease-in;
}
}
.iconcontainerzeigen {
opacity: 1;
transition: opacity 1s ease-in;
}
.iconleiste a:focus {
    outline: 2px solid #800000!important;
}



.iconleiste #back-top {
color: #0a4646;
}
}


/*Unterseiten*/
/*Kontakt*/
.kontaktdatengrid  {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(auto-fill);
justify-content: space-between;
gap: 0;
max-width: 36rem;
}
.kontaktdatengrid div {
color: #F6F5F4;
}
.kontaktdatengrid div:nth-child(1) {
grid-column: 1/2;
grid-row: 1/2;
background: #122835;
width: 18rem;
height: 18rem;
justify-self: start; 
display: flex;
align-items: center; 
justify-content: center;
}
.kontaktdatengrid div:nth-child(1) h1{
margin: 0;
padding: 0;
color: #F6F5F4;
font-size: 4rem;
}
.kontaktdatengrid div:nth-child(2) {
grid-column: 1/2;
grid-row: 2/3;
background: rgb(18,40,53);
background: linear-gradient(45deg, rgba(18,40,53,1) 0%, rgba(49,18,53,1) 35%, rgba(2,0,36,1) 100%);
width: 18rem;
height: 18rem;
justify-self: end; 
font-size: 1.4rem;
display: flex;
align-items: center; 
justify-content: center;
}
.kontaktdatengrid div:nth-child(2) span span.doppelspan {
font-size: 2rem;
}
.kontaktdatengrid div:nth-child(3) {
grid-column: 1/2;
grid-row: 3/4;
background: rgb(0,92,96);
background: linear-gradient(45deg, rgba(0,92,96,1) 0%, rgba(2,0,36,1) 35%, rgba(18,53,49,1) 100%);
width: 18rem;
height: 18rem;
justify-self: start; 
font-size: 1.35rem;
line-height: 3;
display: flex;
align-items: center; 
justify-content: center;
padding: 1rem;
}
.kontaktdatengrid div:nth-child(3) a {
color: #fff;
font-weight: 400;
}
.kontaktdatengrid div:nth-child(4) {
grid-column: 1/2;
grid-row: 4/5;
background: rgb(18,53,49);
background: linear-gradient(45deg, rgba(18,53,49,1) 0%, rgba(0,63,97,1) 35%, rgba(2,0,36,1) 100%);
width: 18rem;
height: 18rem;
justify-self: end; 
font-size: 1.4rem;
text-align: center;
display: flex;
align-items: center; 
justify-content: center;
}
.kontaktdatengrid svg.telefon {
display: inline;
height: 40px;
width: auto;
padding-right: .8rem;
}
.kontaktdatengrid svg.email {
display: inline;
height: 25px;
width: auto;
padding-right: .8rem;
}
.kontaktdatengrid svg.uhr {
display: inline;
height: 60px;
width: auto;
}
@media(min-width: 580px) {
.kontaktdatengrid  {
grid-template-columns: 1fr 1fr;
margin: 2rem auto 5rem;
gap: 1rem;
}
.kontaktdatengrid div:nth-child(1) {
grid-column: 1/2;
grid-row: 1/2;
justify-self: center; 
}
.kontaktdatengrid div:nth-child(2) {
grid-column: 2/3;
grid-row: 1/2;
justify-self: center; 
}
.kontaktdatengrid div:nth-child(3) {
grid-column: 1/2;
grid-row: 2/3;
justify-self: center;
}
.kontaktdatengrid div:nth-child(4) {
grid-column: 2/3;
grid-row: 2/3;
justify-self: center; 
}
}
@media(min-width: 900px) {
.kontaktdatengrid  {
max-width: 36rem;
gap: 4rem;
margin: 5rem auto;
}
}
/*Formulare*/

main#appLogin {
padding: 0 1rem;
}
@media(min-width: 500px) {
main#appLogin {
padding: 0 2rem;
}
}
@media(min-width: 762px) {
main#appLogin {
padding: 0 3rem;
}
}
#appLogin form {
display: flex;
flex-direction: column;
gap: 2rem;
width: 100%;
max-width: 400px;
}
#appLogin label {
font-size: .8rem;
color: #000;
display: inline-block;
margin: .5rem 0 .5rem 0;
}
#appLogin form input  {
border: 0;
border-bottom: .1rem solid #464646;
border-radius: 0;
box-shadow: none;
color: #122835;
font-size: 1.2rem;
background: transparent;
height: 2rem;
width: 100%;
padding:0 .4rem;
}

#appLogin form button[type="submit"]  {
background: rgb(2,0,36);
background: linear-gradient(315deg, rgba(18,53,49,1) 0%, rgba(0,92,96,1) 27%, rgba(18,53,49,1) 74%, rgba(0,92,96,1) 100%);
color: #fff;
font-size: 1rem;
font-weight: 500;
border: .1rem solid #aaa;
border-radius: .3rem;
padding:1rem;
margin: 0 auto;
width: 100%;
cursor: pointer;
}
#appLogin .error {
background: var(--biurot1);
color: #fff;
padding: 1rem;
max-width: 400px;
border-radius: .2rem;
}
.passwordCon {
position:relative;
}
 .toggle-password {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 18px;
      position: absolute;
      top: .2rem;
      right: .5rem;
    }
 .toggle-password svg {
  width: 24px;
      height: 24px;
      fill: #555;
      }
.anleitung {
margin:0;
padding-inline-start: 1.2rem;
}
.anleitung li {
padding:0;
}
.hinweis {
font-size: .8rem;
color: var(--biublau5);
}
.cookiehinweis  p,  .cookiehinweis h3 + p {
font-size: .8rem;
margin:0;
}
.cookiehinweis h3 {
margin: .4rem 0 0 0;
font-size: .8rem;
}
@media(min-width: 720px) {
.postit-up-artikel #container {
padding: 2rem;
margin:2rem auto;
max-width: 720px;
}
}
div#matomo-opt-out p {
color: #800000;
}
/*matomo'*/
/*matomo'*/
div#matomo-opt-out p {
color: #800000;
}
#matomo-opt-out {
font-size: 1.4rem;
}
#matomo-opt-out input[type="checkbox"] {
width: 1.2rem;
height: 1.2rem;
margin: 0 1rem 0 0;
}
#matomo-opt-out label {
    display: inline;
}
.wartentext {
    animation: warten 10s forwards linear;
color: #800000;
}

 @keyframes warten {
                0% {
                   opacity: 1;
                }

               99% {
                   opacity: 1;
                }
               100% {
                   opacity: 0;
                   display:none;
                }
            }
.infotexte h1 {
font-size: 1.4rem
}
.infotexte h2, h3 {
font-size: 1.2rem
}

.fehler {
max-width: 600px;
margin:0 auto;
}
#auswahl {
display: flex;
width: 100%;
gap: 3rem;
margin:0 auto;
align-items: center;
justify-content: center;
}
#auswahl > p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  aspect-ratio: 1 / 1;
  padding: 1rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  border-radius: .2rem; 
}

/* Hover-Effekt */
#auswahl > p:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

/* Klick-Effekt */
#auswahl > p:active {
  transform: scale(0.94);
  box-shadow: 0 3px 6px rgba(0,0,0,.3) inset;
}
#auswahl > p:nth-child(1) {
background: var(--biugruen);
}
#auswahl > p:nth-child(2) {
background: var(--biublau2);
}
#auswahl > p:nth-child(3) {
background: var(--biuviolett1);
}
@media (max-width: 600px){
#auswahl {
flex-direction: column;
gap: 1rem;
}
}