/* Custom.css < Do your own thing! */

body {
    background: transparent;
}

.background-image {
        background-color: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger schwarzer Hintergrund */
        background-blend-mode: overlay;
        height: 100%;
        width: 100%;
        position: absolute; /* Damit es den gesamten Bereich abdeckt */
        top: 0;
        left: 0;
    }
    
    .black p {
        color: #5a5a5a !important;
    }
    
    .text-preview {
      overflow: hidden;
    }
    
    .toggle-text {
      color: gray;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-size: 14px;
    }
    
      .toggle-text:hover {
        color: darkgray;  /* Change to a darker gray on hover (optional) */
    }
    




.btn {
        background: linear-gradient(to right, black, white); /* Schwarz-Weiß-Fade von links nach rechts */
        border: none; /* Kein Rahmen */
        color: white; /* Weiße Schrift */
        padding: 8px 24px; /* Abstand innen */
        text-align: center; /* Text zentrieren */
        text-decoration: none; /* Keine Unterstreichung */
        display: inline-block;
        font-size: 16px; /* Schriftgröße */
        margin: 4px 2px; /* Kleiner Außenabstand */
        cursor: pointer; /* Zeigt den Klickcursor an */
        border-radius: 5px; /* Abgerundete Ecken */
        background-size: 200% 100%; /* Hintergrund auf 200% Breite setzen, damit der Effekt sichtbar wird */
        background-position: right; /* Startet den Fade von rechts */
        transition: background-position 0.5s ease; /* Weiche Übergangsanimation */
}

/* Hover-Effekt */
.btn:hover {
        background-position: left; /* Verschiebt den Farbverlauf beim Hover nach links */
}

@media (max-width: 500px) {
    .background-image {
        background-image: url(images/projects.webp);
    }
    
  /* Allgemeine Einstellungen für den gesamten Body */
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
  }

  /* Videos zentriert und sichtbar machen */
  video {
    object-fit: contain; /* Zeigt das gesamte Video an */
    width: 100%; /* Passt das Video an die Breite des Bildschirms an */
    height: auto; /* Proportional skalieren */
  }

  /* Hintergrundbilder vollständig anzeigen */
  .bg {
    background-size: contain; /* Das gesamte Bild anzeigen */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; /* Keine Wiederholungen */
  }

  /* Slider-Inhalte (Glide.js, etc.) */
  .glide__slides {
    height: auto; /* Slider passen sich der Höhe des Inhalts an */
  }

  /* Zentrierung und Anpassung der Inhalte */
  .jumbotron {
    display: flex;
    flex-direction: column; /* Inhalte untereinander statt nebeneinander */
    align-items: center; /* Inhalte vertikal zentrieren */
    justify-content: center; /* Inhalte horizontal zentrieren */
    padding: 2rem 1rem; /* Weniger Padding auf kleinen Geräten */
  }

  /* Bilder zentrieren und skalieren */
  img {
    max-width: 100%; /* Skaliert das Bild proportional zur Breite */
    height: auto; /* Beibehaltung der Proportionen */
    display: block;
    margin: 0 auto; /* Zentriert das Bild horizontal */
  }

  /* Slider-Navigation anpassen (Glide.js) */
  .glide__bullets {
    display: flex;
    justify-content: center; /* Bullets in der Mitte */
    gap: 10px; /* Abstand zwischen den Punkten */
  }

  /* Navigation (wenn nötig) */
  .navbar-toggler {
    font-size: 1.2rem; /* Größerer Button für Mobilgeräte */
  }
  #nav {
    flex-direction: column; /* Menüpunkte untereinander */
  }

  /* Abstand und Layout optimieren */
  .container-fluid {
    padding: 1rem; /* Weniger Innenabstand */
  }
  .not-mobile {
      display: none;
  }
}

@media (min-width: 501px) {
    .background-image {
        background-image: url(images/projects.png);
    }
    .mobile {
        display: none !important;
    }
}










 /* Einschub für index und en-index */



   .BadgeTotalReviews__Content-sc-f6a929bc-0.bXlyoP.es-badge-total-reviews.BadgeInner__StyledTotalReviews-sc-fdda26e2-1.eHvTui {
          display: none !important;
      }
      .ghFvLA::after {
          cursor: pointer !important;   
       }
       
       
       .jSuUoS::after {
           cursor: pointer !important;   
       }
           
      #whatsapp-button-link {
      position: fixed;
      z-index: 9999999;
      bottom: 15px;
      right: 15px;
      cursor: pointer;
    }




    #whatsapp-button {
        opacity: 0.95;
        width: 75px;
        height: 75px;
    }
                    
    .background-image {
        background-color: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger schwarzer Hintergrund */
        background-blend-mode: overlay;
        height: 100%;
        width: 100%;
        position: absolute; /* Damit es den gesamten Bereich abdeckt */
        top: 0;
        left: 0;
    }
    
    .black p,
    .black strong {
        color: #5a5a5a !important;
    }
    
    .text-preview {
      overflow: hidden;
    }
    
    .toggle-text {
      color: gray;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-size: 14px;
    }
    
      .toggle-text:hover {
        color: darkgray;  /* Change to a darker gray on hover (optional) */
    }
    
    @media (min-width: 501px) {
        .background-image {
            background-image: url(images/referenzen.jpg);
        }
        .mobile {
            display: none !important;
        }
    }


    @media (max-width: 500px) {
        .col-sm-4.py-3 {
            padding-top: 0px !important;
        }
        .background-image {
            background-image: url(images/referenzen-mobil.jpg);
        }
        .desktop {
            display: none;
        }

        .mobile-pulse-button {
        cursor: pointer;
            animation: pulseShadow 2s infinite;
            transition: box-shadow 0.3s ease;
            background: #00000036;
        }
    }
    
    
#page-content {
}


/* ------------------------------------------------------------- *
 * Custom scrollbar style
/* ------------------------------------------------------------- */

/* Works on Firefox */

/* Works on Chrome, Edge, and Safari */


/* ------------------------------------------------------------- *
 * Smooth Scrollbar
 * Source: https://github.com/idiotWu/smooth-scrollbar/
/* ------------------------------------------------------------- */

/* Hide default scrollbar */
body:not(.is-mobile).tt-smooth-scroll {
	overflow: hidden;
}

/* Scroll content (added if <body> contain class "tt-smooth-scroll". Disabled on mobile devices!) */
body:not(.is-mobile).tt-smooth-scroll #scroll-container { 
	width: auto;
	height: 100vh;
	overflow: auto;
	margin: 0;
}

/* Styling scrollbar */


/* ------------------------------------------------------------- *
 * Magic cursor
/* ------------------------------------------------------------- */

#magic-cursor {
	position: absolute;
	display: none;
	width: 10px;
	height: 10px;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
}
body.tt-magic-cursor #magic-cursor {
	display: block;
}

#ball {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	pointer-events: none;
	border-style: solid;
	/*border-color: #FFF;*/
	border-radius: 50%;
	/* Note: border width handled through JS */
}


/* Ball view 
============= */
#ball .ball-view {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	padding: 0 5px;
	font-size: 14px;
	font-weight: 500;
	color: #222;
	line-height: 1.3;
	text-align: center;
	transform: scale(0);
}

#ball .ball-view i {
	font-size: 19px;
}


/* Ball drag 
============= */
#ball .ball-drag {
	position: absolute;
	display: block;
	width: 100%;
	padding: 0 5px;
	font-size: 15px;
	font-weight: 600;
	color: #FFF;
	line-height: 1.2;
	text-align: center;
	transition: all 0.3s;
}
#ball .ball-drag::before,
#ball .ball-drag::after {
	position: absolute;
	top: 50%;
	margin-top: -5px;
	font-size: 19px;
	color: #FFF;
	height: 10px;
	line-height: 10px;

	/* Font Awesome */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
#ball .ball-drag::before {
	content: "\f104"; /* Font Awesome */
	left: 0;
	transform: translate3d(-30px, 0, 0);
	transition: all 0.25s;
}
#ball .ball-drag::after {
	content: "\f105"; /* Font Awesome */
	right: 0;
	transform: translate3d(30px, 0, 0);
	transition: all 0.25s;
}


/* Ball close 
============== */
#ball.ball-close-enabled {
	opacity: 1 !important;
}
#ball .ball-close {
	position: absolute;
	padding: 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: #FFF;
	line-height: 1;
	text-align: center;
}

/* ------------------------------------------------------------- *
 * tt-Section
/* ------------------------------------------------------------- */

.tt-section {
	position: relative;
	padding: 80px 0;
}
@media (max-width: 991px) {
	.tt-section {
		padding: 6% 0;
	}
}
@media (max-width: 767px) {
	.tt-section {
		padding: 10% 0;
	}
}
@media (max-width: 480px) {
	.tt-section {
		padding: 15% 0;
	}
}


/* tt-section background image 
=============================== */


/* tt-section inner 
==================== */
.tt-section-inner {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
}


/* ------------------------------------------------------------- *
 * Headings
/* ------------------------------------------------------------- */

h2, h3 {
	font-weight: bold;
	font-weight: 500;
	color: inherit;
}
h2, h3 {
	line-height: 1.4;
	margin-top: 0px;
	margin-bottom: 30px;
}
h2 { font-size: 42px; }
h3 { font-size: 38px; }


/* ------------------------------------------------------------- *
 * tt-Headings (custom headings)
/* ------------------------------------------------------------- */

.tt-heading {
	margin-bottom: 40px;
}
@media (max-width: 991px) {
	.tt-heading {
		margin-bottom: 30px;
	}
}

/* tt-Headings title */
.tt-heading-title {
	margin: 0;
	font-size: calc(24px + 1vw);
	font-weight: bold;
	font-weight: 500;
	color: #FFF;
}

/* tt-Headings subtitle */
.tt-heading-subtitle {
	margin: 0 0 20px 0;
	font-size: calc(19px + 0.1vw);
	font-weight: bold;
	font-weight: normal;
	color: #FFF;
}

/* tt-Headings paragraph */


/* tt-Headings styles 
====================== */
/* style stroke */

/* If "text-gray" is used */

/* If Firefox */


/* tt-Headings positions 
========================= */
/* position center */
.tt-heading.tt-heading-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


/* tt-Headings sizes 
===================== */
/* size xsm */

/* size sm */

/* size lg */
.tt-heading.tt-heading-lg .tt-heading-title {
	font-size: calc(28px + 2vw);
	line-height: 1.3;
}
.tt-heading.tt-heading-lg .tt-heading-subtitle {
	font-size: calc(16px + 0.3vw);
	font-weight: bold;
	font-weight: 500;
}



.tt-grid {
	position: relative;
}
.tt-grid::after {
	content: "";
	display: table;
	clear: both;
}



/* tt-Grid items
================= */
.tt-grid-items-wrap {
	display: flex;
	flex-wrap: wrap;
}

/* tt-Grid item */
.tt-grid-item {
	position: relative;
	float: left;
	width: 100%;
}
.ttgr-item-inner {
	position: relative;
}


/* tt-Grid height class ("ttgr-height"). Use it on an element inside "ttgr-item-inner".
======================================== */
.ttgr-height {
	position: relative;
	padding-bottom: 35%;
}
@media (max-width: 768px) {
	.ttgr-height {
		position: relative;
		padding-bottom: 60%;
	}
}

/* if class "ttgr-layout-*" enabled */
.tt-grid[class*="ttgr-layout-"] .ttgr-height {
	padding-bottom: 60%;
}


/* tt-Grid layouts 
=================== */
/* layout-2 */

/* layout-3 */

/* layout-4 */

/* layout-1-2 */

/* layout-2-1 */

/* layout-2-3 */

/* layout-3-2 */

/* layout-3-4 */

/* layout-4-3 */

/* layout-creative-1 */

/* layout-creative-2 */
@media (min-width: 768px) {
	.tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(4n+1),
	.tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(4n+4) {
		width: 58%;
	}

	.tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(4n+2),
	.tt-grid.ttgr-layout-creative-2 .tt-grid-item:nth-of-type(4n+3) {
		width: 42%;
		padding-top: 9.8vw;
	}
}


/* tt-grid items shifted 
========================= */
/* Without layout class (one column) */

/* With layout 2 */

/* With layout 3 */

/* With layout 4 */


/* tt-grid item gaps 
===================== */
/* Gap 1 */

/* Gap 2 */

/* Gap 3 */

/* Gap 4 */
.tt-grid.ttgr-gap-4 {
	margin-left: 3vw;
	margin-right: 3vw;
}
@media (min-width: 768px) {
	.tt-grid.ttgr-gap-4 .ttgr-item-inner {
		margin: 0 3vw 6vw 3vw;
	}
}
@media (max-width: 768px) {
	.tt-grid.ttgr-gap-4 .ttgr-item-inner {
		margin: 0 1.5vw 5vw 1.5vw;
	}
}

/* Gap 5 */

/* Gap 6 */


/* tt-grid item image not cropped 
================================== */


/* ------------------------------------------------------------- *
 * Portfolio grid
/* ------------------------------------------------------------- */

#portfolio-grid {
	position: relative;
}

/* Portfolio grid item */
.portfolio-grid-item {
	position: relative;
}


/* Portfolio grid item image 
============================= */
.pgi-image-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 1;
	line-height: 1;
}
.pgi-image-holder {
}
.pgi-image-inner {
}
.pgi-image {
	position: relative;
}
.pgi-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* video */
.pgi-video-wrap {
	position: relative;
}
video.pgi-video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Portfolio grid item caption 
=============================== */
.pgi-caption {
	width: 100%;
	max-width: 900px;
	padding: 20px 3%;
}
.pgi-caption-inner {
}

/* Portfolio grid item title */
.pgi-title {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: calc(19px + 1.5vw);
	font-weight: bold;
	font-weight: 600;
	color: #FFF;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.pgi-title {
		font-size: calc(19px + 1.5vw);
	}
}

/* Portfolio grid item title hover (no effect if "pgi-cap-inside" enabled!) */


/* Portfolio grid item categories */
.pgi-categories-wrap {
	position: relative;
	margin-top: 8px;
	white-space: nowrap;
	overflow: hidden;
	line-height: 1.2;
}
.pgi-category {
	position: relative;
	display: inline-block;
	font-size: calc(13px + 0.1vw);
	color: #FFF;
	opacity: .5;
}


/* Portfolio grid item caption sizes 
===================================== 



/* Portfolio grid item caption positions 
========================================= */
/* Position inside */
#portfolio-grid.pgi-cap-inside .pgi-caption {
	position: absolute;
	left: 0;
	bottom: 8%;
	padding: 0 8%;
	z-index: 2;
}
#portfolio-grid.pgi-cap-inside .pgi-category {
	opacity: 1;
}

/* Position center */


/* Portfolio grid item caption styles 
====================================== */
/* If light image used (effect only if "pgi-cap-inside" enabled) */


/* Portfolio grid item hover 
============================= */

/* Clip path (effect only with gaps) */
@media (min-width: 768px) {
	#portfolio-grid.pgi-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .pgi-image-holder {
		clip-path: inset(0 0 0 0);
		overflow: hidden;
		transition: clip-path 0.8s cubic-bezier(0.07, 0.72, 0.29, 0.96);
	}
	#portfolio-grid.pgi-hover [class*="ttgr-gap-"]:not(.ttgr-gap-1) .pgi-image-wrap:hover .pgi-image-holder {
		clip-path: inset(3% 3% 3% 3%);
	}

	/* Image zoom */
	#portfolio-grid.pgi-hover .pgi-image {
		transition: all 1s cubic-bezier(.165,.84,.44,1);
	}
	#portfolio-grid.pgi-hover .pgi-image-wrap:hover .pgi-image {
		transform: scale(1.05);
	}
}

/* ------------------------------------------------------------- *
 * Buttons
/* ------------------------------------------------------------- */

.tt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	background-color: transparent;
	margin: 15px 15px 15px 0;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	font-weight: 500;
	overflow: hidden;
	cursor: pointer;
	border: none;
	border-radius: 100px;
	z-index: 9;
}
.tt-btn:last-child {
	margin-right: 0;
}
.tt-btn > * {
	position: relative;
	color: #FFF;
	transition: transform 0.3s;
}
.tt-btn > *,
.tt-btn > *::after {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 30px;
	line-height: 1;
}
.tt-btn > *::after {
	position: absolute;
	content: attr(data-hover);
	top: 100%;
	width: 100%;
	left: 0;
	padding-left: 0;
	padding-right: 0;
}
.tt-btn:hover > * {
	transform: translate3d(0, -100%, 0);
}


/* Button styles 
================= */
/* Button block */

/* Button round */

/* Button primary */

/* Button primary outline */

/* Button light */

/* Button light outline */

/* Button dark */

/* Button dark outline */

/* Button link */
.tt-btn-link {
	align-items: center;
	border-radius: 0;
}
.tt-btn-link > *,
.tt-btn-link > *::after {
	padding: 0;
	line-height: 1.6;
	color: #FFF;
}
.tt-btn-link:hover > * {
	color: #FFF;
}

.tt-btn-link::after {
	display: inline-block;
	content: "";
	width: 40px;
	height: 1px;
	background-color: #FFF;
	margin-top: 2px;
	margin-left: 15px;
}
body:not(.is-mobile) .tt-btn-link:hover::after {
	animation: swipe-line .8s cubic-bezier(0.475, 0.425, 0, 0.995) forwards;
}

@keyframes swipe-line {
	0% {
		transform-origin: right;
		transform: scale(1); 
	}
	33% {
		transform-origin: right;
		transform: scaleX(0); 
	}
	66% {
		transform-origin: left;
		transform: scaleX(0); 
	}
	to {
		transform-origin: left;
		transform: scale(1); } 
}

/* Button disabled */


/* ------------------------------------------------------------- *
 * Social buttons
/* ------------------------------------------------------------- */


/* ------------------------------------------------------------- *
 * tt-Accordion
/* ------------------------------------------------------------- */

.tt-accordion {
	position: relative;
}

.tt-accordion-item {
	position: relative;
}


/* Accordion heading 
===================== */
.tt-accordion-heading {
	position: relative;
	padding: 20px 13% 20px 0;
	cursor: pointer;
}
.tt-accordion-item:first-child .tt-accordion-heading {
	padding-top: 0;
}
.tt-ac-head-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
}
@media (max-width: 991px) {
	.tt-ac-head-title {
		font-size: 28px;
	}
}

/* Accordion heading subtext */
.tt-accordion-subtext {
	margin-top: 10px;
	font-size: 19px;
	font-weight: normal;
	color: #999;
}

/* Accordion heading caret */
.tt-accordion-caret-wrap {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate3d(0, -50%, 0);
}
.tt-accordion-caret {
	position: relative;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	color: #FFF;
	cursor: pointer;
	z-index: 2;
	opacity: .3;
	transition: opacity 0.3s;
}
.tt-accordion-item:not(.active) .tt-accordion-heading:hover .tt-accordion-caret,
.tt-accordion-caret:hover {
	opacity: 1;
}

.tt-accordion-caret::before,
.tt-accordion-caret::after {
	position: absolute;
	display: block;
	content: "";
	background-color: #FFF;
}
.tt-accordion-caret::before {
	width: 3px;
	height: 100%;
	transition: height 0.3s;
}
.tt-accordion-caret::after {
	width: 100%;
	height: 3px;
}


/* Accordion content 
===================== */
.tt-accordion-content {
	padding-bottom: 40px;
	color: #e0e0e0;
}
.tt-accordion-content:not(.is-open) {
	display: none;
}


/* Accordion styles 
==================== */
/* borders */
.tt-accordion.tt-ac-borders .tt-accordion-heading {
	padding-top: 30px;
	padding-bottom: 30px;
	border-top: 1px solid rgb(125 125 125 / 40%);
}

.tt-accordion.tt-ac-borders .tt-accordion-item:last-child {
	border-bottom: 1px solid rgb(125 125 125 / 40%);
}


/* Accordion sizes 
=================== */

.tt-accordion.tt-ac-xlg .tt-accordion-heading {
	padding-top: 45px;
	padding-bottom: 45px;
}
.tt-accordion.tt-ac-xlg .tt-ac-head-title {
	font-size: calc(24px + 1.5vw);
}


/* ------------------------------------------------------------- *
 * Table
/* ------------------------------------------------------------- */


/* tt-Table (styled table)
============ */

/* thead */

/* tbody */

/* tfoot */


/* ------------------------------------------------------------- *
 * tt-Tabs 
/* ------------------------------------------------------------- */

/* tt-Tabs buttons */

/* tt-Tabs buttons on small screens */

/* tt-Tabs content */


/* tt-Tabs styles
================== */

/* Tabs minimal style*/

/* Tabs justified style*/


/* ------------------------------------------------------------- *
 * Magnetic wrap
/* ------------------------------------------------------------- */


/* ------------------------------------------------------------- *
 * Blockquote
/* ------------------------------------------------------------- */


/* ------------------------------------------------------------- *
 * Figure
/* ------------------------------------------------------------- */

figure {
	position: relative;
	margin: 0;
}

/* figure image */
figure img {
	width: 100%;
	height: auto;
}

/* figure caption */


/* ------------------------------------------------------------- *
 * Forms
/* ------------------------------------------------------------- */


::-webkit-input-placeholder {
	color: #999 !important;
}
:-moz-placeholder {
	color: #999 !important;
}
::-moz-placeholder {
	color: #999 !important;
}
:-ms-input-placeholder {
	color: #999 !important;
}

/* form group */

/* checkbox/radio */

/* textarea */

/* select */

/* range slider */


/* Form inline 
=============== */
@media (min-width: 1025px) {

	/* Form inline */

	/* Form group inline */
}


/* Custom forms 
================ */
/* Custom checkbox/radio */

/* Custom file upload */

/* Custom form with button inside */


/* Form extra styles 
===================== */
/* form style filled */

/* form style minimal */


/* Form sizes 
============== */
/* form sm */

/* form lg */


/* -------------------------------------------------------------------- *
 * Contact info
/* -------------------------------------------------------------------- */

/* Social buttons */


/* -------------------------------------------------------------------- *
 * Background video
 * Note: position "relative" or "absolute" required on parent element!
/* -------------------------------------------------------------------- */


/* ------------------------------------------------------------- *
 * Background noise
/* ------------------------------------------------------------- */

.bg-noise {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.bg-noise:before {
	position: absolute;
	content: '';
	top: -10rem;
	left: -10rem;
	width: calc(100% + 20rem);
	height: calc(100% + 20rem);
	z-index: -1;
	pointer-events: none;
	background-image: url(../img/bg-noise.png);
	background-position: 50%;
	animation: BgNoise 1s steps(2) infinite;
}
@keyframes BgNoise {
	0% { transform: translate3d(0, 9rem, 0) }
	10% { transform: translate3d(-1rem, -4rem, 0) }
	20% { transform: translate3d(-8rem, 2rem, 0) }
	30% { transform: translate3d(9rem, -9rem, 0) }
	40% { transform: translate3d(-2rem, 7rem, 0) }
	50% { transform: translate3d(-9rem, -4rem, 0) }
	60% { transform: translate3d(2rem, 6rem, 0) }
	70% { transform: translate3d(7rem, -8rem, 0) }
	80% { transform: translate3d(-9rem, 1rem, 0) }
	90% { transform: translate3d(6rem, -5rem, 0) }
	to { transform: translate3d(-7rem, 0, 0) }
}

/* For desktop only 
==================== */
@media (min-width: 1025px) {

	/* Footer columns */

	/* Align footer column content */

	/* Footer social */
}

/* For smaller screens only 
============================ */
@media (max-width: 1024px) {

	/* Footer columns */

	/* Order footer columns */

	/* Footer social */
}


@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 25px 12px rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.4);
  }
}



.pulse-button {
    cursor: pointer;
    animation: pulseShadow 2s infinite;
    transition: box-shadow 0.3s ease;
    background: #00000036 !important;
}

 #call-button {
  margin-left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #000000 !important; /* Schwarzer Text */
  background-color: #ffffff !important; /* Weißer Hintergrund */
  border: 2px solid #000000; /* Schwarzer Rand */
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#i {
  color: #000000 !important; /* Schwarzes Icon */
}

#call-button:hover {
  background-color: #f1f1f1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}