*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Design Tokens - warme, erdige Palette: Terrakotta, Honig, Salbei auf Papiertönen */ :root { color-scheme: light; --color-bg: #faf3e6; --color-bg-secondary: #fffaf0; --color-bg-tertiary: #f3e6cf; --color-text: #3d2f23; --color-text-secondary: #6d5a49; --color-text-tertiary: #94806b; --color-accent: #bc5418; --color-accent-hover: #9e4511; --color-accent-soft: rgba(188, 84, 24, 0.12); --color-on-accent: #fff9ef; --color-success: #5b7c48; --color-success-soft: rgba(91, 124, 72, 0.14); --color-honey: #a97b17; --color-honey-soft: rgba(224, 168, 62, 0.2); --color-border: #e9dbc3; --color-surface-translucent: rgba(250, 243, 230, 0.88); /* Event-Arten */ --color-position: #bc5418; --color-action: #5b7c48; /* Kategorie-Akzente */ --color-cat-education: #4a6fa5; --color-cat-education-soft: rgba(74, 111, 165, 0.14); --color-cat-culture: #8e5f88; --color-cat-culture-soft: rgba(142, 95, 136, 0.14); /* Weiche, warm getönte Schatten statt harter Kanten */ --shadow-sm: 0 2px 8px -2px rgba(77, 51, 26, 0.1); --shadow-md: 0 12px 30px -14px rgba(77, 51, 26, 0.2); --shadow-lg: 0 24px 50px -24px rgba(77, 51, 26, 0.3); /* Freundliche Formsprache */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Lokale Serif-Schrift für Überschriften - keine externen Ressourcen */ --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; /* Dezentes Papierkorn */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.31 0 0 0 0 0.17 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); /* Handgezeichneter Schwung (als Maske eingefärbt) */ --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8C18 2 32 11 50 6S86 2 102 7s12 2 16-1' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Warmer Dark Mode - Kerzenlicht statt Kühlschrank. Gesteuert über data-theme auf : das Head-Script setzt es vor dem ersten Paint (manuelle Wahl aus localStorage oder System-Präferenz), der Mond/Sonne-Button im Header schaltet um. */ html[data-theme="dark"] { color-scheme: dark; --color-bg: #211a13; --color-bg-secondary: #2b2219; --color-bg-tertiary: #382c1f; --color-text: #f7eede; --color-text-secondary: #d5c3ab; --color-text-tertiary: #a68f74; --color-accent: #de8148; --color-accent-hover: #e99560; --color-accent-soft: rgba(222, 129, 72, 0.16); --color-on-accent: #2b1a0b; --color-success: #97b475; --color-success-soft: rgba(151, 180, 117, 0.16); --color-honey: #dcaf55; --color-honey-soft: rgba(220, 175, 85, 0.16); --color-border: #463829; --color-surface-translucent: rgba(33, 26, 19, 0.9); --color-position: #de8148; --color-action: #97b475; --color-cat-education: #85a5cf; --color-cat-education-soft: rgba(133, 165, 207, 0.16); --color-cat-culture: #bd8bb5; --color-cat-culture-soft: rgba(189, 139, 181, 0.16); --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 30px -14px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 50px -24px rgba(0, 0, 0, 0.6); } html { scroll-behavior: smooth; } body { font-family: var(--font-family); background-color: var(--color-bg); background-image: var(--grain); color: var(--color-text); line-height: 1.6; min-height: 100vh; } ::selection { background: var(--color-accent); color: var(--color-on-accent); } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* Anker-Sprünge: Platz für den fixen Header lassen, sanft scrollen */ html { scroll-padding-top: 90px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Header */ header { position: fixed; top: 0; left: 0; right: 0; background: var(--color-surface-translucent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); z-index: 100; } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.5rem; color: var(--color-text); text-decoration: none; } .logo-icon { width: 40px; height: 40px; background: var(--color-accent); color: var(--color-on-accent); /* Organischer Klecks statt App-Icon-Quadrat */ border-radius: 50% 45% 55% 48% / 48% 55% 45% 52%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-family: var(--font-display); font-style: italic; box-shadow: var(--shadow-sm); } .legal-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--color-text-tertiary); transition: all 0.2s; } .legal-link:hover { color: var(--color-accent); background: var(--color-accent-soft); } .header-right { display: flex; align-items: center; gap: 0.5rem; } .lang-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--color-text-tertiary); transition: all 0.2s; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; text-decoration: none; } .lang-link:hover { color: var(--color-accent); background: var(--color-accent-soft); } /* Anker-Navigation in der Mitte des Headers */ .header-nav { display: flex; align-items: center; gap: 1.75rem; } .header-nav a { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s; } .header-nav a:hover { color: var(--color-accent); } @media (max-width: 760px) { .header-nav { display: none; } } /* Icon-Buttons im Header (Theme-Umschalter) */ .icon-btn { background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer; } /* Mond im hellen, Sonne im dunklen Modus - rein CSS-gesteuert, kein Aufblitzen */ .theme-toggle svg { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Hero Section */ .hero { padding: 8rem 0 5rem; min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; } /* Warme Lichtflecken - wie Nachmittagssonne */ .hero::before { content: ''; position: absolute; top: -120px; right: -140px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--color-honey-soft), transparent 68%); pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -160px; left: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle at 65% 65%, var(--color-accent-soft), transparent 70%); pointer-events: none; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .hero-text { width: 100%; min-width: 0; overflow: hidden; contain: layout style; } .hero-text h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; height: 7.7rem; position: relative; } .hero-text h1 .rotating-text { color: var(--color-accent); display: block; position: absolute; top: 0; left: 0; width: 100%; } .rotating-text { animation: fadeInUp 0.5s ease-out; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .rotating-text.fade-out { animation: fadeOutUp 0.3s ease-in forwards; } .rotating-text.fade-in { animation: fadeInUp 0.4s ease-out forwards; } .hero-text .tagline { font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 2rem; max-width: 500px; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; } .btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-accent-hover); transform: translateY(-2px); } .btn-secondary { background: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); } .btn-secondary:hover { background: var(--color-bg-tertiary); transform: translateY(-2px); } .store-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: all 0.2s; position: relative; box-shadow: var(--shadow-sm); } .store-btn.disabled { opacity: 0.7; cursor: not-allowed; pointer-events: none; } .store-btn:not(.disabled):hover { background: var(--color-bg-tertiary); transform: translateY(-2px); } .store-btn svg { width: 28px; height: 28px; } .store-btn-text { text-align: left; } .store-btn-text small { display: block; font-size: 0.7rem; color: var(--color-text-tertiary); } .store-btn-text strong { display: block; font-size: 1rem; } .coming-soon-badge { position: absolute; top: -8px; right: -8px; background: var(--color-accent); color: var(--color-on-accent); font-size: 0.65rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; } .hero-visual { display: flex; justify-content: center; position: relative; } /* Honigfarbener Schein hinter dem Telefon */ .hero-visual::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, var(--color-honey-soft), transparent 70%); pointer-events: none; } /* Phone Mockup */ .phone-mockup { width: 320px; height: 620px; background: linear-gradient(145deg, #3a3330, #221f1d); border-radius: 48px; padding: 12px; box-shadow: var(--shadow-lg); position: relative; } .phone-mockup::before { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 100px; height: 28px; background: #1c1917; border-radius: 20px; z-index: 10; } .phone-screen { width: 100%; height: 100%; background: var(--color-bg); border-radius: 40px; overflow: hidden; display: flex; flex-direction: column; } .phone-content { flex: 1; overflow-y: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; text-align: left; } .phone-content::-webkit-scrollbar { width: 4px; } .phone-content::-webkit-scrollbar-track { background: transparent; } .phone-content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; } .phone-header { padding: 48px 16px 16px; background: var(--color-bg); text-align: left; } .phone-header h3 { font-size: 1.5rem; font-weight: 700; } /* App-style Event Cards */ .app-event-card { display: flex; margin-bottom: 12px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-secondary); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .app-event-bar { width: 4px; flex-shrink: 0; } .app-event-content { flex: 1; padding: 14px; } .app-event-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; } .app-event-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; line-height: 1.3; } .app-event-organizer { font-size: 0.75rem; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 4px; } .app-event-badge { font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } /* Ehrenamts-Position (laufend) */ .app-event-badge.position { background: var(--color-position); color: var(--color-on-accent); } /* Aktion (einmalig) */ .app-event-badge.action { background: var(--color-action); color: var(--color-on-accent); } .app-event-info { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 0.8rem; color: var(--color-text-secondary); } .app-event-info-item { display: flex; align-items: center; gap: 4px; } .app-event-location { font-size: 0.75rem; color: var(--color-text-tertiary); display: flex; align-items: center; gap: 4px; margin-bottom: 6px; } .app-event-meta { display: flex; align-items: center; gap: 12px; font-size: 0.7rem; flex-wrap: wrap; } .app-event-meta-item { display: flex; align-items: center; gap: 3px; color: var(--color-text-tertiary); } .app-event-meta-item.inquiry { color: var(--color-accent); } .app-event-meta-item.slots { color: var(--color-success); } .app-event-meta-item.bookmarks { color: var(--color-text-tertiary); } .verified-icon { color: var(--color-success); } /* Phone Bottom Nav */ .phone-nav { display: flex; justify-content: space-around; padding: 12px 16px 24px; background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); } .phone-nav-item { display: flex; align-items: center; justify-content: center; color: var(--color-text-tertiary); } .phone-nav-item.active { color: var(--color-accent); } /* Features Section */ .features { padding: 6rem 0; background: var(--color-bg-secondary); } .section-title { text-align: center; margin-bottom: 4rem; } .section-title h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } .section-title p { color: var(--color-text-secondary); font-size: 1.125rem; max-width: 600px; margin: 0 auto; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .feature-card { padding: 2rem; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; text-align: center; } .feature-card:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--shadow-md); } .feature-card:nth-child(even):hover { transform: translateY(-4px) rotate(0.6deg); } /* Weiche Farbkleckse statt Gradient-Quadrate - jede Karte hat ihren eigenen warmen Ton */ .feature-icon { width: 60px; height: 60px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; margin-left: auto; margin-right: auto; } .feature-card:nth-child(even) .feature-icon { border-radius: 55% 45% 48% 52% / 46% 55% 45% 54%; } .feature-card:nth-child(6n+2) .feature-icon { background: var(--color-success-soft); color: var(--color-success); } .feature-card:nth-child(6n+3) .feature-icon { background: var(--color-honey-soft); color: var(--color-honey); } .feature-card:nth-child(6n+4) .feature-icon { background: var(--color-cat-culture-soft); color: var(--color-cat-culture); } .feature-card:nth-child(6n+5) .feature-icon { background: var(--color-cat-education-soft); color: var(--color-cat-education); } .feature-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; } .feature-card p { color: var(--color-text-secondary); font-size: 0.95rem; } /* Categories Section */ .categories { padding: 5rem 0; background: var(--color-bg); } .categories-content { max-width: 820px; margin: 0 auto; text-align: center; } .categories-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; } .categories-content > p { color: var(--color-text-secondary); font-size: 1.05rem; margin-bottom: 2rem; } .category-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .category-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.95rem; font-weight: 600; box-shadow: var(--shadow-sm); } /* Bunte Punkte - viele verschiedene Menschen, viele verschiedene Felder */ .category-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50% 45% 55% 50%; background: var(--color-accent); flex-shrink: 0; } .category-chip:nth-child(5n+2)::before { background: var(--color-success); } .category-chip:nth-child(5n+3)::before { background: var(--color-honey); } .category-chip:nth-child(5n+4)::before { background: var(--color-cat-education); } .category-chip:nth-child(5n)::before { background: var(--color-cat-culture); } /* Inquiries Section */ .inquiries { padding: 6rem 0; background: var(--color-bg-secondary); } .inquiries-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .inquiries-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--color-accent-soft); color: var(--color-accent); font-size: 0.875rem; font-weight: 600; border-radius: 999px; margin-bottom: 1rem; } .inquiries-text h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; } .inquiries-text h2 span { color: var(--color-accent); } .inquiries-text > p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; } .inquiries-list { list-style: none; } .inquiries-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .inquiries-list .icon { width: 32px; height: 32px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .inquiries-list strong { display: block; margin-bottom: 0.25rem; } .inquiries-list span { color: var(--color-text-secondary); font-size: 0.9rem; } .inquiries-visual { display: flex; justify-content: center; } .chat-mockup { width: 300px; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-lg); text-align: left; } .chat-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--color-bg-tertiary); } .chat-header-icon { width: 40px; height: 40px; background: var(--color-accent); color: var(--color-on-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .chat-header-text strong { display: block; font-size: 0.9rem; } .chat-header-text small { color: var(--color-text-tertiary); font-size: 0.75rem; } .chat-messages { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .chat-message { max-width: 85%; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.4; } .chat-message.sent { align-self: flex-end; background: var(--color-accent); color: var(--color-on-accent); border-bottom-right-radius: 4px; } .chat-message.received { align-self: flex-start; background: var(--color-bg-tertiary); border-bottom-left-radius: 4px; } .chat-input { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--color-border); } .chat-input-field { flex: 1; background: var(--color-bg-tertiary); border: none; border-radius: 999px; padding: 0.5rem 1rem; color: var(--color-text); font-size: 0.85rem; } .chat-send-btn { width: 36px; height: 36px; background: var(--color-accent); border: none; border-radius: 50%; color: var(--color-on-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } /* Privacy Section */ .privacy { padding: 6rem 0; background: var(--color-bg); } .privacy-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .privacy-text h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; } .privacy-text h2 span { color: var(--color-accent); } .privacy-text > p { color: var(--color-text-secondary); font-size: 1.125rem; margin-bottom: 2rem; } .privacy-list { list-style: none; } .privacy-list li { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; } .privacy-list .check { width: 24px; height: 24px; background: var(--color-success-soft); color: var(--color-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .privacy-list strong { display: block; margin-bottom: 0.25rem; } .privacy-list span { color: var(--color-text-secondary); font-size: 0.9rem; } .privacy-text .privacy-more { margin: 2rem 0 0; font-size: 1rem; } .privacy-more a { color: var(--color-accent); font-weight: 600; } .privacy-visual { display: flex; justify-content: center; } .shield-graphic { width: 300px; height: 350px; background: var(--color-bg-secondary); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .shield-icon { font-size: 5rem; margin-bottom: 1.5rem; } .shield-text { text-align: center; } .shield-text h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .shield-text p { color: var(--color-text-secondary); font-size: 0.9rem; } /* Organizers Section */ .organizers { padding: 6rem 0; background: var(--color-bg-secondary); } .organizers-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .organizers-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--color-accent-soft); color: var(--color-accent); font-size: 0.875rem; font-weight: 600; border-radius: 999px; margin-bottom: 1rem; } .organizers-text h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; } .organizers-text > p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; } .organizers-list { list-style: none; } .organizers-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--color-text-secondary); } .organizers-list li svg { color: var(--color-success); flex-shrink: 0; } .organizers-visual { display: flex; justify-content: center; } .organizer-card { width: 300px; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-lg); text-align: left; } .organizer-card-header { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--color-bg-tertiary); font-weight: 600; } .organizer-card-header svg { color: var(--color-accent); } .organizer-card-form { padding: 1.25rem; } .form-field { margin-bottom: 1rem; } .form-field:last-child { margin-bottom: 0; } .form-field label { display: block; font-size: 0.75rem; color: var(--color-text-tertiary); margin-bottom: 0.25rem; } .form-input { padding: 0.5rem 0.75rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-text); } .organizer-card-button { margin: 0 1.25rem 1.25rem; padding: 0.75rem; background: var(--color-accent); color: var(--color-on-accent); text-align: center; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; } /* Members Section */ .members { padding: 6rem 0; background: var(--color-bg); } .members-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .members-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--color-success-soft); color: var(--color-success); font-size: 0.875rem; font-weight: 600; border-radius: 999px; margin-bottom: 1rem; } .members-text h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; } .members-text > p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; } .members-list { list-style: none; } .members-list li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--color-text-secondary); } .members-list li svg { color: var(--color-success); flex-shrink: 0; } .members-visual { display: flex; justify-content: center; } .members-card { width: 300px; background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-lg); text-align: left; } .members-card-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--color-bg-tertiary); } .members-card-header span { font-weight: 600; } .members-card-header small { color: var(--color-text-tertiary); font-size: 0.8rem; } .members-card-list { padding: 0.5rem 0; } .member-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; } .member-avatar { width: 40px; height: 40px; background: var(--color-bg-tertiary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; } .member-info { flex: 1; } .member-info strong { display: block; font-size: 0.9rem; } .member-info small { color: var(--color-text-tertiary); font-size: 0.75rem; } .member-role { font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; } .member-role.admin { background: var(--color-accent-soft); color: var(--color-accent); } .member-role.member { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .members-card-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--color-border); } .invite-btn { width: 100%; padding: 0.6rem; background: var(--color-accent); color: var(--color-on-accent); border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Verification Section */ .verification { padding: 6rem 0; background: var(--color-bg-secondary); } .verification-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .verification-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--color-success-soft); color: var(--color-success); font-size: 0.875rem; font-weight: 600; border-radius: 999px; margin-bottom: 1rem; } .verification-text h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.2; } .verification-text > p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; } .verification-list { list-style: none; } .verification-list li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; color: var(--color-text-secondary); } .verification-list li svg { color: var(--color-success); flex-shrink: 0; margin-top: 0.25rem; } .verification-list li div { display: flex; flex-direction: column; gap: 0.25rem; } .verification-list li strong { color: var(--color-text); font-size: 1rem; } .verification-list li span { font-size: 0.9rem; line-height: 1.5; } .verification-visual { display: flex; justify-content: center; } .verification-card { width: 280px; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: 2rem; text-align: center; box-shadow: var(--shadow-lg); } .verification-card-icon { margin-bottom: 1rem; } .verification-card-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 1.5rem; } .verification-card-steps { display: flex; flex-direction: column; gap: 0.75rem; } .verification-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-bg-tertiary); border-radius: var(--radius-sm); font-size: 0.9rem; } .verification-step.completed { background: var(--color-success-soft); } .step-indicator { width: 24px; height: 24px; border-radius: 50%; background: var(--color-success); color: var(--color-on-accent); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; } /* Event Features Section */ .event-features { padding: 6rem 0; background: var(--color-bg); } /* Zeitslots / Schichten */ .slots-explanation { margin-top: 4rem; padding-top: 4rem; border-top: 1px solid var(--color-border); } .slots-explanation-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .slots-explanation-text h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .slots-explanation-text > p { color: var(--color-text-secondary); margin-bottom: 2rem; } .slots-steps { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; } .slots-steps li { display: flex; align-items: flex-start; gap: 1rem; } .slots-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .slots-step-info strong { display: block; margin-bottom: 0.25rem; } .slots-step-info span { color: var(--color-text-secondary); font-size: 0.9rem; } .slots-explanation-visual { display: flex; justify-content: center; } .slot-card { width: 300px; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); text-align: left; } .slot-card-header { margin-bottom: 1.25rem; } .slot-card-header span { display: block; font-weight: 700; } .slot-card-header small { color: var(--color-text-tertiary); font-size: 0.8rem; } .slot-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--color-bg); border: 1px solid var(--color-border); margin-bottom: 0.75rem; } .slot-row-info strong { display: block; font-size: 0.9rem; } .slot-row-info small { color: var(--color-text-tertiary); font-size: 0.75rem; } .slot-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--color-success-soft); color: var(--color-success); } .slot-badge.full { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); } .slot-card-button { margin-top: 1rem; padding: 0.75rem; background: var(--color-accent); color: var(--color-on-accent); text-align: center; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; } /* User Accounts Section */ .user-accounts { padding: 6rem 0; background: var(--color-bg-secondary); } .user-accounts-content { max-width: 800px; margin: 0 auto; text-align: center; } .user-accounts-badge { display: inline-block; padding: 0.5rem 1rem; background: var(--color-success-soft); color: var(--color-success); font-size: 0.875rem; font-weight: 600; border-radius: 999px; margin-bottom: 1rem; } .user-accounts-content h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; } .user-accounts-content > p { color: var(--color-text-secondary); font-size: 1.1rem; margin-bottom: 2rem; } .account-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .account-card { background: var(--color-bg); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); text-align: left; } .account-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .account-card p { color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: 1rem; } .account-features { list-style: none; } .account-features li { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .account-features li svg { color: var(--color-success); flex-shrink: 0; } /* Download Section */ .download { padding: 6rem 0; background: var(--color-bg); } /* Section Divider - handgezeichneter Schwung statt gerader Linie */ .section-divider { width: 140px; height: 14px; background: var(--color-accent); opacity: 0.5; margin: 0 auto; -webkit-mask: var(--squiggle) no-repeat center / contain; mask: var(--squiggle) no-repeat center / contain; } .download-content { text-align: center; } .download-content h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } .download-content > p { color: var(--color-text-secondary); font-size: 1.125rem; margin-bottom: 2.5rem; max-width: 500px; margin-left: auto; margin-right: auto; } .download-buttons { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .download-buttons .store-btn { padding: 1rem 1.5rem; } .download-buttons .store-btn svg { width: 32px; height: 32px; } .download-content .download-org-cta { margin: 2.5rem auto 0; font-size: 1rem; } .download-org-cta a { color: var(--color-accent); font-weight: 600; } /* Footer */ footer { padding: 3rem 0; border-top: 1px solid var(--color-border); background: var(--color-bg); } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.5rem; } .footer-brand .logo-icon { width: 32px; height: 32px; font-size: 1rem; } .footer-brand span { font-weight: 700; font-size: 1.125rem; } .footer-links { display: flex; gap: 2rem; } .footer-links a { color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; } .footer-links a:hover { color: var(--color-accent); } .footer-copy { color: var(--color-text-tertiary); font-size: 0.85rem; } /* Legal Sections */ .legal-section { padding: 4rem 0; background: var(--color-bg); } .legal-content { max-width: 800px; margin: 0 auto; } .legal-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 2rem; text-align: center; } .legal-block { margin-bottom: 2rem; } .legal-block h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-accent); } .legal-block p, .legal-block ul { color: var(--color-text-secondary); line-height: 1.8; } .legal-block ul { margin-left: 1.5rem; margin-top: 0.5rem; } .legal-block li { margin-bottom: 0.5rem; } .legal-block a { color: var(--color-accent); text-decoration: none; } .legal-block a:hover { text-decoration: underline; } /* Unterseiten (Impressum, Datenschutz, Nutzungsbedingungen, Kontakt) */ main.subpage { padding-top: 4.5rem; /* Platz für den fixierten Header */ } .back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 2rem; color: var(--color-text-tertiary); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.2s, transform 0.2s; } .back-link:hover { color: var(--color-accent); transform: translateX(-3px); } /* Kontakt-Seite */ .contact-lead { color: var(--color-text-secondary); font-size: 1.1rem; text-align: center; max-width: 560px; margin: 0 auto 3rem; } .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .contact-card { display: block; padding: 2rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; text-decoration: none; color: var(--color-text); transition: transform 0.2s, box-shadow 0.2s; } a.contact-card:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--shadow-md); } .contact-card-icon { width: 60px; height: 60px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: 46% 54% 55% 45% / 52% 46% 54% 48%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .contact-card:nth-child(even) .contact-card-icon { background: var(--color-success-soft); color: var(--color-success); border-radius: 55% 45% 48% 52% / 46% 55% 45% 54%; } .contact-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; } .contact-card p { color: var(--color-text-secondary); line-height: 1.7; } .contact-card p a { color: var(--color-accent); text-decoration: none; font-weight: 600; } .contact-card p a:hover { text-decoration: underline; } .contact-card small { display: block; margin-top: 0.75rem; color: var(--color-text-tertiary); font-size: 0.85rem; } .contact-note { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; background: var(--color-honey-soft); border-radius: var(--radius-md); color: var(--color-text-secondary); line-height: 1.7; } .contact-note svg { color: var(--color-honey); flex-shrink: 0; margin-top: 0.2rem; } .contact-note strong { color: var(--color-text); } @media (max-width: 768px) { .contact-cards { grid-template-columns: 1fr; } } /* Scroll Indicator */ .scroll-indicator { display: flex; position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.75rem; animation: fadeIn 0.5s ease-out 1s forwards; opacity: 0; transition: opacity 0.3s ease; z-index: 50; background: var(--color-surface-translucent); padding: 0.5rem 1rem; border-radius: 999px; backdrop-filter: blur(8px); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .scroll-indicator.hidden { opacity: 0 !important; pointer-events: none; } .scroll-indicator-arrow { width: 24px; height: 24px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(8px); } 60% { transform: translateY(4px); } } @keyframes fadeIn { to { opacity: 1; } } /* ===== Warme Handschrift ===== */ /* Serif-Überschriften: menschlich und editorial statt Tech-Landingpage */ .hero-text h1, .section-title h2, .categories-content h2, .inquiries-text h2, .privacy-text h2, .organizers-text h2, .members-text h2, .verification-text h2, .user-accounts-content h2, .download-content h2, .legal-content h2, .slots-explanation-text h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; } .hero-text h1 .rotating-text { font-style: italic; } .inquiries-text h2 span, .privacy-text h2 span { font-style: italic; } /* Handgezeichneter Schwung unter zentrierten Überschriften */ .section-title h2::after, .categories-content h2::after, .user-accounts-content h2::after, .download-content h2::after { content: ''; display: block; width: 110px; height: 12px; margin: 0.9rem auto 0; background: var(--color-accent); opacity: 0.85; -webkit-mask: var(--squiggle) no-repeat center / contain; mask: var(--squiggle) no-repeat center / contain; } /* Papierkorn auf allen Flächen */ section[class], footer { background-image: var(--grain); } /* Leicht gekippte Karten - wie Zettel an der Pinnwand */ .chat-mockup { transform: rotate(-1.8deg); } .organizer-card { transform: rotate(1.6deg); } .members-card { transform: rotate(-1.6deg); } .slot-card { transform: rotate(1.8deg); } .verification-card { transform: rotate(-1.5deg); } .shield-graphic { transform: rotate(1.5deg); } /* Responsive Design */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-text .tagline { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-visual { order: -1; } .phone-mockup { width: 300px; height: 580px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .privacy-content, .inquiries-content, .organizers-content, .members-content, .verification-content { grid-template-columns: 1fr; text-align: center; } .privacy-visual, .inquiries-visual, .organizers-visual, .members-visual, .verification-visual { order: -1; } .privacy-list, .inquiries-list, .verification-list { max-width: 450px; margin: 0 auto; } .privacy-list li, .inquiries-list li, .verification-list li { text-align: left; } .organizers-list, .members-list { max-width: 350px; margin: 0 auto; text-align: left; } .account-cards { grid-template-columns: 1fr; } .slots-explanation-content { grid-template-columns: 1fr; text-align: center; } .slots-explanation-visual { order: -1; } .slots-steps { max-width: 400px; margin: 0 auto; } .slots-steps li { text-align: left; } } @media (max-width: 768px) { .hero { padding: 7rem 0 4rem; min-height: auto; } .hero-text h1 { font-size: 2.5rem; height: 5.5rem; } .hero-text .tagline { font-size: 1.1rem; } .phone-mockup { width: 280px; height: 540px; } .features-grid { grid-template-columns: 1fr; } .section-title h2, .privacy-text h2, .inquiries-text h2, .organizers-text h2, .members-text h2, .user-accounts-content h2, .download-content h2 { font-size: 2rem; } .chat-mockup, .organizer-card, .members-card, .slot-card { width: 280px; } .footer-content { flex-direction: column; text-align: center; } .footer-links { flex-wrap: wrap; justify-content: center; } } @media (max-width: 480px) { .hero-text h1 { font-size: 2rem; height: 4.4rem; } .phone-mockup { width: 260px; height: 500px; } .app-event-title { font-size: 0.85rem; } .hero-cta .store-btn { padding: 0.6rem 1rem; } .hero-cta .store-btn svg { width: 24px; height: 24px; } .hero-cta .store-btn-text small { font-size: 0.6rem; } .hero-cta .store-btn-text strong { font-size: 0.85rem; } .hero-cta .coming-soon-badge { font-size: 0.55rem; padding: 2px 6px; } .chat-send-btn { width: 32px; height: 32px; flex-shrink: 0; } .chat-input-field { padding: 0.4rem 0.75rem; font-size: 0.8rem; } .download-buttons { flex-direction: column; align-items: center; } .download-buttons .store-btn { width: 240px; } } /* ===== Bewegung: Scroll-Reveals, Parallax, Übergänge ===== Alles hier drin respektiert prefers-reduced-motion: Reveals werden nur aktiv, wenn js/site.js die Klasse .reveal-ready auf setzt (und das tut es bei reduzierter Bewegung nicht). */ /* Versteckte Reveals dürfen nie einen horizontalen Scrollbalken erzeugen */ body { overflow-x: hidden; } /* Header bekommt beim Scrollen einen weichen Schatten */ header { transition: box-shadow 0.3s ease; } header.scrolled { box-shadow: var(--shadow-md); } /* Kategorie-Chips reagieren auf Hover */ .category-chip { transition: transform 0.2s, box-shadow 0.2s; } .category-chip:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: var(--shadow-md); } .category-chip:nth-child(even):hover { transform: translateY(-3px) rotate(1deg); } /* Sections mit Parallax-Lichtflecken */ .has-blobs { position: relative; overflow: hidden; } .has-blobs .container { position: relative; z-index: 1; } .parallax-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .blob-honey { background: radial-gradient(circle at 40% 40%, var(--color-honey-soft), transparent 70%); } .blob-accent { background: radial-gradient(circle at 60% 60%, var(--color-accent-soft), transparent 70%); } .blob-sage { background: radial-gradient(circle at 50% 50%, var(--color-success-soft), transparent 70%); } @media (prefers-reduced-motion: no-preference) { /* Hero-Einstieg beim Laden */ .hero-text { animation: rise-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .hero-visual { animation: rise-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both; } @keyframes rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* Das Telefon schwebt sanft */ .phone-mockup { animation: phone-float 7s ease-in-out 1.4s infinite; } @keyframes phone-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-0.5deg); } } /* Hero-Lichtflecken wandern beim Scrollen (--scrolly setzt js/site.js) */ .hero::before { transform: translateY(calc(var(--scrolly, 0) * 0.2px)); } .hero::after { transform: translateY(calc(var(--scrolly, 0) * -0.14px)); } .hero-visual::before { transform: translate(-50%, calc(-50% + var(--scrolly, 0) * 0.12px)); } } /* Scroll-Reveals: unsichtbar nur, solange JS aktiv ist (.reveal-ready) */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } @media (min-width: 1025px) { .reveal-ready [data-reveal="left"] { transform: translateX(-36px); } .reveal-ready [data-reveal="right"] { transform: translateX(36px); } } .reveal-ready [data-reveal="zoom"] { transform: scale(0.93) translateY(16px); } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* Gestaffeltes Erscheinen innerhalb von Gruppen */ .features-grid > [data-reveal]:nth-child(3n+2) { --reveal-delay: 0.1s; } .features-grid > [data-reveal]:nth-child(3n) { --reveal-delay: 0.2s; } .account-cards > [data-reveal]:nth-child(2) { --reveal-delay: 0.12s; } .category-chips > [data-reveal] { transition-duration: 0.45s; } .category-chips > [data-reveal]:nth-child(2) { --reveal-delay: 0.05s; } .category-chips > [data-reveal]:nth-child(3) { --reveal-delay: 0.1s; } .category-chips > [data-reveal]:nth-child(4) { --reveal-delay: 0.15s; } .category-chips > [data-reveal]:nth-child(5) { --reveal-delay: 0.2s; } .category-chips > [data-reveal]:nth-child(6) { --reveal-delay: 0.25s; } .category-chips > [data-reveal]:nth-child(7) { --reveal-delay: 0.3s; } .category-chips > [data-reveal]:nth-child(8) { --reveal-delay: 0.35s; } .category-chips > [data-reveal]:nth-child(9) { --reveal-delay: 0.4s; } .category-chips > [data-reveal]:nth-child(10) { --reveal-delay: 0.45s; } .category-chips > [data-reveal]:nth-child(11) { --reveal-delay: 0.5s; } .chat-messages > [data-reveal]:nth-child(2) { --reveal-delay: 0.2s; } .chat-messages > [data-reveal]:nth-child(3) { --reveal-delay: 0.4s; } .chat-messages > [data-reveal]:nth-child(4) { --reveal-delay: 0.6s; } .verification-card-steps > [data-reveal]:nth-child(2) { --reveal-delay: 0.15s; } .verification-card-steps > [data-reveal]:nth-child(3) { --reveal-delay: 0.3s; } .slot-card > [data-reveal]:nth-child(3) { --reveal-delay: 0.12s; } .slot-card > [data-reveal]:nth-child(4) { --reveal-delay: 0.24s; } /* Unterseiten faden sanft ein */ @media (prefers-reduced-motion: no-preference) { main.subpage .legal-content { animation: rise-in 0.6s ease-out both; } }