/* =========================================================
   startseite.css – komplett (v2.9)
   - NUR HeroSplit (alles darunter entfernt)
   - Rechts: Uploads immer 16:9 volle Breite
   - Links: Accordion animiert
   - FIX: saubere Layout-Stabilität + Dots adaptiv
========================================================= */

:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#5b5f66;
  --line:#e6e8eb;

  --accent:#6c983c;
  --navText:#0b2e57;

  --radius:14px;
  --max:1200px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.page{
  max-width:var(--max);
  margin:0 auto;
  padding:16px;
}

/* HERO SPLIT */
.heroSplit{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}

.heroSplit__grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  align-items:stretch; /* wichtig: links = gleiche Höhe wie 16:9 rechts */
}

@media (max-width: 980px){
  .heroSplit__grid{ grid-template-columns:1fr; }
}

/* LEFT PANEL */
.sidePanel{
  border-right:1px solid var(--line);
  background:#fbfcfe;
  min-height:100%;
}

@media (max-width: 980px){
  .sidePanel{ border-right:0; border-bottom:1px solid var(--line); }
}

/* Accordion */
.acc{ border-bottom:1px solid var(--line); }
.acc__head{
  width:100%;
  appearance:none;
  border:0;
  background:transparent;
  padding:16px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  text-align:left;
  color:var(--navText);
  font-weight:900;
  font-size:18px;
}
.acc__head:hover{ background:#f2f5fb; }

.acc__pm{
  font-size:22px;
  color:#6b7aa6;
  width:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.acc__title{ flex:0 1 auto; }

.acc__badge{
  margin-left:auto;
  min-width:26px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
}

/* Animated body (max-height + opacity) */
.acc__body{
  padding:0 16px;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease, padding .35s ease;
  will-change:max-height, opacity, transform;
}
.acc.is-open .acc__body{
  opacity:1;
  transform:translateY(0);
  padding:14px 16px 16px;
}

.hidden{ display:none !important; }

/* INFO BOX */
.infoBox{ display:flex; flex-direction:column; gap:12px; }
.infoBox__hint{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.infoBox__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.quickBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 12px;
  border:1px solid #b7c4dd;
  border-radius:0;
  background:#fff;
  color:var(--navText);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
}
.quickBtn--accent{
  border-color:rgba(108,152,60,.45);
  background:rgba(108,152,60,.12);
  color:#10310d;
}
.infoBox__foot{ padding-top:4px; }
.textLink{
  color:var(--accent);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
}

/* MINI NEWS */
.miniNews{ display:flex; flex-direction:column; gap:14px; }

.miniNews__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.miniNews__status{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--navText);
  font-weight:900;
  font-size:15px;
}
.miniNews__icon{ font-size:18px; opacity:.9; }

.miniNews__smallLink{
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:var(--accent);
}

.miniNews__group{ display:flex; flex-direction:column; gap:8px; }
.miniNews__label{
  font-size:13px;
  color:var(--navText);
  font-weight:900;
}

/* Kategorien-Chips */
.chipRow{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
}
.chipRow::-webkit-scrollbar{ height:10px; }
.chipRow::-webkit-scrollbar-thumb{ background:#d7dbe0; border-radius:999px; }

.chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid #b7c4dd;
  background:#fff;
  color:var(--navText);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  padding:8px 10px;
  border-radius:999px;
}
.chip__count{
  display:inline-flex;
  min-width:20px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:900;
  align-items:center;
  justify-content:center;
}

/* Neueste Liste */
.miniList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.miniItem{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px;
  text-decoration:none;
  color:var(--text);
}
.miniItem__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.miniItem__title{
  font-weight:900;
  font-size:13px;
  line-height:1.2;
  color:var(--navText);
}
.miniItem__meta{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.miniItem__text{
  margin-top:6px;
  font-size:12px;
  color:var(--text);
  line-height:1.45;
  opacity:.9;
}

/* CTAs */
.miniNews__ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ctaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 12px;
  border:1px solid #b7c4dd;
  border-radius:0;
  background:#fff;
  color:var(--navText);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
}
.ctaBtn--accent{
  border-color:rgba(108,152,60,.45);
  background:var(--accent);
  color:#0b2008;
}

/* RIGHT HERO CAROUSEL (16:9) */
.heroCarousel{
  background:#e9eef6;
}

.heroCarousel__viewport{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  background:#dfe6f2;
}

.heroCarousel__track{
  display:flex;
  width:100%;
  height:100%;
  transform:translateX(0);
  transition:transform .55s ease;
  will-change:transform;
}

.heroSlide{
  flex:0 0 100%;
  display:block;
  text-decoration:none;
}
.heroSlide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Dots: adaptiv */
.heroCarousel__dots{
  position:absolute;
  left:14px;
  bottom:12px;
  display:flex;
  gap:10px;
  align-items:center;
  z-index:3;

  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dot{
  width:9px;
  height:9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  background:#fff;
  cursor:pointer;
  padding:0;

  mix-blend-mode: difference; /* passt sich dem Bild an */
  opacity:.85;
  transition:transform .2s ease, opacity .2s ease;
}
.dot:hover{ opacity:1; }
.dot.is-active{ transform:scale(1.35); opacity:1; }

/* Counter */
.heroCarousel__counter{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;

  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-weight:900;
  font-size:12px;
  color:#fff;
  mix-blend-mode:difference;
}