/* ============================================================
   Wasabi Works — Partner-Landing-Page (partner.wasabi-works.de)
   Shared stylesheet · Rev 2 · FOS-3146
   Konsistent mit dem Wasabi-Works-Webseiten-Stil (Design-Tokens
   aus index.html). Mobile-First, WCAG 2.1 AA.
   ============================================================ */

/* ── Base / Tokens ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gt:#3C7F39;--bg0:#FBFCFB;--bg1:#F5F1EC;--bg2:#EFE9E2;--terra:#E88C7A;--blossom:#F2BCCB;--blossom-soft:#F9E8ED;--wa-soft:#B9DCA8;--head:'Baloo 2','Nunito',sans-serif;--shadow-soft:0 12px 30px -14px rgba(46,40,35,.18);
  --g:    #5C8F53;
  --gd:   #3C7F39;
  --gl:   #7FB874;
  --gp:   #EAF3E5;
  --gp2:  #F3F8F0;
  --r:    #E35033;
  --rp:   #F9E8ED;
  --ink:  #2E2823;
  --mid:  #4B443C;
  --lite: #8F857A;
  --rule: #E4DED6;
  --off:  #F5F1EC;
  --w:    #FFFFFF;
  --bronze:#A66A3D;
  --silber:#7C8B93;
  --gold: #B8912F;
  --sans: 'Nunito',system-ui,sans-serif;
  --serif:'Baloo 2','Nunito',sans-serif;
  --mono: 'Nunito',system-ui,sans-serif;
;font-weight:700}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);background:var(--bg0);color:var(--ink);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--gt)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:64px 0}
.section.tight{padding:44px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--gp);color:var(--gt);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:18px}
h1,h2,h3{line-height:1.18;letter-spacing:-.01em}
h1{font-family:var(--serif);font-size:clamp(30px,6vw,52px);font-weight:700}
h2{font-family:var(--serif);font-size:clamp(24px,4vw,36px);font-weight:700;margin-bottom:14px}
h3{font-size:clamp(18px,2.6vw,22px);font-weight:600}
p{color:var(--mid)}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--mid);max-width:60ch}
.muted{color:var(--lite);font-size:14px}

/* Skip link (WCAG 2.4.1 / focus) */
.skip{position:absolute;left:-999px;top:0;background:var(--gd);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;z-index:500}
.skip:focus{left:0}

/* Visible focus everywhere (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gd);outline-offset:2px;border-radius:4px}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-size:15px;font-weight:600;padding:13px 24px;border-radius:12px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .2s ease,box-shadow .2s ease;min-height:48px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--g);color:#fff}
.btn-primary:hover{background:var(--gd);box-shadow:0 6px 18px rgba(92,143,83,0.28)}
.btn-ghost{background:#fff;color:var(--gd);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--g);background:var(--gp2)}
.btn-block{width:100%}

/* ── Nav ────────────────────────────────────────────────── */
nav.top{position:sticky;top:0;z-index:200;height:58px;display:flex;align-items:center;
  padding:0 24px;background:rgba(251,252,251,0.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1120px;margin:0 auto;gap:14px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.brand-parent{font-size:12px;font-weight:600;color:var(--lite);letter-spacing:.07em;text-transform:uppercase}
.brand-sep{color:var(--rule);font-size:16px}
.brand-product{font-family:var(--mono);font-size:14px;color:var(--gt)}
.brand-tag{font-family:var(--mono);font-size:11px;color:var(--lite);border:1px solid var(--rule);border-radius:5px;padding:2px 7px;margin-left:2px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-size:14px;font-weight:600;color:var(--mid);text-decoration:none;padding:8px 11px;border-radius:10px}
.nav-links a:hover,.nav-links a.on{color:var(--gd);background:var(--gp2)}
#lang-toggle{background:none;border:1px solid var(--rule);border-radius:5px;padding:5px 11px;
  font-family:var(--mono);font-size:11px;color:var(--lite);cursor:pointer;letter-spacing:.04em;min-height:34px}
.nav-cta{background:var(--g);color:#fff!important;padding:9px 16px!important;border-radius:12px;font-weight:600!important}
.nav-cta:hover{background:var(--gd)!important}
.nav-ham{display:none;background:none;border:1px solid var(--rule);border-radius:10px;width:42px;height:38px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nav-ham span{display:block;width:18px;height:2px;background:var(--mid);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-ham.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-mob{display:none;flex-direction:column;padding:10px 24px 18px;background:#fff;border-bottom:1px solid var(--rule)}
.nav-mob a{padding:11px 4px;color:var(--mid);text-decoration:none;font-weight:600;border-bottom:1px solid var(--off)}
.nav-mob.open{display:flex}

/* ── Hero ───────────────────────────────────────────────── */
.hero{background:linear-gradient(180deg,var(--gp2) 0%,#fff 100%);padding:56px 0 40px;border-bottom:1px solid var(--rule)}
.hero h1{max-width:16ch}
.hero .lead{margin:18px 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:16px;font-size:13px;color:var(--lite)}

/* ── Path cards (Hub) ───────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr;gap:20px}
.card{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s ease,box-shadow .2s ease}
.card:hover{border-color:var(--g);box-shadow:0 8px 26px rgba(23,23,26,.07)}
.card .kicker{font-family:var(--mono);font-size:12px;color:var(--gt);letter-spacing:.06em}
.card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0}
.card ul li{position:relative;padding-left:22px;font-size:14px;color:var(--mid)}
.card ul li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:var(--gl)}
.card .btn{margin-top:auto}

/* Nicht sicher / self-select */
.selfselect{background:var(--off);border:1px solid var(--rule);border-radius:18px;padding:22px 24px}
.selfselect ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.selfselect li{padding-left:24px;position:relative;color:var(--mid)}
.selfselect li::before{content:"→";position:absolute;left:0;color:var(--gt);font-weight:700}

/* ── Tier band (Bronze/Silber/Gold) ─────────────────────── */
.tierband{background:linear-gradient(180deg,#fff,var(--gp2))}
.tier-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px}
.tier{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.tier .badge-img{width:96px;height:auto}
.tier h3{font-size:19px}
.tier .tier-thr{font-family:var(--mono);font-size:13px;color:var(--gd);background:var(--gp);padding:4px 12px;border-radius:100px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:7px;text-align:left;width:100%;margin-top:4px}
.tier ul li{position:relative;padding-left:20px;font-size:14px;color:var(--mid)}
.tier ul li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--gl)}
.tier.b{border-top:4px solid var(--bronze)}
.tier.s{border-top:4px solid var(--silber)}
.tier.g{border-top:4px solid var(--gold)}
.tier-note{margin-top:20px;font-size:13px;color:var(--lite);text-align:center}

/* Proposal / honesty labels */
.tag-prop{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--gd);
  background:var(--gp);border:1px solid #cfe5d8;border-radius:100px;padding:2px 9px;margin-left:6px;vertical-align:middle}

/* ── Enablement / Trailhead board ───────────────────────── */
.board{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.step{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:600;color:var(--mid)}
.step.badge-step{background:var(--gp);border-color:#cfe5d8;color:var(--gd);font-weight:600}
.arrow{color:var(--lite);font-weight:700}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;border-radius:100px;padding:3px 10px;border:1px solid var(--rule)}
.chip.req{background:var(--rp);color:var(--r);border-color:#f0d5d3}
.chip.rec{background:var(--gp);color:var(--gd);border-color:#cfe5d8}
.chip.opt{background:var(--off);color:var(--lite)}
.badge-row{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:24px}
.badge-row figure{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px}
.badge-row img{width:100px;height:auto}
.badge-row figcaption{font-family:var(--mono);font-size:12px;color:var(--mid)}

/* Resource list */
.reslist{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.reslist li{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--mid)}

/* Honest block */
.honest{background:var(--gp);border:1px solid var(--wa-soft);color:var(--ink);border-radius:20px;padding:30px 28px}
.honest h2{color:var(--ink)}
.honest p{color:rgba(46,40,35,1)}
.honest ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:12px}
.honest li{position:relative;padding-left:24px;color:rgba(46,40,35,1)}
.honest li::before{content:"✓";position:absolute;left:0;color:var(--gt);font-weight:700}

/* Steps (was passiert als nächstes) */
.steps-num{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px;margin-top:12px}
.steps-num li{counter-increment:s;position:relative;padding-left:42px;color:var(--mid)}
.steps-num li::before{content:counter(s);position:absolute;left:0;top:-2px;width:28px;height:28px;
  background:var(--gp);color:var(--gd);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* ── Detail page sections ───────────────────────────────── */
.block{border-top:1px solid var(--rule);padding-top:26px;margin-top:26px}
.earn{background:var(--gp2);border:1px solid #d9ecdf;border-radius:18px;padding:22px 24px}
.earn ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.earn ul li{position:relative;padding-left:22px;color:var(--mid)}
.earn ul li::before{content:"€";position:absolute;left:0;color:var(--gt);font-weight:700}
.example{background:#fff;border:1px dashed var(--gl);border-radius:16px;padding:18px 20px;margin-top:14px;font-size:14px;color:var(--mid)}

/* ── Form (partner-werden) ──────────────────────────────── */
.formwrap{max-width:640px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .req{color:var(--r)}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:9px;padding:12px 14px;min-height:48px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g)}
.field .hint{font-size:13px;color:var(--lite);margin-top:5px}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--off);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.consent input{width:20px;height:20px;min-height:20px;margin-top:3px;flex-shrink:0}
.consent label{font-size:14px;color:var(--mid);font-weight:400}
.err-summary{background:var(--rp);border:1px solid #f0d5d3;color:var(--r);border-radius:14px;padding:14px 16px;margin-bottom:20px}
.err-summary ul{margin:8px 0 0 20px}
.field-err input,.field-err select,.field-err textarea{border-color:var(--r);background:var(--rp)}
.field-err .fmsg{display:block;color:var(--r);font-size:13px;margin-top:5px;font-weight:600}
.fmsg{display:none}

/* ── Footer ─────────────────────────────────────────────── */
footer.site{background:var(--bg1);color:var(--ink);padding:40px 0 30px;margin-top:20px}
.foot-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot-brand-name{font-size:11px;font-weight:600;color:rgba(46,40,35,0.78);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.foot-product{font-family:var(--mono);font-size:14px;color:var(--gt)}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-links a{color:rgba(46,40,35,1);text-decoration:none;font-size:14px}
.foot-links a:hover{color:var(--ink)}
.foot-copy{width:100%;font-size:12px;color:rgba(46,40,35,0.78);border-top:1px solid rgba(46,40,35,0.16);padding-top:18px;margin-top:6px}

/* ── Desktop up ─────────────────────────────────────────── */
@media(min-width:760px){
  .wrap{padding:0 40px}
  nav.top,.nav-mob{padding-left:40px;padding-right:40px}
  .grid-2{grid-template-columns:1fr 1fr}
  .tier-grid{grid-template-columns:repeat(3,1fr)}
  .reslist{grid-template-columns:repeat(3,1fr)}
  .section{padding:80px 0}
}
@media(max-width:819px){
  .nav-links,.nav-cta.desktop{display:none}
  .nav-ham{display:flex}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

/* ── Styleguide 2026-08-29: Icon-Marke ── */
.brand-icon{width:32px;height:auto;border-radius:9px;flex-shrink:0}
.brand-product{font-family:var(--head);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:0;line-height:1}