/* 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; }

Pitch

Pitchsätze

Kombination A

Unser Projekt META DIALOG macht die Raupe zum Star und erklärt ihre Verwandlung zum Falter.

Es bereichert die Ausstellung Metamorphosis. States of Change um ein Live-Bild, auf dem die Betrachter:iin die Metamorphose zum Schmetterling erleben.

Dafür haben wir den Beobachtungsapperat FLATTERKASTEN 3000 entworfen.

Kombination B

Unser Projekt FALTERLAB macht die Metamorphose im Dialog mit dem Schmetterling erfahrbar.

Es bereichert die Ausstellung Metamorphosis. States of Change um einen lebendigen Einblick in die Magie der Transformation.

Dafür haben wir den Beobachtungsapperat PAPILOsphere entworfen.

Kombination C

Unser Projekt BUTTERFLY DIARIES macht es möglich, sich mit drei Raupen auf ihrem Weg zum Schmetterling zu unterhalten.

Es bereichert die Ausstellung Metamorphosis. States of Change um eine interaktive, technologische Dimension, die biologische Prozesse in digitale Erzählungen übersetzt.

Dafür haben wir den Beobachtungsapperat RAUPEN-WG entworfen.

Es bereichert die Ausstellung Metamorphosis. States of Change um einen lebendigen Einblick in die Magie der Transformation.