/* Jacura – responsive Ergänzung.
   Greift ausschließlich unterhalb von 900px. Die Desktop-Darstellung
   (>= 901px) bleibt komplett unverändert.
   Die Regeln adressieren die Inline-Styles der Seiten per Attribut-Teiltreffer.
   Wert-Regeln enthalten immer den Property-Namen im selben Teilstring
   ("padding: 124px 32px"), damit kein anderer Wert versehentlich mitgetroffen wird.
   React rendert Inline-Styles gespaced und normalisiert 0 zu 0px. */

@media (max-width: 900px) {

  /* ---- 1. Mehrspaltige Layouts werden einspaltig ---- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
  img { max-width: 100% !important; }

  /* Lange deutsche Komposita brechen statt überzulaufen */
  h1, h2, h3, h4, h5, p, li, td, th, a, span, strong { overflow-wrap: break-word !important; }
  h1, h2, h3, h4 { hyphens: auto !important; }
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="grid-row"] { grid-row: auto !important; }
  [style*="grid-area"] { grid-area: auto !important; }

  /* ---- 2. Dekorative, unscharfe Farbflächen entfallen (rein dekorativ und
           Ursache für horizontales Scrollen); Frosted-Glass bleibt erhalten ---- */
  [style*="filter: blur"]:not([style*="backdrop-filter"]),
  [style*="filter:blur"]:not([style*="backdrop-filter"]) { display: none !important; }

  [style*="position: absolute"][style*="width: 420px;"], [style*="position:absolute"][style*="width:420px;"],
  [style*="position: absolute"][style*="width: 320px;"], [style*="position:absolute"][style*="width:320px;"],
  [style*="position: absolute"][style*="width: 300px;"], [style*="position:absolute"][style*="width:300px;"] {
    width: 200px !important; height: 200px !important;
  }

  /* ---- 3. Große Layout-Abstände zusammenziehen ---- */
  [style*="gap: 80px;"], [style*="gap:80px;"],
  [style*="gap: 76px;"], [style*="gap:76px;"],
  [style*="gap: 72px;"], [style*="gap:72px;"],
  [style*="gap: 70px;"], [style*="gap:70px;"],
  [style*="gap: 64px;"], [style*="gap:64px;"],
  [style*="gap: 60px;"], [style*="gap:60px;"],
  [style*="gap: 56px;"], [style*="gap:56px;"],
  [style*="gap: 46px;"], [style*="gap:46px;"] { gap: 30px !important; }

  /* ---- 4. Klebende Nebenspalten laufen mit (Header bleibt sticky) ---- */
  [style*="position: sticky"]:not(header), [style*="position:sticky"]:not(header) { position: static !important; }

  /* ---- 5. Seitenränder der Inhaltsspalten ---- */
  [style*="max-width: 1240px;"], [style*="max-width:1240px;"],
  [style*="max-width: 1100px;"], [style*="max-width:1100px;"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---- 6. Vertikaler Sektionsrhythmus ---- */
  [style*="padding: 124px 32px;"], [style*="padding:124px 32px;"] { padding: 64px 20px !important; }
  [style*="padding: 116px 32px;"], [style*="padding:116px 32px;"] { padding: 60px 20px !important; }
  [style*="padding: 110px 32px;"], [style*="padding:110px 32px;"] { padding: 58px 20px !important; }
  [style*="padding: 100px 32px 116px;"], [style*="padding:100px 32px 116px;"] { padding: 56px 20px 60px !important; }
  [style*="padding: 100px 32px 0;"], [style*="padding:100px 32px 0;"] { padding: 56px 20px 0 !important; }
  [style*="padding: 88px 32px 0;"], [style*="padding:88px 32px 0;"] { padding: 48px 20px 0 !important; }
  [style*="padding: 80px 32px 110px;"], [style*="padding:80px 32px 110px;"] { padding: 48px 20px 58px !important; }
  [style*="padding: 76px 32px 116px;"], [style*="padding:76px 32px 116px;"] { padding: 44px 20px 60px !important; }
  [style*="padding: 76px 32px 0;"], [style*="padding:76px 32px 0;"] { padding: 44px 20px 0 !important; }
  [style*="padding: 64px 32px 0;"], [style*="padding:64px 32px 0;"] { padding: 40px 20px 0 !important; }
  [style*="padding: 56px 32px 96px;"], [style*="padding:56px 32px 96px;"] { padding: 36px 20px 52px !important; }
  [style*="padding: 56px 32px 0;"], [style*="padding:56px 32px 0;"] { padding: 36px 20px 0 !important; }
  [style*="padding: 52px 32px 72px;"], [style*="padding:52px 32px 72px;"] { padding: 34px 20px 44px !important; }
  [style*="padding: 40px 32px 96px;"], [style*="padding:40px 32px 96px;"] { padding: 28px 20px 52px !important; }
  [style*="padding: 10px 32px;"], [style*="padding:10px 32px;"] { padding: 10px 20px !important; }
  [style*="padding: 76px 0px 0px;"], [style*="padding:76px 0 0;"] { padding: 40px 0 0 !important; }
  [style*="padding: 0px 32px;"], [style*="padding:0 32px;"] { padding: 0 20px !important; }
  [style*="padding: 0px 32px 124px;"], [style*="padding:0 32px 124px;"] { padding: 0 20px 64px !important; }

  /* ---- 7. Großzügige Innenabstände von Panels/Karten ---- */
  [style*="padding: 72px 52px;"], [style*="padding:72px 52px;"] { padding: 34px 22px !important; }
  [style*="padding: 52px 54px;"], [style*="padding:52px 54px;"] { padding: 30px 22px !important; }
  [style*="padding: 44px 46px;"], [style*="padding:44px 46px;"] { padding: 28px 22px !important; }
  [style*="padding: 42px 38px;"], [style*="padding:42px 38px;"] { padding: 26px 22px !important; }
  [style*="padding: 40px 44px;"], [style*="padding:40px 44px;"] { padding: 26px 22px !important; }
  [style*="padding: 38px 36px;"], [style*="padding:38px 36px;"] { padding: 26px 22px !important; }
  [style*="padding: 36px 38px;"], [style*="padding:36px 38px;"] { padding: 26px 22px !important; }
  [style*="padding: 34px 42px 0;"], [style*="padding:34px 42px 0;"] { padding: 24px 22px 0 !important; }
  [style*="padding: 34px 38px;"], [style*="padding:34px 38px;"] { padding: 24px 22px !important; }
  [style*="padding: 34px 36px;"], [style*="padding:34px 36px;"] { padding: 24px 22px !important; }
  [style*="padding: 32px 34px;"], [style*="padding:32px 34px;"] { padding: 24px 22px !important; }
  [style*="padding: 30px 42px 36px;"], [style*="padding:30px 42px 36px;"] { padding: 24px 22px 26px !important; }
  [style*="padding: 16px 44px;"], [style*="padding:16px 44px;"] { padding: 14px 22px !important; }

  /* Dekorative Hintergrundflächen hinter Bildern sitzen enger */
  [style*="padding: 20px 0px 0px 20px;"], [style*="padding:20px 0 0 20px;"] { padding: 12px 0 0 12px !important; }
  [style*="padding: 0px 0px 20px 20px;"], [style*="padding:0 0 20px 20px;"] { padding: 0 0 12px 12px !important; }

  /* ---- 8. Bildhöhen ---- */
  /* Nur echte height/min-height-Deklarationen treffen – nie max-width oder
     line-height, die das Wort "height" ebenfalls enthalten. */
  [style*="height: 614px;"], [style*="height:614px;"],
  [style*="height: 560px;"], [style*="height:560px;"],
  [style*="height: 540px;"], [style*="height:540px;"],
  [style*="height: 520px;"], [style*="height:520px;"],
  [style*="height: 500px;"], [style*="height:500px;"],
  [style*="height: 480px;"], [style*="height:480px;"],
  [style*="height: 470px;"], [style*="height:470px;"],
  [style*="height: 440px;"], [style*="height:440px;"],
  [style*="height: 420px;"], [style*="height:420px;"],
  [style*="height: 400px;"], [style*="height:400px;"] { height: 260px !important; min-height: 0 !important; }
  [style*="height: 340px;"], [style*="height:340px;"],
  [style*="height: 320px;"], [style*="height:320px;"],
  [style*="height: 300px;"], [style*="height:300px;"] { height: 220px !important; min-height: 0 !important; }

  /* ---- 9. Header: Logo-Zeile + darunter scrollbare Navigationszeile ---- */
  div:has(> div > a[href="mailto:info@jacura.de"]) { display: none !important; }

  header[style*="sticky"] > div[style*="max-width"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  header[style*="sticky"] img { height: 30px !important; }
  header[style*="sticky"] nav {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    gap: 20px !important;
    font-size: 15px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header[style*="sticky"] nav::-webkit-scrollbar { display: none; }
  header[style*="sticky"] nav > a { white-space: nowrap !important; }
  header[style*="sticky"] > div > div:last-child { margin-left: auto !important; gap: 12px !important; }
  header[style*="sticky"] > div > div:last-child > a[href*="angebot"],
  header[style*="sticky"] > div > div:last-child > a[href*="anfrage"] {
    font-size: 14px !important; padding: 11px 16px !important;
  }

  /* ---- 10. Tabellen bleiben horizontal scrollbar ---- */
  [style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
}

/* Telefon-Breiten */
@media (max-width: 600px) {
  h1 { font-size: 30px !important; line-height: 1.14 !important; letter-spacing: -0.4px !important; }
  header[style*="sticky"] > div > div > a[href^="tel:"] { display: none !important; }
  [style*="letter-spacing"][style*="-1.8px"], [style*="letter-spacing"][style*="-1.6px"] { letter-spacing: -0.8px !important; }
  [style*="gap: 30px;"], [style*="gap:30px;"],
  [style*="gap: 32px;"], [style*="gap:32px;"] { gap: 22px !important; }
  [style*="padding: 124px 32px;"], [style*="padding:124px 32px;"] { padding: 52px 20px !important; }
  [style*="padding: 116px 32px;"], [style*="padding:116px 32px;"] { padding: 50px 20px !important; }
  [style*="padding: 110px 32px;"], [style*="padding:110px 32px;"] { padding: 48px 20px !important; }
}

/* Zwischenstufe: 4er/3er-Raster dürfen zweispaltig bleiben */
@media (min-width: 601px) and (max-width: 900px) {
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(6,1fr)"], [style*="repeat(6, 1fr)"],
  [style*="repeat(7,1fr)"], [style*="repeat(7, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}