/* Technik-Hauptseiten: mobile Anordnung, bestehende Farbschemata beibehalten. */
@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage main :is(.tech-service-hero, .tech-overview-hero) {
    padding: 108px 0 36px !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-grid, .tech-overview-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-grid > div:first-child, .tech-overview-copy) {
    display: contents !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-eyebrow, .tech-overview-kicker) { grid-row: 1 !important; margin: 0 !important; }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-title, .tech-overview-title) {
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: clamp(28px, 5.5vw, 44px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.tech-service-hero-visual, .tech-constellation) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    position: relative !important;
    inset: auto !important;
    justify-self: end !important;
    align-self: center !important;
    width: min(78%, 460px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 8px !important;
    transform: none !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .tech-service-hero-visual {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .tech-service-hero-visual .tech-service-hero-art {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: contain !important;
    transform: none !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-subline, .tech-overview-subtitle) {
    grid-row: 4 !important; margin: 0 !important;
    width: 100% !important; max-width: 620px !important;
    font-size: clamp(16px, 2.5vw, 20px) !important; line-height: 1.4 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-lead, .tech-overview-text) {
    grid-row: 5 !important; margin: 0 !important; max-width: 620px !important;
    font-size: 14px !important; line-height: 1.6 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-actions, .tech-overview-actions) {
    grid-row: 6 !important; display: flex !important; flex-wrap: wrap !important;
    gap: 10px !important; margin: 4px 0 0 !important; justify-content: flex-start !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-actions, .tech-overview-actions) > a {
    min-height: 36px !important; padding: 9px 14px !important;
    font-size: 12px !important; line-height: 1.3 !important; width: auto !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-points, .tech-overview-points) {
    grid-row: 7 !important; display: flex !important; flex-wrap: wrap !important;
    gap: 10px 14px !important; margin: 0 !important; font-size: 11px !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .tech-overview-points span { font-size: inherit !important; }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-wrapper {
    display: block !important; width: 100% !important; max-width: 860px !important;
    margin: 0 auto !important; padding: 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-textblock {
    position: static !important; display: block !important; width: 100% !important;
    max-width: none !important; min-height: 0 !important; padding: 0 !important; text-align: center !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-ueberschrift {
    margin: 0 !important; text-align: center !important;
    font-size: clamp(28px, 5.5vw, 44px) !important; line-height: 1.15 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .heading-desktop-h2,
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-image.is-desktop { display: none !important; }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .heading-mobile-h2 {
    display: inline-block !important; font-size: inherit !important; line-height: 1.15 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-image.is-mobile {
    display: block !important; position: relative !important; inset: auto !important;
    --size: clamp(210px, 28vw, 240px) !important;
    width: var(--size) !important; height: var(--size) !important;
    min-width: 0 !important; max-width: none !important; margin: 20px auto 0 !important;
    transform: none !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-image.is-mobile > .octagon-svg {
    display: block !important; width: 100% !important; height: 100% !important;
    transform: scale(1.45) !important; transform-origin: 50% 50% !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-beschreibung {
    max-width: 620px !important; margin: 6px auto 0 !important; text-align: center !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choices {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; max-width: none !important;
    margin: 14px auto 0 !important; padding-bottom: 0 !important; gap: 12px !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice {
    position: relative !important; display: inline-flex !important; flex: 0 0 auto !important;
    flex-direction: row !important; align-items: center !important; justify-content: center !important;
    width: auto !important; min-width: 0 !important; gap: 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-octagon {
    width: 54px !important; height: 54px !important; margin: 0 !important; font-size: 1.05rem !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-octagon > svg {
    width: 20px !important; height: 20px !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-tooltip {
    position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontaktformular-wrapper {
    width: 100% !important; max-width: 860px !important; margin: 26px auto 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontaktformular-ueberschrift {
    text-align: center !important;
    font-size: clamp(24px, 4.8vw, 36px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* 2026-09-10 v24: Ab 861px durchgehend dieselbe Kontakt-Darstellung verwenden.
   Dadurch gibt es bei 901px keinen Layout-/Ueberschrift-Sprung mehr. */
@media (min-width: 861px) {
  html[data-layout="subpage"] body.toowie-subpage #kontakt.clean-kontakt-section {
    padding-top: 36px !important;
    padding-bottom: 78px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-unified-card {
    width: min(90%, 1100px) !important;
    max-width: 1100px !important;
    padding: 44px 54px 48px !important;
    border-radius: 30px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 240px !important;
    gap: 90px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-textblock {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-ueberschrift {
    margin: 0 0 1rem !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-ueberschrift .heading-desktop-h2 {
    display: inline-block !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-ueberschrift .heading-mobile-h2 {
    display: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-image.is-mobile {
    display: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-image.is-desktop {
    display: block !important;
    --size: clamp(300px, 35vw, 420px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-beschreibung {
    max-width: 620px !important;
    margin: 18px 0 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choices {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: auto !important;
    gap: clamp(9px, 1.1vw, 12px) !important;
    margin-top: 20px !important;
    padding-bottom: 52px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    gap: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-octagon {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-tooltip {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    top: calc(100% + 10px) !important;
    width: max-content !important;
    height: auto !important;
    max-width: 210px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border-radius: 10px !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -4px) !important;
    pointer-events: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-tooltip strong,
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-tooltip small {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice:hover .clean-kontakt-choice-tooltip,
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice:focus-visible .clean-kontakt-choice-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontaktformular-wrapper {
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin: -80px auto 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt #clean-kontakt-form {
    display: block !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-privacy-note {
    margin: 18px auto 2px !important;
    max-width: 680px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage #kontakt #clean-kontakt-form > .text-center {
    margin: 0 !important;
    text-align: center !important;
  }
}

/* Kleine Desktop-Breiten: Formular erst unter Portrait/Kontakt-Icons beginnen lassen.
   Ab 1000px geht der Abstand weich in den bestehenden 1920px-Desktopwert ueber. */
@media (min-width: 861px) and (max-width: 1000px) {
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontaktformular-wrapper {
    margin-top: clamp(-80px, calc(350px - 43vw), -20px) !important;
  }
}


/* 400–860px: derselbe linke 24px-Rand wie im Startseiten-Hero. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage main :is(.tech-service-hero, .tech-overview-hero) {
    padding-inline: 24px !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.tech-service-hero, .tech-overview-hero) > .page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.page-hero-grid, .tech-overview-grid) {
    width: 100% !important;
    max-width: 600px !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main :is(.tech-service-hero-visual, .tech-constellation) {
    justify-self: start !important;
    margin-left: 0 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .tech-service-hero-art {
    object-position: left center !important;
  }
}
/* Kontaktueberschriften bleiben auch beim Wechsel auf das Desktop-Raster lesbar. */
@media (min-width: 861px) {
  html[data-layout="subpage"] body.toowie-subpage #kontakt .heading-mobile-h2 {
    display: none !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .heading-desktop-h2 {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-ueberschrift {
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.15 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontaktformular-ueberschrift {
    font-size: clamp(28px, 3.2vw, 40px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  html[data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-choice-octagon > svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* 2026-09-10: Technik-Uebersicht – lesbare Proportionen wie auf der Startseite.
   Die vier Technik-Karten bleiben von 400–860px als zusammenhaengende Grafik,
   nutzen aber die volle Inhaltsbreite und skalieren Text/Octagon nicht mehr zu klein. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-constellation-height: clamp(370px, 55vw, 470px) !important;
    --tech-octagon-size: clamp(110px, 18vw, 155px) !important;
    --tech-octagon-edge-offset: clamp(26px, 4vw, 35px) !important;
    --tech-card-cut: clamp(34px, 5.5vw, 50px) !important;
    --tech-card-height: clamp(168px, 24vw, 208px) !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    height: var(--tech-constellation-height) !important;
    justify-self: start !important;
    margin: 10px 0 12px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card {
    padding: clamp(12px, 2vw, 18px) clamp(12px, 2.2vw, 20px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon {
    width: clamp(30px, 4.4vw, 38px) !important;
    height: clamp(30px, 4.4vw, 38px) !important;
    margin-bottom: clamp(5px, 0.8vw, 8px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon svg {
    width: clamp(25px, 3.7vw, 32px) !important;
    height: clamp(25px, 3.7vw, 32px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 {
    font-size: clamp(13px, 2vw, 17px) !important;
    line-height: 1.16 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card p {
    margin-top: clamp(5px, 0.8vw, 8px) !important;
    font-size: clamp(10.5px, 1.45vw, 12.5px) !important;
    line-height: 1.42 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    padding: clamp(12px, 2vw, 18px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(12px, 1.8vw, 16px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    font-size: clamp(15px, 2.3vw, 17px) !important;
    line-height: 1.65 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    min-height: 40px !important;
    padding: 10px 15px !important;
    font-size: clamp(13px, 1.8vw, 14px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    font-size: clamp(12px, 1.75vw, 14px) !important;
  }
}

/* 861–1300px: dieselbe grosszuegige Seitenbreite wie auf der Startseite.
   Die Grafik selbst wird deutlich groesser, ihre interne Typografie bleibt
   kompakt, damit Symbol, Ueberschrift und Beschreibung sauber Platz haben. */
@media (min-width: 861px) and (max-width: 1300px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero > .page-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    align-items: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-copy {
    width: 100% !important;
    max-width: 540px !important;
    min-width: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    max-width: 520px !important;
    font-size: clamp(16px, 1.45vw, 19px) !important;
    line-height: 1.38 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    max-width: 520px !important;
    font-size: clamp(14px, 1.12vw, 16px) !important;
    line-height: 1.66 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    min-height: 40px !important;
    padding: 9px 15px !important;
    font-size: clamp(11.5px, .95vw, 13px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    font-size: clamp(11.5px, .9vw, 13px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-constellation-height: clamp(320px, 35vw, 440px) !important;
    --tech-octagon-size: clamp(112px, 11.8vw, 148px) !important;
    --tech-octagon-edge-offset: clamp(27px, 2.8vw, 36px) !important;
    --tech-card-cut: clamp(38px, 4vw, 52px) !important;
    --tech-card-height: clamp(142px, 15.3vw, 190px) !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    height: var(--tech-constellation-height) !important;
    justify-self: end !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card {
    padding: clamp(12px, 1.35vw, 17px) clamp(13px, 1.55vw, 20px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon {
    width: clamp(30px, 3vw, 38px) !important;
    height: clamp(30px, 3vw, 38px) !important;
    margin-bottom: clamp(5px, .55vw, 7px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon svg {
    width: clamp(24px, 2.45vw, 31px) !important;
    height: clamp(24px, 2.45vw, 31px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 {
    font-size: clamp(13px, 1.22vw, 16px) !important;
    line-height: 1.16 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card p {
    margin-top: clamp(4px, .5vw, 7px) !important;
    font-size: clamp(10.5px, .9vw, 12.5px) !important;
    line-height: 1.4 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    padding: clamp(11px, 1.35vw, 17px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(12px, 1.12vw, 15px) !important;
    line-height: 1.1 !important;
  }
}

/* 2026-09-10 v6: Technik-Unterseiten bei mittleren Breiten an den
   bereits angepassten Technik-Hero angleichen. */
@media (min-width: 861px) and (max-width: 1300px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: max(88px, 8.854vw) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero > .page-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    width: 100% !important;
    grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    align-items: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    min-width: 0 !important;
    max-width: 540px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    max-width: 520px !important;
    font-size: clamp(16px, 1.45vw, 19px) !important;
    line-height: 1.4 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    max-width: 520px !important;
    font-size: clamp(14px, 1.12vw, 16px) !important;
    line-height: 1.65 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions .page-btn {
    min-height: 40px !important;
    padding: 9px 15px !important;
    font-size: clamp(11.5px, .95vw, 13px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    font-size: clamp(11.5px, .9vw, 13px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    width: 100% !important;
    min-height: clamp(300px, 38vw, 480px) !important;
    margin-right: 0 !important;
    justify-content: center !important;
  }

  /* Nur diese beiden Motive etwas kleiner, damit sie rechts ruhiger wirken. */
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage main .page-hero.tech-service-hero .tech-service-hero-art,
  html[data-layout="subpage"] body.infrastructure-page.toowie-subpage main .page-hero.tech-service-hero .tech-service-hero-art {
    width: min(650px, 92%) !important;
    max-width: 92% !important;
  }
}

/* Wenn der Status-Badge mobil fehlt, keine leere erste Grid-Zeile stehen lassen. */
@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .page-title {
    grid-row: 1 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .tech-service-hero-visual {
    grid-row: 2 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .page-hero-subline {
    grid-row: 3 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .page-hero-lead {
    grid-row: 4 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .page-hero-actions {
    grid-row: 5 !important;
  }
  html[data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero .page-hero-points {
    grid-row: 6 !important;
  }
}

/* 2026-09-10: Technik-Uebersicht – Hero-Typografie exakt wie auf der Startseite. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
  font-size: clamp(1.12rem, 1.8vw, 1.6rem) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
}

@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    font-size: clamp(1.28rem, 5.1vw, 3.25rem) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    font-size: clamp(.62rem, 1.28vw, .98rem) !important;
  }
}

@media (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    font-size: clamp(25px, 5.8vw, 44px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    font-size: clamp(14px, 2.5vw, 18px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    font-size: clamp(14px, 2.3vw, 17px) !important;
  }
}

/* 2026-09-10 v7: Technik-Unterseiten – Hero-Typografie und Abstand zur
   Navigation exakt an die Technik-Uebersicht / Startseite angleichen. */
html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .page-hero.tech-service-hero .page-title {
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
}

html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .page-hero.tech-service-hero .page-hero-subline {
  font-size: clamp(1.12rem, 1.8vw, 1.6rem) !important;
}

html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .page-hero.tech-service-hero .page-hero-lead {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
}

@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    font-size: clamp(1.28rem, 5.1vw, 3.25rem) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    font-size: clamp(.69rem, 1.55vw, 1.08rem) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    font-size: clamp(.62rem, 1.28vw, .98rem) !important;
  }
}

@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: 108px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    font-size: clamp(25px, 5.8vw, 44px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    font-size: clamp(14px, 2.5vw, 18px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    font-size: clamp(14px, 2.3vw, 17px) !important;
  }
}

@media (min-width: 861px) and (max-width: 1199px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: max(88px, 8.854vw) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1920px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: 8.854vw !important;
  }
}

@media (min-width: 1921px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: 170px !important;
  }
}

/* 2026-09-10 v9: Technik-Unterseiten – unterer Hero-Abstand an der rechten Seite der Technik-Uebersicht ausgerichtet. */
html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .page-hero.tech-service-hero {
  min-height: auto !important;
}

@media (min-width: 861px) and (max-width: 1920px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-bottom: clamp(21px, 2.5vw, 39px) !important;
  }
}

@media (min-width: 1921px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-bottom: 39px !important;
  }
}

/* 2026-09-10 v10: Technik-Unterseiten – Abstand zwischen Hero-Buttons und Haken
   exakt wie auf der Technik-Uebersicht. Die Technik-Uebersicht skaliert diesen
   Abstand zwischen 861px und 1920px proportional von der 1920px-Referenz. */
@media (min-width: 861px) and (max-width: 1920px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    margin-top: calc(28 * (100vw / 1920)) !important;
  }
}

@media (min-width: 1921px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    margin-top: 28px !important;
  }
}

/* 2026-09-10 v11: Technik-Uebersicht 400–860px – Unterzeile wieder direkt
   unter der Hauptueberschrift anzeigen; die Technik-Grafik folgt danach. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    grid-row: 3 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    grid-row: 4 !important;
  }
}

/* 2026-09-10 v13: Technik-Unterseiten 400–860px – Hero-Bild startet exakt
   auf Hoehe der Hauptueberschrift. Der Text fliesst automatisch links am Bild
   vorbei und nutzt darunter wieder die volle Breite; die vertikalen Textabstaende
   bleiben dabei unabhaengig von der Bildhoehe. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    display: block !important;
    max-width: 100% !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Das mobile Motiv startet als Float direkt an der H1-Oberkante. Dadurch
     laufen Ueberschrift, Unterzeile und Lead bei Bedarf links daran vorbei
     und setzen darunter automatisch auf voller Breite fort. */
  html[data-layout="subpage"] body.managedservice-page {
    --tech-mobile-hero-image: url("../media/bilder/hero-it-betreuung.webp");
    --tech-mobile-hero-ratio: 1.5;
  }

  html[data-layout="subpage"] body.infrastructure-page {
    --tech-mobile-hero-image: url("../media/bilder/hero-it-infrastruktur.webp");
    --tech-mobile-hero-ratio: 1.333333;
  }

  html[data-layout="subpage"] body.software-service-page {
    --tech-mobile-hero-image: url("../media/bilder/hero-software-automatisierung.webp");
    --tech-mobile-hero-ratio: 1.5;
  }

  html[data-layout="subpage"] body.website-showcase-page {
    --tech-mobile-hero-image: url("../media/bilder/hero-websites.webp");
    --tech-mobile-hero-ratio: 1.5;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-eyebrow {
    margin: 0 0 10px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title::before {
    content: "" !important;
    display: block !important;
    float: right !important;
    width: clamp(150px, 38vw, 300px) !important;
    aspect-ratio: var(--tech-mobile-hero-ratio, 1.5);
    margin: 0 0 8px clamp(12px, 2.8vw, 24px) !important;
    background-image: var(--tech-mobile-hero-image) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: contain !important;
    shape-outside: margin-box;
    pointer-events: none;
  }

  /* Das originale zweite Grid-Motiv bleibt fuer Desktop unveraendert vorhanden,
     wird in diesem Breakpoint aber ausgeblendet, damit kein doppeltes Bild entsteht. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    margin: 0 0 10px !important;
    max-width: 100% !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    margin: 0 0 10px !important;
    max-width: 100% !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    margin: 0 !important;
    max-width: 620px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions {
    margin: 10px 0 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    margin: 10px 0 0 !important;
  }

  /* Float nach dem Hero-Inhalt sauber beenden. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* 2026-09-10 v14: Technik-Unterseiten 400–860px – Hero-Bild wieder als echtes
   Bild rechts anzeigen und vertikal zwischen H1-Oberkante und Unterkante der
   Vorteilspunkte zentrieren. Bildgroesse bleibt wie in v13. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 38vw, 300px) !important;
    column-gap: clamp(12px, 2.8vw, 24px) !important;
    row-gap: 10px !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    display: contents !important;
  }

  /* Das in v13 erzeugte Float-Bild wird nicht mehr gebraucht. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title::before,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child::after {
    content: none !important;
    display: none !important;
  }

  /* Eyebrow bleibt oberhalb des eigentlichen Bild/Text-Bereichs. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-eyebrow {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    max-width: 100% !important;
    align-self: start !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin: 0 !important;
    max-width: 620px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 6 !important;
    margin: 0 !important;
  }

  /* Bild rechts: horizontal in seiner Spalte und vertikal ueber H1 bis Haken zentriert. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: flex !important;
    grid-column: 2 !important;
    grid-row: 2 / 7 !important;
    justify-self: stretch !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-art,
  html[data-layout="subpage"] body.website-showcase-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-art[src*="hero-websites"] {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: clamp(150px, 32vw, 250px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

/* 2026-09-10 v15: Technik-Uebersicht – Abschnitt "Gemeinsam gedacht".
   Inhaltsbreite und Typografie orientieren sich am Hero; bis 860px wechselt
   der Bereich in eine bewusst lesbare, einspaltige Darstellung. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary {
  overflow: hidden !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-copy {
  min-width: 0 !important;
  max-width: 780px !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  line-height: .98 !important;
  letter-spacing: -.04em !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title span {
  display: block !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-lead {
  max-width: 620px !important;
  margin-top: clamp(16px, 1.7vw, 24px) !important;
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
  line-height: 1.68 !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
  gap: clamp(12px, 1.25vw, 18px) !important;
  margin-top: clamp(26px, 2.6vw, 38px) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature {
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 11px !important;
  padding: clamp(14px, 1.25vw, 18px) !important;
  border: 1px solid rgba(10, 40, 80, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .62) !important;
  box-shadow: 0 12px 30px rgba(10, 40, 80, .045) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 14px !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature strong {
  font-size: clamp(.98rem, 1.15vw, 1.08rem) !important;
  line-height: 1.25 !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature p {
  margin-top: 5px !important;
  font-size: clamp(.92rem, 1.05vw, 1rem) !important;
  line-height: 1.55 !important;
}

/* Desktop: exakt dieselbe aeussere Breitenlogik wie der Technik-Hero. */
@media (min-width: 1301px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary > .page-shell {
    width: min(1380px, 71.875vw) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr) !important;
    gap: clamp(36px, 4vw, 64px) !important;
    align-items: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    justify-content: flex-end !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-device {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
  }
}

/* Mittlere Breiten: dieselbe 48px-Seitenluft wie im Hero, aber etwas mehr
   Raum fuer die laengere Summary-Ueberschrift. */
@media (min-width: 861px) and (max-width: 1300px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary > .page-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
    gap: clamp(24px, 3vw, 40px) !important;
    align-items: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-copy {
    width: 100% !important;
    max-width: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    justify-content: flex-end !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-device {
    width: min(100%, 500px) !important;
    max-width: 500px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    gap: clamp(10px, 1.3vw, 16px) !important;
    margin-top: clamp(20px, 2.4vw, 30px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: clamp(10px, 1.25vw, 15px) !important;
    border-radius: 13px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature strong {
    font-size: clamp(.8rem, 1.05vw, .98rem) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature p {
    font-size: clamp(.76rem, .92vw, .9rem) !important;
  }
}

/* 861–980px verwendet der Hero bewusst eine eigene kleinere Typografie.
   Die Summary folgt dort exakt derselben Titel- und Fliesstextgroesse. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
    font-size: clamp(1.28rem, 5.1vw, 3.25rem) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-lead {
    font-size: clamp(.62rem, 1.28vw, .98rem) !important;
    line-height: 1.66 !important;
  }
}

/* Tablet und Mobil: Ueberschrift + Text zuerst, dann Bild und Merkmale. */
@media (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary {
    padding: clamp(54px, 8vw, 72px) 24px clamp(58px, 9vw, 78px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary > .page-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 600px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
    align-items: start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-copy {
    display: contents !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-kicker {
    grid-row: 1 !important;
    margin: 0 0 10px !important;
    font-size: 11px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
    grid-row: 2 !important;
    max-width: 100% !important;
    font-size: clamp(25px, 5.8vw, 44px) !important;
    line-height: 1.02 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-lead {
    grid-row: 3 !important;
    max-width: 600px !important;
    margin: 18px 0 0 !important;
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.65 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    grid-row: 4 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: clamp(26px, 5vw, 38px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-device {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    grid-row: 5 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: clamp(28px, 5vw, 38px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 14px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 13px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature strong {
    font-size: clamp(.88rem, 2.1vw, 1rem) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature p {
    font-size: clamp(.82rem, 1.9vw, .94rem) !important;
    line-height: 1.5 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* CTA: alte proportionale Mini-Typografie entfernen und auf allen Groessen
   lesbar in derselben Designsprache halten. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta {
  gap: clamp(16px, 2vw, 24px) !important;
  margin-top: clamp(32px, 3.6vw, 52px) !important;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.1vw, 30px) !important;
  border-radius: 20px !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy {
  gap: clamp(12px, 1.4vw, 18px) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-icon {
  width: clamp(42px, 3.6vw, 52px) !important;
  height: clamp(42px, 3.6vw, 52px) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-icon svg {
  width: clamp(22px, 2vw, 28px) !important;
  height: clamp(22px, 2vw, 28px) !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta h3 {
  font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
  line-height: 1.3 !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta p {
  margin-top: 5px !important;
  font-size: clamp(.88rem, 1vw, 1rem) !important;
  line-height: 1.5 !important;
}

html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-btn {
  min-height: 48px !important;
  padding: 11px 18px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

@media (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-btn {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Unter 400px nutzt der Hero einen 16px-Seitenrand. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary {
    padding-inline: 16px !important;
  }
}

/* 2026-09-10 v16: Technik-Uebersicht 400–860px kompakter wie die Technik-Unterseiten.
   Die Leistungs-Grafik sitzt rechts neben dem Hero-Text und zeigt in den Karten
   nur noch Symbol + Ueberschrift. Auch im Abschnitt "Technik fuer Ihr Unternehmen"
   sitzt das kleinere Bild rechts neben Ueberschrift/Einleitung; die Merkmale folgen
   darunter wieder ueber die volle Breite. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 34vw, 280px) !important;
    column-gap: clamp(12px, 2.8vw, 24px) !important;
    row-gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-copy {
    display: contents !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-kicker {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-width: 620px !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 10px 18px !important;
    margin: 0 !important;
    font-size: clamp(10.5px, 1.5vw, 13px) !important;
    line-height: 1.25 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points span {
    flex: 0 1 auto !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-constellation-height: clamp(172px, 31vw, 250px) !important;
    --tech-octagon-size: clamp(56px, 9.5vw, 78px) !important;
    --tech-octagon-edge-offset: clamp(13px, 2.2vw, 19px) !important;
    --tech-card-cut: clamp(17px, 3vw, 26px) !important;
    --tech-card-height: clamp(82px, 14.6vw, 118px) !important;
    grid-column: 2 !important;
    grid-row: 2 / 7 !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 280px !important;
    height: var(--tech-constellation-height) !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card {
    padding: clamp(6px, 1.1vw, 10px) clamp(5px, 1vw, 9px) !important;
    border-radius: clamp(10px, 1.8vw, 15px) !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card p {
    display: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon {
    width: clamp(20px, 3.4vw, 28px) !important;
    height: clamp(20px, 3.4vw, 28px) !important;
    margin: 0 auto clamp(3px, .6vw, 5px) !important;
    transform: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon svg {
    width: clamp(17px, 2.9vw, 24px) !important;
    height: clamp(17px, 2.9vw, 24px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(7px, 1.28vw, 11px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    padding: clamp(5px, 1vw, 9px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(8px, 1.35vw, 11px) !important;
    line-height: 1 !important;
  }

  /* Summary: Bild rechts neben Kicker, Titel und Einleitung; Merkmale darunter. */
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(140px, 32vw, 260px) !important;
    column-gap: clamp(14px, 3vw, 26px) !important;
    row-gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-copy {
    display: contents !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    /* 2026-09-17: nicht mehr eigens verkleinern (war 8-10px, kaum lesbar) -
       bleibt jetzt bei denselben 11px wie <=399px und 861px+. */
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.09em !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(25px, 5.2vw, 42px) !important;
    line-height: 1.02 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-lead {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 620px !important;
    margin: 4px 0 0 !important;
    font-size: clamp(14px, 2.15vw, 16px) !important;
    line-height: 1.62 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;
    align-self: center !important;
    justify-self: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-device {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: clamp(22px, 4vw, 32px) !important;
  }
}

@media (min-width: 400px) and (max-width: 560px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 2026-09-10 v17: Technik-Uebersicht bis 399px konsequent zentrieren,
   analog zur kleinsten Mobile-Stufe der Startseite. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero :is(.tech-overview-title, .tech-overview-subtitle, .tech-overview-text),
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary :is(.tech-summary-kicker, .tech-summary-title, .tech-summary-lead) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    justify-self: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta {
    align-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy {
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy > div {
    text-align: center !important;
  }
}

/* 2026-09-10 v18: Technik-Uebersicht – kompakterer Mobile-Hero.
   Weniger Abstand zur Navigation, kompaktere Hero-Buttons und ab 700px
   abwaerts eine ruhigere Leistungs-Grafik ohne Symbole mit groesserer Schrift. */
@media (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero {
    padding-top: 88px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions {
    gap: 8px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 9px !important;
    font-size: clamp(10.5px, 1.65vw, 12px) !important;
    line-height: 1.2 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 {
    font-size: clamp(10.5px, 1.8vw, 13px) !important;
    line-height: 1.16 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(10px, 1.65vw, 12.5px) !important;
    line-height: 1.05 !important;
  }
}

/* Auf den schmalen zweispaltigen Hero-Breiten muessen beide Buttons
   bewusst in einer Zeile bleiben. */
@media (min-width: 400px) and (max-width: 551px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-card-icon {
    display: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 .tech-card-title-gold {
    color: #fff !important;
  }
}

@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions {
    flex-wrap: nowrap !important;
    gap: 7px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 6px 9px !important;
    font-size: clamp(9.5px, 2.65vw, 10.5px) !important;
    white-space: nowrap !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 {
    font-size: clamp(11px, 3.2vw, 13px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(9.5px, 2.8vw, 11px) !important;
  }
}

/* 2026-09-10 v25: Nur Technik-Uebersicht – auf 400–550px die rechte
   Hero-Grafik ausblenden und den Textbereich die freie Breite nutzen lassen. */
@media (min-width: 400px) and (max-width: 550px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    display: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero :is(
    .tech-overview-title,
    .tech-overview-subtitle,
    .tech-overview-text,
    .tech-overview-actions,
    .tech-overview-points
  ) {
    grid-column: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    max-width: none !important;
    white-space: nowrap !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    max-width: 42ch !important;
    text-wrap: pretty !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    max-width: max-content !important;
  }
}

/* 2026-09-10 v28: Technik-Uebersicht auf sehr schmalen Smartphones.
   Unterzeile direkt unter der H1; die linke Software-Karte haelt ihren
   zweizeiligen Titel vollstaendig innerhalb der sichtbaren Kartenflaeche. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three {
    justify-content: flex-end !important;
    padding-bottom: 10px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(9px, 2.7vw, 10.5px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

/* 551–700px: Die kompakte rechte Technik-Grafik bleibt lesbar, ohne dass
   der Titel "Software & Automatisierung" unter das mittlere TOOWIE-Octagon geraet. */
@media (min-width: 551px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three {
    justify-content: flex-end !important;
    padding-bottom: clamp(7px, 1.2vw, 10px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(7px, 1.2vw, 9px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

/* 2026-09-10 v29: Technik-Uebersicht – Karten im kleinen Responsive-Bereich
   sauber als 2x2-Raster. Alle vier Bezeichnungen sind gleich ausgerichtet,
   vollstaendig zentriert und das TOOWIE-Octagon hat einen eigenen Freiraum,
   sodass keine Karten bzw. Inhalte mehr ueberlappt werden. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-mobile-center-gap: clamp(66px, 18vw, 72px) !important;
    --tech-card-height: clamp(92px, 25vw, 98px) !important;
    --tech-octagon-size: clamp(54px, 15vw, 58px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, var(--tech-card-height)) !important;
    column-gap: var(--tech-mobile-center-gap) !important;
    row-gap: var(--tech-mobile-center-gap) !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    margin: 26px auto 0 !important;
    position: relative !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--one {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--two {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 8px 5px !important;
    justify-content: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--four {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 .tech-card-title-gold {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(10px, 2.9vw, 11px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span {
    display: block !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--tech-octagon-size) !important;
    height: var(--tech-octagon-size) !important;
    padding: 5px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(10px, 2.9vw, 12px) !important;
    line-height: 1 !important;
    text-align: center !important;
    letter-spacing: 0.04em !important;
  }
}

/* Auf den ebenfalls kompakten 551–700px-Breiten bleibt die Grafik rechts,
   nutzt dort aber dasselbe kollisionsfreie Prinzip und identische Zentrierung. */
@media (min-width: 551px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid {
    grid-template-columns: minmax(0, 1fr) clamp(180px, 38vw, 280px) !important;
  }

  /* Der zweizeilige Titel bekommt die komplette Hero-Breite. Die rechte
     Technik-Grafik startet erst darunter, damit sie den Titel nie ueberlappt. */
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    grid-column: 2 !important;
    grid-row: 3 / 7 !important;
    --tech-mobile-center-gap: clamp(46px, 8vw, 56px) !important;
    --tech-card-height: clamp(70px, 12vw, 84px) !important;
    --tech-octagon-size: clamp(40px, 7vw, 48px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, var(--tech-card-height)) !important;
    column-gap: var(--tech-mobile-center-gap) !important;
    row-gap: var(--tech-mobile-center-gap) !important;
    height: auto !important;
    align-self: center !important;
    position: relative !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--one {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--two {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--three {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 6px 4px !important;
    justify-content: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card--four {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 .tech-card-title-gold {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: #fff !important;
    font-size: clamp(8.5px, 1.45vw, 10px) !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span {
    display: block !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--tech-octagon-size) !important;
    height: var(--tech-octagon-size) !important;
    padding: 4px !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center strong {
    font-size: clamp(8.5px, 1.45vw, 10px) !important;
    line-height: 1 !important;
    text-align: center !important;
    letter-spacing: 0.04em !important;
  }
}

/* Positionsreste der bisherigen absoluten Anordnung fuer das neue Raster neutralisieren. */
@media (max-width: 399px), (min-width: 551px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation :is(
    .tech-constellation-card--one,
    .tech-constellation-card--two,
    .tech-constellation-card--three,
    .tech-constellation-card--four
  ) {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }
}
/* Das Zentrum nutzt dieselbe Groessenvariable wie die Ausschnitte der Karten.
   Ein Anteil an der Gesamtbreite passt bei den wechselnden Rastern nicht. */
@media (max-width: 1300px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    width: var(--tech-octagon-size) !important;
    height: var(--tech-octagon-size) !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

/* Im 2x2-Raster ergibt sich die Aussparung aus Rasterabstand und Kartenschnitt. */
@media (max-width: 399px), (min-width: 551px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-center {
    width: calc((var(--tech-mobile-center-gap) + var(--tech-card-cut)) / .7) !important;
    height: calc((var(--tech-mobile-center-gap) + var(--tech-card-cut)) / .7) !important;
  }
}
/* Gemeinsame Geometrie: Die inneren Kartenecken folgen exakt dem
   30/70-Prozent-Polygon des mittleren Oktagons. */
@media (max-width: 1300px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-fit-size: var(--tech-octagon-size);
    display: block !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-center {
    width: var(--tech-fit-size) !important;
    height: var(--tech-fit-size) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-card {
    position: absolute !important;
    width: calc(50% - var(--tech-fit-size) * .2) !important;
    height: calc(50% - var(--tech-fit-size) * .2) !important;
    --tech-card-cut: calc(var(--tech-fit-size) * .3) !important;
    margin: 0 !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-card--one {
    inset: 0 auto auto 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tech-card-cut)), calc(100% - var(--tech-card-cut)) 100%, 0 100%) !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-card--two {
    inset: 0 0 auto auto !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--tech-card-cut) 100%, 0 calc(100% - var(--tech-card-cut))) !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-card--three {
    inset: auto auto 0 0 !important;
    clip-path: polygon(0 0, calc(100% - var(--tech-card-cut)) 0, 100% var(--tech-card-cut), 100% 100%, 0 100%) !important;
  }
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation > .tech-constellation-card--four {
    inset: auto 0 0 auto !important;
    clip-path: polygon(var(--tech-card-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--tech-card-cut)) !important;
  }
}
@media (max-width: 399px), (min-width: 551px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-fit-size: calc((var(--tech-mobile-center-gap) + var(--tech-card-cut)) / .7);
    height: calc(var(--tech-card-height) * 2 + var(--tech-mobile-center-gap)) !important;
  }
}
/* Kleine Displays: kleineres Zentrum mit weiterhin passenden Kartenausschnitten. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    --tech-fit-size: clamp(76px, 25vw, 100px);
  }
}
@media (min-width: 400px) and (width < 551px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    display: none !important;
  }
}

/* 2026-09-10 v34: Technik-Uebersicht – Hero-Typografie an den kritischen
   Breakpoints stabilisieren. Die H1 bleibt zwischen 861 und 980px bewusst
   auf den zwei im Markup vorgegebenen Zeilen; der Lead ist mobil klar kleiner
   als die Unterueberschrift. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    font-size: clamp(2.35rem, 4.6vw, 2.85rem) !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    font-size: clamp(13px, 1.75vw, 15px) !important;
  }
}

/* 2026-09-10 v35: Technik-Uebersicht – die vier Bereichstitel im
   Tablet-/Mobile-Bereich bewusst kleiner, damit sie in den Karten ruhiger wirken. */
@media (min-width: 701px) and (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 .tech-card-title-gold {
    font-size: clamp(8px, 1.35vw, 10px) !important;
  }
}

@media (min-width: 400px) and (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 span,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 .tech-card-title-gold {
    font-size: clamp(7.5px, 1.2vw, 8.5px) !important;
  }
}

/* 2026-09-10 v36: IT-Betreuung – eigene Responsive-Stufen analog zur
   Technik-Uebersicht. Nur die Managed-Service-Seite wird angepasst. */

/* 551–700px: Hero-Motiv rechts etwas weiter ausnutzen und vergroessern.
   Unterhalb von 700px beginnt damit bewusst eine eigene kompakte Stufe. */
@media (min-width: 551px) and (max-width: 700px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(210px, 42vw, 300px) !important;
    column-gap: clamp(6px, 1.4vw, 10px) !important;
    overflow: visible !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    justify-self: end !important;
    justify-content: flex-end !important;
    width: calc(100% + clamp(14px, 2.5vw, 20px)) !important;
    max-width: none !important;
    margin-right: calc(clamp(6px, 1.4vw, 10px) * -1) !important;
    transform: translateX(clamp(6px, 1.4vw, 10px)) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-art {
    width: 100% !important;
    max-width: none !important;
    max-height: clamp(180px, 38vw, 265px) !important;
    margin: 0 !important;
    object-position: right center !important;
  }

  /* Die vier Leistungs-Karten werden ab hier wie ein kompaktes 2x2-Raster
     dargestellt, statt immer schmaler nebeneinander zu stehen. */
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow[data-service-count^="4"] .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    padding: 14px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow[data-service-count^="4"] .service-phase-card h3 {
    margin-top: 16px !important;
    font-size: clamp(13px, 2.35vw, 15px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-card p {
    font-size: clamp(10px, 1.8vw, 12px) !important;
  }
}

/* 400–550px: Das rechte Hero-Motiv verschwindet wie auf der Technik-Seite.
   Der frei gewordene Platz gehoert komplett dem Text. */
@media (min-width: 400px) and (max-width: 550px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 42ch !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  /* Detailabschnitte werden bei dieser Breite einspaltig und lesbar.
     Reihenfolge: Bereich -> Ueberschrift -> Bild -> Text -> Details. */
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section > .page-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-layout,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy {
    display: contents !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-section-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 12px !important;
    font-size: 11px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(30px, 8vw, 38px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-visual {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy > p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-width: 620px !important;
    margin: 18px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 24px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail article {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail b {
    font-size: 13px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail p {
    font-size: 11px !important;
  }
}

/* Bis 399px: Hero und nachfolgende IT-Betreuungs-Abschnitte konsequent
   zentriert. Das Hero-Bild sitzt direkt unter der Unterueberschrift. */
@media (max-width: 399px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero {
    padding-top: 92px !important;
    padding-bottom: 42px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    display: contents !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-eyebrow {
    display: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(30px, 10.2vw, 40px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
    font-size: clamp(14px, 4.1vw, 16px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .tech-service-hero-art {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 22px auto 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 6 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
  }

  /* Leistungs-Uebersicht zentrieren und die Karten als gut lesbares 2x2-Raster zeigen. */
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-section .page-shell,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-overview-box {
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    justify-items: center !important;
    margin-bottom: 22px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head h2,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head-copy {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head h2 {
    font-size: clamp(28px, 8.6vw, 34px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head-copy p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow[data-service-count^="4"] .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    padding: 13px 10px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow[data-service-count^="4"] .service-phase-card h3 {
    margin: 16px 0 6px !important;
    font-size: clamp(12px, 3.7vw, 14px) !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-card p {
    font-size: clamp(9.5px, 2.8vw, 11px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  /* Detailabschnitte: Bereich -> Ueberschrift -> Bild -> Text -> Details,
     alles mittig wie in der kleinsten Technik-Stufe. */
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section > .page-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-layout,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy {
    display: contents !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-section-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-visual {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-copy > p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 0 !important;
    margin: 24px auto 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail article {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 8px !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-icon {
    margin: 0 auto !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail b,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail p {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail b {
    font-size: 13px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-feature-section .service-feature-rail p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

/* 2026-09-10 v37: Infrastruktur, Software & Websites – dieselben
   Responsive-Stufen wie bei IT-Betreuung. */

/* 551–700px: Hero-Motiv rechts etwas weiter ausnutzen und vergroessern.
   Unterhalb von 700px beginnt damit bewusst eine eigene kompakte Stufe. */
@media (min-width: 551px) and (max-width: 700px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(210px, 42vw, 300px) !important;
    column-gap: clamp(6px, 1.4vw, 10px) !important;
    overflow: visible !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    justify-self: end !important;
    justify-content: flex-end !important;
    width: calc(100% + clamp(14px, 2.5vw, 20px)) !important;
    max-width: none !important;
    margin-right: calc(clamp(6px, 1.4vw, 10px) * -1) !important;
    transform: translateX(clamp(6px, 1.4vw, 10px)) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-art {
    width: 100% !important;
    max-width: none !important;
    max-height: clamp(180px, 38vw, 265px) !important;
    margin: 0 !important;
    object-position: right center !important;
  }

  /* Die Leistungs-Karten werden ab hier als kompaktes 2-Spalten-Raster
     dargestellt, statt immer schmaler nebeneinander zu stehen. */
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    padding: 14px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow .service-phase-card h3 {
    margin-top: 16px !important;
    font-size: clamp(13px, 2.35vw, 15px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-card p {
    font-size: clamp(10px, 1.8vw, 12px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow:is(.service-count-3, .service-count-5) .service-phase-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 5px) !important;
    justify-self: center !important;
  }
}

/* 400–550px: Das rechte Hero-Motiv verschwindet wie auf der Technik-Seite.
   Der frei gewordene Platz gehoert komplett dem Text. */
@media (min-width: 400px) and (max-width: 550px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: 42ch !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  /* Detailabschnitte werden bei dieser Breite einspaltig und lesbar.
     Reihenfolge: Bereich -> Ueberschrift -> Bild -> Text -> Details. */
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section > .page-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-layout,
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy {
    display: contents !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-section-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 12px !important;
    font-size: 11px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(30px, 8vw, 38px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-visual {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    margin: 22px 0 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy > p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    max-width: 620px !important;
    margin: 18px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 24px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail article {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail b {
    font-size: 13px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail p {
    font-size: 11px !important;
  }
}

/* Bis 399px: Hero und nachfolgende Technik-Unterseiten konsequent
   zentriert. Das Hero-Bild sitzt direkt unter der Unterueberschrift. */
@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero {
    padding-top: 92px !important;
    padding-bottom: 42px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    display: contents !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-eyebrow {
    display: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(30px, 10.2vw, 40px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
    font-size: clamp(14px, 4.1vw, 16px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 18px auto 0 !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-art {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 22px auto 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 6 !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
  }

  /* Leistungs-Uebersicht zentrieren und die Karten als gut lesbares 2x2-Raster zeigen. */
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-section .page-shell,
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-overview-box {
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    justify-items: center !important;
    margin-bottom: 22px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head h2,
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head-copy {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head h2 {
    font-size: clamp(28px, 8.6vw, 34px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-head-copy p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    padding: 13px 10px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow .service-phase-card h3 {
    margin: 16px 0 6px !important;
    font-size: clamp(12px, 3.7vw, 14px) !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-card p {
    font-size: clamp(9.5px, 2.8vw, 11px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

 

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-phase-flow:is(.service-count-3, .service-count-5) .service-phase-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc(50% - 4.5px) !important;
    justify-self: center !important;
  }

  /* Detailabschnitte: Bereich -> Ueberschrift -> Bild -> Text -> Details,
     alles mittig wie in der kleinsten Technik-Stufe. */
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section > .page-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: start !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-layout,
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy {
    display: contents !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-section-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy h2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: clamp(28px, 9vw, 36px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-visual {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy > p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: 340px !important;
    min-height: 0 !important;
    margin: 24px auto 0 !important;
    padding-left: 0 !important;
    border-left: 0 !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail article {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 8px !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-icon {
    margin: 0 auto !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail b,
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail p {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail b {
    font-size: 13px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail p {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
}

/* 2026-09-10: Leistungsabschnitte – CTA kompakter und mit konstantem Abstand
   zu den Benefit-Haken, besonders im Tabletbereich um 820px. */
html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .service-feature-section .service-feature-copy > .page-cta-actions {
  margin-top: 30px !important;
}

html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
main .service-feature-section .service-feature-cta {
  min-height: 40px !important;
  padding: 9px 16px !important;
  font-size: clamp(12px, 1.15vw, 14px) !important;
  line-height: 1.2 !important;
}

@media (max-width: 900px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy > .page-cta-actions {
    margin-top: 28px !important;
  }
}

@media (max-width: 550px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy > .page-cta-actions {
    margin-top: 24px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-cta {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
  }
}

/* 2026-09-10: Bis 399px Benefits und CTA als eigene volle Grid-Zeilen fixieren.
   Die Benefit-Haken bleiben unter dem Inhalt, stehen dort aber nebeneinander. */
@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-benefits {
    grid-column: 1 !important;
    grid-row: 6 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px auto 0 !important;
    gap: 14px !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-benefits > span {
    justify-content: center !important;
    white-space: nowrap !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-copy > .page-cta-actions {
    grid-column: 1 !important;
    grid-row: 7 !important;
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 24px auto 0 !important;
  }

  /* Die Detailpunkte bleiben davor und damit sauber unter Bild/Text. */
  html[data-layout="subpage"] body.toowie-subpage:is(.infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-rail {
    grid-row: 5 !important;
  }
}

/* 2026-09-10: Hero-Vorteile bis 399px ebenfalls in einer horizontalen Reihe halten. */
@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(4px, 1.6vw, 10px) !important;
    font-size: clamp(8.5px, 2.75vw, 11px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points > span {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    line-height: 1.2 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points > span > i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: inherit !important;
  }
}

/* 2026-09-10: Kleinste Ansicht – Sonderfaelle Software/Website. */
.software-benefit-mobile-break {
  display: none;
}

@media (max-width: 399px) {
  /* Software: langer dritter Benefit in Spracherkennung darf zweizeilig sein. */
  html[data-layout="subpage"] body.toowie-subpage.software-service-page
  main #spracherkennung .service-feature-benefits > span:last-child {
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.software-service-page
  main #spracherkennung .software-benefit-mobile-break {
    display: block !important;
  }

  /* Website: Bild direkt unter die Ueberschrift setzen. */
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .website-showcase-visual {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .website-showcase-visual img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Website: die drei Aufzaehlungspunkte je Detailabschnitt bewusst untereinander.
     Die Gruppe bleibt sauber unter dem Text, Haken + Beschriftung selbst sind linksbuendig. */
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-benefits {
    grid-column: 1 !important;
    grid-row: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 22px auto 0 !important;
    gap: 9px !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-benefits > span {
    width: 100% !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-benefits > span > i {
    flex: 0 0 auto !important;
  }
}


/* 2026-09-10 v40: Website-Detailabschnitte unter 399px.
   Das Bild sitzt strukturell direkt unter der Ueberschrift; danach Text und
   linksbuendige Benefits untereinander. Die Desktop-Bildkopie bleibt ab 400px aktiv. */
html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
main .service-feature-section .website-showcase-visual-mobile {
  display: none !important;
}

@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section > .page-shell,
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-layout,
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-copy {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Das bisherige, ausserhalb des Textblocks liegende Bild auf kleinster Breite ausblenden. */
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-layout > .website-showcase-visual:not(.website-showcase-visual-mobile) {
    display: none !important;
  }

  /* Mobile Bildkopie: direkt nach h2 im HTML, daher garantiert vor Text und Benefits. */
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .website-showcase-visual-mobile {
    display: block !important;
    position: static !important;
    width: calc(100% - 20px) !important;
    max-width: 360px !important;
    margin: 20px auto 0 !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .website-showcase-visual-mobile img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-copy > p {
    width: 100% !important;
    max-width: 330px !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-benefits {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 330px !important;
    margin: 22px auto 0 !important;
    gap: 9px !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page
  main .service-feature-section .service-feature-benefits > span {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.35 !important;
  }
}

/* 2026-09-10 v41: <=399px – gleiche mobile Leserichtung wie auf der Startseite.
   Text links, Unterueberschrift vor dem Hero-Bild, Bilder/Grafiken ruhig mittig,
   CTA ueber volle Breite und Vorteile als kompakte Dreierreihe. */
@media (max-width: 399px) {
  /* ------------------------------------------------------------
     GEMEINSAMER HERO: IT-Betreuung, Infrastruktur, Software, Website
     (bei Website bleiben ausschliesslich die Hero-Regeln aktiv). */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero > .page-shell {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-grid > div:first-child {
    display: contents !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-subline {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-visual {
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 20px auto 0 !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .tech-service-hero-art {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-lead {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 18px 0 0 !important;
    text-align: left !important;
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions {
    grid-column: 1 !important;
    grid-row: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 11px !important;
    margin: 24px 0 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-actions .page-btn {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points {
    grid-column: 1 !important;
    grid-row: 6 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 4px !important;
    margin: 26px 0 0 !important;
    text-align: center !important;
    font-size: inherit !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points > span {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: normal !important;
    font-size: clamp(9px, 3.05vw, 12px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero .page-hero-points > span > i {
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: clamp(11px, 3.5vw, 14px) !important;
  }

  /* ------------------------------------------------------------
     TECHNIK-UEBERSICHT: komplette Seite in derselben Logik. */
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero > .page-shell,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary > .page-shell {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-copy {
    display: contents !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-subtitle {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 !important;
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation {
    grid-column: 1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    margin: 20px auto 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-text {
    grid-column: 1 !important;
    grid-row: 5 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 0 !important;
    text-align: left !important;
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions {
    grid-column: 1 !important;
    grid-row: 6 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    gap: 11px !important;
    margin: 24px 0 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-actions > a {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points {
    grid-column: 1 !important;
    grid-row: 7 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 4px !important;
    margin: 26px 0 0 !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-overview-points span {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: normal !important;
    font-size: clamp(9px, 3.05vw, 12px) !important;
    line-height: 1.18 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary :is(.tech-summary-kicker, .tech-summary-title, .tech-summary-lead) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    justify-self: center !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 22px auto 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    width: 100% !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature-icon {
    margin: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-feature :is(strong, p) {
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta {
    align-items: stretch !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy {
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy > div,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-copy :is(h3, p) {
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-cta-btn {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
  }

  /* ------------------------------------------------------------
     IT-BETREUUNG + INFRASTRUKTUR + SOFTWARE: restliche Inhaltsbereiche. */
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-phase-section :is(.page-shell, .service-phase-overview-box) {
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-phase-head {
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-phase-head h2,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-phase-head-copy {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-phase-head h2 {
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section > .page-shell {
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-section-heading,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-copy h2,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-copy > p {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-copy h2 {
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-visual {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-rail {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-rail article {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 12px !important;
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-icon {
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-rail :is(b, p) {
    text-align: left !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-benefits {
    width: 100% !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-copy > .page-cta-actions {
    width: 100% !important;
    justify-self: stretch !important;
    justify-content: stretch !important;
  }

  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page)
  main .service-feature-section .service-feature-cta {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  /* Kontaktbereich auf den vier komplett angepassten Technikseiten links fuehren. */
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage #kontakt :is(.clean-kontakt-textblock, .clean-kontakt-ueberschrift, .clean-kontakt-beschreibung, .clean-kontaktformular-ueberschrift, .clean-kontakt-privacy-note),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) #kontakt :is(.clean-kontakt-textblock, .clean-kontakt-ueberschrift, .clean-kontakt-beschreibung, .clean-kontaktformular-ueberschrift, .clean-kontakt-privacy-note) {
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-beschreibung,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) #kontakt .clean-kontakt-beschreibung {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage #kontakt #clean-kontakt-form > .text-center,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-btn,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) #kontakt #clean-kontakt-form > .text-center,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) #kontakt .clean-kontakt-btn {
    width: 100% !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage #kontakt .clean-kontakt-btn,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) #kontakt .clean-kontakt-btn {
    min-height: 54px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
  }

  /* Footer: Bloecke mittig in der Seite, Inhalte innerhalb der Bloecke links. */
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 38px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer > div,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer > div {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    margin-inline: auto !important;
    justify-self: center !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.footer-title, .footer-list, .footer-list li, .footer-list li a, .address-container, .address-container > a, .kontaktdaten, .address-text),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.footer-title, .footer-list, .footer-list li, .footer-list li a, .address-container, .address-container > a, .kontaktdaten, .address-text) {
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-list,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.address-container, .address-container > a, .kontaktdaten),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.address-container, .address-container > a, .kontaktdaten) {
    justify-content: flex-start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches .nav,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches .nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: min(100% - 36px, 300px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches .nav,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches .nav {
    justify-content: flex-start !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches :is(.nav-item, .nav-link),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches :is(.nav-item, .nav-link) {
    width: auto !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches > p.text-center,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches > p.text-center {
    width: min(calc(100% - 40px), 300px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}

/* 2026-09-10 v42: Footer auf den Technikseiten an das globale Kartenlayout angleichen. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
    width: 100% !important;
    max-width: 760px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-unternehmensprofil-toowie,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-unternehmensprofil-toowie {
    grid-column: 1 / -1 !important;
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 18px 18px 16px !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.footer-gewusst-wie, .footer-service),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.footer-gewusst-wie, .footer-service) {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    padding: 16px 9px 14px !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-unternehmensprofil-toowie .footer-title,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-unternehmensprofil-toowie .footer-title {
    width: fit-content !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-unternehmensprofil-toowie .footer-list,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-unternehmensprofil-toowie .footer-list {
    display: grid !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: initial !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-unternehmensprofil-toowie :is(.footer-list li, .footer-list li a, .address-text),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-unternehmensprofil-toowie :is(.footer-list li, .footer-list li a, .address-text) {
    width: auto !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-unternehmensprofil-toowie :is(.address-container, .address-container > a, .kontaktdaten),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-unternehmensprofil-toowie :is(.address-container, .address-container > a, .kontaktdaten) {
    justify-content: flex-start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.footer-gewusst-wie, .footer-service) .footer-title,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.footer-gewusst-wie, .footer-service) .footer-title {
    width: 100% !important;
    margin: 0 0 12px !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.footer-gewusst-wie, .footer-service) .footer-list,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.footer-gewusst-wie, .footer-service) .footer-list {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: initial !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage :is(.footer-gewusst-wie, .footer-service) :is(.footer-list li, .footer-list li a),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) :is(.footer-gewusst-wie, .footer-service) :is(.footer-list li, .footer-list li a) {
    width: 100% !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches .nav,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches .nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches :is(.nav-item, .nav-link),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches :is(.nav-item, .nav-link) {
    width: auto !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .footer-rechtliches > p.text-center,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .footer-rechtliches > p.text-center {
    width: 100% !important;
    text-align: center !important;
  }
}

/* v42.1: Die alten <=399px-Footerregeln dieser Datei mit hoeherer Spezifitaet neutralisieren. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer > .footer-unternehmensprofil-toowie,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer > .footer-unternehmensprofil-toowie {
    grid-column: 1 / -1 !important;
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    justify-self: center !important;
    text-align: left !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer > :is(.footer-gewusst-wie, .footer-service),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer > :is(.footer-gewusst-wie, .footer-service) {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer > :is(.footer-gewusst-wie, .footer-service) :is(.footer-title, .footer-list, .footer-list li, .footer-list li a),
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer > :is(.footer-gewusst-wie, .footer-service) :is(.footer-title, .footer-list, .footer-list li, .footer-list li a) {
    text-align: center !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage .container-footer > :is(.footer-gewusst-wie, .footer-service) .footer-list,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page) .container-footer > :is(.footer-gewusst-wie, .footer-service) .footer-list {
    align-items: initial !important;
    justify-items: center !important;
  }
}

/* 2026-09-11 v43: Technik-Uebersicht – Desktopbreite 1301px+.
   Der Hero nutzt den vorhandenen Platz besser und die goldene zweite
   Titelzeile bleibt immer geschlossen. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
.tech-overview-hero .tech-overview-title-gold {
  display: inline-block !important;
  white-space: nowrap !important;
}

@media (min-width: 1301px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero > .page-shell {
    width: min(1680px, calc(100% - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero .tech-overview-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(32px, 3.4vw, 64px) !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero .tech-overview-copy {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
    left: 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero .tech-overview-subtitle,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero .tech-overview-text {
    max-width: 620px !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero .tech-constellation {
    right: 0 !important;
  }
}


/* 2026-09-17: Der Abstand im Technik-Hero orientiert sich direkt an der Goldlinie unter der Navigation.
   Damit startet der Hero bei jeder Breite mit demselben Abstand unterhalb der Linie wie auf der Startseite. */
@media (min-width: 992px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero {
    padding-top: 116px !important;
  }
}

@media (max-width: 991.98px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero {
    padding-top: 94px !important;
  }
}

/* 2026-09-17 v45: Technik-Uebersicht, Abschnitt "Technik fuer Ihr Unternehmen".
   Zwischen 400px und 580px war die zweizeilige Ueberschrift (nowrap, 32px)
   breiter als die linke Spalte und lief dadurch in das rechte Bild.
   Statt die Schrift zu verkleinern, bekommen Kicker und Ueberschrift hier die
   volle Breite; das Bild rueckt eine Zeile tiefer und steht weiterhin rechts
   neben dem Einleitungstext, bleibt also sichtbar und erkennbar. */
@media (min-width: 400px) and (max-width: 580px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-grid {
    grid-template-columns: minmax(0, 1fr) clamp(132px, 31vw, 200px) !important;
    column-gap: clamp(12px, 2.6vw, 18px) !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-kicker {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-lead {
    grid-column: 1 !important;
    grid-row: 3 !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-visual {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
    justify-self: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-device {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary .tech-summary-features {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* 2026-09-17: Goldene Abschnitts-Kicker (z.B. "ARBEITSPLATZEINRICHTUNG",
   "IT SUPPORT") auf allen Technik-Unterseiten genauso skalieren wie die
   gerade auf technical.html angepasste "TECHNIK FUER IHR UNTERNEHMEN":
   bis 860px einheitlich 11px (vorher teils 12px, teils kleiner gedeckelt),
   ab 861px mit der Breite mitwachsend (11-15px) statt starr klein zu bleiben. */
@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-section-heading {
    font-size: 11px !important;
  }
}

@media (min-width: 861px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .service-feature-section .service-feature-section-heading {
    font-size: clamp(11px, 0.9vw, 15px) !important;
  }
}

/* 2026-09-18: IT-Betreuung – der Uebersichtsbereich braucht zwischen
   400 und 550px dieselbe lesbare 2x2-Anordnung wie die angrenzenden
   Responsive-Stufen. Lange Ueberschriften duerfen dabei nicht aus den
   Karten oder aus dem Seitenbereich herauslaufen. */
@media (min-width: 400px) and (max-width: 550px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head h2 {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head h2 > span {
    display: block !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-head-copy {
    width: 100% !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    padding: 14px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main .service-phase-flow .service-phase-card h3 {
    margin: 16px 0 6px !important;
    font-size: clamp(12px, 3vw, 14px) !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
}

/* Der Einleitungstext unter "IT Betreuung persoenlich fuer Sie" folgt
   derselben responsiven Schriftgroesse wie der Fliesstext im Technik-Hero. */
html[data-layout="subpage"] body.managedservice-page.toowie-subpage
main #themen .service-phase-head-copy > p:first-child {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
  line-height: 1.72 !important;
}

@media (min-width: 981px) and (max-width: 1300px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    line-height: 1.66 !important;
  }
}

@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    font-size: 17px !important;
    line-height: 1.66 !important;
  }
}

@media (max-width: 860px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    font-size: clamp(13px, 1.75vw, 15px) !important;
    line-height: 1.65 !important;
  }
}

/* 2026-09-18: Ausschliesslich der normale Hero-Fliesstext aller Technikseiten
   folgt derselben Schriftgroesse wie .philosophy-home-lead im Startseiten-Hero. */
html[data-layout="subpage"] body.toowie-subpage main :is(
  .page-hero.tech-service-hero .page-hero-lead,
  .tech-overview-hero .tech-overview-text
) {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
}

@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.toowie-subpage main :is(
    .page-hero.tech-service-hero .page-hero-lead,
    .tech-overview-hero .tech-overview-text
  ) {
    font-size: clamp(.62rem, 1.28vw, .98rem) !important;
  }
}

@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage main :is(
    .page-hero.tech-service-hero .page-hero-lead,
    .tech-overview-hero .tech-overview-text
  ) {
    font-size: clamp(14px, 2.3vw, 17px) !important;
  }
}


/* 2026-09-18 v47: IT-Betreuung 501-700px Karten kompakt
   Die vier Karten bleiben in einem kompakten 2x2-Block: horizontal und
   vertikal jeweils derselbe Abstand. */
@media (min-width: 501px) and (max-width: 700px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, 188px) !important;
    grid-auto-rows: auto !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    justify-content: start !important;
    align-items: stretch !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card {
    width: 188px !important;
    max-width: 188px !important;
    margin: 0 !important;
  }
}

/* Einleitung unter "IT Betreuung persoenlich fuer Sie.":
   exakt dieselbe mobile Schriftgroesse wie .tech-overview-text
   ("Wir unterstuetzen Sie bei Ihren technischen Themen ..."). */
@media (max-width: 860px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.65 !important;
  }
}


/* 2026-09-18 v48: IT-Betreuung Kartentypografie 501-1200px
   Unterhalb grosser Desktopbreiten bleiben Kartentitel und Beschreibungen
   gut lesbar. Gleichzeitig nutzt das Raster die verfuegbare Breite voll aus,
   statt rechts ungenutzten Platz stehen zu lassen. */
@media (min-width: 501px) and (max-width: 1200px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-overview-box {
    width: 100% !important;
    max-width: none !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: stretch !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card h3 {
    line-height: 1.2 !important;
    font-weight: 700 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card p {
    line-height: 1.5 !important;
  }
}

/* 501-980px: grosses 2x2-Raster, damit lange Titel wie
   "Arbeitsplatzeinrichtung" ohne Mini-Schrift Platz haben. */
@media (min-width: 501px) and (max-width: 980px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    justify-content: stretch !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 150px !important;
    padding: 18px !important;
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card h3 {
    margin: 18px 0 8px !important;
    font-size: clamp(15px, 2.45vw, 18px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card p {
    font-size: clamp(12.5px, 1.9vw, 14px) !important;
  }
}

/* 981-1200px: vier Karten duerfen nebeneinander stehen, nutzen dafuer aber
   die volle Inhaltsbreite und behalten eine deutlich groessere Typografie. */
@media (min-width: 981px) and (max-width: 1200px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.3vw, 16px) !important;
    justify-content: stretch !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: clamp(160px, 15vw, 180px) !important;
    padding: clamp(16px, 1.6vw, 20px) !important;
    margin: 0 !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card h3 {
    margin: 18px 0 8px !important;
    font-size: clamp(16px, 1.45vw, 18px) !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-flow .service-phase-card p {
    font-size: clamp(13px, 1.15vw, 14px) !important;
  }
}


/* 2026-09-18 v50: Technik-Summary Text 861-980px ohne Groessensprung
   Der Text unter "Gemeinsam gedacht. Kompetent umgesetzt." bleibt direkt
   oberhalb von 860px auf derselben gut lesbaren Groesse und waechst leicht mit. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage
  main .tech-overview-summary .tech-summary-lead {
    font-size: clamp(16px, 1.75vw, 17px) !important;
    line-height: 1.65 !important;
  }
}


/* 2026-09-18 v51: IT-Betreuung Headline-Text-Abstand 861-980px
   Abstand zwischen "IT Betreuung persoenlich fuer Sie." und dem Einleitungstext
   entspricht im gerade geprueften Bereich dem Abstand zwischen Hero-Unterzeile
   und Hero-Fliesstext. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head {
    row-gap: 16px !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head > div:first-child,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head h2,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* 2026-09-18 v52: IT-Betreuung Titel-Text-Abstand 861-1300px vereinheitlicht
   Der Abstand zwischen Ueberschrift und Einleitung entspricht dem Hero-Abstand.
   Explizit auch fuer 981-1300px, damit bei ca. 1025px kein anderer Standardabstand greift. */
@media (min-width: 861px) and (max-width: 1300px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }

  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head > div:first-child,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head h2,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy,
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* 2026-09-18 v53: IT-Betreuung Einleitung 861-980px wie 860px
   Kein Groessensprung oberhalb von 860px: exakt dieselbe Schriftlogik
   wie in der bis-860px-Stufe. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.managedservice-page.toowie-subpage
  main #themen .service-phase-head-copy > p:first-child {
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.65 !important;
  }
}

/* Die horizontale Shell-Breite der IT-Betreuungsseite liegt bewusst
   zentral in css/it-betreuung-layout.css. */