/* FELD12 Business Diagnose V37.50 – Design-Tokens, Basis-UI und globale Foundation
   Schritt 3: FELD12 Klarheitsraum. Nur visuelles Fundament, keine Logik-/Textänderung. */

.feld12-business-app{
  /* FELD12 Klarheitsraum: warme, helle Premium-Basis */
  --f12-bg:#F7F1E8;
  --f12-bg-soft:#FBF7EF;
  --f12-bg-paper:#FFFDF8;
  --f12-bg-card:#FFFCF6;
  --f12-bg-elevated:#FFFFFF;

  --f12-ink:#211A15;
  --f12-ink-soft:#342C24;
  --f12-text:#3D342D;
  --f12-muted:#6E6257;
  --f12-muted-soft:#8A7C6D;

  --f12-line:#E5D8C7;
  --f12-line-soft:#EFE5D8;
  --f12-line-strong:#D6C2A8;

  --f12-gold:#B88932;
  --f12-gold-soft:#D8B86A;
  --f12-gold-light:#F3E4BF;
  --f12-gold-bg:#F8EED8;

  --f12-espresso:#211A15;
  --f12-espresso-soft:#34291D;

  --f12-success:#476B52;
  --f12-success-bg:#E9F1E8;
  --f12-warning:#9A6A24;
  --f12-warning-bg:#F8EAD0;
  --f12-error:#8B3F32;
  --f12-error-bg:#F4E0DB;
  --f12-info:#536A73;
  --f12-info-bg:#E7EEF0;

  --f12-hover:#F3E7D4;
  --f12-active:#EFE0C6;
  --f12-focus:#B88932;

  --f12-font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --f12-shell:1180px;
  --f12-content:860px;
  --f12-reading:780px;
  --f12-result:1080px;

  --f12-radius-sm:12px;
  --f12-radius-md:18px;
  --f12-radius-lg:24px;
  --f12-radius-xl:32px;

  --f12-shadow-xs:0 4px 12px rgba(35,28,21,.045);
  --f12-shadow-sm:0 10px 26px rgba(35,28,21,.06);
  --f12-shadow-md:0 18px 48px rgba(35,28,21,.085);
  --f12-shadow-lg:0 26px 72px rgba(35,28,21,.11);

  --f12-space-1:4px;
  --f12-space-2:8px;
  --f12-space-3:12px;
  --f12-space-4:16px;
  --f12-space-5:20px;
  --f12-space-6:24px;
  --f12-space-8:32px;
  --f12-space-10:40px;
  --f12-space-12:48px;
  --f12-space-16:64px;
  --f12-space-20:80px;

  --f12-mobile-page-x:16px;
  --f12-mobile-card-pad:18px;
  --f12-mobile-section-gap:34px;
  --f12-mobile-question-gap:22px;
  --f12-tablet-page-x:24px;
  --f12-tablet-card-pad:24px;
  --f12-tablet-section-gap:48px;
  --f12-desktop-page-x:32px;
  --f12-desktop-card-pad:28px;
  --f12-desktop-section-gap:64px;

  /* Legacy-Aliase: bestehende Komponenten weiter stabil halten */
  --f12-bg2:var(--f12-bg-soft);
  --f12-card:var(--f12-bg-card);
  --f12-paper:var(--f12-bg-paper);
  --f12-paper-2:#FFFAF2;
  --f12-cream:#F7F1E8;
  --f12-cream-2:#EFE3D1;
  --f12-soft:rgba(255,253,248,.88);
  --f12-softer:rgba(255,255,255,.58);
  --f12-accent:var(--f12-gold);
  --f12-accent2:var(--f12-gold-soft);
  --f12-danger:var(--f12-error);
  --f12-dark:var(--f12-espresso);
  --f12-dark2:var(--f12-espresso-soft);
  --f12-soft-muted:var(--f12-muted-soft);
  --f12-shadow-soft:var(--f12-shadow-md);
  --f12-shadow-card:var(--f12-shadow-sm);
  --f12-warm-shadow:rgba(35,28,21,.08);

  max-width:var(--f12-shell);
  margin:42px auto;
  padding:0 16px;
  color:var(--f12-ink);
  font-family:var(--f12-font-sans);
  scroll-margin-top:24px;
}
.feld12-business-app *, .feld12-business-app *::before, .feld12-business-app *::after{box-sizing:border-box}
.feld12-business-app :where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid rgba(184,137,50,.45);outline-offset:3px}
.feld12-business-app :where(button,a,.feld12-button,.feld12-option){transition-duration:.16s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion: reduce){.feld12-business-app *,.feld12-business-app *::before,.feld12-business-app *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
.feld12-start-hero,.feld12-shell,.feld12-result-shell{
  background:radial-gradient(circle at top left, rgba(184,137,50,.13), transparent 36%), linear-gradient(145deg,var(--f12-bg-paper),var(--f12-bg-soft));
  border:1px solid var(--f12-line);
  border-radius:32px;
  padding:clamp(24px,4vw,42px);
  box-shadow:var(--f12-shadow-md);
  overflow:hidden;
}
.feld12-result-shell{padding:0;background:var(--f12-bg-paper)}
.feld12-result-hero{padding:clamp(26px,4vw,46px);background:linear-gradient(145deg,var(--f12-bg-paper),var(--f12-bg-soft));border-bottom:1px solid var(--f12-line)}
.feld12-kicker{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--f12-accent2);font-weight:800;margin-bottom:12px}
.feld12-business-app h2{font-size:clamp(29px,4.4vw,52px);line-height:1.02;margin:0 0 16px;letter-spacing:-.035em;color:var(--f12-ink)}
.feld12-business-app h3{font-size:clamp(22px,2.5vw,30px);line-height:1.1;margin:0 0 14px;color:var(--f12-ink);letter-spacing:-.02em}
.feld12-business-app h4{font-size:17px;margin:20px 0 8px;color:var(--f12-ink)}
.feld12-business-app p{font-size:17px;line-height:1.65;color:var(--f12-text);margin:0 0 14px}
.feld12-business-app strong{color:var(--f12-ink)}
.feld12-lead{font-size:clamp(18px,2vw,21px)!important;max-width:780px;color:var(--f12-text)!important}
.feld12-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 26px}
.feld12-intro-grid>div{background:var(--f12-soft);border:1px solid var(--f12-line);border-radius:22px;padding:18px;min-height:126px;display:flex;flex-direction:column;gap:8px}
.feld12-intro-grid strong{font-size:17px;color:var(--f12-ink)}
.feld12-intro-grid span{font-size:15px;line-height:1.5;color:var(--f12-muted)}
.feld12-start-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.feld12-stage-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px}
.feld12-stage-nav span{font-size:12px;line-height:1;border:1px solid var(--f12-line);color:var(--f12-muted);border-radius:999px;padding:9px 11px;background:var(--f12-softer)}
.feld12-stage-nav span.active{color:#1f1f1f;background:var(--f12-accent2);border-color:transparent;font-weight:800}
.feld12-stage-nav span.done{border-color:rgba(214,177,106,.35);color:var(--f12-accent2)}
.feld12-head{display:flex;gap:22px;justify-content:space-between;align-items:flex-start}
.feld12-progress-label{font-weight:700;white-space:nowrap;color:#211f1a;background:var(--f12-accent2);border-radius:999px;padding:9px 13px;font-size:13px}
.feld12-progress{height:11px;background:rgba(33,26,21,.10);border-radius:999px;overflow:hidden;margin:22px 0;border:1px solid var(--f12-line)}
.feld12-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--f12-accent),var(--f12-accent2));border-radius:999px;transition:width .25s ease}
.feld12-question-explain{position:relative;background:rgba(214,177,106,.1);border:1px solid rgba(214,177,106,.22);border-radius:22px;padding:16px 58px 16px 18px;color:var(--f12-text);font-size:16px;line-height:1.55;margin:16px 0 12px}
.feld12-question-explain strong{display:inline;color:var(--f12-ink)}.feld12-question-explain em{display:block;font-style:normal;color:var(--f12-accent2);font-size:14px;margin-top:8px}
.feld12-help-toggle{position:absolute;right:15px;top:15px;width:31px;height:31px;border-radius:999px;border:1px solid rgba(214,177,106,.45);background:rgba(33,26,21,.06);color:var(--f12-accent2);font-weight:900;cursor:pointer}
.feld12-help{background:var(--f12-bg-soft);border:1px solid var(--f12-line);border-radius:18px;padding:14px 16px;margin:0 0 16px;color:var(--f12-muted);font-size:15px;line-height:1.55}
.feld12-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 8px}
.feld12-option{width:100%;min-height:92px;background:rgba(255,255,255,.055);border:1px solid var(--f12-line);border-radius:22px;padding:18px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-size:16px;line-height:1.38;color:var(--f12-text);transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease}
.feld12-option:hover{transform:translateY(-2px);border-color:rgba(214,177,106,.45);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.feld12-option.active{border-color:var(--f12-accent2);background:rgba(214,177,106,.16);color:var(--f12-ink);font-weight:700}
.feld12-option b{font-size:20px;color:var(--f12-accent2);min-width:22px;text-align:right}
.feld12-actions{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:26px;flex-wrap:wrap}
.feld12-button{appearance:none;border:0;border-radius:999px;background:linear-gradient(135deg,var(--f12-accent),var(--f12-accent2));color:#1f1f1f;font-weight:900;padding:14px 24px;cursor:pointer;font-size:16px;transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease}
.feld12-button:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.feld12-button:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.feld12-button.secondary{background:rgba(255,255,255,.065);color:var(--f12-ink);border:1px solid var(--f12-line)}
.feld12-result-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px}.feld12-result-chip{background:rgba(255,255,255,.06);border:1px solid var(--f12-line);border-radius:20px;padding:15px}.feld12-result-chip span{display:block;color:var(--f12-muted);font-size:13px;margin-bottom:5px}.feld12-result-chip strong{display:block;font-size:17px;line-height:1.2;color:var(--f12-ink)}.feld12-result-chip.primary{background:rgba(214,177,106,.16);border-color:rgba(214,177,106,.35)}
.feld12-diagnosis-card{margin:18px clamp(16px,4vw,36px);background:rgba(255,255,255,.055);border:1px solid var(--f12-line);border-radius:26px;padding:clamp(20px,3vw,30px)}.feld12-diagnosis-card.strong{background:linear-gradient(145deg,rgba(214,177,106,.18),rgba(255,255,255,.055));border-color:rgba(214,177,106,.35)}.feld12-diagnosis-card.muted{background:rgba(255,255,255,.035)}.feld12-diagnosis-card.warning{border-color:rgba(216,138,115,.35);background:rgba(216,138,115,.08)}.feld12-diagnosis-card.action-card{background:linear-gradient(145deg,rgba(214,177,106,.2),rgba(255,255,255,.055));border-color:rgba(214,177,106,.38);margin-bottom:28px}
.feld12-result-columns{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:0;margin:0 clamp(16px,4vw,36px)}.feld12-result-columns .feld12-diagnosis-card{margin:0 8px 18px}.feld12-section-tag{display:inline-flex;border-radius:999px;padding:7px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#1f1f1f;background:var(--f12-accent2);font-weight:900;margin-bottom:12px}.feld12-mini-note,.feld12-prior-line{font-size:14px!important;color:var(--f12-muted)!important;margin-top:14px!important}.feld12-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.feld12-path-grid>div{background:rgba(33,26,21,.06);border:1px solid var(--f12-line);border-radius:20px;padding:18px}.feld12-path-grid span{display:block;color:var(--f12-muted);font-size:13px;margin-bottom:6px}.feld12-path-grid strong{display:block;font-size:19px;margin-bottom:10px}.feld12-path-grid p{font-size:15px!important;line-height:1.55!important;color:var(--f12-muted)!important}
.feld12-details{margin:20px clamp(16px,4vw,36px) 0;background:rgba(255,255,255,.035);border:1px solid var(--f12-line);border-radius:22px;padding:18px;color:var(--f12-text)}.feld12-details summary{cursor:pointer;font-weight:900;color:var(--f12-ink)}.feld12-score-table{border:1px solid var(--f12-line);border-radius:18px;overflow:hidden;margin:10px 0 22px}.feld12-score-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--f12-line);background:rgba(255,255,255,.035);color:var(--f12-text)}.feld12-score-row:last-child{border-bottom:0}.feld12-pill{border-radius:999px;padding:7px 10px;font-size:12px;white-space:nowrap}.feld12-pill.gold{background:var(--f12-gold-bg);color:#5b4100}.feld12-pill.green{background:#ddf2df;color:#155e22}.feld12-pill.yellow{background:#fff0b8;color:#705700}.feld12-pill.orange{background:#ffdfbd;color:#874707}.feld12-pill.red{background:#ffd5cf;color:#8e2116}.feld12-pill.black{background:var(--f12-espresso);color:var(--f12-ink);border:1px solid rgba(255,255,255,.2)}.feld12-pill.none{background:#ddd;color:#444}.result-actions{padding:0 clamp(16px,4vw,36px) 36px;margin-top:24px}
@media(max-width:860px){.feld12-head{display:block}.feld12-progress-label{display:inline-block;margin-top:10px}.feld12-options,.feld12-intro-grid,.feld12-result-chips,.feld12-path-grid,.feld12-result-columns{grid-template-columns:1fr}.feld12-result-columns{margin:0 16px}.feld12-result-columns .feld12-diagnosis-card{margin:0 0 16px}.feld12-option{min-height:auto}.feld12-actions{display:grid}.feld12-button{width:100%}.feld12-stage-nav span{font-size:11px}.feld12-score-row{align-items:flex-start;flex-direction:column}.feld12-question-explain{padding-right:52px}}
@media print{.feld12-business-app{max-width:100%;margin:0;color:#111}.feld12-start-actions,.feld12-actions,.feld12-button,.feld12-stage-nav,.feld12-help-toggle{display:none!important}.feld12-start-hero,.feld12-shell,.feld12-result-shell,.feld12-result-hero,.feld12-diagnosis-card,.feld12-details{box-shadow:none!important;background:#fff!important;color:#111!important;border-color:#ddd!important}.feld12-business-app p,.feld12-business-app h2,.feld12-business-app h3,.feld12-business-app h4,.feld12-business-app strong{color:#111!important}.feld12-result-chips,.feld12-path-grid,.feld12-result-columns{grid-template-columns:1fr 1fr}.feld12-diagnosis-card{break-inside:avoid}}

/* V37.50 Schritt 5 – Komponenten-Tokens für den FELD12 Klarheitsraum
   Nur visuelle Basiswerte. Keine Texte, keine Logik, keine Strukturänderung. */
.feld12-business-app{
  --f12-component-bg:var(--f12-bg-card,#FFFCF6);
  --f12-component-bg-hover:var(--f12-hover,#F3E7D4);
  --f12-component-bg-active:#FFF8EA;
  --f12-component-border:1px solid var(--f12-line,#E5D8C7);
  --f12-component-border-hover:1px solid rgba(184,137,50,.46);
  --f12-component-border-active:1.5px solid rgba(184,137,50,.72);
  --f12-component-radius:var(--f12-radius-lg,24px);
  --f12-component-radius-sm:var(--f12-radius-md,18px);
  --f12-component-shadow:var(--f12-shadow-sm,0 10px 26px rgba(35,28,21,.06));
  --f12-component-shadow-hover:0 14px 34px rgba(35,28,21,.085);
  --f12-component-shadow-active:0 16px 38px rgba(184,137,50,.14);
  --f12-button-radius:var(--f12-radius-md,18px);
  --f12-button-primary-bg:linear-gradient(135deg,var(--f12-espresso,#211A15),var(--f12-espresso-soft,#34291D));
  --f12-button-primary-text:#FFF7E8;
  --f12-button-secondary-bg:var(--f12-bg-paper,#FFFDF8);
  --f12-button-secondary-text:var(--f12-ink,#211A15);
  --f12-button-border:1px solid var(--f12-line-strong,#D6C2A8);
  --f12-answer-active-accent:var(--f12-gold,#B88932);
  --f12-answer-min-touch:48px;
  --f12-answer-pad-y:18px;
  --f12-answer-pad-x:20px;

  /* V37.50 Schritt 8 – Motion-/Interaction-Basis: ruhig, funktional, barrierefrei */
  --f12-motion-fast:160ms;
  --f12-motion-base:190ms;
  --f12-motion-slow:220ms;
  --f12-motion-ease:cubic-bezier(.2,.8,.2,1);
  --f12-motion-ease-soft:cubic-bezier(.22,1,.36,1);
  --f12-focus-ring:3px solid rgba(184,137,50,.45);
  --f12-focus-offset:3px;
}