/* * Haupt‑Stylesheet für die komplett überarbeitete Elternkindwelt‑Website. * * Dieses Stylesheet orientiert sich farblich an dem bereitgestellten Logo * (tiefes Petrol, warmes Braun und dezente Beigetöne) und nutzt CSS‑Variablen, * um Design‑Anpassungen zu erleichtern. Neben einem konsistenten Layout * enthält es Verbesserungen hinsichtlich Barrierefreiheit, Responsivität und * Dark‑Mode‑Unterstützung. Karten erhalten deutliche Schatten zur besseren * Abgrenzung, Bilder werden standardmäßig lazy geladen und der Header * reagiert auf mobile Endgeräte mit einem Burger‑Menü. */ /* Farbvariablen der Marke */ :root { --primary-color: #007a7a; /* petrol für Highlights und Links */ --secondary-color: #503e34; /* dunkles Braun für Kontraste */ --accent-color: #dda15e; /* warmes Gold für Buttons und Akzente */ --background-color: #f7f3ed; /* cremefarbener Hintergrund */ /* Im hellen Modus erhalten Karten und andere Flächen einen leicht getönten Cremeton, damit sie sich besser vom Hintergrund abheben. */ --surface-color: #f2ede3; /* Oberflächen wie Karten */ --text-color: #333333; /* dunkler Text für gute Lesbarkeit */ --muted-text-color: #666666; /* sekundärer Text */ --border-radius: 10px; /* abgerundete Ecken */ --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* Standard Schatten */ } /* Dark‑Mode‑Variablen: werden angewendet, wenn dem -Element die Klasse `dark-mode` hinzugefügt wird. Die Farben sind kontrastreich zur hellen Variante und orientieren sich an den Grundfarben. */ .dark-mode { --background-color: #222222; --surface-color: #2a2a2a; --text-color: #f5f5f5; --muted-text-color: #cccccc; --primary-color: #66b2b2; --secondary-color: #ba9a7a; --accent-color: #e5b87c; --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); } /* Allgemeine Resets */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--background-color); color: var(--text-color); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } img { display: block; max-width: 100%; height: auto; } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease-in-out; } a:hover, a:focus { color: var(--secondary-color); } /* Skip‑Link für bessere Tastatur‑Navigation */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent-color); color: #fff; padding: 0.5rem 1rem; z-index: 100; transition: top 0.3s ease-in-out; } .skip-link:focus { top: 0; } /* Container für zentrierte Inhalte */ .container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 1rem 0; } /* Header */ .site-header { background: var(--surface-color); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: var(--box-shadow); position: relative; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; } .site-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--primary-color); } .site-logo img { height: 48px; width: 48px; } /* Navigation */ .main-nav ul { list-style: none; display: flex; align-items: center; gap: 1rem; } .main-nav li { position: relative; } .main-nav a { padding: 0.5rem 0.25rem; font-weight: 500; } .main-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--accent-color); transition: width 0.3s ease-in-out; } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } /* Burger‑Menü für mobile Geräte */ .burger { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; } .burger span { width: 100%; height: 3px; background: var(--primary-color); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .main-nav.open ul { display: flex; } /* Theme toggle */ .theme-switcher { margin-left: 1rem; display: flex; align-items: center; } .theme-switcher label { margin-right: 0.5rem; font-size: 1rem; } .theme-switcher input[type='checkbox'] { position: relative; width: 40px; height: 20px; -webkit-appearance: none; background: var(--muted-text-color); border-radius: 20px; outline: none; cursor: pointer; transition: background 0.3s ease; } .theme-switcher input[type='checkbox']::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--surface-color); border-radius: 50%; transition: transform 0.3s ease; } .theme-switcher input[type='checkbox']:checked { background: var(--primary-color); } .theme-switcher input[type='checkbox']:checked::before { transform: translateX(20px); } /* Hero Section */ .hero { position: relative; background: linear-gradient(135deg, var(--primary-color) 30%, var(--secondary-color) 100%); color: #ffffff; text-align: center; padding: 4rem 1rem 5rem; overflow: hidden; } .hero h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 0.5rem; } .hero p { font-size: 1.2rem; opacity: 0.95; } /* Rundes Logo in der Hero Sektion */ .hero-logo { position: absolute; /* Positioniere das Logo mittig im Hero‑Bereich. Durch die translate‑Funktion wird das Element sowohl horizontal als auch vertikal zentriert. Die Hintergrundfarbe ist immer weiß, damit das Logo im Dunkelmodus nicht zu dunkel wird. */ top: 50%; left: 10%; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: var(--box-shadow); overflow: hidden; z-index: 10; } .hero-logo img { width: 180px; height: auto; } @media (max-width: 768px) { .hero-logo { width: 140px; height: 140px; /* Auch im Tablet‑Bereich zentrieren wir das Logo vollständig */ top: 50%; left: 50%; transform: translate(-50%, -50%); } } @media (max-width: 500px) { /* Blende das Logo im Hero bei sehr kleinen Geräten aus, um Überlagerungen zu vermeiden */ .hero-logo { display: none; } } /* Karten‑Gitter */ .cards-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2rem; } .card { background: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 1.5rem; display: flex; flex-direction: column; height: 100%; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-6px); /* kräftigerer Schatten beim Hovern */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .card h3 { margin-bottom: 0.5rem; font-size: 1.4rem; color: var(--primary-color); } .card p { flex-grow: 1; margin-bottom: 1rem; color: var(--muted-text-color); } .card .cta { margin-top: auto; text-align: right; } .card .cta a { background: var(--accent-color); color: #ffffff; padding: 0.5rem 1rem; border-radius: var(--border-radius); font-weight: 600; font-size: 0.9rem; transition: background 0.2s ease; } .card .cta a:hover { background: var(--secondary-color); } /* Formular‑Elemente (Kontakt & Newsletter) */ form { display: grid; gap: 1rem; max-width: 600px; margin: 2rem auto; } form label { font-weight: 600; margin-bottom: 0.25rem; } form input, form textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: var(--border-radius); font-size: 1rem; background: var(--surface-color); color: var(--text-color); } form textarea { min-height: 120px; resize: vertical; } form button { background: var(--accent-color); color: #ffffff; border: none; padding: 0.75rem 1rem; border-radius: var(--border-radius); font-size: 1rem; cursor: pointer; transition: background 0.2s ease; } form button:hover { background: var(--secondary-color); } /* Cookie‑Banner */ /* Cookie‑Banner wird als zentriertes Modal dargestellt, damit er nicht übersehen werden kann. Er erscheint erst, wenn der Nutzer noch nicht zugestimmt hat (siehe main.js) und verschwindet nach dem Klick auf den Button. */ .cookie-banner { position: fixed; top: 100%; left: 50%; transform: translateX(-50%); width: 90%; max-width: 500px; display: none; flex-direction: column; align-items: center; background: var(--surface-color); /* Sichtbarer Schatten für bessere Abgrenzung */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-radius: var(--border-radius); padding: 1.5rem; font-size: 0.95rem; z-index: 10000; text-align: center; } /* Text innerhalb des Cookie‑Modals */ .cookie-banner p { margin: 0 0 1rem 0; color: var(--text-color); } /* Verlinkung zur Datenschutzerklärung im Banner */ .cookie-banner a { color: var(--primary-color); text-decoration: underline; } /* Button zur Bestätigung des Cookie‑Hinweises */ .cookie-banner button { background: var(--accent-color); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; margin-top: 0.5rem; } .cookie-banner button:hover { background: var(--secondary-color); } /* Sektionen */ section { padding: 3rem 0; } section h2 { font-size: 2rem; margin-bottom: 1rem; color: var(--primary-color); text-align: center; } /* Footer */ .site-footer { background: var(--surface-color); border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 2rem 0; text-align: center; color: var(--muted-text-color); font-size: 0.9rem; margin-top: auto; } .site-footer a { color: var(--primary-color); font-weight: 500; } .site-footer a:hover { color: var(--secondary-color); } /* Newsletter‑Anmeldung im Footer */ .newsletter { margin-top: 2rem; } .newsletter form { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .newsletter input[type='email'] { max-width: 300px; width: 100%; } /* Screen‑reader‑only Klasse für versteckte Texte (z.B. Label der Dark‑Mode‑Umschaltung) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Blog‑Suche */ .blog-search { max-width: 600px; margin: 0 auto 2rem; display: flex; align-items: center; gap: 0.5rem; } .blog-search input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: var(--border-radius); font-size: 1rem; } /* Responsive Navigation */ @media (max-width: 900px) { .main-nav ul { position: absolute; right: 0; top: 100%; background: var(--surface-color); flex-direction: column; width: 200px; padding: 1rem; box-shadow: var(--box-shadow); display: none; } .main-nav.open ul { display: flex; } .burger { display: flex; } .theme-switcher { margin-left: 0.5rem; } }