) 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: "Lato", 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;} a {transition: all .2s ease;} h1, h4, span.headl {font-weight: 300; line-height: 3.5rem;} h1 {font-size: 3em;} span.headl {font-size: 1.25em; line-height: 1.75rem; display: block;} h4 {font-size: 1.25em; line-height: 1.75rem; margin-bottom: 1.75rem} li, p {line-height: 26px;} table { border-collapse: collapse; border-spacing: 15px; } h1 + p, .twocols, .twocols + p {padding-top: 3.5rem;} p + p, img + p, .headlines div, ul + p {padding-top: 1.75rem} .padme {padding-top: 3.5rem !important} /******************************* 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: block;} /**************************************** 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: 16px; padding: 0 10px; width: 100%} /**************************************** MOBILE FIRST. Hier werden nun alle Rasterzellen aufgeteilt. Sofern die Rasterzellen sich anders verhalten sollen, müssen sie nur in diesem Raster verschoben werden. ****************************************/ @media screen and (max-width: 618px) { li, p {line-height: 22px;} } @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 {width: 33.33%} .g05, .g06, .g07, .g08, span.headl {width: 66.66%}.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. ****************************************/ .table {display: inline-table; table-layout: fixed} .t_row {display: table-row} .t_cell {display: table-cell} } @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} } @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%} } .nopad {padding: 0} .baseline {vertical-align: baseline}