/* Aufbau-Bereich — Gold-Accent-Theme auf Basis des Haupt-Dark-Themes */
:root{
  --gold:#ffd700;
  --gold-dim:rgba(255,215,0,.14);
  --gold-dim-2:rgba(255,215,0,.08);
  --gold-ink:#1a1200;
  --pitch-bg:#1a3a28;
  --pitch-stripe:#187834;
  --pitch-line:rgba(255,255,255,.5);
  --opp-red:#e53e3e;
}

.aufbau-section{min-height:100vh;color:var(--bright)}
.aufbau-section a{color:var(--gold);text-decoration:none}
.aufbau-section a:hover{text-decoration:underline}

/* Header */
.aufbau-header{padding:24px 20px 12px;max-width:820px;margin:0 auto;position:relative;z-index:2}
.aufbau-header .back{display:inline-block;color:var(--text2);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.aufbau-header h1{font-family:var(--ff-d);font-size:clamp(26px,5vw,36px);color:var(--gold);font-weight:800;letter-spacing:-1px;line-height:1}
.aufbau-header .sub{font-size:13px;color:var(--text2);margin-top:4px}

/* Wizard-Progress */
.wizard-progress{display:flex;gap:10px;margin-top:14px;align-items:center}
.wizard-progress .step{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--surface);color:var(--text2);font-weight:700;font-size:13px;border:1px solid var(--border)}
.wizard-progress .step.active{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.wizard-progress .step.done{background:var(--gold-dim);color:var(--gold);border-color:var(--gold-dim)}
.wizard-progress .sep{color:var(--text2);opacity:.4}

/* Step-Container */
main.aufbau-main{max-width:820px;margin:0 auto;padding:12px 20px 80px;position:relative;z-index:2}
.step-section{display:none;animation:stepIn .4s ease}
.step-section.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.step-section h2{font-family:var(--ff-d);font-size:clamp(20px,4vw,26px);color:var(--bright);margin-bottom:6px;letter-spacing:-.5px}
.step-section .hint{color:var(--text2);font-size:13px;margin-bottom:20px}

/* Grid-Karten */
.niveau-grid,.formation-grid,.situation-grid{display:grid;gap:12px;margin-top:18px}
.niveau-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.formation-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.situation-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.card-btn{padding:18px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--bright);text-align:left;cursor:pointer;transition:all .2s;font-family:var(--ff-b);position:relative;min-height:80px}
.card-btn:hover{border-color:var(--gold);background:var(--surface2);transform:translateY(-2px)}
.card-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.card-btn.highlighted{border-color:var(--gold);background:linear-gradient(135deg,var(--surface),var(--gold-dim))}

/* Niveau-Karten */
.niveau-card .num{font-family:var(--ff-d);font-size:40px;color:var(--gold);line-height:1;font-weight:800}
.niveau-card .name{font-weight:700;font-size:16px;margin-top:6px;color:var(--bright)}
.niveau-card .desc{color:var(--text);font-size:13px;margin-top:4px}
.niveau-card .target{color:var(--text2);font-size:11px;margin-top:8px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.niveau-card .badge{position:absolute;top:10px;right:10px;background:var(--gold);color:var(--gold-ink);padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}

/* Formation-Karten */
.formation-card .preview{background:var(--pitch-bg);padding:8px;border-radius:10px;margin-bottom:10px;aspect-ratio:100/140;display:flex;align-items:center;justify-content:center}
.formation-card .preview svg{width:100%;height:100%}
.formation-card h3{font-family:var(--ff-d);color:var(--bright);font-size:22px;letter-spacing:-.5px}
.formation-card p{color:var(--text2);font-size:12px;margin-top:2px}

/* Situation-Karten */
.situation-card{text-align:center;padding:22px 18px}
.situation-card .icon{font-size:34px;margin-bottom:8px}
.situation-card h3{font-family:var(--ff-d);color:var(--bright);font-size:18px;letter-spacing:-.3px}
.situation-card p{color:var(--text);font-size:13px;margin-top:6px;line-height:1.4}
.situation-card .example{color:var(--text2);font-size:11px;margin-top:10px;font-style:italic}

/* Nav-Buttons */
.nav-buttons{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{padding:12px 18px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;border:none;font-family:var(--ff-b)}
.btn-primary{background:var(--gold);color:var(--gold-ink)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:var(--surface);color:var(--bright);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface2)}

/* Result-Seite */
.result-header{text-align:center;margin-bottom:18px}
.result-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.tag{padding:6px 12px;border-radius:999px;font-weight:700;background:var(--surface);color:var(--text);font-size:12px;border:1px solid var(--border)}
.tag.niveau-tag{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.result-header h2{font-family:var(--ff-d);color:var(--bright);font-size:clamp(22px,4.5vw,28px);letter-spacing:-.5px}
.result-header .draft-note{color:var(--text2);font-size:12px;margin-top:8px;padding:6px 12px;background:var(--gold-dim-2);border-radius:8px;display:inline-block}

/* Pitch-Container */
.pitch-wrap-result{background:var(--surface);padding:12px;border-radius:var(--radius);margin:18px 0;border:1px solid var(--border)}
.pitch-svg-container{position:relative;width:100%;aspect-ratio:1050/680;background:var(--pitch-bg);border-radius:10px;overflow:hidden}
.pitch-svg-container svg{width:100%;height:100%;display:block}

.animation-controls{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.animation-controls .speed-control{margin-left:auto;display:flex;gap:4px;align-items:center}
.animation-controls .speed-control .lbl{color:var(--text2);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-right:4px}
.animation-controls .speed-control button{padding:5px 10px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:12px;cursor:pointer;font-weight:700}
.animation-controls .speed-control button.active{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}

.step-indicator{margin-top:10px;padding:12px;background:var(--surface2);border-radius:8px;font-style:italic;color:var(--text);font-size:14px;border-left:3px solid var(--gold);min-height:50px}
.step-indicator .num{color:var(--gold);font-weight:700;font-style:normal;margin-right:6px}

/* Content-Sections */
.content-block{background:var(--surface);padding:16px 18px;border-radius:var(--radius);margin-bottom:14px;border:1px solid var(--border)}
.content-block h3{font-family:var(--ff-d);color:var(--gold);font-size:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px;font-weight:800}
.content-block ul,.content-block ol{padding-left:20px;color:var(--bright)}
.content-block li{margin-bottom:6px;line-height:1.5;font-size:14px}
.content-block li::marker{color:var(--gold)}

/* Rollen-Grid */
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;margin-top:6px}
.role-card{background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.role-card summary{padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--bright);list-style:none}
.role-card summary::-webkit-details-marker{display:none}
.role-card summary::after{content:'▾';margin-left:auto;color:var(--text2);transition:transform .2s}
.role-card[open] summary::after{transform:rotate(180deg)}
.role-card .pos-code{background:var(--gold);color:var(--gold-ink);padding:4px 10px;border-radius:6px;font-family:var(--ff-d);font-size:13px;letter-spacing:.5px;min-width:42px;text-align:center}
.role-card .pos-name{font-size:14px}
.role-card-body{padding:0 16px 14px;color:var(--text);font-size:13px;line-height:1.5}
.role-card-body h5{color:var(--gold);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-top:10px;margin-bottom:4px;font-weight:800}
.role-card-body p{margin-bottom:6px}
.role-card-body ul,.role-card-body ol{padding-left:18px}
.role-card-body .motto{margin-top:10px;padding:8px 12px;background:var(--gold-dim-2);border-radius:6px;font-style:italic;color:var(--bright)}

/* Action-Grid */
.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.action-card{padding:16px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--bright);cursor:pointer;text-decoration:none;font-family:var(--ff-b);transition:all .2s}
.action-card:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--surface2)}
.action-card.coming-soon{opacity:.5;cursor:not-allowed}
.action-card .ic{font-size:24px;margin-bottom:6px}
.action-card h4{font-size:14px;font-weight:700;color:var(--bright);margin-bottom:2px}
.action-card p{font-size:11px;color:var(--text2)}

/* Hub-Specifics */
.hub-level{padding:20px;background:linear-gradient(135deg,var(--surface),var(--gold-dim-2));border-radius:var(--radius);margin-bottom:18px;border:1px solid var(--gold-dim);text-align:center}
.hub-level .val{font-family:var(--ff-d);font-size:48px;color:var(--gold);font-weight:800;line-height:1}
.hub-level .lbl{color:var(--text2);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:4px}
.hub-level .note{color:var(--text);font-size:13px;margin-top:8px}

.hub-group{margin-top:24px}
.hub-group h3{font-family:var(--ff-d);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:800;opacity:.85}
.hub-group .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}

/* Mobile */
@media(max-width:600px){
  .niveau-grid,.formation-grid,.situation-grid,.roles-grid,.action-grid,.hub-group .items{grid-template-columns:1fr}
  .animation-controls{flex-direction:column;align-items:stretch}
  .animation-controls .speed-control{margin-left:0;justify-content:center}
  main.aufbau-main{padding:12px 14px 80px}
}