/*
 * Preisrechner - Darstellung.
 * Gehoert zusammen mit js/preisrechner.js.
 *
 * Herkunft: Der Rechner wurde urspruenglich als eigenstaendiges Werkzeug
 * gebaut und spaeter in die Website eingesetzt. Aus dieser Zeit stammten
 * feste Farbcodes und elf style-Attribute direkt im HTML. Beides ist im
 * August 2026 hierher ueberfuehrt worden - die Farben stehen jetzt als
 * Variablen in grundlagen.css, die Gestaltung in den Klassen unten.
 * Die Darstellung ist dabei unveraendert geblieben.
 *
 * Zwei Regeln des Originals wurden entfernt, weil sie ueber den Rechner
 * hinaus gewirkt haetten:
 *   *, *::before, *::after { margin:0; padding:0 }  - hob alle Abstaende
 *                                                    der uebrigen Seite auf
 *   body { font-family: 'Segoe UI' ... }            - ersetzte Roboto
 * Beides regelt bereits css/grundlagen.css richtig.
 */

.lsc-wrap { max-width: 780px; margin: 0 auto; padding: 32px 16px 64px; overflow-x: hidden; }

/* ---------------------------------------------------------------------------
   Beschriftungen und Eingaben
   --------------------------------------------------------------------------- */
.lsc-label { display: block !important; font-size: 0.85rem !important; font-weight: 600 !important; color: var(--orange) !important; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px !important; line-height: 1.2 !important; }
.lsc-label-sub { display: block !important; font-size: 0.78rem; color: var(--grau-4); font-weight: 600; margin-top: -6px !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
.lsc-input { width: 100%; background: var(--karte); border: 2px solid var(--rahmen); border-radius: 8px; color: #fff; font-size: 1rem; padding: 12px 14px; outline: none; transition: border-color 0.2s; }
.lsc-input:focus { border-color: var(--orange); }

/* Die hellen Felder: Adresse und Kontaktdaten stehen auf hellem Grund. */
#lsc-strasse, #lsc-plz, #lsc-ort, #lsc-land, #lsc-name, #lsc-email, #lsc-nachricht { background: var(--feld-hell); color: var(--karte); border-color: var(--text-blass); }
#lsc-strasse::placeholder, #lsc-plz::placeholder, #lsc-ort::placeholder, #lsc-name::placeholder, #lsc-email::placeholder, #lsc-nachricht::placeholder { color: var(--grau-5); }
#lsc-strasse:focus, #lsc-plz:focus, #lsc-ort:focus, #lsc-land:focus, #lsc-name:focus, #lsc-email:focus, #lsc-nachricht:focus { border-color: var(--orange); }
#lsc-land option { background: var(--karte); color: #fff; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.lsc-select { width: 100%; background: var(--karte); border: 2px solid var(--rahmen); border-radius: 8px; color: #fff; font-size: 1rem; padding: 12px 44px 12px 14px; outline: none; cursor: pointer; transition: border-color 0.2s; appearance: none; }
.lsc-select-wrap { position: relative; }
.lsc-select-wrap::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--grau-5); pointer-events: none; }
.lsc-select:focus { border-color: var(--orange); }
.lsc-select option { background: var(--karte); color: #fff; }
/* Gruppenueberschriften im Auswahlfeld. ACHTUNG: Das aufgeklappte Menue
   zeichnet das Betriebssystem, nicht die Seite. Auf dem Desktop greifen
   diese Angaben, auf Android werden sie haeufig ignoriert -- dort bleibt
   die Ueberschrift blasser Standardtext. Verlassen sollte man sich also
   nicht darauf. */
.lsc-select optgroup {
  background: var(--karte);
  color: var(--orange);
  font-weight: 700;
  font-style: normal;
}
.lsc-select option.lsc-opt-anfrage { color: var(--grau-6); font-style: italic; }
.lsc-select-desc { font-size: 0.82rem; color: var(--grau-4); font-weight: 600; margin-top: 8px; line-height: 1.5; padding: 0 2px; }
/* Stand als style="margin-top:10px" im HTML. */
.lsc-select-wrap--abstand { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Aufbau
   --------------------------------------------------------------------------- */
.lsc-section { margin-bottom: 28px; }
.lsc-two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 28px; }
.lsc-two-col .lsc-section { margin-bottom: 0; }
.lsc-addr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lsc-addr-row .lsc-input { flex: 1 1 180px; }
.lsc-addr-row .lsc-input.lsc-plz { flex: 0 0 110px; }

/* Etagen und Aussenbereich: zwei gleich breite Spalten, die zusammen die
   volle Breite des Rechners fuellen -- die Trennung liegt genau in der
   Mitte. Anders als bei "Flaeche / Praezisionsstufe" (1fr zu 2fr) sind
   hier beide Haelften gleich, weil beide denselben Aufbau haben:
   Beschriftung, Feld, Erklaertext darunter. */
.lsc-halb-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.lsc-halb-zwei .lsc-section { margin-bottom: 0; }
.lsc-input.lsc-halb-feld { width: 100%; }
.lsc-halb-info {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--grau-4);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}
/* text-wrap: balance verteilt den Text gleichmaessig auf die Zeilen, damit
   keine kurze Restzeile stehen bleibt. text-align: justify zieht sie danach
   auf dieselbe Breite. Browser ohne balance zeigen weiterhin sauberen
   Blocksatz -- nur die letzte Zeile bleibt dort kuerzer. */

/* ---------------------------------------------------------------------------
   Auswahlkarten

   Die Karten sind <label>-Elemente. Die zugehoerige Checkbox bzw. das Radio
   liegt unsichtbar auf dem Anzeigepunkt - vorhanden fuer Maus, Tastatur und
   Vorleseprogramme, nur nicht sichtbar. Frueher stand hier display:none,
   damit war die Karte ausschliesslich mit der Maus bedienbar.
   --------------------------------------------------------------------------- */
.lsc-cards-row,
.lsc-radio-cards-row { display: flex; gap: 12px; flex-wrap: wrap; }

.lsc-toggle-card,
.lsc-radio-card { flex: 1 1 220px; background: var(--karte); border: 2px solid var(--rahmen); border-radius: 10px; padding: 14px 16px 14px 50px; cursor: pointer; transition: border-color 0.2s, background 0.2s; user-select: none; position: relative; }
.lsc-toggle-card.lsc-active,
.lsc-radio-card.lsc-active { border-color: var(--orange); background: var(--feld-aktiv); }

.lsc-toggle-card input[type="checkbox"],
.lsc-radio-card input[type="radio"] {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; margin: 0;
  opacity: 0;
}
.lsc-toggle-card:has(input:focus-visible),
.lsc-radio-card:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }

.lsc-card-indicator,
.lsc-radio-indicator {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--punkt); background: var(--dunkel);
  transition: background 0.2s, border-color 0.2s;
}
.lsc-toggle-card.lsc-active .lsc-card-indicator,
.lsc-radio-card.lsc-active .lsc-radio-indicator { border-color: var(--orange); }
.lsc-toggle-card.lsc-active .lsc-card-indicator::after,
.lsc-radio-card.lsc-active .lsc-radio-indicator::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--orange);
}

.lsc-card-title { font-size: 0.95rem; font-weight: 600; color: var(--grau-1); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lsc-card-badge { font-size: 0.72rem; font-weight: 700; background: var(--orange-schleier-12); color: var(--orange); border-radius: 4px; padding: 2px 7px; }
.lsc-card-desc { font-size: 0.84rem; color: var(--grau-3); font-weight: 600; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Schaltflaeche und Statuszeile
   --------------------------------------------------------------------------- */
.lsc-btn { display: block; width: 100%; background: var(--orange-schleier-15); color: #fff; border: 2px solid var(--orange); border-radius: 10px; font-size: 1.05rem; font-weight: 700; padding: 15px; cursor: pointer; transition: background 0.2s, transform 0.1s; letter-spacing: 0.02em; }
.lsc-btn:hover { background: var(--orange-schleier-28); }
.lsc-btn:active { transform: scale(0.98); }
.lsc-btn:disabled { background: var(--punkt); color: var(--grau-5); cursor: not-allowed; }
.lsc-geo-status { font-size: 0.8rem; color: var(--grau-4); font-weight: 600; margin-top: 6px; min-height: 18px; }
/* Wird von js/preisrechner.js gesetzt, wenn die Anfahrt ueber 1000 km liegt.
   Stand dort als style="color:#ff6b35" im erzeugten HTML. */
.lsc-hinweis-stark { color: var(--orange); }

/* ---------------------------------------------------------------------------
   Ergebnis
   --------------------------------------------------------------------------- */
#lsc-result { margin-top: 36px; display: none; }
.lsc-result-box { background: var(--karte); border: 2px solid var(--rahmen); border-radius: 12px; padding: 24px; }
.lsc-result-title { font-size: 1.3rem; font-weight: 700; color: var(--orange); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--rahmen); text-align: center; }

.lsc-invoice-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--zeilenlinie); gap: 12px; }
.lsc-invoice-row:last-of-type { border-bottom: none; }
.lsc-pos { font-size: 0.82rem; color: var(--grau-3); font-weight: 600; white-space: nowrap; }
.lsc-pos-desc { font-size: 0.9rem; color: var(--text-blass); flex: 1; line-height: 1.3; }
/* Nebenzeile, etwa der Mindestaufpreis bei Klasse 3 und 4. Stand als
   style="color:#6a7486;font-style:italic" im erzeugten HTML. */
.lsc-pos-desc.lsc-nebenzeile { color: var(--grau-5); font-style: italic; }
/* Der Klammerzusatz einer Position, etwa "(222 m²)". Auf breiten
   Bildschirmen bleibt er in derselben Zeile, wird aber nie in sich
   getrennt. Die Huelle setzt js/preisrechner.js. */
.lsc-pos-zusatz { white-space: nowrap; }
.lsc-pos-price { font-size: 0.9rem; color: var(--grau-1); font-weight: 600; white-space: nowrap; text-align: right; }
.lsc-pos-price.lsc-anfrage { color: var(--orange); }

.lsc-totals { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--rahmen); }
.lsc-total-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; color: var(--grau-3); font-weight: 600; }
.lsc-total-row.lsc-brutto { font-size: 1.15rem; font-weight: 700; color: #fff !important; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rahmen); }
.lsc-total-row.lsc-anfrage-total { color: var(--orange); }
/* Der Bruttobetrag in Gruen -- nur die Zahl, die Beschriftung bleibt
   weiss. Auch dann, wenn Angaben fehlen und die Zeile sonst orange
   waere: Der Betrag ist ohnehin nur eine Schaetzung, das verbindliche
   Angebot schreibt der Betreiber spaeter von Hand. Entscheidung vom
   21.08.2026. */
.lsc-total-row.lsc-brutto span:last-child { color: var(--gut-text) !important; }

/* Beide Kaesten erscheinen erst mit dem Ergebnis. Der Anfangszustand stand
   frueher als style="display:none" im HTML - js/preisrechner.js schaltet sie
   weiterhin ueber .style.display. */
.lsc-note-box { display: none; margin-top: 16px; background: var(--feld-aktiv); border: 2px solid var(--rahmen); border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; color: var(--orange); line-height: 1.5; }
/* EIN Hinweiskasten unter dem Gesamtbetrag. Bis zum 21.08.2026 waren es
   zwei getrennte Kaesten (Cloud-Dienst und Unverbindlichkeit) mit je
   eigenem Rahmen -- das kostete doppelten Innenabstand und zwei
   Rahmenlinien, ohne dass die Trennung etwas gebracht haette. */
.lsc-cloud-box { display: none; margin-top: 12px; background: var(--dunkel); border: 2px solid var(--rahmen); border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; color: var(--grau-2); font-weight: 400; line-height: 1.5; }
.lsc-hinweis-zeile { margin: 0 0 8px; }
.lsc-hinweis-zeile:last-of-type { margin-bottom: 10px; }

/* Der ausfuehrliche Wortlaut steckt im HTML, wird aber nur im
   Popup-Fenster gezeigt. */
.lsc-hinweis-details { display: none; }

/* Textknopf, der das Fenster oeffnet. Sieht aus wie ein Verweis, ist aber
   ein echter <button> -- damit funktionieren Tabulator und Leertaste. */
.lsc-hinweis-mehr {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--orange);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lsc-hinweis-mehr:hover { text-decoration: underline; }
.lsc-hinweis-mehr:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Trenner mit Ueberschrift ueber dem Angebotsformular

   Frueher drei ineinander geschachtelte <span> mit zehn Gestaltungsangaben
   im HTML. Jetzt eine echte h3 mit Unterzeile. Die Groessen sind relativ zum
   Trenner angegeben (1.9em / 1.15em), damit der Wechsel des Schriftgrads bei
   561px weiterhin beide Zeilen mitnimmt.
   --------------------------------------------------------------------------- */
/* Ueberschrift des Formularteils INNERHALB des Ergebniskastens.

   Sie loest den frueheren .lsc-divider ab, der Linien nach links und
   rechts zog. Solche Linien sagen "neuer Abschnitt" -- und genau das war
   das Problem: Der Blick blieb bei der Kostenschaetzung stehen, das
   Formular wirkte wie ein fremder Bereich. Jetzt liegt beides im selben
   Rahmen, getrennt nur durch eine duenne Linie, wie sie auch unter der
   Ueberschrift "Ihre Kostenschaetzung" steht. */
.lsc-teil-titel {
  margin: 24px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--rahmen);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.3;
}

.lsc-divider { display: flex; align-items: center; gap: 14px; margin: 36px 0 24px; }
.lsc-divider::before, .lsc-divider::after { content: ''; flex: 1; height: 1px; background: var(--rahmen); }
.lsc-divider-inhalt { font-size: 0.85rem; font-weight: 700; color: var(--grau-4); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; line-height: 1.5; }
.lsc-divider-titel { margin: 0 0 1.2em; font-size: 1.9em; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.08em; }
.lsc-divider-sub { margin: 0; font-size: 1.15em; font-weight: 400; color: #fff; text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   Angebotsformular
   --------------------------------------------------------------------------- */
.lsc-form-subtext { font-size: 0.95rem; color: var(--grau-2); font-weight: 600; margin-bottom: 20px; line-height: 1.6; text-align: center; }
/* Zweite Zeile unter der Ueberschrift: der Ausblick auf das, was nach dem
   Absenden passiert. Etwas zarter und enger als die Zeile darueber, damit
   die Aufforderung zum Senden die wichtigere von beiden bleibt. */
.lsc-form-subtext--leise { margin-top: -12px; color: var(--grau-4); font-weight: 400; }
.lsc-contact-form { display: flex; flex-direction: column; gap: 14px; }
.lsc-form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lsc-form-left { display: flex; flex-direction: column; gap: 14px; }
.lsc-field-wrap { display: flex; flex-direction: column; }
.lsc-nachricht-wrap { display: flex; flex-direction: column; height: 100%; }
.lsc-nachricht-right { flex: 1; resize: none; line-height: 1.4; }
.lsc-contact-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; line-height: 1.2; }
.lsc-dsgvo-box { background: var(--karte); border: 2px solid var(--rahmen); border-radius: 8px; padding: 14px 16px; font-size: 0.78rem; color: var(--grau-4); font-weight: 600; line-height: 1.6; }
/* Stand als style="color:inherit; text-decoration:underline" am Link. */
.lsc-dsgvo-box a { color: inherit; text-decoration: underline; }

/* Die beiden Rueckmeldungen stehen im HTML direkt hinter dem Senden-Knopf.
   Kein margin-top: Sie sind Kinder von .lsc-contact-form, deren Flex-Abstand
   von 14 px schon den Abstand setzt -- ein zusaetzlicher Rand kaeme oben drauf. */
#lsc-form-success { display: none; background: var(--gut-flaeche); border: 2px solid var(--gut-rand); border-radius: 8px; padding: 16px; color: var(--gut-text); font-size: 0.9rem; }
#lsc-form-error { display: none; background: var(--fehler-flaeche); border: 2px solid var(--fehler-rand); border-radius: 8px; padding: 16px; color: var(--fehler-text); font-size: 0.9rem; }

/* ---------------------------------------------------------------------------
   Groessere Bildschirme
   --------------------------------------------------------------------------- */
@media (min-width: 561px) {
  .lsc-wrap { max-width: 1040px; padding: 40px 32px 80px; }
  .lsc-label { font-size: 1.02rem !important; }
  .lsc-contact-label { font-size: 1.02rem; }
  .lsc-divider-inhalt { font-size: 1.02rem; }
  .lsc-label-sub { font-size: 0.94rem; color: var(--grau-3); }
  .lsc-card-title { font-size: 1.14rem; }
  .lsc-card-desc { font-size: 0.94rem; color: var(--grau-3); }
  .lsc-select-desc { font-size: 0.98rem; color: var(--grau-3); }
  .lsc-input, .lsc-select { font-size: 1.2rem; }
  .lsc-select { padding: 14px 50px 14px 16px; }
  .lsc-select-wrap::after { border-left-width: 8px; border-right-width: 8px; border-top-width: 10px; right: 18px; }
  .lsc-btn { font-size: 1.26rem; padding: 17px; }
  .lsc-two-col,
  .lsc-halb-zwei { gap: 28px; }
  .lsc-halb-info { font-size: 0.98rem; color: var(--grau-3); }
  .lsc-cards-row, .lsc-radio-cards-row { gap: 16px; }
  .lsc-section { margin-bottom: 32px; }
  .lsc-form-subtext { font-size: 1.14rem; }
  /* Auf dem Desktop beginnt der zweite Satz der beiden Zeilen unter dem
     Titel eine neue Zeile. Auf dem Telefon bleibt er im Fluss -- dort ist
     die Spalte so schmal, dass ohnehin umbrochen wird und ein fester
     Umbruch nur eine sehr kurze Restzeile erzeugen wuerde.
     display:block statt <br>, damit die Umschaltung im CSS bleibt. */
  .lsc-satz-um { display: block; }
  .lsc-teil-titel { font-size: 1.5rem; }
  .lsc-pos { font-size: 0.98rem; }
  .lsc-pos-desc { font-size: 1.08rem; }
  .lsc-pos-price { font-size: 1.08rem; }
  .lsc-result-title { font-size: 1.56rem; }
  .lsc-total-row { font-size: 1.08rem; }
  .lsc-total-row.lsc-brutto { font-size: 1.38rem; }
  .lsc-dsgvo-box { font-size: 1.05rem; }
  .lsc-note-box { font-size: 0.98rem; }
  .lsc-cloud-box { font-size: 0.98rem; }
}

@media (max-width: 560px) {
  .lsc-two-col { grid-template-columns: 1fr; gap: 28px; }
  .lsc-cards-row, .lsc-radio-cards-row { flex-direction: column; }
  .lsc-toggle-card, .lsc-radio-card { flex: 0 0 auto; }
  .lsc-addr-row .lsc-input.lsc-plz { flex: 1 1 100%; }
  /* Telefon: die beiden Haelften untereinander. Nebeneinander blieben
     bei rund 150 px je Spalte vom Erklaertext nur wenige Zeichen je
     Zeile. */
  .lsc-halb-zwei { grid-template-columns: 1fr; gap: 28px; }
  .lsc-form-two-col { grid-template-columns: 1fr; }
  .lsc-nachricht-right { flex: none; height: 120px; }

  /* Kostenschaetzung: den Klammerzusatz in eine eigene Zeile. Sonst
     bricht er auf dem Telefon an einer beliebigen Stelle um -- etwa
     "Scanleistung (222" / "m²)". Jetzt steht die Bezeichnung oben und
     der Zusatz darunter. */
  .lsc-pos-zusatz { display: block; }

  /* NUR der Hinweiskasten wird breiter, nicht die ganze Kostenschaetzung.

     Der Innenabstand des Ergebniskastens bleibt bei 24 px -- ihn einmal
     auf 12 gesetzt zu haben, brachte zwar Breite, drueckte aber die
     Positionszeilen zusammen. Nicht wieder aendern, ohne die Liste
     anzusehen.

     Stattdessen zieht sich dieser eine Kasten mit negativen Aussen-
     abstaenden 12 px nach links und rechts in den Innenabstand hinein.
     Er bleibt damit 12 px vom Rahmen entfernt und gewinnt 24 px Breite,
     waehrend alles andere unberuehrt bleibt. */
  .lsc-cloud-box {
    margin-left: -12px;
    margin-right: -12px;
    padding: 10px 10px;
    border-width: 1px;
  }
}

/* ===========================================================================
   KURZER RECHNER -- Kostenschaetzung ohne Gesamtbetrag (site v5, 06.10.2026)

   Aufbau, von oben nach unten:
     .lsc-kurz-scan       Scanleistung -- der Blickfang, Betrag gross & gruen
     .lsc-kurz-anfahrt    "zzgl. Anfahrt" -- bewusst eine Stufe leiser
     .lsc-kurz-optionen   Optionale Leistungen mit "+ Betrag", klein & grau
   Die Zeilen baut js/preisrechner.js (lscZeigeErgebnis).
   =========================================================================== */
.lsc-kurz-scan {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--gut-flaeche); border: 2px solid var(--gut-rand);
  border-radius: 10px; padding: 16px 18px;
}
.lsc-kurz-scan-text { display: flex; flex-direction: column; gap: 2px; }
.lsc-kurz-scan-titel { font-size: 1.15rem; font-weight: 700; color: #fff; }
.lsc-kurz-scan-zusatz { font-size: 0.85rem; color: var(--grau-3); }
.lsc-kurz-scan-preis {
  font-size: 1.9rem; font-weight: 800; color: var(--gut-text);
  white-space: nowrap; letter-spacing: .01em;
}

.lsc-kurz-anfahrt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 18px 4px;
}
.lsc-kurz-anfahrt-text { font-size: 0.95rem; color: var(--grau-1); font-weight: 600; }
.lsc-kurz-anfahrt-preis { font-size: 1rem; color: var(--grau-1); font-weight: 700; white-space: nowrap; }
.lsc-kurz-anfahrt-preis.lsc-anfrage { color: var(--orange); }

/* Gedaempfter Zusatz in einer Zeile, etwa "(42 km)". */
.lsc-kurz-leise { font-weight: 400; color: var(--grau-4); }

.lsc-kurz-optionen {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px dashed var(--rahmen);
}
.lsc-kurz-optionen-titel {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--grau-3); margin-bottom: 6px;
}
.lsc-kurz-optionen-titel .lsc-kurz-leise { text-transform: none; letter-spacing: 0; }
.lsc-kurz-option {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--zeilenlinie);
}
.lsc-kurz-option:last-of-type { border-bottom: none; }
.lsc-kurz-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lsc-kurz-option-titel { font-size: 0.9rem; color: var(--text-blass); }
.lsc-kurz-option-zusatz { font-size: 0.78rem; color: var(--grau-5); line-height: 1.35; }
.lsc-kurz-option-preis { font-size: 0.9rem; color: var(--grau-3); font-weight: 600; white-space: nowrap; }
.lsc-kurz-option-preis.lsc-anfrage { color: var(--orange); }
.lsc-kurz-optionen-tipp { margin: 10px 0 0; font-size: 0.8rem; color: var(--grau-4); font-style: italic; }

/* Statt der frueheren Summenzeilen nur noch der MwSt.-Vermerk. */
/* Die fruehere Summenlinie darueber entfaellt. */
.lsc-totals { margin-top: 10px; padding-top: 0; border-top: none; }
.lsc-kurz-mwst { margin: 0; font-size: 0.8rem; color: var(--grau-4); text-align: right; }

@media (min-width: 561px) {
  .lsc-kurz-scan-titel { font-size: 1.35rem; }
  .lsc-kurz-scan-zusatz { font-size: 1rem; }
  .lsc-kurz-scan-preis { font-size: 2.3rem; }
  .lsc-kurz-anfahrt-text, .lsc-kurz-anfahrt-preis { font-size: 1.12rem; }
  .lsc-kurz-option-titel, .lsc-kurz-option-preis { font-size: 1.04rem; }
  .lsc-kurz-option-zusatz { font-size: 0.9rem; }
  .lsc-kurz-optionen-tipp, .lsc-kurz-mwst { font-size: 0.95rem; }
}

@media (max-width: 560px) {
  .lsc-kurz-scan { padding: 14px; }
  .lsc-kurz-scan-preis { font-size: 1.55rem; }
  .lsc-kurz-anfahrt { padding: 12px 14px 4px; }
}

/* Vergleichshinweis "Zum Vergleich: Als Standardaufnahme ... wuerde die
   Scanleistung nur X statt Y kosten." unter der Scanleistung -- nur bei
   der Baustellenaufnahme (06.10.2026). Der Streifen setzt die gruene Box
   nach unten fort: gleicher Rahmen, die Box verliert dafuer ihre unteren
   Rundungen. Grau statt gruen, damit er sich klar unterordnet; ein ganzer
   Satz, damit niemand den Betrag fuer einen weiteren Posten haelt. */
.lsc-kurz-scan-gruppe .lsc-kurz-scan {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.lsc-kurz-alternative {
  padding: 10px 18px;
  background: var(--dunkel);
  border: 2px solid var(--gut-rand); border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: 0.88rem; line-height: 1.45; color: var(--grau-3);
}
.lsc-kurz-alternative strong { color: var(--grau-1); font-weight: 600; }
.lsc-kurz-alternative .lsc-kurz-alternative-preis { font-weight: 700; white-space: nowrap; }

/* Die gewaehlte Aufnahmeart im Titel der gruenen Box. */
/* nowrap: "Baustellen 3D-Scan" bricht nie in sich um, sondern
   rutscht als Ganzes unter "Scanleistung:". */
.lsc-kurz-scan-art { color: var(--gut-text); white-space: nowrap; }

@media (min-width: 561px) {
  .lsc-kurz-alternative { font-size: 1rem; }
}
@media (max-width: 560px) {
  .lsc-kurz-alternative { padding: 10px 14px; }
  /* Telefon: Preis UNTER den Titel. Nebeneinander passt "Baustellen-
     aufnahme" plus Betrag nicht in die Breite -- die Zahl ragte ueber
     den gruenen Rahmen hinaus. */
  .lsc-kurz-scan { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Hinweis "Sonderkonditionen" ueber der gruenen Box (06.10.2026) --
   erscheint bei sehr grossem Objekt und/oder weiter Anfahrt. Orange wie
   die Akzente der Seite: auffaellig, aber freundlich, keine Warnfarbe.
   Ein orangener Balken links fuehrt das Auge, die Flaeche ist nur leicht
   getoent, damit der Text gut lesbar bleibt. */
.lsc-kurz-sonder {
  margin-bottom: 18px;
  padding: 14px 18px 14px 16px;
  background: var(--orange-schleier-12);
  border: 1px solid var(--orange-schleier-28);
  border-left: 5px solid var(--orange);
  border-radius: 10px;
}
.lsc-kurz-sonder-titel {
  font-size: 1rem; font-weight: 700; color: var(--orange);
  margin-bottom: 6px; line-height: 1.3;
}
.lsc-kurz-sonder-text { font-size: 0.88rem; line-height: 1.5; color: var(--grau-1); }

@media (min-width: 561px) {
  .lsc-kurz-sonder-titel { font-size: 1.15rem; }
  .lsc-kurz-sonder-text { font-size: 1rem; }
}
@media (max-width: 560px) {
  .lsc-kurz-sonder { padding: 12px 14px 12px 12px; }
}

/* ===========================================================================
   SCHRIFT-ABGLEICH Kostenschaetzung <-> Formular (06.10.2026)

   Gemessen: Die Erklaertexte im Formular sind 15-16 px, halbfett (600),
   mittelgrau (--grau-3). In der Kostenschaetzung waren die Beschreibungen
   14 px, duenn (400) und dunkelgrau (--grau-5) -- schlecht lesbar --,
   waehrend ausgerechnet der Hinweiskasten darunter heller war als alles
   darueber. Jetzt gilt in der Kostenschaetzung:
     Zeilen-Titel und Betraege   --grau-1, 500/600
     Beschreibungen, Hinweise    --grau-3, 500, nicht kursiv
   Diese Regeln stehen bewusst am Dateiende und ueberschreiben die
   Angaben weiter oben.
   =========================================================================== */
.lsc-kurz-scan-zusatz,
.lsc-kurz-alternative,
.lsc-kurz-option-zusatz,
.lsc-kurz-optionen-tipp,
.lsc-kurz-mwst,
.lsc-hinweis-zeile { color: var(--grau-3); font-weight: 500; }

.lsc-kurz-leise { color: var(--grau-3); font-weight: 500; }
.lsc-kurz-optionen-tipp { font-style: normal; }
.lsc-kurz-option-titel { color: var(--grau-1); font-weight: 500; }
.lsc-kurz-option-preis { color: var(--grau-1); font-weight: 600; }
.lsc-kurz-option-zusatz { font-size: 0.82rem; }
.lsc-kurz-optionen-titel { font-size: 0.85rem; }

/* Hinweiskasten: zwei Themen, zwei Zeilen. Stichwort vorn heller und
   fett, die zweite Zeile durch eine feine Linie abgesetzt. */
.lsc-hinweis-zeile strong { color: var(--grau-1); font-weight: 600; }
.lsc-hinweis-zeile--trenn { padding-top: 8px; border-top: 1px solid var(--rahmen); }

@media (min-width: 561px) {
  .lsc-kurz-option-zusatz,
  .lsc-kurz-optionen-tipp,
  .lsc-kurz-mwst,
  .lsc-hinweis-zeile { font-size: 0.95rem; }
  .lsc-kurz-optionen-titel { font-size: 0.9rem; }
}

/* Nur die zwei Woerter "Optionale Leistungen" in Orange (06.10.2026);
   der Zusatz "-- auf Wunsch zubuchbar" bleibt grau (.lsc-kurz-leise). */
.lsc-kurz-optionen-titel { color: var(--orange); }

/* "Scanleistung:" und die Aufnahmeart immer auf zwei Zeilen -- wirkt
   luftiger (Wunsch des Betreibers vom 06.10.2026). */
.lsc-kurz-scan-art { display: block; }

/* ===========================================================================
   Feinschliff um den Rechner herum (06.10.2026)
   =========================================================================== */

/* Projektadresse: der Satz "Wird nur fuer die automatisierte Berechnung
   der Anfahrt benutzt" heller als die uebrigen Unterzeilen. */
.lsc-label-sub--betont { color: var(--grau-1); }

/* "(Ihre Angaben werden automatisch mitgeschickt.)" -- kleiner und
   leiser als der Satz davor, dem er nur zur Beruhigung folgt. */
/* Immer eigene Zeile -- auch auf dem Telefon, wo .lsc-satz-um sonst im
   Fluss bleibt; zwei Schriftgroessen in einer Zeile wirkten unruhig. */
/* padding statt margin: ein unterer Aussenabstand wuerde mit dem des
   Absatzes verschmelzen und nichts bewirken. */
.lsc-satz-leise { display: block; padding: 7px 0 9px; font-size: 0.85em; font-weight: 400; color: var(--grau-3); }

/* Ausgewogene Zeilenumbrueche: Der Browser verteilt den Text gleichmaessig
   auf die Zeilen, statt ein einzelnes Wort ("Termin ab.") allein in die
   letzte Zeile zu stellen. Aeltere Browser ignorieren die Angabe einfach. */
.lsc-form-subtext { text-wrap: balance; }

/* Datenschutzhinweis unter dem Absenden-Knopf (06.10.2026): war 16,8 px
   halbfett mit extra-fettem Stichwort -- praesenter als die Kosten-
   schaetzung selbst. Jetzt normale Schriftstaerke in derselben Groesse
   und Farbe wie die uebrigen Erklaertexte; nur "Datenschutz:" bleibt fett.
   Rechtlich genuegt "leicht zugaenglich und verstaendlich" (Art. 12
   DSGVO): ausreichender Kontrast (--grau-3 auf dunklem Grund, ca. 7:1),
   lesbare Groesse, Verweis auf die Datenschutzerklaerung -- bleibt alles. */
.lsc-dsgvo-box { font-weight: 400; color: var(--grau-3); font-size: 0.82rem; }
.lsc-dsgvo-box strong { font-weight: 600; color: var(--grau-1); }
@media (min-width: 561px) {
  .lsc-dsgvo-box { font-size: 0.92rem; }
}

/* Telefon: Kostenschaetzung breiter (06.10.2026).
   Der Inhalt sass 42 px vom Bildschirmrand entfernt, das Formular
   darueber bei 16 px -- links und rechts zu viel Leerraum.
   Am 21.08.2026 war der Innenabstand schon einmal auf 12 px gesenkt und
   wieder zurueckgenommen worden, weil er die alten Rechnungszeilen mit
   "Pos 01, Pos 02 ..." zusammendrueckte (siehe Kommentar weiter oben).
   Diese Pos-Spalte gibt es im kurzen Rechner nicht mehr -- der Grund
   entfaellt. Der Hinweiskasten braucht seine negativen Aussenabstaende
   dafuer nicht mehr; alles steht jetzt auf einer Linie (30 px). */
@media (max-width: 560px) {
  /* Der RAHMEN selbst geht ueber die Breite des Knopfes "Preis
     berechnen" hinaus bis nah an den Displayrand (Wunsch des Betreibers:
     gleich breit wie der Knopf wirkte ulkig). Die negativen Aussen-
     abstaende ziehen ihn in den 16-px-Seitenrand von .lsc-wrap hinein. */
  /* Nachgeschaerft am selben Tag: 6 px waren noch zu wenig. Jetzt 2 px
     zum Rand -- der Inhalt steht damit bei 16 px, genau auf einer Linie
     mit Formularfeldern und Knopf darueber. */
  /* RICHTIGE FASSUNG (06.10.2026, nach zwei Fehlversuchen):
     Auf der Startseite steckt der Rechner in main.inhaltsflaeche, die auf
     dem Telefon selbst 14 px Seitenabstand hat (startseite.css). Dazu
     kommen 16 px von .lsc-wrap -- Formular und Knoepfe stehen also bei
     30 px. Die ersten Versuche waren an einer Testseite OHNE diesen
     Behaelter gemessen und landeten live bei 16 px Rahmen / 8 px Luft.

     Loesung: .lsc-wrap hebt die 14 px des Behaelters per negativem
     Aussenabstand auf und gleicht sie im Innenabstand wieder aus. Das
     Formular bleibt dadurch exakt bei 30 px, der Rahmen der Kosten-
     schaetzung darf aber bis 6 px an den Rand -- ohne von
     overflow-x: hidden an .lsc-wrap abgeschnitten zu werden.
       Rahmen:  30 - 24 = 6 px vom Displayrand
       Inhalt:  6 + 2 (Linie) + 16 (Innenabstand) = 24 px */
  .rechner .lsc-wrap { margin-left: -14px; margin-right: -14px; padding-left: 30px; padding-right: 30px; }
  .lsc-result-box { padding: 20px 16px; margin-left: -24px; margin-right: -24px; }
  .lsc-cloud-box { margin-left: 0; margin-right: 0; }
}

/* ===========================================================================
   Zeilenumbrueche im Rechner (06.10.2026)
   text-wrap: pretty  -- der Browser vermeidet ein einzelnes Wort allein in
                         der letzten Zeile (Fliesstexte).
   text-wrap: balance -- kurze, mehrzeilige Ueberschriften werden auf
                         gleich lange Zeilen verteilt.
   Beides passt sich jeder Breite selbst an (Telefon, Tablet, Desktop) --
   feste <br> wuerden auf der jeweils anderen Breite falsch sitzen.
   Aeltere Browser ignorieren die Angaben einfach.
   =========================================================================== */
.lsc-halb-info, .lsc-card-desc,
.lsc-kurz-scan-zusatz,
.lsc-kurz-option-zusatz, .lsc-kurz-optionen-tipp,
.lsc-kurz-sonder-text, .lsc-note-box,
.lsc-hinweis-zeile, .lsc-dsgvo-box { text-wrap: pretty; }
.lsc-kurz-sonder-titel, .lsc-kurz-option-titel,
.lsc-kurz-alternative { text-wrap: balance; }
/* "-- auf Wunsch zubuchbar" rutscht als Ganzes in die naechste Zeile,
   statt "zubuchbar" allein stehen zu lassen. */
.lsc-kurz-optionen-titel .lsc-kurz-leise { white-space: nowrap; }