/* =========================================================
   Maklerwerk – modern.css  (moderne Design-Ebene)
   Wird ZUSÄTZLICH zu style.css geladen und überschreibt gezielt.
   style.css bleibt unverändert.
   ========================================================= */

:root{
  --ease: cubic-bezier(.16,1,.3,1);
  --glow-green: rgba(22,163,74,.16);
  --glow-warm:  rgba(243,167,46,.10);
}

/* ---------------------------------------------------------
   1) HERO – eingerückte Box mit Glow und feiner Körnung
   --------------------------------------------------------- */
.hero{
  background: none;                 /* alter Verlauf raus */
  padding: clamp(.6rem,2vw,1.4rem);
  padding-bottom: clamp(2rem,5vw,3rem);
}
.hero-shell{
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px,3vw,34px);
  border: 1px solid rgba(19,133,60,.16);
  padding-block: clamp(2.4rem,6vw,4.5rem);
  background:
    radial-gradient(900px 440px at 78% -12%, var(--glow-green), transparent 62%),
    radial-gradient(760px 400px at 12% 112%, var(--glow-warm),  transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg-soft) 100%);
}
/* Körnung (SVG-Rauschen, keine externe Datei) */
.hero-shell::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-shell > .container{ position:relative; z-index:1; }

/* Status-Pille mit pulsierendem Punkt */
.status-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.45rem 1rem .45rem .8rem;
  font-size:.86rem; font-weight:600; color:var(--ink-2);
  box-shadow:var(--shadow-sm); margin-bottom:1.1rem;
}
.status-dot{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--green-aa); flex:none; }
.status-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--green-aa); animation:mw-pulse 2.4s ease-out infinite;
}
@keyframes mw-pulse{ 0%{transform:scale(1);opacity:.65} 100%{transform:scale(2.8);opacity:0} }

/* Größere, zweifarbige Überschrift */
.hero h1{
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.5rem);
  letter-spacing:-.035em; line-height:1.06;
  text-wrap: balance;
}
.grad-green{
  background:linear-gradient(100deg, var(--green-aa) 10%, #2FBF6B 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* CTA mit Pfeil im Quadrat */
.btn-arrow{ padding-right:.5rem; gap:.9rem; }
.btn-arrow .arw{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:rgba(255,255,255,.2); display:grid; place-items:center;
  font-size:1rem; transition:transform .35s var(--ease), background .25s ease;
}
.btn-arrow:hover .arw{ transform:translateX(3px); background:rgba(255,255,255,.3); }

/* ---------------------------------------------------------
   2) BEISPIELPROJEKTE – Vorschau scrollt beim Überfahren durch
   --------------------------------------------------------- */
#projekte .project-shot{
  display:flex; flex-direction:column;
  aspect-ratio: 1360 / 1040;          /* etwas höher als vorher */
  background:#eef2f0;
}
#projekte .shot-view{ position:relative; flex:1; overflow:hidden; }
#projekte .shot-long{
  position:absolute; top:0; left:0; width:100%; height:auto;
  aspect-ratio:auto; object-fit:unset;
  transform:translateY(0);
  transition:transform 3.4s cubic-bezier(.33,0,.25,1);
  will-change:transform;
}
#projekte .project-card:hover .shot-long,
#projekte .project-card:focus-visible .shot-long,
#projekte .project-card.auto-preview .shot-long{
  transform:translateY(var(--shift,0px));
}
/* Hinweis-Pille auf der Vorschau */
.shot-hint{
  position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(15,26,21,.72); color:#fff;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.3rem .65rem; border-radius:999px;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s var(--ease);
  pointer-events:none; backdrop-filter:blur(4px);
}
#projekte .project-card:hover .shot-hint{ opacity:1; transform:none; }

/* Leichtes 3D-Kippen */
#projekte .project-card{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);
  transition:transform .3s var(--ease), box-shadow .35s ease, border-color .25s ease;
}
#projekte .project-card:hover{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}

/* ---------------------------------------------------------
   3) Lichtschein folgt der Maus (Spotlight)
   --------------------------------------------------------- */
.spot{ position:relative; }
.spot::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(22,163,74,.13), transparent 62%);
}
.spot:hover::after{ opacity:1; }

/* ---------------------------------------------------------
   4) Deutlichere Staffelung beim Einblenden
   --------------------------------------------------------- */
.reveal{ transform:translateY(28px) scale(.985); }
.reveal.is-visible{ transform:none; }
.problem-grid > .reveal:nth-child(2), .project-grid > .reveal:nth-child(2),
.price-grid > .reveal:nth-child(2),   .steps > .reveal:nth-child(2){ transition-delay:.13s; }
.problem-grid > .reveal:nth-child(3), .project-grid > .reveal:nth-child(3),
.price-grid > .reveal:nth-child(3),   .steps > .reveal:nth-child(3){ transition-delay:.26s; }
.problem-grid > .reveal:nth-child(4), .steps > .reveal:nth-child(4){ transition-delay:.39s; }
.problem-grid > .reveal:nth-child(5){ transition-delay:.52s; }
.problem-grid > .reveal:nth-child(6){ transition-delay:.65s; }

/* ---------------------------------------------------------
   5) Header schrumpft beim Scrollen
   --------------------------------------------------------- */
.header-inner{ transition:min-height .35s var(--ease); }
.site-header.scrolled .header-inner{ min-height:62px; }
.site-header.scrolled .brand-mark{ width:32px; height:32px; transition:width .3s var(--ease), height .3s var(--ease); }

/* ---------------------------------------------------------
   6) Dunkle Sektionen bekommen einen dezenten Schein
   --------------------------------------------------------- */
.section-ink{ position:relative; overflow:hidden; }
.section-ink::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 380px at 82% -10%, rgba(47,191,107,.14), transparent 60%);
}
.section-ink > .container{ position:relative; z-index:1; }

/* ---------------------------------------------------------
   7) Reduzierte Bewegung – alles aus
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .status-dot::after{ animation:none; }
  #projekte .shot-long{ transition:none; transform:none !important; }
  #projekte .project-card{ transform:none !important; }
  .spot::after{ display:none; }
  .reveal{ transform:none !important; }
}

/* =========================================================
   8) ZEICHEN AUS DER BRANCHE + BEWEGUNG
   ========================================================= */

/* Sprite selbst nie anzeigen */
.mw-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Einheitlicher Strich-Stil fuer alle Branchen-Symbole */
.bb-ico, .problem-ico svg{
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Laufband: Sparten laufen durchgehend ---------- */
.branchen-band{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%);
  padding:.85rem 0;
}
.branchen-band::before,
.branchen-band::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.branchen-band::before{ left:0;  background:linear-gradient(90deg,#fff,rgba(255,255,255,0)); }
.branchen-band::after { right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0)); }

.bb-track{ display:flex; width:max-content; animation:bb-run 46s linear infinite; }
.branchen-band:hover .bb-track{ animation-play-state:paused; }
.bb-row{ display:flex; align-items:center; gap:.7rem; padding-right:.7rem; }
.bb-row li{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1.05rem .5rem .8rem;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.bb-ico{ width:20px; height:20px; flex:none; color:var(--green-aa); }
@keyframes bb-run{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Hero-Buehne: Beispiele wechseln automatisch ---------- */
.hero-stage{ position:relative; }
.stage-frame{
  position:relative; overflow:hidden;
  aspect-ratio:1360/860;
  border-radius:clamp(14px,2vw,20px);
  border:1px solid rgba(19,133,60,.18);
  background:var(--bg-soft);
  box-shadow:var(--shadow-lg);
}
.stage-chrome{
  position:absolute; inset:0 0 auto 0; height:30px; z-index:3;
  display:flex; align-items:center; gap:6px; padding-left:12px;
  background:#F5FAF7; border-bottom:1px solid var(--line);
}
.stage-chrome i{ width:8px; height:8px; border-radius:50%; background:#D8E2DC; }
.stage-slide{
  position:absolute; inset:30px 0 0 0; z-index:1;
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--ease), visibility .8s;
}
.stage-slide img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.stage-slide.is-on{ opacity:1; visibility:visible; z-index:2; }
.stage-slide.is-on img{ animation:stage-zoom 7.5s linear forwards; }
@keyframes stage-zoom{ from{transform:scale(1)} to{transform:scale(1.055)} }

.stage-tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.75rem; }
.stage-tab{
  appearance:none; cursor:pointer; text-align:left; font:inherit;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:.5rem .7rem .55rem;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  color:var(--muted);
  transition:color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.stage-tab:hover{ color:var(--ink); border-color:var(--mint-2); }
.stage-tab.is-on{ color:var(--ink); border-color:var(--mint-2); box-shadow:var(--shadow-sm); }
.st-bar{
  display:block; height:3px; border-radius:2px;
  background:var(--line); margin-bottom:.45rem; overflow:hidden;
}
.st-bar i{ display:block; height:100%; width:0; border-radius:2px; background:var(--green-aa); }
.stage-tab.is-on .st-bar i{ animation:st-fill 7.5s linear forwards; }
@keyframes st-fill{ from{width:0} to{width:100%} }

/* ---------- Symbole auf den Problemkarten ---------- */
.problem-card{ position:relative; }
.problem-ico{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:14px;
  background:var(--mint); color:var(--green-aa);
  margin-bottom:.85rem;
  transition:background .25s ease, color .25s ease, transform .3s var(--ease);
}
.problem-ico svg{ width:24px; height:24px; }
.problem-card:hover .problem-ico{
  background:var(--green-aa); color:#fff; transform:translateY(-2px) rotate(-4deg);
}
/* Nummer wandert nach rechts oben, damit das Symbol fuehrt */
.problem-card .problem-num{
  position:absolute; top:1.1rem; right:1.2rem;
  font-size:.8rem; opacity:.4;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .bb-track{ animation:none; }
  .stage-slide.is-on img{ animation:none; }
  .stage-tab.is-on .st-bar i{ animation:none; width:100%; }
  .problem-card:hover .problem-ico{ transform:none; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 720px){
  .bb-row li{ font-size:.86rem; padding:.45rem .9rem .45rem .7rem; }
  .bb-ico{ width:18px; height:18px; }
  .stage-tab{ font-size:.74rem; padding:.45rem .5rem .5rem; }
}

/* ---------- Feinschliff: Buehne groesser, Laufband beschriftet ---------- */
@media (min-width: 900px){
  .hero-inner{
    grid-template-columns: .86fr 1.14fr;
    gap: clamp(1.8rem, 3.5vw, 3rem);
  }
}
.bb-titel{
  margin:0 0 .7rem; text-align:center;
  font-family:var(--font-body);
  text-transform:uppercase; letter-spacing:.13em;
  font-size:.72rem; font-weight:700; color:var(--muted);
}