/* ==========================================================================
   Contact page — split-card layout (green info panel + white form card).
   Scoped to .ccard-contact-wrapper so it's self-contained; loaded only on the
   contact page (a <link> at the top of includes/contact-form-<lang>.php).
   Layout target: the PMG contact mockup (shield + "Wir freuen uns auf Sie!",
   contact blocks left, form right, encryption note + SSL badge below the form).
   ========================================================================== */
/* Contact page uses the full content width with a centered card. Cancel the
   global .section-block right padding (reserved for the fixed CLA banner, which
   is suppressed on this page) and the narrow .section-wrap--wide cap, so the
   card centers with no empty gap on the right. (kontakt.css only loads here, so
   these global-class overrides don't affect other pages.) */
#content .section-block { padding-right: 15px; }
#content .section-block .section-wrap--wide { max-width: 1180px; margin: 0 auto; }

.ccard-contact-wrapper {
    --pc-green:       #2d7152;
    --pc-green-dark:  #1d5540;
    --pc-teal:        #a3c6c4;
    --pc-field:       #ececec;
    --pc-ink:         #3a4a44;

    position: relative;
    /* auto-fit collapses to 1 column when the card's OWN width can't fit two
       ~330px columns — so it adapts to the real space (which the left sidebar
       eats), not just the viewport. Prevents the cramped 2-col + hyphenation.
       min(330px, 100%) is load-bearing: with a plain 330px minimum the grid's
       intrinsic width never drops below 2 columns (744px), so around ~980px
       viewports it overflowed horizontally instead of collapsing. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    min-width: 0;
    gap: 44px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    /* Brand photo bg (green gradient + PMG pattern baked in, localized from
       live contact-section-bg.jpg); the gradient underneath shows while the
       image loads and if it ever 404s. */
    background: url(/media/uploads/backgrounds/contact-section-bg.webp) center / cover no-repeat,
                linear-gradient(157deg, var(--pc-green) 0%, var(--pc-green-dark) 100%);
    box-shadow: 0 30px 70px -34px rgba(0, 40, 24, .55);
    overflow: hidden;
    /* the site's content CSS sets hyphens:auto, which broke words like
       "Vorna-me" in narrow columns — turn it off, wrap only long tokens. */
    hyphens: manual;
    overflow-wrap: break-word;
    word-break: normal;
}
.ccard-contact-wrapper * { hyphens: manual; }
/* (the old ::before patern.png wash is gone — the bg photo has the pattern) */

/* ── Left: info panel ─────────────────────────────────────────────────── */
/* GAP on the parent, not per-child margins (CV spacing model). */
.ccard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* padding-top: 4px; */
}
.ccard-shield {
    color: rgba(255, 255, 255, .5);
    font-size: 22px;
}
.ccard-sidebar-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.ccard-sidebar-block { margin-bottom: 0; }
.ccard-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.ccard-icon-row i { color: var(--pc-teal); font-size: 19px; width: 20px; text-align: center; }
.ccard-block-title { font-size: 16px; font-weight: 700; color: #fff; }
.ccard-block-content { padding-left: 32px; }
/* plain links/paragraphs = white; the pill button (.ccard-btn-outline) is excluded
   so its dark-green label + auto width survive (this generic rule is otherwise
   more specific than .ccard-btn-outline and would render the label white-on-white). */
.ccard-block-content a:not(.ccard-btn-outline),
.ccard-block-content p {
    display: block;
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .92);
    font-size: 15px;
    line-height: 1.55;
    text-decoration: none;
}
.ccard-block-content a:not(.ccard-btn-outline):hover { color: #fff; }
.ccard-block-content .flag-icon { margin: 0 1px; }

/* white pill buttons (Termin / Live Chat) */
.ccard-btn-outline {
    display: inline-block;
    margin-top: 2px;
    padding: 11px 26px;
    background: #fff;
    color: var(--pc-green-dark);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ccard-btn-outline:hover {
    color: var(--pc-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4);
}

/* WhatsApp QR */
.ccard-qr-block {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-left: 32px;
}
.ccard-qr-block a {
    position: relative;   /* anchor for the centered WhatsApp logo overlay */
    display: inline-block;
    line-height: 0;
}
.ccard-qr-block img,
.ccard-qr-block svg {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    display: block;
    background: #fff;   /* quiet zone around the generated QR on the green panel */
}
/* WhatsApp logo over the QR center — the code is generated with error
   correction H, which tolerates the covered modules. */
.ccard-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.ccard-qr-logo i {
    font-size: 32px;
    line-height: 1;
    color: #25d366;   /* WhatsApp brand green */
}
.ccard-qr-block span {
    max-width: 180px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

/* ── Right: form card + note + SSL ────────────────────────────────────── */
.ccard-form-panel { display: flex; flex-direction: column; }
.ccard-form-panel form {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 20px 44px -30px rgba(0, 40, 24, .5);
}
.ccard-form-panel label {
    display: block;
    margin-bottom: 9px;
    font-size: 15px;
    font-weight: 400;
    color: var(--pc-ink);
}
.ccard-form-panel input,
.ccard-form-panel select,
.ccard-form-panel textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--pc-field);
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: #23302a;
    transition: border-color .15s ease, background .15s ease;
}
.ccard-form-panel input:focus,
.ccard-form-panel select:focus,
.ccard-form-panel textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--pc-green);
}
.ccard-form-panel textarea { min-height: 168px; resize: vertical; }

/* flex-wrap + a flex-basis so the two fields sit side by side when there's room
   and stack when the column is narrow — again available-width based, not viewport. */
.ccard-form-row { display: flex; flex-wrap: wrap; gap: 18px; }
.ccard-form-row .ccard-field { flex: 1 1 190px; }
.ccard-form-group { margin-top: 20px; }

/* Phone field: intl-tel-input wrapper (separateDialCode mode — the lib puts
   the flag + dial-code button inside the input's left edge). The wrapper
   inherits the panel's white text, so pin a dark colour for the dial code
   and the dropdown list. */
.ccard-form-panel .iti { width: 100%; color: #2b2b2b; }

/* consent + submit */
.ccard-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
}
.ccard-checkbox-group input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--pc-green); }
.ccard-checkbox-group label {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5c6862;
}
.ccard-checkbox-group a { color: var(--pc-green); font-weight: 600; text-decoration: underline; }

.ccard-btn-submit {
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #2e8158 0%, #1f6247 100%);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}
.ccard-btn-submit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ccard-btn-submit:disabled { opacity: .6; cursor: default; }

.ccard-success-msg { display: none; }

/* encryption note + SSL badge — below the white card, on the green */
.ccard-encryption-note {
    margin: 26px auto 0;
    max-width: 480px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}
.ccard-ssl-badge {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.ccard-ssl-badge svg {
    padding: 6px 20px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Belt-and-braces: no field can overflow its column. */
.ccard-form-panel input,
.ccard-form-panel select,
.ccard-form-panel textarea { box-sizing: border-box; max-width: 100%; }

/* ── Tablet / stacked (≤900px): single column ─────────────────────────── */
@media (max-width: 900px) {
    .ccard-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 20px;
        border-radius: 10px;
    }
    .ccard-sidebar-title { font-size: 24px; }
    /* the info panel indent isn't needed once it's full-width */
    .ccard-block-content,
    .ccard-qr-block { padding-left: 32px; }
}

/* ── Phones (≤600px) ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ccard-contact-wrapper { padding: 16px; gap: 26px; }
    .ccard-sidebar { gap: 20px; }
    .ccard-sidebar-title { font-size: 22px; }

    /* form card */
    .ccard-form-panel form { padding: 16px; }
    .ccard-form-row { flex-direction: column; gap: 18px; }   /* Vorname / Name stack */
    /* CRITICAL: once the row is a COLUMN, flex-basis:190px is measured on the
       vertical (main) axis → it becomes each field's HEIGHT, padding every field
       out to 190px and opening big gaps. Reset to content height. */
    .ccard-form-row .ccard-field { flex: 0 0 auto; }
    /* 16px inputs stop iOS from zooming the page on focus */
    .ccard-form-panel input,
    .ccard-form-panel select,
    .ccard-form-panel textarea { font-size: 16px; }
    .ccard-form-panel textarea { min-height: 140px; }

    /* WhatsApp QR: stack image over caption */
    .ccard-qr-block { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ccard-qr-block img,
    .ccard-qr-block svg { width: 140px; height: 140px; }
    .ccard-qr-block span { max-width: none; }

    /* pill buttons go full-width so they're easy to tap */
    .ccard-btn-outline { display: block; text-align: center; }

    .ccard-encryption-note { font-size: 12.5px; }
}

/* ── Small phones (≤380px): trim the outer padding a touch more ───────── */
@media (max-width: 380px) {
    .ccard-contact-wrapper { padding: 12px; }
    .ccard-block-content,
    .ccard-qr-block { padding-left: 30px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Service-center office cards — the .darker band under the form.
   Two white cards (Middle-East / European Service Center): photo + flag +
   title header, address details, disclaimer, Google-Maps iframe.
   Markup: .contact-offices in pages/<lang>/kontakt|contact.html.
   ══════════════════════════════════════════════════════════════════════════ */
.contact-offices {
    display: grid;
    /* auto-fit → 2 columns when the content column is wide enough, 1 below.
       min(330px, 100%) keeps the grid's intrinsic width shrinkable so it
       collapses instead of overflowing on narrow viewports. */
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    min-width: 0;
    gap: 30px;
    align-items: stretch;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}
.contact-office {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap, 20px);
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px -18px rgba(0, 40, 24, .35);
}
.office-header {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2.5vw, 30px);
}
/* flex-shrink 0: otherwise the photo column gets squeezed by the title and
   the img's max-width cap breaks the 1:1 ratio. */
.office-header .office-photo { flex: 0 0 auto; }
/* .contact-office prefix on the img rules: they must out-rank the global
   `.section-block img { width:100% }` from content/elements.css. */
.contact-office .office-photo img {
    width: clamp(110px, 12vw, 150px);
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.office-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 2px;
    min-width: 0;
}
.contact-office .office-flag {
    width: 46px;
    height: auto;
    border-radius: 4px;
    display: block;
}
.office-title-wrap span {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 300;
    line-height: 1.2;
    color: #394b4e;
}
/* Details keep the card's rhythm but tighter (wrapper pattern). The long
   e-mail address must never hyphenate — wrap whole tokens only. */
.office-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.office-details p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    hyphens: manual;
    overflow-wrap: break-word;
}
.office-company { color: #6b6b6b; }
.office-company sup { font-size: 60%; letter-spacing: .04em; }
.office-details .office-subtitle { color: #6b6b6b; font-size: 11px; line-height: 1.4; margin-top: -6px; }
.office-details .office-city { color: #2e2e2e; font-weight: 700; font-size: 13px; letter-spacing: .02em; margin-top: 14px; margin-bottom: -4px; }
.office-details a { color: var(--brand-green); text-decoration: none; }
.office-details a:hover { text-decoration: underline; }
/* phone links: one shared layout for both cards (flag icons inline, same
   weight as the rest of the details) — no per-card inline styles. */
.office-details a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
/* margin-top:auto bottom-aligns the disclaimer+map pair, so both cards'
   maps line up regardless of how tall the address text runs. */
.office-disclaimer {
    margin: 0;
    margin-top: auto;
    font-size: 12px;
    color: #6b6b6b;
    text-align: right;
}
.contact-office iframe {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 8px;
    /* Bottom-align the map so both cards' maps line up regardless of how much
       address text each card holds. Works even on the card WITHOUT a disclaimer
       (the EU card) — the disclaimer's own margin-top:auto only helps the UAE card. */
    margin-top: auto;
}
/* When a disclaimer precedes the map it already carries the margin-top:auto push,
   so the map keeps the normal flex gap instead of a second auto (which would split
   the free space and leave a gap between the disclaimer and the map). */
.contact-office .office-disclaimer + iframe { margin-top: 0; }

@media (max-width: 500px) {
    .office-header { flex-direction: column; align-items: center; text-align: center; }
    .office-title-wrap { align-items: center; }
    .office-disclaimer { text-align: center; }
}

/* Anti-bot honeypot — off-screen so humans never see/fill it; bots that fill
   the "website" field are rejected server-side (forms/contact-handler.php). */
.ccard-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}