/*
 * Feuerwehr Herrschaft – Inhaltsbereiche 0.4.0
 * Ausrüstung, Mitmachen und Prävention.
 */

/* Shared --------------------------------------------------------------- */
.fw-v040-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.fw-v040-card {
    height: 100%;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--fw-radius-md);
    background: var(--wp--preset--color--surface);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.fw-v040-card > :first-child { margin-top: 0; }
.fw-v040-card > :last-child { margin-bottom: 0; }

.fw-v040-index {
    margin: 0 0 2rem;
    color: var(--wp--preset--color--crimson-dark);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Ausrüstung ----------------------------------------------------------- */
.fw-equipment-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--fw-radius-lg);
    background: var(--wp--preset--color--navy-deep);
    color: #dce5eb;
    box-shadow: var(--fw-shadow-card);
}

.fw-equipment-visual {
    position: relative;
    min-height: 24rem;
    overflow: hidden;
    background: radial-gradient(circle at 70% 28%, rgb(215 25 32 / 32%), transparent 24%), linear-gradient(145deg, #173b58, var(--wp--preset--color--navy-deep));
}

.fw-equipment-visual::before {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 10rem;
    height: 8.5rem;
    border: 0.18rem solid rgb(255 255 255 / 38%);
    border-radius: 52% 52% 42% 42%;
    background: rgb(255 255 255 / 4%);
    box-shadow: 0 7.5rem 0 2.2rem rgb(255 255 255 / 7%);
    content: "";
    transform: translateX(-50%);
}

.fw-equipment-visual::after {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 24%);
    content: "";
    transform: translateX(-50%) rotate(-3deg);
}

.fw-equipment-code {
    position: absolute;
    right: 1rem;
    bottom: 0.25rem;
    margin: 0;
    color: rgb(255 255 255 / 7%);
    font-size: clamp(5rem, 18vw, 11rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.07em;
}

.fw-equipment-showcase__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
}

.fw-equipment-showcase__copy h2 { color: var(--wp--preset--color--surface); }
.fw-equipment-showcase__copy p { color: #cbd6de; }

.fw-equipment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.fw-equipment-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--fw-radius-md);
    background: var(--wp--preset--color--surface);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.fw-equipment-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--wp--preset--color--crimson);
    content: "";
}

.fw-equipment-card h3 { margin-top: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.fw-equipment-card p:last-child { margin-bottom: 0; color: var(--wp--preset--color--muted); }

.fw-readiness-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin-top: 2rem;
}

.fw-readiness-item {
    border-top: 1px solid rgb(255 255 255 / 18%);
    padding-top: 1rem;
}
.fw-readiness-item strong { display: block; color: var(--wp--preset--color--surface); font-size: 1.15rem; }
.fw-readiness-item span { display: block; margin-top: 0.35rem; color: #cbd6de; }

/* Mitmachen ------------------------------------------------------------ */
.fw-recruit-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--fw-radius-lg);
    background: radial-gradient(circle at 84% 18%, rgb(215 25 32 / 36%), transparent 30%), linear-gradient(135deg, var(--wp--preset--color--navy-deep), #123652);
    color: var(--wp--preset--color--surface);
    box-shadow: var(--fw-shadow-card);
}

.fw-recruit-stage__copy { padding: clamp(2rem, 6vw, 5rem); }
.fw-recruit-stage__copy .fw-kicker { color: #ff8b8f; }
.fw-recruit-stage__copy h2 {
    max-width: 9ch;
    margin: 0 0 1.25rem;
    color: var(--wp--preset--color--surface);
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.92;
    letter-spacing: -0.055em;
}
.fw-recruit-stage__copy > p:not(.fw-kicker) { max-width: 42rem; color: #dce5eb; font-size: clamp(1.08rem, 2vw, 1.35rem); line-height: 1.6; }

.fw-recruit-stage__mark { position: relative; min-height: 18rem; overflow: hidden; background: rgb(255 255 255 / 3%); }
.fw-recruit-stage__mark::before {
    position: absolute;
    right: -0.08em;
    bottom: -0.16em;
    color: rgb(255 255 255 / 7%);
    content: "DU";
    font-size: clamp(10rem, 35vw, 25rem);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: -0.11em;
}

.fw-recruit-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fw-recruit-value { border-top: 3px solid var(--wp--preset--color--crimson); background: var(--wp--preset--color--surface); padding: 1.5rem 0 0; }
.fw-recruit-value h3 { margin: 0 0 0.6rem; }
.fw-recruit-value p { margin-bottom: 0; color: var(--wp--preset--color--muted); }

.fw-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fw-step { min-height: 15rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--fw-radius-md); background: var(--wp--preset--color--surface); padding: 1.75rem; }
.fw-step-number { margin: 0 0 2.5rem; color: var(--wp--preset--color--crimson-dark); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.12em; }
.fw-step h3 { margin-top: 0; }
.fw-step p:last-child { margin-bottom: 0; color: var(--wp--preset--color--muted); }

.fw-youth-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--fw-radius-lg);
    background: var(--wp--preset--color--navy-deep);
    color: #dce5eb;
    box-shadow: var(--fw-shadow-card);
}

.fw-youth-panel__visual {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgb(215 25 32 / 34%), transparent 28%),
        linear-gradient(145deg, #173b58, var(--wp--preset--color--navy-deep));
}

.fw-youth-panel__visual::before {
    position: absolute;
    right: -0.06em;
    bottom: -0.18em;
    color: rgb(255 255 255 / 8%);
    content: "JF";
    font-size: clamp(10rem, 30vw, 22rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.09em;
}

.fw-youth-panel__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
}

.fw-youth-panel__copy .fw-kicker { color: #ff8b8f; }
.fw-youth-panel__copy h2 {
    max-width: 13ch;
    margin: 0 0 1rem;
    color: var(--wp--preset--color--surface);
    font-size: clamp(2.35rem, 5vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}
.fw-youth-panel__copy > p { max-width: 44rem; color: #dce5eb; line-height: 1.65; }
.fw-youth-facts {
    display: grid;
    gap: 0.55rem;
    margin: 1.25rem 0;
    padding-left: 1.25rem;
    color: var(--wp--preset--color--surface);
    font-weight: 750;
}

.fw-faq-list { display: grid; gap: 0.75rem; }
.fw-faq-item { border: 1px solid var(--wp--preset--color--border); border-radius: var(--fw-radius-sm); background: var(--wp--preset--color--surface); padding: 0; }
.fw-faq-item summary { cursor: pointer; padding: 1.15rem 1.25rem; color: var(--wp--preset--color--navy); font-weight: 800; }
.fw-faq-item > p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--wp--preset--color--muted); }

/* Prävention ----------------------------------------------------------- */
.fw-emergency-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--fw-radius-lg);
    background: var(--wp--preset--color--navy-deep);
    color: #dce5eb;
    box-shadow: var(--fw-shadow-card);
}

.fw-emergency-number {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 74% 25%, rgb(255 255 255 / 12%), transparent 28%), var(--wp--preset--color--crimson);
    padding: clamp(2rem, 5vw, 4rem);
}
.fw-emergency-number span { color: rgb(255 255 255 / 78%); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.fw-emergency-number strong { display: block; margin-top: 0.35rem; color: var(--wp--preset--color--surface); font-size: clamp(5rem, 18vw, 11rem); line-height: 0.85; letter-spacing: -0.08em; }

.fw-emergency-copy { padding: clamp(2rem, 5vw, 4rem); }
.fw-emergency-copy h2 { margin-top: 0; color: var(--wp--preset--color--surface); }
.fw-emergency-copy ol { margin: 1.5rem 0 0; padding-left: 1.25rem; }
.fw-emergency-copy li + li { margin-top: 0.75rem; }

.fw-prevention-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.fw-prevention-card { position: relative; min-height: 17rem; overflow: hidden; border: 1px solid var(--wp--preset--color--border); border-radius: var(--fw-radius-md); background: var(--wp--preset--color--surface); padding: clamp(1.5rem, 3vw, 2.25rem); }
.fw-prevention-card::after { position: absolute; right: -1.5rem; bottom: -3rem; width: 9rem; height: 9rem; border: 1.5rem solid rgb(11 31 51 / 4%); border-radius: 50%; content: ""; }
.fw-prevention-card h3 { margin-top: 0; font-size: clamp(1.4rem, 3vw, 1.95rem); }
.fw-prevention-card p:last-child { margin-bottom: 0; color: var(--wp--preset--color--muted); }

.fw-prevention-note { border-left: 4px solid var(--wp--preset--color--crimson); background: #fff7f7; padding: 1.25rem 1.5rem; }
.fw-prevention-note p { margin: 0; color: var(--wp--preset--color--navy); }

@media (min-width: 48rem) {
    .fw-v040-grid,
    .fw-equipment-grid,
    .fw-recruit-values,
    .fw-steps,
    .fw-prevention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fw-equipment-showcase,
    .fw-emergency-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

    .fw-youth-panel { grid-template-columns: minmax(16rem, 0.7fr) minmax(0, 1.3fr); }
    .fw-youth-panel__visual { min-height: 100%; }

    .fw-recruit-stage { grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr); }
    .fw-recruit-stage__mark { min-height: 100%; }
}

@media (min-width: 70rem) {
    .fw-equipment-grid,
    .fw-prevention-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fw-recruit-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fw-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 47.999rem) {
    .fw-equipment-visual { min-height: 18rem; }
    .fw-youth-panel__visual { min-height: 12rem; }

    /* Die dekorative DU-Fläche trägt auf kleinen Screens keine Information. */
    .fw-recruit-stage__mark { display: none; }

    .fw-emergency-number strong { font-size: clamp(5.5rem, 28vw, 8rem); }
}