/* German Test Trainer - all rules namespaced under .gtt-root to survive any theme */
.gtt-root {
  --gtt-ink: #1b2430;
  --gtt-ink-soft: #55606e;
  --gtt-ink-faint: #8a94a2;
  --gtt-paper: #fbfaf7;
  --gtt-card: #ffffff;
  --gtt-line: #e2e0d9;
  --gtt-line-strong: #cbc8bf;
  --gtt-accent: #1d6f68;
  --gtt-accent-soft: #e6f1ef;
  --gtt-accent-ink: #0f4a45;
  --gtt-good: #2c6e49;
  --gtt-good-bg: #e8f3ec;
  --gtt-bad: #a33a3a;
  --gtt-bad-bg: #fbecec;
  --gtt-warn: #8a6516;
  --gtt-warn-bg: #fdf3e0;
  --gtt-radius: 10px;
  --gtt-sticky-top: 0px;
  --gtt-shadow: 0 1px 2px rgba(27, 36, 48, .06), 0 6px 20px rgba(27, 36, 48, .05);

  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--gtt-ink);
  background: var(--gtt-paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding: 20px;
  border-radius: var(--gtt-radius);
  border: 1px solid var(--gtt-line);
}
.gtt-root *, .gtt-root *::before, .gtt-root *::after { box-sizing: inherit; }
.gtt-root p { margin: 0 0 .85em; }
.gtt-root h1, .gtt-root h2, .gtt-root h3 { margin: 0 0 .5em; line-height: 1.25; font-weight: 650; color: var(--gtt-ink); }
.gtt-root h1 { font-size: 1.5rem; letter-spacing: -.01em; }
.gtt-root h2 { font-size: 1.18rem; }
.gtt-root h3 { font-size: 1rem; }
.gtt-root button, .gtt-root select { font: inherit; color: inherit; }
.gtt-root button, .gtt-root select, .gtt-root .gtt-gap {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.gtt-root ol, .gtt-root ul { margin: 0; padding: 0; list-style: none; }

/* ---------- header ---------- */
.gtt-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.gtt-head-main { min-width: 0; }
.gtt-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--gtt-accent); font-weight: 700; margin-bottom: 2px; }
.gtt-sub { color: var(--gtt-ink-soft); font-size: .9rem; }
.gtt-head-side { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.gtt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--gtt-line-strong); background: var(--gtt-card);
  font-size: .9rem; font-weight: 550; transition: background .14s, border-color .14s, transform .06s;
}
.gtt-btn:hover { background: #f4f2ed; border-color: var(--gtt-ink-faint); }
.gtt-btn:active { transform: translateY(1px); }
.gtt-btn:focus-visible { outline: 2px solid var(--gtt-accent); outline-offset: 2px; }
.gtt-btn[disabled] { opacity: .45; cursor: not-allowed; }
.gtt-btn-primary { background: var(--gtt-accent); border-color: var(--gtt-accent); color: #fff; }
.gtt-btn-primary:hover { background: var(--gtt-accent-ink); border-color: var(--gtt-accent-ink); }
.gtt-btn-ghost { background: transparent; border-color: transparent; color: var(--gtt-ink-soft); }
.gtt-btn-ghost:hover { background: #efece5; color: var(--gtt-ink); }
.gtt-btn-sm { padding: 6px 11px; font-size: .82rem; }

/* ---------- menu ---------- */
.gtt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.gtt-card {
  background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: var(--gtt-radius);
  padding: 18px; box-shadow: var(--gtt-shadow); text-align: left; cursor: pointer; width: 100%;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .14s, transform .1s, box-shadow .14s;
}
.gtt-card:hover { border-color: var(--gtt-accent); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(27,36,48,.08), 0 14px 30px rgba(27,36,48,.07); }
.gtt-card-title { font-weight: 650; font-size: 1.02rem; }
.gtt-card-desc { color: var(--gtt-ink-soft); font-size: .88rem; line-height: 1.45; }
.gtt-card-meta { margin-top: auto; padding-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; color: var(--gtt-ink-faint); font-size: .8rem; }
.gtt-card-full { border-left: 3px solid var(--gtt-accent); }

.gtt-bar { height: 5px; border-radius: 99px; background: var(--gtt-line); overflow: hidden; }
.gtt-bar > span { display: block; height: 100%; background: var(--gtt-accent); border-radius: 99px; }

/* ---------- exercise shell ---------- */
.gtt-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 0 14px; border-bottom: 1px solid var(--gtt-line); margin-bottom: 18px;
}
.gtt-steps { display: flex; gap: 5px; flex-wrap: wrap; }
.gtt-step {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--gtt-line-strong);
  background: var(--gtt-card); font-size: .8rem; cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.gtt-step[aria-current="true"] { border-color: var(--gtt-accent); background: var(--gtt-accent-soft); color: var(--gtt-accent-ink); font-weight: 700; }
.gtt-step.is-done { border-color: var(--gtt-accent); }
.gtt-timer { font-variant-numeric: tabular-nums; font-weight: 650; padding: 6px 11px; border-radius: 8px; background: var(--gtt-card); border: 1px solid var(--gtt-line-strong); font-size: .9rem; }
.gtt-timer.is-low { color: var(--gtt-bad); border-color: var(--gtt-bad); background: var(--gtt-bad-bg); }

.gtt-instruction {
  background: var(--gtt-accent-soft); border: 1px solid #cfe3e0; color: var(--gtt-accent-ink);
  border-radius: 8px; padding: 11px 14px; font-size: .88rem; margin-bottom: 18px;
}
.gtt-layout { display: grid; gap: 22px; }
@media (min-width: 900px) { .gtt-layout.gtt-split { grid-template-columns: 1.05fr .95fr; align-items: start; } }

.gtt-passage {
  background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: var(--gtt-radius);
  padding: 20px 22px; font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.01rem; line-height: 1.72; white-space: pre-wrap; overflow-wrap: break-word;
}
.gtt-passage-title { font-family: inherit; font-weight: 700; font-size: 1.1rem; margin-bottom: .6em; display: block; }
.gtt-scroll { max-height: 70vh; overflow-y: auto; }

/* ---------- gaps ---------- */
.gtt-gap {
  display: inline-block; min-width: 92px; padding: 1px 8px; margin: 0 2px;
  border-bottom: 2px solid var(--gtt-line-strong); background: #f5f3ee;
  border-radius: 4px 4px 0 0; font-family: inherit; text-align: center; cursor: pointer;
  font-size: .95em; vertical-align: baseline;
}
.gtt-gap:hover { background: #ece9e1; }
.gtt-gap.is-filled { background: var(--gtt-accent-soft); border-bottom-color: var(--gtt-accent); color: var(--gtt-accent-ink); font-weight: 600; }
.gtt-gap.is-active { outline: 2px solid var(--gtt-accent); outline-offset: 1px; }
.gtt-gap.is-good { background: var(--gtt-good-bg); border-bottom-color: var(--gtt-good); color: var(--gtt-good); }
.gtt-gap.is-bad { background: var(--gtt-bad-bg); border-bottom-color: var(--gtt-bad); color: var(--gtt-bad); text-decoration: line-through; }
.gtt-gap-num { font-size: .72em; color: var(--gtt-ink-faint); font-weight: 700; margin-right: 3px; vertical-align: super; }
.gtt-gap-open { border-bottom-style: dashed; color: var(--gtt-ink-faint); cursor: default; background: transparent; }

/* ---------- question blocks ---------- */
.gtt-q { background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: var(--gtt-radius); padding: 15px 17px; margin-bottom: 13px; }
.gtt-q-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.gtt-q-num { flex: none; width: 27px; height: 27px; border-radius: 6px; background: var(--gtt-accent-soft); color: var(--gtt-accent-ink); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.gtt-q-stem { font-weight: 550; }
.gtt-opts { display: flex; flex-direction: column; gap: 6px; }
.gtt-opt {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid var(--gtt-line); border-radius: 8px;
  background: var(--gtt-card); cursor: pointer; font-size: .93rem; line-height: 1.45;
  transition: border-color .12s, background .12s;
}
.gtt-opt:hover { border-color: var(--gtt-ink-faint); background: #f7f5f0; }
.gtt-opt:focus-visible { outline: 2px solid var(--gtt-accent); outline-offset: 1px; }
.gtt-opt-key { flex: none; width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--gtt-line-strong); display: grid; place-items: center; font-size: .75rem; font-weight: 700; text-transform: lowercase; background: var(--gtt-paper); }
.gtt-opt.is-picked { border-color: var(--gtt-accent); background: var(--gtt-accent-soft); }
.gtt-opt.is-picked .gtt-opt-key { background: var(--gtt-accent); border-color: var(--gtt-accent); color: #fff; }
.gtt-opt.is-good { border-color: var(--gtt-good); background: var(--gtt-good-bg); }
.gtt-opt.is-good .gtt-opt-key { background: var(--gtt-good); border-color: var(--gtt-good); color: #fff; }
.gtt-opt.is-bad { border-color: var(--gtt-bad); background: var(--gtt-bad-bg); }
.gtt-opt.is-bad .gtt-opt-key { background: var(--gtt-bad); border-color: var(--gtt-bad); color: #fff; }
.gtt-opt[disabled] { cursor: default; }

/* letter pickers (Teil 1 / Teil 3) */
.gtt-keys { display: flex; flex-wrap: wrap; gap: 5px; }
.gtt-key {
  min-width: 34px; height: 34px; padding: 0 7px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--gtt-line-strong); background: var(--gtt-card);
  font-size: .85rem; font-weight: 650; text-transform: lowercase;
}
.gtt-key:hover { border-color: var(--gtt-ink-faint); background: #f7f5f0; }
.gtt-key.is-picked { background: var(--gtt-accent); border-color: var(--gtt-accent); color: #fff; }
.gtt-key.is-used { opacity: .4; }
.gtt-key.is-good { background: var(--gtt-good); border-color: var(--gtt-good); color: #fff; }
.gtt-key.is-bad { background: var(--gtt-bad); border-color: var(--gtt-bad); color: #fff; }
.gtt-key[disabled] { cursor: default; }

/* reference lists */
.gtt-ref { background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: var(--gtt-radius); padding: 16px 18px; }
.gtt-ref li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--gtt-line); font-size: .93rem; }
.gtt-ref li:last-child { border-bottom: 0; }
.gtt-ref-key { flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--gtt-paper); border: 1px solid var(--gtt-line-strong); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.gtt-ref li.is-used .gtt-ref-key { background: var(--gtt-accent); border-color: var(--gtt-accent); color: #fff; }
.gtt-ad { border-bottom: 1px solid var(--gtt-line); padding: 12px 0; display: flex; gap: 11px; }
.gtt-ad:last-child { border-bottom: 0; }
.gtt-ad-body { font-size: .9rem; white-space: pre-wrap; }
.gtt-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.gtt-bank-item { padding: 5px 11px; border-radius: 99px; border: 1px solid var(--gtt-line-strong); background: var(--gtt-card); font-size: .85rem; }
.gtt-bank-item.is-used { opacity: .35; text-decoration: line-through; }
.gtt-bank-key { color: var(--gtt-ink-faint); font-weight: 700; margin-right: 5px; font-size: .78em; }

/* choice popover for gaps */
.gtt-pop { position: absolute; z-index: 60; background: var(--gtt-card); border: 1px solid var(--gtt-line-strong); border-radius: 9px; box-shadow: 0 8px 28px rgba(27,36,48,.16); padding: 6px; max-height: 260px; overflow-y: auto; min-width: 170px; }
.gtt-pop button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.gtt-pop button:hover { background: var(--gtt-accent-soft); }
.gtt-pop button.is-used { opacity: .4; }

/* ---------- panes and tabs ---------- */
.gtt-tabbar { display: none; }
.gtt-pane { min-width: 0; }
.gtt-select { width: 100%; max-width: 320px; min-width: 0; }
.gtt-btn-icon { min-width: 46px; justify-content: center; padding: 9px 12px; }
.gtt-btn-wide { flex: 1 1 auto; justify-content: center; }
.gtt-actionbar-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gtt-actionbar-btns { display: flex; align-items: center; gap: 8px; }
.gtt-timer-bar { display: none; }

/* ---------- results ---------- */
.gtt-score { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: var(--gtt-radius); padding: 20px; margin-bottom: 18px; }
.gtt-score-ring { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 1.45rem; font-weight: 700; }
.gtt-score-note { font-size: .9rem; color: var(--gtt-ink-soft); }
.gtt-review li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--gtt-line); font-size: .92rem; }
.gtt-review li:last-child { border-bottom: 0; }
.gtt-tag { flex: none; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; }
.gtt-tag-good { background: var(--gtt-good-bg); color: var(--gtt-good); }
.gtt-tag-bad { background: var(--gtt-bad-bg); color: var(--gtt-bad); }
.gtt-tag-skip { background: var(--gtt-warn-bg); color: var(--gtt-warn); }

.gtt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.gtt-stat { background: var(--gtt-card); border: 1px solid var(--gtt-line); border-radius: 8px; padding: 12px 14px; }
.gtt-stat-val { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gtt-stat-lbl { font-size: .78rem; color: var(--gtt-ink-faint); text-transform: uppercase; letter-spacing: .05em; }

.gtt-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--gtt-line); }
.gtt-note { font-size: .8rem; color: var(--gtt-ink-faint); }
.gtt-loading { padding: 40px; text-align: center; color: var(--gtt-ink-soft); }
.gtt-error { padding: 16px; border-radius: 8px; background: var(--gtt-bad-bg); color: var(--gtt-bad); border: 1px solid var(--gtt-bad); }
.gtt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 899px) {
  /* one pane at a time, picked with a tab strip */
  .gtt-split > .gtt-tabbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    position: sticky; top: var(--gtt-sticky-top); z-index: 20;
    padding: 8px 0; margin: -8px 0 0; background: var(--gtt-paper);
  }
  .gtt-tab {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 46px; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--gtt-line-strong); border-radius: 9px;
    background: var(--gtt-card); font-size: .9rem; font-weight: 600;
  }
  .gtt-tab.is-on { background: var(--gtt-accent); border-color: var(--gtt-accent); color: #fff; }
  .gtt-tab-badge {
    font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: 99px;
    background: var(--gtt-paper); color: var(--gtt-ink-soft); font-variant-numeric: tabular-nums;
  }
  .gtt-tab.is-on .gtt-tab-badge { background: rgba(255,255,255,.22); color: #fff; }
  .gtt-split[data-active="0"] > .gtt-pane[data-pane="1"],
  .gtt-split[data-active="1"] > .gtt-pane[data-pane="0"] { display: none; }
  .gtt-layout { gap: 14px; }
  .gtt-pane-h { display: none; }
  .gtt-scroll { max-height: none; overflow-y: visible; }

  /* clock and primary action stay in the thumb zone */
  .gtt-actionbar {
    position: sticky; bottom: 0; z-index: 30;
    margin: 18px -20px -20px; padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--gtt-paper); border-top: 1px solid var(--gtt-line);
    box-shadow: 0 -4px 16px rgba(27, 36, 48, .08);
    gap: 10px; flex-wrap: nowrap; align-items: center;
  }
  .gtt-actionbar-btns { flex: 1 1 auto; justify-content: flex-end; }
  .gtt-actionbar .gtt-note { font-size: .78rem; }
  .gtt-timer-top { display: none; }
  .gtt-timer-bar { display: inline-block; }

  /* the step strip scrolls sideways instead of stacking into rows */
  .gtt-steps {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .gtt-steps::-webkit-scrollbar { display: none; }
  .gtt-step { flex: none; }

  /* comfortable touch targets */
  .gtt-key { min-width: 44px; height: 44px; font-size: .9rem; }
  .gtt-step { width: 38px; height: 38px; }
  .gtt-opt { padding: 12px 13px; }
  .gtt-opt-key { width: 26px; height: 26px; }
  .gtt-btn { min-height: 44px; }
  .gtt-btn-sm { min-height: 44px; }
  .gtt-card { padding: 16px; }
}

@media (max-width: 600px) {
  .gtt-root { padding: 14px; font-size: 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .gtt-actionbar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .gtt-split > .gtt-tabbar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
  .gtt-head { margin-bottom: 14px; }
  .gtt-head h1 { font-size: 1.24rem; }
  .gtt-instruction { font-size: .85rem; padding: 10px 12px; margin-bottom: 14px; }
  .gtt-passage { padding: 15px 16px; font-size: 1.02rem; line-height: 1.68; }
  .gtt-q { padding: 13px 14px; margin-bottom: 11px; }
  .gtt-ref { padding: 13px 14px; }
  .gtt-gap { min-width: 74px; padding: 1px 6px; }
  .gtt-score-ring { width: 74px; height: 74px; font-size: 1.2rem; }
  .gtt-score { padding: 16px; gap: 14px; }
  .gtt-grid { grid-template-columns: 1fr; gap: 11px; }
  .gtt-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
  .gtt-toolbar { padding-top: 0; }
}

@media (max-width: 380px) {
  .gtt-root { padding: 11px; font-size: 15px; }
  .gtt-tab { font-size: .84rem; padding: 8px 6px; }
  .gtt-key { min-width: 40px; height: 40px; }
}

/* long words and pasted URLs must never widen the page */
.gtt-passage, .gtt-ad-body, .gtt-q-stem, .gtt-opt, .gtt-ref li, .gtt-card-desc {
  overflow-wrap: break-word; word-break: break-word;
}
.gtt-root, .gtt-layout, .gtt-pane, .gtt-q, .gtt-passage { max-width: 100%; }

@media (prefers-color-scheme: dark) {
  .gtt-root {
    --gtt-ink: #e8e6e1; --gtt-ink-soft: #a8b0ba; --gtt-ink-faint: #7c848f;
    --gtt-paper: #171b21; --gtt-card: #1e232b; --gtt-line: #2c333d; --gtt-line-strong: #3c444f;
    --gtt-accent: #5fbfb2; --gtt-accent-soft: #1d2f2e; --gtt-accent-ink: #9fd9d0;
    --gtt-good: #6cc08a; --gtt-good-bg: #1c2b23; --gtt-bad: #e08585; --gtt-bad-bg: #2e1e1e;
    --gtt-warn: #d8b25f; --gtt-warn-bg: #2d2617;
  }
  .gtt-root .gtt-btn:hover { background: #262c35; }
  .gtt-root .gtt-opt:hover, .gtt-root .gtt-key:hover { background: #262c35; }
  .gtt-root .gtt-gap { background: #262c35; }
  .gtt-root .gtt-btn-primary { color: #0c1412; }
  .gtt-root .gtt-opt.is-picked .gtt-opt-key, .gtt-root .gtt-key.is-picked { color: #0c1412; }
}