/* ==========================================================================
   Home IT Abo – Theme-Stile
   Helle Identität: Weiss, Mint, frisches Grün, Navy als Akzent.
   Keine externen Schriften, keine externen Requests.
   ========================================================================== */

:root {
	/* Flächen */
	--color-white: #FFFFFF;
	--color-warm-white: #FCFEFC;
	--color-background: #F6F8F7;
	--color-mint-50: #F2FBF5;
	--color-mint-100: #E5F7EA;
	--color-mint-200: #D6F1DE;
	--color-mint-300: #A9DDB9;

	/* Grün */
	--color-green-primary: #3F9D69;
	--color-green-hover: #2F7F55;
	--color-green-dark: #245F43;
	--color-green-light: #63B982;

	/* Blau */
	--color-navy: #173F73;
	--color-blue-muted: #547A9E;
	--color-blue-surface: #EEF5FA;

	/* Text */
	--color-text: #1D2B25;
	--color-text-muted: #5F7067;
	--color-heading: #173F73;
	--color-heading-green: #245F43;
	--color-text-inverse: #FFFFFF;

	/* Rahmen */
	--color-border: #DCE9E0;
	--color-border-strong: #C6D8CC;
	--color-border-blue: #D7E4ED;

	/* Status */
	--color-success: #2F8A59;
	--color-success-surface: #E8F7ED;
	--color-warning: #B7791F;
	--color-error: #B74242;
	--color-whatsapp: #25D366;

	/* Schatten */
	--shadow-small: 0 8px 24px rgba(36, 95, 67, .08);
	--shadow-card: 0 16px 45px rgba(36, 95, 67, .12);
	--shadow-floating: 0 22px 60px rgba(23, 63, 115, .14);

	--hita-radius: 20px;
	--hita-radius-lg: 26px;
	--hita-header-height: 78px;
}

/* --- Grundlagen ---------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	background: var(--color-white);
	text-rendering: optimizeLegibility;
}

/* Kein overflow-hidden auf html oder body: das würde das feste Overlay-Menü
   und die Aktionsleiste in manchen Browsern abschneiden. Stattdessen wird
   verhindert, dass einzelne Blöcke breiter als der Viewport werden. */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.hita-section { max-width: 100%; }

.wp-block-columns { flex-wrap: wrap; }

img, svg, video { max-width: 100%; height: auto; }

p { max-width: 72ch; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 3px;
	border-radius: 8px;
}

.skip-link:focus {
	background: var(--color-white);
	color: var(--color-navy);
	padding: 1rem 1.5rem;
	z-index: 100000;
}

/* --- Header -------------------------------------------------------------- */
/* Wichtig: hier bewusst KEIN backdrop-filter und keine transform-Eigenschaft.
   Beides würde einen neuen Bezugsrahmen erzeugen und das mobile Overlay-Menü
   (position: fixed) im Header einsperren. Genau daran scheitern viele Themes. */

.hita-header {
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 2px 14px rgba(36, 95, 67, .05);
}

.hita-header .wp-block-site-title a,
.hita-header .wp-block-site-title {
	text-decoration: none;
	color: var(--color-navy);
	font-weight: 800;
	letter-spacing: -.01em;
}

.hita-header .wp-block-site-logo { display: flex; align-items: center; }
.hita-header .wp-block-site-logo img { max-height: 64px; width: auto; height: auto; }
.hita-header .hita-brand { gap: .75rem; }

.hita-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--color-text);
	padding-block: .35rem;
}

.hita-header .wp-block-navigation a:hover { color: var(--color-green-hover); text-decoration: underline; }
.hita-header .wp-block-navigation a[aria-current="page"] { color: var(--color-navy); text-decoration: underline; text-underline-offset: 6px; }

/* Menü-Button: Aussehen ja, Sichtbarkeit nein.
   Wann er erscheint, entscheidet allein der Navigations-Block
   (Overlay nur unter 600 px). Deshalb hier bewusst kein display-Wert,
   sonst würde der Hamburger auch auf dem Desktop auftauchen. */
.hita-header .wp-block-navigation__responsive-container-open,
.hita-header .wp-block-navigation__responsive-container-close {
	place-items: center;
	min-width: 52px;
	min-height: 52px;
	padding: 0;
	border-radius: 14px;
	color: var(--color-navy);
	background: var(--color-mint-50);
	border: 1px solid var(--color-border);
}

.hita-header .wp-block-navigation__responsive-container-open svg,
.hita-header .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; fill: currentColor; }

.hita-header .wp-block-navigation__responsive-container-open:hover { background: var(--color-mint-100); }

/* Sicherheitsnetz: ab 600 px gibt es keinen Hamburger. */
@media (min-width: 600px) {
	.hita-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; }
}

/* Kopfzeile bleibt einzeilig, die Navigation darf schrumpfen. */
.hita-header .alignwide { flex-wrap: nowrap; gap: 1rem; }
.hita-header .hita-brand { flex: 0 0 auto; gap: .65rem; }
.hita-header .hita-header-right { flex: 1 1 auto; justify-content: flex-end; gap: 1.25rem; flex-wrap: nowrap; }
.hita-header .wp-block-navigation { flex-wrap: nowrap; gap: 1.35rem; }
.hita-header .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; }

@media (max-width: 1180px) {
	.hita-header .wp-block-navigation { gap: 1rem; font-size: 1rem; }
	.hita-header .hita-header-right { gap: .85rem; }
	.hita-header .hita-header-cta .wp-block-button__link { padding-inline: .95rem; font-size: .95rem; }
}

@media (max-width: 1000px) {
	.hita-header .hita-header-cta { display: none; }
}

/* Overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	background: linear-gradient(160deg, #FFFFFF 0%, #F2FBF5 100%) !important;
	color: var(--color-text) !important;
	padding: 1.25rem clamp(1.25rem, 5vw, 2.5rem) 3rem !important;
	overflow-y: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--color-navy) !important;
	font-size: 1.375rem;
	font-weight: 700;
	display: block;
	padding: .85rem 0;
	min-height: 52px;
	border-bottom: 1px solid var(--color-border);
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	background: var(--color-white);
	border: 1px solid var(--color-border-strong);
	color: var(--color-navy);
	top: 1.25rem;
	right: clamp(1.25rem, 5vw, 2.5rem);
}

/* --- Buttons ------------------------------------------------------------- */

.wp-block-button__link {
	min-height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 8px 20px rgba(47, 127, 85, .22);
}

.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47, 127, 85, .28); }
.wp-block-button__link:active { transform: translateY(0); }

/* Sekundärer Button: heller Umriss */
.is-style-hita-ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--color-white);
	color: var(--color-green-hover);
	border: 2px solid var(--color-green-primary);
	box-shadow: none;
}

.is-style-hita-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--color-mint-100);
	color: var(--color-green-dark);
	border-color: var(--color-green-hover);
}

/* --- Sektionen ----------------------------------------------------------- */
/* Der seitliche Abstand steckt hier und nicht im Root-Padding von WordPress.
   Dadurch laufen volle Abschnitte wirklich randlos und nichts verschiebt sich. */

.hita-section {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.hita-section--mint { background: var(--color-mint-50); }
.hita-section--mint-strong { background: var(--color-mint-100); }
.hita-section--green-soft { background: linear-gradient(135deg, #F2FBF5 0%, #E5F7EA 100%); }
.hita-section--blue { background: var(--color-blue-surface); }
.hita-section--white { background: var(--color-white); }
.hita-section--cta { background: linear-gradient(135deg, #E5F7EA 0%, #CDEDD7 100%); }

.hita-eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .875rem;
	font-weight: 800;
	color: var(--color-green-hover);
	margin-bottom: .75rem;
}

.hita-lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); color: var(--color-text-muted); }

.hita-heading-green { color: var(--color-heading-green) !important; }

/* --- Hero ---------------------------------------------------------------- */

.hita-hero {
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	position: relative;
	background-color: var(--color-mint-50);
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(242, 251, 245, .9) 46%, rgba(221, 244, 229, .84) 100%),
		var(--hita-hero-image, url("../img/hero-background.jpg"));
	background-size: cover, cover;
	background-position: center center, center right;
	background-repeat: no-repeat, no-repeat;
	padding-block: clamp(2.75rem, 6vw, 5.5rem);
	overflow: hidden;
	border-bottom: 1px solid var(--color-border);
}

/* Auf schmalen Bildschirmen deckt der helle Verlauf mehr ab,
   damit die Überschrift jederzeit gut lesbar bleibt. */
@media (max-width: 781px) {
	.hita-hero {
		background-image:
			linear-gradient(160deg, rgba(255, 255, 255, .97) 0%, rgba(242, 251, 245, .95) 55%, rgba(221, 244, 229, .92) 100%),
			var(--hita-hero-image, url("../img/hero-background.jpg"));
	}
}

.hita-hero :where(h1, h2, h3) { color: var(--color-navy); }
.hita-hero p { color: var(--color-text); }
.hita-hero .hita-lead { color: var(--color-text-muted); }

.hita-hero::after {
	content: "";
	position: absolute;
	inset: auto -8% -35% auto;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(63, 157, 105, .14) 0%, rgba(63, 157, 105, 0) 70%);
	pointer-events: none;
}

.hita-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

.hita-hero-facts li {
	background: var(--color-white);
	border: 1px solid var(--color-mint-300);
	border-radius: 999px;
	padding: .6rem 1.1rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--color-green-dark);
	box-shadow: var(--shadow-small);
}

/* --- Karten -------------------------------------------------------------- */

.is-style-hita-card,
.hita-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--hita-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: var(--shadow-small);
	transition: transform .22s ease, box-shadow .22s ease;
}

.is-style-hita-card:hover,
.hita-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.is-style-hita-panel {
	background: var(--color-mint-50);
	border: 1px solid var(--color-border);
	border-radius: var(--hita-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Trust-Streifen ------------------------------------------------------ */

.hita-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hita-trust li {
	display: flex;
	align-items: center;
	gap: .8rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	padding: 1.05rem 1.2rem;
	font-weight: 700;
	color: var(--color-navy);
	box-shadow: var(--shadow-small);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hita-trust li:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--color-mint-300); }

/* --- Checklisten in Seiteninhalten --------------------------------------- */
/* Verwendet dieselbe Zeichnung wie das Icon-Paket (check-circle), damit im
   gesamten Projekt nur ein Icon-Stil vorkommt. */

.is-style-hita-check {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: .9rem;
}

.is-style-hita-check li {
	position: relative;
	padding-left: 2.6rem;
	line-height: 1.6;
}

.is-style-hita-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05rem;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--color-mint-100) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%25232F7F55%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m8%2012%202.5%202.5L16.5%209%27%2F%3E%3C%2Fsvg%3E") center / 1.15rem no-repeat;
	border: 1px solid var(--color-border-strong);
}

/* --- Schritte ------------------------------------------------------------ */

.hita-steps { counter-reset: hita-step; display: grid; gap: 1rem; list-style: none; padding: 0; }

.hita-steps li {
	counter-increment: hita-step;
	position: relative;
	padding: 1.25rem 1.25rem 1.25rem 4.25rem;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	font-weight: 700;
	color: var(--color-navy);
	box-shadow: var(--shadow-small);
	transition: transform .22s ease, box-shadow .22s ease;
}

.hita-steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.hita-steps li::before {
	content: counter(hita-step);
	position: absolute;
	left: 1.15rem;
	top: 1.35rem;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--color-green-primary);
	color: #FFFFFF;
	font-weight: 800;
}

.hita-steps li span { display: block; font-weight: 400; color: var(--color-text-muted); margin-top: .3rem; }

/* --- Chips --------------------------------------------------------------- */

.hita-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; margin: 1rem 0 0; }

.hita-chips li {
	background: var(--color-white);
	border: 1px solid var(--color-border-blue);
	border-radius: 999px;
	padding: .55rem 1rem;
	font-size: 1rem;
	color: var(--color-navy);
}

/* --- Beiträge / Ratgeber ------------------------------------------------- */

.wp-block-post-template.is-layout-grid { gap: 1.5rem; }

.hita-post-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--hita-radius);
	padding: 1.5rem;
	height: 100%;
	box-shadow: var(--shadow-small);
	transition: transform .22s ease, box-shadow .22s ease;
}

.hita-post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.hita-post-card img { border-radius: 14px; }

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; }

/* --- Footer -------------------------------------------------------------- */
/* Ruhig, kompakt und deutlich lesbar: dunkles Navy, weisse Schrift,
   Mint nur für Hover. Keine langen Seitenlisten, feste Spaltenbreiten. */

.hita-footer {
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--color-navy);
	color: #E6EDF7;
	font-size: 1rem;
	line-height: 1.6;
}

.hita-footer > * { max-width: 1200px; margin-inline: auto; }

.hita-footer p { max-width: 42ch; margin-block: .5rem; }

.hita-footer .wp-block-site-title,
.hita-footer .wp-block-site-title a {
	color: #FFFFFF;
	text-decoration: none;
	margin-top: 0;
}

.hita-footer__title {
	color: #FFFFFF !important;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 800;
	margin: 0 0 .85rem;
}

/* Alle Links im Fussbereich: weiss mit dezenter Unterstreichung. */
.hita-footer a,
.hita-footer .wp-block-navigation a,
.hita-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .4);
	text-underline-offset: .22em;
}

.hita-footer a:hover,
.hita-footer .wp-block-navigation a:hover {
	color: var(--color-mint-300);
	text-decoration-color: var(--color-mint-300);
}

.hita-footer a:focus-visible { outline: 3px solid var(--color-mint-300); outline-offset: 3px; }

/* Navigation und Rechtstexte: enge, ruhige Listen. */
.hita-footer__nav.wp-block-navigation { gap: .4rem; }
.hita-footer__nav .wp-block-navigation-item { line-height: 1.5; }

.hita-legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .4rem;
}

.hita-legal-links a { display: inline-block; padding-block: .2rem; }

/* Kontaktwege im Fussbereich */
.hita-footer .hita-contact-links { gap: .35rem; margin: 0; }
.hita-footer .hita-contact-links a { font-weight: 600; text-decoration: none; gap: .65rem; min-height: 44px; }
.hita-footer .hita-contact-links a:hover { text-decoration: underline; }
.hita-footer .hita-contact-links span { overflow-wrap: anywhere; }
.hita-footer .hita-icon-badge {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
	color: var(--color-mint-300);
}
.hita-footer .hita-contact-links a:hover .hita-icon-badge { background: rgba(255, 255, 255, .2); }

/* Dauerhaft sichtbarer Kündigungslink – gesetzlich vorgeschrieben und
   deshalb bewusst gut erkennbar, nicht versteckt. */
.hita-footer__cancel {
	margin-top: .9rem;
	padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.hita-footer__cancel a {
	display: inline-block;
	font-weight: 700;
	color: #FFFFFF;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	padding: .5rem .9rem;
	min-height: 44px;
	line-height: 1.9;
	text-decoration: none;
}

.hita-footer__cancel a:hover { background: rgba(255, 255, 255, .18); color: var(--color-mint-300); }

/* Abschlusszeile */
.hita-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .18);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: 1.1rem;
	gap: .5rem 1.5rem;
	color: #C4D3E8;
}

.hita-footer__bottom p { margin: 0; max-width: none; }

@media (max-width: 781px) {
	.hita-footer__grid { gap: 1.75rem; }
	.hita-footer p { max-width: none; }
	.hita-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Formularelemente ---------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select {
	font: inherit;
	width: 100%;
	min-height: 54px;
	padding: .9rem 1rem;
	border: 1.5px solid var(--color-border-strong);
	border-radius: 12px;
	background: var(--color-white);
	color: var(--color-text);
}

textarea { min-height: 150px; }
input:focus, textarea:focus, select:focus { border-color: var(--color-green-primary); }

/* --- Sanfte Einblendungen ------------------------------------------------ */

.hita-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
	will-change: opacity, transform;
}

.hita-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.hita-reveal { opacity: 1 !important; transform: none !important; }
}

/* Sicherheitsnetz: freie Inhalte direkt im Hauptbereich bekommen einen
   seitlichen Abstand und eine gut lesbare Zeilenbreite. */
.hita-main > :not(.hita-section):not(.wp-block-post-content),
.hita-main > .wp-block-post-content > :not(.hita-section):not(.alignfull) {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* Vollbreite Abschnitte bleiben randlos. */
.hita-main > .hita-section,
.hita-main > .wp-block-post-content > .hita-section { max-width: none; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }

/* Die Abschnitte begrenzen ihren Inhalt selbst auf 1200 px. */
.hita-section > .wp-block-group__inner-container,
.hita-hero > .wp-block-group__inner-container { max-width: 1200px; margin-inline: auto; }

/* --- Hilfsklassen -------------------------------------------------------- */

.hita-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.hita-measure { max-width: 68ch; }

/* Platz für die feste Aktionsleiste des Plugins. */
@media (max-width: 781px) {
	body.hita-has-mobile-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}