/* Mobiles Auto-Zoom der Schrift abschalten: ohne diese Festlegung blähen iOS/ Android die Schrift in manchen Layout-Clustern eigenmächtig auf (text-size- adjust:auto). Die Lese-Karten-Kopfzeile (Datum + Status-Icons in einer Zeile) ist so ein Cluster – ohne Pinning wirkt der Lesekarten-Text „gezoomt". 100% = genau die im CSS definierte Größe, kein Browser-Boosting. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* App-Shell: die SEITE selbst scrollt NIE. html/body sind fix auf Viewport- Höhe; nur der gerahmte Bereich (.tb-frame) scrollt intern. Der Kopf (Zurück, Titel, Monat/Woche, Wochentagsleiste) bleibt darüber fixiert. */ html.tb-standalone{overflow:hidden;position:fixed;width:100%;height:100%;height:100dvh;background:var(--color-bg)} /* Der In-Rahmen-Seitentitel „Dein Journal" nutzt Source Serif (--font-serif), passend zur Serif-Headline der Lesekarte. Body-Schrift bleibt Hanken (--font). --font-sans-display (Source Sans 3) bleibt als Token erhalten, falls anderswo gebraucht. */ :root{--font-sans-display:'Source Sans 3','Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} html.tb-standalone body{ font-family:var(--font); background:var(--color-bg); color:var(--color-text); position:fixed;inset:0;width:100%;height:100%;height:100dvh; overflow:hidden;overscroll-behavior:none; -webkit-font-smoothing:antialiased; line-height:1.6;font-size:16px; display:flex;flex-direction:column; } html.tb-standalone .pwa-status-scrim{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg) 70%,rgba(0,0,0,0) 100%);z-index:50;pointer-events:none} /* Viewport-hohe Spalte: fixer Kopf + Wochentagsleiste, darunter der scrollende Inhalts-Container. Die .page ist nur die transparente Layout-Spalte; die sichtbare Karte ist .tb-frame (App-Standard-Surface). --frame-inset/--cal-gutter halten Wochentagsleiste & Kalender bündig. */ html.tb-standalone .page{ flex:1 1 auto;min-height:0; display:flex;flex-direction:column; background:transparent;box-shadow:none;border-radius:0; width:100%;max-width:100%; /* Kein horizontales Wackeln: die Seite selbst darf NIE seitlich scrollen – der einzige horizontale Scroller ist die offene Wochen-Zeile. */ overflow-x:hidden; margin:0; /* Einheitlicher Seitenrand (App-Standard, --page-gutter): der weiße Rahmen (.tb-frame) fluchtet mit der Spalte von Profil, Wissen/Tracker und dem Dashboard-Feed. */ padding:calc(.6rem + env(safe-area-inset-top,0px)) var(--page-gutter) calc(.55rem + env(safe-area-inset-bottom,0px)); /* Innen-Polster der Karte = App-Konvention (Profil/Tracker nutzen 1.05rem). */ --frame-inset:1.05rem; /* Rechte Gutter-Spalte (Monats-Marker). Breiter (1.5rem statt 1.05rem), damit die Monatszahl klar RECHTS neben der letzten (So-)Spalte sitzt und sie nicht mehr berührt/überlappt. Weekdays-Leiste + Wochen-Raster nutzen denselben Wert als padding-right → Spalten-Ausrichtung bleibt exakt erhalten. Auf 1rem gestrafft (Raster breiter; Lücke So-Spalte↔Monatszahl nur noch ~3px), bleibt aber breit genug für eine 2-stellige Monatszahl ohne Überlapp. */ --cal-gutter:1rem; /* Akkordeon-Animationen: leicht snappy ease-out + konsistente Dauer. iOS-Safari mag transform/opacity + gemessene Pixel-Höhen (kein grid-rows-Trick). */ --cal-dur:.5s; --cal-ease:cubic-bezier(.16,1,.3,1); /* ZUKLAPPEN: eigener, sanfter ease-out-cubic (gleichmäßige Verzögerung mit weichem Auslauf am Ende, statt früh fertig + flachem Crawl wie --cal-ease). Etwas längere Dauer für ein gemütliches „Settle", aber noch snappy. */ --cal-dur-collapse:.58s; --cal-ease-out:cubic-bezier(.22,.61,.36,1); } /* Intern scrollender Inhalts-Bereich = normale App-Karte (Surface + Radius + Shadow, KEINE Fremd-Outline). Nur diese Zone scrollt; der Kopf bleibt fix. */ .tb-frame{ flex:1 1 auto;min-height:0; /* Der Rahmen selbst scrollt NICHT mehr: er ist eine Flex-Spalte aus einer fixen Kopfzone (flex-shrink:0) und einer scrollenden Body-Zone (flex:1). So bleibt der obere Bereich (Titel/Toggle + Streifen bzw. Wochentagsleiste) stehen, waehrend nur der untere Inhalt darunter scrollt. */ display:flex;flex-direction:column; overflow:hidden;overscroll-behavior:contain; background:var(--color-surface); border-radius:var(--radius); box-shadow:var(--shadow-sm); /* Seiten-/Oben-Polster wie die App-Karten (~.85rem oben / 1.05rem seitlich). Unten 0 – das FAB-Polster bringt die jeweils scrollende Body-Zone. */ padding:.85rem var(--frame-inset) 0; } /* In-Rahmen-Kopf bleibt fix; nur die jeweilige Body-Zone scrollt. */ .tb-inframe-head{flex:0 0 auto} /* Tages-Editor: eigene scrollende Body-Zone (FAB-Polster unten). */ #viewDay.active{ overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding-bottom:4.6rem; } /* Kalender: die EINZIGE Scroll-Zone ist .cal-scroll. Die Wochentagsleiste liegt DARIN und scrollt mit (nicht fixiert). FAB-Polster unten. */ #viewMonth .cal-scroll{ flex:1 1 auto;min-height:0; overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; /* Genug Boden, damit der letzte Inhalt (Legende) beim Hinunterscrollen KLAR über dem schwebenden Logo-FAB + seinem Blur-Scrim (≈5.5rem) endet. Das padding-bottom der SCROLL-ZONE zaehlt verlaesslich (anders als ein margin-bottom am letzten Kind, das Safari am Scroll-Ende verschluckt). */ padding-bottom:calc(9.5rem + env(safe-area-inset-bottom,0px)); /* AUSBRUCH auf die volle Rahmen-Breite: die Scroll-Zone reicht per negativem Seiten-Margin bis an die Surface-Kanten (–frame-inset) und holt das Polster als padding-inline zurueck. So bleibt der normale Inhalt (Wochentagsleiste, eingeklappte Wochen) buendig wie zuvor, aber die offene Wochen-Zeile kann mit –frame-inset bis an die Rahmenkante laufen, OHNE von .cal-scroll abgeschnitten zu werden (overflow-x:hidden klippt jetzt erst an der Kante). overflow-x:hidden bleibt → kein horizontales Seiten-Wackeln. */ margin-inline:calc(-1 * var(--frame-inset)); padding-left:var(--frame-inset); padding-right:var(--frame-inset); } /* ---- KOPF: identischer Zurück-Button + zentrierter Titel wie auf den anderen Seiten (Dashboard-Overlay / Profil). Reuse von .ex-overlay-head/-back/ -headtitle/-head-spacer (1:1 aus dashboard.html), damit es sich wie dieselbe App anfühlt. Rechts in der Übersicht die Monat/Woche-Pille, im Tag der Spacer. */ .ex-overlay-head{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:.5rem; flex-shrink:0;padding:.25rem .35rem .55rem; } .ex-overlay-back{ border:none;background:none;cursor:pointer; display:flex;align-items:center;gap:.3rem; color:var(--color-primary);font-size:.85rem;font-weight:500;font-family:var(--font); -webkit-tap-highlight-color:transparent;padding:.3rem 0; } .ex-overlay-back svg{width:18px;height:18px;stroke:var(--brand-purple);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ex-overlay-back:active{opacity:.6} /* Titel ROBUST zentriert: absolut auf die Header-Mitte gelegt, damit unter- schiedlich breite Seiten (Zurück links / Pille rechts) ihn nicht verschieben. */ .ex-overlay-headtitle{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); margin:0;max-width:58%;text-align:center;pointer-events:none; font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--color-text); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .ex-overlay-head-spacer{width:78px;flex-shrink:0} .tb-head--day .ex-overlay-headtitle.is-today{color:var(--color-primary)} /* ---- ANSICHTS-UMSCHALTUNG (Monat / Woche) – kompakte Pille rechts im Kopf ---- */ .tb-seg{ display:inline-flex;gap:.15rem;flex-shrink:0;z-index:2; background:var(--color-surface-2);border-radius:11px;padding:.2rem; } .tb-seg-btn{ border:none;border-radius:8px;background:transparent;cursor:pointer; padding:.34rem .62rem;font-family:var(--font);font-size:var(--text-caption);font-weight:700; letter-spacing:.07em;text-transform:uppercase; color:var(--color-text-muted);-webkit-tap-highlight-color:transparent; transition:background .18s,color .18s,box-shadow .18s; } .tb-seg-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .tb-seg-btn[aria-selected="true"]{ background:var(--color-primary);color:var(--color-on-primary); box-shadow:0 2px 8px rgba(var(--brand-primary-rgb),.30); } /* Bereichs-Umschalter im Kalender-Kopf (8-Wochen-Fenster ↔ ganzes Programm). */ .tb-cal-toggle{ flex-shrink:0;border:none;cursor:pointer; background:rgba(var(--brand-primary-rgb),.10);color:var(--color-primary); border-radius:11px;padding:.42rem .72rem; font-family:var(--font);font-size:var(--text-caption);font-weight:700; letter-spacing:.02em;-webkit-tap-highlight-color:transparent; transition:background .18s,color .18s,transform .12s,box-shadow .18s; } .tb-cal-toggle:hover{background:rgba(var(--brand-primary-rgb),.18)} .tb-cal-toggle:active{transform:scale(.96)} .tb-cal-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .tb-cal-toggle[aria-pressed="true"]{ background:var(--color-primary);color:var(--color-on-primary); box-shadow:0 2px 8px rgba(var(--brand-primary-rgb),.30); } /* Kompakter Expand-Icon-Button (oben rechts): schaltet Kurz- ↔ Vollkalender. Doppel-Chevron zeigt nach unten (aufklappen); im Voll-Zustand um 180° gedreht (einklappen). Dezent getintet, im aktiven Zustand gefüllte Markenfläche. */ .tb-cal-expand{ flex-shrink:0;border:none;cursor:pointer; width:38px;height:38px;border-radius:11px; display:inline-flex;align-items:center;justify-content:center; background:rgba(var(--brand-primary-rgb),.10);color:var(--color-primary); -webkit-tap-highlight-color:transparent; transition:background .18s,transform .12s,box-shadow .18s; } .tb-cal-expand:hover{background:rgba(var(--brand-primary-rgb),.18)} .tb-cal-expand:active{transform:scale(.94)} .tb-cal-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} /* Icon = maskiertes SVG (.ico), zustandsabhängig calendar-90 / calendar-45. currentColor erbt die Button-Farbe (primary bzw. on-primary im aktiven Zustand). */ .tb-cal-expand .ico{width:21px;height:21px} .tb-cal-expand[aria-pressed="true"]{ background:var(--color-primary);color:var(--color-on-primary); box-shadow:0 2px 8px rgba(var(--brand-primary-rgb),.30); } /* ---- ANSICHTEN ---- */ /* Aktive Ansicht = Flex-Spalte, die den Rahmen-Rest fuellt; darin trennen die Views selbst fixe Kopfteile (flex-shrink:0) von ihrer scrollenden Body-Zone. */ .tb-view{display:none} .tb-view.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;animation:tbFade .28s var(--ease-out)} @keyframes tbFade{from{opacity:0}to{opacity:1}} /* ---- ERST-EINFÜHRUNG (nur Erst-User, bis zum allerersten Eintrag) ---- Warme Einladung als eigener erster Screen; CTA öffnet den normalen Editor. */ /* Scrollbar, falls die Schrift vergrößert ist oder der Schirm kurz – der CTA bleibt so immer erreichbar (Bodenfreiheit für den darüberliegenden FAB). Ganze Fläche ist klickbar (öffnet den Editor) → cursor:pointer als Hinweis. */ .tb-intro.active{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;cursor:pointer} .tb-intro-inner{padding:.2rem .2rem 4.5rem;max-width:30rem;margin:0 auto;width:100%} /* SPEZIAL-SEITE (Erst-User ohne Eintrag): der Rahmen trägt den Schlaf-Verlauf (dunkel → hell, = Energie/„Schlaf-Katze"-Skala von Stufe 5 zu Stufe 1). Alle Texte/Icons darauf hell, damit sie lesbar bleiben. */ .tb-frame.tb-frame--intro{ background:linear-gradient(180deg, var(--energie-5) 0%, var(--energie-4) 26%, var(--energie-3) 52%, var(--energie-2) 78%, var(--energie-1) 100%); } .tb-frame--intro .tb-inframe-title{color:#fff} .tb-frame--intro .tb-day-pen{background:rgba(255,255,255,.18)} .tb-frame--intro .tb-day-pen:hover{background:rgba(255,255,255,.28)} .tb-frame--intro .tb-day-pen .ico{color:#fff} /* Tag/Übersicht-Umschalter auf dem Schlaf-Verlauf: helle, halbtransparente Leiste mit weißer Schrift (wie Chrome auf den farbigen Tagesseiten). */ .tb-frame--intro .tb-seg{background:rgba(255,255,255,.15)} .tb-frame--intro .tb-seg-btn{color:rgba(255,255,255,.82)} .tb-frame--intro .tb-seg-btn[aria-selected="true"]{background:rgba(255,255,255,.92);color:var(--color-primary-strong);box-shadow:0 2px 8px rgba(0,0,0,.18)} /* EDIT-FLÄCHE eingefärbt (Tagesfarbe via inline-background auf .tb-frame): Texte und Chrome werden hell, damit sie auf dem Verlauf tragen. Das Eingabefeld bleibt bewusst weiß (gute Tipp-Lesbarkeit); Stimmungs-Bänder sind ohnehin farbig. */ .tb-frame--edit .ex-overlay-back{color:#fff} .tb-frame--edit .ex-overlay-back svg{stroke:#fff} .tb-frame--edit .ex-overlay-headtitle{color:#fff} .tb-frame--edit .day-date{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.2)} .tb-frame--edit .composer-prompt{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)} .tb-frame--edit .tb-starter-label{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.18)} .tb-frame--edit .share-label{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.18)} .tb-frame--edit .share-auto{color:rgba(255,255,255,.7)} .tb-frame--edit .io-dictate-hint{color:rgba(255,255,255,.88)} .tb-frame--edit .mood-future-hint{color:rgba(255,255,255,.9)} /* Anregungs-Chips als helle, transluzente Pillen. */ .tb-frame--edit .tb-starter-chip{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)} .tb-frame--edit .tb-starter-chip:hover{background:rgba(255,255,255,.26)} .tb-frame--edit .tb-starter-chip.is-used{opacity:.5} /* Schreiben/Sprechen-Umschalter auf dem Verlauf: helle, transluzente Leiste. */ .tb-frame--edit .io-toggle{background:rgba(255,255,255,.16)} .tb-frame--edit .io-btn{color:#fff} .tb-frame--edit .io-btn:hover{background:rgba(255,255,255,.14)} .tb-frame--edit .io-btn.is-active{background:#fff;color:var(--color-primary-strong);box-shadow:0 2px 8px rgba(0,0,0,.18)} /* Privat-/Freigabe-Toggle: helle Outline in BEIDEN Zuständen, damit er sich auf der getönten Edit-Tagesfarbe immer abhebt (sonst verschwimmt der Token-Rand / die violette „an"-Fläche je nach Stimmungsfarbe). „an" behält die Markenfüllung. */ .tb-frame--edit .switch{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .tb-frame--edit .switch[aria-checked="true"]{background:var(--color-primary);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)} /* Bereits vorhandene Einträge (Zeit | Text) liegen direkt auf dem Verlauf → ebenfalls hell, sonst „verschwindet" die dunkle Schrift sobald eine Farbe steht. */ .tb-frame--edit .day-entry-text{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)} .tb-frame--edit .day-entry-time{color:rgba(255,255,255,.8)} .tb-frame--edit .day-entry:not(.day-entry--merk) .day-entry-time::after{color:rgba(255,255,255,.55)} .tb-frame--edit .day-entry.is-editable .day-entry-text:hover{background:rgba(255,255,255,.14)} .tb-frame--edit .day-entry.is-open .day-entry-text{background:rgba(255,255,255,.2)} .tb-frame--edit .day-entry-audiolabel{color:#fff} .tb-frame--edit .day-entry-audiomissing{color:rgba(255,255,255,.8)} .tb-frame--edit .entry-action.edit{background:rgba(255,255,255,.2);color:#fff} .tb-frame--edit .entry-action.edit:hover{background:rgba(255,255,255,.3)} /* Standard-Tagebuch-Icon (DIary.svg) – KEINE Quadrat-Box mehr; auf dem Verlauf hell. */ .tb-intro-top{margin:.6rem auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff} .tb-intro-bookico{width:68px;height:68px} .tb-intro-eyebrow{ text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:#fff;opacity:.92; } .tb-intro-title{ text-align:center;font-family:var(--font-serif);font-weight:500;font-size:1.6rem; line-height:1.18;color:#fff;margin:.25rem 0 .4rem;text-shadow:0 1px 3px rgba(0,0,0,.22); } .tb-intro-sub{ text-align:center;font-size:.94rem;line-height:1.55;font-weight:400; color:rgba(255,255,255,.92);margin:0 auto;max-width:26rem;text-shadow:0 1px 2px rgba(0,0,0,.18); } .tb-intro-list{display:flex;flex-direction:column;gap:.85rem;margin:1.2rem 0 0;text-align:left} .tb-intro-item{display:flex;gap:.8rem;align-items:flex-start} /* Feature-Glyphen hell, OHNE Quadrat-Box (war ein durchgerutschter Sonderfall). */ .tb-intro-ico{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;color:#fff;padding-top:.05rem} .tb-intro-ico svg{width:22px;height:22px;fill:currentColor} .tb-intro-itext{display:flex;flex-direction:column;gap:.12rem;font-size:.86rem;line-height:1.45} .tb-intro-itext b{font-weight:600;color:#fff} .tb-intro-itext span{color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(0,0,0,.16)} .tb-intro-cta{margin-top:1.6rem} /* Auf dem Schlaf-Verlauf wirkt der lila CTA zu dunkel → weißer Button mit dunkler Schrift/Stift (heller Akzent, hebt sich klar vom Verlauf ab). */ .tb-intro-cta .btn-primary{ font-size:1.04rem;padding:1.05rem 1rem; background:#fff;color:var(--color-primary-strong); box-shadow:0 6px 18px rgba(0,0,0,.22); } .tb-intro-cta .btn-primary:hover{background:rgba(255,255,255,.92);filter:none} .tb-intro-cta .btn-primary .ico{width:19px;height:19px} /* ---- KALENDER / NAVIGATION ---- */ .cal-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:1.1rem .1rem .8rem} .cal-month{font-family:var(--font);font-weight:700;font-size:1rem;color:var(--color-text);text-align:center;flex:1;text-transform:capitalize} .cal-nav-btn{ width:40px;height:40px;flex-shrink:0;border-radius:12px; border:none;background:rgba(var(--brand-primary-rgb),.10); color:var(--color-primary);cursor:pointer;-webkit-tap-highlight-color:transparent; display:inline-flex;align-items:center;justify-content:center; transition:background .18s,transform .12s; } .cal-nav-btn:hover{background:rgba(var(--brand-primary-rgb),.18)} .cal-nav-btn:active{transform:scale(.94)} .cal-nav-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .cal-nav-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Wochentagsleiste: liegt IM Rahmen, oben in der Monatsansicht. padding-right reserviert die Gutter-Spalte, damit die 7 Spalten exakt über dem Raster sitzen. */ .cal-weekdays{ display:grid;grid-template-columns:repeat(7,1fr);gap:.34rem; /* Gutter rechts EXPLIZIT (1rem) statt via var(--cal-gutter): die Custom-Property erreichte zur Laufzeit weder dieses Element noch das Wochen-Raster (gemessen leer) → der Shorthand kollabierte zu einem ABWEICHENDEN rechten Padding und die 7 Labels lagen versetzt zu den 7 Tagesspalten. Gleicher fester Wert wie .cal-week → exakte Spalten-Ausrichtung. */ padding:.15rem 1rem .4rem 0;margin-top:.2rem; } .cal-weekday{text-align:center;font-size:var(--text-caption);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-subtle);padding:.2rem 0} /* ===== AKKORDEON-KALENDER: vertikaler Stapel aus Wochen-Zeilen ===== Jede .cal-week ist ein 7-Spalten-Raster (gleiche Spaltenbreiten/Gaps wie die Wochentagsleiste darüber) plus rechts die KW-Nummer in der reservierten Gutter- Spalte (padding-right). Die offene Woche (.is-expanded) wird vergrößert und zeigt Mo–So-Labels; ihre Lesekarte folgt als .cal-panel direkt darunter. */ .cal-weeks{position:relative;max-width:100%} .cal-week{ position:relative; display:grid;grid-template-columns:repeat(7,1fr);gap:.34rem; /* Gutter rechts EXPLIZIT (1rem): siehe .cal-weekdays – var(--cal-gutter) kam zur Laufzeit nicht an, dadurch reservierte das Raster KEINEN Gutter und die Monatszahl klebte (0px) an der So-Spalte. Fester Wert = sichere Reservierung. */ padding-right:1rem; margin-bottom:.34rem; transition:margin .18s var(--ease-out); } /* ZUKLAPPEN (FLIP-Faltung): die Zeile ist bereits im kleinen Grid-Layout, ihre Höhe wird per Inline-Style vom großen auf den kleinen Wert geeast; overflow hidden kappt die (per transform) noch groß gestellten Zellen während sie in die kleine Zeile gleiten/schrumpfen. Kein opacity, kein Fade. */ .cal-week.is-folding{ overflow:hidden;z-index:2; transition:height var(--cal-dur-collapse) var(--cal-ease-out); } /* KW + Datumsbereich-Kopf ÜBER der offenen Woche (wie die alte Wochen-Ansicht). Trenner DARÜBER (gleiche dezente Linie wie der Badges-Trenner), damit der Kopf klar von der Wochen-Zeile darüber abgesetzt ist. */ .cal-week-head{ margin:.65rem .15rem .5rem; padding-top:.6rem; border-top:1px solid var(--color-border-subtle); font-family:var(--font);font-size:var(--text-small);font-weight:400; letter-spacing:.01em;color:var(--color-text-muted);text-align:center; font-variant-numeric:tabular-nums; transition:opacity var(--cal-dur) var(--cal-ease), transform var(--cal-dur) var(--cal-ease); } .cal-week-head.is-entering{opacity:0;transform:translateY(4px)} /* ===== Aufgeklappte Woche = großer, horizontal wischbarer 7-Tage-Streifen ===== Vorbild + Maße aus der alten 7-Tage-Schiene (1ebd341): Karten so breit, dass die Nachbarn am Rand angeschnitten sind, Scroll-Snap auf die mittige Karte. overflow-x:auto macht DIESE Zeile zum EINZIGEN horizontalen Scroller. VOLLE BREITE: per –frame-inset Seiten-Margin laeuft der Streifen edge-to-edge bis an die Rahmenkanten (kein Inset-Margin mehr). Da .cal-scroll selbst auf volle Rahmen-Breite ausbricht, wird hier nichts abgeschnitten. Damit ist 100% = volle Rahmen-Breite → die Karten-Basis fuellt den ganzen Rahmen. */ .cal-week.is-expanded{ --exp-gap:.5rem; /* Karten-Basis gegen die VOLLE (ausgebrochene) Breite → ca. 4 sichtbar: große Hochkant-Kacheln (gewählter Tag mittig, Nachbarn nur angeschnitten), im Geist des Referenz-Designs (IMG_8952), aber etwas mehr Kontext. Vorher /3.3 wirkte zu knapp, /5.3 war die Regression (zu viele kleine). */ --exp-card:calc((100% - 5 * var(--exp-gap)) / 4.0); display:flex;gap:var(--exp-gap);align-items:flex-start; grid-template-columns:none; z-index:2; /* über der faint Monats-Gutter-Spur */ margin:.15rem calc(-1 * var(--frame-inset)) .3rem; /* Ausbruch L/R + Luft unten */ padding:0 0 16px; /* keine Seiten-Polster; Platz für Abwärts-Nudge */ overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scroll-behavior:smooth; /* sanftes Gleiten zwischen Tagen */ overscroll-behavior-x:contain;scrollbar-width:none; } .cal-week.is-expanded::-webkit-scrollbar{display:none} /* Lead-/Trail-Spacer (Pseudo-Flex-Items), damit der ERSTE und LETZTE Tag mittig einrasten/zentriert werden koennen – analog den Randspacern der alten Schiene. */ .cal-week.is-expanded::before, .cal-week.is-expanded::after{ content:"";flex:0 0 calc(50% - var(--exp-card) / 2); } .cal-week.is-expanded .cal-cell{ flex:0 0 var(--exp-card); aspect-ratio:1/1.3;min-height:104px; scroll-snap-align:center; transition:opacity var(--cal-dur) var(--cal-ease), transform var(--cal-dur) var(--cal-ease); } /* Eintritts-Animation beim Aufklappen: Karten steigen kurz ein (maskiert den harten Layout-Wechsel grid→Streifen). */ .cal-week.is-expanded.is-entering .cal-cell{opacity:0;transform:translateY(8px) scale(.97)} .cal-week.is-expanded .cal-day{ border-radius:13px;box-shadow:0 5px 18px rgba(var(--shadow-color),.18); font-size:1.1rem; } /* Zukunfts-/Außerhalb-Zellen im Streifen behalten – wie in der eingeklappten Monats-Zeile – ihren OUTLINE-Rahmen (sonst „rahmenlos"/kaum wahrnehmbar, weil die obige Streifen-Regel sonst nur einen Schwebeschatten ohne Füllung setzt). Der Auswahl-Ring (.is-active::before) liegt darüber, wenn so ein Tag offen ist. */ .cal-week.is-expanded .cal-day.is-future{box-shadow:inset 0 0 0 1.5px var(--color-border)} .cal-week.is-expanded .cal-day.is-outside{box-shadow:none} /* Aktiver (offener) Tag: nach UNTEN versetzt (zeigt wie ein Reiter auf die Lesekarte), voll deckend (auch wenn die Zukunfts-Zelle sonst .5 gedimmt ist), und mit einem EIGENEN Auswahl-Ring als Overlay (::before). Der Ring liegt als separate Ebene über JEDER Zustands-Füllung – so ist er auf gefüllten (Verlauf) UND leeren/zukünftigen Outline-Zellen gleichermaßen sichtbar (ein reiner box-shadow würde von den Zustands-Regeln .is-future/.is-rated überschrieben). Brand-Violett + weicher Schein → klar abgesetzt vom „heute"-Ring; auf heute stapeln sich beide (äußerer Auswahl-Ring + innerer Heute-Ring). */ .cal-day.is-active{transform:translateY(8px);z-index:4;opacity:1 !important} .cal-day.is-active::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5; border:3px solid var(--brand-purple, var(--color-primary)); box-shadow:none; } .cal-day.is-active.is-rated::before{box-shadow:none} /* HELL-MODUS: die Schwebeschatten unter den Streifen-Tageskarten, der aktiven Karte und der Lesekarte werden vom overflow:hidden des horizontal scrollenden Streifens bzw. der Panels ABGESCHNITTEN und wirken „abgehackt". Daher im Hell-Modus entfernen (Dark-Mode unberührt). Die OUTLINE-Rahmen der Zukunfts-/ Außerhalb-Zellen und der Auswahl-Ring bleiben erhalten. */ :root:not([data-theme="dark"]) .cal-week.is-expanded .cal-day{box-shadow:none} :root:not([data-theme="dark"]) .cal-week.is-expanded .cal-day.is-future{box-shadow:inset 0 0 0 1.5px var(--color-border)} :root:not([data-theme="dark"]) .cal-week.is-expanded .cal-day.is-outside{box-shadow:none} :root:not([data-theme="dark"]) .cal-day.is-active.is-rated::before{box-shadow:none} /* Inline-Lesekarte (Akkordeon-Panel) direkt unter der offenen Woche – volle Breite, übernimmt die geteilte Lesekarten-Optik (.tb-readcard/.tb-badges). Auf-/Zuklappen wird sanft animiert über eine GEMESSENE Pixel-Höhe (JS misst scrollHeight → height) zusammen mit opacity + transform:translateY. Das ist auf iOS-Safari deutlich glatter als der frühere grid-template-rows-Trick. overflow:hidden kappt den Inhalt während der Höhen-Animation. */ .cal-panel{ /* z-index ÜBER der Gutter-Spur (.cal-gutter-track, z-index:1), damit die geöffnete Lesekarte die Monatszahlen klar VERDECKT statt von ihnen überlagert zu werden (position:relative aktiviert den Stapelkontext). */ position:relative;z-index:2; overflow:hidden;height:0;opacity:0;transform:translateY(-6px); margin:.3rem 0 .65rem; transition:height var(--cal-dur) var(--cal-ease), opacity calc(var(--cal-dur) * .85) var(--cal-ease), transform var(--cal-dur) var(--cal-ease); } .cal-panel.is-open{opacity:1;transform:translateY(0)} /* Inner trägt Innenabstände + den UNTEREN Trenner (Teil der gemessenen Höhe), damit jedes offene Tages-Panel oben (KW-Linie) wie unten einheitlich abgeschlossen ist – unabhängig von Badges. */ .cal-panel-inner{ min-height:0; padding:.15rem 0 1rem;border-bottom:1px solid var(--color-border-subtle); } /* Barrierefreiheit: Bei reduzierter Bewegung KEINE Akkordeon-/Slide-Animationen – Auf-/Zuklappen, Karten-Eintritt und horizontales Gleiten erfolgen sofort. (Das JS nutzt hier zusätzlich sofortiges, nicht „smooth" scrollen.) */ @media (prefers-reduced-motion: reduce){ .cal-panel, .cal-week-head, .cal-week.is-expanded{scroll-behavior:auto !important} .cal-panel, .cal-week-head, .cal-week.is-expanded .cal-cell{transition:none !important} } /* Zellen deutlich höher als breit (Hochformat) – wie im Mockup. Die Höhe ergibt sich aus der Spaltenbreite über aspect-ratio (1/1.32). */ .cal-cell{aspect-ratio:1/1.32;position:relative; /* min-width:0 + KEIN festes min-height – ZWINGEND für die Spalten-Ausrichtung: Als Grid-Item ist die Default-Mindestbreite „auto" = min-content. Ein festes min-height (früher 50px) erzeugt zusammen mit aspect-ratio eine implizite MINDESTBREITE (≈ min-height / 1.32 = 50/1.32 ≈ 37.9px). Sinkt die verfügbare Spaltenbreite darunter (schmaler Viewport ODER ein vom klassischen Scrollbalken verschmälerter Embed/#centerView), dann (a) dehnen die 1fr-Spalten der .cal-week auf diese Mindestbreite → das Raster läuft über sein padding-right (die Gutter-Spalte) hinaus, UND (b) die Zell-BOX bleibt 37.9px breit und ÜBERLÄUFT ihre (korrekte) Spalten- spur → Tagesfelder überlappen und sitzen rechts der Wochentagsleiste. Die Wochentagsleiste (.cal-weekday) hat kein min-* → sie schrumpft sauber. So drifteten Header, Raster und Monatszahl-Gutter auseinander (genau der gemeldete Bug, scrollbar-/breitenabhängig). min-width:0 hebt die Mindestbreite auf und das Weglassen des festen min-height verhindert die aspect-ratio-Rückrechnung auf die Breite → die Zelle ist exakt so breit wie ihre Spur und exakt wie die Wochentags- spalte. Pixelgenaue Ausrichtung von Header, Raster und Gutter bei JEDER Breite. Im aufgeklappten Flex-Streifen setzt .cal-week.is-expanded .cal-cell ohnehin eigene aspect-ratio/min-height (feste flex-basis, flex-shrink:0) → unberührt. */ min-width:0} .cal-day{ width:100%;height:100%;position:relative; display:flex;align-items:center;justify-content:center; border:none;border-radius:10px;background:var(--color-surface-2); font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--color-text-muted); cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .12s,box-shadow .15s,filter .15s; } .cal-day:hover{filter:brightness(.97)} .cal-day:active{transform:scale(.93)} .cal-day:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;z-index:2} /* Zustand 1 – VOR/AUSSERHALB Programm: ruhige, breite Schraffur, die das Zell- Rechteck „aufbricht". Die diagonalen Baender sind in der SEITEN-Hintergrund- farbe (--color-bg) gehalten und schneiden so durch eine dezente Surface-2- Grundfuellung – die Zelle wirkt geoeffnet/durchbrochen statt als harte Box. Groesserer Streifen-Rapport (period ~20px) → deutlich ruhiger als zuvor. Folgt ueber --color-bg automatisch Hell-/Dark-Mode. */ .cal-day.is-outside{ background-color:color-mix(in srgb, var(--color-surface-2) 50%, transparent); background-image:repeating-linear-gradient(45deg, var(--color-bg) 0, var(--color-bg) 7px, transparent 7px, transparent 20px); /* Vor-Programm-Tage ("noch nicht angemeldet") treten deutlich zurueck. */ color:var(--color-text-subtle);font-weight:600;opacity:.5;cursor:default; } /* Zustand 4 – ZUKUNFT (im Programm, nach heute): nur Outline + Tageszahl. Gesamte Zelle zusaetzlich ~50% reduziert (opacity:.5), damit „Zukunft" klar zurueckweicht – zusaetzlich zur ohnehin gefadeten Tageszahl. */ .cal-day.is-future{ background:transparent;box-shadow:inset 0 0 0 1px var(--color-border); color:var(--color-text-subtle);font-weight:600;cursor:default;opacity:.5; } /* Nicht-editierbare Zellen: keine Hover-/Press-Reaktion. */ .cal-day.is-outside:hover,.cal-day.is-future:hover{filter:none} .cal-day.is-outside:active,.cal-day.is-future:active{transform:none} /* Zustand 3 – MIT EINTRAG: VOLLFLÄCHIGER Energie→Stimmung-Verlauf. */ .cal-day.is-rated{color:#fff;font-weight:800} /* (Zustand 2 – im Programm, ≤ heute, kein Eintrag: dezentes Neutral = Basis.) */ /* Tageszahl OHNE jegliche kreisförmige/radiale Hinterlegung – schlicht. Auf Verlauf-Zellen (gewertet) bleibt sie über Gewicht + dezenten Schatten lesbar; auf Zukunfts- und leeren In-Programm-Tagen wird die Zahl gefadet. */ .cal-num{position:relative;z-index:1;font-weight:600} .cal-day.is-rated .cal-num{color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45)} .cal-day.is-future .cal-num, .cal-day.is-blank .cal-num{opacity:.4} /* EXPERIMENTELLES 3-Zeilen-Layout der GROSSEN Kacheln (nur aufgeklappter Streifen): Monatskürzel oben · Tageszahl mittig · Wochentag unten. Beide Labels (.cal-mtop, .cal-dow) sind absolut platziert, sodass die Zahl flex-zentriert in der Mitte bleibt. In der eingeklappten Monatszeile bleibt alles ausgeblendet → Raster und Seiten-Gutter unverändert. Leicht zu tweaken/reverten: nur diese Regeln. */ /* Monatskürzel je Zelle: standardmäßig versteckt; nur in der offenen Woche OBEN. top/bottom etwas nach INNEN gezogen (näher an die Zahl), Labels leicht transparenter → ruhige Sekundär-Info, Zahl bleibt Fokus. */ .cal-mtop{display:none} .cal-week.is-expanded .cal-mtop{ display:block;position:absolute;top:15px;left:0;right:0;z-index:3;pointer-events:none; text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--color-text-subtle);opacity:.65; } .cal-week.is-expanded .cal-day.is-rated .cal-mtop{color:rgba(255,255,255,.72);opacity:1} /* Wochentags-Label je Zelle: NUR in der aufgeklappten Woche sichtbar – jetzt UNTEN in der Kachel (vorher oben), passend zum 3-Zeilen-Layout. */ .cal-dow{display:none} .cal-week.is-expanded .cal-dow{ display:block;position:absolute;bottom:15px;left:0;right:0;z-index:3;pointer-events:none; text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--color-text-subtle);opacity:.65; } .cal-week.is-expanded .cal-day.is-rated .cal-dow{color:rgba(255,255,255,.72);opacity:1} /* In der offenen Woche tritt das Inline-Monatslabel (1. des Monats) zugunsten der neuen 3-Zeilen-Labels zurück. */ .cal-week.is-expanded .cal-mlabel{display:none} /* Tag mit Notiz aber ohne Bewertung: dezenter Punkt. */ .cal-day .cal-mark{ position:absolute;bottom:5px;left:50%;transform:translateX(-50%); width:5px;height:5px;border-radius:50%;background:var(--color-primary);opacity:.55; } /* Zustand „heute": somnovia-Akzent-Outline (Brand-Violett) mit kleinem Innen- Abstand zur Zellkante, damit sie über JEDER Füllung sauber liest (der Spalt zeigt die Füllung und trennt den Ring klar ab). Kein Gold mehr. */ .cal-day.is-today::after{ content:"";position:absolute;inset:3px;border-radius:10px;pointer-events:none;z-index:2; border:2.5px solid var(--color-primary); box-shadow:0 0 0 1px rgba(var(--surface-rgb),.55); } /* Monatslabel (z. B. „JUN") oben in der ersten Zelle des Monats – horizontal zentriert (ausmittig), nicht linksbuendig. Die faint Gutter-Zahl rechts bleibt. */ .cal-mlabel{ position:absolute;top:5px;left:0;right:0;z-index:3;pointer-events:none; text-align:center; font-size:.55rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--color-text-subtle); } /* Auf GEWERTETEN (farbig gefüllten) Tageskacheln liest das dunkle Subtle-Label – v. a. im Hell-Modus – schlecht. Daher dort weiß-transparent (wie die weißen Tageszahlen auf denselben Verlauf-Kacheln). Nicht-gewertete Zellen (Zukunft/ außerhalb/leer) behalten das dunkle Label, da Weiß auf ihrem hellen Grund verschwinden würde. Farbige Kacheln sind in beiden Modi farbig → keine Dark-Mode-Regression. */ .cal-day.is-rated .cal-mlabel{color:rgba(255,255,255,.7)} /* Faint Monatszahlen (06/07/08…) in der rechten Gutter-Spalte – als STICKY Abschnitts-Marker. Die Spur (.cal-gutter-track) liegt absolut in der rechten Gutter-Breite ueber die volle Rasterhoehe; je Monat ein Block, dessen Hoehe exakt dem vertikalen Monatsabschnitt entspricht (per JS gesetzt). Die Zahl darin klebt mit position:sticky;top:0 am oberen Rand des Scroll-Viewports (.tb-frame) und wird erst vom naechsten Monat hinausgeschoben. */ .cal-gutter-track{ position:absolute;top:0;right:0;bottom:0;z-index:1;pointer-events:none; /* Breite EXPLIZIT (1rem) statt var(--cal-gutter): die Property kaskadierte zur Laufzeit nicht hierher → die Spur hatte 0/auto Breite und die Zahl saß bei right:0 direkt an der So-Spalte. Gleicher Wert wie das padding-right des Rasters → die Zahl steht in der reservierten Gutter-Spalte. */ width:1rem; } .cal-monthblock{position:relative} .cal-monthnum{ position:sticky;top:0; /* RECHTSbündig in der (breiteren) Gutter-Spalte + kleiner Rechts-Abstand zur Rahmenkante → die Zahl sitzt klar rechts neben der letzten Spalte und überlappt die Tageszellen nicht mehr. Sticky-Tracking bleibt unberührt. */ display:block;width:100%;text-align:right;padding-top:5px;padding-right:.12rem; font-size:.6rem;font-weight:700;color:var(--color-text-subtle);opacity:.55; } /* Sanfter Hinweis für nicht-editierbare Tage (Zukunft / außerhalb Programm). */ .cal-hint{ margin:.7rem .2rem 0;text-align:center;font-size:var(--text-caption); color:var(--color-text-muted);min-height:1.1em; opacity:0;transition:opacity .2s; } .cal-hint.show{opacity:1} .cal-legend{ display:flex;flex-wrap:wrap;gap:.4rem .85rem;justify-content:center; /* Näher an den Kalender darüber gerückt; die FAB-Freihöhe kommt jetzt aus dem padding-bottom der Scroll-Zone (siehe .cal-scroll), nicht aus diesem Margin. */ margin:.55rem .2rem 0;padding-top:.9rem; border-top:1px solid var(--color-border-subtle); } .cal-legend-item{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-caption);color:var(--color-text-muted)} .cal-legend-dot{width:13px;height:13px;border-radius:5px;flex-shrink:0;background:var(--color-surface-2)} .cal-legend-dot.lg-outside{ background-color:color-mix(in srgb, var(--color-surface-2) 55%, transparent); background-image:repeating-linear-gradient(45deg, var(--color-border) 0, var(--color-border) 1.2px, transparent 1.2px, transparent 5px); } .cal-legend-dot.lg-grad{background:linear-gradient(135deg,var(--energie-2),var(--stimmung-4))} .cal-legend-dot.lg-future{background:transparent;box-shadow:inset 0 0 0 1.5px var(--color-border)} /* ---- WOCHE ---- */ .week-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem} .week-row{ display:flex;align-items:center;gap:.85rem;width:100%; padding:.7rem .85rem;border:none;border-radius:15px;cursor:pointer; background:var(--color-surface-2);text-align:left;-webkit-tap-highlight-color:transparent; transition:transform .12s,filter .15s; } .week-row:hover{filter:brightness(.98)} .week-row:active{transform:scale(.99)} .week-row:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .week-swatch{ width:46px;height:46px;flex-shrink:0;border-radius:13px; background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-subtle); } .week-swatch.is-rated{box-shadow:none} .week-dow{display:block;font-size:var(--text-caption);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-subtle)} .week-body{display:flex;flex-direction:column;min-width:0;flex:1} .week-row.is-today .week-dow{color:var(--color-primary)} .week-title{display:block;font-size:var(--text-body);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.15rem} .week-title.is-empty{color:var(--color-text-subtle);font-style:italic;font-weight:500} /* ---- DETAIL (bearbeiten) ---- */ .day-date{font-family:var(--font);font-weight:600;font-size:.95rem;letter-spacing:.01em;color:var(--color-text-muted);margin:1rem .1rem .35rem} .ed-label{font-size:var(--text-small);font-weight:600;color:var(--color-text);margin:1.35rem .1rem .55rem} .ed-label .ed-hint-inline{font-weight:400;color:var(--color-text-subtle);margin-left:.35rem} /* ---- Einheitliche Felder (Titel + Composer) mit Sichern-Icon IM Feld ---- */ .field-wrap{position:relative;margin:.65rem .1rem 0} .field-input{ width:100%;box-sizing:border-box; padding:.95rem 3.4rem .95rem 1.1rem; border:1px solid var(--color-border);border-radius:16px; background:var(--color-surface-2);color:var(--color-text); font-family:var(--font);font-size:16px;-webkit-appearance:none; transition:border-color .18s,background .18s,box-shadow .18s; } .field-input::placeholder{color:var(--color-text-subtle)} .field-input:focus{outline:none;border-color:var(--color-primary);background:var(--color-surface);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.14)} /* Editor-Titel = entdramatisiert: normale Body-Schrift (Hanken Grotesk, --font), 22px, regulär – wie die Dashboard-Fragen / normaler Eintragstext. Keine Headline. */ .title-input{font-family:var(--font);font-size:18px;font-weight:400} .title-input::placeholder{font-family:var(--font);font-weight:400} .composer-field{display:block;min-height:5.6rem;line-height:1.55;resize:vertical;max-height:16rem} .field-save{ position:absolute;top:.6rem;right:.6rem; width:40px;height:40px;border:none;border-radius:12px;cursor:pointer; background:rgba(var(--brand-primary-rgb),.12);color:var(--color-primary); display:inline-flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent; transition:background .18s,transform .12s,color .18s; } .field-save:hover{background:rgba(var(--brand-primary-rgb),.22)} .field-save:active{transform:scale(.92)} .field-save:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .field-save.active{background:var(--color-primary);color:var(--color-on-primary);box-shadow:0 2px 10px rgba(var(--brand-primary-rgb),.3)} /* Maskierte Icons (solide SVGs, mode-aware über currentColor eingefärbt) */ .ico{ display:inline-block;width:20px;height:20px;background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain;pointer-events:none; } .ico-floppy{-webkit-mask-image:url(/static/floppy-disk-solid.svg);mask-image:url(/static/floppy-disk-solid.svg)} /* ===== MOOD: zwei Skalen (Energie Blau/Cyan · Stimmung Violett/Rosé) ===== Auswahlphase (≥1 Skala offen): ZWEI getrennte gestapelte Karten – oben Energie, unten Stimmung. Offene Karte = leere Silhouette + ← → + Skalenname. Sind BEIDE gewählt: die Karten verschmelzen zu EINER Karte mit ZWEI klar getrennten Farbbändern (oben Energie, unten Stimmung) – KEIN verschmolzener Einzelverlauf. Jede Katze ist ein ziehbarer Thumb auf ihrem eigenen Vollpaletten-Verlauf (Stufe 1→5 = links→rechts): flüssiges Pointer-Dragging, Live-Update, Snap auf eine von 5 Stufen beim Loslassen. ← →/Tastatur bleiben als barrierearme Alternative (Track = role="slider", aria-valuetext). */ .mood-cards{margin:.95rem .1rem .2rem;display:flex;flex-direction:column;gap:.7rem} /* Hinweis für zukünftige Tage (ersetzt die Schlaf/Stimmung-Auswahl): ruhig, transparent, nicht fett – signalisiert, dass hier nur Notizen/Erinnerungen möglich sind. */ .mood-future-hint{ margin:.95rem .1rem .2rem; padding:.7rem .85rem; font-size:var(--text-small); font-weight:400; line-height:1.45; color:var(--color-text-muted); background:rgba(var(--brand-purple-rgb),.06); border-radius:14px; } /* Ein Farb-Band/-Karte: voller Skalen-Verlauf (1→5) als Hintergrund. */ /* Verlaufsrichtung: links = schlecht → rechts = gut. Da im Datenmodell Stufe 1 = bestes Befinden und Stufe 5 = schlechtestes ist, läuft die Palette hier bewusst 5→1 (schlechteste Farbe links, beste rechts). */ .mc-bar{position:relative;border-radius:18px;overflow:hidden;min-height:96px} .mc-bar[data-scale="energie"]{ background:linear-gradient(90deg,var(--energie-5),var(--energie-4),var(--energie-3),var(--energie-2),var(--energie-1)); } .mc-bar[data-scale="stimmung"]{ background:linear-gradient(90deg,var(--stimmung-5),var(--stimmung-4),var(--stimmung-3),var(--stimmung-2),var(--stimmung-1)); } /* Zusammengeführtes/fertiges Feld = EIN durchgehender Energie→Stimmung-Verlauf (135deg-Blend, IDENTISCH zur Kalender-/Streifen-Vorschau via dayGradient()). Der Verlauf liegt als Hintergrund auf .mc-blend (inline gesetzt); darüber stapeln sich zwei transparente Slider-Reihen (oben Energie, unten Stimmung), je mit einer ziehbaren Katze. Beim Ziehen wird der Blend live neu berechnet. */ .mc-merged{position:relative;border-radius:18px;overflow:hidden} .mc-blend{display:flex;flex-direction:column;min-height:184px} .mc-brow{position:relative;flex:1 1 0;min-height:92px} /* Ziehfläche (role=slider) füllt das Band; Pfeile liegen darüber. */ .mc-track{position:absolute;inset:0;touch-action:pan-y;cursor:default;z-index:1} .mc-track:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:16px} .mc-bar--read .mc-track{cursor:default;pointer-events:none} /* Katze = Thumb (folgt dem Finger), Label direkt darunter. NUR die Katze ist greifbar (pointer-events:auto); ein Tippen/Wischen neben der Katze verstellt nichts. touch-action:none → horizontales Ziehen der Katze scrollt die Seite nicht. */ .mc-thumb{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); display:flex;flex-direction:column;align-items:center;gap:.28rem; pointer-events:auto;touch-action:none;cursor:grab;z-index:2;transition:left .16s var(--ease-out); } .mc-bar.is-dragging .mc-thumb,.mc-brow.is-dragging .mc-thumb{transition:none;cursor:grabbing} .mc-bar--read .mc-thumb{pointer-events:none;cursor:default} .mc-cat{ width:54px;height:54px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:rgba(var(--white-rgb),.6);box-shadow:0 2px 10px rgba(0,0,0,.22); } .mc-cat img{width:82%;height:82%;object-fit:contain} .mc-cat.is-silhouette{background:rgba(var(--white-rgb),.18);box-shadow:none} .mc-cat.is-silhouette img{filter:brightness(0) opacity(.78)} .mc-label{ font-size:.8rem;font-weight:700;letter-spacing:.01em;white-space:nowrap; color:rgba(20,16,40,.86);text-shadow:0 1px 2px rgba(var(--white-rgb),.5); } /* ← →-Pfeile (nur in den getrennten Auswahl-Karten). */ .mc-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:40px;height:40px;border:none;border-radius:50%;cursor:pointer; background:rgba(var(--white-rgb),.26);color:#fff; display:inline-flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s; } .mc-arrow-prev{left:.55rem} .mc-arrow-next{right:.55rem} .mc-arrow:hover{background:rgba(var(--white-rgb),.4)} .mc-arrow:active{transform:translateY(-50%) scale(.9)} .mc-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px} .mc-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* Sichtbarkeits-Helfer für die eine Tagesansicht (Read/Edit teilen sich Markup) */ [hidden]{display:none !important} /* Titel als Überschrift (READ-Modus) – reguläre Stärke (400), wie die Lesekarten- und Tracker-Headline; Bold bei Headlines bewusst vermeiden. */ .day-read-title{font-family:var(--font-serif);font-weight:400;font-size:1.55rem;line-height:1.2;color:var(--color-primary);margin:.5rem .1rem .4rem} .day-read-title.is-empty{color:var(--color-text-subtle);font-style:italic;font-weight:400} /* READ-Modus: dasselbe zweibändige Farbfeld (Energie/Stimmung) wie der Editor, nur nicht-interaktiv (Katzen an ihrer Position + Label). Keine Chips mehr. */ .read-moods{margin:.55rem .1rem 1.1rem} /* ---- TAGES-TEXT: gespeicherte Einträge als Lese-Absätze (geteilte Optik) ---- */ .day-body{font-family:var(--font);font-size:var(--text-body);line-height:1.6;color:var(--color-text);margin-top:.5rem} .day-empty{font-style:italic;color:var(--color-text-subtle);margin:.3rem .1rem} .day-entry{position:relative;margin:0 0 .7rem} .day-entry:last-child{margin-bottom:0} .day-entry-time{display:block;font-family:var(--font);font-size:var(--text-caption);color:var(--color-text-subtle);font-variant-numeric:tabular-nums;margin-bottom:.18rem} .day-entry-text{white-space:pre-wrap;word-break:break-word} /* Normale Text-Einträge im Edit kompakt wie in der Lese-/Detailansicht: Zeit als Inline-Präfix + „|"-Trenner, Text fließt direkt dahinter (statt Zeit-Zeile + Leerzeile + Text + Leerzeile). Merk-Einträge (Bild/Zitat/Ref) bleiben Block. */ .day-entry:not(.day-entry--merk) .day-entry-time{display:inline;font-size:.82rem;margin:0} .day-entry:not(.day-entry--merk) .day-entry-time::after{content:"|";color:var(--color-text-subtle);margin:0 .25rem 0 .25rem} .day-entry:not(.day-entry--merk) .day-entry-text{display:inline;line-height:1.5} /* Im EDIT-Modus: Absatz antippbar → enthüllt Ändern/Löschen */ .day-entry.is-editable .day-entry-text{ cursor:pointer;border-radius:8px;padding:.12rem .35rem;margin:0 -.35rem; transition:background .15s; } .day-entry.is-editable .day-entry-text:hover{background:rgba(var(--brand-primary-rgb),.07)} .day-entry.is-editable .day-entry-text:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .day-entry.is-open .day-entry-text{background:rgba(var(--brand-primary-rgb),.10)} .day-entry-actions{display:none;gap:.45rem;margin-top:.55rem} .day-entry.is-open .day-entry-actions{display:flex;animation:tbFade .2s var(--ease-out)} .entry-action{ display:inline-flex;align-items:center;gap:.4rem; border:none;border-radius:11px;cursor:pointer; padding:.45rem .8rem;font-family:var(--font);font-size:var(--text-caption);font-weight:700; -webkit-tap-highlight-color:transparent;transition:background .15s,filter .15s,transform .12s; } .entry-action:active{transform:scale(.96)} .entry-action:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .entry-action svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .entry-action.edit{background:rgba(var(--brand-primary-rgb),.12);color:var(--color-primary)} .entry-action.edit:hover{background:rgba(var(--brand-primary-rgb),.20)} .entry-action.del{background:color-mix(in srgb, var(--journal-danger) 16%, transparent);color:var(--journal-danger)} .entry-action.del:hover{background:color-mix(in srgb, var(--journal-danger) 26%, transparent)} .entry-action.save{background:var(--color-primary);color:var(--color-on-primary)} .entry-action.save:hover{filter:brightness(1.06)} .entry-action.cancel{background:var(--color-surface-2);color:var(--color-text-muted)} .entry-action.cancel:hover{background:rgba(var(--brand-primary-rgb),.10);color:var(--color-primary)} /* Inline-Bearbeitung eines vorhandenen Eintrags */ .entry-edit{margin:.1rem 0 .2rem} .entry-edit-field{ width:100%;box-sizing:border-box;min-height:4.5rem;resize:vertical; padding:.7rem .85rem;border:1px solid var(--color-primary);border-radius:13px; background:var(--color-surface);color:var(--color-text); font-family:var(--font);font-size:16px;line-height:1.55;-webkit-appearance:none; } .entry-edit-field:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.15)} .entry-edit-actions{display:flex;gap:.45rem;margin-top:.5rem} /* ---- EINGABEART-UMSCHALTER: T · Mikro · Kamera · Ort (segmentiert) ---- */ /* Eingabeart-Toggle „Schreiben | Sprechen": beschriftete Segmente. Aktiv = solide Markenfläche (klar abgesetzt, weiße Schrift); inaktiv = Markenfarbe auf heller Segment-Fläche – kein Grau-in-Grau. */ .io-toggle{ display:inline-flex;align-self:flex-start;width:max-content;gap:.25rem;margin:1.1rem .1rem .1rem; background:var(--color-surface-2);border-radius:14px;padding:.3rem; } .io-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; height:40px;padding:0 1rem;border:none;border-radius:11px;background:transparent;cursor:pointer; color:var(--color-primary);font-family:var(--font);font-size:var(--text-small);font-weight:700; -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,box-shadow .15s; } .io-btn .ico{width:18px;height:18px} .io-btn:hover{background:rgba(var(--brand-primary-rgb),.10)} .io-btn:active{transform:scale(.97)} .io-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .io-btn.is-active{ background:var(--color-primary);color:var(--color-on-primary); box-shadow:0 2px 8px rgba(var(--brand-primary-rgb),.3); } /* Aufnahme-Knopf sitzt im „Sprechen"-Modus oben links IM Eingabefeld; darunter die Aufforderung „Sprich …" (Placeholder), die sich beim Diktieren mit dem gesprochenen Text füllt. Die Aufnahme selbst wird nicht gespeichert. */ .field-mic{ position:absolute;left:.6rem;top:.6rem; display:inline-flex;align-items:center;gap:.4rem; height:34px;padding:0 .75rem;border:none;border-radius:11px;cursor:pointer; background:var(--color-primary);color:var(--color-on-primary); font-family:var(--font);font-size:var(--text-caption);font-weight:700; -webkit-tap-highlight-color:transparent;transition:filter .15s,transform .12s,box-shadow .15s; } .field-mic .ico{width:15px;height:15px} .field-mic:hover{filter:brightness(1.06)} .field-mic:active{transform:scale(.97)} .field-mic:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .field-mic[disabled]{opacity:.5;cursor:not-allowed} .field-mic.is-recording{background:var(--journal-danger);animation:ioPulse 1.5s ease-out infinite} /* Im Diktat-Modus oben Platz reservieren: Text/Aufforderung steht UNTER dem Knopf. */ .composer.is-dictate .composer-field{padding-top:3.4rem} /* Dezenter Status/Fallback-Hinweis unter dem Feld (z. B. Mikro verweigert). */ .io-dictate-hint{margin:.45rem .1rem 0;font-size:var(--text-caption);color:var(--color-text-muted);line-height:1.4} .io-dictate-hint.is-error{color:var(--journal-danger)} .composer{margin-top:.2rem} /* ---- Sanfte Aufforderung über dem Eingabefeld (nur bei leerem Tag) ---- */ .composer-prompt{ margin:.9rem .15rem .1rem;font-family:var(--font-serif);font-weight:500; font-size:1.06rem;line-height:1.35;color:var(--color-primary-strong); } :root[data-theme="dark"] .composer-prompt{color:var(--color-text)} /* ---- Anregungen (Türöffner) – full-bleed, horizontal scrollbar, dezent ---- Optik gespiegelt von den „häufige Fragen"-Chips: gedämpfte Markenfarbe, normale Schriftstärke, kein knalliger Auswahl-Zustand. */ .tb-starter{margin:.7rem 0 .2rem} .tb-starter-label{margin:0 .15rem .45rem;font-size:var(--text-small);font-weight:600;color:var(--color-text-muted)} .tb-starter-row{ display:flex;gap:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding:0 1.1rem .2rem;margin:0 -1.1rem; } .tb-starter-row::-webkit-scrollbar{display:none} .tb-starter-chip{ flex:0 0 auto;appearance:none;cursor:pointer;font-family:var(--font); font-size:.84rem;font-weight:400;white-space:nowrap; border:1px solid var(--color-border-subtle);border-radius:999px; background:rgba(var(--brand-primary-rgb),.07);color:var(--color-primary); padding:.44rem .9rem;transition:opacity .2s,background .2s;-webkit-tap-highlight-color:transparent; } .tb-starter-chip:hover{background:rgba(var(--brand-primary-rgb),.12)} .tb-starter-chip:active{transform:scale(.97)} .tb-starter-chip.is-used{opacity:.42} /* ---- Warmer „gesichert"-Moment (kurz nach dem Sichern) ---- */ .tb-saved{ display:flex;align-items:center;gap:.55rem;margin:.2rem .1rem .4rem; padding:.7rem .85rem;border-radius:var(--radius); border:1px solid var(--color-border-subtle); background:rgba(var(--brand-secondary-rgb),.12); opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out); } .tb-saved.show{opacity:1;transform:none} .tb-saved-ico{ flex:0 0 auto;width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--brand-secondary,#5892B5);color:#fff; } .tb-saved-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .tb-saved-text{font-size:.9rem;line-height:1.4;color:var(--color-text);font-weight:500} /* ---- EINGABE-PANELS: Bild & Audio (analog zur Text-Composer-Optik) ---- */ .io-panel{margin-top:.7rem;animation:tbFade .2s var(--ease-out)} .io-intro{font-size:var(--text-small);color:var(--color-text-muted);line-height:1.45;margin:.1rem .1rem .7rem} .io-pick-row{display:flex;gap:.55rem;flex-wrap:wrap} .io-pick-btn{ display:inline-flex;align-items:center;gap:.5rem;border:none;border-radius:14px;cursor:pointer; padding:.7rem 1.05rem;font-family:var(--font);font-size:var(--text-small);font-weight:700; background:rgba(var(--brand-primary-rgb),.12);color:var(--color-primary); -webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s; } .io-pick-btn:hover{background:rgba(var(--brand-primary-rgb),.22)} .io-pick-btn:active{transform:scale(.96)} .io-pick-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .io-pick-btn .ico{width:18px;height:18px} .io-preview{margin-top:.85rem} .io-preview img{display:block;width:100%;max-height:340px;object-fit:contain;border-radius:16px;background:var(--color-surface-2)} .io-preview-actions{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap;align-items:center} .io-status{margin:.55rem .1rem 0;font-size:var(--text-caption);color:var(--color-text-muted);line-height:1.4} .io-status.is-error{color:var(--journal-danger)} /* Audio: Aufnahme-Button (Markenfarbe; im Aufnahme-Zustand kräftiges Rot + Puls) */ .io-rec-btn{ display:inline-flex;align-items:center;gap:.55rem;border:none;border-radius:14px;cursor:pointer; padding:.75rem 1.2rem;font-family:var(--font);font-size:var(--text-small);font-weight:700; background:var(--color-primary);color:var(--color-on-primary); -webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s,box-shadow .15s; } .io-rec-btn:hover{filter:brightness(1.05)} .io-rec-btn:active{transform:scale(.97)} .io-rec-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .io-rec-btn .ico{width:18px;height:18px} .io-rec-btn[disabled]{opacity:.5;cursor:not-allowed} .io-rec-btn.is-recording{background:var(--journal-danger);animation:ioPulse 1.5s ease-out infinite} @keyframes ioPulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--journal-danger) 55%, transparent)} 70%{box-shadow:0 0 0 10px color-mix(in srgb, var(--journal-danger) 0%, transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--journal-danger) 0%, transparent)} } .io-audio-text{margin-top:.7rem;display:block} .io-link-btn{ border:none;background:transparent;cursor:pointer;padding:.45rem .2rem; font-family:var(--font);font-size:var(--text-caption);font-weight:700; color:var(--color-primary);text-decoration:underline;text-underline-offset:2px; -webkit-tap-highlight-color:transparent; } .io-link-btn:hover{filter:brightness(1.1)} .io-link-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .io-note{ margin:.8rem .1rem 0;padding:.7rem .9rem;border-radius:12px; background:rgba(var(--brand-primary-rgb),.06);border:1px solid var(--color-border-subtle); font-size:var(--text-caption);color:var(--color-text-subtle);line-height:1.45; } /* Bild eines Eintrags: kleine Vorschau (Thumbnail) – Klick öffnet die Lightbox. Der Button ist das interaktive, fokussierbare Element (a11y), das nur Inhalt. */ .day-entry-imgbtn{ display:block;padding:0;border:none;background:transparent;cursor:pointer; margin:.15rem 0 .4rem;-webkit-tap-highlight-color:transparent;line-height:0; border-radius:16px;transition:transform .12s,box-shadow .18s; } .day-entry-imgbtn:hover{transform:translateY(-1px)} .day-entry-imgbtn:active{transform:scale(.985)} .day-entry-imgbtn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px} .day-entry-img{ display:block;width:auto;max-width:min(180px,60%);max-height:180px;object-fit:cover; border-radius:14px;background:var(--color-surface-2); box-shadow:0 2px 10px rgba(var(--shadow-color),.16); } /* Sprachnotiz eines Eintrags (Lese- und Bearbeiten-Optik) */ .day-entry-audio{ margin:.2rem 0 .45rem;padding:.55rem .65rem;border-radius:14px; background:rgba(var(--brand-primary-rgb),.07);border:1px solid var(--color-border-subtle); } .day-entry-audiolabel{ display:inline-flex;align-items:center;gap:.4rem; font-size:var(--text-caption);font-weight:700;color:var(--color-primary); margin-bottom:.4rem; } .day-entry-audiolabel .ico{ width:14px;height:14px;background:var(--color-primary); -webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain;flex-shrink:0; } .day-entry.is-editable .day-entry-audiolabel{cursor:pointer} .day-entry-audioplayer{display:block;width:100%;height:38px} .day-entry-audiomissing{font-size:var(--text-caption);color:var(--color-text-subtle);font-style:italic} /* Aufnahme-Vorschau im Audio-Panel (vor dem Sichern) */ .io-audio-rec{ margin-top:.7rem;padding:.6rem .7rem;border-radius:14px; background:rgba(var(--brand-primary-rgb),.07);border:1px solid var(--color-border-subtle); display:flex;flex-direction:column;gap:.5rem;align-items:flex-start; } .io-audio-rec-label{font-size:var(--text-caption);font-weight:700;color:var(--color-primary)} .io-audio-player{display:block;width:100%;height:38px} .io-audio-rec-note{margin:.1rem 0 0;font-size:var(--text-caption);color:var(--color-text-subtle);line-height:1.4} /* BILD-LIGHTBOX (voller Layer). Optik analog der Dashboard-Overlays: fixierter Backdrop, Fade-In, Body-Scroll wird per JS gesperrt. */ .tb-lightbox{ position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center; padding:calc(1.2rem + env(safe-area-inset-top,0px)) 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px)); background:rgba(var(--brand-primary-deep-rgb),.62); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;pointer-events:none;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent; } .tb-lightbox.show{opacity:1;pointer-events:auto} .tb-lightbox-img{ max-width:100%;max-height:100%;object-fit:contain;border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.45);transform:scale(.97);transition:transform .2s ease; } .tb-lightbox.show .tb-lightbox-img{transform:scale(1)} .tb-lightbox-close{ position:absolute;top:calc(.9rem + env(safe-area-inset-top,0px));right:.9rem; width:42px;height:42px;border-radius:50%;border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);color:#fff;-webkit-tap-highlight-color:transparent; transition:background .18s,transform .12s; } .tb-lightbox-close:hover{background:rgba(255,255,255,.28)} .tb-lightbox-close:active{transform:scale(.92)} .tb-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px} .tb-lightbox-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---- FREIGABE-SCHALTER ---- */ .share-row{ display:flex;align-items:center;justify-content:center;gap:.85rem; margin:1.45rem .3rem .2rem; } .share-label{font-size:var(--text-small);color:var(--color-text-muted);line-height:1.4;text-align:center} .share-auto{color:var(--color-text-subtle);font-style:italic} .switch{ position:relative;flex-shrink:0;width:46px;height:27px;border:none;border-radius:999px;cursor:pointer; background:var(--color-surface-2);box-shadow:inset 0 0 0 1px var(--color-border); -webkit-tap-highlight-color:transparent;transition:background .2s,box-shadow .2s; } .switch::after{ content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s; } .switch[aria-checked="true"]{background:var(--color-primary);box-shadow:none} .switch[aria-checked="true"]::after{transform:translateX(19px)} .switch:active::after{width:24px} .switch:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .detail-foot{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--color-border-subtle)} /* ---- BUTTONS ---- */ .btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; width:100%;box-sizing:border-box; padding:.85rem 1.2rem;border:none;border-radius:16px; background:var(--color-primary);color:var(--color-on-primary); font-family:var(--font);font-size:var(--text-body);font-weight:600; cursor:pointer;-webkit-tap-highlight-color:transparent; box-shadow:0 2px 10px rgba(var(--brand-primary-rgb),.28); transition:filter .18s,transform .12s; } .btn-primary:hover{filter:brightness(1.05)} .btn-primary:active{transform:scale(.985)} .btn-primary:focus-visible{outline:2px solid var(--color-primary-strong);outline-offset:2px} .btn-primary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; width:100%;box-sizing:border-box; padding:.78rem 1.2rem;border:none;border-radius:16px; background:rgba(var(--brand-primary-rgb),.10);color:var(--color-primary); font-family:var(--font);font-size:var(--text-body);font-weight:600; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background .18s,transform .12s; } .btn-ghost:hover{background:rgba(var(--brand-primary-rgb),.18)} .btn-ghost:active{transform:scale(.985)} .btn-ghost:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .btn-ghost svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* ---- LOGO-FAB + ZURÜCK-REVEAL (1:1 Optik wie Profil) ---- */ /* Unterer Fade-Scrim wie profile/dashboard/conversation: weicht die harte Scrollkante hinter dem schwebenden FAB auf. ABER: der Journal-Inhalt liegt in einer Karte (--color-surface), daher faden wir zur KARTEN-/Surface-Farbe (rgba(--surface-rgb)) statt zu --color-bg – sonst entstuende ein lavendel-/ dunkler Streifen ueber der Karte. --surface-rgb kippt mode-aware (hell/dunkel). */ /* FAB-Block NUR im Standalone (/tagebuch). Im Dashboard-Embed besitzt das Dashboard seinen EIGENEN .logo-fab/.logo-fab-blur – die Journal-Regeln werden daher auf html.tb-standalone gescopt, damit sie den Dashboard-FAB nicht umstylen. Die im TEMPLATE enthaltenen Journal-FAB-Knoten werden im Embed zusätzlich per .tb-embed ausgeblendet (siehe unten). */ html.tb-standalone .logo-fab-blur{ position:fixed;bottom:0;left:0;right:0;z-index:199; height:calc(5.5rem + env(safe-area-inset-bottom,0px));pointer-events:none; background:linear-gradient(to bottom, rgba(var(--surface-rgb),0) 0%, rgba(var(--surface-rgb),.6) 45%, rgba(var(--surface-rgb),1) 88%); } /* Dark-Override mit hoeherer Spezifitaet, damit die mode-aware Surface-Variante die generische Dark-Regel aus shared.css (faded zu --color-bg) schlaegt. */ html.tb-standalone[data-theme="dark"] .logo-fab-blur{ background:linear-gradient(to bottom, rgba(var(--surface-rgb),0) 0%, rgba(var(--surface-rgb),.6) 45%, rgba(var(--surface-rgb),1) 88%); } html.tb-standalone .logo-fab{ position:fixed;bottom:.75rem;left:50%;transform:translateX(-50%);z-index:200; width:48px;height:48px;border-radius:50%;background:var(--brand-purple); display:flex;align-items:center;justify-content:center;cursor:pointer; -webkit-tap-highlight-color:transparent;box-shadow:0 2px 12px rgba(var(--brand-purple-rgb),.2); transition:transform .15s,bottom .3s ease; } html.tb-standalone .logo-fab:active{transform:translateX(-50%) scale(.9)} html.tb-standalone .logo-fab.open{background:var(--accent);box-shadow:0 4px 20px rgba(var(--brand-purple-rgb),.4)} html.tb-standalone .logo-fab.open img{transform:rotate(45deg)} html.tb-standalone .logo-fab img{width:32px;height:32px;pointer-events:none;transition:transform .3s ease} html.tb-standalone .fab-back-btn{ position:fixed;z-index:200;bottom:1.5rem;left:50%; transform:translateX(calc(-50% - 54px)); display:flex;align-items:center;gap:.35rem; background:var(--color-surface); border:1px solid rgba(var(--brand-purple-rgb),.30); box-shadow:0 2px 10px rgba(var(--shadow-color),.20); border-radius:16px;padding:.42rem .8rem; color:var(--color-primary);font-family:var(--font);font-size:.8rem;font-weight:500; cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .25s ease,visibility .25s ease,transform .28s cubic-bezier(.34,1.4,.64,1),background .2s,border-color .2s; } html.tb-standalone .fab-back-btn svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} html.tb-standalone .fab-back-btn:hover{border-color:rgba(var(--brand-purple-rgb),.45)} html.tb-standalone .fab-back-btn.show{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(calc(-50% - 90px))} html.tb-standalone .fab-back-btn.show:active{opacity:.8} /* ===== IN-RAHMEN-KOPF (Übersichten) ===== Auftakt/Woche/Monat tragen KEINEN fixen Zurück-Button oben. Der Titel („Dein Journal"/„Dein Tagebuch") steht IM Rahmen (analog „Dein Tracker") und ist in Source Serif (--font-serif) gesetzt, passend zur Lesekarten-Headline. Navigation zurück läuft über den FAB. Rechts der Mo./Wo.-Toggle. */ .tb-inframe-head{ display:flex;align-items:center;justify-content:space-between;gap:.5rem; margin:.3rem .1rem 1.05rem; } .tb-inframe-title{ font-family:var(--font-serif);font-size:var(--text-display);font-weight:600; color:var(--color-primary);line-height:1.2;letter-spacing:-.01em; /* Darf bei wenig Platz (Pille + Bereichs-Icon rechts) schrumpfen statt umzubrechen. */ min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Werkzeuge rechts im Kopf: TAG|ÜBERSICHT-Umschalter + (nur ÜBERSICHT) Bereichs- Umschalter. margin-left:auto hält sie rechts, auch wenn der Stift links fehlt. */ .tb-head-tools{display:inline-flex;align-items:center;gap:.45rem;flex-shrink:0;margin-left:auto} /* ---- Modus-Sichtbarkeit (Woche / Monat) ---- */ /* Wochenansicht: Wochentagsleiste, Legende, Hinweis aus; Wochen-Nav an. */ #viewMonth.mode-week .cal-weekdays, #viewMonth.mode-week .cal-legend, #viewMonth.mode-week .cal-hint{display:none} /* Monatsansicht: Wochen-Pillen aus. */ #viewMonth.mode-month .tb-weekpills{display:none} /* Lesekarte horizontal wischbar (Wochenansicht): pan-y lässt vertikales Seiten- Scrollen unberührt, horizontale Gesten gehen an attachCardSwipe (Tageswechsel). */ #viewMonth.mode-week .cal-panel{touch-action:pan-y} /* Während des seitlichen Tageswechsel-Slides liegen alte + neue .cal-panel-inner absolut übereinander (Inline-Styles aus swapPanel). overflow:hidden (am .cal-panel ohnehin gesetzt) schneidet den ein-/ausgehenden Inhalt sauber ab → kein Scrollbar- Flackern. Klasse wird nur transient gesetzt; isoliert/leicht entfernbar. */ .cal-panel.is-sliding{overflow:hidden} /* ---- WOCHEN-PILLEN (nur Wochenansicht) ---- Horizontal wischbare Leiste aus Wochen-Pillen, Optik/Interaktion gespiegelt von den „häufige Fragen"-Chips (.wk-chip-row/.wk-chip aus dashboard.html). Hier in eigene tb-weekpills-Klassen ISOLIERT (journal.css), damit /tagebuch standalone funktioniert und die Leiste leicht entfernbar/reversibel bleibt. */ .tb-weekpills{ display:flex;gap:.5rem;flex-wrap:nowrap; overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; scroll-snap-type:x proximity; /* Voll-Bleed bis an die Rahmenkanten (wie der Streifen), Polster hält die erste/ letzte Pille auf der Inhaltslinie. */ margin:.1rem calc(-1 * var(--frame-inset)) .6rem; padding:.1rem var(--frame-inset) .35rem; } .tb-weekpills::-webkit-scrollbar{display:none} /* Kompakte, EINZEILIGE Pille – klein und ruhig (kein Bold). INAKTIV = sehr leichter, zurückhaltender Hintergrund (ruhige Reihe). AKTIV = weiße (im Dark-Mode: angehobene) Fläche mit Hairline + dezentem Schatten → liest sich als die fokussierte Pille gegen die leichte Reihe. Border immer reserviert (transparent), damit Aktiv-Wechsel KEIN Layout-Springen verursacht. */ .tb-weekpill{ flex:0 0 auto;scroll-snap-align:center; display:inline-flex;align-items:center; white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent; background:rgba(var(--text-rgb),.05); border:1px solid transparent;border-radius:8px; padding:.26rem .6rem;font-family:var(--font); font-size:var(--text-caption);font-weight:400;letter-spacing:.01em;line-height:1.2; font-variant-numeric:tabular-nums;color:var(--color-text-muted); transition:background .16s,color .16s,box-shadow .16s,border-color .16s,transform .12s; } .tb-weekpill:hover{background:rgba(var(--brand-primary-rgb),.10);color:var(--color-primary)} .tb-weekpill:active{transform:scale(.97)} .tb-weekpill:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .tb-weekpill.is-active{ background:var(--color-surface); color:var(--color-primary);font-weight:500; border-color:var(--color-border-subtle); box-shadow:none; } /* ===== AUFTAKT (Screen 1 – leer / erstes Öffnen) ===== */ .lp-lead{font-family:var(--font);font-size:var(--text-body);line-height:1.55;color:var(--color-text);margin:.2rem .1rem 1rem} .lp-sub{font-size:var(--text-small);line-height:1.55;color:var(--color-text-muted);margin:0 .1rem 1.25rem} .lp-sub strong{color:var(--color-text);font-weight:600} /* Beispiel-Farbfläche: tippen startet das Tagebuch. */ .lp-demo{ display:block;width:100%;box-sizing:border-box;text-align:left;cursor:pointer; border:none;border-radius:20px;padding:1rem 1rem 1.15rem; background:rgba(var(--brand-primary-rgb),.06); -webkit-tap-highlight-color:transparent;transition:transform .12s,background .18s; } .lp-demo:hover{background:rgba(var(--brand-primary-rgb),.10)} .lp-demo:active{transform:scale(.99)} .lp-demo:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .lp-demo-cap{display:block;font-size:var(--text-caption);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-subtle);margin-bottom:.6rem} .lp-demo-card{display:flex;flex-direction:column;gap:3px;border-radius:14px;overflow:hidden} .lp-demo-bar{min-height:46px;border-radius:0} .lp-demo-scale{display:flex;justify-content:space-between;margin:.45rem .15rem 0;font-size:var(--text-caption);color:var(--color-text-subtle)} .lp-demo-start{display:block;text-align:center;margin-top:.95rem;font-size:var(--text-small);font-weight:700;color:var(--color-primary)} .lp-share{ display:flex;align-items:center;gap:.85rem; margin:1.7rem .2rem .2rem;padding-top:1.15rem;border-top:1px solid var(--color-border-subtle); } /* ===== 7-TAGE-STREIFEN (Screen 2 – Hauptansicht) ===== Wisch-Karussell nach dem Vorbild des Dashboard-„.card-row"-Scrollers: eine DURCHGEHENDE, horizontal scroll-/wischbare Schiene aus Tageskarten (kein hartes 7-Tage-Paging). Wischen/Scrollen links/rechts holt frühere/spätere Wochen ins Bild; per CSS-Scroll-Snap (x mandatory + snap-align:center) rastet die mittige Karte ein und steuert die Leseansicht darunter. Scrollbar wird – wie bei .card-row – ausgeblendet. */ .strip-nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.1rem .1rem .6rem} .strip-range{flex:1;text-align:center;font-family:var(--font);font-weight:500;font-size:var(--text-small);color:var(--color-text-muted);font-variant-numeric:tabular-nums} .day-strip{ --strip-gap:.4rem;--strip-card:calc((100% - 6 * var(--strip-gap)) / 6.4); display:flex;gap:var(--strip-gap);align-items:stretch; overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:none;padding:.35rem 0 .5rem; /* Bis an die Rahmen-Kanten durchlaufen (wie Dashboard-.card-row): negative Seitenmargen = Rahmen-Innenpolster; scroll-padding haelt das Zentrieren des ersten/letzten Tages, ohne dass etwas abgeschnitten wird. */ margin-left:calc(-1 * var(--frame-inset)); margin-right:calc(-1 * var(--frame-inset)); scroll-padding-left:var(--frame-inset); scroll-padding-right:var(--frame-inset); } .day-strip::-webkit-scrollbar{display:none} /* Randspacer: erlauben, dass auch erster/letzter Tag mittig einrasten kann. */ .strip-spacer{flex:0 0 calc(50% - var(--strip-card)/2)} .strip-cell{flex:0 0 var(--strip-card);min-width:0;scroll-snap-align:center} .strip-day{ width:100%;min-height:76px;position:relative;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem; border:none;border-radius:13px;background:var(--color-surface-2); font-family:var(--font);color:var(--color-text-muted); cursor:pointer;-webkit-tap-highlight-color:transparent; transition:transform .14s,box-shadow .15s,filter .15s; } .strip-dow{font-size:var(--text-caption);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .strip-num{font-size:var(--text-body);font-weight:700} .strip-day:hover{filter:brightness(.98)} .strip-day:active{transform:scale(.95)} .strip-day:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;z-index:2} .strip-day.is-rated{color:var(--color-on-primary)} .strip-day.is-rated .strip-num{text-shadow:0 1px 2px rgba(0,0,0,.4)} .strip-day.is-future{background:transparent;box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-text-subtle);opacity:.5} .strip-day.is-outside{ background-color:color-mix(in srgb, var(--color-surface-2) 50%, transparent); background-image:repeating-linear-gradient(45deg,var(--color-bg) 0,var(--color-bg) 6px,transparent 6px,transparent 16px); color:var(--color-text-subtle);opacity:.5; } .strip-day.is-today .strip-dow{color:var(--color-primary)} .strip-day.is-rated.is-today .strip-dow{color:var(--color-on-primary)} /* Eingerastetes (mittiges) Fenster: Brand-Ring + leicht angehoben. */ .strip-day.is-selected{box-shadow:inset 0 0 0 2.5px var(--color-primary);transform:scale(1.06);opacity:1} .strip-day.is-selected.is-future{box-shadow:inset 0 0 0 2.5px var(--color-primary)} /* Leseansicht unter dem Streifen (eigene Scroll-Zone; oben Abstand zur fixen Trennkante statt margin, damit der erste Inhalt nicht daran klebt). */ .strip-read{margin-top:0;padding-top:1.25rem} .strip-read-date{font-family:var(--font);font-size:var(--text-small);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text-subtle);margin:.2rem .1rem .15rem} /* Klick auf die Lesefläche → Editor. */ .strip-read-main{cursor:pointer;border-radius:16px;transition:background .15s;padding:.4rem;margin:0 -.4rem} .strip-read-main:hover{background:rgba(var(--brand-primary-rgb),.05)} .strip-read-main:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px} .strip-read-hint{font-style:italic;color:var(--color-text-subtle);margin:.6rem .1rem;font-size:var(--text-small);line-height:1.5} .strip-edit{margin-top:1.05rem} .strip-share{display:flex;align-items:center;gap:.85rem;margin:1.45rem .2rem .2rem;padding-top:1.15rem;border-top:1px solid var(--color-border-subtle)} /* ===== LESEMODUS-KARTE (read card auf dem Energie→Stimmung-Verlauf) ===== Geteilte Lese-Karte für Woche-Streifen UND Tagesansicht: liegt auf dem durchgehenden Tages-Verlauf (= Kalender-/Streifen-Farbe via dayGradient()). Edit-Stift oben links, Status-Indikatoren oben rechts (reine Anzeige), Serif-Headline, zeit-präfigierte Einträge, Transkript-Box + Inline-Player. */ .tb-readcard{ position:relative;box-sizing:border-box;border-radius:24px;overflow:hidden; padding:1.1rem 1.15rem 1.4rem; background:var(--color-surface-2); box-shadow:0 6px 22px rgba(var(--shadow-color),.18); color:#fff; } /* HELL-MODUS: Lesekarten-Schatten wird vom .cal-panel-overflow abgeschnitten → entfernen (Dark-Mode behält ihn). */ :root:not([data-theme="dark"]) .tb-readcard{box-shadow:none} /* Unbewerteter Tag: kein Verlauf → ruhige Surface, normale Textfarbe. Ohne Stimmungs-Verlauf hat die Karte sonst exakt den Wert der Rahmen-/Seiten- fläche (--color-surface-2 == --color-bg im Hell-Modus) → die Kartenkanten verschwimmen mit dem Rahmen. Daher zwei dezente, ruhige Mittel: (1) eine dünne, strukturelle Outline in gedämpftem Markenviolett und (2) ein leichter Ton-Versatz zur Rahmenfläche hin (Richtung --color-surface = heller im Hell-Modus, leicht angehoben im Dark-Modus). Beides token-/mode-aware, KEIN Schlagschatten. Farbige (bewertete) Tage tragen .is-grad und bleiben unberührt. */ .tb-readcard.is-plain{ color:var(--color-text); background:color-mix(in srgb, var(--color-surface) 92%, rgb(var(--brand-primary-rgb))); border:1px solid rgba(var(--brand-primary-rgb),.18); } /* Lesbarkeits-Schleier: dezenter dunkler 135°-Verlauf, damit helle Paletten- Farben die nahezu weiße Schrift/Icons nicht ausbleichen (Kontrast). */ .tb-readcard.is-grad::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(135deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.28) 100%); } .tb-readcard > *{position:relative;z-index:1} .tb-rc-head{display:flex;flex-direction:column} /* Edit-Stift oben links (echte