/* Gahwa — gemeinsames Stylesheet für alle Lektionen und Referenzkarten.
   Siehe DESIGN.md. Jede Lektion verlinkt diese Datei; nichts wird inline kopiert. */

/* ---------- Schriften ---------- */
@font-face{font-family:'Young Serif';src:url(fonts/YoungSerif-latin-normal.woff2)format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Young Serif';src:url(fonts/YoungSerif-latin-ext-normal.woff2)format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Newsreader;src:url(fonts/Newsreader-latin-normal.woff2)format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(fonts/Newsreader-latin-ext-normal.woff2)format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;src:url(fonts/Newsreader-latin-italic.woff2)format('woff2');font-weight:300 700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;src:url(fonts/Newsreader-latin-ext-italic.woff2)format('woff2');font-weight:300 700;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Noto Naskh Arabic';src:url(fonts/NotoNaskhArabic-arabic-normal.woff2)format('woff2');font-weight:400 700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---------- Token ---------- */
:root{
  --clay-100:#F5EFE6; --clay-200:#EDE4D6; --clay-300:#DCCFB9;
  --coffee-900:#23180F; --coffee-700:#4A382A; --coffee-500:#756049;
  --brass-600:#A8763E; --brass-400:#C79A5C;
  --cardamom:#59683F; --harissa:#A6402C;

  --font-display:'Young Serif',Georgia,serif;
  --font-text:Newsreader,Georgia,serif;
  --font-arabic:'Noto Naskh Arabic',serif;

  --measure:66ch;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4.5rem; --s9:7rem;

  --ease-pour:cubic-bezier(.16,1,.3,1);

  color-scheme:light;
  accent-color:var(--brass-600);
  caret-color:var(--brass-600);
  scrollbar-color:var(--clay-300) var(--clay-100);
}

::selection{background:var(--brass-400);color:var(--coffee-900)}
:focus-visible{outline:2px solid var(--brass-600);outline-offset:3px;border-radius:2px}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--clay-100);
  color:var(--coffee-900);
  font-family:var(--font-text);
  font-size:1.125rem;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Der Tongrund bekommt eine sehr leise Körnung, damit er nicht als flaches Beige liest. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Seitengerüst ---------- */
.page{position:relative;z-index:1;max-width:78rem;margin:0 auto;padding:var(--s7) var(--s5) var(--s9)}

@media (min-width:64rem){
  .page{
    display:grid;
    grid-template-columns:minmax(0,var(--measure)) 18rem;
    column-gap:var(--s8);
    align-items:start;
    padding-inline:var(--s7);
  }
  .page > *{grid-column:1}
  .aside{grid-column:2;grid-row:1 / span 40;position:sticky;top:var(--s7)}
}

/* ---------- Kopf ---------- */
.masthead{margin-bottom:var(--s5)}
h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4rem);
  line-height:1.04;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0 0 var(--s5);
  max-width:18ch;
}
.standfirst{font-size:1.3125rem;line-height:1.5;color:var(--coffee-700);max-width:46ch;margin:0}

/* Die Messingregel. Der einzige großflächige Akzent der Welt. */
.rule{border:0;height:2px;background:var(--brass-600);margin:var(--s6) 0;width:100%}
.rule--short{width:5.5rem;margin-block:var(--s5)}

h2{
  font-family:var(--font-display);
  font-weight:400;font-size:1.75rem;line-height:1.22;letter-spacing:-.012em;
  text-wrap:balance;margin:var(--s8) 0 var(--s4);max-width:24ch;
}
h3{font-family:var(--font-display);font-weight:400;font-size:1.25rem;margin:var(--s6) 0 var(--s3)}
p{max-width:var(--measure);margin:0 0 var(--s4)}
.lede{font-size:1.25rem;color:var(--coffee-700)}

a{color:var(--coffee-900);text-decoration-color:var(--brass-600);text-decoration-thickness:1.5px;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--coffee-900)}

/* ---------- Das finjan: die Vokabelschale ---------- */
.serve{list-style:none;margin:var(--s5) 0;padding:0}
.serve > li{
  display:grid;grid-template-columns:2.75rem 1fr;column-gap:var(--s4);
  align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--clay-300);
}
.serve > li:first-child{border-top:1px solid var(--clay-300)}
.cup{width:2.25rem;height:2.25rem;margin-top:.15rem;flex:none;color:var(--brass-600)}
.say{
  font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:-.01em;
  display:block;margin-bottom:var(--s1);
}
.gloss{display:block;color:var(--coffee-700);font-size:1rem;line-height:1.45}
.gloss em{font-style:italic;color:var(--coffee-500)}
.lit{display:block;color:var(--coffee-500);font-size:.9375rem;font-style:italic;margin-top:var(--s1)}

/* ---------- Schritte ----------
   Für Abläufe, deren Reihenfolge zählt. Die Ziffer steht in der Anzeigeschrift,
   nicht in Messing: Messing trägt nie Text (DESIGN.md, Kontrast). */
.steps{list-style:none;counter-reset:step;margin:var(--s4) 0 var(--s5);padding:0;max-width:var(--measure)}
.steps > li{
  counter-increment:step;
  display:grid;grid-template-columns:2rem 1fr;column-gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--clay-300);
}
.steps > li:first-child{border-top:1px solid var(--clay-300)}
.steps > li::before{
  content:counter(step);
  font-family:var(--font-display);font-size:1.25rem;line-height:1.3;color:var(--coffee-500);
}

/* ---------- Regeln ----------
   Für Muster und Lücken, die der eigentliche Stoff einer Seite sind, nicht
   eine Randbemerkung zu einem anderen Stoff. Der Unterschied zum Hinweis ist
   der Rang: Hier steht der Leitsatz in Textgröße und in Kaffee, nicht in der
   Nebenstufe an einer Kante. Aufbau wie die Vokabelliste, damit die Seite
   nicht mit jedem Abschnitt ein neues Gerüst aufmacht, und mit derselben
   Schale, weil sie die einzige Bildform dieser Welt ist. */
.regeln{list-style:none;margin:var(--s5) 0;padding:0;max-width:var(--measure)}
.regeln > li{
  display:grid;grid-template-columns:2.75rem 1fr;column-gap:var(--s4);
  align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--clay-300);
}
.regeln > li:first-child{border-top:1px solid var(--clay-300)}
.regel{display:block;font-size:1.125rem;line-height:1.35;font-weight:600;color:var(--coffee-900);margin-bottom:var(--s2)}
.regel-text{display:block;color:var(--coffee-700);font-size:1.0625rem;line-height:1.55}
.regel-text em{font-style:italic;color:var(--coffee-900)}
.regel-text p{margin:0 0 var(--s2);max-width:none}
.regel-text p:last-child{margin-bottom:0}

/* ---------- Aussprache-Hinweis ---------- */
.note{
  margin:var(--s5) 0;padding:var(--s4) 0 var(--s4) var(--s5);
  border-left:1px solid var(--clay-300);
  color:var(--coffee-700);font-size:1rem;max-width:var(--measure);
}
.note strong{font-weight:600;color:var(--coffee-900)}
.note p:last-child{margin-bottom:0}
.phon{font-weight:600;color:var(--coffee-900);white-space:nowrap}

/* ---------- Dialog ---------- */
.dialogue{margin:var(--s5) 0;max-width:var(--measure)}
.dialogue .turn{display:grid;grid-template-columns:4.5rem 1fr;column-gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--clay-300)}
.dialogue .who{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coffee-500);padding-top:.35rem}
.dialogue .line{font-size:1.25rem;line-height:1.35}
.dialogue .line span{display:block;font-size:.9375rem;color:var(--coffee-700);margin-top:var(--s1)}

/* ---------- Tabelle (Referenzkarten) ---------- */
table{border-collapse:collapse;width:100%;margin:var(--s5) 0;font-size:1rem}
/* Die Beschriftung steht vor dem Scrollrahmen, nicht darin: als <caption>
   wäre sie so breit wie die Tabelle und würde auf Handybreite mit wegscrollen. */
.table-label{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coffee-500);margin:var(--s5) 0 var(--s3);max-width:none}
th:first-child,td:first-child{padding-left:var(--s4)}
th{
  text-align:left;font-family:var(--font-text);font-weight:600;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--coffee-500);
  padding:0 var(--s4) var(--s2) 0;border-bottom:2px solid var(--brass-600);
}
td{padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--clay-300);vertical-align:top}
th:last-child,td:last-child{padding-right:var(--s4)}
tbody tr:nth-child(even){background:var(--clay-200);print-color-adjust:exact;-webkit-print-color-adjust:exact}
td.say-cell{font-size:1.1875rem;font-weight:500;white-space:nowrap}
td.ar-cell{font-family:var(--font-arabic);direction:rtl;text-align:right;color:var(--coffee-500);font-size:1.0625rem;line-height:1.9;white-space:nowrap}
.table-scroll{
  overflow-x:auto;margin:0 0 var(--s5);
  background:
    linear-gradient(to right,var(--clay-100),transparent 2.5rem) left center / 100% 100% no-repeat local,
    linear-gradient(to left, var(--clay-100),transparent 2.5rem) right center / 100% 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(35,24,15,.16),transparent) left center / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(35,24,15,.16),transparent) right center / 1rem 100% no-repeat scroll;
}
.table-scroll table{margin:0}

/* ---------- Seitenspalte ---------- */
.aside{font-size:.9375rem;line-height:1.55;color:var(--coffee-700)}
.aside h2{font-size:1rem;margin:0 0 var(--s3);letter-spacing:.06em;text-transform:uppercase;color:var(--coffee-500);font-family:var(--font-text);font-weight:600}
.aside section{padding-bottom:var(--s6)}
.aside ul{list-style:none;margin:0;padding:0}
.aside li{padding:var(--s2) 0;border-bottom:1px solid var(--clay-300)}
.aside li:first-child{border-top:1px solid var(--clay-300)}
@media (max-width:63.99rem){
  .aside{margin-top:var(--s8);border-top:2px solid var(--brass-600);padding-top:var(--s5)}
}

/* ---------- Hauptknopf ----------
   Ein einziger Knopfstil für „Weiter“, in Übersicht und Lektion gleich. */
.knopf{
  display:inline-block;max-width:100%;
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1.35;
  color:var(--clay-100);background:var(--coffee-900);text-decoration:none;
  padding:var(--s3) var(--s6);
  transition:background .18s var(--ease-pour);
}
.knopf:hover{background:var(--coffee-700);color:var(--clay-100)}

/* ---------- Der Gesprächsfaden (Kursübersicht) ----------
   Eine senkrechte Linie verbindet die Runden. Soweit das Gespräch schon trägt,
   wird sie zur Messingregel: 1px Ton trennt, 2px Messing markiert. */
/* 4.5rem über der ersten Stufenüberschrift, wie über jeder
   Abschnittsüberschrift. Zwischen den Stufen steht derselbe Abstand. */
.faden{margin:var(--s8) 0 var(--s5);max-width:var(--measure)}
.faden__liste{list-style:none;margin:0;padding:0}

/* Die drei Stufen. Sie sind Abschnitte des einen Gesprächs, keine Kapitel:
   deshalb eine Überschrift und ein Satz, keine Nummer, kein Kasten. Der Faden
   endet an der letzten Runde einer Stufe und beginnt an der nächsten neu;
   die Überschrift ist die Pause im Gespräch. */
.faden__stufe + .faden__stufe{margin-top:var(--s8)}
.faden__stufe-titel{margin:0 0 var(--s2);max-width:24ch}
.faden__stufe-text{font-size:1rem;color:var(--coffee-700);margin:0 0 var(--s5);max-width:52ch}
/* Ist eine Stufe ganz abgehakt, tritt sie zurück, statt sich zu feiern. */
.faden__stufe.ist-erledigt .faden__stufe-titel{color:var(--coffee-700)}
/* Eine Stufe ohne Lektionen steht trotzdem da, damit die Gliederung etwas
   teilt. Sie tritt zurück wie eine offene Runde und verspricht nichts, was
   noch nicht existiert. */
.faden__stufe.ist-leer .faden__stufe-titel,
.faden__stufe.ist-leer .faden__stufe-text{color:var(--coffee-500)}
.faden__stufe-offen{font-size:1rem;color:var(--coffee-500);margin:0;padding:var(--s3) 0;border-top:1px solid var(--clay-300)}

.faden__runde{position:relative;display:grid;grid-template-columns:3rem 1fr;column-gap:var(--s4);padding-bottom:var(--s6)}
.faden__liste > .faden__runde:last-child{padding-bottom:0}
.faden__runde::before{
  content:'';position:absolute;left:1.5rem;top:3.25rem;bottom:.25rem;
  width:1px;background:var(--clay-300);transform:translateX(-50%);
}
.faden__liste > .faden__runde:last-child::before{display:none}
.faden__runde.ist-erledigt::before{width:2px;background:var(--brass-600)}
.faden .tasse{width:3rem;height:3rem;color:var(--clay-300)}
.faden .tasse__fuellung{opacity:0}
.faden .ist-erledigt .tasse{color:var(--coffee-700)}
.faden .ist-erledigt .tasse__fuellung{opacity:.5}
.faden .ist-aktuell .tasse{color:var(--brass-600)}
.faden__satz{font-size:1.5rem;line-height:1.3;font-weight:500;letter-spacing:-.01em;margin:.4rem 0 var(--s1)}
.faden__satz--thema{font-weight:400}
.ist-offen .faden__satz{color:var(--coffee-700)}
.faden__titel{margin:0;font-size:1rem;color:var(--coffee-700);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s2)}
.faden__titel a{color:var(--coffee-700)}
.faden__titel a:hover{color:var(--coffee-900)}
.faden__haken{font-size:.9375rem;color:var(--coffee-500)}
.faden__los{margin:var(--s4) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.faden__dauer{font-size:.9375rem;color:var(--coffee-500)}

/* ---------- Weiter-Leiste am Ende einer Lektion ---------- */
.weiter{
  margin:var(--s8) 0 0;padding-top:var(--s5);border-top:2px solid var(--brass-600);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);
  max-width:var(--measure);
}
.weiter__stand{flex-basis:100%;margin:0;font-size:.9375rem;color:var(--coffee-500)}
.weiter__zurueck{font-size:1rem}
/* Keine eigene Höchstbreite: Sie ließe den Link wieder neben die Nachricht rutschen.
   Die Leiste selbst ist auf --measure begrenzt. */
.weiter__leer{flex-basis:100%;margin:0;font-size:1.0625rem;color:var(--coffee-900)}

/* ---------- Abspieler (Hörrunde, Abendrunde) ----------
   Kein <audio controls>, der sich nicht gestalten lässt. Der Knopf ist
   bewusst nicht der Hauptknopf: der bleibt dem nächsten Schritt im Kurs
   vorbehalten. Die Laufleiste ist selbst gezeichnet, sonst bliebe sie ein
   Systemregler mit runden Kappen und grauer Spur: 1px Ton für das
   Ungespielte, 2px Messing für das Gelaufene, eckiger Griff. */
.hoeren{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);margin:var(--s5) 0;max-width:var(--measure)}

/* Die Breite hält die längste Beschriftung („Nochmal anhören“), damit die
   Zeile beim Zustandswechsel nicht springt. */
.hoeren__knopf{
  min-width:12rem;text-align:center;
  font-family:var(--font-text);font-size:1rem;font-weight:600;line-height:1.35;
  color:var(--coffee-900);background:var(--clay-100);
  border:1px solid var(--clay-300);border-bottom:2px solid var(--brass-600);
  padding:var(--s3) var(--s5);cursor:pointer;
  transition:background .18s var(--ease-pour);
}
.hoeren__knopf:hover{background:var(--clay-200)}

.hoeren__lauf{
  flex:1 1 10rem;min-width:0;height:1.5rem;margin:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;background:transparent;
}
.hoeren__lauf::-webkit-slider-runnable-track{
  height:1.5rem;
  background:linear-gradient(var(--clay-300) 0 0) left center / 100% 1px no-repeat,
             linear-gradient(var(--brass-600) 0 0) left center / var(--anteil,0%) 2px no-repeat;
}
.hoeren__lauf::-moz-range-track{
  height:1.5rem;
  background:linear-gradient(var(--clay-300) 0 0) left center / 100% 1px no-repeat,
             linear-gradient(var(--brass-600) 0 0) left center / var(--anteil,0%) 2px no-repeat;
}
.hoeren__lauf::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;
  width:.625rem;height:1.125rem;margin-top:.1875rem;
  background:var(--coffee-900);border:0;border-radius:0;
}
.hoeren__lauf::-moz-range-thumb{
  width:.625rem;height:1.125rem;background:var(--coffee-900);border:0;border-radius:0;
}

.hoeren__zeit{font-size:.9375rem;color:var(--coffee-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.hoeren__hinweis{font-size:.9375rem;color:var(--coffee-700);max-width:var(--measure);margin:0 0 var(--s3)}

/* Schmal: der Knopf nimmt die erste Zeile, Leiste und Zeit die zweite,
   die Zeit rechts angeschlagen. Sonst fiele sie als Waisenzeile darunter. */
@media (max-width:34rem){
  .hoeren{align-items:flex-start}
  .hoeren__knopf{flex-basis:100%}
  .hoeren__lauf{flex:1 1 auto}
  .hoeren__zeit{margin-left:auto}
}

/* ---------- Fußzeile ---------- */
.colophon{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--clay-300);font-size:.9375rem;color:var(--coffee-500);max-width:var(--measure)}
.colophon a{color:var(--coffee-700)}

/* ---------- Druck ---------- */
@page{margin:16mm 14mm}

@media print{
  :root{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  body::before{display:none}
  .page{display:block;max-width:none;padding:0}
  .aside,.quiz,.noprint,.weiter,.faden__los,.hoeren,.hoeren__hinweis{display:none !important}

  /* Die Messingregel ist eine Fläche und käme sonst nicht aufs Papier. */
  .rule{background:none;height:0;border-top:1.5pt solid #8A5F2E;margin:10pt 0}
  .rule--short{width:34pt}

  h1{font-size:23pt;line-height:1.05;margin-bottom:8pt}
  h2{font-size:13pt;margin:18pt 0 6pt;page-break-after:avoid}
  .standfirst{font-size:11pt}


  table{page-break-inside:auto;margin:8pt 0}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
  th{border-bottom:1.2pt solid #8A5F2E;color:#444}
  td{border-bottom:.4pt solid #bbb}
  tbody tr:nth-child(even){background:#F0EAE0}
  td.ar-cell{color:#444}

  .note{border-left:.6pt solid #bbb}
  .colophon{border-top:.4pt solid #bbb;color:#555;font-size:9pt}
  a{text-decoration:none;color:#000}
  .table-scroll{overflow:visible;background:none}
  .table-label{color:#555;margin:14pt 0 4pt;page-break-after:avoid}
}