/* ============================================================ ServeFTP – "Werkstatt" Design Papier-Cream, Tinte, Amber. Scharfe Kanten, Monospace-Akzente. Dark Mode: ============================================================ */ :root{ --paper:#f5f1e8; --paper-2:#ece5d5; --ink:#171310; --ink-soft:#5f574b; --line:#d6cdba; --accent:#e8730a; --accent-dark:#c25e05; --dark:#14110c; --dark-2:#1d1811; --dark-line:#37301f; --dark-ink:#f1ebd9; --dark-soft:#a79b84; --elev:#14110c; --inset:#1d1811; --mono:ui-monospace,'SF Mono','Cascadia Mono','JetBrains Mono',Consolas,'Liberation Mono',monospace; --disp:'Avenir Next','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif; --body:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif; } [data-theme="dark"]{ --paper:#14110c; --paper-2:#1a150e; --ink:#f1ebd9; --ink-soft:#bfae91; --line:#37301f; --accent:#f0801a; --accent-dark:#e8730a; /* Ebenen-Hierarchie (dunkel): Seite #14110c → Sektion 02 #211a10 → Testlabor #171208 Ticker/Footer am dunkelsten: #0f0c08 */ --dark:#0f0c08; --dark-2:#100d08; --dark-line:#403826; --dark-soft:#bfae91; --elev:#211a10; --inset:#171208; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .25s,color .25s; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol,dl{list-style:none} .mono{font-family:var(--mono)} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.1;letter-spacing:-.01em} /* ---------- Buttons ---------- */ .btn{ display:inline-block; font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:14px 26px; border:1px solid var(--ink); transition:background .18s,color .18s,border-color .18s,transform .18s; } .btn:hover{transform:translate(-2px,-2px)} .btn-solid{background:var(--ink);color:var(--paper)} .btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:4px 4px 0 var(--ink)} .btn-line{background:transparent;color:var(--ink)} .btn-line:hover{background:var(--ink);color:var(--paper)} .btn-amber{background:var(--accent);border-color:var(--accent);color:#fff} .btn-amber:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:4px 4px 0 var(--dark-line)} /* ---------- Tag / Kicker ---------- */ .tag,.kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } /* ---------- Navigation ---------- */ .nav{ position:sticky;top:0;z-index:100; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .2s,background .25s; } .nav.scrolled{box-shadow:0 2px 0 var(--line)} .nav-inner{ display:flex;align-items:center;justify-content:space-between; gap:24px; padding:18px 28px; max-width:1180px;margin:0 auto; } .logo{ font-family:var(--disp); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; white-space:nowrap; } .logo-accent{color:var(--accent)} .logo-cursor{color:var(--accent);animation:blink 1.2s steps(1) infinite} @keyframes blink{50%{opacity:0}} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); transition:color .15s; } .nav-links a:hover{color:var(--ink)} .nav-links .ln{color:var(--accent);margin-right:6px;font-size:.7rem} .nav-cta{ background:var(--ink);color:var(--paper) !important; padding:10px 18px; } .nav-cta:hover{background:var(--accent) !important} .nav-cta .ln{color:var(--paper);opacity:.6} .nav-cta:hover .ln{color:#fff} /* Theme-Toggle */ .theme-toggle{ width:38px;height:38px;flex:0 0 38px; background:transparent;border:1px solid var(--line); color:var(--ink-soft); font-family:var(--mono);font-size:1rem;line-height:1; cursor:pointer;transition:all .15s; } .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} .nav-toggle{display:none} /* ---------- Hero ---------- */ .hero{padding:84px 0 72px;overflow:hidden} .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; } .hero h1{ font-size:clamp(2.5rem,4.6vw,4rem); margin-bottom:24px; } .hero-lead{ font-size:1.08rem; color:var(--ink-soft); max-width:54ch; margin-bottom:32px; } .hero-lead a{color:var(--ink);border-bottom:2px solid var(--accent)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px} .hero-meta{ display:flex;gap:32px;flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px; } .hero-meta li{ font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); padding-left:14px; border-left:3px solid var(--accent); } .hero-meta strong{ display:block; font-family:var(--disp); font-size:1.6rem; color:var(--ink); letter-spacing:0; } .hero-photo{ border:1px solid var(--ink); box-shadow:10px 10px 0 var(--accent); background:var(--dark); } .hero-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .hero-photo figcaption{ background:var(--dark); color:var(--dark-soft); font-size:.72rem; letter-spacing:.1em; padding:10px 14px; border-top:1px solid var(--dark-line); } /* ---------- Ticker ---------- */ .ticker{ background:var(--dark); color:var(--dark-ink); border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); overflow:hidden; padding:12px 0; } .ticker-track{ display:flex; gap:36px; white-space:nowrap; width:max-content; animation:ticker 28s linear infinite; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; } .ticker-track i{color:var(--accent);font-style:normal} @keyframes ticker{to{transform:translateX(-50%)}} /* ---------- Sections ---------- */ .section{padding:96px 0} .sec-head{ display:grid; grid-template-columns:90px 1fr; gap:28px; align-items:start; margin-bottom:56px; } .sec-num{ font-size:1rem; color:var(--accent); border-top:3px solid var(--accent); padding-top:10px; } .section h2{ font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:14px; } .sec-lead{ color:var(--ink-soft); max-width:62ch; } /* ---------- Leistungen: nummerierte Zeilen ---------- */ .rows{border-top:1px solid var(--ink)} .row{ display:grid; grid-template-columns:80px 1fr auto; gap:24px; align-items:start; padding:30px 12px; border-bottom:1px solid var(--line); transition:background .15s; } .row:hover{background:var(--paper-2)} .row-num{ font-size:.9rem; color:var(--accent); padding-top:6px; } .row h3{font-size:1.45rem;margin-bottom:10px} .row-body p{color:var(--ink-soft);max-width:60ch} .row-tags{ display:flex;flex-direction:column;gap:8px;align-items:flex-end; padding-top:4px; } .row-tags li{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); padding:4px 12px; background:var(--paper); white-space:nowrap; } .row:hover .row-tags li{border-color:var(--ink)} /* ---------- IT & Computer (dunkel) ---------- */ .section-dark{ background:var(--elev); color:var(--dark-ink); } .section-dark .sec-num{color:var(--accent);border-color:var(--accent)} .section-dark .sec-lead{color:var(--dark-soft)} .section-dark h2{color:var(--dark-ink)} .it-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--dark-line); } .it-item{ padding:36px 30px; border-left:1px solid var(--dark-line); } .it-item:first-child{border-left:none} .it-num{ font-size:.8rem; color:var(--accent); margin-bottom:18px; } .it-item h3{ font-size:1.3rem; margin-bottom:12px; color:var(--dark-ink); } .it-item p{ color:var(--dark-soft); font-size:.95rem; } /* Testlabor */ .testlab{ display:grid; grid-template-columns:.9fr 1.1fr; gap:0; margin-top:64px; border:1px solid var(--dark-line); background:var(--inset); } .testlab-img{border-right:1px solid var(--dark-line)} .testlab-img img{width:100%;height:100%;object-fit:cover;min-height:320px} .testlab-text{padding:44px 40px} .testlab-text h3{ font-size:1.6rem; margin-bottom:16px; color:var(--dark-ink); } .testlab-text p{color:var(--dark-soft);margin-bottom:28px} .testlab-text a[href^="http"]{color:var(--dark-ink);border-bottom:2px solid var(--accent)} /* ---------- Portfolio ---------- */ .portfolio{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .shot{ border:1px solid var(--ink); background:var(--paper); transition:transform .18s,box-shadow .18s; display:block; } .shot:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--accent)} .shot-chrome{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--ink); color:var(--paper); font-size:.68rem; letter-spacing:.06em; } .shot-chrome i{ width:9px;height:9px;border-radius:50%; background:var(--dark-soft);opacity:.5; } .shot-chrome i:first-child{background:var(--accent);opacity:1} .shot-chrome span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shot img{width:100%;aspect-ratio:16/9.4;object-fit:cover;object-position:top} .shot-meta{padding:18px 18px 20px;border-top:1px solid var(--line)} .shot-meta h3{font-size:1.1rem;margin-bottom:4px} .shot-meta span{ font-size:.72rem; color:var(--ink-soft); letter-spacing:.05em; } .note{ margin-top:40px; font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); border-left:3px solid var(--accent); padding:6px 0 6px 18px; max-width:70ch; } /* ---------- Kontakt ---------- */ .contact{background:var(--paper-2)} .contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:start; } .contact-main h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-bottom:16px} .contact-main .sec-lead{margin-bottom:36px} .mail{ display:inline-block; font-size:clamp(1.1rem,2.2vw,1.6rem); font-weight:500; color:var(--ink); border-bottom:3px solid var(--accent); padding-bottom:4px; margin-bottom:20px; } .mail:hover{color:var(--accent)} .contact-tel{font-size:.85rem;color:var(--ink-soft);letter-spacing:.04em} .contact-tel a{border-bottom:1px solid var(--ink)} .contact-side h3{ font-family:var(--mono); font-weight:500; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--line); } .contact-side h3:not(:first-child){margin-top:40px} .contact-addr{color:var(--ink-soft);margin-bottom:0} .contact-side dt{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-top:20px; } .contact-side dt:first-of-type{margin-top:0} .contact-side dd{color:var(--ink-soft);font-size:.95rem;margin-top:6px} /* ---------- Footer ---------- */ .footer{background:var(--dark);color:var(--dark-ink);padding:64px 0 28px} .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:44px; } .footer-brand .logo{color:var(--dark-ink);font-size:1.5rem} .footer-brand p{color:var(--dark-soft);margin-top:12px;max-width:32ch} .footer-nav,.footer-legal{display:flex;flex-direction:column;gap:10px} .footer-nav a,.footer-legal a{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dark-soft); transition:color .15s; } .footer-nav a:hover,.footer-legal a:hover{color:var(--accent)} .footer-nav .mono,.footer-legal .mono{font-family:var(--mono)} .footer-bottom{ display:flex; justify-content:space-between; gap:16px;flex-wrap:wrap; border-top:1px solid var(--dark-line); padding-top:22px; font-size:.72rem; color:var(--dark-soft); letter-spacing:.04em; } /* ---------- Rechtsseiten ---------- */ .page{padding:80px 0 96px} .page h1{ font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:44px; } .page-block{ margin-bottom:44px; max-width:72ch; } .page-block h2{ font-size:1.3rem; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .page-block p{color:var(--ink-soft);margin-bottom:12px} .page-block a{border-bottom:1px solid var(--accent);color:var(--ink)} /* ---------- Mobile ---------- */ @media (max-width:960px){ .nav-toggle{ display:block; background:none;border:none;cursor:pointer; width:44px;height:44px;position:relative;z-index:110; } .nav-toggle span{position:absolute;left:10px;width:24px;height:2px;background:var(--ink);transition:.2s} .nav-toggle span:nth-child(1){top:15px} .nav-toggle span:nth-child(2){top:21px} .nav-toggle span:nth-child(3){top:27px} .nav-links{ display:none; position:fixed;top:0;left:0;right:0;z-index:105; flex-direction:column;align-items:flex-start;gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:80px 28px 20px; box-shadow:0 16px 32px rgba(0,0,0,.25); } .nav-links.open{display:flex} .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);font-size:.9rem} .nav-links a:last-child{border-bottom:none} .nav-cta{background:transparent;color:var(--ink) !important} .nav-cta .ln{color:var(--accent);opacity:1} .hero-grid{grid-template-columns:1fr;gap:44px} .hero-photo{max-width:560px} .row{grid-template-columns:56px 1fr;gap:16px} .row-tags{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start;padding-top:12px} .it-grid{grid-template-columns:1fr} .it-item{border-left:none;border-top:1px solid var(--dark-line)} .it-item:first-child{border-top:none} .testlab{grid-template-columns:1fr} .testlab-img{border-right:none;border-bottom:1px solid var(--dark-line)} .testlab-img img{min-height:240px;max-height:340px} .portfolio{grid-template-columns:1fr;max-width:560px} .contact-grid{grid-template-columns:1fr;gap:48px} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} } @media (max-width:640px){ .hero{padding:56px 0 48px} .section{padding:64px 0} .sec-head{grid-template-columns:1fr;gap:12px;margin-bottom:40px} .sec-num{width:56px} .nav-inner{padding:14px 20px} .nav-links{gap:14px} .nav-links a{font-size:.68rem} .nav-links .ln{display:none} .nav-cta{padding:8px 12px} .logo{font-size:1.15rem} .hero-meta{gap:20px} .footer-grid{grid-template-columns:1fr} }