/**
Theme Name: Websamurai for Gutenberg
Author: Websamurai AG
Author URI: https://www.websamurai.ch
Description: Websamurai for Gutenberg Theme, das sich für Blogs, persönliche Portfolios und Unternehmenswebsites eignet. Es ist sehr leichtgewichtig (weniger als 50 KB im Frontend) und bietet eine unvergleichliche Geschwindigkeit. Websamurai for Gutenberg wurde mit Blick auf SEO entwickelt und verfügt über integrierten schema.org-Code, sodass Suchmaschinen Ihre Website lieben werden. Websamurai for Gutenberg bietet zahlreiche Sidebar-Optionen und Widget-Bereiche, mit denen Sie die vollständige Kontrolle über die Anpassungen haben.  Einige der weiteren Funktionen: # WooCommerce-kompatibel # Responsive # Kompatibel mit den wichtigsten Plugins # Übersetzungsfähig # Erweiterbar mit Premium-Add-ons # Regelmässig aktualisiert # Entworfen, entwickelt und gepflegt. Websamurai for Gutenberg ist ein schnelles, vollständig anpassbares und wunderschönes Theme!
Version: 4.11.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: websamurai-for-gutenberg
Template: astra
*/

/* =========================================================
   1) Navigation / Header
   ========================================================= */

/* Pfeil-Icon bei Submenü-Links ohne Kinder im Mobile-/Breakpoint-Menü ausblenden */
.ast-header-break-point .main-navigation ul .sub-menu .menu-item:not(.menu-item-has-children) .menu-link .icon-arrow:first-of-type {
	display: none;
}

/* Header-Abstände und dezenter Schatten auf Desktop + Breakpoint */
.ast-desktop .ast-primary-header-bar.main-header-bar,
.ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar {
	padding-left: 40px;
	padding-right: 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Mobile Close-Icon */
.ast-mobile-svg.ast-close-svg {
	width: 30px;
	height: 30px;
	transition: none;
	color: var(--ast-global-color-0);
}

/* Close-Button im Mobile-Popup */
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
	padding: 0.2em 0.8em 1em 0;
	color: white;
	display: flex;
	box-shadow: none;
	border: none !important;
	border-radius: 0;
}

/* Standard-Menü-Toggle ohne sichtbare Border */
.ast-menu-toggle {
	border: 0 solid;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}

/* Menüschrift für kleinere Desktop-/Tablet-Breiten optimieren */
@media (min-width: 921.1px) and (max-width: 1024.1px) {
	.ast-builder-menu-1 .menu-item > .menu-link {
		font-size: 1rem;
		padding: 0 10px;
	}

	.ast-builder-menu-2 .menu-item > .menu-link {
		font-size: 1rem;
	}
}


/* =========================================================
   2) Formulare – globale Basis
   ========================================================= */

input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: 'Inter Tight', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: var(--ast-body-line-height, 1.6em);
	letter-spacing: 0;
}

/* Standard-Inputs */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
	color: #666;
	padding: 0.75em;
	height: auto;
	border-width: 1px;
	border-style: solid;
	border-color: var(--ast-global-color-0);
	border-radius: 10px;
	background: #eeeeee;
	box-shadow: none;
	box-sizing: border-box;
	transition: all 0.2s linear;
}

/* Quiz-Label */
.wpcf7-quiz-label {
	font-size: 16px;
}


/* =========================================================
   3) Links / Interaktionen
   ========================================================= */

/* Links in .no-link optisch neutralisieren und deaktivieren */
.no-link > p > a,
.no-link > p > a:link,
.no-link > p > a:visited,
.no-link > p > a:hover,
.no-link > p > a:active {
	text-decoration: none;
	color: inherit;
	pointer-events: none;
	cursor: default;
}

/* Taxonomie-Links im Post-Grid deaktivieren */
.uagb-post-grid .uagb-post__inner-wrap .uagb-post__taxonomy a {
	text-decoration: none;
	color: inherit;
	pointer-events: none;
	cursor: default;
}


/* =========================================================
   4) Inhalts- und Hover-Styles
   ========================================================= */

.wp-block-uagb-table-of-contents ol.uagb-toc__list {
	list-style-position: outside;
}

.box-hover:hover {
	background-color: #f1f5f9;
}

.card-hover:hover::before {
	opacity: 0.5;
}

/* Beitragsbilder im Grid sauber auf Containerfläche ziehen */
.uagb-post-grid.is-grid.uagb-post__image-position-top .uagb-post__image a[class^="uagb-image-ratio-"] > img {
	position: absolute;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Listen innerhalb verschachtelter UAGB-Container */
.wp-block-uagb-container > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container > ul,
.wp-block-uagb-container > .uagb-container-inner-blocks-wrap ol {
	max-width: 100%;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-left: 24px;
}

/* Standard-Listen im Content zurücksetzen */
.entry-content ul,
.entry-content ol {
	padding: initial;
	margin: revert;
}


/* =========================================================
   5) Contact Form 7 / UAGB – Spaltenlayout allgemein
   ========================================================= */

/* Desktop: Eingabe + Button nebeneinander */
.uacf7-form-wrapper-container .uagb-cf7_styler-col {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
}

.uagb-cf7_styler-col-1,
.uagb-cf7_styler-col-2 {
	display: flex;
	align-items: stretch;
}

.uagb-cf7_styler-col-1 {
	flex: 1 1 auto;
}

.uagb-cf7_styler-col-2 {
	flex: 0 0 140px;
}

/* Tablet / Mobile: untereinander */
@media (max-width: 767.98px) {
	.uacf7-form-wrapper-container .uagb-cf7_styler-col {
		flex-direction: column;
		align-items: stretch;
	}

	.uagb-cf7_styler-col-1,
	.uagb-cf7_styler-col-2 {
		flex: 1 1 100%;
		width: 100%;
	}

	.uagb-cf7_styler-col-1 input {
		width: 100%;
	}

	.uagb-cf7_styler-col-2 .wpcf7-submit {
		width: 100%;
		display: block;
	}

	.uagb-cf7_styler-col-2 {
		margin-top: 12px;
	}
}


/* =========================================================
   6) Status-LED / Mobile-Menüpunkt
   ========================================================= */

/* LED-Grundstil */
#status .status-widget__led {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-left: 6px;
	display: inline-block;
	vertical-align: middle;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Statusfarben */
#status .status-widget__led[data-state="operational"] {
	background-color: #28a745;
}

#status .status-widget__led[data-state="maintenance"] {
	background-color: #ffc107;
}

#status .status-widget__led[data-state="degraded_performance"] {
	background-color: #fd7e14;
}

#status .status-widget__led[data-state="major_outage"],
#status .status-widget__led[data-state="partial_outage"] {
	background-color: #dc3545;
}

/* Status-Menüpunkt im Mobile-Menü */
#ast-hf-mobile-menu > #menu-item-1556 > #status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto !important;
	padding-top: 30px;
	padding-bottom: 30px;
}


/* =========================================================
   7) Formular #wpcf7-f3179-p3771-o1 – gezieltes 2-Spalten-Layout
   ========================================================= */

/* Zweispaltiges Layout nur für dieses Formular erzwingen */
#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col > p {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 16px 0;
}

/* Automatische BR-Tags ausblenden */
#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col > p > br {
	display: none !important;
}

/* Zwei Spalten */
#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col-1,
#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col-2 {
	flex: 0 0 calc(50% - 8px) !important;
	max-width: calc(50% - 8px) !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column;
	box-sizing: border-box;
}

/* Sonstige Felder auf volle Breite */
#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col > p > span:not(.uagb-cf7_styler-col-1):not(.uagb-cf7_styler-col-2) {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	display: flex !important;
	flex-direction: column;
}

/* Eingabefelder über volle Breite */
#wpcf7-f3179-p3771-o1 input,
#wpcf7-f3179-p3771-o1 select,
#wpcf7-f3179-p3771-o1 textarea {
	width: 100% !important;
	box-sizing: border-box;
}

/* Mobile: eine Spalte */
@media (max-width: 768px) {
	#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col-1,
	#wpcf7-f3179-p3771-o1 .uagb-cf7_styler-col-2 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}


/* =========================================================
   8) Kontaktformular – Checkbox / Acceptance Styling
   ========================================================= */

/* Falls ein Parent justify-content: space-between setzt */
.kontaktformular .uagb-cf7_styler-col > p {
	justify-content: flex-start !important;
}

/* Acceptance-List-Item auf Formularbreite halten */
.kontaktformular .wpcf7-acceptance .wpcf7-list-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Label als 2-Spalten-Grid: Checkbox | Text */
.kontaktformular .wpcf7-acceptance .wpcf7-list-item label {
	display: grid !important;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 2px;
	width: 100% !important;
	margin: 0 !important;
}

/* Checkbox kompakt */
.kontaktformular .wpcf7-acceptance input[type="checkbox"] {
	margin: 2px 0 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--ast-global-color-0, #0073e6);
}

/* Text rechts der Checkbox umbrechbar */
.kontaktformular .wpcf7-acceptance .wpcf7-list-item-label {
	display: block !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	margin: 0 !important;
}


/* =========================================================
   9) Versteckte Felder vollständig ausblenden
   ========================================================= */

.hidden-fields-container,
.hidden-fields-container input[type="hidden"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

/* Feld "inputname" vollständig verbergen */
.wpcf7-form-control-wrap[data-name="inputname"],
.wpcf7-form-control-wrap[data-name="inputname"] input {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}


/* =========================================================
   10) Beiträge – Mobile Ansicht
   ========================================================= */

@media only screen and (max-width: 767px) {
	.wp-block-uagb-container.uagb-block-10223733,
	.beitrag1 {
		padding-left: 12px;
		padding-right: 12px;
	}

	.wp-block-uagb-container.uagb-block-3772c7cb,
	.beitrag2 {
		padding-left: 0;
		padding-right: 0;
		row-gap: 0;
		column-gap: 0;
	}
}


/* =========================================================
   11) Bewerbungsformular – eigenes Design
   ========================================================= */

.itcnet-bewerbungsformular {
	--itc-blue: #0083c3;
	--itc-blue-dark: #006a9e;
	--itc-blue-light: #e8f4fa;
	--itc-grey: #898a8d;
	--itc-grey-light: #f5f5f6;
	--itc-grey-border: #d1d2d4;
	--itc-dark: #2a2a2a;
	--itc-white: #ffffff;
	--itc-red: #c0392b;
	--radius: 6px;
	--transition: 0.2s ease;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--itc-dark);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.itcnet-bewerbungsformular *,
.itcnet-bewerbungsformular *::before,
.itcnet-bewerbungsformular *::after {
	box-sizing: border-box;
}

.itcnet-bewerbungsformular .form-container {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 24px;
}

.itcnet-bewerbungsformular .form-header {
	text-align: center;
	margin-bottom: 40px;
}

.itcnet-bewerbungsformular .form-header h2 {
	font-size: 28px;
	font-weight: 700;
	color: var(--itc-dark);
	margin: 0 0 8px;
	letter-spacing: -0.3px;
}

.itcnet-bewerbungsformular .form-header p {
	font-size: 15px;
	color: var(--itc-grey);
	max-width: 480px;
	margin: 0 auto;
}

.itcnet-bewerbungsformular .form-section {
	margin-bottom: 36px;
}

.itcnet-bewerbungsformular .section-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--itc-blue);
}

.itcnet-bewerbungsformular .section-icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	background: var(--itc-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.itcnet-bewerbungsformular .section-icon svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px;
	min-height: 16px;
	display: block;
	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.itcnet-bewerbungsformular .section-label h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--itc-dark);
	letter-spacing: -0.2px;
	margin: 0;
}

.itcnet-bewerbungsformular .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.itcnet-bewerbungsformular .form-row.single {
	grid-template-columns: 1fr;
}

.itcnet-bewerbungsformular .form-row.triple {
	grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
	.itcnet-bewerbungsformular .form-row,
	.itcnet-bewerbungsformular .form-row.triple {
		grid-template-columns: 1fr;
	}
}

.itcnet-bewerbungsformular .form-group {
	display: flex;
	flex-direction: column;
}

.itcnet-bewerbungsformular .form-group > label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--itc-dark);
	margin-bottom: 6px;
}

.itcnet-bewerbungsformular .required {
	color: var(--itc-red);
	margin-left: 2px;
}

.itcnet-bewerbungsformular .optional {
	color: var(--itc-grey);
	font-weight: 400;
	font-size: 12px;
	margin-left: 4px;
}

.itcnet-bewerbungsformular .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.itcnet-bewerbungsformular input[type="text"],
.itcnet-bewerbungsformular input[type="email"],
.itcnet-bewerbungsformular input[type="tel"],
.itcnet-bewerbungsformular input[type="date"],
.itcnet-bewerbungsformular select,
.itcnet-bewerbungsformular textarea {
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--itc-dark);
	border: 1.5px solid var(--itc-grey-border);
	border-radius: var(--radius);
	background: #fff;
	outline: none;
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.itcnet-bewerbungsformular input:focus,
.itcnet-bewerbungsformular select:focus,
.itcnet-bewerbungsformular textarea:focus {
	border-color: var(--itc-blue);
	box-shadow: 0 0 0 3px rgba(0, 131, 195, 0.12);
}

.itcnet-bewerbungsformular input::placeholder,
.itcnet-bewerbungsformular textarea::placeholder {
	color: var(--itc-grey-border);
}

.itcnet-bewerbungsformular select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23898A8D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

.itcnet-bewerbungsformular textarea {
	min-height: 120px;
	resize: vertical;
}

.itcnet-bewerbungsformular svg {
	max-width: 100%;
	vertical-align: middle;
}

.itcnet-bewerbungsformular .section-icon svg,
.itcnet-bewerbungsformular .upload-icon svg {
	max-width: none;
}

.itcnet-bewerbungsformular .file-upload-area {
	border: 2px dashed var(--itc-grey-border);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: border-color var(--transition), background var(--transition);
}

.itcnet-bewerbungsformular .file-upload-area:hover {
	border-color: var(--itc-blue);
	background: var(--itc-blue-light);
}

.itcnet-bewerbungsformular .upload-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	margin: 0 auto 8px;
	background: var(--itc-blue-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.itcnet-bewerbungsformular .upload-icon svg {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
	display: block;
	fill: none !important;
	stroke: var(--itc-blue) !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.itcnet-bewerbungsformular .upload-text {
	font-size: 13px;
	color: var(--itc-grey);
	margin-bottom: 4px;
}

.itcnet-bewerbungsformular .upload-text strong {
	color: var(--itc-blue);
	font-weight: 600;
}

.itcnet-bewerbungsformular .upload-hint {
	font-size: 11px;
	color: var(--itc-grey-border);
	margin-top: 4px;
	margin-bottom: 12px;
}

.itcnet-bewerbungsformular .file-upload-area input[type="file"] {
	width: 100%;
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.itcnet-bewerbungsformular .file-upload-area input[type="file"]::file-selector-button {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--itc-blue);
	border: none;
	border-radius: 6px;
	padding: 10px 16px;
	margin-right: 12px;
	cursor: pointer;
	transition: background var(--transition);
}

.itcnet-bewerbungsformular .file-upload-area input[type="file"]::file-selector-button:hover {
	background: var(--itc-blue-dark);
}

.itcnet-bewerbungsformular .checkbox-group {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
}

.itcnet-bewerbungsformular .checkbox-group .wpcf7-form-control-wrap {
	width: auto;
	flex-shrink: 0;
}

.itcnet-bewerbungsformular .checkbox-group input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--itc-blue);
	cursor: pointer;
	flex-shrink: 0;
}

.itcnet-bewerbungsformular .checkbox-group label {
	font-size: 16px;
	color: var(--itc-grey);
	line-height: 1.5;
	margin: 0;
	margin-top: 4px;
}

.itcnet-bewerbungsformular .checkbox-group label a {
	color: var(--itc-blue);
	text-decoration: none;
	font-weight: 500;
}

.itcnet-bewerbungsformular .checkbox-group label a:hover {
	text-decoration: underline;
}

.itcnet-bewerbungsformular .form-submit {
	margin-top: 32px;
	text-align: center;
}

.itcnet-bewerbungsformular .btn-submit,
.itcnet-bewerbungsformular input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--itc-blue);
	border: none;
	border-radius: var(--radius);
	padding: 14px 40px;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
	letter-spacing: 0.2px;
	width: auto;
}

.itcnet-bewerbungsformular .btn-submit:hover,
.itcnet-bewerbungsformular input[type="submit"]:hover {
	background: var(--itc-blue-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 131, 195, 0.3);
}

.itcnet-bewerbungsformular .btn-submit:active,
.itcnet-bewerbungsformular input[type="submit"]:active {
	transform: translateY(0);
}

.itcnet-bewerbungsformular .form-note {
	margin-top: 20px;
	text-align: center;
	font-size: 14px;
	color: var(--itc-grey);
	line-height: 1.6;
}

.itcnet-bewerbungsformular .wpcf7-not-valid-tip {
	color: var(--itc-red);
	font-size: 12px;
	margin-top: 6px;
}

.itcnet-bewerbungsformular .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius);
	font-size: 14px;
}

.itcnet-bewerbungsformular .wpcf7 form.sent .wpcf7-response-output {
	border-color: #27ae60;
	color: #27ae60;
}

.itcnet-bewerbungsformular .wpcf7 form.invalid .wpcf7-response-output,
.itcnet-bewerbungsformular .wpcf7 form.unaccepted .wpcf7-response-output,
.itcnet-bewerbungsformular .wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--itc-red);
	color: var(--itc-red);
}

/* Spezifischer Abstand im Formular */
#wpcf7-f5177-p2608-o2 > form > div.itcnet-bewerbungsformular > div > div > div.section-label > div > p {
	margin-top: 1em;
	margin-bottom: 1em;
}