/*
 * ImotDesk – Erscheinungsbild
 * Schwarzmeer-Palette: tiefes Meer (Seitenleiste, Anmeldung), Meerblau (Aktionen),
 * Sand (Markierungen), kühles Nebelgrau (Hintergrund). Ergänzt das Filament-Theme
 * ohne Build-Schritt; Regeln außerhalb von @layer haben Vorrang.
 */

:root {
    --imd-sea-950: #071c23;
    --imd-sea-900: #0b2730;
    --imd-sand: #e9c46a;
    --imd-mist: #f2f5f6;
    --imd-line: rgb(15 40 48 / 0.09);
    --imd-radius-lg: 16px;
    --imd-radius: 12px;
}

/* ---------- Grundfläche ---------- */

.fi-body {
    background-color: var(--imd-mist);
    font-feature-settings: "ss01", "cv11";
}

.dark .fi-body {
    background-color: var(--gray-950);
}

.fi-header-heading {
    letter-spacing: -0.02em;
}

.fi-header-subheading {
    color: var(--gray-500);
}

/* ---------- Wortmarke ---------- */

.imd-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--imd-sea-900);
    height: 2rem;
}

.dark .imd-brand {
    color: #fff;
}

.imd-brand-sep {
    width: 1px;
    height: 1.5rem;
    background: currentColor;
    opacity: 0.2;
    flex: none;
}

.imd-brand-company {
    max-height: 1.9rem;
    max-width: 7.5rem;
    object-fit: contain;
    flex: none;
}

.imd-brand-mark {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.imd-brand-name {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

/* ---------- Seitenleiste: tiefes Meer ---------- */

.fi-sidebar {
    background-color: var(--imd-sea-900);
    color: #d6e3e6;
}

.dark .fi-sidebar {
    background-color: var(--imd-sea-950);
}

.fi-sidebar .imd-brand {
    color: #fff;
}

.fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.fi-sidebar-group-label,
.fi-sidebar-group-btn {
    color: rgb(214 227 230 / 0.55);
}

.fi-sidebar-group-collapse-btn,
.fi-sidebar-close-collapse-sidebar-btn,
.fi-sidebar-open-collapse-sidebar-btn {
    color: rgb(214 227 230 / 0.6);
}

.fi-sidebar-item-btn {
    border-radius: 10px;
    transition: background-color 120ms ease;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.06);
}

.fi-sidebar-item-label {
    color: #d6e3e6;
    font-weight: 500;
}

.fi-sidebar-item-icon {
    color: rgb(214 227 230 / 0.6);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.09);
    box-shadow: inset 3px 0 0 var(--imd-sand);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--imd-sand);
}

.fi-sidebar-item-grouped-border-part {
    background-color: rgb(255 255 255 / 0.15);
}

.fi-sidebar-footer,
.fi-sidebar-database-notifications-btn {
    color: #d6e3e6;
}

/* ---------- Kopfleiste: gleiches Meer wie die Seitenleiste (L-Rahmen) ---------- */

.fi-topbar {
    background-color: var(--imd-sea-900);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
    color: #d6e3e6;
}

.dark .fi-topbar {
    background-color: var(--imd-sea-950);
}

.fi-topbar .imd-brand {
    color: #fff;
}

.fi-topbar .fi-icon-btn {
    color: rgb(214 227 230 / 0.8);
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-icon-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.08);
    color: #fff;
}

.fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.08);
    --tw-ring-color: rgb(255 255 255 / 0.1);
    box-shadow: none;
}

.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    background-color: rgb(255 255 255 / 0.14);
    --tw-ring-color: var(--imd-sand);
}

.fi-topbar .fi-global-search-field input {
    color: #fff;
}

.fi-topbar .fi-global-search-field input::placeholder {
    color: rgb(214 227 230 / 0.6);
}

.fi-topbar .fi-global-search-field .fi-icon {
    color: rgb(214 227 230 / 0.6);
}

/* ---------- Flächen: Abschnitte, Tabellen, Widgets ---------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--imd-radius-lg);
    box-shadow: 0 1px 2px rgb(15 40 48 / 0.04);
    --tw-ring-color: var(--imd-line);
}

.fi-wi-stats-overview-stat-value {
    letter-spacing: -0.03em;
}

.fi-btn {
    border-radius: 10px;
}

.fi-input-wrp {
    border-radius: 10px;
}

.fi-badge {
    border-radius: 999px;
}

:focus-visible {
    outline-color: var(--primary-500);
}

/* ---------- Objekte als Bildkarten ---------- */

.fi-ta-content-grid .fi-ta-record {
    border-radius: var(--imd-radius-lg);
    overflow: hidden;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.fi-ta-content-grid .fi-ta-record:hover {
    box-shadow: 0 10px 28px -12px rgb(11 39 48 / 0.35);
}

.imd-cover-wrap {
    width: 100%;
}

.imd-cover-wrap > div,
.imd-cover-wrap .fi-ta-image,
.imd-cover-wrap .fi-ta-image > div {
    width: 100%;
}

img.imd-cover {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--imd-radius);
    background-color: #e4ecee;
}

.imd-card-price-col {
    letter-spacing: -0.02em;
}

/* ---------- Startseite: zuletzt bearbeitet ---------- */

.imd-recent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.imd-recent-head h2 {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gray-950);
}

.dark .imd-recent-head h2 {
    color: #fff;
}

.imd-recent-head a {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-600);
}

.dark .imd-recent-head a {
    color: var(--primary-400);
}

.imd-recent-head a:hover {
    text-decoration: underline;
}

.imd-cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.imd-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--imd-radius-lg);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--imd-line), 0 1px 2px rgb(15 40 48 / 0.04);
    transition: box-shadow 160ms ease;
}

.dark .imd-card {
    background: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.imd-card:hover,
.imd-card:focus-visible {
    box-shadow: 0 0 0 1px var(--primary-300), 0 10px 28px -12px rgb(11 39 48 / 0.35);
}

.imd-card-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e4ecee;
}

.imd-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imd-pill {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgb(255 255 255 / 0.92);
    color: var(--gray-800);
    backdrop-filter: blur(6px);
}

.imd-pill::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.35rem;
    border-radius: 999px;
    background: var(--gray-400);
    vertical-align: 0.05rem;
}

.imd-pill-success::before { background: var(--success-500); }
.imd-pill-warning::before { background: var(--warning-500); }
.imd-pill-danger::before { background: var(--danger-500); }
.imd-pill-info::before { background: var(--info-500); }

.imd-card-body {
    padding: 0.85rem 1rem 1rem;
    display: grid;
    gap: 0.2rem;
}

.imd-card-price {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-950);
}

.dark .imd-card-price {
    color: #fff;
}

.imd-card-title {
    font-weight: 500;
    color: var(--gray-800);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .imd-card-title {
    color: var(--gray-200);
}

.imd-card-meta,
.imd-card-ref {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.imd-empty {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding: 1.5rem;
    border-radius: var(--imd-radius-lg);
    border: 1px dashed var(--gray-300);
    color: var(--gray-600);
}

/* ---------- Anmeldung: Blick aufs Meer ---------- */

.fi-simple-layout {
    background-color: var(--imd-sea-900);
    background-image:
        radial-gradient(120% 80% at 50% 115%, rgb(233 196 106 / 0.18), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='48' viewBox='0 0 240 48'%3E%3Cpath d='M0 24c20 0 20-10 40-10s20 10 40 10 20-10 40-10 20 10 40 10 20-10 40-10 20 10 40 10' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2'/%3E%3C/svg%3E");
    background-size: auto, 240px 48px;
}

.fi-simple-main {
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
}

.fi-simple-header .imd-brand {
    color: var(--imd-sea-900);
}

.dark .fi-simple-header .imd-brand {
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .fi-ta-content-grid .fi-ta-record,
    .imd-card,
    .fi-sidebar-item-btn {
        transition: none;
    }
}

/* ---------- Objektkopf auf der Bearbeiten-Seite ---------- */

.imd-phead {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    gap: 1.25rem;
    align-items: stretch;
    background: #fff;
    border-radius: var(--imd-radius-lg);
    box-shadow: 0 0 0 1px var(--imd-line), 0 1px 2px rgb(15 40 48 / 0.04);
    overflow: hidden;
}

.dark .imd-phead {
    background: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.imd-phead-photo {
    position: relative;
    background: #e4ecee;
    min-height: 8rem;
}

.imd-phead-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.imd-phead-count {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgb(7 28 35 / 0.7);
    color: #fff;
}

.imd-phead-body {
    padding: 1rem 0;
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-width: 0;
}

.imd-phead-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.imd-phead-ref {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.imd-phead-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-950);
    line-height: 1.25;
}

.dark .imd-phead-title {
    color: #fff;
}

.imd-phead-meta {
    color: var(--gray-500);
    font-size: 0.9rem;
}

.imd-phead-price {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-700);
}

.dark .imd-phead-price {
    color: var(--primary-400);
}

.imd-phead-price small {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-left: 0.4rem;
}

.imd-phead-side {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem 1rem 0;
    max-width: 22rem;
}

.imd-meter {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    flex: none;
}

.imd-meter svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.imd-meter circle {
    fill: none;
    stroke-width: 3.2;
}

.imd-meter-track {
    stroke: var(--gray-200);
}

.dark .imd-meter-track {
    stroke: var(--gray-700);
}

.imd-meter-bar {
    stroke-linecap: round;
    transition: stroke-dasharray 400ms ease;
}

.imd-meter-good { stroke: var(--success-500); }
.imd-meter-mid { stroke: var(--imd-sand); }
.imd-meter-low { stroke: var(--danger-500); }

.imd-meter-value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.imd-phead-todo {
    font-size: 0.82rem;
    color: var(--gray-600);
    display: grid;
    gap: 0.25rem;
}

.dark .imd-phead-todo {
    color: var(--gray-400);
}

.imd-phead-todo strong {
    color: var(--gray-900);
}

.dark .imd-phead-todo strong {
    color: #fff;
}

.imd-phead-todo ul {
    display: grid;
    gap: 0.1rem;
}

.imd-phead-todo li::before {
    content: "○ ";
    color: var(--gray-400);
}

.imd-phead-more::before {
    content: "" !important;
}

.imd-phead-ok {
    color: var(--success-600);
}

@media (max-width: 900px) {
    .imd-phead {
        grid-template-columns: 1fr;
    }

    .imd-phead-photo {
        aspect-ratio: 16 / 9;
    }

    .imd-phead-body,
    .imd-phead-side {
        padding: 0 1rem 1rem;
    }
}

/* ---------- Kunden-Pipeline (Board) ---------- */

.imd-board-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.imd-board-tools .fi-input-wrp {
    min-width: 14rem;
}

.imd-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 1fr);
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--gray-300) transparent;
}

.imd-col {
    scroll-snap-align: start;
    background: rgb(15 40 48 / 0.04);
    border-radius: var(--imd-radius-lg);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    min-height: 16rem;
    border: 2px dashed transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.dark .imd-col {
    background: rgb(255 255 255 / 0.04);
}

.imd-col-over {
    border-color: var(--primary-400);
    background: rgb(15 122 138 / 0.08);
}

.imd-col-closed {
    opacity: 0.85;
}

.imd-col-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem 0.6rem;
}

.imd-col-head h3 {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-800);
}

.dark .imd-col-head h3 {
    color: var(--gray-200);
}

.imd-col-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--gray-400);
}

.imd-col-info .imd-col-dot { background: var(--info-500); }
.imd-col-primary .imd-col-dot { background: var(--primary-500); }
.imd-col-warning .imd-col-dot { background: var(--warning-500); }
.imd-col-success .imd-col-dot { background: var(--success-500); }

.imd-col-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    background: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

.dark .imd-col-count {
    background: var(--gray-800);
}

.imd-col-cards {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    flex: 1;
}

.imd-col-empty {
    font-size: 0.8rem;
    color: var(--gray-400);
    text-align: center;
    padding: 1.5rem 0.5rem;
}

.imd-card-contact {
    background: #fff;
    border-radius: var(--imd-radius);
    padding: 0.7rem 0.8rem;
    box-shadow: 0 0 0 1px var(--imd-line), 0 1px 2px rgb(15 40 48 / 0.05);
    cursor: grab;
    display: grid;
    gap: 0.3rem;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.dark .imd-card-contact {
    background: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.imd-card-contact:hover {
    box-shadow: 0 0 0 1px var(--primary-300), 0 6px 18px -8px rgb(11 39 48 / 0.35);
}

.imd-card-dragging {
    opacity: 0.5;
    transform: rotate(-1.5deg);
}

.imd-card-name {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .imd-card-name {
    color: #fff;
}

.imd-card-name:hover {
    color: var(--primary-600);
}

.imd-card-line {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.imd-card-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.imd-card-due {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--gray-100);
}

.dark .imd-card-due {
    background: var(--gray-800);
}

.imd-card-due.is-due {
    background: rgb(209 73 91 / 0.12);
    color: var(--danger-600);
}

.imd-card-agent {
    margin-left: auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: var(--imd-sea-900);
}

@media (prefers-reduced-motion: reduce) {
    .imd-card-contact,
    .imd-col {
        transition: none;
    }
}

/* ---------- Schnellaktionen auf der Startseite ---------- */

.imd-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.imd-quick-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-items: center;
    text-align: left;
    padding: 0.8rem 1rem;
    background: #fff;
    border-radius: var(--imd-radius-lg);
    box-shadow: 0 0 0 1px var(--imd-line), 0 1px 2px rgb(15 40 48 / 0.04);
    transition: box-shadow 140ms ease, transform 140ms ease;
}

.dark .imd-quick-item {
    background: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.imd-quick-item:hover,
.imd-quick-item:focus-visible {
    box-shadow: 0 0 0 1px var(--primary-300), 0 8px 22px -12px rgb(11 39 48 / 0.4);
    transform: translateY(-1px);
}

.imd-quick-icon {
    grid-row: 1 / span 2;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.5rem;
    border-radius: 12px;
    background: var(--primary-50);
    color: var(--primary-600);
}

.dark .imd-quick-icon {
    background: rgb(15 122 138 / 0.2);
    color: var(--primary-400);
}

.imd-quick-label {
    font-weight: 600;
    color: var(--gray-950);
}

.dark .imd-quick-label {
    color: #fff;
}

.imd-quick-hint {
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* ---------- Steckbrief ---------- */

.imd-gallery-img {
    border-radius: var(--imd-radius);
}

@media (prefers-reduced-motion: reduce) {
    .imd-quick-item {
        transition: none;
    }
}

@media (max-width: 640px) {
    .imd-board {
        grid-auto-columns: 82vw;
        scroll-snap-type: x mandatory;
    }

    .imd-board-tools {
        justify-content: stretch;
    }

    .imd-board-tools .fi-input-wrp {
        width: 100%;
    }
}

/* Kartenauswahl für Koordinaten */
.imd-map-picker {
    display: grid;
    gap: 0.75rem;
}

.imd-map-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.imd-map-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.imd-map-results {
    position: absolute;
    z-index: 1000;
    inset-inline: 0;
    top: calc(100% + 0.25rem);
    max-height: 18rem;
    overflow-y: auto;
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.25);
    border: 1px solid rgb(0 0 0 / 0.08);
    padding: 0.25rem;
}

.dark .imd-map-results {
    background: var(--gray-900);
    border-color: rgb(255 255 255 / 0.1);
}

.imd-map-results button {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

.imd-map-results button:hover,
.imd-map-results button:focus-visible {
    background: color-mix(in oklab, var(--primary-500) 12%, transparent);
    outline: none;
}

.imd-map {
    height: 22rem;
    border-radius: 0.875rem;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 0.08);
    z-index: 0;
    background: var(--gray-100);
}

.dark .imd-map {
    border-color: rgb(255 255 255 / 0.1);
    background: var(--gray-800);
}

.dark .imd-map .leaflet-tile-pane {
    filter: brightness(0.85) contrast(1.05) saturate(0.9);
}

.imd-map-help {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.imd-map-message {
    color: var(--danger-600);
}

@media (max-width: 640px) {
    .imd-map {
        height: 18rem;
    }
}

.imd-map-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.imd-map-coords {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    background: color-mix(in oklab, var(--primary-500) 12%, transparent);
    color: var(--primary-700);
}

.dark .imd-map-coords {
    color: var(--primary-300);
}

.imd-map-coords-empty {
    background: color-mix(in oklab, var(--gray-500) 12%, transparent);
    color: var(--gray-500);
}

.imd-map-coords-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Telefonfeld mit Länderauswahl (intl-tel-input) */
.imd-phone-inner,
.imd-phone .iti {
    width: 100%;
}

.imd-phone .iti {
    --iti-border-color: transparent;
    --iti-hover-color: color-mix(in oklab, var(--gray-500) 10%, transparent);
    --iti-dialcode-color: var(--gray-500);
    --iti-arrow-color: var(--gray-500);
    display: block;
}

.imd-phone .iti__country-container {
    padding-inline-start: 0.25rem;
}

.imd-phone .iti__selected-country {
    border-radius: 0.5rem 0 0 0.5rem;
}

.imd-phone .iti__selected-country-primary {
    padding-inline: 0.5rem 0.375rem;
}

.imd-phone .iti__selected-dial-code {
    color: var(--gray-950);
    font-size: 0.875rem;
    margin-inline-end: 0.5rem;
}

.dark .imd-phone .iti__selected-dial-code {
    color: white;
}

.imd-phone .imd-phone-input {
    width: 100%;
}

/* Länderliste: im Body, daher über Modalen; helles und dunkles Design */
.iti--container {
    z-index: 70;
}

.iti--container:not(.iti--fullscreen-popup) .iti__dropdown-content {
    min-width: 18rem;
}

.iti__country-list {
    max-height: 18rem;
}

.iti__dropdown-content {
    border-radius: 0.75rem;
    border: 1px solid rgb(0 0 0 / 0.08);
    box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.3);
    overflow: hidden;
    font-size: 0.875rem;
}

.iti__search-input {
    padding: 0.625rem 0.75rem;
    border: 0;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
    outline: none;
}

.iti__country.iti__highlight {
    background: color-mix(in oklab, var(--primary-500) 12%, transparent);
}

.dark .iti__dropdown-content,
.dark .iti__search-input {
    background: var(--gray-900);
    color: white;
    border-color: rgb(255 255 255 / 0.1);
}

.dark .iti__dial-code {
    color: var(--gray-400);
}

/* Suchleiste der Objektliste */
.imd-property-table .fi-ta-filters-above-content-ctn {
    background: color-mix(in oklab, var(--primary-500) 4%, transparent);
}

.imd-property-table .fi-ta-filters-heading {
    display: none;
}

.imd-property-table .fi-ta-filters-header {
    justify-content: flex-end;
}

.imd-search-submit {
    padding-top: 1.75rem;
}

.imd-search-submit .fi-btn {
    width: 100%;
    min-height: 2.375rem;
}

/* KI-Suche (Modul Ai) als eigene Zeile über der Suchleiste */
.imd-search-top .fi-input-wrp {
    border-color: color-mix(in oklab, var(--primary-500) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 10%, transparent);
}

.imd-search-top .fi-input-wrp-prefix .fi-icon {
    color: var(--primary-500);
}

.imd-search-row2 {
    padding-top: 0.25rem;
    border-top: 1px dashed rgb(0 0 0 / 0.08);
}

.dark .imd-search-row2 {
    border-color: rgb(255 255 255 / 0.08);
}

@media (max-width: 1023px) {
    .imd-search-submit {
        padding-top: 0;
    }
}

@media (max-width: 639px) {
    .imd-search-submit .fi-btn {
        width: 100%;
    }
}

.imd-phead-commission {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: color-mix(in oklab, var(--success-500) 12%, transparent);
    color: var(--success-700);
}

.dark .imd-phead-commission {
    color: var(--success-300);
}

/* Registrierung: Feld gegen Spam-Programme, für Menschen unsichtbar */
.imd-hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Links in Feldbeschriftungen (z. B. Datenschutz bei der Registrierung) */
.fi-fo-field-label-content a,
.fi-fo-checkbox-list-option-label a {
    color: var(--primary-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Hilfe-Knopf in der Kopfzeile (Modul Help) */
.imd-help-link { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; color: rgb(255 255 255 / .75); }
.imd-help-link:hover { color: #fff; background: rgb(255 255 255 / .08); }
.imd-help-icon { width: 1.5rem; height: 1.5rem; }

/* Verlauf einer Meldung (Modul Support) */
.imd-ticket-thread { display: grid; gap: .875rem; }
.imd-ticket-msg { border: 1px solid var(--gray-200); border-radius: .75rem; padding: .875rem 1rem; background: var(--gray-50); }
.dark .imd-ticket-msg { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); }
.imd-ticket-msg-admin { background: color-mix(in srgb, var(--primary-500) 7%, transparent); border-color: color-mix(in srgb, var(--primary-500) 25%, transparent); margin-left: 2rem; }
.imd-ticket-msg header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .375rem; font-size: .875rem; }
.imd-ticket-msg time { margin-left: auto; color: var(--gray-500); font-size: .8rem; }
.imd-ticket-body { font-size: .925rem; line-height: 1.6; overflow-wrap: anywhere; }
.imd-ticket-event { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: var(--gray-500); padding-left: .25rem; }

/* Systemmeldungen (Modul SystemLog) */
.imd-syslog-message, .imd-syslog-trace, .imd-syslog-file { margin: 0; }
.imd-syslog-message { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.imd-syslog-trace, .imd-syslog-file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.imd-syslog-file { max-height: 65vh; overflow: auto; padding: .75rem 1rem; border-radius: .5rem; background: var(--gray-950); color: var(--gray-100); margin: 0; }

/* Dashboard: Meldungen und Systemmeldungen (Modul Support) */
.imd-reports-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.imd-reports-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .875rem 1rem; border-radius: .75rem; border: 1px solid var(--gray-200); text-decoration: none; transition: border-color .15s, background .15s; }
.dark .imd-reports-stat { border-color: rgb(255 255 255 / .1); }
.imd-reports-stat:hover { border-color: var(--primary-400); }
.imd-reports-stat-icon { grid-row: span 3; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: .6rem; }
.imd-reports-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.imd-reports-stat-label { font-size: .85rem; color: var(--gray-600); }
.dark .imd-reports-stat-label { color: var(--gray-400); }
.imd-reports-stat-hint { font-size: .75rem; color: var(--gray-500); }
.imd-reports-stat-info .imd-reports-stat-icon { background: color-mix(in srgb, var(--info-500) 14%, transparent); color: var(--info-600); }
.imd-reports-stat-warning .imd-reports-stat-icon { background: color-mix(in srgb, var(--warning-500) 16%, transparent); color: var(--warning-600); }
.imd-reports-stat-danger .imd-reports-stat-icon { background: color-mix(in srgb, var(--danger-500) 14%, transparent); color: var(--danger-600); }
.imd-reports-stat-success .imd-reports-stat-icon { background: color-mix(in srgb, var(--success-500) 14%, transparent); color: var(--success-600); }
.imd-reports-stat-danger:not(.imd-reports-stat-zero) .imd-reports-stat-value { color: var(--danger-600); }
.imd-reports-stat-zero .imd-reports-stat-value { color: var(--gray-400); }
.imd-reports-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--gray-100); }
.dark .imd-reports-list { border-color: rgb(255 255 255 / .06); }
.imd-reports-item { display: flex; align-items: center; gap: .75rem; padding: .65rem .25rem; border-bottom: 1px solid var(--gray-100); text-decoration: none; }
.dark .imd-reports-item { border-color: rgb(255 255 255 / .06); }
.imd-reports-item:hover .imd-reports-item-title { color: var(--primary-600); }
.imd-reports-item-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.imd-reports-item-icon-danger { color: var(--danger-500); }
.imd-reports-item-icon-warning { color: var(--warning-500); }
.imd-reports-item-icon-info { color: var(--info-500); }
.imd-reports-item-icon-gray, .imd-reports-item-icon-success { color: var(--gray-400); }
.imd-reports-item-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.imd-reports-item-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imd-reports-item-meta { font-size: .78rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imd-reports-item-time { font-size: .78rem; color: var(--gray-500); white-space: nowrap; min-width: 6.5rem; text-align: right; }
.imd-reports-empty { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; color: var(--gray-500); font-size: .9rem; }
.imd-reports-empty-icon { width: 1.25rem; height: 1.25rem; color: var(--success-500); }
@media (max-width: 640px) { .imd-reports-item-time { display: none; } }

/* Komplex-Vorschlag prüfen (bisher → neu) */
.imd-proposal { display: grid; gap: .75rem; }
.imd-proposal-meta { font-size: .85rem; color: var(--gray-500); margin: 0; }
.imd-proposal-notes { margin: 0; padding: .5rem .75rem; border-left: 3px solid var(--primary-400); background: var(--gray-50); border-radius: .25rem; font-size: .9rem; }
.dark .imd-proposal-notes { background: rgb(255 255 255 / .04); }
.imd-proposal-empty { color: var(--gray-500); font-size: .9rem; margin: 0; }
.imd-proposal-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.imd-proposal-table th, .imd-proposal-table td { text-align: left; vertical-align: top; padding: .5rem .625rem; border-bottom: 1px solid var(--gray-200); }
.dark .imd-proposal-table th, .dark .imd-proposal-table td { border-color: rgb(255 255 255 / .08); }
.imd-proposal-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); }
.imd-proposal-table tbody th { font-weight: 600; width: 28%; }
.imd-proposal-before { color: var(--gray-500); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger-500) 60%, transparent); }
.imd-proposal-after { color: var(--success-700); font-weight: 500; }
.dark .imd-proposal-after { color: var(--success-400); }

.imd-proposal-photos { text-decoration: none !important; }
.imd-proposal-thumbs { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .375rem; }
.imd-proposal-thumbs img { width: 4.5rem; height: 3.25rem; object-fit: cover; border-radius: .375rem; border: 1px solid var(--gray-200); }
.imd-proposal-before .imd-proposal-thumbs img { opacity: .55; }

/* Messenger an Telefonnummern (WhatsApp, Telegram, Viber) */
.imd-messengers { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.imd-messenger { display: inline-flex; align-items: center; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 600; line-height: 1.4; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.imd-messenger-whatsapp { color: #128c4b; background: rgb(37 211 102 / .12); border-color: rgb(37 211 102 / .35); }
.imd-messenger-telegram { color: #1b7fbf; background: rgb(42 171 238 / .12); border-color: rgb(42 171 238 / .35); }
.imd-messenger-viber { color: #6d4bc2; background: rgb(115 96 242 / .12); border-color: rgb(115 96 242 / .35); }
.dark .imd-messenger-whatsapp { color: #5ee08f; }
.dark .imd-messenger-telegram { color: #6cc4f3; }
.dark .imd-messenger-viber { color: #ad9cf7; }
.imd-messenger:hover { filter: brightness(.95); text-decoration: underline; }
.imd-messenger-toggles .fi-btn { font-size: .8rem; }

/* KI-Verbrauch (Modul Ai) */
.imd-ai-usage { display: grid; gap: 1.25rem; }
.imd-ai-usage-empty { color: var(--gray-500); font-size: .9rem; margin: 0; }
.imd-ai-over { color: var(--danger-600); font-weight: 700; }
.imd-ai-errors { color: var(--gray-500); font-size: .75rem; font-weight: 400; }

/* ---------- Systemstatus (Administrator) ---------- */

.imd-status-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    align-items: start;
}

.imd-status-list {
    margin: 0;
}

.imd-status-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid rgb(0 0 0 / 0.06);
    font-size: 0.875rem;
}

.imd-status-row:first-child {
    border-top: 0;
}

.dark .imd-status-row {
    border-top-color: rgb(255 255 255 / 0.06);
}

.imd-status-row dt {
    font-weight: 600;
    flex: none;
}

.imd-status-row dd {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    text-align: end;
    min-width: 0;
}

.imd-status-value {
    min-width: 0;
    overflow-wrap: anywhere;
    opacity: 0.85;
}

.imd-status-badge {
    flex: none;
}

/* Aktivitätsprotokoll: Details */
.imd-activity { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; font-size: .875rem; }
.imd-activity dt { font-weight: 600; }
.imd-activity dd { margin: 0; overflow-wrap: anywhere; }
.imd-activity-changes { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.imd-activity-changes th, .imd-activity-changes td { text-align: start; padding: .4rem .5rem; border-top: 1px solid rgb(0 0 0 / .07); vertical-align: top; overflow-wrap: anywhere; }
.dark .imd-activity-changes th, .dark .imd-activity-changes td { border-top-color: rgb(255 255 255 / .08); }
.imd-activity-changes th { font-weight: 600; }

/* Sicherheit (Administrator) */
.imd-security-banner { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-radius: .75rem; font-weight: 600; border: 1px solid; }
.imd-security-banner.is-ok { background: rgb(22 163 74 / .08); border-color: rgb(22 163 74 / .3); color: rgb(21 128 61); }
.imd-security-banner.is-warning { background: rgb(217 119 6 / .08); border-color: rgb(217 119 6 / .35); color: rgb(180 83 9); }
.dark .imd-security-banner.is-ok { color: rgb(134 239 172); }
.dark .imd-security-banner.is-warning { color: rgb(252 211 77); }
.imd-security-banner-icon { width: 1.4rem; height: 1.4rem; flex: none; }
.imd-security-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.imd-security-table th { text-align: start; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; padding: .5rem .75rem; }
.imd-security-table td { padding: .7rem .75rem; border-top: 1px solid rgb(0 0 0 / .06); vertical-align: middle; }
.dark .imd-security-table td { border-top-color: rgb(255 255 255 / .07); }
.imd-security-table small { opacity: .7; font-size: .8125rem; }
.imd-security-state { width: 1.35rem; height: 1.35rem; }
.imd-security-state.is-ok { color: rgb(22 163 74); }
.imd-security-state.is-warning { color: rgb(217 119 6); }
.imd-security-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; padding: .2rem .45rem; border-radius: .35rem; border: 1px solid rgb(14 116 144 / .35); color: rgb(14 116 144); overflow-wrap: anywhere; }
.dark .imd-security-code { color: rgb(103 232 249); border-color: rgb(103 232 249 / .35); }
.imd-cache-icon-cell { width: 3.5rem; }
.imd-cache-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: .6rem; }
.imd-cache-icon svg { width: 100%; height: 100%; }
.imd-cache-icon--primary { background: rgb(14 116 144 / .1); color: rgb(14 116 144); }
.imd-cache-icon--warning { background: rgb(217 119 6 / .1); color: rgb(217 119 6); }
.imd-cache-icon--info { background: rgb(2 132 199 / .1); color: rgb(2 132 199); }
.imd-cache-icon--success { background: rgb(22 163 74 / .1); color: rgb(22 163 74); }
.imd-cache-icon--danger { background: rgb(225 29 72 / .1); color: rgb(225 29 72); }
.imd-cache-action { text-align: end; white-space: nowrap; width: 1%; }

/* Administrator: Übersicht mit Kacheln */
.imd-admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .5rem 1.5rem; }
.imd-admin-tile { display: flex; gap: .9rem; align-items: flex-start; padding: .75rem; border-radius: .75rem; text-decoration: none; transition: background .15s; }
.imd-admin-tile:hover { background: rgb(0 0 0 / .035); }
.dark .imd-admin-tile:hover { background: rgb(255 255 255 / .05); }
.imd-admin-tile-icon { flex: none; display: inline-flex; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: .6rem; background: rgb(0 0 0 / .04); color: var(--gray-500); }
.dark .imd-admin-tile-icon { background: rgb(255 255 255 / .06); }
.imd-admin-tile-icon svg { width: 100%; height: 100%; }
.imd-admin-tile-title { display: block; font-weight: 600; color: var(--primary-600); }
.dark .imd-admin-tile-title { color: var(--primary-400); }
.imd-admin-tile-text { display: block; font-size: .875rem; color: var(--gray-600); line-height: 1.45; margin-top: .1rem; }
.dark .imd-admin-tile-text { color: var(--gray-400); }

/* „+ Neu“ in der Kopfzeile */
.imd-quick-create { margin-inline-end: .5rem; }
@media (max-width: 640px) { .imd-quick-create-label { display: none; } }

/* Dashboard: Objekte pflegen */
.imd-care-photo { width: 3rem; height: 2.25rem; object-fit: cover; border-radius: .4rem; flex: none; background: var(--gray-100); }
.imd-care-issues { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; max-width: 55%; }
@media (max-width: 640px) { .imd-care-issues { display: none; } }

/* Module */
.imd-module-off td:first-child { opacity: .6; }
.imd-module-deps { color: var(--gray-500); }

/* Logo-Upload: helle Vorschau wie auf der Website, kein Dateiname, kein dunkler Schleier */
.imd-logo-upload .filepond--root, .imd-logo-upload .filepond--panel-root { background: #fff; }
.dark .imd-logo-upload .filepond--root, .dark .imd-logo-upload .filepond--panel-root { background: #fff; }
.imd-logo-upload .filepond--image-preview { background: #fff; }
.imd-logo-upload .filepond--image-preview-overlay { display: none; }
.imd-logo-upload .filepond--file-info, .imd-logo-upload .filepond--file-status { display: none; }
.imd-logo-upload .filepond--image-clip img { object-fit: contain; }
.imd-logo-upload .filepond--file-action-button { background: rgb(0 0 0 / .55); }

/* ---------- Social Media (Modul Social) ---------- */

.imd-social-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.imd-social-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.imd-social-stat-label { color: var(--gray-500); font-size: .8rem; margin-top: .25rem; }
.imd-social-hint { margin: 0; font-size: .9rem; }
.imd-social-link { color: var(--primary-600); text-decoration: underline; }
.imd-social-text { white-space: pre-wrap; font-family: inherit; font-size: .9rem; line-height: 1.5; margin: 0; }

.imd-social-compose {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
}

.imd-social-card img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid rgb(0 0 0 / 0.08); }
.imd-social-copy { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.imd-social-note { color: var(--gray-500); font-size: .8rem; }
.imd-social-textarea {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    font-size: .9rem;
    line-height: 1.5;
    border: 1px solid rgb(0 0 0 / 0.15);
    border-radius: .5rem;
    background: transparent;
    resize: vertical;
}
.dark .imd-social-textarea { border-color: rgb(255 255 255 / 0.15); }
.imd-social-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.imd-social-head .imd-social-copy { margin-top: 0; }
.imd-social-platform { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.imd-social-error { color: var(--danger-600); }
.imd-social-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.imd-social-field { display: grid; gap: .25rem; font-size: .875rem; }
.imd-social-field > span { font-weight: 500; }
.imd-social-grow { flex: 1 1 12rem; }
.imd-social-select { padding: .5rem .75rem; border: 1px solid rgb(0 0 0 / 0.15); border-radius: .5rem; background: transparent; font-size: .9rem; min-width: 10rem; }
.dark .imd-social-select { border-color: rgb(255 255 255 / 0.15); }
.imd-social-canvas { width: 100%; max-height: 560px; object-fit: contain; background: #0f172a; border-radius: .75rem; }
.imd-social-player { width: 100%; max-height: 420px; background: #000; border-radius: .75rem; }
.imd-social-progress { height: .35rem; background: rgb(0 0 0 / 0.08); border-radius: 1rem; overflow: hidden; }
.imd-social-progress > div { height: 100%; background: var(--primary-600); transition: width .3s; }
.imd-social-video .text-danger { color: var(--danger-600); }
.imd-social-video .text-muted { color: var(--gray-500); }

/* Beitragsseite: Schnellauswahl, Kopfbereich, Tonwahl, Vorschau */
.imd-social-picks { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.imd-social-pick { display: flex; gap: .75rem; align-items: center; padding: .5rem; border: 1px solid rgb(0 0 0 / 0.08); border-radius: .75rem; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.imd-social-pick:hover { box-shadow: 0 6px 20px rgb(0 0 0 / 0.08); transform: translateY(-1px); }
.imd-social-pick-img { flex: 0 0 4.5rem; height: 3.5rem; border-radius: .5rem; background: var(--gray-100); overflow: hidden; }
.imd-social-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.imd-social-pick-body { display: grid; gap: .1rem; min-width: 0; }
.imd-social-pick-ref { font-size: .75rem; color: var(--gray-500); }
.imd-social-pick-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.imd-social-hero { display: flex; gap: 1.25rem; align-items: center; padding: 1rem 1.25rem; border-radius: 1rem; background: linear-gradient(135deg, var(--primary-50), white); border: 1px solid rgb(0 0 0 / 0.06); flex-wrap: wrap; }
.dark .imd-social-hero { background: linear-gradient(135deg, rgb(255 255 255 / 0.04), transparent); border-color: rgb(255 255 255 / 0.08); }
.imd-social-hero-img { flex: 0 0 7rem; height: 5rem; border-radius: .75rem; overflow: hidden; background: var(--gray-100); }
.imd-social-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.imd-social-hero-body { flex: 1 1 18rem; min-width: 0; display: grid; gap: .2rem; }
.imd-social-hero-meta { font-size: .8rem; color: var(--gray-500); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.imd-social-hero-title { font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.3; }
.imd-social-hero-price { font-size: 1.35rem; font-weight: 800; color: var(--primary-600); }
.imd-social-hero-side { display: grid; gap: .5rem; justify-items: end; }
.imd-social-langs { display: inline-flex; border: 1px solid rgb(0 0 0 / 0.12); border-radius: 999px; overflow: hidden; }
.imd-social-lang { padding: .3rem .7rem; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--gray-600); }
.imd-social-lang.is-active { background: var(--primary-600); color: white; }
.dark .imd-social-lang { color: var(--gray-300); }

.imd-social-tones { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.imd-social-chip { padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgb(0 0 0 / 0.12); background: transparent; font-size: .8rem; cursor: pointer; }
.imd-social-chip.is-active { background: var(--primary-600); border-color: var(--primary-600); color: white; }
.dark .imd-social-chip { border-color: rgb(255 255 255 / 0.15); }

.imd-social-box { padding: 1rem; border: 1px solid rgb(0 0 0 / 0.08); border-radius: 1rem; background: white; display: grid; gap: .5rem; }
.dark .imd-social-box { background: rgb(255 255 255 / 0.03); border-color: rgb(255 255 255 / 0.08); }
.imd-social-box.is-loading textarea { background: repeating-linear-gradient(90deg, transparent, transparent 2rem, rgb(0 0 0 / 0.03) 2rem, rgb(0 0 0 / 0.03) 4rem); animation: imd-social-shimmer 1.2s linear infinite; }
@keyframes imd-social-shimmer { from { background-position: 0 0; } to { background-position: 4rem 0; } }
.imd-social-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Abstands- und Layout-Klassen im Tailwind-Stil: das Filament-Stylesheet (v5) liefert sie nicht mehr mit,
   eigene Seiten (Beitrag erstellen, Einstellungen, Website) nutzen sie aber für Abstände zwischen Kästen */
.fi-page .grid { display: grid; }
.fi-page .flex { display: flex; }
.fi-page .flex-wrap { flex-wrap: wrap; }
.fi-page .items-center { align-items: center; }
.fi-page .justify-between { justify-content: space-between; }
.fi-page .justify-end { justify-content: flex-end; }
.fi-page .gap-2 { gap: .5rem; }
.fi-page .gap-3 { gap: .75rem; }
.fi-page .gap-4 { gap: 1rem; }
.fi-page .gap-6 { gap: 1.5rem; }
.fi-page .mt-4 { margin-top: 1rem; }
.fi-page .mt-6 { margin-top: 1.5rem; }
.fi-page .mb-4 { margin-bottom: 1rem; }
.fi-page .w-full { width: 100%; }

/* Beitragsseite: Vorlage und Farbe der Karte */
.imd-social-card { position: relative; }
.imd-social-card.is-loading img { opacity: .55; transition: opacity .2s; }
.imd-social-card-spinner { position: absolute; inset: 0; margin: auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid rgb(0 0 0 / 0.1); border-top-color: var(--primary-600); animation: imd-social-spin .8s linear infinite; }
@keyframes imd-social-spin { to { transform: rotate(360deg); } }
.imd-social-design { display: grid; gap: .6rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid rgb(0 0 0 / 0.08); border-radius: 1rem; background: linear-gradient(180deg, rgb(0 0 0 / 0.02), transparent); }
.dark .imd-social-design { border-color: rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.03); }
.imd-social-design-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.imd-social-design-title { font-weight: 600; font-size: .875rem; }
.imd-social-styles { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); }
.imd-social-style { display: grid; gap: .35rem; padding: .35rem; border: 2px solid transparent; border-radius: .75rem; background: transparent; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
.imd-social-style:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(0 0 0 / 0.1); }
.imd-social-style.is-active { border-color: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-600) 25%, transparent); }
.imd-social-style-img { display: block; aspect-ratio: 4 / 5; border-radius: .5rem; overflow: hidden; background: var(--gray-100); border: 1px solid rgb(0 0 0 / 0.08); }
.dark .imd-social-style-img { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.1); }
.imd-social-style-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.imd-social-style-video { aspect-ratio: 9 / 16; background: #0f172a; }
.imd-social-design-video { margin-top: 1rem; }
.imd-social-style-name { font-size: .75rem; font-weight: 600; }
.imd-social-colors { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.imd-social-swatch { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid white; background: var(--swatch, #e5e7eb); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15); cursor: pointer; padding: 0; transition: transform .15s; }
.imd-social-swatch:hover { transform: scale(1.12); }
.imd-social-swatch.is-active { box-shadow: 0 0 0 2px var(--primary-600); }
.dark .imd-social-swatch { border-color: rgb(17 24 39); }
.imd-social-swatch-custom { position: relative; display: inline-grid; place-items: center; background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); color: white; font-weight: 800; font-size: 1rem; line-height: 1; overflow: hidden; }
.imd-social-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.imd-social-swatch-custom span { text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); pointer-events: none; }

.imd-social-preview summary { cursor: pointer; font-size: .875rem; font-weight: 600; }
.imd-social-phone { margin: .75rem auto 0; max-width: 22rem; border: 1px solid rgb(0 0 0 / 0.12); border-radius: 1.25rem; overflow: hidden; background: white; color: #0f172a; font-size: .85rem; }
.imd-social-phone-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; }
.imd-social-phone-avatar { width: 1.6rem; height: 1.6rem; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6); }
.imd-social-phone img { width: 100%; display: block; }
.imd-social-phone-caption { padding: .6rem .75rem .9rem; line-height: 1.4; }
.imd-social-phone-more { color: #64748b; }

/* Spendenaufruf auf dem Dashboard (Modul Donations) */
.imd-donate { display: grid; gap: 1rem; }
.imd-donate-text { max-width: 70ch; line-height: 1.55; }
.imd-donate-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.25rem; }
.imd-donate-bank > summary { cursor: pointer; font-weight: 600; padding: .45rem 0; }
.imd-donate-bank dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin-top: .35rem; font-size: .9rem; }
.imd-donate-bank dt { color: var(--gray-500); }
.imd-donate-bank dd { font-variant-numeric: tabular-nums; }
.imd-donate-supporters h4 { font-weight: 600; margin-bottom: .5rem; display: flex; gap: .75rem; align-items: baseline; }
.imd-donate-total { color: var(--gray-500); font-weight: 500; font-size: .9rem; }
.imd-donate-supporters ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.imd-donate-supporters li { display: inline-flex; gap: .5rem; align-items: baseline; padding: .3rem .7rem; border-radius: 999px; background: var(--gray-100); font-size: .9rem; }
.dark .imd-donate-supporters li { background: rgba(255,255,255,.06); }
.imd-donate-supporters li.imd-donate-own { outline: 2px solid var(--primary-500); }
.imd-donate-amount { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.imd-donate-thanks { margin-top: .75rem; font-weight: 600; color: var(--primary-600); }