/* ================================================================= */
/* SEO Dashboard – Zusatzklassen zum gamifizierten Grunddesign        */
/* (Basis-Klassen wie .wrap/.h1-3/.card/.btn-*/.status-label/.trend/  */
/*  .meta/.placeholder kommen bereits global aus contentpackage.)     */
/* ================================================================= */

.tx-dashboard * { box-sizing: border-box; }
.tx-dashboard { font-family: "Maven Pro", sans-serif; }

/* ---------------------------------------------------------------- */
/* Anker-Ziele der Header-Navigation (siehe dash:isDashboardOverview
   ViewHelper + PageView/Partials/Header.html): scroll-margin-top hält
   die Abschnitte beim Anker-Scroll unter dem sticky Header frei. Die
   Variable --dashboard-header-offset wird von dashboard.js anhand der
   tatsächlichen Header-Höhe gesetzt (die je nach Viewport-Breite variiert,
   u.a. weil die Nav-Zeile umbricht) - 100px als Fallback, bevor JS greift. */
/* ---------------------------------------------------------------- */
#zusammenfassung, #ki-assistenten, #aufgaben, #vier-fragen, #datenquellen {
    scroll-margin-top: var(--dashboard-header-offset, 100px);
}

/* ---------------------------------------------------------------- */
/* Hero / Missionen: Badge-Ring, Mission-Rail                        */
/* ---------------------------------------------------------------- */
.badge-ring {
    width: 90px; height: 90px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.badge-ring .icon { color: #fff; }
.badge-ring.status-good { background: #23543C; }
.badge-ring.status-okay { background: #F0C24A; }
.badge-ring.status-okay .icon { color: #1C1C1C; }
.badge-ring.status-act { background: #8B2E1F; }

.mission-rail {
    color: #fff; padding: 36px 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; text-align: center;
}
.mission-rail.mission-green { background: #43745C; }
.mission-rail.mission-gold  { background: linear-gradient(160deg, #B8860B, #8B6508); }
.mission-rail.mission-red   { background: linear-gradient(160deg, #8B2E1F, #5a1d13); }
.mission-rail.mission-dark  { background: #1C1C1C; }

.mission-detail-hero {
    color: #fff; padding: 60px 0; position: relative; overflow: hidden;
}
.mission-detail-hero.good { background: linear-gradient(135deg, #43745C 0%, #2E5340 100%); }
.mission-detail-hero.okay { background: linear-gradient(160deg, #B8860B, #8B6508); }
.mission-detail-hero.act  { background: linear-gradient(160deg, #8B2E1F, #5a1d13); }
.mission-detail-hero .status-label { color: #fff; }
.mission-detail-hero .status-label .glyph { background: rgba(255,255,255,0.25); }

.step-number {
    width: 36px; height: 36px; border-radius: 50%;
    background: #43745C; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; margin-top: 2px;
}

/* Numbers-Akkordeon (Fortschritt / Zahlen dahinter) */
details.numbers { border-top: 1px solid #eee; margin-top: 24px; }
details.numbers > summary {
    list-style: none; cursor: pointer; padding: 16px 0;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: #1C1C1C;
}
details.numbers > summary::-webkit-details-marker { display: none; }
details.numbers .chev { color: #43745C; transition: transform 0.3s; }
details.numbers[open] .chev { transform: rotate(180deg); }
.metric-mini { background: #f6f6f4; padding: 14px 16px; border-radius: 8px; }

/* Site Audit: Problem-Details-Akkordeon (verschachtelt in details.numbers) */
details.issue-row { border-top: 1px dashed #eee; }
details.issue-row > summary {
    list-style: none; cursor: pointer; padding: 12px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 14px; color: #1C1C1C;
}
details.issue-row > summary::-webkit-details-marker { display: none; }
details.issue-row .chev { color: #43745C; transition: transform 0.3s; flex-shrink: 0; }
details.issue-row[open] .chev { transform: rotate(180deg); }
details.issue-row ul { margin: 0 0 14px; padding-left: 20px; }
details.issue-row li { font-size: 13px; padding: 3px 0; color: #555; }

/* ---------------------------------------------------------------- */
/* Weekly Quests                                                     */
/* ---------------------------------------------------------------- */
.quest-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: #fff; }
.quest-card.quest-boss  { background: linear-gradient(160deg,#8B2E1F,#5a1d13); }
.quest-card.quest-side  { background: linear-gradient(160deg,#B8860B,#8B6508); }
.quest-card.quest-quick { background: linear-gradient(160deg,#43745C,#2E5340); }
.quest-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.quest-glyph { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.quest-glyph.quest-boss  { clip-path: polygon(50% 0, 100% 100%, 0 100%); align-items: flex-end; padding-bottom: 2px; }
.quest-glyph.quest-side  { border-radius: 4px; transform: rotate(45deg); }
.quest-glyph.quest-side i { transform: rotate(-45deg); }
.quest-glyph.quest-quick { border-radius: 50%; }

/* ---------------------------------------------------------------- */
/* Ziel-Fortschritt (Mein Profil)                                     */
/* ---------------------------------------------------------------- */
.goal-bar { border-radius: 6px; transition: width 0.6s ease; }
.goal-bar.goal-green { background: #43745C; }
.goal-bar.goal-gold  { background: #F0C24A; }
.goal-bar.goal-red   { background: #8B2E1F; }
.goal-bar.goal-blue  { background: #013567; }

/* ---------------------------------------------------------------- */
/* Dekorativ: Skill-Radar-Platzhalter                                 */
/* ---------------------------------------------------------------- */
.radar-placeholder {
    background: repeating-linear-gradient(135deg, #f0efe9, #f0efe9 8px, #e8e6dd 8px, #e8e6dd 16px);
    border: 1px dashed #b8b5a8; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #888; font-size: 13px; text-align: center; padding: 20px;
}

/* ---------------------------------------------------------------- */
/* Layout-Hilfen (Datenquellen-Seiten)                                */
/* ---------------------------------------------------------------- */
.section-title { font-size: 20px; font-weight: 600; color: #1C1C1C; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.mt { margin-top: 20px; }
.empty-note { color: #888; font-size: 14px; padding: 10px 0; }
.info-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 13px; border-radius: 8px; padding: 10px 14px; margin-top: 12px; }
.info-box.warn { background: #f6e4e0; border-color: #e2b3a8; color: #8B2E1F; }

/* KPI-Karten */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.kpi-card { background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 18px 20px; }
.kpi-card .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #888; margin-bottom: 6px; }
.kpi-card .value { font-size: 26px; font-weight: 700; color: #1C1C1C; margin-bottom: 8px; }
.kpi-card .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kpi-card .compare { font-size: 12px; color: #888; }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.badge small { font-weight: 800; font-size: 10px; opacity: 0.75; }
.badge.up   { background: #e3efe9; color: #2E5340; }
.badge.down { background: #f6e4e0; color: #8B2E1F; }
.badge.flat { background: #eee; color: #888; }
.badge[data-tip] { cursor: help; }

/* Kennzahlen im Überblick (Analyse-Block): zwei Mini-Balken je Kennzahl
   (aktueller Monat vs. Vormonat), Breite ist relativ zum jeweils größeren
   der beiden Werte skaliert — dadurch funktioniert dieselbe Balkenoptik für
   Kennzahlen mit völlig unterschiedlichen Größenordnungen (Impressionen in
   Tausenden vs. Engagement-Rate in %). Inline width = korrekter Endzustand
   ohne JS/bei reduzierter Bewegung; die Animation ist rein progressive
   enhancement (siehe dashboard.js "Reveal-Animationen"). */
.overview-kpi-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.overview-kpi-bars .bar { height: 6px; background: #f0efe9; border-radius: 3px; overflow: hidden; }
.overview-kpi-bars .bar-fill { display: block; height: 100%; border-radius: 3px; }
.overview-kpi-bars .bar-current .bar-fill { background: #43745C; }
.overview-kpi-bars .bar-previous .bar-fill { background: #ccc; }
@media (prefers-reduced-motion: no-preference) {
    .overview-kpi-bars .bar-fill { width: 0 !important; transition: width 1s cubic-bezier(.22,.85,.32,1); }
    .overview-kpi-bars.in-view .bar-fill { width: var(--target) !important; }
}

/* Tabellen */
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eee; }
.table-wrap th { color: #888; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.table-wrap td.num, .table-wrap th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap td.key { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-delta { color: #2E5340; font-weight: 700; }
.neg-delta { color: #8B2E1F; font-weight: 700; }

/* Charts */
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; font-size: 13px; color: #555; }
.chart-legend .item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.donut-card { display: flex; flex-direction: column; }
.donut-flex { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 140px; font-size: 13px; }
.donut-legend .row { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.donut-legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-legend .pct { color: #888; font-variant-numeric: tabular-nums; }

/* Website-Gesundheit: Health-Score-Ring auf dem Haupt-Dashboard */
.health-gauge svg { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .health-gauge .arc { animation: health-gauge-fill 1.1s ease-out forwards; }
    @keyframes health-gauge-fill {
        from { stroke-dashoffset: var(--circumference); }
        to { stroke-dashoffset: var(--offset); }
    }
}

/* SE Ranking Standort-Karten */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.site-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.site-card .site-url { font-size: 13px; color: #888; margin-bottom: 14px; word-break: break-all; }
.site-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.site-metric { display: flex; flex-direction: column; }
.site-metric-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.04em; }
.site-metric-value { font-size: 17px; font-weight: 700; }

/* Google Places */
.places-profile h2 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.places-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.places-rating .stars { color: #F0C24A; font-size: 20px; letter-spacing: 2px; }
.places-rating .rating-value { font-weight: 700; font-size: 18px; }
.places-rating .rating-count { color: #888; font-size: 14px; }
.places-info { display: flex; flex-direction: column; gap: 6px; }
.places-info-row strong { margin-right: 6px; }
.places-info-row a { color: #43745C; word-break: break-all; }
.places-hours-list { list-style: none; }
.places-hours-list li { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.places-hours-list li:last-child { border-bottom: none; }
.places-reviews { display: flex; flex-direction: column; gap: 14px; }
.review-card p { margin-top: 8px; font-size: 14px; line-height: 1.55; }
.review-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-rating { color: #F0C24A; font-size: 15px; letter-spacing: 1px; }
.review-time { color: #888; font-size: 13px; margin-left: auto; }

/* KI-Analyse */
.ai-summary-card { background: linear-gradient(135deg, #f6f6f4 0%, #eef2e9 100%); }
.ai-insights { list-style: none; }
.ai-insights li { padding: 9px 0 9px 28px; position: relative; border-bottom: 1px dashed #eee; font-size: 15px; }
.ai-insights li:last-child { border-bottom: none; }
.ai-insights li::before { content: "\2192"; position: absolute; left: 5px; color: #43745C; font-weight: 700; }

/* KI-Analyse: Chancen/Risiken/Ursachen-Akkordeons. Farbe steckt bewusst nur
   in Rahmen/Icon/Chevron, nie im Fließtext (bleibt immer #1C1C1C) – so ist
   der Kontrast unabhängig von der Kategorie-Farbe immer AA-konform. */
.ai-accordion { border-radius: 10px; border-left: 4px solid #888; background: #fff; overflow: hidden; }
.ai-accordion > summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 15px; font-weight: 600; color: #1C1C1C;
}
.ai-accordion > summary::-webkit-details-marker { display: none; }
.ai-accordion .chev { color: #888; transition: transform 0.3s; flex-shrink: 0; }
.ai-accordion[open] .chev { transform: rotate(180deg); }
.ai-accordion-body { padding: 0 20px 20px; }
.ai-accordion.ai-chances { background: rgba(67, 116, 92, 0.07); border-left-color: #43745C; }
.ai-accordion.ai-chances .chev, .ai-accordion.ai-chances summary i:first-child { color: #43745C; }
.ai-accordion.ai-risks { background: rgba(139, 46, 31, 0.07); border-left-color: #8B2E1F; }
.ai-accordion.ai-risks .chev, .ai-accordion.ai-risks summary i:first-child { color: #8B2E1F; }
.ai-accordion.ai-causes { background: rgba(1, 53, 103, 0.07); border-left-color: #013567; }
.ai-accordion.ai-causes .chev, .ai-accordion.ai-causes summary i:first-child { color: #013567; }

.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.rec-card { border-radius: 10px; border: 1px solid #eee; border-left: 5px solid #888; padding: 16px 18px; background: #fff; }
.rec-card.p-hoch    { border-left-color: #8B2E1F; }
.rec-card.p-mittel  { border-left-color: #B8860B; }
.rec-card.p-niedrig { border-left-color: #43745C; }
.rec-card .rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.rec-card h4 { font-size: 16px; font-weight: 600; }
.rec-card p { font-size: 14px; color: #555; }
.prio { flex-shrink: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; letter-spacing: 0.03em; }
.prio-hoch    { background: #f6e4e0; color: #8B2E1F; }
.prio-mittel  { background: #fbeecb; color: #8B6508; }
.prio-niedrig { background: #e3efe9; color: #2E5340; }

/* Onboarding: Verarbeitungs-Animation (siehe OnboardingController::processingAction()) */
.onboarding-spinner {
    width: 56px; height: 56px; margin: 0 auto;
    border: 5px solid #e3efe9; border-top-color: #43745C; border-radius: 50%;
    animation: onboarding-spin 0.9s linear infinite;
}
@keyframes onboarding-spin {
    to { transform: rotate(360deg); }
}

/* Tooltips */
.tip-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: #ccc; color: #fff; font-size: 10px; font-weight: 800;
    font-style: normal; font-family: Georgia, serif;
    cursor: help; margin-left: 5px; vertical-align: -1px; flex-shrink: 0; user-select: none;
}
.tip-icon:hover, .tip-icon:focus { background: #43745C; outline: none; }
th .tip-icon { width: 13px; height: 13px; font-size: 9px; }
#tooltip {
    position: fixed; z-index: 2000; max-width: 300px;
    background: #1C1C1C; color: #fff; font-size: 13px; font-weight: 400; line-height: 1.45;
    border-radius: 8px; padding: 9px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
    pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
#tooltip.visible { opacity: 1; }

/* ---------------------------------------------------------------- */
/* Beratungs-Popup (Modal)                                           */
/* ---------------------------------------------------------------- */
.consultation-modal {
    position: fixed; inset: 0; background: rgba(28,28,28,0.6); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; padding: 30px; z-index: 1000;
}
.consultation-modal.is-open { display: flex; }
.consultation-modal-overlay { position: absolute; inset: 0; }
.consultation-modal-card {
    width: 100%; max-width: 960px; padding: 0; overflow: hidden; position: relative;
    box-shadow: 0 20px 80px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto;
}
.consultation-modal-close {
    position: absolute; top: 20px; right: 20px; z-index: 5;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #eee; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: #888; font-size: 16px;
}
.consultation-modal-cancel { background: none; border: 0; font-size: 14px; color: #888; cursor: pointer; font-family: inherit; }

/* ---------------------------------------------------------------- */
/* "Abo kündigen"-Popup (Modal)                                      */
/* ---------------------------------------------------------------- */
.cancel-modal {
    position: fixed; inset: 0; background: rgba(28,28,28,0.6); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; padding: 30px; z-index: 1000;
}
.cancel-modal.is-open { display: flex; }
.cancel-modal-overlay { position: absolute; inset: 0; }
.cancel-modal-card {
    width: 100%; max-width: 560px; padding: 0; overflow: hidden; position: relative;
    box-shadow: 0 20px 80px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto;
}
.cancel-modal-close {
    position: absolute; top: 20px; right: 20px; z-index: 5;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid #eee; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: #888; font-size: 16px;
}
.cancel-modal-cancel { background: none; border: 0; font-size: 14px; color: #888; cursor: pointer; font-family: inherit; }

@media (max-width: 640px) {
    .cancel-modal { padding: 14px; }
    .cancel-modal-card > div { padding: 28px 22px !important; }
}

@media (max-width: 900px) {
    .consultation-modal-card > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    .kpi-card .value { font-size: 22px; }
    .consultation-modal { padding: 14px; }
    .consultation-form-col, .consultation-time-col { padding: 28px 22px !important; }
}

/* ------------------------------------------------------------------ */
/* Mobil: hart gesetzte Mehrspalten-Grids kollabieren unterhalb der    */
/* Breakpoints. Die Klassen kommen zusätzlich zum bestehenden inline   */
/* grid-template-columns zum Einsatz — !important überschreibt es.    */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .rgrid-2 { grid-template-columns: 1fr !important; }
    .rgrid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .detail-sidebar-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .rgrid-2-tight { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
    .mission-rail-grid { grid-template-columns: 1fr !important; }
    .mission-rail-grid .mission-rail {
        flex-direction: row; justify-content: flex-start; text-align: left;
        padding: 20px 24px; gap: 18px;
    }
    .mission-rail-grid .mission-rail .badge-ring { width: 56px; height: 56px; flex-shrink: 0; }
    .mission-rail-grid .mission-rail .badge-ring .icon { font-size: 22px !important; }
    .mission-content { padding: 26px 22px !important; }
}
@media (max-width: 640px) {
    .rgrid-3 { grid-template-columns: 1fr !important; }
    .rgrid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .detail-hero-grid { grid-template-columns: 1fr !important; }
    .detail-hero-grid > *:last-child { margin-top: 16px; }
}
@media (max-width: 480px) {
    .rec-row-grid { grid-template-columns: 1fr auto !important; }
    .rec-row-start-btn { grid-column: 1 / -1; text-align: center; margin-top: 4px; }
}
@media (max-width: 380px) {
    .site-metrics { grid-template-columns: 1fr; }
}

/* ==================================================================== */
/* Unternehmensprofil (Onboarding-Fragebogen)                            */
/* ==================================================================== */

.onb-field { margin-bottom: 4px; }
.field-label { display: block; font-weight: 600; font-size: 14px; color: #1C1C1C; margin-bottom: 10px; }
.onb-field-error { color: #8B2E1F; font-size: 12px; margin-top: 6px; }

.onb-step-feedback {
    background: #e3efe9; color: #2E5340; border-radius: 8px; padding: 12px 16px;
    font-size: 14px; font-weight: 600; margin-bottom: 20px;
}

/* -- Range/Slider (Marketing-/Technik-Kenntnisse) ----------------------- */
.onb-range { display: flex; align-items: center; gap: 16px; }
.onb-range input[type="range"] { flex: 1; accent-color: #43745C; }
.onb-range-output {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; border-radius: 50%; background: #43745C;
    color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.onb-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-top: 8px; }
.onb-range-labels span:last-child { text-align: right; max-width: 60%; }

/* -- Item-Liste (mit/ohne Sterne: Leistungen/Zielgruppen/Regionen/         */
/*    Keywords/Wettbewerber) --------------------------------------------- */
.onb-item-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.onb-item-row:last-child { margin-bottom: 0; }
.onb-item-name {
    flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 6px;
    padding: 9px 12px; font-size: 14px;
}
.onb-stars-picker { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.onb-star {
    background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
    color: #ddd; padding: 4px; transition: color 0.15s ease, transform 0.15s ease;
}
.onb-star:hover { transform: scale(1.15); }
.onb-star.is-filled { color: #F0C24A; }

/* -- Checkbox-/Radio-Gruppen (Mehrfach-/Einfachauswahl) ----------------- */
.onb-checkbox-group, .onb-radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
.onb-option {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: #f6f6f4; border: 1px solid #eee; border-radius: 999px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; color: #1C1C1C;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.onb-option:has(input:checked) { background: #e3efe9; border-color: #43745C; color: #2E5340; }
.onb-option input { accent-color: #43745C; }
.onb-option input:disabled { opacity: 0.4; }
.onb-option:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }

/* -- "Weitere hinzufügen" (Live-Add bei Checkbox-Gruppen und             */
/*    Priorisierungs-Liste) ------------------------------------------------ */
.onb-add-row, .onb-ranked-add-row { display: flex; gap: 8px; margin-top: 10px; max-width: 400px; }
.onb-add-input, .onb-ranked-add-input {
    flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 6px;
    padding: 9px 12px; font-size: 14px;
}
.onb-add-btn {
    flex-shrink: 0; padding: 0 16px; font-size: 16px; font-weight: 700; line-height: 1;
    border-radius: 6px; cursor: pointer;
}
.onb-ranked-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.onb-chip {
    background: #fff; border: 1px dashed #ccc; border-radius: 999px; cursor: pointer;
    padding: 7px 14px; font-size: 13px; color: #555; transition: border-color 0.15s ease, color 0.15s ease;
}
.onb-chip:hover { border-color: #43745C; color: #2E5340; }
.onb-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.onb-ranked-add-btn { padding: 0 18px; font-size: 14px; cursor: pointer; }

/* -- Priorisierungs-Liste (Drag & Drop + Auf/Ab) ------------------------- */
.onb-ranked-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: #f6f6f4; border-radius: 8px; margin-bottom: 8px;
}
.onb-ranked-row:last-child { margin-bottom: 0; }
.onb-ranked-row.is-dragging { opacity: 0.5; background: #e3efe9; }
.onb-ranked-drag {
    cursor: grab; color: #aaa; font-size: 16px; line-height: 1; flex-shrink: 0;
    touch-action: none; padding: 4px;
}
.onb-ranked-drag:active { cursor: grabbing; }
.onb-ranked-number { font-weight: 700; color: #43745C; min-width: 20px; }
.onb-ranked-label { flex: 1; font-size: 14px; }
.onb-ranked-controls { display: flex; gap: 4px; flex-shrink: 0; }
.onb-rank-up, .onb-rank-down, .onb-rank-remove {
    background: #fff; border: 1px solid #ddd; border-radius: 6px; width: 30px; height: 30px;
    cursor: pointer; font-size: 14px; color: #43745C; line-height: 1;
}
.onb-rank-up:hover, .onb-rank-down:hover { background: #e3efe9; border-color: #43745C; }
.onb-rank-remove { color: #8B2E1F; }
.onb-rank-remove:hover { background: #fbeceb; border-color: #8B2E1F; }