/* Editorial design system für "4 kg in 4 Wochen" – angepasst aus Layoutvorschlag des Nutzers. */

* { box-sizing: border-box; }

:root {
    --forest: #063b31;
    --forest-dark: #032b24;
    --terracotta: #dc6b35;
    --cream: #f4ead3;
    --sage: #98a081;
    --ink: #15352e;
    --paper: #f7f1e4;
    --line: #f4ead338;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: inherit; }

/* Header */
.site-header {
    background: var(--forest-dark);
    height: 92px;
    color: var(--cream);
    border-bottom: 1px solid var(--line);
    z-index: 30;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.3vw;
    display: flex;
    position: sticky;
    top: 0;
}
.brand {
    color: inherit;
    background: none;
    border: 0;
    align-items: center;
    gap: 18px;
    display: flex;
    text-decoration: none;
}
.brand strong { font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.brand span { color: var(--terracotta); border-left: 1px solid var(--sage); padding-left: 18px; font-size: 14px; }
.site-header nav { gap: 28px; display: flex; }
.site-header nav a {
    color: var(--cream);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 0;
    font-size: 15px;
    text-decoration: none;
}
.site-header nav a:hover { color: #fff; border-color: var(--terracotta); }
.menu { color: var(--cream); background: none; border: 0; font-size: 25px; display: none; }

/* Hero */
.hero {
    background: var(--forest-dark);
    min-height: 760px;
    color: var(--cream);
    grid-template-columns: 48% 52%;
    display: grid;
    overflow: hidden;
}
.hero-copy { z-index: 1; padding: 7.5vw 2vw 5vw 4vw; }
.eyebrow, .section-kicker {
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--terracotta);
    font-size: 12px;
    font-weight: 700;
}
.hero h1 {
    letter-spacing: -.06em;
    margin: 20px 0 28px;
    font: 500 clamp(56px, 9.2vw, 120px) / .9 Georgia, serif;
}
.hero h2 {
    color: var(--terracotta);
    max-width: 620px;
    margin: 0;
    font: 500 clamp(22px, 2.2vw, 32px) / 1.2 Georgia, serif;
}
.lead { color: #e8e0d1; max-width: 570px; margin: 26px 0 30px; font-size: 19px; line-height: 1.55; }
.actions { align-items: center; gap: 42px; display: flex; flex-wrap: wrap; }
.primary, .cream-button {
    background: var(--terracotta);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 18px 26px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    display: inline-block;
    text-decoration: none;
}
.primary span { margin-left: 25px; font-size: 20px; }
.text-button {
    border: 0;
    border-bottom: 2px solid var(--terracotta);
    color: var(--cream);
    background: none;
    padding: 12px 0;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}
.proof { color: var(--sage); margin-top: 55px; font: 600 17px Georgia, serif; }
.proof i { color: var(--terracotta); margin: 0 10px; font-style: normal; }
.hero-art {
    background: url(/assets/hero-editorial.jpg) center/cover no-repeat;
    min-height: 760px;
}

/* Intro / feature grid (auch für "Vertrauen"-Sektion wiederverwendet) */
.intro, .page-section { padding: 100px max(5vw, 24px); }
.intro > h2, .weeks-preview h2, .tool-teaser h2, .page-section > h1 {
    letter-spacing: -.04em;
    max-width: 950px;
    margin: 18px 0;
    font: 500 clamp(36px, 5.2vw, 64px) / 1 Georgia, serif;
}
.intro > p:not(.section-kicker), .page-lead {
    color: #54645c;
    max-width: 820px;
    font-size: 20px;
    line-height: 1.6;
}
.feature-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 65px;
    display: grid;
}
.feature-grid article { border-top: 1px solid #9aa791; padding: 22px 10px 30px 0; }
.feature-grid span { color: var(--terracotta); font: 600 13px Georgia, serif; }
.feature-grid h3 { margin: 24px 0 12px; font: 500 30px Georgia, serif; }
.feature-grid p { color: #5d6b64; line-height: 1.6; }

/* Wochen-Vorschau */
.weeks-preview { background: #dfd8c6; padding: 90px max(4vw, 24px); }
.weeks-preview > div:first-child { justify-content: space-between; align-items: end; display: flex; }
.week-cards { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 50px; display: grid; }
.week-cards > div {
    text-align: left;
    background: var(--cream);
    flex-direction: column;
    min-height: 260px;
    padding: 28px;
    display: flex;
}
.week-cards > div:nth-child(2n) { background: #cbd0b8; }
.week-cards span { text-transform: uppercase; letter-spacing: .15em; font-size: 12px; }
.week-cards strong { margin: 35px 0 15px; font: 500 26px Georgia, serif; }
.week-cards p { flex: 1; line-height: 1.55; }

/* Tool-Teaser */
.tool-teaser {
    background: var(--forest);
    color: var(--cream);
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 90px max(5vw, 24px);
    display: grid;
}
.tool-teaser p:not(.section-kicker) { max-width: 580px; line-height: 1.6; }
.cream-button { background: var(--cream); color: var(--forest); margin-top: 15px; border: 0; }
.number-card {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: 70px 1fr;
    align-items: center;
    display: grid;
}
.number-card span { color: var(--terracotta); font: 500 30px Georgia, serif; }
.number-card strong { border-bottom: 1px solid var(--line); padding: 20px; font: 500 22px Georgia, serif; }
.number-card > *:nth-last-child(-n+2) { border-bottom: 0; }

/* Rechner-Sektion (dunkle Karte mit Tabs) */
.tools-section { background: var(--paper); padding: 100px max(5vw, 24px); }
.tool-tabs { flex-wrap: wrap; gap: 5px; margin: 0 0 0; display: flex; }
.tool-tabs button {
    background: none;
    border: 1px solid #a7aa9f;
    padding: 14px 22px;
    font-weight: 700;
}
.tool-tabs button.active { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.calculator {
    background: var(--forest);
    color: var(--cream);
    padding: 50px;
    margin-top: 25px;
}
.calculator h3 { margin: 0 0 10px; font: 500 32px Georgia, serif; }
.calculator > p { color: #d9d6c9; line-height: 1.55; max-width: 640px; }
.calculator form { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; display: grid; }
.calculator label { flex-direction: column; gap: 8px; font-size: 13px; display: flex; }
.calculator input, .calculator select {
    border: 1px solid var(--line);
    color: #fff;
    background: #164d42;
    border-radius: 4px;
    padding: 14px;
}
.calculator .wide { grid-column: 1 / -1; }
.calculator .pill-group { grid-column: 1 / -1; display: flex; flex-direction: row; gap: 10px; }
.calculator .pill-group label {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    cursor: pointer;
    position: relative;
}
.calculator .pill-group input { position: absolute; opacity: 0; pointer-events: none; }
.calculator .pill-group label:has(input:checked) { background: var(--terracotta); border-color: var(--terracotta); }
.calculator .primary { align-self: end; border-radius: 4px; text-align: center; }
.calculator output, .calculator .calc-error {
    background: var(--cream);
    color: var(--forest);
    grid-column: 1 / -1;
    padding: 20px;
    font: 500 22px Georgia, serif;
    display: block;
}
.calculator .calc-error { background: #f6d9c8; font-size: 15px; font-family: Arial, Helvetica, sans-serif; }
.calculator output small { display: block; color: #3a5850; font: 15px/1.5 Arial, Helvetica, sans-serif; margin-top: 6px; }
.tools-more { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }
.tools-more a {
    border: 1px solid var(--forest);
    padding: 13px 20px;
    text-decoration: none;
    font-weight: 700;
    color: var(--forest);
}
.medical-note { color: #6b756f; padding: 20px 0 0; font-size: 13px; }

/* Finale CTA */
.final-cta { background: var(--forest-dark); color: var(--cream); padding: 110px max(5vw, 24px); text-align: center; }
.final-cta h2 { max-width: 800px; margin: 0 auto 20px; font: 500 clamp(34px, 4.5vw, 56px) / 1.05 Georgia, serif; }
.final-cta p { max-width: 560px; margin: 0 auto; color: #d9d6c9; font-size: 18px; line-height: 1.6; }
.final-cta .primary { margin-top: 40px; }

/* Footer */
footer {
    background: var(--forest-dark);
    color: var(--cream);
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 55px max(5vw, 24px);
    display: grid;
}
footer strong { font: 500 28px Georgia, serif; }
footer p { color: #c7cabc; margin-top: 6px; }
footer div { text-align: right; }
footer a { color: var(--cream); background: none; border: 0; margin-left: 20px; text-decoration: none; }
footer a:hover { color: var(--terracotta); }
footer small { border-top: 1px solid var(--line); color: #9fa9a2; grid-column: 1 / -1; padding-top: 20px; display: block; }

/* Kleine, generisch nutzbare Bausteine für Unterseiten (Planer, Tracker, Blog, Danke) */
.btn {
    background: var(--terracotta);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}
.btn-sm { padding: 6px 12px; border-radius: 4px; font-size: 12px; }
.btn-outline { background: none; border: 1px solid var(--forest); color: var(--forest); }
.link-terracotta { color: var(--terracotta); }
.notice { background: var(--cream); border: 1px solid var(--terracotta); color: var(--forest); border-radius: 8px; padding: 12px; }
.field {
    border: 1px solid #cfc6ac;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
}
.card { background: #fff; border: 1px solid #e3dcc6; border-radius: 12px; padding: 1rem; }

/* Generische Seiten (Planer, Tracker, Blog, Danke) */
.plan-page, .tools-page { max-width: 1500px; margin: 0 auto; }
.progress { background: #ded8c9; border-radius: 30px; height: 48px; margin: 45px 0 65px; position: relative; overflow: hidden; }
.progress span { background: var(--terracotta); height: 100%; display: block; transition: all .3s; }
.progress b { font-size: 13px; position: absolute; top: 15px; left: 20px; color: var(--forest); }
.plan-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; display: grid; }
.plan-week { background: #e6dfd0; padding: 30px; }
.plan-week h3 { font: 500 22px Georgia, serif; margin-bottom: 4px; }
.plan-week small { text-transform: uppercase; letter-spacing: .1em; color: var(--terracotta); font-size: 11px; }

/* Article-Body (CMS-Inhalte) bleibt lesbar in dunklerem, editorialem Ton */
.article-body h2 { font: 500 26px Georgia, serif; color: var(--forest); margin-top: 2rem; margin-bottom: .5rem; }
.article-body h3 { font: 500 20px Georgia, serif; color: var(--forest); margin-top: 1.5rem; margin-bottom: .5rem; }
.article-body p { margin-top: .75rem; line-height: 1.7; color: #384d46; }
.article-body ul, .article-body ol { margin-top: .75rem; margin-left: 1.5rem; color: #384d46; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-top: .25rem; }
.article-body a { color: var(--terracotta); text-decoration: underline; }
.article-body strong { color: var(--forest); }
.article-body img { max-width: 100%; height: auto; border-radius: .75rem; margin-top: 1rem; }

@media (width <= 900px) {
    .site-header { height: 74px; }
    .brand span { display: none; }
    .menu { display: block; }
    .site-header nav {
        background: var(--forest-dark);
        flex-direction: column;
        padding: 20px;
        display: none;
        position: absolute;
        top: 74px;
        left: 0;
        right: 0;
    }
    .site-header nav.open { display: flex; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { padding: 70px 24px 45px; }
    .hero-art { min-height: 380px; }
    .feature-grid, .week-cards { grid-template-columns: 1fr 1fr; }
    .tool-teaser, .calculator form { grid-template-columns: 1fr; }
    .weeks-preview > div:first-child { display: block; }
    footer { grid-template-columns: 1fr; }
    footer div { text-align: left; }
    footer a { margin: 0 15px 0 0; }
    footer small { grid-column: auto; }
}

@media (width <= 600px) {
    .hero h1 { font-size: 54px; }
    .hero h2 { font-size: 22px; }
    .lead { font-size: 17px; }
    .actions { flex-direction: column; align-items: flex-start; gap: 14px; }
    .proof { font-size: 14px; }
    .hero-art { background-position: 60%; min-height: 280px; }
    .intro, .page-section, .tools-section { padding: 70px 20px; }
    .intro > h2, .weeks-preview h2, .page-section > h1 { font-size: 38px; }
    .feature-grid, .week-cards, .plan-grid { grid-template-columns: 1fr; }
    .weeks-preview { padding: 70px 20px; }
    .tool-teaser { padding: 70px 20px; }
    .calculator { padding: 30px 20px; }
}