/* ============================================================ Fremdsprachige Informationsseiten (/ru/ und /ar/) ------------------------------------------------------------ Ersetzen die frueheren PDF-Merkblaetter. Sie nutzen dieselben Container- und Abstandsklassen wie der Rest der Website, brauchen aber drei Dinge zusaetzlich: 1. Schriften. Das eingebundene Open Sans ist auf das Latin-Subset beschraenkt und enthaelt weder Kyrillisch noch Arabisch. Beide Seiten setzen deshalb auf Systemschriften. Fuer Arabisch sind die ueblichen Naskh-Schriften der Betriebssysteme aufgefuehrt. 2. Leserichtung. Die arabische Seite laeuft ueber dir="rtl" am -Element. Damit drehen sich Textausrichtung, Listenpunkte und Tabellenspalten von selbst - solange im CSS "start"/"end" statt "left"/"right" steht. Genau deshalb sind hier keine festen Seitenangaben gesetzt. 3. Kein Blocksatz. Die globale p-Regel erzwingt text-align:justify; in beiden Schriftsystemen wirkt das unruhig, im Arabischen zusaetzlich, weil dort die Wortabstaende gedehnt werden. ============================================================ */ .lang-page { font-family:'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } .lang-page[lang="ru"], .lang-page[lang="ru"] h1, .lang-page[lang="ru"] h2, .lang-page[lang="ru"] h3, .lang-page[lang="ru"] p, .lang-page[lang="ru"] li, .lang-page[lang="ru"] td, .lang-page[lang="ru"] th { font-family:'Segoe UI', 'Helvetica Neue', 'PT Sans', 'Liberation Sans', Arial, sans-serif; } .lang-page[lang="ar"], .lang-page[lang="ar"] h1, .lang-page[lang="ar"] h2, .lang-page[lang="ar"] h3, .lang-page[lang="ar"] p, .lang-page[lang="ar"] li, .lang-page[lang="ar"] td, .lang-page[lang="ar"] th { font-family:'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, 'Traditional Arabic', serif; } /* Arabisch braucht mehr Zeilenabstand: die Schrift hat lange Ober- und Unterlaengen, die sonst ineinanderlaufen. */ .lang-page[lang="ar"] p, .lang-page[lang="ar"] li { line-height:1.9; } .lang-page p, .lang-page li { text-align:start; hyphens:none; } .lang-page h1, .lang-page h2, .lang-page h3 { text-align:start; letter-spacing:normal; color:#d50404; } .lang-page h1 { font-size:34px; line-height:1.3; font-weight:600; margin:0 0 6px 0; } .lang-page h2 { font-size:26px; line-height:1.35; font-weight:600; margin:45px 0 18px 0; } .lang-page h3 { font-size:20px; line-height:1.4; font-weight:600; color:#616161; margin:0 0 4px 0; } /* Der deutsche Name unter der Ueberschrift. Er stand vorher in Klammern hinter dem arabischen Namen, in derselben Zeile. Im arabischen Satz ist das heikel: Eine lateinische Passage bildet einen eigenen Richtungsabschnitt, und wenn sie nicht mehr in die Zeile passt, verteilt der Bidi-Algorithmus die Bruchstuecke nach den Regeln der umgebenden Leserichtung. Auf schmalen Bildschirmen stand deshalb "(Priv.-Doz. Dr. med." am linken Rand der ersten Zeile und "Andreas Kuehn)" rechts in der zweiten - die Klammer wirkte auseinandergerissen. Als eigene Zeile umgeht der Name das Problem: Er bildet einen eigenen Block mit eigener Leserichtung und kann sich mit dem arabischen Text nicht mehr verschraenken. Die Klammern sind damit ueberfluessig. */ /* Zwei Klassen, weil das Element auch .notranslate traegt - und jene Regel setzt font:inherit und color:inherit. Bei gleicher Spezifitaet gewinnt die spaeter notierte, deshalb hier bewusst eine Stufe hoeher. */ .lang-page .lang-page__latin { display:block; direction:ltr; margin-top:3px; font-size:0.85em; font-weight:400; color:#767676; } /* Der Block laeuft von links nach rechts, soll aber an derselben Kante stehen wie die arabische Zeile darueber - also rechts. */ .lang-page[lang="ar"] .lang-page__latin { text-align:right; } .lang-page__subtitle { color:#616161; font-size:18px; line-height:1.5; margin:0 0 30px 0; } .lang-page__intro { padding-bottom:25px; border-bottom:1px solid rgba(97,97,97,0.25); } .lang-page ul { padding-inline-start:22px; margin:0; } .lang-page li { margin-bottom:12px; } .lang-page li ul { margin-top:10px; } /* Sprechzeiten: zwei Spalten, die sich mit der Leserichtung drehen. */ .lang-hours { width:100%; border-collapse:collapse; margin:0 0 15px 0; } .lang-hours th, .lang-hours td { padding:9px 0; border-bottom:1px solid rgba(97,97,97,0.18); font-size:16px; line-height:1.5; color:#4a4a4a; text-align:start; vertical-align:top; } .lang-hours th { font-weight:600; color:#616161; width:40%; } /* Die Uhrzeiten sind lateinische Ziffern und sollen auch im arabischen Satz von links nach rechts stehen. */ .lang-hours td { direction:ltr; text-align:start; } .lang-page[lang="ar"] .lang-hours td { text-align:end; } .lang-contact { font-style:normal; font-size:17px; line-height:1.8; color:#4a4a4a; margin-bottom:10px; } .lang-contact a { color:#4a4a4a; text-decoration:none; } .lang-contact a:hover { color:#d50404; } /* Telefon- und Faxnummern immer lateinisch von links nach rechts. */ /* ist in aelteren Engines nicht als isolierendes Element bekannt. Die beiden Zeilen sind die im HTML-Standard vorgesehene Ersatzregel und sorgen dafuer, dass lateinische Eigennamen im arabischen Satz auch dort nicht zerrissen werden. */ bdi { unicode-bidi:isolate; direction:ltr; } /* Von der maschinellen Uebersetzung ausgenommene Stellen sollen sich optisch nicht vom Fliesstext abheben. */ .notranslate { font:inherit; color:inherit; } .lang-num { direction:ltr; unicode-bidi:isolate; display:inline-block; white-space:nowrap; } /* Sprachwahl oben auf jeder Seite */ .lang-switch { padding:0 0 10px 0; text-align:center; } .lang-switch a, .lang-switch strong { display:inline-block; margin:0 4px; padding:8px 14px; border:2px solid #d50404; font-size:14px; line-height:1.4; text-decoration:none; color:#616161; } .lang-switch strong { background:#d50404; color:#ffffff; font-weight:400; } .lang-switch a:hover { background:#d50404; color:#ffffff; } /* Rueckweg auf die deutsche Website und PDF-Download */ .lang-actions { margin-top:45px; padding-top:30px; border-top:1px solid rgba(97,97,97,0.25); text-align:center; } .lang-actions .button { margin:6px; } .lang-footer { margin-top:35px; text-align:center; } @media screen and (max-width:860px), screen and (max-width:1000px) and (max-height:560px) { /* Ueberschriften bleiben auch mobil linksbuendig - bzw. bei Arabisch rechtsbuendig, denn text-align:start folgt der Leserichtung. Die allgemeine Mobil-Regel in basic-style.css setzt h1 bis h5 auf text-align:center!important. Das passt fuer die deutschen Seiten, nicht aber hier: auf den Sprachseiten stehen Ueberschriften ueber linksbuendigen Aufzaehlungen und Tabellen, zentriert wirken sie davon losgeloest. Deshalb ebenfalls mit !important. */ .lang-page h1, .lang-page h2, .lang-page h3 { text-align:start!important; } .lang-page h1 { font-size:30px; } .lang-page h2 { font-size:25px; margin-top:38px; } .lang-page h3 { font-size:19px; } .lang-page p, .lang-page li, .lang-hours th, .lang-hours td { font-size:18px; line-height:1.7; text-align:start!important; } .lang-page[lang="ar"] p, .lang-page[lang="ar"] li { line-height:2; } .lang-page[lang="ar"] .lang-hours td { text-align:end!important; } .lang-hours th { width:auto; } /* Auf schmalen Anzeigen stehen Tag und Uhrzeit untereinander. */ .lang-hours, .lang-hours tbody, .lang-hours tr, .lang-hours th, .lang-hours td { display:block; width:auto; } .lang-hours th { border-bottom:0; padding-bottom:0; } .lang-hours td { padding-top:2px; } .lang-switch a, .lang-switch strong { font-size:16px; padding:10px 16px; } .lang-actions .button { width:auto; display:block; margin:10px 0; padding:16px; font-size:18px; line-height:1.4; } }