/*
Theme Name: Elinol
Template: twentytwentyfive
Version: 1.0.0
Text Domain: elinol
*/

/* Self-hosted fonts instead of Google Fonts - no extra connection to
   fonts.googleapis.com/gstatic.com before text can render, and no visitor
   IP sent to Google. Both are variable fonts, so one file per subset
   covers every weight in the range; latin-ext holds the Czech letters
   (č, ř, ě, ů ...) that latin doesn't. */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/sora-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/sora-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

strong,
b {
	font-weight: 700;
}

/* No focus ring on mouse/touch clicks (CTAs, phone/email links, the
   mobile menu toggle, etc.), but keyboard (Tab) navigation still gets a
   visible one - :focus-visible is keyboard-only - in the element's own
   color via currentColor. The more specific rules further down (logo,
   menu links, go-top arrow) use :focus:not(:focus-visible) for the same
   reason, so they don't override this one. */
a:focus,
button:focus,
.wp-element-button:focus {
	outline: none;
	box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Dark buttons with white text sitting on a light background - a
   currentColor (white) ring would be invisible next to them, so they get
   one in the button's own dark color instead. */
.nav-cta-button .wp-block-button__link:focus-visible,
.teaser-cta:focus-visible {
	outline-color: var(--graphite);
}

/* ...except in the dark teaser, where the ring sits on the graphite
   section background itself. */
.teaser-dark .teaser-cta:focus-visible {
	outline-color: var(--gold-light);
}

/* Utility for text that's there for screen readers only (e.g. the
   "Kontakt" heading - visually the section only shows its eyebrow). */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:root {
	--white: #FFFFFF;
	--white-soft: #FAFAF9;
	--gray-light: #F7F7F5;
	--gold: #C9962F;
	--gold-light: #E3B868;
	--gold-text: #8C6A1E;
	--gold-tint: #FBF4E7;
	--graphite: #202124;
	--graphite-soft: #55585E;
	--graphite-alt: #2A2B2F;
	--line: #E4E3E0;
	--wide-size: 1280px;
	--font-head: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;
}

/* No global scroll-behavior:smooth here on purpose - every intentional
   scroll in this theme (nav clicks, go-top button) already requests
   behavior:'smooth' explicitly in JS (smooth-scroll.js, nav-highlight.js,
   go-top.js). A global CSS smooth default would also apply to things we
   don't want animated, like the browser's own scroll-position restore on
   page reload - which visibly flashes to the top before sliding back down
   to where the user was. */
html {
	scroll-padding-top: 105px;
}

@media (max-width: 600px) {
	html {
		scroll-padding-top: 80px;
	}
}

body {
	color: var(--graphite);
}

/* ============ SCROLL-REVEAL (load-based stagger) ============ */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	animation: revealUp 0.8s cubic-bezier(.2,.7,.3,1) forwards;
	overflow-anchor: none;
}

.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.31s; }

@keyframes revealUp {
	to { opacity: 1; transform: translateY(0); }
}

/* ============ HEADER ============ */
/* No backdrop-filter here on purpose: it (like transform/filter/
   perspective) makes this element a containing block for any
   position:fixed descendant - the mobile nav overlay lives inside this
   header, so it would then size itself relative to the header's own
   small height instead of the full viewport. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--line);
}

.site-header-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	/* Same 2rem as the page's content columns (.hero-grid, .footer-wrap ...)
	   instead of WordPress's root padding (30-50px depending on the window
	   width), so on narrower windows the logo and menu line up with the
	   text below. On wide screens both sit in the same centered column. */
	padding-left: 2rem !important;
	padding-right: 2rem !important;
}

.site-header-inner > .wp-block-group {
	min-height: 104px;
}

.wp-block-site-logo .custom-logo-link:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.wp-block-site-logo img {
	height: 84px;
	width: auto;
}

.wp-block-navigation {
	gap: 2.25rem !important;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--graphite) !important;
	text-decoration: none !important;
	position: relative;
	padding: 0.4rem 0.1rem !important;
	transition: color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	left: 0.1rem;
	bottom: 0.3rem;
	width: 0%;
	height: 2px;
	background: var(--gold);
	transition: width 0.25s ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	/* --gold-text, not --gold: plain gold on white is only ~2.7:1. */
	color: var(--gold-text) !important;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after {
	width: calc(100% - 0.2rem);
}

.wp-block-navigation .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.wp-block-navigation .wp-block-navigation-item__content.nav-home-active {
	color: var(--gold-text) !important;
}

.wp-block-navigation .wp-block-navigation-item__content.nav-home-active::after {
	width: calc(100% - 0.2rem);
}

.nav-cta-button .wp-block-button__link {
	background: var(--graphite);
	color: var(--white) !important;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.7rem 1.4rem;
	border-radius: 6px;
	border: 1px solid var(--graphite);
	transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
	white-space: nowrap;
}

.nav-cta-button .wp-block-button__link:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--graphite) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(201, 150, 47, 0.35);
}

@media (max-width: 600px) {
	.site-header-inner > .wp-block-group { min-height: 80px; gap: 0.75rem; }
	.wp-block-site-logo img { height: 60px; }
	/* The logo, the CTA and the toggle all share one row here. Without
	   this the logo is the item that gives way, squeezed to well under
	   its 60px height - so the CTA gets a little more compact instead. */
	.site-header-inner .wp-block-site-logo { flex-shrink: 0; }
	.nav-cta-button .wp-block-button__link { font-size: 0.82rem; padding: 0.55rem 0.85rem; }
	/* Push the mobile menu toggle (rendered in place of the nav links) to
	   the far right, past the CTA button. */
	.site-header-inner > .wp-block-group > .wp-block-navigation { order: 2; }
	.site-header-inner > .wp-block-group > .wp-block-buttons { order: 1; }
}

/* WordPress only switches the menu to the hamburger below a fixed 600px.
   Between that and ~1000px the five links plus the CTA button don't fit
   next to the logo and wrap onto two or three lines, so the hamburger
   takes over up to 1040px instead (with the same order as on mobile:
   logo, CTA, toggle on the far right). The "header" prefix outranks
   core's equally specific 600px rules regardless of stylesheet order. */
@media (min-width: 600px) and (max-width: 1039.98px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header-inner > .wp-block-group > .wp-block-navigation { order: 2; }
	.site-header-inner > .wp-block-group > .wp-block-buttons { order: 1; margin-left: auto; margin-right: 1.25rem; }
}

@media (max-width: 374px) {
	.wp-block-site-logo img { height: 46px; }
}

/* Below 360px even the compact CTA doesn't fit next to the logo - the
   same "Nezávazná poptávka" button is the first thing in the hero right
   below anyway. */
@media (max-width: 359.98px) {
	.site-header-inner .wp-block-buttons { display: none; }
}

/* The back-to-top button is position:fixed at page level, while the
   overlay menu lives inside the sticky header's stacking context (z-index
   50) - so the button would float on top of the open menu. */
html.has-modal-open #go-top {
	display: none !important;
}

/* WordPress puts a default top margin on the main content wrapper
   (block-gap spacing) - without resetting it, the hero sits a few extra
   pixels below where scroll-padding-top expects it, so "Úvod" never
   quite reaches the very top of the page. */
main.wp-block-group {
	margin-top: 0;
}

/* Same default WP block-gap margin, but between the full-bleed sections
   themselves (hero, elektroinstalace, the two teasers, kontakt) - without
   this, each one shows a thin white stripe of body background above it,
   between its own colored background and the section before it. */
.wp-block-post-content > .alignfull {
	margin-top: 0;
}

/* ============ HERO ============ */
.hero {
	position: relative;
	overflow: hidden;
	padding: 5.5rem 0 6rem;
}

.hero::before {
	content: '';
	position: absolute;
	top: -220px;
	right: -220px;
	width: 560px;
	height: 560px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(201, 150, 47, 0.10), rgba(201, 150, 47, 0) 70%);
	pointer-events: none;
	animation: driftGlow 14s ease-in-out infinite;
	overflow-anchor: none;
}

@keyframes driftGlow {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-20px, 25px) scale(1.06); }
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
	position: relative;
	z-index: 1;
	max-width: var(--wide-size);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

.hero-copy {
	max-width: 560px;
}

.hero-graphic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: fadeIn 0.9s ease forwards;
	animation-delay: 0.3s;
	overflow-anchor: none;
}

.panel-frame {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 30px 60px -30px rgba(32, 33, 36, 0.22);
	padding: 1.2rem;
	background-image:
		linear-gradient(rgba(32, 33, 36, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(32, 33, 36, 0.04) 1px, transparent 1px);
	background-size: 20px 20px;
}

.panel-frame svg {
	display: block;
	width: 100%;
	height: auto;
}

.node-pulse {
	animation: nodePulse 3.2s ease-in-out infinite;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateX(14px) scale(0.98); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes nodePulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

.badge-ping {
	transform-box: fill-box;
	transform-origin: center;
	animation: badgePing 2.2s ease-out infinite;
}

@keyframes badgePing {
	0% { transform: scale(1); opacity: 0.65; }
	70%, 100% { transform: scale(1.9); opacity: 0; }
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: 1.5rem;
	opacity: 0;
	animation: fadeUp 0.7s ease forwards;
	animation-delay: 0.05s;
}

.hero-eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background: var(--gold);
	display: inline-block;
}

.hero-copy h1 {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2.3rem, 3.6vw, 3.4rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1.3rem;
	color: var(--graphite);
	opacity: 0;
	animation: fadeUp 0.75s ease forwards;
	animation-delay: 0.18s;
}

.hero-copy h1 span {
	color: var(--gold-text);
}

.hero-copy p {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--graphite-soft);
	max-width: 480px;
	margin: 0 0 2.2rem;
	opacity: 0;
	animation: fadeUp 0.75s ease forwards;
	animation-delay: 0.32s;
}

.hero-ctas {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp 0.75s ease forwards;
	animation-delay: 0.46s;
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	background: var(--gold);
	color: var(--graphite) !important;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	padding: 1rem 1.9rem;
	border-radius: 7px;
	text-decoration: none !important;
	box-shadow: 0 10px 24px rgba(201, 150, 47, 0.28);
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(201, 150, 47, 0.4);
	background: #B8872A;
}

.btn-primary svg {
	width: 18px;
	height: 18px;
	transition: transform 0.25s ease;
}

.btn-primary:hover svg {
	transform: translateX(4px);
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--graphite) !important;
	text-decoration: none !important;
	padding-bottom: 2px;
	border-bottom: 1.5px solid var(--graphite);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-secondary:hover {
	color: var(--gold-text) !important;
	border-color: var(--gold-text);
}

.hero-meta {
	display: flex;
	gap: 2.2rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
	opacity: 0;
	animation: fadeUp 0.75s ease forwards;
	animation-delay: 0.6s;
}

.hero-meta div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.hero-meta strong {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--graphite);
}

.hero-meta span {
	font-size: 0.85rem;
	color: var(--graphite-soft);
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ============ SECTION: ELEKTROINSTALACE ============ */
.section-light {
	background: var(--gray-light);
	padding: 80px 0;
}

.section-head {
	max-width: var(--wide-size);
	margin: 0 auto 2.5rem;
	padding-left: 2rem;
	padding-right: 2rem;
	text-align: left;
	box-sizing: border-box;
}

/* When a section-head has no visible h2 below the eyebrow (e.g. Kontakt,
   whose h2 is visually-hidden for screen readers only), the 2.5rem bottom
   margin - sized to follow a heading - leaves a visibly bigger gap than
   sections that do have one. The eyebrow's own 1rem margin-bottom alone
   gives the same visible eyebrow-to-text gap as eyebrow-to-h2 elsewhere
   (the h2's large line box adds its own space above the glyphs). */
.section-head:not(:has(> .wp-block-heading:not(.visually-hidden))) {
	margin-bottom: 0;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-text);
	margin-bottom: 1rem;
}

.section-eyebrow::before {
	content: '';
	width: 28px;
	height: 2px;
	background: var(--gold);
	display: inline-block;
}

.section-head h2 {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem);
	line-height: 1.2;
	color: var(--graphite);
	margin: 0;
	max-width: 760px;
}

.section-body {
	max-width: var(--wide-size);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

.section-body p {
	max-width: 760px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--graphite-soft);
	margin: 0 0 1.2rem;
}

.section-body p strong {
	color: var(--graphite);
	font-weight: 600;
}

.section-body p.lede {
	font-size: 1.15rem;
	color: var(--graphite);
}

/* feature grid */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: var(--wide-size);
	margin: 3rem auto 0;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

.feature-box {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 2rem 1.6rem;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(32, 33, 36, 0.08);
	border-color: var(--gold-light);
}

.feature-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	background: var(--gold-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-icon svg {
	width: 30px;
	height: 30px;
	stroke: var(--gold-text);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.feature-box h3 {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--graphite);
	margin: 0 0 0.5rem;
}

.feature-box p {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--graphite-soft);
	margin: 0;
}

/* ============ TEASER SECTIONS (specialized ELINOL sites) ============ */
.teaser {
	padding: 80px 0;
	overflow: hidden;
	position: relative;
}

.teaser-dark {
	background: var(--graphite);
	color: var(--white);
}

.teaser-light {
	background: var(--white-soft);
	color: var(--graphite);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.teaser::before {
	content: '';
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	pointer-events: none;
}

.teaser-dark::before {
	top: -180px;
	left: -180px;
	background: radial-gradient(circle at 30% 30%, rgba(201, 150, 47, 0.14), rgba(201, 150, 47, 0) 70%);
}

.teaser-light::before {
	bottom: -200px;
	right: -200px;
	background: radial-gradient(circle at 60% 60%, rgba(201, 150, 47, 0.12), rgba(201, 150, 47, 0) 70%);
}

.teaser-grid {
	max-width: var(--wide-size);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	grid-template-areas: "text card" "cta card";
	gap: 3.5rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

.teaser-copy-top { grid-area: text; }
.teaser-cta-group { grid-area: cta; }
.teaser-logo-panel { grid-area: card; }

.teaser-logo-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1200px;
}

/* Hidden until card-flip.js flips it in - only when JS is actually
   running (functions.php puts a "js" class on <html>), so without it the
   partner logos still show. */
.js .teaser-logo-card {
	transform: rotateY(90deg);
	opacity: 0;
}

.teaser-logo-panel.is-flipped .teaser-logo-card {
	transform: rotateY(0deg);
	opacity: 1;
}

.teaser-logo-card {
	backface-visibility: hidden;
	transition: transform 0.7s cubic-bezier(.3,.6,.3,1), opacity 0.35s ease;
	overflow-anchor: none;
	background: var(--white);
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 360px;
	height: 180px;
	box-shadow: 0 24px 50px rgba(0,0,0,0.18);
}

.teaser-light .teaser-logo-card {
	box-shadow: 0 16px 36px rgba(32, 33, 36, 0.1);
	border: 1px solid var(--line);
}

.teaser-logo-card img {
	max-width: 85%;
	max-height: 70%;
	width: auto;
	height: auto;
	display: block;
}

.teaser-copy-top .section-eyebrow {
	margin-bottom: 1rem;
}

.teaser-dark .section-eyebrow {
	color: var(--gold-light);
}

.teaser-dark .section-eyebrow::before {
	background: var(--gold-light);
}

.teaser-copy-top h2 {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.4vw, 2.2rem);
	line-height: 1.22;
	margin: 0 0 1.1rem;
}

.teaser-dark h2 { color: var(--white); }
.teaser-light h2 { color: var(--graphite); }

.teaser-copy-top p {
	font-size: 1.03rem;
	line-height: 1.7;
	margin: 0 0 1.8rem;
	max-width: 520px;
}

.teaser-dark p { color: rgba(255,255,255,0.72); }
.teaser-light p { color: var(--graphite-soft); }

.teaser-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 0.98rem;
	padding: 0.95rem 1.8rem;
	border-radius: 7px;
	text-decoration: none !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.teaser-dark .teaser-cta {
	background: var(--gold);
	color: var(--graphite) !important;
	box-shadow: 0 10px 24px rgba(201, 150, 47, 0.25);
}

.teaser-dark .teaser-cta:hover {
	background: #B8872A;
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(201, 150, 47, 0.35);
}

.teaser-light .teaser-cta {
	background: var(--graphite);
	color: var(--white) !important;
	box-shadow: 0 10px 24px rgba(32, 33, 36, 0.18);
}

.teaser-light .teaser-cta:hover {
	background: var(--gold);
	color: var(--graphite) !important;
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(201, 150, 47, 0.35);
}

.teaser-cta svg {
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}

.teaser-cta:hover svg {
	transform: translate(3px, -3px);
}

.teaser-note {
	margin-top: 1.3rem;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.teaser-dark .teaser-note { color: rgba(255,255,255,0.5); }
.teaser-light .teaser-note { color: var(--graphite-soft); }

.teaser-note .dot-icon {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold);
	display: inline-block;
	flex-shrink: 0;
}

/* ============ SECTION: KONTAKT ============ */
.section-dark {
	background: var(--graphite-alt);
	color: rgba(255,255,255,0.78);
	padding: 80px 0;
}

.section-dark .section-eyebrow {
	color: var(--gold-light);
}

.section-dark .section-eyebrow::before {
	background: var(--gold-light);
}

.section-dark .section-head h2 {
	color: var(--white);
}

/* ============ FOOTER ============ */
/* Just the slim closing bar (copyright + sister-site links) - the
   "Kontakt" content (company info, contact details, other services)
   lives as its own section in the page content above, not in here. */
footer.wp-block-template-part {
	background: var(--graphite-alt);
	color: rgba(255,255,255,0.78);
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 24px 0;
	margin-top: 0;
}

.footer-wrap {
	max-width: var(--wide-size);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

.footer-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: var(--wide-size);
	margin: 0 auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

/* WordPress adds a top margin to every block after the first one inside
   a flow-layout group (its normal vertical-stacking spacing) - these
   three columns sit side by side instead, so that margin would just
   push two of them down relative to the first. */
.footer-top > * {
	margin-top: 0;
}

.footer-col {
	flex: 0 0 auto;
}

.footer-col-logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
}

.footer-brand img {
	height: 144px;
	width: auto;
	display: block;
}

.footer-col p,
.footer-col a {
	font-size: 0.92rem;
	line-height: 1.75;
	color: rgba(255,255,255,0.65) !important;
	text-decoration: none !important;
	margin: 0;
}

.footer-col a:hover {
	color: var(--gold-light) !important;
}

/* 0.55 white on the graphite background is the faintest that still
   meets the WCAG 4.5:1 contrast minimum for small text (0.4 was ~3.6:1). */
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.8rem;
	font-size: 0.82rem;
	color: rgba(255,255,255,0.55);
}

.footer-bottom a {
	color: rgba(255,255,255,0.55) !important;
	text-decoration: none !important;
}

.footer-bottom a:hover {
	color: var(--gold-light) !important;
}

#go-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	display: none;
	height: 44px;
	width: 44px;
	border-radius: 50%;
	background: var(--gold);
	z-index: 9999;
}

#go-top a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	color: var(--graphite);
}

/* Keyboard focus ring drawn inside the button rather than around it -
   the button floats over both light and dark sections, so a ring outside
   it would disappear against one of them. Inside, it always sits on the
   button's own background in the arrow's color. */
#go-top a:focus-visible {
	outline-offset: -4px;
	border-radius: inherit;
}

#go-top a:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

#go-top a svg {
	width: 18px;
	height: 18px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-copy { max-width: 100%; }
	.hero-copy p { max-width: 100%; }
	.hero-graphic { max-width: 420px; margin: 2rem auto 0; }
	.feature-grid { grid-template-columns: 1fr 1fr; }
	.teaser-grid {
		grid-template-columns: 1fr;
		grid-template-areas: "text" "card" "cta";
	}
	.footer-top { flex-direction: column; gap: 2rem; }
	.footer-col { flex-basis: auto; }
	.footer-col-logo { justify-content: flex-start; align-self: flex-start; }
}

@media (max-width: 600px) {
	.hero { padding: 3rem 0 4rem; }
	.hero-meta { flex-wrap: wrap; gap: 1.4rem; }
	.feature-grid { grid-template-columns: 1fr; }
	.section-light, .teaser { padding: 56px 0; }
	.teaser-logo-card { width: 260px; height: 130px; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
	.hero-eyebrow, .hero-copy h1, .hero-copy p, .hero-ctas, .hero-meta,
	.hero-graphic, .reveal {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.node-pulse { opacity: 0.8 !important; animation: none !important; }
	.badge-ping { animation: none !important; opacity: 0 !important; }
	.hero::before, .teaser::before {
		animation: none !important;
	}
	.btn-primary:hover, .feature-box:hover,
	.teaser-dark .teaser-cta:hover, .teaser-light .teaser-cta:hover,
	.nav-cta-button .wp-block-button__link:hover,
	.btn-primary:hover svg, .teaser-cta:hover svg {
		transform: none !important;
	}
	.teaser-logo-card {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}
}

/* The reveal-on-load animation never runs inside the editor (CSS still
   applies there), so without this the editor would show these elements
   permanently at their hidden starting state. */
.editor-styles-wrapper .reveal,
.editor-styles-wrapper .hero-eyebrow,
.editor-styles-wrapper .hero-copy h1,
.editor-styles-wrapper .hero-copy p,
.editor-styles-wrapper .hero-ctas,
.editor-styles-wrapper .hero-meta,
.editor-styles-wrapper .hero-graphic,
.editor-styles-wrapper .teaser-logo-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}