/**
 * BECKDESIGN Startseite (Redesign 2026, helle Variante)
 *
 * Wird ausschließlich auf der Startseite geladen (functions.php: bd_home_enqueue_assets).
 * Jede Regel ist auf den Wrapper-Container .beckdesign-home begrenzt.
 * Designreferenz: /CLAUDE/index.html + styles.css
 */

/* ---------- Tokens ---------- */
.beckdesign-home {
	--bdh-white: #FFFFFF;
	--bdh-paper: #F4F4F8;
	--bdh-ink: #101010;
	--bdh-black: #000000;
	--bdh-text: #1E1E20;
	--bdh-text-inv: #F4F4F6;
	--bdh-muted: #5C5C63;
	--bdh-muted-inv: #9A9AA2;
	--bdh-orange: #EF572D;
	--bdh-orange-text: #C9411A;
	--bdh-line: rgba(30, 30, 32, 0.14);
	--bdh-line-inv: rgba(244, 244, 246, 0.16);

	--bdh-fs-display: clamp(2.5rem, 0.2rem + 10.6vw, 11rem);
	--bdh-fs-h2: clamp(2.375rem, 1rem + 4.6vw, 5.5rem);
	--bdh-fs-title: clamp(1.875rem, 0.9rem + 3vw, 3.75rem);
	--bdh-fs-h3: clamp(1.5rem, 1.1rem + 1.3vw, 2.5rem);
	--bdh-fs-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
	--bdh-fs-body: 1.125rem;
	--bdh-fs-small: 0.875rem;

	/* Raster maximal 1320px breit: Rand wächst auf breiten Screens mit */
	--bdh-m: max(clamp(1.25rem, 3vw, 3rem), calc((100vw - 1320px) / 2));
	--bdh-g: clamp(1rem, 1.6vw, 1.5rem);
	--bdh-sec: clamp(6rem, 11vw, 12rem);
	/* Höhe der Kopfleiste (Template 5523, header-footer.css) */
	--bdh-bar: 4.5rem;

	--bdh-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bdh-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
	--bdh-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='24 362 385 311'%3E%3Cpath d='M24.3,362.07 L135.68,518.4 L25.11,673.11 L131.22,673.11 L239.76,517.59 L131.22,362.07 Z M193.59,362.07 L304.97,518.4 L194.4,673.11 L300.51,673.11 L409.05,517.59 L300.51,362.07 Z'/%3E%3C/svg%3E");
}

/* ---------- Basis: Kit-, Theme- und Elementor-Vorgaben nur innerhalb der Startseite neutralisieren ---------- */
.beckdesign-home.e-con {
	background: var(--bdh-white);
	color: var(--bdh-text);
	font-family: "Beck Sans", system-ui, sans-serif;
	font-weight: 300;
	font-size: var(--bdh-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.beckdesign-home.e-con,
.beckdesign-home .e-con {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--container-max-width: none;
}
.beckdesign-home *, .beckdesign-home *::before, .beckdesign-home *::after { box-sizing: border-box; }
.beckdesign-home .elementor-widget:not(:last-child) { margin-block-end: 0; }
.beckdesign-home.e-con :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.beckdesign-home.e-con :is(h1, h2, h3) { color: inherit; font-family: inherit; }
.beckdesign-home.e-con :is(ul, ol) { padding: 0; list-style: none; }
.beckdesign-home.e-con :is(img, video, svg, canvas) { display: block; max-width: 100%; }
.beckdesign-home.e-con a { color: inherit; font-family: inherit; text-decoration: none; }
.beckdesign-home.e-con :is(strong, b) { font-weight: 700; }
.beckdesign-home.e-con button,
.beckdesign-home.e-con button:is(:hover, :focus) { font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; white-space: normal; transition: none; }
.beckdesign-home .elementor-widget-heading .elementor-heading-title { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none; text-wrap: balance; }
.beckdesign-home .elementor-widget-text-editor { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; }
.beckdesign-home p { text-wrap: pretty; }
.beckdesign-home ::selection { background: var(--bdh-orange); color: var(--bdh-black); }
.beckdesign-home :focus-visible { outline: 2px solid var(--bdh-orange); outline-offset: 3px; }
.beckdesign-home [id] { scroll-margin-top: var(--bdh-bar); }

/* Raster */
.beckdesign-home .e-con.bdh-frame { width: 100%; padding-inline: var(--bdh-m); }
.beckdesign-home .e-con.bdh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bdh-g); }
.beckdesign-home .bdh-grid > * { grid-column: 1 / -1; width: auto; max-width: none; }

/* Typografie (Klasse sitzt am Widget, der Titel erbt) */
.beckdesign-home .bdh-display { font-size: var(--bdh-fs-display); line-height: 0.92; letter-spacing: -0.045em; font-weight: 700; }
.beckdesign-home .bdh-h2 { font-size: var(--bdh-fs-h2); line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.beckdesign-home .bdh-h3 { font-size: var(--bdh-fs-h3); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
.beckdesign-home .bdh-lead { font-size: var(--bdh-fs-lead); line-height: 1.38; letter-spacing: -0.01em; }
.beckdesign-home .bdh-small { font-size: var(--bdh-fs-small); line-height: 1.45; }

/* ---------- Buttons und Links (Elementor-Button-Widget) ---------- */
.beckdesign-home .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; fill: currentColor; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.beckdesign-home .elementor-widget-button .elementor-button-content-wrapper { gap: 0; }

.beckdesign-home .bdh-btn .elementor-button { justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; background: var(--bdh-orange); color: var(--bdh-black); white-space: nowrap; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--bdh-ease); }
.beckdesign-home .bdh-btn .elementor-button:hover,
.beckdesign-home .bdh-btn .elementor-button:focus-visible { background: var(--bdh-text); color: var(--bdh-white); }
.beckdesign-home .bdh-btn .elementor-button:active { transform: scale(0.97); }
.beckdesign-home .bdh-btn--ghost .elementor-button { background: transparent; color: var(--bdh-text); box-shadow: inset 0 0 0 1.5px var(--bdh-text); }

.beckdesign-home .bdh-more .elementor-button { gap: 0.6rem; transition: color 180ms ease; }
.beckdesign-home .bdh-more .elementor-button::after { content: ""; flex: none; width: 0.85em; height: 0.7em; background: currentColor; -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; transition: transform 240ms var(--bdh-ease); }
.beckdesign-home .bdh-more .elementor-button:hover { color: var(--bdh-orange-text); }
.beckdesign-home .bdh-more .elementor-button:hover::after { transform: translateX(4px); }
.beckdesign-home :is(.bdh-section--ink, .bdh-section--black) .bdh-more .elementor-button:hover { color: var(--bdh-orange); }

/* ---------- Einstieg: Headline auf Weiß, Showreel öffnet sich aus einer Linie ---------- */
.beckdesign-home .e-con.bdh-intro-head { padding-block: calc(var(--bdh-bar) + clamp(3rem, 8vh, 6rem)) clamp(2rem, 4vw, 3.5rem); }
.beckdesign-home .bdh-hero-h .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.beckdesign-home .bdh-hero-h .line > span { display: inline-block; }
.beckdesign-home .bdh-hero-h .dot { color: var(--bdh-orange); }
.beckdesign-home .bdh-intro-lead { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.beckdesign-home .bdh-intro-lead p { max-width: 40ch; }

.beckdesign-home .e-con.bdh-reel { position: relative; overflow: hidden; background: var(--bdh-black); transform-origin: 50% 0; }
.beckdesign-home .bdh-reel-video .elementor-wrapper { aspect-ratio: 2.39 / 1; }
.beckdesign-home .bdh-reel-video :is(.elementor-widget-container, .elementor-wrapper) { height: 100%; }
.beckdesign-home .bdh-reel-video video,
.beckdesign-home .bdh-about-film video { width: 100%; height: 100%; object-fit: cover; background: var(--bdh-black); }
.beckdesign-home .bdh-sound { position: absolute; right: var(--bdh-m); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 3; width: auto; }
.beckdesign-home.e-con .bdh-sound-btn { min-height: 2.75rem; padding: 0 1.1rem; background: var(--bdh-black); color: var(--bdh-white); font-size: 1rem; font-weight: 700; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
.beckdesign-home.e-con .bdh-sound-btn:hover { background: var(--bdh-orange); color: var(--bdh-black); }

.beckdesign-home .e-con.bdh-hero-meta { row-gap: 0.5rem; font-size: 1rem; padding-block: 1.25rem clamp(1.5rem, 3vw, 2.5rem); }
.beckdesign-home .bdh-hero-meta p { max-width: 30ch; }

/* ---------- Sektionen ---------- */
.beckdesign-home .e-con.bdh-section { padding-block: var(--bdh-sec); }
.beckdesign-home .e-con.bdh-section--paper { background: var(--bdh-paper); }
.beckdesign-home .e-con.bdh-section--ink { background: var(--bdh-ink); color: var(--bdh-text-inv); --bdh-line: var(--bdh-line-inv); --bdh-muted: var(--bdh-muted-inv); }
.beckdesign-home .e-con.bdh-section--black { background: var(--bdh-black); color: var(--bdh-text-inv); }
.beckdesign-home .e-con.bdh-sec-head { row-gap: 1.5rem; margin-bottom: clamp(3rem, 6vw, 6rem); align-items: end; }
.beckdesign-home .e-con.bdh-sec-aside { display: grid; gap: 1.25rem; justify-items: start; }
.beckdesign-home .bdh-sec-aside p { max-width: 42ch; }

/* Haltung + Kennzahlen */
.beckdesign-home .e-con.bdh-intro + .bdh-section { padding-top: clamp(4.5rem, 8vw, 7.5rem); }
.beckdesign-home .e-con.bdh-facts { row-gap: 2.5rem; }
.beckdesign-home .bdh-facts > .bdh-fact { grid-column: span 6; border-top: 1px solid var(--bdh-line); padding-top: 1.25rem; }
.beckdesign-home .bdh-fact-num { font-variant-numeric: tabular-nums; }
.beckdesign-home .bdh-fact-num i { font-style: normal; color: var(--bdh-orange); }
.beckdesign-home .bdh-fact-num .fact-x { display: inline-block; transform-origin: 50% 55%; }
.beckdesign-home .bdh-fact-text { margin-top: 0.75rem; font-size: 1rem; }
.beckdesign-home .bdh-fact-text p { max-width: 24ch; }

/* ---------- Leistungen ---------- */
.beckdesign-home .e-con#leistungen { padding-bottom: 0; }
/* Vier Kacheln, getrennt durch 1px-Fugen (Hintergrund scheint durch den Grid-Gap) */
.beckdesign-home .e-con.bdh-services { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--bdh-line); border-top: 1px solid var(--bdh-line); }
.beckdesign-home .e-con.bdh-svc { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto auto; gap: 1rem; min-height: clamp(18rem, 30vw, 28rem); padding: clamp(1.5rem, 3vw, 3rem); background: var(--bdh-paper); transition: background-color 260ms ease; }
.beckdesign-home .bdh-svc > .elementor-element { width: auto; max-width: none; }
.beckdesign-home .bdh-svc > .bdh-svc-glyph { grid-row: 1; grid-column: 1; }
.beckdesign-home .bdh-svc-glyph svg { width: clamp(2.75rem, 4.4vw, 4.5rem); height: auto; aspect-ratio: 1; fill: var(--bdh-text); overflow: visible; transition: fill 220ms ease; }
.beckdesign-home .bdh-svc-glyph svg > * { transform-box: fill-box; }
/* Der Titel-Link deckt die ganze Kachel ab: Titel-Widget selbst bleibt unpositioniert */
.beckdesign-home .bdh-svc > .bdh-svc-title { grid-row: 3; grid-column: 1 / -1; position: static; font-size: var(--bdh-fs-title); line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.beckdesign-home .bdh-svc-title .elementor-heading-title { transition: margin 420ms var(--bdh-ease); }
.beckdesign-home .bdh-svc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.beckdesign-home .bdh-svc > .bdh-svc-desc { grid-row: 4; grid-column: 1 / -1; min-height: 4.8em; }
.beckdesign-home .bdh-svc-desc p { max-width: 38ch; }
.beckdesign-home .bdh-svc > .bdh-svc-links { grid-row: 5; grid-column: 1 / -1; min-height: 7.6em; color: var(--bdh-muted); }
.beckdesign-home .bdh-svc-links ul { max-width: 40ch; display: flex; flex-wrap: wrap; align-content: start; gap: 0.35rem 1.25rem; }
.beckdesign-home .bdh-svc-links a { position: relative; z-index: 2; display: inline-block; padding-block: 0.35rem; transition: color 180ms ease; }
.beckdesign-home .bdh-svc-links a:hover { color: var(--bdh-text); text-decoration: underline; text-underline-offset: 0.25em; }
.beckdesign-home .bdh-svc > .bdh-svc-go { grid-row: 1; grid-column: 2; align-self: start; }
.beckdesign-home .bdh-svc-go span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; box-shadow: inset 0 0 0 1px var(--bdh-line); transition: background-color 220ms ease, box-shadow 220ms ease; }
.beckdesign-home .bdh-svc-go span::after { content: ""; width: 1.1rem; height: 0.9rem; background: var(--bdh-text); -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; transition: transform 300ms var(--bdh-ease), background-color 220ms ease; }
@media (hover: hover) {
	.beckdesign-home .e-con.bdh-svc:hover { background: var(--bdh-white); }
	.beckdesign-home .bdh-svc:hover .bdh-svc-title .elementor-heading-title { margin-left: 0.5rem; }
	.beckdesign-home .bdh-svc:hover .bdh-svc-glyph svg { fill: var(--bdh-orange); }
	.beckdesign-home .bdh-svc:hover .bdh-svc-go span { background: var(--bdh-orange); box-shadow: none; }
	.beckdesign-home .bdh-svc:hover .bdh-svc-go span::after { background: var(--bdh-black); transform: translateX(3px); }
}
.beckdesign-home .bdh-svc:focus-within .bdh-svc-glyph svg { fill: var(--bdh-orange); }

/* Jede Glyphe bewegt sich wie ihre Disziplin */
@media (prefers-reduced-motion: no-preference) {
	.beckdesign-home .bdh-svc:is(.is-play, :hover) .g-marke rect { animation: bdh-g-set 760ms var(--bdh-ease) both; transform-origin: 0 50%; }
	.beckdesign-home .bdh-svc:is(.is-play, :hover) .g-digital rect { animation: bdh-g-grow 760ms var(--bdh-ease) both; transform-origin: 50% 100%; }
	.beckdesign-home .bdh-svc:is(.is-play, :hover) .g-content path { animation: bdh-g-send 900ms var(--bdh-ease) both; transform-origin: 0 50%; }
	.beckdesign-home .bdh-svc:is(.is-play, :hover) .g-foto path { animation: bdh-g-ff 640ms var(--bdh-ease) both; }
	.beckdesign-home .bdh-svc-glyph svg > :nth-child(2) { animation-delay: 90ms !important; }
	.beckdesign-home .bdh-svc-glyph svg > :nth-child(3) { animation-delay: 180ms !important; }
}
@keyframes bdh-g-set { 0% { transform: scaleX(1); } 35% { transform: scaleX(0.2); } 100% { transform: scaleX(1); } }
@keyframes bdh-g-grow { 0% { transform: scaleY(1); } 35% { transform: scaleY(0.25); } 100% { transform: scaleY(1); } }
@keyframes bdh-g-send { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 0.15; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bdh-g-ff { 0% { transform: translateX(0); } 40% { transform: translateX(22%); opacity: 0.4; } 41% { transform: translateX(-22%); } 100% { transform: translateX(0); opacity: 1; } }

/* ---------- Auszeichnungen: schwarze Bühne, Siegel ohne sichtbare Kästen ---------- */
.beckdesign-home .e-con.bdh-awards-sec { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.beckdesign-home .e-con.bdh-awards { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); justify-items: start; }
.beckdesign-home .e-con.bdh-badges { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: var(--bdh-g); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.beckdesign-home .bdh-badges::-webkit-scrollbar { display: none; }
.beckdesign-home .bdh-badges > .elementor-element { width: auto; max-width: none; scroll-snap-align: start; background: var(--bdh-black); }
.beckdesign-home .bdh-badges img { width: 100%; height: auto; aspect-ratio: 23 / 10; object-fit: contain; transition: opacity 300ms ease, transform 400ms var(--bdh-ease); }
@media (hover: hover) {
	.beckdesign-home .bdh-badges:hover img { opacity: 0.4; }
	.beckdesign-home .bdh-badges > .elementor-element:hover img { opacity: 1; transform: scale(1.04); }
}

/* ---------- Arbeiten ---------- */
/* Kopf sitzt mittig im weißen Band zwischen den schwarzen Flächen */
.beckdesign-home .e-con#arbeiten { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.beckdesign-home #arbeiten .bdh-sec-head { margin-bottom: 0; align-items: center; }

/* pro.equip: Bildsequenz folgt dem Scrollen */
.beckdesign-home .bdh-seq { position: relative; background: var(--bdh-black); color: var(--bdh-text-inv); }
.beckdesign-home .bdh-seq-stage { position: relative; height: 100svh; overflow: hidden; }
.beckdesign-home.e-con .bdh-seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.beckdesign-home .bdh-seq-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.beckdesign-home .bdh-seq-ui { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bdh-g); padding-inline: var(--bdh-m); padding-top: calc(var(--bdh-bar) + 1.5rem); padding-bottom: 2rem; grid-template-rows: auto 1fr auto auto auto; row-gap: 1.5rem; }
.beckdesign-home .bdh-seq-ui > * { grid-column: 1 / -1; }
.beckdesign-home .bdh-seq-intro .bdh-h2::after { content: "."; color: var(--bdh-orange); }
.beckdesign-home .bdh-seq-intro .bdh-small { color: var(--bdh-muted-inv); margin-top: 0.4rem; font-size: 1rem; }
.beckdesign-home .bdh-seq-steps { grid-row: 3; position: relative; min-height: 6.5em; }
.beckdesign-home .bdh-seq-steps li { position: absolute; left: 0; right: 0; bottom: 0; max-width: 27ch; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity 400ms ease, transform 600ms var(--bdh-ease), visibility 0s 400ms; }
.beckdesign-home .bdh-seq-steps li.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.beckdesign-home .bdh-seq-links { grid-row: 4; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-self: end; justify-content: flex-start; }
.beckdesign-home .bdh-seq-links a { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1rem; transition: color 180ms ease; }
.beckdesign-home .bdh-seq-links a::after { content: ""; width: 0.85em; height: 0.7em; background: currentColor; -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; transition: transform 240ms var(--bdh-ease); }
.beckdesign-home .bdh-seq-links a:hover { color: var(--bdh-orange); }
.beckdesign-home .bdh-seq-links a:hover::after { transform: translateX(4px); }
.beckdesign-home .bdh-seq-progress { grid-row: 5; height: 2px; background: var(--bdh-line-inv); }
.beckdesign-home .bdh-seq-progress span { display: block; height: 100%; background: var(--bdh-orange); transform: scaleX(var(--p, 0)); transform-origin: left; }
.bdh-js .beckdesign-home .bdh-seq.is-live { height: 300svh; }
.bdh-js .beckdesign-home .bdh-seq.is-live .bdh-seq-stage { position: sticky; top: 0; }
.bdh-js .beckdesign-home.e-con .bdh-seq.is-live .bdh-seq-canvas { display: block; }
.bdh-js .beckdesign-home .bdh-seq.is-live .bdh-seq-fallback { display: none; }

/* Projekte */
.beckdesign-home .e-con.bdh-works { padding-block: var(--bdh-sec); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bdh-g); row-gap: clamp(3.5rem, 7vw, 7rem); }
.beckdesign-home .bdh-works > * { grid-column: 1 / -1; width: auto; max-width: none; }
.beckdesign-home .e-con.bdh-work { display: block; }
.beckdesign-home .bdh-work-img { overflow: hidden; background: var(--bdh-paper); }
.beckdesign-home .bdh-work-img .elementor-widget-container { height: 100%; }
.beckdesign-home .bdh-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--bdh-ease); }
.beckdesign-home .bdh-work:hover .bdh-work-img img { transform: scale(1.04); }
.beckdesign-home .bdh-w-vfl .bdh-work-img,
.beckdesign-home .bdh-w-awo .bdh-work-img { aspect-ratio: 4 / 3; }
.beckdesign-home .bdh-w-abus .bdh-work-img,
.beckdesign-home .bdh-w-jhw .bdh-work-img { aspect-ratio: 4 / 5; }
.beckdesign-home .bdh-w-schwing .bdh-work-img { aspect-ratio: 16 / 9; }
.beckdesign-home .e-con.bdh-work-meta { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.beckdesign-home .bdh-work-meta > .elementor-element { width: auto; }
.beckdesign-home .bdh-work-meta .bdh-small { color: var(--bdh-muted); text-align: right; font-size: 1rem; }
.beckdesign-home .bdh-work-meta .elementor-heading-title::after { content: ""; display: inline-block; width: 0.55em; height: 0.45em; margin-left: 0.15em; background: var(--bdh-orange); -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; opacity: 0; transform: translateX(-0.3em); transition: opacity 220ms ease, transform 320ms var(--bdh-ease); }
.beckdesign-home .bdh-work:is(:hover, :focus-visible) .bdh-work-meta .elementor-heading-title::after { opacity: 1; transform: none; }
.beckdesign-home .e-con.bdh-works-end { display: grid; gap: 1.5rem; justify-items: start; align-self: end; }

/* ---------- Kunden ---------- */
.beckdesign-home .e-con.bdh-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bdh-line); border-block: 1px solid var(--bdh-line); }
.beckdesign-home .bdh-logos > .elementor-element { width: auto; max-width: none; background: var(--bdh-paper); aspect-ratio: 3 / 2; overflow: hidden; }
.beckdesign-home .bdh-logos .elementor-widget-container { height: 100%; display: grid; place-items: center; }
/* Logo-Dateien haben weißen Grund und Rahmen: anschneiden, entsättigen, Weiß wegmultiplizieren.
   !important nötig, weil style.css des Child-Themes global img { filter: none !important } setzt. */
.beckdesign-home .bdh-logos img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(5%); transform: scale(0.74); mix-blend-mode: multiply; filter: grayscale(1) !important; opacity: 0.5; transition: filter 300ms ease, opacity 300ms ease; }
.beckdesign-home .bdh-logos > .elementor-element:hover img { filter: none !important; opacity: 1; }

/* ---------- Agentur ---------- */
.beckdesign-home .e-con#agentur { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
.beckdesign-home #agentur .bdh-sec-head { align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.beckdesign-home .bdh-about-film { overflow: hidden; background: var(--bdh-black); }
.beckdesign-home .bdh-about-film .elementor-wrapper { aspect-ratio: 21 / 9; }
.beckdesign-home .e-con.bdh-about-cols { margin-top: clamp(3rem, 5vw, 5rem); row-gap: 2.5rem; align-items: start; }
.beckdesign-home .e-con.bdh-about-copy { display: grid; gap: 2rem; justify-items: start; }
.beckdesign-home .bdh-about-lead p { max-width: 34ch; }
.beckdesign-home .bdh-about-more { color: var(--bdh-text-inv); }

/* 360°-Scheibe: alle Gewerke rund um die Marke */
.beckdesign-home.e-con .bdh-dial-widget.elementor-widget figure.bdh-dial { --dn: var(--bdh-fs-h2); position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1; margin: 0 auto; }
.beckdesign-home .bdh-dial-svg { width: 100%; height: 100%; overflow: visible; }
.beckdesign-home .bdh-dial-ticks line { stroke: var(--bdh-muted-inv); stroke-width: 1.5; opacity: 0.45; }
.beckdesign-home .bdh-dial-marker { fill: var(--bdh-orange); }
.beckdesign-home .bdh-dial-track { fill: none; stroke: var(--bdh-line-inv); stroke-width: 1; }
.beckdesign-home :is(.bdh-dial-ring, .bdh-dial-core) { transform-origin: 300px 300px; transform-box: view-box; will-change: transform; }
.beckdesign-home .bdh-dial-dots rect { fill: var(--bdh-orange); }
.beckdesign-home .bdh-dial-labels text { fill: var(--bdh-text-inv); font-family: inherit; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; dominant-baseline: text-after-edge; }
.beckdesign-home .bdh-dial-labels text.is-on { fill: var(--bdh-orange); }
.beckdesign-home .bdh-dial-center { position: absolute; inset: 0; display: block; pointer-events: none; text-align: center; color: var(--bdh-text-inv); font-style: normal; }
/* Ziffern gemessen: Glyphenmitte liegt bei 0,47em – mit optischer Korrektur leicht nach oben */
.beckdesign-home .bdh-dial-deg { position: absolute; left: 50%; top: 50%; font-weight: 700; font-size: var(--dn); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; transform: translate(-50%, -0.5em); }
.beckdesign-home .bdh-dial-deg b { position: absolute; left: 100%; top: 0; color: var(--bdh-orange); }
.beckdesign-home .bdh-dial-num { display: inline-block; transition: opacity 260ms ease; }
.beckdesign-home .bdh-dial-trade { position: absolute; left: 50%; top: 50%; width: 15ch; min-height: 2.6em; margin: 0; font-size: var(--bdh-fs-lead); line-height: 1.2; color: var(--bdh-muted-inv); transform: translate(-50%, calc(var(--dn) * 0.32 + 1.1rem)); transition: opacity 260ms ease, transform 420ms var(--bdh-ease); }
.beckdesign-home .bdh-dial-trade.is-swap { opacity: 0; transform: translate(-50%, calc(var(--dn) * 0.32 + 1.7rem)); }
.beckdesign-home .bdh-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Jobs */
.beckdesign-home .bdh-jobs-h { margin-top: clamp(4rem, 8vw, 8rem); }
.beckdesign-home .e-con.bdh-jobs { margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.5rem; border-top: 1px solid var(--bdh-line); row-gap: 2.5rem; align-items: start; }
.beckdesign-home .e-con.bdh-jobs-intro { display: grid; gap: 1.25rem; justify-items: start; }
.beckdesign-home .bdh-jobs-intro .bdh-h3 { font-size: var(--bdh-fs-lead); line-height: 1.2; letter-spacing: -0.01em; }
.beckdesign-home .bdh-jobs-intro p { max-width: 44ch; color: var(--bdh-text-inv); }
.beckdesign-home .bdh-jobs-intro .bdh-btn { margin-top: 0.5rem; }
.beckdesign-home .bdh-jobs-intro .bdh-btn .elementor-button:hover { background: var(--bdh-white); color: var(--bdh-black); }
.beckdesign-home .bdh-jobs-list ul { border-bottom: 1px solid var(--bdh-line); }
.beckdesign-home .bdh-jobs-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-block: 1rem; border-top: 1px solid var(--bdh-line); font-weight: 700; font-size: var(--bdh-fs-lead); line-height: 1.2; letter-spacing: -0.01em; transition: color 180ms ease; }
.beckdesign-home .bdh-jobs-list a::after { content: ""; flex: none; width: 1rem; height: 0.8rem; background: currentColor; -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; transition: transform 300ms var(--bdh-ease); }
.beckdesign-home .bdh-jobs-list a:hover { color: var(--bdh-orange); }
.beckdesign-home .bdh-jobs-list a:hover::after { transform: translateX(4px); }
.beckdesign-home .bdh-jobs-list li:first-child a { border-top: 0; padding-top: 0; min-height: 0; padding-bottom: 1rem; }

/* ---------- Kontakt: der Markenname wird Teil des Claims ---------- */
.beckdesign-home .e-con.bdh-cta { padding-top: clamp(4.5rem, 8vw, 7.5rem); }
.beckdesign-home .bdh-cta-h { white-space: nowrap; }
.beckdesign-home .bdh-cta-field { position: relative; cursor: text; }
.beckdesign-home .bdh-cta-field::before,
.beckdesign-home .bdh-cta-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.beckdesign-home .bdh-cta-field::before { height: 2px; background: var(--bdh-line); transition: opacity 360ms ease 120ms; }
.beckdesign-home .bdh-cta-field::after { height: 5px; background: var(--bdh-orange); transform: scaleX(0); transform-origin: right; transition: transform 560ms var(--bdh-ease); }
.beckdesign-home .bdh-cta-field:is(:hover, :focus-within)::before { opacity: 0; transition-delay: 0s; }
.beckdesign-home .bdh-cta-field:is(:hover, :focus-within)::after { transform: scaleX(1); transform-origin: left; }
.beckdesign-home.e-con input.bdh-cta-input,
.beckdesign-home.e-con input.bdh-cta-input:focus { display: block; width: 100%; margin: 0.04em 0 0; padding: 0 clamp(3rem, 6vw, 5rem) 0.06em 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; color: var(--bdh-orange); caret-color: var(--bdh-orange); font-family: inherit; font-size: var(--bdh-fs-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; transition: none; }
.beckdesign-home .bdh-cta-type { position: absolute; left: 0; top: 0.02em; display: flex; align-items: baseline; color: var(--bdh-orange); pointer-events: none; white-space: nowrap; }
.beckdesign-home .bdh-caret { display: inline-block; width: 0.06em; height: 0.82em; margin-left: 0.06em; background: var(--bdh-orange); transform: translateY(0.08em); }
@media (prefers-reduced-motion: no-preference) { .beckdesign-home .bdh-caret { animation: bdh-blink 1s steps(1) infinite; } }
@keyframes bdh-blink { 50% { opacity: 0; } }
.beckdesign-home .bdh-cta-field.is-active .bdh-cta-type { display: none; }
/* Dezentes Enter-Zeichen: zeigt „Eingabe abschicken“, wird beim Tippen orange */
.beckdesign-home.e-con .bdh-cta-enter { position: absolute; right: 0; top: calc(50% - 0.17em); transform: translateY(-50%); display: grid; place-items: center; width: clamp(2.75rem, 4vw, 3.5rem); height: clamp(2.75rem, 4vw, 3.5rem); font-size: var(--bdh-fs-display); color: var(--bdh-line); transition: color 220ms ease, transform 220ms var(--bdh-ease); }
.beckdesign-home .bdh-cta-enter svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.beckdesign-home.e-con .bdh-cta-field:is(:hover, :focus-within) .bdh-cta-enter { color: var(--bdh-muted); }
.beckdesign-home.e-con :is(.bdh-cta-field.is-active .bdh-cta-enter, .bdh-cta-enter:hover, .bdh-cta-enter:focus-visible) { color: var(--bdh-orange); }
.beckdesign-home.e-con .bdh-cta-enter:active { transform: translateY(-50%) scale(0.92); }
.beckdesign-home .bdh-cta-under { display: grid; gap: 1.25rem; align-items: start; margin-top: 1.25rem; }
.beckdesign-home .bdh-cta-label { display: block; margin: 0; font-size: var(--bdh-fs-lead); line-height: 1.35; color: var(--bdh-text); max-width: 46ch; vertical-align: baseline; }
.beckdesign-home .bdh-cta-label strong { color: var(--bdh-orange-text); }
.beckdesign-home .bdh-cta-under .bdh-btn { justify-self: start; }
.beckdesign-home .bdh-cta-row { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bdh-g); row-gap: 1.5rem; align-items: center; }
.beckdesign-home .bdh-cta-row > * { grid-column: 1 / -1; }
.beckdesign-home .bdh-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
/* Buttons und Pfeil-Links im HTML-Widget nutzen dieselbe Optik wie die Button-Widgets */
.beckdesign-home .bdh-cta a.bdh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; background: var(--bdh-orange); color: var(--bdh-black); font-weight: 700; font-size: 1rem; white-space: nowrap; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--bdh-ease); }
.beckdesign-home .bdh-cta a.bdh-btn:hover { background: var(--bdh-text); color: var(--bdh-white); }
.beckdesign-home .bdh-cta a.bdh-more { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1rem; transition: color 180ms ease; }
.beckdesign-home .bdh-cta a.bdh-more::after { content: ""; width: 0.85em; height: 0.7em; background: currentColor; -webkit-mask: var(--bdh-arrow) center / contain no-repeat; mask: var(--bdh-arrow) center / contain no-repeat; transition: transform 240ms var(--bdh-ease); }
.beckdesign-home .bdh-cta a.bdh-more:hover { color: var(--bdh-orange-text); }
.beckdesign-home .bdh-cta a.bdh-more:hover::after { transform: translateX(4px); }

/* ---------- Breakpoints ---------- */
@media (max-width: 47.99em) {
	.beckdesign-home .e-con.bdh-hero-meta { display: none; }
	.beckdesign-home .e-con.bdh-svc { min-height: 0; grid-template-rows: auto auto auto auto; }
	.beckdesign-home .bdh-svc > .bdh-svc-title { grid-row: 2; margin-top: 1rem; }
	.beckdesign-home .bdh-svc > .bdh-svc-desc { grid-row: 3; min-height: 0; }
	.beckdesign-home .bdh-svc > .bdh-svc-links { grid-row: 4; min-height: 0; }
	.beckdesign-home .e-con.bdh-work-meta { flex-direction: column; gap: 0.25rem; }
	.beckdesign-home .bdh-work-meta .bdh-small { text-align: left; }
	/* 360°-Scheibe randlos für größere Beschriftung */
	.beckdesign-home.e-con .bdh-dial-widget.elementor-widget figure.bdh-dial { width: calc(100% + 2 * var(--bdh-m)); max-width: none; margin-inline: calc(-1 * var(--bdh-m)); }
	.beckdesign-home .bdh-dial-labels text { font-size: 18px; }
}
@media (min-width: 48em) {
	.beckdesign-home .bdh-hero-meta > :nth-child(1) { grid-column: 1 / span 4; }
	.beckdesign-home .bdh-hero-meta > :nth-child(2) { grid-column: 5 / span 4; }
	.beckdesign-home .bdh-hero-meta > :nth-child(3) { grid-column: 9 / span 4; }
	.beckdesign-home .e-con.bdh-services { grid-template-columns: 1fr 1fr; }
	.beckdesign-home .bdh-facts > .bdh-fact { grid-column: span 3; }
	.beckdesign-home .e-con.bdh-logos { grid-template-columns: repeat(4, 1fr); }
	.beckdesign-home .bdh-cta-under { grid-template-columns: 1fr auto; column-gap: 2rem; }
	.beckdesign-home .bdh-cta-under .bdh-btn { justify-self: end; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
	.beckdesign-home .bdh-works > .bdh-work { grid-column: span 6; }
	.beckdesign-home .bdh-works > .bdh-w-schwing { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
	.beckdesign-home .bdh-sec-head > .bdh-h2 { grid-column: 1 / span 7; }
	.beckdesign-home .bdh-sec-head > .bdh-sec-aside { grid-column: 9 / -1; }
	.beckdesign-home .bdh-seq-intro { grid-column: 1 / span 4; }
	.beckdesign-home .bdh-seq-steps { grid-column: 1 / span 5; }
	.beckdesign-home .bdh-seq-links { grid-column: 9 / -1; grid-row: 3; justify-content: flex-end; }
	.beckdesign-home .bdh-seq-progress { grid-row: 4; }
	.beckdesign-home .bdh-works > .bdh-w-vfl { grid-column: 1 / span 7; }
	.beckdesign-home .bdh-works > .bdh-w-abus { grid-column: 9 / -1; margin-top: 9vw; }
	.beckdesign-home .bdh-works > .bdh-w-jhw { grid-column: 1 / span 5; }
	.beckdesign-home .bdh-works > .bdh-w-awo { grid-column: 7 / -1; margin-top: 8vw; }
	.beckdesign-home .bdh-works > .bdh-w-schwing { grid-column: 1 / span 8; }
	.beckdesign-home .bdh-works > .bdh-works-end { grid-column: 10 / -1; }
	.beckdesign-home .bdh-about-cols > .bdh-about-copy { grid-column: 1 / span 6; align-self: center; }
	.beckdesign-home .bdh-about-cols > .bdh-dial-widget { grid-column: 7 / -1; }
	/* Scheibe steht rechtsbündig und darf wie im Prototyp nach links über die Spalte hinauswachsen */
	.beckdesign-home .bdh-about-cols > .bdh-dial-widget > .elementor-widget-container { display: flex; justify-content: flex-end; }
	.beckdesign-home.e-con .bdh-dial-widget.elementor-widget figure.bdh-dial { flex: none; width: min(34rem, calc(100svh - var(--bdh-bar) - 6rem)); margin: 0; }
	.beckdesign-home .bdh-jobs > .bdh-jobs-intro { grid-column: 1 / span 5; }
	.beckdesign-home .bdh-jobs > .bdh-jobs-list { grid-column: 7 / -1; }
	.beckdesign-home .bdh-cta-row > .bdh-lead { grid-column: 1 / span 5; }
	.beckdesign-home .bdh-cta-actions { grid-column: 7 / -1; justify-content: flex-end; }
	.beckdesign-home .e-con.bdh-badges { overflow: visible; grid-auto-columns: 1fr; }
}

/* ---------- Scroll-Inszenierungen (nur mit JS, nicht im Elementor-Editor) ---------- */
@media (min-width: 48em) and (prefers-reduced-motion: no-preference) {
	/* Bühne steht 100svh, die Scrollstrecke darüber treibt die Maske (home.js) */
	.bdh-js .beckdesign-home .e-con.bdh-intro { height: 280svh; }
	.bdh-js .beckdesign-home .e-con.bdh-intro-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
	.bdh-js .beckdesign-home .bdh-intro .bdh-hero-meta { margin-top: auto; }
	.bdh-js .beckdesign-home .bdh-intro .e-con.bdh-reel { position: absolute; inset: 0 0 auto; z-index: 2; clip-path: inset(50% 50%); }
	.bdh-js .beckdesign-home .bdh-intro .bdh-reel-video .elementor-wrapper { aspect-ratio: auto; }
	.bdh-js .beckdesign-home .bdh-intro .bdh-reel > .bdh-reel-video { height: 100%; }
}
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
	.bdh-js .beckdesign-home .e-con.bdh-about-pin { height: 340svh; }
	.bdh-js .beckdesign-home .bdh-about-pin > .e-con.bdh-about-cols { position: sticky; top: 0; height: 100svh; margin-top: 0; padding-top: var(--bdh-bar); align-items: center; align-content: center; }
}

/* ---------- Bewegung (ohne JS bleibt alles sichtbar) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.bdh-js .beckdesign-home .bdh-hero-h .line > span { animation: bdh-line-in 1100ms var(--bdh-ease) both; }
	.bdh-js .beckdesign-home .bdh-hero-h .line:nth-child(2) > span { animation-delay: 120ms; }
	.bdh-js .beckdesign-home .bdh-hero-meta { animation: bdh-fade-in 900ms var(--bdh-ease) 450ms both; }
	.bdh-js .beckdesign-home .bdh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--bdh-ease), transform 1000ms var(--bdh-ease); transition-delay: calc(var(--i, 0) * 70ms); }
	.bdh-js .beckdesign-home .bdh-reveal.is-in { opacity: 1; transform: none; }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal { opacity: 1; transform: none; }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal .bdh-work-img { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--bdh-ease-io); }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal .bdh-work-img img { transform: scale(1.15); }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal.is-in .bdh-work-img { clip-path: inset(0); }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal.is-in .bdh-work-img img { transform: none; transition: transform 1600ms var(--bdh-ease); }
	.bdh-js .beckdesign-home .bdh-work.bdh-reveal.is-in:hover .bdh-work-img img { transform: scale(1.04); transition-duration: 900ms; }
	/* Das × in „3ד dreht sich einmal, wenn die Zahl steht – und bei Berührung */
	.beckdesign-home .bdh-fact.is-in .fact-x { animation: bdh-x-spin 900ms var(--bdh-ease) 1250ms both; }
	.beckdesign-home .bdh-fact:hover .fact-x { animation: bdh-x-spin 700ms var(--bdh-ease) both; }
}
@keyframes bdh-line-in { from { transform: translateY(105%); } }
@keyframes bdh-fade-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes bdh-x-spin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(135deg) scale(1.35); } 100% { transform: rotate(180deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.beckdesign-home *, .beckdesign-home *::before, .beckdesign-home *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
@media (pointer: coarse) {
	.beckdesign-home .bdh-svc-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
	.beckdesign-home .bdh-svc-links ul { gap: 0 1.25rem; }
}