/* ========================================
   blocks.css — Content block styles
   Einheitliche Schriftgröße: 14px body, 15px titles
   ======================================== */

/* === Shared block spacing === */
.block-info, .block-warning, .block-note, .block-summary,
.block-stat, .block-quote, .block-checklist, .block-faq,
.block-product, .block-sources, .block-theory-grid,
.block-debate, .block-disease-grid, .block-table-wrap,
.block-stat-banner, .block-effect-grid {
    margin: 20px 0;
}

/* === Info Box (Blue) === */
.block-info {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #f0f1f8;
    border-left: 4px solid var(--color-blau);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.block-info__icon {
    flex-shrink: 0;
    color: var(--color-blau);
    margin-top: 1px;
}
.block-info__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    color: var(--color-schwarz);
}
.block-info__content { font-size: 14px; line-height: 1.55; color: var(--color-schwarz); }
.block-info__content p { margin-bottom: 6px; }
.block-info__content p:last-child { margin-bottom: 0; }

/* === Warning Box (Orange) === */
.block-warning {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #fef3eb;
    border-left: 4px solid var(--color-orange);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.block-warning__icon {
    flex-shrink: 0;
    color: var(--color-orange);
    margin-top: 1px;
}
.block-warning__title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    color: var(--color-schwarz);
}
.block-warning__content { font-size: 14px; line-height: 1.55; color: var(--color-schwarz); }
.block-warning__content p { margin-bottom: 6px; }
.block-warning__content p:last-child { margin-bottom: 0; }

/* === Summary Box (Creme) === */
.block-summary {
    padding: 20px;
    background: var(--color-creme);
    border-radius: var(--radius-lg);
}
.block-summary__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.block-summary__icon { font-size: 18px; }
.block-summary__title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.block-summary__list {
    list-style: none;
    counter-reset: summary;
    margin: 0;
    padding: 0;
}
.block-summary__list li {
    counter-increment: summary;
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    line-height: 1.5;
    font-size: 14px;
    color: var(--color-schwarz);
}
.block-summary__list li:last-child { border-bottom: none; }
.block-summary__list li::before {
    content: counter(summary);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--color-orange);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* === Stat Box === */
.block-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    background: var(--color-creme);
    border-left: 4px solid var(--color-orange);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.block-stat__number {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-schwarz);
    line-height: 1.1;
    margin-bottom: 4px;
}
.block-stat__label {
    font-size: 14px;
    color: var(--color-schwarz);
    line-height: 1.45;
}
.block-stat__source {
    font-size: 12px;
    color: var(--color-gray-400);
    font-style: italic;
    margin-top: 6px;
}

/* === Expert Quote === */
.block-quote {
    position: relative;
    padding: 20px 20px 20px 24px;
    background: var(--color-creme);
    border-radius: var(--radius-lg);
    border: none;
}
.block-quote::before {
    content: '\201E';
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 44px;
    line-height: 1;
    color: var(--color-orange);
    font-family: Georgia, serif;
}
.block-quote .block-quote__text {
    padding-left: 18px;
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-schwarz);
}
.block-quote .block-quote__text p { margin-bottom: 6px; }
.block-quote .block-quote__text p:last-child { margin-bottom: 0; }
.block-quote__footer {
    padding-left: 18px;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
}
.block-quote__footer strong { display: block; color: var(--color-schwarz); }
.block-quote__role { color: var(--color-gray-500); font-size: 12px; }

/* === Note Box (Neutral Gray) === */
.block-note {
    padding: 14px 16px;
    background: var(--color-gray-50);
    border-left: 3px solid var(--color-gray-300);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 14px;
    color: var(--color-schwarz);
    line-height: 1.55;
}
.block-note__title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 4px;
}
.block-note__content p { margin-bottom: 6px; }
.block-note__content p:last-child { margin-bottom: 0; }

/* === Checklist === */
.block-checklist {
    list-style: none;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0;
}
.block-checklist li {
    padding: 10px 14px 10px 32px;
    position: relative;
    border-bottom: 1px solid var(--color-gray-200);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-schwarz);
}
.block-checklist li:last-child { border-bottom: none; }

/* OK variant (green) */
.block-checklist--ok { background: #fffaf4; }
.block-checklist--ok li::before {
    content: "\2713";
    position: absolute;
    left: 12px;
    color: var(--color-gruen);
    font-weight: 700;
}

/* Warn variant (orange) */
.block-checklist--warn {
    background: #fef3ec;
    border-color: #f0c4a0;
}
.block-checklist--warn li { border-color: #f0c4a0; }
.block-checklist--warn li::before {
    content: "!";
    position: absolute;
    left: 12px;
    color: var(--color-orange);
    font-weight: 700;
}

/* === FAQ Block === */
.block-faq__item {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    overflow: hidden;
}
.block-faq__question {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    background: #fffaf4;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.block-faq__question::-webkit-details-marker { display: none; }
.block-faq__question::after {
    content: "+";
    font-size: 18px;
    font-weight: 300;
    color: var(--color-gray-400);
    flex-shrink: 0;
    margin-left: 12px;
}
.block-faq__item[open] .block-faq__question::after { content: "\2212"; }
.block-faq__answer {
    padding: 10px 14px 12px;
    background: #fffaf4;
    border-top: 1px solid var(--color-gray-200);
    font-size: 14px;
    color: var(--color-schwarz);
    line-height: 1.55;
}
.block-faq__answer p { margin-bottom: 6px; }
.block-faq__answer p:last-child { margin-bottom: 0; }

/* === Product Card === */
.block-product {
    border: 1px solid var(--color-blau);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-white);
}
.block-product__image { flex-shrink: 0; width: 100px; align-self: flex-start; }
.block-product__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    object-fit: contain;
}
.block-product__placeholder {
    width: 100px;
    height: 100px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.block-product__name,
.article__body .block-product__name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-schwarz);
}
.block-product__desc { font-size: 14px; color: var(--color-schwarz); line-height: 1.5; }
.block-product__desc p { margin-bottom: 6px; }
.block-product__desc p:last-child { margin-bottom: 0; }
.block-product__btn {
    display: inline-block;
    background: var(--color-schwarz);
    color: var(--color-creme);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 100px;
    margin-top: 8px;
    text-decoration: none;
    transition: opacity .15s;
}
.block-product__btn:hover,
.article__body .block-product__btn,
.article__body .block-product__btn:hover {
    opacity: .92;
    text-decoration: none;
    color: var(--color-creme);
    background: var(--color-schwarz);
}
.article__body .block-product__btn:hover { opacity: .85; }
@media (max-width: 480px) {
    .block-product { gap: 12px; padding: 12px; align-items: flex-start; }
    .block-product__image { width: 80px; }
    .block-product__placeholder { width: 80px; height: 80px; }
    .block-product__name { font-size: 14px; }
    .block-product__desc { font-size: 13px; }
    .block-product__btn { font-size: 13px; padding: 8px 16px; margin-top: 6px; }
}

/* === Sources === */
.block-sources {
    border-top: 1px solid var(--color-gray-200);
    padding-top: 16px;
    margin: 40px 0 24px;
}
.block-sources__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 8px;
}
.block-sources__list { padding-left: 18px; list-style: decimal; }
.block-sources__list li {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 4px;
    line-height: 1.5;
}
.block-sources__list a { color: var(--color-blau); text-decoration: none; word-break: break-all; }
.block-sources__list a:hover { text-decoration: underline; }

/* === Theory Grid === */
.block-theory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) { .block-theory-grid { grid-template-columns: 1fr; } }

.block-theory-card {
    background: #fffaf4;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.block-theory-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 100px;
    margin-bottom: 2px;
}
.block-theory-badge--belegt { background: #edf5e9; color: var(--color-gruen); }
.block-theory-badge--plausibel { background: #eef0f9; color: var(--color-blau); }
.block-theory-badge--widerlegt { background: #fdecea; color: #c0392b; }
.block-theory-card__title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-schwarz);
}
.block-theory-card__desc { font-size: 14px; color: var(--color-schwarz); line-height: 1.5; }
.block-theory-card__desc p { margin-bottom: 0; }

/* === Debate Box === */
.block-debate {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-white);
}
.block-debate__header {
    background: var(--color-schwarz);
    color: var(--color-creme);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
}
.block-debate__cols { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .block-debate__cols { grid-template-columns: 1fr; } }
.block-debate__col {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-schwarz);
}
.block-debate__col:first-child { border-right: 1px solid var(--color-gray-200); }
@media (max-width: 480px) {
    .block-debate__col:first-child { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
}
.block-debate__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-schwarz);
    margin-bottom: 6px;
}

/* === Disease Grid === */
.block-disease-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 480px) { .block-disease-grid { grid-template-columns: 1fr; } }

.block-disease-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.block-disease-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 2px;
}
.block-disease-tag--all { background: #eef0f9; color: var(--color-blau); }
.block-disease-tag--female { background: #fce4f0; color: #8b2060; }
.block-disease-tag--young { background: #edf5e9; color: var(--color-gruen); }
.block-disease-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 2px 0 4px;
    color: var(--color-schwarz);
}
.block-disease-card__desc { font-size: 14px; color: var(--color-schwarz); line-height: 1.5; }
.block-disease-card__desc p { margin-bottom: 0; }

/* === Data Table === */
.block-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.block-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.block-table th {
    background: var(--color-schwarz);
    color: var(--color-creme);
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.block-table td { padding: 8px 12px; border-bottom: 1px solid var(--color-gray-200); }
.block-table tr:last-child td { border-bottom: none; }
.block-table tr:nth-child(even) td { background: var(--color-creme); }

/* === Stat Banner (Dark) === */
.block-stat-banner {
    background: var(--color-schwarz);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.block-stat-banner__number {
    font-size: 44px;
    font-weight: 700;
    color: var(--color-creme);
    line-height: 1;
    flex-shrink: 0;
}
.block-stat-banner__text { font-size: 14px; color: rgba(255,244,228,.85); line-height: 1.5; }
.block-stat-banner__text p { margin-bottom: 0; }
.block-stat-banner__source { font-size: 11px; color: rgba(255,244,228,.4); margin-top: 4px; display: block; }

/* === Effect Grid === */
.block-effect-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 480px) { .block-effect-grid { grid-template-columns: 1fr; } }

.block-effect-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.block-effect-card__title,
.article__body .block-effect-card__title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-schwarz);
    line-height: 1.3;
}
.block-effect-card__desc { font-size: 14px; color: var(--color-schwarz); line-height: 1.5; }
.block-effect-card__desc p { margin-bottom: 6px; }
.block-effect-card__desc p:last-child { margin-bottom: 0; }
.block-effect-card__duration {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background: #edf5e9;
    color: var(--color-gruen);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 4px;
}