/* Leistungsseiten /webdesign/, /seo/, /google-ads/, /wartung/ und /fragen/,
   seit dem 17.10.2026. Geladen über "stil: leistungen" im Kopf des Fragments,
   nach /branchen/branche.css: Knöpfe, Fenster, Vitrine, Fragen, Formular und
   Abschluss kommen von dort, hier steht nur, was diese Seiten anders machen.

   Gestaltungsregeln aus dem Echt-Audit vom 17.10.2026 und Daniels Vorgaben
   ("echt und ruhig"): ein Gedanke und ein echtes Bild je Abschnitt, keine
   nachgebauten Oberflächen mit erfundenen Zahlen, das kursive Akzentwort
   höchstens einmal je Seite (im H1), nicht jeder Abschnitt mit Augenbraue.
   Was gezeichnet ist (Preisleiter, Weg einer Anfrage, der Tag mit 1440
   Prüfungen), zeigt eine Regel oder eine Methode und ist als solche
   beschriftet, nie als Messung ausgegeben.

   Alles unter .dt-land, damit nichts auf Kopf, Fuss oder Blase durchschlägt.
   Grid-Kinder tragen min-width:0 (CLAUDE.md, iPhone SE 320). */

.dt-land .ls-wrap{max-width:var(--container-max);margin:0 auto;padding-inline:max(var(--ml-rand),env(safe-area-inset-left))}
.dt-land .ls-sec{padding-block:clamp(4rem,8vw,7.5rem)}
.dt-land .ls-sec--grau{background:var(--surface-subtle);border-block:1px solid var(--border-subtle)}
.dt-land .ls-sec--dunkel{background:var(--surface-dark);color:var(--text-on-dark-muted)}
.dt-land .ls-sec--dunkel h2,.dt-land .ls-sec--dunkel h3{color:#fff}
.dt-land .ls-h2{font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.035em;max-width:24ch}
.dt-land .ls-text{font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.65;color:var(--text-muted);max-width:40rem;margin:1.1rem 0 0}
.dt-land .ls-text b{color:var(--text-strong);font-weight:600}
.dt-land .ls-sec--dunkel .ls-text{color:var(--text-on-dark-muted)}
.dt-land .ls-sec--dunkel .ls-text b{color:#fff}
.dt-land .ls-klein{font-size:.85rem;line-height:1.55;color:var(--text-subtle)}
.dt-land .ls-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.dt-land .ls-kopf > *{min-width:0}
.dt-land .ls-kopf .ls-text{margin:0}
.dt-land .ls-quelle{display:block;margin-top:.7rem;font-size:.8rem;line-height:1.5;color:var(--text-subtle)}
.dt-land .ls-link{color:var(--text-strong);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(16,20,26,.25)}
.dt-land .ls-link:hover{color:var(--color-blue)}
.dt-land .ls-sec--dunkel .ls-link{color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.dt-land .ls-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan);border-radius:4px}

/* ---------- Hero ---------- */
.dt-land .ls-hero{position:relative;padding-top:clamp(2rem,4.5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4.5rem);overflow:hidden}
.dt-land .ls-hero__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.dt-land .ls-hero__raster > *{min-width:0}
.dt-land .ls-ort{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:.85rem;font-weight:500;color:var(--text-muted);margin:0 0 1.2rem}
.dt-land .ls-ort .ml-kreuz{flex:none}
.dt-land .ls-hero h1{font-size:clamp(2.35rem,4.6vw,4rem);line-height:1.03;letter-spacing:-.045em;max-width:16ch}
.dt-land .ls-hero .ls-lead{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.6;color:var(--text-muted);max-width:34rem;margin:1.3rem 0 0}
.dt-land .ls-hero .ls-lead b{color:var(--text-strong);font-weight:600}
/* Preis und Zeit als eine ruhige Zeile, kein Abzeichen */
.dt-land .ls-preiszeile{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.4rem;margin:1.6rem 0 0;padding:.9rem 0;border-block:1px solid var(--border-subtle);max-width:34rem}
.dt-land .ls-preiszeile span{font-size:.95rem;color:var(--text-muted)}
.dt-land .ls-preiszeile b{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text-strong);letter-spacing:-.01em}
.dt-land .ls-aktion{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:1.6rem}
.dt-land .ls-aktion__neben{display:flex;flex-direction:column;gap:.15rem;font-size:.9rem;line-height:1.45;color:var(--text-muted)}
.dt-land .ls-aktion__neben a{color:var(--text-strong);font-weight:600;text-decoration:none;min-height:24px}
.dt-land .ls-aktion__neben a:hover{text-decoration:underline;text-underline-offset:3px}

/* Belege direkt unter dem ersten Bildschirm: drei Zeilen mit Quelle */
.dt-land .ls-belege{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.dt-land .ls-belege li{min-width:0;padding:1.3rem clamp(1rem,2vw,1.6rem) 1.4rem;border-left:1px solid var(--border-subtle)}
.dt-land .ls-belege li:first-child{border-left:0;padding-left:0}
.dt-land .ls-belege b{display:block;font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:600;letter-spacing:-.03em;color:var(--text-strong);line-height:1.15}
.dt-land .ls-belege span{display:block;margin-top:.35rem;font-size:.95rem;line-height:1.5;color:var(--text-body)}
.dt-land .ls-belege small{display:block;margin-top:.45rem;font-size:.78rem;line-height:1.45;color:var(--text-subtle)}

/* ---------- /fragen/: Übersicht nach Thema ---------- */
.dt-land .ls-themen{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0;list-style:none}
.dt-land .ls-themen a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--border-strong);border-radius:999px;font-family:var(--font-display);font-size:.92rem;font-weight:500;color:var(--text-strong);text-decoration:none;background:#fff}
.dt-land .ls-themen a:hover{border-color:var(--ml-ink)}
.dt-land .ls-themen a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan)}
.dt-land .ls-gruppe{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--border-subtle)}
.dt-land .ls-gruppe > *{min-width:0}
.dt-land .ls-gruppe h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em}
.dt-land .ls-gruppe .ls-text{font-size:.98rem}
.dt-land .ls-verweise{list-style:none;margin:0;padding:0}
.dt-land .ls-verweise li{border-bottom:1px solid var(--border-subtle)}
.dt-land .ls-verweise a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;padding:.8rem 0;font-family:var(--font-display);font-size:1.02rem;font-weight:500;color:var(--text-strong);text-decoration:none}
.dt-land .ls-verweise a:hover{color:var(--color-blue)}
.dt-land .ls-verweise a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-cyan);border-radius:6px}
.dt-land .ls-verweise a svg{flex:none;width:16px;height:16px;color:var(--text-subtle)}
.dt-land .ls-gruppe .ml-fragen__liste{margin:0}

/* ---------- Telefon und Tablet ---------- */
@media (max-width:1000px){
  .dt-land .ls-gruppe{grid-template-columns:minmax(0,1fr)}
}

/* ---------- /webdesign/ seit dem 19.10.2026: Bauteile der Startseite ----------
   Die Abschnitte kommen aus src/3- bis 6-*.jsx (siehe Kopf von
   src/pages/webdesign.html). Hier nur der Anker der alten Preisadresse und
   das Antwortfeld in der Spalte der Fragen. */
.dt-land .wd-anker { display: block; height: 0; scroll-margin-top: var(--nav-h, 72px); }
.dt-land .wd-frage-box { margin-top: 1.8rem; padding: 1.2rem 1.25rem 1.1rem; border-radius: 18px;
  background: var(--surface-subtle); border: 1px solid var(--border-subtle); }
.dt-land .wd-frage-box:empty, .dt-land .wd-frage-box:has(> .dt-antwort:empty) { display: none; }
.dt-land .wd-frage-box .dt-aw__titel { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); }
.dt-land .wd-frage-box .dt-aw__untertitel { color: var(--text-muted); opacity: 1; }
.dt-land .wd-frage-box .dt-aw__zeile input { border-radius: 999px; border-color: var(--border-subtle); padding: 0 1.1rem; }
.dt-land .wd-frage-box .dt-aw__senden { border-radius: 999px; background: var(--color-ink-900, #10141a); font-family: var(--font-display); }
.dt-land .wd-frage-box .dt-aw__bsp { background: var(--surface-card); border-color: var(--border-subtle); }

/* Hero nur mit Text (/ppc/, 26.10.2026): zweiter Knopf mit Rand, darunter die
   drei Zusagen als ruhige Zeile mit Haken. */
.dt-land .ml-btn--rand{background:var(--surface-card,#fff);border:1px solid var(--border-subtle);color:var(--text-strong,#0b1b2b)}
.dt-land .ml-hero__belege{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;color:var(--text-muted,#5b6675);font-size:.95rem}
.dt-land .ml-hero__belege li{display:flex;align-items:center;gap:.45rem;min-width:0}
.dt-land .ml-hero__belege li::before{content:"";flex:none;width:1rem;height:1rem;border-radius:50%;background:var(--ml-ink,#0b1b2b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;opacity:.75}
/* Text-Hero buendig mit Logo und Abschnitten, nicht als schmale Mittelspalte. */
.dt-land .ml-hero--text .ml-wrap.ml-hero__raster{max-width:var(--container-max)}
.dt-land .ml-hero--text .ml-hero__raster > div{max-width:52rem}

/* Referenzkarten ohne Portrait (/ppc/: AURA, Ziehli, Farbwerk; 26.10.2026),
   uebernommen aus src/pages/orte.css: das Fenster steht gross im Kreis, wo
   sonst die Person steht, die Infokarte links unter dem Titel. */
@media (min-width:901px){
  #referenzen .rk--ohne-person .rk-titel{width:44%}
  #referenzen .rk--ohne-person .rk-fenster{left:auto;right:4.5%;width:min(46cqw,calc((84cqh - 34px) * 1.6))}
  #referenzen .rk--ohne-person .rk-info{left:4.5%;right:auto;bottom:7cqh;transform-origin:left bottom}
  #referenzen .rk--ohne-person .rk-kreis{opacity:.6}
}
@media (max-width:900px){
  #referenzen .rk--ohne-person .rk-fenster{right:12px;width:auto}
}

/* Hero-Bild /ppc/ (26.10.2026): dartera in der Mitte, die Kanaele auf zwei
   Bahnen. Masse in cqw der Figur, damit alles mit ihr skaliert. Die Bahn
   dreht, das Logo darin dreht gleich schnell zurueck und bleibt aufrecht. */
.dt-land .ml-hero--orbit .ml-hero__raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.dt-land .ml-hero--orbit .ml-hero__raster > div{max-width:none}
.dt-land .po{position:relative;margin:0;width:100%;max-width:560px;justify-self:end;aspect-ratio:1;container-type:inline-size}
.po-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;animation:po-auf 1s cubic-bezier(.2,.8,.2,1) forwards}
.po-ring--3{width:92cqw;height:92cqw;background:rgba(255,255,255,.5);border:1px solid rgba(0,84,121,.1);animation-delay:.05s}
.po-ring--2{width:66cqw;height:66cqw;background:rgba(255,255,255,.35);border:1px solid rgba(0,84,121,.1);animation-delay:.15s}
.po-ring--1{width:44cqw;height:44cqw;background:#fff;border:1px solid rgba(0,84,121,.1);box-shadow:0 18px 50px -18px rgba(0,60,100,.22);animation-delay:.25s}
@keyframes po-auf{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.po-bahn{position:absolute;inset:0;animation:po-dreh 90s linear infinite}
.po-bahn--aussen{--r:46cqw}
.po-bahn--innen{--r:33cqw;animation-duration:70s;animation-direction:reverse}
@keyframes po-dreh{to{transform:rotate(360deg)}}
.po-ikon{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1))}
.po-ikon i{position:absolute;left:0;top:0;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px -10px rgba(0,50,90,.25),0 0 0 1px rgba(0,84,121,.06);animation:po-dreh 90s linear infinite reverse,po-ein .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:0s,calc(.45s + var(--i) * .12s)}
.po-bahn--innen .po-ikon i{animation-duration:70s,.6s;animation-direction:normal,normal}
.po-ikon img{width:6.4cqw;height:6.4cqw;object-fit:contain}
.po-ikon b{position:absolute;left:0;top:8.6cqw;transform:translateX(-50%);white-space:nowrap;font:600 .72rem/1 var(--font-body,system-ui);color:var(--text-muted,#5b6675);opacity:0}
@keyframes po-ein{from{scale:0;opacity:0}to{scale:1;opacity:1}}
.po-punkt{position:absolute;left:50%;top:50%;width:1.9cqw;height:1.9cqw;margin:-.95cqw 0 0 -.95cqw;border-radius:50%;background:var(--f);transform:rotate(var(--a)) translateX(var(--r))}
.po-fluss span{position:absolute;left:50%;top:50%;width:1.3cqw;height:1.3cqw;margin:-.65cqw 0 0 -.65cqw;border-radius:50%;background:#0a84ff;opacity:0;
  animation:po-fluss 3.4s cubic-bezier(.5,0,.75,.4) infinite;animation-delay:calc(1.4s + var(--d))}
@keyframes po-fluss{0%{transform:rotate(var(--a)) translateX(38cqw);opacity:0}15%{opacity:.85}80%{opacity:.85}100%{transform:rotate(var(--a)) translateX(13cqw);opacity:0}}
.po-mitte{position:absolute;left:50%;top:50%;width:30cqw;transform:translate(-50%,-50%);opacity:0;animation:po-ein .7s cubic-bezier(.3,1.3,.5,1) .35s forwards}
.po-mitte img{display:block;width:100%;height:auto}
.po-mitte::after{content:"";position:absolute;left:50%;top:50%;width:44cqw;height:44cqw;margin:-22cqw 0 0 -22cqw;border-radius:50%;border:2px solid rgba(10,132,255,.45);opacity:0;animation:po-welle 3.4s ease-out 2.2s infinite}
@keyframes po-welle{0%{transform:scale(.72);opacity:.6}100%{transform:scale(1.08);opacity:0}}
@media (hover:hover){.dt-land .po:hover .po-ikon b{opacity:1;transition:opacity .2s}}
@media (max-width:1000px){
  .dt-land .ml-hero--orbit .ml-hero__raster{grid-template-columns:minmax(0,1fr)}
  .dt-land .po{justify-self:center;max-width:min(420px,100%)}
}
@media (prefers-reduced-motion:reduce){
  .po-ring,.po-mitte,.po-ikon i{animation:none!important;opacity:1;transform:translate(-50%,-50%)}
  .po-ikon i{transform:none}
  .po-bahn,.po-fluss span,.po-mitte::after{animation:none!important}
}

/* Kundenstimmen als Schiene (/ppc/, 26.10.2026): Gesicht, Zitat, Sterne nur bei
   echter Google-Bewertung. Die Schiene beginnt buendig mit dem Container und
   laeuft rechts aus dem Bild, damit man sieht, dass es weitergeht. */
.dt-land .st{background:var(--surface-subtle);border-top:1px solid var(--border-subtle);padding-bottom:clamp(3rem,6vw,5.5rem);overflow:hidden}
.dt-land .st .dt-section{padding-bottom:0}
.st-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.st-kopf h2{margin:.5rem 0 0;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2-fluid);line-height:1.1;letter-spacing:-.03em;color:var(--text-strong)}
.st-rechts{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.st-pfeile{display:flex;gap:.5rem}
.st-pfeile button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-subtle);background:var(--surface-card,#fff);color:var(--text-strong);display:grid;place-items:center;cursor:pointer;transition:background .2s,opacity .2s}
.st-pfeile button svg{width:16px;height:16px}
.st-pfeile button:hover:not(:disabled){background:var(--surface-subtle)}
.st-pfeile button:disabled{opacity:.35;cursor:default}
.st-pfeile button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-blue)}
.st-schiene{list-style:none;margin:0;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:6px var(--st-rand) 18px;scroll-padding-inline:var(--st-rand);--st-rand:max(var(--ml-rand,20px),calc((100vw - var(--container-max,1200px)) / 2 + var(--ml-rand,20px)))}
.st-schiene::-webkit-scrollbar{display:none}
.st-karte{flex:0 0 calc(100vw - 2 * var(--st-rand));scroll-snap-align:start;scroll-snap-stop:always;min-width:0}
.st-karte figure{margin:0;height:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(1.5rem,3.5vw,3rem) clamp(1.5rem,4vw,3.5rem);border-radius:28px;background:var(--surface-card,#fff);border:1px solid var(--border-subtle);box-shadow:0 22px 50px -30px rgba(0,40,80,.3)}
.st-gesicht{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#eef4fa 0%,#d9e6f1 70%,#cfdeeb 100%);box-shadow:inset 0 0 0 1px rgba(0,84,121,.08)}
.st-gesicht img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:scale(1.12) translateY(6%);transform-origin:50% 0}
.st-text{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.st-art{font:600 .72rem/1 var(--font-body,system-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--color-blue)}
.st-text .dt-sterne{font-size:1.2rem}
.st-karte blockquote{margin:0}
.st-karte blockquote p{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.3;letter-spacing:-.015em;color:var(--text-strong)}
.st-wer{display:flex;flex-direction:column;gap:.2rem;min-width:0;padding-top:1rem;border-top:1px solid var(--border-subtle)}
.st-wer b{font-weight:600;color:var(--text-strong);font-size:1.02rem}
.st-wer small{font-size:.9rem;color:var(--text-muted);line-height:1.35}
.st-wer .st-quelle{font-size:.8rem;opacity:.85}
.st-punkte{display:flex;justify-content:center;gap:2px;margin-top:.6rem}
.st-punkte button{width:28px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.st-punkte button::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--border-strong,#c3ccd6);transition:width .25s,background .25s}
.st-punkte button.ist-an::before{width:24px;background:var(--text-strong,#0b1b2b)}
.st-punkte button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-blue);border-radius:8px}
@media (max-width:760px){
  .st-karte figure{grid-template-columns:minmax(0,1fr);justify-items:start;gap:1.2rem}
  .st-gesicht{width:120px}
}
.st-schiene{cursor:grab;user-select:none}
.st-schiene.ist-gezogen{cursor:grabbing}
.st-schiene img{-webkit-user-drag:none}

/* Ab zwoelf Fallstudien (/ppc/ hat 15, 27.10.2026) sind die Punkte auf dem
   Telefon breiter als der Bildschirm (424 bei 390). Dieselbe Regel wie in
   src/pages/orte.css: enger zusammen, Tippflaeche bleibt 44 Punkte. */
@media (max-width:600px){
  #referenzen .dt-rg__pille:has(.dt-rg__punkt:nth-child(12)) .dt-rg__punkt:not(.is-aktuell){margin:0 -15px}
}