h1:focus {
    outline: none;
}

/* ── A11y: sichtbarer Tastatur-Fokus für eigene interaktive Elemente ── */
.prod-kachel:focus-visible,
.anf-karte:focus-visible,
.dat-icon-btn:focus-visible,
.dat-small-btn:focus-visible,
.dat-add-link:focus-visible,
.otp-box:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── Schriftgewicht-Utilities (statt inline font-weight) ── */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Gedimmter Text ──
   Bewusst NICHT über MudText Color="Color.Secondary": Secondary ist im Theme das
   Komplementärgrün und steht für „Status/Erfolg", nicht für Nebentext (s. CLAUDE.md). */
.text-dim { color: var(--mud-palette-text-secondary); }

/* ── Debug-Modus-Anzeige (unten im Drawer) ──
   Warning-Ton (Amber) als Debug-Highlight – bewusst abseits von Marken-Lila/Grün. */
.debug-mode-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), .14);
    border-top: 1px solid rgba(var(--mud-palette-warning-rgb), .5);
}

/* ── Produktdoku – Kacheln (an MudCard / Theme angeglichen) ── */
.prod-kachel {
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.prod-kachel:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.prod-kachel-imgwrap {
    position: relative;
    background: var(--mud-palette-background-gray);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.prod-kachel-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .15;
}
.prod-kachel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}
.prod-kachel-foot {
    border-top: 2px solid var(--mud-palette-primary);
    margin-top: auto;
}
.prod-kachel-name {
    font-weight: 600;
    line-height: 1.32;
    min-height: 2.25em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-kachel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

/* ── Anfrageliste (/anfragen) – Karte je Anfrage ── */
.anf-karte {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.anf-karte:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
/* Farbstreifen links = Statusfarbe. Der Wert kommt als Custom-Property von der Komponente,
   damit hier keine Farbe hartkodiert werden muss. */
.anf-karte::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--anf-status, var(--mud-palette-lines-default));
}
.anf-karte-in { padding: 14px 18px 14px 22px; }
.anf-beschreibung {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.anf-meta { padding-left: 0; padding-right: 0; }
/* Positions-Vorschau: Bezeichnung | Menge | Status */
.anf-pos {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 4px 14px;
    align-items: baseline;
}
.anf-pos-mehr { grid-column: 1 / -1; padding-top: 2px; }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Warenkorb-Positionen: eigene Scrollfläche. Ohne sie wächst die Karte mit jeder
   Position, und Kommentarfeld, Gesamtsumme und Bestellbutton wandern aus dem
   Sichtbereich. 40vh statt eines festen Werts, damit auf niedrigen Fenstern nicht
   trotzdem alles rausrutscht. */
.warenkorb-liste {
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Luft rechts, damit die Scrollleiste die Betraege nicht ueberdeckt */
    padding-right: 4px;
}

/* Video-Wiedergabe in der Anhangliste. Breite folgt dem Dialog, Höhe gedeckelt, damit ein
   Hochkant-Handyvideo nicht die halbe Seite einnimmt und die restlichen Anhänge verdrängt.
   Schwarzer Hintergrund statt Flächenfarbe: die Ränder eines nicht formatfüllenden Videos
   sollen nicht wie ein Darstellungsfehler der Karte aussehen. */
.anhang-video {
    display: block;
    width: 100%;
    max-height: 340px;
    margin: 8px 0 4px;
    border-radius: 8px;
    background: #000;
    outline: 1px solid var(--mud-palette-divider);
}