/* Taupunkt- und Schimmelrisiko-Check als Karte im Kopfbereich
   (templates/tool-taupunkt.php). Das Grundlayout der Karte kommt aus
   css/rechner-hero.css; hier nur, was der Check zusätzlich braucht: Seine
   Auswahlflächen und Feldpaare richten sich nach der Breite der Karte, nicht
   nach dem Bildschirm — am Computer ist die Karte schmaler als auf dem Tablet. */

.dew-card .info-panel { margin-bottom: 0.75rem; font-size: 0.88rem; }
.dew-card .note.mb-2 { margin-bottom: 0.55rem; }

/* Feldpaare (Raumklima, Außenwerte): nebeneinander, sobald zwei Felder Platz haben. */
.dew-card .grid.md\:grid-cols-2 { grid-template-columns: minmax(0, 1fr); gap: 0.75rem 0.85rem; }

/* Auswahlflächen: eine Spalte in der schmalen Karte, zwei ab mittlerer Breite. */
.dew-card .option-grid,
.dew-card .option-grid--wide { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.dew-card .option-card { padding: 0.6rem 0.8rem; border-radius: 0.7rem; }
.dew-card .option-label { font-size: 0.95rem; }
.dew-card .option-note { font-size: 0.78rem; }
.dew-card .mt-6 { margin-top: 1.1rem; }
.dew-card .mt-5 { margin-top: 0.9rem; }

.dew-card .btn-row { margin-top: 1.1rem; }
.dew-card .btn-row > .btn[type="submit"] { width: 100%; }

/* Ergebnis in der Karte: Kennzahlen und Knöpfe kompakt. */
.dew-card .result-box { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1rem; }
.dew-card .result-box .btn-row { display: grid; gap: 0.5rem; }
.dew-card .result-box .btn { width: 100%; }

@container (min-width: 18rem) {
  .dew-card .grid.md\:grid-cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container (min-width: 30rem) {
  .dew-card .option-grid,
  .dew-card .option-grid--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Bricht eine Beschriftung um, stehen die Felder trotzdem auf einer Linie. */
.dew-card .grid.md\:grid-cols-2 > div { display: flex; flex-direction: column; justify-content: flex-end; }