/* ===================================================================== Wehen-Tracker - Gestaltung Leitgedanken: - Hochformat auf dem Smartphone ist der Normalfall, nicht die Ausnahme. - Der wichtigste Knopf liegt unten, im Daumenbereich, ueber die volle Breite. - Nachts wird geboren: dunkle Darstellung ohne grelles Weiss. - Keine Animation, die vom Zaehlen ablenkt. ===================================================================== */ /* ------------------------------- Farben ---------------------------- */ :root { color-scheme: light dark; --bg: #f4f1f6; --surface: #ffffff; --surface-2: #efebf2; --line: #e0d9e6; --text: #1d1823; --text-muted: #6d6578; --go: #17724f; --go-hi: #1c8a60; --stop: #a5271c; --stop-hi: #c02f22; --on-solid: #ffffff; --accent: #7d3f78; --ok: #17724f; --warn: #9a5b00; --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgb(29 24 35 / 8%), 0 8px 24px rgb(29 24 35 / 6%); --gap: 12px; --pad: 16px; /* Groessen, die sich an die Bildschirmhoehe anpassen (siehe "Dichtestufen" am Ende der Datei). Alles ausserhalb des Verlaufs schrumpft zuerst. */ --action-h: 104px; --action-font: 2.9rem; --strength-h: 44px; --tile-value: 1.45rem; --tile-pad: 10px 8px; --row-min: 52px; --appbar-top: 10px; --head-h: 28px; /* Sichere Bereiche (Notch, Home-Indikator) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* Systemeinstellung ... */ @media (prefers-color-scheme: dark) { :root:not(.light) { --bg: #14111a; --surface: #1e1a26; --surface-2: #272130; --line: #322b3c; --text: #f1ecf5; --text-muted: #a79fb2; --go: #1e8a60; --go-hi: #25a473; --stop: #c3372a; --stop-hi: #d94636; --accent: #cf94c9; --ok: #4cc79a; --warn: #e0a33c; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px rgb(0 0 0 / 35%); } } /* ... oder feste Vorgabe über bzw. class="light". */ :root.dark { --bg: #14111a; --surface: #1e1a26; --surface-2: #272130; --line: #322b3c; --text: #f1ecf5; --text-muted: #a79fb2; --go: #1e8a60; --go-hi: #25a473; --stop: #c3372a; --stop-hi: #d94636; --accent: #cf94c9; --ok: #4cc79a; --warn: #e0a33c; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px rgb(0 0 0 / 35%); } /* ------------------------------ Grundlagen -------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; /* Kein Ueberziehen/Neuladen durch Wischen - waehrend einer Wehe fatal. */ overscroll-behavior: none; } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.4; -webkit-text-size-adjust: 100%; overflow: hidden; } button, input, select { font: inherit; color: inherit; } /* Das hidden-Attribut muss staerker sein als jede display-Regel weiter unten - sonst zeigt sich ein ausgeblendetes Element trotzdem. */ [hidden] { display: none !important; } button { cursor: pointer; /* Verhindert die 300-ms-Verzoegerung und das Zoomen bei Doppeltipp. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .tnum, .action__time, .tile__value, .row__duration, .row__time strong { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ------------------------------- Raster ----------------------------- */ .app { display: grid; /* Kopfzeile - Scrollbereich - Bedienzone. Nur die Mitte gibt nach, damit der Knopf immer an derselben Stelle bleibt. */ grid-template-rows: auto minmax(0, 1fr) auto; /* Höhe in drei Stufen, jede genauer als die vorige: 1. 100vh - überall verstanden, auf Smartphones aber zu hoch (rechnet ohne die eingeblendeten Browserleisten); 2. 100svh - kleinste sichtbare Höhe, ab Chrome 108 / Safari 15.4; 3. --app-h - von platform/viewport.js gemessen, gilt auch für Tastatur und ältere Browser. */ height: 100vh; height: 100svh; height: var(--app-h, 100svh); max-width: 560px; margin: 0 auto; padding-left: var(--safe-left); padding-right: var(--safe-right); } /* Notfall: passen Kopfzeile und Bedienzone zusammen nicht mehr in die sichtbare Höhe, wird die Seite scrollbar - der Knopf bleibt erreichbar. */ .app-overflow body { overflow: auto; } .app-overflow .app { height: auto; min-height: var(--app-h, 100svh); /* Im Notfall immer einspaltig stapeln - sonst dehnt sich die Bedienzone im Querformat-Raster über die ganze Spalte. */ grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: none; } .app-overflow .appbar, .app-overflow .scroll, .app-overflow .dock { grid-area: auto; } /* Gescrollt wird dann die Seite, nicht mehr der innere Bereich. */ .app-overflow .scroll { overflow: visible; } .app-overflow .dock { display: block; } /* Über das Menü abschaltbar: schafft auf kleinen Displays rund 130 px zusätzlichen Platz für das Protokoll. */ .app.no-summary .summary { display: none; } /* Kennzahlen und Verlauf scrollen gemeinsam: auf niedrigen Displays lassen sich die Kennzahlen nach oben wegschieben, statt den Verlauf zu ersticken. */ .scroll { min-height: 0; padding: 0 var(--pad) 4px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ------------------------------ Kopfzeile --------------------------- */ .appbar { display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-top) + var(--appbar-top)) var(--pad) 6px; } .appbar__title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em; } .appbar__chips { display: flex; gap: 6px; margin-left: auto; } .chip { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; } .chip--warn { /* Rueckfall fuer Browser ohne color-mix (iOS < 16.2) */ background: var(--surface-2); background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); } .iconbtn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; } .iconbtn svg { width: 22px; height: 22px; fill: currentcolor; } .iconbtn:active { background: var(--surface-2); } /* Strichzeichnungen (Burger, Kreuz, Vollbild) statt Flächen-Icons */ .iconbtn .icon-stroke { fill: none; stroke: currentcolor; } /* Runde Knöpfe der Menü-Titelzeile */ .iconbtn--round { flex: none; width: 42px; height: 42px; margin: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); } .iconbtn--round:active { filter: brightness(0.93); } .iconbtn__emoji { font-size: 1.15rem; line-height: 1; } /* ----------------------------- Seitenmenü --------------------------- */ /* Panel und Überzug bleiben im Dokument und werden nur verschoben - so läuft die Bewegung auch beim ersten Öffnen ohne Sprung. */ .menu-overlay { position: fixed; inset: 0; z-index: 60; background: rgb(10 7 14 / 55%); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0s linear 0.28s; } .menu-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.28s ease, visibility 0s; } .sidemenu { position: fixed; top: 0; right: 0; z-index: 70; display: flex; flex-direction: column; width: min(340px, 88vw); height: 100vh; height: 100svh; height: var(--app-h, 100svh); padding-top: var(--safe-top); padding-right: var(--safe-right); border-left: 1px solid var(--line); background: var(--surface); box-shadow: -10px 0 40px rgb(0 0 0 / 35%); transform: translateX(100%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s linear 0.32s; } .sidemenu.is-open { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0s; } .sidemenu__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; min-height: 56px; padding: 10px var(--pad); border-bottom: 1px solid var(--line); background: var(--surface-2); } .sidemenu__title { margin: 0; font-size: 1.1rem; font-weight: 650; } .sidemenu__actions { display: flex; gap: 6px; } .sidemenu__body { flex: 1; min-height: 0; padding: 0 var(--pad) calc(var(--safe-bottom) + 24px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Im Menü sitzt die erste Überschrift direkt unter der Titelzeile. */ .sidemenu__body .section:first-child { margin-top: 14px; } body.menu-open { overflow: hidden; } /* ---------------------------- Kennzahlen ---------------------------- */ .summary { padding: 0; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .tile { display: flex; flex-direction: column; gap: 2px; padding: var(--tile-pad); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); text-align: center; } .tile__label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; } .tile__value { font-size: var(--tile-value); font-weight: 650; line-height: 1.15; } .tile__sub { color: var(--text-muted); font-size: 0.68rem; /* Zwei Zeilen zulassen, aber nicht mehr - die Kacheln bleiben gleich hoch. */ min-height: 1.9em; } .tile__sub.is-alert { color: var(--warn); font-weight: 600; } /* --------------------------- Muster-Check --------------------------- */ .pattern { margin-top: var(--gap); padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .pattern__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pattern__rule { font-size: 0.8rem; font-weight: 600; } .pattern__state { color: var(--text-muted); font-size: 0.75rem; } .pattern.is-met { border-color: var(--ok); background: var(--surface); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); } .pattern.is-met .pattern__state { color: var(--ok); font-weight: 700; } .pattern__bar { height: 6px; margin: 8px 0 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .pattern__fill { width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.4s ease; } .pattern.is-met .pattern__fill { background: var(--ok); } .pattern__detail { margin: 0; color: var(--text-muted); font-size: 0.72rem; } .pattern__call { display: block; margin-top: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-weight: 650; text-align: center; text-decoration: none; } .pattern__call.is-urgent { background: var(--stop); color: var(--on-solid); } /* ------------------------------ Verlauf ----------------------------- */ .history { display: block; padding: 0; } .history__head { /* Bleibt beim Scrollen oben stehen, damit die Liste zuzuordnen bleibt. */ position: sticky; top: 0; z-index: 3; display: flex; align-items: baseline; justify-content: space-between; min-height: var(--head-h); padding: var(--gap) 0 6px; background: var(--bg); } .history__title { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .history__count { color: var(--text-muted); font-size: 0.72rem; } .history__list { margin: 0; padding: 0 0 8px; list-style: none; } .empty { margin: 8px 0; padding: 18px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.9rem; text-align: center; } .history__day { position: sticky; top: var(--head-h); z-index: 1; padding: 6px 2px 4px; background: linear-gradient(var(--bg) 70%, transparent); color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } .history__row { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: 10px; min-height: var(--row-min); margin-bottom: 6px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); } .history__row:active { background: var(--surface-2); } .history__row.is-running { border: 1px solid var(--stop); background: var(--surface); background: color-mix(in srgb, var(--stop) 8%, var(--surface)); } .row__time { display: flex; flex-direction: column; } .row__time strong { font-size: 1rem; font-weight: 600; } .row__time small, .row__interval { color: var(--text-muted); font-size: 0.7rem; } .row__main { display: flex; flex-direction: column; } .row__duration { font-size: 1rem; font-weight: 600; } .row__strength { display: flex; gap: 3px; } .row__pip { width: 7px; height: 18px; border-radius: 3px; background: var(--surface-2); } .row__pip.is-on { background: var(--accent); } .row__strength.is-unset .row__pip { border: 1px dashed var(--line); background: transparent; } /* ---------------------------- Bedienzone ---------------------------- */ .dock { padding: 8px var(--pad) calc(var(--safe-bottom) + 10px); background: linear-gradient(transparent, var(--bg) 22%); } .strength { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .strength__label { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } .strength__scale { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; flex: 1; } .strength__step { height: var(--strength-h); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); font-size: 0.95rem; font-weight: 600; } .strength__step.is-active { border-color: transparent; background: var(--accent); color: var(--on-solid); } /* Zeitfenster abgelaufen: die Skala ist weg, ihr Platz bleibt aber noch einen Moment leer und tot (siehe STRENGTH.releaseDelayMs). Danach setzt das hidden-Attribut sie ganz aus und der Verlauf bekommt die Hoehe. */ .strength.is-frozen { visibility: hidden; pointer-events: none; } .action { display: grid; place-content: center; gap: 2px; width: 100%; min-height: var(--action-h); padding: 10px 12px; border: 0; border-radius: var(--radius); background: var(--go); color: var(--on-solid); text-align: center; box-shadow: var(--shadow); transition: background-color 0.15s ease, transform 0.08s ease; } .action:active { background: var(--go-hi); transform: scale(0.985); } .action__time { font-size: var(--action-font); font-weight: 700; line-height: 1.05; } .action__label { font-size: 1.05rem; font-weight: 650; letter-spacing: 0.01em; } .action--running { background: var(--stop); } .action--running:active { background: var(--stop-hi); } .action--running .action__label { font-size: 0.95rem; opacity: 0.92; } .action--warn { background: var(--warn); } .action.is-busy { opacity: 0.85; } .dock__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding-top: 6px; } .dock__hint { color: var(--text-muted); font-size: 0.78rem; } .linkbtn { padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 0.78rem; text-decoration: underline; } /* ------------------------------ Meldungen --------------------------- */ /* Die Meldung legt sich ueber den Verlauf, nie ueber die Bedienzone: deren Hoehe wechselt mit der Staerke-Skala und wird gemessen (--dock-space, siehe platform/viewport.js). Der Ersatzwert gilt nur, bis die erste Messung da ist, und entspricht der Bedienzone ohne Skala. */ .toasts { position: fixed; left: 50%; bottom: calc(var(--dock-space, calc(var(--safe-bottom) + 132px)) + 10px); z-index: 50; width: min(92vw, 420px); transform: translateX(-50%); pointer-events: none; } .toasts.is-visible { pointer-events: auto; } .toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: #262030; color: #f6f2f9; font-size: 0.88rem; box-shadow: 0 8px 28px rgb(0 0 0 / 35%); animation: toast-in 0.18s ease-out; } .toast--warn { background: var(--warn); color: #ffffff; } .toast__text { flex: 1; } .toast__action { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 16%); color: inherit; font-weight: 650; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* -------------------------------- Sheet ----------------------------- */ .sheet { width: 100%; max-width: 560px; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface); color: var(--text); box-shadow: 0 -8px 40px rgb(0 0 0 / 30%); } .sheet::backdrop { background: rgb(10 7 14 / 55%); } .sheet[open] { animation: sheet-in 0.2s ease-out; } @keyframes sheet-in { from { transform: translateY(24px); opacity: 0.4; } } .sheet__inner { max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--pad) calc(var(--safe-bottom) + 20px); } .sheet__handle { width: 38px; height: 4px; margin: 4px auto 10px; border-radius: 999px; background: var(--line); } .sheet__title { margin: 0 0 4px; font-size: 1.1rem; } .sheet__meta { margin: 0 0 12px; color: var(--text-muted); font-size: 0.85rem; } .section { margin-top: 18px; } .section__title { margin: 0 0 8px; color: var(--text-muted); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; } .section__body { display: flex; flex-direction: column; gap: 8px; } .stack { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--surface-2); } .note { margin: 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; } .listrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); text-align: left; } .listrow:active { filter: brightness(0.96); } .listrow__icon { flex: none; width: 26px; font-size: 1.05rem; text-align: center; } .listrow__text { display: flex; flex-direction: column; flex: 1; gap: 2px; } .listrow__label { font-weight: 600; } .listrow__sub { color: var(--text-muted); font-size: 0.76rem; } .listrow--danger .listrow__label { color: var(--stop-hi); } .listrow--switch.is-disabled { opacity: 0.5; } /* Schalter */ .switch { position: relative; flex: none; width: 52px; height: 32px; } .switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; } .switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background-color 0.15s ease; } .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 30%); transition: transform 0.15s ease; } .switch__input:checked + .switch__track { background: var(--ok); } .switch__input:checked + .switch__track::after { transform: translateX(20px); } .switch__input:focus-visible + .switch__track { outline: 3px solid var(--accent); outline-offset: 2px; } /* Segmentierte Auswahl */ .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; } .segmented__item { min-height: 46px; padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 0.82rem; font-weight: 600; } .segmented__item.is-active { border-color: transparent; background: var(--accent); color: var(--on-solid); } /* Eingabefeld */ .field { display: flex; flex-direction: column; gap: 4px; } .field__label { color: var(--text-muted); font-size: 0.76rem; } .field__input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); /* 16px verhindert das automatische Hineinzoomen in iOS-Safari. */ font-size: 16px; } /* Staerke-Auswahl im Sheet */ .chooser { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .chooser__item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 74px; padding: 8px 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); } .chooser__item strong { font-size: 1.2rem; } .chooser__item small { color: var(--text-muted); font-size: 0.6rem; line-height: 1.15; text-align: center; } .chooser__item.is-active { border-color: transparent; background: var(--accent); color: var(--on-solid); } .chooser__item.is-active small { color: inherit; opacity: 0.85; } /* Bestaetigung */ .confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .btn { min-height: 52px; padding: 12px; border: 0; border-radius: var(--radius-sm); font-weight: 650; } .btn--ghost { border: 1px solid var(--line); background: transparent; } .btn--danger { background: var(--stop); color: var(--on-solid); } /* --------------------------- Dichtestufen ---------------------------- */ /* Je niedriger das Display, desto kompakter alles ausserhalb des Verlaufs. Ziel: auch auf kleinen Geraeten bleiben mehrere Protokollzeilen sichtbar. Was hier nicht ausreicht, faengt der gemeinsame Scrollbereich auf. */ /* Uebliche Smartphones (z. B. 375x667, 360x640 abzueglich Browserleisten) */ @media (max-height: 780px) { :root { --action-h: 92px; --action-font: 2.5rem; --tile-value: 1.3rem; --row-min: 48px; --gap: 10px; } } @media (max-height: 680px) { :root { --action-h: 80px; --action-font: 2.2rem; --strength-h: 42px; --tile-value: 1.2rem; --tile-pad: 8px 6px; --row-min: 46px; --pad: 14px; --gap: 8px; --appbar-top: 6px; } .tile__sub { min-height: 0; } .pattern { padding: 8px 10px 10px; } .empty { padding: 12px; } /* Jede eingesparte Zeilenhöhe ist eine zusätzliche Protokollzeile. */ .appbar { padding-bottom: 2px; } .iconbtn { width: 40px; height: 40px; } .tile { line-height: 1.25; } .tile__value { line-height: 1.1; } .pattern { padding: 6px 10px 8px; } .pattern__bar { margin: 6px 0 4px; } .history__row { padding: 6px 10px; line-height: 1.25; } .row__time strong, .row__duration { font-size: 0.95rem; } .strength { margin-bottom: 6px; } .dock__foot { min-height: 22px; padding-top: 4px; } .dock__hint { font-size: 0.74rem; } } /* Kleine Geraete und niedrige Browserfenster */ @media (max-height: 600px) { :root { --action-h: 70px; --action-font: 2rem; --strength-h: 40px; --tile-value: 1.1rem; --row-min: 44px; --pad: 12px; --head-h: 24px; } .appbar__title { font-size: 0.95rem; } /* Zweitrangiges weicht dem Protokoll. */ .tile__sub, .pattern__detail { display: none; } .tile__label { font-size: 0.64rem; } .action__label { font-size: 0.95rem; } .strength__label { font-size: 0.66rem; } } /* Sehr schmale Geraete (320 px) */ @media (max-width: 340px) { /* "Letzte Stunde" soll einzeilig bleiben, sonst wachsen alle Kacheln mit. */ .tile__label { font-size: 0.6rem; letter-spacing: 0; } .history__row { grid-template-columns: 3.6rem 1fr auto; gap: 8px; padding: 8px 10px; } .row__pip { width: 6px; } .strength__label { display: none; } } /* Querformat: Bedienzone neben den Inhalt, damit der Knopf gross bleibt */ @media (orientation: landscape) and (max-height: 520px) { .app { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar bar" "list dock"; max-width: none; } .appbar { grid-area: bar; } .scroll { grid-area: list; } .dock { grid-area: dock; display: flex; flex-direction: column; justify-content: center; } /* Die Bedienzone steht hier daneben statt darunter: die Meldung rueckt ueber den Verlauf, sonst deckt sie die Skala von der Seite zu. Der untere Rand ist der der App, nicht der des Layout-Viewports - sonst rutscht die Meldung hinter eine eingeblendete Browserleiste. */ .toasts { left: 25%; bottom: calc(var(--app-gap, 0px) + var(--safe-bottom) + 12px); width: min(46vw, 420px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Hoher Kontrast / erzwungene Farben */ @media (forced-colors: active) { .action, .strength__step, .listrow, .segmented__item { border: 1px solid buttonborder; } }