/* ========================================================================= Michel Abele IT-Consulting – Designsystem Ergänzt Bootstrap 5. Theme über [data-theme] auf . ========================================================================= */ /* ----- Theme-Variablen --------------------------------------------------- */ :root, :root[data-theme="dark"] { --accent:#35f0c0; --accent2:#6df7d6; --onAccent:#04150f; --glow:rgba(53,240,192,.40); --tint:rgba(53,240,192,.10); --bg:#080d15; --surface:#0f1825; --surfaceHover:#142235; --surface2:#0b121d; --line:#1b2737; --lineStrong:#293b51; --headerBg:rgba(8,13,21,.82); --ink:#e9f2f7; --inkBody:#bcc9d6; --ink2:#8493a4; --ink3:#586a7c; --band:#0b121d; --band2:#060a11; --bandInk:#e9f2f7; --bandInk2:#8493a4; --bandLine:#172332; --bandChipBorder:#26384d; --heroGrad:linear-gradient(180deg,#0b1422 0%,#080d15 100%); } :root[data-theme="light"] { --accent:#0a9c7d; --accent2:#0b8067; --onAccent:#ffffff; --glow:rgba(10,156,125,.18); --tint:#e2f5ef; --bg:#eef1f3; --surface:#ffffff; --surfaceHover:#f1f5f6; --surface2:#f7fafb; --line:#e0e5e9; --lineStrong:#cdd5da; --headerBg:rgba(238,241,243,.85); --ink:#0b1622; --inkBody:#26333f; --ink2:#51616d; --ink3:#84919c; /* Bänder bleiben in beiden Themes dunkel */ --band:#0b121d; --band2:#060a11; --bandInk:#e9f2f7; --bandInk2:#8493a4; --bandLine:#172332; --bandChipBorder:#26384d; --heroGrad:linear-gradient(180deg,#ffffff 0%,#eef1f3 100%); } /* ----- Basis ------------------------------------------------------------- */ html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--inkBody); font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; transition:background-color .3s ease, color .3s ease; } ::selection { background:rgba(53,240,192,.25); } a { color:inherit; } .font-display { font-family:'Space Grotesk',sans-serif; } .font-mono { font-family:'IBM Plex Mono',monospace; } /* Layout-Container (Breite wie im Original: 1180px) */ .container-site { max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,48px); } .section { padding-block:clamp(64px,8vw,104px); } .section--tight { padding-block:clamp(48px,6vw,80px); } .eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); } /* Überschriften */ .h-hero { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(38px,5.4vw,62px); line-height:1.05; letter-spacing:-1.5px; margin:0 0 22px; color:var(--ink); } .h-section { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(28px,3.4vw,42px); letter-spacing:-1px; margin:14px 0 0; color:var(--ink); } .lead { font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink2); } /* Hervorgehobener Hinweis-/Credentials-Satz in Akzentfarbe */ .lead-note { font-size:16px; line-height:1.6; margin:0; color:var(--accent); font-style:italic; } /* ----- Buttons ----------------------------------------------------------- */ .btn { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; text-decoration:none; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:16px; padding:15px 28px; border-radius:10px; transition:background-color .18s, box-shadow .18s, border-color .18s, color .18s; } .btn-sm { padding:11px 20px; font-size:15px; } .btn-accent { background:var(--accent); color:var(--onAccent); box-shadow:0 0 30px -6px var(--glow); } .btn-accent:hover { background:var(--accent2); color:var(--onAccent); box-shadow:0 0 38px -4px var(--glow); } .btn-ghost { background:transparent; color:var(--inkBody); border:1px solid var(--lineStrong); } .btn-ghost:hover { background:var(--surfaceHover); color:var(--accent); border-color:var(--accent); } .link-accent { display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0; text-decoration:none; font:600 15px 'IBM Plex Sans',sans-serif; color:var(--accent); white-space:nowrap; } .link-accent:hover { color:var(--accent2); } /* ----- Header / Navigation ---------------------------------------------- */ .site-header { position:sticky; top:0; z-index:50; background:var(--headerBg); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); } .site-header__inner { height:74px; display:flex; align-items:center; gap:28px; } .brand { display:flex; flex-direction:column; line-height:1.15; text-decoration:none; } .brand__name { font-weight:600; font-size:16px; color:var(--ink); } .brand__tag { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); } .site-nav { margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .nav-link { position:relative; text-decoration:none; font:500 15px 'IBM Plex Sans',sans-serif; color:var(--ink2); padding:8px 14px; border-radius:8px; } .nav-link:hover { color:var(--accent); } .nav-link.is-active { color:var(--ink); } .nav-link.is-active::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--accent); border-radius:2px; box-shadow:0 0 10px var(--glow); } .nav-sep { width:1px; height:24px; background:var(--line); margin:0 10px; } .nav-cta { margin-left:8px; } .theme-toggle { display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:6px 4px; } .theme-toggle__label { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink3); min-width:38px; text-align:right; } .theme-toggle__switch { width:44px; height:25px; border-radius:999px; background:#c4ccd2; position:relative; display:block; transition:background-color .2s; } .theme-toggle__knob { position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:left .2s; } [data-theme="dark"] .theme-toggle__switch { background:var(--accent); box-shadow:0 0 16px -3px var(--glow); } [data-theme="dark"] .theme-toggle__knob { left:22px; background:var(--onAccent); } .nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--lineStrong); border-radius:9px; color:var(--ink); cursor:pointer; padding:8px 11px; font-size:20px; line-height:1; } /* ----- Hintergrund-Mesh (Hero / CTA) ------------------------------------ */ .mesh { position:absolute; inset:0; overflow:hidden; pointer-events:none; } .mesh__blob { position:absolute; border-radius:50%; } .mesh__blob--1 { left:-12%; top:-25%; width:55%; height:90%; background:radial-gradient(circle,rgba(53,240,192,.30) 0%,transparent 70%); filter:blur(80px); animation:meshMove1 60s ease-in-out infinite; } .mesh__blob--2 { right:-8%; top:-12%; width:50%; height:85%; background:radial-gradient(circle,rgba(47,143,214,.26) 0%,transparent 70%); filter:blur(100px); animation:meshMove2 80s ease-in-out infinite; } .mesh__blob--3 { left:22%; bottom:-35%; width:62%; height:95%; background:radial-gradient(circle,rgba(25,198,230,.20) 0%,transparent 70%); filter:blur(120px); animation:meshMove3 90s ease-in-out infinite; } .mesh__blob--4 { left:44%; top:18%; width:42%; height:65%; background:radial-gradient(circle,rgba(31,157,107,.22) 0%,transparent 70%); filter:blur(90px); animation:meshMove4 70s ease-in-out infinite; } @keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 var(--glow);} 70%{box-shadow:0 0 0 7px transparent;} } @keyframes meshMove1 { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(5%,10%) scale(1.05);} 50%{transform:translate(10%,5%) scale(.95);} 75%{transform:translate(5%,-5%) scale(1.02);} } @keyframes meshMove2 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-10%,8%) scale(1.08);} 66%{transform:translate(-5%,-5%) scale(.95);} } @keyframes meshMove3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-8%,-10%) scale(1.1);} } @keyframes meshMove4 { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(15%,-10%) scale(.9);} 50%{transform:translate(-10%,15%) scale(1.1);} 75%{transform:translate(-15%,-5%) scale(.95);} } @media (prefers-reduced-motion: reduce) { .mesh__blob, .pulse-dot { animation:none !important; } } /* ----- Hero -------------------------------------------------------------- */ .hero { position:relative; overflow:hidden; background:var(--heroGrad); border-bottom:1px solid var(--line); } .hero__inner { position:relative; padding-block:clamp(56px,8vw,104px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; } .badge { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--accent); border-radius:999px; background:var(--tint); margin-bottom:26px; box-shadow:0 0 26px -8px var(--glow); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px; color:var(--accent); } .badge__dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); } .hero p.lead { margin:0 0 30px; max-width:560px; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } .availability { margin-top:26px; display:flex; align-items:center; gap:11px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink2); } .pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulseDot 2.4s infinite; } /* Terminal-Motiv */ .terminal { position:relative; background:#0a121e; border:1px solid #1b2a3e; border-radius:14px; box-shadow:0 30px 70px -30px #000, 0 0 50px -20px var(--glow); overflow:hidden; } .terminal__corner { position:absolute; width:16px; height:16px; z-index:2; } .terminal__corner--tl { top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); } .terminal__corner--tr { top:-1px; right:-1px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); } .terminal__corner--bl { bottom:-1px; left:-1px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); } .terminal__corner--br { bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); } .terminal__bar { display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid #16243a; background:#080f19; } .terminal__dot { width:11px; height:11px; border-radius:50%; } .terminal__title { margin-left:10px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#5e7290; } .terminal__body { padding:20px 20px 24px; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.85; color:#aebfd6; } .terminal__body .c-accent { color:var(--accent); } .terminal__body .c-white { color:#e8eefb; } .terminal__body .c-muted { color:#7e8ba3; } .terminal__body .c-warn { color:#ffd166; } /* ----- Bänder & Chips ---------------------------------------------------- */ .band { background:var(--band); color:var(--bandInk); border-block:1px solid var(--bandLine); } .band2 { background:var(--band2); position:relative; overflow:hidden; border-top:1px solid var(--bandLine); } .strip__inner { display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-block:26px; } .strip__chips { display:flex; gap:10px; flex-wrap:wrap; } .chip-mono { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--bandInk); padding:6px 13px; border:1px solid var(--bandChipBorder); border-radius:7px; } .chip { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); background:var(--tint); padding:5px 11px; border-radius:6px; } .chip--dashed { color:var(--ink3); background:none; border:1px dashed var(--lineStrong); } .chips { display:flex; gap:8px; flex-wrap:wrap; } /* ----- Section-Kopf ------------------------------------------------------ */ .section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:44px; } .section-head .h-section { max-width:640px; } /* ----- Karten ------------------------------------------------------------ */ .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; } .card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:clamp(28px,3vw,38px); transition:border-color .18s, box-shadow .18s; } .card:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 18px 44px -26px var(--glow); } .card__label { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); } .card__icon { display:flex; width:44px; height:44px; border-radius:11px; background:var(--tint); color:var(--accent); align-items:center; justify-content:center; margin:16px 0 18px; font-size:24px; } .card__title { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:22px; margin:0 0 12px; color:var(--ink); } .card__text { font-size:15.5px; color:var(--ink2); margin:0 0 20px; } /* ----- Arbeitsweise ------------------------------------------------------ */ .split { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,72px); } .feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .feature { border:1px solid var(--bandChipBorder); border-radius:12px; padding:24px; background:rgba(255,255,255,.015); } .feature h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; margin:0 0 8px; color:var(--bandInk); } .feature p { font-size:14.5px; color:var(--bandInk2); margin:0; } /* ----- Prozess ----------------------------------------------------------- */ .process { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border-top:1px solid var(--lineStrong); } .process__step { padding:30px 26px; border-right:1px solid var(--line); } .process__step:last-child { border-right:none; } .process__num { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent); } .process__step h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:14px 0 8px; color:var(--ink); } .process__step p { font-size:14.5px; color:var(--ink2); margin:0; } /* ----- CTA-Band ---------------------------------------------------------- */ .cta-band__inner { position:relative; padding-block:clamp(56px,7vw,88px); display:flex; justify-content:space-between; align-items:center; gap:36px; flex-wrap:wrap; } .cta-band h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(28px,3.4vw,40px); letter-spacing:-1px; margin:0 0 14px; color:var(--bandInk); max-width:600px; } .cta-band p { font-size:18px; color:var(--bandInk2); margin:0; } /* ----- Leistungen (Detailseite) ------------------------------------------ */ .page-hero { position:relative; overflow:hidden; } .service-block { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); } .tag-pill { display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:5px 12px; background:var(--tint); } .tag-pill__dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 7px var(--accent); } .service-block h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,2.8vw,32px); letter-spacing:-.5px; margin:18px 0 14px; color:var(--ink); } .service-block > div p { font-size:16px; color:var(--ink2); margin:0 0 18px; } .check-list { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; } .check-list li { display:flex; gap:10px; font-size:15px; color:var(--ink2); } .check-list li::before { content:"›"; color:var(--accent); font-weight:600; } .note { margin:22px 0 0; padding:14px 16px; border-left:2px solid var(--accent); background:var(--tint); border-radius:0 8px 8px 0; font-size:14px; color:var(--inkBody); line-height:1.6; } /* Zielgruppen */ .target-card { border:1px solid var(--bandChipBorder); border-radius:14px; padding:28px; background:rgba(255,255,255,.015); } .target-card h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:12px 0 14px; color:var(--bandInk); } .target-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; } .target-list li { display:flex; gap:9px; font-size:14.5px; color:var(--bandInk2); } .target-list li::before { content:"·"; color:var(--accent); } .fineprint { margin:14px 0 0; font-size:12.5px; color:var(--ink3); line-height:1.5; } /* Banner-CTA in Karte */ .inline-cta { position:relative; overflow:hidden; background:var(--band); border:1px solid var(--bandChipBorder); border-radius:16px; padding:clamp(32px,4vw,48px); display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; } .inline-cta h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.5px; margin:0; color:var(--bandInk); max-width:560px; } /* ----- Über mich --------------------------------------------------------- */ .about-hero { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(36px,5vw,72px); align-items:center; } .portrait { position:relative; aspect-ratio:4/5; border-radius:16px; border:1px solid var(--bandChipBorder); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,rgba(255,255,255,.05) 12px 24px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-family:'IBM Plex Mono',monospace; } .portrait__corner { position:absolute; width:14px; height:14px; opacity:.6; } .portrait__corner--tl { top:12px; left:12px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); } .portrait__corner--br { bottom:12px; right:12px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); } .portrait span:nth-of-type(1){ font-size:12px; color:var(--bandInk2); } .portrait span:nth-of-type(2){ font-size:11px; color:var(--ink3); } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); } .about-grid h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:24px; letter-spacing:-.5px; margin:0 0 18px; color:var(--ink); } .principles { display:flex; flex-direction:column; gap:14px; } .principles > div { display:flex; gap:14px; } .principles .b { color:var(--accent); font-weight:600; font-size:18px; } .principles p { margin:0; font-size:16px; color:var(--ink2); } .principles strong { color:var(--inkBody); } .tech-stack { display:flex; gap:9px; flex-wrap:wrap; } .tech { font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--inkBody); border:1px solid var(--lineStrong); background:var(--surface); padding:7px 13px; border-radius:7px; } .whoami { margin-top:32px; background:var(--band); border:1px solid var(--bandChipBorder); border-radius:14px; padding:28px; font-family:'IBM Plex Mono',monospace; } .whoami .prompt { font-size:13px; color:var(--accent); margin:0 0 6px; } .whoami .out { font-size:14px; color:var(--bandInk); line-height:1.7; margin:0; } /* ----- Kontakt ----------------------------------------------------------- */ .contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,64px); } .contact-info { display:flex; flex-direction:column; gap:20px; } .contact-item { display:flex; gap:14px; align-items:flex-start; } .contact-item__icon { flex:none; display:flex; width:40px; height:40px; border-radius:9px; color:var(--accent); background:var(--tint); align-items:center; justify-content:center; font-size:20px; } .contact-item p { margin:0; } .contact-item .k { font-size:16px; color:var(--inkBody); font-weight:500; } .contact-item .s { margin-top:2px; font-size:14px; color:var(--ink3); } .form-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(28px,4vw,40px); display:flex; flex-direction:column; gap:20px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field { display:flex; flex-direction:column; gap:7px; } .field > span { font-size:13px; font-weight:600; color:var(--ink2); } .field .req { color:var(--accent); } .input, .textarea { font:400 15px 'IBM Plex Sans',sans-serif; padding:12px 14px; border:1px solid var(--lineStrong); border-radius:9px; background:var(--surface2); color:var(--inkBody); outline:none; transition:border-color .15s, box-shadow .15s; } .textarea { resize:vertical; min-height:100px; } .input:focus, .textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--tint); } .topic-group { display:flex; gap:10px; flex-wrap:wrap; } .topic { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--lineStrong); border-radius:9px; background:var(--surface2); cursor:pointer; font:500 14px 'IBM Plex Sans',sans-serif; color:var(--inkBody); user-select:none; } .topic__box { width:18px; height:18px; border-radius:5px; border:1px solid var(--lineStrong); display:flex; align-items:center; justify-content:center; font-size:11px; } .topic input { position:absolute; opacity:0; pointer-events:none; } .topic input:checked + .topic__box { background:var(--accent); color:var(--onAccent); border-color:var(--accent); } .topic input:checked + .topic__box::after { content:"✓"; } .form-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .form-foot p { font-size:12.5px; color:var(--ink3); margin:0; max-width:300px; } .alert { background:var(--surface); border:1px solid var(--accent); border-radius:16px; padding:clamp(32px,4vw,52px); text-align:center; box-shadow:0 0 50px -24px var(--glow); } .alert__icon { width:56px; height:56px; border-radius:50%; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:26px; box-shadow:0 0 26px -6px var(--glow); } .alert h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:24px; margin:0 0 12px; color:var(--ink); } .alert p { font-size:16px; color:var(--ink2); margin:0 auto; max-width:380px; } .alert--error { border-color:#ff6b6b; } .alert--error .alert__icon { background:rgba(255,107,107,.12); color:#ff6b6b; box-shadow:none; } /* ----- Rechtliche Seiten ------------------------------------------------- */ .legal { max-width:780px; margin-inline:auto; } .legal h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(30px,4vw,44px); letter-spacing:-1px; margin:14px 0 10px; color:var(--ink); } .legal__meta { font-size:14px; color:var(--ink3); margin:0 0 40px; font-family:'IBM Plex Mono',monospace; } .legal__blocks { display:flex; flex-direction:column; gap:30px; } .legal h2 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:0 0 8px; color:var(--inkBody); } .legal p { margin:0; font-size:16px; color:var(--ink2); line-height:1.7; } .legal em { color:var(--ink3); } .page-head h1 { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(34px,4.6vw,54px); letter-spacing:-1.5px; margin:14px 0 18px; color:var(--bandInk); max-width:760px; } .page-head p { font-size:19px; color:var(--bandInk2); margin:0; max-width:680px; } /* ----- Footer ------------------------------------------------------------ */ .site-footer { background:var(--band2); border-top:1px solid var(--bandLine); padding-block:clamp(48px,6vw,72px); } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; } .footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:18px; font-weight:600; font-size:16px; color:var(--bandInk); } .footer-brand__tag { color:var(--bandInk2); font-weight:400; } .footer-about { font-size:15px; color:var(--bandInk2); margin:0; max-width:340px; } .footer-heading { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin:0 0 16px; } .footer-links { display:flex; flex-direction:column; gap:11px; align-items:flex-start; } .footer-links a { font:400 15px 'IBM Plex Sans',sans-serif; color:var(--bandInk2); text-decoration:none; } .footer-links a:hover { color:var(--accent); } .footer-bottom { margin-top:44px; padding-top:24px; border-top:1px solid var(--bandLine); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } .footer-bottom p { font-size:12px; color:var(--bandInk2); margin:0; } /* ----- Responsive -------------------------------------------------------- */ @media (max-width:900px) { .nav-toggle { display:inline-flex; } .site-nav { position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:6px; background:var(--headerBg); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); padding:16px clamp(20px,5vw,48px); display:none; } .site-nav.is-open { display:flex; } .nav-sep { display:none; } .nav-cta { margin-left:0; align-self:flex-start; } .nav-link.is-active::after { display:none; } } @media (max-width:860px) { .hero__inner, .split, .service-block, .about-hero, .about-grid, .contact-grid { grid-template-columns:1fr; } .check-list { grid-template-columns:1fr; } .section-head { align-items:flex-start; } } @media (max-width:560px) { .feature-grid, .form-row { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:28px; } } /* ========================================================================= michel-abele.de – Ergänzungen (Inhaltselemente & Skill-Profil) ========================================================================= */ /* Überschriften innerhalb von Karten (Lebenslauf-/Projekt-Phasen) */ .card h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; margin:22px 0 10px; color:var(--ink); } .card a:not(.link-accent):not(.btn) { color:var(--accent); text-decoration:none; } .card a:not(.link-accent):not(.btn):hover { color:var(--accent2); } /* Lauftext-Links in Bändern und Sektionen */ .band a:not(.btn):not(.link-accent), main section a:not(.btn):not(.link-accent):not(.nav-link) { color:var(--accent); text-decoration:none; } .band a:not(.btn):not(.link-accent):hover, main section a:not(.btn):not(.link-accent):not(.nav-link):hover { color:var(--accent2); } /* Skill-Profil */ .skill-legend { display:flex; flex-direction:column; gap:10px; max-width:760px; } .skill-legend__item { display:flex; gap:12px; align-items:baseline; font-size:15.5px; color:var(--ink2); } .skill-level { flex:none; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:6px; background:var(--tint); color:var(--accent); border:1px solid var(--accent); } .skill-level--2 { color:var(--ink); background:var(--surfaceHover); border-color:var(--lineStrong); } .skill-level--3 { color:var(--ink3); background:none; border:1px dashed var(--lineStrong); } .skill-group { margin-top:30px; } .skill-group h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:0 0 14px; color:var(--ink); } .skill-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .skill-table th, .skill-table td { text-align:left; padding:13px 18px; font-size:15px; border-bottom:1px solid var(--line); } .skill-table thead th { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); background:var(--surface2); } .skill-table tbody tr:last-child td { border-bottom:none; } .skill-table tbody tr:hover { background:var(--surfaceHover); } .skill-table td:first-child { color:var(--ink); font-weight:500; } .skill-table td { color:var(--ink2); } @media (max-width:560px) { .skill-table th:nth-child(3), .skill-table td:nth-child(3) { display:none; } } /* Rechtstexte – erweiterte Inhaltselemente (Datenschutz) */ .legal h3 { font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; margin:20px 0 8px; color:var(--ink); } .legal ul, .legal ol { margin:10px 0 0; padding-left:22px; color:var(--ink2); } .legal li { font-size:15.5px; line-height:1.7; margin-bottom:6px; } .legal strong { color:var(--inkBody); } .legal a { color:var(--accent); text-decoration:none; } .legal a:hover { color:var(--accent2); } .legal table { width:100%; border-collapse:collapse; margin:16px 0 0; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .legal th, .legal td { text-align:left; padding:11px 16px; font-size:14px; border-bottom:1px solid var(--line); color:var(--ink2); } .legal thead th { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); background:var(--surface2); } .legal tbody tr:last-child td { border-bottom:none; } .text-green { color:var(--accent); } .text-red { color:#ff6b6b; }