/* lich lytchie – SaaS-Terminkalender für Nagel-/Kosmetikstudios Design übernommen aus X Calendar, Oberfläche 2026-09-11 umgebaut (Paket 1): eine Kopfzeile mit EINEM Menü, SVG-Icons, Einstellungen als Fenster, schlankes Terminfenster, lesbare Balken, kompakte Übersicht, Handy zuerst. */ :root{ --bg: #FAF5F1; --panel: #FFFFFF; --ink: #2E2422; --ink-soft: #7A6E68; --line: #EAE0D9; --linked: #FF5A00; /* Neonorange – Anschluss-Knopf */ --linked-soft: #FFF1E8; --linked-line: #FFB98C; --row-half: #F0EEEB; /* hellgraue Halbstunden-Zeile im Tagesraster */ --appt-text: #211C17; /* fast schwarz – Text in den Balken */ --grid-bg: #FCFBF9; /* Kalenderhintergrund */ --grid-half: #F1EDE7; /* helle Halbstundenlinie */ --appt-weg: #D8D2CC; /* Grau – gerade gelöschter Terminbalken */ /* Eigener Token für die Schrift darauf: --ink-soft ist die Textfarbe der SEITE und wird im Dunkeln hell – auf dem hellgrauen Balken wäre sie dann unsichtbar. */ --appt-weg-text: var(--ink-soft); --appt-neu: #A8D8B9; /* Pastellgrün – frisch gespeicherter Termin */ --gold: #B08D57; --ok: #2E8B46; /* Grün – bestätigt: Anwesenheits-Haken und „Speichern" */ --danger: #B5453B; --danger-soft: #FBEAE7; --input-bg: #FCFAF8; /* Eingabefelder und Auswahlknöpfe */ --bg-glow: #FEFCFA; /* heller Kern des Hintergrund-Verlaufs */ --ink-fill: var(--ink); /* Flächen in Textfarbe (ausgewählter Tag, Spaltennummer) */ --ink-fill-text: #fff; /* Schrift darauf */ --scrim: rgba(42,33,28,.30); /* Schleier hinter dem Terminfenster */ /* Wortmarke „LỊCH LYTCHIE": zwei freigestellte Fassungen (von Chris geliefert, 2026-09-03) – schwarz für die helle, creme für die dunkle Ansicht. Der Wechsel läuft NUR über diesen Token. */ --wortmarke: url('../logo-wortmarke-hell.webp?v=20'); --radius: 14px; --radius-lg: 20px; /* ---------- Die 10 vorgegebenen Dienstleistungs-Farben ---------- Je Farbe zwei Töne: --sN (kräftig – Punkte, Rahmen, Schatten) und --sN-bar (Pastell – Terminbalken; schwarzer Text darauf bleibt lesbar). Die Pastelltöne bleiben im Dunkelmodus UNVERÄNDERT: Die Farbe kodiert die Dienstleistung, das muss in beiden Ansichten dasselbe sein. */ --s1: #E07B24; --s1-bar: #F4CBA0; /* Orange */ --s2: #6BA8D6; --s2-bar: #B9D7EF; /* Blau */ --s3: #4C9A57; --s3-bar: #BFE3C4; /* Grün */ --s4: #D96C97; --s4-bar: #F6C6D8; /* Rosa */ --s5: #8E6CC9; --s5-bar: #D7C8EF; /* Lila */ --s6: #C9A227; --s6-bar: #F2E2A0; /* Gelb */ --s7: #3FA396; --s7-bar: #B5E3DE; /* Türkis */ --s8: #C75C50; --s8-bar: #F2B8B1; /* Korallrot */ --s9: #97694A; --s9-bar: #DDC3AC; /* Braun */ --s10: #8A817C; --s10-bar: #D6D3D1; /* Grau */ /* Ersatzschriften, falls die lokalen Schriften nicht geladen werden können */ --font-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* Weiche Beschleunigungskurven für elegante Mikro-Bewegungen */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* Mehrschichtige, warm getönte Schatten */ --shadow-sm: 0 1px 2px rgba(58,42,32,.05), 0 1px 1px rgba(58,42,32,.04); --shadow: 0 1px 2px rgba(58,42,32,.05), 0 4px 14px rgba(58,42,32,.07); --shadow-md: 0 2px 6px rgba(58,42,32,.06), 0 12px 28px rgba(58,42,32,.09); --shadow-lg: 0 6px 14px rgba(58,42,32,.07), 0 22px 50px rgba(58,42,32,.13); --shadow-xl: 0 12px 28px rgba(58,42,32,.12), 0 40px 80px rgba(58,42,32,.20); color-scheme: light; } /* ---------- Dunkelmodus ---------- Umgeschaltet über `data-theme="dark"` am ; gesetzt wird das von js/theme.js noch vor dem ersten Zeichnen. Ohne Attribut bleibt alles hell. Grundsatz: NUR die Token werden getauscht, keine einzige Regel weiter unten. Die Pastelltöne der Terminbalken (--sN-bar) und --appt-text bleiben bewusst unverändert – helle Balken auf dunklem Raster lesen sich gut. `color-scheme: dark` ist Pflicht: Nur damit zeichnet der Browser Uhrzeit-/ Datumsfeld, Zahlenrad und Bildlaufleisten dunkel. */ html[data-theme="dark"]{ color-scheme: dark; --bg: #17130F; --bg-glow: #221C17; --panel: #241E19; --ink: #F2EAE3; --ink-soft: #A99C91; --line: #3B322B; --linked: #FF7A2E; --linked-soft: #3A2214; --linked-line: #8E5229; --row-half: #201A16; --grid-bg: #1C1713; --grid-half: #2C241E; /* Der graue Balken behaelt die dunkle Balkenschrift – er darf deshalb NICHT dunkel werden (Kontrast!). */ --appt-weg: #A79B90; --appt-weg-text: #2E2822; --gold: #CBA76D; --ok: #3FA85E; --danger: #E8776A; --danger-soft: #3B211D; --input-bg: #2C2520; --ink-fill: #EFE5DC; --ink-fill-text: #241E19; --scrim: rgba(0,0,0,.55); --wortmarke: url('../logo-wortmarke-dunkel.webp?v=20'); /* Kräftige Dienstleistungs-Farben eine Spur heller, sonst versinken sie */ --s1: #E8934A; --s2: #86B9E2; --s3: #64B36F; --s4: #E288AC; --s5: #A98BDD; --s6: #D9B54A; --s7: #5CBCAF; --s8: #DB7A6E; --s9: #B08663; --s10: #A29A95; --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30); --shadow: 0 1px 2px rgba(0,0,0,.40), 0 4px 14px rgba(0,0,0,.45); --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.50); --shadow-lg: 0 6px 14px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.55); --shadow-xl: 0 12px 28px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.65); } /* Der Anmelde-/Passwortknopf verläuft ins Dunkle und trägt weiße Schrift – im Dunkelmodus wäre die Fläche hell und die Schrift unlesbar. */ html[data-theme="dark"] .btn-primary{ background: linear-gradient(180deg, #6E5A4A, #56463A); color: #FFF7EF; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; background: var(--bg); /* Klebender Kopf: scrollIntoView (frisch gespeicherter Termin) parkt nichts darunter. --kopf-h misst app.js (kopfHoeheMessen). */ scroll-padding-top: var(--kopf-h, 0px); } body{ margin:0; color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Sanfter Tiefen-Verlauf; steht beim Scrollen still. Bewusst als EIGENE, fest stehende Ebene statt `background-attachment: fixed` (Ruckeln, iOS). */ body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1400px 700px at 50% -8%, var(--bg-glow) 0%, var(--bg) 55%); } /* Rücksicht auf „Bewegung reduzieren" (Betriebssystem-Einstellung) */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Seitenränder als Variablen: Der klebende Kopf (.kopf) zieht sich mit negativen Rändern bis an den Bildschirmrand, damit beim Scrollen nichts seitlich unter ihm hervorschaut. */ .app{ --app-pt: 20px; --app-px: 24px; padding: var(--app-pt) var(--app-px) 40px; max-width: 2400px; margin: 0 auto; } .hidden{ display:none !important; } /* Die App-Hülle (Kopfzeile, Datumsblock, leeres Raster) bleibt unsichtbar, bis app.js entschieden hat, was zu zeigen ist (Anmeldung, PIN oder Kalender). Vorher blitzte sie für einen Moment auf – auf langsamen Verbindungen deutlich. Die Klasse `bereit` setzt init() in app.js. */ body:not(.bereit) .app{ visibility:hidden; } /* Ohne JavaScript bliebe die Hülle für immer unsichtbar – wenigstens ein Hinweis */ .noscript{ padding: 40px 20px; text-align:center; color: var(--ink); } /* ---------- Symbole (SVG-Icons, siehe index.html) ---------- */ .icon{ width:20px; height:20px; flex:none; display:block; fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ---------- Knöpfe ---------- */ .btn{ /* Doppeltipp-Zoom abschalten: Beim schnellen Tippen zoomte iOS sonst hinein. */ touch-action: manipulation; /* Durchsichtiger Rahmen statt gar keiner: .btn-ghost hat einen sichtbaren 1-px-Rahmen; ohne diese Zeile wären gleich verteilte Knöpfe 2 px breiter. */ border:1px solid transparent; cursor:pointer; border-radius: 999px; padding: 10px 18px; font-family: var(--font-sans); font-weight:600; font-size:14px; color: var(--ink); transition: transform .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease); } .btn:active{ transform: translateY(0) scale(0.97); } .btn:disabled{ opacity:.35; cursor:not-allowed; } .btn-block{ display:block; width:100%; } .btn-primary{ background: linear-gradient(180deg, #3B2E29, var(--ink)); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-save{ background: linear-gradient(180deg, #3AA157, var(--ok)); color:#fff; box-shadow: var(--shadow-sm); } .btn-save:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-danger{ background: linear-gradient(180deg, #C7574D, var(--danger)); color:#fff; box-shadow: var(--shadow-sm); } .btn-danger:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost{ background: var(--panel); border:1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm); } .btn-ghost:hover{ border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow); } /* Knopf mit Symbol und Beschriftung (Kopfzeile) */ .btn-icon{ display:inline-flex; align-items:center; gap:8px; padding: 9px 16px 9px 12px; } /* Runder Symbol-Knopf (Schließen-X in Fenstern) */ .icon-btn{ width:36px; height:36px; border-radius:50%; flex:none; cursor:pointer; border:1px solid var(--line); background: var(--panel); color: var(--ink); display:flex; align-items:center; justify-content:center; transition: border-color .15s var(--ease), background-color .15s var(--ease); } .icon-btn:hover{ border-color: var(--gold); } .link-btn{ background:none; border:none; color: var(--danger); font-size:13px; cursor:pointer; text-decoration:underline; padding:0; } /* Hinweisleiste (Verbindung) */ /* Klebt bewusst NICHT (seit 2026-09-14): Sie läge sonst über dem klebenden Kopf. Beim Scrollen warnt der rot pulsierende Datumskasten im Kopf. */ .conn-banner{ position: relative; z-index: 60; text-align:center; font-size: 13px; padding: 8px 14px; background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid var(--danger); } /* ---------- Kopfzeile ---------- */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-bottom: 14px; } .brand{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; } /* Wortmarke „LỊCH LYTCHIE" (die Litschi ist das C). Das Bild kommt aus dem Token --wortmarke und wechselt damit automatisch zwischen heller und dunkler Fassung. Seitenverhältnis der Dateien: 1200×198. */ .wordmark{ width: 240px; aspect-ratio: 1200 / 198; background: var(--wortmarke) center/contain no-repeat; } /* Der Studio-Name des angemeldeten Kontos – unterhalb der Wortmarke */ .studio-name{ font-size: 12.5px; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; margin-left: 2px; max-width: 280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---------- Datumsleiste ---------- */ /* 3 Spalten (1fr | Inhalt | 1fr): Der Datumsblock steht dadurch exakt mittig. Links davor der Lösch-Knopf (nur an vergangenen Tagen), rechts „Heute" – beide verschieben die Mitte nicht. */ .daybar{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:14px; margin: 0 0 12px; } .date-box{ position:relative; grid-column:2; display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:999px; background: var(--panel); padding:4px 6px; box-shadow: var(--shadow-sm); transition: box-shadow .18s var(--ease), border-color .18s var(--ease); } .date-box:hover{ box-shadow: var(--shadow); border-color: var(--gold); } /* Vergangener Tag: Datum rot (dazu die rote Zeitspalte im Raster). Nur die Schrift, nicht der Rahmen – der Rahmen gehoert der Offline-Warnung. */ .date-box.vergangen .date-weekday, .date-box.vergangen .date-num{ color: var(--danger); } /* Keine Verbindung: Der Datumskasten leuchtet rot (die Leiste oben wird beim Arbeiten im Kalender leicht übersehen). Steht NACH :hover. */ @keyframes date-offline{ 0%, 100%{ box-shadow: 0 0 0 2px var(--danger), 0 0 16px color-mix(in srgb, var(--danger) 55%, transparent); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 40%, transparent), 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent); } } .date-box.offline, .date-box.offline:hover{ border-color: var(--danger); animation: date-offline 1.6s var(--ease) infinite; } .date-box.offline .date-weekday, .date-box.offline .date-num{ color: var(--danger); } @media (prefers-reduced-motion: reduce){ .date-box.offline{ box-shadow: 0 0 0 2px var(--danger), 0 0 16px color-mix(in srgb, var(--danger) 55%, transparent); } } .daybar > .btn-today{ grid-column:3; justify-self:start; } .daybar-nav{ touch-action: manipulation; width:40px; height:40px; flex:none; border-radius:50%; border:none; background: var(--bg); color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform .18s var(--ease), background-color .18s var(--ease); } .daybar-nav:hover:not(:disabled){ background: var(--line); transform: scale(1.06); } .daybar-nav:active:not(:disabled){ transform: scale(.94); } .daybar-nav:disabled{ opacity:.25; cursor:not-allowed; } /* Wochentag + Datum zweizeilig; ein kleiner Pfeil zeigt, dass sich hier eine Datumsauswahl öffnet. Das unsichtbare Datumsfeld liegt NUR über dem Text. */ .date-pick{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 26px 2px 12px; min-width:190px; cursor:pointer; border-radius: 999px; } .date-pick:focus-visible{ outline: 2px solid var(--gold); } .date-weekday{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); line-height:1.2; white-space:nowrap; } .date-num{ font-family: var(--font-sans); font-weight:700; font-size:19px; line-height:1.15; letter-spacing:-.02em; color: var(--ink); white-space:nowrap; font-variant-numeric: tabular-nums; } .date-caret{ position:absolute; right:8px; top:50%; margin-top:-8px; width:16px; height:16px; color: var(--ink-soft); } /* Auf großen Bildschirmen übernimmt die eigene Monatsansicht; das native Feld muss dort ganz weg (Chrome öffnet seinen Kalender sonst bei jedem Klick irgendwo auf das Feld). Auf dem Handy wird es eingeblendet. */ .date-pick input[type=date]{ display:none; position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; cursor:pointer; } .btn-today{ font-size:15px; padding:12px 24px; font-weight:700; } /* ---------- Eigene Monatsansicht im iOS-Stil (nur große Bildschirme) ---------- */ .monthpick{ position:absolute; top:calc(100% + 12px); left:50%; margin-left:-174px; width:348px; z-index:45; padding:14px 16px 16px; border-radius:22px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--shadow-xl); transform-origin: top center; animation: mp-in .22s var(--ease-out); cursor: default; } @keyframes mp-in{ from{ opacity:0; transform: translateY(-8px) scale(.96); } to{ opacity:1; transform:none; } } .mp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .mp-title{ font-family: var(--font-sans); font-weight:700; font-size:17px; color: var(--ink); letter-spacing:-.01em; } .mp-nav{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; background: var(--bg); color: var(--ink); font-size:19px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; transition: background-color .15s var(--ease), transform .15s var(--ease); } .mp-nav:hover:not(:disabled){ background: var(--line); transform: scale(1.06); } .mp-nav:disabled{ opacity:.25; cursor:not-allowed; } .mp-weekdays{ display:grid; grid-template-columns: repeat(7, 1fr); gap:2px; margin-bottom:4px; } .mp-weekdays span{ text-align:center; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); } .mp-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:2px; } .mp-cell{ height:42px; } .mp-day{ display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:50%; cursor:pointer; font-family: var(--font-sans); font-size:16px; font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease); } .mp-day:hover:not(.off){ background: var(--line); } .mp-day:active:not(.off){ transform: scale(.92); } /* Vergangene Tage bleiben wählbar (sie werden nicht mehr gelöscht) und sind rot gekennzeichnet – wie das Datum im Datumskasten. */ .mp-day.past{ color: var(--danger); } .mp-day.today{ color: var(--gold); font-weight:800; } .mp-day.sel{ background: var(--ink-fill); color: var(--ink-fill-text); font-weight:700; } .mp-day.sel:hover{ background: var(--ink-fill); } .mp-day.off{ opacity:.22; cursor:default; } /* außerhalb des Buchungsfensters */ /* ---------- Werkzeugzeile: Spalten, Notiz, Legende ---------- */ .toolrow{ display:flex; align-items:center; gap:14px; margin-bottom: 12px; flex-wrap:wrap; } /* Spalten an diesem Tag: Pille mit −/+ */ .emp-control{ display:flex; align-items:center; gap:2px; flex:none; font-size:13px; color: var(--ink); background: var(--panel); border:1px solid var(--line); border-radius: 999px; padding: 3px 4px; box-shadow: var(--shadow-sm); } .emp-control button{ width:30px; height:30px; border-radius:50%; border:none; background: transparent; color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action: manipulation; } .emp-control button:hover{ background: var(--bg); } .emp-control button:disabled{ opacity:.3; cursor:not-allowed; } .emp-control .icon{ width:16px; height:16px; } .emp-count{ font-weight:700; white-space:nowrap; padding: 0 4px; } .emp-count #empCount{ font-family: var(--font-serif); font-size:16px; } /* Zurücksetzen (↺): erscheint nur, wenn die Anzahl für das Datum angepasst wurde */ .emp-control #empHint{ color: var(--danger); } /* Tagesnotiz – einzeilig, füllt die Lücke */ .notes-inline{ display:flex; align-items:center; gap:8px; flex: 1 1 260px; min-width: 200px; } #dayNotes{ flex:1; min-width:0; height: 38px; border:1px solid var(--line); border-radius:999px; background: var(--input-bg); font-family: var(--font-sans); font-size:13px; color: var(--danger); font-weight:700; /* Notiz fällt bewusst auf */ padding: 0 14px; } #dayNotes::placeholder{ color: var(--ink-soft); font-weight:400; } #dayNotes:focus{ outline:1px solid var(--gold); } #dayNotes:disabled{ background: var(--bg); color: var(--ink-soft); } .notes-count{ font-size:11px; color: var(--ink-soft); white-space:nowrap; } .notes-count.full{ color: var(--danger); font-weight:600; } /* Farb-Chips je Dienstleistung */ .legend-chips{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12.5px; color: var(--ink-soft); } .legend-chips .chip{ display:flex; align-items:center; gap:6px; } .legend-chips .swatch{ width:12px; height:12px; border-radius:4px; } /* Sprachwahl als runde Flaggen (Anmeldebildschirm und Einstellungen). Die Flagge füllt den ganzen Knopf; der innere Ring macht weiße Flaggenteile auf weißem Grund sichtbar, der äußere Ring zeigt die gewählte Sprache. */ .flag-rund{ position:relative; flex:none; width:36px; height:36px; padding:0; border:none; border-radius:50%; overflow:hidden; cursor:pointer; background: var(--line); touch-action: manipulation; transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .flag-rund svg{ display:block; width:100%; height:100%; } .flag-rund::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); } .flag-rund:hover{ transform: scale(1.08); } .flag-rund:active{ transform: scale(.94); } .flag-rund.active{ box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); } .flag-rund:focus-visible{ outline:none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--gold); } .flag-gross{ width:42px; height:42px; box-shadow: var(--shadow-sm); } .flaggen{ display:flex; flex-wrap:wrap; gap:10px; padding: 4px 2px; } /* ---------- Tagesraster ---------- */ .board{ background: var(--grid-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: auto; position: relative; } /* Scrollt das Raster NICHT seitlich (alle Spalten passen, app.js setzt dann KEIN .scrollt), wird die Tafel per overflow:clip zum gewöhnlichen Kasten: Die Spaltenköpfe kleben dann beim Scrollen der Seite unter dem Kopf (--kopf-h) statt mit wegzuscrollen. overflow:hidden ginge nicht – das macht wieder einen Scroll-Container, und top:--kopf-h schöbe die Köpfe nach unten. Ältere Browser ohne clip behalten das bisherige Verhalten. */ @supports (overflow: clip){ .board:not(.scrollt){ overflow: clip; } .board:not(.scrollt) .corner, .board:not(.scrollt) .col-head{ top: var(--kopf-h, 0px); } /* scrollIntoView: Platz für die ~40 px hohen Spaltenköpfe unter dem Kopf */ .board:not(.scrollt) .appt{ scroll-margin-top: 46px; } } .grid-scroll{ display:grid; background: var(--grid-bg); } /* Passen nicht alle Spalten nebeneinander, setzt renderGrid() diese Klasse: Das Grid wächst dann auf Inhaltsbreite – nur so bleibt die Zeitspalte links beim seitlichen Scrollen stehen. Mit 1fr würde es nicht wachsen. */ .grid-scroll.scrollt{ width: max-content; } /* Hinweis für leere Tage (nur bei buchbaren Tagen ohne Termine) */ .grid-hint{ position:absolute; left:50%; top:118px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; pointer-events:none; z-index:6; background: color-mix(in srgb, var(--panel) 88%, transparent); border:1px dashed var(--line); color: var(--ink-soft); font-size: 13px; white-space:nowrap; max-width: 92%; overflow:hidden; text-overflow:ellipsis; } .corner{ position: sticky; top:0; left:0; z-index:8; background: var(--panel); border-bottom:1px solid var(--line); border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; } /* Roter Lösch-Knopf vergangener Tage – rund, in der Ecke des Rasters */ .corner .btn-trash{ width:32px; height:32px; padding:0; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action: manipulation; background: linear-gradient(180deg, #C7574D, var(--danger)); color:#fff; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .corner .btn-trash .icon{ width:17px; height:17px; } .corner .btn-trash:hover{ transform: scale(1.08); box-shadow: var(--shadow-md); } .corner .btn-trash:active{ transform: scale(.94); } .col-head{ position: sticky; top:0; z-index:7; background: var(--panel); /* über Balken (.neu 6, :hover 4) – sie laufen beim Scrollen darunter durch */ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding: 7px 4px; text-align:center; display:flex; align-items:center; justify-content:center; } /* Nur eine Nummer im Kreis – die Spalten tragen keine Namen (Wunsch). */ .col-nr{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--bg); border:1px solid var(--line); font-family: var(--font-sans); font-weight:700; font-size:13px; color: var(--ink); line-height:1; font-variant-numeric: tabular-nums; user-select:none; } .time-col{ position: sticky; left:0; z-index:3; background: var(--panel); border-right:1px solid var(--line); } /* Zeilenhöhe = SLOT_PX in app.js (38 px). Uhrzeit mittig; der Innenabstand links (7 px) hält dauerhaft Platz für den Warnstreifen frei. */ .time-slot{ height: 38px; font-size:13px; font-weight:800; color: var(--ink); display:flex; align-items:center; justify-content:center; padding: 0 2px 0 7px; border-bottom:1px solid var(--grid-half); position:relative; font-variant-numeric: tabular-nums; } /* Vergangener Tag: die ganze Zeitspalte rot. */ .grid-scroll.vergangen .time-slot{ color: var(--danger); } /* Keine freie Spalte mehr: durchgehend rotes Band links neben der Uhrzeit. */ .time-slot.voll::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background: var(--danger); } /* Halbe Stunden (…:30) hellgrau hinterlegt – über die ganze Kalenderbreite */ .time-slot.half{ border-bottom:1px solid var(--line); background: var(--row-half); } .emp-col{ border-right:1px solid var(--line); position:relative; } .slot-cell{ height: 38px; border-bottom:1px solid var(--grid-half); cursor:pointer; transition: background .1s; position: relative; /* Träger für den roten Strich gesperrter Zeilen */ } .slot-cell.half{ border-bottom:1px solid var(--line); background: var(--row-half); } .slot-cell:hover{ background: rgba(176,141,87,.08); } /* Gesperrte Zeile: roter Strich mittig durch den noch freien Platz. */ .slot-cell.gesperrt{ cursor: default; } .slot-cell.gesperrt::after{ content:''; position:absolute; left:3px; right:3px; top:50%; height:2px; margin-top:-1px; background: var(--danger); border-radius:1px; pointer-events:none; } .slot-cell.gesperrt:hover{ background: transparent; } /* Schloss-Spalte ganz rechts: je Zeile ein Knopf. Klebt beim seitlichen Scrollen am rechten Rand (Gegenstück zur .time-col links). */ .sperr-col{ position: sticky; right:0; z-index:3; background: var(--panel); border-left:1px solid var(--line); } .sperr-btn{ display:flex; align-items:center; justify-content:center; width:100%; height:38px; padding:0; border:none; border-bottom:1px solid var(--grid-half); background: transparent; cursor:pointer; color: var(--ink-soft); opacity:.32; touch-action: manipulation; transition: opacity .12s var(--ease), background-color .12s var(--ease); } .sperr-btn .icon{ width:15px; height:15px; } .sperr-btn.half{ border-bottom:1px solid var(--line); background: var(--row-half); } .sperr-btn:hover:not(:disabled){ opacity:1; background: rgba(176,141,87,.12); } .sperr-btn.zu{ opacity:1; background: var(--danger-soft); color: var(--danger); } .sperr-btn:disabled{ opacity:.12; cursor:not-allowed; } /* Der Kopf muss rechts kleben wie die Spalte darunter. `position:sticky` und `top:0` kommen von `.col-head`; hier kommt `right:0` dazu. */ .sperr-kopf{ right:0; z-index:8; border-left:1px solid var(--line); color: var(--ink-soft); } .sperr-kopf .icon{ width:16px; height:16px; } /* Terminbalken: Pastellfarbe der Dienstleistung (--bar) mit passendem Schatten in der kräftigen Farbe (--dot). Beide werden je Balken als Inline-Variablen gesetzt – so funktionieren alle 10 Farben mit EINER Regel. Zwei Zeilen: Kundenname und darunter Dienstleistung · Dauer. */ .appt{ --bar: var(--s10-bar); --dot: var(--s10); position:absolute; left:4px; right:4px; border-radius: 10px; padding: 3px 26px 3px 9px; /* rechts Platz für den Anwesenheits-Knopf */ cursor:pointer; overflow:hidden; color: var(--appt-text); display:flex; align-items:center; background: var(--bar); box-shadow: 0 1px 2px rgba(58,42,32,.12), 0 4px 11px color-mix(in srgb, var(--dot) 24%, transparent); transition: transform .18s var(--ease), box-shadow .18s var(--ease); touch-action: manipulation; } /* `position:relative; z-index:1` ist zwingend, nicht Zierde: Der grüne Blink-Schleier (.appt.neu::before) ist absolut positioniert und wird nach ALLEN nicht positionierten Inhalten gemalt – unabhängig von der Reihenfolge im HTML. Der Kundenname läge sonst darunter und wäre während der Sekunden des Blinkens kaum zu lesen. */ .appt-text{ flex:1; min-width:0; position:relative; z-index:1; } .appt .name{ font-weight:700; font-size:13px; color: var(--appt-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.15; } .appt-info{ font-size:11px; font-weight:600; line-height:1.2; margin-top:1px; color: color-mix(in srgb, var(--appt-text) 62%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Höhere Balken (60 Minuten und mehr): Inhalt oben – auf Höhe der Startzeit – und der Name darf auf zwei Zeilen umbrechen (lange Namen bleiben lesbar). */ .appt.hoch{ align-items:flex-start; padding-top:5px; } .appt.hoch .name{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } /* Bei hohen Balken sitzt der Haken auf Höhe der ERSTEN Textzeile. */ .appt.hoch .arrive-btn{ top:5px; transform:none; } /* Schmale Spalten (Tablet quer mit vielen Spalten, Handy): app.js setzt .eng am Raster, sobald eine Spalte schmaler als ENG_SPALTE_W ist. Der Name darf dann auch im 30-Minuten-Balken zweizeilig laufen; die Zusatzzeile (Dienstleistung · Dauer) bleibt den hohen Balken vorbehalten, und dort sitzt der Haken unten rechts, damit der Name die volle Breite hat. */ .grid-scroll.eng .appt{ left:2px; right:2px; border-radius:8px; padding: 3px 21px 3px 6px; } .grid-scroll.eng .appt .name{ font-size:12px; letter-spacing:-.01em; line-height:1.12; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .grid-scroll.eng .appt:not(.hoch) .appt-info{ display:none; } .grid-scroll.eng .appt.hoch{ padding: 4px 6px 24px 6px; } .grid-scroll.eng .appt.hoch .appt-info{ font-size:10.5px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } /* 60 Minuten (72 px): zwei Info-Zeilen reichten bis in den Haken unten rechts */ .grid-scroll.eng .appt.hoch.knapp .appt-info{ -webkit-line-clamp:1; white-space:nowrap; display:block; text-overflow:ellipsis; overflow:hidden; } .grid-scroll.eng .appt.hoch .arrive-btn{ top:auto; bottom:4px; right:4px; } .grid-scroll.eng .arrive-btn{ right:3px; width:17px; height:17px; } .grid-scroll.eng .col-nr{ width:23px; height:23px; font-size:12px; } .appt:hover{ transform: translateY(-1px); z-index:4; box-shadow: 0 3px 6px rgba(58,42,32,.14), 0 10px 22px color-mix(in srgb, var(--dot) 34%, transparent); } /* Gerade gespeicherter Termin: 3 langsame Durchläufe à 2 s = 6 s gesamt (HERVORHEB_MS in app.js muss dazu passen). Das Grün liegt als SCHLEIER (::before) über dem Balken – nur so blinkt auch ein Doppeltermin mit Farbverlauf. Der Versatz --anim-delay setzt das Blinken nach einem Neuzeichnen fort statt es neu zu starten. */ @keyframes appt-neu-glanz{ 0%, 100%{ box-shadow: 0 0 14px 3px var(--appt-neu), 0 3px 9px rgba(58,42,32,.20); } 50% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--appt-neu) 0%, transparent), 0 2px 6px rgba(58,42,32,.10); } } @keyframes appt-neu-schleier{ 0%, 100%{ opacity:.9; } 50% { opacity:0; } } .appt.neu{ animation: appt-neu-glanz 2s var(--ease) 3; z-index:6; } .appt.neu::before{ content:''; position:absolute; inset:0; border-radius:inherit; background: var(--appt-neu); pointer-events:none; animation: appt-neu-schleier 2s var(--ease) 3; animation-delay: var(--anim-delay, 0s); } /* ---------- Verschieben per Ziehen ---------- Der Balken rastet auf den 30-Minuten-Takt und auf ganze Spalten ein. `transition:none` ist zwingend: sonst hinkt er sichtbar nach. */ .appt.zieht{ transition: none !important; z-index: 40; cursor: grabbing; box-shadow: 0 6px 18px rgba(58,42,32,.30), 0 0 0 2px var(--gold); opacity: .92; } /* Losgelassen, aber noch nicht gespeichert: Der Balken bleibt ohne Überblendung auf dem Zielplatz stehen, bis neu gezeichnet wird. */ .appt.zieht-wartet{ transition: none !important; z-index: 40; } /* Während des Ziehens darf die Seite nicht mitwandern und nichts markieren. */ body.zieht-gerade{ user-select: none; -webkit-user-select: none; touch-action: none; } body.zieht-gerade .appt.zieht{ touch-action: none; } /* Kleine Anzeige der Ziel-Uhrzeit über dem gezogenen Balken */ .zieh-marke{ position: fixed; z-index: 70; transform: translateX(-50%); background: var(--ink-fill); color: var(--ink-fill-text); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity .12s var(--ease); font-variant-numeric: tabular-nums; } .zieh-marke.show{ opacity: 1; } /* Gerade gelöschter Termin: grau, blinkt und verschwindet. `pointer-events: none` ist der Kern – Klicks gehen durch ihn hindurch an die Zelle darunter, der Platz ist sofort neu vergebbar. Steht NACH .neu. */ @keyframes appt-weg{ 0%, 100%{ opacity: .9; } 50% { opacity: .15; } } .appt.geloescht{ background: var(--appt-weg); box-shadow: 0 1px 2px rgba(58,42,32,.10); pointer-events: none; animation: appt-weg 2s var(--ease) 2; z-index: 3; } .appt.geloescht .name{ color: var(--appt-weg-text); font-weight:600; text-decoration: line-through; } @media (prefers-reduced-motion: reduce){ .appt.geloescht{ opacity: .55; } /* kein Blinken – nur ruhig ausgegraut */ .appt.neu{ box-shadow: 0 0 14px 3px var(--appt-neu), 0 3px 9px rgba(58,42,32,.20); } .appt.neu::before{ opacity:.55; } } /* Anwesenheitsstatus: heller Kreis = gebucht, grün mit Haken = Kunde ist da */ .arrive-btn{ touch-action: manipulation; position:absolute; right:5px; top:50%; transform: translateY(-50%); width:19px; height:19px; border-radius:50%; cursor:pointer; background: rgba(255,255,255,.85); border:1.5px solid rgba(33,28,23,.35); color: transparent; padding:0; display:flex; align-items:center; justify-content:center; transition: background .12s, border-color .12s; } .arrive-btn .icon{ width:12px; height:12px; stroke-width:3; } .arrive-btn:hover{ border-color: rgba(33,28,23,.6); } .arrive-btn.arrived{ background: #2E8B46; border-color:#2E8B46; color:#fff; } /* Vergangene Tage sind Archiv: Der Haken bedeutet dort „war da". Rot statt Gruen. Steht NACH der gruenen Regel, sonst gewinnt Gruen. */ .grid-scroll.vergangen .arrive-btn.arrived{ background: var(--danger); border-color: var(--danger); } /* Dezente Jetzt-Markierung – nur in der linken (fixierten) Zeitspalte */ .now-marker{ position:absolute; left:0; right:0; height:0; border-top:2px solid var(--danger); z-index:6; pointer-events:none; } .now-marker-dot{ position:absolute; right:-2px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--panel); animation: now-pulse 2.6s var(--ease) infinite; /* sanftes „live"-Signal */ } /* ---------- Fenster (Termin, Einstellungen, Rückfragen …) ---------- */ .overlay{ position:fixed; inset:0; background: var(--scrim); backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); display:flex; align-items:center; justify-content:center; z-index:50; } .overlay:not(.hidden){ animation: ov-in .25s var(--ease-out); } .overlay:not(.hidden) .modal{ animation: modal-in .4s var(--ease-spring); } .modal{ background: var(--panel); border-radius: var(--radius-lg); width: 400px; max-width: 92vw; padding: 22px; box-shadow: var(--shadow-xl); max-height: 92vh; overflow-y: auto; } .modal h3{ margin:0 0 14px 0; font-size:19px; } .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 14px; } .modal-titles{ min-width:0; } .modal-titles h3{ margin:0; } .modal-sub{ font-size: 13px; color: var(--ink-soft); margin-top: 3px; font-variant-numeric: tabular-nums; line-height:1.35; } .field{ margin-bottom: 13px; } .field label{ display:block; font-size:12px; color: var(--ink-soft); margin-bottom:5px; } .field input, .field select{ width:100%; padding: 9px 10px; border-radius: 9px; border:1px solid var(--line); font-family: var(--font-sans); font-size:14px; background: var(--input-bg); color: var(--ink); } .field input:focus, .field select:focus{ outline: 1px solid var(--gold); } .field select{ height:46px; } /* Eingeklappte, selten gebrauchte Teile des Terminfensters */ .field-toggle{ margin-bottom: 8px; } .link-toggle{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; padding: 4px 0; color: var(--gold); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor:pointer; touch-action: manipulation; } .link-toggle .icon{ width:16px; height:16px; } .field-toggle .row2, .field-toggle .persons-pick{ margin-top: 8px; } .row2{ display:flex; gap:10px; align-items:flex-start; } .row2 > div{ flex:1; margin-bottom:0; } /* Spalten-Wähler −/+ */ .col-stepper{ display:flex; align-items:center; gap:10px; height:46px; } .col-stepper button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background: var(--panel); color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; touch-action: manipulation; } .col-stepper button:hover{ border-color: var(--gold); } .col-stepper button:disabled{ opacity:.35; cursor:not-allowed; } .col-stepper span{ font-family: var(--font-serif); font-size: 19px; min-width: 26px; text-align:center; } .modal-actions{ display:flex; gap:10px; margin-top:18px; } /* Gleiche Knopfgrößen unabhängig von der Sprache – über gleiche ANTEILE. `min-width:0` ist zwingend, sonst schrumpft ein Flex-Kind nicht unter seine Inhaltsbreite. */ .modal-actions .btn{ flex: 1 1 0; min-width: 0; text-align:center; white-space:nowrap; padding-left:10px; padding-right:10px; } .warn{ background: var(--danger-soft); color: var(--danger); border-radius:8px; padding:9px 10px; font-size:12.5px; margin-bottom:12px; display:none; } .warn.show{ display:block; } /* Terminfenster an einem vergangenen Tag: Es laesst sich nur noch loeschen. */ .modal.nur-loeschen .field, .modal.nur-loeschen .row2{ pointer-events:none; opacity:.5; } .past-hint{ margin:-2px 0 12px; padding:9px 12px; border-radius:12px; background: color-mix(in srgb, var(--danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); font-size:13px; font-weight:700; line-height:1.35; } /* Namensvorschläge unter dem Kundenfeld (Stammkundinnen) */ .suggest-wrap{ position:relative; } .suggest{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; background: var(--panel); border:1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); overflow:hidden; } .suggest button{ display:block; width:100%; text-align:left; border:none; background:transparent; padding: 9px 12px; font-family: var(--font-sans); font-size:14px; color: var(--ink); cursor:pointer; } .suggest button:hover{ background: var(--bg); } /* Auswahl von Personenanzahl, Dienstleistung und Dauer im Terminfenster */ .persons-pick, .treatment-pick, .duration-pick{ display:flex; gap:6px; } .persons-pick button, .treatment-pick button, .duration-pick button{ touch-action: manipulation; flex:1; height:38px; border:1px solid var(--line); background: var(--input-bg); border-radius:9px; cursor:pointer; font-family: var(--font-sans); font-size:13.5px; font-weight:600; color: var(--ink); transition: background .12s, border-color .12s, color .12s; padding:0 4px; } .persons-pick button:hover, .treatment-pick button:hover, .duration-pick button:hover{ border-color: var(--gold); } .persons-pick button.active, .duration-pick button.active{ background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-text); } /* Dienstleistungswahl: bis zu 8 Knöpfe, umbruchfähig (2 je Zeile) */ .treatment-pick{ flex-wrap: wrap; } .treatment-pick button{ height:40px; flex: 1 1 42%; font-family: var(--font-serif); font-size:15px; font-weight:500; } /* Aktive Dienstleistung in ihrer Pastellfarbe (Inline-Variablen wie .appt) */ .treatment-pick button.active{ background: var(--bar); border-color: var(--dot); color: var(--appt-text); font-weight:600; } .persons-hint{ display:block; color: var(--ink-soft); font-style:italic; font-size:12px; margin-top:6px; } /* ---------- Anschlusstermin (Doppeltermin) ---------- Im Terminfenster nur ein Knopf; der Anschluss selbst hat ein eigenes Fenster (.modal.follow) mit Vorschau der Kette. */ .follow-add{ width:100%; margin-top:14px; padding:10px 12px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; border:1px dashed var(--linked-line); background: transparent; font-family: var(--font-sans); font-size:14px; font-weight:600; color: var(--linked); touch-action: manipulation; transition: background-color .15s var(--ease), border-color .15s var(--ease); } .follow-add .icon{ width:17px; height:17px; } .follow-add:hover{ background: var(--linked-soft); border-color: var(--linked); } .modal.follow{ width: 420px; } /* Vorschau: Kundenname, darunter je Teil eine Zeile – der neue Teil gestrichelt */ .follow-kette{ display:flex; flex-direction:column; gap:5px; margin: 0 0 14px; padding: 10px; border-radius: 14px; background: var(--input-bg); border:1px solid var(--line); } .fk-kunde{ font-weight:700; font-size:15px; color: var(--ink); padding: 0 2px 3px; overflow-wrap:anywhere; } .fk-zeile{ --bar: var(--s10-bar); --dot: var(--s10); display:flex; align-items:center; gap:8px; min-height:34px; padding: 0 10px; border-radius: 9px; background: var(--bar); color: var(--appt-text); border: 1.5px solid transparent; font-size:13.5px; } .fk-name{ font-weight:700; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Uhrzeit rechtsbündig; das „NEU"-Schild steht direkt hinter dem Namen */ .fk-zeit{ font-weight:600; font-variant-numeric: tabular-nums; flex:none; margin-left:auto; } /* Bisherige Teile treten zurück, der neue steht vorn */ .fk-zeile:not(.neu){ opacity:.62; } .fk-zeile.neu{ border-color: var(--dot); border-style: dashed; } .fk-zeile.leer{ background: transparent; border-color: var(--line); color: var(--ink-soft); } .fk-zeile.leer .fk-name{ font-weight:600; } .fk-neu{ flex:none; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding: 2px 7px; border-radius:999px; background: var(--panel); color: var(--ink); } /* Dauer, die an dieser Stelle nicht passt: blass, bleibt aber tippbar */ .duration-pick button.passt-nicht:not(.active){ opacity:.4; text-decoration: line-through; } .duration-pick button.passt-nicht.active{ background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .duration-pick button:disabled{ opacity:.35; cursor:not-allowed; } .modal-actions .btn:disabled{ opacity:.45; transform:none; box-shadow:none; } /* ---------- Rückfragen-Fenster (statt confirm()/alert() des Browsers) ---------- */ .modal.frage{ max-width: 420px; } .frage-text{ white-space: pre-line; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } /* ---------- Einstellungen (ein Fenster für alles) ---------- */ .modal.settings{ width: 600px; padding: 0; display:flex; flex-direction:column; max-height: 92vh; } .modal.settings .modal-head{ padding: 18px 22px 12px; border-bottom: 1px solid var(--line); margin:0; align-items:center; } .set-body{ overflow-y:auto; padding: 4px 22px 22px; } .set-section{ padding: 14px 0; border-bottom: 1px solid var(--line); } .set-section:last-child{ border-bottom:none; } .set-h{ font-size: 12px; font-weight: 700; letter-spacing:.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; } .set-hint{ font-size: 12.5px; color: var(--ink-soft); line-height:1.4; margin: 0 0 10px; } .set-row{ display:flex; align-items:center; gap:10px; font-size:14px; color: var(--ink); padding: 5px 0; } .set-row .set-lbl{ flex:1; } .set-row .set-val-text{ font-size:13px; font-weight:600; color: var(--ink-soft); } .set-row button.count{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background: var(--panel); cursor:pointer; display:flex; align-items:center; justify-content:center; color: var(--ink); touch-action: manipulation; } .set-row button.count .icon{ width:16px; height:16px; } .set-row button.count:hover{ border-color: var(--gold); } .set-row button.count:disabled{ opacity:.35; cursor:not-allowed; } .set-row .val{ font-family: var(--font-serif); font-size:17px; min-width:24px; text-align:center; } /* Öffnungszeiten: zwei Auswahllisten „von – bis" */ .set-hours{ display:flex; align-items:center; gap: 8px; } .set-hours select{ font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); cursor: pointer; } .set-hours-sep{ color: var(--ink-soft); } /* Studio-Name ändern */ .set-name{ display:flex; gap:8px; } .set-name input{ flex:1; min-width:0; padding: 9px 12px; border-radius: 10px; border:1px solid var(--line); font-family: var(--font-sans); font-size:14px; background: var(--input-bg); color: var(--ink); } .set-name input:focus{ outline:1px solid var(--gold); } .set-name .btn{ padding: 9px 14px; font-size:13.5px; } .set-mail{ font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Knopfreihen (Konto) */ .set-actions{ display:flex; flex-wrap:wrap; gap:8px; } .set-actions .btn{ padding: 9px 14px; font-size: 13.5px; } .set-actions .btn-danger-ghost{ background: var(--panel); border:1px solid var(--line); color: var(--danger); box-shadow: var(--shadow-sm); } .set-actions .btn-danger-ghost:hover{ border-color: var(--danger); } /* Kleine Wahl-Chips (Sprache) */ .set-chips{ display:flex; gap:6px; } .set-chips button{ height:34px; padding: 0 14px; border:1px solid var(--line); background: var(--input-bg); border-radius:999px; cursor:pointer; font-family: var(--font-sans); font-size:13.5px; font-weight:600; color: var(--ink); touch-action: manipulation; } .set-chips button.active{ background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-text); } /* Schiebeschalter (An/Aus). `.set-row .switch` – zwei Klassen, damit keine allgemeine Knopfregel dazwischenfunkt. */ .set-row .switch{ position:relative; flex:none; width:46px; height:26px; padding:0; border-radius:999px; border:1px solid var(--line); background: var(--bg); cursor:pointer; touch-action: manipulation; transition: background-color .18s var(--ease), border-color .18s var(--ease); } .set-row .switch .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background: var(--panel); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-spring); } .set-row .switch.an{ background: var(--ok); border-color: var(--ok); } .set-row .switch.an .knob{ transform: translateX(20px); background:#fff; } .set-row .switch:hover{ border-color: var(--gold); } .set-footer{ display:flex; flex-wrap:wrap; gap: 6px 14px; padding-top: 14px; font-size: 12px; color: var(--ink-soft); } /* Dienstleistungs-Karten in den Einstellungen */ .svc-list{ display:flex; flex-direction:column; gap:8px; } .svc-card{ border:1px solid var(--line); border-radius: var(--radius); background: var(--input-bg); padding: 10px 12px; display:flex; flex-direction:column; gap:8px; } .svc-head{ display:flex; align-items:center; gap:8px; } .svc-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; } .svc-name{ font-weight:700; font-size:14px; } .svc-remove{ margin-left:auto; width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background: var(--panel); color: var(--danger); cursor:pointer; display:flex; align-items:center; justify-content:center; } .svc-remove .icon{ width:14px; height:14px; } .svc-remove:hover{ border-color: var(--danger); } .svc-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--ink-soft); } .svc-row .lbl{ width:52px; flex:none; } /* Dauer-Auswahl: vier kleine Chips */ .svc-durations{ display:flex; gap:5px; flex:1; } .svc-durations button{ flex:1; height:28px; border:1px solid var(--line); background: var(--panel); border-radius:7px; cursor:pointer; font-family: var(--font-sans); font-size:12.5px; color: var(--ink); padding:0; touch-action: manipulation; } .svc-durations button.active{ background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-text); font-weight:700; } /* Farbwahl: 8 runde Flächen */ .svc-colors{ display:flex; gap:5px; flex:1; flex-wrap:wrap; } .svc-colors button{ position:relative; width:24px; height:24px; border-radius:50%; cursor:pointer; padding:0; border:2px solid transparent; } .svc-colors button.active{ border-color: var(--ink); } .svc-colors button:disabled{ cursor:not-allowed; } /* Schon von einer anderen Dienstleistung belegte Farbe: blass und mit rotem X */ .svc-colors button.belegt{ opacity:.45; } .svc-colors button.belegt::after{ content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; line-height:1; color: var(--danger); text-shadow: 0 0 2px var(--panel), 0 0 2px var(--panel); } /* Plätze-Zähler */ .svc-res{ display:flex; align-items:center; gap:8px; } .svc-res button{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background: var(--panel); cursor:pointer; display:flex; align-items:center; justify-content:center; color: var(--ink); touch-action: manipulation; } .svc-res button .icon{ width:14px; height:14px; } .svc-res button:hover{ border-color: var(--gold); } .svc-res button:disabled{ opacity:.35; cursor:not-allowed; } .svc-res .val{ font-family: var(--font-serif); font-size:15px; color: var(--ink); min-width:20px; text-align:center; } .svc-res .svc-res-hint{ font-size:11.5px; color: var(--ink-soft); } /* „+ Dienstleistung hinzufügen": ein Knopf je noch nicht aktivem Typ */ .svc-add{ display:flex; flex-wrap:wrap; gap:6px; padding: 8px 0 0; } .svc-add button{ border:1px dashed var(--line); background:transparent; border-radius:999px; padding:7px 12px; cursor:pointer; font-family: var(--font-sans); font-size:12.5px; color: var(--ink); touch-action: manipulation; } .svc-add button:hover{ border-color: var(--gold); } /* ---------- Einrichtungs-Assistent ---------- */ .modal.setup{ width: 460px; } .modal.setup .lock-wordmark{ width: 190px; margin: 2px auto 12px; } .modal.setup h3{ text-align:center; margin:0 0 4px; font-family: var(--font-serif); font-weight:600; font-size: 25px; } .setup-sub{ text-align:center; color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; line-height:1.45; } .setup-block{ padding: 13px 0; border-top: 1px solid var(--line); } .setup-q{ font-weight: 700; font-size: 14.5px; margin-bottom: 4px; } .setup-hint{ font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; line-height:1.4; } .setup-services{ display:flex; flex-wrap:wrap; gap:6px; } .setup-services button{ --bar: var(--s10-bar); --dot: var(--s10); height:36px; padding: 0 14px; border:1px solid var(--line); background: var(--input-bg); border-radius:999px; cursor:pointer; font-family: var(--font-sans); font-size:13.5px; font-weight:600; color: var(--ink); touch-action: manipulation; transition: background .12s, border-color .12s; } .setup-services button.active{ background: var(--bar); border-color: var(--dot); color: var(--appt-text); } .modal.setup .btn-block{ margin-top: 12px; padding: 13px; font-size: 15px; } /* ---------- Nachrichten vom Team, Kontakt, gesperrtes Konto ---------- (ADMIN-KONZEPT.md Abschnitt 6; Logik in app.js „Nachrichten vom Team") */ /* Knopf mit Symbol vor der Beschriftung (Kontakt aufnehmen) */ .btn-mit-symbol{ display:inline-flex; align-items:center; justify-content:center; gap:8px; } .btn-mit-symbol .icon{ width:18px; height:18px; } .btn-block.btn-mit-symbol{ display:flex; width:100%; } /* Roter Punkt am Einstellungen-Knopf: ungelesene Nachricht. top/right 1px setzt ihn genau auf den Rand der Rundung – das passt für die Pille mit Beschriftung wie für den runden Symbol-Knopf (Handy, Tablet), weil beide Ecken denselben Radius (halbe Höhe) haben. */ #settingsBtn{ position:relative; } .nachricht-punkt{ position:absolute; top:1px; right:1px; width:11px; height:11px; border-radius:50%; background: var(--danger); box-shadow: 0 0 0 2px var(--panel); pointer-events:none; animation: punkt-puls 2.4s var(--ease) infinite; } @keyframes punkt-puls{ 0% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 70% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 8px color-mix(in srgb, var(--danger) 0%, transparent); } 100%{ box-shadow: 0 0 0 2px var(--panel), 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent); } } /* „Bewegung reduzieren": ruhiger Punkt. Die allgemeine Regel oben kürzt Animationen nur auf .01ms – ein Endlos-Puls flackerte damit trotzdem. */ @media (prefers-reduced-motion: reduce){ .nachricht-punkt{ animation: none; } } /* Postfach (Einstellungen → Nachrichten und Bildschirm „Konto gesperrt") */ .post-liste{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; } .post{ border:1px solid var(--line); border-radius: 12px; background: var(--input-bg); overflow:hidden; text-align:left; } .post.neu{ border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); } .post-kopf{ display:flex; flex-direction:column; gap:3px; width:100%; margin:0; border:none; background:transparent; padding: 9px 12px; cursor:pointer; text-align:left; font-family: var(--font-sans); color: var(--ink); touch-action: manipulation; transition: background-color .15s var(--ease); } .post-kopf:hover{ background: var(--bg); } .post-kopf:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; } .post-meta{ display:flex; align-items:center; gap:7px; font-size:11.5px; color: var(--ink-soft); min-width:0; } .post-punkt{ width:8px; height:8px; border-radius:50%; background: var(--danger); flex:none; } .post-von{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .post.eigene .post-von{ color: var(--gold); } .post-datum{ flex:none; font-variant-numeric: tabular-nums; } .post-titel{ font-size:14px; font-weight:500; line-height:1.35; overflow-wrap:anywhere; } .post.neu .post-titel{ font-weight:700; } .post-inhalt{ padding: 0 12px 11px; } .post-bezug{ font-size:12px; color: var(--ink-soft); margin: 0 0 6px; overflow-wrap:anywhere; } /* Nachrichtentext: Zeilenumbrüche des Absenders bleiben stehen (pre-line), lange Wörter/Links brechen um statt das Fenster zu sprengen. Markierbar, auch auf dem Sperrbildschirm (.lock-box verbietet sonst die Auswahl). */ .post-text{ font-size:13.5px; line-height:1.5; color: var(--ink); white-space: pre-line; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; } .post-antworten{ margin-top:8px; padding: 6px 12px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--font-sans); font-size:12.5px; font-weight:600; touch-action: manipulation; } .post-antworten:hover{ border-color: var(--gold); } .post-leer{ font-size:13px; color: var(--ink-soft); margin: 0 0 10px; text-align:left; } .post-mehr{ display:block; border:none; background:none; padding: 0 0 10px; cursor:pointer; font-family: var(--font-sans); font-size:12.5px; font-weight:600; color: var(--ink-soft); text-decoration: underline; touch-action: manipulation; } /* Kontakt-Fenster. z-index über dem Sperrbildschirm „Konto gesperrt" (1000), von dem aus es ebenfalls geöffnet wird. */ #kontaktOverlay{ z-index: 1005; } .modal.kontakt{ width: 480px; } .field textarea{ display:block; width:100%; min-height: 130px; resize: vertical; padding: 9px 10px; border-radius: 9px; border:1px solid var(--line); font-family: var(--font-sans); font-size:14px; line-height:1.45; background: var(--input-bg); color: var(--ink); } .field textarea:focus{ outline: 1px solid var(--gold); } .kontakt-zaehler{ font-size:11.5px; color: var(--ink-soft); text-align:right; margin-top:4px; font-variant-numeric: tabular-nums; } .kontakt-zaehler.voll{ color: var(--danger); font-weight:600; } /* Rückfragen liegen über ALLEM – auch über Anmelde-/PIN-Bildschirm (999) und „Konto gesperrt" (1000). Vorher lag das Fenster mit z-index 50 unter dem Anmelde- und PIN-Bildschirm: „PIN vergessen?" und „Passwort vergessen?" fragten unsichtbar nach. app.js schließt eine offene Rückfrage beim Sperren (startLock), damit sie nicht an der PIN vorbei bestätigt wird. */ #frageOverlay{ z-index: 1010; } /* Bildschirm „Konto gesperrt": Stil des Anmeldebildschirms, aber über der PIN-Sperre. Die Nachrichtenliste kann lang werden – deshalb scrollt der Hintergrund, und der Kasten sitzt per margin:auto mittig (align-items:center schnitte ihn oben ab, sobald er höher als der Bildschirm ist). Doppelte Klassen, weil .lock-overlay/.lock-box/.lock-sub erst WEITER UNTEN stehen und bei gleicher Gewichtung sonst gewännen (z-index 999, Breite 340 px). */ .lock-overlay.gesperrt-overlay{ z-index: 1000; overflow-y:auto; align-items:flex-start; justify-content:flex-start; padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); } .lock-box.gesperrt-box{ margin:auto; width: 440px; max-width: 100%; } .gesperrt-box h2{ color: var(--danger); } .lock-sub.gesperrt-text{ line-height:1.45; margin-bottom: 14px; } .gesperrt-grund{ text-align:left; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--danger-soft); border:1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .gesperrt-grund-h{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--danger); margin-bottom:3px; } .gesperrt-grund-text{ font-size:14px; line-height:1.45; color: var(--ink); white-space: pre-line; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; } .gesperrt-post{ text-align:left; margin: 4px 0 6px; } .gesperrt-box .lock-forgot{ margin-top: 14px; } /* Handy: weniger Innenabstand, sonst bleiben für Nachrichten kaum 280 px */ @media (max-width: 600.98px){ .lock-box.gesperrt-box{ padding: 24px 18px 20px; } } /* Statusmeldung („Nachricht gesendet") muss dann über dem Sperrbildschirm stehen. Nur in diesem Zustand: Sonst läge z. B. ein „Rückgängig" über der PIN-Sperre und ließe sich an ihr vorbei antippen. UNTER der Rückfrage (1010): Auf dem Handy liegt die Meldung sonst genau über deren Knöpfen. */ body.konto-gesperrt .status{ z-index: 1008; } /* ---------- Statusmeldung (unten rechts), optional mit Knopf ---------- */ .status{ position:fixed; bottom:18px; right:18px; z-index:70; display:flex; align-items:center; gap:10px; font-size:12.5px; color: var(--ink); background:var(--panel); padding:9px 14px; border-radius:20px; box-shadow: var(--shadow-md); border:1px solid var(--line); opacity:0; pointer-events:none; transition: opacity .3s; } .status.show{ opacity:1; pointer-events:auto; } .status-btn{ border:none; background: var(--ink-fill); color: var(--ink-fill-text); border-radius: 999px; padding: 5px 11px; font-size:12px; font-weight:700; cursor:pointer; font-family: var(--font-sans); touch-action: manipulation; } /* ---------- Übersicht: heute + 5 Tage, kompakt als Liste je Tag ---------- */ .week-section{ margin-top: 26px; } .week-head{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 12px; margin-bottom: 10px; } .week-head h2{ font-size: 17px; margin: 0; } .week-head .week-label{ justify-self: center; } .week-label{ font-size:15px; font-weight:800; color: var(--ink); text-align:center; white-space:nowrap; font-variant-numeric: tabular-nums; } .week-board{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .week-day{ background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid transparent; min-height: 120px; display:flex; flex-direction:column; overflow:hidden; } .week-day.is-selected{ border-color: var(--gold); box-shadow: var(--shadow), inset 0 3px 0 var(--gold); } .week-day-head{ padding: 10px 10px 8px; border-bottom:1px solid var(--line); text-align:center; display:flex; flex-direction:column; gap:1px; cursor:pointer; } .week-day-head:hover{ background: var(--bg); } .week-day-head .wd{ font-size:11px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; } .week-day-head .dd{ font-family: var(--font-serif); font-size:18px; } .week-day-head.is-today .dd{ color: var(--gold); } .week-day-head .wd-count{ font-size:10.5px; font-weight:600; color: var(--gold); } .week-list{ display:flex; flex-direction:column; gap:3px; padding: 8px; flex:1; } .week-item{ --bar: var(--s10-bar); --dot: var(--s10); display:flex; align-items:center; gap:7px; min-width:0; padding: 5px 8px; border:none; border-radius:8px; background: var(--bar); color: var(--appt-text); font-family: var(--font-sans); font-size: 12px; cursor:pointer; text-align:left; transition: transform .14s var(--ease), box-shadow .14s var(--ease); touch-action: manipulation; } .week-item:hover{ transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--dot) 35%, transparent); } .week-item .wi-time{ font-weight:800; font-variant-numeric: tabular-nums; flex:none; } .week-item .wi-name{ font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .week-item .wi-svc{ flex:none; font-size:11px; font-weight:600; color: color-mix(in srgb, var(--appt-text) 62%, transparent); } /* Frisch gespeicherte Termine blinken auch hier grün mit (Taktung wie im Tagesraster). */ @keyframes week-item-neu{ 0%, 100%{ background-color: var(--appt-neu); box-shadow: 0 0 7px 2px var(--appt-neu); } 50% { background-color: var(--bar); box-shadow: 0 0 0 0 color-mix(in srgb, var(--appt-neu) 0%, transparent); } } .week-item.neu{ animation: week-item-neu 2s var(--ease) 3; } @media (prefers-reduced-motion: reduce){ .week-item.neu{ background-color: var(--appt-neu); } } .week-empty{ flex:1; display:flex; align-items:center; justify-content:center; font-size:12px; color: var(--ink-soft); padding: 12px 6px; text-align:center; } .week-more{ border:none; background:none; font-family: var(--font-sans); font-size:12px; font-weight:600; color: var(--ink-soft); cursor:pointer; padding: 4px; text-align:center; } .week-add{ margin: 0 8px 8px; padding: 7px; border:1px dashed var(--line); background:transparent; border-radius: 8px; color: var(--ink-soft); font-family: var(--font-sans); font-size: 12.5px; font-weight:600; cursor:pointer; touch-action: manipulation; transition: border-color .14s var(--ease), color .14s var(--ease); } .week-add:hover{ border-color: var(--gold); color: var(--ink); } /* ---------- Anmelde- und PIN-Sperrbildschirm ---------- */ .lock-overlay{ position:fixed; inset:0; background: var(--bg); z-index: 999; display:flex; align-items:center; justify-content:center; } .lock-box{ background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 32px 32px 28px; width: 340px; max-width: 90vw; text-align:center; } .lock-overlay:not(.hidden) .lock-box{ animation: modal-in .5s var(--ease-spring); } /* Wortmarke auf Anmelde- und Sperrbildschirm – mittig, Bild aus dem Token --wortmarke (hell/dunkel). */ .lock-wordmark{ width: 236px; max-width:100%; aspect-ratio: 1200 / 198; margin: 8px auto 14px; background: var(--wortmarke) center/contain no-repeat; } /* Ein Satz, der sagt, was das hier ist – für Erstbesucher */ .lock-claim{ font-size: 13px; color: var(--ink-soft); margin: -4px 0 16px; line-height:1.4; } .lock-box h2{ margin: 0 0 4px 0; font-size: 20px; } /* Sprachwahl oben rechts auf dem Anmelde-/Registrierbildschirm: runder Knopf, darunter klappt die Auswahl mit allen Flaggen auf */ .auth-lang{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:3; } .lang-menu{ position:absolute; top:calc(100% + 10px); right:0; display:grid; grid-template-columns: repeat(3, 36px); gap:12px; padding:14px; background: var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow: var(--shadow-xl); animation: mp-in .2s var(--ease-out); } .lock-sub{ margin: 0 0 18px 0; font-size: 13px; color: var(--ink-soft); } .field-left{ text-align: left; } /* Umschalter Anmelden / Registrieren */ .auth-tabs{ display:flex; gap:6px; margin: 0 0 14px; background: var(--bg); border-radius: 999px; padding: 4px; } .auth-tabs button{ flex:1; border:none; background:transparent; border-radius:999px; padding: 8px 0; cursor:pointer; font-family: var(--font-sans); font-size:13.5px; font-weight:600; color: var(--ink-soft); transition: background .15s var(--ease), color .15s var(--ease); } .auth-tabs button.active{ background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); } .lock-info{ font-size: 12.5px; color: var(--ok); margin: 4px 0 14px 0; min-height: 0; } .pin-dots{ display:flex; justify-content:center; gap: 14px; margin-bottom: 8px; } .pin-dots span{ width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; transition: background .12s, border-color .12s; } .pin-dots span.filled{ background: var(--ink); border-color: var(--ink); } .lock-error{ min-height: 18px; font-size: 12.5px; color: var(--danger); margin: 4px 0 14px 0; } .pin-pad{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; } /* Schnell getippte Ziffern dürfen nicht als Doppeltipp gelten (iOS-Zoom); `user-select:none`, damit hastiges Tippen keine Textauswahl auslöst. */ .lock-box, .pin-pad, .pin-pad button{ touch-action: manipulation; user-select: none; -webkit-user-select: none; } .pin-pad button{ height: 54px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-family: var(--font-serif); font-size: 19px; color: var(--ink); cursor:pointer; } .pin-pad button:hover{ border-color: var(--gold); } .pin-pad button:disabled{ opacity:.35; cursor:not-allowed; border-color: var(--line); } .pin-pad button.ghost{ font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); background: transparent; border-color: transparent; } .lock-forgot{ display:block; width:100%; text-align:center; margin-top:16px; font-size:12.5px; color: var(--ink-soft); text-decoration: underline; cursor:pointer; } /* ---------- Bewegung: elegante Mikro-Animationen ---------- */ @keyframes ov-in{ from{ opacity:0; } to{ opacity:1; } } @keyframes modal-in{ from{ opacity:0; transform: translateY(10px) scale(.97); } to{ opacity:1; transform:none; } } @keyframes sheet-in{ from{ opacity:.6; transform: translateY(40px); } to{ opacity:1; transform:none; } } @keyframes now-pulse{ 0%{ box-shadow:0 0 0 2px var(--panel), 0 0 0 0 rgba(181,69,59,.45); } 70%{ box-shadow:0 0 0 2px var(--panel), 0 0 0 9px rgba(181,69,59,0); } 100%{ box-shadow:0 0 0 2px var(--panel), 0 0 0 0 rgba(181,69,59,0); } } /* ==================== Bildschirmgrößen ==================== Drei Stufen (Stand 2026-09-14, Wunsch „für Handy und Tablet optimieren, Spalten auf dem Tablet quer maximieren"): - Handy ≤ 600 px gestapelter Kopf, Datumsleiste klebt oben, Fenster als Blatt von unten - Tablet hoch 601–1023 Kopf in ZWEI Zeilen (Marke · Datum · Einstellungen / Spalten · Notiz), klebt oben - Tablet quer ≥ 1024 Kopf in EINER Zeile, klebt oben – die ganze und Rechner Höhe gehört dem Raster Niedrige Fenster (Handy quer, ≤ 500 px hoch): Der Kopf klebt nicht. Obergrenzen mit .98 (600.98px): Bei Seitenzoom gibt es Bruchteil-Breiten. Wie breit die Spalten werden, entscheidet app.js (spaltenMasse) – nicht diese Regeln. Die Handy-Grenze 600 steht auch in app.js (HANDY_MAX_W und matchMedia) – beide gemeinsam ändern. */ /* Übersicht: weniger Tage nebeneinander auf mittleren Breiten */ @media (max-width: 1300px){ .week-board{ grid-template-columns: repeat(3, 1fr); } } /* ---------- Tablet quer und Rechner: Kopf in einer Zeile ---------- */ @media (min-width: 1024px){ .kopf{ position: sticky; top: 0; z-index: 30; display:flex; align-items:center; gap: 14px; margin: calc(-1 * var(--app-pt)) calc(-1 * var(--app-px)) 10px; padding: 10px var(--app-px); background: var(--bg); } /* Die Kopfzeile löst sich auf: Marke und Einstellungen werden eigene Glieder der Zeile (Reihenfolge per order) */ .kopf .topbar{ display: contents; } .kopf .brand{ order:0; flex:none; gap:2px; } .kopf .wordmark{ width: 168px; } .kopf .studio-name{ max-width: 168px; font-size:12px; } .kopf .daybar{ order:1; flex:none; display:flex; align-items:center; gap:10px; margin:0; } .kopf .date-pick{ min-width: 176px; } .kopf .btn-today{ padding: 11px 18px; } .kopf .toolrow{ order:2; flex:1 1 auto; min-width:0; margin:0; flex-wrap:nowrap; gap:10px; } .kopf .notes-inline{ min-width: 120px; } .kopf #settingsBtn{ order:3; flex:none; } } @media (min-width: 1024px) and (max-width: 1599.98px){ .kopf .legend-chips, .kopf .notes-count{ display:none; } } @media (min-width: 1024px) and (max-width: 1279.98px){ .kopf .btn-icon .btn-label{ display:none; } .kopf .btn-icon{ width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; } } /* ---------- Tablet hoch: Kopf in zwei Zeilen ---------- */ @media (min-width: 601px) and (max-width: 1023.98px){ .kopf{ position: sticky; top: 0; z-index: 30; display:grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "brand day settings" "tools tools tools"; align-items:center; column-gap: 12px; row-gap: 8px; margin: calc(-1 * var(--app-pt)) calc(-1 * var(--app-px)) 10px; padding: 10px var(--app-px) 8px; background: var(--bg); } .kopf .topbar{ display: contents; } .kopf .brand{ grid-area: brand; gap:2px; } .kopf .wordmark{ width: min(150px, 100%); } .kopf .studio-name{ max-width: 100%; font-size:12px; } .kopf #settingsBtn{ grid-area: settings; justify-self:end; } .kopf .btn-icon .btn-label{ display:none; } .kopf .btn-icon{ width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; } .kopf .daybar{ grid-area: day; display:flex; align-items:center; gap:8px; margin:0; } .kopf .date-box{ padding: 3px 4px; } .kopf .daybar-nav{ width:38px; height:38px; } .kopf .date-pick{ min-width: 0; padding: 2px 24px 2px 10px; } .kopf .date-num{ font-size: 17px; } .kopf .btn-today{ padding: 10px 16px; font-size:14px; } .kopf .toolrow{ grid-area: tools; margin:0; gap:10px; flex-wrap:nowrap; } .kopf .legend-chips, .kopf .notes-count{ display:none; } .kopf .notes-inline{ flex:1 1 auto; min-width:0; } } /* Niedrige Fenster (Handy quer): Ein klebender Kopf fräße die halbe Höhe */ @media (min-width: 601px) and (max-height: 500px){ .kopf{ position: static; } } /* ---------- Tablet (hoch und quer): enger geschnürte Balken und Köpfe ---------- */ @media (min-width: 601px) and (max-width: 1400.98px){ .app{ --app-pt: 12px; --app-px: 10px; padding-bottom: 30px; } .appt{ padding: 3px 23px 3px 7px; } .appt .name{ font-size: 12.5px; } .col-head{ padding: 8px 3px; } .col-nr{ width:23px; height:23px; font-size:12px; } .time-slot{ font-size: 12.5px; padding-left: 6px; } } /* Finger statt Maus: keine Hover-Effekte, die nach dem Tippen „kleben". */ @media (hover: none){ .appt:hover{ transform: none; } .slot-cell:hover{ background: transparent; } .week-item:hover{ transform:none; box-shadow:none; } } /* 16 px verhindert das automatische Heranzoomen von iOS/iPadOS beim Antippen eines Eingabefelds */ @media (max-width: 1023.98px), (hover: none){ .field input, .field select, .field textarea, .set-hours select, #dayNotes, .set-name input{ font-size: 16px; } } /* ---------- Handy ---------- */ @media (max-width: 600.98px){ .app{ --app-pt: 10px; --app-px: 12px; padding-bottom: 24px; } /* Der Kopf-Container verschwindet als Kasten: Nur so kann die Datumsleiste an der ganzen Seite kleben (sticky wirkt nur innerhalb des Elternkastens). */ .kopf{ display: contents; } /* Kopfzeile: Wortmarke und Studio-Name in EINER Zeile, rechts der Menüknopf */ .topbar{ margin-bottom: 6px; gap: 10px; } .brand{ flex-direction: row; align-items: center; gap: 10px; } .wordmark{ width: 140px; } .studio-name{ max-width: 38vw; margin:0; font-size: 12px; } .btn-icon .btn-label{ display:none; } .btn-icon{ width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; } /* Datumsleiste klebt oben – beim Scrollen im Raster bleibt der Tag sichtbar */ .daybar{ position: sticky; top: 0; z-index: 30; background: var(--bg); margin: 0 -12px 8px; padding: 6px 12px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap: 8px; } .date-box{ gap: 2px; padding:4px 4px; min-width:0; flex: 1 1 auto; justify-content:space-between; } .daybar-nav{ width:36px; height:40px; } .date-pick{ min-width:0; flex: 0 1 auto; padding:2px 18px 2px 6px; } /* Auf dem Handy übernimmt der native Kalender – eigene Ansicht bleibt aus. */ .monthpick{ display:none !important; } .date-pick input[type=date]{ display:block; } .date-weekday{ font-size: 11px; } .date-num{ font-size: clamp(15px, 4.2vw, 18px); } .date-num, .date-weekday{ max-width:100%; overflow:hidden; text-overflow:ellipsis; } .date-caret{ right:2px; } .daybar > .btn-today{ flex:none; padding:11px 14px; font-size:14px; } .btn{ padding: 9px 14px; } /* Werkzeugzeile: Spalten-Pille und Notiz in einer Zeile, Legende weg */ .toolrow{ gap: 8px; margin-bottom: 10px; flex-wrap:nowrap; } .emp-control button{ width:34px; height:34px; } .legend-chips{ display:none; } .notes-inline{ flex: 1 1 120px; min-width: 0; } #dayNotes{ height: 40px; padding: 0 12px; } .notes-count{ display:none; } .time-slot{ font-size: 12px; padding-left: 6px; } /* Handy: Die Schloss-Spalte läuft NICHT mit, sondern steht am Ende der Zeile – so bleibt die volle Breite den Spalten. Beim Kopf wird nur die RECHTS-Verankerung gelöst; sticky/top müssen bleiben. */ .sperr-col{ position: static; } .sperr-kopf{ right: auto; z-index: 7; } /* Hinweis über den Spalten (nicht über der Zeitspalte), darf umbrechen */ .grid-hint{ top: 96px; left: calc(50% + 25px); width: max-content; max-width: calc(100% - 70px); white-space: normal; text-align:center; font-size: 12.5px; line-height:1.35; } /* Übersicht: zwei Tage nebeneinander, Dienstleistung weggelassen */ .week-section{ margin-top: 20px; } .week-board{ grid-template-columns: repeat(2, 1fr); gap: 8px; } .week-item{ padding: 7px 8px; } .week-item .wi-svc{ display:none; } .week-head{ grid-template-columns: 1fr; justify-items: center; gap: 4px; } .status{ bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; left: 12px; justify-content:center; } /* Fenster als Blatt von unten (Bottom-Sheet) */ .overlay{ align-items: flex-end; } .modal{ width: 100%; max-width: none; border-radius: 22px 22px 0 0; max-height: 94dvh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); } .overlay:not(.hidden) .modal{ animation: sheet-in .32s var(--ease-out); } .modal.settings{ height: 94dvh; padding: 0; } .modal.settings .set-body{ padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); } .modal.settings .modal-head{ padding: 16px 16px 10px; } .modal.setup{ padding-top: 14px; } .modal.frage{ max-width:none; } .treatment-pick button{ flex: 1 1 46%; height: 44px; } .duration-pick button, .persons-pick button{ height: 44px; } .modal-actions .btn{ padding-top: 13px; padding-bottom: 13px; } /* Anmeldebildschirm: Sprachwahl über dem Kasten statt in der Ecke daneben */ .lock-overlay{ flex-direction: column; gap: 14px; } .auth-lang{ position: relative; top:auto; right:auto; } .lang-menu{ right:auto; left:50%; margin-left:-83px; } }