/* TIE International · Lernkarten üK 313
   Stil wie die üK-Slides: Verlauf Blau-Violett-Orange, Poppins/Quicksand, weisse Panels, Navy-Titel. */

@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Quicksand";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/quicksand-500.woff2") format("woff2")}
@font-face{font-family:"Quicksand";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/quicksand-600.woff2") format("woff2")}
@font-face{font-family:"Quicksand";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/quicksand-700.woff2") format("woff2")}

:root{
  color-scheme:light;
  --blue:#2F3DFF; --violet:#8A5FA6; --orange:#F7931E;
  --navy:#1B2150; --ink:#232845; --muted:#5B6180; --line:#D9DBEA;
  --panel:#FFFFFF; --panel2:#F4F5FB; --ok:#1F8A5B; --warn:#C0392B;
}
*{box-sizing:border-box}
html{background:var(--navy)}
body{
  margin:0;min-height:100vh;min-height:100dvh;color:#fff;
  font-family:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(135deg,var(--blue) 0%,var(--violet) 48%,var(--orange) 100%);
  display:flex;flex-direction:column;align-items:center;
}
[hidden]{display:none !important}

.page{width:100%;max-width:760px;flex:1;padding:28px 20px 12px}

/* Kopf */
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.eyebrow{font-family:"Poppins",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.88;margin-bottom:8px}
h1{font-family:"Poppins",sans-serif;font-weight:700;font-size:44px;line-height:1.05;letter-spacing:-.5px;margin:0}
.badge{flex:none;background:#fff;border-radius:16px;padding:8px 12px;box-shadow:0 10px 30px rgba(20,23,60,.18)}
.badge img{display:block;width:84px;height:auto}

/* Fortschritt */
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pill{font-family:"Poppins",sans-serif;font-weight:600;font-size:13px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:3px 14px}
.pill b{font-weight:700;margin-left:4px}
.bar{height:8px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;margin-bottom:16px}
.bar>div{height:100%;width:0;background:#fff;border-radius:4px;transition:width .25s}

/* Themen */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chips button{font-family:"Poppins",sans-serif;font-weight:600;font-size:13px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:6px 14px;cursor:pointer}
.chips button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}

/* Panels */
.panel{background:var(--panel);color:var(--ink);border-radius:14px;box-shadow:0 10px 30px rgba(20,23,60,.18)}
.notice{padding:18px 22px;font-size:17px;line-height:1.4}
.notice h2{font-family:"Poppins",sans-serif;font-weight:600;font-size:18px;color:var(--navy);margin:0 0 6px}
.notice p{margin:0}
.error{border-left:5px solid var(--warn);background:#FFF4F2}
.done{text-align:center;padding:36px 22px}

.tag{display:inline-block;font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;padding:2px 10px;border-radius:99px;background:var(--panel2);color:var(--navy);border:1px solid var(--line)}
.tag.theme{background:#fff;border-color:var(--navy)}

/* Karte */
.scene{perspective:1200px}
.card{
  display:grid;cursor:pointer;outline:none;transform-style:preserve-3d;transition:transform .45s;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:pan-y;
}
.card.flipped{transform:rotateY(180deg)}
.card:focus-visible .face{outline:3px solid #fff;outline-offset:3px}
.face{
  grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;
  min-height:clamp(280px,44vh,400px);padding:24px 26px 36px;overflow-wrap:anywhere;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--panel);color:var(--ink);border-radius:14px;box-shadow:0 10px 30px rgba(20,23,60,.18);
}
.face.back{transform:rotateY(180deg);background:var(--panel2)}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.q{font-family:"Poppins",sans-serif;font-weight:600;font-size:22px;line-height:1.4;color:var(--navy)}
.okbox{border-left:5px solid var(--ok);background:#EFFAF4;border-radius:8px;padding:12px 16px}
.a{font-family:"Poppins",sans-serif;font-weight:600;font-size:20px;line-height:1.4;color:var(--navy)}
.why{margin-bottom:8px}
.e{font-size:17px;font-weight:500;line-height:1.5;color:var(--ink)}
.hint{position:absolute;bottom:10px;left:18px;right:18px;text-align:right;font-size:12.5px;font-weight:600;color:var(--muted)}

/* Bedienung */
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
button{font-family:"Poppins",sans-serif;font-weight:600;font-size:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
button:disabled{opacity:.45;cursor:default}
.controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:10px;border:1px solid transparent;color:#fff;cursor:pointer}
.controls .ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.controls .ok{background:var(--ok)}
.controls .bad{background:var(--warn)}
@media (hover:hover){
  .controls button:not(:disabled):hover{filter:brightness(1.08);border-color:#fff}
  .chips button:hover,.pillbtn:hover{border-color:#fff}
}
.tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.pillbtn{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:6px 14px;font-size:13px;cursor:pointer}
.pillbtn[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.shortcuts{margin:22px 0 0;text-align:center;font-size:13px;font-weight:600;opacity:.9}
kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:5px;padding:0 6px}
@media (hover:none){.shortcuts{display:none}}

/* Fuss wie in den Slides */
.foot{width:100%;max-width:760px;display:flex;justify-content:space-between;gap:18px;padding:18px 20px calc(16px + env(safe-area-inset-bottom,0px));font-family:"Poppins",sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* Mobil */
@media (max-width:560px){
  .page{padding:20px 14px 8px}
  h1{font-size:34px}
  .badge{padding:6px 9px;border-radius:12px}
  .badge img{width:64px}
  .face{padding:18px 18px 34px;min-height:clamp(250px,40vh,350px)}
  .q{font-size:19px}
  .a{font-size:18px}
  .e{font-size:16px}
  .controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
  .controls button{width:100%;min-height:50px}
  #bad{order:1} #ok{order:2} #prev{order:3} #next{order:4}
  .tools button{flex:1 1 calc(50% - 8px);min-height:44px}
  .chips button{min-height:42px;padding:6px 16px}
  .hint{left:14px;right:14px;font-size:11.5px}
  .head{margin-bottom:12px}
  .eyebrow{margin-bottom:6px}
  .stats{margin-bottom:8px}
  .bar{margin-bottom:12px}
  .chips{margin-bottom:12px}
  .foot{padding-left:14px;padding-right:14px;font-size:11px}
}

/* Touch-Geraete: grosse Tippflaechen auch im Querformat und auf Tablets */
@media (pointer:coarse){
  .pillbtn,.chips button{min-height:42px}
}

/* Kleine Hoehe (Querformat, kleine Handys): Karte und Knoepfe sollen ohne Scrollen erreichbar sein */
@media (max-height:640px){
  .page{padding-top:14px}
  h1{font-size:28px}
  .badge img{width:54px}
  .face{min-height:200px;padding:14px 18px 30px;gap:10px}
  .q{font-size:18px}
  .controls{margin-top:12px}
  .controls button{min-height:44px}
  .tools{margin-top:12px}
  .shortcuts{display:none}
}

@media (prefers-reduced-motion:reduce){
  .card,.bar>div{transition:none}
}