/* ============================================================================
   WDSB Root CSS - Globale Styles
   Version: 2025.12.07.150000
   WICHTIG: Diese CSS wird als LETZTE geladen und überschreibt alle anderen!
   ============================================================================ */

/* Globale Schriftart für alle Seiten (außer Landing-Pages) */
html,
body {
    font-family: 'm-a-r', sans-serif !important;
}

/* Body und HTML */
/* AUSKOMMENTIERT: Überschreibt KTS-Fonts - KTS verwendet Montserrat Alternates */
/*
html body,
body.path-frontpage,
body {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
}
*/
.toolbar-menu a {
	color: #000 !important;
}
.menu-item a {
	color: #000 !important;
}
p {
  margin-bottom: 10px !important;
}
ul.service-benefits {
	list-style: none;
	margin: 0px 30px;
  font-size: 16px;
  line-height: 1.8;
}
/* Service Kontakt */
.service-kontakt {
    text-align: center;
}

#service-kontakt,
#service-kontakt .column-content,
#service-kontakt .column-content-inner {
    text-align: center;
}

/* Button im Service-Kontakt zentrieren */
#service-kontakt button, #service-kontakt .open-webform-modal {
	display: inline-block;
	margin: 0 auto;
	border: 1px solid #000;
	background: #fff;
	padding: 8px 15px;
    color: #000;
}
#service-kontakt button, #service-kontakt .open-webform-moda:hoverl {
	border: 1px solid #fff;
	background: #000;
    color: #fff !important;
}
.title {
	color: #fff !important;
  font-family: m-a-r !important;
}

/* Alle Text-Elemente */
/* AUSKOMMENTIERT: Überschreibt KTS-Fonts - KTS verwendet Montserrat Alternates */
/*
html a,
html p,
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
body a,
body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: 'Orbitron', sans-serif !important;
    color: #fff !important;
}
*/

/* Block-Titel */
/* AUSKOMMENTIERT: Überschreibt KTS-Fonts - KTS verwendet Montserrat Alternates */
/*
.block-title,
.block-title > span,
.block .block-title {
    font-family: 'Orbitron', sans-serif !important;
}
*/

/* Universal-Selektor als Fallback (hohe Spezifität) */
/* AUSKOMMENTIERT: Überschreibt KTS-Fonts - KTS verwendet Montserrat Alternates */
/*
* {
    font-family: 'Orbitron', sans-serif !important;
}
*/
@media (min-width: 1600px) {
  .container {
      width: 1560px;
  }
  #content-items{
      width: 1560px;
      margin: 20px auto;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      text-align: left;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8;
      color: #000;
      font-family: "m-a-r", sans-serif;
      font-weight: 500;
  }
}
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "m-a-r", sans-serif;
	font-weight: 500;
	line-height: 1.1;
	color: #111111;
}
.widget.gsc-icon-box .highlight_content .title {
	font-size: 14px;
	font-family: "m-a-r", sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	color: #000;
	margin-bottom: 3px;
}
.btn:hover {
	color: #fff !important;
    background: #000 !important;
    border: 1px solid #fff !important;
}
.service-block{
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px 20px 20px!important;
    border-radius: 10px !important;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
    font-size: 16px !important;
}
#content-body .service-block {
    height: 320px !important;
    width: auto;
    float: left;
    margin: 5px;
    margin-bottom: 20px;
    position: relative;
}
.views-field-view-node{
    margin-top: 20px;
    text-align: right;
}
.views-field-view-node span a {
      background: #fff;
      color: #000;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 8px 15px;
      border: 1px solid #000;
}
.views-field-view-node span a:hover {
      background: #000;
      color: #fff;
      border: 1px solid #fff;
}
.block {
    margin-bottom: 0 !important;
    position: relative;
}
.testimonial-item.testimonial-node-1 .quote{
    color: #F0E7A9 !important;
    font-size: 16px !important;
}
.info-content {
    color: #F0E7A9 !important;
    font-size: 16px !important;
}
.info-content .title a {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: m-a-r, sans-serif !important;
}
.info-content .title a:hover {
    color: #ff0 !important;
}
 .gbb-row .bb-inner {
    padding: 0px;
}
  #content-body .col-md-3 {
    width: calc(25% - 10px) !important;
    margin: 5px;
    float: left;
}
.grid-sizer{ 
  width: 20%; 
}

#content-body .views-field-view-node {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.node__title {
  display: none;
}

.sf-depth-2 {
  background-color: #fff !important;
}
#content-header {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border-radius: 10px;
}
.breadcrumb {
  background-color: transparent;
}
.breadcrumb-content-inner .gva-block-breadcrumb .breadcrumb-style .content-inner a,
.breadcrumb-content-inner .gva-block-breadcrumb .breadcrumb-style .content-inner span,
.breadcrumb-content-inner .gva-block-breadcrumb .breadcrumb-style .content-inner li {
	color: #000;
	font-size: 18px !important;
	font-family: m-a-r;
}
#block-gavias-batiz-pfadnavigation-2 {
	background-color: transparent;
}
.system-breadcrumb ol {
	list-style: none;
}
#block-gavias-batiz-branding {
	width: 300px;
  margin: 0 auto;
}
.sf-depth-1 {
	color: #F0E7A9;
	font-size: 18px;
	font-family: m-a-6;
  text-shadow: -0.5px -0.5px 0px #000000, -0.5px 0.5px 0px #000000, 0.5px 0.5px 0px #000000;
}
.sf-depth-1:hover {
	color: #000;
	font-size: 18px;
	font-family: m-a-6;
  text-shadow: -0.5px -0.5px 0px #F0E7A9, -0.5px 0.5px 0px #F0E7A9, 0.5px 0.5px 0px #F0E7A9;
}
.area-main-menu {
	padding-top: 30px;
	/* width: 100%; */
	padding-left: 50px;
}
.sidebar-right {
	display: none;
}
.widget.gsc-heading .title-desc {
	color: #000 !important;
}
#ready-project .widget.gsc-heading .title-desc {
	color: #F0E7A9 !important;
}
.webdesign-bg hr{
  border: 0;
}
.content-item, #block-gavias-batiz-local-tasks {
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #000;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}
	.contact-info{
		margin-left: 30px;
	}

@media (max-width: 992px) {
	.contact-info{
		text-align: center;
	}
}
.contact-info{
	color: #F0E7A9 !important;
	font-size: 16px !important;
}
.contact-info a{
	color: #F0E7A9 !important;
}
.contact-info a:hover{
	color: #FF0000 !important;
}
/* ============================================================================
   Footer Superfish Menü - Horizontal zentriert
   ============================================================================ */
#block-gavias-batiz-fusszeile,
.block-superfishfooter {
    text-align: center !important;
}

#superfish-footer,
ul.sf-footer {
    display: inline-flex !important;
    justify-content: center !important;
    float: none !important;
}

#superfish-footer > li,
ul.sf-footer > li {
    float: none !important;
}
ul.sf-menu a, ul.sf-menu span.nolink {
	padding: 0.5em 1.5em !important;
}

/* 
====================================================
Portfolio Website Screenshot - Scrollbarer Container 
====================================================
*/
/* FEHLT im CSS: */
.portfolio-screenshot-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 427px;
  overflow: hidden;  /* ← Das ist entscheidend! */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  background: #f5f5f5;
  margin: 0 auto !important;
}

.portfolio-screenshot-container .screenshot-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.portfolio-screenshot-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Scroll-Hinweis */
.portfolio-screenshot-container::after {
  content: '↓ Scrollen';
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.3s;
}

.portfolio-screenshot-container.scrolled-end::after {
  opacity: 0;
}

/* Responsiv */
@media (max-width: 680px) {
  .portfolio-screenshot-container {
    max-width: 100%;
    height: 54vw; /* Behält Verhältnis 640:347 */
  }
}
h3:not(.startseite-mansonry), .h3:not(.startseite-mansonry) {
	font-size: 22px !important;
}
#portfolio-items .content-item {
	width: calc(50% - 20px);
	margin: 0 10px;
}
#portfolio-content p {
	font-size: 16px;
}
.portfolio-link {
	margin-top: 20px;
  text-align: center;
}
.portfolio-link a{
	font-size: 20px;
}
.wdsb-grid-item .field-content p,
.content-item .field-content p,
.field-content p {
	font-size: clamp(0.875rem, 0.7328rem + 0.5988vw, 1.5rem) !important;
	margin: 0px !important;
  line-height: 1.8;
  margin-bottom: 10px !important;
}
#block-gavias-batiz-webformular label {
	width: 180px;
	font-size: 16px;
	margin-bottom: 15px;
}
.webform-type-checkbox label {
	width: calc(99% - 20px) !important;
  margin: 10px 0px !important;
}
#edit-message {
	width: 100%;
}
.pull-left .inline, .pull-left a,.topbar a {
	color: #F0E7A9;
} 
.copyright, .copyrightx a {
	color: #F0E7A9;
}
.service-image{
	width: 100% !important;
  height: auto;
	margin: 0;
	padding: 0;
}
.service-image img {
	border-radius: 10px;
	border: 1px solid #D0CCE9;
  margin-bottom: 20px;
}
.widget {
	margin-bottom: 0px !important;
}
.btn {
  border: 1px solid #000;
	border-radius: 4px;
	margin-top: 20px;
  background-color: #fff;
  text-transform: uppercase;
}
.masonry-size {
  width: 33%;
}
h2:not(.startseite-mansonry), .h2:not(.startseite-mansonry) {
	font-size: 30px !important;
  text-transform: uppercase !important;
}
#startseite-masonry {
	height: auto;
	margin-bottom: 20px;
}
#startseite-bewertungen,
#startseite-bewertungen * {
mask-composite: ;  color: #F0E7A9 !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  mix-blend-mode: normal !important;
}
.owl-carousel .owl-stage {
	height: 250px !important;
}
.heading-top {
	margin-top: -100px;
}
.widget.block.clearfix.gsc-block-view.gsc-block-drupal.block-view.title-align-left.text-dark.remove-margin-off.remove-margin-post-off.aos-init {
	margin-top: -130px;
}
.wdsb-grid-item .content-item h2,
.wdsb-grid-item .field-content h2,
.wdsb-grid-item h2.startseite-mansonry,
.content-item h2.startseite-mansonry,
.field-content h2.startseite-mansonry,
.wdsb-grid-item .field-content h2.startseite-mansonry {
  font-size: clamp(2rem, 1.7725rem + 0.9581vw, 3rem) !important;
}
.wdsb-grid-item .content-item h3,
.wdsb-grid-item .field-content h3,
.wdsb-grid-item h3.startseite-mansonry,
.content-item h3.startseite-mansonry,
.field-content h3.startseite-mansonry,
.wdsb-grid-item .field-content h3.startseite-mansonry {
	font-size: clamp(1.25rem, 1.0793rem + 0.7186vw, 2rem) !important;
}
#startseite-kontakt {
	text-align: center;
}

[id^="button-"] {
  /* beginnt mit "button-" */
  background-color: #007bff;
}
.klaro_toggle_dialog {
	z-index: 9999;
}
.klaro_toggle_dialog {
	position: fixed;
	z-index: 99;
	left: 25px;
	bottom: 25px;
	width: 35px;
	height: 35px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	border: 1px solid #eaeaea;
	border-radius: 20px;
	background: white;
	background-image: url(../icons/privacy.svg);
	background-size: contain;
	-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}