/* =====================================================================
   bewusst-versorgt — Marken-Styles für Elementor + Hello Elementor

   Was hier steht, gilt überall: Schriften, Farben, Grundtypografie und
   die Sektions-Klassen, die die Elementor-Vorlagen benutzen.

   Was NICHT hier steht: Layout. Das macht Elementor — Spalten, Abstände,
   Ausrichtung stellst du dort ein, nicht hier.
   ================================================================== */

:root {
  /* Styleguide-Palette */
  --bv-teal-900: #0B4F4A;
  --bv-teal-700: #0F766E;
  --bv-teal-500: #14B8A6;
  --bv-mint-300: #7ED6C1;
  --bv-mint-100: #D9F2EC;
  --bv-sand:     #F2F0EB;
  --bv-base:     #FBFAF6;
  --bv-surface:  #FFFFFF;
  --bv-ink:      #12332F;
  --bv-ink-muted:#48645F;

  /* Schriften */
  --bv-display: "Playfair Display", Georgia, serif;
  --bv-body:    Lato, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bv-script:  "Dancing Script", cursive;
  --bv-hand:    Caveat, "Bradley Hand", cursive;
}

/* --- Grundtypografie ------------------------------------------------- */
body {
  background: var(--bv-base);
  color: var(--bv-ink);
  font-family: var(--bv-body);
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--bv-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bv-ink);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.12; }
h2 { font-size: clamp(27px, 3.6vw, 36px); }
h3 { font-size: 20px; line-height: 1.3; }
a  { color: var(--bv-teal-700); }
a:hover { color: var(--bv-teal-900); }

/* Seitentitel in Handschrift, wie besprochen */
.page .entry-title,
.bv-pagetitle {
  font-family: var(--bv-hand);
  font-weight: 600;
  color: var(--bv-teal-700);
  font-size: clamp(40px, 6vw, 60px);
}

/* --- Bausteine, die die Elementor-Vorlagen nutzen -------------------- */

/* Kicker über einer Überschrift */
.bv-kicker {
  font-size: 12.5px !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bv-teal-700);
}

/* Lead-Absatz unter der Headline */
.bv-lead { font-size: 20px !important; font-weight: 300; color: var(--bv-ink-muted); }

/* Gedämpfter Fließtext */
.bv-muted { color: var(--bv-ink-muted); }

/* Handschrift-Überschrift (Cleo & Suza) */
.bv-script-head {
  font-family: var(--bv-script) !important;
  font-weight: 600;
  color: var(--bv-teal-700);
  font-size: clamp(30px, 4vw, 40px) !important;
  line-height: 1.15;
}

/* Rundes Hero-Porträt mit Ring */
.bv-portrait img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  box-shadow: 0 24px 60px -34px rgba(18, 51, 47, .6);
  outline: 1px solid var(--bv-mint-300);
  outline-offset: 14px;
}

/* Porträt mit organischer Ecke (Über uns) */
.bv-portrait-soft img {
  border-radius: 8px 8px 96px 8px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

/* Große Zahl im Zahlenband */
.bv-fact-value {
  font-family: var(--bv-display) !important;
  font-size: 34px !important;
  line-height: 1.1;
  color: var(--bv-teal-700);
}

/* Weiße Karte — Produkte, CTA, Tier-Brücke */
.bv-card {
  background: var(--bv-surface);
  border: 1px solid var(--bv-sand);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(18,51,47,.04), 0 18px 40px -32px rgba(18,51,47,.45);
}
.bv-card-round { border-radius: 14px; }

/* Preis auf der Produktkarte */
.bv-price { font-family: var(--bv-display) !important; font-size: 21px !important; color: var(--bv-teal-700); }

/* Rollen-Label auf einer Karte */
.bv-role {
  font-size: 12.5px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bv-teal-500);
}

/* Partner-Kennzeichnung als Pille */
.bv-badge {
  display: inline-flex;
  align-items: center;
  background: var(--bv-mint-100);
  color: var(--bv-teal-700);
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 7px 14px;
  border-radius: 999px;
}

/* Nummer im Schritt-Baustein */
.bv-num {
  font-family: var(--bv-display) !important;
  font-size: 44px !important;
  line-height: 1;
  color: var(--bv-mint-300);
}

/* Zugelassene Aussagen — Liste mit Bedingungszeile */
.bv-claims ul { list-style: none; padding: 0; margin: 0 0 16px; }
.bv-claims li { margin-bottom: 12px; color: var(--bv-ink-muted); }
.bv-claims li em {
  display: block;
  font-style: normal;
  font-size: 14px;
  opacity: .8;
  margin-top: 2px;
}

/* Trennlinien oben/unten (Transparenz-Block) */
.bv-rule-y { border-top: 1px solid var(--bv-sand); border-bottom: 1px solid var(--bv-sand); }

/* --- Hello Elementor: Kopf- und Fußbereich ---------------------------
   Elementor Free hat keinen Theme Builder. Hello Elementor bringt einen
   schlichten Kopfbereich mit — der wird hier auf die Marke gezogen.
   ------------------------------------------------------------------ */
.site-header {
  background: var(--bv-base);
  border-bottom: 1px solid var(--bv-sand);
  padding-block: 18px;
}
.site-header .site-branding img { height: 58px; width: auto; }
.site-header .site-navigation a {
  font-size: 16px;
  color: var(--bv-ink-muted);
  text-decoration: none;
}
.site-header .site-navigation a:hover,
.site-header .site-navigation .current-menu-item a { color: var(--bv-teal-700); }

.site-footer { background: var(--bv-sand); }

/* Claim unter dem Logo — per Menü-Beschreibung oder Widget. */
.bv-claim {
  font-family: var(--bv-script);
  font-size: 15px;
  line-height: 1.3;
  color: var(--bv-teal-500);
  margin: 2px 0 0;
}

/* --- Buttons --------------------------------------------------------- */
.elementor-button {
  border-radius: 999px;
  font-weight: 700;
}

/* --- Mobil ----------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header .site-branding img { height: 46px; }
  .bv-lead { font-size: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}