@media (max-width: 1050px) {
  #leistungsumfang .k3-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #leistungsumfang .k3-ticks { display: none; }
  #leistungsumfang [id^="k3-phase-"] { min-height: 0; }
  #leistungsumfang [id^="k3-phase-"]:nth-of-type(n+3) { border-top: 1px solid var(--line); }
  #leistungsumfang .k3-tech-inline { display: flex !important; }
  #leistungsumfang .k3-tech-block { display: none !important; }
}
@media (max-width: 560px) {
  #leistungsumfang .k3-grid { grid-template-columns: 1fr !important; }
  #leistungsumfang [id^="k3-phase-"] { border-left: 0 !important; padding: 30px 6vw 34px !important; min-height: 0 !important; }
  #leistungsumfang [id^="k3-phase-"]:nth-of-type(n+2) { border-top: 1px solid var(--line) !important; }
}
@media (max-width: 1024px) and (min-width: 561px) {
  #k4-stage-wrap { flex-direction: row !important; }
  #k4-process { flex: 0 1 42% !important; }
  #k4-link { width: 24px !important; }
  #k4-stage-wrap > div:last-child { flex: 0 1 58% !important; }
  #k4-stage-wrap [id^="k4-title-"] { font-size: 19px !important; }
  #k4-stage-wrap [id^="k4-step-"] { padding: 12px 16px !important; margin: 0 -16px !important; }
  #k4-stage-wrap [id^="k4-desc-"] p { font-size: 13px !important; line-height: 1.45 !important; margin: 5px 0 5px !important; }
}
@media (max-width: 820px) {
  #k4-link { display: none; }
}
@media (max-width: 560px) {
  #k4-process { display: none !important; }
  #k4-link { display: none !important; }
  #k4-stage-wrap { flex-direction: column !important; gap: 0 !important; height: 320vh !important; position: relative !important; }
  #k4-stage-wrap > div:last-child { position: relative !important; flex: 0 0 auto !important; width: 86vw !important; max-width: 340px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; }
  #k4-stage-wrap > div:last-child #k4-stage { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  #k4-stage-wrap > div:last-child > p { width: 100% !important; }
  #k4-img-0, #k4-img-1, #k4-img-2, #k4-img-3, #k4-img-4 { transition: opacity .15s linear !important; }
}
@media (max-width: 820px) {
  #ch5-stage { flex-direction: column; gap:32px; }
}
@media (max-width: 560px) {
  #ch5-modules { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  section[data-screen-label="02 Was eine gute Website leisten muss"] { padding: 56px 0 46px !important; }
  #word-stage { height: auto !important; min-height: 0 !important; margin-top: 20px !important; }
  #word-stage > div { position: static !important; padding: 28px 5vw !important; gap: 4px !important; }
  #word-stage > div > div { margin-left: 0 !important; text-align: center !important; }
  #word-stage span { max-width: 100% !important; font-size: clamp(48px, 13vw, 56px) !important; line-height: .9 !important; letter-spacing: -.03em !important; }
  #word-responsive span { letter-spacing: -.045em !important; }
}

/* The outline is a separate layer behind the foreground text. This keeps the
   stroke entirely outside the letterforms instead of cutting into them. */
#word-inhalt span[data-outline-word],
#word-responsive span[data-outline-word],
#word-technik span[data-outline-word] {
  position: relative;
  isolation: isolate;
  color: transparent !important;
  -webkit-text-stroke: 0 !important;
}
#word-inhalt span[data-outline-word]::before,
#word-responsive span[data-outline-word]::before,
#word-technik span[data-outline-word]::before,
#word-inhalt span[data-outline-word]::after,
#word-responsive span[data-outline-word]::after,
#word-technik span[data-outline-word]::after {
  content: attr(data-outline-word);
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: nowrap;
}
#word-inhalt span[data-outline-word]::before {
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 3px var(--black);
}
#word-responsive span[data-outline-word]::before {
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 3px var(--yellow);
}
#word-technik span[data-outline-word]::before {
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 3px var(--yellow);
}
#word-inhalt span[data-outline-word]::after,
#word-responsive span[data-outline-word]::after {
  color: #fff;
}
#word-technik span[data-outline-word]::after {
  color: var(--black);
}
@media (max-width: 560px) {
  #word-inhalt span[data-outline-word]::before { -webkit-text-stroke-width: 2px; }
  #word-responsive span[data-outline-word]::before { -webkit-text-stroke-width: 1.5px; }
  #word-technik span[data-outline-word]::before { -webkit-text-stroke-width: 2px; }
}

/* The form sits inside a dark section, so its labels need their own text color
   on the white surface, just like the form on the homepage. */
#projektanfrage .form-wrap { color: var(--black); }
@media (max-width: 1050px) {
  #resp-composition { grid-template-columns: 1fr !important; }
  #resp-state-list { flex-direction: row !important; justify-content: space-between; gap: 16px !important; }
  #resp-stage-wrap-outer { height: auto !important; overflow: visible !important; }
  #resp-tablet-scroll { position: relative; height: 260vh; }
  #resp-composition { position: sticky !important; top: 8vh !important; height: auto !important; }
}
@media (max-width: 560px) {
  #resp-state-list { display: none !important; }
  section[data-screen-label="06 Responsive Design"] { padding: 64px 0 56px !important; }
  #resp-stage-wrap-outer { position: relative !important; overflow: visible !important; height: auto !important; }
  #resp-tablet-scroll { position: relative !important; }
  #resp-composition { position: sticky !important; top: 0 !important; height: auto !important; z-index: 1; }
  #resp-frame, #resp-hero, #resp-cards, #resp-card-0, #resp-card-1, #resp-card-2 { min-width: 0 !important; max-width: 100% !important; }
  #resp-p, #resp-card-0 p, #resp-card-1 p, #resp-card-2 p { max-width: 100% !important; overflow-wrap: break-word !important; word-break: normal !important; }
}
@media (max-width: 820px) {
  #k7-grid { grid-template-columns: 1fr !important; }
  #k7-track { display: none !important; }
}
@media (max-width: 860px) {
  #ref-stage { grid-template-columns: 1fr !important; }
}
@media (max-width: 1024px) {
  #k3-headline { max-width: 640px; }
  #k3-desc { max-width: 480px; }
}
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  #hero-section { padding: 44px 0 56px !important; overflow-x: hidden; }
  #hero-visual-col { display: none !important; }
}
@media (max-width: 560px) {
  html, body { overflow-x: clip; }
}
@media (max-width: 560px) {
  #price-diagram-grid { grid-template-columns: 1fr 32px 1fr !important; grid-template-rows: none !important; column-gap: 6px !important; row-gap: 12px !important; padding-top: 12px !important; }
  #price-diagram-grid > div { display: contents !important; }
  #price-diagram-grid div { box-sizing: border-box !important; min-width: 0 !important; }
  #price-diagram-grid span { font-size: 11px !important; letter-spacing: .02em !important; }
  #price-diagram-grid > div:nth-child(1) > div:nth-child(1),
  #price-diagram-grid > div:nth-child(2) > div:nth-child(1),
  #price-diagram-grid > div:nth-child(3) > div:nth-child(1),
  #price-diagram-grid > div:nth-child(4) > div:nth-child(1),
  #price-diagram-grid > div:nth-child(5) > div:nth-child(1),
  #price-diagram-grid > div:nth-child(4) > div:nth-child(3) { display: none !important; }
  #price-diagram-grid > div:nth-child(1) > div:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; padding: 16px 8px !important; }
  #price-diagram-grid > div:nth-child(2) > div:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; padding: 8px 0 !important; }
  #price-diagram-grid > div:nth-child(3) > div:nth-child(2) { grid-column: 3 !important; grid-row: 1 !important; margin: 0 !important; padding: 16px 8px !important; }
  #price-diagram-grid > div:nth-child(5) > div:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; padding: 16px 8px !important; }
  #price-diagram-grid > div:nth-child(2) > div:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; margin: 0 !important; padding: 8px 0 !important; }
  #price-diagram-grid > div:nth-child(1) > div:nth-child(3) { grid-column: 3 !important; grid-row: 2 !important; margin: 0 !important; padding: 16px 8px !important; }
  #price-diagram-grid > div:nth-child(3) > div:nth-child(3) { grid-column: 1 !important; grid-row: 3 !important; margin: 0 !important; padding: 16px 8px !important; }
  #price-diagram-grid > div:nth-child(4) > div:nth-child(2) { grid-column: 2 !important; grid-row: 3 !important; margin: 0 !important; padding: 8px 0 !important; }
  #price-diagram-grid > div:nth-child(5) > div:nth-child(3) { grid-column: 3 !important; grid-row: 3 !important; margin: 0 !important; padding: 16px 8px !important; }
}