/* Responsive overrides for broschart.net
   Targets the inline-style markup with !important. Two breakpoints: 960px (tablet) and 640px (phone). */

/* Burger button is hidden by default on desktop */
.burger-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0; }

@media (max-width: 960px) {
  .burger-btn { display: inline-flex !important; align-items: center; justify-content: center; }
  .burger-btn svg line { transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center; }
  body.menu-open .burger-btn svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .burger-btn svg line:nth-child(2) { opacity: 0; }
  body.menu-open .burger-btn svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Mobile open menu */
  body.menu-open header nav {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0; right: 0;
    background: rgb(255, 255, 255) !important;
    flex-direction: column !important;
    padding: 24px 24px 28px !important;
    gap: 18px !important;
    border-top: 1px solid rgb(235, 233, 225);
    box-shadow: 0 12px 24px rgba(13, 20, 16, 0.08);
    z-index: 99 !important;
  }
  body.menu-open header nav a { font-size: 17px !important; }

  /* Stage container: tighter outer margins, no border-radius */
  .stage { max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

  /* Header: tighter padding, hide text nav, keep logo and contact button */
  header[style] { padding: 14px 20px !important; }
  header nav { display: none !important; }

  /* Section padding compressed */
  section[style] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding: 80px 64px"] { padding-top: 48px !important; padding-bottom: 36px !important; }
  section[style*="padding: 100px 64px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  section[style*="padding: 120px 64px"] { padding-top: 56px !important; padding-bottom: 32px !important; }
  section[style*="padding: 60px 64px"] { padding-top: 36px !important; padding-bottom: 32px !important; }
  section[style*="padding: 0px 64px 80px"] { padding-bottom: 48px !important; }
  section[style*="padding: 0px 64px 120px"] { padding-bottom: 40px !important; }
  section[style*="padding: 0px 64px 0px"] { padding-bottom: 0 !important; }
  section[style*="padding: 0px 64px"] { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Two-column profile/methodik grids (200px label / 1fr content) → stack */
  div[style*="grid-template-columns: 200px 1fr"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 200px 1fr"] > div:first-child { margin-bottom: 18px !important; }

  /* Partner cards (320px image / 1fr content) → stack */
  [style*="grid-template-columns: 320px 1fr"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 320px 1fr"] > div:first-child {
    min-height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 24px !important;
  }

  /* Hero portrait + text grid → stack */
  div[style*="grid-template-columns: 1fr 1fr"][style*="min-height: 480px"] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 32px !important;
  }
  div[style*="grid-template-columns: 1fr 1fr"][style*="min-height: 480px"] > div:first-child > div { aspect-ratio: 4/3 !important; }

  /* Card grids (3 columns and 2 columns) → stack to 1 col */
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA dark card: stack copy and button */
  div[style*="background: rgb(13, 20, 16)"][style*="border-radius: 28px"][style*="grid-template-columns: 1fr auto"] {
    display: block !important;
    padding: 36px 28px !important;
  }
  div[style*="background: rgb(13, 20, 16)"][style*="border-radius: 28px"] h2 { font-size: 28px !important; }
  div[style*="background: rgb(13, 20, 16)"][style*="border-radius: 28px"] > div:last-child { margin-top: 24px !important; flex-wrap: wrap !important; }

  /* Headlines */
  h1[style] { font-size: 32px !important; line-height: 1.15 !important; }
  h2[style] { font-size: 26px !important; line-height: 1.2 !important; }
  h3[style] { font-size: 18px !important; }

  /* Hero green banner label */
  div[style*="display: inline-block"][style*="background: rgb(13, 115, 115)"][style*="padding: 16px 28px"] {
    padding: 10px 18px !important;
    margin-bottom: 24px !important;
  }
  div[style*="display: inline-block"][style*="background: rgb(13, 115, 115)"][style*="padding: 16px 28px"] span {
    font-size: 30px !important;
  }

  /* Hero background image height */
  div[style*="height: 520px"][style*="background-image"] { height: 280px !important; }
  div[style*="height: 520px"][style*="overflow: hidden"] { height: 280px !important; }

  /* Padding-left 260px (used on hero text indent) */
  div[style*="padding-left: 260px"] { padding-left: 0 !important; }

  /* Logo grids (publishers etc.) — fewer columns */
  div[style*="grid-template-columns: repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: stack columns */
  footer[style] > div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  footer[style] { padding: 40px 20px 24px !important; }

  /* Films/articles grids on filmbeitraege & cases */
  div[style*="grid-template-columns: 120px 220px 1fr 100px"] {
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
  }
  div[style*="grid-template-columns: 120px 220px 1fr 100px"] > span:nth-child(2),
  div[style*="grid-template-columns: 120px 220px 1fr 100px"] > span:last-child { display: none !important; }

  /* Float figure (e.g., on Über mich) — drop float */
  figure[style*="float: right"] { float: none !important; margin: 0 0 18px !important; width: 100% !important; }

  /* Timeline grid (Über mich) — narrower first column */
  div[style*="grid-template-columns: 140px 32px 1fr"] { grid-template-columns: 96px 24px 1fr !important; }
  div[style*="left: 156px"] { left: 108px !important; }

  /* Reduce article inner paddings */
  article[style*="padding: 28px 28px 24px"],
  article[style*="padding: 32px 36px"] { padding: 20px 22px !important; }
  article[style*="padding: 36px 40px"] > div { padding: 24px 22px !important; }

  /* Methodik 240/1fr grid (forensik / dfa pages) → stack */
  div[style*="grid-template-columns: 240px 1fr"] { display: block !important; }
  div[style*="grid-template-columns: 240px 1fr"] > h3 { margin-bottom: 8px !important; }

  /* Book detail pages: hero cover (380px) + content → stack */
  div[style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Book hero cover: full-bleed on mobile, scrolls away normally (no sticky) */
  div[style*="grid-template-columns: 380px 1fr"] > div:first-child {
    position: static !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
  }
  div[style*="grid-template-columns: 380px 1fr"] > div:first-child > div {
    border-radius: 0 !important;
    box-shadow: none !important;
    aspect-ratio: auto !important;
  }
  div[style*="grid-template-columns: 380px 1fr"] > div:first-child img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Info-row layouts (label-narrow + value) → stack */
  div[style*="grid-template-columns: 140px 1fr"],
  div[style*="grid-template-columns: 180px 1fr"] {
    display: block !important;
  }
  div[style*="grid-template-columns: 140px 1fr"] > *:first-child,
  div[style*="grid-template-columns: 180px 1fr"] > *:first-child { margin-bottom: 4px !important; }

  /* Generic header row title + action */
  div[style*="grid-template-columns: 1fr auto"][style*="align-items: flex-end"] {
    display: block !important;
  }

  /* Table-of-contents rows: keep 3-col but tighter */
  div[style*="grid-template-columns: 60px 1fr auto"],
  div[style*="grid-template-columns: 80px 1fr auto"] {
    grid-template-columns: 36px 1fr auto !important;
    gap: 12px !important;
  }
  div[style*="grid-template-columns: 60px 1fr"]:not([style*="auto"]) {
    grid-template-columns: 36px 1fr !important;
  }
}

@media (max-width: 640px) {
  /* Even tighter side padding */
  section[style] { padding-left: 16px !important; padding-right: 16px !important; }
  header[style] { padding: 12px 16px !important; gap: 8px !important; }
  header img[alt="Steven Broschart"] { height: 40px !important; }
  header a[href="kontakt.html"] { padding: 8px 14px !important; font-size: 13px !important; }

  /* Headlines smaller still */
  h1[style] { font-size: 28px !important; }
  h2[style] { font-size: 22px !important; }
  div[style*="display: inline-block"][style*="background: rgb(13, 115, 115)"][style*="padding: 16px 28px"] span { font-size: 26px !important; }

  /* Hero image height */
  div[style*="height: 520px"][style*="background-image"] { height: 220px !important; }
  div[style*="height: 520px"][style*="overflow: hidden"] { height: 220px !important; }

  /* Logo grids: 2 cols */
  div[style*="grid-template-columns: repeat(6, 1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: single column */
  footer[style] > div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Stack pill rows / buttons on hero */
  div[style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }

  /* Films table: drop second column too on narrow */
  div[style*="grid-template-columns: 120px 220px 1fr 100px"] > span:first-child { display: none !important; }
  div[style*="grid-template-columns: 120px 220px 1fr 100px"] { grid-template-columns: 1fr !important; }

}