/* ============================================================
   XRechnungen – Stylesheet
   Themes  : [data-theme="light"|"dark"]
   Schemes : [data-scheme="blau"|"rot"|"tuerkis"]
   Akzente überschreiben --primary / --accent je nach Schema.
   ============================================================ */

:root {
    /* Neutral-Farben hellen Modus (weicher, modernerer Ton). */
    --bg: #f6f8fc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --fg: #1e293b;
    --muted: #64748b;
    --border: #dbe2ec;
    --primary-fg: #ffffff;
    --error: #dc2626;
    --error-bg: #fee2e2;
    --ok: #059669;
    --ok-bg: #d1fae5;
    --warn: #d97706;
    --warn-bg: #fef3c7;
    --topbar-bg: linear-gradient(90deg, #1e293b 0%, #334155 100%);
    --topbar-fg: #e2e8f0;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 10px rgba(15,23,42,0.05);

    /* Default-Schema: Blau (hell) */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --accent:  #60a5fa;
}

/* Farbschema Rot */
html[data-scheme="rot"] {
    --primary: #ef4444;
    --primary-hover: #dc2626;
    --accent:  #fb7185;
    --topbar-bg: linear-gradient(90deg, #2a1414 0%, #3f1a1a 100%);
}
/* Farbschema Türkis */
html[data-scheme="tuerkis"] {
    --primary: #14b8a6;
    --primary-hover: #0d9488;
    --accent:  #5eead4;
    --topbar-bg: linear-gradient(90deg, #134e4a 0%, #115e59 100%);
}

/* Dark-Mode: Neutralfarben tauschen, Schema-Primaries werden heller. */
html[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #131c2f;
    --surface-alt: #101a2c;
    --fg: #e5edf7;
    --muted: #94a3b8;
    --border: #1f2a44;
    --primary-fg: #0b1220;
    --error: #fca5a5;
    --error-bg: #3a1414;
    --ok: #6ee7b7;
    --ok-bg: #0f2e1d;
    --warn: #fcd34d;
    --warn-bg: #3b2a0c;
    --topbar-bg: linear-gradient(90deg, #020617 0%, #111827 100%);
    --topbar-fg: #e5edf7;
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.25);

    /* Default Blau (dark, etwas heller) */
    --primary: #60a5fa;
    --primary-hover: #93c5fd;
    --accent:  #93c5fd;
}
html[data-theme="dark"][data-scheme="rot"] {
    --primary: #f87171;
    --primary-hover: #fca5a5;
    --accent:  #fda4af;
    --topbar-bg: linear-gradient(90deg, #1f0b0b 0%, #2c1414 100%);
}
html[data-theme="dark"][data-scheme="tuerkis"] {
    --primary: #2dd4bf;
    --primary-hover: #5eead4;
    --accent:  #99f6e4;
    --topbar-bg: linear-gradient(90deg, #042f2e 0%, #134e4a 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* --- Globale Link-Farben (dark/light automatisch via --primary) --- */
a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:visited { color: var(--accent); }
a:hover   { color: var(--primary-hover); }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.5;
    font-size: 1rem;        /* Skaliert mit html { font-size } – A−/A/A+ Steuerung */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Topbar --- */

.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    background: var(--topbar-bg);
    color: var(--topbar-fg);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}
.topbar .brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #f1f5f9; font-weight: 700; font-size: 1.05em;
}
.topbar .logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; font-weight: 800;
}
.topbar .nav { display: flex; gap: 4px; margin-left: 16px; flex: 1 1 auto; flex-wrap: wrap; }
.topbar .nav-link {
    text-decoration: none; color: #cbd5e1; padding: 6px 12px;
    border-radius: 6px; font-size: 0.92em;
    transition: background .15s, color .15s;
}
.topbar .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar .nav-link.active { background: color-mix(in srgb, var(--primary) 28%, transparent); color: #fff; }
.topbar .tag { color: #94a3b8; font-size: 0.78em; flex-shrink: 0; }

.topbar-controls {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Nav-Auth (Login/Register im Header) */
.nav-auth {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 8px;
}
.nav-auth .nav-link { color: #cbd5e1; }
.nav-auth .nav-link:hover { color: #fff; }
.nav-auth .btn {
    background: var(--primary); color: #fff !important;
    border: none; font-size: .85rem; padding: 5px 14px;
    border-radius: 6px; text-decoration: none; font-weight: 600;
}
.nav-auth .btn:hover { background: var(--primary-hover); color: #fff !important; }

/* ── Profile dropdown (#106) ─────────────────────────────────────────────── */
.prof-wrap { position: relative; }
.prof-trigger {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
    background: var(--primary); color: #fff; font-weight: 700; font-size: .95rem;
    cursor: pointer; display: grid; place-items: center; transition: border-color .15s;
    padding: 0; line-height: 1;
}
.prof-trigger:hover, .prof-trigger[aria-expanded="true"] {
    border-color: rgba(255,255,255,.7);
}
.prof-avatar { pointer-events: none; }
.prof-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 200;
    width: 260px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2);
    display: none; flex-direction: column; overflow: hidden;
    animation: prof-in .12s ease;
}
@keyframes prof-in {
    from { opacity:0; transform:translateY(-6px) scale(.97); }
    to   { opacity:1; transform:none; }
}
.prof-dropdown.open { display: flex; }
.prof-header {
    display: flex; align-items: flex-start; gap: 12px; padding: 16px;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.prof-avatar-lg {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary);
    color: #fff; font-weight: 700; font-size: 1.1rem;
    display: grid; place-items: center; flex-shrink: 0;
}
.prof-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof-info strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-email { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prof-plan-badge {
    margin-top: 4px; display: inline-block; font-size: .68rem; font-weight: 700;
    padding: 2px 8px; border-radius: 999px; background: var(--surface-alt);
    border: 1px solid var(--border); color: var(--primary); white-space: nowrap;
}
.prof-sep { height: 1px; background: var(--border); margin: 2px 0; }
.prof-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px; font-size: .86rem; color: var(--fg);
    text-decoration: none; transition: background .1s;
}
.prof-item-icon { width: 18px; text-align: center; flex-shrink: 0; font-style: normal; }
.prof-item:hover { background: var(--surface-alt); }
.prof-item-upgrade { font-weight: 600; }
.prof-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 12px; }
.prof-logout {
    font-size: .82rem; color: var(--error); text-decoration: none; font-weight: 600;
    padding: 4px 10px; border-radius: 6px; border: 1px solid transparent;
    transition: border-color .12s;
}
.prof-logout:hover { border-color: var(--error); background: color-mix(in srgb,var(--error) 6%,transparent); }

.lang-picker { margin: 0; display: flex; }
.lang-picker select,
.scheme-picker {
    background: rgba(255,255,255,0.10); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px; padding: 5px 8px; font-size: 0.85em;
    cursor: pointer; min-width: 90px;
    transition: background .15s, border-color .15s;
}
.lang-picker select:hover,
.scheme-picker:hover {
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.40);
    color: #fff;
}
/* Dropdown-Optionen explizit färben – verhindert hellen Text auf hellem Hintergrund
   in Browser-nativen Dropdowns (Chrome/Windows-Darkmode) */
.lang-picker select option,
.scheme-picker option {
    background: #1e293b;
    color: #e2e8f0;
}
html[data-theme="dark"] .lang-picker select option,
html[data-theme="dark"] .scheme-picker option {
    background: #0f172a;
    color: #e2e8f0;
}
.lang-picker select:focus,
.scheme-picker:focus,
.theme-toggle:focus {
    outline: 2px solid var(--primary); outline-offset: 1px;
}

.theme-toggle {
    background: rgba(255,255,255,0.10); color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px; padding: 5px 10px; cursor: pointer;
    font-size: 0.95em;
    display: inline-flex; align-items: center; gap: 4px;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); }
.theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: inline; }

/* Font-size control */
.font-sz-ctrl {
    display: flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px; padding: 1px 3px;
}
.font-sz-btn {
    background: none; border: none; cursor: pointer;
    color: #e2e8f0; font-weight: 700;
    padding: 3px 7px; border-radius: 4px; line-height: 1.4;
    transition: background .15s; font-size: .78rem;
}
.font-sz-btn:hover { background: rgba(255,255,255,0.18); }
.font-sz-btn.fsz-active { background: rgba(255,255,255,0.28); color:#fff; }
.font-sz-btn sup { font-size: .5rem; vertical-align: super; }

/* --- Layout --- */

main.container {
    max-width: 1060px;
    margin: 32px auto;
    padding: 0 20px;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;  /* wichtig damit flex-Kinder schrumpfen können */
}
main.container.wide { max-width: 1200px; }

h1 { margin: 0 0 6px; font-size: 1.75em; letter-spacing: -0.01em; }
h2 { margin: 0 0 12px; font-size: 1.05em; color: var(--muted);
     letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
h3 { margin: 18px 0 6px; font-size: 1em; }

.lead { color: var(--muted); font-size: 1.05em; margin: 6px 0 26px; max-width: 640px; }

/* --- Cards --- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Home --- */

.hero { margin: 10px 0 30px; }
.hero h1 { font-size: 2.2em; margin-bottom: 4px; }

.cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; margin-bottom: 40px;
}
.service-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--fg);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;         /* Ankerpunkt für .popular-badge */
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15,23,42,0.15);
    border-color: var(--primary);
}
/* Hervorgehobene Karte ("Beliebt") – kein scale(), nur Border + Shadow */
.service-card.featured {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent),
                var(--shadow);
}
.service-card.featured:hover {
    box-shadow: 0 8px 22px rgba(15,23,42,0.15),
                0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}
.service-card h2 {
    color: var(--fg); text-transform: none; letter-spacing: 0;
    font-size: 1.2em; font-weight: 700; margin: 0 0 8px;
}
.service-card p { color: var(--muted); margin: 0 0 18px; font-size: 0.95em; }
.service-card .cta { color: var(--primary); font-weight: 600; }
.service-card.highlight { border-color: var(--primary); }
/* Buttons auf gleicher Höhe: Feature-Liste nimmt restlichen Platz ein */
.service-card ul { flex: 1; }
.service-card form,
.service-card > .btn,
.service-card > a.btn { margin-top: auto; }
.service-card .icon-circle {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff; display: grid; place-items: center;
    font-size: 1.4em; margin-bottom: 14px;
}

.info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.info-grid > div {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px;
}
.info-grid h3 { margin: 0 0 4px; font-size: 0.95em; color: var(--primary); }
.info-grid p { margin: 0; color: var(--muted); font-size: 0.92em; }

/* --- Formular --- */

label {
    display: block; font-size: 0.9em; margin-bottom: 14px;
    color: var(--muted); font-weight: 500;
}
label > input, label > select, label > textarea, .select-block select {
    display: block; width: 100%; margin-top: 5px; max-width: 100%;
    padding: 10px 13px; font-size: 1rem;
    border: 1.5px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--fg);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Dark-Mode: ALLE Eingabefelder klar sichtbar – auch in Tabellen/Line-Items */
html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #0f1d35;
    border-color: #2d4070;
    color: var(--fg);
}
html[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--primary);
    background-color: #0d1a30;
}

/* Die Grid nutzt minmax mit 0-Minimum, damit lange Werte die Zelle nicht aufblasen.
   Das war die Ursache für „Felder passen nicht in den Rahmen". */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 14px 24px;
}
.grid > * { min-width: 0; }

table { width: 100%; border-collapse: collapse; }
table th, table td {
    padding: 8px 10px; border-bottom: 1px solid var(--border);
    font-size: 0.9em; text-align: left;
    overflow-wrap: break-word; word-break: break-word;
}
table th { background: var(--surface-alt); font-weight: 600; }

/* Positionen-Tabelle – horizontal scrollbar, sinnvolle Spaltenbreiten,
   × Button immer sichtbar (kein Overflow mehr im Card-Rahmen). */
.table-scroll {
    overflow-x: auto;
    border-radius: 8px;
    margin: 0 -4px;
    padding: 0 4px;
}
.line-table { min-width: 760px; table-layout: fixed; }
.line-table th, .line-table td { vertical-align: top; padding: 8px 6px; }
.line-table col, .line-table th, .line-table td { overflow: hidden; }
.line-table thead th { white-space: nowrap; }
.line-table input, .line-table select, .line-table textarea {
    padding: 6px 8px; font-size: 0.9em;
    width: 100%; max-width: 100%; box-sizing: border-box;
}
.line-table .desc { margin-top: 4px; font-size: 0.85em; color: var(--muted); }
/* Bezeichnung-Textarea: manuell vergrößerbar (#103) */
.line-name-ta {
    resize: vertical; min-height: 36px; max-height: 200px;
    font-family: inherit; line-height: 1.4; overflow-y: auto;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: 5px;
}
.line-table .col-name   { width: 28%; }
.line-table .col-qty    { width: 10%; }
.line-table .col-unit   { width: 16%; }
.line-table .col-price  { width: 14%; }
.line-table .col-taxcat { width: 16%; }
.line-table .col-taxpct { width: 10%; }
.line-table .col-rm     { width: 44px; text-align: center; }

.btn {
    display: inline-block; padding: 9px 16px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--fg);
    cursor: pointer; font-size: 0.95em; font-weight: 500;
    text-decoration: none; transition: all .15s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary {
    background: var(--primary); color: var(--primary-fg);
    border-color: var(--primary);
}
.btn.primary:hover {
    background: var(--primary-hover); border-color: var(--primary-hover); color: #fff;
}
.btn-remove {
    border: none; background: transparent; color: var(--error);
    font-size: 1.1em; cursor: pointer; padding: 4px;
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }

/* --- Profilkarten --- */

.profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.profile-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: var(--surface);
    user-select: none;
}
.profile-card:hover { border-color: var(--primary); background: var(--surface-alt); }
.profile-card input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.profile-card.selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.profile-card .card-icon { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.profile-card .card-name {
    font-weight: 600; font-size: 0.95em; color: var(--fg);
    display: block; margin-bottom: 4px;
}
.profile-card .card-desc {
    font-size: 0.82em; color: var(--muted); line-height: 1.4;
}

/* Output-Typ-Badge auf Profilkarten: zeigt XML / PDF+XML */
.card-output-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7em;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 4px;
    margin-top: 8px;
    letter-spacing: .03em;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--muted);
}
.card-output-badge.xml {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.card-output-badge.pdf-xml {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 10%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
/* Laien-Erklärungsbox innerhalb der Profilkarten */
.profile-card .card-layman {
    display: none; /* Standard: ausgeblendet */
    margin-top: 8px;
    font-size: 0.82em; color: var(--fg);
    background: var(--surface-alt);
    border-left: 3px solid var(--primary);
    padding: 5px 8px;
    border-radius: 0 4px 4px 0;
    line-height: 1.4;
}

/* Laien-Erklärungsboxen in Formularfeldern */
.layman-hint {
    display: none;
    margin-top: 6px;
    font-size: 0.82em; color: var(--fg);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border-left: 3px solid var(--primary);
    padding: 7px 10px;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* Wenn layman-mode aktiv: alle Erklärungen einblenden */
body.layman-mode .card-layman,
body.layman-mode .layman-hint { display: block; }

/* Toggle-Button */
.page-header-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 4px;
}
.btn-layman-toggle {
    font-size: 0.85em; padding: 7px 14px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--muted); border-radius: 20px;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0; align-self: center;
}
.btn-layman-toggle:hover,
.btn-layman-toggle.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-color: var(--primary); color: var(--primary);
}

/* Exportbereich */
.export-actions {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0;
}
.export-actions .btn.recommended {
    order: -1;
}

/* Leitweg-ID Hinweis */
.leitweg-hint {
    display: none; /* via JS gesteuert */
    font-size: 0.82em; color: var(--muted);
    margin-top: 4px;
}
.leitweg-hint.visible { display: block; }

/* Required-Star für profilbedingte Pflichtfelder */
.profile-required::after {
    content: " *";
    color: var(--error);
}

/* --- Flashes / Alerts --- */

.flashes { list-style: none; padding: 0; margin: 0 0 16px; }
.flash { padding: 10px 14px; border-radius: 7px; margin-bottom: 8px; font-size: 0.92em; }
.flash-error   { background: var(--error-bg); color: var(--error); }
.flash-success { background: var(--ok-bg);    color: var(--ok); }
.flash-warning { background: var(--warn-bg);  color: var(--warn); }
.flash-info, .flash-message {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.alert { padding: 12px 16px; border-radius: 7px; margin: 10px 0; font-weight: 500; }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }

.summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 24px;
    margin: 0;
}
.summary dt { color: var(--muted); font-size: 0.9em; }
.summary dd { margin: 0; overflow-wrap: break-word; word-break: break-word; }

.issues td, .issues th { font-size: 0.9em; }
.issues .lvl-error td { background: var(--error-bg); }
.issues .lvl-warning td { background: var(--warn-bg); }

/* --- Upload --- */

.upload-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px 24px;
    box-shadow: var(--shadow); max-width: 640px;
}
.dropzone {
    border: 2px dashed var(--border); border-radius: 12px;
    padding: 40px 20px; text-align: center;
    background: var(--surface-alt); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone.over, .dropzone:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-alt));
}
.dropzone label {
    color: var(--fg); font-weight: 500; cursor: pointer;
    display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 0;
}
.dropzone .drop-icon { font-size: 2.2em; color: var(--primary); }
.dropzone .hint { color: var(--muted); font-size: 0.82em; font-weight: 400; }
.dropzone .chosen { color: var(--ok); font-size: 0.88em; margin-top: 4px; }

.select-block { margin: 16px 0 0; }

.note {
    background: var(--warn-bg); border: 1px solid var(--warn);
    border-radius: var(--radius); padding: 14px 18px;
    margin-top: 20px; max-width: 640px;
}
.note h3 { margin-top: 0; color: var(--warn); }
.note p { margin: 0; color: var(--fg); font-size: 0.92em; }

/* Scanner-Hinweisbox – prominenter als .note */
.scanner-disclaimer {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--warn-bg); border: 2px solid var(--warn);
    border-radius: var(--radius); padding: 16px 20px;
    margin: 0 0 20px;
}
.scanner-disclaimer .disclaimer-icon {
    font-size: 1.6rem; line-height: 1; flex-shrink: 0;
    color: var(--warn);
}
.scanner-disclaimer strong { color: var(--warn); display: block; margin-bottom: 4px; }
.scanner-disclaimer p { margin: 0; font-size: 0.9em; color: var(--fg); }

/* --- Scanresult --- */

.score { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.gauge {
    width: 108px; height: 108px; border-radius: 50%;
    /* Gradient wird per inline-style gesetzt (bessere Browser-Kompatibilität) */
    background: conic-gradient(var(--primary) 0%, var(--surface-alt) 0);
    display: grid; place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--border);
}
.gauge span {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--surface); display: grid; place-items: center;
    font-weight: 800; color: var(--primary); font-size: 1.15em;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tag-chip {
    padding: 4px 10px; border-radius: 999px; font-size: 0.82em;
    background: var(--surface-alt); color: var(--fg);
    border: 1px solid var(--border);
}
.tag-chip.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

.warnings { list-style: none; padding: 0; margin: 8px 0 0; }
.warnings li {
    padding: 6px 10px; background: var(--warn-bg); color: var(--warn);
    border-radius: 6px; margin-bottom: 4px; font-size: 0.9em;
}

.download-card .dl-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.muted { color: var(--muted); }

/* Checkliste – Pflichtfelder mit BT-Code */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
             grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.checklist li {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 10px;
    padding: 10px 14px; border-radius: 8px;
    background: var(--surface-alt); border: 1px solid var(--border);
    align-items: start;
}
.checklist li.ok { border-color: transparent; background: var(--ok-bg); }
.checklist li.missing { border-color: var(--error); background: var(--error-bg); }
.checklist li.optional { opacity: 0.85; }
.checklist .ico {
    font-size: 1.1em; font-weight: 700; line-height: 1;
    width: 20px; text-align: center;
}
.checklist li.ok .ico { color: var(--ok); }
.checklist li.missing .ico { color: var(--error); }
.checklist li.optional .ico { color: var(--muted); }
.checklist .label { font-weight: 600; }
.checklist .bt {
    display: inline-block; margin-left: 6px;
    font-size: 0.75em; font-weight: 500;
    color: var(--muted); background: var(--surface);
    padding: 1px 6px; border-radius: 4px;
    border: 1px solid var(--border); vertical-align: middle;
}
.checklist .value {
    grid-column: 2; font-size: 0.85em; color: var(--muted);
    overflow-wrap: break-word; word-break: break-word;
}

.footer {
    text-align: center; padding: 20px;
    color: var(--muted); font-size: 0.85em;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.footer a {
    color: var(--fg);
    text-decoration: underline;
    opacity: 0.75;
}
.footer a:hover { opacity: 1; color: var(--primary); }

/* --- Pricing --- */
.interval-switcher {
    display: inline-flex;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-top: .75rem;
}
.interval-btn {
    padding: 6px 20px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    background: transparent;
    color: var(--fg);
    transition: background .15s, color .15s;
}
.interval-btn.active {
    background: var(--primary);
    color: var(--primary-fg);
}
.save-badge {
    font-size: .72rem;
    background: #16a34a;
    color: #fff;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 4px;
    font-weight: 700;
}
.popular-badge {
    position: absolute;
    top: .8rem;
    right: .8rem;
    background: var(--primary);
    color: var(--primary-fg);
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* --- FAQ-Accordion --- */

.faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .6rem;
    overflow: hidden;
    background: var(--surface);
}
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .95em;
    padding: 14px 18px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    transition: background .15s, color .15s;
    user-select: none;
    color: var(--fg);
    border-radius: 8px;   /* abgerundet solange geschlossen */
}
.faq-item summary::-webkit-details-marker { display: none; }
/* +/– Indikator */
.faq-item summary::after {
    content: '+';
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--primary);
    flex-shrink: 0;
    line-height: 1;
    min-width: 20px;
    text-align: right;
    transition: transform .2s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    color: var(--primary);
}
.faq-item[open] summary {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border);
}
/* Inhalt nach dem summary */
.faq-item p, .faq-item > div {
    padding: 13px 18px;
    margin: 0;
    color: var(--fg);
    background: var(--surface-alt);
    font-size: .92em;
    line-height: 1.65;
    border-radius: 0 0 8px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Hamburger-Button (nur auf Mobile sichtbar)
   ═══════════════════════════════════════════════════════════════ */
.nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    color: var(--topbar-fg, #e2e8f0);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 5px 10px;
    margin-left: auto;
    flex-shrink: 0;
    transition: background .15s;
}
.nav-hamburger:hover { background: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════════════════
   Responsive: Tablet (≤ 900px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .topbar-controls .font-sz-ctrl { display: none; }
    .summary { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive: Mobile (≤ 768px)  – Hamburger-Menü aktiv
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Topbar */
    .topbar { gap: 8px; padding: 10px 14px; flex-wrap: nowrap; }
    .topbar .tag { display: none; }
    .topbar-controls { gap: 4px; }
    .topbar-controls .scheme-picker,
    .topbar-controls .lang-picker { display: none; }

    /* Hamburger einblenden */
    .nav-hamburger { display: inline-flex; align-items: center; }

    /* Nav standardmäßig ausgeblendet – klappt per .nav-open auf */
    .topbar .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--topbar-bg);
        flex-direction: column;
        padding: 8px 14px 14px;
        border-top: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 200;
    }
    .topbar .nav.nav-open { display: flex; }
    .topbar { position: relative; }
    .topbar .nav .nav-link {
        padding: 10px 8px;
        border-radius: 6px;
        font-size: 1rem;
    }
    .topbar .nav .nav-link:hover { background: rgba(255,255,255,.08); }

    /* Content */
    main.container { margin: 14px auto; padding: 0 12px; }
    .summary { grid-template-columns: 1fr; gap: 2px 0; }
    .summary dt { margin-top: 8px; }

    /* Karten + Grids auf eine Spalte */
    .cards { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }

    /* Tabellen horizontal scrollbar */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 540px; }

    /* Formular-Grid stapeln */
    .form-grid,
    .form-row { grid-template-columns: 1fr !important; }

    /* Buttons in Reihe → Spalte */
    .btn-row { flex-direction: column; align-items: stretch; }
    .btn-row .btn { width: 100%; text-align: center; }

    /* Admin-Layout stapeln */
    .admin-layout,
    .admin-cols,
    .two-col,
    .split-layout { flex-direction: column !important; }

    /* Profil-Dropdown: volle Breite auf kleinen Screens */
    .prof-dropdown { min-width: unset; width: calc(100vw - 28px); right: -14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Responsive: Klein-Phone (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .topbar .brand span:last-child { display: none; }  /* "SyyPro Rechnungen" → nur Logo-S */
    main.container { padding: 0 10px; }
    .card { padding: 14px; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
    .profile-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Kontrast & Konsistenz – Akzentfarben-Fixes
   ═══════════════════════════════════════════════════════════════ */

/* save-badge nutzt now var(--ok) für schemakonforme Farbe */
.save-badge { background: var(--ok); }

/* Selektion (highlight beim Markieren von Text) */
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--fg); }

/* Tabellen: hover-Zeile deutlicher */
table tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }

/* Focus-Ringe vereinheitlichen – alle interaktiven Elemente */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Checkbox & Radio: schemakonform einfärben */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--primary);
}

/* Dark-Mode: table header klar abgegrenzt */
html[data-theme="dark"] table th {
    background: var(--surface-alt);
    color: var(--fg);
}
html[data-theme="dark"] table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* Dark-Mode: .card links / border-left Akzent braucht höheren Kontrast */
html[data-theme="dark"] .card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
}

/* Placeholder-Text: konsistent gedimmt in dark mode */
html[data-theme="dark"] ::placeholder { color: var(--muted); opacity: 0.7; }

/* Dropdown-Option: Browser-native Styling absichern */
select option:checked {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface));
    color: var(--fg);
}

/* Scrollbar (Webkit): schemakonform */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Code-Elemente im Dark-Mode besser lesbar */
html[data-theme="dark"] code {
    background: rgba(255,255,255,0.08);
    color: var(--accent);
    border-color: rgba(255,255,255,0.12);
}

/* ── Toast-System ─────────────────────────────────────────────────────────── */
#toast-container {
    position: fixed;
    top: 72px; /* unterhalb Topbar */
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    font-size: .875rem;
    line-height: 1.4;
    pointer-events: all;
    animation: toast-in .22s cubic-bezier(.25,.46,.45,.94);
    transition: opacity .3s, transform .3s;
    max-width: 100%;
}
.toast.toast-hiding {
    opacity: 0;
    transform: translateX(16px);
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; word-break: break-word; }
.toast-close {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 1rem; line-height: 1;
    padding: 0 2px; flex-shrink: 0; margin-top: 1px;
    opacity: .6; transition: opacity .1s;
}
.toast-close:hover { opacity: 1; }
/* Farbvarianten */
.toast-success { border-left: 3px solid var(--ok); }
.toast-success .toast-icon::before { content: '✓'; color: var(--ok); }
.toast-error   { border-left: 3px solid var(--error); }
.toast-error   .toast-icon::before { content: '✕'; color: var(--error); }
.toast-warning { border-left: 3px solid var(--warn); }
.toast-warning .toast-icon::before { content: '⚠'; color: var(--warn); }
.toast-info    { border-left: 3px solid var(--primary); }
.toast-info    .toast-icon::before { content: 'ℹ'; color: var(--primary); }