/* Ergänzungen zum MudBlazor-Theme. */

html, body {
    font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.fw-600 {
    font-weight: 600;
}

/* Blazor setzt beim Seitenwechsel den Fokus auf die Überschrift - ohne sichtbaren Rahmen. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* -- Anwendungsrahmen ------------------------------------------------------------------ */

.app-bar {
    border-bottom: 1px solid var(--mud-palette-divider);
    backdrop-filter: saturate(180%) blur(6px);
}

.app-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #4f46e5, #0ea5e9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.brand-text {
    font-size: 1.02rem;
    font-weight: 300;
    color: var(--mud-palette-text-primary);
    letter-spacing: 0.01em;
}

.brand-text strong {
    font-weight: 700;
}

.drawer-head {
    padding: 1rem 1.5rem 0.25rem;
}

.drawer-foot {
    margin-top: auto;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid var(--mud-palette-divider);
}

.logout-button {
    width: 100%;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--mud-palette-error);
    background: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.logout-button:hover {
    background: var(--mud-palette-action-default-hover);
}

/* -- Kacheln und Karten ----------------------------------------------------------------- */

.surface-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

a.surface-card,
.surface-card.is-clickable {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.surface-card:hover,
.surface-card.is-clickable:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.55);
    transform: translateY(-2px);
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1.15rem 1.25rem;
}

.stat-value {
    font-size: 1.65rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.project-accent {
    height: 4px;
    border-radius: 14px 14px 0 0;
}

.project-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex: none;
}

.color-dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    padding: 0;
    transition: transform 120ms ease;
}

.color-dot:hover {
    transform: scale(1.12);
}

.color-dot.is-active {
    border-color: var(--mud-palette-surface);
    outline: 2px solid var(--mud-palette-primary);
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.drop-zone {
    display: grid;
    place-items: center;
    padding: 3rem 1.5rem;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: border-color 140ms ease, background 140ms ease;
}

.drop-zone:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover);
}

/*
 * Die Aufnahmefläche für GAEB-Dateien. Während eine Datei darüber schwebt, muss sichtbar
 * sein, dass hier losgelassen werden darf - sonst zielt man ins Leere.
 */
.gaeb-drop {
    position: relative;
    display: block;
}

.gaeb-drop-active .drop-zone {
    border-color: var(--mud-palette-primary);
    border-style: solid;
    background: var(--mud-palette-action-default-hover);
}

/* Der Knopf allein ist ein kleines Ziel - beim Ziehen tritt sein Umfeld hervor. */
.gaeb-drop-active {
    border-radius: 10px;
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 4px;
}

/* -- Leistungsverzeichnis --------------------------------------------------------------- */

.tree-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

/* Ordnungszahlen und Beträge tabellarisch ausrichten. */
.gaeb-mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.gaeb-tree-scroll,
.gaeb-inspector-scroll {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* -- Aufteilung: Gliederung und Detailansicht ------------------------------------------- */

.lv-layout-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
}

.lv-split {
    --lv-split: 48%;

    display: flex;
    align-items: stretch;
    height: calc(100vh - 15rem);
    min-height: 22rem;
}


.lv-pane {
    display: flex;
    min-width: 0;
    min-height: 0;
}

.lv-pane-first {
    flex: 0 0 var(--lv-split);
}

.lv-pane-second {
    flex: 1 1 0;
}

.lv-pane-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* MudBlazor gibt Trennlinien "flex: 1 0 auto" - im Spaltenlayout wuerden sie den
   Platz an sich reissen. */
.lv-pane-card > .mud-divider {
    flex: 0 0 auto;
}

/* Der Griff zwischen den Bereichen. */
.lv-splitter {
    flex: 0 0 0.75rem;
    display: grid;
    place-items: center;
    cursor: col-resize;
    touch-action: none;
    border-radius: 6px;
    transition: background 120ms ease;
}


.lv-splitter:hover,
.lv-splitter:focus-visible,
.lv-split.is-dragging > .lv-splitter {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.lv-splitter-grip {
    background: var(--mud-palette-lines-default);
    border-radius: 999px;
    width: 3px;
    height: 2.5rem;
}


.lv-splitter:hover .lv-splitter-grip,
.lv-split.is-dragging .lv-splitter-grip {
    background: var(--mud-palette-primary);
}

/* Waehrend des Ziehens darf nichts markiert werden. */
.lv-split.is-dragging {
    user-select: none;
}

/* -- Gliederung mit Wertespalten -------------------------------------------------------- */

/* Die Mindestbreite setzt BoQTree aus den sichtbaren Spalten. */
.lv-grid {
    min-width: 34rem;
}

.lv-head,
.lv-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.lv-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.3rem 0.75rem 0.3rem 1rem;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

/* Die Kopfzeile beginnt dort, wo im Baum Aufklapp-Symbol und Zeichen enden. */
.lv-head > .lv-col-label {
    padding-left: 3.1rem;
}

.lv-row {
    padding-right: 0.5rem;
}

.lv-row-icon {
    flex: none;
}

.lv-col-label {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lv-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-label-group {
    font-weight: 600;
}

.lv-ordinal {
    flex: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.82em;
}

/* Ein Befund der Prüfung: die Schwere trägt der farbige Balken links. */
.gaeb-finding {
    border-left: 3px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.gaeb-finding-error {
    border-left-color: var(--mud-palette-error);
}

.gaeb-finding-warning {
    border-left-color: var(--mud-palette-warning);
}

.gaeb-finding-info {
    border-left-color: var(--mud-palette-info);
}

/* Die Sammelzeile setzt den Befund darüber fort und tritt deshalb zurück. */
.gaeb-finding-more {
    background: none;
    opacity: 0.7;
}

.lv-badge {
    flex: none;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem;
    line-height: 1.35;
}

.lv-col-qty,
.lv-col-price,
.lv-col-total,
.lv-col-unit,
.lv-col-marks {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
}

/* Die Breite der Wertespalten setzt LvViewOptions aus dem Inhalt - siehe LvColumn.Width. */
.lv-col-qty {
    text-align: right;
}

.lv-col-unit {
    color: var(--mud-palette-text-secondary);
}

.lv-col-price {
    text-align: right;
}

.lv-col-total {
    text-align: right;
    font-weight: 550;
}

.lv-col-marks {
    width: 6rem;
    display: flex;
    gap: 0.2rem;
    justify-content: flex-end;
}

/* Betraege, die nicht in die Summe eingehen (Alternativ- und Bedarfspositionen). */
.lv-cell-muted {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
}

.lv-mark {
    display: inline-grid;
    place-items: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-size: 0.65rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

/* MudFileUpload haelt unter dem Knopf Platz fuer die Liste gewaehlter Dateien. Solange die
   Liste leer ist, macht dieser Platz den Knopf vier Pixel hoeher als seine Nachbarn und
   bricht die Ausrichtung der Zeile. */
.mud-file-upload-files:empty {
    margin: 0;
}

/* Zeilen, die sich anklicken lassen - Zeiger und deutliche Hervorhebung beim Ueberfahren. */
.row-clickable {
    cursor: pointer;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.row-clickable:hover {
    /* Der Farbton des Themes, nur kraeftig genug, um ihn auch zu sehen. */
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent) !important;

    /* Ein Streifen am linken Rand macht die Zeile eindeutig als Ziel erkennbar. */
    box-shadow: inset 3px 0 0 0 var(--mud-palette-primary);
}

.row-clickable:hover .fw-600 {
    color: var(--mud-palette-primary);
}

/* Nachlass oder Pauschale einer Gruppenstufe - sie erklaeren den Betrag. */
.lv-note {
    flex: 0 0 auto;
    padding: 0 0.3rem;
    border-radius: 4px;
    background-color: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning-darken);
    font-size: 0.65rem;
    line-height: 1.35;
    white-space: nowrap;
}

.gaeb-row-selected {
    background-color: var(--mud-palette-action-default-hover);
}

.gaeb-row-selected td {
    font-weight: 500;
}

.gaeb-not-applicable {
    text-decoration: line-through;
    opacity: 0.7;
}

/* -- Grafiken in LV-Texten -------------------------------------------------------------- */

.gaeb-images {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
}

.gaeb-image {
    margin: 0;
    max-width: 100%;
}

.gaeb-image img {
    display: block;
    max-width: min(100%, 22rem);
    max-height: 18rem;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: #fff;
}

.gaeb-image figcaption {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

/* -- Rechenansatz nach REB-VB 23.003 ---------------------------------------------------- */

.reb-formula-head {
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
}

.reb-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
}

/* -- Öffentliche Startseite ------------------------------------------------------------- */

.landing {
    --ink: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;

    min-height: 100vh;
    color: var(--ink);
    background: #fff;
    font-family: 'Segoe UI', Inter, Roboto, Arial, sans-serif;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
}

.landing-nav .spacer {
    flex: 1;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 300;
}

.landing-brand strong {
    font-weight: 700;
}

.landing-link {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.landing-link:hover {
    color: var(--ink);
}

.landing-cta {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 0.55rem;
    background: linear-gradient(120deg, #4f46e5, #6366f1 60%, #0ea5e9);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px -12px rgba(79, 70, 229, 0.9);
}

.landing-cta:hover {
    filter: brightness(1.05);
}

.landing-cta.ghost {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: none;
}

.landing-hero {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

.landing-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.landing-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.2rem, 4.2vw, 3.4rem);
    line-height: 1.08;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.landing-hero h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #4f46e5, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-hero p {
    margin: 0 0 2rem;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--muted);
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.landing-preview {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 30px 60px -40px rgba(15, 23, 42, 0.55);
    overflow: hidden;
}

.landing-preview-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.landing-preview-bar i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #cbd5e1;
}

.landing-preview table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.landing-preview th {
    padding: 0.6rem 0.9rem;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

.landing-preview td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid #f1f5f9;
}

.landing-preview tr:last-child td {
    border-bottom: none;
}

.landing-preview .num {
    text-align: right;
}

.landing-preview .oz {
    color: var(--muted);
}

.landing-features {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem 5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.landing-feature {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.landing-feature h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 650;
}

.landing-feature p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--muted);
}

.landing-foot {
    border-top: 1px solid var(--line);
    padding: 1.5rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 900px) {
    .landing-hero {
        grid-template-columns: 1fr;
        padding-top: 2rem;
    }
}

@media (prefers-color-scheme: dark) {
    .landing {
        --ink: #e2e8f0;
        --muted: #94a3b8;
        --line: #1f2a3f;
        background: #0b1020;
    }

    .landing-preview,
    .landing-cta.ghost {
        background: #151b2c;
    }

    .landing-preview-bar {
        background: #111729;
    }

    .landing-preview td {
        border-bottom-color: #1a2336;
    }

    .landing-eyebrow {
        background: #1e1b4b;
        color: #c7d2fe;
    }
}

/* -- Druckansicht ------------------------------------------------------------------------ */

.print-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.9rem;
}

.print-bar button {
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: #4f46e5;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}

.print-bar a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
}

.print-bar label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
}

.print-hint {
    padding: 2rem;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #64748b;
}

.print-sheet {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: #0f172a;
    background: #fff;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.print-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 2px solid #0f172a;
}

.print-head h1 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.print-head p {
    margin: 0;
    color: #475569;
}

.print-meta {
    border-collapse: collapse;
    font-size: 0.82rem;
}

.print-meta th {
    padding: 0.1rem 0.75rem 0.1rem 0;
    text-align: left;
    font-weight: 600;
    color: #64748b;
}

.print-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    font-size: 0.84rem;
}

.print-table th {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.print-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

.print-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.print-table .mono {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.print-group td {
    background: #f1f5f9;
    font-weight: 650;
}

.print-remark td {
    color: #475569;
    font-style: italic;
}

.print-struck td {
    text-decoration: line-through;
    color: #94a3b8;
}

.print-detail {
    margin-top: 0.25rem;
    white-space: pre-wrap;
    color: #475569;
    font-size: 0.8rem;
}

.print-tags {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #b45309;
}

.print-table tfoot td {
    padding-top: 0.6rem;
    border-top: 2px solid #0f172a;
    border-bottom: none;
    font-weight: 700;
}

.print-foot {
    margin-top: 2rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

@media print {
    .print-bar {
        display: none;
    }

    .print-sheet {
        max-width: none;
        padding: 0;
    }

    .print-table thead {
        display: table-header-group;
    }

    .print-table tr {
        break-inside: avoid;
    }
}

/* -- Fehleranzeige von Blazor ------------------------------------------------------------ */

#blazor-error-ui {
    color-scheme: light only;
    background: #ffd000;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1500;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein Fehler aufgetreten."
    }