/* Mein Konto – member area */
:root{
  --m-ink:#1d3a2b;--m-ink-soft:#3f5646;--m-muted:#6a7a6d;--m-faint:#9aa79b;
  --m-bg:#f6f4ec;--m-surface:#fffefb;--m-surface-2:#f7f8f2;--m-line:#e2e6da;--m-line-strong:#cfd8c6;
  --m-brand:#214a37;--m-brand-2:#2f6b47;--m-sage:#5f9165;--m-sage-soft:#e8f0e0;--m-gold:#ab8848;--m-gold-soft:#f4ecdc;
  --m-up:#2f7a4a;--m-down:#b0563c;
  --m-radius:20px;--m-radius-sm:14px;
  --m-shadow:0 1px 2px rgba(29,58,43,.04),0 8px 24px -12px rgba(29,58,43,.14);
  --m-serif:"Playfair Display",Georgia,serif;--m-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--m-ink);background:var(--m-bg);font-family:var(--m-sans);
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
body{margin:0;background:var(--m-bg)}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--m-gold);outline-offset:3px}

main.member-shell,main{width:min(1120px,calc(100% - 32px));margin:48px auto 88px}
h1,h2,h3{font-family:var(--m-serif);font-weight:500;letter-spacing:-.02em;color:var(--m-ink)}
h1{font-size:clamp(36px,5.2vw,58px);line-height:1.05;margin:14px 0 14px;max-width:16ch}
h2{font-size:clamp(22px,2.4vw,27px);line-height:1.2;margin:0 0 14px}
p{line-height:1.65}
.eyebrow,.panel-kicker,.section-label{display:inline-block;font:700 11px/1 var(--m-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-sage)}
.panel-kicker{margin-bottom:10px}
.lead{font-size:18px;color:var(--m-muted);margin:0;max-width:52ch}
.member-hero{padding-bottom:30px;margin-bottom:6px;border-bottom:1px solid var(--m-line)}
.small{font-size:13px;line-height:1.6;color:var(--m-muted)}

/* Panels */
.member-panel{background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-radius);padding:clamp(22px,3.2vw,34px);margin:24px 0;box-shadow:var(--m-shadow)}
.member-panel>p:not(.small){color:var(--m-ink-soft)}
.narrow-panel{max-width:560px}
.accent-panel{background:linear-gradient(160deg,#24503b 0%,#1d3f2f 100%);border-color:#1d3f2f;color:#e9f0e4}
.accent-panel h2{color:#fff}.accent-panel>p:not(.small){color:#cfdccd}.accent-panel .small{color:#a9bca9}.accent-panel .panel-kicker{color:#c6d9a3}
.accent-panel .button{background:#f3efe2;border-color:#f3efe2;color:var(--m-brand)}
.accent-panel .button:hover{background:#fff}
.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.account-email{margin:-4px 0 18px;font-size:14px;color:var(--m-muted)}

/* Forms */
label{display:block;font-size:13px;font-weight:600;color:var(--m-ink-soft);margin:16px 0}
input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:1px solid var(--m-line-strong);border-radius:11px;font:500 15px var(--m-sans);color:var(--m-ink);background:#fff;transition:border-color .15s,box-shadow .15s}
input:hover{border-color:#b5c2ab}
input:focus{outline:none;border-color:var(--m-sage);box-shadow:0 0 0 4px rgba(95,145,101,.16)}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--m-brand);border-radius:999px;background:var(--m-brand);color:#fff;font:600 14px/1 var(--m-sans);padding:13px 22px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
button:hover,.button:hover{background:var(--m-brand-2);box-shadow:0 6px 16px -8px rgba(33,74,55,.6)}
button:active,.button:active{transform:translateY(1px)}
.secondary{background:transparent;color:var(--m-brand)}
.secondary:hover{background:var(--m-sage-soft);box-shadow:none}
.text-button{background:none;border:0;padding:8px 0;margin-top:12px;color:var(--m-muted);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.text-button:hover{background:none;box-shadow:none;color:var(--m-brand)}
button:disabled{opacity:.55;cursor:wait}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.grid{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.private-note{background:var(--m-surface-2);border:1px solid var(--m-line);padding:14px 16px;border-radius:12px;font-size:13px;line-height:1.55;color:var(--m-ink-soft);margin-top:20px}
.private-note label{font-weight:500;margin:8px 0}
#member-status:not(:empty){padding:14px 18px;margin:20px 0 0;background:var(--m-sage-soft);border:1px solid #cfe0c2;border-radius:12px;font-size:14px}
#register-fields{border-top:1px solid var(--m-line);margin-top:24px;padding-top:12px}
#register-fields p{font-size:14px;color:var(--m-ink-soft)}

/* Auth */
.auth-panel{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.auth-benefits{list-style:none;padding:0;margin:22px 0 24px;display:grid;gap:14px}
.auth-benefits li{position:relative;padding-left:34px}
.auth-benefits li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--m-sage-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.5L14 7.5' fill='none' stroke='%232f6b47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.auth-benefits strong{display:block;font-size:15px}
.auth-benefits span{display:block;font-size:14px;color:var(--m-muted);margin-top:2px}
.auth-form{background:var(--m-surface-2);border:1px solid var(--m-line);border-radius:var(--m-radius-sm);padding:clamp(18px,2.6vw,28px)}
.auth-form label:first-of-type{margin-top:0}

/* Member layout */
.member-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.member-grid .member-panel{margin:0}
.quiz-summary{font-size:15px}
.quiz-summary:not(:empty){display:inline-flex;align-items:baseline;gap:6px;padding:8px 14px;border-radius:999px;background:var(--m-sage-soft);color:var(--m-brand)!important;font-weight:700}
.quiz-summary span{font-weight:500;color:var(--m-ink-soft)}
.member-panel details{border:1px solid var(--m-line);border-radius:14px;padding:0 18px;background:var(--m-surface-2)}
.member-panel summary{padding:15px 0;cursor:pointer;font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.member-panel summary::-webkit-details-marker{display:none}
.member-panel summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--m-muted);border-bottom:2px solid var(--m-muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.member-panel details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.member-panel details form{padding-bottom:20px}
.league-choice{margin-top:16px}
.league-choice .private-note{margin:0;display:flex;gap:10px;align-items:flex-start}
.league-choice input,.private-note input[type=checkbox]{display:inline-block;width:18px;height:18px;min-height:18px;margin:2px 8px 0 0;flex:0 0 auto;accent-color:var(--m-brand);vertical-align:-3px;box-shadow:none}

/* Overview */
.member-overview{padding:0;overflow:hidden}
.overview-top{display:flex;align-items:center;gap:20px;padding:clamp(22px,3.2vw,34px);background:radial-gradient(120% 140% at 0% 0%,#eaf2df 0%,rgba(234,242,223,0) 55%),radial-gradient(90% 120% at 100% 0%,#f3ecdc 0%,rgba(243,236,220,0) 60%),var(--m-surface);border-bottom:1px solid var(--m-line)}
.overview-top h2{margin:6px 0 4px;font-size:clamp(26px,3vw,34px)}
.overview-top p{margin:0;color:var(--m-muted);font-size:15px}
.overview-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.overview-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--m-line);font-size:12px;font-weight:600;color:var(--m-ink-soft)}
.overview-body{padding:clamp(20px,3vw,32px)}
.overview-section+.overview-section{margin-top:30px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-head h3{font-size:20px;margin:0}
.section-head p{margin:0;font-size:13px;color:var(--m-muted)}
.profile-avatar{display:grid;place-items:center;flex:0 0 auto;width:76px;height:76px;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#2f6b47,#1d3f2f);color:#eef4df;font:600 30px var(--m-serif);cursor:pointer;box-shadow:0 0 0 1px var(--m-line-strong),0 8px 20px -10px rgba(29,58,43,.5)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}

.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.overview-card{display:flex;flex-direction:column;padding:18px 18px 16px;background:var(--m-surface);border:1px solid var(--m-line);border-radius:var(--m-radius-sm);min-width:0;transition:border-color .2s,box-shadow .2s}
.overview-card:hover{border-color:var(--m-line-strong);box-shadow:var(--m-shadow)}
.oc-head{display:flex;align-items:center;gap:10px;min-height:28px}
.oc-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--m-sage-soft);color:var(--m-brand-2);flex:0 0 auto}
.oc-icon svg{width:16px;height:16px}
.overview-card .overview-label{margin:0;flex:1;min-width:0;color:var(--m-ink-soft);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.oc-metric-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.oc-metric{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.overview-card strong.oc-value{display:block;font:600 30px/1.05 var(--m-sans);letter-spacing:-.02em;color:var(--m-ink);font-variant-numeric:tabular-nums}
.overview-card .oc-unit{font-size:13px;font-weight:500;color:var(--m-muted)}
.overview-card.is-empty strong.oc-value{font:500 17px/1.3 var(--m-sans);color:var(--m-ink-soft);letter-spacing:0}
.overview-card .oc-detail{margin:6px 0 0;color:var(--m-muted);font-size:13px;line-height:1.5}
.oc-foot{margin-top:auto;padding-top:14px}
.overview-card a.oc-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--m-brand-2);text-decoration:none}
.overview-card a.oc-link:hover{text-decoration:underline;text-underline-offset:3px}
.oc-delta{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--m-surface-2);color:var(--m-ink-soft);border:1px solid var(--m-line);white-space:nowrap}
.oc-delta.good{background:#e6f2e7;border-color:#c9e1cc;color:var(--m-up)}
.oc-delta.bad{background:#f8e9e3;border-color:#efd3c8;color:var(--m-down)}
.oc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.oc-chip{padding:4px 9px;border-radius:7px;background:var(--m-surface-2);border:1px solid var(--m-line);font-size:12px;font-weight:500;color:var(--m-ink-soft);font-variant-numeric:tabular-nums}
.oc-progress{margin-top:12px}
.oc-progress-track{height:6px;border-radius:99px;background:#edf0e6;overflow:hidden}
.oc-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--m-sage),var(--m-brand-2))}
.oc-progress-label{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--m-muted);font-variant-numeric:tabular-nums}

/* Gauge */
.oc-gauge{position:relative;width:58px;height:58px;flex:0 0 auto}
.oc-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.oc-gauge .track{stroke:#edf0e6}
.oc-gauge .fill{stroke:var(--m-brand-2);transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.oc-gauge span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--m-ink-soft);font-variant-numeric:tabular-nums}

/* Charts */
.health-chart{position:relative;margin-top:14px;color:var(--m-brand-2)}
.health-chart svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.health-chart svg:focus{outline:none}
.health-chart svg:focus-visible{outline:2px solid var(--m-gold);outline-offset:4px;border-radius:6px}
.health-chart .grid-line{stroke:#e9ece3;stroke-width:1}
.health-chart .grid-line.base{stroke:#d9dfd2}
.health-chart .axis-label{fill:var(--m-faint);font:500 9.5px var(--m-sans);font-variant-numeric:tabular-nums}
.health-chart .series-line{fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.health-chart .series-dot{fill:#fff;stroke:currentColor;stroke-width:1.75}
.health-chart .series-dot.last{fill:currentColor;stroke:#fff;stroke-width:2}
.health-chart .halo{fill:currentColor;opacity:.14}
.health-chart .value-label{fill:var(--m-ink);font:700 11px var(--m-sans);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.health-chart .crosshair{stroke:var(--m-line-strong);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .12s}
.health-chart .active-dot{fill:currentColor;stroke:#fff;stroke-width:2;opacity:0;transition:opacity .12s}
.health-chart.is-active .crosshair,.health-chart.is-active .active-dot{opacity:1}
.health-chart.is-active .value-label{opacity:.25}
.health-chart.is-drawn .series-line{animation:m-draw 1s cubic-bezier(.3,.7,.2,1) both}
.health-chart.is-drawn .area{animation:m-fade .9s .25s ease both}
@keyframes m-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.chart-tip{position:absolute;top:0;left:0;pointer-events:none;transform:translate(-50%,calc(-100% - 10px));padding:7px 10px;border-radius:9px;background:var(--m-ink);color:#fff;font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,0,0,.45);opacity:0;transition:opacity .12s}
.chart-tip strong{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.chart-tip span{color:#bfd0c0}
.health-chart.is-active .chart-tip{opacity:1}
.chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;margin-top:14px;padding:16px;border:1px dashed var(--m-line-strong);border-radius:12px;background:repeating-linear-gradient(0deg,transparent 0 31px,#eef1e8 31px 32px),var(--m-surface-2);text-align:center}
.chart-empty strong{font-size:13px;color:var(--m-ink-soft)}
.chart-empty span{font-size:12px;color:var(--m-muted)}
@media (prefers-reduced-motion:reduce){.health-chart.is-drawn .series-line,.health-chart.is-drawn .area{animation:none}.oc-gauge .fill{transition:none}}

/* Badges */
.badge-progress{display:flex;align-items:center;gap:12px;min-width:180px}
.badge-progress .oc-progress-track{flex:1}
.badge-progress span{font-size:13px;font-weight:600;color:var(--m-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.profile-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.profile-badge{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--m-line);border-radius:12px;background:var(--m-surface-2);color:var(--m-muted);text-align:left}
.profile-badge span{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#eceee6;color:#a6afa2;font-size:17px;margin:0;filter:grayscale(1)}
.profile-badge strong{display:block;font-size:13px;color:var(--m-ink-soft)}
.profile-badge small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35}
.profile-badge.earned{background:#fff;border-color:#d6e3c6;color:var(--m-ink-soft)}
.profile-badge.earned span{background:linear-gradient(145deg,#f6e7c4,#e3c98f);color:#6c4f17;filter:none;box-shadow:inset 0 0 0 1px rgba(171,136,72,.35)}
.profile-badge.earned strong{color:var(--m-ink)}
.profile-badge.earned small{color:var(--m-up)}
.overview-note{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--m-line)}

footer{display:flex;justify-content:center;gap:24px;padding:26px;background:#ebeee3;border-top:1px solid var(--m-line);font-size:13px;color:var(--m-ink-soft)}
footer a{text-decoration:none}footer a:hover{text-decoration:underline}

@media(max-width:960px){.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-badges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.auth-panel{grid-template-columns:1fr}.member-grid{grid-template-columns:1fr}}
@media(max-width:560px){main.member-shell,main{width:calc(100% - 32px);margin-top:32px}.grid{grid-template-columns:1fr;gap:0}.panel-heading{display:block}.panel-heading button{margin-bottom:18px}.overview-grid{grid-template-columns:1fr}.overview-top{align-items:flex-start;flex-direction:column}.profile-badges{grid-template-columns:1fr}.section-head{flex-direction:column;align-items:flex-start}.badge-progress{width:100%}}