/* =========================================================
   Marleen Moharitsch – Psychosoziale Beratung
   Warm & organic theme
   Stand: 2026-08-07
   ========================================================= */

:root {
    /* Die Seite hat bewusst nur ein helles Design. "only light" meldet sie vom
       automatischen Dunkelmodus ab (Chrome auf Android): der dreht sonst die
       CSS-Farben um, lässt Hintergrund-FOTOS aber unverändert – dunkle Elemente
       auf der Foto-Leiste würden dann aufgehellt und praktisch unsichtbar. */
    color-scheme: only light;

    --bg:        #F7F3EC;
    --cream-2:   #EFE8DC;
    --green:     #7C8A6B;
    --green-dark:#4A5840;
    --poppy:     #C2412D;
    --poppy-dark:#9E3322;
    --ink:       #3A3A36;
    --muted:     #6B6B62;
    --line:      #E0D8CA;
    --white:     #FFFFFF;

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans:  'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --radius: 14px;
    --shadow: 0 12px 30px rgba(58, 58, 54, 0.08);
    --maxw: 1120px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--poppy); }

/* Link mitten im Fließtext. Die Linkfarbe allein trägt hier nicht (Grün und Ink liegen zu
   nah beieinander), deshalb der Strich im Poppy-Ton – dasselbe Signal wie in der Navigation. */
.text-link {
    text-decoration: underline;
    text-decoration-color: var(--poppy);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color .2s ease, text-decoration-color .2s ease;
}
.text-link:hover { color: var(--poppy); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    color: var(--green-dark);
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--green-dark); color: #fff; padding: .6rem 1rem; z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; border-radius: 6px; color: #fff; }

:focus-visible { outline: 3px solid var(--poppy); outline-offset: 2px; }

/* ---------- Header / Nav ---------- */
/* Dasselbe Foto wie hinter den Zitaten – inklusive Verlauf und Filter, damit die Leiste
   denselben matt-sandigen Ton bekommt und nicht pfirsichfarben wirkt. Bild und Filter
   liegen auf einem Pseudo-Element, sonst würde der Filter Marke und Navigation mitfärben. */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(rgba(247, 243, 236, 0.55), rgba(239, 232, 220, 0.6)),
        url('../img/hintergrund-zitate.jpg') center/cover no-repeat;
    filter: saturate(0.45) sepia(0.18);
}
.site-header > .container { position: relative; z-index: 1; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-top: .9rem; padding-bottom: .9rem;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
    font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--green-dark);
}
.brand-tagline { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.site-nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.site-nav a {
    font-size: .92rem; letter-spacing: .02em; color: var(--ink); font-weight: 500;
    padding: .35rem 0; position: relative;
}
.site-nav a::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
    background: var(--poppy); transition: width .25s ease;
}
.site-nav a:hover::after, .site-nav a.is-active::after { width: 100%; }
.site-nav a.is-active { color: var(--green-dark); }

/* flex-shrink: 0 ist wichtig – ohne die Sperre drückt der lange Namenszug daneben den
   Button auf schmalen Handys von 42 auf 30 px zusammen. Die Balken schrumpfen dann auf
   12–16 px und das Symbol wird praktisch übersehen; außerdem fällt die Tap-Fläche unter
   die empfohlenen 44 px. */
.nav-toggle {
    display: none; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px;
    width: 44px; height: 44px; flex: 0 0 44px;
    -webkit-appearance: none; appearance: none;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(74, 88, 64, .35);
    border-radius: 10px;
    cursor: pointer; padding: 10px;
    position: relative; z-index: 95;
}
/* width: 100% ist Pflicht – die Balken sind leere <span> ohne eigenen Inhalt. Ohne feste
   Breite hängen sie am align-items des Buttons, und WebKits Standardstil für <button> ist
   "center": auf iPhones waren die Balken dadurch 0 px breit und der Button blieb leer.
   Farbe wie die Navigationstexte (--ink), damit er auf dem hellen Foto der Leiste klar
   steht. Siehe auch color-scheme oben: ohne die Sperre hellt Androids automatischer
   Dunkelmodus genau diese Balken auf, während das Foto hell bleibt. */
.nav-toggle span {
    display: block; width: 100%; height: 2px; flex: 0 0 2px;
    background: var(--ink); border-radius: 2px; transition: .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block; font-family: var(--sans); font-weight: 600; font-size: .95rem;
    letter-spacing: .02em; padding: .85rem 1.9rem; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--poppy); background: var(--poppy); color: #fff !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--poppy-dark); border-color: var(--poppy-dark); transform: translateY(-2px); }
.btn-outline {
    background: transparent; color: var(--green-dark) !important; border-color: var(--green);
}
.btn-outline:hover { background: var(--green); color: #fff !important; border-color: var(--green); }

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section-tight { padding: 3.5rem 0; }
.section-alt { background: var(--cream-2); }
.lead { font-size: 1.2rem; color: var(--muted); }
.center { text-align: center; }
.measure { max-width: 70ch; margin-left: auto; margin-right: auto; }
.eyebrow {
    font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--green); font-weight: 600; margin-bottom: 1rem;
}

/* ---------- Hero ---------- */
.hero {
    position: relative; min-height: 78vh; display: flex; align-items: center;
    color: #fff; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(40,46,38,.35) 0%, rgba(40,46,38,.55) 100%),
        var(--hero-img, none) center/cover no-repeat;
    z-index: 0;
}
.hero .container { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; }
.hero h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero .hero-sub {
    font-family: var(--serif); font-style: italic; font-size: 1.4rem; max-width: 40ch;
    margin: 1rem 0 2rem; color: #f3efe6;
}

/* ---------- Banner (full-width image band with overlay) ---------- */
.banner {
    position: relative; color: #fff; text-align: center; overflow: hidden;
    padding: 5.5rem 0;
}
.banner::before {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(40,46,38,.45) 0%, rgba(40,46,38,.55) 100%),
        var(--banner-img, none) center 40%/cover no-repeat;
    z-index: 0;
}
.banner .container { position: relative; z-index: 1; }
.banner h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.banner p { color: #f1ede4; }

/* ---------- Quote band (Zitat-Bereich mit Foto-Hintergrund) ---------- */
/* Sehr helles Foto; Verlauf und Filter nehmen ihm das Pfirsich und machen es matt-sandig.
   Der Filter sitzt auf dem Pseudo-Element, damit das Zitat selbst unverfälscht bleibt. */
.section-quote { position: relative; background: var(--cream-2); }
.section-quote::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(rgba(247, 243, 236, 0.55), rgba(239, 232, 220, 0.6)),
        url('../img/hintergrund-zitate.jpg') center/cover no-repeat;
    filter: saturate(0.45) sepia(0.18);
}
.section-quote > .container { position: relative; z-index: 1; }

/* ---------- Pull quote ---------- */
.quote {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.4; color: var(--green-dark); border-left: 4px solid var(--poppy);
    padding: .3rem 0 .3rem 1.6rem; margin: 2rem 0; max-width: 30ch;
}
.quote-center {
    border: none; text-align: center; max-width: 24ch; margin: 0 auto; padding: 0;
}
.quote-wide { max-width: 44ch; }
.quote cite { display: block; font-style: normal; font-family: var(--sans); font-size: .9rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }

/* ---------- Photo band (freistehendes Bild zwischen Textabschnitten) ---------- */
.photo-band { margin: 0; }
.photo-band img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- Inline figure (Bild zur Auflockerung im Fließtext) ---------- */
.inline-figure { margin: 2.5rem 0; }
.inline-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.inline-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; text-align: center; }

/* ---------- Split (text + image) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.figure-caption { font-size: .82rem; color: var(--muted); margin-top: .6rem; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.8rem; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(58,58,54,.12); }
.card h3 { color: var(--poppy-dark); margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }

/* Question cards (Über mich) */
.q-card h3 { font-family: var(--serif); font-size: 1.5rem; color: var(--green-dark); }

/* Path cards (Über mich – Mein Weg bisher) */
.path-card h3 { color: var(--green-dark); }
.path-card h4 {
    font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--poppy-dark); margin: 1.4rem 0 .5rem;
}
.path-card ul { padding-left: 1.1rem; margin: 0; }
.path-card li { margin-bottom: .5rem; }
.path-card li:last-child { margin-bottom: 0; }

/* Teaser cards (home) link blocks */
.teaser {
    display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.teaser:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(58,58,54,.12); }
.teaser .teaser-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.teaser h3 { color: var(--green-dark); }
.teaser .teaser-link { margin-top: auto; font-weight: 600; color: var(--poppy); }
.teaser:hover .teaser-link { color: var(--poppy-dark); }

/* ---------- Bullet list (focus points) ---------- */
.leaf-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.leaf-list li {
    position: relative; padding-left: 2rem; margin-bottom: 1rem; font-size: 1.08rem;
}
.leaf-list li::before {
    content: '🌱'; position: absolute; left: 0; top: 0;
}

/* ---------- Page header ---------- */
.page-head { background: var(--cream-2); padding: 4rem 0 3rem; border-bottom: 1px solid var(--line); }
.page-head .eyebrow { margin-bottom: .6rem; }
/* Variante mit Foto-Hintergrund (Bild pro Seite über --pagehead-img setzen) */
.page-head-img {
    background:
        linear-gradient(rgba(247, 243, 236, 0.3), rgba(247, 243, 236, 0.3)),
        var(--pagehead-img, none) center/cover no-repeat,
        var(--cream-2);
}

/* ---------- FAQ accordion ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--serif); font-size: 1.3rem; color: var(--green-dark); font-weight: 600;
    padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
}
.faq-q::after {
    content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    font-size: 1.6rem; color: var(--poppy); transition: transform .25s ease;
}
.faq-q[aria-expanded="true"]::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 0 1.4rem; color: var(--muted); }

/* ---------- Blog ---------- */
.post-card { display: flex; flex-direction: column; }
.post-card .post-thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.post-meta { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.post-body { max-width: 70ch; margin: 0 auto; }
.post-body h2 { margin-top: 2.2rem; }
.post-body ul { padding-left: 1.2rem; }
.post-body li { margin-bottom: .6rem; }
.post-outro {
    font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--green-dark);
    border-top: 1px solid var(--line); padding-top: 1.6rem; margin-top: 2.4rem;
}
.post-hero { aspect-ratio: 21/9; object-fit: cover; width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 2.5rem; }
.back-link { display: inline-block; margin-top: 2.5rem; font-weight: 600; }
.post-body .quote { margin: 0 0 2rem; max-width: none; }
.post-figure { margin: 2.5rem 0; }
.post-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.post-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: .6rem; text-align: center; }

/* ---------- Impressum ---------- */
.imprint-list { margin: 0 0 2.5rem; }
.imprint-list dt {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--green); font-weight: 600; margin-top: 1.2rem;
}
.imprint-list dd { margin: .15rem 0 0; }
.imprint h2 { margin-top: 2.2rem; font-size: 1.6rem; }
.imprint h2:first-child { margin-top: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.contact-details li { list-style: none; margin-bottom: 1.3rem; }
.contact-details { padding: 0; margin: 0; }
.contact-details .label { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: .15rem; }
.contact-details .value { font-size: 1.15rem; color: var(--ink); }

.form-field { margin-bottom: 1.3rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: .4rem; font-size: .95rem; }
.form-field input, .form-field textarea {
    width: 100%; font-family: var(--sans); font-size: 1rem; padding: .8rem 1rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink);
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(124,138,107,.18); }
.form-field textarea { resize: vertical; min-height: 150px; }
.form-field .field-hint { font-weight: 400; color: var(--muted); font-size: .85rem; }

/* Spamschutz: Honeypot-Felder. Für Menschen unsichtbar, für Bots verlockend.
   Bewusst hier im Stylesheet und nicht als Inline-Style – ein direkt am
   Element hängendes "left:-9999px" erkennen Bots als Falle. */
.field-alt {
    position: absolute !important; left: -9999px !important; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.alert { padding: 1rem 1.3rem; border-radius: 10px; margin-bottom: 1.8rem; font-weight: 500; }
.alert-success { background: #E8F0E2; border: 1px solid var(--green); color: var(--green-dark); }
.alert-error   { background: #F8E5E1; border: 1px solid var(--poppy); color: var(--poppy-dark); }

/* ---------- Footer ---------- */
/* Helles Foto als Hintergrund der Fußleiste; der Verlauf darüber hält die Texte lesbar. */
.site-footer {
    background:
        linear-gradient(rgba(247, 243, 236, 0.62), rgba(239, 232, 220, 0.8)),
        url('../img/hintergrund-hell.jpg') center/cover no-repeat,
        var(--cream-2);
    color: var(--ink);
    border-top: 1px solid var(--line);
    margin-top: 4rem; padding: 3.5rem 0 1.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; color: var(--green-dark); margin-bottom: .2rem; }
.footer-tagline { font-size: .85rem; color: var(--muted); }
.footer-head { font-size: 1.1rem; color: var(--green-dark); margin-bottom: .8rem; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: .5rem; }
.site-footer a { color: var(--green-dark); }
.site-footer a:hover { color: var(--poppy); }
.footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    border-top: 1px solid rgba(58, 58, 54, 0.15); padding-top: 1.3rem; font-size: .82rem; color: var(--muted);
}

/* ---------- Scroll reveal (only when JS is active, so content is never hidden without JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .split, .contact-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .split.reverse .split-media { order: 0; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed; inset: 0 0 0 auto; width: min(80vw, 320px); height: 100vh;
        background: var(--bg); box-shadow: -8px 0 30px rgba(0,0,0,.12);
        transform: translateX(100%); transition: transform .3s ease; padding: 5rem 2rem 2rem;
        z-index: 90; overflow-y: auto;
    }
    .site-nav.is-open { transform: translateX(0); }
    .site-nav ul { flex-direction: column; gap: 1.4rem; }
    .site-nav a { font-size: 1.1rem; }
    body.nav-open { overflow: hidden; }
}

@media (max-width: 480px) {
    .section { padding: 3.5rem 0; }
    .hero { min-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}