/**
Theme Name: Astra Child - Futterberatung Krumschmidt
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

:root {
  --mint: #A8DCC8;
  --mint-deep: #7FC4A8;
  --mint-darker: #6BB396; /* für Hover-States, etwas dunkler als mint-deep */
  --blue: #BFE0F0;
  --blue-deep: #8FC4DE;
  --gray-warm: #5B6670;
  --cream: #FAFAF7;
  --ink: #2E3438;
  --header-h: 88px; /* Höhe der Sticky-Nav — bei Bedarf anpassen */
}

/* Smooth-Scroll für Anker-Links (One-Pager-Navigation) */
html {
  scroll-behavior: smooth;
}

/* Sprungziele nicht unter der Sticky-Nav verschwinden lassen */
h1[id], h2[id], h3[id], section[id], div[id] {
  scroll-margin-top: var(--header-h);
}

body, p, li, a, input, textarea, button,
.entry-content, .entry-content p,
.wp-block-paragraph, .wp-block-post-content p {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--ink);
}

h1, h2, h3, .site-title {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400;
  color: var(--ink);
}

body {
  background: var(--cream);
}

/* Hero-Bereich (Verlauf wie im Mockup) */
.hero-bereich {
  background: linear-gradient(135deg, var(--blue) 0%, var(--mint) 100%);
  padding: 64px 40px;
  border-radius: 0 0 24px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Pfotenabdruck-Basis: wird per JS als echtes Element eingefügt (siehe mu-plugin),
   damit sowohl Hover-Wackeln als auch Scroll-Reveal möglich sind (Pseudo-Elemente
   sind für JavaScript/IntersectionObserver nicht ansprechbar). */
.scroll-paw {
  position: absolute;
  width: 130px;
  height: 130px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><ellipse cx='16' cy='22' rx='8' ry='6' fill='white'/><ellipse cx='5' cy='13' rx='3' ry='3.8' fill='white'/><ellipse cx='12' cy='7' rx='3' ry='4' fill='white'/><ellipse cx='20' cy='7' rx='3' ry='4' fill='white'/><ellipse cx='27' cy='13' rx='3' ry='3.8' fill='white'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(0.6) rotate(-18deg);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.scroll-paw.is-visible {
  opacity: 0.22;
  transform: scale(1) rotate(-18deg);
}

.scroll-paw--hero {
  right: -15px;
  bottom: -20px;
}
.scroll-paw--footer {
  left: -15px;
  top: -15px;
  transform: scale(0.6) rotate(162deg);
}
.scroll-paw--footer.is-visible {
  transform: scale(1) rotate(162deg);
}
@keyframes paw-wiggle {
  0%, 100% { transform: scale(1) rotate(-18deg); }
  25% { transform: scale(1.08) rotate(-8deg); }
  75% { transform: scale(1.08) rotate(-28deg); }
}
@keyframes paw-wiggle-footer {
  0%, 100% { transform: scale(1) rotate(162deg); }
  25% { transform: scale(1.08) rotate(152deg); }
  75% { transform: scale(1.08) rotate(172deg); }
}
.hero-bereich:hover .scroll-paw--hero.is-visible {
  animation: paw-wiggle 0.6s ease;
}
html body .site-below-footer-wrap[data-section="section-below-footer-builder"]:hover .scroll-paw--footer.is-visible {
  animation: paw-wiggle-footer 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-paw {
    transition: none;
  }
  .hero-bereich:hover .scroll-paw--hero.is-visible,
  html body .site-below-footer-wrap[data-section="section-below-footer-builder"]:hover .scroll-paw--footer.is-visible {
    animation: none;
  }
}

/* Gepunktete Pfaden-Linie als wiederkehrendes Detail */
.pfaden-linie {
  width: 100%;
  max-width: 260px;
  height: 30px;
  margin-top: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><path d='M2 30 C 30 5, 60 5, 90 22 S 150 38, 198 12' stroke='%237FC4A8' stroke-width='1.5' fill='none' stroke-dasharray='1 9' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Primär-Button (CTA) */
.wp-block-button__link, .cta-button {
  background: var(--mint-deep) !important;
  color: #fff !important;
  border-radius: 24px !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 13px 26px !important;
  border: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  line-height: 1.35;
}

.wp-block-buttons {
  max-width: 100%;
}

.wp-block-button__link:hover, .cta-button:hover {
  background: var(--mint-darker) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(127, 196, 168, 0.35);
}

.wp-block-button__link:focus-visible, .cta-button:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}

.wp-block-button__link:active, .cta-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Karten / Boxen */
.info-box {
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 18px;
  padding: 20px 28px;
  max-width: 420px;
  margin: 0 auto;
}

.info-box p {
  margin: 8px 0 !important;
}

/* Startseite: Vorschau-Kacheln zu den drei Seiten */
.preview-cards-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 40px;
}

/* Grid statt Flexbox für diese Zeile: Grid-Zellen sind per Default gleich hoch,
   damit umgehen wir die Flex-Stretch-Problematik komplett.
   :has() statt .preview-cards-wrap als Anker, da diese Klasse laut DevTools aktuell
   auf keinem Elternelement mehr vorhanden ist (vermutlich beim Editieren verlorengegangen) */
.wp-block-columns:has(> .preview-card) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

.wp-block-column.preview-card {
  width: auto !important;
  margin: 0 !important;
}

.preview-card {
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 20px;
  padding: 28px;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Schiebt den "Mehr erfahren"-Link unabhängig von der Textlänge ans Kartenende */
.preview-card > *:last-child {
  margin-top: auto;
  padding-top: 12px;
}

.preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(143, 196, 222, 0.28);
  border-color: var(--blue-deep);
}

.preview-card .eyebrow {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--mint-deep) !important;
  font-weight: 700 !important;
}

.preview-card h3 {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  margin: 10px 0 !important;
  color: var(--ink) !important;
}

.preview-card p {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: var(--gray-warm) !important;
}

.preview-card a {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mint-deep) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.preview-card a:hover {
  color: var(--mint-darker) !important;
  text-decoration: underline !important;
}

/* Startseite: Vertrauens-Leiste */
.trust-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px 14px !important;
  flex-wrap: wrap !important;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 40px 56px;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12.5px !important;
  color: var(--gray-warm) !important;
  text-align: center;
  position: relative;
}

.trust-bar > * {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  background: rgba(168, 220, 200, 0.2);
  border: 1px solid var(--mint);
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
}

.trust-bar > *::before {
  content: "✓";
  color: var(--mint-deep);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* Accordion für Leistungen (nativer WordPress-Accordion-Block) */
.wp-block-accordion-heading__toggle {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  padding: 14px 0 !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.15s ease;
}

.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:active {
  background: transparent !important;
  color: var(--mint-darker) !important;
}

.wp-block-accordion-heading__toggle-title {
  font-size: 15px;
  color: var(--ink) !important;
}

.wp-block-accordion-heading__toggle-icon {
  color: var(--mint-deep) !important;
  transition: transform 0.2s ease;
}

.wp-block-accordion-panel {
  background: var(--cream) !important;
  padding: 10px 0 18px !important;
  color: var(--gray-warm) !important;
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px;
  line-height: 1.7;
}

.wp-block-accordion {
  border-bottom: none !important;
}

.wp-block-accordion-item {
  border-bottom: 1px solid rgba(191, 224, 240, 0.4) !important;
}

/* Banner "Etwas Individuelles?" am Ende der Leistungen-Seite */
.individuell-banner {
  background: linear-gradient(135deg, var(--blue) 0%, var(--mint) 100%);
  border-radius: 20px;
  padding: 26px 32px;
  text-align: center;
}

/* Kontaktformular-Karte */
.wpcf7 {
  background: #fff;
  border: 1px solid var(--blue);
  border-radius: 18px;
  padding: 28px;
  max-width: 480px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--blue);
  background: var(--cream);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13.5px;
  margin-bottom: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--blue-deep);
  box-shadow: 0 0 0 3px rgba(143, 196, 222, 0.25);
}
.wpcf7 input[type="submit"] {
  background: linear-gradient(135deg, var(--mint-deep) 0%, var(--blue-deep) 100%);
  background-size: 160% 160%;
  background-position: 0% 0%;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px 0;
  width: 100%;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(127, 196, 168, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.3s ease;
}
.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  background-position: 100% 100%;
  box-shadow: 0 10px 26px rgba(127, 196, 168, 0.45);
}
.wpcf7 input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(127, 196, 168, 0.3);
}
.wpcf7 input[type="submit"]:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 3px;
}
.wpcf7-response-output {
  border-radius: 12px !important;
  background: rgba(168, 220, 200, 0.25) !important;
  border: none !important;
}

/* Sticky Top-Nav */
html body .ast-header-break-point .main-header-bar,
html body .main-header-bar {
  background: var(--cream) !important;
  border-bottom-width: 0 !important;
  border-bottom: none !important;
  box-shadow: 0 2px 16px rgba(143, 196, 222, 0.18) !important;
}
.main-header-menu a,
.main-header-menu a * {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: var(--ink) !important;
  transition: color 0.15s ease;
}
.main-header-menu a {
  padding: 9px 18px !important;
  margin: 0 2px;
  border-radius: 999px !important;
  transition: color 0.15s ease, background-color 0.2s ease;
}
.main-header-menu a:hover,
.main-header-menu a:hover * {
  color: var(--mint-darker) !important;
}
.main-header-menu a:hover {
  background: rgba(168, 220, 200, 0.25);
}
.main-header-menu li.current-menu-item > a,
.main-header-menu li.current-menu-item > a * {
  color: var(--mint-darker) !important;
  font-weight: 700;
}
.main-header-menu li.current-menu-item > a {
  background: rgba(168, 220, 200, 0.35);
}

/* Social-Icon(s) im Header (z.B. Instagram) an die Farbwelt anpassen */
.main-header-bar-navigation .ast-builder-social-elements a,
.main-header-bar-navigation .ast-builder-social-elements a svg,
.main-header-bar-navigation .ast-builder-social-elements a *,
.ast-header-social-wrap a,
.ast-header-social-wrap a svg,
.ast-header-social-wrap a * {
  color: var(--ink) !important;
  fill: var(--ink) !important;
  transition: color 0.15s ease, fill 0.15s ease, background-color 0.2s ease;
}
.main-header-bar-navigation .ast-builder-social-elements a,
.ast-header-social-wrap a {
  padding: 8px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.main-header-bar-navigation .ast-builder-social-elements a:hover,
.main-header-bar-navigation .ast-builder-social-elements a:hover svg,
.main-header-bar-navigation .ast-builder-social-elements a:hover *,
.ast-header-social-wrap a:hover,
.ast-header-social-wrap a:hover svg,
.ast-header-social-wrap a:hover * {
  color: var(--mint-darker) !important;
  fill: var(--mint-darker) !important;
}

/* Hamburger-Icon (Mobile-Menü-Toggle) an die Farbwelt anpassen */
.menu-toggle,
.ast-mobile-menu-buttons .menu-toggle {
  color: var(--ink) !important;
  transition: color 0.15s ease;
}
.menu-toggle:hover,
.ast-mobile-menu-buttons .menu-toggle:hover {
  color: var(--mint-darker) !important;
}

/* Mehr Abstand zwischen der Header-Trennlinie und dem nachfolgenden Seiteninhalt (z.B. "Start"-Titel) */
#content {
  padding-top: 28px;
  padding-bottom: 48px;
}
.main-header-bar-navigation .ast-builder-social-elements a:hover,
.ast-header-social-wrap a:hover {
  background: rgba(168, 220, 200, 0.25);
}

/* Responsive: Tablet */
@media (max-width: 900px) {
  .preview-cards-wrap {
    padding: 36px 24px 32px;
  }
}

/* Responsive: Innenabstand + Headline-Größe auf Mobile anpassen */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }
  body {
    background: #fff;
  }
  /* <input type="submit"> kann Text nicht umbrechen (Browser-Grenze) - deshalb Schrift verkleinern */
  .wpcf7 input[type="submit"] {
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
    padding: 15px 6px !important;
  }
  html body .main-header-bar,
  html body .ast-mobile-header-content,
  html body .ast-mobile-popup-content,
  html body .main-header-bar-navigation,
  html body #ast-hf-mobile-menu,
  html body .main-navigation {
    background: #fff !important;
  }
  html body .main-header-menu li {
    border-color: rgba(191, 224, 240, 0.5) !important;
  }
  /* Trust-Bar: auf Mobile alle Chips einzeln untereinander statt nebeneinander umbrechend */
  .trust-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .trust-bar > * {
    width: 100%;
    justify-content: center;
  }
  /* Größere Tap-Ziele im mobilen Menü und bei Buttons (min. ~44px Höhe für Touch) */
  .main-header-menu a {
    padding: 12px 18px !important;
  }
  .wp-block-button__link, .cta-button {
    padding: 15px 26px !important;
  }
  .hero-bereich {
    padding: 36px 20px;
    border-radius: 0 0 20px 20px;
  }
  .hero-bereich h1 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    hyphens: none !important;
    word-break: normal !important;
  }
  .wp-block-columns:has(> .preview-card) {
    grid-template-columns: 1fr !important;
  }
  .preview-cards-wrap {
    padding: 28px 16px 24px;
  }
  .preview-card {
    padding: 20px;
  }
  .info-box {
    padding: 18px 20px;
  }
	  .info-box p {
  font-size: 13px !important;
}
  .individuell-banner {
    padding: 20px 20px;
  }
  .trust-bar {
    padding: 18px 20px 40px;
    gap: 18px;
  }
  .wpcf7 { padding: 18px; }
}

/* Sanfter Übergang beim Wechsel zwischen Seiten (z.B. Kachel -> Kontaktseite) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: seiten-fade-out 0.2s ease forwards;
}

::view-transition-new(root) {
  animation: seiten-fade-in 0.35s ease forwards;
}

@keyframes seiten-fade-out {
  to { opacity: 0; }
}

@keyframes seiten-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respektiert Nutzer, die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Footer (Header/Footer-Builder-System): an die Farbwelt anpassen.
   Echter Wrapper laut DOM: .site-below-footer-wrap (nicht .site-primary-footer-wrap). */
html body .site-below-footer-wrap[data-section="section-below-footer-builder"] {
  background: linear-gradient(135deg, var(--blue) 0%, var(--mint) 100%) !important;
  color: var(--ink) !important;
  border-top: 3px solid var(--mint-deep) !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}

html body .site-below-footer-wrap[data-section="section-below-footer-builder"] a {
  color: var(--ink) !important;
  font-weight: 700;
}
html body .site-below-footer-wrap[data-section="section-below-footer-builder"] a:hover {
  color: var(--gray-warm) !important;
}

/* Impressum-Link in dieselbe Zeile wie der Copyright-Text zwingen.
   Der äußere .ast-footer-copyright (mit data-section) wird zur Flex-Row,
   der innere .ast-footer-copyright (ohne data-section, enthält das <p>) darf
   dabei nicht die volle Zeilenbreite beanspruchen, sonst rutscht der Link darunter. */
html body .ast-footer-copyright[data-section="section-footer-builder"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px;
}
html body .ast-footer-copyright[data-section="section-footer-builder"] > .ast-footer-copyright {
  flex: 0 0 auto !important;
  width: auto !important;
}
html body .ast-footer-copyright[data-section="section-footer-builder"] > .ast-footer-copyright p {
  margin: 0 !important;
}

.footer-impressum-sep {
  color: var(--ink);
  margin: 0 4px;
  opacity: 0.5;
}

.footer-impressum-link {
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.footer-impressum-link:hover {
  color: var(--gray-warm) !important;
}