/* Uebersicht /referenzen/ (6.11.2026), gebaut von build/referenzen.py (uebersicht).
   Kopf mit der Wand der neun Startseiten, Bento in den Farben der Kunden mit
   Live-Rundgang beim Ueberfahren, Stimmen, Akquire-Band. Praefix ru-. */

.dt-land .ru-kopf { position: relative; overflow: hidden; isolation: isolate; background: #0b1424; color: #fff;
  padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5.5rem); }
.dt-land .ru-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 12% 30%, rgba(0, 186, 235, .18), transparent 62%),
              linear-gradient(90deg, #0b1424 0%, #0b1424 36%, rgba(11, 20, 36, .86) 52%, rgba(11, 20, 36, .2) 78%, rgba(11, 20, 36, .55) 100%); }
.dt-land .ru-kopf::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, #0b1424); }
.dt-land .ru-kopf__inhalt { position: relative; max-width: 1240px; }
.dt-land .ru-kopf h1 { color: #fff; max-width: 13ch; margin: 1.1rem 0 0; font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.dt-land .ru-kopf h1 .dt-accent-gradient { background-image: linear-gradient(90deg, #7ad8f4, #00baeb 55%, #2f86c7); }
.dt-land .ru-kopf__lead { max-width: 34rem; margin: 1.5rem 0 0; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, .74); }
.dt-land .ru-kopf__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.dt-land .ru-kopf__logos { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; max-width: 36rem; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none; }
.dt-land .ru-kopf__logos a { display: flex; align-items: center; justify-content: center; height: 2.6rem; padding: 0 .9rem; border-radius: 10px;
  background: rgba(255, 255, 255, .94); transition: transform .2s ease, background .2s ease; }
.dt-land .ru-kopf__logos a:hover { transform: translateY(-2px); background: #fff; }
.dt-land .ru-kopf__logos img { display: block; height: 18px; width: auto; max-width: 92px; object-fit: contain; }

.dt-land .ru-kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 600;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #7ad8f4; }
.dt-land .ru-kicker i { width: .5rem; height: .5rem; border-radius: 50%; background: #00baeb; box-shadow: 0 0 0 4px rgba(0, 186, 235, .2); }

.dt-land .ru-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.35rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.dt-land .ru-knopf svg { width: 1rem; height: 1rem; }
.dt-land .ru-knopf--hell { background: #fff; color: #0b1424; }
.dt-land .ru-knopf--hell:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 186, 235, .55); }
.dt-land .ru-knopf--rand { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.dt-land .ru-knopf--rand:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.dt-land .ru-knopf:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #00baeb; }

/* Die Wand: drei Spalten, schraeg, die mittlere laeuft gegen die beiden aeusseren */
.dt-land .ru-wand { position: absolute; z-index: -2; top: -14%; right: -8%; width: min(64vw, 980px); height: 128%; pointer-events: none; perspective: 1600px; }
.dt-land .ru-wand__ebene { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; height: 100%;
  transform: rotateX(18deg) rotateY(-16deg) rotateZ(8deg); transform-origin: 60% 40%; }
.dt-land .ru-wand__spalte { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; animation: ru-hoch 64s linear infinite; }
.dt-land .ru-wand__spalte--2 { animation-name: ru-runter; animation-duration: 76s; margin-top: -30%; }
.dt-land .ru-wand__spalte--3 { animation-duration: 70s; margin-top: -12%; }
.dt-land .ru-wand__band { display: flex; flex-direction: column; gap: 1.1rem; }
.dt-land .ru-wand__kachel { display: block; border-radius: 12px; overflow: hidden; background: #fff; pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .75), 0 0 80px -30px var(--a); }
.dt-land .ru-wand__leiste { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; background: #eef1f5; }
.dt-land .ru-wand__leiste i { width: 6px; height: 6px; border-radius: 50%; background: #d4dae2; }
.dt-land .ru-wand__leiste em { margin-left: 6px; font-style: normal; font-size: 9px; color: #69727e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-land .ru-wand__kachel img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 625; object-fit: cover; object-position: top; }
@keyframes ru-hoch { from { transform: translateY(0); } to { transform: translateY(calc(-50% - .55rem)); } }
@keyframes ru-runter { from { transform: translateY(calc(-50% - .55rem)); } to { transform: translateY(0); } }

/* Akquire */
.dt-land .ru-ak { padding-block: clamp(3.5rem, 7vw, 6rem); background: #0b1424; color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.dt-land .ru-ak::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 100% 50%, rgba(0, 186, 235, .2), transparent 70%); }
.dt-land .ru-ak__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dt-land .ru-ak h2 { margin: 1rem 0 0; color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.02; letter-spacing: -.045em; }
.dt-land .ru-ak h2 .dt-accent-gradient { background-image: linear-gradient(90deg, #7ad8f4, #00baeb); }
.dt-land .ru-ak__text p { max-width: 30rem; margin: 1.2rem 0 1.8rem; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.dt-land .ru-ak__wand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.dt-land .ru-ak__logo { display: flex; align-items: center; justify-content: center; min-width: 0; height: 5.2rem; padding: 0 1rem; border-radius: 14px; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease; }
.dt-land .ru-ak__logo:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #00baeb, 0 20px 34px -16px rgba(0, 186, 235, .5); }
.dt-land .ru-ak__logo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #00baeb; }
.dt-land .ru-ak__logo img { display: block; max-width: 100%; max-height: 2rem; width: auto; height: auto; object-fit: contain; }

.dt-land .ru-ak__logo--alle { gap: .5rem; background: transparent; color: #fff; font: 600 .95rem/1.2 var(--font-display); text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.dt-land .ru-ak__logo--alle svg { width: 1rem; height: 1rem; }
.dt-land .ru-ak__logo--alle:hover { box-shadow: inset 0 0 0 1.5px #00baeb; }
.dt-land .ru-ak__logo--web img { max-height: 1.8rem; }
.dt-land .ru-ak__raster--zwei { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(255, 255, 255, .1); }
.dt-land .ru-ak h3 { margin: 1rem 0 0; color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.04; letter-spacing: -.04em; }
.dt-land .ru-ak h3 .dt-accent-gradient { background-image: linear-gradient(90deg, #7ad8f4, #00baeb); }
.dt-land .ru-kopf__logos img { width: 76px; max-width: none; }

/* Der Rundgang. Grundform ohne JS: Kapitel untereinander, jedes in seinen Farben.
   Mit .rx--an (JS, keine reduzierte Bewegung) steht die Buehne still und die Kapitel wechseln. */
.dt-land .rx { position: relative; background: #05080f; color: #fff; }
.dt-land .rx__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dt-land .rx__leiste, .dt-land .rx__hinweis { display: none; }
.dt-land .rx-k { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); }
.dt-land .rx-k__hg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(70% 90% at 78% 30%, color-mix(in srgb, var(--b) 55%, transparent), transparent 62%),
              radial-gradient(60% 70% at 10% 100%, color-mix(in srgb, var(--a) 70%, transparent), transparent 70%),
              linear-gradient(150deg, color-mix(in srgb, var(--a) 62%, #05080f), color-mix(in srgb, var(--a) 22%, #05080f) 70%); }
.dt-land .rx-k__hg::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%); }
.dt-land .rx-k__nr { position: absolute; right: -2vw; bottom: -6vw; font: 700 clamp(14rem, 34vw, 32rem)/.8 var(--font-display); letter-spacing: -.08em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09); user-select: none; }
.dt-land .rx-k__raster { position: relative; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.dt-land .rx-k__text { min-width: 0; }
.dt-land .rx-k__kicker { display: flex; align-items: center; gap: .7rem; margin: 0; font: 600 .78rem/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.dt-land .rx-k__kicker span { color: #fff; }
.dt-land .rx-k__kicker i { width: 2.2rem; height: 1px; background: rgba(255, 255, 255, .4); }
.dt-land .rx-k__logo { display: inline-flex; align-items: center; height: 3rem; margin-top: 1.4rem; padding: 0 1.1rem; border-radius: 12px; background: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.dt-land .rx-k__logo img { display: block; height: 24px; width: 120px; object-fit: contain; object-position: left; }
.dt-land .rx-k__zahl { margin: clamp(1.2rem, 2.5vw, 2rem) 0 0; font: 600 clamp(4.2rem, 9.5vw, 8.6rem)/.88 var(--font-display); letter-spacing: -.06em; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px color-mix(in srgb, var(--b) 60%, transparent); }
.dt-land .rx-k__titel { max-width: 30rem; margin: 1rem 0 0; font: 500 clamp(1.2rem, 1.9vw, 1.6rem)/1.3 var(--font-display); letter-spacing: -.02em; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.dt-land .rx-k__titel .dt-accent-gradient { background-image: linear-gradient(90deg, #fff, color-mix(in srgb, var(--b) 45%, #fff)); }
.dt-land .rx-k__werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 32rem; margin: clamp(1.5rem, 3vw, 2.2rem) 0 0; padding: 1.1rem 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .16); }
.dt-land .rx-k__werte li { min-width: 0; }
.dt-land .rx-k__werte b { display: block; font: 600 clamp(1.2rem, 1.8vw, 1.55rem)/1.1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.dt-land .rx-k__werte span { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .62); }
.dt-land .rx-k__stimme { display: flex; gap: .85rem; align-items: flex-start; max-width: 30rem; margin: clamp(1.4rem, 2.6vw, 2rem) 0 0; }
.dt-land .rx-k__stimme img { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.dt-land .rx-k__stimme p { margin: 0; font: italic 400 1.12rem/1.35 var(--font-serif); color: #fff; }
.dt-land .rx-k__stimme cite { display: block; margin-top: .45rem; font: normal 400 .8rem/1.4 var(--font-body); color: rgba(255, 255, 255, .62); }
.dt-land .rx-k__stimme cite b { color: #fff; font-weight: 600; }
.dt-land .rx-k__knopf { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Die Bildflaeche: Fenster mit Film, Telefon davor, das Stueck aus der Fallstudie darueber */
.dt-land .rx-k__bild { position: relative; min-width: 0; aspect-ratio: 1.22; }
.dt-land .rx-k__fenster { position: absolute; top: 12%; right: 0; width: 90%; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -30px rgba(0, 0, 0, .75), 0 0 120px -40px var(--b);
  transform: translate3d(0, calc(var(--p, .5) * -40px + 20px), 0); }
.dt-land .rx-k__leiste { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f2f4f7; border-bottom: 1px solid #e4e8ee; }
.dt-land .rx-k__leiste i { width: 8px; height: 8px; border-radius: 50%; background: #d4dae2; }
.dt-land .rx-k__leiste em { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: #fff; font-style: normal; font-size: 11.5px; color: #474f5b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-land .rx-k__leiste em img { width: 12px; height: 12px; border-radius: 3px; }
.dt-land .rx-k__schirm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.dt-land .rx-k__schirm img, .dt-land .rx-k__schirm video, .dt-land .rx-k__telschirm img, .dt-land .rx-k__telschirm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dt-land .rx-k video { opacity: 0; transition: opacity .6s ease; }
.dt-land .rx-k video.rx-laeuft { opacity: 1; }
.dt-land .rx-k__telefon { position: absolute; left: 0; bottom: 0; z-index: 2; width: 25%; padding: 7px; border-radius: 30px; background: #0b0f17;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 40px 70px -24px rgba(0, 0, 0, .8); transform: translate3d(0, calc(var(--p, .5) * -70px + 35px), 0); }
.dt-land .rx-k__telschirm { position: relative; aspect-ratio: 390 / 820; overflow: hidden; border-radius: 24px; background: #fff; }
.dt-land .rx-k__ding { position: absolute; z-index: 3; margin: 0; top: 0; right: -3%; width: 44%; transform: translate3d(0, calc(var(--p, .5) * -110px + 55px), 0) rotate(3deg); }
.dt-land .rx-k__ding img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 60px -20px rgba(0, 0, 0, .7); }
.dt-land .rx-k__ding figcaption { display: inline-block; margin-top: .6rem; padding: .32rem .7rem; border-radius: 999px; font: 600 .72rem/1.3 var(--font-display); color: #fff;
  background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.dt-land .rx-k__ding--rund { width: 30%; top: -4%; right: -2%; }
.dt-land .rx-k__ding--rund img { border-radius: 50%; background: #fff; }
.dt-land .rx-k__ding--treffer { width: 62%; top: auto; bottom: 6%; right: -6%; }
.dt-land .rx-k__ding--hoch { width: 24%; top: -6%; right: -4%; }
.dt-land .rx-k__ding--lang { width: 30%; top: -8%; right: -4%; }
.dt-land .rx-k__ding--lang img { aspect-ratio: 800 / 1000; object-fit: cover; object-position: top; }
.dt-land .rx-k--ohne-telefon .rx-k__fenster { width: 84%; right: auto; left: 0; }
.dt-land .rx-k--ohne-telefon .rx-k__ding { width: 52%; top: auto; bottom: 0; right: -4%; }

/* Buehne mit JS */
.dt-land .rx.rx--an { height: calc(var(--n) * 110vh + 100vh); height: calc(var(--n) * 110svh + 100svh); }
.dt-land .rx--an .rx__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.dt-land .rx--an .rx__kapitel { position: absolute; inset: 0; }
.dt-land .rx--an .rx-k { position: absolute; inset: 0; display: flex; align-items: center; padding-block: 5.5rem 3rem; visibility: hidden; }
.dt-land .rx--an .rx-k > .ml-wrap { width: 100%; }
.dt-land .rx--an .rx-k__hg { opacity: 0; transition: opacity .9s ease; }
.dt-land .rx--an .rx-k.ist-da { visibility: visible; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__hg { opacity: 1; }
.dt-land .rx--an .rx-k__text > *, .dt-land .rx--an .rx-k__bild > * { opacity: 0; transition: opacity .55s ease, translate .75s cubic-bezier(.2, .7, .2, 1); translate: 0 40px; }
.dt-land .rx--an .rx-k.ist-weg .rx-k__text > *, .dt-land .rx--an .rx-k.ist-weg .rx-k__bild > * { translate: 0 -40px; transition-duration: .4s, .5s; transition-delay: 0s !important; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > *, .dt-land .rx--an .rx-k.ist-aktiv .rx-k__bild > * { opacity: 1; translate: 0 0; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > :nth-child(2) { transition-delay: .06s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > :nth-child(3) { transition-delay: .12s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > :nth-child(4) { transition-delay: .18s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > :nth-child(5) { transition-delay: .24s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__text > :nth-child(n+6) { transition-delay: .3s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__fenster { transition-delay: .1s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__telefon { transition-delay: .25s; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__ding { transition-delay: .38s; }
.dt-land .rx--an .rx-k__nr { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; transform: translateY(8%); opacity: 0; }
.dt-land .rx--an .rx-k.ist-aktiv .rx-k__nr { transform: none; opacity: 1; }

/* Leiste rechts: neun Striche, der aktive fuellt sich mit dem Fortschritt */
.dt-land .rx--an .rx__leiste { position: absolute; z-index: 5; right: clamp(.8rem, 2vw, 2rem); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: .35rem; }
.dt-land .rx__marke { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; min-height: 28px; color: rgba(255, 255, 255, .5); text-decoration: none; }
.dt-land .rx__marke em { font: 600 .74rem/1 var(--font-display); font-style: normal; letter-spacing: .02em; opacity: 0; translate: 6px 0; transition: opacity .3s ease, translate .3s ease; white-space: nowrap; }
.dt-land .rx__leiste:hover .rx__marke em, .dt-land .rx__marke.ist-aktiv em, .dt-land .rx__marke:focus-visible em { opacity: 1; translate: 0 0; }
.dt-land .rx__marke.ist-aktiv { color: #fff; }
.dt-land .rx__strich { position: relative; display: block; width: 3px; height: 22px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .22); }
.dt-land .rx__strich i { position: absolute; inset: 0; background: #fff; transform-origin: top; transform: scaleY(0); }
.dt-land .rx__marke.ist-vorbei .rx__strich i { transform: scaleY(1); background: rgba(255, 255, 255, .6); }
.dt-land .rx__marke.ist-aktiv .rx__strich i { transform: scaleY(var(--p, 0)); }
.dt-land .rx__marke:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #00baeb; border-radius: 6px; }
.dt-land .rx--an .rx__hinweis { position: absolute; z-index: 5; left: 50%; bottom: 1.1rem; translate: -50% 0; display: flex; align-items: center; gap: .5rem; margin: 0;
  font: 600 .7rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); transition: opacity .5s ease; }
.dt-land .rx__hinweis i { width: 1px; height: 22px; background: linear-gradient(rgba(255, 255, 255, .7), transparent); animation: rx-tropf 1.8s ease-in-out infinite; }
.dt-land .rx--an.rx--weiter .rx__hinweis { opacity: 0; }
@keyframes rx-tropf { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 1080px) {
  .dt-land .ru-ak__raster { grid-template-columns: minmax(0, 1fr); }
  .dt-land .ru-wand { width: 90vw; right: -30%; opacity: .55; }
  .dt-land .rx-k__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .dt-land .rx-k__stimme { display: none; }
}
@media (max-width: 820px) {
  .dt-land .rx-k__raster { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .dt-land .rx-k__zahl { font-size: clamp(3.4rem, 17vw, 5rem); margin-top: .9rem; }
  .dt-land .rx-k__titel { font-size: 1.08rem; margin-top: .6rem; }
  .dt-land .rx-k__logo { height: 2.4rem; margin-top: .9rem; padding: 0 .8rem; }
  .dt-land .rx-k__logo { transform: scale(.86); transform-origin: left center; }
  .dt-land .rx-k__werte { margin-top: 1rem; padding-top: .8rem; gap: .6rem; }
  .dt-land .rx-k__werte b { font-size: 1.05rem; }
  .dt-land .rx-k__werte span { font-size: .72rem; }
  .dt-land .rx-k__knopf { margin-top: 1.1rem; min-height: 44px; font-size: .9rem; }
  /* Auf dem Telefon traegt das Telefon die Buehne, das Fenster tritt zurueck */
  .dt-land .rx-k__bild { aspect-ratio: auto; height: min(46svh, 420px); }
  .dt-land .rx-k__fenster { top: 8%; width: 78%; right: 0; opacity: .9; }
  .dt-land .rx-k__telefon { left: 6%; width: auto; height: 100%; aspect-ratio: 404 / 834; }
  .dt-land .rx-k__telschirm { height: 100%; aspect-ratio: auto; }
  .dt-land .rx-k__ding { width: 46%; right: -2%; top: auto; bottom: 4%; }
  .dt-land .rx-k__ding--rund { width: 32%; top: 2%; bottom: auto; }
  .dt-land .rx-k__ding--hoch, .dt-land .rx-k__ding--lang { width: 26%; top: 0; bottom: auto; }
  .dt-land .rx-k__ding--treffer { width: 70%; }
  .dt-land .rx-k__ding figcaption { display: none; }
  .dt-land .rx-k--ohne-telefon .rx-k__fenster { top: 0; width: 92%; }
  .dt-land .rx--an .rx-k { align-items: flex-start; padding-block: 5rem 2.5rem; }
  .dt-land .rx--an .rx-k__bild { height: min(40svh, 380px); }
  /* Leiste oben als Segmente, wie Geschichten */
  .dt-land .rx--an .rx__leiste { top: 4.6rem; right: 16px; left: 16px; translate: none; flex-direction: row; gap: 4px; }
  .dt-land .rx__marke { flex: 1 1 0; min-height: 16px; justify-content: stretch; }
  .dt-land .rx__marke em { display: none; }
  .dt-land .rx__strich { width: 100%; height: 3px; }
  .dt-land .rx__strich i { transform-origin: left; transform: scaleX(0); }
  .dt-land .rx__marke.ist-vorbei .rx__strich i { transform: scaleX(1); }
  .dt-land .rx__marke.ist-aktiv .rx__strich i { transform: scaleX(var(--p, 0)); }
  .dt-land .rx--an .rx__hinweis { display: none; }
  .dt-land .rx-k__nr { font-size: 16rem; bottom: -2rem; }
}
@media (max-width: 720px) {
  .dt-land .ru-kopf::before { background: linear-gradient(180deg, rgba(11, 20, 36, .55) 0%, #0b1424 62%); }
  .dt-land .ru-wand { top: -6%; right: -40%; width: 150vw; height: 70%; opacity: .7; }
  .dt-land .ru-kopf { padding-top: clamp(13rem, 58vw, 17rem); }
  .dt-land .ru-ak__wand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-land .ru-ak__logo { height: 4.4rem; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .dt-land .rx-k__werte { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-land .ru-wand__spalte { animation: none; }
  .dt-land .ru-knopf:hover, .dt-land .ru-ak__logo:hover, .dt-land .ru-kopf__logos a:hover { transform: none; }
  .dt-land .rx-k__fenster, .dt-land .rx-k__telefon, .dt-land .rx-k__ding { transform: none; }
  .dt-land .rx__hinweis i { animation: none; }
}

/* Nach den ersten Fotos (6.11.2026): Leiste unten statt rechts, lange Zahlen kleiner,
   das Stueck aus der Fallstudie bleibt innerhalb der Spalte, flache Bildschirme ohne Zitat */
.dt-land .rx-k__zahl { white-space: nowrap; font-size: clamp(4rem, 8.6vw, 7.8rem); }
.dt-land .rx-k__zahl--lang { font-size: clamp(3.2rem, 6.4vw, 5.8rem); }
.dt-land .rx-k__ding { right: 0; }
.dt-land .rx-k__ding--treffer { right: -2%; }
.dt-land .rx--an .rx-k { padding-block: 5.5rem 5rem; }
@media (min-width: 821px) {
  .dt-land .rx--an .rx__leiste { top: auto; bottom: 1.4rem; left: 50%; right: auto; translate: -50% 0; width: min(1180px, calc(100% - 64px)); flex-direction: row; gap: .5rem; }
  .dt-land .rx__marke { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: .5rem; min-height: 0; padding: .4rem 0; }
  .dt-land .rx__marke em { opacity: .55; translate: none; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }
  .dt-land .rx__marke:hover em, .dt-land .rx__marke.ist-aktiv em { opacity: 1; }
  .dt-land .rx__strich { width: 100%; height: 3px; }
  .dt-land .rx__strich i { transform-origin: left; transform: scaleX(0); }
  .dt-land .rx__marke.ist-vorbei .rx__strich i { transform: scaleX(1); }
  .dt-land .rx__marke.ist-aktiv .rx__strich i { transform: scaleX(var(--p, 0)); }
  .dt-land .rx--an .rx__hinweis { display: none; }
}
@media (min-width: 821px) and (max-height: 860px) {
  .dt-land .rx-k__stimme { display: none; }
  .dt-land .rx-k__logo { margin-top: 1rem; }
  .dt-land .rx-k__zahl { margin-top: 1rem; }
}
@media (min-width: 821px) and (max-height: 700px) {
  .dt-land .rx-k__werte { display: none; }
}
@media (max-width: 820px) {
  .dt-land .rx--an .rx-k { padding-top: 6.1rem; }
  .dt-land .ru-ak__wand > .ru-ak__logo--web:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ---------- Akt II: Akquire (6.11.2026) ---------- */
.dt-land .rx-k__einheit { margin: .5rem 0 0; font: 600 .82rem/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--b) 40%, #fff); }
.dt-land .rx-k--ak .rx-k__titel { margin-top: 1.1rem; }
.dt-land .rx-k__stimme--ak { padding-left: 1rem; border-left: 2px solid color-mix(in srgb, var(--b) 70%, #fff); }
.dt-land .rx-k__himmel { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; object-fit: cover; object-position: center bottom; opacity: .85;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.dt-land .rx-k__fenster--ak { top: 6%; right: 0; width: 94%; }
.dt-land .rx-k__auswertung { position: relative; background: #fff; }
.dt-land .rx-k__auswertung img { display: block; width: 100%; height: auto; }
.dt-land .rx-k__person { position: absolute; z-index: 3; left: -6%; bottom: -4%; width: 46%; margin: 0; transform: translate3d(0, calc(var(--p, .5) * -60px + 30px), 0); }
.dt-land .rx-k__person img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.dt-land .rx-k__person figcaption { position: absolute; left: 18%; bottom: 8%; padding: .55rem .85rem; border-radius: 12px; font-size: .78rem; line-height: 1.35; color: rgba(255, 255, 255, .78);
  background: rgba(5, 8, 15, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dt-land .rx-k__person figcaption b { display: block; font: 600 .92rem/1.2 var(--font-display); color: #fff; }
.dt-land .rx-k__antworten { position: absolute; z-index: 2; right: -2%; bottom: 2%; width: 56%; margin: 0; padding: .9rem; border-radius: 16px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .7); transform: translate3d(0, calc(var(--p, .5) * -100px + 50px), 0) rotate(-2deg); }
.dt-land .rx-k__antworten > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.dt-land .rx-k__antworten span { display: flex; align-items: center; justify-content: center; height: 2.6rem; padding: 0 .4rem; border-radius: 8px; background: #f6f7f9; }
.dt-land .rx-k__antworten img { display: block; max-width: 100%; max-height: 1.2rem; width: auto; height: auto; object-fit: contain; }
.dt-land .rx-k__antworten figcaption { margin-top: .7rem; font: 600 .74rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: #474f5b; text-align: center; }
.dt-land .rx-k__bild--ohne-fenster .rx-k__antworten { top: 6%; bottom: auto; right: 0; width: 86%; transform: translate3d(0, calc(var(--p, .5) * -60px + 30px), 0) rotate(-1.5deg); }
.dt-land .rx-k__bild--ohne-fenster .rx-k__antworten span { height: 3.2rem; }
.dt-land .rx-k__bild--ohne-fenster .rx-k__person { left: -4%; bottom: -6%; width: 52%; }
.dt-land .rx-k--ak .rx-k__bild:not(.rx-k__bild--ohne-fenster) .rx-k__person { left: auto; right: -4%; bottom: -8%; width: 40%; }
.dt-land .rx-k--ak .rx-k__bild:not(.rx-k__bild--ohne-fenster):has(.rx-k__antworten) .rx-k__person { right: auto; left: -6%; }

/* Zwischentitel */
.dt-land .rx-zwischen { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; background: #05080f; color: #fff; text-align: center; }
.dt-land .rx-zwischen__hg { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 50% at 50% 55%, rgba(0, 186, 235, .28), transparent 70%), radial-gradient(70% 60% at 50% 120%, rgba(1, 94, 165, .5), transparent 70%); }
.dt-land .rx-zwischen__hg::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 80%); }
.dt-land .rx-zwischen__inhalt { padding-block: 6rem; }
.dt-land .rx-zwischen__marke { display: block; height: 30px; width: auto; margin: 0 auto 2rem; }
.dt-land .rx-zwischen h2 { max-width: 16ch; margin: 0 auto; color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.dt-land .rx-zwischen h2 .dt-accent-gradient { background-image: linear-gradient(90deg, #7ad8f4, #00baeb); }
.dt-land .rx-zwischen p { max-width: 38rem; margin: 1.6rem auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .72); }
.dt-land .rx-zwischen__werkzeuge { display: flex; justify-content: center; gap: .6rem; }
.dt-land .rx-zwischen .tech { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; background: #fff; color: #10141a; font: 600 .82rem/1 var(--font-display); }
.dt-land .rx-zwischen .tech img { width: 16px; height: 16px; object-fit: contain; }
.dt-land .rx--ak { background: #05080f; }

/* ---------- Akt III: Und so weiter ---------- */
.dt-land .rw { padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); background: var(--color-paper); overflow: hidden; }
.dt-land .rw__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dt-land .rw__kopf .ml-h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: -.05em; }
.dt-land .rw-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.dt-land .rw-karte { min-width: 0; }
.dt-land .rw-karte > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px; background: #fff; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-subtle), 0 20px 40px -32px rgba(16, 20, 26, .35); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.dt-land .rw-karte > a:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--border-subtle), 0 30px 60px -30px color-mix(in srgb, var(--a) 55%, transparent); }
.dt-land .rw-karte > a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #00baeb; }
.dt-land .rw-karte__bild { padding: 1rem 1rem 0; background: linear-gradient(160deg, color-mix(in srgb, var(--a) 85%, #fff), color-mix(in srgb, var(--a) 70%, #000)); }
.dt-land .rw-karte__bild .rx-k__leiste { height: 22px; border-radius: 9px 9px 0 0; }
.dt-land .rw-karte__bild .rx-k__leiste em { font-size: 10px; padding: 1px 8px; }
.dt-land .rw-karte__bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.dt-land .rw-karte__text { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem 1.3rem; flex: 1 1 auto; }
.dt-land .rw-karte__text small { font-size: .76rem; color: var(--color-gray-500); }
.dt-land .rw-karte__text h3 { margin: 0; font: 600 1.05rem/1.25 var(--font-display); letter-spacing: -.02em; color: var(--text-strong, #10141a); }
.dt-land .rw-karte blockquote { margin: auto 0 0; padding-top: .6rem; }
.dt-land .rw-karte blockquote p { margin: 0; font: italic 400 1.02rem/1.35 var(--font-serif); color: var(--text-strong, #10141a); }
.dt-land .rw-karte cite { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; font-style: normal; font-size: .76rem; line-height: 1.3; color: var(--color-gray-500); }
.dt-land .rw-karte cite img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--color-mist); }
.dt-land .rw-karte cite b { display: block; font: 600 .84rem/1.2 var(--font-display); color: var(--text-strong, #10141a); }

.dt-land .rw-baender { margin-top: clamp(3rem, 6vw, 4.5rem); }
.dt-land .rw-baender__titel { margin: 1.6rem auto .8rem; font: 600 .74rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-gray-500); }
.dt-land .rw-band { display: flex; width: max-content; gap: .8rem; }
.dt-land .rw-band__spur { display: flex; gap: .8rem; margin: 0; padding: 0; list-style: none; animation: rw-lauf 90s linear infinite; }
.dt-land .rw-band--rechts .rw-band__spur { animation-direction: reverse; animation-duration: 70s; }
.dt-land .rw-band:hover .rw-band__spur, .dt-land .rw-band:focus-within .rw-band__spur { animation-play-state: paused; }
.dt-land .rw-band li a { display: flex; flex-direction: column; gap: .3rem; width: 19rem; height: 100%; padding: 1rem 1.15rem; border-radius: 16px; background: #fff; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-subtle); transition: box-shadow .2s ease, transform .2s ease; }
.dt-land .rw-band li a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--color-gray-400), 0 14px 26px -18px rgba(16, 20, 26, .35); }
.dt-land .rw-band li a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #00baeb; }
.dt-land .rw-band small { font-size: .72rem; color: var(--color-gray-500); }
.dt-land .rw-band b { font: 600 .95rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text-strong, #10141a); }
.dt-land .rw-band em { margin-top: auto; font-style: normal; font-size: .74rem; color: var(--color-blue); }
@keyframes rw-lauf { from { transform: translateX(0); } to { transform: translateX(calc(-100% - .8rem)); } }
.dt-land .rw-stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.dt-land .rw-stimmen li { padding-left: 1rem; border-left: 2px solid var(--color-cyan); }
.dt-land .rw-stimmen p { margin: 0; font: italic 400 1.15rem/1.35 var(--font-serif); color: var(--text-strong, #10141a); }
.dt-land .rw-stimmen cite { display: block; margin-top: .6rem; font-style: normal; font-size: .8rem; color: var(--color-gray-500); }
.dt-land .rw-stimmen cite b { color: var(--text-strong, #10141a); }

@media (max-width: 1080px) {
  .dt-land .rw-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-land .rw-stimmen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .dt-land .rx-k__einheit { font-size: .7rem; margin-top: .3rem; }
  .dt-land .rx-k--ak .rx-k__titel { font-size: 1rem; }
  .dt-land .rx-k--ak .rx-k__stimme { display: none; }
  .dt-land .rx-k__fenster--ak { top: 4%; width: 100%; opacity: 1; }
  .dt-land .rx-k--ak .rx-k__bild .rx-k__person, .dt-land .rx-k--ak .rx-k__bild:not(.rx-k__bild--ohne-fenster) .rx-k__person { left: auto; right: -4%; bottom: -10%; width: 50%; }
  .dt-land .rx-k__person figcaption { display: none; }
  .dt-land .rx-k__antworten { width: 70%; left: -2%; right: auto; bottom: 0; padding: .6rem; }
  .dt-land .rx-k__antworten > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-land .rx-k__antworten span { height: 2rem; }
  .dt-land .rx-k__antworten span:nth-child(n+7) { display: none; }
  .dt-land .rx-k__bild--ohne-fenster .rx-k__antworten { width: 100%; left: 0; }
}
@media (max-width: 720px) {
  .dt-land .rw-karten { grid-template-columns: minmax(0, 1fr); }
  .dt-land .rw-band li a { width: 15.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-land .rw-band { width: auto; overflow-x: auto; }
  .dt-land .rw-band__spur { animation: none; }
  .dt-land .rw-band__spur[aria-hidden] { display: none; }
  .dt-land .rx-k__person, .dt-land .rx-k__antworten { transform: none; }
}
/* Freisteller enden unten weich statt mit Kante; Unit8: der Himmel ueber die ganze Flaeche */
.dt-land .rx-k__person img { -webkit-mask-image: linear-gradient(#000 72%, transparent 98%); mask-image: linear-gradient(#000 72%, transparent 98%); }
.dt-land .rx-k__himmel { height: 100%; opacity: 1; filter: brightness(1.5) saturate(1.2); -webkit-mask-image: linear-gradient(transparent 5%, #000 55%); mask-image: linear-gradient(transparent 5%, #000 55%); }
.dt-land .rx-k__bild--ohne-fenster:not(:has(.rx-k__antworten)) .rx-k__person { left: 18%; width: 62%; bottom: -10%; }
@media (max-width: 820px) {
  /* Telefon: Auswertung und Portraet; die Logowand nur, wo es keine Auswertung gibt */
  .dt-land .rx-k__bild:has(.rx-k__fenster) .rx-k__antworten { display: none; }
  .dt-land .rx-k--ak .rx-k__bild .rx-k__person { width: 46%; bottom: -14%; }
  .dt-land .rx-zwischen h2 { font-size: clamp(2.2rem, 10vw, 3rem); }
}
@media (max-width: 720px) {
  /* Akt III am Telefon: die vier Karten zum Wischen statt untereinander */
  .dt-land .rw-karten { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 1rem; scrollbar-width: none; }
  .dt-land .rw-karten::-webkit-scrollbar { display: none; }
  .dt-land .rw-karte { flex: 0 0 84%; scroll-snap-align: start; }
}