/* https://getcssscan.com/css-box-shadow-examples   */
/* -------------------------------------------------------------------------------------------------------------------- */
/* IMAGETABLE */
.image-wrapper {
    display: inline-block;
    border: 4px solid rgba(60, 76, 114, 0.58);
    background-color: rgba(60, 76, 114, 1.0);
    margin: 1% 8%;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.5;
}
.image-wrapper:hover {
    opacity: 1.0;
}
/* Standard: Text links, Bild rechts */
.news-card-01 {
  display: grid;
  grid-template-columns: 70% 1fr;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: rgba(210, 255, 255, 0.4);
  margin: 5px 0; /* Abstand zwischen den Karten */
  -webkit-backdrop-filter: blur(var(--blur-effekt, 5px));
  backdrop-filter: blur(var(--blur-effekt, 5px));
  transition: all 0.6s ease-in-out; /* sanfter Übergang für Layout-Änderung */
  overflow-y: visible; /* WICHTIG: verhindert, dass das Bild den Text abschneidet */
  overflow-x: hidden;
  }

 

.news-card-01 .image-gallery {
    border: 5px solid black;
    display: none;
}

/* Spiegelverkehrt bei jedem zweiten Eintrag */
.news-card-01:nth-child(even) {
  grid-template-columns: 1fr 70%; /* Bild links, Text rechts */
}

.news-card-01:nth-child(even) .news-card-01-text {
  order: 1; /* Text nach rechts */
}

.news-card-01:nth-child(even) .news-card-01-image {
  order: 0; /* Bild nach links */
}


.news-card-01-text {
  display: flex;
  flex-direction: column;
  padding: 20px 30px 20px 30px;
}

/* Header horizontal */
.news-card-01-header {
  display: flex;                  /* Row = horizontal */
  justify-content: space-between; /* Links/ Rechts */
  align-items: flex-start;        /* Oben ausrichten */
  margin-bottom: 10px;
}

/* Linker Container: Title + Subtitle übereinander */
.news-card-01-title-wrapper {
  display: flex;
  flex-direction: column; /* Subtitle unter Title */
  align-items: flex-start;
}


.news-card-01-header h3{
  f/ont-size: 2.0rem;
  transition: all 0.5s ease-in-out;
}

#news-subtitle {
  font-size: 1.5rem;
  transition: all 0.5s ease-in-out;
}
.news-card-01-title-wrapper h4 {
  font-size: 1.3rem;
  padding-top: 4px;
}

/* Autor/Datum oben rechts */
.news-card-01-meta {
  font-size: 0.9rem;
  color: black;
  text-align: right;
}

.news-card-01-text p {
  margin: 0;
  line-height: 1.5;
  padding-bottom: 20px;
  
}

.news-card-01-image {
  position: relative;
  width: 100%;
  height: 100%; /* füllt die Zelle */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 8% 100%);
  overflow: hidden;
}

@media (min-width: 701px) {
  .news-card-01-image {
    aspect-ratio: 4 / 3;
  }
}

.news-card-01:nth-child(even) .news-card-01-image {
  clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%);
}

.news-card-01-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease-in-out;

}

.news-card-01:hover .news-card-01-image img {
      transform: scale(1.1); 
}


/* Standard: 70% Text, 30% Bild */
.news-card-01 {
  grid-template-columns: 70% 1fr;
}

/* Unter 990px: Bild breiter machen */
@media (max-width: 990px) {
    .news-card-01 {
        grid-template-columns: 60% 1fr;
    }

    .news-card-01:nth-child(even) {
        grid-template-columns: 1fr 60%;
    }

    .news-card-01-header h3{
        font-size: 1.2rem;
    }
}



/* Responsive */
/* Für Mobil (falls nötig, überschreiben die vorhandenen Regeln ohnehin) */
@supports(selector(:has(*))) {
  @media (max-width: 700px) {
    .news-card-01:not(:has(.news-card-01-image)) .news-card-01-text {
      order: 1;
    }
  }
}
@media (max-width: 700px) {
  .news-card-01 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    max-height: none;
    height: auto;
  }

  /* Bild immer oben für alle Karten */
  .news-card-01-image,
  .news-card-01:nth-child(even) .news-card-01-image {
    order: 0;           
    width: 100%;
    height: auto;       /* Höhe automatisch an Bild anpassen */
    clip-path: none;
    position: relative; /* Container relativ */
  }

  .news-card-01-image img,
  .news-card-01:nth-child(even) .news-card-01-image img {
    position: relative; /* Keine absolute Position mehr */
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .news-card-01-image img {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
  }
    
  .news-card-01:nth-child(even) .news-card-01-image img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
  }
    
  /* Text immer unten für alle Karten */
  .news-card-01-text,
  .news-card-01:nth-child(even) .news-card-01-text {
    order: 1;           
  }

  /* Paragraph komplett anzeigen */
  .news-card-01-text p {
    max-height: none;
    overflow: visible;
  }

  /* Grid auf eine Spalte zwingen */
  .news-card-01,
  .news-card-01:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

}

/* Wenn kein Bild-Element vorhanden ist: Text über die gesamte Breite */
.news-card-01:not(:has(.news-card-01-image)) {
  grid-template-columns: 1fr;      /* nur eine Spalte */
  max-height: none;               /* optional: Höhe anpassen, falls benötigt */
}

/* Sicherstellen, dass Text die ganze Breite nutzt */
.news-card-01:not(:has(.news-card-01-image)) .news-card-01-text {
  grid-column: 1 / -1;
  width: 100%;
  padding-right: 30px; /* optional: Abstand rechts beibehalten */
}



.news-bs5-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.news-bs5-image {
    flex: 0 0 40%;
    border-radius: var(--border-radius-images);
    border: 1px solid var(--border-color-images);

}
.news-bs5-image p{
    padding: 0px 5px;
}

.news-bs5-image img {
    width: 100%;
    height: auto;
}

.news-bs5-text {
    flex: 0 0 60%;
}

/* Responsive: Bild über Text bei Bildschirmbreite < 700px */
@media (max-width: 991px) {
    .news-content {
        flex-direction: column;  /* Container vertikal */
        gap: 10px;               /* Abstand zwischen Bild und Text */
    }

    .news-image {
        flex: 1 1 100%;          /* Bild nimmt volle Breite */

    }

    .news-text {
        flex: 1 1 100%;          /* Text darunter ebenfalls volle Breite */
    }

    .news-image img {
        width: 100%;             /* Bild passt sich Containerbreite an */
        height: auto;
    }
}

/* ======= Mobil: Spalten-Layout korrekt (keine Überlappung) ======= */
@media (max-width: 700px) {

    
    
}


/* -- bs-images_neu.css ----------------------------------------------------------------------------------------------- */
/* .image-td img, .image-img,
/* Spezial Hover für Bilder mit Scale */
.image-td img, .image-img, .image-item img, .imageEntry img, .image-gallery-item img, .youtube-player img, .news-teaser-right img,
.iso-image-gallery-item img, .isotope-image-item img, img.img-responsive {

    transition: 0.5s all ease-in-out;
    width: auto; 
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    a/nimation: kenburns 12s ease-in-out infinite  alternate;
    overflow:hidden;
}

.imgtxt-left img:hover, .imgtxt-right img:hover, .imgtxt-column-left-image img:hover, .imgtxt-column-right-image img:hover, .image-td img:hover,
 img.img-responsive:hover {
   -webkit-transform: 	translateY(10px) scale(1.1);
   -moz-transform: 		translateY(10px) scale(1.1);
   -o-transform: 		translateY(10px) scale(1.1);
   -ms-transform: 		translateY(10px) scale(1.1);
	transform:			translateY(10px) scale(1.1);
	filter:brightness(0.9);
  	cursor: zoom-in;
     overflow:hidden;
}

.image-item img:hover, .imageEntry img:hover, .image-gallery-item img:hover, .iso-image-gallery-item img:hover, .isotope-image-item img:hover{
   -webkit-transform: 	translateY(10px) scale(1.1);
   -moz-transform: 		translateY(10px) scale(1.1);
   -o-transform: 		translateY(10px) scale(1.1);
   -ms-transform: 		translateY(10px) scale(1.1);
	transform:			translateY(10px) scale(1.1);
	transform:			scale(1.1);
	filter:brightness(0.9);
  	cursor: zoom-in;
    padding: 0:
} 





@keyframes kenburns {
  0% {
    transform: translate(-2%, 0) scale(1.05); /* Start: größer + etwas mehr nach links/unten */
  }
  100% {
    transform: translate(0, 0) scale(1.0); /* Endpunkt: kleiner + weiter nach rechts oben */
  }
}

/* Bilder <div> 1, 2, 3, 4, 6 Spalten einzustellen in Bilder DIV Spalten ----------------------------------------------*/
.images {   
    position: relative; 
}
.image-sizer {float: left;}

.images [class*="col-"] {
    padding: 0;
}

.images .imageEntry{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.1%;
    margin-bottom: 0.1%;
    border-radius: var(--border-radius-images);  
    b/order-top-left-radius:  var(--border-radius-images);
    b/order-top-right-radius: var(--border-radius-images);
    overflow: hidden;    
}


/* .images .imageEntry , .image-td */
.image-td{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.1%;
    margin-bottom: 0.1%;
    border-radius: var(--border-radius-images);
    overflow: hidden;
    
}
.imageEntry figure{
    border-radius: var(--border-radius-images);  
}


.image-thumb {
    position: relative;
    display: flex;
    max-width: 100%;
    flex-grow: 1;
    
    border-radius:           var(--border-radius-images);
    border-top-left-radius:  var(--border-radius-images);
    border-top-right-radius: var(--border-radius-images);

    height: 100% !important;

    object-fit: cover;
 }
#slider_full_width .image-thumb{

    border-radius: 0;
}


.isotope-image-item{
    display: flex;
    flex-direction: column;
    padding: 0.1%;
    overflow: hidden;
    margin-bottom: 0.1%;
}

.imageEntry img, .isotope-image-item img{
    width: auto !important;
    height: 100% !important;
    object-fit: cover;
}


#image-radius .images .imageEntry {
   border-radius: var(--border-radius-images);
}

/*---- Bilder <div>  ----------------------- , figcaption ------------------------------------------------------------- */
.right-container .image-caption , .left-container .image-caption{
    font-size: 0.75rem;
}

.imageEntry p, .isotope-images .isotope-image-item p,  .image-caption{
    font-size: 0.90em;
    padding: 3px 3px 2px 3px;
    margin: 0;
    background: rgba(255, 255, 255, 0.5);
    border-bottom-left-radius: var(--border-radius);  
    border-bottom-right-radius: var(--border-radius); 

    border-left:   1px solid rgba(0, 0, 0, 0.1);
    border-right:  1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-width: 100%;
    max-width: 100%;
}
/*-----------  Text mit Bild  ----------------------------------------------------------------------------------------- */ 
.imgtxt-left{
    position: relative;
    float: left;
    width: auto;
    height: auto;
	max-width: 100%;
	max-height: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-images, 6px);
}

.image-left {
    position: relative;
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    max-width: 100%;
	max-height: 100%;
    height: auto;
    border-radius: var(--border-radius-images, 6px);
    overflow: hidden;
}

.image-right {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-left: 15px;
    max-width: 100%;
	max-height: 100%;
    height: auto;
	border-radius: var(--border-radius-images, 6px);
    overflow: hidden;
}

 .imgtxt-left, .imgtxt-right, .image-left , .image-right{
    position: relative;
    overflow: hidden;
}   

.image-center {
    position: relative;
    text-align: center;
}

@media (max-width: 500px) {
     .imgtxt-left, .imgtxt-right, .image-left , .image-right{
        max-width: 100%;
        min-width: 100%;
        height: auto;
    }   
    
    .image-td img{
        max-width: 100%;
        min-width: 100%;
        height: auto;
    }
}

div.imgtxt-top-right, div.imgtxt-bottom-right {
    position: relative;
    float: right;
    margin: 0 0 1em 1em;
    clear: both;
}

div.imgtxt-column-right .imgtxt-column-right-text {
    position: relative;
    float: left;
    margin: 0 0 0;
    width: 62%;
}

div.imgtxt-column-right .imgtxt-column-right-image {
    position: relative;
    float: right;
    margin: 0 0 0 0;
    width: 36%;
}

div.imgtxt-column-left .imgtxt-column-right-left {
    position: relative;
    float: right;
    margin: 0 0 0;
    width: 61%;
}

div.imgtxt-column-left .imgtxt-column-left-image {
    position: relative;
    float: left;
    margin: 0 1em 1em 0;
    width: 36%;
}

div.imgtxt-column-left-image  {
    width: auto;
    overflow: hidden;
}

/* News Galerien ------------------------------------------------------------------------------------------------------ */
.news .news-col-image,
.news-teaser-right .news-image,
.news-teaser-right .news-col-image {
    border: 1px solid var(--border-color-images, rgba(0,0,0,0.15));
    border-radius: var(--border-radius-images);
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-col-image img{
    margin: 0;
    width: 100%;
}
.news-col-image p{
	font-size: 0.80em;
	padding: 2px 3px 0px 3px;
	margin: 0;
}

.image-gallery-item {
    float: left;
    padding: 2px;
    overflow: hidden;
    border-radius: var(--border-radius-images);
}

.image-gallery-item img {
    object-fit: fill;
    clear: both;
	width: 100%;
	height: 100%;
    float: left;
    padding: 0;
    border-radius: var(--border-radius-images);
}

.image-gallery-item-caption {
    font-size: 0.8em;
    padding: 3px 3px 0 3px;
    margin: 0;
    background: rgba(255, 255, 255, 0.3);
    border-left:   1px solid rgba(0, 0, 0, 0.3);
    border-right:  1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3)
}

/*---- Bilder figure / Hover effekt -----------------------------------------------------------------------------------*/
.readme a{
    text-decoration: none;
}
.readme:hover{
    background: #00000050;
    text-decoration: none;
}
.lupe{
    display: none;
} 

/*-----------  Bilder <div>  -----------------------------------------------------------------------------------------*/ 
/* Bild Text card */

.text-card{
    padding: 15px;
    margin-bottom: 10px;

	border-radius:    var(--border-radius, 4px);
	border: 1px solid var(--border-color, #00000010);
    b/ackground: rgba(255,255,255,0.0);
    b/ox-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    overflow: auto;
    -webkit-backdrop-filter: blur(var(--blur-effekt));
    backdrop-filter:         blur(var(--blur-effekt));
}

.text-image {
	font-size: 6em; 
    font-family: "Arial Black";
    line-height: 130%;
    text-align: center;
    background-image: url(../images/page/blume.jpg);
    background-size: 100% 100%;
	background-attachment:fixed;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px black;
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-card .imageEntry{
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: 10px;
    padding: 0;
    border-radius: var(--border-radius-images);
}

.text-card h3 {margin: 0;}
.text-card h4 {margin-top: 0;}

.text-card-image-left{
    float: left;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: var(--border-radius-images);
    margin: 8px auto 0 auto;
}
.text-card-image-right{
    float: right;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: var(--border-radius-images);
    margin: 8px auto 0 auto;
}

/* zentrieren Bild */
@media (max-width: 768px) {
    .text-card-image-left, .text-card-image-right{
        float: none;
    }
}
/* text-card-01 ------------------------------------------------------------------------------------------------------- */

.text-card-01 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.im/ages .text-card-01-text {
    position: relative;
    float: left;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.90);
    padding: 10px 15px 0px 15px;
    text-align: justify;
    flex-grow: 1;
    translate: 3.0% 30%; /* Standard für Desktop */
    transition: translate 1.3s easy-in-out;
    z-index: 1;
    height: fit-content;
}
.images .text-card-01-text {
    position: relative;
    float: left;
    b/order-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.90);
     b/ackground-image: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(207,233,250,0.9) 100%);

    padding: 25px 40px;
    text-align: justify;
    flex-grow: 1;
    translate: -3.0% 30%; /* Standard für Desktop */
    transition: translate 1.3s easy-in-out;
    z-index: 1;
    height: fit-content;
    border-radius: 0px 30px 0px 30px !important;
}

.i/mages .text-card-01-text {
    background: linear-gradient(to right, transparent 0%, transparent 75%, skyblue 100%, skyblue 100%), linear-gradient(to top right, transparent 49.5%, white 50%), linear-gradient(to bottom right, #ededed 49.5%, white 50%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.text-card-01 .imageEntry {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
    margin-bottom: 0;
}

.images .text-card-01-text p {
    font-size: 0.99em;
}

@media only screen and (min-width: 992px) {
    .text-card-01 h3 {
        position: relative;
        display: inline-block;
        width: fit-content;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 1.1;
        font-weight: 900;
        color: #e42a1d;
        letter-spacing: -0.03rem;
        font-size: 4.4rem;
        a/nimation: fadeInLeft 0.5s ease-in forwards;
        o/pacity: 0;
        margin-top: -3.50rem;
    }

    .content-container .text-card-01 h3::after {
        position: absolute;
        content: "";
        left: 6.8%;  
        bottom: 5px; 
        width: 98%;  
        height: 2px;  
        background-color: blue;  
        a/nimation: fadeInLeft 0.5s ease-out forwards;
        a/nimation-delay: 0.4s;
        o/pacity: 0;
    }
    
    .te/xt-card-01-text::before {
        content: "";
        position: absolute;
        top: 2px;
        bottom: 2px;
        right: -30px;
        width: 30px;
        b/ackground: rgba(255, 255, 255, 1.90);
        background: skyblue;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        a/nimation: fadeInLeft 0.9s ease-out forwards;
        a/nimation-delay: 0.5s;
        o/pacity: 0;
    }
    .text-card-01 .imageEntry {
        a/nimation: fadeInRight 0.9s ease-in-out forwards;
    }
}



@media only screen and (min-width: 1300px) {
    .images .text-card-01-text {
        translate: 3.0% 20%;
    }
}

@media only screen and (max-width: 1200px) {
    .images .text-card-01-text {
        translate: 3.0% 8%;
    }
}

@media only screen and (max-width: 991px) {
    .images .text-card-01-text {
        translate: 0.0% 0%;
    }

    .images .text-card-01-text {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        padding: 10px 20px 0px 20px;
    }
    .images .text-card-01 .imageEntry, .text-card-01 img.image-thumb {
        border-top-left-radius: 0;
        border-top-right-radius:   var(--border-radius-images);
        border-bottom-left-radius:  0;
        border-bottom-right-radius:  var(--border-radius-images);

    }

}

@media only screen and (max-width: 540px) {
    .text-card-01 {
        flex-direction: column-reverse;
    }

    .images .text-card-01-text {
        height: fit-content;
    }

    .images .text-card-01-text p {
        font-size: 1.0rem;
    }
    
    .images .text-card-01-text {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        padding: 10px 20px 0px 20px;
    }
    
    .images .text-card-01 .imageEntry, .text-card-01 img.image-thumb {
        border-top-left-radius: var(--border-radius-images);
        border-top-right-radius: var(--border-radius-images);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
}

/* text-card-02 ------------------------------------------------------------------------------------------------------- */

.text-card-02 {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
}

.images .text-card-02-text {
    position: relative;
    float: left;
    b/order-radius: var(--border-radius);
    background: rgba(255, 255, 255, 1.90);
     b/ackground-image: linear-gradient(90deg, rgba(255,255,255,0.7) 0%, rgba(207,233,250,0.9) 100%);

    padding: 25px 40px;
    text-align: justify;
    flex-grow: 1;
    translate: -3.0% 30%; /* Standard für Desktop */
    transition: translate 1.3s easy-in-out;
    z-index: 1;
    height: fit-content;
    border-radius: 0px 30px 0px 30px !important;
}
    .text-card-02-text::after {
        display: none;
    }
}



.images .text-card-02-text {
    b/ackground: rgba(255, 255, 255, 0.8);
   



    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

.text-card-02 .imageEntry {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0;
    margin-bottom: 0;
}

.images .text-card-02-text p {
    font-size: 0.99em;
}

@media only screen and (min-width: 992px) {
    .text-card-02 h3 {
        position: relative;
        display: inline-block;
        width: fit-content;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height: 1.1;
        font-weight: 900;
        color: #e42a1d;
        letter-spacing: -0.03rem;
        font-size: 4.4rem;
        a/nimation: fadeInRight 0.5s ease-in forwards;
        o/pacity: 0;
        margin-left: 10px;
        margin-top: -3.50rem;
    }

    .content-container .text-card-02 h3::after {
        position: absolute;
        content: "";
        left: 6.8%;  
        bottom: 5px; 
        width: 98%;  
        height: 2px;  
        background-color: blue;  
        a/nimation: fadeInRight 0.5s ease-out forwards;
        a/nimation-delay: 0.4s;
        o/pacity: 0;
    }
    
    .text-card-02-text::after {
        content: "";
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: -30px;
        width: 30px;
        b/ackground: rgba(255, 255, 255, 1.90);
        background:skyblue;
        clip-path: polygon(100% 0, 0% 50%, 100% 100%);
        a/nimation: fadeInRight 0.9s ease-out forwards;
        a/nimation-delay: 0.5s;
        o/pacity: 0;
    }
    .text-card-02 .imageEntry {
        a/nimation: fadeInLeft 0.9s ease-in-out forwards;
    }
}

@media only screen and (min-width: 1300px) {
    .images .text-card-02-text {
        translate: -3.0% 20%;
    }
}

@media only screen and (max-width: 1200px) {
    .images .text-card-02-text {
        translate: -3.0% 8%;
    }
}

@media only screen and (max-width: 991px) {
    .images .text-card-02-text {
        translate: 0.0% 0%;
    }

    .images .text-card-02-text {
        border-top-left-radius: 0;
        border-top-right-radius:  var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        padding: 10px 20px 0 20px;
    }
    .images .imageEntry, img.image-thumb {
        border-top-left-radius: var(--border-radius-images);
        border-top-right-radius:   0;
        border-bottom-left-radius:  var(--border-radius-images);
        border-bottom-right-radius:  0;
    }

}

@media only screen and (max-width: 540px) {
    .text-card-02 {
        flex-direction: column-reverse;
    }

    .images .text-card-02-text {
        height: fit-content;
    }

    .images .text-card-02-text p {
        font-size: 1.0rem;
    }
    
    .images .text-card-02-text {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        padding: 10px 20px 0 20px;
    }
    
    .images .text-card-02 .imageEntry, img.image-thumb {
        border-top-left-radius: var(--border-radius-images);
        border-top-right-radius: var(--border-radius-images);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
}





/* KARTEN - Animierte Slides -Bilder Spezial -------------------------------------------------------------------------- */
.bg-animation {
    backdrop-filter: blur(0);
    animation: bg-animation 24s infinite;
}
#test {
    background-image: url(../images/page/bg-06.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(0);
}

.karte {
	position: relative;
    display: inline-block; 
	height: 320px;
    padding: 10px;
    border-radius: var(--border-radius-images);
	b/ox-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16), 0 2px 8px 0 rgba(0, 0, 0, .51);
	overflow: hidden;
}

.karte-vorne {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: end;
    padding: 15px;
    b/ackground: rgba(0, 128, 0, 0.24);
    border-radius: var(--border-radius-images);
    overflow: hidden;
}

.karte-hinten {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 3px;
    padding: 25px;
    background-color: rgb(135, 206, 235);
    border-radius: var(--border-radius-images);
    overflow: hidden;
}

.karte-vorne h3 {
    position: absolute;
    top: 10px;
    font-weight: 400;
    text-transform: uppercase;
    b/ackground: rgba(128, 128, 128, 0.1);
    border-radius: var(--border-radius);
    padding: 10px 10px 5px 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    width: max-content;
    color: var(--font-color-h3);
}

.karte-hinten h4 {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--font-color-h4);
    padding-bottom: 10px;
}

.karte-hinten p {
    color: black;
        font-size: 0.9em;
	text-align: justify;
}

.karte-hinten ul {
    list-style: circle;
    padding-left: 22px;
}

.karte-hinten > ul > li {
    font-size: 0.90em;
    color: black;
}


/* Anfang Slide in Left -----------------------------------*/


.karte .slideInLeft {
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    margin: 0;
    color: white;
    transition: all 0.5s ease;
}

.karte:hover .slideInLeft {
    left: 0;
    cursor: pointer;
}


/* Transitions  Anfang - - - - - - - - - - */

@-webkit-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
	0%{top:-30px; opacity: 0;}
	100%{top:0px; opacity: 1;}
}

/* Anfang Slide in Bottom -----------------------------------*/


.karte .slideInBottom {
    position: absolute;
	top: 100%;
	width: 100%; 
	height:100%;
    margin: 0;
    color: white;
    transition: all 0.5s ease;
}

.karte:hover .slideInBottom {
	top: 0;
    cursor: pointer;
}

/* Anfang Slide in Right -----------------------------------*/


.karte .slideInRight {
	left: 100%;
	width: 100%; height:100%;
	margin: 0;
	color: white;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.karte:hover .slideInRight {
	left: 0;
    cursor: pointer;
}

/* Anfang Slide in Top -----------------------------------*/

.karte .slideInTop {
    position: absolute;
	top: -100%;
	width: 100%; 
	height:100%;
    margin: 0;
    color: white;
    transition: all 0.5s ease;
}



.karte:hover .slideInTop {
	top: 0;
    cursor: pointer;
}


/*- BS - Cards - Version 01 ------------------------------------------------------------------------------------------- */
.card {
	overflow: hidden;
	border: 0;
}
.card-title{
    margin-bottom: 0;
}
/* Breite wird durch col- bestimmt! */
.card-01 {
	position: relative;  /* <-- Position relativ zum übergeordneten Container */
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background-color: #fff;
	background-clip: border-box;
    border-radius: var(--border-radius-images);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.25s;
    overflow: hidden;
}
.card-01 .card-img-top {
    border-radius: var(--border-radius-images) var(--border-radius-images) 0 0;
}

.card-01-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1rem;

}

.card-01-title {
    position: absolute;
    top: 15px;
    left: 15px;
    background: hsl(208,56%,11%, 0.3);
    border-radius: var(--border-radius-images);
    margin: 0;
    padding: 10px;
}

.card-01-body h4 {
    font-size: 1.0rem;
    color: white;
}

#content .card-01-body >  h4:before {
    content: none;
}

.card-01-text {
	flex-grow: 1;
	min-height: 16rem; 
    padding-bottom: 5px;
	text-align: start;
}
.card-01-text p {
    margin: 0;
    font-size: 0.9rem;
}

.mx-1-2{
    margin-right: 0.05rem !important;
    margin-left:  0.05rem  !important;
}

/* BS-Cards Version 02  ----------------------------------------------------------------------------------------------- */

.card-02 {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background-color: #fff;
	background-clip: border-box;
	border-radius: var(--border-radius-images, 6px);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.25s;
    overflow: hidden;
}

.card-02:hover {
	box-shadow: 0 8px 17px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
}

.card-02-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1rem;
}

.card-02-img-top {
	border-radius: var(--border-radius-images, 6px);
}

.card-02-title a {
	color: black;
	text-decoration: none;
}

.card-02-text {
  flex-grow: 1;
  font-size: 1.0rem;
  text-align: start;
  min-height: 21.0rem; 
  overflow: hidden;
}

.card-02-text p {
    margin: 0;
}

.card-02-read-more {
	margin: 0 -15px -15px -15px;
	height: 35px;
	border-top: 1px solid #00000020;
	text-align: center;
}

.card-02-read-more:hover {
	background-color: #00000020;
}

/* ------------------------------------------------------------------------------------------------------------------- */