/* ============================================================
   page.css | CMS-Seiten (page.php) und Aussteller-Landingpages (exhibitor.php).
   Enthaelt zusaetzlich das seiten-eingebettete Kontaktformular
   (Partial templates/_contact-form.php, eingebunden von templates/page.php)
   sowie die Team-Kacheln (.team-grid) fuer die Kontaktseite. Deren Markup
   steht als WYSIWYG-HTML in pages.content und NICHT in einem Template -
   siehe styleguide.html Abschnitt 21.
   ============================================================ */

.page-content {
    padding: 1.75rem 0.75rem;
}

.page-content-body { max-width: 1020px; margin: 0 auto; }

/* ── Kontaktformular (an Seiten angehaengt) ─────────────────────────── */
.contact-sep {
    border: 0;
    height: 3px;
    width: 55%;
    margin: 4rem auto;
    background: var(--c-mid);
}

.contact-section { padding: 0 0 1rem; }
.contact-section .container { max-width: 720px; }

.contact-h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-mid);
    margin: 0 0 1.5rem;
    text-align: center;
}

.contact-form { display: flex; flex-direction: column; gap: 1rem; }

.contact-row { display: grid; gap: 1rem; }
.contact-row--2 { grid-template-columns: 1fr 1fr; }
.contact-row--3 { grid-template-columns: 0.8fr 1fr 1fr; }

.contact-field { display: flex; flex-direction: column; gap: .35rem; }
.contact-field label { font-size: .82rem; font-weight: 600; color: var(--c-mid); }
.contact-field .req { color: var(--c-accent); }

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius, 4px);
    font-size: .9rem;
    font-family: inherit;
    color: var(--c-mid);
    background: var(--c-white);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(214, 7, 92, .12);
}

.contact-form textarea { resize: vertical; }

.contact-consent { font-size: .78rem; color: var(--c-muted); line-height: 1.5; margin: 0; }
.contact-consent a { color: var(--c-accent-dark); text-decoration: underline; }

.contact-captcha { margin: .2rem 0; }

.contact-submit { align-self: flex-start; }

.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
    .contact-row--2,
    .contact-row--3 { grid-template-columns: 1fr; }
}

/* ── Listen-Reset fuer die Kacheln der Kontaktseite ──────────────────
   main.css setzt ueber #main-content ul > li::before vor JEDES Listen-
   element einen Akzent-Strich und 1,6rem Einzug. Fuer die Kachel-Listen
   ist das falsch. Die Gegenregeln brauchen ebenfalls #main-content,
   sonst gewinnt die ID-Spezifitaet aus main.css.
   Die Linie unter den h2 (#main-content h2::after) bleibt bewusst.      */
#main-content .team-grid > li::before,
#main-content .contact-facts > li::before { content: none; }

#main-content .team-grid > li { padding: 0; }
#main-content .contact-facts > li { padding: 1.4rem 1.2rem; }

/* ── Team-Kacheln der Kontaktseite ───────────────────────────────────
   Markup liegt in pages.content (Seiten-Editor), nicht in einem Template.
   Hover: dunkles Overlay blendet ein, der Inhalt faehrt von unten nach.
   Auf Touch-Geraeten (kein Hover) ist das Overlay dauerhaft sichtbar,
   sonst waeren Telefon und Mail dort nicht erreichbar.                */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1020px;
    margin: 2rem auto 0;
    padding: 0;
    list-style: none;
}

.team-member {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-smoke);
}

.team-member img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.team-member-info {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: opacity .25s ease, background .25s ease;
}

.team-member:hover .team-member-info,
.team-member:focus-within .team-member-info {
    background: rgba(0, 0, 0, .55);
    opacity: 1;
    transition: opacity .4s ease, background .4s ease;
}

.team-member-content {
    margin-top: -50px;
    transition: margin-top .5s ease;
}

.team-member:hover .team-member-content,
.team-member:focus-within .team-member-content {
    margin-top: 0;
    transition: margin-top .4s ease;
}

.team-member-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--c-white);
    margin: 0 0 .15rem;
}

.team-member-role {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
    margin-bottom: .7rem;
}

.team-member-links {
    display: flex;
    justify-content: center;
    gap: .9rem;
}

.team-member-links a {
    color: var(--c-white);
    font-size: 1.15rem;
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition);
}

.team-member-links a:hover,
.team-member-links a:focus-visible { color: var(--c-accent); }

@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; } }

@media (hover: none) {
    .team-member-info { opacity: 1; background: rgba(0, 0, 0, .5); align-items: flex-end; }
    .team-member-content { margin-top: 0; }
}

/* ── Kontaktdaten-Block (Adresse / Telefon / Mail) ───────────────────
   Ebenfalls Markup aus pages.content.                                 */
.contact-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1020px;
    margin: 2rem auto 0;
    padding: 0;
    list-style: none;
}

.contact-facts li {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.contact-facts i { font-size: 1.5rem; color: var(--c-accent); }

.contact-facts .contact-facts-label {
    display: block;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin: .6rem 0 .3rem;
}

.contact-facts a { color: var(--c-darker); text-decoration: none; }
.contact-facts a:hover { color: var(--c-accent); }

@media (max-width: 700px) { .contact-facts { grid-template-columns: 1fr; } }