/*
Theme Name: (m)einklang
Theme URI: https://example.invalid/meinklang
Author: (m)einklang
Description: Ruhiges, responsives WordPress-Theme für die Praxis für Humanenergetik mit eigenständigen Seiten und Dropdown-Navigation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: meinklang
*/

:root {
  --mk-sage: #9daf91;
  --mk-mint: #bfd5c8;
  --mk-mint-light: #d8e8d9;
  --mk-ink: #575754;
  --mk-ink-soft: #747873;
  --mk-white: #ffffff;
  --mk-paper: #fbfcfa;
  --mk-shadow: 0 18px 45px rgba(65, 84, 71, .12);
  --mk-radius: 24px;
  --mk-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--mk-ink);
  background: var(--mk-paper);
  font-family: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: #657b5d; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #3f553a; }
img { max-width: 100%; height: auto; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(157,175,145,.65); outline-offset: 4px; }

.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed!important; top:12px; left:12px; width:auto; height:auto; margin:0; padding:10px 16px; clip:auto; z-index:9999; background:#fff; border-radius:8px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid rgba(157,175,145,.22);
  backdrop-filter: blur(12px);
}
.header-inner {
  width: min(var(--mk-width), calc(100% - 40px));
  min-height: 108px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(190px, 300px) 1fr;
  align-items: center;
  gap: 36px;
}
.site-branding { justify-self: center; width: 100%; }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo, .brand-logo { display:block; width:100%; max-width:300px; max-height:92px; object-fit:contain; margin:auto; }

.menu-toggle { display:none; border:0; background:var(--mk-mint-light); color:var(--mk-ink); padding:10px 14px; border-radius:999px; cursor:pointer; }
.primary-navigation { justify-self: end; }
.primary-navigation ul { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:2px; list-style:none; margin:0; padding:0; }
.primary-navigation li { position:relative; }
.primary-navigation a { display:block; padding:12px 10px; color:var(--mk-ink); text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.01em; border-radius:10px; }
.primary-navigation a:hover, .primary-navigation .current-menu-item > a, .primary-navigation .current-menu-ancestor > a { background:var(--mk-mint-light); color:#344538; }
.primary-navigation .menu-item-has-children > a::after { content:"  ▾"; color:var(--mk-sage); }
.primary-navigation .sub-menu { position:absolute; left:0; top:calc(100% + 2px); min-width:310px; display:block; padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s ease; background:#fff; border:1px solid rgba(157,175,145,.25); border-radius:16px; box-shadow:var(--mk-shadow); }
.primary-navigation li:hover > .sub-menu, .primary-navigation li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:none; }
.primary-navigation .sub-menu a { padding:9px 12px; white-space:normal; font-weight:500; }

.site-main { min-height:60vh; }
.hero {
  min-height: 620px;
  display:grid;
  align-items:center;
  background-color:#fff;
  background-image:linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 42%, rgba(255,255,255,.15) 72%), var(--mk-bg);
  background-repeat:no-repeat;
  background-position:center, center;
  background-size:cover;
}
.hero-inner { width:min(var(--mk-width), calc(100% - 40px)); margin:auto; padding:80px 0; }
.hero-copy { max-width:650px; }
.eyebrow { display:inline-block; margin-bottom:12px; color:#667c61; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1, h2, h3 { color:#4e514d; line-height:1.18; font-weight:500; letter-spacing:-.025em; }
h1 { margin:.1em 0 .35em; font-size:clamp(42px, 6vw, 76px); }
h2 { font-size:clamp(30px, 4vw, 48px); }
h3 { font-size:24px; }
.hero p { max-width:560px; font-size:20px; color:#66706a; }
.button { display:inline-block; margin-top:16px; padding:13px 22px; color:#fff; background:var(--mk-sage); border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 10px 25px rgba(91,119,82,.18); }
.button:hover { color:#fff; background:#7f9775; transform:translateY(-1px); }

.content-section { width:min(var(--mk-width), calc(100% - 40px)); margin:0 auto; padding:84px 0; }
.intro-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; }
.intro-mark { min-height:410px; border-radius:var(--mk-radius); background:var(--mk-mint-light) var(--mk-bg) center/cover no-repeat; box-shadow:var(--mk-shadow); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
.card { padding:28px; background:#fff; border:1px solid rgba(157,175,145,.2); border-radius:20px; box-shadow:0 10px 30px rgba(65,84,71,.07); }
.card h3 { margin-top:0; }
.card a { font-weight:700; }

.page-hero { padding:76px 0 58px; background:linear-gradient(135deg,var(--mk-mint-light),#f5faf5); border-bottom:1px solid rgba(157,175,145,.2); }
.page-hero-inner, .content-area { width:min(920px, calc(100% - 40px)); margin:auto; }
.page-hero h1 { font-size:clamp(38px,5vw,62px); }
.content-area { padding:64px 0 96px; }
.entry-content > *:first-child { margin-top:0; }
.entry-content h2 { margin-top:1.5em; }
.entry-content blockquote { margin:2em 0; padding:20px 28px; background:var(--mk-mint-light); border-left:5px solid var(--mk-sage); border-radius:0 16px 16px 0; }
.page-template-page-about .content-area { width:min(var(--mk-width), calc(100% - 40px)); }
.about-layout { display:grid; grid-template-columns:minmax(260px,390px) 1fr; gap:60px; align-items:start; }
.about-photo { width:100%; border-radius:var(--mk-radius); box-shadow:var(--mk-shadow); }
.contact-panel { padding:34px; background:#fff; border:1px solid rgba(157,175,145,.25); border-radius:var(--mk-radius); box-shadow:var(--mk-shadow); }

.site-footer { background:#BFD5C8; color:#eef5ef; }
.footer-inner { width:min(var(--mk-width), calc(100% - 40px)); margin:auto; padding:38px 0; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.site-footer a { color:#fff; }
.footer-menu { display:flex; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0; }

@media (max-width: 1080px) {
  .header-inner { grid-template-columns:220px 1fr; }
  .primary-navigation a { font-size:13px; padding:10px 7px; }
}
@media (max-width: 900px) {
  .header-inner { min-height:90px; grid-template-columns:minmax(170px,240px) auto; }
  .site-branding { justify-self:start; }
  .menu-toggle { display:block; justify-self:end; }
  .primary-navigation { display:none; position:absolute; left:20px; right:20px; top:calc(100% + 8px); max-height:calc(100vh - 120px); overflow:auto; padding:14px; background:#fff; border-radius:18px; box-shadow:var(--mk-shadow); }
  .primary-navigation.is-open { display:block; }
  .primary-navigation ul { display:block; }
  .primary-navigation a { font-size:15px; padding:11px 13px; }
  .primary-navigation .sub-menu { position:static; min-width:0; margin-left:14px; padding:2px 0 6px 12px; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--mk-mint); border-radius:0; }
  .hero { min-height:560px; background-image:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.65)),var(--mk-bg); }
  .intro-grid, .about-layout { grid-template-columns:1fr; gap:38px; }
  .cards { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .header-inner { width:calc(100% - 28px); grid-template-columns:190px auto; gap:12px; }
  .custom-logo, .brand-logo { max-height:72px; }
  .hero-inner, .content-section, .page-hero-inner, .content-area { width:calc(100% - 32px); }
  .hero { min-height:500px; }
  .hero p { font-size:18px; }
  .cards { grid-template-columns:1fr; }
  .content-section { padding:64px 0; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }