/* Boxen werden 3-spaltig */
@media(max-width: 1180px) {

  .outside_box {
    max-width: 286px;
    width: 33.3% !important;
  }
}

/* Boxen werden 2-spaltig */
@media(max-width: 870px) {

  .outside_box {
    width: 50% !important;
  }
}

/* Boxen werden 1-spaltig */
@media(max-width: 585px) {
  .outside_box {
    width: 100% !important;
  }
}

/* Inhalt wird 3-spaltig */
@media(max-width: 1000px) {
  .content-text.vierspaltig {
    column-count: 3 !important;
    -moz-column-count: 3 !important;
    -webkit-column-count: 3 !important;
  }
}

/* Inhalt wird 2-spaltig */
@media(max-width: 700px) {
  .content-text.vierspaltig,
  .content-text.dreispaltig {
    -moz-column-count: 2 !important;
    -webkit-column-count: 2 !important;
    column-count: 2 !important;
  }
}

/* Inhalt wird 1-spaltig */
@media(max-width: 450px) {
  .content-text.vierspaltig,
  .content-text.dreispaltig,
  .content-text.zweispaltig {
    -moz-column-count: 1 !important;
    -webkit-column-count: 1 !important;
    column-count: 1 !important;
  }
}

/* Header oben ausblenden */
@media(max-width: 550px) { /* Anpassung je nach Anzahl der Menüpunkte notwendig */
  #top-header {
    display: none;
  }
  /* Oder nur Navigation:
  #nav-top-right {
    display: none;
  }*/

  /* Abstand zu Inhalt */
  #imageslider {
    margin-top: 185px !important;
  }
}

/* Hauptnavigation ein-/ausklappbar */
@media(max-width:1090px) { /* Anpassung je nach Anzahl der Menüpunkte notwendig */
  /* Logo zentriert über Button */
  #logo {
    display: block;
    text-align: center;
  }

  /* Abstand zu Inhalt */
  #imageslider {
    margin-top: 235px;
  }

  /* Button einblenden */
  #button-top {
    display: inline-block;
  }

  /* Hauptnavigation */
  #nav-header {
    display: none;
    float: none;
    position: initial;
  }

  #nav-header.open {
    display: block;
  }

  #nav-header {
    margin: 0 !important;
  }

  #nav-header li {
    display: block !important;
    text-align: center !important;
  }

  #nav-header a,
  #nav-header a:hover { /* Anpassung je nach Gestaltung der Navigation notwendig */
    border-bottom-color: #FFF !important;
    border-bottom-width: 1px !important;
    display: block;
    float: none !important;
    margin-bottom: 0 !important;
  }

  #nav-header ul ul { /* Anpassung je nach Gestaltung der Navigation notwendig */
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
    position: static !important;
  }
}

/* Navigation unten untereinander */
@media(max-width: 1070px) { /* Anpassung je nach Anzahl der Menüpunkte notwendig */
  #nav-bottom li {
    border-right: none !important;
    display: block !important;
    float: none;
  }
}

































/* CSS außerhalb von @media wird immer angewendet, überschreibt/korrigiert teilweise
   anderes CSS und kann eigentlich in die normalen Dateien integriert werden */

/* Kein Blocksatz */
#content_text,
.zeile,
.zeile_details {
/*  text-align: left;*/
}

/* Überschriften */
section#main h1, section#two h1, section#three h1, section#four h1, section.popup h1 {
/*  line-height: 2rem;*/
/*  padding: 15px 0;*/
}

section#main h2, section#two h2, section#three h2, section#four h2, section.popup h2 {
/*  line-height: 1.7rem;*/
/*  margin: 10px 0;*/
}

section#main h3, section#two h3, section#three h3, section#four h3, section.popup h3 {
/*  line-height: inherit;*/
/*  margin: 10px 0;*/
}

/* Alle anderen */
@media(max-width: 500px) {
  ul#allother.kategorie li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 501px) and (max-width: 900px) {
  ul#allother.kategorie li {
    max-width: none;
    width: 50%;
  }
}

@media(min-width: 901px) and (max-width: 1050px) {
  ul#allother.kategorie li {
    max-width: none;
    width: 33.3%;
  }
}

/* Boxen */
@media(max-width: 500px) {
  ul.content_box li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 501px) and (max-width: 850px) {
  ul.content_box li {
    max-width: none;
    width: 50%;
  }
}

/* Domains */
@media(max-width: 380px) {
  ul#domains.kategorie li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 381px) and (max-width: 580px) {
  ul#domains.kategorie li {
    max-width: none;
    width: 50%;
  }
}

@media(min-width: 581px) and (max-width: 950px) {
  ul#domains.kategorie li {
    max-width: none;
    width: 33.3%;
  }
}

@media(min-width: 951px) and (max-width: 1130px) {
  ul#domains.kategorie li {
    max-width: none;
    width: 25%;
  }
}

/* FAQ */
@media(max-width: 450px) {
  ul.kat_faq li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 451px) and (max-width: 900px) {
  ul.kat_faq li {
    max-width: none;
    width: 50%;
  }
}

/* Galerie */
@media(max-width: 350px) {
  ul.kat_galerie li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 351px) and (max-width: 500px) {
  ul.kat_galerie li {
    max-width: none;
    width: 50%;
  }
}

@media(min-width: 501px) and (max-width: 700px) {
  ul.kat_galerie li {
    max-width: none;
    width: 33.3%;
  }
}

/* Hosting */
@media(max-width: 450px) {
  ul#hosting.kategorie li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 451px) and (max-width: 600px) {
  ul#hosting.kategorie li {
    max-width: none;
    width: 50%;
  }
}

@media(min-width: 601px) and (max-width: 1000px) {
  ul#hosting.kategorie li {
    max-width: none;
    width: 33.3%;
  }
}

/* Projekte */
@media(max-width: 450px) {
  ul.projekte li {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 451px) and (max-width: 900px) {
  ul.projekte li {
    max-width: none;
    width: 50%;
  }
}

/* RBL-Check */
@media(max-width: 550px) {
  #border-blacklist {
    max-width: none;
    width: 100%;
  }
}

@media(min-width: 551px) and (max-width: 1000px) {
 #border-blacklist {
    max-width: none;
    width: 50%;
  }
}

/* Warenkorb */
/*
#zahlarten.kategorie li {
  max-width: 295px;
  width: 100% !important;
}

#button.gutscheinform {
  max-width: 400px;
  width: 100% !important;
}
*/
/* Whois */
@media(max-width: 900px) {
  li#ergebnis_whois.whois_abfrage {
    max-width: none;
    width: 100%;
  }
}

/* Whois oben ausblenden */
@media(max-width: 470px) {
  #whois_top {
    display: none;
  }
}

/* Header bei zu geringer Höhe nicht oben fixiert */
@media(max-height: 600px) { /* Anpassung je nach Höhe des Headers notwendig */
  #fixedontop {
    position: relative;
  }
}

/* Navigation links ein-/ausklappbar */
@media(max-width: 800px) { /* Anpassung je nach Breite von #main und vorhandenem aside notwendig */
  #nav-left {
    display: none;
  }

  #nav-left.open {
    display: block;
    position: absolute;
  }

  section#main.with-nav {
    margin-left: 0;
  }

  section#main.nav-left-open {
    left: 230px;
    margin-left: 15px;
    position: relative;
  }

  #container {
    overflow: hidden;
  }

  /* Button */
  #button-left {
    display: inline-block;
  }
}



/* Aside ausblenden */
@media(max-width: 1000px) { /* Anpassung je nach Breite von #main und linker Navigation notwendig */
  /* Aside */
  aside {
    display: none;
  }

  /* Inhalt */
  #main.with-aside {
    margin-right: 0 !important;
  }
}

/* "Hosting durch" im Fluss */
@media(max-width: 1320px) {
  .hostings {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 0;
    position: initial;
  }
}

/* Formularfelder umbrechen */
@media(max-width: 570px) {
  label.forms {
    float: none !important;
    display: block;
  }
}

/* Preise untereinander */
@media(max-width: 520px) {
  #preis {
    border-right: none;
    display: block;
    float: none;
  }
}

/* Warenkorb-Schritte ausblenden */
@media(max-width: 650px) {
  .step_wk {
    display: none !important;
  }
}

@media (max-width: 725px) {
  #header-wk,
  #header-wk-aktiv {
    margin-top: -55px;
  }
  #header-wk ul,
  #header-wk-aktiv ul {
    padding: 0;
    width: 132px;
  }
  #header-wk-aktiv ul ul,
  #header-wk span,
  #header-wk-aktiv span {
    display: none !important;
  }
}

@media (max-width: 1070px) {
  /* Produkte im Warenkorb scrollbar */
  #rahmen_wk_wrapper {
    overflow-x: scroll;
  }
}

@media (max-width: 980px) {
  /* Mobil-Variante der Warenkorb-Schritt anzeigen */
  #step_wk {
    display: none;
  }
  #step_wk_mobil {
    display: block;
  }
  /* Preisdetails untereinander */
  #preisbox_details #preis,
  #preisbox_details #laufzeit,
  #preisbox_details #zeile_wk_button {
    border-right: none;
    float: none;
  }
  #preisbox_details #preis,
  #preisbox_details #laufzeit {
    margin-bottom: 10px;
  }
}

@media (max-width: 1120px) {
  /* Bezahlmöglichkeiten */
  #rahmen_payment {
    height: auto;
  }
  #payment_beschreibung {
    line-height: 15px;
    margin-bottom: 10px;
    text-align: left;
    width: auto;
  }
  #payment_beschreibung,
  #payment_image,
  #rahmen_sepa_form {
    float: none;
    margin-left: 15px;
  }
}
@media (max-width: 700px) {
  /* Slider ausblenden*/
  #imageslider #wrapper {
    display: none;
  }
}



@media (max-width: 740px) {
  section form[name="pers_daten_form"] div#forms > input#hn,
  section form[name="pers_daten_form"] div#forms > input#plz,
  section form[name="pers_daten_form"] div#forms > input[name="ort"],
  section form[name="pers_daten_form"] div#forms > input[name="lastname"] {
    margin-top: 5px;
  }
}