) auf 100% gesetzt werden. Ansonsten können sich Elemente nicht an der Höhe orientieren. ****************************************/ html. body, main, #main {width: 100%; height: 100%;} ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } section {width: 100%; min-height: 100%; padding-bottom: 3.5rem;} html, body, input, textarea {font-family: "Roboto Condensed", Helvetica, Calibri, Arial, sans-serif; line-height: 1.75rem; font-size: 1rem;} label {cursor: pointer} input, textarea {border-radius: 4px;} .b {font-weight: 700} .gwrap {font-size: 0%; line-height: 0%; padding: 0 30px; text-align: left;} /************************* TYPE ESSENTIALS - HANDLE WITH CARE *************************/ /**************************************** Hier werden Schriftgrößen und Zeilenabstände gesetzt und in Abhängigkeit voneinander gebracht. Die Standard-Schrifthöhe wird für html/body definiert. Andere Schriftgrößen sind hiervon ein Vielfaches. So können die Schriftgrößen leichter angepasst werden. Die Bezeichnung "rem" bezieht sich immer auf das "Root-Element", also das html-Element (Beispiel: 3.5rem bedeutet 3,5-fache Größe von HTML/BODY.) ****************************************/ html, body {font-size: 16px; color: #282832;} a {transition: all .2s ease;} h1, h2, h3, h4, span.headl {font-weight: 300; line-height: 1.75rem; text-align: center; width: 100%; display: block;} h1, h2 {font-size: 2em; text-transform: uppercase; font-weight: 700;} h3, span.headl {font-size: 1.5em; line-height: 1.75rem; display: block;} h4 {font-size: 1.25em; line-height: 1.75rem; margin-bottom: 1.75rem} li, p {line-height: 1.75rem;} table { border-collapse: collapse; border-spacing: 15px; } h1 + p, h2 + p, h1 + h2, h2 + h3, .twocols, p + h3, .twocols + p, .twocols + h3 {padding-top: 1.75re m;} p + p, img + p, .twocols h3 + p, .headlines div, ul + p {padding-top: 1.75rem} .padme {padding-top: 3.5rem !important} h1 + h3, h2 + h3 {padding-bottom: 3.5rem;} h1::after, h2::after, h3::after { background: #f00 none repeat scroll 0 0; bottom: 0; content: ""; display: block; margin: 0.875rem auto; height: 2px; width: 50%; } h3::after {width: 30%} strong {font-weight: 700} /******************************* Rechtsbündig? Linksbündig? Zentriert? Dies beeinflusst übrigens auch die beliebten Inline-Blöcke. *******************************/ .ta_l {text-align: left} .ta_c {text-align: center} .ta_r {text-align: right} /******************************* Floaten ist böse. Wenn jemand böse sein möchte: Hier die Klassen: *******************************/ .floatme_left {float: left; padding-right: 10px;} .floatme_right {float: right; padding-right: 10px;} .clearme {clear: both} /******************************* STYLE FOR BULLETS *******************************/ ul.bull {list-style-type: disc;} ul.bull li {padding-left: 5px; margin-left: 20px; display: list-item;} /**************************************** Set all Grid-Elements to 100% Alignheight: Dieses Element wird verwendet, damit die Elemente darin sich in der Höhe aneinander anpassen. ****************************************/ .g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12, .g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110, .g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909, .g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808, .fullwidth, .g701, .g702, .g703, .g704, .g705, .g706, .g707 {text-align: left; display: inline-block; font-size: 1rem; line-height: 1.75rem; padding: 0 10px; width: 100%;} .hideme, .hideme2 {display: none} /**************************************** MOBILE FIRST. Hier werden nun alle Rasterzellen aufgeteilt. Sofern die Rasterzellen sich anders verhalten sollen, müssen sie nur in diesem Raster verschoben werden. ****************************************/ .table {display: inline-table; width: 100%;} .t_row {display: table-row} .t_cell {display: table-cell} @media screen and (min-width: 400px) { /**************************************** a little bit'o good ol paddin' fo them. ****************************************/ h3, span.headl {font-size: 1.5em; line-height: 2.625rem} .g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12, .g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110, .g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909, .g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808, .g701, .g702, .g703, .g704, .g705, .g706, .g707 {padding: 0 20px} } @media screen and (min-width: 600px) { /**************************************** N'a little bit' more paddin' fo them. More screen means more room for rest. ****************************************/ .g01, .g02, .g03, .g04, .g05, .g06, .g07, .g08, .g09, .g10, .g11, .g12, .g101, .g102, .g103, .g104, .g105, .g106, .g107, .g108, .g109, .g110, .g901, .g902, .g903, .g904, .g905, .g906, .g907, .g908, .g909, .g801, .g802, .g803, .g804, .g805, .g806, .g807, .g808, span.headl, .g701, .g702, .g703, .g704, .g705, .g706, .g707{padding: 0 30px} .g01, .g02, .g04, .g05, .g07, .g08, span.headl, .g03, .g09, .g10, .g11, .g12 {width: 100%} .g101, .g102, .g103, .g104 {width: 40%} .g105, .g106 {width: 60%} .g901 {width: 33.33%} .g902, .g903, .g904 {width: 66.66%} .g905, .g906, .g907, .g908, .g909 {width: 100%} .g801, .g802, .g803, .g804 {width: 50%} .g805, .g806, .g807, .g808 {width: 100%} .g701, .g702, .g703 {width: 28.571%} .g704, .g705, .g706 {width: 85.714%;} h3, span.headl {font-size: 1.5rem; line-height: 1.75rem} /**************************************** Want a table? Use any elements you wanna use and tell them to be a table.. Because f** them. That's why. :-D But only on Desktop and larger mobile devices. On smaller mobiles: Tables = not cool Thats' why they are in a Media Query. ****************************************/ } @media screen and (min-width: 900px) { h1 + h2, h2 + h3, span.headl {padding-top: 3.5rem;} .g01, .g02 {width: 16.66%} .g04, .g03, .g05, .g06 {width: 50%} .g07, .g08, span.headl {width: 66.66%} .g09, .g10 {width: 83.33%} .g101, .g102 {width: 20%} .g103, .g104 {width: 40%} .g105, .g106 {width: 60%} .g107, .g108 {width: 80%} .g901, .g902, .g903 {width: 33.33%} .g904, .g905, .g906 {width: 66.66%} .g801, .g802 {width: 25%} .g803, .g804 {width: 50%} .g805, .g806 {width: 75%} .g701 {width: 14.285%} .g702 {width: 28.571%} .g703 {width: 42.857%} .g704 {width: 57.142%} .g705 {width: 71.428%} .g706 {width: 85.714%;} .twocols {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2; column-gap: 30px; -moz-column-gap: 30px; -webkit-column-gap: 30px;} .gwrap.alignheight {display: table; table-layout: fixed} .gwrap.alignheight > * {display: table-cell} .form_item:nth-of-type(2n-1) {padding-right: 0.875rem} .form_item:nth-of-type(2n) {padding-left: 0.875rem} .hideme2 {display: inline-block} } @media screen and (min-width: 1200px) { .g01 {width: 8.33%} .g02 {width: 16.66%} .g03 {width: 25%} .g04 {width: 33.33%} .g05 {width: 41.66%} .g06 {width: 50%} .g07, span.headl {width: 58.33%} .g08 {width: 66.66%} .g09 {width: 75%} .g10 {width: 83.33%} .g11 {width: 91.66%} .g101 {width: 10%} .g102 {width: 20%} .g103 {width: 30%} .g104 {width: 40%} .g105 {width: 50%} .g106 {width: 60%} .g107 {width: 70%} .g108 {width: 80%} .g109 {width: 90%} .g901 {width: 11.11%} .g902 {width: 2.22%} .g903 {width: 33.33%} .g904 {width: 44.44%} .g905 {width: 55.55%} .g906 {width: 66.66%} .g907 {width: 77.77%} .g908 {width: 88.88%} .g801 {width: 12.5%} .g802 {width: 25%} .g803 {width: 37.5%} .g804 {width: 50%} .g805 {width: 62.5%} .g806 {width: 75%} .g807 {width: 87.5%} .hideme {display: inline-block} } .nopad {padding: 0} .baseline {vertical-align: baseline} .padme img {transform: translate(0, 10px); display: inline-block} a {color: rgb(50,60,70); text-decoration: none; font-weight: 700} a:hover {color: #a00} @media screen and (max-width: 1200px) { .gwrap { font-size: 0%; line-height: 0%; padding: 0 0px; text-align: left; }}