/* =========================================================
   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(47,107,79,.16);
  --glow-warm:  rgba(201,151,63,.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(42,97,71,.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%, #4C8C69 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:#EFF1EB;
}
#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(47,107,79,.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(76,140,105,.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(42,97,71,.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:#F6F6F1; border-bottom:1px solid var(--line);
}
.stage-chrome i{ width:8px; height:8px; border-radius:50%; background:#DADDD3; }
.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);
}

/* ---------------------------------------------------------
   HERO DUNKEL (11.10.2026) – tiefgrüne Bühne mit Marmor-
   Maserung, Beispiel-Website schräg im Raum (Clark-Prinzip)
   --------------------------------------------------------- */
.hero-shell{
  border-color: rgba(255,255,255,.06);
  background:
    radial-gradient(700px 520px at 82% 38%, rgba(76,140,105,.30), transparent 65%),
    radial-gradient(600px 420px at 4% 108%, rgba(201,151,63,.10), transparent 60%),
    linear-gradient(135deg, #0F271D 0%, #1B4330 55%, #133426 100%);
}
/* Maserung statt Körnung: weiche helle Adern wie in Stein */
.hero-shell::after{
  opacity:.38; mix-blend-mode:soft-light;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0028 .0075' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -2.2 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
.hero h1{ color:#fff; }
.hero .grad-green{
  background:linear-gradient(100deg, #D9EBDD 10%, #A9D4B5 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .hero-sub{ color:rgba(255,255,255,.78); }
.hero .status-pill{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
  color:#E8EFE9; box-shadow:none;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hero .status-dot, .hero .status-dot::after{ background:#A9D4B5; }
.hero .btn-primary{ background:#D6A24A; color:#1C1A12; box-shadow:0 12px 30px rgba(214,162,74,.28); }
.hero .btn-primary:hover{ background:#E2B566; color:#1C1A12; }
.hero .btn-primary .arw{ background:rgba(18,48,31,.12); }
.hero .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.hero .btn-ghost:hover{ color:#fff; border-color:#A9D4B5; }
.hero .hero-trust{ color:rgba(255,255,255,.85); }
.hero .ht-ico{ background:rgba(169,212,181,.16); color:#A9D4B5; }

/* Bühne: Browserfenster schräg im Raum, richtet sich beim Überfahren auf */
.hero-stage{ perspective:1800px; }
.stage-frame{
  width:114%; margin-left:-2%;
  transform: rotateY(-15deg) rotateX(7deg) rotateZ(1.5deg);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transform-origin: 30% 50%;
  border-color: rgba(255,255,255,.14);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    -30px 50px 80px rgba(0,0,0,.45),
    -8px 16px 30px rgba(0,0,0,.30);
  transition: transform .9s var(--ease);
}
.hero-stage:hover .stage-frame{ transform: rotateY(-5deg) rotateX(3deg) rotateZ(.5deg); }
/* kein Hineinzoomen im schraegen Fenster: das Skalieren macht das Bild weich */
.hero .stage-slide.is-on img{ animation:none; }
.hero .stage-tabs{ position:relative; z-index:2; margin-top:1.6rem; max-width:88%; }
.hero .stage-tab{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.65); }
.hero .stage-tab:hover, .hero .stage-tab.is-on{ color:#fff; border-color:rgba(169,212,181,.45); box-shadow:none; }
.hero .st-bar{ background:rgba(255,255,255,.14); }
.hero .st-bar i{ background:#D6A24A; }

@media (max-width: 899px){
  .stage-frame{ width:100%; margin-left:0; transform: rotateY(-8deg) rotateX(5deg); }
}
@media (max-width: 480px){
  .hero h1{ font-size: 8.6vw; }
}
@media (prefers-reduced-motion: reduce){
  .stage-frame, .hero-stage:hover .stage-frame{ transition:none; }
}