/* Baustein „Jetzt Mitglied werden“ – nutzt die Variablen aus style.css (Fallbacks für den Notfall) */
:root{--mw-ease:cubic-bezier(.22,.61,.36,1);--mw-green:var(--pine-700,#2c6144);--mw-green-d:var(--pine-800,#204a33);--mw-dark:var(--pine-950,#0f2318);--mw-red:var(--tile-red,#a8402c);--mw-red-d:var(--tile-red-dark,#7e2e1f);--mw-paper:var(--paper,#f2efe4);--mw-ink:var(--ink,#16241c);--mw-soft:var(--ink-soft,#3d4d43);--mw-line:rgba(22,36,28,.2)}

/* Der Auslöser-Button: helle Fläche auf dunklem Grund, damit er neben dem roten „Jetzt unterzeichnen“ auffällt */
.mw-btn{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:.95rem;line-height:1.2;background:var(--mw-paper);color:var(--mw-dark);border:1px solid var(--mw-paper);border-radius:3px;padding:14px 26px;cursor:pointer;white-space:nowrap;transition:transform .28s var(--mw-ease),background-color .28s var(--mw-ease),box-shadow .28s var(--mw-ease),color .28s var(--mw-ease)}
.mw-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.mw-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.25);transition-duration:.08s}
.nav .mw-btn{padding:8px 14px;font-size:.82rem;margin-left:-8px}
.mw-btn:focus-visible,.mw-dlg button:focus-visible,.mw-dlg input:focus-visible,.mw-dlg a:focus-visible{outline:3px solid #f2b705;outline-offset:2px}

/* Feste Leiste (schmale Bildschirme) */
.mw-bar{display:none}
@media(max-width:1040px){
  .nav .mw-btn{display:none}
  .mw-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--mw-dark);border-top:3px solid var(--mw-red)}
  .mw-bar .mw-btn{width:100%;padding:14px;font-size:1rem}
  body{padding-bottom:76px}
}
/* Nav: Name ausblenden, damit der zusätzliche Button Platz hat */
@media(min-width:1041px){
  .nav .wrap{max-width:1280px;gap:20px;justify-content:flex-start}
  .nav .navlinks{margin:0 auto;gap:14px}          /* Menü mittig, Freiraum nur links und rechts davon */
  .nav .mw-btn{margin-left:-10px}                 /* die beiden Buttons rücken eng zusammen */
}
@media(min-width:1041px) and (max-width:1199px){.nav .brand-text{display:none}}

/* Overlay */
.mw-dlg{border:0;padding:0;border-radius:6px;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--mw-paper);color:var(--mw-ink);font:400 1rem/1.55 'Inter',system-ui,sans-serif;box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden}
.mw-dlg::backdrop{background:rgba(10,22,16,.72)}
.mw-dlg[open]{display:flex;flex-direction:column}
.mw-head{background:linear-gradient(120deg,var(--pine-900,#173626),var(--mw-dark));color:#fff;padding:20px 56px 16px 24px;position:relative;border-bottom:4px solid var(--mw-red)}
.mw-head h2{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.45rem;line-height:1.2;color:#fff}
.mw-head p{margin:6px 0 0;font-size:.9rem;color:var(--moss-400,#7a9a7e)}
.mw-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:3px;background:transparent;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.mw-x{transition:background-color .25s var(--mw-ease),transform .25s var(--mw-ease)}
.mw-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.mw-steps{display:flex;gap:6px;padding:14px 24px 0;font-size:.78rem;color:var(--mw-soft)}
.mw-steps span{flex:1;border-top:4px solid rgba(22,36,28,.14);padding-top:6px}
.mw-steps span.on{border-color:var(--mw-green);color:var(--mw-green-d);font-weight:700}
.mw-body{padding:16px 24px 20px;overflow:auto}
.mw-pane{display:none}.mw-pane.on{display:block}
.mw-pitch{background:#fff;border-left:4px solid var(--mw-red);padding:12px 14px;margin-bottom:16px;font-size:.93rem;color:var(--mw-soft)}
.mw-pitch b{color:var(--mw-dark)}
.mw-f{display:block;margin:0 0 14px}
.mw-f>span{display:block;font-size:.86rem;font-weight:600;margin-bottom:5px;color:var(--mw-dark)}
.mw-f input[type=text],.mw-f input[type=email],.mw-f input[type=tel]{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--mw-line);border-radius:3px;background:#fff;color:var(--mw-ink)}
.mw-f input{transition:border-color .25s var(--mw-ease),box-shadow .25s var(--mw-ease)}
.mw-f input:focus{border-color:var(--mw-green);box-shadow:0 0 0 3px rgba(44,97,68,.18)}
.mw-f.err input{border-color:var(--mw-red);box-shadow:0 0 0 1px var(--mw-red)}
.mw-e{color:var(--mw-red);font-size:.82rem;margin-top:5px;display:none;font-weight:600}.mw-f.err .mw-e{display:block}
.mw-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.mw-row{grid-template-columns:1fr;gap:0}}
.mw-opt{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--mw-line);border-radius:3px;padding:13px 14px;margin-bottom:10px;cursor:pointer}
.mw-opt{transition:border-color .25s var(--mw-ease),box-shadow .25s var(--mw-ease),transform .25s var(--mw-ease)}
.mw-opt:hover{border-color:var(--mw-green);transform:translateY(-1px)}
.mw-opt:has(input:checked){border-color:var(--mw-green);box-shadow:0 0 0 2px rgba(44,97,68,.25)}
.mw-opt input{margin-top:5px;accent-color:var(--mw-green)}
.mw-opt small{display:block;color:var(--mw-soft);font-size:.86rem}
.mw-sub{display:none;margin-top:6px}.mw-sub.on{display:block}
.mw-bank{background:var(--paper-dim,#e7e2d2);padding:11px 14px;font-size:.9rem;margin:0 0 14px;border-radius:3px}
.mw-bank code{font:600 .92rem ui-monospace,monospace;word-break:break-all}
.mw-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.mw-sec{background:transparent;border:1px solid var(--mw-green);color:var(--mw-green-d);border-radius:3px;padding:12px 20px;font:600 .95rem 'Inter',system-ui,sans-serif;cursor:pointer}
.mw-sec{transition:background-color .28s var(--mw-ease),transform .28s var(--mw-ease),box-shadow .28s var(--mw-ease)}
.mw-sec:hover{background:rgba(44,97,68,.1);transform:translateY(-1px)}
.mw-sec:active{transform:translateY(0);transition-duration:.08s}
.mw-go{background:var(--mw-red);color:#fff;border:0;border-radius:3px;padding:13px 24px;font:600 .95rem 'Inter',system-ui,sans-serif;cursor:pointer;transition:background-color .28s var(--mw-ease),transform .28s var(--mw-ease),box-shadow .28s var(--mw-ease)}
.mw-go:hover{background:var(--mw-red-d);transform:translateY(-2px);box-shadow:0 8px 18px rgba(126,46,31,.35)}
.mw-go:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}
.mw-ret{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.mw-ret li{background:#fff;border:1px solid rgba(22,36,28,.14);border-radius:3px;padding:10px 14px;font-size:.93rem}
.mw-note{font-size:.8rem;color:var(--mw-soft);margin:18px 0 0}
.mw-alt{text-align:center;margin:12px 0 0;font-size:.86rem}.mw-alt a{color:var(--mw-green-d)}
.mw-done h3{margin:2px 0 6px;font-family:'Fraunces',Georgia,serif;font-size:1.25rem;color:var(--mw-dark)}
.mw-done p{margin:0;color:var(--mw-soft)}

/* Platzierung in Hero und Banner: gleiche Größe wie .btn */
.hero-actions .mw-btn,.cta-actions .mw-btn{padding:14px 26px;font-size:.95rem}

/* Overlay: sanftes Einblenden */
@keyframes mw-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes mw-fade{from{opacity:0}to{opacity:1}}
.mw-dlg[open]{animation:mw-in .35s var(--mw-ease)}
.mw-dlg[open]::backdrop{animation:mw-fade .35s var(--mw-ease)}
.mw-pane.on{animation:mw-fade .3s var(--mw-ease)}

/* Auch die vorhandenen Seiten-Buttons weicher machen (gleiches Gefühl wie der neue Button) */
.btn,.nav-cta{transition:transform .28s var(--mw-ease),background-color .28s var(--mw-ease),border-color .28s var(--mw-ease),box-shadow .28s var(--mw-ease)}
.btn:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn:active,.nav-cta:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}

/* Bewegung reduzieren, wenn das System es wünscht */
@media (prefers-reduced-motion:reduce){
  .mw-btn,.mw-go,.mw-sec,.mw-x,.mw-opt,.btn,.nav-cta{transition:none}
  .mw-btn:hover,.mw-go:hover,.mw-sec:hover,.mw-x:hover,.mw-opt:hover,.btn:hover,.nav-cta:hover{transform:none}
  .mw-dlg[open],.mw-dlg[open]::backdrop,.mw-pane.on{animation:none}
}

/* ===== Gut lesbar und einfach zu bedienen (auch für Ältere) ===== */
.mw-dlg{font-size:1.125rem;line-height:1.55}
.mw-head h2{font-size:1.7rem}
.mw-head p{font-size:1rem}
.mw-steps{font-size:.95rem}
.mw-steps span{padding-top:8px}
.mw-f>span{font-size:1.05rem;margin-bottom:6px}
.mw-req{font-style:normal;font-weight:400;color:var(--mw-soft);font-size:.9rem}
.mw-f input[type=text],.mw-f input[type=email],.mw-f input[type=tel]{font-size:1.125rem;padding:14px 15px;min-height:52px}
.mw-e{font-size:1rem}
.mw-go{font-size:1.15rem;padding:16px 30px;min-height:54px}
.mw-sec{font-size:1.05rem;padding:14px 22px;min-height:54px}
.mw-x{width:48px;height:48px;font-size:2rem}
.mw-opt[hidden],.mw-lead[hidden]{display:none}
.mw-lead{margin:0 0 12px}
.mw-bank{font-size:1.05rem;padding:14px 16px;line-height:1.8}
.mw-bank code{font-size:1.1rem}
.mw-how3{background:#fff;border-left:4px solid var(--mw-red);padding:14px 16px;margin-bottom:12px}
.mw-how3 ol{margin:8px 0 0;padding-left:1.3rem}
.mw-how3 li{margin:4px 0}
.mw-alt-top{margin:0 0 18px;font-size:1rem}
.mw-alt-top a{color:var(--mw-green-d);font-weight:600}
.mw-how{margin:14px 0 0;padding-left:1.4rem}
.mw-how>li{margin:0 0 18px;padding-left:4px}
.mw-how>li>b{display:block;margin-bottom:6px;color:var(--mw-dark)}
.mw-bigbtn{display:block;text-align:center;text-decoration:none;background:var(--mw-red);color:#fff;font-weight:700;font-size:1.2rem;padding:16px 20px;border-radius:3px;margin:8px 0 8px;transition:background-color .28s var(--mw-ease),transform .28s var(--mw-ease),box-shadow .28s var(--mw-ease)}
.mw-bigbtn:hover{background:var(--mw-red-d);transform:translateY(-2px);box-shadow:0 8px 18px rgba(126,46,31,.35)}
.mw-bigbtn:focus-visible,.mw-textlink:focus-visible{outline:3px solid #f2b705;outline-offset:2px}
.mw-textlink{display:inline-block;color:var(--mw-green-d);font-weight:600;padding:6px 0}
.mw-small{display:block;font-size:.95rem;color:var(--mw-soft);margin-top:4px}
.mw-ret li{font-size:1rem}
.mw-hint{background:#fff;border-left:4px solid var(--mw-green);padding:12px 14px;margin:6px 0 0;font-size:1rem}
.mw-note{font-size:.9rem}