:root {
    --blau: #1f4e79;
    --hell: #eef3f8;
    --rand: #c8d3df;
    --gruen: #a8dc9c;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Calibri, Arial, sans-serif; font-size: 17px; background: #f5f7fa; color: #000; }
small { font-size: .85em; }
.kopf { background: var(--blau); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
.kopf .hinweis { color: #c9d8e8; margin-left: 8px; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; vertical-align: middle; }
.marke img { background: #fff; border-radius: 6px; padding: 2px; }
.login-logo { display: block; margin: 8px 0 4px; }
.abmelden { display: flex; gap: 10px; align-items: center; }
.menue { background: #fff; border-bottom: 1px solid var(--rand); display: flex; flex-wrap: wrap; padding: 0 16px; }
.menue a { padding: 10px 14px; color: var(--blau); text-decoration: none; border-bottom: 3px solid transparent; }
.menue a[aria-current="page"] { border-bottom-color: var(--blau); font-weight: bold; }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; color: var(--blau); margin: 4px 0 14px; }
a { color: var(--blau); }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
.schmal { max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.schmal label { display: flex; flex-direction: column; gap: 4px; }
.zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.zeile label { display: flex; flex-direction: column; gap: 2px; }
input, select, button { font: inherit; padding: 5px 8px; border: 1px solid var(--rand); border-radius: 4px; }
button { background: var(--blau); color: #fff; border-color: var(--blau); cursor: pointer; }
button:hover { filter: brightness(1.15); }
.kopf button { background: transparent; border-color: #fff; }
.tabelle { overflow-x: auto; background: #fff; }
table { border-collapse: collapse; width: 100%; }
th { background: var(--blau); color: #fff; font-weight: bold; text-align: center; padding: 6px 8px; }
td { border-bottom: 1px solid var(--rand); padding: 4px 8px; vertical-align: middle; }
tbody tr:nth-child(even) { background: var(--hell); }
input.zahl { width: 7em; text-align: right; }
input.lot { width: 6em; }
td.zahl, td.usd, td.preis { text-align: right; white-space: nowrap; }
td.preis small { color: #000; }
/* Veraltet: schwarze Schrift auf grauem Grund, kursiv */
td.veraltet { background: #e2e2e2; font-style: italic; }
td.billig { background: var(--gruen); font-weight: bold; }
td.leer { text-align: center; color: #000; }
.alt { color: #000; }
::placeholder { color: #000; opacity: 1; }
.erfolg { background: #e2f3df; border: 1px solid #9ccf93; padding: 8px 12px; border-radius: 4px; }
.meldung { background: #fbe3e3; border: 1px solid #e3a0a0; padding: 8px 12px; border-radius: 4px; }
.hinweis { color: #000; font-size: .95rem; }
.orte-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.orte-knoepfe button { background: #fff; color: var(--blau); padding: 8px 16px; font-weight: bold; }
.orte-knoepfe button:hover, .orte-knoepfe button[aria-current] { background: var(--blau); color: #fff; }

/* Handy: große Tippflächen, Tabellen mit class="karten" werden zu Karten je Zeile */
@media (max-width: 640px) {
    body { font-size: 16px; }
    input, select, button { font-size: 16px; padding: 8px 10px; }
    .kopf { padding: 8px 12px; }
    .kopf .hinweis { display: none; }
    .menue { padding: 0; }
    .menue a { flex: 1; text-align: center; padding: 12px 4px; }
    main { padding: 10px; }
    h1 { font-size: 1.2rem; }
    .karte { padding: 10px; }
    .zeile { flex-direction: column; align-items: stretch; }
    .zeile button { width: 100%; }
    .schmal { max-width: none; }
    .orte-knoepfe { display: grid; grid-template-columns: 1fr 1fr; }
    .orte-knoepfe span { grid-column: 1 / -1; }
    .orte-knoepfe button { padding: 12px; }
    #preisform > p > button { width: 100%; padding: 12px; }
    .tabelle { background: transparent; }
    table.karten, table.karten tbody { display: block; }
    table.karten thead { display: none; }
    table.karten tr { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
    table.karten tbody tr:nth-child(even) { background: #fff; }
    table.karten td { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--hell); text-align: right; padding: 6px 10px; }
    table.karten td::before { content: attr(data-label); font-weight: bold; color: #000; text-align: left; }
    table.karten td.titel { order: -1; background: var(--blau); color: #fff; font-weight: bold; text-align: left; }
    table.karten td.titel::before { content: none; }
    table.karten td input { width: 10em; }
}
.umschalter { display: inline-flex; border: 1px solid var(--blau); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.umschalter a { padding: 8px 16px; color: var(--blau); text-decoration: none; background: #fff; }
.umschalter a + a { border-left: 1px solid var(--blau); }
.umschalter a[aria-current] { background: var(--blau); color: #fff; font-weight: bold; }
@media (max-width: 640px) {
    .umschalter { display: flex; }
    .umschalter a { flex: 1; text-align: center; padding: 12px 4px; }
}

/* Artikelgruppen zum Auf- und Zuklappen */
.gruppen-knoepfe { display: flex; gap: 8px; margin: 0 0 10px; }
.gruppen-knoepfe button { background: #fff; color: var(--blau); }
details.gruppe { background: #fff; border: 1px solid var(--rand); border-radius: 6px; margin-bottom: 8px; }
details.gruppe > summary { cursor: pointer; padding: 10px 14px; font-weight: bold; color: var(--blau); list-style: none; display: flex; align-items: baseline; gap: 8px; }
details.gruppe > summary::-webkit-details-marker { display: none; }
details.gruppe > summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
details.gruppe[open] > summary::before { transform: rotate(90deg); }
details.gruppe > summary small { font-weight: normal; color: #000; }
details.gruppe > summary .gefuellt { color: #2c7a1f; font-weight: bold; }
details.gruppe[open] > summary { border-bottom: 1px solid var(--rand); }
/* Gleiche Spaltenbreiten in allen Gruppen */
details.gruppe table, #ensemble table { table-layout: fixed; }
th.sp-code { width: 6em; }
th.sp-unite { width: 9em; }
th.sp-ort { width: 7.5em; }
th.sp-fc { width: 10em; }
th.sp-taux { width: 6.5em; }
th.sp-usd { width: 10em; }
th.sp-lot { width: 7em; }
details.gruppe td { overflow-wrap: anywhere; }
.gruppen-verwaltung > summary { cursor: pointer; font-weight: bold; color: var(--blau); }
.gruppen-verwaltung form { margin: 10px 0; }
.gruppen-liste { margin: 0; padding-left: 18px; columns: 2; }
.gruppen-liste small { color: #000; }

/* Activité */
h2 { font-size: 1.15rem; color: var(--blau); margin: 18px 0 10px; }
.monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.monate .karte { margin: 0; }
.monat h3 { margin: 0 0 6px; font-size: 1rem; }
.monat h3 small { color: #000; font-weight: normal; }
.monat.gewaehlt { border-color: var(--blau); box-shadow: inset 4px 0 0 var(--blau); }
.monat ul { list-style: none; margin: 0; padding: 0; }
.monat li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--hell); }

@media (max-width: 640px) {
    .gruppen-knoepfe button { flex: 1; padding: 10px; }
    details.gruppe { background: transparent; border: none; }
    details.gruppe > summary { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 14px 12px; font-size: 1.05rem; }
    details.gruppe[open] > summary { margin-bottom: 8px; }
    details.gruppe table, #ensemble table { table-layout: auto; }
    .gruppen-liste { columns: 1; }
    .monate { grid-template-columns: 1fr; }
    .monat li { padding: 8px 0; }
}

/* Erfassung: schmale Spalten, Knopf je Zeile, dahinter Datum und Erfasser */
table.erfassung { width: auto; }
th.sp-article { width: 12em; }
table.erfassung th.sp-code { width: 5.5em; }
table.erfassung th.sp-unite { width: 5.5em; }
table.erfassung th.sp-fc { width: 8em; }
table.erfassung th.sp-taux { width: 6em; }
table.erfassung th.sp-usd { width: 5.5em; }
table.erfassung th.sp-lot { width: 9.5em; }
th.sp-ok { width: 9.5em; }
table.erfassung input.zahl { width: 100%; }
table.erfassung input.lot { width: 100%; }
td.ok { white-space: nowrap; }
td.ok > * { vertical-align: middle; }
button.eintragen { padding: 2px 10px; }
button.eintragen:disabled { background: #ddd; color: #000; border-color: #aaa; cursor: default; filter: none; }
.wer { display: inline-block; font-size: .75rem; line-height: 1.05; margin-left: 6px; text-align: left; }
input.geaendert { background: #fff6c8; font-weight: bold; }
tr.gespeichert td { background: var(--gruen); }
@media (max-width: 640px) {
    table.erfassung { width: 100%; }
    table.erfassung input.zahl, table.erfassung input.lot { width: 10em; }
    button.eintragen { padding: 10px 22px; }
    .wer { font-size: .85rem; }
}

/* Verkauf grünlich, Einkauf rosa: Umschalter und jede zweite Zeile */
.umschalter a.art-vente { background: #e3f3de; color: #000; }
.umschalter a.art-achat { background: #fbe1ea; color: #000; }
.umschalter a.art-vente[aria-current] { background: #9fd393; color: #000; }
.umschalter a.art-achat[aria-current] { background: #f2a9c2; color: #000; }
.art-vente tbody tr:nth-child(even) { background: #e3f3de; }
.art-achat tbody tr:nth-child(even) { background: #fbe1ea; }
@media (max-width: 640px) {
    .art-vente table.karten tbody tr:nth-child(even) { background: #e3f3de; }
    .art-achat table.karten tbody tr:nth-child(even) { background: #fbe1ea; }
}

/* Gewinnrechner */
td.plus, .summe .plus strong { background: var(--gruen); }
td.minus, .summe .minus strong { background: #f4b4b4; }
td.plus, td.minus { font-weight: bold; }
.waehrung { margin: 0; align-self: flex-end; }
.waehrung button { background: #fff; color: #000; border: none; border-radius: 0; padding: 5px 14px; }
.waehrung button + button { border-left: 1px solid var(--blau); }
.waehrung button[aria-pressed="true"] { background: var(--blau); color: #fff; font-weight: bold; }
.summe { display: grid; gap: 4px; max-width: 520px; }
.summe p { margin: 0; }
.summe div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--hell); padding: 3px 0; }
.summe strong { padding: 0 6px; border-radius: 3px; white-space: nowrap; }
.summe .ergebnis { font-size: 1.15em; border-bottom: none; }
table.gewinn input.menge { width: 5em; }
@media (max-width: 640px) {
    .waehrung { display: flex; }
    .waehrung button { flex: 1; padding: 12px; }
    table.gewinn input.menge { width: 8em; }
    .summe { max-width: none; }
}

/* Umschalter Par groupe / Ensemble neben den Klapp-Knöpfen */
.gruppen-knoepfe { flex-wrap: wrap; }
.gruppen-knoepfe button:disabled { background: #ddd; color: #000; border-color: #aaa; cursor: default; }
.ansicht { margin: 0; }
.ansicht button { background: #fff; color: #000; border: none; border-radius: 0; }
.ansicht button + button { border-left: 1px solid var(--blau); }
.ansicht button[aria-pressed="true"] { background: var(--blau); color: #fff; font-weight: bold; }
@media (max-width: 640px) {
    .ansicht { display: flex; flex-basis: 100%; }
    .ansicht button { flex: 1; padding: 10px; }
}

/* Profit: kompakte Spalten, Beträge in einer Währung */
table.gewinn th.sp-article { width: 11em; }
table.gewinn th.sp-lot { width: 7em; }
th.sp-betrag { width: 6em; }
th.sp-marge, th.sp-lots, th.sp-pcs { width: 4em; }
table.gewinn th { padding: 4px; font-size: .9em; }
table.gewinn td { padding: 3px 5px; }
table.gewinn td.lot { font-size: .9em; }
table.gewinn input.lots { width: 100%; }
table.gewinn small.code { font-size: .75em; white-space: nowrap; }
@media (max-width: 640px) {
    table.gewinn input.lots { width: 6em; }
    table.gewinn td.lot { font-size: 1em; }
    table.gewinn td.titel { display: block; }
}

/* Statusfeld #meldung der client-first Seiten: info, ok oder warnung; leer unsichtbar */
#meldung { margin-bottom: 12px; }
#meldung:empty { display: none; }
.meldung.info { background: var(--hell); border-color: var(--rand); }
.meldung.ok { background: #e2f3df; border-color: #9ccf93; }
/* Vorgemerkt, aber noch nicht an den Server gesendet */
tr.wartet .wer { font-style: italic; color: #8a4b00; }