/* The title layers scale on the same four design grids as the original. */
.titelmotiv {
  --einheit: min(calc(100vw / 2650), 1px);
  --schrift: 110; --zeile: 120; --laufweite: 2;
  --zeichen: 92; --versatz: 280; --pfeilabstand: 45;
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #151515;
}
@media (width < 1024px) {
  .titelmotiv {
    --einheit: min(calc(100vw / 1024), 1px);
    --schrift: 50; --zeile: 76; --zeichen: 68; --versatz: 190; --pfeilabstand: 25;
  }
}
@media (width < 778px) {
  .titelmotiv {
    --einheit: min(calc(100vw / 778), 1px);
    --schrift: 48; --zeile: 72; --laufweite: 0;
  }
}
@media (width < 480px) {
  .titelmotiv {
    --einheit: min(calc(100vw / 480), 1px);
    --schrift: 32; --zeile: 50; --zeichen: 60; --versatz: 120; --pfeilabstand: 15;
  }
}
.motivfolge, .motiv { position: absolute; inset: 0; }
.motivfolge { overflow: hidden; transform: translateY(var(--bildversatz, 0px)); }
.motiv { display: block; opacity: 0; }
.motiv img { width: 100%; height: 100%; display: block; object-fit: cover; }
.motiv.abgedunkelt::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 21%); }
.motiv.sichtbar { opacity: 1; }
.motiv.einblenden { animation: bildwechsel var(--dauer, 1s) cubic-bezier(.65,0,.35,1) both; }
@keyframes bildwechsel { from { opacity: 0; } to { opacity: 1; } }
.titelmarke, #titelzeilen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.titelmarke {
  top: calc(50% - var(--versatz) * var(--einheit));
  width: round(calc(var(--zeichen) * var(--einheit)), 1px);
  height: round(down, calc(var(--zeichen) * var(--einheit)), 1px);
  animation: bildwechsel 2s linear both;
}
#titelzeilen {
  width: max-content; margin: 0; padding: 0;
  font-family: Rubik, sans-serif; font-weight: 700; color: white;
  font-size: calc(var(--schrift) * var(--einheit));
  font-size: round(calc(var(--schrift) * var(--einheit)), 1px);
  line-height: calc(var(--zeile) * var(--einheit));
  line-height: round(calc(var(--zeile) * var(--einheit)), 1px);
  letter-spacing: calc(var(--laufweite) * var(--einheit));
  text-shadow: 0 calc(6 * var(--einheit)) calc(12 * var(--einheit)) rgb(0 0 0 / 41%);
  text-align: center; white-space: nowrap;
  animation: titel-ein 1s cubic-bezier(.76,0,.24,1) both;
}
@keyframes titel-ein {
  from { opacity: 0; translate: 0 calc(50 * var(--einheit)); }
  to { opacity: 1; translate: 0 0; }
}
.titelpfeil {
  position: absolute; bottom: calc(var(--pfeilabstand) * var(--einheit));
  left: 50%; transform: translateX(-50%);
  width: calc(100 * var(--einheit)); aspect-ratio: 1; color: white;
  animation: titel-ein 1s 1s cubic-bezier(.76,0,.24,1) both;
}
.titelpfeil:hover, .titelpfeil:focus { color: white; }
.titelpfeil svg { display: block; width: 100%; height: 100%; }
.untere-welle { bottom: 0; height: 50px; color: #fbfbfb; }
#kopfleiste:focus-within { z-index: 10000; }
html.menue-offen { overflow: hidden; }
.x-modal[inert] { pointer-events: none; }
.x-slide-pagination li { position: relative; }
.x-slide-pagination button {
  position: absolute; inset: -8px 0; padding: 0; border: 0;
  width: 100%; background: transparent; color: inherit; cursor: pointer;
}
.x-slide-container-viewport.can-drag, .x-slide-container-viewport.can-drag * { touch-action: pan-y; }
.x-slide-container img { -webkit-user-drag: none; }
.x-slide [data-x-effect-provider], .x-slide .mrl-2 { transition: opacity 300ms, transform 300ms; }
.x-slide .mrl-v { pointer-events: none; }
.x-slide a:is(:hover,:focus-visible) .mrl-s { opacity: 1; transform: scale(1.01); }
a:focus-visible,button:focus-visible,[role="button"]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .titelmotiv *, .x-modal, .x-modal *, .x-slide-container, .x-slide * {
    animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important;
  }
}
body:not(.archivseite) .entry-content.content { margin: 0; }
body:not(.archivseite) .hentry .entry-wrap { padding: 0; }
.titelmotiv { min-height: calc(1440 * var(--einheit)); }
@media (width < 1024px) { .titelmotiv { min-height: calc(768 * var(--einheit)); } }
@media (width < 778px) { .titelmotiv { min-height: calc(960 * var(--einheit)); } }
@media (width < 480px) { .titelmotiv { min-height: calc(720 * var(--einheit)); } }
#kopfleiste { opacity: 1; }
#kopfleiste.x-bar-fixed { top: 0; left: 0; width: 100%; }
.motiv img { transform: scale(1.0192); }
.e585-e13 p::after, .e585-e24 p::after { content: ""; display: block; height: 1lh; }
@media (scripting: enabled) {
  .x-slide-container-viewport:not(.bilder-bereit) .x-bg-layer-lower-image,
  .x-slide-container-viewport .x-slide:not(.motive-bereit) .x-bg-layer-lower-image { background-image: none; }
}
.x-image img[src="bilder/bricks-laptop-wohnraum.jpg"] { aspect-ratio: auto 2000 / 1125; }
.x-image img[src="bilder/townhouses-kleinmachnow-instagram-beitrag-smartphone.jpg"] { aspect-ratio: auto 2000 / 1916; }
.x-image img[src="bilder/the-eight-grossplakat-wohnhaus-gartenseite.jpg"] { aspect-ratio: auto 2000 / 1898; }
.x-image img[src="bilder/bricks-expose-seiten-architektur-und-innenraeume.jpg"] { aspect-ratio: auto 1920 / 1440; }
.x-image img[src="marke/Bricks-Logo-w.svg"] { aspect-ratio: auto 232 / 136; }
.x-image img[src="marke/CHIARO-logo-w.svg"] { aspect-ratio: auto 249 / 112; }
.x-image img[src="marke/Lindengaerten-Logo-w.svg"] { aspect-ratio: auto 560 / 191; }
.x-image img[src="marke/OFFICEGREEN-Logo-w.svg"] { aspect-ratio: auto 799 / 241; }
.x-image img[src="marke/PQP-Bildmarke-s.svg"] { aspect-ratio: auto 595 / 595; }
.x-image img[src="marke/PQP-Logo-schwarz.svg"] { aspect-ratio: auto 774 / 260; }
.x-image img[src="marke/PQP-Logo-weiss.svg"] { aspect-ratio: auto 774 / 260; }
.x-image img[src="marke/THK-Logo-w.svg"] { aspect-ratio: auto 264 / 155; }
.x-image img[src="marke/c2share-logo-w.svg"] { aspect-ratio: auto 280 / 62; }

@media (scripting: none) {
  #kopfleiste { position: fixed; top: 0; left: 0; }
  .x-slide-container-viewport { overflow-x: auto; touch-action: pan-x pan-y; }
  .x-slide-container-viewport:not(.is-ready) .x-slide { opacity: 1 !important; }
  .x-slide-pagination, [data-x-slide-prev], [data-x-slide-next] { display: none; }
}

.projektname { display: contents; }
.sammlungstitel {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.unterseite [data-einblenden] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .unterseite .sichtbar-werden { animation: dezent-ein 650ms cubic-bezier(.22,.61,.36,1) both; }
  @keyframes dezent-ein {
    from { opacity: 0; transform: translate(var(--ein-x, 0),var(--ein-y, 16px)); }
    to { opacity: 1; transform: none; }
  }
  [data-einblenden="slideInRight"] { --ein-x: 35px; --ein-y: 0px; }
}
.sammlungstitel { top: 0; left: 0; }
.formularstatus { display: none; }
.formularstatus:target { display: inline-flex; padding: .6em 0; }
@media (scripting: enabled) {
  [data-bildspaeter] > .x-bg > [class*="layer-"][class$="-image"] { background-image: none !important; }
}