/* Freundenetz — Sovereign-Look. Reduzierte Palette, klare Trennlinien, Symbol-First. Keine Glas-Verläufe. Theme-Schalter via data-theme="light|dark" auf . Ohne Attribut → System. Akzent-Farbe via data-akzent="indigo|green|purple|pink|orange" auf . */ /* Hell-Variablen — gelten ohne Attribut und bei data-theme="light" */ :root, :root[data-theme="light"] { --bg: #FAFAFA; --bg-elev: #FFFFFF; --bg-mute: #F4F4F6; /* Glas-Varianten für halbtransparente Karten über dem Body-Verlauf */ --karte-elev: rgba(255, 255, 255, 0.74); --karte-mute: rgba(220, 220, 228, 0.78); --glas: rgba(255, 255, 255, 0.62); --text: #0A0A0F; --text-mute: #5B5B66; --text-faint: #8B8B96; --line: rgba(10, 10, 15, 0.08); --line-strong: rgba(10, 10, 15, 0.16); --erfolg: #15803D; --warn: #B45309; --fehler: #B91C1C; --radius: 10px; --radius-lg: 14px; --schatten: 0 1px 2px rgba(10, 10, 15, 0.04); --schatten-md: 0 4px 12px rgba(10, 10, 15, 0.06); --schatten-lift: 0 6px 24px rgba(10, 10, 15, 0.08); } /* Dunkel — bei System mit prefers-color-scheme: dark, ODER explizit data-theme="dark" */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0A0A0F; --bg-elev: #14141B; --bg-mute: #1A1A22; --karte-elev: rgba(20, 20, 27, 0.68); --karte-mute: rgba(8, 8, 12, 0.7); --glas: rgba(20, 20, 27, 0.55); --text: #FAFAFA; --text-mute: #A0A0AC; --text-faint: #707080; --line: rgba(250, 250, 250, 0.08); --line-strong: rgba(250, 250, 250, 0.16); --schatten: 0 1px 2px rgba(0, 0, 0, 0.3); --schatten-md: 0 4px 16px rgba(0, 0, 0, 0.4); --schatten-lift: 0 8px 28px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --bg: #0A0A0F; --bg-elev: #14141B; --bg-mute: #1A1A22; --karte-elev: rgba(20, 20, 27, 0.68); --karte-mute: rgba(26, 26, 34, 0.62); --glas: rgba(20, 20, 27, 0.55); --text: #FAFAFA; --text-mute: #A0A0AC; --text-faint: #707080; --line: rgba(250, 250, 250, 0.08); --line-strong: rgba(250, 250, 250, 0.16); --schatten: 0 1px 2px rgba(0, 0, 0, 0.3); --schatten-md: 0 4px 16px rgba(0, 0, 0, 0.4); --schatten-lift: 0 8px 28px rgba(0, 0, 0, 0.5); } /* Akzent-Farben — passen zu beiden Themes (geprüft auf Kontrast). */ :root, :root[data-akzent="indigo"] { --akzent: #4F46E5; --akzent-hover: #4338CA; --akzent-soft: rgba(79, 70, 229, 0.10); } :root[data-akzent="green"] { --akzent: #16A34A; --akzent-hover: #15803D; --akzent-soft: rgba(22, 163, 74, 0.12); } :root[data-akzent="purple"] { --akzent: #9333EA; --akzent-hover: #7E22CE; --akzent-soft: rgba(147, 51, 234, 0.12); } :root[data-akzent="pink"] { --akzent: #DB2777; --akzent-hover: #BE185D; --akzent-soft: rgba(219, 39, 119, 0.12); } :root[data-akzent="orange"] { --akzent: #EA580C; --akzent-hover: #C2410C; --akzent-soft: rgba(234, 88, 12, 0.12); } /* Im Dunkelmodus die Akzente etwas heller — sonst zu dunkel auf schwarzem BG. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-akzent]), :root:not([data-theme="light"])[data-akzent="indigo"] { --akzent: #818CF8; --akzent-hover: #A5B4FC; --akzent-soft: rgba(129, 140, 248, 0.14); } :root:not([data-theme="light"])[data-akzent="green"] { --akzent: #4ADE80; --akzent-hover: #86EFAC; --akzent-soft: rgba(74, 222, 128, 0.14); } :root:not([data-theme="light"])[data-akzent="purple"] { --akzent: #C084FC; --akzent-hover: #D8B4FE; --akzent-soft: rgba(192, 132, 252, 0.16); } :root:not([data-theme="light"])[data-akzent="pink"] { --akzent: #F472B6; --akzent-hover: #F9A8D4; --akzent-soft: rgba(244, 114, 182, 0.16); } :root:not([data-theme="light"])[data-akzent="orange"] { --akzent: #FB923C; --akzent-hover: #FDBA74; --akzent-soft: rgba(251, 146, 60, 0.16); } } :root[data-theme="dark"][data-akzent="indigo"], :root[data-theme="dark"]:not([data-akzent]) { --akzent: #818CF8; --akzent-hover: #A5B4FC; --akzent-soft: rgba(129, 140, 248, 0.14); } :root[data-theme="dark"][data-akzent="green"] { --akzent: #4ADE80; --akzent-hover: #86EFAC; --akzent-soft: rgba(74, 222, 128, 0.14); } :root[data-theme="dark"][data-akzent="purple"] { --akzent: #C084FC; --akzent-hover: #D8B4FE; --akzent-soft: rgba(192, 132, 252, 0.16); } :root[data-theme="dark"][data-akzent="pink"] { --akzent: #F472B6; --akzent-hover: #F9A8D4; --akzent-soft: rgba(244, 114, 182, 0.16); } :root[data-theme="dark"][data-akzent="orange"] { --akzent: #FB923C; --akzent-hover: #FDBA74; --akzent-soft: rgba(251, 146, 60, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-size: 15px; color: var(--text); background: var(--bg-elev); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; } a { color: var(--akzent); text-decoration: none; } a:hover { color: var(--akzent-hover); text-decoration: underline; } h1 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.015em; font-weight: 700; } h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; } p { margin: 0; } .seite { max-width: none; margin: 0; padding: 0; } .seite--breit { max-width: none; } .seite--zentriert { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; max-width: none; } /* Rechte Spalte — Karten mit Glas-Effekt */ .rechts-karte { background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--schatten-md); } /* Geheim-Karte: exklusiver Vibe — Akzent-Border, Bonbon-Label, Einladen-Button */ .rechts-karte--geheim { border: 1px solid var(--akzent); background: linear-gradient(135deg, var(--akzent-soft), transparent 60%), var(--glas); position: relative; overflow: hidden; } .rechts-karte--geheim::before { content: ''; position: absolute; inset: -1px; background: linear-gradient(135deg, var(--akzent), transparent 50%); opacity: 0.06; pointer-events: none; } .rechts-karte--geheim h3 { font-size: 15px; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.3; } .geheim-bonbon { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--akzent); background: var(--bg-elev); border: 1px solid var(--akzent); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; } .geheim-btn { width: 100%; margin-top: 14px; background: var(--akzent); color: #fff; border: 0; padding: 10px 14px; font-weight: 600; font-size: 13.5px; border-radius: 10px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.18s ease; box-shadow: 0 4px 14px var(--akzent-soft); } .geheim-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--akzent-soft), 0 0 0 1px var(--akzent); } .geheim-fuss { font-size: 11px; color: var(--text-faint); margin-top: 8px; text-align: center; font-style: italic; } .fn-modal--geheim h2 { display: flex; align-items: center; gap: 8px; } .fn-modal--geheim { border: 1px solid var(--akzent); background: linear-gradient(135deg, var(--akzent-soft), transparent 50%), var(--bg-elev); } .rechts-karte h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; } .rechts-karte__pillen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .rechts-pille { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--bg-mute); border: 1px solid var(--line); font-size: 11px; color: var(--text-mute); font-weight: 500; } .kurz-gruppe { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 10px 0 4px; } .kurz-gruppe:first-of-type { margin-top: 6px; } .kurz-liste { margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; } .kurz-liste div { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; } .kurz-liste dt { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--text); background: var(--bg-mute); padding: 2px 0; border-radius: 5px; border: 1px solid var(--line); text-align: center; box-shadow: 0 1px 0 var(--line); } .kurz-liste dd { margin: 0; color: var(--text-mute); } .karte { background: var(--karte-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--schatten-md); } .karte + .karte { margin-top: 12px; } .karte--schmal { width: 100%; max-width: 420px; } .dezent { color: var(--text-mute); font-size: 13px; } .zentriert { text-align: center; } /* Sovereign-Banner — Vertrauens-Anker oben. Drei Zonen: Marke / User / Aktionen. Hintergrund = voll deckendes bg-elev + dezenter Akzent-Verlauf als Overlay, damit beim Scrollen kein Inhalt durchschimmert. */ .souv-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 10px 24px; background-color: var(--bg-elev); background-image: linear-gradient(135deg, var(--akzent-soft) 0%, var(--akzent-soft) 35%, color-mix(in oklab, var(--akzent-soft) 30%, transparent) 100%); border-bottom: 0; font-size: 12px; color: var(--text-mute); /* Bewusst NICHT sticky — der Vertrauens-Anker wird beim Laden einmal gezeigt und scrollt dann mit. Sticky hat in Verbindung mit den halbtransparenten Karten-Hintergründen reproduzierbar zu Geist-Pixeln geführt. */ position: relative; z-index: 1; } @media (prefers-color-scheme: dark) { .souv-bar { background: linear-gradient(135deg, var(--akzent-soft) 0%, var(--akzent-soft) 35%, transparent 90%), var(--bg); } } :root[data-theme="dark"] .souv-bar { background: linear-gradient(135deg, var(--akzent-soft) 0%, var(--akzent-soft) 35%, transparent 90%), var(--bg); } .souv-bar__zone { display: flex; align-items: center; gap: 10px; min-width: 0; } .souv-bar__zone--links { justify-content: flex-start; } .souv-bar__zone--mitte { justify-content: center; } .souv-bar__zone--rechts { justify-content: flex-end; } .souv-bar__marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 4px 6px; border-radius: 10px; } .souv-bar__marke:hover { background: var(--bg-mute); } .souv-bar__logo { width: 26px; height: 26px; border-radius: 7px; display: block; } .souv-bar__wort { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; } .souv-bar__wort .brand-blau { color: var(--akzent); } .souv-bar__wort .brand-grau { color: var(--text); } .souv-bar__tld { font-weight: 500; color: var(--text-mute); margin-left: 1px; } .souv-bar__user { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--karte-elev); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; max-width: 360px; } .souv-bar__user:hover { border-color: var(--akzent); transform: translateY(-1px); } .souv-bar__user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-mute); flex: 0 0 auto; box-shadow: 0 0 0 1px var(--bg-elev), 0 0 0 4px var(--stufe-color, var(--akzent)); animation: souv-user-puls 2.6s ease-in-out infinite; } @keyframes souv-user-puls { 0%, 100% { box-shadow: 0 0 0 1px var(--bg-elev), 0 0 0 4px var(--stufe-color, var(--akzent)), 0 0 0 4px color-mix(in oklab, var(--stufe-color, var(--akzent)) 55%, transparent); } 50% { box-shadow: 0 0 0 1px var(--bg-elev), 0 0 0 4px var(--stufe-color, var(--akzent)), 0 0 0 10px color-mix(in oklab, var(--stufe-color, var(--akzent)) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .souv-bar__user-avatar { animation: none; } } /* Stufenfarben für den User-Pill-Avatar in der Top-Bar */ .souv-bar__user--red { --stufe-color: #DC2626; } .souv-bar__user--orange { --stufe-color: #EA580C; } .souv-bar__user--green { --stufe-color: #15803D; } .souv-bar__user--blue { --stufe-color: #2563EB; } .souv-bar__user--warning { --stufe-color: #B45309; } .souv-bar__user-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .souv-bar__user-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .souv-bar__user-slug { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .souv-bar__pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--karte-elev); transition: border-color 0.15s ease; white-space: nowrap; } .souv-bar__pill:hover { border-color: var(--line-strong); } .souv-bar__logout { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--karte-elev); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .souv-bar__logout:hover { border-color: #DC2626; color: #DC2626; } .souv-bar__info { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--karte-elev); color: var(--text); cursor: pointer; padding: 0; transition: border-color 0.15s ease, color 0.15s ease; } .souv-bar__info:hover { border-color: var(--akzent); color: var(--akzent); } .souv-info-menu { position: fixed; z-index: 100; min-width: 240px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16); padding: 6px; display: flex; flex-direction: column; } .souv-info-menu__item { display: block; padding: 9px 12px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 13px; color: var(--text); text-decoration: none; border-radius: 8px; cursor: pointer; } .souv-info-menu__item:hover { background: var(--bg-mute); } .souv-info-menu__fuss { margin-top: 6px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--text-mute); } /* Trust-Dashboard-Modal — Vertrauens-Kennzahlen, getriggert aus dem Sovereign-Banner */ .trust-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 10, 15, 0.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .trust-modal__box { background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--schatten-lift); max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 22px 24px; } .trust-modal__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .trust-modal__kopf h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); } .trust-modal__zu { background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--text-mute); cursor: pointer; padding: 4px 10px; border-radius: 8px; } .trust-modal__zu:hover { background: var(--bg-mute); color: var(--text); } .trust-modal__intro { margin: 0 0 16px; font-size: 13px; } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .trust-zelle { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-mute); } .trust-zelle__icon { grid-row: 1 / span 2; font-size: 22px; align-self: center; } .trust-zelle__label { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; } .trust-zelle__wert { font-size: 16px; font-weight: 600; color: var(--text); word-break: break-word; } .trust-modal__fuss { margin: 16px 0 0; font-size: 11.5px; word-break: break-all; } @media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } } .souv-bar__pill--de::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); animation: souv-puls 2.4s ease-in-out infinite; } @keyframes souv-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } } @media (max-width: 900px) { .souv-bar { grid-template-columns: auto 1fr; } .souv-bar__zone--mitte { display: none; } } /* === Layout: 3-Spalten === */ /* Sidebar links bündig, Mittelspalte expandiert, rechte Spalte rechts. Kein zentrierter Container — würde sonst Platz links/rechts verschwenden. */ .app-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr) minmax(0, 304px); gap: 40px; padding: 0; align-items: start; } .app-shell__links { /* Sidebar beginnt direkt am Browser-Rand und geht bis zur Trennlinie. Padding ist innen, damit der Akzent-Hintergrund den ganzen Bereich füllt. */ background: var(--akzent-soft); padding: 18px 16px 16px 24px; border-right: 1px solid var(--line); align-self: stretch; } .app-shell__main { min-width: 0; padding: 16px 0 80px; max-width: 800px; } .app-shell__rechts { padding: 16px 24px 16px 0; position: sticky; top: 16px; } /* Nachrichten-Seite: Mittelspalte volle Breite, kein Inhalts-Cap (Chat braucht Platz) */ .app-shell:has(.dm-shell) .app-shell__main { max-width: none; } /* Recht-Seiten (DSGVO/EULA): rechte Spalte (Trends/Tipps) hat keinen Mehrwert, stattdessen mehr Platz für den Lese-Content. */ .app-shell:has(.recht-seite) { grid-template-columns: 232px minmax(0, 1fr); } .app-shell:has(.recht-seite) .app-shell__rechts { display: none; } .app-shell:has(.recht-seite) .app-shell__main { max-width: 860px; padding-top: 0; } @media (max-width: 1100px) { .app-shell { grid-template-columns: 232px minmax(0, 1fr); } .app-shell__rechts { display: none; } } @media (max-width: 760px) { .app-shell { grid-template-columns: 1fr; padding: 0; } .navi { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; } } /* === Navigation: vertikale Sidebar links === */ .navi { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 18px 0 16px; background: transparent; border-bottom: 0; height: 100vh; z-index: 5; } .navi__marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); text-decoration: none; padding: 4px 12px 18px; } .navi__logo { width: 36px; height: 36px; border-radius: 9px; display: block; } .navi__wort { display: inline-flex; gap: 0; align-items: baseline; font-size: 18px; letter-spacing: -0.01em; } .navi__marke .brand-blau { color: var(--akzent); font-weight: 800; } .navi__marke .brand-grau { color: var(--text-mute); font-weight: 700; } .navi a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .navi a:hover { background: var(--bg-mute); } .navi a.aktiv { background: var(--akzent-soft); color: var(--akzent); font-weight: 700; } .navi__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; } .navi__icon svg { width: 22px; height: 22px; stroke-width: 2; } @media (max-width: 760px) { .navi { flex-direction: row; height: auto; padding: 8px 8px; background: var(--bg-elev); border-top: 1px solid var(--line); overflow-x: auto; } .navi__marke { display: none; } .navi a { flex: 1; flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 11px; } .app-shell__main { padding-bottom: 80px; } } /* Forms */ .form { display: grid; gap: 12px; margin: 12px 0; } .feld { display: grid; gap: 4px; font-size: 13px; } .feld span { color: var(--text-mute); font-weight: 500; } .feld input[type="text"], .feld input[type="email"], .feld input[type="password"], .feld input[type="url"], .feld textarea, .feld input[type="search"] { font: inherit; padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .feld input:focus, .feld textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-soft); } .feld--checkbox { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; font-size: 13px; color: var(--text-mute); } .feld--checkbox input { margin-top: 3px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; background: var(--bg-elev); color: var(--text); transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease; } .btn:hover { background: var(--bg-mute); border-color: var(--text-faint); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--akzent); border-color: var(--akzent); color: #FFFFFF; } .btn--primary:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); } .btn--ghost { background: transparent; border-color: transparent; } .btn--ghost:hover { background: var(--bg-mute); } .btn--gefahr { background: var(--fehler); border-color: var(--fehler); color: #FFFFFF; } .fehler { margin: 0; color: var(--fehler); font-size: 13px; } .erfolg { margin: 0; color: var(--erfolg); font-size: 13px; } /* Posts */ /* === Post-Karten — 3-Zonen-Layout: Kopf (getönt) · Inhalt · Fuß (getönt) === */ .post-block { animation: post-fade-in 0.25s ease-out both; } .post-block + .post-block { margin-top: 44px; } @keyframes post-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .karte.post { padding: 0; overflow: hidden; background: transparent; box-shadow: var(--schatten-md); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; will-change: transform; } .karte.post:hover { border-color: var(--line-strong); box-shadow: var(--schatten-lift); transform: translateY(-1px); } .karte.post.post--aktiv { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-soft), var(--schatten-lift); } /* Zone 1: Kopf-Streifen mit Avatar + Name */ .post__kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--karte-mute); border-bottom: 1px solid var(--line); } .post__avatar { flex: 0 0 auto; display: block; position: relative; } .post__avatar .avatar { width: 40px !important; height: 40px !important; box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 3.5px var(--stufe-color, var(--akzent)), var(--schatten); transition: transform 0.18s ease; } .post__avatar:hover .avatar { transform: scale(1.06); } /* Stufenfarben für den Avatar-Ring — passen zu den Stufen-Badges */ .post__avatar--red { --stufe-color: #DC2626; } .post__avatar--orange { --stufe-color: #EA580C; } .post__avatar--green { --stufe-color: #15803D; } .post__avatar--blue { --stufe-color: #2563EB; } .post__avatar--warning { --stufe-color: #B45309; } /* Mehr-Menü im Header (3 Punkte) */ .post__menu-wrap { position: relative; flex: 0 0 auto; margin-left: auto; } .post__menu-btn { background: transparent; border: 0; cursor: pointer; width: 32px; height: 32px; border-radius: 999px; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease; } .post__menu-btn:hover { background: var(--akzent-soft); color: var(--akzent); } .post__menu-btn svg { width: 18px; height: 18px; stroke-width: 2; } .post__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; padding: 6px; background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--schatten-lift); z-index: 20; display: flex; flex-direction: column; gap: 2px; } .post__menu.hidden { display: none; } .post__menu-item { background: transparent; border: 0; cursor: pointer; text-align: left; font-size: 13.5px; color: var(--text); padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-family: inherit; } .post__menu-item svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; } .post__menu-item:hover { background: var(--bg-mute); } .post__menu-item--gefahr { color: var(--fehler); } .post__menu-item--gefahr:hover { background: rgba(220, 38, 38, 0.10); } .post__namen { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .post__namen-zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .post__namen-zeile--meta { font-size: 12.5px; color: var(--text-faint); } .post__name { font-weight: 700; color: var(--text); text-decoration: none; font-size: 14.5px; } .post__name:hover { text-decoration: underline; } .post__user { color: var(--text-mute); font-size: 13px; } .post__zeit { color: var(--text-faint); font-size: 12.5px; } .post__pin { font-size: 12px; margin-left: 2px; filter: saturate(0.85); } .post__ablauf { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; background: rgba(180, 83, 9, 0.10); color: var(--warn); border: 1px solid rgba(180, 83, 9, 0.25); } .post__namen-zeile--meta .post__zeit::before { content: '·'; margin: 0 4px; opacity: 0.6; } /* Zone 2: Body — der eigentliche Inhalt */ .post__body { padding: 14px 16px; background: var(--karte-elev); display: flex; flex-direction: column; gap: 10px; } .post__inhalt { white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.55; padding: 0; } .post__inhalt a.hashtag, .post__inhalt a.mention { display: inline-block; padding: 1px 9px 2px; background: var(--akzent-soft); color: var(--akzent); border-radius: 999px; font-weight: 600; font-size: 13.5px; text-decoration: none; line-height: 1.4; transition: background 0.12s ease, transform 0.12s ease; } .post__inhalt a.hashtag:hover, .post__inhalt a.mention:hover { background: var(--akzent); color: #fff; transform: translateY(-1px); text-decoration: none; } .post__inhalt code.md-code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 13.5px; padding: 1px 6px; background: var(--bg-mute); border: 1px solid var(--line); border-radius: 5px; color: var(--text); } .post__inhalt a.md-link { color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .post__inhalt strong { font-weight: 700; } .post__inhalt em { font-style: italic; } .post__bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .post__bilder--1 { grid-template-columns: 1fr; } .post__bilder--2 { grid-template-columns: 1fr 1fr; } .post__bilder--3 { grid-template-columns: 1fr 1fr; } .post__bilder--3 :first-child { grid-row: span 2; } .post__bilder--4 { grid-template-columns: 1fr 1fr; } .post__bild { width: 100%; max-height: 480px; object-fit: cover; border: 0; cursor: zoom-in; transition: transform 0.25s ease; display: block; } .post__bild:hover { transform: scale(1.02); } /* Zone 3: Fuß — Aktionsleiste mit Trennlinie und getöntem Hintergrund */ .post__fuss { padding: 6px 12px; background: var(--karte-mute); border-top: 1px solid var(--line); } .post__aktionen { display: flex; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--text-mute); align-items: center; } .post__aktion { background: transparent; border: 0; cursor: pointer; color: var(--text-faint); padding: 6px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease; } .post__aktion:hover { background: var(--akzent-soft); color: var(--akzent); } .post__aktion:active { transform: scale(0.95); } .post__aktion--like:hover { background: rgba(220, 38, 38, 0.10); color: #DC2626; } .post__aktion--like.post__aktion--aktiv { color: #DC2626; animation: like-pulse 0.4s ease; } @keyframes like-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 60% { transform: scale(0.9); } 100% { transform: scale(1); } } .post__aktion--repost:hover { background: rgba(22, 163, 74, 0.10); color: #16A34A; } .post__aktion--gefahr:hover { background: rgba(220, 38, 38, 0.10); color: var(--fehler); } .post__aktion--aktiv { color: var(--akzent); } .post__aktion svg { width: 18px; height: 18px; stroke-width: 2; } .post__aktion__zahl { font-size: 12px; } /* === Skeleton-Loader (matcht 3-Zonen-Layout des echten Posts) === */ .skeleton-feed { display: grid; gap: 10px; } .skeleton-karte { border: 1px solid var(--line); border-radius: 14px; background: var(--karte-elev); overflow: hidden; margin-bottom: 28px; box-shadow: var(--schatten-md); } .skeleton-karte__kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--karte-mute); border-bottom: 1px solid var(--line); } .skeleton-namen { display: flex; flex-direction: column; gap: 6px; flex: 1; } .skeleton-karte__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .skeleton-karte__fuss { display: flex; gap: 12px; padding: 10px 16px; background: var(--karte-mute); border-top: 1px solid var(--line); } .skeleton-zeile { background: linear-gradient(90deg, var(--bg-mute) 0%, var(--line) 50%, var(--bg-mute) 100%); background-size: 200% 100%; border-radius: 8px; animation: skeleton-shimmer 1.4s infinite; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-zeile--avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .skeleton-zeile--kurz { width: 35%; height: 12px; } .skeleton-zeile--mini { width: 22%; height: 10px; } .skeleton-zeile--lang { width: 100%; height: 12px; } .skeleton-zeile--mittel { width: 70%; height: 12px; } .skeleton-zeile--pille { width: 36px; height: 20px; border-radius: 999px; } /* === Hover-Reveal: Aktionsleiste dezent, kräftig bei Hover === */ .karte.post .post__aktion svg { opacity: 0.7; transition: opacity 0.15s ease; } .karte.post:hover .post__aktion svg { opacity: 1; } /* Empty States */ .empty-state { text-align: center; padding: 64px 24px; color: var(--text-mute); } .empty-state__icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; } .empty-state__titel { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .empty-state__text { font-size: 14px; max-width: 400px; margin: 0 auto; } /* === Compose: sticky oben im Feed === */ .compose-sticky { position: sticky; top: 0; z-index: 8; background: var(--glas); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); margin: -16px 0 12px; padding: 16px 0; border-bottom: 1px solid var(--line); } /* Performance: Posts außerhalb des Viewports werden ausgesetzt. Spart Layout/Paint bei langen Feeds, das Layout-Größen-Hint hilft beim Scrollen. */ .post-block { content-visibility: auto; contain-intrinsic-size: 1px 320px; } /* Hashtag-/@-Mention-Highlights — leicht dezenter */ .alter-badge, .ort-badge, .stufen-badge { font-size: 9.5px; padding: 1px 7px; } /* Toast — kleine Hinweise unten rechts statt window.alert() */ .fn-toast-host { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 200; pointer-events: none; } .fn-toast { pointer-events: auto; background: var(--bg-elev); border: 1px solid var(--line); border-left: 4px solid var(--akzent); border-radius: 12px; padding: 12px 16px; font-size: 14px; max-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } .fn-toast--in { opacity: 1; transform: translateY(0); } .fn-toast--fehler { border-left-color: var(--fehler); } .fn-toast--erfolg { border-left-color: var(--erfolg); } .fn-toast--warn { border-left-color: var(--warn); } /* Bild-Lightbox: Klick auf Post-Bild öffnet Vollbild-Overlay */ .fn-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,0.85); display: grid; place-items: center; cursor: zoom-out; padding: 24px; } .fn-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .fn-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; display: grid; place-items: center; background: rgba(15,23,42,0.6); border: 1px solid rgba(255,255,255,0.18); color: #FFFFFF; border-radius: 50%; font-size: 32px; line-height: 1; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .fn-lightbox__nav:hover { background: rgba(15,23,42,0.85); transform: translateY(-50%) scale(1.06); } .fn-lightbox__nav--prev { left: 24px; } .fn-lightbox__nav--next { right: 24px; } .fn-lightbox__counter { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); padding: 6px 14px; background: rgba(15,23,42,0.6); color: #FFFFFF; border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; border: 1px solid rgba(255,255,255,0.15); } @media (max-width: 600px) { .fn-lightbox__nav { width: 44px; height: 44px; font-size: 24px; } .fn-lightbox__nav--prev { left: 8px; } .fn-lightbox__nav--next { right: 8px; } } /* Repost-Anzeige — als Header-Streifen über dem Original-Post */ .repost-hinweis { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); padding: 8px 16px; font-weight: 500; background: var(--bg-mute); border-bottom: 1px solid var(--line); } .repost-hinweis svg { width: 14px; height: 14px; } .karte.post > .repost-hinweis + .karte, .karte.post > .repost-hinweis + :not(.karte) { padding: 14px 16px; background: var(--bg-elev); } .karte.post > .repost-hinweis + .karte .post__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; background: transparent; border: 0; } .karte.post > .repost-hinweis + .karte .post__inhalt { padding: 0; white-space: pre-wrap; word-break: break-word; } /* Zitiertes Original (Quote-Repost) — eingerückte, mit Akzent-Border klar abgesetzt */ .zitat { margin-top: 0; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--akzent); border-radius: 10px; background: var(--bg-mute); transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; cursor: pointer; position: relative; } .zitat::before { content: 'Zitat'; position: absolute; top: -8px; left: 12px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--akzent); background: var(--bg-elev); padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); } .zitat:hover { border-color: var(--akzent); background: var(--akzent-soft); } .zitat .post__inhalt { font-size: 13.5px; color: var(--text-mute); padding: 0; white-space: pre-wrap; word-break: break-word; } .zitat .post__kopf { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; padding: 0; background: transparent; border: 0; font-size: 13px; } .zitat .avatar { width: 22px !important; height: 22px !important; font-size: 10px; } .zitat .post__name { font-size: 13.5px; } .zitat .post__user, .zitat .post__zeit { font-size: 12px; } /* === Thread-Vorschau: integrierter Bereich der Hauptkarte === */ .karte.post .post-thread { margin: 0; padding: 10px 14px 12px 18px; background: var(--karte-mute); border-top: 1px solid var(--line); border-left: 3px solid var(--akzent); display: flex; flex-direction: column; gap: 6px; position: relative; } .karte.post .post-thread::before { content: 'Antworten'; position: absolute; top: -9px; left: 14px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--akzent); background: var(--karte-mute); padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); } .post-antwort { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 8px 12px; background: var(--karte-elev); border: 1px solid var(--line); border-radius: 10px; transition: border-color 0.15s ease, background 0.15s ease; } .post-antwort:hover { border-color: var(--akzent); background: var(--bg-elev); } .post-antwort__avatar { display: block; flex: 0 0 auto; } .post-antwort__avatar .avatar { width: 32px !important; height: 32px !important; font-size: 13px; } .post-antwort__inhalt-spalte { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .post-antwort__kopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; } .post-antwort .post__inhalt { font-size: 14px; line-height: 1.5; } .post-thread__mehr { align-self: flex-start; background: transparent; border: 0; padding: 6px 4px; cursor: pointer; color: var(--akzent); font-size: 12.5px; font-weight: 500; border-radius: 6px; } .post-thread__mehr:hover { background: var(--akzent-soft); } .post-thread__mehr:disabled { opacity: 0.6; cursor: default; } /* Antwort-Indikator über Post-Inhalt */ .antwort-hinweis { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-mute); padding: 4px 0 0; } /* Inline-Antwortbox unter einem Post */ .karte.antwort-box { margin-top: -4px; background: var(--akzent-soft); border: 1px dashed var(--akzent); padding: 14px 16px; } .karte.antwort-box textarea { width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 14px; resize: vertical; } .karte.antwort-box textarea:focus { outline: 0; border-color: var(--akzent); } /* Repost-Dialog (modal) */ .fn-modal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,0.5); display: grid; place-items: center; padding: 16px; } .fn-modal { width: 100%; max-width: 520px; background: var(--bg-elev); border-radius: 16px; padding: 22px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); } .fn-modal h2 { margin: 0 0 12px; font-size: 18px; } .fn-modal textarea { width: 100%; min-height: 90px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 15px; resize: vertical; } .fn-modal textarea:focus { outline: 0; border-color: var(--akzent); } .fn-modal__leiste { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } /* Verifiziert-Häkchen */ .verifiziert { display: inline-flex; vertical-align: middle; width: 14px; height: 14px; color: var(--akzent); } /* Compose-Box — abgesetzt vom Feed unten */ .compose { padding: 18px 20px; background: linear-gradient(180deg, var(--akzent-soft) 0%, var(--bg-elev) 100%); border: 1px solid var(--akzent); border-radius: 16px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06); margin-bottom: 16px; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .compose:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-soft), var(--schatten-lift); transform: translateY(-1px); } .compose h2 { margin: 0 0 10px; font-size: 16px; color: var(--akzent); font-weight: 700; letter-spacing: -0.01em; } .compose textarea { width: 100%; min-height: 100px; resize: vertical; font-size: 16px; line-height: 1.5; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); transition: border-color 0.15s ease; } .compose textarea:focus { outline: 0; border-color: var(--akzent); } .compose__leiste { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .compose__zaehler { margin-left: auto; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; } .compose__bilder { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .compose__vorschau { position: relative; width: 80px; height: 80px; border-radius: var(--radius); background: var(--bg-mute); background-size: cover; background-position: center; border: 1px solid var(--line); } .compose__entfernen { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--bg); border: 0; font-size: 12px; cursor: pointer; display: grid; place-items: center; } /* Reaktions-Picker */ .reaktion-picker { display: inline-flex; gap: 4px; padding: 6px 8px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schatten-md); } .reaktion-picker button { background: transparent; border: 0; cursor: pointer; font-size: 18px; padding: 2px 4px; border-radius: 6px; } .reaktion-picker button:hover { background: var(--bg-mute); } .reaktion-pille { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--bg-mute); border: 1px solid var(--line); font-size: 12px; cursor: pointer; } .reaktion-pille--aktiv { background: var(--akzent-soft); border-color: var(--akzent); color: var(--akzent); } /* Direktnachrichten — Briefkasten-Style */ .dm-meta { display: flex; align-items: center; gap: 14px; } .dm-meta__pillen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dm-meta__hinweis { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(234, 88, 12, 0.08); border: 1px solid rgba(234, 88, 12, 0.25); font-size: 13px; color: var(--text-mute); } .dm-tabs { display: flex; gap: 8px; margin: 4px 0 12px; align-items: center; flex-wrap: wrap; } .dm-tab { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text-mute); display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, color 0.12s, border-color 0.12s; } .dm-tab:hover { background: var(--bg-mute); color: var(--text); } .dm-tab.aktiv { background: var(--akzent); color: white; border-color: var(--akzent); } .dm-tab__count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,0.1); } .dm-tab.aktiv .dm-tab__count { background: rgba(255,255,255,0.25); } .dm-neu { margin-left: auto; } .dm-liste { display: grid; gap: 10px; } .dm-zeile { padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; transition: border-color 0.15s; } .dm-zeile:hover { border-color: var(--line-strong); } .dm-zeile--ungelesen { border-left: 3px solid var(--akzent); } .dm-zeile__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dm-zeile__name { font-weight: 600; } .dm-zeile__name a { color: var(--text); text-decoration: none; } .dm-zeile__name a:hover { text-decoration: underline; } .dm-zeile__slug { color: var(--text-mute); font-size: 13px; } .dm-zeile__zeit { margin-left: auto; color: var(--text-faint); font-size: 12px; } .dm-zeile__body { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.55; padding: 4px 0 4px 50px; } .dm-zeile__aktionen { display: flex; gap: 6px; padding-left: 50px; } .dm-zeile__aktion { background: transparent; border: 0; cursor: pointer; color: var(--text-mute); padding: 4px 10px; border-radius: 8px; font-size: 12px; } .dm-zeile__aktion:hover { background: var(--bg-mute); color: var(--text); } .dm-zeile__aktion--gefahr:hover { color: var(--fehler); } /* Modal "Neue Nachricht / Antworten" */ .dm-modal__antwort-an { font-size: 13px; color: var(--text-mute); padding: 8px 12px; background: var(--bg-mute); border-radius: 8px; margin-bottom: 10px; } .dm-modal__antwort-an strong { color: var(--text); } /* Autovervollständigung im "An"-Feld */ .dm-suggest { position: relative; } .dm-suggest__liste { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; margin-top: 4px; box-shadow: var(--schatten-md); max-height: 280px; overflow-y: auto; z-index: 5; } .dm-suggest__leer { padding: 10px 12px; font-size: 13px; color: var(--text-mute); } .dm-suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line); } .dm-suggest__item:last-child { border-bottom: 0; } .dm-suggest__item:hover, .dm-suggest__item--aktiv { background: var(--akzent-soft); } .dm-suggest__item .avatar { width: 28px !important; height: 28px !important; font-size: 12px; } .dm-suggest__name { font-weight: 600; color: var(--text); } .dm-suggest__slug { color: var(--text-mute); font-size: 12px; } .dm-suggest__pillen { margin-left: auto; display: flex; gap: 4px; align-items: center; } /* Chat (alt — wird gleich entfernt) */ .chat { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 12px; } @media (max-width: 720px) { .chat { grid-template-columns: 1fr; } } .chat__liste { display: grid; gap: 2px; max-height: 70vh; overflow: auto; border-right: 1px solid var(--line); padding-right: 8px; } .chat__partner { text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; color: var(--text); } .chat__partner:hover, .chat__partner.aktiv { background: var(--bg-mute); } .chat__partner.aktiv { background: var(--akzent-soft); color: var(--akzent); } .chat__verlauf { display: grid; gap: 6px; max-height: 60vh; overflow: auto; padding: 8px; } .bubble { max-width: 80%; padding: 8px 11px; border-radius: 14px; background: var(--bg-mute); word-break: break-word; white-space: pre-wrap; font-size: 14px; } .bubble--ich { background: var(--akzent); color: #FFFFFF; justify-self: end; } /* Reply-Quote — kleiner Hinweis-Streifen über einer Antwort, der zeigt worauf sich die Antwort bezieht. Ist klickbar (zum Original-Autor). */ .reply-quote { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 0 0 0; background: var(--bg-mute); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 12.5px; transition: background 0.12s ease; border-top-left-radius: inherit; border-top-right-radius: inherit; } .reply-quote:hover { background: var(--akzent-soft); } .reply-quote__head { font-weight: 600; color: var(--text-mute); } .reply-quote__body { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reply-quote--geloescht { opacity: 0.6; cursor: default; } .reply-quote--geloescht:hover { background: var(--bg-mute); } /* Profil — Header-Karte: farblich vom Feed abgesetzt, Akzent-Verlauf, überlappender Avatar, Stats-Pillen mit Icons, klare Action-Buttons */ .profil-karte { margin-top: 16px; margin-bottom: 28px; padding: 0; overflow: hidden; border: 2px solid var(--akzent); background: linear-gradient(180deg, var(--akzent-soft) 0%, var(--akzent-soft) 50%, color-mix(in oklab, var(--akzent-soft) 50%, var(--bg-elev)) 100%); box-shadow: 0 12px 40px color-mix(in oklab, var(--akzent) 18%, transparent); } .profil__cover { height: 110px; background-color: transparent; background-size: cover; background-position: center; border-bottom: 0; position: relative; } .profil__cover--leer { background-image: linear-gradient(135deg, var(--akzent-soft), color-mix(in oklab, var(--akzent) 14%, transparent) 100%); } .profil__korpus { position: relative; padding: 0 20px 18px; margin-top: -44px; } .profil__avatar.avatar { width: 88px; height: 88px; font-size: 28px; box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 8px var(--stufe-color, var(--akzent)), var(--schatten-md); position: relative; z-index: 2; animation: profil-avatar-puls 2.6s ease-in-out infinite; } @keyframes profil-avatar-puls { 0%, 100% { box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 8px var(--stufe-color, var(--akzent)), 0 0 0 8px color-mix(in oklab, var(--stufe-color, var(--akzent)) 55%, transparent), var(--schatten-md); } 50% { box-shadow: 0 0 0 3px var(--bg-elev), 0 0 0 8px var(--stufe-color, var(--akzent)), 0 0 0 18px color-mix(in oklab, var(--stufe-color, var(--akzent)) 0%, transparent), var(--schatten-md); } } @media (prefers-reduced-motion: reduce) { .profil__avatar.avatar { animation: none; } } /* Stufenfarben für den Profil-Avatar-Ring — gleiche Palette wie Post-Avatare */ .profil__avatar--red { --stufe-color: #DC2626; } .profil__avatar--orange { --stufe-color: #EA580C; } .profil__avatar--green { --stufe-color: #15803D; } .profil__avatar--blue { --stufe-color: #2563EB; } .profil__avatar--warning { --stufe-color: #B45309; } .profil__aktionen { position: absolute; top: 8px; right: 20px; display: flex; gap: 8px; z-index: 3; } .profil__btn-primary { display: inline-flex; align-items: center; gap: 6px; } .profil__name { margin: 10px 0 2px; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; } .profil__handle { color: var(--text-mute); font-size: 13.5px; margin-bottom: 8px; } .profil__bio { margin: 4px 0 10px; line-height: 1.45; color: var(--text); } .profil__stats { display: flex; gap: 8px; margin-top: 4px; } .profil__stat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); cursor: pointer; font: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .profil__stat-pill svg { color: var(--text-mute); flex: 0 0 auto; } .profil__stat-pill.aktiv svg { color: var(--akzent); } /* Aktions-Leiste: alle Buttons inline-flex mit Icon + Text */ .profil__aktionen .btn { display: inline-flex; align-items: center; gap: 6px; } .profil__stat-pill:hover { border-color: var(--akzent); transform: translateY(-1px); } .profil__stat-pill.aktiv { border-color: var(--akzent); background: var(--akzent-soft); } .profil__stat-zahl { font-weight: 700; font-size: 15px; color: var(--text); } .profil__stat-label { font-size: 13px; color: var(--text-mute); } .profil__panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-mute); max-height: 360px; overflow-y: auto; } .profil__listen-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .profil__listen-zeile:last-child { border-bottom: 0; } .profil__listen-link { display: flex; align-items: center; gap: 10px; flex: 1; text-decoration: none; color: inherit; min-width: 0; } .profil__listen-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--karte-mute); flex: 0 0 auto; } .profil__listen-aktion { flex: 0 0 auto; font-size: 12.5px; padding: 6px 12px; } .avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--akzent-soft); display: grid; place-items: center; color: var(--akzent); font-weight: 700; overflow: hidden; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* Suche */ .suche-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .suche-bar:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10); } .suche-bar span { font-size: 18px; color: var(--text-mute); } .suche-bar input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 15px; } /* Stufen-Badges — als Button für Click-Popover */ .stufen-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; border: 0; cursor: pointer; font-family: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease; } .stufen-badge:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } .stufen-badge--red { background: #DC2626; } .stufen-badge--orange { background: #EA580C; } .stufen-badge--green { background: #16A34A; } .stufen-badge--blue { background: #2563EB; } .stufen-badge--warning { background: #6B21A8; } /* Stufen-Popover — kleines Erklär-Pop, das beim Click auf das Badge erscheint */ .stufen-popover { position: absolute; z-index: 50; max-width: 280px; padding: 12px 14px; background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--schatten-lift); font-size: 13px; color: var(--text); animation: stufen-pop-in 0.14s ease-out both; } @keyframes stufen-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .stufen-popover__titel { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; } .stufen-popover__text { margin: 0; color: var(--text-mute); line-height: 1.45; } .stufen-popover--red { border-left: 4px solid #DC2626; } .stufen-popover--orange { border-left: 4px solid #EA580C; } .stufen-popover--green { border-left: 4px solid #16A34A; } .stufen-popover--blue { border-left: 4px solid #2563EB; } .stufen-popover--warning { border-left: 4px solid #6B21A8; } /* Altersgruppen-Badge — kleiner, dezent. Verrät keinen Geburtsjahrgang. */ .alter-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bg-mute); color: var(--text-mute); border: 1px solid var(--line); } /* Standort-Badge — kleine Pille mit 📍 + Region/Bundesland-Text */ .ort-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; background: var(--bg-mute); color: var(--text-mute); border: 1px solid var(--line); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ort-badge::before { content: '📍'; font-size: 10px; } .alter-badge--junior { background: #ECFDF5; color: #047857; border-color: #A7F3D0; } .alter-badge--young { background: #F0FDF4; color: #15803D; border-color: #BBF7D0; } .alter-badge--mid { background: #F1F5F9; color: #334155; border-color: #CBD5E1; } .alter-badge--mature { background: #FFFBEB; color: #92400E; border-color: #FDE68A; } .alter-badge--senior { background: #FEF3C7; color: #78350F; border-color: #FCD34D; } @media (prefers-color-scheme: dark) { .alter-badge--junior { background: rgba(4, 120, 87, 0.18); color: #6EE7B7; border-color: rgba(4, 120, 87, 0.4); } .alter-badge--young { background: rgba(21, 128, 61, 0.18); color: #86EFAC; border-color: rgba(21, 128, 61, 0.4); } .alter-badge--mid { background: rgba(51, 65, 85, 0.4); color: #CBD5E1; border-color: rgba(51, 65, 85, 0.6); } .alter-badge--mature { background: rgba(146, 64, 14, 0.18); color: #FCD34D; border-color: rgba(146, 64, 14, 0.4); } .alter-badge--senior { background: rgba(120, 53, 15, 0.25); color: #FBBF24; border-color: rgba(120, 53, 15, 0.5); } } /* Stufen-Roadmap in der Einstellungen-Seite */ .stufen-step { display: grid; gap: 10px; list-style: none; padding: 0; margin: 12px 0 16px; } .stufen-step__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); } .stufen-step__item--aktiv { border-color: var(--akzent); background: var(--akzent-soft); } .stufen-step__item--erledigt { opacity: 0.7; } .stufen-step__text strong { display: block; } .stufen-step__hint { font-size: 12px; color: var(--text-mute); } .stufen-step__check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #FFFFFF; } .stufen-step__check--ok { background: #16A34A; } .stufen-step__check--off { background: var(--text-faint); } .verif-trenner { height: 1px; background: var(--line); margin: 16px 0 12px; } .verif-zwischentitel { font-size: 14px; font-weight: 600; margin: 12px 0 4px; color: var(--text); } /* Theme + Akzent in den Einstellungen */ .theme-zeile { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; } .theme-label { font-size: 13px; color: var(--text-mute); min-width: 70px; } .theme-toggle, .akzent-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-mute); border: 1px solid var(--line); border-radius: 999px; } .theme-toggle button { background: transparent; border: 0; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--text-mute); transition: background 0.12s, color 0.12s; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button.aktiv { background: var(--bg-elev); color: var(--text); box-shadow: var(--schatten); } .akzent-toggle button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.12s, border-color 0.12s; } .akzent-toggle button:hover { transform: scale(1.1); } .akzent-toggle button.aktiv { border-color: var(--text); } .akzent--indigo { background: #4F46E5; } .akzent--green { background: #16A34A; } .akzent--purple { background: #9333EA; } .akzent--pink { background: #DB2777; } .akzent--orange { background: #EA580C; } /* Sichtbarkeits-Hinweis unter Feldern — zeigt was öffentlich wird */ .feld__hinweis { margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: var(--bg-mute); border-left: 3px solid var(--akzent); font-size: 12px; color: var(--text-mute); line-height: 1.45; } .feld__hinweis strong { color: var(--text); font-weight: 600; } .feld__hinweis--privat { border-left-color: #6B7280; } .feld__hinweis--privat strong::before { content: '🔐 '; } .feld__hinweis--aggregat { border-left-color: #16A34A; } .feld__hinweis--aggregat strong::before { content: '📊 '; } .feld__hinweis--public { border-left-color: #2563EB; } .feld__hinweis--public strong::before { content: '🌐 '; } /* Stufen-Vorschau-Reihe (Altersgruppen, Region etc.) */ .stufen-vorschau { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; } .stufen-vorschau__pill { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--text-faint); font-weight: 500; } .stufen-vorschau__pill--aktiv { background: var(--akzent-soft); border-color: var(--akzent); color: var(--akzent); font-weight: 700; } /* Verifizierte Felder optisch sperren — KEIN doppeltes Schloss-Symbol mehr, das ist verwirrend (Schild = geheim, Häkchen = verifiziert sind verschiedene Sachen). */ .feld.gesperrt { position: relative; opacity: 0.85; } .feld.gesperrt input, .feld.gesperrt textarea { background: var(--bg-mute) !important; cursor: not-allowed; color: var(--text-mute) !important; } /* Sichtbarkeits-Symbol VOR jedem Feld-Label. Eindeutige Bedeutung — nicht mit „verifiziert" verwechseln. */ .feld__sym { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 13px; margin-right: 8px; vertical-align: -5px; font-weight: 700; cursor: help; } .feld__sym--privat { background: rgba(220, 38, 38, 0.10); color: #B91C1C; border: 1px solid rgba(220, 38, 38, 0.25); } .feld__sym--public { background: rgba(37, 99, 235, 0.10); color: #2563EB; border: 1px solid rgba(37, 99, 235, 0.25); } .feld__sym--aggregat { background: rgba(22, 163, 74, 0.10); color: #15803D; border: 1px solid rgba(22, 163, 74, 0.25); } @media (prefers-color-scheme: dark) { .feld__sym--privat { background: rgba(220, 38, 38, 0.18); color: #FCA5A5; border-color: rgba(220, 38, 38, 0.4); } .feld__sym--public { background: rgba(37, 99, 235, 0.22); color: #93C5FD; border-color: rgba(37, 99, 235, 0.4); } .feld__sym--aggregat { background: rgba(22, 163, 74, 0.20); color: #6EE7B7; border-color: rgba(22, 163, 74, 0.4); } } /* Verifizierungs-Pille (wenn das Feld vom Admin geprüft + festgenagelt ist) */ .feld__verif { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--erfolg); background: rgba(22, 163, 74, 0.10); padding: 2px 8px; border-radius: 999px; margin-left: 8px; border: 1px solid rgba(22, 163, 74, 0.3); } /* Legende oben in der Verifizierungs-Karte — erklärt die drei Symbole einmal. */ .sichtbarkeit-legende { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--bg-mute); border: 1px solid var(--line); font-size: 12px; margin: 6px 0 14px; } .sichtbarkeit-legende__item { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mute); } .sichtbarkeit-legende__item strong { color: var(--text); } .verif-banner-bestaetigt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(22, 163, 74, 0.10); border: 1px solid rgba(22, 163, 74, 0.4); color: var(--erfolg); font-size: 14px; margin: 4px 0 12px; } /* Status-Badge (Mission Control) */ .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); } .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--erfolg); } .status-badge--lokal::before { background: var(--warn); } .status-badge--offline::before { background: var(--text-faint); } .status-badge--mesh::before { background: var(--akzent); } /* Hilfsklassen */ .zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .versteckt { display: none !important; } /* Sidebar-Badge für ungelesene Zähler (Benachrichtigungen / Nachrichten) */ .navi__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--akzent); color: #FFFFFF; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* Benachrichtigungen-Inbox */ .benachrichtigungen-kopf { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 16px; flex-wrap: wrap; gap: 8px; } .benachrichtigung { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 16px; background: var(--karte-elev); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); margin-bottom: 8px; transition: border-color 0.12s ease, transform 0.12s ease; } .benachrichtigung:hover { border-color: var(--line-strong); transform: translateY(-1px); } .benachrichtigung--neu { background: var(--akzent-soft); border-color: var(--akzent); } .benachrichtigung__avatar { width: 44px !important; height: 44px !important; } .benachrichtigung__inhalt { min-width: 0; align-self: center; } .benachrichtigung__titel { font-size: 14.5px; line-height: 1.3; } .benachrichtigung__zeit { font-size: 12px; color: var(--text-faint); margin-top: 2px; } .benachrichtigung__icon { font-size: 22px; align-self: center; opacity: 0.7; } /* Admin-Tabs */ .admin-tabs { display: flex; gap: 4px; margin: 12px 0 16px; border-bottom: 1px solid var(--line); } .admin-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-mute); display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; transition: color 0.12s ease, border-color 0.12s ease; } .admin-tab:hover { color: var(--text); } .admin-tab--aktiv { color: var(--akzent); border-bottom-color: var(--akzent); } /* Report-Karten */ .report-karte { padding: 14px 18px; margin-top: 10px; } .report-karte--resolved { opacity: 0.7; } .report-karte--rejected { opacity: 0.6; } .report-karte__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .report-reason { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--fehler); color: #FFFFFF; } .report-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); } .report-status--open { background: var(--akzent-soft); color: var(--akzent); border-color: var(--akzent); } .report-status--resolved { background: rgba(22, 163, 74, 0.10); color: var(--erfolg); border-color: var(--erfolg); } .report-status--rejected { background: var(--bg-mute); color: var(--text-mute); } .report-meta { font-size: 13px; line-height: 1.5; color: var(--text-mute); margin-bottom: 8px; } .report-meta div { margin-bottom: 2px; } .report-zitat { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--bg-mute); border-radius: 6px; font-size: 13px; color: var(--text); font-style: normal; white-space: pre-wrap; word-break: break-word; } .report-note { margin-top: 6px; padding: 6px 10px; background: var(--akzent-soft); border-radius: 6px; font-size: 12.5px; color: var(--text); } .report-aktionen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } /* Audit-Log */ .audit-zeile { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .audit-zeile:last-child { border-bottom: 0; } .audit-zeile--klappbar { cursor: pointer; transition: background 0.12s ease; } .audit-zeile--klappbar:hover { background: var(--bg-mute); } .audit-zeile--klappbar:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; } .audit-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .audit-aktion { display: inline-flex; padding: 2px 8px; background: var(--akzent-soft); color: var(--akzent); border-radius: 6px; font-weight: 600; font-size: 12px; min-width: 130px; justify-content: center; } .audit-text { flex: 1; min-width: 200px; } .audit-zeit { font-size: 11.5px; } .audit-chev { font-size: 11px; color: var(--text-mute); transition: transform 0.15s ease; } .audit-zeile--offen .audit-chev { transform: rotate(180deg); } .audit-detail { margin-top: 10px; padding: 10px 12px; background: var(--bg-mute); border-radius: 8px; display: grid; grid-template-columns: minmax(160px, max-content) 1fr; gap: 6px 14px; font-size: 12.5px; } .audit-detail__zeile { display: contents; } .audit-detail__key { color: var(--text-mute); font-weight: 600; } .audit-detail__val { color: var(--text); word-break: break-word; white-space: pre-wrap; } /* Post-Edit */ .post-edit { display: flex; flex-direction: column; gap: 8px; } .post-edit__textarea { width: 100%; min-height: 80px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--akzent); background: var(--bg); color: var(--text); font: inherit; font-size: 14.5px; resize: vertical; } .post-edit__textarea:focus { outline: 0; box-shadow: 0 0 0 3px var(--akzent-soft); } .post-edit__leiste { display: flex; align-items: center; gap: 8px; } .post-edit__zaehler { font-size: 12px; color: var(--text-faint); margin-right: auto; } /* Meldungs-Dialog */ .meldung-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .meldung-option { background: var(--bg-elev); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; color: var(--text); transition: border-color 0.12s ease; } .meldung-option:hover { border-color: var(--line-strong); } .meldung-option--aktiv { border-color: var(--fehler); background: rgba(220, 38, 38, 0.06); color: var(--fehler); font-weight: 600; } /* Trends-Karte */ .trends-liste { display: flex; flex-direction: column; margin-top: 4px; } .trend-zeile { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13.5px; transition: background 0.12s ease; } .trend-zeile:hover { background: var(--akzent-soft); text-decoration: none; } .trend-zeile__tag { font-weight: 600; color: var(--akzent); } .trend-zeile__count { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Cookie-Hinweis-Banner */ .fn-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--glas); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--schatten-lift); font-size: 13px; animation: fn-cookie-in 0.3s ease-out; } @keyframes fn-cookie-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fn-cookie-banner > span { flex: 1; min-width: 0; } .fn-cookie-banner a { color: var(--akzent); text-decoration: underline; } /* Block-Liste in Einstellungen */ .blocks-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .block-zeile { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg-mute); } .block-zeile__meta { min-width: 0; } /* === Admin: Stufen-Filter und Nutzer-Karten === */ .admin-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; } .admin-filter-pille { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-mute); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .admin-filter-pille::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); } .admin-filter-pille--red::before { background: #DC2626; } .admin-filter-pille--orange::before { background: #EA580C; } .admin-filter-pille--green::before { background: #16A34A; } .admin-filter-pille--blue::before { background: #2563EB; } .admin-filter-pille--warning::before { background: #6B21A8; } .admin-filter-pille:hover { border-color: var(--line-strong); color: var(--text); } .admin-filter-pille--aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; } .admin-filter-pille--aktiv::before { background: #fff; } .admin-user { margin-top: 12px; padding: 16px 18px; border-left: 4px solid var(--text-faint); } .admin-user--red { border-left-color: #DC2626; } .admin-user--orange { border-left-color: #EA580C; } .admin-user--green { border-left-color: #16A34A; } .admin-user--blue { border-left-color: #2563EB; } .admin-user--warning { border-left-color: #6B21A8; } /* Gesperrtes Konto: kräftiger roter Streifen + leichte Tönung */ .admin-user--blocked { border-left-color: #DC2626; border-left-width: 6px; background: linear-gradient(90deg, rgba(220, 38, 38, 0.06), transparent 30%), var(--karte-elev); } .admin-user--blocked .admin-user__name { text-decoration: line-through; opacity: 0.85; } .admin-blocked-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: #DC2626; border: 0; } .admin-user__note--blocked { background: rgba(220, 38, 38, 0.10); color: #DC2626; border: 1px solid rgba(220, 38, 38, 0.25); } .admin-filter-pille--blocked::before { background: #DC2626; } .admin-filter-pille--blocked.admin-filter-pille--aktiv { background: #DC2626; border-color: #DC2626; } /* Sperren / Entsperren */ .admin-btn--block { background: rgba(220, 38, 38, 0.08); color: #DC2626; border-color: rgba(220, 38, 38, 0.3); } .admin-btn--block:hover { background: #DC2626; color: #FFFFFF; border-color: #DC2626; } .admin-btn--unblock { background: rgba(22, 163, 74, 0.08); color: #16A34A; border-color: rgba(22, 163, 74, 0.3); } .admin-btn--unblock:hover { background: #16A34A; color: #FFFFFF; border-color: #16A34A; } /* E-Mail-Button — dezent in Akzentfarbe */ .admin-btn--mail { background: var(--akzent-soft); color: var(--akzent); border-color: rgba(79, 70, 229, 0.25); } .admin-btn--mail:hover { background: var(--akzent); color: #FFFFFF; border-color: var(--akzent); } /* Admin-Promote/Demote — Schild-Symbol, Akzent-Farbschema */ .admin-btn--promote { background: rgba(79, 70, 229, 0.08); color: var(--akzent); border-color: rgba(79, 70, 229, 0.3); } .admin-btn--promote:hover { background: var(--akzent); color: #FFFFFF; border-color: var(--akzent); } .admin-btn--demote { background: rgba(180, 83, 9, 0.08); color: var(--warn); border-color: rgba(180, 83, 9, 0.3); } .admin-btn--demote:hover { background: var(--warn); color: #FFFFFF; border-color: var(--warn); } .admin-user__kopf { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .admin-user__titel { flex: 1; min-width: 0; } .admin-user__name-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-user__name { font-weight: 700; font-size: 15px; color: var(--text); } .admin-user__sub { font-size: 12.5px; margin-top: 2px; } .admin-user__note { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; padding: 6px 10px; background: var(--bg-mute); border-radius: 8px; } .admin-user__note--warn { background: rgba(220, 38, 38, 0.08); color: var(--fehler); } .admin-user__aktionen { display: flex; gap: 8px; flex-shrink: 0; } /* Account-Typ-Badges (Privat / Firma / Admin) */ .admin-typ-badge { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-mute); } .admin-typ-badge--admin { background: var(--akzent-soft); border-color: var(--akzent); color: var(--akzent); } /* Stufe-setzen Modal */ .admin-stufe-optionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; } .admin-stufe-option { flex: 1 1 100px; min-width: 100px; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg-elev); cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--text); transition: border-color 0.12s ease, transform 0.1s ease; } .admin-stufe-option:hover { transform: translateY(-1px); } .admin-stufe-option--red.admin-stufe-option--aktiv { border-color: #DC2626; background: rgba(220, 38, 38, 0.08); color: #DC2626; } .admin-stufe-option--orange.admin-stufe-option--aktiv { border-color: #EA580C; background: rgba(234, 88, 12, 0.08); color: #EA580C; } .admin-stufe-option--green.admin-stufe-option--aktiv { border-color: #16A34A; background: rgba(22, 163, 74, 0.08); color: #16A34A; } .admin-stufe-option--blue.admin-stufe-option--aktiv { border-color: #2563EB; background: rgba(37, 99, 235, 0.08); color: #2563EB; } .admin-stufe-option--warning.admin-stufe-option--aktiv { border-color: #6B21A8; background: rgba(107, 33, 168, 0.08); color: #6B21A8; } .admin-feld-label { display: block; font-size: 12.5px; font-weight: 600; margin: 8px 0 4px; color: var(--text-mute); } .admin-feld-input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13.5px; font-family: inherit; margin-bottom: 8px; } .admin-feld-input:focus { outline: 0; border-color: var(--akzent); } /* Link-Preview-Karte unter Posts — Open-Graph mit Titel, Beschreibung, Bild */ .link-preview { display: flex; margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: var(--bg-elev); transition: border-color 0.15s ease, transform 0.15s ease; max-width: 100%; } .link-preview:hover { border-color: var(--akzent); transform: translateY(-1px); } .link-preview__bild { width: 120px; height: auto; min-height: 100%; object-fit: cover; background: var(--bg-mute); flex: 0 0 120px; } .link-preview__text { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .link-preview__titel { font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-preview__desc { font-size: 13px; line-height: 1.4; color: var(--text-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .link-preview__host { font-size: 11.5px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-top: auto; } /* Multi-Line-Code-Blöcke (```sprache\n…\n```) — mit Kopier-Knopf und Sprach-Indikator */ .code-block { position: relative; margin: 10px 0; background: #0F172A; color: #E5E7EB; border: 1px solid #1F2937; border-radius: 10px; overflow: hidden; } .code-block__lang { position: absolute; top: 8px; left: 12px; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.06em; } .code-block__copy { position: absolute; top: 6px; right: 6px; padding: 3px 10px; border: 1px solid #334155; border-radius: 6px; background: #1F2937; color: #CBD5E1; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .code-block__copy:hover { background: #334155; color: #F1F5F9; } .code-block__pre { margin: 0; padding: 30px 14px 14px; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; overflow-x: auto; white-space: pre; color: #E5E7EB; } .code-block__pre code { background: transparent; color: inherit; font-size: inherit; padding: 0; } /* Autocomplete-Popover für @-Mention und #-Hashtag im Compose */ .autocomplete { position: absolute; z-index: 1500; min-width: 240px; max-width: 320px; max-height: 280px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--schatten-lift); padding: 6px; } .ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 14px; line-height: 1.3; } .ac-item:hover, .ac-item.is-active { background: var(--akzent-soft); } .ac-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-mute); } .ac-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ac-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-text small { color: var(--text-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Poll im Compose-Bereich + Render in Posts */ .compose__poll { margin: 10px 0 4px; padding: 12px; border: 1px dashed var(--akzent); border-radius: 12px; background: var(--akzent-soft); } .compose__poll-zeile { display: flex; flex-direction: column; gap: 8px; } .compose__poll-input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); color: var(--text); font-size: 14px; } .compose__poll-input:focus { outline: 0; border-color: var(--akzent); } .compose__poll-fuss { margin-top: 10px; font-size: 13px; color: var(--text-mute); } .compose__poll-fuss select { margin-left: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-elev); color: var(--text); } #compose-poll-toggle.aktiv { background: var(--akzent-soft); color: var(--akzent); border-color: var(--akzent); } .poll { margin: 12px 0 6px; display: flex; flex-direction: column; gap: 8px; } .poll__opt { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; background: var(--bg-elev); display: flex; align-items: center; gap: 10px; overflow: hidden; } .poll__opt--mine { border-color: var(--akzent); } .poll__balken { position: absolute; left: 0; top: 0; bottom: 0; background: var(--akzent-soft); z-index: 0; } .poll__opt-text { flex: 1; position: relative; z-index: 1; } .poll__opt-pct { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-mute); font-size: 13px; } .poll__vote-btn { flex: 1; padding: 8px 14px; border: 0; background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--akzent); font-weight: 600; } .poll__vote-btn:hover { background: var(--akzent-soft); border-radius: 8px; } .poll__fuss { margin-top: 4px; font-size: 12.5px; } /* Onboarding-Banner für Stufe Rot — wird über dem Feed gezeigt */ .onboarding-banner { display: flex; align-items: center; gap: 14px; margin: 16px 0 18px; padding: 14px 18px; background: linear-gradient(135deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.04)); border: 1.5px solid #DC2626; border-radius: 14px; } .onboarding-banner__icon { font-size: 24px; flex: 0 0 auto; } .onboarding-banner__text { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; } .onboarding-banner__text strong { color: #DC2626; font-size: 14.5px; } .onboarding-banner__text span { color: var(--text); } .onboarding-banner__text em { font-style: normal; font-weight: 600; } .onboarding-banner__resend { flex: 0 0 auto; } /* Tastenkürzel-Hilfe-Modal */ .shortcut-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .shortcut-tabelle td { padding: 7px 4px; border-bottom: 1px solid var(--line); } .shortcut-tabelle tr:last-child td { border-bottom: 0; } .shortcut-tabelle td:first-child { width: 60px; } .shortcut-tabelle kbd { display: inline-block; min-width: 26px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-mute); font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--text); text-align: center; box-shadow: 0 1px 0 rgba(0,0,0,0.04); } /* Hashtag-Detail — Liste aktivster Profile */ .hashtag-top-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .hashtag-top-karte { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } .hashtag-top-karte:hover { border-color: var(--akzent); transform: translateY(-1px); } .hashtag-top-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--bg-mute); } .hashtag-top-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hashtag-top-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hashtag-top-sub { font-size: 12px; color: var(--text-mute); } /* Legal-Gate-Modal — blockt die Seite bis EULA/DSGVO-v2 akzeptiert sind. */ .legal-modal-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, 0.62); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .legal-modal { width: 100%; max-width: 760px; max-height: 86vh; background: var(--bg-elev); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow: hidden; } .legal-modal__head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); } .legal-modal__head h2 { margin: 0 0 6px; font-size: 19px; } .legal-modal__inhalt { padding: 18px 24px; overflow-y: auto; flex: 1; font-size: 14.5px; line-height: 1.55; } .legal-modal__inhalt h1, .legal-modal__inhalt h2, .legal-modal__inhalt h3 { margin: 18px 0 8px; } .legal-modal__fuss { padding: 14px 24px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }