/*
Theme Name: Christian Muck Consulting
Theme URI: https://example.com/
Author: Christian Muck Consulting
Description: Individuelles One-Page-Theme für Christian Muck Consulting e.U.
Version: 1.0.0
Text Domain: christian-muck-consulting
*/

:root { --ink:#12222d; --muted:#5d6971; --line:#dce3e5; --paper:#f7f8f6; --accent:#007b85; --accent-dark:#005d65; --white:#fff; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Inter, "Segoe UI", Arial, sans-serif; font-size:17px; line-height:1.6; }
a { color:inherit; }
.wrap { width:min(var(--max), calc(100% - 48px)); margin:auto; }
.site-header { position:sticky; z-index:10; top:0; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { text-decoration:none; font-size:19px; letter-spacing:.08em; font-weight:800; text-transform:uppercase; line-height:1.15; }
.brand small { display:block; color:var(--accent); font-size:10px; letter-spacing:.17em; margin-top:5px; }
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:23px; }
.site-nav a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:650; }
.site-nav a:hover { color:var(--accent); }
.menu-toggle { display:none; background:none; border:0; font:inherit; color:var(--ink); }
.hero { background:var(--paper); border-bottom:1px solid var(--line); padding:92px 0 78px; }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:72px; }
.eyebrow { margin:0 0 18px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; margin:0; }
h1 { max-width:760px; font-size:clamp(40px,5vw,68px); }
h2 { font-size:clamp(31px,3.5vw,48px); }
h3 { font-size:21px; }
.hero-copy { max-width:680px; font-size:20px; margin:26px 0 33px; color:#3a4850; }
.button { display:inline-block; background:var(--accent); border:1px solid var(--accent); color:white; padding:13px 19px; font-weight:750; font-size:15px; text-decoration:none; transition:.2s; }
.button:hover { background:var(--accent-dark); border-color:var(--accent-dark); }
.portrait { width:100%; max-width:365px; margin-left:auto; display:block; aspect-ratio:4/5; object-fit:cover; object-position:center top; filter:grayscale(10%); }
.intro, .services, .experience, .projects, .contact { padding:104px 0; }
.intro-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; }
.section-intro { color:var(--muted); font-size:19px; margin:0 0 29px; }
.key-points { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
.key-points div { padding:21px 24px 21px 0; border-bottom:1px solid var(--line); font-weight:650; }
.key-points div:nth-child(odd) { padding-right:24px; }
.services { background:var(--ink); color:white; }
.services .eyebrow { color:#83d4d7; }
.services .section-intro { color:#c6d0d3; max-width:760px; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #3a4a52; }
.service { padding:27px 27px 25px 0; border-bottom:1px solid #3a4a52; }
.service:nth-child(3n+2),.service:nth-child(3n+3) { padding-left:26px; }
.service h3 { margin-bottom:10px; }
.service p { color:#c6d0d3; margin:0; font-size:15px; }
.experience { background:var(--paper); }
.timeline { margin:36px 0 0; border-top:1px solid var(--line); }
.timeline-item { display:grid; grid-template-columns:150px 1fr; gap:30px; padding:20px 0; border-bottom:1px solid var(--line); }
.timeline-year { color:var(--accent); font-weight:800; font-size:14px; }
.timeline-item p { color:var(--muted); margin:6px 0 0; font-size:15px; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.project { border-top:3px solid var(--accent); padding:21px 0; }
.project p { margin:8px 0 0; color:var(--muted); font-size:15px; }
.contact { background:var(--accent); color:white; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:end; }
.contact .eyebrow { color:#d5f5f4; }
.contact p { margin:19px 0 0; font-size:20px; }
.contact-details { border-top:1px solid rgba(255,255,255,.45); padding-top:22px; }
.contact-details a { text-decoration:none; font-weight:750; }
.site-footer { background:#0c1920; color:#bdc8cc; padding:28px 0; font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; }
.site-footer a { color:white; }
.legal { padding:92px 0; max-width:780px; }
.legal h1 { font-size:48px; margin-bottom:40px; }
.legal h2 { font-size:25px; margin:32px 0 12px; }
.legal p { color:#425057; }
.notice { background:#fff6df; border-left:3px solid #bc8413; padding:18px; color:#60470f; }
@media (max-width:800px) { .site-nav { display:none; } .menu-toggle { display:block; } .site-nav.open { display:block; position:absolute; top:76px; left:0; right:0; padding:22px 24px; background:#fff; border-bottom:1px solid var(--line); } .site-nav.open ul { display:grid; gap:14px; } .hero { padding:58px 0; } .hero-grid,.intro-grid,.contact-grid { grid-template-columns:1fr; gap:36px; } .portrait { margin:0; max-width:310px; } .service-grid,.projects-grid { grid-template-columns:1fr; } .service:nth-child(n) { padding:22px 0; } .timeline-item { grid-template-columns:1fr; gap:5px; } .key-points { grid-template-columns:1fr; } .intro,.services,.experience,.projects,.contact { padding:70px 0; } .footer-inner { display:block; } }