/* ══════════════════════════════════════════════════════════════════ MARKENPORTAL FRAMEWORK Modulares CSS-Framework für alle Markenportal-Module Theme-Switching via data-theme Attribut auf ══════════════════════════════════════════════════════════════════ */ /* ─── Fonts ─────────────────────────────────────────────────────── */ @font-face { font-family: 'Abel'; src: url('../fonts/Abel-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'ReutlingenSans'; src: url('../fonts/ReutlingenSans-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* ─── CSS Variables (Dark Mode Default) ─────────────────────────── */ :root { /* Font Scale (controlled by slider, 14-20) */ --font-scale: 16; /* Typography Scale (8 Stufen) */ --text-xxs: calc(var(--font-scale) * 0.625px); --text-xs: calc(var(--font-scale) * 0.7px); --text-sm: calc(var(--font-scale) * 0.75px); --text-base: calc(var(--font-scale) * 0.85px); --text-md: calc(var(--font-scale) * 1px); --text-lg: calc(var(--font-scale) * 1.125px); --text-xl: calc(var(--font-scale) * 1.5px); --text-xxl: calc(var(--font-scale) * 2px); /* Dark Palette */ --bg-base: #1a1a1a; --bg-panel: #222222; --bg-elevated: #2a2a2a; --bg-input: #333333; --bg-hover: #3a3a3a; /* Text hierarchy */ --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #707070; /* Borders */ --border: #3a3a3a; --border-hover: #4a4a4a; /* Accent mit Glow */ --accent: #3b82f6; --accent-hover: #60a5fa; --accent-muted: rgba(59, 130, 246, 0.2); --accent-glow: rgba(59, 130, 246, 0.4); /* Brand Colors (Reutlingen) */ --brand-red: #FF0050; --brand-pink: #FA9BD2; --brand-red-glow: rgba(255, 0, 80, 0.4); /* Semantic colors */ --success: #22c55e; --warning: #eab308; --error: #ef4444; /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.25); --shadow-lg: 0 8px 32px rgba(0,0,0,0.3); --shadow-glow: 0 0 30px var(--accent-glow); /* Focus ring */ --focus-ring: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); /* Transitions */ --transition: 0.15s ease; } /* ─── Light Mode Variables ──────────────────────────────────────── */ [data-theme="light"] { /* Light Palette */ --bg-base: #f5f5f7; --bg-panel: #ffffff; --bg-elevated: #fafafa; --bg-input: #f0f0f2; --bg-hover: #e8e8ec; /* Text hierarchy */ --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-muted: #98989d; /* Borders */ --border: #d2d2d7; --border-hover: #c0c0c5; /* Accent */ --accent: #0071e3; --accent-hover: #0077ed; --accent-muted: rgba(0, 113, 227, 0.12); --accent-glow: rgba(0, 113, 227, 0.25); /* Semantic colors */ --success: #34c759; --warning: #ff9500; --error: #ff3b30; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); --shadow-glow: 0 0 20px var(--accent-glow); } /* ─── Brand Name ───────────────────────────────────────────────── */ .brand-name { color: var(--text-primary); font-weight: 700; } .brand-name strong { font-weight: 700; } /* ─── Reset & Base ──────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100vh; overflow: hidden; } body { font-family: 'Abel', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: var(--text-md); line-height: 1.5; background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; } :focus { outline: none; } :focus-visible { box-shadow: var(--focus-ring); } /* ─── App Container ─────────────────────────────────────────────── */ .app-container { display: flex; flex-direction: column; height: 100vh; transition: filter 0.3s ease; } .app-container.blur-active { filter: blur(4px); } /* ─── App Header ────────────────────────────────────────────────── */ .app-header { flex-shrink: 0; vertical-align: middle; height: 64px; background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 32px; z-index: 1000; position: relative; } .app-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; vertical-align: middle; } .app-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .app-brand:hover .app-logo { transform: scale(1.05); } .app-logo img { width: 100%; height: 100%; } .app-title { font-family: 'ReutlingenSans', sans-serif; font-size: var(--text-lg); font-weight: 400; letter-spacing: 0.3px; color: var(--text-primary); } .app-title strong { font-weight: 700; color: var(--brand-red); } .app-title .version { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); margin-left: 4px; } /* ─── Mega Menu Navigation ──────────────────────────────────────── */ .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; } .nav-item { position: relative; } .nav-trigger { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text-secondary); font-family: inherit; font-size: var(--text-md); font-weight: 400; cursor: pointer; transition: all var(--transition); } .nav-trigger i { width: 16px; height: 16px; opacity: 0.7; } .nav-trigger .chevron { width: 12px; height: 12px; opacity: 0.5; margin-left: 2px; transition: transform 0.2s ease; } .nav-trigger:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item:hover .nav-trigger, .nav-item.active .nav-trigger { background: var(--accent-muted); color: var(--accent); } .nav-item:hover .nav-trigger .chevron { transform: rotate(180deg); } /* Mega Menu Panel */ .mega-menu { position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 40px rgba(0,0,0,0.15); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease; z-index: 1001; } [data-theme="light"] .mega-menu { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.03); } .nav-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(4px); } .mega-menu-grid { display: grid; gap: 2px; } .mega-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; transition: all var(--transition); } .mega-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); } .mega-menu-item.coming-soon { opacity: 0.5; pointer-events: none; } .mega-menu-item i { width: 18px; height: 18px; color: var(--accent); opacity: 0.8; } .mega-menu-item:hover i { opacity: 1; } .mega-menu-item .item-content { flex: 1; } .mega-menu-item .item-title { font-size: var(--text-md); font-weight: 400; color: var(--text-primary); margin-bottom: 2px; } .mega-menu-item .item-desc { font-size: var(--text-sm); color: var(--text-muted); } .mega-menu-item .badge-soon { font-size: var(--text-xxs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); } .mega-menu-item .badge-ai { margin-left: auto; } /* Multi-column mega menu */ .mega-menu.mega-menu-wide { min-width: 500px; } .mega-menu-wide .mega-menu-grid { grid-template-columns: 1fr 1fr; gap: 4px 16px; } /* Header Actions (right side) */ .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Header Links */ .header-links { display: flex; align-items: center; gap: 4px; } .header-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--text-muted); font-size: var(--text-sm); text-decoration: none; border-radius: var(--radius-md); transition: all var(--transition); } .header-link:hover { color: var(--text-primary); background: var(--bg-hover); } .header-link.active { background: var(--accent-muted); color: var(--accent); } .header-link svg { width: 14px; height: 14px; } /* Font Size Control */ .font-size-control { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); } .font-size-control svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; vertical-align: middle; } .font-size-control .icon-small { font-size: 10px; } .font-size-control .icon-large { font-size: 16px; } .font-size-slider { width: 80px; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; cursor: pointer; } .font-size-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px var(--accent-glow); transition: transform 0.15s ease; } .font-size-slider::-webkit-slider-thumb:hover { transform: scale(1.2); } /* Theme Toggle Button */ .theme-toggle { width: 36px; height: 36px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); margin-left: 8px; } .theme-toggle:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); } .theme-toggle:focus-visible { box-shadow: var(--focus-ring); } .theme-toggle svg { width: 18px; height: 18px; } /* ─── User Menu ────────────────────────────────────────────────── */ .user-menu { position: relative; } .user-trigger { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-family: inherit; font-size: var(--text-base); cursor: pointer; transition: all var(--transition); } .user-trigger:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); } .user-trigger i { width: 16px; height: 16px; } .user-trigger .chevron { width: 12px; height: 12px; opacity: 0.5; transition: transform 0.2s ease; } .user-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); } .user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 480px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; z-index: 1001; } .user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .user-info { padding: 16px; border-bottom: 1px solid var(--border); } .user-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; border-bottom: 1px solid var(--border); } .user-info-grid > .user-info { border-bottom: none; } .user-fullname { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin-bottom: 4px; } .user-section-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .user-detail { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); padding: 2px 0; } .user-detail i, .user-detail svg { width: 16px !important; height: 16px !important; flex-shrink: 0; } .user-contact { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); } .user-hint { font-size: var(--text-xs); color: var(--text-muted); padding-left: 24px; margin-top: 1px; } .user-actions { padding: 8px; } .user-action { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-secondary); text-decoration: none; font-size: var(--text-base); transition: all var(--transition); } .user-action:hover { background: var(--bg-hover); color: var(--text-primary); } .user-action i { width: 16px; height: 16px; } .user-action-logout:hover { background: rgba(239, 68, 68, 0.1); color: var(--error); } /* ─── Admin Navigation ─────────────────────────────────────────── */ .nav-item-admin { margin-left: auto; } .nav-trigger-admin { color: var(--brand-pink); } .nav-trigger-admin i { color: var(--brand-pink); opacity: 0.8; } .nav-item-admin:hover .nav-trigger-admin, .nav-item-admin.active .nav-trigger-admin { background: rgba(250, 155, 210, 0.15); color: var(--brand-pink); } /* Active Menu Item */ .mega-menu-item.active { background: var(--accent-muted); color: var(--text-primary); } .mega-menu-item.active i { color: var(--accent); opacity: 1; } .mega-menu-item.active .item-title { color: var(--accent); } /* ─── Module Header ─────────────────────────────────────────────── */ .module-header { flex-shrink: 0; vertical-align: middle; height: 48px; background: var(--bg-base); border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; align-items: center; gap: 12px; } .module-title { font-size: var(--text-lg); font-weight: 500; color: var(--text-primary); margin: 0; letter-spacing: 0.02em; } .module-desc { font-size: var(--text-base); color: var(--text-secondary); margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--border); } .module-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .module-header-admin { background: rgba(239, 68, 68, 0.08); border-bottom-color: rgba(239, 68, 68, 0.2); } .module-header-admin .module-icon { color: var(--error); } .module-header-admin .module-title { color: var(--error); } /* ══════════════════════════════════════════════════════════════════ LAYOUT SYSTEM - Flexible Columns ══════════════════════════════════════════════════════════════════ */ .columns { flex: 1; display: flex; min-height: 0; } /* Base Column */ .col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Column Widths */ .col-1 { flex: 1; } /* 1/3 oder 33% */ .col-2 { flex: 2; } /* 2/3 oder 66% */ .col-3 { flex: 3; } /* 3/3 oder 100% */ /* Spalten-Trennung */ .col + .col { border-left: 1px solid var(--border); } /* Column Header */ .col-header { flex-shrink: 0; vertical-align: middle; height: 44px; background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-panel) 100%); border-bottom: 1px solid var(--border); padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-secondary); } [data-theme="light"] .col-header { background: var(--bg-panel); } .col-header svg { width: 15px; height: 15px; color: var(--accent); opacity: 0.8; } /* Column Content */ .col-content { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; padding: 16px; } /* Column Content Split (Visitenkarten: Vorder-/Rückseite übereinander) */ .col-content-split { flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden; padding: 16px; gap: 16px; } .col-content-split .card-half { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .col-content-split svg, .col-content-split canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* Column Footer */ .col-footer { align-items: center; flex-shrink: 0; height: 80px; vertical-align: middle; padding: 16px; background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-panel) 100%); border-top: 1px solid var(--border); display: flex; gap: 12px; } [data-theme="light"] .col-footer { background: var(--bg-panel); } .col-header-actions { margin-left: auto; display: flex; gap: 4px; } /* ─── Logo Generator Specific ──────────────────────────────────── */ /* Preview Size Badge im Header */ .preview-size { margin-left: auto; font-size: var(--text-xs); color: var(--text-secondary); background: var(--bg-elevated); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); } /* ─── Column Variants ───────────────────────────────────────────── */ /* Panel Column (Settings Sidebar) */ .col-panel { background: var(--bg-panel); } /* ─── Schachbrett-Hintergründe ──────────────────────────────────── */ /* Zwei Varianten pro Modus (gleiche Helligkeit, leicht anderer Farbton): - Primär (.col-canvas): neutral-kühl → Mitte / Hauptvorschau - Alternativ (.col-canvas-alt): neutral-kühl-blau → Rechts / Zweite Vorschau Dark Mode: Primär #d0d0d5/#c8c8cd | Alt #c8d0d8/#c0c8d0 Light Mode: Primär #e8e8ed/#e0e0e5 | Alt #e2e6ed/#dadee5 */ /* Dark Mode: Primär (neutral-kühl) */ .col-canvas, .mg-lightbox-viewer { background: #d0d0d5; background-image: linear-gradient(45deg, #c8c8cd 25%, transparent 25%), linear-gradient(-45deg, #c8c8cd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c8c8cd 75%), linear-gradient(-45deg, transparent 75%, #c8c8cd 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; } /* Dark Mode: Alternativ (neutral-kühl-blau) */ .col-canvas-alt { background: #c8d0d8; background-image: linear-gradient(45deg, #c0c8d0 25%, transparent 25%), linear-gradient(-45deg, #c0c8d0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c0c8d0 75%), linear-gradient(-45deg, transparent 75%, #c0c8d0 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; } /* Light Mode: Primär (neutral-kühl) */ [data-theme="light"] .col-canvas, [data-theme="light"] .mg-lightbox-viewer { background: #e8e8ed; background-image: linear-gradient(45deg, #e0e0e5 25%, transparent 25%), linear-gradient(-45deg, #e0e0e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e5 75%), linear-gradient(-45deg, transparent 75%, #e0e0e5 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; } /* Light Mode: Alternativ (neutral-kühl-blau) */ [data-theme="light"] .col-canvas-alt { background: #e2e6ed; background-image: linear-gradient(45deg, #dadee5 25%, transparent 25%), linear-gradient(-45deg, #dadee5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dadee5 75%), linear-gradient(-45deg, transparent 75%, #dadee5 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; } .col-canvas-alt .col-content .placeholder, .col-canvas .col-content .placeholder, .col-canvas .settings-scroll > .placeholder { color: #888; text-align: center; font-size: var(--text-base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } /* Im settings-scroll wird der placeholder als Flex-Item mit auto-Margins vertikal zentriert. Horizontal bleibt er stretched (Default align-items), sodass seine inneren align-items:center / justify-content:center greifen. Anwendung: Mediengalerie-Suchfilter ohne Treffer ("Keine Medien gefunden"). */ .col-canvas .settings-scroll > .placeholder { margin: auto 0; } [data-theme="light"] .col-canvas-alt .col-content .placeholder, [data-theme="light"] .col-canvas .col-content .placeholder, [data-theme="light"] .col-canvas .settings-scroll > .placeholder { color: var(--text-muted); } .col-canvas-alt .col-content .placeholder svg, .col-canvas-alt .col-content-split .placeholder svg, .col-canvas .col-content .placeholder svg, .col-canvas .settings-scroll > .placeholder svg { width: 48px; height: 48px; opacity: 0.4; } .col-canvas-alt .col-content-split .placeholder { color: #888; text-align: center; font-size: var(--text-base); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1; } [data-theme="light"] .col-canvas-alt .col-content-split .placeholder { color: var(--text-muted); } /* ─── Scrollable Content ────────────────────────────────────────── */ .settings-scroll { flex: 1; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; padding: 16px; padding-bottom: 24px; } .settings-scroll::-webkit-scrollbar { width: 6px; } .settings-scroll::-webkit-scrollbar-track { background: transparent; } .settings-scroll::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; } .settings-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); } .settings-scroll .section { padding: 0; } /* ══════════════════════════════════════════════════════════════════ COMPONENTS ══════════════════════════════════════════════════════════════════ */ /* ─── Sections ──────────────────────────────────────────────────── */ .section { margin-bottom: 24px; } .section-no-header { margin-bottom: 20px; } .section h3 { font-size: var(--text-sm); font-weight: 400; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; padding-bottom: 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); position: relative; } .section h3::before { content: ''; position: absolute; bottom: -1px; left: 0; width: 40px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .section h3 svg { width: 15px; height: 15px; color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); } [data-theme="light"] .section h3 svg { filter: none; } /* Section Layout */ .section-row { display: flex; gap: 16px; margin-bottom: 24px; } .section-half { flex: 1; margin-bottom: 0; } /* Export Size Row (Logo-Generator) */ .export-size-row { display: flex; align-items: center; gap: 8px; } .export-input { width: 70px; padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--text-sm); font-family: monospace; text-align: right; } .export-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .export-unit { font-size: var(--text-xs); color: var(--text-muted); } /* Input mit Zeichenzähler */ .input-with-counter { flex: 1; display: flex; align-items: center; gap: 8px; } .input-with-counter input { flex: 1; } .char-counter { display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-family: monospace; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 3px 10px; white-space: nowrap; width: 50px; flex-shrink: 0; vertical-align: middle; transition: all 0.2s ease; } .char-counter.warning { color: var(--warning); border-color: var(--warning); background: rgba(245, 158, 11, 0.1); } .char-counter.danger { color: var(--error); border-color: var(--error); background: rgba(239, 68, 68, 0.1); } /* Number Spinner (ersetzt native Pfeile) */ input[type="number"][data-spinner] { -moz-appearance: textfield; } input[type="number"][data-spinner]::-webkit-outer-spin-button, input[type="number"][data-spinner]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .num-wrap { position: relative; display: inline-flex; height: 38px; } .num-wrap input { padding-right: 28px !important; } .num-btns { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 22px; display: flex; flex-direction: column; border-left: 1px solid var(--border); border-radius: 0 var(--radius-md) var(--radius-md) 0; overflow: hidden; } .num-btn { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: none; cursor: pointer; color: var(--text-muted); padding: 0; transition: all var(--transition); } .num-btn:hover { background: var(--accent-muted); color: var(--accent); } .num-btn:active { background: var(--accent); color: white; } .num-btn:first-child { border-bottom: 1px solid var(--border); } .num-btn svg { width: 12px; height: 12px; } /* ─── Color Input ───────────────────────────────────────────────── */ .color-input-wrap { position: relative; display: flex; height: 38px; } .color-input-wrap input[type="text"] { flex: 1; min-width: 0; padding-right: 42px !important; } .color-picker { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 4px; cursor: pointer; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; } .color-picker::-webkit-color-swatch-wrapper { padding: 0 !important; margin: 0 !important; border: none !important; } .color-picker::-webkit-color-swatch { border: none !important; border-radius: 4px; } .color-picker::-moz-color-swatch { border: none !important; border-radius: 4px; } /* Logo Download Preview */ .logo-download-preview { display: none; max-width: 100%; max-height: 100%; } /* ─── Field Grid System ─────────────────────────────────────────── */ .field-grid { display: grid; gap: 12px; } .field-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .field-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .field-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } .field-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } /* Spacing between consecutive field-grids */ .field-grid + .field-grid { margin-top: 16px; } /* Grid Span Utilities */ .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } /* Margin Top Utilities */ .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } .text-error { color: var(--error); } .field { display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .field label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .field input, .field select, .field textarea { padding: 0 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--text-base); font-family: inherit; box-sizing: border-box; } .field input, .field select { height: 38px; } .field textarea { padding: 10px; min-height: 80px; resize: vertical; line-height: 1.5; } .field-value { display: flex; align-items: center; min-height: 38px; padding: 0; font-size: var(--text-base); color: var(--text-primary); background: none; border: none; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .field input[type="number"] { font-family: monospace; } .field .num-wrap, .field .color-input-wrap { display: flex !important; width: 100%; height: 38px; } .field .num-wrap input, .field .color-input-wrap input[type="text"] { flex: 1; min-width: 0; } /* ─── CMYK Row ──────────────────────────────────────────────────── */ .cmyk-row { display: flex; gap: 4px; height: 38px; } .cmyk-row input { flex: 1; min-width: 0; height: 38px; padding: 0 4px; text-align: center; font-family: monospace; font-size: var(--text-sm); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); box-sizing: border-box; } .cmyk-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .cmyk-row input::placeholder { color: var(--text-muted); opacity: 0.6; } .cmyk-row input::-webkit-outer-spin-button, .cmyk-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cmyk-row input[type="number"] { -moz-appearance: textfield; } /* ─── Editor Sections ───────────────────────────────────────────── */ .editor-container { max-width: 100%; } .editor-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .editor-section:hover { border-color: var(--accent); box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); } [data-theme="light"] .editor-section:hover { box-shadow: 0 4px 20px var(--accent-glow); transform: translateY(-1px); } .editor-section h2 { display: flex; align-items: center; gap: 10px; margin: -18px -24px 0 -24px; padding: 14px 20px; font-size: var(--text-md); font-weight: 500; color: var(--text-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .editor-section h2 i { width: 20px; height: 20px; color: var(--accent); } .editor-section h2 .section-count { margin-left: auto; font-size: var(--text-sm); font-weight: 400; color: var(--text-muted); } /* Info Grid (read-only display) */ .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .info-item { display: flex; flex-direction: column; gap: 4px; } .info-item-full { grid-column: 1 / -1; } .info-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .info-value { font-size: var(--text-md); color: var(--text-primary); } .subsection-title { margin: 20px 0 8px; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; } .variant-row { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .variant-row:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } /* ─── Settings Tabs ─────────────────────────────────────────────── */ .settings-tabs { display: flex; gap: 8px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 24px; } .settings-tab { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-size: var(--text-md); font-weight: 500; transition: all var(--transition); cursor: pointer; } .settings-tab:hover { background: var(--bg-hover); color: var(--text-primary); } .settings-tab.active { background: var(--accent); color: white; } .settings-tab i { width: 18px; height: 18px; } .settings-hint { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-md); } .settings-hint i { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; vertical-align: middle; } /* ─── Toggle Chips ──────────────────────────────────────────────── */ .toggle-chips { display: flex; flex-wrap: wrap; gap: 4px; } .toggle-chip { padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; cursor: pointer; transition: all var(--transition); user-select: none; display: flex; align-items: center; gap: 6px; } .toggle-chip svg { width: 13px; height: 13px; opacity: 0.5; } .toggle-chip:hover { border-color: var(--border-hover); color: var(--text-secondary); } [data-theme="light"] .toggle-chip:hover { background: var(--bg-hover); color: var(--text-primary); } .toggle-chip:focus-visible { box-shadow: var(--focus-ring); } .toggle-chip.active { background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); border-color: transparent; color: white; box-shadow: 0 4px 15px var(--accent-glow), 0 0 25px var(--accent-glow); transform: translateY(-1px); } [data-theme="light"] .toggle-chip.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 8px var(--accent-glow); transform: none; } .toggle-chip.active svg { opacity: 1; } .toggle-chip input { display: none; } /* Stretch-Variante: Chips teilen sich die volle Breite und brechen nicht um. Container braucht selbst flex:1, sonst nimmt er nur content-Breite und die Kinder können sich auch nicht ausdehnen (war der Bug bei dem 75%-Modal). */ .toggle-chips.toggle-chips-stretch { flex: 1; flex-wrap: nowrap; } .toggle-chips.toggle-chips-stretch > .toggle-chip { flex: 1; justify-content: center; white-space: nowrap; } /* Row-Label-Icons im Modal: nehmen die Label-Text-Farbe (grau) statt --accent (blau). Im Plakat-UI bleiben Row-Icons blau, im Modal-Kontext passen sie sich dem Text an. */ .modal-body .row label svg { color: inherit; } /* ─── Form Elements ─────────────────────────────────────────────── */ /* Globale einheitliche Höhe für alle Formularelemente */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], select { height: 38px; box-sizing: border-box; } .row { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; } .row.row-end { justify-content: flex-end; } .row label { width: 80px; flex-shrink: 0; vertical-align: middle; font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } .row label svg { width: 13px; height: 13px; opacity: 0.5; flex-shrink: 0; vertical-align: middle; color: var(--accent); } .row input[type="text"], .row select, .row textarea { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); font-size: var(--text-base); font-family: inherit; transition: all var(--transition); } .row textarea { min-height: 38px; resize: vertical; line-height: 1.4; } .row input[type="text"]:hover, .row select:hover, .row textarea:hover { border-color: var(--border-hover); } .row input[type="text"]:focus, .row select:focus, .row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } [data-theme="light"] .row input[type="text"]:focus, [data-theme="light"] .row select:focus, [data-theme="light"] .row textarea:focus { box-shadow: 0 0 0 3px var(--accent-muted); } .row input[type="text"]:focus-visible, .row select:focus-visible, .row textarea:focus-visible { box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } [data-theme="light"] .row input[type="text"]:focus-visible, [data-theme="light"] .row select:focus-visible, [data-theme="light"] .row textarea:focus-visible { box-shadow: 0 0 0 3px var(--accent-muted); } .row select { cursor: pointer; } /* Range Slider */ .row input[type="range"] { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; cursor: pointer; } .row input[type="range"]:hover { background: var(--border-hover); } .row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px var(--accent-glow); transition: all 0.2s ease; } [data-theme="light"] .row input[type="range"]::-webkit-slider-thumb { background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 15px var(--accent-glow); } [data-theme="light"] .row input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 2px 8px var(--accent-glow); } .row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring), 0 0 15px var(--accent-glow); } [data-theme="light"] .row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); } .row .value { width: 36px; text-align: right; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); font-family: 'SF Mono', Monaco, monospace; } /* File Input */ .row input[type="file"] { font-size: var(--text-xs); color: var(--text-secondary); } .row input[type="file"]::file-selector-button { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text-primary); font-size: var(--text-xs); font-weight: 400; cursor: pointer; margin-right: 8px; transition: all var(--transition); } .row input[type="file"]::file-selector-button:hover { background: var(--border-hover); } [data-theme="light"] .row input[type="file"]::file-selector-button:hover { background: var(--border); } /* ─── Custom Checkbox (.cb) ─────────────────────────────────────── */ .cb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--border-hover); border-radius: 3px; background: var(--bg-input); cursor: pointer; position: relative; transition: all var(--transition); flex-shrink: 0; vertical-align: middle; } .cb:hover { border-color: var(--text-secondary); } .cb:checked { border-color: var(--text-secondary); } .cb:checked::before, .cb:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: var(--text-secondary); border-radius: 1px; } .cb:checked::before { transform: translate(-50%, -50%) rotate(45deg); } .cb:checked::after { transform: translate(-50%, -50%) rotate(-45deg); } .cb:focus-visible { box-shadow: var(--focus-ring); } [data-theme=light] .cb { background: white; border-color: var(--border); } [data-theme=light] .cb:hover { border-color: var(--text-secondary); } [data-theme=light] .cb:checked { border-color: var(--text-secondary); } /* ─── Checkboxes ────────────────────────────────────────────────── */ .checkbox-list { display: flex; flex-direction: column; gap: 6px; } .checkbox-list label { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; padding: 6px 8px; margin: -6px -8px; border-radius: var(--radius-sm); transition: all var(--transition); } .checkbox-list label:hover { background: var(--bg-hover); color: var(--text-primary); } .checkbox-list input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* Options (horizontal checkboxes) */ .options { display: flex; gap: 16px; flex-wrap: wrap; } .options label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; padding: 6px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: all var(--transition); } .options label:hover { border-color: var(--border-hover); color: var(--text-primary); } .options input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); } /* ─── Buttons ───────────────────────────────────────────────────── */ .btn { padding: 12px 20px; border: none; border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-base); font-weight: 400; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; text-decoration: none; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); color: white; box-shadow: 0 4px 15px var(--accent-glow), 0 0 30px var(--accent-glow); } [data-theme="light"] .btn-primary { background: var(--accent); box-shadow: 0 2px 8px var(--accent-glow); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); opacity: 0; transition: opacity 0.2s ease; } .btn-primary:hover { box-shadow: 0 6px 25px var(--accent-glow), 0 0 50px var(--accent-glow); transform: translateY(-2px); } [data-theme="light"] .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px var(--accent-glow); transform: translateY(-1px); } .btn-primary:hover::before { opacity: 1; } .btn-primary:focus-visible { box-shadow: var(--focus-ring), 0 0 30px var(--accent-glow); } [data-theme="light"] .btn-primary:focus-visible { box-shadow: var(--focus-ring); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px var(--accent-glow); } [data-theme="light"] .btn-primary:active { box-shadow: 0 1px 4px var(--accent-glow); } .btn-primary:disabled { background: var(--bg-hover); box-shadow: none; cursor: not-allowed; color: var(--text-muted); } .btn-primary:disabled::before { display: none; } .btn-secondary { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } [data-theme="light"] .btn-secondary:hover { box-shadow: none; } .btn-secondary:focus-visible { box-shadow: var(--focus-ring); } .btn-secondary:disabled, .btn-secondary:disabled:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; box-shadow: none; transform: none; } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); } .btn-ghost:disabled, .btn-ghost:disabled:hover { color: var(--text-muted); cursor: not-allowed; background: transparent; border-color: transparent; box-shadow: none; } /* Reset-Filter Button */ [data-reset-filters] { display: none; background: transparent; color: var(--text-muted); border: 1px dashed var(--border); font-size: var(--text-sm); padding: 6px 12px; gap: 6px; } [data-reset-filters] svg { width: 14px; height: 14px; } [data-reset-filters]:hover { background: rgba(239, 68, 68, 0.1); color: #f87171; border-color: #f87171; border-style: solid; } .btn-full { width: 100%; } .btn-half { flex: 1; } .btn-third { flex: 1; } /* ─── Text Utilities ────────────────────────────────────────────── */ .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } .text-mono { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: var(--text-sm); } /* ─── Form Field Helpers ────────────────────────────────────────── */ .field-help { display: block; margin-top: 6px; font-size: var(--text-sm); color: var(--text-muted); } /* ─── Badge Variants ────────────────────────────────────────────── */ .badge-subtle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--text-sm); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); } .badge-subtle i { width: 14px; height: 14px; } /* ─── Display Utilities ─────────────────────────────────────────── */ .hidden { display: none !important; } /* ─── Accessibility ─────────────────────────────────────────────── */ .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; } /* ─── Status Toast / Overlay ────────────────────────────────────── */ #status { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: var(--bg-panel); color: var(--text-primary); padding: 40px 60px; border-radius: var(--radius-lg); font-size: var(--text-lg); font-weight: 400; text-align: center; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2000; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 60px var(--accent-glow); border: 1px solid var(--border); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; gap: 16px; } [data-theme="light"] #status { box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2); } #status .status-icon { width: 48px; height: 48px; color: var(--accent); } #status .status-icon.success { color: var(--success); } #status .status-icon.error { color: var(--error); } #status .status-icon.warning { color: var(--warning); } #status.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } #status .status-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-lg); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } #status .status-close:hover { background: var(--error); border-color: var(--error); color: white; } #status::before { content: ''; position: fixed; top: -100vh; left: -100vw; width: 300vw; height: 300vh; background: rgba(0, 0, 0, 0.4); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } [data-theme="light"] #status::before { background: rgba(0, 0, 0, 0.3); } #status.visible::before { opacity: 1; } /* ─── Gallery Overlay ───────────────────────────────────────────── */ .gallery-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } [data-theme="light"] .gallery-overlay { background: rgba(255, 255, 255, 0.95); } .gallery-overlay.visible { opacity: 1; visibility: visible; } .gallery-header { padding: 12px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .gallery-header h2 { font-size: var(--text-md); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: var(--text-primary); } .gallery-close { width: 28px; height: 28px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .gallery-close:hover { background: var(--error); border-color: var(--error); color: white; } .gallery-close:focus-visible { box-shadow: var(--focus-ring); } .gallery-content { flex: 1; padding: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; align-content: start; } .gallery-item { aspect-ratio: 1; background: #f5f5f5; border: 1px solid transparent; border-radius: var(--radius-md); padding: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); position: relative; overflow: hidden; } [data-theme="light"] .gallery-item { background: #ffffff; border-color: var(--border); } .gallery-item:hover { border-color: var(--accent); background: #fff; } [data-theme="light"] .gallery-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .gallery-item:focus-visible { box-shadow: var(--focus-ring); } .gallery-item.selected { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px var(--accent-muted); } [data-theme="light"] .gallery-item.selected { background: rgba(0, 113, 227, 0.05); } .gallery-item svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .gallery-item-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px 8px; font-size: var(--text-xs); font-weight: 400; color: #555; background: rgba(255, 255, 255, 0.95); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="light"] .gallery-item-name { color: var(--text-secondary); } /* ─── Resolution Warning ────────────────────────────────────────── */ #resolutionWarning { display: none; position: fixed; inset: 0; background: var(--bg-base); color: var(--text-primary); z-index: 9999; justify-content: center; align-items: center; text-align: center; padding: 32px; } #resolutionWarning h1 { font-size: var(--text-lg); font-weight: 400; margin-bottom: 8px; } #resolutionWarning p { font-size: var(--text-sm); line-height: 1.5; max-width: 300px; color: var(--text-secondary); } /* ─── Animations ────────────────────────────────────────────────── */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; } /* ══════════════════════════════════════════════════════════════════ EXTENDED COMPONENTS Wiederverwendbare Komponenten für alle Module ══════════════════════════════════════════════════════════════════ */ /* ─── Selection Grid (2x2 Auswahl-Buttons) ──────────────────────── */ .selection-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .selection-btn { padding: 12px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); cursor: pointer; font-size: var(--text-sm); font-weight: 400; text-align: center; color: var(--text-secondary); transition: all var(--transition); } .selection-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); } .selection-btn:focus-visible { box-shadow: var(--focus-ring); } .selection-btn.active { border-color: var(--accent); background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); color: white; box-shadow: 0 4px 20px var(--accent-glow), 0 0 30px var(--accent-glow); transform: translateY(-1px); } [data-theme="light"] .selection-btn.active { background: var(--accent); box-shadow: 0 2px 12px var(--accent-glow); transform: none; } .selection-btn .icon { font-size: var(--text-lg); margin-bottom: 4px; display: block; } .selection-btn .selection-preview { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: 6px; opacity: 0.85; transition: opacity var(--transition); } .selection-btn:hover .selection-preview { opacity: 1; } .selection-btn.active .selection-preview { opacity: 1; } .selection-btn .selection-label { display: block; font-size: var(--text-sm); font-weight: 500; line-height: 1.2; } /* ─── Color Swatches (Farbauswahl) ──────────────────────────────── */ .color-swatches { display: flex; gap: 5px; flex: 1; } .color-swatch { flex: 1; height: 30px; border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; position: relative; } [data-theme="light"] .color-swatch { box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .color-swatch::after { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--radius-md) + 2px); background: inherit; opacity: 0; filter: blur(8px); z-index: -1; transition: opacity 0.2s ease; } .color-swatch:hover { transform: scale(1.15) translateY(-3px); z-index: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } [data-theme="light"] .color-swatch:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .color-swatch:hover::after { opacity: 0.5; } [data-theme="light"] .color-swatch:hover::after { opacity: 0.4; } .color-swatch:focus-visible { box-shadow: var(--focus-ring); } .color-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--text-primary), 0 8px 20px rgba(0, 0, 0, 0.4); transform: scale(1.15) translateY(-3px); z-index: 2; } [data-theme="light"] .color-swatch.active { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--text-primary), 0 4px 12px rgba(0, 0, 0, 0.2); } .color-swatch.active::after { opacity: 0.6; } [data-theme="light"] .color-swatch.active::after { opacity: 0.5; } /* ─── Info Box (Hinweisbox mit Severity) ────────────────────────── */ .info-box { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md); border: 2px solid var(--border); background: var(--bg-elevated); } .info-box .label { font-size: var(--text-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; } .info-box .details { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: 6px; } .info-box .value { font-size: var(--text-md); font-weight: 400; display: flex; align-items: center; gap: 6px; } .info-box .hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 10px; padding: 8px 10px; background: var(--bg-input); border-radius: var(--radius-sm); } /* Info Box Severity Levels */ .info-box.success { border-color: var(--success); background: rgba(34, 197, 94, 0.08); } [data-theme="light"] .info-box.success { background: rgba(52, 199, 89, 0.08); } .info-box.success .value { color: var(--success); } .info-box.warning { border-color: var(--warning); background: rgba(234, 179, 8, 0.08); } [data-theme="light"] .info-box.warning { background: rgba(255, 149, 0, 0.08); } .info-box.warning .value { color: var(--warning); } .info-box.error { border-color: var(--error); background: rgba(239, 68, 68, 0.08); } [data-theme="light"] .info-box.error { background: rgba(255, 59, 48, 0.08); } .info-box.error .value { color: var(--error); } .info-box.critical { border-color: var(--error); background: rgba(239, 68, 68, 0.15); border-width: 3px; } [data-theme="light"] .info-box.critical { background: rgba(255, 59, 48, 0.12); } .info-box.critical .value { color: var(--error); font-size: var(--text-md); } .info-box .hint.critical { color: #fff; font-weight: 400; font-size: var(--text-base); padding: 10px 12px; background: var(--error); border-radius: var(--radius-sm); margin-top: 12px; } /* Legacy alias (quality-info) */ .quality-info { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md); border: 2px solid var(--border); background: var(--bg-elevated); } .quality-info .label { font-size: var(--text-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; } .quality-info .details { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: 6px; } .quality-info .dpi { font-size: var(--text-md); font-weight: 400; display: flex; align-items: center; gap: 6px; } .quality-info .tipp { font-size: var(--text-sm); color: var(--text-muted); margin-top: 10px; padding: 8px 10px; background: var(--bg-input); border-radius: var(--radius-sm); } .quality-info.excellent, .quality-info.good { border-color: var(--success); background: rgba(34, 197, 94, 0.08); } [data-theme="light"] .quality-info.excellent, [data-theme="light"] .quality-info.good { background: rgba(52, 199, 89, 0.08); } .quality-info.excellent .dpi, .quality-info.good .dpi { color: var(--success); } .quality-info.adequate, .quality-info.marginal { border-color: var(--warning); background: rgba(234, 179, 8, 0.08); } [data-theme="light"] .quality-info.adequate, [data-theme="light"] .quality-info.marginal { background: rgba(255, 149, 0, 0.08); } .quality-info.adequate .dpi, .quality-info.marginal .dpi { color: var(--warning); } .quality-info.poor { border-color: var(--error); background: rgba(239, 68, 68, 0.08); } [data-theme="light"] .quality-info.poor { background: rgba(255, 59, 48, 0.08); } .quality-info.poor .dpi { color: var(--error); } .quality-info.critical { border-color: var(--error); background: rgba(239, 68, 68, 0.15); border-width: 3px; } [data-theme="light"] .quality-info.critical { background: rgba(255, 59, 48, 0.12); } .quality-info.critical .dpi { color: var(--error); font-size: var(--text-md); } .quality-info .tipp.critical { color: #fff; font-weight: 400; font-size: var(--text-base); padding: 10px 12px; background: var(--error); border-radius: var(--radius-sm); margin-top: 12px; } /* ─── Selected Item (Auswahl-Anzeige mit Remove-Button) ─────────── */ .selected-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--text-xs); color: var(--text-secondary); } .selected-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Legacy alias */ .illus-selected { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: var(--text-xxs); color: var(--text-secondary); } .illus-selected span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ─── Icon Buttons ──────────────────────────────────────────────── */ .btn-icon { width: 24px; height: 24px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; transition: all var(--transition); } .btn-icon svg { width: 12px; height: 12px; } .btn-icon-remove { width: 16px; height: 16px; background: var(--error); border: none; border-radius: 50%; color: white; font-size: var(--text-xxs); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; transition: all var(--transition); } .btn-icon-remove:hover { background: #dc2626; } [data-theme="light"] .btn-icon-remove:hover { background: #e62e25; } .btn-icon-remove:focus-visible { box-shadow: var(--focus-ring); } /* ─── Preview Canvas ────────────────────────────────────────────── */ .preview-canvas { max-width: 100%; max-height: 100%; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1); cursor: grab; user-select: none; transition: all 0.3s ease; } [data-theme="light"] .preview-canvas { } .preview-canvas:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.15); } [data-theme="light"] .preview-canvas:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .preview-canvas:active { cursor: grabbing; } .preview-canvas.debug-borders > g, .preview-canvas.debug-borders > rect { outline: 0.5px dashed rgba(0, 0, 0, 0.4); } /* Legacy alias (#svg) */ #svg { max-width: 100%; max-height: 100%; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.1); cursor: grab; user-select: none; transition: all 0.3s ease; } [data-theme="light"] #svg { box-shadow: var(--shadow-lg); } #svg:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.15); } [data-theme="light"] #svg:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } #svg:active { cursor: grabbing; } #svg.debug-borders > g, #svg.debug-borders > rect, #svgFront.debug-borders > g > g, #svgFront.debug-borders > g#logoFront, #svgBack.debug-borders > g, #svgBack.debug-borders > rect { outline: 0.5px dashed rgba(0, 0, 0, 0.4); } /* Logo-Generator: Keine Interaktion, kein Schatten */ #svg.logo-preview { cursor: default; box-shadow: none; user-select: none; } #svg.logo-preview:hover { box-shadow: none; } #svg.logo-preview:active { cursor: default; } [data-theme="light"] #svg.logo-preview, [data-theme="light"] #svg.logo-preview:hover { box-shadow: none; } /* ─── Section Spacing Utilities ─────────────────────────────────── */ .section-spaced > .toggle-chips { margin-bottom: 12px; } /* Legacy alias */ #sectionStoerer > .toggle-chips { margin-bottom: 12px; } /* ══════════════════════════════════════════════════════════════════ DASHBOARD Startseite mit Hero und Modul-Cards ══════════════════════════════════════════════════════════════════ */ /* ─── Dashboard Layout ──────────────────────────────────────────── */ .dashboard { flex: 1; overflow-y: auto; padding: 40px; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } .dashboard::-webkit-scrollbar { width: 8px; } .dashboard::-webkit-scrollbar-track { background: transparent; } .dashboard::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; } .dashboard::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); } .dashboard-inner { max-width: 1400px; margin: 0 auto; } /* ─── Hero Section ──────────────────────────────────────────────── */ .dashboard-hero { display: flex; align-items: center; gap: 48px; padding: 48px 56px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 48px; position: relative; overflow: hidden; } .dashboard-hero::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(135deg, transparent 0%, var(--brand-red-glow) 100%); opacity: 0.15; pointer-events: none; } [data-theme="light"] .dashboard-hero::before { opacity: 0.08; } .hero-signet { width: 180px; height: 180px; flex-shrink: 0; vertical-align: middle; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-signet img { width: 100%; height: 100%; } .hero-content { flex: 1; position: relative; z-index: 1; } .hero-greeting { font-family: 'ReutlingenSans', sans-serif; font-weight: 400; color: var(--text-primary); margin: 0 0 8px 0; line-height: 1.1; } .hero-greeting .greeting-text { font-size: var(--text-lg); font-weight: 400; color: var(--text-secondary); } .hero-greeting .greeting-name { font-size: var(--text-xxl); font-weight: 700; color: var(--brand-red); } .hero-welcome { font-size: var(--text-md); color: var(--text-secondary); margin-top: 20px; margin-bottom: 0; } .hero-title { font-family: 'ReutlingenSans', sans-serif; font-size: var(--text-xxl); font-weight: 400; color: var(--text-primary); margin-top: 4px; margin-bottom: 6px; line-height: 1.2; } .hero-title strong, .hero-title .brand-red { font-weight: 700; color: var(--brand-red); } .hero-subtitle { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.6; max-width: 600px; } .hero-subtitle strong { color: var(--brand-red); font-weight: 400; } /* ─── Module Categories ─────────────────────────────────────────── */ .module-category { margin-bottom: 40px; } .category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .category-header i { width: 20px; height: 20px; color: var(--accent); } .category-title { font-family: 'ReutlingenSans', sans-serif; font-size: var(--text-md); font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; } .category-count { font-size: var(--text-sm); color: var(--text-muted); margin-left: auto; } /* ─── Module Cards Grid ─────────────────────────────────────────── */ .module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .module-card { display: flex; flex-direction: column; padding: 18px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, #fff 100%); opacity: 0; transition: opacity 0.25s ease; } .module-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 40px var(--accent-glow); } [data-theme="light"] .module-card:hover { } .module-card:hover::before { opacity: 1; } .module-card.coming-soon { opacity: 0.6; pointer-events: none; } .module-card.coming-soon:hover { transform: none; box-shadow: none; border-color: var(--border); } .module-card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .module-icon { width: 40px; height: 40px; background: var(--accent-muted); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; transition: all 0.25s ease; } .module-card:hover .module-icon { background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); box-shadow: 0 4px 20px var(--accent-glow); } .module-icon i { width: 24px; height: 24px; color: var(--accent); transition: color 0.25s ease; } .module-card:hover .module-icon i { color: white; } .module-card-title { font-family: 'ReutlingenSans', sans-serif; font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .module-card-desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; } .module-card-body { flex: 1; } .module-card-text { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.5; } .module-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .module-card-action { font-size: var(--text-sm); font-weight: 500; color: var(--accent); display: flex; align-items: center; gap: 6px; transition: gap 0.2s ease; } .module-card:hover .module-card-action { gap: 10px; } .module-card-action i { width: 14px; height: 14px; } .module-card .badge-soon { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); } /* Locked Module Card (kein Zugriff) */ .module-card.module-locked { opacity: 0.5; pointer-events: none; border-color: var(--error); border-style: dashed; } .module-card.module-locked:hover { transform: none; box-shadow: none; } .module-card .badge-no-access { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; background: rgba(239, 68, 68, 0.15); border: 1px solid var(--error); border-radius: var(--radius-sm); color: var(--error); } .module-card .badge-no-access i { width: 12px; height: 12px; } .badge-ai { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 5px; font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.02em; background: rgba(250, 155, 210, 0.15); border: 1px solid rgba(250, 155, 210, 0.4); border-radius: 10px; color: var(--brand-pink); } .badge-ai i { width: 5px; height: 5px; } .mega-menu-item .badge-ai { padding: 2px 5px 2px 4px; font-size: var(--text-xxs); gap: 2px; } .mega-menu-item .badge-ai i { width: 4px; height: 4px; } /* Badge positioning in module card */ .module-card .badge-ai { position: absolute; top: 12px; right: 12px; } /* ─── Dashboard Footer ──────────────────────────────────────────── */ .dashboard-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: var(--text-sm); display: flex; flex-direction: column; align-items: center; gap: 12px; } .dashboard-footer a { color: var(--accent); text-decoration: none; } .dashboard-footer a:hover { } .dashboard-footer-version { margin-bottom: 8px; } .dashboard-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-muted); text-decoration: none; transition: all 0.2s ease; } .dashboard-footer-brand span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; } .dashboard-footer-brand:hover { color: var(--text-secondary); text-decoration: none; } .dashboard-footer-brand:hover .dashboard-footer-logo { opacity: 1; filter: brightness(1.2); } .dashboard-footer-logo { height: 48px; width: auto; opacity: 0.8; transition: all 0.2s ease; } .hero-brand { position: absolute; bottom: 24px; right: 32px; gap: 1px; align-items: flex-end; } .hero-brand .dashboard-footer-logo { height: 40px; } /* ══════════════════════════════════════════════════════════════════ PAGE TRANSITION OVERLAY ══════════════════════════════════════════════════════════════════ */ #pageTransition { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); pointer-events: none; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; } #pageTransition.active { opacity: 1; pointer-events: all; background: rgba(0, 0, 0, 0.6); } #pageTransition.exit { opacity: 1; pointer-events: all; background: rgba(0, 0, 0, 0.6); animation: transitionExit 0.6s ease forwards; } @keyframes transitionExit { 0% { background: rgba(0, 0, 0, 0.6); opacity: 1; } 100% { background: rgba(0, 0, 0, 0); opacity: 0; } } /* Signet Animation */ .transition-signet { width: 80px; height: 80px; opacity: 0; filter: drop-shadow(0 0 20px rgba(255, 0, 80, 0.6)); } #pageTransition.active .transition-signet { animation: signetFadeIn 0.4s ease forwards, signetGlow 1.2s ease-in-out 0.4s infinite; } #pageTransition.exit .transition-signet { animation: signetFadeOut 0.5s ease forwards; } @keyframes signetFadeIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } @keyframes signetGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255, 0, 80, 0.6)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(255, 0, 80, 0.9)) drop-shadow(0 0 60px rgba(250, 155, 210, 0.6)); } } @keyframes signetFadeOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* Content Blur during transition */ .app-container.transition-blur { filter: blur(8px) brightness(0.7); transition: filter 0.4s ease; pointer-events: none; } .app-container.transition-enter { animation: contentEnter 0.5s ease forwards; } @keyframes contentEnter { 0% { filter: blur(8px) brightness(0.7); opacity: 0.8; } 100% { filter: blur(0) brightness(1); opacity: 1; } } /* ══════════════════════════════════════════════════════════════════ ADMIN SECTION Verwaltungsbereich für Benutzer, Rechtegruppen, etc. ══════════════════════════════════════════════════════════════════ */ /* ─── Admin Layout ─────────────────────────────────────────────── */ .admin-content { flex: 1; overflow-y: auto; padding: 32px; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } .admin-content::-webkit-scrollbar { width: 8px; } .admin-content::-webkit-scrollbar-track { background: transparent; } .admin-content::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; } .admin-grid { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; } @media (max-width: 1200px) { .admin-grid { grid-template-columns: 1fr; } } /* ─── Admin Forms ──────────────────────────────────────────────── */ .admin-form { padding: 20px; } .admin-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .admin-form .form-group { margin-bottom: 16px; } .admin-form .form-group label { display: block; font-size: var(--text-base); font-weight: 400; color: var(--text-secondary); margin-bottom: 6px; } .admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="password"], .admin-form input[type="number"], .admin-form select, .admin-form textarea { width: 100%; padding: 10px 12px; font-size: var(--text-md); font-family: inherit; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); transition: all var(--transition); } .admin-form input:hover, .admin-form select:hover, .admin-form textarea:hover { border-color: var(--border-hover); } .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .admin-form textarea { min-height: 80px; resize: vertical; } /* Checkboxes */ .checkbox-grid { display: flex; flex-direction: column; gap: 8px; } .checkbox-item { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); } .checkbox-item:hover { border-color: var(--border-hover); background: var(--bg-hover); } .checkbox-item input[type="checkbox"] { display: none; } .checkbox-item input[type="checkbox"]:checked + .checkbox-label { color: var(--accent); } .checkbox-item:has(input:checked) { border-color: var(--accent); background: var(--accent-muted); } .checkbox-label { font-size: var(--text-base); font-weight: 500; color: var(--text-primary); } .checkbox-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; } .checkbox-inline { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); color: var(--text-secondary); } .checkbox-inline input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } /* ─── Admin Tables ─────────────────────────────────────────────── */ .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th, .admin-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); } .admin-table th { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: var(--bg-elevated); } .admin-table td { font-size: var(--text-base); color: var(--text-secondary); } .admin-table tbody tr:hover { background: var(--bg-hover); } .admin-table tbody tr.inactive { opacity: 0.5; } .admin-table strong { color: var(--text-primary); font-weight: 500; text-decoration: none; } .admin-table a { text-decoration: none; } .admin-table .text-muted { color: var(--text-muted); } .admin-table .tags { font-size: var(--text-sm); color: var(--text-muted); } /* Status badges */ .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--text-xs); font-weight: 500; border-radius: 10px; } .status-active { background: rgba(34, 197, 94, 0.15); color: var(--success); } .status-inactive { background: rgba(239, 68, 68, 0.15); color: var(--error); } /* Table Actions */ .admin-table .actions { display: flex; gap: 4px; justify-content: flex-end; } .admin-table .btn-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; transition: all var(--transition); } .admin-table .btn-icon:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); } .admin-table .btn-icon-danger:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--error); color: var(--error); } .admin-table .btn-icon i { width: 16px; height: 16px; } /* ─── Admin Table Column Widths ──────────────────────────────────── */ .admin-table .col-thumb { width: 80px; } .admin-table .col-name { min-width: 180px; } .admin-table .col-email { min-width: 200px; } .admin-table .col-institution { min-width: 140px; } .admin-table .col-roles { min-width: 120px; } .admin-table .col-status { width: 90px; } .admin-table .col-created { width: 100px; } .admin-table .col-desc { min-width: 150px; max-width: 300px; } .admin-table .col-permissions { width: 120px; } .admin-table .col-users { width: 80px; text-align: center; } .admin-table .col-actions { width: 110px; text-align: right; } /* ─── Alerts ───────────────────────────────────────────────────── */ .alert { padding: 14px 18px; border-radius: var(--radius-md); font-size: var(--text-base); margin-bottom: 20px; } .alert-success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); } .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--error); } .alert-warning { background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.3); color: var(--warning); } .alert-info { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: var(--accent); } /* ─── Rights Editor (JSON) ─────────────────────────────────────── */ .rights-editor { padding: 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .rights-category { margin-bottom: 16px; } .rights-category:last-child { margin-bottom: 0; } .rights-category-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .rights-list { display: flex; flex-wrap: wrap; gap: 6px; } .right-chip { padding: 5px 10px; font-size: var(--text-sm); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: all var(--transition); } .right-chip:hover { border-color: var(--border-hover); color: var(--text-secondary); } .right-chip.active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); } /* ─── JSON Code Display ────────────────────────────────────────── */ .json-display { padding: 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: 'SF Mono', Monaco, monospace; font-size: var(--text-sm); color: var(--text-muted); overflow-x: auto; white-space: pre; } /* ══════════════════════════════════════════════════════════════════ ADMIN REDESIGN - Premium List & Edit Views ══════════════════════════════════════════════════════════════════ */ /* ─── Global Admin Links ──────────────────────────────────────────── */ .admin-content a { text-decoration: none; } .admin-content a:hover { text-decoration: none; } /* ─── Page Header ────────────────────────────────────────────────── */ .admin-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .admin-page-title { display: flex; align-items: center; gap: 12px; } .admin-page-title > i { width: 32px; height: 32px; color: var(--accent); } .admin-page-title h1 { font-family: 'ReutlingenSans', sans-serif; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin: 0; } .admin-page-subtitle { font-size: var(--text-base); color: var(--text-muted); margin: 0; } .admin-page-actions { display: flex; gap: 12px; } .back-link { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; transition: all var(--transition); } .back-link:hover { color: var(--text-primary); text-decoration: none; } .back-link i { width: 20px; height: 20px; } /* ─── Toolbar (Search & Filters) ─────────────────────────────────── */ .admin-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } /* Einzeilige Toolbar mit allen Elementen */ .admin-toolbar-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .admin-toolbar-row .search-input-wrap { flex: 1 1 240px; min-width: 240px; max-width: 480px; } .admin-toolbar-row .toolbar-actions { margin-left: auto; display: flex; gap: 8px; } .admin-toolbar-actions { display: flex; gap: 8px; margin-left: auto; } .admin-search { flex: 1; min-width: 200px; max-width: 320px; } .search-input-wrap { position: relative; display: flex; align-items: center; } .search-input-wrap > i, .search-input-wrap > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; z-index: 1; } .search-input { width: 100%; padding: 10px 36px 10px 38px; font-size: var(--text-base); font-family: inherit; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); transition: all var(--transition); } .search-input:hover { border-color: var(--border-hover); } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .search-input::placeholder { color: var(--text-muted); } .search-clear { position: absolute; right: 10px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 4px; transition: all var(--transition); } .search-clear:hover { background: var(--bg-hover); color: var(--text-primary); } .search-clear i { width: 16px; height: 16px; } /* ─── Filter Controls ────────────────────────────────────────────── */ .admin-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; } .admin-filters .datatable-perpage { margin-left: auto; } .filter-group { display: flex; gap: 2px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; } .filter-chip { display: flex; align-items: center; gap: 5px; padding: 6px 10px; font-size: var(--text-sm); font-family: inherit; color: var(--text-muted); background: none; border: none; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); } .filter-chip:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; } .filter-chip.active { color: var(--accent); background: var(--accent-muted); } .filter-count { font-size: var(--text-xs); font-weight: 500; padding: 1px 5px; background: var(--bg-hover); border-radius: 8px; } .filter-chip.active .filter-count { background: rgba(59, 130, 246, 0.3); } .filter-select { padding: 8px 32px 8px 12px; font-size: var(--text-base); font-family: inherit; background: var(--bg-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); -webkit-appearance: none; appearance: none; } .filter-select:hover { border-color: var(--border-hover); } .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } /* ─── Admin Panel (Single Panel Layout) ──────────────────────────── */ .admin-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* ─── Sortable Table ─────────────────────────────────────────────── */ .admin-table-sortable th { cursor: default; } .sort-link { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); text-decoration: none; transition: color var(--transition); } .sort-link:hover { color: var(--text-primary); text-decoration: none; } .sort-link.active { color: var(--accent); } .sort-link i { width: 12px; height: 12px; } /* ─── Table Row States ───────────────────────────────────────────── */ .admin-table tbody tr.row-inactive { opacity: 0.6; } .admin-table tbody tr.row-inactive:hover { opacity: 0.8; } /* ─── User Cell (Admin Table) ────────────────────────────────────── */ .user-cell { display: flex; align-items: center; gap: 10px; } .user-cell .avatar { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent-muted); color: var(--accent); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.3px; border-radius: var(--radius-sm); flex-shrink: 0; vertical-align: middle; } /* ─── Email Link ─────────────────────────────────────────────────── */ .email-link { color: var(--text-secondary); text-decoration: none; transition: color var(--transition); } .email-link:hover { color: var(--accent); text-decoration: none; } /* ─── Badge Styles ───────────────────────────────────────────────── */ .institution-badge { font-size: var(--text-base); color: var(--text-secondary); } /* ─── Status Badges ──────────────────────────────────────────────── */ .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: var(--text-xs); font-weight: 500; border-radius: 10px; } .status-badge i { width: 12px; height: 12px; } .status-badge.status-active { background: rgba(34, 197, 94, 0.15); color: var(--success); } .status-badge.status-inactive { background: rgba(107, 114, 128, 0.15); color: var(--text-muted); } /* ─── Date Display ───────────────────────────────────────────────── */ .date-display { font-size: var(--text-base); color: var(--text-muted); } /* ─── Action Buttons ─────────────────────────────────────────────── */ .action-buttons { display: flex; gap: 4px; justify-content: flex-end; } /* ─── Empty State ────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 40px 20px !important; color: var(--text-muted); } .empty-state i { width: 32px; height: 32px; margin-bottom: 12px; opacity: 0.4; } .empty-state p { font-size: var(--text-base); margin-bottom: 12px; } /* ─── Placeholder Content (In Development) ──────────────────────── */ .placeholder-content { text-align: center; padding: 60px 40px; } .placeholder-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: linear-gradient(135deg, rgba(255, 0, 80, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .placeholder-icon i { width: 40px; height: 40px; color: var(--accent); } .placeholder-content h2 { margin: 0 0 12px; font-size: var(--text-xl); font-weight: 500; color: var(--text-primary); } .placeholder-content > p { margin: 0 0 32px; color: var(--text-muted); font-size: var(--text-md); } .placeholder-features { list-style: none; padding: 0; margin: 0; display: inline-flex; flex-direction: column; gap: 12px; text-align: left; } .placeholder-features li { display: flex; align-items: center; gap: 12px; font-size: var(--text-md); color: var(--text-secondary); } .placeholder-features li i { width: 18px; height: 18px; color: var(--success); } /* ─── Alert Improvements ─────────────────────────────────────────── */ .alert-dismissible { display: flex; align-items: center; gap: 10px; padding-right: 40px; position: relative; } .alert-dismissible i:first-child { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; } .alert-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; opacity: 0.5; cursor: pointer; border-radius: 3px; transition: all var(--transition); } .alert-close:hover { opacity: 1; } .alert-close i { width: 14px; height: 14px; } /* ─── Button Styles ──────────────────────────────────────────────── */ .btn-sm { padding: 6px 12px; font-size: var(--text-base); } /* ─── Form Improvements ──────────────────────────────────────────── */ .form-group { margin-bottom: 20px; } .form-group:last-child { margin-bottom: 0; } .form-group label { display: block; font-size: var(--text-base); font-weight: 400; color: var(--text-secondary); margin-bottom: 8px; } .form-group label .required { color: var(--error); } .form-group label .label-hint { font-size: var(--text-sm); color: var(--text-muted); font-weight: 400; } .form-hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 6px; } /* ─── Input with Icon ────────────────────────────────────────────── */ .input-with-icon { position: relative; } .input-with-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; transition: color var(--transition); } .input-with-icon input { padding-left: 44px; } .input-with-icon input:focus + i, .input-with-icon:focus-within i { color: var(--accent); } /* ─── Toggle Switch ──────────────────────────────────────────────── */ .toggle-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; } .toggle-switch input { display: none; } .toggle-slider { position: relative; width: 40px; height: 22px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 11px; flex-shrink: 0; vertical-align: middle; transition: all var(--transition); } .toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--text-muted); border-radius: 50%; transition: all var(--transition); } .toggle-switch input:checked + .toggle-slider { background: var(--accent); border-color: var(--accent); } .toggle-switch input:checked + .toggle-slider::after { left: 20px; background: white; } .toggle-hint { display: block; font-size: var(--text-xs); color: var(--text-muted); } /* ─── Sticky Form Actions ────────────────────────────────────────── */ .form-actions-sticky { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; background: var(--bg-elevated); border-top: 1px solid var(--border); position: sticky; bottom: 0; } /* ─── User List (for Institution Edit) ───────────────────────────── */ .user-list { display: flex; flex-direction: column; gap: 6px; } .user-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); } .user-list-item.inactive { opacity: 0.5; } .user-avatar-small { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent-muted); color: var(--accent); font-size: var(--text-xxs); font-weight: 600; letter-spacing: 0.3px; border-radius: var(--radius-sm); flex-shrink: 0; vertical-align: middle; } .user-list-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .user-list-name { font-size: var(--text-base); font-weight: 500; color: var(--text-primary); } .user-list-email { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-list-status { font-size: var(--text-xs); font-weight: 500; padding: 2px 6px; background: rgba(239, 68, 68, 0.15); color: var(--error); border-radius: var(--radius-sm); } .user-list-link { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; } .user-list-link:hover { color: var(--accent); text-decoration: none; } .user-list-link i { width: 14px; height: 14px; } /* ─── Partner-Badges Drag & Drop ─────────────────────────────────── */ #partnerList .toggle-chip.active { cursor: grab; } #partnerList .toggle-chip.active:active { cursor: grabbing; } #partnerList .toggle-chip.active::before { content: '⠿'; font-size: 10px; line-height: 1; color: #ffffff; margin-right: 2px; } #partnerList .toggle-chip.dragging { opacity: 0.4; } .partner-drag-hint { display: none; font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; } .partner-drag-hint.visible { display: block; } /* ═══════════════════════════════════════════════════════════════════ MODUL-EINSTELLUNGEN (Plakat, Logo) ═══════════════════════════════════════════════════════════════════ */ /* ─── Admin Panel Header ──────────────────────────────────────────── */ .admin-panel-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; } .admin-panel-header i { width: 18px; height: 18px; color: var(--accent); } .admin-panel-header h3 { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin: 0; } .admin-panel-content { padding: 18px; } /* ─── Form Rows ───────────────────────────────────────────────────── */ .form-row { display: grid; gap: 16px; margin-bottom: 16px; } .form-row:last-child { margin-bottom: 0; } .form-row-2 { grid-template-columns: repeat(2, 1fr); } .form-row-3 { grid-template-columns: repeat(3, 1fr); } .form-row-4 { grid-template-columns: repeat(4, 1fr); } /* ─── CMYK Inputs ─────────────────────────────────────────────────── */ .cmyk-inputs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .cmyk-inputs input { padding: 8px 6px; text-align: center; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: var(--text-base); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); } .cmyk-inputs input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted), 0 0 20px var(--accent-glow); } .cmyk-inputs.cmyk-sm input { padding: 6px 4px; font-size: var(--text-xs); } /* ─── Color Picker Input ──────────────────────────────────────────── */ .input-with-color { display: flex; gap: 8px; } .input-with-color input[type="text"] { flex: 1; } .input-with-color input[type="color"] { width: 40px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg-input); } .input-with-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .input-with-color input[type="color"]::-webkit-color-swatch { border-radius: 2px; border: none; } /* ─── Section Headers ─────────────────────────────────────────────── */ .admin-section-header { display: flex; align-items: center; gap: 10px; margin: 32px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .admin-section-header i { width: 20px; height: 20px; color: var(--accent); } .admin-section-header h2 { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin: 0; } .admin-section-header .section-count { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); background: var(--bg-elevated); padding: 4px 10px; border-radius: var(--radius-sm); } /* ─── Color Cards Grid ────────────────────────────────────────────── */ /* ─── Color Swatch Small ──────────────────────────────────────────── */ .color-swatch-small { display: inline-block; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border); vertical-align: middle; margin-right: 6px; } /* ─── Form Divider ────────────────────────────────────────────────── */ .form-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* ─── Modal ───────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); animation: modalOverlayIn 0.2s ease-out; } .modal-overlay.closing { animation: modalOverlayOut 0.2s ease-in forwards; } @keyframes modalOverlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(4px); } } @keyframes modalOverlayOut { from { opacity: 1; backdrop-filter: blur(4px); } to { opacity: 0; backdrop-filter: blur(0); } } .modal-content { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 500px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: modalContentIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .modal-overlay.closing .modal-content { animation: modalContentOut 0.15s ease-in forwards; } @keyframes modalContentIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modalContentOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.9) translateY(-20px); } } .modal-content.modal-lg { max-width: 700px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .modal-header h3 { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 8px; } .modal-header h3 i { width: 18px; height: 18px; color: var(--accent); } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .modal-close:hover { background: var(--bg-hover); color: var(--text-primary); } .modal-close i { width: 18px; height: 18px; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } .modal-body::-webkit-scrollbar { width: 6px; } .modal-body::-webkit-scrollbar-track { background: transparent; } .modal-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; } .modal-body::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); } /* Form innerhalb eines Modals muss das Flex-Layout von .modal-content uebernehmen, sonst bricht die flex-direction:column an der form-Grenze: modal-body kriegt kein flex:1 und schwillt ueber .modal-content hinaus, wodurch der modal-footer unten abgeschnitten wird. Betrifft alle Modals die Header/Body/Footer in ein Form wrappen (Partnerlogos Rename/Assign, Bulk-Kollektion-Dialog, etc.). */ .modal-content > form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .modal-body h4 { font-size: var(--text-base); font-weight: 500; color: var(--text-secondary); margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-elevated); } /* ─── Modal Danger Variant ───────────────────────────────────────── */ .modal-overlay.modal-danger-overlay { background: rgba(127, 29, 29, 0.5); animation: dangerPulse 2s ease-in-out infinite; } @keyframes dangerPulse { 0%, 100% { background: rgba(127, 29, 29, 0.5); } 50% { background: rgba(153, 27, 27, 0.6); } } .modal-danger { border-color: var(--error); box-shadow: 0 0 40px rgba(239, 68, 68, 0.5), 0 0 80px rgba(239, 68, 68, 0.3), 0 0 120px rgba(239, 68, 68, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5); animation: dangerGlow 1.5s ease-in-out infinite alternate; } @keyframes dangerGlow { 0% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.5), 0 0 80px rgba(239, 68, 68, 0.3), 0 0 120px rgba(239, 68, 68, 0.2), 0 20px 60px rgba(0, 0, 0, 0.5); } 100% { box-shadow: 0 0 60px rgba(239, 68, 68, 0.7), 0 0 100px rgba(239, 68, 68, 0.4), 0 0 150px rgba(239, 68, 68, 0.3), 0 20px 60px rgba(0, 0, 0, 0.5); } } .modal-danger .modal-header { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.2) 100%); border-bottom-color: rgba(239, 68, 68, 0.5); } .modal-danger .modal-header h3 { color: var(--error); } .modal-danger .modal-header h3 i { color: var(--error); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); animation: iconPulse 1s ease-in-out infinite alternate; } @keyframes iconPulse { 0% { filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)); } 100% { filter: drop-shadow(0 0 16px rgba(239, 68, 68, 1)); } } .modal-danger .confirm-message { font-size: var(--text-md); color: var(--text-primary); margin: 0; line-height: 1.5; } .btn-danger { background: linear-gradient(135deg, var(--error) 0%, #dc2626 100%); border-color: var(--error); color: white; box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4), 0 0 30px rgba(239, 68, 68, 0.3); } .btn-danger:hover { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); border-color: #dc2626; box-shadow: 0 6px 30px rgba(239, 68, 68, 0.6), 0 0 50px rgba(239, 68, 68, 0.4); transform: translateY(-2px); } .btn-danger:active { transform: translateY(0); box-shadow: 0 2px 15px rgba(239, 68, 68, 0.4); } .btn-danger i { width: 16px; height: 16px; } [data-theme="light"] .modal-danger { box-shadow: 0 0 30px rgba(239, 68, 68, 0.3), 0 0 60px rgba(239, 68, 68, 0.2), 0 20px 60px rgba(0, 0, 0, 0.15); } [data-theme="light"] .btn-danger { box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); } [data-theme="light"] .btn-danger:hover { box-shadow: 0 6px 25px rgba(239, 68, 68, 0.4); } /* ─── Drawer (generisches Slide-In Panel) ───────────────────────── */ /* Backdrop ueber dem Hintergrund - Modal-Stil mit Blur */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; backdrop-filter: blur(4px); animation: drawerOverlayIn 0.2s ease-out; } .drawer-overlay.closing { animation: drawerOverlayOut 0.2s ease-in forwards; } @keyframes drawerOverlayIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(4px); } } @keyframes drawerOverlayOut { from { opacity: 1; backdrop-filter: blur(4px); } to { opacity: 0; backdrop-filter: blur(0); } } /* Der Drawer-Container, faehrt von rechts (oder links) rein */ .drawer { position: fixed; top: 0; bottom: 0; z-index: 1001; background: var(--bg-panel); border: 1px solid var(--border); box-shadow: 0 0 60px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; overflow: hidden; } .drawer-right { right: 0; border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); animation: drawerInRight 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .drawer-overlay.closing .drawer-right { animation: drawerOutRight 0.2s ease-in forwards; } @keyframes drawerInRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes drawerOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } } .drawer-left { left: 0; border-left: none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; animation: drawerInLeft 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .drawer-overlay.closing .drawer-left { animation: drawerOutLeft 0.2s ease-in forwards; } @keyframes drawerInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes drawerOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* Breiten-Varianten */ .drawer-third { width: 33.333%; } .drawer-half { width: 50%; } .drawer-three-quarter { width: 75%; } .drawer-full { width: 100%; } @media (max-width: 900px) { .drawer-third, .drawer-half, .drawer-three-quarter { width: 100%; } .drawer-right, .drawer-left { border-radius: 0; } } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); flex-shrink: 0; } .drawer-title { font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 8px; } .drawer-title i { width: 18px; height: 18px; color: var(--accent); } .drawer-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); } .drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); } .drawer-close i { width: 18px; height: 18px; } .drawer-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; } .drawer-tab { flex: 1; padding: 12px 16px; background: transparent; border: none; color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; transition: all var(--transition); border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 8px; } .drawer-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg-elevated); } .drawer-tab i { width: 16px; height: 16px; } .drawer-tab-count { font-size: var(--text-xs); color: var(--text-muted); background: var(--bg-hover); padding: 2px 8px; border-radius: 10px; margin-left: 4px; } .drawer-tab.active .drawer-tab-count { background: var(--accent-muted); color: var(--accent); } .drawer-body { flex: 1; overflow-y: auto; padding: 20px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; } .drawer-body::-webkit-scrollbar { width: 6px; } .drawer-body::-webkit-scrollbar-track { background: transparent; } .drawer-body::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; } .drawer-body::-webkit-scrollbar-thumb:hover { background: var(--accent-muted); } .drawer-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-elevated); flex-shrink: 0; } /* ─── Entwurfs-Karten (im Drawer) ──────────────────────────────── */ .entwurf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-content: start; } .entwurf-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: all var(--transition); position: relative; } .entwurf-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .entwurf-card:focus-visible { outline: none; box-shadow: var(--focus-ring); } .entwurf-card-thumb { aspect-ratio: 1; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; } [data-theme="light"] .entwurf-card-thumb { background: #fafafa; } .entwurf-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .entwurf-card-thumb-placeholder { color: var(--text-muted); font-size: var(--text-xs); } .entwurf-card-meta { padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-panel); } .entwurf-card-titel { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .entwurf-card-info { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; } .entwurf-card-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entwurf-card-empty, .entwurf-card-loading { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* Action-Bar oben rechts auf der Kachel - bei Hover/Focus sichtbar */ .entwurf-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition); z-index: 2; } .entwurf-card:hover .entwurf-card-actions, .entwurf-card:focus-within .entwurf-card-actions { opacity: 1; } .entwurf-card-favorit-pin { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fbbf24; border-radius: 50%; z-index: 2; pointer-events: none; } .entwurf-card-favorit-pin svg { width: 14px; height: 14px; fill: currentColor; } .card-action { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg-panel); border-radius: var(--radius-sm); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .card-action:hover { background: var(--accent); color: white; border-color: var(--accent); } .card-action[data-action="delete"]:hover { background: var(--error); border-color: var(--error); } .card-action[data-action="favorit"].is-active { background: #fbbf24; color: #fff; border-color: #fbbf24; } .card-action[data-action="favorit"].is-active svg { fill: currentColor; } .card-action svg { width: 14px; height: 14px; } /* ─── Form Actions ────────────────────────────────────────────────── */ .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } /* ─── Orientation Badge ───────────────────────────────────────────── */ .orientation-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-secondary); } .orientation-badge i { width: 14px; height: 14px; } /* ─── Format Info ─────────────────────────────────────────────────── */ .format-info { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: var(--text-md); color: var(--text-muted); } .format-info i { width: 18px; height: 18px; color: var(--accent); } /* ─── Format Dimensions ───────────────────────────────────────────── */ .format-dimensions { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: var(--text-base); color: var(--text-secondary); } /* ─── Toggle Label (Checkbox with switch look) ────────────────────── */ .toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-base); color: var(--text-primary); } .toggle-label input[type="checkbox"] { display: none; } .toggle-label .toggle-switch { width: 40px; height: 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 11px; position: relative; transition: all var(--transition); } .toggle-label .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--text-muted); border-radius: 50%; transition: all var(--transition); } .toggle-label input:checked + .toggle-switch { background: var(--accent); border-color: var(--accent); } .toggle-label input:checked + .toggle-switch::after { left: 20px; background: white; } /* ─── Text Hint in Tables ─────────────────────────────────────────── */ .text-hint { font-size: var(--text-xs); color: var(--text-muted); margin-left: 6px; } /* ─── Admin Container Variants ────────────────────────────────────── */ .admin-container { max-width: 900px; margin: 0 auto; padding: 24px; } .admin-container-wide { max-width: 1200px; } .admin-container-narrow { max-width: 600px; } .admin-container-full { max-width: none; } /* ─── Admin Utilities ────────────────────────────────────────────── */ .text-hint-centered { padding: 24px; text-align: center; } .db-output { background: var(--bg-primary); padding: 20px; border-radius: 8px; overflow-x: auto; font-family: "SF Mono", Monaco, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre; color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ DATATABLE COMPONENT ═══════════════════════════════════════════════════════════════════════════ */ /* ─── PerPage-Auswahl ──────────────────────────────────────────────────── */ .datatable-perpage { display: flex; align-items: center; gap: 6px; font-size: var(--text-base); color: var(--text-secondary); } /* ─── Footer Bar (Info + Pagination) ───────────────────────────────────── */ .datatable-footer-bar { display: flex; justify-content: center; align-items: center; margin-top: 16px; } .datatable-footer-bar.has-pagination { justify-content: space-between; } .datatable-info { font-size: var(--text-md); color: var(--text-secondary); } /* ─── Pagination ─────────────────────────────────────────────────────── */ .datatable-pagination { display: flex; align-items: center; gap: 4px; } .datatable-pagination .pagination-btn { min-width: 32px; height: 32px; padding: 0 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); font-size: var(--text-md); cursor: pointer; transition: all var(--transition); } .datatable-pagination .pagination-btn:hover:not(:disabled) { background: var(--bg-tertiary); border-color: var(--border-hover); color: var(--text-primary); } .datatable-pagination .pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; } .datatable-pagination .pagination-btn.active { background: var(--accent); border-color: var(--accent); color: white; } .datatable-pagination .pagination-dots { padding: 0 8px; color: var(--text-muted); } .datatable-pagination .pagination-prev, .datatable-pagination .pagination-next { font-weight: bold; } /* ─── Sortierbare Spalten ────────────────────────────────────────────── */ .admin-table th.sortable { cursor: pointer; user-select: none; transition: color var(--transition); } .admin-table th.sortable:hover { color: var(--accent); } .admin-table th.sortable::after { content: ''; display: inline-block; margin-left: 6px; opacity: 0.3; width: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; vertical-align: middle; } .admin-table th.sort-asc, .admin-table th.sort-desc { color: var(--accent); } .admin-table th.sort-asc::after { opacity: 1; border-bottom-color: var(--accent); } .admin-table th.sort-desc::after { opacity: 1; border-top: 5px solid var(--accent); border-bottom: none; } /* ─── Leere DataTable ────────────────────────────────────────────────── */ .datatable-empty td { text-align: center; padding: 40px 20px; color: var(--text-muted); } /* ─── Admin Badges: Rechtestufen ─────────────────────────────────────── */ .rechtestufe-badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--text-sm); font-weight: 500; border-radius: 4px; background: var(--bg-elevated); border: 1px solid var(--border); } .rechtestufe-1 { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #f87171; } .rechtestufe-2 { background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.3); color: #fbbf24; } .rechtestufe-3 { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: #4ade80; } /* ─── Admin Badges: Rollen ───────────────────────────────────────────── */ .role-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; margin-right: 4px; } .role-badge i { width: 16px; height: 16px; } .role-superadmin { background: rgba(239, 68, 68, 0.15); color: #f87171; } .role-gruppen-admin { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .role-medienverantwortlich { background: rgba(168, 85, 247, 0.15); color: #c084fc; } /* ─── Admin Badges: "Sie" Marker ─────────────────────────────────────── */ .badge-you { display: inline-flex; align-items: center; padding: 2px 6px; margin-left: 8px; font-size: var(--text-xxs); font-weight: 600; text-transform: uppercase; background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 4px; color: #60a5fa; } /* ─── Admin Badges: Header Badge ─────────────────────────────────────── */ .header-badge { display: inline-block; margin-left: 12px; padding: 4px 12px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; vertical-align: middle; } .badge-muted { background: var(--bg-elevated); color: var(--text-muted); } .badge-info { background: rgba(59, 130, 246, 0.2); color: #60a5fa; } .badge-success { background: rgba(34, 197, 94, 0.2); color: #4ade80; } /* ─── Input Validation Glow ──────────────────────────────────────────── */ input:invalid:not(:placeholder-shown):not(:focus), input.invalid { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25), 0 0 20px rgba(239, 68, 68, 0.15) !important; } input:valid:not(:placeholder-shown) { border-color: var(--border); } .field-format { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); } /* ─── Role Toggles ───────────────────────────────────────────────────── */ .role-toggles { display: flex; flex-direction: column; gap: 12px; } .role-toggle { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .role-toggle:hover { border-color: var(--border-hover); transform: none !important; } .role-toggle--admin.active { border-color: #f59e0b; background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, var(--bg-elevated) 100%); } .role-toggle--media.active { border-color: #06b6d4; background: linear-gradient(90deg, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 100%); } .role-toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .role-toggle-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); border-radius: 12px; transition: all 0.2s ease; flex-shrink: 0; vertical-align: middle; } .role-toggle-icon i { width: 24px; height: 24px; color: var(--text-muted); transition: color 0.2s ease; } .role-toggle--admin.active .role-toggle-icon { background: #f59e0b; } .role-toggle--media.active .role-toggle-icon { background: #06b6d4; } .role-toggle.active .role-toggle-icon i { color: #fff; } .role-toggle-content { flex: 1; min-width: 0; } .role-toggle-content h3 { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .role-toggle-content p { font-size: var(--text-base); color: var(--text-muted); } .role-toggle-switch { flex-shrink: 0; vertical-align: middle; } .switch-track { display: block; width: 44px; height: 24px; background: var(--bg-primary); border-radius: 12px; position: relative; transition: background 0.2s ease; } .role-toggle--admin.active .switch-track { background: #f59e0b; } .role-toggle--media.active .switch-track { background: #06b6d4; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--text-muted); border-radius: 50%; transition: all 0.2s ease; } .role-toggle.active .switch-thumb { left: 23px; background: #fff; } /* ─── Field Hint ─────────────────────────────────────────────────────── */ .field-hint { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: var(--radius-md); font-size: var(--text-base); color: var(--text-secondary); } .field-hint i { width: 16px; height: 16px; color: #3b82f6; flex-shrink: 0; vertical-align: middle; } .input-disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; } /* ─── Gruppe Logo Cell ───────────────────────────────────────────────── */ .gruppe-logo-cell { width: 48px; height: 32px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; } .gruppe-logo-cell svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } /* ─── Logo Preview (Admin: Benutzergruppen) ─────────────────────────────── */ .gruppe-logo-preview { display: flex; align-items: center; gap: 20px; padding: 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .gruppe-logo-preview-svg { width: 120px; height: 80px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; } .gruppe-logo-preview-svg svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } .gruppe-logo-preview-actions { display: flex; flex-direction: column; gap: 8px; } /* ─── Button Variants ────────────────────────────────────────────────── */ .btn-sm { padding: 6px 12px; font-size: var(--text-sm); } .btn-danger-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-danger-ghost:hover { background: rgba(239, 68, 68, 0.1); color: #f87171; border-color: #f87171; } /* ─── Logo Upload Area ───────────────────────────────────────────────── */ .logo-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; background: var(--bg-elevated); border: 2px dashed var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .logo-upload-area:hover { border-color: var(--accent); background: var(--bg-hover); } .logo-upload-area i { width: 32px; height: 32px; color: var(--text-muted); } .logo-upload-area span { font-size: var(--text-md); color: var(--text-primary); } .logo-upload-area small { font-size: var(--text-xs); color: var(--text-muted); } .logo-upload-area.dragover { border-color: var(--accent); background: rgba(255, 0, 80, 0.05); } /* ─── Partnerlogos Grid ─────────────────────────────────────────── */ .plogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .plogo-card { position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.2s ease; } .plogo-card:hover { border-color: var(--accent); box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); } [data-theme="light"] .plogo-card:hover { box-shadow: 0 4px 20px var(--accent-glow); transform: translateY(-1px); } .plogo-card.readonly { opacity: 0.7; } .plogo-preview { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #b0b0b5; background-image: linear-gradient(45deg, #a8a8ad 25%, transparent 25%), linear-gradient(-45deg, #a8a8ad 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a8a8ad 75%), linear-gradient(-45deg, transparent 75%, #a8a8ad 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; padding: 16px; border-bottom: 1px solid var(--border); } [data-theme="light"] .plogo-preview { background: #e8e8ed; background-image: linear-gradient(45deg, #e0e0e5 25%, transparent 25%), linear-gradient(-45deg, #e0e0e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e5 75%), linear-gradient(-45deg, transparent 75%, #e0e0e5 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0px; } .plogo-preview svg { max-width: 100%; max-height: 100%; width: auto; height: auto; } .plogo-info { padding: 10px 12px; } .plogo-name { font-size: var(--text-base); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Marquee-Scroll für lange Texte - immer aktiv (kein Hover nötig). JS misst Overflow pro Element und setzt CSS-Variablen --marquee-offset + --marquee-duration. Duration = Distanz / Speed → alle scrollen mit derselben Pixel/Sekunde-Geschwindigkeit. Ping-Pong via `alternate`, linear für konstanten Speed. */ .plogo-name { overflow: hidden; } .plogo-name .plogo-name-scroll { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* Meta-Zeile: Icon + Wrapper + Text. Wrapper übernimmt das overflow-clip, damit der translateX-Scroll nicht über das Icon läuft. */ .mg-card-meta > div { display: flex; align-items: center; gap: 4px; } .mg-card-meta > div > i, .mg-card-meta > div > svg { flex-shrink: 0; } .mg-meta-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; } .mg-meta-text { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .plogo-name-scroll.has-marquee, .mg-meta-text.has-marquee { max-width: none; overflow: visible; text-overflow: clip; animation: plogo-marquee var(--marquee-duration, 8s) linear infinite alternate; } /* Pausen an beiden Enden: 0-25 % stehen links, 25-75 % scroll, 75-100 % stehen rechts. Bei `alternate` wird dieser Ablauf rückwärts wiederholt → pause-scroll-pause-pause-scroll-pause. JS hält die Scroll-Phase (50 %) konstant auf 25 px/s, so dass alle Marquees gleich schnell laufen. */ @keyframes plogo-marquee { 0%, 25% { transform: translateX(0); } 75%, 100% { transform: translateX(var(--marquee-offset, 0)); } } .plogo-meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .plogo-badge { font-size: var(--text-xxs); padding: 1px 6px; border-radius: 8px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .plogo-badge-all { background: var(--accent-muted); border-color: var(--accent); color: var(--accent); } .plogo-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; } .plogo-card:hover .plogo-actions { opacity: 1; } .plogo-actions .btn-icon { width: 30px; height: 30px; background: rgba(0, 0, 0, 0.5); border: none; border-radius: var(--radius-sm); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); color: #fff; } .plogo-actions .btn-icon svg { color: #fff; stroke: #fff; } .plogo-actions .btn-icon:hover { background: rgba(0, 0, 0, 0.7); } .plogo-actions .btn-icon-danger:hover { background: var(--error); } .plogo-actions .inline-form { display: inline; margin: 0; padding: 0; } /* ─── Partnerlogos Upload Zone ──────────────────────────────────── */ .plogo-upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--bg-elevated); border: 2px dashed var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; margin-bottom: 24px; } .plogo-upload-zone:hover { border-color: var(--accent); background: var(--bg-hover); } .plogo-upload-zone.dragover { border-color: var(--accent); background: rgba(255, 0, 80, 0.05); } .plogo-upload-zone i { width: 28px; height: 28px; color: var(--text-muted); } .plogo-upload-zone span { font-size: var(--text-base); color: var(--text-primary); } .plogo-upload-zone small { font-size: var(--text-xs); color: var(--text-muted); } /* ─── Mediengalerie KI-Toggle im Upload-Accordion ───────────────── */ .mg-ki-toggle label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm); } .mg-ki-toggle input[type="checkbox"] { cursor: pointer; } /* ─── Mediengalerie Upload-Accordion ───────────────────────────── */ .mg-upload-accordion { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 20px; overflow: hidden; } .mg-upload-accordion > summary { padding: 14px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; color: var(--text-primary); font-weight: 500; } .mg-upload-accordion > summary::-webkit-details-marker { display: none; } .mg-upload-accordion > summary:hover { background: var(--bg-elevated); } .mg-upload-accordion .mg-accordion-chevron { margin-left: auto; transition: transform 0.2s; } .mg-upload-accordion[open] .mg-accordion-chevron { transform: rotate(180deg); } .mg-upload-body { padding: 20px; border-top: 1px solid var(--border); } /* Gleichmäßiger Abstand zwischen den Blöcken im Accordion-Body (field-grid -> Drag-Zone -> Queue) */ .mg-upload-body > * + * { margin-top: 16px; } /* ─── Mediengalerie Upload-Queue ───────────────────────────────── */ .mg-queue { list-style: none; padding: 0; margin: 16px 0 0; } .mg-queue-item { padding: 10px 12px; border-top: 1px solid var(--border); } .mg-queue-item:first-child { border-top: none; } .mg-queue-row { display: grid; grid-template-columns: 1fr 120px 140px 28px; gap: 12px; align-items: center; } .mg-queue-remove { background: transparent; border: none; color: var(--text-muted); cursor: pointer; width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, color 0.15s; } .mg-queue-remove:hover { background: rgba(239, 68, 68, 0.15); color: var(--error); } .mg-queue-remove svg { width: 14px; height: 14px; } /* Entfernen-Button nur für Items, die noch wartend sind. Sobald Upload läuft / fertig / Fehler: Button verschwindet - dann ist die Datei entweder schon auf dem Server oder wird gerade übertragen. */ .mg-queue-item:not(.pending) .mg-queue-remove { display: none; } .mg-queue-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-queue-bar { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; } .mg-queue-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.15s; } .mg-queue-status { font-size: var(--text-xs); color: var(--text-muted); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; } .mg-queue-status svg { width: 14px; height: 14px; } .mg-queue-item.done .mg-queue-bar-fill { background: var(--success); } .mg-queue-item.done .mg-queue-status { color: var(--success); } .mg-queue-item.warning .mg-queue-bar-fill { background: var(--warning); } .mg-queue-item.warning .mg-queue-status { color: var(--warning); } .mg-queue-item.error .mg-queue-bar-fill { background: var(--error); } .mg-queue-item.error .mg-queue-status { color: var(--error); } /* Zwischen Upload-100 % und Server-Response: Bar bleibt voll, wandernder Schimmer signalisiert "es läuft noch was" (Thumbnails, pHash, Optimize). Kein Rücksprung der Bar - der Upload IST ja fertig, nur der Server verarbeitet. */ .mg-queue-item.processing .mg-queue-bar-fill { width: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%), var(--accent); background-size: 40% 100%, 100% 100%; background-repeat: no-repeat, no-repeat; animation: mgProcessShimmer 1.4s linear infinite; } @keyframes mgProcessShimmer { 0% { background-position: -40% 0, 0 0; } 100% { background-position: 140% 0, 0 0; } } /* Duplikate (kleine Thumb-Reihe unter dem Queue-Item) */ .mg-queue-extra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; } .mg-queue-extra:empty { display: none; } .mg-queue-dup-label { font-size: var(--text-xs); color: var(--text-muted); margin-right: 4px; } .mg-queue-dup { display: block; width: 40px; height: 40px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); } .mg-queue-dup img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Mediengalerie Card: Typ-Icon (Default-Basis) ──────────────── Position/Groesse werden im .plogo-card .mg-card-typ-Block unten ueberschrieben. Ohne .has-color: halbtransparenter dunkler Chip (Fallback wenn hauptfarbe_hex fehlt). Mit .has-color: echte Pixel-Mittelfarbe via --swatch (siehe plogo-card-Override). */ .mg-card-typ { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 50%; backdrop-filter: blur(4px); z-index: 2; } .mg-card-typ svg { width: 14px; height: 14px; } /* ─── Mediengalerie Card (wiederverwendet plogo-card) ────────── */ /* Cards sind in beiden Welten klickbar: Frontend = Lightbox, Admin = Lightbox. Cursor entsprechend setzen, nicht-klickbare Sonderfälle (.readonly) override. */ .mg-card { cursor: pointer; } .mg-card.readonly { cursor: default; } /* Schachbrett und Padding aus .plogo-preview entfernen - in der Mediengalerie haben wir Fotos/Videos/Waveforms ohne Transparenz, das Bild soll die ganze Fläche ausfüllen. */ .mg-card .plogo-preview { position: relative; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; background: var(--bg-elevated); background-image: none; } [data-theme="light"] .mg-card .plogo-preview { background: var(--bg-elevated); background-image: none; } .mg-card .plogo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .mg-card .plogo-preview .mg-thumb-fallback { width: 36px; height: 36px; color: var(--text-muted); } /* Meta-Zeilen unter dem Card-Titel: Flex-Layout, Icon-Alignment + marquee-Wrapper siehe Hauptblock "Marquee-Scroll". Hier nur Basis-Layout und Icon-Größe. */ .mg-card-meta { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; } .mg-card-meta svg { width: 12px; height: 12px; vertical-align: -2px; flex-shrink: 0; } /* Admin-Card-Overrides: Checkbox links statt rechts, Typ-Icon unten links statt oben links, damit sich Checkbox, Typ-Icon und .plogo-actions (oben rechts bei Hover) nicht ins Gehege kommen. Die Haupt-Definitionen von .mg-card-check und .mg-card-typ stehen im Frontend-Block (Default). */ .plogo-card .mg-card-check { left: 8px; right: auto; z-index: 2; } /* Admin-Card: Typ-Icon ist gleichzeitig der Hauptfarben-Indikator - deutlich grösser als im Frontend, Hintergrund kommt aus --swatch (echte Pixel-Mittelfarbe), Icon-Farbe aus --swatch-fg (kontrastreich). */ .plogo-card .mg-card-typ { top: auto; bottom: 8px; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; } .plogo-card .mg-card-typ.has-color { background: var(--swatch); color: var(--swatch-fg, #fff); border: 1.5px solid rgba(255, 255, 255, 0.45); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); backdrop-filter: none; } /* Zwei dominante Farben: Kreis vertikal geteilt - Primary links, Secondary rechts. --swatch-fg wird weiterhin aus der Primary berechnet; das Icon sitzt auf der Trennlinie und bekommt einen Drop-Shadow, damit es auf beiden Hälften lesbar bleibt. */ .plogo-card .mg-card-typ.has-two-colors { background: conic-gradient(from 0deg, var(--swatch-2) 0deg 180deg, var(--swatch) 180deg 360deg); } .plogo-card .mg-card-typ.has-two-colors svg { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.45)); } .plogo-card .mg-card-typ svg { width: 18px; height: 18px; } /* ─── Admin-Mediengalerie-Lightbox: Minimal-Variante ─────────── */ .mg-lightbox-simple .mg-lightbox-content { grid-template-columns: 1fr; background: transparent; height: auto; max-height: 90vh; } .mg-lightbox-simple .mg-lightbox-viewer { background: transparent; } .mg-lightbox-simple .mg-lightbox-info { display: none; } .mg-lb-filename { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 8px 16px; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 10px; font-size: var(--text-sm); backdrop-filter: blur(8px); max-width: 80vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Download-Counter unten rechts */ .mg-card-downloads { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); } .mg-card-downloads svg { width: 12px; height: 12px; } /* Status-Badge oben rechts - wird bei Hover ausgeblendet damit .plogo-actions freie Bahn hat */ .mg-card-badge { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 8px; border-radius: 10px; font-size: var(--text-xs); backdrop-filter: blur(4px); transition: opacity 0.15s; } .plogo-card:hover .mg-card-badge { opacity: 0; pointer-events: none; } /* ─── Mediengalerie Bulk-Actions-Bar ────────────────────────────── */ .mg-bulkbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 0 0 16px; background: var(--bg-panel); border: 1px solid var(--accent); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); } .mg-bulkbar > button { margin-left: 0; } .mg-bulkbar > button:last-child { margin-left: auto; } /* KI-Status-Badge im Queue-Item (mit Icon) */ /* ─── Mediengalerie Bearbeiten: Preview ───────────────────────── */ .mg-edit-preview { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .mg-edit-preview img, .mg-edit-preview video { max-width: 100%; max-height: 500px; border-radius: var(--radius-sm); } .mg-edit-preview audio { width: 100%; max-width: 500px; } /* Meta-Infos unter der Bearbeiten-Preview als Chip-Liste mit Icons */ .mg-edit-meta { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .mg-edit-meta li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px; font-size: var(--text-xs); color: var(--text-secondary); } .mg-edit-meta svg { width: 12px; height: 12px; color: var(--text-muted); } /* Farb-Swatch in der Meta-Liste (Hauptfarbe). Hex per --swatch-Custom-Property. Ersetzt das alte Tropfen-Icon - der Punkt selbst ist die Information. */ .mg-color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--swatch, var(--bg-elevated)); border: 1px solid var(--border); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ MEDIENGALERIE - Gemeinsam für Frontend-Grid + Admin-Lightbox ═══════════════════════════════════════════════════════════════════ */ /* Admin-Audio-Karten: runder Play-Button über der Waveform. Hidden