/*
Theme Name: GD Theme by Elementor
Template: hello-elementor
Version: 1.1.0
Author: Grunddesign GmbH
Author URI:   https://grunddesign.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/

/* #region Karte */


#karte {
	width:100%;
	height: 40vh;
	border-radius: 15px;
	z-index: 2;
}
/* Schwarzer Popup-Hintergrund */
.leaflet-popup-content-wrapper {
    background: var(--e-global-color-accent) !important;
    color: #fff !important;
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.5) !important;
}

/* Schwarzer "Spitze" (das Dreieck unter dem Popup) */
.leaflet-popup-tip {
    background: var(--e-global-color-accent) !important;
}
/* Cluster Kreis – Hintergrund */
.marker-cluster div {
    color: #fff;
	font-weight: 800 !important;
}

.marker-cluster-small div {
    background-color: #777 !important;
}
.marker-cluster-small  {
    background-color: #77777766 !important;
}


.marker-cluster-medium div {
    background-color: #555 !important;
}
.marker-cluster-medium  {
    background-color: #55555566 !important;
}


.marker-cluster-large div {
    background-color: #333 !important;
}

.marker-cluster-large  {
    background-color: #33333366 !important;
}

/* Stil für den Attribution-Text unten rechts */
.leaflet-control-attribution {
    font-size: 10px;          
    color: #444 !important;              
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Linkfarbe an Design anpassen */
.leaflet-control-attribution a {
    color: #444 !important;          
    text-decoration: none;
}

.leaflet-control-attribution a:hover {
    text-decoration: underline;
}
.leaflet-control-attribution svg {
	display:none !important;
}
/* #endregion */

/* #region Klassen */

.bild-graustufen {
	filter: grayscale(100%);
}

/* #endregion */

/* #region Zitate */

#gd-zitate .quote-text {
    font-style: italic;
    border: 2px solid #ddd;
    border-radius:20px;
    padding: 15px;
}
#gd-zitate .quote-line {
    position: relative;
    border: 2px solid #ddd;
    border-radius: 0 100% 0 0;
    width: 30px;
    height: 30px;
    top: -14px;
    left: 30px;
    border-bottom: none;
    border-left: none;
    z-index: 3; 
}
#gd-zitate .quote-bar {
    position: relative;
    width: 50px;
    border: 6px solid #f5f5f5;
    top: -5px;
    left: 30px;
    z-index: 2;
}
#gd-zitate .quote-author {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    z-index: 1;
    margin-left:80px;
    top: -35px;
}
#gd-zitate {
    margin-bottom: -30px;
}

/* #endregion */

/* #region Vor- Nachher */

.custom-comparison-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
    aspect-ratio: 10 / 6;

    cursor: col-resize;
    
    --slider-pos: 50%; 
    --tilt-width: 24.7%;   
    --divider-width: 2px;
    --divider-color: #fff;
  }

  .custom-comparison-slider img {
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; 
    user-select: none;
  }

  .img-after {
    position: relative;
    z-index: 1;
  }

  .img-before {
      position: absolute;
    z-index: 2;
    clip-path: polygon(
      0% 0%, 
      calc(var(--slider-pos) + (var(--tilt-width) / 2)) 0%, 
      calc(var(--slider-pos) - (var(--tilt-width) / 2)) 100%, 
      0% 100%
    );
  }
  .slider-handle {
    position: absolute;
    opacity: var(--handle);
    top: 0;
    bottom: 0;
    left: var(--slider-pos);
    width: 0;
    z-index: 3;
    pointer-events: none; 
  }
  .slider-handle::before {
    content: '';
    position: absolute;
    background-image: url("/wp-content/uploads/2025/11/slider-ui.webp");
    left: 0;
    transform: translateX(-38.1%);
    height: 100%;
    aspect-ratio: 257 / 471;
    background-size: contain;
  }

/* #endregion */