/*
Theme Name: The Here & Now
Theme URI: https://the-here-now.com
Author: Wenke · HP Consulting
Description: Bespoke block theme for Michaela Christine Wolf — "The Here & Now", a conscious business ecosystem. Palette "Sage Deep". Editorial, reduced, premium.
Version: 0.2.5
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: the-here-now
*/

/* Ergänzende Marken-Stile, die theme.json nicht abbildet.
   Tokens kommen als CSS-Variablen aus theme.json (--wp--preset--color--*). */

/* Eyebrow / Label */
.is-style-eyebrow,
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold-text);
  font-weight: 500;
}

/* Markenname immer Versal */
.brand { text-transform: uppercase; }

/* Display-Headline (H1) feiner Buchstabenabstand */
h1, .is-style-display {
  letter-spacing: -0.015em;
  line-height: 1.06;
}

/* Kursiver Akzent in Headlines (Sage) */
.ital { font-style: italic; color: var(--wp--preset--color--sage); }

/* Gold-Akzentlinie (z. B. Impact-Underline) */
.is-style-gold-rule {
  width: 28px; height: 2px;
  background: var(--wp--preset--color--gold);
  border: 0;
}

/* =========================================================
   Pattern-Stützstile (Sektionen aus patterns/*.php)
   Tokens kommen als CSS-Variablen aus theme.json.
   ========================================================= */

/* Sekundärer Text-CTA (Gold-Underline statt Buttonfläche) */
.wp-block-button.is-style-text-link .wp-block-button__link {
  background: none;
  color: var(--wp--preset--color--ink);
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--gold);
  border-radius: 0;
  padding: 0 0 3px;
}
.wp-block-button.is-style-text-link .wp-block-button__link:hover {
  background: none;
  color: var(--wp--preset--color--gold-text);
}
.wp-block-button.is-style-text-link-light .wp-block-button__link {
  color: var(--wp--preset--color--paper);
}

/* Hero — flaches Bild-Band (16:7 wie Prototyp) + Bildunterschrift */
.hero-band-img { position: relative; }
.hero-band-img img { border-radius: 4px; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 46% 26%; }
@media (max-width: 781px) { .hero-band-img img { aspect-ratio: 4 / 3; } }
/* Dunkler Verlauf unten, damit die weiße Bildunterschrift sicher lesbar bleibt */
.hero-band-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  border-radius: 0 0 4px 4px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(36,55,51,.66));
}
.hero-band-img figcaption {
  position: absolute; right: 28px; bottom: 22px; margin: 0; z-index: 2;
  text-align: right; color: #fff;
  font-size: 11px; letter-spacing: 0.06em;
  text-shadow: 0 1px 12px rgba(0,0,0,.75), 0 0 24px rgba(0,0,0,.45);
}

/* Angebots-Karten */
.card {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 4px;
  padding: 34px 32px;
  background: var(--wp--preset--color--paper);
  transition: border-color .25s;
}
.card:hover { border-color: var(--wp--preset--color--sage); }
.card .tag {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-text); font-weight: 500; margin: 0;
}
.card h3 { color: var(--wp--preset--color--forest); margin: 14px 0 12px; }
.card .price {
  color: var(--wp--preset--color--ink); font-size: 14px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.card.flagship {
  border-color: var(--wp--preset--color--gold);
  background: linear-gradient(180deg, rgba(194,162,104,.14), var(--wp--preset--color--paper) 62%);
}
.card.card-full { width: 100%; }
.entry-note a {
  color: var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--gold);
}

/* Value Ladder */
.value-ladder { position: relative; margin-top: 40px; }
.value-ladder .vl-track {
  position: absolute; left: 0; right: 0; top: 7px; height: 1px;
  background: var(--wp--preset--color--line);
}
.value-ladder .vl-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: space-between; gap: 8px;
}
.value-ladder .vl-step {
  position: relative; flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.value-ladder .vl-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 1px solid var(--wp--preset--color--gold);
}
.value-ladder .vl-peak .vl-dot { background: var(--wp--preset--color--gold); }
.value-ladder .vl-label {
  font-size: 14px; color: var(--wp--preset--color--ink-soft); letter-spacing: 0.01em;
}
.value-ladder .vl-peak .vl-label { color: var(--wp--preset--color--gold-text); font-weight: 500; }

/* For whom */
.whom-list { list-style: none; margin: 0; padding: 0; }
.whom-list li {
  padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
}
.chips .chip {
  border: 1px solid var(--wp--preset--color--line); border-radius: 2px;
  padding: 12px 18px; margin: 0;
  background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
}

/* Ecosystem-Diagramm */
.eco-svg { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.eco-svg .ray { stroke: var(--wp--preset--color--gold); stroke-width: 1; opacity: .16; }
.eco-svg .ring { fill: none; stroke: var(--wp--preset--color--line); stroke-width: 1; }
.eco-svg .node { fill: var(--wp--preset--color--gold); }
.eco-svg .nodelabel {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--wp--preset--color--ink-soft);
}
.eco-svg .center-disc { fill: var(--wp--preset--color--forest); }
.eco-svg .center-text {
  font-family: var(--wp--preset--font-family--spectral);
  font-style: italic; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; fill: var(--wp--preset--color--paper);
}

/* About — Bild + Signatur + Impact (Editorial Underline) */
.about-figure img { border-radius: 3px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.impact { gap: 22px 18px; }
.impact .impact-num {
  font-weight: 300; font-size: 31px; line-height: 1; margin: 0;
  color: var(--wp--preset--color--paper); font-variant-numeric: tabular-nums;
}
.impact .impact-item .is-style-gold-rule { width: 24px; margin: 10px 0 9px; }
.impact .impact-lbl { color: #b9c1b8; line-height: 1.45; margin: 0; }

/* Testimonials */
.quote {
  border: 1px solid var(--wp--preset--color--line); border-radius: 4px;
  padding: 32px 30px; background: var(--wp--preset--color--paper);
}
.quote .quote-text { color: var(--wp--preset--color--ink); line-height: 1.7; }
.quote .quote-who strong { font-weight: 500; color: var(--wp--preset--color--ink); display: block; line-height: 1.3; }
/* Avatar links, Name direkt über Rolle (kein Abstand dazwischen) — wie Prototyp */
.quote .quote-who {
  color: var(--wp--preset--color--ink-soft); line-height: 1.4;
  position: relative; padding-left: 50px; min-height: 38px;
  display: flex; flex-direction: column; justify-content: center;
}
.quote .quote-who br { display: none; }
/* Goldener Avatar-Punkt */
.quote .quote-who::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wp--preset--color--sage), var(--wp--preset--color--gold));
}

/* FAQ-Accordion (+/–) */
.faq-item {
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 8px 0;
}
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 40px 16px 0;
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 18px; font-weight: 400; color: var(--wp--preset--color--forest);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--wp--preset--color--gold); font-size: 22px; line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }

/* FAQ-Kategorie-Label: kleines Gold-Label (eyebrow) statt großer Serif-Headline — wie Prototyp.
   Die Kategorie steht in der schmalen linken Spalte (28%). */
.faqsec .wp-block-column[style*="28%"] h2 {
  font-family: var(--wp--preset--font-family--outfit) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500;
  color: var(--wp--preset--color--gold-text); line-height: 1.5; margin-top: 4px;
}

/* Clarity Call — 2-spaltig wie Prototyp: links What-to-expect + Schritte, rechts Buchungskarte */
.clarity-grid { align-items: start; }
.step-num { font-size: 34px; line-height: 1; margin: 0 0 8px; }

/* Schritte (1/2/3) nebeneinander */
.cc-steps .cc-step { flex: 1; min-width: 140px; }
.cc-steps .cc-step .cc-n {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 26px; color: var(--wp--preset--color--gold-text); line-height: 1; margin: 0 0 6px;
}
.cc-steps .cc-step h4 { font-size: 15px; color: var(--wp--preset--color--forest); margin: 0 0 4px; }
.cc-steps .cc-step p { font-size: 13.5px; color: var(--wp--preset--color--ink-soft); margin: 0; }

/* Buchungskarte (rechte Spalte), sticky */
.bookcard {
  border: 1px solid var(--wp--preset--color--line); border-radius: 10px;
  background: var(--wp--preset--color--paper);
  box-shadow: 0 28px 60px -42px rgba(46,69,64,.45);
  padding: 24px; position: sticky; top: 100px;
}
.bookcard .bc-head { font-family: var(--wp--preset--font-family--spectral); font-size: 21px; color: var(--wp--preset--color--forest); margin: 0; }
.bookcard .bc-sub { font-size: 13px; color: var(--wp--preset--color--ink-soft); margin: 5px 0 14px; }
.bookcard .bc-foot { margin-top: 14px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); text-align: center; }
.bookcard .calendly-inline-widget { min-width: 280px !important; height: 400px !important; border-radius: 7px; overflow: hidden; }
.bc-or { margin-top: 16px; text-align: center; font-size: 13px; color: var(--wp--preset--color--ink-soft); }
.bc-or a { color: var(--wp--preset--color--gold-text); border-bottom: 1px solid var(--wp--preset--color--gold); }
@media (max-width: 781px) {
  .bookcard { position: static; }
  .bookcard .calendly-inline-widget { height: 1000px !important; }
}

/* Header — sticky, Frosted Glass */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(241,241,236,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Marken-Siegel (Logo) als CSS-Kreis mit Gold-Punkt — wie Prototyp, immer sichtbar,
   ohne Customizer-Upload. Sitzt vor dem Schriftzug im .brand-lockup (Header + Footer). */
.brand-lockup { align-items: center; }
.brand-lockup::before {
  content: ""; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--forest);
  background: radial-gradient(circle, var(--wp--preset--color--gold) 0 3.5px, transparent 3.6px);
}
.brand-lockup .wp-block-site-title a { text-decoration: none; }
/* Schriftzug: dunkel im Header, hell im Footer (Forest-Hintergrund) */
.site-header .brand-lockup .wp-block-site-title a { color: var(--wp--preset--color--ink); }
.site-footer .brand-lockup .wp-block-site-title a { color: var(--wp--preset--color--paper); }
.site-footer .brand-lockup::before { border-color: var(--wp--preset--color--sage-soft); }
.site-header .wp-block-navigation a { color: var(--wp--preset--color--ink-soft); }
.site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); }

/* Footer — Linkfarben (heller Text auf Forest Deep) */
.site-footer .footcol-list { list-style: none; margin: 0; padding: 0; }
.site-footer .footcol-list li { margin-bottom: 10px; }
.site-footer .footcol-list a,
.site-footer .legal-links a {
  color: #c6cdc5; text-decoration: none; transition: color .2s;
}
.site-footer .footcol-list a:hover { color: var(--wp--preset--color--paper); }
.site-footer .legal-links a {
  border-bottom: 1px solid var(--wp--preset--color--gold); padding-bottom: 1px;
}
.site-footer .footcol-h { margin: 0 0 16px; }
/* Footer durchgängig in Outfit (sans) — die Spalten-Überschriften erben sonst
   Spectral (Serif) vom globalen Heading-Style. */
.site-footer .footcol-h,
.site-footer .footcol-list a,
.site-footer .footcol-list li {
  font-family: var(--wp--preset--font-family--outfit) !important;
}
.site-footer .footcol-list a { font-size: 15px; letter-spacing: 0.005em; }

@media (max-width: 781px) {
  .site-footer .foot-bottom { gap: 10px; }
}

/* =========================================================
   Unterseiten — Sektions-Stützstile
   ========================================================= */

/* Section-Intro (Eyebrow + Headline + Lead/Text) als linksbündige Textspalte mit
   ruhiger Zeilenlänge — wie im Prototyp. .copy-col ist eine zentrierte WP-Spalte
   (constrained), innen Flow-Layout => alle Texte linksbündig auf gleicher Kante.
   So bleibt der Lead unter der Headline (kein Auseinanderlaufen) und die Zeilen
   werden nicht über die volle Breite gezogen. */
.copy-col h1, .copy-col .has-display-font-size { max-width: 20ch; }
.copy-col h2 { max-width: 26ch; }
.copy-col .lead { max-width: 54ch; }
.copy-col > p:not(.eyebrow):not(.lead) { max-width: 62ch; }
.copy-col .eyebrow { margin-bottom: 18px; }

/* Lead-Grundbreite (auch in Spalten-Layouts) */
.lead { max-width: 54ch; }

/* Prose-Sektion: schmales Label links, Text rechts */
.prose-cols { align-items: start; }
.prose-cols p { max-width: 62ch; }
.prose-label { color: var(--wp--preset--color--gold-text); }
.muted { color: var(--wp--preset--color--ink-soft); }

/* Dunkle Sektion (Forest) */
.section-dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper); }
.section-dark .has-paper-color, .section-dark p { color: #d8ddd6; }
.section-dark h2, .section-dark h3 { color: var(--wp--preset--color--paper); }
.section-dark > p { max-width: 62ch; }

/* Journey — nummerierte Schritte + verbindende Linie */
.journey { position: relative; }
.journey::before {
  content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 1px;
  background: var(--wp--preset--color--gold); opacity: .45; z-index: 0;
}
.journey .wp-block-column { position: relative; z-index: 1; }
.jstep .jnum {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 15px; width: 38px; height: 38px; line-height: 36px; text-align: center;
  border: 1px solid var(--wp--preset--color--gold); border-radius: 50%;
  color: var(--wp--preset--color--gold-text); margin: 0 0 14px;
  background: var(--wp--preset--color--linen); position: relative; z-index: 1;
}
.jstep h3 { color: var(--wp--preset--color--forest); margin: 0 0 8px; }

/* Angebote (Ways to Work) — 2-spaltig: Titel/Meta links, Text rechts */
.offers .offer { border-top: 1px solid var(--wp--preset--color--line); padding: 44px 0; margin: 0; align-items: start; }
/* Anker-Sprung (Footer-Deeplinks) nicht unter den Sticky-Header laufen lassen */
.offers .offer { scroll-margin-top: 90px; }
.offers > .offer:first-child { border-top: 0; padding-top: 6px; }      /* kein Strich über Clarity Call */
.offer .tag {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-text); font-weight: 500; margin: 0 0 12px; display: block;
}
.offer h3 { color: var(--wp--preset--color--forest); margin: 0 0 14px; }
.offer .meta-row { color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; font-size: 14px; }
.offer .meta-row span { display: block; margin-bottom: 4px; }
.offer .obody p { max-width: 60ch; }
/* Flagship: 2-spaltig wie die anderen Angebote (Titel/Meta links, Inhalt rechts),
   in eigener Gold-Box — wie Prototyp (vorher full-width gestapelt). */
.offer.flagship {
  border: 1px solid var(--wp--preset--color--gold); border-radius: 6px;
  padding: 42px 38px; margin: 8px 0;
  background: linear-gradient(180deg, rgba(194,162,104,.12), var(--wp--preset--color--paper));
  box-shadow: 0 24px 60px -46px rgba(46,69,64,.45);
}
.offer.flagship + .offer { border-top: 0; }
.offer.flagship .included { margin-top: 18px; }
.offer.flagship .ba-col { margin-top: 0; }
.flag-mark {
  display: inline-block; background: var(--wp--preset--color--gold);
  color: #fff; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 2px; margin-bottom: 12px;
}
.included { list-style: none; margin: 0; padding: 0; columns: 2; }
.included li { padding: 6px 0 6px 20px; position: relative; }
.included li::before { content: "—"; position: absolute; left: 0; color: var(--wp--preset--color--gold); }

/* 1:1 Stages */
.stage {
  border: 1px solid var(--wp--preset--color--line); border-radius: 4px;
  padding: 20px; background: var(--wp--preset--color--paper);
}
.stage .s-name { font-family: var(--wp--preset--font-family--spectral); color: var(--wp--preset--color--forest); font-size: 18px; }
.stage .s-meta { color: var(--wp--preset--color--ink-soft); font-size: 13px; margin-top: 4px; }

/* Before / After */
.ba-col h4 { color: var(--wp--preset--color--gold-text); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.ba-col ul { list-style: none; margin: 0; padding: 0; }
.ba-col li { padding: 6px 0; color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--line); }

/* Quote-Callout (Flagship) — Box mit Chip + Avatar-Punkt (wie Prototyp) */
.quote-callout {
  position: relative; margin: 0;
  background: var(--wp--preset--color--linen);
  border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
  padding: 34px 36px 28px;
  box-shadow: 0 26px 56px -40px rgba(46,69,64,.45);
}
/* Chip im Fluss oben (nicht absolut), damit er das Zitat nicht überlappt */
.quote-callout .qc-chip {
  display: inline-block; margin: 0 0 16px; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold-text);
  border: 1px solid var(--wp--preset--color--gold); border-radius: 999px; padding: 5px 13px;
}
.quote-callout .qc-quote {
  font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.55;
  color: var(--wp--preset--color--forest); margin: 0 0 20px; padding-left: 48px; max-width: 60ch;
}
.quote-callout .qc-by { display: flex; align-items: center; gap: 12px; padding-left: 48px; margin: 0; }
.quote-callout .qc-by::before {
  content: ""; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wp--preset--color--sage), var(--wp--preset--color--gold));
}
@media (max-width: 781px) {
  .quote-callout .qc-quote, .quote-callout .qc-by { padding-left: 0; }
}

/* Who we serve — Karten */
.whoc {
  border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: 28px;
  background: var(--wp--preset--color--paper);
}
.whoc h3 { color: var(--wp--preset--color--forest); font-size: 19px; margin: 0 0 10px; }
.whoc .rec { color: var(--wp--preset--color--gold-text); font-size: 12.5px; letter-spacing: 0.04em; margin-top: 10px; }

/* Outcomes-Liste (Clarity „What to expect") — goldener Punkt, kein doppelter Bullet, keine Trennlinie */
.outcomes { list-style: none; margin: 0; padding: 0; }
.outcomes .outcome { padding: 8px 0 8px 26px; position: relative; color: var(--wp--preset--color--ink); border: 0; }
.outcomes .outcome::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gold); }

/* Outcome-Kreise (Ecosystem „Why it matters") — Ring mit Punkt, 2-spaltig, keine Linien */
.outcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; list-style: none; margin: 0; padding: 0; }
.outcome-grid .oc { display: flex; align-items: center; gap: 14px; }
.outcome-grid .oc::before {
  content: ""; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--gold);
  background:
    radial-gradient(circle, var(--wp--preset--color--gold) 0 3px, transparent 3px);
}
.outcome-grid .oc { color: var(--wp--preset--color--ink); font-size: 15px; }
@media (max-width: 600px) { .outcome-grid { grid-template-columns: 1fr; } }

/* Foto-Strip */
.photostrip img { border-radius: 3px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.photostrip-cap { color: var(--wp--preset--color--ink-soft); font-size: 13px; letter-spacing: 0.04em; }

/* Impressions-Galerie — 3 Spalten, Bilder im natürlichen Seitenverhältnis (kleiner,
   gemischt, masonry-artig wie Prototyp) statt erzwungenem 4/5 (das machte sie zu groß). */
.impr-gallery .impr-col .wp-block-image { margin: 0 0 14px; }
.impr-gallery .impr-col img { border-radius: 3px; width: 100%; height: auto; display: block; }
@media (max-width: 781px) {
  .impr-gallery { flex-wrap: wrap; }
  .impr-gallery .impr-col { flex-basis: 47% !important; }
}

/* Split-Figuren */
.split-figure img { border-radius: 3px; object-fit: cover; width: 100%; }

/* Rechtstexte (Legal/Privacy) */
.legal-prose h2 { font-size: 22px; margin: 32px 0 10px; }
.legal-prose h3 { font-size: 17px; margin: 22px 0 8px; }
.legal-prose p, .legal-prose li { color: var(--wp--preset--color--ink-soft); }

@media (max-width: 781px) {
  .included { columns: 1; }
}

/* Responsive: Karten/Spalten/Value-Ladder mobil */
@media (max-width: 781px) {
  .value-ladder .vl-steps { flex-wrap: wrap; gap: 22px 8px; }
  .value-ladder .vl-step { flex: 0 0 30%; }
  .value-ladder .vl-track { display: none; }
  .hero-band-img figcaption { right: auto; left: 20px; text-align: left; }
}