/* ================================ Headings ================================ */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: normal; } /* ================================ Body / UI / Paragraph ================================ */ body, p, span, a, li, label, input, button, textarea { font-family: 'Barlow', sans-serif; font-weight: 400; font-style: normal; line-height: 1.6; } /** * ============================================================ * WACHAPP · AUTOMATISCHE DEUTSCHE SILBENTRENNUNG * ============================================================ * * Was macht dieser Block? * - Aktiviert die browserseitige Silbentrennung für normalen Fließtext. * - Nutzt die am -Element gesetzte Sprache (WordPress language_attributes()). * - Vermeidet zusätzliche Klassen an einzelnen Absätzen oder Listen. * - Lässt Navigation, Breadcrumbs, Dropdowns und Pagination bewusst ungetrennt. * - Verhindert harte Worttrennung mitten im Wort; sehr lange Inhalte dürfen * nur als Fallback umgebrochen werden. * ============================================================ */ main p, main li, main blockquote, main dd, main figcaption { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 4 3; word-break: normal; overflow-wrap: break-word; } main li.nav-item, main li.breadcrumb-item, main li.list-inline-item, main .dropdown-menu li, main .pagination li, main code, main pre, main kbd, main samp { -webkit-hyphens: none; hyphens: none; } /* ================================ Textvarianten ================================ */ strong, b { font-weight: 600; } em, i { font-style: italic; } strong em, b i, em strong, i b { font-weight: 600; font-style: italic; } /** * ============================================================ * WACHAPP · GLOBALES SAFE-AREA- UND VIEWPORT-SYSTEM * ============================================================ * * Was macht dieser Block? * - Stellt zentrale CSS-Variablen für native Safe-Areas, Viewport-Höhen * und sticky/fixed relevante Layout-Abstände bereit. * - Nutzt auf Android Capacitor-SystemBars-Insetvariablen und fällt in * Browser/PWA/iOS auf die standardisierten env()-Werte zurück. * - Nutzt dvh/svh als moderne iOS-26-taugliche Grundlage und lässt * klassische vh-Werte nur noch als Fallback bestehen. * - Hält die bisherigen Variablennamen --safe-top, --safe-bottom, * --safe-left und --safe-right aus Kompatibilitätsgründen erhalten. * * Hinweis: * - JS kann bei Bedarf --wt-visual-viewport-height überschreiben. * - Ohne JS bleibt 100dvh die bevorzugte Höhe. * ============================================================ */ :root { --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0.01px)); --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0.01px)); --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0.01px)); --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0.01px)); --safe-top-space: max(0px, var(--safe-top)); --safe-bottom-space: max(0px, var(--safe-bottom)); --safe-left-space: max(0px, var(--safe-left)); --safe-right-space: max(0px, var(--safe-right)); --wt-viewport-height: 100dvh; --wt-viewport-height-small: 100svh; --wt-visual-viewport-height: var(--wt-viewport-height); --wa-sticky-nav-offset: var(--safe-top-space); --wt-toc-top: 80px; --wt-toc-top-mobile: 64px; } /** * ============================================================ * WACHAPP · SAFE-AREA UTILITIES * ============================================================ * * Was macht dieser Block? * - Liefert wiederverwendbare Klassen für sichere Innenabstände. * - Verhindert, dass Inhalte unter Notch, Home-Indikator oder * transparente iOS-Browserflächen rutschen. * ============================================================ */ .wt-safe-top { padding-top: var(--safe-top-space); } .wt-safe-bottom { padding-bottom: var(--safe-bottom-space); } .wt-safe-x { padding-left: var(--safe-left-space); padding-right: var(--safe-right-space); } .wt-safe-y { padding-top: var(--safe-top-space); padding-bottom: var(--safe-bottom-space); } .wt-min-screen { min-height: 100vh; min-height: 100svh; min-height: 100dvh; } .wt-full-screen { min-height: 100vh; min-height: var(--wt-visual-viewport-height); } .wt-fixed-bottom-safe { position: fixed; right: 0; bottom: 0; left: 0; padding-bottom: var(--safe-bottom-space); background: var(--bs-body-bg); } .wt-fixed-top-safe { position: fixed; top: 0; right: 0; left: 0; padding-top: var(--safe-top-space); background: var(--bs-body-bg); } /** * ============================================================ * WACHAPP · STICKY NAVIGATION * ============================================================ * * Was macht dieser Block? * - Verschiebt sticky Navigationen um die obere Safe-Area. * - Verhindert Überlagerungen mit Notch bzw. iOS-Browserflächen. * ============================================================ */ .wa-sticky-nav.sticky-top { top: var(--wa-sticky-nav-offset); } .wt-video { --cycle: 12s; --fade: 1.2s; position: relative; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); height: clamp(240px, 40vw, 440px); background: #000; } .wt-video .wt-layer { position: absolute; inset: 0; } .wt-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .wt-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05)); } @keyframes wtFadeA { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes wtFadeB { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } } .wt-video .wt-vid-1 { animation: wtFadeA var(--cycle) linear infinite; } .wt-video .wt-vid-2 { animation: wtFadeB var(--cycle) linear infinite; transition: opacity var(--fade) linear; } @media (prefers-reduced-motion: reduce) { .wt-video .wt-vid-1, .wt-video .wt-vid-2 { animation: none; opacity: 1; } } /** * ============================================================ * TOC · DESKTOP SIDEBAR * ============================================================ * * Was macht dieser Block? * - Gestaltet die seitliche Inhaltsnavigation auf Desktop. * - Markiert aktive Abschnitte dezent über Farbe und Border. * ============================================================ */ .wt-toc { padding: 0.5rem 0.75rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); border-radius: 0.5rem; } .wt-toc-title { letter-spacing: 0.08em; font-size: 0.75rem; color: var(--bs-secondary-color); text-transform: uppercase; margin-bottom: 0.25rem; } .wt-toc .nav-link { color: var(--bs-secondary-color); padding: 0.25rem 0.25rem 0.25rem 0.5rem; border-left: 2px solid transparent; border-radius: 0; } .wt-toc .nav-link:hover { color: var(--bs-body-color); } .wt-toc .nav-link.active { color: var(--bs-body-color); border-left-color: var(--bs-primary); background: transparent; font-weight: 600; } /* ============================================================================ Mobile TOC-Leiste (unter Berücksichtigung der globalen Safe-Area-Variablen) ---------------------------------------------------------------------------- - Hintergrund leicht transparent gemischt mit dem Seitenhintergrund. - Untere Border für klare Abgrenzung. - padding-top berücksichtigt die iOS-Safe-Area über :root (--safe-top). ============================================================================ */ .wt-toc-mobile { background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); border-bottom: 1px solid var(--bs-border-color); padding-top: calc(0.5rem + var(--safe-top-space)); } .wt-toc--mobile { border: 1px dashed var(--bs-border-color); border-radius: 0.5rem; } /** * ============================================================ * TOC · STICKY-OFFSETS * ============================================================ * * Was macht dieser Block? * - Die eigentlichen Werte liegen zentral im :root Safe-Area-System. * - Dieser Kommentar bleibt als Orientierung für die TOC-Komponente erhalten. * ============================================================ */ /** * ScrollTop · Responsives Verhalten * - Default (≥768px / ab md): unten zentriert, Ein-/Ausblenden von unten * - <768px (unter md): oben fixiert, Ein-/Ausblenden nach oben */ /* ========================================= Basis (≥768px): unten zentriert, unsichtbar ========================================= */ #wtScrollTop.wt-scrolltop { left: 50%; transform: translateX(-50%) translateY(120%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s; /* über Offcanvas/Headers */ will-change: transform, opacity; } /* Sichtbar (unten einschweben) */ #wtScrollTop.wt-scrolltop.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s; } /* Button-Schatten/Focus */ #wtScrollTop .btn { box-shadow: var(--bs-box-shadow-sm); } #wtScrollTop .btn:hover, #wtScrollTop .btn:focus { box-shadow: var(--bs-box-shadow); } /* Bewegungsreduktion respektieren */ @media (prefers-reduced-motion: reduce) { #wtScrollTop.wt-scrolltop, #wtScrollTop.wt-scrolltop.is-visible { transition: none; } } /* ============================================================================ Mobile Scroll-Top-Button (<768px) ---------------------------------------------------------------------------- - Wird oben fixiert dargestellt. - Ein-/Ausblenden erfolgt mit sauberer Slide-Down/Up-Animation. - Safe-Area-Insets werden zentral über :root (--safe-top) berücksichtigt. - Bootstrap-Utilities werden gezielt und zuverlässig überstimmt. ============================================================================ */ @media (max-width: 767.98px) { #wtScrollTop.wt-scrolltop { /* Abstand vom oberen Rand + Safe-Area (iOS) */ top: calc(var(--safe-top-space) + 0.75rem) !important; /* Mobil oben statt unten */ bottom: auto !important; /* Horizontal zentriert */ left: 50% !important; right: auto !important; /* Unsichtbarer Startzustand (nach oben geparkt) */ transform: translateX(-50%) translateY(-120%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s; /* Kein unterer Abstand auf Mobil */ margin-bottom: 0 !important; /* Fixierte Position & hohe Priorität */ position: fixed !important; } /* Sichtbar: sauber nach unten einschweben */ #wtScrollTop.wt-scrolltop.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s; } } /** * ============================================================ * GLOBAL SNAP SYSTEM * ============================================================ * * Was macht dieses CSS? * - Definiert die Basis für das globale Scroll-Snap-System. * - Blendet Scrollbars für Snap-Container aus. * - Setzt Standardwerte für Snap-Alignment und Snap-Stop. * - Trennt sauber zwischen aktivem und inaktivem Snap-Zustand. * - Sorgt dafür, dass Snap-Items nur im aktiven Zustand * als Rail-Elemente behandelt werden. * * Verwendet mit: * - [data-wt-snap] * - .wt-snap-active * - .wt-snap-inactive * - .wt-snap-item */ [data-wt-snap] { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; } [data-wt-snap]::-webkit-scrollbar { display: none; } [data-wt-snap]>* { scroll-snap-align: start; scroll-snap-stop: normal; min-width: 0; } [data-wt-snap][data-wt-snap-align="center"]>*, [data-wt-snap]>[data-wt-snap-align="center"] { scroll-snap-align: center; } [data-wt-snap][data-wt-snap-align="end"]>*, [data-wt-snap]>[data-wt-snap-align="end"] { scroll-snap-align: end; } [data-wt-snap][data-wt-snap-stop="always"]>*, [data-wt-snap]>[data-wt-snap-stop="always"] { scroll-snap-stop: always; } [data-wt-snap].wt-snap-active>.wt-snap-item { flex: 0 0 auto; } [data-wt-snap].wt-snap-inactive>.wt-snap-item { flex: 1 1 auto; width: auto; max-width: 100%; } /** * ============================================================ * TABELLEN · SCROLL-CONTAINER MIT STICKY HEADER * ============================================================ * * Was macht dieser Block? * - Ermöglicht vertikales Scrollen innerhalb großer Tabellen. * - Hält Tabellenköpfe sichtbar, solange im Container gescrollt wird. * ============================================================ */ .wt-table-scroll { min-height: 250px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bs-border-color-translucent) transparent; } /* Sticky Header & kompakte Darstellung */ .wt-table-scroll thead th { position: sticky; top: 0; background-color: var(--bs-body-bg); z-index: 2; } .wt-table-scroll table { width: 100%; border-collapse: separate; border-spacing: 0; } /* Optional: sanfter Schatten unten */ .wt-table-scroll thead { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .wt-kpi { border: 1px solid var(--bs-border-color); border-radius: 0.75rem; padding: 0.9rem 1rem; background: var(--bs-body-bg) } .wt-kpi .wt-val { font-weight: 800; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1 } .wt-kpi .wt-label { color: var(--bs-secondary-color); font-weight: 600 } .wt-section-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem } .wt-section-title .bi { color: var(--bs-primary); opacity: 0.9 } .wt-chart { border: 1px dashed var(--bs-border-color); border-radius: 0.75rem; background: var(--bs-body-bg); min-height: 220px; display: grid; place-items: center; color: var(--bs-secondary-color) } .wt-bar { height: 8px; background: var(--bs-secondary-bg-subtle); border-radius: 999px; overflow: hidden } .wt-bar>span { display: block; height: 100%; background: var(--bs-success); width: 0% } .wt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .dot-good { background: var(--bs-success); } .dot-mid { background: var(--bs-warning); } .dot-bad { background: var(--bs-danger); } .dot-grey { background: var(--bs-secondary); } .table.wt-compact th, .table.wt-compact td { vertical-align: middle } /** * ============================================================ * HEATMAP · KOMPAKTE STUNDENANSICHT * ============================================================ * * Was macht dieser Block? * - Baut eine kompakte 24-Stunden-Heatmap. * - Ergänzt Ticks, Chips und Legende für Analyseansichten. * ============================================================ */ .wt-hour-grid { display: grid; grid-template-columns: repeat(24, minmax(14px, 1fr)); gap: 0.3rem; } .wt-hour-cell { position: relative; height: 22px; /* kleiner als quadratisch = dezenter */ border-radius: 0.45rem; background: var(--wt-heat, var(--bs-tertiary-bg, #e9ecef)); border: 1px solid rgba(0, 0, 0, 0.05); cursor: help; } @media (min-width: 576px) { .wt-hour-cell { height: 24px; } } @media (min-width: 992px) { .wt-hour-cell { height: 26px; } } .wt-hour-cell:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* Ticks unter der Heatmap (0.0.23, nur markante Werte sichtbar) */ .wt-hour-ticks { display: grid; grid-template-columns: repeat(24, minmax(14px, 1fr)); gap: 0.3rem; font-size: 0.75rem; color: var(--bs-secondary-color); user-select: none; } .wt-hour-ticks span { text-align: center; line-height: 1; opacity: 0.75; } .wt-hour-ticks span:not(.is-major) { visibility: hidden; } /* nur 0/6/12/18/23 zeigen */ /* Chips für Zeitfenster */ .wt-chip { padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); font-size: 0.8rem; } /* kleine, schmale Legende */ .wt-legend-sm { height: 4px; width: 160px; border-radius: 999px; background: linear-gradient(90deg, hsl(0, 85%, 48%) 0%, hsl(30, 85%, 48%) 20%, hsl(60, 85%, 48%) 40%, hsl(90, 85%, 46%) 60%, hsl(120, 85%, 44%) 100%); border: 1px solid rgba(0, 0, 0, 0.05); } .collapse-indicator { transition: transform 0.25s ease; } button[aria-expanded="true"] .collapse-indicator { transform: rotate(180deg); } /** * ============================================================ * LIST GROUP · COLLAPSE-ZUSTÄNDE * ============================================================ * * Was macht dieser Block? * - Dreht Collapse-Indikatoren bei geöffneten Elementen. * - Hebt geöffnete Listeneinträge dezent über Bootstrap-Farben hervor. * ============================================================ */ .list-group-item { transition: background-color 0.25s ease; } /* Wenn der enthaltene Button geöffnet ist → leicht dunkler Hintergrund */ .list-group-item:has(button[aria-expanded="true"]) { background-color: var(--bs-secondary-bg); } /* Optional: etwas mehr Kontrast beim Hover im geöffneten Zustand */ .list-group-item:has(button[aria-expanded="true"]):hover { background-color: color-mix(in srgb, var(--bs-secondary-bg) 90%, var(--bs-body-color)); } /** * ============================================================ * WACHAPP · QUICKNAV / MOBILE BOTTOM-BAR * ============================================================ * * Was macht dieser Block? * - Fixiert die mobile QuickNav am unteren Viewportrand. * - Berücksichtigt die iOS-Safe-Area am Home-Indikator. * - Reserviert am Body ausreichend Platz, damit Inhalte nicht * von der Navigation verdeckt werden. * - Hält die gemessene JS-Höhe über --wtq-nav-h kompatibel. * * Wichtig: * - --wtq-nav-h beschreibt die sichtbare Navigationshöhe ohne * zusätzliche Safe-Area. Falls JS bereits inklusive Safe-Area misst, * sollte dort nur die reine .wtq-item-Höhe gesetzt werden. * ============================================================ */ @media (max-width: 767.98px) { body.has-wachapp-quicknav { --wtq-nav-h: 56px; padding-bottom: calc(var(--wtq-nav-h) + var(--safe-bottom-space)); } } #wachappQuickNav { right: 0; bottom: 0; left: 0; padding-bottom: var(--safe-bottom-space); background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.07); opacity: 1; visibility: visible; transform: translateY(0); transition: transform 0.28s ease, opacity 0.2s ease, visibility 0s; will-change: transform, opacity; } #wachappQuickNav.is-hidden { transform: translateY(calc(110% + var(--safe-bottom-space))); opacity: 0; visibility: hidden; transition: transform 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s; } #wachappQuickNav .wtq-container { margin: 0; width: 100%; border-radius: 0; } #wachappQuickNav .row { --bs-gutter-x: 0; --bs-gutter-y: 0; } #wachappQuickNav .wtq-item { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 0.5rem 0.25rem; gap: 0.2rem; line-height: 1; color: var(--bs-body-color); transition: background-color 0.18s ease, color 0.18s ease, border-top-color 0.18s ease; } #wachappQuickNav .wtq-item .bi { font-size: 1.25rem; line-height: 1; } #wachappQuickNav .wtq-item .wtq-label { font-size: 0.75rem; font-weight: 600; line-height: 1.1; color: var(--bs-secondary-color); white-space: nowrap; } #wachappQuickNav .wtq-item:hover, #wachappQuickNav .wtq-item:focus { background: var(--bs-tertiary-bg); } #wachappQuickNav .wtq-item.active { color: var(--bs-primary-text-emphasis); border-top: 2px solid var(--bs-primary); } @media (prefers-reduced-motion: reduce) { #wachappQuickNav, #wachappQuickNav.is-hidden { transition: none; } } /* Standard: nie anzeigen (normaler Browser-Modus) */ #wachappPullToRefresh { display: none; } /** * ============================================================ * PULL-TO-REFRESH · GEMEINSAME DARSTELLUNG * ============================================================ * * Was macht dieser Block? * - Verwendet für PWA und native Android-App dieselben Innenabstände. * - Hält Animation, Rundung und Schatten unabhängig vom Anzeigemodus identisch. * - Verhindert, dass der native Hinweis ohne horizontales Padding erscheint. * ============================================================ */ #wachappPullToRefreshInner { margin-top: 0.75rem; padding: 0.35rem 0.9rem; border-radius: 999px; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); /* Startposition: oberhalb der Safe-Area versteckt */ transform: translateY(-100%); opacity: 0; transition: transform 0.2s ease, opacity 0.2s ease; } /* Während des Ziehens direkt folgen → Transition aus */ #wachappPullToRefreshInner.pulling { transition: none; } /* Wenn ausgelöst: „eingesnappt“ sichtbar unterhalb der Safe-Area */ #wachappPullToRefreshInner.active { transform: translateY(0); opacity: 1; } /* Ready-State: Schwelle erreicht */ #wachappPullToRefreshInner.ready { transform: translateY(0) scale(1.03); } /* Nur im Standalone-Modus aktiv */ @media (display-mode: standalone) { html { overscroll-behavior-y: none; } body { -webkit-overflow-scrolling: touch; } #wachappPullToRefresh { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1080; justify-content: center; pointer-events: none; /* Safe-Area (global) */ padding-top: var(--safe-top-space); } } html.wachapp-native-app { overscroll-behavior-y: none; } html.wachapp-native-app body { -webkit-overflow-scrolling: touch; } html.wachapp-native-app #wachappPullToRefresh { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 1080; justify-content: center; pointer-events: none; padding-top: var(--safe-top-space); } /** * ============================================================ * BOOTSTRAP · MODALS UND OFFCANVAS MIT SAFE-AREA * ============================================================ * * Was macht dieser Block? * - Schützt Bootstrap-Modals und Offcanvas-Bereiche vor Notch, * Home-Indikator und iOS-26-Bottom-Chrome. * - Gilt bewusst nicht nur für PWA/Standalone, sondern auch für * den normalen Safari-Browsermodus auf mobilen Geräten. * - Verhindert abgeschnittene Footer-Buttons und sichtbare Bottom-Gaps. * ============================================================ */ @media (max-width: 767.98px) { .modal { padding-top: calc(var(--bs-modal-margin, 0.5rem) + var(--safe-top-space)); padding-bottom: calc(var(--bs-modal-margin, 0.5rem) + var(--safe-bottom-space)); padding-left: calc(var(--bs-modal-margin, 0.5rem) + var(--safe-left-space)); padding-right: calc(var(--bs-modal-margin, 0.5rem) + var(--safe-right-space)); } .modal.show .modal-dialog { margin-right: auto; margin-left: auto; } .modal.show .modal-footer { padding-bottom: calc(1rem + var(--safe-bottom-space)) !important; } .modal.show .modal-header, .modal.show .modal-body { padding-left: 1.25rem; padding-right: 1.25rem; } .offcanvas { padding-top: var(--safe-top-space); padding-bottom: var(--safe-bottom-space); } .offcanvas-header { padding-top: calc(1rem + var(--safe-top-space)); } .offcanvas-body { padding-bottom: calc(1rem + var(--safe-bottom-space)); } .offcanvas-bottom { height: auto; max-height: calc(var(--wt-visual-viewport-height) - var(--safe-top-space)); padding-bottom: var(--safe-bottom-space); } } /* ============================================================ * System-Hinweis-Banner (sticky, Safe-Area, Gradient) * ------------------------------------------------------------ * Sticky-Element direkt unter der Navbar. * Safe-Area wird zentral über :root (--safe-top) gesteuert. * ============================================================ */ .wachapp-system-notice { position: sticky; /* ergänzend zu .sticky-top */ top: 0; z-index: 1080; /* über Navbar, unter Offcanvas/Modals */ /* Safe-Area für iOS-Notch global berücksichtigt */ padding-top: var(--safe-top-space); } /* Standard: Info (blau/violett) */ .wachapp-system-notice--info { background-image: linear-gradient(90deg, #0d6efd, #6610f2); color: #fff; } /* Warnung: Gelb/Orange */ .wachapp-system-notice--warning { background-image: linear-gradient(90deg, #ffc107, #fd7e14); color: #212529; } /* Störung: Rot */ .wachapp-system-notice--danger { background-image: linear-gradient(90deg, #dc3545, #b21f2d); color: #fff; } /* Erfolg: Grün/Türkis */ .wachapp-system-notice--success { background-image: linear-gradient(90deg, #198754, #20c997); color: #fff; } /* Button im Banner: leichte Anpassung */ .wachapp-system-notice .btn-light { background-color: rgba(255, 255, 255, 0.9); border-color: transparent; } .wachapp-system-notice .btn-light:hover { background-color: #fff; } /** * ============================================================ * INTRO OVERLAY · Vollbild-Startanimation für PWA * - Dunkler Hintergrund * - Zentrierter Inhalt * - Blendet nach Sequenz sauber aus * ============================================================ */ :root { --intro-bg: #1f2937; --intro-fg: #f9fafb; } /* Vollbild-Intro */ #wachappIntroOverlay { position: fixed; inset: 0; min-height: var(--wt-visual-viewport-height); background: var(--intro-bg); z-index: 99999; display: flex; align-items: center; justify-content: center; color: var(--intro-fg); text-align: center; opacity: 1; transition: opacity 0.8s ease; pointer-events: all; } #wachappIntroOverlay.fade-out { opacity: 0; pointer-events: none; } /* Innerer Wrapper mit BS-Abständen */ .wachapp-intro-inner { max-width: 480px; margin-inline: auto; } /* Emoji-Wrapper (Zentrierung über BS in HTML) */ .wachapp-icon-container { width: 130px; height: 130px; position: relative; overflow: hidden; } /* Basis: Emoji exakt in der Mitte der Box */ .wachapp-emoji { font-size: 4rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; line-height: 1; } /* Startzustände */ /* Erstes Emoji: sichtbar, mittig */ .wachapp-cloud { opacity: 1; } /* Rakete: unsichtbar, Start unten (wird über Animation bewegt) */ .wachapp-sun { opacity: 0; } /* Wobble-Animation für erstes Emoji */ .wachapp-cloud-wobble { animation: wachappWobble 0.45s ease-in-out 2; } @keyframes wachappWobble { 0% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -54%) rotate(-4deg); } 50% { transform: translate(-50%, -50%) rotate(3deg); } 75% { transform: translate(-50%, -46%) rotate(-2deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); } } /* Erstes Emoji fliegt nach oben raus */ .wachapp-cloud-exit { animation: wachappCloudExit 0.4s ease forwards; } @keyframes wachappCloudExit { 0% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(-50%, -170%); opacity: 0; } } /* 🚀: Bounce-In + anschließend nach oben rechts rausfliegen */ .wachapp-sun-enter { animation: wachappRocketEnter 1.4s ease-out forwards; } @keyframes wachappRocketEnter { /* Start: unten */ 0% { transform: translate(-50%, 50%) scale(0.6); opacity: 0; } /* Bounce über die Mitte */ 40% { transform: translate(-50%, -55%) scale(1.1); opacity: 1; } 60% { transform: translate(-50%, -48%) scale(0.97); } /* Kurz in der Mitte "stehen" */ 75% { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Zum Schluss nach oben rechts rausfliegen */ 100% { transform: translate(140%, -220%) scale(1); opacity: 0; } } /* Text – gleitet sanft von unten rein */ .wachapp-intro-text { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .wachapp-intro-text.visible { opacity: 1; transform: translateY(0); } /* ============================================================ * Globale Schriftgrößensteuerung (Bootstrap-konform) * ------------------------------------------------------------ * - Wir skalieren NUR die Root-Font-Size (html). * - Alle rem-basierten Bootstrap-Größen und Abstände bleiben * proportional und damit optisch stimmig. * ============================================================ */ html[data-wachapp-font-size="sm"] { font-size: 15px; /* leicht kleiner als Standard */ } html[data-wachapp-font-size="md"] { font-size: 16px; /* Bootstrap-Default */ } html[data-wachapp-font-size="lg"] { font-size: 17px; /* subtil größer */ } html[data-wachapp-font-size="xl"] { font-size: 18px; /* deutlich besser lesbar, aber noch nicht “riesig” */ } /* Aktiver Button im Schriftgrößen-Switcher */ .wachapp-font-size-switcher .btn.active { pointer-events: none; } /* ============================================================ * ACHIEVEMENTS · Gesperrte Karten * ------------------------------------------------------------ * - Leicht abgedunkelt, dezenter Rahmen * - Gute Lesbarkeit in Light & Dark Mode * ============================================================ */ .wt-achievement-card-locked { background-color: var(--bs-body-bg); border-style: dashed; border-color: rgba(var(--bs-border-color-rgb, 108, 117, 125), 0.4); opacity: 0.9; } /* Hover: leichte Hervorhebung, aber weiterhin "locked"-Look */ .wt-achievement-card-locked:hover { opacity: 1; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); } /* Dark-Theme-Feintuning */ body[data-bs-theme="dark"] .wt-achievement-card-locked { background-color: rgba(15, 23, 42, 0.8); /* dunkles Slate-artiges Panel */ border-color: rgba(148, 163, 184, 0.45); } /* Icon entsättigen & leicht transparent, damit gesperrt klar ist */ .wt-achievement-icon-locked { filter: grayscale(1) opacity(0.45); } /* ============================================================ * LEVEL-BADGE (Gamification) * - Runde Badges mit Farbverläufen pro Level (1–15) * ============================================================ */ .wt-level-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; /* vorher 2.75 */ height: 2.3rem; /* vorher 2.75 */ border-radius: 999px; font-weight: 700; font-size: 1.1rem; /* etwas kleiner */ color: #fff; text-shadow: 0 1px 2px rgba(15, 23, 42, 0.7); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55), 0 8px 20px rgba(15, 23, 42, 0.55); } /* ============================================================ LEVEL-BADGES · Farbskala 1 → 15 (kalt → warm → sehr warm) ============================================================ */ /* 1–3: KÜHLE TÖNE (Blau/Grün) */ .wt-level-badge-1 { background: linear-gradient(135deg, #3b82f6, #60a5fa); /* Hellblau → Mittelblau */ } .wt-level-badge-2 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); /* Cyan → Hellcyan */ } .wt-level-badge-3 { background: linear-gradient(135deg, #10b981, #34d399); /* Smaragdgrün → Mint */ } /* 4–7: NEUTRAL BIS WARM (Gelb → Orange) */ .wt-level-badge-4 { background: linear-gradient(135deg, #eab308, #facc15); /* Goldgelb → Hellgold */ } .wt-level-badge-5 { background: linear-gradient(135deg, #f59e0b, #fbbf24); /* Dunkelgelb → Orangegelb */ } .wt-level-badge-6 { background: linear-gradient(135deg, #f97316, #fb923c); /* Orange → Helles Orange */ } .wt-level-badge-7 { background: linear-gradient(135deg, #ea580c, #f97316); /* Dunkelorange → Orange */ } /* 8–12: WARME TÖNE (Rot → Feuerrot) */ .wt-level-badge-8 { background: linear-gradient(135deg, #ef4444, #f87171); /* Rot → Hellrot */ } .wt-level-badge-9 { background: linear-gradient(135deg, #dc2626, #ef4444); /* Dunkelrot → Rot */ } .wt-level-badge-10 { background: linear-gradient(135deg, #b91c1c, #dc2626); /* Blutrot → Dunkelrot */ } .wt-level-badge-11 { background: linear-gradient(135deg, #c2410c, #f97316); /* Rostrot → Orange */ } .wt-level-badge-12 { background: linear-gradient(135deg, #d97706, #f59e0b); /* Safran → Goldorange */ } /* 13–15: SEHR WARME / PRESTIGE-FARBEN (Pink → Violett → Königsgold) */ .wt-level-badge-13 { background: linear-gradient(135deg, #ec4899, #f472b6); /* Pink → Hellpink */ } .wt-level-badge-14 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); /* Violett → Flieder */ } .wt-level-badge-15 { background: linear-gradient(135deg, #fbbf24, #f59e0b); /* Kräftiges Gold → Tiefgold */ } /* ================================ Konfetti-Blur & Dankeschön-Overlay ================================ */ /* Blur nur auf den Page-Content, nicht auf das Overlay */ .wachapp-confetti-blur main, .wachapp-confetti-blur header, .wachapp-confetti-blur footer { filter: blur(4px); transition: filter 0.6s ease; pointer-events: none; } /* Vollbild-Overlay für das Dankeschön */ .wachapp-confetti-overlay { position: fixed; inset: 0; min-height: var(--wt-visual-viewport-height); z-index: 9998; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.85)); } /* Aktiv-Zustand: weich reinfaden */ .wachapp-confetti-overlay-active { opacity: 1; } /* Inhalt des Overlays */ .wachapp-confetti-overlay-inner { text-align: center; padding: 1.5rem; width: 100%; max-width: 1200px; /* groß, aber nicht völlig unendlich breit */ margin: 0 auto; } /* Fettes, großes DANKESCHÖN über (fast) die ganze Breite */ .wachapp-confetti-overlay-title { display: block; font-size: clamp(3rem, 7vw, 5.2rem); /* reagiert auf Viewport-Breite */ font-weight: 800; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.05; margin-bottom: 0.75rem; text-shadow: 0 0 18px rgba(0, 0, 0, 0.7); } /* Untertitel */ .wachapp-confetti-overlay-subtitle { font-size: clamp(1rem, 2.2vw, 1.4rem); color: rgba(255, 255, 255, 0.88); max-width: 52rem; margin: 0 auto; } .legal-content h2 { font-size: 1.25rem; /* statt ~2rem */ font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; } .legal-content h2 { letter-spacing: 0.01em; } /* Standard (Light Mode) */ .mouse { width: 34px; height: 60px; border: 2px solid rgba(0, 0, 0, 0.4); border-radius: 20px; position: relative; } .mouse .scrollWheel { width: 6px; height: 12px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); animation: scrollWheelMove 2s infinite ease-in-out; } /* Dark Mode – Bootstrap 5.3 */ :root[data-bs-theme="dark"] .mouse { border-color: rgba(255, 255, 255, 0.6); } :root[data-bs-theme="dark"] .mouse .scrollWheel { background: rgba(255, 255, 255, 0.9); } /* Animation */ @keyframes scrollWheelMove { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 20px); } 100% { opacity: 0; transform: translate(-50%, 28px); } } .wachapp-login-page { --wachapp-login-bg-image: none; position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden; background-color: var(--bs-body-bg); isolation: isolate; } .wachapp-login-page__bg, .wachapp-login-page__bg-image, .wachapp-login-page__bg-overlay, .wachapp-login-page__bg-grid, .wachapp-login-page__bg-glow { position: absolute; inset: 0; } .wachapp-login-page__bg { z-index: 0; overflow: hidden; } .wachapp-login-page__bg-image { background-image: var(--wachapp-login-bg-image); background-position: center center; background-repeat: no-repeat; background-size: cover; transform: scale(1.03); } .wachapp-login-page__bg-overlay { background: linear-gradient(135deg, rgba(9, 13, 20, 0.76) 0%, rgba(15, 22, 35, 0.64) 45%, rgba(8, 12, 18, 0.82) 100%); } .wachapp-login-page__bg-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 58%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 58%, rgba(0, 0, 0, 0) 100%); opacity: 0.9; } .wachapp-login-page__bg-glow { background: radial-gradient(circle at 25% 70%, rgba(55, 125, 255, 0.16) 0%, rgba(55, 125, 255, 0.00) 34%), radial-gradient(circle at 75% 25%, rgba(0, 191, 165, 0.12) 0%, rgba(0, 191, 165, 0.00) 28%), radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 42%); filter: blur(18px); } .wachapp-login-page__inner { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; padding: 2rem 0; } .wachapp-login-layout { position: relative; border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(15, 20, 30, 0.48); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.30), 0 0.5rem 1.25rem rgba(0, 0, 0, 0.16); } .wachapp-login-layout__aside { position: relative; padding: 2.25rem; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); } .wachapp-login-layout__aside::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 32%), radial-gradient(circle at bottom right, rgba(55, 125, 255, 0.14) 0%, rgba(55, 125, 255, 0.00) 34%); pointer-events: none; } .wachapp-login-layout__aside-content { position: relative; z-index: 1; } .wachapp-login-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); } .wachapp-login-brand-title { font-size: clamp(1.75rem, 2.8vw, 2.4rem); line-height: 1.1; font-weight: 700; color: #fff; letter-spacing: -0.02em; } .wachapp-login-brand-text { max-width: 34rem; color: rgba(255, 255, 255, 0.78); font-size: 1rem; } .wachapp-login-feature-list { display: grid; gap: 0.85rem; margin: 0; padding: 0; list-style: none; } .wachapp-login-feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255, 255, 255, 0.82); } .wachapp-login-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10); flex-shrink: 0; } .wachapp-login-layout__form { padding: 2.25rem; background: linear-gradient(180deg, rgba(20, 26, 38, 0.82) 0%, rgba(17, 22, 33, 0.88) 100%); } .wachapp-login-card { max-width: 460px; margin: 0 auto; } .wachapp-login-header-icon { width: 4rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 1.25rem; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, rgba(13, 110, 253, 0.95) 0%, rgba(84, 159, 255, 0.95) 100%); box-shadow: 0 0.75rem 1.5rem rgba(13, 110, 253, 0.22); } .wachapp-login-panel { border-radius: 1.25rem; padding: 1.25rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .wachapp-login-tabs { padding: 0.35rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .wachapp-login-tabs .nav-link { border-radius: 0.8rem; color: var(--bs-secondary-color); font-weight: 600; padding: 0.85rem 1rem; } .wachapp-login-tabs .nav-link.active { background-color: var(--bs-primary); color: #fff; box-shadow: 0 0.5rem 1rem rgba(13, 110, 253, 0.22); } .wachapp-login-form .form-control, .wachapp-login-form .form-select { min-height: calc(3.5rem + 2px); border-radius: 0.95rem; } .wachapp-login-form .form-floating>label { padding-left: 1rem; } .wachapp-login-password-toggle { width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; } .wachapp-login-divider { position: relative; text-align: center; } .wachapp-login-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--bs-border-color); opacity: 0.7; } .wachapp-login-divider span { position: relative; z-index: 1; display: inline-block; padding: 0 0.85rem; background: rgba(20, 26, 38, 0.96); color: var(--bs-secondary-color); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } html[data-bs-theme="light"] .wachapp-login-page__bg-image { filter: blur(2px) saturate(0.92) brightness(1.02); opacity: 0.46; } html[data-bs-theme="light"] .wachapp-login-page__bg-overlay { background: linear-gradient(135deg, rgba(245, 248, 252, 0.78) 0%, rgba(224, 232, 242, 0.58) 45%, rgba(236, 242, 248, 0.82) 100%); } html[data-bs-theme="light"] .wachapp-login-page__bg-grid { background-image: linear-gradient(rgba(31, 41, 55, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 41, 55, 0.05) 1px, transparent 1px); } html[data-bs-theme="light"] .wachapp-login-layout { background: rgba(255, 255, 255, 0.62); border-color: rgba(255, 255, 255, 0.42); box-shadow: 0 1.25rem 3rem rgba(31, 41, 55, 0.14), 0 0.5rem 1rem rgba(31, 41, 55, 0.08); } html[data-bs-theme="light"] .wachapp-login-layout__aside { background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(248, 250, 252, 0.42) 100%); } html[data-bs-theme="light"] .wachapp-login-brand-title { color: #17202f; } html[data-bs-theme="light"] .wachapp-login-brand-text, html[data-bs-theme="light"] .wachapp-login-feature-list li { color: rgba(23, 32, 47, 0.78); } html[data-bs-theme="light"] .wachapp-login-badge, html[data-bs-theme="light"] .wachapp-login-feature-icon { color: rgba(23, 32, 47, 0.82); background: rgba(255, 255, 255, 0.56); border-color: rgba(31, 41, 55, 0.08); } html[data-bs-theme="light"] .wachapp-login-layout__form { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.92) 100%); } html[data-bs-theme="light"] .wachapp-login-panel, html[data-bs-theme="light"] .wachapp-login-tabs { background: rgba(255, 255, 255, 0.58); border-color: rgba(31, 41, 55, 0.08); } html[data-bs-theme="light"] .wachapp-login-divider span { background: rgba(255, 255, 255, 0.96); } html[data-bs-theme="dark"] .wachapp-login-page__bg-image { filter: blur(1.5px) saturate(0.92) brightness(0.88); opacity: 0.72; } @media (max-width: 991.98px) { .wachapp-login-layout__aside { padding: 1.5rem 1.5rem 0.5rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .wachapp-login-layout__form { padding: 1.5rem; } } @media (max-width: 767.98px) { .wachapp-login-page__inner { padding: 1rem 0; } .wachapp-login-layout { border-radius: 1.1rem; } .wachapp-login-layout__aside { padding: 1.25rem 1.25rem 0.25rem 1.25rem; } .wachapp-login-layout__form { padding: 1.25rem; } .wachapp-login-brand-title { font-size: 1.5rem; } .wachapp-login-card { max-width: 100%; } .wachapp-login-tabs .nav-link { font-size: 0.95rem; padding: 0.8rem 0.65rem; } } /* Horizontale Rail (mobil) */ .wt-rail { display: flex; gap: 1rem; overflow-x: auto; padding: 0.25rem 0.25rem 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .wt-rail-item { scroll-snap-align: start; flex: 0 0 auto; width: 280px; /* Kachelbreite mobil */ } /* Webkit-Scrollbar dezent (optional) */ .wt-rail::-webkit-scrollbar { height: 0.5rem } .wt-rail::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 1rem } /* ===== WachApp Progress Meters (scoped) ===== */ .wt-meters { --stripe-size: 18px; } .wt-meter-track { position: relative; height: 0.75rem; background: var(--bs-border-color-translucent); overflow: hidden; } .wt-meter-fill { position: absolute; inset: 0; width: calc(var(--value, 0) * 1%); min-width: 0%; max-width: 100%; overflow: hidden; contain: paint; /* Farbverlauf bleibt statisch; nur das leichte Stripe-Pseudo bewegt sich. */ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%), var(--_meter-base); background-size: 100% 100%; } .wt-meter-daily { --_meter-base: linear-gradient(90deg, rgba(255, 193, 7, 0.85) 0%, rgba(255, 193, 7, 1) 55%, rgba(255, 193, 7, 0.95) 100%); --_meter-stripe: rgba(255, 255, 255, 0.22); } .wt-meter-weekly { --_meter-base: linear-gradient(90deg, rgba(13, 110, 253, 0.90) 0%, rgba(13, 110, 253, 1) 55%, rgba(13, 110, 253, 0.95) 100%); --_meter-stripe: rgba(255, 255, 255, 0.18); } .wt-meter-fill::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--stripe-size) * -3); right: calc(var(--stripe-size) * -3); background: repeating-linear-gradient(45deg, var(--_meter-stripe) 0 var(--stripe-size), transparent var(--stripe-size) calc(var(--stripe-size) * 2)); transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; animation: wtStripe 2.2s linear infinite; pointer-events: none; } /* sanftere Kanten & Motion-Respects */ .wt-meter-track, .wt-meter-fill { border-radius: 1rem; } @media (prefers-reduced-motion: reduce) { .wt-meter-fill::after { animation: none; } .wt-meter-fill { transition: none; } } @keyframes wtStripe { to { transform: translate3d(calc(var(--stripe-size) * 2.828427), 0, 0); } } /* ===== Scroll-Rail ===== */ .wt-rail { display: flex; overflow-x: auto; gap: 1rem; padding-left: var(--bs-gutter-x); padding-right: var(--bs-gutter-x); padding-top: 1rem; padding-bottom: 1rem; scroll-snap-type: x mandatory; scroll-padding-left: var(--bs-gutter-x); -webkit-overflow-scrolling: touch; /* Scrollbar */ scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; } .wt-rail::-webkit-scrollbar { height: 0.5rem; } .wt-rail::-webkit-scrollbar-thumb { background-color: var(--bs-border-color); border-radius: 1rem; } /* ===== Rail-Items ===== */ .wt-rail-item { flex-shrink: 0; min-width: 270px; scroll-snap-align: start; } .wt-rail-item:first-child { margin-left: 0; } .wt-rail-item:last-child { margin-right: 0; } .wt-rail-item .card { height: 100%; border: 1px solid var(--bs-border-color-translucent); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); } .wt-rail-item .progress { height: 0.35rem; } .donut-sm { width: 52px; height: auto; } /* Optional: leicht weichere Übergänge beim Scrollen */ .wt-rail-item { scroll-margin-inline: 0.25rem; transition: transform 0.2s ease; } .wt-rail-item:active { transform: scale(0.98); } /* Gleiches Innenraster für alle KPI-Karten */ .wt-kpi-card .card-body { display: flex; flex-direction: column; } .wt-kpi-head { display: flex; align-items: center; gap: 0.375rem; } .wt-kpi-content { flex: 1 1 auto; } /* füllt die Mitte */ .wt-kpi-cta { margin-top: auto; } /* Button immer unten */ /* Mehrzeilige Truncate-Helfer (für saubere Höhen) */ .text-truncate-2, .text-truncate-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .text-truncate-2 { -webkit-line-clamp: 2; } .text-truncate-3 { -webkit-line-clamp: 3; } /* Chip-Style (falls noch nicht global vorhanden) */ .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); font-size: 0.8125rem; line-height: 1; } /* Einheitliches Rails-Layout */ .wt-rail { --wt-rail-minw: 270px; } .wt-rail .wt-rail-card { min-width: var(--wt-rail-minw); scroll-snap-align: start; } .wt-rail .card-body { display: flex; flex-direction: column; } /* Strukturblöcke */ .wt-rail-head { display: flex; align-items: center; gap: 0.375rem; } .wt-rail-content { flex: 1 1 auto; } /* füllt die Mitte */ .wt-rail-chips { /* bleibt direkt über CTA */ } .wt-rail-cta { margin-top: auto; } /* Button immer unten ausrichten */ /* Mehrzeilige Truncates für gleichmäßige Höhen */ .text-truncate-2, .text-truncate-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .text-truncate-2 { -webkit-line-clamp: 2; } .text-truncate-3 { -webkit-line-clamp: 3; } /* Optional: einheitlicher Chip-Look (falls noch nicht vorhanden) */ .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: 0.5rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); font-size: 0.8125rem; line-height: 1; } .wlb-sidebar-sticky { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; padding-right: 0.25rem; } .btn-indigo { --bs-btn-color: #ffffff; --bs-btn-bg: #6f42c1; --bs-btn-border-color: #6f42c1; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #643ab0; --bs-btn-hover-border-color: #5f37a6; --bs-btn-focus-shadow-rgb: 111, 66, 193; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #5f37a6; --bs-btn-active-border-color: #59339c; --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: #6f42c1; --bs-btn-disabled-border-color: #6f42c1; } .wlb-snap-nav { position: relative; z-index: 2; } .wlb-snap-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background-color: rgba(var(--bs-secondary-rgb), 0.35); transition: all 0.2s ease; flex: 0 0 auto; } .wlb-snap-dot.active { width: 24px; background-color: var(--bs-primary); } .wlb-snap-dot:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } @media (min-width: 768px) { .wlb-snap-nav { display: none !important; } } /** * ============================================================ * SHARE UND QR-CODE * ============================================================ * * Was macht dieser Block? * - Formatiert QR-Codes, geschützte Einladungslinks und QR-Modals. * - Achtet auf saubere Darstellung in hellen und dunklen Layouts. * ============================================================ */ .wachapp-invite-qr-svg svg { display: block; width: 140px; height: 140px; max-width: 100%; margin: 0 auto; background: #ffffff; border-radius: 1rem; padding: 0.75rem; } @media (max-width: 1199.98px) { .wachapp-invite-qr-svg svg { width: 120px; height: 120px; } } .wachapp-invite-protected { position: relative; overflow: hidden; } .wachapp-invite-protected.is-hidden .wachapp-invite-protected-content { filter: blur(8px); user-select: none; pointer-events: none; transition: filter 0.2s ease; padding: 1rem; } .wachapp-invite-protected:not(.is-hidden) .wachapp-invite-protected-content { filter: blur(0); transition: filter 0.2s ease; padding: 1rem; } .wachapp-invite-protected-toolbar { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; } .wachapp-invite-link-box { min-height: 96px; display: flex; align-items: flex-start; } .wachapp-invite-link-text { word-break: break-word; line-height: 1.55; padding-right: 3rem; } /* ================================ QR Modal ================================ */ #wachappInviteQrModal .modal-dialog, #wachappInviteQrModal .modal-content { width: 100%; max-width: none; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; margin: 0; } #wachappInviteQrModal .modal-content { overflow: hidden; } #wachappInviteQrModal .modal-header { flex: 0 0 auto; } #wachappInviteQrModal .modal-body { min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .wachapp-invite-qr-modal-wrap { min-height: calc(100dvh - 7rem); display: flex; align-items: center; justify-content: center; padding: 0.75rem 0; } .wachapp-invite-qr-modal-box { --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: #212529; --bs-body-color-rgb: 33, 37, 41; --bs-emphasis-color: #212529; --bs-emphasis-color-rgb: 33, 37, 41; --bs-secondary-color: #495057; --bs-secondary-color-rgb: 73, 80, 87; --bs-tertiary-color: #6c757d; --bs-tertiary-color-rgb: 108, 117, 125; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.08); width: 100%; max-width: min(96vw, 1180px); padding: clamp(0.8rem, 1.7vw, 1.25rem); color: #212529; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 1.5rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25); } .wachapp-invite-qr-modal-box h1, .wachapp-invite-qr-modal-box h2, .wachapp-invite-qr-modal-box h3, .wachapp-invite-qr-modal-box h4, .wachapp-invite-qr-modal-box h5, .wachapp-invite-qr-modal-box h6, .wachapp-invite-qr-modal-box strong, .wachapp-invite-qr-modal-box b { color: #212529 !important; opacity: 1 !important; } .wachapp-invite-modal-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.85fr); grid-template-areas: "qr guide" "qr security" "qr timer"; gap: 0.9rem; align-items: start; } .wachapp-invite-modal-guide, .wachapp-invite-modal-qr-panel, .wachapp-invite-modal-security-card, .wachapp-invite-modal-timer-card { color: #212529; border: 1px solid #dee2e6; border-radius: 1rem; background: #ffffff; } .wachapp-invite-modal-guide { grid-area: guide; padding: 1rem; } .wachapp-invite-modal-qr-panel { grid-area: qr; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: clamp(0.9rem, 1.6vw, 1.25rem); background: #f8f9fa; } .wachapp-invite-modal-security-card { grid-area: security; padding: 0.9rem; } .wachapp-invite-modal-timer-card { grid-area: timer; padding: 0.9rem; } .wachapp-invite-modal-kicker { color: #6c757d !important; letter-spacing: 0.04em; opacity: 1 !important; } .wachapp-invite-modal-guide-intro, .wachapp-invite-modal-qr-hint, .wachapp-invite-modal-security-hint, .wachapp-invite-modal-expires { color: #495057 !important; line-height: 1.45; opacity: 1 !important; } .wachapp-invite-modal-guide-intro, .wachapp-invite-modal-qr-hint { font-size: 0.92rem; } .wachapp-invite-modal-security-hint, .wachapp-invite-modal-expires { font-size: 0.86rem; } .wachapp-invite-modal-quicksteps { display: grid; grid-template-columns: 1fr; gap: 0.55rem; } .wachapp-invite-modal-quickstep { display: flex; align-items: center; gap: 0.65rem; color: #343a40; font-size: 0.9rem; line-height: 1.35; } .wachapp-invite-modal-step-number { flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: #0d6efd; font-size: 0.86rem; font-weight: 700; line-height: 1; } .wachapp-invite-modal-scanner-chip { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0.12rem; padding: 0.15rem 0.45rem; color: #ffffff !important; background: #0d6efd; border-radius: 0.45rem; white-space: nowrap; vertical-align: baseline; } .wachapp-invite-modal-scanner-chip i, .wachapp-invite-modal-scanner-chip strong { color: #ffffff !important; } .wachapp-invite-modal-security-code { min-height: 44px; color: #212529; background: #f8f9fa; border-color: #adb5bd !important; } .wachapp-invite-modal-security-code .font-monospace { color: #212529 !important; font-size: 1.05rem; letter-spacing: 0.08em; opacity: 1 !important; } .wachapp-invite-modal-timer-ring { position: relative; flex: 0 0 104px; width: 104px; height: 104px; } .wachapp-invite-modal-timer-svg { width: 104px; height: 104px; display: block; transform: rotate(-90deg); } .wachapp-invite-modal-timer-track { fill: none; stroke: #dee2e6; stroke-width: 8; } .wachapp-invite-modal-timer-progress { fill: none; stroke: #0d6efd; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 0.9s linear, stroke 0.2s ease; } .wachapp-invite-modal-timer-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem; text-align: center; } .wachapp-invite-modal-timer-countdown { color: #212529 !important; font-size: 1.08rem; font-weight: 700; line-height: 1; opacity: 1 !important; } .wachapp-invite-modal-timer-subline { margin-top: 0.3rem; color: #6c757d !important; font-size: 0.68rem; line-height: 1.15; opacity: 1 !important; } .wachapp-invite-modal-timer-ring.is-warning .wachapp-invite-modal-timer-progress { stroke: #fd7e14; } .wachapp-invite-modal-timer-ring.is-danger .wachapp-invite-modal-timer-progress, .wachapp-invite-modal-timer-ring.is-expired .wachapp-invite-modal-timer-progress { stroke: #dc3545; } .wachapp-invite-modal-timer-ring.is-expired .wachapp-invite-modal-timer-progress { stroke-dashoffset: 326.73; } .wachapp-invite-modal-qr-content { display: flex; align-items: center; justify-content: center; min-height: 0; } #wachappInviteQrModalContent svg { display: block; width: 100%; height: auto; max-width: 500px; margin: 0 auto; padding: 0.8rem; background: #ffffff; border: 1px solid #dee2e6; border-radius: 1rem; } @media (max-width: 991.98px) { .wachapp-invite-qr-modal-wrap { min-height: auto; align-items: flex-start; padding: 0; } .wachapp-invite-qr-modal-box { max-width: 100%; } .wachapp-invite-modal-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "guide" "qr" "security" "timer"; gap: 0.7rem; } .wachapp-invite-modal-guide, .wachapp-invite-modal-qr-panel, .wachapp-invite-modal-security-card, .wachapp-invite-modal-timer-card { padding: 0.85rem; } .wachapp-invite-modal-guide-intro { margin-bottom: 0.75rem !important; } .wachapp-invite-modal-quicksteps { grid-template-columns: repeat(3, minmax(0, 1fr)); } #wachappInviteQrModalContent svg { max-width: min(60vw, 330px); } } @media (max-width: 767.98px) { #wachappInviteQrModal.modal { padding: 0 !important; } #wachappInviteQrModal .modal-header { padding-top: calc(1rem + var(--safe-top-space)); padding-right: calc(1rem + var(--safe-right-space)); padding-left: calc(1rem + var(--safe-left-space)); } #wachappInviteQrModal .modal-body { padding: 0.75rem calc(0.75rem + var(--safe-right-space)) calc(0.75rem + var(--safe-bottom-space)) calc(0.75rem + var(--safe-left-space)); } #wachappInviteQrModal .modal-dialog { margin: 0 !important; } } @media (max-width: 575.98px) { #wachappInviteQrModal .modal-header { padding-bottom: 0.65rem; } #wachappInviteQrModalLabel { font-size: 1.2rem; } .wachapp-invite-qr-modal-box { padding: 0.6rem; border-radius: 1rem; } .wachapp-invite-modal-layout { gap: 0.55rem; } .wachapp-invite-modal-guide, .wachapp-invite-modal-qr-panel, .wachapp-invite-modal-security-card, .wachapp-invite-modal-timer-card { padding: 0.75rem; border-radius: 0.85rem; } .wachapp-invite-modal-guide h3, .wachapp-invite-modal-qr-panel h3 { font-size: 1.05rem; } .wachapp-invite-modal-guide-intro, .wachapp-invite-modal-qr-hint { font-size: 0.84rem; } .wachapp-invite-modal-quicksteps { grid-template-columns: 1fr; gap: 0.4rem; } .wachapp-invite-modal-quickstep { font-size: 0.82rem; } .wachapp-invite-modal-step-number { flex-basis: 1.55rem; width: 1.55rem; height: 1.55rem; font-size: 0.78rem; } .wachapp-invite-modal-scanner-chip { padding: 0.1rem 0.35rem; font-size: 0.78rem; } #wachappInviteQrModalContent svg { max-width: min(70vw, 240px); padding: 0.55rem; } .wachapp-invite-modal-security-hint { display: none; } .wachapp-invite-modal-security-card .wachapp-invite-modal-kicker { margin-bottom: 0.4rem !important; } .wachapp-invite-modal-security-code { min-height: 40px; } .wachapp-invite-modal-security-code .font-monospace { font-size: 0.95rem; } .wachapp-invite-modal-timer-card > .wachapp-invite-modal-kicker { margin-bottom: 0.4rem !important; } .wachapp-invite-modal-timer-ring { flex-basis: 82px; width: 82px; height: 82px; } .wachapp-invite-modal-timer-svg { width: 82px; height: 82px; } .wachapp-invite-modal-timer-countdown { font-size: 0.9rem; } .wachapp-invite-modal-timer-subline { font-size: 0.6rem; } .wachapp-invite-modal-expires { max-width: 150px; font-size: 0.78rem; } } .wachapp-insights-snap { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 767.98px) { .wachapp-insights-snap { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .wachapp-insights-snap::-webkit-scrollbar { display: none; } .wachapp-insight-item { flex: 0 0 88%; max-width: 88%; scroll-snap-align: start; scroll-snap-stop: always; } .wachapp-insight-item>.d-flex { height: 100%; } } @media (min-width: 768px) { .wachapp-insights-snap { display: grid !important; overflow: visible; } .wachapp-insight-item { min-width: 0; max-width: none; } } /** * ============================================================ * WACHTEST · PRACTICE MODE · CSS VARIABLEN * ============================================================ * * Was macht dieser Block? * - Definiert zentrale Variablen für die mobile Bottom-Toolbar. * - Trennt sauber zwischen: * --wt-nav-controls-h = nur Steuerungsbereich unten * --wt-nav-total-h = gesamte Toolbar inkl. Confidence-Bereich * * Hinweis: * - Diese Werte werden per JavaScript dynamisch gesetzt. * - Default ist 0px, damit das Layout auch ohne JS stabil bleibt. * ============================================================ */ :root { --wt-nav-controls-h: 0px; --wt-nav-total-h: 0px; --wt-practice-bottom-safe-min: 12px; --wt-practice-bottom-safe-space: max(var(--safe-bottom-space), var(--wt-practice-bottom-safe-min)); } /** * ============================================================ * WACHTEST · NATIVE ANDROID BOTTOM-SAFE-AREA * ============================================================ * * Was macht dieser Block? * - Vergrößert ausschließlich in der nativen App den Abstand * zwischen Practice-Toolbar und Android-Systemnavigation. * - Browser und PWA bleiben unverändert. * ============================================================ */ @media (max-width: 991.98px) { html.wachapp-native-app { --wt-practice-bottom-safe-min: 20px; } } /** * ============================================================ * WACHTEST · PRACTICE · STICKY FRAGEKOPF * ============================================================ * * Was macht dieser Block? * - Positioniert den sticky Fragekopf im Übungsmodus. * - Nutzt die global definierte Safe-Area aus :root. * - Verhindert, dass der Fragetext auf iOS / PWA zu nah an * Notch oder obere UI-Bereiche rutscht. * ============================================================ */ .wt-practice-question-sticky { position: sticky; top: 0; z-index: 1042; margin-right: -0.75rem; margin-left: -0.75rem; margin-bottom: 1rem; padding: calc(var(--safe-top-space) + 0.5rem) 0.75rem 0.75rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color-translucent); box-shadow: 0 0.65rem 1.15rem rgba(0, 0, 0, 0.10); } .wt-practice-question-sticky__box { background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 0; } /** * ============================================================ * WACHTEST · OPTION BUTTONS / REVIEW * ============================================================ * * Was macht dieser Block? * - Überschreibt die Bootstrap-Button-Variablen gezielt für die * Antwortoptionen im Übungsmodus. * - Verhindert, dass Border bei Hover, Focus oder Active optisch * verschwindet oder von .btn-Defaults überschrieben wird. * - Definiert konsistente Zustände für: * normal, hover, selected, correct und wrong. * ============================================================ */ .btn-check { position: static !important; clip: auto !important; clip-path: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } .option-btn { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--bs-body-bg); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.05); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.08); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-body-color); --bs-btn-disabled-bg: var(--bs-body-bg); --bs-btn-disabled-border-color: var(--bs-border-color); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-box-shadow: none; display: flex; align-items: center; gap: 0.75rem; border-radius: 1rem; padding: 0.75rem 1rem; min-height: 72px; text-align: left; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; box-shadow: none !important; } .option-btn:hover, .option-btn:focus, .option-btn:focus-visible { box-shadow: none !important; } .opt-letter { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(var(--bs-primary-rgb), 1); color: #fff; font-weight: 700; flex: 0 0 auto; } .opt-text { flex: 1 1 auto; text-align: left; } .opt-check { opacity: 0; font-size: 1.1rem; flex: 0 0 auto; } .wt-ans.is-selected .option-btn, .btn-check:checked+.option-btn { --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.08); --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.10); --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.12); } .wt-ans.is-correct .option-btn { --bs-btn-border-color: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success); --bs-btn-active-border-color: var(--bs-success); --bs-btn-bg: rgba(var(--bs-success-rgb), 0.10); --bs-btn-hover-bg: rgba(var(--bs-success-rgb), 0.12); --bs-btn-active-bg: rgba(var(--bs-success-rgb), 0.14); box-shadow: inset 6px 0 0 0 var(--bs-success) !important; } .wt-ans.is-wrong.is-selected .option-btn { --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger); --bs-btn-bg: rgba(var(--bs-danger-rgb), 0.08); --bs-btn-hover-bg: rgba(var(--bs-danger-rgb), 0.10); --bs-btn-active-bg: rgba(var(--bs-danger-rgb), 0.12); box-shadow: inset 6px 0 0 0 var(--bs-danger) !important; } .wt-ans.is-selected .option-btn .opt-check, .btn-check:checked+.option-btn .opt-check { opacity: 1; } .wt-ans.is-correct.is-selected .option-btn .opt-check, .wt-ans.is-correct .option-btn .opt-check { color: var(--bs-success); } .wt-ans.is-wrong.is-selected .option-btn .opt-check { color: var(--bs-danger); } /** * ============================================================ * WACHTEST · STICKY TOOLBAR / SAFE AREA / SCROLL OFFSETS * ============================================================ * * Was macht dieser Block? * - Reserviert Platz für die mobile Bottom-Toolbar. * - Nutzt für den normalen Seitenabstand nur die Controls-Höhe. * - Nutzt für spezielle Scroll-Ziele wie die Confidence-Box * die gesamte Toolbar-Höhe. * * Warum so? * - Der Antwortenbereich soll nicht brutal aufgebläht werden. * - Nur der wirklich überdeckende Teil der Toolbar soll berücksichtigt werden. * ============================================================ */ html { scroll-padding-bottom: calc(var(--wt-nav-controls-h) + var(--wt-practice-bottom-safe-space)); } body.has-sticky-toolbar { padding-bottom: calc(var(--wt-nav-controls-h) + var(--wt-practice-bottom-safe-space)); } #wtConfidenceBox { scroll-margin-bottom: calc(var(--wt-nav-total-h) + 1rem); } @media print { #wtNavBar { display: none !important; } } /** * ============================================================ * WACHTEST · KOMPAKTE SELBSTEINSCHÄTZUNG * ============================================================ * * Was macht dieser Block? * - Steuert Anzeige, Minimierung und Ausblendung der Confidence-Box. * - Sorgt für saubere Übergänge und kompakte mobile Darstellung. * ============================================================ */ #wtConfidenceWrap { transition: opacity 0.18s ease, transform 0.18s ease; } #wtConfidenceWrap.is-collapsing { opacity: 0; transform: translateY(4px); } #wtConfidenceBox { overflow: hidden; } #wtConfidenceActions { align-items: center; } #wtConfidenceActions .btn { min-height: 38px; } #wtConfidenceBox.is-minimized #wtConfidenceActions, #wtConfidenceBox.is-minimized #wtConfidenceCompactHint, #wtConfidenceBox.is-minimized #wtConfidenceSoftHint { display: none !important; } #wtConfidenceBox.is-minimized { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } #wtConfidenceSavedState { white-space: nowrap; } /** * ============================================================ * WACHTEST · MOBILE PRACTICE LAYOUT * ============================================================ * * Was macht dieser Block? * - Optimiert den Practice-Modus für Mobilgeräte. * - Entfernt störende Radien/Schatten im eigentlichen Testbereich. * - Fixiert die Bottom-Toolbar am unteren Rand. * - Berücksichtigt globale Safe-Area-Variablen. * ============================================================ */ @media (max-width: 991.98px) { body.wt-practice-fullscreen header.site-header, body.wt-practice-fullscreen footer.site-footer { display: none !important; } body.wt-practice-fullscreen { background-color: var(--bs-body-bg); } #wtPracticeApp.wt-practice-app { min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; padding-top: calc(var(--safe-top-space) + 0.5rem); padding-bottom: var(--safe-bottom-space); } #wtPracticeApp>.container { flex: 1 1 auto; padding-left: 0.75rem; padding-right: 0.75rem; } #wtModuleCard, #wtTestCard, #wtResultCard { border-radius: 0; box-shadow: none; margin-left: -.75rem; margin-right: -.75rem; } #wtTestCard .card-body { padding: 0.75rem; padding-bottom: 0.75rem !important; } #wtNavBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; overflow: visible; padding-top: 0.5rem !important; padding-bottom: var(--wt-practice-bottom-safe-space) !important; background: var(--bs-body-bg); } body.has-sticky-toolbar { padding-bottom: calc(var(--wt-nav-controls-h) + var(--wt-practice-bottom-safe-space)); } #wtNavBar .container { padding-left: 0.75rem; padding-right: 0.75rem; } #wtNavBar .row.g-2.align-items-center.justify-content-between>.col-auto { min-width: 0; width: 100%; align-items: center; } #wtNavBar .wt-practice-bottom-actions { gap: 0.5rem; min-width: 0; width: 100%; } #wtNavBar #wtBtnPrev, #wtNavBar #wtBtnNext, #wtNavBar #wtBtnSkip, #wtNavBar #wtMoreMenuBtn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; overflow: hidden; } #wtNavBar #wtBtnPrev, #wtNavBar #wtBtnSkip, #wtNavBar #wtMoreMenuBtn { width: 48px; min-width: 48px; max-width: 48px; padding-right: 0; padding-left: 0; flex: 0 0 48px; } #wtNavBar #wtMoreMenuBtn::after { display: none; } #wtNavBar #wtBtnNext { min-width: 0; flex: 1 1 auto; margin-right: 0 !important; margin-left: 0 !important; white-space: nowrap; } #wtNavBar #wtBtnNext span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wtConfidenceWrap { margin-top: 0.5rem !important; } #wtConfidenceBox { border-radius: 1rem !important; padding: 0.625rem 0.75rem !important; } #wtConfidenceActions { gap: 0.5rem !important; } #wtConfidenceActions .btn[data-cf] { flex: 1 1 calc(50% - 0.5rem); justify-content: center; } #wtConfidenceSkipBtn { padding-left: 0 !important; padding-right: 0 !important; } } /** * ============================================================ * Feedback Board Snap-Indikator * ============================================================ * * Was macht dieser Bereich? * - Erstellt einen kompakten Snap-Indikator für mobile Ansichten. * - Zeigt die aktuelle Position innerhalb der horizontalen Vorschlagskarten. * - Der aktive Blob bewegt sich weich zwischen den Snap-Punkten. * - Die Punkte bleiben neutral, damit der aktive Zustand nicht doppelt wirkt. */ .wachapp-feedback-snap-lava { --wachapp-feedback-snap-width: 92px; --wachapp-feedback-snap-height: 24px; --wachapp-feedback-snap-dot-size: 5px; --wachapp-feedback-snap-blob-width: 18px; --wachapp-feedback-snap-blob-height: 8px; --wachapp-feedback-snap-inner-x: 11px; width: var(--wachapp-feedback-snap-width); height: var(--wachapp-feedback-snap-height); padding-left: var(--wachapp-feedback-snap-inner-x); padding-right: var(--wachapp-feedback-snap-inner-x); } .wachapp-feedback-snap-lava-track { top: 50%; left: calc(var(--wachapp-feedback-snap-inner-x) + 2px); right: calc(var(--wachapp-feedback-snap-inner-x) + 2px); height: 2px; z-index: 1; transform: translateY(-50%); pointer-events: none; } .wachapp-feedback-snap-lava-dots { z-index: 2; height: 100%; pointer-events: none; } .wachapp-feedback-snap-lava-dot { width: var(--wachapp-feedback-snap-dot-size); height: var(--wachapp-feedback-snap-dot-size); border-radius: 999px; background-color: var(--bs-secondary); opacity: 0.28; flex: 0 0 auto; } .wachapp-feedback-snap-lava-active { top: 50%; left: 0; z-index: 3; width: var(--wachapp-feedback-snap-blob-width); height: var(--wachapp-feedback-snap-blob-height); border-radius: 999px; transform: translate3d(0, -50%, 0); transition: width 0.16s ease, height 0.16s ease, opacity 0.16s ease; will-change: transform, width; pointer-events: none; } .wachapp-feedback-snap-lava.is-moving .wachapp-feedback-snap-lava-active { width: 24px; height: 9px; opacity: 0.92; } @media (max-width: 379.98px) { .wachapp-feedback-snap-lava { --wachapp-feedback-snap-width: 82px; --wachapp-feedback-snap-inner-x: 10px; } .wachapp-feedback-snap-lava-active { --wachapp-feedback-snap-blob-width: 17px; } .wachapp-feedback-snap-lava.is-moving .wachapp-feedback-snap-lava-active { width: 22px; } } @media (min-width: 1200px) { .wachapp-feedback-snap-lava { display: none !important; } } /** * ============================================================ * WACHTEST · PRACTICE TOOLBAR · DESKTOP EINBETTUNG * ============================================================ * * Was macht dieser Block? * - Entfernt auf Desktop die vollbreite Bottom-Leiste als Hintergrundfläche. * - Bettet die Aktionsleiste optisch in die normale Inhaltsbreite ein. * - Verhindert zusätzlichen Seiten-Freiraum durch den mobilen Sticky-Abstand. * * Wichtig: * - Mobile bleibt unverändert fixed bottom inkl. Safe-Area. * ============================================================ */ @media (min-width: 992px) { body.has-sticky-toolbar { padding-bottom: 0 !important; } #wtNavBar { position: static !important; background: transparent !important; border-top: 0 !important; box-shadow: none !important; padding-top: 0.75rem !important; padding-bottom: 0 !important; } #wtNavBar .container { padding-left: var(--bs-gutter-x, 0.75rem); padding-right: var(--bs-gutter-x, 0.75rem); } #wtNavBar .row.g-2.align-items-center.justify-content-between { justify-content: center !important; } #wtNavBar .row.g-2.align-items-center.justify-content-between>.col-auto { flex: 0 1 100%; width: 100%; min-width: 0; } #wtNavBar .wt-practice-bottom-actions { width: 100%; min-width: 0; gap: 0.5rem; padding: 0.5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 0.85rem; box-shadow: var(--bs-box-shadow-sm); } #wtNavBar #wtBtnPrev, #wtNavBar #wtBtnNext, #wtNavBar #wtBtnSkip, #wtNavBar #wtMoreMenuBtn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; } #wtNavBar #wtBtnNext { flex: 1 1 auto; min-width: 220px; } } /** * ============================================================ * WACHTEST · PRACTICE · DESKTOP-HÖHE KORRIGIEREN * ============================================================ * * Was macht dieser Block? * - Verhindert auf Desktop, dass der Practice-Wrapper künstlich * auf volle Viewport-Höhe gezogen wird. * - Dadurch entsteht nach der Aktionsleiste kein großer leerer * Bereich mehr bis zum Footer. * - Mobile bleibt unverändert, weil dort der Vollbildmodus mit * fixed Bottom-Bar benötigt wird. * ============================================================ */ @media (min-width: 992px) { #wtPracticeApp.wt-practice-app { min-height: auto !important; } } /** * ============================================================ * IOS 26 · FINALE VIEWPORT- UND SAFE-AREA-HÄRTUNG * ============================================================ * * Was macht dieser Block? * - Bündelt letzte Overrides für bekannte iOS-26-Probleme mit * dvh, fixed Bottom-Bars, Overlays und scrollbaren Vollbildbereichen. * - Steht bewusst am Ende, damit ältere Einzelregeln nicht dagegen gewinnen. * ============================================================ */ @supports (height: 100dvh) { .wachapp-login-page, .wachapp-login-page__inner, #wtPracticeApp.wt-practice-app, #wachappIntroOverlay, .wachapp-confetti-overlay { min-height: 100dvh; } } @media (max-width: 767.98px) { html { scroll-padding-top: calc(var(--safe-top-space) + 0.75rem); scroll-padding-bottom: calc(var(--safe-bottom-space) + var(--wtq-nav-h, 0px)); } .sticky-top { scroll-margin-top: var(--safe-top-space); } .toast-container.position-fixed.top-0, .toast-container.top-0 { padding-top: var(--safe-top-space) !important; } .toast-container.position-fixed.bottom-0, .toast-container.bottom-0 { padding-bottom: var(--safe-bottom-space) !important; } } .wachapp-feedback-review-text { white-space: normal; overflow-wrap: anywhere; word-break: normal; } .wachapp-feedback-review-text.is-collapsed { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; position: relative; } .wachapp-feedback-review-text.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem; background: linear-gradient(to bottom, rgba(var(--bs-body-bg-rgb), 0), rgba(var(--bs-body-bg-rgb), 1)); pointer-events: none; } .wachapp-feedback-review-text.is-expanded { display: block; overflow: visible; } .wachapp-feedback-review-text.is-expanded::after { display: none; } /** * ============================================================ * WACHTEST · ÜBUNGSFEEDBACK / HAPTIK-VISUALS * ============================================================ * * Was macht dieser Block? * - Modernisiert die Meta-Anzeige im Übungsmodus. * - Erzeugt ein kurzes Bildschirmrand-Feedback nach der Antwortprüfung. * - Hebt das Inline-Feedback deutlicher hervor, ohne Inhalt zu überdecken. * ============================================================ */ .wt-practice-question-meta { max-width: 100%; } .wt-practice-meta-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.1rem; padding: 0.35rem 0.7rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 999px; background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-body-bg-rgb), 0.96)); color: var(--bs-body-color); box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.04); font-size: 0.85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .wt-practice-meta-pill .bi { color: var(--bs-primary); font-size: 0.95rem; } .wt-practice-fav-btn { --bs-btn-padding-x: 0.72rem; --bs-btn-padding-y: 0.35rem; min-width: 2.25rem; min-height: 2.1rem; box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.04); } .wt-practice-fav-btn .bi-star-fill { color: currentColor; } .wt-practice-feedback { position: relative; overflow: hidden; border-width: 1px !important; box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.07); } .wt-practice-feedback::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.42rem; border-radius: 999px; background: var(--bs-secondary); } .wt-practice-feedback::after { content: ""; position: absolute; inset: -35% -15% auto auto; width: 7rem; height: 7rem; border-radius: 999px; opacity: 0.12; background: var(--bs-secondary); pointer-events: none; } .wt-practice-feedback.is-success::before, .wt-practice-feedback.is-success::after { background: var(--bs-success); } .wt-practice-feedback.is-danger::before, .wt-practice-feedback.is-danger::after { background: var(--bs-danger); } .wt-practice-feedback #wtFbIcon { font-size: 1.15rem; } body.wt-practice-flash-success::before, body.wt-practice-flash-danger::before { content: ""; position: fixed; inset: max(6px, var(--safe-top-space)) max(6px, var(--safe-right-space)) max(6px, var(--safe-bottom-space)) max(6px, var(--safe-left-space)); z-index: 2147483000; pointer-events: none; border: 3px solid transparent; border-radius: 1.35rem; opacity: 0; animation: wtPracticeViewportFlash 0.9s ease-out both; } body.wt-practice-flash-success::before { border-color: rgba(var(--bs-success-rgb), 0.95); box-shadow: 0 0 0 0.35rem rgba(var(--bs-success-rgb), 0.13), inset 0 0 2.35rem rgba(var(--bs-success-rgb), 0.2), 0 0 2.25rem rgba(var(--bs-success-rgb), 0.45); } body.wt-practice-flash-danger::before { border-color: rgba(var(--bs-danger-rgb), 0.95); box-shadow: 0 0 0 0.35rem rgba(var(--bs-danger-rgb), 0.13), inset 0 0 2.35rem rgba(var(--bs-danger-rgb), 0.2), 0 0 2.25rem rgba(var(--bs-danger-rgb), 0.45); } @keyframes wtPracticeViewportFlash { 0% { opacity: 0; transform: scale(0.985); } 18% { opacity: 1; transform: scale(1); } 72% { opacity: 0.72; } 100% { opacity: 0; transform: scale(1.012); } } @media (prefers-reduced-motion: reduce) { body.wt-practice-flash-success::before, body.wt-practice-flash-danger::before { animation-duration: 0.45s; } } /** * ============================================================ * KNOWLISTIC · iOS STATUSBAR EDGE-TO-EDGE POLISH * ============================================================ * * Was macht dieser Block? * - Wird ausschließlich in der nativen iOS-App aktiv. * - Der native StatusBar-Plugin-Code legt die WebView unter die transparente * iOS-Statusleiste und setzt dafür die Klasse * .wachapp-native-ios-statusbar-overlay am -Element. * - Der Hauptheader erhält exakt die obere Safe-Area als zusätzlichen * Innenabstand. Sein eigener Hintergrund reicht dadurch bis hinter * Uhrzeit, Dynamic Island, WLAN und Akku. * - Es entsteht keine zweite, separat gefärbte Statusbar-Fläche. * - Browser, PWA und Android bleiben von diesem CSS unberührt. * ============================================================ */ html.wachapp-native-ios-statusbar-overlay .wachapp-app-header { padding-top: var(--safe-top-space); } /* * Der Header selbst trägt den Hintergrund bis an die physische Oberkante. * Die Container-Inhalte beginnen weiterhin erst unterhalb der Safe-Area. */ html.wachapp-native-ios-statusbar-overlay .wachapp-app-header > .container, html.wachapp-native-ios-statusbar-overlay .wachapp-app-header > .container-fluid { position: relative; z-index: 1; }