/* Inter – dieselbe Schrift, die auch in «ModellDepot Icons.ai» steckt.
   Liegt lokal bei (SIL Open Font License), kein CDN, kein Lizenzproblem.
   Der Katalog selbst setzt Acumin Pro (Adobe Fonts) – die liesse sich über ein
   Adobe-Fonts-Webprojekt einbinden, wenn es haargenau stimmen soll. */
@font-face {
    font-family: "Inter";
    src: url("vendor/inter.woff2?v=260804-0046") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ModellDepot Modul – Hausstil
   Dunkelblau und Dunkelgrau stammen aus «ModellDepot GA 2026-2027»:
   #111D3D ist die Leiste des Umschlags, #707073 der Titelbalken der
   Artikelblöcke, #B8B8B9 die französische Zweitzeile, #EDEDED die Kapselfelder.
   Die Buntwerte kommen aus «Design Elemente/ModellDepot Icons.ai». */

:root {
    --navy:       #111D3D;
    --navy-hell:  #22315A;
    --rot:        #D02E26;
    --rot-dunkel: #B02620;
    --blau:       #4E7AAD;
    --blau-hell:  #5DA1D7;
    --blau-tief:  #35387C;
    --gruen:      #6BA37D;
    --gelb:       #ECCB73;
    --orange:     #DC925B;
    --violett:    #8C6ABB;

    --text:       #1D1D1B;
    --grau:       #707073;
    --grau-mittel:#B8B8B9;
    --grau-hell:  #DBDBDB;
    --grau-feld:  #EDEDED;
    --linie:      #E4E4E4;
    --flaeche:    #F6F6F6;
    --weiss:      #FFFFFF;

    /* Rundungen: eine Stufenleiter statt eines Werts */
    --radius-klein: 6px;    /* Symbolkapseln, kleine Knöpfe */
    --radius:       9px;    /* Knöpfe, Eingabefelder */
    --radius-gross: 14px;   /* Karten, Tabellenrahmen, Ablagefläche */
    --radius-rund:  999px;  /* Chips und Navigation */
    --schrift:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* muss über den Anzeigearten stehen (.anmeldung ist ein Raster) */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    background: var(--flaeche);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ Kopf */

.kopf {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 56px;
    /* dieselbe Spaltenbreite wie der Inhalt, damit Kopf und Seite fluchten */
    padding: 0 max(22px, calc((100vw - 1560px) / 2));
    background: var(--navy);
    color: var(--weiss);
    position: sticky;
    top: 0;
    z-index: 40;
}

.marke {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
    letter-spacing: -0.2px;
    font-size: 17px;
}

.marke .modul {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--weiss);
    background: var(--rot);
    padding: 3px 8px;
    border-radius: var(--radius-rund);
}

.navigation { display: flex; gap: 2px; margin-left: 10px; }

.navigation button {
    font: inherit;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: 0;
    padding: 7px 14px;
    border-radius: var(--radius-rund);
    cursor: pointer;
}

.navigation button:hover { background: var(--navy-hell); color: var(--weiss); }
.navigation button[aria-current="true"] { color: var(--navy); font-weight: 700; background: var(--weiss); }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px;
               color: rgba(255, 255, 255, 0.65); font-size: 12px; white-space: nowrap; }
.kopf-rechts .knopf.still { color: rgba(255, 255, 255, 0.85); }
.kopf-rechts .knopf.still:hover { background: var(--navy-hell); color: var(--weiss); }

/* ------------------------------------------------------------- Grundbau */

/* Inhaltsspalte mittig, statt am linken Rand zu kleben */
main { padding: 22px; max-width: 1560px; margin: 0 auto; }
.ansicht[hidden] { display: none; }

h1 { font-size: 19px; margin: 0 0 2px; font-weight: 700; }
h2 { font-size: 14px; margin: 0 0 10px; font-weight: 700; }
.lead { color: var(--grau); margin: 0 0 18px; font-size: 13px; }

.leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.leiste .schub { margin-left: auto; }

/* ------------------------------------------------- Eingaben und Knöpfe */

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 7px 9px;
    outline: none;
}

/* Auswahlfelder im Hausstil.
   Das native <select> bleibt für Wert und Beschriftung bestehen, wird aber
   unsichtbar – gezeigt werden ein eigener Knopf und eine eigene Liste
   (auswahl.js). Nur so lässt sich auch die aufgeklappte Liste gestalten. */

select[data-eigen] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
}

.auswahl { position: relative; display: inline-block; min-width: 0; }
label.feld > .auswahl { display: block; }
.leiste .auswahl { flex: 0 1 auto; }

.auswahl-knopf {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 33px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 7px 11px;
    cursor: pointer;
}
.auswahl-knopf:hover { border-color: var(--grau-mittel); }
.auswahl-knopf:focus-visible { outline: none; border-color: var(--navy); }
.auswahl-knopf:disabled { color: var(--grau-mittel); background: var(--flaeche); cursor: default; }
.auswahl.leer .auswahl-text { color: var(--grau); }

.auswahl-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pfeil im Hausgrau, dreht sich beim Aufklappen */
.auswahl-pfeil {
    flex: none;
    width: 11px; height: 7px;
    background: currentColor;
    color: var(--grau);
    transition: transform 0.12s ease;
    -webkit-mask: no-repeat center / 11px 7px
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask: no-repeat center / 11px 7px
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.auswahl-offen .auswahl-knopf { border-color: var(--navy); }
.auswahl-offen .auswahl-pfeil { transform: rotate(180deg); color: var(--navy); }

/* die aufgeklappte Liste – das eigentliche Ziel der Übung */
.auswahl-liste {
    position: absolute;
    z-index: 60;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    max-width: min(420px, 92vw);
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: 0 8px 26px rgba(17, 29, 61, 0.16);
}
.auswahl.nach-oben .auswahl-liste { top: auto; bottom: calc(100% + 5px); }

.auswahl-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--radius-klein);
    padding: 7px 10px;
    cursor: pointer;
}
.auswahl-eintrag > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auswahl-eintrag:hover, .auswahl-eintrag:focus-visible { background: var(--flaeche); outline: none; }
.auswahl-eintrag.gewaehlt { color: var(--navy); font-weight: 600; }
.auswahl-haken { flex: none; width: 12px; color: var(--gruen); font-weight: 700; }


input:focus, select:focus, textarea:focus { border-color: var(--navy); }
textarea { resize: vertical; min-height: 58px; line-height: 1.5; }
label.feld { display: block; }
label.feld > span { display: block; font-size: 11px; color: var(--grau); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.4px; }
label.feld > input, label.feld > select, label.feld > textarea { width: 100%; }

.knopf {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 7px 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.knopf:hover { border-color: var(--grau); }
.knopf:disabled { opacity: 0.45; cursor: default; border-color: var(--linie); }
.knopf.haupt { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.knopf.haupt:hover { background: var(--navy-hell); border-color: var(--navy-hell); }
.knopf.still { border-color: transparent; color: var(--grau); background: none; }
.knopf.still:hover { background: var(--flaeche); color: var(--text); border-color: transparent; }

.knopf svg, .symbol { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.4; flex: none; }

/* ------------------------------------------------------------- Kärtchen */

.karte {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 16px 18px;
}

/* --------------------------------------------------------------- Chips */

.chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 9px;
    border-radius: var(--radius-rund);
    background: var(--grau-hell);
    color: var(--text);
    white-space: nowrap;
}

.chip.rot     { background: var(--rot);      color: var(--weiss); }
.chip.blau    { background: var(--blau-hell);color: var(--weiss); }
.chip.gruen   { background: var(--gruen);    color: var(--weiss); }
.chip.gelb    { background: var(--gelb);     color: var(--text); }
.chip.dunkel  { background: var(--text);     color: var(--weiss); }
/* wie die Kapsel «Exklusiv Schweiz» im Katalog */
.chip.grau    { background: var(--grau);     color: var(--weiss); }
.chip.offen   { background: none; border: 1px solid var(--grau-hell); color: var(--grau); font-weight: 600; }

/* -------------------------------------------------------------- Tabelle */

.tabelle-rahmen { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: auto; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }

thead th {
    position: sticky;
    top: 0;
    background: var(--weiss);
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--grau);
    padding: 9px 10px;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}

tbody td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tbody tr:hover { background: #FAFAFA; }
tbody tr.gewaehlt { background: #EEF1F7; }
td.nr { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--grau); }
td.mittig, th.mittig { text-align: center; }

.leer { padding: 40px; text-align: center; color: var(--grau); }

/* ------------------------------------------------------------ Anmeldung */

.anmeldung {
    min-height: 100vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 30px;
    background: var(--navy);
    padding: 30px;
}

/* Wortmarke vom Katalogumschlag – weiss, deshalb steht sie auf dem Navy,
   nicht auf der weissen Karte. */
.anmelde-wortmarke { width: 290px; max-width: 80vw; height: auto; }
.anmeldung .karte { width: 340px; }

.anmeldung label.feld { margin-bottom: 12px; }
.anmeldung .knopf { width: 100%; justify-content: center; }
.fehler { color: var(--rot); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* ------------------------------------------------------- Artikel-Editor */

.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.editor-gitter { display: grid; gap: 14px; }
.editor-block { border-top: 1px solid var(--linie); padding-top: 14px; }

.schalter { display: flex; gap: 8px; flex-wrap: wrap; }
.schalter button {
    font: inherit; font-size: 12px; font-weight: 600;
    border: 1px solid var(--linie); background: var(--weiss);
    border-radius: var(--radius-rund); padding: 6px 13px; cursor: pointer; color: var(--grau);
}
.schalter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--weiss); }

/* -------------------------------------------------------------- Hinweis */

.hinweis { font-size: 12px; color: var(--grau); }
.warnung { border-left: 3px solid var(--gelb); background: #FDF8EC; padding: 9px 13px;
           border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; }

/* ---------------------------------------------------------------- Import */

.ablage {
    border: 2px dashed var(--grau-hell);
    border-radius: var(--radius-gross);
    padding: 34px 20px;
    text-align: center;
    background: var(--flaeche);
}
.ablage.aktiv { border-color: var(--navy); background: #F2F4F8; }
.ablage p { margin: 0 0 6px; }

.posten { padding: 0; margin-bottom: 8px; }

.posten-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
}
.posten-kopf:hover { background: #FAFAFA; }
.posten-kopf .schub { margin-left: auto; }
.posten-kopf > span:nth-child(3) { color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-pfeil { color: var(--grau); width: 12px; }

.posten-inhalt { padding: 4px 14px 14px; border-top: 1px solid var(--linie); }

table.diff { font-size: 13px; }
table.diff th { text-transform: none; letter-spacing: 0; }
table.diff td { vertical-align: middle; }
table.diff input[type="text"], table.diff textarea { width: 100%; }
table.diff tr.abgewaehlt td { opacity: 0.45; }
table.diff tr.abgewaehlt input, table.diff tr.abgewaehlt textarea { text-decoration: line-through; }

.knopf.klein { padding: 3px 7px; font-size: 13px; }
.jaNein { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

details.karte summary { cursor: pointer; }

/* ----------------------------------------------------------- Exportlisten */

/* minmax(0, …): ohne das setzen die langen Beschreibungen die Mindestbreite
   der Spalte und das Raster wächst über den Bildschirm hinaus. */
.listen-flaeche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.spalte { padding: 14px; }
.spalte-kopf { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.spalte-kopf h2 { margin: 0; }

.artikelspalte {
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    max-height: 62vh;
    overflow-y: auto;
    background: var(--flaeche);
    min-height: 180px;
}
.artikelspalte.ziel.aktiv { border-color: var(--navy); background: #F2F4F8; }

.artikelkarte {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    background: var(--weiss);
    border-bottom: 1px solid var(--linie);
    cursor: grab;
}
.artikelkarte:last-child { border-bottom: 0; }
.artikelkarte:hover { background: #FAFAFA; }
.artikelkarte.wirdGezogen { opacity: 0.4; }
.artikelkarte.einfuegemarke { box-shadow: inset 0 2px 0 0 var(--navy); }

.artikelkarte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.artikelkarte-text strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.artikelkarte-text span { font-size: 12px; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.griff { color: var(--grau-mittel); cursor: grab; user-select: none; }
.knopf.still.weg { color: var(--rot); font-weight: 700; }
.knopf.still.weg:hover { background: #FBEDEC; color: var(--rot-dunkel); }

/* ------------------------------------------------------- Schmale Fenster */

@media (max-width: 1000px) {
    .listen-flaeche, .zweispaltig { grid-template-columns: minmax(0, 1fr); }
    .dreispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .dreispaltig { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Bereinigen */

table.gegenueber td { vertical-align: top; }
table.gegenueber tr.geaendert td.vorher { background: #FDF8EC; }
table.gegenueber textarea { width: 100%; font-size: 13px; min-height: 40px; }
table.gegenueber textarea.franz { margin-top: 5px; color: var(--grau); }
table.gegenueber .franz { color: var(--grau); }
table.gegenueber mark { background: #FBE3A2; color: var(--text); padding: 0 1px; }

/* --------------------------------------------------------------- Symbole */

.symbolzeile { display: flex; flex-wrap: wrap; gap: 8px; }

.symbolkapsel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--grau-feld);
    border-radius: var(--radius-klein);
    padding: 5px 10px 5px 7px;
    font-size: 12px;
    font-weight: 700;
}
.symbolkapsel img { height: 15px; width: auto; }

.bilderliste { margin: 0; padding-left: 18px; font-size: 13px; }
.bilderliste li { font-variant-numeric: tabular-nums; }

.anmelde-fuss { display: flex; justify-content: space-between; margin-top: 4px; }
.anmelde-fuss .knopf { font-weight: 400; font-size: 12px; padding: 5px 8px; }

/* ------------------------------------------------------------ Vorschläge */

.vorschlag {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 5px;
    font: inherit;
    font-size: 11px;
    color: var(--blau);
    background: #EEF3F9;
    border: 1px solid #D6E2EF;
    border-radius: var(--radius-rund);
    padding: 3px 10px;
    cursor: pointer;
    text-align: left;
}
.vorschlag:hover { background: #E1EBF6; border-color: var(--blau); }
.vorschlag strong { color: var(--navy); }
.vorschlag span { color: var(--grau); }

/* --------------------------------------------------------------- Zubehör */

.zubehoerliste { display: flex; flex-direction: column; gap: 7px; }

.zubehoerteil {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 11px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font-size: 13px;
}
.zubehoerteil .nr { font-variant-numeric: tabular-nums; color: var(--grau); }
.zubehoerteil .hinweis { flex: 1 1 260px; }

/* ------------------------------------------------------------ Bildauswahl */

.miniaturen { display: flex; flex-wrap: wrap; gap: 10px; }

.miniatur {
    position: relative;
    width: 132px;
    padding: 0;
    background: var(--weiss);
    border: 2px solid var(--linie);
    border-radius: var(--radius);
    cursor: pointer;
    overflow: hidden;
    font: inherit;
}
.miniatur:hover { border-color: var(--grau-mittel); }

/* die gewählte Aufnahme – grüner Rahmen und Haken */
.miniatur.gewaehlt { border-color: var(--gruen); box-shadow: 0 0 0 1px var(--gruen); }

.miniatur-bild {
    display: grid;
    place-items: center;
    height: 92px;
    background: var(--grau-feld);
    font-size: 11px;
    color: var(--grau);
}
.miniatur-bild img { width: 100%; height: 92px; object-fit: contain; display: block; }
.miniatur-bild.fehlt { font-size: 10px; }

.miniatur-fuss {
    display: block;
    padding: 4px 0;
    font-size: 11px;
    color: var(--grau);
    background: var(--weiss);
    border-top: 1px solid var(--linie);
}
.miniatur.gewaehlt .miniatur-fuss { color: var(--gruen); font-weight: 700; }

.miniatur-haken {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-rund);
    background: var(--gruen);
    color: var(--weiss);
    font-size: 12px;
    font-weight: 700;
}

/* --------------------------------------------------------- Fehlende Angaben */

.warnzeichen { color: #C68A00; font-size: 13px; }
table.diff tr.fehlend td { background: #FDF8EC; }
table.diff tr.fehlend input, table.diff tr.fehlend textarea { border-color: var(--gelb); }

/* ----------------------------------------------------------------- Start */

.willkommen { margin: 26px 0 26px; }
.willkommen h1 { font-size: 27px; margin-bottom: 4px; }
.willkommen .lead { font-size: 15px; margin: 0; }

.startkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.startkarte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 22px;
    text-align: left;
    font: inherit;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    cursor: pointer;
}
.startkarte:hover { border-color: var(--navy); box-shadow: 0 2px 10px rgba(17, 29, 61, 0.07); }

.startkarte svg {
    width: 40px; height: 40px;
    stroke: var(--navy); fill: none;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.startkarte strong { font-size: 15px; }
.startkarte span { font-size: 13px; color: var(--grau); line-height: 1.45; }

@media (max-width: 1000px) { .startkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .startkarten { grid-template-columns: minmax(0, 1fr); } }

/* gesperrte Felder, deren Wert sich aus einem anderen ergibt */
input:disabled { background: var(--grau-feld); color: var(--grau); cursor: default; }

/* ------------------------------------------------------- Statusabzeichen */

.abzeichenwahl { display: flex; flex-wrap: wrap; gap: 12px; }

.abzeichen {
    padding: 6px;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 0;
}
.abzeichen img { height: 34px; width: auto; display: block; }

/* abgewählt: ausgegraut – angewählt: volle Farbe */
.abzeichen img { filter: grayscale(1); opacity: 0.4; transition: filter 0.12s, opacity 0.12s; }
.abzeichen:hover img { opacity: 0.7; }
.abzeichen.an img { filter: none; opacity: 1; }
.abzeichen.an { border-color: var(--gruen); background: #F2F8F4; }

.abzeichen-klein { height: 17px; width: auto; vertical-align: middle; }

/* ---------------------------------------------------------------- Dialoge */

.dialog-schatten {
    position: fixed;
    inset: 0;
    z-index: 100;                       /* über allem, auch über der Kopfleiste */
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 29, 61, 0.42);
    backdrop-filter: blur(2px);
}

.dialog {
    width: min(440px, 100%);
    background: var(--weiss);
    border-radius: var(--radius-gross);
    box-shadow: 0 18px 50px rgba(17, 29, 61, 0.28);
    padding: 22px 24px 18px;
}
.dialog h2 { font-size: 16px; margin: 0 0 8px; }
.dialog-text { font-size: 13px; color: var(--grau); margin: 0 0 16px; line-height: 1.5; }
.dialog label.feld { margin-bottom: 4px; }
.dialog input[type="text"] { width: 100%; font-size: 14px; padding: 9px 11px; }

.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.knopf.gefahr:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }

/* ------------------------------------------------------------ Exportlisten */

.listenreihen {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    overflow: hidden;
}

.listenreihe {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--linie);
    cursor: pointer;
}
.listenreihe:last-child { border-bottom: 0; }
.listenreihe:hover { background: var(--flaeche); }

.listensymbol {
    flex: none;
    width: 22px; height: 22px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.listenname { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listenmass { flex: none; font-size: 12px; color: var(--grau); }
.listenzeit { flex: none; width: 120px; text-align: right; font-size: 12px; color: var(--grau-mittel); }
.listenpfeil { flex: none; color: var(--grau-mittel); font-size: 19px; line-height: 1; }

@media (max-width: 760px) {
    .listenmass, .listenzeit { display: none; }
}

/* ----------------------------------------------------------- Speicherstand */

.speicherstand { font-size: 12px; color: var(--grau); white-space: nowrap; }
.speicherstand.speichert { color: var(--grau); }
.speicherstand.gesichert { color: var(--gruen); }
.speicherstand.fehler { color: var(--rot); font-weight: 600; }

/* Doppelklick soll nichts markieren */
.artikelkarte { user-select: none; }