@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Blocks/BlockPreview.razor.rz.scp.css */
.preview-placeholder[b-cf936bjr4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--brand-grey);
    opacity: 0.55;
    font-size: 0.9rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-lb3ce42jeg] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lb3ce42jeg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p8j0431n66],
.components-reconnect-repeated-attempt-visible[b-p8j0431n66],
.components-reconnect-failed-visible[b-p8j0431n66],
.components-pause-visible[b-p8j0431n66],
.components-resume-failed-visible[b-p8j0431n66],
.components-rejoining-animation[b-p8j0431n66] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-retrying[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-failed[b-p8j0431n66],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-p8j0431n66] {
    display: block;
}


#components-reconnect-modal[b-p8j0431n66] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-p8j0431n66 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-p8j0431n66 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-p8j0431n66 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-p8j0431n66]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-p8j0431n66 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-p8j0431n66 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-p8j0431n66 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-p8j0431n66 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-p8j0431n66] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-p8j0431n66] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-p8j0431n66] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-p8j0431n66] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-p8j0431n66] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-p8j0431n66] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-p8j0431n66] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-p8j0431n66 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-p8j0431n66] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-p8j0431n66 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Medien/Herkunft.razor.rz.scp.css */
/* The provenance block's own stylesheet, moved here with the markup. It cannot stay in
   Medien.razor.css: CSS isolation applies a page's scope attribute only to elements written in that
   page's own file, so those rules would match nothing here — silently, which is the exact isolation
   trap this codebase has already paid for once. */
.herkunft[b-5kkyeb8we0] { margin-top: 1rem; }
.herkunft summary[b-5kkyeb8we0] { cursor: pointer; }

.herkunft dl[b-5kkyeb8we0] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}

.herkunft dt[b-5kkyeb8we0] { font-weight: 600; }
.herkunft dd[b-5kkyeb8we0] { margin: 0; overflow-wrap: anywhere; }

.hinweis[b-5kkyeb8we0] { font-size: .85rem; opacity: .75; margin: 0; }
.fehlermeldung[b-5kkyeb8we0] { color: var(--brand-accent); margin: .5rem 0 0; }
/* /Components/Pages/Adresskarte.razor.rz.scp.css */
/* Height comes from the .vollhoehe opt-in in theme.css; the map takes what is left. */
.adresskarte h1[b-o9r20ajox4] { margin: 0 0 .5rem; }
.fehlermeldung[b-o9r20ajox4] { color: var(--brand-accent); margin: .5rem 0 0; }
.hinweis[b-o9r20ajox4] { font-size: .85rem; opacity: .75; margin: .25rem 0 .5rem; }

.werkzeuge[b-o9r20ajox4] { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; flex: 0 0 auto; }
.werkzeuge label[b-o9r20ajox4] { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.werkzeuge select[b-o9r20ajox4] { font: inherit; padding: .3rem .5rem; min-width: 14rem; border: 1px solid var(--brand-grey); border-radius: 4px; background: var(--brand-surface); color: var(--brand-ink); }

.faelle[b-o9r20ajox4] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; border: none; margin: 0; padding: 0; }
/* A legend inside a flex fieldset is laid out on its own; float keeps it on the line, in front. */
.faelle legend[b-o9r20ajox4] { float: left; font-size: .9rem; padding: 0; margin-right: .25rem; }
.werkzeuge .faelle label[b-o9r20ajox4] { flex-direction: row; align-items: center; gap: .3rem; white-space: nowrap; }

.legende[b-o9r20ajox4] { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.legende li[b-o9r20ajox4] { display: flex; align-items: center; gap: .3rem; }
.punkt[b-o9r20ajox4] { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.punkt.hoch[b-o9r20ajox4] { background: #2e7d32; }
.punkt.mittel[b-o9r20ajox4] { background: #f9a825; }
.punkt.niedrig[b-o9r20ajox4] { background: #c62828; }
.punkt.kein[b-o9r20ajox4] { background: #757575; }

.karte[b-o9r20ajox4] { flex: 1 1 auto; min-height: 0; border: 1px solid var(--brand-grey); border-radius: 4px; }
/* /Components/Pages/Adressvalidierung.razor.rz.scp.css */
/* .fehlermeldung and .hinweis are scoped in Medien.razor.css, so they do not reach this page;
   the same two rules, repeated here. */
.fehlermeldung[b-pio5z3fgtr] { color: var(--brand-accent); margin: .5rem 0 0; }
.hinweis[b-pio5z3fgtr] { font-size: .85rem; opacity: .75; margin: 0; }
/* Its own class, not .hinweis: the browser check reads the summary line by that class. */
.legende[b-pio5z3fgtr] { font-size: .85rem; opacity: .75; margin: .25rem 0 0; }

section[b-pio5z3fgtr] { margin-bottom: 1.5rem; }

.projektwahl[b-pio5z3fgtr] { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.projektauswahl[b-pio5z3fgtr] { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.projektauswahl select[b-pio5z3fgtr] { font: inherit; padding: .35rem .5rem; min-width: 16rem; border: 1px solid var(--brand-grey); border-radius: 4px; background: var(--brand-surface); color: var(--brand-ink); }

table[b-pio5z3fgtr] { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th[b-pio5z3fgtr], td[b-pio5z3fgtr] { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--brand-grey); vertical-align: top; }
/* A tint, not the token itself: --brand-lightblue is a mid blue in some palettes (AMBG: #3E6690),
   and dark ink plus a blue link on it were unreadable — seen in the browser check's screenshot. */
tr.gewaehlt[b-pio5z3fgtr] { background: color-mix(in srgb, var(--brand-lightblue) 15%, transparent); }
tr.fehler td[b-pio5z3fgtr] { color: var(--brand-accent); }
td.aktionen[b-pio5z3fgtr] { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* The wide row table scrolls inside its own box; min-width: 0 so a flex/grid parent cannot
   stretch it to the table's full width and push the page sideways. */
.tabelle[b-pio5z3fgtr] { overflow-x: auto; min-width: 0; }
/* Table and detail panel side by side behind a splitter. Only this section is bounded — the page
   above it (project, upload, files) scrolls as before; see the plan's deviation from vollhoehe. */
.arbeitsbereich[b-pio5z3fgtr] { height: calc(100vh - 8rem); min-height: 28rem; }
.arbeitsbereich .tabelle[b-pio5z3fgtr] { height: 100%; overflow: auto; }
.arbeitsbereich[b-pio5z3fgtr]  .detail { height: 100%; overflow: auto; box-sizing: border-box; }
.arbeitsbereich tbody tr[b-pio5z3fgtr] { cursor: pointer; }
/* The splitter's own bar colour is a faint stroke; the brand grey makes it findable. */
.arbeitsbereich[b-pio5z3fgtr]  .fluent-multi-splitter { --fluent-multi-splitter-background-color: var(--brand-grey); }

button.link[b-pio5z3fgtr] { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* Stronger than the selected-row tint (tr.gewaehlt, 15 %) so a marked component stays visible in a
   selected row; the underline carries the mark for anyone who cannot tell the tints apart. */
/* ::deep: the marks inside the table are built in C# (GoogleSuggestion) and carry no scope
   attribute; a plain "mark.geaendert" matched only the legend's. */
.zeilen[b-pio5z3fgtr]  mark.geaendert {
    background: color-mix(in srgb, var(--brand-lightblue) 40%, transparent);
    color: inherit;
    text-decoration: underline dotted;
    padding: 0 0.15em;
}

/* Research column: narrow enough not to push the table, the free text behind a details element. */
td.recherche[b-pio5z3fgtr] { min-width: 14rem; font-size: .85rem; }
td.stufen[b-pio5z3fgtr] { min-width: 12rem; font-size: .85rem; }
/* Built in C# like the marks above: reached only through ::deep. */
.zeilen[b-pio5z3fgtr]  .stufe-gescheitert, .zeilen[b-pio5z3fgtr]  .stufe-gesperrt { color: var(--brand-accent); }
.zeilen[b-pio5z3fgtr]  .stufe-bilanz { margin-top: .2rem; font-style: italic; }
.zeilen[b-pio5z3fgtr]  .recherche-adresse { font-style: italic; }

/* Read-only snapshot of a run's settings, under the file table. */
.lauf-einstellungen[b-pio5z3fgtr] { margin-top: .75rem; padding: .5rem .75rem; border: 1px solid var(--brand-grey); border-radius: 4px; }
.lauf-einstellungen h3[b-pio5z3fgtr] { font-size: 1rem; margin: 0 0 .4rem; }
.lauf-einstellungen td.wert[b-pio5z3fgtr] { white-space: pre-wrap; word-break: break-word; max-width: 40rem; }
.lauf-einstellungen pre[b-pio5z3fgtr] { white-space: pre-wrap; word-break: break-word; font-size: .8rem; }
/* /Components/Pages/AdressvalidierungDetail.razor.rz.scp.css */
.detail[b-ksu4bvm4fg] { padding: .5rem 1rem; font-size: .9rem; }
/* The page-wide h3/h4 sizes are for page sections; in a side panel they crowd out the content. */
.kopf h3[b-ksu4bvm4fg] { margin: 0 0 .25rem; font-size: 1.15rem; }
h4[b-ksu4bvm4fg] { font-size: 1rem; }
.kopf .name[b-ksu4bvm4fg] { font-weight: 600; margin: 0 0 .25rem; }
.hinweistext[b-ksu4bvm4fg] { font-size: .85rem; opacity: .85; }
.blaettern[b-ksu4bvm4fg] { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
section[b-ksu4bvm4fg] { margin: .75rem 0; border-top: 1px solid var(--brand-grey); padding-top: .5rem; }
h4[b-ksu4bvm4fg] { margin: 0 0 .35rem; }
dl[b-ksu4bvm4fg] { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: 0; }
dt[b-ksu4bvm4fg] { opacity: .75; }
dd[b-ksu4bvm4fg] { margin: 0; }
table.werte[b-ksu4bvm4fg] { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.werte th[b-ksu4bvm4fg], table.werte td[b-ksu4bvm4fg] { text-align: left; padding: .2rem .35rem; border-bottom: 1px solid var(--brand-grey); vertical-align: top; }
.beleg[b-ksu4bvm4fg] { font-style: italic; }
.kennzeichen[b-ksu4bvm4fg] { font-style: italic; opacity: .75; }
.freitext[b-ksu4bvm4fg] { white-space: pre-wrap; }
.url[b-ksu4bvm4fg] { word-break: break-all; }
.quelle[b-ksu4bvm4fg] { margin-right: .5rem; }
.unterkopf[b-ksu4bvm4fg] { margin: .4rem 0 .15rem; font-weight: 600; font-size: .85rem; }
ul[b-ksu4bvm4fg] { margin: 0; padding-left: 1.2rem; }
.zustand-gescheitert[b-ksu4bvm4fg], .fehlermeldung[b-ksu4bvm4fg] { color: var(--brand-accent); }
.hinweis[b-ksu4bvm4fg] { font-size: .85rem; opacity: .75; }
/* The Google suggestion is built in C# (GoogleSuggestion) and carries no scope attribute. */
.google[b-ksu4bvm4fg]  mark.geaendert {
    background: color-mix(in srgb, var(--brand-lightblue) 40%, transparent);
    color: inherit;
    text-decoration: underline dotted;
    padding: 0 0.15em;
}
/* /Components/Pages/AdressvalidierungEinstellungen.razor.rz.scp.css */
.einstellungen[b-f77svord11] { max-width: 60rem; }
.einstellungen h1[b-f77svord11] { margin: 0 0 .5rem; }
.hinweis[b-f77svord11] { font-size: .9rem; opacity: .8; margin: .25rem 0 1rem; }
.nur-lesen[b-f77svord11] { padding: .5rem .75rem; border-left: 3px solid var(--brand-accent); background: var(--brand-surface); }
.fehlermeldung[b-f77svord11] { color: #b3261e; margin: .35rem 0 0; }
.warnung[b-f77svord11] { color: #8a5a00; margin: .35rem 0 0; font-size: .9rem; }

.gruppe[b-f77svord11] { border: 1px solid var(--brand-grey); border-radius: 6px; padding: .75rem 1rem 1rem; margin: 0 0 1.25rem; }
.gruppe h2[b-f77svord11] { font-size: 1.15rem; margin: 0 0 .5rem; }

.einstellung[b-f77svord11] { padding: .6rem 0 .8rem; border-bottom: 1px solid color-mix(in srgb, var(--brand-grey) 25%, transparent); }
.einstellung:last-of-type[b-f77svord11] { border-bottom: none; }
.einstellung label[b-f77svord11] { display: block; font-weight: 600; }
.hilfe[b-f77svord11] { margin: .15rem 0 .4rem; font-size: .85rem; opacity: .8; }

.einstellung input[b-f77svord11], .einstellung textarea[b-f77svord11], .einstellung select[b-f77svord11] {
    font: inherit; padding: .35rem .5rem; border: 1px solid var(--brand-grey); border-radius: 4px;
    background: var(--brand-surface); color: var(--brand-ink); box-sizing: border-box;
}
.einstellung input[type=text][b-f77svord11] { width: min(24rem, 100%); }
.einstellung input[type=number][b-f77svord11] { width: 10rem; }
.einstellung textarea[b-f77svord11] { width: 100%; resize: vertical; }
.einstellung.geaendert input[b-f77svord11], .einstellung.geaendert textarea[b-f77svord11], .einstellung.geaendert select[b-f77svord11] { border-color: var(--brand-accent); box-shadow: 0 0 0 1px var(--brand-accent); }

.platzhalter[b-f77svord11] { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; }
.chip[b-f77svord11] { font: inherit; font-size: .8rem; padding: .1rem .5rem; border: 1px solid var(--brand-grey); border-radius: 999px; background: var(--brand-surface); color: var(--brand-ink); cursor: pointer; }
.chip:disabled[b-f77svord11] { cursor: default; opacity: .6; }

.vertrag-titel[b-f77svord11] { font-size: .8rem; margin: .5rem 0 .15rem; opacity: .8; }
.vertrag[b-f77svord11], .vorgabe[b-f77svord11], .pruefung pre[b-f77svord11] {
    white-space: pre-wrap; word-break: break-word; font-size: .8rem; margin: 0;
    padding: .4rem .6rem; background: var(--brand-surface); border: 1px dashed var(--brand-grey); border-radius: 4px;
}
.pruefung[b-f77svord11] { margin-top: .35rem; font-size: .85rem; }

.stand[b-f77svord11] { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: .4rem; font-size: .85rem; }
.vorgabe-hinweis[b-f77svord11] { opacity: .8; }
.link[b-f77svord11] { background: none; border: none; padding: 0; font: inherit; color: var(--brand-accent); text-decoration: underline; cursor: pointer; }
.vorgabe[b-f77svord11] { margin-top: .35rem; }

.verlauf table[b-f77svord11] { border-collapse: collapse; width: 100%; font-size: .85rem; }
.verlauf th[b-f77svord11], .verlauf td[b-f77svord11] { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--brand-grey) 25%, transparent); vertical-align: top; }
.platzhalter-hinweis[b-f77svord11] { font-size: .8rem; opacity: .8; margin: 0 0 .35rem; }
/* Built by a RenderFragment in code: no scope attribute, hence ::deep. */
.verlauf[b-f77svord11]  details pre { white-space: pre-wrap; word-break: break-word; font-size: .8rem; margin: .25rem 0 0; }
/* /Components/Pages/Komponenten.razor.rz.scp.css */
.katalog-filter[b-a1grnkjjlf] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-block: 1rem;
}

.katalog-grid[b-a1grnkjjlf] {
    overflow-x: auto;
}

.status-implemented[b-a1grnkjjlf] {
    color: var(--brand-blue);
    font-weight: 600;
}

.status-planned[b-a1grnkjjlf] {
    color: var(--brand-grey);
}

/* RowClass is applied on markup rendered by the FluentDataGrid child component,
   so it must cross the scoped-CSS boundary with ::deep. */
[b-a1grnkjjlf] .row-planned {
    color: var(--brand-grey);
    opacity: 0.7;
}

/* Fluent v5 ships `max-width: fit-content` on fluent-accordion-item. The consequence is not
   obvious: the item then sizes to its content's INTRINSIC width, and a grid with
   `repeat(auto-fill, minmax(...))` inside it resolves against that instead of the available
   width — measured at 1600px viewport, the item was 810px wide inside a 1310px accordion, so
   the card grid got 786px and fitted three columns while there was room for five. Scoped through
   the .karten-akkordeon wrapper rather than set globally: every other accordion in the app keeps
   Fluent's own sizing. */
.karten-akkordeon[b-a1grnkjjlf]  fluent-accordion-item {
    max-width: none;
}

/* One number sizes the whole card. Every fixed dimension below is expressed as a multiple of it,
   so the card grid can be retuned by editing this line alone — the preview box, the watermark,
   the meta band and the column width stay in proportion to each other, which is what keeps the
   grid from looking assembled out of unrelated parts. 1 is the original size. */
.karten-raster[b-a1grnkjjlf] {
    --karte-skala: 0.8;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--karte-skala)), 1fr));
    gap: calc(1rem * var(--karte-skala));
    padding: 0.5rem 0 1rem;
}

.komponenten-karte[b-a1grnkjjlf] {
    display: flex;
    flex-direction: column;
    /* Keeps the meta band at the bottom edge when the grid stretches this card to a taller
       neighbour — without it the band would float up and leave a white strip below. */
    justify-content: flex-end;
    border: 1px solid var(--brand-grey);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.karte-vorschau[b-a1grnkjjlf] {
    height: calc(280px * var(--karte-skala));
    padding: calc(1rem * var(--karte-skala));
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--brand-grey);
}

/* Watermark layer: anchored bottom-right, slightly bleeding out of the card and reaching up
   behind the vertically centered preview text (which sits above it via .karte-inhalt). */
.karte-deko[b-a1grnkjjlf] {
    position: absolute;
    right: calc(-24px * var(--karte-skala));
    bottom: calc(-18px * var(--karte-skala));
    width: calc(230px * var(--karte-skala));
    height: calc(230px * var(--karte-skala));
    opacity: 0.13;
    pointer-events: none;
}

.karte-inhalt[b-a1grnkjjlf] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.75rem * var(--karte-skala));
    /* The preview text scales too, or a smaller box would simply clip it — the box is
       `overflow: hidden`, so the loss would be silent. */
    font-size: calc(1rem * var(--karte-skala));
}

/* The block previews render inside a FluentCard whose opaque fill would cover the watermark
   layer below; inside the card preview that surface must stay see-through. Scoped here so the
   same components keep their normal card look elsewhere (e.g. the Text-Demo application). */
.karte-inhalt[b-a1grnkjjlf]  fluent-card {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Bottom third mirrors the FluentHeader look with inverted content, following the dark card
   variant in docs/ui-guide/figma-style-guide/10-cards-news-fragments.png. Deliberately the
   same token the header uses (accent-fill-rest, derived from CustomColor #FD5000) rather than
   --brand-accent: Fluent darkens the accent until white text has enough contrast, so the raw
   brand orange would visibly differ from the header. The .status-* classes are shared with
   the list view, so the inversion must stay scoped to .karte-meta. */
.karte-meta[b-a1grnkjjlf] {
    /* A minimum, not a fixed height: a long tech-stack line overflowed it by ten pixels and was
       silently cut. Growing the band is better than a scroll area of that size — which would hide
       content behind a gesture, be invisible on touch, and make one card behave unlike the rest.
       The grid stretches every cell of a row to the tallest, so the row stays flush anyway. */
    min-height: calc(140px * var(--karte-skala));
    padding: calc(0.75rem * var(--karte-skala)) calc(1rem * var(--karte-skala));
    background: var(--accent-fill-rest, var(--brand-accent));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.karte-name[b-a1grnkjjlf] {
    font-weight: 600;
    font-size: calc(1rem * var(--karte-skala));
}

.karte-zeile[b-a1grnkjjlf] {
    display: flex;
    gap: calc(0.5rem * var(--karte-skala));
    font-size: calc(0.85rem * var(--karte-skala));
    color: rgba(255, 255, 255, 0.85);
}

.karte-meta .status-implemented[b-a1grnkjjlf] {
    color: #fff;
}

.karte-meta .status-planned[b-a1grnkjjlf] {
    color: rgba(255, 255, 255, 0.75);
}

.karte-meta a[b-a1grnkjjlf] {
    color: #fff;
    text-decoration: underline;
}

.karte-geplant .karte-vorschau[b-a1grnkjjlf] {
    background: var(--brand-surface);
}
/* /Components/Pages/Medien.razor.rz.scp.css */
/* Scoped to Medien.razor. Every selector here targets an element written in that file, never a
   Fluent component's rendered output — CSS isolation does not reach into a child component, so a
   rule aimed at one would silently match nothing. */

.fehlermeldung[b-5ermx5uf9e] {
    color: var(--brand-accent);
    margin: .5rem 0 0;
}

.upload[b-5ermx5uf9e] {
    display: grid;
    gap: .75rem;
    max-width: 40rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    /* No --brand-border token exists in theme.css; a var() with a fallback would only pretend one
       does. This is a neutral hairline, not a brand colour. */
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .5rem;
}

.upload h2[b-5ermx5uf9e] { margin: 0; }

/* Same unbreakable-word problem as the list titles: the selected recording's title has no spaces
   to break on, so overflow-wrap:anywhere is required, not just text-overflow ellipsis. */
.detail h2[b-5ermx5uf9e] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.hinweis[b-5ermx5uf9e] { font-size: .85rem; opacity: .75; margin: 0; }

/* minmax(0, …) on both tracks, not just the first: a grid track's implicit minimum is
   min-content, which for an unbreakable file name is the whole word — without the explicit 0
   floor the track (and the viewport with it) grows past the word instead of wrapping it. */
.workspace[b-5ermx5uf9e] {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.liste[b-5ermx5uf9e] { display: flex; flex-direction: column; gap: .25rem; }

/* Qualified past the plain .titel rule below (only adds properties, does not replace it): a long
   file name has no spaces to break on, so it needs overflow-wrap to fold mid-word, plus a clamp
   so one runaway title cannot push the whole list out of view. */
.liste .titel[b-5ermx5uf9e] {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eintrag[b-5ermx5uf9e] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .8rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-left: 3px solid transparent;
}

.eintrag:hover[b-5ermx5uf9e] { background: rgba(0, 0, 0, .04); }

.eintrag.aktiv[b-5ermx5uf9e] {
    border-left-color: var(--brand-accent);
    background: rgba(0, 0, 0, .06);
}

.titel[b-5ermx5uf9e] { font-weight: 600; }
.zustand[b-5ermx5uf9e], .kopfzeile[b-5ermx5uf9e] { font-size: .85rem; opacity: .75; }

.kette[b-5ermx5uf9e] { border-collapse: collapse; margin: 1rem 0; }
.kette td[b-5ermx5uf9e] { padding: .25rem .75rem .25rem 0; vertical-align: top; }
.kette .menge[b-5ermx5uf9e] { font-variant-numeric: tabular-nums; }
.kette .fehler[b-5ermx5uf9e] { color: var(--brand-accent); font-size: .85rem; overflow-wrap: anywhere; max-width: 40rem; }
.kette tr.failed td:first-child[b-5ermx5uf9e] { color: var(--brand-accent); }

.aktionen[b-5ermx5uf9e] { display: flex; gap: .5rem; flex-wrap: wrap; }

.warnung[b-5ermx5uf9e] {
    margin-top: 1rem;
    padding: 1rem;
    display: grid;
    gap: .75rem;
    border: 1px solid var(--brand-accent);
    border-radius: .5rem;
}

.warnung p[b-5ermx5uf9e] { margin: 0; }

@media (max-width: 60rem) {
    .workspace[b-5ermx5uf9e] { grid-template-columns: 1fr; }
}

.herkunft[b-5ermx5uf9e] { margin-top: 1rem; }
.herkunft summary[b-5ermx5uf9e] { cursor: pointer; }
.herkunft dl[b-5ermx5uf9e],
.startwerte[b-5ermx5uf9e] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}
.herkunft dt[b-5ermx5uf9e], .startwerte dt[b-5ermx5uf9e] { font-weight: 600; }
.herkunft dd[b-5ermx5uf9e], .startwerte dd[b-5ermx5uf9e] { margin: 0; overflow-wrap: anywhere; }

.startbereich[b-5ermx5uf9e] { display: grid; gap: .5rem; margin-top: .5rem; }
/* /Components/Pages/MedienKatalog.razor.rz.scp.css */
/* Scoped to MedienKatalog.razor. Every selector here targets an element written in that file, never
   a Fluent component's rendered output — CSS isolation does not reach into a child component, so a
   rule aimed at one would silently match nothing. The one exception is ::deep, used deliberately
   below. */

h1[b-nfhj7ms6ic] { margin: 0 0 0.5rem; }

.fehlermeldung[b-nfhj7ms6ic] { color: var(--brand-accent); margin: .5rem 0; }
.hinweis[b-nfhj7ms6ic] { font-size: .9rem; opacity: .75; }

/* Two panes, each with its own scrollbar. The page root carries .vollhoehe (rules in theme.css);
   without a bounded height above, every overflow declaration here is inert — see the comment
   there. min-height: 0 is the second trap: a grid child's implicit minimum is its content. */
.workspace[b-nfhj7ms6ic] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
}

.liste[b-nfhj7ms6ic],
.detail[b-nfhj7ms6ic] {
    overflow-y: auto;
    min-height: 0;
    padding-right: 0.5rem;
}

.liste[b-nfhj7ms6ic] { display: flex; flex-direction: column; gap: .25rem; }

.eintrag[b-nfhj7ms6ic] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .8rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    flex: 0 0 auto;
}

.eintrag:hover[b-nfhj7ms6ic] { background: rgba(0, 0, 0, .04); }

.eintrag.aktiv[b-nfhj7ms6ic] {
    border-left-color: var(--brand-accent);
    background: rgba(0, 0, 0, .06);
}

/* A recording title is often a file name with no spaces to break on: it needs overflow-wrap to
   fold mid-word, plus a clamp so one runaway title cannot push the list out of view. */
.titel[b-nfhj7ms6ic] {
    font-weight: 600;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zustand[b-nfhj7ms6ic], .kopfzeile[b-nfhj7ms6ic] { font-size: .85rem; opacity: .75; }
.kopfzeile[b-nfhj7ms6ic] { margin: 0 0 1rem; }

.detail h2[b-nfhj7ms6ic] {
    overflow-wrap: anywhere;
    hyphens: auto;
    margin: 0;
}

.detail h3[b-nfhj7ms6ic] { margin: 1.25rem 0 .5rem; }

.stift[b-nfhj7ms6ic] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: .8em;
    opacity: .6;
    padding: 0 .25rem;
}

.stift:hover[b-nfhj7ms6ic] { opacity: 1; }

.bearbeiten[b-nfhj7ms6ic] { display: grid; gap: .75rem; max-width: 32rem; margin-bottom: 1rem; }
.aktionen[b-nfhj7ms6ic] { display: flex; gap: .5rem; flex-wrap: wrap; }

/* No `white-space: pre-wrap` any more: the summary is rendered markup since 25.08.2026 (see
   `.md-text` in theme.css), and pre-wrap would show the newlines between its elements as blank
   lines. Only the spacing around the block belongs to this page. */
.summary-text[b-nfhj7ms6ic] { margin: 0 0 .35rem; }

/* The machine-made marking. Quiet, but never absent: it is a condition of the documented exception
   to human-in-the-loop, not a nicety. */
.ki-hinweis[b-nfhj7ms6ic] {
    font-size: .8rem;
    opacity: .7;
    margin: 0 0 .5rem;
}

.eintragzeile[b-nfhj7ms6ic] {
    display: grid;
    grid-template-columns: 4rem 1.5rem minmax(0, 1fr);
    gap: .25rem .5rem;
    padding: .4rem 0;
    align-items: start;
}

/* The stills are what make the timeline worth having; a quiet tint is enough to tell them apart
   from speech without turning the page into a zebra. */
.eintragzeile.visual[b-nfhj7ms6ic] { background: rgba(0, 0, 0, .035); }

.zeit[b-nfhj7ms6ic] {
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    opacity: .8;
    text-decoration: none;
}

.zeit:hover[b-nfhj7ms6ic] { text-decoration: underline; }

.spur[b-nfhj7ms6ic] { font-size: .9rem; }

/* Still on the left, what was read off it on the right. min-width: 0 on the text half is the usual
   flex trap: without it a long unbroken word sets the minimum and pushes the picture out of the
   row. The picture itself must not shrink — see the same lesson, one level up, in theme.css. */
.inhalt[b-nfhj7ms6ic] { display: flex; gap: .75rem; align-items: flex-start; }
.inhalt > .text[b-nfhj7ms6ic] { min-width: 0; flex: 1 1 auto; }

.bild[b-nfhj7ms6ic] { flex: 0 0 auto; display: block; line-height: 0; }

.bild img[b-nfhj7ms6ic] {
    width: 360px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--brand-grey);
    background: var(--brand-surface);
}

.haupttext[b-nfhj7ms6ic] { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.beschreibung[b-nfhj7ms6ic] { margin: .2rem 0 0; opacity: .65; font-size: .9em; overflow-wrap: anywhere; }

@media (max-width: 60rem) {
    .workspace[b-nfhj7ms6ic] { grid-template-columns: 1fr; }

    /* Side by side needs width the single-column layout no longer has: stack instead, and let the
       picture use the full row rather than keeping a fixed 360px beside a squeezed paragraph. */
    .inhalt[b-nfhj7ms6ic] { flex-direction: column; }
    .bild img[b-nfhj7ms6ic] { width: 100%; }
}
/* /Components/Pages/MedienSuche.razor.rz.scp.css */
/* Three areas, three scrollbars: the search head keeps its size, the two panes below share what is
   left. The page root carries .vollhoehe (rules in theme.css) — without a bounded height above,
   every overflow declaration here is inert. */
.suchkopf[b-0t6kd1fmy7] {
    flex: 0 0 auto;
}

.suchkopf h1[b-0t6kd1fmy7] {
    margin: 0 0 0.5rem;
}

.suche[b-0t6kd1fmy7] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 0.5rem;
    max-width: 60rem;
}

/* The field has to be allowed to shrink inside the flex row, or a long query pushes the button off
   the side. The target is `fluent-field`, the WRAPPER FluentTextArea renders around itself (label
   plus a slotted `fluent-textarea`) - the textarea is inside it and is not the flex child. Read
   from the live DOM; guessing the element name here is what silently matches nothing. */
.suche[b-0t6kd1fmy7]  fluent-field {
    flex: 1 1 auto;
    min-width: 0;
}

.workspace[b-0t6kd1fmy7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.5rem;
    align-items: stretch;
    /* Takes the remaining height of .vollhoehe; min-height: 0 is what lets it be SMALLER than its
       content, which is the precondition for the two children to scroll rather than grow. */
    flex: 1 1 auto;
    min-height: 0;
}

.treffer[b-0t6kd1fmy7],
.fundstelle[b-0t6kd1fmy7] {
    overflow-y: auto;
    min-height: 0;
    /* Room for the scrollbar so it does not sit on top of the text. */
    padding-right: 0.5rem;
}

.treffer[b-0t6kd1fmy7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.treffer-zeile[b-0t6kd1fmy7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "quelle herkunft" "zeit zeit" "text text";
    gap: 0.15rem 0.5rem;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: none;
    border-left: 3px solid transparent;
    background: var(--neutral-layer-2, #f4f4f4);
    cursor: pointer;
    /* A flex column stretches its children to the tallest one otherwise, and a long excerpt would
       then blow up every other row. */
    flex: 0 0 auto;
}

.treffer-zeile.aktiv[b-0t6kd1fmy7] { border-left-color: var(--brand-primary, #1f3864); }
.quelle[b-0t6kd1fmy7]   { grid-area: quelle; font-weight: 600; overflow-wrap: anywhere; }
.herkunft[b-0t6kd1fmy7] { grid-area: herkunft; white-space: nowrap; font-size: 0.85em; }
.zeit[b-0t6kd1fmy7]     { grid-area: zeit; font-size: 0.85em; opacity: 0.75; }
.text[b-0t6kd1fmy7]     { grid-area: text; overflow-wrap: anywhere; }

/* Same unbreakable-word problem as the ingest page's .detail h2: the selected hit's title has no
   spaces to break on, so it clips instead of wrapping without this. */
.fundstelle h2[b-0t6kd1fmy7] {
    overflow-wrap: anywhere;
    hyphens: auto;
    margin-top: 0;
}

.wiedergabe[b-0t6kd1fmy7] { width: 100%; max-width: 720px; background: #000; }
.standbild[b-0t6kd1fmy7]  { width: 100%; max-width: 720px; margin-top: 0.75rem; }
.fundtext[b-0t6kd1fmy7]   { white-space: pre-wrap; overflow-wrap: anywhere; }
.beschreibung[b-0t6kd1fmy7] { white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0.65; font-size: 0.95em; }
.hinweis[b-0t6kd1fmy7]    { opacity: 0.75; }
.fehlermeldung[b-0t6kd1fmy7] { color: var(--error-color, #a4262c); }
/* /Components/Pages/Start.razor.rz.scp.css */
/* Key visual as the page background, filling the whole panel. The image (1448x1086, 4:3) carries
   its centre of gravity — the converging curves and the bright node — in the LOWER RIGHT, so that
   corner is what must always be on screen: `cover` keeps the proportions and crops whatever does
   not fit, and the bottom-right anchor decides where that happens. On a wide panel the image is
   width-bound and the crop takes off the top; on a narrow or tall one it is height-bound and the
   crop takes off the left. Either way the motif stays whole, and the part that goes is the calm
   navy the text sits on anyway.

   `contain` was tried first and rejected: it shows the picture whole but letterboxes, and the fill
   colour cannot match every edge, so a visible seam runs along the band. */
.start-hero[b-ptrp3qdm4y] {
    position: relative;
    /* Fill the panel down to its bottom edge instead of stopping at a fixed height. Measured in
       the running shell at 1900x1000: the section starts at y=107 (44 header + 12 content padding
       + 51 tab strip) and the content area keeps 12px of padding below — hence 119px, rounded to
       120 so a rounding error leaves a hairline gap rather than a scrollbar. The content area is
       `overflow-y: auto`, so being one pixel too tall would show one. */
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: flex-start;
    /* Same navy as the image's darkest corner: bridges the load gap, so the light text is never
       on white before the picture arrives. */
    background-color: #041c3f;
    background-image: url('/images/start-hero.png');
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}

/* Scrim from the text side outwards: keeps contrast at AA wherever the picture happens to sit on
   a given viewport — on a narrow one it is width-bound and reaches under the text. Deliberately
   fully transparent past ~two thirds so the motif stays clean. */
.start-hero[b-ptrp3qdm4y]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                                rgba(4, 20, 45, 0.80) 0%,
                                rgba(4, 20, 45, 0.55) 35%,
                                rgba(4, 20, 45, 0.00) 68%);
    pointer-events: none;
}

.start-inhalt[b-ptrp3qdm4y] {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: clamp(1.5rem, 5vw, 4rem);
}

/* theme.css paints every heading with --brand-ink; on the dark key visual it has to invert. */
.start-inhalt h1[b-ptrp3qdm4y] {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.start-lead[b-ptrp3qdm4y] {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.start-links[b-ptrp3qdm4y] {
    list-style: none;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Overrides app.css `a { color: #006bb7 }`, which is unreadable on navy. */
.start-links a[b-ptrp3qdm4y] {
    color: #8cc2ff;
    font-weight: 600;
    text-decoration: none;
}

.start-links a:hover[b-ptrp3qdm4y],
.start-links a:focus-visible[b-ptrp3qdm4y] {
    color: #fff;
    text-decoration: underline;
}

.start-links a:focus-visible[b-ptrp3qdm4y] {
    outline: 2px solid #8cc2ff;
    outline-offset: 3px;
    border-radius: 2px;
}
/* /Components/Pages/Vertraege.razor.rz.scp.css */
/* Scoped stylesheet for Vertraege.razor */

/* Grid layout for category tiles — mirrors .karten-raster from Komponenten.razor.css */
.kategorie-kacheln[b-qzns94axew] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0 1rem;
}

/* Light spacing for card content to avoid visual cramping */
[b-qzns94axew] .kategorie-kacheln h3 {
    margin: 0 0 0.5rem 0;
    color: var(--brand-ink);
}

[b-qzns94axew] .kategorie-kacheln p {
    margin: 0 0 0.75rem 0;
    color: var(--brand-grey);
    font-size: 0.9rem;
}

[b-qzns94axew] .kategorie-kacheln ul {
    margin: 0;
    padding-left: 1.5rem;
}

[b-qzns94axew] .kategorie-kacheln li {
    margin: 0.25rem 0;
    color: var(--brand-ink);
}

[b-qzns94axew] .kategorie-kacheln a {
    color: var(--brand-accent);
    text-decoration: none;
}

[b-qzns94axew] .kategorie-kacheln a:hover {
    text-decoration: underline;
}
/* /Components/Tabs/TabStrip.razor.rz.scp.css */
/* These rules style TabStrip's own markup, so they live here rather than in
   TabWorkspace.razor.css: Blazor's CSS isolation only stamps a component's scope attribute
   onto elements written literally in its own .razor markup, not onto a child component's
   root element, so a TabWorkspace stylesheet could never reach into what TabStrip renders —
   ::deep does not help either, since it still requires an ancestor carrying TabWorkspace's
   scope attribute, and nothing in TabWorkspace's markup wraps <TabStrip /> to provide one. */
.tab-strip[b-4edcpftce8] {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--brand-grey);
    margin-bottom: 1rem;
}

.tab[b-4edcpftce8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-bottom: none;
    white-space: nowrap;
}

.tab-active[b-4edcpftce8] {
    border-color: var(--brand-grey);
    background: var(--brand-surface);
    font-weight: 600;
}

.tab-label[b-4edcpftce8],
.tab-close[b-4edcpftce8] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding: 0.15rem 0.25rem;
}

.tab-close[b-4edcpftce8] {
    opacity: 0.6;
}

.tab-close:hover[b-4edcpftce8] {
    opacity: 1;
}
/* /Components/Tabs/TabWorkspace.razor.rz.scp.css */
/* The tab-strip rules (.tab-strip, .tab, .tab-active, .tab-label, .tab-close) live in
   TabStrip.razor.css instead: they style markup TabStrip renders, and this stylesheet's scope
   attribute never reaches there — see the comment in that file for why. .tab-empty stays here
   because TabWorkspace renders that <p> directly in its own markup. */
.tab-empty[b-2wg16iso26] {
    color: var(--brand-grey);
}

/* This one declaration is the whole keep-alive mechanism: an inactive tab keeps its place in the
   component tree and is merely hidden, so its state — and any <iframe> inside it — survives.
   It belongs in THIS stylesheet because TabWorkspace renders that div in its own markup and so
   the scope attribute reaches it; moved to a parent's stylesheet it would match nothing, which is
   the CSS-isolation trap that already cost this shell one defect. Why a class and not an inline
   style: see the comment above the div in TabWorkspace.razor. */
.tab-panel.is-hidden[b-2wg16iso26] {
    display: none;
}