/* Die bestehende Oberfläche verwendet dieselben Farben wie das Browser-Panel.
   Die Grundregeln für hell/dunkel und das mobile Navigationsmenü bleiben aktiv. */
:root[data-design], .design-vorschau[data-design] {
    --bg: var(--vm-bg);
    --bg-2: var(--vm-soft);
    --panel: var(--vm-surface);
    --panel-solid: var(--vm-surface);
    --card: var(--vm-surface);
    --surface: var(--vm-bg);
    --surface-2: var(--vm-surface);
    --surface-3: var(--vm-soft);
    --surface-side: var(--vm-surface);
    --surface-nav: var(--vm-surface);
    --surface-top: var(--vm-surface);
    --surface-top-mobil: var(--vm-surface);
    --surface-input: var(--vm-surface);
    --border: var(--vm-line);
    --border-strong: var(--vm-line);
    --cyan: var(--vm-accent);
    --blue: var(--vm-accent);
    --blue-text: var(--vm-accent);
    --orange: var(--vm-warn);
    --green: var(--vm-accent);
    --accent-rgb: var(--vm-accent-rgb);
    --text: var(--vm-ink);
    --text-strong: var(--vm-ink);
    --dark: var(--vm-ink);
    --muted: var(--vm-muted);
    --gray: var(--vm-muted);
    --placeholder: var(--vm-muted);
    --text-bright: var(--vm-ink);
    --stat-accent2-text: var(--vm-ink);
    --stat-success-text: var(--vm-ok);
    --success: var(--vm-ok);
    --warn: var(--vm-warn);
    --danger: var(--vm-error);
    --btn-bg: var(--vm-accent);
    --btn-border: var(--vm-accent);
    --btn-fg: var(--vm-on-accent);
    --btn-fg-hover: var(--vm-on-accent);
    --font-body: var(--vm-body);
    --font-head: var(--vm-heading);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --r-panel: var(--vm-radius);
    --r-md: var(--vm-radius);
    --glow-cyan: none;
    --glow-orange: none;
}
[data-design] :focus-visible { outline: 3px solid var(--vm-focus); outline-offset: 2px; }
.side-brand-text {
    color: var(--vm-ink); display: inline-flex; align-items: center; gap: 7px;
    font: 700 15px/1.3 var(--vm-body); letter-spacing: -.04em; text-transform: none;
}
.vm-logo, .tag-marke {
    display: inline-grid; place-items: center; flex: none; width: 31px; height: 31px;
    border-radius: var(--vm-radius); background: var(--vm-accent); color: var(--vm-on-accent);
}
.stilwahl {
    display: inline-flex; align-items: center; gap: 5px; margin: 0;
    color: var(--vm-muted); font: 600 12px/1.3 var(--vm-body); white-space: nowrap;
}
.stilwahl select {
    width: auto; margin: 0; min-height: 34px; padding: 4px 5px;
    border: 1px solid var(--vm-line); border-radius: var(--vm-radius);
    background: var(--vm-surface); color: var(--vm-ink); font: inherit; cursor: pointer;
}
.stil-feedback:empty { display: none; }
.stil-feedback { font-size: 12px; color: var(--vm-error); }
.arbeitstag { background: var(--vm-soft); border-color: var(--vm-line); border-radius: var(--vm-radius); }
.tag-innen h2 { font-family: var(--vm-heading); }
.tag-aktion, .tag-aktion:hover {
    background: var(--vm-accent); color: var(--vm-on-accent); border-radius: var(--vm-radius);
}
.tag-wege a { background: var(--vm-surface); border-radius: var(--vm-radius); }
.tag-konto { font-weight: 600; }
.bestandsblick { margin-top: 24px; }
.bestandsblick header { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 10px; }
.bestandsblick header small { color: var(--vm-muted); font-size: 12px; }
.bestandsblick h2 { margin: 3px 0 0; font: 600 clamp(22px, 2.4vw, 32px)/1.1 var(--vm-heading); letter-spacing: -.035em; }
.bestandsblick header a { flex: none; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.bestandsblick table { width: 100%; background: var(--vm-surface); color: var(--vm-ink); border-collapse: collapse; }
.bestandsblick th, .bestandsblick td { padding: 9px 12px; border-bottom: 1px solid var(--vm-line); text-align: left; }
.bestandsblick th { font: 650 12px var(--vm-body); color: var(--vm-muted); background: var(--vm-soft); }
.bestandsblick td { font: 400 14px var(--vm-body); }
.bestandsblick td small { display: block; color: var(--vm-muted); font-size: 12px; }
.bestandsblick td a { color: var(--vm-ink); font-weight: 650; }
.bestandsblick :is(td, th):last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bestands-status { display: inline-block; padding: 2px 8px; border-radius: 12px; color: var(--vm-ink); background: var(--vm-soft); font-size: 12px; }
.bestands-status[data-status="Entwurf"] { color: var(--vm-warn); background: var(--vm-warn-bg); }
.bestands-status[data-status="Verkauft"] { color: var(--vm-ok); background: var(--vm-ok-bg); }
html[data-design="atelier"] .tag-bestand {
    gap: 0; background: var(--vm-surface); border-block: 1px solid var(--vm-line);
}
html[data-design="atelier"] .tag-bestand .stat {
    background: transparent; border: 0; border-right: 1px solid var(--vm-line);
    border-radius: 0; box-shadow: none;
}
html[data-design="atelier"] .tag-bestand .stat:last-child { border-right: 0; }
html[data-design="atelier"] .tag-wege a { border-width: 0 0 1px; border-radius: 0; background: transparent; }
html[data-design="kontor"] .arbeitstag { border-left: 4px solid var(--vm-accent); }
html[data-design="kontor"] .bestandsblick td { padding-block: 7px; }
html[data-design="kontor"] .bestandsblick tbody tr:nth-child(even) { background: var(--vm-bg); }
html[data-design="nachtschicht"] .arbeitstag { background: linear-gradient(105deg, var(--vm-soft), var(--vm-surface)); }
html[data-design="nachtschicht"] .tag-bestand .value { color: var(--vm-accent); font-family: var(--font-mono); }
@media (min-width: 901px) {
    html[data-design="kontor"] .sidebar { background: var(--vm-brand); }
    html[data-design="kontor"] .sidebar :is(.side-brand-text, .side-gruppe, .side-nav a, .side-nav .ico, .side-schmal) { color: var(--vm-on-brand); }
    html[data-design="kontor"] .side-nav a:is(.active, :hover) { background: var(--vm-accent); color: var(--vm-on-accent); }
}
@media (max-width: 760px) {
    .stilwahl>span { display: none; }
    .top-right { flex-wrap: wrap; }
    .stilwahl select { max-width: 105px; min-height: 36px; }
    .bestandsblick :is(th, td) { padding: 7px 5px; }
    .bestandsblick td { font-size: 12px; }
    .bestandsblick td small { font-size: 11px; }
}

.login-marke {
    display: inline-flex; align-items: center; gap: 9px; color: var(--vm-ink);
    font: 700 19px/1.3 var(--vm-body); letter-spacing: -.04em; text-transform: none;
}

:root[data-design] { --heute-wald: var(--vm-brand); --heute-hell: var(--vm-on-brand); --heute-knopf: var(--vm-accent); }

/* Hinweis nach einer Kündigung (templates/_abo_kuendigung.html). Ein Stil für alle
   drei Themen über die Themenvariablen. Der Platzhalter #abo-kuendigung selbst hat
   keine Maße, damit er leer keinen Platz einnimmt. */
#abo-kuendigung { margin: 0; padding: 0; }
.abo-kuendigung {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    margin: 0 0 16px; padding: 10px 14px;
    border: 1px solid var(--vm-line); border-left: 4px solid var(--vm-warn);
    border-radius: var(--vm-radius); background: var(--vm-warn-bg);
    color: var(--vm-ink); font: 400 14px/1.45 var(--vm-body);
}
.abo-kuendigung strong { color: var(--vm-warn); font-weight: 700; }
.abo-kuendigung time { font-variant-numeric: tabular-nums; }
.abo-kuendigung .abo-rest { margin-left: auto; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.abo-kuendigung.ist-letzter-tag { border-left-color: var(--vm-error); }
.abo-kuendigung.ist-letzter-tag .abo-rest { color: var(--vm-error); }
@media (max-width: 760px) {
    .abo-kuendigung { gap: 2px 10px; padding: 9px 12px; font-size: 13px; }
    .abo-kuendigung .abo-rest { margin-left: 0; flex-basis: 100%; }
}

/* Rücknahme der Kündigung: natives details/summary direkt im Banner. Zugeklappt steht
   der Knopf neben „Gekündigt zum“, aufgeklappt nimmt die Bestätigung die ganze Zeile.
   Nur Themenvariablen, damit alle drei Designs und hell/dunkel abgedeckt sind. */
.abo-ruecknahme { margin: 0; min-width: 0; }
.abo-ruecknahme[open] { flex-basis: 100%; }
.abo-ruecknahme summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px;
    border: 1px solid var(--vm-line); border-radius: var(--vm-radius);
    background: var(--vm-surface); color: var(--vm-ink); font: 600 13px/1.3 var(--vm-body);
    cursor: pointer; list-style: none; user-select: none;
}
.abo-ruecknahme summary::-webkit-details-marker { display: none; }
.abo-ruecknahme summary::before { content: "▸"; font-size: 11px; line-height: 1; }
.abo-ruecknahme[open] summary::before { content: "▾"; }
.abo-ruecknahme summary:hover { border-color: var(--vm-accent); }
.abo-ruecknahme-form {
    max-width: 60ch; margin: 8px 0 4px; padding: 10px 12px;
    border: 1px solid var(--vm-line); border-radius: var(--vm-radius); background: var(--vm-surface);
}
.abo-ruecknahme-form p { margin: 0 0 10px; color: var(--vm-ink); font: 400 13px/1.5 var(--vm-body); }
.abo-ruecknahme-form b { font-weight: 650; font-variant-numeric: tabular-nums; }
.abo-ruecknahme-form .abo-fortsetzen-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; margin: 0; padding: 6px 16px;
    border: 1px solid var(--vm-accent); border-radius: var(--vm-radius);
    background: var(--vm-accent); color: var(--vm-on-accent);
    font: 650 14px/1.2 var(--vm-body); cursor: pointer; box-shadow: none;
}
.abo-ruecknahme-form .abo-fortsetzen-btn:hover { filter: brightness(.94); }
@media (max-width: 760px) {
    .abo-ruecknahme summary { min-height: 36px; }
    .abo-ruecknahme-form { max-width: none; }
    .abo-ruecknahme-form .abo-fortsetzen-btn { width: 100%; }
}

/* Rechnungsvorschau im Kunden-Dashboard und in der Paketverwaltung. */
.abo-abbuchung {
    box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 0 16px; padding: 12px 16px;
    border: 1px solid var(--vm-line); border-left: 4px solid var(--vm-accent);
    border-radius: var(--vm-radius); background: var(--vm-surface);
    color: var(--vm-ink); font: 400 14px/1.45 var(--vm-body);
}
.abo-abbuchung-titel {
    margin: 0 0 6px; color: var(--vm-muted);
    font: 650 12px/1.3 var(--vm-body); letter-spacing: .02em; text-transform: uppercase;
}
.abo-abbuchung-wert {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0;
}
.abo-abbuchung-betrag {
    color: var(--vm-ink); font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--vm-heading);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.abo-abbuchung-betrag small {
    display: block; color: var(--vm-muted); font: 500 12px/1.3 var(--vm-body); letter-spacing: 0;
}
.abo-abbuchung-datum {
    color: var(--vm-ink); font: 600 16px/1.3 var(--vm-body); white-space: nowrap;
}
.abo-abbuchung time { font-variant-numeric: tabular-nums; }
.abo-abbuchung .ist-offen { color: var(--vm-muted); font-weight: 500; white-space: normal; }
.abo-abbuchung-text { margin: 0; color: var(--vm-ink); font: 500 15px/1.45 var(--vm-body); }
.abo-abbuchung-text time { font-weight: 700; }
.abo-abbuchung.ist-null { border-left-color: var(--vm-ok); background: var(--vm-ok-bg); }
.abo-abbuchung.ist-ausstehend { border-left-color: var(--vm-line); background: var(--vm-soft); }
.abo-abbuchung.ist-ausstehend .abo-abbuchung-text { color: var(--vm-muted); font-weight: 400; }
html[data-design="atelier"] .abo-abbuchung { border-radius: 0; border-right: 0; background: transparent; }
html[data-design="atelier"] .abo-abbuchung.ist-null { background: var(--vm-ok-bg); }
html[data-design="kontor"] .abo-abbuchung { border-left-width: 6px; }
html[data-design="nachtschicht"] .abo-abbuchung { background: linear-gradient(105deg, var(--vm-soft), var(--vm-surface)); }
html[data-design="nachtschicht"] .abo-abbuchung-betrag { color: var(--vm-accent); font-family: var(--font-mono); }

/* Aufschlüsselung unter dem Gesamtbetrag: kompakte dl, zwei Spalten (Label flexibel,
   Betrag rechtsbündig mit Tabellenziffern). Trennlinie und Farben nur über
   Themenvariablen, damit Kontor, Atelier und Nachtschicht sowie hell/dunkel passen. */
.abo-aufschluesselung {
    margin: 10px 0 0; padding: 8px 0 0;
    border-top: 1px solid var(--vm-line);
    color: var(--vm-ink); font: 400 13px/1.4 var(--vm-body);
}
.abo-aufschluesselung .abo-position {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    column-gap: 12px; padding: 2px 0;
}
.abo-aufschluesselung dt { margin: 0; min-width: 0; color: var(--vm-muted); overflow-wrap: anywhere; }
.abo-aufschluesselung dd {
    margin: 0; text-align: right; white-space: nowrap;
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.abo-aufschluesselung .ist-negativ dd { color: var(--vm-ok); }
.abo-aufschluesselung .abo-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
.abo-aufschluesselung-hinweis {
    margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--vm-line);
    color: var(--vm-muted); font: 400 13px/1.4 var(--vm-body);
}
html[data-design="atelier"] .abo-aufschluesselung .abo-position { padding: 3px 0; }
html[data-design="kontor"] .abo-aufschluesselung .abo-position + .abo-position { border-top: 1px solid var(--vm-line); }
html[data-design="kontor"] .abo-aufschluesselung dt { color: var(--vm-ink); }
html[data-design="nachtschicht"] .abo-aufschluesselung dd { font-family: var(--font-mono); }
html[data-design="nachtschicht"] .abo-aufschluesselung .ist-negativ dd { color: var(--vm-ok); }
@media (max-width: 760px) {
    .abo-abbuchung { max-width: none; padding: 10px 12px; margin-bottom: 12px; }
    .abo-abbuchung-wert { flex-direction: column; align-items: flex-start; gap: 4px; }
    .abo-abbuchung-betrag { font-size: 22px; }
    .abo-abbuchung-datum { font-size: 15px; }
    .abo-abbuchung-text { font-size: 14px; }
    .abo-aufschluesselung, .abo-aufschluesselung-hinweis { font-size: 12px; margin-top: 8px; padding-top: 6px; }
    .abo-aufschluesselung .abo-position { column-gap: 8px; }
}

@media (max-width: 760px) { .heute-karte .btn { color: var(--vm-on-accent); } }