/* 
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.1
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;
}

.header-bar.elementor-sticky--active {
    width: 100% !important;
}

/* --- 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;
}

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

.text_20 ul li 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;
}

/* Tabelle "Neue Namen für unsere Schulen" – Zellen umrandet, Spalten 2+3 gelb */
.tabelle-schulnamen {
	border-collapse: separate;
	border-spacing: 3px;
}
.tabelle-schulnamen thead th {
	color: var(--e-global-color-text);
	background: transparent;
	border: none;
	font-weight: 700;
}
/* Hello-Elementor reset.css setzt eine Linie über die erste Kopfzeile (table thead:first-child tr:first-child th) */
.tabelle-schulnamen thead:first-child tr:first-child th {
	border-block-start: none;
}
.tabelle-schulnamen tbody td {
	border: 1px solid #000;
}
/* Spaltenklassen + :hover nötig, um Zebra- und Hover-Farben von TablePress zu überstimmen */
.tabelle-schulnamen tbody td.column-1,
.tabelle-schulnamen tbody tr:hover > td.column-1 {
	background-color: #fff;
}
.tabelle-schulnamen tbody td.column-2,
.tabelle-schulnamen tbody td.column-3,
.tabelle-schulnamen tbody tr:hover > td.column-2,
.tabelle-schulnamen tbody tr:hover > td.column-3 {
	background-color: #fff2cc;
}
.tabelle-schulnamen tbody td.column-2 {
	font-weight: 700;
}

/* Beitrag-Template: "Weitere Beiträge" – Karte nie breiter als halbe Spalte, Bild flacher */
@media (min-width: 768px) {
	.weitere-beitraege .swiper-slide {
		max-width: calc(50% - 8px);
	}
}
.weitere-beitraege .elementor-widget-image img {
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
}

/* 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 0px 0px;
	margin:0px;
}

.teaser_text {
  flex-grow: 1;
  gap: 30px;
}

/* In Loop-Rastern (z.B. Standorte) überschreibt Elementor flex-grow; ohne Wachsen
   stehen die Buttons je nach Textlänge unterschiedlich hoch. */
.e-loop-item .teaser_text {
	flex-grow: 1;
}


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

/* margin-top auto: Button bleibt unten, auch wenn der Titel in der Nachbar-Kachel länger ist */
.teaser .btn_bachtelen {
	margin:auto 30px 0px 30px;
}

/* Stellen-Kacheln (Arbeiten bei uns) sind keine .teaser: Button ebenfalls unten bündig */
.e-loop-item .job-details ~ .btn_bachtelen {
	margin-top: auto;
}

.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;
}

/* WG Breadcrumbs */

.wg-breadcrumbs a {
	font-weight: 500 !important;
    font-size: 15px;
    line-height: 200%;
    color:var(--e-global-color-primary);
}

.wg-breadcrumbs .wg-breadcrumb-current {
	font-weight: 700 !important;
    font-size: 15px;
    line-height: 200%;
    color:var(--e-global-color-primary);
}




/* ==========================================================================
   RESPONSIVE: Seitenabstand, Header, Footer, Typografie
   Tablet: 768 bis 1024 px (Seitenabstand 30 px)
   Mobile: bis 767 px (Seitenabstand 15 px)

   Ausnahmen (in Elementor unter Erweitert > CSS-Klassen setzen):
   is-fullbleed  = äusserer Container ohne Seitenabstand
   is-bleed      = einzelnes Element in einem Container geht bis an den Rand
   ========================================================================== */

:root {
	--bt-gutter: 30px;
}

@media (max-width: 767px) {
	:root {
		--bt-gutter: 15px;
	}
}


/* --------------------------------------------------------------------------
   Tablet und Mobile (bis 1024 px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* Seitenabstand für alle äusseren Container (inkl. Header und Footer).
	   Loop-Items (Teaser, Standort-Karten usw.) sind ausgenommen, sonst
	   entsteht innerhalb der Karten ein weisser Rand um Bilder. */
	:is(.e-con.e-parent, [data-elementor-type]:not([data-elementor-type="loop-item"]) > .e-con):not(.is-fullbleed):not([data-elementor-type="loop-item"] *) {
		--padding-left: var(--bt-gutter) !important;
		--padding-right: var(--bt-gutter) !important;
		padding-left: var(--bt-gutter) !important;
		padding-right: var(--bt-gutter) !important;
	}

	/* Einzelnes Element innerhalb eines Containers randlos ziehen */
	.is-bleed {
		margin-left: calc(-1 * var(--bt-gutter)) !important;
		margin-right: calc(-1 * var(--bt-gutter)) !important;
		width: calc(100% + 2 * var(--bt-gutter)) !important;
		--width: calc(100% + 2 * var(--bt-gutter)) !important;
		max-width: none !important;
	}

	/* Lange Wörter in Titeln und Buttons umbrechen statt abschneiden.
	   Getrennt wird erst ab 12 Zeichen, damit kurze Wörter ganz bleiben. */
	h1, h2, h3, h4,
	.elementor-heading-title,
	.elementor-button-text {
		hyphens: auto;
		-webkit-hyphens: auto;
		overflow-wrap: break-word;
		hyphenate-limit-chars: 12 5 4;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 4;
	}

	/* Header: Logo links, Hamburger rechts, kompakte Höhe */
	.header-bar,
	.header-bar > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.header-bar .elementor-widget-nav-menu {
		width: auto !important;
		margin-left: auto;
		gap: 0 !important;
		position: static !important;
	}

	.header-bar .elementor-menu-toggle {
		margin: 0 0 0 auto !important;
	}

	/* Aufgeklapptes Menü über die ganze Breite unter dem Header */
	.header-bar .elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100%;
		left: 0;
		right: 0;
		width: 100% !important;
		margin-top: 0 !important;
		z-index: 100;
	}

	/* Fixe Breiten entschärfen */
	.offset {
		width: 100%;
		max-width: 960px;
	}

	.teaser img {
		width: 100%;
		height: auto;
		aspect-ratio: 407 / 305;
		object-fit: cover;
	}
}


/* --------------------------------------------------------------------------
   Nur Tablet (768 bis 1024 px)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {

	.site-title h1,
	.site-title h2 {
		font-size: 60px !important;
	}

	.site-title.text_60 h1,
	.sub_page .site-title h2 {
		font-size: 50px !important;
	}

	.text_50-100 p,
	.text_50-100 h2,
	.image-text-box h2 {
		font-size: 40px !important;
	}

	.elementor-widget-button.btn_fullwidth a.elementor-button {
		font-size: 32px;
	}

	/* Schmale Karten (3 nebeneinander): lange Wörter trennen */
	.box_text_btn .elementor-widget-text-editor {
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}


/* --------------------------------------------------------------------------
   Nur Mobile (bis 767 px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Logo */
	.header-bar .logo,
	.header-bar .logo img {
		width: 150px !important;
	}

	/* Typografie */
	.site-title h1,
	.site-title h2,
	.site-title.text_60 h1,
	.sub_page .site-title h2 {
		font-size: 36px !important;
		line-height: 110%;
	}

	.text_50-100 p,
	.text_50-100 h2,
	.image-text-box h2 {
		font-size: 30px !important;
		line-height: 110%;
	}

	.text_40-100 h2 {
		font-size: 28px !important;
		line-height: 110%;
	}

	.text_30,
	.text_30 p,
	.text_30 h3 {
		font-size: 24px;
	}

	.text_25,
	.text_25 p {
		font-size: 22px;
	}

	/* Grosse Link-Buttons (z. B. Angebote auf der Startseite) */
	.elementor-widget-button.btn_fullwidth a.elementor-button {
		font-size: 22px;
		padding: 15px 15px 15px 20px;
	}

	.elementor-widget-button.btn_fullwidth a.elementor-button .elementor-button-content-wrapper {
		gap: 10px;
	}

	.elementor-widget-button.btn_fullwidth a.elementor-button .elementor-button-icon {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	/* Boxen innen etwas kompakter */
	.p_30 {
		padding: 20px !important;
	}

	.teaser .teaser_text {
		padding: 0 20px 20px 20px !important;
	}

	/* Bildergalerie */
	.galerie .swiper-slide {
		height: 260px !important;
	}
}


/* --------------------------------------------------------------------------
   Links im Fliesstext (alle Breiten)
   Die Unterstreichung folgt dem Text, auch wenn der Link umbricht.
   Ersetzt das bisherige ::after-Element.
   -------------------------------------------------------------------------- */

.text_15 p a {
	display: inline;
	width: auto;
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: 0 100%;
	padding-bottom: 2px;
	transition: color 0.3s ease;
}

.text_15 p a::after {
	display: none !important;
}

.text_15 p a:hover {
	color: var(--e-global-color-secondary);
}


/* --------------------------------------------------------------------------
   Seitentitel als H1
   Die Seitentitel sind neu h1 statt h2. Die Utility-Klassen des Child-Themes
   greifen bisher nur für h2, darum hier die gleichen Werte für h1.
   Titel mit 60 px tragen zusätzlich die bestehende Klasse text_60.
   -------------------------------------------------------------------------- */

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

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

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

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

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

/* Beitragstitel (Template «Single Aktuell») */
.post-title h1 {
	font-size: 32px;
	line-height: 100%;
}

/* --------------------------------------------------------------------------
   Stellen-Template: Bewerbungsformular an den Schluss
   Das Formular steht im Template bewusst vor dem Inhalt, weil Elementor sonst
   den Formular-Kontext verliert (ein Loop im Inhalt überschreibt ihn und die
   Übermittlung schlägt mit «form is invalid» fehl). Die sichtbare Reihenfolge
   stellt diese Regel wieder her.
   -------------------------------------------------------------------------- */

body.single-stelle .elementor-location-single {
	display: flex;
	flex-direction: column;
}

body.single-stelle .elementor-location-single > .stelle-formular {
	order: 1;
}

body.single-stelle .elementor-location-single > .stelle-weitere {
	order: 2;
}

@media (min-width: 768px) {

	.bewerbungsformular .elementor-field-type-upload {
		width: calc(50% - 8px);
	}

	.bewerbungsformular .elementor-field-type-upload + .elementor-field-type-upload {
		margin-left: 16px;
	}
}


@media (min-width: 768px) and (max-width: 1024px) {
	body.home .site-title h1 {
		font-size: 44px !important;
	}
}
@media (min-width: 768px) {
	#logopaedie {
		scroll-margin-top: 100px !important;
	}
}
.elementor-menu-anchor {
	scroll-margin-top: 120px;
}
.nf-form-fields-required {
	margin-bottom: 15px !important;
}

/* Bestellung Bindungskarten: Anzahl als Zeile mit Zähler (Klasse aus functions.php) */
.nf-form-cont .bachtelen-anzahl {
	max-width: 640px;
	margin-bottom: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nf-form-cont .bachtelen-anzahl .field-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nf-form-cont .bachtelen-anzahl .nf-field-label {
	margin: 0;
}

.nf-form-cont .bachtelen-anzahl .nf-field-label label {
	font-weight: 400;
	line-height: 1.4;
}

.nf-form-cont .bachtelen-anzahl .nf-field-element {
	display: flex;
	flex: 0 0 auto;
	width: auto;
}

.nf-form-cont .bachtelen-anzahl .nf-field-element input[type="number"] {
	width: 56px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid #666;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	text-align: center;
	-moz-appearance: textfield;
}

.nf-form-cont .bachtelen-anzahl input[type="number"]::-webkit-outer-spin-button,
.nf-form-cont .bachtelen-anzahl input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.nf-form-cont .bachtelen-anzahl__btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #666;
	border-radius: 0;
	background: #fff;
	color: var(--e-global-color-primary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.nf-form-cont .bachtelen-anzahl__btn:hover,
.nf-form-cont .bachtelen-anzahl__btn:focus-visible {
	background: var(--e-global-color-primary);
	color: #fff;
}

/* Preis unter dem Namen (Label wird in functions.php aufgeteilt) */
.nf-form-cont .bachtelen-anzahl__preis {
	display: block;
	margin-top: 2px;
	color: #666;
	font-size: 0.875em;
}

/* Hinweis direkt über den Kartensets */
.nf-form-cont [data-testid^="nf-field-anzahl_angeben"] {
	margin-bottom: 0;
}

.nf-form-cont [data-testid^="nf-field-anzahl_angeben"] p {
	margin-bottom: 0;
}

/* Total rechtsbündig unter den Zählern */
.nf-form-cont [data-testid^="nf-field-totalbetrag"] {
	max-width: 640px;
	margin-top: 16px;
	text-align: right;
}


/* --------------------------------------------------------------------------
   1. Breadcrumb: Zwischenstufen ohne Link
   Bei Stellen und Standorten ist die mittlere Stufe kein Link, weil die
   Custom Post Types keine Archivseite haben. Das Plugin gibt sie als
   .wg-breadcrumb-item aus, wofür keine Farbe definiert ist, darum erscheint
   sie grau. Die Trennzeichen heissen im Markup .wg-breadcrumb-sep, das
   Plugin-CSS adressiert aber .wg-breadcrumb-separator.
   -------------------------------------------------------------------------- */
 
.wg-breadcrumbs {
	color: var(--e-global-color-primary);
}
 
.wg-breadcrumbs .wg-breadcrumb-item {
	font-weight: 500;
}
 
.wg-breadcrumbs .wg-breadcrumb-sep {
	opacity: 0.5;
}
 
 
/* --------------------------------------------------------------------------
   2. Seitenabstand zwischen 1025 und 1360 px
   Der Inhaltsbereich ist auf 1280 px fixiert. Unterhalb von rund 1360 px
   bleibt kein Rand mehr übrig und Texte kleben am Browserrand. Der bisherige
   Seitenabstand greift erst ab 1024 px abwärts. Gleicher Selektor wie dort,
   Loop-Items bleiben ausgenommen.
   -------------------------------------------------------------------------- */
 
@media (min-width: 1025px) and (max-width: 1360px) {
 
	:is(.e-con.e-parent, [data-elementor-type]:not([data-elementor-type="loop-item"]) > .e-con):not(.is-fullbleed):not([data-elementor-type="loop-item"] *) {
		--padding-left: 30px !important;
		--padding-right: 30px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
} 
 
/* runde Portraitbilder */

.img_circle img {
	border-radius:50%;
}

 
/* Fix Mobile Menu */

@media (max-width: 1024px) {
  .header-bar .elementor-nav-menu--dropdown .sub-menu {
    position: static !important;
    top: auto !important;
  }
}

/* Hauptmenü: Elternpunkt aktiver Unterseiten markieren */
.elementor-nav-menu--main .current-menu-ancestor > a.elementor-item,
.elementor-nav-menu--main .current-page-ancestor > a.elementor-item {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
}
.elementor-nav-menu--main .current-menu-ancestor > a.elementor-item::after,
.elementor-nav-menu--main .current-page-ancestor > a.elementor-item::after {
  opacity: 1 !important;
}