/**
* Theme Name: Skyview2 Child
* Description: Child-Theme von Skyview2 — projektspezifische Anpassungen Freihofmatte. Selbst gehostete Schriften (Oswald, Nunito) im Ordner fonts/. Quelle versioniert im Repo.
* Author: <a href="https://wpopal.com/">Opal Team</a>
* Template: skyview2
* Version: 2.2.8
*/

/* =========================================================================
   Selbst gehostete Schriften (DSGVO – kein Google-CDN).
   Dateien liegen mit im Theme unter fonts/ → Pfade relativ zu dieser style.css.
   Nur die real genutzten Schnitte: Oswald 400/500/700, Nunito 300/400/700 (+Kursiv).
   ========================================================================= */

/* --- Oswald (Überschriften / Display) --- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/oswald-v57-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/oswald-v57-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/oswald-v57-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/oswald-v57-latin-700.woff2") format("woff2"); }

/* --- Nunito (Fließtext) --- */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/nunito-v32-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-v32-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/nunito-v32-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/nunito-v32-latin-italic.woff2") format("woff2"); }

/* --- Revicons (RevSlider) --- */
@font-face {
  font-family: 'revicons';
  src: url('/wp-content/plugins/revslider/public/css/fonts/revicons/fonts/revicons.woff') format('woff'),
       url('/wp-content/plugins/revslider/public/css/fonts/revicons/fonts/revicons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/* =========================================================================
   Weiteres projektspezifisches CSS hier ergänzen (z. B. gezielte Layout-Fixes).
   Typografie/Größen/Farben laufen primär über Elementor → Website-Einstellungen.
   ========================================================================= */

/* GLOBAL */

.oswald {
	font-family: Oswald!important;
}

.nunito {
	font-family: Nunito!important;
}

.footerlink, .footerlink a {
	font-size: 16px!important;
	font-weight: 300!important;
	line-height: 1.3em!important;
	color: #000000!important;

	&:hover {
		font-size: 16px!important;
		font-weight: 300!important;
		line-height: 1.3em!important;
		color: #000000!important;
		text-decoration: underline 1px #000000;
	}
}


/* FM-13: Wortbruch in der Überschrift "VORZÜGE FÜR ANSPRUCHSVOLLE INDIVIDUALISTEN"
   (.elementor-element-1cc0139) beheben.
   Ursache: Die Spalte (.elementor-element-19c4ea2) hat ein festes, nicht
   responsives padding-right:80px auf dem Widget-Wrap. Zusammen mit der fixen
   Schriftgröße 39px bleibt zwischen ~768px und ~1439px zu wenig Platz für das
   längste Wort ("ANSPRUCHSVOLLE"), wodurch overflow-wrap:break-word es mitten
   im Wort umbricht. Ab ~1440px (und darunter, gestapelt, ab <768px) passt es
   bereits ohne Eingriff sauber um.
   Fix: Padding in diesem Bereich verkleinern und Schriftgröße zweistufig
   reduzieren, sodass jedes Wort auf eine Zeile passt (verifiziert bei 768,
   1024/1025, 1300, 1439px). !important, da Elementor die Original-Werte über
   eine spezifischere, generierte Regel (post-*.css) setzt. */
@media (min-width: 768px) and (max-width: 1439px) {
  .elementor-element-19c4ea2 .elementor-widget-wrap {
    padding-right: 16px !important;
  }
  .elementor-element-1cc0139 .elementor-heading-title {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-1cc0139 .elementor-heading-title {
    font-size: 22px !important;
  }
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .elementor-element-1cc0139 .elementor-heading-title {
    font-size: 30px !important;
  }
}

/* FM-23: „RÜCKRUF SERVICE"-Button (skyview2-button-popup, .elementor-element-938ac33)
   ist ein per Theme-CSS position:fixed schwebender Dauer-CTA (top:40px/right:50px).
   Original 418x136px (Text 34/25px + großes Padding): überlappt das zentrierte Logo
   (Mobile) und beim Scrollen Inhalte, u.a. das Nachricht-Feld im Kontaktformular (Desktop).
   Entscheid Nutzer: fixed/CTA behalten, aber kompakter → Fläche stark verkleinern.
   Fix: überall kompakt (18px, 12/22 Padding → ~174x46px); bis 768px zusätzlich noch
   kleiner (14px) und bündig in die obere rechte Ecke, damit er das Logo freilässt.
   Verifiziert bei 375, 768 und 1440px. */
.elementor-element-938ac33 .elementor-button,
.elementor-element-938ac33 .elementor-button-text {
  font-size: 18px !important;
  line-height: 1.2 !important;
}
.elementor-element-938ac33 .elementor-button {
  padding: 12px 22px !important;
}
@media (max-width: 768px) {
  .elementor-element-938ac33 .elementor-button,
  .elementor-element-938ac33 .elementor-button-text {
    font-size: 14px !important;
  }
  .elementor-element-938ac33 .elementor-button {
    padding: 8px 14px !important;
  }
  .elementor-element-938ac33 {
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
  }
}

/* FM-24: Vertikaler Titel „WOHN- & BUSINESS EINHEITEN" (.title-vertical-sub im Widget
   .elementor-element-b49c594) bricht mit overflow-wrap:break-word mitten im Wort
   ("WOHN- & BUSINE / SS EINHEIT / EN"), weil die gedrehte Box zu wenig Platz hat.
   Fix: nur an Leerzeichen umbrechen (keep-all). Verifiziert bei 768px. */
.elementor-element-b49c594 .title-vertical-sub {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* FM-25: Footer-E-Mail-Link (mailto:info@hausbauschweiz.ch im Widget
   .elementor-element-ca355d0) ist mit 34px viel größer als die Telefonnummer (16px)
   und passt nicht in seine schmale Spalte → bricht mitten im Wort in 2–3 Zeilen.
   Fix: auf 16px (wie Telefon) und nowrap, damit die Adresse in einer Zeile bleibt und
   in den freien Raum rechts läuft. Verifiziert bei 375 und 1440px (kein H-Scroll). */
.elementor-element-ca355d0 a {
  font-size: 16px !important;
  white-space: nowrap !important;
}

/* FM-26: Hero (Slider Revolution 7, Modul #SR7_4_1) responsiv an die Live-Seite angleichen.
   Probleme auf Smartphone/Tablet (Desktop 1920/Widescreen waren bereits korrekt):
   - Titel-Layer #SR7_4_1-17-9 zu groß → längste Zeile lief rechts aus dem Viewport.
   - "MEHR DAZU"-Button #SR7_4_1-17-12 (position:absolute, top:148.5px) lag @≤480 mitten im Titel.
   - Fester Zeilenumbruch <br> im Titel erzwang unschöne Zeilen; Live bricht natürlich um.
   - Slider rendert leere "uranus"-Pfeil-Kästchen, die es auf freihofmatte.ch nicht gibt.
   RevSlider setzt Größe UND Position inline → Overrides brauchen !important (extern schlägt inline).
   Verifiziert am Live-Staging gegen freihofmatte.ch bei 375 / 768 / 1920 / 2560 (kein H-Überlauf,
   Button klar unter dem Titel, natürlicher Umbruch). Layer-IDs stammen aus dem aktuellen Slider #4,
   Slide 1 — bei einem Slider-Neuaufbau prüfen. */
#SR7_4_1 sr7-arrow.sr7-arrows {         /* leere Hero-Pfeile aus – die Bullet-Navigation bleibt (wie Live) */
  display: none !important;
}
@media (max-width: 480px) {
  #SR7_4_1-17-9 {
    font-size: 28px !important;
    line-height: 34px !important;
    width: 330px !important;
    left: 0 !important;
    letter-spacing: 1px !important;
  }
  #SR7_4_1-17-9 br {                     /* natürlicher Umbruch statt festem <br> (wie Live) */
    display: none !important;
  }
  #SR7_4_1-17-12 {
    top: 225px !important;               /* Button unter den Titel schieben (statt top:148.5px im Titel) */
    width: auto !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 481px) and (max-width: 1024px) {
  #SR7_4_1-17-9 {
    font-size: 42px !important;
    line-height: 50px !important;
    width: 700px !important;
    letter-spacing: 1.5px !important;
  }
  #SR7_4_1-17-9 br {
    display: none !important;
  }
}

.fhm-btn .elementor-button {
	padding: 12px 24px!important;
	.elementor-button-text {
		font-family: Oswald!important;
		font-size: 25px!important;
		line-height: 1.1em!important;
		letter-spacing: unset!important;
	}
}

/*****************
  KONTAKTFORMULAR
 *****************/

.form-group, .wpcf7-form placeholder, .wpcf7-form input:not([type="submit"]), ::placeholder {
	color: #000000!important;
	font-family: Nunito!important;
    font-size: 16px!important;
	font-weight: 300!important;
	text-transform: uppercase!important;
	font-style: normal!important;
	line-height: 1.3em!important;
}

.wpcf7-form .wpcf7-submit {
  width: auto !important;
		height: 65px !important;
  line-height: 30px;
		background: #2f2b48 !important;
		color: #ffffff !important;
	 font-size: 25px !important;
		letter-spacing: 0.1em;
		font-weight: 500;
	 padding-top: 12px !important;
	 padding-bottom: 12px !important;
}

.wpcf7-form .wpcf7-submit:hover{
		color: #ae9a3e !important;
}

span.wpcf7-list-item-label{
  vertical-align: top;
	line-height: 45px;
}

#fhm-kontakt-checkboxen .col-md-6 {
	padding-left: 0px !important;
}

.fhm-kontakt-checkbox1{
	margin-top:-6px;
	width: 50%;
	float: left;
}

.fhm-kontakt-checkbox2{
		margin-top:-6px;
	display:block;
		width: 50%;
	float: left;
}


#fhm-kontakt-checkbox-frame label {
	line-height: 16px;
	
}

.fhm-kontakt-checkbox1 wpcf7-list-item-label{
	margin-top:-5px;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  font-size: 1em;
  width: 22px;
  height: 22px;
  background-color: transparent !important;
  border: 1px solid #575656;
  margin-top: 10px;
	 position: relative;
  z-index: 1;
}
input[type="checkbox"]:hover {
 box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
}
input[type="checkbox"]::-ms-expand {
 display:none;
}
.lt-ie10 input[type="checkbox"] {
  background-image: none;
}
input[type='checkbox']:checked + label::before {
 background-color: transparent !important;
	opacity: 1;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
  content:'check';
  display:inline-block;
  width: 17px;
  height:17px;
  position: relative;
  top:4px;
  border: 1px solid #bbb;
  background-color: transparent !important;
  margin-right: 1em;
  box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

/* add custom inputs with ::before */
input[type='checkbox']:checked + label::before, 
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
  content:' ';
  display:inline-block;
  width: 17px;
  height:17px;
  position: relative;
  top:4px;
  border: 1px solid #bbb;
  background-color: transparent !important;
  margin-right: 1em;
  box-shadow: inset 0 1px 1px 0 rgba(0,0,0,.1);
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
 border-radius: 30px;
}

input[type='checkbox']:hover + label::before,
input[type='radio']:hover + label::before {
 background-color: transparent !important;
 box-shadow: inset 0 0 0 2px white;
}
 
input[type='checkbox']:checked + label::before,
input[type='radio']:checked + label::before {
 background-color: transparent !important;
 box-shadow: inset 0 0 0 2px white;
}
	
input[type="checkbox"]:checked + span::before {
  content: '\2713';
  position: relative;
  right: 8px;
  font-size: 2rem;
  top: -4px;
  color: #636362;
	 margin-left: -10px;
}

input[type="checkbox"]:checked {
  background-color: transparent !important;
}

.col-md-6, .col-sm-6 {
	width:50% !important;
}


.col-sm-12, .col-xs-12 {
	width:50% !important;
	@media (max-width:1023px) {
		width:100%!important;
	}
}

.wpcf7-form .row {
	margin-left: 0!important;
}

#fhm-kontakt-checkboxen {
	width: 50%!important;
	@media (max-width: 480px) {
		width:100%!important;
	}
}

.elementor-element-403429e sr7-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-element-403429e sr7-slide > sr7-mask:has(> sr7-shp) {
  width: 33.3333% !important;
}
.elementor-element-403429e sr7-slide > sr7-mask > sr7-shp {
  width: 100% !important;
}

@media (min-width: 1921px) {
  .elementor-element-403429e sr7-arrow.sr7-arrows {
    transform: translateY(-140px) !important;
  }
  .elementor-element-403429e sr7-arrow.sr7-leftarrow {
    left: calc(16.6667% - 61.5px) !important;
  }
  .elementor-element-403429e sr7-arrow.sr7-rightarrow {
    left: calc(16.6667% + 1.5px) !important;
  }
}

.elementor-kit-8 a {
	font-size: 18px;
    font-weight: 300;
    line-height: 36px;
}