/* inter-cyrillic-ext-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } /* inter-cyrillic-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } /* inter-greek-ext-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations'); unicode-range: U+1F00-1FFF; } /* inter-greek-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations'); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* inter-vietnamese-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; } /* inter-latin-ext-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* inter-latin-wght-normal */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }/* ===== Liquid-Glass-Design – Tokens ===== */ /* Weißes Milchglas auf farbiger Mesh-Fläche; die Farbwelt (data-mood am ) bestimmt den Hintergrund der GESAMTEN App (Startseite, Editor, Login, …). */ :root { --ink: #ffffff; --muted: rgba(255, 255, 255, 0.78); --faint: rgba(255, 255, 255, 0.52); --glass-side: rgba(255, 255, 255, 0.12); /* Seitenleiste, Karten */ --glass-page: rgba(30, 32, 50, 0.42); /* Schreibfläche/Modals: neutral-dunkles Glas = gut lesbar */ --glass-pop: rgba(30, 32, 50, 0.78); /* Popups (Bubble/Slash/Tastaturleiste) */ --hair: rgba(255, 255, 255, 0.28); --hair-soft: rgba(255, 255, 255, 0.16); --accent: #ffb27f; /* helles Pfirsich-Coral – NUR Akzent */ --accent-soft: rgba(255, 178, 127, 0.22); --accent-on: #3a2410; --sage: #b9e29a; /* Sync-Indikator */ --font-ui: "Inter Variable", system-ui, sans-serif; --font-doc: "Inter Variable", system-ui, sans-serif; /* Standard: Inter überall */ --blur: 24px; /* zentral reduzierbar für schwache Geräte */ color-scheme: dark; } * { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; } body { font-family: var(--font-ui); color: var(--ink); -webkit-font-smoothing: antialiased; background-attachment: fixed; /* Standard-Farbwelt: Grau/Orange (Graphit mit Orange-Glut) */ background: radial-gradient(85% 55% at 80% 8%, rgba(255, 150, 70, 0.5) 0%, transparent 55%), radial-gradient(75% 65% at 8% 34%, rgba(255, 120, 50, 0.28) 0%, transparent 60%), radial-gradient(90% 70% at 58% 92%, rgba(120, 120, 128, 0.45) 0%, transparent 60%), linear-gradient(165deg, #585a60 0%, #66686e 35%, #4c4e54 70%, #3c3e44 100%); } :root[data-mood="flieder"] body { background: radial-gradient(90% 60% at 78% 12%, rgba(255, 214, 160, 0.75) 0%, transparent 55%), radial-gradient(80% 70% at 12% 30%, rgba(150, 190, 255, 0.75) 0%, transparent 60%), radial-gradient(90% 70% at 60% 85%, rgba(255, 170, 220, 0.65) 0%, transparent 60%), linear-gradient(165deg, #9f8fd4 0%, #b79ad0 35%, #8fa8dc 70%, #a98fc8 100%); background-attachment: fixed; } :root[data-mood="morgen"] body { background: radial-gradient(90% 60% at 80% 10%, rgba(255, 236, 190, 0.8) 0%, transparent 55%), radial-gradient(80% 70% at 15% 35%, rgba(140, 205, 240, 0.8) 0%, transparent 60%), radial-gradient(90% 70% at 60% 90%, rgba(170, 220, 255, 0.7) 0%, transparent 60%), linear-gradient(165deg, #7fa8d8 0%, #8fbce0 40%, #a8cce8 70%, #90a8d8 100%); background-attachment: fixed; } :root[data-mood="pfirsich"] body { background: radial-gradient(90% 60% at 75% 12%, rgba(255, 220, 170, 0.85) 0%, transparent 55%), radial-gradient(80% 70% at 12% 35%, rgba(255, 170, 180, 0.7) 0%, transparent 60%), radial-gradient(90% 70% at 60% 88%, rgba(255, 200, 150, 0.7) 0%, transparent 60%), linear-gradient(165deg, #d89aa8 0%, #e0ac9a 40%, #d0a0c0 75%, #c890a8 100%); background-attachment: fixed; } :root[data-mood="polar"] body { background: radial-gradient(65% 45% at 12% 0%, rgba(214, 110, 196, 0.65) 0%, transparent 55%), radial-gradient(55% 60% at 0% 55%, rgba(150, 115, 235, 0.6) 0%, transparent 60%), radial-gradient(70% 75% at 104% 55%, rgba(52, 225, 178, 0.7) 0%, transparent 62%), radial-gradient(60% 45% at 62% 100%, rgba(70, 180, 190, 0.5) 0%, transparent 60%), linear-gradient(160deg, #7a62b4 0%, #5f6cbc 28%, #4d7cb8 52%, #3d9aaa 76%, #35b294 100%); background-attachment: fixed; } :root[data-mood="dunkel"] body { background: radial-gradient(80% 55% at 82% 0%, rgba(104, 80, 190, 0.4) 0%, transparent 60%), radial-gradient(70% 60% at 2% 38%, rgba(46, 100, 160, 0.35) 0%, transparent 60%), radial-gradient(80% 60% at 58% 104%, rgba(140, 70, 140, 0.28) 0%, transparent 60%), linear-gradient(165deg, #20203a 0%, #181a2e 40%, #121224 72%, #0d0d1a 100%); background-attachment: fixed; } /* Reduzierte Blur-Stärke, wenn der Nutzer „weniger Bewegung/Effekte" wünscht */ @media (prefers-reduced-transparency: reduce) { :root { --blur: 8px; } } /* ===== Startseite: Liquid Glass ===== */ /* Eigene, helle Glas-Welt – unabhängig vom dunkel/hell-Theme der übrigen App. */ .home { position: fixed; inset: 0; z-index: 40; overflow: hidden; color: #fff; font-family: var(--font-ui); } .home * { -webkit-tap-highlight-color: transparent; } /* --- Hintergrund: Farbwelten (Standard: grau) --- */ .hm-bg { position: absolute; inset: 0; z-index: 0; transition: background 0.5s ease; } .home[data-mood="grau"] .hm-bg { background: radial-gradient(85% 55% at 80% 8%, rgba(255, 150, 70, 0.5) 0%, transparent 55%), radial-gradient(75% 65% at 8% 34%, rgba(255, 120, 50, 0.28) 0%, transparent 60%), radial-gradient(90% 70% at 58% 92%, rgba(120, 120, 128, 0.45) 0%, transparent 60%), linear-gradient(165deg, #585a60 0%, #66686e 35%, #4c4e54 70%, #3c3e44 100%); } .home[data-mood="grau"] .hm-veil { filter: blur(46px) saturate(0.35); opacity: 0.35; } .home[data-mood="grau"] .hm-veil.v2 { filter: blur(46px) saturate(1.1); opacity: 0.55; } .home[data-mood="flieder"] .hm-bg { background: radial-gradient(90% 60% at 78% 12%, rgba(255, 214, 160, 0.75) 0%, transparent 55%), radial-gradient(80% 70% at 12% 30%, rgba(150, 190, 255, 0.75) 0%, transparent 60%), radial-gradient(90% 70% at 60% 85%, rgba(255, 170, 220, 0.65) 0%, transparent 60%), linear-gradient(165deg, #9f8fd4 0%, #b79ad0 35%, #8fa8dc 70%, #a98fc8 100%); } .home[data-mood="morgen"] .hm-bg { background: radial-gradient(90% 60% at 80% 10%, rgba(255, 236, 190, 0.8) 0%, transparent 55%), radial-gradient(80% 70% at 15% 35%, rgba(140, 205, 240, 0.8) 0%, transparent 60%), radial-gradient(90% 70% at 60% 90%, rgba(170, 220, 255, 0.7) 0%, transparent 60%), linear-gradient(165deg, #7fa8d8 0%, #8fbce0 40%, #a8cce8 70%, #90a8d8 100%); } .home[data-mood="pfirsich"] .hm-bg { background: radial-gradient(90% 60% at 75% 12%, rgba(255, 220, 170, 0.85) 0%, transparent 55%), radial-gradient(80% 70% at 12% 35%, rgba(255, 170, 180, 0.7) 0%, transparent 60%), radial-gradient(90% 70% at 60% 88%, rgba(255, 200, 150, 0.7) 0%, transparent 60%), linear-gradient(165deg, #d89aa8 0%, #e0ac9a 40%, #d0a0c0 75%, #c890a8 100%); } .home[data-mood="polar"] .hm-bg { background: radial-gradient(65% 45% at 12% 0%, rgba(214, 110, 196, 0.65) 0%, transparent 55%), radial-gradient(55% 60% at 0% 55%, rgba(150, 115, 235, 0.6) 0%, transparent 60%), radial-gradient(70% 75% at 104% 55%, rgba(52, 225, 178, 0.7) 0%, transparent 62%), radial-gradient(60% 45% at 62% 100%, rgba(70, 180, 190, 0.5) 0%, transparent 60%), linear-gradient(160deg, #7a62b4 0%, #5f6cbc 28%, #4d7cb8 52%, #3d9aaa 76%, #35b294 100%); } .home[data-mood="polar"] .hm-veil { filter: blur(42px) hue-rotate(80deg) saturate(1.2); opacity: 0.65; } .home[data-mood="polar"] .hm-veil.v2 { filter: blur(42px) hue-rotate(160deg) saturate(1.1); opacity: 0.55; } .home[data-mood="dunkel"] .hm-bg { background: radial-gradient(80% 55% at 82% 0%, rgba(104, 80, 190, 0.4) 0%, transparent 60%), radial-gradient(70% 60% at 2% 38%, rgba(46, 100, 160, 0.35) 0%, transparent 60%), radial-gradient(80% 60% at 58% 104%, rgba(140, 70, 140, 0.28) 0%, transparent 60%), linear-gradient(165deg, #20203a 0%, #181a2e 40%, #121224 72%, #0d0d1a 100%); } .home[data-mood="dunkel"] .hm-veil { opacity: 0.28; } .home[data-mood="dunkel"] .hm-veil.v2 { opacity: 0.2; } /* Schimmernde Farbschleier */ .hm-veil { position: absolute; border-radius: 50%; filter: blur(46px); opacity: 0.55; mix-blend-mode: screen; } .hm-veil.v1 { width: 60vmin; height: 46vmin; left: -14vmin; top: 24%; background: radial-gradient(circle at 40% 40%, rgba(140, 240, 255, 0.85), rgba(190, 140, 255, 0.4) 60%, transparent 75%); animation: hm-sway 18s ease-in-out infinite alternate; } .hm-veil.v2 { width: 52vmin; height: 42vmin; right: -12vmin; top: 6%; background: radial-gradient(circle at 55% 45%, rgba(255, 220, 150, 0.9), rgba(255, 160, 210, 0.4) 60%, transparent 75%); animation: hm-sway 24s ease-in-out infinite alternate-reverse; } .hm-veil.v3 { width: 56vmin; height: 44vmin; right: -10vmin; bottom: 4%; background: radial-gradient(circle at 45% 50%, rgba(255, 170, 230, 0.8), rgba(140, 190, 255, 0.4) 60%, transparent 75%); animation: hm-sway 28s ease-in-out infinite alternate; } @keyframes hm-sway { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vmin, -3vmin) scale(1.1); } } /* Bokeh-Lichter */ .hm-bokeh { position: absolute; border-radius: 50%; filter: blur(2px); background: radial-gradient(circle, rgba(255, 250, 230, 0.9), rgba(255, 240, 200, 0.25) 60%, transparent 72%); } .hm-bokeh.soft { filter: blur(7px); } @keyframes hm-twinkle { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.3; } } /* --- Milchglas-Grundrezept --- */ .hm-glass { background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 0 22px rgba(255, 255, 255, 0.06), 0 12px 34px rgba(40, 35, 70, 0.2); } /* --- Aufbau --- */ .hm-app { position: relative; z-index: 2; height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom)); } .hm-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 0; } .hm-brand { display: flex; align-items: center; gap: 11px; } .hm-mark { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; font-size: 16px; } .hm-brand h1 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: 0.2px; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hm-date { font-size: 11.5px; color: rgba(255, 255, 255, 0.78); margin-top: 1px; } .hm-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 14px; font-weight: 650; color: #fff; padding: 0; } /* --- Mitte: Headline + Mikrofon + Stift --- */ .hm-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } .hm-stage h2 { font-size: 25px; font-weight: 700; margin: 0; letter-spacing: 0.2px; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hm-sub { font-size: 13px; color: rgba(255, 255, 255, 0.78); margin-bottom: 22px; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hm-mic-wrap { position: relative; display: grid; place-items: center; } .hm-halo { position: absolute; width: 172px; height: 172px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 55%, transparent 70%); filter: blur(6px); animation: hm-breathe 4.5s ease-in-out infinite; } @keyframes hm-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 0.45; } } .hm-mic { width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.5), transparent 45%), radial-gradient(circle at 68% 78%, rgba(255, 190, 230, 0.35), transparent 55%), radial-gradient(circle at 30% 75%, rgba(160, 220, 255, 0.3), transparent 55%), rgba(255, 255, 255, 0.16); backdrop-filter: blur(var(--blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--blur)) saturate(170%); border: 1.5px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.55), inset 0 -12px 28px rgba(190, 150, 255, 0.22), 0 22px 48px rgba(40, 35, 70, 0.28); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .hm-mic:active { transform: scale(0.93); } .hm-mic svg { width: 40px; height: 40px; color: #fff; filter: drop-shadow(0 2px 8px rgba(60, 45, 100, 0.4)); } .hm-pen { position: absolute; right: -88px; bottom: 8px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; color: #fff; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .hm-pen:active { transform: scale(0.9); } .hm-pen svg { width: 23px; height: 23px; } .hm-pen-plus { position: absolute; top: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #6a6c74; font-size: 14px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 3px 10px rgba(40, 35, 70, 0.3); } .hm-hint { margin-top: 16px; padding: 8px 16px; border-radius: 14px; font-size: 12px; color: rgba(255, 255, 255, 0.85); max-width: 320px; } /* --- Portale: Databeam & Brain --- */ .hm-portals { display: flex; gap: 12px; padding: 0 20px 16px; } .hm-portal { flex: 1; border-radius: 22px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; cursor: pointer; color: #fff; text-align: left; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .hm-portal:active { transform: scale(0.96); } .hm-orb { width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); position: relative; } .hm-orb svg { width: 20px; height: 20px; color: #fff; } .hm-portal-t { font-size: 14px; font-weight: 650; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hm-portal-s { font-size: 11px; color: rgba(255, 255, 255, 0.78); margin-top: 1px; } .hm-orb-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff8a4c; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(40, 35, 70, 0.4); } /* --- Bücherregal --- */ .hm-shelf-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 24px 10px; } .hm-shelf-head h3 { font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; margin: 0; color: rgba(255, 255, 255, 0.78); text-transform: uppercase; } .hm-count { font-size: 12px; color: rgba(255, 255, 255, 0.55); } .hm-shelf { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 100px; gap: 14px 12px; overflow-x: auto; padding: 6px 20px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hm-shelf::-webkit-scrollbar { display: none; } .hm-book { scroll-snap-align: start; cursor: pointer; border: none; background: none; padding: 0; text-align: left; color: #fff; font-family: inherit; } .hm-cover { height: 112px; width: 100px; border-radius: 8px 18px 18px 8px; position: relative; padding: 10px 10px 10px 16px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 5px 0 10px rgba(60, 45, 100, 0.14), 0 10px 26px rgba(40, 35, 70, 0.2); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .hm-book:active .hm-cover { transform: translateY(-5px) rotate(-1.5deg); } .hm-cover::before { /* Buchrücken-Falz */ content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: rgba(255, 255, 255, 0.45); box-shadow: -1.5px 0 3px rgba(60, 45, 100, 0.25); } /* zarte Pastell-Tönung pro Buch */ .hm-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--hm-tint, none); opacity: 0.5; mix-blend-mode: soft-light; } .hm-tint-0 { --hm-tint: linear-gradient(150deg, #ffd9a8, #ff9ad0); } .hm-tint-1 { --hm-tint: linear-gradient(150deg, #a8f0d8, #78c8f8); } .hm-tint-2 { --hm-tint: linear-gradient(150deg, #d8b8ff, #88a8ff); } .hm-tint-3 { --hm-tint: linear-gradient(150deg, #a8d8ff, #c8a0f0); } .hm-tint-4 { --hm-tint: linear-gradient(150deg, #ffb8c0, #ffd8a0); } .hm-tint-5 { --hm-tint: linear-gradient(150deg, #fff0b0, #a8e0c0); } .hm-emoji { font-size: 19px; filter: drop-shadow(0 1px 4px rgba(60, 45, 100, 0.3)); } /* Pin-Marke angepinnter Bücher (oben rechts auf dem Cover) */ .hm-pin { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.85); color: #7a5c28; box-shadow: 0 2px 8px rgba(40, 35, 70, 0.35); } .hm-pin svg { width: 11px; height: 11px; } .hm-title { font-size: 11.5px; font-weight: 650; line-height: 1.3; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .hm-when { font-size: 9.5px; color: rgba(255, 255, 255, 0.55); margin-top: 3px; } .hm-book.is-new .hm-cover { background: rgba(255, 255, 255, 0.07); border: 1.5px dashed rgba(255, 255, 255, 0.45); box-shadow: none; align-items: center; justify-content: center; } .hm-book.is-new .hm-cover::before, .hm-book.is-new .hm-cover::after { display: none; } .hm-book.is-new .hm-cover span { font-size: 25px; color: rgba(255, 255, 255, 0.78); } .hm-shelf-empty { padding: 10px 24px 16px; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); } .hm-swipe { text-align: center; font-size: 10.5px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.4px; } .hm-swipe .arr { display: inline-block; animation: hm-nudge 2.4s ease-in-out infinite; } @keyframes hm-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } } /* --- Aufnahme-Overlay (Speech-to-Text) --- */ .hm-rec-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(30, 26, 50, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hm-rec { width: min(88vw, 380px); border-radius: 26px; padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .hm-rec-dot { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 45%), rgba(255, 120, 90, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.55); animation: hm-rec-pulse 1.6s ease-in-out infinite; } .hm-rec-dot svg { width: 30px; height: 30px; color: #fff; } @keyframes hm-rec-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 100, 0.45); } 50% { box-shadow: 0 0 0 18px rgba(255, 140, 100, 0); } } .hm-rec-label { font-size: 14px; font-weight: 650; } /* Spinner während der Whisper-Transkription */ .hm-rec-spin { width: 46px; height: 46px; border-radius: 50%; border: 3.5px solid rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.95); animation: hm-spin 0.8s linear infinite; } @keyframes hm-spin { to { transform: rotate(360deg); } } .hm-rec-text { min-height: 44px; max-height: 30dvh; overflow-y: auto; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); user-select: text; -webkit-user-select: text; } .hm-rec-text.placeholder { color: rgba(255, 255, 255, 0.5); } .hm-rec-actions { display: flex; gap: 10px; width: 100%; } .hm-rec-actions button { flex: 1; padding: 12px; border-radius: 15px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 650; color: #fff; } .hm-rec-save { background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.45); } .hm-rec-cancel { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); } /* ===== Desktop-Startseite (ab 900px; Klasse .is-desk wird per matchMedia gesetzt) ===== */ .hd-shell { position: relative; z-index: 2; height: 100dvh; max-width: 1560px; margin: 0 auto; display: flex; gap: 18px; padding: 18px; } /* --- Icon-Dock links --- */ .hd-dock { width: 68px; border-radius: 22px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 6px; } .hd-mark { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 17px; color: #ffcf9e; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); margin-bottom: 12px; } .hd-dock-btn { width: 46px; height: 46px; border-radius: 15px; border: none; background: transparent; color: rgba(255, 255, 255, 0.75); cursor: pointer; display: grid; place-items: center; position: relative; padding: 0; } .hd-dock-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .hd-dock-btn.on { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); } .hd-dock-btn svg { width: 21px; height: 21px; } .hd-badge { position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #ff8a4c; color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; } .hd-spacer { flex: 1; } .hd-avatar { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 14px; font-weight: 650; display: grid; place-items: center; padding: 0; } /* --- Hauptfläche --- */ .hd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .hd-top { display: flex; align-items: center; gap: 18px; } .hd-greet h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: 0.2px; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hd-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.78); margin-top: 2px; } .hd-search { flex: 1; max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 11px 16px; cursor: text; color: rgba(255, 255, 255, 0.55); } .hd-search svg { width: 16px; height: 16px; flex-shrink: 0; } .hd-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: #fff; } .hd-search input::placeholder { color: rgba(255, 255, 255, 0.55); } .hd-search kbd { font-size: 11px; color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; padding: 2px 7px; font-family: inherit; white-space: nowrap; } .hd-clock { text-align: right; font-size: 12px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; } .hd-clock b { display: block; font-size: 17px; color: #fff; font-weight: 650; } /* --- Reihe: Aufnahme + Portale --- */ .hd-row { display: grid; grid-template-columns: 330px 1fr 1fr; gap: 16px; } @media (max-width: 1180px) { .hd-row { grid-template-columns: 300px 1fr; } .hd-row .hd-portal:last-child { grid-column: 2; } } .hd-capture { border-radius: 24px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; } .hd-capture h2 { font-size: 17px; font-weight: 700; margin: 0; text-shadow: 0 1px 12px rgba(40, 35, 70, 0.35); } .hd-cap-s { font-size: 12px; color: rgba(255, 255, 255, 0.78); margin-bottom: 12px; } .hd-cap-btns { display: flex; align-items: center; gap: 18px; } /* Kompaktere Varianten der Handy-Buttons */ .hm-mic.hd-mic { width: 86px; height: 86px; } .hm-mic.hd-mic svg { width: 30px; height: 30px; } .hm-mic.hd-mic:hover { transform: scale(1.05); } .hm-pen.hd-pen { position: static; width: 52px; height: 52px; } .hm-pen.hd-pen:hover { transform: scale(1.07); } .hd-cap-hint { margin-top: 12px; font-size: 11px; color: rgba(255, 255, 255, 0.55); } .hd-cap-hint kbd { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; padding: 1px 5px; font-family: inherit; } .hd-capture .hm-hint { margin-top: 10px; padding: 6px 10px; } .hd-portal { border-radius: 24px; padding: 17px 19px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; color: #fff; text-align: left; font-family: inherit; transition: transform 0.22s ease; } .hd-portal:hover { transform: translateY(-3px); } .hd-p-head { display: flex; align-items: center; gap: 11px; } .hd-p-count { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 650; color: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 4px 10px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; } .hd-beam-files { display: flex; gap: 8px; min-height: 58px; } .hd-bf { flex: 1; height: 58px; border-radius: 12px; overflow: hidden; position: relative; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); } .hd-bf img { width: 100%; height: 100%; object-fit: cover; } .hd-bf.is-new::after { content: "NEU"; position: absolute; top: 3px; right: 3px; background: #ff8a4c; color: #fff; font-size: 8px; font-weight: 800; padding: 2px 5px; border-radius: 5px; } .hd-bf-empty { align-self: center; font-size: 12px; color: rgba(255, 255, 255, 0.55); } .hd-brain-mini { height: 58px; } .hd-brain-mini svg { width: 100%; height: 100%; } /* --- Bücherwand --- */ .hd-wall { flex: 1; min-height: 0; border-radius: 26px; padding: 18px 20px 20px; display: flex; flex-direction: column; } .hd-wall-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .hd-wall-head h3 { font-size: 12px; font-weight: 700; letter-spacing: 1.6px; margin: 0; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .hd-chips { display: flex; gap: 6px; margin-left: 14px; } .hd-chip { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.78); font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; cursor: pointer; } .hd-chip.on { background: rgba(255, 255, 255, 0.2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); } .hd-wall-count { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, 0.55); } .hd-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; align-content: start; padding: 4px 2px 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } /* Bücher füllen ihre Grid-Zelle (Handy-Regal nutzt feste 100px) */ .hd-grid .hm-cover { width: 100%; height: 128px; } .hd-grid .hm-title { font-size: 12.5px; } .hd-wall-empty { padding: 14px 4px 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); } /* --- Farbwelt-Auswahl in den Einstellungen --- */ .set-moods { display: flex; flex-wrap: wrap; gap: 8px; } .set-mood { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 12px; cursor: pointer; border: 1px solid var(--hair); background: var(--hair-soft); color: var(--ink); } .set-mood.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .set-mood-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; } .set-mood-dot.sw-grau { background: linear-gradient(140deg, #ff9646 30%, #4c4e54 60%); } .set-mood-dot.sw-flieder { background: linear-gradient(140deg, #b79ad0, #8fa8dc); } .set-mood-dot.sw-morgen { background: linear-gradient(140deg, #8fbce0, #ffecbe); } .set-mood-dot.sw-pfirsich { background: linear-gradient(140deg, #e0ac9a, #d0a0c0); } .set-mood-dot.sw-polar { background: linear-gradient(140deg, #d66ec4 0%, #5f6cbc 45%, #34e1b2 100%); } .set-mood-dot.sw-dunkel { background: linear-gradient(140deg, #6850be 25%, #12122a 60%); } .login-screen { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .login-card { width: 100%; max-width: 380px; background: var(--glass-side); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border: 1px solid var(--hair-soft); border-radius: 22px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 0 var(--hair), 0 18px 50px rgba(15, 15, 35, 0.3); color: var(--ink); } .login-brand { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .login-sub { margin: -6px 0 4px; color: var(--muted); font-size: 13px; } .login-tabs { display: flex; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 4px; gap: 4px; } .login-tabs button { flex: 1; border: none; background: transparent; color: var(--muted); padding: 9px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .login-tabs button.active { background: rgba(255, 255, 255, 0.18); color: var(--ink); box-shadow: inset 0 1px 0 var(--hair); } .field { display: flex; flex-direction: column; gap: 5px; } .field span { font-size: 12px; font-weight: 600; color: var(--muted); } .field input { background: rgba(255, 255, 255, 0.09); border: 1px solid var(--hair-soft); border-radius: 10px; padding: 11px 12px; font-size: 16px; /* >=16px verhindert Auto-Zoom auf iOS */ color: var(--ink); outline: none; } .field input::placeholder { color: var(--faint); } .field input:focus { border-color: var(--accent); } .login-error { background: rgba(226, 112, 95, 0.22); color: #ffd9cf; font-size: 13px; padding: 9px 11px; border-radius: 10px; } .login-info { background: rgba(255, 255, 255, 0.09); color: var(--muted); font-size: 13px; padding: 9px 11px; border-radius: 10px; } .login-submit:disabled { opacity: 0.6; cursor: default; } .login-submit { margin-top: 4px; background: rgba(255, 255, 255, 0.24); color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 650; cursor: pointer; box-shadow: inset 0 1px 0 var(--hair); } .login-submit:hover { background: rgba(255, 255, 255, 0.32); } .login-hint { font-size: 11px; color: var(--muted); line-height: 1.5; text-align: center; margin-top: 4px; } /* ===== Zen-Layout ===== */ .zen-root { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; /* App-Rahmen nicht markierbar → Strg+A / Auswahl betrifft nur den Notiz-Inhalt */ user-select: none; -webkit-user-select: none; } /* Markierbar bleiben: Notiz-Text, Titel und Eingabefelder */ .editor .ProseMirror, .note-title-input, input, textarea { user-select: text; -webkit-user-select: text; } /* Untere Leiste der Übersicht: Sync-Status + Theme-Umschalter */ .zen-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px 2px; border-top: 1px solid var(--hair-soft); flex-shrink: 0; } /* --- Header (schlicht, ohne Ampel-Punkte) --- */ .zen-header { flex: 0 0 auto; height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; display: flex; align-items: center; justify-content: space-between; background: var(--glass-side); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border-bottom: 1px solid var(--hair-soft); z-index: 30; } .zen-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; } .zen-spark { color: var(--accent); font-size: 16px; } .zen-header-right { display: flex; align-items: center; gap: 14px; } .zen-sync { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); } .zen-sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 9px var(--sage); } /* Offline / Warteschlange: bernsteinfarbener Punkt */ .zen-sync-dot.is-off { background: #eec27a; box-shadow: 0 0 9px #eec27a; } .zen-theme { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; } .zen-theme:hover { background: var(--hair-soft); } /* --- Body: Seitenleiste (Glas) + Schreibfläche (Verlauf sichtbar) --- */ .zen-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } .sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px; background: var(--glass-side); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); border-right: 1px solid var(--hair-soft); box-shadow: inset 0 1px 0 var(--hair); overflow: hidden; } .new-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--hair-soft); border: 1px solid var(--hair); color: var(--ink); border-radius: 12px; padding: 11px 12px; font-size: 14px; font-weight: 500; cursor: pointer; flex-shrink: 0; } .new-btn:hover { background: var(--hair); } .new-btn kbd { font-size: 10px; color: var(--faint); border: 1px solid var(--hair); border-radius: 5px; padding: 1px 5px; } .new-btn.big { font-size: 15px; padding: 13px 22px; margin-top: 14px; background: var(--accent-soft); border-color: transparent; color: var(--accent); } .search { background: rgba(255, 255, 255, 0.1); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink); outline: none; flex-shrink: 0; } .search::placeholder { color: var(--faint); } .search:focus { border-color: var(--accent); } .note-list { flex: 1 1 auto; min-height: 0; /* erlaubt echtes Scrollen statt über den Rand zu wachsen */ overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; } .empty-hint { color: var(--faint); font-size: 13px; padding: 10px 8px; } /* Notiz-Kacheln: halbtransparent OHNE Blur (Performance bei langen Listen). */ .note-row { position: relative; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .note-row-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: none; background: #e2705f; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; } .note-item { position: relative; padding: 11px 12px; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.07); border: 1px solid transparent; touch-action: pan-y; } .note-item:hover { background: rgba(255, 255, 255, 0.12); } .note-item.is-active { background: rgba(255, 255, 255, 0.16); border-color: var(--hair); box-shadow: inset 0 1px 0 var(--hair), 0 6px 20px rgba(20, 20, 40, 0.22); } .note-item.is-active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; background: var(--accent); } .note-title { font-family: var(--font-doc); font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 34px; } /* Kleine Pin-Marke vor dem Titel angepinnter Notizen */ .note-pin-mark { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--accent); } .note-pin-mark svg { width: 13px; height: 13px; } .note-meta { font-size: 11px; color: var(--faint); margin-top: 3px; } /* PC-Löschen: klarer Button beim Drüberfahren (am Handy ausgeblendet → dort Swipe). */ .note-del { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.1); color: var(--muted); cursor: pointer; font-size: 13px; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 8px; opacity: 0; transition: opacity 0.12s; } .note-item:hover .note-del { opacity: 1; } .note-del:hover { background: #e2705f; color: #fff; border-color: transparent; } /* Anpinnen: unten rechts in der Kachel; am PC beim Hovern, angepinnt immer sichtbar. */ .note-pin { position: absolute; bottom: 8px; right: 8px; border: none; background: transparent; color: var(--faint); cursor: pointer; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 8px; opacity: 0; transition: opacity 0.12s; } .note-pin svg { width: 15px; height: 15px; } .note-item:hover .note-pin { opacity: 1; } .note-pin.is-on { opacity: 1; color: var(--accent); } .note-pin:hover { background: rgba(255, 255, 255, 0.14); color: var(--ink); } .note-pin.is-on:hover { color: var(--accent); } .account { display: flex; align-items: center; gap: 8px; padding: 10px 6px 2px; border-top: 1px solid var(--hair-soft); flex-shrink: 0; } .account-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .account-text { min-width: 0; } .account-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-mail { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logout-btn { flex-shrink: 0; border: 1px solid var(--hair); background: transparent; color: var(--muted); font-size: 12px; padding: 6px 10px; border-radius: 9px; cursor: pointer; } .logout-btn:hover { background: var(--hair-soft); color: var(--ink); } /* --- Schreibfläche: Verlauf ringsum sichtbar, zentriertes Glas-Blatt --- */ .main { flex: 1; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; position: relative; } .welcome { margin: auto; text-align: center; color: var(--muted); max-width: 420px; padding: 24px; } .welcome h1 { font-family: var(--font-doc); color: var(--ink); font-size: 32px; font-weight: 600; margin-bottom: 8px; } .editor-wrap { width: calc(100% - 28px); max-width: 1500px; margin: 16px auto 40px; min-height: calc(100% - 64px); /* Blatt füllt die Höhe – kein leerer Schirm darunter */ background: var(--glass-page); backdrop-filter: blur(calc(var(--blur) + 4px)) saturate(150%); -webkit-backdrop-filter: blur(calc(var(--blur) + 4px)) saturate(150%); border: 1px solid var(--hair-soft); border-radius: 20px; box-shadow: inset 0 1px 0 var(--hair), 0 24px 64px rgba(15, 15, 35, 0.3); display: flex; flex-direction: column; } .note-title-input { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 36px 44px 4px; border: none; outline: none; resize: none; overflow: hidden; background: transparent; color: var(--ink); font-family: var(--font-doc); font-size: 32px; font-weight: 600; line-height: 1.2; } .note-title-input::placeholder { color: var(--faint); } /* Bubble-Menü – Glas-Pille, erscheint nur über markiertem Text. */ .bubble { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; max-width: min(92vw, 560px); background: var(--glass-pop); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 4px; box-shadow: inset 0 1px 0 var(--hair-soft), 0 12px 32px rgba(15, 15, 35, 0.4); } .bubble-btn { flex: 0 0 auto; border: none; background: transparent; color: var(--ink); min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px; cursor: pointer; font-size: 13.5px; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); white-space: nowrap; } .bubble-btn:hover { background: var(--hair-soft); } .bubble-btn.is-active { background: var(--accent-soft); color: var(--accent); } .bubble-btn.danger { color: #d98a6f; } .bubble-btn.danger:hover { background: rgba(217, 138, 111, 0.16); } .bubble-sep { flex: 0 0 auto; width: 1px; height: 18px; background: var(--hair); margin: 0 3px; } /* Slash-Menü – Glas-Popup zum Einfügen von Blöcken. */ .slash-menu { position: absolute; z-index: 100; min-width: 230px; max-height: 320px; overflow-y: auto; background: var(--glass-pop); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--hair-soft); border-radius: 14px; padding: 6px; box-shadow: inset 0 1px 0 var(--hair-soft), 0 18px 44px rgba(15, 15, 35, 0.45); } .slash-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; color: var(--ink); padding: 9px 11px; border-radius: 9px; cursor: pointer; font-family: var(--font-ui); font-size: 14px; } .slash-item:hover, .slash-item.is-sel { background: var(--hair-soft); } .slash-item.is-sel { box-shadow: inset 2.5px 0 0 var(--accent); } .slash-title { font-weight: 500; } .slash-hint { color: var(--faint); font-size: 12px; } .slash-empty { color: var(--faint); font-size: 13px; padding: 9px 11px; } /* Aktionsleiste über der Handy-Tastatur */ .kbbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; align-items: center; gap: 3px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none; background: rgba(30, 32, 50, 0.88); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-top: 1px solid var(--hair-soft); } .kbbar::-webkit-scrollbar { display: none; } .kbbar-btn { flex: 0 0 auto; border: none; background: var(--hair-soft); color: var(--ink); min-width: 40px; height: 38px; padding: 0 12px; border-radius: 9px; cursor: pointer; font-size: 15px; font-family: var(--font-ui); white-space: nowrap; } .kbbar-btn.is-active { background: var(--accent-soft); color: var(--accent); } .kbbar-spacer { flex: 1 0 8px; } /* Menüband – schwebt am rechten Rand, erscheint beim Hovern (nur Desktop). */ .ribbon { position: fixed; right: 8px; top: 50%; transform: translateY(-50%) translateX(10px); z-index: 60; display: flex; flex-direction: column; gap: 1px; padding: 5px; background: var(--glass-pop); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid var(--hair-soft); border-radius: 14px; box-shadow: inset 0 1px 0 var(--hair-soft), 0 14px 36px rgba(15, 15, 35, 0.4); opacity: 0.2; transition: opacity 0.18s ease, transform 0.18s ease; } .ribbon:hover { opacity: 1; transform: translateY(-50%) translateX(0); } .rib-btn { border: none; background: transparent; color: var(--ink); min-width: 66px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: var(--font-ui); white-space: nowrap; } .rib-btn:hover { background: var(--hair-soft); } .rib-btn.is-active { background: var(--accent-soft); color: var(--accent); } .rib-sep { height: 1px; background: var(--hair); margin: 4px 6px; } @media (max-width: 720px) { .ribbon { display: none; } } /* Zeichen-Pad */ .draw-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; } .draw-modal { width: min(1000px, 96vw); background: var(--glass-page); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--hair); border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); overflow: hidden; display: flex; flex-direction: column; } .draw-tools { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--hair-soft); flex-wrap: wrap; } .draw-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hair); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .draw-color.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .draw-color.eraser { background: transparent; color: var(--muted); font-size: 14px; } .draw-sep { width: 1px; height: 22px; background: var(--hair); margin: 0 2px; } .draw-btn { border: 1px solid var(--hair); background: transparent; color: var(--ink); padding: 7px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; font-family: var(--font-ui); } .draw-btn:hover { background: var(--hair-soft); } .draw-btn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .draw-btn.primary { background: var(--accent); color: var(--accent-on); border-color: transparent; font-weight: 600; } .draw-canvas { display: block; width: 100%; height: min(60vh, 60vw); background: #fff; touch-action: none; cursor: crosshair; } .editor { padding: 18px 0 64px; } .editor .ProseMirror { width: 100%; box-sizing: border-box; padding: 0 44px; outline: none; font-family: var(--font-doc); font-size: 18px; line-height: 1.75; color: var(--ink); } .ProseMirror > * + * { margin-top: 0.7em; } .ProseMirror h1 { font-size: 1.7em; line-height: 1.25; margin-top: 1em; font-weight: 600; } .ProseMirror h2 { font-size: 1.4em; line-height: 1.3; margin-top: 1em; font-weight: 600; } .ProseMirror h3 { font-size: 1.18em; margin-top: 1em; font-weight: 600; } .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: var(--faint); pointer-events: none; height: 0; } .ProseMirror code { font-family: ui-monospace, monospace; background: rgba(15, 15, 35, 0.35); padding: 0.15em 0.35em; border-radius: 5px; font-size: 0.85em; } .ProseMirror pre { font-family: ui-monospace, monospace; background: rgba(15, 15, 35, 0.4); border: 1px solid var(--hair-soft); border-radius: 10px; padding: 12px 14px; overflow-x: auto; } .ProseMirror pre code { background: none; padding: 0; } .ProseMirror blockquote { border-left: 2.5px solid var(--accent); padding-left: 14px; color: var(--muted); font-style: italic; } .ProseMirror img { max-width: 100%; max-height: 60vh; width: auto; height: auto; border-radius: 12px; display: block; } .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--accent); } .ProseMirror ul[data-type="taskList"] { list-style: none; padding: 0; margin: 0; } .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 9px; margin: 3px 0; } .ProseMirror ul[data-type="taskList"] li > label { flex: 0 0 auto; margin: 0; margin-top: calc((1.75em - 17px) / 2); /* zentriert die 17px-Box exakt auf der ersten Textzeile */ user-select: none; line-height: 0; } .ProseMirror ul[data-type="taskList"] li > div { flex: 1 1 auto; min-width: 0; } .ProseMirror ul[data-type="taskList"] li > div > p { margin: 0; } .ProseMirror ul[data-type="taskList"] li > div > * + * { margin-top: 0.3em; } /* Eigene Checkbox – plattformübergreifend identisch (iOS rendert die native sonst versetzt) */ .ProseMirror ul[data-type="taskList"] input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; border: 1.5px solid var(--faint); border-radius: 5px; background: transparent; cursor: pointer; position: relative; flex: 0 0 auto; } .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--accent-on); border-width: 0 2px 2px 0; transform: rotate(45deg); } .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--muted); text-decoration: line-through; } .ProseMirror table { border-collapse: collapse; width: 100%; margin: 10px 0; } .ProseMirror th, .ProseMirror td { border: 1px solid var(--hair); padding: 8px 11px; vertical-align: top; position: relative; } .ProseMirror th { background: rgba(255, 255, 255, 0.05); font-weight: 600; text-align: left; } .ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--accent-soft); pointer-events: none; } .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 3px; background: var(--accent); cursor: col-resize; } /* Mobile Kopfzeile (Zurück) – Desktop ausgeblendet */ .mobile-bar { display: none; } .back-btn { border: none; background: transparent; color: var(--accent); font-size: 15px; font-weight: 600; padding: 6px 8px; cursor: pointer; } .splash { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 18px; font-family: var(--font-ui); } .splash .logo { color: var(--accent); font-size: 22px; } /* ===== Mobil / iPhone ===== */ @media (max-width: 720px) { .zen-body { position: relative; } .sidebar { width: 100%; border-right: none; } .main { position: absolute; inset: 0; z-index: 20; background: var(--glass-page); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transform: translateX(100%); transition: transform 0.22s ease; display: block; } .zen-body.mobile-editor .main { transform: translateX(0); } .mobile-bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 6; padding: 6px 8px; background: rgba(255, 255, 255, 0.08); border-bottom: 1px solid var(--hair-soft); } .note-pin { opacity: 1; } /* am Handy immer sichtbar (kein Hover) */ .editor-wrap { max-width: none; margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 100%; } .note-title-input { padding: 18px 18px 4px; font-size: 27px; } .toolbar { padding: 8px 14px; } .editor { padding: 12px 0 calc(80px + env(safe-area-inset-bottom)); } .editor .ProseMirror { padding: 0 18px; font-size: 17px; } .tb-btn { min-width: 38px; height: 38px; font-size: 15px; } .search { font-size: 16px; } .note-del { display: none; } /* am Handy nur Swipe-to-Delete */ } /* ===== Reiter (Notizen · DataBeam · Brain) ===== */ .tabs { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 3px; flex-shrink: 0; box-shadow: inset 0 1px 0 var(--hair-soft); } .tab { flex: 1; border: none; background: transparent; color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; padding: 7px 4px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; } .tab:hover { color: var(--ink); } .tab.on { background: var(--accent-soft); color: var(--accent); } .tab-badge { background: var(--accent); color: var(--accent-on); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } /* ===== DataBeam ===== */ .beam { width: calc(100% - 28px); max-width: 1080px; margin: 0 auto; padding: 22px 4px 60px; position: relative; } .beam-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .beam-title { font-family: var(--font-doc); font-size: 26px; font-weight: 600; color: var(--ink); } .beam-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 62ch; line-height: 1.5; } .beam-upload-btn { flex-shrink: 0; background: var(--accent); color: var(--accent-on); border: none; border-radius: 11px; padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .beam-drop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px; border: 1.5px dashed var(--hair); border-radius: 16px; background: rgba(255, 255, 255, 0.07); color: var(--muted); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .beam-drop:hover { border-color: var(--accent); } .beam.is-drag .beam-drop { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .beam-drop-icon { color: var(--accent); display: flex; } .beam-drop-main { font-size: 15px; font-weight: 600; color: var(--ink); } .beam-drop-hint { font-size: 12px; color: var(--faint); } .beam-busy { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--accent); font-size: 13px; } .beam-spinner { width: 14px; height: 14px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: beam-spin 0.7s linear infinite; } @keyframes beam-spin { to { transform: rotate(360deg); } } .beam-empty { color: var(--faint); font-size: 14px; padding: 30px 6px; text-align: center; } .beam-newbar { margin-top: 16px; color: var(--accent); font-size: 12.5px; font-weight: 600; } .beam-group { margin-top: 20px; } .beam-day { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 10px; font-weight: 600; } .beam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .beam-card { position: relative; border: 1px solid var(--hair-soft); border-radius: 14px; overflow: hidden; background: var(--glass-side); display: flex; flex-direction: column; } .beam-card.is-new { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); } .beam-new { position: absolute; top: 7px; left: 7px; z-index: 2; background: var(--accent); color: var(--accent-on); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 6px; } .beam-thumb { border: none; padding: 0; margin: 0; cursor: pointer; background: rgba(15, 15, 35, 0.22); height: 120px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .beam-thumb img { width: 100%; height: 100%; object-fit: cover; } .beam-glyph { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); } .beam-info { padding: 8px 9px 9px; } .beam-name { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .beam-meta { font-size: 11px; color: var(--faint); margin-top: 2px; } .beam-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.12s; } .beam-card:hover .beam-actions { opacity: 1; } .beam-act { width: 26px; height: 26px; border-radius: 7px; border: none; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; } .beam-act:hover { background: rgba(0, 0, 0, 0.72); } .beam-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.82); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; } .beam-lightbox img { max-width: 92vw; max-height: 80vh; border-radius: 10px; object-fit: contain; } .beam-lb-bar { display: flex; align-items: center; gap: 12px; } .beam-lb-name { color: #fff; font-size: 13px; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .beam-lb-btn { background: rgba(255, 255, 255, 0.16); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 13px; cursor: pointer; text-decoration: none; } .beam-lb-btn:hover { background: rgba(255, 255, 255, 0.28); } /* ===== Brain (Graph) ===== */ /* overflow:hidden verhindert Scrollbalken-Flackern (Canvas ist absolut = keine Layout-Rückkopplung). */ .brain { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; } .brain-head { margin: 14px 22px 4px; padding: 14px 18px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; border-radius: 20px; background: var(--glass-side); border: 1px solid var(--hair-soft); box-shadow: inset 0 1px 0 var(--hair), 0 12px 34px rgba(15, 15, 35, 0.18); backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%); } .brain-orb { width: 42px; height: 42px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); border: 1px solid var(--hair-soft); box-shadow: inset 0 1px 0 var(--hair); } .brain-orb svg { width: 21px; height: 21px; color: var(--ink); } .brain-head .beam-title { font-size: 19px; } .brain-head .beam-sub { max-width: 72ch; margin-top: 2px; font-size: 12.5px; } .brain-head code { background: rgba(255, 255, 255, 0.14); color: var(--ink); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; } .brain-count { margin-left: auto; flex-shrink: 0; font-size: 11.5px; font-weight: 650; color: var(--muted); border: 1px solid var(--hair-soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; background: rgba(255, 255, 255, 0.09); } .brain-canvas-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; } .brain-canvas { position: absolute; inset: 0; display: block; touch-action: none; } .brain-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } @media (max-width: 720px) { .brain-head { margin: 10px 14px 4px; padding: 12px 14px; } .brain-count { display: none; } } @media (max-width: 720px) { .beam { width: 100%; padding: 16px 14px 80px; } .beam-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .beam-actions { opacity: 1; } .beam-head { flex-direction: column; gap: 10px; } .brain-head { padding: 14px 16px 10px; } } /* ===== Einstellungen (Modal) ===== */ .icon-btn { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair); background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; } .icon-btn:hover { background: var(--hair-soft); color: var(--ink); } .set-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; } .set-modal { width: min(620px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--glass-page); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.7); overflow: hidden; } .set-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hair-soft); } .set-head h2 { font-family: var(--font-doc); font-size: 19px; font-weight: 600; color: var(--ink); margin: 0; } .set-x { border: none; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; } .set-x:hover { background: var(--hair-soft); color: var(--ink); } .set-body { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 26px; } .set-sec h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .set-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; background: var(--accent-soft); color: var(--accent); padding: 2px 7px; border-radius: 6px; } .set-hint { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; } .set-hint code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink); word-break: break-all; } .set-fresh { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .set-fresh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .set-fresh-top b { font-size: 13px; color: var(--ink); } .set-fresh-top span { font-size: 11px; color: var(--accent); } .set-tokenrow { display: flex; align-items: center; gap: 8px; } .set-tokenrow code { flex: 1; font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--ink); background: rgba(15, 15, 35, 0.35); padding: 8px 10px; border-radius: 8px; word-break: break-all; } .set-create { display: flex; gap: 8px; } .set-input { flex: 1; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--hair-soft); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--ink); outline: none; } .set-input:focus { border-color: var(--accent); } .set-input::placeholder { color: var(--faint); } .set-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--hair); background: var(--hair-soft); color: var(--ink); cursor: pointer; white-space: nowrap; } .set-btn.primary { background: var(--accent); color: var(--accent-on); border-color: transparent; } .set-btn:disabled { opacity: 0.55; cursor: default; } .set-copy { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--hair-soft); background: rgba(255, 255, 255, 0.1); color: var(--ink); cursor: pointer; white-space: nowrap; } .set-copy:hover { background: rgba(255, 255, 255, 0.18); } .set-error { color: #e2705f; font-size: 12.5px; margin-top: 8px; } .set-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--muted); cursor: pointer; } .set-check b { color: var(--ink); font-weight: 600; } .set-check input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 1px 0 0; border: 1.5px solid var(--hair); border-radius: 5px; background: rgba(255, 255, 255, 0.08); cursor: pointer; position: relative; flex: 0 0 auto; } .set-check input:checked { background: var(--accent); border-color: var(--accent); } .set-check input:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--accent-on); border-width: 0 2px 2px 0; transform: rotate(45deg); } .set-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .set-muted { color: var(--faint); font-size: 13px; padding: 4px 2px; } .set-token { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--hair-soft); border-radius: 11px; padding: 10px 12px; } .set-tname { font-size: 13px; font-weight: 500; color: var(--ink); } .set-tmeta { font-size: 11px; color: var(--faint); margin-top: 2px; } .set-revoke { flex-shrink: 0; font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--hair); background: transparent; color: var(--muted); cursor: pointer; } .set-revoke:hover { background: rgba(194, 97, 75, 0.16); color: #e2705f; border-color: transparent; } .set-code { position: relative; } .set-code pre { margin: 0; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.55; color: var(--ink); background: rgba(15, 15, 35, 0.35); border: 1px solid var(--hair-soft); border-radius: 12px; padding: 14px; overflow-x: auto; white-space: pre; } .set-code .set-copy { position: absolute; top: 8px; right: 8px; } /* ===== Papierkorb + Suche ===== */ .trash-link { flex-shrink: 0; display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; padding: 7px 8px; border-radius: 9px; cursor: pointer; } .trash-link:hover { background: var(--hair-soft); color: var(--ink); } .trash-badge { min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--hair); color: var(--muted); border-radius: 9px; } .note-snippet { font-size: 11.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .note-title mark, .note-snippet mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 1px; } .trash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .trash-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--hair-soft); border-radius: 11px; padding: 10px 12px; } .trash-info { min-width: 0; } .trash-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ===== Teilen & Anpinnen (schwebende Knöpfe oben rechts im Editor) ===== */ .fab-row { position: absolute; top: 14px; right: 22px; z-index: 6; display: flex; align-items: center; gap: 8px; } .share-fab { display: flex; align-items: center; gap: 6px; border: 1px solid var(--hair-soft); /* KEIN backdrop-filter: verschachtelt in .main (mobil) bricht das auf iOS Safari das Rendering. */ background: var(--glass-page); box-shadow: inset 0 1px 0 var(--hair-soft), 0 2px 12px -5px rgba(15, 15, 35, 0.45); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 10px; cursor: pointer; } .share-fab:hover { color: var(--ink); border-color: var(--hair); } .share-fab.is-on { color: var(--accent); border-color: var(--accent); } .pin-fab { padding: 7px 9px; } .pin-fab svg { width: 15px; height: 15px; } .share-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .share-toggle { flex-shrink: 0; width: 46px; height: 27px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.12); position: relative; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .share-toggle.on { background: var(--accent); border-color: transparent; } .share-toggle:disabled { opacity: 0.6; cursor: default; } .share-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .share-toggle.on .share-knob { transform: translateX(19px); } /* ===== Öffentliche Freigabe-/Rechtsseiten ===== */ .share-page, .legal-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: clamp(16px, 4vw, 48px) 16px 60px; } .share-sheet, .legal-sheet { width: 100%; max-width: 760px; background: var(--glass-page); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--hair-soft); border-radius: 18px; padding: clamp(22px, 4vw, 44px); color: var(--ink); } .share-title { font-family: var(--font-doc); font-size: clamp(24px, 4vw, 34px); font-weight: 600; margin: 0 0 18px; } .share-status { color: var(--muted); text-align: center; padding: 40px 0; } .share-status h1 { color: var(--ink); font-size: 22px; margin: 0 0 8px; } .share-page .editor { padding: 0; } .share-foot, .legal-foot { margin-top: 20px; display: flex; gap: 16px; font-size: 13px; } .share-foot { color: var(--faint); justify-content: center; } .share-foot a, .legal-foot a { color: var(--accent); text-decoration: none; } .legal-sheet h1 { font-family: var(--font-doc); font-size: clamp(24px, 4vw, 32px); font-weight: 600; margin: 0 0 18px; } .legal-sheet h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 24px 0 6px; } .legal-sheet p, .legal-sheet li { font-size: 14px; line-height: 1.65; color: var(--muted); } .legal-sheet ul { margin: 6px 0; padding-left: 20px; } .legal-sheet b { color: var(--accent); } .legal-note { background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; font-size: 13px !important; color: var(--ink) !important; margin: 0 0 8px; } .legal-note b { color: var(--accent); } .legal-foot { border-top: 1px solid var(--hair-soft); padding-top: 16px; } .login-legal { margin-top: 18px; display: flex; gap: 10px; justify-content: center; font-size: 12.5px; color: var(--faint); } .login-legal a { color: var(--muted); text-decoration: none; } .login-legal a:hover { color: var(--ink); } @media (max-width: 720px) { /* Auf Mobil KEINE schwebenden Buttons in .main (iOS-Safari-Renderbug mit backdrop-filter/transform) – stattdessen Pin + Teilen in der oberen Leiste. */ .fab-row { display: none; } } /* Pin- + Teilen-Knopf in der mobilen Leiste (nur mobil sichtbar, da .mobile-bar am Desktop ausgeblendet ist). */ .bar-actions { display: flex; align-items: center; gap: 2px; } .bar-share { border: none; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 8px; cursor: pointer; } .bar-share.is-on { color: var(--accent); } .bar-pin { border: none; background: transparent; color: var(--muted); padding: 6px 8px; cursor: pointer; display: flex; align-items: center; } .bar-pin svg { width: 17px; height: 17px; } .bar-pin.is-on { color: var(--accent); }