/* Self-hosted fonts — no external requests, no cookies. Subsets: latin, latin-ext. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexsans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexsans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexsans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexsans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plexsans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plexsans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* 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;
  }

  /* Selbsthilfe: Reiniger-Zuordnung  Anschluss | Verstopfung | Empfehlung
     -> Anschluss volle Breite, Verstopfung und Empfehlung darunter */
  #dc-root [style*="grid-template-columns: 196px 168px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  /* Reiniger-Steckbriefe  Label | Text -> Label ueber dem Text */
  #dc-root [style*="grid-template-columns: 164px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !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;
  }
}

/* ---------- Unter-Navigation der Selbsthilfe-Seite ----------
   Auf schmalen Displays laeuft die Sidebar-Nav waagerecht um; die Einrueckung
   der Unterpunkte ergibt dort keinen Sinn mehr. */
@media (max-width: 900px) {
  #dc-root aside nav a.subnav {
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
  #dc-root aside nav a.subnav > span { display: none !important; }
}