:root {
    --orange1: rgba(255,129,0,1);
    --weiss: rgba(255,255,255,1);
    --schwarz: rgba(0,0,0,1);
    --dunkelgrau1: rgba(56,56,54,1);
    --dunkelgrau1blass: rgba(56,56,54,0.55);
    --dunkelgrau2: rgb(33, 33, 32);
    --dunkelgrau3: rgb(42, 51, 60);
    --offwhite: rgba(250,250,248,1);
    --offwhiteblass: rgba(250,250,248,0.2);
    --offwhiteblassrand: rgba(250,250,248,0.3);
    --dunkelgraublass: rgba(56,56,54,0.06);
    --dunkelgraublassrand: rgba(56,56,54,0.01);
    --hellgrau1: rgba(245,245,244,1);
    --hellgrau2: rgba(217,217,217,1);
    --knausbackground: rgba(220,235,245,1);
    --weinsbergbackground: rgba(243,241,238,1);
    --tabbertbackground: rgba(229,229,229,1);
    --tabbackground: rgba(140,140,140,1);
    --claasbackground: rgba(189,211,48,1);
    --fabackground: rgba(234,216,221,1);
    --physiobackground: rgba(190,210,142,1);
    --desenbackground: rgba(231,238,241,1);
    --heimbackground: rgba(229,229,229,1);
    --perlebackground: rgba(251,244,249,1);
    --printbackground: rgba(246,246,248,1);
    /* Overrides */
    --swiper-theme-color: rgba(255,129,0,1); /* orange */
    --swiper-navigation-color: rgba(255,129,0,1); /* orange */
    --swiper-navigation-size: 20px;
    
    --maxbreite: 1440px;
    --satzspiegeleinzug: 3em;
}

html {
    scroll-behavior: smooth;
    font-size: min(max(1rem, 4vw), 18px);
    overflow-x: hidden;
}

html,
body {
    margin: 0 auto;   /* zentriert */
    padding: 0;
    height: 100%;
    font-family: 'TT Norms Pro';
    font-weight: 400;
    color: var(dunkelgrau2);
    background-color: var(--hellgrau1);
    max-width: 100vw;
}

body {
    background: linear-gradient(180deg, rgba(245,244,244,1) 0%, rgba(245,244,244,1) 33%, rgba(255,255,255,1) 100%);
}

img[data-sizes="auto"] { 
    display: block; 
}

img.max90 {
    max-height: 90vh;
}

img.max40 {
    max-height: 40vh;
    /*border: 1px solid blueviolet;*/
}

.max {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
}

.satz {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    width: 100%;
    max-width: var(--maxbreite);
}

/* Header-P */

.sig {
    position: fixed;
    top: 1em;
    height: 2em;
    /*background-color: transparent;*/
    z-index: 9999;
    margin-left: 40%; 
    width: 60%;
    max-width: calc( var(--maxbreite) * 0.6);
}

.signet {
    margin-right: var(--satzspiegeleinzug);
    margin-left: auto;
    width: 3.8em;
    height: 3.8em;
    max-width: 8vw;
    max-height: 8vh;
}

.signet img {
    width: 100%;
    height: 100%;
    min-height: 3em;
}

.kopf {
    position: fixed;
    z-index: 0;
    height: 40vh; 
    min-height: 40em; 
    max-height: 800px; 
    background-size: contain; 
    background-image: url(../images/p_weiss_2400.png); background-repeat: no-repeat; 
    background-position: right top; 
    margin-right: 10%;
}

.langmenu {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    width: 7ch;
}

ul.kopfmenu {
    font-size: 1.1em;
    text-transform: lowercase;
}

.headermenu {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 20vh;
}

ul.kopfmenu {
    font-size: 1.1em;
    text-transform: lowercase;
}

ul.kopfmenu li {
    display: inline-block;
}

ul.kopfmenu li::before {
    content: " / ";
}

ul.kopfmenu li:first-child::before {
    content: "";
}

ul.kopfmenu li a.active,
ul.kopfmenu li a:hover,
ul.kopfmenu li a:active {
    color: var(--orange1);
}

.orange {
    color: var(--orange1);
}

/* Swiper Bullets Override */

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid var(--dunkelgrau1);
    background: transparent;
    opacity: .7;
}

.swiper-pagination-bullet:hover,
.swiper-pagination-bullet:active,
.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--swiper-theme-color);
    border: 1px solid var(--swiper-theme-color);
}



/* bis hierher Header-P */

.page-wrapper {
    text-align: center;
    width: 100%;
    position: absolute;
    z-index: 1;
    overflow-x: hidden;

    margin-top: calc(100vh - 15px); 
    background-color: transparent; 
    padding-top: 0;
}

.page-content {
    padding-top: 0;
}

.page-content .kopf {
    width: 100%;
    max-width: var(--maxbreite);
    margin: 0 auto;
}

.plogo {
    width: 60%;
    max-width: 22em;
}

.about {
    margin-top: 10vh;
}

@media screen and (max-height: 700px) {
    .headermenu {
      margin-top: 10vh;
    }
    .about {
        margin-top: 7vh;
    }
}

.about .abouttext {
    width: 100%; 
    max-width: 48em; 
    float: right;
}

.aboutswiper {
    width: 100%; 
    clear: both;
}

.aboutinfo {
    max-width: 60ch; 
    border-left: 10px solid black; 
    height: auto;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: flex-start;
}

.aboutinfo p {  
    padding: 0;
    margin: 0 0 0 1.5rem;
}

.aboutinfo a {  
    color: var(--orange1);
}

.aboutinfo p.textabstand {  
    padding-top: 7px;
}

.aboutinfo .portrait {
    width: 55%;
    /*max-width: calc(1440px * 0.2);*/
    min-width: 6em;
    align-self: stretch;
}

.aboutinfo img {
    width: 10rem;
}

.swiper-pagination-about {
    text-align: center;
}

/* Silbentrennung */

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 2;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 2 3;
    -webkit-hyphenate-limit-lines: 3;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 2 3;
    -moz-hyphenate-limit-lines: 3;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 2 3;
    -ms-hyphenate-limit-lines: 3;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 2 3;
    hyphenate-limit-lines: 3;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

/* Swiper Overrides */

.swiper-button-next,
.swiper-button-prev {
    color: var(--weiss);
    /*border: 8px solid var(--offwhiteblassrand);*/
    background-color: var(--offwhiteblass);
    padding: 18px 16px 18px 20px;
    /*padding: 10px 8px 10px 12px;*/
    border-radius: 50%;
    width: var(--swiper-navigation-size);
} 
.swiper-button-prev {
    padding: 18px 20px 18px 16px;
    /*padding: 10px 12px 10px 8px;*/
}

.swiper-button-next.dunkel,
.swiper-button-prev.dunkel {
    color: var(--dunkelgrau1);
    border: 8px solid var(--dunkelgraublassrand);
    background-color: var(--dunkelgraublass);
}

/* Standards */

a {
    text-decoration: none;
    color: inherit;
}

body {
  /* padding: 2% 5%; */
  line-height: 1.4;
}

b {
    font-weight: 600;
}

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

h1, h3 {
    text-transform: uppercase;
}

h1 {
  max-width: 30em;
  font-size: 2.0736rem;
}

h1 {
  font-size: 27.648px;
}

@media screen and (min-width: 320px) {
  h1 {
    font-size: calc(27.648px + 26.352 * ((100vw - 320px) / 880));
  }
}

@media screen and (min-width: 1023px) {
  h1 {
    font-size: 48px;
  }
}

p, 
li {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Ende Fluid Typo */

.seite {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

h1 {
    display:inline-block;
    line-height: 100%;
    margin: 0;
    padding: 0;
    font-weight: 600;
    letter-spacing: 0.03em;
}

ul {
    margin: 1em 0;
    padding: 0;
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.04em;
}

.kopfmenu ul {
    text-transform: lowercase;
}

p.hell,
h1.hell,
h2.hell,
h3.hell,
h4.hell,
h5.hell,
h6.hell {
    color: var(--offwhite); 
}

p.dunkel,
h1.dunkel,
h2.dunkel,
h3.dunkel,
h4.dunkel,
h5.dunkel,
h6.dunkel {
    color: var(--dunkelgrau1); 
}

a,
a:link,
a:visited
*:focus{
    outline: none;
    outline-width: 0;
}

/* Buttons */

button {
    background-color: transparent; 
    background-color: var(--orange1);
    text-transform: none;
    border-radius: 2px; 
    padding: 0.4em 1.5em; 
    font-size: 0.7em;
    color: var(--weiss);
    border: 1px solid var(--orange1);
}

button.hell {
    color: var(--offwhite);
    border: 1px solid var(--offwhite); 
}

button.dunkel {
    color: var(--dunkelgrau1);
    border: 1px solid var(--dunkelgrau1); 
}

/* Satzspiegel */

.satzspiegel {
    margin-left: var(--satzspiegeleinzug);
    margin-right: var(--satzspiegeleinzug);
}

@media (max-width: 48em) {
    .satzspiegel {
        margin-left: 1em;
        margin-right: 1em;
    }
}

/* Footer */

footer,
.footer {
    margin: 0;
    padding: 0;
    background-color: var(--weiss);
}

.footer .satzspiegel {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: var(--maxbreite);
    transform: translateX(-50%);
    padding: 0 3em 0 3em;
    margin: 0;
}

.kontaktkacheln {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-start;
    padding: 3em 0 5em 0; 
    margin: 0;
}

.kontaktkacheln div {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 33.33%;
    /*align-self: center;*/
    align-self: flex-start;
    order: 0;
    color: var(--dunkelgrau1);
    text-align: left;
    padding: 0 3em 0 0;
    font-size: 80%;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.kontaktkacheln div:first-child,
.kontaktkacheln div:last-child {
    border: 0px solid transparent;
}

.kontaktkacheln div:last-child {
    flex-basis: 20%;
}

.kontaktkacheln p {
    line-height: 180%;
}

.kontaktkacheln .schalter {
    font-size: 65%;
    opacity: 0.8;
}

@media (max-width: 58em) {
    .kontaktkacheln {
        padding: 1em 0; 
    }     
}

@media (max-width: 48em) {
    .kontaktkacheln div {
        flex-basis: 99%;
        border-top: 1px solid var(--hellgrau2);
        border-bottom: 1px solid var(--hellgrau2);
        padding: 0.5em 0;
        border-right: none;
        border-left: none;
    }

    .footer .satzspiegel {
        padding: 0 1em 0 1em;
    }
}

/* Intro Inhalte */

.introcontent {
    padding: 0;
    margin-top: 5em;
    margin-bottom: 5em;
}

.introcontent.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.introcontent.flex-container .flex-item {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    /*background-color: yellow;*/
}


/* Info Inhalte */

.infocontent {
    padding: 0 18%;
    margin-top: 3em;
}

.infocontent.single {
    display: flex;
    justify-content: center;
    align-items: center;
}

.infocontent.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.infocontent.twocolumns .flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 15em;
    -ms-flex: 2 1 15em;
    flex: 2 1 15em;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.infocontent.twocolumns .flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 auto;
    -ms-flex: 2 1 auto;
    flex: 2 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.infocontent.flex-container2 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item2:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 300px;
    -ms-flex: 2 1 300px;
    flex: 2 1 300px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item2:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 150px;
    -ms-flex: 1 1 150px;
    flex: 1 1 150px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item2:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 150px;
    -ms-flex: 1 1 150px;
    flex: 1 1 150px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}


.infocontent.flex-container3 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content:space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item3 {
    margin-bottom: -6px;  /* Fix wegen Zeilenabstand */
}

.flex-item3:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 400px;
    -ms-flex: 1 1 400px;
    flex: 1 1 400px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item3:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 400px;
    -ms-flex: 1 1 400px;
    flex: 1 1 400px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.flex-item3:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 800px;
    -ms-flex: 2 1 800px;
    flex: 2 1 800px;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}



.infocontent.flex-container4 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content:space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item4 {
    margin-bottom: -1em;  /* Fix wegen Zeilenabstand */
    max-height: 60vh;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    /*border: 2px dashed lightskyblue;*/
}

.flex-item4 img,
.flex-item4 .website-overlay img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.flex-item4.schmal {
    -webkit-flex: 1 1 350px;
    -ms-flex: 1 1 350px;
    flex: 1 1 350px;
    max-height: 80vh;
}

.flex-item4.schmal250 {
    -webkit-flex: 1 1 250px;
    -ms-flex: 1 1 250px;
    flex: 1 1 250px;
    max-height: 60vh;
}

.flex-item4.schmal450 {
    -webkit-flex: 1 1 450px;
    -ms-flex: 1 1 450px;
    flex: 1 1 450px;
    max-height: 80vh;
}

.flex-item4.schmal img {
    max-width: 100%;
}

.flex-item4.breit {
    -webkit-flex: 2 1 800px;
    -ms-flex: 2 1 800px;
    flex: 2 1 800px;
}

/* gif */

.screenanimation {
    width: 100%; 
    height: 45vw; 
    max-height: calc( var(--maxbreite) * 0.45);
}

.website-overlay { 
    position: relative;
    top: 0;
    padding: 0;
}

.laptop {
    margin-bottom: -4rem; 
    margin-top: -3rem
}
   
.website-rahmen {
    position: absolute;
    top: 0;
    margin: 0 auto;
    width: 100%;
    margin-left: 0.5em;
}

.website-rahmen,
.website-overlay {
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.pullright {
    text-align: right;
}

.pullleft {
    text-align: left;
}

/* Flex gap Trick */

.emulated-flex-gap > * {
  margin: 12px 0 0 12px;
}

.emulated-flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -12px 0 0 -12px;
  width: calc(100% + 12px);
}

/* bis hierher Fleex-Gap-Trick */

/* multicolumn-css */                                     /* für später */
.multicolumn {
  -webkit-column-count: 2; /* Ch, Saf, And, BB  */
     -moz-column-count: 2; /* Fx */
          column-count: 2; /* IE 10, Op 11.1+ */

  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;

  -webkit-column-rule: 0px solid #000;
     -moz-column-rule: 0px solid #000;
          column-rule: 0px solid #000;
}
/* bis hierher */


/* Bereichs-Intro und Inhalt */

.infobereich { 
    padding: 0 4em 5em 4em;
}

.infobereich p {
    padding: 1.5em 0 3em 0;
}

.schliessen {
    min-height: 3em;
    padding: 1.8em 0 2em 0;
    text-align: center;
}

.schliessen button {
    border: 0px solid black;
}

.schliessen button img {
    width: 1.3em;
    height: 1.3em;
}

#accordion {
    background-color: transparent;
    z-index: 2; 
    margin-top: 0; 
    padding-top: 0;
}

#accordion h2,
#accordion p,
#accordion .bildinfo,
#accordion .inbildinfo {
    text-align: left;
}


#accordion h3 {
    padding: 1em 2em;
    background-color: #dedede;
    cursor: pointer;
}



.aboutsection {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 20vw;
    position: relative;
}

.sectionbild {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30vw;
    max-height: calc(0.3 * var(--maxbreite));
    overflow: hidden;
    position: relative;
    outline: none;
}

.hintergrund {
    position: relative;
    top: 0;
    left: 50%;
    height: 30vw;
    max-height: calc(0.3 * var(--maxbreite));
    min-height: 20vh;
    width: 100vw;
    max-width: var(--maxbreite);
    /*transform: translate(-50%, -50%);*/
    transform: translateX(-50%);
    overflow: hidden;
    background-size: cover;
}

/* Intro neu */

#about.aboutsection {
    background-color: var(--weiss);
    color: var(--schwarz);
}
.about.infosection {
    background-color: var(--orange1);
    color: var(--weiss);
}

/* bis hierher */

.infosection {
    padding-top: 4em;
    /* display: none;  /* bei reload ausblenden */
}

.infosection[aria-hidden="true"] {
    opacity: 0;
}

.infosection[aria-hidden="false"] {
    opacity: 1;
}

#ad.sectionbild {
    background-color: rgb(196,206,208);
    color: var(--schwarz);
}
#ad .hintergrund {
    background-image: url(../images/header/ad-streifen.png); 
    background-position: center left; 
    margin-left: 17em;
}
.ad.infosection {
    background-color: rgb(246,246,248);
    background-color: #ffffff;
    color: var(--schwarz);
}


#md.sectionbild {
    background-color: rgb(0,0,0);
    color: var(--hellgrau1);
} 
#md .hintergrund {
    background-image: url(../images/header/md-streifen.png); 
    background-position: center left;
    margin-left: 13em;
}
.md.infosection {
    background-color: rgb(4,4,4);
    color: var(--hellgrau1);
}


#cd.sectionbild {
    background-color: rgb(244,244,244);
    color: var(--dunkelgrau2);
}
#cd .hintergrund {
    background-image: url(../images/header/cd-streifen.png); 
    background-position: center left;
    margin-left: 7em;
}
.cd.infosection {
    background-color: var(--hellgrau2);
    color: var(--dunkelgrau2);
}


#ux.sectionbild {
    background-color: rgb(255,129,0);
    color: var(--schwarz);
}
#ux .hintergrund {
    background-image: url(../images/header/ux-streifen.png);
    background-position: center left;
    margin-left: 2em;
}
.ux.infosection {
    background-color: var(--weiss);
    /*color: var(--orange1);*/
    color: var(--dunkelgrau1);
    padding-bottom: 5em;
}
#uxbutton {
    color: var(--weiss);
    border: 1px solid var(--weiss);
}


#cg.sectionbild {
    background-color: rgb(54, 54, 54);
    color: var(--weiss);
}
#cg .hintergrund {
    background-image: url(../images/header/cg-streifen.png); 
    background-position: center left;
    margin-left: 6em;
}
.cg.infosection {
    background-color: rgb(49,49,49);
    color: var(--weiss);
}

.infobereich {
    position: relative;
    top: 0;
    left: 50%;
    width: 100vw;
    max-width: var(--maxbreite);
    transform: translateX(-50%);
    padding: 0 !important;
    margin: 0;
    border: 1px solid transparent;
}

.inbildinfo {
    position: absolute;
    left: 50%;
    top: 35%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100vw;
    max-width: var(--maxbreite);
    transform: translateX(-50%);
}  

.inbildinfo h2 {
    font-size: 1em;
    width: 40%;
    max-width: 20em;
    text-align: left;
}

.inbildinfo h2 b {
    font-size: 200%;
    font-weight: 600;
    text-transform: uppercase;
}

.infobereich p,
.infobereich h4 {
    text-align: left;
}

.infobereich .einleitungstext {
    margin-top: -1.5em;
    margin-bottom: 3em;
}

.infobereich .einleitungstext p {
    max-width: 78vw;
    width: 60ch;
    /*animation-name: einblender;
    animation-delay: 1.3s;
    animation-duration: 1.5s;
    opacity: 0;*/
}


/* Animationen */

/* @keyframes verkleinerer {
    0%   {height: 100vh;}
    100% {height: 0;}
}

@keyframes ueberblender {
    0%   {opacity: 1;}
    100% {opacity: 0;}
} */

@keyframes einblender {
    0%   {opacity: 0;}
    60%  {opacity: 0;}
    100% {opacity: 1;}
}

.active .infobereich {
    overflow: overflow;
    height: auto;
    padding: 0 4em 5em 4em;
    margin-top: -5em;
    animation-name: einblender;
    animation-duration: 0.9s;
    opacity: 1;
}

.active .inbildinfo button {
    visibility: hidden;
    display: none;
}

/* Buttonbeschriftung */

div.inbildinfo button::after,
div[aria-expanded="false"] button::after{
    content: "Mehr erfahren";
}

div[aria-expanded="true"] button::after{
    content: "Schließen";
}

div.inbildinfo button.en::after,
div[aria-expanded="false"] button.en::after{
    content: "learn more";
}

div[aria-expanded="true"] button.en::after{
    content: "close";
}


/* Sub-Section-Verlauf */

.topverlauf {
    position: absolute; 
    width: 100%; 
    height: 15vh; 
    min-height: 3em; 
    background: -webkit-radial-gradient(top,rgba(255,255,255,0.08),rgba(255,255,255,0.04),rgba(255,255,255,0),rgba(255,255,255,0)); background: radial-gradient(at top,rgba(255,255,255,0.08),rgba(255,255,255,0.04),rgba(255,255,255,0),rgba(255,255,255,0));
}

.freisteller {
    margin: 0 auto; 
    margin-top: 10vh; 
    max-height: 80vh; 
    max-width: 800px;
}

/* Themenbox */

.themenbox {
    padding-top: 4em;
    padding-bottom: 2em;
    margin: 3em 0 2em 0;
}

.themenbox h4.subtext {
    margin-top: 4em;
    padding-bottom: 0;
}

h4.subtext {
    text-align: center; 
    padding-bottom: 6em;
}

h4.subtext b {
    font-weight: 600;
}

.animiert {
    opacity: 0.6;
    color: #dedede;
    transition: 0.75s 0.25s opacity ease-in-out, 1s 0.25s color ease-in-out;
}

.animiert.visible {
    opacity: 1;
    color: var(--dunkelgrau3);
}

.dunkel.animiert.visible {
    opacity: 1;
    color: var(--dunkelgrau3);
}

.hell.animiert.visible {
    opacity: 1;
    color: var(--weiss);
}

/* Call To Action */

.cta {
    height: 3em;
    width: 100%;
    margin: 1.5em 0 4em 0;
}

.cta img {
    height: 100%; 
    padding: 0 0.75em;
}

.cta a:link,
.cta a:visited {
    text-decoration: none;
    opacity: 0.5;
}

.cta a:hover,
.cta a:active {
    text-decoration: none;
    opacity: 0.8;
}


/* neuer Footer */

/* v2 */
.footer .bloecke {
    display: flex; 
    flex-wrap: nowrap; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: stretch; 
    align-content: stretch;
}
.footer .logoblock {
    flex: 0 0 9rem; 
    margin: var(--satzspiegeleinzug); 
    padding-top: 0.4rem;
}
.footer .adresslinkblock {
    flex: 0 0 70%; 
    margin: 0 var(--satzspiegeleinzug); 
    margin-left: 0; 
    text-align: left;
}

.footer .adresslinkbloecke {
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: stretch; 
    align-content: stretch;
    margin: 3em 0 2em 2em;
}

.footer .adressblock,
.footer .linkblock {
    flex: 0 0 15em; 
    margin: 0 0 1em 0; 
    text-align: left;
}

.footer .linkblock {
    flex: 0 0 8em; 
    align-self: flex-end;
}

.footer .adressblock p,
.footer .linkblock p {
    margin: 0;
}

.footer .linkblock .impr {
    padding-right: 0;
}

.footer .linkblock a {
    color: var(--dunkelgrau1blass);
}

@media screen and (max-width: 1023px) {
    .footer .linkblock {
        flex: 0 0 100%; 
        align-self: flex-start;
        margin: 0;
        margin-top: 1.5em;
        padding: 0.5em 0;
        text-align: left;
    }
    .footer .linkblock br {
        display: none;
    }
    .footer .linkblock .impr {
        padding-right: 1.5em;
    }
}

@media screen and (max-width: 48em) {

    .footer .logoblock {
        margin-left: 1.5em;
    }
    .footer .adresslinkblock {
        margin-right: 1.5em;
    }
}



@media screen and (max-width: 480px) {
    .yyyfooter .logoblock {
        flex: 0 0 9rem;
    }
    .yyyfooter .adressblock {
        flex: 0 0 80%; 
        margin-top: 0;
        margin-left: var(--satzspiegeleinzug); 
    }
}




/* Start Fluid Typo */
html {
  font-size: 16px;
}


/*    TODO  weiche Übergänge zwischen den Stufen, Höhe der h2-Headlines u.v.m.  */

@media screen and (min-width: 320px) {
    html {
        font-size: calc(12px + 8 * ((100vw - 320px) / 880));
    }
    .infobereich { 
        padding-left: 1.5em;
        padding-right: 1em;
    }
    .inbildinfo {
        margin-left: 1.5em;
        margin-right: 1em;
    }
    .inbildinfo h2 {
        line-height: 150%;
        font-size: 1em;
        width: 55%;
        max-width: 30em;
    }
    .sectionbild,
    .hintergrund {
        height: 40vw;
        max-height: calc(0.4 * var(--maxbreite));
    }
    .hintergrund {
        min-height: 20em; 
        width: 150%;  
    }
    
    #ad .hintergrund {
        margin-left: 2em;
    }
    #md .hintergrund {
        margin-left: 1em;
    }
    #cd .hintergrund {
        margin-left: -6em;
    }
    #ux .hintergrund {
        margin-left: -6em;
    }
    #cg .hintergrund {
        margin-left: -2em;
    }

    .website-rahmen {
        margin-left: 0.25rem;
    }
    .animiert {
        opacity: 1;
        transition: none;
    }
}



@media screen and (min-width: 48em) {
    .inbildinfo {
        margin-left: var(--satzspiegeleinzug);
    }
    
    .website-rahmen {
        margin-left: 0.33rem;
    }
    
    .animiert {
        opacity: 0.6;
        transition: 0.75s 0.25s opacity ease-in-out, 1s 0.25s color ease-in-out;
    }
}

@media screen and (min-width: 1023px) {
    html {
        font-size: 16px;
        /* war 24 */
    }
    .infobereich { 
        padding-left: 4em;
        padding-right: 2em;
    }
    
    .inbildinfo h2 {
        line-height: 160%;
        font-size: 1.25em;
        width: 40%;
        max-width: 20em;
    }
    .sectionbild,
    .hintergrund {
        height: 30vw;
        max-height: calc(0.3 * var(--maxbreite));
    }
    .hintergrund {
        min-height: 20vh; 
        width: 100vw;  
    }
    
    #ad .hintergrund {
        margin-left: 17em;
    }
    #md .hintergrund {
        margin-left: 13em;
    }
    #cd .hintergrund {
        margin-left: 7em;
    }
    #ux .hintergrund {
        margin-left: 2em;
    }
    #cg .hintergrund {
        margin-left: 6em;
    }

    .website-rahmen {
        margin-left: 0.5em;
    }
}



/*------- Video Overlay -------*/

.maske {
  position: relative;
  /*width: 500px;*/
  margin: 0 auto;
}
.maske video {
  width: 100%;
  display: block;
}
.maske:before {
  content: '';
  position: absolute;
    background: rgb(42,51,60);
    background: radial-gradient(at top,rgba(255,255,255,0.08),rgba(255,255,255,0.04),rgba(255,255,255,0),rgba(255,255,255,0)), radial-gradient(circle, rgba(42,51,60,0) 46%, rgba(42,51,60,1) 75%, rgba(42,51,60,1) 100%), linear-gradient(180deg, rgba(42,51,60,1) 0%, rgba(42,51,60,0) 10%, rgba(42,51,60,0) 83%, rgba(42,51,60,1) 100%);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


/* Datenschutzseite */

.datenschutz {
    padding-top: 10rem;
    padding-bottom: 4rem;
}

.datenschutz h1,
.datenschutz h2,
.datenschutz h3,
.datenschutz h4,
.datenschutz h5,
.datenschutz h6,
.datenschutz p {
    text-align: left;
    letter-spacing: 0.02em;
    margin-bottom: -0.4em;
}

.datenschutz h1,
.datenschutz h2 {
    margin-top: 1.5em;
}

.datenschutz h1,
.datenschutz h3,
.datenschutz h4 {
    font-weight: 600;
}

.datenschutz h3 {
    padding-top: 2em;;
}

.datenschutz h2 {
    padding-top: 0.5em;
}

.datenschutz * {
    text-transform: none;
    text-align: left;
}

/* JSV 360° */
#jsv-holder {
    width:100%;
}

#jsv-holder img {
    width: 100%;
}



/*------ Tooltip -------- */


[tooltip-lbl][tooltip-pos] {
    position: relative;
}

[tooltip-lbl][tooltip-pos]:before {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: -2.45em;
    opacity: 0;
    transition: .1s all;
    transition: all .18s ease-out .18s;
    border: 5px solid transparent;
    z-index: 10;
}

[tooltip-lbl][tooltip-pos]:after {
    content: attr(tooltip-lbl);
    position: absolute;
    top: -5.5em;
    height: 1.5em;
    padding: 0.35em 1.25em;
    color: var(--weiss);
    opacity: 0;
    transition: .1s all;
    white-space: nowrap;
    transition: all .18s ease-out .18s;
    z-index: 10;
    pointer-events: none;
    border-radius: 2px;
    background-color: var(--orange1);
    font-size: 0.75em;
}


[tooltip-lbl][tooltip-pos]:hover:before,
[tooltip-lbl][tooltip-pos]:hover:after {
    opacity: 1;
    pointer-events: none;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='top']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:hover:after {
    transform: translate(-50%, 0);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    bottom: 100%;
    transform-origin: top;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:after {
    margin-bottom: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="top"]:before {
    border-top-color: var(--orange1);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='top']:after {
    left: 50%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:before {
    border: 5px solid transparent;
    border-top-color: var(--orange1);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='top']:after {
    margin-bottom: 10px;
}



/*--Bottom--*/
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after,
[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    top: 100%;
    transform-origin: bottom;
    transform: translate(0, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos^="bottom"]:before {
    border-bottom-color: var(--orange1);
}


[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:after {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 4px);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:before {
    border: 5px solid transparent;
    border-bottom-color: var(--orange1);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='bottom']:after {
    margin-top: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='left']:after {
    top: 50%;
    right: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:before {
    border: 5px solid transparent;
    border-left-color: var(--orange1);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:after {
    margin-right: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='left']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='left']:hover:after {
    right: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='right']:after {
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:before {
    border: 5px solid transparent;
    border-right-color: var(--orange1);
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:after {
    margin-left: 10px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos='right']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos='right']:hover:after {
    left: 100%;
    top: 50%;
    transform: translate(4px, -50%);
    transform-origin: bottom;
}






/*-- Right --*/

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:after {
    right: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:before {
    right: 5px;
}

[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-right']:hover:before,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:after,
[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:hover:before {
    transform: translate(0, 0);
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:after {
    left: 0;
}


[tooltip-lbl][tooltip-pos][tooltip-pos*='-left']:before {
    left: 5px;
}

[tooltip-lbl][tooltip-size='sm']:after {
    white-space: normal;
    width: 90px;
}

[tooltip-lbl][tooltip-size='md']:after {
    white-space: normal;
    width: 150px;
}

[tooltip-lbl][tooltip-size='lg']:after {
    white-space: normal;
    width: 260px;
}

[tooltip-lbl][tooltip-size='xlg']:after {
    white-space: normal;
    width: 380px;
}

[tooltip-lbl][tooltip-size='fit']:after {
    white-space: normal;
    width: 100%;
}