/* ==========================================================================
   Fünf-Elemente-Test · OK Qigong
   Alles unter .fet-app gekapselt, damit Theme-Styles nicht durchschlagen
   und dieses CSS keine Theme-Elemente beeinflusst.
   Schrift: Fraunces/Inter werden genutzt, wenn per Filter geladen –
   sonst greift der System-/Serif-Fallback (DSGVO-freundlich als Default).
   ========================================================================== */

.fet-app{
  /* Farb-Token (mit fet- Präfix, um Kollisionen zu vermeiden) */
  --fet-paper:#EAECE8;
  --fet-paper-2:#F2F3F0;
  --fet-card:#FBFBF9;
  --fet-ink:#232B27;
  --fet-ink-soft:#4A5450;
  --fet-ink-faint:#8B948F;
  --fet-line:#D5D8D2;
  --fet-sage:#6E8B74;
  --fet-sage-deep:#4C6753;
  --fet-water:#2C4A5A;
  --fet-wood:#5C7F4F;
  --fet-fire:#B34733;
  --fet-earth:#C79A3E;
  --fet-metal:#6F7C84;
  --fet-radius:14px;
  --fet-ease:cubic-bezier(.22,.61,.36,1);
  --fet-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fet-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  /* Container-Grundlayout */
  box-sizing:border-box;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:clamp(22px,5vw,44px) clamp(18px,5vw,36px) 48px;
  background:radial-gradient(120% 90% at 50% -6%, var(--fet-paper-2), var(--fet-paper) 62%);
  border:1px solid var(--fet-line);
  border-radius:calc(var(--fet-radius) + 6px);
  color:var(--fet-ink);
  font-family:var(--fet-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.fet-app.fet-align-left{margin-left:0;}
.fet-app.fet-align-right{margin-right:0;}

/* ---- Defensive Resets, nur innerhalb der App ---- */
.fet-app *,
.fet-app *::before,
.fet-app *::after{box-sizing:border-box;}
.fet-app p,
.fet-app h1,
.fet-app h2,
.fet-app ul,
.fet-app li{margin:0;padding:0;}
.fet-app ul{list-style:none;}
.fet-app svg{display:block;max-width:100%;}
.fet-app button{
  font:inherit;color:inherit;background:none;border:none;
  margin:0;text-align:inherit;line-height:inherit;
}

/* ---- Typografie-Helfer ---- */
.fet-app .fet-display{font-family:var(--fet-serif);font-weight:500;line-height:1.05;letter-spacing:-.01em;}
.fet-app .fet-glyph{font-family:var(--fet-serif);}
.fet-app .fet-center{text-align:center;}
.fet-app .fet-eyebrow{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fet-sage-deep);font-weight:600;
}

/* ---- Screens ---- */
.fet-app .fet-screen{display:none;}
.fet-app .fet-screen.fet-active{display:block;animation:fet-rise .55s var(--fet-ease) both;}
@keyframes fet-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---- Intro ---- */
.fet-app .fet-introMark{display:flex;justify-content:center;margin:2px 0 24px;}
.fet-app .fet-introMark svg{width:180px;height:180px;overflow:visible;}
.fet-app .fet-h1{font-size:clamp(2.3rem,6.5vw,3.7rem);margin:0 0 .1em;text-align:center;}
.fet-app .fet-intro .fet-eyebrow{display:block;text-align:center;margin-bottom:14px;}
.fet-app .fet-zh{display:block;font-size:.5em;color:var(--fet-sage-deep);letter-spacing:.14em;margin-bottom:.15em;font-weight:400;}
.fet-app .fet-lede{
  text-align:center;color:var(--fet-ink-soft);font-size:1.06rem;
  max-width:52ch;margin:1.2em auto 0;
}
.fet-app .fet-source{text-align:center;color:var(--fet-ink-faint);font-size:.86rem;margin-top:1.4em;line-height:1.5;}
.fet-app .fet-source em{font-style:italic;}
.fet-app .fet-metaline{margin-top:18px;}

.fet-app .fet-scaleKey{
  margin:34px auto 0;max-width:520px;
  background:var(--fet-card);border:1px solid var(--fet-line);border-radius:var(--fet-radius);
  padding:20px 22px;
}
.fet-app .fet-scaleKey-title{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fet-ink-faint);margin:0 0 14px;font-weight:600;}
.fet-app .fet-scaleKey ul{display:grid;gap:9px;}
.fet-app .fet-scaleKey li{display:flex;align-items:baseline;gap:12px;font-size:.94rem;color:var(--fet-ink-soft);}
.fet-app .fet-v{
  flex:0 0 auto;min-width:2.6em;text-align:center;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--fet-ink);font-size:.85rem;
  background:var(--fet-paper-2);border:1px solid var(--fet-line);border-radius:8px;padding:2px 0;
}

/* ---- Buttons ---- */
.fet-app .fet-btn{
  font-family:var(--fet-sans);font-size:1rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;border-radius:999px;padding:15px 34px;
  background:var(--fet-sage-deep);color:#fff;
  transition:background .25s var(--fet-ease),transform .12s var(--fet-ease),box-shadow .25s var(--fet-ease);
  box-shadow:0 6px 18px -8px rgba(38,48,44,.5);
}
.fet-app .fet-btn:hover{background:var(--fet-ink);transform:translateY(-1px);}
.fet-app .fet-btn:active{transform:translateY(0);}
.fet-app .fet-btn:disabled{background:var(--fet-line);color:var(--fet-ink-faint);cursor:not-allowed;box-shadow:none;transform:none;}
.fet-app .fet-btn:focus-visible{outline:2px solid var(--fet-sage-deep);outline-offset:3px;}
.fet-app .fet-btn-ghost{background:transparent;color:var(--fet-sage-deep);box-shadow:none;padding:15px 20px;}
.fet-app .fet-btn-ghost:hover{background:transparent;color:var(--fet-ink);transform:none;}
.fet-app .fet-introCta{display:flex;justify-content:center;margin-top:32px;}

/* ---- Test ---- */
.fet-app .fet-topbar{
  position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--fet-paper) 72%, transparent);
  padding:14px 0 18px;margin-bottom:6px;
}
.fet-app .fet-steps{display:flex;gap:7px;align-items:center;justify-content:center;margin-bottom:10px;}
.fet-app .fet-dot{height:5px;flex:1 1 0;max-width:64px;border-radius:99px;background:var(--fet-line);transition:background .4s var(--fet-ease);}
.fet-app .fet-dot.fet-done{background:var(--fet-sage);}
.fet-app .fet-dot.fet-current{background:var(--fet-sage-deep);}
.fet-app .fet-stepMeta{text-align:center;}
.fet-app .fet-part{font-family:var(--fet-serif);font-size:1.15rem;color:var(--fet-ink);}
.fet-app .fet-count{font-size:.82rem;color:var(--fet-ink-faint);margin-left:.5em;font-variant-numeric:tabular-nums;}

.fet-app .fet-lead{margin:8px 0 22px;}
.fet-app .fet-lead p{color:var(--fet-ink-soft);font-size:.96rem;}

.fet-app .fet-statement{padding:20px 0;border-top:1px solid var(--fet-line);}
.fet-app .fet-statement:first-child{border-top:none;}
.fet-app .fet-stmtText{margin:0 0 14px;font-size:1.06rem;color:var(--fet-ink);line-height:1.45;}
.fet-app .fet-n{color:var(--fet-ink-faint);font-variant-numeric:tabular-nums;margin-right:.5em;font-size:.9em;}

.fet-app .fet-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.fet-app .fet-opt{
  cursor:pointer;text-align:center;
  background:var(--fet-card);border:1px solid var(--fet-line);border-radius:11px;
  padding:11px 4px 9px;color:var(--fet-ink-soft);
  transition:border-color .18s var(--fet-ease),background .18s var(--fet-ease),color .18s var(--fet-ease),transform .1s var(--fet-ease);
  display:flex;flex-direction:column;gap:3px;line-height:1.15;
}
.fet-app .fet-opt:hover{border-color:var(--fet-sage);color:var(--fet-ink);}
.fet-app .fet-opt:active{transform:scale(.97);}
.fet-app .fet-opt .fet-lab{font-size:.82rem;font-weight:500;}
.fet-app .fet-opt .fet-val{font-size:.72rem;color:var(--fet-ink-faint);font-variant-numeric:tabular-nums;font-weight:600;}
.fet-app .fet-opt[aria-pressed="true"]{background:var(--fet-sage-deep);border-color:var(--fet-sage-deep);color:#fff;}
.fet-app .fet-opt[aria-pressed="true"] .fet-val{color:rgba(255,255,255,.72);}
.fet-app .fet-opt:focus-visible{outline:2px solid var(--fet-sage-deep);outline-offset:2px;}

.fet-app .fet-nav{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--fet-line);
}
.fet-app .fet-hint{font-size:.84rem;color:var(--fet-ink-faint);text-align:right;flex:1;}

/* ---- Ergebnis ---- */
.fet-app .fet-resHead{text-align:center;margin-bottom:8px;}
.fet-app .fet-resHead .fet-eyebrow{margin-bottom:14px;display:block;}
.fet-app .fet-resHead .fet-h1{font-size:clamp(1.8rem,5vw,2.7rem);}
.fet-app .fet-sub{color:var(--fet-ink-soft);margin-top:.5em;font-size:1.02rem;}

.fet-app .fet-pentaWrap{display:flex;justify-content:center;margin:22px 0 6px;}
.fet-app .fet-pentaWrap svg{width:min(360px,86vw);height:auto;overflow:visible;}
.fet-app .fet-pentaLegend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:2px 0 30px;font-size:.8rem;color:var(--fet-ink-faint);}
.fet-app .fet-pentaLegend span{display:inline-flex;align-items:center;gap:6px;}
.fet-app .fet-pentaLegend i{width:22px;height:0;border-top:2px solid currentColor;display:inline-block;}
.fet-app .fet-pentaLegend i.fet-dashed{border-top-style:dashed;}
.fet-app .fet-legSheng{color:var(--fet-sage-deep);}
.fet-app .fet-legKe{color:var(--fet-ink-faint);}

.fet-app .fet-ranking{display:grid;gap:14px;margin:0 0 12px;}
.fet-app .fet-rank{background:var(--fet-card);border:1px solid var(--fet-line);border-radius:var(--fet-radius);padding:16px 18px;}
.fet-app .fet-rank-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
.fet-app .fet-rank-name{display:flex;align-items:baseline;gap:10px;}
.fet-app .fet-rank-zh{font-family:var(--fet-serif);font-size:1.35rem;line-height:1;}
.fet-app .fet-rank-de{font-family:var(--fet-serif);font-size:1.2rem;color:var(--fet-ink);}
.fet-app .fet-rank-arch{font-size:.84rem;color:var(--fet-ink-faint);}
.fet-app .fet-rank-score{font-variant-numeric:tabular-nums;font-weight:600;font-size:1.05rem;color:var(--fet-ink);}
.fet-app .fet-rank-bar{height:9px;border-radius:99px;background:var(--fet-paper-2);overflow:hidden;}
.fet-app .fet-rank-fill{height:100%;border-radius:99px;width:0;transition:width .9s var(--fet-ease);}
.fet-app .fet-rank.fet-top{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset;}
.fet-app .fet-rank.fet-top .fet-rank-arch{color:currentColor;font-weight:600;}

.fet-app .fet-detail{
  background:var(--fet-card);border:1px solid var(--fet-line);border-left-width:4px;
  border-radius:var(--fet-radius);padding:24px 24px 22px;margin-top:22px;
}
.fet-app .fet-detail-flag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:8px;}
.fet-app .fet-detail-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:2px;}
.fet-app .fet-detail-title .zh{font-family:var(--fet-serif);font-size:2rem;line-height:1;}
.fet-app .fet-detail-title .de{font-family:var(--fet-serif);font-size:1.6rem;}
.fet-app .fet-detail-title .arch{color:var(--fet-ink-faint);font-size:1rem;}
.fet-app .fet-detail p{color:var(--fet-ink-soft);margin:.9em 0 0;}
.fet-app .fet-corr{margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;}
.fet-app .fet-corr li{font-size:.9rem;color:var(--fet-ink-soft);display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--fet-line);padding-top:8px;}
.fet-app .fet-corr li b{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fet-ink-faint);font-weight:600;}

.fet-app .fet-resNote{
  margin:26px 0 30px;padding:18px 20px;border-radius:var(--fet-radius);
  background:var(--fet-paper-2);border:1px solid var(--fet-line);
  font-size:.92rem;color:var(--fet-ink-soft);
}
.fet-app .fet-resNote strong{color:var(--fet-ink);font-weight:600;}
.fet-app .fet-resCta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}

.fet-app .fet-footer{text-align:center;color:var(--fet-ink-faint);font-size:.8rem;margin-top:44px;line-height:1.6;}
.fet-app .fet-footer em{font-style:italic;}

/* ---- Responsive ---- */
@media (max-width:520px){
  .fet-app .fet-scale{gap:6px;}
  .fet-app .fet-opt{padding:10px 2px 8px;border-radius:9px;}
  .fet-app .fet-opt .fet-lab{font-size:.76rem;}
  .fet-app .fet-corr{grid-template-columns:1fr;}
  .fet-app .fet-nav{flex-wrap:wrap;}
  .fet-app .fet-hint{flex-basis:100%;text-align:left;order:-1;}
}

@media (prefers-reduced-motion:reduce){
  .fet-app *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}