/* Komponenten: Topzone (Header+Hero), Sektionen, Formular, Footer. Farben kommen ausschliesslich aus den Theme-Tokens (tokens.css) — keine Hardcodes. */ /* Petrol-Topzone: Header (alle Seiten) + Hero (nur Startseite), weicher Verlauf -> --bg. Vollbreit (direktes -Kind), Inhalt bleibt zentriert. */ .topzone{ --fade-up:75px; /* Verlauf greift nach OBEN in die Petrol-/Hero-Zone (dunkle Kurvenspitze) */ --fade-down:225px; /* Verlauf reicht nach UNTEN und reserviert zugleich den Platz darunter */ /* Solides Petrol als Basis; der Verlauf liegt NUR als Streifen am unteren Rand. S-Kurve (smootherstep, in oklab): Steigung UND Kruemmung laufen an beiden Enden auf null, d.h. der Verlauf trifft Petrol oben und --bg unten TANGENTIAL statt mit Knick -> kein Mach-Band / keine helle Kante; viele feine Stops => kein Flirren wie bei groben Stufen. */ background: linear-gradient(180deg in oklab, var(--hero-bg) 0%, color-mix(in oklab, var(--hero-bg), var(--bg) 2%) 12%, color-mix(in oklab, var(--hero-bg), var(--bg) 5%) 19%, color-mix(in oklab, var(--hero-bg), var(--bg) 10%) 25%, color-mix(in oklab, var(--hero-bg), var(--bg) 18%) 31%, color-mix(in oklab, var(--hero-bg), var(--bg) 28%) 38%, color-mix(in oklab, var(--hero-bg), var(--bg) 38%) 44%, color-mix(in oklab, var(--hero-bg), var(--bg) 50%) 50%, color-mix(in oklab, var(--hero-bg), var(--bg) 62%) 56%, color-mix(in oklab, var(--hero-bg), var(--bg) 72%) 62%, color-mix(in oklab, var(--hero-bg), var(--bg) 82%) 69%, color-mix(in oklab, var(--hero-bg), var(--bg) 90%) 75%, color-mix(in oklab, var(--hero-bg), var(--bg) 95%) 81%, color-mix(in oklab, var(--hero-bg), var(--bg) 98%) 88%, var(--bg) 100%) bottom / 100% calc(var(--fade-up) + var(--fade-down)) no-repeat, var(--hero-bg); padding-bottom:var(--fade-down); /* haelt Inhalte ueber dem Verlauf */ } /* Erste Ueberschrift ragt in den Verlauf hinein (smootherer Uebergang) und zieht den Inhalt hoch. Grenze (Light Mode): die Ueberschrift ist Grosstext -> 3:1 reicht (hier >=4:1 geprueft); der regulaere Fliesstext darunter sitzt tiefer/heller und bleibt >=8.9:1. Dark unkritisch. */ .topzone--hero + main{ margin-top:-161px; } .topzone:not(.topzone--hero) + main{ margin-top:-177px; } .site-header{ max-width:var(--maxw); margin-inline:auto; padding:var(--space); display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; } .wordmark{ font-weight:700; letter-spacing:.02em; color:var(--on-dark); text-decoration:none; } /* Hauptnavigation — integriert auf der Petrol-Zone, helle Schrift, Gold nur als Unterstrich-Akzent */ .site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(1rem,3vw,2rem); } /* inline-block + Block-Padding: komfortable Trefferflaeche >=24px (WCAG 2.5.8, Touch) */ .site-nav a{ color:var(--on-dark); text-decoration:none; font-weight:600; display:inline-block; padding-block:.25rem; } .site-nav a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em; } .site-nav a[aria-current="page"]{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em; } /* Theme-Umschalter (Hell/Dunkel) */ .theme-toggle{ appearance:none; cursor:pointer; width:2.5rem; height:2.5rem; border-radius:999px; display:inline-grid; place-items:center; color:var(--on-dark); background:transparent; border:1px solid var(--border); } .theme-toggle:hover{ border-color:var(--gold); } .theme-toggle .icon{ display:block; } .theme-toggle .icon-sun{ display:none; } /* Default/Light: Mond zeigen ("zu Dunkel wechseln") */ :root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; } /* Inhaltssektionen */ .section{ max-width:var(--maxw); margin-inline:auto; padding:var(--space); scroll-margin-top:1.5rem; } .section h2{ margin:0 0 .5em; font-size:clamp(1.5rem,1.2rem + 1.5vw,2.25rem); color:var(--text); } .section__placeholder{ margin:0; color:var(--text); } /* CV-Tabs (ARIA Tab-Pattern) */ .tabs{ margin-top:1rem; } .tablist{ display:flex; flex-wrap:wrap; gap:.25rem; border-bottom:1px solid var(--border); } .tablist [role="tab"]{ appearance:none; background:transparent; border:0; cursor:pointer; color:var(--muted); font:inherit; font-weight:600; padding:.6rem .9rem; margin-bottom:-1px; border-bottom:3px solid transparent; } .tablist [role="tab"][aria-selected="true"]{ color:var(--text); border-bottom-color:var(--gold); } .tablist [role="tab"]:hover{ color:var(--text); } [role="tabpanel"]{ padding-top:1.25rem; } /* CV-Eintraege: gerahmte Karten, kleiner Spalt dazwischen */ .cv-entry{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.8rem 1rem; margin:0 0 .6rem; } .cv-entry:last-child{ margin-bottom:0; } .cv-entry > p{ margin:0; } .cv-period{ font-size:.85rem; font-weight:600; color:var(--primary); } /* hoehere Spezifitaet als `.section h2`, damit die Rolle wirklich kleiner wird */ .cv-entry > .cv-role{ margin:.1rem 0 .25rem; font-size:1.05rem; color:var(--text); } /* abgetrennte Tools-/Tech-Zeile pro Station */ .cv-entry > .cv-tools{ margin:.6rem 0 0; padding-top:.5rem; border-top:1px solid var(--border); font-size:.8rem; line-height:1.5; color:var(--muted); } .cv-tools__label{ color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; margin-right:.5rem; } .cv-note{ color:var(--muted); font-size:.95rem; margin-top:.75rem; } /* Projekte-Karten */ .lead{ margin:0 0 1.5rem; max-width:52ch; color:var(--text); } .cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:1fr; } @media (min-width:48rem){ .cards{ grid-template-columns:repeat(2,1fr); } } .card{ padding:1.25rem 1.4rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface); } .card__title{ margin:0 0 .5rem; font-size:1.3rem; color:var(--text); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; } .card p{ margin:0; } .badge{ font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--primary); border:1px solid var(--gold); border-radius:999px; padding:.15rem .5rem; } /* Kontaktformular */ .form{ max-width:40rem; display:grid; gap:1.1rem; } .field{ display:grid; gap:.35rem; } .field label{ font-weight:600; color:var(--text); } .req{ color:var(--primary); } .field input, .field select, .field textarea{ font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.6rem .7rem; } .field textarea{ resize:vertical; } /* Native Dropdown-Optionen an das Theme angleichen */ .field select option{ color:var(--text); background:var(--surface); } .field [aria-invalid="true"]{ border-color:var(--danger); } .field-group{ border:1px solid var(--border); border-radius:var(--radius); padding:1rem; display:grid; gap:1.1rem; margin:0; } .field-group legend{ padding:0 .4rem; color:var(--primary); font-weight:600; } .error{ margin:0; color:var(--danger); font-size:.9rem; } .form-note{ font-size:.9rem; color:var(--muted); margin:0; } .btn{ justify-self:start; font:inherit; font-weight:700; cursor:pointer; color:var(--on-primary); background:var(--primary); border:0; border-radius:999px; padding:.7rem 1.4rem; } .btn:hover{ background:var(--primary-hover); } .btn:disabled{ opacity:.6; cursor:default; } .form-status{ margin:0; font-weight:600; color:var(--text); } .form-status.is-ok{ color:var(--primary); } .form-status.is-error{ color:var(--danger); } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Rechtsseiten (Impressum / Datenschutz) */ .legal{ max-width:48rem; } .legal h2{ margin:1.5rem 0 .4rem; font-size:1.2rem; color:var(--text); } .legal-address{ font-style:normal; line-height:1.7; color:var(--text); } .legal a{ color:var(--link); } .hero{ max-width:var(--maxw); margin-inline:auto; padding:var(--space); display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center; grid-template-columns:1fr; } @media (min-width:48rem){ .hero{ grid-template-columns:minmax(0,18rem) 1fr; } } .hero__photo{ width:100%; max-width:18rem; border-radius:var(--radius); /* dezenter Rahmen + Tiefe — Hero-Zone ist in beiden Modi dunkel, daher fixe Werte */ box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 12px 30px rgba(0,0,0,.35); } .hero__name{ margin:0 0 .3em; font-size:clamp(2rem, 1.5rem + 3vw, 3.5rem); line-height:1.1; color:var(--on-dark); } .hero__roles{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.3rem; } .hero__roles li{ font-size:clamp(1.05rem, 1rem + .7vw, 1.4rem); font-weight:600; color:var(--hero-accent); /* Gold auf Petrol — AA, nur in der dunklen Hero-Zone */ line-height:1.25; } .hero__about{ margin:0; max-width:54ch; color:var(--on-dark); } /* Profil-Rubriken (Startseite): "Was ich biete" + "Was mich abhebt" */ .section--rule{ border-top:1px solid var(--border); } .leistungen{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; } .leistungen li{ position:relative; padding-left:1.5rem; color:var(--text); } .leistungen li::before{ content:"\203A"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; } .leistungen strong{ color:var(--text); } .abhebt p{ margin:0 0 1rem; color:var(--text); } .abhebt p:last-child{ margin-bottom:0; } .profil__lead{ font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight:600; } .profil__result strong{ color:var(--primary); } .site-footer{ max-width:var(--maxw); margin-inline:auto; margin-top:var(--space); padding:var(--space); color:var(--muted); border-top:1px solid var(--border); } .footer-nav ul{ list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-wrap:wrap; gap:1.5rem; } .footer-nav a{ color:var(--link); display:inline-block; padding-block:.25rem; } .footer-nav a[aria-current="page"]{ color:var(--text); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em; } .footer-copy{ margin:0; color:var(--muted); font-size:.9rem; }