/* PINIT Look & Feel theme layer — tokens and component rules per PINIT_Styleguide_Erweiterung.docx. Scoped to .pinit-theme so it never collides with anything else; PUBLISH's Studio applies this class on , the public share viewer deliberately does not (the plan principle: "the viewer should interfere as little as possible" with a customer's own document design). */ :root, .pinit-theme { --pinit-color-brand-dark: #1D1733; --pinit-color-primary: #E26A61; --pinit-color-primary-hover: #D95D54; --pinit-color-primary-soft: rgba(226, 106, 97, 0.12); --pinit-color-app-bg: #E5E4DF; --pinit-color-surface: #FFFFFF; --pinit-color-surface-muted: #F7F5F2; --pinit-color-text: #2E2E2E; --pinit-color-text-muted: #6F6F6F; --pinit-color-border: #D8D8D8; --pinit-color-border-light: #EAEAEA; --pinit-color-success: #4DAA57; --pinit-color-warning: #F2A93B; --pinit-color-error: #D84343; --pinit-color-disabled: #BDBDBD; --pinit-radius-sm: 6px; --pinit-radius-md: 8px; --pinit-radius-lg: 14px; --pinit-radius-xl: 18px; --pinit-shadow-card: 0 8px 18px rgba(0, 0, 0, 0.12); --pinit-shadow-card-hover: 0 10px 22px rgba(0, 0, 0, 0.16); --pinit-space-1: 4px; --pinit-space-2: 8px; --pinit-space-3: 12px; --pinit-space-4: 16px; --pinit-space-6: 24px; --pinit-space-8: 32px; font-family: "Roboto", Arial, sans-serif; } .pinit-theme { background: var(--pinit-color-app-bg); color: var(--pinit-color-text); margin: 0; min-height: 100vh; font-size: 14px; line-height: 20px; font-weight: 400; } .pinit-theme * { box-sizing: border-box; } .pinit-theme a { color: var(--pinit-color-primary); text-decoration: none; } .pinit-theme a:hover { text-decoration: underline; } /* Typography scale */ .pinit-theme h1 { font-size: 20px; font-weight: 500; line-height: 28px; margin: 0 0 var(--pinit-space-4); } .pinit-theme h2 { font-size: 16px; font-weight: 500; line-height: 24px; margin: var(--pinit-space-6) 0 var(--pinit-space-3); } .pinit-theme label, .pinit-theme .field-label { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--pinit-color-text-muted); display: block; margin-bottom: var(--pinit-space-1); } .pinit-theme .meta { font-size: 12px; line-height: 16px; color: var(--pinit-color-text-muted); } /* App shell */ .pinit-shell { min-height: 100vh; } .pinit-topbar { display: flex; align-items: center; gap: var(--pinit-space-4); padding: var(--pinit-space-3) var(--pinit-space-6); background: var(--pinit-color-surface); border-bottom: 1px solid var(--pinit-color-border-light); } .pinit-brand { display: flex; align-items: center; gap: var(--pinit-space-2); } .pinit-brand-badge { width: 32px; height: 32px; border-radius: var(--pinit-radius-md); background: var(--pinit-color-brand-dark); display: flex; align-items: center; justify-content: center; flex: none; } .pinit-brand-badge img { width: 18px; height: 18px; } .pinit-brand-name { font-size: 16px; font-weight: 500; color: var(--pinit-color-text); } .pinit-nav { display: flex; gap: var(--pinit-space-1); margin-left: var(--pinit-space-6); } .pinit-nav a { display: flex; align-items: center; gap: var(--pinit-space-1); padding: var(--pinit-space-2) var(--pinit-space-3); border-radius: var(--pinit-radius-md); color: var(--pinit-color-text-muted); font-weight: 500; font-size: 13px; } .pinit-nav a:hover { background: var(--pinit-color-surface-muted); text-decoration: none; } .pinit-nav a.active { color: var(--pinit-color-primary); background: var(--pinit-color-primary-soft); } .pinit-nav .material-symbols-outlined { font-size: 20px; } .pinit-topbar-spacer { flex: 1; } .pinit-user { font-size: 13px; color: var(--pinit-color-text-muted); display: flex; align-items: center; gap: var(--pinit-space-3); } .pinit-main { max-width: 1040px; margin: 0 auto; padding: var(--pinit-space-6); } /* Cards */ .pinit-card { background: var(--pinit-color-surface); border: 1px solid var(--pinit-color-border-light); border-radius: var(--pinit-radius-lg); box-shadow: var(--pinit-shadow-card); padding: var(--pinit-space-6); margin-bottom: var(--pinit-space-4); } /* Buttons —