/* ============================================================
   MEA — Mobile Reflow Stylesheet (v2, gegen den echten aktuellen
   Code gebaut, 18.09.2026)

   Ersetzt für schmale Screens die reine "Skalierung" aus site.js
   (die alles proportional verkleinert, siehe initResponsiveScale)
   durch ein echtes Reflow: größere Schrift, 1 Spalte, mehr Weißraum
   — analog zur Büro-Ole-Scheeren-Seite.

   Einbindung: <link rel="stylesheet" href="assets/mobile.css">
   in <head>, NACH dem bestehenden internen <style>-Block.
   ============================================================ */

@media (max-width: 680px) {

  html, body { background:#0A1226; max-width:100vw; overflow-x:hidden !important; }
  html { position: relative; }
  /* Genereller Sicherheitsnetz: kein Text-Element darf die Seite je
     breiter als den Viewport machen, egal welche Regel unten sonst
     greift oder nicht. */
  body > div:first-child p,
  body > div:first-child div { overflow-wrap: break-word; }

  /* WICHTIGSTE REGEL: Browser lassen Flex-/Grid-Kinder standardmäßig nicht
     unter ihre Inhaltsbreite schrumpfen (min-width:auto) — das war die
     eigentliche Ursache für fast alle Überstand-/Abschneide-Probleme.
     Strukturell (body > erstes div) statt über Inline-Style-Text gesucht,
     weil site.js dieses eine Element per JS anfasst (transform setzen) und
     der Browser dabei das gesamte style-Attribut neu serialisiert — dabei
     fügt Safari nach jedem ":" ein Leerzeichen ein, wodurch ein Text-Treffer
     wie [style*="width:1587px"] auf genau diesem Element nicht mehr matcht. */
  body > div:first-child * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Grund-Leinwand: von fixer 1587x1123px auf natürliche Höhe,
     site.js lässt den transform:scale hier bereits weg (siehe
     angepasstes assets/site.js) */
  body > div:first-child {
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Sicherheitsnetz: das dekorative Hintergrund-SVG hat feste
     1587x1123px-Attribute und würde sonst nach rechts überstehen */
  body > div:first-child > svg {
    width: 100% !important;
    height: 100% !important;
  }
  /* Sicherheitsnetz: kein Bild irgendwo darf breiter als der Screen sein */
  body > div:first-child img { max-width: 100% !important; }

  /* Team-Fotos: nicht randfüllend, etwas kompakter */
  div[style*="aspect-ratio:1/1"] { max-width: 260px !important; }

  /* Kopfbereich: Logo + Socials untereinander */
  div[style*="justify-content:space-between"][style*="align-items:flex-start"] {
    flex-direction: column !important;
    gap: 16px !important;
    padding-right: 0 !important;
  }

  /* Filter-Zeilen (Typology/Status/Location auf Projects-Übersicht):
     eigenes gap:16px, nicht von der gap:20px-Regel oben erfasst —
     Label + Chip-Wrapper sollen bei Bedarf umbrechen statt seitlich
     über den Rand zu laufen. */
  div[style*="align-items:baseline"][style*="gap:16px"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  /* Hauptnavigation */
  div[style*="letter-spacing:2.5px"] {
    flex-wrap: wrap !important;
    gap: 18px 24px !important;
    font-size: 14px !important;
  }
  .mea-navdrop-menu {
    display: block !important;
    position: static !important;
    padding-top: 10px !important;
  }
  .mea-navdrop-menu-inner { border: none !important; padding: 6px 0 0 0 !important; background: transparent !important; }
  .mea-navdrop-menu-inner a { padding: 7px 0 !important; font-size: 13px !important; }

  /* Seitenränder generell schmaler */
  div[style*="padding:34px 48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="margin-left:auto;font-size:14px;letter-spacing:2px"] { margin-left: 0 !important; }

  /* ---- Startseite: Projekt-Grid, 4 Spalten -> 1 Spalte,
     monochrom wie am Desktop, ohne Bildunterschrift (die steht
     eh nochmal ausführlich auf der Projects-Seite) ---- */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 40px !important;
    margin: 30px 20px 0 20px !important;
  }
  .mea-tile { height: auto !important; padding-bottom: 8px; }
  .mea-tile-img {
    max-width: 100% !important;
    max-height: 260px !important;
  }
  .mea-tile-cap { display: none !important; }

  /* ---- Projects-Übersicht: Grid 5 Spalten -> 1 Spalte,
     Filter-Chips zeilenweise ---- */
  div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin: 24px 20px 0 20px !important;
  }
  div[style*="grid-template-columns:repeat(5,1fr)"] img { height: 220px !important; }
  div[style*="grid-template-columns:repeat(5,1fr)"] a div:nth-child(2) { font-size: 20px !important; margin-top: 8px !important; }
  div[style*="flex:0 0 92px"] { flex: 0 0 auto !important; margin-bottom: 4px; }

  /* ---- Projekt-Detailseiten ---- */
  div[style*="height:400px"], div[style*="height:372px"],
  div[style*="height:340px"], #heroFrame {
    height: 62vw !important;
    margin: 18px 0 0 0 !important;
  }
  #thumbs {
    height: auto !important;
    flex-wrap: wrap !important;
    margin: 14px 20px 0 20px !important;
    gap: 10px !important;
  }
  #thumbs img { flex: 1 1 27% !important; height: 22vw !important; }

  /* Titelzeile */
  div[style*="font-size:52px"], div[style*="font-size:48px"],
  div[style*="font-size:46px"] { font-size: 34px !important; }
  div[style*="font-size:118px"] { font-size: 44px !important; line-height: 1.05 !important; }
  div[style*="align-items:baseline"][style*="gap:20px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Zweispaltiger Textbereich -> untereinander, größere Schrift
     (Projekt-Detailseiten: gap:56px · Profile: gap:72px · News: gap:80px) */
  div[style*="gap:56px"], div[style*="gap:72px"], div[style*="gap:80px"] {
    display: block !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    max-width: none !important;
    width: auto !important;
  }
  /* Kein Flexbox mehr für diese Spalten auf Mobile — reiner Blocksatz,
     das ist die zuverlässigste Layout-Form, die es gibt und umgeht die
     WebKit-Eigenheit bei verschachtelten Flex-Breiten komplett. */
  div[style*="gap:56px"] > *, div[style*="gap:72px"] > *, div[style*="gap:80px"] > * {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
    margin-top: 28px !important;
  }
  div[style*="gap:56px"] > *:first-child, div[style*="gap:72px"] > *:first-child, div[style*="gap:80px"] > *:first-child {
    margin-top: 0 !important;
  }
  div[style*="gap:56px"] p, div[style*="gap:72px"] p, div[style*="gap:80px"] p {
    font-size: 18px !important; line-height: 1.6 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  /* Feste Spaltenbreiten (z.B. flex:0 0 46% bei Profile) auf volle Breite */
  div[style*="flex:0 0 46%"] { flex: 1 1 auto !important; }
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 20px !important;
  }

  /* Generelle Seiten-Margins: robuste Regel statt Einzelwerte —
     praktisch jeder Abstand auf der Seite endet auf "Npx 48px 0 48px" */
  div[style*="48px 0 48px"] {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  /* Contact-Seite / Impressum: 3–4 Spalten -> 1 Spalte */
  div[style*="grid-template-columns:repeat(4,1fr)"][style*="gap:44px"],
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Footer nicht mehr absolut positioniert */
  div[style*="position:absolute"][style*="bottom:"] {
    position: static !important;
    margin: 34px 20px 26px 20px !important;
    text-align: left !important;
  }
}

@media (max-width: 400px) {
  #thumbs img { flex: 1 1 45% !important; height: 30vw !important; }
}