/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } /* Rich text content image sizing/alignment (frontend) */ .rte-figure { margin: 16px auto; display:block; } .rte-figure img { height:auto; display:block; max-width:100%; } .rte-size-small img { max-width: 280px; } .rte-size-medium img { max-width: 480px; } .rte-size-large img { max-width: 800px; } .rte-align-left { float:left; margin: 8px 16px 8px 0; } .rte-align-right { float:right; margin: 8px 0 8px 16px; } .rte-align-center { text-align:center; } .rte-figure::after { content:""; display:block; clear:both; } /* Accent Theme Variables */ :root { /* Default: pure blue (no purple) */ --accent: #3b82f6; /* gradient start (blue-500) */ --accent-2: #1d4ed8; /* gradient end (blue-700) */ --accent-solid: #2563eb; /* solid accent for fills/borders */ --accent-contrast: #ffffff; /* text/icon on accent */ --link: #2563eb; /* link color */ } /* Accent palettes (switch via data-accent on ) */ [data-accent="blue"] { --accent: #3b82f6; --accent-2: #1d4ed8; --accent-solid: #2563eb; --accent-contrast: #ffffff; --link: #2563eb; } [data-accent="red"] { --accent: #ef4444; --accent-2: #f43f5e; --accent-solid: #dc2626; --accent-contrast: #ffffff; --link: #dc2626; } [data-accent="yellow"] { --accent: #fbbf24; --accent-2: #f59e0b; --accent-solid: #d97706; --accent-contrast: #111111; --link: #b45309; } [data-accent="green"] { --accent: #22c55e; --accent-2: #16a34a; --accent-solid: #16a34a; --accent-contrast: #ffffff; --link: #16a34a; } [data-accent="white"] { --accent: #e5e7eb; --accent-2: #cbd5e1; --accent-solid: #9ca3af; --accent-contrast: #111111; --link: #6b7280; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Typography */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5em; font-weight: 600; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1em; } /* Buttons */ .btn { display: inline-block; padding: 12px 24px; text-decoration: none; border-radius: 5px; font-weight: 500; text-align: center; transition: all 0.3s ease; border: none; cursor: pointer; font-size: 16px; } .btn-primary { /* Unify primary button to gradient style (accent-controlled) */ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .btn-primary:hover { filter: brightness(0.98); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); } .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover { background-color: #545b62; } .btn-outline { background-color: transparent; color: var(--link); border: 2px solid var(--link); } .btn-outline:hover { background-color: var(--link); color: white; } /* High-contrast edit button */ .btn-edit { background: linear-gradient(135deg, #1f2937 0%, #374151 100%); color: #fff !important; border: 2px solid #111827; position: relative; font-weight: 600; letter-spacing: .5px; } .btn-edit:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .btn-small { padding: 8px 16px; font-size: 14px; } .btn-danger { background-color: #dc3545; color: white; } .btn-danger:hover { background-color: #c82333; } /* Header and Navigation */ .header { background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; } .navbar { padding: 1rem 0; } .nav-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .nav-logo a { font-size: 1.5rem; font-weight: bold; text-decoration: none; color: var(--link); display: inline-flex; align-items: center; } /* Logo images for light/dark themes */ .nav-logo img { display: block; height: 112px; width: auto; } .nav-logo .logo-dark { display: none; } [data-theme="dark"] .nav-logo .logo-light { display: none; } [data-theme="dark"] .nav-logo .logo-dark { display: block; } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } .nav-link:hover, .nav-link.active { color: var(--link); } .nav-toggle { display: none; flex-direction: column; cursor: pointer; } .bar { width: 25px; height: 3px; background-color: #333; margin: 3px 0; transition: 0.3s; } /* Admin badge (visible only when logged in) */ .nav-admin { margin-left: 16px; } .admin-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: #eef2ff; /* indigo-50 */ color: #3730a3; /* indigo-800 */ border: 1px solid #c7d2fe; /* indigo-200 */ text-decoration: none; cursor: pointer; } .admin-badge .dot { width: 8px; height: 8px; border-radius: 9999px; background:#22c55e; /* green-500 */ box-shadow: 0 0 0 3px rgba(34,197,94,0.2); } /* Accent Picker */ .accent-picker { display:flex; align-items:center; gap:8px; margin-left:12px; } .accent-swatch { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid rgba(0,0,0,0.1); display:inline-block; cursor:pointer; padding:0; background: #e5e7eb; } .accent-swatch:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.15); } .accent-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(0,0,0,0.35); } /* Swatch colors */ .accent-swatch[data-accent-value="blue"] { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); } .accent-swatch[data-accent-value="red"] { background: linear-gradient(135deg, #ef4444 0%, #f43f5e 100%); } .accent-swatch[data-accent-value="yellow"] { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); } .accent-swatch[data-accent-value="green"] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .accent-swatch[data-accent-value="white"] { background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%); } @media (max-width: 768px) { .accent-picker { display:none; } } /* Mobile accent picker (shows on small screens, centered near footer) */ .accent-picker-mobile { display:none; } @media (max-width: 768px) { .accent-picker-mobile { display:flex; align-items:center; justify-content:center; gap:10px; margin: 8px 0 12px; } .accent-picker-mobile .accent-swatch { width: 20px; height: 20px; } } /* Hero Section */ .hero { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); padding: 100px 0; text-align: center; } .hero-container { max-width: 800px; margin: 0 auto; padding: 0 20px; } .hero h1 { font-size: 2.4rem; margin-bottom: 1rem; font-weight: 600; /* lighter */ line-height: 1.2; } .hero p { font-size: 1.3rem; /* match internal .hero-subtitle */ margin-bottom: 2rem; opacity: 0.9; } /* Ensure consistent spacing between welcome text block and catalog button */ .hero .welcome-text, .hero .welcome-rich { margin-bottom: 1.5rem; } /* Homepage/Katalog Story Box Abschnitt (zentrierte Box für Einleitungstext) */ .home-intro, .catalog-intro { padding: 70px 0; background: #f8f9fa; } .story-box { max-width: 860px; margin: 0 auto; background: #ffffff; padding: 48px 54px; border-radius: 22px; box-shadow: 0 8px 32px -4px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; position: relative; animation: fade-in-up 0.6s ease-out both 0.08s; } /* Dezente Akzentlinie oben (optional) */ .story-box::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 6px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); } .home-intro-body { font-size: 1.05rem; line-height: 1.75; color: #444; } .home-intro-body p { margin-bottom: 1.15em; } .home-intro-body strong { color:#111; } .home-intro-body br { line-height: 1.4; } @media (max-width: 900px) { .story-box { padding: 40px 40px; } } @media (max-width: 640px) { .story-box { padding: 32px 26px; border-radius: 18px; } .home-intro, .catalog-intro { padding: 50px 0; } } /* Normalize spacing between hero and intro box across pages */ .hero + .home-intro { padding-top: 64px; } .page-hero-gradient + .catalog-intro { padding-top: 64px; } @media (max-width: 640px) { .hero + .home-intro, .page-hero-gradient + .catalog-intro { padding-top: 48px; } } /* Subtle fade-in on load (respect reduced motion) */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .story-box { animation: none; } } /* Dark Mode Anpassungen für Story Box */ [data-theme="dark"] .home-intro, [data-theme="dark"] .catalog-intro { background:#0b1220; } [data-theme="dark"] .story-box { background:#111827; border-color:#1f2937; box-shadow: 0 8px 32px -4px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5); } [data-theme="dark"] .story-box::before { opacity: 0.85; } [data-theme="dark"] .home-intro-body { color:#cbd5e1; } [data-theme="dark"] .home-intro-body strong { color:#ffffff; } [data-theme="dark"] .home-intro-body p { color:#cbd5e1; } /* Page Header */ .page-header { background-color: #343a40; color: white; padding: 60px 0; text-align: center; } .page-header h1 { font-size: 2.4rem; /* match gartenspassundbastelfreude home hero */ margin-bottom: 0.5rem; font-weight: 600; line-height: 1.2; } .page-header p { font-size: 1.3rem; /* hero subtitle parity */ opacity: 0.9; line-height: 1.4; } /* Breadcrumb */ .breadcrumb { background-color: #e9ecef; padding: 15px 0; } .breadcrumb a { color: var(--link); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } /* Projects Grid */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin: 40px 0; } .project-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .project-image { position: relative; height: 250px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .featured-badge { position: absolute; top: 15px; right: 15px; background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%); color: white; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.35); border: 1px solid rgba(0,0,0,0.08); } .project-client-name { color: var(--link); font-style: italic; margin-bottom: 10px; } .project-client-name small { font-size: 13px; } .project-type { font-size: 12px; padding: 4px 8px; background-color: #e9ecef; border-radius: 12px; margin-right: 10px; } .project-card:hover .project-image img { transform: scale(1.05); } .project-content { padding: 25px; } .project-content h3 { margin-bottom: 10px; color: #333; } .project-content p { color: #666; line-height: 1.6; margin-bottom: 15px; } .project-tags { margin: 15px 0; } .tag { display: inline-block; background-color: #e9ecef; color: #495057; padding: 4px 8px; border-radius: 15px; font-size: 12px; margin-right: 8px; margin-bottom: 5px; } .project-meta { margin: 15px 0; font-size: 14px; color: #888; } /* Project feedback widget (parity with unicatLABS) */ .project-feedback { margin:18px 0; border:1px solid #e5e7eb; border-radius:10px; padding:12px; background: var(--panel, #f8fafc); } .project-feedback h3 { margin-top:0; font-size:18px; } .project-feedback .feedback-buttons { display:flex; gap:8px; align-items:center; } .project-feedback .feedback-thanks { display:none; color:#16a34a; font-weight:600; } .project-feedback .feedback-note { margin-top:6px; font-size:12px; color:#6b7280; } /* Make the DSGVO link visible and theme-aware */ .project-feedback .feedback-note a.feedback-privacy-link { color: var(--link); text-decoration: none; } .project-feedback .feedback-note a.feedback-privacy-link:hover { text-decoration: underline; } /* Featured Projects Section */ .featured-projects { padding: 80px 0; background-color: white; } /* Team Section */ .team-section { padding: 60px 0; background-color: white; } .team-section .projects-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .team-card { text-align: center; padding-top: 18px; } .team-avatar { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; border: 2px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-card .project-content h3 { margin-top: 8px; } .team-card .project-client-name small { color:#6b7280; font-style: normal; } /* Dark mode for Team */ [data-theme="dark"] .team-section { background-color: #0b1220; } [data-theme="dark"] .team-card { background:#111827; box-shadow: 0 5px 15px rgba(0,0,0,0.6); border:1px solid #1f2937; } [data-theme="dark"] .team-card .project-content h3 { color:#e5e7eb; } [data-theme="dark"] .team-card .project-content p { color:#cbd5e1; } [data-theme="dark"] .team-card blockquote { color:#e5e7eb; border-left-color:#374151 !important; background:#0b1220 !important; } [data-theme="dark"] .team-card details summary { color:#93c5fd; } [data-theme="dark"] .team-avatar { border-color:#1f2937; } .featured-projects h2 { text-align: center; margin-bottom: 50px; color: #333; } .view-all { text-align: center; margin-top: 40px; } .no-projects { text-align: center; padding: 60px 20px; color: #666; } /* Catalog Controls */ .catalog-controls { background-color: white; padding: 30px 0; border-bottom: 1px solid #e9ecef; } .search-bar { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; } .search-bar input { flex: 1; max-width: 400px; padding: 12px; border: 2px solid #e9ecef; border-radius: 5px; font-size: 16px; } .search-bar input:focus { outline: none; border-color: var(--accent-solid); } .search-bar button { padding: 12px 24px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); border: none; border-radius: 5px; cursor: pointer; font-size: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .search-bar button:hover { filter: brightness(0.98); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); } .filter-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Extra spacing between type and status rows */ #filter-status { margin-top: 12px; } .filter-tag { padding: 8px 16px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; } .filter-tag:hover, .filter-tag.active { background-color: var(--accent-solid); color: #ffffff; border-color: var(--accent-solid); } /* Catalog Projects */ .catalog-projects { padding: 40px 0; } .load-more { text-align: center; margin-top: 40px; } /* Project Detail */ .project-detail { padding: 40px 0; background-color: white; } .project-header { text-align: center; margin-bottom: 40px; } .project-header h1 { margin-bottom: 20px; } .project-header h2 { margin-bottom: 20px; font-size: 1.8rem; } /* Project Meta Information */ .project-meta-info { background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 30px; } .meta-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e9ecef; } .meta-item:last-child { border-bottom: none; } .meta-item strong { color: #333; font-size: 14px; } .meta-item span { color: #666; font-size: 14px; } .status-badge { padding: 4px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; } .status-completed { background-color: #28a745; color: white; } .status-in_progress { background-color: #ffc107; color: #111; /* darker text on yellow for better contrast */ } .status-planning { background-color: #17a2b8; color: white; } .status-maintenance { background-color: #6c757d; color: white; } .project-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; } .main-image { width: 100%; height: 400px; object-fit: cover; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .image-gallery { margin-top: 30px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 15px; } .gallery-image { width: 100%; height: 120px; object-fit: cover; border-radius: 5px; cursor: pointer; transition: transform 0.3s ease; } .gallery-image:hover { transform: scale(1.05); } .project-info-section h2, .project-info-section h3 { color: #333; margin-bottom: 15px; } /* Headings accent for detail sections */ .project-info-section h2 { padding-bottom: 8px; border-bottom: 2px solid #e9ecef; } /* Technologies as compact chips */ .project-technologies ul.tech-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .project-technologies li { background-color: #e9ecef; padding: 8px 15px; border-radius: 20px; font-size: 14px; } /* Description card matches other info blocks */ .project-description { background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid var(--accent); } /* Read-more helpers for long descriptions */ .project-description { position: relative; --desc-bg: #f8f9fa; } [data-theme="dark"] .project-description { --desc-bg: #0b1220; } .project-description .rte-output { position: relative; } .project-description .readmore-collapsed { max-height: 420px; overflow: hidden; position: relative; } .project-description .readmore-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--desc-bg)); } /* Rich text content within descriptions */ .project-description p { margin-bottom: 1em; } .project-description figure { margin: 1em 0; } .project-description figure img { max-width: 100%; height: auto; display: block; border-radius: 8px; } .project-description figure figcaption { text-align: center; font-size: 0.9rem; color: #64748b; margin-top: 6px; } /* Size variants */ .project-description figure.rte-size-small img { max-width: 300px; } .project-description figure.rte-size-medium img { max-width: 520px; } .project-description figure.rte-size-large img { max-width: 100%; } /* Alignment variants */ .project-description figure.rte-align-left { float: left; margin: 0.5em 1em 0.5em 0; } .project-description figure.rte-align-right { float: right; margin: 0.5em 0 0.5em 1em; } .project-description figure.rte-align-center { margin-left: auto; margin-right: auto; text-align: center; } @media (max-width: 768px) { .project-description figure.rte-align-left, .project-description figure.rte-align-right { float: none; margin: 0.75em auto; } } /* Hauptfunktionen as clean checklist cards */ .project-features ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .project-features li { position: relative; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 12px; padding: 12px 14px 12px 40px; font-size: 14px; } .project-features li::before { content: '✓'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #22c55e; /* green-500 */ font-weight: 700; } .project-challenges, .project-results { background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid var(--accent-solid); } .project-testimonial { background-color: #fff3cd; padding: 20px; border-radius: 10px; margin: 20px 0; border-left: 4px solid #ffc107; } .project-testimonial blockquote { font-style: italic; color: #666; margin: 10px 0; line-height: 1.6; } .project-testimonial .testimonial-author { font-style: normal; color: #555; margin-top: 6px; } .project-video { margin: 30px 0; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 10px; margin-top: 15px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .project-links { margin: 30px 0; } .links-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px; } /* Small icon links row for catalog cards */ .link-icons { display: flex; gap: 10px; margin: 8px 0 4px 0; } .link-icons a { text-decoration: none; font-size: 18px; } .link-icons a:hover { transform: translateY(-1px); } [data-theme="dark"] .link-icons a { color: #e5e7eb; } .project-navigation { text-align: center; margin-top: 40px; } .project-navigation .btn + .btn { margin-left: 10px; } /* Related Projects */ .related-projects { padding: 60px 0; background-color: #f8f9fa; } .related-projects h2 { text-align: center; margin-bottom: 40px; } /* Footer */ .footer { background-color: #343a40; color: white; text-align: center; padding: 40px 0; } .footer p { margin-bottom: 10px; } .footer a { color: var(--link); text-decoration: none; } .footer a:hover { text-decoration: underline; } /* Cookie consent banner */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; justify-content: center; padding: 12px; } .cookie-inner { width: min(960px, 96vw); background: #ffffff; color: #111827; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 14px 16px; display: flex; gap: 14px; align-items: center; } .cookie-text { flex: 1 1 auto; font-size: 14px; line-height: 1.5; } .cookie-text a { color: var(--link); text-decoration: none; } .cookie-text a:hover { text-decoration: underline; } .cookie-actions { display: flex; gap: 10px; } .cookie-actions .btn { padding: 10px 14px; } @media (max-width: 640px) { .cookie-inner { flex-direction: column; align-items: stretch; } .cookie-actions { justify-content: flex-end; } } [data-theme="dark"] .cookie-inner { background: #0b1220; color: #e5e7eb; border-color: #1f2937; box-shadow: 0 10px 30px rgba(0,0,0,0.6); } [data-theme="dark"] .cookie-text a { color: #93c5fd; } /* 404 Error Page */ .error-page { padding: 100px 0; text-align: center; min-height: 60vh; display: flex; align-items: center; background: linear-gradient(135deg, #343a40 0%, #495057 100%); color: #fff; } .error-page .error-content h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .error-page .error-content p { font-size: 1.1rem; color: #e9ecef; margin-bottom: 15px; } .error-page .error-code { font-size: 8rem; font-weight: 800; color: var(--link); margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.15); } .error-page .error-actions { margin-top: 40px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { .error-page .error-code { font-size: 5rem; } .error-page .error-content h2 { font-size: 1.5rem; } .error-page .error-actions { flex-direction: column; align-items: center; } } /* Alerts */ .alert { padding: 15px; margin-bottom: 20px; border-radius: 5px; } .alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Responsive Design */ @media (max-width: 768px) { .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; background-color: white; width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0,0,0,0.05); padding: 20px 0; } .nav-menu.active { left: 0; } .nav-toggle { display: flex; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1.1rem; /* align with .hero-subtitle tablet scale */ } .projects-grid { grid-template-columns: 1fr; gap: 20px; } .project-content-grid { grid-template-columns: 1fr; gap: 30px; } .search-bar { flex-direction: column; align-items: stretch; } .search-bar input { max-width: none; } .container { padding: 0 15px; } } /* Dark mode: mobile menu and hamburger bars */ @media (max-width: 768px) { [data-theme="dark"] .nav-menu { background-color: #0b1220; /* dark surface */ box-shadow: 0 10px 27px rgba(0,0,0,0.6); border-top: 1px solid #1f2937; } } [data-theme="dark"] .bar { background-color: #e5e7eb; } @media (max-width: 480px) { .hero { padding: 60px 0; } .hero h1 { font-size: 1.8rem; } /* Keep page/contact hero consistent with home hero at narrow widths */ .contact-hero h1, .page-hero-gradient h1 { font-size: 1.8rem; } .projects-grid { grid-template-columns: 1fr; } .project-card { margin: 0 10px; } } /* Modern Page Framework (aligned with Kontakt page design) */ /* Gradient Hero (generic) */ .contact-hero, .page-hero-gradient { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); padding: 120px 0 80px; color: var(--accent-contrast); text-align: center; position: relative; overflow: hidden; } .contact-hero::before, .page-hero-gradient::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') bottom center / cover no-repeat; opacity: 0.3; pointer-events: none; /* make overlay non-interactive so links are clickable */ z-index: 0; } .contact-hero .hero-badge, .page-hero-gradient .hero-badge { display: inline-block; margin: 0 auto 20px auto; /* centered */ padding: 12px 28px; border-radius: 9999px; font-size: 1rem; font-weight: 700; letter-spacing: 0.3px; background: #ffffff; /* make it more prominent */ color: #1f2937; /* slate-800 for contrast */ box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.6); backdrop-filter: blur(10px); } .contact-hero .contact-hero-content, .page-hero-gradient .contact-hero-content { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* above ::before */ } .contact-hero h1, .page-hero-gradient h1 { font-size: 2.4rem; /* unified with home hero (reduced) */ font-weight: 600; /* lighter */ margin-bottom: 20px; line-height: 1.2; } .hero-subtitle { font-size: 1.3rem; opacity: 0.95; max-width: 600px; margin: 0 auto; } /* Section layout aligned with Kontakt */ .contact-main, .section-gray { padding: 80px 0; background: #f8f9fa; } .contact-wrapper, .two-col-sticky { display: grid; grid-template-columns: 350px 1fr; gap: 50px; align-items: start; } .contact-sidebar, .sticky-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; } .contact-card, .info-card { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-card:hover, .info-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); } .contact-card-icon { font-size: 2rem; margin-bottom: 15px; } .contact-card h3 { color:#333; font-size:1.1rem; margin-bottom:10px; font-weight:600; } .contact-card p { color:#666; margin:0; line-height:1.6; } .contact-card a { color: var(--link); text-decoration:none; font-weight:500; } .contact-card a:hover { text-decoration: underline; } .contact-cta-box, .cta-gradient { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); padding: 25px; border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .contact-form-section, .form-card { background: white; padding: 50px; border-radius: 20px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); } .form-header { margin-bottom: 40px; } .form-header h2 { color:#333; font-size:2rem; margin-bottom:10px; font-weight:700; } .form-header p { color:#666; font-size:1rem; margin:0; } /* Modern form inputs */ .modern-contact-form .form-group { margin-bottom: 25px; } .modern-contact-form label { display:block; color:#333; font-weight:600; margin-bottom:10px; font-size:0.95rem; } .modern-contact-form .required { color:#dc3545; font-weight:700; } .modern-contact-form .optional { color:#6c757d; font-weight:400; font-size:0.85rem; } .input-wrapper { position:relative; display:flex; align-items:center; } .input-icon { position:absolute; left:18px; font-size:1.2rem; pointer-events:none; z-index:1; } .input-wrapper input { width:100%; padding:14px 18px 14px 50px; border:2px solid #e1e8ed; border-radius:12px; font-size:1rem; background:#f8f9fa; transition:all .3s ease; } .input-wrapper input:focus { outline:none; border-color: var(--accent); background:white; box-shadow:0 0 0 4px rgba(37,99,235,.15); } .textarea-wrapper textarea { width:100%; padding:16px 18px; border:2px solid #e1e8ed; border-radius:12px; font-size:1rem; background:#f8f9fa; resize:vertical; min-height:140px; line-height:1.6; transition:all .3s ease; } .textarea-wrapper textarea:focus { outline:none; border-color: var(--accent); background:white; box-shadow:0 0 0 4px rgba(37,99,235,.15); } .checkbox-group { margin:30px 0; } .checkbox-container { display:flex; align-items:flex-start; cursor:pointer; position:relative; padding-left:35px; line-height:1.6; } .checkbox-container input[type="checkbox"] { position:absolute; opacity:0; cursor:pointer; } .checkbox-checkmark { position:absolute; left:0; top:2px; height:24px; width:24px; background-color:#f8f9fa; border:2px solid #e1e8ed; border-radius:6px; transition:all .3s ease; } .checkbox-container:hover input ~ .checkbox-checkmark { background-color:#e9ecef; } .checkbox-container input:checked ~ .checkbox-checkmark { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-color: var(--accent); } .checkbox-checkmark:after { content:""; position:absolute; display:none; left:7px; top:3px; width:6px; height:11px; border:solid white; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); } .checkbox-container input:checked ~ .checkbox-checkmark:after { display:block; } .checkbox-text { color:#555; font-size:0.95rem; } .checkbox-text a { color: var(--link); text-decoration:none; font-weight:600; } .checkbox-text a:hover { text-decoration:underline; } .btn-submit, .btn-gradient { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 36px; font-size:1.1rem; font-weight:700; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border:none; border-radius:12px; color: var(--accent-contrast); cursor:pointer; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,.15); } .btn-submit:hover, .btn-gradient:hover { transform: translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,.2); } .btn-submit:active, .btn-gradient:active { transform: translateY(0); } .btn-arrow { font-size:1.5rem; font-weight:400; transition: transform .3s ease; } .btn-submit:hover .btn-arrow { transform: translateX(5px); } /* Responsive tweaks for hero/sections */ @media (max-width: 992px) { .contact-wrapper, .two-col-sticky { grid-template-columns: 1fr; gap: 40px; } .contact-sidebar, .sticky-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .contact-cta-box, .cta-gradient { grid-column: 1 / -1; } } @media (max-width: 768px) { .contact-hero, .page-hero-gradient { padding: 80px 0 60px; } .contact-hero h1, .page-hero-gradient h1 { font-size: 2rem; /* match mobile hero scale */ } .hero-subtitle { font-size: 1.1rem; } .contact-main, .section-gray { padding: 60px 0; } .contact-form-section, .form-card { padding: 35px 25px; } .form-header h2 { font-size: 1.6rem; } .contact-sidebar, .sticky-sidebar { grid-template-columns: 1fr; } .btn-submit, .btn-gradient { font-size:1rem; padding:16px 28px; } } /* Theme Toggle */ .theme-toggle { margin-left: 16px; width: 56px; height: 30px; position: relative; padding: 0; border-radius: 9999px; border: 2px solid rgba(0,0,0,0.08); background: #e5e7eb; /* light track */ cursor: pointer; display: inline-block; overflow: hidden; outline: none; } .theme-toggle::before { content: ''; display: none; } .theme-toggle::after { content: '☀️'; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background: #ffffff; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: left .25s ease, background .25s ease, box-shadow .25s ease; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .theme-toggle:hover::after { box-shadow: 0 4px 10px rgba(0,0,0,0.3); } [data-theme="dark"] .theme-toggle { background: #1f2937; /* dark track */ border-color: #374151; } [data-theme="dark"] .theme-toggle::after { content: '🌙'; left: calc(100% - 28px); background: #111827; /* dark knob for contrast */ } /* Dark Mode (opt-in via data-theme="dark" on ) */ [data-theme="dark"] body { background: #0f172a; /* slate-900 */ color: #e5e7eb; /* gray-200 */ } [data-theme="dark"] .header { background-color: #0b1220; box-shadow: 0 2px 10px rgba(0,0,0,0.6); } [data-theme="dark"] .nav-link { color: #e5e7eb; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: #93c5fd; } [data-theme="dark"] .admin-badge { background:#1f2937; color:#93c5fd; border-color:#374151; } [data-theme="dark"] .breadcrumb { background-color: #111827; } [data-theme="dark"] .projects-grid .project-card, [data-theme="dark"] .project-card { background: #111827; box-shadow: 0 5px 15px rgba(0,0,0,0.6); } [data-theme="dark"] .project-content h3 { color: #e5e7eb; } [data-theme="dark"] .project-content p { color: #cbd5e1 !important; } [data-theme="dark"] .project-content blockquote { color:#e5e7eb !important; background:#0b1220 !important; border-left-color:#374151 !important; } [data-theme="dark"] .project-type, [data-theme="dark"] .tag { background-color: #1f2937; color: #e5e7eb; } [data-theme="dark"] .catalog-controls { background-color: #0b1220; border-bottom-color: #1f2937; } [data-theme="dark"] .search-bar input { background:#111827; border-color:#1f2937; color:#e5e7eb; } [data-theme="dark"] .search-bar button { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); } [data-theme="dark"] .project-detail { background:#0b1220; } [data-theme="dark"] .project-meta-info { background:#111827; border:1px solid #1f2937; } [data-theme="dark"] .project-info-section p { color:#cbd5e1; } [data-theme="dark"] .project-info-section h2 { border-bottom-color:#1f2937; color:#e5e7eb; } [data-theme="dark"] .project-info-section h3 { color:#e5e7eb; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color:#e5e7eb; } /* Dark mode: Related Projects section */ [data-theme="dark"] .related-projects { background-color: #0b1220; } [data-theme="dark"] .related-projects h2 { color: #e5e7eb; } [data-theme="dark"] .meta-item { border-bottom-color:#1f2937; } [data-theme="dark"] .meta-item strong { color:#e5e7eb; } [data-theme="dark"] .meta-item span { color:#cbd5e1; } /* Dark mode: ensure status badge contrast remains readable */ [data-theme="dark"] .meta-item .status-in_progress { color: #111; } [data-theme="dark"] .project-challenges, [data-theme="dark"] .project-results { background:#0b1220; border-left-color: var(--accent-solid); } [data-theme="dark"] .project-testimonial { background:#3b3b2a; border-left-color:#eab308; color:#fff3cd; } [data-theme="dark"] .project-testimonial blockquote { color:#fff3cd; } [data-theme="dark"] .project-testimonial .testimonial-author { color:#f5e9b8; } [data-theme="dark"] .project-description { background:#0b1220; border-left-color: var(--accent-solid); } [data-theme="dark"] .project-features li { background:#111827; color:#e5e7eb; border:1px solid #1f2937; } [data-theme="dark"] .project-features li::before { color:#34d399; } [data-theme="dark"] .project-technologies li { background:#1f2937; color:#e5e7eb; border:1px solid #374151; } [data-theme="dark"] .project-links { background:#111827; border-color:#1f2937; } [data-theme="dark"] .footer { background-color: #0b1220; } [data-theme="dark"] .footer a { color: #93c5fd; } [data-theme="dark"] .alert-success { background:#163724; color:#d1fae5; border-color:#155e34; } [data-theme="dark"] .alert-error { background:#3c1d1e; color:#fecaca; border-color:#7f1d1d; } [data-theme="dark"] .contact-form-section, [data-theme="dark"] .form-card { background:#111827; box-shadow: 0 5px 30px rgba(0,0,0,0.6); } [data-theme="dark"] .input-wrapper input, [data-theme="dark"] .textarea-wrapper textarea { background:#0b1220; color:#e5e7eb; border-color:#1f2937; } [data-theme="dark"] .checkbox-checkmark { background:#0b1220; border-color:#1f2937; } [data-theme="dark"] .info-card { background:#111827; } [data-theme="dark"] .cta-gradient { box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2); } [data-theme="dark"] .page-hero-gradient::before { opacity: 0.15; } [data-theme="dark"] .section-gray { background-color: #0b1220; } /* Kontakt page dark mode fixes */ [data-theme="dark"] .contact-main { background-color: #0b1220; } [data-theme="dark"] .contact-hero::before { opacity: 0.15; } [data-theme="dark"] .contact-card { background: #111827; box-shadow: 0 2px 15px rgba(0,0,0,0.6); } [data-theme="dark"] .contact-card h3 { color: #e5e7eb; } [data-theme="dark"] .contact-card p { color: #cbd5e1; } [data-theme="dark"] .contact-card a { color: #93c5fd; } [data-theme="dark"] .form-header h2 { color: #e5e7eb; } [data-theme="dark"] .form-header p { color: #cbd5e1; } [data-theme="dark"] .modern-contact-form label { color: #e5e7eb; } [data-theme="dark"] .modern-contact-form .required { color: #fca5a5; } [data-theme="dark"] .modern-contact-form .optional { color: #9ca3af; } /* Dark mode: filter tags in catalog */ [data-theme="dark"] .filter-tag { background-color: #111827; color: #e5e7eb; border-color: #1f2937; } [data-theme="dark"] .filter-tag:hover, [data-theme="dark"] .filter-tag.active { background-color: var(--accent-solid); color: #ffffff; border-color: var(--accent-solid); } [data-theme="dark"] .input-icon { color: #9ca3af; } [data-theme="dark"] .modern-contact-form input::placeholder, [data-theme="dark"] .modern-contact-form textarea::placeholder { color: #94a3b8; } [data-theme="dark"] .checkbox-text { color: #cbd5e1; } [data-theme="dark"] .checkbox-text a { color: #93c5fd; } /* Legal pages (Impressum/Datenschutz) extracted from inline styles */ [data-theme="dark"] .featured-projects { background-color: #0b1220; } [data-theme="dark"] body .featured-projects { background-color: #0b1220 !important; } [data-theme="dark"] .featured-projects h2 { color: #e5e7eb; } [data-theme="dark"] .no-projects { color: #cbd5e1; } [data-theme="dark"] .view-all { color: #e5e7eb; } /* About page dark mode (overrides inline block via !important) */ [data-theme="dark"] .about-content { background-color: #0b1220 !important; } [data-theme="dark"] .about-text h2 { color: #e5e7eb !important; } [data-theme="dark"] .about-text h3 { color: #93c5fd !important; } [data-theme="dark"] .about-text p { color: #cbd5e1 !important; } [data-theme="dark"] .services-section { background-color: #0b1220 !important; } [data-theme="dark"] .service-card { background: #111827 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.6) !important; } [data-theme="dark"] .service-card h3 { color: #e5e7eb !important; } [data-theme="dark"] .service-card p { color: #cbd5e1 !important; } .legal-content { padding: 60px 0; background-color: #ffffff; } .legal-box { max-width: 900px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .legal-box h2 { color: #333; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid var(--link); } .info-notice { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); padding: 25px 30px; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .info-notice h3 { color: var(--accent-contrast); margin-bottom: 15px; font-size: 1.3rem; font-weight: 600; } .info-notice p { color: var(--accent-contrast); line-height: 1.8; margin-bottom: 10px; opacity: 0.95; } .info-notice p:last-child { margin-bottom: 0; font-style: italic; opacity: 0.9; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.3); margin-top: 15px; } .info-notice strong { font-weight: 700; font-size: 1.1rem; } .work-in-progress-notice { background: linear-gradient(135deg, #ffa726 0%, #fb8c00 100%); color: white; padding: 25px 30px; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(255, 167, 38, 0.3); border: 3px solid #ff9800; } .work-in-progress-notice h3 { color: white; margin-bottom: 15px; font-size: 1.3rem; font-weight: 700; } .work-in-progress-notice p { color: white; line-height: 1.8; margin-bottom: 12px; opacity: 0.98; } .work-in-progress-notice p:last-child { margin-bottom: 0; font-style: italic; opacity: 0.9; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.4); margin-top: 15px; font-size: 0.9rem; } .legal-section { margin-bottom: 30px; } .legal-section h3 { color: var(--link); margin-bottom: 15px; font-size: 1.2rem; } .legal-section h4 { color: #333; margin-bottom: 10px; margin-top: 20px; font-size: 1.1rem; } .legal-section p { color: #555; line-height: 1.8; margin-bottom: 10px; } .legal-section ul { margin-left: 20px; color: #555; line-height: 1.8; } .legal-section li { margin-bottom: 8px; } .legal-section a { color: var(--link); text-decoration: none; } .legal-section a:hover { text-decoration: underline; } @media (max-width: 768px) { .legal-box { padding: 30px 20px; } } /* Dark mode for legal pages */ [data-theme="dark"] .legal-content { background-color: #0f172a; } [data-theme="dark"] .legal-box { background: #111827; box-shadow: 0 2px 10px rgba(0,0,0,0.6); } [data-theme="dark"] .legal-box h2 { color: #e5e7eb; border-bottom-color: #3b82f6; } [data-theme="dark"] .legal-section h3 { color: #93c5fd; } [data-theme="dark"] .legal-section h4 { color: #e5e7eb; } [data-theme="dark"] .legal-section p, [data-theme="dark"] .legal-section ul, [data-theme="dark"] .legal-section li { color: #cbd5e1; } [data-theme="dark"] .legal-section a { color: #93c5fd; } /* Ensure hero headline/subtitle follow accent contrast even in dark mode */ .hero, .hero h1, .hero p { color: var(--accent-contrast) !important; } .page-hero-gradient, .page-hero-gradient h1, .page-hero-gradient .hero-subtitle { color: var(--accent-contrast) !important; } .contact-hero, .contact-hero h1, .contact-hero .hero-subtitle { color: var(--accent-contrast) !important; } /* About (Über uns) page styles centralized */ .about-content { padding: 60px 0; background-color: #ffffff; } .about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .about-text h2 { color: #333; margin-bottom: 20px; } .about-text h3 { color: var(--link); margin-top: 30px; margin-bottom: 15px; } .about-text p { line-height: 1.8; margin-bottom: 20px; color: #555; } .about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; } .stat-card { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); padding: 30px; border-radius: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; text-decoration: none; } .stat-card h3 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 800; } .stat-card p { margin: 0; opacity: 0.9; } /* Keep stat-card text readable on light accents in dark mode */ .stat-card h3, .stat-card p { color: var(--accent-contrast); } [data-theme="dark"] .stat-card h3, [data-theme="dark"] .stat-card p { color: var(--accent-contrast) !important; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } .services-section { padding: 80px 0; background-color: #f8f9fa; } .services-section h2 { text-align: center; margin-bottom: 50px; color: #333; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .service-card { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; } .service-card:hover { transform: translateY(-5px); } .service-card h3 { color: var(--link); margin-bottom: 15px; } .service-card p { color: #666; line-height: 1.6; } .cta-section { padding: 80px 0; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-contrast); text-align: center; } .cta-section h2 { margin-bottom: 15px; } .cta-section p { font-size: 1.2rem; margin-bottom: 30px; opacity: 0.9; } /* Ensure CTA text keeps proper contrast with light accents, also in dark mode */ .cta-section, .cta-section h2, .cta-section p { color: var(--accent-contrast) !important; } @media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-stats { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } /* Dark mode for project feedback widget */ [data-theme="dark"] .project-feedback { background:#111827; border-color:#1f2937; } [data-theme="dark"] .project-feedback h3 { color:#e5e7eb; } [data-theme="dark"] .project-feedback .feedback-note { color:#9ca3af; } [data-theme="dark"] .project-feedback .feedback-note a.feedback-privacy-link { color:#93c5fd; } [data-theme="dark"] .project-feedback .feedback-note a.feedback-privacy-link:hover { text-decoration: underline; } [data-theme="dark"] .project-feedback .feedback-thanks { color:#22c55e; }