/* Skinpaired – Design v3: hell, weich, rund, Dunkelgrün als Leitfarbe.
   Serifen für Überschriften, Systemschriften, keine externen Dienste. Stand 11.11.2026 */
:root {
  --bg: #ffffff;
  --gruen: #1f3d33;
  --gruen-2: #2d5546;
  --gruen-3: #5f8474;
  --mint: #e8f0eb;
  --mint-2: #f3f7f4;
  --creme: #f7f5ef;
  --ink: #17221d;
  --ink-2: #3b4943;
  --muted: #6e7b75;
  --line: #e1e7e3;
  --line-2: #c9d5ce;
  --gold: #b9965b;
  --akzent: #2a7353;
  --akzent-dunkel: #215c42;
  --akzent-hell: #d6ecdf;
  --akzent-leucht: #9fd3b6;
  --warn: #f6efe2;
  --r-s: 10px;
  --r: 16px;
  --r-l: 26px;
  --schatten: 0 1px 2px rgba(23, 34, 29, .04), 0 8px 28px rgba(31, 61, 51, .07);
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --breite: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--gruen); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gruen-3); outline-offset: 3px; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .wrap { padding: 0 18px; } }
.hidden { display: none !important; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; padding: 8px 12px; z-index: 10; border-radius: var(--r-s); }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--serif); color: var(--gruen); margin: 0; font-weight: 500; letter-spacing: -.005em; }
h1 { font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; margin: 14px 0 20px; }
h1 em, h2 em { font-style: italic; color: var(--gruen-3); }
h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; margin-bottom: 12px; }
h3 { font-size: 19px; line-height: 1.25; margin-bottom: 6px; }
p { margin: 0 0 12px; }
.label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gruen-3); margin: 0; }
.lead { font-size: 17.5px; color: var(--ink-2); max-width: 34em; }
.m { color: var(--muted); font-size: 13.5px; }
.zentriert { text-align: center; }
.zentriert .lead { margin-left: auto; margin-right: auto; }

/* ---------- Kopf ---------- */
.leiste { background: var(--gruen); color: #e6efe9; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px 12px; }
header.top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--gruen); text-decoration: none; line-height: 1; }
.logo .marke { width: 34px; height: 34px; flex: none; }
.logo span { display: flex; flex-direction: column; }
.logo b { font-family: var(--serif); font-weight: 500; font-size: 23px; letter-spacing: .01em; }
.logo small { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
nav.haupt { display: flex; gap: 6px; font-size: 13px; }
nav.haupt a { text-decoration: none; color: var(--ink-2); padding: 7px 14px; border-radius: 999px; }
nav.haupt a:hover { background: var(--mint-2); color: var(--gruen); }
nav.haupt a[aria-current] { background: var(--mint); color: var(--gruen); font-weight: 600; }
@media (max-width: 900px) { nav.haupt { display: none; } }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--gruen); background: var(--gruen); color: #fff; border-radius: 999px; padding: 14px 26px; font: 600 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--gruen-2); color: #fff; box-shadow: 0 6px 18px rgba(31, 61, 51, .22); transform: translateY(-1px); }
.btn-hell { background: #fff; color: var(--gruen); border-color: var(--line-2); }
.btn-hell:hover { background: var(--mint-2); color: var(--gruen); box-shadow: none; }
.btn-klein { padding: 10px 18px; font-size: 13px; }
.btn[disabled] { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding: 26px 0 10px; }
.hero-karte { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--mint) 0%, var(--mint-2) 55%, var(--creme) 100%); border-radius: var(--r-l); padding: 56px 56px 48px; }
.hero-karte::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); pointer-events: none; }
.hero-text { position: relative; z-index: 1; }
.hero .knopfzeile { margin-top: 26px; }
.hero-bild { position: relative; z-index: 1; display: flex; justify-content: center; }
.hero-bild svg { width: 100%; max-width: 360px; height: auto; }
@media (max-width: 860px) {
  .hero-karte { grid-template-columns: 1fr; padding: 36px 24px 30px; text-align: center; }
  .hero-karte .lead { margin-left: auto; margin-right: auto; }
  .hero .knopfzeile { justify-content: center; }
  .hero-bild { order: -1; } .hero-bild svg { max-width: 230px; }
}
.punkte { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.punkte li { background: rgba(255,255,255,.7); border-radius: 999px; padding: 5px 12px; }
.punkte li::before { content: "✓ "; color: var(--gruen); font-weight: 700; }
@media (max-width: 860px) { .punkte { justify-content: center; } }
.einstiege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px auto 0; max-width: 940px; background: var(--mint-2); border-radius: var(--r); padding: 6px; }
.einstiege a { padding: 12px 10px; text-decoration: none; text-align: center; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--gruen); transition: background .15s; }
.einstiege a small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.einstiege a:hover { background: #fff; }
.einstiege a[aria-current] { background: var(--gruen); color: #fff; box-shadow: 0 4px 14px rgba(31, 61, 51, .25); }
.einstiege a[aria-current] small { color: #c7d8cf; }
@media (max-width: 700px) { .einstiege { grid-template-columns: 1fr 1fr; } }

/* ---------- Konfigurator ---------- */
.finder { max-width: 800px; margin: 34px auto 80px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--schatten); overflow: hidden; scroll-margin-top: 84px; }
.finder-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px; background: var(--gruen); color: #fff; gap: 12px; }
.finder-kopf b { font-family: var(--serif); font-weight: 500; font-size: 18px; }
.finder-kopf .m { color: #c7d8cf; }
.person-chip { display: inline-block; background: var(--gruen); color: #fff; font-size: 11px; letter-spacing: .08em; padding: 3px 10px; margin-right: 8px; border-radius: 999px; }
.fortschritt { height: 5px; background: var(--mint); }
.fortschritt span { display: block; height: 100%; background: linear-gradient(90deg, var(--gruen-3), var(--gruen)); width: 0; transition: width .3s ease; border-radius: 0 999px 999px 0; }
.frage { padding: 30px 28px 26px; }
.frage .block { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-3); font-weight: 600; margin-bottom: 8px; }
.frage h3 { font-size: 25px; line-height: 1.25; }
.frage .m { margin: 6px 0 20px; }
.optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.opt { position: relative; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 40px 14px 16px; font: 15px/1.35 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.opt:hover { border-color: var(--gruen-3); background: var(--mint-2); }
.opt:active { transform: scale(.99); }
.opt[aria-pressed="true"] { border-color: var(--gruen); background: var(--mint); }
.opt[aria-pressed="true"]::after { content: "✓"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; line-height: 22px; text-align: center; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.felder input, .mail input[type=email] { width: 100%; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 15px; font: 15px var(--sans); background: #fff; }
.felder input:focus, .mail input[type=email]:focus { border-color: var(--gruen); outline: none; }
@media (max-width: 520px) { .felder { grid-template-columns: 1fr; } .frage { padding: 24px 18px 22px; } }
.frage-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 10px; }
.zurueck { background: none; border: 0; color: var(--muted); font: 13px var(--sans); cursor: pointer; padding: 6px 0; }
.zurueck:hover { color: var(--gruen); }

/* ---------- Ergebnis ---------- */
.ergebnis { padding: 34px 0 80px; scroll-margin-top: 74px; }
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; padding: 30px 32px; border-radius: var(--r-l); background: var(--gruen); color: #e6efe9; margin-bottom: 22px; }
.ergebnis-kopf h2 { color: #fff; margin-top: 6px; }
.ergebnis-kopf .label, .ergebnis-kopf .m { color: #b9cfc3; }
.ergebnis-kopf .btn-hell { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.ergebnis-kopf .btn-hell:hover { background: rgba(255,255,255,.2); }
.etikett { border: 1px solid var(--line); background: #fff; border-radius: var(--r); box-shadow: var(--schatten); overflow: hidden; }
.etikett > .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--mint-2); }
.etikett > .kopf h3 { margin: 0; }
.etikett > .inhalt { padding: 8px 22px 18px; }
.etikett.gruen { background: var(--mint); border-color: var(--mint); box-shadow: none; }
.etikett.gruen > .kopf { background: transparent; border-bottom-color: rgba(31, 61, 51, .12); }
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .spalten { grid-template-columns: 1fr; } }
.schritt { display: grid; grid-template-columns: 50px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.schritt:first-child { border-top: 0; }
.nr { width: 46px; height: 46px; border-radius: 50%; background: var(--gruen); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-size: 15px; line-height: 1; }
.nr small { font-family: var(--sans); font-size: 8.5px; letter-spacing: .14em; opacity: .75; margin-bottom: 3px; }
.schritt .art { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-3); font-weight: 600; }
.schritt .name { font-weight: 650; margin: 3px 0 4px; font-size: 16px; }
.schritt .name small { font-weight: 400; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0; padding: 0; list-style: none; }
.chips li { background: var(--mint-2); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--ink-2); }
.chips li.stufe { background: #fff; border: 1px solid var(--line-2); font-weight: 600; color: var(--gruen); }
.chips li.geteilt { background: var(--gruen); color: #fff; }
.grund { font-size: 14px; color: var(--ink-2); margin: 4px 0; }
.alt { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.block2 { margin-top: 20px; }

.abgestimmt { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 22px; }
.abgestimmt li { position: relative; padding-left: 30px; font-size: 14.5px; color: var(--ink-2); }
.abgestimmt li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.bestand { list-style: none; margin: 0; padding: 0; }
.bestand li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.bestand li:first-child { border-top: 0; }
.status { justify-self: start; height: fit-content; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status.passt { background: var(--mint); color: var(--gruen); }
.status.wechsel { background: #e9eef8; color: #2f4a7a; }
.status.doppelt { background: var(--warn); color: #7a5a1e; }
.status.pause { background: #f1eeee; color: #6b5353; }
@media (max-width: 520px) { .bestand li { grid-template-columns: 1fr; gap: 6px; } }
.woche { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.woche li { border-radius: 14px; padding: 12px 6px; text-align: center; background: var(--mint-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.woche li b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--gruen); margin-bottom: 4px; }
.woche li.art-R { background: var(--gruen); color: #d9e7df; } .woche li.art-R b { color: #fff; }
.woche li.art-S { background: var(--gruen-3); color: #eef4f0; } .woche li.art-S b { color: #fff; }
.woche li.art-M { background: var(--creme); border: 1px solid #ece4d2; }
@media (max-width: 620px) { .woche { grid-template-columns: repeat(4, 1fr); } }

.profil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 34px; padding: 14px 0 4px; }
@media (max-width: 620px) { .profil { grid-template-columns: 1fr; } }
.achse .titel { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gruen); }
.achse .skala { position: relative; height: 8px; border-radius: 999px; margin: 9px 0 5px; background: linear-gradient(90deg, var(--mint), var(--gruen-3)); }
.achse .skala i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--gruen); transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.achse .enden { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.typ-zeile { font-size: 14.5px; margin: 12px 0 0; }

.plan { list-style: none; margin: 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; }
.plan li + li { margin-top: 2px; }
.plan li b { font-size: 12px; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.plan li.jetzt { background: var(--mint); }
.plan li.jetzt b { color: var(--gruen); }
.hinweise { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.hinweise li { margin: 6px 0; }
.hinweise li::marker { color: var(--gruen-3); }
.einkauf { width: 100%; border-collapse: collapse; font-size: 14px; }
.einkauf td, .einkauf th { text-align: left; padding: 10px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.einkauf th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-top: 0; }
details.person-plan { border-top: 1px solid var(--line); padding: 10px 0; }
details.person-plan summary { cursor: pointer; font-weight: 600; color: var(--gruen); }

.mail { background: var(--mint-2); }
.mail form { display: grid; gap: 12px; max-width: 560px; }
.mail label.ok { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.mail label.ok input { margin-top: 3px; accent-color: var(--gruen); }
.honig { position: absolute; left: -5000px; }
.meldung { font-size: 14.5px; margin: 0; }
.meldung.fehler { color: #9b2f1a; }
.fusszeile-ergebnis { margin-top: 22px; }

/* ---------- Abschnitte ---------- */
section.abschnitt { padding: 80px 0; }
section.papier { background: var(--mint-2); }
section.dunkel { background: var(--gruen); color: #d9e7df; }
section.dunkel h2, section.dunkel h3 { color: #fff; }
section.dunkel .label { color: #a9c6b7; }
section.dunkel .lead { color: #d9e7df; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; text-align: left; }
.raster > div { border-radius: var(--r); padding: 26px 24px; background: #fff; border: 1px solid var(--line); }
section.dunkel .raster > div { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
section.dunkel .raster p { color: #c9dbd1; }
section.dunkel a { color: #fff; }
.raster .zahl { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mint); color: var(--gruen); font-family: var(--serif); font-size: 16px; margin-bottom: 14px; }
.raster p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.typen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; text-align: left; }
.typen > div { border-radius: var(--r-l); padding: 28px 26px; background: #fff; border: 1px solid var(--line); box-shadow: var(--schatten); }
.typen > div.mitte { background: var(--gruen); border-color: var(--gruen); color: #d9e7df; }
.typen > div.mitte h3 { color: #fff; } .typen > div.mitte .menge { color: #a9c6b7; }
.typen .menge { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gruen-3); display: block; margin-bottom: 8px; }
.typen .flaschen { display: flex; gap: 5px; align-items: flex-end; height: 44px; margin-bottom: 16px; }
.typen .flaschen i { display: block; width: 13px; border-radius: 6px 6px 4px 4px; background: var(--gruen-3); }
.typen > div.mitte .flaschen i { background: #a9c6b7; }
.typen p { font-size: 14.5px; margin: 0; }
@media (max-width: 820px) { .typen { grid-template-columns: 1fr; } }
.wirkstoffe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; padding: 0; list-style: none; }
.wirkstoffe li { border-radius: 999px; padding: 6px 15px; font-size: 13px; background: #fff; color: var(--gruen); border: 1px solid var(--line-2); }

/* ---------- Textseiten ---------- */
main.seite { padding: 56px 0 80px; }
.prosa { max-width: 720px; }
.prosa h1 { font-size: clamp(32px, 4.4vw, 48px); }
.prosa h2 { font-size: 24px; margin-top: 34px; }
.prosa li { margin: 4px 0; }
.kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gruen-3); }

/* ---------- Fuß ---------- */
footer { background: var(--gruen); color: #a9c6b7; padding: 34px 0 40px; font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: #e6efe9; }
footer p { flex-basis: 100%; margin: 8px 0 0; color: #8fb09f; }

@media print {
  .leiste, header.top, footer, .finder, .mail, .knopfzeile, section.abschnitt, .hero { display: none !important; }
  .etikett { break-inside: avoid; box-shadow: none; }
  .ergebnis-kopf { background: none; color: var(--ink); padding: 0; }
  .ergebnis-kopf h2 { color: var(--gruen); }
}
.typen .flaschen i:nth-child(7n+1) { height: 30px; } .typen .flaschen i:nth-child(7n+2) { height: 40px; } .typen .flaschen i:nth-child(7n+3) { height: 24px; }
.typen .flaschen i:nth-child(7n+4) { height: 34px; } .typen .flaschen i:nth-child(7n+5) { height: 20px; } .typen .flaschen i:nth-child(7n+6) { height: 42px; } .typen .flaschen i:nth-child(7n+7) { height: 28px; }
.btn { white-space: nowrap; }
@media (max-width: 520px) {
  .leiste { font-size: 10px; letter-spacing: .08em; padding: 7px 10px; }
  .logo small { display: none; }
  header.top .btn-klein { padding: 9px 14px; font-size: 12.5px; }
  .hero-bild svg { max-width: 190px; }
  h1 { font-size: 36px; }
}
section.dunkel h1 em, section.dunkel h2 em { color: #a9c6b7; }

/* =========================================================
   Handy zuerst: Einkauf, Tabs, Bottom-Sheet, App-Gefühl (v3.1)
   ========================================================= */
.frage.rein { animation: rein .28s ease-out; }
@keyframes rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .frage.rein, .sheet[open], .kaufleiste, .mobil-cta { animation: none !important; transition: none !important; } }

/* Kaufen-Knopf am Produkt */
.kauf { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; min-height: 46px; padding: 0 18px 0 20px; border-radius: 999px; background: var(--gruen); color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: background .15s, transform .1s; }
.kauf b { font-size: 22px; line-height: 1; font-weight: 400; }
.kauf:hover { background: var(--gruen-2); color: #fff; }
.kauf:active { transform: scale(.98); }
.kauf.klein { min-height: 40px; margin: 0; padding: 0 14px 0 16px; font-size: 13.5px; gap: 10px; white-space: nowrap; }
.anzeige { display: inline-block; margin-left: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; vertical-align: middle; }

/* Morgens/Abends: Tabs nur am Handy */
.tabs { display: none; }
@media (max-width: 820px) {
  .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--mint); border-radius: 999px; position: sticky; top: 70px; z-index: 3; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(31, 61, 51, .08); }
  .tabs button { border: 0; background: transparent; border-radius: 999px; min-height: 44px; font: 600 15px var(--sans); color: var(--gruen); cursor: pointer; }
  .tabs button small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(31, 61, 51, .1); font-size: 12px; margin-left: 4px; }
  .tabs button[aria-selected="true"] { background: var(--gruen); color: #fff; }
  .tabs button[aria-selected="true"] small { background: rgba(255,255,255,.2); }
  .tabinhalt[data-zeige="m"] .spalte-a, .tabinhalt[data-zeige="a"] .spalte-m { display: none; }
  .tabinhalt .etikett > .kopf { display: none; }
}

/* Klappbare Etiketten */
details.klapp > summary { cursor: pointer; list-style: none; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary .label::after { content: "＋"; margin-left: 10px; font-size: 14px; color: var(--gruen); }
details.klapp[open] > summary .label::after { content: "−"; }
details.klapp:not([open]) > summary { border-bottom: 0; }

/* Einkaufsleiste unten */
.kaufleiste { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(31, 61, 51, .97); color: #fff; box-shadow: 0 12px 34px rgba(17, 34, 28, .35); animation: hoch .35s ease-out; }
.kaufleiste div { display: flex; flex-direction: column; line-height: 1.2; }
.kaufleiste b { font-size: 15px; }
.kaufleiste span { font-size: 12.5px; color: #b9cfc3; }
.kaufleiste .btn { background: #fff; color: var(--gruen); border-color: #fff; padding: 13px 20px; }
.kaufleiste .btn:hover { background: var(--mint); }
@media (min-width: 821px) { .kaufleiste { left: auto; right: 24px; bottom: 24px; min-width: 380px; } }
@keyframes hoch { from { transform: translateY(120%); } to { transform: none; } }
body.hat-ergebnis footer { padding-bottom: 110px; }
.ergebnis { padding-bottom: 120px; }

/* Bottom-Sheet Einkaufsliste */
.sheet { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; max-height: 88vh; inset: auto 0 0 0; border-radius: 26px 26px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
.sheet[open] { display: flex; flex-direction: column; animation: hoch .3s ease-out; }
.sheet::backdrop { background: rgba(17, 34, 28, .45); }
.sheet-griff { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 10px auto 0; }
.sheet-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line); }
.sheet-kopf h3 { font-size: 21px; margin-top: 4px; }
.sheet-zu { border: 0; background: var(--mint-2); width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--gruen); cursor: pointer; flex: none; }
.sheet-inhalt { overflow-y: auto; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.shopgruppe { padding: 14px 0 6px; }
.shopgruppe + .shopgruppe { border-top: 1px solid var(--line); }
.einkauf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.einkauf-zeile b { display: block; font-size: 14.5px; line-height: 1.3; }
.einkauf-zeile .m { font-size: 12.5px; }
@media (min-width: 821px) { .sheet { max-width: 560px; inset: 0; margin: auto; border-radius: 26px; max-height: 80vh; } }

/* Startknopf unten am Handy */
.mobil-cta { display: none; }
@media (max-width: 760px) {
  .mobil-cta { display: flex; position: fixed; z-index: 15; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: center; align-items: center; gap: 6px; min-height: 54px; border-radius: 999px; background: var(--gruen); color: #fff; text-decoration: none; font-weight: 600; font-size: 15.5px; box-shadow: 0 10px 28px rgba(17, 34, 28, .32); transform: translateY(160%); transition: transform .3s ease; }
  .mobil-cta small { font-weight: 400; color: #b9cfc3; font-size: 13px; }
  .mobil-cta.an { transform: none; }
}

/* Konfigurator wie eine App */
@media (max-width: 760px) {
  .hero { padding-top: 12px; }
  .hero-karte { padding: 26px 20px 24px; border-radius: 22px; }
  .hero .lead { font-size: 16px; }
  .hero .knopfzeile .btn-hell { display: none; }
  .hero .knopfzeile .btn { width: 100%; min-height: 54px; font-size: 16px; }
  .punkte { margin-top: 16px; }
  .einstiege { margin-top: 12px; }
  .einstiege a { padding: 10px 6px; font-size: 13.5px; }
  .finder { margin: 18px -6px 40px; border-radius: 22px; scroll-margin-top: 70px; }
  .finder-kopf { padding: 13px 18px; }
  .fortschritt { height: 6px; }
  .frage { padding: 22px 16px 18px; min-height: 58vh; display: flex; flex-direction: column; }
  .frage h3 { font-size: 23px; }
  .frage .m { margin-bottom: 16px; }
  .optionen { grid-template-columns: 1fr; gap: 9px; }
  .opt { min-height: 58px; padding: 15px 46px 15px 18px; font-size: 16px; border-radius: 16px; }
  .frage-fuss { margin-top: auto; padding-top: 18px; position: sticky; bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff 30%); }
  .frage-fuss .weiter { flex: 1; min-height: 52px; font-size: 15.5px; margin-left: 14px; }
  .ergebnis { padding-top: 14px; }
  .ergebnis-kopf { padding: 22px 20px; border-radius: 22px; }
  .ergebnis-kopf h2 { font-size: 24px; }
  .etikett > .inhalt { padding: 6px 16px 14px; }
  .etikett > .kopf { padding: 13px 16px; }
  .schritt { grid-template-columns: 44px 1fr; gap: 12px; }
  .nr { width: 42px; height: 42px; font-size: 14px; }
  .kauf { width: 100%; }
  .alt { display: none; }
  section.abschnitt { padding: 56px 0; }
}
@media (max-width: 760px) {
  body.hat-ergebnis .hero, body.hat-ergebnis .leiste { display: none; }
  .frage { min-height: 0; }
}

/* Handy: nichts darf seitlich überstehen, kein Zoom beim Tippen (v3.2) */
html, body { overflow-x: clip; max-width: 100%; }
input, select, textarea { font-size: 16px !important; }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .finder { margin: 18px 0 40px; }
  .kaufleiste { left: 10px; right: 10px; }
  .kaufleiste .btn { padding: 13px 16px; }
}

/* Sprachwechsel im Kopf */
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
.sprache { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--gruen); text-decoration: none; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.sprache:hover { background: var(--mint-2); }

/* =========================================================
   Wissen: Übersicht, Glossar, Studien (gleicher Stil)
   ========================================================= */
.wissen-hero { grid-template-columns: 1fr; padding: 52px 56px 46px; }
.wkarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.wkarte { display: block; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 20px; box-shadow: var(--schatten); transition: transform .15s, border-color .15s; }
.wkarte:hover { transform: translateY(-2px); border-color: var(--gruen-3); }
.wkarte .zahl { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gruen); color: #fff; font-family: var(--serif); margin-bottom: 12px; }
.wkarte p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
@media (max-width: 760px) { .wkarten { grid-template-columns: 1fr; } .wissen-hero { padding: 28px 20px; } }
.reihe { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reihe li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; background: var(--mint-2); border-radius: var(--r); padding: 18px; }
.reihe h3 { margin: 2px 0 4px; } .reihe p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .reihe { grid-template-columns: 1fr; } }
.tabelle-wrap { overflow-x: auto; margin-top: 22px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.kombi { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.kombi th, .kombi td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.kombi thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); background: var(--mint-2); }
.kombi tbody th { text-align: left; color: var(--gruen); font-weight: 600; }
.kombi .k-ok { color: var(--gruen); } .kombi .k-trennen { color: #7a5a1e; background: var(--warn); } .kombi .k-nie { color: #6b2f2f; background: #f6eaea; font-weight: 600; }
.schmal { max-width: 780px; }
details.faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
details.faq summary { cursor: pointer; font-family: var(--serif); font-size: 19px; color: var(--gruen); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "＋"; font-family: var(--sans); font-size: 16px; }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: 10px 0 0; color: var(--ink-2); }
.brot { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.brot a { color: var(--muted); }
.seitenkopf { background: linear-gradient(135deg, var(--mint) 0%, var(--mint-2) 60%, var(--creme) 100%); border-radius: var(--r-l); padding: 40px 44px 30px; margin-bottom: 30px; }
@media (max-width: 760px) { .seitenkopf { padding: 26px 20px 22px; } }
.abc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.abc a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--gruen); text-decoration: none; font-weight: 600; font-size: 14px; }
.abc a:hover { background: var(--gruen); color: #fff; }
.glossar-wrap { max-width: 860px; }
.buchstabe { font-size: 34px; margin: 34px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--mint); scroll-margin-top: 80px; }
dl.glossar { margin: 0; }
dl.glossar dt { margin-top: 18px; scroll-margin-top: 80px; }
dl.glossar dfn { font-style: normal; font-family: var(--serif); font-size: 21px; color: var(--gruen); }
dl.glossar dd { margin: 6px 0 0; color: var(--ink-2); }
dl.glossar dd p { margin: 0 0 6px; }
dl.glossar dt:target dfn { background: var(--mint); border-radius: 6px; padding: 0 6px; }
.studien { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 860px) { .studien { grid-template-columns: 1fr; } }
.studie { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px 24px 18px; box-shadow: var(--schatten); scroll-margin-top: 80px; }
.studie h2 { font-size: 20px; line-height: 1.3; margin: 6px 0 4px; }
.studie dl { margin: 14px 0 0; }
.studie dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gruen-3); margin-top: 12px; }
.studie dd { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.studie .quelle { font-weight: 600; font-size: 14px; }
.studie.recht { background: var(--mint); border-color: var(--mint); box-shadow: none; }
.studien-nav a { min-width: 0; font-size: 13px; }

/* =========================================================
   Navigation v3.3: Menü (Handy), Unter-Reiter, Überleitung
   ========================================================= */
.menue { position: relative; display: none; }
.menue > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--gruen); font-weight: 600; font-size: 13px; }
.menue > summary::-webkit-details-marker { display: none; }
.striche, .striche::before, .striche::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--gruen); content: ""; position: relative; }
.striche::before { position: absolute; top: -5px; } .striche::after { position: absolute; top: 5px; }
.menue[open] .striche { background: transparent; } .menue[open] .striche::before { top: 0; transform: rotate(45deg); } .menue[open] .striche::after { top: 0; transform: rotate(-45deg); }
.menue-blatt { position: absolute; right: 0; top: calc(100% + 10px); width: min(330px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 44px rgba(17, 34, 28, .18); padding: 14px; z-index: 30; }
.menue-blatt a { display: block; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.menue-blatt a:hover, .menue-blatt a[aria-current] { background: var(--mint); color: var(--gruen); }
.menue-blatt a.klein { font-size: 14px; padding: 9px 12px; }
.menue-titel { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-3); font-weight: 600; margin: 8px 14px 4px; }
.menue-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.menue-reihe a { background: var(--mint-2); text-align: center; }
.menue-unter { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 0 8px; }
.menue-unter a { color: var(--muted); }
@media (max-width: 900px) { .menue { display: block; } }
@media (max-width: 520px) { .kopf-rechts .btn-klein { display: none; } .menue-text { display: none; } .menue > summary { width: 44px; justify-content: center; padding: 0; } }

.unternav { display: inline-flex; gap: 4px; padding: 4px; background: var(--mint-2); border-radius: 999px; margin: 6px 0 18px; }
.unternav a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--gruen); font-size: 14px; font-weight: 600; }
.unternav a[aria-current] { background: var(--gruen); color: #fff; }
.hero .unternav { margin-top: 0; }

.mehr .lead { margin-bottom: 0; }
.wkarten.vier { grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.wkarten.vier .wkarte { position: relative; padding-right: 40px; }
.wkarte .pfeil { position: absolute; right: 18px; top: 18px; font-size: 24px; color: var(--gruen-3); }
.wkarte h3 { margin-top: 0; }
@media (max-width: 1000px) { .wkarten.vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wkarten.vier { grid-template-columns: 1fr; } }
.seite-oben { padding-top: 26px; }
.seite-oben .seitenkopf { margin-bottom: 0; }
.raster > a.wkarte { box-shadow: none; }
.hinweise.gross { font-size: 16px; padding-left: 20px; }
.hinweise.gross li { margin: 12px 0; }

/* v3.4 Länderwahl für die Shops (Europa) */
.markt-zeile { display: flex; justify-content: center; margin: 18px 0 4px; }
.markt-wahl { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gruen-3); font-weight: 600; letter-spacing: .02em; }
.markt-wahl select { font: 500 16px/1.2 var(--sans); color: var(--gruen); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 34px 9px 16px; max-width: 220px;
  appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gruen) 50%), linear-gradient(135deg, var(--gruen) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.markt-wahl select:focus-visible { outline: 2px solid var(--gruen-3); outline-offset: 3px; }
.sheet-inhalt .markt-wahl { margin: 2px 0 14px; }
.kauf-hinweis { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--gruen-3); }

/* v3.5 Anlässe: Geschenk-Finder, Sets, Hinweis, Kalender, Geschenkkarte */
.anlass-hinweis { margin: 18px auto 0; max-width: 940px; }
.anlass-gross { margin: 18px 0 6px; }
.anlass-karte { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gruen); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--schatten); }
.anlass-karte:hover { border-color: var(--gruen-3); }
.anlass-karte .label { grid-column: 1; }
.anlass-karte .anlass-text { grid-column: 1; font-family: var(--serif); font-size: 19px; color: var(--gruen); line-height: 1.3; }
.anlass-karte .anlass-knopf { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; background: var(--gruen); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.anlass-karte .anlass-knopf b { font-weight: 400; font-size: 20px; line-height: 1; }
@media (max-width: 620px) { .anlass-karte { grid-template-columns: 1fr; } .anlass-karte .anlass-knopf { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: 8px; } }

.gfinder { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 26px; align-items: start; }
.gfragen { background: var(--mint-2); border-radius: var(--r); padding: 18px 18px 6px; position: sticky; top: 84px; }
.gfrage { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.gfrage legend { font-weight: 650; font-size: 15px; margin-bottom: 8px; color: var(--gruen); }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; }
.gchip { font: 500 14.5px/1.2 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; min-height: 40px; }
.gchip:hover { border-color: var(--gruen-3); }
.gchip[aria-pressed="true"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.gchip:focus-visible { outline: 2px solid var(--gruen-3); outline-offset: 2px; }
.gfragen .markt-wahl { margin: 4px 0 14px; }
@media (max-width: 860px) { .gfinder { grid-template-columns: 1fr; } .gfragen { position: static; } }

.gset { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--schatten); padding: 20px 22px; margin: 0 0 18px; }
.gset > .kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.gset > .kopf h3 { margin: 2px 0; }
.gset .preis { font-family: var(--serif); font-size: 22px; color: var(--gruen); white-space: nowrap; text-align: right; }
.gset .preis small { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.gset .hinweise { margin-top: 12px; }
.gkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.gkarte { display: flex; flex-direction: column; background: var(--mint-2); border-radius: 14px; padding: 16px; }
.gkarte .art { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gruen-3); font-weight: 600; margin: 0; }
.gkarte .name { font-size: 15.5px; margin: 4px 0 6px; line-height: 1.35; }
.gkarte .grund { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; flex: 1; }
.gkarte .m { margin: 0; }
.gkarte .kauf { width: 100%; }
section.papier .gkarte { background: #fff; border: 1px solid var(--line); }

.brot { font-size: 13px; color: var(--muted); padding: 18px 0 0; max-width: var(--breite); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.brot a { color: var(--gruen-3); text-decoration: none; }
.brot a:hover { text-decoration: underline; }
details.faq { border-top: 1px solid var(--line); padding: 14px 0; }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { cursor: pointer; font-weight: 650; color: var(--gruen); list-style-position: outside; }
details.faq p { margin: 10px 0 0; color: var(--ink-2); }
.zentriert-knoepfe { justify-content: center; margin: 18px 0 10px; }

ol.kalender { list-style: none; margin: 18px 0 0; padding: 0; }
ol.kalender li { display: grid; grid-template-columns: 130px 1fr; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
ol.kalender li:first-child { border-top: 0; }
.kal-datum { grid-row: 1 / span 2; font-family: var(--serif); color: var(--gruen); font-size: 17px; }
ol.kalender a { font-weight: 650; color: var(--ink); text-decoration: none; }
ol.kalender a:hover { color: var(--gruen); }
@media (max-width: 520px) { ol.kalender li { grid-template-columns: 1fr; } .kal-datum { grid-row: auto; } }

.gkarte-druck { position: relative; max-width: 420px; aspect-ratio: 148 / 105; margin: 10px auto 18px; background: linear-gradient(135deg, var(--mint) 0%, #fff 70%); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--schatten); padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; }
.gkarte-druck .karte-titel { font-family: var(--serif); font-size: 24px; color: var(--gruen); line-height: 1.2; margin: 6px 0 8px; }
.gkarte-druck p { margin: 0 0 6px; font-size: 14px; }
.gkarte-druck .karte-link { font-weight: 650; color: var(--gruen); word-break: break-all; }
.gkarte-druck .karte-von { margin-top: 10px; color: var(--muted); }
.gkarte-druck .linie { display: inline-block; width: 140px; border-bottom: 1px solid var(--line-2); }
.gkarte-druck img { position: absolute; right: 22px; top: 22px; }
@media print {
  body * { visibility: hidden; }
  #karte, #karte * { visibility: visible; }
  #karte { position: absolute; left: 0; top: 0; width: 148mm; height: 105mm; max-width: none; box-shadow: none; margin: 0; }
}

/* v3.6 Konfigurator hervorheben: grüne Bühne, kräftiger Akzent (12.11.2026) */
.btn-akzent { background: var(--akzent); border-color: var(--akzent); }
.btn-akzent:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); box-shadow: 0 8px 22px rgba(42, 115, 83, .32); }
.finder-buehne { margin-top: 34px; padding: 46px 0 58px; color: #e6efe9; background: radial-gradient(120% 90% at 50% 0%, #2f5a4a 0%, #1f3d33 55%, #17302a 100%); }
body.hat-ergebnis .finder-buehne { display: none; }
.finder-intro { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.finder-intro .label { color: var(--akzent-leucht); }
.finder-intro h2 { color: #fff; font-size: clamp(29px, 5.4vw, 40px); line-height: 1.15; margin-top: 8px; }
.finder-intro h2 em { color: var(--akzent-leucht); }
.finder-fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; }
.finder-fakten li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #e6efe9; border-radius: 999px; padding: 5px 12px; }
.finder-fakten li::before { content: "✓ "; color: var(--akzent-leucht); font-weight: 700; }
.finder-buehne .finder { margin: 0 auto; border: 0; box-shadow: 0 26px 70px rgba(5, 18, 13, .38), 0 2px 6px rgba(5, 18, 13, .18); }
.finder-buehne .finder-kopf { background: var(--akzent-hell); color: var(--gruen); padding: 14px 26px; }
.finder-buehne .finder-kopf b { font-size: 17px; }
.finder-buehne .finder-kopf .m { color: var(--akzent); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.finder-buehne .fortschritt { height: 7px; background: #e9f3ed; }
.finder-buehne .fortschritt span { background: linear-gradient(90deg, #3f9b72, var(--akzent)); }
.finder-buehne .frage h3 { font-size: 26px; }
.finder-buehne .frage .block { color: var(--akzent); }
.finder-buehne .opt { background: var(--mint-2); border-color: transparent; font-weight: 600; color: var(--gruen); padding: 16px 52px 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.finder-buehne .opt small { font-weight: 400; color: var(--muted); }
.finder-buehne .opt::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--akzent); font-size: 19px; font-weight: 600; line-height: 26px; text-align: center; box-shadow: 0 1px 3px rgba(23, 34, 29, .12); transition: background .15s, color .15s; }
.finder-buehne .opt:hover { background: var(--akzent-hell); border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.finder-buehne .opt:hover::after { background: var(--akzent); color: #fff; }
.finder-buehne .opt[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; box-shadow: 0 6px 18px rgba(42, 115, 83, .28); }
.finder-buehne .opt[aria-pressed="true"] small { color: #d6ecdf; }
.finder-buehne .opt[aria-pressed="true"]::after { content: "✓"; background: #fff; color: var(--akzent); font-size: 13px; font-weight: 700; line-height: 28px; }
.finder-buehne .weiter { background: var(--akzent); border-color: var(--akzent); padding: 13px 24px; font-size: 14px; }
.finder-buehne .weiter:hover { background: var(--akzent-dunkel); }
.finder-buehne .weiter[disabled] { background: var(--line-2); border-color: var(--line-2); box-shadow: none; transform: none; cursor: default; }
.finder-buehne .felder input:focus { border-color: var(--akzent); }
.anlass-hinweis { margin-top: 30px; margin-bottom: 34px; }
@media (max-width: 600px) {
  .finder-buehne { padding: 34px 0 40px; margin-top: 26px; }
  .finder-buehne .wrap { padding: 0 12px; }
  .finder-buehne .finder { border-radius: 22px; }
  .finder-buehne .finder-kopf { padding: 13px 18px; }
  .finder-buehne .frage h3 { font-size: 23px; }
}
.mobil-cta { background: var(--akzent); }