/* Floo – Flootainment Finale */

/* RADIO FLOO: eine gemeinsame beige Fläche. */
#soongs-radio.floo-soongs-layout {
  display: grid !important;
  grid-template-columns: minmax(0,46fr) minmax(0,54fr) !important;
  grid-template-rows: auto auto auto !important;
  column-gap: clamp(28px,3.5vw,52px) !important;
  row-gap: 0 !important;
  align-items: start !important;
  margin-block: clamp(42px,6vw,72px) !important;
  padding: clamp(24px,4vw,48px) !important;
  border: 1px solid rgba(140,17,51,.13) !important;
  border-radius: 30px !important;
  background: linear-gradient(150deg,#fffaf2,#fff7f9) !important;
  box-shadow: 0 14px 36px rgba(18,58,89,.08) !important;
}
#soongs-radio > .floo-poem-card {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#soongs-radio > .floo-poem-card > h2 {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 !important;
  font-size: clamp(2.6rem,5vw,4.8rem) !important;
}
#soongs-radio > .floo-poem-card > .floo-poem-subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: -.25rem 0 clamp(24px,3vw,38px) !important;
  font-style: italic;
}
#soongs-radio > .floo-poem-card > .floo-poem {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  margin: 0 !important;
  padding: clamp(4px,1vw,12px) 0 !important;
  font-family: var(--floo-display-font,"Playfair Display",Georgia,serif);
  font-size: clamp(1.05rem,1.35vw,1.28rem);
  line-height: 1.9;
}
#soongs-radio > .floo-radio-wrap {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
#soongs-radio > .floo-radio-wrap .floo-radio { width: 100%; box-sizing: border-box; }

/* NEWS-KARUSSELL */
.floo-news-carousel__shell {
  position: relative;
  padding-right: clamp(42px,4vw,62px);
}
.floo-news-carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.floo-news-carousel__track {
  display: flex;
  gap: clamp(16px,2.2vw,28px);
  will-change: transform;
  transition: transform .46s cubic-bezier(.22,.61,.36,1);
}
.floo-news-teaser {
  flex: 0 0 calc((100% - (2 * clamp(16px,2.2vw,28px))) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.floo-news-teaser__image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(18,58,89,.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18,58,89,.07);
}
.floo-news-teaser__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floo-news-teaser__image-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg,#fff,#fff7f9);
}
.floo-news-teaser h3 {
  margin: 18px 2px 10px;
  font-family: var(--floo-display-font,"Playfair Display",Georgia,serif);
  font-size: clamp(1.35rem,2vw,1.85rem);
  font-weight: 500;
  line-height: 1.16;
}
.floo-news-teaser__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
}
.floo-news-icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(18,58,89,.18);
  border-radius: 999px;
  background: #fff;
  color: var(--floo-navy,#123a59);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.floo-news-icon-button:hover,
.floo-news-icon-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(140,17,51,.42);
  color: var(--floo-bordeaux,#8c1133);
}
.floo-news-icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.floo-news-audio-toggle svg path.floo-news-icon-play { fill: currentColor; stroke: none; }
.floo-news-audio-toggle svg path.floo-news-icon-pause { display: none; fill: currentColor; stroke: none; }
.floo-news-audio-toggle.is-playing svg path.floo-news-icon-play { display: none; }
.floo-news-audio-toggle.is-playing svg path.floo-news-icon-pause { display: block; }
.floo-news-audio-stop[hidden] { display: none !important; }
.floo-news-audio-stop { color: var(--floo-bordeaux,#8c1133); }
.floo-news-audio-stop svg path { fill: currentColor; stroke: none; }
.floo-news-teaser audio { display: none; }
.floo-news-carousel__next {
  position: absolute;
  right: 0;
  top: 43%;
  translate: 0 -50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,58,89,.17);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: var(--floo-navy,#123a59);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(18,58,89,.08);
}
.floo-news-carousel__next:hover,
.floo-news-carousel__next:focus-visible { color: var(--floo-bordeaux,#8c1133); }

/* Lesezeit auf der Artikel-Seite */
.floo-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 1.25rem;
  color: rgba(18,58,89,.68);
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.floo-reading-time svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 899px) {
  #soongs-radio.floo-soongs-layout {
    display: block !important;
    padding: clamp(20px,6vw,34px) !important;
  }
  #soongs-radio > .floo-poem-card { display: contents !important; }
  #soongs-radio > .floo-poem-card > h2 { display: block; margin-bottom: .25rem !important; }
  #soongs-radio > .floo-poem-card > .floo-poem-subtitle { display: block; margin-bottom: 24px !important; }
  #soongs-radio > .floo-poem-card > .floo-poem { display: block; width: 100%; }
  #soongs-radio > .floo-radio-wrap { display: block; width: 100% !important; margin-top: 30px !important; }

  .floo-news-carousel__shell { padding-right: 0; }
  .floo-news-carousel__viewport {
    transition: height .38s ease;
  }
  .floo-news-carousel__track {
    display: block;
    transition: transform .46s cubic-bezier(.22,.61,.36,1);
  }
  .floo-news-teaser {
    width: 100%;
    padding: 0;
  }
  .floo-news-teaser + .floo-news-teaser { margin-top: 22px; }
  .floo-news-carousel__next {
    position: static;
    translate: none;
    margin: 24px auto 0;
  }
  .floo-news-carousel__next span { display: inline-block; transform: rotate(90deg); }
}
