/*
Theme Name: Erbe Innenausbau Child
Theme URI: https://innenausbau-erbe.de/
Description: Individuelles Block-Child-Theme für Christian Erbe Innenausbau.
Author: WSC
Version: 0.4.0
Template: ollie
Text Domain: erbe-innenausbau
Requires at least: 6.6
Requires PHP: 8.1
*/

:root {
  --erbe-anthrazit: #2b2a29;
  --erbe-magenta: #ff2aff;
  --erbe-sand: #f4f0e9;
  --erbe-warmweiss: #fffdf9;
  --erbe-grau: #66625f;
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
a { text-underline-offset: .18em; }
.wp-site-blocks { overflow: clip; }
.erbe-kicker { letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.erbe-accent-line { width: 5rem; height: .35rem; background: var(--erbe-magenta); border: 0; margin-left: 0; }
.erbe-card { height: 100%; border-top: 4px solid var(--erbe-magenta); box-shadow: 0 14px 34px rgba(43,42,41,.08); }
.erbe-project { overflow: hidden; }
.erbe-project img { transition: transform .35s ease; }
.erbe-project:hover img { transform: scale(1.025); }
.erbe-sticky-cta { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; }
.erbe-sticky-cta .wp-block-button__link { box-shadow: 0 10px 30px rgba(43,42,41,.25); }
@media (min-width: 782px) { .erbe-sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .erbe-project img { transition: none; } }

.erbe-before-after { margin: 2rem 0; }
.erbe-before-after__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--erbe-sand); }
.erbe-before-after__stage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.erbe-before-after__after { position: absolute; inset: 0; }
.erbe-before-after__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--erbe-position)) 0 0); }
.erbe-before-after__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--erbe-position); width: 3px; background: var(--erbe-magenta); transform: translateX(-50%); pointer-events: none; }
.erbe-before-after__handle::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--erbe-anthrazit); color: #fff; transform: translate(-50%,-50%); font-weight: 700; }
.erbe-before-after__range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.erbe-before-after__stage:focus-within { outline: 3px solid var(--erbe-magenta); outline-offset: 3px; }
.erbe-before-after__label { position: absolute; z-index: 2; top: 1rem; padding: .4rem .7rem; background: rgba(43,42,41,.82); color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.erbe-before-after__label--before { left: 1rem; }
.erbe-before-after__label--after { right: 1rem; }
.erbe-before-after figcaption { margin-top: .6rem; color: var(--erbe-grau); font-size: .9rem; }

.erbe-video { margin: 2rem auto; max-width: 28rem; }
.erbe-video__preview { width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 1rem; background: var(--erbe-anthrazit); color: #fff; cursor: pointer; box-shadow: 0 16px 38px rgba(43,42,41,.2); }
.erbe-video__visual { position: relative; display: grid; place-items: center; min-height: 34rem; background: linear-gradient(155deg,#181716 0%,#35312e 70%,#5b154f 100%); }
.erbe-video__visual img { width: min(72%,18rem); height: auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.erbe-video__play { position: absolute; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; padding-left: .25rem; border-radius: 50%; background: var(--erbe-magenta); color: var(--erbe-anthrazit); font-size: 1.8rem; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.erbe-video__prompt { display: block; padding: 1rem 1.25rem; font-weight: 700; }
.erbe-video__preview:hover .erbe-video__play { transform: scale(1.06); }
.erbe-video__preview:focus-visible { outline: 3px solid var(--erbe-magenta); outline-offset: 4px; }
.erbe-video__dialog { width: min(92vw,34rem); padding: 2rem; border: 0; border-radius: 1rem; color: var(--erbe-anthrazit); box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.erbe-video__dialog::backdrop { background: rgba(20,18,17,.74); }
.erbe-video__dialog h2 { margin-top: 0; padding-right: 2rem; }
.erbe-video__close { position: absolute; top: .65rem; right: .75rem; border: 0; background: transparent; font-size: 2rem; cursor: pointer; }
.erbe-video__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.erbe-video__cancel,.erbe-video__load { padding: .75rem 1rem; border: 2px solid var(--erbe-anthrazit); border-radius: .35rem; font: inherit; font-weight: 700; cursor: pointer; }
.erbe-video__cancel { background: #fff; color: var(--erbe-anthrazit); }
.erbe-video__load { background: var(--erbe-anthrazit); color: #fff; }
.erbe-video__frame { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 1rem; background: #000; }
.erbe-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.erbe-video figcaption { margin-top: .6rem; color: var(--erbe-grau); font-size: .9rem; }
@media (max-width: 500px) { .erbe-video__visual { min-height: 28rem; } }