/* Gemeinsame mobile Titelgroesse fuer Unterseiten; Desktop und Tablet bleiben unveraendert. */
@media (max-width: 550px) {
  html[data-layout="subpage"][data-page] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page) main .page-hero.tech-service-hero h1.page-title,
  html[data-layout="subpage"][data-page] body.toowie-subpage main :is(.page-hero.tech-service-hero, .page-hero, .tech-overview-hero) :is(h1.page-title, h1.tech-overview-title),
  html[data-layout="subpage"] body h1#about-hero-title,
  html[data-layout="subpage"] body h1.page-title {
    font-size: clamp(27px, 8.5vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: balance;
  }

  html[data-layout="subpage"][data-page] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page) main .page-hero.tech-service-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page] body.toowie-subpage main :is(.page-hero.tech-service-hero, .page-hero, .tech-overview-hero) :is(h1.page-title, h1.tech-overview-title) :is(span, strong),
  html[data-layout="subpage"] body h1#about-hero-title :is(span, strong),
  html[data-layout="subpage"] body h1.page-title :is(span, strong) {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3,
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero .tech-constellation-card h3 :is(span, .tech-card-title-gold) {
    font-size: clamp(12px, 3.5vw, 16px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}

/* 2026-09-14: verbindliche Typografie-Hierarchie fuer alle Unterseiten.
   Dunkelblaue Einstiege tragen die groessere Skala, helle Inhaltsbereiche
   eine ruhigere gemeinsame Skala. Diese Regeln stehen bewusst am Dateiende. */
html[data-layout="subpage"] body :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-legal-page-heading h1
) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(40px, 4.15vw, 71px) !important;
  font-weight: 800 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}

html[data-layout="subpage"] body :is(
  .tech-overview-summary h2.tech-summary-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .about-section-title,
  .about-contact-close h2
) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(32px, 3vw, 52px) !important;
  font-weight: 780 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

html[data-layout="subpage"] body :is(
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(38px, 3.7vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

html[data-layout="subpage"] body :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-legal-page-heading h1,
  .tech-overview-summary h2.tech-summary-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .about-section-title,
  .about-contact-close h2,
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) :is(span, strong) {
  font: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 700px) {
  html[data-layout="subpage"] body :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-legal-page-heading h1,
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-family: Arial, sans-serif !important;
    font-size: clamp(28px, 8.5vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-layout="subpage"] body :is(
    .tech-overview-summary h2.tech-summary-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .about-section-title,
    .about-contact-close h2
  ) {
    font-family: Arial, sans-serif !important;
    font-size: clamp(25px, 7.2vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }
}

/* 2026-09-11 v3: Hero-H1 der vier Technik-Unterseiten exakt an die
   aktuell wirksame Titelgroesse der Technik-Uebersicht angleichen. */
@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage
  main .tech-overview-hero h1.tech-overview-title {
    font-weight: 780 !important;
  }

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

/* Finale Kaskade: zwei feste Rollen fuer alle Viewports. */
html[data-layout="subpage"] body :is(.page-hero h1.page-title,.tech-overview-hero h1.tech-overview-title,.about-company-hero h1.about-title,.page-legal-page-heading h1) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(40px,4.15vw,71px) !important;
  font-weight: 800 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}

html[data-layout="subpage"] body :is(.tech-overview-summary h2.tech-summary-title,.service-phase-head h2,.service-feature-copy h2,.page-section-white h2.page-section-title,.page-section-soft h2.page-section-title,.about-section-title,.about-contact-close h2) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(32px,3vw,52px) !important;
  font-weight: 780 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

html[data-layout="subpage"] body :is(.page-section-dark h2.page-section-title,.page-cta h2,.clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,.clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(38px,3.7vw,64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}

@media (max-width:700px) {
  html[data-layout="subpage"] body :is(.page-hero h1.page-title,.tech-overview-hero h1.tech-overview-title,.about-company-hero h1.about-title,.page-legal-page-heading h1,.page-section-dark h2.page-section-title,.page-cta h2,.clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,.clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift) {
    font-family: Arial,sans-serif !important;
    font-size: clamp(28px,8.5vw,40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-layout="subpage"] body :is(.tech-overview-summary h2.tech-summary-title,.service-phase-head h2,.service-feature-copy h2,.page-section-white h2.page-section-title,.page-section-soft h2.page-section-title,.about-section-title,.about-contact-close h2) {
    font-family: Arial,sans-serif !important;
    font-size: clamp(25px,7.2vw,32px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }
}

/* Hoehere Spezifitaet fuer bestehende Seiten-Sonderregeln. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary h2.tech-summary-title,
html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page,.infrastructure-page,.software-service-page,.website-showcase-page) main .service-phase-head h2,
html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page,.infrastructure-page,.software-service-page,.website-showcase-page) main .service-feature-copy h2 {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(32px,3vw,52px) !important;
  font-weight: 780 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

@media (max-width:700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-summary h2.tech-summary-title,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page,.infrastructure-page,.software-service-page,.website-showcase-page) main .service-phase-head h2,
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page,.infrastructure-page,.software-service-page,.website-showcase-page) main .service-feature-copy h2 {
    font-family: Arial,sans-serif !important;
    font-size: clamp(25px,7.2vw,32px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }
}

@media (min-width: 400px) and (max-width: 550px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero h1.page-title {
    font-size: clamp(27px, 8.5vw, 40px) !important;
  }
}

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

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

@media (min-width: 981px) {
  html[data-layout="subpage"] body.toowie-subpage:is(.managedservice-page, .infrastructure-page, .software-service-page, .website-showcase-page)
  main .page-hero.tech-service-hero h1.page-title {
    font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  }
}

/* 2026-09-11 v5: Bis einschliesslich 700px dieselbe Schriftwirkung wie
   „IT und Akquise.“ im mobilen Startseiten-Hero: Arial, Gewicht 800.
   Die Regel steht bewusst am Dateiende und nutzt !important, damit spaetere
   bzw. spezifischere Seitentypografie aus pages.css nicht sichtbar bleibt. */
@media (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title,
  html[data-page="it_betreuung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title,
  html[data-page="it_infrastruktur"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title,
  html[data-page="software_automatisierung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title,
  html[data-page="website_entwicklung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title,
  html[data-page="ueber_uns"][data-layout="subpage"] body.toowie-subpage h1#about-hero-title,
  html[data-page="kontakt"][data-layout="subpage"] body.toowie-subpage main .page-hero h1.page-title {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }

  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title :is(span, strong),
  html[data-page="it_betreuung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title :is(span, strong),
  html[data-page="it_infrastruktur"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title :is(span, strong),
  html[data-page="software_automatisierung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title :is(span, strong),
  html[data-page="website_entwicklung"][data-layout="subpage"] body.toowie-subpage main .page-hero.tech-service-hero h1.page-title :is(span, strong),
  html[data-page="ueber_uns"][data-layout="subpage"] body.toowie-subpage h1#about-hero-title :is(span, strong),
  html[data-page="kontakt"][data-layout="subpage"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong) {
    font-family: inherit !important;
    font-weight: inherit !important;
  }
}

/* 2026-09-11 v6: Mobile Hero-Typografie robust pro Technik-Unterseite.
   Direkte Body-Klassen vermeiden, dass seiteninterne Spezialregeln die
   Arial/800-Darstellung einzelner Heroes wieder optisch veraendern. */
@media (max-width: 700px) {
  body.infrastructure-page main .page-hero.tech-service-hero h1.page-title,
  body.software-service-page main .page-hero.tech-service-hero h1.page-title,
  body.website-showcase-page main .page-hero.tech-service-hero h1.page-title {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }

  body.infrastructure-page main .page-hero.tech-service-hero h1.page-title > span,
  body.software-service-page main .page-hero.tech-service-hero h1.page-title > span,
  body.website-showcase-page main .page-hero.tech-service-hero h1.page-title > span {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }

  html[data-page="technical"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title,
  html[data-page="technical"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title > .tech-overview-title-gold {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }

  /* Die goldene Zeile darf auf schmalen zweispaltigen Layouts umbrechen,
     statt rechts unter die Technik-Karten zu laufen. */
  html[data-page="technical"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title > .tech-overview-title-gold {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}


/* 2026-09-11 v8: Einheitliche mobile Hero-Schrift fuer ALLE Seiten unter html/technik.
   Bis 700px wird exakt die Schriftwirkung der Technik-Uebersicht verwendet.
   Die expliziten data-page-Selektoren halten die Regel auf den Technik-Bereich begrenzt. */
@media (max-width: 700px) {
  html[data-layout="subpage"][data-page="technical"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title,
  html[data-layout="subpage"][data-page="it_betreuung"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="it_infrastruktur"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="software_automatisierung"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="website_entwicklung"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="technische_hilfe"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="individuelle_unterstuetzung"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="hilfe_center"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="faq"] body.toowie-subpage main .page-hero h1.page-title,
  html[data-layout="subpage"][data-page="unterstuetzung"] body.toowie-subpage main .page-hero h1.page-title {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }

  html[data-layout="subpage"][data-page="technical"] body.toowie-subpage main .tech-overview-hero h1.tech-overview-title :is(span, strong),
  html[data-layout="subpage"][data-page="it_betreuung"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="it_infrastruktur"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="software_automatisierung"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="website_entwicklung"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="technische_hilfe"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="individuelle_unterstuetzung"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="hilfe_center"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="faq"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong),
  html[data-layout="subpage"][data-page="unterstuetzung"] body.toowie-subpage main .page-hero h1.page-title :is(span, strong) {
    font-family: Arial, sans-serif !important;
    font-weight: 800 !important;
  }
}

/* 2026-09-11 v9: Nur die Schriftstaerke der Abschnittsueberschriften im
   Technik-Bereich angleichen. Keine Groessen-, Abstands- oder Layoutaenderungen. */
@media (max-width: 700px) {
  html[data-layout="subpage"]:is(
    [data-page="technical"],
    [data-page="it_betreuung"],
    [data-page="it_infrastruktur"],
    [data-page="software_automatisierung"],
    [data-page="website_entwicklung"],
    [data-page="technische_hilfe"],
    [data-page="individuelle_unterstuetzung"],
    [data-page="hilfe_center"],
    [data-page="faq"],
    [data-page="unterstuetzung"]
  ) body.toowie-subpage main h2 {
    font-weight: 800 !important;
  }

  html[data-layout="subpage"]:is(
    [data-page="technical"],
    [data-page="it_betreuung"],
    [data-page="it_infrastruktur"],
    [data-page="software_automatisierung"],
    [data-page="website_entwicklung"],
    [data-page="technische_hilfe"],
    [data-page="individuelle_unterstuetzung"],
    [data-page="hilfe_center"],
    [data-page="faq"],
    [data-page="unterstuetzung"]
  ) body.toowie-subpage main h2 :is(span, strong) {
    font-weight: inherit !important;
  }
}


/* ========================================================================== */
/* 2026-09-14 v10: Finale Typografie-Sperre nach Startseiten-Schema.          */
/* Diese Datei wird auf Inhaltsseiten zuletzt geladen und verhindert, dass    */
/* seitenbezogene Responsive-Regeln die vereinheitlichte Typografie aufheben. */
/* ========================================================================== */

html[data-layout="subpage"] body.toowie-subpage :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .tech-overview-summary h2.tech-summary-title,
  .about-section-title,
  .about-contact-close h2,
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) {
  font-family: Inter, Arial, sans-serif !important;
  font-size: clamp(2.55rem, 4.15vw, 4.45rem) !important;
  font-weight: 780 !important;
  line-height: .97 !important;
  letter-spacing: -.055em !important;
}

html[data-layout="subpage"] body.toowie-subpage :is(
  .page-hero h1.page-title,
  .tech-overview-hero h1.tech-overview-title,
  .about-company-hero h1.about-title,
  .page-section-white h2.page-section-title,
  .page-section-soft h2.page-section-title,
  .service-phase-head h2,
  .service-feature-copy h2,
  .tech-overview-summary h2.tech-summary-title,
  .about-section-title,
  .about-contact-close h2,
  .page-section-dark h2.page-section-title,
  .page-cta h2,
  .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
  .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
) :is(span, strong) {
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

@media (min-width: 861px) and (max-width: 980px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2,
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title
  ) {
    font-size: clamp(25px, 5.8vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(28px, 5.9vw, 47px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2
  ) {
    font-size: clamp(2.55rem, 6vw, 4rem) !important;
  }
}

@media (max-width: 700px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title,
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2,
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    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;
  }

  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-white h2.page-section-title,
    .page-section-soft h2.page-section-title,
    .service-phase-head h2,
    .service-feature-copy h2,
    .tech-overview-summary h2.tech-summary-title,
    .about-section-title,
    .about-contact-close h2
  ) {
    font-size: clamp(27px, 8.5vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

@media (max-width: 399px) {
  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-hero h1.page-title,
    .tech-overview-hero h1.tech-overview-title,
    .about-company-hero h1.about-title
  ) {
    font-size: clamp(27px, 8.5vw, 32px) !important;
  }

  html[data-layout="subpage"] body.toowie-subpage :is(
    .page-section-dark h2.page-section-title,
    .page-cta h2,
    .clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,
    .clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift
  ) {
    font-size: clamp(27px, 7.6vw, 30px) !important;
  }
}

/* Endgueltige Hierarchie nach allen aelteren mobilen Sonderregeln. */
html[data-layout="subpage"] body :is(.page-hero h1.page-title,.tech-overview-hero h1.tech-overview-title,.about-company-hero h1.about-title,.page-legal-page-heading h1) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(40px,4.15vw,71px) !important;
  font-weight: 800 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}
html[data-layout="subpage"] body :is(.tech-overview-summary h2.tech-summary-title,.service-phase-head h2,.service-feature-copy h2,.page-section-white h2.page-section-title,.page-section-soft h2.page-section-title,.about-section-title,.about-contact-close h2) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(32px,3vw,52px) !important;
  font-weight: 780 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
html[data-layout="subpage"] body :is(.page-section-dark h2.page-section-title,.page-cta h2,.clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,.clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift) {
  font-family: Inter,Arial,sans-serif !important;
  font-size: clamp(38px,3.7vw,64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
}
@media (max-width:700px) {
  html[data-layout="subpage"] body :is(.page-hero h1.page-title,.tech-overview-hero h1.tech-overview-title,.about-company-hero h1.about-title,.page-legal-page-heading h1,.page-section-dark h2.page-section-title,.page-cta h2,.clean-kontakt-section.bg--blue h2.clean-kontakt-ueberschrift,.clean-kontakt-section.bg--blue h2.clean-kontaktformular-ueberschrift) {
    font-family: Arial,sans-serif !important;
    font-size: clamp(28px,8.5vw,40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
  html[data-layout="subpage"] body :is(.tech-overview-summary h2.tech-summary-title,.service-phase-head h2,.service-feature-copy h2,.page-section-white h2.page-section-title,.page-section-soft h2.page-section-title,.about-section-title,.about-contact-close h2) {
    font-family: Arial,sans-serif !important;
    font-size: clamp(25px,7.2vw,32px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }
}

/* 2026-09-14: Ueber-uns-Hero 400–860px – Titel immer exakt zweizeilig.
   Jede Aussage bleibt vollstaendig in ihrer eigenen Zeile. */
@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="ueber_uns"][data-layout="subpage"] body.about-page h1#about-hero-title {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(26px, 6.5vw, 40px) !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: nowrap !important;
  }

  html[data-page="ueber_uns"][data-layout="subpage"] body.about-page h1#about-hero-title > span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* 2026-09-17: Technik-Summary – exakt dieselbe Schriftgroessen-Skalierung
   wie "Mit dem Akquise Manager professionell in jedes Gespraech starten." */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
.tech-overview-summary h2.tech-summary-title {
  font-size: clamp(22px, min(6vw, calc(45.87px + 1.3191vw)), 71.2px) !important;
}

@media (max-width: 700px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-summary h2.tech-summary-title {
    font-size: clamp(27px, 8.5vw, 32px) !important;
  }
}