/* -------------------------------------------------------------------------- styles.css — reorganized and cleaned Sections: variables, base, layout, components, modules, responsive, dark-mode Dark-mode overrides collected in the final section. -------------------------------------------------------------------------- */ :root { --color-bg-light: #ffffff; --color-text-light: #000000; --color-bg-dark: #0b0b0b; --color-text-dark: #ffffff; /* header colors: default (light header) and dark-mode header */ --header-text: #000000; --header-text-dark: #ffffff; --color-primary-light: #e0e0e0; /* primary (used as accent in light mode) */ --color-primary-dark: #000000; /* primary (used as accent in dark mode) */ --color-accent: #2990cc; /* accent (used in dark mode headings etc.) */ --color-secondary-btn: #2990cc; /* secondary button */ --cookie-bg: rgba(255,255,255,0.96); --cookie-text: #ffffff; --color-card-bg-light: #f8f8f8; --color-card-bg-dark: #121212; --color-border-light: #e0e0e0; --color-border-dark: #222222; /* header background adapts to light/dark mode */ --header-bg: rgba(255,255,255,0.95); --footer-bg: rgba(255,255,255,0.95); --footer-text: #000000; --footer-text-dark: #ffffff; /* Kontaktformular Farben */ --contact-form-label: #ffffff; /* Label immer weiß */ --contact-form-required: #ff0000; /* Rote Sterne für Pflichtfelder */ } /* ------------------------------- Base ----------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: var(--color-bg-light); color: var(--color-text-light); transition: background-color 0.25s ease, color 0.25s ease; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* If a page wants the full-bleed background image placeholder, add .has-bg-image to body */ body.has-bg-image { background: transparent; /* let the .bg-placeholder div show through */ } /* Full-bleed background placeholder (used on pages that add .has-bg-image to ) */ .bg-placeholder { position: fixed; inset: 0; z-index: 0; /* sit behind content (content cards use z-index >= 1) */ pointer-events: none; background-image: url("images/background.josia.room.website.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(6px); transform: scale(1.04); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; height: auto; } .offer-content { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; } .offer-image-container { flex: 1; max-width: 50%; } .offer-text-container { flex: 1; max-width: 50%; } @media (max-width: 768px) { .offer-content { flex-direction: column; } .offer-image-container, .offer-text-container { max-width: 100%; } } main { flex-grow: 1; max-width: 1000px; margin: 2rem auto; padding: 0 1rem; } h1, h2, h3 { margin: 0 0 1rem 0; color: var(--color-primary); } /* ------------------------------ Layout --------------------------------- */ .site-header, header { background-color: var(--header-bg); } .site-header { padding: 1rem 0.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.18); position: sticky; top: 0; z-index: 1000; } nav { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0 1rem; } .brand-logo { display: inline-block; margin-right: 1rem; vertical-align: middle; } .brand-logo img { height: 48px; width: auto; } .brand-logo .logo-light { display:inline-block; } .brand-logo .logo-dark { display:none; } .nav-list { list-style: none; display:flex; gap:1.5rem; padding:0; margin:0; flex-wrap:wrap; } .nav-link { color: var(--header-text); font-weight:600; padding:0.6rem 0.4rem; position:relative; } .nav-link:hover, .nav-link:focus { text-decoration: underline; text-underline-offset: 4px; transform: translateY(-2px); } .nav-link.active { color: var(--color-accent); font-weight:700; } .nav-link.active::after { content: ""; display:block; height:3px; width:100%; background:var(--color-accent); margin-top:6px; border-radius:2px; } .dark-mode-toggle { background:none; border:none; color:var(--header-text); padding:8px; border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .dark-mode-toggle:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); } /* Make the SVG inside the toggle follow the current color (so stroke can be black/white) */ .dark-mode-toggle svg { stroke: currentColor; } #toggleCircle { transition: cx 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } /* ---------------------------- Utilities -------------------------------- */ .btn-primary, .btn-secondary { display:inline-block; padding:0.8rem 1.5rem; border-radius:5px; font-weight:600; cursor:pointer; border:none; } .btn-primary { background: var(--color-primary); color:#000000; border: 2px solid #000000; } .btn-primary:hover { background:#000000; color:#ffffff; transform: translateY(-2px); } .btn-secondary { background: var(--color-secondary-btn); color:#fff; } .btn-secondary:hover { background:#5a6268; transform: translateY(-2px); } .glass-card { background: rgba(10,14,20,0.705); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; box-shadow: 0 6px 30px rgba(202,200,200,0.45); color: #ffffff; } .small-box { display:inline-block; padding:1rem 1.1rem; margin:0.6rem 0; max-width:100%; line-height:1.4; } main .glass-card, footer .glass-card { position:relative; z-index:1; } .glass-card .btn-primary, .glass-card .btn-secondary { background: rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.08); padding:0.45rem 0.9rem; border-radius:8px; } /* Simple helpers */ .hidden { display:none !important; } /* Screen-reader only utility */ .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; } /* ---------------------------- Hero / Intro ------------------------------ */ .hero { text-align:center; padding:4rem 0; margin-bottom:2rem; background:transparent; box-shadow:none; } .hero h1 { font-size:2.8rem; color:var(--color-primary); } .hero p { font-size:1.2rem; color: var(--color-text-light); } /* Responsive Hero */ @media (max-width: 768px) { .hero { padding: 2rem 0; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } } @media (max-width: 480px) { .hero { padding: 1.5rem 0; } .hero h1 { font-size: 1.8rem; } .hero p { font-size: 0.9rem; } } /* ------------------------------ Slideshow ------------------------------- */ .slideshow { position: relative; width:100%; max-width:1000px; margin:1rem auto; overflow:hidden; border-radius:10px; background: rgba(0,0,0,0.25); display:flex; align-items:center; justify-content:center; min-height:240px; box-sizing:border-box; } .slideshow img { width:auto; max-width:100%; height:512px; object-fit:cover; display:block; transition:opacity 0.6s ease; opacity:1; } .slideshow .hidden { opacity:0; } .slideshow .slideshow-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.08); color:#fff; border:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:1.6rem; z-index:10; } .slideshow .slideshow-prev { left:12px; } .slideshow .slideshow-next { right:12px; } .slideshow-info { position:absolute; bottom:12px; left:12px; color:#fff; background:rgba(0,0,0,0.45); padding:6px 10px; border-radius:6px; font-weight:600; z-index:10; font-size:0.95rem; } .slideshow-controls { text-align:center; margin-top:0.6rem; color:#fff; } .slideshow-controls input[type="text"], .slideshow-controls select { padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color:#fff; min-width:160px; } .slideshow-controls select option { background: rgba(10,14,20,0.9); color:#fff; } /* Responsive Slideshow */ @media (max-width: 768px) { .slideshow { min-height: 200px; margin: 0.5rem auto; } .slideshow img { height: 300px; } .slideshow .slideshow-arrow { width: 40px; height: 40px; font-size: 1.4rem; } .slideshow .slideshow-prev { left: 8px; } .slideshow .slideshow-next { right: 8px; } .slideshow-info { font-size: 0.85rem; padding: 4px 8px; } } @media (max-width: 480px) { .slideshow { min-height: 150px; } .slideshow img { height: 200px; } .slideshow .slideshow-arrow { width: 36px; height: 36px; font-size: 1.2rem; } } /* ---------------------------- Gallery / Portfolio ----------------------- */ .recent-work { margin-bottom:2rem; } .gallery-grid, .portfolio-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; } .gallery-item, .portfolio-item { background: var(--color-card-bg-light); border:1px solid var(--color-border-light); border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position:relative; } .portfolio-item { cursor:pointer; } .gallery-item:hover, .portfolio-item:hover { transform: translateY(-5px); box-shadow:0 6px 15px rgba(0,0,0,0.1); } .gallery-item img, .portfolio-item img { width:100%; height:200px; object-fit:cover; display:block; } .portfolio-item:focus-visible { outline:3px solid var(--color-accent); outline-offset:3px; } .gallery-item h3 { margin-top:1rem; color:var(--color-primary); padding:0 1rem; } .gallery-item p { padding:0 1rem 1rem 1rem; font-size:0.9rem; color:var(--color-text-light); } .portfolio-item .item-overlay { position: absolute; inset: 0; background: rgba(12, 14, 15, 0.356); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 5; pointer-events: none; } .portfolio-item:hover .item-overlay { opacity: 1; } .portfolio-item.scroll-in-view .item-overlay { opacity: 1 !important; } .portfolio-item .item-overlay h3, .portfolio-item .item-overlay p { color: white; } /* ---------------------------- Testimonials ------------------------------ */ .testimonials { background:transparent; padding:2rem; margin-bottom:2rem; box-shadow:none; } .testimonial-item { margin-bottom:1.5rem; font-style:italic; border-left:4px solid var(--color-accent); padding-left:1rem; } .testimonial-author { text-align:right; font-weight:600; margin-top:0.5rem; color:var(--color-primary); } /* ------------------------------ About Page ------------------------------ */ .about-content { display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; } .about-image { flex:1; min-width:250px; max-width:350px; } .about-image img { width:100%; height:auto; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.1); } .about-text { flex:2; min-width:300px; } /* Responsive About */ @media (max-width: 768px) { .about-content { flex-direction: column; gap: 1.5rem; } .about-image { max-width: 100%; min-width: 200px; } .about-text { min-width: 250px; } } @media (max-width: 480px) { .about-content { gap: 1rem; } .about-image { min-width: 150px; } .about-text { min-width: 200px; } } /* ------------------------------ Pricing -------------------------------- */ .pricing-plans { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:2rem; margin-bottom:2rem; } .pricing-card { background:var(--color-card-bg-light); border:1px solid var(--color-border-light); border-radius:8px; padding:2rem; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .pricing-card:hover { transform: translateY(-5px); box-shadow:0 6px 15px rgba(0,0,0,0.1); } .pricing-card.featured { border-color:var(--color-accent); box-shadow:0 0 15px rgba(255,64,129,0.3); transform:scale(1.02); } .pricing-card h2 { color:var(--color-primary); font-size:1.8rem; margin-bottom:1rem; } .pricing-card .price { font-size:2.5rem; font-weight:700; color:var(--color-accent); margin-bottom:1.5rem; } .pricing-card ul { list-style:none; padding:0; margin-bottom:2rem; text-align:center; } /* smaller note under prices (e.g. student price, pauschale info) */ .pricing-card .price small { display:block; font-size:0.85rem; color:var(--color-text-light); margin-top:0.25rem; } /* lead paragraph under main title */ .lead { text-align:center; margin-bottom:1rem; color:var(--color-text-light); } .portfolio-intro { margin-bottom: 2rem; } .portfolio-intro > p, .portfolio-grid-note { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; } .portfolio-intro a, .portfolio-grid-note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .portfolio-highlights { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; padding: 0; margin: 1.5rem 0 2rem; } .portfolio-highlights li { background: var(--color-card-bg-light); border: 1px solid var(--color-border-light); border-radius: 8px; padding: 0.9rem 1rem; } .portfolio-highlights strong { display: block; margin-bottom: 0.25rem; } /* Responsive Pricing */ @media (max-width: 768px) { .pricing-plans { grid-template-columns: 1fr; gap: 1.5rem; } .pricing-card { padding: 1.5rem; } .pricing-card h2 { font-size: 1.5rem; } .pricing-card .price { font-size: 2rem; } } @media (max-width: 480px) { .pricing-card { padding: 1rem; } .pricing-card h2 { font-size: 1.3rem; } .pricing-card .price { font-size: 1.8rem; } } .custom-offer { text-align:center; padding:2rem; background-color:var(--color-card-bg-light); border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.05); } /* ------------------------------ Contact -------------------------------- */ .contact { max-width: 900px; margin: 0 auto; } .contact-form-section, .contact-info { background-color:var(--color-card-bg-light); padding:2rem; border-radius:8px; margin-bottom:2rem; box-shadow:0 2px 5px rgba(0,0,0,0.05); } .contact-form .form-group { margin-bottom:1.5rem; } /* Label im Kontaktformular immer weiß */ .contact-form label { display:block; margin-bottom:0.6rem; font-weight:600; color: var(--contact-form-label); font-size:0.95rem; } /* Checkbox-Text immer weiß */ .contact-form label span { color: var(--contact-form-label); } /* Pflichtfelder-Sterne (*) rot */ .contact-form label span[aria-hidden="true"] { color: var(--contact-form-required); } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="checkbox"], .contact-form select, .contact-form textarea { padding:10px 12px; border:1px solid var(--color-border-light); border-radius:6px; font-size:1rem; background-color:var(--color-bg-light); color:var(--color-text-light); transition:border-color 0.3s ease, box-shadow 0.3s ease; font-family: inherit; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { width:100%; } .contact-form input[type="checkbox"] { width:auto; margin-right:0.5rem; cursor:pointer; margin-top:0.2rem; } .contact-form select { cursor:pointer; } .contact-form select option { background: var(--color-bg-light); color:var(--color-text-light); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color:var(--color-accent); outline:none; box-shadow:0 0 0 3px rgba(48, 116, 155, 0.15); } .contact-form textarea { resize:vertical; min-height:120px; } .form-wrapper form { display:grid; gap:1.2rem; } .form-wrapper label + label { margin-top: -1rem; } .form-wrapper [type="checkbox"] + span { display: inline-block; margin-left: 0.2rem; } .glass-card .btn-primary { width: 100%; padding: 0.9rem 1.5rem; font-size: 1rem; } /* Kontaktformular Submit Button - gleicher Style wie "Jetzt anfragen" Buttons */ .contact-form .btn-primary { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; width: 100% !important; padding: 0.8rem 1.5rem !important; font-size: 1rem !important; text-align: center !important; } .contact-form .btn-primary:hover { background: #000000 !important; color: #ffffff !important; transform: translateY(-2px) !important; } .form-message { margin-top:1rem; padding:0.8rem; border-radius:5px; display:none; } .form-message.success { background-color:#d4edda; color:#155724; border:1px solid #c3e6cb; } .form-message.error { background-color:#f8d7da; color:#721c24; border:1px solid #f5c6cb; } .social-links { margin-top:1.5rem; display:flex; gap:1rem; justify-content:center; } .social-links img { width:40px; height:40px; transition:transform 0.2s ease; } .social-links img:hover { transform:scale(1.1); } /* ------------------------------ Filters -------------------------------- */ .portfolio-filters { text-align:center; margin-bottom:2rem; } .filter-btn { background-color:var(--color-secondary-btn); color:white; border:none; padding:0.6rem 1.2rem; margin:0.5rem; border-radius:5px; cursor:pointer; transition:background-color 0.3s ease, transform 0.2s ease; font-weight:600; } .filter-btn:hover { background-color:#5a6268; transform: translateY(-2px); } .filter-btn.active { background-color:var(--color-primary); box-shadow:0 2px 5px rgba(0,122,204,0.3); } /* ------------------------------ Lightbox -------------------------------- */ .lightbox { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(6,6,6,0.75); z-index:2000; padding:2rem; gap:1rem; box-sizing:border-box; } .lightbox-inner { position:relative; max-width:95%; max-height:85%; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:0.6rem; overflow:hidden; } .lightbox img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,0.6); transition:transform 0.5s ease, opacity 0.5s ease; opacity:1; z-index:1; } .lightbox img.next, .lightbox img.prev { opacity:0; z-index:0; } .lightbox img.next { transform:translateX(100%); } .lightbox img.prev { transform:translateX(-100%); } .lightbox img.next.next, .lightbox img.prev.prev { opacity:1; transform:translateX(0); z-index:2; } .lightbox-caption { position:absolute; bottom:12px; left:12px; color:#fff; background:rgba(0,0,0,0.45); padding:6px 10px; border-radius:6px; font-weight:600; z-index:10; font-size:0.95rem; } .lightbox-close { position:absolute; top:1rem; right:1rem; background:transparent; color:#fff; border:none; font-size:2rem; cursor:pointer; z-index:2010; } .lightbox-arrow { background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#fff; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:1.6rem; } .lightbox-arrow.left { margin-right:0.5rem; } .lightbox-arrow.right { margin-left:0.5rem; } /* ------------------------------ Video / Modal --------------------------- */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; margin: 1.5rem 0; } .video-iframe-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 8px; background: #000; /* Platzhalter-Farbe */ } .video-iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Responsive Video Grid */ @media (max-width: 768px) { .video-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 480px) { .video-grid { gap: 1rem; } } footer { background-color: var(--footer-bg); color: var(--footer-text); text-align: center; padding: 1rem; margin-top: auto; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); position: relative; z-index: 50; } footer a { color: var(--color-accent); transition: color 0.25s ease; } footer a:hover { color: var(--color-primary); } footer .glass-card { display: block; margin: 0 auto; max-width: 1000px; width: auto; background: rgba(255, 255, 255, 0.95); border: none; box-shadow: none; padding: 0.5rem 1rem; color: inherit; } footer .glass-card p { margin: 0.25rem 0; } /* ------------------------------ Back to Top Button ---------------------- */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: #fff; font-size: 1.5rem; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; display: flex; align-items: center; justify-content: center; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .back-to-top:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } /* Responsive Back to Top */ @media (max-width: 768px) { .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 45px; height: 45px; font-size: 1.3rem; } } @media (max-width: 480px) { .back-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; font-size: 1.2rem; } } .cookie-consent { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%) translateY(120%); max-width:90%; z-index:999; display:flex; transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .cookie-consent.show { transform:translateX(-50%) translateY(0); } .cookie-consent .glass-card { padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; background: rgba(255,255,255,0.98); border:1px solid rgba(0,0,0,0.1); box-shadow:0 4px 15px rgba(0,0,0,0.15); } .cookie-consent p { margin:0; font-size:0.95rem; color:#333; line-height:1.4; } .cookie-consent a { color:var(--color-accent); text-decoration:underline; font-weight:600; } .cookie-consent a:hover { color:#0056b3; } .cookie-consent button { margin-left:0.8rem; background-color:var(--color-accent); border:none; color:white; padding:0.6rem 1.2rem; border-radius:6px; cursor:pointer; font-weight:600; transition:all 0.3s ease; white-space:nowrap; } .cookie-consent button:hover, .cookie-consent button:focus { background-color:#0056b3; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,86,179,0.3); } .cookie-consent button:focus { outline:none; box-shadow:0 0 0 3px rgba(0,86,179,0.2); } /* ------------------------------ Portfolio stacked ---------------------- */ .portfolio-grid.stacked-vertical { display:grid; grid-template-columns:1fr; gap:2rem; } .portfolio-grid.stacked-vertical .portfolio-item img { width:100%; height:480px; object-fit:cover; } /* ------------------------------ Responsive ----------------------------- */ @media (max-width: 768px) { .hero h1 { font-size:2rem; } .hero p { font-size:1rem; } .nav-list { gap:1rem; justify-content:center; width:100%; margin-top:1rem; } #darkModeToggle { margin-left:auto; margin-top:1rem; } .about-content { flex-direction:column; align-items:center; } .about-image { max-width:80%; } .pricing-plans { grid-template-columns:1fr; } .cookie-consent .glass-card { flex-direction:column; text-align:center; gap:0.8rem; } .cookie-consent button { margin-left:0 !important; width:100%; margin-top:0; } .slideshow { max-width:90vw; min-height:160px; } .slideshow img { height: min(60vw, 512px); width:auto; } .portfolio-grid.stacked-vertical .portfolio-item img { height:360px; } } @media (max-width: 600px) { .site-header { padding:0.8rem 0.6rem; } .brand-logo img { height:40px; } .site-header .glass-card { display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem; } .brand-logo { order:-1; width:100%; display:block; text-align:left; } .brand-logo img { height:44px; } nav { flex-direction:column; align-items:flex-start; } .nav-list { flex-direction:column; width:100%; align-items:flex-start; max-height:0; overflow:hidden; transition:max-height 0.3s ease; } .nav-list.open { max-height:500px; } .nav-link { padding:0.5rem 0; } .hamburger-menu { display:flex; flex-direction:column; justify-content:space-around; width:28px; height:24px; background:transparent; border:none; cursor:pointer; padding:0; margin-top:0.5rem; margin-left:auto; z-index:1001; } .hamburger-line { width:28px; height:3px; background-color:var(--header-text); border-radius:2px; transition: all 0.3s linear; position:relative; transform-origin:1px; } .hamburger-menu.open .hamburger-line:nth-child(1) { transform:rotate(45deg); } .hamburger-menu.open .hamburger-line:nth-child(2) { opacity:0; } .hamburger-menu.open .hamburger-line:nth-child(3) { transform:rotate(-45deg); } #darkModeToggle { align-self:flex-end; margin-top:0.5rem; } .lightbox { padding:1rem; } .lightbox-arrow { width:40px; height:40px; font-size:1.3rem; } .lightbox img { max-height:60vh; } .video-thumb .play-btn { width:52px; height:52px; } .video-modal .modal-inner { width:95%; } .small-box { padding:0.7rem; } .glass-card .btn-primary { padding:0.4rem 0.7rem; font-size:0.95rem; } } /* Hamburger-Menü für Tablets und kleinere Bildschirme */ @media (max-width: 768px) { .hamburger-menu { display:flex; } .nav-list { display:none; } .nav-list.open { display:flex; } } /* Verbesserungen für verschiedene Bildschirmgrößen */ @media (min-width: 769px) and (max-width: 1024px) { /* Tablet-Styles: Nav bleibt sichtbar, aber kompakter */ .nav-list { gap: 1rem; } .nav-link { padding: 0.5rem 0.3rem; font-size: 0.9rem; } .hamburger-menu { display: none; } } @media (min-width: 1025px) { /* Desktop: Volle Nav sichtbar */ .nav-list { display: flex; } .hamburger-menu { display: none; } } /* ------------------------------ Dark Mode ------------------------------ */ /* Consolidated dark-mode overrides to keep file organized. */ body.dark-mode { background-color: var(--color-bg-dark); color: var(--color-text-dark); } /* Dark-mode header background */ body.dark-mode { --header-bg: rgba(11,11,11,0.9); } /* swap logos */ body.dark-mode .brand-logo .logo-light { display:none; } body.dark-mode .brand-logo .logo-dark { display:inline-block; } /* headings */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: var(--color-accent); } /* components that have dark variants */ body.dark-mode .pricing-card, body.dark-mode .gallery-item, body.dark-mode .portfolio-item, body.dark-mode .custom-offer { background-color: var(--color-card-bg-dark); border-color: var(--color-border-dark); } body.dark-mode .portfolio-highlights li { background-color: var(--color-card-bg-dark); border-color: var(--color-border-dark); } body.dark-mode .gallery-item h3 { color: var(--color-accent); } body.dark-mode .gallery-item p { color: var(--color-text-dark); } /* Header text color flip in dark mode: switch header text from white to black */ /* In dark mode show header text and hover in white (not black) */ body.dark-mode .nav-link { color: var(--header-text-dark); } body.dark-mode .nav-link:hover, body.dark-mode .nav-link:focus { color: rgba(255,255,255,0.92); } body.dark-mode .dark-mode-toggle { color: var(--header-text-dark); } body.dark-mode .hamburger-line { background-color: var(--header-text-dark); } body.dark-mode .testimonial-author { color: var(--color-accent); } body.dark-mode .contact-form input, body.dark-mode .contact-form select, body.dark-mode .contact-form textarea { background-color: #2a2a2a; border-color: var(--color-border-dark); color: var(--color-text-dark); } body.dark-mode .contact-form select option { background-color: #1a1a1a; color: var(--color-text-dark); } body.dark-mode .contact-form input:focus, body.dark-mode .contact-form select:focus, body.dark-mode .contact-form textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(48, 116, 155, 0.25); } body.dark-mode .contact-form label { color: var(--color-text-dark); } body.dark-mode .filter-btn.active { background-color: var(--color-accent); box-shadow: 0 2px 5px rgba(255,64,129,0.3); } body.dark-mode .btn-primary { background-color: #ffffff; color: #000000; border: 2px solid #000000; } body.dark-mode .btn-primary:hover { background-color: #000000; color: #ffffff; } body.dark-mode .portfolio-page { background-color: var(--color-bg-dark); color: var(--color-text-dark); } /* adjust footer colours in dark mode */ body.dark-mode footer{ --footer-bg: rgba(11,11,11,0.9); color: var(--footer-text-dark) } body.dark-mode footer a:hover { color: var(--color-accent); } body.dark-mode footer .glass-card { background: rgba(11,11,11,0.9); } /* adjust cookie consent colours in dark mode */ body.dark-mode .cookie-consent .glass-card { background: rgba(20,25,35,0.98); border-color:rgba(255,255,255,0.15); box-shadow:0 4px 20px rgba(0,0,0,0.4); } body.dark-mode .cookie-consent p { color:rgba(255,255,255,0.9); } body.dark-mode .cookie-consent a { color:#64b5f6; } body.dark-mode .cookie-consent a:hover { color:#90caf9; } body.dark-mode .cookie-consent button { background-color:#64b5f6; } body.dark-mode .cookie-consent button:hover, body.dark-mode .cookie-consent button:focus { background-color:#90caf9; box-shadow:0 4px 12px rgba(100,181,246,0.3); } /* Fotokurse Seite - Custom Background */ body.has-bg-image .bg-placeholder { background-image: url("images/fotokurs.jpg"); } /* Fotokurse Text - Always White */ .fotokurse-card { color: #ffffff !important; } .fotokurse-card h1, .fotokurse-card h2, .fotokurse-card h3 { color: var(--color-accent) !important; } .fotokurse-card p { color: #ffffff !important; } .fotokurse-card a { color: #ffffff !important; } /* Fotokurse Card Button - Make it visible like in preise.html */ .fotokurse-card .btn-primary { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } .fotokurse-card .btn-primary:hover { background: #000000 !important; color: #ffffff !important; transform: translateY(-2px); } /* ------------------------------ Pricing Dark Mode ---------------------- */ /* Spezielle Dark Mode Regeln für Preise-Seite */ body.dark-mode .lead { color: #ffffff !important; } body.dark-mode .pricing-card .price small { color: #ffffff !important; } /* ------------------------------ Hero Text White -------------------------- */ /* Hero Text dauerhaft weiß machen (index.html Zeile 67) */ .hero p { color: #ffffff !important; } /* ------------------------------ Snow Overlay ------------------------------ */ .snow-wrapper { position: fixed; top: -60px; left: 0; z-index: 9999; pointer-events: none; animation: snow-fall linear infinite; } .snow-flake { color: white; animation: snow-drift linear infinite; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); user-select: none; } @keyframes snow-fall { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 60px)); } } @keyframes snow-drift { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(0); } } /* Mobile Anpassungen für Schneeflocken */ @media (max-width: 768px) { @keyframes snow-drift { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } } /* End of stylesheet */