/*
Theme Name: Therapiepunkt Noch
Theme URI: https://therapiepunktnoch.de
Author: noch-digitaler
Description: Individuelles Theme fuer die Physiotherapie-Praxis Therapiepunkt Noch in Herne.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: therapiepunkt-noch
*/

/* ---------- Self-hosted fonts (kein externes Nachladen von Google-Servern, DSGVO) ---------- */
@font-face{
  font-family:'Karla';
  src:url('assets/fonts/karla-variable.woff2') format('woff2-variations'), url('assets/fonts/karla-variable.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/fonts/plusjakartasans-variable.woff2') format('woff2-variations'), url('assets/fonts/plusjakartasans-variable.woff2') format('woff2');
  font-weight:600 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#fbfdf8;
  --surface:#ffffff;
  --text:#28352a;
  --headline:#173325;
  --muted:#61715f;
  --border:#e6ebdd;
  --green:#5da83c;
  --green-dark:#3f7a29;
  --green-soft:#e9f3dd;
  --blue:#0b4174;
  --coral:#c2453e;
  --coral-soft:#fbe9e7;
  --shadow: 0 10px 30px rgba(23,51,37,.08);
}
*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
html,body{margin:0;padding:0;background:var(--bg);}
body{
  color:var(--text);
  font-family:'Karla','Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,.brand .name,.nav-cta{
  font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
}
img{ max-width:100%; height:auto; }
a{color:inherit;}
button{ font:inherit; cursor:pointer; }
svg.icon{ display:block; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--headline); color:#fff; padding:12px 20px; border-radius:0 0 4px 0; z-index:1000;
}
.skip-link:focus{ left:0; top:0; }

.wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }

.utility-bar{
  background:var(--headline);
  color:#cfe6bf;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  padding:9px 12px;
}

/* ---------- Nav ---------- */
header.site{ background:var(--bg); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ display:block; }
.custom-logo-link{ display:flex; align-items:center; }
.custom-logo{ display:block; width:auto; height:44px; }
.brand .name{ font-size:15px; font-weight:800; letter-spacing:.01em; color:var(--headline); display:block; }
.brand .tagline{ font-size:11.5px; font-weight:600; color:var(--green-dark); display:block; }
nav.links{ display:flex; align-items:center; gap:30px; font-size:14.5px; }
nav.links ul{ list-style:none; display:flex; align-items:center; gap:30px; margin:0; padding:0; }
nav.links a{ text-decoration:none; color:var(--text); font-weight:600; }
nav.links a:hover{ color:var(--green-dark); }
.nav-cta{
  background:var(--green); color:#fff !important; font-weight:700; font-size:13.5px;
  padding:11px 20px; border-radius:4px; text-decoration:none;
}
.nav-cta:hover{ background:var(--green-dark); }
.menu-toggle{ display:none; align-items:center; justify-content:center; background:none; border:0; padding:8px; color:var(--headline); cursor:pointer; }
.menu-toggle svg{ display:block; }

/* ---------- Hero ---------- */
.hero-bg{
  position:relative; isolation:isolate; margin-top:20px; border-radius:6px; overflow:hidden;
  min-height:62vh; max-height:560px; display:flex; align-items:center; justify-content:flex-end; box-shadow:var(--shadow);
}
.hero-bg img.bgphoto{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(200deg, rgba(10,20,15,.05) 0%, rgba(10,20,15,.3) 100%);
}
.panel{
  margin:40px;
  max-width:490px;
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:4px;
  padding:44px 40px;
  box-shadow:0 24px 50px rgba(8,20,14,.22);
  border-right:3px solid var(--green-dark);
}
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-dark); margin:0 0 18px;
}
h1{ font-weight:800; font-size:clamp(30px,3.6vw,42px); line-height:1.15; letter-spacing:-.01em; color:var(--headline); margin:0 0 18px; text-wrap:balance; }
.panel p.lead{ font-size:16px; line-height:1.6; color:var(--muted); margin:0 0 28px; }
.cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:9px; background:var(--headline); color:#fff !important;
  font-size:14.5px; font-weight:700; padding:14px 24px; border-radius:2px; text-decoration:none; border:0;
}
.pill:hover{ background:var(--green-dark); }
.cta-row .secondary{ font-size:14.5px; font-weight:700; color:var(--headline); text-decoration:none; border-bottom:2px solid var(--border); padding-bottom:2px; }
.cta-row .secondary:hover{ border-color:var(--green-dark); }

/* ---------- Info strip (Kontakt) ---------- */
.info-strip{
  margin-top:56px;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.info-col{ padding:24px 28px; text-align:center; }
.info-col svg.icon{ width:24px; height:24px; color:var(--green-dark); margin:0 auto 12px; }
.info-col .label{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dark); margin:0 0 8px; }
.info-col .value{ font-size:16px; font-weight:700; color:var(--headline); margin:0 0 2px; word-break:break-word; }

/* ---------- Vorbereitung erster Termin ---------- */
.prep{ padding:40px 0 56px; }
.prep h2{ font-weight:800; font-size:22px; color:var(--headline); margin:0 0 12px; }
.prep > p{ font-size:15.5px; color:var(--muted); line-height:1.6; margin:0 0 20px; }
.prep-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.prep-list li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text); line-height:1.5; }
.prep-list svg.check{ width:20px; height:20px; color:var(--green-dark); flex-shrink:0; margin-top:1px; }

/* ---------- Feature strip ---------- */
.features-wrap{ padding:0 0 56px; }
.features{ display:grid; grid-template-columns:repeat(3,1fr); }
.feature{ padding:32px 28px; text-align:center; }
.feature svg.icon{ width:30px; height:30px; color:var(--green-dark); margin:0 auto 18px; }
.feature h3{ font-weight:700; font-size:18px; margin:0 0 8px; color:var(--headline); }
.feature p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------- Gallery ---------- */
.gallery-section{ padding:8px 0 60px; }
.gallery-section .head{ max-width:none; margin-bottom:26px; }
.gallery-section h2{ font-weight:800; font-size:26px; color:var(--headline); margin:0 0 10px; }
.gallery-section .head p{ font-size:15px; line-height:1.6; color:var(--muted); margin:0; white-space:nowrap; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:170px; gap:0; border-radius:6px; overflow:hidden; }
figure.gitem{ margin:0; position:relative; height:100%; }
figure.gitem.gym{ grid-column:2; grid-row:1; }
figure.gitem.empfang{ grid-column:1; grid-row:1; }
figure.gitem.rooms{ grid-column:1 / span 2; grid-row:2; }
figure.gitem.training{ grid-column:3; grid-row:1 / span 2; }
figure.gitem img{ width:100%; height:100%; object-fit:cover; border-radius:0; display:block; box-shadow:inset 0 0 0 1px rgba(23,51,37,.12); }
figure.gitem.multi .stack{ display:flex; flex-direction:row; gap:0; height:100%; }
figure.gitem.multi .stack img{ flex:1 1 0; min-width:0; border-radius:0; }
figure.gitem figcaption{
  position:absolute; left:0; bottom:0; right:0;
  background:linear-gradient(0deg, rgba(8,16,11,.72) 0%, transparent 100%);
  color:#fff; font-size:12.5px; font-weight:600; padding:28px 14px 12px;
}

/* ---------- About teaser ---------- */
.about{ padding:0 0 64px; display:grid; grid-template-columns:0.6fr 1.4fr; gap:48px; align-items:start; }
.about .photo{ border-radius:4px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); }
.about .text{ padding-left:28px; border-left:3px solid var(--green-dark); }
.about .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about h2{ font-weight:800; font-size:24px; color:var(--headline); margin:0 0 14px; }
.about p{ font-size:15.5px; line-height:1.7; color:var(--muted); max-width:52ch; margin:0 0 18px; }
.about .credit{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-dark); margin:0 0 14px; }
.about a.more{ font-size:14.5px; color:var(--headline); text-decoration:none; font-weight:700; border-bottom:2px solid var(--border); padding-bottom:2px; }
.about a.more:hover{ border-color:var(--green-dark); }

/* ---------- Therapy methods ---------- */
.methods{ padding:0 0 64px; }
.methods .head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.methods h2{ font-weight:800; font-size:26px; color:var(--headline); margin:0; }
.methods .head a{ font-size:14px; color:var(--headline); text-decoration:none; font-weight:700; border-bottom:2px solid var(--border); padding-bottom:2px; }
.methods-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px 0; }
.method-item{ padding:0 22px; text-align:center; }
.method-item .name{ display:block; font-size:14.5px; font-weight:700; color:var(--headline); margin:0 0 6px; }
.method-item .desc{ display:block; font-size:12.5px; line-height:1.5; color:var(--muted); }

/* ---------- Karriere banner ---------- */
.karriere{
  background:var(--blue); color:#eaf1f8; border-radius:6px; margin:0 0 64px; padding:40px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.karriere .eyebrow{ color:#9fc4e6; }
.karriere h2{ font-weight:800; font-size:23px; margin:0; max-width:34ch; }
.karriere .pill{ background:var(--green); }
.karriere .pill:hover{ background:var(--green-dark); }

/* ---------- Generic page header (Ueber uns, Therapiemoeglichkeiten, Rezept, Karriere) ---------- */
.page-hero{ padding:0; margin-top:44px; }
.page-hero h1{ font-weight:800; font-size:clamp(28px,3.4vw,38px); line-height:1.15; color:var(--headline); margin:0 0 14px; text-wrap:balance; }
.page-hero .lead{ font-size:16.5px; color:var(--muted); max-width:62ch; line-height:1.6; margin:0; }
.page-hero .eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green-dark); margin:0 0 14px; }

.page-content{ padding:0 0 64px; margin-top:0; }
.page-content .entry > *:first-child{ margin-top:40px; }
.page-content .entry{ max-width:72ch; font-size:15.5px; line-height:1.75; color:var(--text); }
.page-content .entry h2{ font-size:20px; color:var(--headline); margin:40px 0 14px; font-weight:700; }
.page-content .entry p{ margin:0 0 16px; color:var(--muted); }
.page-content .entry ul{ padding-left:20px; margin:0 0 16px; color:var(--muted); }
.page-content .entry ul li::marker{ color:var(--green-dark); }
.page-content .entry li{ margin-bottom:6px; }

/* ---------- Ueber uns: vereinte Bio-Sektion (breite Textspalte, schmale Bildspalte) ---------- */
.about-page{ padding:0; margin-top:40px; display:grid; grid-template-columns:1.6fr 0.4fr; gap:40px; align-items:stretch; }
.about-page .photo{ border-radius:4px; overflow:hidden; box-shadow:var(--shadow); min-height:220px; }
.about-page .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-page .text{ padding-right:28px; border-right:3px solid var(--green-dark); }
.about-page .credit{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-dark); margin:0 0 14px; }
.about-page h2{ font-weight:700; font-size:20px; color:var(--headline); margin:40px 0 14px; }
.about-page > .text > h2:first-of-type{ margin-top:0; }
.about-page p{ font-size:15.5px; line-height:1.75; color:var(--muted); max-width:64ch; margin:0 0 16px; }

/* ---------- Therapiemoeglichkeiten: Checkliste + Akkordeon mit Detail-Spalte ---------- */
.methods-overview{ display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; padding:0; margin-top:40px; }
.methods-overview .item{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; color:var(--headline); }
.methods-overview svg.check{ width:18px; height:18px; color:var(--green-dark); flex-shrink:0; }

.accordion2{ padding:0 0 64px; margin-top:32px; }
.accordion2 .accordion-item{ border-bottom:1px solid var(--border); }
.accordion2 .accordion-item:first-child{ border-top:1px solid var(--border); }
.accordion2 summary{
  list-style:none; cursor:pointer; padding:18px 6px 18px 16px; font-weight:700; font-size:16px; color:var(--headline);
  display:flex; align-items:center; justify-content:space-between; gap:16px; border-left:3px solid transparent;
}
.accordion2 summary::-webkit-details-marker{ display:none; }
.accordion2 .accordion-item[open] summary{ border-left-color:var(--green-dark); background:var(--green-soft); }
.accordion2 summary .chev{ color:var(--muted); flex-shrink:0; transition:transform .15s; }
.accordion2 .accordion-item[open] summary .chev{ transform:rotate(180deg); color:var(--green-dark); }
.accordion2 .accordion-body{ display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:20px 16px 32px; }
.accordion2 .accordion-body h4{ font-size:16px; font-weight:700; color:var(--headline); margin:0 0 10px; }
.accordion2 .accordion-body p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0; }
.accordion2 .expect{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); margin:0 0 12px; }
.accordion2 .expect-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.accordion2 .expect-list li{ display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--text); }
.accordion2 .expect-list svg.check{ width:16px; height:16px; color:var(--green-dark); flex-shrink:0; margin-top:2px; }

/* ---------- Rezept einsenden: Schritte + Formular, rahmenlos ---------- */
.rezept-panel{ padding:0; margin-top:40px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:32px 0 40px; max-width:640px; }
.step .stepnum{ font-weight:800; font-size:22px; color:var(--green-dark); margin:0 0 10px; }
.step h3{ font-weight:700; font-size:17px; margin:0 0 6px; color:var(--headline); }
.step p{ font-size:13.5px; color:var(--muted); margin:0; }
.note{ font-size:13.5px; color:var(--muted); max-width:640px; margin:0 0 28px; }

.tpn-form{ max-width:640px; padding:0; }
.tpn-form .row{ margin-bottom:20px; }
.tpn-form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.tpn-form label{ display:block; font-weight:700; font-size:13.5px; color:var(--headline); margin-bottom:7px; }
.tpn-form input[type=text],.tpn-form input[type=email],.tpn-form input[type=tel],.tpn-form select{
  width:100%; height:48px; padding:0 14px; border:1.5px solid var(--border); border-radius:6px;
  font:inherit; font-size:14.5px; background:var(--surface); color:var(--text);
}
.tpn-form input[type=text]:focus,.tpn-form input[type=email]:focus,.tpn-form input[type=tel]:focus,.tpn-form select:focus{ outline:none; border-color:var(--green-dark); }
.tpn-form input[type=checkbox],.tpn-form input[type=radio]{ width:16px; height:16px; accent-color:var(--green-dark); }
.tpn-form .file-upload{
  display:flex; align-items:center; gap:14px; height:48px; padding:0 6px;
  border:1.5px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer;
}
.tpn-form .file-btn{ background:var(--headline); color:#fff; font-size:13px; font-weight:700; padding:9px 16px; border-radius:4px; flex-shrink:0; }
.tpn-form .file-upload:hover .file-btn{ background:var(--green-dark); }
.tpn-form .file-name{ font-size:13.5px; color:var(--muted); }
.tpn-form fieldset{ border:0; padding:0; margin:0 0 20px; }
.tpn-form legend{ font-weight:700; font-size:13.5px; color:var(--headline); margin-bottom:10px; padding:0; }
.tpn-form .check-group{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; }
.tpn-form .check-pill{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1.5px solid var(--border); border-radius:8px; padding:4px 8px; font-size:13px; font-weight:600; line-height:1.25; background:var(--surface); flex:0 0 auto; width:154px; height:48px; cursor:pointer; gap:1px; }
.tpn-form .check-pill .time{ font-size:11px; font-weight:400; color:var(--muted); }
.tpn-form .check-pill:has(input:checked) .time{ color:var(--green-dark); }
.tpn-form .check-pill.wide{ width:316px; }
.tpn-form .check-pill:has(input:checked){ border-color:var(--green-dark); background:var(--green-soft); color:var(--green-dark); font-weight:700; }
.tpn-form .check-pill input{ position:absolute; opacity:0; width:1px; height:1px; }
.tpn-form .consent{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); margin:26px 0; }
.tpn-form .consent a{ color:var(--green-dark); font-weight:600; }
.tpn-form button{ font-size:15.5px; padding:15px 30px; }
.form-notice{ border-radius:4px; padding:16px 20px; margin-bottom:24px; font-size:14.5px; font-weight:600; max-width:640px; border-left:3px solid; }
.form-notice.success{ background:var(--green-soft); color:var(--green-dark); border-color:var(--green-dark); }
.form-notice.error{ background:var(--coral-soft); color:#8f342e; border-color:var(--coral); }
.required-hint{ color:var(--coral); }

/* ---------- Karriere-Seite ---------- */
.job-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 28px; }
.job-meta span{ border:1px solid var(--border); color:var(--headline); font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:4px; }
.apply-cta{ margin:8px 0 64px; }
.karriere-hero{ background:var(--blue); color:#eaf1f8; border-radius:6px; margin-top:20px; padding:44px 40px 40px; position:relative; overflow:hidden; isolation:isolate; }
.karriere-hero .eyebrow{ color:#9fc4e6; }
.karriere-hero h1{ color:#fff; }
.karriere-hero .job-meta span{ border-color:rgba(255,255,255,.4); color:#fff; }

/* ---------- Footer ---------- */
footer.site{ border-top:1px solid var(--border); padding:32px 0 44px; font-size:13.5px; color:var(--muted); margin-top:40px; }
footer.site .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; }
footer.site address{ font-style:normal; line-height:1.6; }
footer.site .flinks{ display:flex; gap:20px; }
footer.site .flinks a{ text-decoration:none; color:var(--muted); font-weight:600; }
footer.site .flinks a:hover{ color:var(--green-dark); }

@media (max-width:800px){
  .gallery-section .head p{ white-space:normal; }
  .methods-list{ grid-template-columns:1fr; gap:24px; }
  .hero-bg{ min-height:0; max-height:none; align-items:stretch; }
  .panel{ margin:20px; padding:32px 26px; max-width:none; }
  .info-strip{ grid-template-columns:1fr; }
  .info-col{ border-bottom:1px solid var(--border); }
  .info-col:last-child{ border-bottom:none; }
  .features{ grid-template-columns:1fr; }
  .feature{ border-bottom:1px solid var(--border); }
  .feature:last-child{ border-bottom:none; }
  .gallery{ grid-template-columns:1fr; grid-auto-rows:220px; }
  figure.gitem.rooms,figure.gitem.gym,figure.gitem.empfang,figure.gitem.training{ grid-column:1; grid-row:auto; }
  .about{ grid-template-columns:1fr; }
  .about .photo{ aspect-ratio:16/9; }
  .about-page{ grid-template-columns:1fr; }
  .about-page .photo{ aspect-ratio:16/9; }
  .methods-overview{ grid-template-columns:1fr; }
  .accordion2 .accordion-body{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .wrap.nav{ position:relative; }
  .menu-toggle{ display:flex; }
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0; margin-top:1px;
    background:var(--bg); border:1px solid var(--border); border-top:0; box-shadow:var(--shadow);
    padding:8px 22px 24px; z-index:50;
  }
  nav.links.is-open{ display:flex; }
  nav.links ul{ flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  nav.links li{ width:100%; }
  nav.links a{ display:block; padding:13px 4px; border-bottom:1px solid var(--border); }
  nav.links li:last-child a{ border-bottom:0; }
  nav.links .nav-cta{ display:inline-flex; justify-content:center; margin-top:12px; }
  .wrap{ padding:0 22px; }
  .tpn-form .row-2{ grid-template-columns:1fr; }
}