/*
 Theme Name:   Darren Böckmann – Kadence Child
 Theme URI:    https://darren-boeckmann.de
 Description:  Child Theme für Kadence – Keynote Speaker Darren Böckmann
 Author:        Jörg
 Template:     kadence
 Version:      1.0.0
 Text Domain:  darren-kadence-child
*/

/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS – überschreiben Kadence Global Palette
════════════════════════════════════════════════════════════════ */
:root {
  /* Kadence Palette Override */
  --global-palette1: #C8973E;   /* Gold – Primärfarbe */
  --global-palette2: #E8C06A;   /* Gold Hell */
  --global-palette3: #ffffff;   /* Weiss */
  --global-palette4: #cccccc;   /* Hellgrau */
  --global-palette5: #999999;   /* Grau */
  --global-palette6: #444444;   /* Dunkelgrau */
  --global-palette7: #1a1a1a;   /* Fast Schwarz */
  --global-palette8: #111111;   /* Dunkel */
  --global-palette9: #080808;   /* Schwarz */

  /* Eigene Tokens */
  --db-gold:        #C8973E;
  --db-gold-light:  #E8C06A;
  --db-gold-dark:   #9A6F28;
  --db-black:       #080808;
  --db-dark:        #111111;
  --db-dark-mid:    #1a1a1a;
  --db-white:       #ffffff;
  --db-grey:        #999999;
  --db-grey-light:  #cccccc;
  --db-serif:       'Playfair Display', Georgia, serif;
  --db-sans:        'Montserrat', Arial, sans-serif;
  --db-radius:      0px;          /* Bewusst eckig – premium */
  --db-transition:  .28s ease;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL BASE – Kadence Reset
════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body,
.site,
.wp-site-blocks {
  background-color: var(--db-black) !important;
  color: var(--db-white);
  font-family: var(--db-sans);
  font-size: 16px;
  line-height: 1.6;
}

/* Kadence setzt oft Hintergrund auf seine Palette – überschreiben */
.site-content,
.content-area,
.entry-content,
.wp-block-group,
.wp-block-kadence-column,
.kadence-column {
  background: transparent;
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAFIE
════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--db-serif);
  color: var(--db-white);
  line-height: 1.15;
}

p, li, td, th, label, input, textarea, select {
  font-family: var(--db-sans);
}

a {
  color: var(--db-gold);
  text-decoration: none;
  transition: color var(--db-transition);
}
a:hover { color: var(--db-gold-light); }

strong { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   KADENCE HEADER OVERRIDE
════════════════════════════════════════════════════════════════ */
.site-header,
.kadence-sticky-header,
#masthead {
  background: rgba(8,8,8,.92) !important;
  border-bottom: 1px solid rgba(200,151,62,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: padding var(--db-transition), background var(--db-transition);
}

.site-header.db-scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}

/* Logo */
.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--db-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--db-gold) !important;
  text-decoration: none;
}

/* Nav Links */
.kadence-navigation a,
.kadence-navigation .menu-item > a,
.primary-navigation a {
  font-family: var(--db-sans) !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--db-grey-light) !important;
  transition: color var(--db-transition) !important;
}
.kadence-navigation a:hover,
.kadence-navigation .menu-item:hover > a,
.kadence-navigation .current-menu-item > a {
  color: var(--db-gold) !important;
}

/* Header CTA Button */
.header-button-wrap .button,
.kadence-header-btn {
  background: var(--db-gold) !important;
  color: var(--db-black) !important;
  font-family: var(--db-sans) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 2px solid var(--db-gold) !important;
  padding: .6rem 1.6rem !important;
  transition: background var(--db-transition), color var(--db-transition) !important;
}
.header-button-wrap .button:hover,
.kadence-header-btn:hover {
  background: transparent !important;
  color: var(--db-gold) !important;
}

/* Mobile Hamburger */
.kadence-mobile-trigger,
.menu-toggle {
  color: var(--db-white) !important;
}
.kadence-mobile-trigger:hover,
.menu-toggle:hover {
  color: var(--db-gold) !important;
}

/* Mobile Menu */
.kadence-mobile-nav,
.kadence-mobile-navigation {
  background: var(--db-black) !important;
  border-top: 1px solid rgba(200,151,62,.15);
}

/* ════════════════════════════════════════════════════════════════
   KADENCE FOOTER OVERRIDE
════════════════════════════════════════════════════════════════ */
.site-footer,
#colophon {
  background: var(--db-black) !important;
  border-top: 1px solid rgba(200,151,62,.12) !important;
  color: rgba(255,255,255,.4) !important;
}
.site-footer a { color: var(--db-grey) !important; }
.site-footer a:hover { color: var(--db-gold) !important; }

/* ════════════════════════════════════════════════════════════════
   KADENCE BUTTONS
════════════════════════════════════════════════════════════════ */
.wp-block-button__link,
.kb-btn {
  border-radius: 0 !important;
  font-family: var(--db-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: .75rem !important;
  transition: background var(--db-transition), color var(--db-transition), border-color var(--db-transition) !important;
}

/* Gold Button */
.wp-block-button.is-style-fill .wp-block-button__link,
.kb-btn-global-outline {
  background: var(--db-gold) !important;
  color: var(--db-black) !important;
  border: 2px solid var(--db-gold) !important;
  padding: .9rem 2.4rem !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: transparent !important;
  color: var(--db-gold) !important;
}

/* Ghost Button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--db-white) !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  padding: .9rem 2.4rem !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--db-gold) !important;
  color: var(--db-gold) !important;
}

/* ════════════════════════════════════════════════════════════════
   UTILITY KLASSEN
   Werden per "Additional CSS Class" in Kadence Blöcke eingetragen
════════════════════════════════════════════════════════════════ */

/* Farben */
.db-gold        { color: var(--db-gold) !important; }
.db-gold-grad {
  background: linear-gradient(135deg, var(--db-gold-dark), var(--db-gold-light), var(--db-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: db-grad-shift 4s linear infinite;
}
.db-white       { color: var(--db-white) !important; }
.db-grey        { color: var(--db-grey) !important; }

/* Hintergründe */
.db-bg-black    { background: var(--db-black) !important; }
.db-bg-dark     { background: var(--db-dark) !important; }
.db-bg-dark-mid { background: var(--db-dark-mid) !important; }
.db-bg-gold     { background: var(--db-gold) !important; }

/* Borders */
.db-border-gold      { border: 1px solid rgba(200,151,62,.25); }
.db-border-gold-top  { border-top: 1px solid rgba(200,151,62,.15); }
.db-border-gold-bot  { border-bottom: 1px solid rgba(200,151,62,.15); }

/* Gold Linie unter Section Tag */
.db-gold-line::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: var(--db-gold);
  margin-top: 1rem;
}

/* Section Tag */
.db-section-tag {
  font-size: .7rem !important;
  letter-spacing: .35em !important;
  text-transform: uppercase !important;
  color: var(--db-gold) !important;
  font-weight: 700 !important;
  font-family: var(--db-sans) !important;
}

/* Serif Headline */
.db-serif {
  font-family: var(--db-serif) !important;
}

/* Schriftgrößen */
.db-display {
  font-family: var(--db-serif);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1;
}

/* Goldrahmen / Frame */
.db-gold-frame {
  position: relative;
}
.db-gold-frame::before {
  content: '';
  position: absolute;
  top: -10px; left: -10px;
  width: 50px; height: 50px;
  border-top: 2px solid var(--db-gold);
  border-left: 2px solid var(--db-gold);
  pointer-events: none;
}
.db-gold-frame::after {
  content: '';
  position: absolute;
  bottom: -10px; right: -10px;
  width: 50px; height: 50px;
  border-bottom: 2px solid var(--db-gold);
  border-right: 2px solid var(--db-gold);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   HERO SECTION
   Klasse: db-hero auf das äußerste Kadence Row/Group Element
════════════════════════════════════════════════════════════════ */
.db-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--db-black);
}

/* Dynamischer Hintergrund */
.db-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(200,151,62,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(200,151,62,.05) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
/* Gitter-Textur */
.db-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,151,62,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,151,62,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
}
.db-hero > * { position: relative; z-index: 1; }

/* Hero Stagger Animation */
.db-hero-stagger .db-stagger-item {
  opacity: 0;
  transform: translateY(24px);
  animation: db-stagger-in .7s ease forwards;
}
.db-hero-stagger .db-stagger-item:nth-child(1) { animation-delay: .1s; }
.db-hero-stagger .db-stagger-item:nth-child(2) { animation-delay: .25s; }
.db-hero-stagger .db-stagger-item:nth-child(3) { animation-delay: .4s; }
.db-hero-stagger .db-stagger-item:nth-child(4) { animation-delay: .55s; }
.db-hero-stagger .db-stagger-item:nth-child(5) { animation-delay: .7s; }
.db-hero-stagger .db-stagger-item:nth-child(6) { animation-delay: .85s; }

/* Hero Claim */
.db-hero-claim {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  color: var(--db-white) !important;
}

/* Hero Pillars */
.db-pillars {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--db-grey);
}
.db-pillars span {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--db-gold);
}
.db-pillars span::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  background: var(--db-gold);
  border-radius: 50%;
}

/* Hero Divider */
.db-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.db-divider::before,
.db-divider::after {
  content: '';
  flex: 1; max-width: 80px;
  height: 1px;
  background: var(--db-gold);
}
.db-divider::before, .db-divider::after {
  content: '';
  display: block;
  width: 60px; height: 1px;
  background: var(--db-gold);
}

/* Stat Badge (floatendes Element) */
.db-stat-badge {
  background: var(--db-gold);
  color: var(--db-black);
  padding: 1.2rem 1.4rem;
  display: inline-block;
}
.db-stat-badge .db-stat-num {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  display: block;
}
.db-stat-badge .db-stat-label {
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   TRUST STRIP
════════════════════════════════════════════════════════════════ */
.db-trust-strip {
  padding: 2.5rem 0;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(200,151,62,.12);
  border-bottom: 1px solid rgba(200,151,62,.12);
}

.db-trust-logo {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  transition: color var(--db-transition);
}
.db-trust-logo:hover { color: rgba(255,255,255,.5); }

/* ════════════════════════════════════════════════════════════════
   KEYNOTE CARDS
   Klasse: db-keynote-card auf das Kadence Block Element
════════════════════════════════════════════════════════════════ */
.db-keynote-card {
  position: relative;
  background: var(--db-dark-mid) !important;
  border: 1px solid rgba(200,151,62,.12) !important;
  padding: 3rem 2.5rem !important;
  overflow: hidden;
  transition: border-color var(--db-transition);
}
.db-keynote-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--db-gold), transparent);
  opacity: 0;
  transition: opacity var(--db-transition);
}
.db-keynote-card:hover { border-color: rgba(200,151,62,.5) !important; }
.db-keynote-card:hover::before { opacity: 1; }

/* Große Nummer im Hintergrund */
.db-keynote-num {
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-family: var(--db-serif);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(200,151,62,.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.db-keynote-title {
  font-family: var(--db-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--db-white) !important;
}

.db-keynote-desc {
  color: var(--db-grey-light) !important;
  font-size: .9rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
}

/* Trennlinie */
.db-keynote-divider {
  width: 40px; height: 1px;
  background: var(--db-gold);
  margin: 1.2rem 0;
}

/* Target Tags */
.db-tag {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border: 1px solid rgba(200,151,62,.3);
  color: var(--db-grey);
  margin: .2rem;
  transition: border-color var(--db-transition), color var(--db-transition);
}
.db-tag:hover { border-color: var(--db-gold); color: var(--db-gold); }

/* ════════════════════════════════════════════════════════════════
   ANSATZ / PROZESS CARDS
════════════════════════════════════════════════════════════════ */
.db-process-card {
  background: var(--db-dark-mid) !important;
  border: 1px solid rgba(200,151,62,.12) !important;
  padding: 1.8rem 2rem !important;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  transition: border-color var(--db-transition);
}
.db-process-card:hover {
  border-color: rgba(200,151,62,.4) !important;
}
.db-process-num {
  font-family: var(--db-serif);
  font-size: 2rem;
  font-weight: 900;
  color: rgba(200,151,62,.35);
  line-height: 1;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   QUOTE SEKTION
════════════════════════════════════════════════════════════════ */
.db-quote-section {
  position: relative;
  overflow: hidden;
}
.db-quote-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,151,62,.06) 0%, transparent 70%);
  pointer-events: none;
}
.db-quote-mark {
  font-family: var(--db-serif);
  font-size: 8rem;
  line-height: .5;
  color: rgba(200,151,62,.12);
  display: block;
  margin-bottom: 1.5rem;
}
.db-quote-text {
  font-family: var(--db-serif) !important;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  color: var(--db-white) !important;
}

/* ════════════════════════════════════════════════════════════════
   REFERENZEN
════════════════════════════════════════════════════════════════ */
.db-testimonial-card {
  background: var(--db-dark-mid) !important;
  border: 1px solid rgba(200,151,62,.12) !important;
  padding: 3rem !important;
  position: relative;
  transition: border-color var(--db-transition);
}
.db-testimonial-card:hover {
  border-color: rgba(200,151,62,.4) !important;
}
.db-testimonial-quote {
  font-size: 3.5rem;
  line-height: .8;
  color: rgba(200,151,62,.2);
  font-family: var(--db-serif);
  display: block;
  margin-bottom: 1rem;
}
.db-testimonial-text {
  font-style: italic !important;
  color: var(--db-grey-light) !important;
  font-size: .95rem !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

/* Placeholder Referenz */
.db-ref-placeholder {
  background: transparent !important;
  border: 2px dashed rgba(200,151,62,.2) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem !important;
  min-height: 260px;
  transition: border-color var(--db-transition);
}
.db-ref-placeholder:hover { border-color: rgba(200,151,62,.5) !important; }

/* Angebot Banner */
.db-offer-banner {
  background: var(--db-dark-mid) !important;
  border: 1px solid rgba(200,151,62,.25) !important;
  padding: 3rem 4rem !important;
}

/* ════════════════════════════════════════════════════════════════
   ZIELGRUPPEN TAGS
════════════════════════════════════════════════════════════════ */
.db-ziel-tag {
  display: inline-block;
  padding: .65rem 1.5rem;
  border: 1px solid rgba(200,151,62,.22);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--db-grey-light);
  font-weight: 500;
  margin: .3rem;
  transition: border-color var(--db-transition), color var(--db-transition);
}
.db-ziel-tag:hover { border-color: var(--db-gold); color: var(--db-gold); }

/* ════════════════════════════════════════════════════════════════
   KONTAKT FORMULAR
════════════════════════════════════════════════════════════════ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea,
.db-form input,
.db-form select,
.db-form textarea {
  width: 100%;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 0 !important;
  color: var(--db-white) !important;
  font-family: var(--db-sans) !important;
  font-size: .88rem !important;
  padding: .85rem 1rem !important;
  outline: none !important;
  transition: border-color var(--db-transition) !important;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.db-form input:focus,
.db-form textarea:focus {
  border-color: var(--db-gold) !important;
}
.wpcf7-form label,
.db-form label {
  font-size: .65rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--db-grey) !important;
  font-weight: 600 !important;
  margin-bottom: .4rem !important;
  display: block;
}
.wpcf7-form select option { background: var(--db-dark); }

/* Erfolgs- und Fehlermeldungen */
.wpcf7-response-output {
  border: 1px solid var(--db-gold) !important;
  background: rgba(200,151,62,.08) !important;
  color: var(--db-white) !important;
  border-radius: 0 !important;
  font-size: .85rem !important;
  padding: 1rem 1.5rem !important;
  margin-top: 1rem !important;
}

/* ════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   JS fügt .db-visible hinzu wenn Element im Viewport
════════════════════════════════════════════════════════════════ */
.db-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s ease, transform .75s ease;
}
.db-reveal.db-visible {
  opacity: 1;
  transform: none;
}

/* Varianten */
.db-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .75s ease, transform .75s ease;
}
.db-reveal-left.db-visible { opacity: 1; transform: none; }

.db-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .75s ease, transform .75s ease;
}
.db-reveal-right.db-visible { opacity: 1; transform: none; }

.db-reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .75s ease, transform .75s ease;
}
.db-reveal-scale.db-visible { opacity: 1; transform: scale(1); }

/* Stagger für Gruppen: JS setzt --delay pro Kind */
.db-stagger-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--delay, 0s);
}
.db-stagger-group.db-visible > * {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════
   COUNTER ANIMATION
   Klasse: db-counter auf das Element mit data-target="100"
════════════════════════════════════════════════════════════════ */
.db-counter-wrap {
  text-align: center;
}
.db-counter-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--db-gold);
  line-height: 1;
  display: block;
}
.db-counter-label {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--db-grey);
  margin-top: .4rem;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   GOLD SHIMMER ANIMATION
════════════════════════════════════════════════════════════════ */
@keyframes db-grad-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes db-stagger-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes db-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,151,62,.4); }
  50%       { box-shadow: 0 0 0 10px rgba(200,151,62,.0); }
}

@keyframes db-line-draw {
  from { width: 0; }
  to   { width: 60px; }
}

/* Goldlinie animated */
.db-gold-line-anim {
  display: block;
  width: 0;
  height: 2px;
  background: var(--db-gold);
  margin: 1rem 0;
  transition: width 1s ease .3s;
}
.db-visible .db-gold-line-anim,
.db-gold-line-anim.db-visible {
  width: 60px;
}

/* Glowing CTA */
.db-btn-glow {
  animation: db-pulse-gold 2.5s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════
   PARALLAX WRAPPER
════════════════════════════════════════════════════════════════ */
.db-parallax-wrap { overflow: hidden; position: relative; }
.db-parallax-inner {
  will-change: transform;
  transition: transform .1s linear;
}

/* ════════════════════════════════════════════════════════════════
   KADENCE BLÖCKE – GENERELL
════════════════════════════════════════════════════════════════ */

/* Row / Sektion */
.wp-block-kadence-rowlayout,
.kb-row-layout-wrap {
  width: 100%;
}

/* Columns */
.wp-block-kadence-column .kadence-column-inner,
.kb-column .kadence-column-inner {
  height: 100%;
}

/* Advanced Headings */
.wp-block-kadence-advancedheading {
  font-family: var(--db-serif);
}

/* Icon Block */
.wp-block-kadence-icon svg { transition: transform var(--db-transition); }
.wp-block-kadence-icon:hover svg { transform: scale(1.1); }

/* Spacer sichtbar im Editor */
.wp-block-kadence-spacer { width: 100%; }

/* ════════════════════════════════════════════════════════════════
   DARK SECTION VARIANTEN
════════════════════════════════════════════════════════════════ */
.db-section-dark     { background: var(--db-dark) !important; }
.db-section-darker   { background: var(--db-dark-mid) !important; }
.db-section-black    { background: var(--db-black) !important; }
.db-section-radial   {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(200,151,62,.06) 0%, transparent 70%),
    var(--db-black) !important;
}

/* ════════════════════════════════════════════════════════════════
   FOTO PLACEHOLDER (bis echte Fotos da sind)
════════════════════════════════════════════════════════════════ */
.db-photo-placeholder {
  background: linear-gradient(160deg, #1e1e1e 0%, #141414 60%, #0c0c0c 100%);
  border: 1px solid rgba(200,151,62,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(255,255,255,.2);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  min-height: 400px;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .db-hero { min-height: 90vh; }
  .db-offer-banner { padding: 2rem !important; }
}

@media (max-width: 768px) {
  .db-hero { min-height: auto; padding: 8rem 0 4rem; }
  .db-pillars { flex-direction: column; gap: .8rem; }
  .db-keynote-card { padding: 2rem 1.5rem !important; }
  .db-testimonial-card { padding: 2rem !important; }
  .db-quote-mark { font-size: 5rem; }
}

@media (max-width: 480px) {
  .db-hero-claim { font-size: 1.2rem !important; }
  .db-counter-num { font-size: 2rem; }
}