/* pottscale · Leistungsseiten /webdesign, /seo, /google-ads, /meta-ads (10.11.2026)
   Je Stufe der Startseite (#system) eine Seite: Hero mit Stufen-Treppe, Probleme, Einordnung im System,
   was wir tun, ein echter Fall, Ablauf, Fragen, Abschluss.
   Baut auf system.css auf (dunkle Bühne, Klassen sy-). Eigenes Präfix ls-:
   site.css und teile.css haben globale Klassen ohne Präfix (.licht, .tag, .kopfz …). */

/* ---------- Hero mit Stufen-Treppe ---------- */
.ls-hero .sy-hero-in{align-items:center;gap:56px;padding-bottom:84px}
.ls-hero .sy-hero-text{padding-bottom:0}
.ls-hero h1{font-size:clamp(38px,4.4vw,64px)}
.ls-stufen{min-width:0}
.ls-stufen-titel{margin:0 0 14px;font:700 11.5px var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.ls-treppe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.ls-treppe a{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:calc(136px + var(--i) * 52px);padding:16px 14px;border-radius:18px;background:var(--karte);border:1px solid var(--kl);border-top:3px solid rgba(148,224,203,.4);text-decoration:none;color:var(--tx);transition:transform .35s var(--ease),border-color .35s}
.ls-treppe a:hover{transform:translateY(-4px);border-color:rgba(148,224,203,.55)}
.ls-treppe i{font:800 38px/.9 var(--display);font-style:normal;letter-spacing:-.04em;color:rgba(148,224,203,.34)}
.ls-treppe b{display:block;font:700 15px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
.ls-treppe small{display:block;margin-top:5px;font:500 12.5px/1.3 var(--body);color:var(--tx)}
.ls-treppe a.an{background:linear-gradient(160deg,var(--mint),var(--mint-2));border-color:transparent;border-top-color:#fff}
.ls-treppe a.an i{color:rgba(3,35,45,.38)}
.ls-treppe a.an b,.ls-treppe a.an small{color:#03232D}
.ls-stufen-hinweis{margin:14px 0 0;font-size:14.5px;line-height:1.5;color:var(--tx)}

/* ---------- Zwei Spalten: Überschrift links, Liste rechts ---------- */
.ls-zwei{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.ls-zwei .sy-liste{margin-top:0}
.ls-zwei .sy-knopf-reihe.links{margin-top:0}
@media (min-width:1081px){.ls-zwei>div:first-child{position:sticky;top:110px}}

/* ---------- Einordnung: davor, hier, danach ---------- */
.ls-bruecke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:44px}
.ls-br{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:24px;background:var(--karte);border:1px solid var(--kl)}
.ls-br.jetzt{border-color:rgba(148,224,203,.5);background:linear-gradient(160deg,rgba(148,224,203,.15),rgba(148,224,203,.03))}
.ls-br:not(:first-child)::before{content:"→";position:absolute;left:-27px;top:30px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--display);color:var(--mint);background:#06303B;border:1px solid rgba(148,224,203,.35)}
.ls-br-tag{font:700 11.5px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.ls-br h3{margin:0;font:700 clamp(22px,2vw,26px)/1.2 var(--display);letter-spacing:-.01em;color:#fff}
.ls-br p{margin:0;font-size:16px;line-height:1.55;color:var(--tx)}
.ls-br-links{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px 20px}
.ls-br-links a{display:inline-flex;align-items:center;min-height:44px;font:600 15px var(--display);color:#fff;text-decoration:underline;text-decoration-color:var(--mint-2);text-decoration-thickness:2px;text-underline-offset:5px}
.ls-br-links a:hover{color:var(--mint)}

/* ---------- Was wir tun ---------- */
.ls-tun{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:t}
.ls-tun li{counter-increment:t;display:grid;gap:10px;align-content:start;padding:28px;border-radius:24px;background:var(--karte);border:1px solid var(--kl)}
.ls-tun li::before{content:counter(t,decimal-leading-zero);font:800 44px/.9 var(--display);letter-spacing:-.04em;color:rgba(148,224,203,.45)}
.ls-tun h3{margin:6px 0 0;font:700 20px/1.25 var(--display);letter-spacing:-.01em;color:#fff}
.ls-tun p{margin:0;font-size:15.5px;line-height:1.55;color:var(--tx)}
.ls-tun a,.ls-text-link{color:#fff;text-decoration:underline;text-decoration-color:var(--mint-2);text-decoration-thickness:2px;text-underline-offset:4px}
.ls-tun a:hover,.ls-text-link:hover{color:var(--mint)}

/* ---------- Ein echter Fall ---------- */
.ls-fall{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);margin-top:44px;border-radius:28px;overflow:hidden;background:var(--karte);border:1px solid var(--kl)}
.ls-fall figure{position:relative;margin:0;min-height:100%}
.ls-fall figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ls-fall-text{display:grid;gap:16px;align-content:start;padding:38px;min-width:0}
.ls-fall-wer{font:600 11.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.ls-fall h3{margin:0;font:700 clamp(24px,2.4vw,32px)/1.15 var(--display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.ls-fall p{margin:0;font-size:16.5px;line-height:1.6;color:var(--tx)}
.ls-fall-zahlen{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ls-fall-zahlen li{padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--kl);min-width:0}
.ls-fall-zahlen b{display:block;font:800 clamp(22px,2.2vw,32px)/1.05 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.ls-fall-zahlen span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--tx)}
.ls-fall p.ls-fall-hinweis{font-size:14.5px;line-height:1.5;color:var(--tx)}
.ls-fall-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.ls-fall-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;font:600 15px var(--display);color:#fff;text-decoration:underline;text-decoration-color:var(--mint-2);text-decoration-thickness:2px;text-underline-offset:5px}
.ls-fall-links a:not(.btn):hover{color:var(--mint)}
.ls .sy-maps{margin-top:72px}

/* ---------- Breiten ---------- */
@media (max-width:1080px){
  .ls-hero .sy-hero-in{gap:40px;padding-bottom:60px}
  .ls-zwei{grid-template-columns:minmax(0,1fr);gap:28px}
  .ls-bruecke{grid-template-columns:minmax(0,1fr);gap:26px}
  .ls-br:not(:first-child)::before{content:"↓";left:28px;top:-27px}
  .ls-tun{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ls-fall{grid-template-columns:minmax(0,1fr)}
  .ls-fall figure{min-height:0;aspect-ratio:16/9}
}
@media (max-width:760px){
  .ls-hero .sy-hero-in{padding-bottom:48px}
  .ls-treppe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .ls-treppe a{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px 14px}
  .ls-treppe i{font-size:28px}
  .ls-treppe small{margin-top:2px}
  .ls-br{padding:22px 20px}
  .ls-tun{grid-template-columns:minmax(0,1fr);gap:12px}
  .ls-tun li{padding:22px 20px}
  .ls-tun li::before{font-size:36px}
  .ls-fall-text{padding:24px 20px}
  .ls-fall-zahlen{grid-template-columns:minmax(0,1fr)}
  .ls-fall-zahlen li{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:14px;align-items:center}
  .ls-fall-zahlen span{margin-top:0}
  .ls .sy-maps{margin-top:52px}
}