/* 5 Spalten Layout */
.col-5 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 20%;
    float: left;
}

/* Responsive Verhalten wie Bootstrap */
@media (max-width: 991px) {
    .col-5 {
        width: 33.3333%; /* 3 pro Reihe auf Tablet */
    }
}

@media (max-width: 767px) {
    .col-5 {
        width: 50%; /* 2 pro Reihe auf Mobile */
    }
}

@media (max-width: 480px) {
    .col-5 {
        width: 100%; /* 1 pro Reihe auf sehr klein */
    }
}

img.img-responsive {
    margin-top: -22px;
}

/* ============================= hover box ====================== */

/* Boxen gleich hoch */
.hover-box {
  display: flex;
}

.hover-box .thumb1 {
  display: flex;
  flex: 1;
}

.hover-box .thumbnail {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 600px;      /* deine Wunschhöhe */
  padding: 12px;
  background: #111;
  border: 1px solid transparent;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.hover-box:hover .thumbnail {
  border-color: #c29032;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.25);
}

/* Bildfläche: feste Höhe + kein Zuschneiden */
.thumb1 figure {
  margin: 0 0 35px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  color: #d0d0d0;
}

.thumb1 figure img,
.thumb1 figure picture,
.thumb1 figure video {
  width: 100%;
  height: 250px;
  object-fit: contain;    /* WICHTIG: nicht zuschneiden */
  display:block;
  background: #0c0c0c;
}

/* Caption füllt den Rest, damit "weiter lesen" unten bleibt */
.thumb1 .caption {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.thumb1 .txt2 {
  flex: 1;
  overflow: hidden;
  padding: 12px 0 0 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* Link immer nach unten */
.read-more {
  color: #c29032;
  text-decoration: none;
  border: none !important;
  outline: none !important;
  margin-top: auto;       /* nach unten drücken */
  align-self: flex-end;   /* rechts */
}

.read-more:hover,
.read-more:focus,
.read-more:active {
  color: #c29032;
  text-decoration: none;
  border: none !important;
  outline: none !important;
}

/* TYPO3 Textpic: verhindert, dass Bodytext nach oben rutscht */
.frame-type-textpic header {
  position: relative;
  z-index: 2;
}

.frame-type-textpic .ce-textpic {
  position: relative;
  z-index: 1;
}

.frame-type-textpic .ce-bodytext {
  position: static;     /* falls irgendwo position gesetzt wurde */
  margin-top: 0 !important;  /* killt negative margins */
  clear: both;          /* falls floats im Spiel sind */
}

.frame-type-textpic header { margin-bottom: 16px; }
.frame-type-textpic .ce-bodytext p { margin: 0 0 12px; }

.frame-type-textpic header h2 {
  color: #d0d0d0;
}

.slides-container .caption .txt2 {
    color: #c29032;
    background: rgba(0, 0, 0, 0.75);
    padding: 12px 22px;
    display: inline-block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);
}

.post-image img.img-responsive.post-image-item {
    margin-top: 0;
}
.post .post-story h2 {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 32px;
}

.post .post-story .post-story-body {
    font-size: 15px;
    line-height: 1.8;
}

.search-form-wrapper {
    position: relative;
    display: inline-block;
}

.search-form-wrapper input.form-control {
    padding-right: 40px;
}

.search-form-wrapper .search-submit {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 18px;
    color: #666;
}

.search-form-wrapper .search-submit:hover {
    color: #0056b3;
}

/* Swiper Bilder skalieren */

.swiper-slide {
  height: 500px;
}

.swiper-slide-image,
.swiper-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.t3s_swiper {
    display: flex;
    justify-content: center;
}

.back-button {
    display: flex;
    justify-content: right;
}

.swiper-caption.w-100 {
    color: #c29032;
    background: rgba(0, 0, 0, 0.45) !important;
    padding: 20px 22px;
    display: inline-block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.swiper-caption > h3 {
  color: #c29032;
}

.frame.frame-default > header {
  position: unset; 
  margin-top: unset; 
}

.ce-div {
  border: 2px solid rgba(204, 204, 204, 0.35);
}

.t3s_swiper {
  display: block;
}

.t3s_swiper > h,
.t3s_swiper > h3,
.t3s_swiper > h2 {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
}

.ce-gallery img {
    margin: 30px 0;
}

.col-sm-12 > .dark-bg {
    background: unset;
}

figure > .caption > .txt2 h2,
figure > .caption > .txt2 h3,
figure > .caption > .txt2 h4,
figure > .caption > .txt2 h5,
figure > .caption > .txt2 h6 {
  color: inherit;
}