/* ==========================================================================
   Hey Rasterei — Portfolio-Case „Afterglow“ (portfolio/afterglow/)
   Lädt nach home.css + leistung.css + pages.css + case.css.
   Eigene Event-Dramaturgie mit Afterglow-Farben, nur auf dieser Seite (.pg-afterglow).
   Raster, Thunder, Tags, Schatten und Mikrointeraktionen bleiben die Rahmung.
   ========================================================================== */

.pg-afterglow {
  --ag-mid: #0E1E3A;
  --ag-deep: #081527;
  --ag-ember: #E15A2C;
  --ag-coral: #E28572;
  --ag-sky: #A9C6D8;
  --ag-cream: #F6EEDF;
}

/* Flow-Sektionen im Zellenraster: 1 Zelle Rand links/rechts */
.pg-afterglow .ag-in { padding: calc(var(--cell) * 1.4) calc(var(--cell) * 1); }
.pg-afterglow .ag-hero-in { padding: calc(var(--hdr) + var(--cell) * 1) calc(var(--cell) * 1) calc(var(--cell) * 1.4); }

/* Wiederkehrende Bausteine */
.ag-step { display: inline-block; transform: rotate(-1.5deg); }
.ag-step b { margin-right: .7em; font-weight: 700; }
.ag-step-c { background: var(--cream); color: var(--ink); }
.ag-step-i { background: var(--ink); color: var(--cream); }
.ag-h2 { width: auto !important; font-size: calc(var(--cell) * .9); line-height: .95; margin: 18px 0 16px; }
.ag-big { width: auto !important; font-size: calc(var(--cell) * 1.5); line-height: .92; margin: 20px 0 22px; }
.ag-big b, .ag-hero .ag-h b { font-weight: inherit; }
.ag-hero .ag-h b { color: var(--orange-l); }
.ag-p { font-size: 17px; line-height: 1.55; max-width: 34em; }
.ag-cap { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ag-wrap { position: relative; }
.ag-wrap > .shot { width: 100%; }

/* ---------------- Hero ---------------- */
.ag-hero { --gl: rgba(223, 116, 62, .3); z-index: 6; }
.ag-hero .g { --mask: radial-gradient(ellipse 45% 55% at 18% 45%, #000 0, transparent 100%), radial-gradient(ellipse 35% 60% at 88% 60%, #000 0, transparent 100%); }
.ag-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--cell) * 6.6); column-gap: calc(var(--cell) * 1); align-items: center; }
.ag-hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--cell) * .3); min-width: 0; }
.ag-hero-txt .lh-back { position: relative; }
.ag-tag { transform: rotate(-1.5deg); }
.ag-hero .ag-h { width: auto !important; font-size: calc(var(--cell) * 2.15); line-height: .86; margin: calc(var(--cell) * .1) 0; }
.ag-hero .ag-h b { display: block; }
.ag-hero .ch-lede { max-width: 30em; }
.ag-hero .ckv { width: 100%; max-width: calc(var(--cell) * 7); }
.ag-hero-vis { position: relative; transform: rotate(1.5deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ag-hero-vis:hover { transform: rotate(0); }
.ag-hero-vis .cap { position: absolute; left: calc(var(--cell) * .4); bottom: calc(var(--cell) * -.3); }

/* ---------------- Rasterei-Flächen (schwarz) ---------------- */
.ag-pl { color: var(--cream); }
.ag-pl > .plane { left: calc(var(--cell) * 1); top: calc(var(--cell) * .5); width: calc(100% - var(--cell) * 2); height: calc(100% - var(--cell) * 1); --gl: rgba(246, 241, 230, .13); --gl-hi: rgba(223, 116, 62, .95); --mask: radial-gradient(ellipse 60% 80% at 20% 50%, #000 0, transparent 100%), radial-gradient(ellipse 30% 55% at 92% 25%, rgba(0, 0, 0, .6) 0, transparent 100%); }
.ag-pl .ag-in { padding: calc(var(--cell) * 1.6) calc(var(--cell) * 2) calc(var(--cell) * 1.8); }
.ag-pl .ag-step { background: var(--orange); color: var(--ink); }
.ag-pl .ag-big b { color: var(--orange); }
.ag-pl :focus-visible { outline-color: var(--cream); }

.ag-idea-txt { display: grid; gap: 22px; max-width: calc(var(--cell) * 7.4); }
.ag-idea-txt .ag-p { color: var(--cream); font-size: 18px; }
.ag-quote { font-style: italic; font-size: 22px; line-height: 1.3; color: var(--orange-b); }
.ag-facts { display: grid; grid-template-columns: 7em 1fr; width: 100%; max-width: calc(var(--cell) * 7.4); margin: 26px 0 0; border-top: 2px solid var(--ink); }
.ag-facts dt, .ag-facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(28, 26, 23, .3); font-size: 14px; line-height: 1.4; }
.ag-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--blue); padding-top: 13px; }
.ag-pl .ag-facts { border-top-color: var(--cream); }
.ag-pl .ag-facts dt, .ag-pl .ag-facts dd { border-bottom-color: rgba(246, 241, 230, .3); }
.ag-pl .ag-facts dt { color: var(--orange-b); }

/* ---------------- 02 Konzept ---------------- */
.ag-2col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: calc(var(--cell) * 1.2); align-items: center; }
.ag-2col-poster, .ag-prog .ag-2col { grid-template-columns: calc(var(--cell) * 5.4) minmax(0, 1fr); column-gap: calc(var(--cell) * 1.6); }
.ag-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ag-concept .ag-in { padding-top: calc(var(--cell) * 1.6); padding-bottom: calc(var(--cell) * 1.8); }
.ag-sw { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 22px 0 14px; }
.ag-sw li { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.ag-sw li:hover { transform: translateY(-4px) rotate(-3deg); }
.ag-sw i { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.ag-fonts { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--blue); }

/* ---------------- 03 Website ---------------- */
.ag-web > .plane { left: calc(var(--cell) * 1); top: calc(var(--cell) * .5); width: calc(100% - var(--cell) * 2); height: calc(100% - var(--cell) * 1); --gl: rgba(246, 241, 230, .2); --gl-hi: rgba(246, 241, 230, .85); --mask: radial-gradient(ellipse 50% 60% at 80% 60%, #000 0, transparent 100%); }
.ag-web .ag-in { padding: calc(var(--cell) * 1.6) calc(var(--cell) * 2) calc(var(--cell) * 1.8); }
.ag-on-blue { color: var(--cream); }
.ag-on-blue.ag-h2 { color: var(--cream); }
.ag-stage { display: flex; align-items: flex-end; gap: calc(var(--cell) * .6); margin-top: calc(var(--cell) * .9); }
.ag-stage2 { margin-top: calc(var(--cell) * 1.2); align-items: flex-start; }
.ag-browser { margin: 0; border: 2px solid var(--ink); background: var(--cream); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; min-width: 0; }
.ag-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--cream); border-bottom: 2px solid var(--ink); color: var(--ink); }
.ag-bar i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.ag-bar i:first-child { background: var(--orange); }
.ag-bar span { margin-left: 10px; font-size: 11px; font-weight: 700; padding: 3px 10px; border: 1.5px solid var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-browser img { width: 100%; height: auto; display: block; }
.ag-b-main { flex: 1 1 auto; min-width: 0; }
.ag-phone { margin: 0; flex: 0 0 calc(var(--cell) * 1.9); width: calc(var(--cell) * 1.9); border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--ink); box-shadow: 6px 6px 0 var(--ink); aspect-ratio: 780 / 1520; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.ag-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ag-p1 { transform: rotate(-3deg); }
.ag-p2 { transform: rotate(3deg) translateY(calc(var(--cell) * -.5)); }
.ag-p1:hover, .ag-p2:hover { transform: rotate(0); }
.ag-web .ag-cap { color: var(--cream); }

/* ---------------- Gedruckte Stücke ---------------- */
.ag-print { justify-self: center; width: 100%; }
.ag-print .shot { border-color: var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.ag-print-poster { transform: rotate(-2deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ag-print-poster:hover { transform: rotate(0); }
.ag-print-poster .cap { position: absolute; left: calc(var(--cell) * .3); bottom: calc(var(--cell) * -.3); }

/* ---------------- 05 Programm ---------------- */
.ag-prog .ag-in { padding-top: calc(var(--cell) * 1.6); padding-bottom: calc(var(--cell) * 1.8); }
.ag-print-prog { transform: rotate(1.6deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ag-print-prog:hover { transform: rotate(0); }
.ag-prog .g { --mask: radial-gradient(ellipse 40% 50% at 12% 60%, #000 0, transparent 100%), radial-gradient(ellipse 35% 45% at 92% 30%, rgba(0, 0, 0, .7) 0, transparent 100%); }

/* ---------------- 06 Social ---------------- */
.ag-social > .plane { left: calc(var(--cell) * 1); top: calc(var(--cell) * .5); width: calc(100% - var(--cell) * 2); height: calc(100% - var(--cell) * 1); --gl: rgba(246, 241, 230, .3); --gl-hi: rgba(246, 241, 230, .9); --mask: radial-gradient(ellipse 50% 70% at 25% 60%, #000 0, transparent 100%); }
.ag-social .ag-in { padding: calc(var(--cell) * 1.6) calc(var(--cell) * 2) calc(var(--cell) * 1.8); }
.ag-on-orange { color: var(--ink); }
.ag-igstage { display: flex; align-items: center; gap: calc(var(--cell) * .9); margin-top: calc(var(--cell) * .9); }
.ag-ig { --ig-line: rgba(28, 26, 23, .14); background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); font-size: 13px; line-height: 1.35; overflow: hidden; }
.ag-ig svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ag-ig img { display: block; width: 100%; height: auto; }
.ig-av { display: block; width: 32px; height: 32px; border-radius: 50%; flex: none; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 78%, #E15A2C 0 34%, transparent 35%), #0E1E3A; }
.ig-av-l { width: 72px; height: 72px; border-width: 3px; }
.ag-igphone { flex: 0 0 calc(var(--cell) * 4); width: calc(var(--cell) * 4); border-radius: 26px; }
.ig-bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--ig-line); }
.ig-bar b { font-size: 14px; }
.ig-bar span { width: 22px; }
.ig-hd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ig-hd span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ig-hd b { font-size: 13px; }
.ig-hd small { font-size: 11px; opacity: .65; }
.ig-hd em { font-style: normal; letter-spacing: .1em; font-weight: 700; }
.ig-act { display: flex; gap: 14px; padding: 10px 12px 4px; }
.ig-act .ig-bm { margin-left: auto; }
.ig-cap { padding: 0 12px 12px; }
.ig-tabs { display: flex; justify-content: space-around; align-items: center; height: 50px; border-top: 1px solid var(--ig-line); }
.ig-tabs .ig-av { width: 24px; height: 24px; border-width: 1.5px; }
.ag-igprofile { flex: 1 1 auto; min-width: 0; margin: 0; padding: 22px 22px 24px; border-radius: 6px; }
.ip-hd { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; }
.ip-hd b { display: block; font-size: 16px; }
.ip-hd span { display: block; font-size: 13px; opacity: .8; }
.ip-hd em { font-style: normal; font-size: 12px; font-weight: 700; padding: 8px 16px; background: var(--ink); color: var(--cream); }
.ip-tab { display: flex; justify-content: center; margin: 20px 0 10px; padding: 8px 0 0; border-top: 1px solid var(--ig-line); }
.ip-tab svg { width: 24px; height: 24px; margin-top: -10px; padding-top: 8px; border-top: 2px solid var(--ink); box-sizing: content-box; }
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ip-grid li { display: flex; flex-direction: column; gap: 8px; }
.ip-grid .ag-cap { margin: 0 0 2px; color: var(--ink); font-size: 11px; }

/* ---------------- 07 Ticket ---------------- */
.ag-ticket .ag-in { padding-top: calc(var(--cell) * 1.6); padding-bottom: calc(var(--cell) * 1.8); }
.ag-print-ticket { width: 100%; max-width: calc(var(--cell) * 11); margin-top: calc(var(--cell) * .6); transform: rotate(-1.5deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.ag-print-ticket:hover { transform: rotate(0); }
.ag-print-ticket .cap { position: absolute; right: calc(var(--cell) * .4); top: calc(var(--cell) * -.3); }

/* ---------------- 08 Zusammenspiel ---------------- */
.ag-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--cell) * .45); align-items: end; margin: calc(var(--cell) * .6) 0 calc(var(--cell) * .9); }
.ag-mosaic li { border: 2px solid var(--cream); box-shadow: 6px 6px 0 var(--orange); background: var(--cream); overflow: hidden; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.ag-mosaic img { width: 100%; height: auto; display: block; }
.ag-mosaic li:hover { transform: rotate(0) translateY(-6px); }
.m-poster { grid-column: span 3; transform: rotate(-1deg); }
.m-prog { grid-column: span 3; transform: rotate(.8deg); }
.m-s1 { grid-column: span 2; transform: rotate(-.6deg); }
.m-s2 { grid-column: span 2; transform: rotate(.9deg); }
.m-s3 { grid-column: span 2; transform: rotate(-.8deg); }
.m-tick { grid-column: span 7; transform: rotate(.6deg); }
.m-web { grid-column: span 5; transform: rotate(-.8deg); }
.ag-all-p { color: var(--cream); font-size: 18px; max-width: 30em; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ag-chips li { font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 8px 14px; border: 2px solid var(--cream); }

/* ---------------- Hinweis ---------------- */
.ag-note-in { display: flex; align-items: flex-start; gap: calc(var(--cell) * .8); padding-top: calc(var(--cell) * 1); padding-bottom: calc(var(--cell) * 1); }
.ag-note-in .tag { flex: none; margin-top: 3px; }
.ag-note .ag-p { font-size: 15px; max-width: 46em; }

/* ---------------- Mobil / Tablet ---------------- */
@media (max-width: 900px) {
  .pg-afterglow .ag-in, .pg-afterglow .ag-hero-in { padding-left: calc(var(--cell) * .5); padding-right: calc(var(--cell) * .5); padding-top: 0; padding-bottom: 0; }
  .ag-hero { padding-top: 0; padding-bottom: calc(var(--cell) * 1); }
  .pg-afterglow .ag-hero-in { padding-top: calc(var(--hdr) + var(--cell) * .3); grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--cell) * 1); }
  .ag-hero .ag-h { font-size: 27vw; }
  .ag-hero-vis { width: 100%; }
  .ag-hero-vis .ag-browser { box-shadow: 5px 5px 0 var(--ink); }
  .ag-big { font-size: 13.5vw; }
  .ag-h2 { font-size: 11vw; white-space: normal; }
  .ag-idea-txt, .ag-facts, .ag-hero .ckv { max-width: none; }
  .ag-2col, .ag-2col-poster, .ag-prog .ag-2col { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--cell) * .9); }
  .ag-print { width: 88%; }
  .ag-print-ticket { width: 100%; max-width: none; }
  .ag-web > .plane, .ag-social > .plane, .ag-pl > .plane { left: 0; width: 100%; top: calc(var(--cell) * .4); height: calc(100% - var(--cell) * .8); }
  .ag-web, .ag-social, .ag-pl { padding-top: calc(var(--cell) * 1.6); padding-bottom: calc(var(--cell) * 1.6); }
  .pg-afterglow .ag-web .ag-in, .pg-afterglow .ag-social .ag-in, .pg-afterglow .ag-pl .ag-in { padding-left: calc(var(--cell) * .6); padding-right: calc(var(--cell) * .6); }
  .ag-stage { flex-wrap: wrap; justify-content: center; gap: calc(var(--cell) * .5) calc(var(--cell) * .6); margin-top: calc(var(--cell) * .5); }
  .ag-b-main { flex: 1 1 100%; }
  .ag-stage .ag-browser { box-shadow: 5px 5px 0 var(--ink); }
  .ag-phone { flex: 0 0 38%; width: 38%; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .ag-p2 { transform: rotate(3deg); }
  .ag-igstage { flex-direction: column; align-items: stretch; gap: calc(var(--cell) * .9); margin-top: calc(var(--cell) * .5); }
  .ag-igphone { flex: none; width: 88%; max-width: 360px; align-self: center; box-shadow: 5px 5px 0 var(--ink); }
  .ag-igprofile { padding: 16px 14px 16px; box-shadow: 5px 5px 0 var(--ink); }
  .ip-hd { gap: 12px; grid-template-columns: auto 1fr; }
  .ip-hd em { grid-column: 1 / -1; text-align: center; }
  .ig-av-l { width: 56px; height: 56px; }
  .ip-grid .ag-cap { font-size: 10px; letter-spacing: .02em; }
  .ag-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .m-poster, .m-prog { grid-column: span 3; }
  .m-s1, .m-s2, .m-s3 { grid-column: span 2; }
  .m-tick, .m-web { grid-column: span 6; }
  .ag-mosaic li { box-shadow: 4px 4px 0 var(--orange); }
  .ag-all-p { font-size: 17px; }
  .ag-note-in { flex-direction: column; gap: 14px; }
  .ag-wrap > .cap, .ag-hero-vis .cap, .ag-print-poster .cap { left: auto; right: auto; top: auto; bottom: auto; margin-top: 14px; display: inline-block; }
}
@media (max-width: 430px) {
  .ag-quote { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-hero-vis, .ag-print-poster, .ag-print-prog, .ag-print-ticket, .ag-phone, .ag-mosaic li, .ag-sw li { transition: none; }
}

/* ==========================================================================
   Mobile-Feinschliff (Afterglow-Case, ≤900px): Medien kleiner, Abschnitte luftiger.
   Wedding-Case (.pg-wedding) bleibt unberührt.
   ========================================================================== */
@media (max-width: 900px) {
  body.pg-afterglow:not(.pg-wedding) .f-auto { padding-top: calc(var(--cell) * 1.8); padding-bottom: calc(var(--cell) * 1.8); gap: 0; }
  body.pg-afterglow:not(.pg-wedding) .ag-hero { padding-top: 0; padding-bottom: calc(var(--cell) * 1.4); }
  body.pg-afterglow:not(.pg-wedding) .ag-note { padding-top: calc(var(--cell) * 1); padding-bottom: calc(var(--cell) * 1); }
  body.pg-afterglow:not(.pg-wedding) .ag-2col { row-gap: calc(var(--cell) * 1.5); }
  body.pg-afterglow:not(.pg-wedding) .ag-step { margin-bottom: 4px; }
  body.pg-afterglow:not(.pg-wedding) .ag-h2 { margin: 22px 0 18px; }
  body.pg-afterglow:not(.pg-wedding) .ag-big { margin: 22px 0 26px; }
  body.pg-afterglow:not(.pg-wedding) .ag-facts { margin-top: 30px; }
  body.pg-afterglow:not(.pg-wedding) .ag-sw { margin: 26px 0 16px; }

  /* Gedruckte Stücke: kleiner, mittig */
  body.pg-afterglow:not(.pg-wedding) .ag-print { width: 66%; max-width: 280px; justify-self: center; }
  body.pg-afterglow:not(.pg-wedding) .ag-print .shot { box-shadow: 6px 6px 0 var(--ink); }
  body.pg-afterglow:not(.pg-wedding) .ag-print-poster .cap { left: -10px; bottom: -14px; }
  body.pg-afterglow:not(.pg-wedding) .ag-print-ticket { width: 92%; max-width: none; margin: 22px auto 0; }

  /* Website-Section: Browser volle Breite, Handys klein nebeneinander */
  body.pg-afterglow:not(.pg-wedding) .ag-web .ag-in { padding-top: 0; padding-bottom: 0; }
  body.pg-afterglow:not(.pg-wedding) .ag-stage { gap: 26px 5%; margin-top: 28px; }
  body.pg-afterglow:not(.pg-wedding) .ag-stage2 { margin-top: 40px; }
  body.pg-afterglow:not(.pg-wedding) .ag-phone { flex: 0 0 34%; width: 34%; }
  body.pg-afterglow:not(.pg-wedding) .ag-p2 { transform: rotate(3deg) translateY(-8px); }

  /* Social-Section */
  body.pg-afterglow:not(.pg-wedding) .ag-igstage { gap: 40px; margin-top: 30px; }
  body.pg-afterglow:not(.pg-wedding) .ag-igphone { width: 70%; max-width: 270px; }
  body.pg-afterglow:not(.pg-wedding) .ag-igprofile { padding: 14px 12px 14px; }

  /* Zusammenspiel */
  body.pg-afterglow:not(.pg-wedding) .ag-mosaic { gap: 14px; margin: 28px 0 32px; }
  body.pg-afterglow:not(.pg-wedding) .m-poster, body.pg-afterglow:not(.pg-wedding) .m-prog { grid-column: span 3; }
  body.pg-afterglow:not(.pg-wedding) .m-tick, body.pg-afterglow:not(.pg-wedding) .m-web { grid-column: 2 / span 4; }
  body.pg-afterglow:not(.pg-wedding) .ag-chips { margin-top: 24px; }
}

/* ==========================================================================
   Mobile-Typografie & Rhythmus (Afterglow-Case, ≤900px) — Wedding-Case ausgenommen
   ========================================================================== */
@media (max-width: 900px) {
  /* Headlines: groß, aber mit sicherem rechten Innenabstand */
  body.pg-afterglow:not(.pg-wedding) .ag-big { font-size: clamp(34px, 12vw, 78px); line-height: .95; max-width: 100%; }
  body.pg-afterglow:not(.pg-wedding) .ag-h2 { font-size: clamp(32px, 10.5vw, 70px); line-height: .98; max-width: 100%; }
  body.pg-afterglow:not(.pg-wedding) .ag-hero .ag-h { font-size: clamp(64px, 24vw, 130px); }
  body.pg-afterglow:not(.pg-wedding) .ag-tag { white-space: normal; max-width: 100%; }

  /* Fließtext: ruhiger */
  body.pg-afterglow:not(.pg-wedding) .ag-p { font-size: 15.5px; line-height: 1.55; }
  body.pg-afterglow:not(.pg-wedding) .ag-idea-txt .ag-p { font-size: 16px; }
  body.pg-afterglow:not(.pg-wedding) .ag-hero .ch-lede { font-size: 16.5px; }
  body.pg-afterglow:not(.pg-wedding) .ag-quote { font-size: 19px; }
  body.pg-afterglow:not(.pg-wedding) .ag-all-p { font-size: 15.5px; }
  body.pg-afterglow:not(.pg-wedding) .ag-facts dd, body.pg-afterglow:not(.pg-wedding) .ckv dd { font-size: 13px; }

  /* Rhythmus: Label → Headline → Text → Meta/Medien */
  body.pg-afterglow:not(.pg-wedding) .ag-h2 { margin: 20px 0 16px; }
  body.pg-afterglow:not(.pg-wedding) .ag-big { margin: 20px 0 22px; }
  body.pg-afterglow:not(.pg-wedding) .ag-facts { margin-top: 26px; }
  body.pg-afterglow:not(.pg-wedding) .ag-2col { row-gap: calc(var(--cell) * 1.2); }
  body.pg-afterglow:not(.pg-wedding) .f-auto { padding-top: calc(var(--cell) * 1.5); padding-bottom: calc(var(--cell) * 1.5); }

  /* Visuelles Konzept: Swatches sauber im Raster */
  body.pg-afterglow:not(.pg-wedding) .ag-sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; margin: 22px 0 16px; width: 100%; }
  body.pg-afterglow:not(.pg-wedding) .ag-sw li { gap: 8px; font-size: 11px; min-width: 0; }
  body.pg-afterglow:not(.pg-wedding) .ag-sw i { width: 28px; height: 28px; }
  body.pg-afterglow:not(.pg-wedding) .ag-fonts { font-size: 11px; letter-spacing: .03em; }
  body.pg-afterglow:not(.pg-wedding) .ag-side { width: 100%; }

  /* Schwarze Sections: gleicher Innenabstand */
  body.pg-afterglow:not(.pg-wedding) .ag-pl .ag-in { padding-left: calc(var(--cell) * .7); padding-right: calc(var(--cell) * .7); }
}