/* Fallstudien /referenzen/<slug>/, ihre Uebersicht /referenzen/ und
   /ueber-uns/ (17.10.2026). Baut auf /branchen/branche.css auf (ml-wrap,
   ml-sec, ml-btn, ml-fenster). Ruhig: ein Gedanke je Abschnitt, echtes
   Material, gemessene Zahlen mit Quelle. */

/* Kopf einer Fallstudie */
.dt-land .rf-kopf { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.dt-land .rf-kopf__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dt-land .rf-kopf h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.03; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.dt-land .rf-logo { display: block; height: 34px; width: auto; max-width: 180px; object-fit: contain; object-position: left; margin-bottom: 1.4rem; }
.dt-land .rf-pfad { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; font-size: .9rem; color: var(--text-muted); }
.dt-land .rf-pfad a { color: var(--color-blue); text-decoration: none; }
.dt-land .rf-pfad a:hover { text-decoration: underline; }
.dt-land .rf-kopf .ml-aktionen { margin-top: 2rem; }
.dt-land .rf-kopf__bild .ml-fenster img { display: block; width: 100%; height: auto; }

/* Film: Desktop im Browserfenster, daneben das Telefon */
.dt-land .rf-film { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15.5rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: end; }
.dt-land .rf-film__rahmen { position: relative; min-width: 0; }
.dt-land .rf-film__rahmen video { display: block; width: 100%; height: auto; background: #eef1f5; }
.dt-land .rf-film__rahmen--mobil { border-radius: 34px; padding: 10px; background: #10141a; box-shadow: var(--shadow-xl); }
.dt-land .rf-film__rahmen--mobil video { border-radius: 25px; aspect-ratio: 390 / 844; object-fit: cover; }
.dt-land .rf-film__knopf { position: absolute; right: .9rem; bottom: .9rem; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(16, 20, 26, .72); color: #fff; display: grid; place-items: center; }
.dt-land .rf-film__rahmen--mobil .rf-film__knopf { right: 1.4rem; bottom: 1.4rem; }
.dt-land .rf-film__knopf::before { content: ""; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.dt-land .rf-film__knopf.is-pause::before { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.dt-land .rf-film__knopf:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-blue); }
.dt-land .rf-film figcaption { grid-column: 1 / -1; font-size: .92rem; line-height: 1.55; color: var(--text-muted); max-width: 52rem; }
.dt-land .rf-film figcaption b { color: var(--text-strong); font-weight: 600; }

/* Text in zwei Spalten: Titel links, Inhalt rechts */
.dt-land .rf-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.dt-land .rf-liste li { display: flex; gap: .7rem; font-size: 1.02rem; line-height: 1.55; }
.dt-land .rf-liste li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62rem; border-radius: 50%; background: var(--color-blue); }

/* Ergebnis: gemessene Werte mit Quelle */
.dt-land .rf-quelle { margin: 1rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--text-muted); max-width: 52rem; }

/* Kundenstimme */

/* Weitere Fallstudien */
.dt-land .rf-weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.dt-land .rf-weiter a { display: flex; flex-direction: column; gap: .3rem; padding: 1.2rem 1.3rem; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); text-decoration: none; color: var(--text-strong); min-height: 44px; }
.dt-land .rf-weiter a:hover { border-color: var(--color-blue); }
.dt-land .rf-weiter a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-blue); }
.dt-land .rf-weiter small { color: var(--text-muted); font-size: .85rem; }
.dt-land .rf-weiter b { font-family: var(--font-display); font-size: 1.1rem; }

/* Abschluss */
.dt-land .rf-schluss { padding-block: clamp(3rem, 7vw, 6rem); }
.dt-land .rf-schluss .ml-schluss__karte { display: block; }
.dt-land .rf-schluss .ml-aktionen { margin-top: 1.8rem; }

/* Uebersicht /referenzen/ */
.dt-land .rf-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.dt-land .rf-karte { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; border: 1px solid var(--border-subtle); border-radius: 22px; overflow: hidden; background: var(--surface-card); }
.dt-land .rf-karte__bild { background: var(--surface-subtle); padding: clamp(1rem, 2.5vw, 2rem); display: flex; align-items: center; }
.dt-land .rf-karte__bild .ml-fenster { width: 100%; }
.dt-land .rf-karte__bild img { display: block; width: 100%; height: auto; }
.dt-land .rf-karte__text { padding: clamp(1.4rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.dt-land .rf-karte__text img.rf-karte__logo { height: 28px; width: auto; max-width: 150px; object-fit: contain; object-position: left; }
.dt-land .rf-karte__text small { font-size: .85rem; color: var(--text-muted); }
.dt-land .rf-karte__text h2 { margin: 0; font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.dt-land .rf-karte__text p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text-muted); }
.dt-land .rf-karte__text ul { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dt-land .rf-karte__text li { font-size: .85rem; padding: .3rem .65rem; border-radius: 999px; background: var(--surface-subtle); border: 1px solid var(--border-subtle); }
.dt-land .rf-karte__text .ml-btn { align-self: flex-start; margin-top: auto; }
.dt-land .rf-andere { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.6rem; margin-top: 1.5rem; }
.dt-land .rf-andere img { height: 30px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .75; }

/* Ueber uns */
.dt-land .rf-person { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.dt-land .rf-person img { width: 100%; height: auto; border-radius: 22px; display: block; }
.dt-land .rf-person figcaption { margin-top: .7rem; font-size: .9rem; color: var(--text-muted); }
.dt-land .rf-buero img { display: block; width: 100%; height: auto; border-radius: 22px; }
.dt-land .rf-buero figcaption { margin-top: .7rem; font-size: .9rem; color: var(--text-muted); }
.dt-land .rf-team { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.dt-land .rf-team li { display: flex; align-items: center; gap: .8rem; }
.dt-land .rf-team img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.dt-land .rf-team b { display: block; font-family: var(--font-display); }
.dt-land .rf-team span { font-size: .9rem; color: var(--text-muted); }

/* Zwei Phasen (18.10.2026): Marke, Kennzahlen gross, So arbeiten wir,
   Video-Wand. Die Marke signalisiert den Kapitelwechsel innerhalb einer
   Fallstudie, die Kennzahlen stehen gross und belegt, wie die Werte sonst. */
.dt-land .rf-phase { max-width: 56rem; }
.dt-land .rf-phase__marke { display: inline-block; font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-blue); background: var(--surface-subtle); border: 1px solid var(--border-subtle); border-radius: 999px; padding: .35rem .85rem; }
.dt-land .rf-phase h2 { margin: 1rem 0 0; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; letter-spacing: -.03em; }
.dt-land .rf-phase .ml-lead { margin: .9rem 0 0; }
.dt-land .rf-phase2 { border-top: 1px solid var(--border-subtle); }
.dt-land .rf-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.dt-land .rf-zahl { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 1.6rem 1.6rem 1.5rem; min-width: 0; }
.dt-land .rf-zahl b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.04em; line-height: 1; color: var(--text-strong); }
.dt-land .rf-zahl span { display: block; margin-top: .55rem; font-size: 1.06rem; line-height: 1.4; color: var(--text-strong); }
.dt-land .rf-zahl small { display: block; margin-top: .5rem; font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
.dt-land .rf-arbeiten-titel { margin: clamp(1.8rem, 3vw, 2.4rem) 0 1rem; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; color: var(--text-strong); }
.dt-land .rf-arbeiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dt-land .rf-arbeiten li { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1.3rem 1.3rem 1.2rem; min-width: 0; }
.dt-land .rf-arbeiten b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); }
.dt-land .rf-arbeiten span { display: block; margin-top: .4rem; font-size: .95rem; line-height: 1.55; color: var(--text-muted); }

/* Video-Wand: Hochformat-Videos im Telefonrahmen, lokal ausgeliefert. */
.dt-land .rf-tiktok { margin: clamp(1.8rem, 3vw, 2.4rem) 0 0; }
.dt-land .rf-tiktok__wand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.dt-land .rf-tiktok__karte { margin: 0; min-width: 0; }
.dt-land .rf-tiktok__rahmen { position: relative; border-radius: 26px; padding: 8px; background: #10141a; box-shadow: var(--shadow-xl); }
.dt-land .rf-tiktok__rahmen video { display: block; width: 100%; height: auto; aspect-ratio: 576 / 1024; object-fit: cover; border-radius: 19px; background: #eef1f5; }
.dt-land .rf-tiktok__ton { position: absolute; right: 1.1rem; bottom: 1.2rem; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(16, 20, 26, .72); color: #fff; display: grid; place-items: center; }
.dt-land .rf-tiktok__ton svg { width: 22px; height: 22px; display: block; }
.dt-land .rf-tiktok__ton .rf-tiktok__ton-an { display: none; }
.dt-land .rf-tiktok__ton.is-laut .rf-tiktok__ton-an { display: block; }
.dt-land .rf-tiktok__ton.is-laut .rf-tiktok__ton-aus { display: none; }
.dt-land .rf-tiktok__ton:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-blue); }
.dt-land .rf-tiktok__karte figcaption { margin-top: .65rem; font-size: .9rem; line-height: 1.4; color: var(--text-muted); }
.dt-land .rf-tiktok__note { margin-top: 1rem; font-size: .85rem; line-height: 1.55; color: var(--text-muted); max-width: 52rem; }

@media (max-width: 900px) {
  .dt-land .rf-film { grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); }
}
@media (max-width: 700px) {
  /* Auf dem Telefon nur der Telefon-Film, mittig. Der Desktop-Film ist
     ausgeblendet und wird deshalb gar nicht geladen (film.js). */
  .dt-land .rf-film { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .dt-land .rf-film__rahmen--desktop { display: none; }
  /* Das Standbild im Kopf steht auf dem Telefon gleich darunter im Film, einmal reicht. */
  .dt-land .rf-kopf__bild { display: none; }
  .dt-land .rf-film__rahmen--mobil { width: min(78vw, 17rem); }
  .dt-land .rf-film figcaption { justify-self: stretch; }
  /* Kennzahlen und Arbeit untereinander, die Video-Wand wischbar (18.10.2026). */
  .dt-land .rf-zahlen { grid-template-columns: minmax(0, 1fr); }
  .dt-land .rf-arbeiten { grid-template-columns: minmax(0, 1fr); }
  /* Referenzkarten: Bild über Text, sonst bleiben 130 px für den Text (20.10.2026). */
  .dt-land .rf-karte { grid-template-columns: minmax(0, 1fr); }
  .dt-land .rf-tiktok__wand { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ml-rand); gap: 1rem; padding: 0 var(--ml-rand); margin: 0 calc(-1 * var(--ml-rand)); grid-template-columns: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dt-land .rf-tiktok__wand::-webkit-scrollbar { display: none; }
  .dt-land .rf-tiktok__karte { flex: 0 0 min(66vw, 15rem); scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-land .rf-weiter a { transition: none; }
}

/* ---------- Fallstudie, dritte Runde (Claude, 20.10.2026) ----------
   Kopf, Zitat, weitere Fälle: src/pages/fallstudie.css (fs-). Hier die
   Kapitel der Geschichte: 01 Ausgangslage mit Steckbrief, 02 Vorgehen mit
   drei Entscheiden und dem echten Telefonbild, 03 Ergebnis gross. */
.dt-land .rf .ml-sec{padding-block:clamp(2.8rem,6vw,5.2rem)}
.dt-land .rf-filmsek{background:linear-gradient(180deg,var(--fs-hell),#fff 60%)}
.dt-land .rf-lage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.8rem,5vw,5rem);align-items:start}
.dt-land .rf-lage__text{min-width:0}
.dt-land .rf-lage__text p:not(.fs-kapitel){margin:1.1rem 0 0;font-size:1.1rem;line-height:1.7;color:var(--text-body);max-width:40rem}
.dt-land .rf-steckbrief{min-width:0;border-radius:24px;background:#fff;border:1px solid var(--border-subtle);padding:clamp(1.2rem,2.5vw,1.7rem);box-shadow:0 30px 60px -50px rgba(16,20,26,.45)}
.dt-land .rf-steckbrief > img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain;object-position:left;margin-bottom:1rem}
.dt-land .rf-steckbrief dl{margin:0;display:grid}
.dt-land .rf-steckbrief dl div{padding:.75rem 0;border-top:1px solid var(--border-subtle);min-width:0}
.dt-land .rf-steckbrief dt{font-family:var(--font-display);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.dt-land .rf-steckbrief dd{margin:.25rem 0 0;font-size:.95rem;line-height:1.45;color:var(--text-strong);overflow-wrap:anywhere}
.dt-land .rf-steckbrief a{display:inline-flex;align-items:center;min-height:44px;color:var(--fs-a);font-weight:600;border-radius:6px}
.dt-land .rf-steckbrief a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--fs-a)}

.dt-land .rf-vorgehen{background:var(--fs-hell)}
.dt-land .rf-vorgehen__kopf{max-width:46rem}
.dt-land .rf-schritte{list-style:none;margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.dt-land .rf-schritte li{min-width:0;border-radius:24px;background:#fff;border:1px solid var(--border-subtle);padding:clamp(1.2rem,2.4vw,1.6rem)}
.dt-land .rf-schritt__nr{display:block;font-family:var(--font-display);font-weight:600;font-size:2.4rem;letter-spacing:-.05em;line-height:1;background:var(--fs-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.dt-land .rf-schritte h3{margin:1rem 0 0;font-size:1.12rem;line-height:1.3;letter-spacing:-.015em;color:var(--text-strong)}
.dt-land .rf-schritte p{margin:.55rem 0 0;font-size:.97rem;line-height:1.6;color:var(--text-muted)}
.dt-land .rf-gebaut{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:center;margin-top:clamp(2rem,4vw,3rem)}
.dt-land .rf-gebaut:not(:has(.rf-telefon)){grid-template-columns:minmax(0,1fr)}
.dt-land .rf-telefon{border-radius:34px;padding:9px;background:#10141a;box-shadow:0 40px 70px -40px rgba(16,20,26,.6);max-width:15rem;width:100%}
.dt-land .rf-telefon img{display:block;width:100%;height:auto;border-radius:26px}
.dt-land .rf-gebaut__text{min-width:0}
.dt-land .rf-gebaut h3{margin:0 0 1rem;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;color:var(--text-strong)}
.dt-land .rf .rf-liste li::before{background:var(--fs-a)}

.dt-land .rf-werte{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1rem}
.dt-land .rf-wert{background:#fff;border:1px solid var(--border-subtle);border-radius:22px;padding:1.4rem 1.5rem 1.3rem;min-width:0;box-shadow:0 30px 60px -54px rgba(16,20,26,.45)}
.dt-land .rf-wert b{display:block;width:max-content;max-width:100%;font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,3.6vw,3rem);letter-spacing:-.045em;line-height:1;background:var(--fs-verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.dt-land .rf-wert span{display:block;margin-top:.6rem;font-size:1rem;line-height:1.45;color:var(--text-strong)}
.dt-land .rf-wert small{display:block;margin-top:.55rem;font-size:.8rem;line-height:1.45;color:var(--text-muted)}
.dt-land .rf .rf-phase__marke{color:var(--fs-a)}
.dt-land .rf-akquire{margin:1.2rem 0 0}
.dt-land .rf-akquire a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-weight:600;color:var(--fs-a);text-underline-offset:3px;border-radius:6px}
.dt-land .rf-akquire a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--fs-a)}

@media (max-width:900px){
  .dt-land .rf-lage{grid-template-columns:minmax(0,1fr)}
  .dt-land .rf-schritte{grid-template-columns:minmax(0,1fr)}
  .dt-land .rf-werte{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .dt-land .rf-gebaut{grid-template-columns:minmax(0,1fr);justify-items:start}
  .dt-land .rf-telefon{display:none}
  .dt-land .rf-schritte li{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:.8rem}
  .dt-land .rf-schritt__nr{grid-row:1 / span 2;font-size:2rem}
  .dt-land .rf-schritte h3{margin-top:.2rem}
  .dt-land .rf-schritte p{grid-column:2}
  .dt-land .rf-werte{grid-template-columns:minmax(0,1fr)}
}