/* Alle Farben zentral an einer Stelle, als acht durchschaltbare Paletten. Der Knopf oben rechts schaltet der Reihe nach durch (pro Gerät gemerkt). data-theme wird so früh wie möglich in einem Inline-Skript im gesetzt, damit beim Laden nichts falsch aufblitzt. Standard ist Creme. Rollen je Palette: --accent/--on-accent Kategorie-Art 1 (Leistungen) + Hauptknöpfe --ink-fill/--on-ink Kategorie-Art 2, zweite gleichwertige Farbfamilie --pop-bg/--pop-text Meldungs-Pille im BAM-Moment — bewusst NIE die Flächenfarbe der Karten, sonst geht sie unter --gold/--on-gold Zähler und Hervorhebungen --logo-plate helle Fläche hinter der Bleistift-Zeichnung */ :root, :root[data-theme="creme"] { --bg: #F8E9E2; --text: #191512; --accent: #830000; --accent-dark: #5E0000; --on-accent: #FBF3EE; --ink-fill: #191512; --on-ink: #FBF3EE; --surface: #F0DDD3; --surface-2: #E2CABD; --muted: #6E5C52; --gold: #9A6510; --on-gold: #FFF8EC; --logo-plate: #FFFFFF; --pop-bg: #191512; --pop-text: #F8E9E2; --radius: 18px; } /* Neutrales Dunkel ohne Braunstich: Kohle statt Kaffee. */ :root[data-theme="mitternacht"] { --bg: #111114; --text: #F2F2F4; --accent: #E23B3B; --accent-dark: #A11212; --on-accent: #FFF6F6; --ink-fill: #E9E9EE; --on-ink: #16161A; --surface: #1C1C21; --surface-2: #2A2A31; --muted: #9C9CA8; --gold: #FFB224; --on-gold: #1A1204; --logo-plate: #F4F4F6; --pop-bg: #FFB224; --pop-text: #1A1204; } /* Dunkelblau mit Pink und Türkis — Festivalbühne bei Nacht. */ :root[data-theme="neonnacht"] { --bg: #0B0E1A; --text: #EAF6FF; --accent: #FF2D95; --accent-dark: #C2187A; --on-accent: #FFF0F8; --ink-fill: #1DE5D8; --on-ink: #062421; --surface: #151A2C; --surface-2: #202741; --muted: #92A2C9; --gold: #F9F871; --on-gold: #1A1900; --logo-plate: #F2F6FF; --pop-bg: #F9F871; --pop-text: #1A1900; } /* Helles Grün — Zeltwiese am Vormittag. */ :root[data-theme="wiese"] { --bg: #EFF4E3; --text: #1C2415; --accent: #3F7D20; --accent-dark: #2C5716; --on-accent: #F4FBEC; --ink-fill: #1C2415; --on-ink: #F4FBEC; --surface: #E4ECD2; --surface-2: #D3DFBB; --muted: #5C6B4C; --gold: #A66B00; --on-gold: #FFF8E6; --logo-plate: #FFFFFF; --pop-bg: #1C2415; --pop-text: #EFF4E3; } /* Warmes Pfirsich mit Orange und Abendlila. */ :root[data-theme="sonnenuntergang"] { --bg: #FFEFDE; --text: #2E1A10; --accent: #D9480F; --accent-dark: #A33005; --on-accent: #FFF4EC; --ink-fill: #5F3DC4; --on-ink: #F3F0FF; --surface: #FBE2C8; --surface-2: #F4CFA6; --muted: #7A5C48; --gold: #AD6800; --on-gold: #FFF6E0; --logo-plate: #FFFFFF; --pop-bg: #2E1A10; --pop-text: #FFEFDE; } /* Kühles Hellblau mit Petrol. */ :root[data-theme="ozean"] { --bg: #EAF3F7; --text: #10222C; --accent: #0B7285; --accent-dark: #07515F; --on-accent: #ECFCFF; --ink-fill: #10222C; --on-ink: #ECFCFF; --surface: #DCE9F0; --surface-2: #C4D9E4; --muted: #52707E; --gold: #9A6700; --on-gold: #FFFBE6; --logo-plate: #FFFFFF; --pop-bg: #10222C; --pop-text: #EAF3F7; } /* Hartes Schwarzweiß mit Signalrot — Konzertplakat. */ :root[data-theme="plakat"] { --bg: #FFFFFF; --text: #101010; --accent: #D90429; --accent-dark: #9D0208; --on-accent: #FFFFFF; --ink-fill: #101010; --on-ink: #FFFFFF; --surface: #F2F2F2; --surface-2: #E0E0E0; --muted: #5A5A5A; --gold: #A07400; --on-gold: #FFFFFF; --logo-plate: #FFFFFF; --pop-bg: #101010; --pop-text: #FFFFFF; } /* Dunkles Lila mit Pink und Gelb — Discokugel. */ :root[data-theme="disco"] { --bg: #16102B; --text: #F3EDFD; --accent: #9B5DE5; --accent-dark: #6C3BB8; --on-accent: #FBF7FF; --ink-fill: #F15BB5; --on-ink: #2B0A1E; --surface: #221844; --surface-2: #2F2260; --muted: #A79BC8; --gold: #FEE440; --on-gold: #241F00; --logo-plate: #F6F2FF; --pop-bg: #FEE440; --pop-text: #241F00; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Auch die Fläche außerhalb des Inhalts gehört zum Schema: Beim Gummiband- Effekt auf dem iPhone wird der Bereich hinter der Statusleiste kurz sichtbar, und der kam sonst in Browser-Weiß statt in der Palette. */ html { background: var(--bg); } /* Streifen hinter der Statusleiste. Die Kopfzeile klebt zwar oben und bringt den Rand als Innenabstand mit, aber auf dem iPhone rutscht beim Scrollen trotzdem Inhalt darunter durch — sichtbar wurden die Filterknöpfe des Line-ups oben neben der Uhrzeit. Dieser Streifen liegt über allem und schließt die Lücke, unabhängig davon, wie sich sticky gerade verhält. Höhe 0, wo es keine Safe Area gibt (Desktop, Android). */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 6; pointer-events: none; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 18px; line-height: 1.4; overscroll-behavior-y: contain; } main { max-width: 640px; margin: 0 auto; padding: 16px 16px 120px; } h1, h2, h3 { font-weight: 800; letter-spacing: 0.4px; } h2 { font-size: 1.3rem; margin: 28px 0 12px; } .hidden { display: none !important; } .center { text-align: center; } .hint { color: var(--muted); font-size: 0.95rem; margin: 8px 0; } /* Das Zelt-Logo ist eine Bleistiftzeichnung mit transparentem Hintergrund und funktioniert nur auf hellem Grund. Die Plate sorgt dafür, dass es in beiden Paletten lesbar bleibt — im Dark Mode ist sie der einzige helle Fleck oben auf der Seite, mit Absicht. */ .logo { display: block; margin: 20px auto 8px; width: 320px; max-width: 82%; background: var(--logo-plate); border-radius: 28px; padding: 14px 22px; } .app-title { text-align: center; font-size: 2.4rem; margin: 8px 0 20px; } /* --- Kopfleiste --- */ .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--bg); border-bottom: 1px solid var(--surface-2); } /* Die weiße Platte bleibt gleich groß (Bildhöhe + Innenabstand ≈ 70px), die Zeichnung darin füllt sie aber deutlich besser aus als vorher. */ .topbar-logo { height: 64px; width: auto; display: block; background: var(--logo-plate); border-radius: 12px; padding: 3px 6px; } .topbar-title { font-weight: 800; font-size: 1.3rem; flex: 1; } /* Auf Handybreite trägt das Logo den Namen schon selbst — der Schriftzug daneben nimmt nur Platz weg, den der eigene Name besser gebrauchen kann. Ab Tablet ist genug Raum für beides. Im Markup bleibt er stehen, damit ein geänderter app_name nicht spurlos verschwindet. */ @media (max-width: 460px) { .topbar-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* Lange Namen dürfen die Kopfzeile nicht umbrechen lassen. */ #whoAmI { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; } /* Logo und Name gehören links zusammen, die Einstellungen an den rechten Rand. Der Abstand dazwischen entsteht hier und nicht über den App-Namen: Der ist auf Handybreite ausgeblendet und kann die Lücke nicht füllen. */ #openSettings { margin-left: auto; } .offline-hint { background: var(--accent-dark); color: var(--on-accent); padding: 10px 16px; font-weight: 700; font-size: 0.95rem; text-align: center; } /* --- Bedienelemente --- */ button { font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: none; border-radius: var(--radius); padding: 16px 20px; min-height: 56px; cursor: pointer; touch-action: manipulation; transition: transform 0.08s ease; } button:active { transform: scale(0.96); } /* Gesperrte Knöpfe ("Wird angelegt …") sichtbar abblenden — sonst sieht die Sperre wie ein eingefrorener, weiter tippbarer Knopf aus. */ button:disabled { opacity: 0.55; cursor: default; } button.ghost { background: transparent; border: 2px solid var(--surface-2); color: var(--muted); } button.small { min-height: 44px; padding: 10px 16px; font-size: 0.9rem; width: 100%; margin-top: 8px; } button.wide { width: 100%; margin-top: 12px; } .chip { background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 8px 16px; min-height: 44px; font-size: 0.95rem; } .chip-big { background: var(--accent); color: var(--on-accent); font-size: 1.05rem; padding: 12px 22px; min-height: 56px; } .chip-other { background: var(--gold); color: var(--on-gold); } .chip-icon { padding: 8px 12px; min-width: 44px; font-size: 1.1rem; } /* Farbschema-Knopf: ein Klecks in der Akzentfarbe des laufenden Schemas. Er wechselt die Farbe mit, ist damit selbst die Vorschau — und bleibt unaufdringlich genug, dass er beim ersten Blick nicht ablenkt. */ /* Farbklecks im Schema-Knopf: zeigt die Akzentfarbe des laufenden Schemas und wechselt beim Durchschalten mit. */ #themeCycle { display: flex; align-items: center; justify-content: center; gap: 12px; } .theme-dot { flex-shrink: 0; display: inline-block; width: 24px; height: 24px; border: 2px solid var(--surface-2); border-radius: 999px; background: var(--accent); } /* --- Line-up ------------------------------------------------------------ */ .day-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .lineup-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .chip-on { background: var(--accent); color: var(--on-accent); } /* Eine Act-Zeile ist als Ganzes der Knopf: Auf einem Handy mit Bier in der anderen Hand ist die ganze Zeile ein besseres Ziel als ein kleines Kästchen am Rand. */ .act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface); color: var(--text); border: 2px solid transparent; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; min-height: 0; font: inherit; } .act-mine { border-color: var(--accent); background: var(--surface-2); } .act-weg { opacity: 0.55; } .act-weg .act-artist { text-decoration: line-through; } .act-warte { opacity: 0.6; } .act-time { flex-shrink: 0; font-weight: 800; font-size: 0.95rem; color: var(--muted); width: 44px; } .act-main { flex: 1; min-width: 0; } .act-artist { display: block; font-weight: 700; line-height: 1.25; } .act-meta { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-top: 2px; } .act-count { flex-shrink: 0; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; } .act-count-leer { background: transparent; color: var(--muted); border: 2px dashed var(--surface-2); } /* Vorschau unter dem Farbschema-Knopf: eine Miniatur des BAM-Boards. Sie benutzt dieselben Farbvariablen wie das echte Board, zeigt also beim Durchschalten sofort, was das Schema aus Karten, Zahlen und Knöpfen macht — ohne dass man die Einstellungen dafür verlassen muss. */ .theme-preview { background: var(--bg); border: 2px solid var(--surface-2); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0 4px; } .preview-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .preview-row + .preview-row { border-top: 1px solid var(--surface-2); } .preview-emoji { font-size: 1.2rem; } .preview-text { flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem; color: var(--text); } .preview-text small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--muted); } .preview-count { font-weight: 800; font-size: 1.1rem; color: var(--gold); } .preview-plus { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 0.9rem; } .preview-plus-ink { background: var(--ink-fill); color: var(--on-ink); } /* Der Admin-Teil steht bewusst weit unten und abgesetzt: Er geht nur eine Person im Camp etwas an, alle anderen scrollen daran vorbei. */ .settings-admin { margin-top: 36px; } input[type="password"], input[type="text"] { font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--surface-2); border-radius: var(--radius); padding: 14px 16px; width: 100%; min-height: 56px; } input:focus { outline: none; border-color: var(--accent); } .error { color: var(--accent); font-weight: 700; min-height: 1.4em; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; gap: 10px; align-items: center; } .row > button { flex: 1; } .card { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .card-head { margin: 0 0 10px; font-size: 1.1rem; } /* --- Kacheln --- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; } .tile { background: var(--surface-2); color: var(--text); min-height: 76px; border-radius: var(--radius); font-size: 1.05rem; word-break: break-word; } .tile-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 118px; padding: 12px 8px; } /* Zwei gleichwertige, voll gefüllte Farbfamilien statt gefüllt/umrandet — Letzteres sah wie "ausgewählt vs. nicht ausgewählt" aus, nicht wie zwei gleichrangige Kategorie-Arten. */ .tile-cat.is-feat { background: var(--accent); color: var(--on-accent); } .tile-cat.is-fate { background: var(--ink-fill); color: var(--on-ink); } /* --- Kategorie-Zeilen im BAM-Tab ------------------------------------------- Eine Zeile trägt beides: links lesen (Gesamtzahl, Top 3), rechts tippen (+1 in der Daumenzone). Info-Fläche und Tippfläche überlappen nie. */ .cat-list { margin-top: 14px; } .cat-group-head { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; } .cat-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 12px 12px 12px 16px; margin-bottom: 10px; /* Die ganze Zeile ist Tippfläche für +1 (siehe buildCategoryRow) */ cursor: pointer; -webkit-user-select: none; user-select: none; } .cat-row:active { transform: scale(0.98); } .cat-emoji { font-size: 1.8rem; line-height: 1; flex-shrink: 0; } .cat-info { flex: 1; min-width: 0; } .cat-name { font-weight: 800; font-size: 1.05rem; word-break: break-word; } .cat-top3 { color: var(--muted); font-size: 0.82rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cat-total { flex-shrink: 0; text-align: right; font-weight: 800; font-size: 1.5rem; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 44px; } .cat-plus { flex-shrink: 0; width: 60px; height: 60px; min-height: 60px; border-radius: 50%; padding: 0; font-size: 1.2rem; font-weight: 800; background: var(--accent); color: var(--on-accent); } .cat-row.is-fate .cat-plus { background: var(--ink-fill); color: var(--on-ink); } .cat-plus.pop { animation: pop 0.35s ease; } .tile-emoji { font-size: 2.1rem; line-height: 1; } .tile-name { font-size: 1rem; text-align: center; } .tile-cat.pop { animation: pop 0.35s ease; } @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .target-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; } .target-row .label { color: var(--muted); font-weight: 700; } .kind-btn { background: var(--surface-2); color: var(--muted); } .kind-btn.active { background: var(--accent); color: var(--on-accent); } /* --- Scoreboard --- */ .score-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--surface-2); } .score-row:first-of-type { border-top: none; } .rank { width: 28px; color: var(--muted); font-weight: 800; } .who { flex: 1; font-weight: 700; } /* Zweite Zeile unter einem Namen (Admin-Personenliste): Was an der Person hängt, gehört unter den Namen statt dahinter — sonst bricht die Zeile mitten in die Zahlen um, sobald der Name etwas länger ist. */ .who-note { display: block; font-weight: 500; font-size: 0.85rem; color: var(--muted); margin-top: 2px; } .count { font-weight: 800; font-size: 1.3rem; color: var(--gold); } /* --- Ticker --- */ .ticker-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--surface-2); } .ticker-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; padding-top: 2px; } .ticker-text { flex: 1; } /* --- Fotowand --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .btn-label { display: block; text-align: center; background: var(--accent); color: var(--on-accent); font-weight: 700; border-radius: var(--radius); padding: 20px; margin-bottom: 12px; cursor: pointer; } /* Fotos untereinander in voller Breite (wie ein Feed), nicht als Kachel-Raster: Auf dem Handy war eine halbe Displaybreite zu klein, und ranzoomen ging nicht — volle Breite löst beides. */ .photo-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; } .photo { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; } .photo img { width: 100%; height: auto; display: block; } .photo figcaption { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.85rem; color: var(--muted); } .photo figcaption .photo-text { flex: 1; } /* --- Impressum & Datenschutz (Lesetext) --- */ .prose { padding-bottom: 40px; } .prose h1 { font-size: 1.6rem; margin: 24px 0 4px; } .prose h2 { font-size: 1.1rem; margin: 24px 0 6px; } .prose p, .prose li { line-height: 1.55; color: var(--text); } .prose ul { padding-left: 20px; margin: 6px 0; } .prose li { margin-bottom: 6px; } .back-link { display: inline-block; margin-top: 16px; color: var(--accent); font-weight: 700; text-decoration: none; } /* Unaufdringlicher Verweis unten auf Login- und Hauptseite */ .legal-link { display: block; text-align: center; margin-top: 28px; color: var(--muted); font-size: 0.8rem; text-decoration: none; } /* Miniaturansicht in der "Gelöschtes zurückholen"-Liste */ .restore-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; flex-shrink: 0; } /* --- Tableiste unten (Daumenbereich) --- */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--surface-2); } /* Fünf Tabs müssen auf ein schmales Telefon passen: knappe Abstände, kein Umbruch, und die Schrift darf mitschrumpfen. Ohne min-width: 0 weigern sich Flex-Kinder, unter ihre Textbreite zu gehen — dann fliegt der letzte Tab aus der Leiste. */ .tab-btn { flex: 1 1 0; min-width: 0; background: transparent; color: var(--muted); min-height: 52px; padding: 8px 4px; font-size: clamp(0.78rem, 3.4vw, 1rem); white-space: nowrap; } .tab-btn.active { background: var(--accent); color: var(--on-accent); } /* --- Überlagerung --- */ .overlay { position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; } /* --- BAM!-Effekt --- */ .bam-burst { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; } .bam-word { font-size: 5rem; font-weight: 900; color: var(--accent); text-shadow: 0 3px 0 rgba(94, 0, 0, 0.25); } /* Die Zahlen zum Knall: Gesamtzahl im Camp, eigener Rang, wer überholt wurde. Kräftige Kontrastfläche (--pop-bg), damit die Pille als Überlagerung liest und nicht wie eine weitere Kategorie-Zeile aussieht. */ .bam-sub { background: var(--pop-bg); color: var(--pop-text); font-size: 1.15rem; font-weight: 800; padding: 12px 22px; border-radius: 999px; max-width: 88%; text-align: center; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); } .bam-sub:empty { display: none; } /* Knall und Info-Zeile laufen getrennt: das Wort ploppt kurz (0,9 s), die Zahlen bleiben lange genug zum Lesen stehen (4,4 s). */ .bam-word, .bam-sub { opacity: 0; } .bam-burst.go .bam-word { animation: burst 0.9s ease-out forwards; } .bam-burst.go .bam-sub { animation: subfade 4.4s ease forwards; } @keyframes burst { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 25% { transform: scale(1.15) rotate(3deg); opacity: 1; } 70% { transform: scale(1) rotate(0deg); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } @keyframes subfade { 0% { transform: translateY(10px); opacity: 0; } 8% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } } .confetti { position: fixed; inset: 0; z-index: 39; pointer-events: none; }