/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com/about/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/* ========== LILIA – SEITENBAUSTEINE (sauber) ========== */

/* ---- Design-Variablen & Grundmodule ---- */
.svc-wrap{
  --bg:#fff; --ink:#1a1a1a; --muted:#5a5a5a;
  --soft:#fff7fb; --soft-border:#ffd3e8;
  --accent:#e91e63; --accent2:#a31244; --violet:#6a1b9a;
  --rad:22px; --rad-sm:16px;
  --shadow:0 10px 30px rgba(233,30,99,.08);
  --pad:clamp(18px,3vw,28px);
  color:var(--ink);
}
.svc-wrap *{box-sizing:border-box}
.svc-wrap a{color:var(--accent);text-decoration:none}
.svc-wrap a:hover{text-decoration:underline}

/* Hero */
.svc-hero{margin:0 0 18px}
.svc-hero h1{font-size:clamp(28px,4.2vw,40px);line-height:1.15;margin:0 0 10px;color:var(--violet)}
.svc-intro{font-size:clamp(15px,2.2vw,18px);opacity:.92;margin:0}

/* Grid (Für wen + Vorteile) */
.svc-grid{display:grid;gap:18px;margin:24px 0;grid-template-columns:1fr 1fr}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr}}

.svc-card{background:var(--soft);border:1px solid var(--soft-border);border-radius:var(--rad);padding:var(--pad);box-shadow:var(--shadow)}
.svc-card h2{margin:0 0 10px;font-size:clamp(20px,3vw,26px);color:var(--violet)}
.svc-list{margin:0;padding-left:18px}
.svc-list li{margin:8px 0}

/* Benefits als Checkliste */
.svc-check{list-style:none;padding:0;margin:0}
.svc-check li{position:relative;padding-left:28px;margin:10px 0}
.svc-check li::before{content:"";position:absolute;left:0;top:.25em;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 10px rgba(233,30,99,.25)}
.svc-check li::after{content:"";position:absolute;left:5px;top:9px;width:8px;height:2px;background:#fff;transform:rotate(45deg);box-shadow:2px -3px 0 0 #fff inset}

/* Arbeitsweise + CTA */
.svc-flow{display:grid;gap:18px;align-items:start;margin:24px 0;grid-template-columns:1.3fr .9fr}
@media (max-width:1000px){.svc-flow{grid-template-columns:1fr}}
.svc-steps{margin:10px 0 0 18px}
.svc-more{margin-top:12px}

/* CTA-Box */
.svc-cta{position:relative}
.svc-cta-inner{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:1px solid transparent;border-radius:var(--rad);
  padding:var(--pad);box-shadow:var(--shadow);color:#fff
}
.svc-cta-inner h3,.svc-cta-inner p{color:#fff}

/* Buttons */
.svc-btn{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  border-radius:999px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  text-decoration:none;box-shadow:0 8px 20px rgba(233,30,99,.25);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease
}
.svc-btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 12px 26px rgba(233,30,99,.32)}
.svc-btn__icon{display:inline-flex;transform:translateY(-1px)}
.svc-btn--light{background:#fff;color:var(--accent2);box-shadow:0 10px 24px rgba(233,30,99,.25)}
.svc-btn--light:hover{transform:translateY(-1px)}

/* Abschluss-CTA */
.svc-final{
  text-align:center;margin:28px 0 6px;background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:var(--rad);padding:var(--pad);color:#fff
}
.svc-final h2,.svc-final p,.svc-final .svc-note{color:#fff}

/* FAQ */
.svc-faq{margin:28px 0}
.svc-faq h2{margin:0 0 10px;color:var(--violet)}
.svc-faq details{background:#fff;border:1px solid #eee;border-radius:var(--rad-sm);margin:10px 0;padding:12px 14px;box-shadow:0 2px 6px rgba(17,17,17,.04)}
.svc-faq summary{cursor:pointer;font-weight:700;list-style:none}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq details div{margin-top:8px;color:var(--muted)}


/* ========== HEADER (kleiner Lesbarkeits-Hotfix, optional) ========== */
.lx-header{--ink:#1a1a1a;--ink-strong:#111;color:#1a1a1a !important}
.elementor-location-header,.lx-header .lx-nav{color:#1a1a1a !important}
.lx-header a,.lx-header .lx-menu a,.lx-header .lx-topbtn,.lx-header .lx-submenu a,.lx-header .flag-pill,.lx-header .flag-label{color:#1a1a1a !important}
.lx-header .lx-menu a:hover,.lx-header .lx-topbtn:hover,.lx-header .lx-topbtn[aria-expanded="true"],.lx-header .lx-submenu a:hover{color:#1a1a1a !important;background:#fff7fb;border-color:#ffd3e8}
.lx-header .lx-submenu{background:#fff !important;border:1px solid #f2e1ea !important}
.lx-header .lx-submenu .all-link a{background:linear-gradient(135deg,#fff,#fff9fd) !important;border-color:#ffe5f1 !important}
.lx-header .lx-nav-cta{color:#fff !important}
.lx-header .caret{color:#1a1a1a !important}


/* ========== FOOTER – LIGHT THEME (Endgültig) ========== */

/* 1) Theme-/Alt-Footer ausblenden, falls noch gerendert */
.site-footer,.ast-footer-wrap,.ast-footer-bar,.ast-builder-footer-wrap,.ast-footer-adv,.ast-small-footer,
.hfe-footer,.hfe-footer-wrapper{display:none !important}

/* 2) Heller Footer-Stil – wirkt, wenn die Section die Klasse "lx-footer lx-footer--light" hat */
html body .elementor-location-footer,
html body footer.lx-footer--light,
html body .lx-footer--light{
  background:#f7f8fa !important;
  color:#0f172a;
  border-top:1px solid #e6e8eb;
}

.lx-footer--light .lx-footer__list{
  background:#fff;
  border:1px solid #e6e8eb;
  border-radius:14px;
}

.lx-footer--light .lx-footer__head{color:#0f172a}
.lx-footer--light .lx-footer__claim{color:#0f172a}
.lx-footer--light .lx-footer__fine{color:#475569}

.lx-footer--light .lx-footer__list a{
  color:#0f172a !important;text-decoration:none;
  transition:color .15s ease,background .15s ease
}
.lx-footer--light .lx-footer__list a:hover{
  color:#e91e63 !important;background:rgba(233,30,99,.08)
}

/* (optional) Untere Linie, falls vorhanden */
.lx-foot-bottom{border-top:1px solid #ddd !important;color:#555 !important}

/* Mobile Kachelraster bleibt vom Markup gesteuert; kein zusätzliches Grid nötig */
/* Skip-Link unsichtbar, bis er den Fokus bekommt (a11y-konform) */
.skip-link,
.screen-reader-text.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus,
.screen-reader-text.skip-link:focus {
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: .55rem .8rem;
  background: #fff;
  border: 2px solid #e91e63;
  border-radius: 999px;
  z-index: 99999;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}