:root {
    --dunkelblau: #133d4d;         /*  footer */
    --mittelblau: #2c5c9d;         /* aus dem logo */
    --lilablau: #3e4b74;         /* aus dem logo */
    --hellblau: #bfd2de;         /* hintergrund main */
    --blaukasten: #b3c2cd;     /* zb zitat */
    --transbox:rgba(255,255,255,0.90);
}


/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}



* {margin:0; padding:0; box-sizing: border-box;}

html {height:100%;}

body {
     font-family: 'Source Sans Pro', sans-serif;
    background-image: url(../img/bg6.jpg);
    background-position: 0 top;
	background-size: cover;
	background-repeat: no-repeat;
    background-color:var(--hellblau);
    background-attachment: fixed;
    color:var(--dunkelblau);
    margin-bottom:100px;
	font-size:16px;
}

header, nav {background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 40%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0) 100%); font-size: 1rem;}
header { height:130px;}


h1 {font-size:1.4rem; font-weight: 600; color: var(--mittelblau); margin-bottom: 14px;}

p, li {font-size:1rem; line-height:140%;}
p {margin-bottom:14px;}

.logo {width:340px; margin:30px 0 0 0px }

.zitat {background-color:rgba(179, 194, 205, 0.8); padding:100px 20px 20px 30px; margin-top:120px; border-radius: 10px; line-height:180%; background-image: url("../img/anfuehrung.png"); background-repeat: no-repeat; background-size:26px; background-position:20px 60px; min-width:240px;}

.zitat h1 {color:var(--lilablau); text-transform: uppercase; font-weight:600; letter-spacing: 1px; font-size:15px;}
.zitat h1 strong {font-weight:700; color:white;}

.foto {display: block; width:160px; position: absolute; top:-120px; left:60px;}
.foto2 {display: block; width:160px; position: absolute; top:-100px; left:200px;}

.abst {margin-top:120px !important;}

section {padding-bootom:100px;}

section {padding:30px 0; margin-top:30px; margin-bottom:50px; border:solid 1px transparent;}
#pag01 section {padding:0px 0; margin-top:0px;}

.marion, .supervisionBox {padding:40px !important; background: rgba(255,255,255,0.9)!important;} 

.box  {background-color:var(--transbox); padding:10px; margin:15px 0; border-radius: 10px;}

.box > h2 {margin:10px 0; font-size:1.1em;}

.supervisionBox {margin-bottom:15px;}
.supervisionBox ul {list-style-position: outside;padding-left: 0.3em;}
.supervisionBox li {text-indent: 0; padding-left:0.3em;}

.grafik img {max-width:400px;}


footer {height:40px; line-height:40px; width:100%; position:fixed; bottom:0; left:0; background-color:var(--mittelblau);}

footer a {color:var(--hellblau); margin-top:30px;}

.kontakt a, #seminare a {
  text-decoration: none;
  color: var(--mittelblau);
  font-weight: 600;
  transition: color 0.3s ease;
}

.kontakt a:hover, #seminare a:hover {
  color: var(--mittelblau);
  text-decoration: underline;
}


#pag01 a.men01, #pag02 a.men02, #pag03 a.men03, #pag04 a.men04, #pag05 a.men05 {text-decoration: underline;}

.container {
    max-width: 1230px; /* 1170 + 2*30 */
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

.keinAbst {padding:0;}

.imgFull {width:100%;}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

[class^="col-"] {
    width: 100%;
}



/* -- ############################################################################# */



@media (min-width: 768px) {

.zitat {background-color:rgba(255, 255, 255, 0.9); padding:40px 30px 30px 80px; margin-top:100px; border-radius: 10px; line-height:230%; background-image: url("../img/anfuehrung.png"); background-repeat: no-repeat; background-size:26px; background-position:40px 40px; margin-right:160px;}
	
	header { height:160px;}
	
	nav a {font-size:1.2rem; }

.zitat h1 {font-size:20px;}
.zitat h1 strong {font-weight:900;}

.foto {display: block; width:170px; position: absolute; top:120px; left:-120px;}
	.foto2 {display: block; width:170px; position: absolute; top:20px; left:610px;}
	
	.abst {margin-top:0px !important;}


    .row {
        display: flex;
        justify-content: space-between;
    }

    .col-1 {
        width: 5.9829059829%; /* (1*70 + 0*30) / 1170 * 100% */
    }

    .col-2 {
        width: 14.5299145299%; /* (2*70 + 1*30) / 1170 * 100% */
    }

    .col-3 {
        width: 23.0769230769%; /* (3*70 + 2*30) / 1170 * 100% */
    }

    .col-4 {
        width: 31.6239316239%; /* (4*70 + 3*30) / 1170 * 100% */
    }

    .col-5 {
        width: 40.1709401709%; /* (5*70 + 4*30) / 1170 * 100% */
    }

    .col-6 {
        width: 48.7179487179%; /* (6*70 + 5*30) / 1170 * 100% */
    }

    .col-7 {
        width: 57.264957265%; /* (7*70 + 6*30) / 1170 * 100% */
    }

    .col-8 {
        width: 65.811965812%; /* (8*70 + 7*30) / 1170 * 100% */
    }

    .col-9 {
        width: 74.358974359%; /* (9*70 + 8*30) / 1170 * 100% */
    }

    .col-10 {
        width: 82.905982906%; /* (10*70 + 9*30) / 1170 * 100% */
    }

    .col-11 {
        width: 91.452991453%; /* (11*70 + 10*30) / 1170 * 100% */
    }

    .col-12 {
        width: 100%; /* (12*70 + 11*30) / 1170 * 100% */
    }


}





/* Grid debug mode */
html.debug [class^="col-"] {
    position: relative;
}

html.debug [class^="col-"]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(255, 0, 0, 0.2);
    pointer-events: none;
}