/* ==========================================================================
   aw-home.css — homepage only (body.aw-home), loaded after aw.css.
   Design: _design/Homepage.src.html. Shared components (band, glass card,
   stats, cards, marquee, forms, blog cards) come from aw.css; this file adds
   the hero grid, the agent demo window, format tiles, the contact band and
   the lead-form success state. Owned by the homepage agent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.aw-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(32px,5vw,64px);align-items:center;
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(40px,6vw,72px)}
.aw-hero__copy,.aw-hero__demo{min-width:0}
.aw-hero__badge{margin:0}
/* aw.css leaves the UA list indent on the marquee groups: without it the
   seamless loop keeps the design's even 40px rhythm (static list unaffected). */
html:not(.aw-nomotion) .aw-hero .aw-marquee__group{padding-left:0}

/* --------------------------------------------------------------------------
   Agent demo window (.aw-glass)
   -------------------------------------------------------------------------- */
.aw-demo__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.aw-demo__label{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-muted)}
.aw-demo__tabs{display:flex;flex-wrap:wrap;gap:4px;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.06)}
.aw-demo__tab{border:0;cursor:pointer;padding:6px 12px;border-radius:var(--r-pill);font-family:var(--f-body);font-size:12.5px;font-weight:600;line-height:1.35;background:transparent;color:var(--on-night-muted);
  transition:background .2s ease,color .2s ease}
.aw-demo__tab:hover{color:var(--on-night)}
.aw-demo__tab[aria-pressed="true"]{background:var(--on-night);color:var(--ink)}
/* Controls are rendered disabled and enabled by aw-home.js (no dead buttons without JS) */
.aw-demo__tab:disabled{cursor:default}
.aw-demo__tab:disabled:not([aria-pressed="true"]):hover{color:var(--on-night-muted)}
.aw-demo__replay:disabled{visibility:hidden}

/* min-height is the design's floor; aw-home.js raises it to the height of the
   CURRENT scenario so steps never make the card jump. `is-fluid` is added after
   the first measurement, so only scenario changes animate, never the load. */
.aw-demo__log{padding:8px 18px 12px;min-height:332px}
.aw-motion .aw-demo__log.is-fluid{transition:min-height .5s var(--ease)}
.aw-demo__steps{list-style:none;margin:0;padding:0}
.aw-demo__step{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.aw-motion .aw-demo__step.is-new{animation:awFadeUp .45s var(--ease) both}
.aw-demo__kind{flex:none;min-width:64px;margin-top:1px;padding:4px 8px;border-radius:6px;text-align:center;font-family:var(--f-mono);font-size:10.5px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;
  background:var(--k-bg,rgba(255,255,255,.1));color:var(--k-fg,var(--on-night))}
.aw-demo__body{flex:1;min-width:0}
.aw-demo__text{margin:0;font-size:14px;line-height:1.5;color:var(--on-night);overflow-wrap:anywhere}
.aw-demo__detail{margin:4px 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--on-night-muted);overflow-wrap:anywhere}
/* Step kinds (design KIND table) */
.aw-demo__step[data-kind="user"]{--k-bg:rgba(255,255,255,.1);--k-fg:var(--on-night)}
.aw-demo__step[data-kind="think"]{--k-bg:rgba(163,167,179,.14);--k-fg:var(--on-night-muted)}
.aw-demo__step[data-kind="tool"]{--k-bg:rgba(217,119,6,.2);--k-fg:var(--amber-hi)}
.aw-demo__step[data-kind="ok"]{--k-bg:rgba(52,211,153,.14);--k-fg:var(--green)}
.aw-demo__step[data-kind="human"]{--k-bg:rgba(147,197,253,.14);--k-fg:var(--blue)}
.aw-demo__step[data-kind="done"]{--k-bg:var(--amber);--k-fg:var(--ink)}
.aw-demo__step[data-kind="tool"] .aw-demo__text{font-family:var(--f-mono)}

.aw-demo__status{display:flex;gap:12px;align-items:center;margin:0;padding:12px 0;font-family:var(--f-mono);font-size:12px;line-height:1.35;color:var(--on-night-muted)}
.aw-demo__cursor{display:inline-block;flex:none;width:8px;height:16px;background:var(--amber-hi);animation:awBlink 1s steps(2) infinite}

.aw-demo__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)}
.aw-demo__foot-text{min-width:0;font-family:var(--f-mono);font-size:11.5px;line-height:1.4;color:var(--on-night-muted)}
.aw-demo__replay{flex:none;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--on-night);cursor:pointer;padding:6px 12px;border-radius:var(--r-pill);
  font-family:var(--f-body);font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap;transition:background .2s ease}
.aw-demo__replay:hover{background:rgba(255,255,255,.08)}
.aw-demo-note{margin:14px 4px 0;font-size:13px;line-height:1.5;color:var(--on-night-muted);text-align:center;text-wrap:pretty}

@media (max-width:420px){
  .aw-demo__bar,.aw-demo__foot{padding-left:14px;padding-right:14px}
  .aw-demo__log{padding-left:14px;padding-right:14px}
  .aw-demo__step{gap:10px}
  .aw-demo__kind{min-width:58px;padding:4px 6px}
  .aw-demo__step[data-kind="tool"] .aw-demo__text{font-size:13px}
  .aw-demo__detail{font-size:11.5px}
}

/* --------------------------------------------------------------------------
   Delivery formats (4 tiles)
   -------------------------------------------------------------------------- */
.aw-format{--tile-min:220px;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:28px 26px 30px}
.aw-format__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;font-family:var(--f-mono);font-size:11.5px;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink)}
.aw-format__num{color:var(--faint)}
.aw-format__title{margin:8px 0 0}
/* DE compounds ("Komplettimplementierung") are longer than the 190–230px tile
   column: hyphenate instead of the bare break-word cut from aw.css.
   Requested for aw.css in CHROME-ISSUES.md. */
.aw-home .aw-format__title,
.aw-home .aw-card__title{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;hyphenate-limit-chars:12 5 5}
.aw-format__dur{margin:0;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink)}
.aw-format__text{margin:auto 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* --------------------------------------------------------------------------
   Latest posts (homepage card size, COMPONENTS §5)
   -------------------------------------------------------------------------- */
.aw-home .aw-post-card{min-height:260px}
.aw-home .aw-post-card__title{font-size:20px}
/* The category chip used to be ellipsised ("LEIT…") in the 3-column grid between
   ~876px and ~979px. aw.css now carries the container-query stack for every
   consumer (CHROME-ISSUES.md entry 3), so the homepage needs no workaround. */

/* --------------------------------------------------------------------------
   Contact band + lead form
   -------------------------------------------------------------------------- */
.aw-contact{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.aw-contact .aw-h2--xl{margin-bottom:20px}
.aw-contact__intro{max-width:520px;margin:0 0 32px}
.aw-contact__direct{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:40px 0 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.5}
.aw-contact__direct a{color:var(--on-night);font-weight:600;text-decoration:none}
.aw-contact__direct a:hover{color:var(--amber-hi)}
.aw-contact__panel{position:relative;min-width:0}
/* EN/DE labels can wrap to two lines: keep side-by-side controls aligned */
.aw-contact__panel .aw-field{justify-content:space-between}
.aw-contact__panel .aw-alert{align-items:flex-start;padding:16px 18px}
.aw-contact__panel .aw-alert__icon{width:30px;height:30px}

/* Success state (replaces the form) */
.aw-lead-ok{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:16px 4px}
.aw-motion .aw-lead-ok{animation:awFadeUp .5s var(--ease) both}
.aw-lead-ok__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--amber);color:var(--ink);font-size:22px;font-weight:700}
.aw-lead-ok__title{margin:0;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.aw-lead-ok__text{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}