/* Mobile-Ergaenzungen fuer Kaminholz-Kuelbel.de
   Desktop-Layout bleibt oberhalb 820px unveraendert. */
.mobile-only { display: none; }

@media (max-width: 820px) {
  html, body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  #container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px 24px !important;
    box-sizing: border-box;
    position: relative !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left !important;
  }

  /* Rein dekorative Flaechen des alten 800px-Layouts werden mobil ausgeblendet. */
  #wb_Shape1, #wb_Shape2, #wb_Shape3, #wb_Shape4, #wb_Shape5, #wb_Shape8,
  #wb_Image2, #wb_Text7 {
    display: none !important;
  }

  #wb_Image3, #wb_Image4,
  #wb_Image1,
  #wb_Text1, #wb_Text2, #wb_Text3,
  #wb_Text5, #wb_Text6, #wb_Text8,
  #wb_Privacy,
  #Marquee1 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  #wb_Image3 { order: 1; margin: 0 !important; }
  #wb_Image4 { order: 3; margin: 0 !important; }

  #wb_Image3 img, #wb_Image4 img, #wb_Image1 img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  nav[aria-label="Hauptnavigation"] {
    order: 2;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 4px 0 2px;
    text-align: center !important;
    line-height: 1.4;
  }

  nav[aria-label="Hauptnavigation"] span,
  nav[aria-label="Hauptnavigation"] strong {
    font-size: 0 !important;
  }

  nav[aria-label="Hauptnavigation"] a {
    display: inline-block;
    margin: 3px 2px;
    padding: 8px 9px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  #wb_Text5 {
    order: 90;
    margin-top: 10px;
    padding: 10px 4px;
    text-align: center !important;
    line-height: 1.45;
  }

  #wb_Text5 span { font-size: 11px !important; }

  #wb_Text6, #wb_Text8, body.page-wissen #wb_Text1, #wb_Privacy {
    padding: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  #wb_Text6, #wb_Text8, body.page-wissen #wb_Text1 {
    background: rgba(0,0,0,0.14) !important;
  }

  #wb_Text6 span, #wb_Text8 span, body.page-wissen #wb_Text1 span {
    line-height: 1.45 !important;
  }

  #wb_Text6 h1, #wb_Text6 h2,
  #wb_Text8 h1, #wb_Text8 h2,
  body.page-wissen #wb_Text1 h1, body.page-wissen #wb_Text1 h2,
  #wb_Privacy h2, #wb_Privacy h3 {
    max-width: 100%;
  }

  #wb_Image1 {
    overflow: hidden;
  }

  #Marquee1 {
    order: 80;
    min-height: 38px;
    margin: 2px 0 0;
    overflow: hidden;
  }

  #Marquee1 span, #Marquee1 a {
    font-size: 18px !important;
  }

  .mobile-only { display: block !important; }


  /* Etwas groessere Leseschrift auf kleinen Displays. */
  body.page-produkte #wb_Text8 span { font-size: 15px !important; }
  body.page-dienstleistungen #wb_Text6 span { font-size: 20px !important; }
  body.page-dienstleistungen #wb_Text6 h2 { font-size: 22px !important; }
  body.page-kontakt #wb_Text6 span { font-size: 15px !important; }
  body.page-kontakt #wb_Privacy { font-size: 14px !important; }

  /* Startseite */
  body.page-index #wb_Text8 { order: 4; text-align: left !important; }
  body.page-index #wb_Image1 { order: 5; }
  body.page-index #wb_Text6 { order: 6; }

  /* Produkte */
  body.page-produkte #wb_Text8 { order: 4; text-align: left !important; }
  body.page-produkte #wb_Image1 { order: 5; }
  body.page-produkte #wb_Text6 { order: 6; }
  body.page-produkte #wb_JavaScript1,
  body.page-produkte #wb_JavaScript2 { display: none !important; }

  /* Dienstleistungen */
  body.page-dienstleistungen #wb_Text8 { order: 4; text-align: left !important; }
  body.page-dienstleistungen #wb_Image1 { order: 5; }
  body.page-dienstleistungen #wb_Text6 { order: 6; }

  /* Wissenswertes */
  body.page-wissen #wb_Image1 { order: 4; }
  body.page-wissen #wb_Text1 { order: 5; }
  body.page-wissen #wb_Text1 h2 {
    display: block !important;
    margin-top: 16px !important;
    margin-bottom: 3px !important;
  }

  /* Kontakt / Impressum / Datenschutz */
  body.page-kontakt #wb_Text8 {
    order: 4;
    padding-bottom: 0 !important;
    background: transparent !important;
  }
  body.page-kontakt #wb_Text8 span,
  body.page-kontakt #wb_Text8 h2 { display: none !important; }
  body.page-kontakt #wb_Text6 { order: 5; }
  body.page-kontakt #wb_Privacy {
    order: 6;
    margin-top: 4px;
    background: rgba(0,0,0,0.18) !important;
  }
  body.page-kontakt #wb_Privacy p { margin: 0 0 12px; }
  body.page-kontakt #wb_Privacy h3 { margin: 18px 0 5px; }
}