:root {
    --grund: #ffffff;
    --flaeche: #f6f7f9;
    --rand: #dfe3e8;
    --schrift: #1b1f23;
    --gedaempft: #5c6670;
    --akzent: #00629b;
    --gut: #2e7d32;
    --offen: #b26a00;
    --schlecht: #b3261e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--schrift);
    background: var(--flaeche);
}

.rahmen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.kopf {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.5rem;
    height: 3.5rem;
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
}

.marke {
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--schrift);
    font-weight: 400;
}

.marke b {
    font-weight: 600;
    color: var(--akzent);
}

.navigation {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Gruppen in der Kopfzeile (MenueGruppe.razor): der Titel wie ein Verweis, die Einträge in einem Fach darunter. */
.menue-gruppe {
    position: relative;
}

.menue-gruppe > summary {
    list-style: none;
    cursor: pointer;
    color: var(--gedaempft);
    padding: .2rem 0;
    border-bottom: 2px solid transparent;
    user-select: none;
}

.menue-gruppe > summary::-webkit-details-marker {
    display: none;
}

.menue-gruppe > summary::after {
    content: "";
    display: inline-block;
    margin-left: .4rem;
    vertical-align: .15rem;
    border: .27rem solid transparent;
    border-top-color: currentColor;
    border-bottom: 0;
}

.menue-gruppe > summary:hover,
.menue-gruppe[open] > summary {
    color: var(--schrift);
}

/* Die Gruppe gilt als aktiv, solange eine ihrer Seiten offen ist. */
.menue-gruppe:has(a.aktiv) > summary {
    color: var(--akzent);
    border-bottom-color: var(--akzent);
}

.menue-fach {
    position: absolute;
    z-index: 20;
    top: calc(100% + .6rem);
    left: -.75rem;
    min-width: 13rem;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: .4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.menue-fach a {
    padding: .45rem .75rem;
    border-bottom: 0;
    border-radius: .25rem;
    white-space: nowrap;
}

.menue-fach a:hover {
    background: var(--flaeche);
}

.menue-fach a.aktiv {
    background: var(--flaeche);
    border-bottom: 0;
}

@media (max-width: 52rem) {
    .kopf {
        height: auto;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
        padding: .6rem 1rem;
    }

    .navigation {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
    }

    .benutzer {
        gap: .6rem;
    }
}

.navigation a {
    text-decoration: none;
    color: var(--gedaempft);
    padding: .2rem 0;
    border-bottom: 2px solid transparent;
}

.navigation a:hover {
    color: var(--schrift);
}

.navigation a.aktiv {
    color: var(--akzent);
    border-bottom-color: var(--akzent);
}

.benutzer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--gedaempft);
}

.benutzer form {
    margin: 0;
}

.inhalt {
    flex: 1;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.fuss {
    padding: 1rem 1.5rem;
    color: var(--gedaempft);
    font-size: .85rem;
    border-top: 1px solid var(--rand);
    background: var(--grund);
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 .75rem;
}

.unterzeile {
    color: var(--gedaempft);
    margin: 0 0 1.5rem;
}

.karte {
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    /* Eine zu breite Tabelle scrollt im Rahmen, statt über ihn hinauszuragen. */
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: .5rem;
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: .45rem .8rem;
    border-bottom: 1px solid var(--rand);
    vertical-align: middle;
}

td .unterzeile {
    margin: 0;
}

th {
    background: var(--flaeche);
    font-weight: 600;
    font-size: .85rem;
    color: var(--gedaempft);
    text-transform: uppercase;
    letter-spacing: .03em;
}

tbody tr:last-child td {
    border-bottom: none;
}

label {
    display: block;
    font-size: .85rem;
    color: var(--gedaempft);
    margin-bottom: .2rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font: inherit;
    background: var(--grund);
    color: var(--schrift);
}

/* Auswahllisten sehen aus wie die Textfelder; in einer Feldreihe füllen sie wie diese die Spalte. */
select {
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font: inherit;
    background: var(--grund);
    color: var(--schrift);
}

.feldreihe select {
    width: 100%;
}

/* In einer Tabellenzelle bestimmt der längste Eintrag nicht die Breite der Spalte: Lange Namen werden abgeschnitten, die Tabelle bleibt im Rahmen. */
table.kompakt select {
    max-width: 16rem;
    text-overflow: ellipsis;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--akzent);
    outline-offset: -1px;
}

.feldreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

button {
    font: inherit;
    padding: .5rem 1.1rem;
    border-radius: .3rem;
    border: 1px solid var(--akzent);
    background: var(--akzent);
    color: #fff;
    cursor: pointer;
}

button:hover:not(:disabled) {
    filter: brightness(1.1);
}

button:disabled {
    opacity: .55;
    cursor: default;
}

/* Ein einmal angezeigter Schlüssel: lang und ohne Leerzeichen, darf nicht aus dem Rahmen laufen. */
pre.schluesselkasten {
    margin: .5rem 0;
    padding: .5rem .7rem;
    max-width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-all;
    user-select: all;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .85rem;
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: .3rem;
}

button.zweitrangig {
    background: var(--grund);
    color: var(--akzent);
}

/* Eine Handlung, die sich nicht zurücknehmen lässt (Löschen). */
button.gefahr {
    background: var(--schlecht);
    border-color: var(--schlecht);
    color: #fff;
}

/* Ein Link, der wie eine Schaltfläche aussieht (Downloads). */
a.knopf {
    display: inline-block;
    font: inherit;
    padding: .5rem 1.1rem;
    border-radius: .3rem;
    border: 1px solid var(--akzent);
    background: var(--akzent);
    color: #fff;
    text-decoration: none;
}

a.knopf:hover {
    filter: brightness(1.1);
}

button.verknuepfung {
    background: none;
    border: none;
    color: var(--akzent);
    padding: 0;
    text-decoration: underline;
}

.meldung {
    padding: .7rem .9rem;
    border-radius: .3rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.meldung.fehler {
    background: #fdeceb;
    border-color: var(--schlecht);
    color: #7a1a14;
}

.meldung.erfolg {
    background: #eaf4ea;
    border-color: var(--gut);
    color: #1d4f20;
}

.meldung.hinweis {
    background: #fff8e8;
    border-color: var(--offen);
    color: #6b4000;
}

.abzeichen {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1rem;
    font-size: .78rem;
    border: 1px solid;
}

.abzeichen.gut {
    color: var(--gut);
    border-color: var(--gut);
    background: #eaf4ea;
}

.abzeichen.offen {
    color: var(--offen);
    border-color: var(--offen);
    background: #fff8e8;
}

.leer {
    color: var(--gedaempft);
    text-align: center;
    padding: 2rem;
}

code {
    background: var(--flaeche);
    padding: .1rem .3rem;
    border-radius: .2rem;
    font-size: .9em;
}

.anmeldung {
    max-width: 22rem;
    margin: 5rem auto;
}

.wechselbanner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem 1.5rem;
    background: #fff3cd;
    border-bottom: 2px solid var(--offen);
    color: #6b4000;
}

.wechselbanner form {
    margin: 0;
}

.wechselbanner .wechselaktionen {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.einblick-aktionen {
    display: inline-flex;
    gap: .5rem;
    margin-left: .75rem;
    vertical-align: middle;
}

.einblick-aktionen form {
    margin: 0;
}

.einblick-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: .4rem;
    vertical-align: middle;
    border-radius: 9999px;
    background: #fff3cd;
    color: var(--offen);
}

.einblick-marke .material-symbols-outlined {
    font-size: 1rem;
}

/*
  Icons: Material Symbols Outlined (Google, Apache License 2.0), eine variable Schrift für die ganze Suite. Die Datei liegt einmal im Repository
  (InFact.Webshop.UI/wwwroot/fonts). Das Portal referenziert InFact.Webshop.UI und liefert sie deshalb unter _content/InFact.Webshop.UI/fonts aus — ohne Kopie.
  Verwendung: <span class="material-symbols-outlined">search</span> - der Name des Icons steht als Text im Element. Regeln: AGENTS.md, Abschnitt "Icons".
*/
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url("_content/InFact.Webshop.UI/fonts/material-symbols-outlined.woff2") format("woff2");
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined.icon-filled {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.reiter {
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--rand);
}

/* Listen, die man den ganzen Tag bedient (Benutzerverwaltung): schmale Zeilen, Aktionen als Symbole, Einzelheiten zum Aufklappen. */
.werkzeugleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.werkzeugleiste select {
    padding: .45rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font: inherit;
    background: var(--grund);
}

.suchfeld {
    position: relative;
    flex: 1 1 18rem;
    max-width: 28rem;
}

.suchfeld .material-symbols-outlined {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--gedaempft);
    pointer-events: none;
}

.suchfeld input {
    padding-left: 2.1rem;
}

.zaehler {
    margin-left: auto;
    color: var(--gedaempft);
    font-size: .85rem;
}

table.kompakt th,
table.kompakt td {
    padding: .45rem .8rem;
    vertical-align: middle;
}

table.kompakt .name {
    font-weight: 600;
}

.klein {
    font-size: .82rem;
    margin: 0;
}

.gedaempft {
    color: var(--gedaempft);
    font-size: .88rem;
    white-space: nowrap;
}

/* Hinweise unter einem Feld sind Sätze, keine Zellen: Sie brechen um und stehen unter dem Feld. */
label > .gedaempft,
label > .klein.gedaempft {
    display: block;
    white-space: normal;
}

/* Zahlen, Adressen, Datum und Uhrzeit sehen aus wie die Textfelder (die Adresse der Schnittstelle ist ein URL-Feld). */
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"] {
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font: inherit;
    background: var(--grund);
    color: var(--schrift);
}

input[type="url"] {
    width: 100%;
}

/* Ein Formular aus Feldern: jedes Feld mit Abstand darunter. */
.formular > label,
.formular > fieldset {
    margin-bottom: 1rem;
}

/* Ein ganzer Absatz bricht um; nur kurze Angaben in Zeilen und Zellen bleiben einzeilig. */
p.gedaempft {
    white-space: normal;
}

.chip {
    display: inline-block;
    padding: .05rem .55rem;
    margin: .1rem .25rem .1rem 0;
    border-radius: .3rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    font-variant-numeric: tabular-nums;
}

.abzeichen.schlecht {
    color: var(--schlecht);
    border-color: var(--schlecht);
    background: #fdeceb;
}

th.aktionen,
td.aktionen {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.nur-leser {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

button.symbol {
    padding: .25rem;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    background: none;
    border: 1px solid transparent;
    color: var(--gedaempft);
}

button.symbol:hover:not(:disabled) {
    filter: none;
    background: var(--flaeche);
    border-color: var(--rand);
    color: var(--akzent);
}

button.symbol .material-symbols-outlined {
    font-size: 1.25rem;
    vertical-align: middle;
}

tr.offen td {
    background: #fbfcfd;
    border-bottom-color: transparent;
}

tr.details > td {
    background: #fbfcfd;
    padding: .2rem .8rem 1rem;
}

.detailraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.detailraster h3 {
    margin: 0 0 .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gedaempft);
}

.detailraster .breit {
    grid-column: 1 / -1;
}

.detailraster .zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .4rem;
}

.detailraster .zeile input {
    max-width: 12rem;
}

.durchgestrichen {
    text-decoration: line-through;
    opacity: .6;
}

ul.schlicht {
    list-style: none;
    margin: 0;
    padding: 0;
}

label.schalter {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    font-size: 1rem;
    color: var(--schrift);
    cursor: pointer;
}

label.schalter input {
    margin-top: .3rem;
}

label.schalter .klein {
    display: block;
}

textarea {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--rand);
    border-radius: .3rem;
    font: inherit;
    background: var(--grund);
    color: var(--schrift);
}

.domainzeile .unterzeile.warnung {
    margin: 0;
    color: var(--schlecht);
}

.domainzeile {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .92rem;
}

.punkt {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.punkt.gut {
    background: var(--gut);
}

.punkt.offen {
    background: var(--offen);
}

.werkzeugleiste label.schalter {
    align-items: center;
    font-size: .92rem;
}

.werkzeugleiste label.schalter input {
    margin-top: 0;
}

.blaettern {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .6rem;
    color: var(--gedaempft);
    font-size: .85rem;
}

td.zahl,
th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

td.umbruch {
    white-space: pre-wrap;
}

/* Anzeigen von Lieferanten (E-124): Auf jedem Platz dieselbe ruhige Karte, kenntlich als Anzeige. */
.werbeanzeige {
    border-left: 4px solid var(--rand);
}

.werbeartikel {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
}

.werbeartikel li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.werbeartikel img {
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--rand);
}

/* Das eigene Bild der Anzeige: links neben dem Text, auf schmalen Bildschirmen darüber. */
.werbeanzeige-inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-start;
}

.werbeanzeige-inhalt > div {
    flex: 1 1 14rem;
    min-width: 0;
}

.werbeanzeige-bild {
    width: 10rem;
    max-width: 100%;
    max-height: 7.5rem;
    object-fit: cover;
    border-radius: .25rem;
    border: 1px solid var(--rand);
}

/* Vorschau beim Bearbeiten: dieselbe Karte, sichtbar als Entwurf. */
.werbeanzeige.vorschau {
    border-style: dashed;
}