/* Eigene, lokal ausgelieferte Stile: kein CDN, keine Google Fonts,
   damit beim Aufruf keine Daten an Dritte gehen. */

:root {
    --farbe-text: #1a1d21;
    --farbe-gedimmt: #5b6670;
    --farbe-primaer: #0302f9;        /* Blau des Firmenlogos */
    --farbe-primaer-dunkel: #0201bd;
    --farbe-linie: #d6dde3;
    --farbe-flaeche: #ffffff;
    --farbe-hintergrund: #f4f6f8;
    --farbe-fehler: #b3261e;

    /* Gedaempfte Flaechen trennen die Abschnitte. Die Temperatur sagt, was
       ein Abschnitt vom Leser will: kuehles Grau zum Ausfuellen, warmes Grau
       zum Lesen. Die Signalfarbe bleibt den Bedienelementen vorbehalten. */
    --flaeche-ruhig: #f6f7f9;
    --flaeche-tief: #eaedf2;
    --flaeche-lesen: #f4f2ed;
    --linie-leise: #e3e7ec;
    --radius: 6px;
    --spalte: 72rem;
    --spalte-breit: 90rem;   /* Verwaltung: Tabellen brauchen Platz */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

/* Das Logo bringt seinen blauen Grund selbst mit und steht deshalb auf Weiss.
   Die Leiste selbst laeuft ueber die ganze Fensterbreite, ihr Inhalt steht in
   einer Flucht mit dem Inhalt darunter: dieselbe Hoechstbreite, dieselbe
   Polsterung links und rechts. Die Polsterung sitzt deshalb innen. */
.kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-linie);
}
.kopf__innen {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

.kopf__logo { display: inline-block; text-decoration: none; }

.inhalt {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
    background: var(--farbe-flaeche);
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.75rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }

.fuehrung { color: var(--farbe-gedimmt); max-width: 46rem; }

.schritte { max-width: 46rem; padding-left: 1.25rem; }
.schritte li { margin-bottom: 0.35rem; }

.knopf {
    display: inline-block;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.knopf:hover { border-color: var(--farbe-gedimmt); }

.knopf--primaer {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
}

.knopf--primaer:hover { background: var(--farbe-primaer-dunkel); }

.knopf:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

.hinweis {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--flaeche-lesen);
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    font-size: 0.925rem;
    color: var(--farbe-gedimmt);
    max-width: 46rem;
}

.hinweis h2 { margin-top: 0; font-size: 1rem; color: var(--farbe-text); }

.fuss {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 1.25rem;
    font-size: 0.875rem;
}

.fuss__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.fuss__links a { color: var(--farbe-gedimmt); }

@media (max-width: 640px) {
    .inhalt { padding: 1.25rem 1rem 2.5rem; }
    h1 { font-size: 1.35rem; }
}

/* --------------------------------------------------------------------------
   Formularstrecke
   -------------------------------------------------------------------------- */

.sprungmarke {
    position: absolute;
    left: -9999px;
    background: var(--farbe-primaer);
    color: #fff;
    padding: 0.6rem 1rem;
    z-index: 10;
}
.sprungmarke:focus { left: 0; top: 0; }

.kopf__logo img { display: block; height: auto; max-width: 260px; }

/* Fortschritt */
.fortschritt {
    margin: 0 0 1.5rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--linie-leise);
}
.fortschritt ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
}
.fortschritt__schritt { display: flex; align-items: center; gap: 0.45rem; color: var(--farbe-gedimmt); }
.fortschritt__nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
    font-size: 0.8rem;
    font-weight: 700;
}
.fortschritt__schritt--aktiv { color: var(--farbe-text); font-weight: 600; }

/* Erledigte Schritte sind anklickbar und muessen das auch aussehen. */
.fortschritt__verweis {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--farbe-primaer);
    text-decoration: none;
    border-radius: var(--radius);
}
.fortschritt__verweis:hover .fortschritt__name { text-decoration: underline; }
.fortschritt__verweis:hover .fortschritt__nummer { background: var(--farbe-primaer); color: #fff; }
.fortschritt__schritt--aktiv .fortschritt__nummer {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
}
.fortschritt__schritt--erledigt .fortschritt__nummer {
    background: #e8e8fe;
    border-color: var(--farbe-primaer);
    color: var(--farbe-primaer);
}

/* Meldungen */
.meldung {
    padding: 0.7rem 1rem;
    border-left: 4px solid var(--farbe-primaer);
    background: var(--flaeche-ruhig);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.fehlerkasten {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--farbe-fehler);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: #fdf2f1;
    margin-bottom: 1.25rem;
}
.fehlerkasten h2 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--farbe-fehler); }
.fehlerkasten ul { margin: 0; padding-left: 1.1rem; }
.fehlerkasten p { margin: 0; }

/* Formular */
.formular { margin: 0 0 1.5rem; }
/* Abschnitt zum Ausfuellen: gedaempfte Flaeche, die Eingabefelder bleiben
   weiss und heben sich dadurch ohne zusaetzliche Linien ab. */
.formular--abschnitt {
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    background: var(--flaeche-ruhig);
    padding: 1.15rem 1.15rem 0.5rem;
}
.formular--abschnitt fieldset { background: none; border: 0; padding: 0; }
.formular fieldset {
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    background: var(--flaeche-ruhig);
    padding: 1.15rem 1.15rem 0.5rem;
    margin: 0 0 1.25rem;
}
.formular legend {
    padding: 0 0.45rem;
    margin-left: -0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--farbe-gedimmt);
}

.feldgruppe { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.feld { flex: 1 1 18rem; margin: 0 0 1rem; }
.feld--schmal { flex: 0 1 11rem; }
.feld--kasten { flex-basis: 100%; }

.feld label { display: block; font-weight: 600; font-size: 0.925rem; margin-bottom: 0.25rem; }
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="password"],
.feld input:not([type]),
.feld select,
.feld textarea {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    font: inherit;
    color: inherit;
}
.feld textarea { resize: vertical; }
.feld [aria-invalid="true"] { border-color: var(--farbe-fehler); }
.feld input[type="file"] { font: inherit; }

.hinweistext { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--farbe-gedimmt); }
.pflichthinweis { font-size: 0.875rem; color: var(--farbe-gedimmt); }
.ankreuz { font-weight: 400 !important; display: flex; gap: 0.5rem; align-items: baseline; }

abbr[title] { color: var(--farbe-fehler); text-decoration: none; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
/* Eine Knopfzeile hat unten bewusst keinen Abstand — meist ist sie das letzte
   Element in einem Kasten. Steht aber ein Kasten darunter, stossen beide
   aneinander; dann braucht es eine Fuge. */
.knopfzeile + .kasten { margin-top: 1rem; }
.knopf--klein { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
.knopf--warnung { color: var(--farbe-fehler); }
.abschlusszeile { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--farbe-linie); }

/* Der Honigtopf darf fuer Menschen nicht sichtbar sein. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 0.925rem; }
.tabelle th, .tabelle td {
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--farbe-linie);
}
.tabelle thead th {
    background: var(--flaeche-tief);
    border-bottom-color: var(--farbe-linie);
    font-size: 0.85rem;
}
.tabelle tbody td { border-bottom-color: var(--linie-leise); }
.tabelle .aktionen form { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.gravur { white-space: pre-line; max-width: 18rem; }
.miniatur { display: block; max-width: 48px; height: auto; border: 1px solid var(--farbe-linie); border-radius: 3px; }
.klein { font-size: 0.825rem; color: var(--farbe-gedimmt); }

/* Kaesten */
.kasten {
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    background: var(--flaeche-lesen);
    padding: 1rem 1.15rem;
    margin: 0 0 1.25rem;
    overflow-wrap: anywhere;
}
.kasten--zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.kasten--zweispaltig h2, .kasten--zweispaltig h3 { margin-top: 0; font-size: 0.95rem; }
.kasten--erfolg { border-color: var(--farbe-primaer); background: #eeeeff; }
.referenz { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.06em; margin: 0.2rem 0; }

/* Emblemgalerie */
.galerie { margin: 0 0 1.25rem; }
.galerie summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }
.galerie__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0.5rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    background: var(--flaeche-tief);
}
.galerie__eintrag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--farbe-gedimmt);
}
.galerie__eintrag:hover { border-color: var(--farbe-primaer); }
.galerie__eintrag img { max-width: 56px; height: auto; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobil: Tabellen als Karten */
@media (max-width: 760px) {
    .kasten--zweispaltig { grid-template-columns: 1fr; }

    .tabelle thead { display: none; }
    .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
    .tabelle tr {
        border: 1px solid var(--farbe-linie);
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.5rem;
    }
    .tabelle td { border-bottom: 0; padding: 0.3rem 0.1rem; }
    .tabelle td[data-spalte]::before {
        content: attr(data-spalte) ": ";
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--farbe-gedimmt);
    }
    .gravur { max-width: none; }
}

/* --------------------------------------------------------------------------
   Verwaltung
   -------------------------------------------------------------------------- */

/* Die Verwaltung braucht mehr Breite als das Kundenformular: Tabellen mit
   Referenz, Anschrift, Positionen und Status. Der Kopf bekommt dieselbe
   Breite, sonst steht das Logo nicht in der Flucht des Inhalts. */
.verwaltung .inhalt,
.verwaltung .kopf__innen { max-width: var(--spalte-breit); }

.kopf--verwaltung .kopf__innen { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kopf__bereich {
    color: var(--farbe-gedimmt);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.schmalspalte { max-width: 26rem; }

/* Benutzermenue im Kopf: ein <details>, das sich nach unten aufklappt. */
.benutzermenue { position: relative; display: block; margin-left: auto; }
.benutzermenue > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    color: var(--farbe-text);
    font-size: 0.875rem;
    white-space: nowrap;
}
/* Der Standardpfeil von <details> sitzt links und sieht im Kopf falsch aus. */
.benutzermenue > summary::-webkit-details-marker { display: none; }
.benutzermenue > summary::after { content: " ▾"; color: var(--farbe-gedimmt); }
.benutzermenue[open] > summary::after { content: " ▴"; }
.benutzermenue > summary:hover { border-color: var(--farbe-gedimmt); }
.benutzermenue > summary:focus-visible {
    outline: 2px solid var(--farbe-primaer);
    outline-offset: 2px;
}
.benutzermenue__rolle { color: var(--farbe-gedimmt); }
.benutzermenue__blatt {
    position: absolute;
    right: 0;
    z-index: 20;
    min-width: 11rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    box-shadow: 0 6px 18px rgba(12, 16, 20, 0.12);
}
.benutzermenue__blatt a { padding: 0.25rem 0.1rem; }
.benutzermenue__blatt .knopf { width: 100%; justify-content: center; }

/* Angaben als Paare: Bezeichnung schmal, Wert daneben. */
.angaben { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0; }
.angaben dt { color: var(--farbe-gedimmt); }
.angaben dd { margin: 0; }

.filterleiste {
    border: 1px solid var(--linie-leise);
    border-radius: var(--radius);
    padding: 0.9rem 1rem 0.2rem;
    background: var(--flaeche-ruhig);
    margin-bottom: 1.25rem;
}
.filterleiste .feld { margin-bottom: 0.75rem; }
.filterleiste .knopfzeile { margin-top: 0.25rem; margin-bottom: 0.9rem; }

.marke {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
    white-space: nowrap;
}
.marke--neu { border-color: var(--farbe-primaer); background: #e8e8fe; color: var(--farbe-primaer-dunkel); }
.marke--in_bearbeitung { border-color: #b8860b; background: #fdf6e3; color: #7a5c00; }
.marke--erledigt { border-color: #2e7d32; background: #eef7ef; color: #2e7d32; }
.marke--archiviert { color: var(--farbe-gedimmt); }

.blaettern { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }

.qr { border: 1px solid var(--farbe-linie); border-radius: var(--radius); background: #fff; padding: 0.5rem; }
.geheimnis {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.4rem 0.6rem;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.1em;
}

/* Kundendateien in der Positionstabelle: Miniatur, Verweise, Lichtkasten
   -------------------------------------------------------------------------- */

.vorschau {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    padding: 2px;
    line-height: 0;
}
.vorschau img { max-width: 72px; max-height: 72px; border-radius: 3px; }
.vorschau:hover, .vorschau:focus-visible { border-color: var(--farbe-primaer); }

.datei { display: inline-block; vertical-align: middle; }
.datei .klein { display: block; }

.lichtkasten {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(12, 16, 20, 0.82);
}
.lichtkasten__rahmen {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
    max-height: 100%;
}
.lichtkasten__bild {
    max-width: 100%;
    /* Platz fuer die Leiste darunter, damit sie auf kleinen Geraeten nicht
       aus dem Bild geschoben wird. */
    max-height: calc(100vh - 7rem);
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
}
.lichtkasten__leiste {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: #fff;
}
.lichtkasten__name {
    flex: 1 1 12rem;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}