/* ==========================================================================
   WkD – Leserichtung von rechts nach links (Arabisch, Persisch)

   Diese Datei laden nur die Seiten unter /ar/ und /fa/. Sie kehrt die
   Stellen um, die im Hauptstylesheet eine feste Seite nennen.

   Das meiste erledigt der Browser allein: Ein <html dir="rtl"> dreht
   Textrichtung, Aufzaehlungen, Tabellen und die Reihenfolge in jedem
   Flex- und Rasterkasten. Uebrig bleiben die Angaben, die ausdruecklich
   "links" oder "rechts" sagen - ein Haken vor der Zeile, ein farbiger
   Balken am Rand, die Zahl am Warenkorb. Genau die stehen hier.

   Warum nicht gleich logische Angaben (padding-inline-start) im
   Hauptstylesheet: Das waere sauberer, haette aber jede Zeile der
   bestehenden Datei angefasst - und damit die deutsche Seite, die
   laeuft. Eine zweite Datei, die nur zwei Sprachen laden, aendert an
   den anderen vier nachweislich nichts.
   ========================================================================== */

/* --- Kopfzeile ---------------------------------------------------------- */

[dir=rtl] .menu-btn{margin-left:0;margin-right:auto}

/* Die Zahl am Warenkorb sitzt an der oberen aeusseren Ecke. */
[dir=rtl] .korb-zahl{right:auto;left:0}

/* Das Sprachmenue klappt zur Seite hin auf, an der es steht. */
[dir=rtl] .sprach-liste{right:auto;left:0}

/* --- Pfeile ------------------------------------------------------------- */
/* Ein Pfeil zeigt in Leserichtung. Steht die Schrift rechtsbuendig,
   zeigt "weiter" nach links. Gespiegelt statt ausgetauscht, damit im
   HTML weiterhin ueberall dasselbe Zeichen steht. */
[dir=rtl] .arrow,
[dir=rtl] .angebot-mehr::after,
[dir=rtl] .buecher-bestellen::after{display:inline-block;transform:scaleX(-1)}

/* Die Pfeile am Bildwechsler sind Knoepfe mit fester Position; sie
   tauschen die Seiten und zeigen dann von selbst richtig. */
[dir=rtl] .hero-pfeil-links{left:auto;right:18px;transform:scaleX(-1)}
[dir=rtl] .hero-pfeil-rechts{right:auto;left:18px;transform:scaleX(-1)}

/* --- Listen mit eigenem Zeichen davor ------------------------------------ */

[dir=rtl] .haken li{padding-left:0;padding-right:29px}
[dir=rtl] .haken li::before{left:auto;right:0}

[dir=rtl] .detail ul li{padding-left:0;padding-right:30px}
[dir=rtl] .detail ul li::before{left:auto;right:0}

[dir=rtl] .stufe-ziele li{padding-left:0;padding-right:28px}
[dir=rtl] .stufe-ziele li::before{left:auto;right:2px}

[dir=rtl] .gegenueber li{padding-left:0;padding-right:26px}
[dir=rtl] .gegenueber li::before{left:auto;right:0}

[dir=rtl] .stunde li{padding-left:0;padding-right:52px}
[dir=rtl] .stunde li::before{left:auto;right:0}

[dir=rtl] .kurs .umfang{padding-left:0;padding-right:22px}
[dir=rtl] .kurs .umfang::before{left:auto;right:0}

[dir=rtl] .legal ul,
[dir=rtl] .legal ol,
[dir=rtl] .textspalte ul{padding-left:0;padding-right:22px}

/* --- Farbige Balken am Rand ---------------------------------------------- */
/* Ein Balken markiert den Anfang eines Absatzes. Der Anfang liegt hier
   rechts, also gehoert der Balken nach rechts. */

[dir=rtl] .todo,
[dir=rtl] .hinweis,
[dir=rtl] .entwurf-hinweis,
[dir=rtl] .merksatz,
[dir=rtl] .achtung,
[dir=rtl] .warnkasten{
  border-left:0;
  border-right-width:var(--rtl-balken,4px);
  border-right-style:solid;
  border-right-color:currentColor;
}
[dir=rtl] .todo{border-right-color:#e8b400}
[dir=rtl] .hinweis{border-right:5px solid #e8b400}
[dir=rtl] .entwurf-hinweis{border-right:5px solid #e8b400}
[dir=rtl] .merksatz{border-right:4px solid var(--lila)}
[dir=rtl] .achtung{border-right:4px solid #d68a00}
[dir=rtl] .warnkasten{border-right:6px solid #d99b18}

[dir=rtl] .zustimmung.fehlt,
[dir=rtl] .feld.fehlt{
  border-left:0;border-right:3px solid #c00;
  border-radius:8px 0 0 8px;
  padding-left:0;padding-right:13px;
  margin-left:0;margin-right:-16px;
}
[dir=rtl] .zustimmung.fehlt .feld-meldung{margin-left:0;margin-right:31px}

/* --- Abstaende, die eine Seite nennen ------------------------------------ */

[dir=rtl] .filter-gruppe > span{margin-right:0;margin-left:4px}
[dir=rtl] .niveau-marke{margin-right:0;margin-left:10px}
[dir=rtl] .angebot-kauf{
  border-left:0;border-right:1px solid var(--rahmen);
  padding-left:0;padding-right:32px;
}

/* --- Kleinigkeiten ------------------------------------------------------- */

/* Die Brotkrume trennt mit "›". Das Zeichen zeigt in Leserichtung, also
   hier nach links. Gespiegelt wird nur das Trennzeichen, nicht der Text. */
[dir=rtl] .krume{unicode-bidi:isolate}

/* Preise, Telefonnummern und Kursnummern bleiben von links nach rechts,
   auch mitten im arabischen Satz. Ohne das rutscht bei "12,50 €" das
   Eurozeichen an die falsche Seite. */
[dir=rtl] .preis,
[dir=rtl] .preis-offen,
[dir=rtl] .korb-pos-preis,
[dir=rtl] .betrag,
[dir=rtl] .summe-wert{direction:ltr;unicode-bidi:embed}

@media (max-width:760px){
  [dir=rtl] .stimme-text{text-align:right}
  [dir=rtl] .korb-pos-preis{text-align:right}
}

/* --- Schrift ------------------------------------------------------------- */
/* Manrope und DM Sans kennen keine arabischen Zeichen. Der Browser
   nimmt dafuer von selbst eine Systemschrift; die Zeilen werden damit
   etwas enger als im Deutschen, deshalb hier ein wenig mehr Luft.
   Arabische und persische Schrift braucht Hoehe, keine Breite. */
[dir=rtl] body{line-height:1.85}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,
[dir=rtl] .hero-titel,[dir=rtl] .schnitt-titel{line-height:1.4}