/* ==========================================================================
   German flashcards — extra styles on top of styles.css
   Only what the Chinese page does not already cover: German word typography,
   the A1 – C1 level badges and the portrait logo.
   ========================================================================== */

/* the big German word on the card front / quiz prompt.  German headwords can be
   long ("abbiegen, biegt ab, bog ab, ist abgebogen") and must wrap, never clip. */
.de-word{
  font-size:clamp(1.5rem,5.2vw,2.9rem);
  font-weight:800;color:var(--red);line-height:1.18;
  text-align:center;text-wrap:balance;overflow-wrap:anywhere;
  padding:6px clamp(4px,2vw,18px);
  margin:26px auto 4px;max-width:100%;
}
html[data-theme="dark"] .de-word{color:var(--gold)}

.de-word-sm{
  font-size:clamp(1.15rem,3.4vw,1.8rem);font-weight:800;color:var(--red);
  line-height:1.2;overflow-wrap:anywhere;
}
html[data-theme="dark"] .de-word-sm{color:var(--gold)}

/* the example sentence from the Goethe list, shown on the back of the card */
.de-ex{
  margin:14px auto 0;max-width:640px;text-align:center;
  font-size:.95rem;font-style:italic;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:12px;
}

/* German headwords are much longer than a Chinese character, and the back of the
   card carries word class + three meanings + an example sentence. Instead of the
   fixed-height, internally scrolling faces of the Chinese deck, the two faces are
   stacked in one grid cell so the card simply grows to the taller of them. */
.fc-inner{display:grid}
.fc-inner,.flashcard{min-height:0}
.fc-face{position:relative;inset:auto;grid-area:1/1;min-height:420px;overflow:visible}

/* quiz prompt: keep the word a little smaller than on the card */
.quiz-prompt .de-word{font-size:clamp(1.4rem,4.6vw,2.6rem);margin:0}

/* --------- level badges A1 – C1 (same idea as the HSK colours) --------- */
.lvl-A1{background:#3b8b5e}
.lvl-A2{background:#6f9f45}
.lvl-B1{background:#a3a22e}
.lvl-B2{background:#c98f2e}
.lvl-C1{background:#c95e4d}
.lvl-C2{background:#8c4b7a}

/* --------- the portrait logo --------- */
.fc-logo.de-logo,
.de-logo{
  object-fit:cover;object-position:top center;border-radius:10px;
  border:1px solid var(--line);background:var(--cream-2);
}
.fc-logo.de-logo{width:44px;height:48px}
.foot-logo.de-logo{width:40px;height:52px;border-radius:6px}

/* brand: "Deutsch" where the Chinese page has 汉语学习 */
.fc-brand-title .de{color:var(--red);margin-right:.4em;font-weight:800}
html[data-theme="dark"] .fc-brand-title .de{color:var(--gold)}

/* level chips: five levels fit on one line on a phone */
#levelChips .chip{padding:7px 11px}
#levelChips .chip .cnt{min-width:2.4em}

@media (max-width:560px){
  .de-word{margin-top:18px}
  .hero-cover{max-width:190px;margin:0 auto}
}