/* WellGrouped App – Design nach Brand Kit (marke/MARKE.md): fünf Farben, Outfit + Inter */ /* Schriften liegen auf unserem eigenen Server - keine Verbindung zu Google Fonts (Datenschutz) */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../schriften/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../schriften/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../schriften/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../schriften/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --deep-slate: #0B0F19; --crisp-white: #F8FAFC; --cyber-blue: #00F0FF; --mint: #00FF87; --gold: #FFB800; --slate-surface: #161F32; --slate-card: #1E2B45; --cool-gray: #94A3B8; --rand: rgba(51, 65, 85, 0.8); /* Keine Markenfarbe: nur für das rote ✕ der Benutzernamen-Prüfung (Steves ausdrücklicher Wunsch) */ --rot: #FF4757; --oben: env(safe-area-inset-top, 0px); --unten: env(safe-area-inset-bottom, 0px); color-scheme: dark; } /* Kein Doppeltipp-Zoom, auch nicht in rollenden Bereichen (dort gilt touch-action vom body nicht) */ * { box-sizing: border-box; touch-action: manipulation; } [hidden] { display: none !important; } /* Die Seite selbst rollt nie - wie bei einer App. Gerollt wird nur in Listen innerhalb des Rahmens. */ html { background: var(--deep-slate); -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--deep-slate); color: var(--crisp-white); font: 400 15px/1.5 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; /* Fühlt sich wie eine App an: kein Gummiband-Ziehen, kein Doppeltipp-Zoom, kein grauer Tipp-Blitz */ overscroll-behavior: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button, .knopf, .nav-knopf, .aktion-kachel { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Nur hochkant: Handy quer gedreht -> Hinweis statt App */ .drehen { display: none; } @media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) { .drehen { display: flex; position: fixed; inset: 0; z-index: 1000; background: var(--deep-slate); flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; } .drehen svg { width: 64px; height: 64px; color: var(--mint); animation: drehen 2.4s ease-in-out infinite; } .drehen strong { font: 900 1.3rem 'Outfit', system-ui, sans-serif; } .drehen span { color: var(--cool-gray); font-size: 0.9rem; } body > :not(.drehen) { visibility: hidden; } } @keyframes drehen { 0%, 20% { transform: rotate(-90deg); } 50%, 100% { transform: rotate(0deg); } } ::selection { background: var(--cyber-blue); color: var(--deep-slate); } a { color: var(--cyber-blue); } h1, h2, h3, h4 { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; margin: 0; letter-spacing: -0.01em; line-height: 1.2; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } h4 { font-size: 0.8rem; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: 2px; } /* Die zwei weichen Lichtflecken aus dem Brand Kit */ .licht { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .licht::before, .licht::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); } .licht::before { top: -30vmax; right: -25vmax; background: rgba(0, 255, 135, 0.08); } .licht::after { bottom: -30vmax; left: -25vmax; background: rgba(0, 240, 255, 0.08); } .ansicht { position: relative; z-index: 1; } /* Nur Deckkraft animieren: eine Verschiebung (transform) würde fest angeheftete Teile wie die Navigationsleiste mitverschieben */ .flaeche { animation: einblenden 0.3s ease-out both; } /* Sichtwechsel in der Test-WG: die neue Ansicht ist schon fertig geladen und erscheint ohne Einblenden */ .flaeche.sofort { animation: none; } /* ---------- Farben als Helfer ---------- */ .blau { color: var(--cyber-blue); } .mint { color: var(--mint); } .gold { color: var(--gold); } .grau { color: var(--cool-gray); } .weiss { color: var(--crisp-white); } .fett { font-weight: 700; } .klein { font-size: 0.8rem; } .mini { font-size: 0.72rem; } .zahl { font-variant-numeric: tabular-nums; } .mitte { text-align: center; } .leer { color: var(--cool-gray); font-size: 0.85rem; text-align: center; padding: 10px 0; } .abstand { margin: 6px 2px 0; } /* ---------- Laden ---------- */ .laden { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--cool-gray); } .warte-punkte { display: inline-flex; gap: 6px; vertical-align: middle; } .warte-punkte span { width: 7px; height: 7px; border-radius: 50%; animation: pulsieren 1.4s ease-in-out infinite; } .warte-punkte span:nth-child(1) { background: var(--cyber-blue); } .warte-punkte span:nth-child(2) { background: var(--mint); animation-delay: 0.2s; } .warte-punkte span:nth-child(3) { background: var(--gold); animation-delay: 0.4s; } /* ---------- Knöpfe (auf Akzentflächen immer Deep-Slate-Schrift) ---------- */ .knopf { appearance: none; border: 1px solid transparent; border-radius: 14px; padding: 12px 16px; font: 700 0.92rem 'Inter', system-ui, sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: transform 0.1s, opacity 0.15s, border-color 0.15s, box-shadow 0.15s; color: var(--deep-slate); -webkit-tap-highlight-color: transparent; } .knopf:active { transform: scale(0.95); } .knopf:disabled { opacity: 0.5; cursor: default; transform: none; } .knopf-blau { background: var(--cyber-blue); } .knopf-mint { background: var(--mint); } .knopf-gold { background: var(--gold); } .knopf-hell { background: var(--crisp-white); } .knopf-dunkel { background: var(--deep-slate); color: var(--crisp-white); border-color: rgba(11, 15, 25, 0.4); } .knopf-rand { background: transparent; border-color: var(--rand); color: var(--crisp-white); } .knopf-rand:hover { border-color: var(--cyber-blue); } .knopf-gold-rand { background: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.5); color: var(--gold); } .knopf-gold-rand:hover { background: var(--gold); color: var(--deep-slate); } .knopf-klein { padding: 7px 11px; border-radius: 10px; font-size: 0.78rem; } .knopf-mini { padding: 4px 8px; border-radius: 8px; font-size: 0.7rem; } .voll { width: 100%; } .leuchten-blau { box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); } .leuchten-mint { box-shadow: 0 0 20px rgba(0, 255, 135, 0.3); } .leuchten-gold { box-shadow: 0 0 20px rgba(255, 184, 0, 0.35); } .textknopf { appearance: none; background: none; border: 0; padding: 4px 0; color: var(--cool-gray); font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .textknopf:hover { color: var(--crisp-white); } .textknopf.blau { color: var(--cyber-blue); text-decoration: none; font-size: 0.75rem; font-weight: 700; } /* Kodex-Zeile auf Home (seit 18.10.2026): Stand als Textknopf in Gold (Vorschläge) bzw. Mint (nichts offen) */ .karte.eng.kodex-zeile { padding-top: 8px; padding-bottom: 8px; } [data-aktion="kodex-oeffnen"].textknopf { text-decoration: none; font-size: 0.75rem; font-weight: 700; text-align: right; } .textknopf.mint { color: var(--mint); } .symbol-knopf { appearance: none; background: transparent; border: 1px solid var(--rand); border-radius: 8px; color: var(--cool-gray); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; flex-shrink: 0; } .symbol-knopf:hover { border-color: var(--gold); color: var(--gold); } .knopf-reihe { display: flex; gap: 10px; margin-top: 18px; } .knopf-reihe > * { flex: 1; } .knopf-stapel { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .knopf-gruppe { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } /* ---------- Formulare ---------- */ /* Überschriften über Feldern: dezent grau (Steve fand das schöner als farbig, 11.10.2026) */ .feld-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--cool-gray); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 6px; } .optional { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--cool-gray); } .feld { width: 100%; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 12px; padding: 11px 13px; font-size: 16px; color: var(--crisp-white); outline: none; transition: border-color 0.15s; } .feld:focus { border-color: var(--cyber-blue); } textarea.feld { resize: vertical; min-height: 80px; } select.feld { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cool-gray) 50%), linear-gradient(135deg, var(--cool-gray) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; } input[type=date].feld { min-height: 46px; } .feld-hinweis { color: var(--cool-gray); font-size: 0.78rem; margin-top: 6px; } .feld-hinweis.mitte { text-align: center; margin-top: 14px; } .formular-fehler { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 184, 0, 0.1); border: 1px solid rgba(255, 184, 0, 0.45); color: var(--gold); font-size: 0.85rem; font-weight: 600; } .haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 0.88rem; color: var(--crisp-white); cursor: pointer; } .haken input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mint); flex-shrink: 0; } .passwort { position: relative; } .passwort .feld { padding-right: 48px; } .passwort-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; opacity: 0.55; font-size: 1rem; } .passwort-auge.an, .passwort-auge:hover { opacity: 1; } .code-feld { letter-spacing: 0.35em; font: 800 1.4rem 'Outfit', system-ui, sans-serif; text-align: center; } /* Aufklappbare Frage, z. B. „Was ist die WG-ID?“ */ .aufklapp { margin-top: 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--deep-slate); } .aufklapp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 0.85rem; font-weight: 700; color: var(--crisp-white); } .aufklapp summary::-webkit-details-marker { display: none; } .aufklapp summary::before { content: "?"; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--cyber-blue); color: var(--deep-slate); font: 800 0.75rem/20px 'Inter', system-ui, sans-serif; text-align: center; } .aufklapp summary::after { content: "▾"; margin-left: auto; color: var(--cyber-blue); transition: transform 0.15s; } .aufklapp[open] summary::after { transform: rotate(180deg); } .aufklapp p { margin: 0; padding: 0 12px 10px 40px; font-size: 0.8rem; line-height: 1.45; color: var(--cool-gray); } .code-gross { margin: 16px 0; padding: 16px; border-radius: 16px; background: var(--deep-slate); border: 2px solid var(--cyber-blue); box-shadow: 0 0 25px rgba(0, 240, 255, 0.25); text-align: center; font: 900 2rem 'Outfit', system-ui, sans-serif; letter-spacing: 0.3em; color: var(--cyber-blue); padding-left: calc(16px + 0.3em); } /* ---------- Avatare ---------- */ .avatar { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; border: 1px solid rgba(248, 250, 252, 0.15); } .avatar.klein { width: 24px; height: 24px; border-radius: 7px; font-size: 0.78rem; } .avatar.gross { width: 64px; height: 64px; border-radius: 18px; font-size: 1.9rem; border-width: 2px; } .avatar.riesig { width: 60px; height: 60px; border-radius: 18px; font-size: 1.8rem; border-width: 2px; } .avatar-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; } .avatar-wahl.klein { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); } .avatar-knopf { appearance: none; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 12px; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--crisp-white); min-width: 0; } .avatar-knopf span { font-size: 1.3rem; line-height: 1.3; } .avatar-knopf small { font-size: 0.62rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar-knopf:hover { border-color: var(--cyber-blue); } .avatar-knopf.gewaehlt { background: rgba(255, 184, 0, 0.15); border-color: var(--gold); color: var(--gold); } .avatar-knopf.gesperrt { opacity: 0.38; cursor: not-allowed; } .farb-wahl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .farb-knopf { appearance: none; height: 38px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; opacity: 0.8; transition: transform 0.1s; } .farb-knopf.gewaehlt { border-color: var(--crisp-white); opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 2px var(--deep-slate) inset; } .farb-knopf[style*="1E2B45"] { border-color: var(--rand); } .farb-knopf[style*="1E2B45"].gewaehlt { border-color: var(--crisp-white); } /* ---------- Einstieg: Anmelden, Onboarding, Admin-Login ---------- */ /* Jede Einstiegsseite füllt genau den Bildschirm; die Seite selbst rollt nie */ .einstieg { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 18px; padding: max(28px, var(--oben)) 16px max(28px, var(--unten)); } .einstieg > .admin-leiste { position: absolute; top: 0; left: 0; right: 0; } /* Bildschirmtastatur: Die festen Rahmen schrumpfen auf den sichtbaren Bereich über der Tastatur (Werte setzt start.js aus window.visualViewport). Ohne Tastatur sind es einfach 100 %. */ /* --eigene-tastatur = Höhe unserer eigenen Tastatur (tastatur.js), solange sie offen ist */ .einstieg, .app-rahmen, .dialog-hinter { top: var(--vv-oben, 0px); bottom: auto; height: calc(var(--vv-hoehe, 100%) - var(--eigene-tastatur, 0px)); } /* Tastatur offen: start.js schiebt das angetippte Feld immer nach oben. Damit das auch beim untersten Feld geht, bekommt der rollende Bereich darunter Luft (--luft). Im Onboarding rollt dann der ganze Rahmen statt nur der Karte. */ html.tastatur-offen { --luft: calc(var(--vv-hoehe, 100vh) - var(--eigene-tastatur, 0px) - 150px); } html.tastatur-offen .fest .einstieg-kopf, html.tastatur-offen .fest .fortschritt { display: none; } html.tastatur-offen .fest .einstieg-rahmen { justify-content: flex-start; padding-top: max(10px, var(--oben)); padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } html.tastatur-offen .fest .demo-leiste + .einstieg-rahmen { padding-top: 10px; } html.tastatur-offen .fest .einstieg-rahmen::-webkit-scrollbar { display: none; } html.tastatur-offen .fest .einstieg-karte { flex: none; max-height: none; overflow: visible; } html.tastatur-offen .fest .einstieg-rahmen::after, html.tastatur-offen .einstieg:not(.fest)::after { content: ""; flex: none; height: var(--luft); } html.tastatur-offen .einstieg:not(.fest) { justify-content: flex-start; padding-top: max(12px, var(--oben)); } html.tastatur-offen .dialog-hinter { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; padding-top: max(10px, var(--oben)); } html.tastatur-offen .dialog { max-height: none; overflow: visible; margin-bottom: var(--luft); } html.tastatur-offen .app-nav { display: none; } html.tastatur-offen .vorschlaege { max-height: 200px; overflow-y: auto; } .einstieg-kopf { display: flex; align-items: center; gap: 12px; } .einstieg-kopf img { filter: drop-shadow(0 0 18px rgba(0, 255, 135, 0.35)); } .marke-name { font: 900 1.35rem/1 'Outfit', system-ui, sans-serif; letter-spacing: -0.01em; } .marke-slogan { font: 800 0.9rem 'Outfit', system-ui, sans-serif; color: var(--mint); margin-top: 3px; } .einstieg-karte { width: 100%; max-width: 440px; background: var(--slate-surface); border: 1px solid var(--rand); border-radius: 24px; padding: 26px 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .einstieg-karte h1 { font-size: 1.45rem; margin-bottom: 8px; } .einstieg-text { color: var(--cool-gray); font-size: 0.92rem; } .einstieg-text strong { color: var(--crisp-white); } .einstieg-fuss { color: var(--cool-gray); font-size: 0.88rem; text-align: center; } .einstieg-fuss a { font-weight: 700; text-decoration: none; } .gross-symbol { font-size: 2.6rem; text-align: center; margin-bottom: 8px; } .einstieg-karte .gross-symbol + h1 { text-align: center; } .einstieg-karte .gross-symbol ~ .einstieg-text { text-align: center; } .github { margin-top: 18px; } .github svg { flex-shrink: 0; } .einstieg-karte form > .knopf.voll { margin-top: 18px; } .fortschritt { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; width: 100%; max-width: 440px; } .fortschritt li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.68rem; font-weight: 700; color: var(--cool-gray); text-transform: uppercase; letter-spacing: 0.04em; } .fortschritt li span { height: 4px; border-radius: 4px; background: var(--slate-card); } .fortschritt li.fertig span { background: var(--mint); } .fortschritt li.jetzt span { background: var(--cyber-blue); box-shadow: 0 0 12px rgba(0, 240, 255, 0.5); } .fortschritt li.jetzt { color: var(--crisp-white); } .vorteile { list-style: none; margin: 18px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .vorteile li { display: flex; gap: 12px; font-size: 0.88rem; color: var(--cool-gray); } .vorteile strong { display: block; color: var(--crisp-white); font-size: 0.92rem; } .punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; animation: pulsieren 1.6s ease-in-out infinite; } .punkt.blau { background: var(--cyber-blue); } .punkt.mint { background: var(--mint); animation-delay: 0.2s; } .punkt.gold { background: var(--gold); animation-delay: 0.4s; } .warte-zeile { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 2px; color: var(--cool-gray); font-size: 0.85rem; } .demo-box { margin-top: 12px; padding: 12px; border: 1px dashed rgba(255, 184, 0, 0.6); border-radius: 14px; background: rgba(255, 184, 0, 0.07); font-size: 0.85rem; color: var(--cool-gray); display: flex; flex-direction: column; gap: 10px; } .demo-box strong { color: var(--gold); } /* Onboarding-Demo am Ende: die neue WG als Vorschau im Hintergrund (nicht bedienbar), davor nur zwei Knöpfe */ .demo-vorschau { pointer-events: none; } .demo-vorschau-vorne { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px max(16px, var(--unten)); background: linear-gradient(to bottom, rgba(11, 15, 25, 0.1), rgba(11, 15, 25, 0.8) 72%); } .demo-vorschau-karte { width: 100%; max-width: 440px; padding: 18px; border-radius: 20px; background: var(--slate-surface); border: 1px solid rgba(255, 184, 0, 0.6); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55); } .demo-vorschau-karte h1 { font-size: 1.25rem; margin: 0; } .demo-vorschau-karte .einstieg-text { margin: 0; } .demo-vorschau-karte .aktionen { padding-top: 14px; } /* Demo: Abkürzung unter dem Knopf (Gründung bzw. Profil überspringen) */ .textknopf.demo-sprung { color: var(--gold); font-weight: 700; padding: 0; align-self: center; } .demo-leiste, .admin-leiste { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: calc(8px + var(--oben)) 16px 8px; background: var(--gold); color: var(--deep-slate); font-size: 0.82rem; } /* Onboarding im festen Rahmen: füllt genau den Bildschirm, nichts scrollt, nichts verrutscht. Kopf, Fortschritt und Karte haben immer dieselbe Größe; die Knöpfe sitzen unten in der Karte. */ .einstieg.fest { position: fixed; inset: 0; min-height: 0; padding: 0; gap: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; overflow: hidden; overscroll-behavior: none; } .einstieg-rahmen { flex: 1; min-height: 0; width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 18px); padding: max(16px, var(--oben)) 16px max(16px, var(--unten)); } .demo-leiste + .einstieg-rahmen { padding-top: 14px; } .fest .einstieg-kopf { justify-content: center; flex-shrink: 0; } /* Onboarding: Zurück-Knopf links neben dem Logo, Schritte in der Leiste antippbar */ .einstieg-kopf { position: relative; } .zurueck-knopf { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px; border-radius: 12px; border: 1px solid var(--rand); background: var(--slate-card); color: var(--crisp-white); font: 700 1.6rem/1 'Inter', system-ui, sans-serif; cursor: pointer; } .zurueck-knopf:hover { border-color: var(--cyber-blue); color: var(--cyber-blue); } .zurueck-knopf:active { background: var(--deep-slate); } .fortschritt li > button { appearance: none; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 0 4px; margin: 0 0 -4px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; } .fortschritt li > button:hover { color: var(--crisp-white); } .fortschritt li > button span { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--mint); } .fest .einstieg-kopf img { width: clamp(40px, 6.5vh, 56px); height: auto; } .fest .fortschritt { flex-shrink: 0; } .fest .einstieg-karte { flex: 1 1 auto; min-height: 0; max-height: 600px; display: flex; flex-direction: column; padding: clamp(16px, 2.6vh, 24px) 20px; overflow-y: auto; overscroll-behavior: contain; } .schritt { flex: 1 0 auto; display: flex; flex-direction: column; animation: einblenden 0.2s both; } /* Kleine Bildschirme (oder Browserleisten): alles etwas knapper, damit es ohne Scrollen passt */ @media (max-height: 700px) { .fest .einstieg-karte h1 { font-size: 1.25rem; margin-bottom: 4px; } .fest .einstieg-text { font-size: 0.86rem; } .fest .feld { padding: 9px 12px; } .fest .knopf { padding: 10px 14px; } .fest .vorteile li { font-size: 0.82rem; } .fest .fortschritt li { font-size: 0.62rem; } .fest .marke-name { font-size: 1.15rem; } .fest .aktionen { padding-top: 12px; gap: 8px; } .fest .symbol-rund { width: 40px; height: 40px; font-size: 1.2rem; } .fest .feld-label { margin-top: 9px; margin-bottom: 5px; } .fest .wahl-kachel, .fest .farb-knopf { height: 32px; } .fest .avatar-wahl.kompakt .avatar-knopf { min-height: 40px; padding: 4px 2px; } .fest .wg-banner.klein { padding: 7px 10px; margin-top: 10px; } .fest .wg-banner.klein .wg-kachel { width: 34px; height: 34px; font-size: 1.1rem; } .fest .umschalter button { padding: 8px; } .fest .einstieg-karte { padding-top: 14px; padding-bottom: 14px; } } .aktionen { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .aktionen .feld-hinweis { margin-top: 2px; } .aktionen .feld-hinweis .textknopf { font-size: inherit; padding: 0; } .fest .feld-label { margin-top: clamp(10px, 1.6vh, 14px); } .fest .vorteile { margin: clamp(12px, 2.4vh, 20px) 0 0; gap: clamp(10px, 1.8vh, 14px); } .abstand-oben { margin-top: 12px; } .mit-symbol-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .mit-symbol-kopf h1 { margin: 0; } .symbol-rund { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; background: var(--deep-slate); border: 1px solid var(--rand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .name-zeile { display: flex; gap: 10px; align-items: center; } .avatar.mittel { width: 46px; height: 46px; border-radius: 13px; font-size: 1.35rem; border-width: 2px; } /* Avatar mit freigeschaltetem Rahmen (spielerRahmenStil in daten.js setzt --rahmen-bild, --rahmen-schein, --avatar-farbe) */ .avatar.gerahmt { border: 2px solid transparent; background: linear-gradient(var(--avatar-farbe), var(--avatar-farbe)) padding-box, var(--rahmen-bild) border-box; box-shadow: 0 0 10px var(--rahmen-schein); } .avatar.gerahmt.riesig, .avatar.gerahmt.gross, .avatar.gerahmt.feier-gross { border-width: 3px; } .avatar.klein.gerahmt { border-width: 1.5px; box-shadow: 0 0 6px var(--rahmen-schein); } .name-zeile .feld { flex: 1; min-width: 0; } /* Verfügbarkeit des Benutzernamens: ❔ leer, ✓ frei (Mint), ✕ vergeben (Rot, auf Steves Wunsch) */ .verfuegbar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; border: 2px solid var(--rand); background: var(--deep-slate); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--cool-gray); transition: border-color 0.15s, color 0.15s; } .verfuegbar svg { width: 24px; height: 24px; } .verfuegbar .warte-punkte span { width: 5px; height: 5px; } .verfuegbar[data-stand="frei"] { color: var(--mint); border-color: var(--mint); box-shadow: 0 0 14px rgba(0, 255, 135, 0.3); } .verfuegbar[data-stand="vergeben"], .verfuegbar[data-stand="ungueltig"] { color: var(--rot); border-color: var(--rot); } .verfuegbar[data-stand="leer"], .verfuegbar[data-stand="unbekannt"] { filter: grayscale(1); opacity: 0.8; } /* Adressfeld mit Vorschlagsliste (Photon / OpenStreetMap) */ .adress-feld { position: relative; } .vorschlaege { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--slate-card); border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); overflow: hidden; } .vorschlaege button { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 9px 12px; background: transparent; border: 0; border-bottom: 1px solid rgba(51, 65, 85, 0.6); color: var(--crisp-white); text-align: left; cursor: pointer; font-size: 0.9rem; font-weight: 600; } .vorschlaege button:last-child { border-bottom: 0; } .vorschlaege button:hover, .vorschlaege button:focus-visible { background: rgba(0, 240, 255, 0.1); } .vorschlaege small { color: var(--cool-gray); font-size: 0.75rem; font-weight: 500; } .zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .zwei-felder > div { min-width: 0; } .mit-at { position: relative; flex: 1; min-width: 0; } .mit-at > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--cool-gray); font-weight: 700; pointer-events: none; } .mit-at .feld { padding-left: 30px; } .umschalter.oben { margin-top: 0; } .nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* WG-Banner: Hintergrund (Vorlage oder Foto) mit dunklem Verlauf, damit Schrift lesbar bleibt */ .wg-banner { position: relative; isolation: isolate; border-radius: 16px; overflow: hidden; border: 1px solid var(--rand); background-color: var(--slate-surface); flex-shrink: 0; } .wg-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 25, 0.82), rgba(11, 15, 25, 0.35)); } .wg-banner.klein { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 12px; } .wg-banner.klein > div { display: flex; flex-direction: column; min-width: 0; } .wg-banner.klein strong, .wg-banner-name { font: 900 1.05rem/1.2 'Outfit', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .wg-banner.klein > div > span { font-size: 0.75rem; color: rgba(248, 250, 252, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wg-banner.gross { display: flex; flex-direction: column; gap: 10px; padding: 14px; } .wg-banner.gross::before { background: linear-gradient(180deg, rgba(11, 15, 25, 0.45), rgba(11, 15, 25, 0.88)); } .wg-kachel { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* Rahmen in der Farbe des WG-Styles (wgRahmenStil in daten.js setzt --rahmen-bild und --rahmen-schein), auch als Verlauf */ .wg-kachel, .wg-logo { border: 2px solid transparent; background: linear-gradient(var(--deep-slate), var(--deep-slate)) padding-box, var(--rahmen-bild, linear-gradient(var(--mint), var(--mint))) border-box; box-shadow: 0 0 16px var(--rahmen-schein, rgba(0, 255, 135, 0.3)); } .wahl-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 6px; } .wahl-kachel { appearance: none; position: relative; height: 38px; min-width: 0; border-radius: 10px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--crisp-white); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .wahl-kachel:hover { border-color: var(--cyber-blue); } .wahl-kachel.gewaehlt { border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(255, 184, 0, 0.35); } .wahl-kachel.hg { background-size: cover; } .wahl-kachel.foto { font-size: 1rem; } .avatar-wahl.kompakt { grid-template-columns: repeat(5, 1fr); gap: 6px; } .avatar-wahl.kompakt .avatar-knopf { padding: 6px 2px; min-height: 46px; justify-content: center; } .avatar-wahl.kompakt .avatar-knopf small { font-size: 0.56rem; } .umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 14px 0 4px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 14px; } .umschalter button { appearance: none; border: 0; background: transparent; padding: 10px 8px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; color: var(--cool-gray); cursor: pointer; transition: background-color 0.22s, color 0.22s, transform 0.12s; } .umschalter button:active { transform: scale(0.95); } /* Nur beim echten Wechsel federn (die App zeichnet bei neuen Daten alles neu) */ .umschalter.reiter-wechsel button.an, .gruender-reiter.wechsel button.an { animation: reiterAn 0.32s cubic-bezier(0.2, 1.4, 0.35, 1); } @keyframes reiterAn { from { transform: scale(0.9); } to { transform: none; } } .umschalter button.an { background: var(--mint); color: var(--deep-slate); } /* ---------- Dialoge ---------- */ .dialog-hinter { position: fixed; inset: 0; z-index: 60; background: rgba(11, 15, 25, 0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: einblenden 0.22s both; } .dialog { width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; background: var(--slate-surface); border: 1px solid var(--rand); border-radius: 22px; padding: 20px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5); animation: dialogRein 0.4s cubic-bezier(0.2, 1.3, 0.35, 1) both; } /* Seit 17.10.2026 (Steve: „mehr Animationen“): Fenster springen mit leichtem Federn auf, der Inhalt kommt Zeile für Zeile nach, beim Schließen sinkt das Fenster weg (hilfe.js: Klasse zu, nach 190 ms entfernt) */ .dialog > * { animation: dialogInhalt 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .dialog > :nth-child(2) { animation-delay: 0.04s; } .dialog > :nth-child(3) { animation-delay: 0.08s; } .dialog > :nth-child(n+4) { animation-delay: 0.11s; } .dialog-hinter.zu { animation: ausblenden 0.19s ease-in both; pointer-events: none; } .dialog-hinter.zu .dialog { animation: dialogRaus 0.19s ease-in both; } @keyframes dialogRein { from { opacity: 0; transform: translateY(34px) scale(0.92); } to { opacity: 1; transform: none; } } @keyframes dialogRaus { to { opacity: 0; transform: translateY(26px) scale(0.95); } } @keyframes dialogInhalt { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes ausblenden { to { opacity: 0; } } .dialog.breit { max-width: 520px; } .dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .dialog-kopf .x { appearance: none; background: none; border: 0; color: var(--cool-gray); font-size: 1.1rem; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; } .dialog-kopf .x:hover { color: var(--crisp-white); background: var(--slate-card); } .dialog-text { color: var(--cool-gray); font-size: 0.88rem; } .dialog-frage { font-size: 1rem; font-weight: 600; } .hinweis-box { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--deep-slate); border: 1px solid var(--rand); color: var(--cool-gray); font-size: 0.8rem; } .betrag-gross { font: 900 2rem 'Outfit', system-ui, sans-serif; color: var(--mint); margin: 4px 0; } .kopier-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: var(--slate-card); border: 1px solid var(--rand); font-size: 0.88rem; overflow-wrap: anywhere; } /* ---------- Meldungen und Konfetti ---------- */ .meldungen { position: fixed; top: calc(12px + var(--oben)); left: 50%; transform: translateX(-50%); z-index: 80; width: min(92vw, 380px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .meldung { padding: 12px 14px; border-radius: 14px; background: rgba(22, 31, 50, 0.97); border: 1px solid var(--rand); border-left: 4px solid var(--cyber-blue); font-size: 0.88rem; font-weight: 600; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); animation: reinrutschen 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both; transition: opacity 0.3s, transform 0.3s; } .meldung-mint { border-left-color: var(--mint); } .meldung-gold { border-left-color: var(--gold); } .meldung.weg { opacity: 0; transform: translateY(-8px); } #konfetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; } /* ---------- Admin ---------- */ .admin-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 6px; } .aktion-kachel { appearance: none; text-align: left; text-decoration: none; color: var(--crisp-white); background: var(--slate-surface); border: 1px solid var(--rand); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; } .aktion-kachel:hover { transform: translateY(-1px); } .aktion-kachel strong { font: 800 1rem 'Outfit', system-ui, sans-serif; } .aktion-kachel span:last-child { color: var(--cool-gray); font-size: 0.8rem; } .aktion-symbol { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: var(--deep-slate); margin-bottom: 6px; } .aktion-kachel.blau .aktion-symbol { background: var(--cyber-blue); } .aktion-kachel.mint .aktion-symbol { background: var(--mint); } .aktion-kachel.gold .aktion-symbol { background: var(--gold); } .aktion-kachel.grau .aktion-symbol { background: var(--slate-card); color: var(--crisp-white); } .aktion-kachel.blau:hover { border-color: var(--cyber-blue); } .aktion-kachel.mint:hover { border-color: var(--mint); } .aktion-kachel.gold:hover { border-color: var(--gold); } .aktion-kachel.grau:hover { border-color: var(--cool-gray); } .admin-spalte { max-width: 900px; } .admin-spalte .admin-aktionen { margin-top: 0; grid-template-columns: repeat(2, 1fr); gap: 10px; } .admin-spalte .aktion-kachel { padding: 12px; gap: 3px; } .admin-spalte .aktion-kachel strong { font-size: 0.92rem; line-height: 1.2; } .admin-spalte .aktion-kachel span:last-child { font-size: 0.74rem; line-height: 1.4; } .admin-spalte .aktion-symbol { width: 30px; height: 30px; margin-bottom: 4px; } /* Test-WG: große Kachel über die ganze Breite, darunter "neu aufsetzen" */ .admin-spalte .test-kachel, .admin-spalte .test-neu { grid-column: 1 / -1; } .admin-spalte .test-kachel { padding: 16px; border-color: rgba(255, 184, 0, 0.55); background: linear-gradient(135deg, rgba(255, 184, 0, 0.12), var(--slate-surface) 70%); } .admin-spalte .test-kachel strong { font-size: 1.15rem; } .admin-spalte .test-kachel .aktion-symbol { width: 38px; height: 38px; font-size: 1.2rem; } /* Test-Benachrichtigung: gleiche große Kachel wie die Test-WG, in Mint */ .admin-spalte .push-kachel { grid-column: 1 / -1; padding: 16px; border-color: rgba(0, 255, 135, 0.5); background: linear-gradient(135deg, rgba(0, 255, 135, 0.11), var(--slate-surface) 70%); } .admin-spalte .push-kachel strong { font-size: 1.15rem; } .admin-spalte .push-kachel .aktion-symbol { width: 38px; height: 38px; font-size: 1.2rem; } .admin-spalte .test-neu { margin-top: -4px; } .aktion-kachel:disabled { opacity: 0.6; cursor: progress; transform: none; } .aktion-kachel.laedt:disabled { opacity: 1; } .aktion-kachel.laedt .aktion-symbol { animation: pulsieren 1s ease-in-out infinite; } .app-kopf > .app-kopf-links > img { flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(0, 255, 135, 0.3)); } .code-klein { appearance: none; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 6px; color: var(--cyber-blue); font: 700 0.75rem 'Inter', sans-serif; letter-spacing: 0.1em; padding: 1px 6px; cursor: pointer; } /* ---------- App: fester Rahmen (Kopf oben, Navigation unten, dazwischen der Inhalt) ---------- */ .app-rahmen { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; } .app-rahmen > .laden { flex: 1; min-height: 0; } .app-kopf { flex-shrink: 0; width: min(calc(100% - 28px), 432px); margin: max(10px, var(--oben)) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(22, 31, 50, 0.95); border: 1px solid var(--rand); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .admin-leiste + .app-kopf { margin-top: 10px; } .app-inhalt { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .app-inhalt::-webkit-scrollbar { display: none; } /* Ohne Leiste unten (Kodex): Abstand zum Bildschirmrand bzw. zur iPhone-Wischleiste */ .app-rahmen > .app-inhalt:last-child { padding-bottom: max(10px, var(--unten)); } .app-spalte { max-width: 460px; margin: 0 auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; animation: einblenden 0.2s both; } /* Neue Daten im selben Tab: nicht noch einmal einblenden (sonst flackert es bei jedem Eintrag) */ .app-spalte.ruhig { animation: none; } /* Wischen zwischen Finanzen, Home und Putzen: senkrecht rollt der Browser, waagerecht übernimmt die App (wg-app.js) */ .app-inhalt { touch-action: pan-y; } /* Neuer Tab fährt von der Seite herein (rechts = Tab rechts daneben in der Leiste) */ .app-spalte.rein-rechts { animation: reinRechts 0.22s ease-out both; } .app-spalte.rein-links { animation: reinLinks 0.22s ease-out both; } /* Tab geöffnet (WG-Logo, Profil): die Karten kommen nacheinander hoch */ .app-spalte:not(.ruhig):not(.rein-rechts):not(.rein-links) > * { animation: hochkommen 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; } /* Unterreiter gewechselt: nur was UNTER dem angetippten Reiter steht, gleitet aus der Richtung herein (die Klassen setzt jetztZeichnen in wg-app.js; Kopf und Reiter darüber bleiben stehen) */ .teil-rein-rechts { animation: teilRechts 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .teil-rein-links { animation: teilLinks 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .app-spalte > :nth-child(2) { animation-delay: 0.03s; } .app-spalte > :nth-child(3) { animation-delay: 0.06s; } .app-spalte > :nth-child(4) { animation-delay: 0.09s; } .app-spalte > :nth-child(5) { animation-delay: 0.12s; } .app-spalte > :nth-child(n+6) { animation-delay: 0.15s; } @keyframes hochkommen { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes teilRechts { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } } @keyframes teilLinks { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } } @keyframes reinRechts { from { opacity: 0; transform: translateX(32%); } to { opacity: 1; transform: none; } } @keyframes reinLinks { from { opacity: 0; transform: translateX(-32%); } to { opacity: 1; transform: none; } } .app-kopf-links { display: flex; align-items: center; gap: 10px; min-width: 0; } .wg-logo { position: relative; appearance: none; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; color: var(--crisp-white); font-size: 1.25rem; cursor: pointer; transition: box-shadow 0.15s; } @media (hover: hover) and (pointer: fine) { .wg-logo:hover { box-shadow: 0 0 26px var(--rahmen-schein, rgba(0, 255, 135, 0.3)); } } /* Kodex offen: Logo leuchtet gold, ein Tipp schließt ihn wieder */ /* Offen: goldener Ring außen herum (der Rahmen selbst behält die Farbe des WG-Styles) */ /* Offen: nur stärker leuchten und etwas größer, kein zweiter (gelber) Ring */ .wg-logo.an { box-shadow: 0 0 28px var(--rahmen-schein, rgba(0, 255, 135, 0.3)), 0 0 10px var(--rahmen-schein, rgba(0, 255, 135, 0.3)); transform: scale(1.06); } .wg-logo-punkt { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--deep-slate); animation: pulsieren 1.6s ease-in-out infinite; } .app-kopf-text { min-width: 0; } .app-kopf-titel { font: 900 1.02rem/1.15 'Outfit', system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-kopf-titel span { color: var(--mint); } .app-kopf-adresse { display: block; font-size: 0.72rem; font-weight: 600; color: var(--cool-gray); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } a.app-kopf-adresse:hover { color: var(--cyber-blue); } /* Adresse im Kopf: farbig, ein Tipp öffnet die Karten-App */ a.app-kopf-adresse.ort-link { color: var(--cyber-blue); font-weight: 700; } a.app-kopf-adresse.ort-link span { margin-right: 3px; } a.app-kopf-adresse.ort-link:active { color: var(--mint); } /* Gleich hoch wie das WG-Logo links (44 px) */ .profil-knopf { appearance: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 9px 0 6px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; flex-shrink: 0; color: var(--crisp-white); } .profil-knopf:hover { border-color: var(--gold); } .profil-knopf-text { display: flex; flex-direction: column; text-align: left; font-size: 0.72rem; line-height: 1.2; } .profil-knopf-text strong { font-size: 0.78rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profil-knopf-text span { color: var(--cool-gray); } .profil-knopf-text b { color: var(--gold); } @media (max-width: 360px) { .profil-knopf-text { display: none; } } .app-nav { flex-shrink: 0; margin: 0 auto max(10px, var(--unten)); width: min(calc(100% - 28px), 432px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: rgba(22, 31, 50, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--rand); border-radius: 18px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); } .nav-knopf { appearance: none; border: 0; background: transparent; color: var(--cool-gray); border-radius: 13px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.68rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav-knopf:hover { color: var(--crisp-white); } .nav-symbol { font-size: 1.1rem; line-height: 1.2; } .nav-knopf.an { color: var(--deep-slate); font-weight: 800; } .nav-knopf.an.blau { background: var(--cyber-blue); box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); } .nav-knopf.an.mint { background: var(--mint); box-shadow: 0 0 20px rgba(0, 255, 135, 0.3); } /* ---------- Karten und Bausteine ---------- */ .karte { background: var(--slate-surface); border: 1px solid var(--rand); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; flex-shrink: 0; } .karte.eng { padding: 11px 12px; gap: 8px; } .liste.eng { gap: 6px; } .mini-karte.eng { padding: 7px 6px; gap: 2px; } .mini-karte.glas { background: rgba(11, 15, 25, 0.6); border-color: rgba(248, 250, 252, 0.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Putzaufgabe als kompakte Zeile: antippen öffnet die Details */ .aufgabe-zeile { display: flex; align-items: center; gap: 10px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 13px; padding: 8px 10px; cursor: pointer; } .aufgabe-zeile:hover { border-color: rgba(0, 240, 255, 0.5); } .aufgabe-zeile .raum-symbol { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; } .aufgabe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .aufgabe-text strong { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aufgabe-text > span { font-size: 0.72rem; color: var(--cool-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aufgabe-text b { color: var(--crisp-white); } .aufgabe-zeile > .knopf { flex-shrink: 0; } .liste.eng .mini-zeile { padding: 8px 10px; } .liste.eng .mini-zeile strong, .liste.eng .mini-zeile > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .liste.eng .mini-zeile.umbruch strong, .liste.eng .mini-zeile.umbruch > div > span { white-space: normal; } .balken.voll-breit { width: 100%; height: 6px; margin: 2px 0; } .mini-karte.gold-rand { border-color: rgba(255, 184, 0, 0.55); } .xp { font-weight: 800; color: var(--cyber-blue); } .mini-karte.eng-zeile { padding: 8px 10px; gap: 1px; } .mini-karte.eng-zeile strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .wg-banner.gross h2.gross { font-size: 1.2rem; } .wg-banner.gross { padding: 12px; gap: 8px; } .admin-leiste { flex-wrap: nowrap; font-size: 0.78rem; padding-left: 12px; padding-right: 12px; gap: 8px; } .admin-leiste > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .admin-zurueck { flex-shrink: 0; } /* Sicht-Umschalter in der Test-WG: wer gerade "ich" ist, steht dunkel hervorgehoben */ .admin-leiste > span.sicht-titel { flex-shrink: 0; overflow: visible; font-size: 1rem; } .sicht-wahl { flex: 1; min-width: 0; max-width: 420px; display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(11, 15, 25, 0.16); } .sicht { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 4px; border-radius: 9px; color: var(--deep-slate); text-decoration: none; font-weight: 700; } .sicht.an { background: var(--deep-slate); color: var(--crisp-white); box-shadow: 0 2px 8px rgba(11, 15, 25, 0.35); } .sicht-avatar { flex-shrink: 0; } .sicht-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .sicht-stern { flex-shrink: 0; font-size: 0.7rem; } .sicht.an .sicht-stern { color: var(--gold); } .regel { background: var(--slate-surface); border: 1px solid var(--rand); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .umschalter.drei { grid-template-columns: repeat(3, 1fr); margin: 0; flex-shrink: 0; } .umschalter.drei button { font-size: 0.74rem; padding: 8px 4px; } .umschalter.drei button.an { background: var(--gold); } .avatar-tipp { appearance: none; position: relative; background: none; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; } .avatar-tipp > span:last-child { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--slate-card); border: 1px solid var(--rand); font-size: 0.65rem; display: flex; align-items: center; justify-content: center; } .profil-namen { min-width: 0; } .profil-namen h2 { overflow-wrap: anywhere; } .abstand-unten { margin-bottom: 4px; } .textknopf.voll { width: 100%; margin-top: 8px; } .profil-karte::after { content: ""; position: absolute; right: -50px; top: -50px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 184, 0, 0.12); filter: blur(30px); pointer-events: none; } .zeile-zwischen { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .zeile-zwischen.oben { align-items: flex-start; } .ueberzeile { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-family: 'Inter', sans-serif; } h2.gross { font-size: 1.35rem; font-weight: 900; } .mit-symbol { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .mit-symbol.gross-abstand { gap: 12px; flex-wrap: nowrap; } /* Profil: Zahlungsweg bleibt neben dem Symbol, zu lange Namen werden gekürzt */ .mit-symbol.zahlweg-zeile { flex-wrap: nowrap; } .zahlweg-zeile > div { min-width: 0; } .zahlweg-zeile .klein { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gross-emoji { font-size: 1.2rem; } .zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .zwei-spalten > * { min-width: 0; } .drei-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .drei-spalten.eng { gap: 6px; } .mini-karte { background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 13px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mini-karte > span:first-child { font-size: 0.72rem; color: var(--cool-gray); } .mini-karte strong { font-size: 0.85rem; overflow-wrap: anywhere; } .mini-karte.mitte { align-items: center; text-align: center; } .mini-karte.mitte > span:first-child { font-size: 0.75rem; } .liste { display: flex; flex-direction: column; gap: 8px; } .mini-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 13px; padding: 10px 11px; } .mini-zeile.flach { padding: 8px 11px; } .mini-zeile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mini-zeile strong { font-size: 0.85rem; overflow-wrap: anywhere; } .mini-zeile > div > span { font-size: 0.74rem; color: var(--cool-gray); } .karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(51, 65, 85, 0.5); font-size: 0.74rem; color: var(--cool-gray); flex-wrap: wrap; } .tab-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 2px; } .tab-kopf p { color: var(--cool-gray); font-size: 0.78rem; } .marke { display: inline-block; font-size: 0.72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; } .marke.klein { font-size: 0.68rem; } .marke.mini { font-size: 0.64rem; padding: 2px 7px; } .marke.voll { display: block; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; } .marke.mint { color: var(--mint); background: rgba(0, 255, 135, 0.12); border-color: rgba(0, 255, 135, 0.4); } .marke.blau { color: var(--cyber-blue); background: rgba(0, 240, 255, 0.12); border-color: rgba(0, 240, 255, 0.4); } .marke.gold { color: var(--gold); background: rgba(255, 184, 0, 0.14); border-color: rgba(255, 184, 0, 0.45); } .marke.grau { color: var(--cool-gray); background: var(--slate-card); border-color: var(--rand); } .balken-zeile { background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 13px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; font-size: 0.85rem; } .balken { height: 8px; border-radius: 8px; background: var(--slate-card); overflow: hidden; } .balken.dick { height: 10px; margin: 4px 0; } .balken > div { height: 100%; border-radius: 8px; transition: width 0.5s ease; } .balken > .mint { background: var(--mint); } .balken > .gold { background: var(--gold); } .verlauf-balken { background: linear-gradient(90deg, var(--gold), var(--cyber-blue), var(--mint)); } .aufgabe { gap: 10px; } .aufgabe-kopf { display: flex; gap: 11px; align-items: flex-start; } .aufgabe-kopf strong { font-size: 0.92rem; line-height: 1.3; } .aufgabe-kopf p { color: var(--cool-gray); font-size: 0.78rem; margin-top: 2px; } .raum-symbol { width: 38px; height: 38px; border-radius: 12px; background: var(--deep-slate); border: 1px solid var(--rand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .etiketten { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; font-size: 0.7rem; } .etikett { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--rand); background: var(--deep-slate); font-weight: 700; } .etikett.mint { color: var(--mint); border-color: rgba(0, 255, 135, 0.35); background: rgba(0, 255, 135, 0.08); } .etikett.blau { color: var(--cyber-blue); border-color: rgba(0, 240, 255, 0.35); background: rgba(0, 240, 255, 0.08); } .etikett.gold { color: var(--gold); border-color: rgba(255, 184, 0, 0.4); background: rgba(255, 184, 0, 0.08); } .etikett.grau { color: var(--cool-gray); font-weight: 600; } .faellig-ueberfaellig { color: var(--gold); font-weight: 800; } .etikett.faellig-ueberfaellig { border-color: rgba(255, 184, 0, 0.5); background: rgba(255, 184, 0, 0.14); } .faellig-heute { color: var(--cyber-blue); font-weight: 800; } .etikett.faellig-heute { border-color: rgba(0, 240, 255, 0.45); } .faellig-bald, .faellig-spaeter { color: var(--cool-gray); } .aufgabe-fuss { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(51, 65, 85, 0.5); } .aufgabe-fuss .etikett { font-size: 0.75rem; } .wahl-knopf { appearance: none; background: transparent; border: 1px solid var(--rand); border-radius: 10px; padding: 7px 4px; font-size: 0.72rem; font-weight: 700; color: var(--cool-gray); cursor: pointer; } .wahl-knopf:hover { border-color: var(--cyber-blue); color: var(--crisp-white); } .wahl-knopf.an { background: rgba(255, 184, 0, 0.15); border-color: var(--gold); color: var(--gold); } .stimmen { display: flex; flex-wrap: wrap; gap: 4px; } .stimme { font-size: 0.68rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--rand); background: var(--slate-card); color: var(--cool-gray); } .stimme.ja { color: var(--mint); border-color: rgba(0, 255, 135, 0.4); background: rgba(0, 255, 135, 0.08); } /* Regierungsform: eigene Karte mit blauem Rand, klar getrennt vom Kodex darunter */ .regierung-karte { border-color: rgba(0, 240, 255, 0.45); background: linear-gradient(135deg, rgba(0, 240, 255, 0.08), var(--slate-surface) 60%); } .regierung-karte + .karte { margin-top: 6px; } .regierung-vorschlag { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--deep-slate); border: 1px dashed rgba(255, 184, 0, 0.55); } .regierung-vorschlag p { margin: 0; } .wahl-knopf.an:disabled { cursor: default; } /* WG-Größe beim Gründen: direkt unter der Überschrift */ .umschalter.groesse-wahl { margin-top: 0; } /* Kodex gesperrt, bis die WG komplett ist */ .kodex-gesperrt p { margin: 0; } /* ---------- Eigene Bildschirmtastatur (tastatur.js, nur auf Handy und Tablet) ---------- */ .tastatur { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; --skala: 1; /* Größe: Klein 0.85, Mittel 1, Groß 1.2 (tastatur.js) */ padding: 0 4px max(8px, var(--unten)); background: var(--slate-surface); border-top: 1px solid var(--rand); box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.45); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .tastatur::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyber-blue), var(--mint)); opacity: 0.75; } /* Oben an der Tastatur: Größe in drei Stufen (Klein, Mittel, Groß) */ /* Oben in der Mitte: die Größe */ .tastatur-leiste { height: 34px; display: flex; align-items: center; justify-content: center; } .tastatur-groesse { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--deep-slate); border: 1px solid var(--rand); } .groesse-knopf { appearance: none; border: 0; background: transparent; color: var(--cool-gray); font: 700 0.7rem/1 'Inter', system-ui, sans-serif; padding: 5px 13px; border-radius: 8px; cursor: pointer; touch-action: none; } .groesse-knopf.an { background: var(--cyber-blue); color: var(--deep-slate); } .tasten-reihe { display: flex; gap: 5px; height: calc(44px * var(--skala)); max-width: 520px; margin: 0 auto; } .tasten-reihe + .tasten-reihe { margin-top: calc(7px * var(--skala)); } .tasten-reihe.ziffern { height: calc(38px * var(--skala)); } .taste { appearance: none; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: var(--slate-card); color: var(--crisp-white); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); font: 500 calc(1.2rem * var(--skala))/1 'Inter', system-ui, sans-serif; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; transition: background-color 0.06s; position: relative; } /* Kleines Zeichen in der Ecke: liegt beim Halten auf der Taste (ß auf dem S) */ .taste-hinweis { position: absolute; top: calc(4px * var(--skala)); right: calc(5px * var(--skala)); font: 600 calc(0.62rem * var(--skala))/1 'Inter', system-ui, sans-serif; color: var(--cool-gray); pointer-events: none; } .tasten-reihe.ziffern .taste { font-size: calc(1.02rem * var(--skala)); background: rgba(30, 43, 69, 0.55); } .taste svg { width: calc(22px * var(--skala)); height: calc(22px * var(--skala)); } .taste.sonder { background: var(--deep-slate); color: var(--cool-gray); font: 700 calc(0.85rem * var(--skala))/1 'Inter', system-ui, sans-serif; } .taste.breit { flex-grow: 1.5; } .taste.breiter { flex-grow: 2.3; } .taste.leer { visibility: hidden; } .taste-luecke { flex: 0.5 1 0; } .taste.leertaste { flex-grow: 4; } .taste.leertaste span { font: 800 calc(0.7rem * var(--skala)) 'Outfit', system-ui, sans-serif; color: var(--cool-gray); letter-spacing: 0.04em; opacity: 0.8; } .taste.weiter { background: var(--mint); color: var(--deep-slate); font: 800 calc(0.92rem * var(--skala))/1 'Outfit', system-ui, sans-serif; } .taste.umschalt-einmal, .taste.umschalt-fest { background: var(--crisp-white); color: var(--deep-slate); } .taste.umschalt-fest { box-shadow: inset 0 -4px 0 var(--cyber-blue); } .taste.gedrueckt { background: rgba(0, 240, 255, 0.16); box-shadow: 0 0 0 1px var(--cyber-blue) inset, 0 0 14px rgba(0, 240, 255, 0.35); } .taste.weiter.gedrueckt { background: var(--cyber-blue); } .ziffernblock { height: calc(46px * var(--skala)); gap: 7px; } .ziffernblock .taste { font: 700 calc(1.45rem * var(--skala))/1 'Outfit', system-ui, sans-serif; } .ziffernblock + .unten .taste { flex-grow: 1; } /* Eigener blinkender Cursor: Felder sind auf dem Handy schreibgeschützt (keine Handy-Tastatur), zeigen also keinen */ .schreibmarke { position: fixed; z-index: 65; width: 2px; border-radius: 1px; background: var(--cyber-blue); box-shadow: 0 0 6px rgba(0, 240, 255, 0.6); pointer-events: none; } .schreibmarke.blinkt { animation: blinken 1.1s step-end infinite; } @keyframes blinken { 50% { opacity: 0; } } /* Taste halten: verwandte Zeichen zur Auswahl, das gewählte leuchtet */ .lang-wahl { position: fixed; z-index: 72; transform: translateY(-100%); display: flex; gap: 2px; padding: 4px; pointer-events: none; border-radius: 12px; background: var(--slate-card); border: 1px solid var(--cyber-blue); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 240, 255, 0.3); } .lang-zeichen { min-width: calc(38px * var(--skala, 1)); height: calc(48px * var(--skala, 1)); padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--crisp-white); font: 600 calc(1.35rem * var(--skala, 1))/1 'Inter', system-ui, sans-serif; } .lang-zeichen.an { background: var(--cyber-blue); color: var(--deep-slate); } /* Gerät auf Deutsch: ä ö ü ß leuchten in Mint (gewählt: Mint-Fläche) */ .lang-zeichen.deutsch:not(.an) { color: var(--mint); box-shadow: inset 0 0 0 1px rgba(0, 255, 135, 0.55); } .lang-zeichen.deutsch.an { background: var(--mint); } /* Großer Buchstabe über dem Finger beim Tippen */ .taste-blase { position: fixed; z-index: 71; transform: translate(-50%, calc(-100% - 8px)); min-width: 48px; height: 56px; padding: 0 10px; border-radius: 12px; background: var(--slate-card); border: 1px solid var(--cyber-blue); color: var(--crisp-white); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 240, 255, 0.3); font: 700 1.65rem/54px 'Outfit', system-ui, sans-serif; text-align: center; pointer-events: none; } /* WG gründen: Frage und Auswahl 2/3 in einer Zeile (spart Höhe, damit die Karte ohne Rollen passt) */ .groesse-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .groesse-zeile .feld-label { margin-bottom: 0; } .groesse-zeile .mini-umschalter { margin-top: clamp(10px, 1.6vh, 14px); } .groesse-zeile .mini-umschalter button { min-width: 44px; font-size: 0.85rem; padding: 7px 12px; } .groesse-zeile .mini-umschalter button.an { background: var(--mint); } /* Sprachwahl vor dem Registrieren (Willkommen, Anmelden): Flaggen als Knöpfe, die gewählte leuchtet Mint */ .sprach-wahl { display: flex; align-items: center; justify-content: center; gap: 10px; } .sprach-wahl button { appearance: none; width: 48px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 12px; font-size: 1.45rem; line-height: 1; cursor: pointer; opacity: 0.55; filter: saturate(0.6); transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, filter 0.15s; } .sprach-wahl button:hover { opacity: 0.85; } .sprach-wahl button.an { opacity: 1; filter: none; border: 2px solid var(--mint); box-shadow: 0 0 14px rgba(0, 255, 135, 0.35); } /* ---------- Profil-Bereich: WG-Steckbrief und Einstellungen ---------- */ .info-liste { display: flex; flex-direction: column; } .info-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(51, 65, 85, 0.6); font-size: 0.85rem; } .info-zeile:last-child { border-bottom: 0; } .info-zeile > span:first-child { color: var(--cool-gray); flex-shrink: 0; } .info-zeile > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .wg-banner-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wg-banner .mit-symbol:has(> .wg-banner-text) { flex-wrap: nowrap; min-width: 0; } .mini-umschalter button:disabled { opacity: 0.45; cursor: default; } .wg-steckbrief .ganz { grid-column: 1 / -1; } .wg-steckbrief .mini-karte { gap: 4px; } .wg-steckbrief .mini-karte > span { font-size: 0.7rem; color: var(--cool-gray); } .wg-steckbrief strong { font-size: 0.9rem; } .wg-steckbrief .code-klein { align-self: flex-start; font-size: 0.85rem; } .wg-adresse-link { display: block; color: rgba(248, 250, 252, 0.85); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .einstellung-zeile { appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid rgba(51, 65, 85, 0.6); color: var(--crisp-white); text-align: left; cursor: pointer; } .einstellung-zeile:last-child { border-bottom: 0; } .einstellung-zeile.ohne-knopf { cursor: default; } .einstellung-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .einstellung-text strong { font-size: 0.9rem; } .einstellung-text span { font-size: 0.74rem; color: var(--cool-gray); } /* Kippschalter: an = Mint mit Deep-Slate-Knopf */ .kippschalter { position: relative; width: 46px; height: 26px; flex-shrink: 0; border-radius: 13px; background: var(--slate-card); border: 1px solid var(--rand); transition: background-color 0.15s, border-color 0.15s; } .kippschalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--cool-gray); transition: transform 0.15s, background-color 0.15s; } .kippschalter.an { background: var(--mint); border-color: var(--mint); } .kippschalter.an::after { transform: translateX(20px); background: var(--deep-slate); } .mini-umschalter { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border-radius: 11px; background: var(--deep-slate); border: 1px solid var(--rand); flex-shrink: 0; } .mini-umschalter button { appearance: none; border: 0; background: transparent; color: var(--cool-gray); font: 700 0.74rem 'Inter', system-ui, sans-serif; padding: 6px 9px; border-radius: 8px; cursor: pointer; } .mini-umschalter button.an { background: var(--cyber-blue); color: var(--deep-slate); } .tab-kopf > h2 { align-self: center; white-space: nowrap; } .tab-kopf .knopf-gruppe { gap: 6px; } .tab-kopf .knopf-gruppe .knopf-klein { padding: 7px 9px; font-size: 0.74rem; } /* ---------- WG-ID und Beitrittsanfragen ---------- */ .code-gross.id { font-size: 1.75rem; letter-spacing: 0.14em; padding-left: calc(16px + 0.14em); } textarea.feld.kurz { min-height: 0; height: 64px; resize: none; } .knopf-reihe.eng { margin-top: 0; } .zitat { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(255, 184, 0, 0.07); color: var(--crisp-white); font-size: 0.86rem; font-style: italic; overflow-wrap: anywhere; } /* Unter der WG-ID: welche WG gefunden wurde (immer gleich hoch, damit nichts springt) */ .wg-treffer { margin-top: 8px; } .wg-treffer:not(.gefunden) .wg-kachel { --rahmen-bild: linear-gradient(var(--rand), var(--rand)); color: var(--cool-gray); box-shadow: none; } .wg-treffer:not(.gefunden)::before { background: none; } .wg-treffer.gefunden { border-color: rgba(0, 255, 135, 0.6); } /* Glocke im App-Kopf (nur für den WG-Admin, wenn jemand beitreten möchte) */ .glocke { position: relative; appearance: none; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; border: 1px solid var(--gold); background: var(--deep-slate); font-size: 1.1rem; cursor: pointer; margin-left: auto; animation: wackeln 2.4s ease-in-out infinite; } .glocke-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--deep-slate); border: 2px solid var(--deep-slate); font: 800 0.66rem/14px 'Inter', sans-serif; } @keyframes wackeln { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 88% { transform: rotate(10deg); } 92% { transform: rotate(-6deg); } 96% { transform: rotate(4deg); } } .anfrage-hinweis { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 184, 0, 0.55); background: rgba(255, 184, 0, 0.08); color: var(--crisp-white); text-align: left; cursor: pointer; } .anfrage-hinweis-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .anfrage-hinweis-text strong { font-size: 0.86rem; } .anfrage-hinweis-text span { font-size: 0.74rem; color: var(--cool-gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anfragen-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .anfrage { padding: 12px; border-radius: 16px; background: var(--deep-slate); border: 1px solid var(--rand); } .anfrage .knopf-reihe { margin-top: 12px; } .anfrage-person { display: flex; flex-direction: column; min-width: 0; } .anfrage-person span { font-size: 0.74rem; color: var(--cool-gray); } /* ---------- Reiter oben in Profil und WG-Ansicht (Mint; die Kodex-Unterreiter darunter bleiben Gold) ---------- */ .umschalter.reiter { margin: 0; flex-shrink: 0; } .umschalter.reiter button { position: relative; font-size: 0.8rem; padding: 8px 4px; } /* Drei Reiter (WG-Profil, Kodex, Regierungsform): gleich breit, wo es geht; ein langer Name bekommt seinen Platz */ .umschalter.reiter.drei-reiter { grid-template-columns: repeat(3, minmax(max-content, 1fr)); } .umschalter.reiter.drei-reiter button { font-size: 0.76rem; padding: 8px 6px; white-space: nowrap; } /* Neuer WG-Name zur Abstimmung */ .namens-vorschlag { display: flex; flex-direction: column; gap: 8px; border: 1px dashed rgba(255, 184, 0, 0.6); } .namens-vorschlag p { margin: 0; } .stimme.nein { color: var(--gold); border-color: rgba(255, 184, 0, 0.4); } .reiter-punkt { position: absolute; top: 5px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulsieren 1.6s ease-in-out infinite; } /* WG-Level im WG-Profil */ .wg-level { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 12px; background: rgba(11, 15, 25, 0.6); border: 1px solid rgba(248, 250, 252, 0.12); } .wg-level .balken.dick { margin: 2px 0; } /* ---------- Eigene Auswahllisten (auswahl.js) statt der Handy-Auswahl ---------- */ .auswahl-knopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; } .auswahl-knopf.offen { border-color: var(--mint); } .auswahl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auswahl-pfeil { flex-shrink: 0; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid var(--mint); border-bottom: 2px solid var(--mint); transform: rotate(45deg); transition: transform 0.15s, margin 0.15s; } .auswahl-knopf.offen .auswahl-pfeil { transform: rotate(225deg); margin-top: 4px; } .auswahl-liste { position: fixed; z-index: 75; display: flex; flex-direction: column; gap: 2px; padding: 5px; overflow-y: auto; overscroll-behavior: contain; background: var(--slate-surface); border: 1px solid rgba(0, 255, 135, 0.45); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); animation: listeRein 0.24s cubic-bezier(0.2, 1.2, 0.35, 1) both; transform-origin: top center; scrollbar-width: none; } .auswahl-liste > * { animation: dialogInhalt 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .auswahl-liste > :nth-child(2) { animation-delay: 0.025s; } .auswahl-liste > :nth-child(3) { animation-delay: 0.05s; } .auswahl-liste > :nth-child(4) { animation-delay: 0.075s; } .auswahl-liste > :nth-child(n+5) { animation-delay: 0.1s; } @keyframes listeRein { from { opacity: 0; transform: translateY(-8px) scale(0.94); } to { opacity: 1; transform: none; } } .auswahl-liste::-webkit-scrollbar { display: none; } .auswahl-eintrag { appearance: none; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--crisp-white); font: 600 0.92rem 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; } .auswahl-eintrag:hover, .auswahl-eintrag:active { background: rgba(0, 240, 255, 0.08); } .auswahl-eintrag.an { background: rgba(0, 255, 135, 0.12); color: var(--mint); } .auswahl-eintrag.an::after { content: "✓"; font-weight: 800; } /* ---------- Kacheln zum Wählen (Zahlungsweg, Wer hat bezahlt?) und Personen-Chips ---------- */ .art-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .art-wahl.zwei { grid-template-columns: repeat(2, 1fr); } .art-knopf { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 9px 4px; border-radius: 12px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--cool-gray); font: 700 0.78rem 'Inter', system-ui, sans-serif; cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; } .art-knopf > span { font-size: 1.25rem; line-height: 1.1; } .art-knopf:hover { border-color: var(--cyber-blue); } .art-knopf.an { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint), 0 0 12px rgba(0, 255, 135, 0.25); background: rgba(0, 255, 135, 0.08); color: var(--crisp-white); } .art-knopf:disabled { opacity: 0.4; cursor: default; } .personen-wahl { display: flex; flex-wrap: wrap; gap: 6px; } .person-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 999px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--cool-gray); font: 700 0.82rem 'Inter', system-ui, sans-serif; cursor: pointer; } .person-chip .avatar { border-radius: 50%; } .person-chip.an { border-color: var(--mint); background: rgba(0, 255, 135, 0.1); color: var(--crisp-white); } .person-chip.an::after { content: "✓"; color: var(--mint); font-weight: 800; } /* „Alle“ wählt alle Mitbewohner auf einmal */ .person-chip.alle-chip { padding: 0 13px; min-height: 32px; border-style: dashed; color: var(--cyber-blue); border-color: rgba(0, 240, 255, 0.5); } .person-chip.alle-chip.an { border-style: solid; border-color: var(--mint); color: var(--crisp-white); } .art-zusatz .personen-wahl { margin-top: 8px; } .art-hinweis { line-height: 1.45; } .art-hinweis:empty { display: none; } /* ---------- Ausgabe vormerken: reguläre Items mit einem Tipp ---------- */ .vorlagen-kopf .feld-label { margin: 12px 0 6px; } .vorlagen { display: flex; flex-wrap: wrap; gap: 6px; } .vorlagen p { margin: 0; } .vorlage { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(0, 255, 135, 0.45); background: rgba(0, 255, 135, 0.08); color: var(--crisp-white); font: 700 0.82rem 'Inter', system-ui, sans-serif; cursor: pointer; } .vorlage:active { background: rgba(0, 255, 135, 0.22); } .vorlage.weg { border-color: rgba(255, 184, 0, 0.55); background: rgba(255, 184, 0, 0.08); } .vorlage.weg span { color: var(--gold); } /* ---------- Zahlen: Weg des Empfängers, Überweisungsdaten zum Kopieren ---------- */ .zahl-weg { gap: 8px; } .zahl-weg .knopf.voll { margin-top: 2px; text-align: center; text-decoration: none; } .zahl-weg p { margin: 0; } .kopier-liste { display: flex; flex-direction: column; gap: 6px; } .kopier-liste .kopier-zeile { margin-top: 0; padding: 6px 11px; } .kopier-liste .zwei-spalten { gap: 6px; } .kopier-liste .zwei-spalten .kopier-zeile { gap: 6px; padding: 6px 9px; } .kopier-liste .zwei-spalten .kopier-wert b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; } .kopier-knopf { appearance: none; flex-shrink: 0; width: 34px; height: 34px; margin: -4px -6px -4px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--cyber-blue); cursor: pointer; } .kopier-knopf svg { width: 18px; height: 18px; } .kopier-knopf:active { background: rgba(0, 240, 255, 0.12); color: var(--mint); } /* Zahlen: großer Betrag links, an wen und wofür rechts daneben */ .zahl-kopf { display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; } .zahl-kopf .betrag-gross { margin: 0; flex-shrink: 0; } .zahl-kopf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.9rem; } .zahl-kopf-text .klein { overflow-wrap: anywhere; } .kopier-wert { display: flex; flex-direction: column; min-width: 0; } .kopier-wert small { font-size: 0.64rem; font-weight: 700; color: var(--cool-gray); text-transform: uppercase; letter-spacing: 0.05em; } .kopier-wert b { font-weight: 700; overflow-wrap: anywhere; } /* ---------- Mitglieder-Tabelle im WG-Profil (sortierbar, zuklappbar) ---------- */ .mitglieder-karte { gap: 6px; } .klapp-kopf { appearance: none; background: none; border: 0; padding: 2px 0; width: 100%; display: flex; align-items: center; gap: 8px; color: inherit; cursor: pointer; text-align: left; font: inherit; } .klapp-pfeil { margin-left: auto; color: var(--cool-gray); font-size: 0.9rem; transition: transform 0.2s ease; } .klapp-kopf[aria-expanded="false"] .klapp-pfeil, .mitglieder-karte.zu .klapp-pfeil { transform: rotate(-90deg); } .mitglieder-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; } .mitglieder-tabelle th { padding: 0; text-align: left; font-weight: 700; } .mitglieder-tabelle th button { appearance: none; background: none; border: 0; padding: 4px 0 6px; width: 100%; text-align: inherit; font: 700 0.62rem/1.2 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cool-gray); cursor: pointer; white-space: nowrap; } .mitglieder-tabelle th button.an { color: var(--cyber-blue); } /* Überschriften sind Sortier-Knöpfe: größere Tippfläche und ein ⇅, solange nicht danach sortiert ist */ .mitglieder-tabelle th button { min-height: 30px; padding: 6px 0; display: inline-flex; align-items: center; gap: 3px; } .mitglieder-tabelle th.zahl-spalte button { justify-content: flex-end; } .sortier-zeichen { font-size: 0.7rem; opacity: 0.55; letter-spacing: 0; } .mitglieder-tabelle th button.an .sortier-zeichen { opacity: 1; } /* Zeile antippen öffnet das Spielerprofil */ .spieler-zeile { cursor: pointer; -webkit-tap-highlight-color: transparent; } .spieler-zeile:active td, .spieler-zeile:hover td { background: rgba(0, 240, 255, 0.06); } .spieler-zeile:focus-visible { outline: 2px solid var(--cyber-blue); outline-offset: -2px; } .tabelle-hinweis { margin: 6px 0 0; text-align: center; } .spieler-kopf { margin-bottom: 10px; } .spieler-kopf .rollen { margin-top: 4px; } .spieler-kacheln { margin-top: 10px; } .spieler-kacheln .mini-karte strong { white-space: normal; } .mitglieder-tabelle .zahl-spalte { text-align: right; } .mitglieder-tabelle th.seit-spalte { width: 62px; } .mitglieder-tabelle th.geld-spalte { width: 90px; } /* Level ganz links, als kleine goldene Marke */ .mitglieder-tabelle th.lvl-spalte { width: 38px; } .mitglieder-tabelle th.lvl-spalte button { text-align: left; } .lvl-marke { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 7px; background: rgba(255, 184, 0, 0.12); border: 1px solid rgba(255, 184, 0, 0.45); color: var(--gold); font: 800 0.74rem 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; } /* Auf- und Zuklappen der Mitglieder: Höhe gleitet (Raster-Trick 1fr ↔ 0fr), Inhalt blendet mit */ .klapp-inhalt { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.28s ease, opacity 0.22s ease; } .klapp-inhalt > div { min-height: 0; overflow: hidden; } .mitglieder-karte.zu .klapp-inhalt { grid-template-rows: 0fr; opacity: 0; } .mitglieder-karte { transition: gap 0.28s ease; } .mitglieder-karte.zu { gap: 0; } .mitglieder-tabelle td { padding: 8px 0; border-top: 1px solid rgba(51, 65, 85, 0.5); vertical-align: middle; } .mitglieder-tabelle td.zahl-spalte { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .mitglieder-tabelle tr.ich td:first-child strong { color: var(--crisp-white); } .mitglied-zelle { display: flex; align-items: center; gap: 8px; min-width: 0; } .mitglied-zelle > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mitglied-zelle strong { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mitglied-zelle strong .grau { font-weight: 500; font-size: 0.72rem; } .rollen { display: flex; flex-wrap: wrap; gap: 3px; } .rolle { font-size: 0.6rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; border: 1px solid; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .rolle.blau { color: var(--cyber-blue); border-color: rgba(0, 240, 255, 0.4); background: rgba(0, 240, 255, 0.08); } .rolle.mint { color: var(--mint); border-color: rgba(0, 255, 135, 0.4); background: rgba(0, 255, 135, 0.08); } .rolle.gold { color: var(--gold); border-color: rgba(255, 184, 0, 0.45); background: rgba(255, 184, 0, 0.08); } /* Gründer von WellGrouped: Rand im Verlauf Cyber Blue → Mint */ .rolle.gruender { color: var(--crisp-white); border-color: transparent; background: linear-gradient(var(--deep-slate), var(--deep-slate)) padding-box, linear-gradient(90deg, var(--cyber-blue), var(--mint)) border-box; } /* ---------- Putzen: Räume und Häufigkeit ---------- */ .raum-liste { margin-top: 4px; } .raum-liste .raum-symbol { width: 32px; height: 32px; border-radius: 10px; font-size: 1rem; } .raum-liste .mini-zeile > .mit-symbol { flex-direction: row; flex-wrap: nowrap; gap: 10px; } .raum-liste .mit-symbol > div { display: flex; flex-direction: column; min-width: 0; } .raum-neu { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; } .raum-symbole { margin-top: 8px; grid-template-columns: repeat(8, minmax(0, 1fr)); } .raum-symbole .wahl-kachel { height: 34px; font-size: 1rem; } .haeufigkeit-zeile { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); gap: 8px; align-items: center; } .haeufigkeit-zeile .feld:first-child { text-align: center; font-weight: 700; } .haeufigkeit-zeile .mal { color: var(--cool-gray); font-weight: 700; } /* ---------- Putzaufgabe in mehreren Räumen ---------- */ .raum-wahl { display: flex; flex-wrap: wrap; gap: 6px; } .raum-chip { appearance: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 8px; border-radius: 999px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--cool-gray); font: 700 0.8rem 'Inter', system-ui, sans-serif; cursor: pointer; } .raum-chip span { font-size: 0.95rem; } .raum-chip.an { border-color: var(--cyber-blue); background: rgba(0, 240, 255, 0.1); color: var(--crisp-white); } .raum-symbol.mehrere { position: relative; font-size: 0.72rem; letter-spacing: -0.06em; } .raum-symbol.mehrere small { position: absolute; right: -5px; bottom: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--cyber-blue); color: var(--deep-slate); font: 800 0.58rem/16px 'Inter', sans-serif; letter-spacing: 0; text-align: center; } /* Einstellungen: Sprache als Flaggen */ .mini-umschalter.flaggen button { font-size: 1.15rem; line-height: 1; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; } /* Flaggen als Grafik (sprache.js: flagge), Windows kennt keine Flaggen-Emojis */ .flagge { display: block; width: 26px; height: 17px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.18); flex-shrink: 0; } .mini-umschalter.flaggen .flagge { width: 23px; height: 15px; } .sprach-wahl .flagge { width: 30px; height: 20px; } .mini-umschalter.flaggen button:not(.an) { opacity: 0.55; filter: saturate(0.6); } .mini-umschalter.flaggen button.an { background: rgba(0, 240, 255, 0.18); box-shadow: inset 0 0 0 1px var(--cyber-blue); } /* Kodex-Kopf: „Der … Kodex“, darunter die Fassung, rechts der runde PDF-Knopf */ .kodex-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kodex-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kodex-titel h2 { overflow-wrap: anywhere; } .rund-knopf { appearance: none; flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--crisp-white); cursor: pointer; padding: 0; } .rund-knopf svg { width: 24px; height: 24px; } .rund-knopf.gold { color: var(--gold); border-color: rgba(255, 184, 0, 0.55); box-shadow: 0 0 14px rgba(255, 184, 0, 0.18); } .rund-knopf:active { transform: scale(0.94); } /* ---------- WG-Profil: runde Knöpfe (Name, Adresse, Style) und WG-Style ---------- */ .wg-knoepfe { display: inline-flex; gap: 6px; flex-shrink: 0; } .rund-knopf.klein { position: relative; width: 34px; height: 34px; background: rgba(11, 15, 25, 0.72); border-color: rgba(248, 250, 252, 0.18); } .rund-knopf.klein svg { width: 17px; height: 17px; } .rund-knopf.klein.gold { border-color: rgba(255, 184, 0, 0.55); } .knopf-punkt { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid var(--deep-slate); animation: pulsieren 1.6s ease-in-out infinite; } .stil-reihe { display: grid; gap: 7px; } .stil-reihe.symbole { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stil-reihe.banner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stil-reihe.rahmen { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stil-kachel { appearance: none; position: relative; height: 46px; min-width: 0; border-radius: 12px; border: 1px solid var(--rand); background-color: var(--deep-slate); background-size: cover; color: var(--crisp-white); font-size: 1.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 0; overflow: hidden; } .stil-kachel.gewaehlt { border: 2px solid var(--gold); box-shadow: 0 0 12px rgba(255, 184, 0, 0.35); } .stil-kachel.gesperrt { cursor: not-allowed; } .stil-kachel.gesperrt > span { opacity: 0.32; } .stil-kachel.banner.gesperrt::after { content: ""; position: absolute; inset: 0; background: rgba(11, 15, 25, 0.68); } .stil-kachel small { position: relative; z-index: 1; font: 700 0.56rem/1 'Inter', system-ui, sans-serif; color: var(--cool-gray); white-space: nowrap; } .stil-kachel.banner small { color: var(--crisp-white); } .rahmen-probe { width: 24px; height: 24px; border-radius: 8px; border: 2px solid transparent; background: linear-gradient(var(--deep-slate), var(--deep-slate)) padding-box, var(--rahmen-bild) border-box; box-shadow: 0 0 10px var(--rahmen-schein); } /* Home: der WG-Name so, wie er geschrieben ist (nicht in Großbuchstaben) */ .name-block { min-width: 0; } .wg-name-oben { font: 800 0.9rem/1.25 'Outfit', system-ui, sans-serif; color: var(--cyber-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Spieler-Style: gesperrte Farben, schlichter Rahmen, Style-Vorschlag ---------- */ .farb-knopf { position: relative; } .farb-knopf.gesperrt { opacity: 0.35; cursor: not-allowed; } .farb-knopf .sperre { position: absolute; inset: auto 0 3px; font: 800 0.55rem/1 'Inter', system-ui, sans-serif; color: var(--deep-slate); text-shadow: 0 0 4px rgba(248, 250, 252, 0.8); } .farb-knopf[style*="1E2B45"] .sperre { color: var(--crisp-white); text-shadow: none; } .stil-reihe.rahmen.spieler { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rahmen-probe.schlicht { border: 1px solid rgba(248, 250, 252, 0.3); background: var(--slate-card); box-shadow: none; } .stil-vorschau { margin: 2px 0 4px; } .admin-animationen { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .animations-knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; } .animations-knoepfe .knopf { justify-content: flex-start; } /* ---------- Level-up-Feier (feier.js) ---------- */ .feier { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: max(20px, var(--oben)) 20px max(20px, var(--unten)); overflow: hidden; background: radial-gradient(circle at 50% 34%, #1E2B45, #0B0F19 68%); animation: einblenden 0.25s both; } .feier.weg { animation: feierWeg 0.26s ease-in both; } @keyframes feierWeg { to { opacity: 0; transform: scale(1.04); } } /* Strahlen, die sich langsam drehen */ .feier-deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .feier-strahlen { position: absolute; left: var(--mitte-x, 50%); top: var(--mitte-y, 34%); width: 1000px; height: 1000px; margin: -500px 0 0 -500px; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 184, 0, 0.17) 0deg 8deg, transparent 8deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 0 14%, transparent 58%); mask: radial-gradient(circle, #000 0 14%, transparent 58%); will-change: transform; animation: strahlenAuf 0.9s cubic-bezier(0.2, 1, 0.3, 1) both, strahlenDrehen 18s linear infinite; } .feier.wg .feier-strahlen { background: repeating-conic-gradient(from 0deg, rgba(0, 255, 135, 0.15) 0deg 8deg, transparent 8deg 22.5deg); } @keyframes strahlenAuf { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } } @keyframes strahlenDrehen { to { rotate: 360deg; } } /* Funken fliegen vom Abzeichen nach außen */ .feier-funken i { position: absolute; left: var(--mitte-x, 50%); top: var(--mitte-y, 34%); width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px currentColor; color: var(--gold); opacity: 0; pointer-events: none; --winkel: calc(var(--i) * 25.7deg); animation: funke 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) calc(0.45s + var(--i) * 0.025s) both; } .feier-funken i:nth-child(3n) { background: var(--cyber-blue); color: var(--cyber-blue); } .feier-funken i:nth-child(3n+1) { background: var(--mint); color: var(--mint); } @keyframes funke { 0% { opacity: 1; transform: rotate(var(--winkel)) translateY(0) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--winkel)) translateY(-190px) scale(0.3); } } .feier-inhalt { position: relative; width: min(100%, 360px); max-height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .feier-inhalt::-webkit-scrollbar { display: none; } /* „LEVEL UP!“ mit Glanz, der durchläuft */ .feier-ueber { font: 900 2.3rem/1 'Outfit', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; color: transparent; background: linear-gradient(100deg, var(--gold) 0 38%, var(--crisp-white) 50%, var(--gold) 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 184, 0, 0.5)); animation: ueberRein 0.75s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both, glanz 2.6s linear 1.1s 2; } .feier.wg .feier-ueber { background-image: linear-gradient(100deg, var(--mint) 0 38%, var(--crisp-white) 50%, var(--mint) 62% 100%); filter: drop-shadow(0 0 18px rgba(0, 255, 135, 0.45)); } @keyframes ueberRein { from { opacity: 0; transform: scale(0.3) translateY(14px); } to { opacity: 1; transform: none; } } @keyframes glanz { from { background-position: 130% 0; } to { background-position: -130% 0; } } /* Abzeichen: Avatar bzw. WG-Symbol, springt herein, Wellen laufen nach außen, unten rechts die Level-Zahl */ .feier-abzeichen { position: relative; width: 140px; height: 140px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 12px 0 4px; animation: abzeichenRein 0.85s cubic-bezier(0.2, 1.6, 0.4, 1) 0.25s both; } .feier-abzeichen::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 184, 0, 0.35), transparent 68%); animation: pulsieren 2.2s ease-in-out infinite; } .feier.wg .feier-abzeichen::before { background: radial-gradient(circle, rgba(0, 255, 135, 0.32), transparent 68%); } @keyframes abzeichenRein { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 65% { opacity: 1; transform: scale(1.14) rotate(5deg); } 100% { transform: none; } } .feier-banner { position: absolute; inset: 10px; border-radius: 50%; border: 1px solid var(--rand); opacity: 0.9; } .feier-abzeichen .feier-gross { position: relative; width: 98px; height: 98px; border-radius: 28px; font-size: 3rem; } .feier-abzeichen .wg-kachel.feier-gross { border-width: 3px; } .feier-welle { position: absolute; inset: 14px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; animation: welle 1.3s ease-out 0.55s both; } .feier-welle.zwei { animation-delay: 0.85s; } .feier.wg .feier-welle { border-color: var(--mint); } @keyframes welle { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } } .feier-zahl { position: absolute; right: 2px; bottom: 4px; min-width: 46px; height: 46px; padding: 0 9px; border-radius: 999px; background: var(--gold); color: var(--deep-slate); font: 900 1.45rem/40px 'Outfit', system-ui, sans-serif; border: 3px solid var(--deep-slate); box-shadow: 0 0 22px rgba(255, 184, 0, 0.65); } .feier.wg .feier-zahl { background: var(--mint); box-shadow: 0 0 22px rgba(0, 255, 135, 0.6); } .feier-zahl.tick { animation: zahlTick 0.45s cubic-bezier(0.2, 1.8, 0.4, 1); } @keyframes zahlTick { 40% { transform: scale(1.55); } 100% { transform: scale(1); } } .feier-titel { margin: 0; font: 900 1.6rem/1.1 'Outfit', system-ui, sans-serif; animation: auftauchen 0.5s 0.55s both; } .feier-text { margin: 0; color: var(--cool-gray); font-size: 0.92rem; animation: auftauchen 0.5s 0.65s both; } /* Neu freigeschaltet: Karten klappen nacheinander auf, ein Glanzstreifen läuft darüber */ .feier-neu { width: 100%; margin-top: 6px; animation: auftauchen 0.4s 0.9s both; } .feier-neu-titel { display: block; margin-bottom: 8px; font: 800 0.7rem 'Inter', system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); } .feier-karten { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; perspective: 700px; } .feier-karte { position: relative; width: 98px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; overflow: hidden; border-radius: 14px; background: var(--slate-surface); border: 1px solid rgba(255, 184, 0, 0.55); box-shadow: 0 0 16px rgba(255, 184, 0, 0.18); animation: karteRein 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) calc(1.05s + var(--i) * 0.2s) both; } .feier.wg .feier-karte { border-color: rgba(0, 255, 135, 0.5); box-shadow: 0 0 16px rgba(0, 255, 135, 0.16); } .feier-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(248, 250, 252, 0.4) 50%, transparent 65%); transform: translateX(-130%); animation: glanzStreifen 0.9s ease calc(1.45s + var(--i) * 0.2s) both; } @keyframes karteRein { from { opacity: 0; transform: rotateY(95deg) scale(0.6); } to { opacity: 1; transform: none; } } @keyframes glanzStreifen { to { transform: translateX(130%); } } .feier-vorschau { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; } .feier-vorschau.emoji { background: var(--deep-slate); border: 1px solid var(--rand); } .feier-vorschau.farbe { border-radius: 50%; border: 2px solid rgba(248, 250, 252, 0.25); } .feier-vorschau.banner { border: 1px solid var(--rand); } .feier-vorschau.rahmen { border: 3px solid transparent; background: linear-gradient(var(--deep-slate), var(--deep-slate)) padding-box, var(--rahmen-bild) border-box; box-shadow: 0 0 14px var(--rahmen-schein); } .feier-karte b { font-size: 0.76rem; line-height: 1.2; } .feier-karte small { font: 700 0.58rem 'Inter', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cool-gray); } .feier-weiter { margin-top: 10px; max-width: 260px; animation: auftauchen 0.4s 1.2s both; } .feier.wg .feier-weiter { background: var(--mint); box-shadow: 0 0 25px rgba(0, 255, 135, 0.35); } /* ---- Stil Feuerwerk: Nachthimmel mit funkelnden Sternen, Raketen platzen nacheinander (immer wieder) ---- */ .feier.stil-feuerwerk { background: radial-gradient(ellipse at 50% 110%, #1E2B45, #0B0F19 65%); } .feier-himmel i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: var(--crisp-white); opacity: 0.25; animation: funkeln 2.2s ease-in-out var(--v) infinite; } @keyframes funkeln { 50% { opacity: 0.9; } } .feuerwerk { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; } .feuerwerk i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--farbe); box-shadow: 0 0 7px var(--farbe); opacity: 0; --winkel: calc(var(--i) * 30deg); animation: knall 2.6s cubic-bezier(0.12, 0.75, 0.3, 1) var(--d) infinite; } .feuerwerk i:nth-child(odd) { --weite: -78px; } @keyframes knall { 0% { opacity: 0; transform: rotate(var(--winkel)) translateY(0) scale(0.6); } 4% { opacity: 1; } 45% { opacity: 1; } 62%, 100% { opacity: 0; transform: rotate(var(--winkel)) translateY(var(--weite, -105px)) scale(0.25); } } /* ---- Stil Neon: Cyber-Gitter am Boden, Scanlinie, Glitch-Schrift in Cyber Blue ---- */ .feier.stil-neon { background: linear-gradient(#0B0F19 0 50%, #10192C 100%); } .feier-gitter { position: absolute; left: -40%; right: -40%; bottom: -8%; height: 52%; overflow: hidden; transform: perspective(320px) rotateX(64deg); transform-origin: 50% 0; } .feier-gitter-flaeche { position: absolute; left: 0; right: 0; top: -46px; bottom: 0; background-image: linear-gradient(rgba(0, 240, 255, 0.55) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 240, 255, 0.55) 2px, transparent 2px); background-size: 46px 46px; will-change: transform; animation: gitterLauf 0.9s linear infinite; } /* Nebel zum Horizont hin: fester Verlauf über dem Gitter (statt einer Maske, die je Bild neu gerechnet wird) */ .feier-gitter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0B0F19 0%, rgba(11, 15, 25, 0.6) 30%, transparent 60%); } @keyframes gitterLauf { to { transform: translateY(46px); } } .feier-scan { position: absolute; left: 0; right: 0; top: 0; height: 140px; background: linear-gradient(transparent, rgba(0, 240, 255, 0.16), transparent); will-change: transform; transform: translateY(-140px); animation: scan 2.6s linear infinite; } @keyframes scan { from { transform: translateY(-140px); } to { transform: translateY(100vh); } } .feier.stil-neon .feier-ueber { background: none; color: var(--crisp-white); filter: none; text-shadow: 0 0 6px var(--cyber-blue), 0 0 20px var(--cyber-blue), 3px 0 0 rgba(0, 255, 135, 0.75), -3px 0 0 rgba(0, 240, 255, 0.75); animation: ueberRein 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both, glitch 2.2s steps(1) 1s infinite; } @keyframes glitch { 0%, 100% { transform: none; } 90% { transform: translate(3px, -1px) skewX(10deg); } 93% { transform: translate(-4px, 1px); } 96% { transform: none; } } .feier.stil-neon .feier-abzeichen::before { background: none; border: 2px solid var(--cyber-blue); box-shadow: 0 0 20px var(--cyber-blue), inset 0 0 20px rgba(0, 240, 255, 0.4); animation: neonPuls 1.3s ease-in-out infinite; } @keyframes neonPuls { 50% { opacity: 0.45; } } .feier.stil-neon .feier-welle { border-color: var(--cyber-blue); } .feier.stil-neon .feier-zahl { background: var(--cyber-blue); box-shadow: 0 0 22px var(--cyber-blue); } .feier.stil-neon .feier-karte { border-color: rgba(0, 240, 255, 0.6); box-shadow: 0 0 16px rgba(0, 240, 255, 0.25); } .feier.stil-neon .feier-neu-titel { color: var(--cyber-blue); } .feier.stil-neon .feier-weiter { background: var(--cyber-blue); box-shadow: 0 0 25px rgba(0, 240, 255, 0.45); } /* ---- Stil Galaxie: Sterne fliegen aus der Mitte nach außen, zwei Umlaufbahnen mit Monden ---- */ .feier.stil-galaxie { background: radial-gradient(circle at var(--mitte-x, 50%) var(--mitte-y, 34%), #161F32, #0B0F19 60%); } .feier-sterne i { position: absolute; left: var(--mitte-x, 50%); top: var(--mitte-y, 34%); width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: var(--crisp-white); opacity: 0; animation: sternFlug var(--t) linear var(--v) infinite; } .feier-sterne i:nth-child(4n) { background: var(--cyber-blue); } .feier-sterne i:nth-child(4n+1) { background: var(--mint); } @keyframes sternFlug { 0% { opacity: 0; transform: rotate(var(--w)) translateY(-14px) scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--w)) translateY(-460px) scale(1.8); } } .feier-orbit { position: absolute; left: var(--mitte-x, 50%); top: var(--mitte-y, 34%); border-radius: 50%; border: 1.5px dashed rgba(0, 240, 255, 0.45); animation: orbit 9s linear infinite, auftauchen 0.8s 0.4s both; } .feier-orbit.eins { width: 220px; height: 220px; margin: -110px 0 0 -110px; } .feier-orbit.zwei { width: 320px; height: 320px; margin: -160px 0 0 -160px; border-color: rgba(0, 255, 135, 0.35); animation-duration: 15s, 0.8s; animation-direction: reverse, normal; } .feier-orbit::after { content: ""; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); } .feier-orbit.zwei::after { background: var(--mint); box-shadow: 0 0 14px var(--mint); } @keyframes orbit { to { rotate: 360deg; } } .feier.stil-galaxie .feier-ueber { background-image: linear-gradient(100deg, var(--cyber-blue) 0 38%, var(--crisp-white) 50%, var(--mint) 62% 100%); filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.45)); } /* ---- Stil Welle (seit 16.10.2026 echte Wellen, vorher Ringe + Blasen): drei Wasser-Schichten steigen vom unteren Rand auf und strömen seitwärts (die mittlere gegenläufig), vorn mit weißer Schaumkrone, dazu einmal Gischt. Nur transform/opacity: Jedes Band ist ein SVG, doppelt so breit wie der Bildschirm, das sich endlos um die Hälfte verschiebt (nahtlos, weil sich die Welle dort wiederholt). Aufsteigen, Wippen und Strömen sitzen auf drei verschachtelten Elementen, damit sich die Bewegungen nicht gegenseitig überschreiben. ---- */ .feier.stil-welle { background: radial-gradient(circle at var(--mitte-x, 50%) var(--mitte-y, 34%), #14263F, #0B0F19 60%); } .feier-meer { position: absolute; inset: 0; } .meer-schicht { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); transform: translateY(105%); will-change: transform; animation: meerSteigt 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) var(--v) forwards; } .meer-schicht.hinten { --h: 52%; --v: 0.1s; } .meer-schicht.mitte { --h: 40%; --v: 0.25s; } .meer-schicht.vorn { --h: 29%; --v: 0.4s; } @keyframes meerSteigt { to { transform: translateY(0); } } .meer-wippen { height: 100%; will-change: transform; animation: meerWippt 3.2s ease-in-out infinite alternate; } .meer-schicht.mitte .meer-wippen { animation-duration: 2.6s; animation-delay: -1.1s; } .meer-schicht.vorn .meer-wippen { animation-duration: 2.2s; animation-delay: -0.5s; } @keyframes meerWippt { from { transform: translateY(0); } to { transform: translateY(14px); } } .meer-band { display: block; width: 200%; height: 100%; overflow: visible; will-change: transform; animation: meerStroemt 9s linear infinite; } .meer-schicht.mitte .meer-band { animation-duration: 7s; animation-direction: reverse; } .meer-schicht.vorn .meer-band { animation-duration: 5s; } @keyframes meerStroemt { from { transform: translateX(0); } to { transform: translateX(-50%); } } .meer-band .wasser { fill: rgba(0, 240, 255, 0.13); } .meer-band .kamm { fill: none; stroke: rgba(0, 240, 255, 0.6); stroke-width: 2; } .meer-schicht.mitte .wasser { fill: rgba(0, 255, 135, 0.12); } .meer-schicht.mitte .kamm { stroke: rgba(0, 255, 135, 0.6); } /* vorn dunkel (tiefes Wasser) mit weißer Schaumkrone, damit „Weiter“ und die Karten davor gut lesbar bleiben */ .meer-schicht.vorn .wasser { fill: rgba(8, 32, 50, 0.78); } .meer-schicht.vorn .kamm { stroke: rgba(248, 250, 252, 0.85); stroke-width: 3; } .feier-gischt i { position: absolute; left: var(--x); bottom: 26%; width: var(--g); height: var(--g); border-radius: 50%; background: rgba(248, 250, 252, 0.9); opacity: 0; animation: gischt 1.3s cubic-bezier(0.3, 0.6, 0.5, 1) var(--v) both; } .feier-gischt i:nth-child(3n) { background: rgba(0, 240, 255, 0.9); } @keyframes gischt { 0% { opacity: 0; transform: translate(0, 30px) scale(0.5); } 15% { opacity: 1; } 55% { opacity: 0.9; transform: translate(var(--dx), var(--hoch)) scale(1); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), 10px) scale(0.6); } } .feier.stil-welle .feier-ueber { background-image: linear-gradient(100deg, var(--cyber-blue) 0 38%, var(--crisp-white) 50%, var(--cyber-blue) 62% 100%); filter: drop-shadow(0 0 18px rgba(0, 240, 255, 0.45)); } .feier.stil-welle .feier-welle { border-color: var(--cyber-blue); } .feier.stil-welle .feier-zahl { background: var(--cyber-blue); box-shadow: 0 0 22px rgba(0, 240, 255, 0.6); } .feier.stil-welle .feier-karte { border-color: rgba(0, 240, 255, 0.55); box-shadow: 0 0 16px rgba(0, 240, 255, 0.2); } .feier.stil-welle .feier-neu-titel { color: var(--cyber-blue); } .feier.stil-welle .feier-weiter { background: var(--cyber-blue); box-shadow: 0 0 25px rgba(0, 240, 255, 0.4); } /* ---- Auswahl der Level-up-Animation im Spieler-Style ---- */ .stil-reihe.animationen { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stil-reihe.animationen .stil-kachel { height: 54px; } .stil-reihe.animationen .stil-kachel b { font: 700 0.56rem/1 'Inter', system-ui, sans-serif; color: var(--cool-gray); } .stil-reihe.animationen .stil-kachel.gewaehlt b { color: var(--gold); } .animation-ansehen { margin-top: 8px; } /* ---------- Putz-Kalender (Putzen → 📅 Kalender) ---------- */ .kalender-karte { gap: 8px; } .kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kalender-kopf h3 { margin: 0; font: 900 1.1rem 'Outfit', system-ui, sans-serif; text-align: center; flex: 1; } .kalender-kopf h3::first-letter { text-transform: uppercase; } .kalender-kopf .rund-knopf { font: 700 1.3rem/1 'Inter', system-ui, sans-serif; padding-bottom: 2px; } .kalender-heute { align-self: center; margin-top: -4px; } .kalender-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .kalender-wt { text-align: center; font: 700 0.6rem 'Inter', system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cool-gray); padding-bottom: 2px; } .kalender-tag { appearance: none; position: relative; min-width: 0; min-height: 44px; padding: 4px 0 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 10px; border: 1px solid transparent; background: var(--deep-slate); color: var(--crisp-white); font: 700 0.78rem 'Inter', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } .kalender-tag.leer { background: transparent; cursor: default; } .kalender-tag.vergangen { color: var(--cool-gray); } .kalender-tag.belegt { background: rgba(0, 240, 255, 0.07); } .kalender-tag.heute { border-color: rgba(0, 240, 255, 0.6); } .kalender-tag.heute .tag-zahl { color: var(--cyber-blue); } .kalender-tag.gewaehlt { background: rgba(0, 240, 255, 0.18); border-color: var(--cyber-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); } .kalender-tag.zu-spaet { border-color: rgba(255, 184, 0, 0.7); } .tag-symbole { font-size: 0.7rem; line-height: 1; letter-spacing: -0.08em; white-space: nowrap; } .tag-mehr { position: absolute; top: 2px; right: 3px; font: 800 0.52rem/1 'Inter', system-ui, sans-serif; color: var(--cyber-blue); } .kalender-tag-titel::first-letter { text-transform: uppercase; } .aufgabe-zeile.termin .avatar { flex-shrink: 0; } .iban-extra[hidden] { display: none; } .kalender-tag.geputzt { background: rgba(0, 255, 135, 0.07); } .tag-haken { position: absolute; top: 2px; left: 4px; font: 800 0.55rem/1 'Inter', system-ui, sans-serif; color: var(--mint); } .aufgabe-zeile.termin.erledigt { border-color: rgba(0, 255, 135, 0.3); } .aufgabe-zeile.termin.erledigt:not([role]) { cursor: default; } .spaeter-knopf { align-self: center; margin-top: 2px; } /* ---------- Stichpunkte einer Putzaufgabe (abhaken ohne XP) ---------- */ .aufgabe-text strong.mit-stand { display: flex; align-items: baseline; gap: 6px; } .aufgabe-text strong.mit-stand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .punkte-stand { flex-shrink: 0; font: 700 0.66rem 'Inter', system-ui, sans-serif; color: var(--cool-gray); } .punkte-stand.fertig { color: var(--mint); } .punkte-liste { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 2px; } .stichpunkt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--rand); background: var(--deep-slate); font-size: 0.86rem; color: var(--crisp-white); cursor: pointer; } .stichpunkt input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--mint); flex-shrink: 0; } .stichpunkt span { min-width: 0; overflow-wrap: anywhere; } .stichpunkt.ab { border-color: rgba(0, 255, 135, 0.35); } .stichpunkt.ab span { color: var(--cool-gray); text-decoration: line-through; } .punkte-bearbeiten { display: flex; flex-direction: column; gap: 6px; } .punkte-bearbeiten:not(:empty) { margin-bottom: 6px; } .punkt-zeile { display: flex; align-items: center; gap: 6px; } .punkt-zeile .feld { flex: 1; min-width: 0; } .punkt-weg { appearance: none; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--cool-gray); font: 700 0.8rem/1 'Inter', system-ui, sans-serif; cursor: pointer; } .punkt-neu { align-self: flex-start; } /* Home: Eingezahlt als eine Zeile (Wert rechts) */ .home-eingezahlt { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } /* ---------- Installieren (Pflicht seit 17.10.2026, installieren.js) ---------- */ .installieren .einstieg-karte h1 { font-size: 1.3rem; } .install-knopf { margin-top: 14px; } .install-umschalter { margin-top: 14px; } .install-schritte { list-style: none; margin: 12px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .install-schritte li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.4; } .install-nummer { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 240, 255, 0.12); border: 1px solid rgba(0, 240, 255, 0.5); color: var(--cyber-blue); font: 800 0.75rem 'Inter', system-ui, sans-serif; } .install-symbol { width: 17px; height: 17px; vertical-align: -3px; color: var(--cyber-blue); } .install-zeichen { color: var(--cyber-blue); font-weight: 800; } /* Android: zusätzlich die App-Datei (APK) zum Herunterladen (seit 25.10.2026) */ .install-apk { display: grid; gap: 6px; margin: 4px 0 10px; padding-top: 10px; border-top: 1px solid rgba(51, 65, 85, 0.55); } .install-apk-titel { font-size: 0.78rem; font-weight: 700; color: var(--cool-gray); } .install-apk small { font-size: 0.74rem; color: var(--cool-gray); line-height: 1.4; } .install-kennung { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--deep-slate); border: 1px solid rgba(255, 184, 0, 0.5); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; } .install-kennung span { font-size: 0.72rem; color: var(--cool-gray); } .install-kennung b { grid-row: 2; font-size: 1.3rem; color: var(--gold); letter-spacing: 0.08em; } .install-kennung .knopf { grid-row: 1 / 3; grid-column: 2; } .install-kennung small { grid-column: 1 / -1; color: var(--cool-gray); font-size: 0.72rem; } .hinweis-box.mint { border-color: rgba(0, 255, 135, 0.45); color: var(--crisp-white); } /* ---------- Benachrichtigungen (push.js) ---------- */ .push-karte .mit-symbol { flex-wrap: nowrap; } .push-unterzeile { display: block; } .push-probe { display: block; margin: 6px 0 2px; } /* ---------- Gründer-Bereich: Reiter Testen | Marketing, Promo-Video (promo.js) ---------- */ .aktion-kachel { position: relative; } .aktion-kachel.gesperrt { opacity: 0.55; cursor: default; } .aktion-kachel.laedt { opacity: 0.8; } .kachel-knopf { appearance: none; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--crisp-white); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s; } .kachel-knopf svg { width: 18px; height: 18px; } .aktion-kachel.gold .kachel-knopf { color: var(--gold); } .aktion-kachel.mint .kachel-knopf { color: var(--mint); } .aktion-kachel.gold .kachel-knopf:hover { border-color: var(--gold); } .aktion-kachel.mint .kachel-knopf:hover { border-color: var(--mint); } .kachel-knopf:active { transform: scale(0.88) rotate(-25deg); } /* Gründer-Bereich: Haus-Symbol neben „Abmelden“ führt zur Startseite (seit 24.10.2026) */ .kopf-rechts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .kopf-symbol { width: 31px; height: 31px; border-radius: 11px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--cyber-blue); display: grid; place-items: center; text-decoration: none; transition: transform 0.15s, border-color 0.15s; } .kopf-symbol svg { width: 18px; height: 18px; } .kopf-symbol:hover { border-color: var(--cyber-blue); } .kopf-symbol:active { transform: scale(0.9); } .aktion-kachel:active:not(.gesperrt):not(:has(.kachel-knopf:active)) { transform: scale(0.97); } .admin-aktionen > * { animation: hochkommen 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; } .admin-aktionen > :nth-child(2) { animation-delay: 0.04s; } .admin-aktionen > :nth-child(3) { animation-delay: 0.08s; } .admin-aktionen > :nth-child(4) { animation-delay: 0.12s; } .admin-aktionen > :nth-child(n+5) { animation-delay: 0.16s; } .admin-spalte.ruhig .admin-aktionen > * { animation: none; } .gruender-inhalt { touch-action: pan-y; } .gruender-inhalt.rein-rechts { animation: reinRechts 0.22s ease-out both; } .gruender-inhalt.rein-links { animation: reinLinks 0.22s ease-out both; } .gruender-reiter { margin-bottom: 12px; } /* Vier Reiter (seit 18.10.2026: Testen, Marketing, Anmeldungen, Bugs): Symbol über dem Text, offene als Zahl */ .gruender-reiter { grid-template-columns: repeat(5, auto); } .gruender-reiter button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; font-size: 0.7rem; min-width: 0; } .gruender-reiter .reiter-symbol { font-size: 1.05rem; line-height: 1; } .gruender-reiter .reiter-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reiter-zahl { position: absolute; top: 3px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: var(--deep-slate); font-size: 0.62rem; line-height: 16px; } /* Anmeldungen von der Startseite */ .anmelde-liste { gap: 8px; } .anmelde-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 13px; } .anmelde-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .anmelde-text strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anmelde-eintrag .knopf-gruppe { display: flex; gap: 6px; flex-shrink: 0; } .mail-sprache { align-self: flex-start; } /* Fehlerberichte der Nutzer: offen mit goldenem, erledigt mit Mint-Rand */ .bug-liste { gap: 10px; } .bug-bericht { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--deep-slate); border: 1px solid var(--rand); border-left: 4px solid var(--gold); border-radius: 13px; } .bug-bericht.erledigt { border-left-color: var(--mint); opacity: 0.75; } .bug-text { margin: 0; font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .bug-bericht .knopf-gruppe { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } /* Verschickte E-Mails (Gründer-Bereich → E-Mails, seit 24.10.2026) */ .mail-liste { gap: 8px; } .mail-eintrag { appearance: none; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; cursor: pointer; background: var(--deep-slate); border: 1px solid var(--rand); border-left: 4px solid var(--mint); border-radius: 13px; color: var(--crisp-white); font: inherit; } .mail-eintrag.fehler { border-left-color: var(--gold); } .mail-symbol { font-size: 1.15rem; flex-shrink: 0; } .mail-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mail-text strong { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-text .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-eintrag .marke { flex-shrink: 0; } .mail-kopfzeile { margin: -4px 0 10px; } .mail-vorschau iframe { display: block; width: 100%; height: min(62vh, 560px); border: 1px solid var(--rand); border-radius: 12px; background: #0B0F19; } .bug-daten summary { cursor: pointer; color: var(--cyber-blue); font-size: 0.78rem; font-weight: 700; } .bug-daten dl, .fehler-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 6px 0 0; font-size: 0.72rem; } .bug-daten dt, .fehler-daten dt { color: var(--cool-gray); font-weight: 600; } .bug-daten dd, .fehler-daten dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .fehler-daten { max-height: 180px; overflow-y: auto; padding: 8px 10px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 10px; } .screenshot-gross img { display: block; max-width: 100%; max-height: min(70vh, 620px); margin: 0 auto; border-radius: 12px; border: 1px solid var(--rand); } /* Fehler melden (seit 23.10.2026): Dialog mit Screenshot und Gerätedaten */ .fehler-wahlen { margin-top: 8px; } .fehler-vorschau { display: flex; justify-content: center; padding: 2px 0 8px; border-bottom: 1px solid rgba(51, 65, 85, 0.6); } .fehler-vorschau img { display: block; height: 110px; width: auto; border-radius: 8px; border: 1px solid var(--rand); } .fehler-zeigen { margin-top: 6px; padding-left: 0; } .fehler-form .einstellung-zeile[disabled] { opacity: 0.6; cursor: default; } /* Runder 🐞-Knopf über der Leiste: lange drücken = verschieben, ✕ = bis zum nächsten Öffnen weg */ .fehler-knopf { position: fixed; z-index: 55; right: 16px; bottom: calc(max(10px, var(--unten)) + 80px); width: 48px; height: 48px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; animation: dialogRein 0.3s both; } .fehler-knopf-haupt { appearance: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 184, 0, 0.55); background: rgba(22, 31, 50, 0.94); color: var(--crisp-white); font-size: 1.35rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 184, 0, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform 0.15s; touch-action: none; } .fehler-knopf-haupt:active { transform: scale(0.92); } .fehler-knopf-x { appearance: none; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rand); background: var(--slate-card); color: var(--cool-gray); font-size: 0.62rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .fehler-knopf.zieht .fehler-knopf-haupt { transform: scale(1.15); border-color: var(--gold); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 184, 0, 0.45); } .fehler-knopf.zieht .fehler-knopf-x { display: none; } .fehler-knopf.weg { transition: opacity 0.18s, transform 0.18s; opacity: 0; transform: scale(0.6); } html.tastatur-offen .fehler-knopf { display: none; } .admin-sprache { margin-top: 12px; } .promo-karte .feld-label { margin: 7px 0 4px; } .promo-wahl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .promo-wahl button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .promo-wahl button.an { background: var(--cyber-blue); color: var(--deep-slate); } .promo-wahl small { font-size: 0.6rem; font-weight: 600; opacity: 0.85; white-space: nowrap; } .promo-karte > .knopf { margin-top: 10px; } /* Musik und Videosprache nebeneinander, damit der Kasten auf 375 × 667 passt */ .promo-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .promo-paar > div { display: flex; flex-direction: column; min-width: 0; } /* Startseite (Über mich, Roadmap) im Reiter Marketing: eine schmale Zeile, damit Marketing kaum länger wird (seit 24.10.2026) */ .admin-animationen.ueber-mich-zeile { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .startseite-knoepfe { display: flex; gap: 6px; flex-shrink: 0; } /* Roadmap-Dialog: eine Karte je Phase, Rand in der Farbe des Stands */ .roadmap-phasen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .roadmap-phase { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; border-radius: 14px; background: var(--slate-card); border: 1px solid var(--rand); border-left: 4px solid var(--cool-gray); } .roadmap-phase.erledigt { border-left-color: var(--mint); } .roadmap-phase.jetzt { border-left-color: var(--cyber-blue); } .roadmap-phase.geplant { border-left-color: var(--gold); } .roadmap-phase-knoepfe { display: flex; gap: 4px; } .roadmap-phase-knoepfe .symbol-knopf:disabled { opacity: 0.35; } .roadmap-stand { align-self: flex-start; } .promo-studio { position: fixed; inset: 0; z-index: 75; background: var(--deep-slate); display: flex; flex-direction: column; gap: 10px; padding: max(12px, var(--oben)) 16px max(14px, var(--unten)); } .promo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 1rem 'Outfit', system-ui, sans-serif; } .promo-kopf .x { appearance: none; background: var(--slate-card); border: 0; color: var(--crisp-white); font-size: 1rem; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; } .promo-buehne { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; } .promo-buehne canvas, .promo-buehne video { display: block; border-radius: 14px; background: #000; box-shadow: 0 0 40px rgba(0, 240, 255, 0.18); } .promo-unten { display: flex; flex-direction: column; gap: 8px; } .promo-stand { text-align: center; margin: 0; } .promo-balken { transition: none; } .promo-knoepfe:empty { display: none; } .promo-knoepfe .knopf { flex: 1; text-decoration: none; text-align: center; } .promo-kopf-knoepfe { display: flex; gap: 8px; } .promo-drive { margin: 0; text-align: center; font-size: 0.8rem; font-weight: 600; } .promo-drive a { color: var(--cyber-blue); } /* Im Hintergrund (seit 23.10.2026): klein unten links, die App bleibt bedienbar; Antippen öffnet wieder */ .promo-studio.klein { inset: auto auto calc(max(10px, var(--unten)) + 80px) 12px; width: 132px; padding: 8px; gap: 6px; z-index: 56; background: rgba(22, 31, 50, 0.96); border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); cursor: pointer; } .promo-studio.klein.fertig { border-color: var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 184, 0, 0.35); } .promo-studio.klein .promo-kopf, .promo-studio.klein .promo-knoepfe, .promo-studio.klein .promo-drive { display: none; } .promo-studio.klein .promo-buehne { flex: none; height: 96px; } .promo-studio.klein .promo-buehne canvas, .promo-studio.klein .promo-buehne video { border-radius: 8px; box-shadow: none; pointer-events: none; } .promo-studio.klein .promo-stand { font-size: 0.66rem; line-height: 1.3; } /* ---------- Druck: nur der Kodex ---------- */ /* Kodex als PDF im Look der App: dunkles Papier (Deep Slate), Kopf im WG-Look (Symbol mit WG-Rahmen + Banner), Kacheln und Artikel als Karten in Slate Surface, goldene Nummern, weiße Unterschriftsfelder, Fuß mit WellGrouped-Logo. Seitenränder: @page hat keinen Rand (sonst bliebe er weiß); oben/unten kommt der Abstand aus Kopf- und Fußzeile der Tabelle .druck-seite, die Chrome auf jeder Seite wiederholt. Nur Markenfarben und Hilfstöne aus dem Brand Kit. */ #druck { display: none; } @media print { @page { size: A4; margin: 0; } html, body { height: auto !important; overflow: visible !important; background: #0B0F19 !important; } html, body, #druck, #druck * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body > *:not(#druck) { display: none !important; } #druck { display: block; padding: 0 14mm; color: #F8FAFC; font: 10.5pt/1.5 'Inter', system-ui, sans-serif; } .druck-seite { width: 100%; border-collapse: collapse; } .druck-seite td { padding: 0; } .druck-rand { height: 13mm; } .druck-kopf { display: flex; align-items: center; gap: 14pt; padding: 16pt 18pt; border-radius: 14pt; border: 1pt solid rgba(51, 65, 85, 0.8); color: #F8FAFC; background-size: cover; } .druck-symbol { width: 54pt; height: 54pt; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14pt; border: 2pt solid transparent; background: linear-gradient(#0B0F19, #0B0F19) padding-box, var(--rahmen-bild, linear-gradient(#00FF87, #00FF87)) border-box; font-size: 28pt; line-height: 1; } .druck-titel { display: flex; flex-direction: column; gap: 2pt; min-width: 0; } .druck-ueber { font: 800 7.5pt 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #00FF87; } .druck-kopf h1 { margin: 0; font: 900 22pt/1.1 'Outfit', sans-serif; color: #F8FAFC; } .druck-fassung { font-weight: 700; font-size: 9.5pt; color: #FFB800; } .druck-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; margin: 12pt 0 14pt; } .druck-infos > div { display: flex; flex-direction: column; gap: 2pt; padding: 7pt 10pt; background: #161F32; border: 1pt solid rgba(51, 65, 85, 0.8); border-radius: 10pt; } .druck-infos .ganz { grid-column: 1 / -1; } .druck-infos > div > span { font-size: 7pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; } .druck-infos b { font-weight: 700; color: #F8FAFC; } .druck-mitglieder { display: flex; flex-wrap: wrap; align-items: center; gap: 4pt 16pt; } .druck-mitglieder > span { display: inline-flex; align-items: center; } .druck-mitglieder i { display: inline-flex; align-items: center; justify-content: center; width: 17pt; height: 17pt; margin-right: 5pt; border-radius: 5pt; font-style: normal; font-size: 9.5pt; vertical-align: middle; } .druck-artikel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7pt; } .druck-artikel li { display: flex; align-items: flex-start; gap: 11pt; padding: 9pt 12pt; border-radius: 10pt; background: #161F32; border: 1pt solid rgba(51, 65, 85, 0.8); border-left: 4pt solid #FFB800; break-inside: avoid; } .druck-artikel li.leer { border-left-color: #94A3B8; color: #94A3B8; } .druck-nr { flex-shrink: 0; width: 21pt; height: 21pt; border-radius: 50%; background: #FFB800; color: #0B0F19; font: 900 10pt/21pt 'Outfit', sans-serif; text-align: center; } .druck-artikel b { display: block; font: 800 7.5pt 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; } .druck-artikel p { margin: 1pt 0 0; font-size: 11pt; color: #F8FAFC; } .druck-artikel strong { display: block; margin-top: 1pt; font: 800 12pt 'Outfit', sans-serif; color: #F8FAFC; } .druck-artikel strong + p { color: #D9E1EB; } /* Unterschriften: weiße Felder (zum Unterschreiben auf dem Ausdruck) mit Linie, Name darunter */ .druck-unterschriften { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14pt; margin-top: 26pt; break-inside: avoid; } .druck-unterschriften div { font-size: 8.5pt; font-weight: 600; color: #F8FAFC; text-align: center; } .druck-unterschriften span { position: relative; display: block; height: 46pt; margin-bottom: 5pt; border-radius: 8pt; background: #F8FAFC; } .druck-unterschriften span::after { content: ""; position: absolute; left: 10pt; right: 10pt; bottom: 11pt; border-bottom: 1pt solid #94A3B8; } .druck-fuss { display: flex; align-items: center; gap: 7pt; margin-top: 20pt; padding-top: 8pt; border-top: 1pt solid rgba(51, 65, 85, 0.8); font-size: 8pt; color: #94A3B8; } .druck-fuss img { border-radius: 5pt; } } /* Kodex: Artikel ändern/streichen und offener Antrag */ .artikel-zeile .knopf-gruppe { flex-shrink: 0; } /* Artikel mit Titel (seit 18.10.2026): Titel weiß, Beschreibung darunter grau */ .artikel-zeile .artikel-titel { color: var(--crisp-white); } .regel .artikel-beschreibung { margin-top: 2px; } .regel.antrag { border: 1px dashed rgba(255, 184, 0, 0.6); } .regel.antrag p { margin: 0; } .alt-text { color: var(--cool-gray); text-decoration: line-through; text-decoration-color: rgba(255, 184, 0, 0.7); } .neu-text { color: var(--crisp-white); } .textknopf.gold { color: var(--gold); } /* ---------- Bewegung ---------- */ @keyframes auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes einblenden { from { opacity: 0; } to { opacity: 1; } } @keyframes reinrutschen { 0% { opacity: 0; transform: translateY(-18px) scale(0.96); } 60% { opacity: 1; transform: translateY(3px) scale(1.01); } 100% { opacity: 1; transform: none; } } @keyframes pulsieren { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } /* Bei "weniger Bewegung" nur die Einblend-Effekte weglassen - die pulsierenden Punkte bleiben (CLAUDE.md: Fallen) */ @media (prefers-reduced-motion: reduce) { .flaeche, .dialog-hinter, .meldung { animation: none; } } /* ---------- Putz-Streak (Putzen) ---------- */ .streak-zahl { font: 900 1.45rem/1.15 'Outfit', system-ui, sans-serif; color: var(--gold); } .streak-karte.aus .streak-zahl { color: var(--cool-gray); opacity: 0.55; } /* ---------- Konto & WG verlassen, Rechtliches (16.10.2026) ---------- */ /* Roter Knopf nur für „WG verlassen“ (Steves Wunsch vom 17.10.2026); Schrift Deep Slate wie auf allen Akzentflächen */ .knopf-rot { background: var(--rot); color: var(--deep-slate); border-color: var(--rot); box-shadow: 0 0 18px rgba(255, 71, 87, 0.25); } .knopf-rot:hover { filter: brightness(1.08); } .verlassen-knopf { margin-top: 6px; } .konto-loeschen { color: var(--gold); text-decoration-color: rgba(255, 184, 0, 0.5); } .admin-knoepfe { margin-top: 2px; } .rechtliches { margin: 6px 0 0; text-align: center; font-size: 0.72rem; color: var(--cool-gray); } .rechtliches a { color: var(--cool-gray); text-underline-offset: 3px; } .rechtliches a:hover { color: var(--crisp-white); } /* „Gründer Login“ auf der Anmeldeseite: klein und unauffällig (seit 18.10.2026), seit 23.10.2026 eine Zeile unter Datenschutz und Impressum (Steve) */ .rechtliches .gruender-login { display: table; margin: 4px auto 0; opacity: 0.7; text-decoration: none; } /* Onboarding und Anmelden: Datenschutz · Impressum immer ganz unten */ .einstieg-recht { flex-shrink: 0; margin: 0; } html.tastatur-offen .einstieg-recht { display: none; } /* Putzen: abgegebene Termine und der Knopf „Abgeben“ im Kalender */ .abgabe-marke { font-size: 0.8em; } .abgeben-knopf { flex-shrink: 0; white-space: nowrap; } .abgabe-text { margin-top: 2px; } /* ---------- Fotos: Beweisfoto beim Erledigen, Beleg beim Übernehmen (foto.js) ---------- */ .foto-feld { margin-top: 2px; } .foto-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .foto-knoepfe[hidden] { display: none; } .foto-knoepfe .knopf { width: 100%; white-space: nowrap; } .foto-vorschau { position: relative; display: flex; justify-content: center; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 14px; padding: 6px; } .foto-vorschau[hidden] { display: none; } .foto-vorschau img { display: block; max-width: 100%; max-height: 150px; border-radius: 10px; object-fit: contain; } .foto-vorschau .foto-weg { position: absolute; top: 8px; right: 8px; background: rgba(11, 15, 25, 0.85); color: var(--crisp-white); } .foto-status { margin: 6px 0 0; } .foto-gross { display: flex; align-items: center; justify-content: center; min-height: 160px; } .foto-gross img { display: block; max-width: 100%; max-height: min(64vh, 560px); border-radius: 14px; object-fit: contain; } .foto-laden { display: inline-flex; gap: 8px; } .foto-knopf { appearance: none; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0, 240, 255, 0.5); background: rgba(0, 240, 255, 0.1); font-size: 0.95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .foto-knopf:hover { border-color: var(--cyber-blue); } /* ---------- Putzhistorie ---------- */ .historie-liste .historie-monat { margin: 6px 0 0; text-transform: capitalize; } .historie-liste .historie-monat:first-child { margin-top: 0; } .historie-zeile { cursor: default; } /* Wer, wann, zu spät und XP sollen ganz zu lesen sein (darf umbrechen) */ .historie-zeile .aufgabe-text > span { white-space: normal; overflow: visible; text-overflow: clip; } /* ---------- Abgabe-Anfragen (Putzplan): Karte für den, der übernehmen soll ---------- */ .abgabe-anfrage { border-color: rgba(255, 184, 0, 0.55); box-shadow: 0 0 18px rgba(255, 184, 0, 0.12); display: flex; flex-direction: column; gap: 10px; } .abgabe-anfrage .mit-symbol { align-items: center; flex-wrap: nowrap; } .abgabe-anfrage-text { flex: 1; } .abgabe-anfrage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .abgabe-anfrage-text strong { font-size: 0.86rem; } .abgabe-anfrage-text span { font-size: 0.76rem; color: var(--cool-gray); overflow-wrap: anywhere; } .abgabe-anfrage .knopf-reihe { margin: 0; } /* ---------- Symbole der Ausgaben (symbole.js) ---------- */ .ausgabe-symbol { appearance: none; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--rand); background: var(--slate-card); font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .ausgabe-symbol:hover { border-color: var(--cyber-blue); } .ausgabe-symbol.gross { width: 46px; height: 46px; border-radius: 13px; font-size: 1.35rem; background: var(--deep-slate); } .ausgabe-symbol.eigen { border-color: var(--cyber-blue); box-shadow: inset 0 0 0 1px var(--cyber-blue); } .mini-zeile.mit-symbol-links { justify-content: flex-start; } .mini-zeile.mit-symbol-links > div { flex: 1; } .titel-mit-symbol { display: flex; gap: 10px; align-items: center; } .titel-mit-symbol .feld { flex: 1; min-width: 0; } .symbol-auto { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--rand); background: var(--deep-slate); color: var(--crisp-white); font: inherit; cursor: pointer; } .symbol-auto > span:last-child { display: flex; flex-direction: column; gap: 2px; } .symbol-auto.an { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); } .symbol-gross { font-size: 1.6rem; line-height: 1; } .symbol-gitter { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; } .symbol-kachel { appearance: none; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--rand); background: var(--deep-slate); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; } .symbol-kachel:hover { border-color: var(--cyber-blue); } .symbol-kachel.an { border-color: var(--mint); box-shadow: inset 0 0 0 1px var(--mint); background: rgba(0, 255, 135, 0.08); } /* ---------- Zahlungsweg prüfen (zahlpruefung.js) ---------- */ .pruef-text { margin: 6px 0 0; font-size: 0.78rem; color: var(--cool-gray); } .pruef-text[data-stand="frei"] { color: var(--mint); } .pruef-text[data-stand="ungueltig"] { color: var(--gold); } .pruef-knoepfe { display: flex; flex-wrap: wrap; gap: 4px 14px; } .pruef-knoepfe .textknopf { padding: 4px 0; text-decoration: none; } .pruef-knoepfe [hidden] { display: none; } /* Onboarding mit Einladung (seit 18.10.2026): die eingeladene Adresse im Willkommen-Schritt */ .einladung-email { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 2px 0 8px; background: var(--deep-slate); border: 1px solid var(--rand); border-radius: 12px; font-size: 0.92rem; overflow-wrap: anywhere; }