/* ============================================================
   fux_sitepackage_hsgm — Kontaktseite (Master-Layout relaunch_contact,
   Templates/Page/RelaunchContact.html, tt_address-Overrides unter
   Resources/Private/Extensions/TtAddress/; geladen per f:asset.css)

   Quelle: _prototypes/css/contact.css (contact-hero Z. 6-30, Tabs Z. 33-72,
   Hauptsitz-Karten Z. 75-215, Partner Z. 218-312). "Direkter Kontakt" =
   CE "Kacheln" (tiles.css).

   Abweichungen mit Begruendung:
   - Grau-Text #6e6e73 statt #86868b; Info-Label #6e6e73 statt
     --gray-tertiary #d2d2d7 (1,5:1, WCAG 1.4.3).
   - Tabs: aktiver Tab zusaetzlich fett (nicht nur Farbe/Linie, 1.4.1);
     Fokusrahmen sichtbar (2.4.7); ohne JS keine Tab-Leiste, beide Panels
     untereinander (contact-tabs.js).
   - Bewegung (Hebung, Bild-Zoom, Pfeil-Drehung) nur ohne Wunsch nach
     reduzierter Bewegung.
   - Raster: minmax(min(400px, 100%), 1fr) statt minmax(400px, 1fr) —
     kein Ueberlauf unter 432px (1.4.10 Reflow).
   - Regionstitel h3, Partnerland h4 (Gliederung, siehe Template).

   Kontraste (WCAG 2.x relative Luminanz):
   - Tab #6e6e73 auf #fff / aktiv #0066cc auf #fff . . . .  5,07 / 5,57:1
   - Info-Label #6e6e73 auf #fff  . . . . . . . . . . . . .  5,07:1
   - Info-Wert #1d1d1f, Links #0066cc auf #fff . . . . . .  16,83 / 5,57:1
   - Badge #fff auf #0066cc . . . . . . . . . . . . . . . .  5,57:1
   - Maps-Button #1d1d1f auf #f5f5f7 / Hover #fff auf #0066cc  15,46 / 5,57:1
   - Partner-Firma #0066cc, Details #6e6e73 auf #fff . . .  5,57 / 5,07:1
   - Lead #6e6e73 auf #f5f5f7..#fff . . . . . . . . . . . . >= 4,66:1
   - Suchfeld-Rand #86868b auf #fff (1.4.11) . . . . . . .  3,62:1
   - Platzhalter/Status #6e6e73 auf #fff . . . . . . . . .  5,07:1
   ============================================================ */

.contact-page {
    --contact-blue: var(--hsgm-blue, #0066cc);
    --contact-blue-dark: var(--hsgm-blue-dark, #0051a3);
    --contact-blue-light: var(--hsgm-blue-light, #3384d9);
    --contact-text: var(--gray-primary, #1d1d1f);
    --contact-muted: #6e6e73;
    --contact-line: #e8e8ed;
    --contact-surface: var(--gray-quaternary, #f5f5f7);
}

.contact-page .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Hero ---------- */
/* Abstand zum fixen Header wie .home-hero (kein Breadcrumb auf dieser
   Seite); ohne JS scrollt der Header bis 1199.98px mit -> kein Abstand. */
.contact-hero {
    margin-top: calc(var(--fux-navbar-inner-height, 40px) + 2rem + 1px);
    padding: var(--space-xxl, 8rem) 0 var(--space-xl, 5rem);
    background: linear-gradient(180deg, var(--contact-surface) 0%, #fff 100%);
    text-align: center;
}

.contact-hero .page-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-md, 2rem);
    color: var(--contact-text);
    hyphens: auto;
    overflow-wrap: break-word;
}

.contact-hero .page-subtitle {
    font-size: 1.375rem;
    line-height: 1.6;
    color: var(--contact-muted);
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 1199.98px) {
    html:not(.fux-nav-js) .contact-hero {
        margin-top: 0;
    }
}

/* ---------- Tabs ---------- */
.contact-tabs {
    padding: var(--space-xl, 5rem) 0;
    background: #fff;
}

.tab-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg, 3rem);
    margin-bottom: var(--space-xl, 5rem);
    border-bottom: 1px solid var(--contact-line);
}

.tab-navigation[hidden] {
    display: none;
}

.tab-btn {
    min-height: 44px;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    margin-bottom: -1px;
    font: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--contact-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}

.tab-btn:hover {
    color: var(--contact-text);
}

.tab-btn[aria-selected="true"] {
    color: var(--contact-blue);
    font-weight: 600;
    border-bottom-color: var(--contact-blue);
}

body.fux-relaunch .tab-btn:focus-visible {
    outline: 3px solid var(--contact-blue);
    outline-offset: 2px;
}

/* Ohne JS: beide Panels untereinander mit Abstand */
.tab-content + .tab-content {
    margin-top: var(--space-xl, 5rem);
}

.tab-content[hidden] {
    display: none;
}

/* Sprungziel (#land-xx): Abstand zum fixen Header kommt aus scroll-padding
   des Rahmens; das Ziel selbst ist ein leeres Inline-Element */
.contact-anchor {
    display: block;
    height: 0;
}

/* ---------- Hauptsitz-Karten ---------- */
.headquarters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: var(--space-xl, 3rem);
}

.hq-card {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}

.hq-card:hover {
    border-color: var(--contact-blue-light);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hq-card-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--contact-surface) 0%, var(--contact-line) 100%);
}

.hq-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hq-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--contact-blue);
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

.hq-card-content {
    padding: var(--space-xl, 3rem);
}

.hq-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-sm, 0.75rem);
    font-size: 1.75rem;
    color: var(--contact-text);
}

.hq-info {
    margin: var(--space-lg, 1.5rem) 0;
}

.hq-info-item {
    display: block;
    padding: var(--space-sm, 0.75rem) 0 var(--space-sm, 0.75rem) calc(24px + var(--space-md, 1rem));
    margin-bottom: var(--space-md, 1rem);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hq-info-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

/* Icon steht im dt (dl-Inhaltsmodell), optisch links neben Label und Wert;
   absolut statt display:contents (aendert in aelterem WebKit die Semantik) */
.hq-info-item {
    position: relative;
}

.hq-info-item .hq-info-icon {
    position: absolute;
    left: 0;
    top: calc(var(--space-sm, 0.75rem) + 2px);
    margin-top: 0;
}

.hq-info-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    color: var(--contact-blue);
}

.hq-info-content {
    flex: 1;
    min-width: 0;
}

.hq-info-label {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--contact-muted);
}

.hq-info-value {
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
    color: var(--contact-text);
    overflow-wrap: anywhere;
}

.hq-info-value a,
.partner-details a {
    color: var(--contact-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hq-info-value a:hover,
.partner-details a:hover {
    color: var(--contact-blue-dark);
    text-decoration-thickness: 2px;
}

.map-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.875rem 1.75rem;
    font-weight: 500;
    color: var(--contact-text);
    text-decoration: none;
    background: var(--contact-surface);
    border: 2px solid transparent;
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}

.map-btn:hover,
.map-btn:focus-visible {
    color: #fff;
    background: var(--contact-blue);
    border-color: var(--contact-blue);
}

.map-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* ---------- Partnersuche (Prototyp js/contact.js initPartnerSearch) ----------
   Rand #86868b statt #e8e8ed (1,2:1): Eingabefeld braucht 3,62:1 (1.4.11),
   gleicher Wert wie das Suchfeld im Such-Dialog des Rahmens. */
.partner-search {
    margin-bottom: var(--space-xl, 2rem);
}

.partner-search[hidden] {
    display: none;
}

.partner-search-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font: inherit;
    font-size: 1rem;
    color: var(--contact-text);
    background: #fff;
    border: 1px solid #86868b;
    border-radius: 30px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.partner-search-input::placeholder {
    color: var(--contact-muted);
    opacity: 1;
}

.partner-search-input:focus {
    border-color: var(--contact-blue);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

body.fux-relaunch .partner-search-input:focus-visible {
    outline: 3px solid var(--contact-blue);
    outline-offset: 2px;
}

.partner-search-status {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--contact-muted);
}

/* Leer NICHT per display:none ausblenden: die Live-Region muss vor der
   ersten Meldung im Accessibility-Tree stehen (A11y-Review M1, 4.1.3) */
.partner-search-status:empty {
    margin: 0;
}

.partner-card[hidden],
.region-section[hidden] {
    display: none;
}

/* ---------- Partner ---------- */
.region-section {
    margin-bottom: var(--space-xxl, 6rem);
}

.region-section:last-child {
    margin-bottom: 0;
}

.region-title {
    margin: 0 0 var(--space-lg, 1.5rem);
    padding-bottom: var(--space-md, 1rem);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--contact-text);
    border-bottom: 2px solid var(--contact-surface);
}

.region-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.region-symbol {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--contact-blue);
}

.region-symbol-svg {
    width: 100%;
    height: 100%;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.partner-card {
    position: relative;
    padding: var(--space-lg, 1.5rem);
    background: #fff;
    border: 1px solid var(--contact-line);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--contact-blue) 0%, var(--contact-blue-light) 100%);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.partner-card:hover,
.partner-card:focus-within {
    border-color: var(--contact-blue);
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
}

.partner-card:hover::before,
.partner-card:focus-within::before {
    transform: translateX(0);
}

.partner-country {
    margin: 0 0 var(--space-md, 1rem);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--contact-text);
    hyphens: auto;
    overflow-wrap: break-word;
}

.partner-flag {
    margin-right: 0.15em;
}

.partner-company {
    margin: 0 0 var(--space-sm, 0.5rem);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--contact-blue);
    overflow-wrap: break-word;
}

.partner-note {
    margin: 0 0 var(--space-sm, 0.5rem);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--contact-muted);
}

.partner-note p,
.hq-info-value--rte p {
    margin: 0;
}

.partner-details {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--contact-muted);
    overflow-wrap: anywhere;
}

/* ---------- Bewegung nur ohne Wunsch nach reduzierter Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hq-card:hover {
        transform: translateY(-5px);
    }

    .hq-card:hover .hq-card-image img {
        transform: scale(1.05);
    }

    .map-btn:hover {
        transform: translateX(5px);
    }

    .map-btn:hover svg {
        transform: rotate(15deg);
    }

    .partner-card:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hq-card,
    .hq-card-image img,
    .map-btn,
    .map-btn svg,
    .partner-card,
    .partner-card::before,
    .tab-btn {
        transition: none;
    }
}

@media (forced-colors: active) {
    .hq-card,
    .partner-card {
        border-color: CanvasText;
    }

    .tab-btn[aria-selected="true"] {
        border-bottom-color: Highlight;
        text-decoration: underline;
    }

    /* Transparente Linie der nicht gewaehlten Tabs wuerde sonst CanvasText
       (A11y-Review M2) */
    .tab-btn:not([aria-selected="true"]) {
        border-bottom-color: Canvas;
    }

    .hq-badge {
        border: 1px solid CanvasText;
    }
}

/* ---------- Responsive (Prototyp Z. 470-520) ---------- */
@media (max-width: 767px) {
    .contact-hero {
        padding: var(--space-xl, 5rem) 0 var(--space-lg, 3rem);
    }

    .contact-hero .page-subtitle {
        font-size: 1.125rem;
    }

    .tab-navigation {
        gap: 0;
    }

    .tab-btn {
        flex: 1 1 auto;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 1rem;
    }

    .hq-card-image {
        height: 200px;
    }

    .hq-card-content {
        padding: var(--space-lg, 1.5rem);
    }

    .hq-card-title {
        font-size: 1.5rem;
    }
}