/* Live-Demos — nutzt die Komponenten der Startseite (hero, lp-demo-card,
   chap-head, contact, footer). Hier stehen nur die Ergänzungen. */

/* ---------- Brotkrume (auch auf ueber-uns.html) ---------- */
.lp-breadcrumb{display:flex;gap:12px;font-size:11px;color:var(--mut);margin-bottom:26px}
.lp-breadcrumb a:hover{color:var(--acc)}

/* ---------- Hero ---------- */
.hero.lp-hero.demos-hero{padding:150px 0 28px}
.demos-hero .lp-hero-grid{grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.demos-hero h1{font-size:clamp(46px,4.8vw,72px);line-height:1.04;letter-spacing:-3.5px;font-weight:700;color:var(--ink);margin:24px 0 26px}
.demos-hero h1 em{font-family:var(--f-serif);font-weight:450;color:var(--acc);letter-spacing:-3px}
.demos-hero .lp-intro{max-width:400px}
.demos-hero .lp-price-note{max-width:400px}
#websites{padding-top:44px}

/* Ruhige Hairline-Liste als Gegengewicht zur Headline */
.dm-facts{align-self:center}
.dm-facts .lp-showcase-label{padding:0 0 16px;border-bottom:1px solid var(--line)}
.dm-facts ul{list-style:none;margin:0;padding:0}
.dm-facts li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--line)}
.dm-facts b{font-size:14px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.dm-facts li span{font-size:11px;color:var(--mut);text-align:right}
.dm-facts>p{font-size:10px;line-height:1.8;color:var(--dim);margin-top:16px}

/* ---------- Filterleiste (Optik der Startseiten-Vorschau-Chips) ---------- */
.demo-filter{display:flex;gap:7px;flex-wrap:wrap;padding:24px 0 0;border-top:1px solid var(--line);margin-top:34px}
.demo-filter button{font-size:11px;color:var(--mut);padding:9px 18px;border:1px solid var(--line2);border-radius:30px;transition:color .2s,border-color .2s,background .2s}
.demo-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.demo-filter button:hover{border-color:var(--acc)}
[data-group].df-hidden{display:none}

/* ---------- Demo-Slider ---------- */
/* Kopfzeile über dem Slider — gleiche Optik wie das Showcase-Label der Startseite. */
.dm-railhead{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid var(--line);padding-top:16px;margin-bottom:22px}
.dm-railhead>span{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut)}
.dm-hint{font-style:normal}
.dm-nav{display:flex;gap:8px}
.dm-nav[hidden],.dm-progress[hidden]{display:none}
.dm-nav button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line2);
  border-radius:50%;color:var(--ink);background:transparent;transition:border-color .2s,background .2s,color .2s,opacity .2s}
.dm-nav button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.dm-nav button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dm-nav button:disabled{opacity:.3;cursor:default}
/* Auto-Slide-Schalter: Pause-Balken laufend, Play-Dreieck pausiert */
.dm-play[hidden]{display:none}
.dm-play .i-play,.dm-play.is-paused .i-pause{display:none}
.dm-play.is-paused .i-play{display:block;fill:currentColor}
.dm-play{margin-right:6px}

.dm-grid{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.dm-grid::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.dm-grid{scroll-behavior:auto}}
.dm-grid:focus-visible{outline:3px solid var(--acc);outline-offset:6px;border-radius:4px}
/* Wächst auf die volle Breite, solange nichts zu scrollen ist (2-Karten-Reihen). */
.dm-card{display:flex;flex-direction:column;flex:1 0 clamp(290px,40%,470px);min-width:0;scroll-snap-align:start}

/* Dünne Fortschrittslinie unter dem Slider */
.dm-progress{position:relative;height:1px;background:var(--line);margin-top:26px}
.dm-progress>span{position:absolute;left:0;top:-1px;height:3px;background:var(--acc);
  border-radius:2px;transition:left .25s,width .25s}
.dm-card .lp-demo-image{height:300px}
.dm-desc{font-size:13px;line-height:1.85;color:var(--mut);margin-top:14px;flex:1}
.dm-tags{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 18px;padding:0;list-style:none}
.dm-tags li{font-size:10px;letter-spacing:.4px;color:var(--mut);border:1px solid var(--line);border-radius:30px;padding:5px 11px}
.dm-card>.lp-text-link{align-self:flex-start}

/* System-Demos: gleiche Kachel, statt Foto eine ruhige Fläche.
   Icon und Marke oben links, die Schrift steht unten rechts. */
.dm-sys{background:#26372b}
[data-theme="dark"] .dm-sys{background:#1e3025}
.dm-sys::after{background:linear-gradient(180deg,#101a1466,transparent 45%,#101a1466)}
.dm-ic{position:absolute;top:22px;left:23px;z-index:1;width:44px;height:44px;color:#e8efd9;opacity:.85;transition:opacity .3s}
.dm-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dm-card:hover .dm-ic{opacity:1}
.dm-sys>span:not(.dm-ic){top:80px;left:23px}
.dm-sys strong{top:auto;left:auto;bottom:60px;right:23px;text-align:right}

/* ---------- Hinweis „Branche fehlt" ---------- */
.dm-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut);font-size:13px;line-height:1.85}
.dm-note b{color:var(--ink);font-weight:600}
.dm-note a{color:var(--acc);border-bottom:1px solid var(--line2);padding-bottom:2px}
.dm-note a:hover{border-color:var(--acc)}

/* ---------- Kontakt-Zeilen (geteilt mit ueber-uns.html) ---------- */
.lp-lines{margin-bottom:26px;max-width:400px}
.lp-lines a{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line2);font-size:18px;letter-spacing:-.5px;color:var(--ink)}
.lp-lines a:hover{color:var(--acc);border-color:var(--acc)}

@media(max-width:1100px){
  .demos-hero h1{font-size:56px}
  .dm-grid{gap:24px}
  .dm-card{flex-basis:clamp(280px,46%,420px)}
  .dm-railhead>span{max-width:60%}
  .dm-card .lp-demo-image{height:270px}
}
@media(max-width:900px){
  .demos-hero .lp-hero-grid{gap:40px}
  .demos-hero h1{font-size:54px}
  .dm-facts b{font-size:13px}
  .dm-facts li span{font-size:10px}
  .lp-lines a{font-size:16px}
}
@media(max-width:640px){
  .hero.lp-hero.demos-hero{padding:112px 0 20px}
  .demos-hero .lp-hero-grid{grid-template-columns:1fr;gap:34px}
  .lp-breadcrumb{font-size:10px;margin-bottom:18px}
  .demos-hero h1{font-size:clamp(42px,11.5vw,64px);letter-spacing:-2.5px;margin:20px 0 22px}
  #websites{padding-top:46px}
  .demos-hero h1 em{letter-spacing:-2px}
  .dm-facts li{padding:14px 0}
  .dm-facts li span{max-width:45%}
  .demo-filter{margin-top:28px;padding-top:20px;gap:6px}
  .demo-filter button{padding:8px 14px;font-size:10px}
  .dm-railhead{padding-top:14px;margin-bottom:18px}
  /* Der Hinweis darf die Zeile nicht umbrechen — Pfeile und Anschnitt reichen. */
  .dm-hint{display:none}
  .dm-nav button{width:32px;height:32px}
  .dm-grid{gap:18px}
  .dm-card{flex-basis:min(290px,82%)}
  .dm-progress{margin-top:20px}
  .dm-card .lp-demo-image{height:280px}
  .dm-ic{top:20px;left:25px;width:38px;height:38px}
  .dm-sys>span:not(.dm-ic){top:72px;left:25px}
  .dm-sys strong{bottom:56px;right:25px}
  .dm-desc{font-size:12.5px}
  .dm-note{margin-top:32px;font-size:12px}
  .lp-lines{margin-bottom:22px}
}