/*
Theme Name: Kanzlei Hartlieb
Theme URI: https://www.kanzlei-hartlieb.de
Author: Kanzlei Hartlieb
Description: Klassisches Onepager-Theme in Schwarz, Weiß und Grau für die Kanzlei Hartlieb, Rechtsanwalt.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: Proprietary
Text Domain: kanzlei-hartlieb
*/

html{scroll-behavior:smooth}
body{margin:0}
.kh section[id]{scroll-margin-top:84px}
.admin-bar .kh-nav{top:32px}
@media(max-width:782px){.admin-bar .kh-nav{top:46px}}
.kh{--ink:#111;--text:#2b2b2b;--mute:#6b6b6b;--line:#d9d9d9;--soft:#f4f4f2;--paper:#fff;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--text);line-height:1.75;font-size:17px;background:var(--paper)}
.kh *{box-sizing:border-box;font-family:inherit}
.kh h1,.kh h2,.kh h3{color:var(--ink);font-weight:300;line-height:1.25;margin:0;letter-spacing:.01em}
.kh a{color:inherit}
.kh-wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.kh-nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.kh-nav .kh-wrap{display:flex;justify-content:space-between;align-items:center;min-height:84px;flex-wrap:wrap;gap:8px}
.kh-logo{display:block;line-height:0}
.kh-logo img{height:54px;width:auto;display:block}
.kh-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.kh-nav ul a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent}
.kh-nav ul a:hover{border-color:var(--ink)}
.kh-hero{position:relative;overflow:hidden;background:#141414;color:#fff;display:flex;align-items:center;min-height:680px;padding:120px 0}
.kh-hero::before{content:"";position:absolute;inset:0;background:url(assets/images/hero.jpg) 25% 30%/cover no-repeat;filter:grayscale(1) contrast(.92) brightness(.78)}
.kh-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,14,.15) 0%,rgba(14,14,14,.45) 42%,rgba(14,14,14,.86) 66%,rgba(14,14,14,.94) 100%)}
.kh-hero .kh-wrap{position:relative;z-index:2;width:100%}
.kh-hero-txt{margin-left:auto;width:48%;text-align:left}
.kh-hero h1{color:#fff;font-size:clamp(32px,4.1vw,52px);margin:0 0 26px;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.kh-hero p{color:#dcdcdc;margin:0 0 44px;font-size:18px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.kh-rule{width:56px;height:1px;background:#a8a8a8;margin:0 0 30px}
.kh-btn{display:inline-block;border:1px solid #fff;color:#fff;text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:16px 38px;transition:.25s}
.kh-btn:hover{background:#fff;color:#111}
.kh-sec{padding:110px 0}
.kh-sec.alt{background:var(--soft)}
.kh-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-bottom:14px;display:block}
.kh-sec h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:26px}
.kh-two{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:start}
.kh-two p{margin:0 0 18px}
.kh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.kh-card{background:#fff;padding:42px 34px}
.kh-card span{color:var(--mute);font-size:14px;letter-spacing:.1em;display:block;margin-bottom:18px}
.kh-card h3{font-size:22px;margin-bottom:12px}
.kh-card p{margin:0;color:var(--mute);font-size:15.5px}
.kh-person{display:grid;grid-template-columns:.8fr 1.4fr;gap:70px;align-items:start;margin-top:50px}
.kh-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;background:#cfcfcd;display:block}
.kh-person h3{font-size:28px;margin-bottom:8px}
.kh-person em{font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:block;line-height:1.9}
.kh-person p{margin:22px 0 0}
.kh-cv{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.kh-cv li{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.kh-cv b{display:inline-block;min-width:112px;font-weight:400;color:var(--ink);letter-spacing:.04em}
.kh-contact{background:#141414;color:#d0d0d0}
.kh-contact h2,.kh-contact h3{color:#fff}
.kh-contact .kh-eyebrow{color:#8f8f8f}
.kh-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:46px;border-top:1px solid #3a3a3a;padding-top:46px}
.kh-cols h3{font-size:13px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px;color:#9a9a9a}
.kh-cols p{margin:0;font-size:16px}
.kh-cols a{text-decoration:none;border-bottom:1px solid #666}
.kh-foot{background:#0b0b0b;color:#8a8a8a;font-size:13px;padding:28px 0;text-align:center}
.kh-foot a{margin:0 14px;text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.kh-foot a:hover{color:#fff}
@media(max-width:860px){
 .kh-two,.kh-grid,.kh-person,.kh-cols{grid-template-columns:1fr}
 .kh-two{gap:20px}.kh-person{gap:34px}.kh-sec{padding:76px 0}
 .kh-hero{min-height:0;padding:96px 0 84px}
 .kh-hero::before{background-position:30% 30%}
 .kh-hero::after{background:linear-gradient(180deg,rgba(14,14,14,.55) 0%,rgba(14,14,14,.82) 100%)}
 .kh-hero-txt{width:100%;text-align:center}
 .kh-rule{margin:0 auto 26px}
 .kh-nav .kh-wrap{min-height:0;padding-top:12px;padding-bottom:10px}
 .kh-logo img{height:40px}
 .kh-wrap{padding-left:18px;padding-right:18px}
 .kh-nav ul{gap:11px;flex-wrap:nowrap;width:100%;justify-content:space-between}
 .kh-nav ul a{font-size:10.5px;letter-spacing:.05em;line-height:1.4;padding:4px 0}
 .kh-photo{max-width:380px}
 .kh-cv b{display:block;min-width:0}
}

/* Unterseiten (Impressum, Datenschutz, ...) */
.kh-page{max-width:780px}
.kh-page h1{font-size:clamp(30px,4vw,44px);margin-bottom:34px}
.kh-page h2{font-size:26px;margin:44px 0 14px}
.kh-page h3{font-size:20px;margin:30px 0 10px}
.kh-page p,.kh-page li{margin:0 0 16px}
.kh-page ul,.kh-page ol{padding-left:22px;margin:0 0 20px}
.kh-page a{text-decoration:underline}