/*
Theme Name: Kinderbetreuung - Gold Marry Child
Theme URI: https://kinderbetreuung.goldmarry-trauungen.de
Description: Eigenes, lizenzkostenfreies Child-Theme auf Basis von Page Builder Framework. Markenwelt an Gold Marry angelehnt, fuer die Kinderbetreuung angepasst (warm, elegant, kindgerecht). Selbst programmiert - keine Premium-Lizenz noetig.
Author: Gold Marry
Template: page-builder-framework
Version: 1.1.0
Text Domain: kb-goldmarry-child
*/

/* ===========================================================================
   MARKEN-TOKENS  (hier zentral aenderbar - Farben/Schriften der ganzen Seite)
   =========================================================================== */
:root{
  --kb-cream:#FBF8F4;      /* Hintergrund creme (wie Gold Marry) */
  --kb-cream-2:#F3EDE4;    /* zweite Flaeche */
  --kb-ink:#33302B;        /* Text dunkel */
  --kb-muted:#6F685D;      /* Text gedaempft */
  --kb-gold:#C99A5B;       /* warmes Honiggold  -> Wiedererkennung Gold Marry */
  --kb-gold-dark:#B0823F;
  --kb-sage:#8AA07D;       /* sanftes Salbeigruen -> Natur / Kind */
  --kb-apricot:#E7B98A;    /* warme Apricot-Note -> Freundlichkeit */
  --kb-serif:'Cormorant Garamond','Didot',Georgia,serif;
  --kb-sans:'Nunito Sans',Helvetica,Arial,sans-serif;
  --kb-radius:16px;
  --kb-shadow:0 12px 34px rgba(51,48,43,.10);
}

/* ===========================================================================
   BASIS-TYPOGRAFIE & FARBEN (greift auch ausserhalb von Elementor)
   =========================================================================== */
body{font-family:var(--kb-sans);color:var(--kb-ink);background:var(--kb-cream);font-size:17px;line-height:1.65;}
h1,h2,h3,h4,h5{font-family:var(--kb-serif);color:var(--kb-ink);font-weight:500;line-height:1.08;}
a{color:var(--kb-gold-dark);}
a:hover{color:var(--kb-gold);}

/* Eyebrow / Kicker */
.kb-eyebrow{font-family:var(--kb-sans);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--kb-gold);}

/* Buttons markengerecht (auch PBF/WP-Standardbuttons) */
.wpbf-button,button,.button,input[type=submit],.wpforms-submit{
  font-family:var(--kb-sans);font-weight:700;letter-spacing:.04em;
  background:var(--kb-gold);border:none;color:#fff;border-radius:999px;
  padding:14px 30px;transition:background .3s ease,transform .3s ease;
}
.wpbf-button:hover,button:hover,.button:hover,input[type=submit]:hover,.wpforms-submit:hover{
  background:var(--kb-gold-dark);transform:translateY(-1px);color:#fff;
}

/* ===========================================================================
   HEADER / STICKY-NAV (Page Builder Framework)
   =========================================================================== */
.wpbf-navigation{background:rgba(251,248,244,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:999;box-shadow:0 2px 18px rgba(51,48,43,.06);}
.wpbf-menu > .menu-item > a{font-family:var(--kb-sans);font-weight:600;letter-spacing:.04em;color:var(--kb-ink);}
.wpbf-menu > .menu-item > a:hover{color:var(--kb-gold);}
.wpbf-navigation .wpbf-logo a{font-family:var(--kb-serif);font-size:26px;font-weight:600;color:var(--kb-ink);letter-spacing:.01em;}

/* sanftes Scroll-Verhalten fuer Anker-Navigation (Onepage) */
html{scroll-behavior:smooth;}

/* ===========================================================================
   HILFSKLASSEN fuer die Elementor-Sektionen
   =========================================================================== */
.kb-serif{font-family:var(--kb-serif) !important;}
.kb-sans{font-family:var(--kb-sans) !important;}

/* Eigener Footer in der Seite -> Theme-Footerleiste ausblenden (Onepage) */
.wpbf-page-footer{display:none;}

/* Scroll-nach-oben-Button (unten rechts, ab 200px sanft eingeblendet) */
#kb-top{position:fixed;right:26px;bottom:26px;z-index:998;width:48px;height:48px;padding:0;border:none;
  border-radius:50%;background:var(--kb-gold);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(51,48,43,.22);opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,visibility .4s ease,transform .4s ease,background .3s ease;}
#kb-top.kb-top--show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
#kb-top:hover{background:var(--kb-gold-dark);transform:translateY(0) scale(1.07);}
#kb-top svg{display:block;}
@media(max-width:600px){#kb-top{right:16px;bottom:16px;width:44px;height:44px;}}

/* ===========================================================================
   SCROLL-REVEAL (scroll-gekoppelt): Elemente erscheinen schon unterhalb der
   Viewport-Kante transparent + tiefer und steigen beim Scrollen weich auf.
   Klassen setzt functions.php (.kb-r Element, .kb-s Sektion, .kb-i1..5 Versatz,
   .kb-done = fertig, .kb-instant = beim Hochscrollen sofort). Ohne JS bleibt
   alles sichtbar (nur html.kb-reveal-ready aktiviert den Effekt).
   =========================================================================== */
/* Wichtig: overflow-x:hidden auf body macht body zum Scroll-Container -> view()-Timelines waeren
   inaktiv (kein Effekt). clip verhindert horizontales Scrollen genauso, ohne Scroll-Container. */
html body{overflow-x:clip;overflow-y:visible;}
@keyframes kbRise{from{opacity:0;transform:translate3d(0,36px,0)}to{opacity:1;transform:none}}
@keyframes kbSec{from{opacity:.4}to{opacity:1}}
/* Modus A: scroll-gekoppelt (nur wenn html NICHT .kb-fallback traegt) */
@supports (animation-timeline: view()){
  html.kb-reveal-ready:not(.kb-fallback) .kb-r{animation:kbRise linear both;animation-timeline:view();animation-range:entry 0% entry 75%;will-change:opacity,transform;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-i1{animation-range:entry 8% entry 83%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-i2{animation-range:entry 16% entry 91%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-i3{animation-range:entry 24% entry 99%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-i4{animation-range:entry 30% entry 100%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-i5{animation-range:entry 36% entry 100%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-s{animation-name:kbSec;animation-range:entry 0% entry 25%;}
  html.kb-reveal-ready:not(.kb-fallback) .kb-r.kb-done{animation:none;opacity:1;transform:none;}
}
/* Modus B: Transition-Fallback (kein view()-Support ODER Timeline nachweislich wirkungslos) */
html.kb-reveal-ready.kb-fallback .kb-r{opacity:0;transform:translate3d(0,36px,0);transition:opacity 2.2s cubic-bezier(.16,.72,.2,1),transform 1.9s cubic-bezier(.16,.72,.2,1);}
html.kb-reveal-ready.kb-fallback .kb-r.kb-i1{transition-delay:.12s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-i2{transition-delay:.24s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-i3{transition-delay:.36s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-i4{transition-delay:.48s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-i5{transition-delay:.6s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-s{opacity:.4;transform:none;transition-duration:2.6s;transition-delay:0s;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-in{opacity:1;transform:none;}
html.kb-reveal-ready.kb-fallback .kb-r.kb-instant{transition:none;}
/* beim Umschalten in den Fallback den Ausgangszustand ohne Transition setzen (kein Wackler) */
html.kb-reveal-ready.kb-fallback.kb-nt .kb-r{transition:none !important;}
@media (prefers-reduced-motion: reduce){
  html.kb-reveal-ready .kb-r{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;}
}