/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3
 * Hallmark · macrostructure: Long Document (Lernblatt) · tone: utilitarian-editorial · anchor hue: Polka-Rot
 * redesign 20.10.2026 · Seiten: deutsch-a1 … deutsch-c2 (body.daf-stufe)
 * Farben und Schriften kommen aus polka.css (--rot, --papier, --tinte, Playfair/Inter);
 * diese Datei setzt nur die Lernblatt-Schicht darüber und ersetzt die alten
 * Rahmen-Kästen, Verläufe und Emoji-Symbole der sechs Stufenseiten.
 */
.daf-stufe{
  --daf-linie:var(--papier-3);
  --daf-flaeche:var(--weiss);
  --daf-text:var(--tinte);
  --daf-text-2:var(--tinte-2);
  --daf-leise:var(--grau);
  --daf-akzent:var(--rot);
  --daf-akzent-tief:var(--rot-tief);
  --daf-auf-akzent:var(--weiss);
  --daf-knopf:var(--rot);
  --daf-knopf-hover:var(--rot-tief);
  --daf-mass:72ch;
}
html[data-theme="dark"] .daf-stufe{
  --daf-linie:var(--border);
  --daf-flaeche:var(--card);
  --daf-text:var(--ink);
  --daf-text-2:var(--ink-soft);
  --daf-leise:var(--muted);
  --daf-akzent:var(--accent-2);
  --daf-akzent-tief:var(--accent);
  --daf-auf-akzent:var(--weiss);
  --daf-knopf:var(--accent);
  --daf-knopf-hover:var(--rot-tief);
}

/* ── Auftakt: kein Kreis-Symbol, keine schwebenden Buchstaben ─────────── */
.daf-stufe .ph-emblem,
.daf-stufe .polka-flug{ display:none !important }
.daf-stufe .polka-auftakt h1{ hyphens:manual }
.daf-stufe .polka-auftakt h1 [lang="ckb"]{ display:block; font-size:max(1.05rem,.42em); margin-top:.35em; color:inherit !important; opacity:.85; text-align:inherit !important }

/* ── Eckdaten: Zahlenleiste statt vier Kacheln ────────────────────────── */
.daf-stufe .ph-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  border-top:1px solid var(--daf-text); border-bottom:1px solid var(--daf-linie);
  margin:8px 0 28px; background:none;
}
.daf-stufe .ph-stat{
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  padding:16px 18px !important; text-align:left !important; min-width:0;
}
.daf-stufe .ph-stat + .ph-stat{ border-left:1px solid var(--daf-linie) !important }
.daf-stufe .ph-stat .ic{ display:none }
.daf-stufe .ph-stat .num{
  font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.3rem,2.6vw,1.9rem);
  line-height:1.05; color:var(--daf-akzent); overflow-wrap:anywhere;
}
.daf-stufe .ph-stat .lbl{
  margin-top:6px; font-family:var(--schrift-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--daf-leise);
}
@media (max-width:760px){
  .daf-stufe .ph-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .daf-stufe .ph-stat:nth-child(3){ border-left:0 !important }
  .daf-stufe .ph-stat:nth-child(n+3){ border-top:1px solid var(--daf-linie) !important }
}

/* ── Einleitung ──────────────────────────────────────────────────────── */
.daf-stufe .intro-box{
  background:none; border:0; border-radius:0; padding:0; margin:0 0 28px;
  max-width:var(--daf-mass); color:var(--daf-text); font-size:1.06rem; line-height:1.7;
}
.daf-stufe .intro-box .ku{ color:var(--daf-text-2); margin-top:12px }

/* ── Abschnittstitel: ohne Quadrat, ohne Emoji, Kurdisch darunter ─────── */
.daf-stufe h2.section-h{
  display:block; font-family:var(--schrift-display); color:var(--daf-text);
  font-size:clamp(1.5rem,3.2vw,2.4rem); margin:56px 0 18px; padding:0 0 12px;
  border-bottom:1px solid var(--daf-text); min-width:0; overflow-wrap:anywhere;
}
.daf-stufe h2.section-h::before{ content:none !important; display:none !important }
.daf-stufe h2.section-h .ku{
  display:block; margin-top:8px; font-size:1.05rem; font-weight:600;
  color:var(--daf-leise); text-align:right;
}

/* ── Was können Sie: drei Spalten mit Oberlinie ──────────────────────── */
.daf-stufe .can-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:28px; margin:8px 0 32px }
.daf-stufe .can-block{ background:none; border:0; border-top:3px solid var(--daf-akzent); border-radius:0; padding:14px 0 0 }
.daf-stufe .can-block h4{ color:var(--daf-text); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px }
.daf-stufe .can-block ul{ color:var(--daf-text); font-size:.95rem; padding-left:18px }

/* ── Prüfungen, Einbürgerung, Universität: ruhige Hinweisflächen ─────── */
.daf-stufe .cert-box,
.daf-stufe .einbuerg-box,
.daf-stufe .uni-box{
  background:var(--daf-flaeche); border:1px solid var(--daf-linie); border-left:3px solid var(--daf-akzent);
  border-radius:0; box-shadow:none; padding:20px 24px; margin:20px 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 24px; align-items:center; text-align:left;
}
.daf-stufe .cert-box{ grid-template-columns:minmax(0,1fr) }
.daf-stufe :is(.cert-box,.einbuerg-box,.uni-box) .em{ display:none }
.daf-stufe :is(.cert-box,.einbuerg-box,.uni-box) h3{ font-family:var(--schrift-display); color:var(--daf-text); font-size:1.25rem; margin:0 0 6px }
.daf-stufe :is(.cert-box,.einbuerg-box,.uni-box) p{ color:var(--daf-text); margin:0 }
.daf-stufe :is(.cert-box,.einbuerg-box,.uni-box) .ku{ color:var(--daf-text-2); margin-top:8px; display:block }
.daf-stufe :is(.einbuerg-box,.uni-box) > a{
  background:var(--daf-knopf); color:var(--daf-auf-akzent) !important; border-radius:0; padding:12px 20px;
  font-weight:700; text-decoration:none; white-space:nowrap; justify-self:end;
}
.daf-stufe :is(.einbuerg-box,.uni-box) > a:hover{ background:var(--daf-knopf-hover) }
.daf-stufe .cert-box .parts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.daf-stufe .cert-box .parts span{
  background:none; border:1px solid var(--daf-linie); border-radius:0; color:var(--daf-text);
  font-size:.82rem; font-weight:600; padding:6px 12px; white-space:nowrap;
}
@media (max-width:680px){
  .daf-stufe :is(.einbuerg-box,.uni-box){ grid-template-columns:minmax(0,1fr) }
  .daf-stufe :is(.einbuerg-box,.uni-box) > a{ justify-self:start }
}

/* ── Grammatik: Abschnitte statt Kästen, Beispiele zweisprachig ──────── */
.daf-stufe .gram-box{
  background:none; border:0; border-top:1px solid var(--daf-linie); border-radius:0;
  padding:28px 0 8px; margin:0;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 24px;
}
.daf-stufe .gram-box > *{ flex:1 1 100% }
.daf-stufe .gram-box h3{
  flex:1 1 auto; margin:0 0 10px; font-family:var(--schrift-display); color:var(--daf-text);
  font-size:clamp(1.15rem,2vw,1.45rem); min-width:0; overflow-wrap:anywhere;
}
.daf-stufe .gram-box .ku-h{ flex:0 1 auto; color:var(--daf-leise); margin:0 0 10px; font-size:1rem }
.daf-stufe .gram-box .explanation{ color:var(--daf-text); font-size:1rem; max-width:var(--daf-mass) }
.daf-stufe .gram-box .explanation .ku{ color:var(--daf-text-2); margin-top:6px }
.daf-stufe .gram-box .examples{
  background:var(--daf-flaeche); border:1px solid var(--daf-linie); border-radius:0;
  padding:4px 18px; margin:14px 0 8px; font-size:.97rem;
}
.daf-stufe .gram-box .examples .ex{ color:var(--daf-text); margin:0; padding:10px 0 }
.daf-stufe .gram-box .examples .ex + .ex{ border-top:1px solid var(--daf-linie) }
.daf-stufe .gram-box .examples .ex strong{ color:var(--daf-text) }
.daf-stufe .gram-box .examples .ex:has(> .ku){
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 24px; align-items:baseline;
}
.daf-stufe .gram-box .examples .ex > .ku{
  display:block; margin:0; color:var(--daf-text-2); text-align:right; font-size:1.02rem;
}
@media (max-width:640px){
  .daf-stufe .gram-box .examples .ex:has(> .ku){ grid-template-columns:minmax(0,1fr) }
}
.daf-stufe .gram-box table{ font-size:.95rem }

/* ── Wortschatz nach Themen (A1) ─────────────────────────────────────── */
.daf-stufe .theme-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:0 28px }
.daf-stufe .theme-card{ background:none; border:0; border-top:3px solid var(--daf-akzent); border-radius:0; padding:14px 0 18px }
.daf-stufe .theme-card h4{ color:var(--daf-text); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase }
.daf-stufe .theme-card .ku-th{ color:var(--daf-leise) }
.daf-stufe .theme-card ul{ color:var(--daf-text) }
.daf-stufe .theme-card li .ku{ color:var(--daf-text-2) }

/* ── Quellen und Brücken-Module: Liste in drei Spalten ───────────────── */
.daf-stufe .ext-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:0 28px; margin:4px 0 28px }
.daf-stufe .ext-card,
.daf-stufe .ext-card.bridge{
  background:none; border:0; border-bottom:1px solid var(--daf-linie); border-radius:0;
  padding:14px 28px 14px 0; box-shadow:none; transform:none;
  transition:border-color var(--takt) ease-out;
}
.daf-stufe .ext-card:hover{ transform:none; box-shadow:none; border-bottom-color:var(--daf-akzent) }
.daf-stufe .ext-card .nm{ color:var(--daf-text); font-size:1rem }
.daf-stufe .ext-card:hover .nm{ color:var(--daf-akzent) }
.daf-stufe .ext-card .desc{ color:var(--daf-leise); font-size:.88rem }
.daf-stufe .ext-card.bridge::after{ content:none }
.daf-stufe .ext-card.ext::after{ top:14px; right:0; color:var(--daf-leise); font-weight:600 }

/* ── Tipps ───────────────────────────────────────────────────────────── */
.daf-stufe .tips-box{
  background:none; border:0; border-left:3px solid var(--daf-akzent); border-radius:0;
  padding:4px 0 4px 22px; margin:36px 0; max-width:var(--daf-mass);
}
.daf-stufe .tips-box h3{ font-family:var(--schrift-display); color:var(--daf-text); font-size:1.35rem }
.daf-stufe .tips-box p,
.daf-stufe .tips-box ul{ color:var(--daf-text) }
.daf-stufe .tips-box a{ color:var(--daf-akzent) !important }

/* ── Ein Abschluss statt drei ────────────────────────────────────────── */
.daf-stufe .ka-learning-boost{ display:none !important }
.daf-stufe .next-banner,
.daf-stufe .closing-summit{
  background:var(--daf-akzent); color:var(--daf-auf-akzent); border:0; border-radius:0; box-shadow:none;
  padding:32px clamp(20px,4vw,40px); margin:48px 0 8px; text-align:left;
}
html[data-theme="dark"] .daf-stufe :is(.next-banner,.closing-summit){ background:var(--daf-akzent-tief) }
.daf-stufe .closing-summit::before{ content:none }
.daf-stufe :is(.next-banner,.closing-summit) h3{ font-family:var(--schrift-display); font-size:clamp(1.4rem,2.6vw,2rem); color:inherit; margin:0 0 8px }
.daf-stufe :is(.next-banner,.closing-summit) p{ color:inherit; opacity:.92; max-width:var(--daf-mass); margin:0 0 18px }
.daf-stufe .closing-summit .ku-line{ color:inherit; opacity:.85; font-size:1.15rem; text-align:right }
.daf-stufe .next-banner > a{
  display:inline-block; background:var(--daf-auf-akzent); color:var(--daf-akzent); border-radius:0;
  padding:12px 22px; font-weight:700; text-decoration:none; white-space:nowrap;
}
html[data-theme="dark"] .daf-stufe .next-banner > a{ background:var(--bg); color:var(--ink) }
.daf-stufe :is(.next-banner,.closing-summit) .nav-buttons{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:flex-start;
  margin:22px 0 0; padding-top:16px; border-top:1px solid currentColor;
}
.daf-stufe :is(.next-banner,.closing-summit) .nav-buttons a{
  background:none; border:0; border-radius:0; padding:0; color:inherit;
  font-weight:600; font-size:.95rem; text-decoration:underline; text-underline-offset:4px;
  white-space:nowrap; transform:none;
}
.daf-stufe :is(.next-banner,.closing-summit) .nav-buttons a:hover{ background:none; color:inherit; text-decoration-thickness:2px }
.daf-stufe :is(.next-banner,.closing-summit) a:focus-visible{ outline:3px solid var(--daf-auf-akzent); outline-offset:3px }

@media (prefers-reduced-motion:reduce){
  .daf-stufe .ext-card{ transition:none }
}