/* ========================================================================== Fokus-Modus: weniger Reize, bessere Lesbarkeit. Aktiv, wenn die Klasse .focus-mode trägt (Schalter oder Taste F). ========================================================================== */ .focus-mode { --step-0: 1.1875rem; --leading: 1.75; --measure: 58ch; --c-fog-soft: #d3d8d4; /* Fließtext kontrastreicher */ scroll-behavior: auto; } .focus-mode *, .focus-mode *::before, .focus-mode *::after { animation: none !important; transition: none !important; } /* Bewegte Bilder anhalten, nur das Standbild bleibt */ .focus-mode .hero__layer video, .focus-mode .shot__btn video, .focus-mode .hero__grain, .focus-mode .osd__cross, .focus-mode .hero__controls { display: none !important; } .focus-mode .hero__layer:not(:first-child) { display: none; } .focus-mode .hero__layer:first-child { opacity: 1; } .focus-mode .hero__shade { background: rgb(13 19 24 / 0.72); } .focus-mode .osd { opacity: 0.45; } /* Deko und Effekte aus */ .focus-mode .reveal .w { opacity: 1 !important; translate: none !important; } .focus-mode .shot__btn:hover img { transform: none; } .focus-mode .btn { transform: none !important; } .focus-mode .cover__tabs span { rotate: 0deg !important; } .focus-mode .hero__title span + span { color: var(--c-fog); -webkit-text-stroke: 0; } /* Ruhigeres Lesen */ .focus-mode .prose, .focus-mode .excerpt { max-width: var(--measure); } .focus-mode .excerpt { font-size: 1.25rem; line-height: 1.85; } .focus-mode .excerpt p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; margin: 0; font-weight: inherit; font-stretch: inherit; } .focus-mode p { letter-spacing: 0.005em; word-spacing: 0.04em; } /* Kleiner Hinweis, dass der Modus aktiv ist */ .focus-badge { display: none; } .focus-mode .focus-badge { display: block; position: fixed; left: var(--gutter); bottom: var(--space-m); z-index: 40; padding: 0.4rem 0.7rem; border: 1px solid var(--c-gold); border-radius: var(--radius-s); background: var(--c-night); font-size: 0.8rem; color: var(--c-gold); }