/* ==========================================================================
   Pölzl Fire Campus – Rechts-nach-links (Arabisch)
   --------------------------------------------------------------------------
   Das übrige CSS verwendet durchgehend logische Eigenschaften
   (margin-inline-start statt margin-left, text-align: start statt left,
   inset-inline-start statt left). Diese drehen sich mit dir="rtl" von selbst.
   Hier steht nur, was sich logisch NICHT ausdrücken lässt.

   Im Prototyp lässt sich die Ansicht über die Schaltfläche "RTL" in der
   Prototyp-Leiste umschalten. Im Endausbau setzt WPML dir="rtl" und
   lang="ar" automatisch.
   ========================================================================== */

/* ── 1. Richtungssymbole spiegeln, alles andere nicht ──────────────────── */
[dir="rtl"] .pfeil { display: inline-block; transform: scaleX(-1); }

/* ── 2. Fortschrittsbalken füllen von rechts ───────────────────────────────
   Von selbst: .pbar und .prog-fill sind Blöcke mit Breite in Prozent und
   stehen unter dir="rtl" an der Anfangskante, also rechts. Kein scaleX(-1)
   auf der Schiene — das hat sie bis 07.10.2026 (#39) wieder nach links
   gedreht. */

/* ── 3. Zahlen, Preise und Kennungen bleiben immer von links nach rechts ─
   Ohne das zerlegt der Bidi-Algorithmus "PFC-2026-000184-K7QM" sichtbar und
   schiebt das Eurozeichen bei "89,00 €" auf die falsche Seite. */
.ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .cert-id,
[dir="rtl"] .buy-price,
[dir="rtl"] .order-row strong,
[dir="rtl"] .rg-sz b,
[dir="rtl"] table.data td:last-child { direction: ltr; unicode-bidi: isolate; }

/* ── 4. Prototyp-Werkzeuge bleiben von links nach rechts ───────────────── */
[dir="rtl"] .proto-bar,
[dir="rtl"] .proto-panel,
[dir="rtl"] .draft-banner { direction: ltr; }

/* ── 5. Schrift für Arabisch ───────────────────────────────────────────────
   Inter enthält kein Arabisch. Eingebunden ist IBM Plex Sans Arabic,
   selbst gehostet unter assets/schrift/, SIL Open Font License 1.1.
   Sie hat dieselbe humanistische Achse wie Inter und passt deshalb im
   Satzbild. Die Schnitte reichen bis 700 – der Inter-Schnitt 800 wird auf
   700 abgebildet.
   Der unicode-range sorgt dafür, dass die Datei nur geladen wird, wenn
   tatsächlich arabische Zeichen vorkommen. Für die deutsche Fassung
   entsteht dadurch kein zusätzlicher Ladevorgang.
   Arabisch braucht bei gleicher Größe mehr Zeilenabstand als Latein. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../schrift/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../schrift/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../schrift/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
/* Inter kennt 800, Plex Arabic nicht – dort greift 700. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("../schrift/ibm-plex-sans-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
html[lang="ar"] {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI",
               system-ui, sans-serif;
}
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] .display,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.35; letter-spacing: 0; }


/* ── 6. Dokumente von rechts nach links ────────────────────────────────
   Zertifikat und Rechnung sind feste A4-Layouts. Was sich logisch nicht
   ausdrücken lässt, steht hier. */
[dir="rtl"] .zt-fuss { flex-direction: row-reverse; }
[dir="rtl"] .zt-sig-line { margin-inline-start: 0; margin-inline-end: auto; }
[dir="rtl"] .zt-inhalte { padding-inline-start: 4mm; padding-inline-end: 0; }
[dir="rtl"] .rg-kopf,
[dir="rtl"] .rg-fuss { direction: rtl; }
[dir="rtl"] table.rg th.num,
[dir="rtl"] table.rg td.num { text-align: end; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .zt-qr,
[dir="rtl"] .cert-qr { direction: ltr; }

/* ── 7. E-Mail-Vorlagen ────────────────────────────────────────────────
   E-Mail-Programme beherrschen logische Eigenschaften nur teilweise.
   Für die arabischen Fassungen werden die Vorlagen mit dir="rtl" auf den
   Tabellenzellen und align-Attributen statt CSS ausgeliefert. In der
   Vorschau hier genügt die Spiegelung. */
[dir="rtl"] .mail,
[dir="rtl"] .mail-body,
[dir="rtl"] .mail-panel { text-align: start; }
[dir="rtl"] .mail-betreff,
[dir="rtl"] .mail-foot { direction: rtl; text-align: start; }
[dir="rtl"] .mail-panel-row { flex-direction: row-reverse; }
[dir="rtl"] .mail-head .logo { flex-direction: row-reverse; }
/* Das Logo selbst wird nicht gespiegelt. */
[dir="rtl"] .mail-head .logo svg { transform: none; }