/* ===================================================================== VEEDEL — Social Köln Ästhetik: Köln bei Nacht. Warmes Dunkel, große Typografie, Abendlicht-Verläufe von Köln-Rot nach Gold. Zwei Regeln, die das Ganze zusammenhalten: 1. Sans für alles, was man liest. Mono nur für kurze Labels, Veedel-Namen und Zahlen — als Gewürz, nicht als Grundton. 2. Keine Störeffekte. Aufmerksamkeit entsteht über Größe, Farbe und Bewegung, nicht über Scanlines und Glitch. ===================================================================== */ /* ---------------------------------------------------------------- Tokens */ :root { /* Warmes Nachtbraun statt Blauschwarz. Der Unterschied wirkt winzig, macht aber den Hauptteil davon aus, ob eine dunkle Fläche kalt und technisch oder abends und einladend wirkt. */ --bg: #17151a; --bg-2: #1d1a20; --surface: #221e26; --surface-2: #2b262f; --line: #3a343f; --line-soft: #272229; --text: #ece8e1; /* warmes Off-White, kein Blaustich */ --text-dim: #b3aaa2; --text-mute: #8a8079; --rot: #e8493f; /* Köln-Rot, entschärft */ --rot-hell: #ff6a5e; --gold: #f0a44a; /* Abendlicht am Rhein */ --gold-hell: #ffc078; --gelb: #f0c04a; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; /* Großzügigere Radien — runder wirkt freundlicher als kantig. */ --r-sm: 11px; --r-md: 18px; --r-lg: 26px; --shadow: 0 20px 46px -16px rgba(0,0,0,.6); --glow-gold: 0 0 0 1px rgba(240,164,74,.32), 0 0 26px -8px rgba(240,164,74,.4); --glow-rot: 0 0 0 1px rgba(232,73,63,.38), 0 0 30px -8px rgba(232,73,63,.45); --topbar-h: 56px; --tabbar-h: 66px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --ease: cubic-bezier(.22,.68,0,1); --spring: cubic-bezier(.34,1.56,.64,1); } /* Heller Modus — ebenfalls warm, sonst kippt die Seite beim Umschalten von "Abend am Rhein" nach "Büro-Software". */ [data-theme="hell"] { --bg: #faf7f2; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f3efe8; --line: #e0d9cf; --line-soft: #ece6dd; --text: #201c1a; --text-dim: #635c54; --text-mute: #8d857b; --shadow: 0 14px 38px -18px rgba(60,45,30,.22); } /* Während des Themenwechsels sind alle Übergänge aus — siehe applyTheme() in app.js. Ohne das behalten Eigenschaften, die ihre Farbe aus einer der oben getauschten Variablen beziehen, den alten Wert und die Seite bleibt halb umgeschaltet stehen. */ .theme-wechsel *, .theme-wechsel *::before, .theme-wechsel *::after { transition: none !important; } /* ---------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior-y: none; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; /* BEWUSST OHNE transition. Der helle Modus war deshalb kaputt: Farbe und Hintergrund von body stammen aus CSS-Variablen, die beim Umschalten am -Element ausgetauscht werden. Liegt auf body ein Übergang für genau diese Eigenschaften, behält Chrome den alten Wert bei — body blieb dunkel, während Karten, Ränder und Überschriften schon hell waren. Frisch erzeugte Elemente waren nicht betroffen, weshalb der Fehler sprunghaft aussah. Ein Themenwechsel ohne Überblendung ist kein Verlust; ein halb umgeschaltetes Layout schon. */ } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } a { color: var(--gold); text-decoration: none; } [hidden] { display: none !important; } svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } ::selection { background: var(--rot); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ============================================================= Schriftzug Der Wumms kommt jetzt aus der Typografie, nicht aus Störeffekten: groß, fett, eng gesetzt, mit einem warmen Verlauf von Köln-Rot nach Abendgold. Scanlines, Körnung und Glitch sind ersatzlos entfallen — die haben die Seite kalt und technisch wirken lassen und kosteten auf dem Handy dauerhaft GPU-Zeit. */ .wordmark { font-family: var(--sans); font-weight: 800; /* Eng statt weit. Weite Laufweite in Versalien ist das stärkste Einzelmerkmal, das einen Schriftzug nach Terminal aussehen lässt. */ letter-spacing: -.03em; font-size: clamp(44px, 13vw, 72px); line-height: 1.02; margin: 0; background: linear-gradient(100deg, var(--rot) 8%, var(--gold) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; /* Fallback: ohne background-clip bliebe der Text sonst unsichtbar. */ -webkit-text-fill-color: transparent; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .wordmark { color: var(--text); -webkit-text-fill-color: currentColor; } } .wordmark--sm { font-size: 21px; letter-spacing: -.02em; } /* Sanftes Pulsieren am Punkt hinter dem Namen — ein Lebenszeichen, kein Blinken. */ .blink { color: var(--gold); animation: puls 2.6s var(--ease) infinite; display: inline-block; } @keyframes puls { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } } /* ================================================================== Boot */ .boot { position: fixed; inset: 0; z-index: 9000; background: var(--bg); display: grid; place-items: center; padding: 24px; transition: opacity .6s var(--ease), transform .6s var(--ease); } .boot.is-done { opacity: 0; transform: scale(1.04); pointer-events: none; } .boot__inner { width: min(560px, 100%); text-align: center; } /* Kein ASCII-Block und kein Flackern mehr — stattdessen derselbe Schriftzug wie im Rest der App, der beim Laden sanft aufgeht. */ .boot__logo { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; font-size: clamp(48px, 15vw, 84px); line-height: 1; margin: 0 0 18px; background: linear-gradient(100deg, var(--rot) 8%, var(--gold) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: bootAuf .9s var(--ease) both; } @keyframes bootAuf { from { opacity: 0; transform: translateY(14px) scale(.96); } } .boot__log { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; color: var(--text-mute); min-height: 42px; white-space: pre-wrap; } .boot__log .ok { color: var(--gold); } .boot__log .rot { color: var(--rot-hell); } /* Warmer Lichtschein hinter dem Ladeschirm */ .boot::before { content: ""; position: absolute; left: 50%; top: 42%; width: min(680px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(232,73,63,.16) 0%, rgba(240,164,74,.09) 38%, transparent 68%); pointer-events: none; } /* ================================================================== Gate */ .gate { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; padding: 24px 20px calc(24px + var(--safe-b)); overflow-y: auto; animation: fadeUp .55s var(--ease) both; } .gate__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Statt des perspektivischen Rasters (das sehr nach Tron aussah) zwei langsam wandernde Lichtflecken — wie Straßenlaternen durch Nebel. */ .gate__grid { position: absolute; inset: -20%; background: radial-gradient(circle at 22% 28%, rgba(232,73,63,.22) 0%, transparent 46%), radial-gradient(circle at 78% 68%, rgba(240,164,74,.18) 0%, transparent 48%), radial-gradient(circle at 55% 12%, rgba(240,192,74,.10) 0%, transparent 40%); filter: blur(18px); animation: lichtDrift 26s var(--ease) infinite alternate; } @keyframes lichtDrift { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate( 3%, 2%) scale(1.08); } } .gate__dom { position: absolute; left: 50%; bottom: 0; /* height muss explizit sein, sonst greift die globale svg-Regel (24px). */ width: min(460px, 90vw); height: auto; aspect-ratio: 4 / 3; transform: translateX(-50%); color: var(--rot); opacity: .16; filter: drop-shadow(0 0 24px rgba(227,6,19,.5)); animation: domPulse 6s ease-in-out infinite; } @keyframes domPulse { 50% { opacity: .3; } } .gate__panel { position: relative; width: min(430px, 100%); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 24px 22px; box-shadow: var(--shadow); } .gate__brand { text-align: center; margin-bottom: 22px; } .gate__tag { font-size: 13.5px; color: var(--text-dim); margin: 9px 0 0; } .gate__foot { text-align: center; font-size: 12.5px; color: var(--text-mute); margin: 20px 0 0; } /* Pflichtlinks — müssen von jeder Seite aus erreichbar sein */ .gate__legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: 12px; } .gate__legal a { color: var(--text-mute); } .gate__legal a:hover { color: var(--gold); } /* Zustimmungshaken bei der Registrierung */ .check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); cursor: pointer; } .check input { flex: 0 0 auto; margin: 1px 0 0; width: 17px; height: 17px; accent-color: var(--rot); cursor: pointer; } .check a { text-decoration: underline; } /* ================================================================= Tabs */ .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; margin-bottom: 20px; } .tabs__btn { padding: 9px 8px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-dim); transition: background .25s var(--ease), color .25s var(--ease); } .tabs__btn.is-active { background: var(--rot); color: #fff; box-shadow: var(--glow-rot); } /* ================================================================ Formular */ .form { display: grid; gap: 15px; } .field { display: grid; gap: 6px; } .field__label { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text-mute); } .field__hint { font-size: 11.5px; color: var(--text-mute); } .field input, .field select, .field textarea { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; font-size: 15px; transition: border-color .2s, box-shadow .25s var(--ease), background .2s; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); box-shadow: var(--glow-gold); background: var(--surface); } .field input::placeholder, .field textarea::placeholder { color: var(--text-mute); } .field textarea { resize: vertical; min-height: 92px; line-height: 1.55; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d94a8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 34px; } .form__error { margin: 0; min-height: 18px; font-size: 13px; color: var(--rot-hell); } .form__error:not(:empty) { animation: shake .4s var(--ease); } @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } /* ================================================================ Buttons */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; transition: transform .18s var(--spring), box-shadow .25s var(--ease), background .25s, border-color .25s; } .btn:hover { transform: translateY(-2px); border-color: var(--text-mute); } .btn:active { transform: translateY(0) scale(.97); } .btn--block { width: 100%; } .btn--primary { background: linear-gradient(135deg, var(--rot), var(--rot-hell)); border-color: transparent; color: #fff; font-weight: 600; } .btn--primary:hover { box-shadow: var(--glow-rot); } .btn--ghost { background: transparent; } .btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold-hell)); border-color: transparent; color: #241505; font-weight: 700; } .btn--sm { padding: 9px 14px; font-size: 13px; } /* Shine-Effekt beim Überfahren */ .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%); transform: translateX(-140%); transition: transform .75s var(--ease); } .btn:hover::after { transform: translateX(140%); } .btn[disabled] { opacity: .5; pointer-events: none; } .iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-dim); transition: color .2s, background .25s, transform .25s var(--spring); } .iconbtn:hover { color: var(--text); background: var(--surface-2); transform: rotate(-8deg) scale(1.08); } /* =============================================================== App-Shell */ /* BEWUSST OHNE animation. Die Hülle trug früher fadeUp. Eine Animation mit transform macht das Element zum Bezugsrahmen für alles, was darin fest positioniert ist — also für Topbar und Seitenleiste. Die Leiste richtete sich dann nicht mehr am Fenster aus, sondern am Kasten von #app, und rutschte um dessen linken Innenabstand nach rechts, quer über die Karte. Der Auftritt fehlt dadurch nicht: #view bekommt beim Wechsel ohnehin seine eigene Einblendung (.is-entering). */ .app { display: block; min-height: 100%; } .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) 14px 0 16px; display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line-soft); } .topbar__brand { display: flex; align-items: center; } .topbar__actions { display: flex; gap: 2px; } .view { padding-top: calc(var(--topbar-h) + var(--safe-t) + 14px); padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 26px); min-height: 100vh; max-width: 620px; margin: 0 auto; } /* Ausnahme für die Veedel-Karte: die braucht mehr Breite als der Rest. Views.veedel() setzt die Klasse, go() nimmt sie wieder weg. Bewusst .view.view--breit statt nur .view--breit: weiter unten im Responsive-Block steht erneut ein .view { max-width: 640px }. Bei gleicher Spezifität gewänne die spätere Regel — die höhere Spezifität macht das hier unabhängig von der Reihenfolge. */ @media (min-width: 760px) { .view.view--breit { max-width: min(1240px, 100%); } } .view.is-swapping { animation: viewOut .18s var(--ease) both; } .view.is-entering { animation: viewIn .34s var(--ease) both; } @keyframes viewOut { to { opacity: 0; transform: translateY(-8px); } } @keyframes viewIn { from { opacity: 0; transform: translateY(14px); } } /* Tabbar */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-top: 1px solid var(--line-soft); } .tabbar__btn { display: grid; place-items: center; gap: 3px; color: var(--text-mute); font-size: 10.5px; font-weight: 600; letter-spacing: -.005em; transition: color .22s var(--ease); } .tabbar__btn svg { width: 22px; height: 22px; transition: transform .3s var(--spring); } .tabbar__btn:active svg { transform: scale(.82); } .tabbar__btn.is-active { color: var(--text); } .tabbar__btn.is-active svg { color: var(--rot); transform: translateY(-2px) scale(1.12); } .tabbar__btn--fab { position: relative; } .tabbar__btn--fab svg { width: 46px; height: 46px; padding: 11px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--rot), var(--gold)); box-shadow: 0 8px 24px -6px rgba(227,6,19,.7); stroke-width: 2.4; } .tabbar__btn--fab:hover svg { transform: rotate(90deg) scale(1.06); } .tabbar__btn--fab.is-active svg { color: #fff; } /* ============================================================ Bausteine */ .stack { display: grid; gap: 16px; padding: 0 14px; } .section-title { font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--text); padding: 0 14px; margin: 14px 0 2px; display: flex; align-items: center; gap: 12px; } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } /* Filterleiste (Veedel / Feed-Modus) */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--text-dim); white-space: nowrap; transition: all .25s var(--ease); } .chip:hover { border-color: var(--text-mute); color: var(--text); } .chip.is-active { background: var(--rot); border-color: transparent; color: #fff; box-shadow: var(--glow-rot); } .chip__count { opacity: .6; margin-left: 6px; } /* ================================================================= Karte */ .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .3s, box-shadow .3s; } .card.is-in { opacity: 1; transform: none; } .card:hover { border-color: var(--line); } .card__head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; } .card__meta { flex: 1; min-width: 0; } .card__name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; } .card__sub { font-family: var(--mono); font-size: 10.5px; color: var(--text-mute); letter-spacing: .04em; display: flex; align-items: center; gap: 6px; } .avatar { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); } .avatar--lg { width: 84px; height: 84px; } .avatar--sm { width: 28px; height: 28px; } /* Fallback-Avatar: Initiale auf Farbverlauf */ .avatar--gen { display: grid; place-items: center; font-family: var(--mono); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--rot), var(--gold)); border: 0; } .avatar--lg.avatar--gen { font-size: 30px; } /* Bild im Post */ .card__media { position: relative; overflow: hidden; background: var(--bg-2); cursor: pointer; } .card__media img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease), filter .5s; opacity: 0; } .card__media img.is-loaded { opacity: 1; animation: imgIn .7s var(--ease) both; } @keyframes imgIn { from { opacity: 0; transform: scale(1.05); filter: blur(14px); } } .card__media:hover img { transform: scale(1.035); } .card__veedel { position: absolute; left: 10px; bottom: 10px; padding: 5px 11px; border-radius: 99px; background: rgba(8,9,12,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: #fff; display: flex; align-items: center; gap: 5px; } .card__veedel::before { content: "◉"; color: var(--gold); } /* Herz beim Doppeltippen */ .burst { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; color: var(--rot-hell); animation: burst .9s var(--ease) forwards; } @keyframes burst { 0% { opacity: 0; transform: scale(.2) rotate(-14deg); } 22% { opacity: 1; transform: scale(1.22) rotate(6deg); } 42% { transform: scale(.95) rotate(-2deg); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.5) translateY(-26px); } } /* Aktionsleiste */ .card__actions { display: flex; align-items: center; gap: 4px; padding: 9px 8px 4px; } .act { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-dim); font-family: var(--mono); font-size: 12.5px; transition: color .2s, background .25s, transform .25s var(--spring); } .act:hover { background: var(--surface-2); color: var(--text); } .act:active { transform: scale(.9); } .act svg { width: 21px; height: 21px; } .act--liked { color: var(--rot-hell); } .act--liked svg { fill: var(--rot-hell); stroke: var(--rot-hell); animation: pop .45s var(--spring); } @keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 60% { transform: scale(.88); } 100% { transform: scale(1); } } .act--spacer { margin-left: auto; } .card__body { padding: 2px 14px 14px; } .card__caption { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; word-break: break-word; } .card__caption b { font-weight: 600; } .card__caption .tag { color: var(--gold); } .card__comments { display: grid; gap: 7px; margin-top: 9px; } .comment { font-size: 13.5px; line-height: 1.5; word-break: break-word; } .comment b { font-weight: 600; margin-right: 5px; } .comment__del { font-family: var(--mono); font-size: 10px; color: var(--text-mute); margin-left: 6px; opacity: 0; transition: opacity .2s; } .comment:hover .comment__del { opacity: 1; } .comment__del:hover { color: var(--rot-hell); } .card__more { font-family: var(--mono); font-size: 11.5px; color: var(--text-mute); margin-top: 8px; display: inline-block; } .card__more:hover { color: var(--gold); } /* Kommentar schreiben */ .compose { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line-soft); padding: 9px 12px; } .compose input { flex: 1; background: none; border: 0; outline: 0; font-size: 14.5px; padding: 5px 0; } .compose input::placeholder { color: var(--text-mute); } .compose button { font-size: 13.5px; font-weight: 600; color: var(--gold); padding: 6px 10px; border-radius: 8px; transition: background .2s; } .compose button:hover { background: var(--surface-2); } /* =============================================================== Raster */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px; } .grid__cell { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); cursor: pointer; opacity: 0; transform: scale(.9); animation: cellIn .5s var(--ease) forwards; } @keyframes cellIn { to { opacity: 1; transform: none; } } .grid__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; } .grid__cell:hover img { transform: scale(1.14); filter: brightness(.55); } .grid__stat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: #fff; font-weight: 600; opacity: 0; transition: opacity .3s var(--ease); } .grid__cell:hover .grid__stat { opacity: 1; } .grid__stat span { display: flex; align-items: center; gap: 5px; } .grid__stat svg { width: 16px; height: 16px; fill: #fff; } /* ============================================================== Profil */ .profile { padding: 4px 16px 20px; } .profile__top { display: flex; align-items: center; gap: 18px; } .profile__name { margin: 0; font-size: 19px; font-weight: 700; } .profile__handle { font-family: var(--mono); font-size: 12px; color: var(--text-mute); letter-spacing: .04em; } .profile__bio { margin: 12px 0 0; font-size: 14px; line-height: 1.55; } .profile__veedel { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--gold); } .profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 14px; border-block: 1px solid var(--line-soft); padding: 14px 0; } .stat { text-align: center; } .stat b { display: block; font-size: 19px; font-family: var(--mono); } .stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); } .profile__actions { display: flex; gap: 8px; } .profile__actions .btn { flex: 1; } /* ============================================================== Upload */ .dropzone { position: relative; border: 2px dashed var(--line); border-radius: var(--r-md); aspect-ratio: 4/5; display: grid; place-items: center; background: var(--bg-2); overflow: hidden; transition: border-color .3s, background .3s, transform .3s var(--spring); cursor: pointer; } .dropzone:hover, .dropzone.is-over { border-color: var(--gold); background: var(--surface); box-shadow: var(--glow-gold); } .dropzone.is-over { transform: scale(1.015); } .dropzone img { width: 100%; height: 100%; object-fit: cover; } .dropzone__hint { text-align: center; padding: 24px; font-family: var(--mono); font-size: 12px; color: var(--text-mute); line-height: 1.9; } .dropzone__hint svg { width: 46px; height: 46px; margin: 0 auto 12px; color: var(--gold); } /* Filterauswahl */ .filters { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-opt { flex: 0 0 auto; text-align: center; } .filter-opt img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 2px solid transparent; transition: border-color .25s, transform .25s var(--spring); } .filter-opt.is-active img { border-color: var(--gold); transform: scale(1.06); } .filter-opt span { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--text-mute); } .filter-opt.is-active span { color: var(--gold); } /* Die eigentlichen Bildfilter */ .f-none { filter: none; } .f-dom { filter: contrast(1.18) saturate(.82) sepia(.16); } .f-rhein { filter: saturate(1.28) hue-rotate(-8deg) brightness(1.04); } .f-karneval { filter: saturate(1.75) contrast(1.12); } .f-noir { filter: grayscale(1) contrast(1.28); } .f-veedel { filter: sepia(.34) saturate(1.3) contrast(1.06); } .f-neon { filter: saturate(1.5) contrast(1.22) hue-rotate(12deg); } .f-1980 { filter: sepia(.5) saturate(1.6) hue-rotate(-18deg) contrast(1.1); } /* ============================================================= Zustände */ .empty { text-align: center; padding: 60px 26px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; } .empty svg { width: 54px; height: 54px; margin: 0 auto 16px; color: var(--line); } .empty b { display: block; color: var(--text); font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 8px; } .skeleton { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; } .skeleton__bar, .skeleton__img { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 240% 100%; animation: shimmer 1.3s linear infinite; } .skeleton__img { aspect-ratio: 4/5; } .skeleton__bar { height: 11px; border-radius: 99px; margin: 12px 14px; } @keyframes shimmer { to { background-position: -240% 0; } } .spinner { width: 22px; height: 22px; margin: 26px auto; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================== Toast */ .toast { position: fixed; left: 50%; z-index: 9500; bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px); transform: translate(-50%, 24px); padding: 11px 18px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--spring); max-width: calc(100vw - 40px); text-align: center; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .toast.is-bad { border-color: var(--rot); color: var(--rot-hell); } .toast.is-good { border-color: var(--gold); color: var(--gold); } /* =============================================================== Sheet Von unten einfahrendes Menü für Melden, Blockieren, Bestätigungen. */ .sheet { position: fixed; inset: 0; z-index: 9700; } .sheet__bg { position: absolute; inset: 0; background: rgba(4,5,8,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s var(--ease); } .sheet.is-on .sheet__bg { opacity: 1; } .sheet__panel { position: absolute; left: 50%; bottom: 0; width: min(460px, 100%); transform: translate(-50%, 100%); transition: transform .34s var(--ease); background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 12px calc(14px + var(--safe-b)); box-shadow: var(--shadow); max-height: 88vh; overflow-y: auto; } .sheet.is-on .sheet__panel { transform: translate(-50%, 0); } .sheet__grip { width: 38px; height: 4px; border-radius: 99px; background: var(--line); margin: 4px auto 12px; } .sheet__title { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 10px; padding: 0 6px; text-align: center; } .sheet__note { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: -4px 0 14px; padding: 0 6px; text-align: center; } .sheet__item { display: block; width: 100%; text-align: left; padding: 13px 14px; border-radius: var(--r-sm); font-size: 15px; transition: background .2s; } .sheet__item:hover { background: var(--surface-2); } .sheet__item small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; color: var(--text-mute); } .sheet__item.is-danger { color: var(--rot-hell); } .sheet__cancel { margin-top: 6px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--text-mute); border-top: 1px solid var(--line-soft); border-radius: 0; } .sheet__form { display: grid; gap: 12px; padding: 4px 6px 0; } /* ------------------------------------------------------- Gefahrenzone */ .btn--danger { background: transparent; border-color: var(--rot); color: var(--rot-hell); font-weight: 600; } .btn--danger:hover { background: var(--rot); color: #fff; box-shadow: var(--glow-rot); } .danger-zone { padding: 16px 15px; border-color: color-mix(in srgb, var(--rot) 40%, var(--line)); } .danger-zone b { display: block; font-size: 15px; margin-bottom: 6px; } .danger-zone p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--text-dim); } /* Textknopf, der wie ein Link aussieht */ .linkbtn { display: block; margin: -4px auto 0; padding: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--text-mute); } .linkbtn:hover { color: var(--gold); } /* Hinweis auf die noch offene E-Mail-Bestätigung */ .verify-hint { padding: 15px 14px; border-color: color-mix(in srgb, var(--gelb) 45%, var(--line)); } .verify-hint b { display: block; margin-bottom: 6px; color: var(--gelb); } .verify-hint p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; } /* =============================================================== Karte Karte links, Liste rechts. Beim Überfahren leuchtet beides zugleich — die Fläche in der Karte und die zugehörige Zeile in der Liste. */ .karte { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 14px; } @media (min-width: 560px) { .karte { grid-template-columns: minmax(0, 1.05fr) minmax(190px, .95fr); } } /* Ab hier bekommt die Karte deutlich mehr Fläche als die Liste — 86 Stadtteile brauchen Platz, sonst trifft man die kleinen im Süden nicht. Die Liste braucht nur so viel Breite, dass die längsten Namen (Roggendorf/Thenhoven) hineinpassen. */ @media (min-width: 760px) { .karte { grid-template-columns: minmax(0, 1.9fr) minmax(230px, 1fr); gap: 20px; } } .karte__bild { position: relative; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 60%), var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px; overflow: hidden; } .karte__svg { width: 100%; height: auto; display: block; } /* Grundzustand aller 86 Stadtteile. Die globale svg-Regel setzt fill:none und stroke-width:1.8 — beides gilt hier ausdrücklich nicht. */ .karte__svg .stt { stroke: var(--bg-2); stroke-width: 1; /* Hier ist die feste Haarlinie gewollt: die Grenzen sollen bei jeder Kartengröße gleich dünn bleiben. */ vector-effect: non-scaling-stroke; cursor: pointer; /* Nur filter, ausdrücklich NICHT fill. Die Ruhefarben unten kommen aus color-mix(). Chrome kann von einem color-mix()-Wert nicht wegblenden und bleibt beim Ausgangswert stehen — die Fläche wurde beim Überfahren dann gar nicht rot. Nachgemessen: ohne Übergang und mit fester Ausgangsfarbe kommt rgb(232,73,63) an, mit Übergang auf color-mix() nicht. Ein sofortiger Farbwechsel ist auf einer Karte ohnehin die direktere Rückmeldung; der Schein blendet weiterhin weich auf. */ transition: filter .16s var(--ease); } /* Ein Farbton je Stadtbezirk — neun Abstufungen zwischen Rot und Gold, bewusst schwach gesättigt. Sie sollen gliedern, nicht schreien; die kräftige Farbe bleibt dem Überfahren vorbehalten. */ .karte__svg .stt--t0 { fill: color-mix(in srgb, var(--rot) 30%, var(--surface)); } .karte__svg .stt--t1 { fill: color-mix(in srgb, var(--rot) 24%, var(--surface)); } .karte__svg .stt--t2 { fill: color-mix(in srgb, var(--rot) 18%, var(--surface)); } .karte__svg .stt--t3 { fill: color-mix(in srgb, var(--gold) 16%, var(--surface)); } .karte__svg .stt--t4 { fill: color-mix(in srgb, var(--gold) 22%, var(--surface)); } .karte__svg .stt--t5 { fill: color-mix(in srgb, var(--gold) 28%, var(--surface)); } .karte__svg .stt--t6 { fill: color-mix(in srgb, var(--rot) 21%, var(--surface)); } .karte__svg .stt--t7 { fill: color-mix(in srgb, var(--gold) 19%, var(--surface)); } .karte__svg .stt--t8 { fill: color-mix(in srgb, var(--gold) 25%, var(--surface)); } .karte__svg .stt:hover, .karte__svg .stt.is-hot { fill: var(--rot); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rot) 70%, transparent)); } /* ------------------------------------------------------------- Rhein Zwei Linien übereinander: eine breite, weiche für den Schimmer auf dem Wasser und eine schmale, kräftige für den Strom selbst. Die Breite ist maßstäblich — 350 m, wie der Rhein bei Köln wirklich ist. Kühles Blau als Gegenpol zur warmen Stadt; ohne das läse sich der Fluss wie eine weitere Straße. */ .karte__svg .rhein path { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; /* KEIN vector-effect hier — anders als bei den Stadtteilgrenzen. non-scaling-stroke würde die Breite in Bildschirmpixeln festnageln, der Rhein wäre dann bei kleiner Karte viel zu breit (gemessen: 12,8 px statt der maßstäblichen 7,6 px) und bei großer zu schmal. Ohne die Zeile skaliert die Breite mit und bleibt maßstabstreu. */ } .karte__svg .rhein__weit { stroke: rgba(74, 122, 155, .22); } .karte__svg .rhein__kern { stroke: #4a7a9b; } [data-theme="hell"] .karte__svg .rhein__weit { stroke: rgba(74, 122, 155, .2); } [data-theme="hell"] .karte__svg .rhein__kern { stroke: #6b9ec2; } /* ---------------------------------------------------- Beschriftung 86 Namen gleichzeitig wären unlesbar. Deshalb erscheint nur der Name, über dem man gerade steht. */ .karte__label { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 7px 11px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); font-size: 13px; font-weight: 600; text-align: center; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity .16s var(--ease), transform .16s var(--ease); pointer-events: none; } .karte__label.is-on { opacity: 1; transform: none; } /* ------------------------------------------------------------- Liste */ .karte__liste { display: flex; flex-direction: column; gap: 2px; padding-right: 4px; } /* Eigener Scrollbereich erst, wenn die Liste neben der Karte steht. Auf dem Handy läuft sie einfach mit der Seite mit — eine scrollende Box in einer scrollenden Seite ist dort nur lästig. */ @media (min-width: 560px) { .karte__liste { max-height: 460px; overflow-y: auto; scrollbar-width: thin; } } .veedel-zeile { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border-radius: var(--r-sm); text-align: left; transition: background .16s var(--ease), color .16s var(--ease); } .veedel-zeile:hover, .veedel-zeile.is-hot { background: color-mix(in srgb, var(--rot) 18%, transparent); } .veedel-zeile__punkt { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .16s var(--ease), transform .16s var(--spring); } .veedel-zeile:hover .veedel-zeile__punkt, .veedel-zeile.is-hot .veedel-zeile__punkt { background: var(--rot); transform: scale(1.5); } .veedel-zeile__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .veedel-zeile__name small { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--text-mute); font-weight: 400; overflow: hidden; text-overflow: ellipsis; } .veedel-zeile__zahl { flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: var(--text-mute); } .veedel-zeile.is-hot .veedel-zeile__zahl { color: var(--text); } .karte__quelle { padding: 10px 15px 0; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--text-mute); } /* ========================================================== Moderation */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; padding: 0 14px 14px; } .admin-stat { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 10px 11px; } .admin-stat b { display: block; font-size: 20px; font-family: var(--mono); } .admin-stat span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--text-mute); } .admin-stat.is-warn { border-color: var(--rot); } .admin-stat.is-warn b { color: var(--rot-hell); } .admin-report { padding: 13px 14px; display: grid; gap: 9px; } .admin-report__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .admin-reason { font-weight: 600; font-size: 14.5px; } .admin-status { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-mute); } .admin-status--offen { border-color: var(--gelb); color: var(--gelb); } .admin-status--erledigt { border-color: var(--gold); color: var(--gold); } .admin-dim { font-family: var(--mono); font-size: 11px; color: var(--text-mute); } .admin-note { margin: 0; padding: 8px 11px; background: var(--bg-2); border-radius: var(--r-sm); font-size: 13.5px; color: var(--text-dim); font-style: italic; } .admin-target { display: flex; gap: 11px; padding: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--bg-2); } .admin-target img { width: 86px; height: 86px; object-fit: cover; border-radius: var(--r-sm); flex: 0 0 auto; } .admin-target__meta { min-width: 0; display: grid; gap: 4px; align-content: start; } .admin-target__meta > button[data-user] { font-family: var(--mono); font-size: 12.5px; color: var(--gold); text-align: left; padding: 0; } .admin-caption { margin: 0; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; } .admin-link { font-family: var(--mono); font-size: 11px; color: var(--text-mute); text-align: left; padding: 0; } .admin-link:hover { color: var(--gold); } .admin-badge, .admin-flag { display: inline-block; width: fit-content; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; padding: 2px 7px; border-radius: 99px; } .admin-badge { background: var(--rot); color: #fff; } .admin-flag { border: 1px solid var(--gelb); color: var(--gelb); } .admin-gone { padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); font-family: var(--mono); font-size: 12px; color: var(--text-mute); text-align: center; } .admin-actions { display: flex; flex-wrap: wrap; gap: 7px; } .admin-decided { padding: 9px 11px; border-left: 2px solid var(--gold); background: var(--bg-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; color: var(--text-dim); } .admin-decided b { color: var(--text); } /* ============================================================ Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 9600; background: rgba(4,5,8,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 20px; animation: fadeUp .3s var(--ease) both; cursor: zoom-out; } .lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r-sm); animation: lightboxIn .45s var(--spring) both; } @keyframes lightboxIn { from { transform: scale(.86); opacity: 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } } /* ============================================================ Responsive */ @media (min-width: 760px) { body { font-size: 15.5px; /* Platz für die Seitenleiste freihalten. Bisher lief der Inhalt einfach darunter durch — bei 640 px Spaltenbreite fiel das nicht auf, weil links genug Luft war. Sobald die Veedel-Karte breiter werden darf, verschwanden ihre linken Pixel unter der Leiste und waren nicht mehr anklickbar. Fest positionierte Elemente (die Leiste selbst, Ladeschirm, Lightbox) bleiben davon unberührt; die Topbar bekommt ihr left: 96px weiter oben. */ padding-left: 96px; } /* Meldungen mittig über dem Inhalt, nicht über dem Fenster. */ .toast { left: calc(50% + 48px); } .view { padding-bottom: 60px; max-width: 640px; } /* Die Tabbar wird hier zur linken Seitenleiste. Sie steht im DOM nach der Topbar und liegt damit bei gleichem z-index obenauf — die Topbar muss deshalb rechts daneben anfangen, sonst sind die linken 96px ihrer Fläche (und damit fast das ganze Logo) nicht anklickbar. */ .topbar { left: 96px; } .tabbar { /* left: 0 ist Pflicht, nicht auto. Bei left: auto richtet sich ein fest positioniertes Element nach seiner statischen Position — und die verschiebt das padding-left: 96px am body mit. Die Leiste rutschte dadurch selbst um 96 px nach rechts und legte sich über die Karte. */ top: 0; bottom: auto; left: 0; right: auto; width: 96px; height: 100vh; grid-template-columns: 1fr; grid-auto-rows: min-content; align-content: center; gap: 20px; border-top: 0; border-right: 1px solid var(--line-soft); } .tabbar__btn { padding: 10px 0; } .toast { bottom: 30px; } .grid { gap: 6px; padding: 0 6px; } } /* Wer weniger Bewegung will, kriegt weniger Bewegung. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .card { opacity: 1; transform: none; } }