/* 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;
}
Seminarziel
Von der Raupe zur Nutzer:in
