/* ============================================================ webseite-lorath/css/rtl.css — RTL Layout Overrides für die Marketing-Webseite ============================================================ Wird AUTOMATISCH aktiv über `[dir="rtl"]` auf , das vom `i18n-web.js`-Code beim Sprachwechsel gesetzt wird (Sprachen: ar, he, ur). ============================================================ */ [dir="rtl"] body { direction: rtl; } /* ─── Navigation ────────────────────────────────────────── */ [dir="rtl"] .navbar .nav-container { flex-direction: row-reverse; } [dir="rtl"] .nav-menu { flex-direction: row-reverse; } [dir="rtl"] .hamburger { margin-right: auto; margin-left: 0; } /* Theme-Dropdown — links statt rechts ankern */ [dir="rtl"] .theme-dropdown { right: auto; left: 0; text-align: right; } /* ─── Hero ─────────────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-ctas { flex-direction: row-reverse; justify-content: flex-end; } [dir="rtl"] .hero-trust { flex-direction: row-reverse; justify-content: flex-end; } /* ─── Sektionen mit text-align ──────────────────────────── */ [dir="rtl"] .section-header { text-align: right; } [dir="rtl"] .section-cta { text-align: right; } /* ─── Genre-Carousel (Pfeile spiegeln) ──────────────────── */ [dir="rtl"] .genre-carousel-btn--prev { left: auto; right: 8px; transform: scaleX(-1); } [dir="rtl"] .genre-carousel-btn--next { right: auto; left: 8px; transform: scaleX(-1); } /* ─── Feature-Blocks (image links / text rechts spiegeln) ────────────── */ @media (min-width: 900px) { [dir="rtl"] .feature-block { flex-direction: row-reverse; } [dir="rtl"] .feature-block--reverse { flex-direction: row; } } /* ─── Steps (so funktioniert's) ────────────────────────── */ [dir="rtl"] .steps-grid { direction: rtl; } [dir="rtl"] .step-card { text-align: right; } /* ─── Pricing-Calculator ───────────────────────────────── */ [dir="rtl"] .pricing-calc-display { text-align: right; } /* Preise selbst bleiben LTR */ [dir="rtl"] .pricing-calc-price, [dir="rtl"] .pricing-flat-prices, [dir="rtl"] .pricing-calc-coins, [dir="rtl"] .pricing-example { direction: ltr; unicode-bidi: isolate; } /* ─── Tafelrunde / Charaktere / Worlds ──────────────────── */ [dir="rtl"] .tafelrunde-grid, [dir="rtl"] .char-showcase, [dir="rtl"] .worlds-showcase { direction: rtl; } [dir="rtl"] .char-card, [dir="rtl"] .world-card, [dir="rtl"] .tafelrunde-feature { text-align: right; } /* ─── FAQ ──────────────────────────────────────────────── */ [dir="rtl"] .faq-question { text-align: right; } [dir="rtl"] .faq-answer { text-align: right; } /* ─── Footer ───────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-legal, [dir="rtl"] .footer-brand { text-align: right; } /* ─── Lang-Picker-Modal (gleicher Aufbau wie App) ───────── */ [dir="rtl"] .lang-picker-item { text-align: right; flex-direction: row-reverse; } /* ─── Helpbot-Widget ───────────────────────────────────── */ [dir="rtl"] .helpbot-fab { right: auto; left: 20px; } [dir="rtl"] .helpbot-window { right: auto; left: 20px; } /* ─── Demo-Chat-Bubbles ────────────────────────────────── */ [dir="rtl"] .demo-msg--user { flex-direction: row; align-self: flex-start; } [dir="rtl"] .demo-msg--ai { flex-direction: row-reverse; align-self: flex-end; } /* ─── Code/Zahlen bleiben LTR ──────────────────────────── */ [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .stat-number { direction: ltr; unicode-bidi: isolate; text-align: left; } /* ─── Cookie-Banner ────────────────────────────────────── */ [dir="rtl"] .cookie-banner-actions { flex-direction: row-reverse; }