/* Teich-Detail Feinschliff (Light/Dark kompatibel)
   Einbinden NACH components.css (oder ans Ende von components.css kopieren)
*/

/* 1) Hero etwas leichter */
.teich-hero{
  padding: 18px 20px 16px;
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}

/* 2) KPI-Block: bessere Hierarchie */
.teich-kpis{ margin-top: 10px; gap: 10px; }
.teich-kpi{ padding: 11px 13px; }
.teich-kpi small{
  font-size: .82rem;
  opacity: .72;
  letter-spacing: .01em;
}
.teich-kpi strong{
  font-size: 1.06rem;
  line-height: 1.25;
}

/* 3) Karten: Schatten im Light etwas softer, im Dark nicht zu hart */
.teich-card,
.teich-media{
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .teich-card,
:root[data-theme="dark"] .teich-media{
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}

/* 4) Bilder: stärker an Text koppeln */
.teich-media-grid{
  margin-top: 6px;
  margin-bottom: 8px;
}

/* 5) Placeholder ruhiger */
.teich-media.is-missing::before{
  font-size: .92rem;
  opacity: .62;
}

/* 6) Unterstrich unter Card-Headlines (edler / kürzer) */
.teich-card h2{
  padding-bottom: 9px;
  margin-bottom: 11px;
}
.teich-card h2::after{
  width: 36px;
  height: 3px;
  opacity: .9;
}

/* 7) Hinweisbox kompakter */
.teich-note{
  padding: 14px 16px;
}
.teich-note h2{
  font-size: 1.02rem;
}

/* 8) Mobile Feinschliff */
@media (max-width: 900px){
  .teich-hero{ padding: 16px 16px 14px; }
  .teich-kpis{ gap: 10px; }
}