/*
Theme Name: QService Kundenwelt
Text Domain: qservice-kundenwelt
Description: QService Unternehmensauftritt mit vorbereitetem Kundenbereich, Blau/Weiß/Anthrazit.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */

html {
	scroll-behavior: smooth;
}

/* Neutralize legacy OceanWP custom CSS while this draft theme is being previewed. */
body:not(.qsapp-body):not(.home) {
	background: #fff !important;
	background-image: none !important;
	background-attachment: scroll !important;
}

body:not(.qsapp-body) > header.qs-header,
body:not(.qsapp-body) > footer.qs-footer {
	display: block !important;
}

/* Homepage: one fixed background image across the whole page; foreground scrolls over it. */
body.home:not(.qsapp-body) {
	background-color: #07111f !important;
	background-image:
		linear-gradient(rgba(5,13,24,.48), rgba(5,13,24,.62)),
		url('https://qservice-gmbh.de/wp-content/uploads/QService-Hintergrund-Neon.png') !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
}

body.home .qs-hero {
	background: transparent !important;
}

body.home .qs-hero-image {
	display: none !important;
}

body.home #leistungen {
	position: relative;
	isolation: auto;
	overflow: visible;
	background: transparent !important;
}

body.home #leistungen::before,
body.home #leistungen::after {
	content: none !important;
	display: none !important;
}

body.home #leistungen .qs-wrap {
	position: relative;
	z-index: 1;
}

body.home #leistungen .qs-intro h2 {
	color: #fff !important;
}

body.home #leistungen .qs-intro .qs-muted {
	color: #c6d2df !important;
}

/* Let the fixed image show directly between the homepage tiles. */
body.home .qs-process,
body.home #qservice,
body.home #kontakt,
body.home .qs-portal {
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.home .qs-process > .qs-wrap > h2 {
	color: #fff !important;
}

body.home .qs-process > .qs-wrap > .qs-kicker {
	color: #80b9ff !important;
}

body.home .qs-footer {
	background: rgba(9,19,32,.94) !important;
}

/* Critical frontend fixes kept unlayered so they also win in WPVibe mobile preview. */
.qs-process,
.qs-process h2,
.qs-process .qs-step h3 {
	color: #101e30 !important;
}

#leistungen .qs-service h3 {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	height: auto !important;
	color: #101e30 !important;
	font-size: 1.27rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 14px 0 14px !important;
}

body.admin-bar .qs-header {
	top: auto;
}

.qs-contact-company strong {
	display: block;
	color: #142131;
	font-size: 1.22rem;
	font-weight: 750;
	line-height: 1.3;
}

.qs-contact-company small {
	display: block;
	margin-top: 6px;
	color: #607087;
	font-size: .92rem;
	line-height: 1.55;
}

.qs-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 950;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #40516a;
	border-radius: 50%;
	background: #101a28;
	color: #fff !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(5,13,24,.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.qs-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Service cards: strong category labels and QService-inspired blue markers. */
.qs-service-number {
	font-family: "Segoe UI", Helvetica, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: .08em !important;
	color: #0052b8 !important;
}

.qs-service ul {
	list-style: none !important;
	padding-left: 0 !important;
}

.qs-service li {
	position: relative;
	padding-left: 24px;
}

.qs-service li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .58em;
	width: 12px;
	height: 5px;
	border-radius: 4px 1px 4px 1px;
	background: #0052b8;
	transform: rotate(-28deg);
	transform-origin: center;
}


@media screen and (max-width: 680px) {
	.qs-header {
		display: block !important;
		background: #101a28 !important;
		z-index: 1000 !important;
	}

	.qs-header .qs-wrap {
		width: calc(100% - 28px) !important;
		min-height: 66px !important;
	}

	.qs-logo {
		display: flex !important;
		align-items: center;
	}

	.qs-logo img {
		width: 138px !important;
		height: auto !important;
	}

	.qs-nav {
		display: none !important;
	}

	.qs-mobile {
		display: block !important;
		margin-left: auto;
	}

	.qs-mobile summary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		padding: 9px 13px;
		border: 1px solid #40516a;
		border-radius: 5px;
		background: #16263b;
		color: #fff !important;
		font-weight: 700;
		line-height: 1;
		list-style: none;
		cursor: pointer;
	}

	.qs-mobile summary::-webkit-details-marker {
		display: none;
	}

	.qs-mobile nav {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		display: grid !important;
		gap: 0 !important;
		padding: 8px 18px 16px !important;
		background: #101a28 !important;
		border-top: 1px solid #29384b;
		box-shadow: 0 12px 24px rgba(5, 13, 24, .22);
	}

	.qs-mobile nav a {
		display: block;
		padding: 13px 4px;
		border-bottom: 1px solid #29384b;
		color: #fff !important;
	}

	.qs-hero {
		min-height: 0 !important;
	}

	.qs-hero-copy {
		padding: 72px 0 62px !important;
	}

	.qs-hero h1 {
		font-size: clamp(2.25rem, 11vw, 2.85rem) !important;
		line-height: 1.08 !important;
	}

	.qs-lead {
		font-size: 1rem !important;
		line-height: 1.65 !important;
	}

	.qs-strip .qs-wrap {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 7px !important;
		padding-block: 17px !important;
	}

	.qs-strip span {
		width: auto !important;
	}

	.qs-steps {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.qs-process h2,
	.qs-step h3 {
		color: #101e30 !important;
	}

	.qs-step {
		padding-top: 18px !important;
	}

	.qs-section {
		padding: 54px 0 !important;
	}
}