/* Responsive-Layer für die statischen Seiten.
   Die Seiten tragen ihr Layout in Inline-Styles; deshalb arbeiten die Regeln
   hier mit Attribut-Selektoren auf genau diese Inline-Werte und mit !important.
   Breakpoint 900px = derselbe wie im Block-Theme (theme/groenninger/assets/css/base.css). */

/* ---------- Tablet und schmaler: Sidebar klappt nach oben ---------- */
@media (max-width: 900px) {

  /* Flex-Container Sidebar|Main -> untereinander */
  #dc-root > .sc-host > div[style*="display: flex"] {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  /* Sidebar: nicht mehr sticky, volle Breite, Trennlinie unten statt rechts */
  #dc-root aside {
    position: static !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgb(228, 232, 236) !important;
    padding: 20px !important;
  }

  /* Navigation waagerecht umbrechen statt als hohe Spalte */
  #dc-root aside nav {
    margin-top: 20px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  #dc-root aside nav a { padding: 8px 10px !important; }

  /* Kontaktblock am Sidebar-Fuß: kein auto-Abstand mehr nötig */
  #dc-root aside > div:last-child {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }

  /* Seitenränder: 64px sind auf schmalen Displays zu viel */
  #dc-root main > section,
  #dc-root main > footer,
  #dc-root main > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Footer: Text und Logo untereinander */
  #dc-root main > footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  /* Typografie zurücknehmen */
  #dc-root h1 { font-size: 30px !important; line-height: 1.2 !important; }
  #dc-root h2 { font-size: 22px !important; }
  #dc-root h3 { font-size: 19px !important; }
  #dc-root .lead { font-size: 17px !important; }

  /* Lange Fachwörter (Grundstücksentwässerung …) dürfen brechen */
  #dc-root h1, #dc-root h2, #dc-root h3, #dc-root h4, #dc-root p, #dc-root span, #dc-root dd {
    overflow-wrap: break-word;
  }

  /* ---------- Raster ---------- */

  /* Zweispaltig -> einspaltig */
  #dc-root [style*="grid-template-columns: 260px 1fr"],
  #dc-root [style*="grid-template-columns: 220px 1fr"],
  #dc-root [style*="grid-template-columns: 210px 1fr"],
  #dc-root [style*="grid-template-columns: 190px 1fr"],
  #dc-root [style*="grid-template-columns: 1fr 1fr"],
  #dc-root [style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Schmale Marker-Spalten dürfen schrumpfen */
  #dc-root [style*="grid-template-columns: 84px 1fr"],
  #dc-root [style*="grid-template-columns: 120px 1fr auto"] {
    grid-template-columns: 60px 1fr auto !important;
    gap: 12px !important;
  }

  /* Leistungstabelle  Nr. | Leistung | Beschreibung
     -> Nr. | Leistung, Beschreibung darunter eingerückt */
  #dc-root [style*="grid-template-columns: 54px 178px 1fr"] {
    grid-template-columns: 40px 1fr !important;
  }
  #dc-root [style*="grid-template-columns: 54px 178px 1fr"] > :nth-child(3) {
    grid-column: 2 !important;
    margin-top: 4px !important;
  }

  /* Stundensätze  Position | Preis | Minimum
     -> Position volle Breite, Zahlen darunter nebeneinander */
  #dc-root [style*="grid-template-columns: 1fr 130px 110px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px 12px !important;
  }
  #dc-root [style*="grid-template-columns: 1fr 130px 110px"] > :first-child {
    grid-column: 1 / -1 !important;
  }

  /* Beispielrechnungen  Posten | Menge | Einzelpreis | Summe
     -> Posten volle Breite, drei Zahlen darunter nebeneinander */
  #dc-root [style*="grid-template-columns: 1fr 80px 100px 110px"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px 10px !important;
  }
  #dc-root [style*="grid-template-columns: 1fr 80px 100px 110px"] > :first-child {
    grid-column: 1 / -1 !important;
  }

  /* Bilder nie breiter als ihr Container */
  #dc-root img { max-width: 100% !important; height: auto !important; }
}

/* ---------- Handy ---------- */
@media (max-width: 560px) {
  #dc-root main > section,
  #dc-root main > footer,
  #dc-root main > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #dc-root aside { padding: 16px !important; }
  #dc-root h1 { font-size: 26px !important; }
  #dc-root h2 { font-size: 20px !important; }

  /* Beispielrechnungen: drei Zahlenspalten werden zu eng -> Menge/Einzelpreis
     in eine Zeile, Summe rechts darunter */
  #dc-root [style*="grid-template-columns: 1fr 80px 100px 110px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}