/* ========================================================================= HAAKWORKS — THEME Alles, was am Design angepasst werden soll (Farben, Schriften), steht hier oben als CSS-Variable. Der Rest der Datei nutzt nur diese Variablen, d.h. eine Änderung hier wirkt sich automatisch auf die ganze Seite aus. ========================================================================= */ :root { /* Schriften — bei Bedarf im von index.html / Impressum.html den Google-Fonts-Link anpassen, wenn hier andere Namen eingetragen werden. */ --font-heading: 'Bricolage Grotesque', sans-serif; --font-body: 'Inter', sans-serif; /* Hintergrundfarben (dunkles Theme, oklch = Helligkeit / Buntheit / Farbton) */ --color-bg: oklch(0.16 0.004 260); /* Standard-Hintergrund, Farbe des Balkens */ --color-bg-alt: oklch(0.13 0.004 260); /* etwas dunkler, Balken von Start & "Über uns" */ --color-page-bg: oklch(0.27 0.004 260); /* helleres Grau der Seitenfläche rund um den Balken */ --color-border: oklch(0.28 0.004 260); /* Textfarben, von hell/wichtig nach gedämpft/nebensächlich */ --color-text: oklch(0.93 0.003 260); /* Überschriften */ --color-text-body: oklch(0.8 0.005 260); /* Fließtext */ --color-text-muted: oklch(0.75 0.006 260); /* Navigation, Logo-Nebentext */ --color-text-subtle: oklch(0.72 0.005 260); /* Leistungsbeschreibungen */ --color-text-faint: oklch(0.55 0.006 260); /* Zitat im Hero */ --color-text-footer: oklch(0.5 0.006 260); /* Kleingedrucktes im Footer */ /* Akzentfarbe (aktuell Grün) */ --color-accent: oklch(0.87 0.23 130); --color-spotlight: oklch(0.87 0.23 130 / 40%); /* Akzentfarbe, transparent für den Taschenlampen-Effekt */ /* Grundmaße */ --content-width: 1120px; --content-width-narrow: 640px; --header-height: 64px; --band-offset-top: clamp(60px, 18vh, 220px); /* Luft über dem Balken */ --letter-size: clamp(56px, 11vw, 148px); /* Buchstabengröße von "haakworks" im Hero — bestimmt auch die Spotlight-Größe */ } /* ========================================================================= RESET & GRUNDLAGEN ========================================================================= */ * { box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; /* Sorgt dafür, dass Sprungziele nicht unter dem fixen Header verschwinden. */ scroll-padding-top: var(--header-height); } body { margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-heading); margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--content-width); margin: 0 auto; } .wrap--narrow { max-width: var(--content-width-narrow); margin: 0 auto; } .eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 20px; } .logo { font-family: var(--font-heading); font-weight: 700; font-size: 22px; } .logo span:first-child { color: var(--color-accent); } .logo span:last-child { color: var(--color-text-muted); } /* ========================================================================= HEADER ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px clamp(20px, 5vw, 48px); background: color-mix(in oklch, var(--color-bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .site-header nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 4vw, 36px); font-size: 14px; font-weight: 500; } .site-header nav a { color: var(--color-text-muted); transition: color 0.15s ease; } .site-header nav a:hover, .site-header nav a:focus-visible { color: var(--color-text); } /* Einfacher Header ohne Navigation, z. B. auf dem Impressum */ .site-header--simple a:last-child { font-size: 14px; font-weight: 500; color: var(--color-text-muted); transition: color 0.15s ease; } .site-header--simple a:last-child:hover, .site-header--simple a:last-child:focus-visible { color: var(--color-accent); } /* ========================================================================= HERO ========================================================================= */ .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; } .hero h1 { font-weight: 700; font-size: var(--letter-size); line-height: 0.95; letter-spacing: -0.01em; } .hero h1 span:first-child { color: var(--color-accent); } .hero h1 span:last-child { color: oklch(0.78 0.006 260); } .hero p { max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--color-text-body); } .hero .quote { margin-top: 8px; font-size: 14px; color: var(--color-text-faint); font-style: italic; } /* ========================================================================= SECTIONS ========================================================================= */ /* Start, Leistungen und Über uns füllen je den Bildschirm — dadurch wirkt jeder Bereich wie eine eigene "Seite" und die Navigation dorthin macht sichtbar Sinn. Der Inhalt selbst steckt in einem dunklen Balken, der etwas unterhalb der Mitte beginnt statt vertikal zentriert zu sein; die Fläche der Seite drumherum ist ein helleres Grau (--color-page-bg). */ .page-section { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-page-bg); } .band { width: 100%; margin-top: var(--band-offset-top); padding: clamp(48px, 8vw, 90px) clamp(20px, 5vw, 48px); background: var(--color-bg-alt); } #leistungen .band { background: var(--color-bg); } .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 44px; } .services h3 { font-size: 26px; font-weight: 600; margin-bottom: 12px; } .services p { font-size: 15px; line-height: 1.6; color: var(--color-text-subtle); } .intro p { font-size: 17px; line-height: 1.7; color: var(--color-text-body); text-align: left; } /* ========================================================================= FOOTER (Startseite) ========================================================================= */ .site-footer { padding: clamp(40px, 8vw, 64px) clamp(20px, 5vw, 48px); background: var(--color-bg); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; } .site-footer .email { font-size: 15px; color: var(--color-text-body); transition: color 0.15s ease; } .site-footer .email:hover, .site-footer .email:focus-visible { color: var(--color-accent); } .site-footer .legal { display: flex; gap: 20px; align-items: center; font-size: 13px; color: var(--color-text-footer); } .site-footer .legal a { color: var(--color-text-footer); transition: color 0.15s ease; } .site-footer .legal a:hover, .site-footer .legal a:focus-visible { color: var(--color-accent); } /* Schlichter Footer auf der Impressum-Seite */ .simple-footer { padding: 32px clamp(20px, 5vw, 48px); border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-footer); } /* ========================================================================= IMPRESSUM ========================================================================= */ .legal-page h1 { font-weight: 700; font-size: 40px; margin: 0 0 40px; } .legal-page h2 { font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 12px; } .legal-page section { padding: 0; margin: 0 0 32px; } .legal-page p { font-size: 15px; line-height: 1.7; color: var(--color-text-body); } .legal-page a { color: var(--color-accent); text-decoration: none; } .legal-page a:hover, .legal-page a:focus-visible { text-decoration: underline; } .legal-main { display: flex; justify-content: center; padding: 80px clamp(20px, 5vw, 48px) 120px; } /* ========================================================================= SPOTLIGHT-EFFEKT Ein grüner, transparenter Kreis folgt dem Mauszeiger wie eine Taschenlampe (Position kommt per JS aus spotlight.js). Durchmesser = 2 × --letter-size, also doppelt so groß wie die Buchstaben im "haakworks"-Schriftzug. Nur auf Geräten mit echter Maus aktiv, nicht bei reduzierter Bewegung. ========================================================================= */ .spotlight { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle calc(var(--letter-size) * 1.9) at var(--mx, 50vw) var(--my, 50vh), var(--color-spotlight), transparent 70%); } @media (hover: hover) and (pointer: fine) { .spotlight { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .spotlight { display: none; } } /* ========================================================================= MOBILE ========================================================================= */ @media (max-width: 560px) { .site-footer, .site-header { justify-content: center; text-align: center; } .site-footer .legal { flex-direction: column; gap: 8px; } }