@font-face {
            font-family: 'Raleway';
            font-style: normal;
            font-weight: 100 400;
            font-display: swap;
            src: url('../fonts/Raleway-Regular.woff2') format("woff2");
        }

        @font-face {
            font-family: 'Raleway';
            font-style: normal;
            font-weight: 500;
            font-display: swap;
            src: url('../fonts/Raleway-Bold.woff2') format("woff2");
        }

        :root {
            --dred: #2563eb;
            --dgreen: #4cd137;
            --ddark: #2f3640;
            --dwhite: #dcdde1;
        }

        .title {
            margin: 0 auto;
        }

        .panel, .card {
            height: 100%;
        }

        .main-picture {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100vh;
            background-image: url('/static/pictures/pexels-marcin-szmigiel-67094.webp');
            background-size: cover;
            background-position: center;
        }

        .main-picture-text {
            text-align: center;
            color: var(--dwhite);
            font-family: 'Raleway', sans-serif;
            font-size: 7.5vmin;
            font-weight: bold;
        }

        .subtext {
            font-size: 3.6vmin;
        }

        .anchor-text {
            font-size: 1.7vmin;
            margin: 55px auto;
            max-width: 500px;
            text-align: left;
        }

        .highlight {
            color: var(--dred);
        }

        body {
            background-color: #f5f5f5;
        }

        h1 {
            font-size: 4.05rem;
            max-width: 600px;
        }

        h2 {
            font-weight: bold;
            font-size: 1.3rem;
        }

        h3 {
            font-weight: bold;
            font-size: 1.0rem;
        }

        ul {
            list-style-type: circle;
        }

        p {
            hyphens: auto;
        }

        .checked {
            color: orange;
        }

        /* ── Safari Bar ── */
        .safari-bar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px 16px;
            background: transparent;
            transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        .safari-bar-wrapper.bar-hidden {
            transform: translateY(-100%);
        }

        .safari-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
            flex-shrink: 0;
        }

        .safari-btn:active {
            transform: scale(0.92);
        }

        .safari-btn-menu {
            background: rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: saturate(180%) blur(40px);
            backdrop-filter: saturate(180%) blur(40px);
            color: #1d1d1f;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .safari-btn-menu:hover {
            background: rgba(255, 255, 255, 0.55);
        }

        .safari-btn-call {
            background: #22c55e;
            color: #fff;
            text-decoration: none;
            border: none;
            box-shadow: 0 2px 12px rgba(34, 197, 94, 0.45);
        }

        .safari-btn-call:hover {
            background: #16a34a;
            box-shadow: 0 2px 16px rgba(34, 197, 94, 0.55);
        }

        .safari-pill {
            flex: 1;
            max-width: 600px;
            height: 48px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: saturate(180%) blur(40px);
            backdrop-filter: saturate(180%) blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
            gap: 0.35em;
            font-family: 'Raleway', sans-serif;
            font-weight: 800;
            font-size: 16px;
            color: #1d1d1f;
            letter-spacing: 0.02em;
            text-decoration: none;
            transition: background 0.2s ease, transform 0.2s ease;
            user-select: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .safari-pill:hover {
            background: rgba(255, 255, 255, 0.55);
        }

        .safari-pill a {
            color: #1d1d1f;
            text-decoration: none;
        }

        .safari-pill:active {
            transform: scale(0.98);
        }

        /* ── Dropdown Overlay ── */
        .safari-dropdown-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
            z-index: 29;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .safari-dropdown-overlay.is-active {
            opacity: 1;
            pointer-events: auto;
        }

        .safari-dropdown {
            position: fixed;
            top: 78px;
            left: 16px;
            right: 16px;
            bottom: 16px;
            max-width: 400px;
            max-height: calc(100vh - 94px);
            max-height: calc(100dvh - 94px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: rgba(255, 255, 255, 0.45);
            -webkit-backdrop-filter: saturate(180%) blur(40px);
            backdrop-filter: saturate(180%) blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
            z-index: 31;
            padding: 6px;
            opacity: 0;
            transform: translateY(-12px) scale(0.96);
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .safari-dropdown.is-active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .safari-dropdown a {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            color: #1d1d1f;
            text-decoration: none;
            font-family: 'Raleway', sans-serif;
            font-size: 14px;
            font-weight: 600;
            border-radius: 14px;
            transition: background 0.15s ease;
        }

        @media (hover: hover) {
            .safari-dropdown a:hover {
                background: rgba(255, 255, 255, 0.4);
            }
        }

        .safari-dropdown .dropdown-divider {
            height: 1px;
            background: rgba(0, 0, 0, 0.08);
            margin: 4px 12px;
        }

        @media screen and (min-width: 600px) {
            .safari-dropdown {
                left: 50%;
                right: auto;
                bottom: auto;
                max-height: calc(100vh - 94px);
                max-height: calc(100dvh - 94px);
                transform: translateX(-50%) translateY(-12px) scale(0.96);
                width: 380px;
            }
            .safari-dropdown.is-active {
                transform: translateX(-50%) translateY(0) scale(1);
            }
        }

        /* ── Floating Call FAB ── */
        .safari-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #22c55e;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5);
            z-index: 28;
            opacity: 0;
            transform: scale(0.6) translateY(20px);
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
        }

        .safari-fab.is-visible {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
            animation: fab-vibrate 0.4s ease 0.3s, fab-pulse 2s ease-in-out 1s infinite;
        }

        .safari-fab:active {
            transform: scale(0.92) translateY(0);
            box-shadow: 0 2px 12px rgba(34, 197, 94, 0.6);
        }

        @keyframes fab-vibrate {
            0%, 100% { transform: scale(1) rotate(0deg); }
            15% { transform: scale(1.05) rotate(-8deg); }
            30% { transform: scale(1.05) rotate(8deg); }
            45% { transform: scale(1.05) rotate(-6deg); }
            60% { transform: scale(1.05) rotate(6deg); }
            75% { transform: scale(1) rotate(-2deg); }
        }

        @keyframes fab-pulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255, 59, 48, 0.5); }
            50% { box-shadow: 0 4px 30px rgba(255, 59, 48, 0.7), 0 0 20px rgba(255, 59, 48, 0.3); }
        }

        @media screen and (max-width: 400px) {
            .safari-pill {
                font-size: 14px;
            }
            .safari-btn {
                width: 42px;
                height: 42px;
            }
            .safari-pill {
                height: 42px;
            }
        }

        .main-site-wrapper {
            font-family: 'Raleway', sans-serif;
        }

        .main-site-wrapper > main {
            padding-top: 38px;
        }

        .main-site-wrapper > main:has(.idx-hero),
        .main-site-wrapper > main:has(.main-picture),
        .main-site-wrapper > main:has(.svc-hero),
        .main-site-wrapper > main:has(.zahl-hero),
        .main-site-wrapper > main:has(.about-hero) {
            padding-top: 0;
        }

        .main-site-wrapper #parallax-scene {
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .main-site-wrapper #parallax-scene .img-door {
            max-width: 110%;
            width: 110%;
            object-fit: cover;
            left: -5% !important;
            height: 500px;
        }

        .main-site-wrapper #parallax-scene .img-hands {
            max-width: 130%;
            width: 130%;
            object-fit: cover;
            background-size: cover;
            left: -15% !important;
            height: 600px;
            top: -80px !important;
        }

        .main-site-wrapper #parallax-scene .logo-title-wrapper {
            max-width: 110%;
            width: 110%;
            left: -5% !important;
            height: 500px;
            background: rgba(0, 0, 0, 0.3);
            vertical-align: middle;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .main-site-wrapper #parallax-scene .logo-title-wrapper .logo-text {
            font-size: 100px;
            line-height: 120px;
        }

        .main-site-wrapper #parallax-scene .logo-title-wrapper .smaller-title {
            font-size: 80px;
        }

        .main-site-wrapper .features .bordered-70 {
            margin-bottom: 70px;
            padding-left: 60px;
            padding-right: 60px;
        }

        .main-site-wrapper .features .columns .icon {
            font-size: 70px;
        }

        .main-site-wrapper .features .iconized-features svg {
            width: 40px;
        }

        .main-site-wrapper .features .coloredIcon {
            background-color: hsl(204, 86%, 53%);
            color: white !important;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            margin-bottom: 16px;
        }

        .dark-background {
            background-color: var(--ddark);
            color: var(--dwhite);
        }

        .bright-text {
            color: #dcdde1;
        }

        tbody tr th div {
            color: #2563eb;
        }

        .featureList .tablewrapper .table {
            background-color: rgba(0, 0, 0, 0);
            margin: 0 auto;
        }

        .featureList .tablewrapper .table th {
            color: hsl(204, 86%, 53%);
            font-size: 25px;
            min-width: 100px;
        }

        .featureList .tablewrapper .table th div {
            background-color: white;
            text-align: center;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            vertical-align: middle;
            display: table-cell;
        }

        .featureList .tablewrapper .table td {
            color: white;
            width: 500px;
            vertical-align: middle;
            font-size: 120%;
        }

        .has-noPadding-Top {
            padding-top: 0;
        }

        .impressumWrapper h2 {
            padding-top: 26px;
        }

        .has-fancy-font {
            font-family: 'Raleway', sans-serif;
            font-weight: 900;
        }

        .hero {
            padding-top: 0;
            padding-bottom: 20px;
        }

        .hero ul {
            font-size: larger;
        }

        .hero h1 {
            margin-bottom: 35px !important;
        }

        .has-top-margin {
            margin-top: -10px !important;
        }

        .navbar {
            min-height: 4.5rem !important;
        }

        .has-navbar-text-bigger {
            font-size: 27px !important;
        }

        .btn-wrapper {
            margin: 40px 0;
        }


        /* Typewriter https://codepen.io/alvaromontoro/pen/rNwVpdd */
        @keyframes typing {
            0.0000%, 27.3488% {
                content: "";
            }
            1.1395%, 26.2093% {
                content: "D";
            }
            2.2791%, 25.0698% {
                content: "Da";
            }
            3.4186%, 23.9302% {
                content: "Dac";
            }
            4.5581%, 22.7907% {
                content: "Dach";
            }
            5.6977%, 21.6512% {
                content: "Dachb";
            }
            6.8372%, 20.5116% {
                content: "Dachbo";
            }
            7.9767%, 19.3721% {
                content: "Dachbox";
            }
            9.1163%, 18.2326% {
                content: "Dachboxe";
            }
            10.2558%, 17.0930% {
                content: "Dachboxen";
            }

            30.7674%, 51.2791% {
                content: "";
            }
            31.9070%, 50.1395% {
                content: "T";
            }
            33.0465%, 49.0000% {
                content: "Tü";
            }
            34.1860%, 47.8605% {
                content: "Tür";
            }
            35.3256%, 46.7209% {
                content: "Türe";
            }
            36.4651%, 45.5814% {
                content: "Türen";
            }
            /*  37.6047%, 44.4419% { content: "writer"; }*/

            54.6977%, 75.2093% {
                content: "";
            }
            55.8372%, 74.0698% {
                content: "T";
            }
            56.9767%, 72.9302% {
                content: "Tr";
            }
            58.1163%, 71.7907% {
                content: "Tre";
            }
            59.2558%, 70.6512% {
                content: "Tres";
            }
            60.3953%, 69.5116% {
                content: "Treso";
            }
            61.5349%, 68.3721% {
                content: "Tresore";
            }

            78.6279%, 96.8605% {
                content: "";
            }
            79.7674%, 95.7209% {
                content: "A";
            }
            80.9070%, 94.5814% {
                content: "Au";
            }
            82.0465%, 93.4419% {
                content: "Aut";
            }
            83.1860%, 92.3023% {
                content: "Auto";
            }
            84.3256%, 91.1628% {
                content: "Autos";
            }
        }

        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }

        .typewriter {
            --caret: currentcolor;
        }

        .typewriter::before {
            content: "";
            animation: typing 13.5s infinite;
        }

        .typewriter::after {
            content: "";
            border-right: 1px solid var(--caret);
            animation: blink 0.5s linear infinite;
        }

        .typewriter.thick::after {
            border-right: 1ch solid var(--caret);
        }

        .typewriter.nocaret::after {
            border-right: 0;
        }


        @media (prefers-reduced-motion) {
            .typewriter::after {
                animation: none;
            }

            @keyframes sequencePopup {
                0%, 100% {
                    content: "developer";
                }
                25% {
                    content: "writer";
                }
                50% {
                    content: "reader";
                }
                75% {
                    content: "human";
                }
            }

            .typewriter::before {
                content: "developer";
                animation: sequencePopup 12s linear infinite;
            }
        }

        .testimonials-section {
            padding: 3rem 1.5rem;
        }

        .testimonial-container {
            height: 100%;
            position: relative;
        }

        .testimonial-box {
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .testimonial-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .testimonial-accent {
            height: 6px;
            background: linear-gradient(90deg, hsl(171, 100%, 41%), hsl(204, 86%, 53%));
        }

        .testimonial-accent.accent-2 {
            background: linear-gradient(90deg, hsl(348, 100%, 61%), hsl(14, 100%, 53%));
        }

        .testimonial-accent.accent-3 {
            background: linear-gradient(90deg, hsl(48, 100%, 67%), hsl(141, 53%, 53%));
        }

        .testimonial-content {
            padding: 1.75rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .quote-mark {
            font-size: 4rem;
            line-height: 0;
            position: absolute;
            color: rgba(0, 0, 0, 0.05);
            z-index: 0;
        }

        .quote-mark.left {
            top: 2.5rem;
            left: 1.5rem;
        }

        .quote-mark.right {
            bottom: 3.5rem;
            right: 1.5rem;
        }

        .testimonial-story {
            position: relative;
            z-index: 1;
            font-size: 1.1rem;
            line-height: 1.6;
            font-weight: 400;
            color: #4a4a4a;
            margin-bottom: 1.5rem;
            flex-grow: 1;
        }

        .testimonial-footer {
            display: flex;
            align-items: center;
            border-top: 1px solid #f5f5f5;
            padding-top: 1.25rem;
            margin-top: auto;
        }

        .profile-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            border: 3px solid white;
        }

        .profile-icon.icon-1 {
            background: linear-gradient(135deg, hsl(171, 100%, 41%), hsl(204, 86%, 53%));
        }

        .profile-icon.icon-2 {
            background: linear-gradient(135deg, hsl(348, 100%, 61%), hsl(14, 100%, 53%));
        }

        .profile-icon.icon-3 {
            background: linear-gradient(135deg, hsl(48, 100%, 67%), hsl(141, 53%, 53%));
        }

        .stars {
            color: #FFD700;
            margin-bottom: 0.5rem;
        }

        .customer-info {
            display: flex;
            flex-direction: column;
        }

        .customer-name {
            font-weight: 600;
            font-size: 1.1rem;
            color: #363636;
        }

        .customer-title {
            font-size: 0.85rem;
            color: #7a7a7a;
            display: flex;
            align-items: center;
        }

        .verified-badge {
            display: inline-flex;
            align-items: center;
            background-color: #f0f9ff;
            color: #3e8ed0;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            margin-left: 0.5rem;
        }

        /* Make sure columns have equal height */
        .equal-height {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .services {
            display: flex;
            flex-wrap: wrap;
            column-gap: 19px;
        }

        .service {
            margin: 0 auto;
            width: 300px;
            height: 100%;
        }


        @media screen and (max-width: 500px) {
            .logo-text {
                font-size: 80px !important;
                line-height: 100px !important;
            }

            .smaller-title {
                font-size: 60px !important;
            }
        }

        @media screen and (max-width: 400px) {
            .logo-text {
                font-size: 70px !important;
                line-height: 100px !important;
            }

            .smaller-title {
                font-size: 50px !important;
            }
        }

        .star-rating {
            color: #FFD700; /* Gold color for stars */
        }

        .rating-text {
            margin-left: 0.5rem;
        }

        .is-underlined {
            text-decoration-color: #FFD700 !important;
        }

        /* FAQ Styling */
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            margin-bottom: 1rem;
            border: 1px solid #dbdbdb;
            border-radius: 4px;
        }

        .faq-question {
            padding: 1rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            font-weight: 500;
        }

        .faq-question .icon {
            transition: transform 0.3s ease;
        }

        .faq-item.is-active .faq-question .icon {
            transform: rotate(180deg);
        }


        .hero-section {
            padding: 4rem 1.5rem;
            background-color: #f5f5f5;
        }

        .content-image {
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            object-fit: cover;
            width: 100%;
        }

        .title {
            color: #363636;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        .service-list {
            margin-left: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .service-list li {
            margin-bottom: 0.5rem;
        }

        .highlight {
            color: #3273dc;
            font-weight: 600;
        }

        .cta-button {
            margin-top: 1.5rem;
        }

        .image-divider {
            margin: 2rem 0;
            position: relative;
        }

        .image-caption {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-weight: 600;
        }

        .service-card {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .service-card .card-content {
            flex-grow: 1;
        }

        .service-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #3273dc;
        }

        mark {
            margin: 0 -0.4em;
            padding: 0.1em 0.4em;
            border-radius: 0.8em 0.3em;
            background: transparent linear-gradient(
                    to right,
                    rgba(255, 225, 0, 0.1),
                    rgba(255, 225, 0, 0.7) 4%,
                    rgba(255, 225, 0, 0.3)
            );
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
        }

        .blog-article {
            padding: 12px 0;
        }

        .blog-article p {
            padding: 8px 0;
        }

        .blog-article ul {
            padding: 8px 25px;
        }

        .trust-border-bottom {
            border-bottom: 1px solid #e1e8ed;
        }

        .logo-grayscale {
            filter: grayscale(100%);
            opacity: 0.7;
            transition: all 0.3s ease;
            height: 45px;
            width: auto;
        }

        .logo-grayscale:hover {
            filter: grayscale(0%);
            opacity: 1;
        }

        .is-feuerwehr, .is-feuerwehr:not(body) {
            background: #ff3b30;
            color: #F6F6F6;
            border-color: transparent;
        }

        .is-feuerwehr:hover {
            background: #ff453a;
            color: #F6F6F6;
        }

        .is-normal-color, .is-normal-color:visited, .is-normal-color:hover {
            color: #363636;
        }

        .image.is-180x180 {
            height: 180px;
            width: 180px;
        }

        .is-dark {
            background-color: #14161a;
            color: #dfe6e9;
        }

        .is-light-dark {
            background-color: #1e232a;
            color: #dfe6e9;
        }

        /* ── WhatsApp Chat Widget ── */

/* ── Bewertungen Cards ── */
.bewertung-card {
    background: #fff !important;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex !important;
    flex-direction: row !important;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid #e8ecf1;
}
.bewertung-avatar {
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
    height: 38px !important; min-height: 38px !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: #fff !important; flex-shrink: 0;
}
.bewertung-body { flex: 1; min-width: 0; }
.bewertung-top { display: flex !important; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.bewertung-name { font-weight: 700; font-size: 0.88rem; color: #1e293b; }
.bewertung-meta { font-size: 0.75rem; color: #94a3b8; }
.bewertung-stars { color: #f59e0b; font-size: 0.8rem; letter-spacing: 1px; }
.bewertung-text { color: #475569; font-size: 0.88rem; line-height: 1.55; margin-top: 4px; }
.sec-dark .bewertung-card { background: #fff; border-color: #e5e7eb; }