/* * Kinoabend – Gestaltung aller Seiten * * 1. Grundlagen Farben, Grundstil, Hilfsklassen * 2. Bausteine Knöpfe, Häkchen, Hinweise * 3. Teilnehmerseiten Kopf und Reiter, Programm, Kinoabend-Score, Mitmachen, Essen und Bezahlen, * Bestellen, Extras, Archiv und Vorraum, Stammgäste, Fenster, Erinnerungen * 4. Eigene Seiten Einlass, Seite nicht gefunden, Vorprogramm, Fire-TV-Test, QR-Druckansicht * 5. Gestaltungen Farbvarianten der Teilnehmerseite * 6. Verwaltung Rahmen, Übersicht, Abend & Filme, Gäste, Vorschläge, Essen, Archiv, Extras, Betrieb, * dunkle Ansicht */ /* ============================================================ 1. Grundlagen */ :root { --night: #0f0c18; /* Saal bei gedimmtem Licht */ --surface: #1a1626; --line: #ffffff1f; --accent: #ffc94d; /* Leinwandlicht */ --accent-hover: #ffd876; --glow-a: #6d3df5; /* Farbschein im Kopfbereich */ --glow-b: #ffc94d; --paper: #f1e4c8; /* Billettkarton */ --ink: #1d1626; --mint: #1f6f54; /* Stempel */ --danger: #b3203a; --muted: #a69fb8; /* Für die helle Ansicht umschaltbar (unten bei .lightable): Schrift, Tönung von Flächen und Linien (als RGB), Fenster, Eingabefelder, halbdurchsichtige Leisten, Abdunkeln hinter Fenstern, Warntext */ --fg: #f5f2fa; --fx: 255 255 255; --pop: #1b1626; --field: #0f0c18; --glass: #0f0c18b3; --shade: #07050cc4; --warn-ink: #ff9b9b; --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 70rem; --r: 1rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } } body { margin: 0; font: 1.0625rem/1.55 var(--text); color: var(--fg); background: var(--night); -webkit-font-smoothing: antialiased; /* Akzent als Schrift: hier, weil die Gestaltung (.theme-…) --accent erst am body setzt */ --accent-ink: var(--accent); } h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: block; max-width: 100%; } a { color: var(--accent-ink); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .admin :focus-visible { outline-color: #5b3df5; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } /* Der Hintergrund-Schein darf seitlich nicht scrollen, die Untermenüs müssen aber aus dem Kopf herausragen dürfen */ html, body { overflow-x: clip; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 2. Bausteine */ /* ------------------------------------------------------------ Knöpfe */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .5rem 1.15rem; border: 1px solid #1d162640; border-radius: .75rem; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; } .btn:hover { background: #f1eef6; } .btn:active { transform: scale(.98); } .btn--primary { background: var(--accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); } .btn--big { min-height: 3.5rem; padding-inline: 2rem; font-size: 1.15rem; border-radius: 99rem; } .btn--small { min-height: 2.25rem; padding: .25rem .8rem; font-size: .95rem; border-radius: .6rem; } .btn--quiet, .admin a.btn--quiet { background: rgb(var(--fx) / .078); border-color: #0000; color: var(--fg); min-height: 2.25rem; padding: .2rem .8rem; font-size: .95rem; font-weight: 500; border-radius: .6rem; } .btn--quiet:hover { background: rgb(var(--fx) / .161); } .link { background: none; border: 0; padding: .25rem 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: .95rem; } .link--danger { color: var(--danger); } .btn--on { background: #1f6f54; border-color: #1f6f54; color: #fff; } .btn--on:hover { background: #24805f; } .btn--danger { border-color: #b3203a; color: #b3203a; } .btn--danger:hover { background: #b3203a; color: #fff; } .check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; } .check input { width: 1.25rem; height: 1.25rem; accent-color: var(--mint); } .order-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; font-size: .95rem; } .empty { color: var(--muted); } .flash { margin: 1.5rem 0 0; padding: .8rem 1rem; border-radius: .8rem; background: color-mix(in srgb, #55d98b 18%, var(--surface)); } .flash--closed { background: color-mix(in srgb, var(--danger) 25%, var(--surface)); } .flash a { color: inherit; } .credit { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); } /* ============================================================ 3. Teilnehmerseiten */ /* ------------------------------------------------------------ Kopf: die Plakate des Abends färben die Seite */ .hero { position: relative; z-index: 20; isolation: isolate; overflow: visible; padding: 2.8rem 0 clamp(2rem, 6vw, 4rem); } /* Schein auf den Kopfbereich begrenzt (der Kopf selbst schneidet nicht ab, damit Untermenüs herausragen dürfen) */ .hero__glow { position: absolute; inset: -20% -10% 0; z-index: -1; display: flex; background: radial-gradient(60% 80% at 20% 10%, color-mix(in srgb, var(--glow-a) 55%, #0000), #0000), radial-gradient(50% 70% at 85% 0%, color-mix(in srgb, var(--glow-b) 35%, #0000), #0000); filter: blur(70px) saturate(1.5); opacity: var(--glow-op, .7); -webkit-mask-image: linear-gradient(#000 35%, #0000); mask-image: linear-gradient(#000 35%, #0000); clip-path: inset(16.667% 8.333% 0 8.333%); } .hero__glow img { flex: 1; min-width: 0; height: 100%; object-fit: cover; } .hero h1 { font-size: clamp(2.75rem, 9.5vw, 7rem); line-height: .98; font-weight: 800; letter-spacing: -.045em; max-width: 14ch; text-wrap: balance; overflow-wrap: anywhere; } .hero__date { font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 600; color: var(--accent-ink); margin-bottom: 1rem; } /* Datum des Abends: unter dem Titel */ .hero__date--below { margin: .75rem 0 0; } /* Steht der Titel ganz oben, darf er auf dem Handy nicht unter den Stammgast-Knopf laufen */ @media (max-width: 40rem) { .hero__in > h1:first-child { margin-top: 1.6rem; } } /* Erste Zeile beginnt auf Höhe der Unterkante des Stammgast-Knopfs (.me-corner: top .8rem, gut 2.4rem hoch); die Schrift beginnt etwas unter ihrer Box. */ .hero__in > :first-child { margin-top: -.1em; } /* Der Farbschein der Gestaltung liegt über dem der Plakate, damit jede Gestaltung erkennbar bleibt. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 90% at 0% 0%, color-mix(in srgb, var(--glow-a) 38%, #0000), #0000), radial-gradient(45% 80% at 100% 0%, color-mix(in srgb, var(--glow-b) 22%, #0000), #0000); } .section { margin-top: clamp(2.75rem, 7vw, 4.5rem); } .section > h2 { font-size: 1.75rem; line-height: 1.1; font-weight: 750; letter-spacing: -.025em; margin-bottom: 1.5rem; } /* Blöcke der Anmeldung (Registrierung, Abstimmung): Überschrift als Trenner mit Nummer und Leuchtlinie, darunter die Frage */ .section > h2.join__head { display: flex; align-items: center; gap: .8rem; font-size: clamp(1.9rem, 5vw, 2.4rem); } .join__head[data-step]::before { content: attr(data-step); flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 1.2rem; font-weight: 800; letter-spacing: 0; box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 45%, transparent); } /* Ohne Nummer: ein Dreieck, das auf die Überschrift zeigt */ .join__head:not([data-step])::before { content: ""; flex: none; width: 1.5rem; height: 1.7rem; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--accent); } .join__head::after { content: ""; flex: 1; height: 2px; min-width: 2rem; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .7; } .section > h2 + .join__ask { margin: -.75rem 0 1rem; font-size: 1.2rem; font-weight: 650; } .poll__noname { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: .8rem; background: rgb(var(--fx) / .051); border: 1px dashed var(--line); } .guest--split .hero { padding-bottom: clamp(1rem, 3vw, 2rem); } .guest--split .section:first-child { margin-top: clamp(2rem, 5vw, 3rem); } /* Fuß der Seite */ .foot { display: flex; justify-content: flex-end; gap: 1.5rem; align-items: center; padding: 3.5rem 0 2.5rem; font-size: .95rem; } .foot form { display: flex; } .foot .link, .foot a { color: var(--muted); } /* Hintergrundgrafiken: Filmrollen und Snacks */ .guest { position: relative; } .deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .deco img { position: absolute; opacity: .09; width: clamp(8rem, 20vw, 17rem); filter: var(--deco-filter, none); } .deco .deco__a { top: 24%; right: -4rem; rotate: 14deg; width: clamp(13rem, 30vw, 26rem); opacity: .1; } .deco__b { top: 43%; left: -2.5rem; rotate: -12deg; } .deco__c { top: 62%; right: 3%; rotate: 9deg; } .deco__d { top: 79%; left: 4%; rotate: -24deg; } .deco .deco__e { top: 91%; right: 22%; rotate: 16deg; width: clamp(6rem, 12vw, 10rem); } /* Auf dem Handy in die Lücken neben Überschriften und Summen */ @media (max-width: 36rem) { .deco .deco__a { top: 9.5%; right: -3rem; width: 10rem; } .deco__b { top: 34%; left: auto; right: .5rem; rotate: 10deg; } .deco__c { top: 70%; right: 1rem; } .deco__d { top: 89%; left: -2.5rem; } .deco .deco__e { display: none; } } /* ------------------------------------------------------------ Reiter (mit zweiter Leiste für Essen und Archiv) */ .tabs { position: relative; z-index: 30; display: inline-flex; gap: .25rem; margin-top: 2rem; padding: .3rem; border-radius: 99rem; background: color-mix(in srgb, var(--night) 72%, #0000); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .tabs a { padding: .55rem 1.2rem; border-radius: 99rem; color: rgb(var(--fx) / .851); text-decoration: none; font-weight: 600; white-space: nowrap; } .tabs a:hover { background: rgb(var(--fx) / .122); } .tabs a[aria-current="page"] { background: var(--accent); color: var(--ink); } /* Handy: Reiter brechen in mehrere Zeilen um, statt rechts abgeschnitten zu werden */ @media (max-width: 48rem) { .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 30rem; border-radius: 1.4rem; } .tabs a { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; padding: .55rem .7rem; line-height: 1.2; } .tabs > :last-child:nth-child(odd) { grid-column: 1 / -1; } /* Genau drei Reiter: eine Zeile */ .tabs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tabs:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; } } @media (max-width: 24rem) { .tabs a { padding-inline: .7rem; font-size: .95rem; } } /* Großer Bildschirm (?tv): Programm und Bestellzettel ohne Kopf; diese Teile kommen per live.js neu, daher hier ausgeblendet */ .screen #h-orders, .screen .order-cta, .screen .ticket__mine { display: none; } /* Bestellzettel am großen Bildschirm: volle Breite, Zettel in Spalten; die Größe stellt tvfit.js ein */ .screen main.wrap:has(#live) { width: calc(100% - 5vw); max-width: none; padding-top: 2rem; padding-bottom: 1.5rem; } /* Reihen: jeder Zettel so hoch wie sein Inhalt, die nächste Reihe beginnt unter dem höchsten Zettel darüber. Oben der QR-Code oder der Stempel „bezahlt“, mit gleichem Abstand */ .screen #live .tickets { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); justify-content: center; align-items: start; gap: 1.25rem; } .screen #live .ticket { display: flex; flex-direction: column; box-shadow: none; } .screen #live .ticket__actions { order: -1; margin: 0 0 .8rem; justify-content: center; } .screen #live .ticket__qr { margin: 0; } .screen #live .ticket__qr .qr { width: 7.3rem; } .screen #live .ticket__qr figcaption { margin-top: .3rem; font-size: .8rem; } /* Sichtbarer Abstand über und unter dem (gedrehten) Stempel je etwa 1,56rem */ .screen #live .ticket__actions--done { padding: .82rem 0 1.12rem; } .screen #live .ticket__actions--done .stamp { font-size: 1.47rem; padding: .2rem .75rem; border-width: .14rem; } .screen main.wrap { padding-top: 2.5rem; } /* Essen am großen Bildschirm in drei Teilen: links (2/3) die Zettel, rechts oben der Status, darunter die Karte. Die rechte Spalte steht fest und rechnet in vh/vw, weil tvfit.js die Schriftgröße (rem) für die Zettel einstellt. */ .screen main.wrap:has(.tvfood > #live) { width: 62vw; margin: 0 0 0 2.5vw; } .tvfood__side { position: fixed; top: 2.5vh; bottom: 2.5vh; right: 2.5vw; width: 31vw; display: grid; grid-template-rows: 1fr 2fr; gap: 2.5vh; } .tvfood__status, .tvfood__mapbox { min-height: 0; display: flex; } /* Bestellstatus am Fernseher: alle Schritte, der aktuelle hervorgehoben, erledigte abgehakt */ .tvstatus { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .9vh; margin: 0; padding: 1.6vh 1.4vw; list-style: none; border-radius: 1.5vh; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .tvstatus__step { display: grid; grid-template-columns: 4vh 1fr; align-items: center; column-gap: 1.2vw; padding: .7vh 1vw; border-radius: 1.1vh; font-size: 2.3vh; color: var(--muted); opacity: .75; } .tvstatus__mark { display: grid; place-items: center; width: 3.6vh; height: 3.6vh; border-radius: 50%; box-shadow: inset 0 0 0 .25vh currentColor; font-size: 1.7vh; font-weight: 800; } .tvstatus__step--done { opacity: 1; } .tvstatus__step--done .tvstatus__mark { box-shadow: none; background: #2bb673; color: #fff; } .tvstatus__step--now { opacity: 1; padding: 1.1vh 1vw; color: inherit; background: rgb(var(--fx) / .078); box-shadow: inset .6vh 0 0 var(--accent); } .tvstatus__step--now .tvstatus__name { font-size: 3.4vh; font-weight: 800; line-height: 1.1; } .tvstatus__step--now .tvstatus__mark { width: 4vh; height: 4vh; box-shadow: none; background: var(--accent); color: #1d1626; font-size: 2vh; } .tvstatus__step--arrived { background: #2bb67326; box-shadow: inset .6vh 0 0 #2bb673; } .tvstatus__step--arrived .tvstatus__mark { background: #2bb673; color: #fff; } .tvstatus__step--onway { animation: food-pulse 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .tvstatus__step--onway { animation: none; } } .tvstatus__line { grid-column: 2; margin-top: .4vh; font-size: 1.9vh; color: var(--muted); } /* Die Karte füllt den Kasten; Ankunftszeit (während der Abholung) und Quellenangabe liegen darüber. Darunter liegt die Vektorkarte (tvmap.js); sobald sie steht, wird die SVG-Karte unsichtbar. */ .tvfood__mapwrap { position: relative; min-height: 0; border-radius: 1.5vh; overflow: hidden; box-shadow: 0 0 0 1px var(--line); } .tvfood__mapwrap > .tvfood__gl, .tvfood__mapwrap > .tvfood__mapbox { position: absolute; inset: 0; } .tvfood__gl { overflow: hidden; } .tvfood__gl .maplibregl-canvas { position: absolute; left: 0; top: 0; } .tvfood__mapwrap--gl .map--fill { visibility: hidden; } .map__credit--gl, .tvfood__mapwrap--gl .map__credit--img { display: none; } .tvfood__mapwrap--gl .map__credit--gl { display: inline; } /* Kartenstile Grau und Dunkel (Verwaltung → Essen → Live-Karte): helle Namen auf dunkler Karte */ .tvfood__mapwrap--grau .tvpin__name, .tvfood__mapwrap--dunkel .tvpin__name { color: #fff; text-shadow: 0 0 .4vh #000, 0 0 .4vh #000, 0 0 .8vh #000; } .tvfood__map--grau .map__credit, .tvfood__map--dunkel .map__credit { background: #000000a6; color: #ddd; } .tvpins { position: absolute; inset: 0; pointer-events: none; } .tvpin { position: absolute; left: 0; top: 0; width: 0; height: 0; } .tvpin__dot { position: absolute; left: -2.2vh; top: -2.2vh; width: 4.4vh; height: 4.4vh; display: grid; place-items: center; border-radius: 50%; border: .55vh solid #fff; background: #1d1626; font-size: 2.1vh; box-shadow: 0 .3vh 1vh #0004; } .tvpin--shop .tvpin__dot { background: #e0a10e; } .tvpin--car .tvpin__dot { background: #e8505b; } .tvpin__name { position: absolute; left: 0; bottom: 3vh; transform: translateX(-50%); white-space: nowrap; font-size: 2vh; font-weight: 750; color: #1d1626; text-shadow: 0 0 .4vh #fff, 0 0 .4vh #fff, 0 0 .4vh #fff, 0 0 .8vh #fff; } .tvpin__arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; } .tvpin__arrow::after { content: ""; position: absolute; left: 2.4vh; top: -1.1vh; border: 1.1vh solid transparent; border-left: 1.5vh solid #e8505b; border-right: 0; } .tvfood__map { position: relative; flex: 1; min-height: 0; margin: 0; } .tvfood__map .map--fill { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; } /* Unten links ist immer frei: Kino oben links, Restaurant unten rechts */ .tvfood__eta { position: absolute; bottom: 3.4vh; left: 1.5vh; max-width: 64%; padding: 1.2vh 1.6vh; border-radius: 1.2vh; background: #1d1626e6; } .tvfood__eta h2 { margin: 0; font-size: 2.2vh; } .tvfood__map .pickup__eta { margin: .4vh 0 0; font-size: 1.8vh; } .tvfood__map .map__credit { position: absolute; right: 0; bottom: 0; margin: 0; padding: .3vh .8vh; border-top-left-radius: .8vh; background: #ffffffcc; color: #1d1626; font-size: 1.1vh; } .tvfood__map .empty { font-size: 2vh; } /* Programm am großen Bildschirm: die Filme füllen den Fernseher, Größen nach Bildschirmhöhe */ .screen main.wrap:has(.films) { width: calc(100% - 8vw); max-width: none; padding-top: 1.4vh; } .screen .films { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; align-items: center; gap: 4vw; min-height: 77.6vh; margin: 0; padding: 0; overflow: visible; } .screen .film { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5vw; } .screen .film__poster { height: 68vh; aspect-ratio: 2 / 3; } .screen .film__time { left: 1.4vh; top: 1.4vh; padding: .5vh 1.4vh; font-size: 2.6vh; } .screen .film__text { margin-top: 0; } .screen .film__cat { font-size: 1.8vh; padding: .3vh 1.2vh; margin-bottom: 1vh; } .screen .film h3 { font-size: 4.6vh; line-height: 1.1; } .screen .film__meta { font-size: 2.3vh; margin-top: 1vh; } .screen .film__info { font-size: 2.1vh; line-height: 1.45; margin-top: 1.6vh; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; overflow: hidden; } .screen .film__info a, .screen .stream, .screen .rate__go { display: none; } .screen .rate { margin-top: 2vh; font-size: 2.2vh; } /* Drei und mehr Filme: Plakat über dem Text */ .screen .films:has(> :nth-child(3)) .film { grid-template-columns: none; justify-items: center; text-align: center; } .screen .films:has(> :nth-child(3)) .film__poster { height: 52vh; width: auto; } .screen .films:has(> :nth-child(3)) .film h3 { font-size: 3.4vh; } .screen .films:has(> :nth-child(3)) .film__info { -webkit-line-clamp: 3; } .screen .films + .credit, .screen .credit + .credit { font-size: 1.3vh; } /* Zweite Leiste unter den Reitern: die Seiten von Essen oder Archiv */ .tabs--sub { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-top: .6rem; padding: .25rem; gap: .2rem; } .tabs--sub a { padding: .4rem .95rem; font-size: .92rem; } @media (max-width: 48rem) { .tabs--sub { display: flex; justify-content: center; border-radius: 1.2rem; } .tabs--sub a { flex: 1 1 auto; padding: .45rem .7rem; } .tabs--sub > :last-child:nth-child(odd) { grid-column: auto; } } /* ------------------------------------------------------------ Wer bin ich? (Leiste unter den Reitern) */ .me { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1rem; padding: .55rem .9rem; border-radius: 1rem; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: rgb(var(--fx) / .851); width: fit-content; max-width: 100%; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .me__name { padding: .1rem .55rem; border-radius: .5rem; background: var(--accent); color: var(--ink); font-weight: 800; } .me small { opacity: .75; font-weight: 600; margin-left: .25rem; } .me__switch { font: inherit; font-weight: 600; padding: .3rem .8rem; border-radius: 99rem; border: 1px solid var(--line); background: rgb(var(--fx) / .078); color: inherit; cursor: pointer; } .me__switch:hover { background: rgb(var(--fx) / .161); } .me__switch--icon { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; } .me__link { color: inherit; font-size: .9em; opacity: .85; } .me--anon { box-shadow: inset 0 0 0 2px var(--accent); } .me-dialog { border: 0; border-radius: 1rem; padding: 0; max-width: min(26rem, calc(100vw - 2rem)); width: 100%; background: var(--pop); color: var(--fg); box-shadow: 0 20px 60px #000a; } .me-dialog::backdrop { background: var(--shade); } .me-dialog__form { display: grid; gap: .9rem; padding: 1.25rem; } .me-dialog__form h2 { margin: 0; } .me-dialog__form label { display: grid; gap: .3rem; } .me-dialog__form select, .me-dialog__form input { font: inherit; padding: .6rem .7rem; border-radius: .6rem; border: 1px solid rgb(var(--fx) / .2); background: var(--field); color: var(--fg); } .me-dialog__hint { margin: 0; font-size: .9em; opacity: .8; } .me-dialog__hint a { color: inherit; } .me-dialog__btns { display: flex; gap: .5rem; flex-wrap: wrap; } /* ------------------------------------------------------------ Profil oben rechts */ .me-top { position: absolute; top: .8rem; right: max(1rem, calc((100% - var(--wrap)) / 2)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; width: max-content; max-width: calc(100% - 2rem); } .me-top .me { margin-top: 0; } .me-corner { position: relative; } /* Rückblick und Stammgast-Knopf nebeneinander */ .me-row { display: flex; align-items: center; gap: .5rem; } .me__login { margin-left: .25rem; } /* Schmalere Bildschirme (neben dem Titel ist kein Platz): der Name steht unter den Reitern, Rückblick und Stammgast-Knopf bleiben oben rechts */ @media (max-width: 64rem) { .me-top { display: contents; } .me-row { position: absolute; top: .8rem; right: 1rem; z-index: 40; } .me-top .me { margin-top: 1rem; } } .me-corner > summary, .me-corner--login { list-style: none; display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border-radius: 99rem; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font-weight: 650; font-size: .95rem; cursor: pointer; text-decoration: none; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .me-corner--login { padding: .45rem .9rem; font-weight: 600; color: rgb(var(--fx) / .851); } .me-corner > summary::-webkit-details-marker { display: none; } .me-corner > summary:hover, .me-corner[open] > summary, .me-corner--login:hover { background: var(--pop); } .me-corner__avatar, .me-corner__big { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex: none; } .me-corner__big { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; } .me-corner__avatar--initial, .me-corner__big--initial { display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 800; } .me-corner__name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .me-corner__drop { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 14rem; display: grid; gap: .15rem; padding: .45rem; border-radius: 1rem; background: var(--pop); box-shadow: 0 14px 40px #000a, inset 0 0 0 1px var(--line); } .me-corner__who { display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem .7rem; margin: 0 0 .2rem; border-bottom: 1px solid var(--line); } .me-corner__who span { display: grid; } .me-corner__who small { color: var(--muted); } .me-corner__drop a, .me-corner__drop button { display: block; width: 100%; text-align: left; padding: .6rem .7rem; border-radius: .6rem; color: var(--fg); text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; } .me-corner__drop a:hover, .me-corner__drop button:hover { background: rgb(var(--fx) / .102); } .me-corner__drop form { margin: 0; } .me-corner__drop button { color: var(--warn-ink); } /* Hell oder dunkel: kleiner runder Knopf, die gewählte Ansicht mit Haken */ .mode-pick > summary { padding: .45rem .6rem; color: rgb(var(--fx) / .851); } .mode-pick > summary svg { flex: none; } .mode-pick__drop { min-width: 11rem; } .mode-pick__drop button { color: var(--fg); } .mode-pick__drop button[aria-pressed="true"]::after { content: " ✓"; color: var(--accent-ink); font-weight: 800; } @media (max-width: 30rem) { .me-corner__name { max-width: 6.5rem; } } /* Gelb wie die Reiter, damit man ihn nicht übersieht */ .me-back { gap: .4rem; background: var(--accent); color: var(--ink); font-weight: 700; box-shadow: none; } .me-back:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); } .me-back svg { flex: none; } /* ------------------------------------------------------------ Programm */ /* Wie am großen Bildschirm: die Filme nebeneinander, Plakat links und Text daneben */ .films { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; gap: 2.5rem; } .film { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); align-items: start; gap: 1.5rem; } .film__poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1.75rem 3rem -1.25rem #000; } .film__poster img { width: 100%; height: 100%; object-fit: cover; } .film__blank { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: .95rem; background: radial-gradient(120% 80% at 50% 0%, rgb(var(--fx) / .078), #0000); } .film__time { position: absolute; left: .7rem; top: .7rem; padding: .2rem .7rem; border-radius: 99rem; background: color-mix(in srgb, var(--night) 72%, #0000); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .95rem; font-weight: 650; font-variant-numeric: tabular-nums; } .film__text { margin-top: 0; } .film h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.15; font-weight: 650; letter-spacing: -.01em; } .film__meta, .film__info { color: var(--muted); font-size: .95rem; } .film__info { margin-top: .3rem; } /* Drei und mehr Filme: Plakat über dem Text */ .films:has(> :nth-child(3)) .film { grid-template-columns: none; justify-items: center; text-align: center; } .films:has(> :nth-child(3)) .film__poster { width: min(100%, 15rem); } .films:has(> :nth-child(3)) .film__text { margin-top: .5rem; } .films:has(> :nth-child(3)) .stream, .films:has(> :nth-child(3)) .rate { justify-content: center; } /* Schmal: die Filme untereinander, Plakat links neben dem Text */ @media (max-width: 52rem) { .films { grid-auto-flow: row; gap: 2rem; } .film, .films:has(> :nth-child(3)) .film { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 1rem; text-align: left; } .films:has(> :nth-child(3)) .film__poster { width: auto; } .films:has(> :nth-child(3)) .film__text { margin-top: 0; } .films:has(> :nth-child(3)) .stream, .films:has(> :nth-child(3)) .rate { justify-content: flex-start; } .film h3 { font-size: 1.2rem; } } @media (max-width: 30rem) { .film, .films:has(> :nth-child(3)) .film { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); } } .film__cat { display: inline-block; margin-bottom: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--accent); color: #1d1626; } .film__cat--trash { background: #ff6b6b; } .film__link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; } .film__link:hover, .film__link:focus-visible { text-decoration-color: currentColor; } /* Kurzinfos aus Wikipedia oder TMDB */ .film__info a { color: var(--muted); font-size: .85em; white-space: nowrap; } .signup-cta { margin: 1.5rem 0; } /* Streamingdienst im Programm */ .stream { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; } .stream__btn { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--accent); color: #1d1626; font-weight: 700; text-decoration: none; } .stream__btn:focus-visible { outline: 4px solid var(--fg); outline-offset: 3px; } .stream--hint { padding: .7rem .9rem; border-radius: .8rem; background: rgb(var(--fx) / .071); font-size: 1.05rem; } .stream__badge { padding: .2rem .6rem; border-radius: 999px; background: var(--accent); color: #1d1626; font-weight: 700; font-size: .85rem; } /* Live-Anzeige */ .live-dot { display: inline-block; width: .55rem; height: .55rem; margin-left: .4rem; border-radius: 50%; background: #55d98b; vertical-align: middle; animation: live 2.4s ease-in-out infinite; } @keyframes live { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* ------------------------------------------------------------ Kinoabend-Score */ .ks { display: inline-flex; align-items: center; justify-content: center; min-width: 2.9rem; height: 2.1rem; padding: 0 .55rem; border-radius: .65rem; font-weight: 850; font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; vertical-align: middle; color: #1d1626; } .ks--small { min-width: 2.4rem; height: 1.6rem; font-size: .92rem; border-radius: .5rem; } .ks--flop { background: #e5484d; color: #fff; } .ks--mau { background: #f5933a; } .ks--ok { background: #f2c94c; } .ks--gut { background: #49c27c; } .ks--top { background: linear-gradient(135deg, #ffe680, #ffb300); box-shadow: 0 0 0 2px rgb(var(--fx) / .4), 0 0 1rem -.1rem #ffc94d; } .rate { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-top: .8rem; } .rate__avg { color: var(--muted); font-size: .85rem; line-height: 1.2; } .rate__go { font-weight: 650; font-size: .92rem; } .rate-head { display: flex; gap: 1rem; align-items: center; } .rate-head__poster { width: 5rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; flex: none; } .rate-head h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.1; } .rate-head h2 span { color: var(--muted); font-weight: 500; } .rate-head__score { margin-top: .5rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .rate-saved { display: flex; align-items: center; gap: .6rem; font-weight: 650; } .rate-form__help { margin: 1.4rem 0 .6rem; color: var(--muted); } .rate-crit { border: 0; padding: .9rem 0 1rem; margin: 0; border-bottom: 1px solid var(--line); } .rate-crit legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; padding: 0; margin-bottom: .6rem; } .rate-crit legend strong { font-size: 1.1rem; } .rate-crit legend span { color: var(--muted); font-size: .92rem; } .rate-crit__avg { font-style: normal; font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; } .rate-crit__avg .ks { min-width: 2.2rem; height: 1.4rem; font-size: .8rem; border-radius: .4rem; } .rate-crit__opts { display: flex; flex-wrap: wrap; gap: .4rem; } .rate-opt { position: relative; } .rate-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .rate-opt span { display: block; padding: .55rem .85rem; border-radius: 99rem; border: 2px solid var(--line); background: rgb(var(--fx) / .051); font-weight: 600; font-size: .92rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .rate-opt input:hover + span { border-color: rgb(var(--fx) / .4); } .rate-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } .rate-opt--0 input:checked + span { background: #e5484d; border-color: #e5484d; color: #fff; } .rate-opt--1 input:checked + span { background: #f5933a; border-color: #f5933a; color: #1d1626; } .rate-opt--2 input:checked + span { background: #f2c94c; border-color: #f2c94c; color: #1d1626; } .rate-opt--3 input:checked + span { background: #49c27c; border-color: #49c27c; color: #1d1626; } .rate-opt--4 input:checked + span { background: linear-gradient(135deg, #ffe680, #ffb300); border-color: #ffc94d; color: #1d1626; } .rate-next { margin-top: 1.5rem; color: var(--muted); } @media (max-width: 30rem) { .rate-opt { flex: 1 1 calc(50% - .4rem); } .rate-opt span { text-align: center; padding: .55rem .5rem; } } .best .ks, .arch__films .ks, .wr__card .ks { margin-right: .25rem; } /* ------------------------------------------------------------ Mitmachen: Zusage und Abstimmung */ .join__form { display: grid; gap: .9rem; } .join__name { display: grid; gap: .3rem; max-width: 20rem; font-weight: 600; } .join__name input { padding: .6rem .8rem; border-radius: .7rem; border: 2px solid rgb(var(--fx) / .2); background: rgb(var(--fx) / .063); color: inherit; font: inherit; } .join__btns { display: flex; flex-wrap: wrap; gap: .5rem; } .join__btn { padding: .65rem 1.1rem; border-radius: 999px; border: 2px solid var(--accent); background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; } .join__btn--on { background: var(--accent); color: #1d1626; } .join__btn:focus-visible { outline: 4px solid var(--fg); outline-offset: 3px; } .join__list { display: grid; gap: .5rem; margin-top: 1rem; } .join__list div { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .5rem; } .join__list dt { font-weight: 700; } .join__list dd { color: var(--muted); } .join__count { display: inline-block; min-width: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: rgb(var(--fx) / .102); text-align: center; font-size: .85rem; } .poll { display: grid; gap: .7rem; } .poll__item { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-radius: 1rem; background: var(--surface); border: 2px solid transparent; } .poll__item--mine { border-color: var(--accent); } .poll__text { flex: 1 1 16rem; min-width: 0; } .poll__text h3 span { color: var(--muted); font-weight: 500; } .poll__text p { color: var(--muted); font-size: .92rem; } .poll__seen { font-style: italic; } .poll__count { margin-top: .25rem; } /* Namensauswahl (bekannte Namen oder neuer Name) */ .name-pick { display: grid; gap: .6rem; } .name-pick label { display: grid; gap: .3rem; } .name-pick select { padding: .6rem .8rem; border-radius: .7rem; font: inherit; } .join__name.name-pick select, .join__name.name-pick input { border: 2px solid rgb(var(--fx) / .2); background: rgb(var(--fx) / .063); color: inherit; } .join__name.name-pick select option { color: #1d1626; } .name-pick__new span { font-weight: 500; font-size: .9rem; } .order-field.name-pick select { width: 100%; border: 1px solid #1d16264d; background: #fff; color: #1d1626; } /* Eingeklappte Teilnehmerliste */ .join__more { margin-top: 1rem; border-radius: .9rem; background: var(--surface); } .join__more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .8rem 1rem; cursor: pointer; font-weight: 700; list-style: none; } .join__more summary::-webkit-details-marker { display: none; } .join__more summary::before { content: '▸'; color: var(--accent-ink); transition: transform .15s; } .join__more[open] summary::before { transform: rotate(90deg); } .join__more summary:focus-visible { outline: 4px solid var(--fg); outline-offset: 2px; border-radius: .9rem; } .join__sum { font-weight: 500; color: var(--muted); font-size: .92rem; } .join__more .join__list { margin: 0; padding: 0 1rem 1rem; } /* Abstimmung mit TMDB-Daten */ .poll__item--img { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: start; } .poll__poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; background: rgb(var(--fx) / .078); } .poll__meta { font-weight: 600; color: var(--text, inherit) !important; opacity: .85; } .poll__link { color: var(--accent-ink); font-weight: 600; } .poll__item--img .join__btn { align-self: center; } @media (max-width: 40rem) { .poll__item--img { grid-template-columns: 4.5rem minmax(0, 1fr); } .poll__item--img .join__btn { grid-column: 1 / -1; } } /* Abstimmung in zwei Kategorien */ .poll__rules { color: var(--muted); max-width: 46rem; margin: 0 0 1rem; padding-left: 1.2rem; list-style: disc; display: grid; gap: .2rem; } .poll__rules li::marker { color: var(--accent-ink); } .poll__score { font-weight: 700; } .poll-cat { margin-top: 1.2rem; } .poll-cat__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .6rem; } .poll-cat__head h3 { font-size: 1.25rem; } .poll-cat__left { color: var(--accent-ink); font-weight: 600; font-size: .92rem; } .poll-cat__voters { margin-top: .6rem; color: var(--muted); font-size: .92rem; } .poll__btns { display: flex; flex-direction: column; gap: .45rem; align-self: center; } .join__btn--minus { border-color: #ff6b6b; } .join__btn--minus.join__btn--on { background: #ff6b6b; color: #1d1626; } .join__btn--undo { padding-block: .3rem; font-size: .9em; opacity: .85; } .join__btn[aria-disabled="true"]:not(.join__btn--on) { opacity: .5; } .poll__item--against { border-color: #ff6b6b; } .poll__item--mine.poll__item--against { border-color: var(--accent); } .poll__lead { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--accent); color: #1d1626; font-style: normal; font-size: .75rem; font-weight: 700; vertical-align: middle; } .poll__plus { color: var(--accent-ink); font-weight: 600; } .poll__minus { color: var(--warn-ink); } .poll__item--img .poll__btns { align-self: center; } @media (max-width: 40rem) { .poll__btns { flex-direction: row; width: 100%; } .poll__btns .join__btn { flex: 1; } .poll__btns .join__btn--undo { flex: 0 0 auto; } .poll__item--img .poll__btns { grid-column: 1 / -1; } } @media (max-width: 40rem) { .join__list div { grid-template-columns: 1fr; gap: 0; } } /* ------------------------------------------------------------ Essen: Bestellzettel und Bezahlen */ .tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; align-items: start; } .ticket { background: var(--paper); color: var(--ink); padding: 1.1rem 1.25rem 1rem; border-radius: .3rem; overflow: hidden; scroll-margin-top: 1.5rem; } .ticket__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; } .ticket h3 { font-size: 1.45rem; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; } .stamp { flex: none; padding: .05rem .5rem; rotate: -6deg; border: 2px solid var(--mint); border-radius: .25rem; color: var(--mint); font-weight: 700; font-size: .85rem; } .ticket__items li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; } .ticket__items span:last-child, .ticket__sum strong { font-variant-numeric: tabular-nums; white-space: nowrap; } .ticket__none, .ticket__note { color: #6a5a78; font-size: .95rem; } .ticket__note { margin-top: .4rem; font-style: italic; } .ticket__nodisc { font-size: .75em; opacity: .7; white-space: nowrap; } /* Abrisskante mit zwei ausgestanzten Kerben */ .ticket__sum { position: relative; display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem; padding-top: .8rem; border-top: 2px dashed #1d162666; font-size: 1.15rem; } .ticket__sum::before, .ticket__sum::after { content: ""; position: absolute; top: -.7rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--night); } .ticket__sum::before { left: -1.9rem; } .ticket__sum::after { right: -1.9rem; } .ticket--mine { box-shadow: 0 0 0 3px var(--accent, #ffc94d), 0 1rem 2rem -1rem #0008; } .ticket__mine { margin: -.2rem 0 .4rem; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; } /* Bezahlen direkt am Zettel */ .ticket__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .9rem; } .ticket__actions form { display: flex; } .ticket__pay { flex: 1 1 auto; display: inline-flex; justify-content: center; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border-radius: .6rem; background: var(--ink); color: var(--paper); font-weight: 650; text-decoration: none; text-align: center; flex-basis: 100%; } .ticket__pay:hover { background: #33274a; } .ticket__pay--alt { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .ticket__pay--alt:hover { background: #1d16261a; } .ticket__report { min-height: 2.75rem; padding: .4rem .9rem; border-radius: .6rem; cursor: pointer; background: none; border: 1.5px solid #1d162680; color: var(--ink); font-weight: 600; } .ticket__report:hover { background: #1d16261a; } .ticket :focus-visible { outline-color: var(--ink); } .ticket__wait { color: #6a5a78; font-size: .95rem; } .stamp--reported { border-style: dashed; border-color: #8a5a00; color: #8a5a00; } /* QR-Code für PayPal am Zettel */ .qr { display: block; width: 100%; height: auto; } .ticket__qr { flex-basis: 100%; margin: .25rem 0 0; text-align: center; } .ticket__qr .qr { width: min(100%, 11rem); margin-inline: auto; border-radius: .5rem; } .ticket__qr figcaption { margin-top: .4rem; font-size: .9rem; color: #4a3d58; } .food-status { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; padding: .9rem 1.1rem; margin: 0 0 1.2rem; border-radius: 1rem; font-size: 1.1rem; background: rgb(var(--fx) / .078); border-left: 6px solid var(--accent); } .food-status--onway { animation: food-pulse 2s ease-in-out infinite; } .food-status--arrived { border-left-color: #2bb673; background: #2bb67326; } @keyframes food-pulse { 50% { background: rgb(var(--fx) / .141); } } @media (prefers-reduced-motion: reduce) { .food-status--onway { animation: none; } } /* Live-Karte: Essen wird abgeholt */ .pickup { margin-top: 1.5rem; } .pickup__eta { font-size: 1.15rem; margin: .4rem 0 .9rem; } .pickup__eta strong { color: var(--accent-ink); } .map { display: block; width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line), 0 1.5rem 3rem -2rem #000; background: #e8e4dc; } .map__credit { font-size: .78rem; color: var(--muted); margin-top: .35rem; } .map__credit a { color: inherit; } .pickup__age { color: var(--muted); font-size: .9rem; margin-top: .3rem; } .pickup__age { max-width: 46rem; margin-bottom: .8rem; } /* Dieselbe Karte wie am Fernseher (tvmap.js), auf dem Handy in rem statt vh */ .pickup__mapwrap { max-width: 46rem; aspect-ratio: 4 / 3; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line), 0 1.5rem 3rem -2rem #000; } .pickup__mapwrap .tvpin__dot { left: -1.1rem; top: -1.1rem; width: 2.2rem; height: 2.2rem; border-width: .22rem; font-size: 1rem; box-shadow: 0 .15rem .5rem #0004; } .pickup__mapwrap .tvpin__name { bottom: 1.45rem; font-size: .85rem; text-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 .4rem #fff; } .pickup__mapwrap.tvfood__mapwrap--grau .tvpin__name, .pickup__mapwrap.tvfood__mapwrap--dunkel .tvpin__name { text-shadow: 0 0 .2rem #000, 0 0 .2rem #000, 0 0 .4rem #000; } .pickup__mapwrap .tvpin__arrow::after { left: 1.2rem; top: -.55rem; border-width: .55rem; border-left-width: .75rem; border-right-width: 0; } .pickup__mapwrap .tvfood__map .map__credit { font-size: .65rem; padding: .1rem .4rem; border-top-left-radius: .4rem; } /* ------------------------------------------------------------ Essen bestellen */ .hero--slim { padding-bottom: 1.5rem; } .hero--slim h1 { font-size: clamp(2.25rem, 6vw, 4rem); } .order-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; color: var(--muted); } .deadline { margin: 1.5rem 0 0; font-weight: 600; color: var(--accent-ink); } .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 2rem; align-items: start; margin-top: 1.5rem; } .order-menu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; } .order-menu__head h2 { font-size: 1.75rem; font-weight: 750; letter-spacing: -.025em; } .order-menu__head .credit { margin: 0; } .menu-search { width: 100%; min-height: 3rem; padding: .5rem 1rem; margin-bottom: 1rem; border-radius: .9rem; border: 1px solid var(--line); background: var(--surface); } .menu-cat { border-top: 1px solid var(--line); } .menu-cat[hidden] { display: none; } .menu-cat summary { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem .1rem; cursor: pointer; font-size: 1.15rem; font-weight: 700; list-style: none; } .menu-cat summary::-webkit-details-marker { display: none; } .menu-cat summary::after { content: "+"; color: var(--muted); font-weight: 400; } .menu-cat[open] summary::after { content: "−"; } .menu-cat summary span { margin-left: auto; margin-right: .75rem; font-size: .9rem; font-weight: 400; color: var(--muted); } .menu-items { display: grid; gap: .5rem; padding-bottom: 1rem; } .menu-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .8rem .9rem; border-radius: .9rem; background: var(--surface); } .menu-item[hidden] { display: none; } .menu-item__text { flex: 1 1 14rem; min-width: 0; } .menu-item h3 { font-size: 1.05rem; font-weight: 650; } .menu-item p { font-size: .9rem; color: var(--muted); } .menu-item__opts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .menu-item--img { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; } .menu-item--img .menu-item__opts { grid-column: 1 / -1; } .menu-item__img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: .6rem; background: rgb(var(--fx) / .078); } @media (max-width: 30rem) { .menu-item--img { grid-template-columns: 6.5rem minmax(0, 1fr); } } .opt { display: inline-flex; flex-direction: column; align-items: center; min-height: 2.75rem; padding: .3rem .8rem; cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent) 55%, #0000); border-radius: .7rem; background: #0000; color: inherit; line-height: 1.2; } .opt span { font-size: .75rem; color: var(--muted); } .opt strong { font-variant-numeric: tabular-nums; } .opt:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 18%, #0000); } .opt:disabled { opacity: .5; cursor: not-allowed; } .opt--added { animation: added .5s ease-out; } @keyframes added { 0% { background: var(--accent); color: var(--ink); } 100% { background: #0000; } } @media (prefers-reduced-motion: reduce) { .opt--added { animation: none; } } /* Bestellseite: Fenster für Wahlmöglichkeiten bei Smiley's (Teig, Extras, Menü-Getränk, Pizza geschnitten …) */ .xo { max-width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: hidden; } .xo__form { max-height: calc(100dvh - 2rem); overflow: auto; } .xo__group { display: grid; gap: .3rem; margin: 0; padding: .45rem .8rem .7rem; border: 1px solid var(--line); border-radius: .8rem; } .xo__group--need { border-color: var(--accent); } .xo__group legend { padding: 0 .3rem; font-weight: 600; } .xo__group legend small { margin-left: .3rem; font-weight: 400; color: var(--muted); } .me-dialog__form .xo__opt { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; } .me-dialog__form .xo__opt input { width: 1.15rem; height: 1.15rem; padding: 0; accent-color: var(--accent); } .xo__opt > span:first-of-type { flex: 1; } .xo__price { color: var(--muted); font-size: .9em; font-variant-numeric: tabular-nums; } .xo .cart__qty button { color: inherit; border-color: rgb(var(--fx) / .35); } .xo .cart__qty button:disabled { opacity: .35; cursor: not-allowed; } .xo .order-error { margin: 0; } .order-side { position: sticky; top: 1rem; display: grid; gap: .75rem; } .order-ticket .ticket__head { margin-bottom: .9rem; } .order-pay .ticket__head { margin-bottom: .5rem; } .order-pay__note { color: #6a5a78; font-size: .92rem; margin: 0 0 .75rem; } .order-field { display: grid; gap: .25rem; margin-bottom: .8rem; font-size: .9rem; font-weight: 600; } .order-field input, .order-field textarea { min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid #1d16264d; border-radius: .6rem; background: #fff; color: var(--ink); font-weight: 400; } .cart { display: grid; gap: .5rem; margin-bottom: .8rem; } .cart__line { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; } .cart__name small { display: block; font-size: .8rem; color: #6a5a78; } .cart__qty { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; } .cart__qty button { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #1d162666; background: none; color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; } .cart__price { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; } .cart-host__title { margin: 0 0 .3rem; font-size: .8rem; color: #6a5a78; } .ticket__calc { display: grid; gap: .15rem; margin-top: .6rem; font-size: .95rem; } .ticket__calc li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; } .order-submit { width: 100%; margin-top: 1rem; border: 0; cursor: pointer; font: inherit; font-weight: 650; } .order-submit:disabled { opacity: .45; cursor: not-allowed; } .order-error { margin-top: .75rem; color: var(--danger); font-weight: 600; } .order-error--pop { animation: late-pop .35s ease-out; } @keyframes late-pop { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .order-error--pop { animation: none; } } .order-error--shame { display: grid; gap: .6rem; justify-items: center; text-align: center; } .order-error--shame img { width: 100%; max-width: 220px; height: auto; border-radius: .6rem; } .order-side .order-links { justify-content: center; } .order-side .link { color: var(--muted); } .cart-bar { display: none; } @media (max-width: 56rem) { .order-layout { grid-template-columns: 1fr; } .order-side { position: static; } .cart-bar:not([hidden]) { display: block; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 10; padding: .9rem 1rem; border-radius: 99rem; background: var(--accent); color: var(--ink); font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 1rem 2rem -.5rem #000; } } .name-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; max-width: none; } .name-fixed__name { display: inline-block; width: fit-content; padding: .45rem .8rem; border-radius: .6rem; background: var(--accent); color: var(--ink); font-size: 1.05em; } /* ------------------------------------------------------------ Extras */ .entry-flash { margin: 0 0 1.2rem; font-weight: 600; } /* Pause */ .pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: 1rem; background: rgb(var(--fx) / .063); box-shadow: inset 0 0 0 1px var(--line); } .pause h2 { font-size: 1.15rem; line-height: 1.2; } .pause p { color: var(--muted); } .pause small { font-size: .85rem; } .pause--on { background: color-mix(in srgb, #3fa9f5 28%, var(--surface)); box-shadow: inset 0 0 0 2px #3fa9f5; } .pause--on h2 { font-size: 1.6rem; } /* Ohne Pause nur der Knopf links, nach einem Antrag der Text daneben */ .pause--idle, .pause--wait { justify-content: flex-start; padding: 0; background: none; box-shadow: none; } .pause--wait .pause__text { flex: 1 1 16rem; } .pause--wait strong { color: var(--fg); } .pause__timer { margin-left: .4rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-ink); } .pause--on .pause__info { margin-top: .4rem; } .pause--on p { color: inherit; } .preshow__pause { position: fixed; top: 1rem; left: 50%; translate: -50% 0; z-index: 20; width: min(36rem, calc(100% - 2rem)); } .preshow__pause .pause { margin: 0; background: color-mix(in srgb, var(--surface) 92%, #0000); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .preshow__pause .pause:not(.pause--on) { display: none; } /* Kinosaal: Pause, darunter Trash-Bingo */ .kinosaal { padding-top: 1rem; } /* Trash-Bingo */ /* Breite des Bretts: Leiste darüber und Ruhmeshalle gehen mit, die Größenwahl endet so immer oben rechts am Brett */ .bingo { --board: min(100%, 54rem); } .bingo--m { --board: max(min(100%, 20rem), calc(min(100%, 54rem) * .8)); } .bingo--s { --board: max(min(100%, 20rem), calc(min(100%, 54rem) * .6)); } .bingo__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; width: var(--board); margin: .6rem 0 1rem; } .bingo__film { color: var(--accent-ink); font-weight: 700; } /* Größe des Bretts, von jedem Gast selbst gewählt (bingo.js merkt sie sich) */ .bingo__size { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 99rem; box-shadow: inset 0 0 0 1px var(--line); } .bingo__size[hidden] { display: none; } .bingo__size button { padding: .3rem .8rem; border: 0; border-radius: 99rem; background: none; color: inherit; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; } .bingo__size button[aria-pressed="true"] { background: var(--accent); color: var(--ink); } .bingo__size button:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; } .bingo__form .join__name { margin-bottom: 1rem; } /* Das Brett: quadratisch, mit quadratischen Feldern, im Stil der übrigen Kästen */ .bingo__grid { container-type: inline-size; display: grid; gap: .6rem; width: var(--board); aspect-ratio: 1; padding: .6rem; border-radius: 1.2rem; background: rgb(var(--fx) / .031); box-shadow: inset 0 0 0 1px var(--line), 0 1.75rem 3rem -1.75rem #000; } .bingo__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); } .bingo__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); } /* Kleiner nie unter 20rem (sonst wird die Schrift unlesbar); auf dem Handy daher ohne Auswahl */ @media (max-width: 40rem) { .bingo__size { display: none; } .bingo--s, .bingo--m { --board: 100%; } } .bingo__cell { display: grid; place-items: center; min-width: 0; min-height: 0; padding: .5rem; border: 0; border-radius: 1rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); color: inherit; font: inherit; font-size: clamp(.6rem, 2.4cqi, 1.2rem); font-weight: 650; line-height: 1.2; text-wrap: balance; overflow: hidden; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; cursor: pointer; transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease; position: relative; } .bingo__grid--3 .bingo__cell { font-size: clamp(.72rem, 3.3cqi, 1.45rem); } .bingo__cell:hover { background: rgb(var(--fx) / .09); } .bingo__cell:active { transform: scale(.96); } .bingo__cell--on, .bingo__cell--on:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 0 0 2px var(--accent); } .bingo__cell--on::after { content: "✓"; position: absolute; top: .25rem; right: .45rem; font-size: .85rem; color: var(--accent-ink); } .bingo__cell--win, .bingo__cell--win:hover { background: var(--accent); color: var(--ink); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 55%, transparent); } .bingo__cell--win::after { color: var(--ink); } .bingo__cell:focus-visible { outline: 4px solid var(--fg); outline-offset: 2px; } @media (max-width: 30rem) { .bingo__grid { gap: .3rem; padding: .35rem; border-radius: .9rem; } .bingo__cell { padding: .2rem; line-height: 1.15; border-radius: .55rem; } .bingo__cell--on::after { top: .1rem; right: .25rem; font-size: .7rem; } } .bingo__hall { width: var(--board); margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(var(--fx) / .063); } .bingo__hall h3 { font-size: 1.1rem; margin-bottom: .4rem; } .bingo__hall ol { margin: 0; padding-left: 1.4rem; } .bingo__hall li { margin: .2rem 0; } .bingo__hall small, .bingo__hall p { color: var(--muted); } .bingo__crown { margin-right: .3rem; } .bingo__wins { display: inline-block; margin: 0 .3rem; padding: .05rem .55rem; border-radius: 99rem; background: var(--accent); color: var(--ink); font-size: .82rem; font-weight: 750; } .bingo-party { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; visibility: hidden; overflow: hidden; } .bingo-party strong { font-size: clamp(3rem, 13vw, 11rem); white-space: nowrap; font-weight: 900; letter-spacing: -.04em; color: var(--accent); text-shadow: 0 .3rem 0 #0008, 0 0 3rem var(--accent); } .bingo-party--show { animation: party-life 3.2s ease forwards; } .bingo-party--show strong { animation: party-pop 3.2s cubic-bezier(.2, 1.6, .4, 1) forwards; } .bingo-party i { position: absolute; top: -2rem; width: .7rem; height: 1.1rem; border-radius: .15rem; background: var(--accent); } .bingo-party--show i { animation: confetti 2.8s linear forwards; } .bingo-party i:nth-child(3n) { background: #ff6b6b; } .bingo-party i:nth-child(3n+1) { background: #5fe0c8; } .bingo-party i:nth-child(4n) { background: #fff; } .bingo-party i:nth-child(2) { left: 4%; animation-delay: .1s; } .bingo-party i:nth-child(3) { left: 8%; animation-delay: .5s; } .bingo-party i:nth-child(4) { left: 12%; animation-delay: .2s; } .bingo-party i:nth-child(5) { left: 16%; animation-delay: .7s; } .bingo-party i:nth-child(6) { left: 20%; animation-delay: .3s; } .bingo-party i:nth-child(7) { left: 24%; animation-delay: .9s; } .bingo-party i:nth-child(8) { left: 28%; animation-delay: .15s; } .bingo-party i:nth-child(9) { left: 32%; animation-delay: .6s; } .bingo-party i:nth-child(10) { left: 36%; animation-delay: .35s; } .bingo-party i:nth-child(11) { left: 40%; animation-delay: .8s; } .bingo-party i:nth-child(12) { left: 44%; animation-delay: .05s; } .bingo-party i:nth-child(13) { left: 48%; animation-delay: .45s; } .bingo-party i:nth-child(14) { left: 52%; animation-delay: .25s; } .bingo-party i:nth-child(15) { left: 56%; animation-delay: .75s; } .bingo-party i:nth-child(16) { left: 60%; animation-delay: .1s; } .bingo-party i:nth-child(17) { left: 64%; animation-delay: .55s; } .bingo-party i:nth-child(18) { left: 68%; animation-delay: .3s; } .bingo-party i:nth-child(19) { left: 72%; animation-delay: .85s; } .bingo-party i:nth-child(20) { left: 76%; animation-delay: .2s; } .bingo-party i:nth-child(21) { left: 80%; animation-delay: .65s; } .bingo-party i:nth-child(22) { left: 84%; animation-delay: .4s; } .bingo-party i:nth-child(23) { left: 88%; animation-delay: .95s; } .bingo-party i:nth-child(24) { left: 92%; animation-delay: .15s; } .bingo-party i:nth-child(25) { left: 96%; animation-delay: .5s; } @keyframes party-life { 0%, 95% { visibility: visible; } 100% { visibility: hidden; } } @keyframes party-pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 15% { transform: scale(1.1) rotate(4deg); opacity: 1; } 25%, 80% { transform: scale(1) rotate(-3deg); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } @keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: .6; } } @media (prefers-reduced-motion: reduce) { .bingo-party--show i { display: none; } .bingo-party--show strong { animation: party-fade 3s ease forwards; } } @keyframes party-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } /* Einlass-Quiz */ .quiz__intro { margin-top: 1rem; color: var(--muted); } .quiz__quote { margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 5px solid var(--accent); border-radius: .5rem; background: rgb(var(--fx) / .063); font-size: 1.35rem; font-weight: 700; line-height: 1.3; } .quiz__form { display: grid; gap: .5rem; } .quiz__opt { padding: .8rem 1rem; border-radius: .8rem; border: 2px solid var(--line); background: rgb(var(--fx) / .051); color: inherit; font: inherit; font-weight: 650; text-align: left; cursor: pointer; } .quiz__opt:hover { border-color: var(--accent); } .quiz__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .quiz__tries { margin-top: 1rem; font-size: .9rem; color: var(--muted); } .quiz .error { margin-top: 1rem; } .quiz__skip { margin-top: 1.2rem; } /* Kinosaal, bevor es dort etwas gibt */ .saal-soon { text-align: center; padding: 2.5rem 1rem; } .saal-soon__icon { font-size: 3rem; margin: 0; } .saal-soon__text { max-width: 32rem; margin: .8rem auto 0; font-size: 1.15rem; color: var(--muted); white-space: pre-line; } /* Film-Quiz im Kinosaal (views/filmquiz.js, filmquiz.js) */ .fquiz { max-width: 46rem; } .fquiz__play { margin-top: .6rem; } .fquiz__rules { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); } .fquiz__rules li { margin: .15rem 0; } .fquiz__target { margin: 0 0 1rem; } .fquiz__thin { margin-bottom: 1rem; } .fquiz__form .join__name { margin-bottom: 1rem; } .fquiz__bar { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: 1rem; font-size: .92rem; } .fquiz__bar > span { padding: .25rem .7rem; border-radius: 99rem; box-shadow: inset 0 0 0 1px var(--line); } .fquiz__bar strong { color: var(--accent-ink); } .fquiz__time { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.6rem; text-align: center; } .fquiz__time--low { background: var(--danger); color: #fff; box-shadow: none !important; } .fquiz__ok { margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: .7rem; background: color-mix(in srgb, var(--mint) 28%, transparent); } .fquiz__reveal { color: var(--muted); } .fquiz__record { color: var(--accent-ink); } .fquiz__q { font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.3; margin: 0 0 .8rem; text-wrap: balance; } .fquiz__quote { margin: 0 0 1rem; padding: .7rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 .7rem .7rem 0; background: rgb(var(--fx) / .051); font-style: italic; } .fquiz__img { display: block; width: 100%; max-height: 22rem; object-fit: cover; margin: 0 0 1rem; border-radius: .9rem; background: rgb(var(--fx) / .063); } .fquiz__opts { display: grid; gap: .55rem; } .fquiz__opt { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem 1rem; border-radius: .8rem; border: 2px solid var(--line); background: rgb(var(--fx) / .051); color: inherit; font: inherit; font-weight: 650; text-align: left; cursor: pointer; transition: border-color .15s ease, transform .12s ease; } .fquiz__opt:hover { border-color: var(--accent); } .fquiz__opt:active { transform: scale(.98); } .fquiz__opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .fquiz__opt:disabled { cursor: default; opacity: .6; } .fquiz__opt--picked:disabled { opacity: 1; border-color: var(--accent); } .fquiz__letter { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgb(var(--fx) / .09); font-size: .85rem; font-weight: 800; } .fquiz__over { text-align: center; padding: 1rem 0 .5rem; } .fquiz__big { margin: 0; font-size: clamp(3.5rem, 14vw, 6rem); font-weight: 900; line-height: 1; color: var(--accent-ink); } .fquiz__biglabel { margin: .2rem 0 1rem; color: var(--muted); } .fquiz__verdict { font-weight: 700; font-size: 1.1rem; } .fquiz__over .fquiz__form { margin-top: 1.2rem; } .fquiz__geek { display: inline-block; margin-left: .2rem; padding: .05rem .55rem; border-radius: 99rem; background: var(--accent); color: var(--ink); font-size: .8rem; font-weight: 750; white-space: nowrap; } .fquiz__hall { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(var(--fx) / .063); } .fquiz__hall h3 { font-size: 1.1rem; margin-bottom: .4rem; } .fquiz__hall ol { margin: 0; padding-left: 1.6rem; } .fquiz__hall li { margin: .25rem 0; } .fquiz__hall li > strong { float: right; margin-left: 1rem; font-variant-numeric: tabular-nums; } .fquiz__hall li::marker { color: var(--muted); } .fquiz__hall .empty { color: var(--muted); } .fquiz__first { font-weight: 700; } /* Doom (views/doom.js, doom.js) */ .doom-teaser p { max-width: 40rem; } .doom-page { background: #000; } .doom { width: min(100% - 2rem, 64rem); margin: 0 auto; padding: 1rem 0 2rem; color: var(--fg); } .doom__bar { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; } .doom__title { margin: 0; font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase; color: #e33; } .doom__bar .btn { margin-left: auto; } .doom__back { color: var(--muted); } .doom__stage { position: relative; background: #111; border-radius: .6rem; overflow: hidden; } .doom__canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; background: #000; } .doom__canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .doom__canvas:fullscreen { width: 100vw; height: 100vh; object-fit: contain; } .doom__status { position: absolute; inset: auto 0 0; margin: 0; padding: .7rem 1rem; background: #000c; color: #fff; text-align: center; } .doom__hint { margin: .8rem 0 0; color: var(--muted); } .doom__help { margin-top: 1rem; } .doom__help summary { cursor: pointer; font-weight: 700; } .doom__help dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0 0; } .doom__help dt { font-weight: 700; } .doom__help dd { margin: 0; color: var(--muted); } .doom__credits { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); } /* Fernseher-Seite (views/tv.js, tv.js): eine Ansicht im ganzen Bild */ .tvshell { margin: 0; background: #000; overflow: hidden; } .tvshell__main { position: fixed; inset: 0; } .tvshell__frame { width: 100%; height: 100%; border: 0; display: block; background: #000; } .tvshell__start { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); padding: .8rem 1.4rem; border: 0; border-radius: 99rem; background: var(--accent); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 .4rem 1.5rem #0008; } .tvshell .app-version { display: none; } .quiz__skip .btn { width: 100%; } /* Abspann (Geheimcode) */ .credits { position: fixed; inset: 0; z-index: 60; background: #000; color: #f3eee2; overflow: hidden; display: flex; justify-content: center; } .credits[hidden] { display: none; } .credits__roll { width: min(32rem, 90%); text-align: center; padding-top: 55vh; } .credits--run .credits__roll { animation: credits-roll 38s linear forwards; } .credits dl { margin: 0; } .credits dt { margin-top: 2.6rem; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: #a8a29a; } .credits dd { margin: .35rem 0 0; font-size: 1.35rem; font-weight: 600; } .credits .credits__title { margin-top: 0; font-size: clamp(2.2rem, 8vw, 3.5rem); letter-spacing: -.02em; text-transform: none; color: var(--accent); font-weight: 800; } .credits .credits__end { margin-top: 5rem; font-size: 2.5rem; letter-spacing: .1em; color: #fff; } .credits__close { position: absolute; right: 1rem; bottom: 1rem; color: #fff; } @keyframes credits-roll { from { transform: translateY(0); } to { transform: translateY(-100%); } } @media (prefers-reduced-motion: reduce) { .credits { overflow-y: auto; } .credits__roll { padding-top: 3rem; } .credits--run .credits__roll { animation: none; } } /* Überschrift mit verstecktem Abspann: schnelles Klicken markiert keinen Text */ .secret-title { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } /* Kino-Wrapped */ .wr-cta { margin-top: 2rem; } .wr { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; } .wr__card { position: relative; padding: 1.3rem 1.3rem 1.4rem; border-radius: 1.4rem; color: var(--ink); display: flex; flex-direction: column; gap: .5rem; min-height: 11rem; } .wr__label { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .wr__big { font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.05; font-weight: 850; letter-spacing: -.03em; overflow-wrap: anywhere; } .wr__card p { font-size: .98rem; line-height: 1.4; } .wr__poster { display: block; width: 4.5rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .5rem; margin-bottom: .6rem; box-shadow: 0 .5rem 1rem -.4rem #0008; } .wr--a { background: var(--accent); } .wr--b { background: #5fe0c8; } .wr--c { background: #ffd1e8; } .wr--d { background: #ff8a7a; } .wr--e { background: #c9b8ff; } .wr--f { background: #b8f08a; } .wr--g { background: var(--paper); } .wr--h { background: #9fd8ff; } .wr__sharebar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } /* ------------------------------------------------------------ Archiv */ .best, .arch { display: grid; gap: .8rem; list-style: none; padding: 0; } .best li { display: grid; grid-template-columns: 2rem 3.2rem 1fr; gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: .9rem; background: var(--surface); } .best__rank { font-size: 1.4rem; font-weight: 800; color: var(--accent-ink); text-align: center; } .best img, .best .arch__blank, .arch__films img, .arch__films .arch__blank { width: 3.2rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .4rem; background: rgb(var(--fx) / .078); display: block; } .best h3 span { color: var(--muted); font-weight: 500; } .best p { color: var(--muted); font-size: .9rem; } .arch__item { padding: 1.1rem 1.2rem 1.2rem; border-radius: 1rem; background: var(--surface); } .arch__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .7rem; } .arch__head p { color: var(--muted); } .arch__films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .8rem; list-style: none; padding: 0; } .arch__films li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .6rem; align-items: center; padding: .6rem; border-radius: .8rem; background: rgb(var(--fx) / .039); } .arch__films small { color: var(--muted); } .arch__head h3 { font-size: 1.15rem; } .arch__date { color: var(--accent, #ffcf4a); font-weight: 700; font-size: .9rem; margin: 0 0 .15rem; } /* Abende im Rückblick: Thema und Datum als Zwischenüberschrift */ .arch__head .arch__title { font-size: clamp(1.4rem, 4vw, 1.75rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; } .arch__item .arch__date { color: var(--accent-ink); font-size: 1.05rem; margin-bottom: .25rem; } .arch__item .arch__head { margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); } /* Fun Facts: Schalter über der Liste, Fakten je Abend unter den Filmen */ .ff-switch { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; font-weight: 650; cursor: pointer; user-select: none; } .ff-switch__box { position: absolute; opacity: 0; width: 1px; height: 1px; } .ff-switch__track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 99rem; background: rgb(var(--fx) / .149); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s; } .ff-switch__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .15s; } .ff-switch__box:checked + .ff-switch__track { background: var(--accent); } .ff-switch__box:checked + .ff-switch__track::after { transform: translateX(1.1rem); background: var(--ink); } .ff-switch__box:focus-visible + .ff-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; } .arch__facts { display: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .7rem; margin: 1rem 0 0; } .arch-sec:has(.ff-switch__box:checked) .arch__facts { display: grid; } .arch__facts .fact { display: grid; align-content: start; gap: .45rem; padding: .85rem 1rem; border-radius: 1rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .arch__facts dt { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); } .fact__icon { font-size: 1.15rem; letter-spacing: 0; line-height: 1; } .arch__facts dd { margin: 0; display: grid; gap: .2rem; } .fact__value { font-size: 1.3rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } .fact__detail { color: var(--muted); font-size: .9rem; line-height: 1.35; } .fact__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .fact__lines li { display: grid; gap: .05rem; } .fact__lines strong { font-size: 1.1rem; font-weight: 800; line-height: 1.2; } .fact__lines small { color: var(--muted); font-size: .88rem; line-height: 1.3; } .arch__films img, .arch__films .arch__blank { width: 4.2rem; } .arch__films .film__cat { display: table; margin: 0 0 .3rem; } .arch__link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; } .arch__link:hover, .arch__link:focus-visible { text-decoration-color: currentColor; } .arch__rate { font-size: .85em; font-weight: 600; } .arch__member-hint { opacity: .85; } .arch__there-form { margin: .5rem 0 0; } .arch__there { font: inherit; font-size: .88rem; font-weight: 700; padding: .35rem .85rem; border-radius: 99rem; border: 1px solid var(--line); background: rgb(var(--fx) / .051); color: inherit; cursor: pointer; } .arch__there:hover { background: rgb(var(--fx) / .122); } .arch__there--on { background: var(--accent); color: var(--ink); border-color: transparent; } p.arch__there { display: inline-block; margin: .5rem 0 0; cursor: default; } .arch__open { border-radius: .8rem; box-shadow: inset 0 0 0 2px var(--accent); padding: .4rem; } .arch__open .arch__rate { color: var(--accent-ink); } #unbewertet { scroll-margin-top: 6rem; } .arch__ns { display: inline; margin: 0; } .arch__ns .link { font-size: .85em; } .arch__seen-no { font-size: .85em; font-weight: 600; color: var(--muted); } /* ------------------------------------------------------------ Vorraum (Seite geschlossen) */ .lobby-lead { font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: rgb(var(--fx) / .851); margin-top: 1rem; max-width: 34ch; } /* Abstand Kopf → „Save the Date“ wie zwischen den Abschnitten (nur deren margin-top) */ .lobby .hero { padding-bottom: 0; } .lobby-date__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; font-size: clamp(1.4rem, 4vw, 2rem); margin: .5rem 0 1rem; } .lobby-date__when span { color: var(--accent-ink); font-weight: 700; } .lobby-date__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; } .lobby-date__btns small, .lobby-count, .lobby-hint { color: var(--muted); } .lobby-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 1rem 0 1.25rem; } .lobby-stat { display: grid; gap: .2rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .lobby-stat strong { font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1; font-weight: 850; letter-spacing: -.03em; color: var(--accent-ink); } .lobby-stat span { color: rgb(var(--fx) / .78); font-size: .95rem; } .lobby-last { list-style: none; padding: 0; } .lobby-vote { margin-top: .6rem; padding: .7rem 1rem; border-radius: .8rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } /* ------------------------------------------------------------ Stammgäste: Profil */ .profil__intro, .profil__hint { opacity: .85; } .profil__hint { font-size: .9em; } .profil__tabs { display: flex; gap: .5rem; margin: 1rem 0; } .profil__tabs a { padding: .45rem 1rem; border-radius: 99rem; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; } .profil__tabs a[aria-current="page"] { background: var(--accent); color: var(--ink); box-shadow: none; } /* Reiter im Profil der Stammgäste: brechen auf schmalen Bildschirmen um */ .profil__nav { flex-wrap: wrap; } .profil__nav a { padding: .4rem .85rem; } .profil__form { display: grid; gap: .8rem; max-width: 24rem; } .profil__form label { display: grid; gap: .3rem; } .profil__form input { font: inherit; padding: .6rem .7rem; border-radius: .6rem; border: 1px solid var(--line); background: transparent; color: inherit; } .profil__form--row { max-width: none; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); align-items: end; gap: .8rem; } /* Schmale Bildschirme: Felder untereinander (z. B. „Alte PIN“ und „Neue PIN“), sonst überlappen sie */ .profil__form input:not([type=checkbox]):not([type=radio]) { width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 600px) { .profil__form--row { grid-template-columns: 1fr; } } .profil__head { display: flex; align-items: center; gap: 1rem; } .profil__head h2 { margin: 0; } .profil__head p { margin: .2rem 0 0; opacity: .8; } .profil__avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; font-size: 2rem; flex: none; } .profil__avatar--initial { display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 800; } .profil__pic { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .profil__pic form { margin: 0; } .profil__pic p { flex-basis: 100%; margin: 0; } .profil__rated { list-style: none; padding: 0; display: grid; gap: .45rem; } .profil__rated small { opacity: .7; } .profil__logout { margin-top: 2rem; } .profil h3 { margin: 1.8rem 0 .7rem; } /* Steckbrief und Visitenkarten */ .profil__opt { font-size: .75em; font-weight: 600; color: var(--muted); margin-left: .4rem; } .profil__links { margin: 1rem 0 0; } .profil__about { max-width: 34rem; } .profil__about select { font: inherit; padding: .6rem .7rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--field); color: inherit; } .profil__label { font-size: .95em; } .profil__film { display: grid; gap: .5rem; } .profil__film-pick { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 2.5rem; } .profil__film-pick img { width: 2.6rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .3rem; } .profil__film-pick em, .profil__film-pick small { color: var(--muted); } .profil__film-search { display: flex; gap: .5rem; flex-wrap: wrap; } .profil__film-search input { flex: 1 1 14rem; font: inherit; padding: .6rem .7rem; border-radius: .6rem; border: 1px solid var(--line); background: transparent; color: inherit; } .profil__film-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .profil__film-results button[data-film-i] { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; font: inherit; color: inherit; background: rgb(var(--fx) / .051); border: 0; border-radius: .7rem; padding: .4rem .6rem; cursor: pointer; } .profil__film-results button[data-film-i]:hover { background: rgb(var(--fx) / .122); } .profil__film-results img, .profil__noposter { width: 2.4rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .3rem; display: inline-grid; place-items: center; background: rgb(var(--fx) / .078); } .mcards { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; } .mcard { display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem; border-radius: 1.3rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .mcard--me { box-shadow: inset 0 0 0 2px var(--accent); } .mcard__head { display: flex; align-items: center; gap: .9rem; } .mcard__head h3 { margin: 0; font-size: 1.35rem; } .mcard__head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; } .mcard__avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; flex: none; font-size: 1.6rem; } .mcard__avatar--initial { display: inline-grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 850; } .mcard__film { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: .9rem; background: rgb(var(--fx) / .059); color: inherit; text-decoration: none; } .mcard__film:hover { background: rgb(var(--fx) / .11); } .mcard__film img, .mcard__noposter { width: 3.4rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .4rem; flex: none; display: grid; place-items: center; background: rgb(var(--fx) / .078); font-size: 1.4rem; } .mcard__film small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .mcard__film span span { color: var(--muted); } .mcard__facts { display: grid; gap: .45rem; margin: 0; } .mcard__facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; } .mcard__facts dt { color: var(--muted); font-size: .9rem; } .mcard__facts dd { margin: 0; } .mcard__quote { margin: 0; padding: .6rem .9rem; border-left: 3px solid var(--accent); font-style: italic; color: rgb(var(--fx) / .851); } .mcard__stats { margin: 0; margin-top: auto; color: var(--muted); font-size: .9rem; } .mcard__edit { font-size: .9rem; font-weight: 600; } .mcard__empty { margin: 0; color: var(--muted); font-style: italic; } .mcard__count { margin: 0 0 0 auto; display: grid; justify-items: center; text-align: center; line-height: 1.1; } .mcard__count strong { font-size: 2rem; font-weight: 850; color: var(--accent-ink); } .mcard__count span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .mcard__badges { text-decoration: none; color: inherit; } /* Abzeichen */ .badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem .25rem .35rem; border-radius: 99rem; font-size: .82rem; font-weight: 700; background: rgb(var(--fx) / .078); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); } .badge__icon { font-size: 1.05rem; } .badge__lvl { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .8; } .badge--l1 { background: #cd7f3233; box-shadow: inset 0 0 0 1px #cd7f3299; } .badge--l2 { background: #c0c0c033; box-shadow: inset 0 0 0 1px #d9d9d9aa; } .badge--l3 { background: #ffc94d33; box-shadow: inset 0 0 0 1px #ffc94dbb; } .badge-set__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .badge-set__list label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .badge-set__list small { flex-basis: 100%; padding-left: 1.8rem; color: var(--muted); } .badge-set--locked { opacity: .55; } .bcards { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; } .bcard { display: grid; gap: .9rem; padding: 1.2rem; border-radius: 1.2rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .bcard--got { box-shadow: inset 0 0 0 2px var(--accent); } .bcard__head { display: flex; align-items: center; gap: .8rem; } .bcard__icon { font-size: 2.2rem; } .bcard__head h3 { margin: 0; } .bcard__head p { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; } .bcard__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .bcard__step { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border-radius: .7rem; } .bcard__step span { color: rgb(var(--fx) / .78); font-size: .9rem; } .bcard__step em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--accent-ink); } .bcard__step:not(.bcard__step--got) { opacity: .65; } .bcard__me { margin: 0; font-size: .9rem; color: var(--muted); } /* Wunschliste */ .wish__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .5rem; max-width: 44rem; } .wish__list li { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem; border-radius: .8rem; background: rgb(var(--fx) / .051); } .wish__list img { width: 2.6rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .3rem; } .wish__list span { flex: 1; } .wish__list form { margin: 0; } .wish__item--mine { box-shadow: inset 0 0 0 1px var(--accent); } .wish__text { display: grid; gap: .15rem; } .wish__text small { color: var(--muted); } .wish__text a { color: inherit; } .wish__state { justify-self: start; font-size: .75rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99rem; background: rgb(var(--fx) / .122); } .wish__state--prog { background: var(--accent); color: #1d1626; } .wish__also { font: inherit; font-size: .85rem; font-weight: 700; padding: .4rem .8rem; border-radius: 99rem; border: 1px solid var(--line); background: rgb(var(--fx) / .051); color: inherit; cursor: pointer; white-space: nowrap; } .wish__also:hover { background: rgb(var(--fx) / .122); } @media (max-width: 30rem) { .wish__list li { flex-wrap: wrap; } .wish__list form { flex-basis: 100%; } } .wish__h { margin: 1.8rem 0 .2rem; } /* ------------------------------------------------------------ Fenster auf der Seite (Name wählen/wechseln, Hinweise) */ .kdlg { border: 0; padding: 0; border-radius: 1.2rem; width: min(28rem, calc(100vw - 2rem)); background: var(--pop); color: var(--fg); box-shadow: 0 24px 70px #000c, inset 0 0 0 1px var(--line); } .kdlg::backdrop { background: var(--shade); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .kdlg--fallback { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 100; } .kdlg__box { display: grid; gap: 1rem; padding: 1.4rem 1.3rem 1.2rem; } .kdlg__title { margin: 0; font-size: 1.35rem; line-height: 1.3; } .kdlg__body { display: grid; gap: .7rem; color: rgb(var(--fx) / .851); line-height: 1.5; } .kdlg__body p { margin: 0; } .kdlg__name, .flash .kdlg__name { display: inline-block; padding: 0 .45em; border-radius: .4em; background: var(--accent); color: var(--ink); font-weight: 800; line-height: 1.45; } .kdlg__switch { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.15rem; } .kdlg__switch span[aria-hidden] { color: var(--accent-ink); font-weight: 800; } .kdlg__field { display: grid; gap: .3rem; } .kdlg__field select, .kdlg__field input { font: inherit; padding: .65rem .75rem; border-radius: .6rem; border: 1px solid rgb(var(--fx) / .2); background: var(--field); color: var(--fg); } .kdlg__hint { font-size: .9rem; color: var(--muted); } .kdlg__hint a { color: inherit; } .kdlg__btns { display: flex; flex-wrap: wrap; gap: .5rem; } .kdlg--warn .kdlg__box { box-shadow: inset 4px 0 0 #ff9b6b; border-radius: 1.2rem; } /* Fenster direkt aus der Seite (ohne Skript) */ .kdlg--page { z-index: 101; } .kdlg--page .btn { text-decoration: none; } .kdlg-shade { position: fixed; inset: 0; z-index: 100; background: var(--shade); } /* ------------------------------------------------------------ Erinnerungen (Push) */ /* Anmeldeseite: Leuchtlinie wie bei den Überschriften über den Erinnerungen (nur sichtbar, wenn der Block da ist). Die Linie schließt die Abstimmung ab (Abstand wie unter einer Überschrift), danach der volle Abstand zwischen zwei Blöcken. */ .push-dlg__panel h2 { margin: 0; font-size: 1.35rem; line-height: 1.3; } .me-bell { padding: .45rem .6rem; } .push-card__list { margin: .4rem 0 .8rem; padding-left: 0; list-style: none; display: grid; gap: .2rem; } .push-card__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; } .push-card__note { margin: .6rem 0 0; font-weight: 600; } /* ------------------------------------------------------------ Live-Update (refresh.js): Hinweis beim Profilwechsel, „Es gibt Neuigkeiten“ */ .phase-notice { border: 0; padding: 0; border-radius: 1.4rem; width: min(26rem, calc(100vw - 2rem)); background: var(--pop-glass, #1b1626b8); color: var(--fg); text-align: center; box-shadow: 0 24px 70px #000c, inset 0 0 0 1px rgb(var(--fx) / .18); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); animation: notice-in .3s ease-out; } .phase-notice::backdrop { background: var(--notice-shade, #07050c80); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .phase-notice[open]:not(:modal) { position: fixed; inset: 0; margin: auto; height: fit-content; z-index: 100; } .phase-notice__box { display: grid; gap: .8rem; padding: 1.6rem 1.4rem 1.3rem; } .phase-notice__title { margin: 0; font-size: 1.4rem; line-height: 1.3; } .phase-notice p { margin: 0; color: rgb(var(--fx) / .851); line-height: 1.5; } .phase-notice__ok { justify-self: center; min-width: 9rem; margin-top: .3rem; } @keyframes notice-in { from { opacity: 0; transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { .phase-notice { animation: none; } } /* ------------------------------------------------------------ Sitzplan (Saal und Lounge): Anmeldung, Fernseher (/sitzplan?tv), Verwaltung Saal: Raster aus vier Spalten (Plätze links, zwei Tischreihen, Plätze rechts), jeder Tisch geht über zwei Zeilen. Ohne Zeilenabstand stoßen die Tische aneinander wie eine lange Tafel; den Abstand der Plätze macht ihr Rand. */ .seatplan { max-width: 34rem; margin: 1rem auto 0; display: grid; gap: 2.4rem; } .seatplan__screen { padding: .35rem; border-radius: .5rem .5rem 1.4rem 1.4rem / .5rem .5rem .7rem .7rem; background: linear-gradient(#dfe5ff, #9fb0ff); color: #1d1626; box-shadow: 0 .5rem 1.6rem #9fb0ff59; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; } .seatplan__saal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(2.2rem, .45fr) minmax(2.2rem, .45fr) minmax(0, 1fr); } .seatplan__table { grid-row: span 2; display: grid; place-items: center; background: linear-gradient(90deg, #9a6a42, #865a36); box-shadow: inset 0 0 0 1px #5e3b2080; color: #f3e3d0cc; font-size: .7rem; font-weight: 800; } .seatplan__saal > .seatplan__table:nth-child(6n + 3) { border-left: 1px solid #5e3b20; } .seatplan__saal > .seatplan__table:nth-child(2) { border-radius: .5rem 0 0 0; } .seatplan__saal > .seatplan__table:nth-child(3) { border-radius: 0 .5rem 0 0; } .seatplan__saal > .seatplan__table:nth-child(20) { border-radius: 0 0 0 .5rem; } .seatplan__saal > .seatplan__table:nth-child(21) { border-radius: 0 0 .5rem 0; } .seat { display: flex; align-items: center; gap: .4rem; min-width: 0; min-height: 2.6rem; margin: .15rem 0; padding: .3rem .5rem; border: 1px solid rgb(var(--fx) / .18); border-radius: .6rem; background: rgb(var(--fx) / .06); color: inherit; font: inherit; font-size: .85rem; line-height: 1.2; text-align: left; } .seat--l { margin-right: .4rem; } .seat--r { margin-left: .4rem; flex-direction: row-reverse; text-align: right; } button.seat { cursor: pointer; } button.seat:hover, button.seat:focus-visible { background: rgb(var(--fx) / .14); border-color: var(--accent); } .seat__no { flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: rgb(var(--fx) / .12); font-size: .75rem; font-weight: 800; } .seat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seat--free .seat__name, .seat--blocked .seat__name { color: var(--muted); } .seat--taken { background: rgb(var(--fx) / .14); font-weight: 650; } .seat--mine { background: var(--accent); border-color: var(--accent); color: #1d1626; font-weight: 800; } .seat--mine .seat__no { background: #1d162626; } .seat--blocked { opacity: .5; border-style: dashed; } /* Saal: Plätze als Stühle an der Tafel. Der Stuhl (mit der Nummer) steht direkt am Tisch, die Lehne (dicker Rand) liegt außen, der Name steht daneben. Links: Name, Stuhl, Tisch; rechts: Tisch, Stuhl, Name. */ .seatplan__saal > .seat { gap: .45rem; min-height: 0; margin: .25rem 0; padding: 0; border: 0; border-radius: 0; background: none; } .seatplan__saal > .seat--l { flex-direction: row-reverse; text-align: right; margin-right: .3rem; } .seatplan__saal > .seat--r { flex-direction: row; text-align: left; margin-left: .3rem; } .seatplan__saal .seat__no { width: 2.4rem; height: 2.4rem; border: 1px solid rgb(var(--fx) / .22); background: rgb(var(--fx) / .08); box-shadow: 0 .15rem 0 rgb(var(--fx) / .1); } .seatplan__saal .seat--l .seat__no { border-left: .5rem solid rgb(var(--fx) / .3); border-radius: .6rem .35rem .35rem .6rem; } .seatplan__saal .seat--r .seat__no { border-right: .5rem solid rgb(var(--fx) / .3); border-radius: .35rem .6rem .6rem .35rem; } .seatplan__saal > .seat--taken { background: none; } .seatplan__saal .seat--taken .seat__no { background: rgb(var(--fx) / .22); } .seatplan__saal > .seat--mine { background: none; color: inherit; } .seatplan__saal .seat--mine .seat__no { border-color: var(--accent); background: var(--accent); color: #1d1626; } .seatplan__saal .seat--mine.seat--l .seat__no { border-left-color: #d29a22; } .seatplan__saal .seat--mine.seat--r .seat__no { border-right-color: #d29a22; } .seatplan__saal .seat--blocked .seat__no { border-style: dashed; } .seatplan__saal .seat--blocked.seat--l .seat__no { border-left-style: solid; } .seatplan__saal .seat--blocked.seat--r .seat__no { border-right-style: solid; } .seatplan__saal > button.seat:hover, .seatplan__saal > button.seat:focus-visible { background: none; } .seatplan__saal > button.seat:hover .seat__no, .seatplan__saal > button.seat:focus-visible .seat__no { background: rgb(var(--fx) / .18); border-top-color: var(--accent); border-bottom-color: var(--accent); } /* Lounge: Stuhl, Sofa mit drei Plätzen (Lehne hinten, also unten im Plan), Stuhl */ .seatplan__lounge { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr) minmax(0, 1fr); align-items: start; gap: 1.3rem; padding: 0 1rem; } .seatplan__lounge .seat { flex-direction: column; justify-content: center; gap: .25rem; margin: 0; padding: .45rem .3rem; text-align: center; } .seatplan__lounge > .seat { position: relative; isolation: isolate; aspect-ratio: 1; min-height: 0; gap: .1rem; padding: .2rem; border-color: transparent; background: none; } /* Stühle schräg (45°) zum Bildschirm, etwas weiter vorn als das Sofa: ein leichtes U. Gedreht wird nur die Fläche dahinter (::before), Nummer und Name bleiben gerade. Die Lehne (dunkler Rand) liegt hinten, vom Bildschirm weg. */ .seatplan__lounge > .seat::before { content: ''; position: absolute; inset: 9%; z-index: -1; border: 1px solid rgb(var(--fx) / .18); border-radius: .7rem .7rem .4rem .4rem; background: rgb(var(--fx) / .06); box-shadow: inset 0 -.35rem 0 rgb(var(--fx) / .16); transform: rotate(45deg); } .seatplan__lounge > .seat:last-child::before { transform: rotate(-45deg); } .seatplan__lounge > .seat--taken::before { background: rgb(var(--fx) / .14); } .seatplan__lounge > .seat--mine::before { background: var(--accent); border-color: var(--accent); } .seatplan__lounge > .seat--blocked::before { border-style: dashed; } .seatplan__lounge > button.seat:hover, .seatplan__lounge > button.seat:focus-visible { background: none; border-color: transparent; } .seatplan__lounge > button.seat:hover::before, .seatplan__lounge > button.seat:focus-visible::before { background: rgb(var(--fx) / .14); border-color: var(--accent); } .seatplan__lounge > .seatplan__sofa { margin-top: 1.6rem; } .seatplan__lounge .seat__name { max-width: 100%; } .seatplan__sofa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .4rem .4rem 1rem; border-radius: .9rem .9rem 1.3rem 1.3rem; background: linear-gradient(#6b55c9, #4b3a96); box-shadow: inset 0 -.6rem 0 #00000040, inset .45rem 0 0 #00000026, inset -.45rem 0 0 #00000026; } .seatplan__sofa .seat { min-height: 3.2rem; border-color: #ffffff40; background: #ffffff1f; color: #fff; } .seatplan__sofa .seat--free .seat__name, .seatplan__sofa .seat--blocked .seat__name { color: #ffffffb3; } .seatplan__sofa .seat--mine { background: var(--accent); border-color: var(--accent); color: #1d1626; } .seats__room { font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap; } .seats__fun { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; } .seats__hint, .seats__me { margin: .7rem 0 0; } .seats__me .link { margin-left: .4rem; } /* Fernseher: groß, mit allen Namen */ .seats--tv { margin: 0; } .seats__tvhead { margin: 0 0 1vh; text-align: center; font-size: 2.6vh; font-weight: 800; } .seats__tvhead span { display: block; margin-top: .4vh; font-size: 2vh; font-weight: 500; color: var(--muted); } .screen main.wrap:has(.seats--tv) { width: calc(100% - 6vw); max-width: none; padding-top: 2vh; } .seatplan--tv { max-width: min(92vw, 120vh); gap: 6vh; margin-top: 1vh; } .seatplan--tv .seatplan__screen { padding: .8vh; font-size: 1.8vh; } .seatplan--tv .seat { min-height: 7.5vh; margin-block: .5vh; padding: .6vh 1.2vh; font-size: 2.7vh; gap: 1vh; } .seatplan--tv .seat__no { width: 4.2vh; height: 4.2vh; font-size: 2vh; } .seatplan--tv .seatplan__table { font-size: 1.8vh; } .seatplan--tv .seatplan__saal > .seat { min-height: 0; margin-block: .6vh; padding: 0; gap: 1.2vh; } .seatplan--tv .seatplan__saal .seat__no { width: 7vh; height: 7vh; font-size: 2.4vh; } .seatplan--tv .seatplan__saal .seat--l .seat__no { border-left-width: 1.4vh; } .seatplan--tv .seatplan__saal .seat--r .seat__no { border-right-width: 1.4vh; } .seatplan--tv.seatplan--lounge { max-width: min(92vw, 130vh); gap: 12vh; margin-top: 12vh; } .seatplan--tv .seatplan__lounge { gap: 4vh; padding: 0 3vh; } .seatplan--tv .seatplan__lounge > .seatplan__sofa { margin-top: 6vh; } .seatplan--tv .seatplan__sofa .seat { min-height: 16vh; } .seatplan--tv .seatplan__lounge > .seat { min-height: 0; width: 80%; justify-self: center; } /* ============================================================ 4. Eigene Seiten */ /* ------------------------------------------------------------ Einlass (Anmeldung der Gäste und der Verwaltung) */ .login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1.25rem; background: radial-gradient(70% 55% at 15% 0%, color-mix(in srgb, var(--glow-a) 30%, #0000), #0000), radial-gradient(60% 50% at 100% 10%, color-mix(in srgb, var(--glow-b) 18%, #0000), #0000), var(--night); } .login-box { width: min(100%, 24rem); } .login-title { font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: anywhere; } .login-form { display: grid; gap: .6rem; margin-top: 2.25rem; } .login-form label { font-weight: 600; font-size: .95rem; color: rgb(var(--fx) / .78); } .login-form input { min-height: 3.25rem; padding: .5rem 1rem; border-radius: .9rem; border: 1px solid rgb(var(--fx) / .2); background: rgb(var(--fx) / .071); font-size: 1.15rem; } .login-form .btn { margin-top: .6rem; min-height: 3.25rem; border-radius: .9rem; } .error { color: var(--warn-ink); font-weight: 600; } .hint { margin-top: 1.5rem; color: var(--muted); } /* ------------------------------------------------------------ Seite nicht gefunden */ .nf { text-align: center; } .nf__code { font-size: clamp(4.5rem, 18vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, var(--accent), #ff6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .25rem; } .nf__title { font-size: 1.4rem; margin-bottom: .6rem; } .nf__path code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: .2rem .5rem; border-radius: .4rem; background: rgb(var(--fx) / .078); font-size: .9rem; } .nf__quip { margin: 1rem 0 1.4rem; font-size: 1.1rem; line-height: 1.5; } .nf__hint { margin: -.6rem 0 1.2rem; color: var(--muted); } .nf__hint a { color: var(--accent-ink); font-weight: 700; } /* ------------------------------------------------------------ Vorprogramm */ .preshow { min-height: 100vh; min-height: 100dvh; background: radial-gradient(60% 45% at 10% 0%, color-mix(in srgb, var(--glow-a) 28%, #0000), #0000), radial-gradient(50% 40% at 100% 0%, color-mix(in srgb, var(--glow-b) 16%, #0000), #0000), var(--night); } .preshow__main { width: min(100% - 2.5rem, 100rem); margin-inline: auto; padding: 1.25rem 0 2rem; } .preshow__main:fullscreen { width: 100%; padding: 1.25rem; background: var(--night); overflow: auto; } .preshow__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 1.25rem; } .preshow__head h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; } .preshow__now { color: var(--accent-ink); font-weight: 600; } .preshow__tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; } .preshow__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 1.5rem; align-items: start; } .preshow__stage { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-radius: 1.25rem; background: #000; box-shadow: 0 0 0 1px var(--line), 0 2rem 4rem -2rem #000; } .preshow__stage iframe, .preshow__stage video { width: 100%; height: 100%; border: 0; display: block; background: #000; } .preshow__side h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .6rem; } .preshow__side h2:not(:first-child) { margin-top: 1.5rem; } .preshow__list { display: grid; gap: .3rem; } .preshow__list button { width: 100%; display: flex; gap: .75rem; align-items: baseline; padding: .6rem .8rem; border: 0; border-radius: .7rem; background: rgb(var(--fx) / .059); color: inherit; text-align: left; cursor: pointer; } .preshow__list button:hover { background: rgb(var(--fx) / .122); } .preshow__list button span { flex: none; min-width: 1.2rem; color: var(--muted); font-variant-numeric: tabular-nums; } .preshow__list button[aria-current] { background: var(--accent); color: var(--ink); font-weight: 650; } .preshow__list button[aria-current] span { color: inherit; } .preshow__spotify { width: 100%; height: 352px; border: 0; border-radius: .75rem; display: block; } @media (max-width: 56rem) { .preshow__body { grid-template-columns: 1fr; } .preshow__tools { margin-left: 0; } } /* Musik im Vorprogramm */ .preshow__ytmusic { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .75rem; display: block; background: #000; } .preshow__audio { width: 100%; display: block; } .preshow__hint { margin-top: .6rem; font-size: .9rem; color: var(--muted); } /* ------------------------------------------------------------ Testseite Fire TV (/firetv-test) */ .tv { max-width: 72rem; padding-block: 2rem 4rem; } .tv h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; } .tv__intro { max-width: 52rem; color: var(--muted); margin-bottom: 1.25rem; font-size: 1.1rem; } .tv__title { display: grid; gap: .35rem; max-width: 28rem; margin-bottom: 1.5rem; font-weight: 600; } .tv__title input { min-width: 0; width: 100%; font-size: 1.1rem; padding: .7rem .9rem; border-radius: .7rem; border: 2px solid rgb(var(--fx) / .2); background: rgb(var(--fx) / .063); color: inherit; } .tv__flash { padding: .8rem 1rem; border-radius: .8rem; background: #b3203a33; margin-bottom: 1rem; font-weight: 600; } .tv__svc { margin-bottom: 1.75rem; } .tv__svc h2 { font-size: 1.4rem; margin-bottom: .6rem; } .tv__row { display: grid; gap: .8rem; } .tv__variant { display: grid; grid-template-columns: minmax(13rem, 18rem) 1fr; gap: .6rem 1rem; align-items: center; padding: .8rem; border-radius: 1rem; background: var(--surface); } .tv__go { display: block; padding: .9rem 1.1rem; border-radius: .8rem; background: var(--accent); color: #1d1626; font-weight: 700; font-size: 1.1rem; text-align: center; text-decoration: none; } .tv__outcomes { display: flex; flex-wrap: wrap; gap: .4rem; } .tv__out { padding: .6rem .8rem; border-radius: 999px; border: 2px solid rgb(var(--fx) / .2); background: none; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; } .tv__out--on { background: #2bb673; border-color: #2bb673; color: #0f0c18; font-weight: 700; } .tv__go:focus-visible, .tv__out:focus-visible, .tv__title input:focus-visible, .tv__diag summary:focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 8px rgb(var(--fx) / .251); } .tv__go:focus, .tv__out:focus { outline: 4px solid #fff; outline-offset: 3px; } .tv__diag { margin-top: 2rem; color: var(--muted); font-size: .9rem; word-break: break-word; } .tv__saved { margin-top: 1rem; color: var(--muted); } @media (max-width: 40rem) { .tv__variant { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ QR-Codes zum Ausdrucken (Verwaltung) */ .qr-print { background: #fff; color: #000; } .qr-print a { color: #1d1626; } .qr-sheet { width: min(100% - 2rem, 60rem); margin: 1.5rem auto 3rem; } .qr-sheet h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: .4rem; } .qr-sheet__hint { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.5rem; padding: .6rem .9rem; border-radius: .6rem; background: #f1eef6; font-size: .95rem; } .qr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1.5rem; } .qr-card { padding: 1rem; border: 1.5px dashed #1d162680; border-radius: .6rem; text-align: center; break-inside: avoid; } .qr-card h2 { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; } .qr-card .qr { width: min(100%, 12rem); margin: .4rem auto 0; } .qr-card__sum { font-size: 1.5rem; font-weight: 750; font-variant-numeric: tabular-nums; } .qr-card__items { font-size: .85rem; color: #4a4258; } @media print { .qr-sheet__hint { display: none; } .qr-sheet { width: auto; margin: 0; } .qr-cards { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ 5. Gestaltungen (in der Verwaltung wählbar) */ .theme-ozean { --night: #071a24; --surface: #0f2733; --accent: #5fe0c8; --accent-hover: #8cecd9; --paper: #e3f0ec; --glow-a: #1c8fb8; --glow-b: #5fe0c8; --muted: #9db7bf; } .theme-samt { --night: #1c0a10; --surface: #2a1219; --accent: #f2c14e; --accent-hover: #f7d27a; --paper: #f4e3cf; --glow-a: #c2203f; --glow-b: #f2c14e; --muted: #c2a6ad; } .theme-neon { --night: #0d0a1f; --surface: #181433; --accent: #ff7ad9; --accent-hover: #ff9fe4; --paper: #efe6ff; --glow-a: #7a3dff; --glow-b: #ff5fd2; --muted: #aaa3cc; } .theme-sommer { --night: #131b33; --surface: #1c2747; --accent: #ffb347; --accent-hover: #ffc670; --paper: #fff0d6; --glow-a: #ff7a59; --glow-b: #ffb347; --muted: #a9b3cf; } .theme-halloween { --night: #150d1c; --surface: #22152b; --accent: #ff8a1f; --accent-hover: #ffa552; --paper: #efe2c6; --glow-a: #ff6a00; --glow-b: #7d33e0; --muted: #b3a3bf; } .theme-weihnachten { --night: #0d1f17; --surface: #163024; --accent: #f3c969; --accent-hover: #f7d88f; --paper: #f6ecdf; --glow-a: #c2203f; --glow-b: #2f9f63; --muted: #a3bfb0; } .theme-silvester { --night: #0a0d1c; --surface: #141a30; --accent: #e9d08a; --accent-hover: #f1dfab; --paper: #f3efe6; --glow-a: #3d5bd9; --glow-b: #e9d08a; --muted: #a5abc4; } .theme-ostern { --night: #1b1a2e; --surface: #262542; --accent: #ffe27a; --accent-hover: #ffeba0; --paper: #fdf3e3; --glow-a: #ff8fc4; --glow-b: #8fe08e; --muted: #b0aecd; } /* Anlass-Gestaltungen zeigen ihre Grafiken etwas kräftiger */ .theme-halloween .deco img, .theme-weihnachten .deco img, .theme-silvester .deco img, .theme-ostern .deco img, .theme-sommer .deco img { opacity: .14; } /* Helle Ansicht der Gästeseiten (nicht am Fernseher): gewählt im Kopf (data-theme am , theme.js) oder, ohne Wahl, wie das Gerät eingestellt ist. Die Farben der Gestaltung bleiben, Hintergrund und Schrift drehen sich um. */ :root[data-theme="light"] body.lightable { --night: color-mix(in srgb, var(--glow-a) 6%, #f7f5fa); --surface: color-mix(in srgb, var(--glow-a) 4%, #fff); --line: #1d16261f; --muted: #5d556c; --fg: #1d1626; --fx: 29 22 38; --pop: #fff; --field: #fff; --glass: #ffffffc7; --shade: #1d162659; --warn-ink: #b3203a; --accent-ink: color-mix(in oklab, var(--accent) 50%, #000); --deco-filter: invert(1) opacity(.6); --pop-glass: #ffffffe6; --notice-shade: #1d162640; --glow-op: .45; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body.lightable { --night: color-mix(in srgb, var(--glow-a) 6%, #f7f5fa); --surface: color-mix(in srgb, var(--glow-a) 4%, #fff); --line: #1d16261f; --muted: #5d556c; --fg: #1d1626; --fx: 29 22 38; --pop: #fff; --field: #fff; --glass: #ffffffc7; --shade: #1d162659; --warn-ink: #b3203a; --accent-ink: color-mix(in oklab, var(--accent) 50%, #000); --deco-filter: invert(1) opacity(.6); --pop-glass: #ffffffe6; --notice-shade: #1d162640; --glow-op: .45; } } /* ============================================================ 6. Verwaltung */ /* ------------------------------------------------------------ Rahmen: Leiste, Unterseiten, Bereiche, Felder */ /* Farben der Verwaltung; dunkel (Standard, umschaltbar in der Leiste) setzt sie unten bei .admin--dark neu */ .admin { --a-bg: #f4f2f8; --a-card: #fff; --a-tile: #f6f4fa; --a-field: #fff; --a-ink: 29 22 38; /* Linien und Flächen als rgb(var(--a-ink) / Deckkraft) */ --a-rule: #e0a10e4d; /* Trennlinien, gelb wie die Dreiecke */ --a-fg: #1d1626; --a-soft: #4a4258; --a-muted: #6a6278; --a-faint: #8d869a; --a-link: #5b3df5; background: var(--a-bg); color: var(--a-fg); } .admin a { color: var(--a-link); } .admin-bar { background: #0f0c18; color: #fff; } .admin-bar__in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; padding: .65rem 0; } .admin-bar__title { font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; } /* Menü wie auf den Gästeseiten (.tabs, gelb = aktuell); scrollt mit, die Unterseiten sind eigene Reiter */ .admin-menu { background: #0f0c18; color: #fff; box-shadow: 0 1px 0 #ffffff14; } .admin-menu__in { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding: .55rem 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; } .admin-menu__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; } .admin-menu__row > .admin-nav { min-width: 0; max-width: 100%; } .admin-menu .tabs { margin: 0; z-index: auto; } .admin-nav a { font-size: .95rem; padding: .45rem 1rem; } .admin .tabs a { color: #ffffffd9; } .admin .tabs a[aria-current="page"] { color: var(--ink); } html:has(> body.admin) { scroll-padding-top: 1rem; } /* Handy: eine Zeile zum Wischen statt vier Zeilen, damit die feste Leiste klein bleibt */ @media (max-width: 48rem) { .admin-menu__in { width: 100%; padding-inline: .6rem; } .admin-nav.tabs { display: flex; flex-wrap: nowrap; width: 100%; max-width: none; overflow-x: auto; border-radius: 99rem; scrollbar-width: none; } .admin-nav.tabs::-webkit-scrollbar { display: none; } .admin-nav.tabs a { flex: 0 0 auto; white-space: nowrap; padding: .45rem .9rem; } .admin-nav.tabs > :last-child:nth-child(odd) { grid-column: auto; } .admin-subnav.tabs--sub { width: 100%; } } .admin-bar form { display: flex; } /* oben rechts: Teilnehmerseite, Abmelden und Hell/Dunkel als Symbole */ .admin-bar__tools { margin-left: auto; display: flex; align-items: center; gap: .4rem; } @media (max-width: 30rem) { .admin-bar__in { flex-wrap: nowrap; gap: .5rem; } .admin-bar__tools { gap: .3rem; } .admin-bar__tools a.btn--quiet { padding-inline: .6rem; font-size: .88rem; } .admin-icon.btn { width: 2.25rem; height: 2.25rem; } } .admin-icon.btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; } .admin-icon svg { display: block; } .admin--dark .admin-icon__moon, .admin:not(.admin--dark) .admin-icon__sun { display: none; } .status { margin-left: auto; font-size: .9rem; color: var(--muted); } .status[data-kind="ok"] { color: #8fe0bd; } .status[data-kind="error"] { color: #ff9eb0; font-weight: 600; } .admin-update { position: sticky; top: .5rem; z-index: 30; width: min(100% - 2.5rem, var(--wrap)); margin: .65rem auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; border-radius: 14px; background: #ffc94d; color: #0f0c18; box-shadow: 0 8px 24px #0006; } .admin-update p { margin: 0; flex: 1 1 18rem; } .admin-update .btn { background: #0f0c18; color: #fff; } .admin-main { padding: 1.75rem 0 5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .panel { background: var(--a-card); border-radius: 1.25rem; padding: clamp(1.1rem, 3vw, 2rem); box-shadow: 0 0 0 1px rgb(var(--a-ink) / .06), 0 1rem 2rem -1.5rem rgb(var(--a-ink) / .25); } .panel > h2 { font-size: 1.5rem; line-height: 1.15; font-weight: 750; letter-spacing: -.025em; margin-bottom: 1.1rem; } .admin .empty, .help { color: var(--a-muted); } .help { font-size: .95rem; max-width: 46rem; margin: .75rem 0 1rem; } .panel > .empty { margin-bottom: 1rem; } .panel[hidden] { display: none; } .admin-subnav:empty { display: none; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1.25rem; align-content: start; } .field { display: grid; gap: .3rem; align-content: start; } .field > span { font-size: .875rem; font-weight: 600; color: var(--a-soft); } .field--wide { grid-column: 1 / -1; } .admin input:not([type="checkbox"]), .admin select, .admin textarea { min-width: 0; width: 100%; min-height: 2.75rem; padding: .45rem .75rem; border: 1px solid rgb(var(--a-ink) / .30); border-radius: .7rem; background: var(--a-field); transition: border-color .15s, box-shadow .15s; } .admin input:not([type="checkbox"]):hover, .admin select:hover, .admin textarea:hover { border-color: rgb(var(--a-ink) / .60); } .admin textarea { resize: vertical; } .admin ::placeholder { color: var(--a-faint); } .report { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: .6rem; background: #fff3c4; font-weight: 600; font-size: .95rem; } .report .link { font-weight: 500; margin-left: .5rem; } .field--wide.check { white-space: normal; } /* Zeilen, Mengen, Preise */ .rows { display: grid; gap: .5rem; margin-bottom: .9rem; } .row { display: grid; grid-template-columns: 1fr 6.5rem 2.75rem; gap: .5rem; align-items: center; max-width: 34rem; } .row--item { grid-template-columns: 3.6rem 1fr 6rem 2.75rem; max-width: none; } .row--item:has(.disc-chip) { grid-template-columns: 3.6rem 1fr 6rem 4.2rem 2.75rem; } .row--item:has(.disc-chip) .icon { grid-column: 5; grid-row: 1; } .row--item .row__net { grid-row: 2; } .disc-chip { height: 2.2rem; padding: 0 .5rem; border-radius: 999px; border: 1.5px solid var(--mint); background: #2bb6731a; color: inherit; font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; cursor: pointer; } .disc-chip--off { border-style: dashed; border-color: #6a627888; background: none; color: var(--a-muted); text-decoration: line-through; } .row__net { grid-column: 2 / -1; margin-top: -.25rem; text-align: right; font-size: .82rem; color: var(--a-muted); font-variant-numeric: tabular-nums; } .row__net s { opacity: .7; } .row__net strong { color: var(--a-fg); } .row__net--off { font-style: italic; } .price, .qty { text-align: right; font-variant-numeric: tabular-nums; } .icon { width: 2.75rem; height: 2.75rem; border: 0; border-radius: .7rem; background: none; font-size: 1.5rem; line-height: 1; color: var(--a-muted); cursor: pointer; } .icon:hover { background: #b3203a1a; color: var(--danger); } .film-link__row { display: flex; gap: .5rem; align-items: center; } .film-link__row input { flex: 1; min-width: 0; } /* ------------------------------------------------------------ Übersicht: Mission Control, Profile, Automatik, Ruhe im Saal */ .mc__group { margin: 1.6rem 0 .7rem; font-size: .8rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); } .mc__group:first-of-type { margin-top: .5rem; } .mc .mc__group { margin: 1.6rem 0 .8rem; padding-top: 1.1rem; border-top: 1px solid var(--a-rule); font-size: .85rem; font-weight: 750; letter-spacing: .12em; color: var(--a-muted); } .mc .mc__head + .mc__group, .mc > h2 + .mc__group { margin-top: 1.2rem; padding-top: 0; border-top: 0; } /* Ebenen: 1 = Mission Control (mit Linie wie auf den Gästeseiten), 2 = .mc__head je Block, 3 = .mc__group */ .mc > h2 { display: flex; align-items: center; gap: .8rem; } /* Dreieck mit runden Ecken (Maske), auf die Überschrift zeigend */ .mc > h2::before { content: ""; flex: none; width: 1.05rem; height: 1.15rem; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M4 4L16 11L4 18Z' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M4 4L16 11L4 18Z' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; background: #e0a10e; } .mc > h2::after { content: ""; flex: 1; height: 2px; min-width: 2rem; border-radius: 2px; background: linear-gradient(90deg, #e0a10e, transparent); } /* Blöcke der Ebene 2 mit Trennlinie statt Kasten; der erste steht direkt unter der Überschrift */ .mc__block { margin: 2.2rem 0 0; padding: 1.8rem 0 0; border-top: 2px solid var(--a-rule); } .mc > h2 + .mc__block, .mc > .mc__block:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .mc > h2.mc__more { margin-top: 2.6rem; } /* zweite Überschrift der Ebene 1 auf derselben Unterseite */ .mc__head { margin: 0 0 1rem; font-size: 1.65rem; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; color: var(--a-fg); } @media (max-width: 40rem) { .mc__head { font-size: 1.3rem; } } .mc-info { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0 .7rem; font-size: .88rem; line-height: 1.4; color: var(--a-soft); } .mc-info__icon { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .05rem; border-radius: 50%; border: 1.5px solid currentColor; font: italic 800 .72rem/1 Georgia, serif; } .mc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .75rem; } .mc-tile { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem .8rem; border-radius: 1rem; background: var(--a-tile); box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .10); transition: background .2s, box-shadow .2s; } .mc-tile--on { background: #eefaf2; box-shadow: inset 0 0 0 1.5px #2f9e5c66; } .mc-switch { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 700; line-height: 1.25; } .mc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .mc-switch__track { flex: none; position: relative; width: 2.6rem; height: 1.5rem; border-radius: 99rem; background: #c9c2d6; transition: background .2s; } .mc-switch__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0004; transition: transform .2s; } .mc-switch input:checked + .mc-switch__track { background: #2f9e5c; } .mc-switch input:checked + .mc-switch__track::after { transform: translateX(1.1rem); } .mc-switch input:focus-visible + .mc-switch__track { outline: 3px solid #7c5cff; outline-offset: 2px; } .mc-tile__state { margin: 0; font-size: .88rem; color: var(--a-soft); } .mc-tile__warn { margin: 0; font-size: .85rem; color: #9a3b00; font-weight: 600; } .mc-tile__warn::before { content: "⚠ "; } .mc-tile__go { margin-top: auto; align-self: flex-start; font-size: .85rem; font-weight: 700; } .mc-tile__go::after { content: " →"; } .mc__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .6rem; } .mc-link { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border-radius: .85rem; background: var(--a-tile); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .10); } .mc-link:hover { box-shadow: inset 0 0 0 1.5px #7c5cff; } .mc-link strong::after { content: " →"; } .mc-link span { font-size: .85rem; color: var(--a-muted); } .admin [id^="x-"]:target { animation: mc-flash 1.8s ease-out; border-radius: .6rem; } @keyframes mc-flash { 0%, 30% { background: #ffe9a8; box-shadow: 0 0 0 .4rem #ffe9a8; } 100% { box-shadow: 0 0 0 .4rem transparent; } } .phase { margin-bottom: .6rem; } /* Profile bearbeiten */ .prof-edit { margin: 0 0 1rem; } .prof-edit__all > summary { cursor: pointer; font-weight: 700; color: var(--a-link); } .prof-edit__all[open] > summary { margin-bottom: .5rem; } .prof { margin: .6rem 0; border-radius: .85rem; background: var(--a-tile); box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .10); } .prof > summary { cursor: pointer; padding: .7rem 1rem; } .prof__body { padding: 0 1rem .8rem; } .prof__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; } .prof__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .45rem 1rem; margin: .8rem 0 .4rem; } .prof__notice { display: grid; gap: .5rem; margin: .8rem 0 .2rem; padding-top: .7rem; border-top: 1px solid rgb(var(--a-ink) / .1); } .prof__sw { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; } .prof__sw select { width: auto; min-width: 8.5rem; } .phase__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; } .phase__btn { display: grid; gap: .25rem; text-align: left; font: inherit; padding: .9rem 1rem; border-radius: 1rem; border: 2px solid rgb(var(--a-ink) / .12); background: var(--a-card); cursor: pointer; color: inherit; } .phase__btn:hover { border-color: rgb(var(--a-ink) / .25); } .phase__btn small { color: var(--a-muted); line-height: 1.35; } .phase__btn--on { border-color: #1d1626; background: #ffc94d; } .phase__btn--on small { color: #1d1626; } .phase__nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #1d1626; color: #fff; font-weight: 800; font-size: .9rem; } /* Automatik */ .auto { margin-top: 1rem; } .auto__switch { margin: .25rem 0 .5rem; } .auto__plan { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .4rem; } .auto__plan li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .55rem .8rem; border-radius: .6rem; background: rgba(127,127,127,.08); } .auto__plan li span { opacity: .8; } .auto__plan li.auto__now { background: rgba(255, 201, 77, .18); outline: 2px solid rgba(255, 201, 77, .7); } .auto__state { margin: .5rem 0; } .auto__overdue { display: grid; gap: .4rem; justify-items: start; margin: 0 0 1rem; padding: .85rem 1rem; border-radius: .75rem; background: rgba(217,72,72,.12); border: 2px solid rgba(217,72,72,.55); } .auto__overdue--soft { display: block; background: rgba(232,162,58,.14); border-color: rgba(232,162,58,.6); } /* Ruhe im Saal */ .shh { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .6rem; } .shh__p { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .35rem .3rem .8rem; border-radius: 99rem; background: var(--a-tile); box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .10); } .shh__name { font-weight: 650; } .shh__btn { border: 0; border-radius: 99rem; padding: .35rem .8rem; min-height: 0; font: inherit; font-size: .88rem; font-weight: 750; background: #1d1626; color: #fff; cursor: pointer; } .shh__btn:hover { background: #5b3df5; } .shh__btn--on { animation: shh-wiggle .5s ease-in-out 3; background: #5b3df5; } @keyframes shh-wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } } .admin .shh__p--free input { box-shadow: none; border-radius: 0; width: 9rem; border: 0; background: transparent; padding: .2rem 0; min-height: 0; font: inherit; } .admin .shh__p--free input:focus { outline: none; } .shh__vol { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--a-soft); margin-left: .3rem; } .admin .shh__vol input { width: 8rem; min-height: 0; padding: 0; box-shadow: none; accent-color: #5b3df5; } .shh__vol output { min-width: 3em; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ Abend & Filme */ .film-list, .order-list { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; } .film-edit { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--a-rule); } .film-edit__poster { display: grid; gap: .5rem; align-content: start; justify-items: start; } .film-edit__poster img, .film-edit__blank { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .75rem; background: #ece9f2; } .film-edit__blank { display: grid; place-items: center; color: var(--a-muted); font-size: .9rem; } @media (max-width: 34rem) { .film-edit { grid-template-columns: 1fr; } .film-edit__poster img, .film-edit__blank { width: 9.5rem; } } .row--trailer { grid-template-columns: minmax(8rem, 14rem) 1fr 7.5rem 2.75rem; max-width: none; } .kind { font-size: .875rem; color: var(--a-muted); } .kind[data-bad] { color: var(--danger); font-weight: 600; } .preshow-extra { margin: 1.25rem 0 .75rem; } @media (max-width: 40rem) { .row--trailer { grid-template-columns: 1fr 2.75rem; } .row--trailer input[type="url"], .row--trailer .kind { grid-column: 1; } } .music-pick { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; border: 0; } .music-pick legend { padding: 0; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: var(--a-soft); } .admin .music-pick input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; accent-color: #5b3df5; } .preshow-extra + .help { margin-top: .4rem; } .lookup { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .lookup__hint { font-size: .9rem; color: var(--a-muted); } .lookup__hint[data-bad] { color: var(--danger); font-weight: 600; } .lookup__list { flex-basis: 100%; display: grid; gap: .4rem; } .lookup__list button:not(.link) { width: 100%; display: grid; gap: .15rem; padding: .6rem .8rem; text-align: left; cursor: pointer; border: 1px solid rgb(var(--a-ink) / .30); border-radius: .7rem; background: var(--a-card); } .lookup__list button:not(.link):hover { border-color: #5b3df5; background: #f4f1ff; } .lookup__list span { font-size: .9rem; color: var(--a-soft); } .lookup__sum { color: var(--a-fg) !important; } .lookup-pick { margin-bottom: 1.25rem; } .lookup-key { display: grid; gap: .35rem; width: 100%; max-width: 34rem; margin-top: .5rem; } .lookup-key input { width: 100%; } .admin .music-pick .lookup-key input { width: 100%; height: auto; min-height: 2.75rem; padding: .45rem .75rem; accent-color: auto; } /* Auswahl der Gestaltung */ .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin: 0; padding: 0; border: 0; } .themes legend { padding: 0; margin-bottom: .4rem; font-size: .875rem; font-weight: 600; color: var(--a-soft); } .theme-pick { position: relative; display: block; cursor: pointer; } .theme-pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .theme-pick__card { display: grid; gap: .5rem; padding: .7rem .8rem; border-radius: .8rem; background: var(--night); color: #fff; font-weight: 600; font-size: .95rem; box-shadow: 0 0 0 1px rgb(var(--a-ink) / .15); } .theme-pick__dots { display: flex; gap: .3rem; } .theme-pick__dots i { width: 1.1rem; height: 1.1rem; border-radius: 50%; } .theme-pick__dots i:nth-child(1) { background: var(--accent); } .theme-pick__dots i:nth-child(2) { background: var(--glow-a); } .theme-pick__dots i:nth-child(3) { background: var(--glow-b); } .theme-pick__dots i:nth-child(4) { background: var(--paper); } .theme-pick input:checked + .theme-pick__card { box-shadow: 0 0 0 3px var(--a-card), 0 0 0 6px #5b3df5; } .theme-pick input:focus-visible + .theme-pick__card { outline: 3px solid #5b3df5; outline-offset: 6px; } .admin .rating-live .ks { margin-inline: .2rem; } /* ------------------------------------------------------------ Gäste & Abstimmung */ .cand { display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto auto 2.75rem; gap: .5rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--a-rule); } .cand__info { grid-column: 1 / -1; } .cand__votes { white-space: nowrap; font-weight: 600; color: var(--a-soft); } .cand__seen { grid-column: 1 / -1; } .seen { color: #8a5a00; font-size: .9rem; font-weight: 600; } .rating-live { color: var(--a-soft); font-size: .9rem; } .rsvp-list { display: grid; gap: .35rem; margin: .5rem 0 1rem; } .rsvp-list div { display: grid; grid-template-columns: 10rem 1fr; gap: .5rem; } .rsvp-list dt { font-weight: 700; } .rsvp-list dd { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin: 0; } .rsvp-name { display: inline-flex; align-items: center; gap: .15rem; padding: 0 .1rem 0 .55rem; border-radius: 999px; background: rgb(var(--a-ink) / .08); } .rsvp-name .icon { width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0; font-size: 1rem; } .who-ordered div { grid-template-columns: 12rem 1fr; padding: .35rem .6rem; border-radius: .6rem; background: var(--a-tile); } .who-ordered--done dt { color: #1f7a4d; } .who-ordered--missing dt { color: #b3203a; } .join-count { display: inline-block; min-width: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: rgb(var(--a-ink) / .10); text-align: center; font-size: .85rem; } .warn { color: var(--danger); } .status-pick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .status-pick span { font-weight: 600; margin-right: .3rem; } .remind { display: grid; gap: .45rem; list-style: none; padding: 0; margin-bottom: .6rem; } .remind li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: center; padding: .5rem .7rem; border-radius: .7rem; background: var(--a-tile); } @media (max-width: 40rem) { .cand { grid-template-columns: minmax(0, 1fr) 4.5rem 2.75rem; } .cand__votes { grid-column: 1; } .cand [data-act=cand-win] { grid-column: 2 / -1; } .cand .icon { grid-column: 3; grid-row: 1; } .cand__info { grid-column: 1 / -1; } .rsvp-list div { grid-template-columns: 1fr; gap: 0; } } .lookup-pick .check, #mitmachen .check, #extras .check, #vorschlaege .check { white-space: normal; align-items: flex-start; } .lookup-pick .check input, #mitmachen .check input, #extras .check input, #vorschlaege .check input { flex: none; margin-top: .15rem; } #mitmachen .check, #extras .check { margin-bottom: .6rem; } .cand--img { grid-template-columns: 3.5rem minmax(0, 1fr) 5rem auto auto 2.75rem; } .cand__poster { grid-row: span 3; width: 3.5rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .4rem; align-self: start; } .cand__lookup { grid-column: 1 / -1; } .cand--img .cand__lookup, .cand--img .cand__info, .cand--img .cand__seen { grid-column: 2 / -1; } @media (max-width: 40rem) { .cand--img { grid-template-columns: 3rem minmax(0, 1fr) 4.5rem 2.75rem; } .cand--img .cand__poster { grid-row: span 2; width: 3rem; } .cand--img .cand__votes { grid-column: 2; } .cand--img [data-act=cand-win] { grid-column: 3 / -1; } .cand--img .icon { grid-column: 4; grid-row: 1; } } .cand-cat { margin: 1rem 0 1.4rem; padding: .9rem; border-radius: 1rem; background: var(--a-tile); } .cand-cat__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-bottom: .7rem; } .cand-cat__head h4 { font-size: 1.05rem; } .mc .cand-cat { margin: 0; padding: 0; background: none; } /* unter einer eigenen Überschrift, ohne Kasten */ /* Filme der Abstimmung: etwas mehr Luft, Linie auch über dem ersten */ .mc .cand-cat .rows { gap: .9rem; } .mc .cand-cat .cand { padding-bottom: .9rem; } .mc .cand-cat .rows > .cand:first-child { padding-top: .9rem; border-top: 1px solid var(--a-rule); } /* Stimmen dafür und dagegen: einstellige Zahl, schmale Auswahl */ .admin .vote-count { grid-template-columns: repeat(2, max-content); column-gap: 2.5rem; } .admin .vote-count select { width: auto; min-width: 4.5rem; justify-self: start; align-self: start; } .cand-cat__head span { color: var(--a-soft); font-weight: 600; flex: 1 1 12rem; } .ballots { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; font-size: .92rem; } .ballots th, .ballots td { padding: .45rem .5rem; border-bottom: 1px solid var(--a-rule); text-align: left; vertical-align: top; } .ballots th { font-weight: 700; color: var(--a-soft); } /* Stimmen ändern: je Kategorie zwei Auswahlen dafür (+), eine dagegen (−) */ .ballot-pick { display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; } .ballot-pick > span { flex: none; width: 1.3rem; text-align: center; font-weight: 800; } .ballot-pick--plus > span { color: #1f8a5c; } .ballot-pick--minus > span { color: #c0304a; } .ballot-pick select { flex: 1; min-width: 0; padding-block: .3rem; font-size: .9rem; } .ballots td:last-child { white-space: nowrap; } .ballot-add select { width: auto; max-width: 100%; } @media (max-width: 40rem) { .ballots, .ballots tbody, .ballots tr, .ballots td { display: block; } .ballots tr { padding-bottom: .5rem; border-bottom: 1px solid var(--a-rule); } .ballots td { border: 0; } .ballots td:not(:first-child):not(:last-child)::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .8rem; color: var(--a-muted); } .ballots thead { display: none; } .ballots td:first-child { font-weight: 700; border: 0; padding-bottom: 0; } } /* Teilnehmer verwalten */ .gl-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; } .gl-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 10rem minmax(0, 1fr) auto; gap: .5rem .8rem; align-items: center; padding: .5rem .7rem; border-radius: .8rem; background: var(--a-tile); } .gl-row__info { color: var(--a-muted); } @media (max-width: 40rem) { .gl-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .gl-row__info { grid-column: 1 / -1; } .gl-row .link { justify-self: start; } } .gl-dev { grid-column: 1 / -1; } .gl-dev summary { cursor: pointer; font-size: .88rem; font-weight: 650; color: var(--a-soft); } .gl-dev ul { list-style: none; padding: 0; margin: .4rem 0 .1rem; display: grid; gap: .3rem; } .gl-dev li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; padding: .35rem .6rem; border-radius: .6rem; background: var(--a-card); font-size: .9rem; } .gl-dev small { color: var(--a-muted); } .gl-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; } .gl-avatar--initial { display: inline-grid; place-items: center; background: var(--accent); color: #1d1626; font-weight: 800; } .wish-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .wish-admin li { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem; align-items: center; padding: .6rem .8rem; border-radius: .8rem; background: rgb(var(--a-ink) / .04); } .wish-admin img, .wish-admin__noposter { width: 2.8rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .3rem; grid-row: span 2; display: grid; place-items: center; background: rgb(var(--a-ink) / .08); } .wish-admin__count { margin-left: .4rem; font-size: .8rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99rem; background: #ffc94d; color: #1d1626; } .wish-admin small { color: var(--a-muted); } .wish-admin__acts { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .wish-admin__state { margin-left: .4rem; font-size: .8rem; font-weight: 800; padding: .1rem .5rem; border-radius: 99rem; background: #ece7f8; color: #4a3d78; } .wish-admin__state--prog { background: #c9f2d6; color: #14532d; } .admin--dark .wish-admin__state { background: #2e2745; color: #d8ccff; } .admin--dark .wish-admin__state--prog { background: #1f4a30; color: #c9f2d6; } /* ------------------------------------------------------------ Filmvorschläge von TMDB */ .sg-genres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; border: 0; padding: 0; } .sg-genres legend { font-weight: 650; margin-bottom: .4rem; } .sg-genre { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 99rem; background: #f1eef7; cursor: pointer; font-weight: 600; font-size: .95rem; } .sg-genre small { font-weight: 500; color: var(--a-muted); } .sg-genre--rated { background: #ece4ff; } .sg-genre:has(input:checked) { background: #5b3df5; color: #fff; } .sg-genre:has(input:checked) small { color: #e4dcff; } .admin .sg-genre input { width: 1rem; height: 1rem; min-height: 0; padding: 0; accent-color: #fff; } .sg-limits { max-width: 32rem; } .sg-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; } .sg { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; padding: .8rem; border-radius: 1rem; background: var(--a-tile); } .sg__poster { width: 4.5rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .5rem; background: #e3deec; display: block; } .sg__title { font-size: 1.05rem; } .sg__meta { font-size: .88rem; color: var(--a-muted); margin-top: .15rem; } .sg__text { font-size: .93rem; margin-top: .4rem; } .sg__why { font-size: .88rem; margin-top: .4rem; color: #3d2a9e; font-weight: 600; } .sg__taken { margin-top: .5rem; font-size: .9rem; color: #1f6f54; font-weight: 650; } .sg__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .6rem; } .sg__link { font-size: .9rem; } @media (max-width: 30rem) { .sg { grid-template-columns: 3.4rem minmax(0, 1fr); } .sg__poster { width: 3.4rem; } } /* Streaming-Abos in den Vorschlägen */ .sg-prov { border: 0; padding: 0; margin: 1rem 0; } .sg-prov legend { font-weight: 650; margin-bottom: .4rem; } .admin .sg-prov__q { width: 100%; max-width: 26rem; margin-bottom: .5rem; } .sg-provider img { width: 1.4rem; height: 1.4rem; border-radius: .3rem; object-fit: cover; } .sg__prov { margin-top: .4rem; font-size: .9rem; font-weight: 650; } .sg__prov--abo { color: #1f6f54; } .sg__prov--extra { color: #a04a00; } .sg__prov--none { color: var(--a-muted); font-weight: 500; } .admin .pill--extra { background: #ffe1c2; color: #8a3d00; } .credit-admin { margin-top: .8rem; font-size: .85rem; color: var(--a-muted); } /* Jahr und Schlagwörter */ .sg-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .8rem 1.5rem; margin: .4rem 0 .8rem; } .sg-filter { border: 0; padding: 0; margin: 0; min-width: 0; } .sg-filter legend { font-weight: 650; margin-bottom: .4rem; } .sg-year { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; } .sg-year label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; } .admin .sg-year input { width: 6.5rem; } .sg-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .2rem 0 .5rem; } .sg-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 99rem; background: #f1eef7; border: 0; font: inherit; font-size: .9rem; font-weight: 600; color: inherit; cursor: pointer; min-height: 0; } .sg-chip:hover { background: #e6e0f3; } .sg-chip--on { background: #5b3df5; color: #fff; } .sg-chip--on:hover { background: #4a2fe0; } .sg-chip__x { border: 0; background: none; color: inherit; font: inherit; font-size: 1.05rem; line-height: 1; padding: 0 0 0 .15rem; cursor: pointer; min-height: 0; } .sg-filter .arc-search { margin-bottom: .3rem; } #sg-kw .check { white-space: normal; } /* ------------------------------------------------------------ Essen: Bestellungen, Speisekarte, Abholung, Getränke */ .order-edit { background: var(--paper); border-radius: 1rem; padding: 1rem; } .order-edit__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; } .order-edit__name { font-weight: 700; font-size: 1.1rem; } .order-edit__add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; } .order-edit__add select { width: auto; flex: 1 1 14rem; max-width: 22rem; } .order-edit__sum { margin-left: auto; font-variant-numeric: tabular-nums; } .order-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: .75rem; } .order-total { font-variant-numeric: tabular-nums; } @media (max-width: 30rem) { .row--item { grid-template-columns: 3.2rem 1fr 2.75rem; } .row--item .price { grid-column: 2; } .row--item:has(.disc-chip) { grid-template-columns: 3.2rem 1fr auto; } .row--item:has(.disc-chip) .price { grid-row: 2; } .row--item:has(.disc-chip) .icon { grid-column: 3; grid-row: 1; } .row--item .disc-chip { grid-column: 3; grid-row: 2; } .row--item .row__net { grid-row: 3; text-align: left; } } .order-settings { display: grid; gap: 1rem; padding: 1rem; margin-bottom: 1.25rem; border-radius: 1rem; background: var(--a-tile); } .order-settings .music-pick { margin: 0; } .discount { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; } .discount .help { margin: 0; } .discount__pct { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; } .admin .discount__pct input { width: 4.5rem; text-align: right; } .order-edit__head .order-edit__name { flex: 1 1 12rem; width: auto; } /* Zettel, den der Gast selbst über die Bestellseite angelegt hat */ .order-badge { padding: .1rem .5rem; border-radius: 99rem; background: #5b3df5; color: #fff; font-size: .75rem; font-weight: 700; } .order-edit__sum small { display: block; text-align: right; font-size: .8rem; color: var(--a-muted); } .row--adjust { grid-template-columns: 6.5rem 1fr; max-width: none; margin-bottom: .6rem; } /* Bestellliste: „Extras ändern“ unter einer Smiley's-Position */ .row__x { margin: -.15rem 0 .35rem 3.8rem; font-size: .85rem; } .row__x small { color: var(--a-muted, var(--muted)); } /* Fenster „Extras“ in der Verwaltung: Auswahlkästchen so klein wie auf der Bestellseite */ dialog.xo--admin .xo__form .xo__opt { display: flex; align-items: center; gap: .55rem; } dialog.xo--admin .xo__form .xo__opt input[type=radio], dialog.xo--admin .xo__form .xo__opt input[type=checkbox] { flex: none; width: 1.15rem; height: 1.15rem; min-height: 0; margin: 0; padding: 0; } .admin .ext-pick { flex: 1 1 16rem; width: auto; max-width: 28rem; } .subhead { margin: 2rem 0 .75rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -.015em; } .collect { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .collect td { padding: .4rem .5rem; border-bottom: 1px solid var(--a-rule); vertical-align: top; } .collect__qty { width: 3rem; font-weight: 700; } .collect__sum { text-align: right; white-space: nowrap; } .collect__who { display: block; font-size: .8rem; color: var(--a-muted); } .collect tfoot td { border-bottom: 0; } .collect__total td { font-weight: 750; border-top: 2px solid var(--a-fg); } /* Lange Beschriftungen in den Bestell-Einstellungen dürfen auf dem Handy umbrechen. */ .order-settings .check { white-space: normal; align-items: flex-start; } .order-settings .check input { flex: none; margin-top: .1rem; } .order-settings .discount, .order-settings .discount * { min-width: 0; } .order-settings .btn { white-space: normal; } .order-add { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .order-add select { max-width: 14rem; } .order-edit__member { flex: 1 1 12rem; font-size: 1.1rem; display: inline-flex; gap: .5rem; align-items: center; } /* Live-Karte: Abholung */ .pickup-admin__state { padding: .8rem 1rem; border-radius: .8rem; background: rgb(var(--a-ink) / .04); margin: 1rem 0 .5rem; } .pickup-admin__venue { color: var(--a-muted); font-size: .92rem; } .pickup-admin__status { padding: .8rem 1rem; border-radius: .8rem; box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .12); margin-top: 1rem; display: grid; gap: .5rem; } .pickup-admin__status p { margin: 0; } .pickup-admin__status .status-pick small { color: var(--a-muted); } .pickup-admin__near { color: #1b7a3a; } .pickup-admin__far { padding: .8rem 1rem; border-radius: .8rem; background: #fff3e6; box-shadow: inset 4px 0 0 #ff9b6b; margin: .5rem 0; } .pickup-admin__far p { margin: 0 0 .5rem; } /* Getränke, je Flaschengröße */ .drinks-list { display: grid; gap: .5rem; margin: 1rem 0; } .drinks { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: .8rem; background: var(--a-tile); } .drinks__size { min-width: 4.5rem; font-size: 1.25rem; font-weight: 850; } .drinks__ml { margin-left: auto; color: var(--a-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .drinks__total { margin: .4rem 0 .8rem; font-size: 1.1rem; } .drinks-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; } .drinks-sizes > span:first-child { color: var(--a-muted); font-weight: 600; } .drinks-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .2rem .15rem .7rem; border-radius: 99rem; border: 1px solid rgb(var(--a-ink) / .18); font-weight: 700; } .drinks-add { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; } .drinks-sizes .drinks-add input { width: 5rem; min-width: 0; padding: .35rem .5rem; } .drinks__btn { width: 3.2rem; height: 3.2rem; padding: 0; font-size: 1.6rem; font-weight: 800; border-radius: 50%; display: inline-grid; place-items: center; } .drinks__count { display: flex; align-items: baseline; gap: .4rem; } .drinks__count input { width: 5.5rem; font: inherit; font-size: 2rem; font-weight: 850; text-align: center; padding: .2rem; border-radius: .6rem; border: 1px solid rgb(var(--a-ink) / .18); } .drinks__count span { color: var(--a-muted); font-weight: 600; } /* ------------------------------------------------------------ Archiv */ /* Frühere Abende nachtragen */ .arc-search { display: flex; gap: .5rem; margin-top: .6rem; } .arc-search input { flex: 1; min-width: 0; } .arc-films { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; } .arc-films li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 2.75rem; gap: .5rem; align-items: center; padding: .5rem .6rem; border-radius: .7rem; background: var(--a-tile); } .arc-films small { color: var(--a-muted); } @media (max-width: 36rem) { .arc-films li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; } .arc-films li > span { grid-column: 1 / -1; } } .arch-films { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; } .arch-films li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .93rem; } .arch-films li > span { flex: 1 1 12rem; min-width: 0; } .admin .arch-films select { width: auto; min-height: 2.2rem; padding-block: .2rem; font-size: .9rem; } /* Zwei Plätze pro Abend */ .arc-slots .arc-slot { grid-template-columns: 4.2rem minmax(0, 1fr) auto auto 2.75rem; } .arc-slot__no { font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--a-muted); } .arc-slots .arc-slot--empty { grid-template-columns: 4.2rem minmax(0, 1fr); background: none; box-shadow: inset 0 0 0 1.5px rgb(var(--a-ink) / .12); border: 0; } .arc-slot--empty .help { margin: 0; font-size: .9rem; } @media (max-width: 36rem) { .arc-slots .arc-slot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; } .arc-slots .arc-slot > span { grid-column: 1 / -1; } } .arc-slots .arc-slot--base { grid-template-columns: 4.2rem minmax(0, 1fr) auto; background: none; box-shadow: inset 0 0 0 1px rgb(var(--a-ink) / .10); } .arc-slot--base small { color: var(--a-muted); } @media (max-width: 36rem) { .arc-slots .arc-slot--base { grid-template-columns: minmax(0, 1fr) auto; } } /* Archiv → Filmhistorie: je Abend eine Karte mit Plakaten, wie im Rückblick */ .arc-years { margin: .4rem 0 1.4rem; } .arch-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; } .arch-card { padding: 1.1rem 1.2rem 1rem; border-radius: 1rem; background: var(--a-tile); } .arch-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .3rem 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--a-rule); } .arch-card__head p { margin: 0; color: var(--a-muted); font-size: .92rem; } .arch-card__head .arch-card__date { color: #b07c00; font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; } .arch-card__title { margin: 0; font-size: clamp(1.3rem, 3.5vw, 1.6rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; } .arch-card__films { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: .8rem; list-style: none; margin: 0; padding: 0; } .arch-card__films > li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .6rem; border-radius: .8rem; background: rgb(var(--a-ink) / .05); } .arch-card__films > li > div { display: grid; justify-items: start; gap: .2rem; min-width: 0; } .arch-card__films > li.arch-card__none { display: block; background: none; color: var(--a-muted); } .arch-card__films img, .arch-card__blank { width: 4.2rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .4rem; background: rgb(var(--a-ink) / .08); display: block; } .arch-card__films small { color: var(--a-muted); } .arch-card__cat { margin: 0; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: #e0a10e; color: #1d1626; } .arch-card__cat--trash { background: #ff6b6b; } /* „Film nachtragen“ als Fenster über der Seite */ .adlg { border: 0; padding: 0; border-radius: 1rem; width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); background: var(--a-card); color: var(--a-fg); box-shadow: 0 20px 60px #0008; } .adlg::backdrop { background: #0009; } .adlg__body { padding: 1.1rem 1.3rem 1.3rem; } .adlg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; } .adlg__head h2 { margin: 0; font-size: 1.3rem; } .adlg--wide { width: min(64rem, calc(100vw - 2rem)); } /* Jeder Block der Ebene 1 klappt über seine h2 ein (fold.js setzt den Knopf ein): zu ein leeres Dreieck nach rechts, offen gefüllt nach unten. Gedreht und gefüllt wird weich (nur transform und fill-opacity, das schafft jedes Gerät). */ .mc > h2.mc__h::before { display: none; } .mc__tog { display: inline-flex; align-items: center; gap: .8rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; } .mc__tog:focus-visible { outline: 3px solid var(--a-link); outline-offset: 4px; border-radius: .3rem; } .mc__arrow { flex: none; width: 1.05rem; height: 1.15rem; color: #e0a10e; overflow: visible; transform: rotate(0deg); transform-origin: 40% 50%; transition: transform .22s ease; } /* Drehpunkt = Mitte des Dreiecks */ .mc__arrow path { fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 2.6; transition: fill-opacity .22s ease; } .mc__tog[aria-expanded="true"] .mc__arrow { transform: rotate(90deg); } .mc__tog[aria-expanded="true"] .mc__arrow path { fill-opacity: 1; } .mc > .mc__shut { display: none !important; } @media (prefers-reduced-motion: reduce) { .mc__arrow, .mc__arrow path { transition: none; } } /* Knopfleiste zwischen zwei Blöcken: so viel Abstand wie vor der nächsten Überschrift (.mc > h2.mc__more) */ .mc__bar { margin: 2.6rem 0; } .mc > .mc__bar:first-child { margin-top: 0; } .arch-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: .8rem 0 0; } /* Archiv → Statistik */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem; margin: 0 0 1rem; } .stat-tiles > div { display: flex; flex-direction: column-reverse; gap: .2rem; padding: .8rem 1rem; border-radius: .8rem; background: var(--a-tile); } .stat-tiles dd { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .stat-tiles dt { font-size: .85rem; color: var(--a-muted); } .stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; max-width: 34rem; } ol.stat-list { counter-reset: st; } .stat-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--a-rule); } ol.stat-list li span::before { counter-increment: st; content: counter(st) ". "; color: var(--a-muted); } .stat-films { margin: 0; padding-left: 1.4rem; display: grid; gap: .3rem; } .arch-films__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; } .admin input.arch-title { width: auto; min-height: 2.2rem; font: inherit; font-weight: 600; padding: .2rem .45rem; border: 1px solid transparent; border-radius: .4rem; background: transparent; min-width: 12ch; max-width: 100%; field-sizing: content; } .admin .arch-card input.arch-title { min-width: 4ch; padding-inline: .3rem; margin-left: -.3rem; } .admin input.arch-title:hover { border-color: rgb(var(--a-ink) / .19); } .admin input.arch-title:focus { border-color: var(--a-fg); background: var(--a-field); outline: none; } .arch-bottles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .92rem; margin: .4rem 0; } .arch-bottles label { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } .admin .arch-bottles label input { width: 4rem; flex: none; } .arch-bottles small { white-space: nowrap; } .arch-bottles input { width: 4.5rem; font: inherit; padding: .2rem .4rem; border-radius: .4rem; border: 1px solid rgb(var(--a-ink) / .18); } /* ------------------------------------------------------------ Extras */ .bingo-edit { margin: 1rem 0 1.4rem; padding: .9rem; border-radius: 1rem; background: var(--a-tile); display: grid; gap: .6rem; } .bingo-edit__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; } .bingo-edit__count { margin-left: auto; font-size: .9rem; color: var(--a-muted); } .bingo-edit textarea { width: 100%; font-size: .95rem; line-height: 1.45; } .admin .pill { display: inline-block; padding: .1rem .55rem; border-radius: 99rem; background: #ece7f8; color: var(--a-soft); font-size: .8rem; font-weight: 700; } .pause-admin { padding: .6rem .8rem; border-radius: .7rem; background: var(--a-tile); } .pause-admin--on { background: #dff0ff; box-shadow: inset 0 0 0 2px #3fa9f5; } .admin .pause-num input { width: 6rem; } /* ------------------------------------------------------------ Betrieb */ .ops__list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; } .ops__row { display: grid; grid-template-columns: auto minmax(9rem, 14rem) 1fr; gap: .25rem .75rem; align-items: baseline; padding: .5rem .75rem; border-radius: .6rem; background: rgba(127,127,127,.08); } .ops__row span:last-child { opacity: .85; } @media (max-width: 640px) { .ops__row { grid-template-columns: auto 1fr; } .ops__row span:last-child { grid-column: 2; } } .ops__dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 3px rgba(47,179,107,.18); vertical-align: middle; } .ops__dot--warn { background: #e8a23a; box-shadow: 0 0 0 3px rgba(232,162,58,.2); } .ops__dot--bad { background: #d94848; box-shadow: 0 0 0 3px rgba(217,72,72,.2); } .mc__head .ops__dot { margin-left: .5rem; } .ops__hist { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .35rem; } .ops__hist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem .75rem; border-radius: .6rem; background: rgba(127,127,127,.08); } .ops__hist li > span:first-child { display: grid; } .ops__hist small { opacity: .7; } .ops__btns { display: inline-flex; flex-wrap: wrap; gap: .4rem; } .ops__push { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; } .ops__push input { flex: 1 1 16rem; } .ops__upload { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; } .ops__upload input { flex: 1 1 16rem; max-width: 24rem; } .admin input.ops__offpass { display: block; max-width: 30rem; margin: .6rem 0 .2rem; } .ops__setup { margin: .75rem 0; padding: .75rem 1rem; border-radius: .75rem; background: rgba(127,127,127,.08); } .ops__setup summary { cursor: pointer; font-weight: 700; } .ops__form { display: grid; gap: .6rem; margin-top: .75rem; max-width: 34rem; } .ops__form label { display: grid; gap: .2rem; } .ops__form label span { font-weight: 600; } .ops__form small { font-weight: 400; opacity: .7; } /* ------------------------------------------------------------ Dunkle Ansicht (Standard; „Hell“/„Dunkel“ in der Leiste, Cookie kino_admin_theme) */ /* Für den abgedunkelten Saal: Farben wie auf den Gästeseiten, aber ruhig. Die meisten Regeln oben nutzen die Variablen; was eigene Farben hat, steht hier. Neue Regeln mit festen Farben brauchen hier ein Gegenstück. */ .admin--dark { color-scheme: dark; --a-bg: #0f0c18; --a-card: #1a1626; --a-tile: #231d31; --a-field: #120f1c; --a-ink: 245 242 250; --a-rule: #ffc94d38; --a-fg: #f1edf7; --a-soft: #c9c2d6; --a-muted: #a69fb8; --a-faint: #7d7690; --a-link: #ffc94d; --danger: #ff6b81; --mint: #3fbf8a; } .admin--dark :focus-visible { outline-color: #ffc94d; } .admin--dark .panel { box-shadow: 0 0 0 1px rgb(var(--a-ink) / .08); } .admin--dark .btn { background: #2a2338; border-color: rgb(var(--a-ink) / .16); color: var(--a-fg); } .admin--dark .btn:hover { background: #352c46; } .admin--dark .btn--primary { background: var(--accent); border-color: var(--accent); color: #1d1626; } .admin--dark .btn--primary:hover { background: var(--accent-hover); } .admin--dark .btn--on { background: #1f6f54; border-color: #2f9e5c; color: #fff; } .admin--dark .btn--danger { border-color: var(--danger); color: var(--danger); } .admin--dark .btn--danger:hover { background: #b3203a; color: #fff; } .admin--dark .btn--quiet { background: #ffffff14; border-color: #0000; color: #fff; } .admin--dark .report { background: #3a3014; } .admin--dark .disc-chip--off { border-color: #a69fb888; color: var(--a-muted); } /* Übersicht */ .admin--dark .mc > h2::after { background: linear-gradient(90deg, var(--accent), transparent); } .admin--dark .mc > h2::before { background: var(--accent); } .admin--dark .mc__arrow { color: var(--accent); } .admin--dark .arch-card__head .arch-card__date { color: var(--accent); } .admin--dark .arch-card__cat:not(.arch-card__cat--trash) { background: var(--accent); } .admin--dark .mc-tile--on { background: #15291f; box-shadow: inset 0 0 0 1.5px #3fbf8a80; } .admin--dark .mc-switch__track { background: #4a4258; } .admin--dark .mc-tile__warn { color: #ffb06b; } .admin--dark [id^="x-"]:target { animation-name: mc-flash-dark; } @keyframes mc-flash-dark { 0%, 30% { background: #4a3c10; box-shadow: 0 0 0 .4rem #4a3c10; } 100% { box-shadow: 0 0 0 .4rem transparent; } } .admin--dark .phase__btn--on { border-color: var(--accent); color: #1d1626; } .admin--dark .phase__nr { background: var(--a-fg); color: #1d1626; } .admin--dark .phase__btn--on .phase__nr { background: #1d1626; color: #fff; } .admin--dark .shh__btn { background: #3a3150; } /* Abend, Gäste, Vorschläge */ .admin--dark .film-edit__blank, .admin--dark .sg__poster { background: var(--a-tile); } .admin--dark .lookup__list button:not(.link):hover { background: #2a2245; } .admin--dark .seen { color: var(--accent); } .admin--dark .sg-genre, .admin--dark .sg-chip { background: var(--a-tile); } .admin--dark .sg-genre--rated, .admin--dark .sg-chip:hover { background: #2e2550; } .admin--dark .sg-genre:has(input:checked), .admin--dark .sg-chip--on { background: #5b3df5; } .admin--dark .sg__why { color: #b9a8ff; } .admin--dark .sg__taken, .admin--dark .sg__prov--abo, .admin--dark .pickup-admin__near { color: #6fd3a6; } .admin--dark .sg__prov--extra { color: #ffb06b; } .admin--dark .pill { background: #2e2745; color: var(--a-soft); } .admin--dark .who-ordered--done dt { color: #5fd39a; } .admin--dark .who-ordered--missing dt { color: #ff8a8a; } .admin--dark .pill--extra { background: #4a2a10; color: #ffc38f; } /* Essen, Extras */ .admin--dark .order-edit { background: #221c2e; box-shadow: inset 0 0 0 1px #ffc94d40; } .admin--dark .pickup-admin__far { background: #33201a; } .admin--dark .pause-admin--on { background: #12304a; } /* ------------------------------------------------------------ Hardware / Aufbau (/hardware): Fernseher mit den echten Seiten, Geräte und Kabel */ /* Füllt den Tab. Die Bühne hat feste Punkte (1600 × 900) und wird per Skript eingepasst (hardware.js). */ body.admin-hw { margin: 0; min-height: 0; background: #0c0a12; overflow: hidden; } .pitch__fit { position: fixed; inset: 0; overflow: hidden; background: #0c0a12; } /* Knöpfe oben links im Bild, in Bühnenpunkten (wachsen mit) */ .pitch__bar { position: absolute; left: 40px; top: 16px; display: grid; gap: 8px; justify-items: start; } .pitch__tools { display: flex; gap: 8px; margin: 0; } .pitch__btn { font: 700 14px/1 var(--text); color: #f5f2fa; background: #15111f; border: 1.5px solid #3a3448; border-radius: 999px; padding: 8px 16px; cursor: pointer; } .pitch__btn:hover { border-color: #a69fb8; } .pitch__btn:focus-visible { outline: 2px solid #ffc94d; outline-offset: 2px; } .pitch__btn[aria-pressed="true"] { border-color: #ffc94d; color: #ffc94d; background: #2a2210; } .pitch__note { margin: 0; padding: 6px 12px; border-radius: 8px; background: #ff4d6a26; border: 1px solid #ff4d6a66; color: #f5f2fa; font: 13px/1.3 var(--text); } .pitch__stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; } .pitch__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--text); } .pitch__screen { position: absolute; overflow: hidden; background: #000; } .pitch__screen iframe { display: block; border: 0; transform-origin: 0 0; background: var(--night); } /* Klick auf den Fernseher öffnet seine Seite (über dem iframe, das sonst die Klicks bekäme) */ .pitch__open { position: absolute; inset: 0; display: grid; place-items: center; outline: 0; text-decoration: none; transition: background .2s; } .pitch__open span { padding: 10px 20px; border-radius: 999px; border: 1px solid #ffc94d; background: #15111fe6; color: #ffc94d; font: 700 22px/1 var(--text); opacity: 0; transition: opacity .2s; } .pitch__open:hover, .pitch__open:focus-visible { background: #0006; } .pitch__open:hover span, .pitch__open:focus-visible span { opacity: 1; } .pitch__bezel { fill: #08070c; stroke: #3a3448; stroke-width: 1.5; } .pitch__tv { fill: #f5f2fa; font-size: 19px; font-weight: 700; } .pitch__live { fill: #ff4d6a; font-size: 14px; } .pitch__name { fill: #f5f2fa; font-size: 16px; font-weight: 700; } .pitch__desc { fill: #a69fb8; font-size: 14px; } .pitch__cable, .pitch__cable-shadow { fill: none; stroke-linecap: round; stroke-linejoin: round; } .pitch__cable { stroke-width: 4; } .pitch__cable-shadow { stroke: #0009; stroke-width: 9; } .pitch__pill rect { fill: #15111f; stroke-width: 1.5; } .pitch__pill text { fill: #f5f2fa; font-size: 13px; font-weight: 700; text-anchor: middle; } .pitch__dev { fill: #2a2534; stroke: #4b4558; stroke-width: 1.5; } .pitch__dev-dark { fill: #15111f; } .pitch__dev-black { fill: #0a090d; stroke: #3a3448; stroke-width: 1.5; } /* „Offen“: alles außer den offenen Teilen tritt zurück */ .pitch__part, .pitch__screen { transition: opacity .25s, filter .25s; } .pitch--open .pitch__part:not(.pitch__part--open), .pitch--open .pitch__screen { opacity: .18; filter: grayscale(1); } /* „Liste“: Geräte und Preise im Fenster, im Look der Bühne */ .pitch__list { border: 1px solid #3a3448; border-radius: 1rem; padding: 0; max-width: min(30rem, calc(100vw - 2rem)); width: 100%; background: linear-gradient(#211b30, #15111f); color: #f5f2fa; box-shadow: 0 24px 70px #000c, 0 0 0 6px #6d3df51f; } .pitch__list::backdrop { background: #07050cc4; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .pitch__list form { padding: 1.4rem 1.5rem 1.25rem; } .pitch__list h3 { margin: 0 0 1rem; font-size: 1.25rem; color: #f5f2fa; } .pitch__list h3 .pitch__live { color: #ff4d6a; font-size: .8em; vertical-align: .1em; } .pitch__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .pitch__items li { display: flex; align-items: center; gap: .9rem; padding: .5rem .8rem; border-radius: .7rem; background: #ffffff0d; border: 1px solid #ffffff12; } /* Dieselben Zeichnungen wie im Bild, in einem festen Feld */ .pitch__thumb { flex: none; display: grid; place-items: center; width: 4rem; height: 2.6rem; border-radius: .5rem; background: linear-gradient(#352c4c, #241d35); } .pitch__icon { display: block; max-width: 3.4rem; max-height: 2.1rem; width: 100%; height: 100%; overflow: visible; } .pitch__item { flex: 1; font-weight: 600; } .pitch__item small { display: block; font-weight: 400; color: #a69fb8; font-size: .8rem; } .pitch__price { font-variant-numeric: tabular-nums; white-space: nowrap; } .pitch__total { display: flex; justify-content: space-between; align-items: baseline; margin: .9rem 0 0; padding: .75rem .8rem 0; border-top: 1px solid #3a3448; color: #a69fb8; } .pitch__total strong { color: #ffc94d; font-size: 1.3rem; font-variant-numeric: tabular-nums; } .pitch__list-close { margin: 1rem 0 0; text-align: right; } /* Bestellschluss an „Datum und Beginn“ koppeln (Verwaltung → Essen) */ .deadline-field { display: grid; gap: .35rem; } .deadline-field > label { font-size: .875rem; font-weight: 600; color: var(--a-soft); } .deadline-link { display: block; } .deadline-link--on { display: block; padding: .4rem .6rem; border-radius: .5rem; background: rgba(47,179,107,.12); line-height: 1.4; } /* Versionsnummer: unten auf jeder Seite und in der Verwaltung unter „Betrieb“ */ .staging-bar { margin: 0; padding: .35rem 16px; background: #ff9f5a; color: #1a1020; font-size: .8rem; font-weight: 600; text-align: center; } .app-version { margin: 0; padding: 1.25rem 16px 1.5rem; text-align: center; font-size: .75rem; opacity: .55; } .ops__version { margin: 0 0 .75rem; } .ops__commits { margin: .25rem 0 .75rem; padding-left: 1.1rem; font-size: .9rem; } .ops__commits code { opacity: .6; } .ops__version-new { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: .4rem; background: rgba(255, 201, 77, .25); font-size: .85rem; } /* Release Notes: Auswahl unter „Betrieb“ und eigene Seite (/admin/releasenotes/…) */ .ops__notes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1rem; } .relnotes { max-width: 46rem; margin: 0 auto; padding: 2rem 16px 1rem; line-height: 1.55; } .relnotes h1 { margin: .25rem 0; } .relnotes h2 { margin: 1.5rem 0 .5rem; font-size: 1.2rem; } .relnotes h3 { margin: 1.2rem 0 .4rem; font-size: 1.05rem; } .relnotes ul { padding-left: 1.25rem; } .relnotes li { margin: .25rem 0; } .relnotes code { font-size: .9em; padding: .05em .3em; border-radius: .3em; background: rgba(127, 127, 127, .18); } .relnotes a { color: inherit; } .relnotes__meta { margin: 0; opacity: .75; font-size: .9rem; } .relnotes__more { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; opacity: .8; font-size: .9rem; } /* Altersfreigabe (FSK) neben dem Filmtitel: eigene kleine Plakette in den üblichen Farben */ .fsk { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2em; height: 2em; margin-left: .35em; padding: 0 .2em; border-radius: .35em; font-size: .6em; font-weight: 800; line-height: 1; vertical-align: .2em; color: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); } .fsk small { font-size: .48em; font-weight: 700; letter-spacing: .05em; margin-bottom: .12em; } .fsk--0 { background: #fff; color: #111; } .fsk--6 { background: #ffd200; color: #111; } .fsk--12 { background: #00a54f; } .fsk--16 { background: #0091d4; } .fsk--18 { background: #e2001a; } /* Filmsuche: unter welchem Titel ein Treffer gefunden wurde */ .lookup__alt { display: block; opacity: .75; font-size: .9em; } /* Vorprogramm: Trailer der Filme von TMDB */ .trailer-picks { list-style: none; padding: 0; margin: .75rem 0 .25rem; display: grid; gap: .5rem; } .trailer-picks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; } .trailer-picks li > span:first-child { display: grid; gap: .1rem; } /* Companion „Poppy“ (BETA): Popcorn-Tüte unten rechts und Chatfenster (Gästeseiten und Verwaltung) */ .poppy-btn { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900; width: 64px; height: 64px; padding: 4px; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff3c4, #ffc94d); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); cursor: pointer; animation: poppy-bob 3.2s ease-in-out infinite; } .poppy-btn:hover, .poppy-btn:focus-visible { transform: scale(1.06); } .poppy-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .poppy-btn[aria-expanded="true"] { animation: none; } .order .poppy-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .poppy-fig { display: block; width: 100%; height: 100%; } .poppy-btn .poppy-fig__corn { transform-origin: 32px 26px; animation: poppy-corn 3.2s ease-in-out infinite; } @keyframes poppy-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } } @keyframes poppy-corn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } .poppy-hello { position: fixed; right: 88px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); z-index: 900; max-width: 220px; margin: 0; padding: .55rem .8rem; border-radius: 14px 14px 4px 14px; background: #fff; color: #1b1028; font-size: .9rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); } .order .poppy-hello { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); } .poppy { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 901; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); max-height: min(72vh, 580px); border-radius: 18px; background: #1b1428; color: #f4f0fa; box-shadow: 0 12px 36px rgba(0, 0, 0, .45); overflow: hidden; font-size: .95rem; } .poppy[hidden] { display: none; } .order .poppy { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); } .poppy__head { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; background: #2a2040; } .poppy__head .poppy-fig { width: 34px; height: 34px; } .poppy__beta { padding: .05rem .4rem; border-radius: 999px; background: #ffc94d; color: #1b1028; font-size: .7rem; font-weight: 800; letter-spacing: .04em; } .poppy__x { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; } .poppy__log { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .5rem; } .poppy__msg { max-width: 88%; padding: .5rem .7rem; border-radius: 14px; line-height: 1.45; overflow-wrap: anywhere; } .poppy__msg p { margin: 0 0 .35rem; } .poppy__msg p:last-child, .poppy__msg ul:last-child { margin-bottom: 0; } .poppy__msg ul { margin: .2rem 0 .35rem; padding-left: 1.1rem; } .poppy__msg a { color: #ffd76a; } .poppy__msg--bot { align-self: flex-start; background: #32284a; border-bottom-left-radius: 4px; } .poppy__msg--me { align-self: flex-end; background: #ffc94d; color: #1b1028; border-bottom-right-radius: 4px; } .poppy__err { color: #ffb4b4; } .poppy__dots { display: flex; gap: .25rem; padding: .25rem 0; } .poppy__dots i { width: .45rem; height: .45rem; border-radius: 50%; background: #ffc94d; animation: poppy-dot 1.2s infinite ease-in-out; } .poppy__dots i:nth-child(2) { animation-delay: .2s; } .poppy__dots i:nth-child(3) { animation-delay: .4s; } @keyframes poppy-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .poppy__ideas { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .7rem; } .poppy__ideas:empty { display: none; } .poppy__idea { padding: .3rem .6rem; border: 1px solid #5a4b7a; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; } .poppy__idea:hover { background: #32284a; } .poppy__form { display: flex; gap: .4rem; padding: .6rem .7rem .3rem; } .poppy .poppy__form input { flex: 1; min-width: 0; padding: .55rem .7rem; border: 1px solid #5a4b7a; border-radius: 999px; background: #fff !important; color: #1b1028 !important; -webkit-text-fill-color: #1b1028; caret-color: #1b1028; font: inherit; } .poppy .poppy__form input::placeholder { color: #6b5f80; -webkit-text-fill-color: #6b5f80; opacity: 1; } .poppy .poppy__form input:focus { outline: 2px solid #ffc94d; outline-offset: 1px; } .poppy .poppy__form input:disabled { background: #e8e4ee !important; } .poppy__wait { margin: .35rem 0 0; font-size: .85rem; opacity: .75; } .poppy__note { margin: 0; padding: 0 .9rem .6rem; font-size: .72rem; opacity: .6; } .poppy__plan ul { margin: .3rem 0; } .poppy__plan-btns { display: flex; gap: .4rem; margin-top: .4rem; } @media (max-width: 600px) { .poppy { left: 8px; right: 8px; width: auto; max-height: 70vh; } .poppy-hello { right: 84px; } } @media (prefers-reduced-motion: reduce) { .poppy-btn, .poppy-btn .poppy-fig__corn, .poppy__dots i { animation: none; } } /* Verwaltung → Extras: Poppy (BETA) */ .poppy-admin__status { margin: .4rem 0; } /* ---------------------------------------------------------------- Stammgast: PIN und/oder Passwort */ /* Die Felder der nicht gewählten Art sind ausgeblendet (ohne :has() stehen einfach alle da). */ .profil__cred { display: grid; gap: .8rem; } .profil__choice { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0; padding: 0; border: 0; min-width: 0; } .profil__choice legend { padding: 0; margin-bottom: .4rem; font-weight: 600; } .profil__form .profil__choice label.check { display: inline-flex; gap: .4rem; } .profil__form .profil__choice input[type=radio] { padding: 0; width: auto; } .profil__cred-pin, .profil__cred-pw { display: grid; gap: .8rem; } .profil__cred:has(input[name="art"][value="pin"]:checked) .profil__cred-pw, .profil__cred:has(input[name="art"][value="pw"]:checked) .profil__cred-pin { display: none; } /* ---------------------------------------------------------------- Admin-Stammgäste: Bestellstatus und „bezahlt“ auf den Gästeseiten */ .madmin { margin: 0 0 1.2rem; padding: .8rem 1rem; border: 1px dashed var(--line); border-radius: 1rem; } .madmin__status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .madmin__label { font-weight: 700; margin-right: .3rem; } .madmin__label small { font-weight: 400; color: var(--muted); } .madmin__on { outline: 2px solid currentColor; outline-offset: 2px; } .madmin__note { margin: .6rem 0 0; font-size: .95rem; } .ticket__admin { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed #1d16262e; } .ticket__admin small { color: #6a5a78; font-size: .85rem; } /* Verwaltung: Admin-Stammgäste mit eigenem PayPal-Link */ .gl-row__pay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .8rem; } .gl-row__pay .field { flex: 1 1 16rem; } .gl-admin { font-weight: 700; } /* ---------------------------------------------------------------- Verwaltung der Admin-Stammgäste (/verwaltung) */ .me-corner__dot, .me-corner__count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 99rem; background: var(--accent); color: var(--ink); font-size: .8rem; font-weight: 800; } .me-corner__dot { margin-left: -.2rem; } /* Reiter und Unterseiten wie in der großen Verwaltung */ .vw-navs { margin: 1.5rem 0 0; } .vw-nav.tabs { margin-top: 0; flex-wrap: wrap; } /* Unter dem Kopf bleiben: Das Menü oben rechts (Stammgast-Knopf) klappt über diese Reiter, nicht darunter */ .vw-navs .tabs { z-index: auto; } .vw-subnav { margin-top: .6rem; } .tabs .me-corner__count { margin-left: .35rem; } /* Übersicht: Kacheln wie Mission Control */ .vw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin: 1rem 0; } .vw-tile { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; } .vw-tile:hover { background: rgb(var(--fx) / .102); } .vw-tile--warn { box-shadow: inset 0 0 0 2px var(--accent); } .vw-tile__title { font-size: .9rem; font-weight: 600; color: var(--muted); } .vw-tile__value { font-size: 1.25rem; } .vw-tile small { color: var(--muted); } /* Profil und Abmeldeseite: Auswahl der E-Mails */ .profil__mailkinds { display: grid; gap: .35rem; margin: 0 0 .5rem; padding: 0; border: 0; } .profil__mailkinds legend { margin-bottom: .35rem; padding: 0; font-weight: 600; } .profil__form label.profil__mailswitch { display: inline-flex; gap: .6rem; margin: .25rem 0 .5rem; justify-self: start; } .profil__form .profil__mailswitch input { padding: 0; border: 0; } .profil__form .profil__mailkinds label.check { display: flex; align-items: flex-start; white-space: normal; } .profil__form .profil__mailkinds label.check input { flex: none; padding: 0; margin-top: .1rem; } /* Empfang aus: Auswahl der Mails blass, bleibt aber änderbar */ .profil__form:has(.profil__mailswitch .ff-switch__box:not(:checked)) .profil__mailkinds { opacity: .5; } /* System → E-Mails: Hauptschalter, Anlässe und Zeitpunkte */ .mail-master { margin: .5rem 0 1rem; } .mail-rules { display: grid; gap: .7rem; margin: .5rem 0; max-width: 40rem; } .mail-rule { display: grid; gap: .35rem; padding: .7rem .9rem; border-radius: .7rem; border: 1px solid var(--a-rule); } .mail-rule__when { display: grid; gap: .3rem; margin: 0; } .mail-rule input.mail-rule__time { display: inline-block; width: auto; padding: .2rem .4rem; } .mail-rule__min input { display: inline-block; width: 5.5rem; margin-right: .35rem; } /* Radios und Kästchen in „Anlässe und Zeitpunkte“: alle gleich groß, Uhrzeit neben (nicht in) der Beschriftung */ .mail-opt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 400; } #email .mail-rule .mail-opt input[type=radio], #email .mail-rule .mail-opt input[type=checkbox] { flex: none; width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; } .mail-rule__on { font-weight: 700; } #email .mail-rule__who select { width: auto; max-width: 100%; } .mail-block { margin: .3rem 0 0; padding-left: 1.2rem; } .mail-text { margin: .4rem 0; padding: .55rem .8rem; border-radius: .6rem; border: 1px solid var(--a-rule); max-width: 40rem; } .mail-text summary { cursor: pointer; font-weight: 700; } .mail-text textarea { width: 100%; font: inherit; } /* Bestellstatus wie in der großen Verwaltung */ .vw-status { padding: .9rem 1rem; border-radius: 1rem; background: rgb(var(--fx) / .051); box-shadow: inset 0 0 0 1px var(--line); } .vw-pick { margin: .6rem 0; } .vw h3 { margin-top: 1.4rem; } .vw-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin: 1rem 0; } .vw-sums div { padding: .7rem .9rem; border-radius: .9rem; background: var(--glass); } .vw-sums dt { font-size: .9rem; color: var(--muted); } .vw-sums dd { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 800; display: grid; } .vw-sums small { font-size: .8rem; font-weight: 400; color: var(--muted); } .vw-pay { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; } .vw-pay__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .4rem .9rem; padding: .6rem .8rem; border-radius: .9rem; background: var(--glass); } .vw-pay__name { display: grid; min-width: 0; } .vw-pay__name small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-pay__sum { font-size: 1.1rem; white-space: nowrap; } .vw-pay__row form { margin: 0; } @media (max-width: 30rem) { .vw-pay__row { grid-template-columns: minmax(0, 1fr) auto; } .vw-pay__row form { grid-column: 1 / -1; } } .vw-more { margin-top: 1rem; } .vw-more summary { cursor: pointer; font-weight: 600; } .vw-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; } .vw-on { outline: 2px solid currentColor; outline-offset: 2px; } .vw-prof { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; } .vw-prof__row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; border-radius: .9rem; background: var(--glass); } .vw-prof__row > span:first-child { display: grid; gap: .15rem; } .vw-prof__row small { color: var(--muted); } .vw-prof__row--on { box-shadow: inset 0 0 0 2px var(--accent); } .vw-prof__row form { margin: 0; } .vw-state { padding: .7rem .9rem; border-radius: .9rem; background: var(--glass); } .vw-steps { padding-left: 1.3rem; display: grid; gap: .4rem; max-width: 46rem; } .vw-code { word-break: break-all; font-size: .85em; } .vw-news { max-width: 36rem; } .pickup-admin__ot { margin-top: 1rem; } .pickup-admin__ot summary { cursor: pointer; font-weight: 600; } .pickup-admin__ot code { word-break: break-all; } /* Verwaltung: Zahlung bestätigen oder ablehnen */ .vw-pay__acts { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; } /* Vorschlagsgenerator: Serien kenntlich machen */ .pill--tv { background: #5b3df5; color: #fff; } /* Poppy: Antwortzeiten in der Verwaltung (Archiv → Cache) */ .poppy-stats { margin: .8rem 0 0; } .poppy-stats h3 small { font-weight: 400; opacity: .75; } .poppy-stats__list { margin: .3rem 0 .6rem; padding-left: 1.2rem; } .poppy-stats__list li { margin: .2rem 0; } .poppy-stats__wrap { overflow-x: auto; max-width: 100%; } .poppy-stats__table { border-collapse: collapse; font-size: .9rem; min-width: 30rem; } .poppy-stats__table th, .poppy-stats__table td { text-align: left; padding: .25rem .8rem .25rem 0; border-bottom: 1px solid var(--a-rule); white-space: nowrap; } /* ------------------------------------------------------------ Gäste → Sitzplätze (Plan wie auf der Gästeseite, Farben der Verwaltung) */ .admin .seatplan { --fx: var(--a-ink); --muted: var(--a-muted); --accent: #ffc94d; margin: 1rem 0 0; } #sitzplaetze .seat-warn { margin-top: .5rem; } .seat-rooms { margin: .6rem 0 1rem; } .seat-rooms > summary { cursor: pointer; font-weight: 650; color: var(--a-link); } .seat-rooms__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: .8rem; max-width: 52rem; } .seat-rooms__item { margin: 0; padding: .9rem; border-radius: .9rem; background: rgb(var(--a-ink) / .04); } .seat-rooms__item--on { box-shadow: inset 0 0 0 2px #ffc94d; } .admin .seat-rooms__item .seatplan { margin: 0; gap: 1.4rem; } .admin .fquiz-admin { margin: .4rem 0 .6rem; padding-left: 1.4rem; } .admin .deck__group { margin: .5rem 0; border-radius: .6rem; background: var(--a-tile); padding: .5rem .8rem; } .admin .deck__group summary { cursor: pointer; font-weight: 700; } .admin .deck__list { list-style: none; margin: .5rem 0 .2rem; padding: 0; display: grid; gap: .4rem; } .admin .deck__list li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: .6rem; align-items: center; } .admin .deck__label { font-weight: 600; overflow-wrap: anywhere; } .admin .deck__url { font-size: .78rem; overflow-wrap: anywhere; color: var(--a-muted); } .admin .deck__how { margin: .2rem 0 .5rem; padding-left: 1.2rem; } .admin .deck__how li { margin: .2rem 0; } .admin .deck__fold { margin: .5rem 0; border-radius: .6rem; background: rgba(127,127,127,.08); padding: .55rem .9rem; } .admin .deck__fold > summary { cursor: pointer; font-weight: 700; } .admin .deck__note { font-weight: 400; color: var(--a-muted); font-size: .88rem; margin-left: .3rem; } .admin .deck__inner { padding-top: .3rem; } .admin .deck__prof { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .4rem 0 .8rem; } .admin .deck__prof .field { margin: 0; } @media (max-width: 40rem) { .admin .deck__list li { grid-template-columns: 1fr auto; } .admin .deck__url { grid-column: 1 / -1; grid-row: 2; } } .seat-rooms__item figcaption { margin-top: .7rem; } .seat-rooms__item figcaption small { color: var(--a-muted); } .seat-admin { width: 100%; max-width: 34rem; margin-top: 1rem; border-collapse: collapse; } .seat-admin th, .seat-admin td { padding: .3rem .4rem; border-bottom: 1px solid rgb(var(--a-ink) / .08); text-align: left; vertical-align: middle; } .seat-admin th { font-size: .8rem; color: var(--a-muted); font-weight: 600; } .seat-admin td:first-child { white-space: nowrap; } .seat-admin select { width: 100%; min-width: 9rem; } .seat-admin__off td { color: var(--a-muted); }