:root {
    --plockly-green: #2f7d56;
    --plockly-green-dark: #1f5e3f;
    --plockly-green-soft: #e9f4ee;
    --plockly-ink: #17231d;
    --plockly-muted: #66756d;
    --plockly-border: #dce5df;
    --plockly-surface: #ffffff;
    --plockly-bg: #f3f7f4;
    --plockly-sidebar-width: 276px;
    --plockly-radius: 1rem;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--plockly-bg);
    color: var(--plockly-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

a {
    color: var(--plockly-green-dark);
}

a:hover {
    color: var(--plockly-green);
}

:focus-visible {
    outline: 3px solid rgba(47, 125, 86, 0.35);
    outline-offset: 2px;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: 0.75rem;
    left: 0.75rem;
    transform: translateY(-180%);
    padding: 0.65rem 0.9rem;
    border-radius: 0.6rem;
    background: #111;
    color: #fff;
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
    color: #fff;
}

.app-shell {
    min-height: 100vh;
}

.app-sidebar {
    width: var(--plockly-sidebar-width) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    --bs-offcanvas-bg: #143226;
    --bs-offcanvas-color: #f7fbf8;
    background-color: #143226 !important;
    background-image:
        radial-gradient(circle at 16% 8%, rgba(92, 188, 133, 0.28), transparent 34%),
        linear-gradient(180deg, #173a2b 0%, #10261c 100%) !important;
    color: #f7fbf8;
}

.app-sidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-inner {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: 1.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.brand:hover {
    color: #fff;
}

.brand-mark {
    position: relative;
    display: inline-grid;
    width: 2.3rem;
    height: 2.3rem;
    place-items: center;
    overflow: hidden;
    border-radius: 0.8rem;
    background: linear-gradient(145deg, #67bd89, #2f7d56);
    box-shadow: 0 0.55rem 1.3rem rgba(0, 0, 0, 0.2);
}

.brand-mark::before,
.brand-mark::after {
    position: absolute;
    content: "";
    background: rgba(255, 255, 255, 0.92);
}

.brand-mark::before {
    width: 0.8rem;
    height: 1.25rem;
    transform: translate(-0.1rem, -0.08rem) rotate(38deg);
    border-radius: 90% 15% 90% 15%;
}

.brand-mark::after {
    width: 0.13rem;
    height: 1.35rem;
    transform: translate(0.16rem, 0.28rem) rotate(36deg);
    border-radius: 999px;
}

.sidebar-kicker {
    margin: 1.75rem 0 0.55rem;
    color: rgba(247, 251, 248, 0.76);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: grid;
    gap: 0.32rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.67rem 0.8rem;
    border-radius: 0.72rem;
    color: rgba(247, 251, 248, 0.94);
    font-weight: 620;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sidebar-nav a.active {
    background: #f4fbf6;
    color: #173a2b;
    box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.16);
}

.sidebar-nav a.active .nav-symbol {
    background: #dcefe4;
    color: #1d6845;
}

.sidebar-nav a:hover {
    transform: translateX(2px);
}

.nav-symbol {
    display: inline-grid;
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    place-items: center;
    border-radius: 0.48rem;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.82rem;
    font-weight: 800;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
}

.sidebar-user {
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.075);
}

.sidebar-user-name {
    color: #fff;
    font-weight: 700;
}

.sidebar-user-role {
    color: rgba(247, 251, 248, 0.76);
    font-size: 0.82rem;
}

.sidebar-logout {
    width: 100%;
    margin-top: 0.55rem;
    border: 0;
    background: transparent;
    color: rgba(247, 251, 248, 0.88);
    text-align: left;
}

.sidebar-logout:hover {
    color: #fff;
}

.app-main-wrap {
    min-width: 0;
}

.mobile-topbar {
    position: sticky;
    z-index: 1010;
    top: 0;
    border-bottom: 1px solid var(--plockly-border);
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(14px);
}

.app-main {
    width: 100%;
    max-width: 1540px;
    margin: 0 auto;
    padding: 1.35rem 1rem 3rem;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.page-title {
    margin: 0;
    font-size: clamp(1.55rem, 2.3vw, 2.25rem);
    font-weight: 780;
    letter-spacing: -0.035em;
}

.page-subtitle {
    max-width: 58rem;
    margin: 0.35rem 0 0;
    color: var(--plockly-muted);
}

.surface-card {
    border: 1px solid var(--plockly-border);
    border-radius: var(--plockly-radius);
    background: var(--plockly-surface);
    box-shadow: 0 0.5rem 1.6rem rgba(34, 66, 48, 0.055);
}

.surface-card .card-header {
    border-bottom: 1px solid var(--plockly-border);
    background: transparent;
}

.metric-card {
    position: relative;
    min-height: 9rem;
    overflow: hidden;
}

.metric-card::after {
    position: absolute;
    z-index: 0;
    width: 6.5rem;
    height: 6.5rem;
    right: -4.5rem;
    bottom: -4.5rem;
    border-radius: 50%;
    background: var(--plockly-green-soft);
    content: "";
    pointer-events: none;
}

.metric-card > * {
    position: relative;
    z-index: 1;
}

.metric-label {
    color: var(--plockly-muted);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.metric-value {
    margin-top: 0.42rem;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.metric-meta {
    color: var(--plockly-muted);
    font-size: 0.88rem;
}

.btn-primary {
    --bs-btn-bg: var(--plockly-green);
    --bs-btn-border-color: var(--plockly-green);
    --bs-btn-hover-bg: var(--plockly-green-dark);
    --bs-btn-hover-border-color: var(--plockly-green-dark);
    --bs-btn-active-bg: var(--plockly-green-dark);
    --bs-btn-active-border-color: var(--plockly-green-dark);
    --bs-btn-disabled-bg: var(--plockly-green);
    --bs-btn-disabled-border-color: var(--plockly-green);
}

.btn-outline-primary {
    --bs-btn-color: var(--plockly-green-dark);
    --bs-btn-border-color: #8ab49d;
    --bs-btn-hover-bg: var(--plockly-green-dark);
    --bs-btn-hover-border-color: var(--plockly-green-dark);
    --bs-btn-active-bg: var(--plockly-green-dark);
    --bs-btn-active-border-color: var(--plockly-green-dark);
}

.form-label {
    font-weight: 680;
}

.form-control,
.form-select {
    border-color: #cfdad3;
    border-radius: 0.72rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #7aaa91;
    box-shadow: 0 0 0 0.25rem rgba(47, 125, 86, 0.14);
}

.form-hint {
    color: var(--plockly-muted);
    font-size: 0.84rem;
}

.form-check-input:checked {
    border-color: var(--plockly-green);
    background-color: var(--plockly-green);
}

.table-plockly {
    margin-bottom: 0;
}

.table-plockly > :not(caption) > * > * {
    padding: 0.85rem 0.8rem;
    border-bottom-color: #e7ece9;
    vertical-align: middle;
}

.table-plockly thead th {
    color: #65736b;
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-plockly tbody tr:last-child > * {
    border-bottom: 0;
}

.table-plockly tbody tr:hover {
    background: #f8fbf9;
}

.company-name {
    color: var(--plockly-ink);
    font-weight: 740;
    text-decoration: none;
}

.company-name:hover {
    color: var(--plockly-green-dark);
}

.data-secondary {
    color: var(--plockly-muted);
    font-size: 0.86rem;
}

.google-source {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: #56645d;
    font-size: 0.78rem;
    font-weight: 650;
}

.google-source::before {
    display: inline-block;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0 100%);
    content: "";
}

.rating-value {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 720;
    white-space: nowrap;
}

.rating-value .star {
    color: #c88300;
}

.filter-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.36rem 0.65rem;
    border: 1px solid var(--plockly-border);
    border-radius: 999px;
    background: #f9fbfa;
    color: #526158;
    font-size: 0.8rem;
    font-weight: 650;
}

.empty-state {
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.empty-state-mark {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    place-items: center;
    border-radius: 1.25rem;
    background: var(--plockly-green-soft);
    color: var(--plockly-green-dark);
    font-size: 1.35rem;
    font-weight: 800;
}

.api-estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #d7e7dd;
    border-radius: 0.78rem;
    background: #f2f9f5;
    color: #2b5f43;
    font-size: 0.87rem;
}

.lead-hero {
    background:
        radial-gradient(circle at 100% 0, rgba(92, 171, 125, 0.18), transparent 32%),
        #fff;
}

.definition-list {
    display: grid;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.6fr);
    gap: 0.55rem 1rem;
    margin: 0;
}

.definition-list dt {
    color: var(--plockly-muted);
    font-weight: 650;
}

.definition-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.timeline {
    position: relative;
    display: grid;
    gap: 1rem;
    padding-left: 1.8rem;
}

.timeline::before {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 2px;
    background: #dbe7df;
    content: "";
}

.timeline-item {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.8rem;
    background: #fff;
}

.timeline-item::before {
    position: absolute;
    top: 1.15rem;
    left: -1.72rem;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--plockly-green);
    box-shadow: 0 0 0 1px #bdd4c5;
    content: "";
}

.system-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e8edea;
}

.system-check:last-child {
    border-bottom: 0;
}

.check-dot {
    display: inline-block;
    width: 0.68rem;
    height: 0.68rem;
    margin-right: 0.45rem;
    border-radius: 50%;
}

.check-dot.ok {
    background: #2f8b59;
}

.check-dot.fail {
    background: #c54242;
}

.check-dot.warning {
    background: #d79a1f;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(74, 158, 107, 0.35), transparent 30%),
        radial-gradient(circle at 88% 90%, rgba(59, 128, 87, 0.24), transparent 33%),
        #102219;
}

.login-card {
    width: min(100%, 31rem);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
}

.login-card .brand {
    color: var(--plockly-ink);
}

.login-card .brand:hover {
    color: var(--plockly-ink);
}

.break-anywhere {
    overflow-wrap: anywhere;
}

.result-feedback {
    min-height: 1.2rem;
    color: #a02323;
    font-size: 0.78rem;
}

@media (min-width: 992px) {
    .app-shell {
        display: grid;
        grid-template-columns: var(--plockly-sidebar-width) minmax(0, 1fr);
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        visibility: visible !important;
        transform: none !important;
    }

    .app-main {
        padding: 2rem 2.25rem 4rem;
    }
}

@media (max-width: 767.98px) {
    .page-header {
        flex-direction: column;
    }

    .page-header .btn,
    .page-header .btn-group {
        width: 100%;
    }

    .definition-list {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .definition-list dd {
        margin-bottom: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.google-content-footer {
    padding: 0.75rem 1rem 0.9rem;
    border-top: 1px solid var(--plockly-border);
    background: #fbfcfb;
}

.google-attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    color: #5e5e5e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
}

.google-maps-attribution {
    color: #5e5e5e;
    white-space: nowrap;
}

.google-attribution a {
    color: #4c5a52;
}

.google-attribution-separator {
    margin-inline: 0.1rem;
}

.google-rating-note,
.ranking-disclosure {
    color: #5e5e5e;
    font-size: 0.8125rem;
}

.ranking-disclosure summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 650;
}

.config-list {
    display: grid;
    gap: 0;
}

.config-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--plockly-border);
}

.config-list > div:last-child {
    border-bottom: 0;
}

.config-list dt {
    color: var(--plockly-muted);
    font-weight: 650;
}

.config-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.error-code {
    color: var(--plockly-green);
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
}

.sidebar-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.75rem;
    font-size: 0.72rem;
}

.sidebar-legal a {
    color: rgba(255, 255, 255, 0.84);
}

.login-legal {
    color: var(--plockly-muted);
}

.login-legal a {
    color: var(--plockly-muted);
}

.public-page {
    min-height: 100vh;
    background: var(--plockly-bg);
}

.public-header {
    border-bottom: 1px solid var(--plockly-border);
    background: rgba(255, 255, 255, 0.96);
}

.public-header-inner {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.public-content {
    max-width: 60rem;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.public-footer {
    padding: 1.5rem 0;
    border-top: 1px solid var(--plockly-border);
    color: var(--plockly-muted);
    background: #fff;
    font-size: 0.82rem;
}

.legal-document section + section {
    margin-top: 2rem;
}

.legal-document h2 {
    margin-bottom: 0.7rem;
    font-size: 1.15rem;
}

.legal-document p,
.legal-document address {
    line-height: 1.7;
}

.eyebrow {
    color: var(--plockly-green-dark);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    .public-header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .public-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .config-list > div {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.login-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.78rem;
}

.public-footer a {
    color: inherit;
}

/* Browser-Installer */
.install-body {
    background:
        radial-gradient(circle at 12% 8%, rgba(72, 155, 108, 0.16), transparent 28rem),
        linear-gradient(180deg, #f8fbf9 0%, var(--plockly-bg) 100%);
}

.install-page {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.install-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.install-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.install-brand {
    flex: 0 0 auto;
    padding: 0.8rem;
    border-radius: 1rem;
    background: #12251b;
}

.install-kicker {
    color: var(--plockly-green-dark);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.install-title {
    margin: 0.1rem 0 0;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.install-subtitle {
    margin: 0.2rem 0 0;
    color: var(--plockly-muted);
}

.install-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.install-progress-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--plockly-muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.install-progress-item.is-active {
    border-color: #9dc6ad;
    background: var(--plockly-green-soft);
    color: var(--plockly-green-dark);
}

.install-progress-number {
    display: inline-grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    place-items: center;
    border-radius: 999px;
    background: #e5ebe7;
    color: #5d6d64;
}

.install-progress-item.is-active .install-progress-number {
    background: var(--plockly-green);
    color: #fff;
}

.install-card {
    overflow: hidden;
}

.install-card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.install-icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 1rem;
    background: var(--plockly-green-soft);
    color: var(--plockly-green-dark);
    font-size: 1.15rem;
    font-weight: 850;
}

.install-file-path {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 0.8rem;
    padding: 0.75rem 0.9rem;
    overflow-wrap: anywhere;
    border: 1px solid #cddbd2;
    border-radius: 0.7rem;
    background: #f6f9f7;
}

.install-database-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.install-database-summary > div {
    padding: 0.85rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.75rem;
    background: #f8faf9;
}

.install-database-summary span,
.install-database-summary strong {
    display: block;
}

.install-database-summary span {
    margin-bottom: 0.2rem;
    color: var(--plockly-muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.install-database-summary strong {
    overflow-wrap: anywhere;
}

.install-section-heading {
    padding-top: 0.5rem;
    border-top: 1px solid var(--plockly-border);
}

.install-complete {
    padding: clamp(1.5rem, 5vw, 3.5rem);
    text-align: center;
}

.install-complete-mark {
    display: inline-grid;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    place-items: center;
    border-radius: 50%;
    background: var(--plockly-green-soft);
    color: var(--plockly-green-dark);
    font-size: 2rem;
    font-weight: 900;
}

.install-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.5rem 0 0;
    color: var(--plockly-muted);
    font-size: 0.78rem;
}

@media (max-width: 767.98px) {
    .install-page {
        padding-top: 1rem;
    }

    .install-header {
        align-items: flex-start;
    }

    .install-brand {
        padding: 0.55rem;
    }

    .install-brand > span:last-child {
        display: none;
    }

    .install-progress {
        grid-template-columns: 1fr;
    }

    .install-card-body {
        grid-template-columns: 1fr;
    }

    .install-database-summary {
        grid-template-columns: 1fr;
    }
}

/* MVP 2: Qualifizierung, Scoring, Quellen und Suchvorlagen */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 0.85rem;
}

.template-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.8rem;
    background: #f9fbfa;
}

.template-save {
    padding: 1rem;
    border: 1px dashed #a9c6b5;
    border-radius: 0.85rem;
    background: #f6fbf8;
}

.min-width-0 {
    min-width: 0;
}

.lead-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7rem;
    min-height: 1.65rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
}

.score-excellent {
    border-color: #57a878;
    background: #dff3e7;
    color: #145c35;
}

.score-good {
    border-color: #8cb99f;
    background: #ebf5ef;
    color: #236746;
}

.score-medium {
    border-color: #dec56d;
    background: #fff6d7;
    color: #735d0a;
}

.score-low {
    border-color: #cfd7d2;
    background: #f1f4f2;
    color: #5d6962;
}

.score-ring {
    display: inline-grid;
    width: 5.1rem;
    height: 5.1rem;
    flex: 0 0 5.1rem;
    place-content: center;
    border: 0.35rem solid currentColor;
    border-radius: 50%;
    text-align: center;
}

.score-ring strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1;
}

.score-ring span {
    margin-top: 0.15rem;
    font-size: 0.72rem;
}

.score-card .progress {
    height: 0.7rem;
    background: #e7eee9;
}

.score-card .progress-bar {
    background: var(--plockly-green);
}

.score-breakdown {
    display: grid;
    gap: 0.35rem;
    padding: 0;
    list-style: none;
}

.score-breakdown li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--plockly-muted);
    font-size: 0.86rem;
}

.score-breakdown li.active {
    color: var(--plockly-ink);
}

.qualification-fieldset {
    padding: 1rem;
    border: 1px solid #cfe1d6;
    border-radius: 0.9rem;
    background: #f6fbf8;
}

.qualification-check {
    display: flex;
    gap: 0.7rem;
    height: 100%;
    padding: 0.85rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.78rem;
    background: #fff;
    cursor: pointer;
}

.qualification-check .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.qualification-check small {
    display: block;
    margin-top: 0.2rem;
    color: var(--plockly-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.source-form {
    padding: 1rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.9rem;
    background: #f9fbfa;
}

.quick-status-form {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    gap: 0.4rem;
    min-width: 13rem;
}

.filter-check {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
}

.metric-link {
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metric-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 0.8rem 2rem rgba(34, 66, 48, 0.1);
}

.lead-table .lead-company-cell {
    min-width: 15rem;
}

.google-live-card {
    position: relative;
    overflow: hidden;
}

.lead-google-inline-panel {
    border: 1px solid #cfe1d6;
    border-radius: 0.9rem;
    background: #f8fcf9;
}

.lead-google-data {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.lead-google-data > div {
    min-width: 0;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.75rem;
    background: #fff;
}

.lead-google-data dt {
    margin-bottom: 0.2rem;
    color: var(--plockly-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.lead-google-data dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .lead-google-data {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .template-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-status-form {
        min-width: 12rem;
    }

    .score-ring {
        width: 4.4rem;
        height: 4.4rem;
        flex-basis: 4.4rem;
    }
}


.sidebar-version {
    margin-top: 0.65rem;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
}

/* v0.2.1: lokaler Google-API-Verbrauch */
.api-usage-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid #cfe1d6;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #f4faf6 0%, #ffffff 100%);
}

.api-usage-banner > div {
    display: grid;
    gap: 0.14rem;
}

.api-usage-banner strong {
    color: var(--plockly-ink);
    font-size: 1rem;
}

.api-usage-banner > div > span:last-child {
    color: var(--plockly-muted);
    font-size: 0.82rem;
}

.api-usage-kicker {
    color: var(--plockly-green-dark);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.api-estimate > div {
    display: grid;
    gap: 0.08rem;
}

.api-estimate small {
    color: #496a58;
    text-align: right;
}

.api-estimate.is-warning {
    border-color: #e2cb78;
    background: #fff9e6;
    color: #705b0c;
}

.api-estimate.is-danger {
    border-color: #e0a5a5;
    background: #fff1f1;
    color: #8a2727;
}

.api-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
}

.api-usage-card {
    padding: 1rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.9rem;
    background: #f9fbfa;
}

.api-usage-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.api-usage-number {
    margin-top: 0.65rem;
    color: var(--plockly-ink);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 850;
    line-height: 1;
}

.api-usage-number span {
    color: var(--plockly-muted);
    font-size: 0.9rem;
    font-weight: 650;
}

.api-usage-card .progress {
    height: 0.65rem;
    margin-top: 0.85rem;
    background: #e3ebe6;
}

.api-usage-card .progress-bar {
    background: var(--plockly-green);
}

.api-usage-card.is-warning .progress-bar {
    background: #b28a12;
}

.api-usage-card.is-danger .progress-bar {
    background: #b94747;
}

.api-usage-price {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.85rem;
    color: var(--plockly-muted);
    font-size: 0.82rem;
}

@media (max-width: 575.98px) {
    .api-usage-banner,
    .api-estimate {
        align-items: flex-start;
        flex-direction: column;
    }

    .api-estimate small {
        text-align: left;
    }
}

.api-usage-sku {
    color: var(--plockly-muted);
    font-size: 0.72rem;
}

.api-usage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--plockly-border);
    color: var(--plockly-muted);
    font-size: 0.78rem;
}

/* v0.2.2: getrennte API-Verbrauchsansicht und gespeicherte Suchreferenzen */
.api-usage-banner.is-warning,
.api-usage-overview.is-warning {
    border-color: #dfc86f;
    background: linear-gradient(135deg, #fff9e6 0%, #fffdf7 100%);
    box-shadow: 0 0.6rem 1.8rem rgba(154, 117, 0, 0.1);
}

.api-usage-banner.is-danger,
.api-usage-overview.is-danger {
    border-color: #e0a5a5;
    background: linear-gradient(135deg, #fff1f1 0%, #fffafa 100%);
    box-shadow: 0 0.6rem 1.8rem rgba(142, 42, 42, 0.1);
}

.api-usage-inline-warning {
    padding: 0.75rem 0.9rem;
    border: 1px solid #dfc86f;
    border-radius: 0.72rem;
    background: #fff7d9;
    color: #6d580d;
    font-size: 0.86rem;
}

.api-usage-inline-warning.is-danger {
    border-color: #dfa4a4;
    background: #ffeded;
    color: #8b2a2a;
}

.search-history-table td {
    min-width: 8rem;
}

.search-history-table td:first-child {
    min-width: 15rem;
}

.search-history-actions,
.stored-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.search-delta,
.search-comparison-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.search-comparison {
    border-color: #bed9c8;
    background: linear-gradient(135deg, #f4faf6 0%, #ffffff 100%);
}

.search-comparison-values {
    justify-content: flex-end;
}

.search-comparison-value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--plockly-border);
    border-radius: 999px;
    background: #fff;
    color: var(--plockly-muted);
    font-size: 0.82rem;
}

.search-comparison-value strong {
    color: var(--plockly-ink);
    font-size: 1rem;
}

.search-comparison-value.is-positive {
    border-color: #9cc8ad;
    background: #edf8f1;
    color: #276645;
}

.search-run-stat {
    min-height: 7.6rem;
}

.search-run-stat .metric-value {
    font-size: 1.85rem;
}

.search-parameter-list {
    grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1.8fr);
}

.stored-results-table td:first-child {
    width: 5rem;
    color: var(--plockly-muted);
    font-variant-numeric: tabular-nums;
}

.stored-result-row.is-new > * {
    background: #f0faf4;
}

.stored-result-row.is-new:hover > * {
    background: #e9f7ef;
}

.stored-result-id {
    display: inline-block;
    max-width: 100%;
    margin-top: 0.25rem;
    color: #607168;
    font-size: 0.74rem;
    overflow-wrap: anywhere;
}

.comparison-panel {
    display: grid;
    gap: 0.25rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.8rem;
    background: #f9fbfa;
}

.comparison-panel strong {
    color: var(--plockly-ink);
}

.comparison-panel span {
    color: var(--plockly-muted);
    font-size: 0.84rem;
}

.comparison-panel.is-positive {
    border-color: #a8cfb7;
    background: #f0faf4;
}

.removed-results > summary {
    color: var(--plockly-green-dark);
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .search-history-actions,
    .stored-result-actions,
    .search-comparison-values {
        justify-content: flex-start;
    }

    .search-parameter-list {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .search-parameter-list dd {
        margin-bottom: 0.7rem;
    }
}

/* v0.2.3: Google-Details nur nach bewusstem Einzelabruf */
.google-live-placeholder {
    padding: 1rem;
    border: 1px dashed var(--plockly-border-strong, #9bb4a4);
    border-radius: 0.9rem;
    background: var(--plockly-surface-soft, #f4f8f5);
}

.google-live-placeholder strong {
    display: block;
    margin-bottom: 0.25rem;
}

.google-live-card[aria-busy="true"] {
    opacity: 0.78;
}

.google-live-card .js-google-live-feedback:not(:empty) {
    color: var(--bs-danger-text-emphasis, #842029);
    font-size: 0.85rem;
}

/* v0.2.4: Suchverlauf verwalten und Archivansicht an Ergebnisdarstellung angleichen */
.search-history-select {
    width: 3rem;
    min-width: 3rem !important;
    text-align: center;
    vertical-align: middle;
}

.search-history-select .form-check-input {
    float: none;
    margin: 0;
}

.archived-results-table td:first-child {
    min-width: 18rem;
}

.archived-results-table td:nth-child(2),
.archived-results-table td:nth-child(3),
.archived-results-table td:nth-child(4) {
    min-width: 10rem;
}

.archive-not-stored {
    color: var(--plockly-muted);
    font-weight: 650;
}

.archive-data-source {
    margin-top: 0.2rem;
    color: var(--plockly-muted);
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    .search-history-select {
        width: 2.5rem;
        min-width: 2.5rem !important;
    }
}

/* 0.2.5: Sammelübernahme und Herkunftssuche */
.result-bulk-toolbar {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--plockly-border);
    background: linear-gradient(135deg, #f8fcf9 0%, var(--plockly-green-soft) 100%);
}

.result-select-column {
    width: 3.25rem;
    min-width: 3.25rem;
    text-align: center;
    vertical-align: middle !important;
}

.result-select-column .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.result-already-selected {
    display: inline-grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
    background: var(--plockly-green-soft);
    color: var(--plockly-green-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.table-plockly tbody tr.is-selected-for-lead > * {
    background: #eef8f2;
}

.lead-source-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    color: var(--plockly-muted);
    font-size: 0.82rem;
}

.lead-source-line a {
    font-weight: 650;
}

.lead-source-banner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    padding: 0.42rem 0.68rem;
    border: 1px solid var(--plockly-border);
    border-radius: 999px;
    background: var(--plockly-surface);
    color: var(--plockly-muted);
    font-size: 0.86rem;
}

.lead-source-banner strong,
.lead-source-banner a {
    color: var(--plockly-ink);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .result-bulk-toolbar {
        padding: 0.9rem;
    }

    .result-select-column {
        width: 2.75rem;
        min-width: 2.75rem;
    }
}

/* 0.2.6: kompakte Lead-Arbeitsansichten */
.lead-filter-card {
    position: relative;
}

.lead-filter-more {
    border-top: 1px solid var(--plockly-border);
}

.lead-filter-more > summary,
.lead-edit-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    color: var(--plockly-ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.lead-filter-more > summary::-webkit-details-marker,
.lead-edit-details > summary::-webkit-details-marker {
    display: none;
}

.lead-filter-more > summary::after,
.lead-edit-details > summary::after {
    flex: 0 0 auto;
    content: "+";
    color: var(--plockly-muted);
    font-size: 1.2rem;
    line-height: 1;
}

.lead-filter-more[open] > summary::after,
.lead-edit-details[open] > summary::after {
    content: "−";
}

.lead-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.9rem;
    background: var(--plockly-surface);
    box-shadow: 0 0.35rem 1rem rgba(34, 66, 48, 0.04);
}

.lead-selection-count {
    color: var(--plockly-muted);
    font-size: 0.85rem;
}

.lead-select-column {
    width: 3rem;
    min-width: 3rem !important;
    text-align: center;
    vertical-align: middle !important;
}

.lead-select-column .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    cursor: pointer;
}

.lead-list-table {
    font-size: 0.9rem;
}

.lead-list-table th,
.lead-list-table td {
    padding: 0.68rem 0.65rem;
}

.lead-list-table th {
    white-space: nowrap;
}

.lead-list-table tbody tr.is-selected-for-delete > * {
    background: #fff5f5;
}

.lead-list-meta,
.lead-pipeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-top: 0.28rem;
    color: var(--plockly-muted);
    font-size: 0.78rem;
}

.lead-list-meta span + span::before,
.lead-pipeline-meta span + span::before {
    margin-right: 0.6rem;
    color: var(--plockly-border-strong);
    content: "•";
}

.lead-contact-stack {
    display: grid;
    gap: 0.28rem;
    min-width: 12rem;
}

.lead-contact-stack a {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-contact-stack a span,
.lead-contact-status > span:first-child {
    flex: 0 0 2.3rem;
    color: var(--plockly-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.lead-contact-status {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    max-width: 18rem;
    color: var(--plockly-muted);
}

.lead-contact-status > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-list-table .quick-status-form {
    grid-template-columns: minmax(7.5rem, 1fr) auto;
    min-width: 10.5rem;
}

.lead-score-compact {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    min-width: 4.6rem;
}

.lead-follow-up {
    display: grid;
    justify-items: start;
    gap: 0.3rem;
    min-width: 8rem;
}

.lead-follow-up strong {
    font-size: 0.84rem;
    font-weight: 650;
}

.lead-follow-up.is-due strong {
    color: #7a4f00;
}

.lead-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: max-content;
}

.lead-contact-workbench {
    scroll-margin-top: 1rem;
}

.lead-contact-actions .result-feedback:empty {
    display: none;
}

.lead-address-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.82rem;
    background: #fbfdfc;
}

.lead-address-overview > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.lead-address-overview span {
    color: var(--plockly-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.lead-address-overview address {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--plockly-ink);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 650;
}

.lead-address-overview-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.lead-address-overview.is-muted {
    background: #f8faf9;
}

.lead-contact-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.lead-contact-overview-item {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.82rem;
    background: #fbfdfc;
}

.lead-contact-overview-item > span {
    color: var(--plockly-muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.lead-contact-overview-item strong {
    min-width: 0;
    overflow: hidden;
    color: var(--plockly-ink);
    font-size: 0.95rem;
    text-overflow: ellipsis;
}

.lead-contact-overview-item a,
.lead-contact-overview-item small {
    font-size: 0.8rem;
}

.lead-contact-overview-item.is-muted {
    background: #f8faf9;
}

.lead-contact-lock {
    padding: 0.7rem 0.8rem 0.7rem 2.35rem;
    border: 1px solid #edd4d4;
    border-radius: 0.75rem;
    background: #fffafa;
}

.lead-contact-lock .form-check-input {
    margin-left: -1.55rem;
}

.lead-form-section {
    padding: 1rem;
    border: 1px solid #cfe1d6;
    border-radius: 0.95rem;
    background: #f8fcf9;
    scroll-margin-top: 1rem;
}

.lead-address-input-group > .form-control,
.lead-phone-input-group > .form-control {
    min-width: 0;
}

.lead-address-input-group > .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.lead-phone-input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.lead-phone-input-group > .btn {
    display: inline-flex;
    align-items: center;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    white-space: nowrap;
}

.lead-readiness-fieldset {
    padding: 0;
    border: 0;
}

.lead-readiness-fieldset legend {
    float: none;
    width: auto;
}

.lead-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.lead-check-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.72rem;
    background: #fff;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
}

.lead-check-toggle .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.lead-edit-details {
    padding: 0 0.9rem 0.9rem;
    border: 1px solid var(--plockly-border);
    border-radius: 0.85rem;
    background: #fbfcfb;
}

.lead-edit-details > summary {
    padding: 0.85rem 0 0;
}

.lead-edit-details[open] > summary {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--plockly-border);
}

.lead-save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--plockly-border);
}

.lead-technical-details {
    max-width: min(100%, 34rem);
    color: var(--plockly-muted);
    font-size: 0.78rem;
}

.lead-technical-details summary {
    cursor: pointer;
}

@media (min-width: 1200px) {
    .lead-work-sidebar {
        position: sticky;
        top: 1rem;
    }
}

@media (max-width: 767.98px) {
    .lead-bulk-toolbar {
        align-items: stretch;
    }

    .lead-bulk-toolbar .btn {
        width: 100%;
    }

    .lead-readiness-grid {
        grid-template-columns: 1fr;
    }

    .lead-contact-overview-grid,
    .lead-google-data {
        grid-template-columns: 1fr;
    }

    .lead-address-overview {
        align-items: stretch;
        flex-direction: column;
    }

    .lead-address-overview-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .lead-address-overview-actions .btn {
        width: 100%;
    }

    .lead-address-input-group {
        flex-wrap: wrap;
    }

    .lead-address-input-group > .form-control,
    .lead-address-input-group > .btn {
        width: 100%;
        margin-left: 0;
        border-radius: var(--bs-border-radius);
    }

    .lead-address-input-group > .btn {
        margin-top: 0.5rem;
    }

    .lead-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .lead-save-bar .btn {
        width: 100%;
    }
}
