/* Vicari Super.site CSS - Mit Header-Bilder Fix */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400; 500;600;700&display=swap'); /* ===== DESIGN SYSTEM ===== */ :root { /* Typography */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-secondary: 'Josefin Sans', sans-serif; /* Font Sizes */ --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 36px; /* Colors */ --color-black: #000000; --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-300: #d1d5db; --color-gray-600: #4b5563; --color-gray-900: #111827; /* Brand Colors */ --color-magenta: #ff00a0; --color-orange: #ffa500; --color-anthracite: #575250; /* Layout */ --max-width: 800px; --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Transitions */ --transition-base: all 0.2s ease-in-out; } /* ===== HEADER-BILDER FIX - ÜBERSCHREIBT ULT THEME ===== */ .notion-header { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; margin: 0 auto var(--spacing-xl) auto !important; max-width: 100% !important; width: 100% !important; height: auto !important; overflow: visible !important; background: transparent !important; z-index: 100 !important; box-shadow: none !important; border-radius: 12px !important; } .notion-header img, .notion-header .notion-image, .notion-header .notion-image-block img, .notion-page-cover, .notion-page-cover-image { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; min-height: 200px !important; max-height: 400px !important; object-fit: cover !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; transition: var(--transition-base) !important; position: relative !important; z-index: 1 !important; margin: 0 !important; padding: 0 !important; } /* ULT Theme Override - Force Header Images */ [data-theme="ult"] .notion-header, .ult .notion-header { display: block !important; height: auto !important; } [data-theme="ult"] .notion-header img, .ult .notion-header img { display: block !important; opacity: 1 !important; } /* ===== GLOBAL STYLES ===== */ body { font-family: var(--font-primary) !important; font-size: var(--text-base) !important; line-height: 1.6 !important; color: var(--color-gray-900) !important; background-color: var(--color-white) !important; } /* ===== TYPOGRAPHY ===== */ h1 { font-family: var(--font-primary) !important; font-size: var(--text-3xl) !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--color-black) !important; margin-bottom: var(--spacing-lg) !important; letter-spacing: -0.025em !important; } h2 { font-family: var(--font-primary) !important; font-size: var(--text-2xl) !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--color-black) !important; margin-bottom: var(--spacing-md) !important; margin-top: var(--spacing-xl) !important; } h3 { font-family: var(--font-primary) !important; font-size: var(--text-xl) !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--color-anthracite) !important; margin-bottom: var(--spacing-sm) !important; margin-top: var(--spacing-lg) !important; } p, .notion-text-block { font-family: var(--font-primary) !important; font-size: var(--text-base) !important; line-height: 1.7 !important; color: var(--color-gray-900) !important; margin-bottom: var(--spacing-md) !important; } /* ===== NAVIGATION ===== */ .notion-page-content > div:first-child { background: var(--color-gray-900) !important; color: var(--color-white) !important; padding: var(--spacing-xl) var(--spacing-lg) !important; margin: 0 calc(-1 * var(--spacing-md)) var(--spacing-2xl) calc(-1 * var(--spacing-md)) !important; text-align: center !important; border-bottom: 1px solid var(--color-gray-100) !important; } .notion-page-content > div:first-child h1 { color: var(--color-white) !important; font-size: var(--text-2xl) !important; font-weight: 400 !important; margin-bottom: var(--spacing-md) !important; letter-spacing: 0 !important; } .notion-page-content > div:first-child a { background: transparent !important; color: var(--color-white) !important; padding: var(--spacing-sm) var(--spacing-md) !important; text-decoration: none !important; font-family: var(--font-primary) !important; font-weight: 400 !important; font-size: var(--text-sm) !important; margin: 0 var(--spacing-xs) !important; display: inline-block !important; transition: var(--transition-base) !important; border-bottom: 2px solid transparent !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .notion-page-content > div:first-child a:hover { color: var(--color-magenta) !important; border-bottom-color: var(--color-magenta) !important; background: transparent !important; } /* ===== CONTENT LAYOUT ===== */ .notion-page { max-width: var(--max-width) !important; margin: 0 auto !important; padding: 0 var(--spacing-md) !important; } /* ===== LINKS ===== */ a { color: var(--color-magenta) !important; text-decoration: none !important; font-weight: 500 !important; transition: var(--transition-base) !important; } a:hover { color: var(--color-orange) !important; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .notion-header { border-radius: 8px !important; } .notion-header img { border-radius: 8px !important; min-height: 150px !important; max-height: 250px !important; } .notion-page { padding: 0 var(--spacing-sm) !important; } } /* ===== DEBUG - Falls immer noch keine Bilder ===== */ .notion-header:empty::after { content: "Header-Bild sollte hier sein - Prüfen Sie Notion Cover Image" !important; display: block !important; padding: var(--spacing-lg) !important; background: var(--color-gray-100) !important; text-align: center !important; color: var(--color-gray-600) !important; border-radius: 8px !important; }

S01 Seminarziel & schematischer Ablauf

Seminarziel

Von der Raupe zur Nutzer:in

image