/* Bewusst schlicht: Der Dummy soll nach Werkzeug aussehen, nicht nach Produkt. */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #1a2733;
    background: #f4f6f8;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background: #123a5c;
    color: #fff;
}

header .marke { font-size: 1.15rem; font-weight: 600; }
header .marke small { font-weight: 400; opacity: 0.75; margin-left: 0.4rem; }
header .benutzer a { color: #bcd7ee; margin-left: 0.8rem; }

main { max-width: 60rem; margin: 0 auto; padding: 1.2rem; }

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

th, td { padding: 0.55rem 0.8rem; text-align: left; border-bottom: 1px solid #e3e8ed; }
th { background: #e9eef3; }

.zustand { padding: 0.15rem 0.55rem; border-radius: 0.75rem; font-size: 0.85rem; color: #fff; }
.zustand-produziert { background: #2e8b57; }
.zustand-ruestet { background: #d98e04; }
.zustand-stoerung { background: #c0392b; }

.fortschritt {
    display: inline-block;
    width: 8rem;
    height: 0.6rem;
    margin-right: 0.5rem;
    background: #e3e8ed;
    border-radius: 0.3rem;
    overflow: hidden;
    vertical-align: middle;
}

.fortschritt-balken { height: 100%; background: #2f6fa8; }

.kopfzeile .quelle { color: #6b7a88; font-size: 0.85rem; }

.login { max-width: 22rem; margin: 3rem auto; background: #fff; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.login label { display: block; margin-bottom: 0.8rem; }
.login input { display: block; width: 100%; padding: 0.4rem; margin-top: 0.2rem; }
.login button { padding: 0.45rem 1.2rem; background: #123a5c; color: #fff; border: none; cursor: pointer; }
.fehler { color: #c0392b; }