/* Dünger-Schaubild – HTML-Nachbau der Grafik aqua_rebell_duenger_diagramm (05.10.2026). Maße und Farben nach der
   Illustrator-Vorlage; Schrift der Seite (Open Sans) statt Myriad Pro. Drei Stufen nach der eigenen Breite (Container
   Query, greift auch neben der Seitenleiste): Matrix, schmale Matrix (≤ 720 px), einspaltig (≤ 460 px). */
.ar-diagramm {
  container: ardia / inline-size;
  max-width: 900px;
  margin: 18px auto 6px;
  color: #2a2a2a;
  font-family: "Open Sans", sans-serif;
  text-align: center;
}
.ar-dia-raster {
  --symbol: 84px;
  display: grid;
  grid-template-columns: 84px 1fr 1fr;
  gap: 30px 22px;
}
.ar-dia-spaltenkopf { padding-bottom: calc(var(--symbol) * 0.55 - 14px); }
.ar-dia-spaltenkopf strong,
.ar-dia-zeilenkopf strong { display: block; font-size: 32px; font-weight: 700; line-height: 1.1; color: #1c1c1c; }
.ar-dia-spaltenkopf span { display: block; font-size: 15px; line-height: 1.4; }
.ar-dia-zeilenkopf { display: flex; align-items: center; justify-content: flex-start; }
.ar-dia-zeilenkopf > div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.ar-dia-zeilenkopf > div span { display: block; font-size: 13px; line-height: 1.4; }

.ar-dia-feld {
  container: ardiafeld / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: calc(var(--symbol) * 0.55 + 12px) 16px 22px;
  background: #f2f2f2;
  border: 1px solid #dcdcdc;
  border-radius: 7px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}
.ar-dia-symbol {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--symbol);
  height: var(--symbol);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 30%, #fefefe 0, #ececec 48%, #d0d0d0 100%);
  box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(0, 0, 0, 0.45);
}
.ar-dia-symbol img { width: 60%; height: 60%; object-fit: contain; filter: drop-shadow(1px 1px 0 #fff); }
.ar-dia-symbol-spalte { top: calc(var(--symbol) * -0.55); left: 50%; margin-left: calc(var(--symbol) / -2); }
.ar-dia-symbol-zeile { top: 50%; left: calc(var(--symbol) * -0.52); margin-top: calc(var(--symbol) / -2); }
/* nur einspaltig: Spaltensymbol an jedem Feld, Kopf im Feld */
.ar-dia-symbol-wdh,
.ar-dia-mobilkopf { display: none; }

.ar-dia-schriftzuege { margin-bottom: 12px; }
.ar-dia-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px; margin-bottom: 10px; }
/* Höhe folgt der Feldbreite, damit „Nitrat Phosphat Kalium“ wie im Original einzeilig bleibt (breiteste Reihe ≈ 11,6 × Höhe) */
.ar-dia-reihe img { width: auto; height: 28px; height: min(28px, 8cqi); filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.4)); }
.ar-dia-reihe a { display: inline-block; transition: transform 0.15s ease; }
.ar-dia-reihe a:hover,
.ar-dia-reihe a:focus { transform: scale(1.06); }
.ar-dia-zusatz { font-size: 16px; font-weight: 700; }
.ar-diagramm .ar-dia-punkte { margin: auto 0; padding: 0; list-style: none; }
/* Theme setzt in Beschreibungen Aufzählungszeichen – hier keine */
.ar-diagramm .ar-dia-punkte li { margin: 0; padding: 9px 6px; list-style: none; border-top: 1px solid #d3d3d3;
  font-size: 16px; line-height: 1.35; }
.ar-diagramm .ar-dia-punkte li:before { content: none; display: none; }
.ar-diagramm .ar-dia-punkte li:first-child { border-top: 0; }
/* linke Spalte: Platz für das Zeilensymbol, das über den Feldrand ragt */
.ar-dia-feld-erste .ar-dia-punkte { padding: 0 30px; }

/* Schmale Matrix (Tablet, neben der Seitenleiste): kleinere Symbole, Köpfe, Abstände und Stichpunkte */
@container ardia (max-width: 720px) {
  .ar-dia-raster { --symbol: 52px; grid-template-columns: 64px 1fr 1fr; gap: 24px 12px; }
  .ar-dia-spaltenkopf strong,
  .ar-dia-zeilenkopf strong { font-size: 22px; }
  .ar-dia-spaltenkopf span { font-size: 12px; line-height: 1.3; }
  .ar-dia-zeilenkopf > div span { font-size: 11px; }
  .ar-dia-feld { min-height: 0; padding-right: 8px; padding-bottom: 14px; padding-left: 8px; border-radius: 6px; }
  .ar-dia-symbol-zeile { left: calc(var(--symbol) / -2); }   /* Spalte 64 px: Symbol ragt nicht über die Beschriftung */
  .ar-dia-schriftzuege { margin-bottom: 8px; }
  .ar-dia-reihe { gap: 5px; margin-bottom: 7px; }
  .ar-dia-zusatz { font-size: 14px; }
  .ar-diagramm .ar-dia-punkte li { padding: 7px 2px; font-size: 13.5px; line-height: 1.3; }
  .ar-dia-feld-erste .ar-dia-punkte { padding: 0 28px; }
}

/* Einspaltig (Handy): je Zeile ein Abschnittskopf (ohne Symbol – sonst zwei Symbole untereinander), je Feld das
   Spaltensymbol oben */
@container ardia (max-width: 460px) {
  .ar-dia-raster { grid-template-columns: 1fr; gap: 16px; }
  .ar-dia-ecke,
  .ar-dia-spaltenkopf,
  .ar-dia-symbol-zeile { display: none; }
  .ar-dia-zeilenkopf { justify-content: center; margin-top: 10px; }
  .ar-dia-zeilenkopf > div { writing-mode: horizontal-tb; transform: none; }
  .ar-dia-zeilenkopf strong { font-size: 26px; }
  .ar-dia-zeilenkopf > div span { font-size: 14px; }
  .ar-dia-symbol-wdh { display: flex; }
  .ar-dia-feld { margin-top: calc(var(--symbol) * 0.55 - 6px); padding: calc(var(--symbol) * 0.55 + 8px) 14px 12px; }
  .ar-dia-mobilkopf { display: block; margin-bottom: 12px; }
  .ar-dia-mobilkopf strong { display: block; font-size: 20px; }
  .ar-dia-mobilkopf span { display: block; font-size: 13px; }
  .ar-dia-reihe img { height: min(26px, 8cqi); }
  .ar-diagramm .ar-dia-punkte li { padding: 8px 4px; font-size: 15px; line-height: 1.35; }
  .ar-dia-feld-erste .ar-dia-punkte { padding: 0; }
}