/*** TD-Software Werkzeuge für responsive Layouts (c)02/2018 ***/
/*** Spaltenboxen für Mehrspaltige Anordnung ***/
/*Definition der Teilung*/
.box2er,
.box3er,
.box4er,
.box5er,
.box6er,
.box7er,
.box8er,
.box9er,
.box10er
{
  display: block;
  box-sizing: border-box;
  float:left;
  margin:0;
  padding:0;
}

.box2er{width:50%;}
.box3er{width:33.333%;}
.box4er{width:25%;}
.box5er{width:20%;}
.box6er{width:16.6666%;}
.box7er{width:14.2857%;}
.box8er{width:12.5%;}
.box9er{width:11.1111%;}
.box10er{width:10%;}

/* Definition der Mindestbreite (in Relation zur Seitenbreite) 
			Bei Spaltenboxen über 50% der Seitenbreite ->  box200min sorgt für 100px Mindestbreite der Box
*/

/*  .box4er.box300min{  width:33.333%}*/
/** Schalten auf 9er Breite 11.1111%  -> Alles was nicht mehr 10Spaltig sein kann**/
@media (max-width: 2000px) {
  .box10er.box200min {  width:11.1111%}
}

@media (max-width: 1000px) {
  .box10er.box100min {  width:11.1111%}
}

/** Schalten auf 8er Breite 12.5%  -> Alles was nicht mehr 9Spaltig sein kann**/
@media (max-width: 1800px) {
  .box9er.box200min,.box10er.box200min {  width:12.5%}
}
@media (max-width: 900px) {
  .box9er.box100min,.box10er.box100min {  width:12.5%}
}


/** Schalten auf 7er Breite 14.2857%  -> Alles was nicht mehr 8Spaltig sein kann**/
@media (max-width: 1600px) {
  .box8er.box200min,.box9er.box200min,.box10er.box200min {  width:14.2857%}
}
@media (max-width: 800px) {
  .box8er.box100min,.box9er.box100min,.box10er.box100min {  width:14.2857%}
}

/** Schalten auf 6er Breite 16.666%  -> Alles was nicht mehr 7Spaltig sein kann**/
@media (max-width: 2100px) {
  .box7er.box300min,.box8er.box300min,.box9er.box300min,.box10er.box300min {  width:16.6666%}
}
@media (max-width: 1400px) {
  .box7er.box200min,.box8er.box200min,.box9er.box200min,.box10er.box200min {  width:16.6666%}
}
@media (max-width: 700px) {
  .box7er.box100min,.box8er.box100min,.box9er.box100min,.box10er.box100min {  width:16.6666%}
}


/** Schalten auf 5er Breite 20%  -> Alles was nicht mehr 6Spaltig sein kann**/
@media (max-width: 1800px) {
  .box6er.box300min,.box7er.box300min,.box8er.box300min,.box9er.box300min,.box10er.box300min {  width:20%}
}

@media (max-width: 1200px) {
  .box6er.box200min,.box7er.box200min,.box8er.box200min,.box9er.box200min,.box10er.box200min {  width:20%}
}

@media (max-width: 600px) {
  .box6er.box100min,.box7er.box100min,.box8er.box100min,.box9er.box100min,.box10er.box100min {  width:20%}
}

/** Schalten auf 4er Breite 25%  -> Alles was nicht mehr 5Spaltig sein kann**/
@media (max-width: 2000px) {
  .box5er.box400min,.box6er.box400min,.box7er.box400min,.box8er.box400min,.box9er.box400min,.box10er.box400min {  width:25%}
}
@media (max-width: 1500px) {
  .box5er.box300min,.box6er.box300min,.box7er.box300min,.box8er.box300min,.box9er.box300min,.box10er.box300min {  width:25%}
}
@media (max-width: 1000px) {
  .box5er.box200min,.box6er.box200min,.box7er.box200min,.box8er.box200min,.box9er.box200min,.box10er.box200min {  width:25%}
}
@media (max-width: 500px) {
  .box5er.box100min,.box6er.box100min,.box7er.box100min,.box8er.box100min,.box9er.box100min,.box10er.box100min {  width:25%}
}

/** Schalten auf 3er Breite 33%  -> Alles was nicht mehr 4Spaltig sein kann**/

@media (max-width: 2000px) {
  .box4er.box500min,.box5er.box500min,.box6er.box500min,.box7er.box500min,.box8er.box500min,.box9er.box500min,.box10er.box500min {  width:33.333%}
}
@media (max-width: 1600px) {
  .box4er.box400min,.box5er.box400min,.box6er.box400min,.box7er.box400min,.box8er.box400min,.box9er.box400min,.box10er.box400min {  width:33.333%}
}

@media (max-width: 1200px) {
  .box4er.box300min,.box5er.box300min,.box6er.box300min,.box7er.box300min,.box8er.box300min,.box9er.box300min,.box10er.box300min {  width:33.333%}
}

@media (max-width: 800px) {
  .box4er.box200min,.box5er.box200min,.box6er.box200min,.box7er.box200min,.box8er.box200min,.box9er.box200min,.box10er.box200min {  width:33.333%}
}

@media (max-width: 400px) {
  .box4er.box100min,.box5er.box100min,.box6er.box100min,.box7er.box100min,.box8er.box100min,.box9er.box100min,.box10er.box100min {  width:33.333%}
}

/** Schalten auf 2er Breite 50%  -> Alles was nicht mehr 3Spaltig sein kann**/

@media (max-width: 1800px) {
  .box3er.box600min,.box4er.box600min,.box5er.box600min,.box6er.box600min,.box7er.box600min,.box8er.box600min,.box9er.box600min,.box10er.box600min {  width:50%}
}
@media (max-width: 1500px) {
  .box3er.box500min,.box4er.box500min,.box5er.box500min,.box6er.box500min,.box7er.box500min,.box8er.box500min,.box9er.box500min,.box10er.box500min {  width:50%}
}
@media (max-width: 1200px) {
  .box3er.box400min,.box4er.box400min,.box5er.box400min,.box6er.box400min,.box7er.box400min,.box8er.box400min,.box9er.box400min,.box10er.box400min {  width:50%}
}
@media (max-width: 900px) {
  .box3er.box300min,.box4er.box300min,.box5er.box300min,.box6er.box300min,.box7er.box300min,.box8er.box300min,.box9er.box300min,.box10er.box300min {  width:50%}
}
@media (max-width: 600px) {
  .box3er.box200min,.box4er.box200min,.box5er.box200min,.box6er.box200min,.box7er.box200min,.box8er.box200min,.box9er.box200min,.box10er.box200min {  width:50%}
}
@media (max-width: 300px) {
  .box3er.box100min,.box4er.box100min,.box5er.box100min,.box6er.box100min,.box7er.box100min,.box8er.box100min,.box9er.box100min,.box10er.box100min {  width:50%}
}


/** Schalten auf Volle Breite 100% -> Alles was nicht mehr 2Spaltig sein kann**/
@media (max-width: 1900px) {                                                                                       /*Naja, eine 10er müsste dann 900*10=9000px beriten Bildschirm haben*/
  .box2er.box900min, .box3er.box900min, .box4er.box900min, .box5er.box900min, .box6er.box900min, .box7er.box900min, .box8er.box900min, .box9er.box900min, .box10er.box900min{  width:100%}
}
@media (max-width: 1600px) {
  .box2er.box800min, .box3er.box800min, .box4er.box800min, .box4er.box800min, .box4er.box800min, .box4er.box800min, .box4er.box800min, .box4er.box800min, .box4er.box800min	{  width:100%}
}

@media (max-width: 1400px) {
  .box2er.box700min, .box3er.box700min, .box4er.box700min, .box5er.box700min, .box6er.box700min, .box7er.box700min, .box8er.box700min, .box9er.box700min, .box10er.box700min{  width:100%}
}

@media (max-width: 1200px) {
  .box2er.box600min, .box3er.box600min, .box4er.box600min, .box5er.box600min, .box6er.box600min, .box7er.box600min, .box8er.box600min, .box9er.box600min, .box10er.box600min{  width:100%}
}

@media (max-width: 1000px) {
  .box2er.box500min, .box3er.box500min, .box4er.box500min, .box5er.box500min, .box6er.box500min, .box7er.box500min, .box8er.box500min, .box9er.box500min, .box10er.box500min{  width:100%}
}


@media (max-width: 800px) {
  .box2er.box400min, .box3er.box400min, .box4er.box400min, .box5er.box400min, .box6er.box400min, .box7er.box400min, .box8er.box400min, .box9er.box400min, .box10er.box400min{  width:100%}
}

@media (max-width: 600px) {
  .box2er.box300min, .box3er.box300min, .box4er.box300min, .box5er.box300min, .box6er.box300min, .box7er.box300min, .box8er.box300min, .box9er.box300min, .box10er.box300min{  width:100%}
}

@media (max-width: 400px) {
  .box2er.box200min, .box3er.box200min, .box4er.box200min, .box5er.box200min, .box6er.box200min, .box7er.box200min, .box8er.box200min, .box9er.box200min, .box10er.box200min{  width:100%}
}

@media (max-width: 200px) {
  .box2er.box100min, .box3er.box100min, .box4er.box100min, .box5er.box100min, .box6er.box100min, .box7er.box100min, .box8er.box100min, .box9er.box100min, .box10er.box100min{  width:100%}

}





/*
@media (max-width: 1000px) {
 .box4er{  width:33.333%}
 .box5er{  width:33.333%}
 .box6er{  width:33.333%}
 .box7er{  width:33.333%}
 .box8er{  width:33.333%}
 .box9er{  width:33.333%}
 .box10er{ width:33.333%}
}

@media (max-width: 600px) {
 .box3er{  width:50%}
 .box4er{  width:50%}
 .box5er{  width:50%}
 .box6er{  width:50%}
 .box7er{  width:50%}
 .box8er{  width:50%}
 .box9er{  width:50%}
 .box10er{ width:50%}
}

@media (max-width: 400px) {
 .box2er{  width:100%}
 .box3er{  width:100%}
 .box4er{  width:100%}
 .box5er{  width:100%}
 .box6er{  width:100%}
 .box7er{  width:100%}
 .box8er{  width:100%}
 .box9er{  width:100%}
 .box10er{  width:100%}
}
		*/