/* Docuflair Convert — Design-System (Token-basiert, Light/Dark), lokal, kein CDN.
   Brand-Rot + Slate-Header, an die Velkaris-Designsprache angelehnt. */

:root {
    /* Brand */
    --df-accent: #c63010;
    --df-accent-dark: #a3260b;
    --df-accent-subtle: rgba(198, 48, 16, .08);
    /* Header / dunkle Flächen (Slate) */
    --df-dark: #1e293b;
    --df-dark-2: #172033;
    --df-on-dark: rgba(255, 255, 255, .85);
    --df-on-dark-muted: rgba(255, 255, 255, .6);
    /* Oberflächen */
    --df-bg: #f4f6fa;
    --df-card: #ffffff;
    --df-inset: #f0f2f5;
    /* Text */
    --df-text: #1a1d23;
    --df-text-secondary: #5f6672;
    --df-text-muted: #8b919d;
    /* Rahmen */
    --df-border: #e3e6ec;
    --df-border-light: #eef0f4;
    /* Semantisch */
    --df-success: #16a34a;
    --df-warning: #d97706;
    --df-danger: #dc2626;
    --df-primary: #2563eb;
    /* Radius / Schatten / Transition */
    --df-radius-sm: 6px;
    --df-radius: 10px;
    --df-radius-lg: 14px;
    --df-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);
    --df-shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --df-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --df-shadow-lg: 0 8px 24px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .04);
    --df-transition: .2s ease;
}

[data-theme="dark"] {
    --df-accent-subtle: rgba(198, 48, 16, .18);
    --df-dark: #191c24;
    --df-dark-2: #12141b;
    --df-bg: #0f1117;
    --df-card: #191c24;
    --df-inset: #14161e;
    --df-text: #e4e6eb;
    --df-text-secondary: #b4bcc8;
    --df-text-muted: #98a4b5;   /* WCAG AA: ≥4.5:1 auf #191c24 (vorher #6b7080 ≈ 3.4:1) */
    --df-border: #2a2d38;
    --df-border-light: #22252e;
}

body {
    background: var(--df-bg);
    color: var(--df-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--df-accent); text-decoration: none; }
a:hover { color: var(--df-accent-dark); text-decoration: underline; }

.text-secondary { color: var(--df-text-secondary) !important; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: var(--df-card); color: var(--df-text); padding: .5rem 1rem; border: 2px solid var(--df-accent);
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ============================ Header / Top-Menü ============================ */
.df-header {
    background: var(--df-dark);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.df-header .navbar { min-height: 52px; padding-top: 0; padding-bottom: 0; padding-left: 1.25rem; padding-right: 1.25rem; }
/* Logo-Anker selbst zentrieren (wie redact-Demo `.velkaris-demo-brand`): macht das
   <img> zum Flex-Item ohne Inline-Baseline-Lücke und entfernt das default vertikale
   .navbar-brand-Padding → Logo, „CONVERT", Badge, CTA und die rechten Buttons sitzen
   exakt auf einer Mittellinie. */
.df-header .navbar-brand { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.df-header .navbar-brand img { height: 28px; display: block; }
/* Gap zwischen Logo, „CONVERT", Badge und CTA exakt wie redact-Demo (.velkaris-demo-brandgroup: 0.75rem). */
.df-brand-group { gap: 0.75rem; }
.df-header .navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.df-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Kategorie-Navigation (Pills) */
.df-catnav { display: flex; flex-wrap: wrap; gap: .25rem; }
.df-catnav .df-cat-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--df-on-dark); padding: .35rem .7rem; border-radius: var(--df-radius-sm);
    font-size: .9rem; font-weight: 500; transition: background-color var(--df-transition), color var(--df-transition);
}
.df-catnav .df-cat-pill:hover, .df-catnav .df-cat-pill:focus {
    color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none;
}
.df-catnav .df-cat-pill svg { width: 15px; height: 15px; opacity: .85; }

/* CTA + Aktionen rechts */
.df-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--df-on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, .25);
    padding: .3rem .8rem; border-radius: var(--df-radius-sm); font-size: .9rem; font-weight: 500;
    transition: var(--df-transition);
}
.df-cta:hover, .df-cta:focus { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); text-decoration: none; }
.df-cta-solid { background: var(--df-success); border-color: var(--df-success); color: #fff; }
.df-cta-solid:hover, .df-cta-solid:focus { background: #128a3e; border-color: #128a3e; color: #fff; }

/* Icon-Buttons im Header (Theme-Toggle) */
.df-iconbtn {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    color: var(--df-on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--df-radius-sm); cursor: pointer; transition: var(--df-transition);
}
.df-iconbtn:hover, .df-iconbtn:focus { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.df-iconbtn .icon-sun { display: none; }
[data-theme="dark"] .df-iconbtn .icon-moon { display: none; }
[data-theme="dark"] .df-iconbtn .icon-sun { display: inline; }

/* Sprach-Umschalter (Custom-Dropdown im df-Stil) */
.df-lang .dropdown-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--df-on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, .25);
    padding: .3rem .7rem; border-radius: var(--df-radius-sm); font-size: .9rem; font-weight: 500;
}
.df-lang .dropdown-toggle:hover, .df-lang .dropdown-toggle:focus { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); }
.df-lang .dropdown-menu {
    --bs-dropdown-min-width: 11rem; --bs-dropdown-bg: var(--df-card); --bs-dropdown-color: var(--df-text);
    --bs-dropdown-border-color: var(--df-border); --bs-dropdown-link-color: var(--df-text);
    --bs-dropdown-link-hover-bg: var(--df-inset); --bs-dropdown-link-hover-color: var(--df-text);
    box-shadow: var(--df-shadow-lg); border-radius: var(--df-radius-sm);
}
.df-lang .dropdown-item.active { background: var(--df-accent); color: #fff; }
/* Zweispaltiger Menüeintrag: Sprachcode (gedämpft, feste Spalte) + Name — wie redact-Demo (.vk-lang-switcher-item). */
.df-lang .df-lang-item { display: flex; align-items: center; gap: 10px; }
.df-lang .df-lang-code { display: inline-block; width: 28px; flex: 0 0 28px; font-weight: 600; font-size: .72rem; letter-spacing: .5px; opacity: .7; }
.df-lang .df-lang-item.active .df-lang-code { opacity: 1; color: #fff; }

/* ============================ Hero + Trust-Pills (Look vom Invoice-Portal übernommen) ============================ */
.df-hero {
    background: linear-gradient(180deg, #3a3a3a 0%, var(--df-dark) 100%);
    color: #fff; padding: 3rem 0 2.5rem;
}
.df-hero h1 { font-weight: 700; }
.df-hero .lead { color: #d6d8db; }

/* Trust-Pills — Container-Layout via Utilities (list-unstyled d-flex flex-wrap gap-2) im Markup, wie Invoice */
.df-trust-pills li {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem; border-radius: 999px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    color: #e9ecef; font-size: .82rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.df-trust-pills li .fa { color: #56b561; }

/* Produkt-Visual: "Fenster"-Mockup (wie Invoice; Convert-Token-Namen) */
.df-window {
    border: 1px solid var(--df-border); border-radius: var(--df-radius);
    overflow: hidden; box-shadow: var(--df-shadow); background: var(--df-card);
}
.df-window-bar {
    display: flex; align-items: center; gap: 6px; padding: .6rem .85rem;
    background: var(--df-inset); border-bottom: 1px solid var(--df-border);
}
.df-window-dot { width: 9px; height: 9px; border-radius: 50%; }
.df-window-dot.r { background: #ff5f57; }
.df-window-dot.y { background: #febc2e; }
.df-window-dot.g { background: #28c840; }
.df-window-bar .fname { font-size: .74rem; color: var(--df-text-muted); margin-left: .4rem; }
.df-window-body { padding: 1rem 1.2rem; margin: 0; font-size: .78rem; line-height: 1.7;
    background: #1e2227; color: #e6e6e6; overflow-x: auto; }
.df-window-body .k { color: #7ee0a2; }
.df-window-body .v { color: #ffd479; }

/* Tool-Suche */
.df-search { position: relative; max-width: 520px; margin: 1.25rem auto 0; }
.df-search input {
    width: 100%; padding: .65rem 1rem .65rem 2.5rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .12); color: #fff;
}
.df-search input::placeholder { color: rgba(255, 255, 255, .7); }
.df-search input:focus { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.df-search .df-search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .75); }

/* ============================ Tool-Kacheln (Hub) ============================ */
.df-cat-title { color: var(--df-text-secondary); text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; font-weight: 700; }
.df-cat-section { scroll-margin-top: 80px; }

.df-tool-card {
    display: flex; gap: .9rem; height: 100%; background: var(--df-card); border: 1px solid var(--df-border);
    border-radius: var(--df-radius); padding: 1.05rem 1.2rem; color: inherit;
    transition: box-shadow var(--df-transition), transform var(--df-transition), border-color var(--df-transition);
}
.df-tool-card:hover, .df-tool-card:focus {
    box-shadow: var(--df-shadow); transform: translateY(-2px); border-color: var(--df-accent); color: inherit; text-decoration: none;
}
.df-tool-card .df-tool-icon {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    color: var(--df-accent); background: var(--df-accent-subtle); border-radius: var(--df-radius-sm);
}
.df-tool-card .df-tool-title { font-weight: 600; color: var(--df-text); }
.df-tool-card .df-tool-summary { color: var(--df-text-secondary); font-size: .88rem; }
.df-tool-card.df-featured { border-color: var(--df-accent); }
.df-tool-card.is-hidden { display: none; }
.df-noresults { color: var(--df-text-secondary); }

/* ============================ Schritte / Karten ============================ */
.df-eyebrow { color: var(--df-accent); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; }
.df-soft {
    background: var(--df-card); border: 1px solid var(--df-border); border-radius: var(--df-radius);
    padding: 1.1rem 1.25rem; height: 100%; box-shadow: var(--df-shadow-xs); transition: var(--df-transition);
}
.df-soft:hover { box-shadow: var(--df-shadow-sm); transform: translateY(-2px); }
.df-step-circle {
    width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
    background: var(--df-accent); color: #fff; font-weight: 700; font-size: .85rem;
}

/* ============================ Vergleichstabelle ============================ */
.df-compare-wrap { overflow-x: auto; }
.df-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--df-card); border: 1px solid var(--df-border); border-radius: var(--df-radius); overflow: hidden; }
.df-compare th, .df-compare td { padding: .7rem .9rem; text-align: center; border-bottom: 1px solid var(--df-border-light); font-size: .9rem; }
.df-compare thead th { background: var(--df-inset); color: var(--df-text); font-weight: 600; }
.df-compare tbody th { text-align: left; font-weight: 500; color: var(--df-text); }
.df-compare .df-col-us { background: var(--df-accent-subtle); }
.df-compare th.df-col-us { color: var(--df-accent); font-weight: 700; }
.df-compare tr:last-child td, .df-compare tr:last-child th { border-bottom: 0; }
.df-yes { color: var(--df-success); font-weight: 700; }
.df-no { color: var(--df-text-muted); }
.df-partial { color: var(--df-warning); }

/* ============================ FAQ ============================ */
.df-faq details {
    background: var(--df-card); border: 1px solid var(--df-border); border-radius: var(--df-radius);
    padding: .85rem 1.1rem; margin-bottom: .6rem;
}
.df-faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--df-text); }
.df-faq summary::-webkit-details-marker { display: none; }
.df-faq summary::after { content: "+"; color: var(--df-accent); font-size: 1.3rem; line-height: 1; }
.df-faq details[open] summary::after { content: "\2212"; }
.df-faq details > p { color: var(--df-text-secondary); margin: .7rem 0 0; }

/* ============================ Dropzone + Upload ============================ */
.df-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; padding: 1.9rem 1rem;
    border: 2px dashed #cbd5e1; border-radius: 10px; background: var(--df-inset, var(--df-card));
    color: var(--df-text-muted); text-align: center; cursor: pointer; outline: none;
    transition: border-color var(--df-transition), background var(--df-transition), color var(--df-transition);
}
.df-dropzone:hover, .df-dropzone:focus-within, .df-dropzone.dragover {
    border-color: var(--df-accent); background: var(--df-accent-subtle); color: var(--df-accent);
}
.df-dropzone .df-dz-icon { font-size: 2.1rem; opacity: .85; color: inherit; }
.df-dz-hint { color: var(--df-text-muted); font-size: .8rem; }
[data-theme="dark"] .df-dropzone { border-color: #3a4150; }

.df-filelist { list-style: none; margin: .75rem 0 0; padding: 0; }
.df-file-item {
    display: flex; align-items: center; gap: .6rem; text-align: left;
    background: var(--df-inset); border: 1px solid var(--df-border-light); border-radius: var(--df-radius-sm);
    padding: .5rem .7rem; margin-top: .4rem;
}
.df-file-item .df-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.df-file-item .df-file-size { color: var(--df-text-muted); font-size: .82rem; }
.df-file-item .df-file-size.too-big { color: var(--df-danger); font-weight: 600; }
/* Sortier-/Entfernen-Buttons (Mehrfach-Upload: Reihenfolge = Verarbeitungs-Reihenfolge) */
.df-file-actions { display: inline-flex; gap: .25rem; flex-shrink: 0; }
.df-file-btn {
    display: inline-grid; place-items: center; width: 26px; height: 26px;
    border: 1px solid var(--df-border); border-radius: 4px; background: transparent;
    color: var(--df-text-muted); cursor: pointer; font-size: .8rem;
    transition: color .15s, border-color .15s, background .15s;
}
.df-file-btn:hover:not(:disabled), .df-file-btn:focus-visible { color: var(--df-accent); border-color: var(--df-accent); }
.df-file-btn:disabled { opacity: .35; cursor: default; }
.df-file-btn.df-file-remove:hover:not(:disabled) { color: var(--df-danger); border-color: var(--df-danger); background: rgba(220, 38, 38, .08); }
.df-doc-meta { color: var(--df-text-secondary); font-size: .85rem; }
.df-field-hint { color: var(--df-text-muted); font-size: .8rem; }
.df-inline-error { color: var(--df-danger); font-size: .85rem; }

/* ============================ Buttons / Karten / Tool-Seite ============================ */
.btn-df { background: var(--df-accent); border-color: var(--df-accent); color: #fff; }
.btn-df:hover, .btn-df:focus { background: var(--df-accent-dark); border-color: var(--df-accent-dark); color: #fff; }
.btn-df:disabled { opacity: .55; }

/* Bootstrap-Card (.card) im Docuflair-Theme: nur die offiziellen --bs-card-*-Tokens
   überschreiben, kein eigenes Surface-Reimplement. Markup nutzt `class="card df-card"`. */
.df-card {
    /* Eigenständige Karte (auch OHNE Bootstrap-.card) — sonst greifen die --bs-card-* unten nicht
       und der Inhalt steht ohne Hintergrund/Rahmen da. NICHT zusätzlich .card setzen: dessen
       display:flex würde direkte Kinder (z. B. Buttons) auf volle Breite strecken. */
    background: var(--df-card);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    --bs-card-bg: var(--df-card);
    --bs-card-border-color: var(--df-border);
    --bs-card-border-radius: var(--df-radius);
}
.df-tool-head .df-tool-head-icon {
    width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
    color: var(--df-accent); background: var(--df-accent-subtle); border-radius: var(--df-radius); font-size: 1.6rem;
}
.df-funnel {
    background: var(--df-card); border: 1px solid var(--df-border); border-left: 4px solid var(--df-accent);
    border-radius: var(--df-radius-sm); padding: 1.25rem 1.5rem;
}

/* ============================ Footer ============================ */
footer.df-footer { background: var(--df-dark); color: var(--df-on-dark-muted); }
footer.df-footer a { color: var(--df-on-dark); }
footer.df-footer a:hover { color: #fff; text-decoration: underline; }
.df-privacy { font-size: .85rem; color: var(--df-text-muted); }

/* ============================ Fokus-Indikatoren (WCAG 2.4.7) ============================ */
/* Inhaltselemente (auf hellem Grund): Akzent-Outline. */
.df-tool-card:focus-visible, .df-search input:focus-visible, .df-file-remove:focus-visible,
.btn-df:focus-visible, .df-faq summary:focus-visible, .df-funnel a:focus-visible {
    outline: 2px solid var(--df-accent); outline-offset: 2px;
}
/* Header-Elemente (auf Slate): heller Ring für Sichtbarkeit. */
.df-cat-pill:focus-visible, .df-cta:focus-visible, .df-iconbtn:focus-visible,
.df-lang .dropdown-toggle:focus-visible, .navbar-brand:focus-visible, .navbar-toggler:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}
/* Sprach-Dropdown-Einträge (auf Karte). */
.df-lang .dropdown-item:focus-visible { outline: 2px solid var(--df-accent); outline-offset: -2px; }

/* ============================ Fortschritts-Pipeline (async Funnel) ============================ */
.df-progress .progress { height: .7rem; border-radius: 999px; max-width: 420px; margin-inline: auto; }
.df-steps { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; }
.df-steps li { transition: color .2s ease, opacity .2s ease; opacity: .55; }
.df-steps li.df-step-active { color: var(--df-accent); font-weight: 600; opacity: 1; }
.df-steps li.df-step-done { color: var(--df-text); opacity: 1; }
.df-steps li.df-step-done i { color: var(--df-success, #198754); }
@media (prefers-reduced-motion: reduce) {
    .df-progress .progress-bar-animated { animation: none; }
}

/* ============================ Top-Menü: Produktname + gelbes Demo-Badge + grüner Outline-CTA ============================ */
/* "CONVERT" in weißer Schrift neben dem Logo. */
.df-product-name { color: #fff; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; line-height: 1; }
/* "Demo" als gelbes Badge — BS5-.badge (rounded-pill/text-uppercase kommen aus Utilities im Markup, wie Invoice); hier nur Marken-Amber. */
.df-demo-badge { background: #f59e0b; color: #1e293b; letter-spacing: .5px; }
.df-cta-outline-green { color: var(--df-success); border-color: var(--df-success); background: transparent; }
.df-cta-outline-green:hover, .df-cta-outline-green:focus { background: var(--df-success); border-color: var(--df-success); color: #fff; }

/* ============================ Quick-Jump (unter der Suche im Hero) ============================ */
.df-quickjump { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: 660px; margin: 1rem auto 0; }
.df-qj-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 500;
    color: var(--df-on-dark); border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06);
    text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.df-qj-pill:hover, .df-qj-pill:focus { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); color: #fff; }
.df-qj-pill svg { width: 15px; height: 15px; opacity: .85; }
#featured { scroll-margin-top: 80px; }
.df-qj-pill:focus-visible, .df-cta-outline-green:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ============================ PDF teilen: dynamische Bereichszeilen ============================ */
.df-split-rows { max-width: 380px; }
.df-split-row { flex-wrap: wrap; }
.df-split-rownum { min-width: 96px; font-size: .85rem; color: var(--df-text-muted); }

/* ============================ FormGuard: Honeypot visuell verstecken ============================ */
.fg-trap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }