/* Final sizing pass. No scaling of whole sections or fixed-position dialogs. */
#wirtschaftlichkeit .economics-bridge {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
#wirtschaftlichkeit .economics-bridge .reference-intro {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-inline: 0;
  font-size: clamp(1.1rem, 1.65vw, 1.5rem);
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* The four decisions sit in the optical middle of the bridge between the
   evidence paragraph and the strategy construction below. */
@media (min-width: 761px) {
  #wirtschaftlichkeit .business-grid.business-progress {
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
  }
}

/* Keep the use-case introduction close to its title while retaining a
   separate, calmer hand-off to the cards. */
#anwendungsbeispiele .section-heading {
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
#anwendungsbeispiele .section-heading-copy {
  gap: clamp(.8rem, 1.35vw, 1.25rem);
}

/* The explanatory bridge belongs exactly between the fusion graphic and the
   interactive application map, not visually to either one. */
#moderne-ki .system-fusion { margin-bottom: 0; }
#moderne-ki .modern-ai-intro {
  margin: clamp(2.25rem, 4vw, 3.5rem) auto;
}

/* New messages own their position; browser scroll anchoring must not move the
   question upward while the answer is being typed underneath it. */
#moderne-ki .ai-chat-conversation {
  overflow-anchor: none;
  scroll-padding-block: clamp(1rem, 2vw, 1.5rem);
}

/* On wide layouts the complete team message lives inside the two portrait
   edges. JavaScript only reduces these two readable sizes when a real font or
   viewport measurement requires it. */
#unsere-sicht .view-people-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
#unsere-sicht .view-copy-column {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}
#unsere-sicht .view-heading h2 {
  margin: 0 0 clamp(.65rem, .9vw, 1rem);
  font-size: var(--view-title-size, clamp(1.65rem, 2.3vw, 2.8rem));
  line-height: 1.06;
  white-space: normal;
  text-wrap: balance;
}
#unsere-sicht .view-heading h2 > span {
  display: inline;
  white-space: normal;
}
#unsere-sicht .view-copy {
  columns: 2;
  column-gap: clamp(1rem, 2vw, 1.75rem);
}
#unsere-sicht .view-copy p {
  margin: 0 0 clamp(.35rem, .6vw, .65rem);
  font-size: var(--view-copy-size, clamp(.8rem, .88vw, .98rem));
  line-height: 1.42;
}
#unsere-sicht .view-copy p:last-child { margin-bottom: 0; }

/* The three foundation cards no longer repeat an artificial sequence number.
   Their headings already communicate the intended learning progression. */
#strategie .strategy-learning-path small { display: none; }

/* When a portrait-height fit would require unreadably small type, the whole
   copy deliberately reflows below two equal portraits instead of protruding
   beyond their top or bottom edges. */
@media (max-width: 1100px) {
  #unsere-sicht .view-people-layout,
  #unsere-sicht .view-people-layout.is-view-copy-stacked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #unsere-sicht .view-copy-column {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
  }
  #unsere-sicht .team-portrait:first-child { grid-column: 1; grid-row: 1; }
  #unsere-sicht .team-portrait:last-child { grid-column: 2; grid-row: 1; }
  #unsere-sicht .team-portrait-frame { max-width: 18rem; margin-inline: auto; }
  #unsere-sicht .view-heading h2 { font-size: clamp(1.8rem, 5vw, 3.35rem); }
  #unsere-sicht .view-copy { columns: 1; }
  #unsere-sicht .view-copy p { font-size: clamp(.94rem, 1.5vw, 1.02rem); line-height: 1.65; }
}
@media (min-width: 1101px) {
  /* The four paragraphs read as two deliberate pairs on desktop. Unlike CSS
     newspaper columns, the grid keeps the original paragraph order and avoids
     one dense column beside one visibly short column. */
  #unsere-sicht .view-people-layout:not(.is-view-copy-stacked) .view-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.65rem, .85vw, .9rem) clamp(1.25rem, 2vw, 1.85rem);
    columns: auto;
  }
  #unsere-sicht .view-people-layout:not(.is-view-copy-stacked) .view-copy p {
    margin: 0;
    line-height: 1.48;
  }
  #unsere-sicht .view-people-layout.is-view-copy-stacked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #unsere-sicht .view-people-layout.is-view-copy-stacked .view-copy-column {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }
  #unsere-sicht .view-people-layout.is-view-copy-stacked .team-portrait:first-child { grid-column: 1; grid-row: 1; }
  #unsere-sicht .view-people-layout.is-view-copy-stacked .team-portrait:last-child { grid-column: 2; grid-row: 1; }
  #unsere-sicht .view-people-layout.is-view-copy-stacked .team-portrait-frame { max-width: 20rem; margin-inline: auto; }
  #unsere-sicht .view-people-layout.is-view-copy-stacked .view-copy { columns: 1; }
}

/* One urgency statement leads directly into the existing action; it is
   differentiated by weight and a short purple guide, not another card. */
#kontakt .onsite-contact-urgency {
  position: relative;
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  padding-left: clamp(1rem, 1.6vw, 1.4rem);
  color: color-mix(in srgb, var(--text) 84%, var(--muted) 16%);
}
#kontakt .onsite-contact-urgency::before {
  content: "";
  position: absolute;
  top: .2em;
  bottom: .2em;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(var(--accent-soft), rgba(var(--accent-rgb), .18));
  box-shadow: 0 0 1rem rgba(var(--accent-rgb), .22);
}
#kontakt .onsite-contact-urgency strong {
  color: var(--text);
  font-weight: 650;
}

/* Headings stay readable in narrow windows and when users enlarge text. */
#economics-title.fitted-title-wrap,
#view-title.fitted-title-wrap {
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  white-space: normal;
  text-wrap: balance;
}
#economics-title.fitted-title-wrap > span,
#view-title.fitted-title-wrap > span { white-space: normal; max-width: 100%; }
#use-cases-title, #modern-ai-title { white-space: normal; text-wrap: balance; }
.service-grid-compact h3 { overflow-wrap: anywhere; }

/* The full local-AI chapter has one height budget: title + scene + benefits +
   explanation + CTA. Only the scene is resized; its approved coordinates stay. */
main > #lokale-ki {
  padding-block: clamp(1rem, 2.5svh, 2rem);
  scroll-margin-top: .5rem;
}
#lokale-ki .local-ai-intro { display: block; margin: 0; text-align: center; }
#lokale-ki .local-ai-intro h2 {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: clamp(1.8rem, min(3.8vw, 5svh), 3.8rem);
  line-height: 1.12;
  white-space: normal;
  text-wrap: balance;
}
#lokale-ki .local-security-visual {
  --local-glow-room: clamp(.75rem, 2svh, 1.5rem);
  margin-top: calc(var(--local-glow-room) + .5rem);
}
#lokale-ki .local-security-stage {
  /* CSS-only fallback; the enhancement subtracts the measured text height. */
  width: min(100%, var(--local-scene-width, max(40rem, min(65rem, calc((100svh - 18rem) * 1.5)))));
  max-width: none;
  margin-inline: auto;
}
#lokale-ki .local-ai-node { gap: clamp(.3rem, .85cqw, .65rem); }
#lokale-ki .local-ai-node-copy strong { font-size: clamp(.85rem, 1.65cqw, 1.45rem); }
#lokale-ki .local-ai-node-copy small { font-size: clamp(.6rem, 1cqw, .78rem); }
#lokale-ki .local-data-label {
  min-height: max(6.5%, 2.2rem);
  gap: clamp(.3rem, .65cqw, .65rem);
  padding: .45rem clamp(.4rem, 1cqw, 1rem);
  font-size: clamp(.7rem, 1.2cqw, 1rem);
}
#lokale-ki .local-data-label svg { flex: 0 0 auto; width: clamp(.85rem, 1.6cqw, 1.6rem); height: auto; }
#lokale-ki .local-control-points {
  padding-top: clamp(.5rem, 1.5svh, 1rem);
  gap: clamp(.5rem, 3vw, 3rem);
  flex-wrap: wrap;
}
#lokale-ki .local-control-points li { min-width: 0; font-size: clamp(.75rem, 1vw, .94rem); }
#lokale-ki .local-control-points svg { flex: 0 0 auto; }
#lokale-ki .local-ai-foot { margin-top: clamp(.65rem, 1.5svh, 1rem); gap: clamp(.65rem, 1.5svh, 1rem); }
#lokale-ki .local-ai-foot p { max-width: 80ch; font-size: clamp(.875rem, 1vw, .98rem); line-height: 1.5; text-align: center; }
#lokale-ki .local-ai-detail-trigger { min-height: 2.75rem; padding-block: .6rem; }
@media (max-width: 760px) {
  #lokale-ki .local-ai-intro h2 { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
  #lokale-ki .local-security-stage {
    width: min(100%, var(--local-scene-width, max(15rem, min(23rem, calc((100svh - 23rem) * .642857)))));
  }
  #lokale-ki .local-ai-node { gap: .3rem; }
  #lokale-ki .local-ai-node-copy strong { font-size: .875rem; }
  #lokale-ki .local-ai-node-copy small { font-size: .6rem; }
  #lokale-ki .local-data-label { min-height: 2rem; font-size: .65rem; padding: .25rem .3rem; gap: .25rem; }
  #lokale-ki .local-data-label svg { width: .85rem; }
  #lokale-ki .local-control-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #lokale-ki .local-control-points li { flex-direction: column; text-align: center; gap: .3rem; }
  #lokale-ki .local-control-points svg { width: 1.4rem; height: 1.4rem; }
}

/* Phone composition: the complete opening scene owns the first viewport, while
   its content is compact enough for small portrait screens without clipping. */
@media (max-width: 760px) {
  :root {
    --mobile-site-header-height: clamp(3.5rem, 7.2svh, 3.9rem);
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    height: var(--mobile-site-header-height);
    min-height: var(--mobile-site-header-height);
    gap: .45rem;
  }
  .site-header .brand { display: none; }
  .site-header .mobile-menu-toggle,
  .site-header .theme-toggle {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: .72rem;
  }

  .hero-terminal-shell.hero-unified {
    grid-template-rows: minmax(0, 24%) minmax(0, 76%);
    width: 100%;
    height: calc(100svh - var(--mobile-site-header-height));
    min-height: 0;
    padding-bottom: clamp(.45rem, 1svh, .7rem);
    overflow: hidden;
  }
  .hero-unified .wordmark-hero {
    justify-content: flex-start;
    gap: clamp(.55rem, 1.3svh, .75rem);
    padding-top: clamp(.45rem, 1.15svh, .75rem);
  }
  .hero-unified .hero-wordmark-stage {
    width: min(100%, calc(15.5svh * 4.8));
  }
  .hero-unified .hero-main-title {
    margin: 0;
    font-size: clamp(.78rem, 4.1vw, 1.08rem);
    line-height: 1;
    letter-spacing: -.045em;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .hero-unified .hero-main-title-copy { display: block; }

  .hero-unified .hero { padding-top: 0; }
  .hero-server-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(4.25rem, 23%);
    column-gap: .35rem;
    align-items: center;
    height: 100%;
  }
  .hero-server-stage::before { inset: -3% -5%; }
  .hero-server-rack { display: none; }
  .hero-server-rack-right {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 100%;
    max-width: 5.6rem;
    height: min(100%, clamp(11rem, 31svh, 16rem));
    justify-self: end;
  }
  .hero-system-screen {
    grid-column: 1;
    grid-row: 1;
    place-items: center start;
    padding: 0;
  }
  .hero-system-screen .monitor-services { text-align: left; }
  .monitor-services .monitor-services-label { display: none; }
  .hero-system-screen .monitor-service-list {
    gap: clamp(.75rem, 2.3svh, 1.1rem);
  }
  .hero-system-screen .monitor-service-list > li {
    justify-content: flex-start;
    gap: .55rem;
  }
  .monitor-service-list svg {
    width: clamp(1rem, 4.6vw, 1.2rem);
    height: clamp(1rem, 4.6vw, 1.2rem);
  }
  .monitor-service-list h2 {
    font-size: clamp(.7rem, 3.25vw, .86rem);
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .hero-unified .hero-copy .hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .45rem;
    margin-top: clamp(.3rem, .8svh, .55rem);
  }
  .hero-unified .hero-copy .hero-actions > a,
  .hero-copy .hero-actions .button,
  .hero-copy .hero-actions .text-link {
    min-width: 0;
    width: 100%;
    min-height: 2.35rem;
    padding: .48rem .35rem;
    overflow: hidden;
    font-size: clamp(.58rem, 2.55vw, .72rem);
    white-space: nowrap;
  }

  /* The first chapter starts below the opening viewport and then uses the
     existing intersection reveal as soon as the visitor scrolls. */
  main > #leistungen { padding-top: clamp(5.5rem, 14svh, 7.5rem); }

  #leistungen .services-compact-intro {
    margin-bottom: 1.25rem;
    font-size: clamp(1.45rem, 6.3vw, 2rem);
    line-height: 1.08;
  }
  #leistungen .service-grid.service-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }
  #leistungen .service-grid-compact .service-card {
    grid-column: auto;
    min-height: 13.5rem;
    padding: .9rem;
    border-radius: .95rem;
  }
  #leistungen .service-grid-compact .card-icon {
    width: 1.45rem;
    height: 1.45rem;
    margin-bottom: .7rem;
  }
  #leistungen .service-grid-compact h3 {
    min-height: 3.6em;
    max-width: none;
    font-size: clamp(.82rem, 3.65vw, 1rem);
    line-height: 1.16;
    overflow-wrap: normal;
  }
  #leistungen .service-grid-compact h3 br { display: none; }
  #leistungen .service-grid-compact .service-summary {
    margin: .6rem 0 .8rem;
    font-size: clamp(.68rem, 2.75vw, .78rem);
    line-height: 1.42;
  }
  #leistungen .service-card-more {
    gap: .45rem;
    font-size: .66rem;
  }
  #leistungen .service-card-more i {
    position: relative;
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0;
  }
  #leistungen .service-card-more i::before {
    content: "";
    position: absolute;
    width: .48rem;
    height: .48rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translate(.05rem, -.05rem);
  }
  #leistungen .service-card-more i::after {
    content: "";
    position: absolute;
    width: .62rem;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
  }

  #wirtschaftlichkeit .section-heading {
    margin-bottom: 1rem;
    text-align: center;
  }
  #wirtschaftlichkeit #economics-title,
  #wirtschaftlichkeit #economics-title.fitted-title-wrap {
    width: 100%;
    margin-inline: auto;
    font-size: clamp(1.35rem, 5.8vw, 1.7rem);
    line-height: 1.06;
    letter-spacing: -.045em;
    text-align: center;
    text-wrap: balance;
  }
  #wirtschaftlichkeit .evidence-showcase { gap: 1.25rem; }
  #wirtschaftlichkeit .evidence-portal-chart {
    height: clamp(17rem, 69vw, 19rem);
    padding: .7rem .35rem .8rem;
  }
  #wirtschaftlichkeit .evidence-bars { gap: .35rem; }
  #wirtschaftlichkeit .evidence-bar {
    min-height: 7.5rem;
    padding: .65rem .4rem;
  }
  #wirtschaftlichkeit .evidence-bar-copy strong,
  #wirtschaftlichkeit .evidence-bar-productivity .evidence-bar-copy strong {
    font-size: clamp(.98rem, 4.35vw, 1.2rem);
    letter-spacing: -.07em;
    line-height: 1;
    white-space: nowrap;
  }
  #wirtschaftlichkeit .evidence-bar-copy b {
    margin-top: .38rem;
    font-size: clamp(.58rem, 2.5vw, .68rem);
    line-height: 1.08;
    overflow-wrap: normal;
  }
  #wirtschaftlichkeit .evidence-bar-copy small {
    gap: .15rem;
    font-size: .48rem;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .hero-unified .hero-main-title { font-size: clamp(.7rem, 3.95vw, .9rem); }
  .monitor-service-list h2 { font-size: clamp(.62rem, 3.15vw, .75rem); }
  #leistungen .service-grid-compact .service-card { padding: .78rem; }
  #leistungen .service-grid-compact h3 { font-size: clamp(.72rem, 3.55vw, .9rem); }
}

/* The wrapper is structural on wide screens so the reviewed desktop rhythm
   remains unchanged. Phones use it to pair the decision questions with a
   genuinely vertical four-step process. */
.economics-method-layout { display: contents; }

@media (max-width: 760px) {
  #wirtschaftlichkeit {
    --mobile-economics-copy-size: clamp(.79rem, 3.35vw, .86rem);
  }

  /* Keep the terminal, explanation and source together as one compact study. */
  #wirtschaftlichkeit .evidence-showcase { gap: .45rem; }
  #wirtschaftlichkeit .evidence-team {
    margin-top: 0;
    padding: .1rem 0 0;
  }
  #wirtschaftlichkeit .evidence-team-terminal {
    min-height: 6.1rem;
    border-radius: .72rem;
  }
  #wirtschaftlichkeit .evidence-terminal-line {
    gap: .55rem;
    padding: 1.05rem .9rem 1.2rem;
  }
  #wirtschaftlichkeit .evidence-team-terminal strong {
    font-size: clamp(.7rem, 3vw, .8rem);
    line-height: 1.42;
  }
  #wirtschaftlichkeit .evidence-team-copy {
    margin-top: .75rem;
    text-align: center;
  }
  #wirtschaftlichkeit .evidence-team-copy > p:first-child {
    max-width: 46ch;
    margin-inline: auto;
    font-size: var(--mobile-economics-copy-size);
    line-height: 1.48;
    text-align: center;
    text-wrap: pretty;
  }
  #wirtschaftlichkeit .evidence-team-copy .source-meta {
    margin-top: .7rem;
    padding-top: 0;
    font-size: .55rem;
  }
  #wirtschaftlichkeit .evidence-team-copy .source-link {
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    margin-top: .45rem;
    padding-top: .55rem;
    font-size: .68rem;
    text-align: left;
  }

  /* Draw arrows with the site's own strokes. This prevents the coloured
     platform emoji that iOS otherwise substitutes for the glyph. */
  #wirtschaftlichkeit .source-link > span,
  #wirtschaftlichkeit .business-step button > small i {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: .82rem;
    height: .82rem;
    margin-left: 0;
    overflow: hidden;
    color: var(--accent-soft);
    font-size: 0;
    line-height: 0;
  }
  #wirtschaftlichkeit .source-link > span::before,
  #wirtschaftlichkeit .business-step button > small i::before {
    content: "";
    position: absolute;
    top: .08rem;
    right: .08rem;
    width: .42rem;
    height: .42rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
  }
  #wirtschaftlichkeit .source-link > span::after,
  #wirtschaftlichkeit .business-step button > small i::after {
    content: "";
    position: absolute;
    top: .39rem;
    right: .06rem;
    width: .72rem;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: right center;
  }
  #wirtschaftlichkeit .source-link > span::after {
    transform-origin: center;
  }

  .economics-method-layout {
    display: grid;
    grid-template-columns: minmax(8rem, 43%) minmax(0, 57%);
    gap: .7rem;
    align-items: center;
    margin-top: 1.1rem;
  }
  #wirtschaftlichkeit .economics-bridge {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0 0 0 .2rem;
    border: 0;
  }
  #wirtschaftlichkeit .economics-bridge .reference-intro {
    font-size: var(--mobile-economics-copy-size);
    line-height: 1.52;
    text-align: left;
    text-wrap: pretty;
  }
  #wirtschaftlichkeit .economics-bridge strong {
    color: var(--text);
    font-weight: 650;
  }

  #wirtschaftlichkeit .business-grid.business-progress {
    --step-symbol-size: 3.55rem;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
    gap: .35rem;
    padding: .2rem 0;
  }
  #wirtschaftlichkeit .business-progress .business-step {
    min-height: 6.3rem;
  }
  #wirtschaftlichkeit .business-step > button {
    grid-template-columns: var(--step-symbol-size) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: .55rem;
    align-content: center;
    justify-items: start;
    min-height: 5.95rem;
    padding: .25rem 0;
    text-align: left;
  }
  #wirtschaftlichkeit .business-step-graphic {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: var(--step-symbol-size);
    height: var(--step-symbol-size);
  }
  #wirtschaftlichkeit .step-open-badge {
    right: -.08rem;
    bottom: -.05rem;
    width: 1.05rem;
    height: 1.05rem;
    box-shadow: 0 0 0 3px var(--bg);
    font-size: .82rem;
  }
  #wirtschaftlichkeit .business-step-number {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: .5rem;
  }
  #wirtschaftlichkeit .business-step button > strong {
    grid-column: 2;
    grid-row: 2;
    margin: .05rem 0 0;
    font-size: clamp(.78rem, 3.2vw, .88rem);
    line-height: 1.06;
  }
  #wirtschaftlichkeit .business-step button > small {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    gap: .3rem;
    min-height: 1.55rem;
    margin-top: .38rem;
    padding: .22rem .4rem;
    font-size: .52rem;
    white-space: nowrap;
  }
  #wirtschaftlichkeit .business-step button > small i {
    width: .62rem;
    height: .62rem;
  }
  #wirtschaftlichkeit .business-step button > small i::before {
    width: .32rem;
    height: .32rem;
  }
  #wirtschaftlichkeit .business-step button > small i::after {
    top: .3rem;
    width: .52rem;
  }
  #wirtschaftlichkeit .business-progress .business-step:nth-child(2)::after,
  #wirtschaftlichkeit .business-progress .business-step:not(:last-child)::after {
    display: block;
    top: 4.95rem;
    left: calc(var(--step-symbol-size) / 2 - 1px);
    width: 2px;
    height: 1.72rem;
    background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .22));
    box-shadow: 0 0 .65rem rgba(var(--accent-rgb), .28);
    transform: none;
  }

  /* Mobile construction scene: preserve the desktop metaphor instead of
     flattening it into five unrelated cards. */
  #strategie .strategy-panel {
    overflow: hidden;
    border-radius: 1.15rem;
  }
  #strategie .strategy-build-intro { padding-inline: .7rem; }
  #strategie .strategy-title-flag {
    width: 100%;
    margin-top: 3.1rem;
    padding: 1rem .9rem 1.05rem;
    transform: rotate(-.25deg);
  }
  #strategie .strategy-hanger {
    display: block;
    height: 3.1rem;
  }
  #strategie .strategy-title-flag h2 {
    font-size: clamp(1.25rem, 5.75vw, 1.55rem);
    line-height: 1.03;
    text-wrap: balance;
  }
  #strategie .strategy-title-flag h2 em { margin-top: .38rem; }

  #strategie .strategy-site {
    position: relative;
    display: block;
    min-height: 49rem;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, transparent 70%, rgba(var(--accent-rgb), .08));
  }
  #strategie .strategy-site-grid {
    display: block;
    background-size: 1.35rem 1.35rem;
    opacity: .9;
  }
  #strategie .strategy-crane {
    display: block;
    top: .8rem;
    right: -3%;
    width: 98%;
    height: 25rem;
    color: rgba(250, 249, 252, .64);
    opacity: .82;
  }
  #strategie .crane-boom {
    top: 5%;
    right: 5%;
    width: 94%;
    height: .55rem;
  }
  #strategie .crane-mast {
    right: 9%;
    bottom: 0;
    width: .65rem;
    height: 95%;
  }
  #strategie .crane-counterweight {
    top: 1%;
    right: 1.5%;
    width: 2rem;
    height: 1.55rem;
  }
  #strategie .strategy-crane .crane-line,
  #strategie .strategy-crane .crane-hook { display: none; }

  #strategie .strategy-site .strategy-addon-block {
    position: absolute;
    right: auto;
    bottom: auto;
    width: 57%;
    height: auto;
    min-height: 9rem;
    padding: .75rem .75rem .85rem;
    border-radius: .32rem;
    will-change: auto;
  }
  #strategie .strategy-addon-block::before { display: block; }
  #strategie .strategy-addon-block h3 {
    margin-bottom: .42rem;
    font-size: clamp(.78rem, 3.3vw, .9rem);
    line-height: 1.08;
  }
  #strategie .strategy-addon-block p {
    font-size: clamp(.6rem, 2.55vw, .69rem);
    line-height: 1.43;
  }
  #strategie .strategy-addon-lifted {
    z-index: 4;
    top: 10.4rem;
    left: 3.5%;
    transform: rotate(-.8deg);
    border-bottom-color: rgba(var(--accent-rgb), .42);
  }
  #strategie .strategy-addon-fixed {
    z-index: 3;
    top: 20.15rem;
    left: 39.5%;
    border-bottom-color: rgba(var(--accent-rgb), .42);
  }
  #strategie .strategy-lift-cable {
    display: block;
    bottom: 100%;
    left: 50%;
    width: 2px;
    height: 8.3rem !important;
  }

  #strategie .strategy-learning-path {
    position: absolute;
    z-index: 5;
    top: 31.8rem;
    right: .55rem;
    bottom: auto;
    left: .55rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .38rem;
    margin: 0;
  }
  #strategie .strategy-learning-path article {
    min-height: 13rem;
    padding: .68rem .48rem .72rem;
    border-radius: .38rem;
  }
  #strategie .strategy-learning-path article::before { display: block; }
  #strategie .strategy-learning-path small {
    position: static;
    font-size: .52rem;
  }
  #strategie .strategy-learning-path h3 {
    margin: .55rem 0 .45rem;
    font-size: clamp(.68rem, 2.9vw, .78rem);
    line-height: 1.08;
    overflow-wrap: normal;
  }
  #strategie .strategy-learning-path p {
    font-size: clamp(.54rem, 2.25vw, .62rem);
    line-height: 1.42;
  }
  #strategie .strategy-site-details { display: block; }
  #strategie .site-barrier {
    bottom: .85rem;
    width: 4.1rem;
    height: 1.25rem;
  }
  #strategie .site-barrier-left { left: 4%; }
  #strategie .site-barrier-right { right: 4%; }
  #strategie .site-cone { bottom: 1.05rem; transform: scale(.55); transform-origin: bottom; }
  #strategie .site-cone-one { right: 29%; }
  #strategie .site-cone-two { right: 23%; }
  #strategie .site-cone-three { left: 25%; }
  #strategie .site-cone-four { left: 31%; }
}

@media (max-width: 360px) {
  .economics-method-layout {
    grid-template-columns: minmax(7rem, 42%) minmax(0, 58%);
    gap: .5rem;
  }
  #wirtschaftlichkeit { --mobile-economics-copy-size: clamp(.72rem, 3.45vw, .79rem); }
  #wirtschaftlichkeit .business-grid.business-progress { --step-symbol-size: 3.2rem; }
  #wirtschaftlichkeit .business-progress .business-step { min-height: 6rem; }
  #wirtschaftlichkeit .business-step > button { min-height: 5.7rem; column-gap: .42rem; }
  #wirtschaftlichkeit .business-progress .business-step:nth-child(2)::after,
  #wirtschaftlichkeit .business-progress .business-step:not(:last-child)::after {
    top: 4.55rem;
    height: 1.8rem;
  }
  #wirtschaftlichkeit .business-step button > small { padding-inline: .32rem; }

  #strategie .strategy-title-flag h2 { font-size: 1.18rem; }
  #strategie .strategy-site { min-height: 50rem; }
  #strategie .strategy-site .strategy-addon-block { width: 61%; }
  #strategie .strategy-addon-fixed { left: 35.5%; }
  #strategie .strategy-learning-path article { padding-inline: .38rem; }
  #strategie .strategy-learning-path h3 { font-size: .65rem; }
  #strategie .strategy-learning-path p { font-size: .52rem; }
}

/* Portrait-phone composition pass: the desktop layouts remain untouched. */
.view-mobile-summary,
.view-copy-toggle { display: none; }

@media (max-width: 760px) {
  /* The use cases keep the visual grammar of the desktop Bento, but use six
     narrow columns so short cards, wide cards and tall cards interlock. */
  #anwendungsbeispiele .use-case-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 2.35rem;
    gap: .42rem;
  }
  #anwendungsbeispiele .use-case-bubble,
  #anwendungsbeispiele .use-case-bubble.bubble-wide,
  #anwendungsbeispiele .use-case-bubble.bubble-compact,
  #anwendungsbeispiele .use-case-bubble.bubble-xwide {
    grid-column: span 3;
    grid-row: span 3;
    min-height: 0;
    border-radius: .85rem;
  }
  #anwendungsbeispiele .use-case-bubble:nth-child(1) { grid-column: span 4; grid-row: span 3; }
  #anwendungsbeispiele .use-case-bubble:nth-child(2) { grid-column: span 2; grid-row: span 4; }
  #anwendungsbeispiele .use-case-bubble:nth-child(3) { grid-column: span 2; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(4) { grid-column: span 4; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(5) { grid-column: span 3; grid-row: span 3; }
  #anwendungsbeispiele .use-case-bubble:nth-child(6) { grid-column: span 3; grid-row: span 3; }
  #anwendungsbeispiele .use-case-bubble:nth-child(7) { grid-column: span 2; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(8) { grid-column: span 4; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(9) { grid-column: span 4; grid-row: span 3; }
  #anwendungsbeispiele .use-case-bubble:nth-child(10) { grid-column: span 2; grid-row: span 3; }
  #anwendungsbeispiele .use-case-bubble:nth-child(11) { grid-column: span 2; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(12) { grid-column: span 4; grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(13),
  #anwendungsbeispiele .use-case-bubble:nth-child(14) { grid-column: span 3; grid-row: span 4; }
  #anwendungsbeispiele .use-case-trigger {
    align-items: flex-end;
    gap: .35rem;
    padding: .62rem;
  }
  #anwendungsbeispiele .use-case-trigger > span {
    max-width: none;
    font-size: clamp(.59rem, 2.85vw, .76rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  #anwendungsbeispiele .use-case-trigger i {
    position: absolute;
    top: .52rem;
    right: .52rem;
    width: 1.35rem;
    height: 1.35rem;
    overflow: hidden;
    font-size: 0;
  }
  #anwendungsbeispiele .use-case-trigger i::before {
    content: "";
    position: absolute;
    top: .32rem;
    right: .3rem;
    width: .38rem;
    height: .38rem;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
  }
  #anwendungsbeispiele .use-case-trigger i::after {
    content: "";
    position: absolute;
    top: .66rem;
    right: .28rem;
    width: .65rem;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: right center;
  }
  #anwendungsbeispiele .use-case-actions { margin-top: 1.35rem; }
  #anwendungsbeispiele .use-case-actions button { min-height: 2.7rem; padding: .55rem 1.2rem; font-size: .76rem; }

  /* The three system stages form one horizontal sequence, including the
     captions beneath the marks. */
  #moderne-ki .section-heading { margin-bottom: 1.35rem; }
  #moderne-ki #modern-ai-title {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.55rem, 7.25vw, 1.88rem);
    line-height: 1.02;
    letter-spacing: -.05em;
    text-align: center;
    text-wrap: balance;
  }
  #moderne-ki .system-fusion {
    min-height: 0;
    padding: 1.05rem .55rem 1.15rem;
    border-radius: 1rem;
  }
  #moderne-ki .fusion-stage {
    grid-template-columns: minmax(0, 1.12fr) minmax(.55rem, .34fr) minmax(0, .88fr) minmax(.55rem, .34fr) minmax(0, 1.12fr);
    grid-template-rows: auto;
    gap: .3rem;
    align-items: start;
  }
  #moderne-ki .fusion-node {
    grid-template-rows: 4.6rem auto;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
  #moderne-ki .software-mark { width: min(100%, 4.7rem); border-radius: .55rem; }
  #moderne-ki .ai-chat-mark { width: min(100%, 4.15rem); border-radius: .8rem .8rem .8rem .28rem; }
  #moderne-ki .ai-neural-mark { width: 3.15rem; height: 3rem; }
  #moderne-ki .neural-path { width: 1.32rem; }
  #moderne-ki .system-mark { width: min(100%, 4.7rem); }
  #moderne-ki .system-core { width: 2.65rem; padding: .43rem; gap: .2rem; border-radius: .65rem; }
  #moderne-ki .fusion-node > strong {
    margin-top: .42rem;
    font-size: clamp(.51rem, 2.15vw, .62rem);
    line-height: 1;
    white-space: nowrap;
  }
  #moderne-ki .fusion-link {
    align-self: start;
    width: 100%;
    height: 4.6rem;
  }
  #moderne-ki .fusion-link span {
    top: 2.3rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .2), var(--accent), rgba(var(--accent-rgb), .2));
    transform-origin: left;
  }
  #moderne-ki .fusion-link i { top: 2.3rem; left: 0; }
  #moderne-ki .fusion-link b { top: 2.3rem; right: -.2rem; bottom: auto; left: auto; }
  #moderne-ki .system-fusion.is-animated .fusion-link span { transform: scaleX(0); }
  #moderne-ki .system-fusion.is-animated.is-visible .fusion-link-first span,
  #moderne-ki .system-fusion.is-animated.is-visible .fusion-link-second span { animation-name: fusion-beam-grow; }
  #moderne-ki .system-fusion.is-animated.is-visible .fusion-link-first i,
  #moderne-ki .system-fusion.is-animated.is-visible .fusion-link-second i { animation-name: fusion-beam-travel; }
  #moderne-ki .modern-ai-intro {
    margin: 1.35rem auto;
    padding: .85rem .25rem;
    font-size: clamp(.76rem, 3.25vw, .86rem);
    line-height: 1.5;
  }

  /* The conversation comes first; the six prompts follow as a clean 2 × 3
     control grid. A fixed conversation viewport keeps both messages visible. */
  #moderne-ki .ai-topic-explorer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    overflow: visible;
  }
  #moderne-ki .ai-chat-window {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 18rem;
    min-height: 18rem;
    margin: 0 0 .35rem;
    overflow: hidden;
  }
  #moderne-ki .ai-chat-conversation {
    min-height: 0;
    overflow-y: auto;
    padding: .9rem;
    scroll-behavior: smooth;
  }
  #moderne-ki .ai-topic-node {
    position: relative;
    inset: auto;
    min-width: 0;
    min-height: 3.25rem;
    margin: 0;
    overflow: visible;
    border-radius: .85rem;
  }

  /* Give the secure system the full phone rail. Direct mobile routes replace
     the earlier edge detours, while sequential light packets show direction. */
  #lokale-ki .local-security-stage {
    width: min(100%, 25rem);
    max-width: none;
  }
  #lokale-ki .local-security-stage::before { inset-inline: -7%; }
  #lokale-ki .local-protection-dome {
    inset-inline: -2%;
    border-radius: 46% 46% 1.25rem 1.25rem / 20% 20% 1.25rem 1.25rem;
  }
  #lokale-ki .local-network-tracks use {
    stroke-dasharray: 2 5;
    opacity: .72;
    animation: local-mobile-track-flow 6s linear infinite;
  }
  #lokale-ki .local-network-impulses use {
    stroke-width: 2.5;
    stroke-dasharray: 16 var(--flow-gap, 500);
    filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .9));
  }
  #lokale-ki .local-security-visual.is-in-view .local-network-impulses use { animation-duration: 8.5s; }

  /* Alternating portrait/copy rhythm with progressive disclosure for the
     long-form explanation. */
  #unsere-sicht .view-people-layout,
  #unsere-sicht .view-people-layout.is-view-copy-stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "patrick heading"
      "summary evgeni"
      "toggle toggle"
      "copy copy";
    gap: .72rem;
    align-items: stretch;
  }
  #unsere-sicht .view-copy-column {
    display: contents;
    margin: 0;
  }
  #unsere-sicht .team-portrait:first-child { grid-area: patrick; }
  #unsere-sicht .team-portrait:last-child { grid-area: evgeni; }
  #unsere-sicht .team-portrait-frame {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 10.5rem;
    margin: 0;
    border-radius: .85rem;
  }
  #unsere-sicht .view-heading {
    grid-area: heading;
    display: flex;
    align-items: flex-end;
    padding: .15rem .1rem;
  }
  #unsere-sicht .view-heading h2,
  #unsere-sicht #view-title.fitted-title-wrap {
    margin: 0;
    font-size: clamp(1.18rem, 5.65vw, 1.48rem);
    line-height: 1.02;
    text-align: left;
  }
  #unsere-sicht .view-mobile-summary {
    grid-area: summary;
    display: flex;
    align-items: center;
    margin: 0;
    padding: .8rem .2rem;
    color: var(--muted);
    font-size: clamp(.72rem, 3.05vw, .82rem);
    line-height: 1.5;
  }
  #unsere-sicht .view-copy-toggle {
    grid-area: toggle;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    margin-top: .2rem;
    padding: .65rem .9rem;
    border: 1px solid rgba(var(--accent-rgb), .48);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), .08);
    color: var(--text);
    font: inherit;
    font-size: .78rem;
    font-weight: 680;
  }
  #unsere-sicht .view-copy-toggle i {
    color: var(--accent-soft);
    font-size: 1.1rem;
    font-style: normal;
  }
  #unsere-sicht .view-copy {
    grid-area: copy;
    columns: 1;
    margin: .2rem 0 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(var(--accent-rgb), .045);
  }
  #unsere-sicht .has-mobile-copy-toggle:not(.is-mobile-copy-expanded) .view-copy { display: none; }
  #unsere-sicht .view-copy p { font-size: .82rem; line-height: 1.58; }

  /* A narrow Berlin landmark column and a dense information column reproduce
     the desktop split without cropping the Fernsehturm. */
  #kontakt .onsite-contact-panel {
    grid-template-columns: minmax(4.7rem, 23%) minmax(0, 77%);
    gap: .72rem;
    align-items: stretch;
    padding: .75rem;
    border-radius: 1rem;
  }
  #kontakt .onsite-location {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: block;
    min-height: 100%;
    padding: 0 .58rem 0 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  #kontakt .onsite-location img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center bottom;
  }
  #kontakt .onsite-location span {
    position: absolute;
    top: .35rem;
    right: -.02rem;
    font-size: .46rem;
  }
  #kontakt .onsite-contact-content {
    grid-column: 2;
    grid-row: 1;
    align-content: start;
    min-width: 0;
    padding: .15rem 0;
  }
  #kontakt .onsite-contact-content h2 {
    max-width: none;
    margin-bottom: .75rem;
    font-size: clamp(1rem, 4.45vw, 1.18rem);
    line-height: 1.03;
    text-wrap: balance;
  }
  #kontakt .onsite-contact-content h2 strong { margin-top: .38em; font-size: .72em; line-height: 1.12; }
  #kontakt .onsite-contact-content > p {
    font-size: clamp(.61rem, 2.6vw, .7rem);
    line-height: 1.5;
  }
  #kontakt .onsite-contact-urgency {
    margin-top: .72rem;
    padding-left: .65rem;
    font-size: clamp(.57rem, 2.45vw, .66rem);
    line-height: 1.48;
  }
  #kontakt .onsite-contact-actions {
    align-items: stretch;
    gap: .55rem;
    margin-top: .8rem;
  }
  #kontakt .onsite-contact-button {
    position: relative;
    width: 100%;
    min-height: 2.55rem;
    padding: .55rem 1.75rem .55rem .62rem;
    font-size: clamp(.58rem, 2.5vw, .67rem);
    line-height: 1.15;
    text-align: left;
  }
  #kontakt .onsite-contact-button span {
    position: absolute;
    top: 50%;
    right: .62rem;
    font-size: .7rem;
    transform: translateY(-50%);
  }
  #kontakt .onsite-contact-actions .contact-email {
    font-size: clamp(.58rem, 2.45vw, .66rem);
    overflow-wrap: anywhere;
  }
}

@keyframes local-mobile-track-flow {
  to { stroke-dashoffset: -28; }
}

@media (max-width: 360px) {
  #anwendungsbeispiele .use-case-grid { grid-auto-rows: 2.15rem; gap: .34rem; }
  #anwendungsbeispiele .use-case-trigger { padding: .52rem; }
  #anwendungsbeispiele .use-case-trigger > span { font-size: clamp(.54rem, 2.75vw, .67rem); }
  #moderne-ki #modern-ai-title { font-size: clamp(1.38rem, 7.2vw, 1.62rem); }
  #moderne-ki .fusion-node > strong { font-size: .48rem; }
  #kontakt .onsite-contact-panel { grid-template-columns: minmax(4.2rem, 22%) minmax(0, 78%); gap: .55rem; padding: .62rem; }
  #kontakt .onsite-contact-content h2 { font-size: .95rem; }
}

/* Final portrait-phone finishing pass. These rules deliberately live after
   the earlier responsive compositions so their geometry is the single mobile
   source of truth without changing the reviewed desktop layout. */
@media (max-width: 760px) {
  /* Three compact, full-width service rails replace the uneven 2 + 1 grid. */
  #leistungen .service-grid.service-grid-compact {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
  }
  #leistungen .service-grid-compact .service-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: .72rem;
    align-content: center;
    min-height: 5.65rem;
    padding: .72rem 3rem .72rem .85rem;
    border-radius: .85rem;
  }
  #leistungen .service-grid-compact .card-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
  }
  #leistungen .service-grid-compact h3 {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin: 0;
    font-size: clamp(.82rem, 3.75vw, .98rem);
    line-height: 1.08;
  }
  #leistungen .service-grid-compact .service-summary {
    display: -webkit-box;
    grid-column: 2;
    grid-row: 2;
    margin: .28rem 0 0;
    overflow: hidden;
    font-size: clamp(.61rem, 2.7vw, .72rem);
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #leistungen .service-card-more {
    position: absolute;
    top: 50%;
    right: .78rem;
    gap: 0;
    font-size: 0;
    transform: translateY(-50%);
  }
  #leistungen .service-card-more i {
    width: 1.55rem;
    height: 1.55rem;
  }

  /* The portal now sits conceptually below the columns instead of drawing a
     glowing line through their feet. */
  #wirtschaftlichkeit .evidence-floor-portal { display: none; }

  /* The decision copy and the four controls form one compact, equal-height
     composition. Number labels are redundant in the vertical flow. */
  .economics-method-layout {
    grid-template-columns: minmax(0, 61%) minmax(0, 39%);
    gap: .58rem;
    align-items: stretch;
    margin-top: .7rem;
  }
  #wirtschaftlichkeit .economics-bridge {
    display: grid;
    align-self: stretch;
    place-items: center;
    padding-left: .08rem;
  }
  #wirtschaftlichkeit .economics-bridge .reference-intro {
    font-size: var(--mobile-economics-copy-size);
    line-height: 1.5;
  }
  #wirtschaftlichkeit .business-grid.business-progress {
    --step-symbol-size: 3.25rem;
    gap: .18rem;
    padding: 0;
  }
  #wirtschaftlichkeit .business-progress .business-step,
  #wirtschaftlichkeit .business-step > button {
    min-height: 5.2rem;
  }
  #wirtschaftlichkeit .business-step > button {
    grid-template-rows: auto auto;
    column-gap: .48rem;
    padding: .18rem 0;
  }
  #wirtschaftlichkeit .business-step-graphic { grid-row: 1 / span 2; }
  #wirtschaftlichkeit .business-step-number { display: none; }
  #wirtschaftlichkeit .business-step button > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
  }
  #wirtschaftlichkeit .business-step button > small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: .34rem;
  }
  #wirtschaftlichkeit .business-progress .business-step:nth-child(2)::after,
  #wirtschaftlichkeit .business-progress .business-step:not(:last-child)::after {
    top: 4.2rem;
    height: 1.28rem;
  }

  /* One-line sign, one vertical stack and a visibly shorter construction
     scene. The lifted block ends directly on the fixed block; the fixed block
     ends directly on the middle foundation axis. */
  #strategie .strategy-build-intro { padding-inline: .55rem; }
  #strategie .strategy-title-flag {
    margin-top: 2.35rem;
    padding: .68rem .38rem .72rem;
  }
  #strategie .strategy-hanger { height: 2.35rem; }
  #strategie .strategy-title-flag h2 {
    font-size: clamp(.9rem, 4.3vw, 1.08rem);
    line-height: 1.02;
    text-align: center;
  }
  #strategie .strategy-title-flag h2 span,
  #strategie .strategy-title-flag h2 em {
    display: block;
    white-space: nowrap;
  }
  #strategie .strategy-title-flag h2 em { margin-top: .25rem; }
  #strategie .strategy-site {
    min-height: 35.25rem;
  }
  #strategie .strategy-crane {
    top: .4rem;
    height: calc(100% - .55rem);
  }
  #strategie .crane-mast {
    bottom: 3rem;
    height: calc(95% - 3rem);
  }
  #strategie .strategy-site .strategy-addon-block {
    display: grid;
    align-content: center;
    width: 54%;
    height: 7.7rem;
    min-height: 7.7rem;
    padding: .58rem .7rem .62rem;
    text-align: center;
    will-change: transform;
  }
  #strategie .strategy-addon-block h3 {
    margin: 0 0 .32rem;
    font-size: clamp(.69rem, 3vw, .82rem);
    line-height: 1.08;
  }
  #strategie .strategy-addon-block p {
    font-size: clamp(.53rem, 2.28vw, .62rem);
    line-height: 1.35;
  }
  #strategie .strategy-addon-lifted {
    top: 10.8rem;
    left: 50%;
    transform: translate(-50%, var(--strategy-lift-y, -4.5rem));
  }
  #strategie .strategy-addon-fixed {
    top: 18.5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  #strategie .strategy-lift-cable {
    height: var(--strategy-lift-cable-height, 4.1875rem) !important;
  }
  #strategie .strategy-lift-cable::before { display: none; }
  #strategie .strategy-learning-path {
    top: 26.2rem;
    right: .48rem;
    left: .48rem;
    gap: .32rem;
  }
  #strategie .strategy-learning-path article {
    display: grid;
    align-content: center;
    min-height: 7.25rem;
    padding: .42rem .34rem .48rem;
    text-align: center;
  }
  #strategie .strategy-learning-path small { display: none; }
  #strategie .strategy-learning-path h3 {
    margin: 0 0 .34rem;
    font-size: clamp(.59rem, 2.55vw, .7rem);
    line-height: 1.06;
  }
  #strategie .strategy-learning-path p {
    font-size: clamp(.47rem, 1.98vw, .55rem);
    line-height: 1.34;
  }
  #strategie .site-barrier { bottom: .35rem; }
  #strategie .site-cone { bottom: .5rem; }

  /* A denser opening to the Bento avoids the oversized first pair. */
  #anwendungsbeispiele .use-case-bubble:nth-child(1) { grid-row: span 2; }
  #anwendungsbeispiele .use-case-bubble:nth-child(2) { grid-row: span 4; }
  #anwendungsbeispiele .use-case-bubble:nth-child(4) { grid-column: span 2; }
  #anwendungsbeispiele .use-case-trigger i {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: .46rem;
    background: rgba(var(--accent-rgb), .055);
  }
  #anwendungsbeispiele .use-case-trigger i::before {
    top: .31rem;
    right: .3rem;
    width: .39rem;
    height: .39rem;
  }
  #anwendungsbeispiele .use-case-trigger i::after {
    top: .57rem;
    right: .23rem;
    width: .75rem;
    transform: rotate(-45deg);
    transform-origin: center;
  }

  /* Each fusion mark stays comfortably inside its own fifth of the row. */
  #moderne-ki { overflow: clip; }
  #moderne-ki .section-shell,
  #moderne-ki .system-fusion,
  #moderne-ki .fusion-stage {
    min-width: 0;
    max-width: 100%;
  }
  #moderne-ki .fusion-node { grid-template-rows: 3.35rem auto; }
  #moderne-ki .software-mark { width: min(100%, 3.15rem); }
  #moderne-ki .software-bar {
    height: .72rem;
    gap: .14rem;
    padding-inline: .28rem;
  }
  #moderne-ki .software-bar i { width: .18rem; height: .18rem; }
  #moderne-ki .software-sidebar {
    top: .72rem;
    gap: .2rem;
    padding: .3rem .2rem;
  }
  #moderne-ki .software-sidebar i { height: .11rem; }
  #moderne-ki .software-workspace {
    top: .72rem;
    gap: .2rem;
    padding: .3rem .28rem;
  }
  #moderne-ki .software-workspace i { height: .12rem; }
  #moderne-ki .ai-chat-mark { width: min(100%, 2.75rem); }
  #moderne-ki .ai-chat-mark::after {
    bottom: -.24rem;
    left: .3rem;
    width: .52rem;
    height: .52rem;
  }
  #moderne-ki .ai-neural-mark {
    width: 2rem;
    height: 1.9rem;
  }
  #moderne-ki .ai-neural-mark::before { inset: .25rem .32rem; }
  #moderne-ki .neural-path { width: .82rem; }
  #moderne-ki .neural-node { width: .4rem; height: .4rem; }
  #moderne-ki .neural-core {
    width: .78rem;
    height: .78rem;
    border-radius: .22rem;
  }
  #moderne-ki .neural-core::after { inset: .2rem; }
  #moderne-ki .system-mark { width: min(100%, 3rem); }
  #moderne-ki .system-orbit-one { inset: .18rem; }
  #moderne-ki .system-orbit-two { inset: .44rem; }
  #moderne-ki .system-orbit-three { inset: .7rem; }
  #moderne-ki .system-core {
    width: 1.75rem;
    padding: .27rem;
    gap: .13rem;
    border-radius: .46rem;
  }
  #moderne-ki .system-orbit i { width: .3rem; height: .3rem; }
  #moderne-ki .system-orbit-one i { top: -.15rem; }
  #moderne-ki .system-orbit-two i { right: -.15rem; }
  #moderne-ki .system-orbit-three i { bottom: -.15rem; }
  #moderne-ki .fusion-link { height: 3.35rem; }
  #moderne-ki .fusion-link span,
  #moderne-ki .fusion-link i,
  #moderne-ki .fusion-link b { top: 1.675rem; }

  /* The source image has generous transparent side margins. Oversizing its
     canvas makes the visible tower fill the narrow column without cropping
     the landmark itself. */
  #kontakt .onsite-location { overflow: hidden; }
  #kontakt .onsite-location img {
    position: absolute;
    bottom: 0;
    left: -72.5%;
    width: 245%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (max-width: 360px) {
  #strategie .strategy-title-flag h2 { font-size: .84rem; }
  #strategie .strategy-site .strategy-addon-block { width: 57%; }
  #strategie .strategy-learning-path h3 { font-size: .56rem; }
  #strategie .strategy-learning-path p { font-size: .45rem; }
  #moderne-ki .software-mark { width: 2.9rem; }
  #moderne-ki .ai-chat-mark { width: 2.55rem; }
  #moderne-ki .system-mark { width: 2.8rem; }
}

/* Draw interactive plus/minus marks geometrically instead of relying on font
   glyph metrics. This keeps every mark optically centered across browsers,
   operating systems, themes and compact phone sizes. */
.step-open-badge,
[data-use-case-toggle] > span,
.view-copy-toggle > i {
  font-size: 0 !important;
  line-height: 0;
}

[data-use-case-toggle] > span,
.view-copy-toggle > i {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.step-open-badge::before,
.step-open-badge::after,
[data-use-case-toggle] > span::before,
[data-use-case-toggle] > span::after,
.view-copy-toggle > i::before,
.view-copy-toggle > i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.step-open-badge::before,
[data-use-case-toggle] > span::before,
.view-copy-toggle > i::before {
  width: 48%;
  height: 1.5px;
}

.step-open-badge::after,
[data-use-case-toggle] > span::after,
.view-copy-toggle > i::after {
  width: 1.5px;
  height: 48%;
  transition: opacity .16s ease, transform .16s ease;
}

[data-use-case-toggle][aria-expanded="true"] > span::after,
.view-copy-toggle[aria-expanded="true"] > i::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}