/* DOSIGNY — Fallstudien und Referenzen-Übersicht: Übergangsebene der Bau-Szene, Karten mit Bauplan
 * Erstellt durch Dominik Baurhenn - DOSIGNY — https://www.dosigny.com */
.dz-l--motiv { width: 100%; height: 100%; z-index: 6; visibility: hidden; pointer-events: none; }
.dz-browser .w, .dz-rkarte .w { box-sizing: border-box; }

/* Übersicht: Jede Karte baut sich aus dem Plan ihrer eigenen Website auf */
.dz-rkopf .dz-fallkopf__titel { max-width: 20ch; text-wrap: balance; }
.dz-rkopf .dz-fallkopf__lead { max-width: 68ch; }
.dz-rkopf__zahlen { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-6); margin-top: var(--a-6); font: 600 var(--fs-mini)/1.5 var(--f-mono); letter-spacing: .04em; color: rgba(var(--c-hell-rgb),.75); }
.dz-rwand { padding-block: var(--raum); }
.dz-rwand__kopf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--a-fluss-m); align-items: end; margin-bottom: var(--a-fluss-m); }
.dz-rwand__kopf .k-h2 { margin: 0; }
.dz-rwand__kopf .dz-h-gross { font-size: clamp(1.6rem, 4.2vw, 3.4rem); text-wrap: balance; }
@media (max-width: 860px) { .dz-rwand__kopf { grid-template-columns: 1fr; } }
.dz-rwand__raster { display: grid; gap: var(--a-fluss-m) var(--a-fluss-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.dz-rkarte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.dz-rkarte__fenster { position: relative; overflow: hidden; border-radius: 12px; background: var(--c-flaeche); box-shadow: 0 0 0 1px rgba(var(--c-weiss-rgb),.12), 0 30px 70px -40px rgba(var(--c-schwarz-rgb),.9); transition: box-shadow .35s; }
.dz-rkarte:hover .dz-rkarte__fenster, .dz-rkarte:focus-within .dz-rkarte__fenster { box-shadow: 0 0 0 1px var(--c-tuerkis), 0 30px 70px -36px rgba(var(--c-tuerkis-rgb),.5); }
.dz-rkarte__sicht { position: relative; aspect-ratio: 1200 / 709; overflow: hidden; background: var(--c-bauflaeche); }
.dz-rkarte__sicht picture, .dz-rkarte__sicht img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dz-rkarte__plan { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dz-rkarte__linie { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-tuerkis); box-shadow: 0 0 16px 3px rgba(var(--c-tuerkis-rgb),.6); opacity: 0; pointer-events: none; }
/* Ohne Skript steht alles fertig da: Der Startzustand gilt erst, wenn das Skript die Wand vorbereitet hat */
.dz-rwand.is-bereit .dz-rkarte:not(.is-da) .dz-rkarte__sicht picture { clip-path: inset(0 0 100% 0); }
.dz-rwand.is-bereit .dz-rkarte:not(.is-da) .dz-rkarte__plan { opacity: 1; }
.dz-rwand.is-bereit .dz-rkarte__sicht picture { transition: clip-path 1.1s .25s var(--ease); }
.dz-rwand.is-bereit .dz-rkarte__plan { transition: opacity .7s .9s; }
.dz-rkarte.is-da .dz-rkarte__linie { animation: dz-r-linie 1.15s .25s var(--ease) both; }
@keyframes dz-r-linie { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(16rem); } }
.dz-rkarte__meta { margin: var(--a-4) 0 var(--a-1); font: 600 var(--fs-mini)/1.4 var(--f-mono); letter-spacing: .05em; color: var(--c-tuerkis); }
.dz-rkarte__titel { margin: 0; font: var(--fw-h) var(--fs-h4)/var(--lh-titel) var(--f-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.dz-rkarte__titel a { color: inherit; text-decoration: none; }
.dz-rkarte__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dz-rkarte__text { margin: var(--a-2) 0 var(--a-3); font-size: var(--fs-klein); line-height: 1.5; color: rgba(var(--c-hell-rgb),.82); }
.dz-rkarte__wege { display: flex; flex-wrap: wrap; gap: var(--a-1) var(--a-5); margin-top: auto; font-size: var(--fs-klein); font-weight: 600; }
.dz-rkarte__mehr { color: var(--c-tuerkis); }
.dz-rkarte__extern { position: relative; z-index: 2; display: inline-block; padding-block: .7rem; margin-block: -.7rem; color: rgba(var(--c-hell-rgb),.85); text-underline-offset: .2em; }
.dz-rkarte__mehr { padding-block: .7rem; margin-block: -.7rem; }
@media (prefers-reduced-motion: reduce) {
  .dz-rwand.is-bereit .dz-rkarte:not(.is-da) .dz-rkarte__sicht picture { clip-path: none; }
  .dz-rwand.is-bereit .dz-rkarte:not(.is-da) .dz-rkarte__plan { opacity: 0; }
  .dz-rkarte.is-da .dz-rkarte__linie { animation: none; }
}
@media (max-width: 480px) { .dz-naechstes__titel { font-size: clamp(1.25rem, 6.6vw, 1.75rem); hyphens: none; } }