/* ════════════════════════════════════════════════════════════════ DJDigital.de – Corporate Design Farben: #454543 (Primär) · #c2ad9a (Sekundär) #f2efeb (Background) · #635a50 (Text) Fonts: Playfair Display (Überschriften) · Noto Sans Display (Text) ════════════════════════════════════════════════════════════════ */ /* ── Fonts (self-hosted, DSGVO-konform) ───────────────────────── WOFF2-Dateien nach public/assets/fonts/ legen – siehe fonts/README.txt. Fehlen die Dateien, greifen elegante System-Fallbacks. */ @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Display'; src: url('../fonts/noto-sans-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Display'; src: url('../fonts/noto-sans-display-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Noto Sans Display'; src: url('../fonts/noto-sans-display-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ════════════════════════════════════════════════════════════════ /* ════════════════════════════════════════════════════════════════ Design-Tokens – zehn Moods ════════════════════════════════════════════════════════════════ Gesteuert über ein Attribut auf : data-brand = (Einstellung der Verwaltung) Seit 0.18.0 gibt es keinen Hell-Dunkel-Schalter mehr. Ein Mood ist nicht „ein Farbton, den man hell oder dunkel drehen kann", sondern eine fertige Entscheidung: Gold auf Schwarz IST dunkel, Creme IST hell. Wer beides will, wählt zwei Moods – es stehen fünf helle und fünf dunkle bereit. Der Schalter hätte zwanzig Farbsätze gebraucht, von denen zehn niemand entworfen hat. Jeder Block setzt den KOMPLETTEN Satz, auch wo ein Wert dem eines anderen gleicht. Das ist bewusst redundant: So gibt es keine Reihenfolge, in der ein Mood Werte eines anderen erbt – der häufigste Grund für Darstellungsfehler, die sich nur in einer Kombination zeigen und schwer zu finden sind. Die Werte stammen aus der Mood-Ausfuhr der Fotobox (docs/moods/moods.json, Fassung 1) und werden von bin/gen-moods.py übersetzt – nicht von Hand gepflegt. Wer eine Farbe ändern will, ändert sie dort und lässt das Skript erneut laufen. ════════════════════════════════════════════════════════════════ */ /* ── 01 Gold auf Schwarz · dunkel ─────────────────────────────── */ [data-brand="gold-nacht"] { --primary: #C9A063; --secondary: #F2DCB2; --bg: #0E0E0E; --text: #BBB2A8; --surface: #191A19; --surface-alt: #232421; --border: #34352F; --heading: #F5E9DB; --muted: #A2988A; --on-primary: #161612; --sidebar-bg: #232421; --success: #93B98B; --success-bg: #2D332B; --warning: #D9B36A; --warning-bg: #383226; --danger: #E09184; --danger-bg: #392D2A; --info: #94AEC1; --info-bg: #2D3234; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#C9A063 0%,#F2DCB2 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.33); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --page-glow: radial-gradient(ellipse 1100px 560px at 50% -12%, rgba(201, 160, 99, 0.09), transparent 62%); --container: 1120px; color-scheme: dark; } /* ── 02 Tiefschwarz · dunkel ──────────────────────────────────── */ [data-brand="nacht-tief"] { --primary: #F2DCB2; --secondary: #FFF3DC; --bg: #000000; --text: #B8B6B2; --surface: #0E0E0E; --surface-alt: #181817; --border: #2A2A28; --heading: #F6F2EE; --muted: #8E877E; --on-primary: #111110; --sidebar-bg: #181817; --success: #93B98B; --success-bg: #232922; --warning: #D9B36A; --warning-bg: #2E281D; --danger: #E09184; --danger-bg: #302321; --info: #94AEC1; --info-bg: #23282B; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#F2DCB2 0%,#FFF3DC 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.33); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --page-glow: radial-gradient(ellipse 1100px 560px at 50% -12%, rgba(242, 220, 178, 0.09), transparent 62%); --container: 1120px; color-scheme: dark; } /* ── 03 Anthrazit & Gold · dunkel ─────────────────────────────── */ [data-brand="anthrazit-gold"] { --primary: #C9A063; --secondary: #EAC88E; --bg: #1E1F1E; --text: #BFB6AC; --surface: #272826; --surface-alt: #31322F; --border: #43443F; --heading: #F5E9DB; --muted: #ADA396; --on-primary: #1A1A17; --sidebar-bg: #31322F; --success: #93B98B; --success-bg: #383F36; --warning: #D9B36A; --warning-bg: #433E31; --danger: #E09184; --danger-bg: #453935; --info: #94AEC1; --info-bg: #383D3F; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#C9A063 0%,#EAC88E 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.33); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --page-glow: radial-gradient(ellipse 1100px 560px at 50% -12%, rgba(201, 160, 99, 0.09), transparent 62%); --container: 1120px; color-scheme: dark; } /* ── 04 Creme & Gold · hell (Vorgabe, zugleich :root) ─────────── */ :root, [data-brand="creme-hell"] { --primary: #8A5F28; --secondary: #6D4D24; --bg: #F7EDE0; --text: #59524A; --surface: #EFE1CE; --surface-alt: #E4D2B9; --border: #BE9C6E; --heading: #241F18; --muted: #574B3B; --on-primary: #FFF8EE; --sidebar-bg: #241F18; --success: #476042; --success-bg: #D9D0BC; --warning: #6E5526; --warning-bg: #E1D0B8; --danger: #864239; --danger-bg: #E1CBBA; --info: #4A5A66; --info-bg: #D8CEBF; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#8A5F28 0%,#C9A063 100%); --shadow: 0 10px 30px rgba(30, 31, 30, 0.096); --shadow-lg: 0 18px 50px rgba(30,31,30,.16); --page-glow: none; --container: 1120px; color-scheme: light; } /* ── 05 Champagner · hell ─────────────────────────────────────── */ [data-brand="champagner"] { --primary: #7C5420; --secondary: #65461E; --bg: #E5D4C1; --text: #594F42; --surface: #F1E5D6; --surface-alt: #D6C0A6; --border: #AC8A63; --heading: #2A2318; --muted: #544737; --on-primary: #FFF6EA; --sidebar-bg: #2A2318; --success: #476042; --success-bg: #DAD4C2; --warning: #6E5526; --warning-bg: #E3D4BE; --danger: #8E463C; --danger-bg: #E3CFC0; --info: #4A5A66; --info-bg: #DAD2C6; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#7C5420 0%,#B98A4A 100%); --shadow: 0 10px 30px rgba(30, 31, 30, 0.096); --shadow-lg: 0 18px 50px rgba(30,31,30,.16); --page-glow: none; --container: 1120px; color-scheme: light; } /* ── 06 Weiß pur · hell ───────────────────────────────────────── */ [data-brand="weiss-pur"] { --primary: #6E5836; --secondary: #57462D; --bg: #EDE9E3; --text: #504D4A; --surface: #F9F7F4; --surface-alt: #E1DBD2; --border: #AFA599; --heading: #1B1917; --muted: #514A43; --on-primary: #FFFFFF; --sidebar-bg: #1B1917; --success: #4F6B4A; --success-bg: #E1E3DC; --warning: #7B5F2A; --warning-bg: #E9E3D8; --danger: #8E463C; --danger-bg: #EADEDA; --info: #4A5A66; --info-bg: #E0E1E0; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#6E5836 0%,#A98C5C 100%); --shadow: 0 10px 30px rgba(30, 31, 30, 0.096); --shadow-lg: 0 18px 50px rgba(30,31,30,.16); --page-glow: none; --container: 1120px; color-scheme: light; } /* ── 07 DJ Dirk hell · hell ───────────────────────────────────── */ [data-brand="djdirk-hell"] { --primary: #8E5E52; --secondary: #76544B; --bg: #F2EFEB; --text: #686765; --surface: #FAF8F5; --surface-alt: #E6E0D8; --border: #B2A99D; --heading: #3A3A38; --muted: #5A5248; --on-primary: #FEEFE1; --sidebar-bg: #3A3A38; --success: #4F6B4A; --success-bg: #E2E4DD; --warning: #7B5F2A; --warning-bg: #EAE4D9; --danger: #8E463C; --danger-bg: #EBDFDB; --info: #4A5A66; --info-bg: #E1E2E1; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Noto Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Noto Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#8E5E52 0%,#C0997F 100%); --shadow: 0 10px 30px rgba(30, 31, 30, 0.096); --shadow-lg: 0 18px 50px rgba(30,31,30,.16); --page-glow: none; --container: 1120px; color-scheme: light; } /* ── 08 Schiefer & Gold hell · hell ───────────────────────────── */ [data-brand="schiefer-hell"] { --primary: #8A6636; --secondary: #6F5737; --bg: #EDF1F4; --text: #5B6167; --surface: #F8FAFC; --surface-alt: #DDE5EB; --border: #A3B1BC; --heading: #2A3138; --muted: #54616B; --on-primary: #FFFFFF; --sidebar-bg: #2A3138; --success: #4F6B4A; --success-bg: #E0E6E3; --warning: #7B5F2A; --warning-bg: #E9E6DF; --danger: #8E463C; --danger-bg: #E9E1E1; --info: #4A5A66; --info-bg: #E0E4E7; --font-heading: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --font-body: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --font-meta: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --heading-weight: 700; --heading-tracking: -0.01em; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#8A6636 0%,#C4A173 100%); --shadow: 0 10px 30px rgba(30, 31, 30, 0.096); --shadow-lg: 0 18px 50px rgba(30,31,30,.16); --page-glow: none; --container: 1120px; color-scheme: light; } /* ── 09 Schiefer & Gold dunkel · dunkel ───────────────────────── */ [data-brand="schiefer-dunkel"] { --primary: #C4A173; --secondary: #DCC095; --bg: #2B3239; --text: #B9BFC4; --surface: #38414A; --surface-alt: #454F59; --border: #5C6875; --heading: #E8EEF2; --muted: #A7B3BD; --on-primary: #23292F; --sidebar-bg: #454F59; --success: #B4CEAF; --success-bg: #475454; --warning: #E1C48A; --warning-bg: #52534F; --danger: #EBB8AF; --danger-bg: #534E53; --info: #B5C8D4; --info-bg: #47525D; --font-heading: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --font-body: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --font-meta: Arimo,Arial,Helvetica,"Helvetica Neue",system-ui,sans-serif; --heading-weight: 700; --heading-tracking: -0.01em; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#C4A173 0%,#DCC095 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.33); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --page-glow: radial-gradient(ellipse 1100px 560px at 50% -12%, rgba(196, 161, 115, 0.09), transparent 62%); --container: 1120px; color-scheme: dark; } /* ── 10 DJ Dirk dunkel · dunkel ───────────────────────────────── */ [data-brand="djdirk-dunkel"] { --primary: #C0997F; --secondary: #C2AD9A; --bg: #2E2E2C; --text: #C1BFBB; --surface: #454543; --surface-alt: #52514D; --border: #6E655B; --heading: #F2EFEB; --muted: #BAB2A8; --on-primary: #2E2E2C; --sidebar-bg: #52514D; --success: #BCD4B8; --success-bg: #51584F; --warning: #E5CB98; --warning-bg: #5D5749; --danger: #EDC0B8; --danger-bg: #5E514D; --info: #BDCED9; --info-bg: #525657; --font-heading: "Playfair Display",Didot,"Bodoni MT","Times New Roman",Georgia,serif; --font-body: "Noto Sans Display","Noto Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --font-meta: "Noto Sans Display","Noto Sans","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --heading-weight: 600; --heading-tracking: 0; --radius: 16px; --radius-sm: 10px; --btn-radius: 10px; --btn-primary-bg: linear-gradient(135deg,#C0997F 0%,#C2AD9A 100%); --shadow: 0 10px 30px rgba(0, 0, 0, 0.33); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); --page-glow: radial-gradient(ellipse 1100px 560px at 50% -12%, rgba(192, 153, 127, 0.09), transparent 62%); --container: 1120px; color-scheme: dark; } /* ── Basis ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--text); background: var(--bg); background-image: var(--page-glow); background-repeat: no-repeat; background-attachment: fixed; -webkit-font-smoothing: antialiased; transition: background 0.25s ease, color 0.25s ease; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--heading); line-height: 1.2; margin: 0 0 0.6em; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); } p { margin: 0 0 1em; } a { color: var(--primary); text-decoration-color: var(--secondary); text-underline-offset: 3px; } a:hover { color: var(--secondary); } img, svg { vertical-align: middle; } code { font-family: ui-monospace, 'Cascadia Code', Menlo, monospace; background: var(--surface-alt); padding: 0.15em 0.45em; border-radius: 6px; font-size: 0.92em; } .container { max-width: var(--container); margin: 0 auto; padding: 0 22px; } .container.narrow { max-width: 760px; } .center { text-align: center; } /* ── Header ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 26px; min-height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); } .brand-mark { color: var(--secondary); display: inline-flex; } /* Das Signet ist eine Schallplatte – also dreht es sich, dauerhaft und so langsam, dass es beim Lesen nicht stört. Wer Bewegung abgestellt hat, sieht es still (Regel weiter unten bei prefers-reduced-motion). */ .brand-mark svg { animation: djd-spin 18s linear infinite; transform-origin: 50% 50%; } .brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.4px; color: var(--heading); } .brand-name span { color: var(--secondary); } .main-nav { display: flex; gap: 22px; margin-left: 8px; } .main-nav a { text-decoration: none; color: var(--text); font-weight: 500; font-size: 0.98rem; } .main-nav a:hover { color: var(--heading); } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .inline-form { display: inline; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .icon-btn:hover { border-color: var(--secondary); color: var(--heading); } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="light"] .icon-sun, html:not([data-theme="dark"]) .icon-sun { display: none; } [data-theme="light"] .icon-moon, html:not([data-theme="dark"]) .icon-moon { display: block; } [data-theme="dark"] .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: block; } .nav-toggle { display: none; } /* ── Buttons ────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 11px 22px; border-radius: var(--btn-radius); border: 1.5px solid transparent; font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--btn-primary-bg); color: var(--on-primary); box-shadow: var(--shadow); } /* filter statt color-mix: --btn-primary-bg ist im Nachtclub ein Verlauf, den color-mix nicht verarbeiten kann. */ .btn-primary:hover { filter: brightness(1.08) saturate(1.05); color: var(--on-primary); } .btn-outline { background: transparent; color: var(--heading); border-color: var(--secondary); } .btn-outline:hover { background: var(--secondary); color: var(--on-primary); } .btn-ghost { background: transparent; color: var(--text); } .btn-ghost:hover { color: var(--heading); } .btn-lg { padding: 14px 30px; font-size: 1.05rem; } .btn-sm { padding: 8px 16px; font-size: 0.9rem; } .btn-block { display: block; width: 100%; text-align: center; } /* ── Flash-Meldungen ────────────────────────────────────────────── */ /* Hinweiskästen innerhalb einer Karte – gleiche Farbsprache wie die Flash-Meldungen, aber ortsgebunden: sie gehören zum Inhalt, nicht zur letzten Aktion. */ .msg { padding: 13px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; margin: 0 0 16px; line-height: 1.55; } .msg:last-child { margin-bottom: 0; } .msg-ok { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .msg-err { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .msg-warn { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .msg-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .flash-stack { margin-top: 18px; display: grid; gap: 10px; } .flash { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 500; animation: flash-in 0.3s ease; } @keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } } .flash-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .flash-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .flash-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .flash-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .flash-close { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: inherit; opacity: 0.6; } .flash-close:hover { opacity: 1; } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { position: relative; padding: 110px 0 120px; overflow: hidden; background: radial-gradient(ellipse 900px 480px at 82% -10%, color-mix(in srgb, var(--secondary) 30%, transparent), transparent 65%), radial-gradient(ellipse 700px 420px at 8% 110%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 60%); } .hero-inner { max-width: 780px; } .hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 700; margin-bottom: 0.4em; } .eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; font-weight: 700; color: var(--secondary); margin-bottom: 12px; } .eyebrow.center { text-align: center; } .lead { font-size: 1.14rem; max-width: 620px; } .lead-sm { font-size: 1.02rem; color: var(--muted); } .center .lead, .center.lead { margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; } /* ── Sektionen ──────────────────────────────────────────────────── */ .section { padding: 84px 0; } .section-alt { background: color-mix(in srgb, var(--surface-alt) 55%, var(--bg)); } .section-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 40px; } .page-title { font-size: clamp(1.9rem, 4vw, 2.7rem); } .cta-section { background: radial-gradient(ellipse 700px 340px at 50% 120%, color-mix(in srgb, var(--secondary) 26%, transparent), transparent 65%); } /* ── Cards ──────────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 22px; margin-top: 30px; } .card-grid.three { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card h3 { font-size: 1.25rem; margin-bottom: 10px; } .card-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: color-mix(in srgb, var(--secondary) 18%, transparent); color: var(--secondary); margin-bottom: 18px; } .card-highlight { border-color: var(--secondary); box-shadow: var(--shadow-lg); margin-bottom: 22px; } /* Preis-Karten */ .price-card { position: relative; text-align: center; } .price-featured { border-color: var(--secondary); } .ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--secondary); color: var(--on-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 16px; border-radius: 999px; } .price-tag { font-family: var(--font-heading); font-size: 2rem; color: var(--heading); margin: 6px 0 18px; } .feature-list { list-style: none; padding: 0; margin: 0 0 20px; } .feature-list li { padding: 7px 0; border-bottom: 1px dashed var(--border); } .feature-list li:last-child { border-bottom: none; } /* ── Ablauf-Schritte ────────────────────────────────────────────── */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 26px; } .steps li { position: relative; padding-top: 8px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; } .steps h3 { font-size: 1.12rem; margin-bottom: 6px; } .steps p { font-size: 0.97rem; color: var(--muted); } /* ── FAQ ────────────────────────────────────────────────────────── */ .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 22px; margin-bottom: 12px; } .faq-item summary { cursor: pointer; font-weight: 600; color: var(--heading); padding: 14px 0; list-style: none; position: relative; padding-right: 30px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--secondary); transition: transform 0.2s ease; } .faq-item[open] summary::after { content: '–'; } .faq-item p { padding-bottom: 16px; } /* ── Formulare ──────────────────────────────────────────────────── */ .form-group { margin-bottom: 18px; } .form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } label { display: block; font-weight: 600; font-size: 0.94rem; margin-bottom: 7px; color: var(--heading); } label small { font-weight: 400; color: var(--muted); } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea { width: 100%; padding: 12px 15px; font-family: var(--font-body); font-size: 1rem; color: var(--heading); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 25%, transparent); } .form-error { color: var(--danger); font-size: 0.88rem; margin: 6px 0 0; font-weight: 500; } .form-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text); } .form-check input { margin-top: 4px; accent-color: var(--secondary); } .password-wrap { position: relative; } .password-wrap input { padding-right: 46px; } .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; opacity: 0.55; padding: 6px; } .password-toggle:hover { opacity: 1; } .code-input { letter-spacing: 3px; font-size: 1.15rem; text-align: center; } .inline-confirm { display: flex; gap: 10px; margin-top: 10px; } .inline-confirm input { max-width: 220px; } /* ── Auth-Karten ────────────────────────────────────────────────── */ .auth-section { display: flex; justify-content: center; padding: 70px 22px; } .auth-card { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 42px 38px; } .auth-title { font-size: 1.75rem; margin-bottom: 6px; } .auth-sub { color: var(--muted); margin-bottom: 26px; font-size: 0.98rem; } .auth-alt { text-align: center; margin-top: 22px; font-size: 0.95rem; color: var(--muted); } /* ── Dashboard / Konto ──────────────────────────────────────────── */ .status-list { list-style: none; padding: 0; margin: 0 0 18px; } .status-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); } .status-list li:last-child { border-bottom: none; } .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: var(--surface-alt); color: var(--text); text-decoration: none; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-warning { background: var(--warning-bg); color: var(--warning); } .badge-muted { background: var(--surface-alt); color: var(--muted); } a.badge:hover { filter: brightness(0.96); } .recovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 10px; margin: 16px 0; } .recovery-grid code { padding: 9px 12px; text-align: center; font-size: 1rem; letter-spacing: 1px; } .secret-box { margin: 10px 0; } .secret-box code { display: inline-block; padding: 10px 14px; font-size: 1.02rem; letter-spacing: 1px; } .setup-steps { padding-left: 22px; } .setup-steps li { margin-bottom: 22px; } /* * Der QR-Code braucht seinen hellen Grund. Im Nachtmodus ist die Karte * dunkel – ein Code ohne weiße Fläche drumherum wäre dort für jede * Kamera unlesbar, weil sie die Ecken nicht findet. Deshalb steht das * Weiß hier fest und folgt NICHT den Farbtokens. */ .qr-box { display: inline-block; margin: 14px 0 4px; padding: 10px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 0; max-width: 100%; } .qr-box svg { display: block; width: 260px; max-width: 100%; height: auto; } .hint { font-size: 0.88rem; color: var(--muted); margin-top: 6px; } .stack-sm > * + * { margin-top: 10px; } /* ── Rechtstexte ────────────────────────────────────────────────── */ .legal h2 { font-size: 1.25rem; margin-top: 1.8em; } .todo-note { background: var(--warning-bg); color: var(--warning); border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 600; } /* ── Footer ─────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 46px 0 38px; margin-top: 40px; background: color-mix(in srgb, var(--surface-alt) 40%, var(--bg)); } .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 30px; align-items: start; } .footer-brand p { color: var(--muted); font-size: 0.95rem; max-width: 340px; margin-top: 8px; } .footer-nav { display: flex; flex-direction: column; gap: 8px; } .footer-nav a { text-decoration: none; color: var(--text); font-size: 0.95rem; } .footer-nav a:hover { color: var(--heading); } .footer-copy { color: var(--muted); font-size: 0.9rem; margin: 0; } .footer-version { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-alt); font-size: 0.78rem; letter-spacing: 0.5px; cursor: help; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 860px) { .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 22px 16px; } .main-nav.open { display: flex; } .main-nav a { padding: 12px 0; border-bottom: 1px dashed var(--border); } .main-nav a:last-child { border-bottom: none; } .nav-toggle { display: inline-flex; } .btn-ghost { display: none; } .hero { padding: 70px 0 80px; } .section { padding: 60px 0; } .form-row.two { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; gap: 20px; } .auth-card { padding: 32px 24px; } } /* ════════════════════════════════════════════════════════════════ Eventmanager (ab v0.2.0) ════════════════════════════════════════════════════════════════ */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; } .page-head .page-title { margin-bottom: 4px; } .head-actions { display: flex; align-items: center; gap: 10px; } .breadcrumb { font-size: 0.9rem; color: var(--muted); margin-bottom: 10px; } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--heading); } .breadcrumb span { margin: 0 6px; opacity: 0.5; } .list-heading { font-size: 1.15rem; margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .back-link { margin-top: 34px; font-size: 0.95rem; } /* ── Kennzahlen ── */ .stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .stat { flex: 1; min-width: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; } .stat-value { display: block; font-family: var(--font-heading); font-size: 1.9rem; color: var(--heading); line-height: 1.1; } .stat-label { font-size: 0.88rem; color: var(--muted); } /* ── Eventliste ── */ .event-list { display: grid; gap: 12px; } .event-list.is-past { opacity: 0.72; } .event-list.is-compact { margin-top: 14px; } .event-card { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--secondary); color: inherit; } .event-date { flex: none; width: 62px; text-align: center; padding: 8px 0; background: color-mix(in srgb, var(--secondary) 16%, transparent); border-radius: var(--radius-sm); line-height: 1.15; } .event-day { display: block; font-family: var(--font-heading); font-size: 1.5rem; color: var(--heading); } .event-month { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: var(--secondary); } .event-year { display: block; font-size: 0.7rem; color: var(--muted); } .event-body { flex: 1; min-width: 0; } .event-body h3 { font-size: 1.1rem; margin: 0 0 3px; } .event-meta { font-size: 0.9rem; color: var(--muted); margin: 0; } .event-location { font-size: 0.86rem; color: var(--muted); margin: 3px 0 0; opacity: 0.85; } .event-side { flex: none; text-align: right; display: grid; gap: 6px; justify-items: end; } .event-countdown { font-size: 0.82rem; color: var(--muted); } /* ── Leerzustand ── */ .empty-state { text-align: center; padding: 60px 24px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } .empty-icon { width: 72px; height: 72px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--secondary) 18%, transparent); color: var(--secondary); } .empty-state h2 { font-size: 1.35rem; margin-bottom: 8px; } .empty-state p { max-width: 430px; margin: 0 auto 22px; color: var(--muted); } /* ── Detailansicht ── */ .detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(min(260px, 100%), 1fr); gap: 20px; align-items: start; } .detail-main, .detail-side { display: grid; gap: 18px; } .card-title { font-size: 1.15rem; margin-bottom: 14px; } .card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .countdown-banner { background: color-mix(in srgb, var(--secondary) 18%, transparent); border-radius: var(--radius-sm); padding: 13px 18px; margin-bottom: 22px; font-size: 0.98rem; } .fact-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 0.94rem; } .fact-list dt { color: var(--muted); } .fact-list dd { margin: 0; color: var(--heading); font-weight: 500; } .muted-text { color: var(--muted); font-size: 0.92rem; } .preserve-lines { white-space: pre-line; } /* ── Phasen ── */ .phase-list { list-style: none; counter-reset: phase; padding: 0; margin: 0 0 18px; } .phase-item { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px dashed var(--border); } .phase-item:last-child { border-bottom: none; } .phase-item::before { counter-increment: phase; content: counter(phase); position: absolute; left: 0; top: 16px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 0.78rem; font-weight: 700; } .phase-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .phase-head h3 { font-size: 1.05rem; margin: 0 0 2px; } .phase-time { font-size: 0.88rem; color: var(--muted); margin: 0; } .phase-controls { display: flex; align-items: center; gap: 8px; } .energy-meter { width: 78px; height: 7px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; } .energy-fill { display: block; height: 100%; background: var(--secondary); border-radius: 999px; } .energy-value { font-size: 0.8rem; color: var(--muted); min-width: 34px; } .phase-notes { font-size: 0.9rem; margin: 8px 0 0; color: var(--text); } .phase-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); } .link-btn:hover { color: var(--heading); } .link-danger { color: var(--danger); } .link-danger:hover { color: var(--danger); opacity: 0.8; } .phase-form { margin-top: 14px; padding: 16px; background: color-mix(in srgb, var(--surface-alt) 45%, transparent); border-radius: var(--radius-sm); } .phase-form.is-hidden { display: none; } .add-phase { border-top: 1px solid var(--border); padding-top: 14px; } .add-phase summary { cursor: pointer; font-weight: 600; color: var(--heading); list-style: none; padding: 4px 0; } .add-phase summary::-webkit-details-marker { display: none; } .add-phase form { margin-top: 14px; } .range-input { width: 100%; accent-color: var(--secondary); } .range-out { font-weight: 400; color: var(--muted); } /* ── Formularerweiterungen ── */ .form-row.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .form-row.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .form-row.zip-city { display: grid; grid-template-columns: 130px 1fr; gap: 16px; } textarea { resize: vertical; min-height: 84px; font-family: var(--font-body); } input[type="date"], input[type="time"], input[type="number"] { width: 100%; padding: 12px 15px; font-family: var(--font-body); font-size: 1rem; color: var(--heading); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); } input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 25%, transparent); } .form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; } /* ── Chips (Musikrichtungen) ── */ .chip-group { display: flex; flex-wrap: wrap; gap: 8px; } .chip { cursor: pointer; } .chip input { position: absolute; opacity: 0; width: 0; height: 0; } .chip span { display: inline-block; padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font-size: 0.9rem; transition: all 0.15s ease; } .chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 35%, transparent); } .chip:hover span { border-color: var(--secondary); } .chip-static { display: inline-block; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--secondary) 18%, transparent); font-size: 0.88rem; color: var(--heading); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .btn-danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } @media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; } .form-row.three, .form-row.four { grid-template-columns: 1fr 1fr; } .event-card { flex-wrap: wrap; } .event-side { text-align: left; justify-items: start; } } @media (max-width: 520px) { .form-row.three, .form-row.four, .form-row.zip-city { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════ Verwaltungsbereich (ab v0.3.0) ════════════════════════════════════════════════════════════════ */ .admin-body { background: color-mix(in srgb, var(--surface-alt) 40%, var(--bg)); } .admin-shell { display: flex; min-height: 100vh; } /* ── Seitenleiste ── */ .admin-sidebar { flex: none; width: 246px; background: var(--sidebar-bg); color: color-mix(in srgb, #ffffff 78%, transparent); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; } .admin-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--on-primary); padding: 4px 8px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 16px; } .admin-brand .brand-name { color: #ffffff; font-size: 1.15rem; display: block; } .admin-brand .brand-name span { color: var(--secondary); } .admin-brand small { font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.65; } .admin-brand .brand-mark { color: var(--secondary); } .admin-nav { display: grid; gap: 3px; } .admin-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; font-size: 0.95rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .admin-nav a:hover { background: rgba(255, 255, 255, 0.09); color: #ffffff; } .admin-nav a.is-active { background: var(--secondary); color: var(--on-primary); font-weight: 600; } .admin-nav svg { flex: none; opacity: 0.85; } .admin-sidebar-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .admin-side-link { display: block; padding: 6px 12px; font-size: 0.88rem; text-decoration: none; color: inherit; opacity: 0.8; } .admin-side-link:hover { opacity: 1; color: #ffffff; } .admin-version { padding: 10px 12px 0; font-size: 0.76rem; opacity: 0.55; margin: 0; } /* ── Hauptbereich ── */ .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .admin-topbar { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .admin-topbar-title { font-size: 1.2rem; margin: 0; } .admin-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .admin-user { font-size: 0.9rem; color: var(--muted); } .admin-menu-toggle { display: none; } .admin-flash { padding: 16px 26px 0; margin: 0; } .admin-content { padding: 24px 26px 60px; } .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; align-items: start; } .admin-wide { grid-column: 1 / -1; } /* ── Kennzahlen ── */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; } .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .metric-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--secondary); font-weight: 700; } .metric-value { display: block; font-family: var(--font-heading); font-size: 2.1rem; color: var(--heading); line-height: 1.2; margin: 4px 0 2px; } .metric-sub { font-size: 0.85rem; color: var(--muted); } /* ── Hinweise ── */ .notice { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.95rem; border: 1px solid transparent; } .notice-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .notice-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .notice-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); } .notice a { color: inherit; font-weight: 600; } /* ── Tabellen ── */ .table-scroll { overflow-x: auto; margin: 0 -4px; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .data-table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1.5px solid var(--border); white-space: nowrap; } .data-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tr:last-child td { border-bottom: none; } .data-table.striped tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--surface-alt) 30%, transparent); } .data-table a { font-weight: 500; } .data-table .num { text-align: right; } .data-table .nowrap { white-space: nowrap; } .cell-sub { display: block; font-size: 0.82rem; color: var(--muted); } .meta-cell { max-width: 300px; overflow-wrap: anywhere; font-size: 0.84rem; } .action-code { font-size: 0.82rem; background: var(--surface-alt); } /* ── Filter und Blättern ── */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .filter-bar input[type="search"] { flex: 1; min-width: 200px; padding: 9px 14px; font-family: var(--font-body); font-size: 0.95rem; color: var(--heading); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); } .filter-bar select { width: auto; padding: 9px 12px; font-size: 0.95rem; } .filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 25%, transparent); } .result-count { font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; } .pagination { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 18px; } .page-info { font-size: 0.88rem; color: var(--muted); } .mini-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 18px 0 8px; } .admin-actions { display: grid; gap: 18px; } .admin-actions button[disabled] { opacity: 0.45; cursor: not-allowed; } .admin-link { color: var(--secondary) !important; font-weight: 600; } @media (max-width: 900px) { .admin-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } .admin-sidebar.is-open { transform: translateX(0); } .admin-menu-toggle { display: inline-flex; } .admin-content { padding: 18px 16px 50px; } .admin-topbar { padding: 12px 16px; } .admin-user { display: none; } } /* ── Auswahl des Erscheinungsbilds (Verwaltung → Einstellungen) ──── */ .form-label { display: block; font-weight: 600; font-size: 0.94rem; margin: 0 0 6px; color: var(--heading); } .brand-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: 12px; } .brand-option { cursor: pointer; margin: 0; } .brand-option input { position: absolute; opacity: 0; width: 0; height: 0; } .brand-option-body { display: block; height: 100%; padding: 14px 16px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .brand-option-body strong { display: block; font-size: 1.02rem; color: var(--heading); } .brand-option-body small { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--muted); line-height: 1.45; } .brand-swatches { display: flex; gap: 5px; margin-bottom: 10px; } .brand-swatches span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); } .brand-option:hover .brand-option-body { border-color: var(--secondary); } /* Auswahl schon vor dem Speichern sichtbar – ohne eine Zeile JavaScript */ .brand-option:has(input:checked) .brand-option-body { border-color: var(--secondary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary) 35%, transparent); } .brand-option input:focus-visible + .brand-option-body { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Im Nachtclub und bei DJ Dirk läuft der zweite Wortteil farbig aus – die Wortmarke selbst bleibt unverändert, nur ihre Farbe folgt der Welt. */ [data-brand="nachtclub"] .brand-name span { background: linear-gradient(100deg, #c04dff 0%, #35e0d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-brand="djdirk"] .brand-name span { background: linear-gradient(100deg, #ff2e88 0%, #d8b26a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Wartungsseite ──────────────────────────────────────────────── */ .maintenance { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 8vh 20px; text-align: center; } .maintenance-inner { max-width: 540px; } .maintenance-mark { color: var(--secondary); display: block; margin: 0 auto 26px; animation: djd-spin 14s linear infinite; } @keyframes djd-spin { to { transform: rotate(360deg); } } .maintenance-title { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); color: var(--heading); font-size: clamp(1.9rem, 5vw, 2.9rem); margin: 0 0 14px; } .maintenance-text { font-size: 1.06rem; margin: 0 0 30px; } .maintenance-meter { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 34px; margin: 0 0 30px; } .maintenance-meter span { width: 5px; border-radius: 3px; background: var(--secondary); opacity: 0.75; animation: djd-level 1.5s ease-in-out infinite; } .maintenance-meter span:nth-child(1) { height: 40%; animation-delay: 0s; } .maintenance-meter span:nth-child(2) { height: 70%; animation-delay: 0.15s; } .maintenance-meter span:nth-child(3) { height: 100%; animation-delay: 0.3s; } .maintenance-meter span:nth-child(4) { height: 55%; animation-delay: 0.45s; } .maintenance-meter span:nth-child(5) { height: 85%; animation-delay: 0.6s; } .maintenance-meter span:nth-child(6) { height: 35%; animation-delay: 0.75s; } .maintenance-meter span:nth-child(7) { height: 65%; animation-delay: 0.9s; } @keyframes djd-level { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } } .maintenance-foot { font-family: var(--font-meta); font-size: 0.86rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 34px; } /* Wer Bewegung abbestellt hat, bekommt eine ruhige Seite. */ @media (prefers-reduced-motion: reduce) { .maintenance-mark { animation: none; } .maintenance-meter span { animation: none; } .brand-mark svg { animation: none; } } /* Überfällige Rechnung: nur die Fälligkeit wird rot, nicht die ganze Zeile. */ .overdue { color: var(--danger); font-weight: 600; } /* ── Statusleiste in der Kopfzeile der Verwaltung ───────────────── */ .admin-status { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 4px; flex-wrap: wrap; } .status-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); font-family: var(--font-meta); font-size: 0.8rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.2px; text-decoration: none; white-space: nowrap; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } a.status-chip:hover, .status-chip-btn:hover { border-color: var(--secondary); color: var(--heading); } .status-chip-btn { cursor: pointer; font-family: var(--font-meta); } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .status-chip.is-ok .status-dot { background: var(--success); } .status-chip.is-warn { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); } .status-chip.is-warn .status-dot { background: var(--warning); } /* Bei aktiver Wartung soll der Schalter auffallen, nicht sich einfügen. */ .status-chip-btn.is-warn { font-weight: 700; } @media (max-width: 900px) { /* Auf schmalen Geräten bleibt nur der Wartungsschalter – er ist der einzige Punkt, an dem man wirklich sofort handeln will. */ .admin-status .status-chip:not(.status-chip-btn) { display: none; } } /* ── Registerkarten ─────────────────────────────────────────────── */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .tab { appearance: none; background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 10px 18px; margin-bottom: -1px; font-family: var(--font-body); font-size: 0.94rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .tab:hover { color: var(--heading); } .tab.is-active { color: var(--heading); background: var(--surface); border-color: var(--border); border-bottom: 1px solid var(--surface); } .tab:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; } /* Ohne JavaScript trägt der Body die Klasse nicht – dann bleiben alle Gruppen sichtbar und die Leiste ist nur Zierde. */ body.has-tabs .tab-panel { display: none; } body.has-tabs .tab-panel.is-active { display: block; } body:not(.has-tabs) .tabs { display: none; } .form-actions .hint { margin: 8px 0 0; } /* ── Versionsgeschichte ─────────────────────────────────────────── */ .release-list { display: flex; flex-direction: column; gap: 14px; } .release-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; } .release-head .card-title { margin: 0; } .release-version { flex: none; font-family: var(--font-meta); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.5px; padding: 5px 11px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--muted); margin-top: 2px; } .release.is-current { border-color: var(--secondary); } .release.is-current .release-version { background: var(--secondary); border-color: var(--secondary); color: var(--on-primary); } .release-date { margin: 2px 0 0; font-size: 0.86rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .release-notes { margin: 0; padding-left: 20px; } .release-notes li { margin-bottom: 7px; line-height: 1.55; } .release-notes li:last-child { margin-bottom: 0; } /* ── Hinweisfenster ─────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 11, 10, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: djd-fade 0.2s ease; } @keyframes djd-fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px 30px 26px; max-width: 560px; width: 100%; max-height: 82vh; overflow-y: auto; } .modal h2 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); color: var(--heading); } .modal-lead { color: var(--muted); margin: 0 0 16px; } .modal-section { font-weight: 600; color: var(--heading); margin: 18px 0 8px; } .modal-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { .modal-backdrop { animation: none; } } .modal { position: relative; } .modal-close-form { position: absolute; top: 12px; right: 14px; margin: 0; } .modal-close { appearance: none; background: transparent; border: none; font-size: 1.6rem; line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; } .modal-close:hover { color: var(--heading); background: var(--surface-alt); } .modal-close:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; } /* Ein eigenes display: flex schlägt das [hidden] des Browsers – deshalb hier ausdrücklich. Ohne diese Zeile blieb der Speichern-Knopf auf den Karten „Neuerungen" und „Protokoll" sichtbar, obwohl er dort nichts zu tun hat. */ [hidden] { display: none !important; } /* ── Löschbereich ───────────────────────────────────────────────── */ .danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .danger-zone .card-title { color: var(--danger); } .danger-zone .form-group { max-width: 420px; } .brand-swatches .swatch-inherit { width: auto; min-width: 22px; height: 22px; border: 1px dashed var(--border); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--muted); padding: 0 7px; } /* ── Buchungsstrecke ────────────────────────────────────────────── */ .package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; } .package-option { cursor: pointer; margin: 0; } .package-option input { position: absolute; opacity: 0; width: 0; height: 0; } .package-body { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px 20px 20px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .package-option:hover .package-body { border-color: var(--secondary); } .package-option:has(input:checked) .package-body { border-color: var(--secondary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--secondary) 35%, transparent); } .package-option input:focus-visible + .package-body { outline: 2px solid var(--secondary); outline-offset: 2px; } .package-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .package-head strong { font-size: 1.15rem; color: var(--heading); } .package-price { font-family: var(--font-meta); font-weight: 700; color: var(--secondary); white-space: nowrap; } .package-desc { font-size: 0.92rem; color: var(--muted); line-height: 1.5; } .package-features { margin: 4px 0 0; padding-left: 18px; font-size: 0.9rem; } .package-features li { margin-bottom: 4px; } .package-hours { margin-top: auto; padding-top: 8px; font-family: var(--font-meta); font-size: 0.82rem; color: var(--muted); } .option-list { display: flex; flex-direction: column; gap: 2px; } .option-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; } .option-row:last-child { border-bottom: none; } .option-row input { margin-top: 3px; flex: none; } .option-text { flex: 1; } .option-text strong { display: block; color: var(--heading); font-size: 0.98rem; } .option-text small { color: var(--muted); } .option-price { font-family: var(--font-meta); font-weight: 600; white-space: nowrap; color: var(--text); } .booking-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--border); font-size: 1.05rem; } .booking-total strong { font-family: var(--font-meta); font-size: 1.45rem; color: var(--heading); } .total-row td { border-top: 2px solid var(--border); font-size: 1.05rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; margin-bottom: 18px; } .stat { display: flex; flex-direction: column; gap: 4px; } .stat-label { font-size: 0.85rem; color: var(--muted); } .stat-value { font-family: var(--font-meta); font-size: 1.8rem; font-weight: 700; color: var(--heading); line-height: 1.1; } .stat.is-warn { border-color: var(--warning); } .stat.is-warn .stat-value { color: var(--warning); } .stat .btn { align-self: flex-start; margin-top: 6px; } /* Hinweis auf eine fehlende Pflichtangabe – nur Administratoren sehen ihn. */ .todo-inline { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--warning-bg); color: var(--warning); font-size: 0.86rem; font-weight: 600; } /* ── Avatar-Creator (ab v0.6.0) ─────────────────────────────────── */ .avatar-layout { display: grid; grid-template-columns: minmax(min(280px, 100%), 400px) 1fr; gap: 26px; align-items: start; } .avatar-preview { position: sticky; top: 92px; } .avatar-stage { border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); background: #1d1d1c; } .avatar-stage svg { display: block; width: 100%; height: auto; } .avatar-controls { display: grid; gap: 18px; } .avatar-controls .card { margin: 0; } .pick-heading { font-family: var(--font-meta); font-size: 0.78rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; } .pick-row { display: flex; flex-wrap: wrap; gap: 8px; } .pick { position: relative; cursor: pointer; } /* Das Eingabefeld selbst bleibt bedienbar (Tastatur, Screenreader), sichtbar ist die Kachel daneben. */ .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .pick-body { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.92rem; transition: border-color 0.15s ease, background 0.15s ease; } .pick:hover .pick-body { border-color: var(--secondary); } .pick input:focus-visible + .pick-body { outline: 2px solid var(--secondary); outline-offset: 2px; } .pick input:checked + .pick-body { border-color: var(--heading); background: var(--surface-alt); font-weight: 600; } .pick-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); flex: none; } .pick-swatch .pick-body { padding: 7px 13px 7px 9px; } .stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pick-wide .pick-body { border-radius: var(--radius-sm); align-items: flex-start; flex-direction: column; gap: 4px; width: 100%; padding: 13px 16px; } .pick-wide small { color: var(--muted); font-weight: 400; line-height: 1.45; } .color-input { width: 76px; height: 42px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .logo-preview { background: var(--surface-alt); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 14px; text-align: center; } .logo-preview img { max-width: 200px; max-height: 90px; height: auto; } .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 20px; } .avatar-card .avatar-stage { margin-bottom: 16px; } .avatar-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .avatar-inline { display: flex; align-items: center; gap: 16px; } .avatar-inline .avatar-stage { width: 130px; flex: none; } .avatar-inline .stack-form { flex: 1 1 220px; } .avatar-inline .form-group { margin-bottom: 12px; } @media (max-width: 520px) { .avatar-inline { flex-direction: column; align-items: stretch; } .avatar-inline .avatar-stage { width: 100%; max-width: 220px; } } @media (max-width: 900px) { .avatar-layout { grid-template-columns: 1fr; } .avatar-preview { position: static; } .avatar-stage { max-width: 420px; margin-inline: auto; } } @media (max-width: 560px) { .stage-grid { grid-template-columns: 1fr; } } /* Kleines Avatarbild auf dem Kundendashboard */ .dashboard-avatar { max-width: 190px; margin: 4px 0 14px; } /* Vorstellung des Avatars auf der Startseite */ .showcase { display: grid; grid-template-columns: minmax(min(240px, 100%), 380px) 1fr; gap: 40px; align-items: center; } .showcase-text .section-title { text-align: left; margin-top: 6px; } .showcase-text p { max-width: 52ch; } @media (max-width: 820px) { .showcase { grid-template-columns: 1fr; gap: 26px; } .showcase-visual { max-width: 340px; margin-inline: auto; } } /* ── Musikverwaltung (ab v0.7.0) ────────────────────────────────── */ .track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .track { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--border); } .track:last-child { border-bottom: none; } .track-cover { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; } .track-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .track-text small { color: var(--muted); font-size: 0.85rem; } .track-from { font-style: italic; } .track-note { color: var(--secondary); } .track-actions { display: flex; gap: 8px; flex: none; } .track-actions select { padding: 6px 10px; font-size: 0.85rem; } .card-title .count { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); font-size: 0.78rem; font-family: var(--font-meta); vertical-align: middle; } .track-form { position: relative; } .search-hits { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); position: absolute; z-index: 5; width: 100%; max-width: 460px; } .search-hit { display: block; width: 100%; text-align: left; padding: 9px 12px; border: none; border-radius: 6px; background: none; color: var(--text); font: inherit; cursor: pointer; } .search-hit:hover, .search-hit:focus-visible { background: var(--surface-alt); } .guest-link { display: inline-block; padding: 10px 14px; word-break: break-all; } @media (max-width: 700px) { .track { flex-wrap: wrap; } .track-actions { width: 100%; } .track-actions .inline-form { flex-wrap: wrap; } } /* Musikübersicht in der Verwaltung */ .music-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px; } .music-column .plain-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; } .music-column .plain-list small { color: var(--muted); } .music-column.is-nogo .mini-title { color: var(--danger); } /* ── Redaktion (ab v0.8.0) ──────────────────────────────────────── */ .slug-row { display: flex; align-items: center; gap: 6px; } .slug-prefix { color: var(--muted); font-family: var(--font-meta); } .slug-row input { flex: 1 1 auto; } textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; line-height: 1.6; } .faq-row { padding: 16px 0; border-bottom: 1px dashed var(--border); } .faq-row:last-child { border-bottom: none; } /* Redaktionell gepflegter Text – überall gleich gesetzt. */ .prose { max-width: 68ch; } .prose h2 { font-family: var(--font-heading); font-size: 1.5rem; margin: 32px 0 12px; color: var(--heading); } .prose h3 { font-family: var(--font-heading); font-size: 1.2rem; margin: 26px 0 10px; color: var(--heading); } .prose h4 { font-size: 1.02rem; margin: 22px 0 8px; color: var(--heading); } .prose p { margin: 0 0 14px; line-height: 1.7; } .prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; } .prose li { line-height: 1.65; } .prose blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--secondary); background: var(--surface-alt); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .prose a { color: var(--secondary); } .prose > :first-child { margin-top: 0; } /* ── Systemprüfung in den Einstellungen (ab v0.8.1) ─────────────── */ .tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; vertical-align: middle; } .tab-dot.is-warn { background: var(--warning); } .tab-dot.is-fail { background: var(--danger); } .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .check { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--border); } .check:last-child { border-bottom: none; } .check-state { width: 11px; height: 11px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--muted); } .check.is-ok .check-state { background: var(--success); } .check.is-warn .check-state { background: var(--warning); } .check.is-fail .check-state { background: var(--danger); } .check-body { flex: 1 1 auto; min-width: 0; } .check-body h3 { font-size: 1rem; margin: 0 0 3px; display: flex; gap: 10px; align-items: baseline; } .check-body h3 small { font-family: var(--font-meta); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 1px; } .check-body p { margin: 0 0 4px; line-height: 1.55; } .check-details { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } /* ── Bewegung des Avatars (v0.8.3) ────────────────────────────────────── * * Alles hängt an zwei Werten, die auf dem stehen: * * --av-beat Dauer eines Taktschlags in Sekunden (aus dem Tempo) * --av-energy Ausschlag von 0 bis 1 (aus dem Energielevel der Phase) * * Damit gibt es EINEN Satz Keyframes statt drei Stufen zum Pflegen: Das * Tempo steuert die Dauer, die Energie den Ausschlag. Beide lassen sich * zur Laufzeit ändern, ohne die Animation neu zu starten – wer den * Regler schiebt, sieht die Wirkung sofort. * * Ohne data-dancing bewegt sich nichts. Ein stehendes Bild bleibt also * genau das Bild, das es vorher war. */ .avatar-svg { --av-beat: 0.5s; --av-energy: 0.7; } .avatar-svg .av-sway, .avatar-svg .av-nod, .avatar-svg .av-arm-layer, .avatar-svg .av-platter, .avatar-svg .av-light { transform-box: view-box; transform-origin: 200px 300px; } .avatar-svg .av-nod { transform-origin: 200px 176px; } .avatar-svg .av-platter-l { transform-origin: 132px 295px; } .avatar-svg .av-platter-r { transform-origin: 268px 295px; } .avatar-svg .av-light-l { transform-origin: 64px 24px; } .avatar-svg .av-light-r { transform-origin: 336px 24px; } .avatar-svg .av-light { opacity: 0; mix-blend-mode: screen; } .avatar-svg[data-dancing] .av-sway { animation: av-sway calc(var(--av-beat) * 2) ease-in-out infinite; } .avatar-svg[data-dancing] .av-nod { animation: av-nod var(--av-beat) ease-in-out infinite; } .avatar-svg[data-dancing] .av-arm-layer { animation: av-arms calc(var(--av-beat) * 2) ease-in-out infinite; } .avatar-svg[data-dancing] .av-platter { /* Ein Teller dreht sich gleichmäßig weiter, nicht im Takt hin und * her – deshalb linear und eine eigene, vom Takt unabhängige Dauer. */ animation: av-spin 1.8s linear infinite; } .avatar-svg[data-dancing] .av-light { animation: av-lights calc(var(--av-beat) * 2) ease-in-out infinite; } .avatar-svg[data-dancing] .av-light-r { animation-delay: var(--av-beat); } @keyframes av-sway { 0%, 100% { transform: translateY(0) rotate(calc(var(--av-energy) * -1.1deg)); } 50% { transform: translateY(calc(var(--av-energy) * -5px)) rotate(calc(var(--av-energy) * 1.1deg)); } } @keyframes av-nod { 0%, 100% { transform: translateY(0) rotate(calc(var(--av-energy) * -2.4deg)); } 50% { transform: translateY(calc(var(--av-energy) * 3px)) rotate(calc(var(--av-energy) * 2.4deg)); } } @keyframes av-arms { 0%, 100% { transform: translateY(0) rotate(calc(var(--av-energy) * 1.6deg)); } 50% { transform: translateY(calc(var(--av-energy) * -4px)) rotate(calc(var(--av-energy) * -1.6deg)); } } @keyframes av-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes av-lights { 0%, 100% { opacity: calc(var(--av-energy) * 0.16); transform: rotate(-8deg); } 50% { opacity: calc(var(--av-energy) * 0.62); transform: rotate(8deg); } } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. * Das ist keine Vorliebe, sondern für manche Menschen der Unterschied * zwischen benutzbar und übel – deshalb ohne Ausnahme und ohne Schalter, * der es überstimmt. Die Bedienung sagt es auch dazu. */ @media (prefers-reduced-motion: reduce) { .avatar-svg[data-dancing] .av-sway, .avatar-svg[data-dancing] .av-nod, .avatar-svg[data-dancing] .av-arm-layer, .avatar-svg[data-dancing] .av-platter, .avatar-svg[data-dancing] .av-light { animation: none; } } /* ── Bedienung ─────────────────────────────────────────────────────── */ .motion-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; } .motion-bar .btn { flex: none; } .motion-field { display: flex; align-items: center; gap: 9px; flex: 1 1 190px; min-width: 165px; } .motion-field label { font-family: var(--font-meta); font-size: 0.74rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin: 0; white-space: nowrap; } .motion-field input[type="range"] { flex: 1 1 auto; min-width: 70px; } .motion-value { font-variant-numeric: tabular-nums; font-family: var(--font-meta); font-size: 0.82rem; min-width: 58px; text-align: right; } .motion-phases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .motion-phase { font-family: var(--font-meta); font-size: 0.76rem; letter-spacing: 0.6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit; cursor: pointer; } .motion-phase:hover { border-color: var(--secondary); } .motion-phase.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; } .motion-note { margin-top: 10px; } /* ── Anfragen und Sicherungen (v0.9.0) ─────────────────────────────── */ /* Die Filterleiste im Posteingang benutzt die vorhandenen Pillen als * Links. Fehlte die aktive Kennzeichnung, waere nicht zu sehen, welcher * Filter gerade greift – und eine leere Liste sieht dann aus wie „keine * Anfragen" statt wie „keine mit diesem Zustand". */ a.chip-static { text-decoration: none; transition: background 0.15s ease; } a.chip-static:hover { background: color-mix(in srgb, var(--secondary) 32%, transparent); } .chip-static.is-active { background: var(--primary); color: var(--on-primary); font-weight: 600; } .nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; border-radius: 999px; background: var(--warning); color: #fff; font-family: var(--font-meta); font-size: 0.72rem; font-weight: 700; line-height: 1; } .nav-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--warning); vertical-align: 2px; } .ticket-list { list-style: none; margin: 0; padding: 0; } .ticket-row { border-bottom: 1px solid var(--border); } .ticket-row:last-child { border-bottom: none; } .ticket-link { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 4px; color: inherit; text-decoration: none; } .ticket-link:hover { color: var(--secondary); } .ticket-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ticket-main small { color: var(--muted); font-size: 0.83rem; } .ticket-side { display: flex; gap: 8px; flex-wrap: wrap; flex: none; } .ticket-row.is-unread .ticket-main strong::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--warning); } tr.is-unread td { background: var(--warning-bg); } /* Der Verlauf. Bewusst kein Chat-Fenster mit Blasen links und rechts in * Messenger-Optik: Es sind meist wenige, längere Nachrichten, und die * sollen lesbar sein. Die eigene Seite hebt sich nur ab, damit man auf * einen Blick sieht, wer zuletzt geschrieben hat. */ .chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .chat-bubble { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); } .chat-mine .chat-bubble { background: var(--surface-alt); border-color: transparent; } .chat-meta { display: flex; gap: 10px; align-items: baseline; margin: 0 0 8px; font-family: var(--font-meta); font-size: 0.8rem; } .chat-meta span { color: var(--muted); } .chat-body { line-height: 1.65; } .chat-body p { margin: 0 0 10px; } .chat-body p:last-child { margin-bottom: 0; } .chat-body ul, .chat-body ol { margin: 0 0 10px 20px; } /* ── Locationvorschläge (v0.9.1) ───────────────────────────────────── */ /* Die Trefferliste liegt absolut – ohne Bezugspunkt am Elternelement * würde sie am Kartenrand kleben statt unter dem Feld. Eine eigene * Klasse statt :has(), damit es genauso funktioniert wie bei der * Titelsuche und an keiner Browserfassung hängt. */ .venue-field { position: relative; } .search-hit .hit-mark { display: block; margin-top: 2px; font-family: var(--font-meta); font-size: 0.74rem; letter-spacing: 0.4px; color: var(--secondary); } .attribution { margin-top: 14px; } .attribution a { color: inherit; } /* ── Anfragen im Dashboard (v0.9.2) ────────────────────────────────── */ /* Ein anklickbarer Hinweiskasten. Der ganze Kasten ist der Link, nicht * nur ein Wort darin – wer ihn sieht, will hin. */ .notice-link { display: flex; align-items: center; gap: 14px; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; } .notice-link:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .notice-link strong { display: block; } .notice-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--danger); color: #fff; font-family: var(--font-meta); font-size: 1rem; font-weight: 700; line-height: 1; } /* Zweimal langsam pulsieren, dann Ruhe. Ein dauerhaft blinkender Kasten * wird nach zwei Tagen übersehen – und ist für manche Menschen schlicht * unerträglich. Deshalb endlich, und bei „weniger Bewegung" gar nicht. */ .notice-pulse { animation: notice-pulse 1.6s ease-in-out 2; } @keyframes notice-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 22%, transparent); } } @media (prefers-reduced-motion: reduce) { .notice-pulse { animation: none; } .notice-link:hover { transform: none; } } a.metric { text-decoration: none; color: inherit; } a.metric:hover { border-color: var(--secondary); } .metric-alert { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-bg); } .metric-alert .metric-value, .metric-alert .metric-label { color: var(--danger); } /* ── Gerenderte DJ-Figuren (v0.10.0) ───────────────────────────────── */ .dj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 20px; } .dj-card { margin: 0; } .dj-card .card-title { margin-top: 12px; } .dj-card .card-title a { color: inherit; text-decoration: none; } .dj-card .card-title a:hover { color: var(--secondary); } /* Fester Rahmen mit gleichem Seitenverhältnis: Ohne ihn springt die * Kachelhöhe, sobald eine Figur ein anderes Bildformat hat. */ .dj-cover { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: #1d1d1c; overflow: hidden; display: flex; align-items: center; justify-content: center; } .dj-cover img, .dj-cover video { width: 100%; height: 100%; object-fit: contain; display: block; } .dj-cover-empty { font-family: var(--font-meta); font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .dj-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .dj-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 18px; margin-top: 16px; } .dj-slot { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; } .dj-slot h3 { margin: 0 0 10px; font-size: 1rem; } .dj-slot input[type="file"] { width: 100%; font-size: 0.85rem; } .dj-slot-preview { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: #1d1d1c; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .dj-slot-preview img { width: 100%; height: 100%; object-fit: contain; } .dj-loop { width: 100%; max-width: 360px; border-radius: var(--radius-sm); background: #1d1d1c; display: block; } .avatar-stage video { display: block; width: 100%; height: auto; } /* ── Klappmenü in der Kopfzeile (v0.10.1) ──────────────────────────── */ .chip-menu { position: relative; } .chip-menu > summary { list-style: none; cursor: pointer; user-select: none; } .chip-menu > summary::-webkit-details-marker { display: none; } .chip-menu > summary::marker { content: ''; } .chip-menu[open] > summary { border-color: var(--secondary); } .chip-caret { opacity: 0.55; transition: transform 0.15s ease; flex: none; } .chip-menu[open] .chip-caret { transform: rotate(180deg); } .chip-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 252px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); } .chip-panel-head { margin: 6px 8px 4px; font-family: var(--font-meta); font-size: 0.7rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } .chip-panel-head:first-child { margin-top: 2px; } .chip-panel form { margin: 0; } .chip-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; } .chip-option:hover, .chip-option:focus-visible { background: var(--surface-alt); } .chip-option.is-active { font-weight: 600; color: var(--heading); } .chip-swatches { display: inline-flex; gap: 2px; flex: none; } .chip-swatches span { width: 10px; height: 16px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .chip-inherit { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 16px; border-radius: 3px; border: 1px dashed var(--border); font-size: 0.7rem; color: var(--muted); } .chip-check { margin-left: auto; color: var(--success); } .chip-more { display: block; margin-top: 6px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); text-decoration: none; } .chip-more:hover { color: var(--secondary); } @media (max-width: 760px) { .chip-panel { right: auto; left: 0; } } /* ── Mail-Logo (v0.10.2) ───────────────────────────────────────────── */ /* Heller Grund, weil E-Mails hell sind: Ein Logo, das nur auf dunklem * Grund funktioniert, fiele hier auf – und genau das soll es. */ .mail-logo-preview { display: flex; align-items: center; padding: 20px; margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f2efeb; } .mail-logo-preview img { max-width: 100%; height: auto; display: block; } /* ── Kontaktformular (v0.12.0) ─────────────────────────────────────── */ /* Der Honigtopf. * * NICHT display:none und nicht hidden – manche Bots überspringen genau * das, weil sie diese Falle kennen. Stattdessen aus dem Sichtfeld * geschoben: für das Auge weg, im Quelltext ein ganz normales Feld. * * Beim Drucken ebenfalls weg, sonst steht auf dem Ausdruck ein leeres * Kästchen ohne erkennbaren Zweck. */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Eckdaten einer Anfrage im Posteingang: Beschriftung links, Wert * rechts, und der Terminhinweis darf ausbrechen. */ .enquiry-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 4px; font-size: 0.94rem; } .enquiry-facts dt { color: var(--muted); } .enquiry-facts dd { margin: 0; color: var(--heading); font-weight: 500; } /* Frei oder vergeben – die Farbe muss man auf zwei Meter Abstand * unterscheiden können, ohne den Text zu lesen. */ .slot-free { color: var(--success); font-weight: 600; } .slot-taken { color: var(--danger); font-weight: 600; } /* Der Abschnitt unten auf der Startseite. */ .contact-teaser { display: grid; gap: 18px; align-items: start; } @media (min-width: 860px) { .contact-teaser { grid-template-columns: 1fr 1fr; gap: 40px; } } /* ── Kopfzeile auf schmalen Geräten (Korrektur in v0.12.0) ───────── * * Gefunden beim Nachmessen der neuen Kontaktseite auf 390 Pixel – der * Breite eines iPhone 14. Die Kopfzeile war dort 444 Pixel breit, und * damit ließ sich JEDE Seite der Website seitlich verschieben. Das war * kein Fehler der Kontaktseite: Es galt seit jeher und auf allen * Seiten, nur hat es niemand gemessen. * * Warum das mehr ist als Kosmetik: Wer auf einem Handy versehentlich * zur Seite wischt, rutscht beim Tippen aus dem Formularfeld. Und * genau auf dem Handy wird eine Anfrage geschrieben. * * Behoben wird die Ursache – engere Abstände und ein kleinerer Knopf – * und nicht das Symptom. Ein `overflow-x: hidden` am Body würde das * Verschieben unterbinden und den zu breiten Kopf trotzdem behalten; * beim nächsten Knopf wäre alles wieder da, nur unsichtbar. */ @media (max-width: 560px) { .header-inner { gap: 12px; } .header-actions { gap: 6px; } .brand-name { font-size: 1.05rem; } .header-actions .btn { padding: 9px 14px; font-size: 0.85rem; } } /* Unter 380 Pixel (iPhone SE) muss der Schriftzug weichen. Das Signet * bleibt und führt weiterhin zur Startseite – ein Logo ohne Wort ist * besser als ein Wort, das den Anmeldeknopf hinausschiebt. */ @media (max-width: 380px) { .brand-name { display: none; } } /* Lange deutsche Wörter. * * „Allgemeine Geschäftsbedingungen" und „Datenschutzerklärung" passen * auf 390 Pixel nicht in eine Zeile und schoben die Seite um 15 Pixel * auf. Aufgefallen ist das erst beim Nachmessen von scrollWidth – im * Screenshot sah die Überschrift völlig normal aus, weil der Text den * Rahmen verlässt, ohne dass der Rahmen breiter wird. * * `hyphens: auto` trennt nach deutschen Regeln (lang="de" steht am * html-Element), `overflow-wrap` fängt ab, was auch dann nicht passt. */ h1, h2, h3, .page-title, .section-title, .card-title { overflow-wrap: break-word; hyphens: auto; } /* ── Klappmenü auf dem Handy (Korrektur in v0.12.2) ──────────────── * * Der gemeldete Fehler: „Auf dem Handy ist das Drop-Down-Menü nicht zu * sehen." Er war schlimmer als er klang. Für Angemeldete standen die * Menüpunkte ausschließlich in der Leiste rechts, und die blendet die * Handy-Ansicht per `.btn-ghost { display: none }` aus. Das Klappmenü * war für sie leer – ein 25 Pixel hoher Streifen ohne Inhalt. * * Wer sich auf dem Handy anmeldete, konnte danach genau eines: sich * wieder abmelden. Keine Events, keine Buchungen, keine Rechnungen, * für Administratoren nicht einmal die Verwaltung. * * Die Punkte werden jetzt aus einer Liste zweimal gezeichnet. Damit sie * auf dem Desktop nicht doppelt dastehen – einmal als Menü, einmal als * Knöpfe –, verschwindet die Menüfassung dort. */ @media (min-width: 1181px) { .main-nav.is-account { display: none; } } /* ── Wann die Leiste zum Klappmenü wird ──────────────────────────── * * Für Gäste bei 860 Pixeln – sechs kurze Punkte passen bis dahin. * * Für Angemeldete schon bei 1180. Ihre Leiste trägt bis zu acht * Knöpfe (Verwaltung, Events, Dein DJ, Buchungen, Rechnungen, * Anfragen, Konto, Abmelden) und braucht dafür 1162 Pixel. Auf einem * iPad quer und auf einem kleinen Notebook stand sie deshalb über den * Rand hinaus – jede Seite des Kundenbereichs ließ sich dort seitwärts * schieben. Gemessen, nicht geschätzt: 1162 von 1024 verfügbaren. */ @media (max-width: 1180px) { .site-header.is-account .main-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 22px 16px; max-height: calc(100vh - 68px); overflow-y: auto; } .site-header.is-account .main-nav.open { display: flex; } .site-header.is-account .main-nav a { padding: 12px 0; border-bottom: 1px dashed var(--border); } .site-header.is-account .main-nav a:last-of-type { border-bottom: none; } .site-header.is-account .nav-toggle { display: inline-flex; } .site-header.is-account .header-actions .btn-ghost, .site-header.is-account .header-actions .inline-form { display: none; } .site-header.is-account .nav-logout { display: block; margin: 0; } .site-header.is-account .nav-logout button { appearance: none; background: none; border: none; padding: 12px 0; width: 100%; text-align: left; font: inherit; font-weight: 500; font-size: 0.98rem; color: var(--muted); cursor: pointer; } .site-header.is-account .nav-logout button:hover { color: var(--heading); } } @media (max-width: 860px) { /* Sieben Menüpunkte plus Abmelden passen auf ein liegendes Handy * nicht mehr. Ohne diese beiden Zeilen wären die letzten Punkte * unter dem unteren Bildschirmrand – sichtbar wäre das Menü dann * zwar, benutzbar nicht. */ .main-nav { max-height: calc(100vh - 68px); overflow-y: auto; } /* Abmelden sieht im Klappmenü aus wie ein Menüpunkt, nicht wie ein * Fremdkörper – es steht dort in derselben Spalte wie alles andere. */ .nav-logout { margin: 0; } .nav-logout button { appearance: none; background: none; border: none; padding: 12px 0; width: 100%; text-align: left; font: inherit; font-weight: 500; font-size: 0.98rem; color: var(--muted); cursor: pointer; } .nav-logout button:hover { color: var(--heading); } } /* Auf dem Desktop steht Abmelden als Knopf in der Leiste – die Fassung * im Klappmenü wäre dort die zweite. */ @media (min-width: 1181px) { .nav-logout { display: none; } } /* ── Verwaltung auf dem Handy (Korrektur in v0.12.2) ─────────────── * * Der ganze Verwaltungsbereich ließ sich auf jedem Handy seitwärts * schieben – bei 320 wie bei 768 Pixeln, auf jeder Unterseite. * * Zwei Ursachen: * * 1. Die Kopfleiste (Titel, „Live", Stilwelt-Chips, Konto) stand in * einer Zeile ohne Umbruch und brauchte 439 Pixel. * 2. Jedes Raster war mit `minmax(340px, 1fr)` gebaut. Das liest sich * wie „mindestens 340 breit", heißt aber: NIE schmaler als 340 – * auch nicht, wenn der Bildschirm nur 358 Pixel Platz hat. Behoben * mit `minmax(min(340px, 100%), 1fr)`: unter 340 gewinnt die * Bildschirmbreite. Betrifft 16 Raster im ganzen Programm, nicht * nur die Verwaltung. */ @media (max-width: 900px) { .admin-topbar { flex-wrap: wrap; row-gap: 8px; } /* Der Titel darf die ganze erste Zeile haben, die Chips rutschen * darunter. Sonst bricht mitten zwischen zwei Chips um und der * Titel steht allein neben einem halben Statuszeichen. */ .admin-topbar-title { flex-basis: calc(100% - 52px); } } /* ── Tippziele auf Geräten ohne Maus (v0.12.2) ───────────────────── * * Gemessen auf 390 Pixeln: Die Links im Seitenfuß waren 25 Pixel hoch * und lagen 8 Pixel auseinander – vier Ziele in 132 Pixeln * übereinander. Wer mit dem Daumen „Impressum" trifft, landet ebenso * oft auf „Datenschutz". Das Auge sagt „ja"; der Daumen ist 45 bis 57 * Pixel breit. * * Die Abfrage geht bewusst über `pointer: coarse` und nicht über die * Bildschirmbreite. Es geht nicht um schmale Fenster, sondern um * Finger: Ein schmales Browserfenster auf dem Notebook braucht keine * größeren Ziele, ein Tablet mit 1024 Pixeln sehr wohl. */ @media (pointer: coarse) { .footer-nav { gap: 0; } .footer-nav a { padding: 11px 0; } /* Das Auge im Passwortfeld war 28 Pixel breit. Es sitzt im Feld, * also wächst es nach innen statt über den Rand. */ .password-toggle { padding: 12px; } /* Chips und Textknöpfe bekommen Höhe, ohne ihre Form zu verlieren. */ .motion-phase, .status-chip, .tab { min-height: 40px; } .link-btn { padding: 9px 0; } /* Der Schließen-Knopf eines Fensters ist der, den man am * schnellsten trifft – oder eben daneben. */ .modal-close { width: 44px; height: 44px; } /* Ein Link in einem Hinweiskasten ist eine Aufforderung, kein * Fließtext („Fertige DJs ansehen"). Er bekommt deshalb Fläche – * anders als ein Name in einer Tabellenzeile, den man als Wort * antippt. */ .msg a, .notice-warning a, .notice-danger a, .notice-info a { display: inline-block; padding: 8px 0; } } /* ── Eventkarte auf schmalen Geräten (v0.12.2) ───────────────────── * * „Testfeier" stand als „Testfei / er" da, „Sommerfest" als * „Somm / erfest". Nicht die Worttrennung war schuld, sondern die * Aufteilung: Datum, Titel, Statusschild und Countdown standen auch * auf 390 Pixeln nebeneinander. Für den Titel blieben rund 60 Pixel, * und `overflow-wrap` tat, was es soll – irgendwo brechen, damit * nichts über den Rand läuft. * * Die Notbremse bleibt (sie hat die AGB-Überschrift gerettet). Behoben * wird die Ursache: Der Titel bekommt Platz, Schild und Countdown * rutschen in eine zweite Zeile. */ @media (max-width: 560px) { .event-card { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; } /* 140 Pixel Mindestbreite: Darunter bricht die Karte lieber um, * als den Titel zu zerlegen. */ .event-body { flex: 1 1 140px; } .event-side { flex: 1 1 100%; display: flex; flex-direction: row; align-items: center; gap: 10px; justify-items: start; text-align: left; } } /* ── Überschriften auf schmalen Geräten (v0.12.2) ────────────────── * * „Datenschutzerklärung" brach auf dem Handy als „Datenschutzerklär / * ung" um – ohne Trennstrich, mitten in der Silbe. * * Schuld war nicht die Notbremse `overflow-wrap`, sondern die Größe: * Das Wort braucht bei 30 Pixeln Schriftgröße 375 Pixel, verfügbar * sind auf einem 390er Bildschirm 346. Also bricht es. Auf einen * Trennstrich ist kein Verlass – `hyphens: auto` setzt voraus, dass * der Browser deutsche Trennregeln mitbringt, und manche tun das nicht. * * Nachgemessen statt geschätzt: „Datenschutzerklärung" passt ab 27,5 * Pixeln, „Verbraucherstreitbeilegung" als Zwischenüberschrift ab 21. * Die Werte unten liegen darunter. */ @media (max-width: 560px) { .page-title { font-size: 1.6rem; } .section-title { font-size: 1.5rem; margin-bottom: 28px; } .legal h2 { font-size: 1.1rem; } } /* Auf 320 Pixeln (iPhone SE der ersten Reihe, ältere Android-Geräte) * bleiben nur 276 Pixel Textbreite. Dort muss auch die * „Datenschutzerklärung" noch in eine Zeile. */ @media (max-width: 380px) { .page-title { font-size: 1.35rem; } .section-title { font-size: 1.3rem; } } /* ══════════════════════════════════════════════════════════════════ * KACHEL-DASHBOARD UND PLAYLISTEN (ab v0.14.0) * * Alles hier folgt den vorhandenen Farbtokens. Kein einziger fester * Farbwert: Die drei Erscheinungsbilder (Salon, Nachtclub, Studio) und * der Hell-Dunkel-Schalter müssen weiter greifen, ohne dass jemand * daran denkt. * ══════════════════════════════════════════════════════════════════ */ /* Für Überschriften, die es geben muss, damit die Gliederung stimmt, * die aber niemand sehen soll. `display: none` wäre falsch – ein * Screenreader liest sie dann auch nicht. */ .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; } /* ── Kacheln ────────────────────────────────────────────────────── * * Das Raster ist bewusst `auto-fit` mit einer Mindestbreite und nicht * eine feste Spaltenzahl je Bildschirmgröße: Die Zahl der Kacheln * wächst mit den Modulen, und eine Regel „drei nebeneinander" wäre * beim übernächsten Modul falsch. * * min(260px, 100%) statt 260px: Auf einem 320er Bildschirm bliebe * sonst eine Spalte von 260 Pixeln neben 22 Pixeln Rand stehen und * die Seite ließe sich seitlich schieben. */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; margin: 26px 0 34px; } .tile { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; /* Auf dem Handy soll die ganze Fläche mit dem Daumen zu treffen * sein, nicht nur die Beschriftung. */ min-height: 168px; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--secondary); } /* Der Fokusrahmen ist nicht dekorativ. Wer die Seite mit der Tastatur * bedient, sieht sonst nicht, wo er steht. */ .tile:focus-visible { outline: 3px solid var(--secondary); outline-offset: 3px; } .tile.is-highlight { border-color: var(--secondary); box-shadow: var(--shadow); } .tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tile-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--secondary) 14%, transparent); color: var(--secondary); } .tile-title { font-size: 1.15rem; font-weight: 600; color: var(--heading); } .tile-text { font-size: 0.94rem; color: var(--muted); flex: 1; } .tile-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--heading); } .tile:hover .tile-cta svg { transform: translateX(3px); } .tile-cta svg { transition: transform 0.18s ease; } /* Wer „reduzierte Bewegung" eingestellt hat, hat das aus einem Grund * getan. */ @media (prefers-reduced-motion: reduce) { .tile, .tile-cta svg { transition: none; } .tile:hover { transform: none; } } /* ── Titel-Listen ─────────────────────────────────────────────────*/ .track-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .track-list.is-numbered { counter-reset: track; } .track-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-alt); flex-wrap: wrap; } .track-list.is-numbered .track-row::before { counter-increment: track; content: counter(track); min-width: 1.6em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .track-row.is-done { opacity: 0.55; } .track-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; } .track-body strong { overflow-wrap: anywhere; } .track-cover { border-radius: 8px; object-fit: cover; flex: none; } .track-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Auf der Live-Ansicht zählt Treffsicherheit mehr als Dichte: Die Seite * wird im Halbdunkeln mit einer Hand bedient. */ .track-list.is-live .track-row { padding: 14px; gap: 14px; } .track-list.is-live .btn { min-height: 44px; } .vote-count { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--secondary); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .track-list.is-guest .btn { min-height: 40px; } .track-list.is-compact .track-row { padding: 8px 12px; } /* ── Listen des Anbieters beim Anmelden ───────────────────────────*/ .remote-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .remote-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; flex-wrap: wrap; } .remote-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; } .remote-cover { border-radius: 8px; object-fit: cover; flex: none; } .remote-cover.is-empty { width: 48px; height: 48px; background: var(--surface-alt); } /* ── Kleinkram ────────────────────────────────────────────────────*/ .numbered-list { margin: 0 0 18px; padding-left: 1.3em; display: grid; gap: 6px; } .soft-divider { border: 0; border-top: 1px solid var(--border); margin: 18px 0; } .inline-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } .qr-stage { display: flex; justify-content: center; padding: 14px; background: #fff; border-radius: var(--radius); margin-bottom: 14px; } /* Der Gästelink wird abgetippt, abfotografiert und weitergeschickt. * `anywhere` statt `break-word`, weil eine Adresse ohne Leerzeichen * sonst aus dem Kasten läuft. */ .link-box code { display: block; padding: 10px 12px; background: var(--surface-alt); border-radius: 10px; overflow-wrap: anywhere; font-size: 0.92rem; } @media (max-width: 560px) { .tile { min-height: 150px; padding: 18px; } .track-actions { width: 100%; justify-content: flex-start; } } /* Das Symbol in der Kachel. Eigene Klasse, damit die Form nicht an der * Schriftgröße hängt: In der Kachel steht sie neben einem Kennzeichen, * und ein Symbol, das mit dem Text mitwächst, verrutscht dabei. */ .tile-icon { display: block; } /* Sprachwahl auf der Gästeseite. Sie steht ganz unten und darf so * aussehen: eine Zeile, zwei Wörter, kein Menü. */ .lang-switch { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════════ * PLAYER UND LICHTSZENEN (ab v0.15.0) * ══════════════════════════════════════════════════════════════════ */ .player-now { display: flex; align-items: center; gap: 14px; margin: 14px 0; min-height: 64px; } .player-cover { border-radius: 10px; object-fit: cover; flex: none; } .player-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .player-meta strong { overflow-wrap: anywhere; } /* Die drei Knöpfe stehen mittig und sind groß: Diese Seite wird im * Halbdunkeln mit einer Hand bedient, und ein danebengegriffener * „Weiter" ist auf einer Feier sofort hörbar. */ .player-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 18px; } .player-controls .btn { min-width: 64px; min-height: 48px; } .player-controls .btn-lg { min-width: 88px; min-height: 56px; font-size: 1.3rem; } /* Ein Lautstärkeregler, der nur so breit ist wie ein Textfeld, lässt * sich mit dem Daumen nicht genau treffen. Er nimmt die ganze Breite. */ .volume-row input[type="range"] { width: 100%; accent-color: var(--secondary); height: 32px; } .volume-row .form-label { display: flex; justify-content: space-between; gap: 10px; } /* Auswahl mit Knopf daneben – „nimm diese Liste". */ .inline-select { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .inline-select select { flex: 1 1 220px; } /* Lichtszenen. Der Farbtupfer steht links und ist das Einzige an der * Zeile, das man aus zwei Metern Entfernung erkennt. */ .scene-row { position: relative; padding-left: 26px; } .scene-swatch { position: absolute; left: 0; top: 6px; width: 14px; height: 44px; border-radius: 7px; border: 1px solid var(--border); } .scene-actions { margin: 0 0 18px; } .scene-row input[type="color"] { width: 100%; height: 42px; padding: 4px; } @media (max-width: 560px) { .player-controls .btn { min-width: 56px; } .scene-row { padding-left: 0; } .scene-swatch { position: static; width: 100%; height: 8px; margin-bottom: 10px; display: block; } } /* ══════════════════════════════════════════════════════════════════ * PROZESS-SCHRITTE AUF DER STARTSEITE (ab v0.16.0) * * Nach der Vorlage: drei freistehende Liniensymbole, dazwischen eine * dünne Linie, darunter die Beschriftung in Serifen. Keine Kästen, * keine Nummernkreise, viel Luft. * * Kein einziger fester Farbwert. Im Salon wird daraus Terrakotta auf * Beige wie in der Vorlage, bei DJ Dirk Magenta auf Dunkel – dieselbe * Zeichnung, andere Welt. * ══════════════════════════════════════════════════════════════════ */ .process { /* Der Abstand steht als Variable, weil die Verbindungslinie mit * ihm rechnet: Sie reicht von der Mitte eines Symbols bis zur * Mitte des nächsten und muss den Zwischenraum überbrücken. */ --process-gap: 26px; --process-icon: 72px; list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--process-gap); } .process-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 6px; } .process-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--process-icon); height: var(--process-icon); color: var(--secondary); } .process-glyph { display: block; } /* Die Linie zum nächsten Schritt. * * Sie beginnt rechts neben diesem Symbol und endet links neben dem * nächsten. Da alle Spalten gleich breit sind, ist der Abstand von * Mitte zu Mitte genau „Spaltenbreite + Abstand" – daher die * Rechnung: 100 % der eigenen Breite plus der Zwischenraum, minus * einmal Symbolbreite und zweimal Luft. */ .process-connector { position: absolute; top: calc(var(--process-icon) / 2); left: calc(50% + var(--process-icon) / 2 + 16px); width: calc(100% + var(--process-gap) - var(--process-icon) - 32px); height: 1.5px; background: var(--secondary); opacity: 0.5; transform-origin: left center; } /* Hinter dem letzten Schritt kommt nichts mehr. Eine Linie, die ins * Nichts zeigt, sieht nach vergessenem vierten Schritt aus. */ .process-step:last-child .process-connector { display: none; } .process-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--heading); margin: 6px 0 0; letter-spacing: var(--heading-tracking); } .process-text { color: var(--muted); font-size: 0.94rem; margin: 0; max-width: 30ch; } /* ── Die Animation ──────────────────────────────────────────────── * * Greift ausschließlich, wenn das Skript `is-animated` gesetzt hat. * Ohne JavaScript trifft keine der folgenden Regeln zu, und oben * steht bereits alles sichtbar da. * * `--step` staffelt die Verzögerung. Eine vierte Kachel würde sich * ohne weiteres Zutun einreihen – es gibt keine Regel je Schritt. */ .process.is-animated .process-step { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease calc(var(--step, 0) * 0.16s), transform 0.5s ease calc(var(--step, 0) * 0.16s); } /* Das Symbol kommt eine Spur später und etwas kleiner herein – so * wirkt es gezeichnet statt eingeblendet. */ .process.is-animated .process-glyph { opacity: 0; transform: scale(0.86); transition: opacity 0.45s ease calc(var(--step, 0) * 0.16s + 0.08s), transform 0.45s ease calc(var(--step, 0) * 0.16s + 0.08s); } /* Die Linie wächst nach dem Symbol von links nach rechts – so liest * man die Reihenfolge, ohne dass Nummern dastehen müssen. */ .process.is-animated .process-connector { transform: scaleX(0); transition: transform 0.5s ease calc(var(--step, 0) * 0.16s + 0.26s); } .process.is-animated.is-visible .process-step { opacity: 1; transform: none; } .process.is-animated.is-visible .process-glyph { opacity: 1; transform: none; } .process.is-animated.is-visible .process-connector { transform: scaleX(1); } /* Wer „reduzierte Bewegung" eingestellt hat, hat das meist aus einem * gesundheitlichen Grund getan. Dann steht alles sofort da. */ @media (prefers-reduced-motion: reduce) { .process.is-animated .process-step, .process.is-animated .process-glyph, .process.is-animated .process-connector { opacity: 1; transform: none; transition: none; } } /* Auf dem Handy stehen die Schritte untereinander. Die Linie wandert * unter das Symbol und wächst nach unten – dieselbe Bewegung, * gedrehte Achse. */ @media (max-width: 760px) { .process { --process-gap: 34px; grid-template-columns: 1fr; } .process-connector { top: auto; bottom: calc(var(--process-gap) * -1); left: 50%; width: 1.5px; height: var(--process-gap); transform-origin: center top; } .process.is-animated .process-connector { transform: scaleY(0); } .process.is-animated.is-visible .process-connector { transform: scaleY(1); } .process-text { max-width: 34ch; } } /* ══════════════════════════════════════════════════════════════════ * IPAD UND TOUCH (ab v0.17.0) * * Die Seite lief auf dem iPad schon vorher – aber mit vier Ecken, an * denen man hängen bleibt. Sie sind hier abgeräumt, in der Reihenfolge, * in der sie beim Ausprobieren auffallen. * ══════════════════════════════════════════════════════════════════ */ /* 1. Safari zoomt beim Antippen eines Eingabefelds, dessen Schrift * kleiner als 16 Pixel ist. Danach steht die Seite verschoben und * der Besucher muss von Hand herauszoomen – er hält das für einen * Fehler der Seite, und er hat recht. * * `pointer: coarse` trifft Finger, nicht Maus: Am Schreibtisch * bleiben die kleineren Größen erhalten. */ @media (pointer: coarse) { input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], select, textarea, .filter-bar input[type="search"], .filter-bar select, .track-actions select { font-size: 16px; } /* 2. Alles, was man antippt, mindestens 44 Punkte hoch – das Maß, * das Apple seit Jahren nennt und das ungefähr einer * Fingerkuppe entspricht. Darunter trifft man daneben, und auf * einer Feier ist „daneben" ein abgelehnter Wunsch. */ .btn, .icon-btn, .badge[href], .nav-logout button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .btn-sm { min-height: 44px; padding-top: 8px; padding-bottom: 8px; } /* 3. Doppeltipp-Zoom kostet Safari 300 ms Wartezeit vor jedem * Klick. Ohne ihn reagiert die Seite sofort. */ a, button, summary, label, .tile, .track-row { touch-action: manipulation; } /* 4. Der graue Kasten, den iOS beim Antippen über Links legt, * passt in keine der vier Welten. Der Fokusrahmen bleibt – er * ist kein Schmuck, sondern die einzige Rückmeldung für alle, * die mit Tastatur arbeiten. */ a, button { -webkit-tap-highlight-color: transparent; } } /* 5. Auf einem Touchgerät bleibt ein Hover-Zustand „kleben": Man tippt * eine Kachel an, kommt zurück – und sie steht immer noch angehoben * da, als wäre der Finger noch drauf. Deshalb greifen die * Bewegungen nur, wo es einen Zeiger gibt, der schweben kann. */ @media (hover: none) { .btn:hover, .tile:hover, .card:hover { transform: none; box-shadow: none; } .tile:hover { border-color: var(--border); } } /* 6. Der Bildschirmrand des iPad Pro ist rund, und unten liegt der * Home-Balken. Ohne diese Abstände steht der letzte Knopf darunter. * Wirkt nur mit `viewport-fit=cover` im Kopf der Seite. */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); } /* 7. Quer und hoch: Auf dem iPad (768–1024 Punkte) stehen die sechs * Kacheln in zwei Spalten statt in einer schmalen Reihe. Bei * `auto-fit` allein käme dort je nach Zoomstufe mal zwei, mal drei * heraus – das sieht bei jedem Aufklappen anders aus. */ @media (min-width: 700px) and (max-width: 1024px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } .card-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════════ * KIOSK-MODUS (ab v0.17.0) * * Für ein iPad, das im Saal steht. Zwei Betriebsarten, dieselbe Hülle: * keine Kopfzeile, kein Menü, kein Weg hinaus, große Flächen. * * Zum Sperren dient „Geführter Zugriff" von iOS – das ist eine * Einstellung des Geräts, keine der Website. Diese Seiten sorgen nur * dafür, dass es innerhalb der App nichts gibt, was jemand versehentlich * anfassen könnte. * ══════════════════════════════════════════════════════════════════ */ .kiosk-body { min-height: 100dvh; display: flex; flex-direction: column; /* Kein Textmarkieren, kein Lupen-Popup beim Halten. Gilt NICHT für * Eingabefelder – dort braucht man beides. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .kiosk-body input, .kiosk-body textarea { -webkit-user-select: text; user-select: text; } .kiosk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(18px + env(safe-area-inset-top)) 26px 14px; border-bottom: 1px solid var(--border); } .kiosk-title { font-size: 1.3rem; margin: 0; color: var(--heading); } .kiosk-sub { color: var(--muted); font-size: 0.95rem; margin: 2px 0 0; } .kiosk-main { flex: 1; padding: 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); width: 100%; max-width: 1100px; margin: 0 auto; } /* Auf dem Gäste-iPad steht das Formular groß und mittig: Wer davor * steht, hat eine Aufgabe, und die soll die ganze Fläche einnehmen. */ .kiosk-guest .form-label { font-size: 1.05rem; } .kiosk-guest input[type="text"] { padding: 18px 18px; font-size: 18px; } .kiosk-guest .btn { font-size: 1.1rem; padding: 18px 30px; } /* Die Dankesmeldung nach einem Wunsch. Groß genug, dass man sie aus * zwei Metern liest, und sie verschwindet von selbst wieder. */ .kiosk-thanks { text-align: center; padding: 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); font-size: 1.15rem; font-weight: 600; margin-bottom: 22px; } /* Am Pult zählt Treffsicherheit: zwei Knöpfe, so groß wie möglich. */ .kiosk-wish { display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 14px; flex-wrap: wrap; } .kiosk-wish .track-body { flex: 1 1 220px; } .kiosk-wish strong { font-size: 1.15rem; } .kiosk-wish .btn { min-width: 132px; min-height: 60px; font-size: 1.05rem; } .kiosk-empty { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 1.1rem; } /* Der Weg hinaus liegt klein unten rechts und fragt nach. Ein Knopf * „Beenden" in Daumennähe wäre auf einer Feier eine Zeitfrage. */ .kiosk-exit { text-align: right; padding: 0 26px calc(18px + env(safe-area-inset-bottom)); } .kiosk-exit a, .kiosk-exit button { color: var(--muted); font-size: 0.85rem; background: none; border: 0; text-decoration: underline; cursor: pointer; } /* Anleitung für den Geführten Zugriff – steht auf der Startseite des * Kiosk-Bereichs, nicht im Kiosk selbst. */ .kiosk-steps { counter-reset: kiosk; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .kiosk-steps li { counter-increment: kiosk; display: flex; gap: 14px; align-items: flex-start; } .kiosk-steps li::before { content: counter(kiosk); flex: none; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--secondary); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }