/* ============================================================
   AN Metallbau GmbH – Preistabellen und Kostenboxen
   Ergänzung für die Ratgeber-Kostenseiten.
   Nutzt ausschließlich die Design-Tokens aus style.css.
   ============================================================ */

/* ---------- Horizontal scrollbarer Tabellen-Rahmen ----------
   Preistabellen mit drei oder vier Spalten passen auf einem Handy
   nicht in die Breite. Statt den Text umbrechen zu lassen (was
   Zahlenkolonnen unlesbar macht) scrollt die Tabelle seitlich.
   Der Schatten am rechten Rand zeigt an, dass es weitergeht. */
.tabelle-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
    linear-gradient(to left,  var(--white) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(13,13,13,.14), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(13,13,13,.14), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tabelle-scroll::-webkit-scrollbar { height: 8px; }
.tabelle-scroll::-webkit-scrollbar-track { background: #ece3d2; border-radius: 4px; }
.tabelle-scroll::-webkit-scrollbar-thumb { background: #c9bda4; border-radius: 4px; }
.tabelle-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Preistabelle ---------- */
.preis-tabelle {
  width: 100%;
  min-width: 460px;              /* erzwingt den Scroll statt Quetschen */
  border-collapse: collapse;
  background: var(--white);
  font-size: .95rem;
  overflow: hidden;
  border-radius: var(--radius);
}
.preis-tabelle thead th {
  background: var(--anthracite);
  color: #fff;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .02em;
  padding: 12px 16px;
  white-space: nowrap;
}
.preis-tabelle tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid #ece3d2;
  vertical-align: top;
  color: var(--text);
}
.preis-tabelle tbody tr:last-child td { border-bottom: 0; }
.preis-tabelle tbody tr:nth-child(even) { background: #fbf7ef; }
.preis-tabelle tbody tr:hover { background: #f7f0e1; }

/* Grundausrichtung: erste Spalte ist die Bezeichnung (links),
   jede weitere eine Zahlenspalte (rechts, gleich breite Ziffern).
   Gilt für die Größentabelle und die Rechenbeispiele. */
.preis-tabelle th,
.preis-tabelle td { text-align: left; }
.preis-tabelle thead th:not(:first-child),
.preis-tabelle tbody td:not(:first-child),
.preis-tabelle .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Erläuterungsspalte ----------
   Vier Tabellen (Konstruktion, Belag, Geländer, Nebenleistungen) haben
   das Muster: Bezeichnung | Preis | Erläuterung im Fließtext.
   Der Selektor greift auf eine Zelle, die zugleich die dritte und die
   letzte ihrer Zeile ist – also nur bei genau dreispaltigen Tabellen.
   Die vierspaltige Größentabelle und die zweispaltigen Rechenbeispiele
   bleiben unberührt und behalten ihre rechtsbündigen Zahlen. */
.preis-tabelle thead th:nth-child(3):last-child,
.preis-tabelle tbody td:nth-child(3):last-child,
.preis-tabelle--text thead th:last-child,
.preis-tabelle--text tbody td:last-child {
  text-align: left;
  white-space: normal;
  font-variant-numeric: normal;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.5;
}
/* In der Kopfzeile bleibt die Schrift hell, sonst verschwindet sie auf Schwarz */
.preis-tabelle thead th:nth-child(3):last-child,
.preis-tabelle--text thead th:last-child { color: #fff; font-size: 1.02rem; }

/* Summenzeile in den Rechenbeispielen */
.preis-tabelle tr.summe td {
  background: linear-gradient(135deg, rgba(194,144,78,.16), rgba(194,144,78,.08));
  border-top: 2px solid var(--accent);
  border-bottom: 0;
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--anthracite);
  padding-top: 14px;
  padding-bottom: 14px;
}
.preis-tabelle tr.summe:hover td { background: linear-gradient(135deg, rgba(194,144,78,.22), rgba(194,144,78,.12)); }

/* ---------- Kostenbox (Rechenbeispiele) ---------- */
.kosten-box {
  background: var(--white);
  border: 1px solid rgba(194,144,78,.28);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 26px 20px;
  margin: 26px 0;
}
.kosten-box h3 {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1.4rem;
  margin: 0 0 4px;
  color: var(--anthracite);
}
.kosten-box__sub {
  color: var(--text-muted);
  font-size: .93rem;
  line-height: 1.5;
  margin: 0 0 4px;
}
/* Innerhalb der Box braucht die Tabelle keinen zweiten Rahmen */
.kosten-box .tabelle-scroll { margin: 14px 0 10px; }
.kosten-box .preis-tabelle { border: 1px solid #ece3d2; min-width: 340px; }
.kosten-box .tech-hinweis { margin-top: 10px; }

/* Auf Handys etwas kompakter, damit die Box nicht die halbe Seite füllt */
@media (max-width: 560px) {
  .kosten-box { padding: 20px 18px 16px; }
  .kosten-box h3 { font-size: 1.25rem; }
  .preis-tabelle { font-size: .9rem; min-width: 420px; }
  .kosten-box .preis-tabelle { min-width: 300px; }
  .preis-tabelle thead th,
  .preis-tabelle tbody td { padding: 10px 12px; }
}

/* ---------- Hinweiskasten für zeitkritische Angaben ----------
   Für Aussagen mit Verfallsdatum (Förderprogramme, Preisstände).
   Optisch klar vom Fließtext abgesetzt, ohne zu alarmieren. */
.preis-hinweis {
  background: #fbf5e9;
  border: 1px solid rgba(194,144,78,.35);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 22px 0;
  font-size: .95rem;
  line-height: 1.6;
}
.preis-hinweis strong { color: var(--anthracite); }
.preis-hinweis p:last-child { margin-bottom: 0; }

/* Stand-Angabe unter Preistabellen */
.preis-stand {
  display: block;
  margin: -4px 0 20px;
  font-size: .84rem;
  color: var(--text-muted);
  font-style: italic;
}