/* ============================================================
   Elektrotechnik Schwab - Shared Stylesheet
   Extracted from inline styles across all pages.
   ============================================================ */

/* ==========================================================
   0. SELF-HOSTED INTER FONT (DSGVO-konform)
   ========================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================
   1. CSS VARIABLES
   ========================================================== */
:root {
    --brand-yellow: #E9DF3C;
    --brand-dark: #1F2937;
    --brand-yellow-hover: #D4CA35;
    --brand-yellow-dark: #b8af1e; /* Nur für Flächen/Deko — als Text auf Weiß nur ~2.2:1! */
    /* Texttaugliche Markenfarbe auf hellen Flächen: #7a6d00 auf Weiß = 5.2:1 (WCAG AA) */
    --brand-yellow-ink: #7a6d00;
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-800: #262626;
    --neutral-900: #171717;
}

.site-header-inner { padding-top: 10px; padding-bottom: 10px; }
.site-header-logo { height: 48px; }
.site-header-spacer { height: 72px; }
.subpage-hero { background: #1f2937; color: #fff; border-bottom: 1px solid #ffffff14; }
.subpage-hero-inner { max-width: 1200px; margin: auto; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.subpage-eyebrow { color: var(--brand-yellow); font-size: 12px; font-weight: 650; letter-spacing: .07em; margin-bottom: 12px; }
.subpage-hero h1 { color: #fff; font-size: clamp(28px, 3vw, 38px); font-weight: 750; line-height: 1.18; letter-spacing: -.025em; }
.subpage-intro { color: #cbd5e1; font-size: 16px; line-height: 1.65; max-width: 650px; margin-top: 12px; }
.subpage-action { display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-shrink: 0; background: var(--brand-yellow); color: var(--brand-dark); font-size: 15px; font-weight: 700; padding: 13px 20px; min-height: 48px; border-radius: 12px; transition: transform 200ms, background 200ms; }
.subpage-action:hover { transform: translateY(-2px); background: var(--brand-yellow-hover); }
.subpage-action:focus-visible { outline: 3px solid #64748b; outline-offset: 4px; }
.service-proof { padding: 48px 24px; background: #f1f4f7; }
.service-proof h2 { color: var(--brand-dark); font-size: clamp(26px, 3vw, 36px); line-height: 1.25; font-weight: 750; letter-spacing: -.025em; margin-bottom: 28px; }
.service-project { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #dce2e9; box-shadow: 0 12px 30px #1f293708; }
.service-project > img { width: 100%; height: 100%; object-fit: contain; background: #101827; }
.service-project-copy { padding: 32px; align-self: center; }
.service-project-tag { font-size: 13px; color: #475569; }
.service-project h3 { font-size: 30px; font-weight: 750; line-height: 1.2; margin: 18px 0; }
.service-project p { color: #475569; font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.service-project .marketing-text-link { display: flex; font-size: 13px; }
.service-proof-facts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid #dce2e9; }
.service-proof-facts li { display: flex; align-items: center; gap: 12px; }
.service-proof-facts li > span { font-size: 23px; }
.service-proof-facts strong { display: block; font-size: 15px; color: var(--brand-dark); }
.service-proof-facts small { display: block; font-size: 12px; color: #475569; margin-top: 4px; }
@media (max-width: 767px) {
 .site-header-inner { padding-top: 8px; padding-bottom: 8px; }
 .site-header-logo { height: 44px; }
 .site-header-spacer { height: 64px; }
 .subpage-hero-inner { padding: 28px 20px; flex-direction: column; align-items: flex-start; gap: 20px; }
 .subpage-intro { font-size: 15px; }
 .service-proof { padding: 36px 20px; }
 .service-project { grid-template-columns: 1fr; }
 .service-project > img { height: auto; }
 .service-project-copy { padding: 24px; }
 .service-project h3 { font-size: 27px; }
 .service-proof-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
 .service-proof-facts li { align-items: flex-start; gap: 8px; }
 .service-proof-facts strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .subpage-action { transition: none; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html:has(dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }
/* Privacy controls and the public project/inquiry flow. */
.cap-control { width: 100%; max-width: 420px; margin: 20px auto; }
.cap-button { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 68px; padding: 16px; background: #fff; border: 1px solid #dce2e9; border-radius: 12px; color: var(--brand-dark); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cap-button:hover { border-color: #b8af1e; background: #fffef5; }
.cap-button:disabled { cursor: default; }
.cap-button:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
.cap-box { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 6px; display: grid; place-items: center; background: var(--brand-yellow); color: var(--brand-dark); border: 1px solid #b8af1e; }
.cap-button[aria-busy="true"] .cap-box { border-radius: 50%; background: transparent; border: 3px solid var(--brand-yellow); border-top-color: var(--brand-dark); animation: cap-spin .8s linear infinite; }
.cap-hint { margin: 10px 0 0; color: #475569; font-size: 13px; line-height: 1.6; text-align: center; }
.cap-hint:empty { display: none; }
@keyframes cap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cap-button[aria-busy="true"] .cap-box { animation: none; } }
.privacy-dialog { color: var(--brand-dark); background: #fff; width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 1px solid #d9dee5; border-radius: 16px; overflow: auto; }
.privacy-dialog::backdrop { background: #0f172ab3; }
.privacy-dialog h2 { font-size: 24px; font-weight: 750; margin-bottom: 16px; }
.privacy-dialog p { font-size: 15px; line-height: 1.65; margin-bottom: 16px; }
.privacy-dialog a, .map-placeholder a, .inquiry-privacy a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.privacy-option { display: flex; gap: 14px; padding: 16px; border: 1px solid #d9dee5; border-radius: 12px; margin-bottom: 18px; cursor: pointer; }
.privacy-option input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 3px; accent-color: var(--brand-dark); }
.privacy-option span span { display: block; font-size: 14px; line-height: 1.6; margin-top: 4px; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.privacy-actions button { min-height: 44px; flex: 1 1 190px; background: var(--brand-dark); color: #fff; border-radius: 10px; padding: 12px; font-weight: 600; font-size: 14px; }
.privacy-actions .privacy-cancel { color: var(--brand-dark); background: #f1f3f5; }
.privacy-dialog :focus-visible, .private-map :focus-visible, .privacy-footer-link:focus-visible { outline: 3px solid var(--brand-yellow-ink); outline-offset: 3px; }
.privacy-footer-link { min-height: 44px; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.site-footer { margin-top: 0; background: #0f172a; color: #fff; border-top: 4px solid var(--brand-yellow); }
.site-footer-inner { max-width: 1200px; margin: auto; padding: 52px 24px 20px; }
.site-footer-grid { display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 56px; padding-bottom: 36px; }
.site-footer-logo { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; }
.site-footer-logo img { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; transition: transform 250ms; }
.site-footer-logo:hover img { transform: rotate(-8deg); }
.site-footer-logo span { color: #fff; font-size: 17px; font-weight: 750; line-height: 1.4; }
.site-footer-logo strong { display: block; color: var(--brand-yellow); font-size: 14px; font-weight: 550; margin-top: 4px; }
.site-footer-brand > p { color: #c1cad8; font-size: 14px; line-height: 1.8; margin: 20px 0 12px; }
.site-footer h2 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.site-footer-nav { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer-nav a, .site-footer-social { min-height: 44px; display: inline-flex; align-items: center; color: #c1cad8; font-size: 14px; }
.site-footer-social { gap: 10px; }
.site-footer-social svg { width: 20px; height: 20px; color: var(--brand-yellow); }
.site-footer .site-footer-phone { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-size: 21px; font-weight: 650; white-space: nowrap; }
.site-footer-contact p, .site-footer-contact address { font-size: 14px; color: #c1cad8; line-height: 1.8; font-style: normal; }
.site-footer-contact address { margin: 14px 0 8px; }
.site-footer-contact-link { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; color: var(--brand-yellow); font-size: 14px; font-weight: 600; }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff26; padding-top: 16px; }
.site-footer-bottom > p { color: #aab6c9; font-size: 13px; }
.site-footer-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-footer-bottom a, .site-footer-bottom button { display: inline-flex; align-items: center; min-height: 44px; color: #c1cad8; font-size: 13px; text-decoration: none; }
.site-footer-bottom .privacy-footer-link { background: transparent; padding: 0; border: 0; font-weight: 400; }
.site-footer a:hover, .site-footer button:hover { color: var(--brand-yellow); }
.site-footer :focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 4px; border-radius: 4px; }
.process-grid h3 > span { display: inline-block; margin-right: 4px; }
.video-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.video-toolbar p { color: var(--brand-dark); font-size: 15px; font-weight: 600; }
.video-toolbar button { background: var(--brand-yellow); color: var(--brand-dark); font-size: 14px; font-weight: 650; min-height: 44px; padding: 10px 18px; border-radius: 12px; }
.video-toolbar button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; }
/* Visible, finite entrance and icon animations; content keeps its layout space. */
.marketing-home .hero-section h1 { animation: schwab-arrive 700ms 80ms both; }
.marketing-home .hero-section p { animation: schwab-arrive 700ms 180ms both; }
.marketing-home .home-brand-spark { display: inline-block; animation: schwab-spark 1500ms 2 ease-in-out; }
.marketing-home .service-icon { animation: schwab-float 1800ms 2 ease-in-out; }
.marketing-home .service-accent:nth-child(2) .service-icon { animation-delay: 250ms; }
.marketing-home .service-accent:nth-child(3) .service-icon { animation-delay: 500ms; }
.marketing-home .cta-pulse { animation: schwab-button-glow 1800ms 2 ease-in-out; }
.marketing-home .cta-pulse::before, .marketing-home .cta-pulse::after,
.marketing-home .animate-pulse, .marketing-home .animate-bounce, .marketing-home .instagram-icon-glow { animation-iteration-count: 2; }
.marketing-home .gradient-text, .marketing-home .instagram-gradient, .marketing-home .glitch { animation-iteration-count: 1; }
.marketing-home .service-accent { transition: transform 280ms, box-shadow 280ms; }
.marketing-home .service-accent:hover { transform: translateY(-5px); box-shadow: 0 15px 30px #1f29371a; }
.marketing-home .home-energy { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.marketing-home .home-energy::after { content: ''; position: absolute; width: 70%; height: 100%; top: 0; left: 0; background: linear-gradient(105deg, transparent 30%, #e9df3c0e 50%, transparent 70%); transform: translateX(-100%) skewX(-20deg); animation: schwab-light-pass 3s 200ms both; }
@keyframes schwab-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes schwab-spark { 0%,100% { transform: rotate(0); } 40% { transform: rotate(-12deg) scale(1.15); } 70% { transform: rotate(8deg); } }
@keyframes schwab-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes schwab-button-glow { 0%,100% { box-shadow: 0 4px 12px #e9df3c14; } 50% { box-shadow: 0 6px 24px #e9df3c55; } }
@keyframes schwab-light-pass { from { transform: translateX(-100%) skewX(-20deg); opacity: 0; } 25% { opacity: 1; } to { transform: translateX(157%) skewX(-20deg); opacity: 0; } }
@media (max-width: 850px) {
    .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-footer-brand { grid-column: 1 / -1; }
    .site-footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .site-footer-inner { padding: 32px 20px 16px; }
    .site-footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
    .site-footer h2 { margin-bottom: 8px; }
    .site-footer-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .site-footer-nav h2 { grid-column: 1 / -1; }
    .site-footer-bottom nav { gap: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .marketing-home *, .marketing-home *::before, .marketing-home *::after,
    .site-footer *, .home-call-button { animation: none !important; transition: none !important; }
}
.private-map { position: relative; min-height: 350px; border: 1px solid #d9dee5; border-radius: 16px; background: #f5f6f8; overflow: hidden; }
.private-map iframe { width: 100%; height: 450px; border: 0; display: block; }
.map-placeholder { padding: 36px 24px; max-width: 620px; margin: auto; text-align: center; }
.map-placeholder h4 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.map-placeholder p { margin-bottom: 14px; line-height: 1.6; }
.map-placeholder .btn-primary { min-height: 48px; padding: 12px 24px; border-radius: 12px; display: block; margin: 18px auto 12px; }
.map-revoke { position: absolute; z-index: 1; top: 12px; right: 12px; background: #fff; color: var(--brand-dark); border: 1px solid #64748b; padding: 12px 16px; border-radius: 10px; min-height: 44px; font-weight: 600; }
.marketing-inner { max-width: 1120px; margin: 0 auto; }
.marketing-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 16px; }
.marketing-eyebrow::before { content: ""; width: 26px; height: 4px; border-radius: 2px; background: var(--brand-yellow); }
.project-process, .project-reference { padding: 64px 24px; }
.project-process { background: #f5f6f8; }
.project-process h2, .project-reference h2 { font-size: clamp(27px, 3vw, 38px); font-weight: 750; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 32px; color: var(--brand-dark); max-width: 740px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.process-index { font-size: 14px; font-weight: 750; color: var(--brand-dark); background: var(--brand-yellow); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 18px; }
.process-grid h3 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.process-grid p { color: #4b5563; font-size: 16px; line-height: 1.7; }
.process-grid .process-result { font-size: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #d9dee5; }
.marketing-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px; color: var(--brand-dark); font-size: 15px; font-weight: 650; text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.service-overview-link { display: flex; justify-content: center; }
.reference-more { font-size: 15px; color: #4b5563; margin-top: 20px; }
.reference-more a { color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.reviews-section { padding: 48px 24px; background: #f1f4f7; border-block: 1px solid #e1e5e9; }
.reviews-heading { text-align: center; margin-bottom: 24px; }
.reviews-heading h2 { font-size: clamp(27px, 3vw, 36px); font-weight: 750; letter-spacing: -.025em; }
.reviews-section .review-grid > div { box-shadow: none; border: 1px solid #dce2e9; border-top: 3px solid var(--brand-yellow); border-radius: 16px; padding: 24px; }
.reviews-section .reviews-cards { overflow: visible; }
.reviews-section .text-gray-400 { color: #475569; }
.reviews-section .review-grid p { font-size: 15px; line-height: 1.7; }
.home-call-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 64px; padding: 14px 24px; background: var(--brand-yellow); color: var(--brand-dark); border-radius: 12px; font-size: 16px; font-weight: 700; text-align: left; transition: background 200ms, transform 200ms; }
.home-call-button svg { width: 24px; height: 24px; }
.home-call-button small { display: block; font-size: 13px; font-weight: 500; margin-top: 3px; }
.home-call-button:hover { background: var(--brand-yellow-hover); transform: translateY(-2px); }
.home-call-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
#faq details { padding: 0; overflow: hidden; }
#faq details > summary { padding: 22px 24px; min-height: 68px; gap: 20px; }
#faq details > summary svg { flex-shrink: 0; }
#faq details > summary:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: -4px; border-radius: inherit; }
#faq details > p { margin: 0; padding: 0 24px 24px; }
#faq details > summary:hover { background: #e9df3c0c; }
@media (max-width: 767px) { .subpage-hero .subpage-hero-inner { align-items: center; padding: 24px 20px; gap: 16px; } .reviews-section { padding: 36px 20px; } }
.marketing-home #reviewTicker > div { width: auto; min-width: 0; }
.marketing-home .hero-section::before, .marketing-home .hero-section::after,
.marketing-home .glow-line, .marketing-home .hero-shimmer, .marketing-home #circuitCanvas,
.marketing-home .hero-bolt, .marketing-home .particle { display: none; }
.marketing-home .text-shimmer { background: none; color: var(--brand-yellow); -webkit-text-fill-color: var(--brand-yellow); }
.marketing-home .typing-container { min-height: 0; }


.marketing-page #scrollToTop { display: none; }
.marketing-page #chatbot { display: none; }
.service-jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 28px 24px 0; }
.service-jump-links a { display: flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #d5dae1; border-radius: 999px; color: var(--brand-dark); font-weight: 600; font-size: 14px; }
.service-jump-links a:hover { border-color: var(--brand-yellow-ink); }
.service-planning { position: relative; z-index: 1; margin-top: 28px; padding-top: 24px; border-top: 1px solid #d9dee5; }
.service-planning h4 { font-size: 21px; font-weight: 700; margin-bottom: 12px; }
.service-planning p { color: #4b5563; font-size: 16px; line-height: 1.7; margin-bottom: 12px; max-width: 850px; }
.service-planning a + a { margin-left: 20px; }
.marketing-page .service-card, #anfrage, #projekt-hallenbeleuchtung, #referenzen, #ablauf, #mapContainer { scroll-margin-top: 110px; }
.inquiry-topic legend, .inquiry-subheading { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.inquiry-topic label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.inquiry-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.inquiry-details[hidden], .map-placeholder[hidden], .map-revoke[hidden] { display: none; }
.inquiry-hint { font-size: 14px; line-height: 1.65; color: #4b5563; margin-top: 12px; }
.inquiry-privacy { font-size: 14px; line-height: 1.6; color: #4b5563; }
.inquiry-page .form-control { min-height: 48px; }
.inquiry-page select.form-control { white-space: normal; text-overflow: ellipsis; padding-right: 28px; }
.inquiry-page dialog.error-modal-overlay, .inquiry-page dialog.success-modal-overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; overflow-y: auto; }
.inquiry-page dialog:not([open]) { display: none !important; }
.inquiry-page .success-modal, .inquiry-page .error-modal { max-height: calc(100dvh - 32px); overflow-y: auto; }
.inquiry-page .success-icon-circle, .inquiry-page .error-icon-circle { animation: none; }
.inquiry-page dialog .text-gray-400, .inquiry-page dialog .text-gray-500 { color: #cbd5e1; }
.inquiry-page dialog a.text-brand-yellow-ink { color: var(--brand-yellow); }
.marketing-page .hero-shimmer, .marketing-page .hero-sparks, .marketing-page .hero-bolt { display: none; }
.marketing-page .hero-section::before, .marketing-page .hero-section::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .inquiry-page dialog *, .inquiry-page dialog { animation: none !important; transition: none !important; }
}
@media (max-width: 639px) {
    .project-process, .project-reference { padding: 40px 16px; }
    .process-grid, .review-grid, .inquiry-details { grid-template-columns: 1fr; }
    .process-grid { gap: 28px; }
    .privacy-dialog { padding: 22px; }
    .private-map iframe { height: 350px; }
    .marketing-home .journey-cta { margin-right: 0; }
}

/* Textakzent in Markenfärbung mit ausreichend Kontrast auf hellen Flächen */
.text-brand-yellow-ink { color: var(--brand-yellow-ink); }
.hover-text-brand-yellow-ink:hover { color: var(--brand-yellow-ink); }

/* ==========================================================
   2. UNIVERSAL FONT-FAMILY
   ========================================================== */
* {
    font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}

/* ==========================================================
   3. SMOOTH SCROLLING
   ========================================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================================
   4. BODY BACKGROUND & PATTERN
   ========================================================== */
body {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fafc 30%,
        #f1f5f9 70%,
        #e2e8f0 100%
    );
    /* fixed (kein Scroll-Mitlaufen) nur auf Desktop — auf Touch-Geräten
       verursacht es ständige Repaints und ist auf iOS Safari defekt */
    background-attachment: scroll;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    body {
        background-attachment: fixed;
    }
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 2px 2px, rgba(233, 223, 60, 0.10) 1px, transparent 0),
        radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.07) 2px, transparent 0);
    background-size: 40px 40px, 120px 120px;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
}

/* Daueranimation nur auf Desktop-Geräten ohne reduced-motion —
   spart auf Mobilgeräten permanent Kompositor-Arbeit (Akku/CPU) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body::before {
        animation: patternFlow 30s ease-in-out infinite;
        will-change: transform, opacity;
    }
}

@keyframes patternFlow {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.3;
    }
    50% {
        transform: translate3d(20px, 20px, 0);
        opacity: 0.1;
    }
}

/* ==========================================================
   5. CUSTOM SCROLLBAR
   ========================================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-yellow) var(--neutral-100);
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-yellow);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-yellow-hover);
}

/* ==========================================================
   6. GLASS HEADER
   ========================================================== */
.glass-header {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ==========================================================
   7. MODERN CARDS
   ========================================================== */
.modern-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(229, 231, 235, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.modern-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .modern-card:hover::before {
        left: 100%;
    }

    .modern-card:hover {
        transform: translateY(-8px);
        box-shadow:
            0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04),
            0 0 0 1px rgba(233, 223, 60, 0.3),
            0 0 20px -4px rgba(233, 223, 60, 0.15);
        border-color: var(--brand-yellow);
    }
}

/* ==========================================================
   8. BUTTONS
   ========================================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #f4d03f 100%);
    color: var(--brand-dark);
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(233, 223, 60, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px 0 rgba(233, 223, 60, 0.45),
        0 4px 10px 0 rgba(0, 0, 0, 0.08);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px 0 rgba(233, 223, 60, 0.3);
    transition-duration: 0.1s;
}

.btn-secondary {
    background: white;
    color: var(--brand-dark);
    border: 2px solid var(--neutral-200);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
}

.btn-secondary:hover {
    border-color: var(--brand-yellow);
    background: var(--brand-yellow);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 20px 0 rgba(233, 223, 60, 0.3),
        0 4px 8px 0 rgba(0, 0, 0, 0.06);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
    transition-duration: 0.1s;
}

/* ==========================================================
   9. GRADIENT TEXT
   ========================================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #f7dc6f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    animation: glowPulse 3s ease-in-out infinite;
    padding-bottom: 0.15em;
    line-height: 1.2;
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(233, 223, 60, 0.4))
                drop-shadow(0 0 20px rgba(233, 223, 60, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(233, 223, 60, 0.8))
                drop-shadow(0 0 40px rgba(233, 223, 60, 0.4));
    }
}

/* ==========================================================
   10. TYPING EFFECT
   ========================================================== */
.typing-container {
    display: inline-block;
}

.typing-text {
    display: inline-block;
    border-right: 3px solid var(--brand-yellow);
    animation: blink 0.75s step-end infinite;
}

@keyframes blink {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: var(--brand-yellow);
    }
}

.typing-done {
    border-right: none !important;
    animation: none !important;
}

/* ==========================================================
   11. CORE ANIMATIONS (KEYFRAMES)
   ========================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate3d(12px, -25px, 0) scale(1.1);
        opacity: 1;
    }
    50% {
        transform: translate3d(-8px, -12px, 0) scale(0.95);
        opacity: 0.85;
    }
    75% {
        transform: translate3d(15px, -30px, 0) scale(1.05);
        opacity: 0.9;
    }
}

@keyframes shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ==========================================================
   12. ANIMATE ELEMENT (IntersectionObserver)
   ========================================================== */
.animate-element {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-element.in-view {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Slide in from left */
.animate-element.from-left {
    transform: translateX(-30px);
}
.animate-element.from-left.in-view {
    transform: translateX(0);
}

/* Slide in from right */
.animate-element.from-right {
    transform: translateX(30px);
}
.animate-element.from-right.in-view {
    transform: translateX(0);
}

/* Scale in */
.animate-element.scale-in {
    transform: scale(0.9);
}
.animate-element.scale-in.in-view {
    transform: scale(1);
}

/* ==========================================================
   14. TEXT EFFECTS
   ========================================================== */

/* Text Shimmer Effect */
.text-shimmer {
    background: linear-gradient(90deg,
        var(--brand-yellow) 0%,
        #fff 25%,
        var(--brand-yellow) 50%,
        #fff 75%,
        var(--brand-yellow) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* 3D Hover Tilt Effect */
.tilt-3d {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.tilt-3d:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.02);
}

/* Neon Glow Border */
.neon-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, var(--brand-yellow), #f59e0b, var(--brand-yellow)) border-box;
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 5px var(--brand-yellow), 0 0 10px var(--brand-yellow); }
    50% { box-shadow: 0 0 20px var(--brand-yellow), 0 0 40px var(--brand-yellow); }
}

/* Bouncy Hover */
.bounce-hover {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-hover:hover {
    transform: scale(1.1) translateY(-5px);
}

/* Glitch Text Effect */
.glitch {
    position: relative;
}

.glitch:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

/* ==========================================================
   15. STAGGER DELAYS
   ========================================================== */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* ==========================================================
   16. ICON ANIMATIONS
   ========================================================== */

/* Heartbeat Pulse */
.icon-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.15); }
    20% { transform: scale(1); }
    30% { transform: scale(1.1); }
    40% { transform: scale(1); }
}

/* Spin on Hover */
.icon-spin-hover {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon-spin-hover:hover {
    transform: rotate(360deg) scale(1.2);
}

/* Rubber Band */
.icon-rubber {
    animation: rubberBand 1.5s ease-in-out infinite;
}
@keyframes rubberBand {
    0%, 100% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
}

/* Swing Animation */
.icon-swing {
    transform-origin: top center;
    animation: swing 2s ease-in-out infinite;
}
@keyframes swing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
}

/* Jello Wobble */
.icon-jello {
    animation: jello 2s ease-in-out infinite;
}
@keyframes jello {
    0%, 100% { transform: skewX(0deg) skewY(0deg); }
    20% { transform: skewX(-12deg) skewY(-3deg); }
    40% { transform: skewX(8deg) skewY(2deg); }
    60% { transform: skewX(-4deg) skewY(-1deg); }
    80% { transform: skewX(2deg) skewY(0.5deg); }
}

/* Glow Pulse */
.icon-glow {
    animation: iconGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 0 transparent);
}
@keyframes iconGlow {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(233, 223, 60, 0.3)); }
    50% { filter: drop-shadow(0 0 20px rgba(233, 223, 60, 0.8)); }
}

/* Wave Animation */
.icon-wave {
    animation: wave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
}

/* Zoom Pulse */
.icon-zoom-pulse {
    animation: zoomPulse 2s ease-in-out infinite;
}
@keyframes zoomPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Electric Shake */
.icon-electric {
    animation: electricShake 0.5s ease-in-out infinite;
}
@keyframes electricShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-2px) rotate(-1deg); }
    20% { transform: translateX(2px) rotate(1deg); }
    30% { transform: translateX(-2px) rotate(0deg); }
    40% { transform: translateX(2px) rotate(1deg); }
    50% { transform: translateX(-2px) rotate(-1deg); }
    60% { transform: translateX(2px) rotate(0deg); }
    70% { transform: translateX(-2px) rotate(-1deg); }
    80% { transform: translateX(2px) rotate(1deg); }
    90% { transform: translateX(-1px) rotate(0deg); }
}

/* ==========================================================
   20. MAGNETIC BUTTON & RIPPLE EFFECT
   ========================================================== */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s, opacity 0.3s;
}

.ripple:active::after {
    transform: scale(2);
    opacity: 1;
    transition: 0s;
}

/* ==========================================================
   21. FOOTER GLASS MORPHISM
   ========================================================== */
.footer-glass {
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px 0 rgba(31, 41, 55, 0.06);
    border: 1px solid rgba(229, 231, 235, 0.4);
}

/* ==========================================================
   22. JOB POPUP STYLES
   ========================================================== */
#jobPopup {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#jobPopupContent {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================
   23. KNX JOURNEY / TIMELINE SECTION
   ========================================================== */
.knx-journey {
    background: linear-gradient(180deg, #0F172A, #1a1a2e 55%, #0F172A);
    color: #fff;
    padding: 64px 24px;
    scroll-margin-top: 88px;
}
.journey-inner { max-width: 1240px; margin: auto; }
.journey-header { text-align: center; margin-bottom: 32px; }
.journey-eyebrow { color: var(--brand-yellow); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.journey-header h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 14px; }
.journey-header h2 span { color: var(--brand-yellow); }
.journey-header > p:last-child { color: #b8bfcc; font-size: 17px; }
.journey-nav { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 5px 4px 12px; margin-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--brand-yellow) transparent; }
.journey-nav::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: #384052; }
.journey-tab { position: relative; flex: 1 0 56px; display: flex; align-items: center; flex-direction: column; gap: 8px; min-height: 76px; padding: 0 4px 8px; color: #b8bfcc; border-radius: 12px; font-size: 15px; font-weight: 600; transition: color 300ms, background 300ms; }
.journey-tab svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #172033; border: 1px solid #41495a; transition: background 300ms, border-color 300ms; }
.journey-tab[aria-selected="true"] { color: var(--brand-yellow); }
.journey-tab[aria-selected="true"] svg { background: #303129; border-color: var(--brand-yellow); }
.journey-tab:hover { background: #ffffff06; color: #fff; }
.journey-tab[aria-selected="true"]:hover { color: var(--brand-yellow); }
.knx-journey :focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }
/* All panels share one grid cell: the tallest content reserves the space,
   including at larger text sizes. Hidden panels remain inaccessible. */
.journey-panels { display: grid; }
.journey-panel, .journey-panel[hidden] { display: grid; grid-area: 1 / 1; grid-template-rows: auto 1fr; min-width: 0; border-radius: 16px; }
.journey-panel[hidden] { visibility: hidden; pointer-events: none; }
.journey-panel:not([hidden]) { animation: journey-enter 320ms ease-out both; }
.journey-moment { font-size: 20px; font-weight: 600; margin-bottom: 18px; letter-spacing: -.02em; text-align: center; }
.journey-moment > span { color: var(--brand-yellow); font-size: 14px; letter-spacing: 0; margin-right: 12px; font-variant-numeric: tabular-nums; }
.journey-comparison { display: grid; grid-template-columns: 1fr 40px 1fr; }
.journey-card { min-width: 0; border: 1px solid #ffffff24; border-radius: 16px; padding: 28px; background: #ffffff03; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.journey-card h4 { font-size: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; color: #b8bfcc; }
.journey-card-heading { display: flex; align-items: center; justify-content: center; gap: 12px; }
.journey-card-knx { background: linear-gradient(125deg, #ffffff08, #e9df3c06), var(--brand-dark); border-color: #e9df3c66; box-shadow: 0 8px 36px #e9df3c06; }
.journey-card-knx h4 { color: var(--brand-yellow); }
.journey-scene { color: var(--brand-yellow); }
.journey-scene svg { width: 26px; height: 26px; }
.journey-panel:not([hidden]) .journey-scene { animation: journey-light 380ms ease-out both; }
.journey-copy { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; font-weight: 500; letter-spacing: -.02em; margin-top: 22px; color: #c5cad3; }
.journey-card-knx .journey-copy { color: #fff; margin-top: 15px; }
.journey-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; padding: 0; list-style: none; }
.journey-playback { display: block; margin: -6px auto 22px; min-height: 44px; padding: 8px 16px; font-size: 13px; color: #cbd5e1; border: 1px solid #ffffff24; border-radius: 999px; }
.journey-playback:hover { border-color: var(--brand-yellow); color: var(--brand-yellow); }
.journey-chips li { font-size: 12px; line-height: 1.5; color: #e0e3e8; padding: 4px 9px; border: 1px solid #ffffff24; border-radius: 999px; }
.journey-arrow { align-self: center; text-align: center; color: #8c96a8; font-size: 24px; }
/* Schwab's own interactive home: shared KNX day scenes and energy story. */
.home-explorer { border: 1px solid #ffffff24; border-radius: 24px; background: #142034; overflow: hidden; box-shadow: 0 24px 80px #050c1845; }
.home-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #ffffff18; background: #111b2d; }
.home-modes { display: flex; padding: 4px; gap: 4px; background: #080f1b; border: 1px solid #ffffff1f; border-radius: 12px; }
.home-modes button { min-height: 44px; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 650; color: #cbd5e1; transition: background .25s, color .25s; }
.home-modes button[aria-pressed="true"] { color: var(--brand-dark); background: var(--brand-yellow); }
.home-example { color: #b8c3d2; font-size: 12px; }
.home-stage { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.home-illustration { min-width: 0; position: relative; align-self: center; background: #142337; }
.home-scene-caption { display: flex; align-items: center; gap: 9px; height: 72px; color: #d6dfeb; font-size: 13px; padding: 8px 20px; }
.home-scene-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--brand-yellow); }
.home-scene-toggle { flex-shrink: 0; margin-left: auto; min-height: 44px; min-width: 100px; padding: 10px 12px; font-size: 12px; color: #e2e8f0; border: 1px solid #ffffff24; background: #ffffff06; border-radius: 8px; }
.home-scene-toggle:hover { background: #ffffff10; color: var(--brand-yellow); }
.home-drawing { display: block; width: 100%; height: auto; }
.home-scene-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; background: #ffffff0a; }
.home-scene-progress::after { content: ''; display: block; height: 100%; background: var(--brand-yellow); transform-origin: left; animation: home-scene-progress 6s linear infinite; }
.home-live-indicator { display: inline-block; width: 6px; height: 6px; background: var(--brand-yellow); border-radius: 50%; margin-right: 6px; }
.home-sky-day, .home-sky-evening, .home-stars { transition: opacity 1.6s ease; }
.home-sky-day { opacity: .5; }
.home-sky-evening { opacity: .55; }
.home-stars { opacity: 0; }
[data-time="1"] .home-sky-day, [data-time="2"] .home-sky-day { opacity: 1; }
[data-time="1"] .home-sky-evening, [data-time="2"] .home-sky-evening, [data-time="4"] .home-sky-evening { opacity: 0; }
[data-time="3"] .home-sky-day, [data-time="4"] .home-sky-day { opacity: 0; }
[data-time="3"] .home-sky-evening { opacity: 1; }
[data-time="4"] .home-stars { opacity: 1; }
.home-clouds { animation: home-cloud-drift 18s ease-in-out infinite alternate; transition: opacity 1.6s; }
[data-time="4"] .home-clouds { opacity: .18; }
.home-window-halos { transition: opacity 1.2s; }
[data-time="1"] .home-window-halos, [data-time="2"] .home-window-halos, [data-time="4"] .home-window-halos { opacity: .06; }
.home-hub-ring { transform-origin: 433px 505px; animation: home-hub-pulse 3s ease-out infinite; }
.home-battery-fill { stroke-dasharray: 21; stroke-dashoffset: 0; transition: opacity 1s, stroke-dashoffset 1.6s; }
[data-time="0"] .home-battery-fill { stroke-dashoffset: 10; }
[data-time="4"] .home-battery-fill { stroke-dashoffset: 16; opacity: .6; }
[data-time="1"] .home-battery-fill, [data-time="2"] .home-battery-fill { animation: home-battery-charge 3s ease-in-out infinite; }
.home-charge { animation: home-charging 2.6s ease-in-out infinite; }
[data-time="1"] .home-charge, [data-time="4"] .home-charge { opacity: .15; animation: none; }
.home-feature-description:not([hidden]) { animation: journey-enter 450ms ease-out; }
.home-energy-moment:not([hidden]) { animation: journey-enter 450ms ease-out; }
.home-feature { display: grid; min-height: 120px; padding: 4px 28px 24px; }
.home-feature-description, .home-feature-description[hidden] { display: block; grid-area: 1 / 1; }
.home-feature-description[hidden] { visibility: hidden; pointer-events: none; }
.home-feature strong { display: block; color: #f8fafc; font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.home-feature p { font-size: 14px; line-height: 1.6; color: #b8c3d2; max-width: 540px; }
.home-hotspots { position: absolute; top: 72px; left: 0; width: 100%; aspect-ratio: 900 / 570; pointer-events: none; }
.home-pin { position: absolute; pointer-events: auto; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px 6px 7px; border: 1px solid #8f9eaf; border-radius: 999px; background: #101b2ef2; color: #f1f5f9; font-size: 12px; font-weight: 600; box-shadow: 0 3px 14px #0004; transform: translate(-50%, -50%); transition: border-color .25s, background .25s; }
.home-pin span { position: relative; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid #ffffff45; border-radius: 50%; font-size: 0; }
.home-pin span::before, .home-pin span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.home-pin span::after { transform: translate(-50%, -50%) rotate(90deg); }
.home-pin[aria-pressed="true"] { border-color: var(--brand-yellow); background: #27312b; }
.home-pin[aria-pressed="true"] span { background: var(--brand-yellow); color: var(--brand-dark); border-color: var(--brand-yellow); }
.home-pin:hover { border-color: var(--brand-yellow); }
.home-pin-light { left: 33%; top: 46%; }
.home-pin-shade { left: 67%; top: 52%; }
.home-pin-heat { left: 33%; top: 80%; }
.home-pin-pv { left: 61%; top: 23%; }
.home-pin-battery { left: 18%; top: 65%; }
.home-pin-wallbox { left: 84%; top: 63%; }
.home-pin[hidden] { display: none; }
.home-energy-story[hidden], .home-explorer .journey-panels[hidden] { visibility: hidden; pointer-events: none; }
.home-explorer .journey-panels[hidden] { display: grid; }
.home-energy-story[hidden] { display: grid; }
.home-day-summary { display: grid; padding: 28px; border-left: 1px solid #ffffff18; background: #ffffff03; min-width: 0; }
.home-day-summary > * { grid-area: 1 / 1; align-self: center; }
.home-explorer .journey-panel { grid-template-rows: auto 1fr; }
.home-explorer .journey-moment { text-align: left; font-size: 18px; margin-bottom: 20px; }
.home-explorer .journey-comparison { display: flex; flex-direction: column; gap: 16px; }
.home-explorer .journey-card { padding: 0; background: none; box-shadow: none; border: 0; text-align: left; }
.home-explorer .journey-card h4 { font-size: 10px; }
.home-explorer .journey-copy { font-size: 18px; line-height: 1.45; margin-top: 8px; }
.home-explorer .journey-card-knx { padding-top: 18px; border-top: 1px solid #ffffff20; border-radius: 0; flex: 1; justify-content: flex-start; }
.home-explorer .journey-card-knx .journey-copy { font-size: 23px; margin-top: 12px; }
.home-explorer .journey-card-heading { justify-content: space-between; }
.home-explorer .journey-arrow { display: none; }
.home-explorer .journey-chips { justify-content: flex-start; margin-top: 18px; }
.home-energy-story { display: grid; animation: journey-enter 320ms ease-out; }
.home-energy-moment, .home-energy-moment[hidden] { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; }
.home-energy-moment[hidden] { visibility: hidden; pointer-events: none; }
.home-energy-story h3 { font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; margin-bottom: 16px; }
.home-energy-moment > p:not(.journey-eyebrow) { color: #c4cedb; font-size: 14px; line-height: 1.65; }
.home-energy-states { display: grid; gap: 14px; margin: 24px 0; }
.home-energy-states div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border-bottom: 1px solid #ffffff1a; padding-bottom: 10px; font-size: 12px; }
.home-energy-states span { color: #b8c3d2; }
.home-energy-states strong { font-weight: 550; color: var(--brand-yellow); }
.home-energy-story .home-energy-note { font-size: 12px !important; }
.home-disclaimer { padding: 14px 24px; border-top: 1px solid #ffffff18; font-size: 11px; line-height: 1.6; color: #aebccd; }
.home-routes { opacity: 0; transition: opacity .4s; }
[data-mode="energy"] .home-routes { opacity: .95; }
.home-routes path { stroke-dasharray: 5 9; animation: home-current 2.5s linear infinite; }
.home-routes .route-car { opacity: .18; }
[data-flow="all"] .route-car { opacity: 1; }
[data-flow="home"] .route-pv { opacity: .18; }
[data-flow="home"] .route-battery { animation-direction: reverse; }
[data-time="4"] .route-pv { opacity: 0; }
.home-room-glow, .home-lamps, .home-heat { transition: opacity 1.2s; }
.home-car { transition: opacity 1.2s, transform 1.8s cubic-bezier(.22,1,.36,1); }
.home-sun { transform-origin: 122px 128px; transition: opacity 1.5s, transform 2s cubic-bezier(.22,1,.36,1); }
.home-sun > circle:first-child { animation: home-sun-breathe 4s ease-in-out infinite; transform-origin: 122px 128px; }
.home-moon { transition: opacity 1.6s, transform 1.6s; }
.home-blinds { transform-box: fill-box; transform-origin: center top; transition: transform 1.6s cubic-bezier(.22,1,.36,1), opacity 1.6s; }
.home-moon { opacity: 0; }
[data-time="4"] .home-moon { opacity: 1; }
[data-time="4"] .home-sun { opacity: 0; }
[data-time="0"] .home-sun { opacity: .7; transform: translate(-18px, 68px); }
[data-time="1"] .home-sun { transform: translate(15px, 10px); }
[data-time="2"] .home-sun { transform: translate(55px, -28px); }
[data-time="3"] .home-sun { opacity: .65; transform: translate(-30px, 90px); }
[data-time="1"] .home-room-glow, [data-time="2"] .home-room-glow, [data-time="4"] .home-room-glow { opacity: .08; }
[data-time="1"] .home-lamps, [data-time="2"] .home-lamps, [data-time="4"] .home-lamps { opacity: .25; }
[data-time="1"] .home-heat, [data-time="2"] .home-heat, [data-time="4"] .home-heat { opacity: .18; }
[data-time="1"] .home-car { opacity: 0; transform: translateX(100px); }
[data-time="0"] .home-blinds, [data-time="1"] .home-blinds, [data-time="3"] .home-blinds { transform: scaleY(.12); opacity: .65; }
[data-time="2"] .home-blinds { transform: scaleY(.65); }
[data-feature="pv"] .home-pv { stroke: var(--brand-yellow); }
[data-feature="heat"] .home-heat { opacity: 1; }
[data-playing="false"] .home-routes path { animation-play-state: paused; }
[data-playing="false"] .home-scene-progress::after,
[data-playing="false"] .home-clouds,
[data-playing="false"] .home-hub-ring,
[data-playing="false"] .home-battery-fill,
[data-playing="false"] .home-charge,
[data-playing="false"] .home-sun > circle:first-child { animation-play-state: paused; }
@keyframes home-current { to { stroke-dashoffset: -56; } }
@keyframes home-scene-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes home-cloud-drift { from { transform: translateX(-12px); } to { transform: translateX(14px); } }
@keyframes home-hub-pulse { 0% { transform: scale(.7); opacity: .7; } 90%, 100% { transform: scale(1.4); opacity: 0; } }
@keyframes home-sun-breathe { 50% { transform: scale(1.22); opacity: .6; } }
@keyframes home-battery-charge { 0%, 100% { opacity: .5; } 65% { opacity: 1; } }
@keyframes home-charging { 50% { opacity: .4; } }
@media (max-width: 1000px) {
    .home-stage { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .home-day-summary { padding: 22px; }
    .home-example { display: none; }
    .home-toolbar { justify-content: center; }
}
@media (max-width: 760px) {
    .home-stage { grid-template-columns: 1fr; }
    .home-day-summary { border-left: 0; border-top: 1px solid #ffffff18; }
    .home-toolbar { padding: 12px; }
    .home-modes { width: 100%; }
    .home-modes button { flex: 1; padding: 9px 8px; font-size: 13px; }
    .home-explorer { border-radius: 18px; }
    .home-feature { padding: 6px 20px 20px; min-height: 132px; }
    .home-scene-caption { padding: 8px 12px; font-size: 12px; }
    .home-pin { font-size: 11px; padding: 5px 8px 5px 5px; gap: 5px; }
    .home-pin span { width: 20px; height: 20px; }
    .home-pin-shade { left: 73%; }
    .home-pin-wallbox { left: 82%; }
    .home-explorer .journey-copy { font-size: 17px; }
    .home-explorer .journey-card-knx .journey-copy { font-size: 22px; }
    .home-energy-story { min-height: 350px; }
    .home-disclaimer { padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-routes path, .home-clouds, .home-hub-ring, .home-battery-fill,
    .home-charge, .home-sun > circle:first-child, .home-scene-progress::after,
    .home-feature-description:not([hidden]), .home-energy-moment:not([hidden]) { animation: none; }
    .home-scene-progress::after { transform: scaleX(0); }
}
.journey-cta { text-align: center; margin-top: 28px; }
.journey-cta p { color: #b8bfcc; font-size: 14px; margin-bottom: 12px; }
.journey-cta-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 22px; border-radius: 12px; background: var(--brand-yellow); color: var(--brand-dark); font-size: 15px; font-weight: 700; transition: background 300ms; }
.journey-cta-link:hover { background: var(--brand-yellow-hover); }
.journey-cta-in-view .floating-cta { visibility: hidden; pointer-events: none; }
.journey-cta-in-view #chatbotGreeting { visibility: hidden; pointer-events: none; }
@keyframes journey-enter { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes journey-light { from { opacity: .35; } to { opacity: 1; } }
@media (max-width: 639px) {
    .knx-journey { padding: 36px 16px; }
    .journey-header { margin-bottom: 22px; }
    .journey-header h2 span { display: block; }
    .journey-header > p:last-child { font-size: 16px; }
    .journey-nav { margin-bottom: 12px; }
    .journey-moment { font-size: 18px; margin-bottom: 12px; }
    .journey-comparison { grid-template-columns: 1fr; grid-template-rows: auto 28px 1fr; }
    .journey-card { padding: 20px; }
    .journey-copy { font-size: 20px; margin-top: 12px; }
    .journey-card-knx .journey-copy { margin-top: 12px; }
    .journey-arrow { transform: rotate(90deg); }
    .journey-chips { margin-top: 16px; gap: 6px; }
    .journey-cta { margin-top: 22px; }
    .journey-cta-link { width: 100%; padding-inline: 12px; }
    .journey-cta-link > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .knx-journey *, .knx-journey *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   24b. KNX JOURNEY — calmer / clearer layout
   ========================================================== */
.knx-journey {
    padding: 72px 24px 84px;
}
.journey-header {
    margin-bottom: 40px;
}
.journey-header > p:last-child {
    max-width: 34rem;
    margin-inline: auto;
    color: #94a3b8;
    line-height: 1.55;
}
.journey-nav::before {
    opacity: .4;
}
.journey-tab {
    gap: 6px;
    min-height: 68px;
    color: #94a3b8;
}
.journey-tab svg {
    width: 38px;
    height: 38px;
    padding: 8px;
    background: transparent;
    border-color: #ffffff1a;
}
.journey-tab[aria-selected="true"] svg {
    background: #e9df3c14;
}
.journey-playback {
    margin: 0 auto 28px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
    color: #94a3b8;
    border-color: #ffffff14;
    background: transparent;
}
.journey-playback:hover {
    color: #e2e8f0;
    border-color: #ffffff2a;
}
/* One pause control is enough — hide duplicate in the house card */
.home-scene-toggle {
    display: none !important;
}
.home-explorer {
    border-color: #ffffff12;
    background: #101927;
    box-shadow: 0 18px 50px #050c1828;
}
.home-toolbar {
    padding: 14px 20px;
    background: transparent;
    border-bottom-color: #ffffff0f;
}
.home-modes {
    background: transparent;
    border-color: #ffffff14;
}
.home-modes button {
    color: #94a3b8;
}
.home-modes button[aria-pressed="true"] {
    color: #0f172a;
}
.home-example,
.home-live-indicator {
    color: #64748b;
    font-size: 11px;
}
.home-scene-progress {
    height: 1px;
    opacity: .45;
}
.home-scene-caption {
    color: #94a3b8;
    font-size: 12px;
}
/* Pins: icon-only until active/hover — less visual noise */
.home-pin {
    gap: 0;
    padding: 7px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: #0b1220e6;
    border-color: #ffffff22;
    box-shadow: none;
}
.home-pin span {
    margin: 0;
}
.home-pin[aria-pressed="true"],
.home-pin:hover,
.home-pin:focus-visible {
    gap: 7px;
    padding: 6px 12px 6px 7px;
    font-size: 12px;
    line-height: 1.3;
    color: #f1f5f9;
}
.home-feature {
    padding: 8px 24px 22px;
    min-height: auto;
}
.home-feature strong {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}
.home-feature p {
    font-size: 13px;
    line-height: 1.55;
    color: #94a3b8;
}
.home-explorer .journey-moment {
    font-size: 17px;
    margin-bottom: 16px;
    color: #e2e8f0;
}
.home-explorer .journey-card h4 {
    color: #64748b;
    font-weight: 600;
    letter-spacing: .1em;
}
.home-explorer .journey-card:not(.journey-card-knx) .journey-copy {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 450;
}
.home-explorer .journey-card-knx {
    border-top-color: #ffffff14;
    padding-top: 16px;
}
.home-explorer .journey-card-knx .journey-copy {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
}
.home-explorer .journey-chips {
    gap: 6px;
    margin-top: 14px;
}
.home-explorer .journey-chips li {
    font-size: 11px;
    color: #94a3b8;
    border-color: #ffffff14;
    background: transparent;
    padding: 3px 8px;
}
.home-disclaimer,
.home-energy-note {
    color: #64748b;
}
.journey-cta p {
    color: #94a3b8;
}
@media (max-width: 760px) {
    .home-pin[aria-pressed="true"],
    .home-pin:hover,
    .home-pin:focus-visible {
        font-size: 11px;
    }
    .home-explorer .journey-card-knx .journey-copy {
        font-size: 18px;
    }
}

/* ==========================================================
   25. HOVER LIFT EFFECTS
   ========================================================== */
.hover-lift {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* ==========================================================
   26. BORDER GLOW ANIMATION
   ========================================================== */
@keyframes borderGlow {
    0%, 100% { border-color: rgba(233, 223, 60, 0.3); }
    50% { border-color: rgba(233, 223, 60, 0.8); }
}
.animate-border-glow {
    animation: borderGlow 3s ease-in-out infinite;
}

/* ==========================================================
   27. SKIP LINK (ACCESSIBILITY)
   ========================================================== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--brand-yellow);
    color: black;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 6px;
}

/* ==========================================================
   28. FOCUS IMPROVEMENTS (ACCESSIBILITY)
   ========================================================== */
:focus-visible {
    outline: 3px solid var(--brand-yellow);
    outline-offset: 2px;
}

.focus-visible:focus {
    outline: 3px solid var(--brand-yellow);
    outline-offset: 2px;
}

/* ==========================================================
   29. INSTAGRAM CTA SECTION
   ========================================================== */
.instagram-gradient {
    background: linear-gradient(135deg, #833AB4 0%, #C13584 25%, #E1306C 50%, #F77737 75%, #FCAF45 100%);
}

.instagram-icon-glow {
    animation: igGlow 3s ease-in-out infinite;
}

@keyframes igGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(225, 48, 108, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 24px rgba(225, 48, 108, 0.8)) drop-shadow(0 0 48px rgba(131, 58, 180, 0.4));
    }
}

.instagram-btn {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.instagram-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.instagram-handle {
    background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6), rgba(255,255,255,0.9));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* ==========================================================
   30. REMOVE BG-GRAY-50 OVERRIDES
   ========================================================== */
section.bg-gray-50, .bg-gray-50 {
    background: none !important;
}

/* ==========================================================
   31. ANIMATED LINK UNDERLINE
   ========================================================== */
.animated-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-yellow);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-link:hover::after {
    width: 100%;
}

/* ==========================================================
   31. ICON HOVER ON PARENT (Service Cards)
   ========================================================== */
.service-card-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .modern-card:hover .service-card-icon,
    .hover-lift:hover .service-card-icon {
        transform: scale(1.12) rotate(6deg);
        filter: drop-shadow(0 2px 8px rgba(233, 223, 60, 0.35));
    }
}

/* ==========================================================
   32. FAQ ACCORDION (Enhanced)
   ========================================================== */
.faq-item {
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-left-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-left-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.faq-item:hover {
    border-color: rgba(233, 223, 60, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.faq-item.active {
    border-color: var(--brand-yellow);
    border-left: 3px solid var(--brand-yellow);
    box-shadow: 0 8px 30px rgba(233, 223, 60, 0.15);
}

.faq-item.active .faq-question {
    color: var(--brand-dark);
}

.faq-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    background: var(--brand-yellow);
    color: var(--brand-dark);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
    opacity: 0;
}

.faq-answer.open {
    opacity: 1;
}

.faq-yellow-line {
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-yellow), #F59E0B);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-yellow-line {
    width: 100%;
}

/* Chevron variant (rotate 0 -> 180deg) */
.faq-chevron {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
}

/* ==========================================================
   33. FOCUS-VISIBLE RING (enhanced accessibility)
   ========================================================== */
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: 3px;
}

/* ==========================================================
   35. RESPONSIVE MEDIA QUERIES
   ========================================================== */

/* --- Tablet / Large Mobile (max 768px) --- */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    body::before {
        animation-duration: 60s;
        background-size: 60px 60px;
    }

    .typing-text {
        font-size: 0.9em;
    }

    .footer-glass {
        padding: 1.5rem 1rem;
    }

    .footer-glass .flex {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .feature-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: center;
    }

    .ring-progress {
        width: 70px;
        height: 70px;
    }

    .ring-value {
        font-size: 0.9rem;
    }

    .vs-badge {
        width: 60px;
        height: 60px;
        font-size: 1.1rem;
    }

    .battle-card {
        padding: 1.25rem;
    }

    /* Cookie banner: ensure minimum touch targets */

    /* Modern cards: reduce hover lift on touch devices */
    .modern-card:hover {
        transform: translateY(-4px);
    }

    /* Bounce hover: disable on touch */
    .bounce-hover:hover {
        transform: none;
    }

    /* Tilt 3D: disable on mobile (no hover) */
    .tilt-3d:hover {
        transform: none;
    }
}

/* --- Standard Smartphones (max 640px) --- */
@media (max-width: 640px) {
    /* Cookie banner compact */

    /* Battle arena: smaller rings */
    .ring-progress {
        width: 60px;
        height: 60px;
    }

    .ring-value {
        font-size: 0.8rem;
    }

    .vs-badge {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    /* Winner banner compact */
    .winner-banner {
        padding: 1rem 1.25rem;
    }

    /* Gradient text: reduce glow on small screens for performance */
    .gradient-text {
        filter: none;
        animation: none;
    }

    /* Neon border: simplify */
    .neon-border {
        animation: none;
        box-shadow: 0 0 5px var(--brand-yellow);
    }
}

/* --- Small Phones (max 480px) --- */
@media (max-width: 480px) {

    /* Footer extra compact */
    .footer-glass {
        padding: 1.25rem 0.75rem;
        border-radius: 1.5rem;
    }

    /* Battle arena: even smaller */
    .ring-progress {
        width: 50px;
        height: 50px;
    }

    .ring-value {
        font-size: 0.7rem;
    }

    .vs-badge {
        width: 44px;
        height: 44px;
        font-size: 0.875rem;
    }

    .battle-card {
        padding: 1rem;
        border-radius: 1rem;
    }

    /* Modern cards: tighter padding */
    .modern-card {
        border-radius: 1.25rem;
    }
}

/* ==========================================================
   36. SCROLL PROGRESS INDICATOR
   ========================================================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-yellow), var(--brand-yellow-hover));
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ==========================================================
   37. SERVICE CARD ACCENT
   ========================================================== */
.service-accent {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .service-accent:hover {
        border-left-color: var(--brand-yellow);
    }

    .service-accent:hover .service-icon {
        filter: drop-shadow(0 0 12px rgba(233, 223, 60, 0.6));
        transform: scale(1.15);
    }
}

.service-accent .service-icon {
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* ==========================================================
   38. PROCESS STEP CONNECTORS
   ========================================================== */
.process-connector {
    display: none;
}

@media (min-width: 1024px) {
    .process-connector {
        display: block;
        position: absolute;
        top: 2.5rem;
        right: -1.5rem;
        width: 3rem;
        height: 2px;
        background: linear-gradient(90deg, var(--brand-yellow), transparent);
        z-index: 1;
    }

    .process-connector::after {
        content: '';
        position: absolute;
        right: 0;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--brand-yellow);
        box-shadow: 0 0 8px rgba(233, 223, 60, 0.5);
    }
}

/* ==========================================================
   39. STATS NUMBER GLOW
   ========================================================== */
.stat-number {
    text-shadow: 0 0 20px rgba(233, 223, 60, 0.4), 0 0 40px rgba(233, 223, 60, 0.2);
    transition: text-shadow 0.4s ease;
}

@media (hover: hover) {
    .stat-number:hover {
        text-shadow: 0 0 30px rgba(233, 223, 60, 0.7), 0 0 60px rgba(233, 223, 60, 0.4);
    }
}

/* ==========================================================
   40. GLASS CARD DARK (for dark bg sections)
   ========================================================== */
.glass-card-dark {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    .glass-card-dark:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(233, 223, 60, 0.3);
        transform: translateY(-4px);
        box-shadow: 0 8px 32px rgba(233, 223, 60, 0.1);
    }
}

/* ==========================================================
   41. CTA PULSE RING
   ========================================================== */
.cta-pulse {
    position: relative;
}

.cta-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--brand-yellow);
    opacity: 0;
    animation: ctaPulseRing 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ctaPulseRing {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

/* ==========================================================
   42. FLOATING CTA BAR (erscheint beim Scrollen, injiziert via components.js)
   ========================================================== */
.floating-cta {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem 0.55rem 1.25rem;
    background: rgba(31, 41, 55, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(233, 223, 60, 0.35);
    border-radius: 9999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 18px rgba(233, 223, 60, 0.12);
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-cta.visible { bottom: 1.5rem; }
.floating-cta__text {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}
.floating-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--brand-yellow);
    color: #1F2937;
    font-weight: 700;
    text-decoration: none;
    padding: 0.6rem 1.15rem;
    border-radius: 9999px;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-cta__btn:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 4px 14px rgba(233, 223, 60, 0.45); }
.floating-cta__btn svg { width: 18px; height: 18px; }
.floating-cta__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}
.floating-cta__call:hover { background: rgba(255, 255, 255, 0.2); }
.floating-cta__call svg { width: 20px; height: 20px; }
/* Mobil: nur der kompakte Button, zentriert — kollidiert nicht mit den Eck-Buttons */
@media (max-width: 640px) {
    .floating-cta { padding: 0; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .floating-cta__text, .floating-cta__call { display: none; }
    .floating-cta.visible { bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .floating-cta { transition: none; }
}

/* ==========================================================
   43. REDUCED MOTION SUPPORT
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ===== Leistungen Variante B: ruhige Karten + Elektro-Chip ===== */
.leistungen-calm .service-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.leistungen-calm .service-card-link:hover {
  transform: translateY(-2px);
}
.leistungen-calm .service-card-link:focus-visible {
  outline: 3px solid #E9DF3C;
  outline-offset: 3px;
}
.leistungen-calm .service-icon {
  animation: none !important;
  transform: none !important;
}
.leistungen-calm .service-accent:hover .service-icon {
  transform: none !important;
}
.leistungen-calm .service-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 650;
  color: #1f2937;
}
.leistungen-calm .service-card-more span {
  color: #8a7d00;
  transition: transform 0.2s ease;
}
.leistungen-calm .service-card-link:hover .service-card-more span {
  transform: translateX(3px);
}
.leistungen-calm .service-chip-row {
  display: flex;
  justify-content: center;
}
.leistungen-calm .service-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  padding: 16px 20px;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.leistungen-calm .service-chip:hover {
  border-color: #d6d3a8;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.leistungen-calm .service-chip:focus-visible {
  outline: 3px solid #E9DF3C;
  outline-offset: 3px;
}
.leistungen-calm .service-chip-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(233, 223, 60, 0.18);
  color: #8a7d00;
}
.leistungen-calm .service-chip-icon svg {
  width: 22px;
  height: 22px;
}
.leistungen-calm .service-chip-body {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.leistungen-calm .service-chip-body strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.leistungen-calm .service-chip-body span {
  display: block;
  font-size: 0.9rem;
  color: #64748b;
}
.leistungen-calm .service-chip-go {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 650;
  color: #1f2937;
  white-space: nowrap;
}
.leistungen-calm .service-chip-go span {
  color: #8a7d00;
}
@media (max-width: 560px) {
  .leistungen-calm .service-chip {
    flex-wrap: wrap;
  }
  .leistungen-calm .service-chip-go {
    width: 100%;
    padding-left: 58px;
  }
}

/* ==========================================================
   FIX 09/2026: Header-CTA ohne Tailwind-Config + Tablet-Navigation
   ========================================================== */
/* Seiten ohne Tailwind-Config erzeugen bg-brand-yellow nicht: Button hier absichern */
.site-header a.bg-brand-yellow { background-color: var(--brand-yellow); color: #000; }
.site-header a.bg-brand-yellow:hover { background-color: var(--brand-yellow-hover); }
/* 768–1179 px: Desktop-Navigation passt nicht in eine Zeile -> Burger-Menü */
@media (min-width: 768px) and (max-width: 1179.98px) {
    .site-header #menuToggle { display: block !important; }
    .site-header nav[aria-label="Hauptnavigation"] { display: none !important; }
    .site-header #mobileMenu:not(.hidden) { display: block !important; }
}
.site-header a[href="/"] span { white-space: nowrap; }