/* Heimatwelle · gemeinsame Stile für index.html und idee.html */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:      #3d6b4a;
    --green-deep: #2c5138;
    --green-mid:  #5a8f68;
    --green-soft: #e6efe0;
    --amber:      #c8963e;
    --amber-soft: #f8edd8;
    --paper:      #f7f4ea;
    --white:      #fdfbf6;
    --text:       #2a2a2a;
    --muted:      #5f625c;
    --border:     rgba(61,107,74,0.15);
    --shadow:     0 1px 4px rgba(40,60,40,0.07);
    --e0: #5a8f68;
    --e1: #c8963e;
    --e2: #b0694a;
    --e3: #6e5c9c;
    --hand: 'Caveat', cursive;
    --serif: 'Playfair Display', Georgia, serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--paper);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 760px) { .wrap { padding: 0 2rem; } }

.hand { font-family: var(--hand); font-weight: 600; }

.eyebrow {
    display: block;
    font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--amber);
    font-weight: 600; margin-bottom: 0.75rem;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--green); line-height: 1.2; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1rem; }

.lead { color: var(--muted); font-size: 1.04rem; max-width: 600px; }

section { padding: 4.5rem 0; }
.sec-white { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── NAV ─────────────────────────────────────────── */
nav {
    position: sticky; top: 0; z-index: 40;
    background: rgba(247,244,234,0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 56px; }
.logo { font-family: var(--serif); color: var(--green); font-size: 1.15rem; text-decoration: none; display: flex; align-items: baseline; gap: .6rem; }
.logo .hand { color: var(--amber); font-size: 1.1rem; }
.nav-links { display: none; list-style: none; gap: 1.6rem; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .88rem; }
.nav-links a:hover { color: var(--green); }
@media (min-width: 900px) { .nav-links { display: flex; } }

.plan-pill {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1.5px solid var(--border); background: white;
    border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; color: var(--green);
    transition: border-color .2s, transform .2s;
}
.plan-pill:hover { border-color: var(--green); }
.plan-pill .count {
    background: var(--green); color: white; border-radius: 999px;
    min-width: 1.35rem; height: 1.35rem; font-size: .75rem; display: inline-grid; place-items: center; padding: 0 .3rem;
}
.plan-pill.bump { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }

/* ── HERO ────────────────────────────────────────── */
.hero { padding: 3rem 0 4rem; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; } .hero { padding: 5rem 0; } }

.hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: 1rem; }
.hero p { color: var(--muted); font-size: 1.06rem; line-height: 1.75; margin-bottom: 1rem; max-width: 520px; }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }

.btn {
    display: inline-block; background: var(--green); color: white; border: none;
    padding: .85rem 1.6rem; border-radius: 3px; font-weight: 500; font-size: .95rem;
    text-decoration: none; transition: background .2s;
}
.btn:hover { background: var(--green-deep); }
.btn-amber { background: var(--amber); }
.btn-amber:hover { background: #b5852f; }
.btn-quiet {
    background: none; border: 1.5px solid var(--border); color: var(--green);
    padding: .55rem 1.1rem; border-radius: 999px; font-size: .86rem; transition: border-color .2s, background .2s;
}
.btn-quiet:hover { border-color: var(--green); background: rgba(61,107,74,.05); }
.link { color: var(--green); text-decoration: underline; text-underline-offset: 3px; font-size: .92rem; }

/* Postkarte zum Umdrehen */
.pc-stage { perspective: 1600px; position: relative; }
.pc {
    position: relative; width: 100%; aspect-ratio: 1200 / 860;
    transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.2,1);
    cursor: pointer; transform: rotate(-1.5deg);
}
.pc.flipped { transform: rotate(1deg) rotateY(180deg); }
.pc-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(50,70,40,.18), 0 2px 6px rgba(0,0,0,.08);
}
.pc-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-back {
    transform: rotateY(180deg); background: #fbf8ef;
    display: grid; grid-template-columns: 1.15fr 1fr; padding: 5% 6%;
    color: var(--green); font-family: var(--hand);
}
.pc-back .msg { border-right: 1.5px solid rgba(61,107,74,.25); padding-right: 6%; display: flex; flex-direction: column; justify-content: center; gap: .6em; font-size: clamp(1rem, 2.4vw, 1.45rem); line-height: 1.25; }
.pc-back .msg .big { font-size: 1.35em; }
.pc-back .addr { padding-left: 8%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.pc-back .stamp { width: 26%; min-width: 46px; }
.pc-back .qr { width: 44%; min-width: 70px; align-self: center; }
.pc-back .addr small { font-size: clamp(.8rem, 1.8vw, 1.05rem); text-align: right; line-height: 1.2; }

.pc-hint {
    position: absolute; right: -0.25rem; bottom: -2.2rem;
    font-family: var(--hand); color: var(--amber); font-size: 1.35rem;
    display: flex; align-items: center; gap: .3rem; pointer-events: none;
}
.pc-hint svg { width: 34px; height: 24px; }

/* ── STEPS ───────────────────────────────────────── */
.step-head { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.25rem; }
.step-num {
    flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    border: 1.5px solid var(--amber); color: var(--amber);
    display: grid; place-items: center; font-family: var(--hand); font-size: 1.25rem; transform: translateY(-.15rem);
}
.step-head h2 { margin-bottom: 0; }
.step { margin-bottom: 3.5rem; }

/* Wie lebst du */
.live-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 880px) { .live-grid { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }

.q { margin-bottom: 1.25rem; }
.q-label { font-size: .9rem; color: var(--muted); margin-bottom: .5rem; display: block; }
.seg { display: inline-flex; background: white; border: 1.5px solid var(--border); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.seg button {
    border: none; background: none; padding: .5rem 1.2rem; border-radius: 999px; font-size: .92rem; color: var(--muted);
    transition: background .25s, color .25s;
}
.seg button[aria-pressed="true"] { background: var(--green); color: white; }

.sit-intro {
    margin-top: 1rem; padding: 1rem 1.15rem; background: white; border-radius: 6px;
    border-left: 3px solid var(--amber); color: var(--muted); font-size: .95rem; box-shadow: var(--shadow);
    min-height: 5.5rem;
}
.sit-intro strong { color: var(--text); font-weight: 600; display: block; margin-bottom: .2rem; }

.scene { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: var(--shadow); background: #eef3e6; }
.scene .lay { transition: opacity .6s ease, transform .6s ease; }
.scene:not(.is-L) .bg-L, .scene:not(.is-S) .bg-S { opacity: 0; }
.scene:not(.is-G) .fg-G { opacity: 0; transform: translateY(8px); }
.scene:not(.is-B) .fg-B { opacity: 0; transform: translateY(8px); }
.scene .ln { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tierauswahl */
.animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (min-width: 760px) { .animal-grid { grid-template-columns: repeat(8, 1fr); gap: .8rem; } }
.a-tile {
    background: white; border: 1.5px solid transparent; border-radius: 12px;
    padding: .8rem .3rem .7rem; text-align: center; box-shadow: var(--shadow);
    transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.a-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40,60,40,.1); }
.a-tile svg { width: 52px; height: 52px; color: var(--green); }
.a-tile .nm { font-size: .78rem; font-weight: 500; line-height: 1.2; }
.a-tile[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.a-tile[hidden] { display: none; }
.a-tile.more { animation: fadeUp .35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

.hop  { animation: hop .5s ease; }
.buzz { animation: buzz .5s linear; }
.flap { animation: flap .55s ease; }
@keyframes hop  { 30% { transform: translateY(-7px) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes buzz { 20% { transform: translate(2px,-1px); } 40% { transform: translate(-2px,1px); } 60% { transform: translate(2px,1px); } 80% { transform: translate(-1px,-1px); } }
@keyframes flap { 25% { transform: scaleX(.75); } 50% { transform: scaleX(1); } 75% { transform: scaleX(.8); } }

.animal-ctrl { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; align-items: center; }
.animal-ctrl .note { font-size: .85rem; color: var(--muted); }

/* Aufwand */
.effort-box { background: white; border-radius: 8px; padding: 1.25rem 1.25rem 1rem; box-shadow: var(--shadow); max-width: 680px; }
.effort-box input[type=range] { width: 100%; accent-color: var(--green); margin: .4rem 0 .2rem; }
.effort-ticks { display: grid; grid-template-columns: repeat(4, 1fr); font-size: .76rem; color: var(--muted); }
.effort-ticks span { text-align: center; }
.effort-ticks span:first-child { text-align: left; }
.effort-ticks span:last-child { text-align: right; }
.effort-ticks span.on { color: var(--text); font-weight: 600; }
.effort-say { font-family: var(--hand); font-size: 1.35rem; color: var(--green); }

/* Ergebnisse */
.res-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.25rem; }
.res-head h2 { margin-bottom: 0; }
.res-sum { color: var(--muted); font-size: .95rem; }
.res-sum b { color: var(--green); }

.cards { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.m-card {
    background: white; border-radius: 8px; padding: 1.15rem 1.2rem 1rem;
    border-top: 4px solid var(--ec, #ddd); box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: .55rem;
    animation: fadeUp .35s ease both;
}
.m-top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.badge {
    font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    padding: .18rem .5rem; border-radius: 3px; background: color-mix(in srgb, var(--ec) 14%, white); color: color-mix(in srgb, var(--ec) 75%, black);
}
.now { font-family: var(--hand); font-size: 1.05rem; color: var(--amber); display: inline-flex; align-items: center; gap: .2rem; }
.anytime { font-size: .72rem; color: var(--muted); }
.m-card h3 { font-size: 1.08rem; color: var(--text); }
.m-card p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag { font-size: .72rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(61,107,74,.07); color: var(--green); }
.tag.half { background: none; border: 1px dashed rgba(61,107,74,.35); }
.tag.hit { background: var(--green); color: white; border-color: var(--green); }

.m-more { border-top: 1px dashed var(--border); padding-top: .55rem; font-size: .84rem; color: var(--muted); display: none; }
.m-card.open .m-more { display: block; animation: fadeUp .3s ease both; }
.m-more dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; margin-bottom: .5rem; }
.m-more dt { font-weight: 600; color: var(--text); }
.m-card .chain, .ind-list .chain { font-family: var(--hand); font-size: 1.18rem; line-height: 1.3; color: var(--green); }
.chain::before { content: "… und dann: "; color: var(--amber); }

.m-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .3rem; }
.m-toggle { background: none; border: none; color: var(--green); font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.do-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 1.5px solid var(--border); background: white; color: var(--green);
    border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; transition: all .2s;
}
.do-btn svg { width: 15px; height: 15px; }
.do-btn:hover { border-color: var(--green); }
.do-btn[aria-pressed="true"] { background: var(--green); color: white; border-color: var(--green); }
.do-btn[aria-pressed="true"] svg path { fill: currentColor; }
.do-btn.pop { animation: bump .4s ease; }

.empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty .hand { font-size: 1.4rem; color: var(--green); display: block; }

.indirect { margin-top: 2rem; }
.indirect h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.indirect > p { font-size: .88rem; color: var(--muted); margin-bottom: .8rem; }
.ind-list { list-style: none; display: grid; gap: .5rem; }
@media (min-width: 760px) { .ind-list { grid-template-columns: repeat(2, 1fr); } }
.ind-list li { background: white; border-radius: 6px; padding: .7rem .9rem; font-size: .86rem; box-shadow: var(--shadow); }
.ind-list li b { font-weight: 600; }
.ind-list li span { display: block; color: var(--muted); }

/* Gilt überall */
.always { margin-top: 3rem; background: var(--green); color: white; border-radius: 10px; padding: 1.75rem 1.5rem; }
.always h3 { color: white; font-size: 1.3rem; margin-bottom: 1rem; }
.always-grid { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .always-grid { grid-template-columns: repeat(3, 1fr); } }
.always-grid div { display: flex; gap: .8rem; }
.always-grid svg { flex: none; width: 34px; height: 34px; color: #f3dca0; }
.always-grid b { display: block; margin-bottom: .15rem; }
.always-grid p { font-size: .88rem; color: rgba(255,255,255,.82); }

/* ── NACHBARSCHAFT ───────────────────────────────── */
.street-wrap { background: white; border-radius: 10px; box-shadow: var(--shadow); padding: 1rem; margin-top: 1.5rem; }
.street-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.street { width: 100%; min-width: 620px; height: auto; display: block; }
.street .house { cursor: pointer; }
.street .house .body { transition: stroke-width .2s, filter .2s; }
.street .house.sel .body { stroke-width: 2.6; }
.street .house.sel .marker { opacity: 1; }
.street .marker { opacity: 0; transition: opacity .2s; }
.street .el { animation: grow .45s cubic-bezier(.3,1.4,.5,1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes grow { from { transform: scale(0); opacity: 0; } }

.street-ui { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 880px) { .street-ui { grid-template-columns: 1fr 1fr; } }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
    border: 1.5px solid var(--border); background: white; border-radius: 999px;
    padding: .35rem .8rem; font-size: .84rem; color: var(--muted); transition: all .2s;
}
.chip[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.street-ui h4 { font-size: .9rem; margin-bottom: .55rem; color: var(--text); font-weight: 600; }
.street-ui h4 span { color: var(--amber); font-family: var(--hand); font-size: 1.15rem; font-weight: 600; }

.cover { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .75rem; }
.cover span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f0f0ea; color: #b8b9b0; transition: all .35s; }
.cover span svg { width: 26px; height: 26px; }
.cover span.on { background: var(--green-soft); color: var(--green); }
.cover span.half { background: #f6f3e6; color: var(--amber); }
.cover-say { font-size: .95rem; margin-bottom: .6rem; }
.cover-say b { color: var(--green); }
.hints { list-style: none; display: grid; gap: .45rem; }
.hints li { font-size: .88rem; color: var(--muted); padding-left: 1.1rem; position: relative; }
.hints li::before { content: "→"; position: absolute; left: 0; color: var(--amber); }
.hints li.tip { color: var(--text); }

/* ── HEIMAT ──────────────────────────────────────── */
.heimat { background: var(--green-deep); color: rgba(255,255,255,.88); }
.heimat h2, .heimat h3 { color: white; }
.heimat .eyebrow { color: #f3dca0; }
.heimat .lead { color: rgba(255,255,255,.8); }
.heimat-grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 880px) { .heimat-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 1.25rem; }
.panel h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.panel p { font-size: .92rem; color: rgba(255,255,255,.78); }
.panel svg { width: 100%; height: auto; display: block; margin: .75rem 0; }

.seasons { display: flex; gap: .4rem; flex-wrap: wrap; }
.seasons button, .panel .btn-light {
    border: 1.5px solid rgba(255,255,255,.3); background: none; color: white;
    border-radius: 999px; padding: .35rem .9rem; font-size: .84rem; transition: all .2s;
}
.seasons button[aria-pressed="true"] { background: #f3dca0; border-color: #f3dca0; color: var(--green-deep); }
.panel .btn-light:hover { border-color: white; }
.panel .schlehe-say { min-height: 3.2rem; font-family: var(--hand); font-size: 1.3rem; color: #f3dca0; line-height: 1.25; }

#schlehe .node { transition: opacity .5s; opacity: .28; }
#schlehe .node.on { opacity: 1; }
#schlehe .link { stroke: #f3dca0; stroke-width: 1.6; fill: none; stroke-dasharray: 4 5; opacity: 0; transition: opacity .5s; }
#schlehe .link.on { opacity: 1; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
#schlehe .sx { transition: opacity .6s; }

.meadow .plant { transition: transform 1.2s ease, opacity 1.2s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.meadow .plant .hd, .meadow .plant .st { transition: fill 1.2s ease, stroke 1.2s ease; }
.meadow.dry .plant.weak { transform: rotate(14deg) scaleY(.8); }
.meadow.dry .plant.weak .st { stroke: #b49a68; }
.meadow.dry .plant.weak .hd { fill: #c7ae7a; }
.meadow .sky { transition: fill 1.2s; }
.meadow.dry .sky { fill: #f6e3b8; }

.quote { text-align: center; padding: 4rem 1rem 0; max-width: 760px; margin: 0 auto; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.6; color: rgba(255,255,255,.92); }

/* ── WELLE ───────────────────────────────────────── */
.welle-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .welle-grid { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; } }
.how { list-style: none; counter-reset: s; display: grid; gap: .9rem; margin: 1.5rem 0; }
.how li { counter-increment: s; position: relative; padding-left: 2.6rem; }
.how li::before {
    content: counter(s); position: absolute; left: 0; top: -.1rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber);
    display: grid; place-items: center; font-family: var(--hand); font-size: 1.2rem;
}
.how b { display: block; color: var(--text); font-weight: 600; }
.how span { color: var(--muted); font-size: .92rem; }

.calc { background: white; border-radius: 8px; padding: 1.25rem; box-shadow: var(--shadow); }
.calc label { display: flex; justify-content: space-between; font-size: .88rem; color: var(--muted); margin-top: .6rem; }
.calc label b { color: var(--text); }
.calc input[type=range] { width: 100%; accent-color: var(--amber); }
.calc-out { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--border); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.calc-out .per { font-family: var(--serif); font-size: 1.7rem; color: var(--green); }
.calc-out small { color: var(--muted); font-size: .78rem; }
.ph { display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8a6020; background: var(--amber-soft); border-radius: 3px; padding: .1rem .4rem; margin-left: .3rem; vertical-align: middle; }

.map-box { background: white; border-radius: 10px; box-shadow: var(--shadow); padding: 1rem; }
.map-box svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.de { fill: var(--green-soft); stroke: var(--green-mid); stroke-width: 1.2; stroke-linejoin: round; }
.dot { fill: var(--amber); }
.dot.me { fill: var(--green); }
.ring { fill: none; stroke: var(--amber); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: ripple 2.4s ease-out infinite; }
.ring.me { stroke: var(--green); }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.map-ctrl { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; align-items: center; }
.map-ctrl input {
    width: 7.5rem; padding: .55rem .8rem; border: 1.5px solid var(--border); border-radius: 3px; font: inherit; background: var(--white);
}
.map-ctrl input:focus { border-color: var(--green); outline: none; }
.map-say { font-size: .86rem; color: var(--muted); margin-top: .6rem; min-height: 2.6rem; }
.map-say b { color: var(--green); }

/* ── PULS ────────────────────────────────────────── */
.puls-grid { display: grid; gap: 1rem; margin: 2rem 0; }
@media (min-width: 760px) { .puls-grid { grid-template-columns: repeat(3, 1fr); } }
.puls-card { background: white; border-radius: 8px; padding: 1.2rem; box-shadow: var(--shadow); }
.puls-card svg { width: 100%; height: 70px; display: block; margin-bottom: .6rem; }
.puls-card b { font-family: var(--serif); color: var(--green); font-size: 1.1rem; font-weight: 600; }
.puls-card p { font-size: .88rem; color: var(--muted); }
.puls-card .w { fill: none; stroke: var(--green-mid); stroke-width: 1.6; stroke-linecap: round; }
.later { list-style: none; display: grid; gap: .5rem; }
.later li { color: var(--muted); padding-left: 1.2rem; position: relative; }
.later li::before { content: "·"; position: absolute; left: .3rem; color: var(--amber); font-weight: 700; }

/* ── FOOTER ──────────────────────────────────────── */
footer { background: #16261c; color: rgba(255,255,255,.5); padding: 1.75rem 0; font-size: .84rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
footer a { color: rgba(255,255,255,.55); text-decoration: none; margin-left: 1.2rem; }
footer a:first-child { margin-left: 0; }
footer a:hover { color: white; }
.draft-note { width: 100%; font-size: .74rem; color: rgba(255,255,255,.35); }

/* ── MEIN PLAN ───────────────────────────────────── */
.plan {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
    width: min(380px, calc(100vw - 2rem)); max-height: min(70vh, 560px);
    background: var(--white); border-radius: 12px; box-shadow: 0 20px 60px rgba(30,50,30,.25);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(calc(100% + 2rem)); transition: transform .4s cubic-bezier(.3,.8,.3,1);
}
.plan.open { transform: none; }
.plan-head { padding: 1rem 1.2rem .6rem; display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--border); }
.plan-head h3 { font-size: 1.2rem; }
.plan-head p { font-size: .82rem; color: var(--muted); }
.plan-x { border: none; background: none; font-size: 1.4rem; line-height: 1; color: var(--muted); padding: .2rem .4rem; }
.plan-body { overflow-y: auto; flex: 1; padding: .2rem 1.2rem .9rem; }
.plan-list { list-style: none; }
.plan-item { display: flex; gap: .6rem; align-items: start; padding: .55rem 0; border-bottom: 1px dashed var(--border); font-size: .88rem; }
.plan-item > i { flex: none; width: .6rem; height: .6rem; border-radius: 50%; margin-top: .45rem; background: var(--ec); }
.plan-item > div { flex: 1; }
.plan-item small { display: block; color: var(--muted); font-size: .76rem; }
.plan-item > button { border: none; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; }
.plan-group { font-family: var(--hand); color: var(--amber); font-size: 1.2rem; padding-top: .7rem; line-height: 1.1; }
.plan-empty { color: var(--muted); font-size: .88rem; padding: 1rem 0; }
.plan-hints h4 { font-size: .82rem; font-weight: 600; margin: 1.1rem 0 .45rem; }
.plan-hints ul { list-style: none; display: grid; gap: .5rem; }
.plan-hints li { font-size: .84rem; color: var(--muted); background: var(--paper); border-radius: 6px; padding: .6rem .75rem; line-height: 1.5; }
.plan-hints li.good { background: var(--green-soft); color: var(--green-deep); }
.plan-hints a { color: var(--green); }
.hint-add {
    display: inline-block; margin-top: .45rem; border: 1.5px solid var(--border); background: white; color: var(--green);
    border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; transition: border-color .2s;
}
.hint-add:hover { border-color: var(--green); }
.plan-foot { padding: .8rem 1.2rem 1rem; display: flex; gap: .5rem; flex-wrap: wrap; border-top: 1px solid var(--border); }

.toast {
    position: fixed; left: 50%; bottom: 1.25rem; z-index: 70; transform: translate(-50%, 150%);
    background: var(--green-deep); color: white; border-radius: 999px; padding: .55rem 1.1rem; font-size: .86rem;
    transition: transform .35s ease, opacity .35s ease; pointer-events: none; opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ── GERADE DRAN (Karte als Lesezeichen) ───────────── */
.now-strip { background: var(--paper); border-top: 1px dashed rgba(61,107,74,.25); padding: 1.75rem 0; }
.now-in { display: flex; gap: 1.25rem; align-items: center; }
.now-pin { position: relative; flex: none; width: 92px; transform: rotate(-4deg); }
.now-pin img { width: 100%; display: block; border-radius: 3px; box-shadow: 0 4px 14px rgba(50,70,40,.18); }
.now-pin i { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--amber); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
@media (min-width: 760px) { .now-pin { width: 130px; } .now-in { gap: 2rem; } }
.now-title { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .25rem; }
.now-lead { color: var(--muted); font-size: .92rem; max-width: 620px; margin-bottom: .7rem; }
.now-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.now-chip {
    border: 1.5px solid var(--border); background: white; color: var(--green); border-radius: 999px;
    padding: .38rem .9rem; font-size: .86rem; transition: border-color .2s, background .2s;
}
.now-chip:hover { border-color: var(--green); background: var(--green-soft); }
.now-more { font-size: .84rem; color: var(--green); margin-left: .3rem; }
.m-card.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--amber); } 100% { box-shadow: var(--shadow); } }
.more-link { text-align: center; margin-top: 1.5rem; }
.more-link a { color: #f3dca0; font-size: .95rem; }

/* Jahresleiste und „Gut zu wissen“ */
.yr { display: block; max-width: 230px; margin: .1rem 0 .55rem; }
.yr-c, .yr-l { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.yr-c i { height: 7px; border-radius: 2px; background: #ebe7da; }
.yr-c i.on { background: var(--ec); }
.yr.any .yr-c i.on { opacity: .4; }
.yr-c i.now { box-shadow: 0 0 0 1.5px var(--text); }
.yr-l { font-size: .6rem; color: var(--muted); text-align: center; margin-top: 2px; }
.yr.mini { max-width: 110px; margin: .35rem 0 0; }
.yr.mini .yr-c i { height: 5px; }
.m-more .tip { color: var(--text); background: var(--amber-soft); border-radius: 4px; padding: .5rem .65rem; margin: 0 0 .6rem; font-size: .84rem; }
.m-more .tip b { font-weight: 600; }
.chain a, .ind-list a { color: inherit; }
.calc-note { font-family: var(--hand); font-size: 1.2rem; color: var(--green); line-height: 1.25; margin-top: .6rem; min-height: 1.5rem; }
.calc-src { display: block; color: var(--muted); font-size: .74rem; line-height: 1.5; margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ── UNTERSEITE „DIE IDEE“ ──────────────────────────── */
a.plan-pill { text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--green); font-weight: 500; }
.idee-hero { padding: 3.5rem 0 3rem; }
.idee-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 1rem; max-width: 760px; }
.page-idee .lead { max-width: 680px; margin-bottom: 1rem; line-height: 1.75; }
.ask { font-family: var(--hand); font-size: 1.45rem; color: var(--amber); line-height: 1.3; margin-top: .5rem; }
.heimat .ask { color: #f3dca0; }

.path { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; counter-reset: p; }
@media (min-width: 900px) { .path { grid-template-columns: repeat(5, 1fr); } }
.path li { position: relative; background: var(--paper); border-radius: 8px; padding: 1rem 1rem 1.1rem; }
.path svg { width: 42px; height: 42px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .4rem; }
.path b { display: block; color: var(--text); font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.path span { color: var(--muted); font-size: .88rem; }
@media (min-width: 900px) {
    .path li:not(:last-child)::after { content: "→"; position: absolute; right: -.85rem; top: 1.6rem; color: var(--amber); }
}

.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; } }
.wall {
    position: relative; min-height: 300px; border-radius: 10px; box-shadow: var(--shadow);
    background-color: #f3efe4;
    background-image: linear-gradient(rgba(61,107,74,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(61,107,74,.08) 1px, transparent 1px);
    background-size: 46px 46px;
}
.wall-card { position: absolute; left: 10%; top: 14%; width: 58%; transform: rotate(-3deg); }
.wall-card img { width: 100%; display: block; border-radius: 3px; box-shadow: 0 8px 22px rgba(50,70,40,.2); }
.wall-card i { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--amber); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.wall-note {
    position: absolute; right: 8%; bottom: 10%; width: 40%; padding: .8rem .9rem; transform: rotate(4deg);
    background: #fbefb7; box-shadow: 0 6px 14px rgba(50,70,40,.15);
    font-family: var(--hand); font-size: 1.25rem; line-height: 1.2; color: #5a4a1a;
}

.composer { margin-top: 2rem; background: var(--paper); border-radius: 10px; padding: 1.4rem; max-width: 820px; }
.composer h3 { font-size: 1.25rem; margin-bottom: .2rem; }
.composer > p:not(.sentence):not(.reflect) { color: var(--muted); font-size: .9rem; margin-bottom: .8rem; }
.own { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.own input { flex: 1; min-width: 200px; padding: .5rem .8rem; border: 1.5px solid var(--border); border-radius: 999px; font: inherit; font-size: .9rem; background: white; }
.own input:focus { border-color: var(--green); outline: none; }
.sentence { font-family: var(--hand); font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.3; color: var(--green); margin: 1.2rem 0 .4rem; min-height: 2.6rem; }
.reflect { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--text); max-width: 680px; min-height: 1.5rem; margin-bottom: .6rem; }

.tiles-q { font-size: 1.15rem; margin: 2rem 0 .8rem; }
.tiles-q span { font-family: var(--hand); color: var(--amber); font-size: 1.15rem; font-weight: 600; margin-left: .4rem; }
.tiles { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile {
    position: relative; min-height: 170px; border: none; border-radius: 10px; background: white; box-shadow: var(--shadow);
    padding: 1rem; text-align: left; transition: background .3s, transform .2s;
}
.tile:hover { transform: translateY(-2px); }
.tile-f, .tile-b { display: block; transition: opacity .35s; }
.tile-f b { display: block; font-family: var(--serif); font-size: 1.15rem; color: var(--green); }
.tile-f span { font-family: var(--hand); color: var(--amber); font-size: 1.2rem; }
.tile-b { position: absolute; inset: 1rem; opacity: 0; font-size: .86rem; color: var(--text); line-height: 1.5; }
.tile[aria-pressed="true"] { background: var(--green-soft); }
.tile[aria-pressed="true"] .tile-f { opacity: 0; }
.tile[aria-pressed="true"] .tile-b { opacity: 1; }

.facts { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts a { color: #f3dca0; }

.repeat { display: flex; gap: .8rem; margin-top: 1.8rem; overflow-x: auto; padding: .5rem .2rem 1rem; }
.repeat figure { flex: 0 0 150px; }
.repeat img { width: 100%; display: block; border-radius: 3px; box-shadow: 0 4px 12px rgba(50,70,40,.15); }
.repeat figure:nth-child(odd) img { transform: rotate(-2deg); }
.repeat figure:nth-child(even) img { transform: rotate(2deg); }
.repeat figcaption { font-family: var(--hand); color: var(--amber); font-size: 1.15rem; text-align: center; margin-top: .4rem; }

.nots { list-style: none; display: grid; gap: .8rem; max-width: 760px; margin-top: 1rem; }
.nots li { padding-left: 1.6rem; position: relative; color: var(--muted); }
.nots li::before { content: "○"; position: absolute; left: 0; color: var(--amber); }
.nots b { color: var(--text); font-weight: 600; }