@font-face {
  font-family: 'Baar-Sophia';
    src:  url('/fileadmin/alteHP/schriftarten/baarSophia/Baar-Sophia.ttf.woff') format('woff'),
    url('/fileadmin/alteHP/schriftarten/baarSophia/Baar-Sophia.ttf.svg#Baar-Sophia') format('svg'),
    url('/fileadmin/alteHP/schriftarten/baarSophia/Baar-Sophia.ttf.eot'),
    url('/fileadmin/alteHP/schriftarten/baarSophia/Baar-Sophia.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

:root {
  --seitentitelschriftgroesse: 2.1vw;
  --seitentitelZindex: 110;
  --buttonschriftfarbe: #ffdddd;
  --buttonhoverfarbe: #220000;

  --leistenabstandOben: 5%;
  --leistenSeitenposition: 0%;
  --leistenweite: 100%;
  --leistenstreckungVertikal: 40%;
  --leistenGrafikStreckungVertikal: 16.7%;
  --leistenGrafikPositionVertikal: 14%;
  
  --themenbildhoehe: var(--leisten--buttonschriftfarbepositionshoehe);

  --inhaltspositionshoehe: 10%;
  --inhaltseitenabstand: 5%;
  --inhaltanzeigebreite: 90%;
  --inhaltsschriftgroesse: 5vw;
  --inhaltDesign: url('../img/textHintergrund023.jpeg');
  
  --buttonSchriftgroesse: 1vw;
  --buttonbreite: 13%;
  --buttonabstand: 20%;
  --buttonhoehe: 11%;
  --buttonhoehenpos: -3%;
  --buttonverschiebungHorizontal: 7%;
  --aussenbuttonZusatz: -1%;

  
  
  --umhuellung: polygon(0% 0%, 0% 24%, -0.01% 23.67%, 0.23% 22.88%, 1.14% 21.12%, 2.16% 19.56%, 3.04% 18.61%, 5.30% 16.99%, 7.09% 16.47%, 10.37% 16.31%, 13.17% 16.81%, 15.31% 17.22%, 17.57% 18.23%, 18.23% 18.69%, 19.12% 19.41%, 19.82% 19.86%, 20.45% 20.21%, 23.45% 22.47%, 24.54% 23.25%, 26.16% 24.25%, 27.20% 24.69%, 29.35% 25.44%, 30.93% 25.60%, 31.29% 25.60%, 31.76% 25.58%, 32.31% 25.54%, 33.23% 25.06%, 33.62% 24.53%, 34.08% 23.37%, 34.06% 22.00%, 34.34% 21.21%, 34.77% 20.38%, 35.38% 19.27%, 35.96% 18.59%, 36.83% 17.79%, 38.23% 16.92%, 39.25% 16.59%, 40.40% 16.85%, 41.70% 17.71%, 42.93% 18.85%, 44.28% 19.98%, 45.59% 20.92%, 46.95% 21.59%, 47.80% 21.96%, 48.36% 22.07%, 49.56% 22.18%, 50.36% 22.08%, 51.51% 21.53%, 52.84% 20.52%, 53.18% 20.16%, 54.52% 18.79%, 55.28% 18.16%, 55.83% 17.57%, 57.10% 16.63%, 58.60% 16.42%, 59.57% 16.84%, 61.01% 18.70%, 61.93% 19.94%, 62.34% 21.43%, 62.09% 22.70%, 62.51% 24.02%, 64.16% 25.01%, 65.50% 25.15%, 66.54% 25.00%, 67.81% 24.69%, 68.48% 24.52%, 69.31% 24.20%, 70.06% 23.94%, 70.90% 23.69%, 72.06% 23.26%, 72.99% 22.92%, 73.64% 22.66%, 74.37% 22.32%, 76.43% 21.19%, 78.47% 19.78%, 79.47% 19.02%, 83.40% 16.97%, 85.32% 15.83%, 87.41% 14.88%, 89.56% 14.32%, 92.68% 14.42%, 94.19% 14.88%, 95.37% 15.71%, 97.13% 17.65%, 97.76% 18.61%, 98.51% 20.24%, 98.95% 21.31%, 100% 24%, 100% 0%);
}

:root.golden {
  --inhaltDesign: url('../img/textHintergrund044.jpeg');
}

:root.pflanzen {
  --inhaltDesign: url('../img/textHintergrund023.jpeg');
}

/* Variablen für Computergröße */
@media (min-width: 768px) {
  :root {
    --seitentitelschriftgroesse: 1vw;
    --seitentitelZindex: 100;

    --leistenabstandOben: 0%;
    --leistenSeitenposition: 0%;
    --leistenweite: 100%;
    --leistenstreckungVertikal: 90%;
    --leistenGrafikStreckungVertikal: 17%;
    --leistenGrafikPositionVertikal: 14%;

    --inhaltspositionshoehe: 14%;
    --inhaltanzeigebreite: 40%;
    --inhaltseitenabstand: 30%;
    --inhaltsschriftgroesse: 1.4vw;
    
    --buttonSchriftgroesse: 1.2vw;
    --buttonbreite: 8.5%;
    --buttonabstand: 12%;
    --buttonhoehe: 9%;
    --buttonhoehenpos: 0%;
    --buttonverschiebungHorizontal: 5%;
    --aussenbuttonZusatz: 5%;
  }
}

a {
  text-decoration: none;
  text-underline: none;
}

body {
  font-family: 'Baar-Sophia';  
  color: #000033;
}

#titel {
    position: fixed;
    top: -1%;
    left: 1%;
    font-size: var(--seitentitelschriftgroesse);
    font-weight: bold;
    z-index: 107;
    transform: rotate(-0.0005turn);
}

#untertitel {
    position: fixed;
    top: 0.25%;
    right: 5%;
    width: 20%;
    font-size: var(--seitentitelschriftgroesse);
    font-weight: bold;
    z-index: 107;
    transform: rotate(0.0005turn);
    text-align: right;
    padding: 1%;
}

#menuUmrahmung {
    position: fixed;
    top: var(--leistenabstandOben);
    left: var(--leistenSeitenposition);
    width: var(--leistenweite); 
    height: var(--leistenstreckungVertikal);
    z-index: 105;
    /*object-fit: contain;*/
    /*background-color: #fffffa;*/
    background-image: url('../img/newLeiste01.png');
    background-size: 100% var(--leistenGrafikStreckungVertikal); /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% var(--leistenGrafikPositionVertikal); /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    transform: rotate(-0deg);
    clip-path: var(--umhuellung);
}

#menuHintergrund {
    position: fixed;
    top: var(--leistenabstandOben);
    left: var(--leistenSeitenposition);
    width: var(--leistenweite); 
    height: var(--leistenstreckungVertikal);
    z-index: 104;
    /*object-fit: contain;*/
    background-image: url('../img/rahmenHintergrund03.jpeg');
    background-size: 100% 40%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* 20 Pixel von links, 30 Pixel von oben */
    background-color: #fffefe;
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    transform: rotate(-0deg);
    clip-path: var(--umhuellung);
}

#menuUmschattung1 {
    position: fixed;
    top: calc(var(--leistenabstandOben) + 0.3%);
    left: calc(var(--leistenSeitenposition) + 0.2%);
    width: var(--leistenweite); 
    height: var(--leistenstreckungVertikal);
    z-index: 99;
    /*object-fit: contain;*/
    background-color: #777777;
    opacity: 0.2;
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));*/
    background-size: 100% var(--leistenGrafikStreckungVertikal); /* Zwingt das Bild zum Ausfüllen */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    clip-path: var(--umhuellung);
    filter: blur(10px); /* Optionaler verschwommener Effekt */
}

#menuUmschattung2 {
    position: fixed;
    top: calc(var(--leistenabstandOben) + 0.6%);
    left: calc(var(--leistenSeitenposition) + 0.4%);
    width: var(--leistenweite); 
    height: var(--leistenstreckungVertikal);
    z-index: 98;
    /*object-fit: contain;*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.08));
    background-size: 100% var(--leistenGrafikStreckungVertikal); /* Zwingt das Bild zum Ausfüllen */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    clip-path: var(--umhuellung);
    filter: blur(5px); /* Optionaler verschwommener Effekt */
}

#menuVerschwimmung {
    position: fixed;
    top: calc(var(--leistenabstandOben) + 0.8%);
    left: calc(var(--leistenSeitenposition) + 0.7%);
    width: var(--leistenweite); 
    height: var(--leistenstreckungVertikal);
    z-index: 100;
    /*object-fit: contain;*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.07));
    background-size: 100% var(--leistenGrafikStreckungVertikal); /* Zwingt das Bild zum Ausfüllen */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    clip-path: var(--umhuellung);
    filter: blur(5px); /* Optionaler verschwommener Effekt */
}

#inhaltRahmen1 {
    position:absolute;
    top: 0%;
    left: 0%;
    width: 25%;
    height: 30%;
    background-image: url('../img/rahmenLiObB.png');
    background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat;
    display: none;
    z-index: 300;
}

#inhaltRahmen2 {
    position:absolute;
    top: -2.5%;
    left: 85%;
    width: 25%;
    height: 30%;
    background-image: url('../img/rahmenReObB.png');
    background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat;
    display: none;
}

#inhaltRahmen3 {
    position:absolute;
    top: 60%;
    left: 87%;
    width: 25%;
    height: 30%;
    background-image: url('../img/rahmenReUnB.png');
    background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat;
    display: none;
}

#inhaltRahmen4 {
    position:absolute;
    top: 60%;
    left: -10%;
    width: 25%;
    height: 30%;
    background-image: url('../img/rahmenLiUnB.png');
    background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat;
    display: none;
}

#inhalt {
    position: absolute;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*flex: 1;*/
    /*box-sizing: border-box; /* Inklusive Padding und Border in der Breite/Höhe */
    top: var(--inhaltspositionshoehe);
    left: 0%;
    width: 100%;
    height: 120%;
    /*line-height: 1;*/

    background-image: var(--inhaltDesign);
    background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% 0%; /* calc((-1)*var(--inhaltseitenabstand)) calc((-1)*var(--inhaltspositionshoehe)); /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
}

#inhaltText {
    position: absulute;
    top:0%;
    left: 0%;
    width: var(--inhaltanzeigebreite);
    height: 85%;
    /*line-height: 1;*/
    /*height: auto;*/
    font-size: var(--inhaltsschriftgroesse);
    line-height: 1;
    text-align: justify; /* Aktiviert den Blocksatz */

    /*overflow: visible;*/

    hyphens: auto; /* Aktiviert die Silbentrennung */
    padding-left: var(--inhaltseitenabstand);
    padding-right: var(--inhaltseitenabstand);
    padding-top: 5%;
    padding-bottom: 4%;

    overflow: auto;
    scrollbar-width: none; /* Für Firefox */
    -ms-overflow-style: none; /* Für Internet Explorer und Edge */

    z-index: 70;
}

#grund {
    position: absolute;
    top: 55%;
    left: 0%;
    width: 100%;
    height: 50%;
    background-image: url('../img/newLeiste01.png');
    background-size: 100% var(--leistenGrafikStreckungVertikal); /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% var(--leistenGrafikPositionVertikal); /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    clip-path: var(--umhuellung);
    transform: rotate(-1.5deg) scaleY(-1);
    z-index: 50;
}

#grundHintergrund {
    position: absolute;
    top: 55%;
    left: 0%;
    width: 100%;
    height: 50%;
    background-image: url('../img/unterRahmenHintergrund01.jpeg');
    background-size: 100% 120%; /* Zwingt das Bild zum Ausfüllen */
    background-position: 0% -20%; /* 20 Pixel von links, 30 Pixel von oben */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    clip-path: var(--umhuellung);
    transform: rotate(-1.5deg) scaleY(-1);
    z-index: 40;
}

#grundLinks {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 10%
    width: 10%;
    left: 20%;
    font-size: var(--inhaltsschriftgroesse);
    transform: rotate(-1.5deg) scaleY(-1);
}

.buttonHaupt {
  
}

#button1 {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  top:calc(var(--buttonhoehenpos) + 1.5%);
  left:50%;
  width:calc(var(--buttonbreite) + 0%);
  height:calc(var(--buttonhoehe) + 8%);
  margin-left: calc(0 * var(--buttonabstand) - var(--buttonverschiebungHorizontal));

  color: #000;
  font-size: var(--buttonSchriftgroesse);
  overflow: visible; /* Überlauf sichtbar */
  
  background-image: url('../img/institut.png');
  background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  transition: opacity 0.5s ease-in-out, top 1s ease-in-out, margin-left 1s ease-in-out;
  opacity: 0.6;
}

#button1:hover {
  opacity: 1;
}

#button1:hover + #inhaltRahmen1 {
  display: flex;
}

#button2 {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  top:calc(var(--buttonhoehenpos) + 5.5%);
  left:50%;
  width:calc(var(--buttonbreite) + 2%);
  height:calc(var(--buttonhoehe) + 0%);
  margin-left:calc((-1)*var(--buttonabstand) - var(--buttonverschiebungHorizontal));

  color: #000;
  font-size: var(--buttonSchriftgroesse);
  overflow: visible; /* Überlauf sichtbar */
  
  background-image: url('../img/veroeffentlichungen.png');
  background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  transition: opacity 0.5s ease-in-out, top 1s ease-in-out, margin-left 1s ease-in-out;
  opacity: 0.5;
}

#button2:hover {
  opacity: 1;
}

#button3 {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  top:calc(var(--buttonhoehenpos) + 5.5%);
  left:50%;
  width:calc(var(--buttonbreite) + 2%);
  height:calc(var(--buttonhoehe) + 0%);
  margin-left: calc(var(--buttonabstand) - var(--buttonverschiebungHorizontal) - 3%);

  color: #000;
  font-size: var(--buttonSchriftgroesse);
  overflow: visible; /* Überlauf sichtbar */
  
  background-image: url('../img/veranstaltungen.png');
  background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  transition: opacity 0.5s ease-in-out, top 1s ease-in-out, margin-left 1s ease-in-out;
  opacity: 0.5;
}

#button3:hover {
  opacity: 1;
}

#button4 {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  top:calc(var(--buttonhoehenpos) + var(--aussenbuttonZusatz) + 5%);
  left:50%;
  width:calc(var(--buttonbreite) + 2%);
  height:calc(var(--buttonhoehe) + 0%);
  margin-left: calc((-2)*var(--buttonabstand) - var(--buttonverschiebungHorizontal));

  color: #000;
  font-size: var(--buttonSchriftgroesse);
  overflow: visible; /* Überlauf sichtbar */
  
  background-image: url('../img/themen.png');
  background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  transition: opacity 0.5s ease-in-out, top 1s ease-in-out, margin-left 1s ease-in-out;
  opacity: 0.5;
}

#button4:hover {
  opacity: 1;
}

#button5 {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  top:calc(var(--buttonhoehenpos) + var(--aussenbuttonZusatz) + 4%);
  left:50%;
  width:calc(var(--buttonbreite) + 2%);
  height:calc(var(--buttonhoehe) + 1%);
  margin-left: calc(2*var(--buttonabstand) - var(--buttonverschiebungHorizontal) - 3%);

  color: #000;
  font-size: var(--buttonSchriftgroesse);
  overflow: visible; /* Überlauf sichtbar */
  
  background-image: url('../img/spenden.png');
  background-size: 100% 100%; /* Zwingt das Bild zum Ausfüllen */
  background-repeat: no-repeat; /* Verhindert Wiederholungen */
  transition: opacity 0.5s ease-in-out, top 1s ease-in-out, margin-left 1s ease-in-out;
  opacity: 0.7;
}

#button5:hover {
  opacity: 1;
}

#buttonBeschreibung {
  position: absolute;
  display: flex; /* Flexbox aktivieren */
  
  top: 105%;
  left: 0%;
  width: 100%;
  height: 10%;

  justify-content: center; /* Horizontal zentrieren */
  align-items: flex-end; /* Vertikanl nach ganz unten*/
}