/* =========================================================
 * Life-Bio · Themen-Landingpages · lp.css
 * Ablage: wp-content/themes/<child-theme>/assets/css/lp.css
 * Wird nur auf Seiten mit dem Template "Landingpage" geladen.
 * Alles ist unter .lb-lp gekapselt – das Theme bleibt unberührt.
 * Schriften kommen bewusst aus Botiga (inherit).
 * ========================================================= */

/* ---------- Tokens ---------- */
.lb-lp {
  --lb-accent: #288508;
  --lb-accent-dark: #1f6a06;
  --lb-ink: #2D4038;
  --lb-forest: #1A2B0D;
  --lb-sage: #A7B180;
  --lb-paper: #F5F7ED;
  --lb-paper-2: #E8ECD6;
  --lb-on-dark: #EEF2DF;
  --lb-on-dark-muted: #C9D2AE;
  --lb-line: rgba(45, 64, 56, .22);
  --lb-max: 1120px;
  --lb-gutter: clamp(1rem, 4vw, 2rem);
  --lb-space: clamp(3rem, 7vw, 5.5rem);

  color: var(--lb-ink);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Vollbreite Sektionen dürfen keinen horizontalen Scroll erzeugen */
body.page-template-template-landingpage { overflow-x: clip; }

/* Botiga reserviert für #primary eine Content-Spalte (Sidebar-Layout).
 * Auf Landingpages: volle Zeilenbreite, damit der Container zentriert ist
 * und die Vollbreiten-Sektionen korrekt ausbrechen können. */
body.page-template-template-landingpage #primary.lb-lp {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0; /* hebt das globale 60px-Spacing auf – Hero schließt ans Menü an */
  float: none;
}
body.page-template-template-landingpage #secondary,
body.page-template-template-landingpage .widget-area { display: none; }

/* ---------- Breadcrumbs ---------- */
.lb-lp .lb-crumbs { font-size: .9rem; padding: 1rem 0; }
.lb-lp .lb-crumbs a { color: inherit; }

/* ---------- Sektionen (Group-Block mit Klasse lb-section) ----------
 * Bricht aus dem Botiga-Container aus und zentriert den Inhalt
 * über das Padding – funktioniert mit und ohne inner-container.
 */
.lb-lp .lb-section {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding-top: var(--lb-space);
  padding-bottom: var(--lb-space);
  padding-left: max(var(--lb-gutter), calc((100vw - var(--lb-max)) / 2));
  padding-right: max(var(--lb-gutter), calc((100vw - var(--lb-max)) / 2));
  background: var(--lb-paper);
  box-sizing: border-box;
}
.lb-lp .lb-section.lb-alt   { background: var(--lb-paper-2); }
.lb-lp .lb-section.lb-sage  { background: var(--lb-sage); }
.lb-lp .lb-section.lb-dark  { background: var(--lb-forest); color: var(--lb-on-dark); }
.lb-lp .lb-section.lb-tight-top { padding-top: 0; }

/* ---------- Typografie ---------- */
.lb-lp h1, .lb-lp h2, .lb-lp h3 {
  color: inherit;
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: -.01em;
}
.lb-lp h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); }
.lb-lp h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
.lb-lp h3 { font-size: 1.2rem; }
.lb-lp .lb-dark h1, .lb-lp .lb-dark h2, .lb-lp .lb-dark h3 { color: #fff; }

.lb-lp p { max-width: 68ch; margin: 0 0 1em; }
.lb-lp a {
  color: inherit;
  text-decoration-color: var(--lb-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lb-lp .lb-dark a { text-decoration-color: var(--lb-sage); }
.lb-lp :focus-visible { outline: 3px solid var(--lb-accent); outline-offset: 3px; }
.lb-lp .lb-dark :focus-visible { outline-color: var(--lb-sage); }

.lb-lp .lb-lead   { font-size: 1.22rem; max-width: 56ch; }
.lb-lp .lb-dark .lb-lead { color: #D6DDBD; }
.lb-lp .lb-answer { font-size: 1.15rem; }
.lb-lp .lb-small  { font-size: .95rem; }
.lb-lp .lb-dark .lb-small { color: var(--lb-on-dark-muted); }

/* ---------- Buttons (Gutenberg Buttons-Block) ---------- */
.lb-lp .wp-block-buttons { gap: .9rem; margin-top: 1.6rem; }
.lb-lp .wp-block-button__link {
  display: inline-block;
  padding: .85rem 1.5rem;
  border: 2px solid var(--lb-accent);
  border-radius: 4px;
  background: var(--lb-accent);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.lb-lp .wp-block-button__link:hover,
.lb-lp .wp-block-button__link:focus {
  background: var(--lb-accent-dark);
  border-color: var(--lb-accent-dark);
  color: #fff;
}
.lb-lp .is-style-outline .wp-block-button__link {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.lb-lp .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Hero ---------- */
.lb-lp .lb-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2.5rem, 6vw, 4rem);
}
.lb-lp .lb-hero::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -140px;
  width: 760px;
  height: 760px;
  opacity: .55;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 760' fill='none'%3E%3Cg stroke='%23A7B180' stroke-width='1.2'%3E%3Ccircle cx='380' cy='380' r='60'/%3E%3Ccircle cx='380' cy='380' r='120'/%3E%3Ccircle cx='380' cy='380' r='180' stroke-opacity='.85'/%3E%3Ccircle cx='380' cy='380' r='240' stroke-opacity='.7'/%3E%3Ccircle cx='380' cy='380' r='300' stroke-opacity='.55'/%3E%3Ccircle cx='380' cy='380' r='360' stroke-opacity='.4'/%3E%3C/g%3E%3Ccircle cx='380' cy='380' r='7' fill='%23288508'/%3E%3C/svg%3E");
}
.lb-lp .lb-hero > * { position: relative; }
.lb-lp .lb-hero .wp-block-columns { align-items: center; gap: 3rem; }
.lb-lp .lb-hero .wp-block-image { margin: 0; }
.lb-lp .lb-hero .wp-block-image img { width: 100%; height: auto; border-radius: 6px; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Trust-Leiste (Listen-Block lb-trust, eigene Sektion unter den Produkten) ---------- */
.lb-lp ul.lb-trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--lb-line);
  font-size: .95rem;
}
.lb-lp ul.lb-trust li {
  position: relative;
  margin: 0;
  padding-left: 1.3rem;
}
.lb-lp ul.lb-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .6rem;
  height: .6rem;
  background: var(--lb-accent);
  border-radius: 1px;
}
.lb-lp ul.lb-trust strong { display: block; font-weight: 600; }
.lb-lp .lb-dark ul.lb-trust { color: #D6DDBD; border-top-color: rgba(167, 177, 128, .4); }
.lb-lp .lb-dark ul.lb-trust strong { color: #fff; }
.lb-lp .lb-dark ul.lb-trust li::before { background: var(--lb-sage); }

/* ---------- Tipp-Box (Group-Block lb-tips) ---------- */
.lb-lp .lb-tips {
  background: var(--lb-paper-2);
  border-left: 4px solid var(--lb-accent);
  border-radius: 0 6px 6px 0;
  padding: 1.6rem 1.8rem;
}
.lb-lp .lb-alt .lb-tips { background: #fff; }
.lb-lp .lb-tips h3 { margin-bottom: .8rem; }
.lb-lp .lb-tips ul { list-style: none; margin: 0; padding: 0; }
.lb-lp .lb-tips li {
  position: relative;
  margin: 0;
  padding: .55rem 0 .55rem 1.5rem;
  border-top: 1px solid var(--lb-line);
}
.lb-lp .lb-tips li:first-child { border-top: 0; }
.lb-lp .lb-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: .6rem;
  height: .6rem;
  background: var(--lb-accent);
  border-radius: 1px;
}

/* ---------- Begriffs-Liste zweispaltig (Listen-Block lb-deflist) ---------- */
.lb-lp ul.lb-deflist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  margin: 2rem 0 0;
  padding: 0;
}
.lb-lp ul.lb-deflist li { margin: 0; padding: 1rem 0; border-top: 1px solid var(--lb-line); }
.lb-lp ul.lb-deflist strong { display: block; margin-bottom: .3rem; }

/* ---------- Tabelle (Tabellen-Block) ---------- */
.lb-lp .wp-block-table { margin: 1.8rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lb-lp .wp-block-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: 0;
  background: #fff;
}
.lb-lp .wp-block-table thead { border: 0; }
.lb-lp .wp-block-table th,
.lb-lp .wp-block-table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.2rem;
  border: 0;
  border-bottom: 1px solid var(--lb-line);
}
.lb-lp .wp-block-table thead th { background: var(--lb-ink); color: #fff; font-weight: 600; font-size: .95rem; }
.lb-lp .wp-block-table figcaption { font-size: .88rem; margin-top: .6rem; }

/* ---------- Produktkacheln (Group lb-grid > Group lb-tile) ---------- */
.lb-lp .lb-grid { margin-top: 2rem; }
.lb-lp .lb-grid,
.lb-lp .lb-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 1.5rem;
}
.lb-lp .lb-grid:has(> .wp-block-group__inner-container) { display: block; }

.lb-lp .lb-tile,
.lb-lp .lb-tile > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
}
.lb-lp .lb-tile {
  margin: 0;
  background: #fff;
  border: 1px solid var(--lb-line);
  border-radius: 6px;
  overflow: hidden;
}
.lb-lp .lb-tile > .wp-block-group__inner-container { flex: 1; }
.lb-lp .lb-tile .wp-block-image { margin: 0; aspect-ratio: 1 / 1; background: var(--lb-paper); }
.lb-lp .lb-tile .wp-block-image a { display: block; height: 100%; }
.lb-lp .lb-tile .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .75rem;
  box-sizing: border-box;
}

.lb-lp .lb-tile-body,
.lb-lp .lb-tile-body > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lb-lp .lb-tile-body { padding: 1.2rem 1.3rem 1.4rem; }
.lb-lp .lb-tile-body p { font-size: .98rem; }
.lb-lp .lb-tile-body .wp-block-buttons { margin-top: auto; padding-top: .6rem; }
.lb-lp .lb-tag { font-size: .9rem; font-weight: 600; color: var(--lb-accent-dark); margin: 0 0 .3rem; }

/* ---------- Schritte (Listen-Block, nummeriert, lb-steps) ---------- */
.lb-lp ol.lb-steps {
  list-style: none;
  counter-reset: lbs;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem 3rem;
  margin: 2.2rem 0 0;
  padding: 0;
}
.lb-lp ol.lb-steps li {
  counter-increment: lbs;
  margin: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--lb-ink);
}
.lb-lp ol.lb-steps li::before {
  content: counter(lbs);
  display: block;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: .4rem;
}
.lb-lp ol.lb-steps strong { display: block; font-size: 1.2rem; margin-bottom: .4rem; }

/* ---------- Beratung (dunkle Sektion lb-advice) ---------- */
.lb-lp .lb-advice .wp-block-columns { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.lb-lp .lb-advice .wp-block-image { margin: 0; }
.lb-lp .lb-advice .wp-block-image img { border-radius: 6px; width: 100%; height: auto; }
.lb-lp .lb-phone { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 600; margin: .2rem 0 .4rem; }
.lb-lp .lb-phone a { color: #fff; text-decoration-color: var(--lb-sage); }

/* ---------- FAQ (Rank Math FAQ-Block, beide Markup-Varianten) ---------- */
.lb-lp .rank-math-block,
.lb-lp .wp-block-rank-math-faq-block { margin-top: 1.6rem; }
.lb-lp .rank-math-list-item,
.lb-lp .rank-math-faq-item { padding: 1.1rem 0; border-bottom: 1px solid var(--lb-line); }
.lb-lp .rank-math-list-item:first-child,
.lb-lp .rank-math-faq-item:first-child { border-top: 1px solid var(--lb-line); }
.lb-lp .rank-math-question {
  position: relative;
  font-size: 1.1rem;
  margin: 0 0 .5rem;
  padding-left: 1.5rem;
}
.lb-lp .rank-math-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .6rem;
  height: .6rem;
  background: var(--lb-accent);
  border-radius: 1px;
}
.lb-lp .rank-math-answer { padding-left: 1.5rem; }
.lb-lp .rank-math-answer p { margin: 0; }

/* ---------- Ratgeber-Links (Listen-Block lb-guides) ---------- */
.lb-lp ul.lb-guides { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.lb-lp ul.lb-guides li { margin: 0; padding: 1rem 0; border-top: 1px solid var(--lb-line); }
.lb-lp ul.lb-guides li:last-child { border-bottom: 1px solid var(--lb-line); }
.lb-lp ul.lb-guides a { font-size: 1.25rem; font-weight: 600; }
.lb-lp ul.lb-guides span { display: block; font-size: .98rem; margin-top: .2rem; }

/* ---------- Hinweis-Leiste (lb-notice) ---------- */
.lb-lp .lb-section.lb-notice {
  background: var(--lb-ink);
  color: #DDE3C8;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: .88rem;
}
.lb-lp .lb-notice p { max-width: 90ch; margin: 0; }

/* ---------- Mobile Anruf-Leiste (Custom-HTML lb-callbar) ---------- */
.lb-lp .lb-callbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .lb-lp ul.lb-deflist,
  .lb-lp ol.lb-steps { grid-template-columns: 1fr; }
  .lb-lp ul.lb-trust { grid-template-columns: 1fr 1fr; }
  .lb-lp .lb-hero::before { right: -320px; top: -200px; opacity: .4; }
  .lb-lp .lb-hero .wp-block-image img { aspect-ratio: 16 / 10; }

  body.page-template-template-landingpage { padding-bottom: 4.2rem; }
  .lb-lp .lb-callbar {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--lb-accent);
    padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  }
  .lb-lp .lb-callbar a { color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; }
}


/* FAQ-Accordion auf dem RankMath-Block */
.wp-block-rank-math-faq-block .rank-math-faq-item{
  border-bottom:1px solid var(--lb-line,rgba(45,64,56,.22));
}
.rank-math-question{
  position:relative;margin:0;cursor:pointer;
  padding:0.4rem 2.5rem 1.1rem 0;
}
.rank-math-question::after{
  content:"+";position:absolute;right:.4rem;top:1rem;
  font-size:1.5rem;line-height:1;color:var(--lb-accent,#288508);
}
.rank-math-list-item.is-open .rank-math-question::after{content:"–";}

.rank-math-list-item .rank-math-answer{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.rank-math-list-item.is-open .rank-math-answer{ max-height:40rem; }

@media (prefers-reduced-motion:reduce){
  .rank-math-answer{transition:none;}
}