/* =====================================================================
   MARKTOR – arabische Fassung (Leserichtung rechts nach links), 26.10.2026
   Wird nur von den Seiten unter /ar/ geladen, nach styles.css.
   Spiegelt alle Angaben, die in styles.css fest "links/rechts" sind.
   Hintergrundbilder, Fotos und die Knöpfe auf dem Markenzeichen bleiben wie sie sind.
   ===================================================================== */

/* Schrift: lateinische Wörter (MARKTOR) behalten ihre Schrift, arabische Zeichen kommen aus der Systemschrift */
html[dir="rtl"] {
  --ar-sans: "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Roboto, Tahoma, sans-serif;
  --sans: var(--body);
  --display: var(--body);
  --serif: var(--brand-serif);
  --brand-serif: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, "Book Antiqua", var(--ar-sans);
}
/* Arabische Buchstaben hängen zusammen – Sperrung würde sie auseinanderreißen */
html[dir="rtl"] :lang(ar) { letter-spacing: 0 !important; word-spacing: normal; }
html[dir="rtl"] body { line-height: 1.75; }
html[dir="rtl"] main :is(h1, h2, h3, h4) { line-height: 1.4; }
/* Kleine Beschriftungen (im Original 11–13 px in Versalien) sind auf Arabisch zu klein – etwas größer */
html[dir="rtl"] .btn { font-size: 14px !important; }
html[dir="rtl"] .site-header .nav a:not(.btn) { font-size: 15px !important; }
html[dir="rtl"] .site-header .menu-panel a { font-size: 16px !important; }
html[dir="rtl"] .site-header .menu-panel .btn { font-size: 15px !important; }
html[dir="rtl"] figcaption { font-size: 12px !important; }
html[dir="rtl"] :is(.eyebrow, .hv-why, .section-link a) { font-size: 14px !important; }
html[dir="rtl"] :is(.sector-kicker, .sector-more, .eng-status) { font-size: 13px !important; }
html[dir="rtl"] .system-page .sy-vault-box span { font-size: 12px; }
html[dir="rtl"] .system-page .sy-vault-box small { font-size: 12.5px; }
html[dir="rtl"] .system-page :is(.sy-evidence-id, .sy-label, .sy-value-no) { font-size: 13px; }
/* Schrägschrift ist im Arabischen unüblich – Hervorhebung halbfett statt kursiv */
html[dir="rtl"] em:lang(ar) { font-style: normal; font-weight: 600; }

/* Fremdsprachige Sätze (Slogan, Länder-Slogans), E-Mail und Telefon bleiben links-nach-rechts */
html[dir="rtl"] [lang]:not([lang="ar"]),
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"]:not(.btn) { unicode-bidi: isolate; direction: ltr; }
html[dir="rtl"] p[lang]:not([lang="ar"]) { text-align: right; }

/* "Zum Inhalt springen": bei rechts-nach-links würde links außerhalb einen 10 000 px breiten Bildlauf erzeugen */
html[dir="rtl"] .skip { left: auto; right: -9999px; }
html[dir="rtl"] .skip:focus { right: 8px; }

/* ---------- Kopfzeile ---------- */
html[dir="rtl"] .site-header .nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .site-header .nav .btn { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .lang { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid rgba(236,230,218,.18); }
html[dir="rtl"] .site-header .lang a + a { border-left: 0; border-right: 1px solid rgba(236,230,218,.25); }
@media (max-width: 1450px) { html[dir="rtl"] .lang { padding-right: 10px; } }
@media (max-width: 1180px) {
  html[dir="rtl"] .site-header .lang { margin-left: 0; margin-right: auto; padding-right: 0; border-right: 0; }
  html[dir="rtl"] .site-header .menu-panel { right: auto; left: 0; }
}
@media (max-width: 760px) {
  html[dir="rtl"] .lang { margin-left: 0; margin-right: auto; padding-right: 0; border-right: 0; }
  html[dir="rtl"] .menu-panel { right: auto; left: 0; }
}

/* ---------- Startbereich: Aufteilung wie im Bild (Knöpfe bleiben auf dem Markenzeichen) ---------- */
html[dir="rtl"] .hero-v3 .hv-grid { direction: ltr; }
html[dir="rtl"] .hero-v3 .hv-grid > * { direction: rtl; }
html[dir="rtl"] .hero-v3 h1.hv-kicker::after { left: auto; right: 0; }
/* Handy: Slogan und Knoepfe wie in den anderen Sprachen unten links auf dem Bild (rechts stehen die Personen) */
@media (max-width: 760px) {
  html[dir="rtl"] .hero-v3 .hv-stage { direction: ltr; }
  html[dir="rtl"] .hero-v3 :is(h1.hv-kicker, .hv-sub, .hv-panel, .hv-actions) { direction: rtl; }
  html[dir="rtl"] .hero-v3 .hv-stage p.hv-slogan { text-align: left; }  /* staerker als p[lang]:not([lang="ar"]) */
}

/* ---------- Kurz erklärt ---------- */
html[dir="rtl"] .mk-steps li:not(:last-child)::after { left: auto; right: calc(100% + 8px); }
@media (max-width: 640px) {
  html[dir="rtl"] .mk-steps li:not(:last-child)::after { right: 26px; }
  html[dir="rtl"] .mk-band .section-head { text-align: right; }
  html[dir="rtl"] main .mk-band .section-head.center h2::after { margin-right: 0; margin-left: auto; }
}

/* ---------- Ablauf in vier Schritten ---------- */
html[dir="rtl"] .quick-steps li { text-align: right; }
html[dir="rtl"] .quick-steps li:not(:last-child)::after { right: auto; left: -14px; border-right: 0; border-left: 2px solid var(--gold); transform: rotate(-45deg); }
/* Schaubild RS Gatekeeper: Ablauf von rechts nach links, Schrift bleibt lesbar */
html[dir="rtl"] .gk-schema { transform: scaleX(-1); }
html[dir="rtl"] .gk-schema text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
html[dir="rtl"] .gk-arrow svg { transform: scaleX(-1); }
@media (max-width: 1100px) { html[dir="rtl"] .gk-arrow { transform: rotate(-90deg); } }

/* ---------- Kästen mit Randlinie ---------- */
html[dir="rtl"] .stop-note,
html[dir="rtl"] .boundary { border-left: 0; border-right: 3px solid var(--gold); border-radius: 6px 0 0 6px; }
html[dir="rtl"] .premium-status { border-left: 0; border-right: 2px solid var(--gold); }
html[dir="rtl"] .eu-note { padding-left: 0; padding-right: 14px; border-left: 0; border-right: 2px solid var(--gold); }

/* ---------- Listen mit Haken und Rauten ---------- */
html[dir="rtl"] .checks li { padding: 10px 32px 10px 0; }
html[dir="rtl"] .benefit-lists .checks li { padding: 9px 28px 9px 0; }
html[dir="rtl"] .checks li::before { left: auto; right: 4px; }
html[dir="rtl"] .bf-points li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .bf-points li::before { left: auto; right: 1px; }
html[dir="rtl"] .gk-checks li { padding-left: 0; padding-right: 30px; }
html[dir="rtl"] .gk-checks li::before { left: auto; right: 0; }
html[dir="rtl"] .gk-checks li::after { left: auto; right: 5px; }

/* ---------- Fragen und Antworten ---------- */
html[dir="rtl"] .faq summary { padding: 26px 0 26px 48px; }
html[dir="rtl"] .faq summary::after { right: auto; left: 4px; }

/* ---------- Links, Zusatzangebote, Angebotslisten ---------- */
html[dir="rtl"] .section-link span { margin-left: 0; margin-right: 12px; }
html[dir="rtl"] .za-foot { text-align: left; }
html[dir="rtl"] .za-all { padding: 10px 20px 10px 12px; }
html[dir="rtl"] .za.za-chip .za-t::before { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .offer { padding: 16px 16px 16px 30px; }
html[dir="rtl"] .offer-n { right: auto; left: 12px; }
@media (max-width: 760px) { html[dir="rtl"] .offer { padding: 14px 12px 14px 34px; } }

/* ---------- Europa: Schritte Deutschland → Polen → Europa ---------- */
html[dir="rtl"] .eu-steps::before { left: calc(33.3% - 22px); right: 22px; background: linear-gradient(270deg, var(--gold), rgba(196,162,99,.35)); }
html[dir="rtl"] .eu-steps li { padding-right: 0; padding-left: 14px; }
html[dir="rtl"] .eu-num { right: auto; left: 22px; }
@media (max-width: 560px) {
  html[dir="rtl"] .eu-steps::before { left: auto; right: 21px; }
  html[dir="rtl"] .eu-steps li { padding: 0; }
}

/* ---------- Textausrichtung ---------- */
html[dir="rtl"] .structure-note,
html[dir="rtl"] .ctable th,
html[dir="rtl"] .mot-fromto,
html[dir="rtl"] figure figcaption,
html[dir="rtl"] figure.photo figcaption { text-align: right; }
@media (max-width: 760px) {
  html[dir="rtl"] .mot-quote,
  html[dir="rtl"] .mot-after { text-align: right; }
}

/* ---------- Seitenkopf der Unterseiten: Aufteilung wie im Bild ----------
   Die Fotos sind so aufgenommen, dass links Platz für Text ist (Personen, Karten rechts).
   Gespiegelt würde der Text die Personen verdecken – daher bleibt der Text links, rechtsbündig gesetzt. */
@media (min-width: 981px) {
  html[dir="rtl"] main > section.page-intro .intro-split { direction: ltr; }
  html[dir="rtl"] main > section.page-intro .intro-split > * { direction: rtl; }
  /* rechtsbuendiger Text endet sonst genau am Bildrand */
  html[dir="rtl"] main > section.page-intro .intro-split:has(> figure) > div { padding-right: 36px; }
}

/* Europakarte im hellen Hintergrund: auf die freie (linke) Seite */
html[dir="rtl"] main > section:not(.hero):not(.quick):not(.contact):not(.page-intro):not(.alt):not(#deutschland):not(#polen):not(#international) { background-position: -12% 50%; }

/* ---------- System-Seite ---------- */
html[dir="rtl"] .system-page .sy-hero-proof span::before { margin-right: 0; margin-left: 9px; }
html[dir="rtl"] .system-page .sy-principle { border-left: 0; border-right: 2px solid var(--gold); }
html[dir="rtl"] .system-page .sy-econ-grid > div + div { border-left: 0; padding-left: 0; border-right: 1px solid rgba(205,168,94,.2); padding-right: 24px; }
@media (max-width: 1120px) {
  html[dir="rtl"] .system-page .sy-econ-grid > div:nth-child(3) { border-right: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  html[dir="rtl"] .system-page .sy-econ-grid > div,
  html[dir="rtl"] .system-page .sy-econ-grid > div + div,
  html[dir="rtl"] .system-page .sy-econ-grid > div:nth-child(3) { padding: 20px 0; border-right: 0; }
  html[dir="rtl"] .system-page .sy-vault-arrow { transform: rotate(-90deg); }
}
/* ---------- 28.10.: Zusatzangebots-Karten – arabischer Titel ohne Versalien und Laufweite, feste Groesse, darf umbrechen ---------- */
html[dir="rtl"] .za.za-card .za-t { font-family: var(--ar-sans); font-size: 6.2cqw; letter-spacing: 0; text-transform: none; line-height: 1.15; }
html[dir="rtl"] .za.za-card .za-t::before { transform: scaleX(-1); }
html[dir="rtl"] .za.za-card .za-t::after { transform: none; }
/* ---------- 28.10.: Motivationsfoto randlos – Uebergang und "Symbolbild" fuer die Leserichtung von rechts nach links ---------- */
html[dir="rtl"] #motivation .mot-split figure.photo figcaption { right: auto; left: 14px; }
@media (min-width: 981px) {
  html[dir="rtl"] #motivation .mot-split figure.photo::after { background: linear-gradient(270deg, #f5f1e9 0%, rgba(245,241,233,0) 24%), linear-gradient(0deg, #f5f1e9 0%, rgba(245,241,233,0) 14%); }
}