/* Responsive layer for the desktop-first prototype (injected by build.sh into every page).
   The prototype styles everything inline, so rules match the browser-serialized style
   attribute ("minmax(0px, 6fr)") and need !important to beat it. */

html, body { overflow-x: clip; }

@media (max-width: 1100px) {
  /* Footer link directory 5 → 3 columns */
  footer [style*="grid-template-columns: repeat(5, "] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(5, "] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(4, "] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  /* ---------- Nav: logo + button on one row, links as a swipeable row below ---------- */
  nav[style*="position: sticky"] { flex-wrap: wrap !important; gap: 10px 16px !important; padding: 12px 16px 0 !important; }
  nav[style*="position: sticky"] > a:first-child span:last-child { font-size: 24px !important; }
  nav[style*="position: sticky"] > button { padding: 7px 14px !important; font-size: 13px !important; }
  nav[style*="position: sticky"] > div {
    order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 16px 10px;
    gap: 16px !important; font-size: 13.5px !important; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  nav[style*="position: sticky"] > div::-webkit-scrollbar { display: none; }

  /* ---------- Page gutters & rhythm ---------- */
  main { padding-left: 16px !important; padding-right: 16px !important; gap: 56px !important; }
  [style*="padding: 0px 40px"], [style*="padding: 18px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding-top: 56px"] { padding-top: 24px !important; }

  /* ---------- Grids: two-part layouts stack ---------- */
  [style*="grid-template-columns: minmax(0px, "],
  [style*="grid-template-columns: 1fr 1fr"],
  /* repeat(2|3) with a small gap are stat blocks / chart columns: keep those side by side */
  [style*="grid-template-columns: repeat(2, "]:not([style*="gap: 8px"], [style*="gap: 10px"], [style*="gap: 12px"]),
  [style*="grid-template-columns: repeat(3, "]:not([style*="gap: 8px"], [style*="gap: 10px"], [style*="gap: 12px"]),
  [style*="grid-template-columns: 200px minmax"],
  [style*="grid-template-columns: 180px minmax"],
  [style*="grid-template-columns: 140px minmax"],
  [style*="grid-template-columns: 120px minmax(0px, 1fr);"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
  [style*="grid-column: span"] { grid-column: 1 / -1 !important; }

  /* Sticky sidebars become normal flow */
  :not(nav)[style*="position: sticky"] { position: static !important; }

  /* ---------- Type scale ---------- */
  [style*="font-size: 56px"], [style*="font-size: 54px"], [style*="font-size: 52px"] { font-size: 40px !important; }
  [style*="font-size: 48px"], [style*="font-size: 46px"], [style*="font-size: 44px"] { font-size: 34px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"], [style*="font-size: 36px"] { font-size: 30px !important; }
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
  p, li, dd { overflow-wrap: break-word; }

  /* ---------- Big padded surfaces ---------- */
  [style*="padding: 56px"], [style*="padding: 48px"], [style*="padding: 44px"], [style*="padding: 40px"] { padding: 28px 20px !important; }
  [style*="padding: 36px"], [style*="padding: 32px"] { padding: 24px 18px !important; }
  [style*="border-radius: 32px"] { border-radius: 24px !important; }

  /* Hero / feature images: desktop min-heights are far too tall on a phone */
  [style*="min-height: 640px"], [style*="min-height: 560px"], [style*="min-height: 520px"],
  [style*="min-height: 480px"], [style*="min-height: 460px"], [style*="min-height: 420px"] { min-height: 300px !important; }
  [style*="min-height: 320px"], [style*="min-height: 300px"] { min-height: 200px !important; }

  /* Floating chips hang outside their photo on desktop; keep them inside on a phone */
  [style*="position: absolute"][style*="left: -"] { left: 12px !important; }
  [style*="position: absolute"][style*="right: -"] { right: 12px !important; }

  /* Tagesgeld "zwei Zinssätze" timeline: name on its own line, bar + effective rate below */
  [style*="grid-template-columns: 200px minmax(0px, 1fr) 110px"] { grid-template-columns: minmax(0, 1fr) 64px !important; gap: 8px 12px !important; }
  [style*="grid-template-columns: 200px minmax(0px, 1fr) 110px"] > :first-child { grid-column: 1 / -1; }

  /* Zinsleiter page ladder rows: drop the logo column, give the bank text room */
  [style*="grid-template-columns: 76px 44px"] { grid-template-columns: 52px minmax(0, 1fr) auto !important; }
  [style*="grid-template-columns: 76px 44px"] > :nth-child(2) { display: none !important; }

  /* EZB timeline (date · dot · card) */
  [style*="grid-template-columns: 110px 28px"] { grid-template-columns: 64px 18px minmax(0, 1fr) !important; gap: 0 8px !important; }

  /* Zinsalarm type picker: three stacked choices read better than three slivers */
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px"] { grid-template-columns: minmax(0, 1fr) !important; }

  input[style*="width: 100%"], textarea[style*="width: 100%"] { box-sizing: border-box !important; }

  /* Rechner year table */
  [style*="grid-template-columns: 60px 1fr 1fr 1fr"] { grid-template-columns: 30px repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; font-size: 12.5px !important; }

  /* 24-month chart: per-bar values collide at phone width; keep every 3rd month label */
  [style*="grid-template-columns: repeat(24, "][style*="align-items: end"] span { display: none; }
  [style*="grid-template-columns: repeat(24, "][style*="align-items: end"] { gap: 2px !important; }
  [style*="grid-template-columns: repeat(24, "][style*="font-size: 10px"] { gap: 2px !important; font-size: 9px !important; }
  [style*="grid-template-columns: repeat(24, "][style*="font-size: 10px"] > span:not(:nth-child(3n+1)) { visibility: hidden; }

  /* KPI figures ("3,35 %") must not break before the percent sign */
  [style*="font-family: \"Instrument Serif\""][style*="font-size: 34px"] { white-space: nowrap; }

  /* Laufzeit-Matrix: narrower bank column, still scrolls sideways inside its card */
  [style*="grid-template-columns: 200px repeat(7"] { grid-template-columns: 118px repeat(7, minmax(66px, 1fr)) !important; min-width: 600px !important; }

  /* Staircase indent of ladder rows eats width */
  [style*="grid-template-columns: 76px"] { margin-left: 0 !important; gap: 12px !important; padding: 14px 16px !important; }
}

@media (max-width: 600px) {
  [style*="grid-template-columns: repeat(4, "] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5, "] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  footer [style*="grid-template-columns: repeat(5, "] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 16px !important; }
  footer [style*="padding: 0px 40px"], footer [style*="padding: 48px 40px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Comparison table (Vergleichstabelle) → one card per bank ---------- */
@media (max-width: 760px) {
  table[style*="min-width: 1200px"] { min-width: 0 !important; display: block; }
  table[style*="min-width: 1200px"] > thead,
  table[style*="min-width: 1200px"] > tbody { display: block; }

  /* Header row becomes a swipeable strip of sort chips */
  table[style*="min-width: 1200px"] > thead > tr {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 14px; scrollbar-width: none;
  }
  table[style*="min-width: 1200px"] > thead > tr::-webkit-scrollbar { display: none; }
  table[style*="min-width: 1200px"] > thead th { padding: 0 !important; flex: none; }
  table[style*="min-width: 1200px"] > thead th:is(:nth-child(1), :nth-child(10), :nth-child(11)) { display: none; }
  table[style*="min-width: 1200px"] > thead th button {
    padding: 7px 12px !important; border: 1px solid rgba(22,38,31,.15) !important; border-radius: 999px !important;
    background: #fffdf9 !important; white-space: nowrap !important;
  }

  table[style*="min-width: 1200px"] > tbody > tr:not(:has(> td[colspan])) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px;
    padding: 18px 16px; position: relative;
  }
  table[style*="min-width: 1200px"] > tbody > tr > td { padding: 0 !important; min-width: 0 !important; text-align: left !important; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(1) { position: absolute; top: 16px; right: 16px; font-size: 18px !important; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; padding-right: 28px !important; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(3) { font-size: 24px !important; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(5) { display: none; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(n+3):nth-child(-n+10)::before {
    display: block; margin-bottom: 4px; font-family: Manrope, system-ui, sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: #6b7a72; line-height: 1.2;
  }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(3)::before { content: "Zins"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(4)::before { content: "Effektiv"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(6)::before { content: "Netto"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(7)::before { content: "Sicherung"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(8)::before { content: "Mindestanlage"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(9)::before { content: "Bewertung"; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(10) { display: flex; align-items: center; gap: 8px; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(10)::before { content: "Merken"; margin: 0; }
  table[style*="min-width: 1200px"] > tbody > tr > td:nth-child(11) { grid-column: 2 / -1; align-self: center; }

  /* Expanded details row */
  table[style*="min-width: 1200px"] > tbody > tr:has(> td[colspan]) { display: block; }
  table[style*="min-width: 1200px"] > tbody > tr:has(> td[colspan]) > td:first-child { display: none; }
  table[style*="min-width: 1200px"] > tbody > tr > td[colspan] { display: block; padding: 18px 16px 22px !important; }
}