*/ background: var(--lrbst-bg); border: 1px solid var(--lrbst-border); box-shadow: var(--lrbst-shadow); padding: .5rem .5rem .65rem; scroll-margin-top: 1.5rem; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .lrbst-tile:hover { box-shadow: var(--lrbst-shadow-hover); } /* 16:9-Fläche, reserviert -> kein Layout-Shift, auch ohne Bild. */ .lrbst-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lrbst-brand-tint); } /* hqdefault.jpg ist 480x360 (4:3) mit schwarzen Balken. object-fit: cover in der 16:9-Box schneidet die Balken weg. */ .lrbst-media__img { width: 100%; height: 100%; object-fit: cover; display: block; } .lrbst-media__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--lrbst-gold) 0%, var(--lrbst-accent) 100%); color: #fff; font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 700; line-height: 1; } .lrbst-facade { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; } .lrbst-facade:focus-visible { outline: 3px solid var(--lrbst-accent); outline-offset: -3px; } .lrbst-play { width: 3.25rem; height: 2.3rem; background: rgba(4, 56, 74, .82); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); position: relative; transition: background .18s ease, transform .18s ease; } .lrbst-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: .48rem 0 .48rem .78rem; border-color: transparent transparent transparent #fff; } .lrbst-facade:hover .lrbst-play, .lrbst-facade:focus-visible .lrbst-play { background: var(--lrbst-accent); transform: scale(1.06); } .lrbst-frame { width: 100%; height: 100%; border: 0; display: block; } .lrbst-caption { margin: .5rem .15rem .1rem; font-size: .82rem; line-height: 1.35; color: var(--lrbst-ink-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Buchstabe = Hauptbeschriftung der Kachel (der volle YouTube-Titel wiederholt sich auf jeder Kachel und steht deshalb nur noch im Player-Overlay). */ .lrbst-caption--letter { margin: .35rem 0 .1rem; font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 700; line-height: 1.15; color: var(--lrbst-brand); text-align: center; display: block; } /* ---------- Sprungziel aus dem QR-Code ---------- */ /* * ACHTUNG: hier NIE mit einem ID-Selektor arbeiten. Anker wie "5" oder "1" sind * gültige HTML-IDs, aber ungültige CSS-Selektoren. Klasse + :target trifft jede * ID zuverlässig. */ .lrbst-tile:target, .lrbst-tile.is-target { border-color: var(--lrbst-accent); background: var(--lrbst-accent-tint); box-shadow: 0 0 0 3px var(--lrbst-accent), var(--lrbst-shadow-hover); animation: lrbst-pulse 1.4s ease-out 2; } @keyframes lrbst-pulse { 0% { box-shadow: 0 0 0 3px var(--lrbst-accent), 0 0 0 0 rgba(149, 193, 31, .55); } 70% { box-shadow: 0 0 0 3px var(--lrbst-accent), 0 0 0 14px rgba(149, 193, 31, 0); } 100% { box-shadow: 0 0 0 3px var(--lrbst-accent), 0 0 0 0 rgba(149, 193, 31, 0); } } @media (prefers-reduced-motion: reduce) { .lrbst-tile:target, .lrbst-tile.is-target { animation: none; } .lrbst-tile, .lrbst-play { transition: none; } } /* ---------- Übersichtskarten ---------- */ .lrbst-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--lrbst-gap); } /* Ab Tablet feste 3 Spalten — gleiche Aufteilung wie die Videokacheln. */ @media (min-width: 48rem) { .lrbst-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lrbst-card__link { display: flex; flex-direction: column; gap: .35rem; min-height: 100%; padding: 1.15rem 1.25rem; background: var(--lrbst-surface); border: 1px solid var(--lrbst-border); border-left: 5px solid var(--lrbst-accent); box-shadow: var(--lrbst-shadow); text-decoration: none; color: var(--lrbst-brand); transition: box-shadow .18s ease, border-left-color .18s ease; } .lrbst-card__link:hover, .lrbst-card__link:focus-visible { box-shadow: var(--lrbst-shadow-hover); border-left-color: var(--lrbst-gold); } .lrbst-card__title { font-size: 1.15rem; font-weight: 700; line-height: 1.3; /* Deutsche Komposita wie "Schulausgangsschrift" brauchen echte Silbentrennung. overflow-wrap: anywhere trennte irgendwo ("…schrif|t"); hyphens: auto trennt an erlaubten Stellen und setzt einen Trennstrich. Voraussetzung ist die Sprachangabe — sie steht am Wrapper (lang="de"). */ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .lrbst-card__meta { color: var(--lrbst-ink-muted); font-size: .9rem; } .lrbst-search__label { font-weight: 700; color: var(--lrbst-brand); } .lrbst-search__input { flex: 1 1 12rem; min-width: 0; padding: .55rem .7rem; font-family: inherit; font-size: 1.05rem; color: var(--lrbst-ink); background: var(--lrbst-bg); border: 2px solid var(--lrbst-border); border-radius: 0; -webkit-appearance: none; appearance: none; } .lrbst-search__input:focus { outline: none; border-color: var(--lrbst-accent); } .lrbst-search__reset { padding: .5rem .8rem; font-family: inherit; font-size: .9rem; color: var(--lrbst-brand); background: var(--lrbst-bg); border: 1px solid var(--lrbst-border); border-radius: 0; cursor: pointer; } .lrbst-search__reset:hover, .lrbst-search__reset:focus-visible { border-color: var(--lrbst-accent); } .lrbst-search__status { flex: 0 0 auto; margin: 0; font-size: .9rem; color: var(--lrbst-ink-muted); } .lrbst-noresult { margin: 0 0 1.5rem; color: var(--lrbst-ink-muted); } /* ---------- Vollbild-Player ---------- */ /* html.lrbst-locked greift NUR im Einbettungsmodus: dort setzt das JS die Klasse zusätzlich auf . Grund: body { overflow: hidden } sperrt den Viewport nur, solange selbst overflow: visible hat. Setzt ein Theme `html { overflow-x: hidden }`, scrollt die Seite hinter dem Player weiter. Kein !important — .lrbst-locked auf html ist bereits spezifischer als eine Themeregel auf dem bloßen Elementselektor html. */ html.lrbst-locked, body.lrbst-locked { overflow: hidden; } .lrbst-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 2rem); } .lrbst-overlay[hidden] { display: none; } .lrbst-overlay__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(3, 42, 56, .92); cursor: pointer; -webkit-appearance: none; appearance: none; } .lrbst-overlay__inner { position: relative; z-index: 1; width: min(100%, 46rem); max-height: 100%; display: flex; flex-direction: column; gap: .5rem; } .lrbst-overlay__bar { display: flex; align-items: flex-start; gap: 1rem; color: #fff; } .lrbst-overlay__title { flex: 1 1 auto; margin: 0; font-size: clamp(.9rem, 2.4vw, 1.05rem); line-height: 1.35; overflow-wrap: anywhere; } .lrbst-overlay__close { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; padding: 0; font-size: 1.9rem; line-height: 1; color: var(--lrbst-brand); background: #fff; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .lrbst-overlay__close:hover, .lrbst-overlay__close:focus-visible { background: var(--lrbst-accent); color: #fff; } /* Hochformat: Dinas Buchstabenvideos sind durchgehend Shorts (360x640). Die Bühne wird deshalb über die HÖHE aufgezogen, die Breite folgt aus 9:16 und ist zusätzlich durch die Viewport-Breite gedeckelt. */ .lrbst-overlay__stage { height: min(calc(100vh - 7rem), calc((100vw - 2rem) * 16 / 9)); aspect-ratio: 9 / 16; width: auto; max-width: 100%; margin: 0 auto; background: #000; } .lrbst-overlay__stage .lrbst-frame { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Spotlight für das QR-Sprungziel ---------- */ /* * Beim Ankommen über einen gedruckten QR-Code wird die Seite abgedunkelt und * nur die Zielkachel bleibt hell — so findet man "sein" Video sofort, auch auf * einer Seite mit 53 Kacheln. * * EIGENSTÄNDIGER MODUS: Schleier über ein ::before am (z-index 9990), * die Kachel wird darüber gehoben (9991). Das funktioniert dort immer, weil es * außer keinen Vorfahren gibt, der einen Stapelkontext aufmachen könnte. * Der Player liegt mit 9999 über beidem. */ body.lrbst-spotlit::before { content: ""; position: fixed; inset: 0; z-index: 9990; background: rgba(3, 42, 56, .72); animation: lrbst-veil-in .35s ease-out both; pointer-events: none; } @keyframes lrbst-veil-in { from { opacity: 0; } to { opacity: 1; } } /* * EINBETTUNGSMODUS: umgekehrtes Prinzip, ein AUSGESCHNITTENER Schleier. * * Das Anheben der Kachel per z-index ist im Theme-Markup nicht verlässlich: * ein einziges transform/filter/opacity/will-change/contain/isolation auf * irgendeinem Vorfahren sperrt die 9991 in dessen Stapelkontext ein, und der * Schleier läge dann über genau der Kachel, die er zeigen soll. * * Dieses Element ist selbst durchsichtig und wird per JS exakt über die Kachel * gelegt; abgedunkelt wird nur durch den nach außen laufenden box-shadow. Über * der Kachel liegt damit NICHTS — die Frage nach Stapelkontexten stellt sich * gar nicht mehr. Da das Element ein direktes Kind von document.body ist und * position: fixed hat, deckt der Schatten auch die klebrige Kopfzeile des * Themes ab (E5b). * * 100vmax reicht beweisbar: die Kachel liegt im Viewport, der Abstand von * jeder Kachelkante zu jeder Viewportkante ist also kleiner als * max(100vw, 100vh) = 100vmax. box-shadow beeinflusst kein Layout, es entsteht * kein Scrollbalken. */ .lrbst-veil { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9990; box-shadow: 0 0 0 100vmax rgba(3, 42, 56, .72); pointer-events: none; animation: lrbst-veil-in .35s ease-out both; } .lrbst-tile.is-spotlit { position: relative; z-index: 9991; background: var(--lrbst-bg); box-shadow: 0 0 0 3px var(--lrbst-accent), 0 18px 44px rgba(0, 0, 0, .45); } /* Der Hinweis erscheint nur, solange der Schleier liegt. */ .lrbst-tile.is-spotlit::after { content: "Dein Video"; position: absolute; left: 50%; bottom: -2.1rem; transform: translateX(-50%); padding: .15rem .6rem; background: var(--lrbst-accent); color: #14320a; font-size: .78rem; font-weight: 700; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { body.lrbst-spotlit::before, .lrbst-veil { animation: none; } } /* ---------- Einbettungsmodus ---------- */ /* * Diese Regeln stehen bewusst ganz am Ende: .lrbst-embed .lrbst-btn--secondary * hat dieselbe Spezifität wie .lrbst .lrbst-btn--secondary weiter oben, die * Quellreihenfolge entscheidet also. */ .lrbst-embed { color: var(--lrbst-ink); } /* Die Breite und die Innenabstände macht im Einbettungsmodus das Theme. */ .lrbst-embed .lrbst-main { max-width: none; margin: 0; padding: 0; } .lrbst-embed .lrbst-nav { max-width: none; margin: 0 0 1rem; } .lrbst-embed .lrbst-intro { max-width: none; margin: 0 0 1.25rem; color: inherit; } .lrbst-embed .lrbst-intro a { color: var(--lrbst-teal); } /* Kein dunkler Hero: der Umriss-Knopf braucht hier dunkle Farbe auf hellem Grund. */ .lrbst-embed .lrbst-btn--secondary { background: transparent; color: var(--lrbst-brand); border-color: var(--lrbst-brand); } .lrbst-embed .lrbst-btn--secondary:hover, .lrbst-embed .lrbst-btn--secondary:focus-visible { background: var(--lrbst-brand); color: #fff; border-color: var(--lrbst-brand); } /* * Klebrige Kopfzeile: scrollIntoView({ block: 'center' }) zentriert den um die * scroll-margin erweiterten Kasten. 6rem oben und 2rem unten schieben die * Kachel damit (6-2)/2 = 2rem UNTER die Viewportmitte, also sicher unter jede * plausible Kopfzeile — und der Sprung des Browsers auf :target vor dem * Laden des JS landet ebenfalls nicht mehr darunter (E6). */ .lrbst-embed .lrbst-tile { scroll-margin-top: 6rem; scroll-margin-bottom: 2rem; } /* Nur für angemeldete Redakteurinnen und Redakteure (LRBST_Shortcode::hint). */ .lrbst-hint { margin: 0; padding: .75rem 1rem; background: var(--lrbst-accent-tint); border-left: 4px solid var(--lrbst-gold); color: var(--lrbst-ink); font-size: .95rem; line-height: 1.5; } /* Notausgang im Player, falls YouTube den Besucher aussperrt. */ .lrbst-overlay__fallback { margin: .5rem 0 0; font-size: .82rem; line-height: 1.4; color: rgba(255, 255, 255, .82); text-align: center; } .lrbst .lrbst-overlay__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* ================================================================== Einbettungsmodus: Größen unabhängig von der Wurzelschriftgröße ================================================================== Dinas Website nutzt ACSS und setzt auf 62.5% (= 10px), die verbreitete Konvention dort. Unser übriges CSS rechnet in rem und war für die üblichen 16px gedacht — eingebettet kam davon nur 62,5% an: Abschnittsüberschrift 11,5px statt ~18px, Knopf 9,5px statt ~15px, Rasterabstand 7,5px statt 20px (das war die fehlende "Polsterung" zwischen den Reihen). Deshalb hier alles, was sichtbar Größe hat, in absoluten Werten bzw. über die Textvariablen der Website (--text-m / --text-l), damit es sich in deren Skala einfügt. Die Fallback-Werte greifen, wenn die Variablen fehlen (Theme-Wechsel, Testsystem). Der eigenständige Modus bleibt davon unberührt. */ .lrbst-embed .lrbst-section__heading { font-size: var(--text-l, 20px); font-weight: 700; padding-bottom: 4px; margin: 0 0 18px; } .lrbst-embed .lrbst-section + .lrbst-section { margin-top: 48px; } .lrbst-embed .lrbst-section:first-of-type { margin-top: 28px; } .lrbst-embed .lrbst-grid { gap: 24px 20px; } .lrbst-embed .lrbst-tile { padding: 8px 8px 10px; } .lrbst-embed .lrbst-caption--letter { font-size: clamp(26px, 4vw, 32px); margin: 8px 0 2px; } .lrbst-embed .lrbst-caption:not(.lrbst-caption--letter) { font-size: 14px; margin: 8px 3px 2px; } /* Übersichtskarten: Titel in der Größe der Website-Zwischenüberschriften, die Videozahl eine Stufe darunter (Wunsch Chris, 2026-08-25). */ .lrbst-embed .lrbst-card__title { font-size: var(--text-l, 20px); font-weight: 700; } .lrbst-embed .lrbst-card__meta { font-size: var(--text-m, 17px); } .lrbst-embed .lrbst-card__link { padding: 16px 18px; gap: 4px; } .lrbst-embed .lrbst-search { gap: 10px 14px; padding: 14px 16px; margin-bottom: 8px; } .lrbst-embed .lrbst-search__label, .lrbst-embed .lrbst-search__input, .lrbst-embed .lrbst-search__reset { font-size: var(--text-m, 17px); } .lrbst-embed .lrbst-search__input { padding: 10px 12px; } .lrbst-embed .lrbst-search__reset { padding: 9px 14px; } .lrbst-embed .lrbst-search__status { font-size: 15px; } .lrbst-embed .lrbst-noresult { font-size: var(--text-m, 17px); margin-bottom: 24px; } .lrbst-embed .lrbst-btn { font-size: var(--text-m, 17px); padding: 10px 20px; gap: 8px; } .lrbst-embed .lrbst-nav { margin-bottom: 20px; } /* Der Player hängt an , liegt also außerhalb von .lrbst-embed. */ .lrbst-overlay__title { font-size: 15px; } .lrbst-overlay__fallback { font-size: 14px; } /* Silbentrennung auch für die übrigen deutschen Fließtexte im Einbettungsmodus. */ .lrbst-embed .lrbst-cards { gap: 20px; } .lrbst-embed .lrbst-card__title, .lrbst-embed .lrbst-section__heading, .lrbst-embed .lrbst-caption:not(.lrbst-caption--letter) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* ================================================================== Player: feste Maße und oberste Ebene (Mobil-Korrektur 2026-08-25) ================================================================== Zwei Probleme auf dem Handy gemeldet: die klebrige Kopfzeile der Website lag über dem Schließen-Knopf, und der Videotitel lief links aus dem Bild. Ursachen: 1. Der Player hängt an , also AUSSERHALB von .lrbst-embed — die dortige rem-Korrektur greift für ihn nicht. Auf einer Seite mit 10px-Wurzel schrumpften seine Abstände auf 62,5% (Außenabstand 5-12px statt 8-32px), wodurch die Titelzeile in das Band der Kopfzeile rutschte. Deshalb hier durchgehend absolute Werte. 2. z-index 9999 reicht nicht zwingend: Oxygen-Kopfzeilen und Cookie-Banner vergeben teils höhere Werte. Ein Modal, das ein Video abspielt, gehört unbestritten nach ganz oben. Der Schleier bleibt bewusst eine Stufe darunter, der Player darüber. */ .lrbst-overlay { z-index: 2147483000; padding: 12px; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); } body.lrbst-spotlit::before, .lrbst-veil { z-index: 2147482990; } .lrbst-overlay__inner { width: min(100%, 640px); gap: 8px; } .lrbst-overlay__bar { gap: 12px; } .lrbst-overlay__title { min-width: 0; /* sonst sprengt der lange Titel die Zeile */ font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lrbst-overlay__close { width: 40px; height: 40px; font-size: 26px; } .lrbst-overlay__stage { height: min(calc(100vh - 120px), calc((100vw - 24px) * 16 / 9)); } .lrbst-overlay__fallback { font-size: 13px; margin-top: 6px; } /* Sehr flache Fenster (Handy quer): Titel weg, der Player zählt. */ @media (max-height: 480px) { .lrbst-overlay__title { display: none; } .lrbst-overlay__stage { height: calc(100vh - 64px); } }