/* Vier Angebotsbereiche: mobile Lesereihenfolge bis einschliesslich 860px. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) > .shell.hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100% - 48px) !important;
    max-width: 720px !important;
    gap: 0 !important;
    container-type: inline-size;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-copy {
    display: contents !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) h1 {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    font-size: clamp(28px, 5.9vw, 47px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-visual {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    align-self: stretch !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .browser-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-subline {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    font-size: clamp(16px, 2.7vw, 22px) !important;
    line-height: 1.4 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-lead {
    order: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(14px, 2.2vw, 17px) !important;
    line-height: 1.6 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions {
    order: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 20px 0 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions .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"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points {
    order: 6 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 8px 16px !important;
    margin: 16px 0 0 !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points span {
    width: auto !important;
    gap: 6px !important;
    font-size: inherit !important;
  }
}

/* Kleinste Mobile-Stufe: Startseiten-Inhalte bis 399px konsequent zentrieren. */
/* 2026-09-16 v77: Bei 400–860px vollstaendige Desktop-artige Textboxen
   statt aufklappbarer Mobil-Buttons; Kartenlinie ohne Verlauf. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-mobile-number,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-mobile-detail {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row h3 {
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row h3::after {
    left: 0 !important;
    width: 38px !important;
    height: 2px !important;
    transform: none !important;
    background: #c29140 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    padding: 7px 8px 7px 13px !important;
    cursor: default !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item::before {
    content: "" !important;
    display: block !important;
    left: 6px !important;
    top: 11px !important;
    width: 5px !important;
    height: 5px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #c29140 !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item::after {
    content: none !important;
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    margin-bottom: 2px !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-text {
    display: block !important;
    color: #4d6174 !important;
    font-size: clamp(8.5px, 1.25vw, 11px) !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide)::after {
    left: 14px !important;
    bottom: 8px !important;
    width: calc(100% - 28px) !important;
    height: 2px !important;
    background: #c29140 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 399px) {
  /* Story-Ueberleitungen 01–04 */
  html[data-page="index"] body.index-page .home-story-step-inner {
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step-kicker {
    justify-self: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step-number,
  html[data-page="index"] body.index-page .home-story-step h2,
  html[data-page="index"] body.index-page .home-story-step-logo,
  html[data-page="index"] body.index-page .home-story-step-logo-fallback,
  html[data-page="index"] body.index-page .home-story-step p {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Produkt-Heroes */
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) > .shell.hero-grid {
    align-items: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) :is(h1, .hero-subline, .hero-lead) {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-visual {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions,
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points {
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points span {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Kontaktbereich */
  html[data-page="index"] body.index-page #kontakt :is(.clean-kontakt-textblock, .clean-kontakt-ueberschrift, .clean-kontakt-beschreibung, .clean-kontaktformular-ueberschrift, .clean-kontakt-privacy-note) {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-mobile {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    justify-items: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    text-align: center !important;
  }

  /* Story-Schritte auf sehr kleinen Displays als eine mittige Spalte darstellen. */
  html[data-page="index"] body.index-page .home-story-step-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 10px !important;
  }

  html[data-page="index"] body.index-page .home-story-step-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern) .home-story-step-number {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 2px !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern) .home-story-step-content h2 {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-bottom: 0 !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    margin-top: 12px !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie :is(.home-story-step-logo, .home-story-step-logo-fallback) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step p {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}

/* 2026-09-16 v64: Lesbare Texte in Story- und Capability-Bereichen.
   Verhindert den starken Groessensprung direkt oberhalb von 399px. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie p {
    font-size: clamp(14px, 2.2vw, 17px) !important;
    line-height: 1.6 !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-chip,
  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-step b,
  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-step strong {
    font-size: clamp(14px, 2.2vw, 17px) !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-step strong {
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) h3 {
    font-size: clamp(18px, 3vw, 22px) !important;
    line-height: 1.15 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
    font-size: clamp(14px, 2.2vw, 17px) !important;
    line-height: 1.45 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title {
    font-size: clamp(12px, 2vw, 15px) !important;
    line-height: 1.3 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung, #toowie-identity)
  .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text {
    font-size: clamp(11px, 1.8vw, 14px) !important;
    line-height: 1.42 !important;
  }
}

/* 2026-09-16 v68: TOOWIE-Typografie an die Haken-Begriffe angleichen;
   Kartenabstaende ausschliesslich zwischen 400px und 860px nachjustieren. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #toowie-identity :is(
    .toowie-brand-kicker,
    .toowie-brand-topline-text,
    .toowie-brand-chip,
    .toowie-brand-step b,
    .toowie-brand-step strong
  ) {
    font-size: clamp(11px, 1.8vw, 15px) !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-step strong {
    line-height: 1.22 !important;
  }

  /* Das Original-Logo in der Box immer sichtbar halten. */
  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-summary {
    margin-bottom: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide)::after {
    bottom: 10px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo {
    width: min(220px, 94%) !important;
    max-width: 94% !important;
    height: auto !important;
    max-height: 82% !important;
    object-fit: contain !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    width: clamp(150px, 28vw, 220px) !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* 2026-09-16 v78: Mittleres TOOWIE-Octagon ohne harten Groessensprung.
   Die Wortmarke skaliert ueber alle Viewportbreiten proportional mit. */
html[data-page="index"] body.index-page .philosophy-home-hero.philosophy-home-hero
  .philosophy-center-octagon.philosophy-center-octagon {
  container-type: inline-size !important;
}

html[data-page="index"] body.index-page .philosophy-home-hero.philosophy-home-hero
  .philosophy-center-octagon.philosophy-center-octagon span {
  font-size: clamp(10px, 11cqw, 20px) !important;
}

/* 2026-09-16 v71: TOOWIE-Uebersicht bei 400–860px nicht mehr in die alte
   320px-Hoehe pressen; nachfolgende Karten mit klarerem Abschluss. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .toowie-brand-chip {
    font-size: clamp(9px, 1.35vw, 11px) !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity#toowie-identity .capability-scroll-area {
    height: 420px !important;
    min-height: 420px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity#toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    height: 420px !important;
    min-height: 420px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity#toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    flex: 0 0 420px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-stage {
    padding: 12px 14px 14px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo-scene {
    min-height: 235px !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo-shell {
    min-height: 150px !important;
    max-height: 205px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo {
    display: block !important;
    width: min(240px, 94%) !important;
    min-width: 150px !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    min-height: clamp(550px, 78vw, 660px) !important;
    flex-basis: clamp(550px, 78vw, 660px) !important;
    padding-top: 5px !important;
    padding-bottom: 56px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    margin-bottom: 16px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-cta {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
}

/* 2026-09-09: Feinschliff fuer die Startseite bis 399px. */
/* 2026-09-16 v73: Zwischen 400px und 860px die Funktionskarten wieder
   zweispaltig zeigen: Bild links, lesbarer Inhalt inklusive CTA rechts. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: clamp(430px, 52vw, 470px) !important;
    min-height: clamp(430px, 52vw, 470px) !important;
    flex: 0 0 clamp(430px, 52vw, 470px) !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: none !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 8px 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7f0 100%) !important;
    border-left: 1px solid rgba(194,145,64,.22) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-mobile-number {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    margin: 0 0 10px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row h3 {
    padding-bottom: 7px !important;
    font-size: clamp(15px, 2.6vw, 20px) !important;
    line-height: 1.12 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-summary {
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: clamp(11px, 1.8vw, 14px) !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    gap: 6px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    min-height: 0 !important;
    padding: 9px 18px 9px 14px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    font-size: clamp(10px, 1.65vw, 13px) !important;
    line-height: 1.25 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-mobile-detail {
    max-height: 72px !important;
    margin: 0 0 7px !important;
    padding: 7px 8px !important;
    overflow: auto !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) :is(.capability-mobile-detail-title, .capability-mobile-detail-text) {
    font-size: clamp(10px, 1.55vw, 12px) !important;
    line-height: 1.3 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-cta {
    position: static !important;
    align-self: flex-end !important;
    margin: 8px 0 0 auto !important;
    padding: 7px 11px !important;
    min-height: 30px !important;
    font-size: clamp(10px, 1.6vw, 12px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-icon > i {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-browser > .home-scroll-cue {
    display: none !important;
  }
}

@media (max-width: 399px) {
  /* TOOWIE-Box: saubere, bewusst zweizeilige Ueberschrift. */
  html[data-page="index"] body.index-page #toowie-identity #toowie-identity-title {
    max-width: 100% !important;
    padding-inline: 2px !important;
    font-size: clamp(23px, 6.4vw, 26px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity #toowie-identity-title > span {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Story 01–04: Kicker -> Nummer -> Ueberschrift/Logo -> Text. */
  html[data-page="index"] body.index-page .home-story-step-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 9px !important;
    align-items: start !important;
    justify-items: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step-content {
    display: contents !important;
  }

  html[data-page="index"] body.index-page .home-story-step-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step-number {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 2px 0 4px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step h2 {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .home-story-step p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo-fallback {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 0 auto !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step p {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  /* Kontaktmoeglichkeiten: alle Oktagone exakt auf einer Linie,
     Text jeweils direkt rechts daneben. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    width: min(100%, 282px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: stretch !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: stretch !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    grid-column: 1 !important;
    width: 48px !important;
    height: 48px !important;
    justify-self: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    grid-column: 2 !important;
    justify-self: start !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  /* Footer: alle drei Bereiche wirklich auf der Seitenmitte ausrichten. */
  html[data-page="index"] body.index-page .container-footer > div {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-title {
    width: max-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .address-container,
  html[data-page="index"] body.index-page .address-container > a,
  html[data-page="index"] body.index-page .kontaktdaten {
    justify-content: center !important;
  }

  html[data-page="index"] body.index-page .address-text {
    text-align: center !important;
  }
}

/* 2026-09-09: Schritt 04 (TOOWIE) auf <=399px gegen die spezielleren
   alten Zweispalten-Regeln aus pages.css absichern. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-inner {
    display: grid !important;
    width: 92vw !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 9px !important;
    align-items: start !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-content {
    display: contents !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-kicker {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    justify-content: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-number {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 2px auto 4px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo-fallback {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: auto !important;
    margin: 0 auto !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    width: min(32vw, 128px) !important;
    max-width: 128px !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step p {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-self: center !important;
    margin: 8px auto 0 !important;
    text-align: center !important;
  }
}

/* Auf <=399px im TOOWIE-Storyschritt Nummer und Kicker ausblenden. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-kicker,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-number {
    display: none !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo-fallback {
    grid-row: 1 !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-content > p {
    grid-row: 2 !important;
  }
}

/* 2026-09-09: TOOWIE auf sehr kleinen Displays – Logo praesenter und
   die Prozesskarten im Browser nicht mehr als unleserliche 50/50-Spalten. */
@media (max-width: 399px) {
  /* TOOWIE-Logo im Uebergang etwas groesser/praesenter. */
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    width: min(40vw, 154px) !important;
    max-width: 154px !important;
  }

  /* Nur die TOOWIE-Browserbox: Bild oben, Inhalt darunter und mittig ausgerichtet. */
  html[data-page="index"] body.index-page #toowie-identity .capability-scroll-area {
    height: 460px !important;
    min-height: 460px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) {
    height: 460px !important;
    min-height: 460px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 142px minmax(0, 1fr) !important;
    grid-template-areas:
      "image"
      "info" !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image {
    grid-area: image !important;
    width: 100% !important;
    height: 142px !important;
    min-height: 142px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel {
    grid-area: info !important;
    width: 100% !important;
    height: 318px !important;
    min-height: 0 !important;
    padding: 14px 13px 12px !important;
    display: block !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(194, 145, 64, .24) !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row {
    justify-content: center !important;
    gap: 7px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon {
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    font-size: .68rem !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3 {
    margin: 0 !important;
    padding: 0 0 5px !important;
    font-size: 15px !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) h3::after {
    left: 50% !important;
    bottom: 0 !important;
    width: 28px !important;
    height: 2px !important;
    transform: translateX(-50%) !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
    margin: 0 0 2px !important;
    max-width: none !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list {
    width: 100% !important;
    margin: 0 !important;
    gap: 5px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item {
    grid-template-columns: 7px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item::before {
    width: 5px !important;
    height: 5px !important;
    margin-top: 4px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title {
    margin: 0 0 1px !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text {
    font-size: 8.6px !important;
    line-height: 1.26 !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    position: static !important;
    align-self: center !important;
    margin-top: auto !important;
    padding: 5px 9px !important;
    font-size: 8.5px !important;
  }
}

/* 2026-09-09: TOOWIE-Prozesskarten bis 399px in klarer Leserichtung:
   Ueberschrift -> Kurztext -> Querformat-Bild -> drei Infoboxen. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page #toowie-identity .capability-scroll-area {
    height: 500px !important;
    min-height: 500px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) {
    height: 500px !important;
    min-height: 500px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  /* Panel und Content werden nur fuer das Layout "aufgeloest", damit das
     Bild zwischen Kurztext und den drei Boxen einsortiert werden kann. */
  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-panel,
  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-content {
    display: contents !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row {
    order: 1 !important;
    width: calc(100% - 26px) !important;
    margin: 13px 13px 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
    order: 2 !important;
    width: calc(100% - 26px) !important;
    margin: 5px 13px 9px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image {
    order: 3 !important;
    width: calc(100% - 26px) !important;
    height: 132px !important;
    min-height: 132px !important;
    margin: 0 13px 10px !important;
    border: 1px solid rgba(194, 145, 64, .22) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list {
    order: 4 !important;
    width: calc(100% - 26px) !important;
    margin: 0 13px !important;
    display: grid !important;
    gap: 6px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item {
    width: 100% !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    order: 5 !important;
    align-self: center !important;
    margin: 8px auto 0 !important;
  }
}

/* 2026-09-09: <=399px – Verstehen wie die übrigen Prozesskarten anordnen,
   ursprüngliche Kartengröße beibehalten und nur die Schrift in den drei
   Infoboxen vergrößern. */
@media (max-width: 399px) {
  /* 01. Verstehen: die spezifische Zweispalten-Regel aus pages.css neutralisieren,
     ohne die Abmessungen der bisherigen mobilen Karte zu verändern. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) > .capability-slide-panel > .capability-slide-content {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-title-row {
    order: 1 !important;
    width: calc(100% - 26px) !important;
    margin: 13px 13px 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-summary {
    order: 2 !important;
    width: calc(100% - 26px) !important;
    margin: 5px 13px 9px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) > .capability-slide-image {
    order: 3 !important;
    grid-area: auto !important;
    width: calc(100% - 26px) !important;
    height: 132px !important;
    min-height: 132px !important;
    margin: 0 13px 10px !important;
    border: 1px solid rgba(194, 145, 64, .22) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) > .capability-slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-feature-list {
    order: 4 !important;
    width: calc(100% - 26px) !important;
    margin: 0 13px !important;
    display: grid !important;
    gap: 6px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) .capability-slide-cta {
    order: 5 !important;
    position: static !important;
    align-self: center !important;
    margin: 8px auto 0 !important;
  }

  /* Nur die Texte in den drei Infoboxen von Verstehen, Entwickeln,
     Umsetzen, Testen und Weiterentwickeln größer darstellen. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-feature-title {
    font-size: 11px !important;
    line-height: 1.18 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-feature-text {
    font-size: 10px !important;
    line-height: 1.24 !important;
  }
}

/* 2026-09-09: <=399px – TOOWIE-Prozess final ausrichten.
   Die Markenkarte belegt wieder exakt eine komplette Browserhoehe,
   die Schritttitel bleiben wirklich mittig, waehrend das Icon links steht,
   und die Typografie der Prozesskarten wird groesser und besser lesbar. */
@media (max-width: 399px) {
  /* Erste TOOWIE-Markenkarte auf dieselbe Hoehe wie die Prozesskarten bringen,
     damit im Browserfenster nicht bereits der naechste Schritt hineinragt. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    flex: 0 0 500px !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    box-sizing: border-box !important;
  }

  /* Icon bleibt links; nur die eigentliche Schritt-Ueberschrift sitzt exakt
     auf der horizontalen Mitte der Karte. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-title-row {
    position: relative !important;
    display: block !important;
    min-height: 31px !important;
    padding: 0 38px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 29px !important;
    height: 29px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) h3 {
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 6px !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-summary {
    font-size: 11.5px !important;
    line-height: 1.34 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-feature-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+2) .capability-slide-feature-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* 2026-09-09: <=399px – TOOWIE wieder auf die kompakte 320px-Kartenhoehe
   der anderen Browser-Demos bringen. Inhalt bleibt in der mobilen Reihenfolge
   Titel -> Kurztext -> Querformatbild -> drei Infoboxen und nutzt die Breite
   fuer eine deutlich besser lesbare Typografie. */
@media (max-width: 399px) {
  /* Gleiche sichtbare Browserhoehe wie die anderen Funktionsboxen. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area {
    height: 320px !important;
    min-height: 320px !important;
  }

  /* Auch die TOOWIE-Uebersicht belegt exakt eine komplette Kartenhoehe. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    display: block !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    flex: 0 0 320px !important;
    grid-template-rows: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel {
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-stage {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 0 !important;
    padding: 10px 10px 8px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-topline {
    padding-bottom: 5px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-logo-scene {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-logo-shell {
    width: min(78%, 255px) !important;
    height: min(100%, 176px) !important;
    min-height: 0 !important;
    max-height: 176px !important;
    padding: 9px 12px !important;
    border-radius: 18px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-logo {
    width: min(220px, 94%) !important;
    max-height: 82% !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-journey {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 1px !important;
    padding: 8px 0 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-route {
    left: 6.6% !important;
    right: 6.6% !important;
    top: 10px !important;
    bottom: auto !important;
    width: auto !important;
    height: 1px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-step {
    min-height: 0 !important;
    padding: 9px 1px 0 !important;
    display: block !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .toowie-brand-step::before {
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
  }

  /* Prozesskarten: gleiche 320px-Hoehe, aber die gewonnene volle Breite
     wird fuer groessere Schrift und ein Querformatbild genutzt. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    flex: 0 0 320px !important;
    padding: 8px 10px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 30px 16px 66px minmax(0, 1fr) auto !important;
    grid-template-areas: none !important;
    gap: 4px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row {
    grid-row: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 34px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    font-size: .68rem !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) h3 {
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 5px !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) h3::after {
    left: 50% !important;
    width: 28px !important;
    transform: translateX(-50%) !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-row: 3 !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 !important;
    border: 1px solid rgba(194, 145, 64, .22) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list {
    grid-row: 4 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item {
    width: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 6px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-item::before {
    width: 5px !important;
    height: 5px !important;
    margin-top: 4px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-title {
    margin: 0 0 1px !important;
    font-size: 11.5px !important;
    line-height: 1.12 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-text {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    grid-row: 5 !important;
    position: static !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
    padding: 3px 8px !important;
    font-size: 8px !important;
  }
}

/* 2026-09-09: <=399px – Bei Entwickeln, Umsetzen, Testen und
   Weiterentwickeln das Bild wie bei Verstehen ueber die volle
   Kartenbreite anzeigen, ohne die restliche mobile Zentrierung zu aendern. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    padding: 8px 10px 7px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) > .capability-slide-panel > .capability-slide-content {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-title-row {
    order: 1 !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-summary {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 6px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) > .capability-slide-image {
    order: 3 !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 0 6px !important;
    border: 1px solid rgba(194, 145, 64, .22) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) > .capability-slide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-feature-list {
    order: 4 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-cta {
    order: 5 !important;
  }
}

/* 2026-09-09: <=399px – Kurztext ab „02. Entwickeln“ vor dem Querbild
   vollständig sichtbar halten. Die Feature-Liste darf den Flex-Container
   nicht mehr mit height:100% überbelegen und dadurch Kurztext/Bild verdrängen. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-title-row {
    flex: 0 0 auto !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-summary {
    flex: 0 0 auto !important;
    min-height: 15px !important;
    margin: 0 0 7px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) > .capability-slide-image {
    flex: 0 0 66px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(n+3) .capability-slide-feature-list {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}


/* 2026-09-09: <=399px – Ueberschriften in den TOOWIE-Prozesskarten etwas tiefer setzen,
   damit sie optisch nicht so nah am oberen Kartenrand sitzen. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row {
    margin-top: 6px !important;
  }
}

/* 2026-09-09: <=399px – finaler TOOWIE-Prozess-Feinschliff.
   Prozesskarten etwas hoeher, Kurztext dichter an der Ueberschrift und
   mehr Hoehe fuer das Querformatbild. */
@media (max-width: 399px) {
  /* Die sichtbare Browser-/Kartenflaeche etwas vergroessern. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area {
    height: 350px !important;
    min-height: 350px !important;
  }

  /* Die TOOWIE-Uebersicht bekommt dieselbe Scroll-Schritthoehe. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    height: 350px !important;
    min-height: 350px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    flex: 0 0 350px !important;
  }

  /* Alle fuenf Prozesskarten erhalten wieder exakt dasselbe Grundlayout. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    flex: 0 0 350px !important;
    padding: 8px 10px 7px !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  /* Ueberschrift bleibt etwas tiefer, der Kurztext rueckt direkt heran. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-title-row {
    order: 1 !important;
    flex: 0 0 29px !important;
    width: 100% !important;
    min-height: 29px !important;
    margin: 6px 0 -1px !important;
    padding: 0 34px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) h3 {
    padding: 1px 0 2px !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-summary {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 14px !important;
    margin: -1px 0 4px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Mehr sichtbare Bildflaeche, Boxbreite und Rundung bleiben unveraendert. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    order: 3 !important;
    flex: 0 0 90px !important;
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    margin: 0 0 5px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-feature-list {
    order: 4 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    order: 5 !important;
  }

  /* Bildausschnitte: Entwickeln + Umsetzen wie zuvor bei 20%, Testen bei 35%.
     Nur Verstehen und Weiterentwickeln bleiben weiter nach unten ausgerichtet. */
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(2) > .capability-slide-image img,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(6) > .capability-slide-image img {
    object-position: center 50% !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(3) > .capability-slide-image img,
  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(4) > .capability-slide-image img {
    object-position: center 20% !important;
  }

  html[data-page="index"] body.index-page .toowie-product #toowie-identity .capability-scroll-area > .capability-slide:nth-of-type(5) > .capability-slide-image img {
    object-position: center 35% !important;
  }
}

/* 2026-09-09: Kontaktbereich auf kleinsten Displays konsequent untereinander zentrieren. */
@media (max-width: 399px) {
  /* Kontaktwege: Titel -> Kontaktdaten -> Oktagon, danach Abstand zum naechsten Block. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 282px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 30px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    order: 1 !important;
    position: static !important;
    justify-self: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip small {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    order: 2 !important;
    grid-column: auto !important;
    justify-self: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
  }

  /* Formulareingaben und Zeichenzaehler mittig ausrichten. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea label {
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Auch das nach oben wandernde Floating-Label bleibt exakt ueber der Feldmitte. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:not(:placeholder-shown) + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown) + label {
    left: 50% !important;
    right: auto !important;
    top: -15px !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-page="index"] body.index-page #kontakt #charCount {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}

/* 2026-09-10: Mobile Kontaktwege – Titel ueber, Wert unter dem Oktagon. */
@media (max-width: 575px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 3px !important;
    text-align: center !important;
  }

  /* Der bisher gemeinsame Textblock wird auf Mobilgeraeten aufgeloest,
     damit die beiden Textzeilen das Oktagon umschliessen koennen. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    display: contents !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong {
    order: 1 !important;
    color: #0a2850 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    order: 2 !important;
    grid-column: auto !important;
    justify-self: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip small {
    order: 3 !important;
    color: #8a642d !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
}

/* 2026-09-10: Kleinste Kontaktstufe – kompaktere Oktagone und engerer Titel. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    width: 38px !important;
    height: 38px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-mobile-h2 {
    line-height: .84 !important;
  }
}

/* 2026-09-10: Kontaktabschluss zwischen 400 und 860px wie Desktop ausrichten. */
@media (min-width: 400px) and (max-width: 860px) {
  /* Kopf des Kontaktbereichs: Text links mit normalem Abstand, Portrait-Oktagon rechts. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-textblock {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: clamp(188px, 33vw, 340px) !important;
    padding-right: clamp(170px, 30vw, 360px) !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift {
    margin: 0 !important;
    text-align: left !important;
  }

  /* Zwischen 769px und 900px war bisher gleichzeitig die Desktop- und
     Mobile-Ueberschrift sichtbar. In dieser Stufe nur die responsive
     Mobile-Ueberschrift verwenden; ab 901px uebernimmt wieder Desktop. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-desktop-h2 {
    display: none !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-mobile-h2 {
    display: inline-block !important;
    font-size: clamp(1.95rem, 5.15vw, 3.12rem) !important;
    line-height: .8 !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-mobile {
    position: absolute !important;
    top: -18px !important;
    right: -10px !important;
    --size: clamp(160px, 29vw, 340px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    margin: 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    margin: 12px 0 0 !important;
    text-align: left !important;
  }

  /* In dieser Tablet-/Touch-Stufe nur die drei Oktagone anzeigen. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding-bottom: 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    gap: 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    width: 40px !important;
    height: 40px !important;
    font-size: .88rem !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon > svg {
    width: 16px !important;
    height: 16px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    display: block !important;
    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;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Formularabschluss: Datenschutz links, Absende-Button rechts in derselben Zeile. */
  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: clamp(12px, 3vw, 24px) !important;
    align-items: center !important;
  }

  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .row,
  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .clean-kontakt-floating-label-textarea,
  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .contact-honeypot,
  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .clean-kontakt-form-feedback {
    grid-column: 1 / -1 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-privacy-note {
    grid-column: 1 !important;
    margin: 18px 0 2px !important;
    max-width: none !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .text-center {
    grid-column: 2 !important;
    align-self: center !important;
    margin: 0 !important;
    text-align: right !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-btn {
    margin-top: 18px !important;
    padding: 11px clamp(16px, 3vw, 26px) !important;
    font-size: clamp(.88rem, 2vw, 1.05rem) !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 400px) and (max-width: 575px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-textblock {
    min-height: 170px !important;
    padding-right: 150px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-mobile-h2 {
    font-size: clamp(1.9rem, 5.6vw, 2.18rem) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-mobile {
    top: -6px !important;
    right: 0 !important;
    --size: 142px !important;
  }
}

/* 2026-09-10: Kontaktbereich ab 860px abwaerts wie auf der kleinsten Mobile-Stufe zentrieren. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-textblock {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-privacy-note {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    --size: clamp(240px, 35vw, 300px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    margin: 14px auto 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    max-width: 620px !important;
    margin: 18px auto 0 !important;
  }

  /* Kontaktwege mittig; auf Tablet nebeneinander, auf schmaleren Displays untereinander. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: min(100%, 620px) !important;
    margin: 22px auto 0 !important;
    padding-bottom: 0 !important;
    gap: clamp(18px, 4vw, 34px) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 7px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    order: 2 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto !important;
    font-size: 1rem !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip {
    display: contents !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong {
    order: 1 !important;
    color: #0a2850 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip small {
    order: 3 !important;
    color: #8a642d !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  /* Formular selbst wie bei <=399px mittig statt Datenschutz/Button in zwei Spalten. */
  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form {
    display: block !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea label {
    left: 50% !important;
    right: auto !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:not(:placeholder-shown) + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown) + label {
    left: 50% !important;
    right: auto !important;
    text-align: center !important;
    transform: translate(-50%, -50%) !important;
  }

  html[data-page="index"] body.index-page #kontakt #charCount {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-privacy-note {
    margin: 18px auto 2px !important;
    max-width: 680px !important;
  }

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

@media (min-width: 400px) and (max-width: 575px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 282px) !important;
    gap: 26px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice {
    width: 100% !important;
  }
}


/* 2026-09-10 v21: Kontakt bis 860px kompakt zentriert, Kontaktwege immer als reine Oktagon-Reihe. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift {
    margin: 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-mobile-h2 {
    line-height: 1.15 !important;
  }

  /* Das SVG hat konstruktionsbedingt viel Innenraum. Ein kleinerer Layout-Block
     plus vergroessertes SVG behaelt das Portrait gross, ohne grosse Leerabstaende. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-mobile {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    --size: clamp(210px, 28vw, 240px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    margin: 20px auto 0 !important;
  }

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    max-width: 620px !important;
    margin: 6px auto 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    order: 1 !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon > svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Beschriftungen bleiben fuer Screenreader vorhanden, sind optisch aber ausgeblendet. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip small {
    display: block !important;
    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;
    border: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-wrapper {
    margin-top: 26px !important;
  }
}

/* 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-page="index"] body.index-page .clean-kontakt-section.contact--warm {
    padding-top: 36px !important;
    padding-bottom: 78px !important;
  }

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

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift {
    margin: 0 0 1rem !important;
    text-align: left !important;
  }

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

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

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

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    max-width: 620px !important;
    margin: 18px 0 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-choice-octagon {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
  }

  html[data-page="index"] body.index-page #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;
    color: #fff !important;
    background: #0a2850 !important;
    border: 1px solid rgba(216, 183, 127, .35) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(10, 40, 80, .18) !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -4px) !important;
    pointer-events: none !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong,
  html[data-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-choice:hover .clean-kontakt-choice-tooltip,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice:focus-visible .clean-kontakt-choice-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
  }

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

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

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

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontaktformular-wrapper {
    margin-top: clamp(-80px, calc(350px - 43vw), -20px) !important;
  }
}

/* 2026-09-10 v23: Ab 861px bleiben die Kontaktwege immer als reine Oktagon-Reihe.
   Damit ueberschreibt die Startseite auch auf Touch-Geraeten die allgemeine
   hover:none-Regel, die sonst ab 901px die Beschriftungen dauerhaft einblendet. */
@media (min-width: 861px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choices {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(9px, 1.1vw, 12px) !important;
  }

  html[data-page="index"] body.index-page #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-page="index"] body.index-page #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;
    color: #fff !important;
    background: #0a2850 !important;
    border: 1px solid rgba(216, 183, 127, .35) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(10, 40, 80, .18) !important;
    text-align: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -4px) !important;
    pointer-events: none !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice-tooltip strong,
  html[data-page="index"] body.index-page #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-page="index"] body.index-page #kontakt .clean-kontakt-choice:hover .clean-kontakt-choice-tooltip,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-choice:focus-visible .clean-kontakt-choice-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
  }
}

/* 2026-09-10 v27: Startseite <=399px – alle Hauptabschnitte folgen der
   gleichen mobilen Leserichtung wie der Einstiegs-Hero: Text links,
   Visual mittig, Aktionen volle Breite, Dreier-Vorteile gleichmaessig verteilt. */
@media (max-width: 399px) {
  /* Uebergangs-/Storyabschnitte 01–04 */
  html[data-page="index"] body.index-page .home-story-step {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html[data-page="index"] body.index-page .home-story-step-inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .home-story-step-kicker {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step .home-story-step-number,
  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step h2,
  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step p {
    width: 100% !important;
    max-width: none !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step h2 {
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-page="index"] body.index-page :is(#idee-erreichen, #idee-ermoeglichen, #idee-erweitern).home-story-step p {
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  /* TOOWIE-Uebergang: Logo bleibt wie das Visual im Einstiegs-Hero mittig,
     der beschreibende Text beginnt links. */
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-inner {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo-fallback {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step p,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-content > p {
    width: 100% !important;
    max-width: none !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  /* Produkt-Heroes: gleiche Breite und Leserichtung wie ganz oben. */
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) > .shell.hero-grid {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: flex-start !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .eyebrow {
    align-self: flex-start !important;
    justify-self: start !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-copy h1,
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-subline,
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-lead {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-copy h1,
  html[data-page="index"] body.index-page #toowie-identity #toowie-identity-title {
    padding-inline: 0 !important;
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    margin: 22px 0 22px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-subline {
    margin: 0 0 12px !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-lead {
    margin: 0 !important;
    font-size: .96rem !important;
    line-height: 1.62 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions {
    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-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions .btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    gap: 4px !important;
    margin: 26px 0 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points span {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: clamp(9px, 3.05vw, 12px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points i {
    flex: 0 0 auto !important;
    font-size: clamp(11px, 3.5vw, 14px) !important;
  }

  /* Kontaktabschluss: bis 399px Text zentrieren; Portrait bleibt mittig. */
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-textblock,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-privacy-note {
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea {
    text-align: left !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea label {
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    text-align: left !important;
    transform: translateY(-50%) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-form-control:not(:placeholder-shown) + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:focus + label,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-floating-label-textarea textarea:not(:placeholder-shown) + label {
    left: 16px !important;
    right: auto !important;
    text-align: left !important;
    transform: translateY(-50%) !important;
  }

  html[data-page="index"] body.index-page #kontakt #charCount {
    text-align: right !important;
  }

  html[data-page="index"] body.index-page #kontakt #clean-kontakt-form > .text-center,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-btn {
    width: 100% !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-btn {
    min-height: 54px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
  }
}

/* 2026-09-10 v28: <=399px – Unterueberschrift direkt unter der Hauptueberschrift,
   erst danach folgt das jeweilige Bild/Visual. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-copy h1 {
    order: 1 !important;
    margin-bottom: 6px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-subline {
    order: 2 !important;
    margin: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-visual {
    order: 3 !important;
    margin: 20px 0 22px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-lead {
    order: 4 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-actions {
    order: 5 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-points {
    order: 6 !important;
  }
}


/* 2026-09-10 v31: <=399px – Karten-Footer fuer die Startseite.
   Kontakt, Technisch und Operativ als drei ruhige, gleich breite Bloecke. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .footer {
    padding-top: 32px !important;
    padding-bottom: 16px !important;
  }

  html[data-page="index"] body.index-page .container-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    justify-items: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-bottom: 28px !important;
  }

  /* Kontakt bekommt bewusst die volle Zeile und wirkt dadurch als Anker. */
  html[data-page="index"] body.index-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;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(216, 183, 127, .18) !important;
    border-radius: 16px !important;
  }

  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .footer-title {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
    font-size: 1.32rem !important;
  }

  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .footer-list {
    display: grid !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .footer-list li,
  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .footer-list li a,
  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .address-text {
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .address-container,
  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .address-container > a,
  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie .kontaktdaten {
    justify-content: flex-start !important;
  }

  /* Technisch und Operativ greifen die gleiche Kartenoptik wie der Kontaktblock auf. */
  html[data-page="index"] body.index-page .footer-gewusst-wie,
  html[data-page="index"] body.index-page .footer-service {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: center !important;
    text-align: left !important;
    padding: 18px 18px 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(216, 183, 127, .18) !important;
    border-radius: 16px !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-title,
  html[data-page="index"] body.index-page .footer-service .footer-title {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    text-align: center !important;
    font-size: 1.22rem !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list,
  html[data-page="index"] body.index-page .footer-service .footer-list {
    display: grid !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list li,
  html[data-page="index"] body.index-page .footer-service .footer-list li {
    width: auto !important;
    min-width: 0 !important;
    margin: 6px 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list li a,
  html[data-page="index"] body.index-page .footer-service .footer-list li a {
    display: inline !important;
    max-width: 100% !important;
    font-size: .98rem !important;
    line-height: 1.4 !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
  }

  /* Rechtliches bleibt als ruhige, horizontale Abschlusszeile. */
  html[data-page="index"] body.index-page .footer-rechtliches .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-rechtliches .nav-item,
  html[data-page="index"] body.index-page .footer-rechtliches .nav-link {
    width: auto !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-rechtliches .nav-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: .9rem !important;
  }

  html[data-page="index"] body.index-page .footer-rechtliches > p.text-center {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    font-size: .9rem !important;
  }
}

/* 2026-09-10 v32: <=399px – Technisch und Operativ nebeneinander,
   beide Karteninhalte zentriert; Formularueberschrift mittig. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page .container-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 16px !important;
  }

  html[data-page="index"] body.index-page .footer-unternehmensprofil-toowie {
    grid-column: 1 / -1 !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie,
  html[data-page="index"] body.index-page .footer-service {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    padding: 16px 9px 14px !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-title,
  html[data-page="index"] body.index-page .footer-service .footer-title {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list,
  html[data-page="index"] body.index-page .footer-service .footer-list {
    width: 100% !important;
    max-width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list li,
  html[data-page="index"] body.index-page .footer-service .footer-list li,
  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list li a,
  html[data-page="index"] body.index-page .footer-service .footer-list li a {
    width: 100% !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .footer-gewusst-wie .footer-list li a,
  html[data-page="index"] body.index-page .footer-service .footer-list li a {
    display: block !important;
    font-size: clamp(.84rem, 3.55vw, .96rem) !important;
    line-height: 1.35 !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift .heading-mobile-h2 {
    width: 100% !important;
    text-align: center !important;
  }
}

/* 2026-09-10 v33: Startseite <=399px – kompakte, interaktive Capability-Karten.
   Reihenfolge: Nummer -> grosse Ueberschrift -> Kurztext -> groesseres Bild ->
   drei klickbare Kurzpunkte -> aufklappbare Erklaerung. Die TOOWIE-Logo-Karte
   bleibt gestalterisch unveraendert und wird nur auf dieselbe Scroll-Hoehe gebracht. */
html[data-page="index"] body.index-page .capability-mobile-number,
html[data-page="index"] body.index-page .capability-mobile-detail {
  display: none;
}

@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area {
    height: 450px !important;
    min-height: 450px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
    flex: 0 0 450px !important;
    padding: 10px 10px 9px !important;
    gap: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel,
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-number {
    order: 1 !important;
    display: block !important;
    align-self: center !important;
    margin: 0 0 2px !important;
    color: #c29140 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .18em !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-icon {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row h3 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 7px !important;
    font-size: clamp(19px, 5.7vw, 22px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
  }

  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-heading-number-prefix {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row h3::after {
    left: 50% !important;
    bottom: 0 !important;
    width: 32px !important;
    height: 2px !important;
    transform: translateX(-50%) !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus#it-systemhaus .speech-recognition-intro {
    display: contents !important;
  }

  html[data-page="index"] body.index-page .toowie-product #it-systemhaus#it-systemhaus .speech-recognition-intro .capability-slide-quote {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-summary {
    order: 3 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 3px !important;
    color: #17364f !important;
    font-size: clamp(10px, 2.85vw, 11.2px) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    order: 4 !important;
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    min-height: 180px !important;
    flex: 0 0 180px !important;
    margin: 0 0 8px !important;
    border: 1px solid rgba(194,145,64,.28) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f7f1e8 !important;
    box-shadow: 0 8px 22px rgba(5,20,35,.12) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-list {
    order: 5 !important;
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: minmax(58px, auto) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 17px 16px 8px !important;
    border: 1px solid rgba(194,145,64,.24) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.055) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
    -webkit-tap-highlight-color: transparent;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item:focus-visible,
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item.is-mobile-open {
    border-color: rgba(194,145,64,.78) !important;
    background: rgba(194,145,64,.12) !important;
    outline: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item:active {
    transform: scale(.985) !important;
  }

  /* Haken links und klares Plus/Minus rechts zeigen sofort, dass die Box anklickbar ist. */
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item::before {
    content: "✓" !important;
    position: absolute !important;
    left: 7px !important;
    top: 7px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #c29140 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item::after {
    content: "+" !important;
    position: absolute !important;
    right: 6px !important;
    top: 5px !important;
    display: grid !important;
    place-items: center !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid rgba(194,145,64,.48) !important;
    border-radius: 50% !important;
    color: #c29140 !important;
    background: rgba(5,22,38,.24) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item.is-mobile-open::after {
    content: "−" !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #8f621d !important;
    font-size: clamp(8.4px, 2.55vw, 10px) !important;
    line-height: 1.16 !important;
    font-weight: 750 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-text {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-detail {
    order: 6 !important;
    display: block !important;
    width: 100% !important;
    max-height: 68px !important;
    margin: 6px 0 0 !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(194,145,64,.28) !important;
    border-radius: 9px !important;
    background: rgba(194,145,64,.08) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-detail[hidden] {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-detail-title {
    display: block !important;
    margin: 0 0 2px !important;
    color: #c29140 !important;
    font-size: 9.5px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-detail-text {
    display: block !important;
    color: #4d6174 !important;
    font-size: 9.2px !important;
    line-height: 1.28 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-cta {
    order: 7 !important;
    position: static !important;
    align-self: center !important;
    margin: auto auto 0 !important;
    padding: 5px 10px !important;
    font-size: 8.8px !important;
    line-height: 1.1 !important;
  }

  /* Erste TOOWIE-Seite mit Logo nicht redesignen – nur gleiche Snap-/Viewport-Hoehe. */
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    height: 450px !important;
    min-height: 450px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    flex: 0 0 450px !important;
  }
}


/* 2026-09-10 v34: <=860px – niedrigere Karten, Chevron statt Plus, Details erweitern nach unten. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area {
    height: 380px !important;
    min-height: 0 !important;
    transition: height .18s ease !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    padding: 9px 10px 10px !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-list {
    grid-template-rows: minmax(44px, auto) !important;
    min-height: 44px !important;
    gap: 6px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item {
    min-height: 44px !important;
    padding: 8px 17px 8px 15px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item::before {
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 8px !important;
  }

  /* Dezenter Chevron statt Plus/Minus: zeigt Aufklappen, ohne wie eine Aktionstaste zu wirken. */
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item::after {
    content: "▾" !important;
    right: 6px !important;
    top: 50% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #b77918 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    transform: translateY(-50%) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-feature-item.is-mobile-open::after {
    content: "▴" !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-detail {
    max-height: none !important;
    margin-top: 7px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-cta {
    margin: 8px auto 0 !important;
  }
}

/* 2026-09-10 v36: <=399px – nur die TOOWIE-Startansicht direkt
   auf die kompakte Hoehe der nachfolgenden Prozesskarte setzen. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide > .capability-slide-panel,
  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide .toowie-brand-stage {
    height: 320px !important;
    min-height: 320px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity#toowie-identity .capability-scroll-area > .toowie-meaning-slide {
    flex: 0 0 320px !important;
  }
}

/* 2026-09-14 v40: Startseite bis 700px – Hauptueberschriften der vier blauen Bereiche
   einheitlich kraeftig, passend zur mobilen Darstellung. */
@media (max-width: 700px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) > .shell.hero-grid h1,
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) > .shell.hero-grid h1 span {
    font-weight: 800 !important;
  }
}

/* 2026-09-13 v38: Startseite <=399px – Nummern der weissen Storyabschnitte
   und das TOOWIE-Logo optisch kraeftiger fuer bessere Lesbarkeit. */
@media (max-width: 399px) {
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-number {
    font-weight: 800 !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo {
    filter:
      drop-shadow(.45px 0 0 #c69b5a)
      drop-shadow(-.45px 0 0 #c69b5a)
      drop-shadow(0 .45px 0 #c69b5a)
      drop-shadow(0 -.45px 0 #c69b5a) !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo-fallback {
    font-weight: 800 !important;
  }
}

/* 2026-09-14 v40: Startseite bis 700px – Ueberschriften der weissen
   Storyabschnitte 01–03 kraeftiger darstellen. */
@media (max-width: 700px) {
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2,
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2 span {
    font-weight: 800 !important;
  }
}


/* 2026-09-14 v41: Startseite 400–700px – TOOWIE-Logo wie auf <=399px optisch kraeftiger. */
@media (min-width: 400px) and (max-width: 700px) {
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo {
    filter:
      drop-shadow(.45px 0 0 #c69b5a)
      drop-shadow(-.45px 0 0 #c69b5a)
      drop-shadow(0 .45px 0 #c69b5a)
      drop-shadow(0 -.45px 0 #c69b5a) !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo-fallback {
    font-weight: 800 !important;
  }
}

/* 2026-09-17 v88: Startseite bis 700px – Vorteilstexte unter den Buttons
   bleiben wie auf groesseren Viewports grau; nur die Haken sind gold. */
@media (max-width: 700px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .hero-points span {
    color: rgba(255,255,255,.72) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .hero-points i {
    color: var(--gold) !important;
  }

  html[data-page="index"] body.index-page .philosophy-home-hero .philosophy-path-item strong {
    color: rgba(255,255,255,.72) !important;
  }

  html[data-page="index"] body.index-page .philosophy-home-hero .philosophy-path-item[href]::before {
    color: #c69a57 !important;
  }
}

/* 2026-09-14 v45: Startseite bis 700px – sauberer System-Font-Stack
   ohne externe Webfont. iOS nutzt die Apple-Systemschrift, Windows Segoe UI;
   Arial/Helvetica dienen als Fallback. Schriftgroessen und Layout bleiben gleich. */
@media (max-width: 700px) {
  html[data-page="index"] body.index-page main :is(h1, h2, h3),
  html[data-page="index"] body.index-page main :is(h1, h2, h3) :is(span, strong, a),
  html[data-page="index"] body.index-page .index-hero .philosophy-home-title,
  html[data-page="index"] body.index-page .index-hero .philosophy-home-title :is(span, strong) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none;
  }
}

/* 2026-09-14 v46: Startseite mobil – Ueberschrift in Storyabschnitt 01
   typografisch an den Einstiegs-Hero angleichen. Inhalt/Farben bleiben unveraendert. */
@media (max-width: 700px) {
  html[data-page="index"] body.index-page #idee-erreichen#idee-erreichen .home-story-step-content h2,
  html[data-page="index"] body.index-page #idee-erreichen#idee-erreichen .home-story-step-content h2 span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  html[data-page="index"] body.index-page #idee-erreichen#idee-erreichen .home-story-step-content h2 {
    font-size: clamp(27px, 8.5vw, 32px) !important;
  }
}

/* 2026-09-14 v47: Startseite mobil – die funktionierende Typografie aus Story 01
   auf alle relevanten Startseiten-Ueberschriften uebertragen. Schriftgroessen
   der bestehenden Bereiche bleiben erhalten; Story 02/03 entsprechen Story 01. */
@media (max-width: 700px) {
  /* Weisse Storyabschnitte 01–03 */
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2,
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2 span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2 {
    font-size: clamp(27px, 8.5vw, 32px) !important;
  }

  /* Blaue Hauptbereiche */
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) h1,
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) h1 span,
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager#akquise-manager,
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  /* TOOWIE-Textfallback ebenfalls in derselben Staerke. */
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo-fallback {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
  }

  /* Goldene SVG-Logos im Storyabschnitt etwas kraeftiger.
     Das Navigationslogo bleibt bewusst in seiner originalen Strichstaerke. */
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo {
    filter:
      drop-shadow(.55px 0 0 #c69b5a)
      drop-shadow(-.55px 0 0 #c69b5a)
      drop-shadow(0 .55px 0 #c69b5a)
      drop-shadow(0 -.55px 0 #c69b5a) !important;
  }
}

/* 2026-09-14 v50: Capability-Karten <=860px – Symbol direkt vor der Ueberschrift.
   Durch die gleich breite Ausgleichsspalte rechts bleibt die Ueberschrift
   optisch exakt in der Kartenmitte. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-mobile-number {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row {
    display: grid !important;
    grid-template-columns: 34px minmax(0, auto) 34px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px !important;
    width: 100% !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row::after {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-icon {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border: 1.5px solid rgba(194,145,64,.48) !important;
    border-radius: 50% !important;
    color: #b77918 !important;
    background: #fffdf8 !important;
    font-size: .9rem !important;
    box-shadow: 0 5px 14px rgba(194,145,64,.10) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus#it-systemhaus, #website-entwicklung#website-entwicklung, #toowie-identity#toowie-identity) .capability-slide-title-row h3 {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* 2026-09-14 v54: Startseite <=399px – dieselbe mobile Textgroesse in den
   Capability-Karten von IT, technischen Erweiterungen und TOOWIE. Die zuvor
   zusaetzlich erhoehte Schriftstaerke der IT-Vorteilsboxen wurde rueckgaengig
   gemacht; die bestehende Grundstaerke bleibt unveraendert. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-summary,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-title,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-text {
    font-size: 14px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-summary,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-text {
    line-height: 1.45 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }
}


/* 2026-09-14 v57: <=399px – Nur der aufgeklappte Detailbereich nutzt
   dieselbe gut lesbare Schriftgroesse wie die Beschreibung (14px).
   Die Beschriftungen der anklickbaren Boxen bleiben kompakt bei 12px. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    padding-left: 8px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-item::before {
    content: none !important;
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-title,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-text {
    font-size: 14px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-cta {
    font-size: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-title,
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-title {
    font-weight: 400 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-mobile-detail-text {
    line-height: 1.38 !important;
  }
}

/* 2026-09-14 v58: <=399px – Symbole aller drei Capability-Bereiche exakt
   auf die sichtbare Ueberschriftszeile zentrieren und die Beschriftungen
   der drei anklickbaren Vorteilskarten fett darstellen. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-icon {
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row h3 {
    padding-bottom: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row h3::after {
    bottom: -7px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    font-weight: 700 !important;
  }
}

/* 2026-09-14 v59: <=399px – die kleinen Symbole in den drei Capability-Karten
   komplett ausblenden. Die Ueberschrift bleibt ohne Ausgleichsspalte mittig. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-icon {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row::after {
    content: none !important;
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row h3 {
    justify-self: center !important;
    text-align: center !important;
  }
}

/* 2026-09-16 v61: Bis 399px nur die vier Produkt-H1 an die unveraenderte
   Groesse des Einstiegs-Heros angleichen. */
@media (max-width: 399.98px) {
  html[data-page="index"] body.index-page .toowie-product :is(#akquise-manager, #it-systemhaus, #website-entwicklung, #toowie-identity) .hero-copy h1,
  html[data-page="index"] body.index-page #toowie-identity #toowie-identity-title {
    font-size: clamp(27px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
  }

  /* Octagons: Goldzeile kompakter, Beschreibung wie der Hero-Fliesstext,
     TOOWIE im mittleren Octagon etwas praesenter. */
  html[data-page="index"] body.index-page .philosophy-home-hero .philosophy-orbit-kicker {
    font-size: clamp(9px, 2.65vw, 11px) !important;
  }

  html[data-page="index"] body.index-page .philosophy-home-hero .philosophy-orbit small {
    font-size: var(--hero-body-copy-size) !important;
  }

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

/* 2026-09-16 v67: Mobile Trennlinien und grosszuegigere Capability-Karten. */
@media (max-width: 860px) {
  /* Oberhalb jedes blauen Produkt-Heros: Gold in der Mitte, weich auslaufend. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #akquise-manager,
    #it-systemhaus,
    #website-entwicklung,
    #toowie-identity
  ).hero::before {
    content: "" !important;
    position: absolute !important;
    z-index: 6 !important;
    top: 0 !important;
    left: 5% !important;
    width: 90% !important;
    height: 3px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(194, 145, 64, .22) 12%,
      rgba(221, 177, 98, .92) 50%,
      rgba(194, 145, 64, .22) 88%,
      transparent 100%) !important;
    box-shadow: 0 1px 8px rgba(194, 145, 64, .2) !important;
  }
}

@media (max-width: 399.98px) {
  html[data-page="index"] body.index-page #kontakt #charCount {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area {
    height: clamp(520px, 74vw, 640px) !important;
    min-height: clamp(520px, 74vw, 640px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    min-height: clamp(520px, 74vw, 640px) !important;
    flex-basis: clamp(520px, 74vw, 640px) !important;
    padding: 14px 14px 28px !important;
    overflow: hidden !important;
    border-bottom: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    height: clamp(230px, 38vw, 330px) !important;
    min-height: clamp(230px, 38vw, 330px) !important;
    flex-basis: clamp(230px, 38vw, 330px) !important;
    margin-bottom: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-list {
    grid-template-rows: minmax(62px, auto) !important;
    min-height: 62px !important;
    margin-bottom: 12px !important;
    gap: 9px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    min-height: 62px !important;
    padding: 12px 20px !important;
  }

  /* Deutlichere, ebenfalls weich auslaufende Trennung unter jeder Karte. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 8% !important;
    bottom: 8px !important;
    width: 84% !important;
    height: 3px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(194, 145, 64, .4) 14%,
      #c29140 50%,
      rgba(194, 145, 64, .4) 86%,
      transparent 100%) !important;
  }
}

/* 2026-09-16 v69: finale Breakpoint-Regeln nach allen aelteren Overrides. */
@media (max-width: 860px) {
  html[data-page="index"] body.index-page #toowie-identity :is(
    .toowie-brand-kicker,
    .toowie-brand-topline-text,
    .toowie-brand-chip,
    .toowie-brand-step b,
    .toowie-brand-step strong
  ) {
    font-size: clamp(12px, 1.8vw, 15px) !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-step strong {
    line-height: 1.22 !important;
    white-space: normal !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    padding-top: 8px !important;
    padding-bottom: 40px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-slide-summary {
    margin-bottom: 12px !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide)::after {
    bottom: 10px !important;
  }

  html[data-page="index"] body.index-page #toowie-identity .toowie-brand-logo {
    width: min(220px, 94%) !important;
    max-width: 94% !important;
    height: auto !important;
    max-height: 82% !important;
    object-fit: contain !important;
  }

  html[data-page="index"] body.index-page #wer-ist-toowie .home-story-step-logo {
    width: clamp(150px, 28vw, 220px) !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* 2026-09-16 v82: IT-Systemhaus + technische Erweiterungen zwischen 400px und 860px wie Desktop-Vorschau darstellen */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area {
    height: clamp(420px, 62vw, 520px) !important;
    min-height: clamp(420px, 62vw, 520px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "image info" !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel {
    grid-area: info !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(14px, 2.5vw, 24px) !important;
    border: 0 !important;
    border-left: 1px solid rgba(194,145,64,.20) !important;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7f0 100%) !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 54px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page :is(#it-systemhaus, #website-entwicklung) .capability-mobile-number,
  html[data-page="index"] body.index-page :is(#it-systemhaus, #website-entwicklung) .capability-mobile-detail {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-title-row {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.9vw, 18px) !important;
    width: 100% !important;
    margin: 0 0 clamp(10px, 1.8vw, 16px) !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 clamp(34px, 5vw, 46px) !important;
    width: clamp(34px, 5vw, 46px) !important;
    height: clamp(34px, 5vw, 46px) !important;
    border: 1.5px solid rgba(194,145,64,.48) !important;
    border-radius: 50% !important;
    background: #fffdf8 !important;
    color: #b77918 !important;
    font-size: clamp(.84rem, 2vw, 1.1rem) !important;
    box-shadow: 0 6px 16px rgba(194,145,64,.10) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-title-row h3 {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c29140 !important;
    font-size: clamp(1rem, 2.5vw, 1.7rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-title-row h3::after {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-summary {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(10px, 1.8vw, 16px) !important;
    padding: 0 !important;
    color: #17364f !important;
    font-size: clamp(.74rem, 1.45vw, .98rem) !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-area: image !important;
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f7f1e8 !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-list {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(8px, 1.3vw, 10px) !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: clamp(10px, 1.8vw, 16px) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: clamp(8px, 1.3vw, 11px) clamp(10px, 1.7vw, 14px) !important;
    border: 1px solid rgba(194,145,64,.16) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: default !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item:focus-visible,
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item.is-mobile-open,
  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item:active {
    border-color: rgba(194,145,64,.24) !important;
    background: #fff !important;
    outline: none !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: clamp(6px, 1vw, 8px) !important;
    height: clamp(6px, 1vw, 8px) !important;
    margin: .45em 0 0 !important;
    border-radius: 50% !important;
    background: #c29140 !important;
    border: 0 !important;
    box-shadow: 0 0 0 4px rgba(194,145,64,.12) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item::after {
    display: none !important;
    content: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-item > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-title {
    display: block !important;
    margin: 0 0 2px !important;
    color: #8f621d !important;
    font-size: clamp(.74rem, 1.35vw, .92rem) !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-feature-text {
    display: block !important;
    color: #4d6174 !important;
    font-size: clamp(.64rem, 1.22vw, .82rem) !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(#it-systemhaus, #website-entwicklung) .capability-slide-cta {
    position: absolute !important;
    right: clamp(14px, 2.5vw, 22px) !important;
    bottom: clamp(14px, 2.4vw, 20px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: clamp(.68rem, 1.2vw, .8rem) !important;
  }
}

/* 2026-09-16 v83: Website-Erweiterungen 400–860px wie direkt oberhalb des
   Breakpoints: Bild links randlos/flaechenfuellend, Inhalt rechts, Vorteilsboxen weiss. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product
  #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  .capability-slide-feature-item {
    background: #fff !important;
  }
}

/* 2026-09-16 v84: 400–860px – gleiche zweispaltige Darstellung in den
   Bereichen 02–04. Die TOOWIE-Startgrafik bleibt unveraendert; erst die
   Prozesskarten ab „01. Verstehen“ erhalten Bild links und Inhalt rechts. */
@media (min-width: 400px) and (max-width: 860px) {
  /* TOOWIE-Logo im Storyabschnitt 04 mittig in seiner Ueberschriftsspalte. */
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo-fallback {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* 02 IT + 03 Erweiterungen: Bild wirklich randlos und flaechenfuellend. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    grid-template-areas: "image info" !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-area: image !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-feature-item {
    background: #fff !important;
  }

  /* 04 TOOWIE: die erste Marken-/Hintergrundansicht bewusst nicht anfassen.
     Nur „Verstehen“ bis „Weiterentwickeln“ wie die Bereiche 02/03 aufbauen. */
  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%) !important;
    grid-template-areas: "image info" !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel {
    grid-area: info !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(14px, 2.5vw, 24px) !important;
    border: 0 !important;
    border-left: 1px solid rgba(194,145,64,.20) !important;
    background: linear-gradient(180deg, #fffdf9 0%, #fbf7f0 100%) !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 0 54px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-title-row {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.9vw, 18px) !important;
    width: 100% !important;
    margin: 0 0 clamp(10px, 1.8vw, 16px) !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 clamp(34px, 5vw, 46px) !important;
    width: clamp(34px, 5vw, 46px) !important;
    height: clamp(34px, 5vw, 46px) !important;
    border: 1.5px solid rgba(194,145,64,.48) !important;
    border-radius: 50% !important;
    background: #fffdf8 !important;
    color: #b77918 !important;
    font-size: clamp(.84rem, 2vw, 1.1rem) !important;
    box-shadow: 0 6px 16px rgba(194,145,64,.10) !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-title-row h3 {
    width: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #c29140 !important;
    font-size: clamp(1rem, 2.5vw, 1.7rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-title-row h3::after {
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-summary {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(10px, 1.8vw, 16px) !important;
    padding: 0 !important;
    color: #17364f !important;
    font-size: clamp(.74rem, 1.45vw, .98rem) !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image {
    grid-area: image !important;
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #f7f1e8 !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-list {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(8px, 1.3vw, 10px) !important;
    overflow: hidden !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: clamp(10px, 1.8vw, 16px) minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: clamp(8px, 1.3vw, 11px) clamp(10px, 1.7vw, 14px) !important;
    border: 1px solid rgba(194,145,64,.16) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: default !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-item::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: clamp(6px, 1vw, 8px) !important;
    height: clamp(6px, 1vw, 8px) !important;
    margin: .45em 0 0 !important;
    border-radius: 50% !important;
    background: #c29140 !important;
    border: 0 !important;
    box-shadow: 0 0 0 4px rgba(194,145,64,.12) !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-item::after {
    display: none !important;
    content: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-title {
    display: block !important;
    margin: 0 0 2px !important;
    color: #8f621d !important;
    font-size: clamp(.74rem, 1.35vw, .92rem) !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-feature-text {
    display: block !important;
    color: #4d6174 !important;
    font-size: clamp(.64rem, 1.22vw, .82rem) !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product
  #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  .capability-slide-cta {
    position: absolute !important;
    right: clamp(14px, 2.5vw, 22px) !important;
    bottom: clamp(14px, 2.4vw, 20px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: clamp(.68rem, 1.2vw, .8rem) !important;
  }
}

/* 2026-09-16 v85: 400–860px – Story-Logo 04 wieder links ausrichten und
   goldene Trennlinien in den randlosen Bild/Text-Karten 02–04 entfernen. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo,
  html[data-page="index"] body.index-page #wer-ist-toowie#wer-ist-toowie .home-story-step-logo-fallback {
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel {
    border-left: 0 !important;
  }
}

/* 2026-09-16 v86: 400–860px – CTA-Groesse in 02–04 vereinheitlichen und
   den Goldpunkt direkt an der Ueberschrift statt am Kartenrand ausrichten. */
@media (min-width: 400px) and (max-width: 860px) {
  /* Der Punkt gehoert optisch zur Ueberschrift. Den bisherigen Punkt am
     Feature-Container abschalten und stattdessen im Titel selbst zeichnen. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item::before {
    content: none !important;
    display: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    display: block !important;
    padding-left: clamp(10px, 1.7vw, 14px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-title::before {
    content: "" !important;
    display: inline-block !important;
    width: clamp(6px, 1vw, 8px) !important;
    height: clamp(6px, 1vw, 8px) !important;
    margin: 0 .5em 0 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #c29140 !important;
    box-shadow: 0 0 0 4px rgba(194,145,64,.12) !important;
    vertical-align: middle !important;
  }

  /* Alle CTA-Buttons in den zweispaltigen Karten haben dieselbe kompakte
     Groesse und koennen weder auf Kartenbreite noch Kartenhoehe wachsen. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    position: absolute !important;
    right: clamp(14px, 2.5vw, 22px) !important;
    bottom: clamp(14px, 2.4vw, 20px) !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;
    justify-self: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    font-size: clamp(.68rem, 1.2vw, .8rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

/* 2026-09-16 v87: 400–860px – Beschreibungstext an der Textkante der
   Vorteils-Ueberschrift ausrichten; Goldpunkt mittig zur Ueberschrift.
   In 02/03 die Symbole vor den Hauptueberschriften exakt vertikal zentrieren.
   Der TOOWIE-Prozess in 04 bleibt bei der bestehenden Symbolausrichtung. */
@media (min-width: 400px) and (max-width: 860px) {
  /* Vorteilskarten 02–04: Punkt mittig zur gesamten Ueberschrift und
     Beschreibung exakt unter dem Ueberschriftstext statt unter dem Punkt. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-title {
    position: relative !important;
    display: block !important;
    padding-left: calc(clamp(6px, 1vw, 8px) + .5em) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-title::before {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    vertical-align: baseline !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-text {
    padding-left: calc(clamp(6px, 1vw, 8px) + .5em) !important;
  }

  /* Nur 02 IT und 03 Erweiterungen: Symbolkreis samt Icon auf die Mitte
     der sichtbaren Hauptueberschrift ausrichten. 04 TOOWIE bleibt unangetastet. */
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.9vw, 18px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-icon {
    position: static !important;
    display: inline-flex !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 clamp(34px, 5vw, 46px) !important;
    width: clamp(34px, 5vw, 46px) !important;
    height: clamp(34px, 5vw, 46px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-icon > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-title-row h3 {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung
  ) .capability-slide-title-row::after {
    content: none !important;
    display: none !important;
  }
}

/* 2026-09-17 v89: Kontakt-Ueberschriften typografisch an die beigen
   Story-Boxen angleichen. */
html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2),
html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(22px, min(6vw, calc(45.87px + 1.3191vw)), 71.2px) !important;
  font-weight: 780 !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
}

@media (max-width: 700px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2),
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

/* „Unverbindlich anfragen“ behaelt auf grossen Ansichten seine bisherige
   Groesse. Bis 860px folgt es dagegen exakt der Abschnitts-Ueberschrift,
   damit es im iPad-Hochformat und auf Handys nicht groesser herausspringt. */
html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
}

@media (max-width: 980px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 860px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
    font-size: clamp(22px, min(6vw, calc(45.87px + 1.3191vw)), 71.2px) !important;
  }
}

@media (max-width: 399px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2),
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift,
  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-ueberschrift :is(.heading-desktop-h2, .heading-mobile-h2) {
    font-size: clamp(27px, 7.6vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

html[data-page="index"] body.index-page #kontakt #charCount {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}

/* 2026-09-17 v92: In den zweispaltigen Karten von 400 bis 860px bekommt
   der CTA eine eigene Zeile unter den drei Vorteilsboxen. Er darf nicht
   mehr absolut ueber der letzten Box liegen. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) > .capability-slide-panel > .capability-slide-content {
    padding-bottom: 0 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-title-row {
    order: 1 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-summary {
    order: 2 !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-list {
    order: 3 !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: unset !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    gap: clamp(6px, 1vw, 8px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-slide-feature-item {
    min-height: 0 !important;
    height: 100% !important;
    padding-top: clamp(6px, 1vw, 9px) !important;
    padding-bottom: clamp(6px, 1vw, 9px) !important;
  }

  html[data-page="index"] body.index-page .toowie-product :is(
    #it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus#it-systemhaus,
    #website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung#website-entwicklung,
    #toowie-identity#toowie-identity#toowie-identity#toowie-identity#toowie-identity
  ) .capability-scroll-area > .capability-slide:not(.toowie-meaning-slide) .capability-slide-cta {
    position: static !important;
    inset: auto !important;
    order: 4 !important;
    align-self: flex-end !important;
    justify-self: auto !important;
    margin: clamp(8px, 1.3vw, 10px) 0 0 auto !important;
  }
}

/* 2026-09-17 v95: Zwischen 861 und 922px Bild und zweizeilige Ueberschrift
   gemeinsam erhalten. Die kompakte Bildspalte schafft den Textplatz; das
   SVG wird darin vergroessert, damit sein unsichtbarer Innenrand entfällt. */
@media (min-width: 861px) and (max-width: 922px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-wrapper {
    grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 205px) !important;
    gap: clamp(22px, 3vw, 30px) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-textblock {
    grid-column: auto !important;
    width: auto !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop {
    display: block !important;
    --size: clamp(180px, 22vw, 205px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    justify-self: end !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop > .octagon-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.45) !important;
    transform-origin: 50% 50% !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-desktop-h2 {
    white-space: nowrap !important;
  }
}

/* 2026-09-17 v96: 923–1229px folgen der ausgewogenen 861px-Komposition.
   Das sichtbare Portrait sitzt mit symmetrischem Rand rechts, waechst nur
   moderat mit und endet etwa auf Hoehe der Kontakt-Oktagone. Das Formular
   beginnt danach mit einem sicheren Abstand. */
@media (min-width: 923px) and (max-width: 1229px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-wrapper {
    grid-template-columns: minmax(0, 1fr) clamp(215px, 23vw, 280px) !important;
    gap: clamp(30px, 4vw, 48px) !important;
    align-items: start !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop {
    --size: clamp(215px, 23vw, 280px) !important;
    width: var(--size) !important;
    height: var(--size) !important;
    justify-self: end !important;
    transform: translate(14px, -12px) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop > .octagon-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: scale(1.35) !important;
    transform-origin: 50% 50% !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-ueberschrift .heading-desktop-h2 {
    white-space: nowrap !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-beschreibung {
    width: min(100%, 540px) !important;
    max-width: 540px !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontaktformular-wrapper {
    margin: -20px auto 0 !important;
  }
}

/* 2026-09-17 v99: Ab 1230px das Portrait in seiner urspruenglichen Groesse
   belassen und nur den konstruktionsbedingten rechten SVG-Innenraum durch
   horizontales Verschieben ausgleichen. */
@media (min-width: 1230px) {
  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop {
    transform: translate(70px, -33px) !important;
  }

  html[data-page="index"] body.index-page #kontakt .clean-kontakt-image.is-desktop > .octagon-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
  }
}


/* 2026-09-18 v100: Story 01-03 Typografie 861-980px groesser
   Ausschliesslich Erreichen / Ermoeglichen / Erweitern. */
@media (min-width: 861px) and (max-width: 980px) {
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2,
  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content h2 span {
    font-size: clamp(34px, 4vw, 39px) !important;
    line-height: 1.08 !important;
  }

  html[data-page="index"] body.index-page :is(
    #idee-erreichen#idee-erreichen,
    #idee-ermoeglichen#idee-ermoeglichen,
    #idee-erweitern#idee-erweitern
  ).home-story-step .home-story-step-content > p {
    font-size: clamp(17px, 1.9vw, 19px) !important;
    line-height: 1.65 !important;
  }
}