/*
 * assets/css/lightmode/expert-card-waldband.css
 *
 * Ergebniskarte „Waldband“ (.uc-* aus assets/js/card-template.js), beide Farbmodi.
 * Vorlage: design-previews/waldband-vorlage/ (registriert, unbeansprucht), Premium „Sandband“ und Mobil:
 * design-previews/waldband-premium/ (Entscheidung Betreiber 23.10.2026).
 * Ergänzt expert-card-skin.css (Lightmode-Mappings der Tailwind-Klassen, Kontakt-Knöpfe); nutzt die
 * --lm-* Tokens aus wald-sand-tokens.css mit Ersatzwerten, damit die Karte auch ohne Tokens (Dunkelmodus) stimmt.
 * Eingebunden in suche.php (Bündel „startseite“), dashboard/index.php und includes/vorschau-vorstellung/head.php.
 */

/* ------------------------------------------------------------ Aufbau: Band links, Inhalt rechts */
.uc-band-card { display: flex; }
/* Kopf dehnt sich, Fußleiste bleibt unten bündig mit dem Band (sonst Lücke, wenn das Band höher ist) */
.uc-band-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uc-band-main > .card-header-clickable { flex: 1 0 auto; }

/* ------------------------------------------------------------ Waldband (registriert, unbeansprucht) */
.uc-band {
    width: 168px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    z-index: 10;
    background: linear-gradient(165deg, #1c5642 0%, #1f6b4e 55%, #154a37 100%);
    color: #f6f3ec;
}
.uc-band-avatar { position: relative; width: 120px; height: 120px; flex-shrink: 0; margin-bottom: 18px; }
/* display: block – als <span> sonst inline: eckiges Bild, Ringe als Klammer-Fragmente */
.uc-band-photo {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    overflow: hidden;
    background: #e9dfcb;
    box-shadow: 0 0 0 3px #1f6b4e, 0 0 0 5px #6ee7b7, 0 14px 26px -12px rgba(0, 0, 0, .6);
}
.uc-band-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Unbeanspruchte Profile: Initialen auf Sand (Design „Monogramm-Kachel“, aber rund) */
.uc-band-photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #f3eee3 0%, #e2d5ba 100%);
}
.uc-band-initials {
    font: 700 44px/1 'Outfit', 'Outfit Fallback', sans-serif;
    letter-spacing: .05em;
    color: #1c5642;
    user-select: none;
}
html.dark .uc-band-initials { color: #064e3b; }
.uc-band-check {
    position: absolute;
    left: 98px;
    top: 93px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: #6ee7b7;
    color: #0f3a2b;
    font-size: 11px;
    box-shadow: 0 0 0 3px #1f6b4e;
}
.uc-band-info { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.uc-band-place { position: relative; min-width: 0; }
.uc-band-kicker {
    margin: 0 0 2px;
    font: 700 10px 'Inter', 'Inter Fallback', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, .65);
}
.uc-band-city { font: 700 17px/1.15 'Outfit', 'Outfit Fallback', sans-serif; overflow-wrap: anywhere; }
.uc-band-meta { position: relative; margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.uc-band-km {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 12px 'Inter', 'Inter Fallback', sans-serif;
    color: rgba(246, 243, 236, .8);
}
.uc-band-km i { color: #6ee7b7; }
/* „Regional hervorgehoben“: das Band ist innen nur 136 px breit, das Schild bricht deshalb um statt abgeschnitten zu werden */
.uc-band-ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 10px;
    font: 700 9.5px/1.3 'Inter', 'Inter Fallback', sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(246, 243, 236, .12);
    color: #f6f3ec;
    box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .4);
}
.uc-band-ad i { flex-shrink: 0; color: #6ee7b7; font-size: 9px; }
html.dark .uc-band { background: linear-gradient(165deg, #064e3b 0%, #065f46 55%, #022c22 100%); }

/* ------------------------------------------------------------ Premium „Sandband“: hell Sand, dunkel wie „Lichtwald“ */
.uc-band--sand {
    background: linear-gradient(165deg, #f3eee3 0%, #ebe4d4 60%, #e2d9c5 100%);
    color: var(--lm-text, #1c1a15);
    box-shadow: inset -1px 0 0 var(--lm-card-border, #d6cdba);
}
.uc-band--sand .uc-band-kicker { color: var(--lm-text-3, #6a655a); }
.uc-band--sand .uc-band-city { color: var(--lm-text, #1c1a15); }
.uc-band--sand .uc-band-km { color: var(--lm-text-2, #45413a); }
.uc-band--sand .uc-band-km i { color: var(--lm-cta, #1f6b4e); }
.uc-band--sand .uc-band-photo { box-shadow: 0 0 0 3px #f3eee3, 0 0 0 5px #1f6b4e, 0 14px 26px -12px rgba(0, 0, 0, .45); }
.uc-band--sand .uc-band-check { background: #1f6b4e; color: #f3f8f4; box-shadow: 0 0 0 3px #f3eee3; }
.uc-band--sand .uc-band-ad { background: #1f6b4e; color: #f3f8f4; box-shadow: none; }
.uc-band--sand .uc-band-ad i { color: #6ee7b7; }
html.dark .uc-band--sand { background: linear-gradient(165deg, #059669 0%, #047857 55%, #065f46 100%); color: #f6f3ec; box-shadow: none; }
html.dark .uc-band--sand .uc-band-kicker { color: rgba(246, 243, 236, .8); }
html.dark .uc-band--sand .uc-band-city,
html.dark .uc-band--sand .uc-band-km { color: #f6f3ec; }
html.dark .uc-band--sand .uc-band-km i,
html.dark .uc-band--sand .uc-band-ad i { color: #d1fae5; }
html.dark .uc-band--sand .uc-band-photo { box-shadow: 0 0 0 3px #2e8b64, 0 0 0 5px #d1fae5, 0 14px 26px -12px rgba(0, 0, 0, .55); }
html.dark .uc-band--sand .uc-band-check { background: #d1fae5; color: #0f3a2b; box-shadow: 0 0 0 3px #2e8b64; }
html.dark .uc-band--sand .uc-band-ad { background: rgba(255, 255, 255, .18); color: #f6f3ec; box-shadow: inset 0 0 0 1px rgba(209, 250, 229, .55); }

/* ------------------------------------------------------------ Kontakt oben rechts: Telefon breit, E-Mail + Webseite darunter */
.uc-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; min-width: 220px; }
.uc-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    font: 700 12.5px 'Inter', 'Inter Fallback', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.uc-contact a[data-card-contact="phone"],
.uc-contact--single a:last-child { grid-column: 1 / -1; }
.uc-contact a[data-card-contact="phone"] { font-size: 13.5px; padding: 10px 14px; }
.uc-contact a i { color: #10b981; }
html.dark .uc-contact a { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.dark .uc-contact a:hover { border-color: rgba(110, 231, 183, .6); color: #6ee7b7; }
html.dark .uc-contact a i { color: #34d399; }

/* ------------------------------------------------------------ Fußleiste */
.uc-claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 20px;
    position: relative;
    z-index: 10;
    border-top: 1px dashed var(--lm-card-border, #d6cdba);
    background: color-mix(in srgb, var(--lm-chip, #ebe6d9) 45%, transparent);
}
/* Die ganze Fußleiste klappt das Profil auf (data-card-toggle, portal-search.js) */
.uc-claim[data-card-toggle] { cursor: pointer; }
@media (min-width: 768px) {
    .uc-claim { padding: 12px 32px; }
}
/* Dunkelmodus durchlässig, damit der grüne Schimmer oben rechts bis „Profil öffnen“ reicht */
html.dark .uc-claim { background: rgba(15, 23, 42, .25); border-color: #334155; }

/* Registriert: Qualifikationen links, „Profil öffnen“ rechts (ohne Qualifikationen rechtsbündig) */
.uc-quals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font: 600 12.5px 'Inter', 'Inter Fallback', sans-serif;
    color: var(--lm-text-2, #45413a);
}
.uc-quals span { display: inline-flex; align-items: center; gap: 6px; }
.uc-quals i { color: var(--lm-cta, #1f6b4e); }
.uc-open-btn { margin-left: auto; }
.uc-open-btn,
.uc-claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    font: 700 13px 'Inter', 'Inter Fallback', sans-serif;
    cursor: pointer;
    text-decoration: none;
}
.uc-open-btn {
    background: transparent;
    color: var(--lm-cta, #1f6b4e);
    border: 1.5px solid var(--lm-cta, #1f6b4e);
    transition: background-color .15s ease, color .15s ease;
}
.uc-open-btn i,
.uc-more i { font-size: 10px; transition: transform .2s ease; }
.expert-card:hover .uc-open-btn { background: var(--lm-cta, #1f6b4e); color: var(--lm-cta-text, #f3f8f4); }
html.dark .uc-quals { color: #94a3b8; }
html.dark .uc-quals i { color: #34d399; }
html.dark .uc-open-btn { color: #4ade80; border-color: #4ade80; }
html.dark .expert-card:hover .uc-open-btn { background: #22c55e; color: #052e16; }

/* Unbeansprucht: „Ihr Unternehmen?“ + „Details“ links, „Leistungen“ + „Profil beanspruchen“ rechts */
.uc-claim-text { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lm-text-2, #45413a); }
.uc-claim-text > i { color: var(--lm-cta, #1f6b4e); }
.uc-claim-text strong { color: var(--lm-text, #1c1a15); }
.uc-claim-right { display: flex; align-items: center; gap: 14px; }
.uc-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 600 12px 'Inter', 'Inter Fallback', sans-serif;
    color: var(--lm-text-3, #6a655a);
}
.uc-claim-btn {
    border: 0;
    background: var(--lm-cta, #1f6b4e);
    color: var(--lm-cta-text, #f3f8f4);
    transition: transform .15s ease, box-shadow .15s ease;
}
.uc-claim-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(31, 107, 78, .9); }
.uc-claim-btn i { color: var(--lm-cta-mint, #6ee7b7); }
html.dark .uc-claim-text { color: #94a3b8; }
html.dark .uc-claim-text strong { color: #e2e8f0; }
html.dark .uc-claim-text > i { color: #34d399; }
html.dark .uc-more { color: #94a3b8; }
html.dark .uc-claim-btn { background: #22c55e; color: #052e16; }
html.dark .uc-claim-btn i { color: #052e16; }
@media (prefers-reduced-motion: reduce) {
    .uc-claim-btn:hover { transform: none; }
}

/* ------------------------------------------------------------ Suche: Überschrift „Noch nicht beansprucht“
   Vorschau design-previews/suche-unbeansprucht/ (Entscheidung Betreiber 24.10.2026: Überschrift A, Knopf 4). */
.uc-section-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; font: 700 13px 'Inter', 'Inter Fallback', sans-serif; color: var(--lm-text-2, #45413a); }
.uc-section-label i { color: var(--lm-text-3, #6a655a); }
.uc-section-label span { font-weight: 500; color: var(--lm-text-3, #6a655a); }
html.dark .uc-section-label { color: #cbd5e1; }
html.dark .uc-section-label span,
html.dark .uc-section-label i { color: #64748b; }

/* Suche: Überschrift „Berater in Ihrem Umkreis (verifiziert)“ mit dem Verifiziert-Haken der Karten (.uc-band-check, Sand-Farben) */
.uc-verified-heading { display: flex; align-items: center; gap: 8px; }
.uc-verified-heading__check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: #1f6b4e; color: #f3f8f4; font-size: 9px; }
.uc-verified-heading small { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html.dark .uc-verified-heading__check { background: #6ee7b7; color: #0f3a2b; }

/* Info-Tooltip hinter „Berater in Ihrem Umkreis“: Hover (nur mit Maus), Tastaturfokus oder Antippen (.is-open, portal-search.js).
   Die Blase hängt an der Überschrift (position: relative), damit sie auf dem Handy nicht seitlich überläuft. */
.uc-verified-heading { position: relative; }
.uc-vtip__btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: -2px -4px -2px -2px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--lm-text-3, #6a655a); font-size: 13px; cursor: help; }
.uc-vtip__btn:focus-visible { outline: 2px solid #1f6b4e; outline-offset: 1px; }
.uc-vtip__bubble { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px; background: #22302a; color: #f5f1e8; font: 500 12.5px/1.45 'Inter', 'Inter Fallback', sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: 0 8px 24px rgba(20, 30, 25, .18); opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.uc-vtip.is-open .uc-vtip__bubble,
.uc-vtip__btn:focus-visible + .uc-vtip__bubble { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
    .uc-vtip:hover .uc-vtip__bubble { opacity: 1; visibility: visible; transform: none; }
}
html.dark .uc-vtip__btn { color: #64748b; }
html.dark .uc-vtip__btn:focus-visible { outline-color: #6ee7b7; }
html.dark .uc-vtip__bubble { background: #e2e8f0; color: #0f172a; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) {
    .uc-vtip__bubble { transition: none; }
}

/* ------------------------------------------------------------ Suche: Seitenzahlen (#resultsPager, portal-search.js renderPager)
   15 Berater je Seite, höchstens 10 Seiten (Entscheidung 25.10.2026); Farben wie der frühere Knopf „Weitere anzeigen“.
   Unter 640 px nur Pfeile statt „Zurück“/„Weiter“, damit die Zeile auf 360 px passt. */
#resultsPager { margin-top: 28px; }
.sp-pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sp-pager__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-pager__num,
.sp-pager__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--lm-border-strong, #ddd5c4);
    border-radius: 12px;
    background: var(--lm-surface, #fbf8f1);
    color: var(--lm-text, #1c1a15);
    font: 700 14px 'Inter', 'Inter Fallback', sans-serif;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.sp-pager__step { padding: 0 16px; }
.sp-pager__step i { font-size: 11px; }
.sp-pager__num:hover,
.sp-pager__step:hover:not(:disabled) { border-color: var(--lm-cta, #1f6b4e); color: var(--lm-cta, #1f6b4e); }
.sp-pager__num:focus-visible,
.sp-pager__step:focus-visible { outline: 2px solid #1f6b4e; outline-offset: 2px; }
.sp-pager__num.is-current {
    border-color: var(--lm-cta, #1f6b4e);
    background: var(--lm-cta, #1f6b4e);
    color: var(--lm-cta-text, #f3f8f4);
    cursor: default;
    box-shadow: 0 10px 22px -14px rgba(31, 107, 78, .7);
}
.sp-pager__step:disabled { opacity: .45; cursor: default; }
#resultsPager[aria-busy] .sp-pager { opacity: .6; cursor: wait; }
.sp-pager__gap { min-width: 18px; text-align: center; color: var(--lm-text-3, #6a655a); font-weight: 700; }
.sp-pager__status { margin: 10px 0 0; text-align: center; font: 500 12.5px 'Inter', 'Inter Fallback', sans-serif; color: var(--lm-text-3, #6a655a); }
.sp-pager__note { max-width: 520px; margin: 10px auto 0; text-align: center; font: 500 13px/1.5 'Inter', 'Inter Fallback', sans-serif; color: var(--lm-text-2, #45413a); }
.sp-pager__note--error { color: #9a3412; }
html.dark .sp-pager__num,
html.dark .sp-pager__step { border-color: #334155; background: #0f172a; color: #e2e8f0; }
html.dark .sp-pager__num:hover,
html.dark .sp-pager__step:hover:not(:disabled) { border-color: #34d399; color: #34d399; }
html.dark .sp-pager__num.is-current { border-color: #10b981; background: #10b981; color: #022c22; box-shadow: none; }
html.dark .sp-pager__num:focus-visible,
html.dark .sp-pager__step:focus-visible { outline-color: #6ee7b7; }
html.dark .sp-pager__gap,
html.dark .sp-pager__status { color: #94a3b8; }
html.dark .sp-pager__note { color: #cbd5e1; }
html.dark .sp-pager__note--error { color: #fdba74; }
@media (max-width: 639px) {
    .sp-pager { gap: 6px; }
    .sp-pager__list { gap: 4px; }
    .sp-pager__num,
    .sp-pager__step { min-width: 38px; height: 40px; padding: 0 8px; }
    .sp-pager__step span { display: none; }
}

/* ------------------------------------------------------------ Suche: Karten beim Hereinscrollen einblenden
   portal-search.js setzt .card-reveal an neue Ergebniskarten und .is-revealed, sobald sie sichtbar werden.
   Hover-Übergänge der Karte bleiben in der Liste, weil transition hier die Tailwind-Klasse überschreibt. */
.expert-card.card-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.expert-card.card-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .expert-card.card-reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------ Aufgeklapptes Profil */
/* Förderrechner-Tipp im Waldband-Stil */
.uc-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: var(--lm-card, #f8f5ee);
    border: 1px solid var(--lm-card-border, #d6cdba);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.uc-tip:hover { border-color: color-mix(in srgb, var(--lm-cta, #1f6b4e) 55%, var(--lm-card-border, #d6cdba)); box-shadow: 0 10px 22px -16px rgba(31, 107, 78, .8); }
.uc-tip-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    color: #6ee7b7;
    background: linear-gradient(165deg, #1c5642 0%, #1f6b4e 55%, #154a37 100%);
}
.uc-tip-icon::before { content: ''; position: absolute; inset: 0; opacity: .14; background: repeating-linear-gradient(-35deg, transparent 0 5px, #a7f3d0 5px 6px); }
.uc-tip-icon i { position: relative; }
.uc-tip-text { font-size: 12.5px; line-height: 1.6; color: var(--lm-text-2, #45413a); }
.uc-tip-text strong { color: var(--lm-text, #1c1a15); }
.uc-tip-link { white-space: nowrap; font-weight: 700; color: var(--lm-cta, #1f6b4e); }
.uc-tip-link i { font-size: 10px; margin-left: 2px; transition: transform .15s ease; }
.uc-tip:hover .uc-tip-link i { transform: translateX(3px); }
html.dark .uc-tip { background: rgba(15, 23, 42, .5); border-color: rgba(6, 95, 70, .6); }
html.dark .uc-tip:hover { border-color: rgba(16, 185, 129, .7); }
html.dark .uc-tip-icon { background: linear-gradient(165deg, #064e3b 0%, #065f46 55%, #022c22 100%); }
html.dark .uc-tip-text { color: #cbd5e1; }
html.dark .uc-tip-text strong { color: #fff; }
html.dark .uc-tip-link { color: #6ee7b7; }

/* Unbeansprucht: Herkunftshinweis, Beanspruchen-Zeile, „Eintrag entfernen“ (leise, aber auffindbar) */
.uc-source { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--lm-text-2, #45413a); }
.uc-source i { color: var(--lm-text-3, #6a655a); margin-top: 3px; }
.uc-claim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--lm-card-divider, #e3ddcd);
}
.uc-remove {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: -6px;
    padding-top: 12px;
    border-top: 1px dashed var(--lm-card-divider, #e3ddcd);
    font-size: 12px;
    line-height: 1.5;
    color: var(--lm-text-3, #6a655a);
}
.uc-remove-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--lm-text-2, #45413a);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}
.uc-remove-link:hover { color: #9a3412; }
.uc-remove-link i { font-size: 11px; }
html.dark .uc-source { color: #94a3b8; }
html.dark .uc-claim-row { border-color: #334155; }
html.dark .uc-remove { color: #64748b; border-color: #334155; }
html.dark .uc-remove-link { color: #94a3b8; }
html.dark .uc-remove-link:hover { color: #fca5a5; }

/* ------------------------------------------------------------ Leistungen (Lösung D, card-template.js)
 * „+N“ in der Schlagwortzeile und „Leistungen“ links neben „Profil öffnen“ öffnen die Leistungsliste .card-services
 * (Desktop Themen-Zeilen mit Chips, mobil Gebäudeart-Schalter und Kurznamen, Entscheidung 28.10.2026);
 * Profil und Leistungsliste schließen sich gegenseitig (window.handleConsultantCardServicesClick). */
.uc-foot-btns { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.uc-foot-btns .uc-open-btn { margin-left: 0; }
.card-services-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--lm-cta, #1f6b4e) 45%, transparent);
    background: transparent;
    color: var(--lm-cta, #1f6b4e);
    font: 700 13px 'Inter', 'Inter Fallback', sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.card-services-btn:hover,
.card-services-btn[aria-expanded="true"] { border-color: var(--lm-cta, #1f6b4e); background: color-mix(in srgb, var(--lm-cta, #1f6b4e) 10%, transparent); }
.card-services-btn i { font-size: 10px; transition: transform .2s ease; }
.card-services-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.card-services-more {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--lm-card-border, #cbd5e1);
    color: var(--lm-cta, #1f6b4e);
    font: 700 11px 'Inter', 'Inter Fallback', sans-serif;
    cursor: pointer;
}
.card-services-more:hover,
.card-services-more[aria-expanded="true"] { background: var(--lm-cta, #1f6b4e); color: var(--lm-cta-text, #f3f8f4); box-shadow: none; }
.card-services { border-top: 1px solid var(--lm-card-border, #d6cdba); background: color-mix(in srgb, var(--lm-chip, #ebe6d9) 40%, transparent); }
.card-services-inner { margin: 16px; padding: 18px 20px; border: 1px solid var(--lm-card-border, #e2dccd); border-radius: 12px; background: var(--lm-surface, #fffdf7); }
@media (min-width: 768px) {
    .card-services-inner { margin: 24px 32px; }
}
/* Desktop: eine Zeile je Thema, links Thema mit Symbol, rechts Chips mit vollem Namen (Vorschau design-previews/leistungen-lesbarkeit/, C) */
.card-services-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.card-services-title { margin: 0; font: 700 16px 'Inter', 'Inter Fallback', sans-serif; color: var(--lm-text, #1c1a15); }
.card-services-title span { font-weight: 500; color: var(--lm-text-3, #6a655a); }
.card-services-title:focus-visible { outline: 2px solid var(--lm-cta, #1f6b4e); outline-offset: 3px; }
.card-services-scope { font-size: 13px; color: var(--lm-text-3, #6a655a); }
.card-services-tabs,
.card-services-hits,
.card-services-short { display: none; }
.card-services-rows { margin-top: 10px; }
.card-services-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px 18px; padding: 12px 0; border-top: 1px solid var(--lm-card-border, #e2dccd); }
.card-services-row:first-child { border-top: 0; padding-top: 4px; }
.card-services-theme { display: flex; align-items: flex-start; gap: 9px; font: 700 13.5px/1.35 'Inter', 'Inter Fallback', sans-serif; color: color-mix(in srgb, var(--lm-cta, #1f6b4e) 82%, var(--lm-text, #1c1a15)); }
.card-services-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--lm-cta, #1f6b4e); }
.card-services-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.card-services-chip { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 9px; background: var(--lm-chip, #ebe6d9); color: var(--lm-text, #1c1a15); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.card-services-name { display: inline-flex; align-items: center; gap: 6px; }
.card-services-name i { font-size: 11px; }
.card-services-note { font-size: 11px; color: var(--lm-text-3, #6a655a); }
.card-services-chip.is-hit { background: var(--lm-cta, #1f6b4e); color: var(--lm-cta-text, #f3f8f4); font-weight: 600; }
.card-services-chip.is-hit .card-services-note { color: inherit; opacity: .8; }
.card-services-chip.is-focus { box-shadow: inset 0 0 0 1.5px rgba(181, 130, 28, .7); }
.card-services-focus { color: #b5821c; }
.card-services-chip.is-hit .card-services-focus { color: #f6d58a; }
.card-services-source { margin: 14px 0 0; font-size: 12px; color: var(--lm-text-3, #6a655a); }

/* Mobil: Feld bündig in der Karte, Schalter je Gebäudeart, Treffer in einer Zeile, Chips mit Kurznamen (M2) */
@media (max-width: 767.98px) {
    .card-services-inner { margin: 0; padding: 14px 16px 12px; border: 0; border-radius: 0; }
    .card-services-title { font-size: 15px; }
    .card-services-scope,
    .card-services-full,
    .card-services-note { display: none; }
    .card-services-short { display: inline; }
    .card-services-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 3px; margin: 10px 0 8px; padding: 3px; border-radius: 10px; background: var(--lm-chip, #ebe6d9); }
    .card-services-tabs button { padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-text-2, #4a463d); font: 600 12.5px 'Inter', 'Inter Fallback', sans-serif; cursor: pointer; }
    .card-services-tabs button span { font-weight: 500; color: var(--lm-text-3, #6a655a); }
    .card-services-tabs button[aria-pressed="true"] { background: var(--lm-surface, #fffdf7); color: var(--lm-cta, #1f6b4e); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
    .card-services-hits { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 4px; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, var(--lm-cta, #1f6b4e) 11%, transparent); font-size: 13px; line-height: 1.35; color: var(--lm-text, #1c1a15); }
    .card-services-hits i { margin-top: 3px; font-size: 11px; color: var(--lm-cta, #1f6b4e); }
    .card-services-hits strong { font-weight: 600; color: var(--lm-cta, #1f6b4e); }
    .card-services-rows { margin-top: 0; }
    .card-services-row,
    .card-services-row:first-child { display: block; padding: 10px 0 0; border-top: 0; }
    .card-services-theme { gap: 7px; margin-bottom: 6px; font-size: 12.5px; }
    .card-services-icon { width: 14px; height: 14px; }
    .card-services-chips { gap: 5px; }
    .card-services-chip { padding: 4px 9px; border-radius: 7px; font-size: 13px; }
    .card-services-source { margin-top: 10px; font-size: 11.5px; }
    .card-services[data-card-services-area="W"] [data-areas]:not([data-areas*="W"]),
    .card-services[data-card-services-area="N"] [data-areas]:not([data-areas*="N"]),
    .card-services[data-card-services-area="K"] [data-areas]:not([data-areas*="K"]) { display: none; }
}
html.dark .card-services-btn { color: #4ade80; border-color: rgba(74, 222, 128, .45); }
html.dark .card-services-btn:hover,
html.dark .card-services-btn[aria-expanded="true"] { border-color: #4ade80; background: rgba(74, 222, 128, .1); }
html.dark .card-services-more { color: #4ade80; box-shadow: inset 0 0 0 1px #334155; }
html.dark .card-services-more:hover,
html.dark .card-services-more[aria-expanded="true"] { background: #22c55e; color: #052e16; }
html.dark .card-services { border-color: #334155; background: rgba(15, 23, 42, .35); }
html.dark .card-services-inner { border-color: #334155; background: rgba(15, 23, 42, .5); }
html.dark .card-services-title,
html.dark .card-services-chip,
html.dark .card-services-hits { color: #e2e8f0; }
html.dark .card-services-row { border-color: #334155; }
html.dark .card-services-theme,
html.dark .card-services-icon,
html.dark .card-services-hits strong,
html.dark .card-services-hits i { color: #4ade80; }
html.dark .card-services-chip,
html.dark .card-services-tabs { background: #1e293b; }
html.dark .card-services-chip.is-hit { background: #22c55e; color: #052e16; }
html.dark .card-services-chip.is-focus { box-shadow: inset 0 0 0 1.5px rgba(251, 191, 36, .7); }
html.dark .card-services-focus { color: #fbbf24; }
html.dark .card-services-chip.is-hit .card-services-focus { color: #713f12; }
html.dark .card-services-tabs button { color: #cbd5e1; }
html.dark .card-services-tabs button[aria-pressed="true"] { background: #0f172a; color: #4ade80; }
html.dark .card-services-hits { background: rgba(74, 222, 128, .12); }
html.dark .card-services-title span,
html.dark .card-services-scope,
html.dark .card-services-note,
html.dark .card-services-tabs button span,
html.dark .card-services-source { color: #94a3b8; }

/* ------------------------------------------------------------ Mobil (< 768 px): Band als Querleiste oben
 * Foto links; rechts daneben „Energieberatung in Ort“ mit der Entfernung rechts davon, das Premium-Schild
 * in einer eigenen Zeile darunter. Die Ort-Pille über dem Telefon entfällt (Ort steht im Band),
 * Qualifikationen und „Profil öffnen“ stehen mittig. Reicht der Platz nicht, rutscht die Entfernung unter den Ort. */
@media (max-width: 767.98px) {
    .uc-band-card { flex-direction: column; }
    .uc-band { width: auto; flex-direction: row; align-items: center; gap: 18px; padding: 14px 18px; }
    .uc-band-avatar,
    .uc-band-photo { width: 80px; height: 80px; }
    .uc-band-initials { font-size: 30px; }
    .uc-band-avatar { margin: 0; }
    .uc-band-check { left: 60px; top: 58px; width: 22px; height: 22px; font-size: 10px; }
    .uc-band-info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
    .uc-band-place { flex: 1 1 0; min-width: auto; }
    .uc-band-meta { display: contents; }
    .uc-band-km { margin-left: auto; white-space: nowrap; }
    .uc-band-adrow { flex: 0 0 100%; }
    .uc-band--sand { box-shadow: inset 0 -1px 0 var(--lm-card-border, #d6cdba); }
    html.dark .uc-band--sand { box-shadow: none; }

    .uc-band-card [data-card-part="location"] { display: none; }
    .uc-contact { min-width: 0; }

    .uc-claim { flex-direction: column; justify-content: center; text-align: center; }
    .uc-quals,
    .uc-claim-text,
    .uc-claim-right { justify-content: center; }
    .uc-open-btn { margin-left: 0; }
    .uc-foot-btns { margin-left: 0; justify-content: center; }
}
/* Sehr schmale Geräte (320–359 px): Band dichter, damit die Entfernung rechts neben dem Ort bleibt */
@media (max-width: 359.98px) {
    .uc-band { gap: 14px; padding: 14px 12px; }
    .uc-band-avatar,
    .uc-band-photo { width: 70px; height: 70px; }
    .uc-band-initials { font-size: 26px; }
    .uc-band-check { left: 50px; top: 48px; width: 20px; height: 20px; font-size: 9px; }
    .uc-band-info { column-gap: 8px; }
    .uc-band-kicker { font-size: 9px; letter-spacing: .04em; }
}