/* ========================================
   Critical Bootstrap 5.3 Subset
   Prevents FOUC when full Bootstrap loads async
   ======================================== */

/* Reboot */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;-webkit-text-size-adjust:100%}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}
p{margin-top:0;margin-bottom:1rem}
a{color:var(--bs-link-color,#0d6efd);text-decoration:underline}a:hover{color:var(--bs-link-hover-color,#0a58ca)}
img,svg{vertical-align:middle}
ul,ol{padding-left:2rem;margin-top:0;margin-bottom:1rem}
small{font-size:.875em}
hr{margin:1rem 0;border:0;border-top:1px solid;opacity:.25}
figure{margin:0 0 1rem}
button{border-radius:0}
[type=button],[type=submit],button{-webkit-appearance:button}

/* Container */
.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}
@media(min-width:1400px){.container{max-width:1320px}}

/* Grid */
.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--bs-gutter-y));margin-right:calc(-.5*var(--bs-gutter-x));margin-left:calc(-.5*var(--bs-gutter-x))}
.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y)}
@media(min-width:768px){.col-md-4{flex:0 0 auto;width:33.33333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.66667%}}
@media(min-width:992px){.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-8{flex:0 0 auto;width:66.66667%}}
.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}.g-4{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}

/* Navbar */
.navbar{--bs-navbar-padding-y:.5rem;--bs-navbar-padding-x:0;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}
.navbar>.container{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}
.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;text-decoration:none;white-space:nowrap}
.navbar-nav{--bs-nav-link-padding-x:.5rem;--bs-nav-link-padding-y:.5rem;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
.navbar-nav .nav-link{padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x)}
.nav-link{display:block;padding:.5rem;text-decoration:none;transition:color .15s}
.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.375rem;transition:box-shadow .15s}
.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833,37,41,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:100%}
@media(min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}
.collapse:not(.show){display:none}
.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}
.nav-item{display:list-item;list-style:none}
.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}

/* Display */
.d-flex{display:flex!important}.d-block{display:block!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}
@media(min-width:768px){.d-md-flex{display:flex!important}.d-md-block{display:block!important}.d-md-none{display:none!important}.d-md-inline{display:inline!important}}
@media(min-width:992px){.d-lg-flex{display:flex!important}.d-lg-block{display:block!important}.d-lg-none{display:none!important}}

/* Flex */
.flex-wrap{flex-wrap:wrap!important}.flex-column{flex-direction:column!important}
.align-items-center{align-items:center!important}.align-items-start{align-items:flex-start!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}
.ms-auto{margin-left:auto!important}.me-auto{margin-right:auto!important}
.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}

/* Spacing */
.m-0{margin:0!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}
.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}
@media(min-width:992px){.ms-lg-2{margin-left:.5rem!important}}
.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}

/* Text */
.text-center{text-align:center!important}.text-start{text-align:left!important}
.text-white{color:#fff!important}.text-muted{color:var(--bs-secondary-color,#6c757d)!important}.text-primary{color:#0d6efd!important}.text-dark{color:#212529!important}
.text-decoration-none{text-decoration:none!important}
.fw-bold{font-weight:700!important}.fw-semibold{font-weight:600!important}
.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}
.h4{font-size:1.5rem}

/* Background */
.bg-white{background-color:#fff!important}.bg-warning{background-color:#ffc107!important}.bg-light{background-color:#f8f9fa!important}

/* Badge */
.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.375rem}

/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;padding:0;margin-bottom:1rem;list-style:none}
.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}
.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:"/"}
.breadcrumb-item.active{color:#6c757d}

/* Form */
.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;border:1px solid #dee2e6;border-radius:.375rem;transition:border-color .15s,box-shadow .15s}
.form-label{margin-bottom:.5rem}
.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;border:1px solid #dee2e6;border-radius:.375rem;transition:border-color .15s,box-shadow .15s}

/* Accordion */
.accordion{--bs-accordion-btn-padding-x:1.25rem;--bs-accordion-btn-padding-y:1rem;--bs-accordion-body-padding-x:1.25rem;--bs-accordion-body-padding-y:1rem}
.accordion-item{color:var(--bs-accordion-color);background-color:var(--bs-accordion-bg,#fff);border:1px solid var(--bs-accordion-border-color,#dee2e6)}
.accordion-item:first-of-type{border-top-left-radius:.375rem;border-top-right-radius:.375rem}
.accordion-item:last-of-type{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}
.accordion-header{margin-bottom:0}
.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);font-size:1rem;color:var(--bs-accordion-btn-color);text-align:left;background-color:var(--bs-accordion-btn-bg,#fff);border:0;overflow-anchor:none;transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s,border-radius .15s}
.accordion-button:not(.collapsed){color:var(--bs-accordion-active-color);background-color:var(--bs-accordion-active-bg)}
.accordion-body{padding:var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x)}

/* List Group */
.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.375rem}
.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:var(--bs-list-group-color);text-decoration:none;background-color:#fff;border:1px solid rgba(0,0,0,.125)}
.list-group-item-action{width:100%;text-align:inherit}

/* Card */
.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.175);border-radius:.375rem}
.card-body{flex:1 1 auto;padding:1rem}

/* Image */
.img-fluid{max-width:100%;height:auto}

/* Shadow & Rounded */
.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}
.rounded{border-radius:.375rem!important}

/* Width */
.w-100{width:100%!important}

/* Visibility */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Button base */
.btn{display:inline-block;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.375rem;transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s}
.btn-link{font-weight:400;color:#0d6efd;text-decoration:underline}
.btn-outline-primary{color:#0d6efd;border-color:#0d6efd}
.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}

/* ========================================
   Sanitärservice Wien – Global Stylesheet
   ======================================== */

:root {
    --primary: #0284c7;
    --dark: #0f172a;
    --accent: #fbbf24;
    --light: #f1f5f9;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--light);
    color: var(--dark);
}

/* Navbar */
.navbar {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}
.navbar-brand {
    font-weight: 800;
    color: var(--primary) !important;
    letter-spacing: -0.5px;
}
.nav-link {
    color: var(--dark);
    font-weight: 600;
    margin-right: 15px;
}
.nav-link:hover {
    color: var(--primary);
}

/* Hero */
.hero {
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.8)), url('images/hero-bg.webp');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0 80px 0;
    text-align: center;
}
.hero h1 {
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 4rem);
    margin-bottom: 20px;
}
.hero-small {
    background: var(--dark);
    color: white;
    padding: 120px 0 60px 0;
    text-align: center;
}
.lead {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--dark);
}
.hero .lead,
.hero-small .lead {
    color: #e2e8f0;
}

/* Buttons */
.btn-cta {
    background: var(--accent);
    color: black;
    font-weight: 700;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    border: 2px solid var(--accent);
}
.btn-cta:hover {
    background: transparent;
    color: var(--accent);
}

/* Cards */
.card-custom {
    background: white;
    border: none;
    border-radius: 12px;
    padding: 30px;
    transition: 0.3s;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: block;
    text-decoration: none !important;
    color: #0f172a !important;
}
.card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.card-custom:hover .btn-link {
    padding-left: 5px !important;
    transition: 0.3s;
}

/* Referenzen card variant */
.card-custom-ref {
    padding: 0;
    overflow: hidden;
}
.card-custom-ref > picture > img,
.card-custom-ref > picture {
    display: block;
    width: 100%;
}
.card-custom-ref > picture > img {
    height: 220px;
    object-fit: cover;
}

/* Icons */
.icon-lg {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

/* Contact Form */
.contact-form {
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.btn-submit {
    background: #0369a1;
    color: white;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
}

/* Mobile Sticky Bar */
.mobile-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 10px;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    z-index: 9999;
    display: flex;
    gap: 10px;
}

/* Footer */
footer {
    background: var(--dark);
    color: #94a3b8;
    padding: 60px 0 100px 0;
}

/* Typography */
h2, h3 {
    color: var(--dark);
    font-weight: 700;
}

/* Referenzen Badge */
.project-badge {
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}

/* Service Page Images */
.service-gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.service-gallery img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.service-gallery img:hover {
    transform: scale(1.03);
}
.service-gallery figcaption {
    background: white;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}
.service-img-single figure {
    margin: 0 auto;
    max-width: 600px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.service-img-single img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.service-img-single img:hover {
    transform: scale(1.03);
}
.service-img-single figcaption {
    background: white;
    padding: 10px 14px;
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}