/* Schritt 178C – vollständig unter .vv-bioponik-detail gekapselt. */
.vv-bioponik-detail {
  font-family: Arial, Helvetica, sans-serif;
  color: #102116;
  background: #f5faf7;
}
.vv-bioponik-detail, .vv-bioponik-detail * {
  box-sizing: border-box;
}
.vv-bioponik-detail {
  scroll-behavior: smooth;
}
.vv-bioponik-detail {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #102116;
  background: #f5faf7;
}
.vv-bioponik-detail {
  --deep: #0d5c36;
  --green: #08743f;
  --hero: #2e8665;
  --soft: #eef7f2;
  --blue: #087bb1;
  --line: #c8ddd2;
}
.vv-bioponik-detail header {
  height: 155px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 0 max(28px, calc((100% - 1360px) / 2));
}
.vv-bioponik-detail .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--deep);
  text-decoration: none;
  white-space: nowrap;
  font-size: 30px;
}
.vv-bioponik-detail .logo {
  width: 112px;
  height: 108px;
  object-fit: contain;
  display: block;
}
.vv-bioponik-detail nav {
  display: flex;
  gap: 26px;
}
.vv-bioponik-detail nav a {
  font-weight: 700;
  color: #0b5b32;
  text-decoration: none;
}
.vv-bioponik-detail {
  max-width: 1200px;
  margin: 34px auto 70px;
}
.vv-bioponik-detail .hero,
.vv-bioponik-detail .toc,
.vv-bioponik-detail .chapter {
  border: 1px solid var(--line);
  border-radius: 24px;
  margin-bottom: 30px;
}
.vv-bioponik-detail .hero {
  min-height: 430px;
  background: linear-gradient(110deg, #176b43, #3a8d6e);
  color: #fff;
  padding: 65px 72px;
  display: grid;
  grid-template-columns: 1fr 210px;
  align-items: center;
  gap: 45px;
}
.vv-bioponik-detail .eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 800;
}
.vv-bioponik-detail .hero h1 {
  color: #fff;
  font-size: 70px;
  line-height: 1;
  margin: 22px 0;
}
.vv-bioponik-detail .hero > div > p:not(.eyebrow) {
  font-size: 22px;
  line-height: 1.6;
}
.vv-bioponik-detail .tags {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.vv-bioponik-detail .tags span {
  border: 1px solid #bfe2d2;
  border-radius: 30px;
  padding: 10px 15px;
}
.vv-bioponik-detail .badge {
  width: 185px;
  height: 185px;
  border: 1px solid #d1e9de;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vv-bioponik-detail .badge b {
  font-size: 44px;
}
.vv-bioponik-detail .badge small {
  margin-top: 20px;
}
.vv-bioponik-detail .toc,
.vv-bioponik-detail .chapter {
  background: #fff;
  padding: 56px 64px;
}
.vv-bioponik-detail .blue {
  color: var(--blue);
}
.vv-bioponik-detail .toc h2 {
  font-size: 38px;
  color: var(--deep);
}
.vv-bioponik-detail .toc ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  padding: 0;
  list-style: none;
}
.vv-bioponik-detail .toc a {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: #0872bc;
}
.vv-bioponik-detail .toc a span {
  background: var(--soft);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.vv-bioponik-detail .chapter h2 {
  display: flex;
  gap: 18px;
  align-items: center;
  color: var(--deep);
  font-size: 34px;
  margin: 0 0 28px;
}
.vv-bioponik-detail .chapter h2 span {
  color: var(--blue);
  font-size: 14px;
}
.vv-bioponik-detail .chapter > p {
  font-size: 18px;
  line-height: 1.7;
}
.vv-bioponik-detail .deep-dive {
  margin: 26px 0;
  padding: 22px 26px;
  border-left: 5px solid #2d8964;
  background: #f4faf7;
}
.vv-bioponik-detail .deep-dive h3 {
  margin: 0 0 12px;
  color: var(--deep);
}
.vv-bioponik-detail .deep-dive li {
  margin: 9px 0;
  line-height: 1.55;
}
.vv-bioponik-detail .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.vv-bioponik-detail .cards article {
  border: 1px solid var(--line);
  border-top: 5px solid #2d8964;
  border-radius: 14px;
  padding: 18px;
}
.vv-bioponik-detail .chapter figure {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin: 28px 0;
}
.vv-bioponik-detail .figure-head {
  padding: 20px 24px;
  background: var(--soft);
}
.vv-bioponik-detail .figure-head small {
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.vv-bioponik-detail .figure-head h3 {
  color: var(--deep);
  font-size: 25px;
  margin: 8px 0;
}
.vv-bioponik-detail .chapter svg {
  width: 100%;
  height: auto;
  padding: 22px;
}
.vv-bioponik-detail .chapter svg rect {
  fill: #f8fbf9;
  stroke: #21734f;
  stroke-width: 3;
}
.vv-bioponik-detail .chapter svg text {
  font: 700 17px Arial;
  fill: #173d2b;
}
.vv-bioponik-detail .chapter svg .arrow {
  font-size: 32px;
  fill: #087bb1;
}
.vv-bioponik-detail .system-cutaway svg {
  padding: 12px;
  background: #fbfdfc;
}
.vv-bioponik-detail .system-cutaway .vessel,
.vv-bioponik-detail .system-cutaway .growbed {
  fill: #f8fbf9;
  stroke: #176b43;
  stroke-width: 5;
}
.vv-bioponik-detail .system-cutaway .reservoir {
  fill: url(#water);
  stroke: #176b43;
  stroke-width: 5;
}
.vv-bioponik-detail .system-cutaway .organic {
  fill: #b8874f;
  stroke: #8d5b25;
  stroke-width: 4;
}
.vv-bioponik-detail .system-cutaway .sludge {
  fill: #a97535;
  stroke: #8d5b25;
  stroke-width: 3;
}
.vv-bioponik-detail .system-cutaway .blower,
.vv-bioponik-detail .system-cutaway .pump {
  fill: #fff;
  stroke: #176b43;
  stroke-width: 4;
}
.vv-bioponik-detail .system-cutaway .media {
  fill: #cce7da;
  stroke: #2d8964;
  stroke-width: 2;
}
.vv-bioponik-detail .system-cutaway .clean-water {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
}
.vv-bioponik-detail .system-cutaway .organic-flow {
  fill: none;
  stroke: #a97535;
  stroke-width: 7;
}
.vv-bioponik-detail .system-cutaway .solution-flow,
.vv-bioponik-detail .system-cutaway .return-flow {
  fill: none;
  stroke: #087bb1;
  stroke-width: 7;
}
.vv-bioponik-detail .system-cutaway .return-flow {
  stroke: #2d8964;
  stroke-dasharray: 12 7;
}
.vv-bioponik-detail .system-cutaway .aeration {
  fill: none;
  stroke: #40a9c9;
  stroke-width: 6;
  stroke-dasharray: 7 7;
}
.vv-bioponik-detail .system-cutaway .drain {
  fill: none;
  stroke: #a97535;
  stroke-width: 6;
}
.vv-bioponik-detail .system-cutaway .stem,
.vv-bioponik-detail .system-cutaway .root {
  fill: none;
  stroke: #2d8964;
  stroke-width: 4;
}
.vv-bioponik-detail .system-cutaway .root {
  stroke: #a97535;
  stroke-width: 3;
}
.vv-bioponik-detail .system-cutaway .leaf {
  fill: #65a938;
  stroke: #4c8c29;
  stroke-width: 2;
}
.vv-bioponik-detail .system-cutaway .svg-title {
  font-size: 15px;
  font-weight: 800;
}
.vv-bioponik-detail .system-cutaway .line-label {
  font-size: 12px;
  fill: #5e7066;
}
.vv-bioponik-detail .system-cutaway .component-note {
  font-size: 12px;
  font-weight: 700;
}
.vv-bioponik-detail .system-cutaway .legend rect {
  fill: #fff;
  stroke: #c8ddd2;
  stroke-width: 2;
}
.vv-bioponik-detail .chapter figcaption {
  padding: 17px 25px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: #5e7066;
  font-size: 15px;
  line-height: 1.55;
}
.vv-bioponik-detail .figure-legend {
  margin: 0 24px 24px;
  padding: 22px 24px;
  border: 1px solid #bcd8ca;
  border-radius: 14px;
  background: #f7fbf9;
  color: #173d2b;
}
.vv-bioponik-detail .figure-legend h4 {
  margin: 0 0 16px;
  color: var(--deep);
  font-size: 18px;
}
.vv-bioponik-detail .figure-legend dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 0;
}
.vv-bioponik-detail .figure-legend dl > div {
  display: grid;
  grid-template-columns: minmax(105px, 0.42fr) 1fr;
  gap: 10px;
  padding: 12px;
  border-left: 4px solid #2d8964;
  background: #fff;
}
.vv-bioponik-detail .figure-legend dt {
  font-weight: 800;
  color: #0d5c36;
}
.vv-bioponik-detail .figure-legend dd {
  margin: 0;
  line-height: 1.45;
  font-size: 14px;
}
.vv-bioponik-detail .system-legend {
  margin-top: 10px;
}
.vv-bioponik-detail .dark {
  background: #176b43;
  color: #fff;
}
.vv-bioponik-detail .dark h2,
.vv-bioponik-detail .dark h2 span {
  color: #fff;
}
.vv-bioponik-detail .dark .deep-dive {
  color: #173d2b;
  background: #f4faf7;
}
.vv-bioponik-detail .dark .deep-dive h3 {
  color: #0d5c36;
}
.vv-bioponik-detail .checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 25px 0;
}
.vv-bioponik-detail .checks label {
  padding: 15px;
  background: var(--soft);
  border-radius: 10px;
  color: #173d2b;
}
.vv-bioponik-detail .sources li {
  padding: 11px;
  border-bottom: 1px solid var(--line);
}
.vv-bioponik-detail .sources a {
  color: #0872bc;
  font-weight: 700;
}
.vv-bioponik-detail footer {
  background: #185f2d;
  color: #fff;
  padding: 64px max(30px, calc((100% - 1360px) / 2)) 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 80px;
}
.vv-bioponik-detail footer a {
  display: block;
  margin: 15px 0;
}
.vv-bioponik-detail footer small {
  grid-column: 1/-1;
  border-top: 1px solid #ffffff2b;
  padding-top: 20px;
}
@media (max-width: 1050px) {
  .vv-bioponik-detail nav {
    display: none;
  }
  .vv-bioponik-detail header {
    height: 110px;
  }
  .vv-bioponik-detail .logo {
    width: 74px;
    height: 72px;
  }
  .vv-bioponik-detail {
    margin: 22px 16px;
  }
  .vv-bioponik-detail .hero {
    grid-template-columns: 1fr;
    padding: 40px;
  }
  .vv-bioponik-detail .badge {
    display: none;
  }
  .vv-bioponik-detail .hero h1 {
    font-size: 52px;
  }
  .vv-bioponik-detail .toc,
  .vv-bioponik-detail .chapter {
    padding: 34px;
  }
  .vv-bioponik-detail .toc ol,
  .vv-bioponik-detail .cards,
  .vv-bioponik-detail .checks,
  .vv-bioponik-detail .figure-legend dl {
    grid-template-columns: 1fr;
  }
  .vv-bioponik-detail .figure-legend dl > div {
    grid-template-columns: 1fr;
  }
  .vv-bioponik-detail footer {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vv-bioponik-detail footer small {
    grid-column: 1;
  }
}