/*
 * v070 · stabile Textdarstellung für Desktop, Tablet und Smartphone
 * Reine CSS-Lösung: keine Resize-Listener, keine DOM-Duplikate, kein nachträgliches Messen.
 */

/* Browser dürfen die Schrift beim Drehen oder Zoomen nicht eigenmächtig vergrößern. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Natürlicher Zeilenumbruch ohne automatische oder künstliche Worttrennung. */
:where(main, footer, .menu-panel, .modal-body) :where(
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote, figcaption
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  text-wrap: wrap !important;
}

/* Technische Zeichenfolgen dürfen als einzige im Notfall umbrechen. */
:where(main, footer, .menu-panel, .modal-body) :where(
  a[href^="http"],
  a[href^="mailto:"],
  code,
  pre
) {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Telefonnummern bleiben weiterhin vollständig in einer Zeile. */
a[href^="tel:"],
.phone-number {
  display: inline-block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/*
 * Grid- und Flex-Kinder müssen kleiner als ihre intrinsische Textbreite werden dürfen.
 * Dadurch schieben lange Übersetzungen keine Nachbarspalte über oder unter andere Bereiche.
 */
:where(main, footer) :where(
  .clinic-container,
  .hero-stage,
  .hero-stage-inner,
  .hero-content,
  .hero-content-overlay,
  .subpage-hero-grid,
  .compact-hero-grid,
  .team-hero-grid,
  .contact-layout,
  .footer-layout,
  .facts-grid,
  .overview-grid,
  .feature-strip,
  .reference-panel,
  .discipline-card-grid,
  .process-layout,
  .process-steps,
  .team-roster-groups,
  .team-role-list,
  .pnp-detail-hero-grid,
  .pnp-detail-layout,
  .lexicon-generated-body,
  .lexicon-section,
  .info-grid,
  .info-card-grid,
  .section-heading,
  .section-intro
) > * {
  min-width: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Medien dürfen Textspalten nie verbreitern. */
:where(main, footer) :where(img, picture, video, iframe, svg) {
  max-inline-size: 100%;
}

/* Lange Inline-CMS-Spans bleiben echter Fließtext und erzeugen keine künstlichen Blöcke. */
:where(main, footer, .menu-panel, .modal-body) :where(p, li, dd, dt) > span:not([class]) {
  display: inline;
  max-inline-size: none;
}

/* DESKTOP · bestehende Komposition unverändert, nur stabile Umbruchbasis. */
@media (min-width: 1201px) {
  :where(main, footer) :where(p, li, dd, dt, blockquote, figcaption) {
    word-spacing: normal;
  }
}

/* TABLET / schmales Desktopfenster · mehr nutzbare Textbreite, keine Blocksatzlücken. */
@media (min-width: 761px) and (max-width: 1200px) {
  main p[style*="text-align:justify"],
  main p[style*="text-align: justify"] {
    text-align: start !important;
  }

  :where(
    .subpage-hero-copy,
    .hero-content-overlay,
    .section-heading,
    .section-intro,
    .contact-highlight,
    .pnp-detail-hero .subpage-hero-copy
  ) :where(h1, h2, h3, p, .lead) {
    max-inline-size: 100% !important;
  }

  /* Das Team-Hero behält seine Form, erhält aber eine viewportgerechte Textbreite. */
  .team-hero--immersive .hero-content-overlay {
    inline-size: min(52vw, 38em) !important;
    max-inline-size: min(52vw, 38em) !important;
    min-inline-size: 0 !important;
    font-size: clamp(14px, 1.42vw, 16px) !important;
  }

  .team-hero--immersive :where(h1, .lead) {
    max-inline-size: 100% !important;
    text-wrap: wrap !important;
  }

  /* Hero-Titel dürfen bei Zwischenbreiten die tatsächlich verfügbare Spalte nutzen. */
  :where(
    .subpage-hero,
    .condition-detail-hero,
    .pnp-hero,
    .pnp-detail-hero,
    .contact-termin-hero,
    .team-hero--immersive
  ) h1 {
    max-inline-size: 100% !important;
  }
}

/* SMARTPHONE · ein natürlicher Fluss, ohne Überlagerung oder unnötige Restzeilen. */
@media (max-width: 760px) {
  :where(main, footer, .menu-panel, .modal-body) :where(
    p, li, dt, dd, blockquote, figcaption
  ) {
    inline-size: auto;
    max-inline-size: 100% !important;
    margin-inline: 0;
    text-align: start;
    letter-spacing: normal;
    word-spacing: normal;
  }

  main p[style*="text-align:justify"],
  main p[style*="text-align: justify"] {
    text-align: start !important;
  }

  :where(
    .subpage-hero-copy,
    .hero-content-overlay,
    .section-heading,
    .section-intro,
    .contact-highlight,
    .pnp-detail-hero .subpage-hero-copy
  ) :where(h1, h2, h3, p, .lead) {
    max-inline-size: 100% !important;
  }

  .team-hero--immersive .hero-content-overlay {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
  }

  .team-hero--immersive :where(h1, .lead) {
    max-inline-size: 100% !important;
    text-wrap: wrap !important;
  }

  /* Kein Textcontainer darf auf mobilen Geräten durch eine alte feste Höhe abgeschnitten werden. */
  :where(
    .hero-content,
    .hero-content-overlay,
    .subpage-hero-copy,
    .section-heading,
    .section-intro,
    .contact-highlight,
    .overview-card > div,
    .facts-card,
    .discipline-card,
    .team-role-member
  ) {
    max-height: none !important;
    overflow: visible;
  }
}

/* Sehr kleine Displays: nur zwingende Einzeiler behalten nowrap. */
@media (max-width: 390px) {
  [data-cms-id="team-expertise-roster-mta-01-role"] {
    white-space: normal !important;
  }
}

/* Bedienhilfen: keine Auswirkung auf Layout, aber weniger Bewegung bei Systemeinstellung. */
@media (prefers-reduced-motion: reduce) {
  :where(main, footer) * {
    scroll-behavior: auto;
  }
}

/* Schmale Tablets: Header-Inhalte dürfen den Viewport nicht um wenige Pixel verbreitern. */
@media (min-width: 761px) and (max-width: 900px) {
  :root {
    --brand-w: clamp(136px, 21vw, 168px);
  }

  .header-shell {
    width: calc(100% - 40px);
    min-width: 0;
    gap: 16px;
  }

  .header-actions {
    min-width: 0;
    gap: 12px;
  }

  .header-cta {
    min-height: 48px;
    padding-inline: 16px;
    font-size: 12px;
  }

  .menu-button {
    flex: 0 0 48px;
    width: 48px;
    min-height: 48px;
  }

  .menu-line {
    width: 44px;
  }
}