@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
    --flaeche:     #eef2f6;
    --karte:       #ffffff;
    --tinte:       #14202e;
    --gedaempft:   #5b6b7c;
    --linie:       #d5dee7;
    --primaer:     #1f4e78;   /* gleiche Farbe wie die Excel-Kopfzeile */
    --primaer-alt: #163a59;
    --gut:         #15803d;
    --schlecht:    #b42318;
    --rundung:     10px;
    --schrift:     'IBM Plex Sans', 'Segoe UI', Helvetica, sans-serif;
    --schrift-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--flaeche);
    color: var(--tinte);
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.55;
}

h1 { font-size: 1.25rem; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .35rem; font-weight: 600; }

/* ------------------------------------------------------------ Grundbausteine */

.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.15rem;
}

.karte-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.hinweis { color: var(--gedaempft); margin: .4rem 0 1rem; max-width: 62ch; }
.zart    { color: var(--gedaempft); font-weight: 400; }
.versteckt { display: none !important; }

label {
    display: block;
    margin: .9rem 0 0;
    font-weight: 500;
}

label.ankreuz {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 400;
}

input[type=text], input[type=password], input[type=number], input[type=search], select {
    width: 100%;
    margin-top: .3rem;
    padding: .55rem .7rem;
    border: 1px solid var(--linie);
    border-radius: 7px;
    font: inherit;
    background: #fbfcfd;
    color: inherit;
}

input[type=checkbox] { width: auto; margin: 0; }

input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--primaer);
    outline-offset: 1px;
}

button, .knopf {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border: 1px solid var(--linie);
    border-radius: 7px;
    background: var(--karte);
    color: var(--tinte);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

button:hover:not(:disabled), .knopf:hover { border-color: var(--gedaempft); }
button:disabled { opacity: .45; cursor: not-allowed; }

button.haupt, .knopf.haupt {
    background: var(--primaer);
    border-color: var(--primaer);
    color: #fff;
}
button.haupt:hover:not(:disabled), .knopf.haupt:hover { background: var(--primaer-alt); }

button.gefahr { color: var(--schlecht); }
button.gefahr:hover:not(:disabled) { border-color: var(--schlecht); }
button.still  { background: transparent; }

kbd {
    font-family: var(--schrift-mono);
    font-size: .72rem;
    padding: .1rem .3rem;
    border: 1px solid var(--linie);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--flaeche);
    color: var(--gedaempft);
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .75rem;
}

/* ------------------------------------------------------------------ Gerüst */

.kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: .85rem 1.5rem;
    background: var(--karte);
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 10;
}

.reiter { display: flex; gap: .3rem; margin-left: 1rem; }

.reiter-knopf {
    border: none;
    background: transparent;
    padding: .4rem .8rem;
    border-radius: 7px;
    color: var(--gedaempft);
}
.reiter-knopf:hover { background: var(--flaeche); }
.reiter-knopf.aktiv { background: var(--primaer); color: #fff; }

.abmelden { margin-left: auto; color: var(--gedaempft); text-decoration: none; font-size: .9rem; }
.abmelden:hover { color: var(--tinte); }

main { max-width: 1060px; margin: 0 auto; padding: 1.5rem; }

.ansicht { display: none; }
.ansicht.aktiv { display: block; }

body.mittig {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}
body.mittig .karte { width: min(100%, 27rem); margin: 0; }
body.mittig button[type=submit] { width: 100%; margin-top: 1.2rem; justify-content: center; }

/* ------------------------------------------------------------- Aufnehmen */

.vorschau-huelle {
    position: relative;
    margin-top: 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--rundung);
    overflow: hidden;
    background: #0d1620;
}

#vorschau { display: block; width: 100%; max-height: 380px; object-fit: contain; }

.puls {
    position: absolute;
    top: .7rem;
    left: .7rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(180, 35, 24, .92);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
}
.puls::before {
    content: '';
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: #fff;
    animation: pulsieren 1.4s ease-in-out infinite;
}
@keyframes pulsieren { 50% { opacity: .25; } }

.zaehlerreihe { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0 .25rem; }
.zaehler { color: var(--gedaempft); font-size: .92rem; }
.zaehler strong {
    display: block;
    font-family: var(--schrift-mono);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--tinte);
    line-height: 1.2;
}
.zaehler.fehler-ton strong { color: var(--schlecht); }

.fortschritt { margin-top: 1rem; }
.balken { height: 6px; border-radius: 999px; background: var(--flaeche); overflow: hidden; }
#balken-fuellung { height: 100%; width: 0; background: var(--primaer); transition: width .25s ease; }
#fortschritt-text { margin: .5rem 0 0; color: var(--gedaempft); font-size: .9rem; }

.protokoll {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
    font-family: var(--schrift-mono);
    font-size: .82rem;
}
.protokoll li {
    padding: .35rem .6rem;
    border-left: 3px solid var(--linie);
    margin-bottom: .2rem;
    background: #fbfcfd;
    color: var(--gedaempft);
}
.protokoll li.gut     { border-left-color: var(--gut); color: var(--tinte); }
.protokoll li.schlecht{ border-left-color: var(--schlecht); color: var(--schlecht); }

#ablegeflaeche.daraufziehen { border-color: var(--primaer); background: #f4f8fc; }

/* ------------------------------------------------------------ Datensätze */

.tabelle-huelle { overflow-x: auto; margin-top: 1rem; }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }

th {
    background: var(--primaer);
    color: #fff;
    font-weight: 500;
    text-align: left;
    padding: .5rem .7rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

td {
    padding: .45rem .7rem;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

tbody tr:hover { background: #f6f9fc; }

td.zeilen-aktion button {
    padding: .15rem .45rem;
    font-size: .78rem;
    border: none;
    background: transparent;
    color: var(--gedaempft);
}
td.zeilen-aktion button:hover { color: var(--schlecht); }

.leer { padding: 2.5rem 1rem; text-align: center; color: var(--gedaempft); }

/* --------------------------------------------------------- Einstellungen */

.feld-zeile { display: flex; gap: .5rem; margin-bottom: .45rem; align-items: center; }
.feld-zeile input { margin-top: 0; }
.feld-zeile button { padding: .45rem .6rem; color: var(--gedaempft); }
.feld-zeile button:hover { color: var(--schlecht); }

.speicherleiste { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.meldung { margin: .5rem 0; font-size: .9rem; }
.meldung.fehler { color: var(--schlecht); }
.meldung.erfolg { color: var(--gut); }
.meldung:empty { display: none; }

/* ------------------------------------------------------------------ Toast */

.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .65rem 1.2rem;
    border-radius: 8px;
    background: var(--tinte);
    color: #fff;
    font-size: .9rem;
    z-index: 50;
    box-shadow: 0 6px 24px rgba(20, 32, 46, .22);
}
.toast.schlecht { background: var(--schlecht); }

@media (max-width: 640px) {
    .kopf { padding: .75rem 1rem; }
    .reiter { margin-left: 0; width: 100%; order: 3; }
    main { padding: 1rem; }
    kbd { display: none; }
}