/* Werkstatt & Vitrine – Basislayout. Werte ausschließlich aus tokens.css. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font-family: var(--schrift-grotesk);
    font-size: var(--schrift-groesse-basis);
    line-height: 1.5;
}

a { color: var(--farbe-akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--schrift-grotesk);
    font-weight: 600;
    margin: 0 0 var(--abstand-m);
}

/* ---------- Kopfzeile / Navigation ---------- */

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-xl); /* Luft zwischen Sammlungsname und erstem Menüpunkt */
    padding: var(--abstand-m) var(--abstand-l);
    border-bottom: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
}

.kopf__marke {
    flex-shrink: 0;
    font-family: var(--schrift-serif);
    font-style: italic;
    font-size: var(--schrift-groesse-gross);
    color: var(--farbe-text);
}
.kopf__marke:hover { text-decoration: none; color: var(--farbe-akzent); }

.nav-inhalt { display: flex; align-items: center; gap: var(--abstand-l); flex: 1; }
.nav { display: flex; gap: var(--abstand-m); align-items: center; flex: 1; }

.nav__link {
    color: var(--farbe-text);
    font-size: var(--schrift-groesse-klein);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.nav__link::-webkit-details-marker { display: none; }
.nav__link.aktiv, .nav__link:hover { color: var(--farbe-akzent); text-decoration: none; }
.nav__link--benutzer { text-transform: none; letter-spacing: 0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Nav-Klappe (Dropdown) */
.nav-klappe { position: relative; }
.nav-klappe__pfeil { width: 12px; height: 12px; transition: transform .15s; flex-shrink: 0; }
.nav-klappe[open] > summary .nav-klappe__pfeil { transform: rotate(180deg); }
.nav-klappe__person-icon { width: 14px; height: 14px; flex-shrink: 0; }

.nav-klappe__inhalt {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    min-width: 210px;
    z-index: 200;
    box-shadow: 0 4px 16px rgb(0 0 0 / .1);
    padding: 4px 0;
}
.nav-klappe__inhalt--rechts { left: auto; right: 0; }

.nav-klappe__inhalt a,
.nav-klappe__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--abstand-m);
    color: var(--farbe-text);
    font-size: var(--schrift-groesse-klein);
    white-space: nowrap;
    text-decoration: none;
}
.nav-klappe__inhalt a svg,
.nav-klappe__btn svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--farbe-text-sekundaer); }
.nav-klappe__inhalt a:hover,
.nav-klappe__btn:hover {
    background: color-mix(in srgb, var(--farbe-akzent) 8%, var(--farbe-flaeche));
    color: var(--farbe-akzent);
    text-decoration: none;
}
.nav-klappe__inhalt a.aktiv { color: var(--farbe-akzent); font-weight: 600; }

.nav-klappe__btn {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--schrift-grotesk);
}

/* Hamburger (nur mobil) */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--farbe-text);
    padding: 4px;
    border-radius: var(--radius);
    margin-left: auto;
}
.nav-hamburger:hover { color: var(--farbe-akzent); }
.nav-hamburger__icon { width: 20px; height: 20px; display: block; }

.kopf__benutzer { display: flex; align-items: center; gap: var(--abstand-m); font-size: var(--schrift-groesse-klein); color: var(--farbe-text-sekundaer); }

.theme-schalter {
    background: none;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    color: var(--farbe-text);
    cursor: pointer;
    padding: 2px 8px;
    font-size: var(--schrift-groesse-klein);
}

/* ---------- Layout-Container ---------- */

.hauptinhalt { max-width: 1200px; margin: 0 auto; padding: var(--abstand-l); }
.hauptinhalt--breit { max-width: 1500px; }
.app-footer { padding: var(--abstand-l); text-align: center; }

.flash { padding: var(--abstand-s) var(--abstand-m); border-radius: var(--radius); margin-bottom: var(--abstand-m); font-size: var(--schrift-groesse-klein); }
.flash--erfolg { background: color-mix(in srgb, var(--farbe-status-gruen) 15%, var(--farbe-flaeche)); border: 1px solid var(--farbe-status-gruen); color: var(--farbe-text); }
.flash--fehler { background: color-mix(in srgb, var(--farbe-status-rot) 15%, var(--farbe-flaeche)); border: 1px solid var(--farbe-status-rot); color: var(--farbe-text); }
.flash--hinweis { background: color-mix(in srgb, var(--farbe-akzent) 12%, var(--farbe-flaeche)); border: 1px solid var(--farbe-akzent); color: var(--farbe-text); }

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

/* Absicherung: Ein Symbol ohne eigene Größenregel würde der Browser auf
   300×150 Pixel aufblasen. Ohne Gewicht (:where), damit jede gezielte Regel
   wie .ikon-link svg weiterhin gilt. */
:where(svg[aria-hidden="true"]:not([width])) { width: 1em; height: 1em; }

/* ---------- Buttons & Formulare ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.4;
    padding: 7px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font-size: var(--schrift-groesse-klein);
    cursor: pointer;
    font-family: var(--schrift-grotesk);
}
.btn:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); text-decoration: none; }
.btn--primaer { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-akzent-text); }
.btn--primaer:hover { opacity: .9; color: var(--farbe-akzent-text); }
.btn--gefahr { border-color: var(--farbe-status-rot); color: var(--farbe-status-rot); }
.btn--gefahr:hover { background: var(--farbe-status-rot); color: #fff; }
.btn--klein { padding: 3px 10px; font-size: 12px; gap: 5px; }
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn--klein svg { width: 12px; height: 12px; }
/* Hervorgehoben, aber ohne Füllung – für Aktionen, die nicht dominieren sollen. */
.btn--akzent { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.btn--akzent:hover { background: color-mix(in srgb, var(--farbe-akzent) 8%, var(--farbe-flaeche)); }

label { display: block; font-size: var(--schrift-groesse-klein); color: var(--farbe-text-sekundaer); margin-bottom: 2px; }
input[type=text], input[type=search], input[type=password], input[type=email], input[type=number], input[type=file], select, textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font-family: var(--schrift-grotesk);
    font-size: var(--schrift-groesse-basis);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.feld { margin-bottom: var(--abstand-m); }
.feldreihe { display: flex; gap: var(--abstand-m); flex-wrap: wrap; }
.feldreihe .feld { flex: 1; min-width: 160px; }

fieldset { border: 1px solid var(--farbe-linie); border-radius: var(--radius); padding: var(--abstand-m); }
legend { font-family: var(--schrift-serif); font-style: italic; padding: 0 var(--abstand-s); }

/* ---------- Werkstatt: dichte Tabellenliste ---------- */

.werkstatt-leiste { display: flex; gap: var(--abstand-m); align-items: flex-end; margin-bottom: var(--abstand-m); flex-wrap: wrap; }
.werkstatt-leiste .feld { margin-bottom: 0; min-width: 220px; }

table.werkliste { width: 100%; border-collapse: collapse; background: var(--farbe-flaeche); }
table.werkliste th {
    text-align: left;
    font-size: inherit;
    color: var(--farbe-text-sekundaer);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: var(--abstand-s) var(--abstand-s);
    border-bottom: 1px solid var(--farbe-linie);
}
table.werkliste td {
    padding: 6px var(--abstand-s);
    border-bottom: 1px solid var(--farbe-linie);
    vertical-align: middle;
}
table.werkliste tr:hover td { background: color-mix(in srgb, var(--farbe-akzent) 5%, transparent); }
table.werkliste tfoot td { border-top: 2px solid var(--farbe-linie); border-bottom: none; }
table.werkliste .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.werkliste img.thumb { width: var(--thumb-groesse); height: var(--thumb-groesse); object-fit: cover; border: 1px solid var(--farbe-linie); }
table.werkliste .platzhalter-thumb { width: var(--thumb-groesse); height: var(--thumb-groesse); border: 1px dashed var(--farbe-linie); display: inline-block; }
table.werkliste .platzhalter-thumb--aktiv {
    background: none;
    color: var(--farbe-text-sekundaer);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
table.werkliste .platzhalter-thumb--aktiv:hover,
table.werkliste .platzhalter-thumb--aktiv:focus-visible { border-color: var(--farbe-akzent); border-style: solid; color: var(--farbe-akzent); }

.status-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.status-punkt--rot { background: var(--farbe-status-rot); }
.status-punkt--orange { background: var(--farbe-status-orange); }
.status-punkt--gruen { background: var(--farbe-status-gruen); }

table.werkliste th a { color: inherit; }
table.werkliste th a.sortiert { color: var(--farbe-akzent); }

.seiten-nav { display: flex; gap: var(--abstand-s); margin-top: var(--abstand-m); align-items: center; font-size: var(--schrift-groesse-klein); }
.auswahl-leiste { position: sticky; bottom: 0; background: var(--farbe-flaeche); border-top: 1px solid var(--farbe-linie); box-shadow: 0 -2px 8px rgb(0 0 0 / .04); padding: var(--abstand-s) var(--abstand-m); display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-s); flex-wrap: wrap; margin-top: var(--abstand-m); font-size: var(--schrift-groesse-klein); }
.auswahl-leiste form, .toolbar-aktionen form { margin: 0; }
.treffer-auswahl { display: flex; gap: var(--abstand-s); flex-wrap: wrap; align-items: center; margin-bottom: var(--abstand-s); }

/* ---------- Vitrine: großformatige Betrachtung ---------- */

.vitrine-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--abstand-l); }
.vitrine-karte { background: var(--farbe-flaeche); color: inherit; text-decoration: none; display: block; }
.vitrine-karte:hover { text-decoration: none; }
.vitrine-karte:hover .titel { text-decoration: underline; }
.passepartout {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    padding: var(--abstand-m);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.passepartout img { max-width: 100%; max-height: 100%; object-fit: contain; }
.passepartout--leer { color: var(--farbe-text-sekundaer); font-size: var(--schrift-groesse-klein); }

.werk-etikett { margin-top: var(--abstand-s); text-align: center; }
.werk-etikett .maler { font-variant: small-caps; letter-spacing: .03em; font-size: var(--schrift-groesse-klein); }
.werk-etikett .titel { font-family: var(--schrift-serif); font-style: italic; font-size: 1.15rem; margin: 2px 0; }
.werk-etikett .meta { font-size: 12px; color: var(--farbe-text-sekundaer); }

.vitrine-detail { display: flex; gap: var(--abstand-xl); align-items: flex-start; flex-wrap: wrap; }
.vitrine-detail .passepartout { flex: 1 1 420px; aspect-ratio: auto; min-height: 340px; }
.vitrine-detail .werk-etikett { flex: 1 1 280px; text-align: left; margin-top: 0; }
.vitrine-detail .werk-etikett .titel { font-size: var(--schrift-groesse-titel-vitrine); }

.galerie-streifen { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }
.galerie-streifen__thumb.passepartout { width: 100px; height: 75px; flex-shrink: 0; aspect-ratio: auto; text-decoration: none; }
.galerie-streifen__thumb.passepartout:hover { opacity: .85; }

.thumb-wrapper { position: relative; display: inline-block; }
.bild-anzahl-badge { position: absolute; bottom: 2px; right: 2px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; line-height: 1.4; pointer-events: none; }
.vitrine-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--abstand-m); margin-top: var(--abstand-l); }
.vitrine-detail dt { color: var(--farbe-text-sekundaer); }
.vitrine-detail dd { margin: 0; }

/* ---------- Karten (Gruppen, Backups, Benutzer) ---------- */

table.liste { width: 100%; border-collapse: collapse; background: var(--farbe-flaeche); }
table.liste th { text-align: left; font-size: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-text-sekundaer); padding: var(--abstand-s); border-bottom: 1px solid var(--farbe-linie); }
table.liste td { padding: var(--abstand-s); border-bottom: 1px solid var(--farbe-linie); }
table.liste .aktionen { display: flex; gap: var(--abstand-s); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; border: 1px solid var(--farbe-linie); color: var(--farbe-text-sekundaer); }
.badge--admin { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.badge--gesperrt { border-color: var(--farbe-status-rot); color: var(--farbe-status-rot); }

.karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); padding: var(--abstand-l); }
.karte + .karte { margin-top: var(--abstand-m); }

/* ---------- Login ---------- */

.login-seite { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); padding: var(--abstand-xl); width: 340px; }
.login-karte h1 { font-family: var(--schrift-serif); font-style: italic; text-align: center; }

/* ---------- Reiter, aufklappbare Formulare ---------- */

.reiter { display: flex; gap: var(--abstand-l); border-bottom: 1px solid var(--farbe-linie); margin-bottom: var(--abstand-l); flex-wrap: wrap; }
.reiter a { color: var(--farbe-text-sekundaer); padding: var(--abstand-s) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a.aktiv { color: var(--farbe-text); border-bottom-color: var(--farbe-akzent); }
.reiter a:hover { text-decoration: none; color: var(--farbe-akzent); }

details.aufklappen summary { cursor: pointer; list-style: none; }
details.aufklappen summary::-webkit-details-marker { display: none; }
details.aufklappen[open] summary { margin-bottom: var(--abstand-s); }
details.aufklappen form { display: flex; gap: var(--abstand-s); align-items: center; }

.gruppenname { font-family: var(--schrift-serif); font-style: italic; }

/* Abmelden ist ein Formular (POST), sieht aber wie ein Link aus. */
.link-button { background: none; border: none; padding: 0; color: var(--farbe-akzent); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.checkliste { display: flex; flex-wrap: wrap; gap: var(--abstand-s) var(--abstand-l); }
.checkliste label { display: inline-flex; align-items: center; gap: 6px; color: var(--farbe-text); font-size: var(--schrift-groesse-basis); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--abstand-m); }
.kennzahlen .karte strong { font-size: 1.5rem; display: block; }

.warnung-liste li { margin-bottom: var(--abstand-xs); }
.status-ok { color: var(--farbe-status-gruen); }
.status-schlecht { color: var(--farbe-status-rot); font-weight: 600; }

code { font-size: .9em; background: color-mix(in srgb, var(--farbe-text) 7%, transparent); padding: 1px 4px; border-radius: var(--radius); }

/* ---------- Bearbeiten & Dialog ---------- */

.bearbeiten-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--abstand-m); align-items: start; }
.bearbeiten-raster .karte + .karte { margin-top: 0; }

.bild-liste { display: flex; flex-direction: column; gap: var(--abstand-m); }
.bild-karte { display: flex; gap: var(--abstand-m); align-items: flex-start; padding-bottom: var(--abstand-m); border-bottom: 1px solid var(--farbe-linie); }
.bild-karte:last-child { border-bottom: 0; padding-bottom: 0; }
.bild-karte .passepartout.bild-karte__vorschau { width: 100px; height: 80px; flex-shrink: 0; aspect-ratio: auto; }
.bild-karte__meta { flex: 1; min-width: 0; }
.bild-karte__reihenfolge { display: flex; flex-direction: column; gap: var(--abstand-xs); flex-shrink: 0; }

.dialog {
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    padding: var(--abstand-l);
    width: min(480px, calc(100vw - 32px));
}
.dialog::backdrop { background: rgb(0 0 0 / .35); }

/* ---------- Icon-Elemente ---------- */

svg { fill: currentColor; }

.ikon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--farbe-text-sekundaer);
    border-radius: var(--radius);
    flex-shrink: 0;
}
.ikon-link:hover { color: var(--farbe-akzent); background: color-mix(in srgb, var(--farbe-akzent) 8%, transparent); text-decoration: none; }
.ikon-link svg { width: 14px; height: 14px; pointer-events: none; }
.ikon-link--gefahr:hover { color: var(--farbe-status-rot); background: color-mix(in srgb, var(--farbe-status-rot) 8%, transparent); }

/* ---------- Sonstiges ---------- */

.text-sekundaer { color: var(--farbe-text-sekundaer); }
.text-klein { font-size: var(--schrift-groesse-klein); }
.mt-m { margin-top: var(--abstand-m); }
.mt-l { margin-top: var(--abstand-l); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--abstand-m); gap: var(--abstand-m); flex-wrap: wrap; }
.toolbar-aktionen { display: flex; gap: var(--abstand-s); flex-wrap: wrap; }

@media (max-width: 720px) {
    .kopf { flex-wrap: wrap; gap: var(--abstand-s); }
    .nav-hamburger { display: inline-flex; }
    .nav-inhalt { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; order: 10; }
    .nav-inhalt.nav-inhalt--offen { display: flex; }
    .nav { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
    .nav__link { padding: 10px 0; width: 100%; }
    .nav-klappe { width: 100%; }
    .nav-klappe__inhalt { position: static; box-shadow: none; border: none; border-left: 2px solid var(--farbe-linie); margin-left: var(--abstand-m); padding: 0; }
    .nav-klappe--benutzer { width: 100%; border-top: 1px solid var(--farbe-linie); margin-top: var(--abstand-s); padding-top: var(--abstand-s); }
    table.werkliste thead { display: none; }
    table.werkliste tr { display: block; border-bottom: 2px solid var(--farbe-linie); padding: var(--abstand-s) 0; }
    table.werkliste td { display: flex; justify-content: space-between; border-bottom: none; padding: 2px var(--abstand-s); }
    table.werkliste td::before { content: attr(data-label); color: var(--farbe-text-sekundaer); font-size: 12px; margin-right: var(--abstand-s); }
    .vitrine-detail { flex-direction: column; }
    .auswahl-leiste { padding: var(--abstand-s); font-size: var(--schrift-groesse-klein); }
    .auswahl-leiste .btn { padding: 5px 10px; }
    table.liste .aktionen { flex-wrap: wrap; }
    .bearbeiten-raster { grid-template-columns: 1fr; }
    .bild-karte { flex-wrap: wrap; }

    .bild-karte .passepartout.bild-karte__vorschau { width: 80px; height: 60px; }
}