/* ===========================================================================
   KOSTEN-SEITE (kosten.html)                                 Stand 09.10.2026

   Nur fuer diese eine Seite. Alles Uebrige (Kopfleiste, Abschnitte, Knoepfe,
   Karten, Fusszeile) kommt unveraendert aus grundlagen.css und subpages.css.
   Neu sind hier nur drei Bausteine, die es auf den anderen Seiten nicht gibt:

     1. .preis-antwort   der Kasten mit der Kurzantwort ganz oben
     2. .preis-tabelle   echte Tabellen fuer Preisbeispiele, Staffel, Anfahrt
     3. .fragen          aufklappbare Fragen & Antworten (<details>)

   Warum echte <table>-Tabellen statt Kacheln: Suchmaschinen und KI-Systeme
   lesen Tabellen zuverlaessig als "Zeile = Fall, Spalte = Preis" aus. Genau
   das sollen sie zitieren koennen.
   =========================================================================== */

/* --- 1. Kurzantwort ------------------------------------------------------ */
.scan-page .preis-antwort {
  border: 1px solid rgba(255, 102, 0, 0.55);
  background: rgba(255, 102, 0, 0.08);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.scan-page .preis-antwort__titel {
  color: var(--orange);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.scan-page .preis-antwort__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.scan-page .preis-antwort__zeile:last-of-type { border-bottom: 0; }
.scan-page .preis-antwort__zeile span { color: var(--muted); }
.scan-page .preis-antwort__zeile b { font-size: 22px; white-space: nowrap; }
.scan-page .preis-antwort__fuss {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* --- 2. Tabellen --------------------------------------------------------- */
/* Breite Tabellen duerfen auf dem Handy seitlich wischen, statt die Seite
   zu sprengen - der Behaelter scrollt, nicht die Seite. */
.scan-page .tabelle-rahmen {
  margin-top: 30px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}
.scan-page .preis-tabelle {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 16px;
}
.scan-page .preis-tabelle caption {
  caption-side: bottom;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted);
}
.scan-page .preis-tabelle th,
.scan-page .preis-tabelle td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: top;
}
.scan-page .preis-tabelle thead th {
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
}
.scan-page .preis-tabelle td.betrag,
.scan-page .preis-tabelle th.betrag {
  text-align: right;
  white-space: nowrap;
}
.scan-page .preis-tabelle tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.scan-page .preis-tabelle .klein { display: block; font-size: 13px; color: var(--muted); }
.scan-page .preis-tabelle tfoot td { font-weight: 700; border-bottom: 0; }

/* Erste Tabelle: Flaeche als reine Zahl in eigener Spalte, Beispielobjekt
   daneben - so lassen sich die Flaechen untereinander vergleichen. Ziffern
   gleich breit (tabular-nums), damit Betraege sauber untereinander stehen. */
.scan-page .preis-tabelle th.flaeche { text-align: right; white-space: nowrap; width: 1%; }
.scan-page .preis-tabelle td,
.scan-page .preis-tabelle th.flaeche { font-variant-numeric: tabular-nums; }
.scan-page .preis-tabelle td.spalte-beispiel { color: var(--muted); font-size: 14px; }
.scan-page .preis-tabelle .kopf-erklaerung {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  white-space: normal;
}
/* Hinweiszeile an der Grenze fuer Sonderkonditionen */
.scan-page .preis-tabelle tr.hinweis-zeile td {
  background: rgba(255, 102, 0, 0.10);
  color: #ffb07a;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.scan-page .preis-tabelle .klein.hinweis { color: #ffb07a; }

/* --- 3. Fragen & Antworten ----------------------------------------------- */
.scan-page .fragen { margin-top: 30px; display: grid; gap: 10px; }
.scan-page .fragen details {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  border-radius: 8px;
}
.scan-page .fragen summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 48px 16px 18px;
  font-weight: 700;
  font-size: 17px;
  position: relative;
}
.scan-page .fragen summary::-webkit-details-marker { display: none; }
.scan-page .fragen summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 24px;
  font-weight: 400;
}
.scan-page .fragen details[open] summary::after { content: "–"; }
.scan-page .fragen details p {
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.6;
}

/* Die Hauptueberschrift ist hier etwas kleiner als auf den anderen
   Unterseiten: "3D-Gebaeudescan?" soll in einer Zeile neben dem Preiskasten
   Platz haben, ohne hineinzuragen. */
.scan-page-kosten h1 { font-size: clamp(38px, 4.4vw, 62px); }

/* "3D-Gebaeudescan" in Ueberschriften nicht nach "3D-" umbrechen. */
.scan-page .nobr { white-space: nowrap; }

/* Preiszeile in den drei Vergleichskarten */
.scan-page .tier .tier-preis { margin-top: 14px; color: var(--muted); }
.scan-page .tier .tier-preis strong { color: #fff; font-size: 20px; white-space: nowrap; }

/* Stand-Zeile und Autor */
.scan-page .stand-zeile {
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 680px) {
  /* Auf dem Handy entfaellt die Grundriss-Spalte der Preistabelle - die
     Grundriss-Preise stehen weiter unten bei den Optionen. So passt die
     Tabelle ohne seitliches Wischen auf den Bildschirm. */
  .scan-page .spalte-option { display: none; }
  .scan-page .preis-tabelle .kopf-erklaerung { font-size: 10px; }
  .scan-page .preis-tabelle { min-width: 0; }
  .scan-page .preis-tabelle th,
  .scan-page .preis-tabelle td { padding: 12px 10px; }
  /* Spaltenkoepfe duerfen hier umbrechen ("Baustellen / 3D-Scan"). */
  .scan-page .preis-tabelle thead th.betrag { white-space: normal; }
  .scan-page .preis-tabelle thead th { font-size: 11px; letter-spacing: 0.04em; }
  .scan-page .preis-antwort { padding: 18px; }
  .scan-page .preis-antwort__zeile b { font-size: 19px; }
  .scan-page .preis-tabelle { font-size: 15px; }
}

@media (max-width: 560px) {
  /* Ganz schmal: auch das Beispielobjekt weglassen - Flaeche und die beiden
     Preise bleiben nebeneinander lesbar. */
  .scan-page .spalte-beispiel { display: none; }
}

@media (max-width: 900px) {
  /* Tablet: fuenf Spalten werden zu eng - die Grundriss-Spalte entfaellt
     (die Grundriss-Preise stehen bei den Optionen). */
  .scan-page .spalte-option { display: none; }
}