/* Caveat (Schreibschrift-Signatur) — self-hosted (SIL OFL 1.1, Lizenz: /fonts/caveat-OFL.txt).
   Bewusst NICHT von fonts.googleapis.com geladen (DSGVO, LG München I 3 O 17493/20). */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caveat-v23-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/caveat-v23-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html { font-size: 16px; scrollbar-gutter: stable; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #1d2939; background: #fafbfc; }

.hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    padding: 6rem 0 5rem;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
.hero p.lead { font-size: 1.25rem; opacity: .9; }

.hero-trust {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    height: 100%;
}
.hero-trust-title { font-weight: 600; color: #fff; }
.hero-trust-sub { font-size: .85rem; opacity: .65; margin-top: .15rem; }

.section { padding: 4rem 0; }
.section h2 { font-weight: 700; }

.step-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 2rem 1.5rem; background: #fff; height: 100%; }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: #0ea5e9; color: white; font-weight: 700;
}

.usecase-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; background: #fff; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.usecase-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2,6,23,.06); }

.faq-item { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: .75rem; background: #fff; }
.faq-item summary { padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; }
.faq-item p { padding: 0 1.25rem 1.25rem; margin: 0; color: #475569; }

.doc-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; }
.doc-card .badge-status { font-size: .75rem; }

.badge.status-Draft { background: #94a3b8; color: #fff; }
.badge.status-Pending { background: #f59e0b; color: #fff; }
.badge.status-Completed { background: #10b981; color: #fff; }
.badge.status-Rejected { background: #ef4444; color: #fff; }
.badge.status-Signed { background: #10b981; color: #fff; }
.badge.status-Withdrawn { background: #94a3b8; color: #fff; }
.badge.status-Expired { background: #d97706; color: #fff; }

.signature-rect { position: absolute; border: 2px dashed #0ea5e9; background: rgba(14,165,233,.15); cursor: pointer; box-sizing: border-box; touch-action: none; }
.signature-rect.signed { border-color: #10b981; background: rgba(16,185,129,.15); }
.signature-rect.rejected { border-color: #ef4444; background: rgba(239,68,68,.15); }
/* Fremde Felder (auf /request): unauffälliges Grau, egal welcher Status — nur das eigene Feld
   behält die Signalfarben. Nach .signed/.rejected definiert, damit .other gewinnt. */
.signature-rect.other { border-color: #cbd5e1; background: rgba(148,163,184,.08); cursor: default; }
.signature-rect.dragging { opacity: .7; }
.signature-rect .sig-label {
    position: absolute; left: 0; bottom: -1px;
    background: #0ea5e9; color: #fff;
    font-size: .7rem; padding: 1px 6px;
    border-radius: 0 4px 0 0;
    pointer-events: none;
}
.signature-rect.signed .sig-label { background: #10b981; }
.signature-rect.rejected .sig-label { background: #ef4444; }
.signature-rect.unassigned { border-color: #9ca3af; background: rgba(156,163,175,.18); }
.signature-rect.unassigned .sig-label { background: #6b7280; font-style: italic; }
.signature-rect.unassigned .signature-rect-handle { background: #6b7280; }
/* Abgelaufene (nicht unterschriebene) Anforderungen: gedämpftes Amber, kein Pointer. */
.signature-rect.expired { border-color: #d97706; background: rgba(217,119,6,.10); cursor: default; }
.signature-rect.expired .sig-label { background: #d97706; }
.signature-rect-handle {
    position: absolute; right: -7px; bottom: -7px;
    width: 14px; height: 14px;
    background: #0ea5e9; border: 2px solid #fff;
    border-radius: 3px;
    cursor: nwse-resize;
    touch-action: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.pdf-page-wrapper { position: relative; margin: 0 auto 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.1); background: #fff; }
.pdf-page-wrapper canvas { display: block; }

.signature-pad { border: 1px solid #cbd5e1; border-radius: 6px; touch-action: none; background: #fff; }

/* /request – Empfängerseite */
.request-body { background: #f3f4f6; min-height: 100vh; }
.request-header {
    position: sticky; top: 0; z-index: 1020;
    background: #212529; border-bottom: 1px solid #000;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.request-header-inner {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1.25rem;
    max-width: 960px; margin: 0 auto;
}
.request-brand {
    font-weight: 700; text-decoration: none; color: #fff;
    font-size: 1.15rem; white-space: nowrap; flex-shrink: 0;
}
.request-brand:hover { color: #fff; }
/* Custom-Branding (Business): Team-Logo ersetzt das Wordmark im Request-Header */
.request-brand-logo {
    display: block; flex-shrink: 0;
    max-height: 40px; max-width: 220px;
    object-fit: contain;
}
.request-doc-title {
    margin-left: auto;
    font-weight: 600; color: #fff;
    text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.request-main { padding: 1.25rem 0 3rem; }
.request-content { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }
.request-toolbar {
    display: flex; align-items: baseline; gap: 1.5rem;
    margin-bottom: 1rem;
}
.request-toolbar .hint { color: #475569; flex: 1 1 auto; min-width: 0; }
.request-toolbar .actions { flex: 0 0 auto; white-space: nowrap; }
.request-toolbar .actions a { text-decoration: none; }
.request-toolbar .actions a:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .request-header-inner { padding: .6rem .9rem; gap: .5rem; }
    .request-brand { font-size: 1rem; }
    .request-brand-logo { max-height: 30px; max-width: 150px; }
    .request-doc-title { font-size: .9rem; }
    .request-content { padding: 0 .75rem; }
}

/* /request – Sign/Reject-Modal: einheitliche Dimensionen */
.action-modal .modal-dialog { max-width: 640px; }
.action-modal .modal-content {
    height: 600px;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}
.action-modal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.action-modal .am-step {
    display: none;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}
.action-modal .am-step.active { display: flex; }
.action-modal .am-step-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem; }
.action-modal .am-step-footer {
    flex: 0 0 auto;
    padding: .75rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    background: #fff;
}
@media (max-width: 575.98px) {
    .action-modal .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: .5rem auto;
    }
}

/* Sign-Step auf kleinen/niedrigen Viewports (schmales Hochformat UND kurzes Querformat).
   Ziel: kein Scrollen im Overlay + die Aktions-Buttons sitzen direkt unter dem Pad.
   - Die Karte umschließt ihren Inhalt (height:auto) statt fix 600px/volle Höhe → der
     Footer rückt direkt unter das Pad, der Rest bleibt als Leerraum unter der zentrierten
     Karte (modal-dialog-centered).
   - Das Pad ist ein Flex-Item mit Wunschhöhe 220px (Hochformat = unverändert), das per
     max-height gekappt und bei knapper Höhe (Querformat) bis min-height:90px schrumpft,
     bis Titel + Modus-Umschalter + Pad + Buttons in den Screen passen.
   Desktop (breit UND hoch) trifft keine der Bedingungen und bleibt unverändert. */
@media (max-width: 575.98px), (max-height: 600px) {
    /* Bootstrap hebt --bs-modal-margin ab 576px Breite auf 1.75rem an (top+bottom = 3.5rem).
       Im niedrigen Querformat (Breite ≥ 576px, Höhe ≤ 600px) addiert sich dieser Rand zur
       Content-max-height und schiebt den Dialog über die Viewport-Höhe → das äußere .modal
       scrollt. Die Variable steuert Rand UND die min-height von .modal-dialog-centered; auf
       .5rem gesetzt entspricht das exakt dem funktionierenden Hochformat. */
    .action-modal .modal-dialog { --bs-modal-margin: .5rem; }
    .action-modal .modal-content {
        height: auto;
        max-height: calc(100dvh - 1rem);
    }
    .action-modal .modal-header { padding-top: .6rem; padding-bottom: .6rem; }
    #step-sign .am-step-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
    #step-sign #sig-draw-block,
    #step-sign #sig-type-block,
    #step-sign #sig-image-block {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    /* Zeichenfeld, Schreibschrift- und Bild-Feld exakt gleich hoch → kein Höhensprung beim
       Moduswechsel. Alle drei haben denselben Box-Model (kein margin-top, box-sizing:border-box
       → Border-Breite egal), die einzeilig fixierte .sig-hint darüber ist ebenfalls überall
       gleich hoch. */
    #step-sign #sig-draw-block .signature-pad,
    #step-sign #sig-type-block .sig-type-preview,
    #step-sign #sig-image-block .sig-dropzone {
        flex: 1 1 auto;
        height: 220px; /* Flex-Basis = Wunschhöhe; max-height kappt sie im Hochformat */
        min-height: 90px;
        max-height: 220px;
    }
    .action-modal .am-step-footer { padding-top: .5rem; padding-bottom: .5rem; }
}

/* /request – Signatur-Modi (Zeichnen / Schreibschrift / Bild) */
.sig-mode-switch { display: flex; gap: .25rem; margin-bottom: .75rem; }
.sig-mode-switch .btn { flex: 1; }
/* Hinweiszeile über jedem Eingabefeld: strikt einzeilig (nowrap + ellipsis), damit
   unterschiedlich lange Texte NIE die Blockhöhe verändern → alle drei Modi exakt gleich hoch,
   unabhängig von Viewport-Breite. */
.sig-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sig-draw-block .signature-pad { width: 100%; height: 220px; display: block; }
#sig-type-block .sig-type-preview {
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-weight: 400;
    font-size: clamp(2.5rem, 9vw, 4rem);
    line-height: 1;
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    color: #0b1e3b;
    height: 220px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    white-space: nowrap;
}
#sig-type-block .sig-type-preview.empty { color: #9ca3af; }

/* /request – Bild-Modus (gescannte Unterschrift / Firmenstempel): Drop-Zone mit
   Drag-and-Drop + Klick/Tap. Feste Höhe wie das Zeichnen-Pad, damit das Overlay beim
   Moduswechsel nicht springt — Prompt (leer) und Vorschau (geladen) teilen dieselbe Box. */
#sig-image-block .sig-dropzone {
    height: 220px;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 1rem;
    cursor: pointer;
    overflow: hidden;
    background: #f8fafc;
    transition: border-color .15s ease, background-color .15s ease;
}
#sig-image-block .sig-dropzone:hover,
#sig-image-block .sig-dropzone:focus-visible {
    border-color: #0ea5e9;
    background: #f0f9ff;
    outline: none;
}
#sig-image-block .sig-dropzone.dragover {
    border-color: #0ea5e9;
    background: #e0f2fe;
}
/* Geladener Zustand: durchgezogener Rahmen + Karo-Muster macht Transparenz sichtbar. */
#sig-image-block .sig-dropzone.has-image {
    border-style: solid;
    padding: 0;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#sig-image-block .sig-dropzone-prompt {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    color: #64748b;
    pointer-events: none; /* Klicks/Drops gehen an die Drop-Zone, nicht an Icon/Text */
}
#sig-image-block .sig-dropzone-icon { width: 40px; height: 40px; opacity: .65; }
#sig-image-block .sig-dropzone-title { font-weight: 500; }
#sig-image-block .sig-dropzone-hint { font-size: .8rem; color: #94a3b8; }
#sig-image-block .sig-dropzone-canvas { max-width: 100%; max-height: 100%; display: block; }

/* /request – PIN-Input: 500 ms-Pulse als visuelles Echo, bevor Verify gefeuert wird. */
@keyframes pin-verify-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(14,165,233,.45); background-color: #fff; }
    60%  { box-shadow: 0 0 0 .4rem rgba(14,165,233,.25); background-color: #e0f7ff; }
    100% { box-shadow: 0 0 0 .2rem rgba(14,165,233,.15); background-color: #e0f7ff; }
}
#pin-input.is-verifying {
    border-color: #0ea5e9;
    animation: pin-verify-pulse 500ms ease-out forwards;
}

.tag-chip { display:inline-block; padding: .15rem .55rem; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: .75rem; margin-right: .25rem; }

.icon-doc {
    width: 56px; height: 72px; border-radius: 6px 6px 6px 6px;
    display: inline-flex; align-items: flex-end; justify-content: center;
    color: white; font-weight: 700; font-size: .75rem;
    background: #64748b; position: relative;
    box-shadow: inset -8px 8px 0 rgba(0,0,0,.06);
}
.icon-doc::after {
    content: ""; position:absolute; top:0; right:0; width:14px; height:14px;
    background: #fff; clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.icon-doc-Pending { background: #f59e0b; }
.icon-doc-Completed { background: #10b981; }
.icon-doc-Rejected { background: #ef4444; }
.icon-doc-Draft { background: #64748b; }

/* Consent-Banner + Einstellungs-Modal */
.consent-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1040;
    max-width: 720px; margin: 0 auto;
    background: #0f172a; color: #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(2,6,23,.35);
    padding: 1.1rem 1.25rem;
    display: none;
}
.consent-banner.is-visible { display: block; }
.consent-banner h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: #fff; }
.consent-banner p { margin: 0 0 .85rem; font-size: .88rem; line-height: 1.5; color: #cbd5e1; }
.consent-banner a { color: #7dd3fc; text-decoration: underline; }
.consent-banner .consent-actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.consent-banner .btn-consent {
    border: 0; padding: .5rem 1rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .9rem;
}
.consent-banner .btn-consent.primary { background: #0ea5e9; color: #fff; }
.consent-banner .btn-consent.primary:hover { background: #0284c7; }
.consent-banner .btn-consent.secondary { background: #334155; color: #e2e8f0; }
.consent-banner .btn-consent.secondary:hover { background: #475569; }
.consent-banner .btn-consent.ghost { background: transparent; color: #cbd5e1; padding: .5rem .25rem; }
.consent-banner .btn-consent.ghost:hover { color: #fff; text-decoration: underline; }

.consent-cat {
    border: 1px solid #e5e7eb; border-radius: 10px;
    padding: .85rem 1rem; margin-bottom: .65rem;
    background: #fff;
}
.consent-cat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.consent-cat-head strong { font-size: .98rem; }
.consent-cat-head .text-muted { font-size: .78rem; }
.consent-cat p { margin: .4rem 0 0; font-size: .85rem; color: #475569; line-height: 1.45; }
.consent-cat .form-check-input:checked { background-color: #0ea5e9; border-color: #0ea5e9; }
.consent-cat.locked .form-check-input { background-color: #94a3b8; border-color: #94a3b8; opacity: .9; }

.consent-fab {
    position: fixed; right: 12px; bottom: 12px; z-index: 1040;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(15, 23, 42, .55); color: #f8fafc;
    border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; opacity: .55;
    transition: opacity .15s ease, background .15s ease;
}
.consent-fab:hover, .consent-fab:focus { opacity: 1; background: #0f172a; outline: none; }
body:has(.consent-banner.is-visible) .consent-fab { display: none; }

/* Identity Default UI in our layout */
body > main > div[class*="container"] > h1 { font-weight: 700; }
.identity-shell { max-width: 540px; margin: 3rem auto; }
.identity-shell h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; }
.identity-shell .form-floating > .form-control { font-size: .95rem; }
.identity-shell hr { margin: 2rem 0; }
.identity-shell .btn-primary { background:#0ea5e9; border-color:#0ea5e9; color:#fff; }
.identity-shell .btn-primary:hover { background:#0284c7; border-color:#0284c7; }

/* Wrap Identity pages in a shell */
.text-info { color: #0ea5e9 !important; }

.container > .row + .row { margin-top: 1.5rem; }
.container [class*='col-'] section { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1.5rem; margin-bottom: 1.5rem; }

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0ea5e9;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: .02em;
}
.navbar-dark .dropdown-menu { --bs-dropdown-link-color: #1d2939; }

.price-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 2rem 1.5rem; background: #fff; height: 100%; display: flex; flex-direction: column; }
.price-card.featured { border-color: #0ea5e9; box-shadow: 0 8px 24px rgba(14,165,233,.12); position: relative; }
.price-card .price-tag { font-size: 2.5rem; font-weight: 800; color: #0f172a; }
.price-card .price-suffix { font-size: 1rem; color: #64748b; font-weight: 500; }
.price-card ul.features { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.price-card ul.features li { padding: .45rem 0; color: #334155; border-bottom: 1px dashed #e5e7eb; font-size: .95rem; display: flex; align-items: flex-start; gap: .65rem; }
.price-card ul.features li:last-child { border-bottom: none; }
.price-card ul.features li .feat-icon { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; margin-top: 1px; }
.price-card ul.features li.feat-yes .feat-icon { background: #d1fae5; color: #047857; }
.price-card ul.features li.feat-yes .feat-icon::before { content: "✓"; }
.price-card ul.features li.feat-no { color: #94a3b8; }
.price-card ul.features li.feat-no .feat-icon { background: #f1f5f9; color: #94a3b8; }
.price-card ul.features li.feat-no .feat-icon::before { content: "✕"; }
.price-card ul.features li.feat-info .feat-icon { background: #e0f2fe; color: #0369a1; }
.price-card ul.features li.feat-info .feat-icon::before { content: "•"; font-size: 1rem; line-height: 1; }
.price-card ul.features li .feat-note { display: block; font-size: .8rem; color: #94a3b8; margin-top: .15rem; }
.price-card .featured-label { position: absolute; top: -12px; right: 1.5rem; background: #0ea5e9; color: #fff; font-size: .75rem; padding: .1rem .6rem; border-radius: 999px; }
.billing-toggle { display: inline-flex; background: #e2e8f0; padding: 3px; border-radius: 999px; }
.billing-toggle button { border: none; background: transparent; padding: .35rem 1rem; border-radius: 999px; font-weight: 600; color: #334155; }
.billing-toggle button.active { background: #fff; color: #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,.06); }

/* === Preise: Trust-Badges, "Alles aus …", Vergleichsmatrix, Wettbewerb ===== */

/* Trust-Strip im Hero */
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0; margin: 1.75rem 0 0; }
.hero-badges li { font-size: .85rem; color: #e2e8f0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .3rem .85rem; }
.hero-badges li::before { content: "✓"; color: #38bdf8; font-weight: 700; margin-right: .45rem; }

/* "Alles aus Free, plus:" über der Feature-Liste der Karte */
.feat-inherit { font-size: .9rem; color: #0f172a; margin: .25rem 0 -.25rem; }

/* Card-Untertitel mit fixer Höhe, damit die Preiszeilen über alle Karten fluchten */
.price-card .card-pitch { min-height: 3.2rem; }

/* Vergleichsmatrix */
.compare-hint { display: none; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e7eb; border-radius: 12px; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
.compare th, .compare td { padding: .8rem 1.1rem; border-bottom: 1px solid #eef2f6; text-align: center; vertical-align: middle; }
.compare thead th { background: #f8fafc; border-bottom: 2px solid #e5e7eb; vertical-align: top; }
.compare thead .tier-name { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.compare thead .tier-price { display: block; margin-top: .3rem; }
.compare thead .tier-price .price-tag { font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.compare thead .tier-price .price-suffix { font-size: .78rem; color: #64748b; display: block; }
.compare th.c-feature, .compare td.c-feature { position: sticky; left: 0; background: #fff; text-align: left; font-weight: 500; color: #334155; z-index: 2; }
.compare thead th.c-feature { background: #f8fafc; z-index: 3; }
.compare .group-row td { text-align: left; background: #f1f5f9; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: #64748b; }
.compare .c-yes::before { content: "✓"; color: #047857; font-weight: 700; font-size: 1.05rem; }
.compare .c-no::before { content: "–"; color: #cbd5e1; font-size: 1.1rem; }
.compare .c-val { font-weight: 600; color: #0f172a; }
.compare .c-val small { display: block; font-weight: 400; color: #94a3b8; font-size: .75rem; }
.compare .col-pro { background: rgba(14,165,233,.06); }
.compare thead th.col-pro { background: rgba(14,165,233,.1); border-bottom-color: #0ea5e9; }
.compare thead th.col-pro .tier-name { color: #0369a1; }
.compare-pill { display: inline-block; background: #0ea5e9; color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; margin-bottom: .4rem; }
.compare-cta td { padding-top: 1.1rem; padding-bottom: 1.1rem; border-bottom: none; }
@media (max-width: 991.98px) {
    .compare-hint { display: block; text-align: center; font-size: .85rem; color: #94a3b8; margin-bottom: .6rem; }
}

/* Wettbewerbs-Sektion "Warum unterschreib.es?" */
.why-card { display: flex; gap: .85rem; align-items: flex-start; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; height: 100%; }
.why-card .why-check { flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #d1fae5; color: #047857; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-top: .1rem; }
.why-card .why-check::before { content: "✓"; }
.why-card h3 { font-size: 1rem; margin: 0 0 .25rem; }
.why-card p { margin: 0; color: #64748b; font-size: .92rem; }

/* Feature-Spotlight: Tier-Pill */
.tier-pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.tier-pill.pro { background: #e0f2fe; color: #0369a1; }
.tier-pill.business { background: #0f172a; color: #fff; }

/* === Landing: Funktions-Grid + Branchen-Spotlight ========================= */

/* Funktions-Cards (Was kann das Produkt?) — Icons im Feather-Stil wie in der App */
.feature-card { position: relative; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; background: #fff; height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(2,6,23,.06); }
.feature-card .feature-ico { width: 44px; height: 44px; border-radius: 10px; background: #e0f2fe; color: #0369a1; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.feature-card .feature-ico svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.feature-card p { color: #64748b; margin: 0; font-size: .92rem; }
.feature-card .tier-pill { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; }

/* Branchen-Spotlight (Lead-Vertical Hausverwaltung) — dunkles Band wie der Hero */
.vertical-spotlight { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; border-radius: 16px; padding: 2.75rem 2.25rem; }
.vertical-spotlight h2 { color: #fff; font-weight: 800; }
.vertical-spotlight p { color: #cbd5e1; }
.spotlight-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #38bdf8; margin-bottom: .75rem; }

/* Mobile (< md): Funktions-Cards als kompakte 2-Spalten-Kacheln — Icon + Titel,
   Beschreibung erst ab Tablet sichtbar. Spart ~50 % Scrollhöhe gegenüber gestapelt.
   Greift nur auf .feature-grid, damit die Use-Case-Kacheln unberührt bleiben. */
@media (max-width: 767.98px) {
    .feature-grid > [class*="col-"] { flex: 0 0 auto; width: 50%; max-width: 50%; }
    /* Flex-Spalte + order: Icon zuerst, dann (falls vorhanden) das Tier-Badge, dann Titel.
       Per order statt DOM-Umbau, damit die absolute Badge-Position auf Desktop unberührt bleibt. */
    .feature-card { padding: 1rem .85rem; display: flex; flex-direction: column; }
    .feature-card p { display: none; }
    .feature-card .feature-ico { order: 1; width: 38px; height: 38px; margin-bottom: .6rem; }
    .feature-card .feature-ico svg { width: 19px; height: 19px; }
    .feature-card .tier-pill { order: 2; position: static; align-self: flex-start; margin: 0 0 .5rem; }
    .feature-card h3 { order: 3; font-size: .9rem; }
}

/* ===================== /Documents/Detail =====================
   Layout-Styles liegen in detail.css — hier nur die seitenübergreifend
   genutzten Bausteine (editierbarer Titel, Locked-Features). */

/* Editierbarer Titel: deutliche Hover/Focus-Affordance + Stift-Icon */
.title-editable {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0 0 .1rem -0.5rem;
    cursor: text;
    border-radius: 8px;
}
.title-editable #title-edit {
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    border-radius: 8px;
    padding: .1rem .5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.title-editable:hover #title-edit { background: #f1f5f9; border-color: #e2e8f0; }
.title-editable #title-edit:focus { background: #fff; border-color: #0ea5e9; box-shadow: 0 0 0 .15rem rgba(14,165,233,.25); }
.title-edit-icon { color: #94a3b8; flex-shrink: 0; opacity: .65; transition: opacity .12s ease, color .12s ease; }
.title-editable:hover .title-edit-icon,
.title-editable:focus-within .title-edit-icon { opacity: 1; color: #0ea5e9; }

/* Komplett klickbare Locked-Flächen (Link auf /Preise) */
.locked-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
    display: block;
}

/* /Admin/Branding – Live-Vorschau des Request-Headers (Optik von .request-header,
   ohne sticky/z-index; Farben werden per JS aus den Form-Feldern gespiegelt) */
.brand-preview {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.brand-preview-header {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1.25rem;
    background: #212529;
}
.brand-preview-logo {
    display: block; flex-shrink: 0;
    max-height: 40px; max-width: 220px;
    object-fit: contain;
}
.brand-preview-wordmark {
    font-weight: 700; color: #fff;
    font-size: 1.15rem; white-space: nowrap; flex-shrink: 0;
}
.brand-preview-title {
    margin-left: auto;
    font-weight: 600; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.brand-preview-body {
    background: #f3f4f6;
    padding: 1rem 1.25rem 1.25rem;
}
.brand-preview-line {
    height: 8px; border-radius: 4px;
    background: #d6dbe1;
    margin-top: .6rem;
}
.locked-link:hover, .locked-link:focus-visible {
    color: inherit;
    border-color: #cbd5e1;
    background: #f8fafc;
}
.locked-link .upgrade-cue { color: #0ea5e9; font-weight: 600; margin-left: .35rem; white-space: nowrap; }

/* Gesperrte Pro-Features (Free-Tarif) */
.locked-feature { opacity: .85; }
.locked-feature .form-check-input { pointer-events: none; }
.locked-feature .lock { margin-right: .15rem; }
.locked-feature .badge.bg-secondary { font-weight: 600; }

/* ---- Operator-Backend (Superadmin) ---- */
/* WordPress-artige Leiste ganz oben, im normalen Fluss über der Navbar — auf allen
   Breakpoints sichtbar. Liegt als erstes Body-Kind im Flex-Column-Layout, schiebt also
   nur den Rest nach unten. Auf Desktop trägt das reine Flex-Layout die 32px problemlos;
   auf Mobile korrigieren wir die calc(100dvh - 56px)-Höhen von dashboard.css/detail.css
   per :has(.sa-bar) um die Leistenhöhe (siehe Media-Query unten). */
.sa-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 32px;
    padding: 0 .9rem;
    background: #4a2127; /* leicht rötlich, dunkles Wine */
    color: #d9c2c5;
    font-size: .82rem;
    line-height: 1;
}
.sa-bar-brand { font-weight: 600; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.sa-bar-nav { display: flex; gap: .25rem; }
.sa-bar-nav a {
    color: #d9c2c5;
    text-decoration: none;
    padding: .3rem .6rem;
    border-radius: 3px;
}
.sa-bar-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sa-bar-nav a.active { background: rgba(220, 53, 69, .55); color: #fff; }
.sa-bar-spacer { flex: 1 1 auto; }
.sa-bar-user { color: #b9989d; font-size: .78rem; white-space: nowrap; }

/* Mobile: Leiste (32px) von den Vollhöhen-Layouts abziehen, sonst entsteht ein kleiner
   Scrollbalken auf Dashboard/Detail. Greift nur, wenn die Leiste gerendert ist. */
@media (max-width: 991.98px) {
    body:has(.sa-bar) .dash-app,
    body:has(.sa-bar) .detail-app { min-height: calc(100dvh - 56px - 32px); }
}

/* Dependency-freies Wachstumschart im Operator-Backend */
.sa-chart { width: 100%; height: auto; display: block; }
.sa-chart-axis { stroke: #dee2e6; stroke-width: 1; }
.sa-chart-bar { fill: #0d6efd; }
.sa-chart-value { fill: #495057; font-size: 11px; font-weight: 600; }
.sa-chart-label { fill: #6c757d; font-size: 11px; }

/* Struktur-Baum (server-side, native <details>/<summary>, kein JS) */
.sa-tree { font-size: .9rem; }
.sa-tree details { margin: .1rem 0; }
.sa-tree summary {
    cursor: pointer;
    padding: .3rem .4rem;
    border-radius: 4px;
    list-style-position: inside;
}
.sa-tree summary:hover { background: #f1f3f5; }
.sa-tree-children {
    margin-left: 1rem;
    border-left: 1px solid #e9ecef;
    padding-left: .7rem;
}
.sa-tree-leaf { padding: .3rem .4rem .3rem 1.25rem; }
.sa-tree-empty { padding: .25rem .4rem .25rem 1.25rem; color: #adb5bd; font-style: italic; }
.sa-tree-facts { color: #495057; }
.sa-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .05rem .4rem;
    border-radius: 3px;
    margin-right: .4rem;
    vertical-align: middle;
}
.sa-tag-user { background: #e7f1ff; color: #0d6efd; }
.sa-tag-team { background: #e6f7ee; color: #198754; }
.sa-tag-doc  { background: #fff3cd; color: #997404; }
.sa-tag-req  { background: #fde2e4; color: #b02a37; }