/* =========================================================
   JK-Wertermittlung – Persönliche Bausteine (Release Oktober 2026)
   Ergänzt base.css / startseite.css / leistungsseite.css.
   Ändert keine bestehenden Inhalte, nur zusätzliche Elemente.
   ========================================================= */
:root{--jk-soft:#f1f7ee;--jk-line2:#d9e8d2;--jk-shadow:0 10px 30px rgba(16,29,59,.12)}

.jk-face{border-radius:50%;object-fit:cover;object-position:50% 50%;flex:none;display:block}

/* Telefonnummern: Unterstreichung als Textdekoration, damit die Grundlinie stimmt */
main a.jk-num:not(.btn):not(.more),.jk-num{color:var(--navy);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
  text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-skip-ink:none}
main a.jk-num:not(.btn):not(.more):hover{text-decoration-thickness:3px}

/* ---------- 1. Kopfzeile: Gesicht + Nummer (ab 1300 px) ---------- */
.jk-hc{display:none}
@media(min-width:1300px){
  .head nav{gap:22px}
  .jk-hc{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border:1px solid var(--line);border-radius:999px;white-space:nowrap;color:var(--navy);transition:border-color .15s}
  .jk-hc img{width:38px;height:38px}
  .jk-hc span{display:flex;flex-direction:column;line-height:1.15}
  .jk-hc small{font-size:11.5px;color:var(--muted)}
  .jk-hc b{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
  .jk-hc:hover{border-color:var(--green2)}
}

/* ---------- 2. Kontaktleiste: Handy unten, Desktop als Karte ---------- */
.jk-bar{position:fixed;z-index:900;display:flex;align-items:stretch;background:#fff;color:var(--navy)}
.jk-bar a{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.jk-bar .jk-call b{font-size:15px;display:block;line-height:1.2}
.jk-bar .jk-call small{font-size:12.5px;color:var(--muted);display:block;font-variant-numeric:tabular-nums}
.jk-bar .jk-msg{font-weight:700;font-size:15px}
@media(max-width:900px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .jk-bar{left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,29,59,.08)}
  .jk-bar .jk-call{flex:1 1 auto;padding:0 14px 0 16px;min-width:0}
  .jk-bar .jk-call img{width:40px;height:40px}
  .jk-bar .jk-msg{flex:0 0 auto;padding:0 20px;border-left:1px solid var(--line)}
  .jk-bar .jk-call .jk-ico{margin-left:auto;width:42px;height:42px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
  .jk-bar .jk-ico svg{width:19px;height:19px}
}
@media(min-width:901px){
  .jk-bar{right:24px;bottom:24px;border:1px solid var(--line);border-radius:999px;box-shadow:var(--jk-shadow);padding:6px;gap:4px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
  .jk-bar.is-on{opacity:1;transform:none;pointer-events:auto}
  html:not(.jk-js) .jk-bar{opacity:1;transform:none;pointer-events:auto}
  .jk-bar .jk-call{padding:2px 18px 2px 2px;border-radius:999px}
  .jk-bar .jk-call img{width:46px;height:46px}
  .jk-bar .jk-ico{display:none}
  .jk-bar .jk-msg{background:var(--green);color:#071108;border-radius:999px;padding:0 22px}
  .jk-bar .jk-call:hover b{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:4px}
}
@media(prefers-reduced-motion:reduce){.jk-bar{transition:none}}

/* ---------- 3. Persönliche Notiz unter der H1 ---------- */
.jk-note{display:flex;gap:18px;align-items:flex-start;margin:4px 0 28px;padding:20px 22px 18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);max-width:760px}
.jk-note .jk-face{width:68px;height:68px}
.jk-note-body{min-width:0}
.jk-note p{margin:0;font-size:17.5px;line-height:1.6;color:var(--navy)}
.jk-note p+p{margin-top:8px}
.jk-note p.jk-hook{font-weight:700}
.jk-note p.jk-sig{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.4}
.jk-note .jk-sig b{color:var(--navy)}
@media(max-width:767px){
  .jk-note{display:block;padding:16px 16px 14px;margin:0 0 22px}
  .jk-note .jk-face{float:left;width:50px;height:50px;margin:3px 12px 4px 0}
  .jk-note p{font-size:16.5px}
  .jk-note p.jk-sig{clear:both;padding-top:2px}
}

/* ---------- 4. "Sprechen wir darüber." in Abschluss-Blöcken ---------- */
.jk-direct{display:flex;align-items:center;gap:16px;margin-top:22px}
.jk-direct .jk-face{width:60px;height:60px;border:3px solid var(--green)}
.jk-direct strong{display:block;font-size:20px;line-height:1.2}
.jk-direct span{display:block;margin-top:3px;font-size:16px;line-height:1.45}
.final-cta .jk-direct strong,.contact .jk-direct strong{color:#fff}
.final-cta .jk-direct span,.contact .jk-direct span{color:#dce2ed}
main .final-cta a.jk-num:not(.btn):not(.more),main .contact a.jk-num:not(.btn):not(.more){color:#fff}
.location-contact .jk-direct strong{color:var(--navy)}

/* ---------- 5. Startseite: Einstieg ---------- */
.hero .jk-provo{margin:0;font-size:clamp(38px,2.6vw + 18px,60px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--navy);text-wrap:balance}
.hero .jk-provo em{font-style:normal;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:.075em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.hero .jk-sub{margin:16px 0 0;font-size:clamp(20px,.6vw + 16px,25px);line-height:1.3;font-weight:700;color:var(--green2)}
.hero h1.jk-h1{margin-top:30px;font-size:clamp(22px,.5vw + 18px,27px);line-height:1.2;white-space:normal;color:var(--navy)}
.hero .jk-h1+.lead{margin-top:8px}
.hero .jk-tel{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;margin:14px 0 6px;font-size:15.5px;color:var(--text)}
@media(max-width:767px){
  .hero .photo{height:clamp(220px,34vh,290px)}
  .hero .photo>img{object-position:50% 16%}
  .hero .jk-provo{font-size:clamp(34px,9.4vw,42px)}
  .hero h1.jk-h1{margin-top:22px}
}

/* ---------- 6. Startseite: Orientierung (natives Aufklappen, JS nur für Desktop-Ansicht) ---------- */
.jk-orient{background:#fff;padding:84px 0 70px;border-top:1px solid var(--line)}
.jk-orient .kicker{color:var(--green2);font-weight:700}
.jk-orient .jk-o-title{margin:0;font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.jk-orient .jk-o-intro{margin:12px 0 0;max-width:760px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text)}
.jk-o-grid{margin-top:36px}
.jk-o-list{display:flex;flex-direction:column;gap:10px}
.jk-o-item>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid var(--line);background:#fff;color:var(--navy);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.jk-o-item>summary::-webkit-details-marker{display:none}
.jk-o-item>summary::marker{content:""}
.jk-o-item>summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.jk-o-item>summary:hover{border-color:var(--green2)}
.jk-o-item>summary .t{display:block;font-size:18px;font-weight:700;line-height:1.25}
.jk-o-item>summary .s{display:block;margin-top:3px;font-size:14px;color:var(--muted);line-height:1.35}
.jk-o-item>summary .ar{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--light);font-weight:700;transition:transform .2s,background .15s}
.jk-o-item[open]>summary,.jk-o-item.is-active>summary{border-color:var(--green2);background:var(--jk-soft);box-shadow:inset 5px 0 0 var(--green)}
.jk-o-item[open]>summary .ar,.jk-o-item.is-active>summary .ar{background:var(--green)}
.jk-o-panel,.jk-o-reply{background:var(--jk-soft);padding:26px 28px 24px;border:1.5px solid var(--jk-line2)}
.jk-o-from{margin:0 0 12px;font-size:14px;color:var(--muted)}
.jk-o-from b{color:var(--navy)}
.jk-o-panel p,.jk-o-reply p{margin:0 0 12px;font-size:17px;line-height:1.65;color:var(--text)}
.jk-o-panel p b,.jk-o-reply p b{color:var(--navy)}
.jk-o-talk{margin:18px 0 0!important;padding-top:16px;border-top:1px solid var(--jk-line2);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.jk-o-talk strong{font-size:19px;color:var(--navy);line-height:1.3}
.jk-o-talk a.jk-num{font-size:17px}
main .jk-o-talk a.jk-o-mail:not(.btn):not(.more){color:var(--navy);font-weight:600;font-size:16px;text-decoration:underline;text-decoration-color:var(--jk-line2);text-decoration-thickness:2px;text-underline-offset:4px}
.jk-o-links{margin:14px 0 0!important;font-size:15px!important;line-height:1.7!important;color:var(--muted)!important}
main .jk-o-links a:not(.btn):not(.more),main .jk-o-panel p a:not(.btn):not(.more):not(.jk-num),main .jk-o-reply p a:not(.btn):not(.more):not(.jk-num){color:var(--green2);font-weight:700;text-decoration:none}
main .jk-o-links a:not(.btn):not(.more):hover{text-decoration:underline}
.jk-o-links .p{white-space:nowrap}
.jk-o-note{margin:24px 0 0;font-size:var(--fs-meta);line-height:1.5;color:var(--muted);max-width:820px}
.jk-o-reply{display:none}

/* Desktop mit JavaScript: links Anliegen, rechts Antwort */
@media(min-width:901px){
  .jk-js .jk-o-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:30px;align-items:start}
  .jk-js .jk-o-reply{display:block;position:sticky;top:24px}
  .jk-js .jk-o-item>.jk-o-panel{display:none}
  .jk-js .jk-o-item.is-active>summary .ar{transform:translateX(3px)}
  .jk-o-panel .jk-o-from{display:none}
}
/* Handy / ohne JavaScript: Akkordeon */
@media(max-width:900px){
  .jk-orient{padding:56px 0 50px}
  .jk-o-grid{margin-top:26px}
  .jk-o-list{gap:8px}
  .jk-o-item>summary{padding:14px 14px 14px 16px}
  .jk-o-item>summary .t{font-size:17px}
  .jk-o-item>summary .s{display:none}
  .jk-o-item>summary .ar{transform:rotate(90deg)}
  .jk-o-item[open]>summary .ar{transform:rotate(-90deg)}
  .jk-o-panel{border-top:0;padding:18px 18px 18px}
  .jk-o-panel p{font-size:16.5px}
  .jk-o-from{display:none}
}

/* ---------- 7. Lange Wörter in Seiten-H1 sauber trennen (nur Darstellung) ---------- */
.page-hero h1{hyphens:auto;-webkit-hyphens:auto}