/* Mobilio Intranet - Telefonverzeichnis V2
   Wird nach intranet-modules.css eingebunden. */

.im-directory-shell {
    width: min(1480px,calc(100% - 36px));
    padding-top: clamp(42px,5vw,72px);
}

.im-directory-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

    .im-directory-head h1 {
        margin: 0;
        font-size: clamp(46px,6vw,82px);
        line-height: .9;
        letter-spacing: -.065em;
    }

    .im-directory-head p {
        max-width: 650px;
        margin: 17px 0 0;
        color: var(--im-muted);
        font-size: 14px;
        line-height: 1.55;
    }

.im-directory-actions {
    display: flex;
    gap: 9px;
}

    .im-directory-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 17px;
        border: 1px solid var(--im-line);
        border-radius: 999px;
        color: var(--im-text);
        background: var(--im-surface);
        box-shadow: 0 14px 36px rgba(0,0,0,.1);
        font-size: 12px;
        font-weight: 750;
    }

        .im-directory-actions a:hover {
            border-color: color-mix(in srgb,var(--im-accent) 55%,var(--im-line));
            transform: translateY(-1px);
        }

.im-directory-controls {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 13px;
}

.im-searchbar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--im-line);
    border-radius: 15px;
    background: var(--im-surface);
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
}

    .im-searchbar > span {
        color: var(--im-muted);
        font-size: 25px;
    }

    .im-searchbar input {
        width: 100%;
        min-width: 0;
        height: 54px;
        border: 0;
        outline: 0;
        color: var(--im-text);
        background: transparent;
        font-size: 14px;
    }

        .im-searchbar input::placeholder {
            color: color-mix(in srgb,var(--im-muted) 74%,transparent);
        }

    .im-searchbar button {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex: 0 0 auto;
        border: 1px solid var(--im-line);
        border-radius: 50%;
        color: var(--im-muted);
        background: var(--im-soft);
        cursor: pointer;
        font-size: 19px;
    }

.im-directory-meta {
    display: grid;
    min-width: 145px;
    align-content: center;
    padding: 8px 18px;
    border: 1px solid var(--im-line);
    border-radius: 15px;
    background: var(--im-surface);
}

    .im-directory-meta strong {
        font-size: 18px;
    }

    .im-directory-meta span {
        color: var(--im-muted);
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

.im-city-tabs {
    display: flex;
    gap: 7px;
    margin: 0 0 24px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--im-line);
    border-radius: 999px;
    background: var(--im-surface);
    scrollbar-width: none;
}

    .im-city-tabs::-webkit-scrollbar {
        display: none;
    }

    .im-city-tabs button {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        color: var(--im-muted);
        background: transparent;
        cursor: pointer;
        font-size: 11px;
    }

        .im-city-tabs button:hover {
            color: var(--im-text);
        }

        .im-city-tabs button.is-active {
            color: var(--im-primary);
            background: var(--im-accent);
            box-shadow: 0 8px 24px color-mix(in srgb,var(--im-accent) 18%,transparent);
            font-weight: 850;
        }

.im-city-results {
    display: grid;
    gap: 28px;
}

.im-city-divider {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 7px 2px 11px;
    border-bottom: 1px solid var(--im-line);
}

    .im-city-divider span {
        grid-column: 1/-1;
        color: var(--im-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .im-city-divider h2 {
        margin: 5px 0 0;
        font-size: 26px;
        letter-spacing: -.04em;
    }

    .im-city-divider small {
        color: var(--im-muted);
    }

.im-business-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
    align-items: start;
}

.im-business {
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--im-line);
    border-radius: 20px;
    background: var(--im-surface);
    box-shadow: 0 22px 55px rgba(0,0,0,.1);
}

.im-business-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-height: 105px;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(135deg,var(--business-color,#3e6797),color-mix(in srgb,var(--business-color,#3e6797) 78%,#111));
}

    .im-business-head > div:first-child > span {
        display: block;
        margin-bottom: 6px;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .13em;
        opacity: .7;
        text-transform: uppercase;
    }

    .im-business-head h2 {
        margin: 0;
        font-size: 20px;
        letter-spacing: -.035em;
    }

    .im-business-head p {
        margin: 7px 0 0;
        font-size: 10px;
        opacity: .75;
    }

.im-business-contact {
    display: grid;
    justify-items: end;
    gap: 7px;
    max-width: 48%;
    text-align: right;
}

    .im-business-contact a {
        overflow-wrap: anywhere;
        font-size: 10px;
    }

        .im-business-contact a:hover {
            text-decoration: underline;
        }

.im-department {
    padding: 0 18px 17px;
}

    .im-department + .im-department {
        border-top: 1px solid var(--im-line);
    }

.im-department-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 52px;
    padding: 13px 2px 10px;
}

    .im-department-head h3 {
        margin: 0;
        font-size: 13px;
        letter-spacing: -.015em;
    }

    .im-department-head a {
        max-width: 58%;
        overflow: hidden;
        color: var(--im-accent);
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.im-page.is-light .im-department-head a, .im-page.is-light .im-contact-table a {
    color: color-mix(in srgb,var(--im-primary) 86%,#0872c5);
}

.im-contact-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .im-contact-table th {
        padding: 8px 7px;
        color: var(--im-muted);
        border-bottom: 1px solid var(--im-line);
        text-align: left;
        font-size: 8px;
        letter-spacing: .075em;
        text-transform: uppercase;
    }

        .im-contact-table th:nth-child(1) {
            width: 20%
        }

        .im-contact-table th:nth-child(2) {
            width: 19%
        }

        .im-contact-table th:nth-child(3) {
            width: 27%
        }

        .im-contact-table th:nth-child(4) {
            width: 10%
        }

        .im-contact-table th:nth-child(5) {
            width: 8%
        }

        .im-contact-table th:nth-child(6) {
            width: 16%
        }

    .im-contact-table td {
        padding: 10px 7px;
        border-bottom: 1px solid color-mix(in srgb,var(--im-line) 68%,transparent);
        font-size: 10px;
        overflow-wrap: anywhere;
        vertical-align: top;
    }

    .im-contact-table tr:last-child td {
        border-bottom: 0;
    }

    .im-contact-table td:first-child {
        color: var(--im-muted);
    }

    .im-contact-table a {
        color: var(--im-accent);
    }

.im-contact-mobile {
    display: none;
}

.im-no-results {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 50px;
    color: var(--im-muted);
    text-align: center;
}

/* Verwaltung */
.ita-admin {
    color: var(--is-text);
}

    .ita-admin button, .ita-admin input, .ita-admin select {
        font: inherit;
    }

.ita-toolbar, .ita-section-heading, .ita-sub-heading, .ita-contact-head, .ita-row-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ita-toolbar {
    align-items: flex-start;
    margin-bottom: 22px;
}

    .ita-toolbar h2 {
        margin: 0;
        font-size: 25px;
    }

    .ita-toolbar p {
        max-width: 780px;
        margin: 7px 0 0;
        color: var(--is-sub);
        line-height: 1.5;
    }

.ita-add-primary, .ita-section-heading button, .ita-sub-heading button, .ita-contact-head button, .ita-save, .ita-danger {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--is-border);
    border-radius: 10px;
    color: var(--is-text);
    background: var(--is-card-soft);
    cursor: pointer;
}

.ita-add-primary, .ita-save {
    color: var(--is-accent-ink);
    border-color: var(--is-accent);
    background: var(--is-accent);
    font-weight: 800;
}

.ita-danger {
    color: var(--is-danger);
    background: transparent;
}

.ita-message {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb,var(--is-success) 35%,var(--is-border));
    border-radius: 11px;
    color: var(--is-success);
    background: color-mix(in srgb,var(--is-success) 8%,transparent);
}

    .ita-message.is-error {
        color: var(--is-danger);
        border-color: color-mix(in srgb,var(--is-danger) 35%,var(--is-border));
    }

.ita-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 48px 20px;
    border: 1px dashed var(--is-border);
    border-radius: 15px;
    color: var(--is-sub);
    text-align: center;
}

.ita-city-tabs {
    display: flex;
    gap: 7px;
    margin-bottom: 13px;
    overflow-x: auto;
}

    .ita-city-tabs button {
        flex: 0 0 auto;
        min-height: 41px;
        padding: 0 17px;
        border: 1px solid var(--is-border);
        border-radius: 999px;
        color: var(--is-sub);
        background: transparent;
        cursor: pointer;
    }

        .ita-city-tabs button.is-active {
            color: var(--is-accent-ink);
            border-color: var(--is-accent);
            background: var(--is-accent);
            font-weight: 800;
        }

.ita-city-editor, .ita-business-body {
    padding: 18px;
    border: 1px solid var(--is-border);
    border-radius: 15px;
    background: var(--is-card-soft);
}

.ita-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 11px;
}

.ita-grid-city {
    grid-template-columns: 2fr .65fr 1fr .7fr;
}

.ita-grid-department {
    grid-template-columns: 1.3fr 1.3fr .55fr .55fr;
}

.ita-grid-contact {
    grid-template-columns: 1fr 1fr 1.35fr .55fr .55fr .8fr .5fr .5fr;
}

.ita-grid label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

    .ita-grid label > span {
        color: var(--is-sub);
        font-size: 10px;
        font-weight: 750;
    }

.ita-grid input, .ita-grid select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--is-border);
    border-radius: 9px;
    outline: 0;
    color: var(--is-text);
    background: var(--is-input);
}

    .ita-grid input:focus, .ita-grid select:focus {
        border-color: var(--is-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb,var(--is-accent) 15%,transparent);
    }

.ita-grid .ita-wide {
    grid-column: span 2;
}

.ita-grid .ita-active {
    display: flex;
    align-items: center;
    align-self: end;
    height: 40px;
}

    .ita-grid .ita-active input {
        width: 17px;
        height: 17px;
        accent-color: var(--is-accent);
    }

.ita-color {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 6px;
}

    .ita-color input[type=color] {
        padding: 4px;
    }

.ita-row-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.ita-row-actions-small button {
    min-height: 32px;
    font-size: 10px;
}

.ita-section-heading {
    margin: 28px 0 11px;
}

    .ita-section-heading h3 {
        margin: 0 0 3px;
        font-size: 17px;
    }

    .ita-section-heading span {
        color: var(--is-sub);
        font-size: 10px;
    }

.ita-businesses {
    display: grid;
    gap: 10px;
}

.ita-business {
    overflow: hidden;
    border: 1px solid var(--is-border);
    border-radius: 15px;
    background: var(--is-card-soft);
}

    .ita-business > summary {
        display: grid;
        grid-template-columns: 12px minmax(0,1fr) auto;
        align-items: center;
        gap: 11px;
        padding: 16px 18px;
        cursor: pointer;
        list-style: none;
    }

        .ita-business > summary::-webkit-details-marker {
            display: none;
        }

        .ita-business > summary > span:last-child {
            color: var(--is-sub);
            font-size: 10px;
        }

.ita-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ita-business-body {
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--is-card);
}

.ita-sub-heading {
    margin: 24px 0 9px;
}

.ita-department {
    margin-top: 9px;
    padding: 14px;
    border: 1px solid var(--is-border);
    border-radius: 13px;
    background: var(--is-card-soft);
}

.ita-contact-head {
    margin: 19px 0 8px;
    color: var(--is-sub);
    font-size: 11px;
    font-weight: 800;
}

.ita-contacts {
    display: grid;
    gap: 7px;
}

.ita-contact {
    padding: 11px;
    border: 1px solid var(--is-border);
    border-radius: 11px;
    background: var(--is-card);
}

@media(max-width:1100px) {
    .im-business-list {
        grid-template-columns: 1fr
    }

    .ita-grid, .ita-grid-city, .ita-grid-department, .ita-grid-contact {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:680px) {
    .im-directory-shell {
        width: min(100% - 24px,1480px)
    }

    .im-directory-head {
        align-items: flex-start;
        flex-direction: column
    }

        .im-directory-head h1 {
            font-size: clamp(43px,14vw,65px)
        }

    .im-directory-actions {
        width: 100%
    }

        .im-directory-actions a {
            width: 100%
        }

    .im-directory-controls {
        grid-template-columns: 1fr
    }

    .im-directory-meta {
        display: flex;
        align-items: baseline;
        gap: 7px;
        min-width: 0;
        padding: 10px 14px
    }

    .im-city-tabs {
        border-radius: 14px
    }

        .im-city-tabs button {
            padding-inline: 14px
        }

    .im-business-head {
        align-items: flex-start;
        flex-direction: column
    }

    .im-business-contact {
        justify-items: start;
        max-width: 100%;
        text-align: left
    }

    .im-department {
        padding: 0 12px 14px
    }

    .im-department-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

        .im-department-head a {
            max-width: 100%
        }

    .im-contact-table {
        display: none
    }

    .im-contact-mobile {
        display: grid;
        gap: 8px
    }

    .im-contact-card {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 10px;
        padding: 13px;
        border: 1px solid var(--im-line);
        border-radius: 12px;
        background: var(--im-soft)
    }

        .im-contact-card > div:last-child {
            display: grid;
            justify-items: end;
            gap: 3px
        }

        .im-contact-card strong, .im-contact-card small, .im-contact-card em {
            display: block
        }

        .im-contact-card small {
            margin-top: 3px;
            color: var(--im-muted)
        }

        .im-contact-card em {
            margin-top: 6px;
            color: var(--im-muted);
            font-size: 8px;
            font-style: normal
        }

        .im-contact-card a {
            color: var(--im-accent);
            font-size: 10px
        }

    .ita-toolbar {
        flex-direction: column
    }

    .ita-add-primary {
        width: 100%
    }

    .ita-grid, .ita-grid-city, .ita-grid-department, .ita-grid-contact {
        grid-template-columns: 1fr
    }

        .ita-grid .ita-wide {
            grid-column: auto
        }

    .ita-business > summary {
        padding: 14px 12px
    }

    .ita-business-body {
        padding: 12px
    }

    .ita-department {
        padding: 11px
    }

    .ita-row-actions {
        align-items: stretch;
        flex-direction: column-reverse
    }

        .ita-row-actions button {
            width: 100%
        }
}

@media(prefers-reduced-motion:reduce) {
    .im-directory-shell *, .ita-admin * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}