body { 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    background-color: white !important;
    color: #333333 !important;
}
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }

.bg-mesh {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(26, 54, 93, 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(26, 54, 93, 0.02) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(26, 54, 93, 0.03) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(26, 54, 93, 0.02) 0px, transparent 50%);
    animation: mesh-flow 15s ease infinite alternate;
}

@keyframes mesh-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.glass-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.85);
}

.btn-pulse {
    position: relative;
}
.btn-pulse::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(26, 54, 93, 0.4);
    animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(26, 54, 93, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(26, 54, 93, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(26, 54, 93, 0); }
}

/* Language Toggle Logic */
.lang-en { display: none; }
[data-lang="en"] .lang-de { display: none; }
[data-lang="en"] .lang-en { display: block; }

.swiper-pagination-bullet-active {
    background: #1a365d !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* FORCE LINEAR FLOW FOR MARQUEE */
.swiper-wrapper {
    transition-timing-function: linear !important;
}

.text-gradient {
    background: linear-gradient(to right, #ffffff, #f1f5f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-img-container {
    position: relative;
    width: 100%;
    height: 240px;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 2rem;
    border: 2px solid #1a365d;
}
.service-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.group:hover .service-img-container img {
    transform: scale(1.1);
}

.pi-therm-brand {
    color: inherit;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.pi-symbol {
    font-family: 'GFS Didot', serif;
    display: inline-block;
    font-size: 1.8em;
    line-height: 0.7;
    transform: translateY(0.05em);
    font-style: normal;
    -webkit-text-fill-color: initial;
}

/* Custom height rules for Tailwind arbitrary classes */
.h-\[614px\] {
    height: 614px;
}
.min-h-\[400px\] {
    min-height: 400px;
}
.h-\[400px\] {
    height: 400px;
}
.h-\[300px\] {
    height: 300px;
}
@media (min-width: 768px) {
    .md\:h-\[600px\] {
        height: 600px;
    }
    .md\:h-\[500px\] {
        height: 500px;
    }
}

/* Google Stitch Design Typography & Spacing System Compatibility */
.font-display-hero {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 36px;
    font-weight: 900;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .font-display-hero {
        font-size: 72px;
        line-height: 1.0;
        letter-spacing: -0.02em;
    }
}

.text-display-hero {
    font-size: 36px;
}
@media (min-width: 768px) {
    .text-display-hero {
        font-size: 72px;
    }
}

.font-headline-lg {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .font-headline-lg {
        font-size: 60px;
        line-height: 1.1;
    }
}

.font-headline-md {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}
@media (min-width: 768px) {
    .font-headline-md {
        font-size: 30px;
        line-height: 1.2;
    }
}

.text-headline-md {
    font-size: 22px;
}
@media (min-width: 768px) {
    .text-headline-md {
        font-size: 30px;
    }
}

.font-headline-sm {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .font-headline-sm {
        font-size: 24px;
        line-height: 1.3;
    }
}

.text-headline-sm {
    font-size: 18px;
}
@media (min-width: 768px) {
    .text-headline-sm {
        font-size: 24px;
    }
}

.font-label-bold {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: 0.05em;
}
@media (min-width: 768px) {
    .font-label-bold {
        font-size: 12px;
    }
}

.text-label-bold {
    font-size: 11px;
}
@media (min-width: 768px) {
    .text-label-bold {
        font-size: 12px;
    }
}

.font-body-lg {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .font-body-lg {
        font-size: 20px;
        line-height: 1.55;
    }
}

.text-body-lg {
    font-size: 16px;
}
@media (min-width: 768px) {
    .text-body-lg {
        font-size: 20px;
    }
}

.font-body-md {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}
@media (min-width: 768px) {
    .font-body-md {
        font-size: 16px;
        line-height: 1.5;
    }
}

.text-body-md {
    font-size: 14px;
}
@media (min-width: 768px) {
    .text-body-md {
        font-size: 16px;
    }
}

.font-body-sm {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}
@media (min-width: 768px) {
    .font-body-sm {
        font-size: 14px;
        line-height: 1.42;
    }
}

.text-body-sm {
    font-size: 12px;
}
@media (min-width: 768px) {
    .text-body-sm {
        font-size: 14px;
    }
}

/* Custom Spacing & Utilities */
.py-section-padding-lg {
    padding-top: 60px;
    padding-bottom: 60px;
}
@media (min-width: 768px) {
    .py-section-padding-lg {
        padding-top: 128px;
        padding-bottom: 128px;
    }
}

.py-section-padding-sm {
    padding-top: 40px;
    padding-bottom: 40px;
}
@media (min-width: 768px) {
    .py-section-padding-sm {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

.px-margin-desktop {
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    .px-margin-desktop {
        padding-left: 32px;
        padding-right: 32px;
    }
}

.gap-gutter {
    gap: 24px;
}

/* Custom Accent Colors and Google Stitch Design variables compatibility */
.bg-primary {
    background-color: #002045 !important;
}
.text-primary {
    color: #002045 !important;
}
.text-on-primary {
    color: #ffffff !important;
}
.hover\:text-secondary:hover {
    color: #904d00 !important;
}
.text-secondary {
    color: #904d00 !important;
}
.border-secondary {
    border-color: #fd8b00 !important;
}
.text-secondary-container {
    color: #fd8b00 !important;
}
.bg-secondary-container {
    background-color: #fd8b00 !important;
}
.text-on-secondary-container {
    color: #ffffff !important;
}
.bg-primary-container {
    background-color: #1a365d !important;
}
.glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.bg-error { background-color: #ba1a1a !important; }
.bg-emergency-red { background-color: #d32f2f !important; }
.text-error { color: #ba1a1a !important; }
.bg-secondary { background-color: #904d00 !important; }

.btn-solid-navy {
    background-color: #002045 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.btn-solid-navy:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Increased mobile section padding */
@media (max-width: 767px) {
    .py-20 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
    .py-24 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
    .md\:py-32 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
}

.hover\:bg-primary:hover {
    background-color: #002045 !important;
    color: #ffffff !important;
}
.hover\:bg-primary:hover span,
.hover\:bg-primary:hover svg,
.hover\:text-white:hover,
.hover\:text-on-primary:hover {
    color: #ffffff !important;
}
.hover\:brightness-110:hover {
    filter: brightness(1.1);
}
.pb-section-padding-lg {
    padding-bottom: 60px;
}
@media (min-width: 768px) {
    .pb-section-padding-lg {
        padding-bottom: 128px;
    }
}
.mt-section-padding-sm {
    margin-top: 40px;
}
@media (min-width: 768px) {
    .mt-section-padding-sm {
        margin-top: 80px;
    }
}
.border-primary {
    border-color: #002045 !important;
}
.text-surface-variant {
    color: #d3e4fe !important;
}
.text-on-surface-variant {
    color: #43474e !important;
}
.text-outline {
    color: #74777f !important;
}
.bg-surface-container-low {
    background-color: #eff4ff !important;
}
.bg-surface-container-highest {
    background-color: #d3e4fe !important;
}
.border-surface-border {
    border-color: #e2e8f0 !important;
}
.bg-background {
    background-color: #f8f9ff !important;
}
.bg-surface-container {
    background-color: #e5eeff !important;
}
.bg-surface-container-high {
    background-color: #dce9ff !important;
}

/* Robust, bulletproof responsive Hero Image layout class */
.hero-img-container {
    height: 350px !important;
    position: relative;
    border-radius: 2.5rem;
    overflow: hidden;
}
@media (min-width: 768px) {
    .hero-img-container {
        height: 550px !important;
    }
}

/* Custom Responsive Grid and Column Mappings for Static Tailwind Compatibility */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8 !important;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4 !important;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Arbitrary value fallbacks for static Tailwind */
.max-w-\[1280px\] { max-width: 1280px; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-\[900px\] { max-width: 900px; }
.pt-32 { padding-top: 8rem; }
.brightness-\[0\.4\] { filter: brightness(0.4); }
.brightness-\[0\.3\] { filter: brightness(0.3); }
.grayscale-\[20\%\] { filter: grayscale(20%); }
/* Combined filters for hero images */
.grayscale-\[20\%\].brightness-\[0\.4\] {
    filter: grayscale(20%) brightness(0.4);
}
.grayscale-\[20\%\].brightness-\[0\.3\] {
    filter: grayscale(20%) brightness(0.3);
}
.rounded-\[2rem\] { border-radius: 2rem; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.rounded-\[3rem\] { border-radius: 3rem; }
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bg-error\/90 { background-color: rgba(186, 26, 26, 0.9); }
.bg-secondary\/90 { background-color: rgba(144, 77, 0, 0.9); }
.bg-primary\/90 { background-color: rgba(0, 32, 69, 0.9); }
.hover\:bg-surface-container:hover { background-color: #e5eeff !important; }

/* Custom utility for responsive hidden element */
@media (min-width: 760px) {
    .min-\[760px\]\:hidden {
        display: none !important;
    }
}


/* =========================================================
   Missing Tailwind utility fallbacks (purged build) — added
   to restore section spacing, sizing & polish on blog pages.
   custom.css loads AFTER tailwind.css so these supplement it.
   ========================================================= */
.gap-5{gap:1.25rem;}
.gap-10{gap:2.5rem;}
.gap-16{gap:4rem;}
.gap-20{gap:5rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-20{margin-bottom:5rem;}
.mt-1{margin-top:0.25rem;}
.mt-3{margin-top:0.75rem;}
.mt-8{margin-top:2rem;}
.mt-16{margin-top:4rem;}
.my-1{margin-block:0.25rem;}
.my-8{margin-block:2rem;}
.mx-1{margin-inline:0.25rem;}
.ml-3{margin-left:0.75rem;}
.pb-12{padding-bottom:3rem;}
.pt-12{padding-top:3rem;}
.pt-20{padding-top:5rem;}
.pl-6{padding-left:1.5rem;}
.px-12{padding-inline:3rem;}
.px-5{padding-inline:1.25rem;}
.py-10{padding-block:2.5rem;}
.py-2{padding-block:0.5rem;}
.py-3.5{padding-block:0.875rem;}
.py-6{padding-block:1.5rem;}
.py-8{padding-block:2rem;}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem;}
.space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem;}
.space-y-20>:not([hidden])~:not([hidden]){margin-top:5rem;}
.w-1.5{width:0.375rem;}
.w-4{width:1rem;}
.w-20{width:5rem;}
.w-48{width:12rem;}
.w-64{width:16rem;}
.w-96{width:24rem;}
.h-4{height:1rem;}
.h-64{height:16rem;}
.h-96{height:24rem;}
.h-px{height:1px;}
.max-w-2xl{max-width:42rem;}
.max-w-xl{max-width:36rem;}
.max-w-none{max-width:none;}
.min-w-\[240px\]{min-width:240px;}
.min-w-\[280px\]{min-width:280px;}
.-top-24{top:-6rem;}
.-bottom-24{bottom:-6rem;}
.-left-24{left:-6rem;}
.-right-24{right:-6rem;}
.top-4{top:1rem;}
.top-28{top:7rem;}
.top-1\/2{top:50%;}
.top-full{top:100%;}
.bottom-8{bottom:2rem;}
.left-4{left:1rem;}
.left-8{left:2rem;}
.left-1\/2{left:50%;}
.z-0{z-index:0;}
.flex-none{flex:none;}
.flex-grow{flex-grow:1;}
.flex-shrink-0{flex-shrink:0;}
.items-start{align-items:flex-start;}
.justify-start{justify-content:flex-start;}
.-translate-x-1\/2{transform:translateX(-50%);}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.group:hover .group-hover\:scale-110{transform:scale(1.10);}
.group:hover .group-hover\:rotate-1{transform:rotate(1deg);}
.leading-snug{line-height:1.375;}
.tracking-\[0\.25em\]{letter-spacing:0.25em;}
.text-\[9px\]{font-size:9px;}
.text-\[16px\]{font-size:16px;}
.text-\[20px\]{font-size:20px;}
.text-\[120px\]{font-size:120px;}
.text-headline-lg-mobile{font-size:28px;}
.whitespace-normal{white-space:normal;}
.not-italic{font-style:normal;}
.cursor-pointer{cursor:pointer;}
.pointer-events-none{pointer-events:none;}
.opacity-20{opacity:0.2;}
.border-2{border-width:2px;}
.border-l-4{border-left-width:4px;}
.bg-slate-200{background-color:#e2e8f0;}
.text-slate-400{color:#475569;}
.border-slate-50{border-color:#f8fafc;}
.border-slate-200\/50{border-color:rgba(226,232,240,0.5);}
.border-white\/10{border-color:rgba(255,255,255,0.1);}
.bg-primary\/20{background-color:rgba(0,32,69,0.2);}
.bg-secondary\/10{background-color:rgba(144,77,0,0.1);}
.transition-opacity{transition:opacity 0.3s ease;}
.transition-shadow{transition:box-shadow 0.3s ease;}
.duration-700{transition-duration:0.7s;}
.hover\:opacity-80:hover{opacity:0.8;}
.hover\:bg-slate-100:hover{background-color:#f1f5f9;}
.hover\:bg-secondary:hover{background-color:#904d00;}
.hover\:bg-surface-container-high:hover{background-color:#dce9ff;}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.06);}
.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.05);}
.group:hover .group-hover\:text-secondary{color:#904d00;}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops));}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops));}
.from-primary\/40{--tw-gradient-stops:rgba(0,32,69,0.4),var(--tw-gradient-to,rgba(0,32,69,0));}
.to-transparent{--tw-gradient-to:transparent;}
@media (min-width:640px){
 .sm\:flex-row{flex-direction:row;}
}
@media (min-width:768px){
 .md\:gap-12{gap:3rem;}
 .md\:gap-28{gap:7rem;}
 .md\:mb-20{margin-bottom:5rem;}
 .md\:pt-16{padding-top:4rem;}
 .md\:pt-28{padding-top:7rem;}
 .md\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
 .md\:py-4{padding-top:1rem;padding-bottom:1rem;}
 .md\:py-7{padding-top:1.75rem;padding-bottom:1.75rem;}
 .md\:p-16{padding:4rem;}
 .md\:flex-initial{flex:0 1 auto;}
 .md\:inline-block{display:inline-block;}
 .md\:text-base{font-size:1rem;line-height:1.5rem;}
 .md\:text-headline-lg{font-size:60px;}
}
@media (min-width:1024px){
 .lg\:gap-20{gap:5rem;}
 .lg\:gap-32{gap:8rem;}
 .lg\:mt-20{margin-top:5rem;}
 .lg\:p-14{padding:3.5rem;}
 .lg\:py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
 /* NOTE: lg:h-32 intentionally left undefined — it is only used on the
    header logo, and defining it (128px) made the sticky header too tall.
    Leaving it a no-op keeps the logo at md:h-20 (80px) = compact header. */
 .lg\:space-y-10>:not([hidden])~:not([hidden]){margin-top:2.5rem;}
 .lg\:space-y-12>:not([hidden])~:not([hidden]){margin-top:3rem;}
 .lg\:space-y-16>:not([hidden])~:not([hidden]){margin-top:4rem;}
 .lg\:space-y-32>:not([hidden])~:not([hidden]){margin-top:8rem;}
}

/* =========================================================
   Button sizing & mobile UI polish (additive, safe).
   Does NOT touch GTM, dataLayer or data-track attributes.
   ========================================================= */

/* Comfortable, consistent tap targets for every conversion /
   navigation control on touch devices (Apple/Google min = 44–48px). */
@media (max-width: 1024px) {
    a[data-track="conversion"],
    header nav a,
    #mobile-menu a {
        min-height: 48px;
    }
}

/* Smooth, tactile feedback on all primary action buttons. */
a[data-track="conversion"] {
    transition: transform .18s ease, box-shadow .25s ease, opacity .2s ease;
    will-change: transform;
}
a[data-track="conversion"]:active {
    transform: scale(.97);
}

/* Keyboard accessibility — visible focus ring without hurting design. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(253, 139, 0, .55);
    outline-offset: 2px;
    border-radius: .5rem;
}

/* Smoother in-page anchor scrolling (e.g. #kontakt CTAs). */
html { scroll-behavior: smooth; }

/* ---- Mobile-first refinements (phones) ---- */
@media (max-width: 767px) {

    /* Keep generous but not excessive separation between blog sections
       so the page breathes without huge dead gaps on small screens. */
    article.flex.flex-col { gap: 3.5rem !important; }

    /* Hero headline & lead text sit a touch tighter on phones. */
    .font-headline-lg { letter-spacing: -0.01em; }

    /* Emergency / primary CTAs: full-width, balanced height, never cramped. */
    a[data-track="conversion"] {
        letter-spacing: .01em;
    }


    /* Bottom action bar: tighten vertical footprint, keep big tap targets. */
    .fixed.bottom-0 .py-3 { padding-top: .5rem; padding-bottom: .5rem; }
}

/* Sidebar CTA buttons: even, balanced heights on every screen. */
aside a[href^="tel:"],
aside a[href^="https://wa.me"],
aside a[href*="#kontakt"] {
    min-height: 52px;
}

/* --- Corrections: properly-escaped decimal selectors + missed utilities --- */
.p-2 { padding: 0.5rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.w-1\.5 { width: 0.375rem; }

/* Blog self-check icon hover states + decorative hero glow */
.group:hover .group-hover\:bg-primary { background-color: #002045; }
.group:hover .group-hover\:text-white { color: #ffffff; }
.blur-\[120px\] { filter: blur(120px); }
.blur-\[100px\] { filter: blur(100px); }

/* --- Header logo sizing + compact sticky header --- */
.h-9 { height: 2.25rem; }
@media (min-width: 768px) { .md\:h-12 { height: 3rem; } }

/* Tighten the sticky header so it is just tall enough for logo + nav. */
header.glass-header > .container { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
header.glass-header > .container > .border-t { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
@media (min-width: 1024px) { .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; } }

/* =========================================================
   Accessibility — WCAG AA contrast fixes (PageSpeed)
   ========================================================= */
/* Inactive language toggle + light grey labels were #94a3b8 (2.9:1).
   Now #64748b (~4.6:1) — handled by the .text-slate-400 override above. */

/* Footer muted text sat on dark navy (#0f2038) and failed contrast.
   Lighten it to slate-300 and drop the opacity dampening so it passes. */
footer.bg-navy-dark { color: #cbd5e1 !important; }
footer.bg-navy-dark .text-slate-500 { color: #cbd5e1 !important; }
footer.bg-navy-dark address,
footer.bg-navy-dark .opacity-70 { opacity: 1 !important; }
footer.bg-navy-dark a:hover { color: #ffffff !important; }