/* ==========================================================================
   hilfe.css — NUR Hilfe-Inhalte + Font-Override.
   Header/Footer/Basis kommen 1:1 aus grundboden.webflow.shared.css (1:1 Kopie).
   Wird NACH der Webflow-CSS geladen.
   ========================================================================== */

/* ---------- Inter self-hosted: überschreibt die Webflow-CDN-Schrift (DSGVO) ---------- */
@font-face{
  font-family:'Inter Variablefont Slnt Wght';
  src:url('/assets/font/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --gb-green:#82bb29; --gb-green-hover:#73aa4b; --gb-dim-brown:#4f3a32; --gb-tan:#bba58e;
  --gb-dark:#1f2e2d; --gb-smoke:#eeeee9; --gb-line:#dddee0; --gb-soft:#eaebed;
  --gb-ink:#000; --gb-muted:#677279;
  --gb-shadow:0 2px 20px rgba(0,0,0,.06);
  --gb-shadow-md:0 2px 15px rgba(0,0,0,.12);
  /* Audience-Akzent (pro Track gesetzt) */
  --gb-accent:var(--gb-green);
  --gb-accent-soft:rgba(130,187,41,.10);
  --gb-accent-line:rgba(130,187,41,.28);
}

/* ==========================================================================
   ROLE-TABS
   ========================================================================== */
.gb-tabs{display:inline-flex;gap:.35rem;padding:.35rem;background:#fff;border:1px solid var(--gb-line);border-radius:100rem;box-shadow:var(--gb-shadow)}
.gb-tab{display:inline-flex;align-items:center;gap:.5rem;border:0;background:transparent;border-radius:100rem;padding:.7rem 1.4rem;font:inherit;font-weight:600;font-size:1rem;color:var(--gb-muted);cursor:pointer;transition:background .2s,color .2s}
.gb-tab__dot{width:.55rem;height:.55rem;border-radius:50%}
.gb-tab[data-role="provider"] .gb-tab__dot{background:var(--gb-dim-brown)}
.gb-tab[data-role="seeker"] .gb-tab__dot{background:var(--gb-green)}
.gb-tab.is-active[data-role="provider"]{background:var(--gb-dim-brown);color:#fff}
.gb-tab.is-active[data-role="provider"] .gb-tab__dot{background:var(--gb-tan)}
.gb-tab.is-active[data-role="seeker"]{background:var(--gb-green);color:#fff}
.gb-tab.is-active[data-role="seeker"] .gb-tab__dot{background:#fff}

/* ==========================================================================
   TRACKS + SCENES
   ========================================================================== */
.gb-track{display:none}
.gb-track.is-active{display:block}
.gb-track[data-role="provider"]{--gb-accent:var(--gb-dim-brown);--gb-accent-soft:rgba(79,58,50,.08);--gb-accent-line:rgba(79,58,50,.25)}
.gb-track[data-role="seeker"]{--gb-accent:var(--gb-green);--gb-accent-soft:rgba(130,187,41,.10);--gb-accent-line:rgba(130,187,41,.28)}

.gb-scene{padding-block:clamp(1.75rem,4vw,3.5rem);border-top:1px solid var(--gb-soft)}
.gb-scene__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.gb-scene:nth-child(even) .gb-scene__media{order:-1}
.gb-scene__num{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--gb-accent-soft);color:var(--gb-accent);font-weight:700;border:1px solid var(--gb-accent-line);margin-bottom:1rem}
.gb-scene__intro{color:var(--gb-muted);margin:.25rem 0 1.25rem}
.gb-steps{display:flex;flex-direction:column;gap:.75rem;list-style:none;margin:0;padding:0}
.gb-steps li{position:relative;padding-left:1.9rem;color:#373e47}
.gb-steps li::before{content:"";position:absolute;left:0;top:.4em;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--gb-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat}

/* ---------- Device frame ---------- */
.gb-device{position:relative;background:#fff;border:1px solid var(--gb-line);border-radius:1rem;box-shadow:var(--gb-shadow);overflow:hidden}
.gb-device__bar{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;background:var(--gb-soft);border-bottom:1px solid var(--gb-line)}
.gb-device__dots{display:flex;gap:.35rem}
.gb-device__dots i{width:.6rem;height:.6rem;border-radius:50%;background:#c0c2c6}
.gb-device__dots i:nth-child(1){background:#ff5f57}.gb-device__dots i:nth-child(2){background:#febc2e}.gb-device__dots i:nth-child(3){background:#28c840}
.gb-device__url{flex:1;background:#fff;border:1px solid var(--gb-line);border-radius:100rem;padding:.3rem .8rem;font-size:.72rem;color:#999ea4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-device__screen{position:relative;padding:1.1rem;min-height:18rem;background:#fdfdfc}

/* ---------- Mock-UI ---------- */
.gb-mk-title{font-size:1rem;font-weight:700;margin-bottom:.85rem}
.gb-mk-field{margin-bottom:.7rem}
.gb-mk-field label{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#999ea4;margin-bottom:.25rem}
.gb-mk-input{display:flex;align-items:center;height:2.2rem;border:1px solid #d1d3d6;border-radius:.5rem;padding:0 .7rem;background:#fff;font-size:.8rem;color:#373e47}
.gb-mk-input--select::after{content:"";margin-left:auto;width:.7rem;height:.7rem;background:#bdbfc4;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M3 6l5 5 5-5z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M3 6l5 5 5-5z'/></svg>") center/contain no-repeat}
.gb-mk-input__val{color:#000;font-weight:500}
.gb-mk-row{display:flex;gap:.7rem}.gb-mk-row>*{flex:1;min-width:0}
.gb-mk-btn{display:inline-flex;align-items:center;justify-content:center;height:2.3rem;padding:0 1.1rem;border-radius:.5rem;background:var(--gb-green);color:#fff;font-weight:600;font-size:.82rem}
.gb-mk-upload{display:flex;align-items:center;justify-content:center;gap:.5rem;height:4rem;border:1.5px dashed #c0c2c6;border-radius:.5rem;color:#999ea4;font-size:.78rem;background:#fff}
.gb-mk-toast{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%) translateY(1.5rem);display:flex;align-items:center;gap:.5rem;background:var(--gb-dark);color:#fff;padding:.6rem 1rem;border-radius:100rem;font-size:.8rem;font-weight:600;box-shadow:var(--gb-shadow-md);opacity:0}
.gb-mk-toast svg{width:1rem;height:1rem;color:#a2d1ae}

/* ---------- Cursor ---------- */
.gb-cursor{position:absolute;top:0;left:0;width:1.4rem;height:1.4rem;z-index:5;pointer-events:none;opacity:0;will-change:transform}
.gb-cursor svg{width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.gb-cursor__ring{position:absolute;inset:-.4rem;border-radius:50%;border:2px solid var(--gb-accent);opacity:0}

/* ==========================================================================
   ANIMATION — Referenz-Szene "Grundstück anlegen"
   ========================================================================== */
#scene-create .gb-mk-input__val,#scene-create .gb-mk-toast,#scene-create .gb-cursor{opacity:0}
#scene-create.is-playing .gb-cursor{animation:cur-move 9s cubic-bezier(.4,0,.6,1) infinite}
#scene-create.is-playing .gb-cursor__ring{animation:cur-click 9s linear infinite}
#scene-create.is-playing .val-cat{animation:val-in .3s ease forwards;animation-delay:2.0s}
#scene-create.is-playing .val-price{animation:val-in .3s ease forwards;animation-delay:3.6s}
#scene-create.is-playing .val-size{animation:val-in .3s ease forwards;animation-delay:4.6s}
#scene-create.is-playing .mk-upload{animation:up-fill .3s ease forwards;animation-delay:5.8s}
#scene-create.is-playing .mk-save{animation:btn-press .4s ease 6.9s}
#scene-create.is-playing .gb-mk-toast{animation:toast-in 2s ease forwards;animation-delay:7.3s}
@keyframes cur-move{0%{opacity:0;transform:translate(13rem,1rem)}5%{opacity:1}20%{transform:translate(8rem,4.1rem)}38%{transform:translate(6rem,7.5rem)}50%{transform:translate(13rem,7.5rem)}64%{transform:translate(9rem,10.6rem)}76%{transform:translate(7rem,13.6rem)}82%{transform:translate(7rem,13.6rem)}92%{opacity:1}100%{opacity:0;transform:translate(13rem,1rem)}}
@keyframes cur-click{0%,18%{opacity:0;transform:scale(.4)}20%{opacity:.7;transform:scale(.4)}24%{opacity:0;transform:scale(1.3)}36%{opacity:0;transform:scale(.4)}38%{opacity:.7;transform:scale(.4)}42%{opacity:0;transform:scale(1.3)}74%{opacity:0;transform:scale(.4)}76%{opacity:.8;transform:scale(.4)}80%{opacity:0;transform:scale(1.4)}100%{opacity:0}}
@keyframes val-in{from{opacity:0;transform:translateX(-.2rem)}to{opacity:1;transform:none}}
@keyframes up-fill{to{border-style:solid;border-color:var(--gb-green);color:var(--gb-green)}}
@keyframes btn-press{0%{transform:none}40%{transform:scale(.94)}100%{transform:none}}
@keyframes toast-in{0%{opacity:0;transform:translateX(-50%) translateY(1.5rem)}15%{opacity:1;transform:translateX(-50%) translateY(0)}85%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(1.5rem)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:767px){
  .gb-scene__grid{grid-template-columns:1fr;gap:1.5rem}
  .gb-scene:nth-child(even) .gb-scene__media{order:0}
  .gb-tabs{width:100%;justify-content:center}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  #scene-create *{animation:none!important}
  #scene-create .gb-mk-input__val{opacity:1}
  #scene-create .mk-upload{border-style:solid;border-color:var(--gb-green);color:var(--gb-green)}
  #scene-create .gb-mk-toast{opacity:1;transform:translateX(-50%)}
  #scene-create .gb-cursor{display:none}
}

/* ==========================================================================
   GENERISCHE SZENEN-ANIMATION (rise + pulse) für alle weiteren Szenen
   ========================================================================== */
.gb-scene .gb-rise{opacity:0;transform:translateY(14px)}
.gb-scene.is-playing .gb-rise{animation:gb-rise .55s cubic-bezier(0,0,.2,1) forwards;animation-delay:calc(var(--i,0)*.1s)}
@keyframes gb-rise{to{opacity:1;transform:none}}
.gb-scene.is-playing .gb-pulse{animation:gb-pulse 1.8s ease-in-out 1.1s infinite}
@keyframes gb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(130,187,41,.45)}50%{box-shadow:0 0 0 7px rgba(130,187,41,0)}}
.gb-track[data-role="provider"] .gb-pulse{--x:1}
.gb-track[data-role="provider"] .gb-scene.is-playing .gb-pulse{animation-name:gb-pulse-brown}
@keyframes gb-pulse-brown{0%,100%{box-shadow:0 0 0 0 rgba(79,58,50,.4)}50%{box-shadow:0 0 0 7px rgba(79,58,50,0)}}

/* ==========================================================================
   MOCK-BAUSTEINE
   ========================================================================== */
.gb-mk-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.gb-mk-stat{border:1px solid var(--gb-line);border-radius:.6rem;padding:.7rem .8rem;background:#fff}
.gb-mk-stat b{display:block;font-size:1.1rem;color:#000}
.gb-mk-stat span{font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:#999ea4;font-weight:600}

.gb-mk-list{display:flex;flex-direction:column;gap:.5rem}
.gb-mk-listrow{display:flex;align-items:center;gap:.6rem;border:1px solid var(--gb-line);border-radius:.5rem;padding:.55rem .7rem;background:#fff;font-size:.78rem}
.gb-mk-listrow .thumb{width:2.2rem;height:1.7rem;border-radius:.35rem;flex:none;background:linear-gradient(135deg,#cfe3a8,#9ec45f)}
.gb-mk-listrow .grow{flex:1;min-width:0;overflow:hidden}
.gb-mk-listrow .grow b{display:block;color:#000;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-mk-listrow .grow small{color:#677279}
.gb-mk-badge{font-size:.64rem;font-weight:700;padding:.15rem .5rem;border-radius:100rem;white-space:nowrap}
.gb-mk-badge--green{background:rgba(130,187,41,.15);color:#4d7016}
.gb-mk-badge--gray{background:#eaebed;color:#677279}
.gb-mk-badge--amber{background:#fef3da;color:#9a6a12}

.gb-mk-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.gb-mk-chip{font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:100rem;background:var(--gb-accent-soft);color:var(--gb-accent);border:1px solid var(--gb-accent-line)}

.gb-mk-opt{display:flex;align-items:center;gap:.6rem;border:1px solid var(--gb-line);border-radius:.5rem;padding:.55rem .7rem;font-size:.8rem;margin-bottom:.4rem;background:#fff;color:#373e47}
.gb-mk-opt .radio{width:1rem;height:1rem;border-radius:50%;border:2px solid #c0c2c6;flex:none}
.gb-mk-opt.is-sel{border-color:var(--gb-accent);color:#000}
.gb-mk-opt.is-sel .radio{border-color:var(--gb-accent);background:radial-gradient(circle,var(--gb-accent) 42%,transparent 46%)}

.gb-mk-alert{display:flex;gap:.5rem;align-items:flex-start;background:#fef3da;border:1px solid #f3d99b;color:#7a5b12;border-radius:.5rem;padding:.55rem .7rem;font-size:.74rem;margin-bottom:.7rem}

.gb-mk-gallery{display:flex;flex-direction:column;gap:.5rem}
.gb-mk-gallery .main{height:7rem;border-radius:.5rem;background:linear-gradient(135deg,#cfe3a8,#9ec45f)}
.gb-mk-gallery .thumbs{display:flex;gap:.4rem}
.gb-mk-gallery .thumbs i{flex:1;height:2.2rem;border-radius:.35rem;background:#dfe9c8}

.gb-mk-map{height:6.5rem;border-radius:.5rem;position:relative;background:
  repeating-linear-gradient(0deg,#eef1ea 0 18px,#e4e9da 18px 19px),
  repeating-linear-gradient(90deg,#eef1ea 0 18px,#e4e9da 18px 19px)}
.gb-mk-map::after{content:"";position:absolute;left:50%;top:46%;width:.9rem;height:.9rem;transform:translate(-50%,-100%) rotate(-45deg);background:var(--gb-green);border-radius:50% 50% 50% 0;box-shadow:0 2px 4px rgba(0,0,0,.3)}

.gb-mk-chat{display:flex;flex-direction:column;gap:.45rem}
.gb-mk-bubble{max-width:82%;padding:.5rem .7rem;border-radius:.8rem;font-size:.76rem}
.gb-mk-bubble--in{align-self:flex-start;background:#eef1ea;color:#000;border-bottom-left-radius:.2rem}
.gb-mk-bubble--out{align-self:flex-end;background:var(--gb-green);color:#fff;border-bottom-right-radius:.2rem}

.gb-mk-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.gb-mk-card{border:1px solid var(--gb-line);border-radius:.6rem;overflow:hidden;background:#fff}
.gb-mk-card .ph{height:4.2rem;background:linear-gradient(135deg,#cfe3a8,#9ec45f);position:relative}
.gb-mk-card .heart{position:absolute;right:.5rem;top:.5rem;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2);font-size:.8rem;color:#c80411}
.gb-mk-card .body{padding:.5rem .6rem}
.gb-mk-card .body b{display:block;font-size:.78rem;color:#000}
.gb-mk-card .body small{color:#677279;font-size:.7rem}

.gb-mk-toggle{display:inline-flex;border:1px solid var(--gb-line);border-radius:.5rem;overflow:hidden;font-size:.72rem;margin-bottom:.7rem}
.gb-mk-toggle span{padding:.35rem .7rem;color:#677279}
.gb-mk-toggle span.on{background:var(--gb-accent);color:#fff}

.gb-mk-range{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .1rem}
.gb-mk-range .bar{flex:1;height:.35rem;border-radius:100rem;background:#e4e9da;position:relative}
.gb-mk-range .bar::after{content:"";position:absolute;left:15%;right:28%;top:0;bottom:0;background:var(--gb-accent);border-radius:100rem}

.gb-mk-api{display:flex;align-items:center;gap:.6rem;border:1px solid var(--gb-line);border-radius:.5rem;padding:.7rem;background:#fff;margin-bottom:.7rem}
.gb-mk-api .logo{font-weight:800;color:#000;font-size:.9rem}

/* reduced motion: generische Szenen statisch */
@media (prefers-reduced-motion:reduce){
  .gb-scene .gb-rise{opacity:1!important;transform:none!important}
  .gb-scene .gb-pulse{animation:none!important}
}