/* ========================================================================= CI-Block: Corporate Design von NATASCHA LINDEMANN + Farben ausgelesen von nataschalindemann.plus. Alles Sichtbare haengt an diesen Variablen; darunter muss nichts angefasst werden. ========================================================================= */ /* Platzhalterschrift bis der Typekit-Kit fuer ss-pro (Sweet Sans Pro) da ist. Montserrat ist geometrisch-grotesk wie ss-pro und traegt gesperrte Versalien aehnlich. Selbst gehostet, damit aus dem Kurs keine Anfrage an Google Fonts geht. Das erspart die ganze Datenschutzdebatte. */ @font-face { font-family: "Montserrat Var"; src: url("vendor/montserrat.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } :root { /* "ss-pro" steht bewusst vorne: sobald der Typekit-Kit im von index.html eingebunden ist, uebernimmt die echte CI-Schrift ohne weitere Aenderung. */ --font-body: "ss-pro", "Montserrat Var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Farben von nataschalindemann.plus uebernommen. */ --bg: #f8f5f2; /* warmes Off-White, Seitenhintergrund */ --bg-sunken: #e8e2da; /* Codebloecke, Zitate */ --surface: #ffffff; /* Eingabefeld, helle Karten */ --fg: #1c1c1c; /* Textschwarz */ --fg-muted: #656565; /* Grau fuer Nebentexte */ --border: #e2ddd6; --user-bg: #ece6de; /* eigene Nachricht */ --accent: #def359; /* Lime, wie der CTA auf der Website */ --accent-fg: #1c1c1c; /* Schrift auf Lime ist schwarz, nicht weiss */ --danger: #93342c; --danger-bg: #f4e7e4; --radius: 14px; --radius-sm: 8px; --measure: 46rem; --gap: 1rem; --text: 1rem; --leading: 1.65; --tracking: 0.08em; /* Versalien werden im CI weit gesperrt */ } /* Bewusst kein Dark Mode: das NL+ Design ist hell. Falls doch gewuenscht, kommt hier ein @media (prefers-color-scheme: dark) mit denselben Variablen hin. */ /* ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* Muss !important sein: die display-Regeln unten sind spezifischer als die Browser-Regel fuer [hidden] und wuerden sie sonst aushebeln. */ [hidden] { display: none !important; } html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: var(--text)/var(--leading) var(--font-body); -webkit-text-size-adjust: 100%; } /* ---------------------------------------------------------------- Topbar */ .topbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .topbar__title { font-size: 0.8125rem; font-weight: 700; letter-spacing: var(--tracking); text-transform: uppercase; color: var(--fg); } .topbar__actions { display: flex; gap: 0.25rem; } /* ---------------------------------------------------------------- Thread */ .thread { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1rem 0.5rem; scrollbar-gutter: stable; } .thread > * { max-width: var(--measure); margin-inline: auto; } .empty { display: flex; flex-direction: column; min-height: 100%; text-align: center; color: var(--fg-muted); } /* Fester Abstand oben, der Rest geht an den Hinweis: der Gruss steht damit im oberen Drittel und der Hinweis am unteren Rand, ohne Loch dazwischen. */ .empty h1 { margin: 7vh 0 0.6rem; font-size: 1.375rem; font-weight: 700; letter-spacing: var(--tracking); color: var(--fg); } .empty p { margin: 0; } .empty .empty__actions { margin: 1.5rem 0 0; } .btn--outline { padding: 0.5rem 1rem; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-size: 0.875rem; } .btn--outline:hover:not(:disabled) { border-color: var(--fg); } .empty .empty__note { max-width: 34rem; margin: auto auto 0.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.8125rem; line-height: 1.5; } .msg { margin-bottom: 1.5rem; } .msg--user { display: flex; justify-content: flex-end; } .msg--user .msg__body { max-width: 85%; padding: 0.7rem 1rem; border-radius: var(--radius); background: var(--user-bg); overflow-wrap: anywhere; } .msg__text { white-space: pre-wrap; } .msg--assistant .msg__body { overflow-wrap: anywhere; } /* Markdown-Ausgabe */ .msg__body > :first-child { margin-top: 0; } .msg__body > :last-child { margin-bottom: 0; } .msg__body h1, .msg__body h2, .msg__body h3 { margin: 1.4em 0 0.5em; font-size: 1.05em; line-height: 1.35; } .msg__body p, .msg__body ul, .msg__body ol { margin: 0 0 0.85em; } .msg__body ul, .msg__body ol { padding-left: 1.3em; } .msg__body li { margin-bottom: 0.3em; } .msg__body a { color: inherit; } .msg__body code { padding: 0.12em 0.35em; border-radius: 4px; background: var(--bg-sunken); font: 0.875em var(--font-mono); } .msg__body pre { margin: 0 0 0.85em; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--bg-sunken); overflow-x: auto; } .msg__body pre code { padding: 0; background: none; } .msg__body blockquote { margin: 0 0 0.85em; padding-left: 1rem; border-left: 3px solid var(--border); color: var(--fg-muted); } .msg__body table { display: block; width: max-content; max-width: 100%; margin-bottom: 0.85em; border-collapse: collapse; overflow-x: auto; } .msg__body th, .msg__body td { padding: 0.4rem 0.7rem; border: 1px solid var(--border); text-align: left; } /* Blinkender Cursor während des Streamens */ .msg--streaming .msg__body::after { content: ""; display: inline-block; width: 0.5em; height: 1em; margin-left: 0.1em; background: currentColor; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .msg--streaming .msg__body::after { animation: none; } } /* ---------------------------------------------------------------- Hinweis */ .notice { max-width: var(--measure); margin: 0 auto 0.5rem; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font-size: 0.9rem; } /* Neutraler Ton für Statusmeldungen, die kein Fehler sind. */ .notice--info { background: var(--bg-sunken); color: var(--fg-muted); } /* --------------------------------------------------------------- Composer */ .composer { flex: 0 0 auto; padding: 0.5rem 1rem calc(0.9rem + env(safe-area-inset-bottom)); } .composer__box { display: flex; align-items: flex-end; gap: 0.5rem; max-width: var(--measure); margin-inline: auto; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .composer__box:focus-within { border-color: var(--fg); } .composer__box textarea { flex: 1 1 auto; max-height: 40vh; padding: 0.4rem 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1.5; resize: none; outline: none; } /* Vorschau der angehaengten Bilder, ueber dem Eingabefeld */ .attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: var(--measure); margin: 0 auto 0.5rem; } .attachment { position: relative; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .attachment img { width: 100%; height: 100%; object-fit: cover; display: block; } .attachment__remove { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 13px; line-height: 1; cursor: pointer; } /* Bilder in einer abgeschickten Nachricht */ .msg__images { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; margin-bottom: 0.4rem; } .msg__images img { max-width: 160px; max-height: 160px; border-radius: var(--radius-sm); display: block; } /* Ganzes Fenster als Ablagefläche */ body.is-dragging::after { content: "Bild hier ablegen"; position: fixed; inset: 0.75rem; display: grid; place-items: center; border: 2px dashed var(--fg); border-radius: var(--radius); background: color-mix(in srgb, var(--bg) 88%, transparent); font-weight: 600; letter-spacing: var(--tracking); text-transform: uppercase; font-size: 0.8125rem; pointer-events: none; } .composer__hint { max-width: var(--measure); margin: 0.5rem auto 0; color: var(--fg-muted); font-size: 0.75rem; text-align: center; } /* ---------------------------------------------------------------- Buttons */ .btn { border: 0; border-radius: var(--radius-sm); font: inherit; cursor: pointer; } .btn:disabled { cursor: default; opacity: 0.4; } .btn--ghost { padding: 0.35rem 0.7rem; background: none; color: var(--fg-muted); font-size: 0.8125rem; } .btn--ghost:hover:not(:disabled) { background: var(--bg-sunken); color: var(--fg); } .btn--icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; background: none; color: var(--fg-muted); } .btn--icon:hover:not(:disabled) { background: var(--bg-sunken); color: var(--fg); } .btn--send { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); } /* ------------------------------------------------------------------ Mobil */ @media (max-width: 640px) { /* Auf einem Touch-Gerät gibt es kein Shift+Enter, der Hinweis waere Ballast. */ .composer__hint-keys { display: none; } .topbar { padding: 0.6rem 0.75rem; } .thread { padding: 1rem 0.75rem 0.5rem; } .composer { padding: 0.4rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); } .composer__hint { margin-top: 0.35rem; } .empty h1 { margin-top: 5vh; font-size: 1.25rem; } .empty .empty__actions { margin-top: 1.25rem; } .empty .empty__note { padding-top: 0.75rem; font-size: 0.75rem; } .msg { margin-bottom: 1.15rem; } .msg--user .msg__body { max-width: 92%; } .msg__images img { max-width: 120px; max-height: 120px; } .btn--ghost { padding: 0.3rem 0.5rem; font-size: 0.75rem; } .topbar__actions { gap: 0.1rem; } } /* -------------------------------------------------------------- Turnstile */ .captcha { display: flex; justify-content: center; padding: 0 1rem 0.5rem; } .captcha:empty { display: none; }