/* ═══════════════════════════════════════════════════════════════════
   MUP — Globale Mobile-Wächter v2 (7.7.38, 22.07.2026)
   ───────────────────────────────────────────────────────────────────
   Gregor (Screenshots zeizei, 22.07.):
   1. "ich möchte keinen weisen rahmen. die seite selbst soll bild
      füllend sein" → Sektionen auf Mobile echt full-bleed. Die
      v7.7.35-Normalisierung (width:100%) hat den weißen Rahmen des
      Containers stehen lassen — jetzt die klassische
      calc(50% - 50vw)-Technik, die dank overflow-x:clip (unten)
      keinen horizontalen Overflow mehr erzeugen kann.
   2. "wörter nicht getrennt werden" ("Universu / m") → Headings
      brechen nie mitten im Wort; zusätzlich passt mup-heading-fit.js
      die Schriftgröße automatisch an, wenn das längste Wort nicht in
      die Spalte passt.
   3. "der text '7 werkzeuge...' ist nicht zentriert. das kann ich
      auch im backend nicht ändern" → Live-Seite trägt eine ältere
      Pattern-Kopie ohne Center-Klasse; Cover-Hero-Headings werden auf
      Mobile zentriert (MUP läuft nur auf Gregors eigenen Sites,
      dunkle zentrierte Heroes sind das eigene Designsystem).
   4. "der rahmen der boxen etwas zu groß" → Karten-Innenabstand auf
      Mobile gedeckelt.
   ═══════════════════════════════════════════════════════════════════ */

html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* v7.7.108: Weil html/body oben ueberstehenden Inhalt abschneiden (clip, nicht
   scrollbar), brauchen lange Woerter in Fliesstext, Links und Code eine
   Auffangregel: sie brechen NUR, wenn sie sonst nicht in die Zeile passen.
   (break-word aendert die Mindestbreite von Flex-/Grid-Elementen nicht.)
   Ueberschriften bleiben bewusst unberuehrt (siehe Punkt 2 im Mobilteil und
   mup-heading-fit.js). */
p, li, dt, dd, td, th, blockquote, figcaption, label, a, code, kbd, samp,
.wp-block-button__link {
  overflow-wrap: break-word;
}

/* Bilder & Medien: nie breiter als ihr Container, Seitenverhältnis halten */
body img,
body svg,
body video,
body iframe,
body embed,
body object {
  max-width: 100%;
  height: auto;
}

/* v7.7.39 (Gregor, Screenshot 12:07: "das oberste candor universum
   (seiten titel glaube ich) nicht anzeigen!"): der graue Titel-Balken ist
   Kadences Seitentitel-Hero. Auf statischen SEITEN ausblenden (alle
   Candor-/MUP-Seiten starten mit eigenem Hero) — Beiträge/Blog behalten
   ihre Titel. Gilt auf allen Bildschirmgrößen. */
body.page .entry-hero,
body.page .page-hero-section,
body.page .entry-header,
body.page header.entry-header,
body.page h1.entry-title {
  display: none !important;
}

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 782px) {

  /* 0. v7.7.38 (Screenshot 12:00): der Full-Bleed aus Punkt 1 wurde vom
        Kadence-Content-Container EINGEFANGEN — das Theme legt den Inhalt
        in eine weiße Box (article.content-bg / .entry-content-wrap mit
        Padding, Radius und Clipping), calc(50% - 50vw) wird darin
        beschnitten. Auf Mobile wird diese Box neutralisiert: kein
        Innenabstand, kein weißer Hintergrund, kein Clipping — die
        Sektionen dürfen wirklich bis an den Bildschirmrand. */
  article.entry.content-bg,
  .single-entry.content-bg,
  .content-bg {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .entry-content-wrap,
  .content-container,
  .content-area,
  .site-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  /* 1. Full-Bleed: Sektionen füllen die Bildschirmbreite, kein weißer
        Rahmen. Gilt für alignfull-Sektionen UND für Top-Level-Blöcke
        mit eigenem Hintergrund (ältere Pattern-Kopien ohne alignfull). */
  .entry-content > .alignfull,
  .entry-content > .wp-block-cover,
  .entry-content > .wp-block-group.has-background,
  .entry-content > .wp-block-group[style*="background"],
  .entry-content > .wp-block-kadence-rowlayout,
  .site-main > .alignfull,
  .alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  /* Innen-Container der Full-Bleed-Sektionen behalten Luft zum Rand */
  .wp-block-cover.alignfull > .wp-block-cover__inner-container,
  .entry-content > .wp-block-group.has-background > * {
    max-width: 100%;
  }

  /* 2. Typografie: Wörter werden NIE getrennt oder mitten im Wort
        umbrochen — weder per break-word noch per Silbentrennung. */
  h1, h2, h3, h4, h5, h6, .wp-block-heading {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  /* 2b. v7.7.37 (Gregor: "die schriftgrößen müssen über die einzelnen
        seiten konstant sein. kein hin und herspringen"): EINE einheitliche
        mobile Typo-Skala für alle Seiten. Überschreibt bewusst die
        unterschiedlichen Inline-clamp()-Werte der einzelnen Patterns —
        auf Mobile gilt überall dieselbe Größe pro Ebene. Die viewport-
        relative Komponente (vw) ist auf allen Seiten identisch, springt
        also nicht. mup-heading-fit.js bleibt nur als Notbremse für
        extrem lange Einzelwörter aktiv. */
  h1, .wp-block-heading:is(h1) { font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.15 !important; }
  h2, .wp-block-heading:is(h2) { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.2 !important; }
  h3, .wp-block-heading:is(h3) { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.25 !important; }
  h4 { font-size: clamp(18px, 5vw, 21px) !important; }
  /* v7.7.41 (Julia): INDIVIDUELL im Responsive-Studio gesetzte Groessen
     GEWINNEN gegen die einheitliche Skala — wer pro Block/Bild bewusst
     eine Groesse waehlt, bekommt genau diese (Mobile > Tablet > Desktop
     Fallback-Kette wie in responsive-everything.css). */
  .has-mup-resp[style*="--mup-font"],
  .has-mup-resp[style*="--mup-font"] :is(h1,h2,h3,h4,h5,h6) {
    font-size: var(--mup-font-m, var(--mup-font-t, var(--mup-font))) !important;
  }

  /* 3. Cover-Hero-Headings zentrieren (Fix für Live-Seiten mit
        veralteter Pattern-Kopie ohne has-text-align-center). */
  .wp-block-cover .wp-block-cover__inner-container h1,
  .wp-block-cover .wp-block-cover__inner-container h2,
  .wp-block-cover .wp-block-cover__inner-container > .wp-block-group > h1,
  .candor-startseite-hero h1 {
    text-align: center;
  }

  /* 4. Karten/Boxen: Innenabstand deckeln, damit in schmalen Spalten
        mehr Platz für den Text bleibt (Bild 2: Plugin-Karten). */
  .wp-block-columns .wp-block-group,
  .wp-block-column > .wp-block-group,
  .wp-block-group[style*="border-width"] {
    padding-left: min(20px, 5vw) !important;
    padding-right: min(20px, 5vw) !important;
  }
  .wp-block-kadence-column > .kt-inside-inner-col {
    padding-left: min(20px, 5vw) !important;
    padding-right: min(20px, 5vw) !important;
  }
}