/**
 * q4u_address — address-card + map styling.
 * Self-contained: uses CSS custom properties inherited from the host
 * theme (--bs-body-color, --bs-primary, --bs-border-color) so the
 * cards blend into whatever Bootstrap-ish theme is active.
 */

/* Suppress legacy q4u_base ::before CSS icons on our contact rows.
   We ship our own inline SVGs; the old rules would double-render. */
.q4uaddress-contact-row .mail-wrapper a::before,
.q4uaddress-contact-row.mail-wrapper a::before,
.q4uaddress-contact-row .telephone-number a::before,
.q4uaddress-contact-row.telephone-number a::before,
.q4uaddress-contact-row .mobile-number a::before,
.q4uaddress-contact-row.mobile-number a::before,
.q4uaddress-contact-row .fax-number a::before,
.q4uaddress-contact-row.fax-number a::before,
.mail-wrapper.q4uaddress-contact-row a::before,
.telephone-number.q4uaddress-contact-row a::before,
.mobile-number.q4uaddress-contact-row a::before,
.fax-number.q4uaddress-contact-row a::before {
    content: none !important;
    display: none !important;
}

/* Contact rows: icon left, content right, vertically centered */
.q4uaddress-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: inherit;
}

.q4uaddress-contact-row--multiline {
    align-items: flex-start;
}

/* Two equal-height blocks per card: contact details (top) + postal
   address (bottom). `min-height` caps give a consistent visual grid
   across cards even when individual records leave fields empty.
   All sizes in `em` so the heights scale with the user's text-size
   preference (WCAG 1.4.4 — text can be resized up to 200 % without
   loss of content or functionality). */
.q4uaddress-contact-block {
    min-height: 7em;           /* ≈ 4 contact rows at default zoom  */
    display: flex;
    flex-direction: column;
    gap: 0;
}

.q4uaddress-address-block {
    min-height: 4em;           /* ≈ 3 address lines */
    padding-top: 1em;
    margin-top: 0.5em;
    border-top: 0.0625em solid rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.08);
}

.q4uaddress-address-block .postal-address {
    margin-top: 0 !important;
}

/* Always reserve a line for the jobTitle/position so cards with and
   without a position align vertically. When the position is empty we
   render &nbsp; inside the <p> — min-height kicks in so the margin
   collapses consistently across cards. */
.card.address .jobTitle {
    min-height: 1.4em;
    margin-bottom: 0.5rem;
}

.q4uaddress-contact-row--multiline .q4uaddress-icon {
    margin-top: 0.2rem;
}

.q4uaddress-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    color: currentColor;
}

/* Contact rows are fully-wrapped links (icon + text inside <a>).
   Whole row is one click target (Fitts's Law). Icon keeps the brand
   primary colour; text follows the site-wide link colour. Neutralise
   the global :visited rule from q4u_base (_link.scss) — inside a
   contact card the visited-link cue is noise, not navigation. */
.q4uaddress-contact-row .q4uaddress-contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    word-break: break-word;
}

.q4uaddress-contact-row--multiline .q4uaddress-contact-link {
    align-items: flex-start;
}

.q4uaddress-contact-row .q4uaddress-contact-link > span {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.q4uaddress-contact-row .q4uaddress-contact-link:hover,
.q4uaddress-contact-row .q4uaddress-contact-link:focus-visible {
    color: var(--bs-link-hover-color, var(--bs-link-color));
}

.q4uaddress-contact-row .q4uaddress-contact-link:visited {
    color: inherit;
}

.q4uaddress-address-body {
    line-height: 1.4;
}

/* Card footer: social icons (left) + vCard download (right).
   Footer always renders so every card has a visual anchor at the bottom,
   even for records without social channels. */
.q4uaddress-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Social channels footer */
.q4uaddress-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* vCard download — icon-only, sized like the social icons so the
   footer has a consistent visual rhythm (2rem click target, 24px SVG).
   Same muted-opacity treatment so it stays quiet until hovered. */
.q4uaddress-vcard-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #111;
    text-decoration: none !important;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

html[data-bs-theme="dark"] .q4uaddress-vcard-download,
[data-bs-theme="dark"] .q4uaddress-vcard-download {
    color: #fff;
}

.q4uaddress-vcard-download:hover,
.q4uaddress-vcard-download:focus-visible {
    opacity: 1;
    transform: scale(1.15);
}

.q4uaddress-vcard-download:visited {
    color: inherit;
}

.q4uaddress-vcard-download__icon {
    width: 24px;
    height: 24px;
    color: currentColor;
}

/* Same function — same design as the page-footer social icons:
   opacity 0.7 at rest, opacity 1 + scale(1.15) on hover.
   Auto-contrast colour: black on light theme, white on dark. */
a.q4uaddress-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent !important;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    text-decoration: none !important;
    color: #111 !important;
}

html[data-bs-theme="dark"] a.q4uaddress-social__link,
[data-bs-theme="dark"] a.q4uaddress-social__link {
    color: #fff !important;
}

/* Kill external-link hints that outer themes may attach to
   target=_blank anchors — the platform icon itself is the affordance. */
.q4uaddress-social__link::before,
.q4uaddress-social__link::after {
    content: none !important;
    display: none !important;
}
.q4uaddress-social__link img.external-link-icon,
.q4uaddress-social__link .external-link-icon {
    display: none !important;
}

a.q4uaddress-social__link:hover,
a.q4uaddress-social__link:focus-visible {
    opacity: 1;
    transform: scale(1.15);
    text-decoration: none !important;
}

.q4uaddress-social__icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    color: inherit;
}
.q4uaddress-social__icon * {
    fill: currentColor;
}

/* Platform brand colours on hover */
a.q4uaddress-social__link--facebook:hover  { color: #1877f2 !important; }
a.q4uaddress-social__link--instagram:hover { color: #e4405f !important; }
a.q4uaddress-social__link--linkedin:hover  { color: #0a66c2 !important; }
a.q4uaddress-social__link--twitter:hover   { color: #000    !important; }
a.q4uaddress-social__link--youtube:hover   { color: #ff0000 !important; }
a.q4uaddress-social__link--tiktok:hover    { color: #000    !important; }
a.q4uaddress-social__link--xing:hover      { color: #006567 !important; }
a.q4uaddress-social__link--mastodon:hover  { color: #6364ff !important; }
a.q4uaddress-social__link--bluesky:hover   { color: #1185fe !important; }

.q4uaddress-social__label {
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

/* Card media (person photo, company logo) — rounded only at the top,
   flat at the bottom so the image flows edge-to-edge into the
   card-body. Outer theme rules that round all `.card img` are
   neutralised with explicit radii. */
.q4uaddress-card__media {
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    aspect-ratio: 1 / 1;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.q4uaddress-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0 !important;
}

.card.address > .q4uaddress-card__media img.q4uaddress-card__image {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Card heading doubles as profile link — keep the visual weight of a
   heading, drop the default link chrome so the card still reads as a
   card, not a link row. */
.q4uaddress-card__profile-link {
    color: inherit;
    text-decoration: none;
}

.q4uaddress-card__profile-link:hover,
.q4uaddress-card__profile-link:focus-visible {
    color: var(--bs-link-hover-color, var(--bs-link-color));
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.q4uaddress-card__profile-link:visited {
    color: inherit;
}

/* Map plugin — taller viewport so the overview is usable without
   the list plugin competing for space. `vh` + clamp keeps it
   proportional to the device while staying within readable limits. */
.q4uaddress-map {
    border: 0.0625em solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    height: clamp(25rem, 70vh, 50rem);
}

.q4uaddress-marker {
    display: none; /* Markers are rendered by Leaflet from data-* attrs */
}

/* Fit-all control — sits under the zoom buttons, matches Leaflet's
   bar-button sizing (30×30) so it looks native. */
.q4uaddress-fit-control__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #333;
    background: #fff;
}

.q4uaddress-fit-control__btn:hover,
.q4uaddress-fit-control__btn:focus-visible {
    background: #f4f4f4;
    color: #000;
}

.q4uaddress-fit-control__btn svg {
    display: block;
}

/* Popup: let the Address Card render at its natural width inside the
   Leaflet popup (default popup is cramped).

   SCOPED to .q4u-address-popup (set via bindPopup's className in
   address-map.js) — these rules are written for a full address card and
   must not reach other maps. Unscoped, the `margin: 0 !important` here
   beat both Leaflet's own padding and q4u_base's, and `min-width` forced
   card width onto any popup: the regional group finder's two-line label
   rendered as a 280px box with its text flush against the rounded edge. */
.q4u-address-popup .leaflet-popup-content {
    margin: 0 !important;
    min-width: 17.5rem;
}

.q4u-address-popup .leaflet-popup-content .card.address {
    border: 0;
    box-shadow: none;
    margin-bottom: 0 !important;
}

/* Shrink the photo inside map popups — a full 1:1 portrait eats too
   much vertical space and pushes contact info below the fold. A
   landscape banner keeps the card compact while staying recognisable. */
.q4u-address-popup .leaflet-popup-content .q4uaddress-card__media {
    aspect-ratio: 16 / 5;
}

.q4u-address-popup .leaflet-popup-content .address--list-details {
    margin-bottom: 0.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   Compact card (map popups)
   ═══════════════════════════════════════════════════════════════ */

.q4uaddress-card--compact {
    border: 0;
    box-shadow: none;
    min-width: 17.5rem;
}

.q4uaddress-card--compact__body {
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.q4uaddress-card--compact__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.q4uaddress-card--compact__photo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bs-secondary-bg, #e9ecef);
}

.q4uaddress-card--compact__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Collapse the photo on very short viewports (mobile landscape) so
   the popup stays usable. */
@media (max-height: 480px) {
    .q4uaddress-card--compact__photo {
        display: none;
    }
}

.q4uaddress-card--compact__identity {
    min-width: 0; /* allow flex child truncation */
}

.q4uaddress-card--compact__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.q4uaddress-card--compact__position {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--bs-secondary-color, #6c757d);
}

.q4uaddress-card--compact__contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Contact rows stack tight — the icon/link pairing already gives
   visual rhythm; extra vertical gap reads as disconnection. */
.q4uaddress-card--compact__contacts > li {
    display: flex;
    align-items: center;
}

.q4uaddress-card--compact__contacts .q4uaddress-contact-link {
    font-size: 0.875rem;
    padding: 0.0625rem 0;
    min-height: 1.5rem;
    word-break: break-word;
}

/* Visual break between "direct contact" (email/phone) and the
   postal address block — they're different intents, so they
   should read as different groups (Gestalt proximity). */
.q4uaddress-card--compact__postal {
    margin-top: 0.625rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.25rem 0;
}

.q4uaddress-card--compact__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bs-link-color, var(--bs-primary));
    text-decoration: none;
}

.q4uaddress-card--compact__cta:hover,
.q4uaddress-card--compact__cta:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.q4uaddress-card--compact__cta > span {
    transition: transform 0.2s ease;
}

.q4uaddress-card--compact__cta:hover > span,
.q4uaddress-card--compact__cta:focus-visible > span {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .q4uaddress-card--compact__cta > span {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Detail page (/ansprechpartner/<slug>)
   ═══════════════════════════════════════════════════════════════ */

.q4uaddress-detail {
    --q4uaddress-detail-radius: var(--bs-border-radius-lg, 0.5rem);
    --q4uaddress-detail-gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Kill every inherited ::before / ::after pseudo on `.no-icon` links
   inside the detail view. t3bootstrap's `_type.scss` and q4u_base's
   `_link.scss` both add an empty 1rem × 1rem `::before` spacer to
   `a[data-mailto-token]` (ignoring `.no-icon`!). That spacer shifts
   our inline SVG to the right on mail rows and can render as a pink
   notch corner on outline buttons. We ship our own inline SVGs, so
   suppress the spacer unconditionally. */
.q4uaddress-detail a.no-icon::before,
.q4uaddress-detail a.no-icon::after,
.q4uaddress-detail__sidebar a.no-icon::before,
.q4uaddress-detail__sidebar a.no-icon::after,
.q4uaddress-card--compact a.no-icon::before,
.q4uaddress-card--compact a.no-icon::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

.q4uaddress-detail__hero {
    background: var(--bs-tertiary-bg, #f8f9fa);
    padding: clamp(1.5rem, 4vw, 3rem) 0;
    margin-bottom: var(--q4uaddress-detail-gap);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.q4uaddress-detail__breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.q4uaddress-detail__breadcrumb a,
.q4uaddress-detail__back {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.q4uaddress-detail__breadcrumb a:hover,
.q4uaddress-detail__breadcrumb a:focus-visible,
.q4uaddress-detail__back:hover,
.q4uaddress-detail__back:focus-visible {
    color: var(--bs-body-color);
    text-decoration: underline;
}

.q4uaddress-detail__back::before {
    content: "\2190";
    display: inline-block;
    margin-right: 0.35em;
}

.q4uaddress-detail__photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--q4uaddress-detail-radius);
    background: var(--bs-secondary-bg, #e9ecef);
}

.q4uaddress-detail__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.q4uaddress-detail__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    margin: 0 0 0.5rem;
}

.q4uaddress-detail__name {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.q4uaddress-detail__position {
    font-size: 1.125rem;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 1rem;
}

.q4uaddress-detail__teaser {
    font-size: 1.0625rem;
    color: var(--bs-body-color);
    margin: 0;
}

.q4uaddress-detail__body {
    padding-bottom: var(--q4uaddress-detail-gap);
}

.q4uaddress-detail__section {
    margin-bottom: var(--q4uaddress-detail-gap);
}

.q4uaddress-detail__section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.q4uaddress-detail__contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.q4uaddress-detail__contact-list > li .q4uaddress-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-link-color);
    text-decoration: none;
}

.q4uaddress-detail__contact-list > li .q4uaddress-contact-link > span {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.q4uaddress-detail__contact-list > li .q4uaddress-contact-link:visited {
    color: inherit;
}

.q4uaddress-detail__address {
    font-style: normal;
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.q4uaddress-detail__map {
    margin-top: 1rem;
    height: clamp(18rem, 35vh, 25rem);
}

.q4uaddress-detail__body-text {
    line-height: 1.65;
    font-size: 1.0625rem;
}

.q4uaddress-detail__body-text > *:first-child { margin-top: 0; }
.q4uaddress-detail__body-text > *:last-child  { margin-bottom: 0; }

.q4uaddress-detail__sidebar {
    position: sticky;
    top: calc(var(--q4uaddress-detail-gap) / 2);
    padding: 1.25rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--q4uaddress-detail-radius);
}

.q4uaddress-detail__sidebar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Force the outlined Feather-style look on sidebar button icons.
   Inside `.btn`, q4u_base `_buttons.scss` globally sets
   `stroke: currentColor` on all inner shape elements — and some
   theme compilations additionally set `fill: currentColor`, turning
   our `fill="none"` outline icon into a solid white silhouette on a
   primary-coloured button. Lock fill to `none` explicitly so the
   detail-page icon renders identical to the card's vCard icon. */
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon,
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon path,
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon polyline,
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon line,
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon rect,
.q4uaddress-detail__sidebar .btn svg.q4uaddress-vcard-download__icon circle {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Dark-mode: tertiary hero bg + sidebar bg tweak */
[data-bs-theme="dark"] .q4uaddress-detail__hero {
    background: var(--bs-tertiary-bg, #2b3035);
}

[data-bs-theme="dark"] .q4uaddress-detail__sidebar {
    background: var(--bs-secondary-bg, #343a40);
}

/* Mobile: drop the sticky sidebar so it flows under content */
@media (max-width: 991.98px) {
    .q4uaddress-detail__sidebar {
        position: static;
        margin-top: var(--q4uaddress-detail-gap);
    }
}

/* ---------------------------------------------------------------------------
   Address list grid — container-based, not viewport-based
   ---------------------------------------------------------------------------
   The card grid must react to the width the list ACTUALLY has, not to the
   browser window. Bootstrap's row-cols-* are plain media queries, so inside a
   container column (q4u_row_2col etc.) row-cols-xl-3 still claimed 3 columns
   of a half-width column — ~205px per card on a 1140px content width.

   .q4uaddress-list is the query container; the thresholds below are chosen so
   a full-width list keeps its previous behaviour (3 up on desktop, 2 up on
   tablet, 1 up on phone) while a list in a narrower column steps down instead.
   The item selector is deliberately 3 classes deep to outrank Bootstrap's
   `.row > *  { width: 100% }` (2 classes) independently of stylesheet order. */
.q4uaddress-list {
    container-type: inline-size;
    container-name: q4uaddress-list;
}

.q4uaddress-list__grid.row > .q4uaddress-list__item {
    flex: 0 0 auto;
    width: 100%;
}

/* ~672px: room for 2 cards at the ~336px the design assumes */
@container q4uaddress-list (min-width: 42rem) {
    .q4uaddress-list__grid.row > .q4uaddress-list__item {
        width: 50%;
    }
}

/* ~1024px: room for 3 cards at ~341px — matches the old xl behaviour */
@container q4uaddress-list (min-width: 64rem) {
    .q4uaddress-list__grid.row > .q4uaddress-list__item {
        width: 33.33333333%;
    }
}