/* ═══════════════════════════════════════════════════════════════
   FLASCHENFINDER | howto.css ("So funktioniert unser Vergleich")
   Präfix .hiw-. Tokens aus components.css. Mobile first.
   Ruhige Seite: viel Weißraum, eine Spalte, Zahlen als Anker.
   ═══════════════════════════════════════════════════════════════ */

.hiw-page { background: #ffffff; }

/* Breite und Ränder wie .ff-container (Kopfleiste, Startseite), damit
   der Inhalt auf jeder Seite an derselben Kante beginnt wie das Logo. */
.hiw-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 640px) { .hiw-container { padding: 0 20px; } }
@media (min-width: 768px) { .hiw-container { padding: 0 24px; } }

/* Volle Breite wie auf den anderen Seiten; Fliesstext bleibt lesbar schmal. */
.hiw p { max-width: 80ch; }

.hiw :where(a) { color: var(--ff-primary); }
.hiw :where(a:hover) { color: var(--ff-primary-dark); }
/* Nur <p>, nicht <li>: sonst traefe es auch Bedienelemente in Listen. */
.hiw :where(p) a { text-decoration: underline; }

/* ── Kopf ───────────────────────────────────────────────────── */
.hiw-head {
    padding: 14px 0 26px;
    background:
        radial-gradient(900px 300px at 85% 10%, rgba(33, 99, 105, .10), transparent 70%),
        var(--ff-bg-warm);
    border-bottom: 1px solid var(--ff-border-light);
}

.hiw-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--ff-text-light);
}

.hiw-crumbs a { color: var(--ff-text-muted) !important; text-decoration: none; }
.hiw-crumbs a:hover { text-decoration: underline; }

.hiw-head__grid { display: grid; gap: 22px; }

.hiw-head__title {
    margin: 0 0 12px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ff-text);
}

.hiw-head__lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ff-text-muted);
}

.hiw-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hiw-stats li {
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-md);
}

.hiw-stats strong {
    display: block;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ff-primary-dark);
}

.hiw-stats span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ff-text-light);
}

/* ── Abschnitte ─────────────────────────────────────────────── */
.hiw-section { padding: 28px 0 0; }

.hiw-section__title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ff-text);
}

.hiw-section__lead {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ff-text-muted);
}

/* ── Die vier Schritte ──────────────────────────────────────── */
.hiw-steps {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.hiw-step {
    position: relative;
    padding: 16px 16px 16px 58px;
    background: var(--ff-bg-subtle);
    border: 1px solid var(--ff-border-light);
    border-radius: var(--ff-radius-md);
}

.hiw-step__n {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ff-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.hiw-step__title {
    margin: 3px 0 5px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ff-text);
}

.hiw-step__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ff-text-muted);
}

/* ── Aufzählungen mit Zwischenüberschrift ───────────────────── */
.hiw-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hiw-list > li {
    padding: 14px 0 14px 18px;
    border-top: 1px solid var(--ff-border-light);
    border-left: 3px solid var(--ff-primary);
    padding-left: 15px;
}

.hiw-list > li:first-child { border-top: 0; }

.hiw-list--plain > li { border-left: 0; padding-left: 0; }

.hiw-list h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ff-text);
}

.hiw-list p {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--ff-text-muted);
}

/* ── Hinweiskasten zur Provision ────────────────────────────── */
.hiw-note {
    margin-top: 22px;
    padding: 18px;
    background: #f1f7f6;
    border: 1px solid #cfe3e1;
    border-radius: var(--ff-radius-lg);
}

.hiw-note__title {
    margin: 0 0 8px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ff-primary-dark);
}

.hiw-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--ff-text);
}

.hiw-note__second { margin-top: 10px !important; }

.hiw-note__more { margin-top: 10px !important; font-size: 13px !important; color: var(--ff-text-muted) !important; }

/* ── Fragen und Antworten ───────────────────────────────────── */
.hiw-faq { margin-top: 14px; border-top: 1px solid var(--ff-border-light); }

.hiw-faq__item { border-bottom: 1px solid var(--ff-border-light); }

.hiw-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 0;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ff-text);
}

.hiw-faq__item > summary::-webkit-details-marker { display: none; }

.hiw-faq__item > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--ff-text-muted);
    border-bottom: 2px solid var(--ff-text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--ff-transition);
}

.hiw-faq__item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.hiw-faq__item > p {
    margin: 0 0 16px;
    padding-right: 24px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ff-text-muted);
}

/* ── Fuß ────────────────────────────────────────────────────── */
.hiw-outro {
    margin-top: 32px;
    padding: 22px 0 28px;
    background: var(--ff-bg-subtle);
    border-top: 1px solid var(--ff-border-light);
}

.hiw-outro__grid { display: grid; gap: 12px; }

.hiw-outro p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ff-text-muted);
}

/* ── Ab Tablet ──────────────────────────────────────────────── */
@media (min-width: 700px) {
    .hiw-head { padding: 18px 0 34px; }
    .hiw-head__title { font-size: 38px; }
    .hiw-head__lead { font-size: 16px; }
    .hiw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hiw-section { padding: 38px 0 0; }
    .hiw-section__title { font-size: 24px; }
    .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .hiw-outro__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (min-width: 1024px) {
    .hiw-head__title { font-size: 42px; }
}