/* ======================================================================
   Dropprinters Agency · Leistungsseiten (Präfix ag-)
   Nur, was styles/pages.css nicht kann: 12 Schema-Bilder (SVG, ohne Zahlen und Text),
   Kopfbild-Knoten, Lieferpunkte als reine Titel, Hinweiszeile mit Link.
   Die Seiten folgen einer gemeinsamen Vorlage.
   ====================================================================== */

/* Kopf der Detailseiten: Einleitungen der Quelle sind bis zu 36 Wörter lang; breitere Zeile hält den Kopf kompakt */
@media (min-width:900px){
  .ag-hero .pg-hero__lead{max-width:60ch}
  .ag-hero .pg-hero__copy{gap:16px}
  .ag-hero .pg-hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
  .ag-hero .pg-hero__art{max-width:340px}
}

/* Übersicht: Akzentkarte im weißen Abschnitt. Seit v8 hell (pages.css); pages.css nimmt --dark per :where() aus der
   Weiß-Regel aus, die frühere Gegenregel hier entfällt. */

/* Kopfbild: größerer Leistungsknoten auf der Glasscheibe */
.ag-pane__node{--s:64px;margin-bottom:6px;border-radius:18px}

/* Lieferpunkte: nur Titel, deshalb kräftiger gesetzt */
.ag-deliver li{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--ink-dark-0)}

/* Schema-Bild in der Akzent-Figur (.pg-figure--dark, seit v8 helles Milchglas vor Pastell-Fade, pages.css):
   Linien dunkel aus --ink-0, Knoten/Geraeteflaechen (.k) weiss mit dunkler Kante (darin liegen .f-Balken), Akzentlinie Petrol (--accent-ink), Akzentpunkte Cyan mit Glow */
.ag-figure{--pg-ratio:4/3}
.ag-motif{display:block;width:100%;height:auto;overflow:visible}
.ag-motif path{fill:none}
.ag-motif .l{stroke:color-mix(in srgb,var(--ink-0) 32%,transparent);stroke-width:2}
.ag-motif .s{fill:var(--glass-bg-strong);stroke:color-mix(in srgb,var(--ink-0) 62%,transparent);stroke-width:2}
.ag-motif .k{fill:var(--light-1);stroke:color-mix(in srgb,var(--ink-0) 72%,transparent);stroke-width:2;filter:drop-shadow(0 6px 10px rgba(48,32,110,.16))}
.ag-motif .f{fill:color-mix(in srgb,var(--ink-0) 12%,transparent)}
.ag-motif .a{stroke:var(--accent-ink);stroke-width:2.4}
.ag-motif .a-f{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(34,211,238,.55))}
.ag-motif .k-a{fill:var(--accent);filter:drop-shadow(0 0 8px rgba(34,211,238,.6))}
.ag-motif .dash{stroke-dasharray:4 7}
.ag-motif .l,.ag-motif .s,.ag-motif .k,.ag-motif .a{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

/* Abstand der Link-Zeilen unter Rastern */
.ag-actions{margin:clamp(24px,3vw,36px) 0 0}
.ag-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:clamp(28px,3.4vw,44px)}
.ag-note p{flex:1 1 32ch;max-width:68ch;margin:0;font-size:17px;line-height:1.6;color:var(--ink-dark-1)}
@media (max-width:560px){
  .ag-note .btn,.ag-actions .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-transparency:reduce){
  .ag-motif .a-f,.ag-motif .k-a{filter:none}
}
@media (forced-colors:active){
  .ag-motif .l,.ag-motif .s,.ag-motif .k,.ag-motif .a{stroke:CanvasText}
  .ag-motif .f,.ag-motif .a-f,.ag-motif .k-a{fill:CanvasText}
}