diff --git a/_hippie.scss b/_hippie.scss
index d265a47..436c1c9 100644
--- a/_hippie.scss
+++ b/_hippie.scss
@@ -79,6 +79,7 @@
 // in dependency to other styles
 // Additional modules can be defined here
 // -----------------------------------------------------------------------------
+@import "modules/breakpoint/breakpoint_module";
 @import "modules/navigation/nav_module";
 @import "modules/tables/tables_module";
 @import "modules/card/card_module";
diff --git a/demo-index.html b/demo-index.html
index 7badeca..a31ef51 100644
--- a/demo-index.html
+++ b/demo-index.html
@@ -424,10 +424,29 @@
 
 	<section class="sec__main_center">
 		<header>
-			<h1>Einzelne Elemente</h1>
+			<h1>Medienformat Abfragen</h1>
+		</header>
+		<article>
+			<div class="demo__query_example">Umbruch bei&nbsp;</div>
+			<div class="demo__queries">
+				<p class="query__phoneUp">Telefone und größer</p>
+				<p class="query__phoneOnly">Nur Telefone</p>
+				<p class="query__tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
+				<p class="query__tabletPortraitUp">Schreibtafeln und größer</p>
+				<p class="query__tabletLandscapeOnly">Schreibtafeln im Querformat</p>
+				<p class="query__tabletLandscapeUp">Schreibtafeln quer und größer</p>
+				<p class="query__desktopOnly">Nur Arbeitsplatzrechner</p>
+				<p class="query__desktopUp">Arbeitsplatzrechner und größer</p>
+				<p class="query__bigDesktopUp">Richtige Monitore und größer</p>
+			</div>
+		</article>
+	</section>
+	<section class="sec__main_center">
+		<header>
+			<h1>Sammlung formatierter Elemente</h1>
+			<p>Die Elemente werden fortlaufend komplexer</p>
 		</header>
 		<article>
-			<h2>Bereiche</h2>
 			<pre class="pre__code"><code>h3.txt_light_color+p</code></pre>
 			<h3 class="txt_light_color">Helle Überschrift</h3>
 			<p>Mit normalem Textabsatz</p>
diff --git a/elements/_sections.scss b/elements/_sections.scss
index 8e49649..66a8a0b 100644
--- a/elements/_sections.scss
+++ b/elements/_sections.scss
@@ -47,22 +47,14 @@ section {
 	margin: 0 auto;
 	padding-top: $space_3;
 
-	@media screen and (orientation: landscape) {
-		@media (min-width: $screen_small) {
-			width: $width_small;
-		}
-		@media (min-width: $screen_medium) {
-			width: $width_medium;
-		}
-		@media (min-width: $screen_large) {
-			width: $width_large;
-		}
+	@include forTabletPortraitUp {
+		width: $width_small;
 	}
-
-	@media screen and (orientation: portrait) {
-		@media (min-width: $screen_small) {
-			width: $width_small;
-		}
+	@include forTabletLandscapeUp {
+		width: $width_medium;
+	}
+	@include forBigDesktopUp {
+		width: $width_large;
 	}
 }
 
@@ -92,7 +84,7 @@ aside {
 	&.right {
 		float: right;
 	}
-	
+
 	*:first-child {
 		margin-top: 0;
 	}
diff --git a/example.css b/example.css
index df6ef13..8733248 100644
--- a/example.css
+++ b/example.css
@@ -202,7 +202,7 @@ textarea:not([disabled]):focus {
   font-size: 1em;
   line-height: 1.5; }
 
-pre, code, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
+pre, code, .demo__query_example:after, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
   font-family: Courier New, monospace;
   font-size: 1em;
   line-height: 1.5; }
@@ -266,19 +266,15 @@ body {
   width: 96%;
   margin: 0 auto;
   padding-top: 32px; }
-@media screen and (orientation: landscape) and (min-width: 1024px) {
-  .sec__main_center, .demo__intro {
-    width: 80%; } }
-@media screen and (orientation: landscape) and (min-width: 1280px) {
-  .sec__main_center, .demo__intro {
-    width: 60%; } }
-@media screen and (orientation: landscape) and (min-width: 1920px) {
-  .sec__main_center, .demo__intro {
-    width: 48%; } }
-
-@media screen and (orientation: portrait) and (min-width: 1024px) {
-  .sec__main_center, .demo__intro {
-    width: 80%; } }
+  @media (min-width: 768px) {
+    .sec__main_center, .demo__intro {
+      width: 80%; } }
+  @media (min-width: 1024px) {
+    .sec__main_center, .demo__intro {
+      width: 60%; } }
+  @media (min-width: 1680px) {
+    .sec__main_center, .demo__intro {
+      width: 48%; } }
 
 aside.right + section {
   margin-right: calc(20% + 8px); }
@@ -322,7 +318,7 @@ h6 {
 
 p, .block__column_2, .block__column_3, caption {
   margin: 8px 0; }
-  p code, .block__column_2 code, .block__column_3 code, caption code {
+  p code, .block__column_2 code, .block__column_3 code, caption code, p .demo__query_example:after, .block__column_2 .demo__query_example:after, .block__column_3 .demo__query_example:after, caption .demo__query_example:after {
     padding: 1px 4px;
     font-size: 1em;
     line-height: 1; }
@@ -346,7 +342,7 @@ hr, .hr__hidden, .hr__dotted {
   border-radius: 1px;
   padding: 8px;
   background-color: rgba(255, 255, 255, 0.1); }
-  .pre__code code {
+  .pre__code code, .pre__code .demo__query_example:after {
     background-color: transparent; }
 
 blockquote {
@@ -493,7 +489,7 @@ b, strong {
 cite {
   font-style: italic; }
 
-code {
+code, .demo__query_example:after {
   color: #1f1f1f;
   background-color: rgba(255, 255, 255, 0.1); }
 
@@ -1143,6 +1139,87 @@ nav li {
   width: 32px;
   height: 32px; }
 
+.demo__queries > p, .demo__queries > .block__column_2, .demo__queries > .block__column_3, .demo__queries > caption {
+  padding: calc(8px - 3px) 8px; }
+
+.query__phoneUp {
+  background-color: rgba(0, 0, 0, 0.2); }
+
+@media (max-width: 767px) {
+  .query__phoneOnly {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .query__tabletPortaitOnly {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 768px) {
+  .query__tabletPortraitUp {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .query__tabletLandscapeOnly {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 1024px) {
+  .query__tabletLandscapeUp {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 1280px) and (max-width: 1679px) {
+  .query__desktopOnly {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 1280px) {
+  .query__desktopUp {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+@media (min-width: 1680px) {
+  .query__bigDesktopUp {
+    background-color: rgba(0, 0, 0, 0.2); } }
+
+.demo__query_example {
+  margin-bottom: 32px;
+  padding: 32px;
+  text-align: center; }
+  @media (min-width: 48em) {
+    .demo__query_example {
+      background-color: #fad803; } }
+  @media (min-width: 64em) {
+    .demo__query_example {
+      background-color: #d30a51; } }
+  @media (min-width: 80em) {
+    .demo__query_example {
+      background-color: #273f8b; } }
+  @media (min-width: 90em) {
+    .demo__query_example {
+      background-color: #b7e0f0; } }
+  @media (min-width: 105em) {
+    .demo__query_example {
+      background-color: #52bed1; } }
+  @media (min-width: 120em) {
+    .demo__query_example {
+      background-color: #0c85ff; } }
+  .demo__query_example:after {
+    content: '< 768px';
+    padding: calc(8px - 3px) 8px;
+    border-radius: 2px;
+    background-color: rgba(0, 0, 0, 0.2); }
+    @media (min-width: 48em) {
+      .demo__query_example:after {
+        content: '768px'; } }
+    @media (min-width: 64em) {
+      .demo__query_example:after {
+        content: '1024px'; } }
+    @media (min-width: 80em) {
+      .demo__query_example:after {
+        content: '1280px'; } }
+    @media (min-width: 105em) {
+      .demo__query_example:after {
+        content: '1680px'; } }
+    @media (min-width: 120em) {
+      .demo__query_example:after {
+        content: '1920px'; } }
+
 .test li::after {
   content: "";
   display: block;
diff --git a/global/_config.scss b/global/_config.scss
index c79c780..42757db 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -153,6 +153,8 @@ $basic_border: $tiny_space solid $basic_border_color;
 $dotted_border: $tiny_space dotted $basic_border_color;
 $cell_border: $tiny_space solid $darkest_color;
 
+$basic_corner_radius: $tiny_space * 2;
+
 $basic_aside_width: 20%;
 
 
diff --git a/mixins/_all.scss b/mixins/_all.scss
index cab5eb0..c7955dd 100644
--- a/mixins/_all.scss
+++ b/mixins/_all.scss
@@ -1,3 +1,4 @@
-@import "clearflow";
+@import "media_query";
+@import "flow";
 @import "color";
 @import "user_agent";
diff --git a/mixins/_clearflow.scss b/mixins/_flow.scss
similarity index 84%
rename from mixins/_clearflow.scss
rename to mixins/_flow.scss
index 404a21c..2264389 100644
--- a/mixins/_clearflow.scss
+++ b/mixins/_flow.scss
@@ -6,7 +6,7 @@
 //
 // @example scss - Usage
 //   .element {
-//     @include clearflow;
+//     @include clearFlow;
 //   }
 //
 // @example css - CSS Output
@@ -16,7 +16,7 @@
 //     display: table;
 //   }
 
-@mixin clearflow {
+@mixin clearFlow {
   &::after {
     content: "";
     clear: both;
diff --git a/mixins/_media_query.scss b/mixins/_media_query.scss
new file mode 100644
index 0000000..72a4d6a
--- /dev/null
+++ b/mixins/_media_query.scss
@@ -0,0 +1,35 @@
+//Sections for Media Queries
+@mixin forPhoneOnly {
+  @media (max-width: #{$screen_tiny - 1}) { @content; } //599px
+}
+@mixin forTabletPortraitUp {
+  @media (min-width: $screen_tiny) { @content; } //600px
+}
+@mixin forTabletPortraitOnly {
+  @media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
+}
+@mixin forTabletLandscapeUp {
+  @media (min-width: $screen_small) { @content; } //900px
+}
+@mixin forTabletLandscapeOnly {
+  @media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
+}
+@mixin forDesktopUp {
+  @media (min-width: $screen_medium) { @content; } //1200px
+}
+@mixin forDesktopOnly {
+  @media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
+}
+@mixin forBigDesktopUp {
+  @media (min-width: $screen_huge) { @content; } //1800px
+}
+
+//Mobile-first Media Query
+@mixin goingLarge($width) {
+  @media (min-width: $width/16+em) { @content; }
+}
+
+//Desktop-first Media Query
+@mixin goingSmall($width) {
+  @media (max-width: $width/16+em) { @content; }
+}
diff --git a/modules/breakpoint/_breakpoint_module.scss b/modules/breakpoint/_breakpoint_module.scss
new file mode 100644
index 0000000..7c08f7d
--- /dev/null
+++ b/modules/breakpoint/_breakpoint_module.scss
@@ -0,0 +1,46 @@
+.query__goingLarge {
+  @include goingLarge($screen_tiny) {};
+}
+
+.query__goingSmall {
+  @include goingSmall($screen_gigantic) {};
+}
+
+.query__phoneUp {
+}
+
+.query__phoneOnly {
+  @include forPhoneOnly {}
+}
+
+.query__tabletPortaitOnly {
+  @include forTabletPortraitOnly {
+  }
+}
+
+.query__tabletPortraitUp {
+  @include forTabletPortraitUp {
+  }
+}
+
+.query__tabletLandscapeOnly {
+  @include forTabletLandscapeOnly {}
+}
+
+.query__tabletLandscapeUp {
+  @include forTabletLandscapeUp {}
+}
+
+.query__desktopOnly {
+  @include forDesktopOnly {
+  }
+}
+
+.query__desktopUp {
+  @include forDesktopUp {
+  }
+}
+
+.query__bigDesktopUp {
+  @include forBigDesktopUp {}
+}
diff --git a/modules/demo/_demo_module.scss b/modules/demo/_demo_module.scss
index 182a3f3..c42d290 100644
--- a/modules/demo/_demo_module.scss
+++ b/modules/demo/_demo_module.scss
@@ -96,3 +96,80 @@
 	width: 32px;
 	height: 32px;
 }
+
+
+
+.demo__queries > p {
+  padding: $basic_padding;
+}
+
+.query__phoneUp {
+  background-color: rgba($basic_front_color, .2);
+}
+
+.query__phoneOnly {
+  @include forPhoneOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletPortaitOnly {
+  @include forTabletPortraitOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletPortraitUp {
+  @include forTabletPortraitUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletLandscapeOnly {
+  @include forTabletLandscapeOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__tabletLandscapeUp {
+  @include forTabletLandscapeUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__desktopOnly {
+  @include forDesktopOnly { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__desktopUp {
+  @include forDesktopUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.query__bigDesktopUp {
+  @include forBigDesktopUp { background-color: rgba($basic_front_color, .2); }
+}
+
+.demo__query_example {
+	@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
+	@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
+	@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
+	@include goingLarge($screen_large/1px) {background-color: $delta_color; }
+	@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
+	@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
+	margin-bottom: $space_3;
+	padding: $space_3;
+	text-align: center;
+
+	&:after {
+		@extend code;
+		@include goingLarge($screen_tiny/1px) {
+			& { content: '768px'; }
+		}
+		@include goingLarge($screen_small/1px) {
+			& { content: '1024px'; }
+		}
+		@include goingLarge($screen_medium/1px) {
+			& { content: '1280px'; }
+		}
+		@include goingLarge($screen_huge/1px) {
+			& { content: '1680px'; }
+		}
+		@include goingLarge($screen_gigantic/1px) {
+			& { content: '1920px'; }
+		}
+		content: '< 768px';
+		padding: $basic_padding;
+		border-radius: $basic_corner_radius;
+		background-color: rgba($basic_front_color, .2);
+	}
+}