/* ============================================================ Kladde - Design-Tokens Umsetzung des Design-Systems "Modern Structured Keep". Der Theme-Wechsel laeuft ausschliesslich ueber data-theme am -Element, nie ueber prefers-color-scheme; die Auswahl wird lokal gespeichert. ============================================================ */ :root { /* Radien */ --r-sm: 8px; --r: 16px; --r-md: 24px; --r-full: 9999px; /* Abstaende (8pt-Raster mit 4pt-Unterteilung) */ --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 20px; --s-xl: 28px; --margin: 16px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Die Navigationsleiste waechst mit der Schrift mit: 32px sind Icon und Abstaende, der Rest ist die Beschriftung. Bei 1rem = 16px sind das wieder genau die 62px von vorher. */ --nav-h: calc(32px + 1.875rem); } /* Alle Schriftgroessen sind in rem angegeben und haengen damit an dieser einen Zahl. Die App setzt sie beim Start auf die Schriftgroesse, die in den Android-Einstellungen gewaehlt ist (siehe applyFontScale in app.js); im Browser bleibt es bei 16px. */ html { font-size: 16px; } /* ---------- Dark Mode ---------- */ html[data-theme='dark'] { --bg: #020202; /* Onyx - Grundflaeche */ --surf-lowest: #0F0D17; --surf-low: #1C1A25; --surf: #23212C; /* Cosmic - Kartenflaeche */ --surf-high: #2B2834; --surf-highest: #36333F; --primary: #D1BCFE; /* helles Violet fuer Text und Icons */ --primary-container: #36255C; /* Violet - gefuellte Flaechen, FAB */ --on-primary-container: #FFFFFF; --secondary: #E2BADC; /* Orchid */ --tertiary: #DBE8B4; /* Vanilla */ --text: #E6E0EF; --text-dim: #CBC4D0; --text-faint: #948F9A; --outline: rgba(255, 255, 255, 0.08); --outline-strong: rgba(255, 255, 255, 0.16); --ripple: rgba(255, 255, 255, 0.07); --shadow: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.35); --fab-glow: 0 8px 24px rgba(54, 37, 92, 0.55); --scrim: rgba(0, 0, 0, 0.62); --danger: #FFB4AB; color-scheme: dark; } /* ---------- Light Mode ---------- */ html[data-theme='light'] { --bg: #FAFAF8; /* warmes Porzellan */ --surf-lowest: #FFFFFF; --surf-low: #FFFFFF; --surf: #FFFFFF; --surf-high: #F2EFF5; /* sehr helles Orchid-Grau */ --surf-highest: #EAE5EE; --primary: #36255C; /* Violet */ --primary-container: #36255C; --on-primary-container: #FFFFFF; --secondary: #E5BDDF; /* Orchid als weicher Akzent */ --tertiary: #F1FEC8; /* Vanilla */ --text: #0F0F11; --text-dim: #4A4753; --text-faint: #6B7280; --outline: rgba(15, 15, 17, 0.08); --outline-strong: rgba(15, 15, 17, 0.18); --ripple: rgba(54, 37, 92, 0.07); --shadow: 0 12px 28px rgba(26, 24, 32, 0.16); --shadow-sm: 0 1px 8px rgba(15, 15, 17, 0.08); --fab-glow: 0 8px 24px rgba(54, 37, 92, 0.35); --scrim: rgba(26, 24, 32, 0.42); --danger: #B3261E; color-scheme: light; } /* ---------- Notizfarben (themeunabhaengig) ---------- Dunkle Karten bekommen hellen Text, helle Karten dunklen Text. */ .c-default { --card-bg: var(--surf); --card-fg: var(--text); --card-dim: var(--text-faint); --card-line: var(--outline); --card-box: var(--surf-high); --card-tint: var(--ripple); } .c-onyx { --card-bg: #020202; --card-fg: #FFFFFF; --card-dim: #9CA3AF; --card-line: rgba(255, 255, 255, 0.14); --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.09); } .c-cosmic { --card-bg: #23212C; --card-fg: #FFFFFF; --card-dim: #9CA3AF; --card-line: rgba(255, 255, 255, 0.12); --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.09); } .c-violet { --card-bg: #36255C; --card-fg: #FFFFFF; --card-dim: #D1C7E8; --card-line: rgba(255, 255, 255, 0.16); --card-box: rgba(255, 255, 255, 0.09); --card-tint: rgba(255, 255, 255, 0.11); } .c-orchid { --card-bg: #E5BDDF; --card-fg: #1E1E24; --card-dim: #524050; --card-line: rgba(30, 30, 36, 0.14); --card-box: rgba(30, 30, 36, 0.07); --card-tint: rgba(30, 30, 36, 0.08); } .c-vanilla { --card-bg: #F1FEC8; --card-fg: #1E1E24; --card-dim: #4A5426; --card-line: rgba(30, 30, 36, 0.14); --card-box: rgba(30, 30, 36, 0.07); --card-tint: rgba(30, 30, 36, 0.08); } .c-wineash { --card-bg: #32292F; --card-fg: #FFFFFF; --card-dim: #B7ADB4; --card-line: rgba(255, 255, 255, 0.13); --card-box: rgba(255, 255, 255, 0.07); --card-tint: rgba(255, 255, 255, 0.10); } .c-lavender { --card-bg: #D2C3F6; --card-fg: #1B1430; --card-dim: #4A4068; --card-line: rgba(27, 20, 48, 0.14); --card-box: rgba(27, 20, 48, 0.07); --card-tint: rgba(27, 20, 48, 0.08); } .c-candy { --card-bg: #B2D5E5; --card-fg: #0F1F27; --card-dim: #3C5866; --card-line: rgba(15, 31, 39, 0.14); --card-box: rgba(15, 31, 39, 0.07); --card-tint: rgba(15, 31, 39, 0.08); } .c-turquoise { --card-bg: #99E1D9; --card-fg: #102520; --card-dim: #3A5C55; --card-line: rgba(16, 37, 32, 0.14); --card-box: rgba(16, 37, 32, 0.07); --card-tint: rgba(16, 37, 32, 0.08); } .c-blush { --card-bg: #F2D3D0; --card-fg: #2B1E1C; --card-dim: #634945; --card-line: rgba(43, 30, 28, 0.14); --card-box: rgba(43, 30, 28, 0.07); --card-tint: rgba(43, 30, 28, 0.08); } .c-apricot { --card-bg: #F8D8B8; --card-fg: #2E2114; --card-dim: #6A5136; --card-line: rgba(46, 33, 20, 0.14); --card-box: rgba(46, 33, 20, 0.07); --card-tint: rgba(46, 33, 20, 0.08); } .c-champagne { --card-bg: #F2E2C4; --card-fg: #2A2418; --card-dim: #5C5238; --card-line: rgba(42, 36, 24, 0.14); --card-box: rgba(42, 36, 24, 0.07); --card-tint: rgba(42, 36, 24, 0.08); } .c-sage { --card-bg: #CFDCC5; --card-fg: #1E2418; --card-dim: #4B5540; --card-line: rgba(30, 36, 24, 0.14); --card-box: rgba(30, 36, 24, 0.07); --card-tint: rgba(30, 36, 24, 0.08); } .c-beige { --card-bg: #DFD1B8; --card-fg: #282217; --card-dim: #5A503A; --card-line: rgba(40, 34, 23, 0.15); --card-box: rgba(40, 34, 23, 0.07); --card-tint: rgba(40, 34, 23, 0.08); } .c-creme { --card-bg: #F8EFD9; --card-fg: #2A2518; --card-dim: #5E543C; --card-line: rgba(42, 37, 24, 0.14); --card-box: rgba(42, 37, 24, 0.06); --card-tint: rgba(42, 37, 24, 0.07); } .c-pearl { --card-bg: #EDE8E0; --card-fg: #26231F; --card-dim: #5E5850; --card-line: rgba(38, 35, 31, 0.14); --card-box: rgba(38, 35, 31, 0.07); --card-tint: rgba(38, 35, 31, 0.08); } /* ============================================================ Grundlagen ============================================================ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; } body { background: var(--bg); color: var(--text); font-family: Inter, Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 0.875rem; line-height: 1.25rem; -webkit-font-smoothing: antialiased; transition: background-color .25s, color .25s; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: none; } textarea { resize: none; overflow: hidden; } ::placeholder { color: var(--text-faint); } ::-webkit-scrollbar { display: none; } [hidden] { display: none !important; } .icon-btn { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); color: var(--text-dim); transition: background-color .15s, color .15s, transform .1s; } .icon-btn:active { background: var(--ripple); color: var(--text); transform: scale(.93); } .icon-btn.tiny { width: 30px; height: 30px; flex-basis: 30px; } .icon-btn.danger { color: var(--danger); } .round-btn { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--surf-high); color: var(--text-dim); transition: transform .1s, background-color .15s, color .15s; } .round-btn:active { transform: scale(.92); } .round-btn.on { background: var(--primary-container); color: #FFFFFF; } /* Schiebeschalter fuer Hell/Dunkel. Der Knauf sitzt links im Light Mode und rechts im Dark Mode und traegt das Symbol des gerade aktiven Modus. */ .theme-switch { position: relative; flex: 0 0 52px; width: 52px; height: 30px; } .ts-track { position: absolute; left: 5px; right: 5px; top: 7px; height: 16px; border-radius: var(--r-full); background: var(--surf-highest); transition: background-color .2s; } html[data-theme='light'] .ts-track { background: #D8D3DE; } .ts-knob { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform .26s cubic-bezier(.2, .8, .3, 1); } html[data-theme='dark'] .ts-knob { transform: translateX(22px); } .theme-switch:active .ts-knob { transform: scale(.92); } html[data-theme='dark'] .theme-switch:active .ts-knob { transform: translateX(22px) scale(.92); } .text-btn { color: var(--on-primary-container); background: var(--primary-container); padding: 7px 14px; border-radius: var(--r-full); font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; } .text-btn.ghost { background: none; color: var(--primary); padding: 6px 8px; } /* ============================================================ Kopfbereich ============================================================ */ #app { position: relative; height: 100%; display: flex; flex-direction: column; } .topbar { flex: 0 0 auto; z-index: 10; padding: calc(var(--safe-top) + 10px) var(--margin) 10px; background: var(--bg); } .search-pill { display: flex; align-items: center; gap: var(--s-sm); height: 48px; padding: 0 6px 0 14px; background: var(--surf-high); border-radius: var(--r-full); box-shadow: var(--shadow-sm); } html[data-theme='light'] .search-pill { background: var(--surf); border: 1px solid var(--outline); } .search-icon { display: flex; color: var(--text-faint); } .search-pill input { flex: 1 1 auto; min-width: 0; height: 100%; font-size: 0.875rem; -webkit-appearance: none; } .search-pill input::-webkit-search-cancel-button { display: none; } .filterbar { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-md) 0 0; } .chips-scroll { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s-xs); overflow-x: auto; padding: 2px 0; } .chip-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--r-full); background: var(--surf-high); color: var(--text-dim); font-size: 0.75rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: transform .1s, background-color .15s, color .15s; } .chip-btn:active { transform: scale(.95); } .chip-btn.on { background: var(--primary-container); color: var(--on-primary-container); } html[data-theme='dark'] .chip-btn.on { background: var(--primary); color: #37265D; } /* Filter-Chips waehrend der Suche: Alle / Listen / Notizen und der Schalter, der den Papierkorb mitdurchsucht. */ .searchfilter { display: flex; align-items: center; padding: var(--s-sm) 0 0; } .searchfilter .chips-scroll { gap: 6px; } .chip-btn .chip-num { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; } .chip-btn.on .chip-num { opacity: .85; } .chip-btn.sep { margin-left: 6px; position: relative; } .chip-btn.sep::before { content: ''; position: absolute; left: -6px; top: 20%; bottom: 20%; width: 1px; background: var(--outline-strong); } .chip-icon { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--surf-high); color: var(--text-dim); transition: transform .1s; } .chip-icon:active { transform: scale(.93); } .chip-icon.on { background: var(--primary-container); color: var(--on-primary-container); } html[data-theme='dark'] .chip-icon.on { background: var(--primary); color: #37265D; } /* Auswahlmodus: liegt ueber Suchleiste und Filterzeile */ .selectbar { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--safe-top) + 10px); display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 6px; background: var(--primary-container); color: #FFFFFF; border-radius: var(--r-full); box-shadow: var(--shadow-sm); animation: selIn .16s; } @keyframes selIn { from { opacity: 0; transform: translateY(-6px); } } .selectbar .icon-btn { color: rgba(255, 255, 255, .88); } .selectbar .icon-btn:active { background: rgba(255, 255, 255, .16); color: #fff; } .selectbar .icon-btn.danger { color: #FFC2BC; } .sel-count { flex: 1 1 auto; padding-left: 6px; font-size: 0.9375rem; font-weight: 600; } /* ============================================================ Board ============================================================ */ .scroller { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 0 var(--margin); } .scroller.dnd-locked { overflow: hidden; } .scroller-pad { height: calc(var(--nav-h) + var(--safe-bottom) + 90px); } .result-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); padding: 2px 2px var(--s-md); font-size: 0.75rem; color: var(--text-dim); } .result-line .hit { color: var(--on-primary-container); background: var(--primary-container); padding: 2px 8px; border-radius: var(--r-full); font-weight: 600; } html[data-theme='dark'] .result-line .hit { background: var(--primary); color: #37265D; } .group-head { display: flex; align-items: center; gap: 6px; padding: var(--s-sm) 2px; } .group-head .gh-icon { display: flex; color: var(--primary); } .group-head h2 { flex: 1 1 auto; margin: 0; font-size: 0.6875rem; line-height: 0.875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); } .group-head .gh-count { font-size: 0.6875rem; font-weight: 600; color: var(--text-faint); } .board { display: grid; grid-template-columns: 1fr; grid-auto-rows: 4px; column-gap: var(--s-md); align-items: start; padding-bottom: var(--s-lg); } .board[data-cols='2'] { grid-template-columns: 1fr 1fr; } .card { position: relative; overflow: hidden; background: var(--card-bg); color: var(--card-fg); border: 1px solid var(--card-line); border-radius: var(--r); padding: var(--s-lg); box-shadow: var(--shadow-sm); transition: transform .12s; } .board[data-cols='2'] .card { padding: var(--s-md); border-radius: 14px; } .card:active { transform: scale(.985); } /* Ausgewaehlte Karte im Mehrfachauswahl-Modus */ .card.sel { box-shadow: 0 0 0 3px var(--primary); } .card-check { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: #fff; box-shadow: 0 0 0 2px var(--card-bg); } /* Bilder oben auf der Karte. Bis zu vier Bilder werden als Mosaik gezeigt - das erste gross, der Rest als Streifen darunter. Frueher stand dort nur "+2 weitere", was man nicht anschauen konnte. Ab dem fuenften Bild traegt die letzte Kachel die Zahl. */ .card-photos { margin: calc(var(--s-lg) * -1) calc(var(--s-lg) * -1) var(--s-md); display: grid; gap: 2px; background: var(--card-line); border-bottom: 1px solid var(--card-line); } .board[data-cols='2'] .card-photos { margin: calc(var(--s-md) * -1) calc(var(--s-md) * -1) var(--s-sm); } .card-photos[data-n='1'] { grid-template-columns: 1fr; } .card-photos[data-n='2'] { grid-template-columns: 1fr 1fr; } .card-photos[data-n='3'], .card-photos[data-n='4'] { grid-template-columns: repeat(3, 1fr); } /* Das erste Bild bekommt die volle Breite, die kleineren reihen sich darunter. */ .card-photos[data-n='3'] .cp-cell:first-child, .card-photos[data-n='4'] .cp-cell:first-child { grid-column: 1 / -1; } .cp-cell { position: relative; overflow: hidden; background: var(--card-box); } .card-photo { display: block; width: 100%; height: 100%; object-fit: cover; } .card-photos[data-n='1'] .card-photo { max-height: 190px; } .card-photos[data-n='2'] .card-photo { height: 120px; } .card-photos[data-n='3'] .cp-cell:first-child .card-photo, .card-photos[data-n='4'] .cp-cell:first-child .card-photo { height: 132px; } .card-photos[data-n='3'] .card-photo, .card-photos[data-n='4'] .card-photo { height: 74px; } .board[data-cols='2'] .card-photos[data-n='1'] .card-photo { max-height: 130px; } .board[data-cols='2'] .card-photos[data-n='2'] .card-photo { height: 82px; } .board[data-cols='2'] .card-photos[data-n='3'] .cp-cell:first-child .card-photo, .board[data-cols='2'] .card-photos[data-n='4'] .cp-cell:first-child .card-photo { height: 96px; } .board[data-cols='2'] .card-photos[data-n='3'] .card-photo, .board[data-cols='2'] .card-photos[data-n='4'] .card-photo { height: 52px; } /* "+3" auf der letzten Kachel, wenn mehr Bilder da sind als Platz */ .cp-rest { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .52); color: #fff; font-size: 0.875rem; font-weight: 700; letter-spacing: .02em; } .card-head { display: flex; align-items: flex-start; gap: var(--s-sm); margin-bottom: var(--s-md); } .card-head .ch-icon { display: flex; color: var(--card-fg); opacity: .9; flex: 0 0 auto; margin-top: 2px; } .card-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -.01em; word-break: break-word; } .board[data-cols='2'] .card-title { font-size: 0.9375rem; line-height: 1.25rem; } /* In der schmalen Spalte hat die Posten-Pille keinen Platz mehr. */ .board[data-cols='2'] .sec-pill { display: none; } .board[data-cols='2'] .card-foot { font-size: 0.6562rem; } .card-head .ch-pin { flex: 0 0 auto; color: var(--card-fg); opacity: .7; } .card-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.875rem; line-height: 1.3125rem; max-height: 12.6em; overflow: hidden; } /* Abschnitts-Box auf der Karte */ .sec-box { background: var(--card-box); border-radius: 12px; padding: var(--s-sm) 10px 10px; margin-bottom: var(--s-md); } .sec-box:last-of-type { margin-bottom: 0; } .sec-box-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .sec-badge { flex: 0 0 22px; width: 22px; height: 22px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; letter-spacing: .02em; color: var(--card-fg); } .b0 { background: rgba(226, 186, 220, .34); } .b1 { background: rgba(191, 204, 154, .34); } .b2 { background: rgba(209, 188, 254, .30); } .b3 { background: rgba(241, 254, 200, .38); } .b4 { background: rgba(148, 143, 154, .32); } .sec-box-name { flex: 1 1 auto; min-width: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sec-pill { flex: 0 0 auto; font-size: 0.625rem; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: var(--r-full); background: var(--card-tint); color: var(--card-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .card-item { display: flex; align-items: flex-start; gap: 7px; padding: 2px 0; font-size: 0.8438rem; line-height: 1.1875rem; word-break: break-word; } .card-item .dot { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2.5px; border: 1.6px solid var(--card-dim); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .card-item.done .dot { background: var(--card-dim); border-color: var(--card-dim); } .card-item.done .dot svg { color: var(--card-bg); } .card-item.done span { text-decoration: line-through; opacity: .55; } /* Unterpunkte ruecken auch in der Kartenvorschau ein, sonst sieht eine gegliederte Liste dort aus wie eine flache. */ .card-item[data-indent='1'] { padding-left: 14px; } .card-item[data-indent='2'] { padding-left: 28px; } .card-item[data-indent='1'] .dot { transform: scale(.86); } .card-item[data-indent='2'] .dot { transform: scale(.78); } .card-more { color: var(--card-dim); font-size: 0.75rem; margin-top: 6px; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); margin-top: var(--s-md); padding-top: 10px; border-top: 1px solid var(--card-line); font-size: 0.6875rem; font-weight: 500; color: var(--card-dim); } .card-foot .cf-left { display: flex; align-items: center; gap: 5px; min-width: 0; } .card-foot .cf-left span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s-md); } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 500; line-height: 1; padding: 5px 9px; border-radius: var(--r-full); background: var(--card-tint); color: var(--card-dim); white-space: nowrap; } /* Ein farbiger Punkt statt einer eingefaerbten Flaeche: die Karte kann jede der 17 Notizfarben haben, eine Fuellung waere darauf mal zu blass und mal zu grell. Der Punkt bleibt auf hellem wie dunklem Grund erkennbar. */ .lc-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--lc, currentColor); } .chip.lc-none .lc-dot { display: none; } .chip-btn .lc-dot { width: 9px; height: 9px; flex-basis: 9px; } /* Treffer-Hervorhebung in der Suche */ mark { background: var(--card-tint); color: inherit; border-radius: 4px; padding: 0 3px; font-weight: 700; } .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-md); padding: 72px 32px; color: var(--text-faint); text-align: center; } .empty-icon { opacity: .4; } /* Label-Verwaltung */ .lv-row { display: flex; align-items: center; gap: var(--s-md); padding: 14px var(--s-md); margin-bottom: var(--s-sm); background: var(--surf); border: 1px solid var(--outline); border-radius: 14px; } html[data-theme='dark'] .lv-row { background: var(--surf-low); } .lv-row .lv-icon { display: flex; color: var(--primary); flex: 0 0 auto; } .lv-row .lv-icon.lv-colored { color: var(--lc, var(--primary)); } .lv-color { flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--r-full); border: 2px solid var(--outline-strong); background: var(--lc, transparent); } .lv-color.is-none { background: var(--surf-highest); } .lv-row input { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 500; } .lv-row .lv-count { font-size: 0.6875rem; color: var(--text-faint); font-weight: 600; } /* ============================================================ FAB und Bottom-Navigation ============================================================ */ .fab-stack { position: absolute; right: var(--margin); bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .fab { width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: var(--on-primary-container); box-shadow: var(--fab-glow); transition: transform .18s cubic-bezier(.2, .8, .3, 1); } .fab:active { transform: scale(.94); } .fab.open { transform: rotate(45deg); } .fab-mini { display: flex; align-items: center; gap: 10px; animation: miniIn .16s cubic-bezier(.2, .8, .3, 1); } @keyframes miniIn { from { opacity: 0; transform: translateY(10px); } } .fab-mini-label { font-size: 0.75rem; font-weight: 600; padding: 6px 12px; border-radius: var(--r-full); background: var(--surf-highest); color: var(--text); box-shadow: var(--shadow-sm); } .fab-mini-icon { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--surf-highest); color: var(--primary); box-shadow: var(--shadow-sm); } html[data-theme='light'] .fab-mini-icon, html[data-theme='light'] .fab-mini-label { background: var(--surf); border: 1px solid var(--outline); } .bottomnav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 11; display: flex; align-items: stretch; height: calc(var(--nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--surf-low); border-top: 1px solid var(--outline); } html[data-theme='dark'] .bottomnav { background: var(--surf-lowest); } /* Die aktive Pille ist ein einziges Element, das zwischen den Tabs gleitet - statt am Ziel einfach aufzutauchen. Sie liegt hinter den Icons. */ .nav-indicator { position: absolute; left: 0; top: 0; width: 48px; height: 26px; border-radius: var(--r-full); background: var(--secondary); pointer-events: none; opacity: 0; z-index: 0; transition: transform .36s cubic-bezier(.34, 1.25, .38, 1), width .36s cubic-bezier(.34, 1.25, .38, 1), opacity .18s, background-color .2s; } .nav-indicator.no-anim { transition: background-color .2s; } .nav-item { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-faint); font-size: 0.6562rem; font-weight: 500; letter-spacing: .01em; transition: color .2s; } .nav-item .ni-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 26px; border-radius: var(--r-full); transition: color .2s, transform .36s cubic-bezier(.34, 1.25, .38, 1); } .nav-item.active { color: var(--primary); font-weight: 600; } .nav-item.active .ni-icon { color: #37265D; } html[data-theme='light'] .nav-item.active .ni-icon { color: var(--primary); } /* ============================================================ Editor ============================================================ */ .editor { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--bg); color: var(--text); animation: sheetUp .2s cubic-bezier(.2, .8, .3, 1); } @keyframes sheetUp { from { transform: translateY(16px); opacity: 0; } } .editor-top { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-sm); padding: calc(var(--safe-top) + 8px) var(--s-sm) var(--s-sm); } .editor-kind { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; } /* Zeigt die Farbe der Notiz, ohne die Editorflaeche einzufaerben. */ .ed-dot { flex: 0 0 14px; width: 14px; height: 14px; border-radius: var(--r-full); background: var(--card-bg); border: 1.5px solid var(--outline-strong); margin-right: -2px; } .editor-top-spacer { flex: 1 1 auto; } .editor-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-sm) var(--margin) 0; } .editor-body.dnd-locked { overflow: hidden; } .editor-pad { height: 130px; } /* Bilderstreifen im Editor */ .ed-images { display: grid; gap: 6px; margin-bottom: var(--s-md); grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .ed-images.single { grid-template-columns: 1fr; } .ed-images img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; background: var(--surf-high); display: block; pointer-events: none; /* Ziehen haengt am Rahmen, nicht am Bild */ } .ed-images.single img { max-height: 320px; } /* Bilder lassen sich in ihrer Reihenfolge ziehen - langes Druecken startet, wie bei den Karten auf dem Board. Die Nummer zeigt, welches Bild auf der Karte oben landet. */ .ed-img { position: relative; touch-action: none; border-radius: 12px; } .ed-img::after { content: attr(data-n); position: absolute; left: 6px; top: 6px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: rgba(0, 0, 0, .58); color: #fff; font-size: 0.625rem; font-weight: 700; } .ed-images.single .ed-img::after { display: none; } .dnd-ghost.ed-img { opacity: .9; } .dnd-ghost.ed-img img { border-radius: 12px; } /* Vollbildansicht eines Bildes */ .viewer { position: fixed; inset: 0; z-index: 60; background: #05050A; display: flex; align-items: center; justify-content: center; } .viewer img { max-width: 100%; max-height: 100%; object-fit: contain; } .viewer-bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: var(--s-xs); padding: calc(var(--safe-top) + 8px) var(--s-sm) var(--s-sm); background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent); } .viewer-bar .icon-btn { color: #fff; } .viewer-bar .icon-btn.danger { color: #FFB4AB; } /* Fortschrittskarte */ .progress-card { background: var(--surf-low); border: 1px solid var(--outline); border-radius: var(--r); padding: 14px var(--s-md); margin-bottom: var(--s-lg); } .pc-top { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: 10px; } .pc-icon { display: flex; color: var(--primary); } .pc-title { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-stat { font-size: 0.75rem; font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; } .pc-track { height: 6px; border-radius: 3px; background: var(--surf-highest); overflow: hidden; } .pc-fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width .25s; } /* Titelzeile */ .ed-titlerow { display: flex; align-items: flex-start; gap: var(--s-sm); } .ed-title { flex: 1 1 auto; min-width: 0; font-size: 1.5rem; line-height: 1.875rem; font-weight: 700; letter-spacing: -.015em; padding: 4px 0; } .ed-title-actions { display: flex; align-items: center; gap: 6px; padding-top: 3px; } .ed-meta { display: flex; align-items: center; gap: 6px; font-size: 0.7188rem; color: var(--text-faint); padding: 2px 0 var(--s-md); } .ed-text { width: 100%; font-size: 1rem; line-height: 1.5625rem; padding: 4px 0 var(--s-md); } .ed-labels { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--s-md); } .ed-labels .chip { background: var(--surf-high); color: var(--text-dim); font-size: 0.75rem; padding: 6px 11px; } .editor-bottom { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-xs); padding: 10px var(--s-md) calc(10px + var(--safe-bottom)); background: var(--surf-low); border-top: 1px solid var(--outline); } html[data-theme='dark'] .editor-bottom { background: var(--surf-lowest); } .editor-bottom-spacer { flex: 0 0 6px; } .editor-bottom-fill { flex: 1 1 auto; } /* Der Knopf, hinter dem das Farbraster liegt: er zeigt die aktive Farbe. */ .ed-color-chip { width: 22px; height: 22px; border-radius: var(--r-full); border: 1.5px solid var(--outline-strong); background: var(--card-bg); display: block; position: relative; overflow: hidden; } /* "Standard" uebernimmt die Theme-Flaeche und sieht im Dark Mode aus wie Cosmic - der Schraegstrich macht die Option trotzdem eindeutig. */ .ed-color-chip.c-default::after, .swatch.c-default::after { content: ''; position: absolute; left: 50%; top: -20%; bottom: -20%; width: 1.5px; background: var(--outline-strong); transform: rotate(45deg); } .swatch.c-default { position: relative; overflow: hidden; } /* ---------- Abschnitte in der Liste (Kernfeature) ---------- */ .sections { padding-top: 2px; } .section { background: var(--surf-low); border: 1px solid var(--outline); border-radius: var(--r); padding: var(--s-md) 10px 10px; margin-bottom: var(--s-md); } .section.is-root.only-section { background: none; border-color: transparent; padding: 0; } .section.is-root.only-section > .section-head { display: none; } .section.is-root.has-siblings.is-empty { display: none; } .section-head { display: flex; align-items: center; gap: 6px; margin-bottom: var(--s-sm); } .section-grip { flex: 0 0 22px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); opacity: .6; touch-action: none; margin-left: -4px; } .sec-badge-lg { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: var(--text); } .section-name { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); padding: 6px 2px; } .section-pill { flex: 0 0 auto; font-size: 0.6562rem; font-weight: 600; padding: 4px 9px; border-radius: var(--r-full); background: var(--surf-highest); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; } .section-toggle, .section-menu { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); border-radius: var(--r-full); } .section-toggle svg { transition: transform .18s; } .section.collapsed .section-toggle svg { transform: rotate(-90deg); } .section.collapsed .section-items, .section.collapsed .section-addrow { display: none; } .section-items { min-height: 8px; } .item-row { position: relative; display: flex; align-items: flex-start; gap: 2px; background: var(--surf); border-radius: 12px; margin-bottom: 6px; padding: 2px 4px 2px 0; } html[data-theme='dark'] .item-row { background: var(--surf-high); } .section.is-root.only-section .item-row { background: var(--surf-low); } /* Unterpunkte. Die ganze Zeile rueckt ein; der senkrechte Strich links zeigt, zu welchem Hauptpunkt sie gehoert. */ .item-row[data-indent='1'] { margin-left: 20px; } .item-row[data-indent='2'] { margin-left: 40px; } .item-row[data-indent='1']::before, .item-row[data-indent='2']::before { content: ''; position: absolute; left: -11px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--outline-strong); opacity: .7; } .item-row[data-indent] .item-text { font-size: 0.875rem; } .item-grip { flex: 0 0 22px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); opacity: .5; touch-action: none; } .item-check { flex: 0 0 34px; height: 38px; display: flex; align-items: center; justify-content: center; } .item-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--outline-strong); background: transparent; display: flex; align-items: center; justify-content: center; transition: background-color .12s, border-color .12s; } .item-row.done .item-box { background: var(--primary-container); border-color: var(--primary-container); } .item-row.done .item-box svg { color: #fff; } .item-row:not(.done) .item-box svg { opacity: 0; } .item-text { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; line-height: 1.3125rem; padding: 9px 2px; } .item-row.done .item-text { text-decoration: line-through; color: var(--text-faint); } .item-row.done .item-grip { visibility: hidden; } .item-del { flex: 0 0 32px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); opacity: .45; } .section-addrow { display: flex; align-items: center; gap: var(--s-sm); } .section-add { flex: 1 1 auto; text-align: left; padding: 11px 14px; border-radius: var(--r-full); background: var(--surf); color: var(--text-faint); font-size: 0.875rem; } html[data-theme='dark'] .section-add { background: var(--surf-high); } .section-add-btn { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--primary-container); color: var(--on-primary-container); transition: transform .1s; } .section-add-btn:active { transform: scale(.92); } .add-section-btn { display: flex; align-items: center; justify-content: center; gap: var(--s-sm); width: 100%; margin: var(--s-sm) 0 var(--s-xs); padding: 14px; border-radius: var(--r); border: 1px solid var(--outline-strong); color: var(--text-dim); font-size: 0.875rem; font-weight: 600; } .add-section-btn:active { background: var(--ripple); } .add-section-btn .plus { display: flex; } .checked-divider { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-sm) 4px 6px 24px; font-size: 0.6562rem; font-weight: 600; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; } .checked-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--outline); } /* Antippbare Zeile, wenn die erledigten Eintraege ausgeblendet sind */ .checked-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 4px 10px 24px; font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; } .checked-toggle .ct-icon { display: flex; } .checked-toggle:active { color: var(--text-dim); } /* ============================================================ Bottom-Sheet ============================================================ */ .sheet-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; opacity: 0; transition: opacity .2s; } .sheet-scrim.in { opacity: 1; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surf-low); color: var(--text); border-radius: var(--r-md) var(--r-md) 0 0; padding: var(--s-sm) 0 calc(var(--s-md) + var(--safe-bottom)); max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow); transform: translateY(101%); transition: transform .24s cubic-bezier(.2, .8, .3, 1); } .sheet.in { transform: none; } .sheet-grip { width: 34px; height: 4px; border-radius: 2px; background: var(--outline-strong); margin: 4px auto 12px; } .sheet-title { padding: 4px 22px 10px; font-size: 0.9375rem; font-weight: 600; } .sheet-row { display: flex; align-items: center; gap: var(--s-lg); width: 100%; padding: 14px 22px; text-align: left; font-size: 0.9062rem; } .sheet-row:active { background: var(--ripple); } .sheet-row .sr-icon { display: flex; color: var(--text-dim); flex: 0 0 24px; } .sheet-row span { flex: 1 1 auto; } .sheet-row.danger, .sheet-row.danger .sr-icon { color: var(--danger); } .sheet-hint { flex: 0 0 auto !important; font-size: 0.6875rem; font-weight: 600; color: var(--text-faint); padding: 4px 9px; border-radius: var(--r-full); background: var(--surf-high); white-space: nowrap; } .sheet-note { margin: 6px 0 0; padding: 4px 22px 8px; color: var(--text-faint); font-size: 0.75rem; line-height: 1.125rem; } /* 17 Farben als Raster. Als waagerechte Reihe waren die hinteren nur noch ueber mehrfaches Wischen erreichbar; im Raster sieht man alle auf einmal. */ .sheet-swatches { display: grid; gap: 14px 10px; padding: 4px 22px 18px; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); } .swatch-wrap { display: flex; flex-direction: column; align-items: center; min-width: 0; } .swatch { width: 46px; height: 46px; border-radius: var(--r-full); border: 2px solid var(--outline-strong); display: flex; align-items: center; justify-content: center; transition: transform .12s; } .swatch:active { transform: scale(.9); } .swatch.sel { box-shadow: 0 0 0 3px var(--primary); } .swatch-label { display: block; width: 100%; text-align: center; font-size: 0.6562rem; color: var(--text-faint); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Warnung vor einem Schritt, den keine Snackbar mehr zurueckholt */ .sheet-warn { display: flex; gap: 14px; align-items: flex-start; margin: 0 22px 10px; padding: 12px 14px; border-radius: 14px; background: var(--ripple); border: 1px solid var(--outline); font-size: 0.8125rem; line-height: 1.375rem; color: var(--text-dim); } .sheet-warn .sw-icon { flex: 0 0 22px; display: flex; color: var(--danger); margin-top: 1px; } /* ---------- Formulare im Sheet (Konto, Anmeldung) ---------- */ .sheet-form { padding: 4px 22px 6px; } .sheet-field { display: block; margin-bottom: 14px; } .sheet-field > span { display: block; margin-bottom: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--text-faint); } .sheet-field > input { width: 100%; padding: 12px 14px; background: var(--surf-high); color: var(--text); border: 1px solid var(--outline); border-radius: 12px; font-size: 0.9375rem; } .sheet-field > input:focus { border-color: var(--primary); } .sheet-submit { display: block; width: calc(100% - 44px); margin: 4px 22px 6px; padding: 14px; border-radius: var(--r-full); background: var(--primary-container); color: var(--on-primary-container); font-size: 0.9375rem; font-weight: 600; transition: transform .1s, opacity .15s; } .sheet-submit:active { transform: scale(.98); } .sheet-submit:disabled { opacity: .6; } .sheet-link { display: block; width: 100%; padding: 12px 22px 4px; text-align: center; color: var(--primary); font-size: 0.8125rem; font-weight: 600; } .sheet-error { margin: 2px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--ripple); color: var(--danger); font-size: 0.8125rem; line-height: 1.25rem; } /* Farbwahl fuer ein Label - kleinere Punkte, dieselbe Rasterlogik */ .label-colors { display: grid; gap: 12px 8px; padding: 4px 22px 18px; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); } .lc-swatch { width: 38px; height: 38px; border-radius: var(--r-full); border: 2px solid var(--outline-strong); display: flex; align-items: center; justify-content: center; color: #fff; justify-self: center; } .lc-swatch.sel { box-shadow: 0 0 0 3px var(--primary); } .lc-swatch.is-none { background: var(--surf-highest); color: var(--text-dim); } .label-row { display: flex; align-items: center; gap: 14px; padding: 10px 22px; } .label-row input[type='text'] { flex: 1 1 auto; min-width: 0; border-bottom: 1px solid var(--outline); padding: 8px 0; font-size: 0.9375rem; } .label-row .cb { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid var(--text-faint); border-radius: 6px; display: flex; align-items: center; justify-content: center; } .label-row .cb.on { background: var(--primary-container); border-color: var(--primary-container); color: #fff; } /* ============================================================ Snackbar ============================================================ */ .snackbar { position: fixed; left: var(--s-md); right: var(--s-md); bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 50; display: flex; align-items: center; gap: var(--s-md); padding: 12px 12px 12px 18px; background: var(--surf-highest); color: var(--text); border-radius: 14px; box-shadow: var(--shadow); animation: snackIn .18s; } html[data-theme='light'] .snackbar { background: #2A2833; color: #F2EFF6; } html[data-theme='light'] .snackbar .text-btn { background: none; color: #D1BCFE; } .snackbar span { flex: 1 1 auto; font-size: 0.8438rem; } @keyframes snackIn { from { transform: translateY(16px); opacity: 0; } } /* ============================================================ Drag & Drop ============================================================ */ /* Waehrend eines Drags gehoert die Geste uns - nicht dem Scroller. touch-action greift erst beim naechsten Aufsetzen des Fingers, den laufenden Drag haelt blockScroll in dnd.js frei. */ body.dnd-active { user-select: none; -webkit-user-select: none; touch-action: none; } body.dnd-active .scroller, body.dnd-active .editor-body { touch-action: none; } .dnd-ghost { position: fixed !important; z-index: 90; margin: 0 !important; pointer-events: none; opacity: .96; box-shadow: var(--shadow); border-radius: var(--r); } .dnd-ghost.card { background: var(--card-bg); } .dnd-ghost.item-row { background: var(--surf-highest); border-radius: 12px; } .dnd-ghost.section { background: var(--surf-high); border-radius: var(--r); } .dnd-source { opacity: .3; } .dnd-source * { visibility: hidden; } .card.dnd-source, .section.dnd-source, .item-row.dnd-source { outline: 2px dashed var(--outline-strong); outline-offset: -2px; } /* ============================================================ Grosse und gedrehte Bildschirme Die App ist fuer ein Telefon im Hochformat gebaut. Damit sie im Querformat und auf einem Tablet nicht aus dem Leim geht, bekommt sie hier drei Anpassungen: mehr Spalten, eine gedeckelte Zeilenbreite und eine flachere Navigationsleiste, wenn der Bildschirm niedrig ist. ============================================================ */ /* ---------- Breiter Bildschirm: mehr Spalten ---------- */ @media (min-width: 620px) { /* Die Wahl ein-/zweispaltig bleibt erhalten, sie bedeutet jetzt nur "breite" oder "schmale" Karten - die Spaltenzahl ergibt sich aus dem Platz. */ .board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .board[data-cols='2'] { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } } /* ---------- Sehr breiter Bildschirm: Inhalt zentrieren ---------- */ @media (min-width: 1000px) { /* Ueber die ganze Breite gezogene Zeilen liest niemand gern. */ .topbar, .scroller { padding-left: max(var(--margin), calc((100% - 1120px) / 2)); padding-right: max(var(--margin), calc((100% - 1120px) / 2)); } .editor-body { padding-left: max(var(--margin), calc((100% - 760px) / 2)); padding-right: max(var(--margin), calc((100% - 760px) / 2)); } .editor-top, .editor-bottom { padding-left: max(var(--s-sm), calc((100% - 780px) / 2)); padding-right: max(var(--s-sm), calc((100% - 780px) / 2)); } .sheet { left: 50%; right: auto; transform: translate(-50%, 101%); width: min(560px, 100%); border-radius: var(--r-md) var(--r-md) 0 0; } .sheet.in { transform: translate(-50%, 0); } .snackbar { left: 50%; right: auto; width: min(520px, calc(100% - 24px)); margin-left: -260px; } .fab-stack { right: max(var(--margin), calc((100% - 1120px) / 2)); } } /* Auf ganz schmalen Snackbars waere die feste Breite oben zu breit. */ @media (min-width: 1000px) and (max-width: 1060px) { .snackbar { left: var(--s-md); right: var(--s-md); width: auto; margin-left: 0; } } /* ---------- Querformat auf dem Telefon: Hoehe ist knapp ---------- */ @media (orientation: landscape) and (max-height: 560px) { /* Icon und Beschriftung nebeneinander statt uebereinander - das spart rund ein Drittel der Leistenhoehe. */ :root { --nav-h: calc(10px + 1.875rem); } .nav-item { flex-direction: row; gap: 7px; } .nav-item .ni-icon { width: 30px; height: 26px; } .nav-indicator { width: 30px; } .topbar { padding-top: calc(var(--safe-top) + 6px); padding-bottom: 6px; } .search-pill { height: 42px; } .filterbar { padding-top: var(--s-sm); } .editor-top { padding-top: calc(var(--safe-top) + 4px); padding-bottom: 4px; } .editor-pad { height: 90px; } .scroller-pad { height: calc(var(--nav-h) + var(--safe-bottom) + 70px); } /* Ein Sheet, das 80 % einer 400px hohen Flaeche einnimmt, zeigt drei Zeilen - hier darf es hoeher und scrollt dafuer. */ .sheet { max-height: 92vh; } .sheet-grip { margin: 2px auto 8px; } .sheet-row { padding-top: 11px; padding-bottom: 11px; } } /* ---------- Sehr grosse Schrift ---------- */ /* Bei stark vergroesserter Systemschrift sind die Beschriftungen in der Navigationsleiste nicht mehr unterzubringen - dann zaehlen die Symbole. */ @media (max-width: 420px) { html[data-fontscale='xl'] .nav-item span:last-child { display: none; } html[data-fontscale='xl'] .nav-item { justify-content: center; } html[data-fontscale='xl'] .chip-btn { padding: 6px 10px; } }