/**
 * Theme Name:     Palace Child
 * Author:         Themeim
 * Template:       palace
 * Text Domain:	   palace-child
 * Description:    Palace - WordPress theme is a Creative Modern Kindergarten websites including: camp, child care, dance class, kids, palace, kindergarden, kindergarten, music class, music school, preschool, sport school, sports camp, summer camp and more. it is a super responsive and lightweight theme. Its Fully W3C Validate and SEO Friendly Theme. It will display your content nicely on Desktop, Laptop, iPad, iPhone, Android Mobile, or tablets. This is highly customizable. We have included best practices of web development – you can create a great website layout.
 */

/* ====================================================================
   Immobiliengalerie Coburg — Markenfarben
   Ueberschreibt die Theme-Farbvariablen aus palace/assets/css/global.css
   ==================================================================== */

/* :root:root = hoehere Spezifitaet, damit die Werte auch gegen die
   zuletzt geladene palace/assets/css/style.css gewinnen */
:root:root {
	/* Primaerfarbe #00B2E3 (ersetzt das Theme-Rot #EB2027) */
	--main-color: rgb(0, 178, 227);
	--main-color-rgb: 0, 178, 227;

	/* Sekundaerfarbe #00445B (ersetzt das Navy #171B2A) */
	--color-two: rgb(0, 68, 91);
	--color-two-rgb: 0, 68, 91;
}

/* Handgezeichnete Unterstreichung im Hero (war rotes PNG aus dem
   Parent-Theme) — umgefaerbte Version #00B2E3 aus dem Child-Theme */
.banner-one_heading.banner-one_heading span::before {
	background-image: url(assets/images/shape.png) !important;
}

/* Footer: Logo-Marke als grosses, dezentes Wasserzeichen links
   (main-footer_pattern nutzt footer-pattern.svg aus dem Child-Theme) */
.main-footer .main-footer_pattern {
	background-repeat: no-repeat !important;
	background-position: left 10% top 45px !important;
	background-size: auto 70% !important;
	opacity: .10;
}

/* Testimonials: Kundenbild-Spalte ausblenden, Rezension mittig
   in voller Breite anzeigen */
.testimonial-one .testimonial-block_one-image_column {
	display: none;
}
.testimonial-one .testimonial-block_one-content_column {
	flex: 0 0 100%;
	max-width: 100%;
	text-align: center;
}
.testimonial-one .testimonial-block_one-contents {
	max-width: 760px;
	margin: 0 auto;
}

/* Kontakt-Sektion: Formular schmaler, Info-Spalte breiter,
   damit die beiden Kontakt-Bloecke (01/02) mehr Luft haben */
@media (min-width: 992px) {
	.contact-one .contact-one_form-column {
		flex: 0 0 41.666%;
		max-width: 41.666%;
	}
	.contact-one .contact-one_content-column {
		flex: 0 0 58.333%;
		max-width: 58.333%;
	}
}

/* Testimonial-Slider: Pfeile aus dem Text holen.
   Der Parent positioniert .testimonial-one_arrows mit left:50%; bottom:65px.
   Das war auf das zweispaltige Original-Layout gemuenzt (Bild links, Text
   rechts), dort sassen die Pfeile am unteren Rand der Textspalte. Weil wir
   weiter oben die Bildspalte ausblenden und die Rezension mittig ueber die
   volle Breite setzen, faellt dieser Ankerpunkt weg und die Pfeile landen
   genau auf dem Text.
   Unterhalb von 991px greift bereits die Parent-Regel aus responsive.css
   (@media max-width:990px), die die Pfeile unter den Slider stellt. Zu
   korrigieren ist also nur der Desktop-Bereich: Pfeile an die Container-
   raender, vertikal zentriert. Die Rezension ist auf 760px begrenzt, links
   und rechts bleibt damit ausreichend Abstand. */
@media (min-width: 991px) {
	.testimonial-one .single-item_slider > .testimonial-one_arrows {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transform: translateY(-50%);
		z-index: 5;
		/* Der Wrapper spannt sich ueber die volle Breite. Klicks nur auf den
		   Pfeilen annehmen, damit Wischen/Ziehen dazwischen weiter funktioniert. */
		pointer-events: none;
	}

	.testimonial-one .single-item_slider > .testimonial-one_arrows > div {
		pointer-events: auto;
		margin: 0;
	}
}

/* ====================================================================
   Footer — einheitliche Typografie und ausgewogenes Raster
   ==================================================================== */

/* Raster: Der Parent legt drei col-lg-3-Spalten an. 3 x 25% = 75%, das
   letzte Viertel bleibt leer - daher der grosse tote Raum rechts. Auf
   Desktop stattdessen 5/3/4 aufteilen: volle Breite genutzt, und die
   Kontaktspalte wird breit genug, dass die E-Mail-Adresse nicht mehr
   auf zwei Zeilen umbricht. Unter 992px bleibt das Stapeln unveraendert. */
@media (min-width: 992px) {
	.main-footer .widgets-section .footer-column:nth-child(1) {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}
	.main-footer .widgets-section .footer-column:nth-child(2) {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.main-footer .widgets-section .footer-column:nth-child(3) {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

/* Ueberschriften - die einzige Hervorhebung im Footer */
.main-footer .footer-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: #fff;
	margin-top: 0;
	margin-bottom: 22px;
}

/* Fliesstext: eine Groesse, ein Gewicht, eine Farbe - fuer Claim,
   Menuelinks, Adresse und E-Mail gleichermassen. Vorher lagen hier
   16px/400, 16px/500 und 24px/700 nebeneinander. */
.main-footer .footer-text,
.main-footer .widget_nav_menu ul.menu li,
.main-footer .widget_nav_menu ul.menu li a,
.main-footer .footer-contact_list li,
.main-footer .footer-contact_list li a {
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: rgba(255, 255, 255, .72);
}

/* Der Parent regelt die Helligkeit des Claims ueber opacity statt ueber
   die Farbe - sonst waere er heller als der Rest. */
.main-footer .footer-text {
	opacity: 1;
	max-width: 360px;
	margin-bottom: 0;
}

/* Gleicher Zeilenrhythmus in beiden Listen */
.main-footer .widget_nav_menu ul.menu li,
.main-footer .footer-contact_list li {
	margin-bottom: 14px;
}
.main-footer .widget_nav_menu ul.menu li:last-child,
.main-footer .footer-contact_list li:last-child {
	margin-bottom: 0;
}

/* Telefonnummer: war ueber .footer-contact_list li:nth-child(2) a auf
   24px/700 mit durchgehendem Unterstrich gesetzt und damit der einzige
   Ausreisser im Footer. Jetzt gleiche Groesse wie alles andere, nur
   etwas kraeftiger und in vollem Weiss, damit sie als primaerer
   Kontaktweg trotzdem zuerst ins Auge faellt.
   Ueber [href^="tel"] statt ueber die Position - das haelt auch, wenn
   sich die Reihenfolge der Kontaktzeilen mal aendert. */
.main-footer .footer-contact_list li a[href^="tel"] {
	font-size: 16px;
	line-height: 28px;
	font-weight: 600;
	color: #fff;
	border-bottom: 0;
}

/* Einheitliches Hover-Verhalten fuer alle Footer-Links */
.main-footer .widget_nav_menu ul.menu li a,
.main-footer .footer-contact_list li a {
	transition: color 250ms ease;
}
.main-footer .widget_nav_menu ul.menu li a:hover,
.main-footer .footer-contact_list li a:hover {
	color: var(--main-color);
}

/* Fusszeile auf dieselbe Groesse wie der uebrige Fliesstext */
.main-footer .footer-bottom .copyright {
	font-size: 16px;
	line-height: 28px;
	color: rgba(255, 255, 255, .6);
}

/* Der Parent setzt .main-footer .footer-bottom .copyright mit identischer
   Spezifitaet, und footer.css wird nach dem Child-Stylesheet geladen.
   Deshalb hier ueber den Elementtyp eine Stufe hoeher gehen. */
.main-footer .footer-bottom div.copyright {
	color: rgba(255, 255, 255, .6);
}

/* Footer-Logo unter den Claim setzen.
   Das Widget-Template (palace-core/inc/helpers/widgets.php) gibt das Logo
   vor der Beschreibung aus. Statt das Template zu ueberschreiben, wird die
   Spalte zum Flex-Container und die Reihenfolge per order gedreht - so
   bleibt das Logo ueber Design > Widgets austauschbar. */
.main-footer .widget_palace_about_company > .footer-widget {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.main-footer .widget_palace_about_company .footer-text {
	order: 1;
}
.main-footer .widget_palace_about_company .footer-logo {
	order: 2;
	margin-top: 28px;
	margin-bottom: 0;
}
.main-footer .widget_palace_about_company .footer-logo img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
}

/* Scroll-nach-oben-Kreis entfernen.
   Kommt aus palace/footer.php (.progress-wrap, fest unten rechts, mit
   Fortschrittsring und Pfeil). Wird hier nur ausgeblendet - das Markup
   steckt im Parent-Theme und waere bei einem Update sonst wieder da. */
.progress-wrap {
	display: none !important;
}

/* Footer-Bildmarke: unter dem Claim steht jetzt die einfarbige Logo-Marke
   (footer-pattern.svg) statt des Volllogos. Kompakter halten als das
   vorherige 260px-Logo und auf Mobil mitwachsen lassen. */
.main-footer .widget_palace_about_company .footer-logo img {
	max-width: 150px;
}
@media (max-width: 575px) {
	.main-footer .widget_palace_about_company .footer-logo img {
		max-width: 120px;
	}
}

/* Leere Theme-Reste im unteren Balken ausblenden: footer.php rendert einen
   Social-Link und einen Nav-Punkt auch dann, wenn in den Theme-Optionen
   nichts hinterlegt ist. Der leere Social-Link ist der 40px-Kreis mit
   Rahmen, der im Balken haengt. */
.main-footer .footer-bottom .footer_socials,
.main-footer .footer-bottom .footer-bottom_nav {
	display: none;
}

/* Copyright-Balken: Der Parent zeichnet die dunkle Box als :before mit
   festen 90px-Raendern am Viewport, der Text richtet sich aber am
   .auto-container aus - je nach Fensterbreite ragt der Text deshalb links
   aus der Box heraus. Die Box haengt jetzt direkt am Inhalt-Element:
   passt sich damit auf jeder Breite exakt an. */
.main-footer .footer-bottom::before {
	display: none;
}
.main-footer .footer-bottom .d-flex {
	background-color: var(--color-nine);
	border-radius: 12px;
	padding: 14px 28px;
}
@media (max-width: 575px) {
	.main-footer .footer-bottom .d-flex {
		padding: 12px 18px;
	}
}

/* Wasserzeichen von rechts nach links verschieben.
   Der Parent setzt .main-footer_pattern absolut auf right:20%/bottom:0.
   Gespiegelt auf die linke Seite, hinter Claim-Spalte und Copyright-Balken. */
.main-footer .main-footer_pattern {
	left: 4%;
	right: auto;
}
/* Auf Mobil ausblenden - dort liegt es sonst hinter dem gestapelten Text
   und macht den Footer unruhig. */
@media (max-width: 767px) {
	.main-footer .main-footer_pattern {
		display: none;
	}
}

/* Wasserzeichen doppelt so gross (Parent: 346x265). */
.main-footer .main-footer_pattern {
	width: 692px;
	height: 530px;
}

/* About-Sektion: gewaehlte Icons wieder sichtbar machen.
   Der Parent erzwingt in .story-block_one-icon i (style.css:305) die
   Schriftart "flaticon_palace-icons" - gedacht fuer die flaticon-Klassen
   der Theme-Demo. Der Elementor-Icon-Picker des Widgets liefert aber
   Font-Awesome-Klassen (fas fa-...). Deren Codepoints gibt es in der
   flaticon-Schrift nicht, darum erscheint statt des gewaehlten Icons nur
   das leere Ersatzkaestchen (im Editor-Panel stimmt die Vorschau, weil der
   Editor eigenes FA-CSS laedt). Fuer FA-Klassen die richtige Schrift
   wiederherstellen; flaticon-Klassen (icon-...) bleiben unberuehrt. */
.story-block_one-icon i[class*="fa-"],
.story-block_one-icon i[class*="fa-"]::before {
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900;
}
.story-block_one-icon i.fab[class*="fa-"],
.story-block_one-icon i.fab[class*="fa-"]::before {
	font-family: "Font Awesome 6 Brands" !important;
	font-weight: 400;
}

/* Header: Menue exakt mittig.
   Die Kopfzeile ist eine Flex-Reihe (justify-content-between) mit
   Logo-Box links, Menue in der Mitte und Such-Button rechts. Da Logo
   (~257px) und Button (~48px) unterschiedlich breit sind, liegt die
   "Mitte" sichtbar rechts der Seitenmitte. Gleiches Flex-Gewicht fuer
   beide Seiten schiebt das Menue in die echte Mitte; wird der Platz
   knapp, faellt es automatisch aufs alte Verhalten zurueck, statt dass
   sich etwas ueberlappt. Nur Desktop - unterm Menue-Umbruch (768px)
   bleibt alles unveraendert. */
@media (min-width: 768px) {
	.main-header .logo-box {
		flex: 1 1 0;
	}
	.main-header .outer-box {
		flex: 1 1 0;
		justify-content: flex-end;
	}
}

/* Video-Sektion ("Lerne uns persoenlich kennen"):
   1) Play-Button komplett ausblenden. Der Kreis kommt vom umgebenden
      <a class="video-one_play"> samt Ripple-Effekt, nicht vom Icon -
      deshalb blieb er stehen, wenn im Widget nur das Icon entfernt wurde.
   2) Hintergrundbild einmal ueber die volle Breite skalieren statt
      kacheln (Parent laesst es mit repeat/auto vierfach nebeneinander
      laufen). */
.video-one .video-one_play {
	display: none !important;
}
.video-one .video-one_bg {
	background-repeat: no-repeat !important;
	background-size: cover !important;
	background-position: center !important;
}

/* Leistungs-Slider (palace_service): alle Karten gleich hoch.
   Der Slider laeuft mit autoHeight. Swiper setzt dafuer align-items:
   flex-start auf den Wrapper und schreibt dessen Hoehe per JS fest -
   jede Karte ist so nur so hoch wie ihr Text, und eine Leistung mit
   einer Zeile mehr ragt heraus. Wrapper zurueck auf automatische Hoehe
   und stretch: alle Slides werden so hoch wie die hoechste Karte, ganz
   ohne JS-Messung (haelt auch nach Schriftnachladen und Resize).
   Der Details-Link rutscht nach unten, damit er in allen Karten auf
   einer Linie steht. */
.services-one .three-items_slider .swiper-wrapper {
	height: auto !important;
	align-items: stretch;
}
.services-one .three-items_slider .swiper-slide {
	height: auto;
	display: flex;
}
.services-one .three-items_slider .service-block_one {
	display: flex;
	flex: 1 1 auto;
}
.services-one .three-items_slider .service-block_one-inner {
	display: flex;
	flex-direction: column;
	/* Kein stretch: der Details-Link ist inline-block mit Unterstrich und
	   wuerde sonst ueber die volle Kartenbreite unterstrichen. */
	align-items: flex-start;
	flex: 1 1 auto;
}
.services-one .three-items_slider .service-block_one-text {
	flex-grow: 1;
}

/* Kundenstimmen-Slider (testimonial-one, Startseite + Ueber uns).
   1) Laengere Bewertungen wurden abgeschnitten. Der Slider laeuft mit
      autoHeight, das Theme laedt aber eine aeltere swiper.min.css: deren
      Regel fuer automatische Hoehe haengt an .swiper-container-autoheight,
      Swiper 8 setzt jedoch .swiper-autoheight. Uebrig bleibt
      .swiper-slide { height: 100% } - alle Slides kleben an der Hoehe der
      ersten (kuerzesten) Bewertung, der Rest verschwindet im overflow.
      Loesung wie beim Leistungs-Slider: Wrapper auf automatische Hoehe und
      stretch, alle Slides so hoch wie die laengste Bewertung. Nichts wird
      abgeschnitten, und der Inhalt darunter springt beim Autoplay nicht.
   2) Die Punkte sind im Theme rechtsbuendig und 20px nach oben geschoben -
      gedacht fuer das zweispaltige Original. Seit die Bildspalte weg ist
      (siehe oben), landen sie rechts neben dem Text. Jetzt mittig darunter.
   3) Das Anfuehrungszeichen ist ein SVG mit fest eingetragenem Theme-Rot
      (#EB2027) - in der Markenfarbe, die 15 % Deckkraft bleiben. */
.testimonial-one .single-item_slider .swiper-wrapper {
	height: auto !important;
	align-items: stretch;
}
.testimonial-one .single-item_slider .swiper-slide {
	height: auto;
	/* Kuerzere Bewertungen mittig im Kasten statt oben mit Loch darunter */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.testimonial-one .single-item_slider .single-item_slider-pagination {
	text-align: center;
	bottom: auto;
	margin-top: 30px;
}
.testimonial-one .testimonial-block_one-quote svg path {
	stroke: var(--main-color);
}

/* Objektseiten (ig-onoffice): Profilbild in der Ansprechpartner-Karte
   40 % groesser - 60px -> 84px. Das Bild kommt als 150er-Vorschaubild
   mit srcset bis 380px, bleibt also auch auf Retina scharf.
   Hier statt im Plugin-CSS, damit es ein neues Einspielen des Plugins
   ueberlebt. */
.igoo-detail-sidebar .igoo-agent .igoo-agent-head {
	gap: 18px;
}
.igoo-detail-sidebar .igoo-agent .igoo-agent-photo {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
}

/* ====================================================================
   Kundenstimmen (Startseite): Ueberschrift links, Slider rechts
   ====================================================================
   Aufbau wie die Bild/Text-Sektionen des Themes: helles, abgerundetes
   Panel (Farbe/Radius wie .services-one.style-two), darin links Oberzeile
   und Ueberschrift, rechts die Bewertungen als weisse Karten. In der
   Karte: Sterne oben, Text, darunter durch eine feine Linie abgesetzt der
   Name; das Anfuehrungszeichen oben rechts. Unter 992px stehen
   Ueberschrift und Karte untereinander. */
section.testimonial-one > .auto-container {
	background-color: var(--color-four);
	border-radius: 16px;
	padding-top: 70px;
	padding-bottom: 60px;
}
@media (min-width: 992px) {
	section.testimonial-one > .auto-container {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 70px;
		align-items: center;
		padding: 80px 60px 70px;
	}
	/* Theme erzwingt .sec-title.centered { text-align: center !important } */
	section.testimonial-one > .auto-container > .sec-title.centered {
		text-align: left !important;
		margin-bottom: 0;
	}
}
@media (max-width: 991px) {
	section.testimonial-one > .auto-container {
		margin-left: 12px;
		margin-right: 12px;
		width: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
	section.testimonial-one > .auto-container > .sec-title.centered {
		text-align: left !important;
	}
}

/* Platz fuer den Kartenschatten: der Slider schneidet mit overflow:hidden
   an seinem Rand ab. Innenabstand + gleich grosser negativer Aussen-
   abstand - die Karten bleiben buendig, der Schatten wird sichtbar.
   (Swiper rechnet den Innenabstand aus der Slide-Breite heraus.) */
section.testimonial-one .single-item_slider {
	padding: 20px 24px 0;
	margin: -20px -24px 0;
}

/* Karte fuellt die (gleich hohen) Slides komplett aus */
section.testimonial-one .single-item_slider .swiper-slide {
	justify-content: stretch;
}
section.testimonial-one .testimonial-block_one,
section.testimonial-one .testimonial-block_one-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
section.testimonial-one .testimonial-block_one-inner > .row {
	flex: 1 1 auto;
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-content_column {
	display: flex;
	flex-direction: column;
	text-align: left;
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-contents {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding: 44px 48px 36px;
	background-color: #fff;
	border-radius: 16px;
	border: 1px solid rgba(var(--color-two-rgb), 0.06);
	box-shadow: 0 12px 32px rgba(var(--color-two-rgb), 0.08);
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-rating {
	order: 1;
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-text {
	order: 2;
	flex-grow: 1;
	margin-top: 18px;
	padding-bottom: 26px;
	font-size: 17px;
	line-height: 29px;
	letter-spacing: 0;
	text-align: left;
	border-bottom: 1px solid rgba(var(--color-two-rgb), 0.10);
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-name {
	order: 3;
	margin-top: 20px;
	font-size: 18px;
	line-height: 26px;
	color: var(--color-two);
	text-align: left;
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-quote {
	top: 30px;
	right: 36px;
}
section.testimonial-one .testimonial-block_one .testimonial-block_one-quote svg {
	display: block;
	width: 72px;
	height: auto;
}
/* Punkte unter der Karte, buendig mit ihrer linken Kante */
section.testimonial-one .single-item_slider .single-item_slider-pagination {
	text-align: left;
	padding-left: 12px;
}
@media (max-width: 767px) {
	section.testimonial-one .testimonial-block_one .testimonial-block_one-contents {
		padding: 32px 26px 28px;
	}
	section.testimonial-one .testimonial-block_one .testimonial-block_one-quote {
		top: 24px;
		right: 22px;
	}
	section.testimonial-one .testimonial-block_one .testimonial-block_one-quote svg {
		width: 52px;
	}
	section.testimonial-one .testimonial-block_one .testimonial-block_one-text {
		font-size: 16px;
		line-height: 27px;
	}
}

/* Kontaktformular: Datenschutz-Checkbox.
   Das Theme stylt in .default-form nur Text-, Mail- und Telefonfelder
   und setzt Labels auf display:block mit 500er-Gewicht - fuer die
   Einwilligung von Contact Form 7 (acceptance) passt das nicht. Haken
   und Text nebeneinander, Text im Ton des uebrigen Fliesstexts, Haken
   in der Markenfarbe. */
.default-form .form-group .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0;
}
.default-form .form-group .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: rgba(var(--color-two-rgb), 0.70);
	cursor: pointer;
}
.default-form .form-group .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--main-color);
	cursor: pointer;
}
.default-form .form-group .wpcf7-acceptance a {
	color: var(--color-two);
	text-decoration: underline;
}
.default-form .form-group .wpcf7-acceptance a:hover {
	color: var(--main-color);
}

/* Seiteninhalt unter den Header setzen (Kontakt, Ueber uns, FAQ ...).
   Der Header (header-style-four) liegt ab 1024px absolut ueber der Seite
   und ist 100px hoch. Eigentlich faengt ihn das Theme-Banner .page-title
   ab - das ist aber per Customizer-CSS ausgeblendet. Folge: der erste
   Elementor-Container beginnt hinter dem Header (im Editor ragen die
   Rahmen in den Header), und die erste Theme-Sektion klebt mit ihren
   100px Innenabstand nur 14px unter dem Header. Unter 1024px sitzt der
   Header dagegen im Fluss, dort waren es 114px.
   Loesung: ab 1024px beginnt der Inhalt unter dem Header, und die erste
   Theme-Sektion bekommt 32px statt 100px Innenabstand oben - auf allen
   Breiten steht der Inhalt dann 42px unter dem Header, wie auf den
   Leistungsseiten. Die haben eigene Abstaende (ig-service-page) und
   bleiben aussen vor, ebenso Seiten ohne Elementor. */
body.elementor-page.page-template-tpl-default-elementor:not(.ig-service-page) .elementor[data-elementor-type="wp-page"] > .e-con.e-parent:first-child > .elementor-widget:first-child > .elementor-widget-container > section:first-child {
	padding-top: 32px;
}
@media (min-width: 1024px) {
	body.elementor-page.page-template-tpl-default-elementor:not(.ig-service-page) .elementor[data-elementor-type="wp-page"] {
		padding-top: 100px;
	}
}

/* Kontaktseite, Sektion "So geht's weiter" (#so-gehts-weiter).
   Aufgebaut wie "So laeuft es ab" auf den Leistungsseiten (Elementor-
   Ueberschriften und -Text). Dort setzt das Plugin ig-onoffice ueber die
   Body-Klasse ig-service-page die Schrift - auf der Kontaktseite fehlt die
   Klasse, und Elementor faellt auf seine Standardschrift Roboto zurueck.
   Deshalb hier der Theme-Look wie im Rest der Kontaktseite: Plus Jakarta
   Sans, Ueberschrift in Grossbuchstaben (wie .sec-title_heading), Oberzeile
   mit "//" (wie .sec-title_title), Fliesstext in 70 % Navy.
   Per ID, damit die Regeln sicher vor Elementors Element-CSS greifen. */
#so-gehts-weiter .elementor-heading-title,
#so-gehts-weiter .elementor-widget-text-editor {
	font-family: "Plus Jakarta Sans", sans-serif;
}
#so-gehts-weiter h2.elementor-heading-title {
	font-weight: 700;
	text-transform: uppercase;
	/* Elementor setzt hier 1.0 - bei Grossbuchstaben mit Umlauten stossen
	   die Punkte sonst an die Zeile darueber (v. a. mobil, zweizeilig). */
	line-height: 1.25;
}
#so-gehts-weiter h6.elementor-heading-title {
	font-size: 14px;
	letter-spacing: 1px;
}
/* Nur die Oberzeile der Sektion, nicht die "Schritt 0X"-Labels */
#so-gehts-weiter > .e-con-inner > .e-con:first-child > .elementor-widget-heading:first-child h6.elementor-heading-title::before {
	content: "//";
	margin-right: 10px;
}
#so-gehts-weiter h3.elementor-heading-title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}
#so-gehts-weiter .elementor-widget-text-editor {
	font-size: 16px;
	line-height: 26px;
	color: rgba(var(--color-two-rgb), 0.70);
}
/* Bild links neben den Schritten (Container mit CSS-Klasse kontakt-bild).
   Bild, Radius und Ausschnitt werden im Elementor-Bild-Widget gepflegt,
   ebenso die Hoehe auf Tablet und Handy. Auf dem Desktop stehen Bild und
   Karten nebeneinander - dort fuellt das Bild genau die Hoehe der drei
   Karten, egal wie lang deren Texte werden. Ab 1025px, weil Elementor bis
   1024px auf "untereinander" (Tablet) umschaltet. */
@media (min-width: 1025px) {
	/* flex-basis 0: das Bild bringt keine eigene Hoehe in die Zeile ein,
	   die Karten bestimmen sie - das Bild fuellt nur den Platz. */
	#so-gehts-weiter .kontakt-bild > .elementor-widget-image,
	#so-gehts-weiter .kontakt-bild > .elementor-widget-image > .elementor-widget-container {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		min-height: 360px;
	}
	#so-gehts-weiter .kontakt-bild .elementor-widget-image img {
		flex: 1 1 0;
		width: 100%;
		height: auto;
		min-height: 360px;
		object-fit: cover;
	}
}

/* Absatz-Abstand am Kartenende weg - sonst bleibt unten Leerraum */
#so-gehts-weiter .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Kontaktformular: "Thema auswaehlen" wie die uebrigen Platzhalter.
   Das Theme zeigt Platzhalter in Navy mit 70 % Deckkraft, der Select
   zeigt seinen Leer-Eintrag aber in vollem Navy und wirkt dadurch wie
   ein ausgefuelltes Feld. Solange kein Thema gewaehlt ist, gleiche Farbe;
   Browser ohne :has() behalten einfach das bisherige Aussehen. */
.default-form .form-group select:has(option[value=""]:checked) {
	color: rgba(var(--color-two-rgb), 0.70);
}

/* Kontaktliste: Icons mittig in den Kreisen.
   Das Theme zentriert per line-height 44px - bei 50px Kreishoehe plus
   Rahmen sitzt das Symbol dadurch zu hoch und je nach Icon schief.
   Flexbox zentriert unabhaengig von Schriftmetrik. */
.contact-three .contact-three_list li i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-sizing: border-box;
}
.contact-three .contact-three_list li i::before {
	display: block;
	line-height: 1;
}

/* Formular-Kasten der Kontaktseite in Markenblau, Texte weiss.
   Felder halbtransparent weiss statt hellgrau, Fokus in Markenfarbe.
   Der Theme-Button faerbt sich beim Hover dunkelblau - auf dem blauen
   Kasten waere er dann unsichtbar, deshalb hier Hover in Weiss. */
.contact-three .contact-three_form-outer {
	background-color: var(--color-two);
	border-radius: 16px;
}
.contact-three .contact-three_form-column h3 {
	color: #fff;
}
.contact-three_form-outer .default-form .form-group input[type="text"],
.contact-three_form-outer .default-form .form-group input[type="email"],
.contact-three_form-outer .default-form .form-group input[type="tel"],
.contact-three_form-outer .default-form .form-group select,
.contact-three_form-outer .default-form .form-group textarea {
	color: #fff;
	/* !important noetig: das Theme setzt fuer .contact-three .default-form
	   input/select "background: inherit !important" (style.css) */
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-three_form-outer .default-form .form-group input:is([type="text"], [type="email"], [type="tel"]):focus,
.contact-three_form-outer .default-form .form-group select:focus,
.contact-three_form-outer .default-form .form-group textarea:focus {
	border-color: var(--main-color);
	outline: none;
}
.contact-three_form-outer .default-form .form-group input::placeholder,
.contact-three_form-outer .default-form .form-group textarea::placeholder {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}
/* Leer-Eintrag "Thema auswaehlen" wie ein Platzhalter; die aufgeklappte
   Liste bleibt dunkel auf weiss, sonst waere sie weiss auf weiss. */
.contact-three_form-outer .default-form .form-group select:has(option[value=""]:checked) {
	color: rgba(255, 255, 255, 0.75);
}
.contact-three_form-outer .default-form .form-group select option {
	color: var(--color-two);
	background-color: #fff;
}
.contact-three_form-outer .default-form .form-group .wpcf7-acceptance label {
	color: rgba(255, 255, 255, 0.80);
}
.contact-three_form-outer .default-form .form-group .wpcf7-acceptance a,
.contact-three_form-outer .default-form .form-group .wpcf7-acceptance a:hover {
	color: #fff;
}
/* Fehlerhinweise und Rueckmeldungen von Contact Form 7 lesbar auf Blau */
.contact-three_form-outer .wpcf7 .wpcf7-not-valid-tip {
	color: #ffc2c2;
}
.contact-three_form-outer .wpcf7 form .wpcf7-response-output {
	color: #fff;
}
.contact-three_form-outer .btn-style-one:before {
	background-color: #fff;
}
.contact-three_form-outer .btn-style-one:hover .btn-wrap .text-two {
	color: var(--color-two);
}

/* Kontaktseite mobil (unter 768px) */
@media (max-width: 767px) {
	/* "KONTAKTFORMULAR" ist in 32px breiter als der graue Formularkasten
	   und lief rechts hinaus - gleiche Groesse wie die uebrigen
	   Ueberschriften mobil. */
	.contact-three .contact-three_form-outer h3 {
		/* waechst mit: 20px auf 320er-Handys, max. 24px - passt so auch
		   auf kleinen Geraeten in eine Zeile */
		font-size: clamp(20px, 6vw, 24px);
		line-height: 1.3;
		overflow-wrap: anywhere;
	}
	/* Abstand Formular -> "So geht's weiter": 100px sind mobil zu viel */
	section.contact-three {
		padding-bottom: 56px;
	}
	/* Karte: 500px Hoehe fuellt mobil mehr als den halben Bildschirm */
	body.elementor-page .elementor .elementor-element.elementor-widget-google_maps iframe {
		height: 320px;
	}
}

/* Erfahrungs-Badge ("24+ Jahre Erfahrung") im About-Us-Widget ruhig stellen.
   Das Parent-Theme laesst ihn per animation: icon-bounce endlos huepfen. */
div.story-one_experiance {
	-webkit-animation: none;
	animation: none;
}

/* ====================================================================
   Objektseiten (ig-onoffice): Abstaende + Kennzahl-Kacheln mobil
   ====================================================================
   Theme-Klasse .sidebar-page-container bringt 100px oben/70px unten mit
   und laedt nach dem Plugin-CSS -> hier mit doppelter Klasse. */

/* Oben 42px unter dem Header wie auf allen anderen Seiten (vorher 100px). */
.sidebar-page-container.igoo-detail {
	padding-top: 42px;
}

/* Kacheln (Zimmer/Wohnflaeche/Grundstueck): bei genau 4 Kacheln ab
   Tablet 4 in einer Reihe statt 3 + 1. */
@media (min-width: 768px) {
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(4),
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(4) ~ .property-block_two {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* Tablet/Handy: Formular ist das Letzte vor dem Footer -> 40px statt 100px. */
@media (max-width: 991px) {
	.sidebar-page-container.igoo-detail {
		padding-bottom: 40px;
	}
	.sidebar-page-container.igoo-detail .sidebar-side {
		margin-bottom: 0;
	}
	/* Leere Statuszeile unter "Anfrage senden" traegt keinen Abstand. */
	.igoo-detail .igoo-inquiry .igoo-form-feedback:empty {
		margin: 0;
	}
}

/* Handy: Kacheln kompakt nebeneinander statt einzeln untereinander.
   3 Kacheln -> 3 nebeneinander, 4 -> 2 x 2, 2 -> halbe Breite, 1 -> voll. */
@media (max-width: 767px) {
	.igoo-detail .igoo-tiles {
		margin-left: -5px;
		margin-right: -5px;
	}
	.igoo-detail .igoo-tiles > .property-block_two {
		display: flex;
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
		padding-left: 5px;
		padding-right: 5px;
	}
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(4),
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(4) ~ .property-block_two,
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(2),
	.igoo-detail .igoo-tiles > .property-block_two:first-child:nth-last-child(2) ~ .property-block_two {
		flex-basis: 50%;
		max-width: 50%;
	}
	.igoo-detail .igoo-tiles > .property-block_two:only-child {
		flex-basis: 100%;
		max-width: 100%;
	}
	.igoo-detail .igoo-tiles .property-block_two-inner {
		flex: 1 1 auto;
		min-width: 0;
		padding: 16px 8px 14px;
		text-align: center;
	}
	.igoo-detail .igoo-tiles .property-block_two-icon {
		width: 44px;
		height: 44px;
		margin: 0 auto;
		font-size: 20px;
		line-height: 44px;
	}
	.igoo-detail .igoo-tiles .property-block_two-title {
		margin: 10px 0 0;
		font-size: 13px;
		line-height: 1.3;
		hyphens: auto;
		overflow-wrap: break-word;
	}
	.igoo-detail .igoo-tiles .property-block_two-text {
		margin-top: 4px;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		overflow-wrap: break-word;
	}
}

/* Sehr schmale Handys (unter 360px): etwas weniger Innenabstand. */
@media (max-width: 359px) {
	.igoo-detail .igoo-tiles .property-block_two-inner {
		padding: 14px 4px 12px;
	}
	.igoo-detail .igoo-tiles .property-block_two-title {
		font-size: 12px;
	}
}

/* =========================================================
   Über uns (Seite 656): Sektionsabstände Handy/Tablet
   Die Theme-Sektionen behalten auch gestapelt ihre Desktop-Abstände
   (100px oben, 70–100px unten + 30px unter der letzten Spalte) –
   zwischen zwei Blöcken entstehen so ~220px Leerraum.
   Hier: überall 64px (44px Sektion + 2 × 10px Elementor-Container),
   wie auf den Leistungsseiten. Desktop (ab 992px) unverändert.
   ========================================================= */
@media (max-width: 991px) {
	body.page-id-656 section.story-three,
	body.page-id-656 section.story-one {
		padding-bottom: 0;
	}
	body.page-id-656 section.story-three .story-three_image-column,
	body.page-id-656 section.story-one .story-one_image-column {
		margin-bottom: 0;
	}
	body.page-id-656 section.story-one {
		padding-top: 44px;
	}
	body.page-id-656 section.services-one {
		padding-top: 44px;
		padding-bottom: 44px;
	}
	body.page-id-656 section.clients-one {
		padding-top: 44px;
	}
	/* Weiße Seitenmasken des Sliders ragen 100px nach unten –
	   bei 64px Abstand würden sie die Bildkanten darunter überdecken */
	body.page-id-656 section.services-one .three-items_slider::before,
	body.page-id-656 section.services-one .three-items_slider::after {
		bottom: -60px;
	}
}

/* ====================================================================
   Startseite: Unterschrift "Michael Häfner" am Porträt (About-Us-Widget)
   ====================================================================
   Nur body.home (Über uns nutzt dasselbe Widget, bleibt ohne).
   Ab 480px weiß unten links aufs Foto, mit dezentem Verlauf für die
   Lesbarkeit; fadet mit dem Foto (wow fadeInLeft) ein.
   Unter 480px sitzt der "24+"-Badge unten rechts im Bild (Theme) ->
   dort kommt die Unterschrift in Petrol direkt unter das Foto.
   Höhe per padding-bottom (Seitenverhältnis 881:156), läuft überall. */
body.home .story-one_image::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 38%;
	background: linear-gradient(to top, rgba(0, 34, 46, 0.5) 0%, rgba(0, 34, 46, 0.18) 55%, rgba(0, 34, 46, 0) 100%);
	pointer-events: none;
}
body.home .story-one_image::after {
	content: "";
	position: absolute;
	left: 7%;
	bottom: 5.5%;
	width: 44%;
	height: 0;
	padding-bottom: 7.79%;
	background: url(assets/images/unterschrift-michael-haefner-weiss.png) no-repeat left bottom / contain;
	-webkit-filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
	filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35));
	pointer-events: none;
}
@media (max-width: 479px) {
	body.home .story-one_image::before,
	body.home .story-one_image::after {
		content: none;
	}
	body.home .story-one_image-column::after {
		content: "";
		display: block;
		width: 56%;
		height: 0;
		padding-bottom: 9.92%;
		margin: 16px 0 0 4px;
		background: url(assets/images/unterschrift-michael-haefner-petrol.png) no-repeat left top / contain;
		pointer-events: none;
	}
}

/* Startseite: Abstand unter dem About-Block (Bild + Unterschrift).
   Bis 991px (gestapelt): Unterschrift -> grauer Immobilien-Block 40px
   (20px Sektion + 2 × 10px Elementor-Container) statt 120px, im grauen
   Block oben 56px bis "Unsere Region" statt 100px. Desktop unverändert. */
@media (max-width: 991px) {
	body.home section.story-one {
		padding-bottom: 20px;
	}
	body.home section.story-one .story-one_image-column {
		margin-bottom: 0;
	}
	body.home section.property-one.igoo-rail-section {
		padding-top: 56px;
	}
}