/* mobile.css - Mobile Ansicht fuer praxis-tempel.de
   Wird NACH css/style.css eingebunden. Der Desktop bleibt unveraendert. */

/* Menue-Button: am Desktop unsichtbar */
.menu-toggle { display: none; }

@media screen and (max-width: 820px) {

  /* Grundlagen */
  body { font-size: 100%; background-attachment: scroll; background-size: cover; }
  img { max-width: 100%; height: auto; }
  img.bg { display: none; }               /* festes Hintergrundbild (min. 1024px breit) aus */
  iframe, table { max-width: 100%; }

  /* Seitengeruest */
  #main { width: auto; margin: 0; }
  header { margin: 0; }
  #logo { width: auto; height: 70px; background-size: contain; background-position: center; }

  /* Navigation */
  nav {
    float: none; width: auto; height: auto; margin: 0;
    border-radius: 0; background: #4A4E44;
  }
  .menu-toggle {
    display: block; width: 100%; padding: 14px 16px;
    border: 0; background: #3a3d35; color: #fff;
    font-size: 1.1em; text-align: left; cursor: pointer;
  }
  /* Menue nur einklappen, wenn der Button per JavaScript da ist */
  nav.has-toggle ul#nav { display: none; }
  nav.has-toggle.open ul#nav { display: block; }

  ul#nav { float: none; width: auto; }
  ul.sf-menu li { float: none; }
  ul#nav li a {
    padding: 14px 16px; margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  span.sf-arrow { display: none; }

  /* Untermenues: auf dem Handy immer aufgeklappt und eingerueckt */
  ul.sf-menu ul,
  ul.sf-menu ul ul {
    position: static !important; display: block !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    opacity: 1 !important; visibility: visible !important;
    margin: 0 !important; background: #3a3d35;
  }
  ul.sf-menu ul li { float: none; width: auto !important; }
  ul#nav ul li a { padding-left: 32px; }
  ul#nav ul ul li a { padding-left: 48px; }

  /* Inhalt: erst Text, dann Seitenleiste */
  #site_content {
    width: auto; margin: 0; background: #EBEDD3;
    display: flex; flex-direction: column;
  }
  #content {
    order: 1; width: auto; text-align: left;
    height: auto !important;               /* ueberschreibt style="height:500px" */
  }
  #content_item { width: auto; padding: 10px 16px; }

  #sidebar_container {
    order: 2; float: none; width: auto; padding: 10px 16px;
    background: #dfe2c4;
    height: auto !important;               /* ueberschreibt style="height:500px" */
  }
  .sidebar { float: none; width: auto; padding: 0; margin: 0; }
  .sidebar:nth-child(n+2) { display: none; }   /* leere Platzhalter-Spalten */
  .sidebar br { display: none; }
  .sidebar b { display: block; margin-bottom: 0.6em; }
  .sidebar b:empty { display: none; }

  /* Formulare (Kontaktseite) */
  .form_settings span { float: none; display: block; width: auto; }
  input, textarea { max-width: 100%; }

  /* Fusszeile */
  footer {
    width: auto; height: auto; padding: 12px 8px;
    border-radius: 0; line-height: 1.8;
  }
}