/* ==========================================================================
   ClickUp Agentur — Ihlenfeldt Digital / automations.de
   Landing Page v2 — support styles for the (inline-styled) markup in index.html.
   Holds only what inline styles cannot express: fonts, resets, keyframes,
   responsive breakpoints, and hover states (ported from the design's
   `style-hover` attributes). Layout/appearance live inline on the elements.
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Outfit-VariableFont_wght.ttf") format("truetype");
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Referenced once by the Leistungen blockquote (was a design-system token). */
  --paper-white: #FAF9F5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: #000000; }
body {
  font: 400 16px/1.55 "Poppins", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.72);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: #E840C8; text-decoration: none; }
a:hover { color: #F050D2; }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

@keyframes heroGlowPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.9; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Hover states — ported from the design's `style-hover`. Inline styles win on
   specificity, so these overrides use !important to take effect on :hover.
   -------------------------------------------------------------------------- */

/* Card / panel outline lights up on hover */
.hover-border {
  transition: border-color 200ms cubic-bezier(.2, .8, .2, 1);
}
.hover-border:hover { border-color: rgba(232, 64, 200, 0.35) !important; }

/* Gradient primary CTA: glow + lift */
.btn-grad:hover {
  box-shadow: 0 0 36px rgba(232, 64, 200, 0.48) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Ghost / outline buttons: subtle fill */
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; }

/* Outline pill (header phone): accent border */
.btn-outline:hover { border-color: rgba(232, 64, 200, 0.35) !important; color: #ffffff !important; }

/* Text links */
.link-orchid:hover { color: #F050D2 !important; }
.link-muted:hover  { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   Sticky mobile CTA bar — hidden on desktop, flex on small screens.
   -------------------------------------------------------------------------- */
.mobile-cta-bar { display: none; }

@media (max-width: 720px) {
  .mobile-cta-bar { display: flex !important; }
  .hero-grid  { grid-template-columns: 1fr !important; }
  .two-col    { grid-template-columns: 1fr !important; }
  .grid-4     { grid-template-columns: 1fr !important; }
  .grid-3     { grid-template-columns: 1fr !important; }
  .grid-6     { grid-template-columns: 1fr 1fr !important; }
  .price-grid { grid-template-columns: 1fr !important; }
  .video-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px) and (min-width: 721px) {
  .price-grid { grid-template-columns: 1fr 1fr !important; }
}

/* --------------------------------------------------------------------------
   Anchor scrolling (all booking CTAs now scroll to the inline calendar)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
#kontakt { scroll-margin-top: 84px; }

/* --------------------------------------------------------------------------
   Rückruf-Formular (niedrigschwelliger Conversion-Pfad)
   -------------------------------------------------------------------------- */
.cb-field {
  width: 100%;
  font: 400 15px/1.4 "Poppins", system-ui, sans-serif;
  color: #ffffff;
  background: #0A0410;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color 200ms cubic-bezier(.2, .8, .2, 1);
}
.cb-field::placeholder { color: rgba(255, 255, 255, 0.4); }
.cb-field:focus { outline: none; border-color: rgba(232, 64, 200, 0.6); }
.btn-grad:disabled { opacity: 0.7; cursor: default; transform: none !important; box-shadow: none !important; }