/* 
Theme Name: bachtelen.ch - Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: bachtelen.ch is a child theme of Hello Elementor, created by Elementor team
Author: webgearing AG
Author URI: https://www.webgearing.com
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* -- Utilities -- */

.offset {
	width:960px;
	margin:0 auto;
}

/* --- Header Sticky --- */

body .header-bar {
	width:100vw !important;
	background:var(--e-global-color-83652b3);
	padding-top:15px;
	padding-bottom:15px;
	transition:all ease .5s;
}

body .header-bar .logo {
	height:autox;
	width:200px;
	margin:0;
	transition:all ease .5s;
}

body .header-bar .logo img {
	opacity:1;
	height:auto;
	width:200px;
	transition:all ease .5s;
}

/* --- Typography --- */

.text_15, .text_15 p {
	font-weight:500 !important;
	font-size:15px;
	line-height:200%;
}

.text_15 p a {
  width: fit-content; /* oder die width-Zeile ganz weglassen */
  display: inline-block;
  text-decoration: none !important;
}

.text_15 p a:after {
	content:"";
	background:var(--e-global-color-primary);
	height:1px;
	width:auto;
	display:block;
	transition:all ease .5s;
}

.text_15 p a:hover:after {
	transition:all ease .5s;
	background:var(--e-global-color-secondary);
}

.text_20 p, .text_20 h2 {
	font-weight:500 !important;
	font-size:20px;
	line-height:115%;
}

.text_25, .text_25 p {
	font-weight:500 !important;
	font-size:25px;
	line-height:115%;
}

.text_30, .text_30 p, .text_30 h3 {
	font-weight:500;
	font-size:30px;
	line-height:115%;
}

.text_40-100 h2 {
	font-weight:600;
	font-size:40px;
	line-height:100%;
}

.text_50-100 p, .text_50-100 h2 {
	font-weight:600;
	font-size:50px;
	line-height:100%;
}

.site-title h1 {
	font-weight: 500;
	font-size: 90px;
	line-height: 100%;
}


.site-title.text_60 h1 {
	font-weight: 500;
	font-size: 60px;
	line-height: 100%;
}


.site-title h2 {
	font-weight: 500;
	font-size: 90px;
	line-height: 100%;
}


.sub_page .site-title h2 {
	font-weight: 500;
	font-size: 60px;
	line-height: 100%;
}

p a {
	color:var(--e-global-color-primary);
	text-decoration:underline !important;
	transition:all ease .3s;
}

p a:hover {
	color:var(--e-global-color-secondary);
	transition:all ease .3s;
}

/* --- BG --- */

.bg_weiss {
	background-color:var(--e-global-color-83652b3);
}

.bg_12 {
	background-color:var(--e-global-color-b511455);
}

.bg_20 {
	background-color:var(--e-global-color-2b17b10);
}

.bg_40 {
	background-color:var(--e-global-color-d581a6b);
}

.bg_hellblau {
	background-color:var(--e-global-color-secondary);
}

.bg_gelb {
	background-color:var(--e-global-color-accent);
}

.bg_blau {
	background-color:var(--e-global-color-primary);
}

/* Border Radius */

.br_20 {
	border-radius:20px !important;
}

.br_20 img {
	border-radius:20px !important;
}

/* Padding */


.p_30 {
	padding:30px !important;
}

/* --- Header --- */


/* Navigation 

.current-page-ancestor.current-menu-ancestor > a {
	color:var(--e-global-color-primary) !important;
}

.sub-menu li a:hover, .sub-menu li.current-menu-item a {
	border-left:2px solid var(--e-global-color-primary) !important;
}
*/


/* Navigation 

.current-page-ancestor.current-menu-ancestor > a {
	color:var(--e-global-color-primary) !important;
}

.elementor-nav-menu--main .sub-menu {
	box-shadow:3px 3px 10px rgba(0,0,0,0.16);
}

.elementor-nav-menu--main .sub-menu li a {
	font-weight:500 !important;
	font-size:14px !important;
}

.elementor-nav-menu--main .sub-menu li a:hover, .elementor-nav-menu--main .sub-menu li.current-menu-item a {
	border-left:2px solid var(--e-global-color-secondary) !important;
	background:var(--e-global-color-accent);
	color:var(--e-global-color-primary);
}

.elementor-nav-menu--main .sub-menu {
	min-width:250px !important;
}
*/


/* btn_bachtelen */

.btn_bachtelen .elementor-button {
	padding:15px 20px !important;
	position:relative;
	transition:all ease .3s;
	color:var(--e-global-color-primary);
	border-radius:44px;
}

.btn_bachtelen .elementor-button-text {
	line-height:20px !important;
	font-size:15px !important;
	color:var(--e-global-color-primary) !important;
	font-weight:500 !important;
	text-align:left;
	transition:all ease .3s;
}

.btn_bachtelen:hover .elementor-button {
	position:relative;
	background-color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

/* btn_gelb */

.btn_bachtelen.btn_gelb .elementor-button {
	background-color:var(--e-global-color-accent);
	color:var(--e-global-color-primary);
	transition:all ease .3s;
}

.btn_bachtelen.btn_gelb .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_gelb:hover .elementor-button {
	background-color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_gelb:hover .elementor-button-text {
	color:var(--e-global-color-b511455) !important;
	transition:all ease .3s;
}

/* btn_40 */

.btn_bachtelen.btn_40 .elementor-button {
	background-color:var(--e-global-color-d581a6b);
	color:var(--e-global-color-primary);
	transition:all ease .3s;
}

.btn_bachtelen.btn_40 .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_40:hover .elementor-button {
	background-color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_40:hover .elementor-button-text {
	color:var(--e-global-color-b511455) !important;
	transition:all ease .3s;
}

/* btn_weiss */

.btn_bachtelen.btn_weiss .elementor-button {
	background-color:var(--e-global-color-83652b3);
	color:var(--e-global-color-primary);
	transition:all ease .3s;
}

.btn_bachtelen.btn_weiss .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_weiss:hover .elementor-button {
	background-color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_weiss.btn_bg-blau:hover .elementor-button {
	background-color:var(--e-global-color-secondary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_weiss:hover .elementor-button-text {
	color:var(--e-global-color-83652b3) !important;
	transition:all ease .3s;
}

/* btn_blau */

.btn_bachtelen.btn_blau .elementor-button {
	background-color:var(--e-global-color-primary);
	color:var(--e-global-color-83652b3) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_blau .elementor-button-text {
	color:var(--e-global-color-83652b3) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_blau:hover .elementor-button {
	background-color:var(--e-global-color-secondary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_blau:hover .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

/* btn_hellblau */

.btn_bachtelen.btn_hellblau .elementor-button {
	background-color:var(--e-global-color-secondary);
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_hellblau .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_hellblau:hover .elementor-button {
	background-color:var(--e-global-color-83652b3) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_hellblau:hover .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
}

/* btn_text */

.btn_bachtelen.btn_text .elementor-button {
	background-color:var(--e-global-color-652d692);
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
	padding:0px !important;
}

.btn_bachtelen.btn_text .elementor-button-text {
	color:var(--e-global-color-primary) !important;
	transition:all ease .3s;
	font-size:20px !important;
}

.btn_bachtelen.btn_text:hover .elementor-button {
	background-color:var(--e-global-color-652d692) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_text:hover .elementor-button-text {
	color:var(--e-global-color-secondary) !important;
	transition:all ease .3s;
}

.btn_bachtelen.btn_text .elementor-button-text:after {
	content:"";
	background:var(--e-global-color-primary);
	height:1px;
	width:auto;
	display:block;
	transition:all ease .5s;
}

.btn_bachtelen.btn_text .elementor-button-text:hover:after {
	transition:all ease .5s;
	background:var(--e-global-color-secondary);
}

/* btn_fullwidth */

/* Fullwidth Button mit Pfeil rechts */
.elementor-widget-button.btn_fullwidth {
  width: 100%;
}

.elementor-widget-button.btn_fullwidth a.elementor-button {
  display: block;
  width: 100%;
  background-color: #ffffff;
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
  border-radius: 20px;
  padding: 15px 30px;
  font-size: 40px;
  font-weight: 500;
  border: none;
  text-align: left;
  transition: background-color 0.2s ease;
}

/* Content-Wrapper als Flex, Icon rechts via row-reverse */
.elementor-widget-button.btn_fullwidth a.elementor-button .elementor-button-content-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}

/* Icon-Kreis */
.elementor-widget-button.btn_fullwidth a.elementor-button .elementor-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  min-width: 55px;
  background-color: var(--e-global-color-d581a6b);
  border-radius: 50%;
}

/* Pfeil SVG */
.elementor-widget-button.btn_fullwidth a.elementor-button .elementor-button-icon svg {
  width: 25px;
  height: 25px;
  fill: var(--e-global-color-primary) !important;
}

/* Hover */
.elementor-widget-button.btn_fullwidth a.elementor-button:hover {
  background-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-83652b3) !important;
}

/* Custom Carousel Navigation */

/* Icon-Grösse direkt im Elementor Widget setzen */
.custom-prev .elementor-icon,
.custom-next .elementor-icon {
  width: 55px !important;
  height: 55px !important;
  font-size: 25px !important;  /* steuert Icon-Grösse */
  background-color: #dce3f5;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #1a2150;
  transition: background-color 0.2s ease;
}

.custom-prev .elementor-icon:hover,
.custom-next .elementor-icon:hover {
  background-color: #b8c9f0;
}

.custom-prev {
  margin-right: 8px;
}

.arrow-gelb .custom-prev .elementor-icon,
.arrow-gelb .custom-next .elementor-icon {
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-primary);
}

.arrow-gelb .custom-prev .elementor-icon:hover,
.arrow-gelb .custom-next .elementor-icon:hover {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-83652b3);
}

.arrow-gelb .custom-prev .elementor-icon:hover svg,
.arrow-gelb .custom-next .elementor-icon:hover svg{
  fill: var(--e-global-color-83652b3) !important;
}

/* Galerie Carousel */

.galerie .swiper-slide {
  width: auto !important;
  height: 400px !important;
}

.galerie .swiper-slide-inner {
  height: 100%;
  width: auto;
}

.galerie .swiper-slide img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  border-radius:20px !important;
}


/* Tablepress */

.tablepress {
	--head-active-bg-color:var(--e-global-color-primary) !important;
	--head-bg-color:var(--e-global-color-f17bbd4) !important;
	--text-color: var(--e-global-color-text);
	--head-text-color: #fff;
	--odd-text-color: var(--text-color);
	--odd-bg-color: #fff;
	--even-text-color: var(--text-color);
	--even-bg-color: #f9f9f9;
	--hover-text-color: var(--text-color);
	--hover-bg-color: #f3f3f3;
	--border-color: #ddd;
	--padding: 0.5rem;
} 

.tablepress > :where(thead, tfoot) > tr > * {
	font-weight: 500;
}

/* Typography */

.elementor-widget-text-editor ul {
	margin-bottom:15px;
}

/* Listen links bündig, aber ohne Rieseneinzug */
.elementor-widget-text-editor ul {
    margin-left: 0;
    padding-left: 20px; /* etwa 15px Abstand von Bullet zu Text, gut lesbar */
}

/* Listeneinträge normal blockig */
.elementor-widget-text-editor ul li {
    margin: 0 0 0.3em 0;
    font-weight:500 !important;
}

/* Bullet-Farbe in Primary-Blau setzen */
.elementor-widget-text-editor ul li::marker {
    color: var(--e-global-color-primary);
    font-size: 1em; /* gleiche Grösse wie Text */
}

@media (max-width: 767px) {
	ul li {
		hyphens:auto;
		-webkit-hyphens:auto;
		-moz-hyphens:auto;
	}
}


/* Akkordeon */

.akkordeon details {
	border-radius:30px;
	box-shadow:3px 3px 10px 0px rgba(0, 0, 0, 0.1);
}

.akkordeon summary[aria-expanded="true"] {
	border-radius:30px 30px 0px 0px;
	transition:all ease .0s;
}

.akkordeon summary[aria-expanded="false"] {
	border-radius:30px 30px 30px 30px;
	transition:all ease 1.2s;
}

/* Teaser Box */

.teaser {
	background:var(--e-global-color-83652b3);
	border-radius:20px;
	padding:0px 0px 30px 0px;
	margin:0px;
}

.teaser-gelb {
	background-color:var(--e-global-color-accent);
	border-radius:20px;
	padding:0px 0px 30px 0px;
	margin:0px;
}

.teaser-gelb img, .teaser-blau img {
	border-radius:20px 20px 0px 0px;
}

.teaser-blau {
	background-color:var(--e-global-color-d581a6b);
	border-radius:20px;
	padding:0px 0px 30px 0px;
	margin:0px;
}


.teaser .teaser_text {
	padding:30px !important;
}

.teaser .btn_bachtelen {
	margin:0px 30px;
}

.teaser img {
	width:407px;
	height:305px;
}

/* Teaser Aktuell */

.datum, .datum p, .kategorie, .kategorie p {
	font-size:12px !important;
	text-transform: uppercase;
	font-weight: 500 !important;
}

.teaser_aktuell img {
	border-radius:20px 20px 0px 0px;
}


/* --- Footer --- */

.footer {
	background:var(--e-global-color-primary) !important;
}

.footer p, .footer p a {
	color:var(--e-global-color-2b17b10) !important;
	font-size:15px !important;
	font-weight:500 !important;
}

.footer h3 {
	color:var(--e-global-color-2b17b10) !important;
	font-size:15px;
	font-weight:500 !important;
}


/* btn_bachtelen */

.footer .btn_bachtelen .elementor-button-icon {
	background-color:var(--e-global-color-6bd75dc) !important;
}

.footer .btn_bachtelen .elementor-button-text {
	color:var(--e-global-color-6bd75dc) !important;
}

.footer .btn_bachtelen:hover .elementor-button {
	padding:0px !important;
	position:relative;
	background-color:transparent !important;
	left:10px;
	transition:all ease .3s;
}

.footer .elementor-button {
	fill:var(--e-global-color-text) !important;
}

.cookie-notice-container span, .cn-buttons-container a {
	font-family: var( --e-global-typography-text-font-family ), Sans-serif !important;
}

#cookie-notice .cn-button:not(.cn-button-custom) {
	border-radius:30px;
}

#cn-notice-buttons button {
	background:var(--e-global-color-accent) !important;
}

#cn-notice-buttons button:hover {
	background:var(--e-global-color-primary) !important;
}

/* Image Text Box */

.image-text-box {
	border-radius:20px;
	background:var(--e-global-color-83652b3);
}

.image-text-box h2 {
	font-weight:600;
	font-size:50px;
	line-height:100%;
}

.image-text-box p a {
	color:var(--e-global-color-primary);
	text-decoration:underline;
	transition:all ease .3s;
}

.image-text-box p a:hover {
	color:var(--e-global-color-secondary);
	transition:all ease .3s;
}

.image-text-box.bild-links .bild {
	border-radius:20px 0px 0px 20px;
}

.image-text-box.bild-rechts .bild {
	border-radius:0px 20px 20px 0px;
}

@media (min-width: 1000px) {
	.image-text-box {
		min-height: 540px;
	}

	.image-text-box img {
		height: 540px !important;
		width: auto !important;
	}

	.image-text-box .image-long-text img {
		height: 676px !important;
		width: auto !important;
	}
}

/* ==========================================================================
   Bewerbungsformular – Custom CSS für das Elementor Form-Widget
   ==========================================================================

   VERWENDUNG:
   Das Form-Widget trägt bereits die CSS-Klasse "bewerbungsformular"
   (Advanced-Tab → CSS Classes). Diese Version ersetzt die vorherige 1:1 an
   derselben Stelle (aktuell: /wp-content/themes/bachtelen/style.css).

   WAS SICH GEÄNDERT HAT (nach Kontrolle der Live-Seite):
   1. Layout-Bug behoben: die alte Regel "gap: 16px;" setzt implizit auch
      "column-gap: 16px". Zusammen mit der 50%-Breite der Felder ergab das
      pro Zeile mehr als 100% Breite (50% + 50% + 16px), wodurch Vorname/
      Nachname, PLZ/Ort und E-Mail/Telefon umgebrochen sind und
      untereinander statt nebeneinander standen. Jetzt wird nur noch
      "row-gap" gesetzt und "column-gap" explizit auf 0 erzwungen, die
      horizontale Spaltenlücke übernimmt wie gehabt Elementors eigenes
      Spalten-Padding.
   2. Einige Regeln (Submit-Button-Farbe, Innenabstand der Upload-Boxen)
      wurden von seiteneigenem, automatisch generiertem Elementor-CSS
      überschrieben (z. B. ".elementor-widget-form .elementor-button
      [type=\"submit\"]" bzw. eine auf die Element-ID gestützte Regel mit
      höherer Spezifität als unsere zwei Klassen). Diese Eigenschaften
      haben jetzt !important, damit sie zuverlässig gewinnen.
   3. Farben nutzen jetzt die echten globalen Kit-Farben deiner Website
      (--e-global-color-primary / --e-global-color-secondary), mit dem
      bisherigen Hex-Wert als Fallback, falls die Variable einmal nicht
      verfügbar ist.
   ========================================================================== */

/* Abstand zwischen den Feldern: nur vertikal, damit die 50%-Spalten
   (Vorname/Nachname, PLZ/Ort, E-Mail/Telefon) weiterhin nebeneinander
   passen. Der horizontale Abstand kommt aus Elementors eigenem
   Spalten-Padding. */
.bewerbungsformular .elementor-form-fields-wrapper {
  row-gap: 16px;
  column-gap: 0 !important;
}

.bewerbungsformular .elementor-field-group {
  margin-bottom: 0;
}

/* Feld-Labels ausblenden – der Feldname erscheint stattdessen als
   Platzhaltertext im Feld (wie im Mockup) */
.bewerbungsformular .elementor-field-group > label:not(.elementor-field-type-upload label) {
  display: none;
}

/* Text-, E-Mail-, Telefon- und Zahlenfelder: weisse Pille, dunkelblauer Text */
.bewerbungsformular .elementor-field-textual {
  background-color: #ffffff !important;
  border: none;
  border-radius: 999px !important;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--e-global-color-primary, #14326E);
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.bewerbungsformular .elementor-field-textual::placeholder {
  color: var(--e-global-color-primary, #14326E);
  opacity: 0.65;
}

.bewerbungsformular .elementor-field-textual:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--e-global-color-primary, #14326E);
}

/* Datei-Upload-Felder als abgerundete, mittelblaue Boxen (wie im Mockup) */
.bewerbungsformular .elementor-field-type-upload {
  background-color: var(--e-global-color-secondary, #8CB9FA) !important;
  border-radius: 24px !important;
  padding: 20px 24px !important;
}

.bewerbungsformular .elementor-field-type-upload .elementor-field-group {
  background: transparent;
}

.bewerbungsformular .elementor-field-type-upload label {
  display: block;
  color: var(--e-global-color-primary, #14326E);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.bewerbungsformular .elementor-field-type-upload input[type="file"] {
  width: 100%;
  color: var(--e-global-color-primary, #14326E);
  font-size: 13px;
}

/* Nativen "Datei auswählen"-Button umstylen (Chrome, Edge, Safari, aktuelles Firefox) */
.bewerbungsformular .elementor-field-type-upload input[type="file"]::file-selector-button {
  background-color: #ffffff;
  color: var(--e-global-color-primary, #14326E);
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  margin-right: 12px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bewerbungsformular .elementor-field-type-upload input[type="file"]::file-selector-button:hover {
  background-color: #eef3fc;
}

/* Pflichtfeld-Sternchen dezenter darstellen */
.bewerbungsformular .elementor-field-required {
  color: var(--e-global-color-primary, #14326E);
}

/* Submit-Button: dunkelblau, volle Breite, stark abgerundet.
   !important nötig, da die Seite bereits eine eigene, spezifischere Regel
   ".elementor-widget-form .elementor-button[type=\"submit\"]" mit der
   globalen Akzentfarbe (Gelb) mitbringt. */
.bewerbungsformular .elementor-button {
  background-color: var(--e-global-color-primary, #14326E) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 18px 32px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  border: none;
  transition: background-color 0.15s ease;
}

.bewerbungsformular .elementor-button:hover,
.bewerbungsformular .elementor-button:focus {
  background-color: #0f1836 !important;
  color: #ffffff !important;
}

.bewerbungsformular .elementor-button .elementor-button-text {
  color: inherit;
}

/* Fehlermeldungen dezent in Rot unter dem jeweiligen Feld */
.bewerbungsformular .elementor-message.elementor-message-danger {
  color: #b3261e;
  font-size: 13px;
  margin-top: 4px;
}

/* Mobile: alle Felder auf volle Breite stapeln, unabhängig von der im
   Editor eingestellten Feldbreite (50 %, 100 % usw.) */
@media (max-width: 767px) {
  .bewerbungsformular .elementor-field-group {
    width: 100% !important;
  }
}

.bewerbungsformular input[type="file"] {
	background-color:var(--e-global-color-652d692) !important;
}

/* Taxonomy Filter */

.e-filter-item {
	padding:15px 20px !important;
	border-radius:44px !important;
}