/** * BilingualReader Styles * Seite-an-Seite Leseerlebnis mit Sprachwahlern & Hover-Sync */ .bilingual-reader { display: flex; flex-direction: column; gap: 2rem; margin: 2rem 0; } /* Reset einer älteren Regel aus style.css: die äußere Section (.bilingual-reading, id="reader-container") stammt noch aus der Zeit vor der JS-Komponente und setzt dort display:grid; grid-template-columns:1fr 1fr. Da jetzt nur noch EIN Kind-Element (.bilingual-reader) hineingerendert wird, quetschte dieses alte Grid die ganze Komponente auf die halbe Breite. Diese Datei lädt im nach style.css, die Regel gewinnt also in der Kaskade, ohne style.css selbst anfassen zu müssen. */ .bilingual-reading { display: block; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEUERELEMENTE (Sprachwahlerer) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-controls { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%); border-radius: 8px; border: 1px solid #e5e5ea; } /* Container für die separat geladene Vorlesefunktion (vorlesefunktion.js/css). Eigenes Innenlayout bringt vorlesefunktion.css bereits mit (.vorlese-steuerleiste). vorlesefunktion.js scrollt bei jedem Absatzwechsel per scrollIntoView() zum gerade vorgelesenen Text — säße die Steuerleiste im normalen Textfluss, würde sie dabei aus dem sichtbaren Bereich wandern und wäre nicht mehr erreichbar (genau das gemeldete Problem: "Steuerleiste verschwindet, kann nicht stoppen"). Deshalb fixiert am Bildschirmrand statt im Fluss — bleibt unabhängig vom Auto-Scroll jederzeit klickbar. Kein Eingriff in vorlesefunktion.js/css nötig. */ .vorlese-controls-wrapper { display: flex; justify-content: center; } .vorlese-controls-wrapper:empty { display: none; } .vorlese-controls-wrapper:not(:empty) { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 100; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3)); } .language-selector { display: flex; align-items: center; gap: 0.75rem; } .language-selector label { font-weight: 600; color: #333; font-size: 0.95rem; white-space: nowrap; } .lang-select { padding: 0.6rem 0.8rem; border: 2px solid #d0d0d5; border-radius: 6px; background-color: white; color: #333; font-size: 0.95rem; cursor: pointer; transition: all 0.2s ease; font-family: inherit; } .lang-select:hover { border-color: #a0a0a5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .lang-select:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SEGMENT-LISTE (Abfolge aus Text-Segmenten und Vollbreite-Bildern) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-segments { display: flex; flex-direction: column; gap: 2rem; } /* Einmaliger Spalten-Header oberhalb aller Segmente (statt pro Segment wiederholt) — nutzt dasselbe Grid wie .reader-columns, damit die beiden Sprachlabel exakt über ihren Textspalten stehen. */ .reader-columns-header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SPALTEN-CONTAINER (Grid Layout, pro Text-Segment) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } /* Mobil Hochformat: eine Spalte untereinander */ @media (max-width: 768px) and (orientation: portrait) { .reader-columns, .reader-columns-header { grid-template-columns: 1fr; gap: 1.5rem; } .reader-controls { flex-direction: column; gap: 1rem; } /* Auf einer Spalte gestapelt braucht das rechte Header-Label keinen eigenen Platz mehr über der (dann darunter liegenden) rechten Spalte zu reservieren; beide Header bleiben aber sichtbar und lesbar. */ } /* Mobil Querformat: zwei Spalten beibehalten, wenn genug Breite vorhanden ist (typische Smartphone-Querformat-Breiten liegen zwischen ca. 560px und 930px) */ @media (max-width: 900px) and (orientation: landscape) and (min-width: 560px) { .reader-columns, .reader-columns-header { grid-template-columns: 1fr 1fr; gap: 1rem; } } /* Sehr schmales Querformat (ältere/kleine Geräte): dennoch eine Spalte, sonst wird jede Spalte unlesbar schmal */ @media (orientation: landscape) and (max-width: 559px) { .reader-columns, .reader-columns-header { grid-template-columns: 1fr; gap: 1rem; } .reader-controls { flex-direction: column; gap: 1rem; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EINZELNE SPALTE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-column { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: fit-content; transition: border-color 0.3s ease; } .reader-column:hover { border-color: #d0d0d5; background: #f5f5f7; } .reader-column-header { background: linear-gradient(135deg, #333 0%, #555 100%); color: white; padding: 1rem 1.5rem; font-size: 1.2rem; font-weight: 600; border-bottom: 2px solid #222; text-align: center; } .reader-column-content { padding: 1.5rem; flex: 1; /* Bewusst kein overflow/max-height mehr: Segmente sind auto-höhig und scrollen mit der normalen Seite. Bildgrenzen zwischen den Segmenten setzen einen etwaigen DE/EN-Höhen-Drift ohnehin regelmäßig zurück (siehe Messung: ~9-13 Zeichen Drift/Absatz, deutlich unter einer Zeile) — daher kein gekoppeltes Scroll-Sync nötig. */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ABSÄTZE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-paragraph { margin: 0 0 1rem 0; line-height: 1.7; color: #333; font-size: 1rem; transition: all 0.2s ease; cursor: pointer; padding: 0.5rem; border-radius: 4px; } .reader-paragraph:last-child { margin-bottom: 0; } /* Zitate */ .reader-paragraph.reader-quote { font-style: italic; padding-left: 2rem; border-left: 3px solid #0071e3; background: #f0f7ff; margin: 1.5rem 0; color: #1f2937; } /* Hover-Highlight */ .reader-paragraph-highlight { background: #ffd700; background: linear-gradient(120deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 193, 7, 0.1) 100%); box-shadow: 0 0 8px rgba(255, 193, 7, 0.4); font-weight: 500; transform: translateX(2px); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BILD-BLOCK (Vollbreite-Illustration zwischen Text-Segmenten) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .reader-image-block { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid #e0e0e0; background: #fafafa; } .reader-image-block img { display: block; width: 100%; height: auto; } .reader-image-caption { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1rem 1.5rem; font-size: 0.9rem; font-style: italic; color: #666; line-height: 1.5; } .reader-image-caption-side { min-width: 0; } @media (max-width: 768px) and (orientation: portrait) { .reader-image-caption { grid-template-columns: 1fr; gap: 0.5rem; } } @media (orientation: landscape) and (max-width: 559px) { .reader-image-caption { grid-template-columns: 1fr; gap: 0.5rem; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ERROR STATE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .error { padding: 1rem; background: #fee; border: 1px solid #fcc; border-radius: 4px; color: #c33; font-weight: 500; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK MODE (Optional) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (prefers-color-scheme: dark) { .bilingual-reader { /* Optional: Dark mode styles */ } .reader-controls { background: linear-gradient(135deg, #1f1f23 0%, #2a2a2e 100%); border-color: #444; } .language-selector label { color: #e5e5e7; } .lang-select { background-color: #333; color: #e5e5e7; border-color: #555; } .lang-select:focus { border-color: #0a84ff; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15); } .reader-column { background: #1f1f23; border-color: #444; } .reader-column:hover { background: #2a2a2e; border-color: #555; } .reader-column-content { color: #e5e5e7; } .reader-paragraph { color: #e5e5e7; } .reader-paragraph.reader-quote { background: #0a3a66; border-left-color: #0a84ff; color: #a8d5ff; } .reader-paragraph-highlight { background: linear-gradient(120deg, rgba(255, 193, 7, 0.4) 0%, rgba(255, 193, 7, 0.15) 100%); } .reader-image-block { background: #1f1f23; border-color: #444; } .reader-image-caption { color: #a0a0a5; } }