/* Branchenseiten, gemeinsame Gestaltung, seit dem 12.10.2026.
   Stand vorher als <style> in src/pages/branchen/medizin.html. Jetzt eine
   Datei für alle Branchenseiten, ausgeliefert als /branchen/branche.css
   (build/pages.py). Alle Regeln unter .dt-land, damit nichts auf Kopf, Fuss
   oder Blase durchschlägt. Was nur eine Branche braucht, steht in deren
   Fragment in einem eigenen <style>. */
/* Branchenseite Medizin, Fassung 7 vom 09.10.2026.
   Logos, Referenzen und Preisvorteil kommen aus den Bauteilen der
   Startseite (eine Quelle, Merkmal branche: 'medizin'), eingehängt von
   src/pages/branchen/medizin.jsx. Eigen sind nur Hero, die zwei Angebote,
   die Vorführung der Regeln, die Fragen und der Abschluss. Alle Regeln
   unter .dt-land, damit nichts auf Kopf, Fuss oder Blase durchschlägt. */
.dt-land{--ml-ink:#10141a;--ml-rand:clamp(1.25rem,4vw,2.5rem);color:var(--text-body);font-family:var(--font-body)}
.dt-land *{box-sizing:border-box}
.dt-land img{display:block;max-width:100%}
.dt-land .ml-wrap{max-width:var(--container-max);margin:0 auto;padding-inline:max(var(--ml-rand),env(safe-area-inset-left))}
.dt-land .ml-sec{padding-block:clamp(4.5rem,9vw,8.5rem)}
.dt-land .ml-eyebrow{display:block;font-family:var(--font-display);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-blue);margin:0 0 1.1rem}
.dt-land h1,.dt-land h2,.dt-land h3{font-family:var(--font-display);font-weight:600;color:var(--text-strong);margin:0;text-wrap:balance}
.dt-land h2.ml-h2{font-size:max(1.95rem,var(--fs-h2-fluid));line-height:1.06;letter-spacing:-.035em}
.dt-land .ml-lead{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.6;color:var(--text-muted);max-width:38rem;margin:1.3rem 0 0}
.dt-land .ml-kopf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.dt-land .ml-kopf .ml-lead{margin:0}
.dt-land [id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
.dt-land a{color:inherit}
.dt-land .dt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Knöpfe, wie auf der Startseite: dunkle Pille und helle Pille, 52 Punkte hoch */
.dt-land .ml-aktionen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.dt-land .ml-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1.5rem;border-radius:999px;font-family:var(--font-display);font-size:1rem;font-weight:600;text-decoration:none;border:1px solid var(--border-strong);background:var(--surface-card);color:var(--text-strong);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
/* Nie breiter als der Platz: "Website eingeben, Check anfragen" stand auf 320 Punkten 17 px ueber den Rand (Generatoren, 17.10.2026). Langer Text bricht dann um. */
.dt-land .ml-btn{max-width:100%;box-sizing:border-box}
.dt-land .ml-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.dt-land .ml-btn--dunkel{background:var(--ml-ink);border-color:var(--ml-ink);color:#fff}
.dt-land .ml-btn--hell-auf-dunkel{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.dt-land .ml-btn svg{width:16px;height:16px;flex:none}
.dt-land .ml-btn:focus-visible,.dt-land summary:focus-visible,.dt-land .ml-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}

/* Browserrahmen, eine Grammatik für alle Bildschirmfotos */
.dt-land .ml-fenster{background:#fff;border-radius:14px;box-shadow:var(--shadow-xl);border:1px solid rgba(16,20,26,.08);overflow:hidden}
.dt-land .ml-fenster__leiste{display:flex;align-items:center;gap:.45rem;height:34px;padding:0 .8rem;background:#f4f6f8;border-bottom:1px solid var(--border-subtle)}
.dt-land .ml-fenster__leiste i{width:9px;height:9px;border-radius:50%;background:#d6dbe1;flex:none}
.dt-land .ml-fenster__leiste span{margin-left:.6rem;font-size:11px;color:var(--text-subtle);background:#fff;border:1px solid var(--border-subtle);border-radius:999px;padding:.12rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 1 Hero ---------- */
.dt-land .ml-hero{padding-top:clamp(2rem,4.2vw,3.8rem);padding-bottom:clamp(2.5rem,4vw,3.5rem);overflow:hidden;position:relative}
.dt-land .ml-hero::before{content:"";position:absolute;inset:-20% -10% auto 40%;height:110%;background:radial-gradient(closest-side,rgba(0,186,235,.12),transparent 70%);pointer-events:none}
.dt-land .ml-hero__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative}
.dt-land .ml-hero h1{font-size:clamp(2.4rem,4.8vw,4.1rem);line-height:1.02;letter-spacing:-.045em}
.dt-land .ml-hero .ml-lead{font-size:clamp(1.1rem,1.4vw,1.3rem);max-width:34rem}
.dt-land .ml-hero .ml-lead b{color:var(--text-strong);font-weight:600}
.dt-land .ml-beweis{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--border-subtle);max-width:34rem}
.dt-land .ml-beweis p{margin:0 0 1rem;font-size:.92rem;color:var(--text-subtle)}
.dt-land .ml-beweis p b{color:var(--text-strong);font-weight:600}
.dt-land .ml-beweis__logos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.dt-land .ml-beweis__logos img{height:30px;width:auto;object-fit:contain}
.dt-land .ml-beweis__logos img.ml-flach{height:20px}
.dt-land .ml-szene{position:relative;aspect-ratio:1.3;min-height:0}
.dt-land .ml-szene .ml-fenster{position:absolute;width:82%}
.dt-land .ml-szene .ml-fenster img{width:100%;height:auto}
.dt-land .ml-szene .ml-b2{left:6%;top:8%;width:78%;transform:rotate(-2deg)}
.dt-land .ml-szene .ml-b1{right:-4%;top:2%;width:74%;transform:rotate(2deg);opacity:.9}
.dt-land .ml-szene .ml-b3{left:0;top:20%;width:88%;z-index:2}
.dt-land .ml-treffer{position:absolute;z-index:3;right:-2%;bottom:2%;width:min(23rem,78%);background:#fff;border-radius:16px;box-shadow:var(--shadow-xl);border:1px solid rgba(16,20,26,.06);padding:1rem 1.1rem}
.dt-land .ml-treffer__suche{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--text-strong);padding:.55rem .8rem;border:1px solid var(--border-subtle);border-radius:999px}
.dt-land .ml-treffer__suche img{height:16px;width:auto}
.dt-land .ml-treffer__erg{display:flex;align-items:center;gap:.7rem;margin-top:.8rem}
.dt-land .ml-treffer__erg img{width:26px;height:26px;border-radius:7px;flex:none}
.dt-land .ml-treffer__erg b{display:block;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:#1a0dab}
.dt-land .ml-treffer__erg small{display:block;font-size:.78rem;color:var(--text-subtle)}
.dt-land .ml-platz{margin-left:auto;flex:none;font-family:var(--font-display);font-size:.78rem;font-weight:600;color:#fff;background:var(--gradient-logo);border-radius:999px;padding:.3rem .7rem;white-space:nowrap}

.dt-land .ml-szene.is-misch{cursor:pointer}
.dt-land .ml-szene.is-misch .ml-fenster{left:4%;top:4%;right:auto;width:80%;transform-origin:50% 60%;will-change:transform}
/* Der Stapel steht schon vor dem Skript so, wie mische() ihn beim Laden
   zeichnet (16.10.2026, SEO-Audit H1). Bis dahin standen die Fenster ohne
   left und top, mische() setzte erst danach is-misch mit left, top und
   width: ein Sprung von 0.42 im CLS auf dem Desktop. Jetzt ändert das
   Skript nur noch transform und opacity, und die zählen nicht als Sprung.
   Die Werte sind PLATZ[0..2] aus src/branchen/branche.jsx bei t = 0. */
@media (min-width:641px){
  .dt-land .ml-szene .ml-fenster{left:4%;top:4%;right:auto;width:80%;transform-origin:50% 60%}
  .dt-land .ml-szene .ml-fenster:nth-of-type(1){transform:translate(0%,22%) rotate(-1deg) scale(1);z-index:10}
  .dt-land .ml-szene .ml-fenster:nth-of-type(2){transform:translate(9%,9%) rotate(2.5deg) scale(.93);z-index:9}
  .dt-land .ml-szene .ml-fenster:nth-of-type(3){transform:translate(16%,-2%) rotate(5deg) scale(.86);opacity:.92;z-index:8}
  .dt-land .ml-szene .ml-treffer{z-index:20}
}
.dt-land .ml-szene.is-misch .ml-treffer{z-index:20}

/* Auf dem Telefon steht das Band erst nach den Fenstern: dort zeigt der
   Hero selbst vier Logos, damit die Referenzen im ersten Bild sind. */
.dt-land .ml-beweis__tel{display:none}
@media (max-width:1000px){.dt-land .ml-beweis__tel{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
  .dt-land .ml-beweis__tel img{height:26px;width:auto;max-width:130px;object-fit:contain}}

/* ---------- Logoband, direkt unter dem Hero ---------- */
.dt-land .ml-band{border-block:1px solid var(--border-subtle);background:var(--surface-page);padding-block:clamp(1.4rem,2.6vw,2.2rem);overflow:hidden}
.dt-land .ml-band__titel{text-align:center;font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);margin:0 0 1rem;padding-inline:var(--ml-rand)}
.dt-land #ml-band:not(.is-react):not(.is-vor){display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.4rem 2.4rem;padding-inline:var(--ml-rand)}
.dt-land #ml-band:not(.is-react):not(.is-vor) img{height:32px;width:auto;max-width:160px;object-fit:contain}

/* Favicon in der Adresszeile, wie im Hero der Startseite */
.dt-land .ml-fenster__leiste span{display:inline-flex;align-items:center;gap:.4rem}
.dt-land .ml-fenster .ml-fenster__leiste span img{width:14px;height:14px;max-width:none;border-radius:3px;flex:none;object-fit:contain}

.dt-land .ml-ruhig{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem;font-size:1.05rem;color:var(--text-muted)}
.dt-land .ml-ruhig b{color:var(--text-strong)}
.dt-land .ml-kopf--mitte{display:block;text-align:center;max-width:46rem;margin-inline:auto}
.dt-land .ml-kopf--mitte .ml-lead{margin:1.2rem auto 0}

/* ---------- 4 Zwei Angebote: zwei ruhige Flächen, keine Preise ---------- */
.dt-land .ml-angebote{padding-top:clamp(3rem,6vw,5.5rem)}
.dt-land .ml-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.dt-land .ml-weg{position:relative;display:flex;flex-direction:column;gap:1rem;border-radius:32px;padding:clamp(1.8rem,4vw,3.2rem);background:var(--surface-subtle);overflow:hidden}
.dt-land .ml-weg--gross{background:var(--ml-ink);color:#c9d6e3;background-image:radial-gradient(90% 80% at 100% 0%,rgba(0,186,235,.22),transparent 60%),radial-gradient(70% 70% at 0% 100%,rgba(1,94,165,.35),transparent 65%)}
.dt-land .ml-weg__nr{display:inline-block;padding:.06em .14em .1em .02em;margin:-.06em 0 0 -.02em;font-family:var(--font-serif);font-style:italic;font-size:clamp(3.2rem,6vw,4.6rem);line-height:1;color:transparent;background:var(--gradient-logo);-webkit-background-clip:text;background-clip:text;width:max-content}
.dt-land .ml-weg h3{font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.035em;line-height:1.05}
.dt-land .ml-weg--gross h3{color:#fff}
.dt-land .ml-weg__wer{margin:0;font-size:1rem;line-height:1.55;color:var(--text-muted)}
.dt-land .ml-weg--gross .ml-weg__wer{color:var(--text-on-dark-muted)}
.dt-land .ml-punkte{list-style:none;margin:.6rem 0 1.4rem;padding:0;display:grid}
.dt-land .ml-punkte li{display:flex;gap:.8rem;align-items:baseline;padding:.85rem 0;border-top:1px solid var(--border-subtle);font-size:1.02rem;line-height:1.45;color:var(--text-body)}
.dt-land .ml-weg--gross .ml-punkte li{border-color:rgba(255,255,255,.1);color:#dbe5ef}
.dt-land .ml-punkte li{align-items:flex-start}
.dt-land .ml-punkte li::before{content:"";flex:none;width:20px;height:20px;margin-top:.05rem;border-radius:50%;background:rgba(0,186,235,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' fill='none' stroke='%2300baeb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.dt-land .ml-weg--gross .ml-punkte li::before{background-color:rgba(0,186,235,.2)}
.dt-land .ml-weg .ml-btn{margin-top:auto;align-self:flex-start}
.dt-land .ml-btn--hell{background:#fff;border-color:#fff;color:var(--ml-ink)}

/* ---------- 5 Regeln, vorgeführt an einer Musterpraxis ---------- */

/* Auf dunklem Grund trägt der Verlauf der Marke nicht: dort hellt er auf */
.dt-land .ml-weg--gross .ml-weg__nr{background:linear-gradient(120deg,#7ad8f4 0%,#00baeb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 6 Ablauf ---------- */
.dt-land .ml-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);counter-reset:s}
.dt-land .ml-schritt{position:relative;padding-top:1.4rem;border-top:2px solid var(--border-subtle)}
.dt-land .ml-schritt::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:42%;background:var(--gradient-logo)}
.dt-land .ml-schritt small{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle)}
.dt-land .ml-schritt h3{font-size:1.3rem;letter-spacing:-.025em;margin-top:.8rem}
.dt-land .ml-schritt p{font-size:.98rem;line-height:1.6;color:var(--text-muted);margin:.5rem 0 0}

/* ---------- 7 Fragen ---------- */
.dt-land .ml-fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.dt-land .ml-fragen__kopf{position:sticky;top:calc(var(--nav-h) + 2rem)}
.dt-land .ml-fragen__liste{border-top:1px solid var(--border-subtle)}
.dt-land details.ml-frage{border-bottom:1px solid var(--border-subtle)}
.dt-land .ml-frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.35rem 0;min-height:44px;font-family:var(--font-display);font-size:1.08rem;font-weight:600;letter-spacing:-.015em;color:var(--text-strong);border-radius:6px}
.dt-land .ml-frage summary::-webkit-details-marker{display:none}
.dt-land .ml-frage summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%2310141a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform var(--dur-base) var(--ease-out)}
.dt-land .ml-frage[open] summary::after{transform:rotate(45deg)}
.dt-land .ml-frage .ml-antwort{padding:0 3rem 1.5rem 0}
.dt-land .ml-frage .ml-antwort p{margin:0;font-size:1rem;line-height:1.65;color:var(--text-muted)}

/* ---------- 8 Abschluss ---------- */
.dt-land .ml-schluss{padding-bottom:clamp(4rem,8vw,7rem)}
.dt-land .ml-schluss__karte{position:relative;overflow:hidden;border-radius:32px;background:var(--ml-ink);padding:clamp(2rem,6vw,5rem);color:#c9d6e3;background-image:radial-gradient(80% 90% at 100% 0%,rgba(0,186,235,.2),transparent 55%),radial-gradient(60% 70% at 0% 100%,rgba(1,94,165,.35),transparent 60%)}
.dt-land .ml-gesichter{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.dt-land .ml-gesichter span{display:flex}
.dt-land .ml-gesichter img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--ml-ink)}
.dt-land .ml-gesichter img + img{margin-left:-12px}
.dt-land .ml-gesichter small{font-size:.92rem;color:var(--text-on-dark-muted)}
.dt-land .ml-schluss h2{color:#fff;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.045em;margin-top:1.6rem}
.dt-land .ml-schluss p{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.6;color:var(--text-on-dark-muted);max-width:34rem;margin:1.2rem 0 0}
/* Abschluss mit Formular: links die Menschen und das Versprechen, rechts das Formular auf weissem Grund. */
.dt-land .ml-schluss__karte--form{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.dt-land .ml-schluss__liste{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem}
.dt-land .ml-schluss__liste li{display:flex;align-items:center;gap:.7rem;color:#dbe6f0;font-size:1rem}
.dt-land .ml-schluss__liste li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:rgba(47,192,238,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%237fd3f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.dt-land a.ml-schluss__tel{display:inline-flex;align-items:center;min-height:44px;margin-top:1.4rem;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.dt-land .ml-form,.dt-land .ml-form__danke{background:#fff;color:var(--text-body);border-radius:24px;padding:clamp(1.3rem,2.6vw,2rem);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.dt-land .ml-form{display:grid;gap:1.1rem}
.dt-land .ml-form legend{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;margin-bottom:.7rem;font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;color:var(--text-strong)}
.dt-land .ml-form fieldset{margin:0;padding:0;border:0;min-width:0}
/* Karten wie im Startdialog: Bildsymbol, Titel, ein Satz. Gewählt: dunkler Rand und Haken. */
.dt-land .ml-form__karten{display:grid;gap:.55rem}
.dt-land .ml-karte{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:.9rem;padding:.75rem .9rem .75rem .75rem;border-radius:16px;
  border:1px solid var(--border-subtle,var(--color-line));background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s,opacity .3s}
.dt-land .ml-karte:hover{border-color:#b9c6d3;box-shadow:0 10px 24px -16px rgba(0,37,72,.45);transform:translateY(-1px)}
.dt-land .ml-karte input{position:absolute;opacity:0;width:1px;height:1px}
.dt-land .ml-karte__bild .dt-ico,.dt-land .ml-karte__bild svg{display:block;width:48px;height:48px;margin:0}
.dt-land .ml-karte__text b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--text-strong)}
.dt-land .ml-karte__text small{display:block;margin-top:.15rem;font-size:.86rem;line-height:1.4;color:var(--text-muted)}
.dt-land .ml-karte__haken{width:22px;height:22px;border-radius:50%;border:1.5px solid #c9d1dc;transition:all .2s}
.dt-land .ml-karte.is-gewaehlt{border-color:#10141a;box-shadow:inset 0 0 0 1px #10141a}
.dt-land .ml-karte.is-gewaehlt .ml-karte__haken{border-color:var(--color-cyan,#00baeb);background:var(--color-cyan,#00baeb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.dt-land .ml-karte:focus-within{box-shadow:inset 0 0 0 2px var(--color-blue)}
/* Details 28 (17.10.2026): der Ring kam auch nach Mausklick und sah aus
   wie eine Vorauswahl. Wo :has() geht, nur bei Tastaturfokus; die gewaehlte
   Karte behaelt ihren eigenen Rand. */
@supports selector(:has(a)){
  .dt-land .ml-karte:focus-within:not(:has(:focus-visible)){box-shadow:none}
  .dt-land .ml-karte.is-gewaehlt:focus-within:not(:has(:focus-visible)){box-shadow:inset 0 0 0 1px #10141a}
}
.dt-land .ml-form.is-gewaehlt .ml-karte:not(.is-gewaehlt){display:none}
.dt-land button.ml-form__aendern{min-height:44px;padding:0 .2rem;border:0;background:none;font:inherit;font-size:.88rem;font-weight:600;color:var(--color-blue,#015ea5);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dt-land button.ml-form__aendern[hidden]{display:none}
/* Der Rest fährt nach der Wahl ein. */
.dt-land .ml-form__rest{display:grid;gap:1.1rem;animation:ml-rein .45s var(--ease-out,ease) both}
.dt-land .ml-form__rest[hidden]{display:none}
@keyframes ml-rein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dt-land .ml-form__haus > div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.dt-land .ml-form__haus label.ml-form__hausAnders{grid-column:1 / -1}
.dt-land .ml-form__haus label.ml-form__hausAnders > span{min-height:52px}
.dt-land .ml-form__haus input.ml-form__hausFrei{position:static;opacity:1;height:auto;display:block;width:100%;box-sizing:border-box;margin:.5rem 0 0;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--border-subtle,var(--color-line));background:#f7f9fb;font:inherit;font-size:1rem;color:var(--text-strong)}
.dt-land .ml-form__haus input.ml-form__hausFrei[hidden]{display:none}
.dt-land .ml-form__haus input.ml-form__hausFrei:focus{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan,#00baeb);background:#fff}
.dt-land .ml-form__haus label{position:relative;cursor:pointer;min-width:0}
.dt-land .ml-form__haus input{position:absolute;opacity:0;width:1px;height:1px}
.dt-land .ml-form__haus label > span{display:flex;align-items:center;gap:.7rem;min-height:58px;height:100%;box-sizing:border-box;padding:.55rem .85rem .55rem .55rem;border-radius:14px;border:1px solid var(--border-subtle,var(--color-line));background:#fff;font-size:.92rem;line-height:1.3;font-family:var(--font-display);font-weight:500;color:var(--text-strong);transition:border-color .2s,background .2s,box-shadow .2s}
.dt-land .ml-form__haus label > span > .dt-ico{flex:none;margin:0;width:38px;height:38px;min-height:0;padding:0;border:0;background:none}
.dt-land .ml-form__haus label > span > .dt-ico svg{display:block;width:38px;height:38px}
.dt-land .ml-form__haus label:hover > span{border-color:#b9c6d3}
.dt-land .ml-form__haus input:checked + span{border-color:var(--color-cyan,#00baeb);background:var(--color-cyan-100,#e6f8fd);box-shadow:inset 0 0 0 1px var(--color-cyan,#00baeb)}
.dt-land .ml-form__haus input:focus-visible + span{box-shadow:inset 0 0 0 2px var(--color-blue)}
.dt-land .ml-form__dazu:empty{display:none}
.dt-land .ml-form__dazu .dt-zs{margin:0}
.dt-land .ml-form__felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}
.dt-land .ml-form__feld{display:grid;gap:.35rem;min-width:0;align-content:start}
.dt-land .ml-form__feld--breit{grid-column:1/-1}
.dt-land .ml-form__feld > span{font-size:.85rem;font-weight:600;color:var(--text-strong)}
.dt-land .ml-form__feld > span i{font-style:normal;font-weight:400;color:var(--text-muted)}
.dt-land .ml-form__feld input,.dt-land .ml-form__feld textarea{width:100%;box-sizing:border-box;min-height:50px;padding:.75rem .95rem;line-height:1.4;border-radius:12px;border:1px solid var(--border-strong,#d5dbe2);background:#f7f9fb;font:inherit;font-size:1rem;color:var(--text-strong);transition:border-color .2s,background .2s,box-shadow .2s}
.dt-land .ml-form__feld textarea{resize:vertical;min-height:5.5rem}
.dt-land .ml-form__feld input:focus,.dt-land .ml-form__feld textarea:focus{outline:none;background:#fff;border-color:var(--color-blue);box-shadow:inset 0 0 0 1px var(--color-blue)}
.dt-land .ml-form__feld.is-fehler input{border-color:var(--color-danger);background:#fff6f6}
.dt-land .ml-form__feld small{font-size:.8rem;line-height:1.4;color:var(--color-danger)}
.dt-land .ml-form__feld small[hidden]{display:none}
.dt-land .ml-form__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Der Satz, der beim Ausfüllen mitliest, wie im Startdialog. */
.dt-land p.ml-form__satz{margin:0;padding:.85rem 1rem;border-radius:14px;background:var(--color-cyan-100,#e6f8fd);color:var(--text-strong);font-size:.95rem;line-height:1.5}
.dt-land p.ml-form__satz:empty{display:none}
.dt-land .ml-form__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.dt-land .ml-form__fuss .ml-btn{border:0;cursor:pointer}
.dt-land .ml-form__fuss .ml-btn[disabled]{opacity:.6;cursor:wait}
.dt-land .ml-form__fuss p{flex:1 1 14rem;margin:0;font-size:.82rem;line-height:1.5;color:var(--text-muted)}
.dt-land .ml-form__fuss p a{color:inherit}
.dt-land .ml-form__meldung{margin:0;padding:.8rem 1rem;border-radius:12px;background:#fff4e5;color:#6b3d00;font-size:.92rem;line-height:1.5}
.dt-land .ml-form__meldung a{color:inherit;font-weight:600}
.dt-land .ml-form__meldung[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.dt-land .ml-form__rest{animation:none}.dt-land .ml-karte{transition:none}}
.dt-land .ml-form__danke{display:grid;justify-items:start;gap:.6rem;outline:none}
.dt-land .ml-form__danke[hidden],.dt-land .ml-form[hidden]{display:none}
.dt-land .ml-form__haken{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#2fc0ee,#0b5cad)}
.dt-land .ml-form__haken svg{width:26px;height:26px}
.dt-land .ml-form__danke h3{margin:.4rem 0 0;font-family:var(--font-display);font-size:1.6rem;letter-spacing:-.03em;color:var(--text-strong)}
.dt-land .ml-form__danke p{margin:0;font-size:1rem;line-height:1.6;color:var(--text-muted);max-width:none}

/* ---------- Telefon und Tablet ---------- */
@media (max-width:1000px){
  .dt-land .ml-szene{max-width:40rem;width:100%;margin:0 auto}
  .dt-land .ml-wege{grid-template-columns:minmax(0,1fr)}
  .dt-land .ml-schritte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
  .dt-land .ml-fragen__kopf{position:static}
  /* Fragen und Abschnittsköpfe einspaltig (17.10.2026, auf dem Telefon war die Liste 160 px schmal) */
  .dt-land .ml-fragen,.dt-land .ml-kopf{grid-template-columns:minmax(0,1fr);gap:1.2rem 2rem}
  /* Telefon: erst Titel, dann die Vorführung, dann die Liste */
}
@media (max-width:900px){
  .dt-land .ml-schluss__karte--form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .dt-land .ml-form__felder{grid-template-columns:minmax(0,1fr)}
  .dt-land .ml-karte{grid-template-columns:40px minmax(0,1fr) 22px;gap:.7rem}
  .dt-land .ml-karte__bild .dt-ico,.dt-land .ml-karte__bild svg{width:40px;height:40px}
  .dt-land .ml-schluss__karte--form{padding:1.4rem 1rem 1rem}
  .dt-land .ml-hero h1{font-size:clamp(2rem,8.6vw,2.4rem)}
  /* 14.10.2026: das Raster des Szenen-Heros blieb auf dem Telefon zweispaltig,
     Text und Vorführung standen mit je gut 155 px nebeneinander und quetschten
     den Hero auf über 1500 px Höhe. Eine Spalte, erst der Text, dann die
     Vorführung. */
  .dt-land .ml-hero__raster{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .dt-land .ml-lead{font-size:1.02rem}
  /* Telefon: ein einziges Fenster statt des Stapels, die Google-Karte darunter überlappend */
  .dt-land .ml-szene{aspect-ratio:auto;padding-bottom:5.2rem}
  .dt-land .ml-szene .ml-fenster{position:relative;width:100%;left:0;top:0;transform:none!important;opacity:1!important}
  .dt-land .ml-szene .ml-fenster:not(:first-of-type){display:none}
  .dt-land .ml-treffer{right:4%;left:4%;width:auto;bottom:0;padding:.8rem}
  .dt-land .ml-beweis__tel{display:none}
  .dt-land .ml-schritte{grid-template-columns:minmax(0,1fr)}
  .dt-land .ml-frage .ml-antwort{padding-right:0}
  .dt-land .ml-aktionen .ml-btn{flex:0 0 auto;min-height:48px;padding:0 1.15rem;font-size:.95rem}
  .dt-land .ml-aktionen .ml-btn--mensch{padding-left:5px}
  .dt-land .ml-weg .ml-btn{align-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .dt-land .ml-btn{transition:none}
}

/* Vitrine: alle Medizin-Websites als Fächer echter Browserfenster. Das mittlere
   ist scharf und lässt sich von Hand scrollen, die Nachbarn treten zurück. Kein
   Selbstlauf. Steht der Abschnitt mittig, tritt die Kopfzeile zurück. */
.dt-land .ml-vit{position:relative;display:block;padding:clamp(4.6rem,8vh,5.4rem) 0 clamp(1.5rem,4vh,3rem);background:radial-gradient(120% 70% at 50% 100%,#e8f3fb 0%,#fff 62%);overflow:hidden}
.dt-land .ml-vit > .ml-wrap{width:100%}
.dt-land .ml-vit .ml-flow{margin-top:0}
.dt-land .ml-vit__kopf{text-align:center;max-width:44rem;margin:0 auto clamp(1.6rem,3.5vh,2.6rem)}
.dt-land .ml-vit__kopf p{margin:.9rem auto 0;color:var(--text-subtle);font-size:1.05rem;line-height:1.6;max-width:34rem}
.dt-land .ml-flow{--w:min(1180px,80vw);position:relative;width:var(--w);margin:0 0 0 calc(50% - var(--w) / 2);height:min(calc(var(--w) * .6),calc(100svh - 12rem));perspective:1800px;touch-action:pan-y}
.dt-land .ml-fl{position:absolute;inset:0;margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(15,35,60,.07),0 2px 6px rgba(15,35,60,.05),0 44px 70px -34px rgba(15,35,60,.42);transform-origin:50% 60%;transition:transform .7s cubic-bezier(.22,.8,.2,1),opacity .5s,filter .6s;cursor:pointer;display:flex;flex-direction:column;filter:blur(8px) saturate(.7)}
.dt-land .ml-fl.is-an{filter:none}
.dt-land .ml-fl::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);opacity:1;transition:opacity .5s;pointer-events:none}
.dt-land .ml-fl.is-an{cursor:default}
.dt-land .ml-fl.is-an::after{opacity:0}
.dt-land .ml-fl__leiste{position:relative;flex:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;background:#f7f8fa;border-bottom:1px solid rgba(15,35,60,.07)}
.dt-land .ml-fl__leiste i{width:11px;height:11px;border-radius:50%;flex:none;background:#ff5f57}
.dt-land .ml-fl__leiste i:nth-child(2){background:#febc2e}
.dt-land .ml-fl__leiste i:nth-child(3){background:#28c840}
.dt-land .ml-fl__adresse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:7px;width:min(50%,320px);height:25px;background:#fff;border:1px solid rgba(15,35,60,.08);border-radius:8px;font-size:12px;color:#4a5560;white-space:nowrap;overflow:hidden}
.dt-land .ml-fl__adresse img{width:14px;height:14px;border-radius:3px;flex:none}
.dt-land .ml-fl__bild{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff;scrollbar-width:thin}
.dt-land .ml-fl.is-an .ml-fl__bild{overflow-y:hidden;cursor:pointer}
.dt-land .ml-fl.is-an.is-selbst .ml-fl__bild{overflow-y:auto;cursor:auto}
.dt-land .ml-fl__bild img{display:block;width:100%;height:auto}
.dt-land .ml-fl__hinweis{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(11,27,43,.82);color:#fff;font-size:12px;font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s;pointer-events:none}
.dt-land .ml-fl.is-an .ml-fl__hinweis{opacity:1}
.dt-land .ml-vit.is-gescrollt .ml-fl__hinweis{opacity:0}
.dt-land .ml-flow__pfeil{position:absolute;top:50%;z-index:30;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:1px solid rgba(15,35,60,.1);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 24px -10px rgba(15,35,60,.35);display:grid;place-items:center;cursor:pointer;color:#0b1b2b;transition:transform .2s}
.dt-land .ml-flow__pfeil:hover{transform:scale(1.06)}
.dt-land .ml-flow__pfeil:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}
.dt-land .ml-flow__pfeil--l{left:18px}
.dt-land .ml-flow__pfeil--r{right:18px}
.dt-land .ml-flow__pfeil svg{width:18px;height:18px}
.dt-land .ml-vit__wahl{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;list-style:none;margin:clamp(1.6rem,3.5vh,2.4rem) auto 0;padding:0;max-width:64rem}
.dt-land .ml-vit__wahl button{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .95rem .4rem .5rem;border-radius:999px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.9);font:inherit;font-size:.9rem;font-weight:500;color:var(--text-body);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.dt-land .ml-vit__wahl button img{width:24px;height:24px;border-radius:6px;background:#fff;padding:2px;border:1px solid #eef1f4;flex:none}
.dt-land .ml-vit__wahl button:hover{border-color:#b7c3cf}
.dt-land .ml-vit__wahl button[aria-pressed="true"]{background:#0b1b2b;border-color:#0b1b2b;color:#fff}
.dt-land .ml-vit__wahl button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}
.dt-land .ml-vit__fuss{text-align:center;margin-top:1rem;font-size:.95rem;color:var(--text-subtle)}
.dt-land .ml-vit__fuss a{color:#0067a8;text-decoration:none;font-weight:500}
.dt-land .ml-vit__fuss a:hover{text-decoration:underline}
@media (max-width:700px){
  .dt-land .ml-flow{--w:86vw;height:auto;aspect-ratio:4/4.6}
  .dt-land .ml-fl__hinweis{font-size:11px;padding:5px 10px;bottom:10px}
  .dt-land .ml-fl__hinweis > span{display:none}
  .dt-land .ml-fl__hinweis::after{content:"Läuft von selbst"}
  .dt-land .ml-vit{min-height:0;padding-top:4.5rem}
  .dt-land .ml-fl__leiste{height:28px;padding:0 10px;gap:5px}
  .dt-land .ml-fl__leiste i{width:8px;height:8px}
  .dt-land .ml-fl__adresse{height:19px;font-size:10px;width:64%}
  .dt-land .ml-flow__pfeil{display:none}
  .dt-land .ml-vit__wahl{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-20px;padding:0 48px .4rem 20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .dt-land .ml-vit__wahl li{flex:none}
}
@media (prefers-reduced-motion:reduce){.dt-land .ml-fl{transition:none}}

.dt-land .ml-eyebrow--ch{display:inline-flex;align-items:center}
.dt-land .ml-kreuz{position:relative;display:inline-block;width:13px;height:13px;margin-right:7px;border-radius:3px;background:#f5232b;flex:none}
.dt-land .ml-kreuz::before,.dt-land .ml-kreuz::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:.5px;transform:translate(-50%,-50%)}
.dt-land .ml-kreuz::before{width:2.2px;height:7px}
.dt-land .ml-kreuz::after{width:7px;height:2.2px}
.dt-land .ml-btn--mensch{gap:8px;padding-left:5px;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);color:var(--text-strong,#0b1b2b)}
.dt-land .ml-btn--mensch img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
/* Auf 320 Punkten lief "Persönliches Erstgespräch" rechts aus dem Bild (12.10.2026). */
/* Schmale Telefone: vier Rahmen ineinander (Seite, dunkle Karte, Formular,
   Karte) liessen dem Text der Themenkarte 94 Punkte, "Neue Website" brach
   in zwei Zeilen, die Häuser wurden abgeschnitten (iPhone SE, 12.10.2026). */
@media (max-width:420px){
  .dt-land .ml-schluss .ml-wrap{padding-inline:10px}
  .dt-land .ml-schluss .ml-schluss__karte--form{padding:1.4rem .7rem .7rem;border-radius:24px}
  .dt-land .ml-schluss .ml-schluss__karte--form > :first-child{padding-inline:.5rem}
  .dt-land .ml-schluss form.ml-form{padding:1.1rem .85rem}
  .dt-land .ml-schluss .ml-karte{padding-inline:.75rem .85rem;gap:.6rem}
}
@media (max-width:374px){.dt-land .ml-form__haus > div{grid-template-columns:minmax(0,1fr)}}
@media (max-width:374px){.dt-land .ml-aktionen .ml-btn--mensch{flex:1 1 100%;max-width:100%;white-space:normal;line-height:1.25;padding-right:1rem;font-size:.9rem}}

/* Selbstlauf in der Vitrine: Fortschritt als feine Linie unter der Adresszeile */
.dt-land .ml-fl__lauf{position:absolute;left:0;right:0;top:38px;height:2px;z-index:3;background:transparent;pointer-events:none}
.dt-land .ml-fl__lauf::after{content:"";position:absolute;inset:0;background:var(--gradient-logo);transform-origin:left;transform:scaleX(var(--ml-p,0))}
.dt-land .ml-fl:not(.is-an) .ml-fl__lauf{display:none}
.dt-land .ml-fl__hinweis b{display:inline-block;width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.25)}
.dt-land .ml-vit.is-hand .ml-fl__hinweis b{background:#febc2e;box-shadow:0 0 0 3px rgba(254,188,46,.25)}
@media (max-width:700px){.dt-land .ml-fl__lauf{top:28px}}

/* Angebote: wer schon so eine Website bei uns hat, als Logoreihe über dem Knopf */
.dt-land .ml-weg__fuer{margin:.4rem 0 1.6rem;padding-top:1.2rem;border-top:1px solid var(--border-subtle)}
.dt-land .ml-weg--gross .ml-weg__fuer{border-color:rgba(255,255,255,.1)}
.dt-land .ml-weg__fuer > span{display:block;margin-bottom:.9rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.dt-land .ml-weg--gross .ml-weg__fuer > span{color:#8fa3b8}
.dt-land .ml-weg__fuer > div{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.dt-land .ml-weg__fuer img{height:26px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.dt-land .ml-weg__fuer img:hover{filter:none;opacity:1}
.dt-land .ml-weg--gross .ml-weg__fuer img{filter:grayscale(1) brightness(0) invert(1);opacity:.8}
.dt-land .ml-weg--gross .ml-weg__fuer img:hover{filter:grayscale(1) brightness(0) invert(1);opacity:1}
/* Ambulanz und MediZentrum als echte Negativfassung (weiss, Innenleben durchsichtig),
   gebaut aus dem Original: ein Filter füllte Stern und Wappen zu Flächen. */
.dt-land .ml-weg--gross .ml-weg__fuer img.ml-negativ,.dt-land .ml-weg--gross .ml-weg__fuer img.ml-negativ:hover{filter:none}

/* Hero ohne Bildstapel, für eine neue Branchenseite, solange es noch keine
   Bildschirmfotos ihrer Kunden gibt (src/branchen/vorlage.html). */
.dt-land .ml-hero--text .ml-hero__raster{grid-template-columns:minmax(0,1fr);max-width:52rem}

/* ---------- Seit dem 13.10.2026: Anforderungen, Leiste auf dem Telefon
   (Audit im Hero, Vorher/nachher und Fachgebiete am 14.10.2026 entfernt) ---------- */
.dt-land .ml-hero--text .ml-hero__raster{grid-template-columns:minmax(0,1fr)}
.dt-land .ml-hero--text h1{max-width:20ch}
.dt-land .ml-hero--text .ml-lead{max-width:40rem}

/* Anforderungen: Karten im Raster (Fachgebiete am 14.10.2026 entfernt) */
.dt-land .ml-braucht__liste{list-style:none;padding:0;margin:clamp(1.8rem,4vw,3rem) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}
.dt-land .ml-braucht__liste li{display:grid;gap:.45rem;height:100%;padding:1.3rem 1.4rem;border-radius:20px;border:1px solid var(--border-subtle);background:var(--surface,#fff);text-decoration:none}
.dt-land .ml-braucht__liste b{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--text-strong)}
.dt-land .ml-braucht__liste span{color:var(--text-muted);line-height:1.55;font-size:.95rem}

/* Die Leiste auf dem Telefon steht seit dem 20.10.2026 in src/global.css,
   sie gilt auch auf der Startseite. */

/* Was auf eine Praxis-Homepage gehört (16.10.2026, SEO-Audit H3): die Karten
   wie bei den Anforderungen, darunter Regeln und Preis als zwei ruhige
   Textspalten. */
.dt-land .ml-dazu .ml-lead{max-width:44rem}
.dt-land .ml-dazu .ml-braucht__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
.dt-land .ml-dazu .ml-braucht__liste li{align-content:start}
@media (max-width:1000px){.dt-land .ml-dazu .ml-braucht__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dt-land .ml-dazu .ml-braucht__liste{grid-template-columns:minmax(0,1fr)}}
.dt-land .ml-braucht__liste a{color:var(--color-navy,#003a75);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.dt-land .ml-dazu__text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.2rem,4vw,3.5rem);padding-top:clamp(1.8rem,3vw,2.6rem);border-top:1px solid var(--border-subtle)}
.dt-land .ml-dazu__text h3{font-size:1.3rem;letter-spacing:-.025em;margin:0 0 .7rem}
.dt-land .ml-dazu__text p{margin:0 0 1rem;font-size:1.02rem;line-height:1.65;color:var(--text-muted)}
.dt-land .ml-dazu__text a{color:var(--color-navy,#003a75);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (max-width:760px){.dt-land .ml-dazu__text{grid-template-columns:minmax(0,1fr)}}

/* Die Vitrine nennt jede Website auch als echten Verweis, ohne Skript
   lesbar und fuer Suchmaschinen crawlbar (SEO-Audit N2). */
.dt-land .ml-vit__alle{max-width:52rem;margin:.6rem auto 0;padding-inline:var(--ml-rand);text-align:center;font-size:.86rem;line-height:1.7;color:var(--text-subtle)}
.dt-land .ml-vit__alle a{color:var(--text-muted);text-decoration:underline;text-decoration-color:rgba(16,20,26,.25);text-underline-offset:3px}
.dt-land .ml-vit__alle a:hover{color:var(--text-strong)}


/* ---------- Referenzen als Flächen (Finanzen, Weitere, 17.10.2026) ----------
   Dieselben Flächen wie die zwei Wege. Drei nebeneinander erst ab 1000
   Punkten, darunter untereinander wie die zwei. Kopf mit Logo statt Nummer,
   ohne die Linie, die ml-weg__fuer sonst über sich zieht. */
@media (min-width:1001px){.dt-land .ml-wege--drei{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:641px) and (max-width:1000px){.dt-land .ml-wege--drei{grid-template-columns:minmax(0,1fr)}}
.dt-land .ml-weg__fuer--kopf{margin:0;padding-top:0;border-top:0}
.dt-land .ml-weg__fuer--kopf img{height:34px;max-width:160px;filter:none;opacity:1}
.dt-land .ml-weg--gross .ml-eyebrow{color:#8fd9f3}
/* Vier Bereiche (Weitere Branchen): zwei mal zwei statt drei und einer. */
@media (min-width:641px){.dt-land .ml-braucht__liste--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 100 Details, 17.10.2026 (nacht-1710/details-100/liste.md) ---------- */
/* 40: Druckzustand, auch mit der Maus; schlaegt das Anheben beim Hover. */
.dt-land .ml-btn:active{transform:translateY(0) scale(.98);transition-duration:.06s}
/* 9: Beim Senden steht im Knopf, was passiert, mit einem Kreis. */
.dt-land .ml-btn .ml-dreh{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ml-dreh .8s linear infinite}
@keyframes ml-dreh{to{transform:rotate(360deg)}}
.dt-land .ml-form__fuss .ml-btn[aria-busy="true"]{opacity:.85;cursor:progress}
/* 86: Die Balken der Audit-Karte fuellen sich, sobald die Karte gezeichnet
   wird (der Ablauf zeichnet sie, wenn ihr Schritt dran ist). Ohne Bewegung
   stehen sie sofort. */
.ml-audit__balken{transform-origin:left center;animation:ml-balken-auf .9s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes ml-balken-auf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ml-audit__balken{animation:none}}
/* 27: Wer Bewegung abgeschaltet hat, bekommt auch die kleinen Uebergaenge
   nicht mehr (Haken, Felder, Pfeile, Vitrinenknoepfe, FAQ-Zeichen). */
@media (prefers-reduced-motion:reduce){
  .dt-land *,.dt-land *::before,.dt-land *::after{transition-duration:0s !important}
  .dt-land .ml-btn .ml-dreh{animation-duration:2.4s}
  .dt-land .ml-btn:active,.dt-land .ml-btn:hover{transform:none}
}


/* 100 Details Nr. 76 (17.10.2026): Am Desktop klebte die Steuerung der
   Referenzen (Punkte, Pause) am unteren Rand und lag beim Scrollen ueber der
   Google-Karte, dem Beleg. Auf den Branchenseiten steht sie jetzt unter der
   Karte. Zwei Klassen, weil 6-HomeSegments.jsx seinen Stil zur Laufzeit setzt. */
@media (min-width: 901px) {
  .dt-land .dt-rg__steuerung { position: relative; bottom: auto; }
}

/* Bauteile der Startseite auf Webdesign- und Ortsseiten (19.10.2026,
   src/branchen/branche.jsx: #ml-hero-ws, #ml-leistungen, #ml-ort). Der Hero
   bringt seine Gestaltung selbst mit; hier nur, was im Fragment als HTML
   ankommt. */
.dt-land .dt-hw-lead strong, .dt-land .dt-hw-lead b { color: var(--text-strong); font-weight: 600; }
.dt-land .dt-hw-also .dt-accent { color: var(--color-blue); font-size: 1.12em; }
.dt-land .dt-bew__schnitt .dt-sterne { flex-direction: row; }
.dt-land .dt-stimmen .dt-section-heading { align-items: end; }
.dt-land #dazu .lr__quelle { justify-content: center; }
.dt-land #dazu .lr__quelle a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(16,20,26,.25); }
.dt-land #dazu .lr__quelle a:hover { color: var(--color-blue); }

/* Werbung in Zahlen und die Anzeigen selbst (19.10.2026, /google-ads/,
   src/branchen/branche.jsx: AdsZahlen #ml-zahlen, Anzeigen #ml-anzeigen).
   Dunkel wie HomeSplit der Startseite (Tinte mit Punktraster), damit die
   Ergebnisse als eigenes Kapitel lesen. Alle Zahlen sind Text, keine Bilder. */
.dt-land .gz-dunkel { position: relative; background: var(--color-ink-900); color: #fff; overflow: hidden; isolation: isolate; }
.dt-land .gz-dunkel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 1.5rem 1.5rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.dt-land .gz-dunkel::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 60rem; height: 36rem; right: -18rem; top: -12rem;
  background: radial-gradient(closest-side, rgba(0,186,235,.16), transparent); }
.dt-land .gz-dunkel .dt-eyebrow { color: var(--color-cyan); }
.dt-land .gz-dunkel h2 { margin: 0; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: var(--fs-h2-fluid); line-height: 1.12; letter-spacing: -.03em; }
.dt-land .gz-dunkel .dt-accent-gradient { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--color-cyan); }
.dt-land .gz-lead { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 46ch; }
.dt-land .gz-lead b, .dt-land .gz-lead strong { color: #fff; font-weight: 600; }
.dt-land .gz-anzeigen + .gz-zahlen .dt-section, .dt-land #ml-anzeigen + #ml-zahlen .dt-section { padding-top: clamp(1rem, 3vw, 2.5rem); }

/* Grosse Zahlen */
.dt-land .gz-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  border-radius: var(--radius-lg, 20px); overflow: hidden; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.dt-land .gz-karten li { min-width: 0; padding: clamp(1.4rem, 2.4vw, 2.1rem); background: #141a22; display: flex; flex-direction: column; gap: .35rem; }
.dt-land .gz-zahl { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 4.6vw, 4.1rem); line-height: 1; letter-spacing: -.045em;
  background: linear-gradient(90deg, #fff 0%, #bfefff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.dt-land .gz-karten li:first-child .gz-zahl { background: linear-gradient(90deg, #6fdcff, var(--color-cyan)); -webkit-background-clip: text; background-clip: text; }
.dt-land .gz-karten span { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.dt-land .gz-karten small { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.58); }

/* Zwei Tafeln: Trichter und Vorher-Nachher */
.dt-land .gz-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.dt-land .gz-zwei > * { min-width: 0; }
.dt-land .gz-tafel { margin: 0; height: 100%; box-sizing: border-box; padding: clamp(1.3rem, 2.4vw, 2rem); border-radius: var(--radius-lg, 20px);
  background: linear-gradient(180deg, #17202b, #121820); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; }
.dt-land .gz-tafel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.dt-land .gz-tafel__kopf b { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #fff; }
.dt-land .gz-tafel__kopf span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.dt-land .gz-tafel figcaption { margin-top: auto; padding-top: 1.1rem; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.5); }

.dt-land .gz-trichter ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.dt-land .gz-trichter li { position: relative; display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 4.1rem; padding: 0 1.1rem; }
.dt-land .gz-trichter__band { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 14px; z-index: 0;
  background: linear-gradient(90deg, rgba(0,186,235,.34), rgba(1,94,165,.22)); border: 1px solid rgba(0,186,235,.35);
  transform-origin: left center; animation: gz-auf 1s calc(var(--i) * .15s + .2s) cubic-bezier(.2,.7,.2,1) both; }
.dt-land .gz-trichter li:last-child .gz-trichter__band { background: linear-gradient(90deg, var(--color-blue), #0a86c9); border-color: rgba(0,186,235,.7); box-shadow: 0 10px 30px -12px rgba(0,186,235,.55); }
.dt-land .gz-trichter li > b { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.035em; color: #fff; }
.dt-land .gz-trichter__text { position: relative; z-index: 1; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.dt-land .gz-trichter__text small { display: block; font-weight: 400; font-size: 12.5px; opacity: .7; }
@keyframes gz-auf { from { transform: scaleX(.08); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.dt-land .gz-balken { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; align-items: end; height: 13.5rem; padding-top: 1.6rem; }
.dt-land .gz-balken__s { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: .45rem; min-width: 0; text-align: center; }
.dt-land .gz-balken__s > b { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.03em; color: rgba(255,255,255,.75); }
.dt-land .gz-balken__saeule { display: block; height: var(--h); min-height: 6px; border-radius: 10px 10px 4px 4px; background: rgba(255,255,255,.16);
  transform-origin: bottom center; animation: gz-hoch 1s calc(var(--i) * .15s + .2s) cubic-bezier(.2,.7,.2,1) both; }
.dt-land .gz-balken__s.is-hervor > b { color: var(--color-cyan); font-size: 2.1rem; }
.dt-land .gz-balken__s.is-hervor .gz-balken__saeule { background: linear-gradient(180deg, #49d3ff, var(--color-blue)); box-shadow: 0 10px 30px -10px rgba(0,186,235,.6); }
.dt-land .gz-balken__s small { font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.6); min-height: 2.6em; }
@keyframes gz-hoch { from { transform: scaleY(.04); } to { transform: scaleY(1); } }
.dt-land .gz-vergleich__fazit { margin: 1rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.35; color: #fff; }
.dt-land .gz-vergleich__fazit .dt-accent { color: var(--color-cyan); font-size: 1.15em; }

.dt-land .gz-quelle { margin: clamp(1.4rem, 2.4vw, 2rem) 0 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.55); max-width: 60rem; }
.dt-land .gz-quelle a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); white-space: nowrap; }
.dt-land .gz-quelle a:hover { color: var(--color-cyan); }
.dt-land .gz-quelle--wand { margin-top: 1.2rem; }

/* Die Videowand: eine Reihe Telefone, seitlich zu ziehen */
.dt-land .gz-anzeigen .dt-section { padding-bottom: 0; }
.dt-land .gz-kopf-rechts { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.dt-land .gz-pfeile { display: flex; gap: .6rem; }
.dt-land .gz-pfeile button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s; }
.dt-land .gz-pfeile button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }
.dt-land .gz-pfeile button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-cyan); }
.dt-land .gz-wand { list-style: none; margin: 0; display: flex; gap: clamp(.9rem, 1.6vw, 1.4rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: .5rem max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad))) 1.4rem;
  scroll-padding-inline: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dt-land .gz-wand::-webkit-scrollbar { display: none; }
.dt-land .gz-wand:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-cyan); }
.dt-land .gz-wand__karte { flex: 0 0 clamp(12.5rem, 19vw, 16.5rem); scroll-snap-align: start; min-width: 0; }
.dt-land .gz-telefon { position: relative; border-radius: 30px; padding: 7px; background: #05070a; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4); }
.dt-land .gz-telefon video, .dt-land .gz-telefon img { display: block; width: 100%; height: auto; aspect-ratio: 576 / 1024; object-fit: cover; border-radius: 23px; background: #1b222c; }
.dt-land .gz-telefon__ton { position: absolute; right: 1rem; bottom: 1rem; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(16,20,26,.72); color: #fff; display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dt-land .gz-telefon__ton svg { width: 22px; height: 22px; }
.dt-land .gz-telefon__ton:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.dt-land .gz-wand__thema { display: block; margin-top: .75rem; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.75); }

/* Ablauf: Standbild im Telefon und Balken auf hellem Grund */
.dt-land .gz-ps-hoch { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.4rem; padding: 1.2rem; }
.dt-land .gz-telefon--klein { width: min(36%, 11rem); flex: none; border-radius: 24px; padding: 5px; }
.dt-land .gz-telefon--klein img { border-radius: 19px; }
.dt-land .gz-ps-hoch p { margin: 0; max-width: 15rem; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.dt-land .gz-ps-balken { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.2rem; }
.dt-land .gz-tafel--hell { width: min(100%, 24rem); height: auto; background: var(--surface-card); border-color: var(--border-subtle); box-shadow: var(--shadow-md); padding: 1.1rem 1.2rem; }
.dt-land .gz-tafel--hell .gz-tafel__kopf { margin-bottom: .2rem; }
.dt-land .gz-tafel--hell .gz-tafel__kopf b { color: var(--text-strong); font-size: 15px; }
.dt-land .gz-tafel--hell .gz-tafel__kopf span { color: var(--text-muted); }
.dt-land .gz-balken--klein { height: 9.5rem; gap: .7rem; padding-top: 1rem; }
.dt-land .gz-tafel--hell .gz-balken__s > b { color: var(--text-strong); font-size: 1.15rem; }
.dt-land .gz-tafel--hell .gz-balken__s.is-hervor > b { color: var(--color-blue); font-size: 1.45rem; }
.dt-land .gz-tafel--hell .gz-balken__saeule { background: var(--surface-cloud, #e6ebf1); }
.dt-land .gz-tafel--hell .gz-balken__s small { color: var(--text-muted); font-size: 11.5px; }
.dt-land .gz-ps-balken__fuss { margin: .6rem 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }

@media (max-width: 1100px) {
  .dt-land .gz-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-land .gz-zwei { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .dt-land .gz-karten li { padding: 1.15rem 1rem; }
  .dt-land .gz-zahl { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .dt-land .gz-karten span { font-size: 14.5px; }
  .dt-land .gz-trichter li { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .7rem; padding: 0 .8rem; min-height: 3.6rem; }
  .dt-land .gz-trichter li > b { font-size: 1.35rem; }
  .dt-land .gz-trichter__text { font-size: 13.5px; }
  .dt-land .gz-balken { height: 11rem; gap: .6rem; }
  .dt-land .gz-wand__karte { flex-basis: min(62vw, 14rem); }
  .dt-land .gz-pfeile { display: none; }
  .dt-land .gz-ps-hoch p { display: none; }
  .dt-land .gz-telefon--klein { width: min(42%, 9rem); }
}
@media (prefers-reduced-motion: reduce) {
  .dt-land .gz-trichter__band, .dt-land .gz-balken__saeule { animation: none; }
}
.dt-land .gz-zwei.is-wach:not(.is-an) .gz-trichter__band, .dt-land .gz-zwei.is-wach:not(.is-an) .gz-balken__saeule { animation-play-state: paused; }