/* «Mein Weg» – Stylesheet. Farben und Formen = Marke Burnout-Lotsen. */
:root{
  --deep:#2D4A3E; --deep-d:#243c32; --hero0:#3d4f3c; --hero1:#2c3f31;
  --mint:#74e6ac; --mint-soft:#b4ebca; --mint-bg:#eef9f3; --success:#1E9E6A;
  --page:#f5f5f3; --card:#ffffff; --hairline:#e2e2e2;
  --heading:#353535; --body:#686868; --soft:#9f9f9f;
  --sand:#e0c9a8; --sand-t:#8a6f4d; --sand-bg:#f6efe3;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--page);font-family:'Roboto',system-ui,sans-serif;color:var(--heading);}

/* ===== Login ===== */
.lg{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
background:radial-gradient(120% 120% at 50% 0%, var(--hero0) 0%, var(--hero1) 60%, #24342a 100%);}
.lg-inner{position:relative;z-index:2;width:100%;max-width:420px;padding:40px 22px;text-align:center;color:#eef3ee;}
.lg-logo{width:120px;height:auto;display:block;margin:0 auto 20px;}
.lg-h{font-weight:300;font-size:30px;margin:0 0 8px;}
.lg-sub{color:#c9d8cd;font-size:15.5px;line-height:1.65;margin:0 0 26px;}
.lg-card{background:var(--card);border-radius:20px;padding:26px 22px;box-shadow:0 18px 44px rgba(0,0,0,.28);color:var(--heading);text-align:left;}
.lg-label{font-size:13px;font-weight:500;color:var(--body);display:block;margin:0 0 7px;}
.lg-input{width:100%;font-size:16px;padding:13px 14px;border:1.5px solid var(--hairline);border-radius:12px;font-family:inherit;outline:none;}
.lg-input:focus{border-color:var(--deep);}
.lg-btn{width:100%;margin-top:14px;background:var(--deep);color:#fff;border:0;border-radius:99px;padding:14px;font-size:15px;font-weight:700;letter-spacing:.02em;cursor:pointer;font-family:inherit;transition:background .2s;}
.lg-btn:hover{background:var(--deep-d);}
.lg-note{font-size:12.5px;color:var(--soft);margin:12px 0 0;line-height:1.55;text-align:center;}
.lg-note a{color:var(--body);}
.lg-code-row{display:flex;gap:8px;justify-content:space-between;}
.lg-code{width:15%;text-align:center;font-size:22px;font-weight:700;padding:12px 0;border:1.5px solid var(--hairline);border-radius:12px;outline:none;font-family:inherit;}
.lg-code:focus{border-color:var(--deep);}
.lg-back{display:inline-block;margin-top:14px;color:#9db8a8;font-size:13px;text-decoration:none;}
.flash{background:#fff7e8;border:1px solid #ecd9ad;color:#7a5c26;border-radius:12px;padding:11px 14px;font-size:13.5px;margin:0 0 14px;}
.coast{position:absolute;left:0;right:0;bottom:-4px;z-index:1;opacity:.55;}
.boat-move{animation:bootfahrt 120s linear forwards;}
.boat-bob{animation:bootwippen 5s ease-in-out infinite;}
@keyframes bootfahrt{from{transform:translateX(40px);}to{transform:translateX(850px);}}
@keyframes bootwippen{0%,100%{transform:translateY(0) rotate(-1.2deg);}50%{transform:translateY(2px) rotate(1.2deg);}}
@media (prefers-reduced-motion: reduce){.boat-move{animation:none;transform:translateX(700px);}.boat-bob{animation:none;}}

/* ===== App-Rahmen ===== */
.top{background:#fff;color:#1a1a1a;display:flex;align-items:center;gap:12px;padding:12px 18px;position:sticky;top:0;z-index:20;
 border-bottom:1px solid #e8e4da;box-shadow:0 1px 8px rgba(0,0,0,.05);}
.top-marke{display:flex;align-items:center;gap:12px;text-decoration:none;}
.top-logo{height:34px;width:auto;display:block;}
.top-name{font-size:15.5px;font-weight:500;letter-spacing:.02em;color:#1a1a1a;text-decoration:none;}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.top-link{color:#55524d;font-size:14px;text-decoration:none;}
.top-link:hover{color:#1a1a1a;}
.avatar{width:34px;height:34px;border-radius:50%;background:#74e6ac;color:#2D4A3E;font-weight:700;font-size:14px;
 display:flex;align-items:center;justify-content:center;text-decoration:none;border:0;font-family:inherit;cursor:pointer;}
.ich{position:relative;display:inline-flex;}
.ich-menue{display:none;position:absolute;right:0;top:calc(100% + 9px);background:#fff;border:1px solid #e4ded0;
 border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.16);padding:6px;min-width:180px;z-index:40;flex-direction:column;}
.ich-menue.auf{display:flex;}
.ich-menue a{display:block;padding:10px 14px;font-size:14px;color:#353535;text-decoration:none;border-radius:9px;}
.ich-menue a:hover{background:#f2efe6;}
.ich-menue .ich-weg{border-top:1px solid #eee7d8;margin-top:4px;padding-top:12px;color:#7a7365;}
.wrap{max-width:680px;margin:0 auto;padding:28px 18px 70px;}
.crumb{font-size:13.5px;margin:0 0 16px;}
.crumb a{color:var(--soft);text-decoration:none;}
.crumb a:hover{color:var(--heading);text-decoration:underline;}

.eyebrow{font-size:12px;font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:var(--soft);margin:0 0 10px;}
h1.pg{font-weight:300;font-size:clamp(24px,4.6vw,31px);margin:0 0 6px;color:var(--heading);}
.pg-sub{font-size:15.5px;color:var(--body);margin:0 0 22px;line-height:1.6;}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:24px 22px;box-shadow:0 4px 14px rgba(45,74,62,.04);margin:0 0 16px;}
.btn{display:inline-block;background:var(--deep);color:#fff !important;border:0;border-radius:99px;padding:13px 26px;font-size:14.5px;font-weight:700;letter-spacing:.02em;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .2s;}
.btn:hover{background:var(--deep-d);}
.btn.ghost{background:transparent;color:var(--body) !important;border:1.5px solid var(--hairline);font-weight:500;}
.btn.ghost:hover{border-color:var(--deep);color:var(--heading) !important;background:transparent;}
.btn.klein{padding:8px 16px;font-size:13px;}

.go{display:flex;align-items:center;gap:18px;background:linear-gradient(180deg,#eef8f1,#e7f4ec);border:1.5px solid var(--mint-soft);cursor:pointer;transition:transform .18s,box-shadow .18s;text-decoration:none;}
.go:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(45,74,62,.12);}
.go-ic{flex:0 0 52px;height:52px;border-radius:50%;background:var(--deep);display:flex;align-items:center;justify-content:center;}
.go-ic svg{width:24px;height:24px;stroke:#fff;}
.go-main{flex:1;min-width:0;}
.go-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--success);margin:0 0 3px;}
.go-t{font-size:17px;font-weight:600;margin:0 0 8px;color:var(--heading);}
.go-m{font-size:12.5px;color:var(--body);margin-top:6px;}
.go-arrow{flex:0 0 auto;color:var(--deep);}
.go-arrow svg{width:24px;height:24px;}

.rt{position:relative;padding-left:34px;}
.rt::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(180deg,#cfdcd3 0 6px,transparent 6px 12px);}
.rt-item{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:18px;padding:16px 18px;margin:0 0 12px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
.rt-dot{position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #cfdcd3;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--soft);}
.rt-item.done{border-color:var(--mint-soft);}
.rt-item.done .rt-dot{background:var(--success);border-color:var(--success);color:#fff;}
.rt-item.next{border-color:var(--sand);background:#fffdf8;}
.rt-item.next .rt-dot{border-color:var(--sand);color:var(--sand-t);}
.rt-t{font-size:15.5px;font-weight:600;margin:0;color:var(--heading);}
.rt-s{font-size:13px;color:var(--body);margin:3px 0 0;}
.rt-s.ok{color:var(--success);font-weight:500;}
.rt-s.soon{color:var(--sand-t);font-weight:500;}
.rt-go{margin-left:auto;color:var(--deep);flex:0 0 auto;}
.rt-go svg{width:20px;height:20px;}
.rt-more{border:1.5px dashed #d6d3cc;background:transparent;border-radius:18px;padding:15px 18px;font-size:13.5px;color:var(--body);line-height:1.55;cursor:pointer;}
.rt-more b{font-weight:600;color:var(--heading);}
.rt-more-list{display:none;margin-top:10px;color:var(--soft);font-size:13px;line-height:2;}
.rt-more.open .rt-more-list{display:block;}

.stepper{display:flex;gap:8px;margin:0 0 18px;}
.stp{flex:1;height:5px;border-radius:99px;background:#e3e1db;display:block;}
.stp.done{background:var(--success);}
.stp.cur{background:var(--deep);}
.stp-lbl{font-size:12.5px;color:var(--soft);margin:0 0 20px;}
.vid{background:#1c241e;border-radius:16px;aspect-ratio:16/9;max-width:520px;overflow:hidden;margin:16px 0;}
.vid iframe,.vid video{width:100%;height:100%;border:0;display:block;}
.vid-leer{display:flex;align-items:center;justify-content:center;height:100%;color:#74e6ac;font-size:14px;}
.lesson-text{font-size:15.5px;line-height:1.75;color:var(--body);white-space:pre-line;}
.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px;}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0;}
.chip{border:1.5px solid var(--hairline);background:#fff;border-radius:99px;padding:9px 16px;font-size:14px;cursor:pointer;font-family:inherit;transition:all .15s;}
.chip.sel{border-color:var(--deep);background:var(--deep);color:#fff;}
.chip.gone{opacity:.35;pointer-events:none;}
.buckets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 16px;}
.bucket{border:1.5px dashed #cfcabf;border-radius:14px;min-height:86px;padding:10px 12px;font-size:13px;color:var(--soft);cursor:pointer;}
.bucket .bt{display:block;font-weight:600;color:var(--body);margin-bottom:6px;font-size:13px;}
.bucket .in{display:inline-block;background:var(--mint-bg);border:1px solid var(--mint-soft);color:var(--heading);border-radius:99px;padding:5px 12px;font-size:13px;margin:2px 3px 2px 0;}
.soft-note{font-size:13.5px;color:var(--success);font-weight:500;margin:8px 0 0;display:none;}
.soft-note.show{display:block;}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--hairline);border-radius:14px;padding:13px 16px;font-size:14.5px;margin:0 0 9px;cursor:pointer;font-family:inherit;transition:all .15s;color:var(--heading);}
.opt:hover{border-color:var(--deep);}
.opt.sel{border-color:var(--deep);background:var(--mint-bg);}
.opt.right{border-color:var(--success);background:var(--mint-bg);}

.inne{background:linear-gradient(180deg,#fbf9f4,#f6f2e9);border:1px solid #eadfc9;}
.inne-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-t);margin:0 0 6px;}
.inne h3{font-size:18px;font-weight:600;margin:0 0 6px;}
.inne .free{font-size:13.5px;color:var(--body);margin:0 0 16px;line-height:1.6;}

.footer{border-top:1px solid var(--hairline);margin-top:40px;padding:26px 18px 30px;text-align:center;font-size:13px;color:var(--soft);}
.footer a{color:var(--body);text-decoration:none;margin:0 8px;}

/* ===== Werkstatt ===== */
.w-band{background:#3b3630;color:#f2ede2;font-size:12.5px;font-weight:600;text-align:center;padding:6px 12px;letter-spacing:.06em;}
.w-band a{color:#e8d9b8;}
.w-zeile{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:13px 16px;margin:0 0 10px;}
.w-zeile .t{font-size:15px;font-weight:600;color:var(--heading);text-decoration:none;flex:1;min-width:0;}
.w-zeile .t small{display:block;font-weight:400;font-size:12.5px;color:var(--soft);margin-top:2px;}
.w-mini{display:flex;gap:6px;}
.w-mini form{margin:0;}
.w-mini button{border:1px solid var(--hairline);background:#fff;border-radius:8px;width:30px;height:30px;font-size:14px;cursor:pointer;color:var(--body);}
.w-mini button:hover{border-color:var(--deep);color:var(--heading);}
.w-mini button.rot:hover{border-color:#b3562f;color:#b3562f;}
.w-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:3px 10px;}
.w-tag.gruen{background:var(--mint-bg);color:var(--success);}
.w-tag.sand{background:var(--sand-bg);color:var(--sand-t);}
.w-tag.grau{background:#eeedea;color:var(--soft);}
.w-form label{display:block;font-size:13px;font-weight:500;color:var(--body);margin:14px 0 6px;}
.w-form input[type=text],.w-form input[type=date],.w-form input[type=email],.w-form input[type=url],.w-form textarea,.w-form select{
  width:100%;font-size:14.5px;padding:11px 13px;border:1.5px solid var(--hairline);border-radius:11px;font-family:inherit;outline:none;background:#fff;}
.w-form textarea{min-height:110px;resize:vertical;line-height:1.6;}
.w-form input:focus,.w-form textarea:focus,.w-form select:focus{border-color:var(--deep);}
.w-hilfe{font-size:12.5px;color:var(--soft);margin:5px 0 0;line-height:1.5;}
.w-neu{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.w-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--body);margin-top:14px;}
.w-check input{width:18px;height:18px;}

@media (max-width:520px){ .buckets{grid-template-columns:1fr;} .go{flex-wrap:wrap;} }