/*
  Kalkulator-Einstieg (Kundenansicht) – Gestaltungsschicht.

  Quelle: docs/kalkulator-redesign/ (Kalkulator.dc.html, Uebergabe.dc.html,
  Stand 07.09.2026). Die Inline-Werte des Prototyps sind hier 1:1 als
  Klassen abgelegt: Farben (Abschnitt 5), Typografie/Abstände (6),
  Umbruchpunkte < 760 px Mobil, 760–1099 px Desktop ohne Seitenleiste,
  ≥ 1100 px Seitenleiste.

  Diese Datei wird NUR auf der Kalkulatorseite geladen (index.html,
  block styles). main.css bleibt für Checkout, Rechtsseiten und den
  internen Bereich zuständig. Alle Klassen tragen das Präfix `lt-`.
*/

/* ---------- Farbwelt (Uebergabe.dc.html, Abschnitt 5) ------------------- */
.lt-kalk-seite {
    --lt-bg: #14171b;
    --lt-card: #1a1e23;
    --lt-field: #1b1f24;
    --lt-line: #262c33;
    --lt-line-strong: #2f3339;
    --lt-line-soft: #22282e;
    --lt-line-dashed: #3a4148;
    --lt-text: #eef1f4;
    --lt-text-2: #c6cdd4;
    --lt-text-3: #8f99a3;
    --lt-text-4: #7c858f;
    --lt-text-muted: #5d6771;
    --lt-action: #8b1fe6;
    --lt-action-hover: #9E27FB;
    --lt-accent: #D9A6F2;
    --lt-accent-bg: #251733;
    --lt-wait: #F6E760;
    --lt-wait-bg: #2a2713;
    --lt-wait-line: #5a5220;
    --lt-wait-text: #f4ecb0;
    --lt-error: #f5576c;
    --lt-error-text: #ff8a97;
    --lt-ok: #7fd39a;
    --lt-toast-bg: #1f2a22;
    --lt-toast-line: #2e5a3a;
    --lt-toast-text: #bfe8c9;
    --lt-intern-bg: #1c1b17;
}

/* ---------- Seite ------------------------------------------------------- */
body.lt-kalk-seite {
    background: var(--lt-bg);
    color: var(--lt-text);
    padding: 0;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
body.lt-kalk-seite::before { display: none; }
body.lt-kalk-seite main.container {
    max-width: none;
    margin: 0 !important;
    padding: 0;
    animation: none;
}
/* Kopfzeile (base.html): 56 px, Linie #22282e, kein Verlauf. */
body.lt-kalk-seite .navbar {
    background: var(--lt-bg) !important;
    border-bottom: 1px solid var(--lt-line-soft);
    min-height: 56px;
    padding: 0 20px;
}
body.lt-kalk-seite .navbar .container { max-width: 1200px; animation: none; }
body.lt-kalk-seite .navbar-brand img { height: 28px; }
body.lt-kalk-seite .navbar .nav-link {
    color: var(--lt-text-2);
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 8px;
}
body.lt-kalk-seite .navbar .nav-link:hover { background: var(--lt-card); color: var(--lt-text); }
body.lt-kalk-seite .version-display { color: var(--lt-text-4); }

/* Fokus global (Abschnitt 6). */
.lt-kalk-seite :focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
.lt-kalk-seite select:focus-visible,
.lt-kalk-seite input:focus-visible,
.lt-kalk-seite textarea:focus-visible {
    outline: none;
    border-color: var(--lt-accent) !important;
    box-shadow: 0 0 0 3px rgba(217, 166, 242, .25);
}
.lt-kalk-seite button:focus:not(:focus-visible),
.lt-kalk-seite [role=button]:focus:not(:focus-visible) { outline: none; }
.lt-kalk button, .lt-kalk input, .lt-kalk select, .lt-kalk textarea { font: inherit; }
.lt-kalk input::placeholder, .lt-kalk textarea::placeholder { color: var(--lt-text-4); }
.lt-kalk a { color: var(--lt-accent); }
.lt-kalk a:hover { color: var(--lt-text); }

@keyframes lt-spin { to { transform: rotate(360deg); } }
@keyframes lt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lt-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .lt-kalk *, .lt-panel-wrap *, .lt-viewer-wrap * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.lt-kalk { min-height: 60vh; display: flex; flex-direction: column; position: relative; }
.lt-kalk [hidden] { display: none !important; }
.lt-tabular { font-variant-numeric: tabular-nums; }
.lt-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Grundbausteine ---------------------------------------------- */
.lt-spinner {
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--lt-wait); border-top-color: transparent;
    animation: lt-spin .8s linear infinite; display: inline-block; flex-shrink: 0;
}
.lt-spinner--m { width: 12px; height: 12px; }
.lt-spinner--l { width: 16px; height: 16px; }

.lt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: transparent; border: 1px solid var(--lt-line-strong); color: var(--lt-text-2);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 500;
    cursor: pointer; min-height: 38px; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.lt-btn:hover:not(:disabled) { border-color: var(--lt-accent); color: var(--lt-accent); }
.lt-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 3D-Hinweis (17.09.2026): Nach der Berechnung pulsiert der 3D-Knopf, bis die
   Ansicht einmal geoeffnet wurde - damit Kunden das Modell wirklich pruefen. */
@keyframes lt-3d-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 166, 242, .55); }
    60% { box-shadow: 0 0 0 7px rgba(217, 166, 242, 0); }
}
.lt-open-3d--pruefen {
    border-color: var(--lt-accent); color: var(--lt-accent); font-weight: 600;
    animation: lt-3d-puls 1.6s ease-out infinite;
}
.lt-btn--outline {
    border-color: var(--lt-line-dashed); color: var(--lt-text); border-radius: 9px;
    padding: 9px 14px; font-weight: 600; font-size: 14px; min-height: 40px;
}
.lt-btn--outline:hover:not(:disabled) { border-color: var(--lt-accent); color: var(--lt-accent); }
.lt-btn--small { border-color: var(--lt-line-dashed); color: var(--lt-text); border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 500; }
.lt-btn--danger:hover:not(:disabled) { border-color: var(--lt-error); color: var(--lt-error); }
.lt-btn--primary {
    background: var(--lt-action); color: #fff; border: 0; border-radius: 10px;
    padding: 11px 20px; font-weight: 600; font-size: 15px; min-height: 44px;
    transition: background .15s, opacity .15s;
}
.lt-btn--primary:hover:not(:disabled) { background: var(--lt-action-hover); color: #fff; }
.lt-btn--primary:disabled { opacity: .55; }
.lt-btn--text {
    background: transparent; border: 0; color: var(--lt-accent); font-weight: 600;
    font-size: 13.5px; cursor: pointer; padding: 8px 6px; border-radius: 6px; min-height: 36px;
}
.lt-btn--text:hover { color: #fff; background: var(--lt-accent-bg); }
.lt-btn--quiet {
    background: transparent; border: 0; color: var(--lt-text-3); font-weight: 500;
    font-size: 13px; cursor: pointer; padding: 8px; border-radius: 6px; min-height: 36px;
}
.lt-btn--quiet:hover { color: var(--lt-text); background: var(--lt-line-soft); }
.lt-btn--link {
    background: transparent; border: 0; color: var(--lt-text-2); font-size: 13.5px; cursor: pointer;
    padding: 6px; text-decoration: underline; text-underline-offset: 3px;
}
.lt-btn--link:hover { color: var(--lt-text); }
.lt-btn--icon { width: 40px; height: 40px; padding: 0; font-size: 18px; border-radius: 8px; flex-shrink: 0; }

.lt-field {
    width: 100%; background: var(--lt-field); border: 1px solid var(--lt-line-strong); color: var(--lt-text);
    border-radius: 8px; padding: 8px 10px; font-size: 14px; min-height: 38px;
}
select.lt-field { padding: 8px 22px 8px 8px; text-overflow: ellipsis; }
.lt-field[aria-invalid="true"], .lt-field--warn { border-color: var(--lt-wait); }
.lt-field:disabled { opacity: .6; cursor: not-allowed; }
input.item-quantity { padding-left: 8px; padding-right: 6px; -moz-appearance: auto; appearance: auto; }
input.item-quantity::-webkit-outer-spin-button, input.item-quantity::-webkit-inner-spin-button { -webkit-appearance: auto; opacity: 1; margin: 0; }
.lt-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lt-label > span:first-child { font-size: 11px; color: var(--lt-text-4); font-weight: 500; letter-spacing: .02em; }
.lt-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; min-height: 36px; }
.lt-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lt-action-hover); flex-shrink: 0; margin: 0; }

.lt-toast {
    background: var(--lt-toast-bg); border: 1px solid var(--lt-toast-line); color: var(--lt-toast-text);
    border-radius: 10px; padding: 10px 14px; font-size: 14px; animation: lt-in .2s ease;
}
.lt-note { margin: 0; color: var(--lt-text-3); font-size: 13px; text-wrap: pretty; }
.lt-note--wait { color: var(--lt-wait); display: flex; align-items: center; gap: 8px; }
.lt-box--wait {
    margin: 0; background: var(--lt-wait-bg); border: 1px solid var(--lt-wait-line); color: var(--lt-wait-text);
    border-radius: 10px; padding: 10px 12px; font-size: 13px; text-wrap: pretty;
}

/* ---------- Mitarbeiter-Kopfzeile --------------------------------------- */
.lt-staffbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    max-width: 1200px; margin: 0 auto; padding: 12px 16px 0; width: 100%;
}
.lt-badge {
    display: inline-flex; align-items: center; gap: 6px; background: var(--lt-wait-bg);
    border: 1px solid var(--lt-wait-line); color: var(--lt-wait); border-radius: 999px;
    padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.lt-staffbar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lt-text-3); cursor: pointer; margin: 0; }
.lt-staffbar select { width: auto; min-height: 34px; padding: 6px 28px 6px 8px; font-size: 13px; }
.lt-staffbar input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--lt-action-hover); margin: 0; }
.lt-staffbar a, .lt-staffbar .lt-staff-link {
    text-decoration: none; color: var(--lt-text-2); font-size: 14px; padding: 8px 10px; border-radius: 8px;
    background: transparent; border: 0; cursor: pointer;
}
.lt-staffbar a:hover, .lt-staffbar .lt-staff-link:hover { background: var(--lt-card); color: var(--lt-text); }
.lt-staffbar .lt-staff-spacer { flex: 1; }

/* ---------- Leerer Einstieg --------------------------------------------- */
.lt-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    padding: clamp(24px, 6vh, 72px) 16px 48px;
}
.lt-empty__inner { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 28px; animation: lt-in .35s ease; }
.lt-empty__head { display: flex; flex-direction: column; gap: 6px; }
.lt-empty__title { margin: 0; font-size: clamp(22px, 4vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--lt-text); background: none; -webkit-text-fill-color: currentColor; }
.lt-empty__sub { margin: 0; color: var(--lt-text-3); font-size: 15px; text-wrap: pretty; }

.lt-drop {
    border: 1.5px dashed var(--lt-line-dashed); border-radius: 14px;
    padding: clamp(28px, 6vw, 48px) 20px; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 14px; background: #171b20; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.lt-drop:hover, .lt-drop.is-over { border-color: var(--lt-action-hover); background: #1a1a25; }
.lt-drop__icon {
    width: 48px; height: 48px; border-radius: 50%; background: var(--lt-accent-bg); color: var(--lt-accent);
    display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600;
}
.lt-drop__text { display: flex; flex-direction: column; gap: 4px; }
.lt-drop__title { font-size: 17px; font-weight: 600; }
.lt-drop__hint { color: var(--lt-text-3); font-size: 14px; text-wrap: pretty; max-width: 520px; }

.lt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.lt-card {
    border: 1px solid var(--lt-line); border-radius: 12px; padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px; background: var(--lt-card);
}
.lt-card__title { font-weight: 600; font-size: 15px; }
.lt-card__text { margin: 0; color: var(--lt-text-3); font-size: 14px; text-wrap: pretty; }
.lt-card .lt-btn--outline { align-self: flex-start; }
.lt-card .ai-beta-plakette {
    display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
    background: var(--lt-wait-bg); color: var(--lt-wait); border: 1px solid var(--lt-wait-line);
    border-radius: 999px; padding: 1px 7px; vertical-align: middle;
}

.lt-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--lt-text-3); font-size: 13px; }
.lt-steps li { display: flex; gap: 8px; align-items: center; }
.lt-steps__num {
    width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--lt-line-dashed);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--lt-text-2);
}

/* ---------- Positionsbereich ------------------------------------------- */
.lt-work { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 0 32px; }
.lt-grid {
    width: 100%; max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 28px; padding: 24px 16px 0; align-items: start;
}
@media (min-width: 1100px) {
    .lt-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
.lt-list { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lt-list__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.lt-list__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; color: var(--lt-text); background: none; -webkit-text-fill-color: currentColor; }
.lt-list__title span { color: var(--lt-text-3); font-weight: 500; }
.lt-list__actions { display: flex; gap: 6px; position: relative; flex-wrap: wrap; }

.lt-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--lt-card);
    border: 1px solid var(--lt-line-strong); border-radius: 10px; padding: 6px; min-width: 220px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45); display: flex; flex-direction: column; animation: lt-in .15s ease;
}
.lt-menu__item {
    text-align: left; background: transparent; border: 0; color: var(--lt-text); padding: 10px 12px;
    border-radius: 7px; cursor: pointer; font-size: 14px; min-height: 40px;
}
.lt-menu__item:hover, .lt-menu__item:focus-visible { background: var(--lt-line-soft); }
.lt-menu__sep { height: 1px; background: var(--lt-line); margin: 6px 0; }

/* Fortschritt bei grossen Uploads (bestehende IDs aus handlers.js). */
#progress-container-overall { margin: 0; }
#progress-container-overall .progress { height: 6px; background: var(--lt-line-soft); border-radius: 999px; }
#progress-container-overall .progress-bar { background: var(--lt-wait) !important; }
#progress-text-overall { color: var(--lt-text-3) !important; font-size: 13px; margin-bottom: 6px !important; }

/* ---------- Eingangs-Karte --------------------------------------------- */
.lt-intake {
    background: var(--lt-card); border: 1px solid var(--lt-toast-line); border-radius: 12px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; animation: lt-in .25s ease;
}
.lt-intake--open, .lt-intake--sorting { border-color: var(--lt-wait-line); }
.lt-intake__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lt-intake__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--lt-text); }
.lt-intake__summary { margin: 0; color: var(--lt-text-3); font-size: 13.5px; text-wrap: pretty; }
.lt-intake__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lt-intake__row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--lt-field);
    border: 1px solid var(--lt-line); border-radius: 9px; padding: 8px 12px; font-size: 13.5px;
}
.lt-intake__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--lt-ok); }
.lt-intake__dot--open { background: var(--lt-wait); }
.lt-intake__dot--error { background: var(--lt-error); }
.lt-intake__name { min-width: 0; flex: 1 1 220px; }
.lt-intake__name strong { font-weight: 600; }
.lt-intake__name span { color: var(--lt-text-3); }
.lt-intake__done { color: var(--lt-ok); font-size: 13px; }
.lt-intake__row select { width: auto; max-width: 100%; min-height: 36px; padding: 7px 28px 7px 10px; font-size: 13px; border-color: var(--lt-line-dashed); }
.lt-intake__foot { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.lt-intake__foot .lt-note { font-size: 13px; color: var(--lt-text-4); }
.lt-intake__opts { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: flex-end; }
.lt-intake__opts .lt-label { width: 150px; }
.lt-intake__opts input { min-height: 36px; padding: 7px 10px; font-size: 13px; }

/* ---------- Positionskarte ---------------------------------------------- */
.lt-items { display: flex; flex-direction: column; gap: 12px; }
/* Die Karte ist EIN Raster. Erste Zeile: Thumbnail · Datei · Material · Dicke ·
   Stück · Preis+Aktionen (Uebergabe.dc.html, Abschnitt 2). Alles Weitere
   (Hinweise, Oberfläche, Details) läuft als volle Zeile darunter. Unter
   760 px werden dieselben Elemente neu angeordnet - keine doppelten Felder. */
.lt-item {
    background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 12px; padding: 14px 16px;
    display: grid; column-gap: 10px; row-gap: 12px; align-items: center; min-width: 0; overflow: hidden;
    grid-template-columns: 52px minmax(112px, 1.2fr) minmax(146px, 1fr) minmax(92px, 100px) 54px minmax(236px, .9fr);
    grid-template-areas: "thumb name material thickness qty foot";
    animation: lt-in .25s ease;
}
.lt-a-thumb { grid-area: thumb; }
.lt-a-name { grid-area: name; }
.lt-a-material { grid-area: material; }
.lt-a-thickness { grid-area: thickness; }
.lt-a-qty { grid-area: qty; }
.lt-a-foot { grid-area: foot; }
.lt-a-extra, .lt-a-surface, .lt-a-details, .lt-item > .kb-row { grid-column: 1 / -1; }
.lt-item.sortable-ghost { opacity: .4; }
.lt-item.sortable-chosen { border-color: var(--lt-accent); }
.lt-item--warn { border-color: var(--lt-wait-line); }
.lt-item--error { border-color: rgba(245, 87, 108, .5); }

.lt-thumb {
    width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--lt-line-strong);
    background: repeating-linear-gradient(135deg, #22282e 0 6px, #1f252b 6px 12px);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: var(--lt-text-3); letter-spacing: .04em;
    cursor: grab; flex-shrink: 0;
}
.lt-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.lt-thumb .kb-miniatur svg { max-height: 44px; }
.lt-item__name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lt-item__name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lt-item__pos { color: var(--lt-text-4); font-size: 12px; font-variant-numeric: tabular-nums; }
.lt-item__file { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; min-width: 0; }
.lt-item__meta { color: var(--lt-text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-item__meta--warn { color: var(--lt-wait); }
.lt-item__meta--error { color: var(--lt-error-text); }
.lt-item__badges { display: inline-flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.lt-item__badges .mass-badge, .lt-item__badges .inquiry-badge, .lt-item__badges .step-status-badge, .lt-item__badges .kb-badge-wait {
    font-size: 11px; padding: 1px 6px; border-radius: 999px; margin: 0; white-space: nowrap; line-height: 1.5;
}

.lt-item__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; overflow: hidden; }
.lt-price { text-align: right; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 38px; min-width: 0; flex: 1 1 auto; }
.lt-price__total { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.lt-price__unit { color: var(--lt-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lt-price__old { font-weight: 600; font-size: 15px; color: var(--lt-text-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.lt-price__wait { color: var(--lt-wait); font-size: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; text-align: right; }
.lt-price__wait span:last-child { white-space: nowrap; }
.lt-price__ready { color: var(--lt-wait); font-size: 12.5px; font-weight: 500; text-wrap: balance; }
.lt-price__coat { color: var(--lt-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lt-price__quote { font-weight: 600; font-size: 14px; color: var(--lt-wait); }
/* Kein Blechteil (17.09.2026): kein Preis, klare Sperre. */
.lt-price__blocked { font-weight: 600; font-size: 14px; color: #c62839; text-wrap: balance; }
.lt-blocked { border-left: 3px solid rgba(245, 87, 108, .6); padding-left: 10px; }
.lt-price__reason { color: var(--lt-text-3); font-size: 12px; }
.lt-price__pending { color: var(--lt-text-3); font-size: 13px; }
.lt-price__error { color: var(--lt-error-text); font-size: 13px; }
.lt-price .status-cell { display: contents; }
.lt-price .cancel-job-btn { align-self: flex-end; }
.lt-item__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; max-width: 132px; }

.lt-item__extra { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lt-alert { margin: 0; color: var(--lt-wait); font-size: 13px; }
.lt-missing {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--lt-wait-bg);
    border: 1px solid var(--lt-wait-line); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; color: var(--lt-wait-text);
}
.lt-missing > span { flex: 1 1 240px; }
.lt-missing .lt-btn--wait {
    display: inline-flex; align-items: center; background: transparent; border: 1px solid var(--lt-wait-line); color: var(--lt-wait); border-radius: 8px;
    padding: 7px 12px; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 36px; margin: 0;
}
.lt-missing .lt-btn--wait:hover { background: #3a3418; }
.lt-missing .lt-btn--wait-link {
    background: transparent; border: 0; color: var(--lt-wait-text); font-size: 13px; cursor: pointer; padding: 8px;
    min-height: 36px; text-decoration: underline; text-underline-offset: 3px;
}
.lt-file-btn { position: relative; overflow: hidden; cursor: pointer; }
.lt-file-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.lt-source { margin: 0; color: var(--lt-text-4); font-size: 12.5px; }

.lt-surface { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--lt-line-soft); min-width: 0; }
.lt-surface__label { font-size: 12px; color: var(--lt-text-4); font-weight: 500; min-width: 72px; }
.lt-surface__base { color: var(--lt-text-2); font-size: 13.5px; }
.lt-chip {
    display: inline-flex; align-items: center; gap: 8px; background: #1f242a; border: 1px solid var(--lt-line-strong);
    border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13.5px; max-width: 100%; min-width: 0;
}
.lt-chip__dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .18); }
.lt-chip__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-surface__quote { color: var(--lt-wait); font-size: 12.5px; font-weight: 500; }
.lt-surface__btns { display: inline-flex; gap: 2px; }
/* Bearbeitungs-Haken rechts in der Oberflächen-Zeile (08.09.2026) */
.lt-surface__opts { display: inline-flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.lt-surface__opts .lt-check { min-height: 32px; font-size: 13px; color: var(--lt-text-2); }
.lt-hint { margin: 0; color: var(--lt-wait); font-size: 13px; text-wrap: pretty; }
.lt-note--ready { color: var(--lt-wait); font-weight: 500; }

/* Details */
.lt-details { border-top: 1px solid var(--lt-line-soft); padding-top: 14px; display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 16px; animation: lt-in .2s ease; }
.lt-details__preview {
    aspect-ratio: 4 / 3; width: 100%; border-radius: 10px; border: 1px solid var(--lt-line-strong);
    background: repeating-linear-gradient(135deg, #22282e 0 8px, #1f252b 8px 16px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--lt-text-3); text-align: center; padding: 12px; cursor: pointer; overflow: hidden; position: relative;
}
.lt-details__preview:hover { border-color: var(--lt-action-hover); color: var(--lt-text); }
.lt-details__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.lt-details__preview .kb-kontur { max-height: 100%; }
.lt-details__preview-btn {
    position: relative; z-index: 1; font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600;
    color: var(--lt-accent); background: var(--lt-accent-bg); border-radius: 8px; padding: 7px 12px;
}
.lt-details__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lt-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 13.5px; }
.lt-dl dt { color: var(--lt-text-4); }
.lt-dl dd { margin: 0; }
.lt-dl dd span { color: var(--lt-text-3); }
.lt-details__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lt-details__line > .lt-surface__label { min-width: 72px; }
.lt-details__note { display: flex; flex-direction: column; gap: 4px; }
.lt-details__note > span { font-size: 12px; color: var(--lt-text-4); font-weight: 500; }
.lt-details__note textarea { background: var(--lt-field); border: 1px solid var(--lt-line-strong); color: var(--lt-text); border-radius: 8px; padding: 8px 10px; font-size: 14px; resize: vertical; width: 100%; }
.lt-details__foot { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }

/* INTERN-Block: bestehende Detailtabellen (renderDetailsCell) im gelben Rahmen.
   Die Tabellen kommen aus dom.js mit den alten Klassen (details-grid,
   details-table); main.css gibt ihnen Glasflaechen und Verlaeufe. Hier werden
   sie auf die ruhige Dreispaltigkeit des Design-Pakets gebracht. */
.lt-intern { grid-column: 1 / -1; border: 1px solid var(--lt-wait-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--lt-intern-bg); min-width: 0; }
.lt-intern__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lt-intern__tag { background: var(--lt-wait-bg); color: var(--lt-wait); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.lt-intern__hint { font-size: 13px; color: var(--lt-text-2); }
.lt-intern .details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; font-size: 13px; font-variant-numeric: tabular-nums; }
.lt-intern .details-grid > div { min-width: 0; }
.lt-intern .details-grid h3 { margin: 0 0 6px; font-size: 12px; color: var(--lt-text-4); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; display: flex; gap: 6px; align-items: center; }
.lt-intern .details-grid h3 i { color: var(--lt-text-4); font-size: 11px; }
.lt-intern .details-table { width: 100%; max-width: none; border-collapse: collapse; border-spacing: 0; font-size: 13px; table-layout: fixed; }
.lt-intern .details-table td { padding: 4px 0; border: 0; background: none; backdrop-filter: none; border-radius: 0; font-size: 13px; color: var(--lt-text-3); vertical-align: middle; font-weight: 400; word-break: break-word; }
.lt-intern .details-table td:first-child { color: var(--lt-text-3); background: none; width: 60%; padding-right: 8px; }
.lt-intern p.lt-note { grid-column: 1 / -1; }
.lt-intern .details-table td:last-child { text-align: right; color: var(--lt-text); background: none; font-weight: 500; white-space: nowrap; }
.lt-intern .details-table td.countersinking-groups { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.lt-intern .details-table td span { font-size: 11.5px !important; }
.lt-intern .details-table .total-row td { border-top: 1px solid var(--lt-line-strong); padding-top: 6px; font-weight: 600; font-size: 13px; color: var(--lt-text); background: none; }
.lt-intern .details-table .section-header td { color: var(--lt-text-4); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; padding: 10px 0 2px; opacity: 1; text-align: left; white-space: normal; }
.lt-intern .details-table td.d-flex { display: flex; justify-content: flex-end; gap: 6px; }
.lt-intern .details-table input.form-control-dark { width: 64px; min-width: 0; background: var(--lt-field); border: 1px solid var(--lt-line-strong); color: var(--lt-text); border-radius: 6px; padding: 4px 8px !important; font-size: 13px; text-align: right; }
.lt-intern .details-table .input-group { width: auto !important; }
.lt-intern .details-table .input-group-text { background: transparent; border: 0; color: var(--lt-text-3); padding: 0 0 0 4px; }
.lt-intern .details-table .form-check { margin: 0; min-height: 0; padding-left: 0; }
.lt-intern .details-table .form-check-input { accent-color: var(--lt-action-hover); margin: 0; }
.lt-intern .details-table .fa-lock { font-size: 11px; color: var(--lt-wait); }
.lt-intern .details-gallery { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.lt-intern .details-gallery a { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--lt-text-3); }
.lt-intern .details-gallery img { width: 120px; height: 90px; object-fit: contain; background: #fff; border-radius: 6px; }
.lt-intern .details-gallery .model-preview { width: 160px; height: 120px; }
.lt-intern .details-gallery .model-preview model-viewer { width: 100%; height: 100%; }
.lt-intern .alert { font-size: 13px; }

/* Kontur-Bestätigung (bestehendes kb-Markup) unter der Karte. */
.lt-item > .kb-row { margin: 0 -16px -14px; border-radius: 0 0 12px 12px; }

/* Weitere Dateien / Assistent-Link */
.lt-drop--more {
    border-radius: 12px; padding: 16px; flex-direction: row; justify-content: center; gap: 10px; flex-wrap: wrap;
    color: var(--lt-text-2); font-size: 14px; background: transparent;
}
.lt-drop--more:hover, .lt-drop--more.is-over { border-color: var(--lt-action-hover); color: var(--lt-text); background: transparent; }
.lt-drop--more strong { color: var(--lt-accent); font-weight: 600; }
.lt-drop--more span { color: var(--lt-text-4); }
.lt-assistent-line { margin: 4px 0 0; color: var(--lt-text-4); font-size: 13px; }
.lt-assistent-line button { background: none; border: 0; padding: 0; color: var(--lt-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
.lt-assistent-line button:hover { color: var(--lt-text); }

/* Interner Ergebnisblock (renderSummary) als Aufklappbereich. */
.lt-intern-summary { border: 1px solid var(--lt-wait-line); border-radius: 12px; background: var(--lt-intern-bg); }
.lt-intern-summary summary { cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; list-style: none; }
.lt-intern-summary summary::-webkit-details-marker { display: none; }
.lt-intern-summary summary span { font-weight: 400; color: var(--lt-text-3); font-size: 13px; }
.lt-intern-summary #summary-container { padding: 0 16px 16px; display: block; background: transparent; border: 0; box-shadow: none; margin: 0; }
.lt-intern-summary #summary-container::before { display: none; }
.lt-intern-summary .details-table { border-collapse: collapse; border-spacing: 0; }
.lt-intern-summary .details-table td { color: var(--lt-text-3); font-size: 13px; background: none; backdrop-filter: none; border-radius: 0; padding: 5px 0; font-weight: 400; }
.lt-intern-summary .details-table td:first-child { background: none; }
.lt-intern-summary .details-table td:last-child { color: var(--lt-text); text-align: right; background: none; font-weight: 500; white-space: nowrap; }
.lt-intern-summary .details-table .total-row td { background: none; color: var(--lt-text); font-size: 14px; font-weight: 600; border-top: 1px solid var(--lt-line-strong); padding-top: 8px; }
.lt-intern-summary .shop-summen-klein { display: block; font-size: 11.5px; color: var(--lt-text-4); }
.lt-intern-summary #gesamtplan-bereich strong { font-size: 14px; }
.lt-intern-summary h3 { font-size: 14px; }
.lt-intern-summary .ergebnis-aktionen { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.lt-intern-summary .ergebnis-aktionen-rechts, .lt-intern-summary .ergebnis-aktionen-links { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lt-intern-summary .btn-main, .lt-intern-summary .btn-cta, .lt-intern-summary .btn-zweitrangig, .lt-intern-summary .action-button {
    background: transparent; border: 1px solid var(--lt-line-dashed); color: var(--lt-text); border-radius: 9px;
    padding: 8px 12px; font-size: 13px; font-weight: 500; min-height: 38px; width: auto; box-shadow: none;
}
.lt-intern-summary .btn-main::before, .lt-intern-summary .action-button::before { display: none; }
.lt-intern-summary .btn-main:hover, .lt-intern-summary .action-button:hover { border-color: var(--lt-accent); color: var(--lt-accent); transform: none; }
.lt-intern-summary .ergebnis-nebenlink { color: var(--lt-text-3); font-size: 13px; }

/* ---------- Preisspalte (≥ 1100 px) ------------------------------------ */
.lt-sidebar {
    position: sticky; top: 20px; background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 14px;
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.lt-sidebar__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--lt-text); }
.lt-sum { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.lt-sum__row { display: flex; justify-content: space-between; gap: 12px; }
.lt-sum__row dt { color: var(--lt-text-2); font-weight: 400; }
.lt-sum__row dd { margin: 0; font-weight: 500; white-space: nowrap; }
.lt-sum__row--muted { color: var(--lt-text-3); }
.lt-sum__row--muted dt, .lt-sum__row--muted dd { color: var(--lt-text-3); font-weight: 400; }
.lt-sum__row--small { font-size: 13px; }
.lt-sum__sep { height: 1px; background: var(--lt-line-strong); margin: 4px 0; }
.lt-sum__row--total { align-items: baseline; }
.lt-sum__row--total dt { font-weight: 600; font-size: 15px; color: var(--lt-text); }
.lt-sum__row--total dd { font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--lt-text); }
.lt-sum__row--total.is-partial dd { color: var(--lt-text-2); }
.lt-cta { width: 100%; padding: 13px 16px; font-size: 15px; min-height: 48px; }
/* Berechnen-Knopf unter den Positionskarten (08.09.2026, wieder sichtbar). */
.lt-calculate-btn { margin-top: 16px; }
.lt-cta--second { width: 100%; min-height: 44px; }
.lt-sidebar__foot { margin: 0; color: var(--lt-text-4); font-size: 12.5px; text-wrap: pretty; }
.lt-sidebar .checkout-hinweis { background: var(--lt-wait-bg); border: 1px solid var(--lt-wait-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--lt-wait-text); }
.lt-sidebar .checkout-hinweis h4 { font-size: 13.5px; margin: 0 0 4px; color: var(--lt-wait); }
.lt-sidebar .checkout-hinweis p { margin: 0; }
.lt-sidebar .shop-bestell-hinweis { margin: 0; font-size: 13px; color: var(--lt-text-3); }

/* ---------- Preisleiste (< 1100 px) ------------------------------------ */
/* Fest am unteren Rand: main.css setzt `overflow-x: hidden` auf body, was
   position: sticky aushebelt. Der Platz darunter kommt ueber body-Padding. */
.lt-pricebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--lt-card); border-top: 1px solid var(--lt-line-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
/* Nur der Rueckfall fuer den allerersten Zeichenzyklus (bevor JS misst) und
   fuer den Fall ohne JS. `priceSidebar.js` (`anpasseBodyPolster`) setzt ein
   Inline-`padding-bottom` in der wirklichen Leistenhoehe und ueberschreibt
   diesen Wert - noetig, weil die aufgeklappte Leiste bis zu 50vh hoch wird. */
body.lt-kalk-seite.lt-has-items { padding-bottom: 96px; }
.lt-pricebar__details { margin: 0; padding: 12px 16px 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; animation: lt-in .2s ease; max-height: 50vh; overflow: auto; }
.lt-pricebar__details .lt-sum__row dt { color: var(--lt-text-2); }
.lt-pricebar__main { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 12px; }
.lt-pricebar__toggle {
    background: transparent; border: 0; color: var(--lt-text); text-align: left; cursor: pointer; padding: 4px 0;
    display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 44px; justify-content: center;
}
.lt-pricebar__caption { font-size: 12px; color: var(--lt-text-3); }
.lt-pricebar__total { font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--lt-text); }
.lt-pricebar__total.is-partial { color: var(--lt-text-2); }
.lt-pricebar__wait { font-size: 13px; color: var(--lt-wait); display: flex; align-items: center; gap: 6px; }
.lt-pricebar .lt-cta { width: auto; padding: 12px 16px; font-size: 14px; flex-shrink: 0; }
.lt-pricebar__extra { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.lt-pricebar__extra .lt-btn--link { padding: 4px 0; }
@media (min-width: 1100px) { .lt-pricebar { display: none !important; } body.lt-kalk-seite.lt-has-items { padding-bottom: 0; } }
@media (max-width: 1099px) { .lt-sidebar { display: none !important; } }

/* ---------- Beschichtungspanel ----------------------------------------- */
.lt-panel-wrap { position: fixed; inset: 0; z-index: 2200; display: flex; justify-content: flex-end; }
.lt-panel-wrap__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 12, .6); backdrop-filter: blur(2px); }
.lt-panel {
    position: relative; width: 440px; max-width: 100%; height: 100%; background: var(--lt-card);
    border-left: 1px solid var(--lt-line-strong); display: flex; flex-direction: column;
    box-shadow: -16px 0 48px rgba(0, 0, 0, .5); animation: lt-slide .22s ease; color: var(--lt-text);
}
.lt-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--lt-line); }
.lt-panel__title { margin: 0; font-size: 18px; font-weight: 600; color: var(--lt-text); }
.lt-panel__sub { margin: 2px 0 0; color: var(--lt-text-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-panel__body { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 22px; }
.lt-panel__section { display: flex; flex-direction: column; gap: 8px; }
.lt-panel__label { font-weight: 600; font-size: 14px; }
.lt-panel__label span { color: var(--lt-text-3); font-weight: 400; }
.lt-panel fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lt-panel legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.lt-panel fieldset > div { clear: both; }
.lt-panel fieldset.lt-panel__scope { border-top: 1px solid var(--lt-line); padding-top: 18px; }

.lt-ral {
    display: flex; align-items: center; gap: 10px; background: var(--lt-field); border: 1px solid var(--lt-line-strong);
    border-radius: 10px; padding: 0 12px; min-height: 48px;
}
.lt-ral:focus-within { border-color: var(--lt-accent); }
.lt-ral.is-valid { border-color: var(--lt-action-hover); }
.lt-ral.is-error { border-color: var(--lt-error); }
.lt-ral__dot { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .18); background: var(--lt-line-strong); }
.lt-ral__prefix { color: var(--lt-text-3); font-weight: 500; }
.lt-ral input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--lt-text); font-size: 17px;
    font-weight: 600; letter-spacing: .04em; padding: 10px 0; font-variant-numeric: tabular-nums; box-shadow: none !important;
}
.lt-ral__name { color: var(--lt-text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.lt-ral-status { margin: 0; font-size: 13.5px; text-wrap: pretty; }
.lt-ral-status--error { color: var(--lt-error-text); }
.lt-ral-status--ok { color: var(--lt-ok); }
.lt-ral-status--quote { color: var(--lt-wait); }
.lt-ral-status--muted { color: var(--lt-text-3); }

.lt-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.lt-quick__btn {
    display: inline-flex; align-items: center; gap: 7px; background: var(--lt-field); border: 1px solid var(--lt-line-strong);
    color: var(--lt-text); border-radius: 999px; padding: 6px 10px 6px 6px; font-size: 12.5px; cursor: pointer; min-height: 34px;
}
.lt-quick__btn:hover { border-color: var(--lt-accent); }
.lt-quick__btn[aria-pressed="true"] { background: var(--lt-accent-bg); border-color: var(--lt-action-hover); }
.lt-quick__dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); }

.lt-opts { display: grid; gap: 6px; }
.lt-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lt-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt-opts--col { grid-template-columns: minmax(0, 1fr); }
.lt-opt {
    background: var(--lt-field); border: 1px solid var(--lt-line-strong); color: var(--lt-text); border-radius: 9px;
    padding: 10px 6px; font-size: 13.5px; font-weight: 500; cursor: pointer; min-height: 44px; line-height: 1.2;
    overflow: hidden; display: flex; flex-direction: column; gap: 1px; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere;
}
.lt-opt:hover { border-color: var(--lt-accent); }
.lt-opt[aria-checked="true"] { background: var(--lt-accent-bg); border-color: var(--lt-action-hover); }
.lt-opt__hint { font-size: 11.5px; color: var(--lt-text-3); font-weight: 400; }
.lt-opt--row { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; padding: 10px 12px; white-space: normal; }
.lt-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lt-text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lt-radio-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.lt-opt[aria-checked="true"] .lt-radio-dot { border-color: var(--lt-action-hover); }
.lt-opt[aria-checked="true"] .lt-radio-dot::after { background: var(--lt-action-hover); }
.lt-scope-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 0 8px; animation: lt-in .2s ease; }
.lt-scope-list label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; min-height: 40px; padding: 0 6px; border-radius: 8px; margin: 0; }
.lt-scope-list label:hover { background: var(--lt-line-soft); }
.lt-scope-list label > span:first-of-type { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-scope-list label > span:first-of-type i { color: var(--lt-text-4); margin-right: 6px; font-style: normal; }
.lt-scope-list .lt-scope-current { margin-left: auto; color: var(--lt-text-3); font-size: 12px; white-space: nowrap; }
.lt-panel__more { align-self: flex-start; padding: 6px 0; min-height: 36px; }
.lt-panel__foot { padding: 14px 20px 18px; border-top: 1px solid var(--lt-line); display: flex; flex-direction: column; gap: 8px; background: var(--lt-card); }
.lt-panel__foot-row { display: flex; justify-content: space-between; gap: 8px; }
.lt-panel__foot-row .lt-btn--quiet { color: var(--lt-text-2); font-size: 14px; padding: 8px 6px; min-height: 40px; }
.lt-panel__foot-row .lt-btn--quiet.is-danger:hover { color: var(--lt-error); background: transparent; }

/* ---------- 3D-Ansicht ------------------------------------------------- */
.lt-viewer-wrap { position: fixed; inset: 0; z-index: 2210; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lt-viewer-wrap__backdrop { position: absolute; inset: 0; background: rgba(8, 10, 12, .7); backdrop-filter: blur(2px); }
.lt-viewer {
    position: relative; width: min(920px, 100%); max-height: 100%; background: var(--lt-card); border: 1px solid var(--lt-line-strong);
    border-radius: 14px; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); animation: lt-in .2s ease; overflow: hidden; color: var(--lt-text);
}
.lt-viewer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--lt-line); }
.lt-viewer__title { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lt-text); }
.lt-viewer__meta { margin: 2px 0 0; color: var(--lt-text-3); font-size: 13px; }
.lt-viewer__stage {
    aspect-ratio: 16 / 10; max-height: 60vh; min-height: 220px; background: repeating-linear-gradient(135deg, #1f252b 0 10px, #1b2026 10px 20px);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; position: relative;
    font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--lt-text-3); text-align: center; padding: 0; overflow: hidden;
}
.lt-viewer__stage model-viewer { width: 100%; height: 100%; background: transparent; }
.lt-viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }
.lt-viewer__stage .kb-kontur { max-height: 100%; width: auto; }
.lt-viewer__stage .lt-viewer__hint { position: absolute; bottom: 8px; left: 0; right: 0; color: var(--lt-text-muted); font-size: 12px; pointer-events: none; }
.lt-viewer__empty { padding: 24px; font-family: Inter, system-ui, sans-serif; }
.lt-viewer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--lt-line); flex-wrap: wrap; }
.lt-viewer__modes { display: flex; gap: 4px; flex-wrap: wrap; }
.lt-viewer__modes .lt-btn[aria-pressed="true"] { background: var(--lt-accent-bg); border-color: var(--lt-action-hover); color: var(--lt-text); }
.lt-viewer__nav { display: flex; gap: 6px; }

/* ---------- Umbruchpunkte ---------------------------------------------- */
@media (max-width: 759px) {
    .lt-item {
        column-gap: 10px; row-gap: 12px; padding: 14px;
        grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "thumb name name"
            "material material material"
            "thickness thickness qty";
        align-items: stretch;
    }
    .lt-a-thumb, .lt-a-name { align-self: center; }
    .lt-thumb { width: 44px; height: 44px; cursor: default; }
    .lt-a-extra { order: 0; }
    .lt-a-surface { order: 1; }
    .lt-a-foot { order: 2; grid-area: auto; grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--lt-line-soft); justify-content: space-between; }
    .lt-a-details { order: 3; }
    .lt-item > .kb-row { order: 4; }
    .lt-item .lt-field, .lt-item select.lt-field { padding: 10px 10px; font-size: 15px; min-height: 44px; }
    .lt-item select.lt-field { padding-right: 28px; }
    .lt-price { text-align: left; min-height: 0; }
    .lt-price__total { font-size: 16px; }
    .lt-price__wait { justify-content: flex-start; }
    .lt-surface__opts { margin-left: 0; width: 100%; }
    .lt-item__actions { max-width: none; flex-wrap: nowrap; }
    .lt-btn, .lt-btn--text, .lt-btn--quiet, .lt-menu__item { min-height: 44px; }
    .lt-details { grid-template-columns: minmax(0, 1fr); }
    .lt-intern .details-grid { grid-template-columns: minmax(0, 1fr); }
    .lt-panel { width: 100%; border-left: 0; }
    .lt-staffbar select { max-width: 100%; }
    .lt-list__actions { width: 100%; }
    .lt-list__actions .lt-btn--small { flex: 1 1 auto; }
    .lt-empty { padding-top: 24px; }
    .lt-grid { padding: 16px 12px 0; }
}
@media (min-width: 760px) and (max-width: 1099px) {
    .lt-intern .details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
    .lt-item { padding: 12px; grid-template-areas: "thumb name name" "material material material" "thickness thickness thickness" "qty qty qty"; }
    .lt-grid { padding: 12px 8px 0; }
    .lt-pricebar__main { padding: 8px 10px 10px; }
    .lt-pricebar .lt-cta { padding: 10px 12px; font-size: 13px; }
    .lt-opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lt-panel__body { padding: 14px 12px; }
    .lt-panel__head, .lt-panel__foot { padding-left: 12px; padding-right: 12px; }
    .lt-ral__name { display: none; }
}

/* ---------- Bootstrap-Modals im neuen Farbklima ------------------------- */
body.lt-kalk-seite .modal-content { background: var(--lt-card); border: 1px solid var(--lt-line-strong); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .55); }
body.lt-kalk-seite .modal-header { border-bottom: 1px solid var(--lt-line); }
body.lt-kalk-seite .modal-footer { border-top: 1px solid var(--lt-line); }
body.lt-kalk-seite .modal .btn-main { background: var(--lt-action); color: #fff; border: 0; border-radius: 10px; box-shadow: none; }
body.lt-kalk-seite .modal .btn-main::before { display: none; }
body.lt-kalk-seite .modal .btn-main:hover { background: var(--lt-action-hover); transform: none; }
body.lt-kalk-seite .modal .action-button { border-radius: 9px; }

/* =======================================================================
   Embed-Modus (?embed=1): der Kalkulator im iframe auf laserteile-online.eu

   Ziel: Der Besucher soll den Rahmen nicht sehen. Die Startseite traegt
   dort bereits Ueberschrift ("Der Sofortpreis-Kalkulator - direkt hier
   rechnen"), Laserlinie und Fusszeile; der Kalkulator liefert nur noch
   das Werkzeug.

   Drei Dinge machten aus dem neuen Einstieg (07.09.2026) sonst ein
   Fenster in der Seite:
   1. Eigene Farbwelt (#14171b, kaltes Graublau) gegen den Ink-Ton der
      Website (#171121, violettstichig) - die Kante war sichtbar.
   2. Zweite Ueberschrift "Laserteile kalkulieren" direkt unter der
      Ueberschrift der Startseite.
   3. Eigener Innenrand plus 720-px-Spalte, mittig im Rahmen - der Inhalt
      stand nicht auf dem Raster der Startseite.

   Die Regeln stehen bewusst hier und nicht in main.css: kalkulator.css
   wird nach main.css geladen und darf die Farbwelt oben ueberschreiben.
   Der eigenstaendige Aufruf (ohne ?embed=1) bleibt unveraendert.
   ===================================================================== */

/* --- 1. Farbwelt der Website (globals.css: ink, steel-900/800/700) ----- */
body.lt-kalk-seite.embed-mode {
    --lt-bg: #171121;
    --lt-card: #1d1627;
    --lt-field: #1d1627;
    --lt-line: #262032;
    --lt-line-strong: #37303f;
    --lt-line-soft: #221b2e;
    --lt-line-dashed: #453c52;
    --lt-accent-bg: #2a1740;
    background: #171121;
    padding: 0;
}

/* Auch die Flaechen mit fest eingetragenem Ton (Ablagefeld) mitziehen. */
.embed-mode .lt-drop { background: #1b1428; }
.embed-mode .lt-drop:hover, .embed-mode .lt-drop.is-over { background: #241a35; }

/* --- 2. Keine zweite Ueberschrift ------------------------------------- */
/* Nicht display:none - die H1 bleibt fuer Vorleseprogramme im Dokument,
   sie nimmt nur keinen Platz mehr ein. */
.embed-mode .lt-empty__head {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- 3. Auf dem Raster der Startseite, ohne eigenen Innenrand ---------- */
.embed-mode .lt-kalk { min-height: 0; }
.embed-mode .lt-empty { padding: 0 0 4px; }
.embed-mode .lt-empty__inner { max-width: none; gap: 22px; }
.embed-mode .lt-work { padding-bottom: 4px; }
.embed-mode .lt-grid { padding: 0; max-width: none; }

@media (max-width: 759px) {
    /* Auf dem Handy traegt die Startseite den seitlichen Rand, der Rahmen
       liegt Kante an Kante - ein zweiter Rand darin waere doppelt. */
    .embed-mode .lt-empty { padding: 0 0 4px; }
    .embed-mode .lt-grid { padding: 0; }
}

/* --- 4. Rollbalken: nur ein feiner Strich statt Violett-Verlauf ------- */
/* Der Rahmen waechst mit der gemeldeten Hoehe (embedHoehe.js), deshalb
   rollt hier normalerweise nichts. Erscheint der Balken doch einmal -
   sehr lange Positionslisten -, soll er nicht die Kante des "Fensters"
   nachzeichnen. */
.embed-mode::-webkit-scrollbar { width: 6px; height: 6px; }
.embed-mode::-webkit-scrollbar-track { background: transparent; }
.embed-mode::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 3px; }
.embed-mode::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); }
body.embed-mode { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* Feedback survives rerendering and remains visible above open dialogs. */
.lt-operation-status { position: fixed; z-index: 2100; inset-inline: 1rem; bottom: 1rem; width: fit-content; max-width: calc(100vw - 2rem); margin-inline: auto; padding: .85rem 1rem; border: 1px solid #aa6be0; border-radius: .75rem; background: #202429; color: #f4f4f5; box-shadow: 0 4px 24px #0006; pointer-events: none; }
.lt-operation-status[hidden] { display: none; }
.lt-operation-status > div { display: flex; align-items: center; gap: .65rem; }
.lt-operation-status .lt-spinner { flex-shrink: 0; border: 2px solid #85818a; border-top-color: #d9adff; }
@media (prefers-reduced-motion: reduce) { .lt-operation-status .lt-spinner { animation: none; } }

/* Indeterminate loading feedback for GLB files and preview images. */
.lt-viewer__stage { position: relative; }
.lt-viewer__loading { position: absolute; inset-inline: 1rem; top: 1rem; z-index: 2; display: flex; gap: .65rem; align-items: center; padding: .65rem .85rem; border-radius: .5rem; background: #202429; color: #f4f4f5; pointer-events: none; }
.lt-viewer__loading .lt-spinner { border: 2px solid #85818a; border-top-color: #d9adff; }
@media (prefers-reduced-motion: reduce) { .lt-viewer__loading .lt-spinner { animation: none !important; } }