:root{ --paper: #edede6; --paper-alt: #e2e3da; --ink: #191c1f; --ink-soft: #565b5e; --line: #c7cabf; --blue: #2b4c7e; --orange: #a03d18; --teal: #26594b; --max: 980px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter', system-ui, sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Archivo', system-ui, sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:1.1; margin:0 0 0.5em; } p{ margin:0 0 1em; color:var(--ink-soft); } a{ color:inherit; } img{ max-width:100%; height:auto; display:block; } .mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; } .eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:0.6em; margin-bottom:1em; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--blue); display:inline-block; flex-shrink:0; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; } .lede{ max-width:56ch; } /* accessibility ---------------------------------------------------------- */ :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:0.7em 1.2em; text-decoration:none; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem; } .skip-link:focus{ left:0; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } /* language switching --------------------------------------------------- */ /* Der Umschalter sitzt als data-lang auf . Wichtig: NICHT als Klasse lang-en — die Regel unten wuerde dann das Wurzelelement selbst auf display:none setzen und die ganze Seite ausblenden. */ .lang-en{ display:none; } html[data-lang="en"] .lang-de{ display:none; } html[data-lang="en"] .lang-en{ display:revert; } /* Hinweisbanner: Seite im Aufbau ------------------------------------------ */ .disclaimer{ background:#f3e7cd; border-bottom:1px solid #d8c396; color:var(--ink); font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.76rem; line-height:1.5; padding:0.6rem 1.5rem; text-align:center; } .disclaimer strong{ color:#8a3a12; letter-spacing:0.06em; text-transform:uppercase; margin-right:0.4em; } /* header ------------------------------------------------------------------ */ header.site{ border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:rgba(237,237,230,0.92); backdrop-filter:blur(6px); } .nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; } .nav-brand{ font-family:'Archivo', system-ui, sans-serif; font-weight:800; font-size:1.05rem; text-decoration:none; letter-spacing:-0.01em; white-space:nowrap; } .nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; font-size:0.9rem; font-weight:500; color:var(--ink); padding-bottom:2px; border-bottom:1px solid transparent; } .nav-links a:hover, .nav-links a.active{ border-bottom-color:var(--blue); color:var(--blue); } .lang-toggle{ display:flex; border:1px solid var(--ink); border-radius:2px; overflow:hidden; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; } .lang-toggle button{ background:transparent; border:none; padding:0.35em 0.7em; cursor:pointer; color:var(--ink); font-family:inherit; font-size:inherit; } .lang-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); } /* corner-bracket signature element --------------------------------------- */ .bracket-frame{ position:relative; padding:1.8rem; background:var(--paper-alt); } .corner{ position:absolute; width:14px; height:14px; border:2px solid var(--blue); } .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; } .corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; } .corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; } .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; } /* buttons ------------------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; gap:0.5em; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem; text-decoration:none; padding:0.75em 1.3em; border:1px solid var(--ink); color:var(--ink); transition:background .15s, color .15s; } .btn:hover{ background:var(--ink); color:var(--paper); } .btn.primary{ background:var(--ink); color:var(--paper); } .btn.primary:hover{ background:var(--blue); border-color:var(--blue); } /* hero ---------------------------------------------------------------------- */ .hero{ padding:5rem 0 4rem; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:36px 36px; background-position:center top; border-bottom:1px solid var(--line); } .hero-grid{ display:grid; grid-template-columns:1.3fr 0.9fr; gap:3rem; align-items:center; } .hero h1{ font-size:clamp(2.2rem, 4.5vw, 3.4rem); } .hero .role{ font-size:1.15rem; color:var(--ink-soft); margin-bottom:1.4rem; } .hero .actions{ display:flex; gap:1rem; margin-top:1.8rem; flex-wrap:wrap; } .hero-frame{ padding:0.6rem; } .hero-frame img{ aspect-ratio:4/5; object-fit:cover; width:100%; } /* sections -------------------------------------------------------------- */ section{ padding:4rem 0; } section.alt{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section-head{ margin-bottom:2.5rem; } .section-head h2{ font-size:1.8rem; } /* skills tags ------------------------------------------------------------ */ .tags{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1rem; } .tag{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; border:1px solid var(--line); padding:0.4em 0.8em; color:var(--ink-soft); } .tag-group{ margin-top:2rem; } .tag-group h3{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); margin-bottom:0.2em; } /* career / werdegang list ------------------------------------------------- */ .stations{ border-top:1px solid var(--line); } .station{ display:grid; grid-template-columns:150px 1fr; gap:1.5rem; padding:1.4rem 0; border-bottom:1px solid var(--line); } .station .when{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem; color:var(--ink-soft); } .station h3{ font-size:1.05rem; margin-bottom:0.2em; } .station .where{ font-size:0.88rem; color:var(--ink-soft); margin-bottom:0.4em; } .station p{ margin-bottom:0; } .station .kind{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:0.35em; } /* project preview cards on home ------------------------------------------- */ .preview-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.5rem; } .preview-card{ text-decoration:none; display:flex; flex-direction:column; } .preview-card .status{ margin-bottom:0.9rem; align-self:flex-start; } .preview-card h3{ font-size:1.05rem; } .preview-card p{ font-size:0.9rem; margin-bottom:0; } .preview-card:hover h3{ color:var(--blue); } /* status badges ------------------------------------------------------------ */ .status{ display:inline-flex; align-items:center; gap:0.5em; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.3em 0.65em; border:1px solid currentColor; } .status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; } .status.ongoing{ color:var(--orange); } .status.done{ color:var(--teal); } /* confidentiality note ---------------------------------------------------- */ .notice{ border-left:3px solid var(--blue); background:var(--paper-alt); padding:1rem 1.2rem; margin:1.5rem 0; font-size:0.9rem; } .notice p{ margin:0; } .notice strong{ color:var(--ink); } /* timeline ------------------------------------------------------------------ */ .timeline{ position:relative; margin-top:1rem; } .timeline::before{ content:""; position:absolute; left:132px; top:6px; bottom:6px; width:1px; background:repeating-linear-gradient(to bottom, var(--ink-soft) 0 6px, transparent 6px 13px); } .timeline-item{ display:flex; align-items:flex-start; gap:1.6rem; position:relative; margin-bottom:2.4rem; text-decoration:none; color:inherit; } .timeline-date{ width:110px; flex-shrink:0; text-align:right; padding-top:0.5rem; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; color:var(--ink-soft); } .timeline-node{ position:absolute; left:126px; top:0.55rem; width:13px; height:13px; border-radius:50%; background:var(--paper); border:2px solid var(--blue); } .timeline-card{ flex:1; margin-left:28px; transition:transform .15s; } .timeline-item:hover .timeline-card{ transform:translateX(4px); } .timeline-item:hover .timeline-card h3{ color:var(--blue); } .timeline-card h3{ font-size:1.25rem; margin:0.7rem 0 0.5rem; } .timeline-card p{ font-size:0.92rem; margin-bottom:0.6rem; } .timeline-card .kicker{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; margin:0.6rem 0 0; color:var(--ink-soft); } .timeline-card .read{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.76rem; color:var(--blue); } /* project detail ------------------------------------------------------------ */ .back-link{ display:inline-flex; align-items:center; gap:0.5em; text-decoration:none; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.8rem; color:var(--ink-soft); margin-bottom:1.5rem; } .back-link:hover{ color:var(--blue); } .detail-meta{ display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; margin:1.2rem 0 0.4rem; } .detail-meta .when{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.85rem; color:var(--ink-soft); } .detail-hero h1{ font-size:clamp(1.8rem, 3.6vw, 2.6rem); max-width:820px; } /* Titelblock und Fließtext gehören zusammen — keine Sektionslücke dazwischen */ .detail-top{ padding:3rem 0 0; } .detail-main{ padding-top:1.5rem; } .detail-body{ max-width:720px; } .detail-body h2{ font-size:1.15rem; margin-top:2.4rem; } .detail-body .eyebrow{ margin-top:2.4rem; margin-bottom:0.6rem; } .detail-body > .eyebrow:first-child{ margin-top:0; } .detail-body ul:not(.spec-list){ color:var(--ink-soft); padding-left:1.2rem; margin:0 0 1em; } .detail-body ul:not(.spec-list) li{ margin-bottom:0.5em; } /* key figures on project pages -------------------------------------------- */ .figures{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); margin:1.5rem 0; } .figures div{ padding:1rem 1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .figures .num{ font-family:'Archivo', system-ui, sans-serif; font-weight:800; font-size:1.5rem; display:block; line-height:1.1; color:var(--ink); } .figures .label{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.72rem; color:var(--ink-soft); display:block; margin-top:0.4em; line-height:1.4; } figure{ margin:1.8rem 0; } figure figcaption{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.75rem; color:var(--ink-soft); margin-top:0.6rem; } .spec-list{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--line); } .spec-list li{ display:grid; grid-template-columns:160px 1fr; gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--line); font-size:0.92rem; } .spec-list li > span:first-child{ font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--ink-soft); font-size:0.8rem; } .detail-nav{ display:flex; justify-content:space-between; gap:1rem; padding-top:2.5rem; margin-top:3rem; border-top:1px solid var(--line); } .detail-nav a{ text-decoration:none; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem; } .detail-nav a:hover{ color:var(--blue); } .detail-nav a:only-child{ margin-left:auto; } /* footer ---------------------------------------------------------------------- */ footer.site{ border-top:1px solid var(--line); padding:2.6rem 0; margin-top:2rem; } .footer-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .footer-links{ display:flex; gap:1.4rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; } .footer-links a{ text-decoration:none; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.82rem; } .footer-links a:hover{ color:var(--blue); } .footer-note{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.75rem; color:var(--ink-soft); } /* gallery filters --------------------------------------------------------- */ .filters{ border:1px solid var(--line); background:var(--paper-alt); padding:1.2rem 1.3rem; margin-bottom:2rem; } .filter-row{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem; align-items:end; } .filter-field{ display:flex; flex-direction:column; gap:0.35rem; min-width:0; } .filter-field label{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); } .filter-field input, .filter-field select{ font-family:'Inter', system-ui, sans-serif; font-size:0.9rem; padding:0.5em 0.6em; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:0; width:100%; min-width:0; } .filter-field input:focus-visible, .filter-field select:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; } .filter-tags{ border:none; margin:1.2rem 0 0; padding:0; } .filter-tags legend{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-soft); padding:0; margin-bottom:0.55rem; } .tag-chips{ display:flex; flex-wrap:wrap; gap:0.45rem; } .tag-chip{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.76rem; padding:0.35em 0.75em; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer; border-radius:0; transition:background .12s, color .12s, border-color .12s; } .tag-chip:hover{ border-color:var(--ink-soft); color:var(--ink); } .tag-chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:var(--paper); } .filter-foot{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); } .filter-count{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; color:var(--ink-soft); margin:0; } .filter-empty{ border:1px dashed var(--line); padding:2.5rem 1rem; text-align:center; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.85rem; color:var(--ink-soft); margin-bottom:2rem; } /* photo gallery ----------------------------------------------------------- */ .shot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.6rem 1rem; margin:0 0 4rem; padding:0; list-style:none; } .shot-item{ display:flex; flex-direction:column; gap:0.5rem; min-width:0; } .shot-item[hidden]{ display:none; } .shot-meta{ display:flex; gap:0.7rem; align-items:baseline; flex-wrap:wrap; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.74rem; color:var(--ink-soft); } .shot-date-none{ opacity:0.65; font-style:italic; } .shot-place::before{ content:"· "; } .shot-tags{ display:flex; flex-wrap:wrap; gap:0.3rem; } .shot-tag{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.68rem; color:var(--ink-soft); border:1px solid var(--line); padding:0.15em 0.45em; } /* Kameraangabe schliesst die Tag-Zeile ab: "Motorsport Fahrtechnik | Canon EOS 2000D". Trennstrich als Rahmen statt als Zeichen — bricht die Zeile um, bleibt es ein Strich und wird nicht zum verirrten Satzzeichen am Zeilenanfang. */ .shot-cam{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.68rem; color:var(--ink-soft); opacity:0.85; align-self:center; padding:0.15em 0 0.15em 0.55em; border-left:1px solid var(--line); } .shot{ padding:0; border:1px solid var(--line); background:var(--paper-alt); cursor:zoom-in; overflow:hidden; display:block; line-height:0; } .shot img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .25s ease, opacity .25s ease; } .shot:hover img, .shot:focus-visible img{ transform:scale(1.04); opacity:0.92; } /* lightbox ---------------------------------------------------------------- */ body.lb-open{ overflow:hidden; } /* der sticky Header wuerde sonst ueber der Lightbox stehen bleiben */ body.lb-open header.site{ display:none; } .lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(20,22,24,0.975); display:flex; align-items:center; justify-content:center; padding:3.5rem 1rem; } .lightbox[hidden]{ display:none; } .lb-figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:0.8rem; } .lb-figure img{ max-width:100%; max-height:calc(100vh - 8rem); width:auto; height:auto; margin:0 auto; object-fit:contain; } .lb-figure figcaption{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.78rem; color:#d6d7d0; text-align:center; max-width:70ch; margin:0 auto; line-height:1.5; } .lightbox button{ position:absolute; background:transparent; border:1px solid rgba(237,237,230,0.45); color:#edede6; cursor:pointer; line-height:1; font-family:'IBM Plex Mono', ui-monospace, monospace; transition:background .15s, border-color .15s; } .lightbox button:hover{ background:rgba(237,237,230,0.14); border-color:#edede6; } .lightbox button:focus-visible{ outline:2px solid #edede6; outline-offset:3px; } .lb-close{ top:1rem; right:1rem; width:2.6rem; height:2.6rem; font-size:1rem; } .lb-prev, .lb-next{ top:50%; transform:translateY(-50%); width:2.6rem; height:3.4rem; font-size:1.7rem; } .lb-prev{ left:1rem; } .lb-next{ right:1rem; } /* rechtliche Hinweise ------------------------------------------------------ */ .footer-legal{ display:flex; gap:1.4rem; flex-wrap:wrap; padding-top:1.2rem; margin-top:1.2rem; border-top:1px solid var(--line); } .footer-legal a{ text-decoration:none; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:0.75rem; color:var(--ink-soft); } .footer-legal a:hover{ color:var(--blue); } .footer-legal a[aria-current="page"]{ color:var(--blue); } /* 404 ------------------------------------------------------------------------- */ .notfound{ text-align:center; padding:6rem 0; } .notfound .code{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:4rem; color:var(--blue); line-height:1; margin-bottom:1rem; } .notfound .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; } /* responsive ------------------------------------------------------------------- */ @media (max-width: 780px){ .hero{ padding:3rem 0; } .hero-grid{ grid-template-columns:1fr; gap:2rem; } .hero-frame{ max-width:280px; } .station{ grid-template-columns:1fr; gap:0.3rem; } .nav{ flex-wrap:wrap; } .nav-links{ gap:1.2rem; } .timeline::before{ left:14px; } .timeline-item{ flex-direction:column; gap:0.4rem; } .timeline-date{ width:auto; text-align:left; padding-top:0; padding-left:34px; order:1; } .timeline-node{ left:8px; top:2px; } .timeline-card{ margin-left:34px; order:2; } .spec-list li{ grid-template-columns:1fr; gap:0.2rem; } .detail-nav{ flex-direction:column; gap:0.8rem; } .shot-grid{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:1.1rem 0.6rem; } .filter-row{ grid-template-columns:1fr 1fr; } .filter-search{ grid-column:1 / -1; } .filters{ padding:1rem; } .lightbox{ padding:4.5rem 0.5rem; } .lb-prev, .lb-next{ top:auto; bottom:1rem; transform:none; height:2.6rem; } .lb-figure img{ max-height:calc(100vh - 11rem); } } @media (max-width: 480px){ .nav-links{ gap:0.9rem; font-size:0.85rem; } .nav-brand{ font-size:0.95rem; } } /* print — Lebenslauf sauber ausdruckbar ---------------------------------------- */ @media print{ header.site, .lang-toggle, .skip-link, .hero .actions, .detail-nav, footer.site{ display:none !important; } body{ background:#fff; color:#000; font-size:11pt; } .hero{ background-image:none; border:none; padding:0 0 1rem; } section{ padding:1rem 0; page-break-inside:avoid; } .bracket-frame{ background:none; } a{ text-decoration:none; } }