/* Editorial hero board: bewusst ohne Karten-, Kreis- oder Dashboard-Optik. */

.hero-pattern-world { position: relative; }
.hero-pattern-world > .wave-divider { z-index: 5; }

.hero-dashboard {
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1.32fr);
  gap: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.clock-date-widget,
.news-widget {
  height: 320px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 32px;
}

.meeting-column,
.news-column { position: relative; min-width: 0; }

.clock-date-widget {
  padding: 40px 26px 24px;
  justify-content: flex-start;
  box-shadow: 8px 8px 0 var(--pink);
  background:
    radial-gradient(circle 130px at 90% -10%, var(--pastel-yellow) 0 99%, transparent 100%),
    var(--blue-soft);
}
.clock-date-widget:hover { transform: none; box-shadow: none; }
.meeting-widget-head { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.meeting-widget-head .clock-date-label {
  position: absolute; top: 0; left: 26px; transform: translateY(-50%);
  padding: 7px 15px; border-radius: 999px;
  background: var(--coral); color: var(--white);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 800 .74rem 'Space Grotesk', sans-serif; letter-spacing: .04em;
}
.meeting-countdown {
  top: 0; right: 24px; transform: translateY(-50%) rotate(5deg);
  padding: 7px 13px; border-radius: 999px;
  background: var(--yellow); border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  animation: ticketCountdownPulse 2.8s ease-in-out infinite;
}
@keyframes ticketCountdownPulse {
  0%, 100% { transform: translateY(-50%) rotate(5deg) scale(1); }
  50% { transform: translateY(-50%) rotate(2deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .meeting-countdown { animation: none; }
}

.scroll-container {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 20px; overflow: visible;
}

/* Datumsanzeige als Kreis-Badges (wie Logo-/Social-Bubbles im Rest der Seite) -
   blaettert beim Laden bis zum echten Datum (Wochentag/Tag/Monat), kein Endlos-Loop. */
.flip-unit {
  position: relative;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.flip-unit:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.flip-unit--weekday { background: var(--coral); }
.flip-unit--day { width: 84px; height: 84px; background: var(--pink); }
.flip-unit--month { background: var(--yellow); }

/* Walze rollt von unten nach oben bis zum Ziel-Wert (Odometer-Effekt) */
.flip-viewport {
  position: relative;
  width: 100%; height: 1.1em;
  overflow: hidden;
}
.flip-track {
  display: flex; flex-direction: column;
  height: 200%;
  transform: translateY(0);
  transition: transform .14s cubic-bezier(.42, 0, .58, 1);
}
.flip-track.is-resetting { transition: none; }
.flip-track.is-rolling { transform: translateY(-50%); }
.flip-face {
  height: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 900 clamp(.82rem, 1.6vw, .98rem) 'Fredoka', sans-serif;
  color: var(--ink);
  white-space: nowrap;
}
.flip-unit--day .flip-face { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
@media (prefers-reduced-motion: reduce) {
  .flip-track { transition: none; }
  .flip-unit { transition: none; }
}
/* Programm/Zeit/Ort tabellarisch: Icon- / Label- / Wert-Spalte, Werte rechtsbuendig */
.meeting-info-box {
  align-self: center;
  display: grid; grid-template-columns: auto auto auto; column-gap: 10px; row-gap: 7px;
  margin-top: 16px;
  padding: 12px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}
.info-row { display: contents; }
.info-row-icon { grid-column: 1; font-size: .92rem; }
.info-row-label {
  grid-column: 2; text-align: left; opacity: .6;
  font: 700 .84rem 'Space Grotesk', sans-serif; color: var(--ink);
}
.info-row-value {
  grid-column: 3; text-align: right; font-weight: 800;
  font: 700 .84rem 'Space Grotesk', sans-serif; color: var(--ink);
}

.news-widget {
  padding: 28px 30px 26px;
  position: relative;
  cursor: pointer;
  display: flex; flex-direction: column;
  box-shadow: 8px 8px 0 var(--purple-deep);
  background:
    radial-gradient(circle 150px at 104% -8%, var(--pastel-purple) 0 99%, transparent 100%),
    var(--pink-light);
}
.news-eyebrow {
  position: absolute; top: 0; left: 30px; transform: translateY(-50%);
  z-index: 5; opacity: 1;
  padding: 7px 15px; border-radius: 999px;
  background: var(--coral); color: var(--white);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 800 .74rem 'Space Grotesk', sans-serif; letter-spacing: .04em;
}
/* Scrollt intern, falls ein Beitrag mal laenger ist als der Kasten - nichts wird
   je abgeschnitten, auch wenn die Kastengroesse selbst fix bleibt. */
.news-ticker-viewport {
  flex: 1 1 auto; min-height: 0; border-radius: 22px; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Feste Kastengroesse - der Vorschautext passt sich per Line-Clamp an, nicht der Kasten. */
.news-item,
.news-item--featured {
  height: 190px;
  overflow: hidden;
  grid-template-rows: auto 44px 1fr auto;
  column-gap: 18px;
  padding: 15px;
  border: 3px solid var(--ink); border-radius: 20px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--yellow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-item-image,
.news-item--featured .news-item-image,
.news-item-image--report,
.news-item--featured .news-item-image--report {
  border: 0; border-radius: 14px; object-fit: cover;
}
.news-item h4 {
  font-size: 1.16rem; line-height: 1.1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  align-self: start;
}
.news-item p {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item:hover { transform: translate(-3px, -3px); background: var(--white); box-shadow: 7px 7px 0 var(--ink); }
.news-tag { border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); }
.news-tag--social { background: var(--purple-deep); color: var(--white); }
.news-slideshow-controls { justify-content: center; margin-top: 12px; gap: 10px; }
.news-slide-button { width: 38px; height: 38px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.news-slide-button:hover:not(:disabled) { transform: translate(-2px, -2px); background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

@media (max-width: 992px) {
  .hero-dashboard { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  .hero-dashboard { margin-inline: -8px; gap: 16px; }
  .clock-date-widget,
  .news-widget { height: 340px; }
  .clock-date-widget { margin: 0; padding: 36px 18px 20px; border-radius: 26px; }
  .news-widget { border-radius: 26px; }
  .meeting-widget-head .clock-date-label { left: 18px; }
  .meeting-countdown { right: 16px; }
  .scroll-container { gap: 10px; margin-top: 4px; }
  .flip-unit { width: 58px; height: 58px; }
  .flip-unit--day { width: 72px; height: 72px; }
  .news-widget { margin: 0; padding: 18px 16px 14px; }
  .news-item,
  .news-item--featured { grid-template-columns: 1fr; min-height: 0; max-height: none; padding: 12px; border-radius: 16px; }
  .news-item-image,
  .news-item--featured .news-item-image,
  .news-item-image--report,
  .news-item--featured .news-item-image--report { display: none; }
  .news-item .news-meta,
  .news-item h4,
  .news-item p,
  .news-item .news-card-action { grid-column: 1; }
  .news-slideshow-controls { justify-content: center; }
  .news-slide-button { width: 44px; height: 44px; }
}