/*
   Brendel Corporate Design für BCS.
   Farben und Schrift stammen aus dem Briefbogen: Rot #CD0407, Grau #717070, Arial.
*/

:root {
    --bcs-rot: #CD0407;
    --bcs-rot-dunkel: #A30305;
    --bcs-rot-hell: #FDECEC;
    --bcs-grau: #717070;
    --bcs-grau-hell: #F3F3F3;
    --bcs-linie: #D8D8D8;
    --bcs-text: #1A1A1A;
    --bcs-gruen: #1D7A3E;
    --bcs-gruen-hell: #E8F5ED;
    --bcs-gelb: #8A6100;
    --bcs-gelb-hell: #FDF4E0;
    --bcs-radius: 6px;
    --bcs-schatten: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .05);
}

html, body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--bcs-text);
    background: #FFFFFF;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

h1, h2, h3, h4 { font-weight: bold; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }

a { color: var(--bcs-rot); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono {
    font-family: Consolas, "Courier New", monospace;
    font-size: .82rem;
    word-break: break-all;
}

/* ---------- Grundgerüst ---------- */

.bcs-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .9rem 2rem;
    border-bottom: 1px solid var(--bcs-linie);
    background: #FFFFFF;
}

.bcs-kopf img { height: 34px; }

.bcs-kopf .bcs-produkt {
    color: var(--bcs-grau);
    font-size: .82rem;
    border-left: 1px solid var(--bcs-linie);
    padding-left: 1rem;
    margin-left: .25rem;
}

.bcs-marke { display: flex; align-items: center; }

.bcs-nav { display: flex; gap: .35rem; }

.bcs-nav a {
    color: var(--bcs-text);
    padding: .4rem .85rem;
    border-radius: var(--bcs-radius);
    font-size: .9rem;
}

.bcs-nav a:hover { background: var(--bcs-grau-hell); text-decoration: none; }

.bcs-nav a.aktiv {
    background: var(--bcs-rot-hell);
    color: var(--bcs-rot);
    font-weight: bold;
}

.bcs-inhalt { max-width: 1160px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }
.bcs-inhalt.schmal { max-width: 820px; }

.bcs-fuss {
    border-top: 1px solid var(--bcs-linie);
    color: var(--bcs-grau);
    font-size: .78rem;
    padding: 1rem 2rem;
    text-align: center;
}

.bcs-untertitel { color: var(--bcs-grau); margin: 0 0 1.5rem; }

/* ---------- Karten ---------- */

.bcs-karte {
    border: 1px solid var(--bcs-linie);
    border-radius: var(--bcs-radius);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.1rem;
    background: #FFFFFF;
}

.bcs-karte > h2:first-child, .bcs-karte > h3:first-child { margin-top: 0; }

.bcs-karte-schritt { border-left: 3px solid var(--bcs-linie); }
.bcs-karte-schritt.aktiv { border-left-color: var(--bcs-rot); box-shadow: var(--bcs-schatten); }
.bcs-karte-schritt.erledigt { border-left-color: var(--bcs-gruen); }

.bcs-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 1.1rem; align-items: start; }

@media (max-width: 900px) {
    .bcs-raster { grid-template-columns: 1fr; }
    .bcs-kopf { flex-wrap: wrap; padding: .75rem 1rem; }
    .bcs-inhalt { padding: 1.25rem 1rem 3rem; }
}

/* ---------- Status ---------- */

.bcs-status {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: bold;
    white-space: nowrap;
}

.bcs-status.grau { background: var(--bcs-grau-hell); color: var(--bcs-grau); }
.bcs-status.rot { background: var(--bcs-rot-hell); color: var(--bcs-rot); }
.bcs-status.gruen { background: var(--bcs-gruen-hell); color: var(--bcs-gruen); }
.bcs-status.gelb { background: var(--bcs-gelb-hell); color: var(--bcs-gelb); }

/* ---------- Meldungen ---------- */

.bcs-meldung {
    border-radius: var(--bcs-radius);
    padding: .75rem 1rem;
    margin: 1rem 0;
    font-size: .9rem;
    border-left: 3px solid;
}

.bcs-meldung.fehler { background: var(--bcs-rot-hell); border-color: var(--bcs-rot); color: var(--bcs-rot-dunkel); }
.bcs-meldung.erfolg { background: var(--bcs-gruen-hell); border-color: var(--bcs-gruen); color: var(--bcs-gruen); }
.bcs-meldung.hinweis { background: var(--bcs-gelb-hell); border-color: var(--bcs-gelb); color: var(--bcs-gelb); }
.bcs-meldung.neutral { background: var(--bcs-grau-hell); border-color: var(--bcs-grau); color: var(--bcs-grau); }

/* ---------- Tabellen ---------- */

.bcs-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bcs-tabelle th {
    text-align: left;
    color: var(--bcs-grau);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--bcs-linie);
}
.bcs-tabelle td { padding: .6rem; border-bottom: 1px solid var(--bcs-grau-hell); vertical-align: top; }
.bcs-tabelle tr:last-child td { border-bottom: none; }
.bcs-tabelle tbody tr:hover { background: #FAFAFA; }

.bcs-angaben { width: 100%; font-size: .9rem; border-collapse: collapse; }
.bcs-angaben td { padding: .3rem 0; vertical-align: top; }
.bcs-angaben td:first-child { color: var(--bcs-grau); width: 40%; padding-right: 1rem; }

/* ---------- Schaltflächen ---------- */

.bcs-knopf {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--bcs-rot);
    background: var(--bcs-rot);
    color: #FFFFFF;
    border-radius: var(--bcs-radius);
    padding: .5rem 1.1rem;
    font-size: .92rem;
    font-family: inherit;
    cursor: pointer;
}

.bcs-knopf:hover { background: var(--bcs-rot-dunkel); border-color: var(--bcs-rot-dunkel); text-decoration: none; color: #FFFFFF; }
.bcs-knopf:disabled { opacity: .45; cursor: not-allowed; }

.bcs-knopf.zweit { background: #FFFFFF; color: var(--bcs-text); border-color: var(--bcs-linie); }
.bcs-knopf.zweit:hover { background: var(--bcs-grau-hell); color: var(--bcs-text); }

.bcs-knopf.gross { padding: .75rem 1.8rem; font-size: 1.02rem; }

.bcs-knopfzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* ---------- Formular ---------- */

.bcs-feld { margin-bottom: .9rem; }

.bcs-feld label {
    display: block;
    font-size: .82rem;
    color: var(--bcs-grau);
    margin-bottom: .25rem;
}

.bcs-feld input[type=text],
.bcs-feld input[type=email],
.bcs-feld textarea,
.bcs-feld select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--bcs-linie);
    border-radius: var(--bcs-radius);
    padding: .5rem .65rem;
    font-family: inherit;
    font-size: .95rem;
}

.bcs-feld input:focus, .bcs-feld textarea:focus, .bcs-feld select:focus {
    outline: none;
    border-color: var(--bcs-rot);
    box-shadow: 0 0 0 3px var(--bcs-rot-hell);
}

.bcs-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

@media (max-width: 600px) { .bcs-feldpaar { grid-template-columns: 1fr; } }

.bcs-zustimmung {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    background: var(--bcs-grau-hell);
    border-radius: var(--bcs-radius);
    padding: .9rem 1rem;
    font-size: .88rem;
    margin: 1rem 0;
}

.bcs-zustimmung input { margin-top: .2rem; width: 18px; height: 18px; flex: none; }

/* ---------- Dokumentvorschau und Feldplatzierung ---------- */

.bcs-seite {
    position: relative;
    display: block;
    margin: 0 auto 1rem;
    border: 1px solid var(--bcs-linie);
    box-shadow: var(--bcs-schatten);
    max-width: 100%;
    background: #FFFFFF;
}

.bcs-seite img { display: block; width: 100%; height: auto; }

.bcs-feldmarke {
    position: absolute;
    border: 2px dashed var(--bcs-rot);
    background: rgba(205, 4, 7, .07);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    color: var(--bcs-rot);
    font-weight: bold;
    pointer-events: none;
}

.bcs-feldmarke.intern { border-color: var(--bcs-grau); background: rgba(113, 112, 112, .08); color: var(--bcs-grau); }

.bcs-platzierung { cursor: crosshair; }

/* ---------- Unterschriftsfeld ---------- */

.bcs-unterschrift {
    border: 2px dashed var(--bcs-linie);
    border-radius: var(--bcs-radius);
    background: #FFFFFF;
    position: relative;
    touch-action: none;
}

.bcs-unterschrift.gefuellt { border-style: solid; border-color: var(--bcs-gruen); }
.bcs-unterschrift canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }

.bcs-unterschrift-hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bcs-grau);
    font-size: .9rem;
    pointer-events: none;
}

.bcs-unterschrift-leiste {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: var(--bcs-grau);
    margin-top: .4rem;
}

/* ---------- Prüfergebnis ---------- */

.bcs-pruef-kopf {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--bcs-radius);
    margin-bottom: 1.2rem;
}

.bcs-pruef-kopf.gut { background: var(--bcs-gruen-hell); color: var(--bcs-gruen); }
.bcs-pruef-kopf.schlecht { background: var(--bcs-rot-hell); color: var(--bcs-rot-dunkel); }
.bcs-pruef-kopf .zeichen { font-size: 2rem; line-height: 1; }
.bcs-pruef-kopf .text { font-size: 1.05rem; font-weight: bold; }

.bcs-pruefpunkt { display: flex; gap: .5rem; align-items: baseline; font-size: .88rem; padding: .2rem 0; }
.bcs-pruefpunkt .ja { color: var(--bcs-gruen); font-weight: bold; }
.bcs-pruefpunkt .nein { color: var(--bcs-rot); font-weight: bold; }
.bcs-pruefpunkt .egal { color: var(--bcs-grau); }

/* ---------- Schrittanzeige ---------- */

.bcs-schritte { display: flex; gap: .4rem; margin: 0 0 1.5rem; flex-wrap: wrap; }

.bcs-schritt {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .84rem;
    color: var(--bcs-grau);
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--bcs-grau-hell);
}

.bcs-schritt.aktiv { background: var(--bcs-rot-hell); color: var(--bcs-rot); font-weight: bold; }
.bcs-schritt.erledigt { background: var(--bcs-gruen-hell); color: var(--bcs-gruen); }

.bcs-leer { color: var(--bcs-grau); text-align: center; padding: 3rem 1rem; }

/* ---------- Angemeldeter Benutzer im Kopf ---------- */

.bcs-benutzer {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .85rem;
    color: var(--bcs-grau);
}

.bcs-benutzer .name {
    color: var(--bcs-text);
    font-weight: 600;
}

.bcs-benutzer a,
.bcs-abmelden {
    color: var(--bcs-grau);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.bcs-benutzer a:hover,
.bcs-abmelden:hover {
    color: var(--bcs-rot);
    text-decoration: underline;
}

/* ---------- Bearbeitungssperre ---------- */

.bcs-sperre {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bcs-gelb-hell);
    border-left: 3px solid var(--bcs-gelb);
    padding: .8rem 1rem;
    border-radius: var(--bcs-radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}

.bcs-sperre.eigene {
    background: var(--bcs-gruen-hell);
    border-left-color: var(--bcs-gruen);
}