/* ==========================================================================
   Wissensseiten – Styles
   Ergänzt style.css für /wissen/-Seiten mit Content-Fokus
   ========================================================================== */

/* ── Article Typography ──
   Scoped to content sections only – never override hero or dark sections */
/* Dunkle Inline-Elemente (.fb-closing, .fb-quote--prominent) von den
   Farbregeln ausnehmen, damit helle Schrift auf dunklem Grund bleibt. */
.wissen-article .section:not(.section--page-hero):not(.section--dark) h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--black);
    margin-bottom: var(--space-6);
    line-height: 1.2;
}
.wissen-article .section:not(.section--page-hero):not(.section--dark) h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 400;
    color: var(--black);
    margin-bottom: var(--space-4);
    margin-top: var(--space-8);
    line-height: 1.25;
}
.wissen-article .section:not(.section--page-hero):not(.section--dark) > .container p,
.wissen-article .section:not(.section--page-hero):not(.section--dark) > .container > .container--narrow p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--gray-dark);
    margin-bottom: var(--space-5);
}
.wissen-article .section:not(.section--page-hero):not(.section--dark) p:last-child { margin-bottom: 0; }
.wissen-article .section:not(.section--page-hero):not(.section--dark) > .container strong,
.wissen-article .section:not(.section--page-hero):not(.section--dark) > .container > .container--narrow strong { color: var(--black); }
/* Dunkle Inline-Boxen behalten ihre eigene Schriftfarbe */
.wissen-article .fb-closing h3, .wissen-article .fb-closing p,
.wissen-article .fb-quote--prominent p, .wissen-article .fb-quote--prominent .fb-quote-attr { color: inherit !important; }
.wissen-article .section:not(.section--page-hero):not(.section--dark) ol,
.wissen-article .section:not(.section--page-hero):not(.section--dark) ul {
    margin-bottom: var(--space-5);
    padding-left: var(--space-6);
}
.wissen-article .section:not(.section--page-hero):not(.section--dark) li {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--gray-dark);
    margin-bottom: var(--space-3);
}

/* ── Wissen Hero – zentriert, ohne Bild, wie Startseite ── */
.wissen-hero {
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
    background: var(--black);
    color: var(--beige-light);
    text-align: center;
}
.wissen-hero .container { max-width: 760px; }
.wissen-hero .eyebrow {
    color: var(--gold);
    margin-bottom: var(--space-4);
}
.wissen-hero h1 {
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-5);
    line-height: 1.2;
}
.wissen-hero .lead {
    font-size: var(--text-xl);
    color: var(--gray-light);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Section Divider – nutzt den goldenen Gradient aus style.css (.section-divider) */

/* ── Info Box – gleicher Look wie Hauptseite-Cards ── */
.wissen-infobox {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.wissen-infobox h3 {
    margin-top: 0;
    margin-bottom: var(--space-3);
    color: var(--black);
}
.wissen-infobox p { color: var(--gray-dark); font-size: 1rem; }
.wissen-infobox p:last-child { margin-bottom: 0; }

/* ── Insight Box (gold border-left – wie pain-quote auf Hauptseite) ── */
.wissen-insight {
    border-left: 4px solid var(--gold);
    background: rgba(255,255,255,0.06);
    padding: var(--space-6) var(--space-8);
    border-radius: 0 12px 12px 0;
    margin: var(--space-10) 0;
    background: var(--cream);
}
.wissen-insight p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--black);
}
.wissen-insight p:first-child {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 400;
    line-height: 1.45;
}
.wissen-insight p:last-child { margin-bottom: 0; }

/* ── Calculation Table ── */
.wissen-table-wrap {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin: var(--space-8) 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.wissen-table-wrap h3 {
    margin-top: 0;
    margin-bottom: var(--space-5);
}
.wissen-table {
    width: 100%;
    border-collapse: collapse;
}
.wissen-table tr { border-bottom: 1px solid var(--beige-dark); }
.wissen-table tr:last-child { border-bottom: none; }
.wissen-table td {
    padding: var(--space-4) 0;
    font-size: 0.98rem;
    color: var(--gray-dark);
}
.wissen-table td:last-child {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}
.wissen-table tr.wissen-table-highlight {
    border-bottom: 2px solid var(--gold);
}
.wissen-table tr.wissen-table-highlight td { font-weight: 600; color: var(--black); }
.wissen-table tr.wissen-table-result td:last-child {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--gold);
}
.wissen-table .wissen-table-deduct { color: var(--gray-mid); }

/* ── Three-Column Grid – gleicher Card-Look wie Hauptseite ── */
.wissen-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}
.wissen-grid-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wissen-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Farbakzent oben statt links (wie Benchmark-Cards) */
.wissen-grid-card--salbei { border-top: 3px solid var(--salbei); }
.wissen-grid-card--gold { border-top: 3px solid var(--gold); }
.wissen-grid-card--gray { border-top: 3px solid var(--gray-mid); }

.wissen-grid-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-size: 1.15rem;
}
.wissen-grid-card--salbei h3 { color: var(--salbei); }
.wissen-grid-card--gold h3 { color: var(--gold); }
.wissen-grid-card--gray h3 { color: var(--gray-mid); }

.wissen-grid-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wissen-grid-card li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--beige-dark);
    font-size: 0.95rem;
    color: var(--gray-dark);
    margin-bottom: 0;
}
.wissen-grid-card li:last-child { border-bottom: none; }
.wissen-grid-card .wissen-hint {
    color: var(--gray-mid);
    font-size: 0.88rem;
}

/* ── Benchmark Bars – gleicher Card-Look ── */
.wissen-benchmarks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-8) 0;
}
.wissen-benchmark {
    background: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.wissen-benchmark-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: var(--space-2);
}
.wissen-benchmark-label {
    font-weight: 600;
    font-size: 0.98rem;
    margin-bottom: var(--space-2);
    color: var(--black);
}
.wissen-benchmark-desc {
    font-size: 0.92rem;
    color: var(--gray-mid);
}
.wissen-benchmark--good { border-top: 3px solid var(--salbei); }
.wissen-benchmark--good .wissen-benchmark-value { color: var(--salbei); }
.wissen-benchmark--okay { border-top: 3px solid var(--gold); }
.wissen-benchmark--okay .wissen-benchmark-value { color: var(--gold); }
.wissen-benchmark--bad { border-top: 3px solid var(--gray-mid); }
.wissen-benchmark--bad .wissen-benchmark-value { color: var(--gray-mid); }

/* ── Numbered Steps List ── */
.wissen-numbered-list {
    margin: var(--space-8) 0;
}
.wissen-numbered-item {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--beige-dark);
}
.wissen-numbered-item:last-child { border-bottom: none; }
.wissen-numbered-nr {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--gold);
    line-height: 1;
    min-width: 2rem;
    padding-top: 4px;
}
.wissen-numbered-item h3 {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--black);
}
.wissen-numbered-item p {
    margin: 0;
    font-size: 0.98rem;
    color: var(--gray-dark);
    line-height: 1.75;
}

/* ── Quote Block (gold border-left – wie pain-quote auf Hauptseite) ── */
.wissen-quote {
    border-left: 4px solid var(--gold);
    background: var(--cream);
    padding: var(--space-6) var(--space-8);
    border-radius: 0 12px 12px 0;
    margin: var(--space-6) 0;
}
.wissen-quote-text {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 400;
    font-style: italic;
    color: var(--black);
    line-height: 1.45;
    margin-bottom: var(--space-3);
}
.wissen-quote-context {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.7;
}

/* ── Calculation Box ── */
.wissen-calc-box {
    background: var(--black);
    color: var(--beige-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin: var(--space-8) 0;
}
.wissen-calc-box h3 {
    color: var(--white);
    margin-top: 0;
    margin-bottom: var(--space-5);
}
.wissen-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 0.98rem;
}
.wissen-calc-row:last-child { border-bottom: none; }
.wissen-calc-row-label { color: var(--gray-light); }
.wissen-calc-row-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--white);
}
.wissen-calc-row--result {
    border-bottom: 2px solid var(--gold);
    padding: var(--space-4) 0;
}
.wissen-calc-row--result .wissen-calc-row-value {
    font-size: 1.6rem;
    color: var(--gold);
}

/* ── Two-Column Comparison – gleicher Card-Look ── */
.wissen-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin: var(--space-8) 0;
}
.wissen-compare-card {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.wissen-compare-card h3 { margin-top: 0; color: var(--black); }
.wissen-compare-card p { color: var(--gray-dark); font-size: 1rem; }
.wissen-compare-card--highlight {
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.1);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .wissen-grid-3 { grid-template-columns: 1fr; }
    .wissen-benchmarks { grid-template-columns: 1fr; }
    .wissen-compare { grid-template-columns: 1fr; }
    .wissen-infobox,
    .wissen-insight,
    .wissen-quote { padding: var(--space-5) var(--space-5); }
    .wissen-table-wrap { padding: var(--space-5); }
    .wissen-calc-box { padding: var(--space-5); }
    .wissen-infobox,
    .wissen-table-wrap,
    .wissen-grid-card,
    .wissen-benchmark,
    .wissen-compare-card { padding: var(--space-6); }
}