/* Startseiten-Hero: ab 860px abwaerts in Lesereihenfolge stapeln.
   Die Desktop-Komposition oberhalb dieses Breakpoints bleibt in pages.css. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero {
    padding: 108px 24px 32px !important;
    min-height: auto !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-copy {
    display: contents !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    order: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(25px, 5.8vw, 44px) !important;
    line-height: 1.08 !important;
    align-items: center !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title :is(span, strong) {
    white-space: normal !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-subtitle {
    order: 2;
    width: 100% !important;
    max-width: 520px !important;
    margin: 16px 0 0 !important;
    font-size: clamp(14px, 2.5vw, 18px) !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    order: 3;
    display: none !important;
    position: relative !important;
    container-type: inline-size;
    width: min(100%, 440px) !important;
    max-width: 440px !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.2;
    margin: 16px auto !important;
    transform: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 34cqw !important;
    height: 34cqw !important;
    padding: 5cqw 3cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it {
    left: 10% !important;
    top: 6% !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    right: 10% !important;
    bottom: 6% !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: 2.2cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    margin: 1cqw 0 !important;
    font-size: 4.4cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    max-width: 100% !important;
    font-size: 2.4cqw !important;
    line-height: 1.35 !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: 21cqw !important;
    height: 21cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: 3cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-ring-one {
    width: 76cqw !important;
    height: 48cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-ring-two {
    width: 88cqw !important;
    height: 55cqw !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-ring-node {
    width: 3cqw !important;
    height: 3cqw !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-lead {
    order: 4;
    width: 100% !important;
    max-width: 520px !important;
    margin: 20px 0 0 !important;
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    order: 5;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions .philosophy-btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: clamp(11px, 1.8vw, 13px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(12px, 4vw, 32px) minmax(0, 1fr) clamp(12px, 4vw, 32px) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 600px !important;
    gap: 4px !important;
    margin: 28px auto 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    text-align: center !important;
  }
  html[data-page="index"] .philosophy-home-hero .path-octagon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 11px !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-path-item strong {
    font-size: clamp(11px, 2vw, 15px) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-path-line {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1px !important;
    margin: 0 !important;
    align-self: center !important;
    background: linear-gradient(90deg, transparent 0%, #c69a57 50%, transparent 100%) !important;
    opacity: 1 !important;
  }
  html[data-page="index"] .philosophy-home-hero .philosophy-path-item small {
    display: none !important;
  }
}

/* 400–860px linksbuendig; bis 399px gilt die zentrierte Anordnung oben. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-layout {
    align-items: flex-start !important;
    margin-inline: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    align-items: flex-start !important;
  }

  html[data-page="index"] .philosophy-home-hero :is(.philosophy-home-title, .philosophy-home-subtitle, .philosophy-home-lead) {
    text-align: left !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    margin-inline: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    justify-content: flex-start !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 2.4vw, 18px) !important;
    margin: 24px 0 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href] {
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href]::before {
    content: "✓";
    color: #c69a57;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item strong {
    font-size: clamp(10px, 1.8vw, 12px) !important;
    font-weight: 750 !important;
  }

  html[data-page="index"] .philosophy-home-hero :is(.path-octagon, .philosophy-path-line, .philosophy-path-link-arrow) {
    display: none !important;
  }
}

/* Startseite bis 399px: klare Lesereihenfolge statt zentrierter Gesamtanordnung. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 30px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-layout {
    align-items: flex-start !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    order: 1;
    align-items: flex-start !important;
    text-align: left !important;
    font-size: clamp(2.1rem, 9.1vw, 2.35rem) !important;
    line-height: 1 !important;
    letter-spacing: -.045em !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    order: 2;
    display: none !important;
    align-self: center !important;
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    aspect-ratio: 1.2 !important;
    margin: 22px auto 20px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-subtitle {
    order: 3;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-lead {
    order: 4;
    max-width: none !important;
    margin: 14px 0 0 !important;
    text-align: left !important;
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    order: 5;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 24px 0 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions .philosophy-btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: clamp(12px, 4vw, 18px) !important;
    margin: 26px auto 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href] {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href]::before {
    content: "✓";
    color: #c69a57;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item strong {
    font-size: clamp(10px, 3vw, 12px) !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  html[data-page="index"] .philosophy-home-hero :is(.path-octagon, .philosophy-path-line, .philosophy-path-link-arrow) {
    display: none !important;
  }
}

/* 2026-09-10: Startseite bis 399px – Titel exakt dreizeilig, Buttons und Haken nutzen die Breite besser. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    font-size: clamp(18px, 6.6vw, 26.4px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-title :is(span, strong) {
    white-space: nowrap !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    width: 100% !important;
    gap: 11px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions .philosophy-btn {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 4px !important;
    width: 100% !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href] {
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item[href]::before {
    font-size: clamp(11px, 3.5vw, 14px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item strong {
    font-size: clamp(9px, 3.2vw, 13px) !important;
    line-height: 1.15 !important;
  }
}

/* 2026-09-10 v5: <=399px – im Einstiegs-Hero steht die Unterueberschrift
   direkt unter der H1 und noch vor dem TOOWIE-Visual. */
@media (max-width: 399px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    order: 1 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-subtitle {
    order: 2 !important;
    margin-top: 14px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    order: 3 !important;
    margin-top: 20px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-lead {
    order: 4 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    order: 5 !important;
  }
}

html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title > .hero-title-mobile {
  display: none !important;
}

/* Schmale Handys: kurze Aussage und gleich grosse, kraeftige Titelzeilen. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title {
    gap: 0 !important;
    font-size: clamp(27px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title > span {
    font-size: inherit !important;
    font-weight: 800 !important;
    line-height: inherit !important;
  }

  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title > .hero-title-desktop {
    display: none !important;
  }

  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title > .hero-title-mobile {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-page="index"] body.index-page .index-hero.philosophy-home-hero .philosophy-home-title > strong {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
    text-wrap: balance;
  }
}

/* Die kleine Grafik darf etwas deutlicher schweben; Bewegungseinstellungen bleiben respektiert. */
@media (max-width: 399px) and (prefers-reduced-motion: no-preference) {
  html[data-page="index"] .philosophy-home-hero :is(.philosophy-orbit, .philosophy-center-octagon) {
    animation-name: philosophyMobileOctagonFloat;
  }
}

@keyframes philosophyMobileOctagonFloat {
  0%, 100% { transform: translate3d(0, -9px, 0); }
  50% { transform: translate3d(0, 9px, 0); }
}

/* 2026-09-14: Mobile Hero-Visualisierung als horizontale Reihe aus drei Octagons. */
html[data-page="index"] .philosophy-home-hero .hero-service-visual {
  display: none !important;
}

@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(8px, 2.8vw, 18px) !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 22px auto 8px !important;
    padding: 14px 8px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-ring,
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual::before,
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual::after {
    display: none !important;
    content: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit,
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    animation: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: clamp(118px, 27vw, 165px) !important;
    height: clamp(118px, 27vw, 165px) !important;
    padding: clamp(16px, 3vw, 24px) clamp(12px, 2.5vw, 18px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: clamp(10px, 4vw, 26px) !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(216,183,127,.38), rgba(216,183,127,.12)) !important;
    z-index: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after {
    left: calc(100% - 1px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    right: calc(100% - 1px) !important;
    background: linear-gradient(90deg, rgba(216,183,127,.12), rgba(216,183,127,.38)) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: clamp(7px, 1.35vw, 10px) !important;
    line-height: 1.2 !important;
    letter-spacing: .12em !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    margin: 6px 0 5px !important;
    font-size: clamp(17px, 3.2vw, 22px) !important;
    line-height: 1 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    max-width: 100% !important;
    font-size: clamp(8px, 1.55vw, 10px) !important;
    line-height: 1.35 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: clamp(82px, 18vw, 112px) !important;
    height: clamp(82px, 18vw, 112px) !important;
    display: grid !important;
    place-content: center !important;
    margin-inline: -2px !important;
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.22)) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: clamp(12px, 2.2vw, 16px) !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-lead {
    order: 4 !important;
    margin-top: 18px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions {
    order: 5 !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    justify-content: flex-start !important;
    margin-inline: 0 !important;
  }
}

@media (max-width: 399px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    width: 100% !important;
    max-width: none !important;
    gap: 6px !important;
    padding-inline: 0 !important;
    margin: 18px 0 16px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: clamp(96px, 31vw, 112px) !important;
    height: clamp(96px, 31vw, 112px) !important;
    padding: 14px 9px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    width: 8px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: 6px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    margin: 5px 0 4px !important;
    font-size: 15px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: 7px !important;
    line-height: 1.28 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: 72px !important;
    height: 72px !important;
    margin-inline: -1px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: 10px !important;
  }
}


@media (max-width: 300px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    display: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    display: none !important;
    content: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: clamp(104px, 42vw, 122px) !important;
    height: clamp(104px, 42vw, 122px) !important;
    padding: 14px 10px !important;
  }
}

/* 2026-09-14: Klickbare Octagons – bessere Lesbarkeit und Hover-Feedback. */
html[data-page="index"] .philosophy-home-hero .philosophy-orbit,
html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease;
  will-change: transform;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
  font-size: .86rem !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
  font-size: 2.05rem !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  max-width: 220px !important;
  font-size: 1.02rem !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,.90) !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
  font-size: 1.45rem !important;
  letter-spacing: .055em !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit:focus-visible,
html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon:focus-visible {
  z-index: 8;
  transform: translateY(-5px) scale(1.04);
  outline: 3px solid rgba(255,255,255,.95);
  outline-offset: 5px;
}

@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: clamp(8px, 1.65vw, 12px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    font-size: clamp(19px, 3.65vw, 25px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(9px, 1.8vw, 12px) !important;
    line-height: 1.32 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: clamp(14px, 2.65vw, 19px) !important;
  }
}

@media (max-width: 399px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: 7.5px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    font-size: 17px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: 12px !important;
  }
}


/* 2026-09-14 v12: Octagon-Typografie mindestens auf Fliesstext-Niveau. */
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  font-size: 1.1rem !important;
  line-height: 1.38 !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
  font-size: 2.1rem !important;
  line-height: 1.05 !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
  font-size: 1.55rem !important;
  line-height: 1.05 !important;
}

@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    gap: 12px !important;
    max-width: 620px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 190px !important;
    height: 190px !important;
    padding: 24px 18px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: 16px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    margin: 8px 0 7px !important;
    font-size: 28px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    display: grid !important;
    width: 132px !important;
    height: 132px !important;
    margin-inline: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: 20px !important;
  }
}

@media (max-width: 600px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    margin: 18px auto 14px 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 220px !important;
    height: 220px !important;
    padding: 28px 22px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: 150px !important;
    height: 150px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    display: none !important;
    content: none !important;
  }
}

/* 2026-09-14 v13: Octagons bleiben immer horizontal.
   < 620px: TOOWIE ausblenden. < 460px: komplette Octagon-Reihe ausblenden. */
@media (min-width: 620px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    display: grid !important;
  }
}

@media (min-width: 460px) and (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    overflow: visible !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    display: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 190px !important;
    height: 190px !important;
    flex: 0 0 190px !important;
    padding: 24px 18px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 459px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    display: none !important;
  }
}

/* 2026-09-14 v14: Sekundaertext exakt auf Fliesstextgroesse, Octagons kompakter. */
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
  line-height: 1.45 !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
  width: 260px !important;
  height: 260px !important;
  padding: 38px 30px !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
  width: 160px !important;
  height: 160px !important;
}

@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.4 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 170px !important;
    height: 170px !important;
    padding: 20px 14px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: 112px !important;
    height: 112px !important;
  }
}

@media (min-width: 460px) and (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 170px !important;
    height: 170px !important;
    flex: 0 0 170px !important;
    padding: 20px 14px !important;
  }
}

/* 2026-09-14 v16: Korrektur – Sekundaertext im Octagon ist EXAKT so gross
   wie der Fliesstext direkt darunter. IT/Akquise bleiben gross.
   Die Octagons werden dadurch etwas kompakter. */

/* Desktop > 980px: entspricht .philosophy-home-lead aus style.css */
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem) !important;
  line-height: 1.45 !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
  width: 220px !important;
  height: 220px !important;
  padding: 28px 22px !important;
}

/* Tablet / schmaler Desktop: exakt dieselbe Groesse wie
   .philosophy-home-lead in pages.css. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(16px, 1.75vw, 17px) !important;
    line-height: 1.58 !important;
  }
}

/* Mobile / Tablet <= 860px: exakt dieselbe Groesse wie
   .philosophy-home-lead in dieser Datei. */
@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(14px, 2.3vw, 17px) !important;
    line-height: 1.6 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 160px !important;
    height: 160px !important;
    padding: 18px 12px !important;
  }
}

/* Zwei Octagons bleiben im vorgesehenen Bereich nebeneinander. */
@media (min-width: 460px) and (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: 160px !important;
    height: 160px !important;
    flex: 0 0 160px !important;
    padding: 18px 12px !important;
  }
}

/* 2026-09-14 v17: Eine gemeinsame Schriftgroesse fuer Hero-Fliesstext und Octagon-Sekundaertext. */
html[data-page="index"] .philosophy-home-hero {
  --hero-body-copy-size: clamp(1.02rem, 1.45vw, 1.2rem);
}

/* Der Absatz unter den Octagons sowie Goldzeile und Beschreibung in den Octagons
   verwenden bewusst exakt dieselbe Schriftgroesse. */
html[data-page="index"] .philosophy-home-hero .philosophy-home-lead,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  font-size: var(--hero-body-copy-size) !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
  line-height: 1.25 !important;
}

html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
  line-height: 1.45 !important;
}

/* Schmaler Desktop / Tablet: exakt die dortige Hero-Fliesstextgroesse. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="index"] .philosophy-home-hero {
    --hero-body-copy-size: clamp(16px, 1.75vw, 17px);
  }
}

/* Mobile: exakt die dortige Hero-Fliesstextgroesse. */
@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero {
    --hero-body-copy-size: clamp(14px, 2.3vw, 17px);
  }
}


/* 2026-09-14 v20: Octagon-Reihe bleibt bis 200px Viewport sichtbar.
   TOOWIE liegt leicht ueber den beiden Leistungs-Octagons; Texte skalieren
   kontrolliert, ohne auf sehr kleinen Breiten unlesbar zu werden. */
@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-orbit-size: clamp(98px, 36vw, 205px);
    --mobile-center-size: clamp(58px, 18vw, 108px);
    --mobile-octagon-overlap: clamp(29px, 7vw, 45px);
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    align-self: flex-start !important;
    width: calc(100vw - 4px) !important;
    max-width: 100vw !important;
    min-height: var(--mobile-orbit-size) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 18px auto 14px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit,
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    z-index: 2 !important;
    width: var(--mobile-orbit-size) !important;
    height: var(--mobile-orbit-size) !important;
    padding: clamp(8px, 2.6vw, 19px) clamp(7px, 2.2vw, 15px) !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    z-index: 5 !important;
    width: var(--mobile-center-size) !important;
    height: var(--mobile-center-size) !important;
    margin-inline: calc(-1 * var(--mobile-octagon-overlap)) !important;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    display: none !important;
    content: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(9px, 2.6vw, 14px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    line-height: 1.12 !important;
    letter-spacing: clamp(.04em, .8vw, .1em) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    margin: clamp(3px, 1vw, 6px) 0 !important;
    font-size: clamp(14px, 4.8vw, 26px) !important;
    line-height: 1 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    max-width: 100% !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: clamp(8px, 2.35vw, 13px) !important;
    line-height: 1 !important;
    letter-spacing: clamp(.02em, .35vw, .05em) !important;
    white-space: nowrap !important;
  }
}

/* 2026-09-14 v22: Alle Texte bleiben optisch zentriert.
   Nur der Beschreibungstext umfliesst auf der Innenseite die TOOWIE-Ueberlappung,
   damit einzelne Zeilen dort frueher umbrechen, statt hinter TOOWIE zu verschwinden. */
@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit > :is(.philosophy-orbit-kicker, strong, small) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 0 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Freiraum nur dort, wo das mittlere Octagon in den Beschreibungstext ragt. */
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it small::before,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication small::before {
    content: "" !important;
    width: calc(var(--mobile-octagon-overlap) * .92) !important;
    height: 3.25em !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it small::before {
    float: right !important;
    margin-left: 3px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication small::before {
    float: left !important;
    margin-right: 3px !important;
  }
}

/* 2026-09-14 v23: Weniger TOOWIE-Ueberlappung und echte Zentrierung.
   Der Text nutzt wieder die komplette Breite der Leistungs-Octagons.
   Durch die kleinere Ueberlappung bleibt TOOWIE aus dem Textbereich heraus. */
@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-octagon-overlap: clamp(24px, calc(33px - 1.5vw), 30px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit > :is(.philosophy-orbit-kicker, strong, small) {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    display: block !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it small::before,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication small::before {
    display: none !important;
    content: none !important;
    float: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }
}

/* 2026-09-14 v24: TOOWIE ueberlappt nur noch die Innenkante.
   So bleibt die nutzbare Textflaeche der beiden grossen Octagons frei und
   alle Textzeilen koennen wieder ueber die volle Breite mittig laufen. */
@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-octagon-overlap: clamp(7px, 2vw, 10px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit > :is(.philosophy-orbit-kicker, strong, small) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit small {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-align: center !important;
  }
}

/* Bis 200px bleibt die komplette Dreiergruppe horizontal sichtbar.
   Die Elemente skalieren hier gemeinsam, statt die starke Ueberlappung wieder einzufuehren. */
@media (max-width: 260px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-orbit-size: 43.5vw !important;
    --mobile-center-size: 21vw !important;
    --mobile-octagon-overlap: 4vw !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    padding-inline: 3.5vw !important;
  }
}

/* 2026-09-15 v25: 620–860px – Octagon-Abstand wie im kleineren Mobile-Bereich. */
@media (min-width: 620px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    gap: 0 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    margin-inline: -10px !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it::after,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication::after {
    display: none !important;
    content: none !important;
  }
}


/* 2026-09-15 v30: 400–860px – Einstiegs-Hero in derselben H1-Groesse
   wie die Produkt-Heroes (z. B. „Kaltakquise als funktionierendes Vertriebswerkzeug“). */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-home-title {
    font-size: clamp(28px, 5.9vw, 47px) !important;
    line-height: 1.06 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-subtitle {
    font-size: clamp(15px, 1.9vw, 16px) !important;
    line-height: 1.4 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-lead {
    font-size: clamp(14px, 1.75vw, 15.5px) !important;
    line-height: 1.6 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-home-actions .philosophy-btn {
    font-size: clamp(12px, 1.55vw, 13px) !important;
    line-height: 1.15 !important;
  }
}

/* 2026-09-15 v27: 620–860px – Octagons ohne Groessensprung nach Mobile weiterfuehren. */
@media (min-width: 620px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: clamp(205px, 25vw, 220px) !important;
    height: clamp(205px, 25vw, 220px) !important;
    flex: 0 0 clamp(205px, 25vw, 220px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: clamp(108px, 14vw, 124px) !important;
    height: clamp(108px, 14vw, 124px) !important;
  }
}

/* 2026-09-15 v28: 620–860px – TOOWIE im goldenen Octagon ohne Schrift-Sprung.
   Startet auf dem Niveau des Mobile-Bereichs und waechst kontinuierlich mit. */
@media (min-width: 620px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon span {
    font-size: clamp(13px, calc(2.083vw + .08px), 18px) !important;
    line-height: 1 !important;
    letter-spacing: clamp(.04em, .13vw, .065em) !important;
    white-space: nowrap !important;
  }
}

/* 2026-09-15 v29: Ab 861px wieder die diagonale Desktop-Komposition.
   Die spaeter hinzugekommenen festen 220/160px-Groessen hatten die in
   pages.css bereits responsiv berechneten Positionen uebersteuert. Dadurch
   liefen die drei Octagons bei schmalem Desktop/Tablet ineinander.
   Groesse und Innenabstand skalieren jetzt wieder mit denselben Formeln wie
   die diagonalen Positionen; <= 860px bleibt die horizontale Reihe unberuehrt. */
@media (min-width: 861px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: clamp(86px, calc(33.63px + 13.09vw), 285px) !important;
    height: clamp(86px, calc(33.63px + 13.09vw), 285px) !important;
    padding: clamp(13px, calc(4.32px + 2.17vw), 46px) clamp(10px, calc(3.16px + 1.71vw), 36px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: clamp(54px, calc(21.37px + 8.16vw), 178px) !important;
    height: clamp(54px, calc(21.37px + 8.16vw), 178px) !important;
  }
}

/* 2026-09-15 v31: Horizontale Octagon-Reihe sauber ueberlappen lassen.
   - die sichtbaren Kanten am mittleren TOOWIE-Octagon verschwinden
   - die grossen Octagons werden leicht nach aussen gezogen
   - bei der diagonalen Desktop-Anordnung gibt es keinen Hover-Effekt mehr */
@media (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    position: relative !important;
    isolation: isolate !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon::after {
    content: "" !important;
    position: absolute !important;
    inset: -7px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: var(--toowie-gold) !important;
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it {
    transform: translateX(-10px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    transform: translateX(10px) !important;
  }
}

@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it {
    transform: translateX(-8px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    transform: translateX(8px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon::after {
    inset: -5px !important;
  }
}

@media (min-width: 861px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit,
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    transition: none !important;
  }
}

/* 2026-09-15 v32: Mittleres TOOWIE-Octagon in der horizontalen Reihe vergroessern,
   damit die diagonalen Innenkanten der grossen Octagons sauber anliegen und
   die Goldflaeche randnah bis in die Eckbereiche durchlaeuft. */
@media (min-width: 620px) and (max-width: 860px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it {
    transform: translateX(-14px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    transform: translateX(14px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: clamp(146px, 18.2vw, 162px) !important;
    height: clamp(146px, 18.2vw, 162px) !important;
    margin-inline: calc(-1 * clamp(24px, 3vw, 30px)) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon::after {
    inset: -14px !important;
  }
}

@media (max-width: 619px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-center-size: clamp(92px, 24.5vw, 142px) !important;
    --mobile-octagon-overlap: clamp(18px, 4.9vw, 28px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it {
    transform: translateX(-12px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    transform: translateX(12px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    width: var(--mobile-center-size) !important;
    height: var(--mobile-center-size) !important;
    margin-inline: calc(-1 * var(--mobile-octagon-overlap)) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon::after {
    inset: -12px !important;
  }
}

/* 2026-09-15 v34: Breakpoint-Korrektur ohne doppelten Text. */
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-main,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-software,
html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-separator {
  display: inline;
  font: inherit;
  line-height: inherit;
}

@media (min-width: 564px) and (max-width: 609px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it small {
    font-size: var(--hero-body-copy-size) !important;
    line-height: 1.15 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it small::after {
    content: none !important;
    display: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-main,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-software {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it-separator {
    display: none !important;
  }
}

@media (max-width: 300px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-center-octagon {
    display: none !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-hero-visual {
    --mobile-orbit-size: 48vw !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit {
    width: var(--mobile-orbit-size) !important;
    height: var(--mobile-orbit-size) !important;
    flex: 0 0 var(--mobile-orbit-size) !important;
    padding: clamp(8px, 3vw, 11px) clamp(6px, 2.2vw, 9px) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-it,
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-communication {
    transform: none !important;
  }
}

/* 2026-09-17: Hero-Octagons auf schmalem Desktop ruhiger gewichten. */
@media (min-width: 861px) and (max-width: 1200px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: clamp(.86rem, 1.25vw, 1rem) !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-orbit strong {
    font-size: clamp(1.65rem, 2.35vw, 1.85rem) !important;
  }
}


/* 2026-09-18 v32: Index 861-980px lesbare Hero- und Pfadtexte
   Kein Typografie-Einbruch direkt oberhalb von 860px. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="index"] .philosophy-home-hero .philosophy-path-item strong {
    font-size: clamp(15px, 1.7vw, 17px) !important;
    line-height: 1.25 !important;
  }

  html[data-page="index"] .philosophy-home-hero .philosophy-path-item small {
    font-size: clamp(13px, 1.45vw, 14px) !important;
    line-height: 1.4 !important;
  }
}


/* 2026-09-18 v33: Octagon-Typografie 861-1438px kompakter
   Ab 1438px abwaerts werden nur die beiden Leistungs-Octagons kompakter.
   Unter 860px greifen weiterhin die bereits abgestimmten Mobile-Regeln. */
@media (min-width: 861px) and (max-width: 1438px) {
  html[data-page="index"] body.index-page
  .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: clamp(11px, .9vw, 13px) !important;
    line-height: 1.2 !important;
  }

  html[data-page="index"] body.index-page
  .philosophy-home-hero .philosophy-orbit strong {
    font-size: clamp(24px, 1.9vw, 28px) !important;
    line-height: 1.02 !important;
  }

  html[data-page="index"] body.index-page
  .philosophy-home-hero .philosophy-orbit small {
    font-size: clamp(12px, 1.05vw, 15px) !important;
    line-height: 1.35 !important;
  }
}


/* 2026-09-18 v34: Index-Hero 861-980px groessere Texttypen
   Nur der normale Hero-Text und die Unterueberschrift werden vergroessert.
   Die Octagon-Typografie aus v33 bleibt davon unberuehrt. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="index"] body.index-page
  .philosophy-home-hero .philosophy-home-subtitle {
    font-size: clamp(18px, 2vw, 20px) !important;
    line-height: 1.42 !important;
  }

  html[data-page="index"] body.index-page
  .philosophy-home-hero .philosophy-home-lead {
    font-size: clamp(17px, 1.9vw, 19px) !important;
    line-height: 1.62 !important;
  }
}