/* ===== basic-css (bereinigt) ===== */
/*
  Hier können Sie eigene Anpassungen am CSS vornehmen.
  Here you can make your own adjustments to the CSS.
*/

/* =========================================================
   ACCESSIBILITY / EINFACHE SPRACHE
========================================================= */
@media screen and (max-width: 600px) {
  .head .low-barrier {
    display: unset;
  }
}

:host(.mobileView) #easy-speech-btn {
  width: 40px !important;
  height: 40px !important;
}

.fixed {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1000;
}

#eyeable-slot {
  width: 40px;
  height: 40px;
}

#eyeable-slot easy-speech {
  top: 0.5rem;
  right: 0.5rem;
}

#eyeable-slot .toolTipHead {
  padding-top: 1.5rem;
}

.scrollToTop {
  right: 0.5rem;
  bottom: 2rem;
  width: 40px;
  height: 40px;
}

.scrollToTop a {
  padding: 10px;
}

/* =========================================================
   EXTERNE LINKS
========================================================= */
a[rel="noreferrer"] {
  padding-right: 2em;
  background-image: url(/fileadmin/bilder/ExternerLink.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 25px;
}

span.more.link-external-blank {
  margin-left: -1px;
  padding-left: 2em;
  background-image: url(/fileadmin/bilder/ExternerLink.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 25px;
}

/* =========================================================
   FAQ
========================================================= */
.tx-jpfaq li h3 {
  position: relative;
  margin-bottom: 3px;
  padding-left: 20px;
  cursor: pointer;
  background-image: url(/fileadmin/Examples/list-signet.png);
}

.tx-jpfaq li li {
  margin-left: 2rem;
  list-style-type: disc;
}

/* =========================================================
   BILDER / FIGCAPTION / COPYRIGHT
========================================================= */
figure figcaption {
  position: relative;
 /* margin-top: -1.5em;*/
  margin-bottom: 1em;
}

figure figcaption span {
  position: absolute;
  top: -2.45em;
  padding: 0 0.5em;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0 10px 0 0;
}

figure figcaption p {
  margin-bottom: 0;
  padding: 0 0.5em;
  color: #000 !important;
  background: rgba(255, 255, 255, 0.7);
}

.ce-textpic figure figcaption p {
  margin-top: 0.5em;
}

.ce-textpic img,
.news-single img {
  margin-top: -0.5em;
  /*padding-bottom: 0.5em;*/
  object-fit: cover;
}

.image-caption {
  color: #000;
}
/* =========================================================
   NEWS / DOWNLOADS / EVENTS
========================================================= */
@media (min-width: 1025px) {
  .news-list-view li,
  .news .info-list li,
  .ce-uploads li {
    display: inline-block;
    width: 50%;
    vertical-align: text-top;
  }

  .news figure {
    padding-top: 17px;
  }

  .news-list-view li > div,
  .news .info-list li > div {
    float: left;
    max-width: 60%;
  }

  .col-6_md-12 .news-list-view li,
  .col-6_md-12 .news .info-list li,
  .col-6_md-12 .ce-uploads li {
    width: 100%;
  }

  .event li {
    position: relative;
    float: left;
    width: 50%;
  }
}

.ce-uploads {
  padding-left: 0;
}

.ce-uploads li {
  position: relative;
}

.ce-uploads li img {
  width: auto;
  max-height: 100px;
  background-color: white;
}

.ce-uploads li a {
  word-break: break-word;
}

.ce-uploads div {
  padding-right: 15px;
}

.dl-bild .ce-uploads div {
  position: absolute;
  display: inline-grid;
  margin-top: -5px;
  padding-left: 15px;
}

.event {
  margin-top: 20px;
  margin-right: -5px;
  margin-left: -5px;
}

.event li {
  min-height: 160px;
  list-style-type: none;
}

.event_item {
  padding-left: 120px;
  list-style-type: none;
  background-image: url(/fileadmin/Examples/signet.svg);
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 5px;
  background-size: 100px;
}

.event li p,
.event li h3,
.events .event_item h3 {
  margin: 0;
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event .location {
  font-weight: 500;
  color: var(--color-green);
}

.events .event_item .time {
  padding-bottom: 10px;
  font-size: 2rem;
  font-weight: 300;
}
/* =========================================================
   FORMULAR / POWERMAIL
========================================================= */
.parsley-required,
.parsley-errors-list {
  color: red;
}

.tx-powermail h3 {
  padding: 0 0 5px;
  font-size: 2.7rem;
  font-weight: 300;
  color: var(--color-green);
}

.powermail_legend {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-darkgreen);
}

.powermail_fieldwrap {
  margin-top: 0.5em;
}

.tx-powermail fieldset {
  margin-top: 0.5em;
  padding: 0.5em;
  border: 1px solid var(--color-green);
  border-top-right-radius: 1em;
}

.powermail_fieldwrap_type_text {
  font-weight: bolder;
}

.powermail_fieldwrap_type_input input,
.powermail_fieldwrap_type_textarea textarea {
  width: 100%;
}

.powermail_field input,
.powermail_field textarea {
  padding: 0.5em;
  font-size: inherit;
  border: 1px solid var(--color-green);
  border-top-right-radius: 1em;
  border-style: outset;
}

.powermail_submit {
  margin: 1rem 0;
  padding: 1rem;
  font-size: inherit;
  font-weight: 600;
  color: #fff;
  background-color: var(--color-petrol);
  border-radius: 0;
  transition: ease-in-out 0.5s;
}

.powermail_submit:hover {
  color: #fff;
  background-color: #ff2f7a;
  border-color: transparent;
  transition: ease-in-out 0.5s;
}

.powermail_confirmation .btn-group .btn {
  float: left;
}

/* =========================================================
   GALERIEN / BILDER
========================================================= */
.ce-image {
  padding: 0.5em 0;
}

.ce-gallery {
  margin: -0.5em;
}

.ce-gallery .ce-row {
  padding: 0.5em;
}

.ce-image .ce-gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.gal-zwei .ce-gallery .ce-row,
.gal-drei .ce-gallery .ce-row,
.gal-vier .ce-gallery .ce-row,
.gal-fun .ce-gallery .ce-row {
  float: left;
  width: 50%;
}

.gal-zwei .ce-gallery img,
.gal-drei .ce-gallery img,
.gal-vier .ce-gallery img,
.gal-fun .ce-gallery img {
  height: 100px;
}

@media (min-width: 400px) {
  .gal-zwei .ce-gallery img,
  .gal-drei .ce-gallery img,
  .gal-vier .ce-gallery img,
  .gal-fun .ce-gallery img {
    height: 150px;
  }
}

@media (min-width: 600px) {
  .gal-drei .ce-gallery .ce-row,
  .gal-vier .ce-gallery .ce-row,
  .gal-fun .ce-gallery .ce-row {
    width: 33.3333%;
  }

  .gal-zwei .ce-gallery img,
  .gal-drei .ce-gallery img {
    height: 200px;
  }

  .gal-vier .ce-gallery .ce-row,
  .gal-fun .ce-gallery .ce-row {
    width: 25%;
  }
}

@media (min-width: 800px) {
  .gal-fun .ce-gallery .ce-row {
    width: 20%;
  }
}

.height-auto .ce-gallery img {
  height: auto;
}

/* =========================================================
   TYPOGRAFIE / ABSTÄNDE / TABELLEN
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
}

h2 {
  color: var(--color-green);
}

.frame-space-after-small {
  margin-bottom: 15px;
}

.frame-space-before-small {
  margin-top: 15px;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 5px;
  border: 1px solid;
}

li {
  padding-bottom: 5px;
}

.text-center {
  text-align: center;
}

.height {
  min-height: 600px;
}

.as-oi {
  padding-top: 10px;
}

/* =========================================================
   SUBNAV / IN-TEXT-BILDER
========================================================= */
@media (min-width: 830px) {
  .sub-nav .inner {
    display: flex;
  }
}

.ce-intext.ce-left .ce-gallery,
.ce-intext.ce-right .ce-gallery {
  margin-top: 20px;
}

.ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery {
  margin-right: 20px;
}

.ce-textpic.ce-right.ce-intext.ce-nowrap .ce-gallery {
  margin-left: 20px;
}

/* =========================================================
   ZITAT-BOX
========================================================= */
.zitat {
  position: relative;
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 20px;
  color: white;
  background-color: var(--color-petrol);
  border-bottom-left-radius: 25px;
}

.zitat h2,
.zitat h3 {
  color: white;
}

.zitat picture {
  display: flex;
  justify-content: center;
}

.zitat img {
  max-width: 200px;
  margin-top: -45px;
  padding: 10px;
  border-radius: 50%;
}

.zitat .bild {
  position: relative;
  padding-bottom: 10px;
}

.zitat .bild p {
  margin: 5px;
  font-weight: 500;
  text-align: center;
}

.zitat .text {
  margin-top: 70px;
  margin-bottom: 60px;
  padding: 15px;
}

.signets-top {
  position: absolute;
  top: -35px;
  right: -85px;
  width: 100%;
  height: 100px;
  background-image: url(/fileadmin/bilder/Signets-gr.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
}

.signets-bottom {
  position: absolute;
  right: 20px;
  bottom: -25px;
  width: 100%;
  height: 80px;
  background-image: url(/fileadmin/bilder/Signets-gr.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  rotate: 180deg;
}

@media (max-width: 600px) {
  .signets-top {
    left: 20px;
    height: 80px;
    background-position: left;
  }

  .zitat .text {
    margin-top: 0;
  }
}

/* =========================================================
   ANIMATIONEN: HERZEN
========================================================= */
.heart,
.heart1,
.heart2 {
  position: absolute;
  bottom: 0;
  background-image: url(/fileadmin/user_upload/Waldfreunde/Herz.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.heart {
  right: 50%;
  z-index: 0;
  width: 100px;
  height: 100px;
  animation: heart-rise-main 6s ease-in-out infinite forwards;
}

.heart1 {
  right: 60%;
  z-index: -2;
  width: 70px;
  height: 70px;
  animation: heart-rise-small-1 3s ease-in-out infinite forwards;
}

.heart2 {
  right: 45%;
  z-index: -2;
  width: 50px;
  height: 50px;
  animation: heart-rise-small-2 3.5s ease-in-out infinite forwards;
}

@keyframes heart-rise-main {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    transform: translateY(-100px) scale(1);
  }
  75% {
    transform: translateY(-150px) scale(1.2) translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes heart-rise-small-1 {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  75% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes heart-rise-small-2 {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  75% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}

/* =========================================================
   ANIMATIONEN: SIGNETS
========================================================= */
@media (max-width: 650px) {
  .signet-animation,
  .signet-animation1,
  .signet-animation2 {
    display: none;
  }
}

.signet-animation,
.signet-animation1,
.signet-animation2 {
  position: absolute;
  bottom: 0;
  background-image: url(/fileadmin/Examples/signet.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.signet-animation {
  right: 50%;
  z-index: 0;
  width: 100px;
  height: 100px;
  animation: signet-rise-main 4s ease-in-out infinite forwards;
}

.signet-animation1 {
  right: 60%;
  z-index: -2;
  width: 70px;
  height: 70px;
  animation: signet-rise-small-1 3s ease-in-out infinite forwards;
}

.signet-animation2 {
  right: 45%;
  z-index: -2;
  width: 50px;
  height: 50px;
  animation: signet-rise-small-2 3.5s ease-in-out infinite forwards;
}

@keyframes signet-rise-main {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  75% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes signet-rise-small-1 {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  75% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes signet-rise-small-2 {
  0% {
    transform: translateY(0) scale(0.2);
    opacity: 1;
  }
  75% {
    transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) scale(1.5);
    opacity: 0;
  }
}


/*HTML-TABELLEN-FOA*/
.event-table { width: 100%; border-collapse: separate; margin: 0 0 1.5rem 0; }
.event-table {
  width: 100%;
  border: 2px solid #4e8408;
  border-spacing: 0;
  border-top-right-radius: 1em;
  overflow: hidden;
}
.event-table td {
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #4e8408;
  border-top: none;
  border-left: none;
  border-right: none;
}
.event-table tbody tr:last-child td { border-bottom: none; }
.event-date {
  width: 140px;
  white-space: nowrap;
  background-color: rgba(78, 132, 8, 0.80);
}
.event-content strong {
  display: inline-block;
  margin-bottom: 0.25rem;
}
.is-hidden {
  display: none !important;
}

/* =========================================================
   BOXEN / HINTERGRÜNDE
========================================================= */
.bg-weiss,
.bg-blau,
.bg-gruen,
.bg-gelb,
.bg-orange {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 1em;
}

.bg-blau {
  color: white;
  background-color: var(--color-petrol);
}

.black .bg-blau {
  color: black;
  background-color: white;
}

.bg-gruen {
  color: white;
  background-color: var(--color-green);
}

.bg-weiss {
  background-color: rgba(255, 255, 255, 0.85);
}

.bg-gelb {
  background-color: rgba(255, 242, 15, 1);
}

.bg-orange {
  color: white;
  background-color: rgba(154, 99, 38, 1);
}

.bg-weiss header,
.bg-gelb header,
.bg-gruen header,
.bg-blau header {
  margin-top: -15px;
}

.bg-blau h1,
.bg-blau h2,
.bg-blau h3,
.bg-blau h4,
.bg-blau a,
.bg-blau li,
.bg-blau .more,
.bg-blau .powermail_legend,
.red-green-grade,
.red-green-grade h2,
.red-green-grade h3,
.bg-gruen h1,
.bg-gruen h2,
.bg-gruen h3,
.bg-gruen h4,
.bg-gruen a,
.bg-gruen li,
.bg-gruen .powermail_legend,
.bg-orange h1,
.bg-orange h2,
.bg-orange h3,
.bg-orange h4,
.bg-orange a,
.bg-orange li {
  color: white;
}

.black .bg-blau h1,
.black .bg-blau h2,
.black .bg-blau h3,
.black .bg-blau h4,
.black .bg-blau a,
.black .bg-blau li,
.black .bg-blau .more {
  color: black;
}

.bg-weiss .powermail_legend,
.bg-weiss .tx-powermail label,
.bg-weiss .tx-powermail p,
.bg-weiss .powermail_field {
  color: var(--color-green);
}

.bg-weiss .tx-powermail a {
  color: var(--color-petrol);
}

.bg-gelb .ce-bodytext,
.bg-weiss .ce-bodytext,
.bg-gruen .ce-bodytext,
.bg-blau .ce-bodytext {
  margin-top: -15px;
  margin-bottom: -15px;
}

/* =========================================================
   RUNDUNGEN
========================================================= */
.br-lu,
.br-lu img {
  border-bottom-left-radius: 1em;
}

.br-lo,
.br-lo img {
  border-top-left-radius: 1em;
}

.br-ru,
.br-ru img {
  border-bottom-right-radius: 1em;
}

.br-ro,
.br-ro img {
  border-top-right-radius: 1em;
}

/* =========================================================
   ACCORDION / TOOLTIP-LISTEN
========================================================= */
.lmf-accordion {
  margin-right: -5px;
  margin-left: -5px;
}

.lmf-accordion .accordion header {
  display: inline-block;
}

.accordion-tooltip-list {
  margin-top: 15px;
  margin-right: -44px;
}

.accordion-tooltip-list > li {
  float: left;
  width: 90%;
  padding-left: 5px;
  page-break-inside: avoid;
}

.accordion-tooltip-list > li::marker {
  padding-left: 5px;
}

.accordion-map-tooltip {
  margin-right: 35px;
  padding-left: 15px;
}

@media (min-width: 601px) {
  .accordion-tooltip-list {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
}

@media (min-width: 1025px) {
  .accordion-tooltip-list {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
  }
}

/* =========================================================
   HEADER / LOGO
========================================================= */
.head .logo,
.head .logo-bg {
  height: 90px;
  padding: 23px 0 0 0;
}

/* =========================================================
   STARTSEITE / KACHELN
========================================================= */
.forstamt-breit h2 {
  color: var(--color-green);
}

.forstamt-breit .col-6_md-12 {
  width: 100%;
  margin-top: 2rem;
}

.fancy-kacheln h3,
.fancy-kacheln h4 {
  margin-top: 0.4rem;
  margin-bottom: 0;
  padding: 0.5em;
  font-weight: 100;
  word-wrap: break-word;
  color: var(--color-green);
  background-color: white;
  border-top: 1px solid;
  border-left: 1px solid;
  border-top-right-radius: 1em;
}

.black .fancy-kacheln h3 {
  color: black;
}

.fancy-kacheln a {
  text-decoration: none;
}

.fancy-kacheln img {
  width: -webkit-fill-available;
  width: -moz-available;
  margin-bottom: -5px;
}

.fancy-kacheln p {
  margin-top: 0.5em;
}

.fancy img {
  border-radius: 0;
}

/* =========================================================
   UMBRUCH-HELFER
========================================================= */
.umbruch-nie .col-6_md-12 {
  width: 50%;
}

.umbruch-nie .col-4_md-6_sm-12 {
  width: 33%;
}

@media (min-width: 700px) {
  .umbruch-spaet .col-6_md-12 {
    width: 50%;
  }

  .umbruch-spaet .col-4_md-6_sm-12 {
    width: 33%;
  }
}

@media (min-width: 500px) {
  .umbruch-spaet .col-6_md-12 .col-6_md-12 {
    width: 50%;
  }

  .umbruch-spaet .col-4_md-6_sm-12 .col-4_md-6_sm-12 {
    width: 33%;
  }
}

@media (max-width: 1023px) {
  .umbruch-nie [class*="_md-6"]:nth-child(2n + 1) {
    clear: none;
  }

  .umbruch-nie [class*="_md-6"] {
    width: 33.33%;
  }
}

/* =========================================================
   PAYPAL / SLICK / SLIDER
========================================================= */
.ppvx_container___2-7-9 {
  padding: 0;
}

.slick-slide img {
  width: 100%;
}

.image h2 {
  display: none;
}

.slick-slide .image h2 {
  display: contents;
}

/* =========================================================
   NEWS / TEASER / SUCHE
========================================================= */
.news .style3,
.news-footer .news-list-category,
.no-button .btn-icon {
  display: none;
}
.news li img {    
    height: 110px;
    object-fit: cover;
}
.teaser figcaption {
  margin-top: -15px;
  margin-bottom: -20px;
  font-size: 1.4rem;
  text-align: right;
}

.teaser figcaption span {
  position: relative;
  padding: 3px 5px;
  color: black;
  background-color: white;
  border-top-left-radius: 10px;
}

.teaser-content .inner {
  padding-top: 1px;
  padding-bottom: 20px;
}

.teaser a,
.teaser h3 {
  color: var(--color-green);
}

.teaser img {
  height: 190px;
}

.teaser-cat {
  max-width: 420px;
}

.teaser-cat img {
  height: 230px;
  object-fit: cover;
}

.search .input {
  border: 2px solid var(--color-petrol);
}

.footer {
  margin-top: 20px;
}
