/* ============================================================
   LABOR-SEITE – demospezifische Styles
   Baut auf styles.css auf (Tokens, Basis, Header, Buttons, Footer).
   ============================================================ */

/* Akzent-Schein folgt jetzt automatisch dem Akzent
   -> der Live-Konfigurator kann --accent ändern, alles zieht mit. */
:root{ --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); }

/* ---------- Labor-Hero mit generativen Lichtspuren ---------- */
.lab-hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:center;isolation:isolate;overflow:hidden;border-top:none}
#trails{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.lab-badge{
  display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-eyebrow);
  text-transform:uppercase;letter-spacing:.18em;font-weight:600;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.2rem;
  background:color-mix(in srgb,var(--surface) 55%, transparent);
}
.lab-badge .pip{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.lab-hero h1{font-size:var(--fs-h1);max-width:17ch;margin:0 0 1.3rem;font-weight:600}
.lab-hero .lead{max-width:54ch;margin-bottom:2rem}
.lab-hero .hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* Feature-Reihe & .for-you sind jetzt in styles.css (seitenübergreifend). */

/* ---------- Echtzeit-3D-Bühne ---------- */
.stage3d{
  aspect-ratio:1/1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;position:relative;min-height:300px;cursor:grab;touch-action:none;
}
.stage3d:active{cursor:grabbing}
.stage3d canvas{display:block;width:100%;height:100%}
.stage3d .hint{position:absolute;left:1rem;bottom:.9rem;font-size:.76rem;color:var(--ink-soft);letter-spacing:.03em;pointer-events:none}

/* ---------- Live-Konfigurator ---------- */
.config{background:linear-gradient(180deg, color-mix(in srgb,var(--paper) 55%, var(--surface)), var(--surface));border:1px solid color-mix(in srgb,var(--line) 65%, transparent);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;box-shadow:var(--edge), var(--sh-2)}
[data-theme="dark"] .config{background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 70%, var(--paper)), var(--surface));box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--sh-2)}
.config .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.config .row:last-child{border-bottom:none}
.config .row > .lbl{font-size:.92rem;font-weight:600}
.swatches{display:flex;gap:.5rem}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;outline-offset:2px;transition:transform .15s var(--ease)}
.swatch:hover{transform:scale(1.12)}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.config input[type="range"]{accent-color:var(--accent);width:150px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{font:inherit;font-size:.85rem;padding:.42rem .9rem;background:none;border:none;cursor:pointer;color:var(--ink-soft);transition:color .2s,background .2s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.preview-card{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 1.5rem;background:var(--paper);transition:border-radius .3s var(--ease)}
.preview-card h3{font-size:1.35rem;margin-bottom:.45rem;font-weight:600}
.preview-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.1rem}

/* ---------- Raster kleinerer Demos ---------- */
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media(max-width:820px){.demo-grid{grid-template-columns:1fr}}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;min-height:250px;display:flex;flex-direction:column}
.demo > h3{font-size:var(--fs-h3);font-weight:600;margin-bottom:.25rem}
.demo > .sub{font-size:.88rem;color:var(--ink-soft)}
.demo .play{flex:1;display:flex;align-items:center;justify-content:center;padding:1.3rem 0;width:100%}
.demo .for-you{margin-top:0}

/* Magnetische Elemente */
.magnet-field{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;width:100%}
.magnet{will-change:transform;transition:transform .3s var(--ease)}
.magnet.btn{padding:.8rem 1.3rem}

/* Kinetische Typografie */
.kinetic{
  font-family:var(--font-display);font-size:clamp(2rem,7vw,3.2rem);font-weight:600;
  letter-spacing:-.01em;line-height:1.04;text-align:center;cursor:pointer;user-select:none;
  color:var(--ink);
}
.kinetic:hover{color:var(--accent)}

/* Reaktive Daten */
.data-wrap{width:100%}
.bars{display:flex;align-items:flex-end;gap:.6rem;height:120px;width:100%;margin-bottom:1rem}
.bar{flex:1;background:var(--accent);border-radius:6px 6px 0 0;height:20%;transition:height .16s ease-out;min-width:8px}
.bar:nth-child(even){background:color-mix(in srgb,var(--accent) 50%, var(--line))}
.data-controls{display:flex;align-items:center;gap:1rem}
.data-controls input[type="range"]{accent-color:var(--accent);flex:1}
.data-num{font-family:var(--font-display);font-size:1.5rem;min-width:3ch;text-align:right}

/* Parallax-Tiefe (4D) */
.depth{position:relative;height:170px;width:100%;perspective:700px;transform-style:preserve-3d}
.depth .layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease);will-change:transform}
.depth .blob{border-radius:50%;background:var(--accent);opacity:.85}
.depth .ring{border:1.5px solid var(--accent);border-radius:50%;opacity:.5}

/* ---------- Abschluss-CTA ---------- */
.lab-cta{text-align:center}
.lab-cta h2{font-size:var(--fs-h2);margin:.5rem auto 1rem;max-width:18ch;font-weight:600}
.lab-cta .lead{margin:0 auto 2rem;max-width:46ch}
.lab-cta .hero-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- Labor: Responsive-Feinschliff ---------- */
@media(max-width:600px){
  .stage3d{min-height:260px}
  .config{padding:1.2rem}
  .config .row{flex-wrap:wrap;gap:.6rem}
  .config input[type="range"]{width:100%}
  .demo{min-height:auto;padding:1.3rem}
  .bars{height:100px}
  .depth{height:150px}
}
@media(max-width:380px){
  .magnet-field{flex-direction:column;align-items:stretch}
}

/* ---------- Generative Muster ---------- */
.genart-wrap{width:100%;display:flex;flex-direction:column;gap:.8rem;align-items:center}
#genart{width:100%;height:auto;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer}
.genart-btn{padding:.5rem 1.1rem;font-size:.88rem}

/* ---------- Sofort-Suche ---------- */
.isearch{width:100%;max-width:340px}
.isearch input{width:100%;font:inherit;font-size:1rem;padding:.65rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.isearch ul{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;min-height:132px}
.isearch li{font-size:.9rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink-soft)}
.isearch li mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 .1em;font-weight:600}
.is-count{display:block;margin-top:.55rem;font-size:.8rem;color:var(--ink-soft)}

/* ---------- Vorher/Nachher-Vergleich ---------- */
/* Breite immer = Container; Höhe rein über aspect-ratio. KEIN min-height –
   das würde zusammen mit aspect-ratio die Breite aufblähen (240×16/9 = 427px)
   und den Viewport auf dem Handy sprengen. */
.ba{position:relative;width:100%;max-width:860px;margin:0 auto;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;--split:50%;touch-action:none;cursor:ew-resize}
.ba-pane{position:absolute;inset:0}
.ba-new{clip-path:inset(0 0 0 var(--split))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--accent);z-index:3;pointer-events:none;transform:translateX(-1px)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 6px 18px -6px rgba(0,0,0,.4)}
/* Range nur noch als sichtbar fokussierbare Tastatur-Bedienung (schmaler
   Streifen unten). Das eigentliche Ziehen läuft per Pointer-Events auf .ba. */
.ba-range{position:absolute;left:0;right:0;bottom:0;width:100%;height:26px;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:2px solid var(--on-accent);outline-offset:2px}
.ba-tag{position:absolute;top:.8rem;z-index:3;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;pointer-events:none}
.ba-tag-old{left:.8rem;background:rgba(60,55,45,.75);color:#f3efe6}
.ba-tag-new{right:.8rem;background:var(--accent);color:var(--on-accent)}

/* Alte Website (bewusst aus der Zeit gefallen) */
.om{height:100%;display:flex;flex-direction:column;background:#e8e4d8;color:#3c372d;font-family:Georgia,"Times New Roman",serif}
.om-bar{background:#5a6e8c;color:#f0ead8;padding:.55rem .9rem;font-size:clamp(.7rem,1.6vw,.95rem);font-weight:700;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.om-nav{display:flex;flex-wrap:wrap;gap:.15rem;background:#c9c2ae;padding:.3rem .5rem;border-bottom:2px outset #efe9d9}
.om-nav i{font-style:normal;font-size:clamp(.55rem,1.3vw,.72rem);background:#efe9d9;border:1px outset #fff;padding:.18rem .5rem;color:#31404f;text-decoration:underline}
.om-body{flex:1;display:flex;gap:.7rem;padding:.7rem .9rem;min-height:0}
.om-main{flex:2.2;min-width:0}
.om-main b{display:block;font-size:clamp(.7rem,1.8vw,1rem);color:#8c2b2b;margin-bottom:.55rem}
.om-main i,.om-side i{display:block;height:6px;background:#b8b09a;margin-bottom:5px;border-radius:1px}
.om-main i.s,.om-side i.s{width:62%}
.om-side{flex:1;background:#efe9d9;border:1px inset #fff;padding:.5rem .6rem;min-width:0}
.om-side span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;color:#8c2b2b;margin-bottom:.4rem}
.om-side em{display:block;font-size:clamp(.52rem,1.2vw,.66rem);color:#6d675a;margin-top:.5rem;line-height:1.45}
.om-foot{background:#c9c2ae;text-align:center;font-size:clamp(.55rem,1.3vw,.7rem);padding:.35rem;color:#514b3e}

/* Neue Website – kompakte, hochwertige Fassung der eigenen Designsprache */
.nm{height:100%;display:flex;flex-direction:column;background:
  radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--accent) 9%, transparent), transparent 55%), var(--paper)}
.nm-bar{display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;border-bottom:1px solid color-mix(in srgb,var(--line) 70%, transparent)}
.nm-logo{display:flex;align-items:center;gap:.42rem;font-family:var(--font-display);font-weight:700;font-size:clamp(.72rem,1.6vw,.95rem);color:var(--ink);letter-spacing:-.01em}
.nm-logo b{width:13px;height:13px;border-radius:5px;background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff))}
.nm-links{display:flex;gap:.5rem;margin-left:auto}
.nm-links i{width:clamp(16px,3.4vw,30px);height:6px;border-radius:3px;background:var(--line)}
.nm-cta{width:clamp(40px,8vw,64px);height:19px;border-radius:999px;background:var(--accent);box-shadow:0 4px 10px -4px var(--accent)}
.nm-hero{flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:1.1rem;align-items:center;padding:.9rem 1.1rem;min-height:0}
.nm-hero-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.nm-eyebrow{width:clamp(46px,9vw,72px);height:12px;border-radius:999px;margin-bottom:.6rem;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.nm-hero-text b{font-family:var(--font-serif);font-weight:560;font-size:clamp(.95rem,2.7vw,1.6rem);letter-spacing:-.02em;line-height:1.08;color:var(--ink);margin-bottom:.6rem}
.nm-hero-text i{display:block;height:6px;border-radius:3px;background:var(--line);width:88%;margin-bottom:6px}
.nm-hero-text i.s{width:60%}
.nm-actions{display:flex;gap:.5rem;margin-top:.7rem}
.nm-btn{width:clamp(52px,10vw,84px);height:22px;border-radius:999px;background:var(--accent);box-shadow:0 6px 14px -6px var(--accent)}
.nm-btn.ghost{width:clamp(38px,7vw,60px);background:transparent;border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);box-shadow:none}
/* „Foto"-Kachel mit schwebender Glas-Karte – füllt die rechte Hälfte,
   damit der Nachher-Ausschnitt nie leer wirkt und hochwertig aussieht. */
.nm-hero-visual{position:relative;align-self:stretch;min-height:96px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 25% 12%, color-mix(in srgb,#fff 45%,transparent), transparent 55%),
    linear-gradient(150deg, var(--accent), color-mix(in srgb,var(--accent) 45%, #6b4ed8) 55%, color-mix(in srgb,var(--accent) 30%,#111) 100%);
  box-shadow:0 20px 40px -24px color-mix(in srgb,var(--accent) 70%,#000), inset 0 1px 0 rgba(255,255,255,.25)}
.nm-chip{position:absolute;left:.6rem;bottom:.6rem;right:.9rem;display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:10px;
  background:color-mix(in srgb,var(--paper) 82%, transparent);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.nm-chip em{flex:none;width:20px;height:20px;border-radius:6px;background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff))}
.nm-chip-tx{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.nm-chip-tx u{display:block;height:5px;border-radius:3px;background:var(--ink);opacity:.75;text-decoration:none}
.nm-chip-tx u.s{width:55%;opacity:.4}
.nm-cards{display:flex;gap:.6rem;padding:0 1.1rem 1rem}
.nm-card{flex:1;display:flex;flex-direction:column;gap:5px;padding:.6rem;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 22px -18px rgba(20,30,80,.5)}
.nm-ic{width:20px;height:20px;border-radius:7px;margin-bottom:.15rem;background:color-mix(in srgb,var(--accent) 20%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.nm-card i{display:block;height:5px;border-radius:3px;background:var(--line);width:100%}
.nm-card i.s{width:62%}
@media(max-width:600px){
  .nm-hero{grid-template-columns:1fr .8fr;gap:.7rem;padding:.7rem}
  .nm-cards{padding:0 .7rem .7rem;gap:.45rem}
  .nm-card{padding:.5rem}
  .nm-chip{right:.5rem}
}

/* ---------- Website-Schnellcheck ---------- */
.scheck .lbl{display:block;font-size:.92rem;font-weight:600;margin-bottom:.6rem}
.scheck-row{display:flex;gap:.6rem}
.scheck-row input{flex:1;min-width:0;font:inherit;font-size:1rem;padding:.7rem .95rem;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink)}
.scheck-row .btn{white-space:nowrap}
.scheck-status{font-size:.9rem;color:var(--ink-soft);margin-top:.75rem;min-height:1.3em}
.scheck-list{list-style:none;margin:.6rem 0 0;padding:0;display:none;flex-direction:column;gap:.45rem}
.scheck-list.on{display:flex}
.scheck-list li{display:flex;gap:.6rem;align-items:baseline;font-size:.92rem;line-height:1.45;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.scheck-list li .ic{flex:none;font-weight:700}
.scheck-list li.gut .ic{color:var(--ok,#2E7D5B)}
.scheck-list li.mau .ic{color:#B0692E}
.scheck-list li small{color:var(--ink-soft)}
.scheck-note{margin-top:.9rem}
.scheck-note a{color:var(--accent);text-decoration:underline}

/* ---------- Projekt-Kalkulator ---------- */
.kalk .krow{padding:1rem 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.kalk .krow:first-child{padding-top:0}
.kalk .lbl{font-size:.92rem;font-weight:600}
.kalk .opt-hint{font-weight:400;color:var(--ink-soft);font-size:.8rem;margin-left:.3rem}
.kalk-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.kalk-chips button{font:inherit;font-size:.86rem;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:.5rem .95rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.kalk-chips button:hover{border-color:var(--accent);color:var(--ink)}
.kalk-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.kalk-range{display:flex;align-items:center;gap:1rem}
.kalk-range input{flex:1;width:auto;accent-color:var(--accent)}
.kalk-num{font-size:.92rem;color:var(--ink-soft);min-width:7.5ch;text-align:right}
.kalk-out{padding:1.15rem 0 .2rem}
.kalk-price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.kalk-sum{font-family:var(--font-serif);font-size:clamp(1.55rem,4vw,2.05rem);font-weight:560;letter-spacing:-.01em;font-optical-sizing:auto}
.kalk-once{color:var(--ink-soft);font-size:.9rem}
.kalk-month{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}
.kalk-note{font-size:.8rem;color:var(--ink-soft);font-style:italic;margin-top:.55rem}
.kalk-cta{margin-top:1rem}

@media(max-width:600px){
  .scheck-row{flex-direction:column}
  .ba{aspect-ratio:4/3}   /* etwas höher, damit die Mockups lesbar bleiben */
  .kalk-num{text-align:left}
}

/* ---------- Referenzen / Portfolio ---------- */
.port-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.pfilter{font:inherit;font-size:.88rem;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:.5rem 1rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.pfilter:hover{border-color:var(--accent);color:var(--ink)}
.pfilter[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.4rem}
.pcard{background:var(--surface);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);animation:indIn .4s var(--ease) both}
.pcard:hover{transform:translateY(-4px);box-shadow:0 30px 55px -32px rgba(20,30,80,.4)}
.shot{aspect-ratio:16/10;background:linear-gradient(135deg,hsl(var(--h) 72% 62%),hsl(calc(var(--h) + 42) 70% 52%));padding:.7rem;display:flex;flex-direction:column;gap:.6rem}
.shot-bar{display:flex;align-items:center;gap:.35rem}
.shot-bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
.shot-bar b{flex:1;height:10px;margin-left:.4rem;border-radius:999px;background:rgba(255,255,255,.35)}
.shot-body{flex:1;background:rgba(255,255,255,.92);border-radius:8px;padding:.7rem;display:flex;flex-direction:column;gap:.5rem}
[data-theme="dark"] .shot-body{background:rgba(20,22,28,.9)}
.s-hero{height:38%;border-radius:6px;background:hsl(var(--h) 60% 88%)}
[data-theme="dark"] .s-hero{background:hsl(var(--h) 40% 26%)}
.s-row{display:flex;gap:.4rem}
.s-row i{flex:1;height:22px;border-radius:5px;background:hsl(var(--h) 45% 90%)}
[data-theme="dark"] .s-row i{background:hsl(var(--h) 30% 24%)}
.s-line{height:7px;border-radius:4px;background:hsl(var(--h) 30% 85%)}
[data-theme="dark"] .s-line{background:hsl(var(--h) 20% 28%)}
.s-line.short{width:60%}
.pmeta{padding:1.3rem 1.4rem 1.5rem}
.pkind{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:600}
.pmeta h3{font-size:1.2rem;font-weight:600;letter-spacing:-.01em;margin:.3rem 0 .7rem}
.ptags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.ptags span{font-size:.75rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem;color:var(--ink-soft)}
.presult{display:flex;align-items:flex-start;gap:.5rem;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:.45em}
.port-note{margin-top:1.5rem;font-size:.8rem;color:var(--ink-soft);font-style:italic}