/* ══════════════════════════════════════════════════════════════ DamasEcke — Rechts-nach-links (/ar/…) Ergänzung zu style.css, NICHT dessen Ersatz. Wird ausschließlich von resources/views/ar/layouts/app.blade.php geladen, und dort zwingend NACH style.css — jede Regel hier überschreibt gezielt eine einzelne Deklaration von dort und verliert bei umgekehrter Reihenfolge. Warum die Datei so kurz ist: dir="rtl" am spiegelt bereits von selbst die Textrichtung, die Reihenfolge aller Flexbox- und Grid-Kinder, alle *-inline-Eigenschaften (padding-inline, margin-inline) und jedes flex-start/ flex-end. style.css setzt die Karten außerdem durchweg mittig (.mp-card { text-align: center }), womit die Gerichtkarten gar nichts zu spiegeln haben. Übrig bleiben eine Handvoll fester links/rechts-Abstände, ein Farbverlauf und die Schriftwahl. ⚠️ Alles ist auf [dir="rtl"] eingegrenzt. Landet die Datei je versehentlich auf einer deutschen Seite, tut sie dort nichts. ══════════════════════════════════════════════════════════════ */ /* ── Schrift ── DM Sans und Cormorant Garamond haben keine arabischen Glyphen; ohne Zutun ersetzt der Browser sie durch irgendeine Systemschrift, und die Seite sieht auf jedem Gerät anders aus. Cairo trägt den Fließtext, 'Aref Ruqaa' bleibt den großen Überschriften vorbehalten — als kalligrafische Auszeichnungs- schrift ist sie in Fließtextgröße schwer zu lesen. Die lateinischen Familien bleiben als Rückfall dahinter stehen: auf dieser Seite steht durchaus noch deutscher Text (Anschrift, Preise, nicht übersetzte Gerichtnamen). */ [dir="rtl"] body { font-family: 'Cairo', 'DM Sans', sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2 { font-family: 'Aref Ruqaa', 'Cormorant Garamond', serif; } /* Gerichtnamen sind h3 — hier wäre die Kalligrafie zu unruhig, sie stehen zu dicht beieinander und sollen schnell überflogen werden. */ [dir="rtl"] h3, [dir="rtl"] .mp-name { font-family: 'Cairo', 'Cormorant Garamond', serif; } /* Arabisch braucht etwas mehr Zeilenhöhe als Latein: die Ober- und Unterlängen der Schrift laufen weiter aus, sonst berühren sich die Zeilen. */ [dir="rtl"] .mp-desc, [dir="rtl"] .footer__desc, [dir="rtl"] .footer__info { line-height: 1.9; } /* ── Suchfeld ── Lupe und Ladering sitzen absolut am linken Rand des Feldes; in RTL gehören sie an den rechten. `left: auto` muss mit, sonst gilt beides zugleich und das Symbol wird über die volle Feldbreite gedehnt. */ [dir="rtl"] .mp-search__ico { left: auto; right: 16px; } [dir="rtl"] .mp-search__spinner { left: auto; right: 15px; } /* Die 44px Innenabstand halten den Platz für die Lupe frei — der Platz wandert mit ihr auf die andere Seite. */ [dir="rtl"] .mp-search input[type="search"] { padding: 14px 44px 14px 18px; } [dir="rtl"] .mp-search input[type="search"]::-webkit-search-cancel-button { margin-right: 0; margin-left: 4px; } /* ── Abschnittskopf ── Der Verlauf läuft von der Überschrift weg ins Nichts. In Leserichtung heißt das in RTL: von rechts nach links, also 270deg statt 90deg. Bliebe er stehen, klebte das kräftige Ende der Linie am fernen Seitenrand statt am Titel. */ [dir="rtl"] .reel-head-line { background: linear-gradient(270deg, rgba(176, 122, 52, 0.45), rgba(176, 122, 52, 0.10) 70%, transparent); } /* ── Abzeichen auf der Gerichtkarte ── Stern und V/NEU sitzen in der oberen äußeren Ecke der Karte. justify-content: flex-end dreht dir="rtl" bereits selbst, nur der feste Abstand nicht. */ [dir="rtl"] .mp-badges { right: auto; left: 14px; } /* ── Preisschild ── Das Schild ist kein schwebender Kasten, sondern sitzt bündig IN der Ecke der Karte: es übernimmt deren Eckenrundung und zieht nur an den beiden inneren Kanten eine Linie (außen liegt schon der Kartenrahmen). Beim Spiegeln müssen deshalb alle drei mitwandern — Position, Rundung und die Wahl der berandeten Seiten. Nur die Position zu drehen ergäbe eine runde Ecke mitten in der Karte und einen doppelten Strich auf dem Rahmen. border-radius: oben-links oben-rechts unten-rechts unten-links border-width: oben rechts unten links */ [dir="rtl"] .mp-price { left: auto; right: 0; border-radius: 0 11px 0 8px; border-width: 0 0 1px 1px; } /* ── Detail-Popup ── Schließen-Knopf in die gespiegelte Ecke. */ [dir="rtl"] .reel-modal__close { right: auto; left: 12px; } /* Abstand zwischen durchgestrichenem und gültigem Preis. Der Preisblock selbst trägt dir="ltr" (die Zahl bleibt deutsch gesetzt), deshalb ist hier NUR der äußere Abstand zu drehen — die Zahl darin nicht. */ [dir="rtl"] .reel-modal__price del { margin-right: 0; margin-left: 10px; } /* ⚠️ Das dir="ltr" am Preisblock hält „8,50 €" zusammen und ein Angebotspaar in derselben Folge wie auf der deutschen Karte (erst der durchgestrichene, dann der gültige Preis). Es zieht aber auch die Ausrichtung des BLOCKS mit nach links — der Preis stand dadurch einsam am linken Rand, während Name und Beschreibung rechts bündig lagen. text-align holt nur den Block zurück an die Leseflucht; die Laufrichtung der Zahl darin bleibt unangetastet. */ [dir="rtl"] .reel-modal__price { text-align: right; } /* ── Sprachumschalter ── Die lateinische Beschriftung („Deutsch") in einer arabischen Leiste braucht den Abstand auf der anderen Seite. */ [dir="rtl"] .lang-switch { margin-left: 4px; margin-right: 0; } /* ── Burger ── Der negative Rand zieht das Symbol optisch an die Leistenkante. Die Kante liegt in RTL links. */ [dir="rtl"] .nav-toggle { margin-right: 0; margin-left: -10px; } /* ── Schmale Displays ── Spiegelbilder der Regeln aus den 860er- und 640er-Blöcken von style.css. Die Medienabfragen müssen mitkopiert werden: eine Regel ohne sie griffe auch auf dem Schreibtisch. */ @media (max-width: 860px) { /* Die waagerecht laufende Kategorieleiste blendet ihre Kanten weich aus, und zwar UNGLEICH: 22px am Anfang, 30px am Ende. In RTL beginnt die Leiste rechts — ohne Drehung läge der kurze Verlauf auf der falschen Seite und der erste Chip („الكل") wäre stärker angeschnitten als der letzte. 270deg dreht den Verlauf, die Stützstellen bleiben unverändert. */ [dir="rtl"] .mp-chips, [dir="rtl"] .reel-intro .mp-chips { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(270deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%); } } @media (max-width: 640px) { [dir="rtl"] .mp-chip:last-child { margin-right: 0; margin-left: 8px; } [dir="rtl"] .mp-badges { right: auto; left: 10px; } }