/* ============================================================
   MED PRO SY — FSP Bayern Course
   Design tokens · Type: "IBM Plex Sans Arabic" (UI) + "Source Sans 3" (German/Latin)
   Palette: deep green + gold on ivory
   ============================================================ */
:root{
  --green-950:#04170f; --green-900:#06231b; --green-800:#0b3d2e; --green-700:#10503c; --green-600:#17604a;
  --green-100:#dcebe3; --green-050:#eef5f1;
  --gold:#c9a227; --gold-700:#8a6d00; --gold-soft:#e8cf7a; --gold-bg:#fbf3d3;
  --ivory:#f7f3e9; --card:#fffdf7; --ink:#1c2420; --muted:#5c6a63; --line:#ddd3ba;
  --ok:#1e7d4f; --ok-bg:#e7f5ec; --bad:#b3372f; --bad-bg:#fbeae8;
  --radius:14px; --radius-s:10px;
  --shadow:0 1px 3px rgba(6,35,27,.07),0 4px 14px rgba(6,35,27,.05);
  --font-ui:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --font-de:"Source Sans 3","Segoe UI",Arial,sans-serif;
  --fs-1:.85rem; --fs-2:.95rem; --fs-3:1rem; --fs-4:1.125rem; --fs-5:1.35rem; --fs-6:clamp(1.55rem,4.5vw,2.4rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-ui);font-size:var(--fs-3);background:var(--ivory);color:var(--ink);line-height:1.75;overflow-x:hidden}
img,svg,video{max-width:100%}
a{color:var(--green-800);text-underline-offset:3px}
a:hover{color:var(--green-600)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{line-height:1.4;color:var(--green-900)}
h2{font-size:var(--fs-5);margin:1.2em 0 .5em}
.de{direction:ltr;text-align:left;unicode-bidi:isolate;font-family:var(--font-de);letter-spacing:.01em;overflow-wrap:break-word}
.grid>*,.case-grid>*,.fc-grid>*{min-width:0}
p .de,li .de{display:inline-block;vertical-align:baseline}

/* Header */
header.hero{background:linear-gradient(160deg,var(--green-950),var(--green-900) 45%,var(--green-800) 75%,var(--green-700));color:#f3ecd7;padding:38px 18px 28px;border-bottom:4px solid var(--gold)}
.hero .brand{letter-spacing:.35em;color:var(--gold-soft);font-weight:700;font-size:var(--fs-1);text-transform:uppercase;font-family:var(--font-de)}
.hero h1{margin:.35em 0 .25em;font-size:var(--fs-6);color:#fff}
.hero p{margin:.25em 0;color:#e6ddc2;max-width:920px}
.hero .back{color:var(--gold-soft);font-weight:600;text-decoration:none}
.hero .back:hover{text-decoration:underline}

.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 64px}
.grid{display:grid;gap:14px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .45em;color:var(--green-800);font-size:var(--fs-4)}
.card p{margin:.35em 0}

/* Badges & chips */
.badge{display:inline-block;padding:.08em .75em;border-radius:999px;font-size:var(--fs-1);font-weight:700;border:1px solid var(--gold);color:var(--gold-700);background:var(--gold-bg);white-space:nowrap}
.badge.soon{border-color:#c9c2ae;color:var(--muted);background:#efead9}
.badge.tier2{border-color:#8aa79a;color:var(--green-800);background:var(--green-100)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{border:1px solid var(--green-800);background:#fff;color:var(--green-800);border-radius:999px;padding:.35em 1.05em;cursor:pointer;font-size:var(--fs-2);font-family:var(--font-ui);transition:background .15s,color .15s}
.chip:hover{background:var(--green-100)}
.chip.on{background:var(--green-800);color:#fff}

/* Forms */
label{font-weight:600}
input[type=search],input[type=text],textarea,select{width:100%;padding:.6em .85em;border:1px solid var(--line);border-radius:var(--radius-s);font-size:var(--fs-3);background:#fff;font-family:var(--font-ui);color:var(--ink)}
input[type=search]:focus,input[type=text]:focus,textarea:focus,select:focus{border-color:var(--gold);outline:3px solid rgba(201,162,39,.35);outline-offset:0}
textarea{direction:ltr;text-align:left;font-family:var(--font-de);min-height:86px;line-height:1.6;resize:vertical}

/* Buttons */
.btn{display:inline-block;background:var(--green-800);color:#fff;border:1px solid var(--green-800);border-radius:var(--radius-s);padding:.6em 1.35em;cursor:pointer;font-size:var(--fs-3);font-family:var(--font-ui);font-weight:600;text-decoration:none;transition:background .15s,transform .05s}
.btn:hover{background:var(--green-700);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#231a00;font-weight:700}
.btn.gold:hover{background:#d8b33a}
.btn.ghost{background:#fff;color:var(--green-800)}
.btn.ghost:hover{background:var(--green-100)}
.btn:disabled{opacity:.45;cursor:default;transform:none}

/* Case map */
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.case .num{color:var(--gold-700);font-weight:800;font-family:var(--font-de);letter-spacing:.06em}
.case .de{font-weight:700;color:var(--green-900);font-size:1.02rem;line-height:1.45}
.case .spec{color:var(--muted);font-size:var(--fs-1)}
.case a.open{margin-top:auto;padding-top:6px;font-weight:700}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 16px;position:sticky;top:0;background:var(--ivory);padding:10px 0;z-index:5}
.tab{border:1px solid var(--green-800);background:#fff;color:var(--green-800);border-radius:var(--radius-s);padding:.55em 1.15em;cursor:pointer;font-size:var(--fs-3);font-family:var(--font-ui);font-weight:700;transition:background .15s,color .15s}
.tab:hover{background:var(--green-100)}
.tab.on{background:var(--green-800);color:#fff}
.panel{display:none}
.panel.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Flashcards — tap-to-toggle faces in normal flow.
   The old three-dimensional flip (perspective + Y-rotation + hidden
   backfaces + absolutely positioned faces) collapses in iOS Safari and
   the Telegram in-app webview: faces render as tiny clipped fragments
   and the card height falls to zero. Do NOT reintroduce it. The
   .flipped class toggle in the page JS simply swaps which face shows,
   so card height always follows its content. */
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.fc{display:block;width:100%;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;text-align:inherit;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.fc-inner{display:block}
.fc-face{display:none;border-radius:12px;padding:16px 14px;min-height:136px;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid var(--line)}
.fc-front{display:flex;background:linear-gradient(150deg,var(--green-800),var(--green-900));color:#F4EFE3}
.fc-back{display:none;background:#fff;color:var(--ink)}
.fc.flipped .fc-front{display:none}
.fc.flipped .fc-back{display:flex}
.fc-front .de{font-size:1.03rem;font-weight:700;text-align:center;line-height:1.4}
.fc-back .de{font-size:1rem;text-align:center;line-height:1.45;color:var(--green-950)}
/* The Gerüst frame spans (.gl-fix/.gl-slot) are coloured for the light
   ladder surfaces (.gl-sentence on white). On this dark card front the
   fixed parts must flip to ivory #F4EFE3 or they vanish into the green
   gradient — green-800 on green-800/900 is the contrast bug the owner
   photographed. The gold slot chips are already a light chip with dark
   text, readable on both surfaces, so they stay unchanged. */
.fc-front .gl-fix{color:#F4EFE3}
.fc-back .ar{color:var(--green-800);font-weight:700;margin-top:5px;line-height:1.6}
.fc .hint{font-size:.72rem;opacity:.8;margin-top:7px}

/* Folds */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0;box-shadow:var(--shadow)}
details summary{cursor:pointer;font-weight:700;color:var(--green-800)}
details summary:hover{color:var(--green-600)}
details .body{margin-top:8px}
details .de{margin-top:6px;line-height:1.65}

/* Stepper */
.stepper{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:16px 0;box-shadow:var(--shadow)}
.dots{display:flex;gap:7px;margin:10px 0}
.dot{width:12px;height:12px;border-radius:50%;background:#d8d0b8;border:1px solid var(--gold)}
.dot.on{background:var(--gold)}
.step-nav{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.step-title{font-weight:800;color:var(--green-900)}

/* Timer */
.timer{font-size:2.1rem;font-weight:800;color:var(--green-900);font-variant-numeric:tabular-nums;text-align:center;font-family:var(--font-de);letter-spacing:.04em}
.timer.low{color:var(--bad)}

/* Exercises */
.ex{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0;box-shadow:var(--shadow)}
.ex .q{font-weight:700;margin-bottom:10px}
.ex .q .de{display:block;margin-top:4px;font-weight:600}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{direction:ltr;text-align:left;border:1px solid var(--line);background:#fff;border-radius:var(--radius-s);padding:.55em .95em;cursor:pointer;font-family:var(--font-de);font-size:1rem;line-height:1.5;transition:border-color .15s,background .15s;width:100%}
.opt:hover:not(:disabled){border-color:var(--gold);background:#fffdf0}
.opt.right{border-color:var(--ok);background:var(--ok-bg);font-weight:700}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt:disabled{cursor:default}
.fb{display:none;margin-top:10px;padding:9px 13px;border-radius:8px;font-size:var(--fs-2);line-height:1.65}
.fb.show{display:block}
.fb.ok{background:var(--ok-bg);color:#14532d}
.fb.no{background:var(--bad-bg);color:#7f1d1d}
.scorebar{background:var(--green-100);border:1px solid var(--green-800);border-radius:12px;padding:12px 18px;font-weight:700;color:var(--green-900)}
.progress-outer{background:#e7dfc8;border-radius:999px;height:14px;overflow:hidden}
.progress-inner{background:linear-gradient(90deg,var(--green-800),var(--gold));height:100%;width:0;transition:width .4s}
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line)}
.check:last-child{border-bottom:none}
.check input{width:20px;height:20px;margin-top:5px;accent-color:var(--green-800);flex:none;cursor:pointer}

/* Audio */
audio{width:100%;margin-top:8px}
.audio-box{background:var(--green-050);border:1px solid var(--green-800);border-radius:12px;padding:14px 18px;margin:16px 0}
.audio-box .lbl{font-weight:700;color:var(--green-900)}

/* Vorlage table + model */
table.vorl{width:100%;border-collapse:collapse;background:#fff}
table.vorl th,table.vorl td{border:1px solid var(--line);padding:9px 11px;vertical-align:top;line-height:1.6}
table.vorl th{background:var(--green-100);color:var(--green-900);text-align:right;width:170px;font-size:var(--fs-2)}
.model-text{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow)}
.model-text .de{line-height:1.7;margin:.45em 0}

footer{color:var(--muted);text-align:center;padding:26px 12px;font-size:var(--fs-2)}
.hidden{display:none!important}

/* Matching rows */
.matchrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line)}
.matchrow:last-child{border-bottom:none}
.matchrow .st{flex:1 1 250px}
.matchrow .st .de{line-height:1.5}
.mbtns{display:flex;gap:8px;flex:none}
.mbtn{direction:ltr;border:1px solid var(--green-800);background:#fff;color:var(--green-800);border-radius:8px;padding:.4em 1.05em;cursor:pointer;font-weight:700;font-family:var(--font-de);transition:background .15s}
.mbtn:hover:not(:disabled){background:var(--green-100)}
.mbtn.right{background:var(--ok-bg);border-color:var(--ok);color:#14532d}
.mbtn.wrong{background:var(--bad-bg);border-color:var(--bad);color:#7f1d1d}
.mbtn:disabled{cursor:default}

/* Small screens */
@media (max-width:640px){
  .hero{padding:28px 14px 22px}
  .wrap{padding:14px 10px 48px}
  .card,.stepper,.ex{padding:14px}
  .tabs{top:0;padding:8px 0}
  .tab{flex:1 1 30%;text-align:center;padding:.55em .3em}
  table.vorl th{width:110px}
  .fc-grid{grid-template-columns:1fr}
  .timer{font-size:1.7rem}
}

/* ---- Gerüst-Methode ladder (Teil 2: Sätze lernen) ---- */
.gl-steps{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.gl-sentence{direction:ltr;text-align:left;font-family:var(--font-de);line-height:2.05;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 14px;margin:6px 0 14px;overflow-wrap:break-word}
.gl-lab{font-weight:700;color:var(--gold-700);font-size:var(--fs-1)}
.gl-fix{color:var(--green-800);font-weight:700}
.gl-slot{background:var(--gold-bg);border:1px solid var(--gold);color:var(--gold-700);border-radius:6px;padding:0 .45em;font-weight:700;white-space:nowrap}
input.gl-in[type="text"]{display:inline-block;width:auto;min-width:70px;padding:.05em .4em;margin:0 1px;border:none;border-bottom:2px solid var(--gold);border-radius:5px 5px 0 0;background:#fffdf0;font-family:var(--font-de);font-size:.95rem;line-height:1.5;color:var(--ink)}
input.gl-in[type="text"].right{border-bottom-color:var(--ok);background:var(--ok-bg)}
input.gl-in[type="text"].wrong{border-bottom-color:var(--bad);background:var(--bad-bg)}
.gl-score{font-weight:700;color:var(--green-800);margin:10px 0}
.gl-prompt{font-weight:600;color:var(--green-900);margin:14px 0 4px}