/* ═══════════════════════════════════════════════════════════════════════════
   Kabel-Leitungsberechnung – Stylesheet
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --klb-blue:      #1e3a5f;
    --klb-blue-lt:   #2c5282;
    --klb-green:     #1a6632;
    --klb-green-bg:  #e6f4ea;
    --klb-border:    #c8d4e0;
    --klb-section:   #f0f4f8;
    --klb-row-even:  #f8f9fa;
    --klb-font:      'Segoe UI', Arial, sans-serif;
    --klb-radius:    6px;
}

/* ─── Wrap ──────────────────────────────────────────────────────────────── */
#klb-wrap {
    font-family: var(--klb-font);
    font-size: 0.9rem;
    color: #222;
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid var(--klb-border);
    border-radius: var(--klb-radius);
    overflow: hidden;
}
#klb-wrap * { box-sizing: border-box; }
#klb-wrap input, #klb-wrap select, #klb-wrap textarea, #klb-wrap button {
    font-family: var(--klb-font);
    font-size: 0.88rem;
}

/* ─── Toolbar ───────────────────────────────────────────────────────────── */
#klb-toolbar {
    background: var(--klb-blue);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}
#klb-projekt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#klb-projektname {
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 4px;
    background: #fff;
    color: var(--klb-blue);
    width: 240px;
}
#klb-projektname::placeholder { color: #7a8898; }
#klb-projektname:focus {
    outline: none;
    border-color: #d6e2ee;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
#klb-projektname:-webkit-autofill,
#klb-projektname:-webkit-autofill:hover,
#klb-projektname:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--klb-blue);
    box-shadow: 0 0 0 1000px #fff inset;
}
#klb-projekt-meta {
    font-size: 0.8em;
    color: rgba(255,255,255,0.75);
}
#klb-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.klb-btn {
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s;
}
.klb-btn:hover { background: rgba(255,255,255,0.22); }
.klb-btn-primary { background: #2d6a4f; border-color: #2d6a4f; }
.klb-btn-primary:hover { background: #1b4332; }
.klb-btn-copy { background: #2c5282; border-color: #2c5282; }
.klb-btn-copy:hover { background: #1e3a5f; }
.klb-btn-danger { background: #9b1c1c; border-color: #9b1c1c; }
.klb-btn-danger:hover { background: #771414; }
.klb-btn-sm { padding: 3px 9px; font-size: 0.82rem; }
.klb-btn-locked,
.klb-btn-locked:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.72);
    cursor: not-allowed;
}

/* ─── Top-Grid ──────────────────────────────────────────────────────────── */
#klb-top-grid {
    padding: 12px 14px 10px;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}
#klb-top-left,
#klb-top-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.klb-top-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.klb-field-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
#klb-top-left .klb-field-inline > label:first-child {
    min-width: 88px;
    font-size: 0.82em;
    color: #555;
}
.klb-side-field {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 6px 8px;
}
.klb-side-field-note input[readonly] {
    background: #f5f8fc;
    color: #305078;
    font-weight: 600;
}
#klb-top-right .klb-side-field-textarea {
    grid-template-columns: 1fr;
    align-items: stretch;
}
#klb-top-right .klb-side-field label {
    min-width: 0;
    font-size: 0.82em;
    color: #555;
}
#klb-top-right select,
#klb-top-right input,
#klb-top-right textarea {
    width: 100%;
}

/* Eingaben */
#klb-wrap select,
#klb-wrap input[type="number"] {
    height: 30px;
    padding: 3px 6px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
}
#klb-wrap input[type="text"],
#klb-wrap input[inputmode="decimal"] {
    padding: 3px 6px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
    min-height: 30px;
}
.klb-inp-num { width: 90px; text-align: right; }
.klb-inp-short { width: 70px; text-align: right; }
.klb-unit { color: #555; font-size: 0.85em; white-space: nowrap; }
.klb-spannung-wrap { gap: 3px; }
#klb-spannung { width: 70px; }
#klb-gleichzeitigkeit-wrap { gap: 6px; }
#klb-gleichzeitigkeit-wrap label {
    min-width: auto;
    font-size: 0.82em;
    color: #555;
}
#klb-gleichzeitigkeit-wrap {
    width: 100%;
}
.klb-inp-stepper {
    width: 84px;
    min-width: 84px;
    text-align: right;
}

/* Ohm-Anzeige */
.klb-ohm-display {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 8px;
    color: #444;
    font-size: 0.85em;
    white-space: nowrap;
}

/* Projekt-Felder */
#klb-projekt-name { width: 200px; }
#klb-projekt-beschreibung {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 4px 6px;
}

/* ─── Separatoren ───────────────────────────────────────────────────────── */
.klb-separator {
    height: 1px;
    background: var(--klb-border);
    margin: 0;
}
.klb-sep-label {
    height: auto;
    background: var(--klb-section);
    padding: 5px 14px;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--klb-blue);
    border-top: 1px solid var(--klb-border);
    border-bottom: 1px solid var(--klb-border);
}

/* ─── Mitte-Grid: Verlegeart + rechte Parameter ─────────────────────────── */
#klb-mitte-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    border-bottom: 1px solid var(--klb-border);
}
#klb-verlegeart-block {
    padding: 12px 14px;
    border-right: 1px solid var(--klb-border);
}
.klb-label-row { margin-bottom: 8px; font-size: 0.88em; color: #555; }

/* Verlegeart-Tiles */
#klb-verlegeart-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}
.klb-vl-tile {
    border: 2px solid var(--klb-border);
    border-radius: var(--klb-radius);
    padding: 10px 12px;
    cursor: pointer;
    text-align: center;
    font-size: 0.82em;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
}
.klb-vl-tile:hover { border-color: var(--klb-blue-lt); background: #eef2f8; }
.klb-vl-active { border-color: var(--klb-blue) !important; background: var(--klb-section) !important; font-weight: 600; }
.klb-vl-default-choice { border-style: dashed; }
.klb-vl-default-active { box-shadow: 0 0 0 2px rgba(232, 160, 32, 0.22); }
.klb-vl-figure {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.klb-vl-illustration {
    display: block;
    max-width: 72px;
    max-height: 42px;
    width: auto;
    height: auto;
}
.klb-vl-icon { font-size: 1.5em; line-height: 1; }
.klb-vl-text { line-height: 1.3; color: #333; }
.klb-vl-disabled { opacity: 0.5; cursor: not-allowed; }
.klb-vl-disabled:hover { border-color: var(--klb-border); background: #fff; }
.klb-vl-hint { margin-top: 8px; font-size: 0.8em; color: #5a6776; line-height: 1.4; }
.klb-vl-preview {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--klb-border);
    border-radius: var(--klb-radius);
    background: linear-gradient(180deg, #fbfcfe 0%, #f2f6fa 100%);
}
.klb-vl-preview-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 8px;
    background: #fff;
    border: 1px solid #d8e1ea;
    border-radius: 10px;
}
.klb-vl-preview-img {
    display: block;
    width: 100%;
    max-width: 140px;
    max-height: 104px;
    height: auto;
}
.klb-vl-preview-copy {
    min-width: 0;
}
.klb-vl-preview-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--klb-blue);
    line-height: 1.3;
}
.klb-vl-preview .klb-vl-hint {
    margin-top: 6px;
}

/* Rechte Parameter */
#klb-rechts-params {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fafbfc;
}
.klb-param-row {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr) 74px auto;
    align-items: center;
    gap: 6px 8px;
    min-height: 30px;
}
.klb-param-row label {
    white-space: normal;
    font-size: 0.85em;
    color: #444;
    min-width: 0;
    line-height: 1.25;
}
#klb-rechts-params select { width: 100%; min-width: 0; }
#klb-rechts-params .klb-inp-short { width: 62px; justify-self: end; }
.klb-default-active {
    border-color: #d69a1f !important;
    background: linear-gradient(180deg, #fff9e8 0%, #fff4cf 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(214, 154, 31, 0.18);
}

/* ─── Kabelparameter ────────────────────────────────────────────────────── */
#klb-kabelparams {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
    background: var(--klb-section);
    border-bottom: 1px solid var(--klb-border);
    padding: 10px 14px;
}
.klb-kp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 0;
    min-width: 0;
}
.klb-kp-item label { font-size: 0.82em; color: #666; white-space: nowrap; }
.klb-kp-item select { min-width: 0; flex: 1 1 auto; }

/* ─── Minderungsfaktoren ────────────────────────────────────────────────── */
#klb-minder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--klb-border);
}
#klb-minder-links { padding: 12px 14px; border-right: 1px solid var(--klb-border); }
#klb-minder-rechts { padding: 12px 14px; background: #fafbfc; }
.klb-section-inner #klb-haeufung-anzahl-wrap { margin-top: 6px; }
.klb-section-inner .klb-param-row {
    grid-template-columns: 132px auto minmax(0, 1fr) auto;
}
.klb-section-inner .klb-param-row label { min-width: 0; }
.klb-section-inner select { width: 100%; min-width: 0; }

/* Stern-Icons */
.klb-star { color: #e8a020; font-size: 1.1em; }
.klb-star-grey { color: #aaa; font-size: 1.1em; }

/* ─── Häufungsfall-Tiles ────────────────────────────────────────────────── */
#klb-haeufung-tiles-wrap {
    padding: 12px 14px;
}
#klb-haeufung-tiles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.klb-ha-group-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--klb-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--klb-border);
}
.klb-ha-group-label:first-child { margin-top: 0; }
.klb-ha-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
}
.klb-ha-tile {
    border: 2px solid var(--klb-border);
    border-radius: var(--klb-radius);
    padding: 8px 10px;
    cursor: pointer;
    text-align: center;
    font-size: 0.8em;
    transition: border-color 0.15s, background 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 68px;
    background: #fff;
}
.klb-ha-tile:hover { border-color: var(--klb-blue-lt); background: #eef2f8; }
.klb-ha-active { border-color: var(--klb-blue) !important; background: var(--klb-section) !important; font-weight: 600; }
.klb-ha-figure {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.klb-ha-illustration {
    display: block;
    max-width: 68px;
    max-height: 38px;
    width: auto;
    height: auto;
}
.klb-ha-icon {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--klb-blue);
    line-height: 1;
}
.klb-ha-text { line-height: 1.3; color: #333; font-size: 0.85em; }
.klb-ha-preview {
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--klb-border);
    border-radius: var(--klb-radius);
    background: linear-gradient(180deg, #fbfcfe 0%, #f2f6fa 100%);
    font-size: 0.85em;
}
.klb-ha-preview-text { color: #333; line-height: 1.4; }

/* ─── Ergebnis-Grid ─────────────────────────────────────────────────────── */
#klb-ergebnis-grid {
    background: #fff;
}

/* ─── Ergebnisbox ───────────────────────────────────────────────────────── */
#klb-ergebnis-block {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.klb-erg-title {
    font-size: 0.8em;
    color: var(--klb-blue);
    font-weight: 600;
    border-bottom: 1px solid var(--klb-border);
    padding-bottom: 5px;
    margin-bottom: 4px;
    line-height: 1.3;
}
.klb-erg-grid { display: flex; flex-direction: column; gap: 8px; }
.klb-erg-row {
    display: grid;
    grid-template-columns: 132px minmax(120px, 1fr) 132px minmax(92px, 118px);
    align-items: center;
    gap: 6px 8px;
}
.klb-erg-row:first-child { grid-template-columns: 132px minmax(120px, 1fr); }
.klb-erg-label {
    font-size: 0.82em;
    color: #555;
    white-space: nowrap;
}
.klb-erg-label2 {
    font-size: 0.82em;
    color: #555;
    white-space: nowrap;
    text-align: right;
}
.klb-erg-val {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.88em;
    text-align: right;
    white-space: nowrap;
    min-width: 80px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.klb-green {
    background: var(--klb-green-bg) !important;
    border-color: #a3d9b1 !important;
    color: var(--klb-green) !important;
    font-weight: 700;
}
.klb-erg-extra { margin-top: 4px; border-top: 1px solid #eee; padding-top: 4px; }

/* ─── Warnungen ─────────────────────────────────────────────────────────── */
#klb-warnings { display: flex; flex-direction: column; gap: 4px; }
.klb-warn {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 0.8em;
    color: #856404;
}

/* ─── Notizen ───────────────────────────────────────────────────────────── */
.klb-notizen-block { margin-top: auto; }
.klb-notizen-label { display: block; font-size: 0.82em; color: #555; margin-bottom: 4px; font-weight: 600; }
#klb-notizen {
    width: 100%;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 7px;
    font-size: 0.83rem;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
#klb-footer {
    background: var(--klb-section);
    border-top: 1px solid var(--klb-border);
    text-align: center;
    padding: 6px;
    font-size: 0.75em;
    color: #888;
    margin: 0;
}

/* ─── Modals ────────────────────────────────────────────────────────────── */
#klb-save-overlay,
#klb-list-overlay,
#klb-export-overlay,
#klb-login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#klb-save-modal,
#klb-list-modal,
#klb-export-modal,
#klb-login-modal {
    background: #fff;
    border-radius: var(--klb-radius);
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    width: 480px;
    max-width: 95vw;
    overflow: hidden;
}
#klb-list-modal { width: 780px; }
#klb-export-modal { width: 560px; }
#klb-login-modal { width: 520px; }
.klb-modal-head {
    background: var(--klb-blue);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.klb-modal-head h3 { margin: 0; font-size: 1rem; color: #fff; }
.klb-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.klb-modal-close:hover { color: #f9c; }
.klb-modal-body { padding: 16px; }
.klb-modal-foot {
    padding: 10px 16px;
    border-top: 1px solid var(--klb-border);
    display: flex;
    gap: 8px;
    background: var(--klb-section);
}
.klb-modal-foot .klb-btn { border-color: #999; color: #333; background: #fff; }
.klb-modal-foot .klb-btn:hover { background: #eee; }
.klb-modal-foot .klb-btn-primary { background: #2d6a4f; border-color: #2d6a4f; color: #fff; }
.klb-modal-foot .klb-btn-primary:hover { background: #1b4332; }
.klb-modal-foot .klb-btn-copy { background: var(--klb-blue); border-color: var(--klb-blue); color: #fff; }
.klb-modal-foot .klb-btn-copy:hover { background: var(--klb-blue-lt); }

/* Speichern-Meldungen */
.klb-msg-ok    { color: #1a6632; background: #e6f4ea; padding: 6px 10px; border-radius: 4px; }
.klb-msg-error { color: #9b1c1c; background: #fde8e8; padding: 6px 10px; border-radius: 4px; }

/* Projektliste */
.klb-proj-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.klb-proj-search-wrap input { flex: 1; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; }
#klb-proj-count { font-size: 0.82em; color: #666; white-space: nowrap; }
#klb-proj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
#klb-proj-table th:first-child,
#klb-proj-table td:first-child {
    width: 58px;
    white-space: nowrap;
}
#klb-proj-table th {
    background: var(--klb-blue);
    color: #fff;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.82em;
}
#klb-proj-table td { padding: 5px 8px; border-bottom: 1px solid #eee; }
#klb-proj-table tr:nth-child(even) td { background: var(--klb-row-even); }
#klb-proj-table tr:hover td { background: #eef2f8; }
#klb-proj-table td.klb-proj-actions {
    white-space: nowrap;
}
#klb-proj-table .klb-btn {
    background: var(--klb-blue);
    border-color: var(--klb-blue);
    color: #fff;
}
#klb-proj-table .klb-btn:hover {
    background: var(--klb-blue-lt);
    border-color: var(--klb-blue-lt);
}
#klb-proj-table .klb-btn-danger {
    background: #9b1c1c;
    border-color: #9b1c1c;
}
#klb-proj-table .klb-btn-danger:hover {
    background: #771414;
    border-color: #771414;
}
#klb-proj-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}
#klb-proj-pager .klb-btn {
    background: var(--klb-blue);
    border-color: var(--klb-blue);
    color: #fff;
}
#klb-proj-pager .klb-btn:hover:not(:disabled) {
    background: var(--klb-blue-lt);
    border-color: var(--klb-blue-lt);
}
#klb-proj-pager .klb-btn:disabled {
    background: #d9e1ea;
    border-color: #d9e1ea;
    color: #7e8a97;
    cursor: default;
}
#klb-pager-info { font-size: 0.82em; color: #666; }

/* ─── Protokoll-Button ──────────────────────────────────────────────────── */
.klb-proto-btn-wrap {
    margin-top: 10px;
}
.klb-btn-proto {
    width: 100%;
    padding: 7px 14px;
    background: var(--klb-section);
    border: 1px solid var(--klb-border);
    border-radius: var(--klb-radius);
    font-family: var(--klb-font);
    font-size: 0.85rem;
    color: var(--klb-blue);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.klb-btn-proto:hover {
    background: #dce6f0;
    border-color: var(--klb-blue);
}

/* ─── Protokoll-Modal ───────────────────────────────────────────────────── */
#klb-proto-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
}
#klb-proto-modal {
    background: #fff;
    border-radius: var(--klb-radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    width: 860px;
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.klb-proto-body {
    overflow-y: auto;
    flex: 1;
    padding: 14px 16px !important;
    background: #fffde7;
}
#klb-proto-text {
    margin: 0;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── Login-Hinweis ─────────────────────────────────────────────────────── */
.klb-login-notice {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--klb-radius);
    color: #856404;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    #klb-top-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .klb-top-row {
        gap: 10px;
    }
    #klb-top-right .klb-side-field {
        grid-template-columns: 88px minmax(0, 1fr);
    }
    #klb-mitte-grid  { grid-template-columns: 1fr; }
    #klb-verlegeart-block {
        border-right: 0;
        border-bottom: 1px solid var(--klb-border);
    }
    #klb-rechts-params { border-top: 0; }
    #klb-kabelparams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #klb-minder-grid { grid-template-columns: 1fr; }
    #klb-minder-links {
        border-right: 0;
        border-bottom: 1px solid var(--klb-border);
    }
    #klb-minder-rechts { border-top: 0; }
    .klb-vl-preview { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    #klb-wrap {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #klb-toolbar {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
    }

    #klb-projekt-row,
    #klb-btn-row {
        width: 100%;
    }

    #klb-projektname {
        flex: 1 1 180px;
        width: auto;
        min-width: 0;
    }

    #klb-btn-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    #klb-btn-row .klb-btn {
        width: 100%;
        min-height: 38px;
    }

    #klb-top-grid {
        padding: 12px;
        gap: 12px;
        grid-template-columns: 1fr;
    }

    #klb-list-overlay,
    #klb-export-overlay,
    #klb-login-overlay {
        align-items: flex-start;
        padding: 80px 12px 12px;
    }

    #klb-list-modal,
    #klb-export-modal {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);
        margin-top: 4px;
    }

    #klb-list-modal .klb-modal-body {
        padding: 12px;
        overflow: auto;
    }

    .klb-proj-search-wrap {
        flex-wrap: wrap;
        align-items: stretch;
    }

    #klb-proj-count {
        width: 100%;
    }

    #klb-top-left,
    #klb-top-right {
        gap: 10px;
    }

    #klb-top-right {
        order: 1;
    }

    #klb-top-left {
        order: 2;
    }

    .klb-top-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    #klb-top-left .klb-field-inline,
    #klb-top-right .klb-side-field {
        width: 100%;
        gap: 8px;
    }

    #klb-top-left .klb-field-inline > label:first-child,
    #klb-top-right .klb-side-field label {
        min-width: 100%;
    }

    #klb-top-left .klb-field-inline select,
    #klb-top-left .klb-field-inline input,
    #klb-top-left .klb-field-inline textarea,
    #klb-top-right .klb-side-field select,
    #klb-top-right .klb-side-field input,
    #klb-top-right .klb-side-field textarea {
        max-width: 100%;
        min-width: 0;
    }

    #klb-top-left .klb-field-inline select,
    #klb-top-left .klb-field-inline input[type="number"],
    #klb-top-left .klb-field-inline input[type="text"],
    #klb-top-right .klb-side-field select,
    #klb-top-right .klb-side-field input[type="text"] {
        flex: 1 1 140px;
    }

    #klb-leistung-wrap,
    #klb-gleichzeitigkeit-wrap,
    #klb-querschnitt-basis-wrap {
        width: 100%;
    }

    #klb-gleichzeitigkeit-wrap label {
        min-width: 100%;
    }

    #klb-top-right .klb-side-field {
        grid-template-columns: 1fr;
        width: 100%;
    }

    #klb-projekt-name {
        width: 100%;
    }

    #klb-verlegeart-block,
    #klb-rechts-params,
    #klb-kabelparams,
    #klb-minder-links,
    #klb-minder-rechts,
    #klb-ergebnis-block {
        padding-left: 12px;
        padding-right: 12px;
    }

    #klb-rechts-params {
        order: 1;
    }

    #klb-verlegeart-block {
        order: 2;
    }

    #klb-ergebnis-block {
        padding-top: 16px;
        gap: 8px;
    }

    #klb-verlegeart-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .klb-ha-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .klb-ha-illustration { max-width: 54px; max-height: 32px; }
    .klb-ha-tile { min-height: 60px; padding: 6px 8px; }

    .klb-vl-tile {
        min-height: 94px;
        padding: 8px 6px;
    }

    .klb-vl-icon {
        font-size: 1.2em;
    }

    .klb-vl-text {
        font-size: 0.74rem;
        line-height: 1.2;
    }

    .klb-vl-preview {
        padding: 12px;
    }

    .klb-vl-preview-media {
        min-height: 100px;
    }

    #klb-rechts-params .klb-param-row,
    #klb-minder-grid .klb-param-row,
    .klb-section-inner .klb-param-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        min-height: 0;
    }

    #klb-rechts-params .klb-param-row label,
    #klb-minder-grid .klb-param-row label,
    .klb-section-inner .klb-param-row label {
        width: 100%;
        font-size: 0.82rem;
    }

    #klb-rechts-params .klb-param-row select,
    #klb-minder-grid .klb-param-row select,
    .klb-section-inner .klb-param-row select {
        flex: 1 1 180px;
        min-width: 0;
    }

    #klb-rechts-params .klb-param-row input[type="number"],
    #klb-minder-grid .klb-param-row input[type="number"],
    .klb-section-inner .klb-param-row input[type="number"] {
        flex: 0 0 88px;
        width: 88px;
    }

    #klb-rechts-params .klb-inp-short {
        justify-self: auto;
    }

    #klb-kabelparams {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }

    .klb-kp-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .klb-kp-item label {
        width: 100%;
        white-space: normal;
    }

    .klb-erg-grid {
        gap: 8px;
    }

    .klb-erg-row,
    .klb-erg-row:first-child {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
    }

    .klb-erg-label,
    .klb-erg-label2 {
        white-space: normal;
    }

    .klb-erg-label2 {
        text-align: left;
    }

    .klb-erg-val {
        min-width: 92px;
        max-width: 140px;
        width: 100%;
        justify-self: end;
        min-height: 28px;
        padding: 3px 8px;
        font-size: 0.84rem;
    }
}

@media (max-width: 520px) {
    #klb-wrap input,
    #klb-wrap select,
    #klb-wrap textarea,
    #klb-wrap button {
        font-size: 16px;
    }

    #klb-toolbar {
        padding: 10px;
    }

    #klb-btn-row {
        grid-template-columns: 1fr;
    }

    #klb-verlegeart-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #klb-kabelparams {
        grid-template-columns: 1fr;
    }

    #klb-list-overlay,
    #klb-export-overlay,
    #klb-login-overlay {
        padding: 80px 10px 10px;
    }

    #klb-list-modal,
    #klb-export-modal {
        max-height: calc(100vh - 20px);
        margin-top: 0;
    }

    #klb-proto-overlay {
        padding-top: 80px;
    }

    #klb-list-modal .klb-modal-head,
    #klb-list-modal .klb-modal-body,
    #klb-list-modal .klb-modal-foot {
        padding-left: 12px;
        padding-right: 12px;
    }

    #klb-proj-table thead {
        display: none;
    }

    #klb-proj-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #klb-proj-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border: 1px solid var(--klb-border);
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
    }

    #klb-proj-table td {
        display: block;
        width: auto;
        padding: 6px 10px;
        border-bottom: 0;
        white-space: normal;
    }

    #klb-proj-table tr:nth-child(even) td,
    #klb-proj-table tr:hover td {
        background: transparent;
    }

    #klb-proj-table td:nth-child(1) {
        flex: 0 0 auto;
        font-weight: 700;
        color: var(--klb-blue);
    }

    #klb-proj-table td:nth-child(2) {
        flex: 1 1 auto;
        min-width: 0;
    }

    #klb-proj-table td:nth-child(3),
    #klb-proj-table td:nth-child(5) {
        flex: 0 0 auto;
        padding-left: 0;
        font-size: 0.74rem;
        color: #5a6776;
        white-space: nowrap;
    }

    #klb-proj-table td:nth-child(4) {
        display: none;
    }

    #klb-proj-table td::before {
        display: none;
    }

    #klb-proj-table td.klb-proj-actions {
        flex: 0 0 100%;
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid #eef2f6;
        background: #f8fafc;
    }

    #klb-proj-table td.klb-proj-actions::before {
        display: none;
    }

    #klb-proj-table td.klb-proj-actions .klb-btn {
        min-width: 84px;
    }

    #klb-projektname {
        flex-basis: 100%;
    }

    #klb-top-left .klb-field-inline select,
    #klb-top-left .klb-field-inline input[type="number"],
    #klb-top-left .klb-field-inline input[type="text"],
    #klb-top-right .klb-side-field select,
    #klb-top-right .klb-side-field input[type="text"] {
        flex-basis: 100%;
    }

    .klb-inp-num,
    #klb-spannung,
    #klb-rechts-params .klb-param-row input[type="number"],
    #klb-minder-grid .klb-param-row input[type="number"],
    .klb-section-inner .klb-param-row input[type="number"] {
        width: 100%;
        flex-basis: 100%;
    }

    .klb-ohm-display {
        width: 100%;
        text-align: center;
    }

    #klb-ergebnis-block {
        padding-top: 18px;
    }

    .klb-erg-title {
        margin-bottom: 6px;
    }

    .klb-vl-preview-media {
        min-height: 88px;
    }

    .klb-vl-preview-img {
        max-width: 120px;
    }

    #klb-footer {
        padding: 8px 10px;
        line-height: 1.45;
    }
}