/* ============================================================
   Workforce Integration · Brand Identity Kit 1.0
   Palette: ausschliesslich die 10 definierten Werte
   Display Poppins · Fliesstext IBM Plex Sans
   Ecken: Buttons 3px, Karten 2px · keine Schatten
   ============================================================ */
:root{
  /* Petrol-Achse */
  --petrol-tief:#103A3D;
  --petrol:#1B585D;
  --petrol-hell:#6BACAF;
  /* Naturton */
  --terrakotta:#9E5836;
  --terrakotta-hell:#D49A7B;
  /* Erd-Achse */
  --schnee:#FBF8F3;
  --leinen:#F4EFE7;
  --sand:#E3D7C5;
  --lehm:#756A5C;
  --anthrazit:#262119;

  /* Rollen · hell */
  --grund:var(--schnee);
  --flaeche:var(--leinen);
  --linie:var(--sand);
  --text:var(--anthrazit);
  --text-meta:var(--lehm);
  --headline:var(--petrol);
  --akzent:var(--terrakotta);
  --auswahl:var(--petrol);
  --auswahl-text:var(--schnee);
  --feld:var(--schnee);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --grund:var(--petrol-tief);
    --flaeche:#16474B;
    --linie:rgba(212,154,123,.25);
    --text:var(--schnee);
    --text-meta:rgba(251,248,243,.68);
    --headline:var(--terrakotta-hell);
    --akzent:var(--terrakotta-hell);
    --auswahl:var(--terrakotta-hell);
    --auswahl-text:var(--petrol-tief);
    --feld:rgba(251,248,243,.06);
  }
}
:root[data-theme="dark"]{
  --grund:var(--petrol-tief);
  --flaeche:#16474B;
  --linie:rgba(212,154,123,.25);
  --text:var(--schnee);
  --text-meta:rgba(251,248,243,.68);
  --headline:var(--terrakotta-hell);
  --akzent:var(--terrakotta-hell);
  --auswahl:var(--terrakotta-hell);
  --auswahl-text:var(--petrol-tief);
  --feld:rgba(251,248,243,.06);
}

/* ============================================================
   Schutzschicht gegen fremde Theme-Regeln.
   Wird der Rechner in eine bestehende Seite eingefuegt, setzen viele
   WordPress-Themes text-transform, Kursivsatz, Laufweite oder eigene
   Schriften auf Ueberschriften und Absaetze: teils mit !important.
   Diese Schicht neutralisiert das, die Regeln darunter setzen die
   gewollten Werte mit hoeherer Spezifitaet wieder.
   ============================================================ */
.wfi-app, .wfi-app *{
  text-transform:none !important;
  font-style:normal !important;
  font-variant:normal !important;
  letter-spacing:normal !important;
  text-align:left !important;
  text-decoration:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  float:none !important;
  max-width:none !important;
  min-width:0 !important;
  list-style:none !important;
  text-indent:0 !important;
}
.wfi-app button, .wfi-app input, .wfi-app select, .wfi-app textarea, .wfi-app summary{
  -webkit-appearance:none !important; appearance:none !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 !important; width:auto !important; height:auto !important;
  font:inherit; color:inherit;
}
.wfi-app a{color:inherit; background:none !important}
.wfi-app summary{display:list-item !important; list-style:revert !important; cursor:pointer}
.wfi-app h1, .wfi-app h2, .wfi-app h3, .wfi-app h4{
  font-weight:600 !important; padding:0 !important;
}
.wfi-app p, .wfi-app ul, .wfi-app li, .wfi-app dl, .wfi-app dt, .wfi-app dd,
.wfi-app table, .wfi-app td, .wfi-app th{background:none}


.wfi-app, .wfi-app *{box-sizing:border-box}
.wfi-app{
  margin:0; background:var(--grund); color:var(--text);
  font-family:"IBM Plex Sans","Source Sans 3","Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wfi-app h1, .wfi-app h2, .wfi-app h3, .wfi-app h4, .wfi-app .disp{
  font-family:Poppins,Montserrat,"Segoe UI",Arial,sans-serif !important;
  font-weight:600 !important; margin:0; line-height:1.18; hyphens:none;
}
.wfi-app .num{font-variant-numeric:tabular-nums}
.wfi-app .wrap{max-width:960px !important; margin:0 auto; padding:0 24px}
.wfi-app .prose{max-width:68ch !important}

/* ---------- Labels & Eyebrows: Poppins Medium, Versal ---------- */
.wfi-app .label{
  font-family:Poppins,Montserrat,sans-serif; font-weight:500; font-size:11px;
  letter-spacing:.22em !important; text-transform:uppercase !important; color:var(--akzent); line-height:1.4;
}

/* ---------- Masthead mit Diagonale ---------- */
.wfi-app .mast{position:relative; overflow:hidden; background:var(--petrol-tief); color:var(--schnee); isolation:isolate}
.wfi-app .mast-art{position:absolute; inset:0; z-index:-1; pointer-events:none}
.wfi-app .diag{position:absolute; left:-6%; right:-6%; bottom:-16%; height:30%; background:var(--petrol); transform:rotate(-5deg)}
.wfi-app .strip{position:absolute; top:0; right:0; width:clamp(28px,5vw,64px); height:100%; background:var(--petrol-tief)}
.wfi-app .mast .wrap{padding-top:clamp(72px,9vw,128px); padding-bottom:76px}
.wfi-app .mast .label{display:block; color:var(--terrakotta-hell); margin:0 0 14px}
.wfi-app .mast h1{font-size:clamp(30px,5vw,46px); letter-spacing:-.02em !important; color:var(--schnee); margin-top:0; max-width:19ch !important}
.wfi-app .mast .lead{
  font-weight:300; font-size:clamp(17px,2.2vw,19px); line-height:1.6;
  color:rgba(251,248,243,.82); max-width:60ch !important; margin:16px 0 0;
}

/* ---------- Schritt-Navigation ---------- */
.wfi-app .nav{position:sticky; top:0; z-index:20; background:var(--petrol-tief); border-bottom:1px solid rgba(212,154,123,.2)}
.wfi-app .steps{display:flex; overflow-x:auto; scrollbar-width:none}
.wfi-app .steps::-webkit-scrollbar{display:none}
.wfi-app .stepbtn{
  appearance:none !important; border:0 !important; background:none !important; cursor:pointer; flex:1 0 auto; min-width:136px !important;
  padding:14px 14px 12px !important; text-align:left !important; border-bottom:1px solid transparent !important;
  color:rgba(251,248,243,.55) !important; font:400 15px/1.35 "IBM Plex Sans","Segoe UI",Arial,sans-serif !important;
  display:flex; gap:9px; align-items:baseline; margin-bottom:-1px;
}
.wfi-app .stepbtn:hover:not(:disabled){color:var(--schnee) !important}
.wfi-app .stepbtn:disabled{cursor:not-allowed; opacity:.45}
.wfi-app .stepbtn .n{font-family:Poppins,sans-serif !important; font-weight:600 !important; font-size:12px !important; color:var(--petrol-hell) !important}
.wfi-app .stepbtn[aria-current="true"]{color:var(--schnee) !important; border-bottom-color:var(--terrakotta-hell) !important}
.wfi-app .stepbtn[aria-current="true"] .n{color:var(--terrakotta-hell) !important}
.wfi-app .stepbtn.done .n{color:var(--terrakotta-hell) !important}

/* ---------- Panels ---------- */
/* main traegt auch .wrap, deshalb hier mit gleicher Spezifitaet setzen */
.wfi-app main.wrap{padding-top:44px; padding-bottom:104px}
.wfi-app .panel[hidden]{display:none}
.wfi-app .panel h2{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.01em !important; color:var(--headline); margin:10px 0 12px}
.wfi-app .lede{font-weight:300; font-size:18px; line-height:1.6; color:var(--text); max-width:64ch !important; margin:0 0 30px}

.wfi-app .card{background:var(--flaeche); border:1px solid var(--linie); border-radius:2px}
.wfi-app .field{padding:22px 24px; border-bottom:1px solid var(--linie)}
.wfi-app .field:last-child{border-bottom:0}
.wfi-app .qlabel{display:block; font-family:Poppins,sans-serif; font-weight:500; font-size:19px; line-height:1.35; color:var(--text); margin-bottom:4px}
.wfi-app .hint{color:var(--text-meta); font-size:14px; letter-spacing:.01em !important; margin:0 0 14px; max-width:62ch !important; line-height:1.6}

/* Optionen: Rechtecke mit 3px Ecke, nie Pillen */
.wfi-app .opts{display:flex; flex-wrap:wrap; gap:8px}
.wfi-app .opt{
  appearance:none !important; border:1px solid var(--linie) !important; background:var(--feld) !important; color:var(--text) !important;
  border-radius:3px !important; padding:9px 15px !important; font:400 15px/1.25 "IBM Plex Sans","Segoe UI",Arial,sans-serif !important;
  cursor:pointer; transition:border-color .12s, background .12s, color .12s;
}
.wfi-app .opt:hover{border-color:var(--petrol-hell) !important}
.wfi-app .opt[aria-pressed="true"]{background:var(--auswahl) !important; border-color:var(--auswahl) !important; color:var(--auswahl-text) !important; font-weight:500 !important}

.wfi-app .grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px}
.wfi-app input[type="number"], .wfi-app input[type="email"]{
  width:100% !important; padding:11px 13px !important; border:1px solid var(--linie) !important; border-radius:3px !important;
  background:var(--feld) !important; color:var(--text) !important;
  font:400 16px/1.4 "IBM Plex Sans","Segoe UI",Arial,sans-serif !important; font-variant-numeric:tabular-nums;
}
.wfi-app input[type="range"]{width:100% !important; accent-color:var(--petrol) !important; background:transparent !important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app input[type="range"]{accent-color:var(--terrakotta-hell)}}
:root[data-theme="dark"] .wfi-app input[type="range"]{accent-color:var(--terrakotta-hell) !important}
.wfi-app input:focus-visible, .wfi-app .opt:focus-visible, .wfi-app button:focus-visible, .wfi-app .stepbtn:focus-visible, .wfi-app summary:focus-visible{
  outline:2px solid var(--akzent); outline-offset:2px
}
.wfi-app .inline{display:flex; align-items:center}
.wfi-app .unit{color:var(--text-meta); font-size:14px; margin-left:9px}

/* Situationsblock */
.wfi-app .block{border:1px solid var(--linie); border-radius:2px; margin-bottom:18px; background:var(--flaeche)}
.wfi-app .block-head{
  background:var(--petrol); color:var(--schnee); padding:13px 20px; display:flex; align-items:center; gap:12px;
  font-family:Poppins,sans-serif; font-weight:500; font-size:18px;
}
.wfi-app .block-head .k{
  font-family:Poppins,sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em !important;
  color:var(--terrakotta-hell); border:1px solid var(--terrakotta-hell); padding:2px 8px; border-radius:3px;
}
.wfi-app .block-body{padding:4px 20px 20px}
.wfi-app .q{padding:16px 0; border-bottom:1px solid var(--linie)}
.wfi-app .q:last-child{border-bottom:0}

/* Schaltflächen */
.wfi-app .actions{display:flex; justify-content:space-between; gap:14px; margin-top:44px; flex-wrap:wrap}
.wfi-app .btn{
  appearance:none !important; display:inline-block; border:1px solid transparent !important; border-radius:3px !important; padding:13px 24px !important;
  cursor:pointer; text-decoration:none !important; text-align:center !important;
  font-family:Poppins,Montserrat,sans-serif !important; font-weight:500 !important; font-size:13px !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; line-height:1.3 !important;
}
.wfi-app .btn-primary{background:var(--terrakotta) !important; color:var(--schnee) !important}
.wfi-app .btn-primary:hover{background:#8B4C2E !important}
.wfi-app .btn-secondary{background:transparent !important; border-color:var(--petrol) !important; color:var(--petrol) !important}
.wfi-app .btn-secondary:hover{border-color:var(--terrakotta) !important; color:var(--terrakotta) !important}
.wfi-app .btn-ondark{background:transparent !important; border-color:var(--terrakotta-hell) !important; color:var(--schnee) !important}
.wfi-app .btn-ondark:hover{background:rgba(212,154,123,.14) !important}
.wfi-app .btn:disabled{opacity:.4; cursor:not-allowed}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wfi-app .btn-primary{background:var(--terrakotta-hell) !important; color:var(--petrol-tief) !important}
  :root:not([data-theme="light"]) .wfi-app .btn-primary:hover{background:#E0AC90 !important}
  :root:not([data-theme="light"]) .wfi-app .btn-secondary{border-color:var(--petrol-hell) !important; color:var(--petrol-hell) !important}
  :root:not([data-theme="light"]) .wfi-app .btn-secondary:hover{border-color:var(--terrakotta-hell) !important; color:var(--terrakotta-hell) !important}
}
:root[data-theme="dark"] .wfi-app .btn-primary{background:var(--terrakotta-hell) !important; color:var(--petrol-tief) !important}
:root[data-theme="dark"] .wfi-app .btn-primary:hover{background:#E0AC90 !important}
:root[data-theme="dark"] .wfi-app .btn-secondary{border-color:var(--petrol-hell) !important; color:var(--petrol-hell) !important}
:root[data-theme="dark"] .wfi-app .btn-secondary:hover{border-color:var(--terrakotta-hell) !important; color:var(--terrakotta-hell) !important}

/* Hinweis mit Terrakotta-Kante */
.wfi-app .hinweis{
  border-left:2px solid var(--terrakotta); background:var(--flaeche); color:var(--text);
  padding:15px 20px; margin:22px 0; font-size:15px; line-height:1.65; max-width:66ch !important;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .hinweis{border-left-color:var(--terrakotta-hell)}}
:root[data-theme="dark"] .wfi-app .hinweis{border-left-color:var(--terrakotta-hell)}

/* ---------- Ergebnis ---------- */
.wfi-app .ergebnis{position:relative; overflow:hidden; background:var(--petrol-tief); color:var(--schnee); padding:34px 34px 30px; border-radius:2px; border-top:2px solid var(--terrakotta)}
.wfi-app .ergebnis .strip{width:clamp(20px,4vw,44px); background:var(--petrol)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .ergebnis{background:var(--flaeche); border-top-color:var(--terrakotta-hell)} :root:not([data-theme="light"]) .wfi-app .ergebnis .strip{background:var(--petrol-tief)}}
:root[data-theme="dark"] .wfi-app .ergebnis{background:var(--flaeche); border-top-color:var(--terrakotta-hell)}
:root[data-theme="dark"] .wfi-app .ergebnis .strip{background:var(--petrol-tief)}
.wfi-app .ergebnis .label{color:var(--terrakotta-hell)}
.wfi-app .bignum{
  font-family:Poppins,sans-serif; font-weight:600; font-size:clamp(44px,9vw,78px); line-height:1;
  letter-spacing:-.02em !important; color:var(--terrakotta-hell); font-variant-numeric:tabular-nums; margin:14px 0 8px;
}
.wfi-app .bignum small{font-family:"IBM Plex Sans",sans-serif; font-weight:300; font-size:.28em; letter-spacing:0 !important; color:rgba(251,248,243,.8); margin-left:.4em}
.wfi-app .ergebnis .sub{color:rgba(251,248,243,.82); max-width:56ch !important; margin:0; font-weight:300; font-size:17px; line-height:1.6}
.wfi-app .dials{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid rgba(212,154,123,.25)}
.wfi-app .dials .label{color:rgba(251,248,243,.7) !important; margin-right:4px}
.wfi-app .dial{
  appearance:none !important; border:1px solid rgba(212,154,123,.5) !important; background:transparent !important; color:var(--schnee) !important;
  border-radius:3px !important; padding:8px 14px !important; font:400 14px/1.2 "IBM Plex Sans",sans-serif !important; cursor:pointer;
}
.wfi-app .dial:hover{border-color:var(--terrakotta-hell) !important}
.wfi-app .dial[aria-pressed="true"]{background:var(--terrakotta-hell) !important; border-color:var(--terrakotta-hell) !important; color:var(--petrol-tief) !important; font-weight:500 !important}

.wfi-app .sec{margin-top:64px}
.wfi-app .sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:16px}
.wfi-app .sec-head h3{font-family:Poppins,sans-serif; font-weight:500; font-size:22px; color:var(--headline)}
.wfi-app .sec-head .rule{flex:1; height:1px; background:var(--linie)}

.wfi-app .bd{padding:2px 24px 8px}
.wfi-app .bd-row{padding:16px 0; border-bottom:1px solid var(--linie)}
.wfi-app .bd-row:last-child{border-bottom:0}
.wfi-app .bd-top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:9px}
.wfi-app .bd-name{font-family:Poppins,sans-serif; font-weight:500; font-size:17px; color:var(--text)}
.wfi-app .bd-name span{display:block; font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:13.5px; color:var(--text-meta); line-height:1.5; margin-top:2px}
.wfi-app .bd-val{font-family:Poppins,sans-serif; font-weight:600; font-size:17px; color:var(--akzent); font-variant-numeric:tabular-nums; white-space:nowrap}
.wfi-app .bar{height:6px; background:var(--linie); overflow:hidden}
.wfi-app .bar i{display:block; height:100%; background:var(--petrol); transition:width .5s cubic-bezier(.2,.7,.3,1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .bar{background:rgba(251,248,243,.12)} :root:not([data-theme="light"]) .wfi-app .bar i{background:var(--petrol-hell)}}
:root[data-theme="dark"] .wfi-app .bar{background:rgba(251,248,243,.12)}
:root[data-theme="dark"] .wfi-app .bar i{background:var(--petrol-hell)}

/* Preiskacheln */
.wfi-app .formate{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px}
.wfi-app .fmt{background:var(--flaeche); border:1px solid var(--linie); border-top:2px solid var(--linie); border-radius:2px; padding:22px}
.wfi-app .fmt.rec{border-top-color:var(--terrakotta)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .fmt.rec{border-top-color:var(--terrakotta-hell)}}
:root[data-theme="dark"] .wfi-app .fmt.rec{border-top-color:var(--terrakotta-hell)}
.wfi-app .fmt h4{font-family:Poppins,sans-serif; font-weight:500; font-size:20px; color:var(--text); margin:9px 0 3px}
.wfi-app .fmt .preis{font-family:Poppins,sans-serif; font-weight:600; font-size:27px; color:var(--akzent); letter-spacing:-.01em !important; font-variant-numeric:tabular-nums}
.wfi-app .fmt .preis small{font-family:"IBM Plex Sans",sans-serif; font-weight:400; font-size:13px; color:var(--text-meta); letter-spacing:0 !important; margin-left:5px}
.wfi-app .fmt .was{font-size:14px; color:var(--text-meta); line-height:1.55; margin:10px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--linie)}
.wfi-app .fmt dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:8px 12px; font-size:14.5px; align-items:baseline}
.wfi-app .fmt dt{color:var(--text-meta)}
.wfi-app .fmt dd{margin:0; text-align:right !important; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:500}
.wfi-app .fmt .stark{font-family:Poppins,sans-serif; font-weight:600; color:var(--akzent)}

/* Terrakotta-Strich statt Punkt */
.wfi-app .striche{list-style:none !important; padding:0; margin:0; display:grid; gap:12px; max-width:70ch !important}
.wfi-app .striche li{display:grid; grid-template-columns:16px 1fr; gap:14px; font-size:15.5px; line-height:1.6; color:var(--text)}
.wfi-app .striche li::before{content:""; height:1px; background:var(--terrakotta); margin-top:.75em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .striche li::before{background:var(--terrakotta-hell)}}
:root[data-theme="dark"] .wfi-app .striche li::before{background:var(--terrakotta-hell)}
.wfi-app .striche b{font-family:Poppins,sans-serif; font-weight:500; color:var(--headline)}

/* CTA */
.wfi-app .cta{position:relative; overflow:hidden; background:var(--petrol-tief); color:var(--schnee); padding:32px 34px; border-radius:2px; border-top:2px solid var(--terrakotta)}
.wfi-app .cta .strip{background:var(--petrol)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wfi-app .cta{background:var(--flaeche); border-top-color:var(--terrakotta-hell)} :root:not([data-theme="light"]) .wfi-app .cta .strip{background:var(--petrol-tief)}}
:root[data-theme="dark"] .wfi-app .cta{background:var(--flaeche); border-top-color:var(--terrakotta-hell)}
:root[data-theme="dark"] .wfi-app .cta .strip{background:var(--petrol-tief)}
.wfi-app .cta h3{font-family:Poppins,sans-serif; font-weight:500; font-size:24px; color:var(--terrakotta-hell); margin-bottom:8px}
.wfi-app .cta p{color:rgba(251,248,243,.82); max-width:58ch !important; margin:0; font-weight:300; font-size:17px; line-height:1.6}
/* .cta p setzt margin:0: deshalb hier mit gleicher Spezifitaet ueberschreiben */
.wfi-app .cta p.cta-aktion{margin:36px 0 0}

/* Annahmen */
.wfi-app .annahmen{margin-top:44px; border-top:1px solid var(--linie); padding-top:20px}
.wfi-app .annahmen summary{cursor:pointer; font-family:Poppins,sans-serif !important; font-weight:500 !important; font-size:16px !important; color:var(--headline) !important}
.wfi-app .tablewrap{overflow-x:auto}
.wfi-app .annahmen table{width:100%; border-collapse:collapse; margin-top:16px; font-size:14px; min-width:420px !important}
.wfi-app .annahmen td{padding:9px 12px 9px 0; border-bottom:1px solid var(--linie); color:var(--text-meta)}
.wfi-app .annahmen td:last-child{text-align:right !important; white-space:nowrap; color:var(--text); font-variant-numeric:tabular-nums; font-weight:500}
.wfi-app .annahmen p{font-size:14px; color:var(--text-meta); max-width:70ch !important; line-height:1.65}

.wfi-app footer{border-top:1px solid var(--linie); padding:22px 0 52px; margin-top:0}
.wfi-app footer p{margin:0; max-width:70ch !important; font-size:13.5px; line-height:1.65; color:var(--text-meta)}

@media (max-width:640px){
  .wfi-app .field{padding:18px 16px}
  .wfi-app .block-body{padding:4px 16px 16px}
  .wfi-app .ergebnis, .wfi-app .cta{padding:24px 20px}
  .wfi-app .bd{padding:2px 16px 6px}
  .wfi-app main.wrap{padding-top:34px; padding-bottom:80px}
  .wfi-app .sec{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.wfi-app, .wfi-app *{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* ============================================================
   v4 · 27.09.2026 · Deboras Feedback: weniger KI-/Template-Look
   Weichere Ecken, Pillen statt Rechtecke, Satzschrift statt Versalien
   auf Buttons, Karten statt gestapelter Kastenraster, Schieberegler
   mit sichtbarer Spur. Farben und Schriften bleiben (Brand Kit).
   Diese Schicht steht bewusst ganz am Ende und überschreibt nur Form.
   ============================================================ */
.wfi-app{--r-karte:16px; --r-feld:10px; --r-button:999px}

/* Kopf: Diagonale sanfter, ohne harten Randstreifen; Navigation unten gerundet */
.wfi-app .mast .strip{display:none}
.wfi-app .diag{transform:rotate(-3deg); bottom:-20%; opacity:.9}
.wfi-app .nav{border-bottom:0; border-radius:0 0 26px 26px}

/* Schritt-Navigation als ruhige Pillen */
.wfi-app .steps{gap:6px; padding:10px 0 12px}
.wfi-app .stepbtn{min-width:0 !important; flex:0 0 auto; padding:8px 16px !important; border-radius:999px !important;
  border-bottom:0 !important; margin-bottom:0}
.wfi-app .stepbtn[aria-current="true"]{background:rgba(212,154,123,.18) !important; border-bottom:0 !important}
.wfi-app .stepbtn .n{font-size:12px !important}

/* Eyebrows: weniger gesperrt */
.wfi-app .label{letter-spacing:.12em !important; font-size:11.5px}

/* Fragen: einzelne Karten mit Luft statt eines Kastenrasters */
.wfi-app .card{background:transparent; border:0; border-radius:0; display:grid; gap:14px}
.wfi-app .field{background:var(--flaeche); border:0 !important; border-radius:var(--r-karte); padding:24px 26px}
.wfi-app .qlabel{font-size:18px}

/* Auswahl: Pillen */
.wfi-app .opt{border-radius:var(--r-button) !important; padding:9px 18px !important; background:var(--grund) !important}
.wfi-app .opt[aria-pressed="true"]{background:var(--auswahl) !important}

/* Eingabefelder */
.wfi-app input[type="number"], .wfi-app input[type="email"]{border-radius:var(--r-feld) !important; background:var(--grund) !important}
.wfi-app .unit{white-space:nowrap}

/* Schieberegler: die Schutzschicht nimmt ihm Spur und Griff: hier zurückgeben */
.wfi-app input[type="range"]{-webkit-appearance:none !important; appearance:none !important; height:26px !important;
  background:transparent !important; cursor:pointer; padding:0 !important}
.wfi-app input[type="range"]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:var(--linie)}
.wfi-app input[type="range"]::-moz-range-track{height:6px; border-radius:3px; background:var(--linie)}
.wfi-app input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px;
  border-radius:50%; background:var(--auswahl); border:3px solid var(--grund)}
.wfi-app input[type="range"]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--auswahl); border:3px solid var(--grund)}

/* Situationsblöcke */
.wfi-app .block{border:0; border-radius:var(--r-karte); overflow:hidden; margin-bottom:16px}
.wfi-app .block-head{background:var(--petrol); padding:14px 22px}
.wfi-app .block-head .k{border-radius:999px; padding:2px 10px}
.wfi-app .block-body{padding:6px 22px 22px}

/* Schaltflächen: Satzschrift, runder */
.wfi-app .btn{border-radius:var(--r-button) !important; text-transform:none !important; letter-spacing:.01em !important;
  font-size:15px !important; padding:13px 26px !important}
.wfi-app .dial{border-radius:999px !important}

/* Hinweis, Ergebnis, Formate, CTA */
.wfi-app .hinweis{border-left:0; border-radius:var(--r-karte); padding:16px 22px; position:relative}
.wfi-app .hinweis::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--akzent)}
.wfi-app .ergebnis{border-radius:22px; border-top:0}
.wfi-app .cta{border-radius:22px; border-top:0}
.wfi-app .ergebnis .strip, .wfi-app .cta .strip{display:none}
.wfi-app .bar{border-radius:3px}
.wfi-app .bar i{border-radius:3px}
.wfi-app .bd{background:var(--flaeche); border-radius:var(--r-karte); padding:6px 24px 10px}
.wfi-app .fmt{border:0; border-radius:var(--r-karte); padding:24px}
.wfi-app .fmt.rec{box-shadow:inset 0 0 0 2px var(--akzent) !important}
.wfi-app .sec-head .rule{opacity:.6}


/* Aufzählung: dezente Punkte statt Striche (Mario, 27.09.) */
.wfi-app .striche li{grid-template-columns:8px 1fr; gap:14px}
.wfi-app .striche li::before{width:7px; height:7px !important; border-radius:50%; margin-top:.62em}
@media (max-width:640px){
  .wfi-app .field{padding:18px 18px}
  .wfi-app .nav{border-radius:0 0 18px 18px}
}

/* Website: Schutz gegen Zeilenumbruch am Bindestrich, Schrift erbt vom Label */
.wfi-app .nw{text-transform:inherit !important;letter-spacing:inherit !important;white-space:nowrap}