/*
 * Rechts-nach-links (Arabisch). Wird nur bei <html dir="rtl"> geladen (html.ts), hinter den Seitenstilen.
 *
 * Grundlage sind die logischen Eigenschaften in den uebrigen Stylesheets
 * (margin-/padding-inline, inset-inline, border-inline, text-align start/end).
 * Hier steht nur, was sich damit nicht loesen laesst:
 *   1. Schrift: keine Spationierung, mehr Zeilenhoehe, keine Kursive
 *   2. gespiegelte Richtungszeichen (Pfeile, Brotkrumen-Trenner, Zurueck/Weiter)
 *   3. Bewegung in x-Richtung (Band, Fortschrittsbalken, gepinnte Systemwelten)
 *   4. LTR-Inseln: 3D, Zeichnungen, Masse, Artikelnummern, Preise, Telefon, E-Mail
 */

/* ---------- 1 · Schrift ---------- */
/* Spationierung trennt arabische Buchstaben (Ligaturen) und ist dort falsch. */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Arabisch hat Ober- und Unterlaengen ueber der Latein-Zeilenhoehe; Display-Zeilenhoehen (.9 bis 1.1) schneiden ab. */
[dir="rtl"] body { line-height: 1.7; }
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, .held-titel, .held-unter, .menue-wort, .fuss-gross, .statement, .weg-titel, .rechner-h2,
  .finale-wort, .ex-h2, .loesungen-h2, .st-karte-titel, .mt-kachel-titel, .mt-kopf-bereich h1, .pw-kat-name, .pw-kachel-name,
  .lieferschein-band h2, .dl-hero h1, .fv-hero h1, .pw-faq summary) { line-height: 1.4 !important; }
[dir="rtl"] :is(h1, h2, .held-titel, .statement, .weg-titel, .rechner-h2, .finale-wort, .ex-h2, .loesungen-h2, .menue-wort,
  .welten-kopf h2, .band-kopf h2, .ehrlich-raster h2) { line-height: 1.3 !important; }
[dir="rtl"] :is(.btn, .mt-text, .mt-werkzeug, .mt-eckdaten span, .st, .st-text, .st-achtung, .kfg-leiste-preis, .dl-karte h3) { line-height: 1.5 !important; }
[dir="rtl"] :is(button, .pill, .kicker, label, summary, th, dt) { line-height: 1.5; }

/* Kein Kursiv/Serifen-Akzent: arabische Schrift hat keine Kursive, der Browser wuerde schraeg stellen. */
[dir="rtl"] em,
[dir="rtl"] em.serif,
[dir="rtl"] .serif { font-style: normal !important; }
[dir="rtl"] em.serif,
[dir="rtl"] .serif,
[dir="rtl"] .fuss-gross em { font-family: var(--schrift-text); font-weight: 600; }

/* Grossschreibung gibt es nicht; fuer lateinische Einsprengsel (Artikelnummern) bleibt sie wirkungslos. */
[dir="rtl"] :is(.kicker, legend, th, dt, .site-foot h4) { text-transform: none; }

/* Variable Breite (font-stretch) kennt die arabische Schrift nicht. */
[dir="rtl"] * { font-stretch: 100% !important; }

/* ---------- 2 · Gespiegelte Richtungszeichen ---------- */
/* "→" und "›" sind im Text keine gespiegelten Zeichen; ein Rechts-Pfeil zeigt in RTL ins Leere. */
[dir="rtl"] .pfeil,
[dir="rtl"] .brotkrumen span:not([aria-current]),
[dir="rtl"] .weg-los > span[aria-hidden],
[dir="rtl"] .pw-kachel-mehr > span[aria-hidden],
[dir="rtl"] .fv-tile-pfeil > span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .brotkrumen { direction: rtl; }
[dir="rtl"] .pill:hover .pfeil { transform: translateX(-4px) scaleX(-1); }

/* Montage-App: der Zurueck-Pfeil ist im Quelltext bereits gespiegelt (zeigt nach links); in RTL umgekehrt. */
[dir="rtl"] .mt-icon-zurueck { transform: none; }
[dir="rtl"] .mt-knopf-weiter .mt-icon { transform: scaleX(-1); }

/* ---------- 3 · Bewegung in x-Richtung ---------- */
/* Fortschrittsbalken wachsen von rechts. */
[dir="rtl"] .mt-fortschritt-balken,
[dir="rtl"] .held-scroll i::after { transform-origin: right; }

/* Profilband (Endlosschleife): Inhalt beginnt rechts, also nach rechts schieben. */
@keyframes band-rtl { to { transform: translateX(100%); } }
[dir="rtl"] .band-spur { animation-name: band-rtl; }
@media (prefers-reduced-motion: reduce) { [dir="rtl"] .band-spur { animation: none; } }

/* Ken-Burns der Heldenbilder gegenlaeufig. */
@keyframes held-fahrt-rtl {
  0% { transform: scale(1.12) translateX(1.5%); }
  30%, 100% { transform: scale(1.02) translateX(-1.5%); }
}
[dir="rtl"] .held-bild-datei,
[dir="rtl"] .held-grid-bild { animation-name: held-fahrt-rtl; }

/*
 * Gepinnte Systemwelten: start.ts schiebt die Spur per translate3d(-x) nach links. Damit die Fahrt
 * in RTL von rechts nach links statt von links nach rechts verlaeuft, steht die Spur als LTR-Spur
 * gespiegelt (individuelle scale-Eigenschaft, unabhaengig vom inline gesetzten transform) und
 * jede Karte wird zurueckgespiegelt. Die ungepinnte Variante (unter 900 px) scrollt nativ in RTL.
 */
[dir="rtl"] .s-welten.ist-gepinnt .welten-spur { direction: ltr; scale: -1 1; }
[dir="rtl"] .s-welten.ist-gepinnt .welt { direction: rtl; scale: -1 1; }

/* ---------- 4 · LTR-Inseln ---------- */
/* 3D-Buehnen, Zeichnungen und Fenster-SVG: Geometrie und Beschriftung bleiben links-nach-rechts. */
[dir="rtl"] canvas,
[dir="rtl"] svg:not(.ikon),
[dir="rtl"] :is(.kfg-3d, .kfg-buehne, .kfg-svg, .ex-buehne, .held-buehne, .mt-buehne, .mt-canvas, .st-canvas,
  .fv-svg, .fv-mass, .plan-mass, .rechner-plan, .dr-zeichnung, .produkt-zeichnung, .pw-buehne, .kfg-status3d, .mass-chips-titel) { direction: ltr; }

/* Artikelnummern, Codes, Masse, Preise, Telefon, E-Mail: lateinisch, links-nach-rechts, als Insel im RTL-Satz. */
[dir="rtl"] :is(.mono, .artikel-nr, .kfg-nr, .leistung-nr, .ex-nr, .fd-nr, .weg-nr, .menue-nr, .mt-badge-nr, .mt-dk-nr,
  .mt-kap-nr, .st-karte-nr, .st-nr, .aufpreis, .live-preis, .kfg-preis-wert, .rechner-preis-wert, .kfg-leiste-preis strong,
  .pw-preishinweis b, a[href^="tel:"], a[href^="mailto:"], [data-ltr], input[type="email"], input[type="tel"],
  input[type="number"], input.mono) { direction: ltr; unicode-bidi: isolate; text-align: end; }