/* ==========================================================================
     Schicke Styles fuer K i F
   ==========================================================================
   * Basiert auf Phil Warehams Textpattern default theme => github.com/textpattern/textpattern-default-theme
   *
   * 23-07-2015, martin niggemann, weltrettung.org
   */


/*   Farben
   ========================================================================== 
   * kif-rot        #eb1c25;
   * textgrau       #534e4e;
   */

/*   Fonts
   ========================================================================== 
   * Source Sans Pro, moeglische Schnitte: 200, 300, 400, 600, 700, 900 
   */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,600italic);



/* ==========================================================================
     Styling und Layout fuer alle Ausgabegeraete
   ========================================================================== */


/*   Verkuerzte Version von Normalize.css
   ========================================================================== */
/* => necolas.github.com/normalize.css/ */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary 
													{ display: block; }
audio, canvas, video 								{ display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) 								{ display: none; height: 0; }
[hidden] 											{ display: none; }
html 												{ font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
p, pre 												{ margin: 1em 0; }
b, strong 											{ font-weight: bold; }
q 													{ quotes: none; }
q:before, q:after 									{ content: ""; content: none; }
sub, sup 											{ /* 12px */ font-size: .857em; line-height: 0; position: relative; vertical-align: baseline; }
sup 												{ top: -0.5em; }
sub 												{ bottom: -0.25em; }
img 												{ border: 0; -ms-interpolation-mode: bicubic; }
table 												{ margin-bottom: 1em; border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td 												{ vertical-align: top; text-align: left; }
dl, menu, ol, ul 									{ margin: 1em 0; } 
dd 													{ margin: 0 0 0 2em; }
dl dl, ul ul, ol ol 								{ margin: 0; }
menu, ol, ul 										{ padding: 0 0 0 2em; }

/* Firefox */
:focus 												{ outline: none; }
::-moz-focus-inner 									{ border: 0; }

/* iOS only */
input[type=submit],
input[type=button] 									{ -webkit-appearance: none; }

/* Text-Highlighting */
*::selection										{ background: #eb1c25; color: white; }
*::-moz-selection									{ background: #eb1c25; color: white; }
*::-webkit-selection 								{ background: #eb1c25; color: white; }


/*   Clearfix
   ========================================================================== */
/* Upgedatet um kollabierende Margins von Kind-Elementen in den meisten Faellen zu verhindern
   => nicolasgallagher.com/micro-clearfix-hack/ */

.clearfix, header, nav ul, .container, footer, #paginator, #monthly-list 
													{ /* zoom IE7 fix */ *zoom: 1; }
.clearfix:before, .clearfix:after, header:before, header:after, nav ul:before, nav ul:after, .container:before, .container:after, footer:before, footer:after, #paginator:before, #paginator:after, #monthly-list:before, #monthly-list:after 
													{ content: ""; display: table; }
.clearfix:after, header:after, nav ul:after, .container:after, footer:after, #paginator:after, #monthly-list:after 
													{ clear: both; }



/* ==========================================================================
     Styling und Layout fuer Screen (mobile first)
   ========================================================================== */


@media screen {


/*   Layout
   ========================================================================== */

body 												{ margin: 0; background: white; }
.wrapper 											{ padding-top: .4em; background: #fff; }

header, .container		 							{ margin: 0 auto; width: 61.666%; max-width: 128.571em; width: 93.75%; }
header 												{ padding: .8em 0; position: relative; }
header h2											{ display: none; }
header h2 a											{ margin: 0 .5em; }

.logo img											{ width: 10.02em; height: 8.143em; }
.keyVisual											{ width: 100%; background: #eb1c25; }
.keyVisual h1 										{ margin: 0; padding: .5em 0; color: white; text-align: center; font-size: 3.4em; letter-spacing: 1px; }

[role="article"] 									{ margin-bottom: 2em; }

#sponsor img, footer img							{ vertical-align: top; margin: 0 0 1em 1em; max-width: 10em; }
.col-50												{ /* width: 46.5%; margin-right: 3%; float: left; */ }
.clear												{ clear: both; }

footer 												{ padding: 1em 0; background: #eb1c25; }
footer p, footer em, footer h2 a					{ color: white; }
footer h2											{ text-align: right; }
img.isg												{ border: 5px solid white; width: 9em; }
#contentinfo										{ margin: 0 auto; width: 93.75%; }


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

a 													{ position: relative; text-decoration: none; color: #eb1c25; -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5); }
a:hover, a:active 									{ outline: 0; }
a:active 											{ top: 1px; }
a:focus 											{ /* outline: thin dotted #06f; */ }
[role="main"] a										{ padding: 0 1px; }
[role="main"] a:hover, [role="main"] a:active, footer a:hover, footer a:active 
													{ color: white; background: #eb1c25; border-radius: 0.2em; }
[role="main"] #sponsor a:hover						{ background: transparent; }


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

body 												{ font-family: "Source Sans Pro", sans-serif; /* 14px / 16px */ font-size: 0.875em; line-height: 1.5; color: #444; }

nav 												{ font-weight: bold; }

p													{ font-size: 1.143em; margin: 1em 0 1.35em; }
h1 													{ background: #eb1c25; color: white; letter-spacing: 2px; text-align: center;
													  font-weight: 600; font-style: italic; font-size: 2.0em; line-height: 1.214; margin: .667em 0; padding: .2em 0; }
h1:first-child 										{ margin-top: 0; }
h2 													{ font-weight: 600; font-style: italic; font-size: 1.4em; line-height: 1.333; margin: .750em 0; color: #eb1c25; }
h3 													{ font-weight: 600; font-style: italic; font-size: 1.4em; line-height: 1.444; margin: 1.8em 0 .6em; color: #eb1c25; padding-top: .2em; border-top: 0.214em solid #eb1c25; }
h4 													{ font-weight: 600; font-style: italic; font-size: 1.143em; margin: 0; }

blockquote 											{ /* 16px */ font-size: 1.143em; font-style: italic; margin: .875em 0 .875em 0; padding: 1px .875em; -moz-border-radius: .357em; border-radius: .357em; background: #fff6d3; }

strong												{ font-weight: 600; }
em													{ font-weight: normal; font-style: normal; color: #eb1c25; }
small, figcaption, tfoot, .footnote 				{ /* 12px */ font-size: .857em; }
figcaption, tfoot, .footnote 						{ color: #888; }
figcaption 											{ margin-top: .333em; font-style: italic; }


/*   Eingebettete Medien
   ========================================================================== */

img, video 											{ max-width: 100%; height: auto; }
figure 												{ margin: 0; }

img.align-left 										{ float: left; margin: 1em 1em 1em 0; } 
img.align-right 									{ float: right; margin: 1em 0 1em 1em; } 
img.align-center 									{ display: block; margin: 1em auto; }

svg:not(:root) 										{ overflow: hidden; } /* corrects overflow displayed oddly in IE9 */


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

caption 											{ font-style: italic; text-align: left; margin-bottom: .5em; }
th, td 												{ border-bottom: solid 1px #ccc; padding: .286em .5em .286em 0; }
th:last-child, td:last-child 						{ padding-right: 0; }
thead th, thead td 									{ border-bottom: solid 2px #ccc; }
tfoot th, tfoot td 									{ border-bottom: 0; padding: .333em .583em .333em 0; }
tfoot:last-child 									{ padding-right: 0; }


/*   Listen
   ========================================================================== */

dt 													{ font-style: italic; }
[role="main"] #article-list 						{ list-style: none; margin: 0 0 2em 0; padding: 0; border-top: solid 1px #ccc; }
#article-list li 									{ border-bottom: solid 1px #ccc; padding-top: 1em; margin-bottom: 0; }


/*   Plugins etc
   ========================================================================== */


/* ==========================================================================
     Ende @media screen
   ========================================================================== */

}



/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 490px und darueber
   ========================================================================== */


@media only screen and (min-width: 35em) {

header h2											{ display: block; width: 67%; text-align: right; position: absolute; bottom: 0; right: 0; }
.col-50												{ width: 46.5%; margin-right: 3%; float: left; }

}



/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 672px und darueber
   ========================================================================== */


@media only screen and (min-width: 48em) {

header, nav ul, .container, #contentinfo			{ width: 61.666%; }
.keyVisual											{ width: 100%; max-width: 128.571em; margin: 0 auto; background: #eb1c25 url(../images/header-stephanie-luening-schauminsel.jpg) center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }
.keyVisual h1 										{ margin: 0; padding: 1.8em 0; color: white; text-align: center; font-size: 6.4em; letter-spacing: 3px; background: transparent; }
h1													{ font-size: 2.3em; }

}



/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 1280px und darueber
   ========================================================================== */


@media only screen and (min-width: 80em) {

body 												{ /* 16px */ font-size: 100%; }

}



/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 1680px und darueber
   ========================================================================== */


@media only screen and (min-width: 104.5em) {

body 												{ /* 18px */ font-size: 112.5%; }

}



/* ==========================================================================
     Fix fuer reponsive eingebettete Medien im IE8
   ========================================================================== */


@media \0screen {

img, video 											{ width: auto; }

}



/* ==========================================================================
     Druckversion
   ========================================================================== */


@media print {

/* Schwarz druckt schneller => sanbeiji.com/archives/953 */
* 													{ color: black !important; text-shadow: none !important; background: transparent !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
body 												{ font-family: "Source Sans Pro", sans-serif; font-size: 8pt; line-height: 1.5; margin: .5cm; padding: 2em 5em; }
header 												{ border-bottom: solid 1pt black; }
footer 												{ margin-top: 12pt; border-top: solid 1pt black; }
/* Unwichtiges verstecken */
nav, audio, video, form, [role="complementary"], #paginator, #comments-form, .comments h4 a:last-child 
													{ display: none; }
/* URLs von Links mitdrucken */
a 													{ text-decoration: none; }
a[href]:after 										{ content: " (" attr(href) ")"; }
h1 a[href]:after, h2 a[href]:after, h3 a[href]:after, sup a[href]:after, a[itemprop="discussionUrl"]:after, a[rel="tag"]:after 
													{ content: ""; }
/* Abkuerzungen ausschreiben */
abbr[title]:after 									{ content: " (" attr(title) ")"; }
h1 													{ font-size: 32pt; line-height: 36pt; font-weight: normal; margin: .5em 0; }
h2 													{ font-size: 18pt; line-height: 23pt; page-break-after: avoid; orphans: 3; widows: 3; margin: .667em 0; }
h3 													{ font-size: 12pt; line-height: 17pt; page-break-after: avoid; orphans: 3; widows: 3; margin: .667em 0; }
p 													{ orphans: 3; widows: 3; }
footer, figcaption, tfoot, small, .footnote 		{ font-size: 6pt; }
blockquote 											{ border: solid 1pt black; padding: 0 8pt; page-break-inside: avoid; }
pre 												{ margin-bottom: 8pt; border: solid 1pt black; padding: 8pt; }
.comments 											{ page-break-inside: avoid; }
pre, code, kbd, samp, var 							{ font-family: "Courier New", Courier, monospace; }
dfn, q, dt 											{ font-style: italic; }
img 												{ max-width: 100% !important; page-break-inside: avoid; }
img.align-left 										{ float: left; margin: 1em 1em 1em 0; }
img.align-right 									{ float: right; margin: 1em 0 1em 1em; }
img.align-center 									{ display: block; margin: 1em auto; }
audio 												{ display: none; }
figure 												{ margin-bottom: 8pt; }
figcaption 											{ margin-top: 4pt; }
ul 													{ list-style: square; margin: 0 0 8pt 1.8em; }
ol 													{ list-style: decimal; margin: 0 0 8pt 1.8em; }
dl 													{ margin: 0 0 8pt 1.8em; }
table 												{ margin-bottom: 8pt; width: 100%; }
caption 											{ font-weight: bold; text-align: left; margin-bottom: 4pt; }
/* Tabellenkopf ueber mehrere Seiten hinweg drucken => css-discuss.incutio.com/wiki/Printing_Tables */
thead 												{ display: table-header-group; }
thead th 											{ border-top: solid 1pt black; }
tr 													{ page-break-inside: avoid; }
th, td 												{ border-bottom: solid 1pt black; padding: 4pt 8pt; }

}