/* ==========================================================================
   KD Custom Design System (WPVibe Neuaufbau 2026)
   Wird NACH style.css geladen und überschreibt das alte, dunkle Theme.
   ========================================================================== */

/* --- Grundfarben & Reset des alten dunklen Themes ---
   Das alte Theme gibt über eine eigene Customizer-Funktion (inc/kd.php)
   noch eine eigene <style>-Ausgabe NACH diesem Stylesheet aus (schwarzer
   Hintergrund, andere Linkfarbe, andere Überschriften-Schrift) — daher hier
   konsequent mit !important arbeiten. */
html { background: #FAF7F2 !important; }
html, body, a, a:visited, a:active, a:hover, button, input, select, textarea, mark {
  color: #2B2A27;
}
body {
  background: #FAF7F2 !important;
  color: #2B2A27 !important;
  font-family: 'Work Sans', system-ui, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
}
#content {
  position: static !important;
  top: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  transition: none !important;
}
/* Altes Hintergrundbild-Überblendungs-Feature endgültig ausblenden */
#bg-container { display: none !important; }
#page { max-width: none; }
#main, #primary { max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; }
.entry-content, .page-content { margin: 0 !important; }
article.page { margin: 0; }

a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', Georgia, serif !important; font-weight: 500; margin: 0; clear: none; }

/* --- Header / Navigation --- */
#masthead.site-header { background: transparent; }

#site-navigation.main-navigation {
  position: absolute !important;
  top: 0 !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  width: 100% !important;
  max-width: 1440px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 40px !important;
  box-sizing: border-box !important;
  clear: none !important;
  background: linear-gradient(to bottom, rgba(20,19,17,0.55) 0%, rgba(20,19,17,0) 100%);
}
@media screen and (max-width: 1440px) {
  #site-navigation.main-navigation { position: absolute !important; left: 0 !important; transform: none; }
}
#site-navigation .menu-hauptmenue-container,
#site-navigation .site-logo {
  flex: 0 0 auto;
}
/* WordPress verpackt das Menü automatisch in ein <div class="menu-...-container">.
   Dieses Wrapper-Element aus dem Flex-Layout "auflösen", damit die <ul> direkt
   neben dem Logo steht statt in einer eigenen Zeile darunter. */
#site-navigation .menu-hauptmenue-container {
  display: contents !important;
}

#site-navigation .site-logo,
#site-navigation .site-logo a {
  font-family: 'Poiret One', cursive;
  font-size: 24px;
  color: #FAF7F2;
  display: inline-block !important;
}
#site-navigation .site-logo a {
  display: inline-flex !important;
  align-items: center !important;
}
#site-navigation .site-logo a img {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#site-navigation .menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #FAF7F2;
  font-size: 30px;
  cursor: pointer;
  z-index: 1001;
}

#primary-menu {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#primary-menu li { padding: 0; margin: 0; }
#primary-menu a {
  font-family: 'Poiret One', cursive;
  font-size: 19px;
  font-weight: 700;
  color: #F3EEE4;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
}
.site-logo, .site-logo a { white-space: nowrap; }
#primary-menu a:hover { color: #FFFFFF; }
#primary-menu .current-menu-item > a,
#primary-menu .current_page_item > a { color: #FFFFFF; }

#primary-menu li.menu-cta a {
  background: #5C7A8A;
  color: #FAF7F2 !important;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
}
#primary-menu li.menu-cta a:hover { background: #4C6A7A; }

@media screen and (max-width: 880px) {
  #site-navigation.main-navigation {
    background: rgba(20,19,17,0.85);
    padding: 16px 24px;
  }
  #site-navigation .menu-toggle { display: block; }
  #primary-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #FAF7F2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px 32px 32px;
    overflow-y: auto;
  }
  #site-navigation.toggled #primary-menu { display: flex; }
  #primary-menu li { border-bottom: 1px solid #E8E2D8; }
  #primary-menu a { color: #2B2A27; font-size: 19px; padding: 16px 0; display: block; }
  #primary-menu li.menu-cta { border-bottom: none; margin-top: 16px; }
  #primary-menu li.menu-cta a { text-align: center; font-size: 16px; padding: 15px 22px; display: block; }
}

/* --- Footer --- */
#colophon.site-footer {
  background: #FAF7F2 !important;
  border-top: 1px solid #E8E2D8 !important;
  padding: 56px 40px !important;
  text-align: left !important;
  font-family: 'Work Sans', sans-serif !important;
  color: #2B2A27 !important;
}
#colophon .site-info {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
#colophon .footer-brand { font-family: 'Fraunces', serif; font-size: 17px; color: #2B2A27 !important; }
#colophon .footer-address { font-size: 14px; color: #7A756A !important; margin-top: 6px; }
#colophon .footer-address a { color: #6BBFA3 !important; }
#colophon .footer-address a:hover { color: #4FA98C !important; }
#colophon .footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
#colophon .footer-links a { font-size: 14px; color: #2B2A27 !important; display: block; margin-bottom: 10px; }
#colophon .footer-links a:hover { color: #000000 !important; }
#colophon .footer-legal { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
#colophon .footer-legal a { color: #2B2A27 !important; }
#colophon .footer-legal a:hover { color: #000000 !important; }
#colophon .footer-accent { color: #6BBFA3 !important; }
#colophon .footer-accent:hover { color: #4FA98C !important; }

@media screen and (max-width: 780px) {
  #colophon .site-info { flex-direction: column; gap: 28px; }
}

/* --- Wiederverwendbare Bausteine für Seiteninhalte --- */
.section-pad { padding-left: 72px; padding-right: 72px; box-sizing: border-box; }
.section-vpad { padding-top: 96px; padding-bottom: 96px; }
.link-more { color: #7A5B44; border-bottom: 1px solid #7A5B44; padding-bottom: 2px; }
.link-more:hover { color: #5B4534; border-color: #5B4534; }
.tag-pill { display: inline-flex; align-items: center; font-size: 13.5px; color: #A9895F; border: 1px solid #D8C9AE; border-radius: 999px; padding: 8px 16px; background: #FFFFFF; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }

@media screen and (max-width: 900px) {
  .section-pad { padding-left: 32px !important; padding-right: 32px !important; }
  .section-vpad { padding-top: 56px !important; padding-bottom: 56px !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ansatz-row, .praxis-row { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .sonder-row { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .sub-row { flex-direction: column !important; gap: 24px !important; }
  .hero-box { left: 32px !important; right: 32px !important; bottom: 40px !important; }
  .hero-h1 { font-size: 30px !important; }
  .hero-photo-box { height: 620px !important; }
  .section-h2 { font-size: 28px !important; }
  .fuerwen-item { font-size: 15px !important; }
}

@media screen and (max-width: 640px) {
  .hero-box { left: 20px !important; right: 20px !important; bottom: 28px !important; gap: 14px !important; }
  .hero-h1 { font-size: 25px !important; line-height: 1.25 !important; }
  .hero-label { font-size: 12px !important; }
  .hero-desc { font-size: 14.5px !important; }
  .hero-photo-box { height: 500px !important; }
  .section-h2 { font-size: 24px !important; }
  .cta-h2 { font-size: 26px !important; }
  .fuerwen-item { font-size: 14px !important; line-height: 1.5 !important; }
}

@keyframes heroTextIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero-text { animation: heroTextIn 1.1s ease both; animation-delay: 0.3s; }

/* --- Hero-Variante rechtsbündig (Über mich etc.) --- */
@media screen and (max-width: 900px) {
  .hero-box-r { left: 32px !important; right: 32px !important; top: 250px !important; bottom: auto !important; max-width: none !important; align-items: flex-start !important; text-align: left !important; }
  .hero-box-r .hero-label { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.7) !important; }
  .hero-box-r .hero-h1 { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 18px rgba(0,0,0,0.75) !important; }
  .hero-box-r .hero-desc { text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.7) !important; }
  .quote-text { font-size: 28px !important; }
}
@media screen and (max-width: 640px) {
  .hero-box-r { left: 20px !important; right: 20px !important; top: 210px !important; bottom: auto !important; gap: 14px !important; }
  .quote-text { font-size: 24px !important; }
}

/* --- Preise & Kontakt --- */
.price-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #FFFFFF; border: 1px solid #E8E2D8; border-radius: 14px; }
.price-name { font-size: 15.5px; color: #2B2A27; font-weight: 500; }
.price-detail { font-size: 14px; color: #7A756A; }
.price-amount { font-family: 'Fraunces', serif !important; font-size: 20px; color: #A9895F; margin-top: 4px; }
.cards-row, .cards-row-3 { display: flex; gap: 16px; }
.map-box { border-radius: 14px; overflow: hidden; border: 1px solid #E0D9CB; width: 892px; max-width: 100%; height: 372px; }
.kontakt-row { display: flex; gap: 56px; align-items: flex-start; }
.kontakt-portrait { width: 355px; flex-shrink: 0; border-radius: 20px; overflow: hidden; height: 460px; }
.price-box { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E8E2D8; border-radius: 14px; padding: 8px; }
.price-box .price-card { border: none; border-radius: 0; padding: 16px 16px; }
.price-box .price-row-divider { height: 1px; background: #E8E2D8; margin: 0 16px; }
.price-box .cards-row { gap: 0; }
.price-box .cards-row .price-card { flex: 1; }
.price-box .cards-row .price-card:first-child { border-right: 1px solid #E8E2D8; }
.price-multi .price-sep { display: inline; }
@media screen and (max-width: 640px) {
  .price-multi { display: flex; flex-direction: column; gap: 2px; }
  .price-multi .price-sep { display: none; }
}

@media screen and (max-width: 880px) {
  .hero-start-img { object-position: 48% 22% !important; }
}

/* Mobile Hero – Foto oben frei, Text darunter (Startseite & Über mich) */
@media screen and (max-width: 880px) {
  .hero-photo-box {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .hero-photo-box > img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 420px !important;
    inset: auto !important;
  }
  .hero-photo-box > img.hero-start-img {
    object-position: 12% 50% !important;
  }
  .hero-photo-box > div:not(.hero-text) {
    display: none !important;
  }
  .hero-text {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #F3EEE4 !important;
    padding: 26px 24px 36px !important;
    margin: 0 !important;
    gap: 16px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .hero-label { color: #B08A55 !important; }
  .hero-h1 { color: #2A2520 !important; font-size: 28px !important; line-height: 1.24 !important; }
  .hero-desc { color: #4A443C !important; }
  .hero-label, .hero-h1 { text-wrap: balance !important; }
  .hero-desc { text-wrap: pretty !important; }
  .hero-text .hero-label,
  .hero-text .hero-h1,
  .hero-text .hero-desc {
    text-shadow: none !important;
  }
  .hero-text a[href="/buchung/"] {
    border-color: #2A2520 !important;
    color: #2A2520 !important;
  }
}

/* Sehr schmale Geräte (z.B. iPhone 8, 375px): mehr Luft für den Text */
@media screen and (max-width: 400px) {
  .hero-text {
    padding: 26px 20px 40px !important;
    gap: 12px !important;
  }
  .hero-h1 { font-size: 25px !important; line-height: 1.26 !important; }
  .hero-desc { font-size: 14px !important; line-height: 1.55 !important; }
}

/* CF7-Formular im HP-Design */
.kd-contact-form { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: #FFFFFF; border: 1px solid #E8E2D8; border-radius: 16px; box-sizing: border-box; }
.kd-contact-form .wpcf7-form-control-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.kd-contact-form label { font-size: 13px; color: #7A756A; display: flex; flex-direction: column; gap: 6px; }
.kd-contact-form .wpcf7-form-control { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #E0D9CB !important; border-radius: 8px; background: #FAF7F2; font-family: 'Work Sans', sans-serif; font-size: 14.5px; color: #2B2A27; }
.kd-contact-form textarea.wpcf7-form-control { height: 84px; resize: vertical; }
.kd-contact-form .wpcf7-submit { background: #A9895F; color: #FAF7F2; font-size: 14.5px; padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer; font-family: 'Work Sans', sans-serif; }
.kd-contact-form .wpcf7-submit:hover { background: #94764e; }
.kd-contact-form .wpcf7-response-output { font-size: 13.5px; border-radius: 8px; margin: 0 !important; }
.kd-contact-form .wpcf7-not-valid-tip { font-size: 12.5px; }

@media screen and (max-width: 900px) {
  .kontakt-row { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .kontakt-row > div { width: 100% !important; max-width: none !important; }
  .kontakt-portrait { height: 260px !important; align-self: auto !important; }
  .cards-row, .cards-row-3 { flex-direction: column !important; gap: 12px !important; }
  .price-box .cards-row { gap: 0 !important; }
  .price-box .cards-row .price-card:first-child { border-right: none !important; border-bottom: 1px solid #E8E2D8; }
  .map-box { width: 100% !important; height: 220px !important; }
}