/* df-deferred.css — DFCE modules (cached)
   Everything NOT needed for first paint / CLS protection. */

:root{
  --primary:#0ea5e9;
  --secondary:#0f172a;
  --light-bg:#f5f7f9;
  --yellow:#FFC107;
  --df-primary-ink:#0369a1;
}

/* Progressive rendering for below-the-fold */
@supports (content-visibility: auto){
  [data-df-belowfold]{
    content-visibility:auto;
    contain-intrinsic-size:1px 1200px;
  }
  /* Reserve enough space so #local doesn't overlap the FAQ in audits/scroll. */
  #local[data-df-belowfold]{contain-intrinsic-size:1px 2600px}
}

/* Icons */
.df-btn-ico{width:20px;height:20px;flex:0 0 auto;margin-right:.5rem}

/* Keep iframes responsive */
iframe{max-width:100%;display:block}

/* Brand highlight */
.df-fix-red{color:#d10000;font-weight:800}

/* Links */
a{color:var(--df-primary-ink)}
a:hover{color:#075985}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* Utilities */
.link-like{background:none;border:0;padding:0;margin:0;cursor:pointer;text-decoration:underline;font:inherit;color:inherit}
.link-like:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.block-link{display:block}
.inline-prg{display:inline;margin:0 .5rem}
.sep{opacity:.6;margin:0 .25rem}

/* Buttons — Bootstrap safe */
.btn.btn-primary{
  --bs-btn-bg: var(--df-primary-ink);
  --bs-btn-border-color: var(--df-primary-ink);
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:#075985;
  --bs-btn-hover-border-color:#075985;
  --bs-btn-hover-color:#fff;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn.btn-primary:hover{transform:translateY(-1px)}

.btn.btn-black{
  --bs-btn-bg:#000;
  --bs-btn-border-color:#000;
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:#333;
  --bs-btn-hover-border-color:#333;
  --bs-btn-hover-color:#fff;
  background:#000;border-color:#000;color:#fff!important;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn.btn-black:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.25)}

.btn.btn-yellow{
  --bs-btn-bg:var(--yellow);
  --bs-btn-border-color:var(--yellow);
  --bs-btn-color:#000;
  --bs-btn-hover-bg:#ffb300;
  --bs-btn-hover-border-color:#ffb300;
  --bs-btn-hover-color:#000;
  background:var(--yellow);border-color:var(--yellow);color:#000!important;
  transition:transform .15s ease, box-shadow .2s ease;
}
.btn.btn-yellow:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,193,7,.35)}

.btn.btn-success{transition:transform .15s ease, box-shadow .2s ease}
.btn.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(25,135,84,.35)}

/* Make buttons with icons align */
.df-hero-cta-bar .btn,
.df-cta-stack .btn,
.local-cta-buttons .btn,
.mobile-cta-bar .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* DFCE HERO */
.df-hero-badge{font-size:1rem;border-radius:.5rem;white-space:normal;line-height:1.4}
.df-hero-title{color:#0a0a0a;line-height:1.15}

.df-hero-left-stack{display:flex;flex-direction:column;gap:18px}
@media (max-width:991px){
  #hero-title{margin-bottom:2.25rem!important}
  .df-hero-right-col{margin-top:.5rem}
  .df-hero-cta-bar{margin-top:28px!important}
}

/* Auf einen Blick */
.df-ai-overview{background:#fff;border-radius:16px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.08);max-width:560px}
.df-ai-overview-title{font-weight:900;color:#0f172a;margin:0 0 10px;font-size:1.05rem}
.df-ai-overview-list{list-style:none!important;padding:0!important;margin:0!important;display:flex;flex-direction:column;gap:8px}
.df-ai-overview-list li{display:flex;gap:10px;align-items:flex-start;color:#1e293b;font-size:1rem;line-height:1.5}
.df-ai-overview-check{flex:0 0 auto;width:22px;height:22px;border-radius:999px;background:#16a34a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;margin-top:2px}

/* video click-to-play */
.df-hero-media{box-shadow:0 18px 55px rgba(0,0,0,.18)}
.df-hero-video{opacity:0;transition:opacity .22s ease}
.df-hero-overlay{opacity:1;transition:opacity .22s ease}
.df-hero-play{cursor:pointer;transition:transform .15s ease,opacity .22s ease;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.df-hero-play:hover{transform:translate(-50%,-50%) scale(1.03)}
.df-hero-play:focus-visible{outline:3px solid rgba(250,204,21,.9);outline-offset:4px}
.df-hero-play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.df-hero-media.is-playing .df-hero-video{opacity:1}
.df-hero-media.is-playing .df-hero-overlay{opacity:0}
.df-hero-media.is-playing .df-hero-play{opacity:0;pointer-events:none}

/* hero CTA bar */
.df-hero-cta-bar{display:flex;gap:16px;justify-content:center;align-items:stretch;margin-top:24px}
.df-hero-cta-bar .btn{border-radius:999px;justify-content:center}
@media (max-width:991px){
  .df-hero-cta-bar{flex-direction:column}
  .df-hero-cta-bar .btn{width:100%}
}
@media (min-width:992px){
  .df-hero-cta-bar{flex-direction:row;flex-wrap:nowrap}
  .df-hero-cta-bar .btn{width:auto;white-space:nowrap}
}

/* Trust */
.avatar-group{display:flex;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid #fff;margin-left:-10px;background:#e2e8f0}
.avatar:first-child{margin-left:0}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.trust-text{font-size:1rem;color:#334155}
.star-rating{color:var(--yellow);font-size:1.3rem;margin-top:8px}

/* STEPS */
.steps-section{padding:100px 0;background:#fff;text-align:left}
.section-title{text-align:center;font-size:2.5rem;font-weight:700;color:#0a0a0a;margin-bottom:70px;line-height:1.3}
.step-card{position:relative;padding:50px 35px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;height:100%;display:flex;flex-direction:column;text-align:left}
.step-card:hover{border-color:var(--yellow);box-shadow:0 8px 30px rgba(255,193,7,.12);transform:translateY(-5px)}
.step-number{position:absolute;top:-20px;left:35px;width:40px;height:40px;background:linear-gradient(135deg,var(--yellow) 0%, #FFD54F 100%);color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;box-shadow:0 4px 12px rgba(255,193,7,.3)}
.step-title{font-size:1.45rem;font-weight:600;color:#0a0a0a;margin-bottom:18px;line-height:1.4}
.step-description{font-size:1.15rem;color:#4b5563;line-height:1.7;margin:0}

/* PRICING */
.df-pricing-card{max-width:980px;margin:0 auto;background:#fff;border-radius:20px;padding:35px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.df-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
@media (max-width:991px){.df-form-grid{grid-template-columns:1fr}.df-pricing-card{padding:25px}}
.df-price-form label{display:block;font-weight:700;color:#0f172a;margin-bottom:8px;font-size:22px}
.df-price-form select,.df-price-form input{width:100%;border:2px solid #e5e7eb;border-radius:12px;padding:14px 16px;background:#f9fafb;font-size:20px;color:#0f172a}
.df-price-form select:focus,.df-price-form input:focus{outline:0;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.df-hint{font-size:16px;color:#6b7280;margin-top:6px;line-height:1.4}
.df-result{margin-top:18px;padding:16px;border-radius:14px;background:#f0f9ff;border:1px solid rgba(14,165,233,.18)}
.df-result-price{font-size:24px;color:#0a0a0a}
.df-preise-trust{margin-top:14px;background:#f0f9ff;border:1px solid rgba(14,165,233,.25);border-radius:14px;padding:14px 16px;color:#0f172a;text-align:left;max-width:820px;margin-left:auto;margin-right:auto}
.df-cta-stack{width:100%;max-width:520px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:stretch;gap:14px}
.df-cta-stack .btn{width:100%;justify-content:center;border-radius:999px}

/* SERVICES */
#services{padding:100px 0;background:linear-gradient(to bottom,#fff 0%,#f8f9fa 100%)}
.section-header{text-align:center;margin-bottom:60px}
.section-header h2{font-size:2.5rem;font-weight:700;color:#0a0a0a;margin-bottom:15px}
.section-header p{font-size:1.25rem;color:#6b7280;max-width:700px;margin:0 auto}
.service-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:transform .25s ease, box-shadow .25s ease;height:100%;display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-10px);box-shadow:0 12px 40px rgba(0,0,0,.12)}
.service-image-wrapper{overflow:hidden;position:relative}
.service-image{width:100%;height:240px;object-fit:cover;transition:transform .4s ease}
.service-card:hover .service-image{transform:scale(1.08)}
.service-badge{position:absolute;top:15px;right:15px;background:rgba(255,193,7,.95);color:#000;padding:6px 14px;border-radius:20px;font-size:.9rem;font-weight:600;backdrop-filter:blur(10px)}
.service-content{padding:30px 25px;flex-grow:1}
.service-title{font-size:1.5rem;font-weight:600;color:#0a0a0a;margin-bottom:15px;line-height:1.3}
.service-description{color:#4b5563;line-height:1.7;font-size:1.05rem;text-align:left}

/* PROJECTS */
#projects{background:#fff}
.project-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .25s ease, box-shadow .25s ease;height:100%;display:flex;flex-direction:column}
.project-card:hover{transform:translateY(-10px);box-shadow:0 12px 40px rgba(0,0,0,.15)}
.project-image-wrapper{position:relative;overflow:hidden;height:320px}
.project-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.project-card:hover .project-image{transform:scale(1.1)}
.project-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 100%);opacity:0;transition:opacity .25s ease}
.project-card:hover .project-overlay{opacity:1}
.project-badge{position:absolute;top:15px;left:15px;background:rgba(255,193,7,.95);color:#000;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:600;backdrop-filter:blur(10px)}
.project-content{padding:25px;background:#fff;flex-grow:1}
.project-title{font-size:1.25rem;font-weight:600;color:#0a0a0a;margin-bottom:10px}
.project-description{font-size:1rem;color:#6b7280;line-height:1.6;margin:0;text-align:left}

/* LOCAL */
#local.local-section{padding:70px 0}
#local .local-section-card{background:#fff;border-radius:20px;padding:42px 36px;box-shadow:0 20px 60px rgba(0,0,0,.10)}
#local .local-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#1e5ba8;margin-bottom:10px}
#local .local-title{font-size:2.2rem;font-weight:800;line-height:1.2;margin:0 0 18px;color:#0a0a0a}
#local .local-body p{font-size:1.05rem;line-height:1.75;color:#2a2a2a;margin:0 0 12px}
#local .local-locations-box{margin-top:26px;background:linear-gradient(135deg,#0ea5e9 0%,#38bdf8 45%,#0369a1 100%);border-radius:16px;padding:26px;box-shadow:0 12px 35px rgba(2,132,199,.25)}
#local .local-locations-title{margin:0 0 14px;color:#fff;text-align:center;font-weight:800;font-size:1.35rem}
#local .local-region-label{margin:0 0 10px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:.75rem}
#local .local-places{list-style:none!important;padding:0!important;margin:0!important;display:flex;flex-direction:column;gap:12px}
#local .local-places li{background:#fff;color:#0f172a;border-radius:10px;padding:14px 16px;box-shadow:0 6px 18px rgba(15,23,42,.12)}
#local .local-places li a{color:var(--df-primary-ink);font-weight:800;text-decoration:none}
#local .local-places li a:hover{text-decoration:underline}
#local .df-local-place-link{color:var(--df-primary-ink);font-weight:800;text-decoration:none;cursor:default}
#local .local-note{margin-top:16px;color:rgba(255,255,255,.95);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:14px 16px}
#local .local-note a{color:#fff;font-weight:800;text-decoration:underline}
#local .local-cta-buttons{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
#local .local-cta-buttons .btn{border-radius:999px;padding:.75rem 1.25rem;font-weight:700}
#local .local-map-wrap{margin-top:22px;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.12);background:#fff}
#local .local-map-wrap .ratio{border-radius:16px;overflow:hidden}
#local .local-map-wrap iframe{width:100%;height:100%;border:0}

/* Accessibility: fix touch target overlap and ensure the whole location card is clickable */
#local .local-locations-box{display:flow-root;position:relative;z-index:2}
#local .local-places li a{display:block;min-height:44px;margin:-14px -16px;padding:14px 16px}

/* Ensure FAQ cannot overlap upward into the local locations list */
#faq,[id^="faqAccordion_"],.accordion,.df-faq,.faq-section{position:relative;z-index:1;clear:both}

/* FAQ */
.accordion-body{text-align:left}

/* Footer (safety) */
.section-dark{background:#0f172a!important;color:#fff}
.section-dark a,.section-dark button.link-like{color:#fff;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.section-dark a:hover,.section-dark button.link-like:hover{text-decoration:underline}
.section-dark hr{border-color:rgba(255,255,255,.25)}
.section-dark .opacity-75{opacity:.9}
@media (max-width:767px){.section-dark{padding-bottom:6rem}}

/* Mobile CTA consistency */
@media (max-width:767px){
  body .hero .d-flex.gap-3.flex-wrap,
  body #local .local-cta-buttons{
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
    gap:14px!important;
    width:100%!important;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
  body .hero .d-flex.gap-3.flex-wrap>.btn,
  body #local .local-cta-buttons .btn{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:999px!important;
    padding:14px 18px!important;
    line-height:1.2!important;
    white-space:nowrap;
  }
}