/**
 * @file        section/notice/notice.css
 * @location    /section/notice/notice.css
 * @description Hinweis-Card. Prefix: ntc__
 *
 *              FARBEN (COLOR-GUIDE.md — alle ≥ 7:1):
 *                Section BG:   surf #eef2f7
 *                Card BG:      C2 #ffffff   border-left: C3 (dekorativ)
 *                Head title:   C1/C2 12.61:1 ✓
 *                Head badge:   C2/C3  8.49:1 ✓
 *                Text:         C5/C2 14.02:1 ✓
 *                Strong:       C1/C2 12.61:1 ✓
 *                Box tech BG:  C10 #ddeaf5
 *                  label:      C6/C10  7.3:1 ✓
 *                  action:     C1/C10 10.31:1 ✓
 *                  action hover: C3/C10  7.7:1 ✓
 *                Box other BG: surf #eef2f7
 *                  label:      C6/surf  7.9:1 ✓
 *                  action:     C1/surf 11.2:1 ✓
 *                  action hover: C3/surf  7.6:1 ✓
 *
 * @version     6.0.0
 * @changelog
 *   1.0.0  2026-03-18  Erstversion.
 *   4.0.0  2026-03-18  Card, immer sichtbar, 2-Spalten-Body.
 *   5.0.0  2026-03-19  Klarere Kontakttrennung.
 *   6.0.0  2026-03-19  Two equal boxes. Uniform visual weight.
 */

/* ── Section ──────────────────────────────────────────────────────── */
.ntc__section {
    background: var(--color-surface);
    padding:    var(--space-5) 0;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.ntc__card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-left:   4px solid var(--color-blue);   /* C3 — decorative accent */
    border-radius: var(--radius-sm);
    padding:       var(--space-5) var(--space-6);
    box-shadow:    var(--shadow-xs);
}

/* ── Header row ───────────────────────────────────────────────────── */
.ntc__head {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    margin-bottom: var(--space-4);
}

/* C2/C3 8.49:1 ✓ */
.ntc__badge {
    width:           28px;
    height:          28px;
    background:      var(--color-blue);
    color:           var(--color-white);
    border-radius:   var(--radius-xs);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .9rem;
    flex-shrink:     0;
}

/* C1/C2 12.61:1 ✓ */
.ntc__title {
    font-size:      var(--text-base);
    font-weight:    var(--weight-black);
    color:          var(--color-navy);
    margin:         0;
    letter-spacing: var(--tracking-tight);
}

/* ── Body ─────────────────────────────────────────────────────────── */
.ntc__body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-6);
    align-items:           center;
}

/* C5/C2 14.02:1 ✓ */
.ntc__text {
    font-size:   var(--text-sm);
    color:       var(--color-ink);
    line-height: var(--leading-relaxed);
    margin:      0;
}
/* C1/C2 12.61:1 ✓ */
.ntc__text strong {
    color:       var(--color-navy);
    font-weight: var(--weight-bold);
}

/* ── Contact boxes ────────────────────────────────────────────────── */
.ntc__contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-3);
}

/* Shared box style */
.ntc__box {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding:       var(--space-4);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-3);
}

/* Box 1: tech — C10 background */
.ntc__box--tech  { background: var(--color-ice); }

/* Box 2: other — surf background */
.ntc__box--other { background: var(--color-surface); }

/* Label — eyebrow style */
/* tech:  C6/C10 7.3:1 ✓  |  other: C6/surf 7.9:1 ✓ */
.ntc__box-label {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color:          var(--color-ink-soft);
    margin:         0;
    line-height:    var(--leading-snug);
}
.ntc__box-label .bi { flex-shrink: 0; font-size: .85rem; }

/* Action link */
/* tech:  C1/C10 10.31:1 ✓  |  other: C1/surf 11.2:1 ✓ */
.ntc__box-action {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    color:           var(--color-navy);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-bold);
    text-decoration: none;
    word-break:      break-all;
    transition:      color var(--transition-fast);
}
/* tech hover: C1/C10 10.31:1 ✓  |  other hover: C1/surf 11.2:1 ✓ */
.ntc__box-action:hover         { color: var(--color-navy); }
.ntc__box-action:focus-visible {
    outline:        2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .ntc__body     { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 560px) {
    .ntc__contacts { grid-template-columns: 1fr; }
    .ntc__card     { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .ntc__box-action { transition: none; }
}