/* File: /assets/css/impressum.css
   Module: /impressum/ (page-impressum.php, CH_Impressum_Page)

   Layered on the .ch-legal document card in style.css section 13, which
   Privacy and Terms use, so the three legal documents read as one set. This
   file adds only what the Impressum has and they do not: the identity card
   (service address + company facts), the contact tiles, the German statute
   label under each heading and the related documents row.

   Light mode has no dark panels (Adrian, 2026-10-04): the identity card and
   the tiles are the Slate 50 well with a hairline and an emerald accent. In
   dark mode the same wells sink to Slate 900 inside the Slate 800 card.
   Emerald ink is Emerald 700 #047857 on light (5.5:1 on white) and Emerald
   400 #34D399 on dark. The only interactive elements are links, which keep
   the .ch-legal-body link colors and their hover states in both themes.

   Contents: 1 tokens, 2 lead + statute labels, 3 identity card, 4 contact
   tiles, 5 responsible person + related row, 6 responsive, 7 dark */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.ch-imp {
    --imp-well:      var(--ch-bg-main);
    --imp-line:      var(--ch-border);
    --imp-accent:    #10B981;
    --imp-ink:       #047857;
    --imp-wash:      rgba(16, 185, 129, 0.12);
    --imp-warn:      #B45309;
    --imp-lead:      #334155;
    --imp-mono:      'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
}

.ch-imp [id] {
    scroll-margin-top: 96px;
}

.ch-imp .ch-legal-kicker svg,
.ch-imp-label svg {
    flex-shrink: 0;
}

.ch-imp-mono {
    font-family: var(--imp-mono);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   2. LEAD + STATUTE LABELS
   ========================================================================== */

.ch-legal-body .ch-imp-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--imp-lead);
    margin-bottom: 0.5rem;
}

/* The German statute each section answers, under its English heading */
.ch-imp-law {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--imp-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-imp-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-family: var(--imp-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-imp-label svg {
    color: var(--imp-ink);
}

/* ==========================================================================
   3. IDENTITY CARD (service address + company facts)
   ========================================================================== */

.ch-imp-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem 2.25rem;
    margin: 0 0 1.25rem;
    padding: 1.6rem 1.75rem;
    background-color: var(--imp-well);
    border: 1px solid var(--imp-line);
    border-radius: 12px;
}

.ch-imp-card-addr {
    padding-left: 1.1rem;
    border-left: 3px solid var(--imp-accent);
}

.ch-imp-address {
    margin: 0.6rem 0 0.9rem;
    font-style: normal;
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--ch-text-main);
}

.ch-imp-address strong {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.ch-legal-body .ch-imp-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-imp-note svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--imp-warn);
}

.ch-imp-facts {
    margin: 0;
}

.ch-imp-fact {
    padding: 0.7rem 0;
    border-top: 1px dashed var(--imp-line);
}

.ch-imp-fact:first-child {
    padding-top: 0;
    border-top: none;
}

.ch-imp-fact:last-child {
    padding-bottom: 0;
}

.ch-imp-fact dt {
    margin: 0 0 0.2rem;
    font-family: var(--imp-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-imp-fact dd {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ch-text-main);
}

/* ==========================================================================
   4. CONTACT TILES
   ========================================================================== */

.ch-imp-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.25rem;
}

.ch-imp-channel {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    background-color: var(--imp-well);
    border: 1px solid var(--imp-line);
    border-radius: 10px;
}

.ch-imp-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--imp-wash);
    color: var(--imp-ink);
}

.ch-imp-channel-body {
    min-width: 0;
}

.ch-legal-body .ch-imp-channel-body h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
}

.ch-legal-body .ch-imp-channel-body p {
    margin: 0.25rem 0 0.45rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-imp-channel-body .ch-email,
.ch-imp-channel-body .ch-imp-mono {
    font-family: var(--imp-mono);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.ch-imp-channel-body .ch-imp-mono {
    font-weight: 700;
    color: var(--ch-text-main);
}

/* ==========================================================================
   5. RESPONSIBLE PERSON + RELATED ROW
   ========================================================================== */

.ch-imp-person {
    margin: 0 0 1rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid var(--imp-accent);
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
}

.ch-imp-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--imp-line);
}

.ch-imp-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

@media (max-width: 760px) {
    .ch-imp-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .ch-imp-channels {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .ch-imp-card {
        padding: 1.2rem 1.1rem;
    }

    .ch-legal-body .ch-imp-lead {
        font-size: 1.02rem;
    }
}

/* ==========================================================================
   7. DARK
   ========================================================================== */

html[data-theme="dark"] .ch-imp {
    --imp-ink:  #34D399;
    --imp-wash: rgba(16, 185, 129, 0.16);
    --imp-warn: #FBBF24;
    --imp-lead: #CBD5E1;
}