/*--------------------- Allgemeine Einstellungen ---------------------*/
/* tagwerk.css nur als Link im jeweiligen image-Verzechnis zur Verfügung stellen:
ln tagwerk.css ../../../popkenfashiongroup/images/
*/


* {
    box-sizing: border-box;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    font-weight: normal;
}

img { 
    border: none;
    display: block;
    height: auto;
    margin: 0 auto;
    width: 100%;
}

html {}

body {
    font-size: 80%;
    line-height: 1.5;
    text-align: left;
        -webkit-print-color-adjust: exact;
	background-color: white;

}
@media (min-width: 360px) {
    body { font-size: 100%; }
}
@media print {
    body { font-size: 15px; }
}
	
section {}

/*--------------------- Anzeige ---------------------*/
.container {
    position: relative;
    margin: 0 auto;
	width: 100%;
	max-width: 999px;
	border: 1px solid rgba(156, 156, 156, 1);
	overflow: hidden;
}
@media print {
	.container { width: 999px; }
}

.row {}

/*--------------------- Logo ---------------------*/
.logo__ganzebreite {
    padding: 4% 0;
}
.logo__links  {
    float: left;
    padding: 4% 0 4% 6%;
}
.logo__rechts {
    float: right;
    padding: 4% 6% 4% 0;
}
.logo__zentriert {
        padding: 4% 0;
        margin: auto;
}

@media (min-width: 600px), print {
    .logo__links  { padding: 4% 0 4% 3.5rem; }
    .logo__rechts { padding: 4% 3.5rem 4% 0; }
}

/*--------------------- Bildleiste ---------------------*/
.bildleiste {
    float: left;
    margin-bottom: 4%;
    position: relative;
}
.bildleiste__1eintel   { width: 100%; }

.bildleiste__1halb { width: 50%; }

.bildleiste__1drittel { width: 33.3%; }
.bildleiste__2drittel { width: 66.7%; }

.bildleiste__1viertel { width: 25%; }

/*--------------------- Text ---------------------*/
.text{ padding: 0 6% 1rem 6%; }
@media (min-width: 600px), print { 
    .text { padding: 0 3.5em 1rem 3.5rem; }
}

.text__aufbild { position: absolute; }
.text__aufbild--links { left: 10%; }
.text__aufbild--rechts { right: 10%; }
.text__unternehmensbeschreibung { font-size: 1em; }

.text__stelle__block { margin-bottom: 1em; }
.text__stelle { font-size: 1.2em; }
.text__unterzeile {
	font-size: 1em;
}

@media (min-width: 450px) { 
	.text__stelle { font-size: 1.5em; }
	.text__unterzeile { font-size: 1.2em; }
}
@media (min-width: 600px) { 
	.text__stelle { font-size: 1.8em; }
	.text__unterzeile { font-size: 1.3em; }
}
@media (min-width: 950px), print { 
	.text__stelle { font-size: 3em; }
	.text__unterzeile { font-size: 1.8em; }
}
@media (min-width: 10000px) { 
	.text__stelle { font-size: 3em; }
	.text__unterzeile { font-size: 2em; }
}



.wm { font-size: 60%; }
.text__hervorhebung { font-weight: bold; }
.text__adresse--block {	white-space: nowrap; }
.text__adresse--block::after { content: " |"; }
.text__adresse--block:last-child::after  { content: none; }

p {}
h1 {}
h2 {}
h3 {}

ul {
    padding-left: 1.3em;      /* mögliches Flattern der List Items ausgeleichen */
    text-indent: -1.2em;    /* mögliches Flattern der List Items ausgeleichen */
}
ul li:before { content: "\2022 \020 \0A0"; } /* Bullet, Leerzeichen */

@media (min-width: 10000px)  {  /*Stepstone-Mobil-Browser-Ansicht*/
    ul {
        list-style: disc;
        text-indent: 0;
    }
    li { list-style: disc; }
}

@media (min-width: 760px), print  { 
    .text__aufgaben, .text__profil { 
        float: left;
		width: 50%;
    }
    .text__aufgaben { padding-right: 2%; }
    .text__profil { padding-left: 2%; }
        
    .text__aufgaben--einspaltig, .text__profil--einspaltig { 
		width: 100%;
    }
}
@media (min-width: 10000px)  {  /*Stepstone-Mobil-Browser-Ansicht*/
    .text__aufgaben, .text__profil { 
	float: none;
	width: 100%;
	padding: 0 9% 1em 9%;
    }
}

a {
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}

/*--------------------- Bewerben ---------------------*/
.bewerben {
    text-align: center;
    transition: 1s ease;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    margin: 1em 6% 1em 6%;
    padding: 2% 4%;
}
@media (min-width: 600px) { 
    .bewerben { margin: 1rem 3.5rem 1rem 3.5rem; }
    .bewerben__links  { float: left; }
    .bewerben__rechts { float: right; }
    .bewerben__zentriert { 
        margin: 1rem auto;
        width: 30%;
    }
    .bewerben__ganzebreite {}
}
@media print {
    .bewerben { display: none; }
}
/*--------------------- Siegel ---------------------*/
.siegel__links {
    float: left;
    padding-right: 1em;
}
.siegel__rechts {
    float: right;
    padding-left: 1em;
}

/*--------------------- Markenband ---------------------*/
.markenband { padding: 0 4.5%; }
@media (min-width: 600px), print { 
    .markenband { padding: 0 2.7rem; }
}
.markenband__logo {
    float: left;
    padding: 0 0.8rem;
}
/* TODO Siegel unten fixieren */

/*--------------------- Clearfix by Nicolas Gallagher ---------------------*/
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/*--------------------- Layoutelement ---------------------*/
.layoutelement__abstandnachunten { margin-bottom: 4%; }

/*--------------------- Nur zum Erklären ---------------------*/


/*--------------------- Helfer ---------------------*/
.bemerkung {
	color: blue;
	font-size: 200%;
}

/*--------------------- Info ---------------------*/

/**** Breaking Points: ****
360
	Schriftgroesse (<360px = 80% / ab 360px = 100%)
450 Stellentitel
600
	Raender
		Logo
		Text
		Markenband
		Layout-Element
	Schriftgroesse h1+h2
	Siegel
760
	2-Spaltigkeit (ipad-width = 768)
	Siegel
950
	Schriftgroesse h1+h2
10000
	Stepstone-Mobil-App-Ansicht	
*/

/**** Logos als Vektorgrafiken einbinden  ****
<div class="logo group">
	<a href="http://www.dmk.de/" target="_blank">
		<img src="../images/dmk-logo_group.svg" alt="DMK-Logo" />
	</a>
</div>
Positionierung und IE-Hilfe: http://www.mediaevent.de/tutorial/svg-responsive.html

svg bei Stepstone nicht erlaubt :-(
*/

/**** Cross Browser Test  ****
getestet auf:
	Chrome (Mac) 				ok
	Chrome (PC) 				ok
	Chrome (Android)			ok
	Chrome (iPad)				weisser Rand im Querformat, sonst ok

	Firefox (Mac)				ok (
	Firefox (PC)				ok
	Firefox (Android)			ok
	Firefox (iPad)				weisser Rand im Querformat, sonst ok
	
	Opera (Mac)					ok
	Opera (PC)					ok
	Opara (Android)				Text laeuft rechts nicht weit genug, leere weisse Spalte (Anzeige lesbar)
	Opera (iPad)				weisser Rand im Querformat, sonst ok
	
	Safari (Mac)				ok
	Safari (iPad)				weisser Rand im Querformat, sonst ok
	
	Edge (PC)					ok (kein Layoutelement auf dem Ausdruck)
	Internet Exploder 11 (PC)	ok (kein Layoutelement auf dem Ausdruck)
	Internet Exploder 10 (PC)	ok (kein Layoutelement auf dem Ausdruck)
	Internet Exploder 9 (PC)	ok (kein Layoutelement auf dem Ausdruck)
	Internet Exploder 8 (PC)	Logos zu gross, Markenband werden immer 4x3 angezeigt, kein Layoutelement (Anzeige lesbar)
	Internet Exploder 7 (PC)	Logos zu gross, Abstaende falsch, Markenband werden immer 4x3 angezeigt und sind durcheinander, kein Layoutelement (Anezige lesbar)
	
	Der validator.w3.org gibt eine Warunung aus:
	Warning: Legacy encoding windows-1252 used. Documents should use UTF-8.
	Das geht leider nicht anders, da Stepstone kein UTF-8 akzepiert.
*/