/**
 * Farben
 *
 * Farben die im Layout verwendet werden
 *
 * Zeigt Hex-Codes von definierten Farben
 *
 * Hellblau     = #54bfac
 * Dunkelblau   = #1ba68c
 * Helles Gelb  = #f2eda7
 * Dunkelgelb   = #f2e530
 * Orange       = #d94625
 */



/**
 * CSS reset by Eric Meyer
 *
 * Setzt standard Browserformatierungen zurück
 *
 * http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain)
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset für alte Browser */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/**
 * Setzt Standardschriftgrösse in fast allen Browsern auf 16px.
 */

html { font-size: 100%; }


/* ==========================================================================
   Fonts
   ========================================================================== */

/* Icon-Font */
@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot');
    src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontello.woff') format('woff'),
         url('../fonts/fontello.ttf') format('truetype'),
         url('../fonts/fontello.svg#opensans_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Handgeschriebener Stil */
@font-face {
    font-family: 'journal';
    src: url('../fonts/journal-webfont.eot');
    src: url('../fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/journal-webfont.woff') format('woff'),
         url('../fonts/journal-webfont.ttf') format('truetype'),
         url('../fonts/journal-webfont.svg#opensans_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Laufschriften */
@font-face {
    font-family: 'AmbleLight';
    src: url('../fonts/Amble-Light-webfont.eot');
    src: url('../fonts/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Light-webfont.svg#AmbleLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AmbleLightItalic';
    src: url('../fonts/Amble-LightItalic-webfont.eot');
    src: url('../fonts/Amble-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-LightItalic-webfont.woff') format('woff'),
         url('../fonts/Amble-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/Amble-LightItalic-webfont.svg#AmbleLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AmbleRegular';
    src: url('../fonts/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Regular-webfont.svg#AmbleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AmbleItalic';
    src: url('../fonts/Amble-Italic-webfont.eot');
    src: url('../fonts/Amble-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Italic-webfont.woff') format('woff'),
         url('../fonts/Amble-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Italic-webfont.svg#AmbleItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AmbleBold';
    src: url('../fonts/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble-Bold-webfont.svg#AmbleBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AmbleBoldItalic';
    src: url('../fonts/Amble-BoldItalic-webfont.eot');
    src: url('../fonts/Amble-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/Amble-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/Amble-BoldItalic-webfont.svg#AmbleBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
   Links
   ========================================================================== */

a { color: black; }
a:hover { color: black }
a:focus { outline: thin dotted }


/* ==========================================================================
   Typografie
   ========================================================================== */

b, strong {
    font-weight: normal;
    font-family: "AmbleBold", "Arial Black", Verdana;
}

hr {
    clear: both;
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    border-top: 1px dotted #BBBBBB;
    margin: 1em 0;
    padding: 0;
    background: none;
}

mark {
    background: #ff0;
    color: #000;
    font-family: "AmbleBoldItalic";
}
em {
    font-family: "AmbleLightItalic";
}

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: 'courier new', monospace; font-size: 1em }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word }

q { quotes: none }
q:before, q:after { content: ""; content: none }

small { font-size: 85% }

/* Position subscript and superscript content without affecting line-height:
   h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em }
sub { bottom: -0.25em }

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: "journal", "Arial Black", Verdana;
    font-size: 2.5em;
    text-transform: uppercase;
    margin-bottom: 0.375em; /* 15/40 */
    padding-top: 0.375em; /* 15/40 */
    text-align: center;
}
h2 {
    padding-top: 0;
    position: relative;
    top: -1px;
    margin-bottom: 0;
}
h2 span {
    border-top: 1px solid rgb(197, 197, 197);
    padding: 11px 15px 10px;
    display: inline-block;
}
h3 {
    font-family: "journal", "Comic Sans";
    font-size: 4em; /* 64/16 */
    text-align: center;
    text-transform: none;
}
h5 {
    display: none;
}
h5 em {
    margin: 0 0.2em;
    font-style: italic;
    font-weight: bold;
}
h6 {
    font-size: 1.5em; /* 24/16 */
    letter-spacing: 0.05em;
}
h6 span {
    display: block;
}


/* ==========================================================================
   Bilder
   ========================================================================== */

/**
 * Enternt Border, verbessert Bild-Qualität und Darstellug
 *
 * Verbessert Bild-Qualität in IE7 wenn skalliert : h5bp.com/d
 * Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle }


/* ==========================================================================
   Formularelemente
   ========================================================================== */

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the
 * UA stylesheet)
 */

button, input { line-height: normal }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }


/* ==========================================================================
   Re-set default cursor for disabled elements
   ========================================================================== */

button[disabled], input[disabled] { cursor: default }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical }


/* ==========================================================================
   Tabellen
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0 }
td { vertical-align: top }


/* ==========================================================================
   Basic layout styles
   ========================================================================== */
html {
    background-color: white;
}
body {
    font-family: "AmbleLight", Verdana, Arial;
}

.wrapper {
    margin: 0 auto;
}

/* Dunkler streifen */
.document-border {
    height: 5px;
    background: #1ba68c;
}

/* Heller streifen */
.document-border:before {
    width: 55%;
    display: block;
    background: #54bfac;
    height: 5px;
    content: " ";
    -webkit-transform: skew(-35deg);
    -moz-transform: skew(-35deg);
    -ms-transform: skew(-35deg);
    -o-transform: skew(-35deg);
    transform: skew(-35deg);
    margin-left: -5%;
       -moz-box-shadow: 85px -3px 227px 31px rgba(0,0,0,0.1);
    -webkit-box-shadow: 85px -3px 227px 31px rgba(0,0,0,0.1);
            box-shadow: 85px -3px 227px 31px rgba(0,0,0,0.1);
}

p {
    padding: 0 3%;
    margin-bottom: 0.5em;
    line-height: 1.5em;
    text-align: center;
}


/* Bilder & Videos
   ========================================================================== */

img, video {
    max-width: 100%;
	background-color: transparent;
    height: auto !important; /* garantiert proportionales skalieren
                                selbst bei width & height-attributen in img-Tags */
}
.video,
.checklist-wrap {
    position: relative;
}
video {
    height: auto;
    width: 100%;
	background-color: transparent;
}
.checklist-wrap {
    background: rgb(217, 70, 37);
    background-image: -webkit-gradient(radial, center center, 0, center center, from(rgb(236, 117, 90)), to(rgb(217, 70, 37)));
    background-image: -webkit-radial-gradient(center center, circle, rgb(236, 117, 90), rgb(217, 70, 37));
    background-image:    -moz-radial-gradient(center center, circle, rgb(236, 117, 90), rgb(217, 70, 37));
    background-image:     -ms-radial-gradient(center center, circle, rgb(236, 117, 90), rgb(217, 70, 37));
    background-image:      -o-radial-gradient(center center, circle, rgb(236, 117, 90), rgb(217, 70, 37));
    background-image:         radial-gradient(center center, circle, rgb(236, 117, 90), rgb(217, 70, 37));
    overflow: hidden;
}
audio { width: 100% }


/* One-Div Icons
   http://one-div.com/
   ========================================================================== */

/* Bändeli */
.ribbon {
    position: relative;
    font-size: 15px;
}
.ribbon::before {
    left: -0.3em;
    top: -1em;
    position: absolute;
    content: " ";
    height: 1.425em;
    border-bottom: 0.7em solid transparent;
    border-right: 1em solid #2C2C2C;
}
.ribbon::after {
    left: -0.7em;
    top: -1em;
    position: absolute;
    content: " ";
    height: 1.425em;
    border-bottom: 0.7em solid transparent;
    border-left: 1em solid #2C2C2C;
}





/* Icon-Fonts & Buttons
   ========================================================================== */

.icon {
    margin: 0 0.25em;
    color: white;
    background: rgb(102, 102, 102);
    font-size: 1.5em;
    border-radius: 2.5em;
    width: 1.5em;
    height: 1.5em;
    text-shadow: 0 1px 0px rgba(0,0,0,0.25);
    line-height: 1.5em;
    overflow: hidden;
    text-decoration: none;
    padding: 1.0em;
    display: inline-block;
    position: relative;
}

/**
 * Icon-Font anzeigen für moderne Web-Browser
 *
 * Setzt Icon-Font ein, wenn mediaquery, attribut- und pseudo-selektor
 * verstanden wird.
 */
@media all and (min-width:0) {
    [data-icon]:before {
        font-family: "fontello";
        content: attr(data-icon);
    }

}
.button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    border: 1px solid #1ba68c;
    background: #1ba68c;
    font-family: "AmbleRegular", "Verdana";
    color: white;

    padding: 1px 9px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.75);

    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;

    -webkit-background-clip: padding-box;
       -moz-background-clip: padding;
            background-clip: padding-box;

    -webkit-transition: all .1s linear;
       -moz-transition: all .1s linear;
        -ms-transition: all .1s linear;
         -o-transition: all .1s linear;
            transition: all .1s linear;

}
.button:hover,
.button:focus {
    background-color: rgb(14, 134, 112);
    text-shadow: none;
}
.button:active,
.button.active {
    background: rgb(9, 116, 96);
}

/**
 * Hide text only when mediaqueries, :before and attribute selector is supported,
 * so the icon show up instead of the text and vice versa
 */
@media all and (min-width:0) {
    [sth]:before,
    .screen-reader-text {
        text-indent: 100%;
        position: absolute;
        color: white;
    }
}


/* Logo & Menu-Button
   ========================================================================== */
.logo-menu-trigger {
    position: relative;
    margin-left: -2.5%;
    padding: 7px 0 8px; /* 7/52, 8/52 */
    overflow: hidden;
}
.logo-menu-trigger .logo {
    display: inline-block;
    margin-left: 5%;
    float: left;
}
.menu-button {
    float: right;
    margin-top: 13px;
    margin-right: 2.5%;
    font-size: 1.3125em; /*  21 / 16 */
}


/* Navigation
   ========================================================================== */
.navigation {
    overflow: hidden;

       -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
    position: relative;
    z-index: 50;
    background: white;
}
.navigation ul {}
.navigation li {}
.navigation li a {
    padding: 0.5em; /* 8/16 */
    margin: 6px 2.5% 4px; /* 6/16, 4/16, 4/16 */
    text-transform: uppercase;
}
.navigation li:last-child a {
    margin-bottom: 2.5%;
}
.navigation a {
    /* Display & Box Model */
    display: block;

    /* Other */
    text-decoration: none;
    color: white;
}

/* Navigationspunkte verbergen */
.js-enabled .navigation-list {
    position: absolute;
    right: 100%;
}

/* Navigationpunkte anzeigen bei klick auf .menu-button  */
.js-enabled .navigation-list.active {
    position: static;
}


/* Logo links und Navigation rechts gefloatet */
@media all and (min-width: 53.125em) { /* 850/16 */
    .menu-button {
        display: none;
    }

    .navigation li a {
        margin-right: 0;
        margin-left: 0;
        display: inline-block;
        text-shadow: none;
        -webkit-border-radius: 0;
           -moz-border-radius: 0;
                border-radius: 0;
        border: 0;
        background: none;
        color: black;
        font-family: "AmbleLight";
        font-size: 0.9375em; /* 15/ 16 */
    }

    .navigation li a:last-child {
        margin-bottom: 0;
    }

    .navigation li {
        display: inline;
    }

    .navigation-content-wrapper {
        margin: 0 auto;
        width: 95%;
    }
    .logo-menu-trigger {
        text-align: left;
        display: inline;
        float: left;
        margin-left: 0;
    }
    .navigation-list {
        text-align: center;
        position: static !important;
        float: right;
        margin-top: 0.8125em; /* 13/16 */
    }

    /**
     * Hintegrund-Bild für Navigationspunkte einfügen und
     * :hover mit Farbe entfernen und Hintergrundbilder definieren.
     */
    .navigation-list .button {
        background: url("../images/navigation-background.png") no-repeat center bottom;
        padding-bottom: 18px;
        margin-top: 0;
    }
    .navigation-list .first {
        background-image: url("../images/navigation-background-first.png");
    }
    .navigation-list .last {
        background-image: url("../images/navigation-background-last.png");
    }
    .navigation-list .button:hover,
    .navigation-list .button.active {
        background-color: none;
        background-image: url("../images/navigation-background-hover.png");
    }
    .navigation-list .first:hover,
    .navigation-list .first.active {
        background-image: url("../images/navigation-background-first-hover.png");
    }
    .navigation-list .last:hover,
    .navigation-list .last.active {
        background-image: url("../images/navigation-background-last-hover.png");
    }
}

/* Maximaler Abstand für Logo und Navigation */
@media all and (min-width: 61.8125em) { /* 827/16 */
    .navigation-content-wrapper {
        width: 56.25em; /* 900/16 */
    }
}


/**
 * Fixe Navigation wenn Viewport Höhe genügend und HTML5-Videos
 * Supportet sind, weil sonst Flash-Video über Navigation
 */
@media all and (min-height: 500px) { /* 600/16 */
    .js-enabled.video .document-border,
    .js-enabled.video .navigation {
        position: fixed !important;
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 100;
    }
    .js-enabled.video .navigation {
        top: 5px;
    }
}




/* Image-Slider
   http://csscience.com/responsiveslidercss3/
   ========================================================================== */
.image-slider-wrap {
    overflow: hidden;
}
.image-slider {
    position: relative;
    padding-bottom: 23.8%; /* 1024x348, (3.48/10.24)*100 */
    height: 0;
    overflow: hidden;

       -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:8;
    opacity:0.0;
}

.image-slider .active {
    z-index:10;
    opacity:1.0;
}
.image-slider .last-active {
    z-index: 9;
}

/* Slider-Images */
.slider-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-size: cover;
}
.image-controler  { background-image: url("../images/image-slider/controler.jpg")  }
.image-guitar     { background-image: url("../images/image-slider/guitar.jpg")     }
.image-ipad       { background-image: url("../images/image-slider/ipad.jpg")       }
.image-keyboard   { background-image: url("../images/image-slider/keyboard.jpg")   }
.image-television { background-image: url("../images/image-slider/television.jpg") }


@media all and (min-width: 76.25em) { /* 1220/16 */
    .image-slider-wrap,
    .image-slider {
        height: 25.9375em; /* 415/16 */
        padding: 0;
    }
}

/* Abstand pro Abschnitt erhöhen
   ========================================================================== */
.article { margin-bottom: 2em }



/* Startseite "Multimedianer"
   ========================================================================== */
.article.multimedianer {
    height: auto;
}
/* Social-Icons */
.social-buttons {
    text-align: center;
    width: 100%;
    overflow: hidden;
}
.icon,
.icon:hover {}
.twitter-icon {}
.twitter-icon:hover {
    color: #9AE4E8;
    background: white;
}

.vimeo-icon {}
.vimeo-icon:hover {
    color: black;
    background: white;
}

.facebook-icon {}
.facebook-icon:hover {
    color: #3c5a98;
    background: white;
}

/* Farbwechsler */
/* Animation nur für Wechsel bei Background-Color */
html {
    -webkit-transition: background-color .5s ;
       -moz-transition: background-color .5s ;
        -ms-transition: background-color .5s ;
         -o-transition: background-color .5s ;
            transition: background-color .5s ;
}

.farbwechsler {
    text-align: center;
    margin: 2em 0 0;
}

.color-wrap { display: inline-block }
.color-circle {
    background: red;
    float: left;
    border-radius: 1.375em;
    padding: 1.375em; /* (44/16)/2 */
    margin-right: -0.5em;
    -khtml-opacity: .75;
      -moz-opacity: .75;
           opacity: .75;
    cursor: pointer;
}

.color-circle:hover {
    -khtml-opacity: 1;
      -moz-opacity: 1;
           opacity: 1;
}

/* Hintegrundfarben für Kreise und html-Element */
.orange,
.color-orange     { background: #d94625 }
.dunkelgelb,
.color-dunkelgelb { background: #f2e530 }
.hellgelb,
.color-hellgelb   { background: #f2eda7 }
.hellblau,
.color-hellblau   { background: #54bfac }
.dunkelblau,
.color-dunkelblau { background: #1ba68c }

/* Vote-Button */
.vote {
    width: 250px;
    height: 480px;
    background: url("../images/vote_small.png");
    background-size: 100% 100%;
    display: block;
    margin: 0 auto;
}


/* Statistiken */
.statistik {
    overflow: hidden;
    margin-bottom: 1em;
    font-family: "AmbleRegular", "Arial Bold";
    border-radius: 100px;
    margin: 1em 2.5%;

    margin: 0;
    width: auto;
    text-align: center;
    border-radius: 0;
    margin-left: 2.5%;
    margin-right: 2.5%;

    padding: 0.5em;
    margin-bottom: 1em;
    border-radius: 3px;
    cursor: default;

    background: white;
    color: black;
}

.statistik img {
    float: left;
    margin-right: 1em;
    display: inline;

    margin-right: 0;
    display: inline-block;
    height: 100% !important;
    float: none;
    margin-right: 0.5em;
    vertical-align: top;
    width: 88px;
    height: 88px !important;
}

.statistik p {
    padding-top: 1em;
    padding: 0;

    margin: 0;
    display: inline-block;
    vertical-align: middle;

    display: block;
}

.smartphone {}
.smartphone p {}
.smartphone img {
    margin-right: 0;
}

/* Los geht's button */
.los-gehts {
    font-family: "journal";
    color: black;
    text-decoration: none;
    font-size: 2.5em;
    text-transform: uppercase;
    margin-top: 1em;
    display: inline-block;
    background: url(../images/arrow-down-losgehts.png) no-repeat center bottom;
    padding-bottom: 2.85em;
}
.los-gehts:hover,
.los-gehts:focus {
    text-decoration: underline;
}

@media all and (min-width: 30.9375em ) { /* 495/16 */
    .statistik p {
        display: inline-block;
        text-align: left;
    }
    .smartphone p {
        text-align: right;
    }
    .smartphone img {
        margin-left: 0.5em;
    }
    .statistik img {
        vertical-align: middle;
    }
    .vote {
        width: 125px;
        height: 240px;
        top: -1px;
        z-index: 100;
        right: 59px;
        position: absolute;
    }
}

/* Wenn Logo links und Navigation ausgeschrieben rechts gefloatet */
@media all and (min-width: 53.125em) {
    .vote {
        right: auto;
        top: 67px;
        left: 29px;
        z-index: 95;
    }
}

/* Wenn max. Breite für Logo und Navigation */
@media all and (min-width: 61.8125em) {
    .vote {
        left: 50%;
        margin-left: -452px;
        width: 150px;
        height: 288px;
    }
}

/**
 * Entfernt umbruch von Text in Statistiken,
 * Setzt maximale breite für Absätze */
@media all and (min-width: 31.5em) { /* 504 / 16 */
    .multimedianer p {
        max-width: 38.75em; /* 620 / 16 */
        margin-right: auto;
        margin-left: auto;
    }
}

/**
 * Entfernt background von Statistiken,
 * macht Umbrüche Sichtbar und floatet sie gegen links & rechts  */
@media all and (min-width: 850px) { /* 817 / 16 */
    .mobbing { float: left }
    .smartphone { float: right }
}

/**
 * Positioniert Social-Buttons nach rechts unten,
 * macht die Icons kleiner,
 * setzt höhe auf 100% für .multimedianer Inhalt. */
@media all and (min-width: 53.125em) and (min-height: 31.25em) { /* 850/16  , 500/16 */
    .social-buttons {
        overflow: hidden;
        width: 100%;
        position: absolute;
        right: 2.5%;
        bottom: 1.2em;
        text-align: right;
    }
    .icon {
        font-size: 14px;
        padding: 7px;
        text-align: center;
    }

    .farbwechsler {
        position: fixed;
        bottom: 0.9375em; /* 15/16 */
        left: 2.5%;
        z-index: 85;
    }
    .article.multimedianer {
        min-height: 100%;
        height:auto !important;
        height: 100%;
        position: relative;
    }

    html, body, .wrapper, .article, .content {
        height: 100%;
    }
    .skew-positive,
    .skew-negative {
        height: auto;
    }
}



/* Content
   ========================================================================== */

/* Background-image-sizing */
/* Eigenschaften für's Hintergrund/Platzhalterbild */
.unskew {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    background-size: cover;
}

/**
 * Vimeo Responsive Implementation
 * http://www.holgerkoenemann.com/vimeo-oder-youtube-video-responsive-einbinden/
 * Default: 16 zu 9 >> (9 / 16) * 100 = 56.25%
 */
.vimeo {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio */
    height: 0;
    overflow: hidden;
    z-index: 85;
}
.vimeo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


/**
 * Checklist
 */
.checklist {
    border-top: 3em solid transparent;
    padding: 0 5% 0;
    font-family: "journal";
    width: 75%;
    margin: 0 auto;
    border-bottom: 3em solid transparent;
    -webkit-transition: all 1s;
       -moz-transition: all 1s;
        -ms-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;

}
.checklist h3 { padding-top: 0 }

h4 {
    color: black;
    padding: 0.25em 0;
    margin-top: -17px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.28);
    position: relative;
    margin: -17px 11px 0px;
    width: 95%;
    padding-top: 0.5em;
    margin: -17px auto 0;
}
h4 .ribbon {
    position: absolute;
    font-size: 35px;
    top: 34px;
    right: 22px;
}
.thumb {
    position: absolute;
    top: 11px;
    right: 5px;
    color: white;
    z-index: 10;
}
.checklist ul {
    float: left;
    clear: left;
    width: 100%;
    margin-bottom: 6em;
}
.checklist li {
    font-size: 2em;
    width: 75%;
    margin: 0 auto;
    color: black;
}
.checklist li:before {
    content: "- ";
}

/* Paper-Shadows and Paper color */
.paper-1,
.paper-2,
.paper-3 {
       -moz-box-shadow: 0em 0.0625em 0.3em rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0em 0.0625em 0.3em rgba(0, 0, 0, 0.6);
            box-shadow: 0em 0.0625em 0.3em rgba(0, 0, 0, 0.6);
    background: rgb(250, 247, 245);
}

.paper-1 {
    padding: 1em;
    -webkit-transform: rotate(-1deg);
       -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
         -o-transform: rotate(-1deg);
            transform: rotate(-1deg);
}
.paper-2 {
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
         -o-transform: rotate(3deg);
            transform: rotate(3deg);
    margin: -1em;
}
.paper-3 {
    -webkit-transform: rotate(-2deg);
       -moz-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
         -o-transform: rotate(-2deg);
            transform: rotate(-2deg);
    padding: 1em;
    overflow: hidden;
}

@media all and (min-width: 0) {
    .checklist-button [data-icon]::before {
        margin-right: 10px;
    }
}
.checklist-button {
    text-decoration: none;
    margin: 0 auto;
    width: 50%;
    display: block;
    text-align: center;
    padding: 1em 0;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;
    top: -1em;
}

.checklist-button:hover { color: white }

@media all and (min-width: 62.5em) { /* 1000/16 */
    .checklist {
        -webkit-transform: rotate(-1deg);
           -moz-transform: rotate(-1deg);
            -ms-transform: rotate(-1deg);
             -o-transform: rotate(-1deg);
                transform: rotate(-1deg);
    }
    .checklist-in-wrapper {
        float: left;
        display: inline-block;
        width: 45%;
        border-right: 1px solid rgba(0, 0, 0, 0.35);
        padding-right: 5%;
    }
    .checklist-out-wrapper {
        float: right;
        display: inline-block;
        width: 45%;
    }
}


/**
 * Positionierung der Checklist und Video Inhalten
 * bei genügend grossen Viewports */

@media all and (min-width: 53.125em) and (min-height: 31.25em) { /* 850/16 ;  500/16 */
    /* Platzhalterbilder für Inhaltselement Internet */
    .internet .video .unskew { background-image: url(../images/placeholders/internet-video.jpg) }
    .internet .checklist-wrap .unskew { background-image: url(../images/placeholders/internet-checklist.jpg) }

    /* Platzhalterbilder für Inhaltselement Mobile */
    .mobile .video .unskew { background-image: url(../images/placeholders/mobile-video.jpg) }
    .mobile .checklist-wrap .unskew { background-image: url(../images/placeholders/mobile-checklist.jpg) }

    /* Platzhalterbilder für Inhaltselement Mobile */
    .games .video .unskew { background-image: url(../images/placeholders/games-video.jpg) }
    .games .checklist-wrap .unskew { background-image: url(../images/placeholders/games-checklist.jpg) }

    /* Platzhalterbilder für Inhaltselement Mobile */
    .social-media .video .unskew { background-image: url(../images/placeholders/social-media-video.jpg) }
    .social-media .checklist-wrap .unskew { background-image: url(../images/placeholders/social-media-checklist.jpg) }
}

/*@media all and (min-width: 51.8125em) and (min-height: 54.5em) {*/
@media all and (min-width: 53.125em) and (min-height: 31.25em) { /* 850/16; 500/16 */
    .article {
        margin-bottom: 0;
    }
    .js-enabled .ueber-uns {
        background: white;
    }
    .js-enabled .links,
    .links {
        background: #f8f6f4;
    }

    /* Für Startseite/Multimedianer-Rap keinen schwarzen Hintegrund */
    .js-enabled .multimedianer,
    .js-enabled .multimedianer-rap {
        height: auto !important;
        background: none;
    }

    .vidCheckContent {
        position: relative;
        overflow: hidden;
        height: 100%;
        background-color: black;
        z-index: 90;
    }

    /* Überschrift als rundumeli formatieren */
    .js-enabled .vidCheckContent h2 {
        position: absolute;
        z-index: 90;
        background: black;
        color: white;
        border-radius: 10em;
        height: 5em;
        width: 5em;
        text-align: center;
        left: 50%;
        line-height: 5em;
        padding: 1em;
        font-size: 2.5625em; /* 41/16 */
        white-space: nowrap;
        top: 50%;
        margin-left: -3.5em;
        margin-top: -4em;

           -moz-box-shadow: 0 0 237px rgba(255,255,255,0.5);
        -webkit-box-shadow: 0 0 237px rgba(255,255,255,0.5);
                box-shadow: 0 0 237px rgba(255,255,255,0.5);
        cursor: default;
    }
    .js-enabled .vidCheckContent h2 span {
        display: inline;
        border: 0;
        padding: 0;
    }
    .js-enabled .vidCheckContent .video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100%;
    }
    /* Schiebt das Video aus Viewport nach rechts */
    .js-enabled .vidCheckContent .vimeo {
        top: 0;
        bottom: 0;
        padding: 0;
        height: auto;
        left: 100%;
        right: 0;
        position: absolute;

        -webkit-transition: all 1s;
           -moz-transition: all 1s;
            -ms-transition: all 1s;
             -o-transition: all 1s;
                transition: all 1s;
    }
    /* Schiebt die Checkliste aus Viewport nach links */
    .js-enabled .checklist {
        position: relative;
        right: 100%;
    }
    /* Schiebt den Download-button aus Viewport nach links */
    .js-enabled .checklist-button {
        position: relative;
        right: 100%;
    }

    .js-enabled .checklist-wrap {
        position: absolute;
        left: -50%;
        width: 100%;
        top: 0;
        height: 100%;
    }
    .js-enabled .vidCheckContent .unskew {
        height: 100%;
    }

    .js-enabled h5 {
        display: inline-block;
        position: absolute;
        color: white;
        top: 50%;
        margin-top: -4.5em;
        -webkit-transition: all .25s ease-in-out;
        -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
        -o-transition: all .25s ease-in-out;
        transition: all .25s ease-in-out;
        font-size: 4em;
    }
    .js-enabled .video h5 {
        left: 5%;

        -webkit-transform: rotate(-8deg);
           -moz-transform: rotate(-8deg);
            -ms-transform: rotate(-8deg);
             -o-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }

    .js-enabled .checklist-wrap h5 {
        right: 5%;

        -webkit-transform: rotate(8deg);
           -moz-transform: rotate(8deg);
            -ms-transform: rotate(8deg);
             -o-transform: rotate(8deg);
                transform: rotate(8deg);
    }

    /**
     * Handkursor anzeigen bei Mouseover
     * CSS3 Animationen beim Verschieben aktivieren
     */
    .js-enabled .video,
    .js-enabled .checklist-wrap {
        cursor: pointer;
        -webkit-transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
           -moz-transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
            -ms-transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
             -o-transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
                transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    }

    /* Blendet "<- Checkliste" und "Video ->" aus, bei Mouseover */
    .js-enabled .vidCheckContent:hover h5 {
        display: none;
    }

    /* Blendet beim gemouseoverten Element h5 wieder ein */
    .js-enabled .video:hover h5,
    .js-enabled .checklist-wrap:hover h5 {
        display: inline;
    }

    /* Layout für Checklist-Anzeige in voller Breite */
    .viewChecklist {}
    .js-enabled .vidCheckContent.viewChecklist h2 {
        text-align: left;
        left: auto;
        right: -5.5em;
        padding-left: 0.5em;
        padding-right: 3.5em;
        cursor: pointer;
    }
    .js-enabled .vidCheckContent.viewChecklist h2:hover {
        background-color: white;
        color: black;
    }
    .vidCheckContent.viewChecklist .video {
        left: 100%;
    }
    .vidCheckContent.viewChecklist .checklist-wrap {
        left: 0px;
        cursor: default;
    }
    .viewChecklist h5 {
        display: none !important;
    }
    .js-enabled .viewChecklist .checklist,
    .js-enabled .viewChecklist .checklist-button {
        right: auto;
    }

    /* Layout für Video-Anzeige in voller Breite */
    .viewVideo {}
    .js-enabled .vidCheckContent.viewVideo h2 {
        text-align: right;
        right: auto;
        left: -5.5em;
        padding-right: 0.5em;
        padding-left: 3.5em;
        cursor: pointer;
        margin-left: 0;
    }
    .js-enabled .vidCheckContent.viewVideo h2:hover {
        background-color: white;
        color: black;
    }

    .vidCheckContent.viewVideo .video {
        left: 0;
        cursor: default;
    }
    .viewVideo .checklist-wrap {
        left: -100%;
    }
    .viewVideo h5 {
        display: none !important;
    }
    .js-enabled .viewVideo .vimeo {
        left: 0;
    }

    /**
     * Formatierungen wenn schrägen supportet
     */

}



/* Multimedianer-Rap
   ========================================================================== */
.article.multimedianer-rap {
    height: auto;
    padding-bottom: 2.5em;
}


@media all and (min-width: 49.9375em) { /* 799/16 */
    .boombox {
        padding-top:53.29512894% ; /* 17.45 zu 9.30 >> (9.30 / 17.45) * 100 = 53.29512894% */
        height: 0;
        background: url("../images/boombox.png");
        background-size: 100% 100%;
        position: relative;
    }

    .boombox iframe {
        position: absolute;
        top: 50%;
        margin-top: 3.5%;
        width: 27.5%;
        left: 50%;
        margin-left: -14.8%;
        height: 20%;
    }
}

/* Alltag eines Mediamatikers
   ========================================================================== */
.article.alltagEinesMultimedianers {
    height: auto;
}



/* Wer wir sind
   ========================================================================== */
.article.ueber-uns {
    text-align: center;
    height: auto !important;
}

.ueber-uns br {
    display: none;
}
.ueber-uns h2 br {
    display: inline;
}
.mail {
    font-size: 0.5em;
    text-decoration: none;
    display: inline-block;
    top: -0.75em;
    position: relative;
}

.ueber-uns h2 {
    margin-bottom: 2.5em;
}
.ueber-uns-wrap {
    padding: 0 1em;
}
.person {
    width: 11.1875em; /* 179/16 */
    height: 26.25em; /* 420/16 */
    display: inline-block;
    background: url("../images/ueber-uns-portrait-oben.png") no-repeat;
    position: relative;
    margin-top: -2.5em;
    cursor: default;
}
.person:hover ímg {
    display: none;
}
.person-inner {
    position: absolute;
    top: 0;
    right: 0;
    height: 420px;
    width: 179px;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.larissa    { background: url(../images/ueber-uns/oben/larissa1.png) no-repeat }
.oli        { background: url(../images/ueber-uns/oben/oli1.png) no-repeat }
.gaga       { background: url(../images/ueber-uns/oben/gaga1.png) no-repeat }
.yanna      { background: url(../images/ueber-uns/oben/yanna1.png) no-repeat }
.michi      { background: url(../images/ueber-uns/oben/michi1.png) no-repeat }
.sarina     { background: url(../images/ueber-uns/oben/sarina1.png) no-repeat }
.robin      { background: url(../images/ueber-uns/oben/robin1.png) no-repeat }
.mevlo      { background: url(../images/ueber-uns/oben/mevlo1.png) no-repeat }
.dani       { background: url(../images/ueber-uns/oben/dani1.png) no-repeat }
.paul       { background: url(../images/ueber-uns/oben/paul1.png) no-repeat }
.david      { background: url(../images/ueber-uns/oben/david1.png) no-repeat }
.joel       { background: url(../images/ueber-uns/oben/joel1.png) no-repeat }
.raphael    { background: url(../images/ueber-uns/oben/raphael1.png) no-repeat }
.gallus     { background: url(../images/ueber-uns/oben/glanzmann1.png) no-repeat }


.larissa:hover img,
.oli:hover img,
.gaga:hover img,
.michi:hover img,
.sarina:hover img,
.robin:hover img,
.mevlo:hover img,
.dani:hover img,
.paul:hover img,
.yanna:hover img,
.david:hover img,
.joel:hover img,
.raphael:hover img,
.gallus:hover img { display: none }

.person h3 {
    margin-top: 2.84375em; /* 182/ 64 */
    margin-bottom: 0;
}
.person em {  }
.person img {
    position: absolute;
    top: 0;
    left: 0;
}

/* Drei nebeneinander */
@media all and (min-width: 35.5625em) and (max-width: 46.75em) { /* ((537 + (2*16)) / 16 */
    .person:nth-of-type(3n+2) { background-image: url("../images/ueber-uns-portrait-unten.png") }
    .person:nth-of-type(3n+2) img { display: none }
    .person:nth-of-type(3n+2) h3 { margin-top: 1.1875em; } /* 76 / 64 */

    .oli:nth-of-type(1)           { background: url("../images/ueber-uns/unten/oli.png") no-repeat center bottom }
    .oli:nth-of-type(1):hover     { background-image: url("../images/ueber-uns/unten/oli1.png") }

    .michi:nth-of-type(1)         { background: url("../images/ueber-uns/unten/michi.png") no-repeat center bottom }
    .michi:nth-of-type(1):hover   { background-image: url("../images/ueber-uns/unten/michi1.png") }

    .dani:nth-of-type(1)          { background: url("../images/ueber-uns/unten/dani.png") no-repeat center bottom }
    .dani:nth-of-type(1):hover    { background-image: url("../images/ueber-uns/unten/dani1.png") }

    .david:nth-of-type(1)         { background: url("../images/ueber-uns/unten/david.png") no-repeat center bottom }
    .david:nth-of-type(1):hover   { background-image: url("../images/ueber-uns/unten/david1.png") }

    .gallus:nth-of-type(1)        { background: url("../images/ueber-uns/unten/glanzmann.png") no-repeat center bottom }
    .gallus:nth-of-type(1):hover  { background-image: url("../images/ueber-uns/unten/glanzmann1.png") }

}


/* Vier nebeneinander */
@media all and (min-width: 46.75em) { /* (716 + (2*16) / 16 */
    .person:nth-of-type(2n+2) { background-image: url("../images/ueber-uns-portrait-unten.png") }
    .person:nth-of-type(2n+2) img { display: none }
    .person:nth-of-type(2n+2) h3 { margin-top: 1.1875em; } /* 76 / 64 */

    .oli:nth-of-type(1)           { background: url("../images/ueber-uns/unten/oli.png") no-repeat center bottom }
    .oli:nth-of-type(1):hover     { background-image: url("../images/ueber-uns/unten/oli1.png") }

    .sarina:nth-of-type(1)        { background: url("../images/ueber-uns/unten/sarina.png") no-repeat center bottom }
    .sarina:nth-of-type(1):hover  { background-image: url("../images/ueber-uns/unten/sarina1.png") }

    .mevlo:nth-of-type(1)         { background: url("../images/ueber-uns/unten/mevlo.png") no-repeat center bottom }
    .mevlo:nth-of-type(1):hover   { background-image: url("../images/ueber-uns/unten/mevlo1.png") }

    .dani:nth-of-type(1)          { background: url("../images/ueber-uns/unten/dani.png") no-repeat center bottom }
    .dani:nth-of-type(1):hover    { background-image: url("../images/ueber-uns/unten/dani1.png") }

    .yanna:nth-of-type(1)         { background: url("../images/ueber-uns/unten/yanna.png") no-repeat center bottom }
    .yanna:nth-of-type(1):hover   { background-image: url("../images/ueber-uns/unten/yanna1.png") }

    .joel:nth-of-type(1)          { background: url("../images/ueber-uns/unten/joel.png") no-repeat center bottom }
    .joel:nth-of-type(1):hover    { background-image: url("../images/ueber-uns/unten/joel1.png") }

    .gallus:nth-of-type(1)        { background: url("../images/ueber-uns/unten/glanzmann.png") no-repeat center bottom }
    .gallus:nth-of-type(1):hover  { background-image: url("../images/ueber-uns/unten/glanzmann1.png") }

    .ueber-uns .four { display: inline }
}

/* Maximal fünf nebeneinander */
@media all and (min-width: 57.9375em) {
    .ueber-uns .four { display: none }
    .ueber-uns br { display: inline }
    .ueber-uns-wrap {
        width: 57.9375em;
        margin: 0 auto;
    }
}




/**
 * Back To Top
 */
.backToTop {
    position: relative;
    padding-bottom: 40.483162518%; /* 1366x553, (5.53/13.66)*100 */
    height: 0;

    background: url("../images/footer-background.png") no-repeat center top;
    background-size: 100% 100%;
}
.info {
    text-align: right;
    color: white;
    text-shadow: 0 2px 2px black;
    position: absolute;
    bottom: 2%;
    right: 2.5%;
}
.info h6 {
    display: none;
    text-align: right;
}
.toTopLink {
    text-decoration: none;
    color: white;
    padding-bottom: 0.5em;
    display: inline-block;
}
.toTopLink:hover { color: white; text-decoration: underline }
.backToTop-Content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media all and (min-width: 61.4375em) { /* 983/16 */
    .info h6 {
        display: block;
    }
}



/* Farbanpassungen wenn Farbwechsler aktiv */
/* Hintegrundfarben für Kreise und html-Element */
.js-enabled .article {
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;

}

/* Layout Orange */
.color-orange .document-border,
.color-orange.js-enabled .article { background: #d94625 }
.color-orange,

.color-orange a,
.color-orange .los-gehts { color: white }
.color-orange .document-border:before { background: rgb(228, 145, 127) }
.color-orange .checklist-wrap {
    background: #d94625;
    background-image: -webkit-gradient(radial, center center, 0, center center, from(rgb(228, 145, 127)), to(#d94625));
    background-image: -webkit-radial-gradient(center center, circle, rgb(228, 145, 127), #d94625);
    background-image:    -moz-radial-gradient(center center, circle, rgb(228, 145, 127), #d94625);
    background-image:     -ms-radial-gradient(center center, circle, rgb(228, 145, 127), #d94625);
    background-image:      -o-radial-gradient(center center, circle, rgb(228, 145, 127), #d94625);
    background-image:         radial-gradient(center center, circle, rgb(228, 145, 127), #d94625);
}
.color-orange .article[style] {
    border-top-color: #d94625 !important;
}
.color-orange .statistik,
.color-hellblau .statistik,
.color-dunkelblau .statistik {
    box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
       -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
            box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Layout Dunkelgelb */
.color-dunkelgelb .document-border,
.color-dunkelgelb.js-enabled .article { background: #f2e530 }
.color-dunkelgelb .document-border:before { background: rgb(255, 242, 56) }
.color-dunkelgelb .checklist-wrap {
    background: #f2e530;
    background-image: -webkit-gradient(radial, center center, 0, center center, from(rgb(255, 242, 56)), to(#f2e530));
    background-image: -webkit-radial-gradient(center center, circle, rgb(255, 242, 56), #f2e530);
    background-image:    -moz-radial-gradient(center center, circle, rgb(255, 242, 56), #f2e530);
    background-image:     -ms-radial-gradient(center center, circle, rgb(255, 242, 56), #f2e530);
    background-image:      -o-radial-gradient(center center, circle, rgb(255, 242, 56), #f2e530);
    background-image:         radial-gradient(center center, circle, rgb(255, 242, 56), #f2e530);
}
.color-dunkelgelb .article[style] {
    border-top-color: #f2e530 !important;
}

/* Layout Hellgelb */
.color-hellgelb .document-border,
.color-hellgelb.js-enabled .article { background: #f2eda7 }
.color-hellgelb .document-border:before { background: rgb(255, 250, 174) }
.color-hellgelb .checklist-wrap {
    background: #f2eda7;
    background-image: -webkit-gradient(radial, center center, 0, center center, from(rgb(255, 250, 174)), to(#f2eda7));
    background-image: -webkit-radial-gradient(center center, circle, rgb(255, 250, 174), #f2eda7);
    background-image:    -moz-radial-gradient(center center, circle, rgb(255, 250, 174), #f2eda7);
    background-image:     -ms-radial-gradient(center center, circle, rgb(255, 250, 174), #f2eda7);
    background-image:      -o-radial-gradient(center center, circle, rgb(255, 250, 174), #f2eda7);
    background-image:         radial-gradient(center center, circle, rgb(255, 250, 174), #f2eda7);
}
.color-hellgelb .article[style] {
    border-top-color: #f2eda7 !important;
}

/* Layout Hellblau */
.color-hellblau .document-border,
.color-hellblau.js-enabled .article { background: #54bfac }
.color-hellblau .document-border:before { background: rgb(137, 223, 207) }
.color-hellblau .checklist-wrap {
    background: #54bfac;
    background-image: -webkit-gradient(radial, center center, 0, center center, from(rgb(137, 223, 207)), to(#54bfac));
    background-image: -webkit-radial-gradient(center center, circle, rgb(137, 223, 207), #54bfac);
    background-image:    -moz-radial-gradient(center center, circle, rgb(137, 223, 207), #54bfac);
    background-image:     -ms-radial-gradient(center center, circle, rgb(137, 223, 207), #54bfac);
    background-image:      -o-radial-gradient(center center, circle, rgb(137, 223, 207), #54bfac);
    background-image:         radial-gradient(center center, circle, rgb(137, 223, 207), #54bfac);
}
.color-hellblau .article[style] {
    border-top-color: #54bfac !important;
}

/* Layout Dunkelblau */
.color-dunkelblau.js-enabled .article {
    background: #1ba68c;
}
.color-dunkelblau,
.color-dunkelblau a,
.color-dunkelblau .los-gehts {
    color: white;
}
.color-dunkelblau .checklist-wrap {
    background: #1ba68c;
    background-image: -webkit-gradient(radial, center center, 0, center center, from(#54bfac), to(#1ba68c));
    background-image: -webkit-radial-gradient(center center, circle, #54bfac, #1ba68c);
    background-image:    -moz-radial-gradient(center center, circle, #54bfac, #1ba68c);
    background-image:     -ms-radial-gradient(center center, circle, #54bfac, #1ba68c);
    background-image:      -o-radial-gradient(center center, circle, #54bfac, #1ba68c);
    background-image:         radial-gradient(center center, circle, #54bfac, #1ba68c);
}
.color-dunkelblau .article[style] {
    border-top-color: #1ba68c !important;
}


/* ==========================================================================
   Retina & high resolution
   ========================================================================== */

/**
 * CSS-Mediaquery für Retina und hochauflösende Pixel ratios
 *
 * Greift wenn Pixeldichte bei mind. 1.5
 *
 * http://bjango.com/articles/min-device-pixel-ratio/
 * http://css-tricks.com/snippets/css/retina-display-media-query/
 * CSS Sprites & Retina Display's:
 * http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-reti
 * na-displays/
 */

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    /* http://www.normansblog.de/css3-im-detail-background-size/
       https://developer.mozilla.org/de/docs/CSS/background-size */
    .example {
        background: url(dummy@2x.jpg);
        -webkit-background-size: 100% 100%; /* Safari 3.0 */
           -moz-background-size: 100% 100%; /* Gecko 1.9.2 (FF 3.6) */
             -o-background-size: 100% 100%; /* Opera 9.5 */
                background-size: 100% 100%; /* Gecko 2.0 (FF 4.0) and other CSS3
                                               -compliant browsers */
    }

}


/* ==========================================================================
   Unsematische Klassen
   ========================================================================== */

/* Von Screenreadern und Browsern verbergen: h5bp.com/u */
.hidden { display: none !important }

/* Visuell verbergen, für Screenreader lesbar lassen: h5bp.com/v */
.visuallyhidden { position: absolute !important; left: -999em !important }


/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important }
    a, a:visited { text-decoration: underline }
    a[href]:after { content: " (" attr(href) ")" }
    abbr[title]:after { content: " (" attr(title) ")" }
    a[href^="javascript:"]:after, a[href^="#"]:after { content: "" }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
    thead { display: table-header-group } /* h5bp.com/t */
    tr, img { page-break-inside: avoid }
    img { max-width: 100% !important }
    p, h2, h3 { orphans: 3; widows: 3 }
    h2, h3 { page-break-after: avoid }
}