/**
 * @file        section/hero/hero.css
 * @location    /section/hero/hero.css
 * @description Hero-Sektion. Prefix: hro1__
 *
 *              FARBEN — nur COLOR-GUIDE.md Tokens:
 *                --color-navy   C1 #07003D  BG
 *                --color-white  C2 #ffffff  H1, CTA-Text, strong
 *                --color-ice    C10 #ddeaf5 H1-accent, Badge-Text
 *                --color-on-dark  #c0d8ec   Beschreibungstext
 *
 *              KONTRASTE (alle ≥ 7:1):
 *                C2/C1   12.61  H1 Amtsblatt, strong, CTA
 *                C10/C1  10.31  H1 Hessen, Badge
 *                on-dark/C1  8.57  Beschreibung
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-18  Neu. Basiert auf hero1.php v2.0.0.
 *                      Alle Farben auf COLOR-GUIDE Tokens umgestellt.
 */

/* ── Shell ───────────────────────────────────────────────────────── */
.hro1__section {
    background: var(--color-navy);  /* C1 #07003D */
    min-height: 420px;
    max-height: 800px;
    height:     calc(100vh - var(--nav-height));
    display:    flex;
    align-items: center;
    overflow:   hidden;
    border-top: 2px solid var(--color-white);
}

/* ── Inner Grid ──────────────────────────────────────────────────── */
.hro1__inner {
    padding:   var(--space-10) 0;
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--space-16);
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════════
   LINKE SPALTE
   ════════════════════════════════════════════════════════════════════ */

/* ── Badge ───────────────────────────────────────────────────────── */
/* C10 #ddeaf5 / C1-Overlay ≥10.31:1 ✓ */
.hro1__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    background:     rgba(0, 0, 0, .22);  /* dekoratives Overlay auf C1 */
    border:         1px solid rgba(221, 234, 245, .2);
    border-radius:  var(--radius-sm);
    padding:        .3rem .85rem;
    font-size:      var(--text-sm);
    font-weight:    var(--weight-bold);
    color:          var(--color-ice);    /* C10 #ddeaf5 / C1 10.31:1 ✓ */
    letter-spacing: var(--tracking-wide);
    margin-bottom:  var(--space-5);
}

/* ── H1 ──────────────────────────────────────────────────────────── */
.hro1__h1 {
    margin:         0 0 var(--space-5);
    line-height:    var(--leading-tight);
    display:        flex;
    flex-direction: column;
    letter-spacing: var(--tracking-tight);
}

/* Amtsblatt: C2 #ffffff / C1 = 12.61:1 ✓ */
.hro1__h1-main {
    font-size:   clamp(3rem, 5.5vw, 4.5rem);
    font-weight: var(--weight-black);
    color:       var(--color-white);
}

/* Hessen: C10 #ddeaf5 / C1 = 10.31:1 ✓ */
.hro1__h1-accent {
    font-size:   clamp(3rem, 5.5vw, 4.5rem);
    font-weight: var(--weight-black);
    color:       var(--color-ice);
}

/* ── Beschreibung ────────────────────────────────────────────────── */
/* #c0d8ec / C1 = 8.57:1 ✓ */
.hro1__desc {
    font-size:   clamp(.9rem, 1.4vw, 1rem);
    color:       var(--color-on-dark);
    line-height: var(--leading-relaxed);
    margin:      0 0 var(--space-8);
    max-width:   520px;
    font-weight: var(--weight-light);
}

/* strong: C2 #ffffff / C1 = 12.61:1 ✓ */
.hro1__desc strong {
    color:       var(--color-white);
    font-weight: var(--weight-bold);
}

/* ── CTA-Button ──────────────────────────────────────────────────── */
/* C2/C1 = 12.61:1 ✓  (Weiß-Button auf Navy laut COLOR-GUIDE) */
.hro1__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    background:      var(--color-white);   /* C2 */
    color:           var(--color-navy);    /* C1 */
    text-decoration: none;
    font-family:     var(--font-base);
    font-size:       var(--text-base);
    font-weight:     var(--weight-black);
    padding:         var(--pad-btn);
    border-radius:   var(--radius-md);
    letter-spacing:  .01em;
    box-shadow:      var(--shadow-lg);
    transition:      filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hro1__cta:hover {
    filter:     brightness(.95);
    transform:  translateY(-2px);
    box-shadow: var(--shadow-xl);
    color:      var(--color-navy);  /* bleibt C1 beim hover ✓ */
}
.hro1__cta:active  { transform: translateY(0); }
.hro1__cta:focus-visible {
    outline:        3px solid var(--color-white);   /* C2 — sichtbar auf C1 */
    outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   RECHTE SPALTE — Wappen-Karte
   aria-hidden=true — nur dekorativ
   ════════════════════════════════════════════════════════════════════ */
.hro1__right {
    display:         flex;
    justify-content: center;
    align-items:     center;
}

/* C2-Hintergrund — Logo trägt keinen Text, nur dekoratives Bild */
.hro1__card {
    /* background:    var(--color-white); */
    border-radius: var(--radius-xl);
    padding:       var(--space-8);
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         360px;
    height:        360px;
}

.hro1__wappen {
    width:       300px;
    height:      auto;
    display:     block;
    object-fit:  contain;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hro1__inner {
        grid-template-columns: 1fr;
        gap:        var(--space-10);
        padding:    var(--space-8) 0;
        text-align: center;
    }
    .hro1__badge { margin: 0 auto var(--space-5); }
    .hro1__desc  { margin-left: auto; margin-right: auto; }
    .hro1__cta   { margin: 0 auto; }
    .hro1__right { order: -1; }
    .hro1__card  { width: 200px; height: 220px; padding: var(--space-6); }
    .hro1__wappen { width: 160px; }
}

@media (max-width: 480px) {
    .hro1__inner {
        padding: var(--space-10) var(--page-padding-x-sm);
    }
    .hro1__h1-main,
    .hro1__h1-accent { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hro1__cta { transition: none; }
}