/* ======================================================
   Style_3_Grammatik_Detail.css
   GETEILTES CSS für alle Grammatik-Erklärseiten
   LinguaBosna

   Diese Datei wird von JEDER Grammatik-Detailseite
   eingebunden (z.B. grammatik-alphabet.html,
   grammatik-geschlecht.html, etc.)

   Aufbau:
   1.  Hauptbereich & Seitentitel
   2.  Breadcrumb-Navigation
   3.  Fortschrittsanzeige (6 Schritte)
   4.  Section-Blöcke (Grundgerüst)
   5.  Block 1: Einstieg
   6.  Block 2: Beispiele
   7.  Block 3: Die Regel (Tabellen & Buchstaben-Cloud)
   8.  Block 4: Vergleich (Deutsch ↔ Bosnisch)
   9.  Block 5: Üben (Quiz)
   10. Block 6: Spickzettel
   11. Seiten-Navigation (zurück / weiter)
   12. Responsive Design (900px / 768px / 480px)
   ====================================================== */


/* ── 0. Mobile-Schutz: kein horizontaler Überlauf ────── */
/* Lange deutsche Komposita (z.B. „Entscheidungsfragen",
   „Fragewörter") oder lange bosnische Sätze können auf
   schmalen Handys über den rechten Rand hinausragen und
   so unerwünschtes seitliches Scrollen verursachen.
   Die folgenden Regeln erlauben, dass ein zu langes Wort
   notfalls umbricht. Sie ändern NICHTS am Desktop-Layout,
   weil sie nur dann greifen, wenn ein Wort sonst zu breit
   für seinen Platz wäre.                                   */

main h1,
.subtitle,
.section-heading h2,
.group-title,
.group-desc,
.grammar-section > p,
.section-instruction,
.intro-scenario,
.intro-hook,
.quiz-question,
.quiz-option-btn,
.comparison-card p,
.cheatsheet-item,
.mini-note,
.breadcrumb,
.example-translation,
.example-detail {
  overflow-wrap: break-word;   /* langes Wort darf am Rand umbrechen */
  word-break: break-word;      /* Fallback für ältere Browser        */
}

/* Flex-Kinder müssen schrumpfen DÜRFEN. Standardmäßig hat ein
   Flex-Element min-width:auto – dadurch sprengt ein einziges
   langes Wort die ganze Zeile und erzeugt seitlichen Überlauf.
   Mit min-width:0 darf der Text-Bereich kleiner werden als sein
   längstes Wort und bricht stattdessen sauber um.              */
.section-heading h2,
.pattern-hint p,
.comparison-summary p {
  min-width: 0;
}


/* ── 1. Hauptbereich & Seitentitel ───────────────────── */

main {
  margin-top: 90px;
  padding: 40px 5% 70px;
  width: 100%;                         /* WICHTIG: main ist ein Flex-Item (body ist
                                          flex-column, main hat flex:1). Ohne feste
                                          Breite schrumpft es auf INHALTSBREITE –
                                          eine breite Tabelle bläht es dann über den
                                          Viewport hinaus, statt dass der Tabellen-
                                          Wrapper scrollt. width:100% bindet main an
                                          die Container-/Viewport-Breite; der Wrapper
                                          kann dann intern scrollen. (box-sizing:
                                          border-box ist global gesetzt → die 5%-
                                          Paddings bleiben in den 100% enthalten.) */
  max-width: 860px;                    /* Lese-optimierte Breite (cappt den Desktop) */
  margin-left: auto;
  margin-right: auto;
}

main h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 8px;
}

.subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  color: var(--secondary);
  text-align: center;
  margin-bottom: 30px;
}

body {
  overflow-x: hidden;
}


/* ── 2. Breadcrumb-Navigation ────────────────────────── */



.breadcrumb {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 24px;
}

.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb-sep {
  margin: 0 8px;
  font-size: 0.65rem;
  color: #ccc;
}

.breadcrumb-current {
  color: #666;
}


/* ── 3. Fortschrittsanzeige ──────────────────────────── */
/* 6 nummerierte Schritte in einer horizontalen Reihe     */

.progress-steps {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  align-items: center;
  gap: 5px;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neutral);
  color: var(--primary);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

.step-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.78rem;
  color: #888;
  margin-right: 10px;
}


/* ── 4. Section-Blöcke (Grundgerüst) ────────────────── */
/* Jeder der 6 Blöcke hat einen einheitlichen Aufbau      */

.grammar-section {
  margin-bottom: 55px;
}

/* Abschnitts-Überschrift: Nummer + Titel */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.section-heading h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary);
  margin: 0;
}

/* Allgemeine Absätze in Sections */
.grammar-section > p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 20px;
}

.grammar-section > p strong {
  color: var(--primary);
}

/* Hinweis-Anweisung (z.B. „Schau dir diese Beispiele an:") */
.section-instruction {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
}


/* ── 5. Block 1: Einstieg ────────────────────────────── */

.intro-box {
  background: #fff;
  border: 1px solid var(--neutral);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 28px 28px;
}

.intro-scenario {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 12px;
}

.intro-hook {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 0;
}

.intro-hook i {
  color: var(--accent);
  margin-right: 6px;
}


/* ── 6. Block 2: Beispiele ───────────────────────────── */

.example-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.example-card {
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  padding: 22px 16px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.example-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.example-word {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}

/* Hervorgehobene Buchstaben in Beispielwörtern */
.highlight {
  color: var(--accent);
}

.example-translation {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 8px;
}

.example-detail {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--secondary);
  font-weight: 600;
}

/* Muster-Hinweis („Erkennst du das Muster?") */
.pattern-hint {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--neutral);
  border-left: 4px solid var(--secondary);
  border-radius: 8px;
  padding: 18px 20px;
}

.pattern-hint i {
  color: var(--secondary);
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.pattern-hint p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  margin: 0;
}


/* ── 7. Block 3: Die Regel ───────────────────────────── */

/* Gruppen-Titel (z.B. „Gruppe 1: Das kennst du schon") */
.group-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--primary);
  margin-top: 30px;
  margin-bottom: 8px;
}

.group-title i {
  color: var(--accent);
  margin-right: 6px;
}

.group-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 14px;
}

/* Buchstaben-Cloud (bekannte Buchstaben als Tags) */
.letter-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.letter-cloud span {
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
}

/* Mini-Hinweis unter der Buchstaben-Cloud */
.mini-note {
  background: var(--bg-light);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Buchstaben-Tabelle (Sonderbuchstaben) – gilt für ALLE Grammatik-Tabellen */
.letter-table-wrap {
  overflow-x: auto;    /* eigener Scroll-Container: die Tabelle scrollt, nicht die Seite */
  max-width: 100%;     /* nie breiter als der Elternraum → Tabelle scrollt statt Seite */
  margin-bottom: 20px;
  /* Scroll-Schatten als Hinweis, dass es seitlich noch weitergeht.
     Gesteuert per JS (LB_main.js, Modul „Tabellen-Scroll-Schatten"): die Klassen
     .lb-scroll-left / .lb-scroll-right werden NUR gesetzt, wenn man in genau diese
     Richtung noch scrollen kann. Daraus folgt automatisch:
       • kein Überlauf         → keine Klasse → kein Schatten
       • am linken/rechten Anschlag → Schatten auf DER Seite verschwindet
     Der Schatten selbst ist ein Hintergrund-Gradient mit background-attachment:scroll
     (Default) – er klebt am sichtbaren Rand des Scroll-Containers, nicht am Inhalt.
     Ohne JS erscheinen einfach keine Schatten (die Tabelle scrollt trotzdem). */
  background-repeat: no-repeat;
  background-position: left center, right center;
  background-size: 22px 100%, 22px 100%;
  background-image: none, none;   /* Standard: keine Schatten */
}

/* Es geht nach LINKS noch weiter → Schatten am linken Rand */
.letter-table-wrap.lb-scroll-left {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)),
    none;
}
/* Es geht nach RECHTS noch weiter → Schatten am rechten Rand */
.letter-table-wrap.lb-scroll-right {
  background-image:
    none,
    linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}
/* Beide Richtungen scrollbar → beide Schatten */
.letter-table-wrap.lb-scroll-left.lb-scroll-right {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0)),
    linear-gradient(to left,  rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

.letter-table {
  width: 100%;          /* füllt breite Viewports; darf bei Bedarf überlaufen */
  /* Spaltenbreite nach INHALT (auto), nicht nach fester Tabellenbreite.
     So bleiben ganze Wörter komplett in einer Zeile – sie brechen nicht mehr
     mitten im Wort um (früher: table-layout: fixed + overflow-wrap: break-word).
     Wird die Tabelle dadurch breiter als der Bildschirm, scrollt der Wrapper
     horizontal (overflow-x: auto oben) – für Lernende deutlich lesbarer als
     zerhackte Wörter. Ein Überlauf ist gewollt und wird per Rand-Fade signalisiert. */
  table-layout: auto;
  border-collapse: collapse;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
}

.letter-table thead {
  background: var(--primary);
  color: #fff;
}

.letter-table th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  text-align: left;
  overflow-wrap: normal;   /* Wörter bleiben komplett in einer Zeile */
  word-break: normal;
  hyphens: none;
}

.letter-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral);
  color: #444;
  vertical-align: top;
  overflow-wrap: normal;   /* Wörter bleiben komplett in einer Zeile */
  word-break: normal;
  hyphens: none;
}

.letter-table tbody tr:hover {
  background: #fdf9f0;
}


/* ============================================================
   Tabellen-Verhalten (jetzt GLOBAL – Standard für alle Grammatik-Tabellen)
   ------------------------------------------------------------
   Das frühere Gegenmodell mit der Zusatzklasse .table-scroll wurde in die
   Basis-Regeln oben (.letter-table-wrap / .letter-table) hochgezogen und gilt
   damit für JEDE Tabelle, ohne dass im HTML eine Extra-Klasse nötig ist:

   • Spalten richten sich nach dem Inhalt (table-layout: auto) → ganze Wörter
     bleiben komplett in einer Zeile und brechen nicht mehr mitten im Wort um.
     (Mehrwortige Zellen – z. B. ganze Sätze – brechen weiterhin normal
     zwischen den Wörtern um.)
   • Wird die Tabelle breiter als der Bildschirm, scrollt der Wrapper
     horizontal statt die Seite; ein per JS gesteuerter Scroll-Schatten
     (.lb-scroll-left/-right, siehe oben) signalisiert die Scroll-Richtung.

   Sollte einmal eine einzelne Tabelle das ALTE feste Layout brauchen
   (Spalten gleich breit, lange Wörter umbrechen), kann man ihr gezielt
   `table-layout: fixed; overflow-wrap: break-word;` per Extra-Klasse geben.
   ============================================================ */

/* Buchstabe in der Tabelle hervorgehoben */
.letter-cell {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  white-space: nowrap;
}


/* ── 8. Block 4: Vergleich (Deutsch ↔ Bosnisch) ─────── */

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.comparison-card {
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  padding: 22px 20px;
}

.comparison-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  margin: 0 0 8px;
}

.comparison-card p:last-child {
  margin-bottom: 0;
}

/* Label: „Deutsch" / „Bosnisch" */
.comp-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 14px;
}

.comp-de {
  background: var(--neutral);
  color: #555;
}

.comp-ba {
  background: var(--accent);
  color: var(--primary);
}

/* Zusammenfassung unter dem Vergleich */
.comparison-summary {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--neutral);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 18px 20px;
}

.comparison-summary i {
  color: var(--accent);
  font-size: 1.2rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.comparison-summary p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
}


/* ── 9. Block 5: Üben (Quiz) ────────────────────────── */

.quiz-container {
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  padding: 30px 28px;
}

/* Fortschrittsbalken im Quiz */
.quiz-progress {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  margin-bottom: 10px;
}

.quiz-bar {
  height: 4px;
  background: var(--neutral);
  border-radius: 3px;
  margin-bottom: 24px;
  overflow: hidden;
}

.quiz-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Fragetext */
.quiz-question {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Antwort-Buttons */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.quiz-option-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  padding: 14px 18px;
  border: 2px solid var(--neutral);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.quiz-option-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: #f8f8f8;
}

/* Richtige Antwort: grün */
.quiz-option-btn.correct {
  border-color: #27ae60;
  background: #eafaf1;
  color: #1e7e46;
  font-weight: 600;
}

/* Falsche Antwort: rot */
.quiz-option-btn.wrong {
  border-color: #c0392b;
  background: #fdecea;
  color: #922b21;
}

/* Deaktivierte Buttons */
.quiz-option-btn:disabled {
  cursor: default;
  opacity: 0.8;
}

/* Feedback nach Antwort */
.quiz-feedback {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.quiz-feedback i {
  margin-right: 6px;
}

.feedback-correct {
  background: #eafaf1;
  color: #1e7e46;
  border: 1px solid #a3dfbb;
}

.feedback-wrong {
  background: #fdecea;
  color: #922b21;
  border: 1px solid #f0a0a0;
}

/* Weiter-Button */
.quiz-next-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 22px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.quiz-next-btn:hover {
  background: var(--accent);
  color: var(--primary);
}

/* Quiz-Ergebnis */
.quiz-result {
  background: #fff;
  border: 1px solid var(--neutral);
  border-radius: 10px;
  padding: 40px 28px;
  text-align: center;
}

.quiz-result > i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.result-score {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.result-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin-bottom: 24px;
}

.quiz-retry-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 24px;
  border: 2px solid var(--primary);
  border-radius: 6px;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-retry-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Aufruf zur weiterführenden Übung (Lückentext) unter dem Quiz */
.uebung-cta-box {
  margin-top: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  text-align: center;
}

.uebung-cta-box p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 14px;
}

.uebung-cta {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 26px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--primary);
  border: 2px solid var(--accent);
  transition: all 0.25s ease;
}

.uebung-cta:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.uebung-cta i {
  margin-right: 6px;
}


/* ── 10. Block 6: Spickzettel ────────────────────────── */

.cheatsheet {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 28px 26px;
}

.cheatsheet h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 18px;
}

.cheatsheet h3 i {
  color: var(--accent);
  margin-right: 8px;
}

.cheatsheet-item {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
  padding: 10px 0;
  border-bottom: 1px solid var(--neutral);
}

.cheatsheet-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cheatsheet-item strong {
  color: var(--primary);
}


/* ── 11. Seiten-Navigation (zurück / weiter) ─────────── */

.page-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--neutral);
}

.page-nav-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--primary);
  text-decoration: none;
  padding: 10px 18px;
  border: 2px solid var(--primary);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.page-nav-btn:hover {
  background: var(--primary);
  color: #fff;
}

.page-nav-btn i {
  margin: 0 4px;
}


/* ── 12. Hilfklasse ──────────────────────────────────── */

.hidden {
  display: none !important;
}


/* ======================================================
   12. RESPONSIVE DESIGN
   Drei Breakpoints laut Designvorgabe
   ====================================================== */


/* ── Tablet (max. 900px) ─────────────────────────────── */
@media (max-width: 900px) {

  main {
    padding: 35px 5% 60px;
  }

  main h1 {
    font-size: 1.8rem;
  }

  .section-heading h2 {
    font-size: 1.25rem;
  }
}


/* ── Mobile (max. 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  main {
      margin-top: 90px;
      padding: 30px 5% 50px;
    }

  main h1 {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: 0.95rem;
  }

  /* Fortschrittsanzeige: Labels ausblenden, nur Nummern */
  .step-label {
    display: none;
  }

  .progress-steps {
    gap: 10px;
    margin-bottom: 35px;
  }

  /* Beispiel-Karten: 2 Spalten */
  .example-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .example-word {
    font-size: 1.3rem;
  }

  /* Vergleich: untereinander statt nebeneinander */
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Tabelle: kleinere Schrift */
  .letter-table {
    font-size: 0.82rem;
  }

  .letter-table th,
  .letter-table td {
    padding: 10px 10px;
  }

  /* Seiten-Navigation: untereinander */
  .page-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-nav-btn {
    width: auto;
    text-align: center;
    word-break: break-word;
  }

  /* Quiz: kompaktere Abstände */
  .quiz-container {
    padding: 22px 18px;
  }

  .quiz-question {
    font-size: 1rem;
  }

  /* Einstieg-Box: weniger Padding */
  .intro-box {
    padding: 20px 18px;
  }

  .letter-cell {
    white-space: normal;
    font-size: 0.95rem;
  }

  .letter-table-wrap {
    max-width: 100%;
  }

}


/* ── Sehr kleine Screens (max. 480px) ────────────────── */
@media (max-width: 480px) {

  main {
    padding: 25px 4% 40px;
  }

  main h1 {
    font-size: 1.3rem;
  }

  .section-heading h2 {
    font-size: 1.15rem;
  }

  /* Beispiel-Karten: 1 Spalte */
  .example-cards {
    grid-template-columns: 1fr;
  }

  /* Buchstaben-Cloud: kleinere Tags */
  .letter-cloud span {
    padding: 5px 9px;
    font-size: 0.82rem;
  }

  /* Cheatsheet: weniger Padding */
  .cheatsheet {
    padding: 20px 18px;
  }
}