/* Dropprinters Agency · Start (/agency/) und Prozess (/agency/prozess/), v2
   Story-Teile der Startseite (Hero, Aus einem Haus) behalten ihre ag-Klassen und nutzen styles/solutions.css;
   neue Abschnitte bauen auf styles/pages.css (pg-). Hier steht nur, was pages.css nicht kann. Präfix ag-.
   Nur transform und opacity werden animiert. Ohne JS und bei reduzierter Bewegung bleibt alles lesbar. */

/* ---------- 1 · Hero: Text links, gestapelte Glas-Fenster rechts ---------- */
.ag-hero{position:relative;overflow:hidden;padding-block:0}
.ag-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
  column-gap:clamp(32px,5vw,88px);min-height:100svh;padding-block:calc(var(--nav-top) + var(--nav-h) + 40px) 72px}
.ag-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ag-hero__title{font-size:clamp(42px,5vw,78px);line-height:1;padding-bottom:.04em;max-width:13ch}
.ag-hero__lead{max-width:40ch}

.ag-stack{position:relative;margin:0;width:100%;aspect-ratio:1.08;max-width:620px;justify-self:end}
/* Pastell-Glow hinter den Fenstern (v7, Fade-Tokens) */
.ag-stack{--sol-glow-a:var(--fade-a);--sol-glow-b:var(--fade-b)}
.ag-stack > .sol-device__glow{inset:-10% -8%}
.ag-win{position:absolute;padding:6px;border-radius:var(--r-xl)}
.ag-win__core{position:relative;height:100%;border-radius:calc(var(--r-xl) - 6px);overflow:hidden;
  background:linear-gradient(180deg,rgba(14,14,22,.94),rgba(9,9,14,.90));   /* Rauchglas-Kern (Insel), auf hellem Milchglas-Rahmen dichter */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.06)}
.ag-win__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.07);
  font:500 12px/1 var(--font-body);color:var(--ink-2)}
.ag-win__bar b{font:600 12.5px/1 var(--font-display);color:var(--ink-1)}
.ag-dots{display:flex;gap:6px}
.ag-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.ag-url{flex:1;max-width:220px;padding:5px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);text-align:center}

.ag-win--code{left:0;top:2%;width:62%;height:50%;transform:rotate(-4deg)}
.ag-win--web{left:18%;top:20%;width:78%;height:60%;z-index:2}
.ag-win--phone{right:0;bottom:0;width:30%;height:62%;z-index:3;border-radius:30px;padding:6px}
.ag-win--phone .ag-win__core{border-radius:24px;display:flex;flex-direction:column;gap:9px;padding:24px 12px 14px}

.ag-code{display:flex;flex-direction:column;gap:10px;padding:18px 18px 0}
.ag-code span{display:block;height:8px;width:var(--w);margin-left:calc(var(--x,0) * 18px);border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.ag-code .is-acc{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.ag-code .is-acc2{background:color-mix(in srgb,var(--aurora-d) 60%,transparent)}

.ag-web{display:grid;grid-template-columns:22% 1fr;height:calc(100% - 36px)}
.ag-web__side{display:flex;flex-direction:column;gap:10px;padding:16px 12px;border-right:1px solid rgba(255,255,255,.06)}
.ag-web__side i{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.12)}
.ag-web__side i:first-child{background:rgba(255,255,255,.32);width:70%}
.ag-web__main{display:flex;flex-direction:column;gap:10px;padding:16px}
.ag-web__h{height:14px;width:52%;border-radius:var(--r-pill);background:rgba(255,255,255,.55)}
.ag-web__p{height:8px;width:74%;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.ag-web__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.ag-web__cards i{height:46px;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ag-web__cards i:first-child{background:linear-gradient(160deg,color-mix(in srgb,var(--aurora-a) 70%,transparent),color-mix(in srgb,var(--aurora-c) 40%,transparent))}
.ag-web__chart{flex:1;display:flex;align-items:flex-end;gap:8px;min-height:40px;padding-top:6px}
.ag-web__chart i{flex:1;height:100%;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06));
  transform:scaleY(var(--h));transform-origin:bottom}

.ag-phone__notch{align-self:center;width:34%;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);margin-bottom:4px}
.ag-phone__h{height:12px;width:62%;border-radius:var(--r-pill);background:rgba(255,255,255,.55)}
.ag-phone__card{height:30%;border-radius:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--aurora-b) 70%,transparent),color-mix(in srgb,var(--aurora-d) 45%,transparent))}
.ag-phone__row{height:8px;border-radius:var(--r-pill);background:rgba(255,255,255,.14)}
.ag-phone__row.is-short{width:60%}
.ag-phone__btn{margin-top:auto;height:26px;border-radius:var(--r-pill);background:var(--ink-0)}

@media (prefers-reduced-motion:no-preference){
  .ag-win--code{animation:ag-float 9s ease-in-out infinite alternate}
  .ag-win--phone{animation:ag-float 7s ease-in-out -2s infinite alternate-reverse}
}
@keyframes ag-float{from{translate:0 0}to{translate:0 -10px}}

/* ---------- 2 · Start: Ergänzungen zu den pg-Bausteinen ---------- */
/* pages.css: ".pg-section--white .pg-card" (0,2,0) überstimmt "--tint" (0,1,0); hier für die Leistungskarten
   wieder hergestellt. --dark ist seit v8 eine helle Akzentkarte aus pages.css (keine Gegenregel mehr nötig). */
.ag-services .pg-card--tint{background:var(--light-2)}
.ag-hero__tech{margin-top:4px}
.ag-hero__tech li>span{min-height:34px;padding:6px 13px;font-size:13.5px}
.ag-more{margin:clamp(28px,3.4vw,44px) 0 0}
.ag-more--inline{margin-top:8px}
@media (min-width:1024px){
  .ag-why__split{grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);align-items:start}
  .ag-why__split>.pg-split__copy{position:sticky;top:calc(var(--nav-top) + var(--nav-h) + 32px)}
}
.ag-techfig{--pg-ratio:5/4}
.ag-techfig__glass{justify-items:start;gap:18px}
.ag-techfig__glass .pg-tags li>span{min-height:34px;padding:6px 13px;font-size:13.5px}
@media (max-width:639px){.ag-techfig{--pg-ratio:1/1}.ag-techfig__glass{inset:9% 7%}}

/* ---------- 3 · Prozess: Phasen-Schema im Kopf ---------- */
.ag-flow{gap:18px}
.ag-flow__row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center}
.ag-flow__row b{font:600 13.5px/1 var(--font-display);letter-spacing:.01em;color:var(--ink-1)}
.ag-flow__row .pg-bar{grid-column:2}
.ag-flow__dot{grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.ag-flow__dot--acc{background:var(--accent);box-shadow:0 0 0 6px rgba(34,211,238,.16),0 0 26px rgba(34,211,238,.5)}
.ag-flow__row:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:32px;bottom:-14px;width:1px;background:rgba(255,255,255,.2)}

/* ---------- 4 · Prozess: Phasenleiste (Überblick) neben den Phasen ----------
   Mobil und Tablet: Überblick als Liste von Sprungmarken über den Phasen.
   Ab 1100 px: Leiste steht (CSS sticky) links, js/agency.js markiert die Phase im Blick (.is-active) und füllt die Linie (--ag-p). */
.ag-phasebar{margin-bottom:clamp(28px,3.4vw,44px)}
.ag-phasebar__list{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none;counter-reset:ag-ph}
.ag-phasebar__list>li{counter-increment:ag-ph;min-width:0}
.ag-phasebar__link{position:relative;display:grid;gap:4px;min-height:44px;height:100%;padding:16px 18px 16px 64px;border-radius:var(--r-lg);
  color:var(--ink-dark-0);text-decoration:none;background:var(--light-0);border:1px solid var(--pg-line);
  transition:transform 320ms var(--ease-glass),background-color 320ms var(--ease-glass),border-color 320ms var(--ease-glass)}
.ag-phasebar__link::before{content:counter(ag-ph);position:absolute;z-index:1;left:16px;top:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:17px;line-height:1;color:var(--ink-dark-0);background:var(--light-1);
  box-shadow:inset 0 0 0 1.5px rgba(10,10,12,.16);transition:background-color 320ms var(--ease-glass),color 320ms var(--ease-glass),box-shadow 320ms var(--ease-glass)}
.ag-phasebar__link strong{font:600 16.5px/1.25 var(--font-display);letter-spacing:-.01em}
.ag-phasebar__link small{font-size:14px;line-height:1.45;color:var(--ink-dark-1)}
.ag-phasebar__link:active{transform:scale(.99)}
@media (hover:hover){.ag-phasebar__link:hover{border-color:rgba(10,10,12,.18)}}
.ag-phasebar__link.is-active::before,.ag-phasebar__link.is-done::before{color:#fff;background:var(--ink-dark-0);box-shadow:0 8px 18px -10px rgba(10,10,12,.35)}   /* schwarzer CI-Chip */
@media (min-width:640px) and (max-width:1099px){.ag-phasebar__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ag-steps .pg-step{scroll-margin-top:calc(var(--nav-top) + var(--nav-h) + 20px)}

@media (min-width:1100px){
  .ag-phases{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);column-gap:clamp(48px,5vw,80px);align-items:start}
  .ag-phasebar{position:sticky;top:calc(var(--nav-top) + var(--nav-h) + 28px);margin:0}
  .ag-phasebar__list{gap:6px}
  .ag-phasebar__list::before,.ag-phasebar__list::after{content:"";position:absolute;left:32px;top:30px;bottom:30px;width:2px;border-radius:2px;background:var(--pg-line)}
  .ag-phasebar__list::after{background:var(--ink-dark-0);transform-origin:top;transform:scaleY(var(--ag-p,0));transition:transform 600ms var(--ease-glass)}
  .ag-phasebar__link{padding:12px 12px 12px 64px;background:transparent;border-color:transparent}
  .ag-phasebar__link strong{color:var(--ink-dark-1);transition:color 320ms var(--ease-glass)}
  .ag-phasebar__link small{color:var(--ink-dark-2)}
  .ag-phasebar__link.is-active{background:var(--light-0);border-color:var(--pg-line)}
  .ag-phasebar__link.is-active strong{color:var(--ink-dark-0)}
  .ag-phasebar__link.is-active small{color:var(--ink-dark-1)}
  .ag-steps .pg-step{grid-template-columns:minmax(0,1fr);row-gap:18px}
}

/* ---------- 5 · Prozess: Weiterführend ---------- */
.ag-further__list{--pg-cols:1}
@media (min-width:640px) and (max-width:899px){.ag-further__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ag-further__list{grid-template-columns:minmax(0,1fr)}}

/* ---------- 6 · Start: Aus einem Haus: Verweis-Kacheln ---------- */
.ag-house{position:relative;overflow:hidden}
.ag-house::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:80%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fade-c) 90%,transparent),color-mix(in srgb,var(--fade-a) 55%,transparent) 45%,transparent 72%);opacity:.9}
.ag-house__grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ag-house__card{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;min-height:300px;padding:clamp(22px,2.2vw,30px);color:var(--ink-0);
  text-decoration:none;transition:transform 260ms var(--ease-out),background-color 260ms var(--ease-out)}
.ag-house__card:active{transform:scale(.985)}
/* Kennzeile auf Milchglas über dem Pastellfleck: Token --ink-1 (v7) */
.ag-house__k{font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-1)}
.ag-house__card h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.025em;line-height:1.1}
.ag-house__card p{font-size:15px;line-height:1.55;color:var(--ink-1)}
.ag-house__arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;justify-self:end;color:var(--on-solid);background:var(--solid);
  transition:transform 260ms var(--ease-out)}
.ag-house__arrow svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .ag-house__card:hover{transform:translateY(-4px)}
  .ag-house__card:hover .ag-house__arrow{transform:translate(3px,-3px) scale(1.05)}
}

/* ---------- Responsiv (Hero, Aus einem Haus) ---------- */
@media (max-width:1100px){
  .ag-house__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .ag-hero__grid{grid-template-columns:1fr;row-gap:44px;min-height:auto;padding-block:calc(var(--nav-top) + var(--nav-h) + 44px) 64px}
  .ag-hero__title{font-size:clamp(38px,9.4vw,60px)}
  .ag-stack{justify-self:center;max-width:520px}
}
@media (max-width:600px){
  .ag-house__grid{grid-template-columns:1fr}
  .ag-house__card{min-height:0}
  .ag-stack{aspect-ratio:1.02}
}
@media (prefers-reduced-motion:reduce){
  .ag-phasebar__list::after,.ag-phasebar__link,.ag-phasebar__link::before{transition:none}
}