/* ============================================ digi-studio24 — Theme-System ============================================ So funktioniert es: - Jede Variante definiert die gleichen 6 Variablen. - In header.php wird per PHP-Variable $theme die gewünschte Klasse (z.B. "theme-blue") an gehängt. - Neue Variante hinzufügen = neuen Block kopieren, Werte anpassen, fertig. ============================================ */ :root { --radius: 14px; --radius-sm: 8px; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } /* ---------- 01: Standard Blau (aktueller Favorit) ---------- */ .theme-blue { --bg-grad-start: #2563eb; --bg-grad-mid: #1e40af; --bg-grad-end: #1e3a8a; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.75); --accent: #93c5fd; --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.15); --btn-bg: #ffffff; --btn-text: #1e3a8a; } /* ---------- 02: Helles Himmelblau ---------- */ .theme-skyblue { --bg-grad-start: #38bdf8; --bg-grad-mid: #0ea5e9; --bg-grad-end: #0369a1; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.8); --accent: #e0f2fe; --card-bg: rgba(255, 255, 255, 0.12); --card-border: rgba(255, 255, 255, 0.2); --btn-bg: #ffffff; --btn-text: #0369a1; } /* ---------- 03: Petrol / Teal ---------- */ .theme-teal { --bg-grad-start: #0d9488; --bg-grad-mid: #0f766e; --bg-grad-end: #134e4a; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent: #5eead4; --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.16); --btn-bg: #ffffff; --btn-text: #0f766e; } /* ---------- 04: Violett / Indigo ---------- */ .theme-violet { --bg-grad-start: #6366f1; --bg-grad-mid: #4f46e5; --bg-grad-end: #3730a3; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent: #c7d2fe; --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.16); --btn-bg: #ffffff; --btn-text: #3730a3; } /* ---------- 05: Dunkles Marineblau (wie Visitenkarte) ---------- */ .theme-navy { --bg-grad-start: #1a1a2e; --bg-grad-mid: #16213e; --bg-grad-end: #0f0f1a; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.6); --accent: #6ee7b7; --card-bg: rgba(255, 255, 255, 0.06); --card-border: rgba(255, 255, 255, 0.12); --btn-bg: #6366f1; --btn-text: #ffffff; } /* ---------- 06: Smaragdgrün ---------- */ .theme-green { --bg-grad-start: #16a34a; --bg-grad-mid: #15803d; --bg-grad-end: #14532d; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent: #bbf7d0; --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.16); --btn-bg: #ffffff; --btn-text: #15803d; } /* ---------- 07: Bernstein / Orange (warm, auffällig) ---------- */ .theme-amber { --bg-grad-start: #f59e0b; --bg-grad-mid: #d97706; --bg-grad-end: #92400e; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.82); --accent: #fde68a; --card-bg: rgba(255, 255, 255, 0.1); --card-border: rgba(255, 255, 255, 0.18); --btn-bg: #ffffff; --btn-text: #92400e; } /* ---------- 08: Graphit / Hell, sehr seriös ---------- */ .theme-graphite { --bg-grad-start: #475569; --bg-grad-mid: #334155; --bg-grad-end: #1e293b; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.7); --accent: #93c5fd; --card-bg: rgba(255, 255, 255, 0.07); --card-border: rgba(255, 255, 255, 0.14); --btn-bg: #ffffff; --btn-text: #1e293b; } /* ---------- 09: Rotwein / Bordeaux (kreativ, mutig) ---------- */ .theme-bordeaux { --bg-grad-start: #be123c; --bg-grad-mid: #9f1239; --bg-grad-end: #4c0519; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent: #fecdd3; --card-bg: rgba(255, 255, 255, 0.08); --card-border: rgba(255, 255, 255, 0.16); --btn-bg: #ffffff; --btn-text: #9f1239; } /* ---------- 10: Helles Mint / Frisch (für jüngere Zielgruppe) ---------- */ .theme-mint { --bg-grad-start: #2dd4bf; --bg-grad-mid: #0d9488; --bg-grad-end: #115e59; --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.8); --accent: #ccfbf1; --card-bg: rgba(255, 255, 255, 0.1); --card-border: rgba(255, 255, 255, 0.18); --btn-bg: #ffffff; --btn-text: #115e59; } /* ---------- 11: Eigenes Hintergrundbild (KI-generiert, fixiert) ---------- */ .theme-image { --text-color: #ffffff; --text-muted: rgba(255, 255, 255, 0.78); --accent: #93c5fd; --card-bg: rgba(10, 25, 60, 0.45); --card-border: rgba(255, 255, 255, 0.2); --btn-bg: #ffffff; --btn-text: #0c2350; } body.theme-image { background-image: url('../img/hero-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Dezenter dunkler Schleier für bessere Lesbarkeit des Textes */ body.theme-image::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(5,15,40,0.35) 0%, rgba(5,15,40,0.55) 100%); z-index: -1; pointer-events: none; } /* ============================================ Gemeinsame Basis-Styles (nutzen die Variablen) ============================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-main); background: linear-gradient(160deg, var(--bg-grad-start) 0%, var(--bg-grad-mid) 45%, var(--bg-grad-end) 100%); color: var(--text-color); min-height: 100vh; line-height: 1.6; } a { color: var(--accent); text-decoration: none; } .container { max-width: 960px; margin: 0 auto; padding: 0 2rem; } /* Navigation */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; border-bottom: 1px solid var(--card-border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; } .brand-mark { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; border: 1px solid var(--card-border); } .nav-links { display: flex; gap: 1.75rem; font-size: 14px; } .nav-links a { color: var(--text-muted); } .nav-links a:hover { color: var(--text-color); } /* Hero */ .hero { padding: 4rem 2rem 3rem; text-align: center; } .hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 1rem; } .hero h1 span { color: var(--accent); } .hero p { font-size: 16px; color: var(--text-muted); max-width: 480px; margin: 0 auto 2rem; } .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Buttons */ .btn { padding: 13px 26px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; border: none; cursor: pointer; font-family: inherit; transition: opacity .2s, transform .1s; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--btn-bg); color: var(--btn-text); } .btn-primary:hover { opacity: .88; } .btn-ghost { background: var(--card-bg); color: var(--text-color); border: 1px solid var(--card-border); } .btn-ghost:hover { background: rgba(255,255,255,0.16); } /* Sections */ .section { padding: 2.5rem 2rem; } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 1.25rem; text-align: center; } /* Product grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; max-width: 960px; margin: 0 auto; } .product { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; transition: background .2s, transform .15s; } .product:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); } .product i { font-size: 24px; color: var(--accent); margin-bottom: 10px; display: block; } .product h3 { font-size: 15px; font-weight: 600; margin-bottom: 5px; } .product p { font-size: 13px; color: var(--text-muted); } /* Stats strip */ .strip { background: rgba(0,0,0,0.15); padding: 1.5rem 2rem; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; text-align: center; } .stat b { font-size: 22px; display: block; font-weight: 700; } .stat span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } /* Forms */ .form-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem; max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text-muted); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: rgba(255,255,255,0.08); color: var(--text-color); font-family: inherit; font-size: 14px; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.4); } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); } .checkbox-row input { width: auto; margin-top: 3px; } /* Footer */ .footer { padding: 2rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--card-border); font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 12px; background: rgba(0, 0, 0, 0.4); } .footer-links { display: flex; gap: 1.25rem; } /* Portfolio-Galerie */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 960px; margin: 0 auto; } .portfolio-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .15s, border-color .15s; } .portfolio-card:hover { transform: translateY(-3px); border-color: var(--accent); } .portfolio-thumb { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: rgba(0,0,0,0.15); } .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .portfolio-info { padding: 0.9rem 1.1rem; } .portfolio-info h3 { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .portfolio-info p { font-size: 12px; color: var(--text-muted); } /* Lightbox */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: none; align-items: center; justify-content: center; z-index: 999; padding: 2rem; cursor: zoom-out; } .lightbox-overlay.active { display: flex; } .lightbox-overlay img { max-width: min(150%, 1000px); max-height: 85vh; width: auto; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); transform: scale(1); transition: transform .2s ease; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Legal pages (Impressum / Datenschutz) */ .legal { max-width: 760px; margin: 0 auto; padding: 3rem 2rem; } .legal h1 { font-size: 26px; margin-bottom: 1.5rem; } .legal h2 { font-size: 18px; margin: 2rem 0 .75rem; color: var(--accent); } .legal p, .legal li { font-size: 14px; color: var(--text-muted); margin-bottom: .5rem; } .legal ul { padding-left: 1.25rem; margin-bottom: 1rem; } .legal a { text-decoration: underline; } /* Success / alert messages */ .alert { max-width: 600px; margin: 0 auto 1.5rem; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid var(--card-border); background: var(--card-bg); } .alert-success { border-color: rgba(110,231,183,0.4); } .alert-error { border-color: rgba(252,165,165,0.4); } @media (max-width: 600px) { .hero h1 { font-size: 26px; } .nav-links { display: none; } .form-row { grid-template-columns: 1fr; } }