/* Statische Projektmedien und Leistungsumfang auf der gemeinsamen Seitenbasis. */
.grafikdesign {
  --grafik-hell: #eae8e3;
  --grafik-graphit: #242327;
}
/* Die Abschnittsflächen reichen bis zum Rand, der Inhalt folgt der .shell-Breite. */
.grafikdesign > .shell {
  max-width: none;
  padding-inline: max(var(--pad), calc((100% - 1512px) / 2 + var(--pad)));
}
.grafikdesign .hero {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas: "copy image" "credit credit";
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  height: auto;
  min-height: 500px;
  padding: clamp(46px, 6vw, 85px) var(--pad) 26px;
  background: radial-gradient(ellipse at 84% 44%,#282930,#19191d 52%,#111114 78%);
}
.grafikdesign .hero-copy, .grafikdesign .hero-credit {
  position: static;
  width: auto;
}
.grafikdesign .hero-copy { grid-area: copy; }
.grafikdesign .hero h1 {
  font-size: clamp(52px, 6.2vw, 96px);
  white-space: normal;
}
.grafikdesign .hero h1 span {
  display: block;
  margin-top: .08em;
  font-size: .79em;
}
.grafikdesign .hero-credit { grid-area: credit; }
.grafik-hero-projekt { font-size: 15px; }
.grafik-hero-bild { grid-area: image; min-width: 0; }
.grafik-hero-bild img {
  width: 100%;
  border: 1px solid #ffffff27;
  border-radius: 5px;
  box-shadow: 0 18px 52px #08080d84;
}
.grafikdesign .grafik-einstieg {
  --line: #51424838;
  align-items: center;
  gap: clamp(24px, 5vw, 76px);
  padding-block: clamp(46px, 6.5vw, 92px);
  background: var(--grafik-hell);
  color: #29282d;
  color-scheme: light;
}
.grafik-einstieg .eyebrow { color: #6f3b42; }
.grafik-einstieg h2 {
  max-width: 16ch;
  text-wrap: balance;
}
.grafik-einstieg .intro-copy {
  border-inline-start: 1px solid var(--line);
  padding: .15rem 0 .15rem clamp(20px, 3.5vw, 52px);
}
.grafik-einstieg .intro-copy p { color: #51484d; }
.grafik-einstieg .intro-copy p + p { margin-top: 1.15rem; }
.grafik-textlink {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  min-height: 44px;
  margin-top: .65rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}
.grafik-hero-ausstattung {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1fr);
  grid-template-areas: "flyer karte" "flyer ticket";
  gap: clamp(6px, 1.1vw, 14px);
  align-items: end;
  max-width: 570px;
}
.grafik-hero-ausstattung img:nth-child(1) { grid-area: flyer; align-self: center; }
.grafik-hero-ausstattung img:nth-child(2) { grid-area: karte; width: 65%; justify-self: center; }
.grafik-hero-ausstattung img:nth-child(3) { grid-area: ticket; align-self: start; }
.grafik-hero-paar {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: clamp(9px, 1.8vw, 24px);
  max-width: 630px;
}
.grafik-hero-paar img {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #18181c;
}
.grafik-hero-paar figcaption {
  color: var(--muted);
  font-size: .85rem;
  margin-top: .65em;
}
.grafik-arbeiten {
  padding-block: clamp(42px, 6vw, 82px);
  background: var(--grafik-graphit);
}
.grafik-arbeiten .eyebrow,
.grafik-anwendungen .eyebrow { margin-bottom: 20px; }
.grafik-eventablauf {
  --grafik-zahlenspur: 120px;
  --grafik-spurabstand: 25px;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.65fr);
  gap: clamp(30px, 5vw, 74px);
}
.grafik-eventablauf .process-intro { color: var(--text); }
.grafik-eventablauf .process-intro .eyebrow,
.grafik-eventablauf .process-intro > p:last-child { color: var(--muted); }
.grafik-eventablauf .process-intro > p:last-child { max-width: 40ch; }
.grafik-eventfolge li {
  align-items: start;
  scroll-margin-top: 24px;
}
.grafik-event-vorher { --step-image: url("/wp-content/themes/fastlife-premium-white/fls-20261113/assets/c544452081-RACE1000_Webbanner.webp"); }
.grafik-event-vor-ort { --step-image: url("/wp-content/themes/fastlife-premium-white/fls-20261113/assets/c5a6b300bb-RACE1000_Fahrerkarte.webp"); }
.grafik-event-nachher { --step-image: url("/wp-content/themes/fastlife-premium-white/fls-20261113/assets/5f70135c7a-RACE1000_Fahrerlager.jpg"); }
.grafik-eventinhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: 18px clamp(18px, 3vw, 36px);
  align-items: start;
}
.grafik-eventtext .grafik-phase {
  margin: 2px 0 .5rem;
  color: #ddbac0;
  font-size: .72rem;
  font-weight: 700;
}
.grafik-eventtext p:last-child { color: var(--muted); }
.grafik-arbeit a {
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #1a1a1f;
}
.grafik-arbeit a:hover { border-color: #a7a4a6; }
.grafik-bildvordergrund {
  width: 100%;
  height: clamp(145px, 15vw, 238px);
  object-fit: contain;
}
.grafik-arbeit .grafik-bildhintergrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(16px) brightness(.6) saturate(.78);
}
.grafik-rueckblick img { object-fit: cover; object-position: 50% 59%; }
.grafik-arbeit figcaption, .grafik-anwendung-bild figcaption {
  margin-top: .7rem;
  font-size: .9rem;
  line-height: 1.5;
}
.grafik-arbeit figcaption { color: var(--muted); }
.grafik-anwendung-bild figcaption span { display: block; margin-top: .28rem; }
.grafik-kreislauf { margin-top: 16px; padding-left: 25px; }
.grafik-kreislauf-zurueck {
  display: inline-grid;
  grid-template-columns: var(--grafik-zahlenspur) minmax(0, 1fr);
  align-items: center;
  gap: var(--grafik-spurabstand);
  min-height: 54px;
  color: #ead4d7;
  font-weight: 600;
}
.grafik-kreislauf-zurueck span { text-decoration: underline; text-underline-offset: .24em; }
.grafik-rueckpfeil {
  width: min(84px, 100%);
  height: auto;
  justify-self: start;
  color: #df9ba5;
  opacity: .64;
}
.grafik-kreislauf-zurueck:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .grafik-kreislauf-zurueck:is(:hover, :focus-visible) .grafik-rueckpfeil {
    animation: grafik-rueckpfeil 1.15s ease-in-out;
  }
}
@keyframes grafik-rueckpfeil {
  50% { transform: translateY(-4px); opacity: .95; }
}
.grafik-kreislauf-abschluss {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 1rem clamp(24px, 5vw, 70px);
  margin-top: clamp(24px, 4vw, 42px);
  padding: clamp(18px, 2.7vw, 32px);
  background: #30252e;
  border-left: 3px solid #a75560;
}
.grafik-kreislauf-abschluss h3 { margin-bottom: .35rem; font-size: 1.2rem; }
.grafik-kreislauf-abschluss p { max-width: 58ch; color: var(--muted); }
.grafik-kreislauf-abschluss .grafik-textlink { justify-self: start; margin: 0; }
.grafik-anwendungen {
  padding-block: clamp(46px, 5vw, 72px);
  background: var(--grafik-hell);
  color: #29282d;
  color-scheme: light;
}
.grafik-anwendungen .eyebrow { color: #6f3b42; }
.grafik-anwendung {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  align-items: start;
  gap: clamp(28px, 5vw, 76px);
  border-top: 1px solid #31292c32;
  margin-top: clamp(28px, 4vw, 52px);
  padding-top: clamp(25px, 3vw, 42px);
}
.grafik-anwendung h3 {
  margin-bottom: .6rem;
  font-size: clamp(27px, 3vw, 41px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.024em;
}
.grafik-anwendung-copy > p { max-width: 58ch; }
.grafik-leistungen { margin-top: 1.2rem; }
.grafik-leistungen > div { padding: .9rem 0; border-top: 1px solid #31292c25; }
.grafik-leistungen dt { font-size: 1.12rem; font-weight: 700; }
.grafik-leistungen dd { margin-top: .35rem; color: #484249; font-size: 1rem; }
.grafik-anwendung-logo { display: block; max-width: 720px; }
.grafik-anwendung-logo .eyebrow { margin-bottom: 10px; }
.grafik-anwendung-bild img { border-radius: 6px; width: 100%; }
.grafik-anwendung-bild figcaption span { color: #484249; }
.grafikdesign .process-steps li { border-bottom-color: var(--line); }
.grafikdesign .process-steps li::before {
  left: -30px;
  border-color: var(--grafik-graphit);
  box-shadow: 0 0 0 1px #b46a75;
}
.grafikdesign .process-steps .step-number { -webkit-text-stroke-color: #eac2c965; }
.grafikdesign .faq-title h2 { text-wrap: balance; }
.grafikdesign .process {
  background: var(--grafik-graphit);
  color: var(--text);
  color-scheme: dark;
}
.grafikdesign .process .process-steps p,
.grafikdesign .process .process-intro .eyebrow,
.grafikdesign .process .process-intro > p:last-child { color: var(--muted); }
.grafikdesign .process .process-steps p + p { margin-top: .75rem; }
.grafikdesign .faq {
  --line: #28252b36;
  background: var(--grafik-hell);
  color: #29282d;
  color-scheme: light;
}
.grafikdesign .faq-title .eyebrow { color: #5b5256; }
.grafikdesign .faq details p { color: #49434a; }
.grafikdesign .faq-callout { color: var(--text); color-scheme: dark; }
.grafikdesign .faq-callout:focus-visible { outline-color: var(--red-deep); }
.grafikdesign .contact {
  padding-block: clamp(28px, 5vw, 64px);
  background: var(--bg);
}

@media (max-width: 1100px) {
  .grafik-eventablauf { --grafik-zahlenspur: 95px; --grafik-spurabstand: 20px; }
}
@media (max-width: 800px) {
  .grafik-eventablauf { --grafik-zahlenspur: 74px; --grafik-spurabstand: 17px; }
}

@media (max-width: 1120px) {
  .grafik-eventinhalt { grid-template-columns: minmax(0, 1fr); }
  .grafik-eventinhalt .grafik-arbeit { max-width: 390px; }
  .grafik-bildvordergrund { height: clamp(170px, 25vw, 235px); }
}

@media (max-width: 680px) {
  .grafikdesign .hero {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "copy" "image" "credit";
    min-height: 0;
    gap: 22px;
    padding-block: 33px 22px;
  }
  .grafikdesign .hero h1 { font-size: clamp(42px, 10.5vw, 65px); }
  .grafikdesign .hero-lead { max-width: 37ch; margin-top: 15px; }
  .grafikdesign .hero-action { margin-top: 19px; }
  .grafikdesign .hero-credit { padding-top: 10px; }
  .grafik-anwendung { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .grafik-eventablauf { display: block; }
  .grafik-eventablauf .process-intro { margin-bottom: 34px; }
  .grafik-kreislauf { padding-left: 17px; }
}
@media (max-width: 600px) {
  .full-page-study .site-header nav { gap: 6px; flex-wrap: wrap; }
  .full-page-study .site-header nav a { display: inline-flex; align-items: center; min-height: 34px; }
  .full-page-study .site-header nav .nav-contact { padding-inline: 8px; }
  .grafik-arbeiten { padding-block: 36px 48px; }
  .grafikdesign .process-steps li:before { left: -22px; }
  .grafik-eventablauf { --grafik-zahlenspur: 65px; --grafik-spurabstand: 15px; }
  .grafik-einstieg .intro-copy {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding: 18px 0 0;
  }
}