/* ============================================================
   XRechnungen – Cards: .card, Service-Cards, Profile-Cards,
                        Upload/Dropzone, Info-Grid
   ============================================================ */

/* ── Base card ───────────────────────────────────────────── */
.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;
}
/* h2 inside .card: stronger than global var(--muted) → WCAG AA readable */
.card > h2, .card > section > h2 {
    color: color-mix(in srgb, var(--fg) 55%, var(--muted));
}

/* Dark-mode: card shadow boost */
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);
}

/* ── Hero section ────────────────────────────────────────── */
.hero { margin: 10px 0 30px; }
.hero h1 { font-size: 2.2em; margin-bottom: 4px; }

/* ── Service-cards grid ──────────────────────────────────── */
.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;
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15,23,42,0.15);
    border-color: var(--primary);
}
/* Featured card ("Beliebt") – no scale(), only 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); }
/* Align buttons at same height: feature-list takes remaining space */
.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 ────────────────────────────────────────────── */
.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; }

/* ── Profile-cards (invoice type selector) ───────────────── */
.profile-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px; margin-top: 12px;
}
/* Mittlere Breiten: 2×2 statt 3+1-Orphan (4 Karten) */
@media (min-width: 641px) and (max-width: 1100px) {
    .profile-cards { grid-template-columns: repeat(2, 1fr); }
}
.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.45rem; display: block; margin-bottom: 6px;
    color: var(--primary); line-height: 1;  /* einfarbige Glyphe statt Emoji (§6) */
}
.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-type badge (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);
}
/* Layman explanation box inside profile-cards */
.profile-card .card-layman {
    display: none; 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;
}
/* Layman hint boxes inside form fields */
.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;
}
/* When layman-mode active: show all explanations */
body.layman-mode .card-layman,
body.layman-mode .layman-hint { display: block; }

/* ── Upload card / dropzone ──────────────────────────────── */
.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; }

/* ── Note box ────────────────────────────────────────────── */
.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 disclaimer (more prominent than .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); }