/* ==========================================================================
   TOOWIE TYPOGRAFIE-SYSTEM v7
   Referenz: bewaehrte Proportionen und Schriftgewichte der Startseite.
   Keine breakpoint-spezifischen Spruenge: alle Rollen skalieren fluide.
   ========================================================================== */
:root {
  --type-display-size: clamp(28px, calc(2.83vw + 16.7px), 71px);
  --type-title-size: clamp(30px, calc(1.45vw + 24.2px), 52px);
  --type-subtitle-size: clamp(16px, calc(.66vw + 13.4px), 26px);
  --type-subheading-size: clamp(16px, calc(.36vw + 14.6px), 20px);
  --type-body-size: clamp(15px, calc(.57vw + 12.7px), 19px);
  --type-small-size: clamp(13px, calc(.20vw + 12.2px), 16px);
  --type-kicker-size: clamp(11px, calc(.20vw + 10.2px), 14px);
}

.type-display {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-display-size) !important;
  font-weight: 780 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}

.type-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-title-size) !important;
  font-weight: 780 !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.type-subtitle {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-subtitle-size) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.type-subheading {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-subheading-size) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.type-body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

.type-small {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-small-size) !important;
  line-height: 1.55 !important;
}

.type-kicker {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-kicker-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
}

/* IT-Betreuung ist die erste voll migrierte Seite.
   Der Seiten-Scope schirmt die semantischen Rollen gegen alte !important-
   Breakpoint-Patches ab. Die Werte selbst kommen ausschliesslich aus den
   globalen --type-*-Variablen oben. */
#it-betreuung-page .type-display {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-display-size) !important;
  font-weight: 780 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}
#it-betreuung-page .type-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-title-size) !important;
  font-weight: 780 !important;
  line-height: 1.06 !important;
  letter-spacing: -.045em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#it-betreuung-page .type-subtitle {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-subtitle-size) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
#it-betreuung-page .type-subheading {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-subheading-size) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
#it-betreuung-page .type-body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}
#it-betreuung-page .type-small {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-small-size) !important;
  line-height: 1.55 !important;
}
#it-betreuung-page .type-kicker {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-size: var(--type-kicker-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

/* Der Uebersichtsbereich besitzt in Alt-CSS ein #themen-ID-Patch.
   Zwei echte Seiten-IDs sorgen waehrend der Migration dafuer, dass auch dort
   die Rollen gewinnen, ohne neue Pixel-Breakpoints anzulegen. */
#it-betreuung-page #themen .type-title {
  font-size: var(--type-title-size) !important;
  line-height: 1.06 !important;
}
#it-betreuung-page #themen .type-body {
  font-size: var(--type-body-size) !important;
  line-height: 1.65 !important;
}
#it-betreuung-page #themen .type-subheading {
  font-size: var(--type-subheading-size) !important;
  line-height: 1.3 !important;
}
#it-betreuung-page #themen .type-small {
  font-size: var(--type-small-size) !important;
  line-height: 1.55 !important;
}

/* Einheitliche Ueberschriften-Hierarchie fuer Unterseiten. */
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: var(--type-display-size) !important;
  font-weight: 800 !important;
  line-height: .99 !important;
  letter-spacing: -.05em !important;
}

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 :is(.service-phase-head h2,.service-feature-copy h2),
html[data-layout="subpage"] body :is(.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: var(--type-title-size) !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.toowie-subpage main h2.type-light-title {
  font-family: Inter,Arial,sans-serif !important;
  font-size: var(--type-title-size) !important;
  font-weight: 780 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !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: var(--type-display-size) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  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 :is(.service-phase-head h2,.service-feature-copy h2),
  html[data-layout="subpage"] body :is(.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: var(--type-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }

  html[data-layout="subpage"] body.toowie-subpage.managedservice-page main :is(.service-phase-head h2,.service-feature-copy h2),
  html[data-layout="subpage"] body.toowie-subpage.infrastructure-page main :is(.service-phase-head h2,.service-feature-copy h2),
  html[data-layout="subpage"] body.toowie-subpage.software-service-page main :is(.service-phase-head h2,.service-feature-copy h2),
  html[data-layout="subpage"] body.toowie-subpage.website-showcase-page main :is(.service-phase-head h2,.service-feature-copy h2) {
    font-family: Arial,sans-serif !important;
    font-size: var(--type-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }

  html[data-layout="subpage"] body.toowie-subpage main h2.type-light-title.type-light-title.type-light-title {
    font-family: Arial,sans-serif !important;
    font-size: var(--type-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
  }
}

/* 2026-09-17: Technik-Hero-H1 folgt pixelgenau derselben Typografie-Skalierung
   wie die H1 des Startseiten-Heros. Die feste Zweizeiligkeit bleibt erhalten. */
html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
.tech-overview-hero h1.tech-overview-title {
  font-family: 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-page="technical"][data-layout="subpage"] body.toowie-subpage main
.tech-overview-hero h1.tech-overview-title > .tech-overview-title-gold {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

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

@media (min-width: 400px) and (max-width: 860px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero h1.tech-overview-title {
    font-size: clamp(28px, 5.9vw, 47px) !important;
    font-weight: 780 !important;
    line-height: 1.06 !important;
    letter-spacing: -.055em !important;
  }
}

@media (max-width: 399px) {
  html[data-page="technical"][data-layout="subpage"] body.toowie-subpage main
  .tech-overview-hero h1.tech-overview-title {
    font-size: clamp(27px, 8.5vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}

/* "Kontaktformular"-Ueberschrift auf der Technik-Uebersicht und den vier
   Technik-Unterseiten (IT-Betreuung, IT-Infrastruktur, Software & Automatisierung,
   Webentwicklung) an die groessere Startseiten-Ueberschrift angleichen. Alle
   fuenf Seiten teilen sich den identischen #kontakt.contact--home-layout-Block. */
html[data-layout="subpage"] body.toowie-subpage #kontakt.contact--home-layout h2.clean-kontakt-ueberschrift,
html[data-layout="subpage"] body.toowie-subpage #kontakt.contact--home-layout h2.clean-kontakt-ueberschrift .heading-desktop-h2,
html[data-layout="subpage"] body.toowie-subpage #kontakt.contact--home-layout h2.clean-kontakt-ueberschrift .heading-mobile-h2 {
  font-size: clamp(2.2rem, 4.7vw, 3.8rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}