/*
Theme Name: KanzleiSteinke.
Theme URI: https://ra-steinke.de
Author: KanzleiSteinke.
Author URI: https://ra-steinke.de
Description: Hochprofessionelles, helles und responsives WordPress-Theme für KanzleiSteinke. mit Fokus auf Strafrecht, Wirtschaftsrecht, Zivilrecht und Betreuungsrecht.
Version: 1.9.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: kanzleisteinke
License: GNU General Public License v2 or later
*/

:root {
  --ks-ink: #172033;
  --ks-ink-soft: #475569;
  --ks-navy: #21314f;
  --ks-gold: #b29255;
  --ks-gold-dark: #8b6d35;
  --ks-paper: #ffffff;
  --ks-warm: #f6f4ef;
  --ks-line: #dde2e8;
  --ks-shadow: 0 18px 50px rgba(23, 32, 51, .09);
  --ks-radius: 18px;
  --ks-serif: 'DIN Alternate', 'DIN 2014', 'Arial Narrow', Arial, sans-serif;
  --ks-sans: 'DIN Alternate', 'DIN 2014', 'Arial Narrow', Arial, sans-serif;
}


/* Einheitliche Hausschrift auf der gesamten Website.
   DIN Alternate wird aus dem Betriebssystem verwendet; es werden keine Schriftdateien mitgeliefert. */
body, button, input, textarea, select,
.site-header, .site-main, .site-footer,
.wp-site-blocks, .entry-content, .wp-block {
  font-family: var(--ks-sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ks-ink); background: var(--ks-paper); font-family: var(--ks-sans); font-size: 17px; line-height: 1.7; }
a { color: var(--ks-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ks-gold-dark); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 40px)); margin-inline: auto; }
.screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip: auto; width: auto; height: auto; z-index: 9999; background: #fff; padding: 12px 16px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(221,226,232,.8); backdrop-filter: blur(14px); }
.header-inner { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--ks-ink); text-decoration: none; }
.brand-logo-wrap { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; overflow: hidden; background: transparent; border: 0; outline: 0; box-shadow: none; }
.brand-logo-wrap .custom-logo-link { display: block; line-height: 0; border: 0; outline: 0; box-shadow: none; background: transparent; }
.brand-logo-wrap .custom-logo, .brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; border: 0; outline: 0; box-shadow: none; }
.brand-copy, .brand-logo-wrap a { color: inherit; text-decoration: none; border: 0; outline: 0; box-shadow: none; background: transparent; }
.brand-dot { color: var(--ks-gold); }
.brand-title { display: block; font-family: var(--ks-serif); font-size: 25px; line-height: 1; letter-spacing: -.4px; }
.brand-subtitle { display: block; margin-top: 6px; color: var(--ks-ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.main-nav ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.main-nav a { color: var(--ks-ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 21px; border: 1px solid var(--ks-navy); border-radius: 999px; background: var(--ks-navy); color: white; font-size: 14px; font-weight: 700; text-decoration: none; transition: .2s ease; }
.header-cta:hover, .button:hover { transform: translateY(-1px); background: #16233b; color: white; }
.button-light { background: white; color: var(--ks-navy); border-color: var(--ks-line); }
.button-light:hover { background: var(--ks-warm); color: var(--ks-navy); }
.menu-toggle { display:none; border:0; background:transparent; padding:10px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--ks-ink); margin:5px; }

.hero { position: relative; overflow: hidden; padding: 112px 0 92px; background: linear-gradient(135deg,#fff 0%,#fbfaf7 58%,#f1eee7 100%); }
.hero:after { content:''; position:absolute; width:480px; height:480px; right:-150px; top:-190px; border:1px solid rgba(178,146,85,.28); border-radius:50%; box-shadow:0 0 0 55px rgba(178,146,85,.05),0 0 0 115px rgba(178,146,85,.035); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.35fr .65fr; gap:76px; align-items:center; }
.eyebrow { margin:0 0 18px; color:var(--ks-gold-dark); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,h4 { font-family:var(--ks-serif); line-height:1.13; font-weight:500; letter-spacing:-.025em; }
h1 { max-width:800px; margin:0; font-size:clamp(48px,7vw,84px); }
h2 { margin:0 0 22px; font-size:clamp(34px,4.8vw,56px); }
h3 { font-size:28px; }
.hero-lead { max-width:720px; margin:27px 0 0; color:var(--ks-ink-soft); font-size:20px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-panel { padding:32px; border:1px solid rgba(178,146,85,.35); border-radius:var(--ks-radius); background:rgba(255,255,255,.78); box-shadow:var(--ks-shadow); }
.hero-panel strong { display:block; font-family:var(--ks-serif); font-size:24px; }
.hero-panel p { color:var(--ks-ink-soft); }
.hero-contact { display:grid; gap:13px; margin-top:22px; }
.hero-contact a { text-decoration:none; font-weight:700; }
.trust-strip { border-top:1px solid var(--ks-line); border-bottom:1px solid var(--ks-line); background:white; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-item { padding:25px 30px; border-right:1px solid var(--ks-line); }
.trust-item:last-child { border-right:0; }
.trust-item strong { display:block; font-family:var(--ks-serif); font-size:20px; }
.trust-item span { color:var(--ks-ink-soft); font-size:14px; }

.section { padding:96px 0; }
.section-warm { background:var(--ks-warm); }
.section-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:end; margin-bottom:48px; }
.section-head p { margin:0; color:var(--ks-ink-soft); font-size:18px; }
.practice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.practice-card { position:relative; min-height:315px; padding:36px; border:1px solid var(--ks-line); border-radius:var(--ks-radius); background:#fff; box-shadow:0 8px 28px rgba(23,32,51,.04); overflow:hidden; }
.practice-card:before { content:attr(data-number); position:absolute; right:25px; top:18px; color:rgba(178,146,85,.18); font-family:var(--ks-serif); font-size:78px; }
.practice-card h3 { margin:38px 0 18px; }
.practice-card p { color:var(--ks-ink-soft); }
.practice-card a { display:inline-flex; margin-top:12px; font-weight:750; text-decoration:none; }
.profile-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.profile-visual { min-height:530px; padding:40px; display:flex; align-items:flex-end; border-radius:var(--ks-radius); background:linear-gradient(155deg,#d9dde4,#f7f5f0); box-shadow:var(--ks-shadow); }
.profile-photo { padding:0; overflow:hidden; background:#edf0f2; }
.profile-photo img { width:100%; height:100%; min-height:530px; object-fit:cover; object-position:center 32%; filter:grayscale(100%); }
.profile-monogram { font-family:var(--ks-serif); font-size:clamp(70px,12vw,150px); color:rgba(33,49,79,.17); }
.profile-copy p { color:var(--ks-ink-soft); }
.profile-list { display:grid; gap:14px; margin:30px 0; padding:0; list-style:none; }
.profile-list li { padding-left:27px; position:relative; }
.profile-list li:before { content:'—'; position:absolute; left:0; color:var(--ks-gold); }
.quote { padding:55px; border-left:4px solid var(--ks-gold); background:white; box-shadow:var(--ks-shadow); }
.quote p { margin:0; font-family:var(--ks-serif); font-size:clamp(27px,4vw,42px); line-height:1.35; }

.contact-section { padding:96px 0; background:var(--ks-navy); color:white; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:78px; }
.contact-section .eyebrow { color:#d9bd84; }
.contact-section h2 { color:white; }
.contact-section p { color:#d8deea; }
.contact-card { padding:36px; border:1px solid rgba(255,255,255,.16); border-radius:var(--ks-radius); background:rgba(255,255,255,.05); }
.contact-card a { color:white; }
.contact-table { display:grid; gap:16px; }
.contact-row { display:grid; grid-template-columns:110px 1fr; gap:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.13); }
.contact-row span:first-child { color:#b8c1d3; font-size:13px; text-transform:uppercase; letter-spacing:.1em; }

.site-main { min-height:55vh; }
.page-hero { padding:78px 0 50px; background:var(--ks-warm); border-bottom:1px solid var(--ks-line); }
.page-hero h1 { font-size:clamp(42px,6vw,68px); }
.content-area { padding:70px 0 100px; }
.entry-content > * { max-width:780px; margin-left:auto; margin-right:auto; }
.entry-content > .alignwide { max-width:1180px; }
.entry-content h2 { margin-top:55px; font-size:40px; }
.entry-content h3 { margin-top:40px; }
.entry-content p, .entry-content li { color:#334155; }
.entry-content blockquote { padding:28px 34px; border-left:4px solid var(--ks-gold); background:var(--ks-warm); }
.posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.post-card { border:1px solid var(--ks-line); border-radius:var(--ks-radius); overflow:hidden; background:#fff; }
.post-card-copy { padding:26px; }
.post-card h2 { font-size:27px; }
.post-card time { color:var(--ks-ink-soft); font-size:13px; }

.site-footer { padding:58px 0 25px; background:#111827; color:#cbd5e1; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:60px; }
.site-footer .brand { color:white; }
.site-footer h4 { margin:0 0 17px; color:white; font-family:var(--ks-sans); font-size:13px; text-transform:uppercase; letter-spacing:.12em; }
.site-footer a { color:#dce3ee; text-decoration:none; }
.site-footer ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.footer-bottom { margin-top:45px; padding-top:22px; border-top:1px solid rgba(255,255,255,.11); display:flex; justify-content:space-between; gap:20px; font-size:13px; }

@media (max-width: 920px) {
  .menu-toggle { display:block; }
  .header-cta { display:none; }
  .main-nav { display:none; position:absolute; left:0; right:0; top:96px; background:#fff; border-bottom:1px solid var(--ks-line); padding:20px; }
  .main-nav.is-open { display:block; }
  .main-nav ul { align-items:stretch; flex-direction:column; gap:0; }
  .main-nav a { display:block; padding:12px 4px; }
  .hero-grid,.section-head,.profile-grid,.contact-grid { grid-template-columns:1fr; gap:42px; }
  .hero { padding-top:76px; }
  .hero-panel { max-width:560px; }
  .profile-visual { min-height:380px; }
  .profile-photo img { min-height:380px; }
  .posts-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size:16px; }
  .container,.narrow { width:min(100% - 28px,1180px); }
  .brand-subtitle { display:none; }
  .brand-logo-wrap { width:48px; height:48px; flex-basis:48px; }
  .brand-title { font-size:21px; }
  .hero { padding:60px 0 70px; }
  h1 { font-size:44px; }
  .hero-lead { font-size:18px; }
  .trust-grid,.practice-grid,.posts-grid,.footer-grid { grid-template-columns:1fr; }
  .trust-item { border-right:0; border-bottom:1px solid var(--ks-line); }
  .section,.contact-section { padding:72px 0; }
  .practice-card { min-height:auto; padding:28px; }
  .quote { padding:34px 28px; }
  .contact-row { grid-template-columns:1fr; gap:4px; }
  .footer-bottom { flex-direction:column; }
}

/* Rechtsgebiets-Unterseiten */
.practice-hero { padding:88px 0 82px; background:linear-gradient(135deg,#f7f4ee 0%,#fff 68%); border-bottom:1px solid var(--ks-line); }
.practice-hero-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.45fr); gap:80px; align-items:end; }
.practice-hero h1 { max-width:900px; margin-bottom:28px; font-size:clamp(43px,5.7vw,72px); line-height:1.04; }
.practice-lead { max-width:850px; margin:0 0 34px; color:var(--ks-ink-soft); font-size:19px; line-height:1.75; }
.practice-side-note { padding:30px 0 8px 30px; border-left:2px solid var(--ks-gold); }
.practice-side-note span { display:block; margin-bottom:28px; color:var(--ks-gold); font-size:13px; font-weight:800; letter-spacing:.14em; }
.practice-side-note strong { display:block; margin-bottom:10px; font-size:21px; }
.practice-side-note p { margin:0; color:var(--ks-ink-soft); font-size:15px; }
.practice-content-section { padding:90px 0; }
.practice-content-section.practice-alt { background:var(--ks-warm); border-top:1px solid var(--ks-line); border-bottom:1px solid var(--ks-line); }
.practice-content-section h2 { max-width:780px; margin-bottom:24px; font-size:clamp(34px,4.3vw,52px); }
.practice-copy { color:#334155; font-size:18px; line-height:1.8; }
.service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 42px; margin:42px 0 0; padding:0; list-style:none; border-top:1px solid var(--ks-line); }
.service-list li { position:relative; padding:20px 12px 20px 28px; border-bottom:1px solid var(--ks-line); color:#263449; font-weight:650; }
.service-list li:before { content:'—'; position:absolute; left:0; color:var(--ks-gold); }
.practice-cta { padding:86px 0; background:var(--ks-navy); color:#fff; }
.practice-cta .eyebrow { color:#d9bd84; }
.practice-cta h2 { color:#fff; font-size:clamp(36px,5vw,56px); }
.practice-cta p { max-width:820px; color:#d8deea; font-size:18px; }
.practice-cta .button { border-color:#fff; }
.practice-cta .button-light { background:#fff; color:var(--ks-navy); }
@media (max-width:920px) { .practice-hero-grid { grid-template-columns:1fr; gap:42px; } .practice-side-note { max-width:580px; } }
@media (max-width:640px) { .practice-hero { padding:62px 0 60px; } .practice-content-section,.practice-cta { padding:68px 0; } .service-list { grid-template-columns:1fr; } .practice-lead,.practice-copy,.practice-cta p { font-size:17px; } }